@charset "utf-8";
.container {position: relative; width: 100%; max-width: 1200px; height: inherit; margin: 0 auto; box-sizing: border-box; }
* {box-sizing: border-box !important;}

.container.w1000{max-width: 1100px!important;}
.h_flex{display: flex; align-items: center; justify-content: space-between; padding: 0 20px;}

/* wrap */
#wrap {position: relative;}

/* header */


#header {position: relative;}
.header {
  position: fixed;
  width: 100vw;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}


.header .h_nav {
  position: relative;
  height: 100%
}


.h_nav .logo_wrap{display: flex; align-items: center !important; justify-content: space-between;  height: 75px;}
.h_nav .logo_wrap .date{font-size: 14px; font-weight: 900;margin-left: 15px;}

.h_nav h1 .logo {
  display: inline-block;
  width:120px;
  height: 27px;
  background: url(../images/common/logo.png) no-repeat center center;
  background-size: 100% auto;
  vertical-align: middle;
}

.h_nav .mo_btn:after {
  content: "\e91c";
  display: inline-block;
  position: absolute;
  right:20px;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  font-size: 35px;
  font-family: xeicon;
  color: #000000;
}
.h_nav .mo_srch:after {
  content: "\e97a";
  display: inline-block;
  position: absolute;
  right: 70px;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  font-size:30px;
  font-family: xeicon;
  color: #000000;
}
@media all and (max-width:768px){
.h_nav .mo_btn:after,.h_nav .mo_srch:after  {font-size: 30px;}
}
.search { display: none; }
.header.mobile .search { display: block; }

