@import "fontface.css";

@font-face {
    font-family: 'DM Serif Display';
    src: url('../fonts/DMSerifDisplay-Italic.woff2') format('woff2'),
        url('../fonts/DMSerifDisplay-Italic.woff') format('woff'),
        url('../fonts/DMSerifDisplay-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Serif Display';
    src: url('../fonts/DMSerifDisplay-Regular.woff2') format('woff2'),
        url('../fonts/DMSerifDisplay-Regular.woff') format('woff'),
        url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'PUBG SANS';
    src: url('../fonts/PUBGSANS.woff2') format('woff2'),
        url('../fonts/PUBGSANS.woff') format('woff'),
        url('../fonts/PUBGSANS.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GodOfWar';
    src:url('../fonts/GODOFWAR.woff') format('woff'),
        url('../fonts/GODOFWAR.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {
    /* scroll-behavior: smooth; */
    font-size: 62.5%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    /* font-smoothing: antialiased; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* scroll-padding-top: var(--scroll-padding, 160px); */
}

body {
    height: 100% !important;
    font-family: 'PUBG SANS' !important;
    font-weight: 500 !important;
    font-size: 2rem !important;
    -webkit-font-feature-settings: "palt" 1 !important;
    font-feature-settings: "palt" 1 !important;
    color: #313131 !important;
    background: #25282e !important;
    line-height: 1.75 !important;
    letter-spacing: 0.1rem !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

body {
    min-height: 100vh;
    /* scroll-behavior: smooth; */
    /* text-rendering: optimizeSpeed; */
    line-height: 1.5;
}

body header, body .wrapper {
    opacity: 1;
    -webkit-transition: opacity 240ms;
    transition: opacity 240ms;
}

@media screen and (max-width: 768px) {

    body {
        font-size: 1.4rem !important;
    }

}

.back-to-top {
	cursor: pointer;
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	z-index: 999;
    color: #00a0e9;
}

.back-to-top:hover {
    color: #0074aa;
}

img {
    opacity: 1;
    -webkit-transition: all 480ms;
    transition: all 480ms;
    display: block;
}

img {
    max-width: 100%;
    vertical-align: bottom !important;
}

img[src$=".svg"] {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
}

a {
    color: #333;
    text-decoration: none !important;
}

body, h1, h2, h3, h4, h5, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
    margin: 0;
}

#facebox .close{
	top: -15px;
	right: -15px;
}

#facebox .btn-gohome{
	position: absolute;
	left: 35%;
    bottom: 5%;
}

.close{
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: unset; 
	filter: unset;
	opacity: unset; 
}

.close:focus, .close:hover{
	filter: unset;
	opacity: unset;
}

@media(max-width: 768px){

	#facebox .content{
		width: auto;
	}

	#facebox img{
		width: 100%;
	}

	#facebox .close{
		top: 15vh;
		right: 0px;
		width: 12%;
	}

	#facebox .btn-gohome{
		position: absolute;
		left: 12%;
	    top: 90vh;
	}

	#facebox .btn-gohome img{
		max-width: 80%;
	}
}

.floating-banner {
    position: absolute;
    display: block;
    top: 0.5%;
    left: 2%;
    z-index: 99;
}

.floating-banner img {
    width: 15vw;
}

.floating-banner img:hover {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    cursor: pointer;
}

.floating-woe {
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 99;
    display: block;
}

.floating-woe img {
    width: 15vw;
    max-width: 250px;
}

.pc-game {
    position: absolute;
    display: block;
    top: 0.5%;
    right: 0.5%;
    z-index: 99;
    width: 12%;
}

canvas {
    position: absolute;
    filter: blur(1px);
    z-index: 8;
    display: block;
    width: 100%;
    height: 100vh;
}

@media screen and (max-width: 768px){

    .floating-banner {
        display: none;
    }

    .floating-woe {
        display: none;
    }
    
    .pc-game {
        display: none;
    }

    canvas {
        display: none;
    }

}


/* ------------------------------------------------ WRAPPER ------------------------------------------------- */

.wrapper {
    padding-top: 0px;
    overflow: hidden;
}

@media screen and (max-width: 1050px) {

    .wrapper {
        padding-top: 0px;
    }

}

/* --------------------------------------------- MOVING CHARACTER ------------------------------------------------- */

.char {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transition: .5s all ease-in-out;
    transition: .5s all ease-in-out;
    display: none;
}

.char.active {
    position: absolute;
    -webkit-transition: .5s all ease-in-out;
    transition: .5s all ease-in-out;
}

.char-item {
    display: block;
    aspect-ratio: 160 / 314;
    width: 30%;
    background: no-repeat center center / contain;
    background-image: url(../images/teaser/episode6_7/char/front.gif);
    background-size: contain;
    left: 50%;
    position: absolute;
    margin-left: -58%;
    top: 675px;
    z-index: 3;
}

.char.active .char-item {
    top: 306px;
    background-image: url(../images/teaser/episode6_7/char/front.gif);
}

.char.active .char-item.pause {
    /* -webkit-transform: scaleX(-1); */
    /* transform: scaleX(-1); */
    /* max-width: 13.8888888889vw; */
    background-image: url(../images/teaser/episode6_7/char/idle.gif) !important;
}

.char.active .char-item.back {
    background-image: url(../images/teaser/episode6_7/char/back.gif);
}

@media screen and (max-width: 768px) {

    .char {
        display: none !important;
    }

}

/* ------------------------------------------------ ADD ON ------------------------------------------------- */

.addon {
    position: absolute;
    z-index: 11;
    width: 30%;
    padding-top: 0;
    display: block;
}

.addon .inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
	z-index: 11;
}

/* CLOUD */

.addon .inner .innerHiasCloud {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 3;
    margin-top: 5%;
}

