@charset "utf-8";

/* CSS Document */
html,
body {
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

/** scrollBox **/
#scrollBox {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#scrollBox .wrap {
    width: 3000px;
    height: 4285.5px;
    left: 0;
    top: 0;
    position: relative;
    overflow: hidden;
    background: url("../img/cover_wb.png") no-repeat left top;
    background-size: cover;
    /*큰 이미지 = 전체 이미지 배경 */
}

#scrollBox .wrap>div {
    position: absolute;
}

#scrollBox .wrap>.scene {
    height: 276px;
    pointer-events: none;
}

#scrollBox .wrap>#scrollBg {
    width: 3000px;
    height: 4285.5px;
    background: url("../img/cover_num.png") no-repeat left top;
    background-size: cover;
    /* opacity: 1; */
}

#scrollBox .wrap>#bg {
    width: 3000px;
    height: 4285.5px;
    background: url("../img/cover.png") no-repeat left top;
    background-size: cover;
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 2s ease;
    cursor: url(../img/cursor/cursor-open.png) 10 15, auto;
}


/*  */
#scrollBg {
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1s ease;
    left: 0;
    top: 0;
    cursor: url(../img/cursor/cursor-open.png) 10 15, auto;
}

.scene:hover {
    cursor: url(../img/cursor/cursor-pointer.png) 10 15, auto;
}

/*** Scene1 ***/
#scene1 {
    width: 320px;
    position: absolute;
    right: 1345px;
    top: 2200px;
}

/*** Scene2 ***/
#scene2 {
    width: 363px;
    position: absolute;
    right: 135px;
    top: 1295px;
}

/*** Scene3 ***/
#scene3 {
    width: 470px;
    position: absolute;
    left: 915px;
    top: 1640px;
}

/*** Scene4 ***/
#scene4 {
    width: 395px;
    position: absolute;
    right: 365px;
    top: 655px;
}

/*** Scene5 ***/
#scene5 {
    width: 360px;
    position: absolute;
    right: 295px;
    bottom: 825px;
}

/*** Scene6 ***/
#scene6 {
    width: 320px;
    position: absolute;
    left: 1295px;
    top: 1045px;
}

/*** Scene7 ***/
#scene7 {
    width: 460px;
    position: absolute;
    left: 140px;
    bottom: 865px;
}

/*** Scene8 ***/
#scene8 {
    width: 450px;
    position: absolute;
    left: 196px;
    bottom: 1730px;
}


/*** Scene9 ***/
#scene9 {
    width: 363px;
    position: absolute;
    left: 1365px;
    top: 185px;
}

/*** Scene10 ***/
#scene10 {
    width: 320px;
    position: absolute;
    right: 405px;
    bottom: 1595px;
}

/*** Scene11 ***/
#scene11 {
    width: 525px;
    position: absolute;
    left: 1308px;
    bottom: 265px;
}

/*** Scene12 ***/
#scene12 {
    width: 540px;
    position: absolute;
    left: 145px;
    top: 745px;
}

#bgBtn {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 65px;
    font-size: 40px;
    right: 50px;
    top: 50px;
    color: black;
    background: white;
    border-radius: 100%;
    display: none;
}

