@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:#f2f2f2;}
#top .p1{ float:left; height:35px; line-height:35px; font-size:12px; color:#666;}
#top .p2{ float:right; height:35px; line-height:35px; font-size:12px; color:#666;}
#top .p2 a{ color:#666;}
#top .p2 a:after{ content:''; display:inline-block; width:1px; height:10px; background:#666; margin:0 5px;}
#top .p2 a:hover{ color:#f1861b;}

#logo{ padding:20px 0;}
#logo .logo{ float:left; font-size:60px; color:#0e51ba; letter-spacing:4px;}
#logo .tel{ float:right; background:url(../img/tel.png) left no-repeat; padding-left:50px;}
#logo .tel .p1{ font-size:14px; color:#666;}
#logo .tel .p2{ color:#f1861b; font-size:30px; font-weight:600;}

#nav{ background:#16499a;}
#nav a{ float:left; width:calc(100% / 8); height:55px; line-height:55px; color:#fff; font-size:14px; font-weight:600; text-align:center;}
#nav a:hover{ background:#f1861b;}

#product{ padding:40px 0;}
#product .title{ background:url(../img/product_title.png) center no-repeat; width:100%; height:90px; margin-bottom:40px;}
#product .product{ float:left; width:calc(100% / 4 - 28px); margin:5px 14px;}
#product .product img{ width:100%; height:200px;}
#product .product p{ text-align:center; height:70px; line-height:70px;}
#product .product p a{ color:#555;}
#product .product:hover p a{ color:#f1861b;}

#youshi{ background:url(../img/youshi_bg.jpg) no-repeat; padding:40px 0 60px;}
#youshi .title{ text-align:center; color:#fff;}
#youshi .title .p1{ font-size:36px; font-weight:600;}
#youshi .title .p2{ font-size:24px; margin-top:20px;}
#youshi .descript{ margin-top:100px; text-align:center;}
#youshi .descript .p1{ font-size:36px; font-weight:600; background:url(../img/youshi_descript_title.png) center bottom no-repeat; letter-spacing:1px;}
#youshi .descript .p1 b{ color:#0f51bb;}
#youshi .descript .p2{ color:#5a6059; font-size:18px; margin-top:10px;}
#youshi .product{ margin:15px 0;}
#youshi .product .left{ float:left; width:48%;}
#youshi .product .right{ float:right; width:48%;}
#youshi .product .youshi_product{ background:url(../img/youshi_product_icon.png) left top no-repeat; padding-left:80px; position:relative;}
#youshi .product .youshi_product .p1{ font-size:28px; color:#294471; font-weight:600;}
#youshi .product .youshi_product .p2{ color:#294471; font-size:12px; margin-top:5px;}
#youshi .product .youshi_product .p2:after{ content:''; display:block; width:100%; height:2px; border:1px dashed #aaa; margin:15px 0;}
#youshi .product .youshi_product .p3{ font-size:18px; color:#666; line-height:200%;}
#youshi .product .youshi_product .youshi_num{ position:absolute; left:0; top:0; font-size:40px; color:#fff; width:60px; height:50px; line-height:50px; text-align:center; font-weight:600;}

#about{ background:url(../img/about_bg.jpg) center; background-size:cover; height:660px;}
#about .right{ float:right; width:640px; margin-top:110px;}
#about .right .p1{ font-size:24px; letter-spacing:2px; color:#fff;}
#about .right .p2{ margin-top:40px; line-height:200%; color:#fff;}
#about .right .p3{ margin-top:60px;}
#about .right .p3 a{ float:right; width:110px; height:40px; line-height:40px; background:url(../img/about_more_bg.png) right no-repeat #199ce7; color:#fff; padding-right:10px; text-align:center;}

#example{ padding:40px 0 20px;}
#example .product{ float:left; width:calc(100% / 4 - 28px); margin:5px 14px;}
#example .product img{ width:100%; height:200px;}
#example .product p{ text-align:center; height:70px; line-height:70px;}
#example .product p a{ color:#555;}
#example .product:hover p a{ color:#f1861b;}

#index_show{}
#index_show .width{ background:url(../img/index_show.jpg) center no-repeat; background-size:cover; position:relative; height:160px;}
#index_show a{ position:absolute; top:65px; right:40px; width:200px; height:35px; line-height:35px; text-align:center; font-size:20px; color:#fff;}

