@charset "utf-8";
/* 메인메뉴 */
#menuArea{overflow:hidden;position:absolute;left:0;top: 153px;width:100%;z-index:93;letter-spacing:-1px; background:#fff url(/images/common/bg_menu.jpg) repeat-x;}
#menuArea.on{box-shadow:0 15px 15px rgba(0,0,0,0.15);}
#menuArea .bar{display:block;position:absolute;top:57px;left:0;width:60px;height:4px;opacity:0;z-index:98;background: #dd7f30;transition:0.3s;}

body.on .mask{z-index:92; visibility:visible; opacity:1; top:auto; bottom:0; height:calc(100% - 200px);}

#topmenu{float:left;width:100%;padding: 0 0 0 0;box-sizing:border-box;}
#topmenu > li{position:relative; float:left; width:calc(100% / 5); line-height:0;}
#topmenu li.menu9,
#topmenu li.last{display:none;}
#topmenu > li > a{display:block;line-height:60px;font-family: "NanumGothic" ;font-weight: 700;font-size:21px;text-align:center;text-decoration:none;}

#topmenu > li:hover > a,
#topmenu > li > a:hover,
#topmenu > li > a:active,
#topmenu > li > a:focus,
#topmenu > li.current_on > a{color:#dd7f30;}

#topmenu li .menu{display:none;z-index:96;width:100%;height: 200px;padding:15px 0 0 0;box-sizing:border-box;border-right:1px solid #e5e5e5;background:#fff;}
#topmenu li:first-child .menu{border-left:1px solid #e5e5e5;}
#topmenu li:focus .menu,
#topmenu li:hover .menu{background:#fbfbfb;}

#topmenu li ul li{float:none; width:100%;}
#topmenu li ul li a{display:block; margin:0 0 10px 0; padding:0 3px 0 15px; color:#151515; font-size:16px; text-align:left; line-height:120%;}

#topmenu li li a:hover,
#topmenu li li a:active,
#topmenu li li a:focus,
#topmenu li li.current_on a{color:#dd7f30;}

#topmenu ul ul{display:none !important;}


