/* reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* reset end*/
/* font-family: 'DM Serif Display', serif;
font-family: 'Montserrat', sans-serif; */
body {
    background: #001c3a url(../images/bg.jpg) no-repeat top center;
    width: 100%;
    min-height: 100vh;
    font-family: 'Montserrat', sans-serif; 
    font-size: 14px;
    background-size: cover;
}
header {
    max-width: 386px;
    margin: 0px auto;
    text-align: center;
    z-index: 1;
    position: relative;
}
header img { width: 386px; }
.main-con {max-width: 520px; margin: 20px auto 0px auto;z-index: 2;position: relative; padding-bottom: 20px;}
.main-con > ul > li {
    margin-bottom: 40px;
}
.menucon { 
    width: 200px; 
    height: 150px; 
    background-color: rgb(0 13 57 / 67%);
    position: fixed; 
    top: 405px; 
    right: -webkit-calc(50% - 520px);
    right: calc(50% - 520px);
    z-index: 3;
    border: 1px solid rgb(100 181 246 / 55%);
    border-radius: 10px;
}
.btntext.smaller {
    display: none;
}
.btntext.longer {
    display: initial;
}
.btnmenu a {
    color: #fff;
    display: block;
    line-height: 34px;
    text-decoration: none;
}
.btnmenu {
    background: rgb(0 25 62);
    background: linear-gradient(50deg, rgb(0 25 62) 0%, rgba(31,146,254,1) 100%);
    width: 90%;
    margin: 10px auto;
    height: 36px;
    border-radius: 5px;
}
.btnmenu:hover {
    transform: scale(1.04);
}
.btnmenu img {
    height: 24px;
    vertical-align: middle;
    margin: 0px 5%;
}
.btntext { vertical-align: middle; }
.menuconmobile, .menucondesktop { 
    display: none;
    width: 55px; 
    height: auto; 
    /* background-color: rgb(16 65 109 / 80%); */
    background-color: rgb(255 255 255 / 40%);
    position: fixed; 
    top: 100px; 
    /* left: 750px;  */
    right: -webkit-calc(50% - 365px);
    right: calc(50% - 365px);
    z-index: 3;
    border: 1px solid rgb(100 181 246 / 55%);
    border-radius: 100px;
    text-align: center;
}
.btnmenumobile { margin: 5px; }
.btnmenumobile.bigger { margin: 5px 0px; }
.btnmenumobile img { width: 40px; }
.btnmenumobile.bigger img { width: 55px; }
.act-con {
    min-height: 150px;
    background: transparent url(../images/border.png) no-repeat;
    position: relative;
    width: 90%;
    padding: 50px 5% 10px 5%;
}
.act-con.act2 { padding-bottom: 110px; }
.act-con.act4 { padding-bottom: 30px; }
.numbercon {
    width: 64px;
    height: 59px;
    background: url(../images/number.png) no-repeat;
    position: absolute;
    top: -29px;
    left: 241px;
    text-align: center;
    line-height: 59px;
    font-size: 35px;
    font-family: 'DM Serif Display', serif;
    font-weight: bold;
}
.act-title {
    text-align:center;
    font-family: 'Montserrat', sans-serif; 
    font-size: 27px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 37px;
}
.act3 .act-title, .act4 .act-title, .act5 .act-title {
    text-align:left;
}
.text-gradient {
    background: #FCFFD4;
    background: linear-gradient(to bottom, #FCFFD4 0%, #FFEA36 50%, #F16200 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0px 8px 16px rgb(255 152 0 / 40%);
}
.act-title strong { font-size: 37px; }
.content1 {
    margin: 15px auto;
    position: relative;
    color: #fff;
    line-height: 20px;
}
.content1 li {
    margin-bottom: 8px;
    font-weight: normal;
    color: #fff;
    font-size: 13px;
}
.content1 li > span { color: #ffc300;  }
.act1 .content1 .act-player {
    position: absolute;
    top: -10px;
    right: -7%
}
.act2 .content1 ul{
    width: 50%;
    float: right;
}
.act2 .content1 ul li{ line-height: 20px;}
.act2 .content1 .act-player {
    position: absolute;
    top: -50px;
    left: -5%
}
.act5 .content1 ul{
    width: 50%;
}
.act4 .act-player {
    position: absolute;
    bottom: -70px;
    right: -10%
}
.act5 .act-player {
    position: absolute;
    top: -119px;
    right: -22%;
}
.act5 .act-player img{
    width: 290px;
}
.act5 .act-title {
width: 75%;
}
.footer1 {
    background: url(../images/button1.png) no-repeat;
    width: 100%;
    height: 95px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
}
.act1text1 {
    padding-top: 30px;
}

.act1text2 {
    font-size: 18px;
}
.footer3 {
    color: #fff;
}
.circlecon li {
    display: inline-block;
    text-align: center;
    width: 19%;
}
.labelcircle {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: normal;
    color: #ffc300; 
}
.imgcircle {
    width: 40px;
    height: 37px;
    background: url(../images/shape6.png) no-repeat;
    text-align: center;
    line-height: 37px;
    font-size: 14px;
    color: #010e42;
    font-weight: bold;
    margin: 0px auto;
}
@media screen and (max-width: 1100px) {
    .menucon { 
        width: 150px;
        right: -webkit-calc(60% - 520px);
        right: calc(60% - 520px);
    }
    .btntext.smaller {
        display: initial;
    }
    .btntext.longer {
        display: none;
    }

}
@media screen and (max-width: 900px) {
    .menucon { display: none; }
    .menuconmobile, .menucondesktop { display: block; }
 }
 @media screen and (max-width: 768px) {
    .menuconmobile, .menucondesktop {
        right: 10px;
    }
    }
@media screen and (max-width: 650px) {
    body {
        background: #01061a url(../images/bg-m.jpg) no-repeat top center;
        background-size: 100%;

 }
    .coinscon {
        background: transparent url(../images/coin-bottom.png) no-repeat top center;
    background-size: 100% 100%;
    width: 100%;
    height: 127px;
    position: relative;
    z-index: 2;
    }
    header {
        display: none;
    }
    .main-con {
        width: 94%;
        padding: 430px 3% 20px 3%;
    }
    .main-con > ul > li:nth-child(5)  {
        margin-bottom: 0px;
    }
    .act5 .act-player {
        top: initial;
        right: -7%;
        bottom: -10px;
        z-index: 1;
    }
    .act5 .act-player img {
        width: 174px;
    }
     .act5 .content1 ul {
        width: 56%;
    }
    .act4 .act-player {
        position: absolute;
        bottom: -28px;
        right: -9%;
    }
    .act4 .act-player img {
        width: 135px;
    }
    .act-con {
        background-size: 100%;
        padding: 40px 5% 10px 5%;
    }
    .numbercon {
        left: 42%;
    }
    .act-title {
        font-size: 18px;
        line-height: 28px;
    }
    .act-title strong {
        font-size: 23px;
    }
    .act1 .content1 .act-player {
        top: 2px;
        right: -3%;
    }
    /* .act1 .content1 .act-player img{
        width: 200px;
    } */
    .act1 .content1 ul {
        width: 61%;
    }
    .content1 {
        line-height: 14px;
        margin-top: 10px;
    }
    .content1 li {
        margin-bottom: 6px;
        font-size: 12px;
    }
    .act1text1 {
        padding-top: 15px;
        font-size: 12px;
    }
    .footer1 {
        background-size: 100%;
        height: 60px;
    }
    .act1text2 {
        font-size: 12px;
    }
    .act-con.act2 {
        padding-bottom: 20px;
        position: relative;
    }
    .act-con.act2:before {
       content: "";
       display: block;
       position: absolute;
       background: url(../images/coin1.png);
       background-size: 100%;
       width: 47px;
       height: 40px;
       top: -15px;
       right: -5px;

    }
    .act-con.act3:before {
        content: "";
        display: block;
        position: absolute;
        background: url(../images/coin2.png);
        background-size: 100%;
        width: 38px;
        height: 32px;
        top: -5px;
        left: -5px;
 
     }
     .act-con.act3 .content1 {
         position: relative;
     }
     .act-con.act3 .content1:before {
        content: "";
        display: block;
        position: absolute;
        background: url(../images/coin1.png);
        background-size: 100%;
        width: 47px;
        height: 40px;
        top: -10px;
        right: -22px;
 
     }
     .act3 .content1 ul {
        width: 93%;
    }
    .act-con.act4:before {
        content: "";
        display: block;
        position: absolute;
        background: url(../images/coin2.png);
        background-size: 100%;
        width: 38px;
        height: 32px;
        bottom: 0px;
        left: -5px;
 
     }
     .act-con.act4 {
        padding-bottom: 0px;
    }
    .act-con.act5:before {
        content: "";
        display: block;
        position: absolute;
        background: url(../images/coin3.png);
        background-size: 100%;
        width: 71px;
        height: 60px;
        top: 20px;
        right: 20px;
 
     }
     .act5 .act-title { width: 76%; }
    .act2 .content1 ul {
        width: 45%;
    }
    .act2 .content1 .act-player {
        top: -35px;
        left: -7%;
    }
    .act2 .content1 .act-player img { width: 180px; }

 }

@media screen and (max-width: 499px) {
    .main-con {
        padding: 245px 3% 20px 3%;
    }
 }
 @media screen and (max-width: 413px) {
    .main-con {
        padding: 230px 3% 20px 3%;
    }
 }
 @media screen and (max-width: 380px) {
    .main-con {
        padding: 230px 3% 20px 3%;
    }
    .act1 .content1 .act-player {
        top: -3px;
        right: -4%;
    }
    .act1text1 {
        padding-top: 12px;
    }
 }