@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

/* base */
*{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html {overflow-y:scroll}
body {font-family:'Noto Sans', Helvetica, sans-serif; font-size:12px}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0}
h1,h2,h3,h4,h5,h6 {font-weight:normal; font-size:100%}
input, select, textarea, button, label {font-size:100%; vertical-align:middle}
input, select {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}
fieldset, img, iframe {border:0 none}
img {vertical-align:middle}
textarea {resize:none}
th, td {text-align:left}
em, address {font-style:normal}
a {text-decoration:none}
a:hover,a:active,a:focus{text-decoration:none}
menu,li {list-style:none}
button {padding:0; margin:0; border:0; cursor:pointer; vertical-align:middle; background:none; font-family:'Noto Sans', Helvetica, sans-serif;}
caption {width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden}
hr {display:none}
i,em,address{font-style:normal}
label {cursor:pointer}
table {border-spacing:0; border-collapse:collapse}

/* layout */


/* nav */
nav{max-width:800px; margin:0 auto; height:50px; line-height:50px; font-size:0;}
nav a{position:relative; display:inline-block; padding:0 30px; color:#fff; font-size:14px; letter-spacing:-.5px; text-decoration:none;}

nav a:hover{color:#ffe800;}

.btn-1 a:after,
.btn-2 a:after,
.btn-3 a:after,
.btn-4 a:before, .btn-4 a:after,
.btn-5 a:before, .btn-5 a:after,
.btn-6 a:before,
.btn-7 a:before,
.btn-8 a:before,
.btn-9 a:before, .btn-9 a:after,
.btn-10 a:before, .btn-10 a:after, .btn-10 a span:before, .btn-10 a span:after,
.btn-12 a:after,
.btn-14 a:after{content:""; display:block;}


/* left-right-full */
.btn-1 a:after{position:absolute; left:0; bottom:0; width:0%; height:3px; background-color:#ffe800; -webkit-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-1 a:hover:after{width:100%;}

/* right-left-full */
.btn-2 a:after{position:absolute; right:0; bottom:0; width:0%; height:3px; background-color:#ffe800; -webkit-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-2 a:hover:after{width:100%;}


/* center-side-full-1 */
.btn-3 a:after{position:absolute; left:50%; bottom:0; width:0%; height:3px; background-color:#ffe800; transform:translateX( -50% ); -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-3 a:hover:after{width:100%;}


/* center-side-full-2 */
.btn-4 a:after{position:absolute; left:50%; bottom:0; width:0%; height:3px; background-color:#ffe800; transform:translateX( -50% ); -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-4 a:before{position:absolute; left:50%; top:0; width:0%; height:3px; background-color:#ffe800; transform:translateX( -50% ); -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-4 a:hover:after{width:100%;}
.btn-4 a:hover:before{width:100%;}


/* side-full */
.btn-5 a:after{position:absolute; left:0; top:50%; width:3px; height:0%; background-color:#ffe800; transform:translateY( -50% ); -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-5 a:before{position:absolute; right:0; top:50%; width:3px; height:0%; background-color:#ffe800; transform:translateY( -50% ); -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-5 a:hover:after{height:100%;}
.btn-5 a:hover:before{height:100%;}

/* left-right-vertical */
.btn-6 a{overflow: hidden; z-index:2}
.btn-6 a:before{position:absolute; right:100%; top:0; width:100%; height:100%; background-color:#a94646; z-index:-1; opacity:0; -webkit-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out; border-right:2px solid #ffe800;}
.btn-6 a:hover:before{opacity:1; right:0;}

/* bottom-top-horizontal */
.btn-7{overflow: hidden;}
.btn-7 a{z-index:2}
.btn-7 a:before{position:absolute; left:0; top:100%; width:100%; height:100%; background-color:#a94646; z-index:-1; opacity:0; -webkit-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out; border-top:2px solid #ffe800;}
.btn-7 a:hover:before{opacity:1; top:0;}

/* btn-8 */
.btn-8{overflow: hidden;}
.btn-8 a{z-index:2}
.btn-8 a:before{position:absolute; left:0; bottom:100%; width:100%; height:100%; background-color:#a94646; z-index:-1; opacity:0; -webkit-transition:all .2s ease-out; -o-transition:all .2s ease-out; transition:all .2s ease-out; border-bottom:2px solid #ffe800;}
.btn-8 a:hover:before{opacity:1; bottom:0;}

/* btn-9 */
.btn-9 a:after{position:absolute; left:50%; bottom:0; width:60%; height:3px; background-color:#ffe800; transform:translateX( -50% ); -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity:0;}
.btn-9 a:before{position:absolute; left:50%; top:0; width:60%; height:3px; background-color:#ffe800; transform:translateX( -50% ); -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity:0;}
.btn-9 a:hover:after{opacity:1; bottom:5px;}
.btn-9 a:hover:before{opacity:1; top:5px;}

/* btn-10 */
.btn-10 a{padding:0;}
.btn-10 a span{display:block; padding:0 30px;}
.btn-10 a:before, .btn-10 a:after, .btn-10 a span:before, .btn-10 a span:after{position:absolute; background-color:#ffe800;}
.btn-10 a:before{width:3px; height:0; left:0; bottom:0; -webkit-transition:all .1s .3s; -o-transition:all .1s .3s; transition:all .1s .3s;}
.btn-10 a:after{width:0; height:3px; left:0; top:0; -webkit-transition:all .1s .2s; -o-transition:all .1s .2s; transition:all .1s .2s;}
.btn-10 a span:before{width:3px; height:0; right:0; top:0; -webkit-transition:all .1s .1s; -o-transition:all .1s .1s; transition:all .1s .1s;}
.btn-10 a span:after{width:0; height:3px; right:0; bottom:0; -webkit-transition:all .1s; -o-transition:all .1s; transition:all .1s;}
.btn-10 a:hover:before{height:100%; -webkit-transition:all .1s; -o-transition:all .1s;	transition:all .1s;}
.btn-10 a:hover:after{width:100%; -webkit-transition:all .1s .1s; -o-transition:all .1s .1s; transition:all .1s .1s;}
.btn-10 a:hover span:before{height:100%; -webkit-transition:all .1s .2s; -o-transition:all .1s .2s; transition:all .1s .2s;}
.btn-10 a:hover span:after{width:100%;	-webkit-transition:all .1s .3s;	-o-transition:all .1s .3s; transition:all .1s .3s;}
/* btn-11 */
.btn-11{position:relative; overflow:hidden;}
.btn-11 span.effect{position:absolute; left:0; bottom:0; width:0; height:3px; background-color:#ffe800; -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
/* btn-12 */
.btn-12 a:after{position:absolute; left:50%; top:50%; width:0%; height:2px; background-color:#ffe800; transform:translateX( -50% );
-webkit-transition:width .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-o-transition:width .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition:width .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn-12 a.off:after{width:90%;}
/* btn-13 */
.btn-13{position:relative;}
.btn-13 span.dot{width:7px; height:7px; position:absolute; left:0; bottom:0; transform:translateY( 50% ); background-color:#ffe800; border-radius:50%; -webkit-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .3s cubic-bezier(0.68, -0.55, 0.265, 1.55); opacity:0;}

/* btn-14 */
.btn-14 a{position:relative;}
.btn-14 a:after{width:100%; height:100%; position:absolute; left:0; top:0; border:0px solid #ffe800; box-sizing:border-box;
	-webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; transition:all .2s ease-in-out; opacity:0;}
.btn-14 a:hover:after{border-width:5px; opacity:1;}
/* btn-15 */
.btn-15{overflow: hidden;}
.btn-15 a{position:relative; -webkit-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition:all .4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.btn-15 a:after{content:attr( data-menu-name ); display:block; width:100%; height:100%; position:absolute; left:0; top:0; text-align:center;
	-webkit-transform:translateY( -100% );
	-ms-transform:translateY( -100% );
	-o-transform:translateY( -100% );
	transform:translateY( -100% );
}
.btn-15 a:hover{
	-webkit-transform:translateY( 100% );
	-ms-transform:translateY( 100% );
	-o-transform:translateY( 100% );
	transform:translateY( 100% );
}