.addon .inner .innerHiasCloud .cloud {
    position: relative;
    height: auto;
    width: 100%;
}

.addon .inner .innerHiasCloud .cloud1 {
    margin-left: -35%;
    animation: cloud1 8s infinite ease-in-out;
}

.addon .inner .innerHiasCloud .cloud2 {
    margin-top: 20%;
    animation: cloud2 8s infinite ease-in-out;
}

@keyframes cloud1 {
    0%   {
            left:-50px;
        }
    25%  {
            left:0px;
        }
    50%  {
            left:-50px;
        }
    75%  {
            left:0px;
        }
    100% {
            left:-50px;
        }
}

@keyframes cloud2 {
    0%   {
            top:0px;
        }
    25%  {
            top:50px;
        }
    50%  {
            top:0px;
        }
    75%  {
            top:50px;
        }
    100% {
            top:0px;
        }
}

/* SAKURA */

.addon .inner .innerHiasSakura {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 5;
    margin-top: 55%;
}

.addon .inner .innerHiasSakura .sakura {
    position: relative;
    height: auto;
    width: 35%;
}

.addon .inner .innerHiasSakura .sakura1 {
    z-index: 5;
}

.addon .inner .innerHiasSakura .sakura2 {
    margin-top: -20%;
    margin-left: 20%;
    width: 85%;
    z-index: 5;
}

.addon .inner .innerHiasSakura .movingSakura {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: static;
    margin-left: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 4;
    margin-top: 0%;
    margin-left: 15%;
}

.addon .inner .innerHiasSakura .movingSakura .movesakura {
    position: absolute;
    height: auto;
    width: 3%;
}

.addon .inner .innerHiasSakura .movingSakura .sakura3 {
    margin-left: -10%;
    -webkit-animation: movingsakura 8s linear infinite;
    animation: movingsakura 8s linear infinite;
}

.addon .inner .innerHiasSakura .movingSakura .sakura4 {
    margin-left: 15%;
    -webkit-animation: movingsakura 10s linear infinite;
    animation: movingsakura 10s linear infinite;
}

.addon .inner .innerHiasSakura .movingSakura .sakura5 {
    margin-left: 5%;
    -webkit-animation: movingsakura 12s linear infinite;
    animation: movingsakura 12s linear infinite;
}

.addon .inner .innerHiasSakura .movingSakura .sakura6 {
    margin-left: -5%;
    -webkit-animation: movingsakura 14s linear infinite;
    animation: movingsakura 14s linear infinite;
}

.addon .inner .innerHiasSakura .movingSakura2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: static;
    margin-left: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 4;
    margin-top: 0%;
    margin-left: 80%;
}

.addon .inner .innerHiasSakura .movingSakura2 .movesakura {
    position: absolute;
    height: auto;
    width: 3%;
}

.addon .inner .innerHiasSakura .movingSakura2 .sakura7 {
    margin-left: -30%;
    -webkit-animation: movingsakura2 14s linear infinite;
    animation: movingsakura2 14s linear infinite;
}

.addon .inner .innerHiasSakura .movingSakura2 .sakura8 {
    margin-left: 15%;
    -webkit-animation: movingsakura2 12s linear infinite;
    animation: movingsakura2 12s linear infinite;
}

.addon .inner .innerHiasSakura .movingSakura2 .sakura9 {
    margin-left: 5%;
    -webkit-animation: movingsakura2 10s linear infinite;
    animation: movingsakura2 10s linear infinite;
}

.addon .inner .innerHiasSakura .movingSakura2 .sakura10 {
    margin-left: -5%;
    -webkit-animation: movingsakura2 8s linear infinite;
    animation: movingsakura2 8s linear infinite;
}

@keyframes movingsakura {
    0% {
        opacity: 0;
        top: 10%;
        -webkit-transform: translateX(20px) rotate(0deg);
        transform: translateX(20px) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(-20px) rotate(45deg);
        transform: translateX(-20px) rotate(45deg);
    }
    40% {
        -webkit-transform: translateX(-20px) rotate(90deg);
        transform: translateX(-20px) rotate(90deg);
    }
    60% {
        -webkit-transform: translateX(20px) rotate(135deg);
        transform: translateX(20px) rotate(135deg);
    }
    80% {
        -webkit-transform: translateX(-20px) rotate(180deg);
        transform: translateX(-20px) rotate(180deg);
    }
    100% {
        opacity: 0;
        top: 100%;
        -webkit-transform: translateX(-20px) rotate(225deg);
        transform: translateX(-20px) rotate(225deg);
    }
}

@keyframes movingsakura2 {
    0% {
        opacity: 0;
        top: 50%;
        -webkit-transform: translateX(20px) rotate(0deg);
        transform: translateX(20px) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(-20px) rotate(45deg);
        transform: translateX(-20px) rotate(45deg);
    }
    40% {
        -webkit-transform: translateX(-20px) rotate(90deg);
        transform: translateX(-20px) rotate(90deg);
    }
    60% {
        -webkit-transform: translateX(20px) rotate(135deg);
        transform: translateX(20px) rotate(135deg);
    }
    80% {
        -webkit-transform: translateX(-20px) rotate(180deg);
        transform: translateX(-20px) rotate(180deg);
    }
    100% {
        opacity: 0;
        top: 100%;
        -webkit-transform: translateX(-20px) rotate(225deg);
        transform: translateX(-20px) rotate(225deg);
    }
}

/* VINE */

.addon .inner .innerHiasVine {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: relative;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 3;
    margin-left: -1.8%;
    margin-top: 0;
}

.addon .inner .innerHiasVine .vine {
    position: relative;
    height: auto;
    width: 84%;
}

