/* header */
header{  position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 1180px; margin:16px auto 0 /*배너전 margin: 24px auto 32px;*/}
header .header-logo {width: 206px; max-width: 206px; min-width: 174px; margin-right:30px; padding-top:18px; flex:1;}
header .header-logo img{width: 100%;height: auto; object-fit: contain;}
/* header .header-logo{width:120px; margin-right: 20px;} 
header .header-logo img{width:100%; object-fit:contain;}*/
header .header-body { position: relative; width:100%; display: flex; flex-direction: column; flex:2;}
header .gnb{ margin-left: auto;}
header .gnb a{ font-size: 0.875rem; color: #757575; margin: 0 10px;}
header .navigation-wrap{width:100%; display: flex;align-items: flex-end; justify-content: flex-end; gap:30px;  border-bottom: 3px solid;  border-image: linear-gradient(to right, #004A87, #0095D5) 1;
margin-top:16px; padding-bottom: 16px; z-index: 1;}
header nav.nav { position: unset; display: flex; justify-content: flex-end;}
header nav.nav ul{ display: flex; align-items: center; gap:40px; margin-right: 40px;}
header nav.nav li { font-size: 1.0625rem; color: #111; font-weight: 700; word-break: keep-all;}
header .btn-search,
.sub-header .btn-search{ position: relative; width: 40px; height: 40px; background: none; border: 0;}
header .btn-search::before,
.sub-header .btn-search::before{content: ""; position: absolute; left: -14px; display: block; width: 1px; height: 60%; background-color: #ccc;}

.sub-header{position: relative;width: 100%; height: 64px; background-color: #fff;  border-bottom: 1px solid #E3E3E3; box-sizing: border-box; position: fixed; top:0; z-index: 99999; display: none;}
.subheader-wrap{ width: 100%;display: flex;justify-content: space-between; align-items: center; margin: 0 auto; box-sizing: border-box; }
.sub-header .subheader-logo { display: block; width: 98px; }
.sub-header .subheader-logo img{width: 100%;}
.sub-header .header-body {height: 64px; display: flex; flex-direction: column;justify-content: center; flex: 1;}
.sub-header .gnb{ margin-left: auto;}
.sub-header .gnb a{ font-size: 0.875rem; color: #757575; margin: 0 10px;}
.sub-header .navigation{width:100%; display: flex; justify-content: flex-end;align-items: center; gap:40px; }
.sub-header nav.nav { position: unset; display: flex; width: auto;}
.sub-header nav.nav ul{ display: flex; align-items: center; gap:40px;}
.sub-header nav.nav li { font-size: 1.0625rem; color: #111; font-weight: 700; word-break: keep-all;}

.sub-header.is-block{ display:block; }
.sub-header.fixed{display: flex;}
.sub-header .gnb.hidden, .sub-header nav.hidden{ display:none; }

.headlines { font-size: 0.938rem; padding: 10px 8px; box-sizing: border-box;}
.rolling-box { overflow: hidden; height: 1.5em; }
.rolling-wrap { display: flex;flex-direction: column; transition: transform 0.5s ease;}
.headlines .item {  display: flex; align-items: center;}
.headlines .item span {color:#004B88; font-weight: bold; margin-right: 10px; word-break: keep-all;  border-right: 1px solid #bbb; padding-right: 10px;line-height: 1;}
.headlines .item p { margin: 0;color:#666; white-space: nowrap;line-height: 1.5;}
.headlines .item p a{display: -webkit-box; overflow: hidden; white-space: normal; word-break: break-all; text-overflow: ellipsis;-webkit-line-clamp:1; -webkit-box-orient: vertical;}

.btn-box{display: flex; gap:30px;}
.btn-menu{background:none;border:none;cursor:pointer;}
.icon{width:40px;height:40px;}
.line{fill:none;stroke:#333;stroke-width:5;stroke-linecap:round;transition:all .4s ease;transform-box: fill-box;transform-origin: center; }
.btn-menu.active .line.top{transform:rotate(45deg);transform-origin:-8% -8%;}
.btn-menu.active .line.middle{opacity:0;}
.btn-menu.active .line.bottom{transform:rotate(-45deg);transform-origin:-11% -11%;}

.new-nav-sitemap{position: absolute;top:63px; left:0; bottom: auto;width: 100%;margin: 0; background-color:#ffffff; box-shadow: 0 3px 7px #0a121813; padding: 20px 40px 30px 40px; border: 1px solid #e5e5e5; box-sizing: border-box; z-index: 9; display: none;}
.sitemap-wrap{ display: flex; width: 1180px; margin:0 auto; gap:42px; align-items: flex-end;}
.sitemap-navigation{ max-width: 960px; flex:3.5}
.new-nav-sitemap .nav-sitemap-top{display: flex; justify-content: space-between;padding: 10px;}
.new-nav-sitemap .nav-sitemap-top dl{display: flex; flex-direction: column; gap: 14px;}
.new-nav-sitemap .nav-sitemap-top dt{font-size: 1rem;font-weight: 600;line-height: 30px;display: inline-block;color: #222; letter-spacing: -.075em}
.new-nav-sitemap .nav-sitemap-top dt > button{display: none;transform: rotate(180deg); transition: all .4s ease;}
.new-nav-sitemap .nav-sitemap-top dt > button img{width: 28px; height: 28px;}
.new-nav-sitemap .nav-sitemap-top dt > button.active{transform: rotate(0deg);}
.new-nav-sitemap .nav-sitemap-top dd{font-size: 0.875rem; color:#666}
.new-nav-sitemap .nav-sitemap-bottom{display: flex; flex-wrap: wrap; border-top:1px solid #E3E3E3; overflow: hidden;margin: 30px 0 0 0; padding: 30px 0 0 0; gap: 13px 39px;}
.new-nav-sitemap .nav-sitemap-bottom dl{display: flex; flex-wrap: wrap; gap:12px;}
.new-nav-sitemap .nav-sitemap-bottom dt{font-size: 0.938rem; font-weight: 600;color:#222; letter-spacing: -.075em;display: inline-block;margin: 0 12px 0 0}
.new-nav-sitemap .nav-sitemap-bottom dd a{ color: #666; font-size: 0.875rem; font-weight: 400; word-break: keep-all;}
.new-nav-sitemap .sitemap-banner{ flex:1;}
.new-nav-sitemap .sitemap-banner img{ max-width:100%; margin-top: 20px;}

.scroll-top{bottom:30px;border:0 none; box-shadow: 0 1px 5px #2b2d3152, 0 -1px 1px #649fe952;}
.scroll-top button{width: 50px;height: 50px;}

.popular h2{ border-bottom:2px solid #222; padding-bottom: 16px;font-size: 1.125rem; font-weight: 700; line-height: 1;}
.popular > ul > li{ padding-top: 14px; margin-top: 12px; border-top: 1px dotted #E3E3E3;}
.popular > ul > li:first-child{border-top:0 none; margin-top:0}
.popular > ul > li a{ display: flex; gap:15px;}
.popular .number{ font-size: 1.125rem; font-weight:700; color:#0095d5; padding-top: 3px;}
.popular h4.popular-title{color:#222; font-size: 1.063rem; font-weight: 700; line-height: 1.38; word-break: keep-all; padding:2px 4px 0 0 ;}
.popular .popular-content .hashtag{display: none; font-size: 0.875rem; color:#757575;}
.popular .popular-content .hashtag li{ display: inline-block; line-height: 1.6;}
.popular .popular-content .hashtag li::before{ content: "#";}


/* .series-area .series-left .nwstory ul li .news-image figure{aspect-ratio: 1.52 / 1; height: auto!important;} */

/* 기존 css 대응 */

@media all and (min-width:1025px) and (max-width:1200px){
  header .header-logo{ width: 140px; min-width: auto; position: absolute; left: 32px; top:-7px}
}

@media all and (min-width:768px) and (max-width:1024px){
  header .header-logo{width: 140px; min-width: auto; margin-right: 30px;position: absolute; left: 32px; top:-7px}
  header nav.nav li{font-size: 1rem;} 
}

@media all and (max-width: 767px) {
    .view-header,
  .sticky-menu{height: 54px; background-color: transparent!important;}
    header .navigation-wrap{margin-top: 0; padding-bottom: 8px;}
    header .header-logo{ width: 102px; min-width: auto;  margin-right: 30px; position: absolute; left: 32px; top:-24px}
  .gnb, nav.nav ul{display: none!important;}
}

@media (min-width: 481px) and (max-width: 767px){
  /* header .header-logo{ width: 90px;} */
  header nav.nav ul{display: none;}
  .progress-container-nav,
  .new-nav-sitemap{top:64px;}
}

@media all and (max-width:480px){
  header{margin: 8px auto;}
  header .navigation-wrap{align-items: center;}
  header .header-logo{ max-width: 172px;}
  .sub-header .navigation{gap:20px;}
  .icon{transform: translate(14px, 0px);}
  .new-nav-sitemap, .progress-container-nav{top:56px;}
  .progress-container-nav{top:56px;background-color: transparent;}
  .view-header{height: 56px;}
}


@media (min-width: 481px) and (max-width: 640px){
  .progress-container-nav,
  .new-nav-sitemap{top:55px;}
}

/* Mobile 전용: 0 ~ 639.98px */
@media (max-width: 639.98px) {
  header{width: 95%; margin: 16px auto;}
  header .header-logo {left: 0.5%;}
  header .navigation-wrap{gap:40px; margin-top: 0px; padding: 0 4px 8px 4px; box-sizing: border-box;}
  header .btn-search, .sub-header .btn-search{width: 42px; height: 42px;}
  header .btn-search::before{left: -18px;}
  .sub-header{height: 56px;}
  .sub-header .btn-search::before{left: -10px;}
  .icon{width:42px;height:42px;transform: translate(10px, 0px);}
  .btn-menu.active .line.top {transform: translateY(12%) rotate(45deg);}
  .btn-menu.active .line.middle { opacity: 0;}
  .btn-menu.active .line.bottom {transform: translateY(-12%) rotate(-45deg);}
  .btn-search img{ width: 26px;}

  .subheader-wrap{ padding:0 16px;}
  .sub-header .subheader-logo { width: 84px; }
  .sub-header .header-body{height: 56px;}
  .sub-header .navigation{gap:20px;}
  
  .new-nav-sitemap{height: calc(100vh - 56px); padding:16px; overflow-y: auto; box-sizing: border-box;}
  .new-nav-sitemap .nav-sitemap-top{padding: 0;flex-direction: column; gap:8px}
  .new-nav-sitemap .nav-sitemap-top dl{gap:0;}
  .new-nav-sitemap .nav-sitemap-top dl:last-child dt{border-bottom:0}
  .new-nav-sitemap .nav-sitemap-top dt{display: flex; align-items: center;font-size: 1.125rem; letter-spacing: 0;}
  .new-nav-sitemap .nav-sitemap-top dt > button{display: block; width: 40px; height: 40px;}
  .new-nav-sitemap .nav-sitemap-top dt > button img{width: 24px; height: 24px;}
  .new-nav-sitemap .nav-sitemap-top dd{display: none; color:#222; font-size: 1rem; padding-left:4px; padding:12px;}
  .new-nav-sitemap .nav-sitemap-top dd a{ display: block;}
  .new-nav-sitemap .nav-sitemap-bottom{margin-top: 16px; padding: 16px 4px 4px;}
  .new-nav-sitemap .nav-sitemap-bottom dl{ gap: 6px 26px;}
  .new-nav-sitemap .nav-sitemap-bottom dt{ width: 100%; font-size: 1rem; margin-bottom: 6px;}
  .new-nav-sitemap .nav-sitemap-bottom dd a{font-size: 0.875em;}
  .sitemap-wrap{width: 100%; flex-direction: column; gap:16px}
  .new-nav-sitemap .sitemap-banner{display: flex;flex-direction: column;justify-content: space-around;align-items: center;}
  .new-nav-sitemap .sitemap-banner img{ display: block; width: calc(90% - 40px); margin: 12px auto 0;}
  
  .series-area .series-left .nwstory ul li .news-text .category{margin: 0 0 5px 0;}
  .series-area .series-left .nwstory ul li .news-text .headline{height: auto; margin-left: 0;}
}


/* Tablet 전용: 640 ~ 1199.98px */
@media (min-width: 640px) and (max-width: 1199.98px) {
  header{padding:0 32px;}
  header nav.nav ul{gap:24px; margin-right: 20px;}
  /*nav.nav ul{display: none!important;}*/
  .sub-header .gnb{display: none !important;}
  .sub-header nav.nav ul{gap:24px;}
  .sub-header nav.nav li{font-size: 0.938rem;}
  /* .sub-header nav.nav ul{ display: none!important; } */
  .btn-menu span{ margin: 5px 0;}
  .subheader-wrap{ padding:0 24px;}
  .sub-header .navigation{gap:20px;}
  
  .new-nav-sitemap{padding:20px;}
  .sitemap-wrap{width: 100%; flex-direction: column; align-items: center;}
  .new-nav-sitemap .sitemap-banner{ text-align: center;}
  .new-nav-sitemap .sitemap-banner img{ width: 30%; margin: 0 20px;}
  
  .progress-container-nav{position: absolute; bottom:-4px; left:0; width: 100%; margin:0; background-color: transparent/*#ededed*/;}
  
}


/* PC 전용: 1200px ~ */
@media (min-width: 1200px) {
  header .navigation-wrap{padding-bottom: 12px;}
  .subheader-wrap{width: 1180px;}
  .progress-container-nav{position: absolute; bottom:-4px; left:0; width: 100%; margin:0; background-color: transparent/*#ededed*/;}
}


/* 이전 @media */ 
/*
@media all and (max-width:480px){}
@media all and (min-width:481px) and (max-width:767px){}
@media all and (min-width:768px) and (max-width:1024px){}
@media all and (min-width:1025px) and (max-width:1199px){}
@media all and (min-width:1200px){}
@media all and (min-width:1370px){}       
*/