@charset "utf-8";
/*@import url(//db.onlinewebfonts.com/c/9e8905c9ac3c5e775c39bd300203d834?family=IndustryW00-Demi);*/

@import url('./animation.css');
@font-face { font-family: '양진체'; src: url('https://cdn.jsdelivr.net/gh/supernovice-lab/font@0.9/yangjin.woff') format('woff'); font-weight: normal; font-style: normal; }

html {height:100%; font-family:'Nanum Gothic';}
body {position:relative; min-width:1400px; min-height:100%; height:auto;}
body * {box-sizing: border-box;}

label,button,input {cursor:pointer;}

.gotoTop {position:fixed; width:11px; height:57px; right:50%; margin-right:-860px; bottom:130px; z-index:1000; background:url('/assets/img/common/img_top.png') no-repeat 50% 50%; text-indent:-999px; overflow:hidden;}

#header {display:block; position:absolute; top:0; left:50%; width:1720px; margin-left:-860px; z-index:1000;}
#footer {display:block; position:absolute; bottom:50px; left:50%; width:1720px; margin-left:-860px; z-index:1000;}
@media all and (max-width:1720px) {
	#header {left:0; right:0; margin-left:0; width:auto;}
	#footer {left:0; right:0; margin-left:0; width:auto;}
	.gotoTop {margin-right:0; right:10px;}
}

#logo {position:absolute; top:50px; left:0; width:230px; height:25px; background:url('/assets/img/common/logo.png') no-repeat 50% 50%; overflow:hidden; text-indent:-999px; transition:.3s all; -webkit-transition:.3s all;}
#logo:hover {
	animation-name: swing;
	animation-duration: .2s;
	animation-fill-mode: both;
	animation-iteration-count: 1;
	-wbkit-animation-name: swing;
	-wbkit-animation-duration: .2s;
	-wbkit-animation-fill-mode: both;
	-wbkit-animation-iteration-count: 1;
}

#header .top-effect {position:absolute; top:50px; right:115px; font-family:'IndustryW00-Demi'; font-size:22px; transition:.3s all; -webkit-transition:.3s all;}
#header .top-effect span {display:inline-block; position:relative; vertical-align:middle;}
#header .top-effect .point {display:inline-block; position:relative; width:.75em; height:1em; text-indent:-999px;}
#header .top-effect .point:before {content:""; display:block; position:absolute; top:7px; left:.3em; width:1px; background:#000; height:93px; transition:.3s all; transition:.3s all;}
#header .top-effect .point i {display:block; position:absolute; bottom:-120px; left:50%; margin-left:-10px; width:39px; height:37px; background:url('/assets/img/common/ico_n.png') no-repeat 0 0; overflow:hidden; text-indent:-999px; transform-origin: 3px 3px; -webkit-transform-origin: 3px 3px; transition:.3s bottom; -webkit-transition:.3s bottom;}
#header .top-effect .point:hover:before {height:73px;}
#header .top-effect .point:hover i {bottom:-70px;}
#header .top-effect .point i {
	animation-name: custom_swing;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	-wbkit-animation-name: custom_swing;
	-wbkit-animation-duration: 1s;
	-wbkit-animation-iteration-count: infinite;
	animation-direction: alternate;
	-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes custom_swing {
	to {transform:rotate(5deg); -webkit-transform:rotate(5deg);}
	from {transform:rotate(20deg); -webkit-transform:rotate(20deg);}
}


#footer .copyright {float:right; font-family:'IndustryW00-Demi'; font-size:12px;}
#footer .sns {float:left;}
#footer .sns a {display:inline-block; position:relative; width:25px; height:27px; vertical-align:middle; background:url('/assets/img/common/spr_common.png') no-repeat; text-indent:-999px; overflow:hidden; transition:.3s all; -webkit-transition:.3s all;}
#footer .sns a:hover {transform:translateY(-10px); -webkit-transform:translateY(-10px);}
#footer .sns a + a {margin-left:17px;}
#footer .sns a.ty1 {background-position:0 0;}
#footer .sns a.ty2 {background-position:-46px 0;}
#footer .sns a.ty3 {background-position:-92px 0;}
#footer .sns a.ty4 {background-position:-138px 0;}

