@charset "UTF-8";

*,html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {font-family: 'pretendard', 'Noto Sans KR', sans-serif; color: #111; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto;}
body, input, a, button, textarea, select {font-family: 'pretendard', 'Noto Sans KR', sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:auto;}
p,strong,span{font-family:"pretendard";font-weight: 400;}
div > img{width: 100%;height: 100%;vertical-align: top;}
.product__radio + label::before {top: 3px; 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");}

.main-content-wrap {padding: 80px 20px; box-sizing: border-box;}
.event__contents{position: relative; margin: 0 auto; max-width: 375px;}
.step-title-wrap {}
.step-title-wrap .wrap {display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 375px; margin: 0 auto; padding: 0 0 32px 0; box-sizing: border-box;}
/* .step-title-wrap:first-child .wrap {padding: 160px 0 32px;} */
.step-title-wrap .step-title {font-size: 28px;font-weight: 300;line-height: 140%;letter-spacing: -0.5px;}
.step-title-wrap .step-sub-title {font-size: 16px;font-weight: 400;line-height: 160%;letter-spacing: -0.5px; color: #666;}

.btn__area {}
.btn__area .buy-btn {width: 100%; height: 69px;font-size: 18px;font-weight: 400;line-height: 160%;letter-spacing: -0.5px;border-radius: 2px;}

.title_tab li { cursor: pointer; }
.title_tab_fst { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; border-left: 1px solid #C9CBCE; }
.title_tab_fst li {width: 100%; background-color: #F5F5F5; font-size: 16px; letter-spacing: -1px; border: 1px solid #C9CBCE; border-left: none;font-weight: 400;line-height: 66px;letter-spacing: -0.5px;text-align: center;}
.title_tab_fst li.active { background: #FFF; border-bottom: #FFF; }
.tab-wrap .cont {display: none;}
.tab-wrap .cont.active {display: block;}

.visual{overflow: hidden; background: url("../img/main-bg.png") center no-repeat; background-size: cover;}
.visual .event__contents {position:relative; }
.visual .main-book{margin: -5px auto -32px 20px;}
.visual .main-book img {width: 340px;}
.visual .main-text {width: 263px;}
.visual .event_txt {display: flex; flex-direction: column; align-items: center; gap: 15px;}
.visual .event_txt span {font-size: 20px; line-height: 160%; font-weight: 400;}
.visual .event_txt p {font-size: 16px; line-height: 140%; font-weight: 300; letter-spacing: -0.5px;}

.step--01 {padding: 40px 20px 80px;}
.step--01 .book-info ul {}
.step--01 .book-info ul li {display: flex; flex-direction: column; gap: 40px;}
.step--01 .book-info .book-img {flex: 1;}
.step--01 .book-info .book-info-con {flex: 1;}
.step--01 .book-info .section-title {margin-bottom: 40px; font-size: 28px;font-weight: 300;line-height: 160%;letter-spacing: -0.5px;}
.step--01 .book-info .book-info-txt {padding: 40px 0; border-top: 1px solid #DEE3E8;}
.step--01 .book-info .book-info-txt:last-child {border-bottom: 1px solid #DEE3E8;}
.step--01 .book-info .book-info-txt span {font-weight: 400;font-size: 20px;line-height: 160%;letter-spacing: -0.5px;}
.step--01 .book-info .book-info-txt p {margin-top: 8px; font-weight: 400;font-size: 16px;line-height: 180%;letter-spacing: -0.5px; color: #7D7D7D;}

.step--02 {}
.step--02 .step-title-wrap .wrap {border-bottom: 1px solid #DEE3E8;}
.step--02 .book-info {padding: 80px 0;}
.step--02 .book-info:last-child {padding: 80px 0 0;}
.step--02 .section-title {margin-bottom: 20px; font-size: 24px;font-weight: 400;line-height: 160%;letter-spacing: -0.5px;}
.step--02 .section-sub-title {margin-bottom: 20px; font-size: 20px;font-weight: 400;line-height: 160%;letter-spacing: -0.5px;}
.step--02 .book-info ul {display: flex; flex-direction: column; gap: 80px;}
.step--02 .book-info ul li {display: flex; flex-direction: column; gap: 40px;}
.step--02 .book-info .book-img {flex: 1;}
.step--02 .book-info .book-info-con {width: 100%;}
.step--02 .book-info .book-info-con p {font-weight: 400;font-size: 16px;line-height: 180%; color: #7D7D7D;}
.step--02 .book-info .book-info-title {margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #DEE3E8;}
.step--02 .book-info .book-info-title span {font-weight: 400;font-size: 20px;line-height: 160%;letter-spacing: -0.5px;}
.step--02 .book-info .book-info-title p {margin-top: 8px;}
.step--02 .book-info .book-info-txt {display: flex; flex-direction: column; gap: 16px;}
.step--02 .book-info .book-included {margin-top: 80px;}
.step--02 .book-info .book-included thead {}
.step--02 .book-info .book-included thead th {padding: 8px 10px; background-color: #919DA4; color: #FFF; font-size: 16px; line-height: 140%; font-weight: 400;}
.step--02 .book-info .book-included tbody {}
.step--02 .book-info .book-included tbody td {padding: 20px 12px; border-bottom: 1px solid #DEE3E8;font-weight: 400;font-size: 16px;line-height: 160%;letter-spacing: -0.5px; border-left: 1px solid #DEE3E8;}
.step--02 .book-info .book-included tbody td:first-child {padding: 20px 0; text-align: center; border-left: none;}
.step--02 .book-info .book-included tbody ul {gap: 16px;}
.step--02 .book-info .book-included tbody li {position: relative; padding-left: 16px;}
.step--02 .book-info .book-included tbody li::before {position: absolute; left: 2px; top: 13px;  display: block; content: ''; width: 3px; height: 3px; border-radius: 50%; background-color:  #111;}
.step--02 .book-info .book-included tbody p {margin-top: 16px; font-weight: 400;font-size: 16px;line-height: 160%;letter-spacing: -0.5px;}

.step--03 {padding: 80px 20px 160px;}
.step--03 .step-title-wrap:not(:first-child) {margin-top: 160px;}
.step--03 .step-title-wrap:not(:first-child) .wrap {padding: 32px 24px; background-color: #919DA4;}
.step--03 .step-title-wrap:not(:first-child) .step-title {color: #FFF;} 
.step--03 .step-title-wrap:not(:first-child) .step-sub-title {color: #FFF;} 
.step--03 .review-wrap {display: flex; flex-direction: column; gap: 16px;}
.step--03 .review-wrap li {padding: 40px 24px; display: flex; justify-content: space-between; background-color: #F5F5F5;}
.step--03 .review-wrap .review-box {min-width: 100%; display: flex; flex-direction: column; gap:16px;}
.step--03 .review-wrap .review-top {display: flex; align-items: center;}
.step--03 .review-wrap .review-top img {width: 40px; height: 40px; margin-right: 16px;}
.step--03 .review-wrap .review-top p {flex: 1; display: flex; flex-wrap: wrap;}
.step--03 .review-wrap .review-top span {font-weight: 400;font-size: 16px;line-height: 180%;letter-spacing: -0.5px; color: #666;}
.step--03 .review-wrap .review-top span:last-child {position: relative;margin-left: 8px; padding-left: 8px;}
.step--03 .review-wrap .review-top span:last-child::before {margin-top: -1px; position: absolute;left: 0; top: 50%;  display: block; content: ''; width: 2px; height: 2px; border-radius: 50%; background-color:  #666;}
.step--03 .review-wrap .review-title {font-weight: 400;font-size: 20px;line-height: 160%;letter-spacing: -0.5px;}
.step--03 .review-wrap .review-con {font-weight: 400;font-size: 16px;line-height: 180%;letter-spacing: -0.5px; color: #7D7D7D;}
.step--03 .tab-wrap {margin-top: 16px;}
.step--03 .tab-doc-group li {flex-direction: column; min-height: 66px; border-color: #C9CBCE;}
.step--03 .product__area {padding: 32px 0; border-bottom: 1px solid #DEE3E8;}
.step--03 .product__item {display: flex; justify-content: space-between; align-items: center;}
.step--03 .product__item:not(:first-child) {margin-top: 16px;}
.step--03 .product__item label{position: relative;padding-left: 26px;font-size: 16px;font-weight: 400;line-height: 180%;letter-spacing: -0.5px;}
.step--03 .product__item div {display: flex; gap: 8px;}
.step--03 .product__item span {color: #999;font-size: 16px;font-weight: 400;line-height: 180%;letter-spacing: -0.5px;}
.step--03 .product__item .prev-price {color: #999; text-decoration: line-through;}
.step--03 .product__item .price {color: #111;}
.step--03 .price__area {padding: 48px 0; display: flex; justify-content: space-between; align-items: flex-end;}
.step--03 .price__area p {font-weight: 600;font-size: 18px;line-height: 160%;letter-spacing: -0.5px; color: #666666;}
.step--03 .price__area span {font-weight: 600;font-size: 24px;line-height: 160%;letter-spacing: -0.5px;}
.step--03 .product__benefit {padding: 32px 0; display: flex; gap: 16px; font-weight: 400;font-size: 18px;line-height: 180%;letter-spacing: -0.5px; border-bottom: 1px solid #DEE3E8;}
.step--03 .product__benefit p {width: 72px; color: #666;}
.step--03 .product__benefit span {}

.step--04 {background: #000; }
.step--04 .step-title-wrap .wrap {padding: 80px 0; gap: 10px;}
.step--04 .step-title-wrap .step-sub-title,
.step--04 .step-title-wrap .step-title { color: #FFF; text-align: center;}
.step--04 .step-title-wrap .step-sub-title {font-size: 20px; font-weight: 400; line-height: 160%; letter-spacing: 0.5px;}
.step--04 .step-title-wrap .step-title {font-size: 40px; font-weight: 700; line-height: 120%; letter-spacing: 0.5px;}