@charset "utf-8";
.banner{background-attachment:fixed;position: relative;width: 100%;height: 70vh;margin-top: 100px;}
.index-banner {width: 100%;height: 100%;}
.index-banner .item {
    width: 100%;
    height:70vh;
    display: block;
    overflow: hidden;
    position: relative;
    text-align: center;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    outline: none;
    background-color: #fff;
}
.index-banner .item:after{content: '';width: 100%;height: 100%;background-color: rgba(0,0,0,0.25);position: absolute;left: 0;top:0;z-index: 1;}
.index-banner .item .text {
    align-items: center;
    text-align: left;
    padding-top: 10%;
    position: absolute;z-index: 9;width: 100%;height: 100%;left: 0;top:0;
}
.index-banner .item h4 {
    font-size: 60px;
    letter-spacing: 3px;
    line-height:70px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom:20px;
    font-weight:550;
    -webkit-animation: fadeOutInUp 1s both;
    animation: fadeOutInUp 1s both;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}
.index-banner .item h4 span {color:var(--color-3);font-weight: 550;}
.index-banner .item h4 b {color:var(--color-3);font-weight: 550;font-size: 75px;}
.index-banner .item p {
    display: block;
    color: #fff;
    font-size: 30px;
    letter-spacing:1px;
    text-transform: uppercase;
    font-weight: 500;
    line-height:40px;
    margin-bottom:60px;
    -webkit-animation: fadeOutInUp 1s both;
    animation: fadeOutInUp 1s both;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}
