﻿.pagebox{margin:50px auto;}
.prodpage{}
.prod-boxs-info p{padding-bottom: 1rem;}
.prod-boxs{display: flex;justify-content: space-between;flex-direction: row;width:100%;}
.prod-boxs aside
{
	width:300px;
	height:auto;
	margin:0px;
	padding: 0px 20px 0px 0px;
	float:left;
	margin-left: 10px;
	background: #fff;
	position: relative;
	flex-shrink: 0;
	/*box-shadow: 0px 0px 10px rgba(0,0,0,0.05);*/
}
.prod-boxs aside h1{color: #fff;font-size: 1.1rem;margin-bottom: 0px;margin-top: 0px;font-weight: 500;background: var(--color2);padding: 1rem;}
.prod-boxs aside .ml_box{ width:100%; background: #FFFFFF;margin: 0px; padding-top:26px; overflow: hidden;box-shadow: var(--box-shadow);}
.prod-boxs aside .ml_box .ul1{padding: 0px;margin: auto;}
.prod-boxs aside .ml_box .ul1 li{}
.prod-boxs aside .ml_box .ul1 li .ltp,.prod-boxs aside .ml_box .ul1 li .ltp a{margin-bottom: 15px;color: #000;cursor: pointer;font-size: 14px;}
.prod-boxs aside .ml_box .ul1 li .ltp a{width:80% !important;padding-right: 30px;}
.prod-boxs aside .ml_box .ul1 li .ltp span{-webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;display: block;text-transform: capitalize;padding-left: 1rem;font-weight: 500;position: relative;}
.prod-boxs aside .ml_box .ul1 li .ltp span:after{content:"\e659";font-size:20px; color:var(--color4);position: absolute;right: 1rem; bottom: 0px; font-family: "iconfont";}
.prod-boxs aside .ml_box .ul1 li .lbt{display: none;}
.prod-boxs aside .ml_box .ul1 li .lbt a{/*display: block;margin-bottom: 15px;color: #000;position: relative;font-size: 16px;*/text-indent: 0px;
    color: #001a2e;
    font-size: 14px;
    overflow: hidden;
    display: flex;
    line-height: 2rem;
    text-transform: capitalize;
    border-bottom: 1px solid #eeeeee;
	padding:0.5rem 0px;
}
.prod-boxs aside .ml_box .ul1 li .lbt a:before{content:"\e659";font-family: "iconfont";font-size:14px; color:#001a2e;margin-right: 3px;margin-left: calc(1rem + 0px);}
.prod-boxs aside .ml_box .ul1 li .lbt .lbt3 a{}
.prod-boxs aside .ml_box .ul1 li .lbt a:hover{color: var(--color4);}
.prod-boxs aside .ml_box .ul1 li.li1{border-bottom: 1px solid #eee;margin-bottom: 20px;}
.prod-boxs aside .ml_box .ul1 li.act .ltp span{}
.prod-boxs aside .ml_box .ul1 li.act .ltp span:after {
    content: "\e6aa";
    font-size: 20px;
    color: var(--color1);
    position: absolute;
    right: 1rem;
    bottom: 0px;
    font-family: "iconfont";
}
.prod-boxs aside .ml_box .ul1 li .ltp a:hover span{color: #f4bc16;}
.prod-boxs aside .ml_box .ul1 li .lbt a.act {color: var(--color1);}

.prod-boxs aside .aside_contact{background: var(--color4);
    padding: 20px 25px;
    width: 100%;
    overflow: hidden;
    margin-top: 40px;color:#FFFFFF;}
.aside_contact ul{margin-top:20px;}
.aside_contact li{font-size:14px; margin:5px auto; line-height: 2;}

aside .aside_contact h2{color:#FFFFFF;}

main{flex:1; margin-left:2rem;}
.prod-boxs-info{padding: 1rem 0vw ;background: #fff;}
.prod-boxs-info main{flex:1; margin-left:0;}
.prod-boxs-info dl h5 {
    font-size: 2rem;
    padding-bottom: 2rem;font-family: 'OB';text-transform: capitalize;
}

.btn-paly-box{display: flex; justify-content: center; align-items: center;cursor: pointer;padding-top: 2rem;margin-bottom: 2rem;}
.btn-paly{width:120px; height: 120px; background:rgb(23 162 184 / 20%);  z-index: 100; display: flex; justify-content: center; align-items: center;border-radius: 100%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 100%;
    display: inline-block;
    text-align: center;
    -webkit-animation: witr-shadow 1s linear infinite;
    animation: witr-shadow 1s linear infinite;
    -webkit-transition: .5s;
}
.btn-paly:before{width:100px; height: 100px; border-radius: 100%;font-family: "iconfont"; background: rgb(23 162 184 / 20%); color:var(--color2); content: "\e63e"; font-size:2rem;display:flex; justify-content: center;align-items: center;}
@keyframes witr-shadow
{
	0% {
    box-shadow: 0 0 0 0 rgba(23,162,184,.3), 0 0 0 10px rgba(23,162,184,.3), 0 0 0 20px rgba(23,162,184,.3);
}
	100% {
    box-shadow: 0 0 0 10px rgba(23,162,184,.3), 0 0 0 20px rgba(23,162,184,.3), 0 0 0 30px rgba(23,162,184,0);
}
}

.anli-list ul{display:flex; justify-content: space-between; flex-wrap: wrap;}
.anli-list li{width:calc((100% / 3) - 20px); margin:0px; padding:0px;justify-content: center;align-items: center; margin:10px auto;}
.anli-list li:last-child:nth-child(3n - 1){margin-right:calc(((100% / 3) + 5px) * 2)}
.anli-list li:last-child:nth-child(3n){margin-right:calc(((100% / 3) + 10px) * 1)}
.anli-list figure{width:100%;padding: 0px 20px;}
.anli-list .card-img-c{position: relative;overflow: hidden;
  width: 100%; /* 容器宽度 */
  padding-top: 133.33%; /* 宽高比为 (100/16:9) 的百分比 */}
.anli-list .card-img-c img{position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪并覆盖到容器 */}

.anli-list li .card-img-c img{width:100%; max-width:100%;transition: 0.5s;}
.anli-list li:hover .card-img-c img{transform: scale(1.1); transition: 0.35;}

.anli-list .card-img-c .img-dask:before{    background: rgb(0 0 0 / 50%);
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border: 0;
    z-index: 15;}
.anli-list .card-img-c:hover{cursor: pointer;}


dl{width:100%; overflow: hidden;}
dl dt{width:100%; background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: flex-start;font-family: var(--ff3) !important;}
dl dt h5{background: #000000;
    padding: 10px 2rem;
    display: block;
    margin: 0px;
    color: #FFFFFF;font-family: var(--ff3) !important;}
.prodpage  dl dd{ padding:2rem 1rem; font-family: var(--ff3) !important;}
dl dd p,dl dd div,dl dd span{ font-family: var(--ff3) !important;}
dl dd strong{text-transform: capitalize; margin-bottom:10px;}
.prodpage dl:nth-last-child(1){border-top:1px solid #ccc; padding-top:2rem; margin-top:2rem;}
dl.dl01 dd ul li{list-style: circle !important; margin-bottom:7px;}

dl.dl02{width:100%;}
dl.dl02{ border-top:1px solid #f5f5f5; padding-top:80px; padding-bottom: 80px;margin-top: 0px;background: url(/static/images/bg4.jpg) right top no-repeat;}
dl.dl02 ul{width:100%;}
dl.dl02 ul{display:flex; justify-content: space-between; flex-wrap: wrap;}
dl.dl02 ul li{width:calc((100% / 3) - 20px); margin:15px 0px; border:1px solid #eee}
dl.dl02 ul li img{max-width:100%; transition:0.3s;}
dl.dl02 ul li p{text-align: center; padding:1rem;}
.figure-caption{padding:1rem 0px;}
dl.dl02 ul li:hover{box-shadow: 0px 0px 15px rgba(0,0,0,0.1); transition:0.3s;}
dl.dl02 ul li:hover .figure-caption{color:var(--color1);}
dl.dl02 ul li:hover img{transform: scale(1.05); transition: 0.3s;}
dl.dl02 ul li:last-child:nth-child(3n - 1){margin-right:calc(((100% / 3) + 10px) * 1)}
dl.dl02 ul .figure{margin:0px; padding:0px;overflow: hidden;}

/*.prod-boxs-info:nth-child(2n){background:#f5f5f5;}
.prod-boxs-info:nth-child(2n+1){background:#FFFFFF;}*/


table{ border: 1px solid #ccc;width: 100% !important;
    box-sizing: border-box;
    margin-bottom: 15px;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 5px;}
table th,table td{padding:10px;text-align:center;border-width:1px;border-style:solid;vertical-align:middle}
table th{font-weight:700; background:rgb(0 57 111); box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.04); }
table th{background:var(--color1); font-size:18px; color:#FFFFFF; font-weight: bold;padding: 20px 0px;}
table th.clear{border:0;background:none}
table tr:nth-child(1){/*background: var(--color4) !important;*/ padding:2rem 0px;height: 60px;}
table tr:first-child td{ box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.06);}
table tr:nth-child(2n) td { background: #FFFFFF; }
table tr td { border-color: #ccc !important; /*background: rgba(0,0,0,0.05);*/text-align: center; font-size:14px;line-height: 180%;  padding:5px 0px !important;} 



.prod-info dd img{max-width:100%;}

.prod-info h6{margin-top:1rem; color: #366092;font-weight: bold;font-size: 1.65rem; border-bottom: 1px solid #eee; padding-bottom:1rem; margin-bottom:1rem;}
.prod-info .imglist{width:100%; display: flex; justify-content: space-between; }
.prod-info .imglist img{max-width:100%;}

.prod-col{width:100%; position: relative; overflow: hidden; margin:0px auto;}
.prod-col:nth-child(2){border-top: 1px solid rgb(0 0 0 / 5%);padding-top: 80px;margin-top: 80px;}
.prod-col h2{color: #00a950;font-size: 40px;font-weight: bold;text-transform: uppercase;text-align: center;margin-bottom: 40px;}
.prod-col ul{display: flex;justify-content: space-between;flex-wrap: wrap;}
.prod-col ul li{width: calc((100% /3) - 2rem);max-width: unset;display: flex;transition: 0.5s;margin-top: 0px;margin-bottom: 2rem;border: 1px solid #eee;}
.prod-col ul li:last-child:nth-child(3n - 1) {margin-right:calc((100% /3) + 1rem); }
.prod-col ul li:last-child:nth-child(3n - 2) {margin-right:calc(((100% /3) * 2) + 1rem);}
/*.prod-col:nth-child(1) ul li{width: auto;max-width: 600px;display: flex;}*/
.prod-col ul li figure{width:100%;transition: 0.5s; overflow: hidden;display: flex; flex-direction: column;justify-content: center;align-items: center;margin: 0;}
.prod-col ul li figure img{max-width:100%;transition: 0.5s;overflow: hidden;}
.prod-col ul li:hover img{transform: scale(1.05);}
.prod-col ul li figcaption {padding: 15px;
    display: flex;
	flex-direction: column;
    overflow: hidden;
    justify-content: center;
    align-items: center;
	transition: 0.5s;
	margin-top:0px;
	/*border-top:1px solid rgb(1 173 78 / 10%);*/
	width: 100%;font-size:1rem;
}
.prod-col ul li:hover figcaption a{ color:var(--color4);}
.prod-col:nth-child(2) ul li figcaption,.prod-col ul li figcaption{background: #f5f5f5;/*border: 1px solid #ccc;*/}
.prod-col:nth-child(2) ul li:hover figcaption,.prod-col ul li:hover figcaption{ background:var(--color2); color:#ffffff;}
.prod-col:nth-child(2) ul li:hover figcaption a,.prod-col ul li:hover figcaption a{ color:#ffffff;}
.prod-col ul li figcaption h5{ color:#00a950;font-size:30px;font-weight: bold;}
.prod-col ul li figcaption p{ color:#000;font-size:20px; line-height: 2; text-align: center; margin: 10px auto; max-width:80%;margin-bottom:14px;}
.prod-col ul li .card-img-c{position: relative;
  width: 100%; /* 容器宽度 */
  padding-top: 127%; /* 宽高比为 (100/16:9) 的百分比 */ overflow: hidden;}
.prod-col ul li .card-img-c img{position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 裁剪并覆盖到容器 */}

.prod-col .more {
    padding: 10px 50px;
    background: #00a950;
    color: #FFFFFF;
    border-radius: 50px;
    font-family: var(--ff3);
    margin: auto;
    border: 2px solid #00a950;
    transition: 0.5s;
	min-width: 200px;
    text-align: center;
}
.prod-col .more:before{border-radius: 50px;}
.prod-col .more:hover{background-color:transparent; border:2px solid #00a950; color:#00a950;}

.prod-info .video-dl{margin-top:3rem;}
.video-dl h5{font-size:40px; font-weight: 500;font-family: var(--ff2);text-transform: uppercase;}
.video-dl ul{display:flex; justify-content: flex-start; flex-wrap: wrap;}
.video-dl ul li{width:24%;margin: auto 0.5%;}
.video-dl ul li:hover{cursor: pointer;}
.video-dl ul li .figure{display: flex;}
.video-dl .m-video{position: relative;width: 100%;padding-top: 133.33%;}
.video-dl .m-video img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}

.prod-table table{}
.prod-table table th,table td{padding:10px;text-align:center;border-width:1px;border-style:solid;vertical-align:middle}
.prod-table table th{font-weight:700; background:var(--color2); color:#FFFFFF; box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.04); }
.prod-table table th{background:rgb(11 85 155); font-size:16px; color:#FFFFFF; font-weight: bold;padding: 10px 0px;}
.prod-table table th.clear{border:0;background:none}
.prod-table table tr:first-child td{font-weight:700; background:var(--color2) !important; color:#FFFFFF !important; box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.04);padding: 10px 0px !important;font-size: var(--p3-size);}
.prod-table table tr:first-child td{ box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.06);}
.prod-table table tr:first-child td span{color:#FFFFFF !important; }
.prod-table table tr:nth-child(2n) td { background: #FFFFFF; }
.prod-table table tr td { border-color: #ccc !important; border:1px solid #ccc!important;background: rgba(0,0,0,0.05);text-align: center; font-size:var(--p1-size);line-height: 180%;padding: 10px 0px !important;} 
@media screen and (max-width: 1600px){
	.prod-info .title h3{font-size:2rem;}
}
@media screen and (max-width: 1440px){
	.station.station-col .loca-wz{ display:none;}
	.station.station-col ul.loca-col{width: 100%;justify-content: flex-start;max-width: unset;padding: 0px 5vw;}
	
	.prod-info .wrap{padding:0px 5vw; width:100%;}
	.prod-info .title h3{font-size:1.65rem;}
}
@media screen and (max-width: 1366px){
	.prod-info .wrap{width:100%; max-width:1200px;padding:0px 0vw; }
}
@media screen and (max-width: 1200px){
	.prod-info .wrap{width:100%; max-width:unset; padding:0px 2vw; }
	
}

@media only screen and (max-width: 1024px){
.MyCont{ width:100%; margin-top:20px;float: left;}
.main-boxs aside{ display:none;}
.main-boxs main{ width:95%; margin:auto;}
.cont_sation{float: left;padding-left: 0px;margin-bottom: 15px;text-indent: 30px; line-height:35px;background: url("ico_station.png") 0px center no-repeat; font-size:0.8em;color: #333; width:100%;    margin-top: 0px;}
.cont_sation a{ color:#333;}
.cont_sation a:hover{ color:#FF5234;}
.cont_title{font-size: 1.6em;font-family: microsoft yahei;color: #777777;padding-bottom: 20px;margin-bottom: 20px;text-align: center; width:96%; border-bottom:1px solid #efefef;}
.box_right_titles{
	height: auto;
    line-height: 120%;
    font-size: 1.2em;
    padding-bottom: 1vh;
    width: 100%;
    border-bottom: 1px solid #cdcdcd;
    margin-bottom: 15px;
    color: #333;
    font-weight: 100;
    font-family: microsoft yahei;}
.sation{ font-size:0.8em; margin-bottom:10px;}
.sation img{ margin-top:5px;}
.sation a{ color:#666;}
}
@media screen and (max-width: 1023px)
{
	.MyCont{ width:100%; margin-top:20px;float: left;}
.main-boxs aside{ display:none;}
.main-boxs main{ width:95%; margin:auto;padding: 0px;}
	.main-boxs main .MyContBox{width:100%;}
.cont_sation{float: left;padding-left: 0px;margin-bottom: 15px;text-indent: 30px; line-height:35px;background: url("ico_station.png") 0px center no-repeat; font-size:0.8em;color: #333; width:100%;    margin-top: 0px;}
.cont_sation a{ color:#333;}
.cont_sation a:hover{ color:#FF5234;}
.cont_title{font-size: 1.6em;font-family: microsoft yahei;color: #777777;padding-bottom: 20px;margin-bottom: 20px;text-align: center; width:96%; border-bottom:1px solid #efefef;}

	.prod-boxs aside{display: none;}
	.prod-boxs main{margin-left:auto; padding:0px 10px;width: 100%;}
.box_right_titles{
	height: auto;
    line-height: 120%;
    font-size: 1.2em;
    padding-bottom: 1vh;
    width: 95%;
    border-bottom: 1px solid #cdcdcd;
    margin-bottom: 15px;
    color: #333;
    font-weight: 100;
    font-family: microsoft yahei;}
.main-boxs main .box_right_title{width:100%;background: none;border:0px;}
.main-boxs main .box_right_title .sation{ font-size:0.8em; margin-bottom:10px;top: 50px;left: 20px;}
.main-boxs main .box_right_title .sation img{ margin-top:0px;}
.main-boxs main .box_right_title .sation a{ color:#666;}
	.productShow .fr{width: auto;}
	.cont dl{width:100%;}
	
	.prod-boxs main ul{}
	.prod-boxs main ul li{width:calc((100% / 2) - 3%);}
	.prod-boxs main ul li .Image{height:auto;border: 0px;}
	.prod-boxs main ul li .ImageName{padding:15px 0px; font-size:1rem;}
	dl.dl01 dd{overflow-x: scroll;}
	
	.prod-boxs-info{padding:1rem 20px;}
	.box_cols_cont{overflow-x: auto;}
	.prod-boxs{padding:1rem 20px;}

    .prod-info{max-width:100%;}
    .prod-col ul li:last-child:nth-child(3n - 1){margin-right: 0;}
	
	.station{height: auto;line-height: normal; border:0px;}
	.station .center{display: flex;justify-content: space-between;flex-direction: column;background: #f5f6f9;}
	.station ul{max-width: 100%; margin:0px;}
	.loca-wz{border-top: 1px solid #eaebef;padding: 20px 0px;}
	#shownews1 table{max-width:100%;}
	.prod-table .table_cont{overflow-x:auto;width: 100%;}
}


@media screen and (max-width: 767px){
	.station.station-col{display:none;}
	.productShow .fr{display: none;}
	.prod-boxs main ul li{width:100%;}
	.prod-info dl{padding:50px 0px;}
	.prod-info dl.dl01 dd .tx-item{width:47%;}
	.desc-dl .pics-ul{flex-direction: column;}
	.dl01 h5, .dl02 h5{margin-bottom:10px;}
	.prod-info dl .row{ margin:0;width: 100%;}
	.prod-info dl .row .cos-12{padding:0px !important;}
	.prod-info dl .row .cos-12 img{max-width:100%;}
	dl.dl02{padding:3rem 0px 0px 0px;}
	dl.dl02 ul li:last-child:nth-child(4n - 2){margin:auto;}
	dl.dl02 ul li{width: calc((100% / 2) - 10px);}
	dl.dl02 ul li:last-child:nth-child(3n - 1){margin-right:0px;}
	
	.prod-info .wrap{padding:0px 15px;}
}
@media screen and (max-width: 430px)
{
	.about-title h2{font-size:1.6rem;}
	.prod-info dl h5{font-size:1.65rem !important;}
	
	.prod-info .title h3{font-size: 1.5rem;}
}
@media screen and (max-width: 414px)
{
	
}
@media screen and (max-width: 375px)
{
	.about-title h2{font-size:1.5rem;}
	.about-section h4{font-size: 1.2rem;line-height: 1.8rem;}
	
	.prod-info .title h3{font-size: 1.34rem;}
}
@media screen and (max-width: 320px)
{
	
}