* { box-sizing: border-box; padding: 0; margin: 0; }
img { border: 0; display: inline-block; overflow: hidden; vertical-align: top; width:100%;}
body { margin: 0 auto; -webkit-user-select: none; -webkit-text-size-adjust: none!important; font-family: 微软雅黑, "PingFang SC", Droidsansfallback; font-weight: 300; background: #fff; color: #333; }
a,
button,
input,
img { -webkit-touch-callout: none; }/* 1.ios 长按时不触发系统的菜单 2.禁止长按时下载图片 */
/* 去除android4.0以下 a/button/input标签被点击时产生的边框 因为边框引起了不少bug */
a,
button,
input,
select,
li { -webkit-tap-highlight-color: rgba(0,0,0,0); list-style: none}
a { text-decoration: none; }
html { font-size: 100px }
html,
body {max-width: 750px; margin: 0 auto!important;overflow: hidden; background:#09308f;}
.between{display: flex; display: -webkit-flex; justify-content: space-between;-webkit-justify-content:space-between}
.center{display: flex; display: -webkit-flex;justify-content: center;-webkit-justify-content: center}
.middle{display: flex; display: -webkit-flex;-webkit-align-items:center;align-items:center;}
.start{display: flex;display: -webkit-flex; justify-content: flex-start;-webkit-justify-content: flex-start}
.end{display: flex;display: -webkit-flex; justify-content: flex-end;-webkit-justify-content: flex-end}
.col{display: flex;display: -webkit-flex; -webkit-flex-direction:column;flex-direction: column;}
.row{display: flex;display: -webkit-flex; -webkit-flex-direction:row;flex-direction: row;}
.clearfix:after,.clearfix:before {content:"."; display:block; height:0; visibility:hidden;}
.clearfix:after { clear:both; }
.clearfix { *zoom: 1; }

::-webkit-scrollbar  {  width: 2px;  height: 2px;  background:rgba(255,255,255,0.26)!important; }
::-webkit-scrollbar-track  { -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.03);  border-radius: 0px;  background:rgba(255,255,255,0.03)!important;}
::-webkit-scrollbar-thumb  {border-radius: 2px;  -webkit-box-shadow: inset 0 0 3px rgba(200,200,200,0.03);  background:rgba(255,255,255,0.3)!important;  }

.music{position: fixed; right:0.8rem; top:0.56rem; z-index: 9999; }
.music img{display: block; width: 0.56rem;}
.music.on{animation: anim 1s linear infinite; }
.home{position: fixed;  left:0.7rem; top:0.56rem; z-index: 9999;}
.home img{ width:0.57rem;}

@keyframes anim
{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}

@-webkit-keyframes anim
{
    from {transform: rotate(0deg)}
    to {transform: rotate(360deg)}
}


img{ display:block; width:100%;}


.foot{margin: 0 auto; margin-top:0.4rem; margin-bottom:0.4rem; height: 0.3rem; line-height:0.3rem;font-size:0.24rem; color: #fff; width:2.6rem; text-align: center;font-weight: 400; position: relative;z-index:4;}
.foot::before{ position: absolute; content: '';top:50%; left: -0.8rem; width: 0.8rem; height: 1px;background: linear-gradient(-155deg, rgba(255,255,255,1) 10%, rgba(155,155,155,0) 100%) }
.foot::after{ position: absolute; content: '';top:50%; right: -0.8rem; width: 0.8rem; height: 1px;background: linear-gradient(155deg, rgba(255,255,255,1) 10%, rgba(155,155,155,0) 100%) }

.wrap{-webkit-flex-wrap:wrap;-webkit-box-lines:single;-moz-flex-wrap:wrap;flex-wrap:wrap;}　

.active{ padding-top:0.1px;}
.bg1{ position:fixed; z-index:1;left:0;right:0;top:0;bottom:0; background:url(../images/bg1.png) center top no-repeat;background-size:cover;height:100%; min-height:100%;overflow-x: hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;}
.con1{ padding:0.26rem;position:relative;z-index:4;}
.con1 .logo{ margin-left:0.32rem; width:3.19rem;}
.con1 .zt1{ margin-left:0.45rem; margin-top:0.32rem; width:2.36rem;}
.con1 .zt2{ margin-left:0.45rem;margin-top:0.22rem; width:5.73rem;}


.con2{ margin:0 auto;margin-top:0.3rem;width:7.5rem; position:relative;z-index:4;height:4.26rem;  background:#000;}
.con2 .tu3{position: absolute; z-index:12;top: 0;left: 0;right: 0;bottom: 0;height: 100%;}
.con2 .tu3 img{width:100%;height:4.26rem;}
.con2 .tu3 .play{ position:absolute; z-index: 13;transform:translate(-50%,-50%); top:50%; left:50%; background:url(../images/play.png) no-repeat; width:1.28rem; height:1.28rem; background-size:1.28rem 1.28rem;}
.video{ width:100%; height:100%; display:none;}
.con2 .vr{position: absolute; z-index:20; bottom:-0.5rem; right:0; width:1.8rem; height:0.74rem; background:url(../images/vr.png) no-repeat; background-size:1.8rem 0.74rem;}


.con3{ position:relative;z-index:1; width:100%; padding:0.1px 0.54rem;}
.con3 .btn1{ display:block;width:2.88rem; margin-top:0.4rem;}
.con3 .btn2{ display:block;width:2.74rem; margin-top:0.58rem;}
.con3 .btn3{ display:block;width:2.88rem; margin-top:0.26rem;}
.con3 .btn4{ display:block;width:2.74rem; margin-top:0.2rem; margin-left:0.08rem;}

.boot2{padding-top:0.39rem;padding-bottom:0.2rem; line-height:0.33rem; margin:0 auto; text-align:center; color:#fff;font-size:0.24rem; font-weight:600;}

.bg2{ position:fixed; z-index:1;left:0;right:0;top:0;bottom:0; min-height:100%;overflow-x: hidden;overflow-y:auto;-webkit-overflow-scrolling: touch;}
.bg2 .top{ position:relative; z-index:4;}
.bg2 .top .bt{ position:absolute;left:0;right:0;top:0.27rem; margin:0 auto; width:3.8rem; }
.bg2 .list {padding-left: 0.72rem; position:relative;}
.bg2 .list:before{ position:absolute; content:''; bottom:0; right:0; left:2rem; height:1px; background:#fff;}
.bg2 .list .title {
    position: relative;
    padding-top: 0.28rem;
	padding-bottom:0.06rem;
	padding-right:0.8rem;
    font-size: 0.38rem;
    color: #fff;
    line-height: 0.53rem;
    font-weight: 600;
}
.bg2 .list .title span {
    position: absolute;
    right: 0.33rem;
    top: 0.33rem;
    width: 0.4rem;
    height: 0.4rem;
    background: url(../images/arrow.png);
	transform:rotate(-180deg);
    background-size: 0.39rem 0.39rem;
}
.bg2 .list.on .title span{transform:rotate(0deg);}
.bg2 .list ul {
    display: none;
}
.bg2 .list li {
    padding-left: 0.56rem;
    font-size: 0.28rem;
	line-height:0.4rem;
	font-weight:400;
	color: #fff;
	position:relative;
}
.bg2 .list li:before{ position:absolute; content:'';top:50%; transform:translateY(-50%); right:0; left:0.22rem; width:0.14rem; height:0.14rem; border-radius:50%; background:#fff;}
.bg2 .list li a {
    color: #fff;
    display: block;
	padding:0.16rem 0;
	line-height:0.4rem;
}
.bg2 .top .zyname{ position:absolute;left:0.36rem;right:1.36rem;top:0.76rem;height:1.12rem;font-size:0.38rem; color:#fff; font-weight:600; text-align:left;}

.itembt{ line-height:0.53rem; padding-top:0.28rem; padding-left:0.38rem;font-size:0.38rem; color:#fff; font-weight:600; position:relative;}
.itembt:before{ position:absolute; z-index:5; content:'';left:0; bottom:0;width:1.72rem;height:0.26rem; background:#0969DF;}
.itembt span{ position:relative; z-index:20;}
.itemwz{ padding:0.18rem 0.36rem;font-size:0.28rem; line-height:0.4rem; color:#fff; font-weight:400; text-align:justify;}
.itemwz>p{ text-indent:2em;}

.calllist{padding-top:0.38rem; padding-left:0.58rem; color:#fff;}
.calllist li{ margin-top:0.24rem;}
.calllist li:first-child{margin-top:0}
.calllist li .teacher{font-size:0.29rem;font-weight:600; margin-bottom:0.1rem;}
.calllist .start i{ display:block;width:0.57rem;height:0.33rem;line-height:0.33rem;background:rgba(0,0,0,0.5);border-radius:0.08rem; margin-right:0.18rem; font-size:0.24rem; text-align:center; font-style:normal;}
.calllist .start span{display:block;font-size:0.29rem; line-height:0.4rem; margin-right:0.67rem;}
.calllist .start .qq{width: 3rem;}
.s01{ animation-delay: 0.1s}
.s02{ animation-delay: 0.2s}
.s03{ animation-delay: 0.3s}
.s04{ animation-delay: 0.4s}
.s05{ animation-delay: 0.5s}
.s06{ animation-delay: .6s}
.s07{ animation-delay:.7s}
.s08{ animation-delay: .8s}
.s09{ animation-delay: .9s}
.s10{ animation-delay: 1s}
.s11{ animation-delay: 1.1s}
.s12{ animation-delay: 1.2s}
.s13{ animation-delay: 1.3s}
.s14{ animation-delay: 1.4s}
.s15{ animation-delay: 1.5s}
.s16{ animation-delay:1.6s}
.s17{ animation-delay: 1.7s}
.s18{ animation-delay: 1.8s}
.s19{ animation-delay: 1.9s}
.s20{ animation-delay: 2s}
.s22{ animation-delay: 2.2s}
.s24{ animation-delay:2.4s}


/**适配**/
@media screen and (min-width:320px) {
    html { font-size: 42.66px }
    }
    @media screen and (min-width:360px) {
    html { font-size: 48px }
    }
    @media screen and (min-width:375px) {
    html { font-size: 50px }
    }
    @media screen and (min-width:384px) {
    html { font-size:51.2px }
    }
    @media screen and (min-width:400px) {
    html { font-size: 54px }
    }
    @media screen and (min-width:414px) {
    html { font-size: 54px }
    }
    @media screen and (min-width:424px) {
    html { font-size: 56.54px }
    }
    @media screen and (min-width:480px) {
    html { font-size: 64px }
    }
    @media screen and (min-width:540px) {
    html { font-size: 72px }
    }
    @media screen and (min-width:640px) {
    html { font-size: 85.32px }
    }
    @media screen and (min-width:720px) {
    html { font-size: 96px }
    }
    @media screen and (min-width:750px) {
    html { font-size: 100px }
    }
	@media only screen and (device-width: 375px) and (device-height: 667px){
		
	}
	@media only screen and (device-width: 414px) and (device-height: 736px){
		
	}
	/*x/xs*/
    @media only screen and (device-width: 375px) and (device-height:812px) {
		
    }
	/*xs max/xr*/
	@media only screen and (device-width: 414px) and (device-height: 896px) {
		
	}