﻿.pagebox{margin:50px auto;}
.prodpage{}
.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(--color1);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;
}
.prod-boxs-info .anli-list{width:100%;}
.anli-list ul{width:100%; display: flex; justify-content:flex-start;flex-wrap: wrap;}
.anli-list ul li{width:calc((100% / 3) - 20px); margin:10px;}
.anli-list ul li img{max-width:100%;}



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;}
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;}
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;wdith:100% !important;     width: 100%;
    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{width:100%;}

.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: 1rem;}
.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;}
.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:10px;
	/*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 .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;}

.box_cont img{max-width:100%;}
.box_cols_cont p{text-align: center;font-size: 1rem;}
.box_cols_cont .row{}
.box_cols_cont .row div{text-align: center;}
.item-box01 .row div img{border: 2px solid var(--color1);text-align: center; padding:2rem; border-radius: 20px;max-width:100%;}
.item-box01 .row div:nth-child(3n+2) img{border: 0px;width: 100%;}
.item-box01 .row{margin-bottom: 2rem;}

.item-box02 .row div img{border: 2px solid var(--color1);text-align: center; padding:2rem; border-radius: 20px;max-width:100%;}

.item-box02 ul{width:100%; display: flex;}
.item-box02 ul li{display: flex; flex-direction: column;}
.item-box02 ul li div{width:100px; height: 100px; border-radius: 100px; margin-bottom: 1rem; display: block;/*border: 4px solid #FFFFFF;box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);*/}
.item-box02 ul li:before{width:100px; height: 100px; border-radius: 100px; margin-bottom: 1rem; display: block; content: "";}
.item-box02 ul li p{width:100%; text-align: center;}

.item-box02 ul li.Brick-red div{background-color:#dc5840;}
.item-box02 ul li.Brick-red:before{background-color:#dc5840;}
.item-box02 ul li.Brick-red p{color:#dc5840;}

.item-box02 ul li.Derby-red div{background-color:#d53133;}
.item-box02 ul li.Derby-red:before{background-color:#d53133;}
.item-box02 ul li.Derby-red p{color:#d53133;}

.item-box02 ul li.Jujube-red div{background-color:#b22e30;}
.item-box02 ul li.Jujube-red:before{background-color:#b22e30;}
.item-box02 ul li.Jujube-red p{color:#b22e30;}

.item-box02 ul li.Ocean-blue div{background-color:#3863a7;}
.item-box02 ul li.Ocean-blue:before{background-color:#3863a7;}
.item-box02 ul li.Ocean-blue p{color:#3863a7;}

.item-box02 ul li.Bluish-grey div{background-color:#375661;}
.item-box02 ul li.Bluish-grey:before{background-color:#375661;}
.item-box02 ul li.Bluish-grey p{color:#375661;}

.item-box02 ul li.Grey div{background-color:#353636;}
.item-box02 ul li.Grey:before{background-color:#353636;}
.item-box02 ul li.Grey p{color:#353636;}

.item-box03 ul{width:100%; display: flex; justify-content: space-between;flex-wrap: wrap;}
.item-box03 ul li{display: flex; flex-direction: column; width:calc((100% / 3) - 40px); font-size:1rem; padding:1rem 0px; text-align: center; margin:15px auto;    text-transform: capitalize;}
.item-box03 ul li img{max-width:100%; margin: auto; height: auto !important;}

.p-list-item{font-size:1rem;}
.p-list-item p{display: flex;    text-align: left; margin-bottom:10px;}
.p-list-item p:before{content:"\e646"; display: block; margin-right:10px; font-family: "iconfont"; font-size:1rem;}

.img-list-item{width:100%; font-size:1rem;}
.img-list-item ul{width:100%; display: flex; justify-content: space-between;flex-wrap: wrap;align-items: flex-start;}
.img-list-item ul li{display: flex; flex-direction: column; width:calc((100% / 3) - 40px); font-size:1rem; padding:1rem 0px; text-align: center; margin:15px auto;}
.img-list-item ul li img{max-width:100%;max-width: 300px; margin: auto; height: auto !important; margin-bottom:2rem;}
.img-list-item ul li p{text-align: left;}
/* .img-list-item table tr:nth-child(2n){font-weight:300; background:var(--color1); color:#FFFFFF; box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.04);}
.img-list-item table tr:nth-child(2n) td{background:var(--color1);} */
/* .img-list-item table tr td:nth-child(1){font-weight:700; background:var(--color1); color:#FFFFFF; box-shadow: inset 0px 4px 3px -2px rgba(0,0,0,.04);} */
.img-list-item table tr td:nth-child(1){font-weight: bold; text-transform: capitalize; background-color: #f6f6f6;}
.box_cols_cont .p-name{text-align: center; margin-bottom:2rem;display: flex;justify-content: center; border-bottom:1px solid rgba(0,0,0,0.065); padding-bottom:2rem;}
.box_cols_cont .p-name h6{padding:10px 2rem; color:#FFFFFF; font-size:1rem; background-color:var(--color1);}

.box_cols_cont .p-title{text-align: center; margin-bottom:1rem;display: flex;justify-content: start; border-bottom:1px solid rgba(0,0,0,0.065); padding-top:2rem;}
.box_cols_cont .p-title h5{padding:10px 2rem; color:#FFFFFF; font-size:1rem; background-color:var(--color1);}

.box_cols_cont .p-desc{text-align: center; margin-bottom:2rem;display: flex;justify-content: center;}
.box_cols_cont .p-desc p{padding:10px 2rem; color:#FFFFFF; font-size:14px; background-color:var(--color1);}

.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(--color1); 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(--color1) !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;}
	
	.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%;}

	.box_cols_cont img{width:100%; max-width: 100%;}

	.item-box02 ul{flex-wrap: wrap;justify-content: space-between;}
	.item-box02 ul li{margin:10px 0px;width: calc((100% / 3));align-items: center;}
	.item-box03 ul{align-items: flex-start;}
	.item-box03 ul li{width: calc((100% / 2) - 10px);padding: 0px 0px;}
	.pagebox{margin-top:20px;}

	.prod-table table{width: max-content;}

	.img-list-item ul li{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;}
	
	.img-list-item ul li{width:100%;}
	.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-table table{width:max-content;}
	.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)
{
	
}