.banner-wrapper{ position: relative;}

.home-slides .slick-dots { bottom: 1.5rem; }

.home-slides .slick-dots li { margin-left: .25rem; margin-right: .25rem; }

.home-slides .slick-dots li button { width: 1rem; height: 0.1875rem; background: white; border: 0; }

.home-slides .slick-dots li.slick-active button { background: rgb(125, 199, 120); width: 2rem; }

.home-slides .slick-arrow { transition: all .25s; opacity: 0; color: white; background-color: transparent; }

.home-slides .slick-arrow:before { font-size: 1.4rem; }

.home-slides:hover .slick-arrow { opacity: 1; }

.home-slides .slick-prev { left: 6%; }

.home-slides .slick-next { right: 6%; }



.slides-list, .slides-list li, .bx-wrapper, .bx-viewport { position: relative; height: 100%; z-index: 1; }

.home-slides { height: 100%; position: relative;}

.home-slides .slides-bg { position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background-position: center center; }

.home-video-player video { object-fit: cover; width: 100%; height: 100%; }

/*.home-video-player:before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, .5); }*/



.hb-tips { position: absolute; width: 100%; left: 0; bottom: 5rem;top: 771px; }

.mouse-scroll { display: block; z-index: 20; width: 1.4rem; height: 2.4rem; background: none; border-radius: .7rem; border: 0.125rem rgba(255,255,255,0.5) solid; position: absolute; left: 50%; /*top: 90%;*/ margin-left: -.7rem; }

.mouse-scroll:before { content: ''; position: absolute; top: .25rem; left: .55rem ; width: .3rem; height: .3rem; background: rgba(255,255,255,0.5); border-radius: 100%; -webkit-animation: scrollanimation 2s infinite; -moz-animation: scrollanimation 2s infinite; -ms-animation: scrollanimation 2s infinite; -o-animation: scrollanimation 2s infinite; animation: scrollanimation 2s infinite; }

.mouse-scroll:hover { opacity: .8; }

@media screen and (max-width:1600px){

	.section-3 .text1 {
		margin: 0 5%;
	}

	.hb-tips { top:670px; }

	}



@media screen and (max-width:1024px){



	.hb-tips { position: absolute; width: 100%; left: 0; bottom: 5rem;top:85%; }

	}

@keyframes scrollanimation {

  0% { top: .25rem; opacity: 0; }

  20% { top: .25rem; opacity: 1; }

  60% { top: 1.15rem; opacity: 1; }

  80%,100% { top: 1.15rem; opacity: 0; }

}



