.d_clear {clear:both}

/*pc*/
@media all and (min-width:1200px) {
  body.scroll #hs1 {display:none;}
  body.pc {min-width:1200px}

  #header {display:block; width:100%; max-width:2000px; height:100px; margin:0 auto; position:fixed; z-index:999; transition:0.3s;}
  body.scroll #header {height:70px; box-shadow:0 0 30px 0 rgba(0,0,0,0.05);}
  body.scroll #header,
  body.fp-viewing-info:not(.fp-responsive):not(.lnb_over) #header {background:#fff;}

  #header .bg {display:none; position:absolute; left:0; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0.2); z-index:-1;}
  body.lnb_over #header .bg {display:block;}

  #hs1 {position:relative; overflow:hidden; display:none;}
  #hs2 {position:relative; width:100%;}
  #hs2 .d_container {display:flex; align-items:stretch;}
  #hs2 h1 {padding:0 0 0 20px; position:relative; z-index:1;}
  #hs2 h1 a {display:flex; align-items:center; width:100%; height:100%;}
  #hs2 h1 a img {width:400px; height:auto; transition:0.3s; flex-shrink:0;}
  #hs2 h1 a img.w {display:block;}
  #hs2 h1 a img.b {display:none;}
  
  body.scroll #hs2 h1 a img.b,
  body.lnb_over #hs2 h1 a img.b,
  body:not(.lnb_over):not(.fp-responsive).fp-viewing-prcenter #hs2 h1 a img.b,
  body:not(.lnb_over):not(.fp-responsive).fp-viewing-info #hs2 h1 a img.b {display:block;}
  
  body.scroll #hs2 h1 a img.w,
  body.lnb_over #hs2 h1 a img.w,
  body:not(.lnb_over):not(.fp-responsive).fp-viewing-prcenter #hs2 h1 a img.w,
  body:not(.lnb_over):not(.fp-responsive).fp-viewing-info #hs2 h1 a img.w {display:none;}
  body.scroll #hs2 h1 a img {}

  #d_lnb_bg {position:absolute; left:0; top:0; width:100%; height:0; background:#fff; overflow:visible !important; z-index:0;}

  body.lnb_over #d_lnb_bg .shadow {display:block}
  #d_lnb_bg > .d_container {overflow:hidden; height:100%;}

  #d_lnb_btn {display:none}

  #d_lnb {width:100%; height:100px; display:flex;}
  body.lnb_over #d_lnb:after {content:''; display:inline-block; width:100%; height:1px; background:var(--border); position:absolute; left:0; top:100px;}
  body.lnb_over.scroll #d_lnb:after {top:70px}
  #d_lnb ul {position:relative; display:flex; justify-content:flex-end; width:100%;}
  #d_lnb li {width:min(calc(100% / 6), 180px); position:relative;}
  #d_lnb li:after {content:''; display:inline-block; width:0; height:3px; background:var(--col01); position:absolute; left:50%; bottom:0; transition:0.3s;}
  #d_lnb li.on:after {width:2em; left:calc(50% - 1em);}
  #d_lnb li > a {display:flex; align-items:center; justify-content:center; height:100%; font-size:22px; font-weight:700; text-align:center; transition:0.3s; line-height:1.2; color:#fff;}
  
  body.lnb_over #d_lnb li > a,
  body.scroll #d_lnb li > a,
  body.fp-viewing-prcenter #d_lnb li > a,
  body.fp-viewing-info #d_lnb li > a {color:#404040;}
  #d_lnb li:hover > a {color:var(--col01);}
  body.scroll #d_lnb {height:70px;}
  body.scroll #d_lnb li > a {font-size:20px;}

  #d_lnb li.on .sub {}
  #d_lnb li .sub {position:absolute; width:100%; height:0; overflow:hidden;}
  #d_lnb li .sub dl {padding:40px 20px; display:flex; flex-direction:column; gap:10px;}
  #d_lnb li .sub dd a {display:block; font-size:16px; text-align:center; font-weight:600;}
  #d_lnb li .sub dd a:not(:hover) {color:#999;}
  #d_lnb li .sub dd a[target='_blank']:after {font-family:var(--ic); content:'open_in_new'; margin:0 0 0 0.5em;}

  #d_lnb .tail {display:flex; justify-content:flex-end; align-items:center; gap:20px; padding-right:40px; color:#fff; text-align:center; position:relative; z-index:2;}
  #d_lnb .tail a.sitemap {width:fit-content; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:10px;}
  #d_lnb .tail a.sitemap span {display:block; width:50px; height:2px; background:#fff; transition:0.3s}
  #d_lnb .tail a.sitemap span:nth-child(1) {width:30px;}
  #d_lnb .tail a.sitemap:hover span:nth-child(1) {width:50px;}
  
  body.lnb_over #d_lnb .tail a.sitemap span,
  body.scroll #d_lnb .tail a.sitemap span,
  body.fp-viewing-prcenter #d_lnb .tail a.sitemap span,
  body.fp-viewing-info #d_lnb .tail a.sitemap span {background:#404040;}

  #d_lnb_mask {display:none}
}

