@-webkit-keyframes img-scale{
0%{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1);}
to{transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}
@keyframes img-scale{
0%{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1);}
to{transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}

@-webkit-keyframes bg-scale {
	0% {/* background-size: 105% auto */transform: scale(1.1);}
	to { /*background-size: 100% auto */transform: scale(1);}
}
@keyframes bg-scale {
	0% {/* background-size: 105% auto */transform: scale(1.1);}
	to { /*background-size: 100% auto */transform: scale(1);}
}


.h_more a{border: solid 1px #127da8; color: #127da8; line-height:44px; padding-left: 30px; padding-right: 60px; display:inline-block; cursor: pointer; position: relative; transition: 0.5s; margin-top: 3%}
.h_more a:after{ content: ''; position: absolute; right: 30px; width: 16px; height: 100%; top: 0; background: url("../images/jt2.png") no-repeat right center; transition: 0.5s}
.h_more a:hover{ color: #fff; background: #127da8}
.h_more a:hover:after{ right: 20px; background-position: left center}
@media (max-width:768px) {
.h_more a{line-height:36px; padding-left:20px; padding-right:50px;}
}

.ind_title{ padding:4% 0; margin: 0; font-weight:normal;}
.ind_title span{ display: block}
.ind_title span.cn{ color: #fff}
.ind_title span.en{text-transform: uppercase; color: #bbcce7}

@keyframes firstPart {
	0% {bottom: 60px;}
	100% {bottom: 40px;	}
}
@-webkit-keyframes firstPart
{
	0% {bottom: 60px;}
	100% {bottom: 40px;	}
}
.roller { display:none;
	background: url(../images/roller.png) no-repeat;
	width: 36px;
	height: 77px;
	position: absolute;
    display: block;
	bottom: 40px;
	left: 50%;
	margin-left: -18px;
	z-index: 100;
	cursor: pointer;
	animation-name: firstPart;
	animation-duration: 0.8s;
	animation-timing-function: linear;
	animation-delay: 0.3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
	-moz-animation-name: firstPart;
	-moz-animation-duration: 0.8s;
	-moz-animation-timing-function: linear;
	-moz-animation-delay: 0.3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-play-state: running;
	-webkit-animation-name: firstPart;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0.3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	-o-animation-name: firstPart;
	-o-animation-duration: 0.8s;
	-o-animation-timing-function: linear;
	-o-animation-delay: 0.3s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: alternate;
	-o-animation-play-state: running;
}

.index_banner{ position: relative;}

.index_banner .item{}
.index_banner .item a{ position: absolute; width: 100%; height: 100%; }
.index_banner .item a{ z-index: 120;}
.index_banner img{ width: 100%;}
.index_banner .pic{ height: 100%; background: no-repeat center center; background-size: cover}
.index_banner .wap{ display: none}
.index_banner .numbox{ color: #fff; z-index: 100; left: 15%; bottom:30%; position: absolute}
.index_banner .numbox .num{ display: inline-block; float: right}
.index_banner .numbox span{ margin-left: 10px; padding-left: 24px; background: url(../images/home_ban_line.png) no-repeat left}
/* .index_banner .item:not(.slick-current) .pic{ animation-play-state: paused; }
.index_banner .slick-current .pic{ -webkit-animation: bg-scale 5s ease-out forwards; animation: bg-scale 5s ease-out forwards; } */
.index_banner .item .pic{
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
}
.index_banner .slick-current .pic{
     animation: slowScale 6s forwards; 
    -webkit-animation: slowScale 6s forwards;
    -ms-animation: slowScale 6s forwards;
}

.index_banner video{ position: absolute; width: 100%; height: 100%; object-fit: fill; top: 0}
.index_banner .item .slideInfo{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.index_banner .item .slideInfo .auto{ position: relative; height: 100%;}
.index_banner .item .slideInfo .info{ position: absolute; transition: all 0.5s;}

.index_banner .slick-dots{ font-size: 0; width: auto; display: inline-block}
.index_banner .slick-dots li{position: relative; width: 48px; height: 10px;}
.index_banner .slick-dots li:before{ left: 0; position: absolute; content: ''; width: 100%; height: 1px; background: #fff;transition: 0.5s}
.index_banner .slick-dots li:after{ position: absolute; content: ''; left:0; top:-4px; width:8px; height:8px; background: #fff;border-radius:30px;transition: 0.5s}
.index_banner .slick-arrow:not(:hover){ opacity: 0.3}
.index_banner#show_01 .slick-dots li:nth-child(-n+1):before,
.index_banner#show_02 .slick-dots li:nth-child(-n+2):before,
.index_banner#show_03 .slick-dots li:nth-child(-n+3):before,
.index_banner#show_04 .slick-dots li:nth-child(-n+4):before,
.index_banner#show_05 .slick-dots li:nth-child(-n+5):before,
.index_banner#show_06 .slick-dots li:nth-child(-n+6):before{ background:#0a4fba}
.index_banner#show_01 .slick-dots li:nth-child(-n+1):after,
.index_banner#show_02 .slick-dots li:nth-child(-n+2):after,
.index_banner#show_03 .slick-dots li:nth-child(-n+3):after,
.index_banner#show_04 .slick-dots li:nth-child(-n+4):after,
.index_banner#show_05 .slick-dots li:nth-child(-n+5):after,
.index_banner#show_06 .slick-dots li:nth-child(-n+6):after{ background:#0a4fba;box-shadow:0 0 0 4px rgba(10,79,186,0.4)}
.index_banner .slick-dots li:last-child:before{background:none!important}
.index_banner .slick-prev{left:5%;}
.index_banner .slick-next{ right:5%;}

/* .index_banner .slick-current .pic{-webkit-animation: bg-scale 5s ease-out forwards; animation: bg-scale 5s ease-out forwards;} */
.index_banner .slick-current .info{ opacity: 1;}
.index_banner .item .info .ani{transition: all .65s; transform: translateY(30%); opacity: 0;}
.index_banner .slick-current .info .ani{ transform: translateY(0); opacity: 1;}

.index_banner .banner,
.index_banner .slick-list,
.index_banner .slick-track,
.index_banner .item{ height: 100%}

@media (max-width:1024px) {
.index_banner .pc{ display: none}
.index_banner .wap{ display:block}
.index_banner .numbox{ left:3%; bottom:10%; }
.roller{ display: none}
}

@keyframes slowScale {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }

    100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

}

@-webkit-keyframes slowScale {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }
}


.index_about{ position: relative}
.index_about .pic img{ width: 100%;}
.index_about .pic{ height: 100%; background: no-repeat center center; background-size: cover}
.index_about .wap{ display: none}

.index_about .slider ,
.index_about .listbox .slick-list{ height: 100%;}

.index_about .listbox .item{ position: relative; height: 100%;}
.index_about .listbox .item a{ position: absolute; width: 100%; height: 100%}
.index_about .listbox .item .a-video{ z-index: 10;}
.index_about .listbox video{ position: absolute; width: 100%; height: 100%; object-fit: fill}
.index_about .columnbox{ position: absolute; width: 100%; z-index: 100;top: 5%;}
.index_about .titlebox{ z-index: 100; position: absolute; width: 100%; height: 80px; bottom: 0;  background: url(../images/home_about_bg.png) no-repeat center}
.index_about .titlebox:before{ content: ''; position: absolute; bottom:75%; width: 100%; height:1px; background: rgba(255,255,255,0.1)}
.index_about .titlebox:after{ content: ''; position: absolute; bottom: 0; width: 100%; height:70%; background: rgba(255,255,255,0.05)}
.index_about .titlebox .item{ height: 80px; color: #fff; text-align: center}
.index_about .titlebox .item img{ margin-top: -20px; margin-right: 10px;}
.index_about .titlebox .item span{ position: relative; z-index: 2; display: inline-block; padding-top:20px; line-height:40px; }
.index_about .titlebox .item i{ position: absolute; left: 80%; top: 15px; width: 14px; height: 14px; background: #fff; border-radius: 100px; box-shadow: 0 0 0 6px rgba(255,255,255,0.1)}
.index_about .titlebox .item.slick-current i{ background: #2a69ca;box-shadow: 0 0 0 0px rgba(255,255,255,0.1)}
.index_about .titlebox .item.slick-current:before{ content: ''; position: absolute; height: 100%; width: 130%; right: 0; background: url(../images/home_about_bg2.png) no-repeat right}
.index_about .titlebox .item:not(.slick-current) span{ opacity: 0}

.index_about .listbox,
.index_about .listbox .slick-list,
.index_about .listbox .slick-track{ height: 100%}

@media (max-width:1024px) {
.index_about .pc{ display: none}
.index_about .wap{ display:block}
}
@media (max-width:640px) {
.index_about .titlebox{ height: 54px;}
.index_about .titlebox .item{ height: 54px; text-align: left;}
.index_about .titlebox .item.slick-current:before{ background-size:cover}
.index_about .titlebox .item span{ padding-left: 10%; padding-top: 10px}
}

.index_brand { position: relative; overflow: hidden}
.index_brand .infobox,
.index_brand .slick-list,
.index_brand .slick-track{ height: 100%}
.index_brand .infobox{background: no-repeat center bottom; background-size:cover;}
.index_brand .infobox .item{height: 100%; position: inherit; text-align: center;width: 33.333%; position: relative; z-index: 20}
.index_brand .infobox .item .logo{ transition: 0.5s; max-width:50%; margin:auto; transition: 0.5s}
.index_brand .infobox .item .logo span{ display: inline-block; background:  no-repeat center center; background-size: 100%}
.index_brand .infobox .item:not(.show).logo span{ background: none!important}
.index_brand .infobox .item.show .logo img{ opacity: 0}
.index_brand .infobox .txt{position: relative; z-index: 10; transition: 0.5s}
.index_brand .infobox .txt a{ color: #fff}
.index_brand .infobox .more{display: inline-block; padding: 10px 25px; border-radius: 20px}
.index_brand .infobox .show .txt a{ color: #333333;border-radius: 20px; }
.index_brand .infobox .show .more {  background: #234cba; box-shadow: 0 10px 20px rgba(37,70,155,0.3)}
.index_brand .infobox .more_jt{ color: #fff; float: none; font-style: normal;background-image: url(../images/jt3.png)}
.index_brand .infobox .pic{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: no-repeat center bottom; background-size: 100%}
.index_brand .infobox:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height:80%; background: linear-gradient(to bottom, rgba(255,255,255,1) 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%)}
.index_brand .infobox .pic{ display: none}
.index_brand .slick-dots{ position: absolute; width: 100%; bottom: 5%}
.index_brand .bg{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; display: flex;}
.index_brand .bg .item { height: 100%; width: 33.33%; position: static; }
.index_brand .bg img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;--mask: url(../images/index_brand_item_bg.png) no-repeat left center / contain,  linear-gradient(black, black);-webkit-mask: var(--mask); mask: var(--mask); -webkit-mask-composite: xor;  mask-composite: exclude; transition: all 0.5s;-webkit-mask-size: 33.33% 100%;}
.index_brand .bg img#show_0{ --mask: url(../images/index_brand_item_bg.png) no-repeat left center,  linear-gradient(black, black); }
.index_brand .bg img#show_1{ --mask: url(../images/index_brand_item_bg2.png) no-repeat center center,  linear-gradient(black, black);}
.index_brand .bg img#show_2{ --mask: url(../images/index_brand_item_bg3.png) no-repeat right center,  linear-gradient(black, black); }
@media (min-width:768px) {
.index_brand .infobox .show .txt{ padding-bottom: 20%;}
/* .index_brand#show_0 .infobox .item:after{ content: ''; left: 0; top: 0; position: absolute; width: 100%; height: 100%; background: no-repeat center center; background-size:100%; z-index: 2;}
.index_brand#show_0 .infobox:after{ --mask: url(../images/index_brand_item_bg.png) no-repeat left / contain, linear-gradient(black, black);
    -webkit-mask: var(--mask);  mask: var(--mask); -webkit-mask-composite: xor; mask-composite: exclude;} */
/* .index_brand#show_0 .infobox:after{background-image: url("../images/index_brand_bg1.png")}
.index_brand#show_1 .infobox:after{background-image: url("../images/index_brand_bg2.png")}
.index_brand#show_2 .infobox:after{background-image: url("../images/index_brand_bg3.png")} */
}

@media (max-width:1024px) {
.index_brand .infobox .pic.pc{ display: none}
.index_brand .infobox .pic.wap{ display:block}
}
@media (max-width:768px) {
.index_brand .infobox .item{ position: relative;}
.index_brand .infobox .txt{ padding-top:40%}
.index_brand .infobox .pic{background-size: cover}
.index_brand .infobox .pic:before{ content: ''; position: absolute; left: 0; top: 0; width: 100%; height:80%; background: linear-gradient(to bottom, rgba(255,255,255,1) 40%,rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%)}
.index_brand .infobox .item .logo img{ opacity: 0}
.index_brand .infobox .item .txt a{ color: #333333;border-radius: 20px; }
.index_brand .infobox .item .more {  background: #234cba; box-shadow: 0 10px 20px rgba(37,70,155,0.3)}
}

.index_news{ padding-top: 4%; padding-bottom:6%; background: no-repeat center center; background-size: cover}
.index_news .fp-tableCell{ height:90%!important;}
.index_news .item{ line-height:24px; position: relative;transition: 0.5s}
.index_news .item a{  display: block; margin: auto;}
.index_news .item a:not(:hover){color: #fff;}
.index_news .txt{ padding:4% 0}
.index_news .txt p{ margin:4% 0;}
.index_news .pic{border-bottom-right-radius:30px;}
.index_news .pic img{ width: 100%}
.index_news .txt h4{ font-weight: bold}
.index_news .txt time span{ background-image: url(../images/jt3.png)}
.index_news a:hover .txt time span{ background-image: url(../images/jt4.png)}

@media(min-width:768px){
.index_news .list{ margin-left: -1.7%; margin-right: -1.7%;}
.index_news .item a{ width: 90%;}
.index_news .txt{ padding:8% 0}
.index_news .txt h4{line-height: 32px;height: 64px;}
.index_news .txt p{ line-height: 30px; height:60px;}
.index_news .pic span{ padding-bottom:62.824%;}
.index_news .pic img{ display: none}
}
@media(max-width:768px){
.index_news{ padding-left:0; padding-right:0}
.index_news .ind_title{ padding-top: 8%}
}

#hmSlidesBox{ height: 100%; position: relative;}
#hmSlides { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#hmSlides .slide-wrapper { opacity: 0; }
#hmSlides img {display: block; position:absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover;}
#hmSlides canvas { position: absolute; z-index: 1; }
#hmSlidesBox .other{color: #fff;z-index: 100;left: 15%;bottom: 30%; position: absolute;}
#clockDots{font-size: 0; width: auto; display: inline-block;padding: 1% 0; margin-top: 5%;}
#clockDots i{position: relative; width: 48px; height: 10px;display: inline-block; padding: 0 10px; }
#clockDots i:before{ left: 0; position: absolute; content: ''; width: 100%; height: 1px; background: #fff;transition: 0.5s}
#clockDots i:after{ position: absolute; content: ''; left:0; top:-4px; width:8px; height:8px; background: #fff;border-radius:30px;transition: 0.5s}
#clockDots i:last-child:before{background:none!important}
#clockText{ float: right;}
#clockText span{ display: none;}
#clockText span font{ margin-left: 10px; padding-left: 24px; background: url(../images/home_ban_line.png) no-repeat left; display: inline-block;}
#clockText .on{ display: inline-block;}
.hmSlidesBan#show_0 #clockDots i:nth-child(-n+1):before,
.hmSlidesBan#show_1 #clockDots i:nth-child(-n+2):before,
.hmSlidesBan#show_2 #clockDots i:nth-child(-n+3):before,
.hmSlidesBan#show_3 #clockDots i:nth-child(-n+4):before,
.hmSlidesBan#show_4 #clockDots i:nth-child(-n+5):before,
.hmSlidesBan#show_5 #clockDots i:nth-child(-n+6):before{ background:#0a4fba}
.hmSlidesBan#show_0 #clockDots i:nth-child(-n+1):after,
.hmSlidesBan#show_1 #clockDots i:nth-child(-n+2):after,
.hmSlidesBan#show_2 #clockDots i:nth-child(-n+3):after,
.hmSlidesBan#show_3 #clockDots i:nth-child(-n+4):after,
.hmSlidesBan#show_4 #clockDots i:nth-child(-n+5):after,
.hmSlidesBan#show_5 #clockDots i:nth-child(-n+6):after{ background:#0a4fba;box-shadow:0 0 0 4px rgba(10,79,186,0.4)}
.hmSlidesBan .scene-nav{ font-size: 0; line-height: 0; position: absolute;  top: 50%;  width:74px;  height:58px;  -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; outline: none; z-index:100; transition: 0.5s; border:none; background: no-repeat center center; z-index: 100; display: none;}
.hmSlidesBan .scene-nav-prev{left:0; background-image: url(../js/slick/slick-prev-white.png)}
.hmSlidesBan .scene-nav-next{ right:0; background-image: url(../js/slick/slick-next-white.png) }
#slideInfo{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 10; }
#slideInfo .w1400{ position: relative; height: 100%;}
#slideInfo .info{ position: absolute; opacity: 0; }
#slideInfo .info.on{ opacity: 1;}
#slideInfo .info .ani{transition: all .65s; transform: translateY(30%); opacity: 0;}
#slideInfo .info.on .ani{ transform: translateY(0); opacity: 1;}