.addon .inner .innerHiasVine .vine1 {
    margin-top: 2%;
}

.addon .inner .innerHiasVine .vine2 {
    margin-top: -38%;
}

.addon .inner .innerHiasVine .movingLeaf {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    position: static;
    margin-left: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 4;
    margin-top: 0%;
    margin-left: 20%;
}

.addon .inner .innerHiasVine .movingLeaf .moveleaf {
    position: absolute;
    height: auto;
    width: 5%;
}

.addon .inner .innerHiasVine .movingLeaf .leaf1 {
    margin-left: -10%;
    -webkit-animation: movingleaf 8s linear infinite;
    animation: movingleaf 8s linear infinite;
}

.addon .inner .innerHiasVine .movingLeaf .leaf2 {
    margin-left: 15%;
    -webkit-animation: movingleaf 10s linear infinite;
    animation: movingleaf 10s linear infinite;
}

.addon .inner .innerHiasVine .movingLeaf .leaf3 {
    margin-left: 5%;
    -webkit-animation: movingleaf 12s linear infinite;
    animation: movingleaf 12s linear infinite;
}

.addon .inner .innerHiasVine .movingLeaf .leaf4 {
    margin-left: 45%;
    -webkit-animation: movingleaf 14s linear infinite;
    animation: movingleaf 14s linear infinite;
}

.addon .inner .innerHiasVine .movingLeaf .leaf5 {
    margin-left: 35%;
    -webkit-animation: movingleaf 16s linear infinite;
    animation: movingleaf 16s linear infinite;
}

.addon .inner .innerHiasVine .movingLeaf .leaf6 {
    margin-left: 55%;
    -webkit-animation: movingleaf 19s linear infinite;
    animation: movingleaf 19s linear infinite;
}

@keyframes movingleaf {
    0% {
        opacity: 0;
        top: 20%;
        -webkit-transform: translateX(20px) rotate(0deg);
        transform: translateX(20px) rotate(0deg);
    }
    10% {
        opacity: 1;
    }
    20% {
        -webkit-transform: translateX(-20px) rotate(45deg);
        transform: translateX(-20px) rotate(45deg);
    }
    40% {
        -webkit-transform: translateX(-20px) rotate(90deg);
        transform: translateX(-20px) rotate(90deg);
    }
    60% {
        -webkit-transform: translateX(20px) rotate(135deg);
        transform: translateX(20px) rotate(135deg);
    }
    80% {
        -webkit-transform: translateX(-20px) rotate(180deg);
        transform: translateX(-20px) rotate(180deg);
    }
    100% {
        opacity: 0;
        top: 100%;
        -webkit-transform: translateX(-20px) rotate(225deg);
        transform: translateX(-20px) rotate(225deg);
    }
}

@media screen and (max-width: 768px) {
    
    .addon {
        display: none;
    }

}

/* ------------------------------------------------ HEADER ------------------------------------------------- */

.header {
    display: none;
}

