@import url('https://www.lytogame.com/css/?family=Cinzel');
@import url('https://fonts.cdnfonts.com/css/imperator');
@import url('https://www.lytogame.com/css/?family=Garamond');
@font-face {
	font-family: mongolian;
	src: url('../css/font/monbaiti.ttf') format('truetype');
}
@font-face {
	font-family: greycliffcf;
	src: url('../css/font/greycliffcf.otf') format('truetype');
}

html {
	scroll-behavior: smooth;
}

body {
	/* background-color: transparent; */
	background-color: #4c2346;
    width: 100%;
    height: 100%;
    margin: 0;
	color: #000;
	min-height: 400px;
   	/* overflow-y: hidden; */
}

@media (min-width: 1200px) {
	.container {
		width: 81.25vw;
	}
}

/* Shrink */
.woe-hov-shrink {
	display: inline-block;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px transparent;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
}

.woe-hov-shrink:hover,
.woe-hov-shrink:focus,
.woe-hov-shrink:active {
	-webkit-transform: scale(0.97);
	transform: scale(0.97);
}

/* Shrink*/
.pointer {
	cursor: pointer;
}

.floatelm {
	position: relative;
	z-index: 99;
}

.floatelm img.ggh {
	position: fixed;
	right: 0;
	top: 1.5vw;
	width: 12.917vw;
}

.floatelm img.website {
	position: fixed;
	right: 1.3vw;
	top: 7vw;
	width: 5.7292vw;
}

.floatelm ul.sosmed {
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: fixed;
	right: 3vw;
	top: 13.5vw;
}

.floatelm ul.sosmed li {
	margin-bottom: 10px;
}

.floatelm ul.sosmed li img {
	width: 2.032vw;
}

@media(max-width: 768px){
	.floatelm img.ggh {
		position: fixed;
		right: 0;
		top: 3vw;
		width: 30vw;
	}

	.floatelm img.website {
		right: 0;
        top: 35vw;
        width: 20vw;
	}

	.floatelm ul.sosmed {
		right: 5vw;
		top: 34vw;
	}

	.floatelm ul.sosmed li img {
		width: 6vw;
	}

	.floatelm ul.sosmed li {
		margin-bottom: 2vw;
	}
}

