@charset "utf-8";
/* Web Standardization Team, Author:JongWoon,LEE 2017.01.19 */

/* UI Object */
html,body{}
body>#wrap{height:auto}
#wrap{overflow-x: hidden; display:block;position:relative;width:100%;margin:0 auto; font-size: 1.7rem;}
#shadow_device{display:none;position:fixed;top:0;right:0;width:100%;height:100%;background:#000;opacity:0.65;filter:alpha(opacity=90);z-index:2}

#wrap.active #shadow_device{display:block;}
/*header*/
#header{display: block; position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: auto; background-color: #151515;}
#header .head_wrap{display: block; position: relative; z-index: 1; max-width: calc(1200px + 4rem); height: 8.4rem; margin:0 auto; padding: 0 2rem;}
#header h1.logo{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; position: absolute; top: 50%; left: 2rem; width: auto; transform: translateY(-50%);}
#header h1.logo a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.85rem; width: auto; height: auto; text-indent: -9999px; font-size: 1rem;}
#header h1.logo a:before{content: ""; display: block; width: 11em; height: 3.7em; background: url(../images/header/logo1.svg) no-repeat center center / 100% auto;}
#header h1.logo a:after{content: ""; display: block; width: 10.3em; height: 1.8em; background: url(../images/header/logo2.svg) no-repeat center center / 100% auto;}
#header #topmenu{height: 100%;}
#header #topmenu >div{height: 100%;}
#header #topmenu #gnavigation{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4rem; height: 100%;}
#header #topmenu #gnavigation >li{display: block; height: 100%;}
#header #topmenu #gnavigation >li >a{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; height: 100%; color: #FFF; font-size: 2rem; font-weight: 500; transition: all 0.2s linear;}
#header #topmenu #gnavigation >li >a:hover{color: #FC704F;}

#header .head_wrap .lst{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;position: absolute; top: 0; right: 2rem; height: 100%;}
#header .head_wrap .lst p{position: relative; width: 8.4rem; height: 100%;}
#header .head_wrap .lst p a{display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-content: center; align-items: center; gap: 0.8rem; width: 100%; height: 100%; font-size: 1.5rem; color: #fff; font-weight: 600; text-align: center; background-color: transparent; border-left: 1px solid rgba(255, 255, 255, 0.20); transition: all 0.2s linear;}
#header .head_wrap .lst p a:hover{background-color: #FC704F; border-left-color: #FC704F;}
#header .head_wrap .lst p:last-child a{border-right: 1px solid rgba(255, 255, 255, 0.20);}
#header .head_wrap .lst p:last-child a:hover{border-right-color: #FC704F;}
#header .head_wrap .lst p a:before{content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(../images/header/h_img01.svg) no-repeat center center / 100% auto;}
#header .head_wrap .lst p.subscribe a:before{background-image: url(../images/header/h_img02.svg);}


#header,#header #topmenu,#header .topmenubg{transition:none !important;-webkit-transition:none !important}

