.banner{background: #213562;padding-top: 60px;position: relative;}
.banner h1{font-size: 52px;color: #fff;text-align: center;line-height: 60px;margin-bottom: 10px;}
.banner p{font-size: 20px;color: #fff;text-align: center;margin-bottom: 25px;}
.banner::after{clear: both;content: "";position: absolute;bottom: 0px;left: 0px;height: 90px;background: #fff;width: 100%;z-index: 1;}
.icon{max-width: 950px;width: 100%;margin: auto;position: relative;z-index: 2;}
.icon>div{max-width: 270px;width: 100%;background: #fff;text-align: center;box-shadow: 0 0 10px rgba(38,77,114,.11);border-radius: 10px;padding-top: 32px;margin-top: 20px;transform: translateY(0px);-webkit-transition: all .3s linear;transition: all .3s linear;}
.icon>div:hover{box-shadow: 0 0 10px rgba(38,77,114,.22);-webkit-transform: translateY(-5px);transform: translateY(-5px);}
.icon>div:hover a{text-decoration: none;}
.icon>div:hover span{color: #2199ff;}
.icon>div img{margin:auto;}
.search_box{margin-bottom:80px;}
.icon div span{font-size: 24px;color: #4c5562;line-height: 30px;display: block;margin:25px auto 20px;}
.icon div p{font-size: 18px;color: #979ca4;line-height: 30px;}
h2{font-size: 32px;color: #323b49;font-weight: 550;text-align: center;line-height: 36px;}
.product{padding-top: 90px;}
.product p{font-size: 16px;color: #323b49;text-align: center;margin-top: 20px;margin-bottom: 35px;}
.product_box ul li{width: 180px;height: 180px;text-align: center;margin-top: 10px;border-radius: 10px;padding-top: 23px;box-sizing: border-box;margin: 0 11px;}
.product_box ul li:hover{background: #eae1fe;}
.product_box ul li img{width: 96px;margin: 0px auto 16px;}
.product_box ul li span{font-size: 18px;color: #323b49;}
.product_box ul li.hide{height: 0px;visibility: hidden;}
.product_box ul li:hover{background: #eaf0fe;}
.product_box ul li:hover a{text-decoration: none;}
.product_box ul li:hover span{color: #2199ff;}
.faq{padding-top: 75px;}
.faq_box>p{font-size: 16px;color: #323b49;text-align: center;margin-top: 20px;margin-bottom: 35px;}
.faq_box>div>div{border-radius: 10px;background: #fff;box-shadow: 0 0 13px rgba(38, 77, 114, .11);padding:0px 32px;box-sizing: border-box;margin-top: 45px;padding-bottom: 45px;}
.faq_box>div>div>span{font-size: 20px;color: #323b49;font-weight: 550;position: relative;top: -16px;}
.faq_box>div>div>span>img{display: inline-block;vertical-align: -22px;margin-right: 22px;}
.faq_box .left ul li{position: relative;padding: 20px 15px 20px 0px;border-bottom: 1px solid #e5e7eb;}
.faq_box .left ul li i{background: url(/images/support/faq-icons.png);}
.faq_box .left ul li i:nth-child(1){width: 22px;height: 22px;vertical-align: -4px;margin-right: 15px;}
.faq_box .left ul li.active i:nth-child(1){background-position-y: -22px;}
.faq_box .left ul li i:nth-child(2){width: 12px;height: 6px;background-position-y: -44px;vertical-align: 2px;position: absolute;right: 0px;}
.faq_box .left ul li.active i:nth-child(2){background-position-y: -50px;}
.faq_box .left ul li span{font-size: 18px;color: #323b49;cursor: pointer;}
.faq_box .left ul li.active span{color: #2199ff;}
.faq_box .left ul li p{padding-left: 36px;text-align: left;font-size: 16px;color: #323b49;line-height: 30px;margin-top: 14px;display: none;}
.faq_box .left ul li.active p{display: block;}
.faq_box .left{max-width: 780px;width: 100%;}
.faq_box .left>a{font-size: 18px;color: #2199ff;margin-top: 35px;display: block;}
.faq_box .left>a i{width: 15px;height: 18px;background: url(/images/support/faq-icons.png);background-position-y: -56px;vertical-align: -8px;margin-left: 10px;}
.faq_box .right{max-width: 380px;width: 100%;}
.faq_box .right ul{margin-top: 15px;}
.faq_box .right ul li a{font-size: 18px;color: #323b49;}
.faq_box .right ul li a i{width: 22px;height: 22px;background: url(/images/support/faq-icons.png);background-position-y: -86px;vertical-align: -4px;margin-right: 15px;}
.faq_box .right ul li{margin-bottom: 36px;-webkit-transition: all .3s linear;transition: all .3s linear;}
.faq_box .right ul li:hover{padding-left: 10px;}
.faq_box .right ul li:hover a{color: #2199ff;text-decoration: none;}
.contact{padding-top: 74px;padding-bottom: 60px;background: #f7fbfe;margin-top: 80px;}
.contact_box>p{font-size: 16px;color: #323b49;text-align: center;margin-top: 15px;}
.contact_box>div{margin: 30px auto 0;max-width: 710px;}
.contact_box>div div{max-width: 301px;margin-bottom: 25px;}
.contact_box>div div>a{background: #21c1f5;border-radius: 30px;display: block;line-height: 60px;font-size: 24px;color: #fff;text-align: center;margin-top: 20px;}
.contact_box>div div>a:hover{background: #22a8f5;text-decoration: none;}
.contact_box>div div:nth-child(2)>a{background: #31cdde;}
.contact_box>div div:nth-child(2)>a:hover{background: #23c2d4;text-decoration: none;}
.contact_box>div div a img{display: inline-block;margin-left: 10px;vertical-align: middle;margin-top: -3px;}
.contact_box>div div p{font-size: 16px;color: #4c5562;line-height: 18px;text-align: center;margin-top: 24px;}
.contact_box>div div p a{color: #26ceec;}
.Recommend{padding-top: 80px;margin-bottom:80px;display: flex;justify-content: space-between;flex-wrap: wrap;}
.Recommend>div{max-width: 380px;padding-bottom: 20px;width:100%;box-shadow: 0 0 40px rgba(84,94,101,.15);}
.Recommend>div:nth-child(2) p{background: #47caf3;background: linear-gradient(90deg, #47caf3, #41d5eb);}
.Recommend>div p{line-height: 50px;font-size: 24px;color: #fff;background: #25aff5;background: linear-gradient(90deg, #25aff5, #48caf3);padding: 0 20px;margin-bottom: 40px;}
.Recommend>div div{padding: 0 20px;}
.Recommend>div p a{float: right;display: flex;align-items: center;height: 50px;margin-right: 5px;}
.Recommend>div ul{padding: 0 20px;}
.Recommend>div ul li{display: flex;align-items: center;margin-bottom: 20px;}
.Recommend>div ul li img{margin-right: 10px;}
.Recommend>div ul li a{font-size: 16px;color: #4c5562;line-height: 30px;}
.Recommend>div div a{padding: 0 16px;margin-right: 10px;font-size: 16px;color: #4c5562;line-height: 27px;margin-bottom: 10px;border-radius: 30px;display: inline-block;background: #f5f6f7}
.Recommend>div div a:hover{background: #ffb61a;text-decoration: none;color: #fff;}
@media screen and (max-width:1100px){
    .icon{max-width: 690px;}
    .icon>div{max-width: 218px;height: 146px;}
    .product ul{max-width: 690px;margin: auto;}
    .product,.faq{padding-top: 60px;}
    .faq_box div{justify-content: center;}
    .faq_box .right,.faq_box .left{max-width: 686px;}
    .faq_box .right ul li{width: 49%;display: inline-block;}
}
@media screen and (max-width:500px){
    .banner h1{font-size: 26px;color: #fff;line-height: 26px;}
    .icon>div{width: 100%;height: initial;padding-top: 15px;padding-bottom: 15px;max-width: initial;text-align: left;padding-left: 20px;}
    .icon>div img{width: 54px;display:inline-block;vertical-align: -18px;margin-right: 25px;}
    .icon div span{display: initial;}
    .product,.faq{padding-top: 50px;}
    h2{font-size: 24px;color: #323b49;line-height: 24px;}
    .product p,.faq_box>p{margin-top: 10px;margin-bottom: 5px;}
    .product_box ul li img{width: 82px;height: 82px;}
    .product_box ul li{width: 154px;height: 154px;margin: 10px 0px 0px;}
    .contact{margin-top: 50px;padding-top: 60px;}
}
@media screen and (max-width:360px){
    .product ul{justify-content: center;}
    .banner::after{height: 140px;}
}
