@charset "UTF-8";

* {font-family: 'pretendard', 'Noto Sans KR', sans-serif !important;}
body, input, a, button, textarea, select {font-family: 'pretendard', 'Noto Sans KR', sans-serif !important;}
p,strong,span{font-family:"pretendard";font-weight: 400;}
.event__contents {position: relative; margin: 0 auto; padding:80px 16px; max-width: 375px; text-align: center;color: #333; box-sizing: border-box;}
div > img{width: 100%;height: 100%;vertical-align: top;}
.product__radio + label::before {width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='2.5' y='2.5' width='15' height='15' stroke='%23E1E1E1'/%3E%3C/svg%3E");}
.product__radio:checked + label::before{width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='16' height='16' fill='%23222222'/%3E%3Cpath d='M6 8.61235L9 12.4219L14 6.42188' stroke='white'/%3E%3C/svg%3E%0A");}

.sold-out{display: none; position: absolute; width: 200px;height: 200px; right: 55px; bottom: -25px; transform:translateX(-50%);}
.step-title-wrap .wrap {padding: 80px 0 40px;}
.step-title-wrap .step-title {text-align: center;font-size: 40px;font-weight: 700;line-height: 48px;letter-spacing: -0.48px;}
.step-title-wrap .step-sub-title {margin-bottom: 10px;text-align: center;font-size: 16px;font-weight: 400;line-height: 140%;letter-spacing: -0.16px;}
.step-title-wrap .tag-new {margin: 0 auto 20px; display: block; width: 52px; height: 52px; border-radius: 50%; background-color: #000; color: #FFF; text-align: center; line-height: 52px; font-size: 13px; font-weight: 600; letter-spacing: -0.13px;}

.product_title_wrap {margin-bottom: 20px;}
.product_title_wrap h5 {text-align: left; font-size: 20px;font-weight: 600;line-height: 28px;letter-spacing: -0.2px;}
.product__area {border-top: 1px solid #222;}
.product__item {padding: 20px 0; text-align: left;}
.product__item:not(:last-child) {border-bottom: 1px solid #D4D4D4;}
.product__item label{position: relative;display: block; padding-left: 26px;font-size: 16px;font-weight: 400;line-height: 22px;letter-spacing: -0.16px;}
.product__item p {padding-top: 10px; padding-left: 26px; color: #767676;font-size: 14px;font-weight: 600;line-height: 20px;letter-spacing: -0.14px;}

.btn__area {}
.btn__area .buy-btn {width: 100%; height: 54px;font-size: 15px;font-weight: 600;line-height: 135%;letter-spacing: -1px;border-radius: 3px;}
.btn__area .download-btn {width: 100%; height: 54px;font-size: 20px;font-weight: 600;letter-spacing: -0.2px;border-radius: 3px; color: #FFF; border: none; background-color: #FF006A;}

.visual{background: #FFBBC6;}
.visual .event-top {position:relative}
.visual .main-book{width: 200px; position: absolute; right: 0; bottom: 0; z-index: 1;}
.visual .main-text {width: 280px; position: absolute; left: 0; bottom: 50px; z-index: 2;}
.visual .event-top p {padding-bottom: 360px; text-align: center; font-size: 14px; line-height: 140%; font-weight: 400;}
.visual .event-top p strong {font-weight: 700;}
.visual .event-bottom {position: relative; margin-top: 106px; gap: 40px; display: flex; flex-direction: column; align-items: center; border-top: 1px solid #000;}
.visual .event-bottom .lavel {margin-top: -26px; width: 90px; padding: 20px; text-align: center; font-size: 16px; line-height: 11px; font-weight: 600; letter-spacing: 9.6px; color: #FFF; border-radius: 100px; background-color: #000;}
.visual .event-bottom .info-book {display: flex; width: 180px; box-shadow: 12px 12px 26px 0 rgba(0, 0, 0, 0.02);}
.visual .event-bottom p {font-size: 20px; line-height: 28px; font-weight: 400; letter-spacing: 4.6px;}
.visual .event-bottom h4 {margin-top: 20px; text-align: center; font-size: 30px; line-height: 39px; font-weight: 400; letter-spacing: -0.3px;}
.visual .event-bottom h4 strong {font-weight: 700;}
.visual .event-bottom .event-book-info {display: flex; flex-direction: column; align-items: center; gap:40px;}
.visual .event-bottom .event-book-info dl {}
.visual .event-bottom .event-book-info dl dt {font-size: 20px; line-height: 1; font-weight: 400; letter-spacing: -0.2px;}
.visual .event-bottom .event-book-info dl dt:not(:first-child) {margin-top: 20px;}
.visual .event-bottom .event-book-info dl dd {margin-top: 10px; font-size: 16px; line-height: 1; font-weight: 400; letter-spacing: -0.16px; color: #555;}
.visual .event-bottom .btn__area {display: flex; flex-direction: column; align-items: center; gap: 20px;}
.visual .event-bottom .btn__area p {font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.5px; color: #888; text-align: left;}

.step--02 {background-color: #F5F5F5;}
.step--02 .step-title-wrap {background: #C3BCA7;}
.step--02 .event__contents {padding: 40px 16px 80px; display: flex; flex-direction: column; align-items: center; gap: 40px;}
.step--02 .book-info {display: flex; flex-direction: column; align-items: center; gap: 24px;}
.step--02 .book-info .book-info-title span {margin: 0 auto; display: flex; width: fit-content; height: 42px; padding: 0 15px; background-color: #C3BCA7; border-radius: 100px; font-size: 18px; line-height: 42px; font-weight: 600; letter-spacing: -0.18px;}
.step--02 .book-info .book-info-title p {margin-top: 12px; text-align: center; font-size: 16px; line-height: 21px; font-weight: 400; letter-spacing: -0.16px;}
.step--02 .book-info ul {display: flex; gap: 20px;}
.step--02 .book-info ul li {width: 143px; text-align: left;}
.step--02 .book-info ul li .book-img {display: flex; box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.1);}
.step--02 .book-info ul li h5 {margin-top: 12px; font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: -1px;}
.step--02 .book-info ul li p {margin-top: 2px; font-size: 16px; line-height: 22px; font-weight: 400; letter-spacing: -1px; color: #9F9F9F;}
.step--02 .notice {text-align: left; font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.5px; color: #9F9F9F;}

.step--03 .step-title-wrap {background: #FFBBC6 ;}
.step--03 .event__contents {padding: 40px 16px 80px; }

.step--04 {background: #000; color: #FFF; text-align: center;}
.step--04 .event__contents { display: flex; flex-direction: column; align-items: center;}
.step--04 .event__contents p {font-size: 20px; line-height: 140%; font-weight: 300; letter-spacing: -0.2px; color: #FFF;}
.step--04 .event__contents p .bold {font-weight: 700; color: #FFBBC6;}
.step--04 .event__contents p .underline {text-decoration: underline; text-underline-offset: 6px; color: #FFBBC6;}
.step--04 .event__contents > span {margin-top: 40px; font-size: 20px; line-height: 26px; font-weight: 400; letter-spacing: -0.2px; color: #FFF;}
.step--04 .event__contents h4 {margin-top: 10px; font-size: 40px; line-height: 52px; font-weight: 800; letter-spacing: -0.4px; color: #FFF;}