/*submenu*/
.head_wrap .lst{}
.head_wrap.active .all_menu{opacity:1;visibility:visible;height:420px;}
.head_wrap.active .all_menu .inner > ul{height:420px;}
.all_menu{opacity:0;visibility:hidden;position:absolute;top:84px;height:0;background:#fff;width:100%;left:0;transition:height .4s;}
.all_menu:before{width:1000%;margin-left:-500%;height:1px;background:#d5d5d5;content:'';position:absolute;top:0;left:0;}
.all_menu .inner:after{z-index:-1;width:1000%;margin-left:-500%;height:100%;background:#fff;content:'';position:absolute;top:0;left:0;}
.all_menu .inner{position:relative;}
.all_menu .inner > ul > li{float:left;width:25%;padding:0 1.4em 0 1.8em;height:100%;border-left:1px solid #d5d5d5;-webkit-transition:all .3s;transition:all .3s;}
.all_menu .inner > ul > li:hover{border-color:#fc6f4e;}
.all_menu .inner > ul{height:0;overflow:hidden;padding:40px 0;-webkit-transition:all .3s;transition:all .3s;}
.all_menu .inner .sub_menu li{display:block;font-size:14px;}
.all_menu .inner .sub_menu li + li{padding-top:13px;}
.all_menu .inner .sub_menu li > a{line-height:1.4;display:block;color:#333;}
.all_menu .inner .sub_menu li > a:hover{color:#fc6f4e;}
.all_menu .inner > ul > li > a.title{display:block;font-size:15px;color:#000;font-weight:bold;margin-bottom:15px;}
.all_menu .inner > ul > li > a.title span{position:relative;}
.all_menu .inner > ul > li > a.title span:before{position:absolute;top:2px;right:-8px;width:5px;height:5px;background:#fc6f4e;border-radius:50%;content:'';}

/*GNB*/

#topmenu #gnavigation a.th1_lnk:before{position:absolute;bottom:15px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%) scaleX(0);content:'';width:10px;height:10px;background:#fc6f4e;border-radius:50%;opacity:0;visibility:hidden;}
#topmenu #gnavigation a.th1_lnk.on{color:#fc6f4e;}
#topmenu #gnavigation li:hover a.th1_lnk.on:before,
#topmenu #gnavigation a.th1_lnk.on:before{opacity:1;transform:translateX(-50%) scaleX(1);visibility:visible;}
#topmenu #gnavigation a.th1_lnk.active,#topmenu #gnavigation a.th1_lnk.current,#topmenu #gnavigation a.th1_lnk:hover,#topmenu #gnavigation a.th1_lnk:active,#topmenu #gnavigation a.th1_lnk:focus{font-weight:700;color:#fc6f4e}
#topmenu #gnavigation a.th1_lnk.active:after,#topmenu #gnavigation a.th1_lnk.current:after,#topmenu #gnavigation a.th1_lnk:hover:after,#topmenu #gnavigation a.th1_lnk:active:after,#topmenu #gnavigation a.th1_lnk:focus:after{width:100%;margin-left:-50%;color:#fc6f4e}
#topmenu #gnavigation a.th1_lnk.active + .th2{display:block !important}
#topmenu #gnavigation .th2{display:block;position:absolute;top:70px;width:auto;height:50px;padding:0;text-align:center;z-index:1}
#topmenu #gnavigation .th2:after{clear:both;display:block;content:""}
#topmenu #gnavigation .th2 > li{float:left}
#topmenu #gnavigation a.th2_lnk{display:block;padding:12px 17px;font-weight:normal;font-size:1em;line-height:1.625em;color:#fff}
#topmenu #gnavigation a.th2_lnk.active,#topmenu #gnavigation a.th2_lnk:hover,#topmenu #gnavigation a.th2_lnk:active,#topmenu #gnavigation a.th2_lnk:focus{color:#fc6f4e}
#topmenu #gnavigation .no3 .th2{left:-80px;width:295px}
#topmenu #gnavigation .no5 .th2{left:-73px;width:230px}
#topmenu #gnavigation .no6 .th2{left:-57px;width:230px}



/*모바일 메뉴아이콘*/
.mobileGNB_btn{display: none; position: fixed; top: 2.2rem; right: 2rem; z-index: 1111; width: 2.6rem; height: 2.6rem;}
.mobileGNB_btn a{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; text-indent: -9999px;}
.mobileGNB_btn a#mobile_open_mn{background: url(../images/header/h_img03.svg) no-repeat center center / 100% auto;}
.mobileGNB_btn a#mobile_open_mn >span *{position: absolute; top: -9999px; left: -9999px;}


/*모바일 메뉴*/
/*sns*/
#mobile_menu{display: block; position: fixed; top: 0; right: -100%; width: 100%; max-width: 320px; height:100%; padding: 0 1.5rem; background: #3e4148; z-index:900; transition:none !important; -webkit-transition:none !important;}
#mobile_menu .mobile_gnbwrap{overflow-y: auto; display: block; position: relative; height: auto; max-height: 100vh;}
#mobile_menu .mobile_gnbwrap .tside_menu{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.6rem; position: relative; height: 7rem;}
#mobile_menu .mobile_gnbwrap .tside_menu > li{width: 3.4rem; height: 3.4rem;}
#mobile_menu .mobile_gnbwrap .tside_menu > li >a{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%;}
#mobile_menu .mobile_gnbwrap .tside_menu > li >a >img{width: auto;}
#mobile_menu .mobile_gnbwrap .tside_menu > li > a{display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #20c0fc;}
#mobile_menu .mobile_gnbwrap .tside_menu > li > a{font-size: 0;}
#mobile_menu .mobile_gnbwrap .tside_menu > li.fb a{background-color: #345298}
#mobile_menu .mobile_gnbwrap .tside_menu > li.blog a{background-color: #01c932}
#mobile_menu .mobile_gnbwrap .tside_menu > li.tt a{background-color: #20c0fc}
#mobile_menu .mobile_gnbwrap .tside_menu > li.in a{background-color: #f0c640}
#mobile_menu .mobile_gnbwrap .tside_menu > li.sbsc a{background-color: #7162bd}
#mobile_menu .mobile_gnbwrap .tside_menu > li.youtube a{background-color: #ed2f2a;}
/*모바일메뉴 ul*/
#mobile_menu .mobile_gnbwrap #mobile_gnavigation{display: flex; flex-wrap: wrap; flex-direction: column; align-content: center; justify-content: flex-start; align-items: center; gap: 1.4rem; margin-top: 4rem;}
#mobile_menu .mobile_gnbwrap #mobile_gnavigation >li{width: 100%;}
#mobile_menu .mobile_gnbwrap #mobile_gnavigation >li >a{display: block; width: 100%; text-align: center; color: #fff; font-size: 2.2rem; font-weight: 500;}
#mobile_menu .mobile_gnbwrap #mobile_gnavigation >li >ul{display: block; width: 100%; margin-top: 0.8rem;}
#mobile_menu .mobile_gnbwrap #mobile_gnavigation >li >ul >li{margin-top: 0.5rem;}
#mobile_menu .mobile_gnbwrap #mobile_gnavigation >li >ul >li:first-child{margin-top: 0;}
#mobile_menu .mobile_gnbwrap #mobile_gnavigation >li >ul >li a{display: block; text-align: center; font-size: 1.6rem; color: #a9bbca;}
/*모바일메뉴 지난호, 구독신청*/
#mobile_menu .mobile_gnbwrap .backNum_newsletter,
#mobile_menu .mobile_gnbwrap .subscribe{margin-top: 3.5rem; text-align: center;}
#mobile_menu .mobile_gnbwrap .subscribe{margin-top: 1.75rem;}
#mobile_menu .mobile_gnbwrap .backNum_newsletter a,
#mobile_menu .mobile_gnbwrap .subscribe a{display: inline-block; min-width: 16rem; padding: 0.85rem 2rem; font-size: 1.75rem; color: #fff; border-radius: 10rem; background-color: #fc6f4e;}


/*모바일메뉴 닫기*/
#mobile_menu .mobile_close{display: block; position: absolute; top: 2.2rem; right: 0.5rem; z-index: 1111; width: 2.6rem; height: 2.6rem;}
#mobile_menu .mobile_close a{display: block; width: 100%; height: 100%; background: url(../images/header/h_img04.svg) no-repeat center center / 100% auto; text-indent: -9999px;}





/*body*/
#body,#content.container,#content.container #detail_content{display:block;position:relative;max-width: 100%; padding: 0;}
#content{margin:auto;}
#wrap{padding-top: calc(8.4rem + 6.3rem);}
#content.container #detail_content{display: block; width: 100%; max-width: calc(1088px + 4rem); margin: 0 auto 12rem; padding: 0 2rem;}
.main #content.container #detail_content{max-width:100%;padding:0}

#btntop{display: block; position: fixed; bottom: 2rem; right: 2rem; z-index: 2; width: 8rem; height: 8rem; border: 1px solid #003863; background-color: #003863; text-indent: -9999px; border-radius: 50%; transition: all 0.2s linear;}
#btntop:hover{background-color: #001728; border-color: #001728;}
#btntop:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/footer/f_img04.svg) no-repeat center center / 100% auto; transition: all 0.2s linear;}
#btntop.on{
    -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
    -webkit-transform: translateY(50%); transform: translateY(50%);
}

/*footer*/
#footer{padding: 4rem 0; background-color: #F5F5F5;}
#footer .footerwrap{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 3rem; position: relative; z-index: 1; max-width: calc(1200px + 4rem); margin:0 auto; padding: 0 2rem;}
#footer .footerwrap .l{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items:  flex-start; gap: 2.4rem; flex: 1;}
#footer .footerwrap .l img{display: block;  object-fit: none;}
#footer .footerwrap .l div{flex: 1; color: #222; font-size: 1.4rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.028rem;}
#footer .footerwrap .l div em{color: #FC704F;}
#footer .footerwrap .l div .copyright{margin-top: 1.5rem; color: #717171;}
#footer .footerwrap .foot_info{position: relative; padding-left: 10rem; padding-right: 41.6rem; }
#footer .footerwrap .foot_info .guide{font-weight: 600;}
#footer .footerwrap .foot_info .guide br:first-child{display: none;}
#footer .footerwrap address{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 1rem; width: 38.6rem; padding-left: 3rem; color: #555; font-weight: 500; border-left: 1px solid #DDD;}
#footer .footerwrap address span{display: block; position: relative; width: 100%; padding-left: 3.8rem; color: #555; font-size: 1.4rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.028rem;}
#footer .footerwrap address span i{display: block; position: absolute; top: -0.3rem; left: 0; width: 2.4rem; height: 2.4rem; background: url(../images/footer/f_img01.svg) no-repeat center center / 100% auto; text-indent: -9999px;}
#footer .footerwrap address span:nth-child(2) i{background-image: url(../images/footer/f_img02.svg);}
#footer .footerwrap address span:nth-child(3) i{background-image: url(../images/footer/f_img03.svg);}
#footer .footerwrap address span a{display: inline-block; color: #555; line-height: 1.5;}

@media screen and (max-width:1200px){
	#wrap{padding-top: calc(8.4rem + 4rem);}
	#header #topmenu #gnavigation{gap: 3rem;}
	#btntop{width: 7rem; height: 7rem;}
}
@media screen and (max-width:1024px){
	#header .head_wrap{height: 7rem;}
	#header #topmenu,
	#header .head_wrap .lst{display: none;}
	
	#wrap{padding-top: calc(7rem + 4rem);}
	.mobileGNB_btn{display: block; }
	#content.container #detail_content{margin: 0 auto 9rem;}

	#btntop{width: 6.5rem; height: 6.5rem;}
	
	#footer{padding: 3rem 0;}
	#footer .footerwrap{gap: 2rem;}
	#footer .footerwrap .l{gap: 2rem;}
	#footer .footerwrap .l img{width: 6rem; height: 6rem;}
	#footer .footerwrap .l div .copyright{margin-top: 1rem;}
	#footer .footerwrap address{gap: 1.2rem; width: 35rem; padding-left: 2rem;}
	#footer .footerwrap address span{padding-left: 3rem;}
	#footer .footerwrap address span i{width: 2.2rem; height: 2.2rem;}
}

@media screen and (max-width:840px){
	#footer .footerwrap address{gap: 0.5rem 1.8rem; width: 100%; padding-left: 0; border-left: 0;}	
	#footer .footerwrap address span{width: auto; padding-left: 2.4rem;}
	#footer .footerwrap address span i{top: -0.1rem; width: 2rem; height: 2rem;}
}
@media screen and (max-width:640px){
	#wrap{padding-top: calc(7rem + 3rem);}
	
	.mobileGNB_btn{top: 2.2rem; width: 2.6rem; height: 2.6rem;}
	#content.container #detail_content{margin: 0 auto 7rem;}
	
	#btntop{right: 1rem; width: 5.5rem; height: 5.5rem;}
	#btntop:before{background-size: 120% auto;}
	#footer .footerwrap{gap: 1.6rem;}
	#footer .footerwrap .l{display: block; gap: 1.4rem;}
	#footer .footerwrap .l:after{content: ""; display: block; clear: both;}
	#footer .footerwrap .l img{float: left; width: 5.5rem; height: 5.5rem; margin-right: 1.5rem;}
}
@media screen and (max-width:480px){
	#btntop{width: 5rem; height: 5rem;}
}

@media(max-width:788px){
	/*
	label,input,button,a,span{line-height:1.7692em}
	body,button{font-size:0.813em;line-height:1.7692em}
	*/



}