@charset "utf-8";
body { width: 100%; margin: 0; padding: 0; font-family:PingFang SC,Lantinghei SC,Microsoft YaHei,HanHei SC,Helvetica Neue,Open Sans,Arial,Hiragino Sans GB,"微软雅黑",STHeiti,WenQuanYi Micro Hei,SimSun,sans-serif,HYWenHei-GEW !important; background: #fff; overflow-x: hidden; }
* { margin: 0; padding: 0; list-style: none;}

.blue{ color: #0071ef; }
.purple{ color: #be41ef; }
.red{ color: #ff5975; }
.orange{ color: #ff8630; }

.centerbox { width:1280px; margin: 0 auto; position: relative; min-width: 480px;}
header { float: left; width: 100%; height: 70px; background: rgba(255,255,255,0); box-shadow: 0 2px 8px rgba(21,21,21,0); position: fixed; top: 0; left: 0; z-index: 888; transition:all 200ms; }
header.hbarbg {background: rgba(255,255,255,1); box-shadow: 0 5px 15px rgba(21,21,21,.08);}
header .logo {float: left; height: 40px; margin-top: 16px; line-height: 36px; font-size:20px; color:#888; line-height:48px; font-weight:normal; }
header .logo img { float:left; margin-right:2px;}

nav { float:right; margin-top: 24px; }
nav ul li { float:left; margin: 0 23px; font-size: 18px; letter-spacing: 2px;  }
nav ul li a { color: #444; text-decoration: none;}
nav ul li a:hover,nav ul li.current a {color:#ff4d5a;}
nav ul li.current a{ position: relative; }
nav ul li.current a:after{ content: ''; position: absolute; bottom:-20px; left: 6px; right: 10px; height: 3px; background-color: #ff4d5a; border-radius: 6px;}

.download{position:relative; z-index:99; top: -10px;}
.download span{ background: linear-gradient( 90deg, #F33E3E 0%, #FE8574 100%); text-align: center; border-radius: 20px; font-size: 14px; color: #fff; width: 128px; line-height: 40px; cursor: pointer; display: inline-block;}
.download .code{ position:absolute; top:54px;right:-32px; background-color:#fff; border-radius:8px; padding:16px 10px; box-shadow: 0 0 5px rgba(21,21,21,0.08); text-align:center; font-size: 13px; display:none; }
.download:hover .code{ display:flex;}
.download .code::before {
    content: "";
    position: absolute;
	top:-8px;
	right:86px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
  }

.banner { width: 100%;   position: relative; }
.mobbanner { max-width: 100%; height: auto; vertical-align:middle;}
@media (max-width:1279px){
	.centerbox { width:98%;}
	.mobbanner{ max-width: 140%; height: auto; margin-left:-20%; }
	.banner {height: auto;}
}
@media (max-width:1080px){
	nav ul li { margin: 0 15px; letter-spacing: 0;  }
	.banner {height: auto;}
}
@media (max-width:750px){
	header {display:none;}
}



.bktitle{ padding:72px 0 54px; font-size:48px; text-align:center;}
.bktitle p{ font-size: 24px; color: #444; font-weight: normal; }

.juese{  background:url(../../images/htt/bg01.png) no-repeat center 0;  background-size: cover; padding-bottom: 100px; }
.juese .con{ position: relative; z-index: 0 }
.juese .tab{ width: 40%; position: absolute; right: 0; top: 30px; border-bottom: 1px solid #D8E1F0; display: flex;}
.juese .tab li{ font-size: 20px; line-height: 2.4; color: #666; padding: 0  24px; margin-right: 10px; cursor: pointer;}
.juese .tab li.cur{ color: #333; position: relative; } 
.juese .tab li.cur:after{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: #007AFF; border-radius: 4px; }
.juese .box{ display: flex; align-items:  flex-start; justify-content: space-between; }
.juese .box .img{ width:50%; }
.juese .box .img img{ max-width: 100%;}
.juese .box .text{ width: 40%; padding-top:150px;}
.juese .box .text h3{ background:url(../../images/htt/blue.png) no-repeat left top; font-size: 32px; padding: 12px; }
.juese .box .text p{ background:url(../../images/htt/img.png) no-repeat left top; font-size: 22px; color: #4B5361;  padding-left: 48px; margin-top: 24px;}
.juese .box .text .link{  background: linear-gradient( 90deg, #F33E3E 0%, #FE8574 100%); text-align: center; border-radius: 20px; font-size: 16px; color: #fff; width: 128px; line-height: 40px; cursor: pointer; margin-top: 60px;}

.moshi{  background:url(../../images/htt/bg02.jpg) no-repeat center 0;  background-size: cover; padding-bottom: 100px;}
.moshi .box{ text-align: center; }
.moshi .box img{ max-width:100%; }

.yingxiao{  background:url(../../images/htt/bg03.png) no-repeat center 0;  background-size: cover; padding-bottom: 100px;}
.yingxiao .dl{ display: flex; }
.yingxiao .dt{ width: 64.5%; margin-right: 24px; }
.yingxiao .dt .part1{ width: 100%; height: 288px; background:url(../../images/htt/lpk-bg.png) no-repeat center 0;  background-size: cover; padding: 30px; box-sizing: border-box; border-radius: 10px;}
.yingxiao .dt .part1 p{ width: 57%; }
.yingxiao .dt .part2{ display: flex; justify-content: space-between;}
.yingxiao .dt .part2 .item{ position: relative; z-index: 0; width: 48.5%; height: 286px; margin-top: 24px; background-color: #E9EFFF; border-radius: 10px;padding: 30px; box-sizing: border-box;}
.yingxiao .dd{ width: 33.5%; height: 598px; background:url(../../images/htt/xss-bg.png) no-repeat center 0;  background-size: cover;padding: 30px; box-sizing: border-box; border-radius: 10px;}
.yingxiao span{ position: absolute; right: 24px; top: 24px; width: 40px; height: 40px; background-color: #fff; box-shadow: 0 0 5px rgba(212,225,255,1); border-radius: 6px; text-align: center; line-height: 40px; font-size: 36px }
.yingxiao h4{ font-size: 28px; font-weight: 500; color:#1D2129;}
.yingxiao p{ font-size: 20px; color: #4B5361; margin-top: 20px;}

.gongneng{ background-color: #EDF4FF; padding-bottom: 80px; }
.gongneng .list{ display: flex; flex-wrap: wrap; }
.gongneng .list .item{ position: relative; z-index: 0; width:23.8%; height: 260px; margin-right: 20px; margin-bottom: 20px; background-color: #fff; border-radius: 10px; padding: 30px; box-sizing: border-box;}
.gongneng .list .item:nth-child(4n){ margin-right: 0 }
.gongneng .list .item span{ position: absolute; right: 24px; top: 24px; width: 40px; height: 40px; background-color: #fff; box-shadow: 0 0 5px rgba(212,225,255,1); border-radius: 6px; text-align: center; line-height: 40px; font-size: 36px }
.gongneng .list .item h4{ font-size: 28px; font-weight: 500; color:#1D2129;}
.gongneng .list .item p{ font-size: 20px; color: #4B5361; margin-top: 20px;}

.youshi{ background:url(../../images/htt/bg05.png) no-repeat center 0;  background-size: cover; padding-bottom: 100px;}
.youshi .dl{ display: flex; }
.youshi .dt{ width: 32%; flex-shrink: 0 ;}
.youshi .dt img{ width: 100%; height: auto; border-radius: 10px; }
.youshi .dd{ width: 68%; display: flex; flex-wrap: wrap; }
.youshi .dd .item{ position: relative; z-index: 0; width: 47.4%; margin-left: 22px; margin-bottom: 22px; background-color: #f3f6ff; border-radius: 10px; padding: 30px 30px 30px 90px; box-sizing: border-box;}
.youshi .dd .item span{ position: absolute; left: 30px; top: 30px; width: 40px; height: 40px; background-color: #fff; box-shadow: 0 0 5px rgba(212,225,255,1); border-radius: 6px; text-align: center; line-height: 40px; font-size: 36px }
.youshi .dd .item h4{ font-size: 26px; font-weight: 500; color: #2E3135}
.youshi .dd .item p{ font-size: 20px; color: #4B5361; margin-top: 10px;}
.youshi .dd .item:nth-child(5),.youshi .dd .item:last-child{ margin-bottom: 0 }
.slogan-box{ background:url(../../images/htt/bg06.jpg) no-repeat center 0;  background-size: cover;}
.slogan-box .centerbox{ font-size: 36px; color: #fff; padding: 40px 0; text-align: center; line-height: 60px}
@media (max-width:1279px){
	.bktitle{ font-size: 45px; }
	.juese .box .text p{ font-size: 18px; }
	.juese .box .text h3{ font-size: 28px; }
	.gongneng .list .item{ width: 23%; }
	.youshi .dd .item{ width: 46%; padding: 20px 20px 20px 90px}
	
}
@media (max-width:1080px){
	.bktitle{ font-size: 40px; }
	.juese .box .text{padding-top: 120px;}
	.juese .box .text .link{ margin-top: 30px; }
	.yingxiao h4{ font-size: 24px }
	.yingxiao p{ font-size: 18px; }
	.gongneng .list .item{ width: 31.4%; }
	.gongneng .list .item h4{ font-size: 24px }
	.gongneng .list .item p{ font-size: 18px }
	.gongneng .list .item:nth-child(4n){ margin-right: 20px }
	.gongneng .list .item:nth-child(3n){ margin-right: 0}
	.youshi .dd .item{ padding-right: 16px; width: 45%}
	.youshi .dd .item h4{ font-size: 22px; }
	.youshi .dd .item p{ font-size: 16px; }
	
}
@media (max-width:850px){
	.bktitle{ font-size: 32px; }
	.bktitle p{ font-size: 18px; }
	.juese .tab{ left: 0; top: 0; width: 100%; }
	.juese .box{ padding-top: 100px; }
	.juese .box .text{ padding-top: 0; width: 50%;}
	.yingxiao .dl{ flex-wrap: wrap; }
	.yingxiao .dt{ width: 100%; margin-right: 0; }
	.yingxiao .dd{ width: 100%; margin-top: 24px; height: 240px; background-position: right bottom; }
	.yingxiao .dd p{ width: 50%; }
	.gongneng .list .item{ width: 47.5%; height: 180px;padding:24px;}
	.gongneng .list .item:nth-child(3n){ margin-right: 20px }
	.gongneng .list .item:nth-child(2n){ margin-right: 0}
	.youshi .dt{ display: none; }
	.youshi .dd{ width: 100%; }
	.youshi .dd .item{ width: 100%; margin-left: 0 }
	.youshi .dd .item:nth-child(5), .youshi .dd .item:last-child{ margin-bottom: 22px; }
	.slogan-box .centerbox{ font-size: 30px; }
}

.mask{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 999; background: rgba(0,0,0,0.7); }
.pop-body{ position: fixed; z-index: 1000; top: 50%; left: 50%; width: 380px; height: 400px; text-align: center; transform: translate(-50%, -50%);  background-color: #fff; border-radius: 10px;}
.pop-body img{ width: 320px; height: auto; margin-top: 24px;}
.pop-body p{ font-size: 18px; color: #666 }
.pop-body .closed{ width: 36px; height: 36px;  position: absolute; right: 24px; top: 24px; cursor: pointer;}
.pop-body .closed::before{ content: '';position: absolute;width: 80%;height: 3px;background: #999;border-radius: 2px;transform: rotate(45deg); }
.pop-body .closed::after{ content: '';position: absolute;width: 80%;height: 3px;background: #999;border-radius: 2px;transform: rotate(-45deg); }

/**页脚**/
footer { float:left; width:100%; background:#161e30; padding-top:34px; }
.lxbox { float:left; width:340px; color:#fff; margin-right: 45px;}
.lxbox .foot_tel { float:left; font-size:32px; line-height:36px; font-weight: bold}
.lxbox .foot_tel span { display:block; font-size:14px; color:rgba(255,255,255,.6); font-weight:normal; line-height:28px;}
.lxbox .foot_ewm { float:left; margin-top: 30px;}
.lxbox .foot_ewm li { float:left; width:132px; text-align: center; margin-right: 38px;  }
.lxbox .foot_ewm li .ewm { float:left; width:100%; height:132px;}
.lxbox .foot_ewm li h4 { float:left; width:100%; font-size:14px; line-height:20px; font-weight:normal; color:rgba(255,255,255,.6); margin-top:10px; text-align: center;}

.lxbox .foot_tel a { color:#fff; text-decoration: none;}

.footlist { float:left;  padding-right: 80px; }
.footlist h3,.footlxwm h3 {color:#fff; font-size:18px; font-weight:normal; line-height:30px; padding-bottom: 10px;}
.footlist li,.footlxwm li { font-size:14px; color:#a2a5ac; line-height:26px; padding:5px 0}
.footlist li a { color:#a2a5ac;  text-decoration: none;}
.footlist li a:hover { color:#cdd2dc;}

.footlxwm { float:right;}
.footlxwm li span { display: block; text-indent: 5em;}

.copyright { float:left; width:100%; margin-top:32px; border-top: 1px solid #303b53; line-height:46px; podding-bottom:4px; color:#666e80; font-size:14px; text-align: center;}
.copyright a { color:#92969f; text-decoration: none;}
.copyright a:hover { color:#cdd2dc;}

.fixed{ width: 140px; padding: 10px; background: #fff; position: fixed; left: 0px; top: 50%; box-shadow: 2px 6px 30px rgba(0,0,0,0.2); margin-top:-220px; z-index: 999; -border:1px solid #eee; box-sizing:border-box;}
.fixed:after{ content: ""; display: block; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #ff6209; background-image: linear-gradient(90deg,#fdd000,#ff6209);}
.fixed hr{ margin:10px 0 8px; background-color:#eee; height: 1px; border:0;}
.fixed h2{ margin: 10px 0 4px; font-size:16px; font-weight:normal; color:#444; line-height:1.8;}
.fixed h3{font-size: 17px; font-weight:bold; font-family: -apple-system, BlinkMacSystemFont,"PingFangSC-Regular", "Microsoft Yahei", "Helvetica", "Arial", "Verdana", "Sans-Serif"; line-height:1.8;}
.fixed .qq a{ border: 1px solid #ddd; display: block; border-radius: 100px; padding: 6px 0 6px 40px; font-size: 14px; line-height: 22px; position: relative; background: url(../../images/qq.png) 15px center no-repeat; margin-top: 10px;}
.fixed .qq a:hover{ border-color: #fdd000; box-shadow: 0 7px 14px rgba(253,208,0,.1), 0 3px 6px rgba(253,208,0,.08);}
.fixed .phone p{ margin-top:5px;}
.fixbth{position: fixed;top:30%;left:140px; z-index: 1000; background: #FF6209;border-radius: 0 12px 12px 0;width: 30px;text-align:  center;padding: 10px 5px;font-size:  14px;color:  #fff;cursor: pointer; box-sizing:border-box; line-height:1.8;}
.fixed.hide{ display: none;}
.fixed .red{color: #005bff;}
.mt10 img{max-width: 100%;  height: auto;  transition: all .5s;  vertical-align: middle;}

@media (max-width:1279px){
	footer .centerbox { width:94%!important;}
	.lxbox {margin-right: 20px;}
	.footlist { padding-right: 30px;}
}
@media (max-width:1060px){
	.footlist:nth-child(3)  { display: none;}
}
@media (max-width:980px){
	.footlist:nth-child(4)  { display: none;}
}
@media (max-width:900px){
	.footlist:nth-child(2)  { display: none;}
	.footlist:nth-child(4)  { display: block;}
}
@media (max-width:820px){
	.footlist:nth-child(2)  { display: none;}
	.footlist:nth-child(4)  { display: none;}
}
@media (max-width:690px){
	footer { padding-top:18px;}
	.lxbox { width:100%;}
	.lxbox .foot_ewm { width: 100%; margin-top:12px; border-top: 1px solid #303b53; padding-top:15px; }
	.lxbox .foot_ewm li {float:left; width:40%; margin:0 5%; text-align: center;}
	
	.footlxwm { width:100%;  border-top: 1px solid #303b53; padding-top:5px; margin-top: 10px; }
	.footlxwm h3 { padding-bottom: 0}
	.footlxwm li span { display: inline;}
	.footlxwm li a { color:#92969f; text-decoration: none;}
	.copyright {margin-top: 5px; }
	.copyright a { display: none;}
}