@charset "utf-8";
*{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
table{border-collapse:collapse;border-spacing:0}
audio,canvas,video { display: inline-block;*display: inline;*zoom: 1;}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit; outline: none; color: #666; font-size: 14px;}
input,textarea,select{*font-size:100%;-webkit-appearance: none;/*兼容苹果手机*/; border-radius: 0;}
select{background-repeat: no-repeat; background-size: 12px 7px; background-position: 95% center;}
i{ font-style: normal; }
video{ margin: 0; padding: 0; display: block;}

body{ padding: 0; margin: 0; max-width: 1920px; margin: 0 auto !important; font-family:PingFangSC,helvetica neue,hiragino sans gb,arial,microsoft yahei ui,microsoft yahei,simsun,sans-serif!important; font-size: 16px; line-height:1.8; color: #333; background-color: #fff;  -webkit-transition:all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s;}
body.navOpen{ overflow: hidden !important;}
a{ text-decoration: none; color: #333; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: 0.3s;}
body a:hover{ color: #000; text-decoration: none;}
a:focus{ text-decoration: none;}
img{ display: block;}
dl,p,ul,li,h1,h2,h3,h4,h5,h6{list-style: none;margin: 0; padding: 0;}
dt{ font-weight: normal;}
.clearfix:after{ content: ''; clear: both; display: block;}
.time03{ -webkit-transition:all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s;}
.img-scale:hover{-webkit-transform:scale(1.05) ; -moz-transform:scale(1.05) ; -o-transform:scale(1.05) ; transform:scale(1.05) ; }
.padTB-a{ padding-top: 100px; padding-bottom: 100px;}
.marT-a{ margin-top: 100px;}
.marT-b{ margin-top: 80px;}
.fontS-a{ font-size: 36px; font-weight: bold; letter-spacing: 3px; line-height: 1.2;}
.bgA{ background-color: #f8f8f8;}

.container-fluid{ padding: 0 100px;}
.a.container-fluid{ padding: 0 200px;}
.pageTitle{ text-align: center;}
.pageTitle p{ font-size: 14px; text-transform: uppercase; letter-spacing: 2px; line-height: 1;}
.pageTitle h4{ font-size: 36px; font-weight: bold; letter-spacing: 3px;}
.pageTitle:after{ content: ''; display: block; width: 50px; height: 3px; border-radius: 10px; background-color: #008AFF;; margin: 7px auto auto auto;}
.pageBtn{ min-width:100px; padding: 0 20px; border-radius: 18px; border: 1px solid #333; text-align: center; display: inline-block; font-size: 14px; line-height: 34px;}
.pageBtn:hover{ background-color: #333; color: #fff;}
.a.pageBtn{ border-color: #fff; color: #fff;}
.a.pageBtn:hover{ color: #008AFF; background-color: #fff;}
.b.pageBtn{ border-color: #fff; background-color: #fff; color:#008AFF;}
.b.pageBtn:hover{ background-color:#333; color: #fff; border-color: #333;}

.bannerPage .slimScrollBar,.stepPage .slimScrollBar{ display: none !important;}
.bannerPage .fp-scroller{ height: 100%;}
#fp-nav.fp-right{ right:60px;}
/* .fp-right .fp-sr-only{ display: none;} */
#fp-nav ul li a span{ width: 8px; height: 8px; border: 1px solid #fff; background-color: inherit; margin: -4px 0 0 -4px; border-color: #000;}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span{ background-color:#008AFF ; border-color: #008AFF; margin: -4px 0 0 -4px; width: 8px; height: 8px;}
.a#fp-nav ul li a span{border-color: #fff !important; -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s;}
.a#fp-nav ul li a.active span{ background-color: #fff !important;}

.header{ position: absolute; left: 0; top: 0; right: 0; padding: 50px 0; display: flex; justify-content: space-between; align-items: center; z-index: 10;}
.logo a{ display: block; width: 251px; height: 40px; background: url(../images/logo.png) no-repeat; background-size: 100%;}
.nav li{ float: left; margin: 0 25px;}
.nav li a{ color: #fff; display: block; position: relative; padding-bottom: 8px;}
.nav li a:after{ content: ''; display: block;  width: 0; position: absolute; left: 50%; bottom: 0; height: 2px; background-color: #fff; transition: all .3s ease-out 0s; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.nav li a.cur:after,.nav li a:hover:after{ width: 100%;}
.headUser a{ min-width: 70px; margin-left: 10px;}
.headUser .a:hover{background-color:#333; color: #fff; border-color: #333;}
.navbar-toggle{ display: none;}
.ceNav{ position: fixed; top: 50%; transform: translateY(-50%); right: 5px; z-index: 500;}
.ceNav li{ margin-bottom: 5px; position: relative;}
.ceNav li:last-child{ margin-bottom: 0;}
.ceNav a{ border-radius: 7px; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 56px; height: 56px; border: 1px solid #198ede; background-color: #fff; color: #198ede; box-shadow: 1px 1px 3px rgba(102,102,102,0.5);}
.ceNav a span{ font-size: 22px; line-height: 1;}
.ceNav a i{ font-size: 12px; line-height: 1; margin-top: 3px;}
.ceNav a:hover{ color: #fff; background-color: #198ede;}
.ceNav-con{ display: none; position: absolute; top: 0; right: 60px; background-color: #fff; border-radius: 7px; padding: 10px; box-shadow: 1px 1px 3px rgba(102,102,102,0.5);}
.ceNav-con p{ text-wrap:nowrap; font-size: 12px; color: #666;}
.ceNav-con p b{ color: #008AFF; font-size: 20px; display: block; line-height: 1.2;}
.ceNav-con img{ width: 100px;}
.ceNav li:hover .ceNav-con{ display: block;}

#fp-nav ul li, .fp-slidesNav ul li{ margin: 7px 2px;}
.bannerPage .bg{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image:url(../images/banner.png); background-repeat: no-repeat; background-size: cover; background-position: center; transform: scale3d(1.2, 1.2, 1);}
.active.bannerPage .bg{ transform: scale3d(1, 1, 1); transition: all 5s cubic-bezier(0.04, 0.79, 1, 1); }
.bannerPage-wrapper{ position: relative; height: 100%;}
.bannerPage .bot{ position: absolute; bottom: 0; left: 0; right: 0;}
.bannerPage .botPic { margin-top: 2%; transform: translateY(100px); opacity: 0; transition: all .5s ease-out 0s;}
.bannerPage .botPic img{ width: 100%;}
.bannerPage .text{ line-height: 1.2; width: 100%; text-align: center; color: #fff; position: absolute; left: 50%; top: 40%; transform: translateX(-50%) translateY(-50%);}
.bannerPage .text h4{ font-size: 80px; font-weight: bold; letter-spacing: 15px;}
.bannerPage .text h5{ font-size: 36px; font-weight: bold; letter-spacing: 5px; margin: 15px 0;}
.bannerPage .text h6{ font-size: 36px;  letter-spacing: 5px;}
.bannerPage .text a{ margin-top: 50px;}
.bannerPage .text .box{ display: flex; justify-content: center; opacity: 0; transition: all .8s ease-out 0s; transform: translateY(300px);}
.bannerPage .text .box img{ width: 50px; height: 200px;}
.bannerPage .text .box .picC,.bannerPage .text .picD{ display: none;}
.bannerPage .textCon{ margin: 0 70px;}
.bannerPage .arrow{ display: flex; flex-wrap: wrap; justify-content: center; }
.bannerPage .arrow img{ width: 24px; animation: rotate 2s linear infinite;}
.bannerPage .arrow span{ text-align: center; display: block; width: 100%; font-size: 14px; margin-top: 10px; color: #fff;}
.bannerPage .textCon p{ margin-top: 20px; display: inline-block; line-height: 30px; color: #008AFF; background-color: #FFDD00; border-radius: 30px; padding: 5px 20px; font-size: 20px; font-weight: bold;}

.active .botPic{transform: translateY(0); opacity: 1;}
.active .text .box{transform: translateY(0); opacity: 1;}

.phoneShow{ display: none;}

.tempList{ margin-top: 100px;}
.tempList ul{ margin-top: -50px; margin-left: -25px; margin-right: -25px;}
.tempList li{ margin-top: 50px; width: 50%; float: left; padding-left: 25px; padding-right: 25px;}
.tempList .liCon{ background-color: #F8F8F8; padding: 5.208333333333334vw 0; display: block; position: relative; border-radius: 10px; }
.tempList .pic{position: relative; width: 33.07291666666667vw; margin: 0 auto;}
.tempList .pc{ position: relative; width:29.166666666666668vw; height: 19.479166666666668vw; background-color: #000; border-radius: 0.5208333333333334vw; overflow: hidden;  -moz-box-shadow:  5px 10px 15px rgba(0,0,0,.16); -webkit-box-shadow: 5px 10px 15px rgba(0,0,0,.16); box-shadow: 5px 10px 15px rgba(0,0,0,.16);}
.tempList .pc img{ position: absolute; left: 0; top: 1.25vw; width: 100%; height: 100%}
.tempList .pc:after{ content: ''; display: block; width: 1.5625vw; height: 0.4166666666666667vw; background: url(../images/tem-1.png) no-repeat; background-size: 100%; position: absolute; left: 0.78125vw; top: 0.4vw;}
.tempList .phone{ position: absolute; top: 3.2vw; right: 0; width: 7.291666666666667vw; height:12.7vw ; background-color: #000; border-radius: 1.1vw ; -moz-box-shadow:  5px 10px 15px rgba(0,0,0,.16); -webkit-box-shadow: 5px 10px 15px rgba(0,0,0,.16); box-shadow: 5px 10px 15px rgba(0,0,0,.16);}
.tempList .phone img{ border-radius: 0.78125vw; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 6.5625vw; height: 12vw;}
.tempList .phone:after{ content: ''; display: block; width: 3.6458333333333335vw; height: 0.78125vw; border-radius: 1.0416666666666667vw ; position: absolute; left: 50%; transform: translateX(-50%); top: 0; background-color: #000;}
.tempList .text{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 10px;}
.tempList .textCon{opacity: 0; text-align: center; color: #fff;  display: flex; flex-wrap: wrap; height: 100%; justify-content: center; align-content: center;}
.tempList .textCon .bg{background-color: rgba(0,138,255,.96); position: absolute;  left: 0; right: 0; top: 0; bottom: 0; border-radius: 10px; opacity: 0; -webkit-transform:scale(.5); -moz-transform:scale(.5) ; -o-transform:scale(.5) ; transform:scale(.5) ;}
.tempList .textCon .eyeIcon{ position: relative; display: block; }
.tempList .textCon .eyeIcon img{ width: 200px;}
.tempList .textCon span{ opacity: 0; position: relative; bottom:0; display: block; color: #fff; font-size: 13px; width: 100%; margin-top: 15px; -webkit-transition:all .1s ease-out 0s; -o-transition: all .1s ease-out 0s; transition: all .1s ease-out 0s;}
.tempList .liCon:hover .textCon .eyeIcon img{ width: 54px;}
.tempList .liCon:hover .textCon span{ bottom: 0; opacity: 1; }
.tempList .liCon:hover .textCon .bg {opacity: 1; -webkit-transform:scale(1); -moz-transform:scale(1) ; -o-transform:scale(1) ; transform:scale(1) ;}
.tempList .font{ opacity: 0; position: absolute; top: 2.6vw; left: 2vw; color: #fff;}
.tempList .font span{ display: block; font-size: 14px; line-height: 1.4;}
.tempList .font .spanB{ font-weight: bold; font-size: 24px; opacity: 0; transform: translateX(50px); transition: 0.2s;}
.tempList .btn{ opacity: 0; position: absolute; bottom: 2.6vw; right: 2vw;}
.tempList .btn a{ font-size: 14px; color: #fff;}
.tempList .btn:after{ content: ''; display: block; position: absolute; left: -100%; bottom: 0; width: 100%; height: 2px; background-color: #fff; transition: 0.2s;}
.tempList .btn.pageLoadingShow:after{ display: none;}
.tempList .liCon:hover .textCon,.tempList .liCon:hover .font,.tempList .liCon:hover .btn{ opacity: 1;}
.tempList .liCon:hover .font .spanB{ transform: translateX(0); opacity: 1;}
.tempList .liCon:hover .btn:after{ left: 0;}
.tempList .jmIcon{ display: block; width: 49px; height: 75px; position: absolute; right: 5px; top: -10px; background: url(../images/icon-jm.png) no-repeat; background-size: 100%;}

.tempSet{ margin-top: 100px; text-align: center;}
.tempSet p{ font-size: 28px; margin-bottom: 5px;}
.tempBot{ display: flex; align-items: center; justify-content: center; background-color: #333; border-radius: 10px; overflow: hidden; min-height: 500px; padding: 100px 0; background-image: url(../images/botBanner.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
.tempBot .text{ text-align: center; color: #fff; line-height: 1.2; padding: 0 50px;}
.tempBot .text h4{ font-size: 36px; font-weight: bold; letter-spacing: 10px;}
.tempBot .text h5{ font-size: 72px; font-weight: bold; letter-spacing: 20px; margin: 20px 0;}
.tempBot .text h6{ font-size: 20px; letter-spacing: 5px;}
.tempBot .btn{ text-align: center; margin-top: 40px;}
.tempBot:hover{ background-color: #008AFF;}
.tempBot:hover .text h5{ letter-spacing: 15px;}

.footer { display: flex; justify-content: space-between;}
.footer p{ font-size: 14px;}

.fyMain .header{ position: inherit; left: inherit; right: inherit; top: inherit; padding: 30px 200px; background-color: #fff; -webkit-box-shadow:0 6px 10px rgba(0,0,0,.12);-moz-box-shadow:0 6px 10px rgba(0,0,0,.12);box-shadow: 0 6px 10px rgba(0,0,0,.12); }
.fyMain .logo a{ background-image: url(../images/logoA.png);}
.fyMain .nav li a{ color: #333;}
.fyMain .nav li a:after{background-color: #008AFF;}
.fyMain .nav li a.cur, .fyMain .nav li a:hover{ color: #008AFF;}
.fyMain .headUser a{ border: 1px solid #008AFF;}
.fyMain .headUser .a.pageBtn{ color: #008AFF;}
.fyMain .headUser .b.pageBtn{ background-color: #008AFF; color: #fff;}
.fyMain .headUser a.pageBtn:hover{ background-color: #333; color: #fff; border-color: #333;}

.sp-tempScreen { display: flex; align-items: center; font-size: 14px;}
.sp-tempScreen .pageTitle{ text-align: left;}
.sp-tempScreen .pageTitle:after{ margin-left: 0;}
.sp-tempScreen-type{ display: flex; margin-left: 50px;}
.sp-tempScreen-type a{ margin-right: 10px; display: block; min-width: 80px; text-align: center; padding: 0 10px; line-height: 38px; border: 1px solid #ddd; border-radius: 20px; font-size: 14px;}
.sp-tempScreen-type a:hover{ border-color: #008AFF; color: #008AFF;}
.sp-tempScreen-type a.curr{border-color: #008AFF; background-color: #008AFF; color: #fff;}
.sp-tempScreen-type a:last-child{ margin-right: 0;}
.sp-tempScreen-type a.unselect{ cursor: not-allowed; color: #999;}
.sp-tempScreen-type a.unselect:hover{ color: #999; border-color: #ddd;}
.sp-tempScreen-sel{ margin-left: 50px; display: flex;}
.sp-tempScreen-sel .selItem{ margin-right: 20px; position: relative;}
.sp-tempScreen-sel .selItem:last-child{ margin-right: 0;}
.sp-tempScreen-sel .selBtn{ cursor: pointer; display: flex; justify-content: space-between; align-items: center;}
.sp-tempScreen-sel .selBtn .iconfont{ font-size: 12px; position: absolute; right: 10px; top:1px; transition: 0.3s;}
.sp-tempScreen-sel .selCon{ display: none; z-index: 20;position: absolute; left: 0; top: 40px; padding-top: 10px; -webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; -webkit-animation-name: layui-upbit; animation-duration: .3s; animation-fill-mode: both; animation-name: layui-upbit;}
.sp-tempScreen-sel .selCon .pd{ padding: 30px; background-color: #fff; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,.1);}
.sp-tempScreen-sel .selCon ul{ margin: -20px -20px 0 -20px;}
.sp-tempScreen-sel .selCon li{ float: left; margin: 0 20px; margin-top: 20px;}
.sp-tempScreen-sel .selCon a{ display: block; position: relative;padding-bottom: 5px;}
.sp-tempScreen-sel .selCon a:after{content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: #fff;}
.sp-tempScreen-sel .selCon a:hover,.sp-tempScreen-sel .selCon .cur a{ color: #008AFF; }
.sp-tempScreen-sel .selCon .cur a:after{ background-color: #008AFF;}
.sp-tempScreen-sel .selItem:hover .selBtn{border-color: #008AFF;transition: 0.3s;}
.sp-tempScreen-sel .selItem:hover .iconfont{ top: -1px; color: #008AFF; transform:rotate(180deg);}
.sp-tempScreen-sel .ys i{display: block; width: 32px; height: 20px; border-radius: 5px;}
.sp-tempScreen-sel .ys .selCon ul{ margin: -20px -10px 0 -10px;}
.sp-tempScreen-sel .ys .selCon li{ margin: 20px 10px 0 10px;}
.sp-tempScreen-sel .ys .col-colorful{ background: url(../images/tem-2.png) no-repeat; background-size: 100%;}
.sp-tempScreen-sel .ys .col-red{ background-color: #FE0000;}
.sp-tempScreen-sel .ys .col-orange{ background-color: #ff6300;}
.sp-tempScreen-sel .ys .col-yellow{ background-color: #fae242;}
.sp-tempScreen-sel .ys .col-green{ background-color: #80d031;}
.sp-tempScreen-sel .ys .col-lightblue{ background-color: #26e0d2;}
.sp-tempScreen-sel .ys .col-blue{ background-color: #198ede;}
.sp-tempScreen-sel .ys .col-lightpurple{ background-color: #fe68ff;}
.sp-tempScreen-sel .ys .col-white{ background-color: #fff; border: 1px solid #333;}
.sp-tempScreen-sel .ys .col-gray{ background-color: #999; }
.sp-tempScreen-sel .ys .col-black{ background-color: #000;}
.sp-tempScreen-sel .ys .col-violet{ background-color: #990099;}
.sp-tempScreen-sel .ys .col-brown{ background-color: #974b00;}
.sp-tempScreen .formInp{position: relative; border:1px solid #ddd; height: 40px; line-height: 38px; width: 180px; padding: 0 20px; border-radius: 20px;}
.sp-tempScreen-search{ flex: 1; display: flex; justify-content: flex-end; margin-left: 50px;}
.sp-tempScreen-search .formInp{ padding-right: 45px;}
.sp-tempScreen-search .con{ position: relative}
.sp-tempScreen-search a{ position: absolute; top: 50%; margin-top: -14px; right: 6px; width: 28px; height: 28px; border-radius: 50%; text-align: center; line-height: 28px; font-size: 14px;}
.sp-tempScreen-search .con:hover a{ background-color: #000; color: #fff;}
.sp-tempScreen-search .con:hover a:hover{ background-color: #008AFF; color: #fff; font-size: 16px;}

.sp-tempCon .tempList { margin-top: 0;}
.sp-tempCon .tempList li{ width: 33.33333%;}
.sp-tempCon .tempList .liCon{ padding: 2.604166666666667vw 0;}
.sp-tempCon .tempList .pic{ width: 23.4375vw;}
.sp-tempCon .tempList .pc{ width: 20.625vw; height: 13.802083333333334vw; border-radius: 0.4166666666666667vw;}
.sp-tempCon .tempList .phone{ border-radius: 0.625vw; width: 5.208333333333334vw; height: 9.3vw; top: 2.5vw;}
.sp-tempCon .tempList .phone img{border-radius: 0.5vw;  width: 4.6875vw; height: 8.7vw;}
.sp-tempCon .tempList .phone:after{ width: 2.6vw; height: .5vw;}
.sp-tempPage{ display: flex; justify-content: center; align-items: center;}
.sp-tempPage a{ display: block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 12px; background-color: #fff; border-radius:50%; box-shadow: 2px 4px 8px rgba(51,51,51,.08);}
.sp-tempPage .text{ font-size: 14px; line-height: 1; margin: 0 15px;}
.sp-tempPage .text span{ color: #008AFF;}
.sp-tempPage a:hover{ background-color: #008AFF; color: #fff; font-size: 16px; transition: 0.2s;}
.sp-tempSm{ border: 1px solid #008AFF; padding: 20px; border-radius: 5px; }
.sp-tempSm p{font-size: 14px; color: #999;}
.sp-tempSm b{ color: #008AFF;}

.sp-serviceCon{ position: relative; background: url(../images/ser-1.png) no-repeat; background-size: auto 1400px; background-position: center top;}
.sp-serviceWrap { position: relative; display: flex; justify-content: space-between; align-items: center;}
.sp-serviceWrap .r{ flex: 1; margin-left: 5%;}
.sp-serviceWrap .tit p{ font-size: 24px; opacity: .24; }
.sp-serviceWrap .param{ display: flex; justify-content:space-between; flex-wrap: wrap; width: 380px;}
.sp-serviceWrap .param dl{width: 150px; padding-bottom: 10px; border-bottom: 1px solid #707070; margin-top: 40px;}
.sp-serviceWrap .param dl:nth-child(1),.sp-serviceWrap .param dl:nth-child(2){ margin-top: 0;}
.sp-serviceWrap .param dd{ margin-top: 5px; font-size: 14px;}
.sp-serviceWrap .hosting{ display: flex; justify-content: center; }
.sp-serviceWrap .hosting li{ float: left; margin-left: 50px;}
.sp-serviceWrap .hosting a{ display: block; position: relative; padding-bottom: 5px;}
.sp-serviceWrap .hosting a:after{ content: ''; display: block;  width: 0; position: absolute; left: 50%; bottom: 0; height: 2px; background-color: #008AFF; transition: all .3s ease-out 0s; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.sp-serviceWrap .hosting .cur a,.sp-serviceWrap .hosting a:hover{ color: #008AFF}
.sp-serviceWrap .hosting .cur a:after,.sp-serviceWrap .hosting a:hover:after{ width: 100%;}
.sp-serviceWrap .price{ height: 250px; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin-left:-10px; margin-right: -10px;}
.sp-serviceWrap .price .box{  width: 25%; padding: 0 10px; }
.sp-serviceWrap .price .boxCon{position: relative; width: 100%; height: 210px; padding: 25px;background-color: #fff; border-radius: 10px; -webkit-box-shadow:5px 10px 15px rgba(0,0,0,.16);-moz-box-shadow:5px 10px 15px rgba(0,0,0,.16);box-shadow: 5px 10px 15px rgba(0,0,0,.16);}
.sp-serviceWrap .price dl{ line-height: 1.4;}
.sp-serviceWrap .price dt{ font-size: 18px;}
.sp-serviceWrap .price dd{ font-size: 24px; font-weight: bold; transition: 0.2s;}
.sp-serviceWrap .price dl .spanA{ font-size: 14px; margin: 5px 0 10px 0; display:inline-block; background-color: #008AFF; color: #fff; line-height: 20px; border-radius: 15px; padding: 0 12px; min-width: 60px;}
.sp-serviceWrap .price dl .spanB{ font-size: 14px; display: block; color: #fff;}
.sp-serviceWrap .price .hot{ display: block; position: absolute; right: 0; top: -15px; width: 49px; height: 75px; background: url(../images/icon-hot.png) no-repeat; background-size: 100%;}
.sp-serviceWrap .price .btn { position: absolute; right: 25px; bottom: 10px;}
.sp-serviceWrap .price .btn a{ font-size: 14px;}
.sp-serviceWrap .price .btn:after{ content: ''; display: block; position: absolute; left: -30%; bottom: 0; width: 100%; height: 2px; background-color: #fff; opacity: 0;  transition: 0.2s;}
.sp-serviceWrap .price .curr .boxCon,.sp-serviceWrap .price .boxCon:hover{ background-color: #008AFF; color: #fff; height: 250px;}
.sp-serviceWrap .price .curr dd,.sp-serviceWrap .price .boxCon:hover dd{ font-size: 36px;}
.sp-serviceWrap .price .curr dl .spanA,.sp-serviceWrap .price .boxCon:hover dl .spanA{ background-color: #fff; color: #008AFF;}
.sp-serviceWrap .price .curr .btn,.sp-serviceWrap .price .boxCon:hover .btn{ bottom: 30px;}
.sp-serviceWrap .price .curr .btn a,.sp-serviceWrap .price .boxCon:hover .btn a{ color: #fff;}
.sp-serviceWrap .price .curr .btn::after,.sp-serviceWrap .price .boxCon:hover .btn::after{ opacity: 1; left: 0;}
.sp-serviceFun{ background-color: #fff; padding: 60px 100px; border-radius: 10px;  box-shadow: 5px 10px 15px rgba(0,0,0,.16);}
.sp-serviceFun .tit{ display: flex; justify-content: space-between;}
.sp-serviceFun .tit h5{ font-weight: bold; position: relative; padding-bottom: 5px;}
.sp-serviceFun .tit h5:after{ content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background-color: #008AFF;}
.sp-serviceFun .tit p{ font-size: 14px;}
.sp-serviceFun-con{ margin-top: 50px;}
.sp-serviceFun-con li{ padding: 50px 0; border-top: 1px solid #ddd; display: flex; position: relative; padding-left: 94px;} 
.sp-serviceFun-con .col{ width: 23%; font-size: 14px; min-height: 64px; display: flex; padding-top: 20px;}
.sp-serviceFun-con .col dt span{ display: block;}
.sp-serviceFun-con .col dd span{ color: #999; display: block;}
.sp-serviceFun-con .colA {display: flex; padding-top: 0;}
.sp-serviceFun-con .colA img{ width: 64px; position: absolute;  left: 0; top: 50px;}
.sp-serviceFun-con .colA span{ display: block; font-size: 18px; font-weight: bold; color: #000; line-height: 64px;}
.sp-serviceFun-con .colE{ width: 8%;}

.fyPreview{ min-width: 1330px;}
.previewHead{ min-width: 1366px; position: fixed; left: 0; right: 0; top: 0; z-index: 20; height: 60px; background-color: #fff; }
.fyMain .previewHead .logo a{ width: 186px; height: 30px;}
.previewHead-wrapper{ position: relative; display: flex; justify-content: space-between; align-items: center; height: 60px; box-shadow: 0 6px 10px rgba(0,0,0,.12);}
.previewHead .device ul{ display: flex;}
.previewHead .device li{ margin: 0 15px;}
.previewHead .device a{ line-height: 60px; font-size: 14px; display: flex; align-items: center; padding: 0 10px; position: relative;}
.previewHead .device i{ font-size: 20px; margin-right: 10px;}
.previewHead .device a:after{ content: ''; display: block;  width: 0; position: absolute; left: 50%; top: 0; height: 2px; background-color: #008AFF; transition: all .2s ease-out 0s; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.previewHead .device a:hover,.previewHead .device .curr a{color: #008AFF;}
.previewHead .device .curr a:after,.previewHead .device a:hover:after{ width: 100%; }
.previewHead .otherSet{ display: flex; align-items: center;  position: relative; width: 370px; justify-content: flex-end;}
.previewHead .code{ margin-right: 10px; position: relative;}
.previewHead .codeBtn{ font-size: 14px; display: flex; align-items: center; line-height: 60px;}
.previewHead .codeBtn i{ font-size: 24px; margin-right: 10px;}
.previewHead .codeCon{ display: none; z-index: 50; position: absolute; left: 50%; transform: translateX(-50%); top: 50px; background-color: #fff; border-radius: 10px; padding: 15px; box-shadow: 2px 4px 8px rgba(51, 51, 51, 0.08);}
.previewHead .codeCon img{ width: 120px; height: 120px;}
.previewHead .code:hover .codeCon{ display: block;}
.previewHead .code:hover .codeBtn{ color: #008AFF;}
.previewHead .headUser{display: block !important;}
.previewHead .bdsharebuttonbox { position: absolute; right: 112px; top: 50%; margin-top: -18px; height: 36px; width: 70px;}
.previewHead .bdshare-button-style0-24 .bds_more{ background: none; width: 100%; height: 100%;}
.previewHead .leftSet{ display: flex; align-items: center; width: 370px;}
.previewHead .leftSet .text{font-size: 14px; margin-left:30px;}
.previewHead .leftSet .text a{ color: #008AFF; margin-left: 10px;}
.previewHead .previewHead-dropTem{ border-top: 1px solid #ddd; background-color: #fff; padding-top: 40px; padding-bottom: 50px;box-shadow: 0 4px 8px rgba(0,0,0,.12); -webkit-animation-duration: .3s; -webkit-animation-fill-mode: both; -webkit-animation-name: layui-upbit; animation-duration: .3s; animation-fill-mode: both; animation-name: layui-upbit;}
.previewHead-typeChoose{ margin-bottom: 30px; display: flex; justify-content: space-between;}
.previewHead-typeChoose a{ display: inline-block; border-bottom: 3px solid #fff; margin-right: 30px; padding-bottom: 5px;}
.previewHead-typeChoose a.cur{ border-bottom-color:#008AFF; color: #008AFF;}
.previewHead-typeChoose a:last-child{ margin-right: 0;}
.previewHead-typeChoose a:hover{ color: #008AFF;}
.previewHead-dropTem .swiper-button-next, .previewHead-dropTem .swiper-button-prev{ outline: none; width: 40px; height: 40px; border-radius: 50%; background-color: #333; color: #fff; font-size: 16px;}
.previewHead-dropTem .swiper-button-next{ right: 20px;}
.previewHead-dropTem .swiper-button-prev{ left: 20px;}
.previewHead-dropTem .swiper-button-next:after, .previewHead-dropTem .swiper-button-prev:after{  display: none;}
.previewHead-dropTem .swiper-button-next:hover, .previewHead-dropTem .swiper-button-prev:hover{ background-color: #008AFF;}
.previewHead-dropTem .tip{ text-align: center;}
.previewHead-dropTem .clearBtn{ margin: 30px auto auto auto; display: block; width: 100px;}

.previewBox{ position: fixed; top: 60px; bottom: 0; left: 0; right: 0; transition: all .2s ease-out 0s}
.preview-wrap{ height: 100%;}
.phoneWid{position: relative; width: 380px; height: 800px; margin: 100px auto; background-color: #333; padding: 20px 18px; border-radius: 50px; box-shadow: 5px 10px 15px rgba(0,0,0,.16);}
.phoneWid .preview-wrap{ border-radius: 30px; height: 760px; background-color: #fff; overflow: hidden; }
.phoneWid:after{ content: ''; display: block; width: 197px; height: 45px; background: url(../images/phoneM.png) no-repeat; position: absolute; left: 50%; transform: translateX(-50%); top: 0;}
/* .padWid{position: relative; width: 1000px; height: 800px; margin: 100px auto; background-color: #333; padding: 20px 18px; border-radius: 50px; box-shadow: 5px 10px 15px rgba(0,0,0,.16);} */
.padWid{position: relative; width: 768px; height: 1024px; margin: 50px auto; background-color: #333; padding: 20px 18px; border-radius: 50px; box-shadow: 5px 10px 15px rgba(0,0,0,.16);}
.padWid .preview-wrap{ border-radius: 30px; height: 984px; background-color: #fff; overflow-y: hidden;}
.mCSB_container{ margin-right: 0;}
.mCS_disabled>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar, .mCS_destroyed>.mCustomScrollBox>.mCSB_container.mCS_no_scrollbar{ margin-right: 0;}
.mask{ position: fixed; left: 0; top: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.8);}


.emptyText{ text-align: center;}
.loading {
    background: url('../images/load.gif') center center no-repeat ;
    width: 50vw;
    height: 50vh;
    z-index: 1000;
    margin: 0 auto;
}

@media screen and (max-width: 1679px){
    .sp-serviceWrap .r{margin-left: 3%;}
    .sp-serviceWrap .param .fontS-a{ font-size: 30px;}
    .sp-serviceWrap .param{ width: 240px;}
    .sp-serviceWrap .param dl{width: 100px; }
    .sp-serviceWrap .price .curr dd, .sp-serviceWrap .price .boxCon:hover dd{ font-size: 30px;}

    .fyMain .header{  padding-left: 100px; padding-right: 100px;}
}


@media screen and (max-width: 1439px){
    body{ font-size: 14px;}
    .container-fluid{ padding: 0 50px;}
    .a.container-fluid{ padding: 0 100px;}
    
    .header{ padding: 30px 0;}
    .nav li{ margin: 0 15px;}

    .bannerPage .text h4{ font-size: 46px;}
    .bannerPage .text h5,.bannerPage .text h6{ font-size: 26px;}
    .bannerPage .botPic { margin-top: 20px;}
    
    .tempBot .text h5{ font-size: 64px;} 

    .sp-tempScreen-type,.sp-tempScreen-sel,.sp-tempScreen-search{ margin-left: 20px;}
    .sp-serviceWrap{ display: block;}
    .sp-serviceWrap .r{ margin-left: 0; flex: none;}
    .sp-serviceWrap .tit{ text-align: center;}
    .sp-serviceWrap .param{ width: 100%; justify-content: space-around;}
    .sp-serviceWrap .param dl{ margin-top: 0; width: 120px;}
    .sp-serviceWrap .hosting{ margin-top: 80px;}
    .sp-serviceFun{ padding-left: 50px; padding-right: 50px;}
}

@media screen and (max-width: 1199px){
    .padTB-a{ padding-top: 60px; padding-bottom: 60px;}
    .marT-a{ margin-top: 60px;}
    .marT-b{ margin-top: 60px;}

    .fyMain .header{ padding:20px 50px;}

    .footer{ flex-wrap: wrap;}
    .footer p{ text-align: center;  width: 100%; line-height: 2;}
    .footer span{ display: block;}


    .sp-tempScreen{ flex-wrap: wrap;}
    .sp-tempScreen .pageTitle{ width: 100%; text-align: center; margin-bottom: 50px;}
    .sp-tempScreen .pageTitle:after{ margin-left: auto;}
    .sp-tempScreen-type{ margin-left: 0;}
    .sp-tempScreen-sel .selCon ul{ margin-left: -10px; margin-right: -10px;}
    .sp-tempScreen-sel .selCon li{ margin-left: 10px; margin-right: 10px;}

    .sp-tempCon .tempList li{ width:50%;}
    .sp-tempCon .tempList .liCon{  padding: 5.208333333333334vw 0; }
    .sp-tempCon .tempList .pic{ width: 33.07291666666667vw;}
    .sp-tempCon .tempList .pc{ width:29.166666666666668vw; height: 19.479166666666668vw; border-radius: 0.5208333333333334vw;}
    .sp-tempCon .tempList .pc img{ top: 1.25vw;}
    .sp-tempCon .tempList .pc:after{ width: 1.5625vw; height: 0.4166666666666667vw; left: 0.78125vw; top: 0.4vw;}
    .sp-tempCon .tempList .phone{ top: 3.2vw; width: 7.291666666666667vw; height:12.7vw ;  border-radius: 1.1vw ; }
    .sp-tempCon .tempList .phone img{ border-radius: 0.78125vw; width: 6.5625vw; height: 12vw;}
    .sp-tempCon .tempList .phone:after{  width: 3.6458333333333335vw; height: 0.78125vw; border-radius: 1.0416666666666667vw ; }

    .sp-serviceFun li{ flex-wrap: wrap; align-items: flex-start; padding: 30px 0 30px 94px;}
    .sp-serviceFun .col{ width: 30%; padding-top: 0;}
    .sp-serviceFun .colA{ width: 100%; margin-bottom: 20px;}
    .sp-serviceFun-con .colA img{ margin-top: 0; top: 30px;}
    .sp-serviceFun-con .colA span{ line-height: 64px;}
    .sp-serviceFun .colE{ width: 10%;}
}

@media screen and (max-width: 991px){
    .a.container-fluid{ padding: 0 50px;}

    .nav{ display: none;}
    .headUser{ display: none;}
    .header{ padding: 0; height: 60px;}
    .logo a{ width: 188px; height: 30px;}
    .navbar-toggle{ display: block; margin-right: -15px;}
    .navbar-toggle a{ display: block; width: 60px; height: 60px; background-image: url(../images/navBtn.png); background-repeat: no-repeat; background-position: center; background-size: 20px auto;}

    .curr.header{ overflow: hidden; background-color: #fff;  z-index: 1000; position: fixed; left: 0; right: 0; height: 100vh; padding: 0 15px; align-items: flex-start;}
    .curr .nav{ display: block; position: absolute; left: 0; right: 0; top: 60px; bottom: 0; background-color: #fff; border-top: 1px solid #f1f1f1;}
    .curr .nav li{ width: 100%; margin: 0; padding: 0 30px;}
    .curr .nav a{ color: #333; display: block; border-bottom: 1px solid #f5f5f5; padding: 15px 0;}
    .curr .nav a:after{ display: none;}
    .curr .logo{ position: relative; top: 15px;}
    .curr .logo a{ background-image: url(../images/logoA.png);}
    .curr .navbar-toggle a{ background-image: url(../images/navBtnA.png); }
    .curr .headUser{ display: block; position: absolute; left: 30px; right: 30px; bottom:130px; display: flex; justify-content: space-between;}
    .curr .headUser a{ width: 47%; margin: 0; background-color: #008AFF; border-color: #008AFF; color: #fff; line-height: 40px; border-radius: 0;}

    .fyMain .header{ padding-top: 0; padding-bottom: 0;}
    .fyMain .navbar-toggle a{ background-image: url(../images/navBtnB.png);}
    .fyMain .curr .navbar-toggle a{background-image: url(../images/navBtnA.png);}
    .fyMain .curr .headUser a.pageBtn{ color: #fff;}

    .sp-tempScreen-type{ width: 100%; justify-content: center; margin-bottom: 20px;}
    .sp-tempScreen-sel{ margin-left: 0;}
    .sp-serviceWrap .price { align-items: flex-start; height: auto;}
    .sp-serviceWrap .price .box{ width: 50%; margin-top: 20px;}
    .sp-serviceWrap .price .box:nth-child(1),.sp-serviceWrap .price .box:nth-child(2){ margin-top: 0;}
    .sp-serviceWrap .price .boxCon{ height: 250px;}
    .sp-serviceWrap .price dd,.sp-serviceWrap .price .curr dd, .sp-serviceWrap .price .boxCon:hover dd{ font-size: 28px;}
    .sp-serviceWrap .price dl .spanB{ color: #333;}
    .sp-serviceWrap .price .curr dl .spanB{color: #fff;}
    .sp-serviceWrap .price .btn{ bottom: 30px;}
    .sp-serviceWrap .price .btn:after{ opacity: 1; left: 0;}
    .sp-serviceWrap .price .boxCon:hover { background-color: #fff; color: #333 !important;}
    .sp-serviceWrap .price .boxCon:hover .btn a{ color: #333;}
    .sp-serviceWrap .price .boxCon:hover dl .spanA{ background-color: #008AFF; color: #fff;}
    .sp-serviceWrap .price .curr .boxCon:hover { background-color: #008AFF; color: #fff !important;}
    .sp-serviceWrap .price .curr .boxCon:hover .btn a{ color: #fff;}
    .sp-serviceWrap .price .curr .boxCon:hover dl .spanA{ background-color: #fff; color: #008AFF;}
}

@media screen and (max-width: 767px){
    .padTB-a{ padding-top:50px; padding-bottom: 50px;}
    .marT-a{ margin-top: 50px;}
    .marT-b{ margin-top: 40px;}
    .fontS-a{ font-size: 24px;}
    .container-fluid,.a.container-fluid{ padding: 0 15px;}
    .pageTitle p{ font-size: 12px; line-height: 1.2;}
    .pageTitle h4{ font-size: 24px;}
    .pageTitle:after{ width: 30px;}

    .bannerPage .text{ top: 45%;}
    .bannerPage .text h4{ font-size: 36px; letter-spacing: 5px;}
    .bannerPage .text h5,.bannerPage .text h6{ font-size: 18px; letter-spacing: 5px;}
    .bannerPage .text .box{ flex-wrap: wrap;}
    .bannerPage .text .box .picA,.bannerPage .text .box .picB{ display: none;}
    .bannerPage .text .box .picC,.bannerPage .text .box .picD{ display: block; width: 35%; height: auto;}
    .bannerPage .textCon{ width: 100%; margin: 10% 0;}
    .bannerPage .text a{ margin-top: 30px;}

    .pcShow{ display: none;}
    .phoneShow{ display: block;}
    .bannerPage .phoneShow{display: inline-block;} 
    #footer .phoneShow{display: inline-block;} 

    .stepPage .slimScrollBar{ display: block !important;}
    .stepPage-wrapper .pageTitle{ padding-top: 50px; background-color: #f8f8f8;}
    .mainYs-con li{ padding: 80px 0;}
    .mainYs-con li:nth-child(1){ background-color: #F8F8F8;}
    .mainYs-con li:nth-child(3){ background: url(../images/ys-7.png) no-repeat; background-size: cover; background-position: center; background-color: #454545;}
    .mainYs-con .text{ display: flex; justify-content: center; align-items: center;}
    .mainYs-con .text img{ height: 100px;}
    .mainYs-con dl{ margin-left: 30px;}
    .mainYs-con dt{ font-size: 36px; font-weight: bold;}
    .mainYs-con dd{ font-size: 14px;}
    .mainYs-con .pic{ margin-top: 50px; width: 100%; }
    .mainYs-con .pic img{ width:100%;}
    .mainYs-con li:nth-child(3) dl{ color: #fff;}

    .tempList{ margin-top: 50px;}
    .tempList li{ width: 100%; margin-top: 20px;}
    .tempList .liCon{padding: 30px 0; border-radius: 10px; }
    .tempList .pic{ width: 280px; }
    .tempList .pc{ width:240px; height: 174px; border-radius: 6px; }
    .tempList .pc img{ top: 14px; height: 160px}
    .tempList .pc:after{  width: 16px; height: 5px; left: 8px; top: 5px;}
    .tempList .phone{ top: 30px;width: 70px; height: 118px; border-radius: 10px; }
    .tempList .phone img{ border-radius: 6px; width: 62px; height: 110px;}
    .tempList .liCon:hover .textCon{ opacity: 0;}
        
    .tempSet{ margin-top: 30px;}
    .tempSet p{ font-size: 18px;}
    .tempBot{ padding: 50px 0; min-height: auto;}
    .tempBot .text{ padding: 0 30px;}
    .tempBot .text h4{ font-size: 18px;}
    .tempBot .text h5{ font-size: 36px; letter-spacing: 10px;}
    .tempBot .text h6{ font-size: 14px;}
    .tempBot:hover{ background-color: #333;}
    .tempBot:hover .text h5{ letter-spacing: 10px;}
    .footer p{ font-size: 14px;}

    .fyMain .header{ padding-left: 15px; padding-right: 15px;}


    .sp-tempScreen .pageTitle{ margin-bottom: 30px;}
    .sp-tempScreen-sel{ width: 100%;}
    .sp-tempScreen-sel .selItem{ margin-bottom: 20px; width: 100%;}
    .sp-tempScreen .formInp{ width: 100%;}
    .sp-tempScreen-search { margin-left: 0;}
    .sp-tempScreen-search .con{ width: 100%;}
    .sp-tempScreen-sel .selCon .pd{ padding: 20px;}
    .sp-tempScreen-sel .selCon ul{ margin: -10px -5px 0 -5px !important;}
    .sp-tempScreen-sel .selCon li{ margin:10px 5px 0 5px !important;}

    .sp-tempCon .tempList{ margin-top: 0;}
    .sp-tempCon .tempList ul{ margin: 0; margin-top: -20px;}
    .sp-tempCon .tempList li{ width: 100%; margin: 0; margin-top: 20px; padding: 0;}
    .sp-tempCon .tempList .liCon{padding: 30px 0; border-radius: 10px; }
    .sp-tempCon .tempList .pic{ width: 280px; }
    .sp-tempCon .tempList .pc{ width:240px; height: 174px; border-radius: 6px; }
    .sp-tempCon .tempList .pc img{ top: 14px; height: 160px}
    .sp-tempCon .tempList .pc:after{  width: 16px; height: 5px; left: 8px; top: 5px;}
    .sp-tempCon .tempList .phone{ top: 30px;width: 70px; height: 118px; border-radius: 10px; }
    .sp-tempCon .tempList .phone img{ border-radius: 6px; width: 62px; height: 110px;}
    .sp-tempCon .tempList .liCon:hover .text{ opacity: 0;}
    
    .sp-serviceWrap .tit p{ font-size: 16px;}
    .sp-serviceWrap .param { justify-content: space-between;}
    .sp-serviceWrap .param dl{ width: 46%; text-align: center; margin-top: 30px;}
    .sp-serviceWrap .param dl:nth-child(1),.sp-serviceWrap .param dl:nth-child(2){ margin-top: 0;}
    .sp-serviceWrap .param .fontS-a{ font-size: 24px;}
    .sp-serviceWrap .price dd, .sp-serviceWrap .price .curr dd, .sp-serviceWrap .price .boxCon:hover dd{ font-size: 24px;}
    .sp-serviceWrap .hosting { margin-top: 40px;}
    .sp-serviceWrap .hosting li{ margin-left: 15px;}
    .sp-serviceWrap .price .boxCon{padding-left: 15px; padding-right: 15px; }
    .sp-serviceWrap .price .btn{ right: 15px;}
    .sp-serviceFun{ padding: 30px 20px;}
    .sp-serviceFun-con{ margin-top: 30px;}
    .sp-serviceFun li{ padding-left: 60px;}
    .sp-serviceFun-con .col{ width: 100%; min-height: auto;}
    .sp-serviceFun-con .colA{ margin-bottom: 10px; width: 100%;}
    .sp-serviceFun-con .colA span{ line-height: 40px;}
    .sp-serviceFun-con .colA img{ width: 40px;}
    .sp-serviceFun-con .col dl{ margin-top: 5px;}
    .sp-serviceFun-con .col dt span,.sp-serviceFun-con .col dd span{ display: inline-block; vertical-align: top; margin-right: 15px;}
}


@-webkit-keyframes rotate {
    0% {
        -webkit-transform: translateY(0) ;
        opacity: 0;
    }
    50% {
        -webkit-transform: translateY(10px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(0) ;
        opacity: 0;
    }
}

@keyframes rotate {
    0% {
        transform: translateY(0) ;
        opacity: 0;
    }
    50% {
        transform: translateY(10px);
        opacity: 1;
    }
    100% {
        transform: translateY(0) ;
        opacity: 0;
    }
}

@-webkit-keyframes layui-upbit {
	from {
		-webkit-transform: translate3d(0,15px,0);
		opacity: .3
	}

	to {
		-webkit-transform: translate3d(0,0,0);
		opacity: 1
	}
}

@keyframes layui-upbit {
	from {
		transform: translate3d(0,15px,0);
		opacity: .3
	}
	to {
		transform: translate3d(0,0,0);
		opacity: 1
	}
}