@charset "gb2312";
html {font:400 14px/1.5 PingFangSC-Regular,Helvetica,"Droid Sans",Arial,sans-serif; font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-select:none;user-select:none;}
html,body,div,object,iframe,applet,object,h1,h2,h3,h4,h5,h6,p,blockquote,pre,address,dl,dt,dd,ol,ul,li,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,progress{margin:0;padding:0;border:0;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
* ,::before,::after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
a{text-decoration:none;-webkit-touch-callout:none;background-color:transparent;}
a:active,a:hover{outline:0;text-decoration:none;}
li{list-style:none}
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%;}
img { border:0;-webkit-touch-callout:none; vertical-align: middle;}
em, i, b ,s,strong{ font-style: normal; font-weight: normal; }
input,textarea{ border:0; outline: none; resize: none; -webkit-appearance: none;}
.viewCon p {font-size: 2.6rem; text-align: justify; text-justify: inter-ideograph; }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }
.clearfix { *zoom:1;}
.re { position: relative; }
.ab { position: absolute; }
.fl { float: left;}
.fr { float: right;}
.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;
}
.viewCon{width:100%;margin:0 auto;max-width:640px;min-width:320px}
.viewCon img{width: 100%;display: block;}
.viewCon .videoCon{
    width: 92.8%;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 2%;
    box-shadow: 0 5px 15px rgba(86,5,5,.23);
}
.viewCon .linkBtn{
    position: absolute;
    width: 75.2%;
    text-align: center;
    font-size: 4.8rem;
    color: #fff;
    line-height: 2.084;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ea5455+0,feb592+100 */
background: #ea5455; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #ea5455 0%, #feb592 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg,  #ea5455 0%,#feb592 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg,  #ea5455 0%,#feb592 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea5455', endColorstr='#feb592',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border-radius: 50px;
    box-shadow: 0 5px 12px rgba(86,5,5,.44);
}


/*750 Éè¼Æ¸å*/
@media screen and (min-width: 320px) and (max-width: 374px) {
    html { font-size: 26.25% !important; } /*0.42*/
}
@media screen and (min-width: 375px) and (max-width: 409px) {
    html { font-size: 31% !important; }  /*0.5*/
}
@media screen and (min-width: 410px) and (max-width: 479px) {
    html { font-size: 33% !important; }  /*0.54*/
}
@media screen and (min-width: 480px) and (max-width: 900px) {
    html { font-size: 40% !important; } /*0.64*/
}