@charset "utf-8";

body{position:relative; overflow:inherit;}
body.active{position:fixed; width:100%; overflow:hidden;}

#wrap{position:relative; word-break:break-all;}

#header{position:absolute; top:0; left:0; width:100%; height:107px; border-bottom:1px solid rgba(255, 255, 255, 0.2); box-sizing:border-box; z-index:100;}
#header .btn_menu{display:none;}
#header .inr{position:relative; max-width:1200px; height:100%; margin:0 auto;}
#header h1{float:left; padding-top:29px;}
#header h1 a{display:block;}
#header nav{float:right; width:870px; margin-right:80px;}

/* gnb */
#header .gnb > li{float:left; position:relative; width:20%; text-align:center; transition:all 0.3s ease 0s;}
#header .gnb > li > a{display:block; padding:40px 0px; font-size:18px; font-weight:500; color:#fff; letter-spacing:-1px;}
#header .gnb > li > ul{display:none;}
#header .inr:after{content:''; display:block; clear:both;}
#header .shop{display:block; position:absolute; right:0; top:0; width:118px; height:109px; padding:15px; box-sizing:border-box; background:#0a548b url(../images/common/btn_shop.png) no-repeat 50% 85%;}
#header .shop span{display:block; padding-top:45px; font-size:13px; font-weight:300; text-align:center; color:#fff; letter-spacing:-1px; background:url(../images/common/bg_shop.png) no-repeat 50% 0;}
nav > .gnb > li:nth-child(3):before,
nav > .gnb > li:nth-child(5):before{left:-9px;}
nav > .gnb > li:first-child:before{display:none;}
nav > .gnb > li > a:after{content:''; display:block; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#fff; transform:scaleX(0); transition:all 0.3s ease 0s;}
nav > .gnb > li > a:hover:after,
nav > .gnb > li > a:focus:after,
nav > .gnb > li > a.active:after,
nav > .gnb > li > a.on:after{transform:scaleX(1);}
nav > .gnb > li > ul{display:none; position:absolute; top:107px; left:0px; z-index:90; width:100%; box-sizing:border-box;}
nav > .gnb > li > ul > li > a{display:block; position:relative; padding:10px 15px; background:rgba(0, 0, 0, 0.5); color:#fff; letter-spacing:-1px; font-weight:300; font-size:16px; word-break:keep-all;}
nav > .gnb > li > ul > li > a:hover,
nav > .gnb > li > ul > li > a:focus{background:#111;}
nav > .gnb > li > ul > li > a:hover:before,
nav > .gnb > li > ul > li > a:focus:before{opacity:1;}
nav > .gnb > li:last-child > ul{right:0px; left:auto;}
nav > .gnb > li > a.open{display:none;}
#header .lang_list{position:absolute; top:39px; right:0; width:72px; height:29px; border:1px solid #fff; border-radius:18px; overflow:hidden; transition:all .5s;}
#header .lang_list:hover{height:103px; background:#fff; border-color:#cecece;}
#header .lang_list dt{width:50px; height:34px; margin:0 auto; background:url("/images/common/ico_arrow.png") no-repeat 100% 42%;}
#header .lang_list:hover dt{background:url("/images/common/ico_arrow01.png") no-repeat 100% 42%;}
#header .lang_list:hover dt a{color:#111; line-height:35px;}
#header .lang_list dt a{display:block; color:#fff; font-size:14px; line-height:29px;}
#header .lang_list li{margin:0 auto; width:50px; height:34px; border-top:1px solid #cecece;}
#header .lang_list li a{display:block; font-size:14px; color:#111; line-height:35px;}

/* lnb */
.area_subvisual .lnb{display:none;}
.area_subvisual .lnb li{display:inline-block; padding:0 14px;}
.area_subvisual .lnb li a{display:block; position:relative; color:#fff; font-size:16px; font-weight:300;}
.btn_m_lnb{display:none; position:relative; padding:12px 35px 12px 15px; border:1px solid #dbdbdb; font-size:16px; transition:all 0.3s ease 0s;}
.btn_m_lnb:after{content:''; display:block; position:absolute; right:20px; top:50%; width:13px; height:7px; margin-top:-3.5px; background:url(../images/common/img_arrow_gray.png) no-repeat 0 0; background-size:100%; transition:all 0.3s ease 0s;}
.btn_m_lnb.active{background-color:#999; border:1px solid #999; color:#fff;}
.btn_m_lnb.active:after{background-image:url(../images/common/img_arrow_white.png); transform:rotate(-360deg);}

/* mobile gnb */ 
#header .btn_menu{display:none; position:absolute; top:35px; right:20px; z-index:101; width:35px; height:24px; transform:translateY(-50%);}
#header .btn_menu span{opacity:1; display:block; position:relative; right:0px; height:1px; margin:10px 0 6px; background:#fff; font-size:0px; transition:all 0.5s ease 0s;}
#header .btn_menu:before,
#header .btn_menu:after{content:''; display:block; width:100%; height:1px; background:#fff; transition:all 0.5s ease-out 0s;}
#header .btn_menu:after{margin-top:10px;}
#header .btn_menu.active span{opacity:0;}
#header .btn_menu.active:before{background:#fff; transform:rotate(45deg) translate(9px, 7px);}
#header .btn_menu.active:after{background:#fff; transform:rotate(135deg) translate(-9px, 6px);}
.m_gnb{position:fixed; top:0px; right:-100%; z-index:102; width:250px; height:100%; background:#333; transition:all 0.8s ease-out 0s; overflow-y: auto;}
.m_gnb > ul > li > a{display:block; position:relative; padding:18px 25px; color:#fff; font-weight:300; border-bottom:1px solid rgba(255, 255, 255, 0.1); transition:all 0.3s ease 0s;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:20px; right:20px; width:23px; height:23px; border:1px solid #999; background:url(../images/main/m_snb_on.png) no-repeat 50%; transition:all 0.4s ease 0s;}
.m_gnb > ul > li > a.active{font-weight:500; background-color:#253162;}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; padding:10px 0; box-sizing:border-box; background:#fff;}
.m_gnb > ul > li > ul > li > a{display:block; padding:10px 25px; background:#fff; font-size:15px;}
.m_gnb .btn_close{opacity:0; display:block; position:fixed; top:0px; right:-100%; width:calc(100% - 250px); height:100%; font-size:0px;}
.m_gnb.active{left:0;}
.m_gnb.active .btn_close{opacity:1; right:0;}

#content{min-height:500px;}
#content > .inr{max-width:1200px; margin:0 auto; padding:50px 0 30px; box-sizing:border-box;}

/* tab */
.area_tab{position:relative; max-width:1200px; margin:50px auto 0;}
.area_tab li{float:left; width:50%;}
.area_tab li a{display:block; padding:18px 0; text-align:center; color:#ddd; font-size:20px; border-bottom:1px solid #ddd; letter-spacing:-1px; box-sizing:border-box;}
.area_tab li a.on,
.area_tab li a:hover{color:#253162; border-bottom:1px solid #253162;}
.area_tab ul:after{content:''; display:block; clear:both;}

.contact{position:absolute; right:10%; top:30%; width:142px; height:297px; z-index:100;}
.contact .inr{box-shadow:0px 1px 10px 2px rgba(0, 0, 0, 0.2);}
.contact h2{background:#3a4c5b; height:34px; color:#fff; font-size:14px; font-weight:500; text-align:center; line-height:2.3em;}
.contact ul{background:#fff; border-bottom:2px solid #3c4d5c; box-sizing:border-box;}
.contact li{padding:11px 0 12px 23px; box-sizing:border-box; border-top:1px dashed #ccc; box-sizing:border-box;}
.contact li:first-child{border-top:0;}
.contact li p{color:#333; font-size:14px; letter-spacing:-1px;}
.contact li span{display:block; color:#767676; font-size:14px;}

#footer{background:#2b2b2b; height:190px;}
#footer .inr{position:relative; max-width:1200px; margin:0 auto; padding-top:55px; box-sizing:border-box;}
#footer h1{float:left;}
#footer .add{float:left; margin-left:60px; padding-top:6px;}
#footer .top{margin-bottom:15px;}
#footer .top ul li{position:relative; float:left; padding:0 23px; box-sizing:border-box;}
#footer .top ul li:first-child{padding-left:0;}
#footer .top ul li:before{content:''; display:block; position:absolute; left:1px; top:50%; width:1px; height:13px; background:#7b7a78; margin-top:-6.5px;}
#footer .top ul li:first-child:before{display:none;}
#footer .top ul li a{display:block; color:#fff; font-size:14px; font-weight:300; letter-spacing:-1px;} 
#footer p{color:#bebebe; font-size:13px;}
#footer p span{display:inline-block; margin:0 5px;}
#footer p span:first-child{margin-left:0;}
#footer .inr:after,
#footer .top ul:after{content:''; display:block; clear:both;}
#footer .btn_top{display:block; position:absolute; right:0; top:50%; width:44px; height:44px; border-radius:50%; background-color:#bebebe; background-image:url(../images/common/btn_top.png); background-repeat:no-repeat; background-position:50% 48%; transition:all 0.5s ease 0s; text-indent:100%; overflow:hidden; white-space:nowrap;}
#footer .btn_top:hover{background-position:50% 18%;}

@media all and (max-width:1255px){
	#header .inr{max-width:100%; padding:0 15px; box-sizing:border-box;}
	#header .lang_list{right:15px;}
	#footer{height:100%; padding:45px 15px; box-sizing:border-box;}
	#footer .inr{max-width:100%; padding-top:0;}
	#footer .btn_top{top:0;}
	#content > .inr{max-width:100%; padding:50px 15px 30px;}
}

@media all and (max-width:1250px){
	#header nav{width:70%;}
}

@media all and (max-width:1120px){
	#footer .add{margin-left:5%;}
}

@media all and (max-width:1024px){
	#header{height:71px;}
	#header h1{padding:10px 0;}
	#header .gnb{display:none;}
	#header .btn_menu{display:block;}
	#header .lang_list{right:auto; left:230px; top:20px;}
	.m_gnb{display:block;}	
	.btn_m_menu{display:block;}
	.btn_m_lnb{display:block;}
	.area_subvisual .lnb{display:block; position:absolute; top:390px; width:100%; padding:0 20px; box-sizing:border-box; z-index:20;}
	.area_subvisual .lnb ul{display:none; position:relative; padding:0; text-align:left; border:1px solid #ccc; background:#fff; box-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.2);}
	.area_subvisual .lnb li{display:block; margin-top:0px; padding:0;}
	.area_subvisual .lnb li a{color:#111; padding:12px 15px; border-top:1px dotted #ddd; box-sizing:border-box; transition:all 0.1s ease 0s;}
	.area_subvisual .lnb li a:hover{background:#ddd;}
	.area_subvisual .lnb li:fisrt-child a{border-top:0;}
	.area_subvisual .lnb > a.on{background:transparent;}
	.area_tab{display:none; margin:30px auto 0; border-top:1px solid #ddd;}
	#footer h1{float:none;}
	#footer .add{float:none; margin-left:0; padding-top:15px;}
}

@media all and (max-width:645px){
	.area_subvisual .lnb{top:360px;}
	.area_tab li a{font-size:20px;}
}

@media all and (max-width:520px){
	.area_tab li a{font-size:18px; line-height:1.3em;}
}

@media all and (max-width:390px){
	#header .lang_list{left:212px; width:50px;}
	#header .lang_list li{width:30px;}
	#header .lang_list dt{width:42px;}
	#header .lang_list dt a{font-size:12px;}
}