@charset "UTF-8";

#contents.insight.main {height: auto; min-height: unset; overflow: hidden;}
.main-banner {position: relative; width: 100%;}
.main-banner .wrapper {position: relative; width: 100%; height: 600px; margin: 0 auto; background-image: url("../../images/hub/insight_new/main_banner_wide.webp"); background-position: center; background-repeat: no-repeat; background-size: cover;}
.main-banner .wrapper .banner-wrap {position: relative; width: 100%; max-width: 1240px; height: 100%; margin: 0 auto; }
.main-banner .wrapper .banner-wrap picture {position: relative; width: 100%;}
.main-banner .wrapper .banner-wrap picture img {display: none;}
.main-banner .wrapper .banner-wrap .more-wrap {position: absolute; bottom: 25%; left: 1%; display: flex; gap: 10px; align-items: center;}
.main-banner .wrapper .banner-wrap .more {padding: 12px 22px; background: #212121; color: #fff; font-size: clamp(14px, 1.5vw, 18px); font-weight: 600; letter-spacing: -0.5px; border-radius: 40px; display: flex; align-items: center; gap: 5px; transition: opacity .2s; z-index: 2;} 
.main-banner .wrapper .banner-wrap .more-w {background: #fff; color: #212121; border: 1px solid #212121}
.main-banner .wrapper .banner-wrap .more img {width: 15px; transform: rotate(-45deg); transition: all .2s;}
.main-banner .wrapper .banner-wrap .more-w img {filter: invert(1);}
.main-banner .wrapper .banner-wrap .more:hover {opacity: .9;}
.main-banner .wrapper .banner-wrap .more:hover img {transform: rotate(0);}
.main-banner .wrapper .banner-wrap img.banner-txt {position: absolute; bottom: 14%; left: 1%; width: 20vw; max-width: 220px; z-index: 2;}
.main-banner .wrapper .banner-wrap .date {position: absolute; opacity: 0; right: 0; bottom: 0;}


.main-banner .wrapper .txt-wrap {position: relative; width: auto; display: grid; align-content: baseline; padding-top: 40px;}
.main-banner .wrapper .txt-wrap .mon {font-size: 20px; font-weight: 500; color: #212121; line-height: 1.5; margin-bottom: 20px;}
.main-banner .wrapper .txt-wrap .mon span {font-size: 16px; color: #212121; font-weight: 400;}
.main-banner .wrapper .txt-wrap .logo { width: 240px; }
.main-banner .wrapper .txt-wrap h2 {margin-top: 15px; font-size: 40px; font-weight: 800; color: #212121; text-transform: uppercase;}
.main-banner .wrapper .txt-wrap .sub-tit {margin-top: 30px; font-size: 24px; font-weight: 400; line-height: 1.4; color: #212121; letter-spacing: -0.65px;}
.main-banner .wrapper .txt-wrap .sub-tit span {font-weight: 600;}
.main-banner .wrapper .txt-wrap button {position: relative; width: auto; max-width: max-content; height: auto; margin-top: 35px; padding: 15px 20px; background: #FE9742; border-radius: 40px;}
.main-banner .wrapper .txt-wrap button a {display: block; width: 100%; height: 100%; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.65px; display: flex; align-items: center; gap: 20px;}
.main-banner .wrapper .txt-wrap button a span {font-size: 16px;}

.insight.main .cate {font-family: 'KMA'; font-size: 16px; font-weight: 600; color: #fe9742; line-height: 1.5; }
.insight.main .tit {width: 100%; padding-top: 5px; font-family: 'KMA'; font-size: 26px; font-weight: 600; color: #212121; line-height: 100%; display: flex; justify-content: space-between; align-items: center;}
.insight.main .tit a {font-family: 'SUIT'; font-size: 18px; color: #777; font-weight: 400; line-height: 26px; display: flex; align-items: center; gap: 13px; transition-duration: .5s;}
.insight.main .tit a span {background: #fe9742; border-radius: 100%; width: 26px; height: 26px; color: #fff; display: flex; justify-content: center; align-items: center;}
.insight.main .tit a:hover {gap: 20px;}

.insight.main .cont {position: relative; width: 100%; max-width: 1240px; margin: 100px auto 0; padding: 0 20px;}

.cont.cont2 {margin-top: 100px;}

.ins-cont-slide {position: relative; width: 100%; margin-top: 20px;}
.ins-cont-slide .swiper-slide {display: grid; gap: 20px; transition: margin-top .3s;}

.ins-cont-slide .swiper-slide a {display: grid; gap: 20px;}
.ins-cont-slide .swiper-slide figure {position: relative; height: auto; aspect-ratio: 16/9; overflow: hidden;}
.ins-cont-slide .swiper-slide figure .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0)100%); z-index: 2;}
.ins-cont-slide .swiper-slide figure img {width: 100%; max-width: 387px;}
.ins-cont-slide .swiper-slide figure .bg .timer {width: 43.5px;}
.ins-cont-slide .swiper-slide figure .bg .noti {position: absolute; width: 100%; bottom: 20px; font-size: 14px; color: #fff; font-weight: 500; line-height: 1.3; text-align: center;  opacity: 0;transition: all .3s;}
.ins-cont-slide .swiper-slide figure .bg .date {position: absolute; top: 20px; right: 20px; padding: 7px 20px; font-size: 16px; color: #fff; font-weight: 600; background: #fe9742; border-radius: 40px;}
.ins-cont-slide .swiper-slide figure .bg:hover .noti {bottom: 30px; opacity: 1;}
.ins-cont-slide .swiper-slide .txt-inner {display: grid; gap: 10px;}
.ins-cont-slide .swiper-slide .txt-inner strong {color: #000; font-size: 22px; font-weight: 500; line-height: 1.3;}
.ins-cont-slide .swiper-slide .txt-inner .txt {color: #777; font-size: 18px;}
.ins-cont-slide .swiper-slide:hover {margin-top: -10px;}

.insight.main .cont.cont2 .ins-cont-slide .swiper-slide:hover {margin-top: 0;}

/* 큐레이션 */
.cur {position: relative; width: 100%; background: #f9f9f9; margin-top: 100px;}
.cur .wrapper {max-width: 1240px; height: 700px; margin: 0 auto; padding: 100px 20px; }
.cur .box.accordion{ height: 100%; display: flex; box-sizing: border-box; }

.cur .panel {flex: 1; min-width: 90px; border: 0; padding: 0; cursor: pointer; position: relative; overflow: hidden; background: #ddd; transition: flex 300ms ease; background-position: center; background-repeat: no-repeat; background-size: cover; }
.cur .panel.is-active{flex: 8;}
.cur .panel .more {position: absolute; width: 64px; height: 64px; padding: 5px; bottom: 0px; right: -95px; border: 1px solid #fe9742; box-sizing: border-box; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
.cur .panel .more a {display: block; background: #fe9742; border-radius: 100%; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.cur .panel .more span img {width: 22px; } 
.cur .panel .mob-more {display: none;}

.cur .overlay {position:absolute; width: 70%; min-width: 610px; height: calc(100% - 80px); padding: 40px; left: 40px; top: 40px; color:#fff; text-align:left; background: rgba(33, 33, 33, 0.74); box-sizing: border-box; display: none; transition-delay: 0.2; }
.cur .overlay .month {position: relative; float: left; width: 100%; line-height: 1.5; font-family: 'KMA'; color: #fff; font-weight: 500; font-size: 26px;}
.cur .overlay .tit {position: relative; float: left; width: 100%; padding-top: 20px; font-family: 'SUIT'; color: #fff; font-size: 22px; font-weight: 500; line-height: 1.5;}
.cur .overlay .txt {position: relative; float: left; width: 100%; padding-top: 20px; color: #fff; font-size: 16px; line-height: 1.5; }
.cur .overlay .logo-cur {position: absolute; width: 137px; top: 50%; right: 40px; transform: translate(0%, -50%);}

.cur .label-wrapper {position:absolute; width: auto; left:50%; top:50%; transform: translate(-50%,-50%)rotate(-90deg);  display: flex; align-items: center; justify-content: space-between; gap: 210px;}
.cur .label-wrapper .label {font-family: 'KMA'; min-width: 160px; white-space: nowrap; color:#fff; font-size: 26px; font-weight: 500; text-align: left;}
.cur .label-wrapper .open {width: 40px; height: 40px; border: 1px solid #fff; border-radius: 100%; display: flex; align-items: center; justify-content: center; }
.cur .label-wrapper .open:before {position: absolute; content: ''; width: 18px; height: 2px; background: #fff; }
.cur .label-wrapper .open:after {position: absolute; content: ''; width: 18px; height: 2px; background: #fff; transform: rotate(90deg);}
.cur .panel.is-active {cursor: default;}
.cur .panel.is-active .overlay { display: block; min-width: calc(100% - 165px);}
.cur .panel.is-active .label-wrapper { display:none; }

/* 이 달의 추천 콘텐츠 */
.picks {position: relative; width: 100%; margin-top: 100px; box-sizing: border-box;}
.picks .wrapper {position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px;} 
.picks .wrapper .cate {text-align: center;}
.picks .wrapper .tit {text-align: center; display: block;}

.picks .wrapper .btn-wrap {position: relative; width: 100%; margin-top: 24px; display: flex; justify-content: center; align-items: center; gap: 100px; }
.picks .wrapper .btn-wrap button {font-size: 20px; color: #b9b9b9;}
.picks .wrapper .btn-wrap button.is-active {position: relative; color: #fe9742; font-weight: 600;}
.picks .wrapper .btn-wrap button.is-active:before {position: absolute; content: ''; bottom: -10px; left: 50%; transform: translate(-50%, 0%); border-bottom: 2px solid #fe9742; width: 40px;}
.picks .wrapper .box {margin-top: 28px;}
.picks .wrapper .box .picks-swiper {display: none;}
.picks .wrapper .box .picks-swiper.is-show {display: block}

.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box {position: relative; width: auto; height: 425px; background: #f9f9f9; overflow: hidden; transition: .3s;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .per-cate {position: absolute; top: 34px; left: 40px; padding: 10px 40px; font-size: 16px; color: #777; font-weight: 500; background: #fff; border: 1px solid #b9b9b9; border-radius: 40px; transition: .3s;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-bg {position: absolute; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-per {position: absolute; height: 290px; bottom: 40px; left: 50%; transform: translate(-50%, 0); transition: .3s;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-bg.brief-bg, .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-bg.feed-bg {height: unset; width: 300px; top: 55%;}

.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box {position: relative; width: 100%; height: auto; min-height: 224px; padding: 35px; box-sizing: border-box; background: #212121; display: grid; align-content: space-between;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-tit {font-size: 22px; color: #fff; font-weight: 500; line-height: 1.4; }
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-nm {font-size: 16px; color: #fff; font-weight: 400; margin-top: 14px; line-height: 1.4;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-more {position: relative; justify-self: end; display: flex; align-items: center; gap: 13px; margin-top: 30px; font-size: 18px; color: #ddd; transition-duration: .5s;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-more span {width: 26px; height: 26px; background: #fe9742; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-more img {width: 11px;}

.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide:hover .per-box {background: #ddd; }
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide:hover .per-box .per-cate {background: #fe9742; color: #fff;}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide:hover .per-box .org-per {transform: translate(-50%, 0) scale(1.1);}
.picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-more:hover {gap: 20px;}

/* 베스트클립 */
.best {position: relative; width: 100%; max-width: 1240px; padding: 0px 20px; margin: 100px auto 0;}
.best .line {position: relative; width: 70px; height: 2px; margin: 0 auto; background: #fe9742; display: flex; justify-content: center; align-items: center; justify-self: center;}
.best .line.line-top {margin-bottom: 100px;}
.best .line.line-bottom {margin-top: 100px;}
.best .best-swiper {position: relative; width: 100%; margin-top: 24px;}
.best .best-swiper .swiper-slide {height: auto; aspect-ratio: 9/16; cursor: pointer; overflow: hidden; transition: .3s;}
.best .best-swiper .swiper-slide img {width: 100%; max-width: 285px;}
.best .best-swiper .swiper-slide:hover {margin-top: -10px;}

/* 베스트 클립 영상 */
.video-dim { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: none; align-items: center; justify-content: center; z-index: 9999; }
.video-dim.active { display: flex; }
.video-modal { width: auto; position: relative; display: flex; justify-content: center;}
.video-modal video { width: calc(100% - 100px); max-width: 400px; border-radius: 10px; }
.video-close { position: absolute; top: -50px; right:50px; color: #fff; background: none; border: 0; font-size: 28px; }

/* 조회수 top 10 */
.top-view {position: relative; width: 100%; height: auto; max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; margin-top: 100px; overflow: hidden;}
.top-view .top-view-swiper .swiper-slide {display: flex; align-items: flex-start; gap: 4vw;}
.top-view .top-view-swiper .swiper-slide img {position: relative; width: 50%;  }
.top-view .top-view-swiper .swiper-slide .box {position: relative; width: 50%; padding: 50px 35px 58px 0; box-sizing: border-box;}
.top-view .top-view-swiper .swiper-slide .box .box-cate {font-family: 'KMA'; font-size: 16px; color: #fe9742; font-weight: 500; padding-top: 100px;}
.top-view .top-view-swiper .swiper-slide .box .box-tit {font-family: 'KMA'; font-size: 26px; color: #212121; font-weight: 700; margin-top: 5px;}
.top-view .top-view-swiper .swiper-slide .box .box-sub-tit {font-size: 22px; line-height: 1.5; color: #212121; font-weight: 500; margin-top: 14px;}  
.top-view .top-view-swiper .swiper-slide .box .box-nm {font-size: 18px; font-weight: 300; color: #212121; line-height: 1.5; margin-top: 30px;}
.top-view .top-view-swiper .swiper-slide .box .slide-arrow {position: relative; float: left; display: flex; margin-top: 30px;}
.top-view .top-view-swiper .swiper-slide .box .slide-prev {width: 49px; height: 49px; border: 1px solid #b9b9b9; display: flex; justify-content: center; align-items: center; font-size: 10px; color: #000;}
.top-view .top-view-swiper .swiper-slide .box .slide-next {width: 49px; height: 49px; border: 1px solid #b9b9b9; display: flex; justify-content: center; align-items: center; font-size: 10px; color: #000; margin-left: -1px;}
.top-view .top-view-swiper .swiper-slide .box .box-numb {position: absolute; top: 135px; right: 35px; font-family: 'KMA'; font-size: 72px; color: #ddd;}

.top-view .top-view-swiper .swiper-slide .box .more {position: relative; justify-self: end; display: flex; align-items: center; gap: 13px; margin-top: 50px; font-size: 18px; color: #777; transition: .5s;}
.top-view .top-view-swiper .swiper-slide .box .more span {width: 26px; height: 26px; background: #fe9742; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
.top-view .top-view-swiper .swiper-slide .box .more img {width: 11px;}
.top-view .top-view-swiper .swiper-slide .box .bg-shape {position: absolute; width: 60vw; max-width: 660px; height: 80%; background: #f9f9f9; bottom: 0; right: 0; z-index: -1;}
.top-view .top-view-swiper .swiper-slide .box .more:hover {gap: 20px;}


/* 북쿠키 */
.book {position: relative; width: 100%; max-width: 1240px; padding: 0 20px; margin: 100px auto;}
.book .cate {text-align: center;}
.book .tit {justify-content: center !important; text-align: center;}
.book .sub-tit {position: relative; width: 100%; margin-top: 20px ;font-size: 22px; color: #212121; text-align: center; font-weight: 500; letter-spacing: -0.5px;}
.book .wrapper {margin-top: 45px;}
.book .box {position: relative; width: 100%; display: flex;}
.book .box .bg {position: relative; width: 50%; min-height: 378px; display: flex; align-items: center; justify-content: center; background-position: center; background-repeat: no-repeat; background-size: cover;  }
.book .box .bg img {height: 334px;}

.book .box .txt-wrap { position: relative; width: 50%; display: grid; align-content: center; box-sizing: border-box;}
.book .box:nth-child(1) .txt-wrap {padding: 50px 0; padding-left: 50px; }
.book .box:nth-child(2) .txt-wrap {padding: 50px 0; padding-right: 50px; }
.book .box .txt-wrap .book-tit {font-size: 22px; font-weight: 600; color: #212121; line-height: 32px; letter-spacing: -0.5px;}
.book .box .txt-wrap .book-txt {font-size: 18px; font-weight: 400; color: #212121; line-height: 30px; letter-spacing: -0.5px; margin-top: 30px;}
.book .box .txt-wrap .book-txt .pc-only {display: block;}
.book .box .txt-wrap .more {position: relative; justify-self: start; display: flex; align-items: center; gap: 13px; margin-top: 50px; font-size: 18px; color: #777; transition: .5s;}
.book .box .txt-wrap .more span {width: 26px; height: 26px; background: #fe9742; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
.book .box .txt-wrap .more img {width: 11px;}
.book .box .txt-wrap .more:hover {gap: 20px;}




/* 리포트 */
.report {position: relative; width: 100%; max-width: 1240px; padding: 0 20px; margin: 100px auto 100px;}
.report .cate {text-align: center;}
.report .tit {justify-content: center !important; text-align: center; justify-self: center;}
.report .sub-tit {position: relative; width: 100%; margin-top: 20px ;font-size: 22px; color: #212121; text-align: center; font-weight: 500; letter-spacing: -0.5px;}
.report .report-swiper {margin-top: 40px;}
.report .report-swiper .swiper-slide {position: relative; height: auto;    overflow: hidden;}
.report .report-swiper .swiper-slide img {height: 100%; object-fit: cover;}
.report .report-swiper .swiper-slide .more {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: .3s;}

.report .report-swiper .swiper-slide .more span {position: relative; width: 50px; height: 50px; border: 1px solid #fff; border-radius: 100%; display: flex; justify-content: center; align-items: center;}

.report .report-swiper .swiper-slide .more span:before {position: absolute; content: ''; width: 20px; height: 2px; background: #fff;}
.report .report-swiper .swiper-slide .more span:after {position: absolute; content: ''; width: 20px; height: 2px; transform: rotate(90deg); background: #fff;}
.report .report-swiper .swiper-slide .more span a {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2;}
.report .report-swiper .swiper-slide .more:hover {opacity: 1;}


/* 하단 배너 */
.bottom {position: relative; width: 100%; padding: 100px 0px; box-sizing: border-box; background: #f9f9f9;}
.bottom .wrapper {position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; display: flex; gap: 20px; justify-content: center;}
.bottom .wrapper .box {position: relative; width: 100%; height: auto; padding: 42px 0; display: grid; justify-items: center; gap: 22px;   background: #0073ff;} 
.bottom .wrapper .box:nth-child(2) {background: #8c64ed;}
.bottom .wrapper .box img {height: 70px; transition: .3s;}
.bottom .wrapper .box .txt-wrap {display: grid; justify-items: center; align-content: center; gap: 14px; }
.bottom .wrapper .box .txt-wrap .box-txt {font-size: 20px; color: #fff; font-weight: 400; letter-spacing: -0.5px;}
.bottom .wrapper .box .txt-wrap .box-tit {font-size: 34px; color: #fff; font-weight: 700; letter-spacing: -0.5px;}
.bottom .wrapper .box a {position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2;}
.bottom .wrapper .box:hover img{transform: scale(1.2);}






@media screen and (max-width: 1000px) {
  .main-banner {background: none;}
  .main-banner .wrapper {display: block; width: 100%; height: auto; background-image: none;}
  .main-banner .wrapper .banner-wrap picture img { display: block; }
  .main-banner .wrapper .banner-wrap .more-wrap {bottom: 24%; left: 1%; }
  .main-banner .wrapper .banner-wrap .more {font-size: clamp(16px, 1vw, 20px)}
  .main-banner .wrapper .banner-wrap img.banner-txt {left: 1%; bottom: 10%; width: 27vw; max-width: 280px;}

  /* 큐레이션 */
  .cur .overlay .logo-cur {display: none;}

  /* 이 달의 추천 콘텐츠 */
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box {height: 304px;}
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-bg {height: 156px; left: 40px; transform: translate(0, 0%); }
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-per {bottom: -40px; transform: none;}
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-bg.brief-bg, .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-bg.feed-bg {top: unset; bottom: 0; width: unset; height: 100px;}

  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box:hover .org-per {transform: scale(1.1);}

  /* 조회수 top 10 */
  .top-view .top-view-swiper .swiper-slide .box {padding: 35px 35px 25px 0;}
  .top-view .top-view-swiper .swiper-slide .box .more {margin-top: 30px;}
  .top-view .top-view-swiper .swiper-slide .box .box-cate {padding-top: 75px;}
  .top-view .top-view-swiper .swiper-slide .box .box-numb {top: 95px;}


}

@media screen and (max-width: 768px) {
  .insight.main .cate {font-size: 14px;}
  .insight.main .tit {font-size: 20px;}
  .insight.main .tit a {font-size: 16px; gap: 5px; margin-top: -5px;}
  .insight.main .tit a span {width: 16px; height: 16px; font-size: 10px;}
  .main-banner .wrapper .banner-wrap .more-wrap { bottom: unset; top: 33%; left: 4%; }
  .main-banner .wrapper .banner-wrap .more {font-size: clamp(12px, 1vw, 20px)}
  .main-banner .wrapper .banner-wrap .more img {width: 10px;}
  .main-banner .wrapper .banner-wrap img.banner-txt { bottom: unset; top: 10%; left: 4%; width: 50vw; max-width: 350px;}
  
  .insight.main .cont {margin-top: 70px;}

  .main-banner {height: auto; margin-top: 0;}
  .main-banner .wrapper .banner-wrap {width: 100%; left: 0px;  border-radius: 0;}
  .main-banner .wrapper .txt-wrap {padding-top: 0; padding-left: 20px; }
  .main-banner .wrapper .txt-wrap .mon {font-size: 18px;}
  .main-banner .wrapper .txt-wrap .mon span {font-size: 14px;}
  .main-banner .wrapper .txt-wrap .logo {width: 170px;}
  .main-banner .wrapper .txt-wrap h2 {font-size: 30px;}
  .main-banner .wrapper .txt-wrap .sub-tit {font-size: 18px;}
  .main-banner .wrapper .txt-wrap button {padding: 12px 18px; margin-top: 20px;}
  .main-banner .wrapper .txt-wrap button a {font-size: 14px;}
  .main-banner .wrapper .txt-wrap button a span {font-size: 12px;}

  /* 공개 예정 */
  .insight.main .cont.cont2 {margin-top: 70px;}
  .ins-cont-slide .swiper-slide {width: calc(100% - 90px);}
  .ins-cont-slide .swiper-slide figure { }

  .ins-cont-slide .swiper-slide figure .bg .timer {width: 30px;}
  .ins-cont-slide .swiper-slide figure .bg .date {padding: 5px 15px; font-size: 14px; font-weight: 500; top: 10px; right: 10px;}

  .ins-cont-slide .swiper-slide {gap: 15px;}
  .ins-cont-slide .swiper-slide a {gap: 15px;}
  
  .ins-cont-slide .swiper-slide .txt-inner strong {font-size: 18px;}
  .ins-cont-slide .swiper-slide .txt-inner .txt {font-size: 16px;}


  /* 큐레이션 */
  .cur {margin-top: 70px;}
  .cur .wrapper {height: auto;}
  .cur .box.accordion {height: auto; flex-direction: column;}
  .cur .panel {flex: none; width: 100%; min-width: 0; height: 80px; transition: height 300ms ease;}
  .cur .panel.is-active {flex: none; height: 300px;}

  .cur .overlay {width: calc(100% - 40px); height: 260px; padding: 20px; top: 20px; left: 20px;  }
  .cur .overlay .txt {display: none;}
  .cur .overlay .month {font-size: 20px;}
  .cur .overlay .tit {font-size: 16px;}
  .cur .overlay .more {display: none;}
  .cur .overlay .mob-more {display: block;}
  .cur .overlay .mob-more {position: absolute; bottom: 20px; left: 20px; justify-self: end; display: flex; align-items: center; gap: 13px; margin-top: 30px; font-size: 16px; color: #fff;}
  .cur .overlay .mob-more span {width: 26px; height: 26px; background: #fe9742; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .cur .overlay .mob-more img {width: 11px;}
  .cur .label-wrapper {width: 100%; padding: 0 20px; left: unset; transform: translate(0, -50%); gap: unset;}
  .cur .label-wrapper .label {font-size: 18px;}
  .cur .label-wrapper .open {width: 26px; height: 26px; }
  .cur .label-wrapper .open:before {width: 12px; height: 1px;}
  .cur .label-wrapper .open:after {width: 12px; height: 1px;}

  /* 이 달의 추천 콘텐츠 */
  .picks {margin-top: 70px;}
  .picks .wrapper .btn-wrap {gap: 60px; }
  .picks .wrapper .btn-wrap button {font-size: 16px;}

  .picks .wrapper .box {margin-top: 20px;}
  
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box {height: auto; aspect-ratio: 9/10;  }
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-bg {display: none;}
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .org-per {bottom: -40px; height: 40vw; transform: translate(-50%, 0);}
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .per-box .per-cate {top: 20px; left: 50%; transform: translate(-50%, 0); padding: 5px 20px; font-size: 14px;}
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box {padding: 20px;}

  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-tit {font-size: 16px;} 
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-nm {font-size: 14px;}  
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-more {font-size:16px;  justify-self: start;}
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-more span {width: 16px; height: 16px; }
  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide .exp-box .exp-more img {width: 6px;}

  .picks .wrapper .box .picks-swiper .swiper-wrapper .swiper-slide:hover .per-box .org-per {transform: translate(-50%, 0) scale(1.1);}

  /* 베스트 클립 */
  .best {margin-top: 35px; padding-top: 35px;}
  .best .line {width: 40px; height: 2px;}
  .best .line.line-top {margin-bottom: 35px;}
  .best .line.line-bottom {margin-top: 35px;}

  .best .best-swiper .swiper-slide { }

  /* 조회수 top 10 */
  .top-view {margin-top: 30px;}
  .top-view .top-view-swiper .swiper-slide {display: block; background: #f9f9f9;   overflow: hidden;}
  .top-view .top-view-swiper .swiper-slide img {position: relative; width: 100%;  }
  .top-view .top-view-swiper .swiper-slide .box {position: relative; width: 100%; padding: 20px; min-height: 255px;}
  .top-view .top-view-swiper .swiper-slide .box .box-cate {font-size: 14px; padding-top: 0;}
  .top-view .top-view-swiper .swiper-slide .box .box-tit {font-size: 20px; line-height: 2;}
  .top-view .top-view-swiper .swiper-slide .box .box-sub-tit {font-size: 16px; margin-top: 10px;}
  .top-view .top-view-swiper .swiper-slide .box .box-nm {font-size: 14px;}

  .top-view .top-view-swiper .swiper-slide .box .slide-arrow {position: absolute; margin-top: 0; top: 20px; right: 20px; }
  .top-view .top-view-swiper .swiper-slide .box .slide-arrow .slide-prev {width: 37px; height: 37px;}
  .top-view .top-view-swiper .swiper-slide .box .slide-arrow .slide-next {width: 37px; height: 37px;}
  
  .top-view .top-view-swiper .swiper-slide .box .box-numb {position: absolute; right: 20px; top: unset; bottom: 10px; font-family: 'KMA'; font-size: 72px; color: #ddd; z-index: 0;}
  .top-view .top-view-swiper .swiper-slide .box .bg-shape {display: none;}
  .top-view .top-view-swiper .swiper-slide .box .more {position: absolute; bottom: 20px; color: #777; font-size: 16px; justify-self: start; gap: 7px;}
  .top-view .top-view-swiper .swiper-slide .box .more span {width: 16px; height: 16px;}
  .top-view .top-view-swiper .swiper-slide .box .more img {width: 6px;}
  
  /* 북쿠키 */
  .book .sub-tit {font-size: 16px; margin-top: 10px;}
  .book .box:nth-child(1) {border-bottom: 1px solid #d9d9d9;}
  .book .box .bg {min-height: unset; background-image: none !important;}
  .book .box .bg img {max-height: 260px;;}

  .book .box .txt-wrap .book-tit {font-size: 16px; line-height: 24px; }
  .book .box .txt-wrap .book-txt {font-size: 14px; line-height: 22px; margin-top: 20px;}
  .book .box .txt-wrap .book-txt .pc-only {display: none;}
  .book .box .txt-wrap .more {margin-top: 25px; color: #777; font-size: 16px; gap: 7px;}
  .book .box .txt-wrap .more span {width: 16px; height: 16px;}
  .book .box .txt-wrap .more img {width: 6px;}

  .book .box:nth-child(1) {padding-bottom: 20px; }
  .book .box:nth-child(1) .txt-wrap {padding-left: 20px; padding-bottom: 20px; padding-top: 0;}
  .book .box:nth-child(2) {padding-top: 20px; }
  .book .box:nth-child(2) .txt-wrap {padding-right: 20px; padding-top: 0;}


  /* 리포트 */
  .report {margin: 70px auto 70px;}
  .report .sub-tit {font-size: 16px; margin-top: 10px;}
  .report .report-swiper {margin-top: 20px;}
  .report .report-swiper .swiper-slide { }

  /* 하단 배너 */
  .bottom {padding: 35px 20px;}
  .bottom .wrapper {padding: 0; flex-direction: column; gap: 15px;}
  .bottom .wrapper .box {display: flex; padding: 20px;  }
  .bottom .wrapper .box img {height: 50px;}
  .bottom .wrapper .box .txt-wrap {justify-items: start; gap: 10px;}
  .bottom .wrapper .box .txt-wrap .box-txt {font-size: 14px; font-weight: 300;}
  .bottom .wrapper .box .txt-wrap .box-tit {font-size: 20px; font-weight: 500; }
}