.pnBtn {
    width: 210px;
    height: 90px;
    border-radius: 45px;
    font-size: 30px;
    font-weight: bold;
    position: fixed;
    bottom: 30px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url(../img/cursor/cursor-pointer.png) 10 15, auto;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.pnBtnAfter {
    width: 210px;
    height: 90px;
    border-radius: 45px;
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    bottom: 0px;
    color: #fff;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.5s ease, right 0.5s ease;
    pointer-events: none;
}

.pnBtn p {
    margin: 0;
}

.open-button-bg {
    width: 400px;
    height: 90px;
    /* background-color: #ffeb35; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    position: fixed;
    left: calc(50% - 200px);
    bottom: 3%;
    border-radius: 45px;
    pointer-events: none;
}

.open-button-bg #about {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
    background-color: #fed62c;
    border-top-left-radius: 45px;
    border-bottom-left-radius: 45px;
    cursor: url(../img/cursor/cursor-pointer.png) 10 15, auto;
}

.open-button-bg #about:hover {
    color: #fff;
    background-color: #d1ae15;
}

.open-button-bg #buy {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 100%;
    font-size: 20px;
    cursor: url(../img/cursor/cursor-pointer.png) 10 15, auto;
    background-color: #fed62c;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
}

.open-button-bg #buy:hover {
    color: #fff;
    background-color: #d1ae15;
}

.open-button-bg p {
    margin: 0;
}

.open-button {
    width: 120px;
    height: 120px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 45px;
    font-weight: 700;
    position: fixed;
    left: calc(50% - 60px);
    bottom: 1.7%;
    color: #fff;
    cursor: url(../img/cursor/cursor-pointer.png) 10 15, auto;
    border-radius: 100%;
    pointer-events: none;
}

.open-button p {
    margin: 0;
    cursor: url(../img/cursor/cursor-pointer.png) 10 15, auto;
}

/* 챕터리스트 */
.chapterList {
    width: 100vw;
    height: 100vh;
    /* background-color: #222324; */
    background-image: url(../img/chapterBg/6.jpeg);
    background-position: center;
    position: fixed;
    left: 0;
    top: 0;
    /* clip-path: circle(72.0% at 50% 50%); */
    clip-path: circle(0.0% at 50% 93%);
    transition: clip-path 1s ease;
}

.chapterList p {
    color: #fff;
}

.chapterList h1 {
    color: #fff;
}

.chapterBox {
    width: 730px;
    margin: 0 auto 100px;
    height: 784px;
    bottom: -150%;
    padding: 50px;
    position: fixed;
    left: calc(50% - 365px);
    clip-path: polygon(0% 15%, 0 0, 15% 0%, 85% 0%, 95% 5%, 100% 15%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 5% 94%, 0% 85%);
    /* clip-path: polygon(0% 15%, 0 0, 15% 0%, 85% 0%, 95% 5%, 100% 15%, 100% 61%, 100% 75%, 76% 75%, 16% 75%, 5% 70%, 0 60%); */
    background-image: url(../img/chapterBg/1.jpg);
    transition: bottom 1.5s ease;
}

.about {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 999;
    width: 100vw;
    height: 300vw;
    overflow: hidden;
    /* clip-path: circle(70.7% at 50% 50%); */
    clip-path: circle(0.0% at 50% 0);
    transition: clip-path 3s ease;
}

.about p,
h1,
h2 {
    margin: 0;
    padding: 0;
}

.about .section {
    width: 100vw;
    height: 100vw;
    background: #fff;
    display: flex;
    justify-content: space-between;
    /* background-color: #9fb4ac; */
    margin: 0;
    text-align: left;
    padding: 5% 10%;
    position: relative;
}

.section #book {
    width: 80%;
    text-align: center;
    transition: left 0.3s ease;
}

.section h1 {
    font-size: 120px;
    font-weight: 700;
    letter-spacing: -6px;
    margin-bottom: 70px;
    line-height: 100px;
}

.section h3 {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 50px;
}

.section h4 {
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -2px;
    margin-bottom: 50px;
}

.section h5 {
    font-size: 40px;
    font-weight: 700;
}

.section p {
    font-size: 35px;
    margin-bottom: 25px;
}

.sectionTop p {
    font-size: 40px;
    margin-bottom: 30px;
}

.sectionTop img {
    width: 25%;
}

.aboutBottom {
    width: 100vw;
    height: 70vw;
    background-image: url(../img/about-bottom.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding-top: 8%;
}

.about .menu__item {
    margin-right: 0;
}

.aboutBottom .top {
    margin-bottom: 8%;
}

.about .aboutBottom h1 {
    font-size: 350px;
    font-weight: 900;
}

.about .aboutBottom h2 {
    font-size: 200px;
    font-weight: 900;
}

.about .aboutBottom p {
    font-size: 40px;
    font-weight: 700;
}

.aboutBottom .bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* height: 20%; */
}

.underLine {
    text-decoration: underline;
}

.bold {
    font-weight: bold;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.pageInfo {
    font-family: 'GmarketSansMedium';
    width: 1000px;
    margin: 0 auto 100px;
    height: 700px;
    bottom: -150%;
    /* bottom: 10%; */
    padding: 50px;
    position: fixed;
    left: calc(50% - 450px);
    /* background: red; */
    background-image: url(../img/pageInfo.png);
    background-size: cover;
    transition: bottom 1.5s ease;
    text-align: left;
}

.chapterCloseBtn {
    position: fixed;
    right: -10%;
    top: 5%;
    color: #fff;
    transition: right 1s ease, color 1s ease;
}

.seachAnimationDiv {
    width: 150px;
    height: 150px;
    position: absolute;
    border-radius: 100%;
    background-color: #fff;
    clip-path: circle(0.0% at 50% 50%);
    transition: clip-path 1s ease;
    pointer-events: none;
}


.firstBtn {
    width: 180px;
    height: 180px;
    background-color: #fed62c;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    cursor: url(../img/cursor/cursor-pointer.png) 10 15, auto;
    border-radius: 100%;
    transition: width 1s ease, height 1s ease;
}

.firstBtn:hover {
    width: 250px;
    height: 250px;
}

.firstBtn p {
    line-height: 35px;
    color: #000;
    font-size: 70px;
    font-weight: 700;
    transition: margin 1s ease, opacity 1.5s ease;
    pointer-events: none;
}

#circleAnimation {
    width: 500px;
    height: 500px;
    position: absolute;
    left: 49%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-15deg);
    display: none;
}