.section-1{ padding: 3.875rem 0 0 0 ;  background:#f8f8f8;}

.section-1 h2{ font-size:42px; color: #013E77; list-style: 1.5; font-weight:900;}

.section-1 .text{ position: relative; margin:3.125rem 0 5rem; font-size: 1.25rem; color: #000; line-height: 2.25rem;    font-weight: 200;}

/*.section-1 .text:before{ display: block; content: ""; position: absolute; left: 0; top: 0.9375rem; height: 0.0625rem; width: 3.125rem; background-color: #fff;}*/

.section-1 .tssj-btn{ font-size: 1.5rem; color: #fff; line-height: 1.875rem; padding-right: 5rem; position: relative;} 

.icon-more{ position: absolute; right: 1.25rem; top: 0; width: 1.875rem; height: 1.875rem; background: url(../image/arrows_right.png) no-repeat center; background-size: 1.875rem; }



/*.product .container {

    max-width: 1800px;

	width:100%;

    margin: 0 auto;

}*/

.pro-list li{ float: left;width: calc(25% - 10px);

    margin-left: 5px;

    margin-right: 5px;

    height: 540px;}

.pro-item{ position: relative; overflow: hidden;width: 100%;height: 100%;}

.pro-item .pic{ position: relative; overflow: hidden; font-size: 0;width: 100%;height: 100%;}

.pro-item .pic img{ transition: all 0.3s linear;width: 100%;height: 100%;}

.pro-item .intro{transition: all 0.3s linear; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 12rem 2.5rem 0 2.5rem; box-sizing: border-box; }

.pro-item .intro h3{ font-size: 26px; color: #fff; line-height:3.75rem;font-weight: 700;position: relative; /*margin-bottom: 20px;*/}

/*.pro-item .intro h3:before {

content: "";display: block; bottom:-5px; left:0; position: absolute; width:80px;height: 1px; background: #fff;display: none;

}*/

.pro-item .intro .cont{ margin: 0 auto; opacity: 0; transition: all 0.3s linear;}

.pro-item .intro .cont img{width: 12.5rem;}

.pro-item .intro img{  width: 12.5rem;}

.pro-item .intro p{ font-size:1.25rem; color: #fff; line-height: 1.875rem;    font-weight: 500;}

.pro-item .alink-more{ position: absolute; left:100px; bottom: 2.5rem;  

	transform: translateX(-80px); font-size: 1.5rem; line-height:2rem; 

	color: #fff; /*padding-right: 3.75rem;*/ overflow: hidden; box-sizing: border-box; transition: all 0.3s linear;width: 100%;}

.pro-item:hover .pic img{ transform: scale(1.1);}

.pro-item:hover .intro{ background: rgba(16, 27, 47, .15);}

.pro-item:hover .intro .cont{ opacity: 1;}

.pro-item:hover .alink-more{ bottom: 2.5rem;left: 110px;}

.pro-item:hover .intro h3:before{display: block;}



.section-3{background-color: #f8f8f8;}

.section-3 .cont{}





.section-3 .text1 h2{ font-size: 42px; color: #fff; line-height: 3.75rem; margin-bottom: 2.125rem; font-weight: 900;margin-top: 1rem;}

.section-3 .text1 .intro{ position: relative; 

	color: #ffffff; font-size: 17px;

    line-height: 32px;

    font-weight: 400;}

/*.section-3 .text1 .intro:before{ display: block; content: ""; position: absolute; left: 0; top: 0.9375rem; height: 0.0625rem; width: 3.125rem; background-color: #fff;}*/

.section-3 .text2{ margin-top:7.5rem;  color: #fff; text-align: center; overflow: hidden;}

.section-3 .text2 li{ float: left;/* margin-right: 6.875rem;*/width: 20%;}

.section-3 .text2 strong{ font-size: 3.125rem; font-family: Arial;}

.section-3 .text2 .unit{ font-size: 1rem; font-weight: 500;}

.section-3 .text2 p{ font-size: 1.5rem; line-height: 2rem; margin-top: 1.25rem;}

.section-3 .text3{background:#efefef;padding:60px 0; width: 100%;box-sizing: border-box;}

.section-3 .text3 dt{ width: 22.5rem; text-align: center; font-size: 1.875rem; color: #153552; line-height: 2.5rem; padding: 2.5rem 0; background: url(../image/icon_ghcn.png) no-repeat left 4.375rem top 2.5rem; background-size: 2.5rem;}

.section-3 .text3 dd{ float: left;width: calc(25% - 10px); border-left: 5px solid #efefef;border-right: 5px solid #efefef; height: 100px; text-align: center; padding: 30px 0; }

.section-3 .text3 dd strong{ display: block; font-size: 2.6rem; color: #0766B9; font-weight: 400;position: relative;}

.section-3 .text3 dd .unit{padding:0 5px;display: inline-block; background: #0766B9;color: #fff;font-size: 12px;

 line-height: 14px; border-radius:12px; position: absolute; /*right:30px;*/ width:30px; margin-left:10px;}

/* .section-3 .text3 dd:nth-child(1) h4{color:#0766B9;font-size:30px; line-height: 110px;}*/

.section-3 .text3 dd h4{ font-size: 1rem; color: #153552; line-height: 2.5rem;}

.section-3 .text1{background: url(../image/dqbg02.jpg) no-repeat left; padding:40px 0;background-size: cover;}

.section-3 .text3 .container{background:#fff;}



.section-4{ padding:80px 0; }

.section-4 .title{ font-size: 3rem; color: #013E77; line-height: 1.5; margin-bottom: 1.875rem; font-weight: 900;}

.section-4 .f-bt{ position: relative; font-size: 1.25rem; color: #000; line-height: 1.5; padding-left:4.25rem;    font-weight: 200;}

/*.section-4 .f-bt:before{ display: block; content: ""; position: absolute; left: 0; top: 0.9375rem; height: 0.0625rem; width: 3.125rem; background-color: #555;}*/

.connews{width: calc(100% - 120px);margin: 0 60px;}

.news-list{ margin:60px 0 0 0; position: relative; }

.news-list li{ float: left; width: 32%; margin-right: 2%;}

.news-list li:last-child{ margin-right: 0;}

.news-list .news-item{ border: 0.0625rem solid #f8f8f8; background: #f8f8f8; position: relative; overflow: hidden;}

.news-list .news-item .pic{height: auto;}

.news-list .news-item .pic img{ transition: all 0.3s linear;}
/* .news-list .news-item .pic img{ transition: all 0.3s linear; width: 100%;} */



.news-list .intro{ padding: 1.5625rem 2.1875rem;}

.news-list .intro .more{height: 24px; line-height: 24px;margin-top: 30px;}

.news-list span.time{ color: #000; display: inline-block; font-size:14px;float: right;}

.news-list span.label{display: inline-block;padding:0 10px; background: #0766B9;color: #fff;font-size: 14px;}



.news-list .intro .tit{ font-size:18px;height: 60px;overflow: hidden; color: #000; line-height: 2rem; text-align: justify;height: 4rem;

    overflow: hidden;}

.news-list .intro .txt{ font-size:14px; color: #8F8F8F;margin-top: 10px; line-height:1.5rem;text-align: justify;height: 3rem;

    overflow: hidden;}



.news-list .news-li{ border-bottom: 0.0625rem solid #e3e3ec; padding: 1.5625rem 0;}



.news-list .news-li:hover{ border-bottom: 0.0625rem solid #49b1f9;}

.more-news{ position: absolute; right: 0; bottom: 0; font-size: 1.5rem; color: #000; line-height: 1.875rem; padding-right: 3.75rem; }

.more-news .icon-more{ position: absolute; right: 0; top: 0; width:1.875rem; height: 1.875rem; background: url(../image/arrows_right1.png) no-repeat center; background-size: 1.875rem; }

.news-list .news-item:hover .pic img{ transform: scale(1.1);}



.section-5{ background: url(../image/bg3-5.jpg) no-repeat center; text-align: center;}

.section-5 .bg{ position: absolute; z-index: 0; bottom: 0; right: 0; top: 0; left: 0; background: url(../image/bg3-5.jpg); display: none;}

.section-5 .bg .bg-img{ background-position: 50% 50%;  background-size: 100%; background-repeat: no-repeat;  background-image: url(../image/bg3-5.jpg);  position: fixed; top: 0rem; left: 0rem; width: 118.938rem; height: 72rem; overflow: hidden;  pointer-events: none; margin-left: 0rem; margin-top: -302.22.25rem; visibility: visible; transform: translate3d(0rem, 2.25rem, 0rem);}

.section-5 .cont{ padding: 150px 0 150px; position: relative; z-index: 2; color: #fff;}

.section-5 .cont h2{ font-size: 3rem; color: #fff; margin-bottom: 1.25rem; font-weight: 300}

.section-5 .cont .text{ position: relative;  font-size: 1.25rem; color: #fff; line-height: 2.25rem;}

.footer{ background: #fff;}

.news-nav{}

.news-nav .prev,.news-nav .next{width:50px;bottom:210px; height:50px; display: inline-block; overflow: hidden;}

.news-nav .prev{position: absolute;left:-80px; background:url(../image/arr01.png) center no-repeat;}

.news-nav .next{position: absolute;right:-80px;background:url(../image/arr03.png) center no-repeat;}

.news-nav .prev.active{background:url(../image/arr02.png) center no-repeat;}

.news-nav .next.active{background:url(../image/arr04.png) center no-repeat;}

.section-4 .container{position: relative;}



@media only screen and (max-width:1440px) {

.section-3 .text3 dd h4{ font-size: 1.5rem; color: #153552; line-height: 2.5rem;}

.pro-list li{height: 440px;}

.news-nav .prev{left:-70px;}

.news-nav .next{right:-70px;}

.section-3 .text3 dd strong{font-size: 36px;font-weight: bold; height: 50px; line-height: 50px;}

.section-3 .text3 dd{padding:20px 0;height: 70px;}

.section-3 .text3 dd .unit{font-weight: normal;font-size: 10px;/*right: 20px;*/}

.section-3 .text3 dd h4{font-size: 12px; line-height: 24px; color:#000;}

/*.section-3 .text3 dd:nth-child(1) h4{line-height: 70px;font-size: 24px;}*/

.section-3 .text3{padding:45px 0;}

.section-4 .title{font-size: 42px;color: #013E77;font-weight:900;}

.section-4 .f-bt{font-size: 18px;color: #000;font-weight: 200;}

.section-5 .cont h2{font-size: 42px;font-weight: bold;margin-bottom: 40px;}

.section-5 .cont .text{font-size: 16px; line-height: 32px;}

}

/*.section-5 .cont .text:before{ display: block; content: ""; position: absolute; left: 0; top: 0.9375rem; height: 0.0625rem; width: 3.125rem; background-color: #fff;}*/















.about .ani-line {

	width: 3.5rem;

	position: absolute;

	height: 40px;

	left: 0rem;

	opacity: 1;

}

.about a:hover .ani-line:before {

transition-delay: .35s;

transition-duration: .25s;

}

.about a:hover .ani-line:after {

transition-delay: .1s;

}

.text1 .ani-line {

	width: 3.5rem;

	position: absolute;

	height: 40px;

	left: 0rem;

	opacity: 1;

}

.text1 a:hover .ani-line:before {

transition-delay: .35s;

transition-duration: .25s;

}

.text1 a:hover .ani-line:after {

transition-delay: .1s;

}

.news .ani-line {

	width: 3.5rem;

	position: absolute;

	height: 40px;

	left: 0rem;

	opacity: 1;

}

.news .ani-line:before, .news .ani-line:after {

	background-color:#555;

	top:0.9rem;

}

.news .ani-line:before {

	left: -200%;

	width: 100%;

	z-index: 2;

	background: var(--red);

}

.news a:hover .ani-line:before {

transition-delay: .35s;

transition-duration: .25s;

}

.news a:hover .ani-line:after {

transition-delay: .1s;

}

.shzr .ani-line {

	width: 3.5rem;

	position: absolute;

	height: 1.2rem;

	left: 0rem;

	opacity: 1;

	top: 0.2rem;

}

.shzr a:hover .ani-line:before {

transition-delay: .35s;

transition-duration: .25s;

}

.shzr a:hover .ani-line:after {

transition-delay: .1s;

}

.ani-line {

	display: block;

	width: 100%;

	overflow: hidden;

	height: inherit;

}

.ani-line:before, .ani-line:after {

	content: '';

	position: absolute;

	display: block;

	width: 100%;

 top: 1.5rem;

	height: 1px;

	background-color:#b8b8b8;

	transition: none;

}

.ani-line:before {

	left: -200%;

	width: 100%;

	z-index: 2;

	background: var(--red);

}

.ani-line:after {

	left: 0;

	z-index: 1;

}

/*.ani-line:hover:before, .active>.ani-line:before, a:hover .ani-line:before {

transition: all .25s ease;

	left: 0;

transition-delay: .25s;

transition-duration: .25s;

}

.ani-line:hover:after, .active>.ani-line:after, a:hover .ani-line:after {

transition: all .25s ease;

	left: 100%;

	transition-delay: 0s;

}*/

.active>.ani-line:before, a:hover .ani-line:before {

transition: all .25s ease;

	left: 0;

transition-delay: .25s;

transition-duration: .25s;

}

.active>.ani-line:after, a:hover .ani-line:after {

transition: all .25s ease;

	left: 100%;

	transition-delay: 0s;

}

.pro-item .intro:hover{

	background: linear-gradient(

180deg

,rgba(16,30,55,.5),#0b1b39);

	}

.pro-item .intro .cont1 {

    margin: 20px auto 3rem;

    opacity: 0;

       transition: transform .45s;

	   transform: translateY(100%);

}

.pro-item .intro:hover .cont1{

	opacity: 1;transform: none;

	}

.pro-item .alink-more {

	position: absolute;

	color: var(--gray);

}

.pro-item .alink-more {

	color: var(--gray);

}

.pro-item .alink-more em {

	white-space: nowrap;

	max-width: 0;

	overflow: hidden;

transition: max-width .25s, padding .25s;

	padding-right: 0;

	display:inline-block;

	font-weight: 200;/*vertical-align: text-bottom;*/

}

.pro-item .ani-line:before,.pro-item .ani-line:after {

    content: '';

    position: absolute;

    display: block;

    width: 100%;



    height: 1px;

    background-color: #fff;

    transition: none;

}

.pro-item .ani-line:before {

    left: -200%;

    width: 100%;

    z-index: 2;

    background: var(--red);

}

.pro-item .hsi-title {

        position: relative;

}

.pro-item .with-line .hsi-title{

	    width: 7rem;overflow: hidden;

	}

.page_pc .pro-item:hover .alink-more {

	color: white;

}

.page_pc .pro-item:hover .alink-more em {

	max-width: 8rem;

}



.c-btn {

	color:#5f5f5f;

	font-size:1.2rem;

	text-decoration:none;

	position:relative

}

.c-btn-l {

	font-size: 20px;

    font-weight: 600;

}

.c-btn-white {

	color:#000

}

.c-btn-white:hover {

	color:#00459c

}

.c-btn-white:active, .c-btn-white:focus {

	color:#fff

}

.c-btn-ico {

	position:relative;

	display:inline-block;

	width:26px;

	height:26px;

	/*vertical-align:middle;*/

	    vertical-align: text-top;

	margin-left: 7px;

margin-top: -3px;}

/*.c-btn-ico::before{position:absolute;content:"";display:block;width:100%;height:100%;border-radius:50%;border:1px solid #5f5f5f;opacity:0;z-index:0}.c-btn-ico svg{fill:#5f5f5f;position:absolute;top:0;left:0}*/

	.c-btn-ico svg .circle {

	fill:none;

	stroke:#5f5f5f;

	stroke-width:1px;

	width:100%;

	height:100%;

	-webkit-transform-origin:center;

	-ms-transform-origin:center;

	transform-origin:center

}

.c-btn-ico svg .arrow {

	opacity:1;

	-webkit-transform:translateX(0);

	-ms-transform:translateX(0);

	transform:translateX(0)

}

 .c-btn-ico-white::before {

border-color:#000

}

.c-btn-ico-white svg {

	fill:#000

}

.c-btn-ico-white svg .circle {

	fill:none;

	stroke:#000

}

a:hover .c-btn .c-btn-ico::before {

opacity:.5

}

a:hover .c-btn .c-btn-ico svg .arrow {

	-webkit-animation:arrow 1.5s forwards ease-in-out;

	animation:arrow 1.5s forwards ease-in-out

}

a:hover .c-btn .c-btn-ico svg .circle {

	fill:transparent;

	stroke:#5f5f5f;

	stroke-width:1;

	-webkit-animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1);

	animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1)

}

a:hover .c-btn.c-btn-white .c-btn-ico-white svg .circle {

	fill:transparent;

	stroke:#fff;

	stroke-width:1

}

a.c-btn {

	display:inline-block

}

a.c-btn:hover .c-btn-ico::before {

opacity:.1;

-webkit-animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1);

animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1)

}

a.c-btn:hover .c-btn-ico svg .arrow {

	-webkit-animation:arrow 1.5s forwards ease-in-out;

	animation:arrow 1.5s forwards ease-in-out

}

a.c-btn:hover .c-btn-ico svg .circle {

	fill:transparent;

	stroke:#5f5f5f;

	stroke-width:1;

	-webkit-animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1);

	animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1)

}

a.c-btn-white:hover .c-btn-ico-white::before {

opacity:.2;

-webkit-animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1);

animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1)

}

a.c-btn-white:hover .c-btn-ico-white svg .circle {

	fill:transparent;

	stroke:#fff;

	stroke-width:1

}

.about .c-btn-ico {

	vertical-align:middle;

	margin-top: -3px;

}

.about .c-btn-white {

	color:#5f5f5f

}

.about .c-btn-white:hover {

	color:#5f5f5f

}

.c-btn-white:active, .c-btn-white:focus {

	color:#5f5f5f

}

.about .c-btn-ico-white svg {

	fill: #5f5f5f;

}

.about .c-btn-ico svg .circle{

	stroke-width:3px;

	}

.about .c-btn-ico-white svg .circle {

	fill: none;

	stroke: #5f5f5f;

}

.about a:hover .c-btn-ico-white svg, .about a:hover .c-btn {

	color: #0766B9;

}

.about a:hover .c-btn-ico-white svg {

	fill: #0766B9;

}

.about a:hover .c-btn .c-btn-ico svg .arrow {

	-webkit-animation:arrow 1.5s forwards ease-in-out;

	animation:arrow 1.5s forwards ease-in-out

}

.about a:hover .c-btn .c-btn-ico svg .circle {

	fill:transparent;

	stroke:#0766B9;

	stroke-width:3;

	-webkit-animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1);

	animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1)

}

.about a:hover .c-btn.c-btn-white .c-btn-ico-white svg .circle {

	fill:transparent;

	stroke:#0766B9;

	stroke-width:3

}

a.c-btn {

	display:inline-block

}

.about a.c-btn:hover .c-btn-ico::before {

opacity:.1;

-webkit-animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1);

animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1)

}

.about a.c-btn:hover .c-btn-ico svg .arrow {

	-webkit-animation:arrow 1.5s forwards ease-in-out;

	animation:arrow 1.5s forwards ease-in-out

}

.about a.c-btn:hover .c-btn-ico svg .circle {

	fill:transparent;

	stroke:#0766B9;

	stroke-width:3;

	-webkit-animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1);

	animation:circle 2s forwards cubic-bezier(.215, .61, .355, 1)

}

.about a.c-btn-white:hover .c-btn-ico-white::before {

opacity:.2;

-webkit-animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1);

animation:arrow_bg 2s forwards cubic-bezier(.215, .61, .355, 1)

}

.about a.c-btn-white:hover .c-btn-ico-white svg .circle {

	fill:transparent;

	stroke:#0766B9;

	stroke-width:3

}

 @keyframes arrow_bg {

0% {

opacity:.1

}

100% {

opacity:0

}

}

@keyframes arrow {

0% {

opacity:1;

-webkit-transform:translateX(0);

transform:translateX(0)

}

10% {

opacity:0;

-webkit-transform:translateX(50%);

transform:translateX(50%)

}

25% {

opacity:0;

-webkit-transform:translateX(-50%);

transform:translateX(-50%)

}

40% {

opacity:1;

-webkit-transform:translateX(0);

transform:translateX(0)

}

100% {

opacity:1;

-webkit-transform:translateX(0);

transform:translateX(0)

}

}

@keyframes circle {

0% {

stroke-dasharray:0 300;

-webkit-transform:rotate(0);

transform:rotate(0)

}

10% {

stroke-dasharray:50 100

}

20% {

stroke-dasharray:100 200

}

30% {

stroke-dasharray:150 300

}

40% {

stroke-dasharray:200 300

}

60% {

stroke-dasharray:300 300;

-webkit-transform:rotate(360deg);

transform:rotate(360deg)

}

}

@keyframes SlideIn {

0% {

opacity:0;

-webkit-transform:translateX(300px);

transform:translateX(300px)

}

100% {

opacity:1;

-webkit-transform:translateX(0);

transform:translateX(0)

}

}

@keyframes SlideIn2 {

0% {

opacity:0;

-webkit-transform:translateX(300px);

transform:translateX(300px)

}

100% {

opacity:.3;

-webkit-transform:translateX(0) scale(1);

transform:translateX(0) scale(1)

}

}

@keyframes SlideIn3 {

0% {

opacity:0;

-webkit-transform:translateX(300px);

transform:translateX(300px)

}

100% {

opacity:1;

-webkit-transform:translateX(0) scale(1);

transform:translateX(0) scale(1)

}

}

@keyframes img_anime {

0% {

-webkit-transform:skew(15deg) translateX(-150%);

transform:skew(15deg) translateX(-150%)

}

42.5%, 44.5% {

-webkit-transform:skew(15deg) translateX(-20%);

transform:skew(15deg) translateX(-20%)

}

100% {

-webkit-transform:skew(15deg) translateX(150%);

transform:skew(15deg) translateX(150%)

}

}

@keyframes emergence {

0% {

opacity:0

}

99.9% {

opacity:0

}

100% {

opacity:1

}

}

.section-2 {

	background:#f8f8f8;

	padding-bottom: 60px;

}

.section-2 .c-btn-white {

	color: #fff;

}

.section-2 .c-btn-ico-white svg {

	fill: #fff;

}

.section-2 .c-btn-ico-white::before {

border-color:#fff;

}

.section-2 .c-btn-ico-white svg .circle {

	stroke: #fff;

}

.section-2 .pro-item .alink-more em {

	font-size: 18px;

}

@media only screen and (max-width:1440px) {

.c-btn-ico {

margin-top: 0px;}

.section-1 .text {

font-size: 18px;

    line-height: 40px;

    font-weight: 200;

}

}

.has-mask {

	position: relative;

	display: block;

	overflow: hidden;

}

.image-mask {

	position: absolute;

	z-index: 1;

	background-color: var(--dark);

	width: 100%;

	height: 100%;

	left: 1px;

	top: 0;

	transform: translate3d(100%, 0, 0);

}

@keyframes imageInLeft {

 0% {

visibility: visible;

transform: translate3d(-100%, 0, 0)

}

 10% {

transform: translate3d(calc(-100% + .5rem), 0, 0)

}

 30% {

transform: translate3d(calc(-100% + .5rem), 0, 0)

}

 50% {

transform: translate3d(0, 0, 0)

}

 80% {

transform: translate3d(0, 0, 0)

}

 100% {

transform: translate3d(100%, 0, 0)

}

}

.imageInLeft {

	animation-name: imageInLeft;

animation-duration: .5s;

}



.news .owl-theme .owl-dots {

	display:none!important;

}

.news .owl-carousel .owl-nav .owl-prev, .news .owl-carousel .owl-nav .owl-next {

	width: 50px;

	bottom: 210px;

	height: 50px;

	display: inline-block;

	overflow: hidden;text-indent: -100em;

}

.news .owl-carousel .owl-nav .owl-prev {

	position: absolute;

	left: -80px;

	background: url(../image/arr01.png) center no-repeat;

}

.news .owl-carousel .owl-nav .owl-next {

	position: absolute;

	right: -80px;

	background: url(../image/arr03.png) center no-repeat;

}

.news .owl-carousel .owl-nav .owl-prev.active {

	background:url(../image/arr02.png) center no-repeat;

}

.news .owl-carousel .owl-nav .owl-next.active {

	background:url(../image/arr04.png) center no-repeat;

}

@media only screen and (max-width:1440px) {

.news .owl-carousel .owl-nav .owl-prev {

left:-70px;

}

.news .owl-carousel .owl-nav .owl-next {

right:-70px;

}

}





.flex-row, .flex-sb {

    display: flex;

    justify-content: space-between;

}

.fs-20 {

    font-size: 1rem;

}

.with-line .hsi-title { width: 3.5rem; flex-shrink: 0; height: 1.9rem; }

.with-line .hsi-text { width: calc(100% - 3.5rem); padding-left: 1rem; line-height: 1.9rem; }

.with-line .hsi-title>span { display: block; width: 100%; height: 100%; }

@media only screen and (max-width:1280px) {

.pro-list li {

    height: 400px;

}

.pro-item .intro {

    padding: 3rem 1.5rem 0 1.5rem;

}

}

@media screen and (max-width:1024px){

.section-3 .text3 dd strong {

    font-size: 24px;

}

.section-3 .text3 dd .unit{

	padding-left:0px;}

.news-list .news-item .pic {

    height: 180px;

}

.about .container {

    width: calc(100% - 100px);

    margin: 0 50px;

}

.product .container {

    width: calc(100% - 20px);

    margin: 0 10px;

}

.pro-list li {

    height: 350px;

}

.pro-item .intro {

    padding: 3rem .5rem 0 .5rem;

	background: linear-gradient(

180deg

,rgba(16,30,55,.5),#0b1b39);



}

.pro-item .intro h3 {

    font-size: 18px;



}

.pro-item .intro .cont1{

	opacity: 1;transform: none;

	}

.ys .text1 .container {

    width: calc(100% - 60px);

    margin: 0 30px;

}

	}

@media only screen and (max-width: 768px){

.container {

    width: calc(100% - 100px);

    margin: 0 50px;

}

.section-3 .text3 .container {

    width: calc(100% - 6px);

    margin: 0 3px;

}

.section-3 .text3 dd .unit {

    margin-left: 0;

}

.section-3 .text3 dd h4{ font-weight:300;}

.section-3 .text3 dd {

    float: left;

    width: calc(25% - 2px);

    border-left: 1px solid #efefef;

    border-right: 1px solid #efefef;

}

	.pro-list li {

    height: 300px;

}

	.pro-item .intro h3{ font-size:16px;}

	.pro-item .intro p{    font-size: 12px;}

	.section-2 .pro-item .alink-more em {

    font-size: 12px;

}

}

@media screen and (max-width:450px) {

.about .container {

    width: calc(100% - 20px)!important;

    margin: 0 10px!important;

}

.section-1 h2 {

    font-size: 24px!important;

}

.section-1 .text{

	padding-left: 48px!important;font-size: 16px!important;

	    margin: 2.125rem 0 3rem!important;

	}

.about .c-btn-white {

    margin-left: 48px!important;font-size: 16px!important;

}

.container {

    width: calc(100% - 40px);

    margin: 0 20px;

}

.pro-list li{    width: calc(100% - 10px)!important;    margin-bottom: 10px; height:450px;}

.pro-item .intro .cont1{opacity: 1!important;}

.pro-item .alink-more em{max-width: 100%!important;}

.ys .text1 .container {

    width: calc(100% - 60px)!important;

    margin: 0 30px!important;

}

.section-3 .text1 h2{font-size: 23px!important;}

.section-3 .text1 .intro {

    /* padding-left: 48px!important; */

    font-size: 16px!important;



}

.section-3 .text3 dd{

	width: calc(100% - 10px)!important;

	}

.connews {

    width: calc(100% - 40px)!important;

    margin: 0 20px!important;

}

.section-4 .title {

    font-size: 24px!important;

}

.news .owl-carousel .owl-nav .owl-prev {

    left: -10px!important;

}

.news .owl-carousel .owl-nav .owl-next {

    right: -10px!important;

}

.section-5 .cont h2 {

    font-size: 28px!important;
    text-align: left;
}

}