@media (max-width: 414px) {
  html {
    font-size: 18px;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 320px) {
  html {
    font-size: 15px;
  }
}
@keyframes shake {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  39% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
  40% {
    transform: scale(1.1) rotate(10deg);
    -webkit-transform: scale(1.1) rotate(10deg);
  }
  60% {
    transform: scale(1.1) rotate(0deg);
    -webkit-transform: scale(1.1) rotate(0deg);
  }
  80% {
    transform: scale(1.1) rotate(-10deg);
    -webkit-transform: scale(1.1) rotate(-10deg);
  }
  100% {
    transform: scale(1.1) rotate(0deg);
    -webkit-transform: scale(1.1) rotate(0deg);
  }
}
@keyframes scaleout {
  0% {
    transform: scale(1);
    -webkit-filter: brightness(200%);
    -webkit-transform: scale(1);
  }
  100% {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    opacity: 0;
  }
}
body,html {
  background: #f3f3f3;
}
::selection{background: transparent;}
/*a:active{background: transparent;}
a:visited{background: transparent;}
a:hover{background: transparent;}
a:link{background: transparent;}
a{-webkit-tap-highlight-color: transparent;}*/
input,select{-webkit-appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

.app {
  background: rgb(248, 248, 248);
  font-size: 0.9em;
}
.app .start-play {
  color: #fff;
  font-size: 0.78rem;
  padding: 3.5% 6%;
  border-radius: 0.4rem;
  background: linear-gradient(to right, #ff5b02, #ff4702);
  background: -webkit-linear-gradient(left, #ff7300, #ff3c04);
}
.app .start-down {
  color: #fff;
  font-size: 0.78rem;
  padding: 3.5% 6%;
  border-radius: 0.4rem;
  background: rgb(45, 194, 56);
}
.app .single {
  overflow: hidden;
  margin-left: 4.5%;
  margin-top: 2.5%;
  width:20%;
}
.app .single .l1 img {
  width: 100%;
  /*height: 100%;*/
}
.app .single .l2 {
  margin: 1% 0 ;
  color: #fff;
}
.app .single .l2 .title {
  font-size: 0.8rem;
  text-overflow: ellipsis;
  padding:2% 0;
  width: 100%;
  color:#333;
  text-align:center;
}
.app .single .l2 .det {
  color: #606368;
  font-size: 0.7rem;
  transform: scale(0.95);
  margin-left: -3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .single .l3 {
  transform: scale(0.9);
  color: #606368;
  font-size: 0.7rem;
  margin-left: -1%;
  width: 29%;
  padding: 6% 0 0;
}
.app .single .l4{
  width: 100%;
  padding-top: 4%;
  text-align: center;
}
.app .single .l4 a{display: block;padding: 8% 0;width: 96%;margin: auto;}


.app .subject{background: #fff;margin: 3% auto 0;padding-bottom: 3%;}
.app .subject p{width: 18%;margin: auto;padding: 3% 0;color: #5f646f;position: relative;text-align: center; color: #f44d3b;
}
.app .subject p:after{
  content:"";
  display: block;
  height: 1px;
  background: #fab0a9;
  width: 110%;
  position: absolute;
  right: -120%;
  top: 50%;
}
.app .subject p:before{
  content:"";
  display: block;
  height: 1px;
  background: #fab0a9;
  width: 110%;
  position: absolute;
  left: -120%;
  top: 50%;
}
.app .subject .subject-img{}
.app .subject .subject-img .swiper-slide{width: 55%;margin: 0 0 0 5%;}
.app .subject .subject-img img{width: 100%;}

.app .subject ul{padding: 0 3%;}
.app .subject ul li{overflow: hidden;color: #5f646f;padding: 0 0 1%}
.app .subject ul li a{display: block;float: left;color: #fff;width: 65%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 0.85rem;}
.app .subject ul li span{display: block;float: right;transform: scale(0.75)}

.app .subject .phone{color: #fff;font-size: 0.85rem;text-align: center}
.app .subject .phone span{display: block;transform: scale(0.65);margin: 2% 0;color: #999;}
.app .baoyou{
  background: #2b343f;padding-bottom: 3%;
}
.app .boot-game {
  background: #fff;
  display: -webkit-flex;
  display: flex;
  padding:0 2%;
  margin-bottom: 1%;
  justify-content:flex-start;
  flex-wrap: wrap;
}
.app .boot-game .single {
  overflow: hidden;
  margin-left: 2.5%;
  margin-right: 2.5%;
  margin-bottom: 6%;
  margin-top: 0;
}
@-webkit-keyframes slit {
  0%{transform: rotateY(87deg) scale(0.5);}
  50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
  100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
@keyframes slit {
  0%{transform: rotateY(87deg) scale(0.5);}
  50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;}
  100% { transform: translateZ(0) rotateY(0deg); opacity: 1; }
}
/*@-webkit-keyframes slit2 {*/
  /*0%{transform: rotateX(0deg)}*/
  /*70% { transform: rotateX(53deg) translateZ(10px);animation-timing-function: ease-in;opacity: 1;}*/
  /*100% {transform: rotateX(53deg) translateY(-320px) scale(0.3); opacity: 0; }*/
/*}*/
/*@keyframes slit2 {*/
  /*0%{transform: rotateX(0deg)}*/
  /*70% { transform: rotateX(53deg) translateZ(10px);animation-timing-function: ease-in;opacity: 1;}*/
  /*100% {transform: rotateX(53deg) translateY(-320px) scale(0.3); opacity: 0; }*/
/*}*/





/***************************/
.bgw,
.bgw1 {
  overflow: hidden;
  background: #fff;
}
.bgw2 {
  background: #fff;
}

i{ display: block;}

.l1--pload{
  padding-top:14%;
  box-sizing: border-box;
  /* border:.5px solid #999; */
  border-radius:3px;  
  background-color:#cecece;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-opacity:0.6;
  opacity:0.6;
}
.single .logo{
	border-radius:3px;  
}
/***************************/
.top{
	position:relative;
	background-image:url(../files/top-bg.png);
	background-repeat:no-repeat;
	background-size:100%;
}
.top-mask-bg img{
	position:absolute;
	top:35%;
	left:0;
	width:100%;
	z-index:1;
}
.hp-desc{
	position:relative;
	padding-top: 22%;
	padding-bottom:2%;
	text-align: center;
	z-index:2;
}
.hp-desc-logo{
	width: 26%;
	height: 26%;
}
.hp-desc-title{
	color: #464646;
	font-size: 18px;
	margin: 1% auto;
}
.hp-desc-title .official{
	border:1px solid #FFA64D;
	font-size:0.6rem;
	background:#FEE5E9;
	color:#F60;
	border-radius: 0.2rem;
	margin-left:0.5rem;
	padding:0 2px;
}
.hp-desc-detail{
	font-size: 13px;
	color: #9f9f9f;
	padding-bottom: 1%;
}

.app .hp-download-btn{
	width:60%;
	height:3rem;
	line-height:3rem;
	color:#FFFFFF;
	background:linear-gradient(to right, #59DCF3, #44B4FF);
	background:-webkit-linear-gradient(to right, #59DCF3, #44B4FF);
	font-size:1rem;
	display:block;
	margin:1% auto;
	border-radius: 0.4rem;
}
.common-center{
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.common-hide{
	display: none;
}
.hp-mask{
	z-index:100;
}
.hp-mask-background{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;				
	background: #000;
	opacity: 0.6;
}
.hp-mask-instruction{
	position: fixed;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	z-index:100;
}
.top-mask{
	position:absolute;
	top:0;
	left:0;
	right:0;
}
.top-mask img{
	width:100%;
	filter:alpha(opacity=80);
	-moz-opacity:0.8;  
	-khtml-opacity: 0.8;  
	-webkit-opacity: 0.8;  
	opacity:0.8;
}


/**寮规鎻愮ず**/
#dialogBg{width:100%;height:100%;background-color:#000000;opacity:.6;filter:alpha(opacity=60);position:fixed;top:0;left:0;z-index:3;display:none;}
#dialog { position: fixed;right: 0; top:0; width: 90%; z-index: 4; display: none;}
.doload-red { background: #469da2;}

.iosinstall{
    display: none;
}
.iosinstall p{
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #5154ab;
}
.iosinstall img{width:100%;border:none;vertical-align:middle; display: block;}


.iosinstall-tip-mask{
    position:fixed;
    left:0;
    top:0;
    z-index: 88;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.3)
}
.iosinstall-wrap{
    animation: myfirst 0.5s;
    -moz-animation: myfirst 0.5s;	/* Firefox */
    -webkit-animation: myfirst 0.5s;	/* Safari 氓鈥櫯� Chrome */
    -o-animation: myfirst 0.5s;	/* Opera */
    width: 100%;
}
.iosinstall-wrap{
    position:fixed;
    bottom:0;
}
@-webkit-keyframes myfirst
{
    from {bottom:-200px;}
    to {bottom:0;}
}
@keyframes myfirst
{
    from {bottom:-200px;}
    to {bottom:0;}
}
/*娴獥鏍峰紡*/
.iosinstall-tip{
    background:#fff;
    color:#000;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-bottom: 1rem;
}
.iosinstall-tip{
    font-size: 0.7rem;
}
.iosinstall-tip a{
    text-decoration:none;
}
.iosinstall-tip h3 {
    background-color: #efeff4;
    padding: 0.3rem 1rem;
    font-weight: normal;
    position: relative;
    margin: 0;
}
.iosinstall-tip a {
    text-decoration: none;
}
.btn-close {
    background: url(../images/ios-modal-close.png) no-repeat center;
    width: 12px;
    height: 19px;
    display: inline-block;
    background-size: 12px;
    position: absolute;
    right: 1.4rem;
}
.iosinstall-tip section {
    height: auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
}
.red { color: red; }
.row {
    font-weight: normal;
    font-size: 0.7rem;
    padding: 0 1rem;
    position: relative;
    margin: 0.3rem 0;
}
.first-step-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.first-step-image {
    width: auto;
    height: 3rem;
    margin: 0.5rem;
}
.second-step-image {
    height: 2.2rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    background: #f6f6f8;
    padding: 0 12px;
    margin: 0.5rem 1.4rem 0 1.4rem;
    overflow: hidden;
    border-radius: 5px;
}
.setting-icon {
    margin-right: 10px;
}
.setting-icon img {
    width: 2.2rem;
}
.second-step-image span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-flex: 80%;
    -webkit-flex: 80%;
        -ms-flex: 80%;
            flex: 80%;
}
.setting-arrow {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}
.setting-arrow img {
    margin-left: 0.3rem;
    height: 0.8rem;
    width: auto;
}
.btn-iosinstall-go {
    background: #01d662;
    height: 1.4rem;
    width: 12rem;
    border-radius: 1.2rem;
    text-align: center;
    line-height: 1.4rem;
    color: #fff;
    margin: 1.2rem auto 0;
    display: block;
}
.btn-isoinstall-agree {
    margin: 1.2rem auto 0;
    display: block;
}
.btn-isoinstall-agree img{ height:2rem; }