@media screen and (max-width: 768px) {

    .header {
        display: inline-block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background: url(../images/teaser/episode6_7/nav/navbar.png) top center no-repeat;
        background-size: cover;
        border-bottom: 2.5px solid #fbd760;
    }

    .header_inner {
        width: 100%;
        height: 100px;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-transition: all 100ms;
        transition: all 100ms;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        font-size: 3rem;
        margin-left: -3%;
    }

    .header_inner .header_logo {
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .header_inner .header_logo a {
        background-size: 300%;
        background-position: 0% 0;
        display: inline-block;
        padding: 0 50px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    
    .header_inner .header_logo a span {
        display: block;
        width: 150px;
    }

    .header_inner .pc-game-mobile {
        z-index: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header_inner .pc-game-mobile span {
        display: block;
        width: 70px;
    }

}

@media screen and (max-width: 480px) {
    
    .header_inner {
        height: 60px;
        margin-left: -5%;
    }

    .header_inner .header_logo a span {
        width: 90px;
    }

    .header_inner .pc-game-mobile span {
        width: 40px;
    }

}

/* ------------------------------------------------ NAVBAR ------------------------------------------------- */

.navbar-fixed-right {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
    padding: 10px;
    border-radius: 10px;
}

.navbar-fixed-right .nav-item .nav-link {
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.navbar-fixed-right .nav-item {
    margin-bottom: 0;
    position: relative;
}

.navbar-fixed-right .nav-item.active .nav-link{
    display: block !important;
    color: #f5cc80 !important;
	background-color: #31343e;
}

.navbar-fixed-right .nav-item:hover .nav-link {
    display: block !important;
    color: yellow;
	background-color: #31343e;
}

.navbar-fixed-right .nav-item.active img {
    content: url(../images/teaser/episode6_7/button-active.png);
}

.navbar-fixed-right .nav-link {
    color: white;
    font-weight: bold;
    text-align: center;
    display: block;
    padding: 5px 10px;
    transition: 0.3s;
}

.navbar-fixed-right .nav-link:hover {
    color: yellow;
	background-color: #31343e;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1px;
}

.nav-item .nav-link {
    display: none;
    position: absolute;
    right: 81%;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.nav-item:hover .nav-link {
    display: block;
}

.nav-item a {
    margin: 0;
    padding: 5px;
}

@media screen and (max-width: 1150px) {

    .navbar-nav {
        display: none;
    }

}

/* ----------------------------------------------------- MODAL ------------------------------------------------- */

.modal-pop {
    max-width: 60vw;
}

.modal-pop img {
    display: inline;
}

.SEASONALPOP {
    height: 35.6vw;
    border: none;
    background: transparent;
    display: block;
}

.SEASONALPOPMOBILE {
    display: none;
}

.boots {
    border: 3px solid #783f1f;
    padding: 10px;
    width: 28%;
    margin: auto;
    position: absolute;
    margin-top: -17%;
    margin-left: 51%;
    border-radius: 25px;
    box-shadow: 4px -1px 7px 1px #bf5cf9;
    display: flex;
}

.boots img {
    width: 13%;
    display: block;
}

.modal-btn-close {
    max-width: 100%;
    width: 4.7%;
    position: absolute;
    transition: transform 2s ease-in-out;
    margin-left: 90%;
    margin-top: 1%;
}

.modal-btn-close:hover {
	transform: rotate(360deg);
	cursor: pointer;
}

.modal-btn-close:not(:hover) {
    transform: rotate(-360deg);
}

.infopop {
    max-width: 100%;
    width: 25%;
    position: absolute;
    margin-left: -45%;
    margin-top: 45%;
    /* transition: transform 2s ease-in-out; */
}

.infopop:hover {
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
	cursor: pointer;
}

/* .infopop:not(:hover) {
    transform: rotate(0deg);
} */

.pop-up {
    width: 100%;
}

@media screen and (max-width: 768px) {

    .modal-pop {
        max-width: 100%;
    }
    
    .SEASONALPOP {
        display: none;
    }

    .SEASONALPOPMOBILE {
        height: 35.6vw;
        border: none;
        background: transparent;
        display: block;
        margin-top: 15%;
    }

    .modal-btn-close {
        width: 8%;
        margin-left: 85%;
    }

    .infopop {
        width: 45%;
        margin-left: -68%;
        margin-top: 140%;
    }

}

/* ------------------------------------------------ toggle section 1 ------------------------------------------------- */

.toggle {
    display: flex;
    align-items: center;
    gap: .2rem;
    font-family: 'GodOfWar';
    font-weight: 900;
    font-size: 3rem;
    cursor: pointer;
}

.toggle__switch {
    --bg-toggle: url(../images/teaser/episode6_7/sc1/bgtoggle.png);
    --bg-circle: url(../images/teaser/episode6_7/sc1/toggle_a.png);
    --w-toggle-switch: 515px;
    --w-h-toggle-circle: 260px;
    --pd-toggle-switch: .5rem;
    --text-color: #1a1a1a;
    height: 115px;
    width: var(--w-toggle-switch);
    background: var(--bg-toggle) no-repeat center;
    background-size: 100%;
    border-radius: 4rem;
    display: flex;
    position: relative;
    align-items: center;
    padding: 0 var(--pd-toggle-switch);
    cursor: pointer;
    transition: background-color 500ms;
    z-index: 3;
}

.toggle__bg {
    width: var(--w-h-toggle-circle);
    height: var(--w-h-toggle-circle);
    background: var(--bg-circle) no-repeat center;
    background-size: 100%;
    /* border-radius: 50%; */
    transition: margin 400ms ease-in-out, background-color 1000ms;
}

.toggle__label {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: absolute;
    width: 99%;
    padding: 2.4rem;
    z-index: 1;
    transition: color 0.3s ease;
    pointer-events: none;
}

.toggle__label:nth-child(1) {
    color: var(--text-color);
    align-items: flex-start;
    justify-content: flex-start;
}

.toggle__label:nth-child(3) {
    color: var(--text-color);
    align-items: flex-end;
    justify-content: flex-end;
}

.arrow {
    width: 12%;
    z-index: 4;
}

.arr-left {
    position: relative;
    left: 0;    
}

.arr-right {
    position: relative;
    right: 0;
}

#checkbox:not(:checked) + .toggle .toggle__label--left,
#checkbox:checked + .toggle .toggle__label--right {
    color: #331805;
}

#checkbox:checked + .toggle .toggle__bg {
    margin-left: calc(var(--w-toggle-switch) - (var(--pd-toggle-switch) * 2) - var(--w-h-toggle-circle));
}

#checkbox:checked + .toggle > .toggle__switch {
    --bg-toggle: url(../images/teaser/episode6_7/sc1/bgtoggle.png);
    --bg-circle: url(../images/teaser/episode6_7/sc1/toggle_a.png);
}

@media screen and (max-width: 1600px) {
    
    .toggle {
        font-size: 2rem;
    }

    .toggle__switch {
        --w-toggle-switch: 450px;
        background-size: 90%;
    }

    .toggle__label {
        padding: 5.6rem;
    }

    .toggle__bg {
        background-size: 80%;
    }

    .arr-left {
        left: 5%;
    }

    .arr-right {
        right: 5%;
    }

}

@media screen and (max-width: 1050px) {
    
    .toggle {
        font-size: 1.5rem;
        margin-left: 5%;
        margin-top: -2%;
    }

    .toggle__switch {
        --w-toggle-switch: 400px;
        background-size: 75%;
    }

    .toggle__label {
        padding: 7rem;
    }

    .toggle__bg {
        background-size: 60%;
    }

    .arr-left {
        left: 10%;
    }

    .arr-right {
        right: 10%;
    }

}

@media screen and (max-width: 768px) {

    .toggle {
        font-size: 2.5rem;
        margin-left: 2%;
        margin-top: 0%;
    }
    
    .toggle__switch {
        --w-toggle-switch: 500px;
        background-size: 100%;
    }

    .toggle__bg {
        background-size: 100%;
    }

    .toggle__label {
        padding: 3rem;
    }

    .arr-left {
        left: 0%;
    }

    .arr-right {
        right: 0%;
    }

}

@media screen and (max-width: 480px) {

    .toggle {
        font-size: 4vw;
        margin-left: 0%;
    }

    .toggle__label {
        padding: 1rem;
    }
    
    .toggle__switch {
        --w-toggle-switch: 290px;
        --w-h-toggle-circle: 140px;
    }

}

@media screen and (max-width: 380px) {

    .toggle {
        font-size: 3.5vw;
    }

    .toggle__label {
        padding: 1.5rem;
    }
    
    .toggle__switch {
        --w-toggle-switch: 260px;
        --w-h-toggle-circle: 130px;
    }

}

@media screen and (max-width: 340px) {

    .toggle {
        font-size: 3vw;
    }
    
    .toggle__switch {
        --w-toggle-switch: 220px;
        --w-h-toggle-circle: 100px;
    }

}

/* ------------------------------------------------ SECTION 1 ------------------------------------------------- */

#Home {
    position: relative;
    z-index: 4;
}

#Home .HOME-BG {
    position: relative; 
    width: 100%; 
    aspect-ratio: 1 / 0.5;
}

