@charset "UTF-8";

@font-face {
    font-family: "element-icons";
    src: url(../fonts/element-icons.woff) format('woff'), url(../fonts/element-icons.ttf) format('truetype');
}

body {overflow-x: hidden;}
ul {padding:0px;margin:0px;list-style:none;}
a {color:#333; text-decoration:none; transition: all 0.4s;}
a:hover {color:#4294A0; text-decoration:none;}

.fl {float: left;}
.fr {float: right;}
.container {width:1230px; max-width: 1230px; margin-left: auto; margin-bottom: auto;}
.o {overflow: hidden;}
.ptb1{padding-top:1em;padding-bottom:1em}
.ptb2{padding-top:2em;padding-bottom:2em}
.ptb3{padding-top:3em;padding-bottom:3em}
.ptb4{padding-top:4em;padding-bottom:4em}
.ptb5{padding-top:5em;padding-bottom:5em}
.ptb6{padding-top:6em;padding-bottom:6em}
.ptb7{padding-top:7em;padding-bottom:7em}
.mbt1{margin-top:1em}
.mbt2{margin-top:2em}
.mbt3{margin-top:3em}
.mbb1{margin-bottom:1em}
.mbb2{margin-bottom:2em}
.mbb3{margin-bottom:3em}
.pbt1{padding-top:1em}
.pbt2{padding-top:2em}
.pbt3{padding-top:3em}
.pbt4{padding-top:4em}
.pbb1{padding-bottom:1em}
.pbb2{padding-bottom:2em}
.pbb3{padding-bottom:3em}

.comtit {}
.comtit .e {font-size: 42px; color: #c9c8c9;}
.comtit .l {display: flex; padding: 8px 0 12px;}
.comtit .l span {display: inline-block; background-color: #4294A0; height: 4px; width:50px;}
.comtit .l b {display: inline-block; background-color: #4294A0; height: 4px; width:4px; margin-left: 4px;}
.comtit .c {font-size: 28px; color: #333;}


.ibtn a {display: inline-block; background-color: #dbe9f7; line-height: 50px; border-radius: 25px; padding: 0 0 0 22px; width: 146px; font-size: 14px; transition: all 0.4s; box-shadow: 0 2px 8px rgba(0,0,0,.2); color: #4294A0;}
.ibtn span {display: inline-block; width: 50px; line-height: 50px; border-radius: 25px; float: right; background-color: #4294A0; text-align: center; color: #fff; font-size: 20px;}
.ibtn a:hover {width: 152px;}

.img100 {max-width:100%;}


/* index start */
.imenu {position: relative; top: 0;left: 0; right:0; z-index: 100; transition: all 1s; background: transparent; box-shadow:none;}
.imenu .plogo {float: left; padding: 15px 0;}
.imenu .plogo img {height: 65px;}
.imenu .pmul {float: right; margin-top: 30px;}
.imenu .pmul li {float: left; padding: 0 30px;}
.imenu .pmul li a {display: inline-block; color: #333; font-size:17px; border-bottom:2px solid transparent;line-height: 35px;}
.imenu .pmul li a:hover, .imenu .pmul li .active {color: #4294A0; border-bottom-color:#4294A0;}


/* footer */
.footer {background:linear-gradient(180deg, #4294A0 0%, #000 100%);}
.footbox {display: flex; flex-wrap: wrap; color: #fff; padding: 3rem 0;}
.footbox .fcon {width: 20%;}
.footbox .fnav {width: 80%; display: flex; flex-wrap: wrap; justify-content: flex-end;}
.footcopy {padding: 1.8rem 0 1rem; text-align: center; color: #999; border-top: 1px solid #636363;}
.footcopy a {color: #999;}

.footbox .fcon h4 {}
.footbox .fcon h2 {margin-top: 2rem;}
.footbox .fcon p {margin: 3rem 0 4rem;}
.footbox .fcon p a {color: black; display: inline-block; background-color: #fff; border-radius: 3px; padding:10px 32px;}
.footbox .fcon div a {color: #fff; font-size:18px; margin-right: 15px;}

.fnav .it {width: 20%; padding-left: 3%;}
.fnav .it h4 {color: #fff;}
.fnav .it a {color: #d6d5d5; display: block; line-height: 28px; font-size:14px;} 


/************************************ index **************************************/

/* banner */
.ibanner {}
.ibanner .mySwiper {}

@media (min-width:770px){
.mybtn {position: absolute; z-index: 1000; left: 50%; margin-left: -600px; width: 300px; bottom: 12%;}
.mybtn .swiper-button-next:after {content: '';}
.mybtn .swiper-button-prev:after {content: '';}
.mybtn .swiper-button-next, .mybtn .swiper-button-prev {width: auto; height: auto; z-index: 100;}
.mybtn .swiper-button-next span, .mybtn .swiper-button-prev span {display: inline-block; width: 60px; height:60px; border-radius: 30px; background-color: #fff; text-align: center; font-size:17px; padding-top: 17px;}
.mybtn .swiper-button-next {}
.mybtn .swiper-button-prev {}
.mybtn .swiper-button-next:hover span, .mybtn .swiper-button-prev:hover span {background-color: #4294A0; color: #fff}
.mybtn .swiper-pagination {bottom: -14px;}
.mybtn .swiper-pagination-bullet {background-color: #fff; transition: all 0.4s;}
.mybtn .swiper-pagination-bullet-active {width: 10px; height:10px; border-radius: 6px;}
}

/* index-yewufanwei */
.isolu {}

.iprobox {position:relative; margin-top: 1.8rem;}
.iprobox .proswiper {overflow:hidden;}
.iprobox .swiper-button-next, .iprobox .swiper-button-prev {background-color:#f0f0f0; width:60px; height:60px; border-radius:50%;}
.iprobox .swiper-button-next:after, .iprobox .swiper-button-prev:after {font-size:18px;}
.iprobox .swiper-button-next {top:-65px;}
.iprobox .swiper-button-prev {top:-65px; left:auto; right:80px;}
.iprobox .swiper-button-next:hover, .iprobox .swiper-button-prev:hover {
    background-image: linear-gradient(90deg, #4294A0, #81e3f1);  color: :#fff;
}


/* .iprobox {display: flex; justify-content: space-between;} */
.iprobox .item {border:1px solid #eee; border-radius:5px; overflow: hidden; transition: all 0.4s;}
/* .iprobox .item:nth-child(2) {margin:0 25px;} */
.iprobox .item .img {height:250px; overflow:hidden;}
.iprobox .item .img img {max-width: 100%;}
.iprobox .item .tex {padding:15px 15px;}
.iprobox .item .tex .blk {width: 12px; height:12px; background-color: #4294A0;}
.iprobox .item .tex h3 {font-size: 22px; font-weight: bold; margin-top:10px;}
.iprobox .item .tex h3 span {font-size: 12px; color:#b9b9b9; margin-left: 15px;}
.iprobox .item .des {font-size: 14px; line-height:24px; text-align: justify; /*display: flex; justify-content: space-between;*/}
.iprobox .item .des span {color:#b9b9b9;}
.iprobox .item .des .num3 {width: 1px; background-color:#eee; margin:13px 0;}
.iprobox .item .des .num1 {padding-right: 30px;}
.iprobox .item .des h5 {margin-bottom: 5px; margin-top: 5px;}
.iprobox .item:hover {box-shadow: 0 0 15px rgba(0,0,0,.1);}

.isolu .ibtn {padding-top:3rem;}


/* index-about */
.iabout {background: url(../img/bg2.jpg) no-repeat center center / cover;}
.iabout .container {position: relative;}

.iabinfo {width: 45%; padding: 3.5rem 0;}
.iabinfo .t {font-size: 26px; color: #4294A0;}
.iabinfo .c {font-size: 16px; color: #999; margin: 3rem 0; text-align: justify; line-height: 34px;}
.iabinfo .ibtn {}

.iabnumbox {position: absolute; z-index: 100; width: 100%; height: 470px; left:50%; top:15%; background: url(../img/about_img@2x.jpg) no-repeat top left / cover;}
.iabnum {position: relative; width: 100%; height: 100%;}
.iabnum:after {background: linear-gradient(180deg, rgba(0,146,212,0) 40%, #000 100%); opacity: 1; position: absolute;top: 0;right: 0;bottom: 0;left: 0;content: '';}
.iabnum ul {position: absolute; bottom: 10%; left: 0; z-index: 1000; width: 100%;}
.iabnum ul li {float: left; margin-left: 6%; color: #fff;}
.iabnum ul li P {}
.iabnum ul li div {font-size: 20px;}
.iabnum ul li span {font-size: 30px; margin-right: 10px;}


/* index-news */
.inews {}
.newbox {display: flex; justify-content: space-between;}
.newbox .newthumb {width: 40%;}
.newbox .newitem {width: 60%; padding-left: 3%;}

.newbox .thumb {display: none;}
.newbox .thumb img {max-width:100%; border-radius:10px;}
.newbox .thumb.active {display: block;}

.newitem li {margin-bottom: 12px;}
.newitem li a:after {position:absolute;content:"";width:10px;height:10px;background:#4294A0;transform:rotate(45deg);top:50%; left:-5px; margin-top:-5px;opacity: 0;}
.newitem li a {display: flex; justify-content: space-between; background-color: #f6f6f6; padding:15px 15px 15px 5px; border-radius:8px; position: relative;}
.newitem li .time {text-align: center; padding: 0 10px; width:14%;}
.newitem li .time h5 {font-size:25px; color:#999; margin-bottom: 0; margin-top: 5px;}
.newitem li .time p {font-size:12px; color:#999;}
.newitem li .text {width:86%;}
.newitem li .text h4 {font-size:16px; color:#333; font-weight: bold; margin-top:5px;}
.newitem li .text p {font-size:12px; color:#aaa;}
.newitem li p {margin-bottom: 0;}
.newitem li a:hover {background-color: #4294A0;}
.newitem li a:hover * {color:#fff;}
.newitem li:hover a:after, .newitem li.active a:after {opacity: 1;}
.newitem li.active a * {color:#fff;}
.newitem li.active a {background-color: #4294A0;}



/************************************ page **************************************/

.s_banner {position: relative; text-align:center; height: 500px; overflow: hidden;}
.s_banner img {display:inline-block; opacity:0;}

.su_btn {position: absolute; top: 50%; text-align: center; width: 100%; z-index: 100; margin-top:-40px;}
.su_btn a {display:inline-block; margin: 0 10px; background-color:#008cf8; color: #fff; padding: 8px 20px; border-radius: 15px;}
.su_btn h2 {color: #fff; font-size: 46px; margin-bottom: 25px; letter-spacing: 0.3em;     font-weight: 400;}
/* .s_banner .su_btn {display: none;} */


/* Page local */
.su_fix {position: absolute; z-index: 100; width: 100%; bottom: 0; background-color: rgba(0,0,0,0.3);}
.su_nav span {float:left; display:inline-block;}
.su_nav {text-align: left; color:#fff;}
.su_nav a {color:#fff; line-height: 46px; display: inline-block; padding: 0 5px;}

.su_fixbot {position: absolute; z-index: 100; width: 100%; bottom: 0; background-color: rgba(0,0,0,0.7);}
.sux_nav {display: flex; flex-wrap: wrap; }
.sux_nav li {text-align: center; /*width:15%;*/ border-right:1px solid #000;}
.sux_nav li a {display: block; line-height: 48px; font-size: 18px; padding:0 25px; color: #fff;}
.sux_nav li a.active, .sux_nav li a:hover {color: #fff; 
    background-image: linear-gradient(90deg, #4294A0, #4294A0);
}


/* Page about  */
.main_con {}
.mainc {}
.mainc img {max-width: 100%;}
.mainc p {line-height: 26px;}

.listpage {text-align: center;}


/* page news */
.newslist {}
.newslist li {border-bottom:1px #ccc solid; overflow: hidden; padding:18px 18px; transition: all 0.5s;}
.newslist li p {font-size:14px; text-indent: 2em; line-height: 26px;}
/* .newslist li:first-child {padding-top: 0;} */
.newslist li:hover {box-shadow: 0 2px 15px rgba(0,0,0,.35);}
.newslist .pic {width:180px; height:120px; overflow: hidden; border:1px solid #eee; float:left; margin-right:2rem;}
.newslist .pic img {max-width:100%;}            
.newslist .con h4 a {}
.newslist .con h5 a:hover {color:#4294A0;}
.newslist .con span {float:right; font-size:13px;}
.newslist a:hover {text-decoration:underline;}
.newslist .con h5 {text-align: right;}


.pShow {}
.pShow .container {}
.pShow .newleft {width:74%; padding-bottom: 2rem;}
.pShow .newright {width: 25%; padding-top: 1rem;}
.pShow .newleft, .pShow .newright{background:#fff; padding-left:15px; padding-right: 15px;}

.nl-title h3{color:#333}
.nl-title h3 .btn{float:right;background:0 0;border:1px solid #333;border-radius:0;color:#000;padding-top:3px;padding-bottom:5px}
.nl-title h3 .btn:hover{background:#000;color:#fff}
.nl-title span{display:inline-block;padding:0 10px;color:#a3afb7}
.nl-content{padding-top:10px;padding-bottom:10px;line-height:2}
.nl-content img{display:block;max-width:100%;margin-left:auto;margin-right:auto}
.nl-foot .nextpage,.nl-foot .prevpage{padding-left:0!important;padding-right:0!important}
.nl-foot a{display:inline-block;border:1px solid #eee;border-radius:20px;padding:8px 15px 8px; font-size:14px;}
.nl-foot a:hover{border-color:#085ca9;color:#085ca9}
.nl-foot .prevpage{text-align:left}
.nl-foot .nextpage{text-align:right}

.newright .rlist2 li {border-color:#fff;padding:5px 0}
.newright hr{margin-bottom:0;margin-top:5px}
.newright .rcase li{border-color:#fff;text-align:center;padding:0;transition:all .3s;margin-top:15px}
.newright .rcase li p{padding-top:6px;margin-bottom:0}
.newright .rcase li:hover{border-color:#085ca9;padding:10px}
.newright .rlist2 .active a {color: #fff;}

/* pro_box */
.pro_box {}

.pro_box .pl {width: 20%;}
.pro_box .pr {width: 79%;}

.prolist {}
.prolist .item {border:1px solid #eee; border-radius:5px; margin-bottom: 30px; overflow: hidden; transition: all 0.4s;}
.prolist .item .img {overflow: hidden; height: 280px;}
.prolist .item .img img {width: 100%; transition: all 0.4s; max-height: 100%;}
.prolist .item .tex {padding:15px 15px;}
.prolist .item .tex .blk {width: 12px; height:12px; background-color: #4294A0;}
.prolist .item .tex h3 {font-size: 22px; font-weight: bold; margin-top:10px; margin-bottom: 0;}
.prolist .item .tex h3 span {font-size: 12px; color:#b9b9b9; margin-left: 15px;}
.prolist .item .des {font-size: 14px; line-height:24px; text-align: justify; /*display: flex; justify-content: space-between;*/}
.prolist .item .des span {color:#b9b9b9;}
.prolist .item .des .num3 {width: 1px; background-color:#eee; margin:13px 0;}
.prolist .item .des .num1 {padding-right: 30px;}
.prolist .item .des h5 {margin-bottom: 5px; margin-top: 5px;}
.prolist .item:hover {box-shadow: 0 3px 15px rgba(0,0,0,.3);}
.prolist .item:hover .img img{transform: scale( 1.1 )}

.list-group-item.active {
	background-image: linear-gradient(90deg, #4294A0, #81e3f1);
}

/* 产品介绍页 */
.proc_box {display: flex; flex-wrap: wrap; padding-top:3rem;}
.proc_box .stright {width: 50%;}
.proc_box .stleft {width: 50%; padding-left: 5%;}
.proc_box .stleft p {font-size:14px; line-height: 20px; text-align:justify;}
.proc_box .sleft .sidenav {box-shadow: 0 5px 20px rgba(0,0,0,0.1); padding: 10px 0 10px 15px;}
.proc_box .stright img {border-radius: 5px; max-width: 100%;}
.proc_box .st_imgmore img {border-radius: 5px; max-width: 100%;}

.proc_box .jsthumb .swiper-slide {text-align:center;}

.prodetail .t {background:#f6f6f6; overflow: hidden;}
.prodetail .t span {display:inline-block; padding:10px 20px 8px; width:17%; font-size: 18px; color:#fff; font-weight: bold; border-radius: 15px 0 15px 0;
    background-image: linear-gradient(90deg, #4294A0, #81e3f1);
}
.pro_text {padding: 15px;}
.pro_text img {max-width: 100%;}


/* contact */
.conleft {width: 45%;}
.conright {width: 50%;}
.conleft h1 {color: #DBDBDB;}
.conleft h2 {}
.conleft div {padding-top: 2rem;}

.tdtext {}
.tdtext p {line-height: 26px; text-align:justify;}
.tdtext img {max-width:100%;}

.formbox {}
.formbox form {width: 100%; margin:0 auto; display: flex; flex-wrap: wrap; }
.formbox .fm {width: 50%; margin-top: 2rem; padding: 0 30px;}
.formbox .frtext {padding: 20px 15px 0; width: 100%;}
.formbox form p {width: 100%; padding-top: 28px;}
.formbox .input-lg {font-size: 14px;}
.formbox form p button {width: 15%;}