@charset "utf-8"; 
#wrap{min-width: 100%; margin: 0 auto;}
.visual-container { display: flex; position:relative; width: 100%; height: 520px; align-items: flex-start; justify-content: center; background: #C5EEF2 url(../images/2604_top_mobile.jpg) no-repeat 50% 0; background-size: 700px auto; }

/* 새학기 최대 20% 할인 */
.content-01{background-color: #247414; padding: 64px 0; text-align: center; font-family: 'GmarketSans'} 
.content-01 .topcopy{font-size: 30px; font-weight: 300; color: #FFF9CA; margin-bottom: 16px;}
.content-01 .topcopy span{font-weight: 500;}
.content-01 .headcopy{font-size: 50px; font-weight: 800; color: #ffffff;margin-bottom: 16px;}
.content-01 .headcopy span{color: #FFF189;}
.content-01 .date{display: inline-flex; justify-content: center; align-items: center; padding: 12px 20px 10px; background-color: #2D5325; font-size: 18px; color: #D5E8BD; font-weight: 600; border-radius: 999px; margin-bottom: 50px;}
.content-01 .pd-wrap{display: inline-flex; flex-direction: column; justify-content: center; gap: 50px 0;}
.content-01 .pd-wrap li{position: relative;}
.content-01 .pd-wrap li .best{position: absolute; top: -20px; left: -20px; width: 90px; height: 90px; background: url(../images/icon_best.svg) no-repeat 50% 50%;}
.content-01 .pd-wrap li .bestgalaxy{position: absolute; top: -20px; left: -20px; width: 90px; height: 90px; background: url(../images/icon_bestgalaxy.svg) no-repeat 50% 50%;}

.content-02{background-color: #ffe100; padding: 64px 0; text-align: center; font-family: 'GmarketSans'; text-align: center;} 
.content-02 .title{font-size: 40px; font-weight: 800; margin-bottom: 32px;}
.content-02 .benefit-img{display: flex; gap: 20px; justify-content: center; flex-direction: column;}
.content-02 .title {line-height: 170%; font-size:30px; color:#247414;}
.content-02 .title .fc-white{font-size: 25px; line-height: 120%;}

.content-03 .title-container {position: relative; background-color: #2D5325; text-align: center; color: #fff; font-weight: 700; padding: 60px 0; font-family: 'GmarketSans'}
.content-03 .title-container::after {content: ''; position: absolute; left: 50%; width: 104px; height: 50px; background-image: url(../images/subtract.png); transform: translate(-50%, 60px); background-size: cover; background-repeat: no-repeat; background-position: bottom center;}
.content-03 .title-container .copy {position: relative; font-size: 24px; font-weight: 800; line-height: 130%; width: 80%; margin: 0 auto;}

/* 구매하기 */
.content-04 {padding: 50px 26px; background: #EDF2D6;}
.content-04 .product-section { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 20px; margin-top:24px; }
.content-04 .product-section .pro-img-wrap img{max-width: 100%;}

.content-04 .product-section .pro-img-wrap{position: relative;}
.content-04 .product-section .pd-btn {}
.content-04 .product-section .pd-btn button {position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);}

.buy_btn {display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px 6px; border-radius: 999px; border: 2px solid #428734; background: #ffffff; color: #428734; font-size: 22px; font-weight: 600; cursor: pointer; animation: buy_btn_blink 1.6s infinite; width: 240px; max-height: 54px; justify-content: center;}
.buy_btn_arrow {font-size: 42px; font-weight: normal; margin-bottom: 15px;}

/* 깜빡이면서 색상 반전 */
@keyframes buy_btn_blink {
  0% {
    background: #ffffff;
    color: #428734;
  }
  45% {
    background: #ffffff;
    color: #428734;
  }
  55% {
    background: #428734;
    color: #ffffff;
  }
  100% {
    background: #428734;
    color: #ffffff;
  }
  
}


/*이달의 매거진 슬라이드*/
.content-05 { position: relative; display: flex; padding: 60px 0 30px; flex-direction: column; align-items: center; color: #2A2D38; text-align: center; font-size: 32px; font-weight: 400; line-height: 44px; gap: 16px; }
.content-05 {font-size: 20px; line-height: 26px; font-weight: 500;}
.content-05 .text {width: 90%; margin: 0 auto;}


/* 세살버릇 영역 */
.graph-container { display: flex; padding: 60px 5px; flex-direction: column; align-items: center;  background: #e0f3ff; align-items: center; color: #2A2D38; text-align: center; font-size: 20px; line-height: 26px; font-weight: 500; gap: 16px; }
.graph-container .point { font-size: 28px; font-weight:700; color: #033bc9;}
.graph-container .graph-img { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.graph-container .graph-img img { display: block; margin:20px auto 0; max-width:92%;}


/* 우리 아이 책을 안 읽어요 */
.global-news { display: flex; width: 100%; padding: 60px 0; flex-direction: column; align-items: center; background: #F5EEE4; }
.global-news .title-wrap .tt {display: block; font-family: "SBaggro"; font-size: 30px; font-weight: 900; color: #493D9E; padding-bottom: 15px; text-align: center;}
.global-news .title-wrap .point {font-family: "SBaggro"; text-align: center; width: 98%; font-size: 20px; font-weight: 400; line-height: 28px; color: #575A63;}
.global-news .device-mobile{text-align: center;}
.global-news .device-mobile img{max-width:95%; padding-bottom: 20px;}
.global-news .text-wrap.old-story { color: #2A2D38; text-align: center; font-family: NanumMyeongjo; font-size: 16px; font-weight:600; line-height: 25px;}
.global-news .text-wrap.old-story .name { color: #73757B; text-align: center; font-family: Paperlogy; font-size: 14px; font-weight: 400; line-height: 40px; }


/* 후기 */
.photo-container { display: flex; padding: 60px 5px; flex-direction: column; align-items: center; gap: 16px; align-self: stretch; background: #D7E2FF; }
.photo-container .device-mobile{width: 96%; margin: 0 auto; text-align: center;}
.photo-container .device-mobile img{max-width: 100%;}
.photo-container .title-wrap { margin: 0 auto; padding: 0; font-size: 20px; line-height: 26px; color: #575A63; text-align: center; }
.photo-container .title-wrap .point { font-size: 24px; line-height: 28px; font-weight: 700; color: #2A2D38; }


/* 혜택 크게 보기 */
.benefit-container {display: flex; padding: 50px 0px; flex-direction: column; align-items: center; text-align: center;}
.benefit-container .titimg img{width: 235px; margin: 0 auto;}
.benefit-container .bene-app-wrap{width: 96%; margin: 0 auto;}
.benefit-container .bene-app-wrap img{width: 100%; max-width: 560px;}
.benefit-container.sc02 .bene-app-wrap img{margin-right: -15px;}
.benefit-container.sc01{background: #fffadc;}
.benefit-container.sc02{background: #ffecf2;}
.benefit-container.sc03{background: #edffec;}
.benefit-container .title{font-family: 'Maplestory'; font-size: 28px; font-weight: bold; padding: 20px 0 25px;}
.benefit-container .device-pc{text-align: center;}
.benefit-container.sc01 .title{color: #593D00;}
.benefit-container.sc01 .title span{color: #AF7800;}
.benefit-container.sc02 .title{color: #C04F00;}
.benefit-container.sc02 .title span{color: #F37C25;}
.benefit-container.sc03 .title{color: #105E00;}
.benefit-container.sc03 .title span{color: #1DAD00;}
.benefit-container.sc02 .btmcopy{display: inline-flex; justify-content: center; align-items: center; background: #EEDFD1; padding: 6px 20px 8px; border-radius: 999px; color: #B25A1C; font-size: 16px; font-weight: bold; margin-top: 10px; font-family: 'GounBatang';}


/* 내셔널지오그래픽 키즈 매거진 슬라이드 */

.preview-container {display: flex; padding: 60px 5px; flex-direction: column; align-items: center; gap: 8px; align-self: stretch; background: #FFF; }
.preview-container .title-wrap { margin: 0 auto; padding: 0 0 0 0; font-size: 20px; line-height: 26px; color: #575A63; text-align: center; }
.preview-container .title-wrap .point { font-size: 24px; line-height: 28px; font-weight: 700; color: #252b44; }


/* 잡지 롤링 */
.magazine-container { width: 100%; height: auto; margin: 0 auto; background:url(/event/2025/0501_NGM/images/bg_earth.jpg) 50% 100px no-repeat #282829; text-align: center; }
.magazine-container .magazine-section { position: relative; width: 100%; margin: 0 auto; padding: 60px 0 ; font-size: 0; text-align: center; }
.magazine-container .magazine-section .title-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px;  color: #FFF; text-align: center; font-size: 24px;  font-weight: 700; line-height:28px; box-sizing: border-box; }
.magazine-section .text-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 20px 0; color: #FFF; text-align: center; font-size: 20px;  font-weight: 500; line-height: 24px; box-sizing: border-box; }
.magazine-section .text-wrap .title { color: #FACC15; text-align: center; font-size: 25px; font-weight: 700; line-height: 32px; letter-spacing: -1px; }
.magazine-section .text-wrap .comment { color: #fff; text-align: center; font-size: 14px; font-weight: 300; line-height: 20px; }

.magazine-container .magazine-section img { display: block; margin: 0 auto; }
#magazine-wrap { overflow:hidden; position:relative; width:100%; height:220px; padding: 20px 0 0; }
.magazine { width:3765px; /* 보여야 하는 이미지 + 클론이미지 전체 합 */ height:100%; display:flex; flex-wrap:nowrap; animation: bannermove 36s linear infinite; }
.magazine > div { flex:0 0 auto; width: 140px; height:204px; margin: 0 20px 0 0; line-height: 203px; background-color:#282829; vertical-align:top; text-align:center; }
.magazine img { width:100%; height:100%; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.8); }
.magazine > .clone { background-color:green; /* opacity:.4; */ }
@keyframes bannermove {
   0% { transform: translate(0, 0); }
   100% { transform: translate(-50%, 0);}
}


/* 척척박사 내용 미리보기 */
.preview-container.ckdr {background: #ffb800; }
.preview-container.ckdr .title-wrap{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px;  color: #FFF; text-align: center; font-size: 24px;  font-weight: 600; line-height:32px; box-sizing: border-box; }


/* 어워드 */
.award-container { display: flex; padding: 60px 20px; flex-direction: column; align-items: center;justify-content: center; background: url(/event/2025/0501_NGM/images/Section-6.jpg) 50% 0 no-repeat #141D3B; text-align: center; background-size: cover; gap: 20px; box-sizing: border-box; }
.award-container .award-section { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.award-container .award-section .text-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #FFF; text-align: center; font-size: 18px;  font-weight: 500; line-height: 24px; }
.award-container .award-section .text-wrap .title { color: #FACC15; text-align: center; font-size: 28px; font-weight: 700; line-height: 34px; letter-spacing: -1px; }
.award-container .award-section .text-wrap .comment { color: #BFDBFE; text-align: center; font-size: 12px; font-weight: 300; line-height: 16px; }
.award-container .award-section img { display: block; margin: 0 auto; }
.award-container .award-section .mark { display: flex; width: 172px; height: 176px; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; color: #FFF; text-align: center; font-size: 15px; font-weight: 500; line-height: 21px; }
.award-container .award-section .mark img { width: 158px; }
.award-container .award-section .company img { width: 285px; }


/* 일러두기 */
.notice-container { display: flex; padding: 60px 20px; flex-direction: column; align-items: center; justify-content: flex-start; background: #F9FAFB; text-align: left; gap: 20px; box-sizing: border-box; font-family: 'Paperlogy', sans-serif; }
.notice-section { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 400px; }
.notice-section .text-wrap { display: flex; color: #2A2D38; font-size: 18px; font-weight: 600; line-height: 24px; letter-spacing: -0.36px; }

.item-unit { box-sizing: border-box; }
.item-unit .title { padding: 6px 0 12px 0; font-size: 17px; line-height: 26px; font-family: 'Paperlogy', sans-serif; font-weight: 500; letter-spacing: -0.5px; color: #1D1D1D; text-align: left; }
.item-unit ul { text-align: left; }
.item-unit ul li { padding: 0 0 0 24px; font-size: 15px; line-height: 21px; color: #666; font-weight: 400; text-align: left; background: url(../images/li_dot.svg) no-repeat 12px 8px; background-size: 3px 3px; }
.item-unit ul li + li { margin: 8px 0 0; }

.notice-section .btn { display: inline-block; padding: 3px 12px; vertical-align: top; text-align: center; border-radius: 4px; background-color: #E4E4E4; }
.notice-section .btn span {font-size: 14px; line-height: 21px; font-family: 'Pretendard', sans-serif; font-weight: 500; letter-spacing: -0.5px; color: #1D1D1D; }
.notice-section .btn.mg-left { margin-left: 12px; }
.notice-section .btn.kakao { padding-left: 34px; background: url(../images/kakao_icon.svg) no-repeat 10px 2px #FAE100; }









.main-event { font-family: 'Paperlogy', 'Pretendard', 'Noto Sans KR', '돋움', 'Dotum', 'Apple SD Gothic Neo', 'Helvetica','sans-serif'; }
.device-pc { display: none; }
.device-mobile { display: block; }





/* 상품3종 */
.product-three { display: flex; padding: 60px 0px; flex-direction: column; align-items: center; gap: 16px; align-self: stretch; background: #3f4d86; }
.product-three-item {display: flex;  flex-direction: row; align-items: center; gap: 20px; align-self: stretch;}
.product-three a img {width: 80%; margin: 0 auto;}


/*상단 슬라이드 소스*/
.carousel_container{
    width:375px;
    max-width:95%;
    height:400px;
    position:relative;
    border-radius:12px;
    overflow:hidden;
	margin: 0 auto;
  }

  .carousel_view{
    height:100%;
    overflow:hidden;
  }

  .carousel_wrapper{
    display:flex;
    height:100%;
    align-items:center; /* 세로 중앙 정렬 */
    will-change:transform;
  }

  /* 각 슬라이드(레이아웃 폭은 고정) */
  .carousel_slide{
    flex:0 0 235px; /* 한 화면에 3개 보임(레이아웃 기준) */
    box-sizing:border-box;
    padding:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    transition: transform .5s;
    pointer-events:auto;
  }

  /* 가운데 시각확대 대상(내부 래퍼) */
  .carousel_item{
    width:100px;            /* 기본 가로 크기 (시각상) */
    /* height:160px;           /* 기본 세로 크기 */
    border-radius:8px; */
    overflow:hidden;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
    transform-origin:center center;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
  }

  .carousel_item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* 활성(가운데) 항목만 확대. 실제 레이아웃 폭은 바뀌지 않음 */
  .carousel_slide.active .carousel_item{
    transform: scale(2.35); /* 100px * 1.8 -> 180px */
    z-index:3;
  }

  /* 활성 슬라이드 자체도 z-index 올려서 겹침 우선권 확보 */
  .carousel_slide.active{ z-index: 4; }

  .carousel_btn{
    position:absolute;
    top:50%;
    width: 34px;
  height: 34px;
  cursor: pointer;
  transform: translateY(-50%);

    z-index: 99;
            background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
  }

  .carousel_btn::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  border-top: 4px solid #fff;;
  border-right: 4px solid #fff;;
}

.carousel_btn.prev {
  left: 20px;
}


.carousel_btn.next {
  right: 20px;
}

.padding-tit {padding: 60px 0!important;}
.cont15 .tit {width:90%;}


@media (max-width: 800px) {
   .visual-container {margin-top: 58px;}
}



.cont-tit {font-size:26px; font-weight:800; width:80%; margin:0 auto; line-height:120%;}
.event-tit {font-size:40px; font-weight:800; }
.day-tit {font-size:22px; font-weight:800; background:#c28b33; padding:1.8rem 1.5rem 0rem; border-radius:40px;}
.pdb20 {padding-bottom: 20px;}
.pdb40 {padding-bottom: 40px;}
.cont-tit .blue {color:#3f4d86;}
.cont-05-tit {background: url(../images/cont-05-tit-m.png) #594d99 no-repeat center center; margin:-50px 0 20px; height:150px; width:100%;}
.cont-05-titpng {margin-top:-37px;}
.cont-05-tit2 {background: url(../images/cont-05-tit2-m.png) #2878a1 no-repeat center center; margin:-50px 0 20px; height:150px; width:100%;}

#chdr .title-wrap { margin: -5px 0 -20px 0; font-size: 20px; color: #fff; text-align: center; font-weight: 500; }



.slider-container-new {
  position: relative;
  max-width: 1000px;
  margin: 10px auto;
}

.slidewrap {
  width: 100%;
  aspect-ratio: 1000 / 1000;
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}

.slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex: 0 0 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.arrow {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 8;
}

.prev {
  left: -60px;   /* 컨테이너 밖으로 */
}
.next {
  right: -60px;  /* 컨테이너 밖으로 */
}

.prev::before,
.next::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-top: 6px solid #999;
  border-right: 6px solid #999;
  border-radius: 4px;

}
.prev.white::before,
.next.white::before {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-top: 6px solid #fff;
  border-right: 6px solid #fff;
  border-radius: 4px;
}
.prev::before { transform: rotate(-135deg); }
.next::before { transform: rotate(45deg); }


/* 모바일에서는 너무 바깥으로 안 나가게 */
@media (max-width: 1092px) {
  .slider-container-new {width: 80%;;}
  .prev { left: -45px; }
  .next { right: -45px; }
.prev::before {
  content: '';
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-135deg);
  display: block;
  width: 9px;
  height: 9px;
  border-top: 3px solid #aaa;
  border-right: 3px solid #aaa;
  border-radius: 2px;
}
.next::before{
  content: '';
  position: absolute;
  left: 45%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  display: block;
  width: 9px;
  height: 9px;
  border-top: 3px solid #aaa;
  border-right: 3px solid #aaa;
  border-radius: 2px;
}

.prev.white::before,
.next.white::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  border-radius: 2px;
}

}



/* 공통사용 */
.device-pc {display: none;}
.device-mobile {display: block;}
.fc-yellow{color: #FFDA00;}
.fc-white{color: #FFFFFF;}
/* 본문 바로가기 */