﻿@charset "utf-8";
/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }   
fieldset,img { border: 0; } 
address,caption,cite,code,dfn,em,strong,th,var,i { font-weight: normal; font-style: normal; } 
ol,ul,dl,dd,li { list-style: none; zoom:1; } 
caption,th { text-align: left; } 
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%;} 
q:before,q:after { content:''; } 
abbr,acronym { border: 0; }
.clearbox {border:none;border-top: 1px solid transparent !important;clear: both; 
font-size: 0;height: 0;line-height: 0;margin-top: -1px !important;visibility: hidden;}
/*-- All --*/
body{ color:#6D6D6D; text-align:center;font:normal 15px/200% "Microsoft YaHei",宋体,Tahoma,Helvetica,Arial,sans-serif; }
a{ color:#6D6D6D; text-decoration:none; outline:none;}
a:hover {color:#3F97E9; text-decoration:none; } 
.footer-bottom .copyRight,#footer .siteWidth{}

/*-- Public --*/
.big-title h3{font-size: 50px;line-height: 50px;text-align: center;color: #333333;margin-bottom: 40px;}
.big-title em{display: block;width: 100px;height: 8px;background: #3879FE;border-radius: 5px;margin: auto;}
.fl{ float:left !important; _display:inline; }
.fr{ float:right !important; _display:inline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
body{width: 100%;min-width: 1200px; }
.siteWidth{ max-width: 1200px;min-width: 1200px;  margin:0 auto; overflow:hidden;  text-align:left; position:relative;   }
.title-box .titnum{font-weight: bold;font-size: 144px;line-height: 144px;color: #F0F4FF;}
.title-box .tit{position: relative;font-size: 36px;line-height: 36px;font-weight: bold;margin: -50px 0 22px;background: linear-gradient(360deg, #3879FE 0%, #38A3FE 86.25%);-webkit-background-clip: text;color: transparent;}
.title-box .tit i{display: inline-block;font-size: 14px;line-height: 24px;color: #FFFFFF;width: 80px;height: 24px;background: #3879FE;border-radius: 50px;text-align: center;margin-left: 20px;}
.title-box p{font-size: 24px;line-height: 24px;color: #333333;}
.title-box:hover .titnum{color: #F1ECE6;}
.title-box:hover .tit{background: linear-gradient(360deg, #D83131 0%, #F57676 86.25%);-webkit-background-clip: text;color: transparent;}
.title-box:hover .tit i{background: #D83131;}

#header{z-index:1; width:100%; height: 600px; background:url(images/body.jpg) center no-repeat;  }
#header .siteWidth .logo-box{ overflow:visible; height: 42px;margin: 52px 0 100px;}
#header .logo{ display:block; width:200px; height:42px;  float: left; background:url(images/logo.png) no-repeat; }
#header .p1{font-weight: bold;font-size: 64px;line-height: 75px;color: #FFFFFF;margin-bottom: 35px;font-family: Roboto;}
#header .p2{font-size: 30px;line-height: 40px;color: #FFFFFF;width: 780px;}

/* 产品概况 */
#content{clear: both;}
.whatsaas,.whysaas{padding-top: 105px;}
.whatsaas .big-title{margin-bottom: 35px;}
.whysaas .big-title{margin-bottom: 50px;}
.Recruitment{padding-bottom: 20px;}
.Recruitment .siteWidth{overflow: inherit;}
.Recruitment-box{padding: 22px 0 80px;position: relative;}
.Recruitment-box img{display: block;margin: auto;}
.Recruitment-box .animation-box li{width: 67px;height: 104px;position: absolute;transition: all 2s;}
.Recruitment-box .animation-box .li1{top: 52px;left: 567px;background: url(images/li1-icon.png) no-repeat;}
.Recruitment-box .animation-box .li2{top: 138px;left: 726px;background: url(images/li2-icon.png) no-repeat;}
.Recruitment-box .animation-box .li3{top: 255px;left: 900px;background: url(images/li3-icon.png) no-repeat;}
.Recruitment-box .animation-box .li4{top: 326px;left: 747px;background: url(images/li4-icon.png) no-repeat;}
.Recruitment-box .animation-box .li5{top: 387px;left: 657px;background: url(images/li5-icon.png) no-repeat;}
.Recruitment-box .animation-box .li6{top: 430px;left: 571px;background: url(images/li6-icon.png) no-repeat;}
.Recruitment-box .animation-box .li7{top: 388px;left: 476px;background: url(images/li7-icon.png) no-repeat;}
.Recruitment-box .animation-box .li8{top: 328px;left: 386px;background: url(images/li8-icon.png) no-repeat;}
.Recruitment-box .animation-box .li9{top: 253px;left: 239px;background: url(images/li9-icon.png) no-repeat;}
.Recruitment-box .animation-box .li10{top: 141px;left: 407px;background: url(images/li10-icon.png) no-repeat;}

.Recruitment-box .animation-box li.on{opacity: 1;}
.Recruitment-box .animation-box li.on .line-box{width: 150px;height: 60px;position: relative;}
.Recruitment-box .animation-box li .text-box{background: #38d188;box-shadow: 2px 2px 10px rgb(8 8 8 / 30%);border-radius: 5px;width: 200px;height: 120px;padding: 0 30px;display: none;}
.Recruitment-box .animation-box li .text-box{font-size: 20px;line-height: 30px;align-items: center;color: #FFFFFF;position: relative;}
.Recruitment-box .animation-box li.on .text-box{display: flex;z-index: 99;}
.Recruitment-box .animation-box .li1.on .line-box{border-left: 1px solid #38d188;top: -40px;left: 32px;}
.Recruitment-box .animation-box .li1.on .text-box{top: -220px;left: -105px;}
.Recruitment-box .animation-box .li2.on .line-box{border-right: 1px solid #38d188;border-bottom: 1px solid #38d188;top: 15px;left: 60px;}
.Recruitment-box .animation-box .li2.on .text-box{top: -165px;left: 80px;text-align: center;}
.Recruitment-box .animation-box .li3.on .line-box{border-right: 1px solid #38d188;border-bottom: 1px solid #38d188;top: -40px;left: 50px;width: 30px;height: 100px;}
.Recruitment-box .animation-box .li3.on .text-box{top: -220px;left: -50px;}
.Recruitment-box .animation-box .li4.on .line-box{border-right: 1px solid #38d188;border-bottom: 1px solid #38d188;top: 14px;left: 60px;width: 120px;}
.Recruitment-box .animation-box .li4.on .text-box{top: -164px;left: 60px;}
.Recruitment-box .animation-box .li5.on .line-box{border-right: 1px solid #38d188;border-bottom: 1px solid #38d188;top: 14px;left: 60px;width: 100px;}
.Recruitment-box .animation-box .li5.on .text-box{top: -164px;left: 40px;}
.Recruitment-box .animation-box .li6.on .line-box{border-left: 1px solid #38d188;top: 96px;left: 32px;}
.Recruitment-box .animation-box .li6.on .text-box{top: 75px;left: -100px;}
.Recruitment-box .animation-box .li7.on .line-box{border-left: 1px solid #38d188;border-bottom: 1px solid #38d188;top: 14px;left: -150px;}
.Recruitment-box .animation-box .li7.on .text-box{top: -166px;left: -288px;} 
.Recruitment-box .animation-box .li8.on .line-box{border-left: 1px solid #38d188;border-bottom: 1px solid #38d188;top: 21px;left: -110px;width: 110px;}
.Recruitment-box .animation-box .li8.on .text-box{top: -158px;left: -250px;}
.Recruitment-box .animation-box .li9.on .line-box{border-left: 1px solid #38d188;border-bottom: 1px solid #38d188;top: -2px;left: -15px;width: 20px;}
.Recruitment-box .animation-box .li9.on .text-box{top: -180px;left: -140px;}
.Recruitment-box .animation-box .li10.on .line-box{border-left: 1px solid #38d188;border-bottom: 1px solid #38d188;top: 9px;left: -120px;width: 120px;}
.Recruitment-box .animation-box .li10.on .text-box{top: -172px;left: -250px;}

.center-text{font-weight: bold;font-size: 20px;color: #fff;position: absolute;top: 154px;left: 547px;}
.Recruitment-box .animation-box li p{position: absolute;font-size: 16px;width: 130px;color: #000000;}
.Recruitment-box .animation-box .li1 p{top: -31px;left: -21px;}
.Recruitment-box .animation-box .li2 p{top: -26px;left: -19px;}
.Recruitment-box .animation-box .li3 p{top: -33px;left: -23px;}
.Recruitment-box .animation-box .li4 p{top: -27px;left: -20px;}
.Recruitment-box .animation-box .li5 p{top: -31px;left: -21px;}
.Recruitment-box .animation-box .li6 p{top: -27px;left: -14px;}
.Recruitment-box .animation-box .li7 p{top: -27px;left: -11px;}
.Recruitment-box .animation-box .li8 p{top: -26px;left: -31px;}
.Recruitment-box .animation-box .li9 p{top: -27px;left: -14px;}
.Recruitment-box .animation-box .li10 p{top: -29px;left: -23px;}
.Recruitment-box .animation-box .li4 p,.Recruitment-box .animation-box .li5 p,.Recruitment-box .animation-box .li6 p,.Recruitment-box .animation-box .li7 p,.Recruitment-box .animation-box .li8 p{color: #fff;}





.Freshman{padding: 45px 0 80px;background: #F9FAFF;}
.Vector{margin-top: 76px;width: 660px;}
.Vector li{display: inline-block;vertical-align: top;padding-left: 25px;margin-right: 33px;font-size: 18px;line-height: 30px;color: #666666;width: 240px;background: url(images/Vector.png) 0 7px no-repeat;margin-bottom: 20px;}
.Graduate{padding: 140px 0 130px;}
.Knowledge{padding: 44px 0 46px;background: #F9FAFF;}
.Questionnaire{padding: 100px 0 50px;}
.Questionnaire img{margin-top: 130px;}
.Custom{padding: 44px 0 46px;background: #F9FAFF;}
.Custom img{margin-top: 50px;}

.Questionnaire .Vector li,.Custom .Vector li{margin-right: 24px;width: 278px;}

.whysaas ul li{float: left;width: 378px;height: 240px;border: 1px solid #E4E9F2;box-sizing: border-box;border-radius: 5px;border-top: 8px solid rgba(56, 121, 254, 0.15);margin-bottom: 30px;}
.whysaas ul .li2,.whysaas ul .li5{margin: 0 30px 30px;}
.whysaas ul li .p1{font-size: 24px;line-height: 1;text-align: center;color: #3879FE;margin: 50px 0 20px;}
.whysaas ul li .p2{padding: 0 20px;font-size: 18px;line-height: 36px;color: #333333;}
.zyfw{width: 1200px;height: 200px;background: url(images/zyfw.png) center no-repeat;clear: both;margin-bottom: 140px;}
.zyfw h3{float: left;height: 200px;line-height: 200px;font-weight: bold;font-size: 36px;color: #fff;margin: 0 100px 0 44px;}
.zyfw ol li{float: left;width: 280px;}
.zyfw ol li .p1{font-size: 40px;line-height: 40px;text-align: center;color: #FFFFFF;font-weight: 600;margin: 60px 0 13px;}
.zyfw ol li .p2{font-size: 18px;line-height: 40px;color: #FFFFFF;text-align: center;}
.whysaas ul li:hover{background: linear-gradient(180deg, #83B0FC 0%, #3D7FFB 100%);}
.whysaas ul li:hover .p1,.whysaas ul li:hover .p2{color: #fff;}

.Advantage{padding: 76px 0 60px;background: url(images/ys-bg.png) center #F9FAFF no-repeat;}
.Advantage .big-title{margin-bottom: 40px;}
.Advantage ul{padding: 10px;}
.Advantage ul li{background: #FFFFFF;box-shadow: 0px 0px 10px rgba(56, 121, 254, 0.3);border-radius: 10px;padding: 20px;width: 535px;margin-bottom: 35px;height: 200px;}
.Advantage ul li .p1{width: 180px;height: 30px;line-height: 30px;text-align: center;background: #3879FE;border-radius: 50px;font-size: 18px;color: #fff;margin-bottom: 15px;}
.Advantage ul li .p2{font-size: 16px;line-height: 30px;color: #666666;margin-bottom: 10px;text-indent: 2em;}
.Advantage ul li.big-box{width: 1140px;height: auto;}

.customer{position: relative;}
.customer img{width: 100%;}
.customer div{position: absolute;left: 0;right: 0;top: 40%;}
.customer p{font-weight: bold;font-size: 48px;line-height: 48px;color: #3B426B;text-align: center;margin-bottom: 50px;}
.customer a{display: block;width: 200px;height: 60px;line-height: 60px;text-align: center;background: #3879FE;box-shadow: 0px 0px 10px rgba(56, 121, 254, 0.5);border-radius: 10px;font-weight: bold;font-size: 24px;color: #fff;margin: auto;-webkit-transition: all .4s;-moz-transition: all .4s;-o-transition: all .4s; transition: all .4s;}
.customer a:hover{background:#38d188;box-shadow:0px 0px 20px rgb(50 187 2 / 58%);}
.customer p:hover{color: #E83232;}

.Double{padding: 74px 0 80px;}
.Double img{margin-top: 170px;}

.Appointment{padding: 44px 0 46px;background: #F9FAFF;}
.Appointment img{margin-top: 170px;}




