.menu-tab {background: rgba(49,49,49,.4);}
.menu-tab ul {display: flex;align-items: center;justify-content: center;flex-wrap:wrap;}
.menu-tab ul li {position:relative;text-align:center;height:85px;padding:0 55px;font-size:18px;color:#fff;font-weight:500;transition: all .5s ease;overflow:hidden;display:flex;
align-items:center;justify-content:center;}
.menu-tab ul li .btns {display: block;color:inherit;text-decoration: none;overflow: hidden;}
.menu-tab ul li+li::before {content: '';width: 1px;height: 16px;background: #CBCBCB;position: absolute;top: calc(50% - 8px);left: 0;}
.menu-tab ul li:last-child::after {content: '';width: 0px;height: 16px;background: #CBCBCB;position: absolute;top: calc(50% - 8px);right: 0;}

.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{content:attr(data-text);padding:0 55px;display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;color: #fff;background: var(--color-primary);animation: animation_btn1 .4s ease-in-out;}

@keyframes animation_btn1{
  0% {width: 100%;height: 100%;transform: translate(0%, 100%);}
  30% {width: 100%;height: 100%;}
  100% {width: 100%;height: 100%;transform: translate(0%, 0%);}
}

  
@media screen and (max-width: 1550px) {
.menu-tab ul li {padding: 0 45px;font-size: 17px;height: 75px;}
.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{font-size:17px;padding:0 45px;}
}
 
@media screen and (max-width: 1440px) {
}
                                          
@media screen and (max-width: 1367px) {
.menu-tab ul li {padding:0 35px;font-size: 16px;height: 65px;}
.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{font-size: 16px;padding:0 35px;}
}
                                    
@media screen and (max-width: 1280px) {
.menu-tab ul li {padding:0 30px;height:60px;}
.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{padding:0 30px;}    
}
                                
@media screen and (max-width: 992px) {
.menu-tab ul li {padding:0 20px;font-size:15px;width:33.333%;height:50px;}
.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{font-size:15px;padding:0 20px;}
}
                                
@media screen and (max-width: 768px) {
.menu-tab ul {flex-wrap: wrap;}
.menu-tab ul li {width: 50%;font-size: 14px;padding:0 10px;}
.menu-tab ul li::before {display: none;}
.menu-tab ul li:last-child::after {display: none;}
.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{font-size:14px;padding:0 10px;}
}
                                
@media screen and (max-width: 480px) {
.menu-tab ul li {font-size:12px;}
.menu-tab ul li .btns:hover::before,.menu-tab ul li .btns.active::before{font-size:12px;}
}

.pro-list {padding: 90px 0 70px;background: #fff;}
.pro-list .tit {max-width: 1140px;margin: 0 auto;text-align: center;}
.pro-list .tit h3{line-height: 1;color: #101010;font-weight: 600;text-transform: capitalize;display: block;}
.pro-list .tit p {font-size: 18px;line-height:1.8;color: #8A8A8A;margin-top:35px;}
.pro-list  ul.list {margin: 35px -25px 0;display: flex;flex-wrap: wrap;}
.pro-list  ul.list li {width: 25%;padding: 25px;box-sizing: border-box;}
.pro-list  ul.list li .pic {aspect-ratio:1 / 1;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.pro-list  ul.list li .pic img {max-width: 100%;}
.pro-list  ul.list li .txt {margin-top: 35px;}
.pro-list  ul.list li .txt h6 {font-size: 16px;color: #757575;line-height: 1;font-weight: 600;text-transform: uppercase;letter-spacing: 5px;transition: all .3s ease;}
.pro-list  ul.list li .txt h5 {font-size: 22px;line-height: 36px;color: #000;transition: all .3s ease;margin-top: 8px;}
.pro-list  ul.list li .txt h5 a {display: block;color: initial;}
.pro-list ul.list li .txt h5 a:hover{color:var(--color-primary)}
.pro-list  ul.list li .txt a.more {display: inline-block;margin-top: 20px;line-height: 34px;padding: 0 25px;border-radius: 18px;background: #000;color: #fff;font-size: 16px;border: 1px solid #000;transition: all .5s ease;position: relative;overflow: hidden;}

.pro-list  ul.list li .txt a.more:hover::before {content: 'Explore More';display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;color: #fff;background: var(--color-primary);border-radius: 20px;animation: animation_btn .5s ease-in-out;font-size: 16px;}
.pro-list  ul.list li .txt a.more:hover {border-color: var(--color-primary);}

/*----page----*/

#pagesize1 {margin:50px 0 0;text-align:center;}
#pagesize1 ul {font-size:0;}
#pagesize1 ul li {display:inline-block;vertical-align:top;}
#pagesize1 ul li a {margin:0 12px;display:inline-block;background:transparent;font-size:20px;width:34px;height:34px;line-height:34px;border-radius:4px;font-weight:600;color:#171717;}
#pagesize1 ul li a:hover {background:var(--color-primary);box-shadow:0 1px 0 0 #fff;color:#fff !important;}
#pagesize1 ul li span {line-height:16px;padding:8px 13px;margin:0 2px;display:inline-block;font-size:20px;}
#pagesize1 ul li a.active {border:var(--color-primary) 1px solid;background:var(--color-primary);color:#fff !important;}
#pagesize1 ul li a.disabled {color:#fff;border:1px solid #CECECE;background:#CECECE;}

@media screen and (max-width:768px) {
#pagesize1 {margin:25px 0 0;}
#pagesize1 ul li a {padding:6px 10px;font-size:13px;}
#pagesize1 ul li span {padding:6px 10px;font-size:13px;}
#pagesize1 ul li a {padding:8px 12px !important;font-size:15px !important;margin:0 10px !important;}
}


@keyframes rotate0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(359deg);
    }
}



#pagesize ul li:first-child,#pagesize ul li:last-child{display:none;}


#pagesize ul li a{border: none !important;padding: 10px 15px !important;font-size: 16px !important;border-radius: 2px;margin: 0 18px !important;color: #010101 !important;}
#pagesize ul li a.active {color: #fff !important;}

@media screen and (max-width:768px) {
#pagesize ul li a{padding:8px 13px !important;font-size:15px !important;margin:0 10px !important;}
}

@media screen and (max-width:480px) {
#pagesize ul li a{padding:6px 11px !important;font-size:14px !important;margin:0 5px !important;}
}


@media screen and (max-width: 1550px) {

.pro-list {padding: 70px 0 55px;}
.pro-list .tit p {font-size: 17px;margin-top: 25px;}
.pro-list ul.list {margin: 30px -20px 0;}
.pro-list ul.list li {padding: 20px;}
.pro-list ul.list li .txt {margin-top: 25px;}
.pro-list ul.list li .txt h5 {font-size: 21px;line-height: 33px;margin-top: 6px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.pro-list ul.list li .txt h6 {font-size: 15px;}
.pro-list ul.list li .txt a.more {margin-top: 15px;line-height: 32px;padding: 0 20px;}

.pro-video {padding: 60px 0 75px;}
.pro-video .list {margin-top: 60px;}
.pro-video .list .box .txt {padding-left: 110px;padding-right: 80px;}
.pro-video .list .box .txt h6 {font-size: 17px;}
.pro-video .list .box .txt h5 {font-size: 27px;line-height: 44px;margin-top: 12px;}
.pro-video .list .box .txt .t {margin-top: 25px;}
.pro-video .list .box .txt a.more {margin-top: 35px;}
.pro-video .list .swiper-pagination-bullets {margin-top: 50px;}

.pro-discover {padding-top: 70px;}
.pro-discover .list {margin-top: 70px;}
.pro-discover .box .txt h5 {font-size: 27px;line-height: 31px;}
.pro-discover .box .txt .t {font-size: 17px;line-height: 28px;margin-top: 20px;}
}
 
@media screen and (max-width: 1440px) {

}
                                          
@media screen and (max-width: 1367px) {

.pro-list {padding: 50px 0 40px;}
.pro-list .tit p {font-size: 16px;margin-top: 15px;}
.pro-list ul.list {margin: 25px -15px 0;}
.pro-list ul.list li {padding: 15px;}
.pro-list ul.list li .txt {margin-top: 15px;}
.pro-list ul.list li .txt h5 {font-size: 20px;line-height: 30px;margin-top: 4px;}
.pro-list ul.list li .txt h6 {font-size: 14px;}
.pro-list ul.list li .txt a.more {margin-top: 10px;line-height: 30px;padding: 0 15px;}

.pro-video {padding: 50px 0 60px;}
.pro-video .list {margin-top: 40px;}
.pro-video .list .box .txt {padding-left: 70px;padding-right: 40px;}
.pro-video .list .box .txt h6 {font-size: 16px;}
.pro-video .list .box .txt h5 {font-size: 24px;line-height: 40px;margin-top: 9px;}
.pro-video .list .box .txt .t {margin-top: 20px;}
.pro-video .list .box .txt a.more {margin-top: 25px;}
.pro-video .list .swiper-pagination-bullets {margin-top: 30px;}

.pro-discover {padding-top: 50px;}
.pro-discover .list {margin-top: 50px;}
.pro-discover .box .txt h5 {font-size: 24px;line-height: 28px;}
.pro-discover .box .txt .t {font-size: 16px;line-height: 26px;margin-top: 15px;}
}
                                    
@media screen and (max-width: 1280px) {

.pro-list .tit p{line-height:1.6}
.pro-list ul.list li .txt a.more{font-size:15px;}
.pro-list  ul.list li .txt a.more:hover::before{font-size:15px;}
}
                                
@media screen and (max-width: 992px) {
.pro-list {padding: 30px 0;}

.pro-list ul.list {margin: 15px -10px 0;}
.pro-list ul.list li {padding: 10px;width: 33.333%;}
.pro-list ul.list li .txt h5 {font-size: 18px;line-height: 26px;}

.pro-video {padding: 30px 0;}
.pro-video .list {margin-top: 20px;}
.pro-video .list .box {display: block;}
.pro-video .list .box .video {width: 100%;}
.pro-video .list .box .txt {padding: 20px 30px 0;}
.pro-video .list .box .txt h5 {font-size: 22px;line-height: 36px;margin-top: 5px;}
.pro-video .list .box .txt .t {margin-top: 10px;font-size: 15px;line-height: 22px;}
.pro-video .list .box .txt .t ul li + li {margin-top: 8px;}
.pro-video .list .box .txt a.more {margin-top: 15px;line-height: 35px;padding: 0 15px;}
.pro-video .list .swiper-pagination-bullets {margin-top: 20px;}

.pro-discover {padding-top: 30px;}
.pro-discover .list {margin-top: 30px;}
.pro-discover .box .txt h5 {font-size: 22px;line-height: 26px;}
.pro-discover .box .txt {width: 100%;}
}
                                
@media screen and (max-width: 768px) {

.pro-list ul.list li {width: 50%;}
.pro-list .tit p{font-size:15px;}
.pro-list ul.list li .txt a.more{font-size:14px;}
.pro-list  ul.list li .txt a.more:hover::before{font-size:14px;}

.pro-discover .box .container {padding-top: 20px;padding-bottom: 20px;position: static;background: #080808;}

.pro-list ul.list li .txt h5 {font-size: 16px;line-height: 24px;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
}

@media screen and (max-width: 480px) {

.pro-list .tit p{font-size:14px;line-height:1.4;}

.pro-video .list .box .txt {padding: 15px 20px 0;}
.pro-discover .box .txt h5 {font-size: 20px;line-height: 24px;}
.pro-list ul.list li .txt a.more{font-size:13px;}
.pro-list  ul.list li .txt a.more:hover::befoe{font-size:13px;}
}

@media screen and (max-width: 400px) {

}