@charset "utf-8";



/*

 * common.css

 */
body{background:#f3f3f3;}
body,input,textarea,button,select{font-weight:300;}
div, section, ul, dl, ol, li{outline-width:0;}
img{max-width:100%;}
.ir{display:inline-block; line-height:0 !important; padding:0; margin:0; font-size:0px !important; text-indent:-999em; color:transparent !important; white-space:nowrap; background-repeat:no-repeat;}
.itext{display:inline-block; vertical-align:middle; line-height:1.2;}

#wrap{position:relative;}
#container{overflow:hidden;}
#wrap,
#header,
#container,
#footer{width:100%; min-width:320px;}
#wrap:after,
#header:after,
nav:after,
#container:after,
#footer:after,
#footer .inr:after{content:''; display:block; overflow:hidden; clear:both; line-height:0; font-size:0;}

#header{position:absolute; top:0; left:0; z-index:999; padding-top:33px; transition:background 0.3s ease-out;}
#header .logo{position:absolute; top:63%; left:67px; width:202px; height:57px; transform:translateY(-50%);}
#header .logo > a{display:block; width:100%; height:100%; background:url(/images/common/img_logo_w.png) no-repeat center; background-size:contain;}
@media all and (min-width:1025px){
#header .gnb{float:right; margin-right:50px; position:relative; font-size:0;}
#header .gnb li{display:inline-block; position:relative; vertical-align:top;}
#header .gnb li > a{display:block; position:relative; text-align:center;}
#header .gnb > li > a{padding:33px 27px 32px; font-size:17px; font-weight:400; color:#fff;}
#header .gnb > li > a:hover{color:#242424;}
#header .gnb .sub{overflow:hidden; display:block !important; position:absolute; top:100%; right:100%; z-index:10; width:100%; height:0; text-align:center; transform:translate(50%, 0); text-align: left;}
#header .gnb > li:nth-child(3) .sub{right:0; transform:translate(15%,0);}
#header .gnb > li:nth-child(3) .sub > li{padding:8px 12px 10px;}
#header .gnb > li:nth-child(4) .sub{right:0; transform:translate(0,0);}
#header .sub > li{padding:8px 16px 10px;}
#header .sub > li > a{padding:10px 0; font-size:14px; font-weight:400; color:#555; word-break: keep-all; white-space: nowrap;}
#header .sub > li > a:hover{color:#a67a00;}
#header .sub > li > a:after{content:''; display:block; position:absolute; bottom:10px; left:50%; width:0; height:1px; background:#a67a00; transition:all 0.2s linear;}
#header .sub > li > a:hover:after{left:0; width:100%;}

#header.hover{background:#fff;}
#header.hover .logo > a{background-image:url(/images/common/img_logo.png);}
#header.hover .gnb > li > a{color:#242424;}

#header .gnb > li.active .sub{height:57px; z-index:1; transition-delay:0.3s;} 
#header .gnb > li.active > a{color:#a67a00;}
#header.noDelay .gnb > li.active .sub{transition-delay:0s; transition:none;}

#header .bg_sub{position:absolute; top:100%; left:0; width:100%; height:0; transition:all 0.2s;}
#header .bg_sub.active{height:58px; background:rgba(233,233,233,.6);}
}

.btn_m_menu{display:none; position:absolute; top:15px; right:15px; padding:25px; background:transparent; outline:none;}
.btn_m_menu .box{display:block;position:relative;width:30px;height:19px;}
.btn_m_menu .bar,
.btn_m_menu .bar:before,
.btn_m_menu .bar:after{display:block; position:absolute; width:100%; height:1px; background:#fff;}
.btn_m_menu .bar{top:auto;bottom:0;margin-top:-2px;transition-delay:.13s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s;}
.btn_m_menu .bar:before{content:'';top:-9px;transition:top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19);}
.btn_m_menu .bar:after{content:'';top:-18px;right:0;transition:top .2s cubic-bezier(.33,.66,.66,1) .2s, opacity .1s linear;}
.btn_m_menu.active{position:fixed;}
.btn_m_menu.active .bar{top:auto; bottom:0; transform:translate3d(0,-10px,0) rotate(-45deg);transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);}
.btn_m_menu.active .bar:before{top:0;transform:rotate(-90deg);transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;}
.btn_m_menu.active .bar:after{top:0; opacity:0; transition:top .2s cubic-bezier(.33,.66,.66,1) .2s, opacity .1s linear;}

