html,body {min-width: 1240px;background: #fff}
*{margin: 0; padding: 0; list-style: none; box-sizing: border-box; color: #212121;}
a{color: #333;text-decoration: none;}
a:focus{}
.clear{clear: both; width: 100%; height: 1px;}
/* page_index */
/* banner第一个轮播 */
.banner{height: 800px; width: 100%;min-width: 1240px;position: relative; overflow: hidden;}

.swiper-t{width: 100%;height: 100%; margin: 0 auto;}
.swiper-container {width: 100%;height: 100%; margin: 0 auto;}
.swiper-slide {position: relative;text-align: center;font-size: 18px;background: transparent;display: block;}
.swiper-slide .text{position: absolute;left: 50%;top: 50%;width: 1240px; margin: -102px 0 0 -800px;}
.swiper-slide h3{display: block;text-align: left; font-size: 44px; line-height: 60px; color: #212121;}
.swiper-slide h4{display: block;text-align: left; font-size: 22px; line-height: 55px; color: #212121;}
.swiper-slide a{display: block; background: #fff; font-size: 18px; color: #212121; width: 190px;height: 50px; line-height: 50px; margin-top: 40px;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets{bottom: 15px;}
.banner .swiper-pagination-bullet{background: #fff; opacity: .4; width: 42px;height: 6px;border-radius: 3px;}
.banner .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #fff; opacity: .8;}
.banner .banner_mask{position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; height: 145px; background: rgba(29, 33, 42, .6);}
.banner .banner_mask ul{display: flex;flex-direction: row; flex-wrap: nowrap;justify-content: center;align-items:center}
.banner .banner_mask li{padding:30px 40px;/**/position: relative; display: flex;}
.banner .banner_mask li:not(:last-child)::before{content: ""; position: absolute; right: 0; width: 1px; height: 82px; top: 50%; margin-top: -41px; background: #fff; opacity: .8;}
.banner .banner_mask li img{display: block; width: 86px; height: 86px; margin-right: 27px;}
.banner .banner_mask li div{}
.banner .banner_mask li h3{color: #fff; display: block; font-size: 20px; line-height: 180%;white-space: nowrap;}
.banner .banner_mask li p{color: #fff;display: block; font-size: 15px; line-height: 160%;white-space: nowrap;}

#m_01{width: 100%;min-width: 1240px; height: 636px; overflow: hidden; background: #fff;}
#m_01 h2{font-size: 35px; line-height: 70px; padding-top: 20px; color: #313233; text-align: center;}
#m_01 h3{font-size: 20px; line-height: 45px; padding-bottom: 15px; color: #313233;text-align: center; font-weight: normal;}
#m_01 ul{width: 100%; margin: 0 auto; max-width: 1240px;display: flex; justify-content: center;flex-wrap:wrap}
#m_01 ul li{display: flex; width: 20%; justify-content: center; align-items: center; cursor: pointer;}
#m_01 ul li div{width: 186px; height: 220px; border-radius: 10px; display: flex;flex-wrap:wrap;flex-direction:column;justify-content: center;align-items: center;}
#m_01 ul li div img{width: 96px; height: 97px; transition:transform .5s;}
#m_01 ul li div p{font-size: 14px; line-height: 44px;}
#m_01 ul li:hover div{box-shadow: 2px 2px 10px rgba(0, 0, 0, .2);}
#m_01 ul li:hover div img{transform: scale(1.1,1.1);}

#m_02{width: 100%;min-width: 1240px; height: 642px; overflow: hidden; background: #292C35; position: relative;}
#m_02 h2{font-size: 35px; line-height: 70px; padding-top: 20px; color: #fff; text-align: center; position: relative;z-index: 2;}
#m_02 h3{font-size: 20px; line-height: 45px; padding-bottom: 15px; color: #fff;text-align: center; font-weight: normal; position: relative;z-index: 2;}
#m_02 .small{height: 110px; width: 100%; padding: 0 20px; position: relative;z-index: 2;max-width: 1200px;margin: 0 auto;}
#m_02 .small .gallery-thumbs .swiper-slide {opacity: 1; width: 62px; height: 61px;position: relative; cursor: pointer;transform: scale(1);}
#m_02 .small .gallery-thumbs.swiper-container{padding: 10px 0;}

#m_02 .small .gallery-thumbs .swiper-slide img{display: block; height: 100%; margin: 0 auto;}
#m_02 .small .gallery-thumbs .swiper-slide-thumb-active {position: relative;transform: scale(1.2);}
#m_02 .small .gallery-thumbs .swiper-slide-thumb-active img {position: relative;}
#m_02 .small .gallery-thumbs .swiper-slide-thumb-active::after {content: ""; display: block; position: absolute; bottom: -25px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background: #3369FF;}

#m_02 .big {width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1;}
#m_02 .big .swiper-container{height: 100%; width: 100%;}
#m_02 .big .swiper-slide{width: 100%; height: 100%;}
#m_02 .big .swiper-slide .text_box{height: 324px; width: 1200px; position: absolute; left: 50%; bottom: 0; margin-left: -600px; display: flex; flex-wrap:wrap;align-items: flex-start;}
#m_02 .big .swiper-slide .text_box .pt{margin-right: 75px; width: 256px; height: 324px;}
#m_02 .big .swiper-slide .text_box .txt h4{font-size: 30px; color: #fff; height: 90px; line-height: 90px; position: relative; margin-top: 38px;}
#m_02 .big .swiper-slide .text_box .txt h4::after{content: ""; height: 4px; width: 30px; display: block;position: absolute;bottom: 0px;left: 0; background: #326AFF;}
#m_02 .big .swiper-slide .text_box .txt div span{font-size: 20px; color: #fff; line-height: 64px;}
#m_02 .big .swiper-slide .text_box .txt div span:not(:last-child){margin-right: 32px;}


#m_03{width: 100%;min-width: 1240px; height: 895px; overflow: hidden; background: url(../images/index/m_03_bg_01.jpg) top center no-repeat;}
#m_03 h2{font-size: 35px; line-height: 70px; padding-top: 20px; color: #313233; text-align: center;}
#m_03 h3{font-size: 20px; line-height: 45px; padding-bottom: 15px; color: #313233;text-align: center; font-weight: normal;}
#m_03 .tag_box{margin: 0 auto; width: 1240px; height: 745px; position: relative;}
#m_03 .tag {position: absolute;min-width: 150px;height: 36px; padding: 0 13px; overflow: hidden;transform: scale(1); transition:transform .3s;}
#m_03 .tag:hover{transform: scale(1.1);}
#m_03 .tag .tags{position: absolute; top: 0; z-index: 3; display: block; min-width: 124px;height: 100%;margin: 0px auto;background: #DAF5FF; text-align: center; line-height: 32px; color: #3269ff; font-size: 15px; font-weight: bold; border: 1px solid #3269ff; border-right: 0; border-left: 0; transition:transform .1s; cursor: pointer; border-radius: 9px;}

#m_03 .tag:hover .tags{background: #3269ff; color: #fff;}

.tag .before {
    display: block;
    position: absolute;
    z-index: 2;
    top: 7px;
    left: 6px;
    width: 22px;
    height: 22px;
    background: #DAF5FF;
    border: 1px solid #3269ff;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
    border-radius: 5px;
}
.tag:hover .before {background: #3269ff;}

.tag .after{
    display: block;
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 6px;
    width: 22px;
    height: 22px;
    background: #DAF5FF;
    border: 1px solid #3269ff;
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
    border-radius: 5px;
}
.tag:hover .after {background: #3269ff;}



#m_04{width: 100%;min-width: 1240px; height: 850px; overflow: hidden; background: url(../images/index/m_04_bg_00.jpg) top center no-repeat;}
#m_04 h2{font-size: 35px; line-height: 70px; padding-top: 20px; color: #fff; text-align: center; position: relative;z-index: 2;}
#m_04 h3{font-size: 20px; line-height: 45px; padding-bottom: 15px; color: #fff;text-align: center; font-weight: normal; position: relative;z-index: 2;}
#m_04 .field_box{display: flex; flex-wrap:wrap;align-content: space-between;justify-content: space-between; width: 1240px; height: 578px; margin: 0 auto;}
#m_04 .field_box .field{position: relative; width: 587px; height: 273px;border-radius: 10px; overflow: hidden; cursor: pointer;}
#m_04 .field_box .field .img_box{width: 100%; height: 273px;position: absolute; right: 0; top: 0; z-index: 1; transition:transform .5s;Filter:grayscale(100%)}
#m_04 .field_box .field:hover .img_box{transform: scale(1.1);Filter:grayscale(0%)}

#m_04 .field_box .field .img_box::before{content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.12); opacity: 1; transition:transform .5s;}
#m_04 .field_box .field:hover .img_box::before{opacity: 0;}

#m_04 .field_box .field .img_box::after{content: ""; display: block; width: 100%; height: 100%;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%,  rgba(0,0,0,.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.9)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 100%);
}

#m_04 .field_box .field .icon_box{width: 235px; height: 273px;position: absolute; left: 0; top: 0; z-index: 2;display: flex;flex-wrap:wrap;flex-direction:column;justify-content: center;align-items: center;}
#m_04 .field_box .field .icon_box p{line-height: 54px; color: #fff; font-size: 25px; font-weight: bold;}

#m_04 .field_box .field .text_box{width: 326px; height: 273px; position: absolute; right: 0; top: 0;z-index: 2; padding-top: 125px;}
#m_04 .field_box .field .text_box h3,#m_04 .field_box .field .text_box h3 span{color: #fff; font-size: 30px;font-weight: bold; text-align: left; line-height: 40px;}
#m_04 .field_box .field .text_box h3 span{text-transform:uppercase;}
#m_04 .field_box .field .text_box p{color: #fff; font-size: 15px; line-height: 28px;}


#m_05{width: 100%;min-width: 1240px; height: 572px; overflow: hidden; background: url(../images/index/m_05_bg_00.jpg) top center no-repeat;}
#m_05 h2{font-size: 35px; line-height: 70px; padding-top: 20px; color: #313233; text-align: center;}
#m_05 h3{font-size: 20px; line-height: 45px; padding-bottom: 15px; color: #313233;text-align: center; font-weight: normal;}
#m_05 .serve_box{width: 1200px; height: 320px; margin: 0 auto;display: flex;justify-content: space-between;}
#m_05 .serve_box .serve{width: 165px; height: 320px;position: relative; border-radius: 10px; overflow: hidden;transition: all .2s ease-in-out;}
#m_05 .serve_box .serve.active{width: 320px; height: 320px;}
#m_05 .serve_box .serve .mask{width: 100%;height: 100%; position: absolute; z-index: 1;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 20%,  rgba(0,0,0,.9) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.9)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%,rgba(0,0,0,.9) 100%);
}
#m_05 .serve_box .serve .brand{position: absolute;bottom: 15px;width: 100%;text-align: center;transition: all .5s ease-in-out;transition-delay: .1s;z-index: 2;}
#m_05 .serve_box .serve .detail{position: absolute;bottom: 15px;width: 100%;padding: 0 20px;z-index: 2;transform: translateX(-300px);transition: all .5s ease-in-out;}
#m_05 .serve_box .serve .brand p{color: #fff; font-size: 20px; line-height: 40px;}
#m_05 .serve_box .serve .detail h3{color: #fff; text-align: left; font-size: 25px; padding-bottom: 0; font-weight: 600;}
#m_05 .serve_box .serve .detail h4{color: #fff; text-align: left; font-size: 15px; line-height: 28px;}
#m_05 .serve_box .serve .detail p{color: rgba(255,255,255,.6); text-align: left; font-size: 15px; line-height: 28px;}
#m_05 .serve_box .serve .detail p b{color: #fff; font-size: 15px; font-weight: 600;}

#m_05 .serve_box .serve.active .brand{transform: translateY(60px);opacity: 0;visibility: hidden;}
#m_05 .serve_box .serve.active .detail{transition-delay: .2s;transform: translateX(0);}


#m_06{width: 100%;min-width: 1240px; height: 723px; overflow: hidden; position: relative;}
#m_06 h2{font-size: 35px; line-height: 70px; padding-top: 20px; color: #fff; text-align: center; position: relative;z-index: 2;}
#m_06 h3{font-size: 20px; line-height: 45px; padding-bottom: 15px; color: #fff;text-align: center; font-weight: normal; position: relative;z-index: 2;}
#m_06 .moreserve_box{width: 100%;min-width: 1240px; height: 723px;}

#m_06 .bg_box {width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 1;}

#m_06 .tab{height: 56px; width: 100%; position: relative;z-index: 3;max-width: 1200px;margin: 20px auto 0; background: rgba(27, 28, 53, .3);}
#m_06 .tab .tab-thumbs .swiper-slide {height: 100%; line-height: 54px; cursor: pointer;width: 9.5%; color: #fff;}
#m_06 .tab .tab-thumbs .swiper-slide-thumb-active {background: url(../images/index/m_06_tab_hover.png) center bottom no-repeat; background-size: auto 100%;width: 15%;}
#m_06 .tab .tab-thumbs .swiper-slide-thumb-active::after {content: ""; display: block; position: absolute; bottom: -25px; left: 50%; margin-left: -5px; width: 10px; height: 10px; border-radius: 50%; background: #3369FF;}


#m_06 .icon_box {width: 1200px; height: 404px; padding: 70px 130px; position: absolute; top: 224px; left: 50%; margin-left: -600px; z-index: 2;border:1px solid #fff; background: rgba(27, 28, 53, .3);}
#m_06 .icon_box .swiper-wrapper{}
#m_06 .icon_box .swiper-wrapper .swiper-slide{display: flex;flex-wrap:wrap;justify-content:space-evenly;align-items: center;}
#m_06 .icon_box .swiper-wrapper .swiper-slide img{max-width: 100%; max-height: 100%;padding: 15px 20px;}



#m_07{width: 100%;min-width: 1240px; height: 250px; overflow: hidden; background: url(../images/index/m_07_bg_00.jpg) top center no-repeat;}
#m_07 h2{font-size: 40px; line-height: 86px; padding-top: 38px; color: #fff; text-align: center; position: relative;z-index: 2;}
#m_07 h3{font-size: 30px; line-height: 70px; padding-bottom: 0px; color: #fff;text-align: center; font-weight: normal; position: relative;z-index: 2;}
#m_07 .tag_box{text-align: center; margin-top: 10px;}
#m_07 .tag_box span{display: inline-block; color: #fff; letter-spacing: 15px; padding: 0 20px; line-height: 26px; font-size: 20px;}
#m_07 .tag_box span:not(:last-child){border-right: 1px solid #fff;}