@charset "utf-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500');

@font-face {
    font-family: 'DemiLight';
    font-style: normal;
    font-weight: 350;
    src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: local('Noto Sans Light'), local('NotoSans-Light'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Light-Hestia.eot),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Light-Hestia.eot?#iefix) format('embedded-opentype'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Light-Hestia.woff) format('woff'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Light-Hestia.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 350;
    src: local('Noto Sans DemiLight'), local('NotoSans-DemiLight'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-DemiLight-Hestia.eot?#iefix) format('embedded-opentype'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-DemiLight-Hestia.woff) format('woff'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-DemiLight-Hestia.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans Regular'), local('NotoSans-Regular'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Regular-Hestia.eot),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Regular-Hestia.eot?#iefix) format('embedded-opentype'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Regular-Hestia.woff) format('woff'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Regular-Hestia.otf) format('opentype');
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: local('Noto Sans Medium'), local('NotoSans-Medium'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Medium-Hestia.eot),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/eot/NotoSansKR-Medium-Hestia.eot?#iefix) format('embedded-opentype'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/woff/NotoSansKR-Medium-Hestia.woff) format('woff'),
    url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/fonts/otf/NotoSansKR-Medium-Hestia.otf) format('opentype');
}
@font-face { 
	font-family: 'futuraBT';
	font-style: normal;
	font-weight: 500;
	src: url(/font/futuraBT_medium.eot); /* IE 6 ~ 8, IE 호환성 보기 */
	src: local(☺),
		url(/font/futuraBT_medium.woff) format('woff'), /* IE 9+, 모던 브라우저 */
		url(/font/futuraBT_medium.ttf) format('truetype');
}

