@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', '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;}

/* 본문 바로가기 */
#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; }
.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; }

.mview { display: block; }
.pview { display: none; }
main { position: relative; }


.font-white { color: #FFF; }
.font-gray { color: #EBEBEB;} 
.font-brown { color: #746457;}

.font-heavy { font-family: 'GounBatang'; font-size: 36px; font-style: normal; font-weight: 400; line-height: 45px; letter-spacing: -2px; }
.font-h1 { font-family: 'GounBatang'; font-size: 24px; font-style: normal; font-weight: 400; line-height: 32px; letter-spacing: -2px; }
.font-h2 { font-family: 'GounBatang'; font-size: 22px; font-style: normal; font-weight: 400; line-height: 52px; letter-spacing: -1.5px; }
.font-h3 { font-family: 'GounBatang'; font-size: 20px; font-style: normal; font-weight: 400; line-height: 28px; letter-spacing: -1.5px; }
.font-h4 { font-family: 'GounBatang'; font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px; letter-spacing: -1px; }
.font-h5 { font-family: 'GounBatang'; font-size: 16px; font-style: normal; font-weight: 400; line-height: 23px; letter-spacing: -1px; }

.al-left { text-align: left; }
.al-center { text-align: center; }
.al-right { text-align: right; }

.main-event { padding-top: 58px; }

/* 비주얼 */
.visual { width: 100%; height: 670px; background: url(/event/2025/1201_NGK_calendar/images/visual-bg-01m.jpg) no-repeat 50% 100% #0D0E20; text-align: center; align-items: center; background-size: auto 670px; }
.visual .inner { width: 100%; margin: 0 auto; }
.visual .inner .collabo { padding: 37px 0 0 0; }
.visual .inner .collabo img { height: 20px; }
.visual .inner .year { padding: 30px 0 0 0; color: rgba(255,255,255,0.5) }
.visual .inner .title { padding: 24px 0 0 0;}
.visual .inner .sub-title { padding: 30px 0 0 0;}

/* 작가 소개 */
.photographer { display: flex; width: 100%; height: 560px; background: url(/event/2025/1201_NGK_calendar/images/visual-bg-02m.jpg) no-repeat 50% 0 #0D0D0D; text-align: center; background-size: auto 570px; }
.photographer .inner {  margin: 0 auto; }
.photographer .inner .content { display: flex; width: 100%; max-width: 382px; padding: 60px 24px 80px 24px; box-sizing: border-box; flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; }
.photographer .inner .content .brand-logo { width: 122px; height: auto; }

/* 사이즈 안내 */
.calendar-size { width: 100%; padding: 60px 0 60px; box-sizing: border-box; background: radial-gradient(46.35% 75.94% at 50% 24.06%, #3D265A 0%, #1C0F21 100%); }
.calendar-size .inner { width: 100%; margin: 0 auto; text-align: center; }
.calendar-size .inner .title-wrap { display: flex; width: 100%; padding: 0 24px 80px 24px; box-sizing: border-box; flex-direction: column; align-items: center; gap: 20px; background: url(/event/2025/1201_NGK_calendar/images/visual-bg-03.png) no-repeat 50% 100%; background-size: auto 60px; }
.calendar-size .inner .size { display: flex; margin: 24px 0 0 0; align-items: flex-start; justify-content: center; }
.calendar-size .inner .size img { width: 340px; }

/* 내지 미리보기 */
.calendar-privew { width: 100%; padding: 60px 0 60px; box-sizing: border-box; background: radial-gradient(37.46% 59.1% at 42.29% 8.22%, #827D75 0%, #696258 100%); }
.calendar-privew .inner { width: 100%; margin: 0 auto; text-align: center; }
.calendar-privew .inner .title-wrap { display: flex; width: 100%; flex-direction: column; align-items: center; gap: 20px;  }
.calendar-privew .inner .size { padding: 24px 0 12px 0; }
.calendar-privew .inner .size img { height: 30px; }
.calendar-privew .slider-container { position: relative; width: 360px; height: 231px; margin: 0 auto; }
.calendar-privew .slider-wrap { position: relative; width: 300px; height: 256px; overflow: hidden; margin: 0 auto; }
.calendar-privew .horizontal-list { display: flex; flex-direction: row; margin: 0; padding: 0; list-style: none; transition: transform 0.5s ease-in-out; }
.calendar-privew .slider-status { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.6); color: #fff; padding: 6px 16px; border-radius: 999px; font-size: 14px; }
.calendar-privew .slider-dots { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.calendar-privew .slider-dots button { width: 12px; height: 12px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; }
.calendar-privew .slider-dots button.active { background: #fff; }
.calendar-privew .slide-item img { width: 300px; height: 216px; display: block; border-radius: 4px; }
.calendar-privew .slider-container .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; color: #fff; border: none; cursor: pointer; font-size: 22px; font-weight: bold; }
.calendar-privew .slider-container .nav-prev { font-size: 0; background-image: url(/event/2025/1201_NGK_calendar/images/btn-arrow-left.svg); background-size: 36px 36px; left: 10px; }
.calendar-privew .slider-container .nav-next { font-size: 0; background-image: url(/event/2025/1201_NGK_calendar/images/btn-arrow-right.svg); background-size: 36px 36px; right: 10px; }
.calendar-privew .calendar-shadow { position: absolute; bottom:0; left: 50%; transform: translateX(-50%); width: 300px; height: 15px; background: url(/event/2025/1201_NGK_calendar/images/calendar-preview-shadow.png) no-repeat 0 0; background-size: 300px 15px; display: block; content:''; }

/* 내지 설명 */
.calendar-description { width: 100%; padding: 60px 0 60px; box-sizing: border-box; background: #8B8885; }
.calendar-description .inner { width: 100%; margin: 0 auto; text-align: center; }
.calendar-description .inner .title-wrap { display: flex; width: 360px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; flex-direction: column; align-items: center; gap: 20px; }
.calendar-description .inner .size { display: flex; margin: 32px 0 0 0; align-items: flex-start; justify-content: center; }
.calendar-description .inner .size img { width: 340px; }

/* 활용 */
.calendar-use { width: 100%; height: 539px; padding: 60px 0 60px; box-sizing: border-box; background: url(/event/2025/1201_NGK_calendar/images/visual-bg-04m.jpg?v2) no-repeat 50% 100% #EBE5D9; background-size: auto 539px;}
.calendar-use .inner { width: 100%; margin: 0 auto; text-align: center; }
.calendar-use .inner .title-wrap { display: flex; width: 100%; padding: 0 24px; box-sizing: border-box; flex-direction: column; align-items: center; gap: 20px; }

/* 가치소비 */
.calendar-value { position: relative; width: 100%; height: 640px; padding: 60px 0 100px; box-sizing: border-box; background: url(/event/2025/1201_NGK_calendar/images/visual-bg-05m.jpg) no-repeat 50% 0 #4A5760;  background-size: auto 692px; }
.calendar-value .inner { width: 340px; margin: 0 auto; text-align: center; }
.calendar-value .inner .title-wrap { display: flex; width: 340px; flex-direction: column; align-items: center; gap: 24px; }
.calendar-value .inner .size { border-radius: 999px; background: rgba(255,255,255,0.1); }
.calendar-value .inner .size img { width: 308px; }
.calendar-value .brand-logo { position: absolute; left: 50%; bottom: 40px; display: inline-block; width: 94px; height: auto; margin-left: -47px; }
.calendar-value .value-title { padding: 8px 0 8px 0; }

/* 구매하기 */
.fixed-container { position: fixed; width: 334px; bottom: 76px; left: 50%; margin-left: -167px; z-index: 10; }
.fixed-inner { display: flex; width: 100%; justify-content: center; }

.fixed-inner .btn-buy { display: inline-flex; padding: 0; flex-shrink: 0; border-radius: 999px; background: radial-gradient(177.52% 162.04% at 43.55% -60.36%, rgba(160, 164, 246, 0.80) 0%, rgba(88, 94, 195, 0.80) 49.52%, rgba(38, 43, 134, 0.80) 99.52%); box-shadow: 5px 5px 20px 0 rgba(255, 255, 255, 0.10) inset, -1px -1px 0 0 rgba(0, 0, 0, 0.35) inset, 1px 1px 0 0 rgba(255, 255, 255, 0.15) inset, 0 12px 20px 0 rgba(0, 0, 0, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.25); backdrop-filter: blur(7.5px); }
.fixed-inner .btn-buy img { height: 80px; }


/* 일러두기 */
.notice-container { width: 100%; height: auto; margin: 0 auto; background: #F9FAFB; text-align: center; background-size: cover; font-family: 'Paperlogy', sans-serif; }
.notice-section { width: 360px; margin: 0 auto; padding: 60px 0 220px; box-sizing: border-box; text-align: left; }
.notice-section .text-wrap, .section-10 .size-small { font-family: 'Paperlogy', sans-serif; padding: 0 24px 0; font-size: 20px; line-height: 28px; font-weight: 600; text-align: left !important; }

.item-unit .title { padding: 6px 0; font-size: 17px; line-height: 23px; font-family: 'Paperlogy', sans-serif; font-weight: 500; letter-spacing: -0.5px; color: #1D1D1D; text-align: left; }
.item-unit { margin: 0 auto; padding: 20px 20px 0; box-sizing: border-box; }
.item-unit ul { text-align: left; }
.item-unit ul li { padding: 0 0 0 24px; font-size: 15px; line-height: 22px; color: #666; font-weight: 400; text-align: left; background: url(/event/2025/1201_NGK_calendar/images/li_dot.svg) no-repeat 12px 8px; background-size: 4px 4px; }
.item-unit ul li + li { margin: 5px 0 0; }
.item-unit ul li.star { padding: 8px 0 0 24px; background: url(/event/2025/1201_NGK_calendar/images/li_star.svg) no-repeat 12px 16px; background-size: 8px 8px; }
.notice-section .btn { display: inline-block; padding: 0 12px; vertical-align: top; text-align: center; border-radius: 4px; background-color: #E4E4E4; }
.notice-section .btn span {font-size: 14px; line-height: 26px; font-family: 'Paperlogy', sans-serif; font-weight: 500; letter-spacing: -0.5px; color: #1D1D1D; }
.notice-section .btn.mg-left { margin-left: 12px; }
.notice-section .btn.size-small {}
.notice-section .btn.kakao { padding-left: 34px; background: url(/event/2025/1201_NGK_calendar/images/kakao_icon.svg) no-repeat 10px 2px #FAE100; }