@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{ background:#f384b8; padding:6px 0;}
#top .left{ float:left; font-size:14px; color:#fff;}
#top .right{ float:right; font-size:14px;}
#top .right a{ color:#fff; display:inline-block; height:14px; line-height:14px; border-left:1px solid #fff; padding:0 10px;}
#top .right .border_none{ border:none;}
#top .right a:hover{ text-decoration:underline;}

#logo .logo{ color:#e82683; font-size:46px; font-weight:600; float:left; height:65px; line-height:65px; margin:15px 0; font-family:'黑体';}
#logo .logo_right{ border-left:1px dashed #ddd; float:left; padding-left:60px; height:65px; line-height:65px; margin:15px 0 15px 60px; font-size:20px; color:#666; font-weight:600;}
#logo .tel{ float:right; background:url(../img/tel.png) top left no-repeat; height:95px; line-height:105px; padding-left:50px; font-size:30px; color:#e82683; font-weight:600; font-family:'黑体';}

#nav{ background:#e82683;}
#nav a{ float:left; height:50px; line-height:50px; color:#fff; width:calc(100% / 9); text-align:center;}
#nav a:hover{ background:#ff8030;}

#product{ padding:40px 0;}
#product .title{ font-size:24px; color:#333; text-align:center;}
#product .descript{ margin:10px 0 40px; font-size:12px; color:#f75c6c; text-align:center; position:relative;}
#product .descript:before{ content:''; position:absolute; height:1px; width:120px; background:#aaa; display:block; top:10px; left:calc(50% - 200px);}
#product .descript:after{ content:''; position:absolute; height:1px; width:120px; background:#aaa; display:block; top:10px; right:calc(50% - 200px);}
#product .product{ float:left; width:calc(100% / 4); text-align:center;}
#product .product img{ width:160px; height:160px; transition:0.3s;}
#product .product p{ font-size:18px; margin:20px 0;}
#product .product:hover img{ transform:rotateZ(360deg);}

#about{ padding:40px 0;}
#about .left{ float:left; width:calc(100% - 560px);}
#about .left .p1{ color:#fef5f9; font-size:60px;}
#about .left .p2{ color:#e82683; font-size:48px; margin:-50px 0 30px;}
#about .left .p3{ font-size:14px; line-height:240%;}
#about .right{ float:right; width:480px;}
#about .right img{ width:100%; height:340px;}

#news{ background:#fef5f9; padding:40px 0;}
#news .left{ float:left; height:450px; width:360px;}
#news .left img{ width:100%; height:100%;}
#news .right{ width:calc(100% - 390px); float:right;}
#news .right .title{ width:200px; height:48px; line-height:48px; text-align:center; background:#f27141; font-size:18px; color:#fff; font-weight:600;}
#news .right .product{ background:#fff; height:44px; line-height:44px; padding:0 15px; border-bottom:1px dashed #eee;}
#news .right .product a{ color:#333;}
#news .right .product span{ float:right; color:#888; font-size:12px;}
#news .right .product a:hover{ color:#ff6010; text-decoration:underline;}

#foot{ background:#252525; padding:60px 0 30px;}
#foot .left{ float:left; width:240px;}
#foot .left .p1{ line-height:200%; font-size:14px; color:#fff;}
#foot .left .p2{ font-size:30px; color:#fff;}
#foot .left .p3{ margin-top:10px; font-size:14px; color:#fff;}
#foot .product{ float:left; border-right:1px solid #2b2b2b; text-align:center; width:calc((100% - 400px) / 5);}
#foot .product .p1{ margin-bottom:15px; color:#fff;}
#foot .product .p2{ font-size:14px; line-height:200%;}
#foot .product .p2 a{ color:rgba(255,255,255,0.3);}
#foot .right{ float:right; width:140px; height:140px;}
#foot .right img{ width:100%; height:100%;}
#foot .product .p2 a:hover{ color:#eee;}

#beian{ border-top:1px solid #2b2b2b; padding:15px 0; background:#252525;}
#beian p{ text-align:center; font-size:14px; color:#777;}
#beian p a{ margin-left:10px; color:#777;}
#beian p a:hover{ color:#fff;}

#links{ padding:10px 0;}
#links p{ font-size:14px; color:#5a5a5a;}
#links p a{ color:#5a5a5a;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#top .right{ display:none;}
#logo .logo{ height:45px; line-height:45px; font-size:30px;}
#logo .logo_right{ height:45px; line-height:45px; margin:15px 0 15px 40px; padding-left:40px; float:right;}
#logo .tel{ display:none;}
#nav .width{ width:100%;}
#nav a{ width:calc(100% / 4);}
#product .descript{ font-size:14px;}
#product .product{ width:calc(100% / 2); margin:15px 0;}
#about .left{ width:100%;}
#about .right{ display:none;}
#news .left{ display:none;}
#news .right{ width:100%;}
#foot .product{ display:none;}
#beian p{ color:#aaa;}
#beian p a{ color:#aaa;}
#links{ margin-bottom:50px;}
#foot_nav{ display:block; position:fixed; bottom:0px; width:100%; left:0px;}
#foot_nav li{ list-style:none;}
#foot_nav li a{ width:calc(100% / 4); text-align:center; height:50px; line-height:50px; background:#e82683; color:#fff; float:left; font-size:18px;}
}