@charset "UTF-8";

@import url(./base/reset.css);
@import url(./font.css);
@import url(./base/root.css);
@import url(./base/reboot.css);
@import url(./base/base.css);
@import url(./components.css);

.wrapper {position: relative; overflow-x: clip;}
img {display: block; max-width: 100%;}
.sec-kv, .sec-how, .sec-info {position: relative; overflow: hidden;}
.sec-book {position: relative;}
.sec-kv {background-color: var(--cream);}
.kv-paper {position: absolute; left: 0; top: 0; width: 100%; height: 1405rem;}
.kv-wordmark {position: absolute; left: 418rem; top: 415rem; width: 1084rem; height: auto;}
.kv-yellow {position: absolute; left: 0; top: 736rem; width: 100%; height: 1028rem;}
.kv-logo {position: absolute; left: 40rem; top: 30rem; width: 178.65rem; height: auto; z-index: 1;}
.kv-inner {position: relative; z-index: 1; padding: 89rem 0 80rem;}
.kv-inner img {display: block;}
.kv-lockup {width: 407.58rem; margin: 0 auto; height: auto;}
.kv-title {width: 662rem; margin: 30.21rem auto 0;}
.kv-title img {width: 100%; height: auto;}
.kv-object {position: relative; width: 907rem; margin: 38.5rem auto 0; translate: -2.5rem 0;}
.kv-object > img:first-child {width: 100%; height: auto;}
.kv-sparkle {position: absolute; left: 44.98%; top: -2.07%; width: 6.26%; height: auto;}
.kv-sub {width: 385rem; margin: -3rem auto 0; height: auto;}
.kv-info-box {width: var(--content-width); margin: 74.5rem auto 0;}
.sec-book {padding-bottom: 80rem; background-color: var(--cream);}
.book-dog {position: absolute; left: 1251rem; top: -213rem; width: 198rem; height: 257rem; z-index: 2;}
.book-watermark {position: absolute; left: 1090rem; top: 1482rem; width: 830rem; height: 787rem;}
.book-slope {position: absolute; left: 0; top: 1869rem; width: 100%; height: 401rem; overflow: hidden;}
.book-slope img {width: 100%; height: 3233rem;}
.book-slides {position: relative; z-index: 3; display: grid; margin-top: 90rem;}
.book-slides > .book-slide {grid-area: 1 / 1;}
.book-slide {padding: 86.33rem var(--card-pad-x) 60.02rem; opacity: 0; visibility: hidden; transform: translateX(60rem); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;}
.book-slide.is-active {opacity: 1; visibility: visible; transform: translateX(0);}
.book-slide_name {margin-top: 29.67rem;}
.book-slide_book {height: 958rem; max-width: none; margin: 67.96rem calc(8.75rem - var(--card-pad-x)) 0;}
.book-slide_feature {margin-top: 30.39rem;}
.book-slide_btn {display: flex; margin-top: 63.86rem;}
.sec-how {padding: 26.5rem 0 20.34rem; background-color: var(--brown-600);}
.how-dog {position: absolute; left: 149rem; top: 3005rem; width: 502rem; height: 561rem;}
.how-bottom {position: absolute; left: 0; bottom: 0; width: 100%; height: 151rem; background-color: var(--brown-800);}
.how-card {margin-top: 61.5rem; padding-top: 80rem;}
.how-step {position: relative; padding-inline: var(--card-pad-x); text-align: center;}
.how-step2 {margin-top: 108.73rem;}
.how-step_title {position: relative; z-index: 1; margin-top: 21.23rem;}
.how-step_desc {margin-top: 20.7rem;}
.how-step_marker {top: 116.82rem; width: 172.16rem;}
.how-step1 .how-step_marker {left: 432.63rem;}
.how-step2 .how-step_marker {left: 492.96rem;}
.how-books, .how-guide {margin-top: 50.21rem;}
.how-books {display: flex; justify-content: space-between;}
.how-btn {display: flex; margin-top: 62.02rem;}
.how-plus {position: absolute; left: 370rem; top: 1762rem; z-index: 2;}
.how-upgrade {position: relative; margin-top: 123rem; padding: 81.82rem var(--card-pad-x) 80rem; background-color: var(--yellow-light);}
.how-up-title {position: relative; z-index: 1;}
.how-up-marker {left: 212.02rem; top: 125.08rem;}
.how-buy1 {margin-top: 60.86rem;}
.how-buy2 {margin-top: 40rem;}
.buy-box_inner {display: flex; flex-direction: column; align-items: center; gap: 40rem; padding: 60rem 40rem 50rem;}
.buy-box_head {display: flex; flex-direction: column; align-items: center; gap: 20rem;}
.buy-box_titles {display: flex; flex-direction: column; align-items: center; gap: 15rem;}
.buy-box_cards {display: flex; justify-content: space-between; width: 100%;}
.sec-info {background-color: var(--brown-800);}
.info-title {padding-top: 86.83rem;}
.info-card {margin-top: 61.84rem; padding: 50rem var(--card-pad-x) 80rem;}
.info-card_prize {width: 408rem; height: auto; margin: 0 auto; translate: 19.92rem 0;}
.info-panel {display: flex; flex-direction: column; align-items: center; gap: 50rem; margin-top: 20rem; padding: 50rem 49rem 54rem; background-color: var(--white); border-radius: var(--radius-lg);}
.info-panel .info-list {width: 100%;}
.info-panel .btn {width: 600rem;}
.notice-area {margin-top: 100rem; padding: 55rem 0; background-color: var(--black);}
.book-slide_feature .feature-box_row:first-child .feature-box_num {width: 39rem; height: 41.32rem;}
.book-slide_feature .feature-box_row:last-child .feature-box_num {width: 42.19rem; height: 41rem;}
.buy-box_btn {width: 600rem;}
.book-slide_lead .title-img, .book-slide_name .title-img, .how-title .title-img, .how-step_title .title-img, .how-up-title .title-img, .info-title .title-img {margin: 0 auto;}

@media screen and (max-width: 1024px) {
  .kv-inner {padding: 90rem 0 60rem;}
  .kv-title {margin-top: 40rem;}
  .kv-object {width: var(--content-width); margin-top: 40rem; translate: 0;}
  .kv-sub {margin-top: 30rem;}
  .kv-info-box {margin-top: 60rem;}
  .kv-logo {left: 5%; top: 24rem; width: 150rem;}
  .kv-paper {height: 1150rem;}
  .kv-wordmark {left: 50%; translate: -50% 0; top: 421rem; width: 100%;}
  .kv-yellow {top: 860rem; height: 710rem;}
  .how-step_desc {white-space: nowrap;}
  .info-card {padding-inline: 24rem;}
  .info-panel {padding: 50rem 30rem;}
  .info-panel .info-list dt {width: 240rem;}
  .info-panel .info-list dd {min-width: 0;}
  .notice_list {gap: 6rem;}
  .notice_list li {padding-left: 20rem;}
  .book-slope img {height: 1468rem;}
  .book-dog, .book-watermark, .how-dog {display: none;}
}