@charset "utf-8";
/* reset css */
body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,p,table,th,td,form,fieldset,legend,textarea,input,select,textarea,button,article,aside,footer,header,section,footer,nav,main{margin:0;padding:0}
article,footer,header,section,footer,nav,main{display:block}
html,body{height:100%;font-family: Poppins, sans-serif !important; font-size: 14px; color: #85888e;}
fieldset,li,img{border:0;vertical-align:top}
ul,ol{list-style:none}
button{overflow:visible;border:0;background-color:transparent;cursor:pointer}
button::-moz-focus-inner{padding:0;border:0}
address,caption,em{font-style:normal}
a{text-decoration:none;display: block;}
a:hover,a:active,a:focus{background-color:transparent}
table{border-collapse:collapse;border-spacing:0}

.mo{display: none;}
.ads{text-align: center;margin-block: 1rem;}
.ads.hide{display: none;}
.ads_title{font-size: 10px;text-align: center;}
.main{background-color: aliceblue;}

/* loading */
.preloader{background:#fff;height:100%;position:fixed;left:0;top:0;bottom:0;right:0;text-align:center;z-index:9999}
.loader{position:fixed;width:84px;height:84px;left:50%;top:50%;transform:translate(-50%,-50%)}
.loader span{display:block;width:35px;height:8px;border-radius:4px;background:#5d44eb;position:absolute;animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease}
.loader span:nth-of-type(4n - 3){left:24.5px;animation-name:rotate1}
.loader span:nth-of-type(3){left:2px}
.loader span:nth-of-type(7){right:2px}
.loader span:nth-of-type(4n-1){top:24.5px;width:8px;height:35px;animation-name:rotate1}
.loader span:nth-of-type(5){bottom:0}
.loader span:nth-of-type(4n - 2){transform:rotate(-45deg);animation-name:rotate2}
.loader span:nth-of-type(2){top:12px}
.loader span:nth-of-type(6){bottom:12px;right:0}
.loader span:nth-of-type(4n){transform:rotate(45deg);animation-name:rotate3}
.loader span:nth-of-type(4){bottom:12px}
span:nth-of-type(8){top:12px;right:0}
@keyframes rotate1 {
from{transform:rotate(0deg)}
to{transform:rotate(180deg)}
}
@keyframes rotate2 {
from{transform:rotate(-45deg)}
to{transform:rotate(135deg)}
}
@keyframes rotate3 {
from{transform:rotate(45deg)}
to{transform:rotate(225deg)}
}

/* header */
.header{box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);padding: 1rem 0;}
.header_content{display: flex;align-items: center;    justify-content: space-between;position: relative;}
.logo{display: flex;align-items: center; column-gap: 1rem;}
.btn_menu{padding: 10px; display: none;font-size: 24px;}

.logo_name{width: 200px;}
.logo_name a, .footer_logo a{display: block; width: 100%;color: #ffc045;font-size: 24px; font-family: cursive}
.logo_name img{width: 100%;}

.nav{display: flex;column-gap: 1rem;align-items: center;}
.list_nav{display: flex; column-gap: 1rem;}
.list_item a{display: flex;align-items: center;column-gap: .5rem;}
.list_link{font-size: 14px;color: #fff; padding: 5px 10px;border-radius: 10px;}
.list_link img{width: 37px;}
.list_item.green a{background-color: rgb(145, 219, 49);}
.list_item.violet a{background-color: rgb(185, 93, 255);}
.list_item.blue a{background-color: rgb(51, 202, 255);}

.search{border: 1px solid #ededee;width: 240px;padding: 4px 15px;border-radius: 5px; display: flex;justify-content: space-between;}
.search input{border: 0;outline: none;}
.search input::placeholder{color: rgb(51, 202, 255)}

/* main */
.main{padding-block: 2rem;}
.breadcrum{display: flex; column-gap: .5rem; margin: .3rem 0;}
.breadcrum a{color: #85888e;}
.banner{margin-top: 1rem;}
.banner_link img{width: 100%;}
.banner_link .pc{display: none;}

.info{margin-top: 2rem;}
.box_img{width: 120px;height: 120px;}
.box_img img{width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}
.intro{display: flex; column-gap: 1rem;align-items: center;}
.box_name a{color: #181a1b;font-size: 28px;font-weight: 600;}
.rating{margin: .3rem 0;}
.rating i{color: #ffa300;font-weight: 900;}
.btn_down{margin: 3rem auto;}
.btn_get { background-image: linear-gradient(270deg,#129821,#47c001); width: 300px; margin: 0 auto; height: 44px; color: #fff; text-align: center; display: block; text-decoration: none; font-size: 16px; border-radius: 22px; line-height: 44px; font-weight: 700; transition: all .4s cubic-bezier(.2,.57,.36,.8);}
.amination_green { box-shadow: 0 0 0 0 rgba(90,153,212,.5); animation: c 1.5s infinite;}
@keyframes c{
  0% {
    transform: scale(.9);
}
70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(90,153,212,0);
}
100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(90,153,212,0);
}
}

.content_txt{margin-top: 1rem;color: rgba(11, 17, 31, 0.72); font-size: 1.1rem;font-weight: 400; text-align: justify; line-height: 1.5;}
.content_title{font-size: 20px;font-weight: 600; color: #181a1b; margin-top: 1rem;}
.more_title{font-size: 16px; font-weight: 600; text-transform: uppercase; margin-bottom: 16px; color: #181a1b;}
.info_more{display: flex;column-gap: 1rem;margin-top: 2rem;}
.info_more.app{
  display: none;
}

ul.content_txt{list-style: disc;margin-left: 1.5rem}

.slide{display: flex;column-gap: .8rem;margin-top: 2rem;}
.slide_img{height: 160px; flex: 1;}
.slide_img.app{height: auto; flex: 1;}
.slide_img img{width: 100%;height: 100%; border-radius: 8px; object-fit: cover}

.related{ margin-top: 2rem;}
.section_title{font-size: 24px;font-weight: 600;color: #181a1b;box-shadow: 0 4px 24px 0 rgb(43 64 115 / 8%); margin-bottom: 1rem;}
.link_item{display: flex;align-items: center; column-gap: .7rem;}
.link_item img{width: 90px;height: 90px;object-fit: cover;border-radius: 7px;}
.link_name{font-size: 16px; color: #000;}
.section.related .link_group{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 1rem;}
.section.related .link_item{padding: 1rem;box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);border-radius: 10px;background-color: #fff;}

.category{margin-top: 2rem;}
.list_tag{display: flex;flex-wrap: wrap; column-gap: .7rem; row-gap: .7rem
  ;}
.tag{font-size: 16px;color: #4f535d;padding: 8px 15px;border-radius: 7px;
background-color: #fff;}
.tag:hover{background-color: rgb(159, 189, 216);color: #fff;}

.comment{margin-top: 2rem;padding: 2rem;box-shadow: 1px 16px 33px -3px rgba(0, 0, 0, 0.55);background-color: #fff;}
.user_info{display: flex; column-gap: 1rem;}
.user_info div{flex: 1;}

.comment_list{margin-top: 2rem;}
.comment_item{padding: 1rem 2rem;border: 1px solid #dfdfdf; border-radius: 10px;margin-top: 1rem;}
.user_comment{display: flex;column-gap: .7rem; align-items: center;}
.ava{width: 36px;height: 36px;border-radius: 50%;border: 2px solid #01c583;}
.nickname{color: #273a4e;font-weight: 500;font-size: 16px;line-height: 16px;}
.time{font-size: 12px;}
.comment_txt{font-size: 16px;color: #212529; line-height: 1.75; margin-top: .5rem;}

.lever_up{margin-top: 3rem; color: #181a1b; display: flex;justify-content: space-between;}
.desc{width: 300px;}
.desc h6{font-size: 32px;font-weight: 600;}
.desc p{margin: 1.3rem 0;}
.btn-warning{color: #fff;font-size: 16px;padding: .7rem 2rem;}
.lever_up img{width: 400px;}

.section.popular{padding-left: 1rem;}
.section.popular .link_item{margin-top: .7rem;padding: 1rem;background-color: #fff;
border-radius: 10px;border: #dfdfdf;}
.section.popular .link_item:hover{box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);border-radius: 10px;transition: .4s;}

.progressing{margin-block: 2rem;}
.progressing_item{margin-top: 0.8rem}
.progressing_item .label{font-size: 1.1rem;color: #181a1b;font-weight: 500;display: flex;justify-content: space-between;margin-bottom: 0.3rem;}
.progressing_item .progress{background-color: #ffc045;height: 10px;}
/* footer */
.footer{padding:2rem 0;background-color: #2a254ee3;}
.footer_content{display: flex;align-items: center;flex-direction: column;}
.footer_info h2 img{width: 200px;}
.footer_info h2{text-align: center;}
.footer_txt{color: #fff;text-align: justify;margin-top: 1rem;}
.social{display: flex;align-items: center;column-gap: 1rem; margin-top: 2rem;}
.social a{color: #ccc; font-size: 12px;}

.dimmed{display: none;position: fixed;top: 0;width: 100vw;height: 100vh;left: 0;background-color: #000;opacity: .3;z-index: 2;}
.menu_cont{display: none;position: fixed;top: 0;left: 0;z-index: 3;width: 300px;height: 100vh;background-color: #fff;padding: 6rem 2rem 2rem 0;transition: .4s;animation: width .4s ease-in;}
@keyframes width {
  from{left: -300px;}
  to{left: 0;}
}
.btn_close{position: absolute;top: 2rem;right: 2rem;}
.menu_link{display: flex;align-items: center;column-gap: .5rem;margin-top: 1rem; padding: .7rem 2rem ;background-color: #85d8fc;width: 240px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;font-size: 18px;color: #fff;}
.menu_link img{width: 52px;height: 52px;border-radius: 50%;border: 2px solid #fff;}
.menu_link:hover{background: rgb(255, 160, 26);color: #fff;}

.desc_block{background-color: #fff;padding: 2rem;box-shadow: 0px -10px 15px -3px rgba(0,0,0,0.1),0px 10px 15px -3px rgba(0,0,0,0.1);margin-top: 2rem;}
.sub_tit{font-size: 18px;color: #181a1b;margin-bottom: 1rem;}
.block_list{padding-left: 1.5rem;}
.btn_down .content_title{font-size: 18px;text-align: center;margin-bottom: 1rem;}

/* review */
.popular.list02{display: block;padding-left: 0;min-height: 66vh;}
.list02 .link_item{display: inline-flex;width: 30%;margin: 1rem 0.5rem 0;}
.list02 .link_item img{width: 114px;height: 114px;}

/* about us */
.content.about{width: 900px;margin: 2rem auto;}
.content.about .breadcrum{justify-content: center;}
.about_container{text-align: center;}
.about_container h2{font-size: 4rem;font-weight: 600;line-height: 1.13;color: #0b111f;margin-bottom: 12px;}
.about_txt{font-size: 1.2rem;line-height: 1.73;color: rgba(11, 17, 31, 0.72);margin: 0 0 16px;font-weight: 500;}
.about_content{display: flex;align-items: center; column-gap: 3rem;}

@media screen and (max-width: 992px) {
  .popular{display: none;}
  .popular.bl{display: block;padding-left: 0; margin-top: 2rem;}
  .nav{display: none;}
  .section.related .link_group{grid-template-columns: 1fr 1fr;}
  .lever_up img {width: 300px;object-fit: contain;}
  .logo{flex: 1;justify-content: center;column-gap: 0;}
  .list02 .link_group .link_item{width: 45%;}
  .content.about{width: 100%;margin: 1rem auto;}
  .about_content{flex-direction: column;row-gap: 2rem;}
  .btn_menu{display: block;position: absolute;top: 0;left: 0;padding:0;}
  .logo_name{flex: 1;text-align: center;}
}

@media screen and (max-width: 567px) {
  .section.related .link_group{grid-template-columns: 1fr;}
  .lever_up{flex-direction: column;align-items: center;}
  .lever_up .desc{text-align: center;}
  .info_more{flex-direction: column;}
  .slide_img:not(:first-child){display: none}
  .slide_img{height: 200px;}
  .logo_name{width: 130px; padding: 8px 0;}
  .banner_link .pc{display: none;}
  .banner_link .mo{display: block; border-radius: 12px;}
  .box_info{flex:1;text-align: center;}
  .slide_img{height: auto;}
  .box_img{display: none;}

  .info.play .box_img{display: block;}
  .info.play .box_trade{display: none;}
  .info.play .box_info{text-align: left;}
  .info.play .box_img{width: 80px;height: 80px;}
  .info.play .box_name a{font-size: 20px;}

  .btn_get{width: 280px;}
  .main {padding: 1rem 0;}
  .btn_down{margin: 2rem auto;}
  .list02 .link_group .link_item{width: 100%;    margin: 1rem 0 0;}
  .about_container h2{font-size: 2rem;}
  .about_img img{width: 100%;}
}