/*========================= FOOTER ==============================*/
footer {
	background: url(../images/layout/footer/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 12vw;
	padding: 2vw 0 0;
	color: #522732;
	font-family: serif;
	margin-top: -0.5vw;
	z-index: 2;
	position: relative;
}

footer img.logo {
	width: 11.823vw;
	margin-top: 0.5vw;
}

ul.agreement {
	list-style-type: none;
	padding: 0;
	margin: 2vw 0 0.5vw;
	display: flex;
	justify-content: center;
}

ul.agreement li {
	border-right: 1px solid #522732;
	padding: 0 10px;
}

ul.agreement li a {
	color: #522732;
	text-decoration: none;
	font-size: 1vw;
	font-weight: bold;
	line-height: 1;
}

ul.agreement li:last-child {
	border-right: 0;
}

footer p {
	font-size: 1vw;
}

@media(max-width: 768px){
	footer {
		background: url(../images/layout/footer/bg.jpg) no-repeat center top;
		background-size: cover;
		height: auto;
		padding: 8vw 0 6vw;
		color: #522732;
		font-family: serif;
		margin-top: 0;
	}

	footer img.logo {
		width: 35vw;
		margin-top: 0;
	}

	ul.agreement {
		margin: 7vw 0 4vw;
	}

	ul.agreement li {
		line-height: 0;
		padding: 0 7px;
	}

	ul.agreement li a {
		font-size: 3vw;
	}

	footer p {
		font-size: 3vw;
		margin-bottom: 0;
	}
}

/*======================= END FOOTER=============================*/

/*======================== MENU ============================*/
.container-fluid{
	justify-content: center;
    display: flex;
}
.navbar-brand{
	height: 4.5vw;
    padding: 0vw 0.5vw;
    margin-top: -1.8vw;
}
.navbar-brand img{
	height: 100%;
    width: 100%;
}
.navbar-brand:hover img{
	opacity: 0.8;
}
.navbar-nav>li {
	float: left;
	border-radius: 3vw;
	background-color: #e9c676;
	height: 3.8vw;
	width: 15vw;
    margin-right: 2vw;
	display: flex;
	align-items: center;
	padding: 0 0.5vw;
}
.navbar-inverse .navbar-nav>li>a {
	color: #431c0f;
    border: 0.15vw solid;
    border-radius: 3vw;
    background-color: #e9c676;
    width: 14vw;
    justify-content: center;
}
.navbar-nav>li>a {
	height: 3vw;
    padding: 0vw 0vw;
    display: flex;
    align-items: center;
    color: #f5f5f5;
    font-size: 1.7em;
    font-family: 'greycliffcf';
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active {
    color: #fcefb9  !important;
	background-color: transparent;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #fcefb9  !important;
	background-color: transparent;
}
.navbar-nav>li>a:hover {
	color:#fff !important;
}
.navbar-home img{
	height:100%;
}
.navbar-home:hover img{
	opacity: 0.9;
    filter: brightness(0);
}
.active .navbar-home img{
	opacity: 0.9;
    filter: brightness(0);
}
.container-fluid {
	padding-right: 0vw;
    padding-left: 0vw;
    background-color: transparent;
    width: 55%;
    height: 3.5vw;
    display: flex;
    align-items: center;
	border-radius: 3vw;
    border: unset;
}
.navbar-inverse {
	background-color: transparent;
    border: unset;
    margin-top: 2vw;
}

@media(max-width: 768px){
	.collapse {
		display: block;
	}
	.container-fluid{
		display: block;
	}
	.navbar-inverse .navbar-toggle {
		border: unset;
	}
	.navbar-nav>li>a {
        height: 4vw;
        padding: 4.5vw 0vw;
        font-size: 3.7vw;
        letter-spacing: 0.1vw;
		border: 0.5vw solid;
		border-radius: 6vw !important;
    }
	.container-fluid {
		padding-right: 4vw;
        padding-left: 4vw;
		background-color: unset;
        width: unset;
        height: unset;
		border: unset
	}
	.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
		background-color: #6e608e9c;
	}
	.navbar-inverse {
		background-color: transparent;
		border: unset;
		margin-top: unset;
		/* display: none; */
	}
	.navbar-brand img {
		height: 70%;
        width: 75%;
        padding-top: 3vw;
	}
	.navbar-brand {
		height: unset;
		padding: unset;
		margin-top: unset;
	}
	.navbar-toggle {
		margin-top: 0vw;
        margin-bottom: 0vw;
        height: 25vw;
	}
	.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active {
		color: #fcefb9  !important;
		background: unset !important;
		background-size: 0px !important;
	}
	.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
		color: #fcefb9  !important;
		background: unset;
		background-size: 0px !important;
	}
	.navbar-nav>li {
		float: left;
		border-radius: 3vw;
		background-color: transparent;
		height: 8vw;
		width: 31.8vw;
        margin-right: 0vw;
		display: block;
		/* align-items: center; */
		padding: 0 3vw;
	}
	.navbar-inverse .navbar-nav>li>a {
		width: 30vw;
	}
}
/*======================== END MENU ============================*/

