/***********************************************************
	文件：css/content.css
	备注：内容常用样式
	版本：4.0
***********************************************************/
/*产品列表页*/


/*产品详细页*/
.proinfo ::-webkit-scrollbar{ background-color: #3784d9}
.proinfo ::-webkit-scrollbar-thumb{ background-color: rgba(255,255,255,.4)}  /* 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） */
.proinfo ::-webkit-scrollbar-track{ background-color: rgba(45,121,246,.9)}   /* 滚动条的轨道（里面装有Thumb） */
.proinfo ::-webkit-scrollbar-button{ background-color: rgba(255,255,255,.1)}  /* 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 */
.proinfo ::-webkit-scrollbar-track-piece{ background-color: rgba(45,121,246,.9)}  /* 内层轨道，滚动条中间部分（除去） */
.proinfo ::-webkit-scrollbar-corner{ background-color: rgba(45,121,246,.9)}  /* 边角，即两个滚动条的交汇处 */
.proinfo ::-webkit-resizer{ background-color: #fff}  /* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */


.toplinkdiv{
	height: 48px; line-height: 48px; background: #f5f5f5; text-align: center;
}
.toplinkdiv .con{ max-width: 1200px; margin: 0 auto; text-align: left; }

.pro_banner{
	position: relative; overflow: hidden;
}
.pro_banner .swiper-slide{
	height: 600px
}
.proinfo{
	position: absolute;width: 35%; height: 100%; min-height: 600px; top: 0; right: 0; background: rgba(45,121,246,.9); z-index: 970; padding: 50px 4% 100px; line-height: 1.8em; font-size: 17px; text-align: center; transform: translate(1); transition: .6s
}
.proinfo.on .con{ overflow-y: auto; padding-right: 10px }
.proinfo *{ color: #fff; text-align: left; }
.proinfo h3{ font-size: 33px; text-align: left; }
.proinfo h4{ font-size: 26px; padding: 25px 0 15px; text-align: left; }
.proinfo p{ margin-bottom: 10px; text-align: left; text-align:justify;display: inline-block; }
.proinfo .con{ max-height: 100%; overflow: hidden; text-align: center; }
.proinfo .moretxt{ font-size: 15px; display: inline-block; width: 20px; margin: 0 auto; }
.proinfo .moretxt:before{ content: ""; display: block; width: 20px; height: 20px; background: url(../vimg/more.png) no-repeat center center; margin: 20px auto 0; transition:.3s }
.proinfo .moretxt.on:before{ transform: rotate(180deg) }
.proinfo .moretxt:hover,.proinfo .moretxt:focus{ color: #fff; text-decoration: none }

.pro_banner .closebtn{ font-size: 36px; width: 50px; height: 50px; line-height: 50px; text-align: center; position: absolute; right: 15px; top: 15px; z-index: 980; color: #fff; background: rgba(45,121,246,.9); transition: .5s }
.pro_banner .closebtn:hover{ text-decoration: none; color: #ffffdd }
.pro_banner .detailbtn{
	font-size: 18px; height: 50px; line-height: 50px; text-align: center; padding:0 20px; position: absolute; right: 0; top: 15px; z-index: 980; color: #fff; background: rgba(45,121,246,.9); transition: .5s
}
.pro_banner .off{
	right: -100%
}


@media screen and (max-width: 980px) {
	.pro_banner .swiper-slide{ height: auto; min-height: 220px;}
	.pro_container_m li img{ width: 100%;}
	.proinfo{ position: static; width: 100%; height: auto; min-height: 200px; padding: 50px 15px; font-size: 14px; text-align: left; }
	.proinfo .moretxt{ display: none }
	.pro_banner .closebtn{ display: none;}
}



.cytd{
	background: #fafafa; padding: 103px 15px; text-align: center;
}
.cytd .con{ max-width: 1200px; margin: 0 auto }
.cytd .con h2{ text-transform: uppercase; }
.cytd .cy_list{
	padding: 42px 0; margin: 0 auto; display: flex;
}
.cytd .cy_list li{ flex: 1; font-size: 16px }
.cytd .cy_list li h4{ font-size: 32px; line-height: 1.8em; color: #2686df }
.cytd .cy_list li .dot{ color: #2686df; margin-top: 8px }

@media screen and (max-width: 980px) {
	.cytd{ padding-top: 80px; padding-bottom: 50px }
	.cy_list p{ font-size: 12px }
	.cytd .cy_list li h4{ font-size: 20px }

}


/* 推荐项目 */

.compro .sbtn{ background-color: rgba(255,255,255,.3); border-radius: 50%; width: 85px; height: 85px; outline:medium; transition: .3s }
	.compro .sbtn.swiper-button-prev{ background-position: right 20px center; left: -10px; transform: translate(-100%,0); }
	.compro .sbtn.swiper-button-next{ background-position: left 20px center; right: -10px; transform: translate(100%,0); }

@media screen and (max-width: 980px) {
	.compro .sbtn.swiper-button-prev,.compro .sbtn.swiper-button-next{
		display: none;
	}
	
	.compro .comarc .gz{ top: 15px;}
	.compro .comproattr section .cblue{ font-size: 20px;}
	.compro .comarc{ padding-bottom: 60px; padding-left: 15px; padding-right: 15px;}
	.compro .comarc .readdetail{ }

}