@charset "UTF-8";

.desktop {
    display: block;
}

.mobile {
    display: none;
}

.viewport {
    display: none;
}

.menu {
    display: flex;
}

.btn0 {
    height: 130px;
    width: 130px;
    display: block;
    font-size: 0;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0 30px;
}

.btn {
    height: 95px;
    width: 95px;
    display: block;
    font-size: 0;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: 0 10px;
}

.btn1 {
    background-image: url(../images/btn1.svg);
}

.btn2 {
    background-image: url(../images/btn2.svg);
}

.btn3 {
    background-image: url(../images/btn3.svg);
}

.btn4 {
    background-image: url(../images/btn4.svg);
}

.btn5 {
    background-image: url(../images/btn5.png);
}

.btn6 {
    background-image: url(../images/btn6.png);
}

.btn7 {
    background-image: url(../images/btn7.png);
}

.btn8 {
    background-image: url(../images/btn8.png);
}

.book {
    width: 1280px;
    margin: 0 auto;
    position: relative;
}

.book1_bg {
    background: #e7c3c0;
    min-height: 100vh;
}

.book2_bg {
    background: #b2e0f8;
    min-height: 100vh;
}

.book3_bg {
    background: #b9d06a;
    min-height: 100vh;
}

.book4_bg {
    background: #fcd475;
    min-height: 100vh;
}

.book5_bg {
    background: #ecf5da;
    min-height: 100vh;
}

.book6_bg {
    background: #8ec7bd;
    min-height: 100vh;
}

.book7_bg {
    background: #000000;
    min-height: 100vh;
}

.menu1 {
    position: absolute;
    justify-content: flex-end;
    width: 99%;
    margin-top: 30%;
}

.menu2 {
    position: absolute;
    justify-content: space-between;
    width: 92%;
    margin-top: 29%;
    left: 50%;
    transform: translateX(-50%);
}

.menu3 {
    position: absolute;
    justify-content: center;
    width: 92%;
    margin-top: 32%;
    left: 50%;
    transform: translateX(-50%);
}

.menu4 {
    position: absolute;
    justify-content: flex-end;
    width: 92%;
    margin-top: 27%;
    left: 50%;
    transform: translateX(-50%);
}

