*{-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;}
:before, :after { -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;}
html{ font-size:62.5%;}
body{ background-color:#fff; font-family:"Microsoft YaHei","simsun",Arial; font-size:14px; line-height:1.5; color:#333; overflow-x:hidden;}
body,form,iframe{margin:0px;padding:0px;}
img{ border:none;vertical-align:middle;}
a{ text-decoration:none; color:#333; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
a:hover{ color:#0084e9;}
input,textarea,select,button{ outline:none;vertical-align:middle; font-size:inherit; font-family:inherit;}
textarea{ resize:none; overflow-y:auto;}
input[type="submit"],input[type="reset"],input[type="button"],button{ cursor:pointer;-webkit-appearance:none;}
hr{height:0;border-width:1px 0 0 0;border-style:solid;margin:0;color:#ddd;}
h1,h2,h3,h4,h5,h6{ font-weight:normal; margin:0;}
h1{ font-size:60px;}
h2{ font-size:36px;}
h3{ font-size:24px;}
h4{ font-size:18px;}
h5{ font-size:16px;}
h6{ font-size:14px;}


/* responsive header */
.Layout_header{width:100%;background-color:#333;position:relative;z-index:999;border-bottom:3px solid #222;height:57px;}
.Layout_header .logo{position:absolute;left:50px;height:47px;padding:5px 0; margin-top:5px;}
.Layout_header .logo img{max-height:100%;}
.Layout_header .previewNav{text-align:center;height:57px;}
.Layout_header .previewNav span{display:inline-block; vertical-align:middle; cursor:pointer;width:50px;height:57px;line-height:57px;background-image:url(../images/rulersIcos.png);background-repeat:no-repeat;}
.Layout_header .previewNav span.pc{background-position:center 17px;}
.Layout_header .previewNav span.pad{background-position:center -20px;}
.Layout_header .previewNav span.x_pad{background-position:center -59px;}
.Layout_header .previewNav span.mob{background-position:center -104px;}
.Layout_header .previewNav span.x_mob{background-position:center -150px;}
.Layout_header .previewNav .pc:hover,.Layout_header .previewNav .pc.active{background-position:center -196px;}
.Layout_header .previewNav .pad:hover,.Layout_header .previewNav .pad.active{background-position:center -233px;}
.Layout_header .previewNav .x_pad:hover,.Layout_header .previewNav .x_pad.active{background-position:center -272px;}
.Layout_header .previewNav .mob:hover,.Layout_header .previewNav .mob.active{background-position:center -317px;}
.Layout_header .previewNav .x_mob:hover,.Layout_header .previewNav .x_mob.active{background-position:center -363px;}
.Layout_header .previewNav span.active{background-color:#222;}
.Layout_header .previewNav a{display:inline-block; vertical-align:middle; color:#999;width:50px;font-size:20px;height:30px;line-height:30px;}
.Layout_header .previewNavBtn{position:absolute;right:50px;top:13px;}
.previewNavBtn a{background-color:#009944;padding:0px 10px;height:30px;line-height:30px;display:inline-block;color:#fff;font-size:14px;border-radius:15px;margin-left:5px;}
.previewNavBtn a:hover{background-color:#060;}
.previewNavBtn a i{padding-right:5px;font-size:14px;-webkit-transition:all .2s; transition:all .2s;position:relative;}
#showQRcode:hover i:after{content:""; border-bottom:14px solid #fff;border-left:14px solid transparent; border-right:14px solid transparent;position:absolute;left:-7px;bottom:-16px;z-index:4;}
.previewNavS{position:absolute;right:210px;top:13px;}
.previewNavS input[type="text"]{width:200px;border:1px solid #dedede;height:30px;line-height:30px;padding:0 8px;border-top-left-radius:15px;border-bottom-left-radius:15px;}
.previewNavS input[type="button"]{border:0;height:32px;line-height:32px;background-color:#009944;color:#fff;cursor:pointer;padding:0 15px 0 8px;border-top-right-radius:15px;border-bottom-right-radius:15px;}
#showQRcode{ position:relative;}
#showQRcode img{ position:absolute; z-index:3; left:0; top:42px; width:0px; height:0px; opacity:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0); visibility:hidden;-webkit-transition:all .2s; transition:all .2s; border:10px solid #fff;}
#showQRcode:hover img{ visibility:visible; width:100px; height:100px; opacity:1;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);}

/* preview */
.previewBox{position:absolute;top:60px;bottom:0;width:100%;}
.previewBox .previewCon{width:100%;height:100%;position:absolute;top:0px;left:0;background:url(../images/iframeBg.gif) repeat;}
.previewBox .previewCon .iframeCon iframe{width:100%;height:100%;border:0;}

/*Ìí¼Ó*/
.previewBox .previewCon .iframeCon{

}
.x_mob1{
    background: url(../images/bgiphone.png) no-repeat;
    height: 770px;
    background-size: 100% 100%;
    padding: 102px 24px 94px 24px;
    width: 400px;
    transition: all .5s ease 0s;
    margin: 40px auto 0 auto;
}
.mob1{
    background: url(../images/bgiphonew.png) no-repeat;
    height: 385px;
    background-size: 100% 100%;
    padding: 44px 75px 20px 71px;
    width: 660px;
    transition: all .5s ease 0s;
    margin: 40px auto 0 auto;
}
.x_pad1{
    background: url(../images/bgipad.png) no-repeat;
    height: 960px;
    background-size: 100% 100%;
    padding: 70px 49px 99px 49px;
    width: 792px;
    transition: all .5s ease 0s;
    margin: 40px auto 0 auto;
}
.pad1{
    background: url(../images/bgipadw.png) no-repeat;
    background-size: 100% 100%;
    height: 703px ;
    padding: 40px 108px 40px 66px;
    width: 1024px;
    transition: all .5s ease 0s;
    margin: 40px auto 0 auto;
}