@charset "gb2312";
/* CSS Document */
html {font-size:62.5%;}
body, h1, h2, h3, h4, h5, h6, hr, p,blockquote,dl, dt, dd, ul, ol, li,pre,
form, fieldset, legend, button, input, textarea,th, td,img{border:medium none;margin: 0;padding: 0;list-style-type: none;}
body,button, input, select, textarea {font: 12px/1.5 '΢ÈíÑźÚ',tahoma, Srial, helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;font-weight:normal; }
em,i{font-style:normal;}
ul, ol{ list-style: none; }
a { text-decoration: none; }
a:hover { text-decoration: none;  }
img{ border:0px;}
body,.ui-overlay-h{margin:0 auto;background:#fff;color:#404040;}
input, img {vertical-align: middle;}
input{border:0}
body,html{margin:0 auto;}
img {border:none;vertical-align:top;}
* {margin:0;padding:0;text-shadow:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.blank{height:8px;clear:both;}
.blank20{height:20px;clear:both;}
.clearfix:after,.clear:before{display:table;content:'';}
.clearfix:after{clear:both;overflow:hidden;}
.clearfix{zoom:1;}
.iBlock{display:inline-block; vertical-align:middle;}
.re{position:relative;}
.ab{position:absolute;}
.fl {float:left;display:inline;}
.fr {float:right;display:inline;}
.clear{ clear:both}
.translateXY {-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.translateY {-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%);}
.translateX {-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);}
body {min-width:320px;overflow-x:hidden;}
.container{max-width:750px;margin:0 auto;overflow:hidden;}
.flex{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;/*-webkit-box-pack: justify;box-pack: justify;-webkit-justify-content: space-between;justify-content: space-between; -webkit-box-align:center;align-items:center;*/}
/*banner*/
.box_center{width:94.67%;margin: 0 auto;}
.banner{overflow: hidden;}

/*box1*/
.box1{overflow: hidden;}
.box1 .txt{width: 100%;padding-left: 8.67%;top:3%;color: #0c1f2a;font-size: 3.0rem;}
.box1 a{width: 69.73%;height: 6.4%;bottom: 3.2%; left:50%;}
/*box2*/
.box2{ overflow:hidden;}
.box2 h2{width: 100%; font-size: 3.6rem;color: #0c1f2a;text-align: center;top:8%;}
.box2 a{width: 69.73%;height: 10.7%;bottom: 6.4%;left: 48.5%;}
/*box3*/
.box3{ overflow:hidden;}
.box3 .contain1{width: 84.4%;height:59.4%;overflow: hidden;background: #1b1b1b;padding: 0;left: 6.7%;top: 16.5%;}
.box3 .playBtn1{display: block; width:100%; height: 100%; background:url(../images/box3_3.jpg) no-repeat center;top:0;left:0; z-index:2; background-size:100%;overflow: hidden;}

/*box4*/
.box4{ overflow:hidden;}
.box4 .info{width: 100%;top:0;}
.box4 .info h2{width:100%; font-size: 3.0rem;color: #0c1f2a;text-align: center;margin-top: 5%;line-height: 1.2}
.box4 .info p{font-size: 2.0rem;color: #0c1f2a;margin-top: 3%;padding-left: 3%;margin-bottom: 2%}
.box4 .info .demo-gallery{width: 94.93%;margin: 0 auto 1.5%;}
.box4 .info .demo-gallery a{display: inline-block;width: 32.58%;margin-right: 0;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;-moz-box-shadow: 7.5px 12.99px 13px 0px rgba(41, 42, 47, 0.06);-webkit-box-shadow: 7.5px 12.99px 13px 0px rgba(41, 42, 47, 0.06);box-shadow: 7.5px 12.99px 13px 0px rgba(41, 42, 47, 0.06);overflow: hidden;}
.box4 .info h3{width:100%; font-size: 3.0rem;color: #0c1f2a;text-align: center;margin-top: 2%;}
.box4 .info .btn{display: block; width: 69.73%;margin: 3% auto 0;}
/*box5*/
.box5{ overflow:hidden;background: #fff;padding: 10% 0;}
.box5 h2{width:100%; font-size: 3.0rem;color: #0c1f2a;text-align: center;}
.box5 h3{width: 100%;margin-top: 0;}
.box5 a{display: block; width: 69.73%;margin: 0 auto;}

@media screen and (min-width:320px) and (max-width:359px) {
	html { font-size: 31.25%!important; } /*0.5*/
}
@media screen and (min-width:360px) and (max-width:409px) {
	html { font-size: 35%!important; }  /*0.56*/
}
@media screen and (min-width:410px) and (max-width:479px) {
	html { font-size: 40%!important; }  /*0.64*/
}
@media screen and (min-width:480px) and (max-width:900px) {
	html { font-size: 47%!important; }  /*0.75*/
}