@charset "utf-8";
@import url(/cdc_eng/css/webfonts.css);
:root{--naviHeight : 90px; --headerTopHeight : 40px;}
*{box-sizing: border-box;}

.quick, .user_menu, .dim { display:none }
.quick.on { display:block; border-bottom: 1px solid #e1e6eb }
.quick {position:absolute;left:0;top: 0;z-index:21;width:100%;background:#fff;padding-top: 50px;}
.quick #head_menu { margin:0 auto; padding:50px 0; width:1280px;}
.quick #head_menu:after { content:""; display:block; clear:both;}
.quick #head_menu > li { float:left; width:23.5%;}
.quick #head_menu > li ~ li { margin-left:2%;}
.quick #head_menu > li > a { font-size:.85rem; color:#043763;}
.quick #head_menu > li .sub { margin-top:25px; border-top:3px solid #043763;}
.quick #head_menu > li ul { padding:10px 0 0;}
.quick #head_menu > li ul li { padding:21px 0 0;}
.quick #head_menu > li ul a { font-size:.75rem; line-height:22px;}
.quick #head_menu .lnb-detail { display:none;}
/*.quick .close { display:none;}*/
.quick.on .lnb_slide { display:none;}
.quick .close {font-size: 0;color:transparent;position:absolute;left:50%;top: 20px;margin-left:600px;}
.quick .close:before {content: "\e921"; font-family: 'xeicon'; display: inline-block; background: #3d63a9; width: 2rem; height: 2rem; border-radius: 100%; color:#fff; font-size:1rem; text-align: center; line-height: 2rem;}


.go_top { position: fixed; box-sizing:border-box; border-radius: 50%; width: 2.5rem; height: 2.5rem; padding-top:.3rem; text-align: center; display: block; background-color: #043763; right: 2.5rem; bottom: 2.5rem; z-index: 9; opacity: 0; visibility: hidden; color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s }
.go_top span { display: block; font-size: .7rem; line-height:1; color:#fff; }
.go_top.active { opacity: 1; visibility: visible; -webkit-transition: all 0.3s; transition: all 0.3s }
.go_top.stick { bottom: 7rem }
.go_top.active i { display: block; color:#fff; }

html { font-size:20px;}
body { font-size:1rem; color:#333; -webkit-text-size-adjust : 100%; }
a { color:#343639;}
.m0auto, .container { width: 1280px; margin: 0 auto;}
.skip { position:absolute; left:0; top:-100%; z-index:10; width:100%; height:50px; line-height:50px; text-align:center; color:#fff; background:#000; font-size:.7rem; transition:top 0.5s;}
.skip:focus { top:0;}
.hide { position:absolute; left:-5000%;}
.sr_only, .hidden, .hide { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 }
.tabs > ul:after { content:""; display:block; clear:both;}
.tabs > .tab_con { display:none;}
.tabs > .tab_con.on { display:block;}
main,footer,nav,aside,header { display:block;}
/* 접근성
#gnb,
#container{ display: block; width:100%; } */
.bx-wrapper { position:relative; *zoom:1; touch-action:pan-y; -ms-touch-action:pan-y;}
.bx-viewport { -webkit-transform:translatez(0);}
.bx-wrapper .bx-controls .bx-start { display:none;}
.clear{ clear:both;}
.clear:after { content: ""; display: block; clear:both;}

body.over {overflow: hidden;}
header { background: #fff; width:1280px; margin: 0 auto; }
header:after { content:""; display:block; clear:both;}
/* header:before { content:""; position: absolute; left: 0; top:112px; z-index: 11; width: 100%; height:0;background: #fff; border-top: 1px solid #e1e6eb; box-shadow:0 1px 3px rgba(0,0,0,.08);}
header.on:before { height:94px;}*/
#header .m0auto:after { display:none;}
header h1 { float: left; padding: 0 58px 0 15px; height: var(--naviHeight); box-sizing: border-box; display: flex; align-items: center;}
header nav { float:left;}
header .topmenu:after { content: ""; display: block; clear: both; }
header .topmenu > li { float: left; padding: 0 25px 0 0;}
header .topmenu > li > a { display: block; position: relative; padding:0 32px; height: var(--naviHeight); line-height: var(--naviHeight); font-size: 19px;}
header .topmenu > li .sub { white-space:nowrap; display: none; position: absolute; top:calc(var(--naviHeight) + var(--headerTopHeight)); left:50%; transform:translateX(-50%); z-index: 15;width: 100%;background-color: #ffffff;border-top: 1px solid #e1e6eb;box-shadow:0 1px 3px rgba(0,0,0,.08);}
header .topmenu > li .sub li { display: inline-block;margin:0 -3px;}
header .topmenu > li .sub > ul > li a { display:block; height:95px; font-size: 16px; line-height: 95px; font-weight:normal; padding:0 15px;}
header .topmenu > li .sub > ul > li:first-child a { padding-left:0;}
header .topmenu > li .sub > ul > li:last-child a { padding-right:0;}
header .topmenu > li .sub a:focus,
header .topmenu > li .sub a:hover { color:#21a089;}
header .topmenu > li .lnb-detail { display:none;}
header .topmenu > li .sub>ul{width: 1280px;margin: 0 auto;text-align: center;}
/*
header .topmenu > li.lnb2 .sub > ul{text-align: left; margin-top: 20px;margin-bottom:20px;}
header .topmenu > li.lnb2 .sub > ul::after{content:"";display:block;clear:both;}
header .topmenu > li.lnb2 .sub > ul >li{display:block;float:left;width: 33.33%;margin: 0;}
header .topmenu > li.lnb2 .sub > ul >li >a{font-size: 13.2px;letter-spacing:-1px;height:auto;line-height:inherit;white-space: nowrap;padding: 15px 0;}

header .topmenu > li.lnb3 .sub01>a{display: none;}
header .topmenu > li.lnb3 .lnb-detail{display: block;text-align: left; margin: 20px 0;}
header .topmenu > li.lnb3 .lnb-detail>li{width: 33.33%;}
header .topmenu > li.lnb3 .lnb-detail>li>a{font-size: 14px;letter-spacing:-1px;height:auto;line-height:inherit;white-space: nowrap;padding: 15px 0;}
*/

header .topmenu > li.lnb3 .sub > ul{transform: translateX(140px) !important;}
@media screen and (max-width:1280px){
	header .topmenu > li.lnb3 .sub > ul{transform: translateX(0px) !important;}
}
header .topmenu > li.lnb8 .sub10{transform: translateX(495px);}
header .topmenu > li.on > a { color:#21a089;}
header .topmenu > li.on > a:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height:3px; background: #21a089;}
header .topmenu > li.on > a:before {content: ""; position: absolute; left:50%; bottom:13px; transform: translateX(-50%); border-style: solid; border-width: 7px; border-color: #8f99aa transparent transparent transparent;}
/*
header .topmenu > li:first-child ul,
header .topmenu > li:nth-last-child(1) ul { right:0; width: 1230px;}
header .topmenu > li:nth-last-child(1) ul li:last-child { padding: 0;}*/

header #gnb .close { display:none;}

header.all:before { content:""; position: absolute; left: 0; top:112px; z-index: 11; width: 100%; height:480px; background: #fff; border-top: 1px solid #e1e6eb; box-shadow:0 1px 3px rgba(0,0,0,.08);}
header .topmenu.on > li .sub .tb > div { float:none;}
header .topmenu.on > li .sub a h3 { line-height:40px;}
header .topmenu.on > li .sub { width:auto;  left:0; transform:translateX(0);}

header > div { font-size: 0; position:relative;}
header .etc { position: absolute; right: 0; top:85px; }
header .etc a { display: inline-block; margin-left: 1.65rem; line-height: 100%;}
header .etc a span {position:absolute; width: 1px; height: 1px;  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);}
header .lang { font-size: 14px; vertical-align: 4px; border-radius: 30px; border: solid 1px #dcdcdc; padding: 5px 20px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all .5s ease 0s;}
header .lang:hover{background-color: #333; color: #fff;}
header .etc .search{display:none}
header .etc .search:before { content: "\e97a"; font-family: 'xeicon'; font-size: 1.3rem;}
header .menu:before { content: "\e91c"; font-family: 'xeicon'; font-size: 1.3rem;}
/*
header .menu.on:before { content: "\e921"; display: inline-block; background: #3d63a9; width: 2rem; height: 2rem; border-radius: 100%; color:#fff; font-size:1rem; text-align: center; line-height: 2rem;}
*/
header .top{
	display: flex;
	gap: 20px;
	justify-content: flex-end;
	height: var(--headerTopHeight);
	align-items: center;
	padding-top: 10px;
	box-sizing: border-box;
}
#total .sns li,
header .sns ul,
header .sns li { display: inline-flex; gap: 10px}
#total .sns a,
header .sns a { display:block; width: 28px; height: 25px; background: url(/cdc_eng/img/ico_sns.png) no-repeat; font-size: 32px; background-size: auto 25px;}

#total .sns li.ico1 a,
header .sns li.ico1 a { background-position:1px 0;}
#total .sns li.ico2 a,
header .sns li.ico2 a { background-position:-1em 0;}
#total .sns li.ico3 a,
header .sns li.ico3 a { background-position:-2em 0;}
#total .sns li.ico4 a,
header .sns li.ico4 a { background-position:-3em 0;}
/*header .clear { padding: 1.85rem 0 0;}*/
#total { display: none;position: absolute; left:0; top: 113px; z-index: 20;width: 100%; background: #fff; border-top: 1px solid #e1e6eb; box-shadow:0 1px 3px rgba(0,0,0,.08);}
#total h2 { font-size: 0; color:transparent; position: absolute;}
#total > div { padding: 52px 0 65px;}
#total > div > div { float: left; padding: 0 0 0 45px; width:220px;}
#total > div > div:first-of-type { padding: 0;}
#total div h3 { padding: 0 0 1.25rem; border-bottom: 3px solid #043763; line-height: 100%;}
#total div h3 a { font-size: .85rem; color:#043763;}
#total div ul { padding: 1rem 0 0;}
#total div li { padding: .45rem 0;}
#total div li a { display: block;font-size: .75rem; color:#333; line-height: 1.1rem;}
#total div li a:hover { color:#21a089; font-weight: bold;}
#total .close { display: none;}
#total .sns { display: none;}
.con_right { float: right;}
footer { clear:both; padding:1.75rem 0 4.25rem; background: #333;}
footer .left { float: left; font-size: .75rem; color:#999;}
footer .right { float: right;}
.select_type1 {display: inline-block;position:relative;width: 10rem;}
.select_type1 h2 a { display: block; position: relative;padding:0 0 0 .6rem; height:1.9rem; line-height: 1.9rem;  padding: 0 2rem 0 .9rem; border: 1px solid #999; background: #333; color:#fff; font-size: .7rem; color:#979797; font-weight: normal;}
.select_type1 h2 a:after { content: "\e944"; position: absolute; right: .75rem; top: 50%; transform: translateY(-50%) rotate(0); font-family: 'xeicon'; transition: all 0.3s;}
.select_type1 h2.on a:after { transform: translateY(-50%) rotate(180deg);}
.select_type1 ul { display: none; position: absolute; left: 0; bottom:100%; width: 100%; z-index: 21; background: #fff; border: 1px solid #eee; box-sizing: border-box;}
.select_type1 ul a { display: block; height:1.9rem; line-height: 1.9rem;text-indent: .6rem; font-size: .7rem; color:#64676c; border-bottom: 1px solid #eee;}
.select_type1 ul li:last-child a { border-bottom: none;}
footer a[href^=tel] { text-decoration:inherit; color:inherit; cursor:text; }


/* 임시슬라이드메뉴 */
/*header .topmenu > li.lnb3 > div { opacity:0 !important;}*/
.lnb_slide { display:none; position:absolute; left:0; z-index:100; transform:translateY(-500px); width:100%; background:#fff; border-top: 1px solid #e1e6eb; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.lnb_slide.on { transform:translateY(0px); }
.lnb_slide > div { position:relative; width:1280px; margin:0 auto;}
.lnb_slide li { text-align:center;}
.lnb_slide li a { display:block; font-size:16px; height:95px; line-height:95px;}
.lnb_slide .bx-prev,
.lnb_slide .bx-next { position:absolute; top:50%; text-align:center; width:35px; height:35px; overflow:hidden; transform:translateY(-50%);}
.lnb_slide .bx-prev:before,
.lnb_slide .bx-next:before { font-size:35px; color:#64676c; font-family:"xeicon"}
.lnb_slide .bx-prev { left:0;}
.lnb_slide .bx-next { right:0;}
.lnb_slide .bx-prev:before{ content:"\e93c";}
.lnb_slide .bx-next:before{ content:"\e93f";}

@media screen and ( max-width:1280px ){
header .topmenu > li.lnb8 .sub10{transform:translateX(0); }
html { font-size: 16px;}
header,
.m0auto { width:100%; margin: 0 }
header { height: 4rem;}
header:before { display:none;}
header h1 {height: 4rem; padding: .8rem 0 0 .9rem; }
header h1 img { height: 2rem;}
header nav { display: none;}
header .etc { padding: 0 1.5rem 0 0; line-height:4.8rem; top: 10px;}
header .topmenu > li .sub>ul{width: auto; margin: 0; text-align: left;}
header .topmenu > li .sub .tb > div { float:none; padding:0;}
header .topmenu > li .sub a h3 { line-height:normal;}
header .topmenu > li.mnlast .sub { width:auto; transform:translateX(0);}

header .top{ display:none; }
header > div > div { padding: 0 1.5rem 0 0;}

#gnb .topmenu > li.mnfirst .sub:after,
#gnb .topmenu > li.mnlast .sub:after { display:none;}

#gnb { overflow: auto; position: fixed; left:0; top:0; z-index: 40; width:100%; height: 100%; border-top:none; box-shadow:none; background:#fff; transform:translateX(0)}
#gnb h2 { overflow:visible; position: static; width:100%; height: 3.75rem; line-height: 3.75rem;font-size: 1.125rem; color:#fff; background: #043763; text-indent: 1.25rem;}
#gnb > div { padding:0;}
#total > div > div { float:none; padding:0; width:100%;}
#total > div > div:first-of-type { padding: 0;}
#gnb .topmenu > li { padding:0; border-bottom:1px solid #eaeef3; line-height: 100%;}
#gnb .topmenu > li > a { display: block; position: relative; padding:0; height: 2.8125rem; line-height:2.8125rem;font-size: .85rem; color:#222; text-indent: 1.34rem;}
#gnb .topmenu > li > a:before { display:none;}
#gnb .topmenu > li > a:after {content:"\e946"; position: absolute; right:1.43rem; top: 1.4375rem; transform:rotate(180deg) translateY(-50%); font-family: 'xeicon'; color:#aaa; font-size: .75rem; transition: all 0.5s; line-height: 100%; text-indent:0; transform-origin: top;}
#gnb .topmenu > li .sub { position:static; background:#fafafc; padding:0 0 .84rem; left:0; width:100%; transform:translateX(0);}
#gnb .topmenu > li.on > a { color:#21a089;}
#gnb .topmenu > li.on > a:after {  background:none; left:initial; width:auto; height:auto; transform:rotate(0deg) translateY(-50%);}
header .topmenu > li.lnb3 .sub04{transform:none}
#total div ul { display: none; padding: 1rem 0 .84rem; background: #fafafc; border-bottom: 1px solid #eaeef3; border-top: 1px solid #fff; margin-top: -1px;}
#gnb div li {padding:0;display: block;float: none;transform: none;}
#gnb div li a { display: block; position: relative; font-size: .75rem; color:#333; height:auto; line-height:1.3; padding-left: 2.36rem; padding-top:.6rem;padding-bottom:0;white-space:normal;}
#gnb div li a h3 { font-size:.75rem; font-weight:normal;}
#gnb div li a:before { content: ""; position: absolute; left:1.5rem; top: 1rem; width: .25rem; height: .25rem; background: #3d63a9; border-radius: 100%;}
#gnb div li a:hover { color:#21a089; font-weight: bold;}
#gnb .sub div li a { font-weight:normal;}
header .topmenu > li .lnb-detail { display:block;}
header .topmenu > li .sub li{margin: 0; }
header .topmenu > li.lnb2 .sub > ul >li{width: 100%;}
header .topmenu > li.lnb2 .sub > ul{margin: 0;}
header .topmenu > li.lnb2 .lnb-detail{margin: 0;}
header .topmenu > li.lnb2 .lnb-detail>li{width: auto;}
#gnb .sub div .lnb-detail li { padding:0 0 0 1.375rem}
#gnb .sub div .lnb-detail a:before { content:""; position:absolute; left:1.86rem; top:.95rem; width:.3125rem; height:1px; background:#8d8f9a;}
#gnb .sub div .lnb-detail a{ position:relative; font-size:.8125rem; color:#8d8f9a; line-height:1.5625rem;}
#total .sns { display: block; height: 3.375rem; line-height: 3.375rem; padding: 0 1.46rem 0 1.25rem; border-bottom: 1px solid #eaeef3;}
#total .sns h3 { float: left;}
#total .sns ul { float: right; font-size: 0;}
#total .sns ul a {}
#total .sns ul li { position: relative; top: -.375rem;}
header #gnb .close { display:block; position: absolute; right: 1.56rem; top:1.21rem; z-index: 20; font-size:0; color:transparent}
header #gnb .close:after {content:"\e921"; font-size: 1.6rem; color:#fff; font-family: 'xeicon'}

footer { padding: 1.09rem .6rem 2.28rem;}
footer .left { float: none;}
footer .right { float: none; padding: 0 0 .9rem;}
footer .select_type1 { width: 100%;}
footer address br:first-child { display:none }

/* 임시메뉴 슬라이드 */
header .topmenu > li.lnb3 > div { opacity:1 !important;}
.lnb_slide { display:none !important;}

}