button, mark{ background:transparent;cursor:pointer;vertical-align:middle;font-family:'NanumSquare_R','맑은고딕',Malgun Gothic,Apple-Gothic,verdana,arial;font-size:18px;letter-spacing: -0.025em; border:0px;}

body header.header:before {content:'';height:0px;background:rgba(0,0,0,0.7);position:fixed;width:100%;top:0px;transition:all 0.3s ease;opacity:0;z-index:0;}
body.scrollfix header.header:before {opacity:1;height:100px;}
html.navigate body.scrollfix header.header:before {opacity:0;}
body.scrollfix .header h1, .header h2 {left:50px;top:30px;}
body.scrollfix .nav-button {top:20px;right:50px;transition:all 0.3s ease;}
html.navigate {overflow:hidden;}


.header {position: fixed; left: 0; right: 0; top: 0; z-index: 5;}
.header h1,
.header h2 {position: absolute; left: 100px; top: 69px; font-family: 'Proxima Nova','NanumSquare_R'; font-size: 30px; font-weight: 900; line-height: 1; z-index: 5;transition:all 0.3s ease;}
.header h2 {left: auto; right: 185px; opacity: 0;
transform: translate3d(30px, 0, 0);
transition: opacity 1s, transform 1s cubic-bezier(0.190, 0.920, 0.320, 1.000);
}
.header h2.fix,
.displayed .header h2 {opacity: 1;
transform: translate3d(0, 0, 0);
}
.nav-button {position: fixed; right: 95px; top: 52px; z-index: 10001;transition:all 0.3s ease;}
.nav-button button {width: 60px; height: 60px; text-indent: -999em; background: rgba(255, 255, 255, 0); display: block; overflow: hidden;
transition: transform 0.4s;
}
.nav-button button.step1 {
transform: translateZ(0.001px); /* ie doesn't fire event via psuedo element */
}
.nav-button button.step2 {
transform: translateZ(0.002px);
}
.nav-button button:before,
.nav-button button:after {position: absolute; left: 10px; top: 22px; width: 40px; height: 1px; content: ''; background: #fff;
transition: transform 0.4s cubic-bezier(0.165, 0.840, 0.440, 1.000), background-color 0.2s ease-out;
}
.nav-button button:after {top: 37px;}
.nav-button button:hover:before {
transform: translate3d(0, -2px, 0);
}
.nav-button button:hover:after {
transform: translate3d(0, 2px, 0);
}
.nav-button button.step1:before {
transform: translate3d(0, 7px, 0);
transition-duration: 0.2s;
}
.nav-button button.step1:after {
transform: translate3d(0, -8px, 0);
transition-duration: 0.2s;
}
.nav-button button.step2:before {
background-color: #727272;
transform: translate3d(0, 7px, 0) rotateZ(-45deg);
transition-duration: 0.4s;
}
.nav-button button.step2:after {
background-color: #727272;
transform: translate3d(0, -8px, 0) rotateZ(45deg);
transition-duration: 0.4s;
}
body:before,
.header,
.nav-button {
transition: transform 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);transition:all 0.3s ease;
}
.reduced-header .header,
.reduced-header .nav-button {
transform: translate3d(0, -40px, 0);
}
@media(max-width:767px) {
.type-index .scroller {height: auto;}
.header h1,
.header h2 {left: 20px; top: 32px; font-size: 17px; line-height: 1;}
.header h2 {left: auto; right: 58px;}
.nav-button {right: 18px; top: 18px;}

body.scrollfix .header h1, .header h2 {left:20px;top:32px;}
body.scrollfix .nav-button {top:18px;right:18px;transition:all 0.3s ease;}
body.scrollfix header.header:before {opacity:1;height:80px;}

.nav-button button {width: 44px; height: 44px; -background: rgba(255, 255, 255, 0.1);}
.nav-button button:before,
.nav-button button:after {left: 10px; top: 17px; width: 24px; height: 1px;}
.nav-button button:after {top: 26px;}
.nav-button button:hover:before,
.nav-button button:hover:after {
transform: translate3d(0, 0, 0);
}
.nav-button button.step1:before {
transform: translate3d(0, 4px, 0);
}
.nav-button button.step1:after {
transform: translate3d(0, -5px, 0);
}
.nav-button button.step2:before {
transform: translate3d(0, 4px, 0) rotateZ(-45deg);
}
.nav-button button.step2:after {
transform: translate3d(0, -5px, 0) rotateZ(45deg);
}
body:before {height: 50px;}
.reduced-header .header,
.reduced-header .nav-button {
transform: translate3d(0, -20px, 0);
}
}