/*======================== PAGE ============================*/

    .page {
        display: none;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: url(../images/layout/global/bg.jpg) no-repeat center top;
        background-size: cover;
        /* background-position: top; */
        opacity: 0;
        /* transform: translateX(40px); */
        pointer-events: none;
        transition: all 1s ease;
    }
    .page.active {
        display: flex;

        /* transform: translateX(0); */
        pointer-events: auto;
        z-index: 10;
        animation: fadeIn 0.9s ease forwards;
    }

   @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
    /* MAIN BUTTON AREA */
    .nav-buttons {
        /* position: absolute; */
        /* bottom: 28px;
    width: 100%; */
        bottom: 2vw;
        width: 30vw;
        text-align: center;
    }
    .nav-buttons .img-banner {
        margin-bottom: 4vw;
    }
    .nav-buttons .img-click {
        cursor: pointer;
        height: 4vw;
        margin-top: 2vw;
        width: auto;
        transition: transform .2s;
    }
    .nav-buttons .img-click:hover {
        transform: scale(1.1);
    }
    .event-frame {
        width: 100%;
    }
    .event-frame img {
        width: 100%;
        padding: 0vw 0vw;
    }
    /* BACK BUTTON */
    .btn-back {
        position: absolute;
        top: 1vw;
        left: 10vw;
        width: 8vw;
        cursor: pointer;
        z-index: 10;
        transition: transform .2s, filter .2s;
    }
    .btn-back:hover {
        transform: scale(1.08);
        filter: brightness(1.1);
    }
    .btn-back:active {
        transform: scale(0.95);
    }
    /* PROMO SLIDER WRAPPER */
    .promo-wrapper {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 6;
    }
    /* SLIDER */
    .promo-slider {
        width: 100%;
		margin-top:10vw;
    }
    /* SLIDE */
    .promo-slide img {
        width: 100%;
        /* max-height: 70vh; */
        /* object-fit: contain; */
        margin: auto;
    }
    /* CUSTOM ARROW */
    .slick-prev,
    .slick-next {
        width: 64px;
        height: 64px;
        z-index: 10;
    }
    .slick-prev {
        left: 5vw;
        top: 65%;
    }
    .slick-next {
        right: 5vw;
        top: 65%;
    }
    .slick-prev:before,
    .slick-next:before {
        display: none;
    }
    /* ARROW IMAGE */
    .slick-prev {
        background: url('images/layout/section3/left.png') center / contain no-repeat !important;
    }
    .slick-next {
        background: url('images/layout/section3/right.png') center / contain no-repeat !important;
    }
    .img-banner {
        width: 100%;
    }
    .img-event {
        position: absolute;
        top: 0;
        padding: 18vw 18vw 0vw;
        width: 100%;

    }
    #event .img-frame {
        padding: 2vw 10vw 0vw;
    }
    #coming {
		min-height: 100vh;
        background: url(../images/layout/section4/bg-frame.jpg) no-repeat center top;
        align-items: center;
        justify-content: center;
        background-size: cover;
    }
    #coming .img-button {
        width: 100%;
        padding: 0.8vw 0vw;
    }
    /* #coming .img-button:hover {
        filter: grayscale(1);
        transition: 0.5s;
    } */
    #coming .content {
        width: 30vw;
    }
@media(max-width: 768px){
	.btn-back {
		top: 4vw;
		width: 15vw;
	}
}

/*======================== END PAGE ============================*/
/*======================== SECTION 1 ============================*/
.section1 {
    inset: 0;
	background: url(../images/layout/section1/bg.jpg) no-repeat center top !important;
	background-size: cover !important;
    z-index: 6;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	display: flex;
    justify-content: center;
	transition: all 0.6s ease;
}
.content-1 {
	/* display: grid;
	justify-content: center;
	padding-top: 26vw; */
	top: 26vw;
}
/* .content-1 .img-1 {
	width: 100%;
	padding: 1vw 3vw;
	margin-top: 1vw;
}
.content-1 .img-2 {
	width: 100%;
	margin-top: 2vw;
}
.content-1 .img-3 {
	width: 100%;
	margin-top: 3vw;
} */

/* @media(max-width: 1399px){
	.content-1 img {
		margin-top: 21vh;
	}
} */

