html,body{ width: 100%; height: 100%; margin:0; padding: 0; background: #f1f1f1; display: block;font-family:'Open Sans'; font-size: 14px; color: #000;}
html{position: relative; }
body {line-height: 1.5; font-family: 'cwTeXFangSong',sans-serif; background:#f1f1f1; position: relative; overflow:hidden;}
a {color: #fff; font-family:Arial; text-decoration: none;}
a:hover{outline: none; text-decoration: none; color:#296d0d;}
p { margin:0; padding: 0; font-size: 14px;}
ul,li  {margin:0px; padding:0px; list-style-type:none;}
h1, h2, h3, h4, h5, h6 {color: #fff;margin: 0; padding: 0;  font-family: 'cwTeXFangSong',sans-serif;}
img{ max-width: 100%; }
.clear{clear:both;font-size:0;height:0;overflow:hidden;line-height:1px;}
.clearfix:after {content:""; display: block; clear:both;}
.container{padding:20px 30px; position: relative; max-width: 970px; margin:auto; min-height:640;}
.xs-show{ display: none; }
.layui-btn {background-color:#296d0d;}

#loading{width: 100%; height: 100%; position: fixed; top:0; z-index:999; left:0; background: #f1f1f1;}
.loading{width: 100px;height: 100px; position: relative; margin: 0 auto; margin-top:-100px; z-index: 9999; top:50%;}
.loading span{display: inline-block;width: 10px;height: 10px;border-radius: 50%;background:#1072ff; position: absolute;-webkit-animation: load 1.04s ease infinite;}
@-webkit-keyframes load{ 0%{-webkit-transform: scale(1.2);opacity: 1;} 100%{-webkit-transform: scale(.3);opacity: 0.5;} }
@keyframes load{ 0%{-webkit-transform: scale(1.2);opacity: 1;} 100%{-webkit-transform: scale(.3);opacity: 0.5;} }
.loading span:nth-child(1){left: 0;top: 50%;margin-top:-10px;-webkit-animation-delay:0.13s;}
.loading span:nth-child(2){left: 14px;top: 14px;-webkit-animation-delay:0.26s;}
.loading span:nth-child(3){left: 50%;top: 0;margin-left: -10px;-webkit-animation-delay:0.39s;}
.loading span:nth-child(4){top: 14px;right:14px;-webkit-animation-delay:0.52s;}
.loading span:nth-child(5){right: 0;top: 50%;margin-top:-10px;-webkit-animation-delay:0.65s;}
.loading span:nth-child(6){right: 14px;bottom:14px;-webkit-animation-delay:0.78s;}
.loading span:nth-child(7){bottom: 0;left: 50%;margin-left: -10px;-webkit-animation-delay:0.91s;}
.loading span:nth-child(8){bottom: 14px;left: 14px;-webkit-animation-delay:1.04s;}
.loadtxt{ position: absolute; bottom:-35px; left:20%;}
#min_body{width:100%; max-width: 414px; height: 100%; display: block; background: #fff; margin: auto; position: relative; overflow: hidden;}

/* Next Button*/
.next_btn{ position: fixed; z-index: 1; right:10px; bottom: 10px;}

/*Play*/
.play_box{ width: 40px; height: 40px; overflow: hidden; position: absolute; top:10px; right:10px; z-index: 99;}
.play_box audio{opacity:0.1}
.play_box .play_btn{ position:absolute; top:0; right:0; width: 36px; height: 36px; border-radius: 50%; border:2px #9f0944 solid; background: url("/img/mp3icon.png") no-repeat 50% 50%; background-size:70%;}
@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}
.play {animation: spin 1s linear infinite;animation-fill-mode: forwards;}
.pause{animation-play-state: paused;}

/*上大圆*/
.yuan1{background: #1072ff; width:360px; height: 360px; border:0; border-radius: 50%; position: absolute; top:-360px; z-index:2;}
.yuan1 .txt{font-size:30px; color:#fff; width: 100%; height: 70px; line-height: 70px; position: absolute; top:280px; text-align:center; position: absolute;}
.yuan1 .yuan{ position: absolute; background: #f1f1f1; border-radius: 50%; width: 200px; height: 200px; left:80px; top:80px; box-shadow: 0 0 15px rgba(0,0,0,0.5);}
@-webkit-keyframes yuan1_a{0%{top:-360px;}100%{top:-250px;}}
@keyframes yuan1_a{0%{top:-360px;}100%{top:-250px;}}
.yuan1_a{animation:'yuan1_a' 1s forwards; -webkit-animation:'yuan1_a' 1s forwards;}

@-webkit-keyframes yuan1_b{0%{top:-250px;}100%{top:-360px;}}
@keyframes yuan1_b{0%{top:-250px;}100%{top:-360px;}}
.yuan1_b{animation:'yuan1_b' 1s forwards; -webkit-animation:'yuan1_b' 1s forwards;}

/*下大圆*/
.yuan2{ background: #ccc; width:360px; height: 360px; border:0; border-radius: 50%; position: absolute; bottom:-360px; z-index:8; line-height: 70px; text-align:center;}
@-webkit-keyframes yuan2_a{0%{bottom:-360px;}100%{bottom:-300px;}}
@keyframes yuan2_a{0%{bottom:-360px;}100%{bottom:-300px;}}
.yuan2_a{animation:'yuan2_a' 1s forwards; -webkit-animation:'yuan2_a' 1s forwards;}

@-webkit-keyframes yuan2_b{0%{bottom:-300px;}100%{bottom:-360px;}}
@keyframes yuan2_b{0%{bottom:-300px;}100%{bottom:-360px;}}
.yuan2_b{animation:'yuan2_b' 1s forwards; -webkit-animation:'yuan2_b' 1s forwards;}

.logo{}

.dade_sf{animation:scaleDraw 1s forwards; -webkit-animation:scaleDraw 1s forwards;}
@keyframes scaleDraw {
0% {-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1); opacity: 1}
100% {-webkit-transform:scale3d(2,2,2);transform:scale3d(2,2,2); opacity: 0}
}

.line_b1{transform:rotate(-45deg); position: absolute; width: 300px; height: 72px; top:200px;z-index: 2;}

.line1{ width: 50px; height: 4px; border-radius: 4px; background: #c1e4f7; position: absolute; left:90px; top:0; }
.line2{ width: 180px; height:4px; border-radius: 6px; background: #71c8f7; position: absolute; left:0; top:16px; }
.line3{ width: 50px; height: 4px; border-radius: 6px; background: #c1e4f7; position: absolute; left:25px; top:38px;}

.minb{ width: 100%; height: 100%; text-align:left; position: absolute;}

.minb .img{ width:80%; position: absolute; left:10%; bottom:-200px; opacity: 0; z-index: 3;}
.minb .item_txt{ width: 80%; position: absolute; left:10%; top:130px; z-index: 3;}
.minb .item_txt p{font-size:24px; font-weight: bold; width: 100%; line-height: 50px; box-sizing:border-box; padding-left:50px; -webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
.minb .item_txt p span{ color:#1072ff; font-weight: bold;}
.minb .item_txt p font{font-size:20px; color:#f40;}

.min0 .item_txt p{padding-left:40px;}
.min0 .img{ width:100%; position: absolute; left:0; bottom:-200px; opacity: 0}
.item_us {z-index:3 ; font-weight: bold; box-sizing:border-box; font-size:20px; position: absolute; left:0; text-align:center; top:300px; width:100%; -webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}


.img_in{animation:img_in 1s forwards; -webkit-animation:img_in 1s forwards;}
@keyframes img_in {
0% {bottom:-230px; opacity: 0}
100% {bottom:-5px; opacity: 1}
}

.img_out{animation:img_out 1s forwards; -webkit-animation:img_out 1s forwards;}
@keyframes img_out {
0% {bottom:-5px; opacity: 1}
100% {bottom:-230px; opacity: 0}
}

.toBigOut{animation:toBigOut 1s forwards; -webkit-animation:toBigOut 1s forwards;}
@keyframes toBigOut {
0% {-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1); opacity: 1}
100% {-webkit-transform:scale3d(2,2,2);transform:scale3d(2,2,2); opacity: 0}
}

.feiji{ width: 100px; height: 100px; position: absolute; bottom:150px; left:40%; opacity: 1; z-index: 4; opacity: 0}
.feiji_in{
animation: to-right 3s 0.4s forwards linear,to-top 3s 0.4s forwards cubic-bezier(0.15, 0.76, 0.25, 0.86);
animation-fill-mode: forwards;
}

@keyframes to-top {
0% {bottom: 150px; opacity: 1}
100% {bottom: 400px; opacity: 1}
}
@keyframes to-right {
0% {left: 40%; opacity: 1}
100% {left: 100%;transform: scale(0.3); opacity: 1}
}


/*六边形*/
.top-triangle{
width: 0;
height: 0;
border-bottom: 30px solid red;
border-left: 66px solid transparent;
border-right: 66px solid transparent;
}
.center{
width: 132px;
height: 80px;
background: red;
}
.bottom-triangle{
width: 0;
height: 0;
border-top: 30px solid red;
border-left: 66px solid transparent;
border-right: 66px solid transparent;
}