.video {
	height: 100%;
	width: 100%;
}

#Home .HOME-BG .SC1-BG-EPS6,
#Home .HOME-BG .SC1-BG-EPS7 {
    display: block;
}

#Home .HOME-BG .SC1-BG-EPS6-MOBILE,
#Home .HOME-BG .SC1-BG-EPS7-MOBILE {
    display: none;
}

#Home .innerbtn {
    position: absolute;
	top: 0;
	z-index: 10;
	width: 100%;
    padding-top: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    z-index: 10;
    margin-top: 2%;
}

#Home .inner {
    position: absolute;
    transition: opacity 1.5s ease-in-out;
	top: 0;
	z-index: 2;
	width: 100%;
    padding-top: 10px;
}

#Home .inner .innerPlay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: absolute;
    width: 50%;
    padding: 0;
    z-index: 2;
    box-sizing: border-box;
    margin-left: 0;
    margin-top: 24%;
    left: 20.5%;
    transition: transform 0.5s linear;
}

#Home .inner .innerPlay:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    cursor: pointer;
}

#Home .inner .innerPlay .logoplay {
    position: relative;
    height: auto;
    width: 100%;
    display: block;
}

#Home .inner a .play-desktop {
    display: block;
}

#Home .inner a .play-mobile {
    display: none;
}

#Home .inner a .btn-play {
    position: relative;
    height: auto;
    /* max-width: unset; */
    width: 75%;
    margin: auto;
    margin-top: -2%;
    margin-left: 80%;
    z-index: 10;
}

#Home .inner .innerContent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
    margin-top: 14.8%;
}

#Home .inner .innerContent .title {
    position: relative;
    height: auto;
    width: 70%;
    display: block;
}

#Home .inner .innerContent .title-mobile {
    display: none;
}

@media screen and (max-width: 1600px) {

    #Home .inner a .btn-play {
        width: 65%;
        margin-left: 85%
    }

    #Home .inner .innerPlay .logoplay {
        width: 90%;
    }
    
}

@media screen and (max-width: 768px) {

    #Home .HOME-BG {
        aspect-ratio: 1.6 / 2.9;
    }

    #Home .HOME-BG .SC1-BG-EPS6,
    #Home .HOME-BG .SC1-BG-EPS7 {
        display: none;
    }

    #Home .HOME-BG .SC1-BG-EPS6-MOBILE,
    #Home .HOME-BG .SC1-BG-EPS7-MOBILE {
        display: block;
    }

    #Home .innerbtn {
        margin-top: 15%;
    }

    #Home .inner .innerPlay .logoplay {
        display: none;
    }

    #Home .inner a .play-desktop {
        display: none;
    }

    #Home .inner a .play-mobile {
        display: block;
    }

    #Home .inner a .btn-play {
        position: absolute;
        width: 20vw;
        margin-top: 30%;
        margin-left: 40%;
    }

    #Home .inner a .btn-play:hover {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        cursor: pointer;
    }

    #Home .inner .innerContent {
        margin-top: 35.5%;
    }

    #Home .inner .innerContent .title {
        display: none;
    }

    #Home .inner .innerContent .title-mobile {
        position: relative;
        height: auto;
        width: 90%;
        display: block;
    }

}

@media screen and (max-width: 480px) {

    #Home .innerbtn {
        margin-top: 14%;
    }

    #Home .inner a .btn-play {
        width: 30vw;
        margin-top: 50%;
        margin-left: 35%;
    }

    #Home .inner .innerContent {
        margin-top: 65.5%;
    }

    #Home .inner .innerContent .title-mobile {
        width: 100%;
    }
    
}

/* ------------------------------------------------ SECTION 2 - 4 ------------------------------------------------- */

.maps {
    position: relative;
    z-index: 2;
}

/* #Gonryun {
    background: url(../images/teaser/episode6_7/sc2/bg2.png) center no-repeat;
    background-size: cover;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

#Amatsu {
    background: url(../images/teaser/episode6_7/sc3/bg3.png) center no-repeat;
    background-size: cover;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

#Umbala {
    background: url(../images/teaser/episode6_7/sc4/bg4.png) center no-repeat;
    background-size: cover;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
} */

.maps .SC2-BG,
.maps .SC3-BG,
.maps .SC4-BG {
    display: block;
}

.maps .SC2-BG-MOBILE, 
.maps .SC3-BG-MOBILE,
.maps .SC4-BG-MOBILE {
    display: none;
}

.maps .inner {
    position: absolute;
	top: 0;
	z-index: 2;
	width: 100%;
    padding-top: 0;
}

.maps .inner .main {
    display: flex;
}

.maps .inner .main .innerContent {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 4;
}

.maps .inner .main .innerContent .content {
    display: block;
    position: relative;
    height: auto;
    width: 90%;
}

.maps .inner .main .innerContent .content-mobile {
    display: none;
}

.maps .inner .main .innerBTNContent {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    flex-wrap: nowrap;
    gap: 30px;
    margin: auto;
    width: 100%;
    z-index: 10;
    margin-top: 37%;
    margin-left: -20%;
}

