﻿/*
	* ==============================================================================
        _  _        _                 _                                 _                                               
    ___| |(_) ___ _| |_  ____ _____ _| |_  ___   ___  _   _  _____  ___| |  _     _   _     _       _  _   _   _        
   / __  || |/ __|__  _|/ _  |  _  |_   _|/ __| / _ \| | | ||  _  |/ __  | |_| | |_  |_  | | |  /|   |  | |_  |_   /|   
  | (__| || |\__ \ | |_  (_| | | | | | |_ \__ \| |_| | |_| || | | | (__| |  _  |   |   | | | | |_|  _|  | | | | | |_|   
   \_____||_||___/ |___|\____|_| |_| |___||___/ \___/|_____||_| |_|\_____| |_| |  _|  _| | |_|   | |_   | |_| |_|   |   
   
	* CSS Document Css Reset 
	* CSS Document Css DsGrid Start 
	* Author: DistantSound 
	* Date: 2020 
	* IDE:  

  * ---------------------------------------------------------------------------------------------
*/
@font-face{
  font-family:"eras-demi-itc";
  src:url("../font/ERASDEMI.TTF") format("woff"),
  url("../font/ERASDEMI.TTF") format("opentype"),
  url("../font/ERASDEMI.TTF") format("truetype");
}

body{font-family:"eras-demi-itc";} 