#news{ padding:40px 0;}
#news .product{ float:left; width:calc(100% / 3 - 22px);}
#news .product_mar{ margin:0 33px;}
#news .product .title{ border-bottom:1px solid #c7cdcf; padding-bottom:15px;}
#news .product .title .p1{ float:left; height:26px; line-height:26px; color:#333; font-size:20px; text-indent:10px; margin-right:5px;}
#news .product .title .p1:before{ content:''; float:left; width:4px; height:24px; background:#146bd1; border-radius:20px;}
#news .product .title .p2{ float:left; height:26px; line-height:26px; color:#666;}
#news .product .title .p3{ float:right; height:26px; line-height:26px;}
#news .product .title .p3 a{ color:#666;}
#news .product img{ height:150px; width:100%; margin:15px 0;}
#news .product .news{ margin-bottom:10px;}
#news .product .news a{ background:url(../img/news_product_icon.png) left no-repeat; padding-left:25px; float:left; color:#666;}
#news .product .news span{ float:right; color:#666;}
#news .product .faq{ margin:5px 0; border-bottom:1px dashed #dce9ee; padding:15px 0;}
#news .product .faq .p1{ background:url(../img/faq_q.png) left no-repeat; padding-left:30px; position:relative;}
#news .product .faq .p1:before{ position:absolute; content:'问'; top:0; left:4px; color:#fff; font-size:14px;}
#news .product .faq .p1 a{ color:#2c2c2c;}
#news .product .faq .p2{ background:url(../img/faq_a.png) left top no-repeat; margin-top:10px; padding-left:30px; overflow: hidden;text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp:2;-webkit-box-orient: vertical; position:relative;}
#news .product .faq .p2:before{ position:absolute; content:'答'; top:0; left:4px; color:#fff; font-size:14px;}
#news .product .title .p3 a:hover{ color:#f1861b;}
#news .product .news a:hover{ color:#f1861b;}
#news .product .faq .p1 a:hover{ color:#f1861b;}

#foot{ background:#16499a; padding:20px 0 40px;}
#foot .nav{ border-bottom:1px solid #fff; text-align:center; margin-bottom:40px;}
#foot .nav a{ display:inline-block; color:#fff; width:120px; height:40px; line-height:40px; position:relative;}
#foot .nav a:after{ position:absolute; content:''; top:20px; left:-4px; width:8px; height:1px; background:#fff;}
#foot .nav .border_none:after{ content:normal;}
#foot .left{ float:left; background:url(../img/foot_tel.png) left 10px no-repeat; padding-left:80px;}
#foot .left .p1{ color:#fff;}
#foot .left .p2{ font-weight:600; font-size:30px; color:#fff; line-height:180%;}
#foot .left .p3{ color:#cecece; font-size:12px;}
#foot .left .p4{ width:220px; height:35px; line-height:35px; text-align:center; background:#F1861B; margin-top:20px; color:#fff; border-radius:4px;}
#foot .right{ float:left; border-left:1px solid #fff; margin-left:40px; padding-left:40px;}
#foot .right p{ line-height:200%; color:#fff; font-size:14px;}
#foot .wx{ float:right;}
#foot .wx img{ width:120px; height:120px;}
#foot .wx p{ text-align:center; font-size:12px; color:#fff; margin-top:5px;}
#foot .service{width: 1200px;margin: 0 auto;}
#foot .service_support{line-height: 60px;color: #fff;font-size: 15px;font-weight: normal;margin-bottom: 20px;text-decoration: none;}


#links{ background:#333; padding:15px 0;}
#links p{ color:#ddd; font-size:14px;}
#links p a{ color:#ddd;}
#links p a:hover{ color:#fff;}

#foot_nav{ display:none;}

@media screen and (max-width: 980px) {
*{-webkit-text-size-adjust:none;}
#box{ height:300px;}
.width{ width:98%;}
#logo .logo{ line-height:59px; font-size:40px;padding-top: 13px;}
#nav a{ width:calc(100% / 7);}
#product .product{ width:calc(100% / 2 - 28px);}
#product .product p{ height:50px; line-height:50px;}
#youshi .title .p1{ font-size:20px;}
#youshi .title .p2{ font-size:20px;}
#youshi .product .left{ width:100%;}
#youshi .product .right{ width:100%;}
#youshi .product .youshi_img{ display:none;}
#youshi .product .youshi_product{ margin-bottom:20px;}
#about{ background:#146bd1; height:auto;}
#about .right{ width:100%; margin:40px 0;}
#example .product{ width:calc(100% / 2 - 28px);}
#index_show{ display:none;}
#news .product_mar{ margin:0;}
#news .product img{ height:200px;}
#news .product{ width:100%; margin:10px 0;}

#logo .tel .p2{
    font-size: 23px;
}






#links{ margin-bottom:50px;}
#foot .nav{ display:none;}
#foot .right{ display:none;}
#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:#16499a; color:#fff; float:left;}
}