*{margin:0;padding:0}
html,body{width:100%;height:100%}
html{overflow-y:scroll; font-family:"Noto Sans KR", "나눔고딕","NanumGothic",'Nanum Gothic',"돋움",dotum,sans-serif;}
body{*word-break:break-all;-ms-word-break:break-all; font-family:"Noto Sans KR", "나눔고딕","NanumGothic",'Nanum Gothic',"돋움",dotum,sans-serif;}
body,h1,h2,h3,h4,h5,h6,th,td,input,textarea,select,option{color:#555;font-family:'Noto Sans KR', '나눔고딕', 'NanumGothic', 'Nanum Gothic', '돋움',dotum,sans-serif;font-size:100%;font-weight:normal}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,svg {display: block;}
table {border-collapse: collapse; border-spacing: 0;}
img,fieldset,iframe{border:0 none}
ul,ol,li{list-style:none}
em,address{font-style:normal}
img,input,select,textarea{vertical-align:middle}
input{-webkit-appearance: none; -webkit-border-radius: 0;}
a{color:inherit;text-decoration:none;cursor:pointer}
a:hover{color:inherit; text-decoration:none}
button,label{cursor:pointer;_cursor /**/:hand}
button *{position:relative}
button img{left:-3px;*left:auto}
html:first-child select{height:20px;padding-right:6px}
option{padding-right:6px}
textarea{overflow:auto;*margin:-1px 0;padding-right:1px}
.blind, legend, caption{position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px);}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
hr{display:none}
legend{*width:0}
:root legend{margin-top:-1px;font-size:0;line-height:0}
caption{*line-height:0}
sub {font-size:10px;}
.clear:after {clear:both;content:'';display:block;}
#bg{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;z-index:1001;}
div.ie_alert_text {display:none;position: fixed;top: 0;left: 0;width: 100%;height: 50px;background: #ddd;z-index: 10000;text-align: center;padding-top: 10px;font-size: 13px;font-family: 'Noto Sans KR', sans-serif;}
#skip-nav {font-size: 16px;line-height: 40px;position: fixed;z-index: 100000;top: -40px;left: 0;width: 100%;-webkit-transition: .4s;transition: .4s;text-align: center;color: #fff;background: rgba(0,0,0,.6);}
#skip-nav:focus{top:0}
#bg{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;z-index:1001}
#bg1{position:fixed;left:0;top:0;width:100%;height:100%;/* background:rgba(0,0,0,0.7); */display:none;z-index:1001}
/* module --------------------------------------------------------------------------------------------------------------------*/
/* ye_rin@designpixel.kr */
/* -------- 수정시 재선언하시거나 해당 클래스명을 지워주세요 -------- */
[class*="col-"][class*="-1"]{width: 100%;}
[class*="col-"][class*="-2"]{width: 50%;}
[class*="col-"][class*="-3"]{width: 33.33%;}
[class*="col-"][class*="-4"]{width: 25%;}
[class*="col-"][class*="-5"]{width: 20%;}
[class*="col-"][class*="-6"]{width: 16.66%;}
[class*="col-"][class*="-7"]{width: 14.28%;}
[class*="col-"][class*="-8"]{width: 12.5%;}
/* con */
[class*="con-"][class*="-1000"]{width: 1000px;margin:0 auto;}
[class*="con-"][class*="-1100"]{width: 1100px;margin:0 auto;}
[class*="con-"][class*="-1200"]{width: 1200px;margin:0 auto;}
[class*="con-"][class*="-1300"]{width: 1300px;margin:0 auto;}
[class*="con-"][class*="-1400"]{width: 1400px;margin:0 auto;}
[class*="con-"][class*="-1500"]{width: 1500px;margin:0 auto;}
/* lang ko en */
#container [lang="ko"]{font-family:"Noto Sans KR", "나눔고딕","NanumGothic",'Nanum Gothic',"돋움",dotum,sans-serif !important;}
#container [lang="en"]{font-family:'Montserrat', sans-serif !important;}
/* margin-top 0 5 10 15 20 ··· 150 */
.mt00{margin-top:0px !important;}.mt05{margin-top:5px !important;}.mt10{margin-top:10px !important;}.mt15{margin-top:15px !important;}.mt20{margin-top:20px !important;}
.mt25{margin-top:25px !important;}.mt30{margin-top:30px !important;}.mt35{margin-top:35px !important;}.mt40{margin-top:40px !important;}.mt45{margin-top:45px !important;}.mt50{margin-top:50px !important;}
.mt55{margin-top:55px !important;}.mt60{margin-top:60px !important;}.mt65{margin-top:65px !important;}.mt70{margin-top:70px !important;}.mt80{margin-top:80px !important;}.mt90{margin-top:90px !important;}
.mt100{margin-top:100px !important;}.mt105{margin-top:105px !important;}.mt110{margin-top:110px !important;}.mt115{margin-top:115px !important;}.mt120{margin-top:120px !important;}
.mt125{margin-top:125px !important;}.mt130{margin-top:130px !important;}.mt135{margin-top:135px !important;}.mt140{margin-top:140px !important;}.mt145{margin-top:145px !important;}.mt150{margin-top:150px !important;}
/* margin-bottom 0 5 10 15 20 ··· 150 */
.mb00{margin-bottom:0px !important;}.mb05{margin-bottom:5px !important;}.mb10{margin-bottom:10px !important;}.mb15{margin-bottom:15px !important;}.mb20{margin-bottom:20px !important;}
.mb25{margin-bottom:25px !important;}.mb30{margin-bottom:30px !important;}.mb35{margin-bottom:35px !important;}.mb40{margin-bottom:40px !important;}.mb45{margin-bottom:45px !important;}.mb50{margin-bottom:50px !important;}
.mb55{margin-bottom:55px !important;}.mb60{margin-bottom:60px !important;}.mb65{margin-bottom:65px !important;}.mb70{margin-bottom:70px !important;}.mb80{margin-bottom:80px !important;}.mb90{margin-bottom:90px !important;}
.mb100{margin-bottom:100px !important;}.mb105{margin-bottom:105px !important;}.mb110{margin-bottom:110px !important;}.mb115{margin-bottom:115px !important;}.mb120{margin-bottom:120px !important;}
.mb125{margin-bottom:125px !important;}.mb130{margin-bottom:130px !important;}.mb135{margin-bottom:135px !important;}.mb140{margin-bottom:140px !important;}.mb145{margin-bottom:145px !important;}.mb150{margin-bottom:150px !important;}
/* padding-top 0 5 10 15 20 ··· 150 */
.pt00{padding-top:0px !important;}.pt05{padding-top:5px !important;}.pt10{padding-top:10px !important;}.pt15{padding-top:15px !important;}.pt20{padding-top:20px !important;}
.pt25{padding-top:25px !important;}.pt30{padding-top:30px !important;}.pt35{padding-top:35px !important;}.pt40{padding-top:40px !important;}.pt45{padding-top:45px !important;}.pt50{padding-top:50px !important;}
.pt55{padding-top:55px !important;}.pt60{padding-top:60px !important;}.pt65{padding-top:65px !important;}.pt70{padding-top:70px !important;}.pt80{padding-top:80px !important;}.pt90{padding-top:90px !important;}
.pt100{padding-top:100px !important;}.pt105{padding-top:105px !important;}.pt110{padding-top:110px !important;}.pt115{padding-top:115px !important;}.pt120{padding-top:120px !important;}
.pt125{padding-top:125px !important;}.pt130{padding-top:130px !important;}.pt135{padding-top:135px !important;}.pt140{padding-top:140px !important;}.pt145{padding-top:145px !important;}.pt150{padding-top:150px !important;}
/* padding-bottom 0 5 10 15 20 ··· 150 */
.pb00{padding-bottom:0px !important;}.pb05{padding-bottom:5px !important;}.pb10{padding-bottom:10px !important;}.pb15{padding-bottom:15px !important;}.pb20{padding-bottom:20px !important;}
.pb25{padding-bottom:25px !important;}.pb30{padding-bottom:30px !important;}.pb35{padding-bottom:35px !important;}.pb40{padding-bottom:40px !important;}.pb45{padding-bottom:45px !important;}.pb50{padding-bottom:50px !important;}
.pb55{padding-bottom:55px !important;}.pb60{padding-bottom:60px !important;}.pb65{padding-bottom:65px !important;}.pb70{padding-bottom:70px !important;}.pb80{padding-bottom:80px !important;}.pb90{padding-bottom:90px !important;}
.pb100{padding-bottom:100px !important;}.pb105{padding-bottom:105px !important;}.pb110{padding-bottom:110px !important;}.pb115{padding-bottom:115px !important;}.pb120{padding-bottom:120px !important;}
.pb125{padding-bottom:125px !important;}.pb130{padding-bottom:130px !important;}.pb135{padding-bottom:135px !important;}.pb140{padding-bottom:140px !important;}.pb145{padding-bottom:145px !important;}.pb150{padding-bottom:150px !important;}

/* module --------------------------------------------------------------------------------------------------------------------*/

/* container */
#wrap, #container {width:100%;position: relative; min-width:1400px; overflow:hidden;}
#contents {position:relative;}

/* header */

#header {width:90px;height:100%;position:fixed;top:0;left: 0;transform: translateX(-90px);z-index:1100;transition: transform .8s cubic-bezier(.77,0,.175,1) .1s,opacity .3s linear .2s,-webkit-transform .8s cubic-bezier(.77,0,.175,1) .1s;opacity: 0;}

#header:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* background: rgba(255,255,255,0.7); */transition: all 800ms cubic-bezier(0.115, 0.905, 0.32, 1);}
#header.open:before{
	background: rgba(255,255,255,0.0);
}
#header.first:before {
    width: 0;
    transition-delay: 0ms;
}
#header.second:before {
    width: 0;
    transition-delay: 0ms;
}