@media all and (min-width:1600px) {
  #hs2 h1 a img {width:440px;}
  #d_lnb .tail {padding-left:40px;}
  #d_lnb li .sub dd a {font-size:18px;}
}


/*mobile*/
@media all and (max-width:1200px) {
  #header {position:fixed; z-index:999; width:100%; max-width:2000px; min-width:320px; left:0; right:0; top:0;}
  body.scroll #header {background:#fffffffa; backdrop-filter:blur(20px);}

  #header .bg {position:absolute; left:0; top:0; width:100%; height:100%; opacity:1; transition:0.5s;}
  body.lnb_on {overflow:hidden}
  body.lnb_on #d_lnb_mask {position:fixed; left:0; top:0; width:100%; height:100%; z-index:990; background:rgba(0,0,0,0.4)}

  #d_gnb {position:fixed; left:-100%; top:0; height:60px; width:100%; background:#fff; backdrop-filter:blur(20px); z-index:998; max-width:480px; display:flex; align-items:center; padding:0 20px;}
  #d_gnb a img {height:40px;}

  #d_gnb .close {cursor:pointer; display:flex; align-items:center; justify-content:center; margin-left:auto;}
  #d_gnb .close:after {content:'close'; font-family:var(--ic); font-size:2em; font-weight:300;}

  #hs2 {position:relative; height:60px;}
  #hs2 h1 {height:60px; display:flex; align-items:center; justify-content:flex-start;}
  #hs2 h1 a img {height:40px; margin:0 0 0 20px;}
  #hs2 h1 a img.w {display:block;}
  #hs2 h1 a img.b {display:none;}
  body.scroll #hs2 h1 a img.w {display:none;}
  body.scroll #hs2 h1 a img.b {display:block;}
  
  #d_lnb_bg {display:none}
  #d_lnb_btn {position:absolute; top:15px; right:20px; cursor:pointer; width:30px; height:30px; display:flex; align-items:flex-end; justify-content:center; flex-direction:column; gap:5px;}
  .icon-bar {display:block; width:30px; height:2px; background:#fff;}
  .icon-bar:nth-child(1) {width:20px;}
  body.scroll .icon-bar {background:#404040;}

  #d_lnb {position:fixed; left:-100%; top:60px; width:100%; max-width:480px; height:100%; min-height:calc(100vh - 60px); overflow:auto; background:#fff; backdrop-filter:blur(20px); z-index:997;}
  #d_lnb ul {height:100%; overflow:auto;}
  #d_lnb li > a {display:flex; padding:20px; font-size:18px; position:relative; font-weight:600; gap:1em;}
  #d_lnb li > a:after {content:'keyboard_arrow_down'; font-family:var(--ic);}
  #d_lnb li.on {transition:0.3s;}
  #d_lnb li.on > a:after {content:'keyboard_arrow_up';}

  #d_lnb li .sub {display:none; padding:20px; transition:0.3s; background:var(--lbg);}
  #d_lnb li.on .sub {display:block; height:auto !important;}
  #d_lnb li .sub dl {display:flex; flex-direction:column;}
  #d_lnb li .sub dd a {display:flex; gap:10px; padding:5px 0; font-size:16px;}
  #d_lnb li .sub dd a:hover {font-weight:600;}

  #d_lnb .tail {display:none;}
}