.btn_menu{z-index:93;position:absolute;top: 153px;right:50%;width: 60px;height: 60px;padding:0 0 0 18px;margin:0 -700px 0 0;box-sizing:border-box;}
.btn_menu .bar{display:block; width:21px; height:3px; margin:4px 0; border-radius:1px; background:#1c1c1c;}
.btn_menu .bar2{width:13px;background: #dd7f30;transition:0.2s ease-in-out;}
.btn_menu:hover .bar2{width:21px;}

.btn_menu_close{display:block; z-index:96; position:absolute; top:27px; right:3%; width:50px; height:50px; border-radius:50%; border:1px solid #3c4968; background:none;}
.btn_menu_close .bar{position:absolute; top:24px; left:12px; display:block; width:25px; height:1px; background:#3c4968;}
.btn_menu_close .bar1{transform:rotate(45deg);}
.btn_menu_close .bar2{transform:rotate(-45deg);}
@media all and (max-width:1430px) {
	.btn_menu{right:15px; margin:0;}
}
@media all and (max-width:1024px) {
	.btn_menu{right:15px;top: 51px;height:40px;width:40px;padding:0 10px;}
}
@media all and (max-width:768px) {
	.btn_menu{top: 46px;right:10px;}
	.btn_menu_close{top:18px; width:34px; height:34px;}
	.btn_menu_close .bar{top:15px; left:3px;}
}
@media all and (max-width:568px) {
	.btn_menu{top: 44px;}
}


/* 검색*/
#search{z-index:94;position: absolute;top:74px;right:50%;width: 365px;margin: 0 -638px 0 0;}
#search::after {content:'';position: absolute;top: -7px;right: -62px;width: 48px;height: 70px;background: url(/images/common/pic_character.png)no-repeat}
#search form{overflow: hidden;width:100%;border: 1px solid #534cb3;border-radius: 30px;background:#fff;box-sizing:border-box;transition:0.25s ease-in-out;}
#search label{display: none;}
#search input[type="text"]{width:100%;height: 56px;line-height: 1;padding: 0 115px 0 20px;border-radius:7px;border-color:#fff;font-size: 14px;border:none;text-align:left;box-sizing:border-box;background: #fff url(/images/kr/common/ico_keyboard.png) no-repeat right 85px top 50%;}
#search ::-webkit-input-placeholder{color:#999;}
#search :-ms-input-placeholder{color:#999;}
#search ::placeholder{color:#999;}
#search button{position:absolute;top:0;right:0px;width: 60px;height: 58px;padding:0;font-size:0;text-indent:-999px;border-radius: 50%;background: url(/images/kr/common/btn_sch.png), linear-gradient(90deg, rgba(63,58,134,1) 0%, rgba(181,121,68,1) 100%);background-repeat: no-repeat;background-position: 50% 50%;}

#search button:before,
#search button:after{content:'';display:none;position:absolute;top: 10px;left: 5px;width: 15px;height: 15px;border: 2px solid #ff9f00;border-radius:50%;box-sizing:border-box;}
#search button:after{left: 16px;top: 23px;width: 7px;height: 3px;border:none;border-radius:3px;transform:rotate(45deg);background: #ff9f00;}

#search .btn_sch{display:none; position:absolute; top:-10px; right:62px; width:40px; height:40px; padding:0; font-size:0; text-indent:-999px; border-radius:50%; background: #5c73c6 url(/images/kr/common/btn_sch.png) no-repeat 50% 50%;}
#search .btn_close{background:url(/images/common/ico_close_w.png) no-repeat 50% 50%;}
#search .btn_close:before,
#search .btn_close:after{display:none;}
#search ul{padding:0 0 0 3px;}
#search li{margin-bottom:10px; padding-left: 10px; font-size:15px;}
#search li:before{background:#fff;width: 5px; height: 5px; top: 8px;border: none;}

@media all and (max-width:1440px) {
	#search {margin: 0; right: 10px;}
	#search::after {display: none;}
}
@media all and (max-width:1024px) {
	#search{top: 43px;right:0;width:100%;margin:0;color:#fff;text-align:left;}
	#search.on{z-index:96;}
	#search h2{padding:0 0 12px; font-size:28px;}
	#search form{visibility:hidden; opacity:0; position:absolute; top:-85px; right:0; width:100%; height:auto; padding:65px 30px 50px; border-radius:0; border:none; background:#292e44;}
	#search.on form{opacity:1;visibility:visible;top: -43px;}
	#search label{left:15px; font-size:16px;}
	#search label:after{margin:-2px 0 0 12px;}
	#search .in_sch{position:relative; max-width:500px; margin:0 auto;}
	#search input[type="text"]{height:55px;line-height:55px;padding: 0 55px 0 25px;background:#fff;color: #333;}
	#search .btn_sch{top: 7px;display:block;}
	#search button{top: 9px;right: 15px;width: 40px;height:37px;background: none;}
	#search button:before{display:block; border-color:#292e44;top: 9px;left: 11px;}
	#search button:after{display:block; background-color:#292e44;top: 22px;left: 22px;}
	#search .in_txt{position:relative; margin:0 0 30px;}
}
@media all and (max-width:768px) {
	#search h2{padding:0 0 9px; font-size:24px;}
	#search .btn_sch{top:4px; right:55px;}
	#search li{margin:0 0 7px;}
}
@media all and (max-width:568px) {
	#search form{padding:60px 30px 35px;}
	#search h2{font-size:20px;}
	#search li{font-size:14px;}
	#search li:before {top:6px;}
}
@media all and (max-width:568px) {
	#search .btn_sch{top:1px;}
	#search h2{font-size:19px;}
	#search li{font-size:13px;}
}

#submenu{z-index:1; position:relative; float:left; width:18.6%; padding:63px 0 0 0;}
#submenu .sm_tit{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;width:100%;height: 180px;margin:0 0 15px;text-align:center;color:#fff;border-radius:7px;background: #3c3487 url(/images/kr/common/bg_subtit.jpg) no-repeat;}
#submenu .sm_tit h2{line-height:110%;font-size: 30px;font-family:"gmarket";font-weight:900;vertical-align:middle;}
#submenu .sm_tit h2:after{display: none;}
#submenu .sm_tit .en{margin: 13px 0 0;line-height: 1.2;}
#submenu .depth2 > li{line-height:0; margin:0 0 10px;}
#submenu .depth2 > li > a{position:relative;display:flex;align-items:center;height:55px;line-height:120%;padding: 0 50px 0 30px;font-size:18px;color:#666;border:1px solid #ddd;border-radius:5px;text-decoration:none;}
#submenu .depth2 > li > a:after{content:'';position:absolute;top:50%;right:26px;width:20px;height:4px;transform:translateY(-50%);background: url(/images/kr/common/ico_snb.png) no-repeat 0 100%;}
#submenu .depth2 > li:hover > a,
#submenu .depth2 > li > a:hover,
#submenu .depth2 > li > a:focus,
#submenu .depth2 > li > a:active,
#submenu .depth2 > li.current_on > a{position:relative;font-weight:500;color: #3d4da4;border-color:#5c73c6;box-shadow: 0 0 15px 0 rgba(104,130,222,.2);}
#submenu .depth2 > li.current_on .hasUl{border-radius:5px 5px 0 0;}
#submenu .depth2 > li:hover > a:after,
#submenu .depth2 > li.current_on > a:after,
#submenu .depth2 > li > a:hover:after{height:20px; background-position:0 0;}

#submenu .depth2 li ul {display:none; padding:11px 10px 10px 20px; background:linear-gradient(to right, #e7ebf9 20%, #fef8e8 100%);}
#submenu .depth2 > li > a[target="_blank"]:before{width:10px; height:10px; background:url(/images/common/ico_blank.png) no-repeat;}

#submenu .depth2 li ul li a{position:relative; display:block; padding:0.5em 0 0.5em 18px; line-height:100%;}
#submenu .depth2 li ul li a:before{content:''; display:block; position:absolute; top:13px; left:0; width:8px; height:4px; background:#ababab;}
#submenu .depth2 li ul li a:hover,
#submenu .depth2 li ul li a:focus,
#submenu .depth2 li ul li a:active,
#submenu .depth2 li ul li.current_on a{color:#3d4da4; font-weight:500;}
#submenu .depth2 li ul li a:hover:before,
#submenu .depth2 li ul li a:focus:before,
#submenu .depth2 li ul li.current_on a:before{background:#5c73c6;}
#submenu .depth2 li ul li a[target="_blank"]:after{content:''; display:block; position:absolute; top:50%; right:10px; width:10px; height:10px; margin:-5px 0 0 0; vertical-align:middle; background:url(/images/common/ico_blank.png) no-repeat;}

#sub_default{padding:106px 0 0 0; line-height:170%;}
@media all and (max-width:1430px) {
	#subContent{padding:0 15px 10em;}
}
@media all and (max-width:1280px) {
	#subContent #content{width:76%;}
	#submenu{width:19%;}
}
@media all and (max-width:1024px) {
	#container_sub:before,
	#container_sub:after{display:none;}
	#subContent{width:100%; padding:0 0 7em; margin:0 auto;}
	#subContent #content{width:100%;}
	#sub_default{padding:30px 15px 0;}
}
@media all and (max-width:768px) {
	#sub_default{padding:25px 10px 0;}
}
@media all and (max-width:380px) {
	#sub_default{padding:22px 10px 0;}
}

#sns {position: absolute;top: 84px;right: 50%;margin: 0 -700px 0 0;}
#sns ul{display: flex;}
#sns ul li {margin: 0 0 0 10px;}
#sns ul li a {display: block; width:38px; height: 38px; font-size: 0; background: url(/images/common/ico_fb.png)no-repeat;}
#sns ul li:nth-child(2) a {background-image: url(/images/common/ico_insta.png);}
#sns ul li:nth-child(3) a {background-image: url(/images/common/ico_blg.png);}
#sns ul li:nth-child(4) a {background-image: url(/images/common/ico_yt.png);}

@media all and (max-width:1440px){
	#sns {margin: 0; right: 10px;}
}
@media all and (max-width:1024px){
	#sns {top: 52px;right: 60px;}
}
@media all and (max-width:768px){
	#sns {top: 48px;right: 60px;}
}
@media all and (max-width:568px){
	#sns {top: 2px;right: 10px;}
	#sns ul li {margin: 0 0 0 3px;}
	#sns ul li a {width: 30px; height: 30px; background-size: contain;}
}

#footer .inner {padding-top: 5px; padding-left: 450px;}

@media all and (max-width:1024px){
	#footer {text-align: left;}
	#footer .inner {padding: 0 15px;}
	#footer .logo img {margin: 0 0 20px;}
}
@media all and (max-width:768px){
	#footer .inner {padding: 0 10px;}
}