#header.loading_ani {
    opacity: 1;
    transform: translateX(0);
}
#header h1.logo {
    position: absolute;
    top: 40px;
    left: 30px;
    z-index: 9999;
}

#header h1.logo a {
	
    width: 29px;
    height: 118px;
    display: block;
    background: url(../img/common/main_logo_vertical_gray.png) no-repeat;
}

#header.first.open h1.logo a,#header.second h1.logo a {
    background-image: url(../img/common/main_logo_vertical.png);
}
#header nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 317px;
	height: 100%;
	background: rgba(255,255,255,0.7);
	z-index: 1200;
	padding-top: 72px;
	padding-left: 80px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: .6s;
	transition: .6s;
}
#header.second nav,#header.first nav{
	background: rgba(0,0,0,0.5);
}
#header.open nav {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
#header ul.main_nav li {
    padding: 10px 0;
    line-height: 0.8;
}

#header ul.util li {
    display: inline-block;
    vertical-align: top;
}

#header ul.util li + li {
    margin-left: 2px;
}
#header ul.main_nav li a{font-family:'Montserrat';font-size: 14px;font-weight: 600;color: #000;}
#header.first ul.main_nav li a,#header.second ul.main_nav li a{
	color:#fff;
}
#header nav .bottom .util li a{
	width:30px;
	height:30px;
	display:inline-block;

}
#header nav .bottom .util li a.img1{
	background-image: url(/img/common/nav_sns01_new.png);
}
#header nav .bottom .util li a.img2{
	background-image: url(/img/common/nav_sns02_new.png);
}
#header.first nav .bottom .util li a.img1,#header.second nav .bottom .util li a.img1{
	background-image: url(/img/common/nav_sns01_w.png);
}
#header.first nav .bottom .util li a.img2,#header.second nav .bottom .util li a.img2{
	background-image: url(/img/common/nav_sns02_w.png);
}

