.proview {
    padding: 130px 0 215px;
}

.proview .leftParamter .title {
    font-size: 32px;
    color: var(--themaDeepBrown);
    width: 100%;
}

.proview .leftParamter .size {
    margin: 15px 0 25px;
    font-size: 22px;
    color: var(--themaDeepBrown);
}

.proview .leftParamter .tagList {
    height: 90px;
    font-size: 0;
}

.proview .leftParamter .tagList .tag {
    display: inline-block;
    line-height: 36px;
    margin-right: 4px;
    margin-bottom: 5px;
    padding: 0 30px;
    font-size: 14px;
    color: black;
    border-radius: 50px;
    vertical-align: middle;
    border: 1px solid #000;
}

.proview .leftParamter .useInto { max-width:720px;}

.proview .leftParamter .useInto a{ margin-right:15px;margin-bottom:15px;max-width:125px; display: inline-block; width:calc((100% - 15px) / 5);width:100%;}

.proview .leftParamter .useInto a:nth-child(5n){ margin-right:0px;}

.proview .leftParamter .useInto p {
    margin-bottom: 40px;
    font-size: 18px;
    color: black;
}


.proview .rightPic {
    max-width: 835px;
    width:50%;
    padding-top: 100px;
}

.proview .rightPic p{ font-size:35px; font-weight:bold; position: absolute; top:0; left:0;}

.proview .rightPic a{ width:47.5%; margin-bottom:15px; margin-right:10px}

.proview .rightPic img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-left: 0;
}

/* pro */

.pro {
    padding: 185px 0 180px;
}

.pro .headModule {
    margin-bottom: 265px;
}

.pro .headModule .leftTitle .en {
    font-size: 50px;
}

.pro .headModule .leftTitle .cn {
    font-size: 30px;
}

.pro .headModule .rightTxt {
    max-width: 540px;
    font-size: 25px;
    line-height: 40px;
    text-align: left;
    color: var(--themaDeepBrown);
}

.pro .paramterModule .title {
    font-size: 25px;
    color: var(--themaDeepBrown);
}

.pro .downLoadModule {
    max-width: 1036px;
    margin: 100px auto;
}

.pro .downLoadModule > * {
    line-height: 80px;
    border-bottom: 1px solid #000;
}

.pro .downLoadModule dt {
    font-size: 25px;
	font-weight:bold;
    color: var(--themaDeepBrown);
}

.pro .downLoadModule dd a {
    display: block;
    font-size: 18px;
    transition: all .6s;
    color: var(--themaDeepBrown);
}

.pro .downLoadModule dd a:hover {
    color: white;
    padding-left: 20px;
    background-color: var(--themaDeepBrown);
}

.pro .paramterModule {
    text-align: center;
}

.pro .paramterModule .title {
    margin-top: 293px;
    margin-bottom: 90px;
    font-size: 25px;
    color: var(--themaDeepBrown);
}

.pro .paramterModule .dozenIcon {
    font-size: 0;
}

.pro .paramterModule .icon {
    display: inline-block;
    margin: 0 12px 12px 12px;
    vertical-align: middle;
    color: var(--themaDeepBrown);
}

.pro .paramterModule .icon p {
    margin-top: 5px;
    font-size: 14px;
}

.pro .otherColor {
    margin: 0 auto;
    font-size: 0;
    padding-bottom: 250px;
}

.pro .otherColor .p {font-weight:bold; font-size:20px; border-bottom:solid 1px #332c2b; padding-bottom:25px; margin-bottom:25px;}

.pro .otherColor .item {
    display: inline-block;
    width: calc((100% - 280px) / 8);
    vertical-align: middle;
}

.pro .otherColor .item:not(:nth-child(8n)) {
    margin-right: 40px;
}

.pro .otherColor .item img {
    display: block;
    width: 100%;
}

.pro .otherColor p {
    margin: 20px auto;
    font-size: 13px;
    color: var(--themaDeepBrown);
}

.pro .proSize {
	max-width:707px;
    margin: 228px auto 348px;
    color: var(--themaDeepBrown);
}

.pro .proSize .putSize { display:flex; font-weight:bold;justify-content: space-between;}

.pro .proSize .title {
    font-size: 35px;
}

.pro .proSize img {
    display: block;
    margin: 20px auto 25px;
}

.pro .proSize .putSize > * {
    display: inline-block;
    vertical-align: top;
}

.pro .proSize .putSize .size {
    font-size: 25px;
}

.pro .proSize .putSize .name {
    font-size: 20px;
}




@media (max-width:1024px) {
.proview .rightPic{ margin-left:15%;}

}

@media (max-width:768px) {
.pro,.proview{ padding:15% 0 20%;}
.proview .leftParamter .useInto{ margin-top:25%;}
.pro .headModule{ margin-bottom:15%;}
.pro .headModule{ display:block;}
.pro .headModule .rightTxt{ margin-top:35px; font-size:20px; line-height:normal; text-align:left; max-width:inherit}
.pro .paramterModule .title{ margin:30% 0 15%}
.pro .proSize{ margin:30% 0;}
.proview .leftParamter .title{ width:100%}
.pro .otherColor{ padding-bottom:20%}
}

@media (max-width:640px) {
.proview .maxWidth{ display:block}
.proview .rightPic{ margin-left:0;}
.proview .leftParamter .useInto{ margin-top:10%; margin-bottom:15%;}
.pro .headModule .leftTitle .en{ font-size:40px;}
.pro .headModule .leftTitle .cn{ font-size:26px;}
.pro .headModule .rightTxt{font-size:18px;}
.pro .paramterModule .title{ font-size:22px;}
.pro .proSize .putSize .size{ font-size:22px;}
.pro .proSize .putSize .name{ font-size:18px;}
.pro .otherColor .item:not(:nth-child(2n)){ margin-right:40px !important;}
.pro .otherColor .item:not(:nth-child(8n)){ margin-right:0;}
.pro .otherColor .item{width: calc((100% - 40px) / 2); margin-bottom:5%;}
.pro .otherColor p{ font-size:16px;}
.pro .downLoadModule{ margin:10% auto;}
.pro .downLoadModule dt{ font-size:22px;}
.pro .downLoadModule dd a{ font-size:16px;}
.proview .rightPic a{ width:100%;}
.proview .rightPic{ max-width:inherit; width:100%}
.proview .rightPic p{ font-size:26px;}
}