/* reset */
* {margin:0; padding:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-family: 'Pretendard', sans-serif;}
em, address, i {font-style:normal;}
html,body{max-width:100%; min-height:100%; overflow-X:hidden;}
html{overflow-x:hidden; -webkit-text-size-adjust:none; font-size:10px;}
body{-webkit-print-color-adjust:exact; font-style:normal; color:#000; line-height:1.4;}

ul, li, dl,dt,dd {margin:0; padding:0; list-style:none;}
dl,dt,dd {line-height:1;}
a {color:#000; text-decoration:none; box-sizing:border-box; font-size:1.6rem;}
img {border:0; font-size:0; max-width:100%; vertical-align:top;}
h1, h2, h3, h4, h5, h6{font-family:'Pretendard', sans-serif; letter-spacing:-.2px; line-height:1.2;}
textarea, select {font-family:'Pretendard', sans-serif;}
input, button {margin:0; padding:0; font-family:'Pretendard', sans-serif; cursor:pointer; font-size:1.8rem;}
input[type="submit"], button{cursor:pointer;}
input::placeholder {font-size:1.7rem; color:#999;}
textarea::placeholder {font-size:1.7rem; color:#999;}

table, tr, td {border-collapse:collapse; font-size:1.8rem;}
table {border:0;border-spacing:0; width:100%;}
table caption {overflow:hidden;width:0px;height:0px;}
hr {display:block;height:1px;border-top:1px solid #ccc;}
p {font-size:1.8rem;}
address {font-size:1.6rem;}
input {background:#fff; border:1px solid #dcdcdc; padding:10px;}
select {background:#fff; border:none; padding:10px; appearance:none; cursor:pointer; appearance:none; font-size:1.8rem; color:#999;}
select option {cursor:pointer;}
button {background:none; color:inherit; font-size:inherit; font-weight:inherit; border:0;}
iframe {width:100%;}

/* common */
.mob {display:none;}
.mob_line_block {display:none;}
.mob_min {display:none;}
.inner {width:100%; max-width:1600px; margin:0 auto;}
.f_paybooc {font-family: 'Paybooc';}

/* sound only */
.ifc_screen_out {overflow: hidden; display: inline-block; border: 0; position: relative; z-index: -1; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}
.bfc_screen_out {overflow: hidden; border: 0; position: relative; z-index: -1; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);}

/* direct_link */
.direct_link {position:absolute; top:0; left:0; height:1; width:100%;}
.direct_link a {position:absolute; top:-999px; padding:5px 10px; font-weight:700; color:#fff; background:#333; text-decoration:none; white-space:nowrap; width:100%; text-align:center;}
.direct_link a:focus {top:0; z-index:99999;}
  
/* header */
#header {position:absolute; top:0; left:0; width:100%; height:120px; background:rgba(0,0,0,.1); z-index:9999; transition:.3s;}
#header .inner {position:relative; display:flex; height:100%; align-items:center; justify-content:space-between;}
#header h1 a img.on {display:none;}
#header.on,
#header.focus_on {background:#fff; border-bottom:1px solid #e5e5e5;}
#header.on h1 a img.on,
#header.focus_on h1 a img.on {display:block;}
#header.on h1 a img.off,
#header.focus_on h1 a img.off {display:none;}
#header.on .gnb > li > a,
#header.focus_on .gnb > li > a {color:#222; font-weight:600;}
#header.on .gnb_depth:before,
#header.focus_on .gnb_depth:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:9999px; height:100%; background:#fff; z-index:-1;}
#header.on .global_menu span,
#header.focus_on .global_menu span {background:#212fb1;}
#header.focus_on .gnb_depth.focus_on {height:100px; opacity:1; overflow:visible;}

#header .gnb_depth.focus_on li a {opacity:1;}
#header .gnb {display:flex; align-items:center; justify-content:space-between;}
#header .gnb > li + li {margin-left:70px;}
#header .gnb > li > a {position:relative; display:block; font-size:2.1rem; color:#fff; line-height:120px; transition: .3s;}
#header .gnb > li > a:before {content:''; position:absolute; bottom:0; left:0; width:0; height:4px; background:#212fb1; transition:.3s;}
#header .gnb > li:hover > a:before {width:100%;}
#header .gnb > li:hover > a {color:#212fb1; font-weight:600;}
#header .gnb > li:hover .gnb_depth {height:100px; opacity:1; overflow:visible;}
#header .gnb > li:hover .gnb_depth > li > a {opacity:1;}

#header .gnb_depth {display:flex; align-items:center; justify-content:center; position:absolute; top:120px; left:0; height:0; width:100%; overflow:hidden; transition: height .2s; opacity:.3;}
#header .gnb_depth > li + li {margin-left:50px;}
#header .gnb_depth > li > a {display:block; font-size:1.8rem; font-weight:600; opacity:0; transition:padding 0.3s;}
#header .gnb_depth > li:hover > a {color:#212fb1; font-weight:800;}
#header .gnb_depth3 {display:none;}

#header .global_menu span.on {display:inline-block; font-size:0; vertical-align:middle; border-radius:50px; border:1px solid rgba(255,255,255,.8); transition:.3s;}
#header .global_menu span {display:none;}
#header .global_menu span:hover {background:#212fb1; border:1px solid #212fb1;}
#header .global_menu span a {position:relative; display:inline-block; font-size:1.6rem; font-weight:500; color:#fff;}
#header .global_menu span a.login {padding:13px 21px 12px;}
#header .global_menu span a.login:before {content:""; display:inline-block; margin-right:10px; width:13px; height:14px; background:url(/resource/www/images/ic_login.png) center no-repeat; background-size:13px 14px;}
#header .global_menu span a.logout {padding:13px 21px 12px 10px; position:relative; font-size:1.4rem;}
#header .global_menu span a.logout:before {content:""; display:inline-block; margin-right:10px; width:13px; height:14px; background:url(/resource/www/images/ic_logout.png) center no-repeat; background-size:13px 14px;}
#header .global_menu span a.group:after {content:""; position:absolute; top:0; right:0; bottom:0; margin:auto; width:1px; height:10px; background:#fff;}
#header .global_menu span a.group {padding:13px 10px 12px 21px; font-weight:600;}

#header .hamburger {position:absolute; top:50%; left:4%; transform:translateY(-50%); cursor: pointer; display:none;}
#header .hamburger .line {display:block; width:40px; height:3px; background-color:white; margin:10px 0; opacity:1; transition:0.3s all;}
#header .hamburger.rw_on {left:auto; right:22px;}
#header .hamburger.rw_on .line:nth-child(1) {transform:translateY(11px) rotate(45deg); transition:0.3s all;}
#header .hamburger.rw_on .line:nth-child(2) {opacity:0; transition:0.3s all;}
#header .hamburger.rw_on .line:nth-child(3) {transform:translateY(-15px) rotate(-45deg); transition:0.3s all;}

/* 로그인시 보여짐 */
#header .gnb_depth li.edit {display:none;}
#header.login .gnb_depth li.edit {display:block;}
#header.login .global_menu span.on {display:none;}
#header.login .global_menu span.off {display:block;}

/* footer */
#footer {border-top:1px solid #ddd;}
#footer .ft_top {position:relative; display:flex; justify-content:space-between; align-items:center; padding:12px 0;}
#footer .ft_top:before {content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:9999px; height:100%; background:#393939; z-index:-1;}
#footer .ft_top .ft_top_list {display:flex; margin:0 -20px;}
#footer .ft_top .ft_top_list li {position:relative;}
#footer .ft_top .ft_top_list li:first-child a {font-weight:700;}
#footer .ft_top .ft_top_list li a {display:block; color:#fff; padding:0 20px;}
#footer .ft_top .ft_top_list li + li:before {content:''; position:absolute; top:0; left:0; bottom:0; width:1px; height:14px; background:#616161; margin:auto;}

#footer .ft_btn_site_box {position:relative;}
#footer .ft_btn_site_box:before {content:''; position:absolute; top:0; bottom:0; right:15px; margin:auto; width:10px; height:9px; background:url(/resource/www/images/ic_site_more.png) center no-repeat; background-size:10px 9px; transition:.3s;}
#footer .ft_btn_site_box.on:before {transform:scaleY(-1);} 
#footer .ft_btn_site_box select {font-size:1.4rem; color:#fff; padding:11px 150px 9px 17px; border:1px solid #909091; background:transparent; cursor:pointer;}
#footer .ft_btn_site_box select option {color:#333; cursor:pointer;}

#footer .ft_bottom {display:flex; align-items:center; padding:30px 0 45px;}
#footer .ft_bottom address {margin-left:22px; color:#333; font-weight:500;}
#footer .ft_bottom address strong {display:inline-block; font-weight:800; margin-right:10px;}
#footer .ft_bottom address span {color:#999;}

@media screen  and (max-width:1599px) {
  #header .inner, 
  #footer .inner {padding:0 5%;}
}

@media screen and (max-width:1370px) {
  html {font-size:9px;}
  #header {height:100px;}
  #header.rw_on {position:fixed; background:none; border:none;}
  #header.rw_on:before {content:''; position:absolute; bottom:0; left:0; width:calc(100% - 85px); height:1px; background:#E5E5E5;} 
  #header.rw_on .inner {display:block;}
  #header.rw_on h1 {position:absolute; top:50%; left:3%; transform:translateY(-50%); z-index:1;}
  #header.rw_on h1 a img.on {display:block;}
  #header.rw_on h1 a img.off {display:none;}
  #header.rw_on .global_menu {display:inline-block; position:absolute; right:115px; top:50%; transform:translateY(-50%);}
  #header.rw_on .global_menu span {background:#212fb1; border:1px solid #212fb1;}
  #header.focus_on .gnb > li > a {color:#fff; font-weight:400;}

  #header .inner {justify-content:center;}
  #header .gnb.rw_on {display:block;}
  #header .gnb {display:none; position:absolute; top:100px; left:0; width:40%; height:100vh; background:#202752; padding:30px 0;}
  #header .gnb:before {content:''; position:fixed; top:0; left:0; width:calc(100% - 85px); height:100%; background:#fff; z-index:-1;}
  #header .gnb:after {content:''; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.1); z-index:-2;}
  #header .gnb > li + li {margin-left:0;}
  #header .gnb > li > a {padding:30px 9%; color:#fff; line-height:1.2;}
  #header .gnb > li:hover > a {color:#212fb1; background:#fff;} 
  #header .gnb > li > a:before {display:none;}
  #header .gnb > li > a:after {content:''; position:absolute; top:50%; transform:translateY(-50%); right:10%; width:10px; height:17px; background:url(/resource/www/images/m_ic_arrow_n.png) center 90% no-repeat; opacity:0; transition:.3s;}
  #header .gnb > li:hover > a:after {opacity:1;}

  #header .gnb_depth {position:absolute; top:30px; left:100%; display:block;}
  #header .gnb_depth:before {display:none;}
  #header .gnb_depth li + li {margin-left:0;}
  #header .gnb_depth li a {font-size:2.1rem; color:#333; padding:20px 10%;}
  #header .gnb_depth li.edit {position:absolute; top:0; left:10%;}
  #header .gnb_depth li.edit a {padding:13px 78px 12px 21px; background:#131a43 url(/resource/www/images/m_ic_arrow_w.png) 88% center no-repeat; color:#fff; font-weight:500; border-radius:50px;}
  
  /* 로그인시 보여짐 */
  #header.login .gnb_depth.union {padding-top:60px;}

  #header .gnb_depth3 {display:block; padding:5px 10px 5px 9%;}
  #header .gnb_depth3 li {position:relative;}
  #header .gnb_depth3 li:before {content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:5px; height:5px; background:#666; border-radius:50%;}
  #header .gnb_depth3 li a {display:block; color:#666; padding:12px 15px; transition:.1s;}
  #header .gnb_depth3 li:hover a {color:#333; font-weight:600;}
  #header .gnb_depth3 li:hover:before {background:#333;}

  #header .global_menu {display:none;}

  #header .hamburger {display:block;}
}

@media screen  and (max-width:768px) {
  .pc {display:none;}
  .mob {display:block}
  .mob_line_block {display:inline-block;}

  #header h1 a img {width:270px;}
  #header .gnb > li > a {padding:27px 15% 27px 7%;}
  #header .gnb > li > a:after {right:6%;}
  #header .gnb > li:hover .gnb_depth {height:calc(100vh - 130px); overflow-y:scroll;}

  #header .gnb_depth {top:40px;}
  #header .gnb_depth li a {padding:13px 8%;}

  #header .gnb_depth3 li a {padding:5px 10px;}
  #header .gnb_depth3 li:before {width:3px; height:3px;}

  #footer .ft_top {padding:20px 0;}
  #footer .ft_top .ft_top_list li a {font-size:1.8rem;}
  #footer .ft_top {justify-content:center; padding:17px 0;}
  #footer .ft_btn_site_box {display:none;}

  #footer .ft_bottom {flex-wrap:wrap; justify-content:center; text-align:center; padding:40px 0 50px;}
  #footer .ft_bottom h6 {width:100%;}
  #footer .ft_bottom address {margin-top:20px; margin-left:0;}
}

@media screen and (max-width:700px) {    
  #header.rw_on:before {width:100%;}
  #header .gnb:before {width:100%;}
  #header .gnb {width:49%;}
  #header.rw_on .hamburger .line {background:#333;}
  #header.rw_on .global_menu {right:78px;}

  #header .hamburger .line {width:30px; margin:8px 0;}
  #header .hamburger.rw_on .line:nth-child(1) {transform:translateY(12px) rotate(45deg);}
  #header .hamburger.rw_on .line:nth-child(3) {transform:translateY(-10px) rotate(-45deg);}
}

@media screen  and (max-width:645px) {
  .mob_min {display:block;}
  #header.rw_on h1 {opacity:0;}
}

@media screen  and (max-width:460px) {
  html {font-size:8px;}
  .mob_min_w {display:block;}
  #header h1 a img {width:240px;}
  #footer .ft_bottom address {font-size:1.7rem;}
}

@media screen  and (max-width:280px) {
  html {font-size:5px;}
}