#header nav ul.main_nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
    transform: translate(0,-50%);
}
#header nav ul.address {
    color: #000;
    font-weight: 400;
    letter-spacing: 0px;
    margin-top: 15px;
    font-size: 12px;
}
#header.first nav ul.address,#header.second nav ul.address{
	
	color: #fff;
	
}
#header nav div.bottom {
    position: absolute;
    bottom: 75px;
}
#header ul.main_nav li a:before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #333;
    opacity: 0;
    -webkit-transition: .4s;
    transition: .4s;
}
#header.first ul.main_nav li a:before, #header.second ul.main_nav li a:before{
	background: #fff;
	
}
#header ul.main_nav li a {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    display: inline-block;
}

#header ul.main_nav li:hover a:before {
    opacity: 1;
    width: 100%;
    -webkit-transition: .2s;
    transition: .2s;
}
#header ul.sns_util {
    position: absolute;
    bottom: 40px;
    left: 25px;
}
#header ul.sns_util.nav{
	display: none;
}
#header ul.sns_util a {
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/common/nav_sns01.png) no-repeat;
}
#header.second ul.sns_util a {
    background-image: url(../img/common/nav_sns01_white.png);
}
div#interior {
    position: fixed;
    top: 40px;
    z-index: 1000;
    right: 40px;
    width: 28px;
    height: 131px;
    background: url(/img/common/interior.png) no-repeat;
    background-size: 28px 131px;
    overflow: hidden;
    background-position-x: 30px;
    transition: background-position-x .8s cubic-bezier(.77,0,.175,1) .1s,opacity .3s linear .2s;
}

div#interior.loading_ani {background-position-x: 0px;}
div#interior a {
    display: block;
    height: 100%;
}
div#interior.on {
    background: url(/img/common/interior_b.png) no-repeat;
    background-size: 28px 131px;
}

#nav li {
    width: 16px;
    height: 10px;
    margin: 7px;
    position: relative;
}
#nav li a {
    display: block;
}
#nav li a span {
    width: 16px;
    height: 2px;
    border-radius: 0;
    margin: 0;
    background: #fff;
    top: 3px;
    left: 0;
    display: block;
}
#nav.on li a span {
    background: #000;
}
#nav li.active:before {
    position: absolute;
    content: '';
    width: 25px;
    height: 1px;
    background: #fff;
    top: 0px;
    left: 26px;
}
#nav.on li.active:before {
	background:#000;
}
#nav {
	right:25px;
	position: fixed;
	top: 50%;
	z-index: 1000;
}