.maps .inner .main .innerBTNContent .BTN-CONTENT {
    position: relative;
    height: auto;
    width: 15%;
    cursor: pointer;
}

@media screen and (max-width: 768px) {

    .maps .inner {
        padding-top: 40px;
    }
    
    .maps .SC2-BG,
    .maps .SC3-BG,
    .maps .SC4-BG {
        display: none;
    }

    .maps .SC2-BG-MOBILE, 
    .maps .SC3-BG-MOBILE,
    .maps .SC4-BG-MOBILE {
        display: block;
    }

    .maps .inner .main .innerContent {
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .maps .inner .main .innerContent .content {
        display: none;
    }

    .maps .inner .main .innerContent .content-mobile {
        display: block;
        position: relative;
        height: auto;
        width: 100%;
    }

    .maps .inner .main .innerBTNContent {
        justify-content: center;
        gap: 10px;
        margin-top: 110%;
        margin-left: 0;
    }

    .maps .inner .main .innerBTNContent .BTN-CONTENT {
        width: 40%;
    }

}

/* ------------------------------------------------ SECTION 2 - 4 LIST ------------------------------------------------- */

.maps .inner .listMons {
    display: none;
}

.maps .inner .listMons .listClose {
    position: absolute;
    width: 3.5%;
    margin-left: 85%;
    margin-top: 5.6%;
    transition: transform 2s ease-in-out;
    z-index: 11;
}

.maps .inner .listMons .listClose:hover {
	transform: rotate(360deg);
	cursor: pointer;
}

.maps .inner .listMons .listClose:not(:hover) {
    transform: rotate(-360deg);
}

.maps .inner .listMons .innerList {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 4;
    margin-left: -8%;
    margin-top: 5%;
}

.maps .inner .listMons .innerList .list-bg {
    display: block;
    position: relative;
    height: auto;
    width: 70%;
}

.maps .inner .listMons .innerList .list-bg-mobile {
    display: none;
}

.maps .inner .listMons .listContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: absolute;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 6;
    margin-left: -5%;
    margin-top: 11%;
}

.maps .inner .listMons .listContent .listRow1 {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: nowrap;
    gap: 20px;
    margin: auto;
    width: 100%;
    z-index: 10;
}

.maps .inner .listMons .listContent .listRow1 .LIST-CONTENT {
    display: block;
    position: relative;
    height: auto;
    width: 10vw;
}

.maps .inner .listMons .listContent .listRow2 {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: nowrap;
    gap: 20px;
    margin: auto;
    width: 100%;
    z-index: 10;
}

.maps .inner .listMons .listContent .listRow2 .LIST-CONTENT {
    display: block;
    position: relative;
    height: auto;
    width: 10vw;
}

.maps .inner .listMons .listContent .listRow3 {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: nowrap;
    gap: 20px;
    margin: auto;
    width: 100%;
    z-index: 10;
}

.maps .inner .listMons .listContent .listRow3 .LIST-CONTENT {
    display: block;
    position: relative;
    height: auto;
    width: 10vw;
}

.maps .inner .listMons .listContent .LIST-CONTENT {
    filter: brightness(80%);
}

.maps .inner .listMons .listContent .LIST-CONTENT:hover {
    cursor: pointer;
	filter: brightness(110%);
}

.maps .inner .listMons .listContent .LIST-ACTIVE {
    filter: brightness(100%);
    border: 10px inset #663517;
}

.maps .inner .listMons .detailContent {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    position: absolute;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 5;
    margin-left: -10%;
    margin-top: 11%;
}

.maps .inner .listMons .detailContentMobile {
    display: none;
}

.maps .inner .listMons .detailContent .monsterGif {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: absolute;
    flex-wrap: nowrap;
    gap: 0;
    margin: auto;
    width: 100%;
    z-index: 10;
    margin-left: 0;
    top: 0%;
    left: -10%;
}

.maps .inner .listMons .detailContent .monsterGif .gifMonster {
    display: block;
    position: relative;
    height: auto;
    width: auto;
    min-width: 95px;
    min-height: 160px;
}

.maps .inner .listMons .detailContent .monsterStats {
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    flex-wrap: nowrap;
    gap: 0;
    margin: auto;
    width: 100%;
    z-index: 9;
    margin-top: -3%;
}

.maps .inner .listMons .detailContent .monsterStats .statsMonster {
    display: block;
    position: relative;
    height: auto;
    width: 26%;
}

@media screen and (min-width: 1921px) {

    .maps .inner .listMons .detailContent .monsterGif .gifMonster {
        min-width: 200px;
        min-height: 300px;
    }
    
}

@media screen and (max-width: 1050px) {

    .maps .inner .listMons .detailContent .monsterGif .gifMonster {
        min-width: 0;
        min-height: 0;
        width: 120px;
        height: 140px;
    }

    .maps .inner .listMons .detailContent .monsterGif {
        left: -8%;
    }
    
}

