@import url('https://www.lytogame.com/css/?family=Myriad%20Pro');
body{
	background-color: #260d01;
	color: #000;
	min-height: 400px;
	position: relative;
}
@media (min-width: 1200px){
	.container{
		width: 81.25vw;
	}
}
/* Shrink */
.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;
}
.hov-shrink:hover, .hov-shrink:focus, .hov-shrink:active{
	-webkit-transform: scale(0.97);
	transform: scale(0.97);
}
/* Shrink*/
.pointer{
	cursor: pointer;
}
.floatelm{
	position: relative;
	z-index: 5;
}
.floatelm img.support{
	position: fixed;
	right: 10vw;
	top: 1.4vw;
	width: 11.407vw;
}
.floatelm ul.sosmed{
	list-style-type: none;
	padding: 0;
	margin: 0;
	position: fixed;
	right: 1vw;
	top: 15vw;
	filter: brightness(1.3);
}
.floatelm ul.sosmed li{
	/* margin-bottom: 10px; */
	margin-bottom: 18px;
}
.floatelm ul.sosmed li img{
	/* width: 40px; */
	width: 45px;
    filter: hue-rotate(1268deg);
    border: 2px #fff solid;
    border-radius: 22px;
}
.floatelm ul.sosmed li img:hover {
    filter: grayscale(1);
}

@media(max-width: 768px){
	.floatelm img.support{
		position: fixed;
		right: 0;
		top: 11vw;
		width: 25vw;
	}
	.floatelm ul.sosmed{
		top: 40vw;
	}
	.floatelm ul.sosmed li img{
		width: auto;
	}
	.floatelm ul.sosmed li{
		margin-bottom: 3px;
	}
}
/*======================== MENU ============================*/
html{
	scroll-behavior: smooth;
}
.container-fluid{
	justify-content: center;
    display: flex;
}
.navbar-brand{
	/* height:80px;
	padding: 10px 30px; */
	height: 85px;
    padding: 0px 30px;
    margin-top: -20px;
}
.navbar-brand img{
	height:100%;
}
.navbar-brand:hover img{
	opacity: 0.8;
}
.navbar-inverse .navbar-nav>li>a {
    /* color: #ffb400; */
	color: #f3b701;
}
.navbar-nav>li>a {
	/* height: 80px; */
	height: 50px;
	padding: 26px 30px;
	display: flex;
	align-items: center;
	color:#ffb400;
	font-size: 24px;
    font-family: 'Anton';
}
.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:active {
    color: #cba400  !important;
    background: url(../images/layout/global/arrow-icon.png) no-repeat center bottom !important;
	background-size: 15px !important;
}
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #cba400  !important;
    background: url(../images/layout/global/arrow-icon.png) no-repeat center bottom;
	background-size: 15px !important;
}
.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: 80px;
    padding-left: 80px;
    background-color: #362111b5;
    width: 940px;
    height: 50px;
	border: solid #b48606;
	border-radius: 30px;
}
.navbar-inverse {
	/* background-color: #0000005e;
	border: unset; */
	background-color: transparent;
    border: unset;
    margin-top: 40px;
}
.skill-tree span{
	background:#ffb400;
	color:black;
	padding: 5px 15px;
}
.skill-tree:hover span{
	background:#e8a300;
	color:black;
}

.floatelm img.website {
	position: fixed;
    left: 0.3vw;
    top: 7vw;
    width: 5.7292vw;
}

@media(max-width: 768px){
	.container-fluid{
		display: flex;
		justify-content: center;
		flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
		border: 2px solid #b48606;
	}
	.navbar-inverse .navbar-toggle {
		border: unset;
	}
	.navbar-nav>li>a {
		height: 20px;
        padding: 0px 10px;
        font-size: .9rem;
	}
	.container-fluid {
		padding-right: 25px;
		padding-left: 25px;
		/* background-color: unset; */
        /* width: unset;
        height: unset; */
		width: 100%;
        height: 8vw;
	}
	.navbar-inverse {
		/* background-color: #000000c7; */
		border: unset;
		margin-top: 5vw;
        padding: 0 5vw;
	}
	.navbar-brand {
		height: 10vw;
		padding: unset;
		margin-top: unset;
	}
	.navbar-toggle {
		margin-top: 0px;
		margin-bottom: 0px;
		height: 80px;
	}
	.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;
	}
	.floatelm img.website {
		left: 0;
		top: 40vw;
		width: 17vw;
	}
	#top-menu {
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
/*======================== END MENU ============================*/

