@charset "utf-8";

.margin{margin: 0 auto;}


/*1024px*/
@media (min-width:1024px) {

/* --- 公用样式 --- */
.pc{display:block;}
.wap{display:none;}
.wrap{max-width:1200px; margin:0 auto;}
.flex{display: flex; align-items: center; flex-wrap: wrap;}



/* --- header --- */
.page-header{height: 126px;}
.page-header .wrap{height: 100%;}


/* --- logo --- */
.page-logo .text{margin-left: 20px;}


/* --- contact --- */
.page-contact{margin-left: auto;}
.page-contact .icon{margin-right: 10px;}
.page-contact .tel h3{font-size: 24px; color: #B02923; font-family: din; margin-bottom: 5px;}


/* --- nav --- */
.page-nav{height: 56px; background: linear-gradient(to bottom, #DB3A37, #FF4646); }
.page-nav li{width: 150px; text-align: center; position: relative; line-height: 56px;}
.page-nav li::after{content: ""; right: 0; top:35%; background: #053250; opacity: .2; height: 18px; position: absolute; width: 1px;}

/* a */
.page-nav li a{color: #fff; font-size: 16px; display: block; transition: all .3s; }
.page-nav li a:hover{background: linear-gradient(to bottom, #212121, #403E3E); height: 56px; line-height: 56px;}

/* active */
.page-nav li a.active{background: linear-gradient(to bottom, #212121, #403E3E); height: 56px; line-height: 56px;}


/* --- 分页 --- */
.page-showpage{margin-top:50px; margin-bottom:50px; text-align:center; display: flex; }
.page-showpage a{border:1px solid #efefef; padding:6px 15px; border-radius:4px; margin-left:5px; margin-right:5px;}
.page-showpage a.now{ background:#FF4646; color:#fff; border:1px solid #FF4646; }
.page-showpage a:hover{ background:#FF4646; color:#fff; border:1px solid #FF4646; }



/* --- column --- */
.page-column{text-align: center; padding: 88px 0 50px 0; }
.page-column h2{font-size: 32px; font-weight: bolder; margin-bottom: 5px;}
.page-column .dep{font-size: 16px; opacity: .2; font-family: din; text-transform: uppercase;} 



/* --- more --- */
.page-more{width: 160px; height: 56px; border: 1px solid #efefef; border-radius: 100px; justify-content: center; font-size: 16px; }
.page-more:hover,.page-more.active{background: #FF4646; color: #fff; border: 1px solid #FF4646; }
.page-more:hover a{color: #fff;}



/* --- footer --- */
.page-footer{text-align: center; background: #212121; color: #666; height: 100px; line-height: 100px; margin-top: 80px; } 



/* --- qrcode --- */
.page-qrcode{position: fixed; right: 30px; bottom: 150px; background: #fff; border-radius: 8px; padding: 8px; border: 1px solid #efefef; }
.page-qrcode .pic {padding: 8px;}
.page-qrcode .pic img{width: 150px;}
.page-qrcode .title{text-align: center;}
.page-qrcode .title p{line-height: 150%;}
.page-qrcode .title b{color: #FF4646;}


 


/* ------ 首页 ------ */

/* --- banner --- */
.home-banner{background: url(../images/banner.jpg) no-repeat center top; background-size: cover; height: 500px; justify-content: center;}



/* --- product --- */
.home-product{padding-bottom: 80px; overflow: hidden;}

/* hd */
.home-product .hd {margin-bottom: 45px;}
.home-product .hd ul{justify-content: center;}
.home-product .hd li{height: 56px; line-height: 56px; text-align: center; background: #F9F9F9; border-radius: 100px; padding: 0 30px; font-size: 16px; margin: 0 10px; color: #666; cursor: pointer; transition: all .3s;}
.home-product .hd li.on{background: #FF4646; color: #fff;}

/* bd */
.home-product .bd{margin-bottom: 50px;}
.home-product .bd ul{width: 105%;}
.home-product .bd li{ width: 265px; margin-right: 20px; text-align: center;}
.home-product .bd li .title{font-size: 16px;}
.home-product .bd li .pic{margin-bottom: 20px; padding: 10px; border-radius: 10px; transition: all .3s; background: #fff; box-shadow: 0px 2px 2px #efefef;}
.home-product .bd li .pic img{border-radius: 8px;}
.home-product .bd li:hover .pic{ box-shadow: 0px 20px 30px #ddd;}



/* --- about --- */
.home-about{background: #F5F5F5; padding: 80px 0; padding-bottom: 300px;}
.home-about .wrap{position:relative;}

/* box */
.home-about .box{background: #fff; width: 58.3333%; padding: 50px; border-radius: 8px;  box-shadow: 0px 20px 30px rgba(0,0,0,0.05); top: 60px; z-index: 200; position: relative;}
.home-about .box h2{font-size: 32px; font-weight: bolder; margin-bottom: 5px;}
.home-about .box .dep{font-size: 16px; opacity: .2; font-family: din; text-transform: uppercase;} 
.home-about .box .column{margin-bottom: 20px;}
.home-about .content {margin-bottom: 50px;}
.home-about .content p{font-size: 16px; line-height: 180%; margin-bottom: 20px; opacity: .8;}

/* photo */
.home-about .photo{position: absolute; right: 0; top: 0; width: 50%;}
.home-about .photo img{border-radius: 8px;}



/* --- friends --- */
.home-friends .wrap{background: #fff; border-radius: 8px; box-shadow: 0px 20px 30px rgba(0,0,0,0.05); margin-top: -100px; padding:0 50px; padding-bottom: 50px;}
.home-friends .content li{width: 33.333%; line-height:40px; position: relative; padding-left: 15px;}
.home-friends .content li::before{width: 4px; height: 4px; background: #C8C8C8; position: absolute; left: 0; top: 45%; content: ""; border-radius: 100px;}


 


/* ------ 内页 ------ */

/* --- box --- */
.inner-box{padding: 80px 0;}
.inner-box .wrap{display: flex;}

/* left / right */
.inner-left{ width: 20%;}
.inner-right{width: 76%; margin-left: auto; border-left: 1px solid #efefef; padding-left: 50px;}


/* --- column --- */
.inner-column {margin-bottom: 30px;}
.inner-column h3{font-size: 32px; font-weight: bolder; margin-bottom: 5px;}
.inner-column .dep{font-size: 16px; opacity: .2; font-family: din; text-transform: uppercase;} 


/* --- type --- */
.inner-type a{display: block;}
.inner-type a{height: 56px; line-height: 56px; text-align: center; background: #f9f9f9; margin-bottom: 8px; font-size: 16px; border-radius: 8px;}
.inner-type a:hover{background:#FF4646; color: #fff;}
.inner-type a.active{background:#FF4646; color: #fff;}


/* --- about --- */
.inner-about {}
.inner-about p{line-height: 200%; font-size: 16px; margin-bottom: 20px;}


/* --- news --- */
.inner-news{padding-top: -30px;}
.inner-news .item{border-bottom: 1px solid #efefef; padding: 30px 0;}
.inner-news .item a{font-size: 18px; margin-bottom: 10px; display: block; font-weight: bolder;}
.inner-news .item .dep{color: #999; line-height: 180%;}
.inner-news .item .dep p{color: #999; line-height: 180%;}


/* --- product --- */
.inner-product{display: flex; flex-wrap: wrap; justify-content: space-between;}
.inner-product .item{ text-align: center; width: 31%; margin-bottom: 30px;}
.inner-product .item .pic{width: 265px; height: 265px; background: #f5f5f5; border-radius: 16px; margin-bottom: 16px;}
.inner-product .item img{border-radius: 8px; margin-bottom: 15px; transition: all .3s;}
.inner-product .item img:hover{ box-shadow: 0px 20px 30px #ddd;}


/* --- article --- */
.inner-article img{margin-bottom: 50px; border-radius: 8px;}
.inner-article p{line-height: 200%; font-size: 16px; line-height: 200%; margin-bottom: 20px;}

}