.menu5 {
    position: absolute;
    justify-content: flex-end;
    width: 92%;
    margin-top: 22%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.menu6 {
    position: absolute;
    justify-content: flex-end;
    width: 96%;
    margin-top: 21%;
}

.menu7 {
    position: absolute;
    justify-content: flex-end;
    width: 96%;
    margin-top: 30%;
}

.menu2 .btn {
    margin: 0 15px;
}

.menu2>div {
    width: 100%;
    display: flex;
}

.menu2 .left {
    justify-content: flex-start;
}

.menu2 .right {
    justify-content: flex-end;
}

.link {
    position: absolute;
    z-index: 1;
}

.link img {
    display: block;
    width: 100%;
}

.link1 {
    bottom: 1.5%;
    right: 20px;
}

.link2 {
    bottom: 3.5%;
    right: 20px;
}

.link3 {
    bottom: 3.5%;
    right: 50px;
}

.link4 {
    width: 250px;
    bottom: 2%;
    right: 40px;
}

.link5 {
    width: 200px;
    bottom: 1.5%;
    right: 21px;
}

.link6 {
    width: 250px;
    bottom: 5%;
    right: 300px;
}

.link7 {
    width: 250px;
    bottom: 20%;
    right: 105px;
}

@media (max-width: 1280px) {

    .book {
        width: 1160px;
        margin: 0 auto;
        position: relative;
    }

    .menu1 .btn {
        height: 86px;
        width: 86px;
    }

    .link1 {
        bottom: 1.8%;
        width: 200px;
    }
}

@media (max-width: 1160px) {

    .book {
        width: 1024px;
        margin: 0 auto;
        position: relative;
        min-height: 100%;
    }

    .menu1 .btn {
        height: 76px;
        width: 76px;
        margin: 0 8px;
    }

    .menu2 {
        width: 96%;
    }

    .menu3 {
        margin-top: 30%;
    }

    .menu5 {
        margin-top: auto;
        top: 35%;
    }

    .menu5 .btn {
        height: 80px;
        width: 80px;
    }

    .menu6 {
        margin-top: auto;
    }

    .menu6 .btn {
        height: 80px;
        width: 80px;
    }
	
    .menu7 {
        margin-top: auto;
    }

    .menu7 .btn {
        height: 80px;
        width: 80px;
    }	

    .link1 {
        width: 180px;
    }

    .link3 {
        right: 23px;
        width: 220px;
    }

    .link4 {
        width: 200px;
    }

    .link5 {
        width: 167px;
    }

    .link6 {
        width: 180px;
    }
	
	.link7 {
        width: 180px;
    }
}

@media (max-width: 1020px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .viewport {
        display: block;
    }

    .book {
        width: 100%;
    }

    .book1,
    .book2,
    .book3,
    .book4,
    .book5,
	.book6,
    .book7 {
        width: 100%;
        height: 100vh;
    }

    .book1 {
        background: #e7c3c0;
    }

    .book2 {
        background: #b2e0f8;
    }

    .book3 {
        background: #bbd169;
    }

    .book4 {
        background: #fcd475;
    }

    .book5 {
        position: relative;
        background: #01a33e;
    }
	
    .book6 {
        position: relative;
        background: #8ec7bd;
    }
	
    .book7 {
        position: relative;
        background: #000000;
    }
	
    .menu1 {
        justify-content: center;
        width: 100%;
        margin-top: 91%;
    }

    .menu1 .btn {
        height: 145px;
        width: 145px;
        max-width: none;
        margin: 0 18px;
    }

    .menu2 {
        position: absolute;
        justify-content: space-between;
        width: 92%;
        margin-top: auto;
        left: 50%;
        top: 60vw;
        transform: translateX(-50%);
    }

    .menu2 .left {
        justify-content: flex-end;
    }

    .menu2 .right {
        justify-content: flex-start;
    }

    .menu2 .btn,
    .menu3 .btn,
    .menu4 .btn {
        height: 145px;
        width: 145px;
    }

    .menu3 {
        top: 72vw;
        margin-top: 0;
    }

    .menu3 .btn {
        margin: 0 15px;
    }

    .menu4 {
        margin-top: auto;
        top: 546px;
    }

    .menu5 {
        justify-content: center;
        width: 100%;
        top: 57vw;
    }

    .menu5 .btn {
        height: 125px;
        width: 125px;
        margin: 0 15px;
    }
	
    .menu6 {
        justify-content: center;
        width: 100%;
        margin-top: 42%;
    }

    .menu6 .btn0 {
        height: 190px;
        width: 190px;
        max-width: none;
        margin: 0 18px;
    }
	
    .menu7 {
        justify-content: center;
        width: 100%;
        margin-top: 50%;
    }

    .menu7 .btn0 {
        height: 190px;
        width: 190px;
        max-width: none;
        margin: 0 18px;
    }

    .link1,
    .link2,
    .link3,
    .link4,
	.link6{
		width: 350px;
		bottom: auto;
		top: 1480px;
    }

    .link1 {
        /* bottom: 3.5%; */
        right: 44px;
    }

    .link2 {
        /* bottom: 3.5%; */
        right: 87px;
    }

    .link3 {
        /* bottom: 3.5%; */
        right: 50px;
    }
	
    .link4 {
		width: 350px;
		bottom: auto;
		/* top: 1515px; */
    }
	
    .link5 {
        width: 320px;
        top: 1115px;
        right: 40px;
    }
	
    .link6 {
        bottom: 29%;
        width: 350px;
        /* top: 1500px; */
        right: 300px;
    }
	
    .link7 {
        bottom: 29%;
        width: 350px;
        /* top: 1500px; */
        right: 300px;
    }

    .book5-2 {
        position: relative;
    }
}