@charset "utf-8";
/* CSS Document */

.main{ width:auto;}
.main .attr{ width:1400px; overflow:visible;}

.about1{ padding:0 0 80px;}
.about1 .flex{ display:flex; align-items:flex-start;}
.about1 .video{ width:66.6%; height:524px; overflow:hidden; position:relative; margin:0 44px 0 0; flex-shrink:0;}
.about1 .video video{ display:block; width:100%; height:100%; background:#000;}
.about1 .video .poster{ width:100%; height:100%; background:#000; position:absolute; left:0; top:0; z-index:9;}
.about1 .video .poster em{ display:block; width:72px; height:72px; position:absolute; left:50%; top:50%; z-index:9; transform:translate(-50%,-50%); cursor:pointer;}
.about1 .video .poster em::before,
.about1 .video .poster em::after{ content:''; display:none; width:100%; height:100%; background:rgba(255,255,255,0.21); border-radius:50%; position:absolute; top:0; left:0; z-index:1; animation:playBtn 2s linear infinite; opacity:0;}
.about1 .video .poster em::after{ animation-delay:1s;}
.about1 .video .poster em i{ display:block; width:100%; height:100%; background:#000 url(../images/icons/video.png) center no-repeat; background-size:contain; border-radius:50%; position:relative; z-index:9; cursor:pointer;}
@keyframes playBtn{
	0%{ opacity:0; transform:scale(1);}
	20%{ opacity:1;}
	80%{ opacity:1;}
	100%{ opacity:0; transform:scale(2.2);}
}
.about1 .video .poster img{ display:block; width:100%; height:100%; object-fit:cover;}
.about1 .box{ flex-shrink:auto; font-size:16px;}
.about1 h4{ display:block; line-height:1.8; color:#333; font-size:1.25em; padding:0.5em 0 0;}
.about1 .txt{ line-height:1.75; color:#333; text-align:justify; overflow:hidden; padding:1.5em 0 0;}

.about1 ul{ display:block; overflow:hidden; margin:0 -14px; padding:60px 0 0;}
.about1 ul li{ display:block; width:25%; float:left;}
.about1 ul li a{ display:block; line-height:1; font-size:16px; text-align:center; background:#eef1f7; padding:24px 0 30px; border-radius:10px; margin:0 14px;}
.about1 ul li a img{ display:block; height:2.625em; padding:5px 0; margin:0 auto;}
.about1 ul li a em{ display:block; line-height:2.625; color:#333; font-weight:bold;}
.about1 ul li a p{ display:block; line-height:1.75; color:#666; font-size:12px; padding:0 5em; text-transform:uppercase;}

.about2{ background:url(../images/icons/ab2.jpg) center no-repeat; background-size:cover; padding:0 0 90px;}
.about2 .attr h2.title em{ color:#fff;}
.about2 ul{ display:block; font-size:15px; overflow:hidden; margin:0 -1em;}
.about2 ul li{ display:block; width:33.33%; float:left;}
.about2 ul li .box{ display:block; text-align:center; background:#fff; padding:1em; overflow:hidden; border-radius:0.8em; margin:0 1em;}
.about2 ul li i{ display:block; overflow:hidden; border-radius:4px;}
.about2 ul li img{ display:block; width:100%; transition:all ease 0.4s;}
.about2 ul li span{ display:block; line-height:2.5; color:#333; font-size:1.2em; font-weight:bold; overflow:hidden; padding:0.75em 0 0.125em; transition:all ease 0.4s;}
.about2 ul li .txt{ display:block; height:6.4em; line-height:1.6; color:#333; overflow:hidden; margin:0 0 0.75em;}
.about2 ul li .box:hover img{ transform:scale(1.1);}
.about2 ul li .box:hover span{ color:#e60012;}

.about3{ padding:0 0 80px;}
.about3 ul{ display:block; font-size:15px; overflow:hidden; margin:0 -8px;}
.about3 ul li{ display:block; width:25%; float:left;}
.about3 ul li a{ display:block; overflow:hidden; border:1px solid #eaeaea; margin:0 8px; transition:all ease 0.4s;}
.about3 ul li a img{ display:block; width:100%; transition:all ease 0.4s;}
.about3 ul li a:hover{ border-color:#e60012;}
.about3 ul li a:hover img{ transform:scale(1.1);}


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

.main .attr{ width:1200px;}

.about1 .video{ width:48%; height:384px;}
.about1 .txt{ -webkit-line-clamp:11; max-height:19.25em;}
.about1 ul li a p{ padding:0 2em;}

.about2 ul li .txt{ height:8em;}

}

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

.main .attr{ width:calc(100% - 30px);}

.about1{ padding:0 0 30px;}
.about1 .flex{ display:block;}
.about1 .video{ width:auto; height:auto; margin:0;}
.about1 .video .poster em{ transform:translate(-50%,-50%) scale(0.6);}
.about1 .box{ font-size:14px;}
.about1 h4{ padding:1em 0 0;}
.about1 .txt{ max-height:none; -webkit-line-clamp:99; text-align:left; padding:0.5em 0 0;}
.about1 ul{ padding:20px 0 0; margin:0 -6px;}
.about1 ul li{ width:50%;}
.about1 ul li a{ font-size:14px; margin:0 6px 12px; padding:12px 0 12px;}
.about1 ul li a img{ padding:8px 0 4px; height:2.5em;}
.about1 ul li a p{ padding:0 0em; font-size:12px; line-height:1.5; letter-spacing:-0.1px;}

.about2{ padding:0 0 40px;}
.about2 ul{ font-size:13px;}
.about2 ul li{ width:100%;}
.about2 ul li .box{ margin:0 1em 1em;}
.about2 ul li .txt{ height:auto;}

.about3{ padding:0 0 40px;}
.about3 ul{ margin:0 -4px;}
.about3 ul li{ width:50%;}
.about3 ul li a{ margin:0 4px 8px;}

}





/**/