.header.mobile .search {
  position: absolute;
  left: 0;
  top: 75px;
  width: 100%;
  height: 100vh;
  max-height:600px;
  z-index:30;
  text-align: center;
  background: white;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.header.mobile .search .input {
  position: absolute;
  width: 100vw;
  max-width: 620px;
  left: 50%;
  top: 35px;
  height: 50px;
  border: 0;
  border-bottom: 1px solid #222;
  text-align: left;
  color: #222;
  font-size: 1.143rem;
  transform: translateX(-50%);
  border-radius: 0;

}
.header.mobile .search .input::placeholder {
  text-align: left;
  color: #222;
}
.header.mobile .search .input:focus {outline: 0;}
.header.mobile .search .searchBtn {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.search-suggestions{position: absolute; top:120px; left: 50%; transform: translateX(-50%); text-align: left;  width: 100vw; max-width: 620px; display: flex; flex-wrap: wrap; gap: 10px; justify-content:flex-start;} 
.search-suggestions .suggestion{background: white; border: 1px solid #f7868f; font-size: 16px; font-family:'Pretendard-Regular'; padding: 10px 20px;  box-sizing: border-box; 
    flex: 1 1 calc(25% - 10px);    max-width: calc(25% - 10px); }

.s_icon{position: absolute;
    width: 100vw;
    max-width: 620px;    
    top: 40px;
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}

@media all and (max-width:768px){
    .header.mobile .search{max-width: none; width: 100vw; padding: 20px; max-height: none;}
    .search-suggestions{position: static; transform: translateY(0%); width: 100%; justify-content: space-between;}
    .search-suggestions .suggestion{  flex: 1 1 calc(33.33% - 10px);    max-width: calc(33% - 10px); padding: 10px 0px;}
    .header.mobile .search .input {position: static; transform: translateY(0%); max-width: none; width: 100%; margin: 20px auto;}
    .header.mobile .search .searchBtn:after{right: 20px;  transform: translate(0, 0);}
}


@media all and (max-width:360px){
    .search-suggestions .suggestion{  flex: 1 1 calc(50% - 10px);    max-width: calc(50% - 10px); padding: 10px;}
}

/**/

.onmenu .h_nav .mo_btn:after {
    content: "\e921";
    font-size: 2.8125rem;
    z-index: 999;
}


.h_nav .mo_srch, .h_nav .mo_btn { display: block; }
.h_nav nav { display: none; }



.onmenu .h_nav .gnb{
  display: block;
  position: absolute;
  left: 0;
  top: 0px;
  width: 100%;
  z-index: 999;
  height: 100vh !important;
  background: white;
}


.onmenu .h_nav .gnb .menu_top{display:flex;flex-wrap:wrap;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:1140px;justify-content:space-between;width:100%;align-items:flex-start;}
.onmenu .h_nav .gnb .menu_top .menu_left{width:68%;}
.onmenu .h_nav .gnb .menu_top .menu_left>ul{display:flex;flex-wrap:wrap;gap:30px;justify-content:flex-start;}
.onmenu .h_nav .gnb .menu_top .menu_left .menu{width:calc((100% - 60px) / 3);height:200px;}
.onmenu .h_nav .gnb .tit{display:flex;height:50px;width:100%!important;font-family:'Paperlogy-8ExtraBold';font-size:30px;color:#f7868f;border-bottom:1px solid #cbc5c5;align-items:center;}


@media (max-width:1140px){.onmenu .h_nav .gnb .menu_top .menu_left .menu{width:calc((100% - 30px) / 2);}}
@media (max-width:768px){.onmenu .h_nav .gnb .menu_top .menu_left .menu{width:100%;}}


.onmenu .h_nav .gnb .sub_menu{margin-top: 20px;}
.onmenu .h_nav .gnb .sub_menu li{margin-top:10px; font-size: 18px;}
.gnb_bt {display: flex; justify-content:space-between; max-width: 600px; margin: 0 auto; align-items:flex-start; text-align: center; flex-wrap: wrap;}  
.gnb_bt .gnb_ico{flex: 1 1 calc(16.66% - 10px); }
.gnb_bt .gnb_ico img{display: block; margin:0 auto 5px auto}
.gnb_bt .gnb_ico span{display: block; text-align: center; font-family:'Pretendard-Regular';}

.onmenu .h_nav .gnb .poster{width: 28%;}
.onmenu .h_nav .gnb .poster .vol_tit{  font-family: 'S-CoreDream-7ExtraBold';  font-size:40px;color:#f7868f;text-align:right; height: 49px; ;}
.onmenu .h_nav .gnb .poster .vol_tit span{color: #333; display: inline-block; height: 51px; }
.onmenu .h_nav .gnb .poster .date_text{  font-family: 'S-CoreDream-7ExtraBold';  font-size:30px;color:#666; text-align: right;  margin-top: 2px;border-top: 2px solid #666 }
.onmenu .h_nav .gnb .poster .image{width: 100%; text-align: center;}
.onmenu .h_nav .gnb .poster .image img{width: 100%; border: 2px solid #dedede; margin-top:30px;}
.arrow-icon{display: none;}

@media all and (max-width:1280px) {
    .onmenu .h_nav .gnb .poster{display: none;}
    .onmenu .h_nav .gnb {position: absolute; top:75px}
    .onmenu .h_nav .gnb .menu_top{max-width: none; display: block;position: static;transform:translate(0%,0%);}
    .onmenu .h_nav .gnb .menu_top .menu_left{width:100%;}
    .onmenu .h_nav .gnb .menu_top .menu_left>ul{ display: block;}
   .onmenu .h_nav .gnb .menu_top .menu_left .menu{width:100%;height:auto;}

   .onmenu .h_nav .mo_btn:after {font-size: 30px;}
   .onmenu .h_nav .gnb .sub_menu{margin-top: 0px;}
   .menu .sub_menu {display: none;}
   .onmenu .h_nav .gnb .sub_menu.pc-only{display: none !important;}
   .menu.active .sub_menu {display: block;}
   .onmenu .h_nav .gnb .tit {height: auto;  display: flex; justify-content: space-between;  padding: 20px; width:auto!important;}
   .onmenu .h_nav .gnb .sub_menu li{ margin: 0;}
   .onmenu .h_nav .gnb .sub_menu li a{width: 100%; display: inline-block;background: #fdefee;border-bottom:1px solid #cbc5c5;padding: 20px 0 20px 20px;}
   .arrow-icon {transition: transform 0.3s ease; display: inline-block;}
   .arrow-icon.rotate { transform: rotate(-180deg);}
   .gnb_bt {margin: 30px auto;justify-content: space-between; max-width: none; padding: 0 20px;  max-width: none; width: 100%;} 
   .gnb_bt .gnb_ico{text-align: center;}
   .gnb_bt .gnb_ico img{max-width: 40px;margin:0 auto 5px auto} 
   .wrap_quick_r .quick_r_t a img{max-width: 40px !important;}
}
@media all and (max-width:768px){
    .onmenu .h_nav .gnb .tit{font-size: 24px; padding: 10px 20px;}
    .onmenu .h_nav .gnb .sub_menu li a{padding: 10px 0 10px 20px;}
   .gnb_bt .gnb_ico img{max-width: 32px;margin:0 auto 5px auto} 
   .wrap_quick_r .quick_r_t a img{max-width: 32px !important;}
}
@media all and (max-width:480px){
    .gnb_bt{gap: 0px;}
    .gnb_bt .gnb_ico span{font-size: 11px; word-break: keep-all;}
}

/* 지난호보기 버튼 */
.archive-wrap *{font-family:'Pretendard-Regular';}
.archive-wrap {  position: relative; color:#000 !important; margin-left: 20px;  }
.archive-wrap span { font-weight: normal; }
.archive-wrap .h_archive { display: block; background-color: transparent; font-size: 18px; cursor: pointer; border: none; font-weight: bold;}


.archive-wrap .listPage-area { display: none; visibility: hidden; position: absolute; top: 70%; left: 50%; transform: translate(-50%, 0); }
.archive-wrap .listPage-area.is-active { visibility: visible; display: block; }

.archive-wrap .listPage-list { z-index:5; margin-top: 15px; min-width: 10rem; padding: 10px 30px; background-color: #f1f1f1; border: 1px solid #969696; text-align: center; max-height: 200px; overflow-y: auto;}
.archive-wrap .listPage-list li {text-align: center; position: relative; }
.archive-wrap .listPage-list li a { display: inline-block; width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0) !important; font-size: 18px;font-weight: normal; }
.archive-wrap .listPage-list li a span { font-weight: bold; }
.archive-wrap .listPage-list li:hover a { border-bottom: 1px solid #000000 !important; width: fit-content; }
.archive-wrap .load-more-btn { display: block; margin: 20px auto 10px; color: rgb(0, 0, 0); border: none; cursor: pointer; border-radius: 5px; background: none; font-size: 18px; }

.archive-wrap .listPage-list::-webkit-scrollbar { width: 8px; }
.archive-wrap .listPage-list::-webkit-scrollbar-track { background: #ccc; }
.archive-wrap .listPage-list::-webkit-scrollbar-thumb { background: #666666; }

span.arrows { display: inline-block; margin-left: 1rem; transition: transform 0.3s; vertical-align: middle; font-size: 27px; line-height: 1; }
span.arrows::after { content: '›'; display: inline-block; transform: rotate(90deg); transition: transform 0.3s; }
span.arrows.up::after { transform: rotate(-90deg); }


@media all and (max-width: 768px) {
    
.h_nav .logo_wrap .logo{width: 110px;}
    .archive-wrap {margin-left:10px;}
    .archive-wrap .pc{display: none;}
    span.arrows {  margin-left: 20px;}
    .archive-wrap .listPage-area {  left: 0%;  transform: translate(0%, 0);}
    .archive-wrap .listPage-list { padding: 10px;}
    .archive-wrap .listPage-list li a {  font-size: 16px; padding: 0; }
    .archive-wrap .load-more-btn {font-size: 14px; }
}

@media all and (max-width: 500px) {
    .archive-wrap .h_archive { font-size: 16px;  }
    span.arrows { font-size: 20px; margin-left: 10px;}
    .archive-wrap .listPage-list { padding: 5px;}
}



/* quick menu */
.wrap_quick_l { position: fixed; left:20px; bottom: 40px; z-index: 15; background: white; border: 1px solid #cbc5c5; padding: 20px 10px;border-radius: 30px;}
.wrap_quick_l *{font-family:'Pretendard-Regular';}
.wrap_quick_r { position: fixed; right: 20px; bottom: 40px; z-index: 15;}
.quick_r_t{  background: white;  border: 1px solid #cbc5c5;   border-radius: 30px;  text-align: center;  max-width: fit-content; margin: 0 auto; padding: 20px 10px 10px 10px;}
.wrap_quick_l div { text-align: center !important;}
.wrap_quick_l a,.wrap_quick_l button{display: block; text-align: center; background: none; margin: auto; }
.wrap_quick_l a img,.wrap_quick_l button img{margin-bottom: 5px;}
.wrap_quick_l span{display: block; font-size: 12px;}
.wrap_quick_l .gray_btn{margin-top: 10px;}

.wrap_quick_r .quick_r_t a{display: block; text-align: center; margin-bottom: 10px;}
.wrap_quick_r .quick_r_t a img{margin-bottom: 5px; max-width: 42px;}
.wrap_quick_r .quick_r_t span{display: block;font-size: 12px; }
.wrap_quick_r a{display: block; text-align: center;}
.q_ico_event{margin: 20px auto 5px auto; max-width: 100px;}
.q_ico.top{margin-top: 15px;}


.mo-only{display: none !important;}
@media all and (max-width:1280px) {
    .footer {margin-bottom: 100px;}
    .header {position: fixed; top:48px}
    .wrap_quick_l .pc-only{display: none!important;}
    .wrap_quick_l .mo-only{display: block!important;}
    .wrap_quick_l{position: fixed;left:0px !important; bottom: auto;  top:0 !important; z-index: 15;background:#ffeaea; padding: 20px 10px; width: 100vw; display: flex; align-items: center; justify-content: right; height: 48px;
    border-radius: 0; border-top: none; border-left: none; border-right: 0px;}
    .wrap_quick_l a img,.wrap_quick_l button img{margin-bottom: 0px;}
    .wrap_quick_l div {display: flex; align-items: center;}
    .wrap_quick_l div button{display: flex;align-items: center;}
    .wrap_quick_l .gray_btn{display: flex;align-items: center; margin-top: 0;}
    .wrap_quick_l div span{margin-right: 5px;}
    .wrap_quick_l div button img{margin-right: 5px;}
    .wrap_quick_r { position: fixed; right: 0px; bottom: 0px; z-index: 15; width: 100vw;height: 100px;display: flex; align-items: center; background: white;  border-top: 1px solid #cbc5c5;   }
    .quick_r_t{display: flex; width: 100vw;  border-radius: 0; max-width:none; justify-content: space-around;  align-items: flex-start;border:none;padding: 10px;  flex-wrap: wrap;}
    .wrap_quick_r .quick_r_t span{font-size: 11px; word-break: keep-all;}
    .wrap_quick_r .q_ico_event{display: none !important; }
    .q_ico.top{display: none !important;}
    .wrap_quick_r .quick_r_t a{margin-bottom: 0; flex: 1 1 calc(16.66% - 10px); }
    .gray .wrap_quick_r {background: #000;}
}
@media all and (max-width:768px){
    .pc-only{display: none!important;}
    .mo-only{display: block!important;}
}

@media screen and(max-width: 840px) {
    .btn-quickmenu22 img {
        width: 15vw;
    }
    .btn-quickmenu22 {
        right: 1vw;
        bottom: 31vw;
    }
    .btn-quickmenu22.top {
        display: block;
    }
    .btn-top.top img,
    .btn-quickmenu img {
        width: 40px;
    }
    /*.btn-top.top{.r(14); .b(10); }
  .btn-quickmenu{.r(14); .b(60); }
  .wrap_quickmenu{.b(60);}*/
    .wrap_quickmenu .lst {
        padding: 4.76190476vw 1.9047619vw;
        width: 122px;
        width: 14.52380952vw;
        -webkit-box-shadow: 0 0 2.29468599vw 0 rgba(0, 0, 0, 0.38);
        -moz-box-shadow: 0 0 2.29468599vw 0 rgba(0, 0, 0, 0.38);
        box-shadow: 0 0 2.29468599vw 0 rgba(0, 0, 0, 0.38);
    }
    .wrap_quickmenu .lst li {
        margin-top: 20px;
        margin-top: 2.38095238vw;
    }
    .wrap_quickmenu .lst a span.txt {
        margin-top: 6px;
        margin-top: 0.71428571vw;
        font-size: 18px;
        font-size: 2.14285714vw;
    }
    .wrap_quickmenu .lst li.btn_close {
        margin-top: 51px;
        margin-top: 6.07142857vw;
    }
    .wrap_quickmenu .btn_close i {
        font-size: 48px;
        font-size: 5.71428571vw;
    }
    .wrap_quickmenu .lst.share a span.ico img,
    .wrap_quickmenu .lst.menu a span.ico img {
        width: 56px;
        width: 6.66666667vw;
    }
    .wrap_quickmenu .lst.share {
        position: absolute;
        left: 100%;
        bottom: 0;
        z-index: 3;
        background-color: #fff;
        opacity: 0;
    }
    .wrap_quickmenu .lst.menu.close {
        left: 100%;
    }
    .wrap_quickmenu .lst.share.open {
        left: 0;
        opacity: 1;
    }
}
.ist_sns_set1 {
    font-size: 0;
    text-align: center;
}
.ist_sns_set1 li {
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
}
@media screen and(max-width: 840px) {
    .ist_sns_set1 li {
        margin-left: 15px;
        margin-left: 1.78571429vw;
        margin-right: 15px;
        margin-right: 1.78571429vw;
    }
    .ist_sns_set1 li img {
        width: 55px;
        width: 6.54761905vw;
    }
}
.lst_thumbtype2 .inner {
    background-color: #fff;
}

/**/
#contents {
  padding-top: 100px;
}
/* footer */
.footer {
  position: relative;
  padding: 30px 0 3.125rem;
  background-color: #87b575;

}
.footer .ft_logo {
  width: 9.688rem;
  height: 2.375rem;
  background: url(../images/common/ft_logo.png) no-repeat center center / 100% auto;
 }
.footer .ft_txt p {
  padding-top: 1.25rem;
  font-size: 1rem;
  color: #fff;
  transform:skew(-0.03deg);
  line-height: 1.8;
}
.footer .ft_sns {
  position: absolute;
  right: 0;
  top: 0;
}
.footer .ft_sns ul {
  font-size: 0;
  text-align: center;
}
.footer .ft_sns li {
  display: inline-block;
  vertical-align: middle;
}
.footer .ft_sns li a {
  display: block;
  margin-right: 1.25rem;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.footer .ft_sns li .youtube {
  width: 1.875rem;
  height: 1.25rem;
  background-image: url(https://nanumnews.or.kr/202404/assets/images/common/ico_ft_sns1.png);
}
.footer .ft_sns li .blog {
  width: 1.813rem;
  height: 1.5rem;
  background-image: url(https://nanumnews.or.kr/202404/assets/images/common/ico_ft_sns2.png);
}
.footer .ft_sns li .facebook {
  width: 0.8125rem;
  height: 1.438rem;
  background-image: url(https://nanumnews.or.kr/202404/assets/images/common/ico_ft_sns3.png);
}
.footer .ft_sns li .insta {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0;
  background-image: url(https://nanumnews.or.kr/202404/assets/images/common/ico_ft_sns4.png);
}

/* common */
.font_ch {font-family: 'Noto Sans SC'; }


/* color */
.ccolor {color:#c63c41 !important;}


/* font-weight */
.fw_n {font-weight: normal !important; }
.fw_b {font-weight: bold !important; }

.fw_cdBold {font-family: 'S-CoreDream-7ExtraBold';}

/* br */
.mhid {display: block; }
.mshow {display: none; }

@media all and (max-width:1680px) {
  #quickMenu { margin-right: -48%; }
  .cc{margin:0 auto}
  .h_nav h1{margin-left:0}
  .search{margin-right: 0}
}

@media all and (max-width:1220px) {
  .container {
    max-width: 100%;
    /* min-width: 320px;  */
    padding: 0 0.625rem;
    display: block;
  }

  .footer .ft_sns {
    right: 0.625rem;
  }
}
@media all and (max-width:1090px) {
  #quickMenu {display: none;}
}
@media all and (max-width:1024px) {
    html, body{font-size: 14px;}
}


   
  


@media all and (max-width:768px) {
.footer .ft_sns {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }

  .footer .ft_wrap {
    padding-top: 3.571rem;
    font-size: 0;
    text-align: center;}

    /* br */
    .mhid {display: none; }
    .mshow {display: block; }
    .footer .ft_logo {margin: auto;}
}

@media all and (max-width:460px) {

  .h_nav h1 .date {font-size: 1rem;}
  .h_nav h1 .date em {font-size: 1rem;}
    .onmenu .h_nav nav {top: 63px; }
}
@media all and (max-width: 360px) {
    .h_nav .logo_wrap .date{margin:0px 0px 0px 4px; }

  html, body{font-size: 12px;}
  .h_top .utilMenu_right li a {font-size: 10px;}
  .h_top .utilMenu_right li.homepage a:before,
  .h_top .utilMenu_right li.subscription a:before {display: none;}
/*
    .h_top .utilMenu_right li a {
      padding-left: 0.3125rem;
      padding-right: 0.3125rem;
    } */
}

.fs1{font-size: 1.5rem!important}
.wbk{word-break: keep-all !important;}


/*고대비모드*/
.gray { background-color: #000;color: #fff !important;border-color: #fff !important; }
.gray a { color: #fff !important; }



/*고대비모드+헤더,푸터 외 기타*/   
.gray .h_nav .gnb *,.gray .h_nav .gnb,.gray footer *{background: black; color: white !important;border-color: #fff !important; }
.gray .h_nav{background: black; color: white !important;}
.gray footer{border-top: 1px solid #fff;}

.gray  .h_nav h1 .logo { background: url(../images/common/logo_wh.png) no-repeat center center;   width:120px;
    height: 27px;}


.gray .wrap_quick_l,.gray .wrap_quick_l span,.gray .quick_r_t ,.gray .wrap_quick_r .quick_r_t span{color:white; background: black !important;}

.gray .page_head *,.gray .page_body * {color: white !important;}
.gray .sub_bg h2 .span:after{ background: #ffffff}


.gray .h_nav .mo_btn:after,.gray .h_nav .mo_srch:after{color: white !important;}
@media all and (max-width:1280px) {
    .gray .onmenu .h_nav .gnb .sub_menu li{background: #ffffff;}
    .gray .onmenu .h_nav .gnb .sub_menu li a{background: #ffffff !important; border-color: black !important;}
    .gray .onmenu .h_nav .gnb .sub_menu li a span{background: #ffffff !important; color: black !important;}
}


.gray .header.mobile .search,.gray .header.mobile .search .mo_srch_close:after {background: black; color: white !important;}
.gray .header.mobile .search .input::placeholder {color: #fff}
.gray .header.mobile .search .input,.gray .header.mobile .search .searchBtn:after{ background: #000 !important; border-color: #fff; color: #ffffff; }
.gray  .search-suggestions .suggestion{border-color: #fff; background: #000; color: #fff;}
.gray  .search{border-bottom: 1px solid #fff;}


.gray .archive-wrap .listPage-list  {background: #000; color: #fff;}
.gray .archive-wrap .listPage-list li:hover a { border-color: #fff !important; }
.gray .h_archive{color:#fff}



.gray .nav .round {  background-color: #000000; border: 1PX solid white; }
.gray .nav a:hover .round { background-color: #fff; border: 1PX solid white;}
.gray .nav a:hover .nav-text {opacity: 1;color: #ffffff; }
.gray .nav a.active .round { background-color: #fff; border: 1PX solid white;}


.wh_on{display: none;}
.gray .wh_on{display: inline-block;}
.gray .wh_none{display: none;}