@media(max-width: 768px){
	.section1 {
		background: url(../images/layout/section1/mobile/bg.jpg) no-repeat center top !important;
		background-size: cover !important;
        height: 100%;
		min-height: 100vh;
		position: relative;
		z-index: 4;
	}
	.nav-buttons {
    /* position: absolute; */
    width: 68vw ;
}
.nav-buttons .img-banner {
    margin-bottom: 58vw;
}
.nav-buttons .img-click {
    height: 9vw;
    margin-bottom: 12vw;
}
}

/*====================== END SECTION 1 ===========================*/

/*======================== SECTION 2 ============================*/
#event{
	min-height: 100vh;
}
.section2 {
	background: url(../images/layout/section2/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 70.55vw;
    position: relative;
    z-index: 5;
	padding: 25vw 15vw 10vw 15vw;
}
.content-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, auto);
	gap: 1vw 0.5vw;
}
.menu-content2 {
	display: flex;
	align-items: center;
    justify-content: center;
}
.event7 {
	grid-column: span 2;
}
.menu-content2>a>img {
	width: 21vw;
}
.menu-content2>a>img:hover {
	filter: drop-shadow(2px 4px 6px #ffffff52);
}

@media(max-width: 1399px){
	.section2 {
		height: 70.4vw;
	}
	/* .img-event {
    padding: 50vw 28vw 0vw;
	} */
}

@media(max-width: 768px){
	#event{
		height: 200vw;
		min-height: 100vh;
	}
	.section2 {
		background: url(../images/layout/section2/mobile/bg.png) no-repeat center top;
		background-size: 100%;
		height: 153vw;
        position: relative;
		z-index: 5;
		padding: 12vw 0vw;
	}
	.event7 {
		grid-column: span 1;
	}
	.title-event-m img {
		width: 52vw;
        margin-top: -20vw;
        margin-bottom: 5vw;
	}
	.content-2 {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, auto);
		gap: 2vw 0.5vw;
	}
	.menu-content2>a>img {
		width: 43vw;
	}
	#event .img-frame {
    	padding: 15vw 10vw 0vw;
	}
	#event .img-event {
    	padding: 50vw 28vw 0vw;
	}
}

/*====================== END SECTION 2 ===========================*/

