@charset "utf-8";
html { font-size:20px;}
body { font-size:1rem; -webkit-text-size-adjust : 100%; }
main > div,
header > div,
header nav > div{ margin:0 auto; width:1180px;}
main.fixed { margin-top: 161px;}
.sr_only, .hidden, .hide { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 }

/* 헤더 */
header { background-color: #fff; }
/*header > div {  height:5rem; }*/
header h1 { float: left; display: table; height: 5rem; border-collapse: collapse; border-spacing: 0;}
header h1 a{ display: table-cell; vertical-align: middle; margin: 0;}
header .search { float: left; position:relative; margin:1.45rem 0 0 4.6rem; font-size: 0;}
header .search input { width: 22.75rem; height: 2.2rem;box-sizing:border-box; border: 2px solid #21a089;vertical-align: middle; font-size: .8rem; text-indent: .5rem;}
header .search input::placeholder,
header .search input::-webkit-input-placeholder { color:#fff;}
header .search a { position:absolute; width: 2.1rem; height: 100%; background:#21a089; font-size: 0; color:transparent;vertical-align: middle; text-align:center;}
header .search a:after { content: "\e97a"; font-family: 'xeicon'; color:#fff; font-size:1rem; display:block; padding:13px 0 0;}
header .right { float: right; margin-top:1.9rem; }
header .right a { margin: 0 0 0 1rem; font-size: .85rem; color:#343639; display:inline-block; vertical-align: top;}
header .right a.btn_search { display: none; font-size: 0;}
header .right a.btn_search:after { content: "\e97a"; font-family: 'xeicon'; color:#343639; font-size:1.3rem; vertical-align: middle;}
header .right a.btn_total { width:1.4rem; height:1.4rem; position:relative;}
header .right a.btn_total:after { content: "\e91c"; font-family: 'xeicon'; font-size: 1.3rem; color:#343639; }
header > div:after { content: ""; display: block; clear: both;}
header.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; border-bottom:1px solid #d9dde2; /* box-shadow:0px 3px 10px 0px rgba(0,0,0,0.1); */ -webkit-transition:all .2s; transition:all .2s }

/* 인기검색어 */
.headerWrap { position:relative; }
.top10 { position:absolute; right:7rem; top:1.9rem; width:9.1rem;  z-index: 21; overflow:hidden; height:27px; }
.top10.on { overflow:visible; height:auto; }
.top10 .bx-controls-auto { display: none;}
.top10 .view { position: absolute; right:0; top:7px; z-index: 20;color:#9fa8b5; font-size:0;}
.top10 .view:after { content: "\e941"; font-family: 'xeicon'; font-size: .9375rem; color:#343639;vertical-align: -1.5px;}
.top10.on .view { transform: rotate(180deg);}
.top10 .slider5 li { font-size: 0;}
.top10 .slider5 li a { color:#343639; font-size: .75rem;}
.top10 .slider5 li a span { display: inline-block; margin: 0 .5rem 0 0; width:1.25rem; height:1.25rem; border-radius: 100%; border: 1px solid #e3e7ec; background: #f5f6fa; font-size: .625em; text-align: center; line-height: 1.25rem; font-style: italic; vertical-align: 2px; text-indent:-2px; color:#343639; box-sizing:border-box }
.top10 .close { display: none;}
.top10 .bx { display: none;margin: .7rem 0 0; padding:0 .9rem .65rem; border: 1px solid #e1e6eb; border-top: 1px solid #043763; background: #fff;}
.top10.on .bx { display: block;}
.top10 .bx h2 { height: 2.75rem; margin: 0 0 .65rem; border-bottom: 1px solid #e1e6eb; line-height: 2.75rem;font-size: 16px; color:#043763; text-align: center;}
.top10 .bx li { line-height: 1.4rem; font-size: .65rem;}
.top10 .bx li a { color:#666;}
.top10 .bx li a:hover { color: #043763;}
.top10 .bx li a span { display: inline-block; width: 1.6rem; font-style: italic;}


/* 접근성 */
#gnb,
#container{ display:block; width:100%; height:100%; }

.go_top { position: fixed; 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: 11; opacity: 0; visibility: hidden; color: #fff; box-sizing:border-box; -webkit-transition: all 0.3s; transition: all 0.3s }
.go_top span { display: block; font-size: .7rem; line-height:1 }
.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 }

/* 푸터*/
footer { clear:both; border-top:1px solid #d9dde2;}
footer .top,
footer .btm .in_btm,
footer .btm .sel {width:1180px;margin:0 auto;clear: both;position: relative;box-sizing:border-box;}
footer .top { position:relative; padding:0 0 0 77px;  height:59px; line-height:56px;}
footer .top h2 {position:absolute; left:0; top:2px; font-size:17px; color:#343639;}
footer .slide_box { padding:0 0 0 60px;}
footer .slide_box .slider6 a { font-size:15px; font-weight:normal;/*font-family: 'NBGL';*/letter-spacing: -1px;}
footer .bx-pager { display:none;}
footer .bx-controls { position:absolute; left:-70px; top:20px; z-index:20; padding:0 20px; width:60px; height:20px; font-size:0; box-sizing:border-box;}
footer .bx-prev,
footer .bx-next { overflow:hidden; position:absolute; top:50%; z-index:50; width:18px; height:18px; transform:translateY(-50%); font-size:0; color:transparent; line-height:18px;}
footer .bx-prev { left:0;}
/*footer .bx-next { right:2px;}*/
footer .bx-prev:before,
footer .bx-next:before { position:absolute; left:0; top:0; font-family:"xeicon"; color:#64676c; font-size:16px;}
footer .bx-prev:before { content:"\e93c";}
footer .bx-next:before { content:"\e93f";}
footer .bx-controls-auto { font-size:0;}
footer .bx-controls-auto .bx-start:before { content:"\ea3e"; font-family:'xeicon'; font-size:16px; color:#64676c; position:absolute; top:-19px;}
footer .bx-controls-auto .bx-stop  { background:url(../img/main/btn_pause.png) no-repeat center;}
footer .bx-controls-auto .bx-start,
footer .bx-controls-auto .bx-stop { overflow:hidden; position:absolute; display:block; padding:7px 0 0; width:12px; height:12px; color:transparent; font-size:0; box-sizing: content-box;}
footer .btm {padding: 1rem 0 5rem;border-top:1px solid #f0f1f3;background:#f5f6fa;}
footer .btm .sel { font-size:0; padding:0 0 1.5rem;}
footer .btm .sel .select_type1 {margin-right:4px;float: right;width: calc(17.5% - 4px);}
footer .btm .sel .select_type1 ul { top: initial; bottom: 100%;}
footer .btm .sel .select_type1:last-child {margin-left: 0;}
footer .btm .sel .select_type1:nth-child(1) { display: none;}
footer .btm .left { float:left; color:#64676c; font-size:.7rem; line-height:100%;}
footer .btm .move {position:absolute;top:-1.2rem;}
footer .btm .left li { float:left; padding:0 12px 0 0; font-weight: bold }
footer .btm .left li:nth-child(2) { color:#21a089 }
footer .btm .left li:nth-child(3) { padding-right:0; }
footer .btm .left address { clear:both; padding:10px 0 0; letter-spacing: -1px;}
footer .btm .left .top2 {padding-top:1.5rem;}
footer .btm .left address br{ display:none; }
footer .btm .right {float:right;margin-top: 1.5rem;font-size:0;}
footer .btm .right img { padding:0 0 0 1.4rem;}
.bx-wrapper .bx-controls .bx-start { display:none;}
.bx-wrapper { position:relative; *zoom:1; touch-action:pan-y; -ms-touch-action:pan-y;}
.bx-viewport { -webkit-transform:translatez(0);}
.select_type1 { display: inline-block; position:relative;}
.select_type1 h2 a { display: block; position: relative;padding:0 0 0 .6rem; height:1.9rem; line-height: 1.9rem; box-sizing:border-box; background: #f5f6fa; border:1px solid #d3d8dd; font-size:.7rem; color:#64676c; 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; 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: .4rem; font-size: .7rem; color:#64676c; border-bottom: 1px solid #eee;}
.select_type1 ul li:last-child a { border-bottom: none;}

/* 퀵메뉴 */
.quick { position:fixed; right:1rem; top:270px; z-index:15; width:110px; border-radius:55px; padding:30px 10px 10px; box-sizing:border-box; }
.quick h2 { padding:0 0 3px; font-size:.85rem; color:#8996a9; text-align:center; line-height:20px;}
.quick li { padding:15px 0 0;}
.quick a { display:block; padding:54px 0 0; width:90px; height:90px; border-radius:100%; background: no-repeat center 20px #fff; box-sizing:border-box; font-size:16px; text-align:center; color:#5f6978; border:1px solid #e5e5e5; -webkit-transition:all .5s; transition:all .5s;}
.quick .ico1 a{ background-image:url(../img/main/ico_quick1.png);}
.quick .ico2 a{ background-image:url(../img/main/ico_quick2.png);}
.quick .ico3 a{ background-image:url(../img/main/ico_quick3.png);}
/*.quick .on a,*/
.quick a:hover {background: no-repeat center 20px #043763; color:#fff; font-weight:bold; border:1px solid #043763;}

/*.quick .ico1.on a,*/
.quick .ico1 a:hover{ background-image:url(../img/main/ico_quick1_on.png);}
/*.quick .ico2.on a,*/
.quick .ico2 a:hover{ background-image:url(../img/main/ico_quick2_on.png);}
/*.quick .ico3.on a,*/
.quick .ico3 a:hover{ background-image:url(../img/main/ico_quick3_on.png);}
.quick p{ padding: 15px 0 0;}
.quick p a { background-image:url(../img/main/ico_quick4.png); background-color: #21a089; color:#fff;}

/* 퀵메뉴 펼침영역 */
.user_menu { display:none; position: fixed; right:-110%; top: 0; z-index: 30;width:14rem; height: 100%; background: #fff; opacity:0;}
.user_menu.on { display:block; }
.user_menu > div { position: relative;padding:0 1.5rem;}
.user_menu > div:last-of-type { display:none;}
.user_menu h2 { height: 5.6rem; line-height: 5.6rem; font-size: 16px; color:#8996a9; font-weight: normal;}
.user_menu h3 { padding: 30px 0 17px; font-size: 22px; color:#333; line-height:100%; font-weight: normal;}
.user_menu .close { position: absolute; right: 1.5rem; top: 1.9rem; font-size: 0;color:transparent;}
.user_menu .close:after { content: "\e9af"; font-size: 37px; font-family: 'xeicon'; color: #8996a9;}
.user_menu nav > ul > li > a { display: block; position: relative; margin: 0 1.5rem; height:3.9rem;border-bottom: 1px solid #dadada;color:#333; font-size: 1.4rem; font-weight: normal; line-height: 3.9rem;}
.user_menu nav > ul > li > a:after { content: "\e943"; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0deg);font-family: 'xeicon'; font-size: 16px; color:#aaa; transition: transform .5s;}
.user_menu nav > ul > li > a:last-child { border-bottom: none;}
.user_menu nav > ul > li ul { display: none; position: relative;}
.user_menu nav > ul > li li a { display: block; position: relative;border-top: 1px solid #eaeef3; line-height:2.95rem; color:#555; font-size: .8rem;}
.user_menu nav > ul > li li a:after { content: "\e907"; position: absolute; right: 0;font-family: 'xeicon'; font-size: 16px; color:#d0d0d0;}
.user_menu nav > ul > li.on > a:after { transform: translateY(-50%) rotate(180deg); color:#21a089;}
.user_menu nav > ul > li.on li:last-child a { border-bottom: 1px solid #21a089;}
.user_menu nav > ul > li.on > a { border-bottom: none; color:#21a089;}
.user_menu nav > ul > li.on > a:before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; top: -1px; height: 2px; background: #21a089;}
.user_menu nav > ul > li li { overflow: hidden; position: relative; padding: 0 1.5rem; transition: background .5s;}
.user_menu nav > ul > li li:hover { background: #eaeef3;}
.user_menu nav > ul > li li input[type="checkbox"] { position: absolute; left:-100px;z-index: -1;}
.user_menu nav > ul > li li input[type="checkbox"] + label:after { content: "\ea0e"; position: absolute; right:1.5rem; top: 50%; transform: translateY(-50%);font-family: 'xeicon'; color:#dfe3e8;}
.user_menu nav > ul > li li input[type="checkbox"]:checked + label:after { content: "\e92d"; color:#21a089;}
.user_menu nav > ul > li li label { display: block; height: 3rem; line-height: 3rem; font-size: .8rem; border-top: 1px solid #eaeef3;}
.user_menu nav > ul > li li:last-child label { border-bottom: 1px solid #eaeef3;}
.user_menu .plus { font-size:.75rem; color:#888;}
.user_menu .plus:before { content: "\e916"; font-family: 'xeicon'; font-size: 20px; color:#d1d1d1; vertical-align: -3px;}
.user_menu.fav nav > ul > li ul { display: block;}
.user_menu.fav nav > ul > li > a:after { display: none;}
.user_menu.fav nav > ul > li > a { font-size: 1.1rem;}
.user_menu.fav nav > ul > li > a,
.user_menu.fav nav > ul > li li:last-child label { border-bottom-color:#21a089; }
.user_menu.fav nav > ul > li li:first-child label { border-top-color:#21a089; }
.user_menu.fav .save { display: block; margin:1.2rem 1.5rem 0; height:2.3rem; line-height:2.3rem; text-align: center; background: #21a089; color:#fff; font-size: .75rem;}

/* 기초 레이아웃 제어 */
.tabs ul:after { content:""; display:block; clear:both;}
.tabs .tab_con { display:none;}
.tabs .tab_con.on { display:block;}
.dim { display: none; position: fixed; left: 0; top: 0; z-index: 29; width: 100%; height: 100%; background: rgba(0,0,0,.5);}
.btn_top { display: none;}
.mgnb { display: none;}

/* pc전용 대메뉴 */
@media screen and ( min-width:1005px){
  header nav { display: block; width:100%;  border-top: 1px solid #eaeef3; border-bottom: 1px solid #d9dde2;}
  header nav > div > ul {font-size: 0; text-align: center;}
  header nav > div > ul:after { content: ""; display: block;clear: both;}
  header nav > div > ul > li:first-child { padding-left: 0;}
  header nav > div > ul > li:last-child { padding-right: 0;}
  header nav > div > ul > li { display: inline-block; padding: 0 26px;}
  header nav > div > ul > li > a { display: block; position:relative; height: 2.95rem; line-height: 2.95rem; font-size: .95rem; color:#343639;}
  header nav > div > ul > li > a:focus,
  header nav > div > ul > li > a:hover,
  header nav > div > ul > li > a.active { color: #21a089; }
  header nav > div > ul > li.on > a:after,
  header nav > div > ul > li > a:focus:after,
  header nav > div > ul > li > a.active:after { content:""; position:absolute; left:0; bottom:0; height:3px; width:100%; background:#21a089;}
  .banner + #wrap header .sub { top:281px;}
  header .sub { display: none; position: absolute; left: 0; top:160px; z-index: 20; padding: 0 0 2rem;width: 100%; background: #fff; box-shadow:0 15px 15px -4px rgba(0,0,0,.1); border-top:1px solid #eaeef3;}
  header .sub a[target="_blank"]:after { content: "\e980"; margin: 0 0 0 .2rem;font-family: 'xeicon'; color:#a8aeb5; font-size:.7rem; }
  header .sub > ul { margin: 0 auto; width: 1180px; height:100% }
  header .sub > ul:after { content:""; display: block; clear: both;}
  header .sub > ul > li { float: left; padding:1.5rem .5rem 0; /*width: 196px;*/ width: 16.66%; height:100%; position: relative; text-align: left; box-sizing: border-box;}
  header .sub > ul > li.on > a{ color:#21a089;}
  header .sub > ul > li ~ li::before { content:""; display:block; position:absolute; left:0; top:0; background-color: #eaeef3; width: 1px; height: 100% }
  header .sub > ul > li:nth-child(7)::before,
  header .lnb2 .sub > ul > li.sublast::before,
  header .lnb4 .sub > ul > li:nth-child(4)::before,
  header .lnb4 .sub > ul > li.sublast::before,
  header .lnb6 .sub > ul > li.sublast::before,
  header .lnb9 .sub > ul > li::before { display:none;}
  header .sub > ul > li > a { display: block;font-size:.85rem; color:#323232; line-height: 100%; letter-spacing:-1px;}
  header .sub > ul > li > ul { padding: 1rem 0 0;}
  header .sub > ul > li > ul li a { display: block; position: relative; padding: .2rem .2rem .2rem 1rem;line-height: 1.1rem; font-size: .7rem; color:#555; letter-spacing: -0.03rem;}
  header .sub > ul > li > ul li a:before { content: ""; position: absolute; left: .5rem; top:.7rem; width: .15rem; height:.15rem; background: #555;}
  header .sub > ul > li > ul li a:hover,
  header .sub > ul > li > ul li a:focus { background: #21a089; color:#fff;}
  header .sub > ul > li > ul li a:hover:before,
  header .sub > ul > li > ul li a:focus:before { background: #fff;}
  header .sub > ul > li > ul li a:hover:after,
  header .sub > ul > li > ul li a:focus:after { color:#fff;}
  header .lnb2 .sub > ul { position:relative; background: url(../img/main/bg_snb1.png) no-repeat right 5.7rem top 55px;}
  header .lnb4 .sub > ul { position:relative; padding-right:29rem; box-sizing:border-box; background:url(../img/main/bg_snb3.png) no-repeat right 6.25rem top 4.7rem;}
  header .lnb4 .sub > ul > li { width: 33.33% }
  header .lnb4 .sub > ul > li:nth-child(1),
  header .lnb4 .sub > ul > li:nth-child(2),
  header .lnb4 .sub > ul > li:nth-child(3) {height:157px;}
  header .lnb4 .sub > ul > li:nth-child(4),
  header .lnb4 .sub > ul > li:nth-child(5) {margin-top:30px; height:130px;}
  header .lnb2 .sub > ul > li.sublast,
  header .lnb6 .sub > ul > li.sublast,
  header .lnb4 .sub > ul > li.sublast { float:none; padding:0; width:auto; position:absolute; right:155px;}
  header .lnb2 .sub > ul > li.sublast {top:307px;}
  header .lnb4 .sub > ul > li.sublast {top:247px; }
  header .lnb6 .sub > ul > li.sublast {top:307px; }

  header .lnb2 .sub > ul > li.sublast a,
  header .lnb6 .sub > ul > li.sublast a,
  header .lnb4 .sub > ul > li.sublast a { position:relative; font-family:'Noto Sans KR'; display:inline-block; width:240px; height:40px; line-height:40px; background:#21a089; color:#fff; font-size:14px; text-indent:20px;}
  header .lnb2 .sub > ul > li.sublast a:after,
  header .lnb6 .sub > ul > li.sublast a:after,
  header .lnb4 .sub > ul > li.sublast a:after { content:"\e93f"; font-family:'xeicon'; position:absolute; top:50%; right:14px; font-size:16px; color:#fff; transform:translateY(-50%);}
  header .lnb5 .sub > ul > li { height: 230px;}
  header .lnb5 .sub > ul > li:nth-child(7),
  header .lnb5 .sub > ul > li:nth-child(8),
  header .lnb5 .sub > ul > li:nth-child(9) { margin-top: 30px;height:170px;}
  /* header .lnb6 .sub > ul > li.sub03 { border-right:1px solid #eaeef3} */
  header .lnb6 .sub > ul { position:relative; background: url(../img/main/bg_snb2.png) no-repeat right 5.7rem top 50px;}
  header .lnb7 .sub > ul > li { height: 80px;}
  header .lnb7 .sub > ul > li:nth-child(7),
  header .lnb7 .sub > ul > li:nth-child(8),
  header .lnb7 .sub > ul > li:nth-child(9),
  header .lnb7 .sub > ul > li:nth-child(10) { margin-top: 30px;}
  header .lnb8 .sub > ul > li { height: 127px;}
  header .lnb8 .sub > ul > li:nth-child(7),
  header .lnb8 .sub > ul > li:nth-child(8),
  header .lnb8 .sub > ul > li:nth-child(9),
  header .lnb8 .sub > ul > li:nth-child(10) { margin-top: 30px; height: 255px }
  header .lnb9 .sub > ul { padding-top: 1.5rem; width: 1190px }
  header .lnb9 .sub > ul > li { float: left; display: table; margin: 0 0 1rem 0; padding:0 .5rem; width: 20%; height: 50px;   border: none;}
  header .lnb9 .sub > ul > li a { display: table-cell; position: relative; padding:0 1.5rem 0 1rem; background: #fafafc; border:1px solid #e1e6eb; vertical-align: middle; font-size: .7rem; color:#555;}
  header .lnb9 .sub > ul > li:last-child a {padding-right:2.8rem !important;}
  header .lnb9 .sub > ul > li a:focus,
  header .lnb9 .sub > ul > li a:hover { border-color: #21a089;}
  header .lnb9 .sub > ul > li a:after {position: absolute; right:.85rem; /*top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);*/}
  header nav .close { display: none;}
}

/* 반응형 타블릿 이하 */
@media screen and ( max-width:1500px){
.quick { position:fixed; right:0; top:270px; z-index:15; box-sizing:border-box; width:70px; background:#fff; padding:0; border-radius:0;}
.quick h2 { height:66px; padding:13px 0; font-size:15px; color:#8996a9; text-align:center; line-height:20px; box-sizing:border-box; border:1px solid #e4e6ee;	}
.quick li { margin-top:-1px; padding:0;}
.quick a { display:block; position:relative; height:43px; box-sizing:border-box; font-size:15px; text-align:center; color:#5f6978; border:1px solid #e4e6ee; line-height:43px; width:auto; padding:0; border-radius:0; background-image:none!important;}
.quick a:hover,
.quick .on a { color:#fff;  background-color:#043763!important; -webkit-transition:width .5s;transition:width .5s;}
.quick a span { display:none;}
.quick p{ padding: 15px 0 0;}
.quick p a { background-image:url(../img/main/ico_quick4.png); background-color: #21a089; color:#fff;}

}
@media screen and ( max-width:1200px){
footer .top,
footer .btm .in_btm,
footer .btm .sel,
main > div,
header > div,
header nav > div { margin: 0; width: 100%; box-sizing: border-box;}
header .headerWrap,
footer .btm .in_btm,
footer .btm .sel { padding-left: 1rem; padding-right: 1rem; }
header .sub > ul,
header .lnb9 .sub > ul { width: 100% }
header .search input { width:16rem; }
header nav > div > ul { display:table; width: 100% }
header nav > div > ul > li { display: table-cell; padding: 0; }
footer .top h2 { left: 1rem }
footer .slide_box { padding-left: 6.5rem }

footer .btm .move {position:absolute;top: 1.5rem;}
footer .btm .sel .select_type1 {width: calc(25% - 4px);}
footer .btm .left {padding-top:1.5rem;}
footer .btm {padding: 1rem 0 6rem;}
}

@media screen and ( max-width:1004px){
html { font-size:16px;}
header > div { position: relative }
header h1 img { vertical-align: top }
header h1 a { padding-top: .6rem }
header .right a.btn_search { display: inline-block; font-size: 0;}
header .right a.btn_search.on:after { content: "\e924";}
/* header .right a.btn_total:after { top:-1.3rem;} */
header .search { display:none; float:none; position: absolute; left: 0; top:100%; z-index: 22; margin:0;  padding:1rem 1.25rem 0; width: 100%;height: 5.3125rem; font-size: 0; border-top: 1px solid #d9dde2;border-bottom: 1px solid #d9dde2; background: #fff; box-sizing: border-box;}
header .search input { width: calc( 100% - 2.1rem); height: 2.75rem; border:none; border-bottom: 2px solid #21a089;}
header .search input::placeholder,
header .search input::-webkit-input-placeholder { color:#555;}
header .search a { height: 2.73rem;border-bottom: 2px solid #21a089; background: none;}
header .search a:after { color:#21a089; font-size: 1.5rem;}
header h1 img { height: 2.15625rem;}
header .sub a[target="_blank"]:after { content: "\e980"; margin: 0 0 0 .2rem;font-family: 'xeicon'; color:#a8aeb5; font-size:.7rem; }
.top10 { right:11rem;}

/* 모바일 전체메뉴  */
#gnb { overflow: auto; display:none; position: fixed; left: 0; top: 0; z-index: 50;width: 100%; height: 100%; box-sizing: border-box; background: #fff;}
#gnb h2 { position:relative; left: 0; top: 0; z-index: 12;padding: 0 20px; width:100%; height:60px; line-height:60px; background: #043763; font-size: 1rem; color:#98aed2; box-sizing:border-box; font-weight:normal;}
#gnb h2:after { content: ""; position: absolute; left:20px; bottom:19px; width: 0; height: 1px; background: #fff;}
#gnb h2.on:after { width:60px;}
#gnb h2.on { color:#fff;}
#gnb .close { position: absolute; right:1.5625rem; top:1.125rem; z-index: 13;font-size: 0;}
#gnb .close:after { content: "\e921"; font-family: 'xeicon'; font-size: 1.625rem; color:#fff;}
#gnb .topmenu {padding:2.1875rem 0 0 1rem; width: 9rem; height:calc(100vh - 2.1875rem); background: #f5f6fa; box-sizing: border-box;}
#gnb .topmenu > li > a { display: block; position: relative; z-index: 11;font-size: 1rem; line-height: 2.5rem; transition: all 0.5s;}
#gnb .topmenu > li > a:after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width:2px; height: .9375rem; transition: all 0.5s;background: #21a089; opacity: 0;}
#gnb .topmenu > li.on > a { color:#21a089;}
#gnb .topmenu > li.on > a:after { opacity: 1;}
#gnb .topmenu > li.on .sub { display: block; background:#fff; background-clip:content-box;}
/* 20190619_JYC */
header nav > div > ul > li { display: block;  }
header .lnb4 .sub > ul { padding-right: 0%;  }
header .lnb2 .sub > ul > li.sublast,
header .lnb4 .sub > ul > li.sublast,
header .lnb6 .sub > ul > li.sublast { display: none }

#gnb .sub { display: none; overflow: auto; position: absolute; left: 0; top: 0; z-index: 10;padding:5.8rem .9375rem 2.1875rem 10rem; width:100%; height: 100%;box-sizing: border-box; font-size: .9375rem;}
#gnb .mnfirst .sub { display:block;}
#gnb .sub .all_btns { float: right; margin-top:-1.5rem; padding: 0 1rem; height: 1.25rem; line-height: 1.25rem; font-size: .75rem; border: 1px solid #e1e6eb; border-radius: 1.25rem; color:#66768c;}
#gnb .sub .closes { display: none;}
#gnb .sub li .dep.on + ul { display: block;}
#gnb .sub > ul > li { width: 100% }
#gnb .sub > ul > li a { display: block; position: relative; height:auto; border-bottom: 1px solid #eaeef3; line-height:normal; color:#444; font-size: 1rem; text-indent:0; padding:.6rem 0 .6rem .4rem;}
#gnb .sub > ul > li a.dep:after { content: "\e941"; position: absolute; right:.5rem; top:50%; font-family: 'xeicon'; transform: translateY(-50%) rotate(0deg); transition:all .5s; text-indent: -1px;}
#gnb .sub > ul > li a.dep.on { color:#043763;}
#gnb .sub > ul > li a.dep.on:after { transform: translateY(-50%) rotate(180deg);}
#gnb .sub li ul { display:none; padding: .6rem; background: #f5f6fa;}
#gnb .sub > ul > li > ul a { color:#555; line-height:1.875rem; font-size: .78125rem; height:1.875rem; border-bottom:none; padding:0;}
#gnb .sub li ul a:before { content: "-"; padding: 0 .3rem 0 0;}
#gnb .sub li ul a[target]:after { content: "\e980"; margin: 0 0 0 .4rem; font-family: 'xeicon'; color:#888; font-size: .71875rem;}

main.fixed { margin-top: 0px;}

/* 모바일 푸터 */
footer .top { display: none;}
footer .btm .right { display: none;}
footer .btm .left { float: none; text-align: center; line-height: 1.125rem;}
footer .btm .left li { float: none; display: inline-block;}
.btn_top { display: block; height: 2.375rem; line-height: 2.375rem; border: 1px solid #cdd5e1; font-size: .75rem; color:#64676c; background: #fff; text-align: center;}
.btn_top:after {content: "\e915"; font-family: 'xeicon';}
footer .btm .sel { font-size: inherit }
footer .btm .sel::after { content:""; clear:both; display:block; }
footer .btm .sel .select_type1 { margin:0 4px 4px; float: left; width:calc(50% - 8px) }
footer .btm .sel .select_type1 h2 a { background: #fff;}
footer .btm .sel .select_type1:nth-child(1){ display: block; margin-left:4px; margin-right:0; width:calc(100% - 8px) }
footer .btm .sel .select_type1:last-child {margin:0 4px 4px; }
footer .btm .left {padding-top:0;}
footer .btm .move {position: static;text-align: center;top: 0;}
footer .btm .left .top2 { text-align:center; }
footer .btm {padding: 1rem 0 3rem;}

/* 모바일 퀵메뉴 */
.quick { display:none; margin:0;  left:0; top:0; width:100%;}
.user_menu.on { position:static; width:100%; display:block }
.user_menu .mtab { display:block;}
.user_menu.fav.on .mtab { position:absolute; left:238px; top:23px; z-index:100; color:#98aed2; font-size:1rem; border:none; line-height:100%; height:auto; padding:0;}
.user_menu.user.on .mtab { position:absolute; left:97px; top:-58px; z-index:100; color:#98aed2; font-size:1rem; line-height:100%;}
#gnb h2.on,
.user_menu .mtab.on { color:#fff !important; /*border-bottom:1px solid #fff !important;*/}
.user_menu.user.on nav { display:block; position:fixed;top:60px; z-index:100; width:100%; height:100%; background:#f5f6fa;}
.user_menu.user.on nav > ul { padding: 2.1875rem 0 0 1rem; width: 9rem; height: calc(100vh - 2.1875rem); background: #f5f6fa; box-sizing: border-box;}
.user_menu.user.on nav > ul:after { content:""; position:absolute; right:0; top:0; width:calc(100% - 9.0625rem); height:100%; background:#fff;}
.user_menu.user.on nav > ul > li ul { position:absolute; right:0; top:25px; z-index:10; width:calc(100% - 9.0625rem); height:100%; background:#fff;}
.user_menu.user.on nav > ul > li ul li { background:none; transition:none;}
.user_menu.user.on nav > ul > li ul a {display: block;position: relative; height: 2.8125rem; line-height: 2.8125rem; color: #444; font-size: 1rem; text-indent: .4rem; border-bottom:none;}
.user_menu.user.on nav > ul > li ul li:first-child a { border-top:none;}
.user_menu nav > ul > li.on li:last-child a { border-color:#eaeef3;}
.user_menu.user.on nav > ul > li ul a:after { display:none;}
.user_menu h2 { height:auto; line-height:100%; font-size:1px;}
.user_menu nav > ul > li > a {display: block; position: relative; z-index: 11; padding:0 .5rem 0 0; margin:0; font-size: 1rem; height:auto; line-height: 2.5rem; border:none;}
.user_menu nav > ul > li > a:before { display:none;}
.user_menu nav > ul > li > a:after {content: "";position: absolute;/*right:.5rem;*/top: 50%;transform: translateY(-50%);width: 2px;height: .9375rem;transition:none;background: #21a089;opacity: 0;}
.user_menu nav > ul > li.on > a:after { opacity:1;}
.user_menu.fav .mtab.on + ul { position:absolute; left:0; top:4.68rem; z-index:100; padding:0 1.25rem; width:100%; box-sizing:border-box;}
.user_menu.fav .mtab.on + ul li { padding:0; background:none; transition:none;}
.user_menu.fav .mtab.on + ul li label { text-indent:1.2rem;}
.user_menu.fav .mtab.on + ul li input[type="checkbox"] + label:after { right:initial; left:0; text-indent:0;}
.user_menu.fav .mtab.on + ul li:last-child label { border-color:#eaeef3;}
.user_menu.fav .mtab.on + ul li:first-child label { border-top:none;}
.user_menu.fav .save {position: absolute; z-index: 100; width: calc(100% - 3rem); bottom: 1rem;}
}

@media screen and ( max-width:768px){
header {margin-bottom:27px;}
header h1 { height: 4rem; }
header .right { margin-top: 1.2rem; }


.top10 {background-color:#eee;border-top:1px solid #ccc;right:inherit;left:0;top: 64px;width: 100%;height:37px;padding: 0 1.25rem;/* overflow:visible; */box-sizing: border-box;}
.top10 .view { top: .5rem; right: 1rem; font-size: .75em;}
.top10 .view:after { margin-left: .5rem;}
.top10.on {height:auto;}
.top10.on .view { transform: rotate(0);}
.top10 .bx { position: absolute; z-index: 20; width:calc(100% - 30px); box-sizing: border-box;  margin-top: -1.5rem; padding:0 .8125rem .8125rem; border: 1px solid #e1e6eb; border-top: 1px solid #043763; background: #fff;}
.top10 .bx ol { float: left; width: 50%; padding: .6875rem 0 .4375rem;}
.top10 .bx .close { display: block;position: absolute; right:1.03rem; top: 1.1rem; font-size: 0;}
.top10 .bx .close:before { content: "\e921"; font-family: 'xeicon'; color:#343639; font-size: .9rem;}
/*.top10.on .view { display: none;}*/
.top10.on .bx { display: block;}
.top10 .slider5 li a span{ background-color: #fff; vertical-align:inherit; }
.top10 .slider5 li a {display:block; padding:8px 0; font-size: 12px;}

footer .btm .left { font-size: .8rem }
footer .btm .left address br{ display:block; }
.user_menu.user.on .mtab { top:-47px;}
/* 페이지 위로 */
.go_top { right: 1.1rem; bottom: 1.1rem; }
}
@media screen and ( max-width:320px){
html { font-size:14px;}
}
