.banner .wrapper{color: #fff;}
.banner .pic{flex: 1;}
.banner .main{padding-left: 15px;display: flex;flex-direction: column;align-items: flex-end;}
.banner .main h1{text-shadow: 0 2px 5px #1138c3;font-size: 7em;}
.banner .main h3{text-shadow: 0 2px 5px #1138c3;}
.banner ul li{width: 180px;display: flex;align-items: center;font-size: 2em;color: #ffea00;}
.banner ul li:last-child{justify-content: flex-end;}
.banner ul li img{height: 25px;margin-right: 10px;}

.page_title .cn span{font-size: 3em;font-weight: bold;position: relative;z-index: 1;}
.page_title .cn span::before{content: '';display: block;position: absolute;bottom: 0;left: -15px;z-index: -1;width: 50px;height: 20px;background: linear-gradient(to right, #70aef8, transparent);}
.page_title .en span{font-size: 1.6em;color: #bebebe;text-transform: uppercase;position: relative;z-index: 1;}
.page_title .en span::after{content: '';display: block;position: absolute;bottom: 0;right: -12px;z-index: -1;width: 42px;height: 20px;background: linear-gradient(to left, #a3cdff, transparent);}

.why ul li{width: 23.5%;text-align: center;}
.why ul li .icon{width: 60%;background-color: #fff;box-shadow: 0 0 15px #e8f2ff;border-radius: 50%;position: relative;margin: 0 auto;}
.why ul li .icon::after{content: '';padding-top: 100%;display: block;}
.why ul li .icon .inner{position: absolute;top: 30px;left: 30px;width: calc(100% - 60px);height: calc(100% - 60px);z-index: 2;background-color: #e8f2ff;border-radius: 50%;transition: all .3s ease-out;}
.why ul li .icon img{position: absolute;top: calc(50% - 30px);left: calc(50% - 30px);width: 60px;height: 60px;object-fit: contain;}
.why ul li h3{margin: 30px 0 6px;transition: all .3s ease-out;}
.why ul li p{font-size: 1.4em;color: #666;}
.why ul li:hover .icon .inner{top: 0;left: 0;width: 100%;height: 100%;}
.why ul li:hover .icon img{transform: scale(1.2);transition-delay: .3s;}
.why ul li:hover h3{color: #1c83ff;letter-spacing: 1px;}

.service{background: url(../images/applet/bg_service.jpg) no-repeat center/cover;}
.service ul li{width: calc(33.333% - 15px);margin: 20px 0 0;}
.service ul li .inner{width: 100%;height: 100%;position: relative;z-index: 1;padding: 30px;background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px #e8f2ff;display: flex;align-items: center;overflow: hidden;;transition: all .5s ease-out;}
.service ul li .inner::before,
.service ul li .inner::after{content: '';display: block;position: absolute;width: 0;height: 0;z-index: -1;border-radius: 50%;opacity: 0;}
.service ul li .inner::before,
.service ul li .inner::after{transition: inherit;}
.service ul li .inner img{transition-delay: .3s;}
.service ul li .txt{padding-left: 30px;}
.service ul li p{font-size: 1.4em;color: #666;margin-top: 10px;}
.service ul li:hover,
.service ul li:hover p{color: #fff;}
.service ul li:hover .inner::before,
.service ul li:hover .inner::after{width: 100%;height: 100%;background-color: #1c83ff;border-radius: 0;opacity: 1;}
.service ul li:hover .inner::before{right: 0;top: 0;}
.service ul li .inner:hover::after{left: 0;bottom: 0;}
.service ul li .inner:hover img{filter: brightness(0) invert(1)}

.advantages .list{background: url(../images/applet/bg_advantages.png) no-repeat center/450px;}
.advantages ul li{width: 279px;height: 313px;padding: 40px;text-align: center;background: url(../images/applet/bg_advantages01.png) no-repeat center/100% 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;position: relative;}
.advantages ul.left li:last-child{left: 140px;top: -60px;}
.advantages ul.right li:last-child{right: 140px;top: -60px;}
.advantages ul li .num{width: 50px;height: 50px;line-height: 50px;padding-right: 3px;text-align: center;background: url(../images/applet/bg_advantages02.png) no-repeat center/contain;font-size: 2em;font-style: italic;color: #fff;font-weight: bold;transition: all .3s ease-out;}
.advantages ul li h4{margin: 10px 0;transition: all .3s ease-out;}
.advantages ul li p{font-size: 1.4em;color: #666;}
.advantages ul li:hover .num{transform: rotate(360deg);}
.advantages ul li:hover h4{color: #1c83ff;letter-spacing: 2px;}

.entry{background: url(../images/applet/bg_entry.jpg) no-repeat center/cover;}
.entry .page_title .cn span{color: #fff;}
.entry .page_title .en span{color: #fff;}
.entry .page_title .en span::after{right: -30px;}
.entry ul li{width: 19%;}
.entry ul li .inner{transition: all .3s ease-out; padding-top: 20px;}
.entry ul li p{font-size: 1.6em;color: #fff;font-weight: bold;text-align: center;margin-top: 20px;}
.entry ul li:hover .inner{transform: translateY(-10px);}

.process ul li{width: 12%;text-align: center;}
.process ul li .title{font-size: 2em;}
.process ul li .title b{font-size: 1.5em;transition: all .3s ease-out;}
.process ul li .desc{font-size: 1.4em;color: #666;height: 70px;margin-top: 5px;}
.process ul li .icon{width: 140px;height: 140px;display: flex;justify-content: center;align-items: center;transition: all .8s ease-out;}
.process ul li .icon .inner{width: 100px;height: 100px;border-radius: 50%;display: flex;justify-content: center;align-items: center;}
.process ul li:nth-of-type(odd) .icon{padding-top: 12px;background: url(../images/applet/bg_process01.png) no-repeat center/contain;}
.process ul li:nth-of-type(odd) .icon .inner{background-color: #1c83ff;}
.process ul li:nth-of-type(even){padding-top: 134px;}
.process ul li:nth-of-type(even) .icon{padding-bottom: 12px;background: url(../images/applet/bg_process02.png) no-repeat center/contain;margin-bottom: 10px;}
.process ul li:nth-of-type(even) .icon .inner{background-color: #f87701;}
.process ul li:hover .icon img{transform: scale(1.2);}
.process ul li:nth-of-type(odd):hover .icon{transform: translateY(-6px);transition: all .3s ease-out;}
.process ul li:nth-of-type(even):hover .icon{transform: translateY(6px);transition: all .3s ease-out;}
.process ul li:nth-of-type(odd):hover .title{color: #1c83ff;}
.process ul li:nth-of-type(even):hover .title{color: #f87701;}

.questions{background: url(../images/applet/bg_questions.jpg) no-repeat center/cover;}
.questions ul li{width: calc(33.333% - 15px);margin: 20px 0 0;padding: 30px;background-color: #fff;border-radius: 10px;box-shadow: 0 0 10px #e8f2ff;}
.questions ul li .q{background: url(../images/applet/icon23.png) no-repeat left 4px/38px;padding: 10px 0 10px 50px;font-size: 1.8em;font-weight: bold;}
.questions ul li .a{font-size: 1.4em;color: #666;padding-left: 50px;}
.questions ul li:hover{box-shadow: 0 2px 15px #7fb9ff;}
.questions ul li:hover .q{color: #1c83ff;}

.footer{background: url(../images/applet/bg_footer.jpg) no-repeat center/cover;}
.footer .wrapper{display: flex;justify-content: center;align-items: center;}
.footer .txt{max-width: calc(100% - 180px);color: #fff;padding-right: 50px;}
.footer .txt h2{margin: 20px 0 30px;}
.footer .btn{width: 280px;height: 40px;line-height: 40px;font-size: 2em;color: #1c83ff;background-color: #fff;border-radius: 50px;text-align: center;position: relative;z-index: 1;overflow: hidden;;display: block;transition: all .3s ease-out;}
.footer .btn::before{content: '';position: absolute;z-index: -1;top: 0;left: -200%;width: 200%;height: 100%;background: linear-gradient(to bottom right, #2642eb, #8cbeef);opacity: 0;}
.footer .btn:hover{background-color: #1c83ff;color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);}
.footer .btn:hover::before{left: 0;opacity: 1;transition: all .3s ease-out;}
.footer .qrcode img{width: 180px;}
.footer .qrcode p{color: #fff;}
.footer .banquan{text-align: center; color: #fff; padding-top: 70px;}
.footer .banquan a{padding-left: 12px;}

@media screen and (min-width: 1280px){
	
}

@media screen and (max-width: 1280px){
    .banner .main .logo{height: 70px;}
    .banner .main h1{font-size: 5em;}
    
    .why ul li .icon img{top: calc(50% - 15px);left: calc(50% - 15px);width: 30px;height: 30px;}
    
    .service ul li .icon{width: 40px;}
    
    .process ul li{width: 24%;}
    .process ul li:nth-of-type(even){padding-top: 80px;}
    .process ul li .desc{height: auto;margin: 5px 0;}
    .process ul li .icon{margin: 0 auto;width: 80px;height: 80px;}
    .process ul li:nth-of-type(odd) .icon{padding-top: 8px;}
    .process ul li:nth-of-type(even) .icon{padding-bottom: 8px;margin-bottom: 5px;}
    .process ul li .icon .inner{width: 60px;height: 60px;padding: 15px;}
    .process ul li .title{font-size: 1.6em;}

    .footer .txt{max-width: calc(100% - 16px);padding-right: 30px; padding-bottom: 30px;}
    .footer .qrcode img{width: 110px;}
    .footer .btn{font-size: 1.6em;}
}

@media screen and (max-width: 1024px){
    .banner .main .logo{height: 60px;}
    .banner .main h1{font-size: 3em;}
    
    .service ul li{width: 100%;margin: 20px 0 0 0;}
    .service ul li .inner{padding: 25px 20px;}
    .service ul li:first-child{margin-top: 0;}
    .service ul li .txt{padding-left: 20px;}

    .advantages ul li .num{width: 40px;height: 40px;line-height: 40px;font-size: 1.6em;}
}

@media screen and (max-width: 930px){
    .advantages .list{background-size: contain;}
    .advantages ul{width: 100%;}
    .advantages ul li:last-child{float: right;position: static;margin-top: -50px;}
    .advantages ul:last-child{margin-top: -50px;}
}

@media screen and (max-width: 768px){
    .banner .wrapper{position: relative;z-index: 1;}
    .banner .pic{position: absolute;top: 0;left: 0;z-index: -1;width: 70%;}
    .banner .main{width: 100%;padding-left: 0;}
    .banner .main .logo{height: 40px;}
    .banner .main h1{font-size: 2em;}
    .banner .main h3{font-size: 1.5em;}
    .banner ul li{font-size: 1.5em;width: 150px;}
    .banner ul li img{height: 20px;}

    .page_title .cn span{font-size: 2.6em;}
    .page_title .en span{font-size: 1.2em;}

    .why ul{margin-top: 25px;}
    .why ul li{width: 48%;margin: 10px 0;}
    .why ul li .icon .inner{top: 20px;left: 20px; width: calc(100% - 40px);height: calc(100% - 40px);}
    .why ul li h3{margin: 10px 0 6px;}

    .entry ul li{width: 48%;margin: 10px 0;}

    .process ul li{width: 48%;}

    .questions ul li{width: 100%;padding: 20px;}
    .questions ul li:first-child{margin-top: 0;}
}

@media screen and (max-width: 420px){
    .advantages ul li{width: 220px;height: 260px;padding: 30px 20px;}
}