.index-banner .item a.left{margin:0 auto 0 0;}
.index-banner .item a.center{margin:0 auto;}
.index-banner .item a.right{margin:0 0 0 auto;}
.index-banner .item a{color:#fff;font-size:22px;margin-right: 20px;text-align: center;font-weight: 500;display: inline-block;text-transform: uppercase;border-radius:30px;width:200px;line-height: 60px;background-color:var(--color-3);}
.index-banner .item a i{font-size:2.5rem;margin-left:5px;font-weight: 300}
.index-banner .item a:last-child{margin-right: 0;background-color: transparent;border: 2px solid #fff;line-height: 54px;color: #fff}
@media (max-width: 1440px) {
    .banner{margin-top: 90px;}
    .index-banner .item .text {padding-top: 10%;}
    .index-banner .item h4 {font-size: 50px;margin-bottom: 30px;line-height:60px}
    .index-banner .item h4 b {font-size: 65px;}
    .index-banner .item p {font-size: 25px;margin-bottom: 60px;line-height: 25px}
    .index-banner .item a{width: 160px;line-height: 50px;font-size: 16px;}
    .index-banner .item a:last-child{border: 2px solid #fff;line-height: 46px;}
    .index-banner .item a i{font-size:2rem;}
}
@media (max-width: 992px) {
    .banner{height:45vh;padding-top:0;margin-top: 0}
    .index-banner {width: 100%;}
    .index-banner .item {height:45vh;background-size: auto 100%;background-position: center right}
    .index-banner .item .text {padding:30% 20px 0 20px;text-align: center}
    .index-banner .item h4 {font-size: 2.2rem!important;margin-bottom:10px!important;line-height:2.5rem;letter-spacing: 0!important;}
    .index-banner .item h4 span{display: block;}
    .index-banner .item h4 b {font-size: 2.2rem;}
    .index-banner .item p {font-size: 1.5rem!important;margin-bottom:25px!important;line-height:2.5rem;letter-spacing: 0!important;}
    .index-banner .item a{font-size:1.5rem;margin-right: 10px;width:150px;line-height:45px;}
    .index-banner .item a i{font-size:1.8rem;margin-left:2px;}
    .index-banner .item a:last-child{line-height: 41px;}
}

.index-banner .item.slick-active .img {-webkit-animation: fadeInRight 1s both 1s;animation: fadeInRight 1s both 1s;}
.index-banner .item.slick-active h4 {-webkit-animation: fadeInUp 1s both 1.5s;animation: fadeInUp 1s both 1.5s;}
.index-banner .item.slick-active p {-webkit-animation: fadeInUp 1s both 2s;animation: fadeInUp 1s both 2s;}
.index-banner .item.slick-active a {-webkit-animation: fadeInUp 1s both 2.5s;animation: fadeInUp 1s both 2.5s;}
.index-banner .item.slick-active {-webkit-animation: fadeIn 2.5s both;animation: fadeIn 2.5s both;}
.slick-slider {
    float: left;
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: hand;}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.slick-track {position: relative;top: 0;left: 0;display: block;}
.slick-track:before,.slick-track:after {display: table;content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none;float: left;height: 100%;min-height: 1px;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block;height: auto;border: 1px solid transparent;}
.index-banner .NextArrow,.index-banner .PrevArrow{
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border: none;
    background:rgba(0,0,0,0.15);
    text-align: center;
    z-index: 999;
    outline: none;
    bottom: 50%;
    opacity: 0.5;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.index-banner .NextArrow i,.index-banner .PrevArrow i{font-size:2.8rem;color:#fff;}
.index-banner .PrevArrow{left:0;}
.index-banner .NextArrow{right:0;transform: rotate(-180deg)}
.index-banner .NextArrow:hover,.index-banner .PrevArrow:hover{opacity: 1;}
.index-banner .NextArrow:hover i,.index-banner .PrevArrow:hover i{color: #fff}
.index-banner .slick-dots {position: absolute;height:10px;bottom:50px;width:100px;left:50%;margin-left: -50px;padding:0;list-style-type: none;}
.index-banner .slick-dots li button {display: none;}
.index-banner .slick-dots li {width:10px;height:10px;background-color:rgba(255,255,255,0.2);border-radius: 20px;}
.index-banner .slick-dots li:last-child{margin-right: 0;}
.index-banner .slick-dots li.slick-active {background-color:rgba(255,255,255,0.9);width:25px}
@media (max-width: 991px) {
    .index-banner .slick-dots {bottom:25px;}
    .index-banner .NextArrow,.index-banner .PrevArrow{opacity:0;}
    .index-banner .slick-dots {width:80px;margin-left: -40px;left: 50%;}
    .index-banner .slick-dots li {width:8px;height:8px;border-radius:50%;}
    .index-banner .slick-dots li.slick-active {width: 8px;}
    .index-banner .item.slick-active h4 {-webkit-animation: fadeInUp 1s both 1s;animation: fadeInUp 1s both 1s;}
    .index-banner .item.slick-active p {-webkit-animation: fadeInUp 1s both 1.5s;animation: fadeInUp 1s both 1.5s;}
    .index-banner .item.slick-active a {-webkit-animation: fadeInUp 1s both 2s;animation: fadeInUp 1s both 2s;}
    .index-banner .item.slick-active {-webkit-animation: fadeIn 2s both;animation: fadeIn 2s both;}
}
.pro{background-color: #fff;padding: 50px 0;}
.pro-ul{padding-top: 30px;position: relative;}
.pro-ul:after{content: '';height: 60px;width: 1px;background-color: #fff;position: absolute;right: 0;top:-170px;z-index: 9999}
.pro-ul li{width:19.2%;position: relative;overflow: hidden;margin-bottom: 2%;background-color:var(--color-3);text-align: center;}
.pro-ul li:after{content: '';width: 100%;height: 100%;z-index: 1;position: absolute;left: 0;top:0;}
.pro-ul li:last-child{margin-right: 0;}
.pro-ul li .img{width: 100%;height: 100%;position: absolute;z-index: 1;left: 0;top:0;overflow: hidden;background-repeat: no-repeat;background-size: cover;background-position: center;}
.pro-ul li .img img{width: 100%;}
.pro-ul li .info{
    width: 100%;
    position: relative;
    z-index: 2;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    height: 500px;
    padding: 300px 50px 0 50px;
}
.pro-ul li .info em{font-size: 8rem;color: #fff;display: block;position: absolute;width: 100%;text-align: center;left: 0;top:100px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.pro-ul li .info h4{
    font-size: 25px;font-weight:500;margin-bottom: 30px;color: #fff;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    position: relative;
}
.pro-ul li .info h4:after{content: '';width: 140px;height: 2px;background-color:#fff;position: absolute;left: 50%;margin-left: -70px;top: -50px; }
.pro-ul li .info p{font-size: 18px;line-height: 32px;color: #fff;opacity: 0;position: relative;bottom: -100px;left: 0;width: 100%;display: block;}
.pro-ul li .info a{display: block;width: 180px;line-height: 50px;;margin: 30px auto;border: 2px solid #fff;text-align: center; color: #fff;font-size: 18px;font-weight: 500;position: absolute;left: 50%;margin-left: -75px;bottom: -100px;border-radius: 30px;text-transform: uppercase;}
.pro-ul li:hover:after{background-color: rgba(0,0,0,0.6);}
.pro-ul li .info a:hover{background-color: #fff;color: var(--color-3);}
.pro-ul li .info a i{font-size: 1.8rem;margin-left: 10px;}
.pro-ul li:hover{box-shadow:0 20px 40px rgba(88,100,117,.5);-webkit-box-shadow:0 20px 40px rgba(88,100,117,.5);}
.pro-ul li:hover .img{transform:scale(1.1);-webkit-transform:scale(1.1);}
.pro-ul li:hover .info{padding-top: 180px;}
.pro-ul li:hover .info em{top:30px;}
.pro-ul li:hover .info h4{padding-top: 0;padding-bottom: 10px;font-size: 30px;}
.pro-ul li:hover .info h4:after{display: none;}
.pro-ul li:hover .info p{opacity: 1;bottom:0;}
.pro-ul li:hover .info a{bottom: 30px;}
@media screen and (max-width: 1680px) {
    .pro-ul li .info{height: 400px;padding: 250px 50px 0 50px;}
    .pro-ul li .info em{font-size: 6.5rem;}
    .pro-ul li .info h4{font-size: 30px;margin-bottom: 20px;}
    .pro-ul li .info h4:after{width: 120px;height: 1px;margin-left: -60px;top: -30px;}
    .pro-ul li .info p{font-size: 16px;line-height: 30px;}
    .pro-ul li .info a{width: 150px;line-height: 45px;margin: 20px auto;margin-left: -75px;font-size: 16px;border: 1px solid #fff;}
    .pro-ul li:hover .info{padding-top:70px;}
}
@media screen and (max-width: 1440px) {}
@media screen and (max-width: 991px) {
    .pro{padding:20px 0;}
    .pro-ul{padding-top:10px;flex-wrap: wrap;}
    .pro-ul:after{background-color: #ddd;}
    .pro-ul li{width:100%;margin-bottom:3%;}
    .pro-ul li:last-child{margin-bottom: 0}
    .pro-ul li:after{background-color: rgba(0,0,0,0.6);}
    .pro-ul li .info{height: auto;padding:100px 20px 20px 20px;}
    .pro-ul li:hover .info{padding:100px 20px 20px 20px;}
    .pro-ul li .info em{font-size: 5rem;top:20px;}
    .pro-ul li:hover .info em{top:20px;}
    .pro-ul li .info h4{font-size: 2.2rem;margin-bottom:20px;}
    .pro-ul li .info h4:after{display: none }
    .pro-ul li .info p{font-size: 1.4rem;line-height: 2.2rem;opacity:1;;bottom:unset;}
    .pro-ul li .info a{width: 150px;background-color: #fff;color: var(--color-3);line-height: 45px;margin:20px auto!important;border:none;font-size: 1.5rem;position:unset;left:unset;margin-left:unset;bottom:unset;}
    .pro-ul li:hover:after{background-color: rgba(0,0,0,0.6);}
    .pro-ul li .info a i{font-size: 1.6rem;margin-left: 10px;}
    .pro-ul li:hover .info h4{font-size: 2.2rem;margin-bottom:20px;}
}

.web-ser{padding:80px 0;width: 100%;background-color: var(--color-3);position: relative;background-size: cover;background-position: center}
.web-ser:after{content: '';width: 100%;height: 100%;background-color: rgba(49,75,159,0.75);z-index: 1;position: absolute;left: 0;top:0;}
.web-ser .section-title{position: relative;z-index: 2;margin-bottom: 20px}
.web-ser .section-title h4{color: #fff;}
.web-ser .section-title h4:after{background-color:#fff;}
.web-ser .section-title h4 span{color:#fff;}
.web-ser .section-title p{color: #fff;}
.website-ul{
    width: 100%;
    flex-wrap: wrap;
    margin:0 -10px;position: relative;
    z-index: 2;
}
.website-ul li{
    margin: 10px 15px 30px 15px;outline: none;
    padding:20px 30px;background-color: #fff;
    box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.05);
    min-height: 300px;
}
.website-ul li b{font-size:25px;font-weight: 550;margin-bottom:10px;color: #495057;position: relative;display: block;}
.website-ul li b:after{content: '';width: 60px;height:2px;background-color:var(--color-4);position: absolute;bottom:18px;right:0; }
.website-ul li i{display: block;font-size: 5rem;margin: 10px auto 10px auto;color: var(--color-3);font-weight: 600;font-style: unset}
.website-ul li p{font-size: 18px;line-height:30px;color: #868e96;font-weight: 400!important;}
.website-ul .NextArrow,.website-ul .PrevArrow{
    position: absolute;
    width: 32px;
    height: 32px;
    border: 2px solid #fff;
    line-height: 28px;
    background: transparent;
    text-align: center;
    z-index: 999;
    outline: none;
    border-radius: 50%;
    top:50%;margin-top: -16px;
}
.website-ul .NextArrow i,.website-ul .PrevArrow i{font-size:1.6rem;color:#fff;}
.website-ul .NextArrow:hover,.website-ul .PrevArrow:hover{border: 2px solid #fff;}
.website-ul .NextArrow:hover i,.website-ul .PrevArrow:hover i{color:#fff;}
.website-ul .NextArrow{right:-30px;}
.website-ul .PrevArrow{left:-30px;}
@media (max-width: 1440px) {
    .website-ul li{min-height: 250px;}
    .website-ul li b{font-size:22px;}
    .website-ul li b:after{height:1px;}
    .website-ul li i{font-size: 4.5rem;}
    .website-ul li p{font-size: 15px;line-height:25px;}
    .web-des-ul li i{font-size: 4rem;}
    .web-des-ul li h6{font-size: 22px!important;margin-bottom: 10px!important;}
    .web-des-ul li p{font-size: 15px;line-height: 25px;}
}
@media (max-width: 991px) {
    .web-ser{padding:0 0 30px 0;}
    .web-ser .section-title h4:after{display: none;}
    .website-ul{margin:0;background-color: #fff;box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.05);-webkit-box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.05);}
    .website-ul li{margin: 0 ;padding:10px 20px;min-height:auto;background-color: transparent; box-shadow:none; -webkit-box-shadow:none;}
    .website-ul li b{font-size:2rem;}
    .website-ul li b:after{width: 30px;height:1px;bottom:18px;}
    .website-ul li i{font-size: 4rem;margin: 5px auto;}
    .website-ul li p{font-size: 1.5rem;line-height:2.5rem;}
    .website-ul .NextArrow,.website-ul .PrevArrow{width:30px;height:30px;line-height:30px;bottom:unset;top:-50px}
    .website-ul .NextArrow{right:0;opacity: 0}
    .website-ul .PrevArrow{right:0;opacity: 0}
}


.training{padding:100px 0 50px 0;}
.training .title h4:after{background-color: #fff}
.training .title p,.training .title h4{color: #fff;}
.training-ul{padding: 50px 0;margin: 0 auto;}
.training-ul li{width:23.5%;margin-right: 2%;background-color:var(--color-3);padding:40px;text-align: center;border-radius: 12px;}
.training-ul li:last-child{margin-right: 0;}
.training-ul li .img{margin-bottom: 10px;}
.training-ul li .img img{width: auto;max-width:100px;}
.training-ul li .info{padding: 10px 0;}
.training-ul li .info h6{font-size: 20px;font-weight: 550;color:#fff;}
.training .text{width: 1200px;margin: 0 auto 50px auto;text-align: center}
.training .text p{font-size: 22px;line-height: 36px;color: #444;}

@media (max-width: 992px) {
    .training{padding:50px 0 10px 0;}
    .training-ul{padding: 20px 0;width: 100%;flex-wrap: wrap;}
    .training-ul li{width:49%;margin-bottom: 2%}
    .training-ul li:nth-child(2n){margin-right: 0;}
    .training-ul li .img{margin-bottom: 10px;}
    .training-ul li .img img{width: auto;max-width: 100%;}
    .training-ul li .info{padding: 10px 0;}
    .training-ul li .info h6{font-size: 1.8rem;}
    .training .text{margin: 0 auto 20px auto;width: 100%;}
    .training .text p{font-size: 1.5rem;line-height: 2.5rem}
}