@charset "utf-8";
body{ margin:0px; padding:0px;}
a{ text-decoration:none;}
ul{ list-style:none; margin:0px; padding:0px;}
p{ margin:0px;}
.width{ width:1200px; margin:0 auto;}
.both{ clear:both;}
a{ color:#000; transition:0.5s;}
#box{ width:100%; position:relative; overflow:hidden; height:500px;}
#box img{ transition:0.3s; position:absolute; top:0px; left:0px; height:100%; width:100%; object-fit:cover;}
.arrow{width:100%;}
.arrow a{ position:absolute; top:45%; background-color:rgba(255,255,255,0.8);border-radius:50%; color:#333; font-size:24px; padding:10px 15px; opacity:0;}
#box:hover .arrow a{ opacity:1;}

#top{ padding:30px 0;}
#top .logo{ float:left;}
#top .logo .p1{ font-size:32px; font-family:'黑体'; font-weight:600; color:#1e50af; letter-spacing:1px;}
#top .logo .p2{ line-height:200%; text-align:center; font-weight:600; color:#1e50af;}
#top .logo_right{ float:left; border-left:1px solid #d9d9d9; padding-left:50px; margin:6px 0 0 80px;}
#top .logo_right .p1{ color:#1e50af; font-size:18px; font-weight:600;}
#top .logo_right .p2{ color:#434343; font-size:12px; line-height:200%; margin-top:10px;}
#top .tel{ float:right; background:url(../png/tel.webp) left no-repeat; padding-left:50px; margin:10px 0;}
#top .tel .p1{ font-size:14px; color:#666;}
#top .tel .p2{ font-weight:600; font-size:24px; color:#1e50af;}

#nav{ background:#1e50af;}
#nav a{ float:left; height:50px; line-height:50px; color:#fff; width:calc(100% / 10); text-align:center;}

#key{ background:#f7f7f7;}
#key .width{ display:flex; justify-content:space-between; align-items:center; height:80px;}
#key .left p{ color:#353535; font-size:14px;}
#key .left p a{ color:#999;}
#key form{ display:flex;}
#key .right .input_index_text{ margin:0; padding:0; border:1px solid #ddd; height:38px; width:325px;}
#key .right .input_index_button{ padding:0; margin:0; border:none; height:40px; width:75px; background:url(../png/seach.webp) center no-repeat #1e50af;}
#key .left p a:hover{ color:#333;}

#product{ padding:40px 0;}
#product .title{ font-size:36px; text-align:center; font-weight:600;}
#product .descript{ font-size:14px; text-align:center; margin:20px 0 0;}
#product .product_type{ text-align:center; margin:30px 0;}
#product .product_type a{ border:1px solid #ccc; padding:10px; color:#666; margin:0 8px;}
#product .left{ float:left; width:592px; position:relative;}
#product .left img{ width:100%; height:496px;}
#product .left .position_text{ position:absolute; bottom:0; left:0; width:100%; padding:10px 0; height:60px; background:rgba(0,0,0,0.6);}
#product .left .position_text .p1{ font-size:20px; font-weight:600; text-indent:30px;}
#product .left .position_text .p1 a{ color:#fff;}
#product .left .position_text .p2{ font-size:14px; color:#fff; line-height:240%; text-indent:30px;}
#product .left .position_text .p3{ position:absolute; right:0; top:0; background:#1e50af; height:100%; line-height:80px; width:80px; text-align:center;}
#product .left .position_text .p3 a{ font-size:14px; color:#fff;}
#product .right{ float:right; width:50%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#product .right .product{ width:calc((100% - 8px) / 2); margin:0 0 8px; position:relative; height:160px;}
#product .right .product img{ width:100%; height:100%;}
#product .right .product p{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center;}
#product .right .product p a{ font-size:14px; color:#fff;}
#product .product_type a:hover{ color:#fff; background:#1e50af; padding:10px 20px;}

#rule_show{ padding:40px 0;}
#rule_show .left{ float:left; width:600px;}
#rule_show .left .img1{ width:100%; height:430px; margin-bottom:20px;}
#rule_show .left .img2{ height:290px; width:calc(50% - 10px); float:left;}
#rule_show .left .img3{ height:290px; width:calc(50% - 10px); float:right;}
#rule_show .right{ float:right; margin-top:50px; width:calc(50% - 45px);}
#rule_show .right .mar_pad{ padding:70px 75px;}
#rule_show .right .mar_pad .title{ display:flex; justify-content:space-between; margin-bottom:40px;}
#rule_show .right .mar_pad .title .p1{ color:#353535; font-weight:600; font-size:36px;}
#rule_show .right .mar_pad .title .p1:after{ content:''; display:block; width:35px; height:5px; background:#1e50af; margin-top:10px;}
#rule_show .right .mar_pad .title .p2{ float:right;}
#rule_show .right .mar_pad .title .p2 a{ display:block; width:62px; height:62px; line-height:62px; text-align:center; color:#fff; background:#1e50af; font-size:36px; font-weight:600;}
#rule_show .right .mar_pad .p3{ font-size:14px; color:#5a5a5a;}
#rule_show .right .mar_pad .p4{ font-size:12px; line-height:200%; color:#bfbfbf; margin-top:15px;}
#rule_show .right img{ width:100%; height:366px;}
#rule_show .right .mar_pad .title .p2 a:hover{ transform:rotate(180deg); border-radius:50%;}

#youshi{ padding-bottom:80px;}
#youshi .youshi_1{ background:url(../jpg/youshi_bg.webp) center no-repeat;}
#youshi .youshi_1 .left{ float:left; width:50%; position:relative;}
#youshi .youshi_1 .left .position_text{ position:absolute; background:rgba(30,80,175,0.8); right:10px; padding:50px 60px; top:100px;}
#youshi .youshi_1 .left .position_text .p1{ font-size:26px; color:#fff;}
#youshi .youshi_1 .left .position_text .p1 b{ font-size:36px; margin-right:10px;}
#youshi .youshi_1 .left .position_text .p1:after{ content:''; display:block; width:35px; height:5px; background:#fff; margin:10px 0 30px;}
#youshi .youshi_1 .left .position_text .p2{ color:#fff; font-size:14px;}
#youshi .youshi_1 .left .position_text .p3{ font-size:12px; color:#bfbfbf; line-height:200%;}
#youshi .youshi_1 .right{ float:right; width:calc(50% - 140px); padding:80px 70px;}
#youshi .product{ padding:20px 0 20px 60px; position:relative;}
#youshi .product .p1{ font-size:26px; font-weight:600; color:#1e50af; margin-bottom:20px; line-height:80px;}
#youshi .product .p2{ font-size:14px; color:#666;}
#youshi .product .num{ position:absolute; top:20px; left:0; font-size:70px; color:#1e50af; font-style:italic; font-weight:600;}
#youshi .youshi_2{ background:url(../jpg/youshi_2bg.webp) center no-repeat;}
#youshi .youshi_2 .left{ float:left; width:50%; padding:40px 0;}
#youshi .youshi_3{ background:url(../jpg/youshi_3bg.webp) center no-repeat;}
#youshi .youshi_3 .right{ float:right; width:calc(50% - 140px); padding:40px 70px;}

#index_show{ background:url(../png/index_show.webp); padding:50px 0;}
#index_show .width{ display:flex; align-items:center; justify-content:space-between;}
#index_show .left .p1{ font-size:20px; color:#ffa71f; font-weight:600;}
#index_show .left .p2{ font-weight:600; color:#fff; font-size:30px; line-height:180%;}
#index_show .left .p3{ color:#737373;}
#index_show .right .p1{ font-size:14px; color:#fff;}
#index_show .right .p2{ font-size:36px; color:#ffa71f; font-weight:600;}

#example{ padding:80px 0;}
#example .title{ text-align:center; font-size:36px; font-weight:600; color:#333;}
#example .title:after{ display:block; content:''; width:35px; height:5px; background:#1e50af; margin:20px auto 40px;}
#example .product_flex{ display:flex; justify-content:space-between; flex-wrap:wrap;}
#example .product{ width:calc((100% - 50px) / 3); height:260px; margin:25px 0; position:relative; overflow:hidden;}
#example .product img{ width:100%; height:100%;}
#example .product p{ position:absolute; top:100%; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; transition:0.3s;}
#example .product p a{ color:#fff; font-size:18px;}
#example .product:hover p{ top:0;}

#about{ margin-top:150px; background:url(../jpg/about_bg.webp); padding-bottom:20px;}
#about .left{ float:left; width:755px; margin-top:-150px;}
#about .left img{ width:100%; height:560px;}
#about .left p{ font-size:14px; color:#fff; line-height:200%; margin-top:10px;}
#about .right{ float:right; width:calc(100% - 805px); margin-top:90px;}
#about .right .p1{ font-weight:600; color:#fff; font-size:36px;}
#about .right .p1:after{ content:''; display:block; width:35px; height:5px; background:#fff; margin:10px 0 50px;}
#about .right .p2{ font-size:14px; color:#fff; margin-bottom:10px;}
#about .right .p3{ font-size:12px; color:#bfbfbf; line-height:200%; width:270px;}
#about .right img{ width:100%; height:240px;}

#news{ padding:80px 0;}
#news .title{ text-align:center; font-size:36px; font-weight:600; color:#333;}
#news .title:after{ content:''; display:block; width:35px; height:5px; background:#1e50af; margin:20px auto 40px;}
#news .left{ float:left; width:560px;}
#news .left img{ width:100%; height:400px;}
#news .right{ float:right; width:calc(100% - 600px);}
#news .right .product{ border-bottom:1px dashed #e5e5e5; padding:25px 0;}
#news .right .product .product_left{ float:left;}
#news .right .product .product_left .p1{ font-size:30px; color:#4a4a4a;}
#news .right .product .product_left .p2{ font-size:14px; color:#767676;}
#news .right .product .product_right{ float:right; width:calc(100% - 110px);}
#news .right .product .product_right .p1{ font-size:14px; color:#666;}
#news .right .product .product_right .p1 a{ color:#666;}
#news .right .product .product_right .p2{ font-size:16px; line-height:200%; color:#666; height:64px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#news .right .product .product_right .p1 a:hover{ color:#000;}

#foot{ background:#0070c9; padding:40px 0 20px;}
#foot .left{ float:left;}
#foot .left .p1{ color:#fff; margin-bottom:10px;}
#foot .left .p2{ background:url(../png/foot_tel.webp) left no-repeat; font-size:26px; color:#fff; padding-left:30px; line-height:200%;}
#foot .left .p3{ background:url(../png/foot_adress.webp) 4px no-repeat; font-size:14px; color:#fff; padding-left:30px; line-height:200%;}
#foot .center{ float:left; margin:0 120px;}
#foot .center img{ width:120px; height:120px;}
#foot .center p{ font-size:14px; color:#fff; text-align:center; line-height:200%;}
#foot .right{}
#foot .right .product{ float:right; width:calc((100% - 600px) / 3);}
#foot .right .product .p1{ color:#fff; margin-bottom:15px;}
#foot .right .product .p1:after{ content:''; display:block; width:20px; height:2px; background:#ffc001; margin-top:15px;}
#foot .right .product .p2{ font-size:14px; line-height:200%;}
#foot .right .product .p2 a{ color:#fff;}

#links{ background:#0070c9; padding:8px 0;}
#links .width{ border-bottom:1px solid #bbb;}
#links p{ font-size:14px; color:#fff; line-height:300%;}
#links p a{ color:#fff;}

#beian{ background:#0070c9; padding:10px 0;}
#beian p{ font-size:14px; color:#fff; line-height:200%;}
#beian p a{ color:#fff;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
}