*{margin: 0;padding: 0; outline: 0 ;}
a{
  text-decoration: none;
}
input::placeholder, textarea::placeholder {
  font-size: 12px;
  color: #000000;
}
body{
  background: #EEFBFF;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header{
  width: 100%;
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.common-box{
  width: 1100px;
  margin: 0 auto;
}
.header .common-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .name{
  font-size: 22px;
  color: #000000;
}
.nav-list{
  position: relative;
  display: flex;
}
.nav-list > a{
  font-size: 14px;
  color: #9D9D9D;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  align-items: center;
  margin-left: 50px
}
.about-box{ cursor: pointer;}
.nav-list a:not(.about-box):hover, .nav-list .active{ 
  color: #1086D0;
  font-weight: 600;
  border-bottom: solid 2px #1086D0
}
.intro{
  width: 100%;
  background: url('./bg1.png') no-repeat;
  background-size: 100% 100%;
  font-weight: 900;
  font-size: 30px;
  color: #181818;
  line-height: 45px;
  padding: 208px 0 216px;
  box-sizing: border-box;
}
.intro .text{
  width: 900px
}
.use-box{
  background: #FFFFFF;
  border-radius: 14px;
  padding: 50px 54px 30px;
  box-sizing: border-box;
  margin-top: -120px;
  margin-bottom: 29px;
}
.use-box .title{
  font-size: 36px;
  color: #000000;
  line-height: 83px;
  margin-bottom: 33px
}
.use-box .wrap-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px
}
.use-box .example{
  width: 320px;
  background: url('./bg2.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 20px;
}
.use-box .exa{
  width: 100%;
  background: #5CC0E0;
  border-radius: 11px;
  padding: 11px 15px;
  box-sizing: border-box;
  color: #fff;
  font-size: 12px;
  line-height: 22px;
  font-weight: 500;
  margin-top: 40px
}
.use-box .exa h2{
  font-size: 14px
}
.example1{
  width: 310px;
  background: #EEFBFF;
  border-radius: 11px;
  padding: 30px 20px;
  box-sizing: border-box;
  font-size: 14px;
  color: #181818;
  line-height: 17px;
}
.example1 .h2{
  font-size: 16px;
  color: #1086D0;
  margin-bottom: 18px
}
.example1 .sub{
  font-weight: 600
}
.example1 .ex-w{
  margin-top: 18px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 7px;
  padding: 20px 10px;
  font-size: 12px;
  color: #181818;
  line-height: 21px;
  box-sizing: border-box;
}
.ex-w h2{
  font-size: 15px;
  color: #1086D0;
  margin-bottom: 12px
}
.ex-w .wrr{
  width: 100%;
  background: #EEFBFF;
  border-radius: 7px;
  padding: 14px 10px 8px;
  box-sizing: border-box;
  margin-top: 15px
}
.wrr h3{
  font-size: 12px;
  color: #000000;
  margin-bottom: 11px;
}
.wrr .label{
  width: 100%;
  height: 26px;
  background: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 11px;
  color: #9D9D9D;
  margin-bottom: 6px
}
.wrr .label span{
  font-weight: 600;
  color: #1086D0;
  font-size: 12px;
}
.use-box .example0{
  background: #181818 !important;
  border-radius: 14px;
  font-size: 12px;
  color: #FFFFFF;
  line-height: 21px;
  align-items: unset
}
.example0 .name{
  font-size: 14px;
  color: #FFFB20;
  margin-bottom: 26px
}
.example0 h4{
  font-size: 14px;
  color: #5CC0E0;
  margin-bottom: 14px
}
.example0 h5{
  font-size: 12px;
  color: #5CC0E0;
  margin-bottom: 10px
}
.about-box{
  margin-bottom: 67px;
  background: #181818;
  border-radius: 14px;
  padding: 35px 35px 35px 60px;
  box-sizing: border-box;
  font-size: 14px;
  color: #5CC0E0;
  line-height: 17px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.about-box h1{
  font-size: 36px;
  color: #5CC0E0;
  line-height: 40px;
  margin-bottom: 36px
}
.about-box .text{
  width: 630px
}
.about-box img{
  width: 322px;
  height: 322px
}
.ques-box{margin-bottom: 100px}
.ques-box h1{
  font-size: 36px;
  color: #181818;
  margin-bottom: 32px
}
.ques-box .wrap{
  width: 100%;
  background: #FFFFFF;
  border-radius: 8px;
  padding: 25px 35px;
  box-sizing: border-box;
  font-weight: 600;
  font-size: 14px;
  color: #181818;
  line-height: 17px;
  margin-bottom: 20px
}
.ques-box .flex{
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 11px;
  color: #9D9D9D;
  margin-bottom: 10px
}
.ques-box .flex img{
  width: 12px;
  height: 12px;
  margin-right: 7px
}
.footer-box{
  width: 100%;
  background: #261F13;
  padding: 58px 0;
}
.footer{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer .logo{
  width: 63px;
  height: 63px;
  margin-bottom: 13px
}
.footer .name{
  font-weight: 600;
  font-size: 30px;
  color: #FFFFFF;
}
.footer .flex{
  display: flex;
}
.footer .wrap{
  display:flex;
  flex-direction: column;
  margin-left: 100px
}
.footer a{
  font-size: 17px;
  color: #FFFFFF;
  line-height: 27px;
  margin-bottom: 30px
}
.footer a:hover{ color: #1086D0}
.explan-box{
  padding: 80px 0;
  box-sizing: border-box;
}
.explan-box h1{
  font-weight: 600;
  font-size: 54px;
  color: #000;
  text-align:center;
  margin-bottom: 56px
}
.explan-box .flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.explan-box .wrap{
  width: 540px;
  height: 380px;
  padding: 0 50px;
  box-sizing: border-box;
  background: #5CC0E0;
  border-radius: 15px;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 18px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 23px
}
.explan-box h2{
  font-size: 29px;
  margin-bottom: 40px;
}
.explan-box .line{
  width: 22px;
  height: 8px;
  background: #FFFB20;
  margin-top: 74px
}
.explan-box strong{
  color: #FFFB20
}
.service-box{
  padding: 100px 0;
  box-sizing: border-box;
  font-size: 14px;
  color: #4A4A4A;
  line-height: 20px;
}
.service-box h1{
  font-weight: bold;
  font-size: 36px;
  color: #1086D0;
  margin-bottom: 35px
}