@charset 'utf-8';

.productdetail{padding: 50px 0;}
.productdetail .category{width: 320px; float: left;}
.productdetail .category .search{border: solid #d6d6d6 1px; background: #fff; padding: 35px 19px;}
.productdetail .category .search::after{content: ''; display: table; clear: both;}
.productdetail .category .search input{width: 190px; height: 46px; float: left; padding: 0 19px; border: solid #999 1px; border-right: none; border-radius: 3px;}
.productdetail .category .search button{width: 50px; height: 48px; float: left; background: url("../images/search_white.png") center no-repeat #0a649e; border: none; border-radius: 3px; cursor: pointer;}
.productdetail .category .list{border: solid #d6d6d6 1px; background: #fff; padding: 30px 18px; margin-top: 30px;}
.productdetail .category .list h2{max-width: 150px; background: url('../images/category.png') left 7px no-repeat; border-bottom: solid #0a649e 1px; font-size: 20px; color: #0a649e; padding: 0 35px 15px 35px;}
.productdetail .category .list ul{margin-top: 20px;}
.productdetail .category .list li{line-height: 22px; padding: 15px 0; border-bottom: dashed #eee 1px; position: relative;}
.productdetail .category .list li a{display: inline-block; vertical-align: middle; font-size: 16px; font-weight: bold;}
.productdetail .category .list li a:hover{color: #0a649e;}
.productdetail .category .list li a.current{color: #0a649e;}
.productdetail .category .list li .navbtn{width: 10px; height: 10px; line-height: 13px; font-size: 20px; color: #0a649e; font-style: normal; font-family: 'Poppins Bold'; cursor: pointer; position: absolute; right: 5px; top: 21px; transform: rotate(90deg); transition: all 0.3s;}
.productdetail .category .list li .navbtn.open{transform: rotate(-90deg);}
.productdetail .category .list li ul{display: none;}
.productdetail .category .list li ul li{padding: 10px; border-bottom: none;}
.productdetail .category .list li ul li::after{width: 2px; height: 2px; content: ''; background: #222; border-radius: 50%; position: absolute; left: 0; top: 20px;}
.productdetail .category .list li ul li a{font-weight: normal;}

.productdetail .contentdetail{width: calc(100% - 350px); float: right;}
.productdetail .contentdetail .picture{width: 45%; float: left;}
.productdetail .contentdetail .picture .bigimg{border: solid #e5e5e5 1px;}
.productdetail .contentdetail .picture .bigimg img{width: 100%;}
.productdetail .contentdetail .picture .thumbnail{margin-top: 30px;}
.productdetail .contentdetail .picture .thumbnail .button{width: 20px; height: 82px; float: left;}
.productdetail .contentdetail .picture .thumbnail .button a{display: block; text-align: center; line-height: 80px; font-size: 20px; background: #d6d6d6; color: #fff;}
.productdetail .contentdetail .picture .thumbnail .button a:hover{background: #0a649e;}
.productdetail .contentdetail .picture .thumbnail .imglist{max-width: calc(100% - 50px); float: left; overflow: hidden; box-sizing: border-box; margin: 0 5px;}
.productdetail .contentdetail .picture .thumbnail .imglist ul{width: max-content;}
.productdetail .contentdetail .picture .thumbnail .imglist li{height: 78px; float: left; margin: 0 5px; border: solid #eee 1px; cursor: pointer;}
.productdetail .contentdetail .picture .thumbnail .imglist li img{height: 78px;}
.productdetail .contentdetail .picture .thumbnail .imglist li.current{border-color: #0a649e;}

.productdetail .contentdetail .abstract{width: 50%; float: right;}
.productdetail .contentdetail .abstract .describe{}
.productdetail .contentdetail .abstract .describe h1{font-size: 20px; color: #0a649e; font-family: 'Poppins Bold'; margin-bottom: 10px;}
.productdetail .contentdetail .abstract .describe p{font-size: 18px; line-height: 26px; padding: 8px 0;}
.productdetail .contentdetail .abstract .consult{margin-top: 30px;}
.productdetail .contentdetail .abstract .consult a{display: inline-block; padding: 0 25px; font-size: 16px; line-height: 50px; background: #0a649e; color: #fff; border-radius: 5px;}
.productdetail .contentdetail .abstract .media{border-top: solid #d6d6d6 1px; padding-top: 30px; margin-top: 30px;}
.productdetail .contentdetail .abstract .media a{display: inline-block; margin-right: 30px;}
.productdetail .contentdetail .abstract .media img{height: 23px;}

.productdetail .contentdetail .detailcontent{margin-top: 80px;}
.productdetail .contentdetail .detailcontent .detailtab{border-bottom: solid #d6d6d6 1px;}
.productdetail .contentdetail .detailcontent .detailtab li{display: inline-block; padding: 30px 0; font-size: 16px; margin-right: 60px; cursor: pointer; position: relative;}
.productdetail .contentdetail .detailcontent .detailtab li.current{color: #0a649e; font-family: 'Poppins Bold';}
.productdetail .contentdetail .detailcontent .detailtab li.current::after{width: 100%; height: 3px; content: ''; background: #0a649e; position: absolute; left: 0; bottom: -2px;}
.productdetail .contentdetail .detailcontent .detailtab li:last-child{margin-right: 0;}
.productdetail .contentdetail .detailcontent table{max-width: 100%; margin: 0 auto; border-collapse: collapse;}
.productdetail .contentdetail .detailcontent table td{word-break: break-all;}
.productdetail .contentdetail .detailcontent img{max-width: 100%; height: auto !important;}
.productdetail .contentdetail .detailcontent .detailtabbox{margin-top: 40px;}
.productdetail .contentdetail .detailcontent .detailtabbox .detailtitle{font-size: 26px; color: #0a649e;}
.productdetail .contentdetail .detailcontent .detailtabbox .detailul{margin-top: 20px;}
.productdetail .contentdetail .detailcontent .detailtabbox .detailul li{background: #f7f9fc; padding: 20px 28px; margin-bottom: 30px;}
.productdetail .contentdetail .detailcontent .detailtabbox .detailul li h4{font-size: 18px;}
.productdetail .contentdetail .detailcontent .detailtabbox .detailul li p{font-size: 16px;}
.productdetail .contentdetail .detailcontent .detailtabbox .materia{margin-top: 20px;}
.productdetail .contentdetail .detailcontent .detailtabbox .materia ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.productdetail .contentdetail .detailcontent .detailtabbox .materia li{width: 23.5%; margin-bottom: 30px;}
.productdetail .contentdetail .detailcontent .detailtabbox .materia li img{width: 100%;}
.productdetail .contentdetail .detailcontent .detailtabbox .materia li p{background: #0a649e; color: #fff; font-size: 16px; text-align: center; padding: 10px 20px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.productdetail .contentdetail .detailcontent .detailtabbox .applica{margin-top: 20px;}
.productdetail .contentdetail .detailcontent .detailtabbox .applica ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.productdetail .contentdetail .detailcontent .detailtabbox .applica li{width: 48%; margin-bottom: 30px;}
.productdetail .contentdetail .detailcontent .detailtabbox .applica li img{width: 100%;}
.productdetail .contentdetail .detailcontent .detailtabbox .applica li p{color: #0a649e; font-size: 18px; text-align: center; padding: 10px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.productdetail .contentdetail .detailcontent .detailtabbox .relateSwiper{margin-top: 20px; position: relative; overflow: hidden; padding-bottom: 50px;}
.productdetail .contentdetail .detailcontent .detailtabbox .relateSwiper .swiper-slide img{width: 100%;}
.productdetail .contentdetail .detailcontent .detailtabbox .relateSwiper .swiper-slide p{background: #0a649e; color: #fff; font-size: 16px; text-align: center; padding: 10px 20px; line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.productdetail .contentdetail .detailcontent .detailtabbox .relateSwiper .swiper-slide a{color: #fff;}


@media (max-width:960px) {
	.productdetail{padding: 30px 15px;}
	.productdetail .category{display: none;}
	.productdetail .contentdetail{width: 100%; float: right;}
	.productdetail .contentdetail .picture{width: 100%; float: left;}
	.productdetail .contentdetail .picture .bigimg{border: solid #e5e5e5 1px;}
	.productdetail .contentdetail .picture .bigimg img{width: 100%;}
	.productdetail .contentdetail .picture .thumbnail{margin-top: 30px;}
	
	.productdetail .contentdetail .abstract{width: 100%; float: right;}
	.productdetail .contentdetail .abstract .describe{margin-top: 20px; line-height: 28px;}
	.productdetail .contentdetail .abstract .describe h1{font-size: 18px;}
	.productdetail .contentdetail .abstract .describe p{font-size: 14px; line-height: 22px; padding: 5px 0;}
	.productdetail .contentdetail .abstract .consult{margin-top: 20px;}
	.productdetail .contentdetail .abstract .consult a{font-size: 14px; line-height: 38px;}
	
	.productdetail .contentdetail .abstract .media{border-top: none; padding-top: 30px; margin-top: 0;}
	.productdetail .contentdetail .abstract .media a{margin-right: 20px;}
	.productdetail .contentdetail .abstract .media a:last-child{margin-right: 0;}
	
	.productdetail .contentdetail .detailcontent{margin-top: 30px;}
	.productdetail .contentdetail .detailcontent .detailtab{border-bottom: none;}
	.productdetail .contentdetail .detailcontent .detailtab ul::after{content: ''; display: table; clear: both;}
	.productdetail .contentdetail .detailcontent .detailtab li{float: left; padding: 10px 0; width: 50%; box-sizing: border-box; border: solid #e8e8e8 1px; font-size: 14px; text-align: center; margin: 0 -1px -1px 0;}
	.productdetail .contentdetail .detailcontent .detailtab li.current{font-family: 'Poppins';}
	.productdetail .contentdetail .detailcontent .detailtab li.current::after{height: 2px; left: 0; bottom: -1px;}
	.productdetail .contentdetail .detailcontent .detailtab li:last-child{margin-right: 0;}
	.productdetail .contentdetail .detailcontent .detailtabbox{margin-top: 40px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .detailtitle{font-size: 20px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .detailul li{padding: 10px 18px; margin-bottom: 20px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .detailul li h4{font-size: 16px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .detailul li p{font-size: 14px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .materia li{width: 48%; margin-bottom: 20px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .materia li p{font-size: 14px; text-align: center; padding: 10px; line-height: 22px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .applica li{margin-bottom: 20px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .applica li p{font-size: 14px; padding: 10px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .relateSwiper{padding-bottom: 30px;}
	.productdetail .contentdetail .detailcontent .detailtabbox .relateSwiper .swiper-slide p{font-size: 14px; padding: 10px; line-height: 22px;}
}