.section .icon {width:1em;height:1em;vertical-align:-0.15em;fill:currentColor;overflow:hidden}
.section .title {margin-top:0;margin-bottom:80px;line-height:1.5;color:#313B53}
.section .sub-title {margin-top:-60px;margin-bottom:80px;color:#313B53}
.section .head {color:#313B53}
.section .sub-head {color:#313B53}
.section p {color:#576e91}
.section ul li {color:#576e91}

.action {margin-top:30px}

.carousel .owl-dots {position:absolute;bottom:10px;margin:0 auto;width:100%}

.indicator {position:fixed;left:20px;z-index:2;top:40%;opacity:0}
.indicator .nav > li {margin-bottom:10px}
.indicator .nav > li > a {padding:0;width:12px;height:12px;background-color:transparent;display:block;border-radius:12px;border:2px solid #9C36FA;transition:all .2s ease .1s;opacity:0.6}
.indicator .nav > li.active > a {background-color:#CE72FC}

.try {background-color:#fff}
.try .input-group {margin:0px auto;width:500px}
.try .form-control {border:0px none;border-radius:0px;box-shadow:none;border:1px solid #00CE9A;background-color:transparent}
.try .input-group-btn .btn {border-radius:0px;border:1px solid #00CE9A;padding:6px 20px;color:white;background-color:#00CE9A}
.try .input-group-btn .btn:hover {border-color:rgb(128, 0, 255);background-color:rgb(128, 0, 255)}

.function .row {margin-bottom:50px}
.function .title {text-align:center}
.function .head {color:black;margin-bottom:15px}
.function p {color:#666;letter-spacing:0.6px;line-height:25px;margin:20px 0 40px}
.function ul {margin-left:9px}
.function ul li {color:#666;line-height:25px;margin-bottom:10px;text-indent:-9px}
.function .btn {color: #9C36FA;border-color: #9C36FA}
.function .btn:hover {color: #fff;background-color: #CE72FC;border-color: #CE72FC}

.advantage {text-align:center}
.advantage h3 {text-align:center}
.advantage p {line-height:1;margin-bottom:5px}
.advantage .special p {color:#aaa}
.advantage .item {padding-top:4px;position:relative}
.advantage .item i {position:absolute;top:16px;width:47px;height:47px;background-color:white;border-radius:8px;text-align:center;line-height:50px;font-size:45px;color:#fff}
.advantage .item-left {text-align:left}
.advantage .item-right .item {text-align:left}

.feature { text-align: center; background: linear-gradient( #00CE9A,#0093A2 ); }    
.feature .icon { font-size: 70px; color: #6682D6; }
.feature .item .head { font-size: 14px; margin: 20px 0 60px; color: #313B53; }
.feature .item::after { content: ""; display: block; width: 100%; position: absolute; top: 0; left: 0; height: 70%; }
.feature .title { color: #313B53; }
.feature .tooltip.top .tooltip-arrow { border-top-color: rgb(222, 222, 222); }
.feature .tooltip.top .tooltip-inner { padding: 15px; color: #666666; background-color: rgb(222, 222, 222); line-height: 1.8; }

.detail .icon {font-size:160px;color:#9C36FA}
.detail .head {font-size:14px;font-weight:600;color:#313B53;margin-bottom:10px}
.detail p {text-align:center;margin:0 auto;color:#576E91;margin-bottom:60px;min-height:45px}

.quality .title {color:#fff}
.quality > div {padding-left:40px;padding-right:40px}
.quality .item {padding-bottom:25px}
.quality .item .icon {font-size:50px;background-color:#fff;color:#9C36FA;padding:10px;border-radius:50px}
.quality .item .head {color:#fff}
.quality .item p {color:#fff;width:80%}
.quality .item > .row > div {padding-left:5px;padding-right:5px}
.quality .item > .row > div:first-child {text-align:center;padding-top:5px}

.intergration .title {color:#313B53;text-align:center}
.intergration .item .wrap {background-color:#fff;margin:0 auto 30px;border-radius: 5px;box-shadow: 0 2px 4px 0 rgba(175,169,169,0.5);border-bottom:8px solid #AE3EFB}
.intergration .item .icon {font-size:70px;background-color:rgb(184, 94, 255);border-radius:60px;color:#fff;margin-top:-35px;}
.intergration .item ul {padding-left:15px;color:#7a7a7a}
.intergration .item .text-wrap {padding:40px 25px 0}
.intergration .item .text-wrap .head {font-weight:bold;margin-bottom:20px}
.intergration .item .text-wrap p {line-height:24px;margin-bottom:20px;color:#614f4f;letter-spacing:-0.6px;min-height:80px;font-size:13px}

.case .title {color:#313B53;text-align:center}
.case .item:hover .wrap {background-color:rgba(255, 0, 64, 0.1)}
.case .item .wrap {background-color:#fff;width:224px;margin:0 auto 30px;box-shadow: 0 2px 4px 0 rgba(175,169,169,0.5)}
.case .item img {margin-top:30px}
.case .item .text-wrap {min-height:185px;padding:15px 25px}
.case .item .text-wrap .head {font-weight:bold;margin-bottom:20px}
.case .item .text-wrap p {line-height:24px;color:#313B53;letter-spacing:-0.6px;font-size:13px}

.contact p{color:#313B53;font-size:20px;font-weight:bold;margin-bottom:0}


@media (max-width:991px) {
  .indicator {left:10px}
  .advantage .item p::before {content:"· ";font-weight:bold}
  .advantage .item i {left:10px}
  .quality .item > .row > div:first-child {text-align:left}
  .contact .btn {margin-top:40px}
}
@media (max-width:767px) {
  .section .title {margin-bottom:40px}
  .section .sub-title {margin-top:-20px;margin-bottom:40px}
  .indicator {left:unset;right:5px}
  .indicator .nav > li > a {width:4px;height:8px;border-radius:0;border-width:1px}
  .try {padding:10px 0}
  .try .input-group {width:100%}
  .function .item {margin:-50px auto 50px}
  .function img {margin-bottom:30px}
  .function .row {margin-bottom:0px}
  .detail {padding-bottom:10px}
  .quality .item p {min-height:140px}
  .intergration .title {margin-bottom:70px}
  .intergration .item .wrap {margin-bottom:80px}
  .contact .wrap {margin:20px auto}
  .contact .btn {margin-top:0}
}
@media (min-width:768px) {
  .banner .text-box .sub-title {letter-spacing:1px;margin-top:30px}
  .try {padding:20px 0}
  .function {padding-bottom:0}
  .function .row {margin-bottom:100px}
  .function .item {margin:0 auto}
  .detail {padding-bottom:40px}
  .intergration .item .text-wrap {padding:20px 25px 0}
  .intergration .item:nth-child(1) {width:30%}
  .intergration .item:nth-child(2) {width:40%}
  .intergration .item:nth-child(3) {width:30%}
}
@media (min-width:992px) {
  .banner .text-box .sub-title {font-size:20px}
  .function .title {margin-bottom:100px}
  .function .item {width:410px}
  .function .row:nth-child(2) .item {margin-top:55px}
  .function .row:nth-child(3) .item {margin-top:65px}
  .function .row:nth-child(4) .item {margin-top:45px}
  .function .row:nth-child(5) .item {margin-top:60px}
  .advantage img {margin-top:30px}
  .advantage .item-left .item {margin-top:80px;text-align:right;margin-right:20px}
  .advantage .item-left .item p::after {content:" ·";font-weight:bold}
  .advantage .item-left .item:first-child {margin-top:70px}
  .advantage .item-left .item i {right:-60px}
  .advantage .item-right .item {margin-top:60px;margin-left:20px}
  .advantage .item-right .item p::before {content:"· ";font-weight:bold}
  .advantage .item-right .item:first-child {margin-top:70px}
  .advantage .item-right .item i {left:-60px}
  .detail p {width:260px}
  .intergration .item .text-wrap {padding:30px 25px 0}
  .intergration .item:nth-child(1) {width:30%}
  .intergration .item:nth-child(2) {width:40%}
  .intergration .item:nth-child(3) {width:30%}
}
@media (min-width:1200px) {
  .banner .text-box .sub-title {font-size:22px}
  .section .container {width:1000px}
  .advantage .container {width:1170px}
  .function .row:nth-child(2) .item {margin-top:63px}
  .function .row:nth-child(3) .item {margin-top:70px}
  .function .row:nth-child(4) .item {margin-top:55px}
  .function .row:nth-child(5) .item {margin-top:60px}
  .intergration .title {margin-bottom:110px}
  .intergration .item:nth-child(1) {width:30%}
  .intergration .item:nth-child(2) {width:40%}
  .intergration .item:nth-child(3) {width:30%}
}