/*======================== SECTION 1 ============================*/
.section1{
	background: url(../images/layout/section1/bg.jpg) no-repeat center top;
	background-size: 100%;
	width: 100%;
	height: 55vw;
	position: relative;
	padding-top: 46vw;
}
.btn-regis {
	width: 20vw;
}
@media(max-width: 768px){
	.section1{
		background: url(../images/layout/section1/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 177vw;
		padding-top: 145vw;
	}
	.btn-regis {
		width: 45vw;
	}
}
/*====================== END SECTION 1===========================*/

/*======================== SECTION 2 ============================*/
.section2{
	background: url(../images/layout/section2/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 55.5vw;
	position: relative;
}

@media(max-width: 768px){
	.section2{
		background: url(../images/layout/section2/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 177vw;
		padding-top: 15.5vw;
		position: relative;
	}
}
/*====================== END SECTION 2===========================*/

/*======================== SECTION 3 ============================*/
.section3{
	background: url(../images/layout/section3/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 55.5vw;
	/* padding-top: 13.5vw; */
	position: relative;
	z-index: 1;
	/* margin-top: -11vw; */
}
@media(max-width: 768px){
	.section3{
		background: url(../images/layout/section3/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 178vw;
		position: relative;
	}
}
/*====================== END SECTION 3===========================*/

/*======================== SECTION 4 ============================*/
.section4{
	background: url(../images/layout/section4/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 55.7vw;
	position: relative;
}
.container-reward {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
    width: 40%;
	position: relative;
    left: 2.5vw;
	padding: 22vw 0 0 0;
	gap: 1vw;
}
.grid-item {
	display: flex;
	gap: 1vw;
}
.img-1 {
	width: 100% ;
}
.img-2 {
	width: 100% ;
}
.modal-img-content {
	width: 100%;
}
.section4 .modal-dialog {
	width: 70vw;
	margin: 30px auto;
	padding: 4vw 0 0 0;
}
.section4 .modal-content {
	background-color: unset;
}
.section4 .close {
	opacity: 1;
	align-items: center;
	float: none;
	position: relative;
    bottom: 2.5vw;
	:hover {
  		opacity: 0.5;
 	}
}
.btn-close-modal {
	width: 5vw;
}

@media(max-width: 768px){
	.section4{
		background: url(../images/layout/section4/mobile/bg.jpg) no-repeat center top;
        background-size: cover;
        height: auto;
        position: relative;
        background-size: 100%;
        height: 177vw;
	}
	.container-reward {
		width: 100%;
		left: 0;
		padding: 107vw 10vw 0;
	}
	.section4 .modal-dialog {
		width: 100vw;
		margin: 30px auto;
		padding: 4vw 0 0 0;
	}
	.section4 .close {
		opacity: 1;
		align-items: center;
		float: none;
		position: relative;
		bottom: 18vw;
		:hover {
			opacity: 0.5;
		}
	}
	.btn-close-modal {
		width: 13vw;
	}
}
/*====================== END SECTION 4 ===========================*/

/*======================== SECTION 5 ============================*/
.section5{
	background: url(../images/layout/section5/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 130vw;
	position: relative;
}
.padding-sec5{
	padding-top: 15vw;
}
.content-sec5 {
	padding: 2vw 0vw;
    width: 60vw;
}
.section5 .modal-dialog {
	width: 1250px;
	margin: 30px auto;
}
.section5 .modal-header {
	border: unset;
}
.bg-content {
    background: url(../images/layout/section5/frame-modal.png) no-repeat center top;
    background-size: 100%;
	width: 1250px;
    height: 700px;
    margin: 0 auto;
    border: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    margin-top: 100px;
}
.bg-content-match-sys {
    background: url(../images/layout/section5/frame-match-sys.jpg) no-repeat center top;
    background-size: 100%;
	width: 1250px;
    height: 700px;
    margin: 0 auto;
    border: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    margin-top: 100px;
}
.bg-content-match-proc {
    background: url(../images/layout/section5/frame-match-proc.jpg) no-repeat center top;
    background-size: 100%;
	width: 1250px;
    height: 700px;
    margin: 0 auto;
    border: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    margin-top: 100px;
}
.bg-content-match-tnc {
    background: url(../images/layout/section5/frame-match-tnc.jpg) no-repeat center top;
    background-size: 100%;
	width: 1250px;
    height: 700px;
    margin: 0 auto;
    border: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    margin-top: 100px;
}
.bg-content .modal-header{
	border: 0;
}
.bg-content-match-sys .close,
.bg-content-match-proc .close,
.bg-content-match-tnc .close {
	opacity: 1;
    margin-top: 12px;
    color: #8a6d3b;
    float: none;
    text-shadow: unset;
    font-size: 30px;
    padding: 10px;
    width: 120px;
}
.bg-content-match-sys .close img, 
.bg-content-match-proc .close img,
.bg-content-match-tnc .close img {
	width: 90px;
}
.bg-content-match-sys .close:hover, 
.bg-content-match-proc .close:hover,
.bg-content-match-tnc .close:hover  {
    opacity: 0.7;
}
.modal-backdrop {
    z-index: 0 !important;
}
.section5 .padding-sec5 .container-text {
	position: relative;
    width: 50%;
	height: 34vw;
    left: 29vw;
}
.content1 {
	font-family: 'Karla';
    font-size: 1.8em;
    color: #e9af02;
    padding: 1vw 0vw 3vw 0vw;
    text-align: start;
    width: 100%;
    position: relative;
}
.content2 {
	font-family: 'Karla';
    font-size: 1.8em;
    color: #e9af02;
    padding: 7vw 0vw 3vw 0vw;
    text-align: start;
    width: 100%;
}
.content3 {
	font-family: 'Karla';
    font-size: 1.8em;
    color: #e9af02;
    padding: 12.3vw 0vw 3vw 0vw;
    text-align: start;
    width: 100%;
}
.section5 a {
    position: relative;
	left: -16vw;
    font-family: 'Karla';
    font-size: 1vw;
    color: #ffc000;
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: bolder;
    letter-spacing: 0.1vw;
    text-underline-position: under;
}
.section5 a:hover {
    filter: grayscale(1);
}
#content1 h2, #content2 h2, #content3 h2{
	font-family: 'Anton';
    font-size: 40px;
	color: #d4c9b3;
	text-underline-position: under;
	text-decoration: underline;
    text-transform: uppercase;
	text-align: left;
	padding: 10px 55px;
	background: linear-gradient(#846933, #998244);
	-webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
#content1 p, #content2 p, #content3 p{
	margin-top: 40px;
    font-family: 'Karla';
    font-size: 20px;
    color: #ffc000;
    text-align: left;
    padding: 5px 55px;
    min-height: 530px;
    overflow: auto;
    height: 100px;
}

#content1 p::-webkit-scrollbar,
#content2 p::-webkit-scrollbar,
#content3 p::-webkit-scrollbar {
    width: 22px;
}

#content1 p::-webkit-scrollbar-track,
#content2 p::-webkit-scrollbar-track,
#content3 p::-webkit-scrollbar-track {
    background: #ffecb3;
	border-radius: 10px;
	border-width: 4px !important;
    border-style: solid !important;
    border-color: #ffc000 !important;
}

#content1 p::-webkit-scrollbar-thumb,
#content2 p::-webkit-scrollbar-thumb,
#content3 p::-webkit-scrollbar-thumb {
    background: #ffc000;
	border-radius: 10px;
	border-width: 4px !important;
    border-style: solid !important;
    border-color: #ffecb3 !important;
}

#content1 p::-webkit-scrollbar-thumb:hover,
#content2 p::-webkit-scrollbar-thumb:hover,
#content3 p::-webkit-scrollbar-thumb:hover {
    background: #ffbf009d;
	border-radius: 12px;
}

.modal-body {
    position: relative;
    padding: 15px 45px;
}
@media(max-width: 768px){
	.section5{
		background: url(../images/layout/section5/mobile/bg.jpg) no-repeat center top;
		background-size: 100%;
		height: 270vw;
		padding-top: 18vw;
		position: relative;
	}
	.padding-sec5 {
		padding-top: 35vw;
	}
	.content-sec5 {
		padding: 5vw 0vw;
		width: 90vw;
	}
	.bg-content {
		background: url(../images/layout/section5/frame-modal.png) no-repeat center top;
		background-size: cover;
		width: 100%;
		height: auto;
		margin: 0 auto;
		border: 0;
		-webkit-box-shadow: unset;
		box-shadow: unset;
		margin-top: 22vw;
	}
	.bg-content-match-sys {
		background: url(../images/layout/section5/mobile/frame-match-sys.jpg) no-repeat center top;
		background-size: 100%;
		width: 90%;
        height: 161vw;
		margin: 0 auto;
		border: 0;
		-webkit-box-shadow: unset;
		box-shadow: unset;
		margin-top: 100px;
	}
	.bg-content-match-proc {
		background: url(../images/layout/section5/mobile/frame-match-proc.jpg) no-repeat center top;
		background-size: 100%;
		width: 90%;
        height: 161vw;
		margin: 0 auto;
		border: 0;
		-webkit-box-shadow: unset;
		box-shadow: unset;
		margin-top: 100px;
	}
	.bg-content-match-tnc {
		background: url(../images/layout/section5/mobile/frame-match-tnc.jpg) no-repeat center top;
		background-size: 100%;
		width: 90%;
        height: 161vw;
		margin: 0 auto;
		border: 0;
		-webkit-box-shadow: unset;
		box-shadow: unset;
		margin-top: 100px;
	}
	.bg-content-match-sys .close img, 
	.bg-content-match-proc .close img, 
	.bg-content-match-tnc .close img {
		width: 36px;
	}
	.bg-content-match-sys .close, 
	.bg-content-match-proc .close, 
	.bg-content-match-tnc .close {
		opacity: 1;
		margin-top: 35px;
		color: #8a6d3b;
		float: none;
		text-shadow: unset;
		font-size: 30px;
		padding: 0px;
		width: 120px;
	}
	.bg-content .close {
		/* margin-top: 55px; */
		margin-top: 3.5vw;
        font-size: 6vw;
        width: 13vw;
        padding: 2.5vw;
	}
	.content1, .content2, .content3 {
		font-size: 0.8rem;
	}
	.content1 {
		padding: 1vw 0vw 1vw 0vw;
	}
	.content2 {
		padding: 0vw 0vw 1vw 0vw;
        margin: 41vw 0 0 0;
	}
	.content3 {
		margin: 40vw 0 0 0;
        padding: 0vw 0vw 1vw 0vw;
	}
	.section5 .padding-sec5 .container-text {
		position: relative;
		width: 50%;
		/* height: 34vw; */
		left: 50vw;
	}
	.section5 a {
		top: 0vw;
		position: relative;
		left: -14.5vw;
		font-family: 'Karla';
		font-size: 0.8rem;
		color: #ffc000;
		text-decoration: underline;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 0.1vw;
		text-underline-position: under;
	}

	.section5 a:hover {
		filter: none;
	}

	.section5 .modal-dialog {
		width: 100%;
		margin: 30px auto;
	}

	.modal-header {
		padding: 0vw;
		border-bottom: 1px solid #e5e5e5;
	}

	.modal-body {
		position: relative;
		padding: 30px 25px;
	}

	#content1 h2, #content2 h2, #content3 h2{
		font-family: 'Anton';
		font-size: 5vw;
		color: #d4c9b3;
		text-underline-position: under;
		text-decoration: underline;
		text-transform: uppercase;
		text-align: left;
		padding: 0;
		background: linear-gradient(#846933, #998244);
		-webkit-background-clip: text;
				background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-top: 10vw;
        margin-bottom: 4vw;
	}
	#content1 p, #content2 p, #content3 p{
		font-family: 'Karla';
		font-size: 3vw;
		color: #ffc000;
		text-align: left;
		padding: 0px;
		min-height: 105vw;
		overflow: auto;
		height: 10vw;
	}
	
	#content1 p::-webkit-scrollbar,
	#content2 p::-webkit-scrollbar,
	#content3 p::-webkit-scrollbar {
		width: 3px;
	}
	
	#content1 p::-webkit-scrollbar-track,
	#content2 p::-webkit-scrollbar-track,
	#content3 p::-webkit-scrollbar-track {
		background: #282213;
		margin-left: 3px;
	}
	
	#content1 p::-webkit-scrollbar-thumb,
	#content2 p::-webkit-scrollbar-thumb,
	#content3 p::-webkit-scrollbar-thumb {
		background: #614f28;
	}
	
	#content1 p::-webkit-scrollbar-thumb:hover,
	#content2 p::-webkit-scrollbar-thumb:hover,
	#content3 p::-webkit-scrollbar-thumb:hover {
		background: #614f28a5;
	}
}
@media(max-width: 425px){ 
	.section5 a {
		left: -17vw;
	}
	.bg-content-match-sys .close, 
	.bg-content-match-proc .close, 
	.bg-content-match-tnc .close {
		margin-top: 79px;
	}
}
@media(max-width: 375px){
	.section5 a {
		left: -16vw;
	}
	.bg-content-match-sys .close, 
	.bg-content-match-proc .close, 
	.bg-content-match-tnc .close {
		margin-top: 58px;
	}
}
@media(max-width: 320px){
	.section5 a {
		left: -14.5vw;
	}
	.bg-content-match-sys .close, 
	.bg-content-match-proc .close, 
	.bg-content-match-tnc .close {
		margin-top: 35px;
	}
}
/*====================== END SECTION 5 ===========================*/

/*========================= FOOTER ==============================*/
footer{
	background: url(../images/layout/footer/bg.jpg) no-repeat center top;
	background-size: 100%;
	height: 12vw;
	padding: 1vw 0 0;
	/* color: #522732; */
	color: #cecdcd;
	font-family: serif;
}
footer img.logo{
	/* width: 11.823vw; */
	width: 20.823vw;
	margin-top: 0.5vw;
}
.icon-footer{
	width: 2.5vw;
    padding: 0vw 0.3vw;
}
.icon-footer:hover {
    filter: grayscale(1);
}
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 #cecdcd;
	padding: 0 10px;
}
ul.agreement li a{
	color: #cecdcd;
	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: #cecdcd;
		font-family: serif;
	}
	.icon-footer {
		width: 9vw;
		padding: 0vw 0.3vw;
	}
	.icon-footer:hover {
		filter: grayscale(1);
	}
	footer img.logo {
		width: 60vw;
		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=============================*/