.navigation {position: fixed; left: 0; right: 0; top: 0; bottom: 0; color: #1c1c1c; z-index: 10000; visibility: hidden; overflow: hidden;
transition: visibility 0.7s;
}
.navigate .navigation {visibility: visible;}
.navigation .background {position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #fff; z-index: 0;
transform: translate3d(0, 100%, 0);
transition: transform 0.5s cubic-bezier(0.190, 0.920, 0.320, 1.000);
}
.navigation a {color: #1c1c1c;}
.navigation .header {position: absolute;}
.navigate .navigation .background {
transform: translate3d(0, 0, 0);
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.navigation .mask {position: absolute; left: 0; right: 0; top: 100%; bottom: 0; background: #fff; overflow: hidden; z-index: 1;
transition: top 0.5s cubic-bezier(0.190, 0.920, 0.320, 1.000);
}
.navigate .navigation .mask {top: 0;
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.navigation .inwrap {position: absolute; left: 0; right: 0; bottom: 0; height: 875px;}
.navigation .menu {position: absolute; left: 100px; top: 50%;
transform: translateY(-50%);
}
.ie .navigation .menu a span {padding-left: 1.5px;}
.navigation .menu > li > span {position:relative;font-family:'Nanum Myeongjo';font-size:80px;font-weight:900;color:#1c1c1c;line-height:90px;display:inline-block;cursor:pointer;}
.navigation .menu > li > span {display:block;transition:all .3s ease;
/*transition: transform 0.7s cubic-bezier(0.190, 0.920, 0.320, 1.000);*/
}
.navigation .menu > li .submun {display:none;/*transition:all .3s ease*/padding-left:25px;}
.navigation .menu > li .submun ul li {font-family:notokr;}
.navigation .menu > li .submun ul li a {font-size:18px;line-height:2;}
/*.navigation .menu > li.on .submun {display:block;}*/
/*
.hoverable .navigation .menu a:hover span {
transform: translate3d(20px, 0, 0);
}*/
.navigation .menu .deco {position: absolute; left: 0; top: 17px; width: 1px; height: 53px; background: #1c1c1c; opacity: 0;
transition: opacity 0.15s ease-out, transform 0.15s cubic-bezier(0.190, 0.920, 0.320, 1.000);
}
.navigation .menu .deco.show {opacity: 1;
transition-duration: 0.55s;
}
/**/
.navigation .menu > li > span:before {position: absolute; left: 0; top: 20px; width: 1px; height: 53px; content: ''; background: #21bbb1; opacity: 0;
/*transform: scaleY(0.9);*/
transition: opacity 0.25s ease-out, transform 0.25s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
.touchable .navigation .menu a:before {display: none;}
.navigation .menu > li:hover span:before {opacity: 1;
transform: scaleY(1);
transition-duration: 0.5s;
}
.navigation .menu > li.on span:before {opacity: 1;
transform: scaleY(1);
transition-duration: 0.5s;
}
.navigation .menu > li:hover span {padding-left:20px;}
.navigation .menu > li.on span {padding-left:20px;}
/**/
.navigation .footer {position: absolute; left: 0; bottom: 0;}
.navigation .footer .social-medias .vimeo {background-position: 0 -40px;}
.navigation .footer .social-medias .facebook {background-position: -40px -40px;}
.navigation .footer .social-medias .instagram {background-position: -80px -40px;}

@media(max-width:1280px) {
.navigation .menu > li > span {font-size:40px;line-height:50px;}
.navigation .menu > li > span:before {height:29px;top:13px;}
.navigation .menu > li .submun ul li {font-size:15px;}
.navigation .menu > li .submun ul li a {font-size:15px;}
}

@media(max-width:767px) {
.navigation .menu {left: 20px;}
/*.navigation .menu a {font-size: 36px; line-height: 45px;}*/
.navigation .menu a:before {top: 9px; height: 25px;}
.header h1 a > img {width:100px;}

}

body.scrollfix .header .login {top:35px;right:120px}
.header .login {position:fixed;top:30px;right:100px;font-size:13px;color:#fff;line-height:2;font-family:'NanumSquare_R',Malgun Gothic,Apple-Gothic,verdana,arial;height:30px;transition:all 0.3s ease}
.header .login ul {}
.header .login ul li {display:inline-block;}
.header .login ul li a {font-size:13px;color:#fff;line-height:2;font-family:'NanumSquare_R',Malgun Gothic,Apple-Gothic,verdana,arial;height:30px;}
.header .login ul li span {color:#fff;height:30px;}

@media(max-width:767px) {
body.scrollfix .header .login {top:27px;right:80px}
.header .login {position:fixed;top:27px;right:80px}
}