@charset "utf-8";
.layui-layer {transition: none;}
/* title */
.index-title {}
.index-title a{font-size: 16px;}
.index-title a i{ display: inline-block; color: var(--default);}
.index-title a:hover{color: var(--default);}
.index-title a:hover i{transform: rotate(180deg);}

.index-title h3 {position: relative; font-size: 18px; font-weight: bold; color: var(--default); text-transform: uppercase;}
.index-title h3 span{color: #666; font-size: 14px;}
.index-title p {position: relative; margin-top: 20px;font-size: 36px;}
/* .index-title p:before{position: absolute; bottom: 0; left: 50%; content: ''; margin-left: -25px; width: 50px; height: 3px; background-color: var(--mColor);} */
.index-title-white {color: #fff;}
.index-title-white h3:before {background-color: #fff;}
.index-title-white p {color: #fff;}
.index-title-default h3{color: var(--default);}
.index-title-left{padding-left: 0; }
.index-title-left h3{text-align: left;}


@media (max-width:1200px) {
    .index-title p {position: relative; margin-top: 20px;font-size: 28px;}
}

@media (max-width:768px) {
    .index-title p {margin-top: 10px; font-size: 24px;}
}


.index-more {padding-top: 40px;}
.index-more a {position: relative;display: inline-block;padding: 0 25px;line-height: 55px; font-size: 16px; border: 1px solid #ccc;  border-radius: 55px;}
.index-more a i{display: inline-block; margin-left: 5px; color: var(--default); font-size: 22px; vertical-align: middle;}
.index-more-center{text-align: center;}
/* .index-more .index-more-ico{position: absolute; z-index: 1; bottom: -20px; right: 0;}
.index-more .index-more-ico img{ animation: curClick 2s 1;}
.index-more .index-more-ico::before{position: absolute; top: -8px; left: 5px; content: ''; z-index: -1; width: 25px; height: 25px; border-radius: 50%; border: 2px solid #fff;opacity: 0; animation: curBig 1.5s ease-in infinite;} */
.index-more a:hover {background-color: var(--default); box-shadow: 0 13px 10px rgba(10, 79, 144,.4); border-color: var(--default); color: #fff; }
.index-more a:hover i{color: #fff; transform: translateX(10px);}

@media (max-width:1200px) {
    .index-more {padding-top: 20px;}
    .index-more a {padding: 0 15px;line-height: 45px; font-size: 14px;}
}


/* banner */
.index-banner{position: relative; width: 100%; height: 100vh; margin-top: 72px;}
.index-banner .swiper-slide img {width: 100%;}
.index-banner .swiper-pagination-bullet {position: relative; width: 40px; height: 3px; border-radius: 0; opacity: 1; background-color: #eee;}
/* .index-banner .swiper-pagination-bullet-active {background-color: var(--default);} */
.index-banner .swiper-pagination-bullet:before {position: absolute; top: 0;left: 0;content: "";z-index: 1; width: 0;height: 3px; background-color: var(--default);}
.timer-cl:before {animation: liner 5s ease-in-out;display: block !important;}
.index-banner video {width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; right: 0; bottom: 0; position: absolute;}
.index-banner video:focus { outline:none; }
.index-banner-title{position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.index-banner-title>.container{ height: 100%; display: flex; align-items: center; }
.index-banner-title h3{font-size: 30px; color: var(--default); }
.wow .index-banner-title h3 {visibility: visible;animation-delay: 0.2s;animation-name: goUp;}
.index-banner-title p{ margin: 30px 0 15px; font-weight: b; font-size: 60px;}
.wow .index-banner-title p {visibility: visible;animation-delay: 0.4s;animation-name: goUp;}
.index-banner-title span{ display: block; font-size: 16px; color: #666;}
.wow .index-banner-title span {visibility: visible;animation-delay: 0.6s;animation-name: goUp;}
@media (max-width:1530px) {
    .index-banner {
        width: 100%;
        height: auto;
        margin-top: 0;
    }
    .index-banner video {
        width: 100%;
        height: 100%;
        object-fit: none;
        position: static;
    }
}
@media (max-width:1200px) {
    .index-banner-title h3{font-size: 24px;}
    .index-banner-title p{ margin: 20px 0 15px; font-size: 48px;}
    .index-banner-title span{  font-size: 14px; }
}

@media (max-width:768px) {
    .index-banner .swiper-slide{background-position: -200px ; }
    
    .index-banner-title h3{font-size: 20px;}
    .index-banner-title p{ font-size: 32px;font-weight: bold;}
    .index-banner-title span{max-width: 360px;}

    .index-banner {
        margin-top: 50px;
    }
    .index-banner video {
        height: 220px;
        object-fit: cover;
    }
}



@keyframes liner {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


.index-banner-scroll{position: absolute; bottom: 25px; left: 50%; z-index: 9; text-align: center; transform: translateX(-50%); }
.index-banner-scroll span{display: inline-block; padding: 15px 10px; border: 2px solid #fff; border-radius: 30px;}
.index-banner-scroll span::before{position: absolute; top: 10px; left: 10px; content: ''; width: 4px; height: 8px; background-color: #fff;border-radius: 30px;}
.index-banner-scroll i{ display: block; color: #fff; animation: curClick 1s infinite;}

@keyframes curClick {
    from {transform: translateY(0);}
    to {transform: translateY(5px);}
}

@keyframes curBig {
    from {transform: scale(0);opacity: 0;}
    to {transform: scale(1);opacity: 1;}
}

/* about */
.index-about{justify-content: space-between; align-items: center;}
.index-about-content{width: 55%; padding-left: 100px;}
.index-about-content>h3{ margin-top: 10px; font-size: 36px;}
.index-about-content>p{ margin-top: 30px; line-height: 30px; font-size: 16px; text-align: justify;}
.index-about-cover {width: 40%; overflow: hidden;}
.index-about-cover li {display: flex;}
.index-about-cover li:first-of-type {margin-bottom: 45px;}
.index-about-cover li .con {margin-left: 25px;}
.index-about-cover li .con em {display: inline-block;font-size: 16px;color: var(--default);font-style: normal;margin-bottom: 12px;font-weight: bold;}
.index-about-cover li .con h3 {font-size: 22px;color: #333333;margin-bottom: 18px;}
.index-about-cover li .con p {font-size: 16px;color: #333333;line-height: 1.5;}
.index-about-cover img{max-width: 100%;}
@media (max-width:1400px) {
    .index-about-content{ padding-left: 50px;}
}
@media (max-width:1200px) {
    .index-about-content{width: 50%; padding-left: 0; }
    .index-about-cover{ width: 45%;}
    .index-about-content>h3{  font-size: 28px;}
    .index-about-content>p{ margin-top: 20px; line-height: 26px;}
    .index-about-cover li:first-of-type {margin-bottom: 20px;}
    .index-about-cover li .con {margin-left: 10px;}
    .index-about-cover li .con h3 {font-size: 18px;margin-bottom: 10px;}
    .index-about-cover li .con p,.index-about-cover li .con em {font-size: 14px;}
}

@media (max-width:768px) {
    .index-about-content{width: 100%;}
    .index-about-cover{margin-top: 35px; width: 100%;}
    .index-about-content>h3{ font-size: 24px;}
    .index-about-content>p{ margin-top: 20px; line-height: 26px; font-size: 14px;}
}


/* core */
.index-core-bg{ position: relative; padding-bottom: 50px; background-image: url(assets/images/main-bg.jpg);}
.index-core-bg::before{position: absolute; top:0; left: 0; content: ''; z-index: 1; width: 100%; height: 80px; background-color: #fff;}
.index-core{position: relative; z-index: 1;}
.index-core > ul.ul > li{padding-bottom: 120px; justify-content: space-between; }
.index-core-title{position: relative; width: 40%; padding-left: 60px; padding-bottom: 220px; display: flex; align-items: flex-end;}
.index-core-title .index-core-content{position: absolute; bottom: -40px; right: 0; width: 115%; background-color: #fff;padding: 30px 25px; }
.index-core-title .index-core-content li { display: block; font-size: 16px; line-height: 30px; overflow: hidden;}

.index-core-cover{width: 60%;}
.index-core-cover img{width: 100%;}

.index-core > ul.ul > li:nth-child(2n){flex-direction: row-reverse;}
.index-core > ul.ul > li:nth-child(2n) .index-core-title .index-core-content{ right: inherit; left: 0;}
.index-core-title .index-core-content:hover{background-color: var(--default);;}
.index-core-title .index-core-content:hover li { color: #fff}
@media (max-width:1200px) {
    .index-core-bg{padding-top: 50px;}
    .index-core-bg::before{display: none;}
}

@media (max-width:960px) {
    .index-core > ul.ul > li{padding-bottom: 80px; justify-content: space-between; }
    .index-core-title{padding-left: 40px;}
    .index-core-title .index-core-content{padding: 20px; }
}

@media (max-width:768px) {
    .index-core > ul.ul > li{padding-bottom: 40px; }
    .index-core-title{margin-top: 25px; width: 100%; padding-left: 0; padding-bottom: 0; display: block; }
    .index-core-title .index-core-content{position: static; width: 100%; background: none;}
    .index-core-title .index-core-content li { margin-top: 15px; font-size: 16px; line-height: 30px;}
    .index-core-cover{width: 100%;}
}
@media (max-width:640px) {
    .index-core-bg{padding-bottom: 0;}
    .index-core > ul.ul > li{padding-bottom: 0; }
    .index-core-title .index-core-content {padding: 25px 0;}
    .index-core-title .index-core-content li{ margin-top: 0; }
    .index-core-title .index-core-content:hover{background: none;}
    .index-core-title .index-core-content:hover li {color: #666;}
}
/* news */
.index-news video {position: relative;z-index: 1; margin-top: 30px;}
.index-news img {max-width: 100%;margin-top: 30px;}
.index-news-bg{ position: relative; padding: 120px 0; background-image: url(assets/images/news-bg.jpg);}
.index-news-bg::before{position: absolute; top:0; left: 0; content: ''; z-index: 1; width: 100%; height: 240px; background-color: #fff;}
.index-news{position: relative; z-index: 1; background-color: #fff;}

.index-news-title{flex: 1;}
.index-news-title>p{margin-top: 35px; line-height: 30px; font-size: 16px;}

.index-news-list{width: 67%; padding-left: 120px;}
.index-news-list ul li{border-bottom: 1px solid #eee;}
.index-news-list ul li .index-news-item{display: flex; padding: 15px 0; line-height: 50px; font-size: 18px;}
.index-news-list ul li .index-news-item span{ padding-right: 65px; font-size: 14px;}
.index-news-list ul li .index-news-item a{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.index-news-list ul li .index-news-item:hover{ padding-left: 25px; padding-right: 25px; background-color: var(--default); box-shadow: 0 13px 10px rgba(10, 79, 144,.4);}
.index-news-list ul li .index-news-item:hover a,
.index-news-list ul li .index-news-item:hover span{color: #fff;}

@media (max-width:1200px) {
    .index-news-bg{ position: relative; padding:50px 0;}
    .index-news-list{width: 72%; padding-left: 50px;}
    .index-news-list ul li .index-news-item span{ padding-right: 25px;}
}

@media (max-width:1000px) {
    .index-news-list ul li .index-news-item span{ display: block; padding-right: 0;}
    .index-news-list ul li .index-news-item{ padding: 15px 0; line-height: 30px; font-size: 18px;}
}

@media (max-width:768px) {
    .index-news-bg{ position: relative; padding:60px 0;}
    .index-news-bg::before{ height: 140px;}
    .index-news-title{flex: auto; width: 100%;}
    .index-news-list{ margin-top: 35px; width: 100%; padding-left: 0;}
    .index-news-list ul li .index-news-item{ font-size: 16px;}
}