@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body { font-family: "Barlow", sans-serif; line-height:1.2; font-size:15px; color:#fff; background: #071724 url("../images/bg.jpg")no-repeat top center; background-size: cover;}

a { text-decoration: none; cursor:pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

a:hover, a:focus, button:focus, button:hover { text-decoration: none; outline: none; }

img { max-width:100%;}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="number"], textarea, select {
    color: #666;
    width: 100%;
}
button {
	background: none;
	border: none;
	padding: 0;
}
.t-body {
	overflow: hidden;
}
.deco {
	position: absolute;
}
.max-container {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
}
.top-sec {
    position: relative;
    text-align: center;
	padding: 10px 0 45px;
}
.logo {
    max-width: 35%;
    margin: 0 auto;
}
.title-top {
	position: relative;
	max-width: 1100px;
	margin: 0 auto 15px;
}
.title-img {
	position: relative;
	z-index: 1;
}
.deco.fw-1 {
    left: 0%;
    top: -12%;
    max-width: 46%;
	animation: blink 2.5s ease-in-out infinite;
    animation-delay: 0.4s;
    opacity: 0;
}
.deco.fw-2 {
    right: -3%;
    top: -22%;
    max-width: 48%;
	animation: blink 2.5s ease-in-out infinite;
}
@keyframes blink {
    0% {
        transform: scale(0.2);
		opacity: 0;
    }
    50% {
        transform: scale(1);
		opacity: 1;
    }
    100% {
        transform: scale(0.9);
		opacity: 0;
    }
}
.event-container {
    position: relative;
    background: #08202f;
    border-radius: 20px;
    padding: 15px 10px 15px;
    margin: 80px auto 30px;
    max-width: 1200px;
}
.total-amt-wrap {
    position: relative;
    margin: -80px auto 30px;
}
.tsa-title {
    font-size: 27px;
}
.total-base {
    position: relative;
    max-width: 430px;
    margin: 0 auto;
}
.acuum-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e5bd62;
    font-size: 37px;
    font-weight: 500;
}
.title-1 {
    font-size: 36px;
    font-weight: 600;
    color: #e5bd62;
}
.subtitle {
    font-size: 24px;
    max-width: 650px;
    margin: 0 auto;
}
.gold-text {
	color: #e5bd62;
}
.mission-wrapper {
    position: relative;
}
.msbox {
    position: relative;
    background: linear-gradient(0deg, rgba(12, 57, 93, 1) 21%, rgba(17, 42, 57, 1) 57%);
    display: inline-block;
    max-width: 348px;
    width: 31%;
    margin: 8% 0.5% 3%;
    border-radius: 13px;
    padding: 10px 10px 32px;
}
.level-img {
    position: relative;
    max-width: 82%;
    margin: -30% auto 0;
}
.prize-bonus {
    position: absolute;
    left: 0;
    right: 0;
    top: 80.5%;
    color: #ffe27f;
    font-size: 28px;
    font-weight: 500;
}
.msinfo {
    font-size: 22px;
}
.lvl-label {
    position: absolute;
	z-index: 3;
    left: 0;
    top: 12px;
    padding: 1px 10px;
    background: linear-gradient(to left, rgba(248, 236, 127, 1) 0%, rgba(201, 158, 66, 1) 100%);
    color: #000;
    font-weight: 600;
    font-size: 15px;
    border-radius: 0 10px 10px 0;
}
button.claim-btn {
    background: linear-gradient(to left, rgba(248, 236, 127, 1) 0%, rgba(201, 158, 66, 1) 100%);
    width: 100%;
    max-width: 52%;
    margin: 0 auto;
    border-radius: 8px;
    height: 45px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    padding-bottom: 1%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -11%;
    z-index: 2;
	pointer-events: none;
}
.tick-icon {
    margin-right: 10px;
    vertical-align: text-bottom;
}
.tick-icon img {
    max-height: 24px;
}
.active button.claim-btn {
    animation: glow 1.5s ease-in-out infinite;
	pointer-events: auto;
}
.active button.claim-btn:hover {
	transform: scale(0.98);
	filter: brightness(1.1);
}
@keyframes glow {
0% {
	box-shadow: none;	
}
50% {
	box-shadow: 0 0 14px -1px #ffed7d;
	filter: brightness(1.05);
}
100% {
	box-shadow: none;
}
}

button.tnc-btn {
    position: relative;
    max-width: 418px;
    margin: 0 auto;
}
button.tnc-btn:hover {
	transform: scale(0.98);
	filter: brightness(1.1);
}
.tnctext {
    position: absolute;
    left: 22%;
    right: 13px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 27px;
    font-weight: 600;
}
button.close-x {
    position: absolute;
    z-index: 1;
    color: #fff;
    right: 10px;
    top: 6px;
}
.modal-dialog.popup {
    max-width: 750px;
}
.modal-content.popup {
    background: #0e0f14;
    border: 1px solid #dfa157;
    border-radius: 10px;
    padding: 15px 20px;
}
.title-popup {
    text-align: center;
    margin-bottom: 10px;
    color: #e5bd62;
    font-size: 24px;
    font-weight: 600;
}
ol.terms {
	padding-left: 17px;
}
ol.terms li {
	padding: 1px 0;
}



@media(max-width: 1080px) {
.lvl-label {
    font-size: 1.4vw;
}	
.msinfo {
    font-size: 2vw;
}	
.prize-bonus {
    font-size: 2.4vw;
}
button.claim-btn {
    height: 4vw;
    font-size: 2.2vw;
}	
.tick-icon img {
    max-height: 2.2vw;
}	
}


@media(max-width: 767px) {
.title-1 {
    font-size: 4vw;
}	
.subtitle {
    font-size: 3.1vw;
}
.msbox {
    width: 48%;
    margin: 14% 0.5% 5%;
}	
.lvl-label {
	font-size: 2.4vw;
}	
.prize-bonus {
	font-size: 3.6vw;
}	
.msinfo {
	font-size: 3vw;
}
button.claim-btn {
	height: 6vw;
	font-size: 3.5vw;
}	
.tick-icon {
    margin-right: 1vw;
}	
.tick-icon img {
	max-height: 3.2vw;
}	
button.tnc-btn {
    max-width: 55%;
}	
.tnctext {
    font-size: 3.5vw;
}	
}


@media(max-width: 480px) {
.title-1 {
	font-size: 20px;
}	
.subtitle {
	font-size: 15px;
}	
.total-amt-wrap {
    margin: -18% auto 5%;
}	
.tsa-title {
    font-size: 22px;
}	
.total-base {
    max-width: 90%;
}	
.acuum-text {
    font-size: 7.5vw;
}	
	
	
.modal-content.popup {
    padding: 15px 15px;
    font-size: 14px;
}	
.title-popup {
    font-size: 20px;
}	
}