/* area_util */
.area_util{position:fixed; top:412px; left:0; padding:30px 25px 30px 20px; background:#242424; box-shadow:0 7px 6px rgba(0,0,0,.22); transition:all 0.3s ease-out;}
.area_util a{display:inline-block; position:relative; color:#d4d4d4; font-size:15px;}
.area_util a + a{margin-left:17px;}
.area_util a:before{content:''; display:inline-block; width:22px; height:22px; margin-right:5px; vertical-align:middle;/*ie*/ vertical-align:text-bottom;}
.area_util a:hover{color:#f3bc24;}
.area_util a.login:before{background:url(/images/main/icon_login.png) no-repeat 50%;}
.area_util a.signup:before{background:url(/images/main/icon_signup.png) no-repeat 50%;}
.area_util span{position:relative; top:10px; display:block; font-size:12px; color:#d4d4d4;}
.area_util span br{display:none;}

#footer{position:relative; padding:34px 0; background:#242424;}
#footer .inr{max-width:1200px; padding-left:24px; padding-right:24px; margin:0 auto;}
#footer .f_info{float:left; width:50%;}
#footer .f_info ul{font-size:0;}
#footer .f_info ul li{display:inline-block; margin-right:18px; font-size:15px;}
#footer .f_info ul li em{display:inline-block; margin-left:3px; font-weight:500; color:#fff;}
#footer .f_info ul li .desc{font-weight:100; color:#fff !important; cursor:inherit;}
#footer .f_copy{float:right; width:50%; text-align:right; font-size:15px;}
#footer .f_copy p{color:#8f8e8d; text-transform:uppercase;}

.top_btn{position:absolute; bottom:100%; right:25px; display:block; width:111px; height:38px; margin-bottom:-19px; background:#595959; border:1px solid #6a6a6a; border-radius:3px; outline:0;}
.top_btn:hover{background:#444444; border-color:#444444;}
.top_btn span{font-size:14px; color:#fff;}

/* sub common */
.area_subvisual{position:relative; height:519px; background:#242424 url(/images/common/img_subvisual.jpg) no-repeat 50% 50%; background-size:cover; transition:background 0.3s ease-out;}
.area_subvisual .inr{position:relative; max-width:1000px; width:95%; height:100%; margin:0 auto;}
.area_subvisual .text{position:absolute; top:38%; left:0; width:100%; transition:top 0.3s linear, left 0.2s linear;}
.area_subvisual .text .emph{display:block; margin-bottom:15px; color:#f3bc24; text-transform:uppercase;}
.area_subvisual .text p{line-height:1.4; font-size:48px; font-family:'AritaBuri', Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; font-weight:400; text-shadow:0 5px 3px rgba(0,0,0,.15); color:#fff; letter-spacing:-1.5px;}

.area_lnb{overflow-y:hidden; overflow-x:auto; position:absolute; bottom:0; left:0; width:100%; transition:all 0.3s ease-out;}
.area_lnb ul{max-width:1200px; width:95%; margin:0 auto; font-size:0; text-align:center;}
.area_lnb ul > li{display:inline-block; margin:0 19px; font-size:16px;}
.area_lnb ul > li > a{display:block; position:relative; padding:15px 0; color:#777;}
.area_lnb ul > li > a:after{content:''; display:none; position:absolute; bottom:0; left:0; width:100%; height:5px; background:#a67a00;}
.area_lnb ul > li > a:hover,
.area_lnb ul > li.active > a{color:#a67a00;}
.area_lnb ul > li.active > a:after{display:block;}
.area_lnb.scroll{position:fixed; top:0; left:0; z-index:100; height:49px; background:#fff; border-bottom:1px solid #ddd;}
.area_lnb.scroll ul > li > a{font-weight:400;}

.location{position: absolute; top: 50%; right: 0; overflow:hidden; margin:5px 0; text-align:center; transform:translateY(-50%);}
.location > li{display:inline-block;}
.location > li span{display:inline-block; vertical-align:middle; font-size:14px;}
.location > li:first-child span{width:16px; height:17px; font-size:0; text-indent:-999em; background-repeat:no-repeat; background-position:50%; background-size:contain;background-image:url(/images/common/icon_home.png);}
.location > li + li{position:relative; margin-left:17px; padding-left:17px;}
.location > li + li:before{content:''; display:inline-block; position:absolute; top:50%; left:-3px; width:6px; height:12px; margin-top:-6px; background:url(/images/common/icon_arrow.png) no-repeat 50%; background-size:contain;} 
.location > li.cur{color:#a67a00;}

.box_menu{background:#1a1a1a; text-align:center;}
.box_menu ul{display:inline-block; max-width:1200px; width:95%; padding:18px 0; margin:0 auto;font-size:0;}
.box_menu ul li{display:inline-block; margin:0 17px; font-size:15px; font-weight:200;}
.box_menu ul li > a{display:inline-block; width:100%; height:100%; color:#fff;}
.box_menu ul li > a:before{content:''; display:inline-block; width:44px; height:40px; margin-right:15px; vertical-align:middle; background-repeat:no-repeat; background-position:50%; background-size:contain;}
.box_menu ul li.menu01 > a:before{background-image:url(/images/contents/icon_f_quick01.png);}
.box_menu ul li.menu02 > a:before{background-image:url(/images/contents/icon_f_quick02.png);}
.box_menu ul li.menu03 > a:before{background-image:url(/images/contents/icon_f_quick03.png);}
.box_menu ul li.menu04 > a:before{background-image:url(/images/contents/icon_f_quick04.png);}
.box_menu ul li.menu05 > a:before{background-image:url(/images/contents/icon_f_quick05.png);}

.box_wait{text-align: center;}
.box_wait img{display: inline-block;}

/* youtube */
.youtube{position:fixed; right:50px; bottom:150px; display:flex; flex-direction:column; align-items:center; z-index:50;}
.youtube .link{width:40px; height:40px; border-radius:50%; background:#242424 url(/images/common/icon_youtube.png) no-repeat 53%; background-size:65%;}
.youtube .link a{display:block; width:100%; height:100%; text-indent:-9999px;}
.youtube .live {background:#f63731; margin-top:8px; border-radius:3px; }
.youtube .live a{display:flex; align-items:center; width:75px; height:30px;}
.youtube .live-icon {position:relative; width:40px; height: 40px; float:left;}
.youtube .live-text {float:left; color:#fff; font-weight:900; margin-left:-8px;}
.youtube .live-pulse-min {position: absolute; top:11px; left:9px; border: 4px solid #fff; background: transparent; -webkit-border-radius: 100px; -moz-border-radius: 100px;border-radius: 100px; height: 10px; width: 10px; -webkit-animation: pulse 1.4s ease-out; -moz-animation: pulse 1.4s ease-out; animation: pulse 1.4s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; z-index: 1; opacity: 0;}
.youtube .live-pulse-max {position: absolute; top:2px; left:0; border: 4px solid #fff; background: transparent; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 28px; width: 28px; -webkit-animation: pulse2 1.4s ease-out; -moz-animation: pulse2 1.4s ease-out; animation: pulse2 1.4s ease-out; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; z-index: 1; opacity: 0;}

@-webkit-keyframes "pulse" {
	0% {-webkit-transform: scale(0); opacity: 0.0;}
	20% {-webkit-transform: scale(0.25); opacity: 0.3;}
	40% {-webkit-transform: scale(0.5); opacity: 0.5;}
	60% {-webkit-transform: scale(1); opacity: 0.9;}
	80% {-webkit-transform: scale(1); opacity: 0.0;}
	100% {-webkit-transform: scale(1); opacity: 0.0;}
}
@-webkit-keyframes "pulse2" {
	0% {-webkit-transform: scale(0); opacity: 0.0;}
	20% {-webkit-transform: scale(0); opacity: 0.0;}
	40% {-webkit-transform: scale(0.25); opacity: 0.1;}
	60% {-webkit-transform: scale(0.5); opacity: 0.2;}
	80% {-webkit-transform: scale(1); opacity: 0.4;}
	100% {-webkit-transform: scale(1); opacity: 0.0;}
}


/* pc divide */
@media all and (max-width:1400px){
	.area_util{top:110px; padding:25px 20px 25px 15px;}
	.area_util a{display:block; font-size:0; font-weight:600;}
	.area_util:hover,
	.area_util.active{opacity:1;}
	.area_util:hover a,
	.area_util.active a{font-size:13px;}
	.area_util a + a{margin-top:15px; margin-left:0;}
	.area_util span br{display:block;}
}
@media all and (max-width:1300px){
	#header .logo{width:187px; height:45px; left:53px;}
	#header .gnb > li > a{padding:27px 21px 26px; font-size:15px;}
}

/* tablet */
@media all and (max-width:1024px){
	#header{height:75px; padding-top:10px;}
	#header .logo{top:58%; width:158px; height:44px; left:40px;}
	#header nav{position:fixed; top:0; right:-360px; width:360px; height:100%; box-sizing:border-box; padding:120px 20px 20px; background:#242424 url(/images/common/img_bg_mobile.jpg) no-repeat 100% 100%; background-size:cover; transition:right 0.3s ease-out;}
	#header nav.active{right:0;}
	#header nav:before{content:''; display:block; position:absolute; top:45px; left:50%; width:160px; height:50px; margin-left:-80px; background:url(/images/common/img_slogan.png) no-repeat 50%; background-size:contain;}
	#header .gnb{overflow-y:auto; width:100%; height:100%; font-family:"malgun gothic", sans-serif;}
	#header .gnb > li{width:100%;}
	#header .gnb > li > a{display:block; position:relative; padding:15px 45px 15px 15px; font-size:16px; color:#fff; transition:color 0.2s linear;}
	#header .gnb > li > a:after{content:''; display:block; position:absolute; top:50%; right:0px; width:22px; height:35px; margin-top:-17.5px; background:url(/images/common/icon_dot_m.png) no-repeat 50%; background-size:contain;}
	#header .gnb .sub{display:none; padding:5px 10px 15px;}
	#header .sub > li{width:100%;}
	#header .sub > li > a{display:block; padding:5px; font-size:14px; font-weight:100; color:#b3b3b3; letter-spacing:0;}

	#header .gnb > li.active > a{color:#c49a26;}
	#header .gnb > li.active > a:after{background-image:url(/images/common/icon_dot_m_on.png)}
	#header .gnb > li.active .sub > li:hover > a{color:#fff;}

	.btn_m_menu{display:block; z-index:999;}
	
	/*#footer .inr{padding-left:14px; padding-right:14px; padding-bottom: 40px; font-family:"malgun gothic", sans-serif;}
	#footer .f_info{width:65%;} 
	#footer .f_copy{width:35%; font-size:14px;}
	#footer .f_copy p{letter-spacing:0;}*/
	#footer .inr{padding-left:14px; padding-right:14px; padding-bottom: 40px; font-family:"malgun gothic", sans-serif;}
	#footer .f_info, 
	#footer .f_copy{float:none; width:100%; text-align:center;}
	#footer .f_info ul li{margin-right:15px; margin-bottom:5px; font-size:14px;}
	#footer .f_info ul li em{font-weight:600;}
	#footer .f_copy{margin-top:10px; font-size:14px;}
	#footer .f_copy p{letter-spacing:0;}

	.top_btn{position: fixed; bottom:20px; z-index:50; width:50px; height:50px; margin-bottom:0; border-radius:0;}
	.top_btn span{font-size:12px; font-family:"malgun gothic", sans-serif;}

	.area_util{opacity:0.5;}
	.area_subvisual .text{left:7.5%; width:85%;}
	.location{position: relative; transform:translateY(0%);}
	.box_menu ul li{margin:10px; font-size:14px;}
	.box_menu ul li > a:before{width:34px; height:30px; margin-right:10px;}

	.youtube{right:15px; bottom:85px;}
}

/* mobile */

@media all and (max-width:780px){
	#header .gnb > li > a{font-weight:600;}
	#header .sub > li > a{font-weight:300;}

	.area_subvisual .text p{font-size:45px;}
	.area_lnb ul > li{margin:0 13px; font-size: 14px;}
	.location > li + li{margin-left: 9px; padding-left: 9px;}
	.location > li:first-child span{width: 12px; height: 14px; background-image:url(/images/common/icon_home_m.png);}
	.box_menu ul{max-width:420px; padding:10px 0;}
}

@media all and (max-width:640px){
	#header{height:60px; padding-top:5px;}
	#header .logo{width:140px; top:50%; left:10px;}
	#header .logo > a{background-image:url(/images/common/img_logo_m_w.png);}
	#header nav{right:-300px; width:300px;}
	.btn_m_menu{top:10px; right:0px; padding:15px;}
	.btn_m_menu .box{width:28px; height:15px;}
	.btn_m_menu .bar, .btn_m_menu .bar:before, .btn_m_menu .bar:after{height:2px;}
	.btn_m_menu .bar:after{top:-15px;}
	.btn_m_menu .bar:before{top:-8px;}

	.area_subvisual{height:419px;}
	.area_subvisual .text{top:30%;}
	.area_subvisual .text p{font-size:32px; font-weight:600;}
	.box_menu ul li{font-size:0;}
	.box_menu ul li{margin:5px;}
}

@media all and (max-width:400px){
	.area_subvisual .text p{font-size:30px; word-break:keep-all;}
	.area_subvisual .text p br{display:none;}
}