@media screen and (max-width: 768px) {

    .maps .inner .listMons .listClose {
        width: 9.5%;
        margin-top: 1%;
    }

    .maps .inner .listMons .innerList {
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-left: 0;
        margin-top: 0;
    }
        
    .maps .inner .listMons .innerList .list-bg {
        display: none;
    }

    .maps .inner .listMons .innerList .list-bg-mobile {
        display: block;
        position: relative;
        height: auto;
        width: 100%;
    }

    .maps .inner .listMons .listContent {
        margin-left: 0;
        margin-top: 80%;
    }

    .maps .inner .listMons .listContent .listRow1 {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 20px;
        margin: auto;
        width: 100%;
        z-index: 10;
    }

    .maps .inner .listMons .listContent .listRow1 .LIST-CONTENT {
        display: block;
        position: relative;
        height: auto;
        width: 25vw;
    }

    .maps .inner .listMons .listContent .listRow2 {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 20px;
        margin: auto;
        width: 100%;
        z-index: 10;
    }

    .maps .inner .listMons .listContent .listRow2 .LIST-CONTENT {
        display: block;
        position: relative;
        height: auto;
        width: 25vw;
    }

    .maps .inner .listMons .listContent .listRow3 {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 20px;
        margin: auto;
        width: 100%;
        z-index: 10;
    }

    .maps .inner .listMons .listContent .listRow3 .LIST-CONTENT {
        display: block;
        position: relative;
        height: auto;
        width: 25vw;
    }
    
    .maps .inner .listMons .detailContent {
        display: none;
    }

    .maps .inner .listMons .detailContentMobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        position: absolute;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 5;
        margin-left: 0;
        margin-top: 11%;
    }

    .maps .inner .listMons .detailContentMobile .monsterGif {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: absolute;
        flex-wrap: nowrap;
        gap: 0;
        margin: auto;
        width: 100%;
        z-index: 10;
        margin-left: 15%;
        top: 0;
        left: 0;
        margin-top: 10%;
    }

    .maps .inner .listMons .detailContentMobile .monsterGif .gifMonster {
        display: block;
        position: relative;
        height: auto;
        width: auto;
        min-width: 155px;
        min-height: 160px;
    }

    .maps .inner .listMons .detailContentMobile .monsterStats {
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 0;
        margin: auto;
        width: 100%;
        z-index: 9;
        margin-top: 2%;
    }

    .maps .inner .listMons .detailContentMobile .monsterStats .statsMonster {
        display: block;
        position: relative;
        height: auto;
        width: 95%;
    }

}

@media screen and (max-width: 480px) {

    
    .maps .inner .listMons .detailContentMobile .monsterGif {
        margin-left: 10%;
        margin-top: 5%;
    }
    
    .maps .inner .listMons .detailContentMobile .monsterGif .gifMonster {
        min-width: 65px;
        min-height: 120px;
    }

}

/* ------------------------------------------------ SECTION 2 - 4 CARD ------------------------------------------------- */

.maps .inner .cardMons {
    display: none;
}

.maps .inner .cardMons .cardClose {
    position: absolute;
    width: 3.5%;
    margin-left: 85%;
    margin-top: 5.6%;
    transition: transform 2s ease-in-out;
    z-index: 11;
}

.maps .inner .cardMons .cardClose:hover {
	transform: rotate(360deg);
	cursor: pointer;
}

.maps .inner .cardMons .cardClose:not(:hover) {
    transform: rotate(-360deg);
}

.maps .inner .cardMons .innerCard {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 4;
    margin-left: -8%;
    margin-top: 5%;
}

.maps .inner .cardMons .innerCard .card-bg {
    display: block;
    position: relative;
    height: auto;
    width: 70%;
}

.maps .inner .cardMons .innerCard .card-bg-mobile {
    display: none;
}

.maps .inner .cardMons .cardContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: absolute;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 5;
    margin-left: 7%;
    margin-top: 11%;
}

.maps .inner .cardMons .cardContentmobile {
    display: none;
}

.maps .inner .cardMons .cardContent .cardRow1 {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: nowrap;
    gap: 20px;
    margin: auto;
    width: 100%;
    z-index: 10;
}

.maps .inner .cardMons .cardContent .cardRow1 .CARD-CONTENT {
    display: block;
    position: relative;
    height: auto;
    width: 11%;
}

.maps .inner .cardMons .cardContent .cardRow2 {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: nowrap;
    gap: 20px;
    margin: auto;
    width: 100%;
    z-index: 10;
}

.maps .inner .cardMons .cardContent .cardRow2 .CARD-CONTENT {
    display: block;
    position: relative;
    height: auto;
    width: 11%;
}

@media screen and (max-width: 768px) {

    .maps .inner .cardMons .innerCard {
        align-items: center;
        justify-content: center;
        padding: 0;
        margin-left: 0;
        margin-top: 0;
    }
        
    .maps .inner .cardMons .innerCard .card-bg {
        display: none;
    }

    .maps .inner .cardMons .innerCard .card-bg-mobile {
        display: block;
        position: relative;
        height: auto;
        width: 100%;
    }

    .maps .inner .cardMons .cardClose {
        width: 9.5%;
        margin-top: 1%;
    }

    .maps .inner .cardMons .cardContent {
        display: none;
    }

    .maps .inner .cardMons .cardContentmobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: absolute;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        z-index: 5;
        margin-left: 0;
        margin-top: 20%;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow1 {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 20px;
        margin: auto;
        width: 100%;
        z-index: 10;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow1 .CARD-CONTENT {
        display: block;
        position: relative;
        height: auto;
        width: 25%;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow2 {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 20px;
        margin: auto;
        width: 100%;
        z-index: 10;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow2 .CARD-CONTENT {
        display: block;
        position: relative;
        height: auto;
        width: 25%;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow3 {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 20px;
        margin: auto;
        width: 100%;
        z-index: 10;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow3 .CARD-CONTENT {
        display: block;
        position: relative;
        height: auto;
        width: 25%;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow4 {
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        flex-wrap: nowrap;
        gap: 20px;
        margin: auto;
        width: 100%;
        z-index: 10;
    }

    .maps .inner .cardMons .cardContentmobile .cardRow4 .CARD-CONTENT {
        display: block;
        position: relative;
        height: auto;
        width: 25%;
    }

}

/* ------------------------------------------------ SECTION 5 ------------------------------------------------- */

#Seasonal {
    position: relative;
    z-index: 4;
}

#Seasonal .SC5-BG {
    display: block;
}

#Seasonal .SC5-BG-MOBILE {
    display: none;
}

#Seasonal .inner {
    position: absolute;
	top: 0;
	z-index: 2;
	width: 100%;
    padding-top: 80px;
}

#Seasonal .inner .innerContent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
}

#Seasonal .inner .innerContent .title {
    display: block;
    position: relative;
    height: auto;
    width: 70%;
}