.quick-home {display:block; position:fixed; right:50%; margin-right:-863px; top:35px; z-index:10001; color:transparent; transition:.3s all; -webkit-transition:.3s all; transform:scale(0); -webkit-transform:scale(0);}
.view-home .quick-home {transform:scale(1); -webkit-transform:scale(1);}
.toggleGnb {display:block; position:fixed; width:34px; height:34px; right:50%; margin-right:-860px; top:42px; z-index:10001; color:transparent; text-indent:-999px; transition:.3s all; -webkit-transition:.3s all;}
.toggleGnb:before,
.toggleGnb:after {content:""; display:block; position:absolute; height:3px; top:50%; left:0; right:0; background:#000; transition:.3s all; -webkit-transition:.3s all;}
.toggleGnb:before {margin-top:-9px;}
.toggleGnb:after {margin-top:8px; right:9px;}
.toggleGnb:hover:before {right:9px;}
.toggleGnb:hover:after {right:0px;}

.view-home .toggleGnb {top:75px;}

@media all and (max-width:1720px) {
	.quick-home,
	.toggleGnb {right:10px; margin-right:0;}
	.quick-home {right:7px;}
}


.open-gnb .toggleGnb:before,
.open-gnb .toggleGnb:after {right:0px !important; background:#fff; margin-top:-1px; bottom:auto;}
.open-gnb .toggleGnb:before {transform:rotate(-45deg);}
.open-gnb .toggleGnb:after {transform:rotate(45deg);}
.open-gnb .quick-home {opacity:0;}

#gnb {position:fixed; top:0; right:0; bottom:0; width:600px; z-index:100; background:rgba(0,0,0,.95); padding:135px 0 0; text-align:center; transform:translateX(100%); -webkit-transform:translateX(100%);transition:.3s all; transition:.3s all;}
.open-gnb #gnb {transform:translateX(0%); -webkit-transform:translateX(0%);}
#gnb a {display:inline-block; position:relative; padding:0 10px; height:67px; line-height:67px; color:#fff; font-family:'양진체'; font-size:40px; font-style:italic;}
#gnb li + li {margin-top:50px;}
#gnb a span {display:block; position:relative;}
#gnb a:before {content:""; display:block; position:absolute; height:2px; left:100%; right:0; background:#4217c6; top:50%; margin-top:-1px; z-index:-1; transition:.3s all cubic-bezier(0.2,-2,0.8,2); -webkit-transition:.3s all;}
#gnb a:after {content:""; opacity:0; display:block; position:absolute; left:100%; top:0; width:17px; height:24px; background:url('/assets/img/common/ico_gnb_over.png') no-repeat 50% 50%; transform-origin:0% 100%; -webkit-transform-origin:0% 100%; transform:rotate(50deg); -webkit-transform:rotate(50deg); transition:.3s transform cubic-bezier(0.2,-2,0.8,2); -webkit-transition:.2s -webkit-transform cubic-bezier(0.2,-2,0.8,2);}
#gnb a:hover span {
	animation-name: rubberBand;
	animation-duration: .5s;
	animation-fill-mode: both;
	animation-iteration-count: 1;

	-wbkit-animation-name: rubberBand;
	-wbkit-animation-duration: .5s;
	-wbkit-animation-fill-mode: both;
	-wbkit-animation-iteration-count: 1;
}
#gnb a:hover:after {opacity:1; transform:rotate(0); -webkit-transform:rotate(0);}
#gnb a:hover:before {left:0}

.effect {transition:.3s all; -webkit-transition:.3s all;}

.sub-page-title {display:block; position:relative; text-align:center; padding-top:120px; margin-bottom:120px;}
.sub-page-title h2 {display:block; position:relative; font-size:74px; color:#000; font-family:'양진체'; font-style:italic; opacity:0; transform:translateY(-10px); -webkit-transform:translateY(-10px);}
.sub-page-title span {display:block; padding-top:20px; font-family:'IndustryW00-Demi'; font-size:22px; opacity:0; transform:translateY(10px); -webkit-transform:translateY(10px);}
.sub-page-title h2.active {opacity:1; transform:translateY(0); -webkit-transform:translateY(0); transition-delay:.2s; -webkit-transition-delay:.2s;}
.sub-page-title span.active {opacity:1; transform:translateY(0); -webkit-transform:translateY(0); transition-delay:.5s; -webkit-transition-delay:.5s;}

.theme-white #header .top-effect {color:#fff;}
.theme-white #header .top-effect .point:before {background:#fff;}
.theme-white #header .top-effect .point i {background-image:url('/assets/img/common/ico_n_w.png');}
.theme-white #header .toggleGnb:before,
.theme-white #header .toggleGnb:after {background:#fff;}
.theme-white #logo {background-image:url('/assets/img/common/logo_w.png');}

/*.theme-white .gotoTop {background-image:url('/assets/img/common/img_top_w.png');}*/