/* footer */
#footer{min-width:1400px;background: #222;padding: 45px 0 110px;margin:0 auto;position:relative;}
#footer .wrap {width: 1315px;margin:0 auto;position:relative;overflow:hidden;padding-left: 160px;}
#footer address {
    font-size: 16px;
    letter-spacing: -0.8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    text-align: right;
}

#footer p.copy {
    font-size: 16px;
    letter-spacing: -0.8px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 300;
    text-align: right;
}

#footer address p {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

#footer address p + p {
    margin-left: 20px;
}

#footer address p + p:before {
    content: '';
    position: absolute;
    top: 8px;
    left: -11px;
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
}

#footer ul.foot_util li {
    display: inline-block;
    vertical-align: top;
}

#footer ul.foot_util li + li {
    margin-left: 20px;
}

#footer ul.foot_util {
    float: right;
    margin-top: 15px;
}

#footer h2.foot_logo {
    float: left;
}

/* pager */
.m00 .pager {margin:50px 0 0px;}
.m00 .pager ul {text-align:center; font-size:0;}
.m00 .pager ul li {display:inline-block;width: 25px;height: 25px;line-height: 25px;}
.m00 .pager ul li a {display: block;vertical-align: middle;}
.m00 .pager ul li a img {
    /* width: 38px; */
    /* vertical-align: top; */
}
.m00 .pager ul li.prev {margin-right:28px;}
.m00 .pager ul li.next {margin-right:3px; margin-left:26px;}
.m00 .pager ul li.num {margin-right:2px;}
.m00 .pager ul li.num {font-family: 'futuraBT';font-size: 14px;font-weight: 500;letter-spacing: -0.4px;color: #888888;vertical-align: middle;}
.m00 .pager ul li.num.on {}
.m00 .pager ul li.num.on a {color: #000;font-weight: bold;}


/* 햄버거 버튼 */
.bar{position:absolute;top: 54.6%;left: 35px;-webkit-transform: rotate(-90deg) translate(0, -50%);transform: rotate(-90deg) translate(0, -50%);margin-top: -10px;z-index: 2000;cursor:pointer;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:.4s ease-out;transition:.4s ease-out;}
/*.bar:before {
    position: absolute;
    content: '';
    width: 15px;
    height: 37px;
    background: url(/img/common/menu.png) no-repeat;
    top: -9px;
    left: -45px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}*/
.menu-trigger,.menu-trigger span{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
.menu-trigger{position:absolute;width: 43px;height: 18px;margin:0 auto;top: 0;left: 0;}
.menu-trigger span{position:absolute;width: 100%;height: 2px;background-color: #5a5a5a;}

#header.second .menu-trigger span {
    background: #fff;
}
#header.first.open .menu-trigger span,#header.second.open .menu-trigger span  {
    background: #fff;
}
.menu-trigger span.l1{top:0;right:0;width: 32px;}
.menu-trigger.active span.n1{top:2px}
.menu-trigger span.l2{top: 8px;right: 0;}
.menu-trigger span.l3{bottom:0;right:0;width: 23px;}
/* header open */
#header.open .bar:before {display:none;}
#header.open .menu-trigger span.l1{top: 0px;width: 70%;}
#header.open .menu-trigger span.l3{bottom: 15px;left: 25px;width: 70%;}

/* 라인이 하나로 합쳐졌다가 엑스자 만들기 */
.menu-trigger span.l1{-webkit-animation:menu-bar01 .4s forwards;animation:menu-bar01 .4s forwards}
@-webkit-keyframes menu-bar01{0%{-webkit-transform:translateX(8.5px) rotate(45deg);transform:translateX(8.5px) rotate(45deg)}
50%{-webkit-transform:translateX(8.5px) rotate(0);transform:translateX(8.5px) rotate(0)}
100%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
}
@keyframes menu-bar01{
0%{-webkit-transform:translateX(9px) rotate(45deg);transform:translateX(9px) rotate(45deg)}
50%{-webkit-transform:translateX(9px) rotate(0);transform:translateX(9px) rotate(0)}
100%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
}
.menu-trigger span.l2{opacity:1;}
.menu-trigger span.l3{-webkit-animation:menu-bar02 .4s forwards;animation:menu-bar02 .4s forwards}
@-webkit-keyframes menu-bar02{0%{-webkit-transform:translateX(-9px) rotate(-45deg);transform:translateX(-9px) rotate(-45deg)}
50%{-webkit-transform:translateX(-9px) rotate(0);transform:translateX(-9px) rotate(0)}
100%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
}
@keyframes menu-bar02{0%{-webkit-transform:translateX(-9px) rotate(-45deg);transform:translateX(-9px) rotate(-45deg)}
50%{-webkit-transform:translateX(-9px) rotate(0);transform:translateX(-9px) rotate(0)}
100%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
}
.menu-trigger.active span.l1{-webkit-animation:active-menu-bar01 .4s forwards;animation:active-menu-bar01 .4s forwards}
@-webkit-keyframes active-menu-bar01{0%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
50%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
100%{-webkit-transform:translateX(3.5px) rotate(45deg);transform:translateX(3.5px) rotate(45deg)}
}
@keyframes active-menu-bar01{0%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
50%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
100%{-webkit-transform:translateX(3.5px) rotate(45deg);transform:translateX(3.5px) rotate(45deg)}
}
.menu-trigger.active span.l2{opacity:0}
.menu-trigger.active span.l3{-webkit-animation:active-menu-bar03 .4s forwards;animation:active-menu-bar03 .4s forwards;width:100%}
@-webkit-keyframes active-menu-bar03{0%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
50%{-webkit-transform:translateX(-8.5px) rotate(0);transform:translateX(-8.5px) rotate(0)}
100%{-webkit-transform:translateX(-8.5px) rotate(-45deg);transform:translateX(-8.5px) rotate(-45deg)}
}
@keyframes active-menu-bar03{0%{-webkit-transform:translateX(0) rotate(0);transform:translateX(0) rotate(0)}
50%{-webkit-transform:translateX(-8.5px) rotate(0);transform:translateX(-8.5px) rotate(0)}
100%{-webkit-transform:translateX(-8.5px) rotate(-45deg);transform:translateX(-8.5px) rotate(-45deg)}
}

/* video popup */
#video-popup{display:none;position:fixed;top:50%;left:50%;z-index:2000;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
#video-popup .popup-close{
    position: absolute;
    cursor: pointer;
    top: 0;
    right: -50px;
}
#video-popup iframe{width:854px!important;height:480px!important}

/* popup */
.pop_today_close{padding:1px 7px 3px 7px;color:#ffffff;background:#303030;vertical-align:middle;border:0px;}
.pop_close{padding:1px 7px 3px 7px;color:#ffffff;background:#303030;vertical-align:middle;border:0px;}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}


.loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    background: #fff;
    display:table;
    width: 100%;
    height: 100%;
}
.loading .area {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
	font-size:0;
}

.loading .logo_wrap {
    width: 443px;
    margin: 0 auto;
    position: relative;
}

.loading .area .text {
	height:24px;
	overflow:hidden;
	margin-top:8px;
	display:block;
}

.loading .area span[class*='l'] {
    display: block;
    overflow: hidden;
    position: relative;
    text-align: left;
}

.loading .area span.l3 {
    height: 36px;
    padding-top: 60px;
}

.loading .area span.l2 {
    height: 35px;
    position: absolute;
    bottom: 46px;
    left: 0;
}

.loading .area span.l1 {
    height: 73px;
    position: absolute;
    bottom: 91px;
    left: 0;
}
.loading .area span[class*='l'] img {
    display: inline-block;
    position: relative;
    transform: translateY(120px);
    opacity: 0;
}

.loading .area span[class*='l'] img.on {
    transform: translateY(0px);
    opacity: 1;
    transition: transform .8s cubic-bezier(.8,0,.175,1), opacity .3s linear .2s;
}

.loading .area span.l2 img.on {
    transition-delay: .8s;
}

.loading .area span.l1 img.on {
    transition-delay: 1.8s;
}