#Seasonal .inner .innerContent .title-mobile {
    display: none;
}

#Seasonal .inner .innerBTNContent {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    flex-wrap: nowrap;
    gap: 0;
    margin: auto;
    width: 100%;
    z-index: 2;
}

#Seasonal .inner .innerBTNContent .BTN-CONTENT-SEASONAL {
    position: relative;
    height: auto;
    width: 28%;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    
    #Seasonal .SC5-BG {
        display: none;
    }

    #Seasonal .SC5-BG-MOBILE {
        display: block;
    }

    #Seasonal .inner {
        padding-top: 60px;
    }
    
    #Seasonal .inner .innerContent .title {
        display: none;
    }

    #Seasonal .inner .innerContent .title-mobile {
        display: block;
        position: relative;
        height: auto;
        width: 70%;
    }

    #Seasonal .inner .innerBTNContent {
        flex-direction: column;
    }

    #Seasonal .inner .innerBTNContent .BTN-CONTENT-SEASONAL {
        position: relative;
        height: auto;
        width: 55%;
        cursor: pointer;
    }
    
    #Seasonal .inner .innerBTNContent .BTN-DUNGEON {
        margin-left: -50%;
    }

    #Seasonal .inner .innerBTNContent .BTN-KAFRA {
        margin-left: 55%;
        margin-top: -30%;
    }

    #Seasonal .inner .innerBTNContent .BTN-WOE {
        margin-left: -50%;
        margin-top: -25%;
    }

}

/* ------------------------------------------------ SECTION 6 ------------------------------------------------- */

#Event {
    position: relative;
    z-index: 4;
}

#Event .SC6-BG {
    display: block;
}

#Event .SC6-BG-MOBILE {
    display: none;
}

#Event .inner {
    position: absolute;
	top: 0;
	z-index: 2;
	width: 100%;
    padding-top: 60px;
}

#Event .inner:last-of-type {
    margin-bottom: 0px;
}

#Event .inner .innerContent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
    margin-left: 0;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
    z-index: 2;
}

#Event .inner .innerContent .title {
    display: block;
    position: relative;
    height: auto;
    width: 70%;
}

#Event .inner .innerContent .title-mobile {
    display: none;
}

#Event .inner .EVENT-CONTENT {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-IMG {
    width: 65vw;
    max-width: unset;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-DESKTOP {
    display: block;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-MOBILE {
    display: none;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-container {
    height: 40vw;
    margin-top: -5%;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-IMG:hover {
	filter: saturate(2);
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev {
    width: 7%;
    height: 17%;
    left: 10%;
    top: 45%;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next {
    width: 7%;
    height: 17%;
    right: 10%;
    top: 45%;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev:hover {
	filter: saturate(2);
	cursor: pointer;
}

#Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next:hover {
	filter: saturate(2);
	cursor: pointer;
}

@media screen and (max-width: 768px) {

    #Event {
        margin-top: -5%;
    }
    
    #Event .SC6-BG {
        display: none;
    }
    
    #Event .SC6-BG-MOBILE {
        display: block;
    }

    #Event .inner {
        padding-top: 40px;
    }

    #Event .inner .innerContent {
        margin-top: 10%;
    }

    #Event .inner .innerContent .title {
        display: none;
    }

    #Event .inner .innerContent .title-mobile {
        display: block;
        position: relative;
        height: auto;
        width: 70%;
    }

    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-IMG {
        width: 53vw;
    }

    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-DESKTOP {
        display: none;
    }
    
    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-MOBILE {
        display: block;
    }

    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-container {
        height: 115vw;
        margin-top: -10%;
    }

    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev {
        width: 10%;
        height: 10%;
        left: 10%;
        top: 45%;
    }
    
    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next {
        width: 10%;
        height: 10%;
        right: 10%;
        top: 45%;
    }

}

@media screen and (max-width: 480px) {

    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .EVENT-IMG {
        width: 65vw;
    }
    
    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-container {
        height: 140vw;
    }

    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-prev {
        width: 20%;
        height: 16%;
        left: -2%;
        top: 45%;
    }
    
    #Event .inner .EVENT-CONTENT .EVENT-CONTAINER .swiper-button-next {
        width: 20%;
        height: 16%;
        right: -2%;
        top: 45%;
    }

}

/* ----------------------------------------------- Footer -------------------------------------------------- */

footer {
    background: #000000;
    background-size: cover;
    border-top: 3px solid #fbd760;
    position: relative;
    overflow: hidden;
    z-index: 5;
}

.row-logo {
    padding-top: 1%;
    margin-bottom: 0.5%;
}

.sosmed {
    font-size: 1.7vw;
}

.sosmed a {
    color: white;
    padding-right: 0;
    padding-left: 0;
    margin-right: 0.5%;
    margin-left: 0.5%;
}

.sosmed a:hover {
    color: #fbd760;
}

.logo-footer {
    width: 10%;
    margin-bottom: 1%;
}

.text-footer {
    font-size: 1vw;
    color: white;
    margin-bottom: 1%;
}

@media screen and (max-width: 768px) {

    .sosmed {
        font-size: 6vw;
    }

    .logo-footer {
        width: 35%;
    }
    
    .text-footer {
        font-size: 3vw;
        padding: 10px;
    }

}