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

.ibanner{ width:100vw; height:960px; max-height:100vh; position:relative;}
.ibanner .swiper-slide{ display:block; height:100%; background:#fff center no-repeat; background-size:cover; overflow:hidden; position:relative;}
.ibanner .swiper-slide .box{ height:100%; overflow:hidden; position:relative;}
.ibanner .swiper-slide .box .bg{ height:100%; background-size:cover !important; overflow:hidden; position:relative; z-index:1; transition:1s linear 2s; transform:scale(1.1,1.1);}
.ibanner .swiper-slide .box .txt{ width:100%; line-height:1; color:#fff; font-size:30px; text-align:center; letter-spacing:3px; position:absolute; left:0; top:48%; z-index:2; opacity:0; transform:translateY(50%);}
.ibanner .swiper-slide .box .txt b{ display:block; font-size:2.21em;}
.ibanner .swiper-slide .box .txt span{ display:block; padding:1.3em 0 0;}
.ibanner .swiper-slide-active .box .bg,
.ibanner .swiper-slide-duplicate-active .box .bg{ transition:6s linear; transform:scale(1,1);}
.ibanner .swiper-slide-active .box .txt,
.ibanner .swiper-slide-duplicate-active .box .txt{ transition:all ease 1.2s; transition-delay:0.6s; opacity:1; transform:translateY(-50%);}
.ibanner .swiper-pagination{ height:12px; bottom:5%;}
.ibanner .swiper-pagination-bullet{ width:12px; height:12px; background:#fff; border-radius:6px; opacity:0.5; margin:0 14px !important; vertical-align:top;}
.ibanner .swiper-pagination-bullet-active{ width:52px; opacity:1;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ display:none; width:56px; height:56px; border-radius:50%; background-size:auto 36% !important; margin-top:-28px;}
.ibanner .swiper-button-prev{ background:rgba(0,0,0,0.3) url(../images/icons/prev.png) center no-repeat; left:1%;}
.ibanner .swiper-button-next{ background:rgba(0,0,0,0.3) url(../images/icons/next.png) center no-repeat; right:1%;}

.main{ width:auto; overflow:visible; position:relative;}

.ibox{ position:relative; z-index:2;}
.ibox .con{ width:83.34vw; min-width:1200px; margin:0 auto;}
.ibox .con::before,
.ibox .con::after{ content:''; display:block; overflow:hidden; clear:both;}
.ibox h2.title{ display:block; line-height:1; font-size:36px; font-weight:normal; text-align:center; padding:1.75em 0 1em; position:relative;}
.ibox h2.title em{ display:block; color:#333; position:relative; z-index:3;}
.ibox h2.title i{ display:block; width:0.85em; height:4px; background:#e60012; margin:0.33em auto 0; position:relative; z-index:3;}
.ibox a.more{ display:block; width:9em; height:2.85em; line-height:2.85; color:#e60012; font-size:14px; text-align:center; border:1px solid #e60012; overflow:hidden; border-radius:1.5em; transition:all ease 0.4s; margin:0 auto;}
.ibox a.more font{ display:block; color:#e60012; transition:all ease 0.4s;}
.ibox a.more:hover{ color:#fff; background:#e60012;}
.ibox a.more:hover font{ color:#fff; transform:translateY(-100%);}

.box1{ background:url(../images/icons/bg1.jpg) center no-repeat; background-size:cover;}
.box1 .con{ position:relative; z-index:3;}
.box1 h4{ max-width:50%; line-height:2; color:#e60012; font-size:24px; overflow:hidden;}
.box1 .txt{ max-width:50%; line-height:2.375; color:#444; font-size:16px; text-align:justify; overflow:hidden;}
.box1 a.more{ margin:1.5em 0 0;}
.box1 img.pic{ display:block; max-width:39.0625%; max-height:73.65%; position:absolute; right:0; bottom:0; z-index:3;}
.box1 ul.ab{ display:block; max-width:50%; font-size:18px; padding:4.5em 0 0; overflow:hidden;}
.box1 ul.ab li{ display:block; width:28.25%; float:left;}
.box1 ul.ab li a{ display:block; line-height:1; color:#333; text-align:center; overflow:hidden; background:rgba(255,255,255,0.4); background-clip:padding-box; padding:1.77em 0; border:2px solid rgba(255,255,255,0.75); position:relative; transition:all ease 0.4s; margin:0 2em 0 0;}
.box1 ul.ab li a::before{ content:''; display:none; width:100%; height:200%; background:url(../images/icons/mark.png) center no-repeat; background-size:auto 60%; position:absolute; left:0; top:-50%; z-index:1; transition:all ease 0.4s; filter:brightness(0) invert(0); opacity:0.0; transform:translateY(5%);}
.box1 ul.ab li a i{ display:block; width:3em; height:2.2222em; overflow:hidden; position:relative; margin:0 auto 1.166em; transition:all ease 0.4s; position:relative; z-index:3;}
.box1 ul.ab li a i img{ display:block; width:100%; height:100%; transition:all ease 0.4s; transform-origin:right bottom;}
.box1 ul.ab li a i img:first-child{ position:absolute; left:0; top:0; filter:brightness(0) invert(1); transform:rotate(-90deg); transform-origin:left bottom;}
.box1 ul.ab li a span{ display:block; position:relative; z-index:3;}
.box1 ul.ab li a:hover{ color:#fff; background:#e60012; border-color:#e60012;}
.box1 ul.ab li a:hover::before{ opacity:0.075; transform:translateY(0);}
.box1 ul.ab li a:hover img{ transform:rotate(90deg);}
.box1 ul.ab li a:hover img:first-child{ transform:rotate(0deg);}

.box2{ background:url(../images/icons/bg2.jpg) center no-repeat; background-size:cover; padding:0 0 80px;}
.box2 h2.title{ text-align:left; padding-bottom:0; margin-bottom:-1.44em;}
.box2 h2.title i{ margin-left:0;}
.box2 .service{ display:block; font-size:16px; position:relative; padding:80px 0 0;}
.box2 .service .swiper-container{ margin:0 -20px;}
.box2 .service .swiper-slide{ display:block;}
.box2 .service .swiper-slide ul{ display:block; overflow:hidden;}
.box2 .service .swiper-slide ul li{ display:block; width:25%; float:left;}
.box2 .service .swiper-slide ul li .box{ overflow:hidden; background:rgba(255,255,255,0.4); box-shadow:0 0 9px rgba(190,190,190,0.5); position:relative; margin:20px; transition:all ease 0.4s;}
.box2 .service .swiper-slide ul li a{ display:block; line-height:1; text-align:center; overflow:hidden; padding:2.5em 0; transition:all ease 0.4s;}
.box2 .service .swiper-slide ul li a img{ display:block; height:3.5em; margin:0 auto; filter:brightness(0) invert(0.385); transition:all ease 0.4s;}
.box2 .service .swiper-slide ul li a em{ display:block; color:#626262; font-size:1.25em; padding:0.6em 0 0; transition:all ease 0.4s;}
.box2 .service .swiper-slide ul li a span{ display:block; color:#626262; font-size:0.75em; text-transform:uppercase; padding:1.25em 0 0; transition:all ease 0.4s;}
.box2 .service .swiper-slide ul li a.red{ width:100%; background:#e60012; position:absolute; left:0; top:100%;}
.box2 .service .swiper-slide ul li a.red img{ filter:brightness(0) invert(15);}
.box2 .service .swiper-slide ul li a.red em{ color:#fff;}
.box2 .service .swiper-slide ul li a.red span{ color:#fff;}
.box2 .service .swiper-slide ul li .box:hover a.red{ transform:translateY(-100%);}
/*
.box2 .service .swiper-slide ul li a:hover{ background:rgba(255,255,255,0.7); box-shadow:0 0 9px rgba(255,0,0,0.4);}
.box2 .service .swiper-slide ul li a:hover img{ filter:brightness(1) invert(0); transform:translateY(-4px);}
.box2 .service .swiper-slide ul li a:hover em{ color:#e60012; transform:translateY(-4px);}
.box2 .service .swiper-slide ul li a:hover span{ color:#e60012; transform:translateY(-4px);}
*/
.box2 .service .swiper-pagination{ display:block; overflow:hidden; left:auto; right:0; top:0; bottom:auto;}
.box2 .service .swiper-pagination-bullet{ vertical-align:top; width:9.12em; height:2.66em; line-height:2.66; color:#e60012; font-size:1.125em; text-align:center; background:none; border:1px solid #e60012; border-radius:0.5em; margin:0 0 0 1.35em !important; opacity:1; overflow:hidden;}
.box2 .service .swiper-pagination-bullet font{ display:block; color:#e60012; transition:transform ease 0.4s;}
.box2 .service .swiper-pagination-bullet:hover font{ transform:translateY(-100%);}
.box2 .service .swiper-pagination-bullet-active{ color:#fff; background:#e60012;}
.box2 .service .swiper-pagination-bullet-active font{ color:#fff;}

.box3{ background:url(../images/icons/bg3.jpg) center no-repeat; background-size:cover; padding:0 0 80px;}
.box3 ul{ display:flex; justify-content:space-between; flex-wrap:wrap; font-size:18px; overflow:hidden; padding:3em 0; margin:0 5%; position:relative;}
.box3 ul li{ display:block; width:16%; position:relative; z-index:3; margin:0 0 0 6%;}
.box3 ul p{ display:block; height:2em; line-height:2em; color:#e60012; overflow:hidden;}
.box3 ul p.block{ height:1px; opacity:0; margin:-1px 0 0;}
.box3 ul p b{ font-size:2em; margin:0 0.1em 0 0;}
.box3 ul span{ display:block; line-height:1; color:#333; overflow:hidden; padding:1.25em 0 0;}

.box4{ background:url(../images/icons/bg4.jpg) center no-repeat; background-size:cover; padding:0 0 80px;}
.box4 .news{ display:block; font-size:16px; position:relative; padding:0 0 80px;}
.box4 .news .swiper-container{ padding:0 10px; margin:0 -10px;}
.box4 .news .swiper-slide{ display:block; padding:10px 0;}
.box4 .news .swiper-slide .box{ background:#fff; padding:1em; overflow:hidden; box-shadow:0 0 9px rgba(208,208,208,0.6); transition:all ease 0.4s;}
.box4 .news .swiper-slide a.pic{ display:block; overflow:hidden;}
.box4 .news .swiper-slide a.pic img{ display:block; width:100%; transition:all ease 0.4s;}
.box4 .news .swiper-slide a.title{ display:block; line-height:4; color:#333; font-size:1.125em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0.33em 0 0; border-bottom:1px solid #ddd; transition:all ease 0.4s;}
.box4 .news .swiper-slide .txt{ display:block; height:3.5em; line-height:1.75; color:#999; margin:0.875em 0;
	display:-webkit-box;
	display:-moz-box;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}
.box4 .news .swiper-slide span{ display:block; line-height:2.625; color:#999; overflow:hidden; float:left;}
.box4 .news .swiper-slide a.view{ display:block; line-height:2.625; color:#999; overflow:hidden; transition:all ease 0.4s; float:right;}
.box4 .news .swiper-slide:hover .box{ box-shadow:0 0 9px rgba(256,152,152,0.6);}
.box4 .news .swiper-slide:hover a.pic img{ transform:scale(1.05);}
.box4 .news .swiper-slide:hover a.title{ color:#e60012;}
.box4 .news .swiper-slide:hover a.view{ color:#e60012;}
.box4 .news .swiper-pagination{ display:block; height:12px; left:50%; bottom:0; transform:translate(-50%,0);}
.box4 .news .swiper-pagination-bullet{ vertical-align:top; width:12px; height:12px; background:#ccc; border-radius:50%; margin:0 7px !important; opacity:1;}
.box4 .news .swiper-pagination-bullet-active{ background:#e60012;}

.box5{ background:url(../images/icons/bg5.jpg) center no-repeat; background-size:cover; padding:0 0 80px;}
.box5 dl{ width:1600px; display:flex; flex-wrap:wrap; justify-content:center; padding:1% 0; position:relative; margin:0 0 50px calc(50% - 800px); perspective:1200px;}
.box5 dl::before,
.box5 dl::after{ content:''; display:block; overflow:hidden; clear:both;}
.box5 dl dd{ display:block; width:20%; box-sizing:border-box; position:relative;}
.box5 dl dd:nth-child(1){ transform:translate3d(0,0,-25px) rotate3d(0,1,0, 48deg) scale(0.953,1.24);}
.box5 dl dd:nth-child(2){ transform:translate3d(14px,0,25px) rotate3d(0,1,0, 24deg) scale(0.953,1.03);}
.box5 dl dd:nth-child(3){ transform:translate3d(0,0, 0px) rotate3d(0,1,0,  0deg);}
.box5 dl dd:nth-child(4){ transform:translate3d(-14px,0,25px) rotate3d(0,1,0,-24deg) scale(0.953,1.03);}
.box5 dl dd:nth-child(5){ transform:translate3d(0,0,-25px) rotate3d(0,1,0, -48deg) scale(0.953,1.24);}
.box5 dl dd a{ display:block; overflow:hidden; box-shadow:0 0 9px rgba(206,206,206,0.5); position:relative; z-index:999; transition:all ease 0.4s; margin:18px 8px;}
.box5 dl dd img{ display:block; width:100%;}
.box5 dl dd a:hover{ box-shadow:0 0 10px rgba(230,0,18,0.5);}

.box6{ background:#eef6f8; padding:0 0 50px;}
.box6 h2.title img{ display:block; height:1em; margin:0 auto;}
.box6 .txt{ line-height:1.75; color:#00313b; font-size:14px; font-family:Arial; text-align:center;}


@media only screen and (max-width:1440px){
.ibanner{ max-height:720px;}
.ibanner .swiper-slide .box .txt{ font-size:26px; top:51%;}
.ibanner .swiper-pagination-bullet{ width:10px; height:10px; border-radius:5px; margin:0 10px !important;}
.ibanner .swiper-pagination-bullet-active{ width:48px;}

.ibox h2.title{ font-size:34px;}
.ibox a.more{ font-size:15px;}

.box1 .txt{ font-size:15px;}
.box1 img.pic{ max-width:46%; max-height:73.65%;}
.box1 ul.ab{ padding:3em 0 0;}
.box1 ul.ab li{ width:33%;}

.box2 .service{ padding:70px 0 0;}
.box2 .service .swiper-container{ margin:0 -14px;}
.box2 .service .swiper-slide ul li .box{ margin:14px;}

.box3{ padding:0 0 60px;}
.box3 ul{ margin:0;}
.box3 ul li{ width:18%;}

.box5 dl{ transform:scale(0.75); margin-top:-60px; margin-bottom:-20px;}





}

@media only screen and (max-width:768px){
.ibanner{ height:70vw;}
.ibanner .swiper-slide .box .txt{ font-size:14px; top:60%;}
.ibanner .swiper-slide .box .bg{ background-size:auto 120% !important;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ width:30px; height:30px; margin-top:-15px;}
.ibanner .swiper-pagination{ display:none;}

.ibox .con{ width:calc(100% - 32px); min-width:0;}
.ibox h2.title{ font-size:24px; padding:1.5em 0 1em;}
.ibox h2.title i{ margin-top:0.5em;}
.ibox a.more{ font-size:13px; height:2.625em; line-height:2.625; width:8em;}

.box1{ padding:0 0 40px;}
.box1 h4{ max-width:none; font-size:20px;}
.box1 .txt{ max-width:none; font-size:14px; line-height:2;}
.box1 a.more{ margin:1.25em 0 0;}
.box1 ul.ab{ max-width:none; position:relative; z-index:3; font-size:14px; margin:0 -8px; padding:2em 0 0;}
.box1 ul.ab li{ width:33.33%;}
.box1 ul.ab li a{ margin:0 8px; padding:1em 0;}
.box1 ul.ab li a i{ margin-bottom:0.75em;}
.box1 img.pic{ z-index:1; width:96%; max-width:none; opacity:0.2;}

.box2{ padding:0 0 40px;}
.box2 h2.title{ margin-bottom:0; padding-bottom:0.75em; text-align:center;}
.box2 h2.title i{ margin-left:auto;}
.box2 .service{ font-size:14px;}
.box2 .service .swiper-pagination{ width:100%; text-align:center;}
.box2 .service .swiper-pagination-bullet{ font-size:inherit; margin:0 0.5em !important;}
.box2 .service .swiper-container{ margin:0 -6px;}
.box2 .service .swiper-slide ul li{ width:50%;}
.box2 .service .swiper-slide ul li .box{ margin:6px;}
.box2 .service .swiper-slide ul li a{ padding:1em 0.3em 0.9em;}
.box2 .service .swiper-slide ul li a img{ height:2.75em;}
.box2 .service .swiper-slide ul li a em{ font-size:inherit;}
.box2 .service .swiper-slide ul li a span{ padding:0.5em 0 0; line-height:1.2; height:2.4em; font-size:12px; transform:scale(0.9); opacity:0.7;}

.box3{ padding:0 0 40px;}
.box3 ul{ font-size:13px; padding:0;}
.box3 ul li{ width:49%; margin:0; padding:1em 0; text-align:center;}
.box3 ul:nth-child(3){ transform:translateY(-50%); margin-bottom:-6em;}
.box3 ul:nth-child(3) li:nth-child(1){ margin-left:51%;}

.box4{ padding:0 0 40px;}
.box4 .news{ margin-top:-10px; font-size:14px; padding:0 0 40px;}
.box4 .news .swiper-slide .box{ padding:10px;}
.box4 .news .swiper-slide a.title{ font-size:16px; line-height:3;}
.box4 .news .swiper-pagination{ height:10px;}
.box4 .news .swiper-pagination-bullet{ width:10px; height:10px; margin:0 5px !important;}

.box5{ padding:0 0 40px;}
.box5 dl{ width:auto; transform:none; margin:0 -4px 28px; padding:0;}
.box5 dl dd{ transform:none !important; width:100%; display:flex;}
.box5 dl dd a{ margin:4px; width:calc(33.33% - 3px);}

.box6{ padding:0 0 40px;}
.box6 .txt{ font-size:13px;}

}


@media only screen and (min-width:769px){
.ibox h2.title em{ transform:scale(0.9);}
.box2 h2.title em{ transform-origin:left center;}
}

















/**/