.bgc-white, .bgc-white-h:hover{background-color:#fff;}
.bgc-black, .bgc-black-h:hover{background-color: rgba(0, 0, 0, 0.5);}
.bgc-purple-1, .bgc-purple-1-h:hover{background-color:#3e0477;} 
.bgc-purple-2, .bgc-purple-2-h:hover{background-color:#360268;} 
.bgc-purple-3, .bgc-purple-3-h:hover{background-color:#3e0155;} 
.bgc-purple-4, .bgc-purple-4-h:hover{background-color:#3a013f;} 
.bgc-purple-5, .bgc-purple-5-h:hover{background-color:#3f0134;} 

/* color ==================*/
.c-white, .c-white-h:hover{color:#fff;}
.c-purple, .c-purple-h:hover{color:#cd93fa;}
.c-orange, .c-orange-h:hover{color:#f4d394;}
 
/* nav-fixed-openclose ==================*/
.nav-fixed-openclose{width:.6rem;height:.6rem;position:relative;right:.15rem;top:.2rem;z-index:9999;}
.nav-fixed-openclose .header-nav-open{width:.6rem;height:.6rem;line-height:.6rem;color: #cd93fa; }
.nav-fixed-openclose.active .header-nav-open{color: #cd93fa;-webkit-transform: rotateZ(90deg); -moz-transform: rotateZ(90deg);transform: rotateZ(90deg);}

header{height: 1rem; position: fixed;top: 0;z-index: 9999;background-color: rgba(0, 0, 0, 0.6); }
.header.current{background-color: rgba(0, 0, 0, 0.9);}
 
header .header-body{height: 1rem;}
header .header-body .a-logo{position: absolute; left: 0; top: 0;}
header .header-body .a-logo img{width: 2.4rem;}
header .nav{background-color:rgb(14, 4, 12);height: calc(100vh - 1rem);}
header .nav ul li{border-bottom: 1px solid #2e0c28;}
header .nav .current .a-link{color: #fff;}
header.active .nav{display: block;}
header .nav ul li:last-child {border:none}
header.active{background-color: #0e030c;}

.section-1 .fluid-t{padding: 1.6rem 0 .8rem 0; background-image: linear-gradient(68deg, #aa0451 0%, rgba(83, 5, 160, 0.8) 50%),url("../images/bg-001.png"); background-size: 150%  auto;}
.section-1 .fluid-b{padding: .6rem 0;}
.section-1 .title h1 .s-pan{background: #EDB630;background: linear-gradient(to right, #EDB630 28%, #35F03A 96%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;}
.section-1 .row-ul .div-box .list-box{border: 1px solid #7a4aa8;background-color: #4f2975;box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.18);}
.section-1 .google-play-apple .btn-google-play,
.section-1 .google-play-apple .btn-apple{width: 1.65rem; border: 2px solid #f4d394;background-color:rgba(8, 78, 110, 0.2);}
.section-1 .google-play-apple .btn-google-play:hover,
.section-1 .google-play-apple .btn-apple:hover{border: 2px solid #cd93fa;background-color: rgba(1, 51, 74, 0.2)}

.section-2{padding: .8rem 0;}
.section-2 .accordion-menu{padding-bottom: .6rem;}
.section-2 .accordion-menu li{line-height: .6rem;}
.section-2 .accordion-menu li .p-text{display: none;}
.section-2 .accordion-menu li.current p{display: block;}
.section-2 .accordion-menu li::after{content:"";display:block;position:absolute;width:.08rem;height:100%;top:0;left:0;pointer-events:none;border-left: .08rem solid #4f2975;border-top-left-radius:.04rem .04rem;border-top-right-radius: .04rem .04rem; border-bottom-left-radius:.04rem .04rem;border-bottom-right-radius:.04rem .04rem;}
.section-2 .accordion-menu li.current::after{content:"";display:block;position:absolute;width:.08rem;height:100%;top:0;left:0;pointer-events:none;border-left: .08rem solid #f4d394; border-top-left-radius:.04rem .04rem;border-top-right-radius: .04rem .04rem;border-bottom-left-radius: .04rem .04rem;border-bottom-right-radius: .04rem .04rem;}
 
.section-3{padding: .8rem 0;}

.section-4{padding: .8rem 0;}
.section-4 .ul-box li .em{ width: .6rem;height: .6rem;line-height: .6rem;border: 1px solid #fff;background-color: #3e0477;}

.section-5{padding: .8rem 0 .5rem 0;}
.section-5 .media-box .a-link{width: .6rem;height: .6rem;border: 2px solid #fdc503;background-color: #3e0477;}
.section-5 .media-box .a-link:hover{border: 2px solid #cd93fa;} 
.section-5 .row-button button{float: left; width: 50%; font-size: .22rem;}
.section-5 .row-button button span{text-decoration:underline;}
 
.popUp-box{width:96%;height: 6rem;position: fixed;left:0;top: 50%;margin-top: -3rem; z-index: 99999;margin-left:2%;}
.popUp-box .popUp-button-close{width: .8rem;line-height: .8rem;background-color: #2b0153;}
.popUp-box .popUp-button-close:hover{background-color: #28004d;}
.popUp-box .text-box{height: 5rem;padding:.5rem .15rem;  overflow-y: scroll;}
.popUp-box .text-box .text-h2{float: left;width: 100%;color: #cd93fa;text-align: left;line-height: .5rem;font-size: .24rem;font-weight: 600;margin-top: .25rem}
.popUp-box .text-box .p-text{float: left;width: 100%;text-align: left;padding: .1rem 0 0 .3rem;font-size: .24rem;line-height: .3rem;color: #fff;} 

/* col-sm */
@media (min-width:576px) { 
	.section-5 .row-button button{font-size: .3rem;}
	footer .address{font-size: .3rem;}
}

/* col-md */
@media (min-width:768px) {
	.section-5 .row-button button{font-size: .36rem;}
}

/* col-lg */
@media (min-width:992px) {
	.section-5 .row-button button{width: 25%;font-size: .3rem;}
}

/* col-xl */
@media (min-width:1200px) {
	.title .h1{font-size: .72rem;line-height: 1rem;}
	.title .h2{font-size: .6rem;line-height: 1rem;}

	.h3{font-size: .36rem; line-height: .5rem; font-weight: 400;}
	
	header{height: 1rem; position: fixed;top: 0;z-index: 9999;background-color: hsla(0, 0%, 0%, 0.5);}
	header .header-body{width: auto;}
	header .nav{float: right; width: auto; height: 1rem;background-color:rgba(1, 31, 45, 0);}
	header .nav ul li{width: auto; padding: 0 .3rem;margin-top: .2rem;  border-bottom:none;}
 
	header.current{background-color:rgba(0, 0, 0, 0.96);}
 
	.section-1 .fluid-t{padding: 2.3rem 0 .8rem 0;}
	.section-1 .google-play-apple .btn-google-play,
	.section-1 .google-play-apple .btn-apple{width: 2rem; margin: 0 .3rem; border: 2px solid #f4d394;}

	.section-2 .pic-img{width: 90%;float: left; }
 
	.section-4 .row-box ul .em{width: .8rem;height: .8rem;line-height: .8rem;margin-top: .1rem; border: 1px solid #fdc503;background-color: #3e0477;}
	.section-4 .row-box ul .h4{width:calc(100% - 1.2rem);float: right;font-size: .36rem;line-height: .5rem;}

	.section-5 .media-box h3,
	.section-5 .media-box div,
	.section-5 .media-box div{width: auto;} 
	.section-5 .media-box div .a-link{float: left; margin-left: .2rem;}
	.section-5 .h3 > a .iconfont, 
	.section-5 .h3 > a{font-size: .36rem; line-height: .5rem; font-weight: 400;}
	

	.section-5 .row-button .div{width: auto; display: inline-block; }
	.section-5 .row-button button{ width: auto; font-size: .36rem;}
	.section-5 .row-button button span{float: left; text-decoration:underline;}
	.section-5 .row-button button .em{float: left; height: .25rem;margin: .15rem .2rem 0 .2rem ;border-left: 3px solid #cd93fa;background-color: #3e0477;}
	.section-5 .row-button button:last-child .em{display:none !important; }

	footer .address{font-size: .36rem;}
}

/* col- */
@media (min-width:1480px) {
	.container{width:calc(14.8rem - 0px);}
	.popUp-box{width: 14rem;height: 8rem;position: fixed;left:50%;top: 50%;margin-top: -4rem; z-index: 99999;margin-left: -7rem;}
	.popUp-box .popUp-button-close{width: .8rem;line-height: .8rem;background-color: #2b0153;}
	.popUp-box .text-box{height: 6.5rem;padding:.5rem .15rem;  overflow-y: scroll;}
}

/* col- */
@media (min-width:1920px) {
	.container{width:calc(100% - 220px);}
	header .a-logo{margin-left: .5rem;margin-top: .05rem ;}
	header .header-body .a-logo img{width: 3.5rem; }
	header .nav{margin-right: .5rem;}

	.section-1 .fluid-t{ height: 100vh;  padding: 2.3rem 0 .8rem 0; }
	.section-4 .row-ul .a-link  .p-text{font-size: .3rem;line-height: .4rem;font-weight: 400; }
}