@charset "utf-8"; 
*{margin:0;padding:0;}
a{text-decoration:none;}
img{border:none;}
body{font-family:"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Tahoma,Arial;font-size: 12px;font-weight: normal;   }
ul,li{list-style:none;}
.clear{ margin:0px; padding:0px; height:0px; width:0px; line-height:0px; clear:both;}
input,button,select{ outline:none}
 
.fl{ float:left}
.fr{ float:right}
.wrap{ width:1400px; margin:0 auto}
.w1300{ width:1300px; margin:0 auto}
.w1360{ width:1360px; margin:0 auto}
.w1440{ width:1440px; margin:0 auto}
.wmain{ width:1280px; margin:0 auto}
.cen{ text-align:center}
img{ display:block;}


 
.header{ position:fixed; top:0;left:0; width:100%; height:80px; background-color:rgb(88,181,187,.7); z-index:9}
.header .wrap{ height:100%; display:flex; justify-content:space-between; align-items: center; align-content: center; overflow:hidden;}
.header .h_logo{ width:200px; display:block}
.header .h_menu{ overflow:hidden; display:flex; justify-content:space-between; align-items: center; align-content: center;  }
.header .h_menu a{ font-size:14px; color:#fff; display:block; margin:0px 5px; padding:2px 15px; border-radius:5px;}
.header .h_menu a:hover{ background:#fff; color:#58B5BB}
.header .h_menu a.on{ background:#fff; color:#58B5BB}
.header .h_ico{color:#fff; font-size:18px;}
.header .h_ico i{ margin-left:10px;font-size:22px;}


.banner{ overflow:hidden;  }
.banner .swiper-pagination-fraction{ z-index: 99; bottom: 80px; width: 90px; left: 50%; margin-left: -45px;}
.banner .swiper-pagination-bullet{ width:10px; height:10px; border-radius:10px; background:#666;opacity: .5; margin: 0 3px;  }
.banner .swiper-pagination-bullet-active{ background:#58B5BB;opacity: 1; width: 30px;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets,.ban .swiper-pagination-custom,.ban .swiper-pagination-fraction{ margin-bottom:25px;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px;}
.banner img{object-fit: cover; display: block; max-width: 100%; max-height: 100%;}

 

.indgal{ overflow:hidden; display:flex; justify-content:space-between; align-items: center; align-content: center; margin-top:80px;   }
.indgal a{  width:18%;height:560px; display:block; position:relative; margin:0 20px; color:#fff; overflow:hidden;}
.indgal a img{ object-fit: cover; display: block; max-width: 100%; max-height: 100%;transition: 500ms;}
.indgal a .g_up{ overflow:hidden; position:absolute; top:0; left:0; height:140px; padding:0 10%; width:80%; text-align:left;display:flex;   align-items: center; align-content: center; flex-wrap:wrap;}
.indgal a h1{ font-size:18px; margin-bottom:10px;}
.indgal a p{ font-size:12px; width:100%; margin-bottom:10px;}
.indgal a i{ display:none;}
.indgal a .g_down{ overflow:hidden; position:absolute; bottom:0; left:0; height:140px; padding:0 10%; width:80%; text-align:left; display:flex;   align-items: center; align-content: center; flex-wrap:wrap; }
.indgal a:hover img{ transform:scale(1.1);}
.indgal a:hover .g_up{ background-color:rgb(88,181,187,.9);}
.indgal a:hover .g_down{ background-color:rgb(88,181,187,.9);}
.indgal a:hover i{ display:block; font-size:24px;}



/* 本例子css */
.indcasemu{ overflow:hidden; width:100%;  }
.indcasemu .hd{  position:relative; display:flex; justify-content:space-between; align-items: center; align-content: center; width:80%; padding:0 10%; margin-bottom:2%; }
.indcasemu .hd .indcaseti{ overflow:hidden; width:200px; text-align:left; }
.indcasemu .hd .indcaseti h1{ font-size:36px; color:#333;}
.indcasemu .hd .indcaseti p{ font-size:24px; color:#999;}
.indcasemu .hd ul{ overflow:hidden; display:flex; justify-content:space-between; align-items: center; align-content: center; width:300px;  }
.indcasemu .hd ul li{  cursor:pointer; height:30px; line-height:30px; border-radius:30px; width:100px; text-align:center; border:1px solid #eee; margin-left:20px; }
.indcasemu .hd ul li.on{border:1px solid #58B5BB; color:#58B5BB; }
.indcasemu .bd ul{    }
 

.indcase{ overflow:hidden; }
.indcase .swiper-pagination-fraction{ z-index: 99; bottom: 5%; width: 90px; left: 50%; margin-left: -45px; font-size:20px; color:#fff}
.indcase .swiper-pagination-bullet{ width:10px; height:10px; border-radius:10px; background:#666;opacity: .5; margin: 0 3px;  }
.indcase .swiper-pagination-bullet-active{ background:#e70033;opacity: 1; width: 10px;}
.indcase .swiper-container-horizontal>.swiper-pagination-bullets,.ban .swiper-pagination-custom,.ban .swiper-pagination-fraction{ margin-bottom:25px;}
.indcase .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px;}
.indcase .swiper-slide{ overflow:hidden;}
.indcase .swiper-slide img{ width:100%}
.indcase .swiper-slide p{ height:30px; line-height:30px; font-size:16px; color:#fff; margin-top:5px; letter-spacing:2px;}



.inddesti{ font-size:24px; width:100%; font-size:50px; line-height:60px; color:#333; }
.inddesign{ overflow:hidden; display:flex; justify-content:center; align-items: center; align-content: center; flex-wrap:wrap; padding:0 10%;margin:2% 0; }
.inddesign a{ display:block; width:24%; margin:1px; overflow:hidden;}
.inddesign a img{ display:block; width:100%;transition: 500ms;}
.inddesign a:hover img{ transform:scale(1.1);}

.inddesbtn{ width:200px; height:64px; line-height:64px; border-radius:64px; background:#58B5BB; color:#fff; font-size:22px; text-align:center; margin:0 auto;}
.inddesbtn i{ margin-left:10px;}




.indbox{ width:50%; overflow:hidden; position:relative;}
.indbox img{ object-fit: cover; display: block; max-width: 100%; max-height: 100%;transition: 500ms; position:relative; z-index:1;}
.indbox:hover img{ transform:scale(1.1);}
.indbox .indboxdec{ position:absolute; left:20%; top:50%; margin-top:-85px; text-align:left; width:60%; color:#fff; z-index:9}
.indbox .indboxdec h1{ font-size:60px;}
.indbox .indboxdec h2{ font-size:26px; line-height:30px; margin:10px 0;}
.indbox .indboxdec p{font-size:16px;}
.indbox .indboxdec i{ width: 64px;height: 4px; display:block; background: #58B5BB; margin-top:20px;}
.indbox .decri{ text-align:right;}
.indbox .decri i{ float:right}
.indbox:hover .indboxbg{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgb(0,0,0,.7); z-index:8}
.indlogo{ width:170px; position:absolute; left:50%; margin-left:-85px; top:50%;margin-top: -100px; z-index:10}


.indjoin{ overflow:hidden;}
.indjoin h1{ width:100%; font-size:60px; color:#333;}
.indjoin h2{ width:100%; font-size:16px; color:#999;text-transform: uppercase; letter-spacing:10px; margin:1% 0 0;}
.indjoin .indjoinbtn{width:200px; height:64px; line-height:64px; border-radius:64px; background:#58B5BB; color:#fff; font-size:22px; text-align:center; margin:3% auto;}
.indjoin .join_con{ width:100%; display:flex; justify-content:center; align-items: center; align-content: center; color:#333; font-size:30px;}
.indjoin .join_con .join_wx{ width:48px; height:48px; background:#8AA271; border-radius:50%;display:flex; justify-content:center; align-items: center; margin-right:20px; }
.indjoin .join_con .join_tel{width:48px; height:48px; background:#DBA682; border-radius:50%;display:flex; justify-content:center; align-items: center; margin-right:20px; }
.indjoin .join_con i{color:#fff; font-size:26px;}
.indjoin .join_bot{ height:110px; display:flex; justify-content:space-between; align-items: center; align-content: center;background-color:rgb(255,255,255,.7); margin-top:10%; }
.indjoin .join_bot .join_info{ display:flex; justify-content:space-between; align-items: center; align-content: center; flex-wrap:wrap; padding:0 4%; width:800px}
.indjoin .join_bot .join_info .join_info_up{display:flex; justify-content:space-between; align-items: center; align-content: center; width:100%; height:30px;}
.indjoin .join_bot .join_info .join_info_up .join_li{ font-size:16px; color:#333; }
.indjoin .join_bot .join_info .join_info_up .join_li i{ font-size:22px; margin-right:10px;}
.indjoin .join_bot .join_info .join_info_down{ font-size:12px; color:#999; width:100%; text-align:left; margin-top:10px;}