.inBanBox {
    position: relative;
    /* height: calc(100vh - 100px); */
    width: 100%;
}

.inBanSwiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.inBanItem {
    width: 100%;
    height: 100%;
    position: relative;
}

.inBanImg {
    width: 100%;
    height: 100%;
    position: relative;
}

.inBanImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inBanTit {
    font-size: 60px;
    color: #f8b72a;
    font-weight: 600;
    line-height: 1.3;
}

.inBanTbox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.inBanTbox .inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.inBanBox .inBanSwiper_pagination{
    position: absolute;
    left: 0%;
    bottom: 50px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inBanSwiper_pagination .swiper-pagination-bullet{
    width: 30px;
    height: 4px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}
.inBanSwiper_pagination .swiper-pagination-bullet-active{
    width: 50px;
    height: 4px;
    background: #f8b72a;
}
.inBanBtn{
    width: 40px;
    height: 80px;
    position: absolute;
    top: 50%;
    background: #f8b72a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
}
.inBanSwiper_prev svg{
    transform: rotate(180deg);
}
.inBanSwiper_prev{
    left: 0;
}
.inBanSwiper_next{
    right: 0;
}
.inBanBtn svg{
    width: 50%;
    height: 50%;
}
.inBanBtn svg path{
    fill: #fff
}

@media(max-width:1280px){
    .inBanTit{
        font-size: 48px;
        line-height: 1.5;
    }
}
@media(max-width:1200px){
    .inBanTit{
        font-size: 42px;
        line-height: 1.5;
    }
}
@media(max-width:1024px){
    .inBanBox{
        height: 400px;
    }
    .inBanTbox .inner{
        width: 80%;
    }
}
@media(max-width:900px){
    .inBanBox{
        margin-top: 80px;
    }
}
@media(max-width:768px){
    .inBanTit{
        font-size: 36px;
    }
    .inBanBtn {
        width: 32px;
        height: 60px;
    }
}
@media(max-width:500px){
    .inBanTit{
        font-size: 28px;
    }
}






.inPBox{
    position: relative;
    background: #f7f8f9;
    overflow: hidden;
}
.inPList{
    display: flex;
    flex-wrap: wrap;
}
.inPItem{
    width: calc(33.3% - 30px);
margin-right: 45px;
margin-bottom: 45px;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.inPItem:nth-child(3n){
    margin-right: 0;
}
.inPImg{
    padding-top: 90%;
    position: relative;
    width: 100%;
    background-color: #fff;
}
.inPImg img{
    width: 80%;
    height: 100%;
    position: absolute;
    left: 50%;
    top:50%;
    object-fit: contain;
    transform: translate(-50%,-50%);
}
.inPTit{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 20px 10px;
}
.inPTit span{
    font-size: 16px;
}
.inPTit img{
    width: 15px;
    margin-left: 10px;
}
.inPTBox{
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    opacity: .9;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .7s;
    -webkit-transition: all .7s;
    padding: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    display: none;
    
}
.inPbt{
    font-size: 24px;
    color: #f8b72a;
    text-align: center;
}
.inPText{
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}
.inPTBox ul li{
    display: flex;
    align-items: center;
    position: relative;
}
.inPTBox ul li a::before{
    width: 6px;
    height: 6px;
    position: absolute;
    left: -15px;
    top: 50%;
    content: '';
    background: #f8b72a;
    border-radius: 50%;
    transform: translateY(-50%);
}
.inPTBox ul li a{
    font-size: 16px;
    transition: all 0.48s;
    position: relative;
}
.inPTBox ul li a:hover{
    color: #f8b72a;
}
.inPbtn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f8b72a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.inPbtn>img{
    width: 50%;
    height: 50%;
}
.inPItem:hover .inPTBox{
    display: flex;
}
@media(max-width:1280px){
    .inPItem{
        width: calc(33.3% - 16px);
        margin-bottom: 24px;
        margin-right: 24px;
    }
}
@media(max-width:1024px){
    .inPItem{
       width: calc(50% - 15px);
       margin-right: 30px;
       margin-bottom: 30px;
    }
    .inPItem:nth-child(3n){
        margin-right: 30px;
    }
    .inPItem:nth-child(2n){
        margin-right: 0;
    }
}
@media(max-width:680px){
    .inPItem{
       width: 100%;
       margin-right: 0 !important;
       margin-bottom: 10px;
    }
    .inPbt{
        font-size: 20px;
    }
    .inPTBox ul li a{
        font-size: 14px;
    }
}





.inCBox{
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.inCBox .proTit:hover{
    color: #f8b72a;
}
.inCSwiper{
    width: 100%;
    height: 100%;
    position: relative;
}
.inCItem{
    width: 100%;
    height: 100%;
    position: relative;
}
.inCimg{
    width: 100%;
    height: 100%;
}
.inCimg::after{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .4);
    content: '';
}
.inCimg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.inCTbox{
    width: 100%;
    padding-top: 10%;
}
.inCTbox{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.inCTit{
    font-size: 28px;
    color: #fff;
    text-align: center;
}
.inCText{
    font-size: 16px;
    color: #fff;
    opacity: .8;
    text-align: center;
}
.inCBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
.inCqBox{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
}
.inCqBtn{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8b72a;
    margin: 0 10px;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
}
.inCqBtn img{
    width: 50%;
    height: 50%;
}
.inCqBtn:hover{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.inCSwiper_prev img{
    transform: rotate(180deg);
}
.inCRSwiper{
    width: 100%;
    height: 150px;
    position: absolute;
    left: 0;
    bottom: 0;
}
.inCRItem{
    height: 100%;
    background: rgba(0, 0, 0, .25);
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.inCRItem p{
    font-size: 20px;
    color: #fff;
}
.inCRItem.swiper-slide-thumb-active{
    background: #f8b72a;
}
.inCRItem.swiper-slide-thumb-active p{
   color: #fff;
}
@media(max-width:1280px){
    .inCBox{
        height: 700px;
    }
    .inCRSwiper{
        height: 130px;
    }
    .inCTit{
        font-size: 24px;
    }
}
@media(max-width:1024px){
    .inCBox{
        height: 700px;
    }
    .inCRSwiper{
        height: 120px;
    }
    .inCTit{
        font-size: 20px;
    }
}
@media(max-width:680px){
    .inCBox {
        height: 600px;
    }
    .inCRItem p {
        font-size: 18px;
    }
    .inCRItem{
        padding: 20px;
    }
    .inCTit{
        font-size: 18px;
    }
    .inCRSwiper {
        height: 100px;
    }

}
@media(max-width:500px){
    .inCTit {
        font-size: 16px;
    }
    .inCRSwiper {
        height: 80px;
    }
    .inCBox {
        height: 500px;
    }
}





.inABox{
    overflow: hidden;
    position: relative;
}
.inATbox{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inALeft{
    width: 50%;
}
.inATit{
    font-size: 42px;
    font-weight: 600;
}
.inAText{
    font-size: 16px;
    font-weight: 300;
    margin: 20px 0 50px;
}
.inAImg{
    width: 45%;
    padding-top: 35%;
    position: relative;
}
.inAImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.inAList{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
}
.inAItem{
    width: 20%;
}
.inAItem p{
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    font-size: 16px;
    padding: 10px 0;
}
.inANum{
    display: flex;
    align-items: center;
    padding: 10px 0;
}
.inANum b{
    font-size: 56px;
    color: #f8b72a;
    font-weight: 600;
    line-height: 1;
}
.inANum i{
    font-size: 24px;
    color: #f8b72a;
}
.inAItem span{
    font-size: 16px;
}
@media(max-width:1280px){
    .inANum b {
        font-size: 52px;
        color: #f8b72a;
        font-weight: 300;
        line-height: 1;
    }
}
@media(max-width:900px){
    .inATbox{
        flex-wrap: wrap;
    }
    .inALeft{
        width: 100%;
        margin-bottom: 50px;
    }
    .inAImg{
        width: 100%;
        padding-top: 65%;
    }
    .inAText {
font-size: 16px;
font-weight: 300;
margin: 20px 0 30px;
}
.inANum b {
font-size: 48px;
}
.inATit {
font-size: 36px;
}
.inAItem{
width: 23%;
}
}
@media(max-width:680px){
    .inAList{
        flex-wrap: wrap;
        margin-top: 20px;
    }
    .inAItem{
        width: 48%;
        margin-bottom: 30px;
    }
    .inANum b {
font-size: 42px;
}
}





.inGBox{
    overflow: hidden;
    position: relative;
    background: url(../images/inGbg.webp) no-repeat center / cover;
}
.inGTit{
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
    color: #fff;
}
.inGBtn{
    width: 200px;
    height: 50px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    opacity: .8;
}
.inGBtn:hover{
    opacity: 1;
}
.inGBtn span{
    font-size: 18px;
    color: #fff;
    position: relative;
}
.inGBtn img{
    width: 15px;
    margin-left: 10px;
}



.inXBox{
    position: relative;
    background-image: url('../images/proWbg.webp'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    /*background-attachment: fixed; */
}
.inXBox .inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.inXTit{
   font-size: 42px;
   font-weight: 600;
   color: #fff;
   text-align: center;
   margin-bottom: 30px;
}
@media (max-width: 1680px) {
    .inXTit{
        font-size: 36px;
    }
}
@media (max-width: 1280px) {
    .inXTit{
        font-size: 32px;
        margin-bottom: 20px;
    }
}
@media (max-width: 900px) {
    .inXTit{
        font-size: 28px;
        margin-bottom: 10px;
    }
}
@media (max-width: 680px){
    .inXTit {
        font-size: 24px;
        margin-bottom: 10px;
    }
}



.inNBox{
    overflow: hidden;
    position: relative;
    background: #f7f8f9;
}
.inNList{
    display: flex;
    align-items: center;
}
.inNItem{
    padding: 50px 30px;
    position: relative;
    transition: all 0.48s;
}
.inNTime{
    font-size: 18px;
    color: #f8b72a;
}
.inNTit{
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    height: 80px;
    margin-top: 10px;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    transition: all 0.48s;
}
.inNTit:hover{
    color: #f8b72a;
}
.inNText{
    margin: 20px 0;
    font-size: 16px;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    transition: all 0.48s;
}
.inNImg{
    width: 100%;
    padding-top: 65%;
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
}
.inNImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.48s;
}
.inNSwiper{
    width: 100%;
}
.inNBtn{
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background: #f8b72a;
 display: flex;
 align-items: center;
 justify-content: center;   
}
.inNBtn img{
    width: 60%;
    height: 60%;
}
.inNItem::after{
    width: 0;
    height: 3px;
    background: #f8b72a;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    content: '';
    transition: all 0.48s;
}
.inNItem:hover::after{
    width: 100%;
}
.inNItem:hover{
    background: #fff;
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}
.inNItem:hover .inNImg img{
    transform: scale(1.1);
}
@media(max-width:1200px){
    .inNItem{
        padding: 30px 20px 50px;
    }
}
@media(max-width:1200px){
    .inNList{
        flex-wrap: wrap;
    }
}
@media(max-width:768px){
    .inNItem{
        background: #fff;
        margin-bottom: 10px;
    }
    .inNTit{
        font-size: 20px;
    }
}










/* 內頁banner */
.proBan {
    width: 100%;
    height: 600px;
    position: relative;
}

.proBan img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proBTit {
    width: 100%;
    position: absolute;
    left: 0%;
    top: 15%;
}

.proBTit .inner {
    font-size: 60px;
    font-weight: 600;
    color: #f8b72a;
}

.NavBox {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}

.NavList {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.NavIcon {
    width: 25px;
    height: 25px;
    position: relative;
    margin-right: 8px;
}

.NavIcon svg {
    width: 100%;
    height: 100%;
}

.NavIcon svg path {
    fill: #f8b72a;
}

.NavA {
    font-size: 18px;
    color: #fff;

}

.NavB {
    font-size: 18px;
    color: #f8b72a;
}

.NavList p {
    font-size: 18px;
    color: #fff;
    margin: 0 8px;
}
.NavA:hover{
    color: #f8b72a;
    text-decoration: underline;
}


@media(max-width:1368px){
    .proBTit .inner {
        font-size: 52px;
    }
}
@media(max-width:1280px){
    .proBTit .inner {
        font-size: 48px;
    }
}
@media(max-width:1024px){
    .proBTit .inner {
        width: 80%;
        font-size: 42px;
    }
    .proBan{
        height: 500px;
    }
    .NavA{
        font-size: 16px;
    }
    .NavB{
        font-size: 16px;
    }
    .NavIcon {
        width: 22px;
        height: 22px;
    }
    .proBTit{
        top: 45%;
    }
    .NavBox{
        display: none;
    }
}
@media(max-width:680px){
    .proBTit .inner {
        font-size: 36px;
    }
    .proBan{
        height: 400px;
    }
}
@media(max-width:500px){
    .proBTit .inner {
        font-size: 28px;
    }
}






/* 聯絡我們 */
.conCBox{
    background: #f1f2f3;
    position: relative;
}
.conCTbox{
    padding: 100px 50px;
    background: #fff;
    display: flex;
    justify-content: space-between;
}
.conCLeft{
    width: 40%;
    position: relative;
}
.conCItem{
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #f1f2f3;
    display: flex;
}
.conCItem:last-child{
    border-bottom: none;
}
.conCIcon{
    position: relative;
}
.conCIcon img {
width: 35px;
}
.conCRbox {
width: calc(100% - 50px);
margin-left: 10px;
}
.conCRbox p {
font-size: 28px;
line-height: 1.5;
}
.conCRbox a {
font-size: 20px;
opacity: .8;
}
.conCFrom{
width: 55%;

}
.conCFrom form{
display: flex;
flex-wrap: wrap;
}
.conCFItem{
width: 48%;
margin-right: 4%;
height: 50px;
background: #f7f8f9;
border: 1px solid rgba(0, 0, 0, .02);
padding: 0 20px;
margin-bottom: 20px;
}
.conCFItem:nth-child(2n){
margin-right: 0;
    z-index: 99;
}
.conCFItem span{
color: #f8b72a;
font-size: 16px;
}
.conCFItem input{
width: calc(100% - 30px);
height: 100%;
font-size: 18px;
background: transparent;
margin-left: 10px;
}
#cxcp li{
    padding: 10px;
    cursor: pointer;
    text-align: left;
}
#cxcp{
    position: absolute;
    top: 100%;
    width: 100%;
    background: #fff;
    left: 0;
    display: none;
    max-height: 320px;
    overflow: auto;
}
.conCFItem2{
width: 100%;
display: flex;
background: #f7f8f9;
padding: 20px;
}
.conCFItem2 span{
font-size: 18px;
color: #f8b72a;
}
.conCFItem2 textarea{
margin-left: 10px;
height: 80px;
width: calc(100% - 30px);
background: transparent;
}
.conCBtn{
margin-top: 30px;
}

@media(max-width:1280px){
.conCRbox a {
font-size: 18px;
opacity: .8;
}
.conCRbox p {
font-size: 24px;
}
.conCIcon img {
width: 30px;
}
.conCTbox{
padding: 50px 30px;
}
}
@media(max-width:900px){
.conCTbox{
flex-wrap: wrap;
}
.conCLeft{
width: 100%;
margin-bottom: 30px;
}
.conCFrom{
width: 100%;
}
.conCRbox p {
    font-size: 20px;
    }
}
@media(max-width:680px){
.conCFItem{
width: 100%;
margin-right: 0;
}
.conCRbox p {
font-size: 18px;
}
.conCTbox{
    padding: 30px 20px;
    }
    .conCRbox a {
        font-size: 16px;
    }
    .conCFItem{
        padding: 0 10px;
        font-size: 14px;
    }
    .conCFItem input{
        font-size: 16px;
    }
    .conCFItem2{
        padding: 15px;
    }
    .conCIcon img {
        width: 25px;
    }
}



.conMapBox{
    position: relative;
    height: 300px;
}
.conMap{
    width: 100%;
    height: 100%;
    position: relative;
}




.newXBox{
    position: relative;
    overflow: hidden;
}
.newXList{
    position: relative;
}
.newXItem{
    position: relative;
    background: #f7f8f9;
}
.newXImg{
    width: 100%;
    padding-top: 100%;
    position: relative;
}
.newXImg img{
    width: 80%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    object-fit: contain;
    transform: translate(-50%,-50%);
}
.newXTit{
    font-size: 20px;
    padding: 20px;
    background: #fff;
    transition: all 0.48s;
}
.newXItem:hover .newXTit{
    color: #f8b72a;
}
.newXBtn{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.48s;
    z-index: 2;
    border: 1px solid rgba(0, 0, 0, .05);
}
.newSwiper_prev{
    left: -60px;
}
.newXBtn img{
    width: 40%;
    height: 40%;
}
.newSwiper_prev img{
    transform: rotate(180deg);
}
.newSwiper_next{
    left: auto;
    right: -60px;
}
.newXBtn .img1{
    display: block;
}
.newXBtn .img2{
    display: none;
}
.newXBtn:hover{
    background: #f8b72a;
}
.newXBtn:hover .img1{
    display: none;
}
.newXBtn:hover .img2{
    display: block;
}







.proNBox{
    position: relative;
}
.proNList {
    position: relative;
    display: flex;
    justify-content: space-between;
}

.proNItem {
    padding: 30px;
    transition: all 0.48s;
}

.proNTime {
    font-size: 20px;
    transition: all 0.48s;
}

.proNTit {
    font-size: 28px;
    color: #f8b72a;
    font-weight: 600;
    margin: 0 0 10px;
    transition: all 0.48s;
}

.proNText {
    font-size: 16px;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    transition: all 0.48s;
}

.proNImg {
    width: 100%;
    padding-top: 65%;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
}

.proNImg img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    transition: all 0.48s;
}

.proNItem:hover {
    background: #f8b72a;
}

.proNItem:hover .proNTime {
    color: #fff;
}

.proNItem:hover .proNTit {
    color: #fff;
}

.proNItem:hover .proNText {
    color: #fff;
}

.proNItem:hover .proNImg img {
    width: 110%;
    height: 110%;
}
.proNSwiper{
    width: 100%;
}
@media(max-width:900px){
    .proNTit{
        font-size: 24px;
    }
}








/* 下載核心 */
.proYBox {
    position: relative;
    background: #fff;
    overflow: hidden;
}


.proYList {
    display: flex;
    flex-wrap: wrap;
}

.proYItem {
    display: flex;
    align-items: center;
    width: calc(33.3% - 10px);
    margin-right: 15px;
    cursor: pointer;
    background: #eee;
    border-radius: 10px;
    margin-bottom: 15px;
}

.proYItemAct .proYv {
    background: #f8b72a;
}

.proYItem:hover .proYv {
    background: #f8b72a;
}

.proYItem:nth-child(3n) {
    margin-right: 0;
}

.proYv {
    width: 70px;
    height: 100%;
    font-size: 18px;
    display: flex;
    align-items: center;
    background: #ccc;
    border-radius: 10px 0 0 10px;
    color: #fff;
    justify-content: center;
    transition: all 0.48s;
}

.proYText {
    width: calc(100% - 70px);
    padding: 20px 0 20px 17px;
    font-size: 20px;
    line-height: 1.5;
}
.dowPItem{
            position: relative;
            margin-top: 50px;
        }
        .dowPTit{
            font-size: 28px;
        }

        @media(max-width:1024px){
    .dowPTit{
        font-size: 24px;
    }
}
@media(max-width:680px){
    .dowPTit{
        font-size: 20px;
    }
}
@media(max-width:500px){
    .dowPTit{
        font-size: 18px;
    }
}




        .dowPList{
            display: flex;
            flex-wrap: wrap;
            margin: 30px 0;
        }
        .dowPDItem{
            width: 24%;
            margin-right: 1%;
            position: relative;
        }
        .dowPDIcon{
            width: 100%;
            padding-top: 80%;
            position: relative;
            background: #f7f8f9;
        }
        .dowPDIcon img{
            width: 80px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .dowPDTit{
            font-size: 18px;
            background: #eee;
            text-align: center;
            padding: 10px;
            transition: all 0.48s;
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .dowPDItem:hover .dowPDTit{
            background: #f8b72a;
        }
        .dowPDTbox{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: #f7f8f9;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.48s;
        }
        .dowPDSvg{
            margin: 0 20px;
        }
        .dowPDSvg svg{
            width: 40px;
            height: 40px;
        }
        .dowPDSvg svg path{
            fill: #585a5b;
        }
        .dowPDItem:hover .dowPDTbox{
            opacity: 1;
        }
        .dowPDSvg:hover svg path{
            fill: #f8b72a;
        }
        .dowPDImg{
            width: 100%;
            padding-top: 80%;
            position: relative;
        }
        .dowPDImg img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .dowPDImg .dowPDplay{
            width: 45px;
            height: 45px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%); 
        }
@media(max-width:1280px){
    .proYText {
        font-size: 18px;
    }
}
@media(max-width:1024px){
    .proYItem{
        width: calc(50% - 15px);
        margin-right: 20px;
    }
    .proYItem:nth-child(3n){
        margin-right: 20px;
    }
    .proYItem:nth-child(2n){
        margin-right: 0;
    }
    .dowPDItem{
        width: 32%;
    }
}
@media(max-width:900px){
    .dowPDItem{
        width: 49%;
    }
    .dowPDSvg svg {
width: 30px;
height: 30px;
}
}
@media(max-width:768px){
    .proYItem{
        width: 100%;
        margin-right: 0 !important;
    }
   
    
}
@media(max-width:680px){
    .dowPDItem{
        width: 100%;
    }
    .proYText {
        font-size: 16px;
    }
    .proYv {
        width: 70px;
        font-size: 16px;
    }
}
@media(max-width:680px){
    .proYv {
        width: 50px;
        font-size: 14px;
    }
    .proYText {
        padding: 15px;
        width: calc(100% - 50px);
    }
}





/* 工業應用 */
.appEBox{
    position: relative;
    background: #f7f8f9;
}
.appEText{
    font-size: 18px;
}
.appEList{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
}
.appEItem{
    width: 49%;
    margin-right: 1%;
    margin-bottom: 30px;
}
.appEImg{
    width: 100%;
    padding-top: 45%;
    position: relative;
}
.appEImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.appETit{
    font-size: 26px;
    padding-top: 10px;
    position: relative;
    margin-top: 20px;
}
.appETit::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 4px;
    background: #f8b72a;
}
/* .appEItem:nth-child(5),.appEItem:nth-child(6),.appEItem:nth-child(7){
    width: 32%;
}
.appEItem:nth-child(5) .appEImg,.appEItem:nth-child(6) .appEImg,.appEItem:nth-child(7) .appEImg{
    padding-top: 65%;
} */
@media(max-width:1280px){
    .appETit {
        font-size: 24px;
    }
}
@media(max-width:1024px){
    .appEText {
        font-size: 16px;
    }
    .appETit {
        font-size: 20px;
    }
}
@media(max-width:680px){
    .appEItem{
        width: 100% !important;
    }
}





/* 新增 */

.proMText{
    font-size: 18px;
}
.proMTBox{
    position: relative;
    margin-top: 70px;
}
.proDBox{
    position: relative;
}
.proDBg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.proDBg::after{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    background: rgba(0, 0, 0, .3);
}
.proDBg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.proDList{
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
.proDItem{
    width: calc(50% - 20px);
    margin-right: 40px;
    padding: 30px;
    background: rgba(0, 0, 0, .3);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin-bottom: 30px;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
}
.proDItem:nth-child(2n){
    margin-right: 0;
}
.proDTit{
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}
.proDText{
    font-size: 16px;
    color: #fff;
    font-weight: 300;
    opacity: .8;
}
.proDItem:hover{
    background: #f8b72a;
}
.proDItem2{
    width: calc(33.3% - 20px);
    margin-right: 30px;
    padding: 30px;
    background: rgba(0, 0, 0, .5);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    margin-bottom: 30px;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
}
.proDItem2:nth-child(3n){
    margin-right: 0;
}
.proDItem2:hover{
    background: rgb(248, 183, 42,.8);
}

@media(max-width:1280px){
    .proMText {
        font-size: 16px;
    }
    .proMTBox{
        margin-top: 50px;
    }
}
@media(max-width:1200px){
    .proDItem {
        width: calc(50% - 20px);
        margin-right: 20px;
    }
    .proDItem:nth-child(3n){
        margin-right: 20px;
    }
    .proDItem:nth-child(2n){
        margin-right: 0;
    }
    .proDItem2 {
        width: calc(50% - 20px);
        margin-right: 20px;
    }
    .proDItem2:nth-child(3n){
        margin-right: 20px;
    }
    .proDItem2:nth-child(2n){
        margin-right: 0;
    }
}
@media(max-width:768px){
    .proDTit{
        font-size: 24px;
    }
}
@media(max-width:680px){
    .proDItem {
        width:100%;
        margin-right: 0 !important;
    }
    .proDItem2 {
        padding: 20px;
        width:100%;
        margin-right: 0 !important;
    }
    .proDTit {
        font-size: 22px;
    }
}
.proXBox {
    overflow: hidden;
    position: relative;
    background: url(../images/proXBg.webp) no-repeat center / cover;
}

.proXp {
    font-size: 20px;
    color: #fff;
    opacity: .8;
    text-align: center;
}

.proXTBox {
    display: flex;
}

.proXLeft {
    width: 45%;
    position: relative;
}

.proXItem {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
}

.proXItem:last-child {
    border-bottom: 0;
}

.proXIcon {
    position: relative;
}

.proXIcon img {
    width: 35px;
}

.proXRbox {
    width: calc(100% - 50px);
    margin-left: 10px;
}

.proXRbox p {
    font-size: 28px;
    color: #fff;
    line-height: 1.5;
}

.proXRbox a {
    font-size: 20px;
    color: #fff;
    opacity: .8;
}

.proXRbox a:hover {
    color: #f8b72a;
}

.proXForm {
    width: 50%;
}

.proXForm form {
    display: flex;
    flex-wrap: wrap;
}

.proXFItem {
    width: 48%;
    border-radius: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding: 15px;
    display: flex;
    align-items: center;
    margin-right: 2%;
    margin-bottom: 30px;
    position: relative;
}
.proXFText{
    width: 100%;
    border-radius: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    padding: 15px;
    display: flex;
    margin-right: 2%;
    margin-bottom: 30px;
}
.proXList {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.proXFItem span {
    font-size: 18px;
    color: #f8b72a;
    line-height: 1;
}

.proXFItem input {
    width: calc(100% - 30px);
    margin-left: 10px;
    font-size: 20px;
    background: transparent;
    line-height: 1;
    color: #fff;
}
.proXList span {
    font-size: 18px;
    color: #f8b72a;
    line-height: 1;
}

.proXList textarea {
    width: calc(100% - 30px);
    margin-left: 10px;
    font-size: 18px;
    background: transparent;
    line-height: 1;
    height: 80px;
}
@media (max-width: 1280px) {
    .proXRbox a {
        font-size: 18px;
        opacity: .8;
    }
    .proXRbox p {
        font-size: 24px;
    }
    .proXIcon img {
width: 30px;
}
.proXFItem input{
font-size: 18px;
}
}
@media (max-width: 900px) {
    .proXList{
        flex-wrap: wrap;
    }
    .proXLeft{
        width: 100%;
    }
    .proXForm{
        width: 100%;
        margin-top: 30px;
    }
    .proXp{
        font-size: 18px;
    }
    .proXRbox p {
        font-size: 20px;
    }
}
@media (max-width: 680px) {
    .proXFItem {
        width: 100%;
    }
    .proXRbox a {
        font-size: 16px;
    }
    .proXRbox p {
        font-size: 18px;
    }
    .proXIcon img {
        width: 26px;
    }
    .proXp{
        font-size: 16px;
    }
}

.proQBox{
    position: relative;
    background: #f7f8f9;
}
.proQList{
    position: relative;
}
.proQItem{
    position: relative;
}
.proQImg {
    width: 100%;
    padding-top: 65%;
    position: relative;
}
.proQImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
/* .proQImg::after{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    background: rgba(0, 0, 0, .3);
} */
.proQTBox{
    padding: 20px;
    background: #fff;
}
.proQTit {
    font-size: 24px;
    margin-bottom: 20px;
    transition: all 0.48s;
}
.proQTBox .inNBtn{
    opacity: 0;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
}
.proQItem:hover .proQTBox .inNBtn{
    opacity: 1;
}
.proQBtn{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.48s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    z-index: 6;
}
.proQBtn svg{
    width: 30%;
    height: 30%;
}
.proQBtn svg path{
    fill: #f8b72a;
}
.proQSwiper_prev{
    left: -70px;
}
.proQSwiper_prev svg{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.proQSwiper_next{
    right: -70px;
}
.proQBtn:hover{
    background: #f8b72a;
}
.proQBtn:hover svg path{
    fill: #fff;
}
@media(max-width:1480px){
    .proQSwiper_prev{
        left: -20px;
    }
    .proQSwiper_next{
        right: -20px;
    }  
    .proQBtn {
        width: 45px;
        height: 45px;
    }
}

@media(max-width:680px){
    .proQTit {
        font-size: 20px;
    }
    .proQTBox .inNBtn{
        opacity: 1;
    }
    .inNBtn {
        width: 35px;
        height: 35px;
    }
    /* .proQSwiper_prev{
        left: -10px;
    }
    .proQSwiper_next{
        right: -10px;
    }   */
    .proQBtn {
        width: 40px;
        height: 40px;
    }
}
/* 工業應用 */
.strFList{
    display: flex;
    flex-wrap: wrap;
    margin-top: 50px;
    padding: 0 5%;
    justify-content: center;
}
.strFItem{
    width: 15.5%;
    margin-right: 1%;
    position: relative;
}
.strFItem::after{
    width: 0%;
    height: 4px;
    background: #f8b72a;
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    transition: all 0.48s;
}
.strFItem:hover::after{
    width: 100%;
}
.strFImg{
    width: 100%;
    padding-top: 100%;
    position: relative;
}
.strFImg::after{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    background: rgba(0, 0, 0, .2);
}
.strFImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.strFTit{
    width: 100%;
    font-size: 20px;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 5%;
    line-height: 1.2;
}
@media(max-width:1680px){
    .strFList{
   padding: 30px;
}
}
@media(max-width:1468px){
    .strFItem {
        width: 19%;
        margin-right: 1%;
        margin-bottom: 1%;
    }
}
@media(max-width:1200px){
    .strFTit{
        font-size: 18px;
        padding: 15px;
    }
    .strFItem {
        width: 24%;
        margin-right: 1%;
    }
}
@media(max-width:1024px){
   
    .strFList{
        padding: 0 2%;
    }
}
@media(max-width:900px){
    .strFItem {
        width: 32%;
        margin-right: 1%;
    }
    
}
@media(max-width:680px){
    .strFItem {
        width: 49%;
        margin-right: 1%;
    }
}


.strCBox{
    position: relative;
    padding-bottom: 0;
}
.strCTit{
    font-size: 18px;
}
.strCImg{
    margin-top: 50px;
}
.strCImg img{
    width: 700px;
    max-width: 100%;
}
@media(max-width:900px){
    .strCTit {
        font-size: 16px;
    }
}
.strXBox{
    position: relative;
    overflow: hidden;
   
}
.strXList{
    position: relative;
}
.strXItem{
    position: relative;
    background: #f7f8f9;
}
.strXImg{
    width: 100%;
    padding-top: 100%;
    position: relative;
}
.strXImg img{
    width: 80%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    object-fit: contain;
    transform: translate(-50%,-50%);
}
.strXTit{
    font-size: 22px;
    padding: 20px;
    background: #fff;
    transition: all 0.48s;
}
.strXItem:hover .strXTit{
    color: #f8b72a;
}
.strXBtn{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    background: #f7f8f9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.48s;
}
.strSwiper_prev{
    left: -60px;
}
.strXBtn img{
    width: 40%;
    height: 40%;
}
.strSwiper_prev img{
    transform: rotate(180deg);
}
.strSwiper_next{
    left: auto;
    right: -60px;
}
.strXBtn .img1{
    display: block;
}
.strXBtn .img2{
    display: none;
}
.strXBtn:hover{
    background: #f8b72a;
}
.strXBtn:hover .img1{
    display: none;
}
.strXBtn:hover .img2{
    display: block;
}
@media(max-width:1024px){
    .strXTit {
        font-size: 20px;
    }
}

.strRBox{
    background: #f1f2f3;
    position: relative;
    overflow: hidden;
}
.strRList{
    position: relative;
}
.strRItem{
    position: relative;
    background: #f7f8f9;
}
.strRImg{
    width: 100%;
    padding-top: 100%;
    position: relative;
}
.strRImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    object-fit: cover;
    transform: translate(-50%,-50%);
}
.strRTit{
    font-size: 22px;
    padding: 20px;
    background: #fff;
    transition: all 0.48s;
}
.strRItem:hover .strRTit{
    color: #f8b72a;
}
.strRBtn{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.48s;
}
.newSwiper_prev{
    left: -60px;
}
.strRBtn img{
    width: 40%;
    height: 40%;
}
.strRSwiper_prev img{
    transform: rotate(180deg);
}
.strRSwiper_next{
    left: auto;
    right: -60px;
}
.strRBtn .img1{
    display: block;
}
.strRBtn .img2{
    display: none;
}
.strRBtn:hover{
    background: #f8b72a;
}
.strRBtn:hover .img1{
    display: none;
}
.strRBtn:hover .img2{
    display: block;
}

@media (max-width: 1480px) {
    .newSwiper_prev {
        left: -20px;
    }
    .newSwiper_next {
        right: -20px;
    }
}




/* 商品 */
.proUBox {
    position: relative;
    background: #eee;
    padding: 70px 0;
}

.proUText {
    font-size: 18px;
}
@media (max-width: 1368px){
    .proUBox {
padding: 50px 0;
}
.proUText {
font-size: 16px;
}
}




.proYBox {
    position: relative;
    background: #fff;
    overflow: hidden;
}


.proYList {
    display: flex;
    flex-wrap: wrap;
}



.proPBox {
    display: flex;
    margin-top: 50px;
}

.proPLeft {
    width: 312px;
    margin-right: 26px;
    
}

.proPLItem {
    position: relative;
    margin-bottom: 50px;
}

.proPLTit {
    font-size: 28px;
    line-height: 1;
    font-weight: 500;
}

.proPLfen {
    margin: 20px 0;
    display: flex;
}

.proPLf {
    font-size: 18px;
    line-height: 1;
    margin-right: 30px;
    padding: 8px 0;
}

.proPLfAct,
.proPLf:hover {
    color: #f8b72a;
    border-bottom: 1px solid #f8b72a;
}

.proPFList {
    display: flex;
    flex-wrap: wrap;
}

.proPFItem {
    display: flex;
    align-items: center;
    width: 50%;
    margin-bottom: 15px;
}

.proPFItem .proPinput {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: #e1e1e1;
    margin-right: 10px;
    position: relative;
}
.proPFItem.proPFItemAct .proPinput{
    background: #f8b72a;
}

.proPinput img{
    width: 80%;
    height: 80%;
    opacity: 0;
    position: absolute;
    left: 10%;
    bottom: 10%;
}
.proPFItemAct .proPinput img{
    opacity: 1;
}
.proPFItem span {
    font-size: 16px;
    color: #666;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
}

.proPFItem:hover span,.proPinput.proPFItemAct span {
    color: #f8b72a;
}

.proPRig {
    /* width: calc(100% - 350px); */
    width: 100%;
}

.proPList {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.proPRItem {
    width: calc(25% - 10px);
    margin-bottom: 13.3px;
    margin-right: 13.3px;
    background: #f7f8f9;
    position: relative;
    cursor: pointer;
}

.proPRItem:hover .proPRTit {
    background: #f8b72a;
    color: #fff;
}

.proPRItem:nth-child(4n) {
    margin-right: 0;
}

.proPRImg {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.proPRImg img {
    width: 80%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    transition: all 0.48s;
}

.proPRTit {
    padding: 12px;
    background: #e1e1e1;
    text-align: center;
    font-size: 18px;
    /* position: absolute;
    left: 0;
    bottom: 0; */
    width: 100%;
    transition: all 0.48s;
}

.proPRItem:hover .proPRImg img {
    transform: scale(1.1) translate(-50%, -50%);
}
@media(max-width:1280px){
    .proPLTit {
        font-size: 24px;
    }
    .proPLf {
        font-size: 16px;
    }
    .proPFItem label {
        font-size: 14px;
    }
    .proPFItem input {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
}
.proPLeft {
    width: 264px;
}
.proPRig {
width: calc(100% - 300px);
}
.proPRItem{
    width: calc(33.3% - 8px);
    margin-right: 12px;
    margin-bottom: 12px;
}
.proPRItem:nth-child(4n){
    margin-right: 12px;
    margin-bottom: 12px;
}
.proPRItem:nth-child(3n){
    margin-right: 0;
    margin-bottom: 0 ;
}
}
@media(max-width:1024px){
    .proPRItem{
        width: 48%;
        margin-right: 2%;
        margin-bottom: 2% ;
    }
    .proPRItem:nth-child(3n){
        margin-right: 2%;
        margin-bottom: 2% ;
    }
}
@media(max-width:768px){
    .proPBox{
        flex-wrap: wrap;
    }
    .proPLeft{
        width: 100%;
    }
    .proPRig {
        width: 100%;
    }
}
@media(max-width:680px) {
    .proPRItem {
        width: 100%;
        margin-right: 0;
    }
}







.proWBox {
    overflow: hidden;
    position: relative;
    background: url(../images/proWbg.webp) no-repeat center / cover;
}



.proWList {
    display: flex;
    justify-content: space-between;
}

.proWItem {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.proWIcon img{
    width: 40px;
    height: 40px;
}
.proWIcon {
    width: 70px;
    height: 70px;
}

.proWTit {
    font-size: 32px;
    color: #fff;
    font-weight: 600;
    margin: 15px 0;
}

.proWText {
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-weight: 300;
}
@media(max-width:1368px) {
    .proWIcon {
        width: 50px;
        height: 50px;
    }
    .proWTit {
        font-size: 28px;
    }
}
@media(max-width:1200px) {
    .proWIcon {
        width: 40px;
        height: 40px;
    }
    .proWText {
        font-size: 15px;
    }
    .proWItem {
        width: 32%;
    }
}
@media(max-width:1024px) {
    .proWTit {
font-size: 24px;
}
}
@media(max-width:900px) {
    .proWList{
        flex-wrap: wrap;
    }
    .proWItem{
        width: 100%;
        padding: 20px;
        background: rgba(255, 255, 255, .4);
        border-radius: 8px;
        margin-top: 15px;

    }
}
@media(max-width:680px){
    .proWTit {
        font-size: 24px;
        }
        .proWText {
            font-size: 14px;
        }
        .proWIcon {
            width: 35px;
            height: 35px;
        }
}







.proVBox {
    overflow: hidden;
    background: #f1f2f3;
}

.proVItem {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 70px 0;
}

.proVImg {
    width: 50%;
    background: #fff;
    padding-top: 40%;
    position: relative;
}

.proVImg::before {
    content: '';
    position: absolute;
    top: -40px;
    width: 40%;
    height: 40px;
    background: #f8b72a;
    z-index: 0;
    right: 0;
}

.proVImg img {
    z-index: 2;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

.proVTBox {
    width: 47%;
}

.proVTit {
    font-size: 39px;
    font-weight: 600;
    position: relative;
}

.proVTit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 34px;
    height: 4px;
    background: #f8b72a;
}

.proVText {
    font-size: 18px;
    font-weight: 300;
    margin-top: 50px;
}

.proVItem1 .proVImg::before {
    left: 0;
}

.proVItem1 .proVTit {
    text-align: end;
}

.proVItem1 .proVTit::after {
    right: 0;
    left: auto;
}

.proABox {
    position: relative;
}

.proAImg {
    width: 100%;
    height: 65%;
    position: absolute;
    left: 0;
    top: 0;
}

.proAImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

.proATbox {
    width: 90%;
    margin: 0 auto;
    /* margin-top: -130px; */
    background: rgba(255, 255, 255, .4);
    border-radius: 30px;
    padding: 30px;
    position: relative;
}

.proAItem {
    border-radius: 20px;
    background: #fff;

    transition: all 0.48s;
    margin-bottom: 20px;
    overflow: hidden;
}

.proATop {
    display: flex;
    /*align-items: center;
    */padding: 20px 30px;
    position: relative;
    transition: all 0.48s;
    width: 100%;
    justify-content: center;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
}

.proAIcon {
    width: 30px;
    height: 30px;
    margin-top: 5px;
    object-fit: contain;
    margin-right: 20px;
}

.proAIcon svg {
    width: 100%;
    height: 100%;
}

.proAIcon svg path {
    fill: #f8b72a;
}

.proATop p {
    font-size: 20px;
    font-weight: 600;
    transition: all 0.48s;
}

.proAjia {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

.proAjia svg {
    width: 100%;
    height: 100%;
}

.proAjia svg path {
    fill: #f8b72a;
}

.proAjian {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    display: none;
}

.proAjian svg {
    width: 100%;
    height: 100%;
}

.proAjian svg path {
    fill: #f8b72a;
}

.proAItem:hover .proATop {
    background: #f8b72a;
}

.proAItem:hover .proAIcon svg path {
    fill: #fff;
}

.proAItem:hover .proATop p {
    color: #fff;
}

.proAItem:hover .proAjia svg path {
    fill: #fff;
}

.proACon {
    width: 100%;
    padding-top: 300px;
    position: relative;
}

.proABon {
    padding: 20px 60px;
    font-size: 18px;
}

.proAItemAct .proATop {
    background: #f8b72a;
}

.proAItemAct .proAIcon svg path {
    fill: #fff;
}

.proAItemAct .proATop p {
    color: #fff;
}

.proAItemAct .proAjian svg path {
    fill: #fff;
}

.proAItemAct .proAjia {
    display: none;
}

.proAItemAct .proAjian {
    display: block;
}

@media(max-width:1368px){
    .proVTit {
        font-size: 36px;
    }
    .proVText {
        font-size: 16px;
    }
}
@media(max-width:1200px){
    .proVTit {
        font-size: 32px;
    }
    .proVText {
        font-size: 16px;
    }
    .proVText{
        margin-top: 30px;
    }
}
@media(max-width:900px){
    .proVItem{
        padding: 35px 0;
        flex-wrap: wrap;
    }
    .proVImg{
        width: 100%;
    }
    .proVTBox{
        width: 100%;
        margin-bottom: 70px;
    }
    .proVItem1 .proVTBox{
        order: -1;  
    }
    .proVItem1 .proVTit {
        text-align: left;
    }
    .proVItem1 .proVTit::after {
        right: 0;
        left: 0;
    }
    .proATbox {
        width: 100%;
        margin: 0 auto;
        padding: 20px;
    }
    .proABon {
            padding: 15px 40px;
            font-size: 16px;
        }
        .proATop p{
            width: calc(100% - 50px);
        }
        .proVTit {
        font-size: 28px;
    }
}
@media(max-width:680px){
    .proVTit {
        font-size: 24px;
    }
    .proVImg{
        width: 100%;
        padding-top: 65%;
    }
    .proATbox {
        padding: 15px;
    }
    .proATop p {
        font-size: 18px;
    }
    .proAIcon {
        width: 25px;
        height:25px;
        object-fit: contain;
        margin-right: 10px;
    }
    .proAjia,.proAjian{
        width: 16px;
        height: 16px;
        top: 50%;
        right: 20px;
    }
    .proATop{
        padding: 20px;
    }
    .proABon{
        padding: 20px;
    }
}

@media(max-width:500px){
    .proATop p {
        font-size: 18px;
        line-height: 1.5;
    }
    
}


.proSBox {
    position: relative;
}
.proSList{
    margin-top: 70px;
    display: flex;
}

.proSItem {
    flex: 1;
    position: relative;
    display: block;
}

.proSItem:hover .proSImg img {
    transform: scale(1.1);
}

.proSImg {
    width: 100%;
    padding-top: 150%;
    position: relative;
    overflow: hidden;
}
.proSImg:after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, .4);
}
.proSImg img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;

    transition: all 0.48s;
}

.proSTbox {
    width: 100%;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
}

.proSTit {
    font-size: 24px;
    color: #fff;
    text-align: center;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
}
.proSItem:hover .proSTit{
    color: #f8b72a;
}
.proSBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.48s;
}

.proSItem:hover .proSBtn {
    opacity: 1;
    transform: translateY(0);
}

.proSBtn p {
    font-size: 14px;
    color: #fff;
    border-bottom: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .6;
}

.proSBtn p svg {
    width: 15px;
    height: 15px;
    margin-left: 10px;
}

.proSBtn p svg path {
    fill: #fff;
}
@media(max-width:1468px){
    .proSTit {
        font-size: 20px;
    }
}
@media(max-width:1368px){
    .proSTit {
        font-size: 20px;
    }
}
@media(max-width:1200px){
    .proSItem{
        width: 24%;
        margin-right: 1%;
        margin-bottom: 1%;
        flex: none;
    }
    .proSList{
        flex-wrap: wrap;
        margin-top: 50px;
    }
    .proSImg {
        padding-top: 130%;
    }
}
@media(max-width:768px){
    .proSItem{
        width: 32%;
    }
}
@media(max-width:500px){
    .proSItem{
        width: 49%;
    }
    .proSTit {
        font-size: 16px;
    }
}





/* 

.NavBox {
    width: 100%;
    position: relative;
    background: rgba(0, 0, 0, .5);
} */




.proABox{
    position: relative;
    background: #e7e7e7;
    overflow: hidden;
}
.proABox .inner{
    display: flex;
    align-items: center;
}
.proALeft{
    display: flex;
    width: 464px;
    height: 368px;
    justify-content: space-between;
    position: relative;
}
.proASwiper{
    background: #fff;
    width: 368px;
    height: 100%;
}
.proAItem{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.proAItem img{
    width: 90%;
    height: 90%;
    object-fit: contain;
    transition: all 0.48s;
}
.proAItem:hover img{
    transform: scale(1.1);
}   
.proALSwiper{
    width: 80px;
    height: 100%;
    padding: 30px 0;
}
.proALItem{
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.proALImg{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.proALItem img{
    width: 90%;
    height: 90%;
    object-fit: contain;
    transition: all 0.48s;
}
.proALItem:hover img{
    transform: scale(1.1);
} 

.proImgRight {
	width:400px;
	height:400px;
	position:absolute;
	top:0;
	left:calc(100% + 3px);
	border:1px solid #ccc;
	overflow:hidden;
	display:none;
    z-index: 9;
    background: #f7f8f9;
}

.proCSwiper{
    width: 100%;
    height: 100%;
    position: relative;
}
.proCItem{
    width: 100%;
    height: 100%;
}
.proASwiperBtn{
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    background: #333;
    z-index: 2;
}
.proASwiperBtn svg{
    width: 12px;
    height: 12px;
}
.proASwiperBtn svg path{
    fill: #fff;
}
.proASwiper_prev{
    top: 0;
}
.proASwiper_next{
    bottom: 0;
}
#zhezhao {
    width: 100%;
    height: 100%;
    background: transparent;
    position: absolute;
    top: 0;
    border: 1px solid transparent;
    z-index: 9;
}
#zhezhao:hover {
    cursor: move;
}
/* 放大鏡 */
.magnifier {
    position: absolute;
    display: none;
    width: 200px;
    height: 200px;
    background: rgb(248, 183, 42,.6);
    z-index: 6;
}
.img_medium {
    position: relative;
    width: 100%;
    height: 100%;
    /* padding-top: 68%; */
    background: #fafbfc;
    width: 368px;
    border: 1px solid #d3d3d3;
}




.proARig{
    width: calc(100% - 464px);
    padding: 39px 59px;
    background: #e1e1e1
}
.proATit{
    font-size: 42px;
    font-weight: 600;
    position: relative;
    margin-bottom: 50px;
}
.proATit::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 34px;
    height: 4px;
    background: #f8b72a;
}
.proATit.center{
    text-align: center;
}
.proATit.center::after{
 left: 50%;
 transform: translateX(-50%);
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 -o-transform: translateX(-50%);
}
.proAText{
    font-size: 18px;
}
.proABtn{
    display: flex;
    margin-top: 50px;
    align-items: center;
}
.proABtn .proBtn a{
    width: 120px;
}
.proABtn .proBtn{
    margin-right: 10px;
}


@media(max-width:1680px){
    .proATit {
        font-size: 36px;
    }
}
@media(max-width:1280px){
    .proATit {
        font-size: 32px;
    }
    .proAText {
font-size: 16px;
}
}
@media(max-width:900px){
    .proImgRight {
        width: 400px;
        height: 400px;
        position: absolute;
        top: 0;
        left: calc(100% - 100px);
        border: 1px solid #ccc;
        overflow: hidden;
        /* display: none; */
        z-index: 9;
    }
}
@media(max-width:680px){
    .proALSwiper{
        display: none;
    }
    .proASwiper{
        width: 100%;
    }
}




.proDPBox{
    background: #eee;
    position: relative;
}
.proDPBox .inner{
    /* display: flex;
    justify-content: space-between; */
}
.proDPCon{
    width: 100%;
    /* width: calc(100% - 380px); */
    position: relative;
}
.proDPRig{
    width: 335px;
    position: relative;
}

@media(max-width:1200px){
    .proDPRig{
        display: none;
    }
    .proDPCon{
        width: 100%;
    }
    
}
@media(max-width:1024px){
    .proATit {
font-size: 28px;
margin-bottom: 30px;
}
.proABox .inner{
flex-wrap: wrap;
}
.proARig{
width: 100%;
background: transparent;
padding: 0 30px;
margin-top: 30px;
}
.proABtn {
margin-top: 20px;
flex-wrap: wrap;
}
}
@media(max-width:900px){
    .proABox{
        margin-top: 60px;
    }
}
@media(max-width:768px){
    .proATit {
font-size: 24px;
line-height: 2;
}
.proBtn a{
padding: 12px 20px;
}
.proABtn .proBtn a {
width: 100px;
line-height: 1;
font-size: 14px;
}
}
@media(max-width:500px){

.proALeft{
width: 100%;
overflow: hidden;
}
.proARig{
padding: 0;
}
.proATit {
    font-size: 20px;
    }
}
@media(max-width:768px){
    .proBtn a{
        padding: 8px 20px;
        }
}






.proDFBox{
    position: relative;
    background: #eee;
    padding-top: 0;
    overflow: hidden;
}
.proDFCon{
    position: relative;
    padding: 50px;
    background: #fff;
}
.proDFCon::before {
content: '';
position: absolute;
left: 0;
top: -20px;
width: 316px;
height: 50px;
background: #f8b72a;
z-index: 0;
}
.proDFBg{
width: 300px;
height: 300px;
position: absolute;
right: 30px;
bottom: 30px;
object-fit: contain;
}
.proDFItem{
position: relative;
margin-bottom: 10px;
}
.proDFItem h4{
font-size: 24px;
font-weight: 500;
display: flex;
align-items: center;
}
.proDFItem img{
    width: 15px;
    height: 15px;
    margin-right: 8px;
}
.proDFItem p{
font-size: 16px;
line-height: 1.8;
font-weight: 300;
}
@media(max-width:1368px){
.proDFCon{
margin-right: 0;
}
}
@media(max-width:1024px){
.proDFCon{
padding: 30px;
}
.proDFItem h4 {
    font-size: 20px;
    }
}
@media(max-width:680px){
    .proDFItem h4 {
        font-size: 18px;
        }
.proDFCon{
    padding: 20px;
    }
    .proDFItem p{
        font-size: 14px;
        }
}










/* 新聞情形 */
.NavBoxPro {
    width: 100%;
    background: rgba(0, 0, 0, .3);
    position: relative;
    bottom: auto;
}




.NavDBox {
    position: relative;
    padding: 70px 0;
}

.NavTBox .inner {
    display: flex;
    justify-content: space-between;
}

.NavDLeft {
    width: calc(100% - 380px);
}

.NavDTbox {
    position: relative;
}

.NavDTbox p {
    font-size: 18px;
    margin-top: 20px;
}

.NavDRig {
    width: 335px;
}

.NavDList {
    position: sticky;
    top: 80px;
}

.NavDItem {
    position: relative;

    margin-bottom: 20px;
    transition: all 0.48s;
}

.NavDTit {
    padding: 20px;
    background: #e3e3e3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.NavDTit a {
    width: calc(100% - 30px);
    font-size: 18px;
    line-height: 30px;
    transition: all 0.48s;
}

.NavDIcon {
    width: 18px;
    height: 18px;
}

.NavDIcon svg {
    width: 100%;
    height: 100%;
}

.NavDIcon svg path {
    fill: #666;
}

.NavDIcon .icon1 {
    display: block;
}

.NavDIcon .icon2 {
    display: none;
}

.NavDItem:hover .NavDTit {
    background: #f8b72a;
}

.NavDItem:hover .NavDTit a {
    color: #fff;
}

.NavDItem:hover .NavDIcon svg path {
    fill: #fff;
}

.NavDItem.NavDItemAct .NavDTit {
    background: #f8b72a;
}

.NavDItem.NavDItemAct .NavDTit a {
    color: #fff;
}

.NavDItem.NavDItemAct .NavDIcon svg path {
    fill: #fff;
}

.NavDItem.NavDItemAct .NavDIcon .icon1 {
    display: none;
}

.NavDItem.NavDItemAct .NavDIcon .icon2 {
    display: block;
}

/* 
.NavDItem.NavDItemAct .NavDCon{
    display: block;
} */
.NavDCon {
    position: relative;
    display: none;
}

.NavDCli {
    padding: 15px 30px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.NavDCli a {
    font-size: 16px;
    position: relative;
    display: block;
    line-height: 30px;
    transition: all 0.48s;
}

.NavDCli a:hover {
    color: #f8b72a;
}

.NavDCli.NavDCliAct a {
    color: #f8b72a;
    position: relative;
}

.NavDCli a::before {
    content: '>';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    color: #f8b72a;
    opacity: 0;
}

.NavDCli.NavDCliAct a::before {
    opacity: 1;
}

.NavDLTit {
    font-size: 42px;
    font-weight: 600;
    position: relative;
    margin-bottom: 50px;
}

.NavDLTit::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 34px;
    height: 4px;
    background: #f8b72a;
}

@media(max-width:1368px) {
    .NavDLTit {
        font-size: 36px;
    }
}

@media(max-width:1200px) {
    .NavDRig {
        display: none;
    }

    .NavDLeft {
        width: 100%;
    }

    .NavDTbox p {
        font-size: 16px;
        margin-top: 20px;
    }

    .NavDBox {
        padding: 50px 0;
    }
}

@media(max-width:900px) {
    .NavDLTit {
        font-size: 32px;
    }

}

@media(max-width:680px) {
    .NavDLTit {
        font-size: 28px;
    }
}







/* 對于 */
.aboABox{
    background: #f7f8f9;
}
.aboABox .inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.aboALeft{
    width: 45%;
    position: relative;
}
.aboText{
    font-size: 18px;
}
.aboAImg{
    width: 50%;
    padding-top: 30%;
    position: relative;
}
.aboAImg::before{
    content: '';
    position: absolute;
    right: 0;
    top: -33px;
    width: 40%;
    height: 60px;
    background: #f8b72a;
    z-index: 0;
}
.aboAImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
@media (max-width: 1368px){
    .aboText {
        font-size: 16px;
    }
}
@media (max-width: 900px){
    .aboABox .inner{
        flex-wrap: wrap;
    }
    .aboALeft{
        width: 100%;
    }
    .aboAImg{
        width: 100%;
        margin-top: 50px;
        padding-top: 50%;
    }
}




.aboMBox{
    position: relative;
    overflow: hidden;
}
.aboMList{
    position: relative;
    display: flex;
    justify-content: space-between;
}
.aboMItem{
    width: 49%;
    position: relative;
}
.aboMImg {
    padding-top: 105%;
    position: relative;
}
.aboMImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.aboMTbox{
    width: 100%;
    position: absolute;
    padding: 48px 42px;
    left: 0;
    top: 0;
}
.aboMTit{
    font-size: 32px;
    color: #fff;
}
.aboMText{
    position: relative;
}
.aboMText p{
    font-size: 20px;
    color: #fff;
}
.aboMItem:nth-child(2){
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.aboMItem:nth-child(1) .aboMImg{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f8b72a;
}
.aboMQItem{
    width: 100%;
    height: 49%;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #f8b72a;
    position: relative;
}
.aboMQItem img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.aboMUl{
    position: relative;
    margin-top: 10px;
}
.aboMli{
    position: relative;
    font-size: 16px;
    color: #fff;
    font-weight: 300;
    padding-left: 20px;
}
.aboMli::after{
    width: 6px;
    height: 6px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    border-radius: 50%;
    background: #f8b72a;
}
.aboMQTbox{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 50px;
}
@media (max-width: 1368px) {
    .aboMTit {
font-size: 28px;
}
.aboMText p {
font-size: 18px;
}
    }
    @media (max-width: 1200px){
        .aboMTbox {
            padding: 30px;
        }
        .aboMUl {
position: relative;
margin-top: 0;
}
.aboMQTbox {
padding-left: 30px;
}
    }
    @media (max-width: 1024px){
.aboMli {
position: relative;
font-size: 14px;
}
.aboMTbox {
            padding: 20px;
        }
        .aboMTit {
font-size: 24px;
}
.aboMText p {
font-size: 16px;
}
.aboMQTbox {
padding-left: 20px;
}
    }
    @media (max-width: 900px){
        .aboMList{
            flex-wrap: wrap;
        }
        .aboMItem{
            width: 100%;
        }
        .aboMQItem {
            padding-top: 45%;
            margin-top: 10px;
        }
    }
    @media (max-width: 680px){
        .aboMQItem {
padding-top: 65%;
margin-top: 10px;
}
    }








    .aboHBox::after {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    background: rgba(0, 0, 0, .3);
}
    .aboHBox{
        position: relative;
        overflow: hidden;
        background: url(../images/aboHbg.webp) no-repeat center / cover;
    }
    .aboHIcon{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
    }
    .aboHIcon img{
        width: 50px;
    }
    .aboHList{
        position: relative;
        border-bottom: 2px solid #f8b72a;
        margin-bottom: 64px;
    }
    .aboHCon .inner{
        position: relative;
    }
    .aboHSwiper{
        padding-bottom: 40px;
transform: translateY(40px);
    }
    .aboHTit{
        font-size: 24px;
        color: #fff;
        margin-bottom: 40px;
        text-align: center;
        font-weight: 600;
    }
    .aboHItem{
        position: relative;
    }
    .aboHItem.swiper-slide-active::before{
        width: 16px;
        height: 16px;
    }
    .aboHItem.swiper-slide-active .aboHTit{
        color: #f8b72a;
    }
    .aboHItem::before{
        width: 10px;
        height: 10px;
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%);
        border-radius: 50%;
        background: #f8b72a;
        transition: All .8s ease;
        -webkit-transition: All .8s ease;
    }
    .aboHItem::after{
        width: 35px;
        height: 35px;
        content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
border-radius: 50%;
background: #f8b72a;
transition: All .8s ease;
-webkit-transition: All .8s ease;
opacity: .4;
    }
    .aboHCon{
        position: relative;
    }
    .aboHCItem{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .aboHCTbox{
        padding: 30px;
        background: rgba(255, 255, 255, .3);
        /* width: 80%; */
        display: flex;
        align-items: center;
    }
    .aboHCImg{
        width: 400px;
        padding-top: 30%;
        position: relative;
    }
    .aboHCImg img{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        object-fit: cover;
    }
    .aboHCRig{
        width: 450px;
        margin-left: 30px;
    }
    .aboHCRig p{
        font-size: 20px;
        color: #fff;
    }
    .aboHCItem{
        opacity: 0 !important;
    }
    .aboHCItem.swiper-slide-thumb-active{
        opacity: 1 !important;
    }
    .aboHBtn{
        z-index: 6;
        width: 45px;
        height: 45px;
        position: absolute;
        top: 50%;
        background: rgba(255, 255, 255, .4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
}
.aboHBtn svg{
    width: 50%;
    height: 50%;
}
.aboHBtn svg path{
    fill: #fff;
}
.aboHSwiper_prev{
    left: 0;
}
.aboHSwiper_prev svg{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.aboHSwiper_next{
    right: 0;
}
    @media (max-width: 1368px) {
        .aboHTit {
            font-size: 20px;
            margin-bottom: 24px;
        }
        .aboHCRig p {
font-size: 18px;
color: #fff;
}
.aboHCImg {
width: 400px;
padding-top: 25%;
}
}
@media (max-width: 1200px){
    .aboHItem::after{
        width: 30px;
        height: 30px;
    }
    .aboHCImg{
        width: 350px;
    }
    .aboHCRig{
        width: calc(100% - 400px);
    }
}
@media (max-width: 900px){
    .aboHIcon{
        margin-bottom: 30px;
    }
    .aboHList{
        margin-bottom: 30px;
    }
    .aboHSwiper {
padding-bottom: 20px;
transform: translateY(20px);
}
}
@media (max-width: 768px){
.aboHCTbox{
    flex-wrap: wrap;
}
.aboHCImg{
    width: 100%;
    padding-top: 40%;
}
.aboHCRig{
    width: 100%;
    margin-left: 0;
    margin-top: 30px;
}
.aboHIcon img {
width: 40px;
}
}
@media (max-width: 680px){
.aboHCRig p {
    font-size: 16px;
    color: #fff;
}
}





.aboRBox{
    position: relative;
    background: #f7f8f9;
}
.aboRImg{
    width: 100%;
    padding-top: 143%;
    position: relative;
}
.aboRImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}
.aboRList{
    position: relative;
}
.aboRBtn{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    justify-content: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
    z-index: 9;
    box-shadow: 0 0 10px rgba(0, 0, 0, .02);
}
.aboRBtn svg{
    width: 50%;
    height: 50%;
}
.aboRBtn svg path{
    fill: #333;
}
.aboRBtn:hover{
    background: #f8b72a;
}
.aboRBtn:hover svg path{
    fill: #fff;
}
.aboRSwiper_prev{
    left: -70px;
}
.aboRSwiper_prev svg{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.aboRSwiper_next{
    right: -70px;
}

@media(max-width:1680px){
    .aboRSwiper_prev {
        left: -20px;
    }
    .aboRSwiper_next {
        right: -20px;
    }
}
@media(max-width:680px){
    .aboRBtn{
        width: 45px;
        height: 45px;
    }
}



.aboWBox{
    position: relative;
    overflow: hidden;
    /* background: #f7f8f9; */
}
.aboWList{
    position: relative;
}
.aboWItem{
    position: relative;
}
.aboWImg{
    width: 100%;
    padding-top: 90%;
    position: relative;
}
.aboWImg img{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
}

.aboWBtn{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    position: absolute;
    top: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: all 0.48s;
    -webkit-transition: all 0.48s;
    -moz-transition: all 0.48s;
    -ms-transition: all 0.48s;
    -o-transition: all 0.48s;
    z-index: 2;
}
.aboWBtn svg{
    width: 50%;
    height: 50%;
}
.aboWBtn svg path{
    fill: #333;
}
.aboWBtn:hover{
    background: #f8b72a;
}
.aboWBtn:hover svg path{
    fill: #fff;
}
.aboW_prev{
    left: 0;
}
.aboW_prev svg{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.aboW_next{
    right: 0;
}
@media(max-width:680px) {
    .aboWBtn{
        width: 40px;
        height: 40px;
    }
}

/* 商品類別 */
.proLBox{
    position: relative;
}
.proLlist{
    display: flex;
    flex-wrap: wrap;
}

.proLItem {
    width: calc(25% - 9px);
    margin-bottom: 12px;
    margin-right: 12px;
    background: #f7f8f9;
    position: relative;
    cursor: pointer;
}

.proLItem:hover .proPRTit {
    background: #f8b72a;
    color: #fff;
}

.proLItem:nth-child(4n) {
    margin-right: 0;
}

.proLImg {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden;
}

.proLImg img {
    width: 80%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    object-fit: contain;
    transform: translate(-50%, -50%);
    transition: all 0.48s;
}

.proLTit {
    padding: 12px;
    background: #e1e1e1;
    text-align: center;
    font-size: 18px;
    /* position: absolute;
    left: 0;
    bottom: 0; */
    width: 100%;
    transition: all 0.48s;
}

.proLItem:hover .proLImg img {
    transform: scale(1.1) translate(-50%, -50%);
}
@media (max-width: 900px){
    .proLItem {
        width: calc(50% - 5px);
        margin-right: 10px;
        margin-bottom:  10px;
    }
    .proLItem:nth-child(2n){
        margin-right: 0;
    }
}
@media (max-width: 500px){
    .proLItem {
        width: 100%;
        margin-right: 0;
        margin-bottom:  10px;
    }
    .proLItem:nth-child(2n){
        margin-right: 0;
    }
}








/* 新聞 */
.newCBox{
    position: relative;
    background: #f1f2f3;
}
.newList{
    position: relative;
}
.newItem{
    width: 100%;
    padding: 30px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.newLeft{
    width: calc(100% - 380px);
}
.newTime{
    font-size: 18px;
    color: #f8b72a;
}
.NewTit {
font-size: 28px;
font-weight: 600;
line-height: 40px;
height: 40px;
margin-top: 10px;
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
transition: all 0.48s;
}
.NewText {
margin: 20px 0;
font-size: 16px;
font-weight: 300;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
transition: all 0.48s;
}
.NewBtn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f8b72a;
display: flex;
align-items: center;
justify-content: center;
}

.NewBtn img {
width: 60%;
height: 60%;
}
.newImg{
width: 350px;
padding-top: 20%;
position: relative;
}
.newImg img{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
}
@media(max-width:1280px){
.newImg{
width: 300px;
}
.newLeft{
width: calc(100% - 330px);
}
}
@media(max-width:900px){
.newImg{
width: 250px;
}
.newLeft{
width: calc(100% - 280px);
}
.NewTit {
font-size: 24px;
}
.newTime {
    font-size: 16px;
}
}
@media(max-width:680px){
.newItem{
flex-wrap: wrap;
padding: 20px;
}
.newLeft{
width: 100%;
}
.newImg{
margin-top: 30px;
width: 100%;
padding-top: 65%;
}
}
@media(max-width:500px){
    .NewTit {
        font-size: 20px;
        }
        .newTime {
            font-size: 14px;
        }
}




.seaCon{
    position: relative;
}
.seaFBox{
    display: flex;
    align-items: center;
    justify-content: center;
}
.seaFItem{
    width: 150px;
    height: 50px;
    background: #f7f8f9;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin: 0 10px;
}
.seaFItem:hover{
    color: #f8b72a
}
.seaFItemAct{
    background: #f8b72a;
    color: #fff;
}
.seaFItemAct:hover{
    background: #f8b72a;
    color: #fff;
}
.seaList{
    margin-top: 50px;
}
.seaItem{
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.seaTit{
    font-size: 20px;
    margin-bottom: 10px;
}
.seaText{
    display: block;
    color: #666;
    line-height: 1.5em;
    word-break: normal;
    font-size: 16px;
}
.seaNo{
    font-size: 16px;
    margin-top: 50px;
    color: #666;
}
@media(max-width:768px){
    .seaText{
        font-size: 15px;
    }
    .seaFItem {
        width: 130px;
        height: 45px;
        font-size: 14px;
    }
    .seaNo{
        font-size: 16px;
    }
}