@charset "utf-8"; 
/* Reset */
html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* -webkit-user-select:none; 택스트 긁힘 방지 */ 
body { width:100%; background: #fff; min-width: 320px; -webkit-text-size-adjust: none; word-wrap: break-word; word-break: keep-all; overflow-y: scroll; }
body, input, select, textarea, button { border: none; color: #141414; background: #ffffff; font-weight: 300; letter-spacing: -0.3px; font-family: 'Paperlogy', 'Pretendard', 'Noto Sans KR', '돋움', 'Dotum', 'Apple SD Gothic Neo', 'Helvetica','sans-serif'; }

body, article, aside, details, figcaption, caption, figure, legend, footer, header, hgroup, main, menu, nav, section, summary { display:block; padding:0; margin:0; }
div, p, ul, li, ol, table, th, td, textarea, select, input, span, form, h1, h2, h3, h4, h5, h6, dt, dl, dd, em, sup { margin: 0; padding: 0; vertical-align: top; }
h1, h2, h3, h4, h5, h6 { font-style: normal; font-weight: inherit; font-size: inherit; }
ul, ol, dl, dd, dt, li { list-style-type:none;}
table, tbody, tfoot, thead, tr, th, td { border-collapse: collapse; border-spacing: 0; }
form, fieldset { margin: 0; padding: 0; border: 0; }
a { color: inherit; text-decoration: inherit; }
img, fieldset { border:0; vertical-align:middle; }
address, em { font-style: normal; }
legend, caption { position: absolute; top: auto; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
button, label { cursor: pointer; }
button { border: 0; padding: 0; cursor: pointer; background: transparent; *overflow: visible; white-space: nowrap; }
button:focus { outline: none;}
optgroup { font-style:normal; font-size:0px; height:0px; line-height:0px;}

/* * { box-sizing: border-box; word-break: keep-all; } */

/* 본문 바로가기 */
#skip { position: absolute; left: 0; top: -50px; width: 100%; line-height: 48px; text-align: center; background: rgba(0, 0, 0, 0.5); color: #ffffff; border-bottom: 1px solid #ffffff; z-index: 100000; transition: all 0.3s; }
#skip:focus { top: 0; }

/* 숨김 */
.blind { position: absolute; overflow: hidden; left:-9999px; top: 0; width: 1px; height: 1px; font-size: 1px; line-height: 0;}

/* Form */
select, textarea, input { color: #141414; border: 1px solid #C8C8C8; font-family: inherit; background:#fff; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; box-sizing: border-box; }
select { padding: 0 2%; vertical-align:middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
select::-ms-expand { display: none; }/* IE 10, 11의 네이티브 화살표 숨기기 */
input { vertical-align: middle; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
input::placeholder{ font-weight: 300; }
input:-ms-input-placeholder { color: #C8C8C8; font-size: 1.40px; } /*Internet Explorer 10 이상에 적용*/
input::-moz-placeholder { color: #C8C8C8; font-size: 1.40px; } /*Mozilla Firefox 4 부터 18에 적용*/
input::-webkit-input-placeholder { color: #C8C8C8; font-size: 1.60px; font-weight: 300; } /*Webkit, Blink, Edge에 적용*/
input[type="checkbox"],input[type="radio"] { border:none; font-family:inherit; }
textarea { padding: 5px 3px; }
select:focus, textarea:focus, input:focus { border: 1px solid #C8C8C8; outline: none; }
select option { display: inline-block; line-height: 33px;}
html {
    font-size: 10px;
    height: 100%;
}

body {
    font-size: 1rem;
    height: 100%;
}


.header-2xl { font-size: 64px; line-height: 80px; font-weight: 700; }
.header-xl { font-size: 54px; line-height: 70px; font-weight: 700; }
.header-lg { font-size: 48px; line-height: 60px; font-weight: 700; }
.header-md { font-size: 40px; line-height: 52px; font-weight: 700; }
.header-sm { font-size: 32px; line-height: 46px; font-weight: 700; }

.body-2xl-b { font-size: 32px; line-height: 46px; font-weight: 500; }
.body-xl-b { font-size: 28px; line-height: 40px; font-weight: 500; }
.body-lg-b { font-size: 24px; line-height: 34px; font-weight: 500; }
.body-md-b { font-size: 20px; line-height: 30px; font-weight: 500; }
.body-sm-b { font-size: 16px; line-height: 22px; font-weight: 500; }

.font-weight-100 { font-weight: 100 !important; }
.font-weight-200 { font-weight: 200 !important; }
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-weight-800 { font-weight: 800 !important; }
.font-weight-900 { font-weight: 900 !important; }

.font-40 { font-size: 40px; line-height: 54px; font-weight: 300; }
.font-36 { font-size: 36px; line-height: 48px; font-weight: 300; }
.font-32 { font-size: 32px; line-height: 40px; font-weight: 300; }
.font-28 { font-size: 28px; line-height: 34px; font-weight: 300; }
.font-24 { font-size: 24px; line-height: 30px; font-weight: 300; }
.font-20 { font-size: 20px; line-height: 26px; font-weight: 300; }
.font-18 { font-size: 18px; line-height: 24px; font-weight: 300; }
.font-17 { font-size: 17px; line-height: 24px; font-weight: 300; }
.font-16 { font-size: 16px; line-height: 23px; font-weight: 300; }
.font-15 { font-size: 15px; line-height: 22px; font-weight: 300; }
.font-14 { font-size: 14px; line-height: 20px; font-weight: 300; }

.black { color: #000000; }
.white { color: #ffffff; }
.red-500 { color: #EF4444; }
.purple-600 { color: #9333EA; }
.green-600 { color: #16A34A; }
.blue-200 { color: #BFDBFE; }
.blue-500 { color: #3B82F6; }
.blue-600 { color: #2563EB; }
.yellow-400 { color: #FFDA00; }
.orange { color: #EB3D11; }
.gray-100 { color: #F3F4F6; }
.gray-600 { color: #4B5563; }
.gray-700 { color: #374151; }
.gray-800 { color: #1F2937; }
.gray-900 { color: #111827; } 
.color-primary { color: #2760F3 !important; }
.color-secondary { color: #FF8419 !important; }
.color-tertiary { color: #38BF07 !important; }
.color-tertiary-bold { color: #2C9307 !important; }
.color-sub-01 { color: #493D9E !important; }
.color-sub-02-subtle { color: #C4E1F6 !important; }
.color-sub-02 { color: #3572EF !important; }
.color-sub-03 { color: #FF869A !important; }
.color-sub-04-subtle { color: #BBC5ED !important; }
.color-sub-04 { color: #5E7CF5 !important; }
.color-sub-04-bold { color: #3F4D86 !important; }
.color-sub-05-subtle { color: #B7E1F0 !important; }
.color-sub-05 { color: #6AC4CA !important; }
.color-sub-05-bold { color: #13AFBA !important; }
.color-danger-subtle { color: #E99A9A !important; }
.color-danger { color: #D43636 !important; }
.color-danger-bold { color: #A21A1A !important; }
.color-brand { color: #FFDA00 !important; }
.text-primary { color: #2A2D38 !important; }
.text-secondary { color: #575A63 !important; }
.text-tertiary { color: #73757B !important; }
.text-note { color: #A7AAB2 !important; }
.text-white { color: #fff !important; }


.mg-2xl { margin: 40px; }
.mg-xl { margin: 32px; }
.mg-lg { margin: 24px; }
.mg-md { margin: 20px; }
.mg-sm { margin: 16px; }

.main-event { width: 100%; overflow: hidden; font-family: 'Paperlogy','Pretendard', sans-serif;}
/* 상단 타이틀 */
.visual-container { display: flex; position:relative; width: 100%; height: 560px; align-items: flex-start; justify-content: center; background: url(../images/visual-pc.jpg?v3) no-repeat 50% 0 #E7EEF8; background-size: 700px auto; }
.visual-container .title { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); }
.visual-container .copy { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%) ; }

.badge {position:absolute; top:10px; right:20px;}
.badge img {width:80px;}
.badge-intocon {position:relative; padding-top:20px; }
.badge-intocon img {width:140px;}


/* 아이의 왜요가 와로 바뀌는 순간 */
.benefit-img {display: flex; gap: 20px; flex-direction:column;}


/* 주요기사 */
.news-container { display: flex; width: 100%; flex-direction: column; align-items: center; background: #FFF; padding: 50px 0; gap: 16px; flex-shrink: 0; }
.news-container h3 { color: #2A2D38; text-align: center; font-family: "GmarketSans"; font-size: 24px; line-height: 32px; font-weight: 400; line-height: 32px; letter-spacing: -0.64px; }
.news-container .news-section { display: flex; width: 360px; padding: 0 5px; align-items: flex-start; gap: 10px; box-sizing: border-box; flex-wrap: wrap; }
.news-unit { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; word-break: keep-all; width: 170px; }
.news-unit .text-wrap { display: flex; padding: 0px 4px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; }
.news-unit .title { font-size: 22px; font-weight: 500; line-height: 30px; letter-spacing: -1px; font-family: 'Paperlogy'; color: #2A2D38; }
.news-unit .content { padding: 0 8px 0; font-size: 15px; font-weight: 400; line-height: 20px; letter-spacing: -0.7px; font-family: 'Paperlogy'; color: #575A63; }
.news-unit .img { width: 170px; height: auto; }
.news-unit .img img { width: 100%; height: auto; }



/* 킥 */
.kick-container { display: flex; position: relative; width: 100%; height: 360px; flex-direction: column; align-items: center;  background: #1691E9; align-items: center; color: #2A2D38; text-align: center; font-size: 32px; font-weight: 400; line-height: 44px; gap: 16px;  }
.kick-container .kick-01 { position: absolute; top: -29px; left: 50%; transform: translateX(-50%); }
.kick-container .kick-01 img { width: 274px; }
.kick-container .kick-02 { position: absolute; top: 57px; left: 50%; transform: translateX(-50%);  }
.kick-container .kick-02 img { width: 334px; }


/* 키워드 혜택 */
.keypoint-container { display: flex; padding: 60px 0; flex-direction: column; align-items: center;  background: #3F4D86; align-items: center; color: #2A2D38; text-align: center; font-size: 20px; line-height: 28px; font-weight: 400; gap: 16px; }
.keypoint-section .text-wrap { display: flex; flex-direction: column; align-self: stretch; align-items: center; gap: 10px; color: #FFF; text-align: center; font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.56px;  }
.keypoint-img { display: flex !important; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.keypoint-img img { display: block; width: 80%; margin: 0 auto;}

.event-container {display: flex; padding: 60px 0; flex-direction: column; align-items: center;  background: #7d3507; align-items: center; color: #2A2D38; text-align: center; font-size: 20px; line-height: 28px; font-weight: 400; gap: 16px;}


/* 띠배너 - 전세계 동시출판 / 누적발행 5억부 / 어린이 정기독자 125만명 */
.keypoint-banner.cont02 ul {display: flex; justify-content: space-around; color: #fff; font-size: 24px; font-weight: 700; width: 100%; flex-direction:column; align-items:center; gap: 40px;}
.keypoint-banner.cont02 ul li {padding-top: 100px; display: inline-block; width: 260px;  border-bottom: 2px solid #ffffff30; height: 100px; }
.keypoint-banner.cont02 ul li:nth-child(1) {background: url(../images/banner-icon01.png) no-repeat center top;}
.keypoint-banner.cont02 ul li:nth-child(2) {background: url(../images/banner-icon02.png) no-repeat center top;}
.keypoint-banner.cont02 ul li:nth-child(3) {background: url(../images/banner-icon03.png) no-repeat center top;}
.keypoint-banner.cont02 ul li span {display: block;}
.keypoint-banner.cont02 ul li:last-child {border: 0;}
.keypoint-banner { display: flex; padding: 48px 0 20px 0; flex-direction: column; align-items: center;  background: #364279; align-items: center; text-align: center; }


/* 최저가 구매 찬스! */
.keypoint-chance {position: relative; display: flex; padding: 60px 0; flex-direction: column; align-items: center;  background: #F5EEE4; align-items: center; color: #2A2D38; text-align: center; font-size: 20px; line-height: 28px; font-weight: 400; gap: 16px; }
.keypoint-chance a {position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);}



/* 최저가 구매찬스 */
.cont03 .orange {padding-top: 20px;}
.cont03 .chdr {position: relative;}
.cont03 .chdr button {position: absolute; left: 0; bottom:0; margin:8px; width: calc(100% - 16px); font-size: 20px; font-weight: normal; padding: 20px 0; border-radius: 20px;}
.cont03 .chdr button img {position: absolute; right: 14px; bottom: 26px;}

.btn-gradient {
  padding: 12px 20px;
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
  border: none;
  cursor: pointer;

  /* 그라데이션 정의 */
  background: linear-gradient(90deg,
    #FDBA36,   /* 오렌지 */
    #FF544F,   /* 라즈베리 */
    #FDBA36    /* 청록 */
  );

  /* 애니메이션을 위해 그라디언트 크기를 키움 */
  background-size: 200% 200%;

  /* 부드러운 이동 */
  animation: slideGradient 3s ease-in-out infinite;
}

/* 애니메이션 키프레임: 배경 위치를 이동 */
@keyframes slideGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 사용자 접근성: 모션 최소화 설정을 존중 */
@media (prefers-reduced-motion: reduce) {
  .btn-gradient {
    animation: none;
  }
}





/* 세살버릇 영역 */
.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-img { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.graph-img img { display: block; margin:20px auto 0; width:100%;}

/* 혜택 */
.benefit-container1  { display: flex; padding: 60px 0px; flex-direction: column; align-items: center;  background: #fffadc; }
.benefit-container1 .benefit-section-sub { display: flex; width: 360px; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 400px; font-size: 32px; line-height: 40px; font-weight: 500; color: #2A2D38;  }
.benefit-container1 .content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0px; color: #ff9925; font-size: 28px; font-weight: 700; line-height: 48px;}
.benefit-container1 .content .head { color: #2A2D38; text-align: center;  font-size: 18px; font-weight: 500; line-height: 24px; }
.benefit-container1 .bene-app-wrap { position: relative; display: flex; width: 360px; flex-direction: column; align-items: flex-start; gap: 8px; }
.benefit-container1 .bene-app-wrap .apply { position: absolute; bottom: 40px; left: 50%; width: 280px; }
.benefit-container1 .bene-app-wrap .apply img { width: 280px; height: auto; transform: translateX(-50%); }


.benefit-container2  { display: flex; padding: 60px 0px; flex-direction: column; align-items: center;  background: #ffecf2; }
.benefit-container2  .benefit-section-sub { display: flex; width: 360px; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 400px; font-size: 32px; line-height: 40px; font-weight: 500; color: #2A2D38;  }
.benefit-container2 .content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0px; color: #ff2549; font-size: 28px; font-weight: 700; line-height: 48px; }
.benefit-container2 .content .head { color: #2A2D38; text-align: center;  font-size: 18px; font-weight: 500; line-height: 24px; }
.benefit-container2 .bene-app-wrap { position: relative; display: flex; width: 360px; flex-direction: column; align-items: flex-start; gap: 8px; }

.benefit-container3 { display: flex; padding: 60px 0px; flex-direction: column; align-items: center;  background: #edffec; }
.benefit-container3  .benefit-section-sub { display: flex; width: 360px; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 400px; font-size: 28px; line-height: 40px; font-weight: 500; color: #2A2D38;  }
.benefit-container3 .content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0px; color: #00b743; font-size: 28px; font-weight: 700; line-height: 48px; }
.benefit-container3 .content .head { color: #2A2D38; text-align: center; font-size: 18px; font-weight: 500; line-height: 24px; }
.benefit-container3 .bene-app-wrap { position: relative; display: flex; width: 360px; flex-direction: column; align-items: flex-start; gap: 8px; }


/* 해외 한줄 기사 */
.global-news { display: flex; width: 100%; padding: 60px 5px; flex-direction: column; align-items: center; gap: 12px; background: #F5EEE4; }
.global-news .title-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; align-self: stretch; color: #575A63; text-align: center; font-size: 20px; font-weight: 400; line-height: 26px; }

.global-news .title-wrap .point {color: #493D9E; text-align: center; font-size: 32px; font-weight: 700; line-height: 36px; padding-bottom:20px; }
.flag-article-list { display: flex; width: 350px; flex-direction: column; align-items: flex-start; gap: 10px; }
.flag-unit { display: flex; padding: 12px 16px 12px 12px; align-items: center; gap: 10px; align-self: stretch; border-radius: 999px; background: #FFF; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10); }
.flag-unit .country { color: #374151; font-family:'Paperlogy', 'Pretendard', sans-serif; font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: -0.48px; }
.flag-unit .article { color: #4B5563; font-family: 'Paperlogy', 'Pretendard', sans-serif; font-size: 15px; font-weight: 400; line-height: 20px; }
.flag-unit::before { display: flex; width: 60px;height: 60px; content:'';flex-shrink: 0; }
.flag-unit.GB:before  { background: url(../images/flag-GB.svg) no-repeat 50% 50%; background-size: 60px 60px; }/* 영국 */
.flag-unit.BE:before  { background: url(../images/flag-BE.svg) no-repeat 50% 50%; background-size: 60px 60px; }/* 벨기에 */
.flag-unit.FI:before  { background: url(../images/flag-FI.svg) no-repeat 50% 50%; background-size: 60px 60px; }/* 핀란드 */
.flag-unit.DE:before  { background: url(../images/flag-DE.svg) no-repeat 50% 50%; background-size: 60px 60px; }/* 독일 */
.flag-unit.JP:before  { background: url(../images/flag-JP.svg) no-repeat 50% 50%; background-size: 60px 60px; }/*  */
.flag-unit.SG:before  { background: url(../images/flag-SG.svg) no-repeat 50% 50%; background-size: 60px 60px; }/* 싱가포르 */
.flag-unit.CA:before  { background: url(../images/flag-CA.svg) no-repeat 50% 50%; background-size: 60px 60px; }/* 캐나다 */
.flag-unit.US:before  { background: url(../images/flag-US.svg) no-repeat 50% 50%; background-size: 60px 60px; }/* 미국 */
.global-news .text-wrap.old-story { color: #2A2D38; text-align: center; font-family: NanumMyeongjo; font-size: 20px; font-weight:600; line-height: 28px;}
.global-news .text-wrap.old-story .name { color: #73757B; text-align: center; font-family: Paperlogy; font-size: 14px; font-weight: 400; line-height: 32x; }


/* kids photo */
.photo-container { display: flex; padding: 60px 5px; flex-direction: column; align-items: center; gap: 16px; align-self: stretch; background: #D7E2FF; }
.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; }

/* 내용 미리보기 */
.preview-container { display: flex; padding: 60px 5px 60px 5px; flex-direction: column; align-items: center; gap: 8px; align-self: stretch; background: #FFF; }
.preview-container .title-wrap { margin: 0 auto; padding: 40px 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: #2A2D38; }
.magazine-unit { display: flex; margin: 0 auto; width: 360px; padding: 24px 16px; flex-direction: column; align-items: center; gap: 16px; align-self: stretch; text-align: center; border-radius: 40px; box-sizing: border-box; }
.magazine-unit.article-01 { background: #D9ECFF; color: #0072E4; }
.magazine-unit.article-02 { background: #F6E9F3; color: #C33BA1; }
.magazine-unit.article-03 { background: #C8E9E1; color: #249178; }
.magazine-unit.article-04 { background: #F5ECD4; color: #72550C; }
.magazine-unit.article-05 { background: #E3E4F9; color: #3F44A6; }
.magazine-unit.article-06 { background: #F8E1F6; color: #9A2C93; }
.magazine-unit.article-07 { background: #FFE5E4; color: #C95752; }
.magazine-unit.article-08 { background: #F6F3E1; color: #AE9712; }
.magazine-unit .title { font-family: 'GmarketSans', sans-serif; font-weight: 700; font-size: 24px; line-height: 32px; }
.magazine-unit .title .sub-copy { font-weight: 400; font-size: 18px; line-height: 22px; color: #575A63; }
.magazine-unit .book-cont { display: flex; align-items: center; align-content: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.magazine-unit .book-cont .page-img { position: relative; width: 145px; height: auto; font-size: 0; }
.magazine-unit .book-cont .page-img img { width: 100%; }
.magazine-unit .book-cont .page-img .qr-zoom { position: absolute; bottom: 10px; left: 50%; transform: translateX(-30px) }
.magazine-unit .book-cont .page-img .qr-zoom img { width: 116px; height: auto; }


/* 구매하기 */
.product-container { display: flex; padding: 60px 0px; flex-direction: column; align-items: center; gap: 16px; align-self: stretch; background: #f1ded2; }
.product-container.cont05-art { background: #c0dbf2; }

.product-container.info {  background: #F5EEE4; }
.product-container.second { background: #F5EEE4; }
.product-container .title-wrap { position: relative; padding-bottom: 72px; align-self: stretch; color: #F5EEE4; text-align: center; font-family: GmarketSans; font-size: 24px; font-weight: 400; line-height: 28px; }
.product-container .title-wrap .point {color:#F5EEE4; text-align: center; font-family: GmarketSans; font-size: 32px; font-weight: 600; line-height: 40px; letter-spacing: -0.8px; }
.product-container.second  .title-wrap { color: #575A63; }
.product-container.second  .title-wrap .point { color:#2A2D38; }

.product-section .title {margin: 0 auto 20px 0;  text-align: center;}

.product-section { display: flex; width: 360px; flex-direction: column; align-items: flex-start; gap: 20px; margin-top:24px; }
.product-container .title-wrap .trophy-layout { position: absolute; left: 50%; bottom: -70px; transform: translateX(-50%); z-index: 10;}
.product-container .title-wrap .trophy { width: 130px; height: auto; aspect-ratio: 27/28; }

.cont05 .title-container {background-color: #3f2819; width: 100%; text-align: center; margin-top: -60px; color: #fff; font-weight: 700; padding: 40px 0; position: relative;}
.cont05 .title-container::after {content: ''; background: url(../images/cont-05-titbg-png.png) no-repeat  center bottom; display: block; width: 104px; height: 50px; position: absolute;  padding-top: 35px; left: calc(50% - 50px);}
.cont05 .title-container div {font-size: 26px; padding: 0 20px;}
.pd-btn {position: relative;}
.pd-btn button {position: absolute; right: 64px; bottom: 32px;}
.photoark-last {right:20px !important;}
.buy_btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 28px;
  border-radius: 999px;
  border: 2px solid #7d3507;
  background: #ffffff;
  color: #7d3507;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  animation: buy_btn_blink 1.6s infinite;
  width: 300px;
  justify-content: center
}

.buy_btn.photoark {
  border: 2px solid #0F5E86;
  color: #0F5E86;
  animation: buy_btn_blink2 1.6s infinite;
}

.buy_btn.photoark-last {
  border: 2px solid #3F4D86;
  color: #3F4D86;
  animation: buy_btn_blink3 1.6s infinite;
}

.buy_btn_arrow {
  font-size: 42px;
  line-height: 1;
  font-weight: normal;
}

/* 깜빡이면서 색상 반전 */
@keyframes buy_btn_blink {
  0% {
    background: #ffffff;
    color: #7d3507;
  }
  45% {
    background: #ffffff;
    color: #7d3507;
  }
  55% {
    background: #7d3507;
    color: #ffffff;
  }
  100% {
    background: #7d3507;
    color: #ffffff;
  }
  
}
@keyframes buy_btn_blink2 {
  0% {
    background: #ffffff;
    color: #0F5E86;
  }
  45% {
    background: #ffffff;
    color: #0F5E86;
  }
  55% {
    background: #0F5E86;
    color: #ffffff;
  }
  100% {
    background: #0F5E86;
    color: #ffffff;
  }
  
}
@keyframes buy_btn_blink3 {
  0% {
    background: #ffffff;
    color: #3F4D86;
  }
  45% {
    background: #ffffff;
    color: #3F4D86;
  }
  55% {
    background: #3F4D86;
    color: #ffffff;
  }
  100% {
    background: #3F4D86;
    color: #ffffff;
  }
  
}



.pro-img-wrap { position: relative; }
.pro-img-wrap .apply { position: absolute; bottom: 24px; left: calc(50% - 150px); width: 296px; }
.pro-img-wrap .apply img { bottom: 32px; left: 50%; width: 296px; height: auto; transform: translateX(-50%);}

.benefit-section .product-section { display: flex; width: 336px; flex-direction: column; align-items: flex-start; gap: 8px; }
.benefit-section .pro-img-wrap { position: relative; }
.benefit-section .pro-img-wrap .apply { position: absolute; bottom: 32px; left: 50%; width: 296px; }
.benefit-section .pro-img-wrap .apply img { bottom: 32px; left: 50%; width: 288px; height: auto; transform: translateX(-50%); }



/* 잡지 롤링 */
.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);}
}

.cont05-art .title-container {background-color: #2878A1; width: 100%; text-align: center; margin-top: -60px; color: #fff; font-weight: 700; padding: 40px 0; position: relative;}
.cont05-art .title-container::after {content: ''; background: url(../images/cont-05-titbg2-png.png) no-repeat  center bottom; display: block; width: 104px; height: 50px; position: absolute;  padding-top: 39px; left: calc(50% - 50px);}
.cont05-art .title-container div {font-size: 26px; padding: 0 20px;}




/* 내용 미리보기 */
.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; }

/* 내용 미리보기 롤링으로 교체 */
.slider-wrapper {
  width: 90%;
  position:relative;
  overflow:hidden;
  margin:0 auto;
  padding-top: 15px;
}
.slider-wrapper.ckdr  {
   width: 82%; 
}

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

.magazine-slider img {
  width: 100%;
  flex-shrink: 0;
  max-width: 100%;
  height: auto;
}

.dot-nav {
  display: flex;
  justify-content: center;
  /* gap: 10px; */
  margin-top: 16px;
}

.dot {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  margin: 0 4px;
  transition: all 0.3s ease; /* 부드럽게 변하게 */
}

.dot.active {
  width: 25px;    /* 가로 길게 */
  height: 10px;   /* 세로는 그대로 */
  background: #3F4D86;
  border-radius: 20px; /* pill 모양 */
}


/* 척척박사 내용 미리보기 */
.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(/event/2025/0601_NGK/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(/event/2025/0601_NGK/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; }


/*이달의 매거진 슬라이드*/
.this-month { position: relative; display: flex; padding: 60px 0; flex-direction: column; align-items: center; color: #2A2D38; text-align: center; font-size: 32px; font-weight: 400; line-height: 44px; gap: 16px; }
.this-month {font-size: 20px; line-height: 26px; font-weight: 500;}
.this-month .text {width: 90%; margin: 0 auto;}
.slider-container { width: 90%; overflow: hidden; margin: 0 auto; }
.slider-list { display: flex; padding: 0; margin: 0; list-style: none; transition: transform 0.5s ease-in-out; width: 100%; margin-left: 36px;}
.slider-list li img {width: 150px;}
.slider-item {height: auto; box-sizing: border-box; text-align: center; background-color: #fff; border-radius: 10px; margin-right: 10px; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: white; border: none; cursor: pointer; padding: 10px; font-size: 24px; z-index: 10; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; }
.prev-btn { left: 10;}
.prev-btn::before { content: ''; display: block; width: 10px; height: 10px; border-top: 2px solid white; border-left: 2px solid white; transform: rotate(-45deg); margin-left: 4px;}
.next-btn { right: 10;}
.next-btn::before { content: ''; display: block; width: 10px; height: 10px; border-top: 2px solid white; border-right: 2px solid white; transform: rotate(45deg); margin-left: -4px;}

.slider-item { min-width: 150px; margin-right: 25px; }
.slider-btn { top: 50%; transform: translateY(-50%); }

.slider-item img { filter: blur(2px); transition: filter 0.5s ease; }
.slider-item.active img { filter: none; }


/* 상품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:412px;
    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: 40px;
  height: 40px;
  cursor: pointer;
  transform: translateY(-50%);

    z-index: 99;
  }

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

.carousel_btn.prev {
  left: 30px;
}
.carousel_btn.prev::before {
  transform: rotate(-135deg); /* 왼쪽 화살표 */
}

.carousel_btn.next {
  right: 20px;
}
.carousel_btn.next::before {
  transform: rotate(45deg); /* 오른쪽 화살표 */
}


.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: -20px; }
  .next { right: -46px; }
.prev::before,
.next::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid #999;
  border-right: 3px solid #999;
  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;
}

}