/*======================== SECTION 3 ============================*/
#promo{
	justify-content: center;
	min-height: 100vh;
}
.section3 {
	background: url(../images/layout/section3/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 54.7vw;
    position: relative;
    /* z-index: 4; */
}
.content-3 {
	display: grid;
	justify-content: center;
	align-items: center;
}
.menu-content3 {
	display: flex;
	align-items: center;
    justify-content: center;
	margin-top: 32vh;
}
.menu-content3>a>img {
	width: 33vw;
}
.menu-content3>a>img:hover {
	filter: drop-shadow(2px 4px 6px #ffffff52);
}
 .title-promo {
    width: 25vw;
    height: auto;
    margin-top: 2vw;
}
@media(max-width: 1399px){
	.section3 {
		height: 54.4vw;
	}
}

@media(max-width: 768px){
	#promo{
		height: 200vw;
		min-height: 100vh;
	}
	.title-promo {
           width: 70vw;
        height: auto;
        margin-top: 20vw;
}
	.section3 {
		background: url(../images/layout/section3/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 224vw;
        position: relative;
		z-index: 4;
	}
	.title-coming-m img {
		width: 80vw;
        margin-top: 18vw;
        margin-bottom: 0vw;
	}
	.menu-content3 {
		margin-top: 5vw;
	}
	.menu-content3>a>img {
		width: 75vw;
	}
}

/*====================== END SECTION 3 ===========================*/

/*======================== SECTION 4 ============================*/

.section4 {
	background: url(../images/layout/section4/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 56vw;
    position: relative;
    z-index: 3;
	padding: 18vw 0 0 0;
}
.content-4 {
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-rows: repeat(2, auto);
	row-gap: 5vh;
}
.menu-content4 {
	display: flex;
	align-items: center;
    justify-content: center;
}
.menu-content4>div>img {
	width: 45vw;
}
.menu-content4>div>img:hover {
	filter: drop-shadow(2px 4px 6px #ffffff52);
}

@media(max-width: 768px){
	
	.section4 {
		background: url(../images/layout/section4/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 175vw;
        position: relative;
		z-index: 3;
		padding: 0vw 0vw;
	}
	.content-4 {
		row-gap: 5vw;
	}
	.title-sneak-m img {
		width: 80vw;
		margin-top: 10vw;
        margin-bottom: 5vw;
	}
	.menu-content4>div>img {
		width: 75vw;
	}
	  #coming {
		height: 200vw;
		min-height: 100vh;
        background: url(../images/layout/section4/mobile/bg-frame.jpg) no-repeat center top;
        align-items: center;
        justify-content: center;
        background-size: cover;
    }
	#coming .content {
		width: 80vw;
		margin-top: 20vw;
	}
	#coming .img-button {
		padding: 2vw 0vw;
	}
}

/*====================== END SECTION 4 ===========================*/

/*====================== GLOBAL ===========================*/
.wrap-content {
	width: 50vw;
	margin: 0 auto;
}

.bg-heading {
	background: url(../images/layout/global/bg-heading.png) no-repeat center top;
	background-size: 100%;
	width: 50vw;
	height: 3.021vw;
	padding-top: 1vw;
	margin: 0 auto;
}

.bg-heading p {
	font-family: 'Roboto Light';
	color: #f3bc00;
	font-size: 1vw;
	text-align: center;
	margin: 0;
	line-height: 1;
}

.mb-2 {
	margin-bottom: 2vw !important;
}

.mt-2 {
	margin-top: 2vw !important;
}

.mt-3 {
	margin-top: 3vw !important;
}

.mt-5 {
	margin-top: 5vw !important;
}

.width-10 {
	width: 10%;
}

.width-30 {
	width: 30%;
}

.width-20 {
	width: 20%;
}

.width-50 {
	width: 50%;
}

.width-80 {
	width: 80%;
}

.text-align-center {
	text-align: center;
}

.no-border-left {
	border-left: 0;
}

.no-border-right {
	border-right: 0;
}

.padding-1_5vw {
	padding: 1.5vw !important;
}

.color-white {
	color: #fff;
}

.vertical-align-top {
	vertical-align: top;
}

@media(max-width: 768px){
	.wrap-content {
		width: auto;
	}

	.bg-heading {
		background: url(../images/layout/global/mobile/bg-heading.png) no-repeat center top;
		background-size: 100%;
		width: auto;
		height: 13.5vw;
		padding-top: 5vw;
	}

	.bg-heading p {
		font-size: 3.5vw;
	}

	.mb-2 {
		margin-bottom: 4vw !important;
	}

	.mt-2 {
		margin-top: 4vw !important;
	}

	.mt-3 {
		margin-top: 6vw !important;
	}

	.mt-5 {
		margin-top: 10vw !important;
	}

	.padding-1_5vw {
		padding: 3vw !important;
	}
}

/*====================== END GLOBAL ===========================*/


/*======================== SCORE =============================*/
.score p {
	font-family: 'Roboto Medium';
	color: #cab43d;
}

.score-content table {
	font-family: 'Roboto Regular';
	font-size: 0.9vw;
	border-color: #c40000;
}

.score-content table tr td {
	padding: 0.5vw;
}

.score-content table thead tr td {
	background-color: #430c0d;
	color: #cec464;
	white-space: nowrap
}

@media(max-width: 768px){
	.score .bg-heading {
		padding-top: 5.5vw;
	}

	.wrap-content.score {
		padding: 0 3vw;
	}

	.score-content table {
		font-size: 2.8vw;
	}

	.score-content table tr td {
		padding: 2vw;
	}
}

/*====================== END SCORE ===========================*/