.path{margin-top:70px;}
.path p {
    font-size: 18px;
    line-height: 1;
    color: #858585;
    text-transform: capitalize;
}

.pro_view {
    overflow: hidden;
    padding: 80px 0 110px;
    background: url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/443d59f66b401931448b0a1655143d10/%E4%BA%A7%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%E5%85%89%E6%99%95.png) no-repeat right 20% top -50%;
}

.pro_view .container {
    display: flex;
    justify-content: space-between;
    position: relative;
    align-items: center;
    -webkit-align-items: center;
}

.pro_img {
    width: 1050px;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.pro_img .view {
    width: 870px;
    position: relative;
    box-sizing: border-box;
}

.pro_img .view .swiper {
    width: 100%;
}

.pro_img .view .swiper img {
    width: 100%;
    display: block;
}

.pro_img .view .swiper-slide img {
    height: 100%;
  object-fit: contain;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 0.65;
  background: #fff;
}

.pro_img .view .swiper-slide iframe{width:100%;border-radius:10px;overflow:hidden;aspect-ratio:1 / 0.65;}

.pro_img .view .swiper-slide .video-item {
    display: block;
    position: relative;
}

.pro_img .view .swiper-slide .video-item::after {
    content: '';
    display: block;
    width: 104px;
    height: 104px;
    background: url('./images/v1.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: calc(50% - 52px);
    top: calc(50% - 52px);
}

.pro_img .preview {
    width: 160px;
    height: 562px;
    position: relative;
    text-align: center;
}

.pro_img .preview .swiper {
    width: 100%;
    height: 100%;
    text-align: center;
}
.pro_img .preview .swiper-wrapper {
    height: 100%;
}

.pro_img .preview .swiper-slide {
    cursor: pointer;
    width: 160px;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
}

.pro_img .preview .swiper-wrapper  .pic {
	aspect-ratio: 1 / 0.65;
	background: #fff;
	overflow: hidden;
	border-radius:10px;position:relative;
}
.pro_img .preview .swiper-wrapper  .pic img {
    width: 100%;height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    overflow: hidden;border-radius: 10px;
}


.pro_img .preview .swiper-slide.video::after {
    content: '';
    display: block;
    width: 34px;
    height: 34px;
    background: url('./images/v1.png') no-repeat;
    background-size: 100%;
    position: absolute;
    left: calc(50% - 17px);
    top: calc(50% - 17px);
}

.pro_img .preview .swiper-slide .pic::after{content:"";background:rgba(19,94,169,0.5);position:absolute;left:0;top:0;right:0;bottom:0;border-radius:10px;display:none;}

.pro_img .preview .swiper-slide.active-nav .pic::after{display:block;}

.pro_img .preview .arrow-left,.pro_img .preview .arrow-right {color:#727272;position:absolute;left:calc(50% - 18px);width:36px;height:36px;z-index:10;text-align:center;transform:rotate(90deg);border-radius:50%;background:rgba(255,255,255,.63);border:1px solid transparent;}
.pro_img .preview .arrow-left {top:-18px;}
.pro_img .preview .arrow-right {bottom:-18px;}
.pro_img .preview .arrow-left i,.pro_img .preview .arrow-right i {color:inherit;font-size:20px;line-height:34px;}

.pro_img .preview .arrow-left:hover,.pro_img .preview .arrow-right:hover{background:#fff;border-color:#eee;color:rgba(19,94,169,1)}


.pro_img .view .arrow-left,.pro_img .view .arrow-right {color:#727272;position:absolute;top:calc(50% - 18px);width:36px;height:36px;z-index:10;text-align:center;border-radius:50%;background:rgba(255,255,255,.63);border:1px solid transparent;}
.pro_img .view .arrow-left {left:5px;}
.pro_img .view .arrow-right {right:5px;}
.pro_img .view .arrow-left i,.pro_img .view .arrow-right i {color:inherit;font-size:20px;line-height:34px;}

.pro_img .view .arrow-left:hover,.pro_img .view .arrow-right:hover{background:#fff;border-color:#eee;}

.pro_view_inner {
    -webkit-flex: 1;
    flex: 1;
    margin-left: 70px;
}

.pro_view_inner h6 {
    font-size: 24px;
    color: #8A8A8A;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.pro_view_inner h1 {
    font-size:clamp(20px, 1.88vw, 36px);
    color: #FFFFFF;
    line-height:1.33;
    font-weight: 600;
    margin-top: 20px;
}

.pro_view_inner .para {
    margin-top: 35px;
    font-size: 18px;
    line-height: 30px;
    color: #8A8A8A;
}

.pro_view_inner .para  p + p {
    margin-top: 15px;
}

.pro_view_inner .btn-box {
    margin-top: 35px;
}

.pro_view_inner .btn-box a {
    display: inline-block;
    line-height: 56px;
    font-size: 18px;padding: 0 30px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
    background: transparent;
    border: 2px solid #fff;
    text-transform: capitalize;
    transition: all .5s ease;
    overflow: hidden;
    position: relative;
}

.pro_view_inner .btn-box a:hover {
    border-color: var(--color-primary);
}

.pro_view_inner .btn-box a:hover::before {
    content:attr(title);
    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: 18px;
}

.pro-text {
    padding: 80px 0 0;
    background: #fff;
}

.pro-text h3 {
    line-height: 1;
    color: #0B0B0B;
    text-transform: capitalize;
}

.pro-text .pro-content {
    font-size: 18px;
    line-height: 30px;
    color: #525252;
    margin-top: 30px;
}

.pro-content .table-response {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}

.pro-content table {
    width: 100%;
    border-collapse: collapse;
}

.pro-content table th {
    padding: 10px 0;
    border-bottom: 1px solid #EEEEEE;
    background-color: none;
}

.pro-content table td {
    padding: 10px 0;
    border-bottom: 1px solid #EEEEEE;
    background-color: none
}

.pro-faq {
    padding: 80px 0 100px;
    background: #fff;
}

.pro-faq h3 {
    line-height: 1;
    color: #0B0B0B;
    text-transform: capitalize;
}

.pro-faq ul {
    margin-top: 35px;
}

.pro-faq ul li {
    background: #F9F9F9;
    padding: 15px 25px;
    box-sizing: border-box;
}

.pro-faq ul li + li {
    margin-top: 8px;
}

.pro-faq ul li .tit {
    position: relative;
    cursor: pointer;
}

.pro-faq ul li .tit h4 {
    font-size: 24px;
    color: #3C3B3B;
    font-weight: 600;
}

.pro-faq ul li .con {
    margin-top: 20px;
    display: none;
}

.pro-faq ul li .con p {
    font-size: 16px;
    line-height: 32px;
    color: #8A8A8A;
}

.pro-faq ul li .tit::after {
    position: absolute;
    right: 0;
    top: 2px;
    content: "+";
    font-size: 22px;
    color: #000;
    transition: transform .3s ease;
}

.pro-faq ul li .tit.active::after {
    content: "-";
}

.pro-service {
    background: url(https://okki-shop.oss-cn-hangzhou.aliyuncs.com/category/427473/3155/bc26e550dd2b3636587e9b5c6e587a27/glow.png) no-repeat right 100% top 50%;
    padding: 120px 0;
    overflow: hidden;
}


.pro-service .tit h3 {
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-transform: capitalize;
}

.pro-service .tit p {
    font-size: 18px;
    line-height: 30px;
    color: #8A8A8A;
    margin-top: 25px;
}

.pro-service ul {
    margin: 70px -20px 0;
    display: flex;
    flex-wrap: wrap;
}

.pro-service ul li {
    width: 20%;
    padding: 10px 20px;
    box-sizing: border-box;
    text-align: center;
}

.pro-service ul li .box {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    padding: 25px 0;
}

.pro-service ul li .box .ico {
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pro-service ul li .box .ico img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.pro-service ul li .box h5 {
    margin-top: 25px;
    font-size: 20px;
    color: #fff;
    line-height: 1.4;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pro-service ul li .box p {
    font-size: 21px;
    line-height: 1;
    color: #8A8A8A;
    margin-top: 5px;
}


.pro-service ul li:last-child  .t {
    font-weight: 600;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height:100%;
    border-radius: 12px;
    color: #fff;
    background: #1C1C1C;
}
.pro-service ul li:last-child .t p{
    transition: all .5s ease;
}

.pro-service ul li:last-child .t:hover p{
    color: var(--color-primary);
}
.pro-service ul li .box .t p {
    font-size: 24px;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.pro-service ul li .box:hover .t {
    opacity: 1;
    transform: translateY(0);
    visibility: inherit;
    transition: opacity .3s ease,transform 1s ease;
}
.pro-cert {
    margin-top: 100px;
    display: flex;
    align-items: center;
}

.pro-cert .list {
    width: 52.6%;
    position: relative;
}

.pro-cert .swiper-slide {
    width: 323px;
    margin: 15px 0;
}

.pro-cert .swiper-slide a {
    border: 10px solid #EFEFEF;
    display: block;
    transition: all .3s ease;
}

.pro-cert .swiper-slide img {
    display: block;
    width: 100%;
}

.pro-cert .swiper-slide.swiper-slide-active a {
    box-shadow: 0 0 15px #a1a1a1;
}

.pro-cert .txt {
    flex: 1;
    margin-left: 60px;
}

.pro-cert .txt h3 {
    line-height: 60px;
    color: #fff;
    font-weight: 600;
    margin-top: 25px;
}

.pro-cert .txt p {
    font-size: 18px;
    line-height: 2;
    color: #8A8A8A;
    margin-top: 30px;
}

.pro-cert .swiper-pagination-bullets {
    bottom: -40px !important;
}

.pro-cert .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 3px;
    background: #5E5E5E;
    border-radius: 50%;
    opacity: 1;
    box-sizing: border-box;
}

.pro-cert .swiper-pagination-bullet-active {
    background: var(--color-primary);
}

.rela-pro {
    padding: 90px 0;
    background: #F3F3F3;
}

.rela-pro h3 {
    line-height: 1;
    color: #181818;
    font-weight: 600;
    text-align: center;
    display: block;
}

.rela-pro .list {
    position: relative;
    margin-top: 60px;
}

.rela-pro .swiper-slide .box {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.rela-pro .swiper-slide .pic {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rela-pro .swiper-slide .pic img {
    max-width: 100%;
}

.rela-pro .swiper-slide .txt {
    padding: 35px 35px 20px;
}

.rela-pro .swiper-slide .txt h6 {
    font-size: 14px;
    color: #757575;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 5px;
    transition: all .3s ease;
}

.rela-pro .swiper-slide .txt h5 {
    font-size: 16px;
    line-height: 24px;
    color: #000;
    transition: all .3s ease;
    margin-top: 8px;
    font-weight: 600;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}

.rela-pro .swiper-slide .txt h5 a {
    display: block;
    color: initial;
}
.rela-pro .swiper-slide .txt h5 a:hover {
    color:var(--color-primary)
}
.rela-pro .swiper-slide .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;
}
.rela-pro .swiper-slide .txt a.more::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;font-size:16px;opacity:0;}

.rela-pro .swiper-slide .txt a.more:hover::before{opacity:1;animation: animation_btn .5s ease-in-out;}

.rela-pro .swiper-slide .txt a.more:hover {
    border-color: var(--color-primary);
}

.rela-pro .swiper-pagination-bullets {
    position: relative;
    margin-top: 55px;
    width: 100%;
    bottom: auto !important;
}

.rela-pro .swiper-pagination-bullets::after {
    content: '';
    width: 100%;
    height: 3px;
    display: block;
    position: absolute;
    background: #D5D5D5;
    left: 0;
    top: 14px;
    z-index: 0;
}

.rela-pro .swiper-pagination-bullet {
    width: 18%;
    height: 3px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    opacity: 1;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
    transition: all .3 ease;
}

.rela-pro .swiper-pagination-bullet-active {
    background: var(--color-primary);
}


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

.path p {font-size: 17px;}

.pro_view {padding: 60px 0 80px;}
.pro_img {width: 720px;}
.pro_img .view {width: 600px;}
.pro_img .preview {width: 106px;height: 390px;}
.pro_img .preview .swiper-slide {width: 106px;}
.pro_img .preview .arrow-left, .pro_img .preview .arrow-right {left: calc(50% - 16px);width: 32px;height: 32px;}
.pro_img .preview .arrow-left i, .pro_img .preview .arrow-right i {font-size: 18px;line-height: 32px;}
.pro_img .preview .swiper-slide.video::after {width: 30px;height: 30px;left: calc(50% - 15px);top: calc(50% - 15px);}
.pro_img .view .swiper-slide .video-item::after {width: 92px;height: 92px;left: calc(50% - 46px);top: calc(50% - 46px);}

.pro_view_inner {margin-left: 50px;}
.pro_view_inner h6 {font-size: 22px;}
.pro_view_inner h1 {margin-top:15px;}
.pro_view_inner .para {margin-top: 25px;font-size: 17px;line-height: 28px;}
.pro_view_inner .para dl dd + dd {margin-top: 12px;}
.pro_view_inner .btn-box {margin-top: 25px;}

.pro-text {padding: 60px 0 0;}
.pro-text .pro-content {font-size: 17px;line-height: 28px;margin-top: 25px;}

.pro-faq {padding: 60px 0 80px;}
.pro-faq ul {margin-top: 30px;}
.pro-faq ul li {padding: 13px 20px;}
.pro-faq ul li .tit h4 {font-size: 22px;}
.pro-faq ul li .tit::after {top: 0;}
.pro-faq ul li .con p {line-height: 30px;}

.pro-service {padding: 90px 0;}
.pro-service .tit p {font-size: 17px;line-height: 28px;margin-top: 20px;}
.pro-service ul {margin: 50px -15px 0;}
.pro-service ul li {padding: 10px 15px;}
.pro-service ul li .box .ico {height: 105px;}
.pro-service ul li .box h5 {margin-top: 20px;font-size: 19px;}
.pro-service ul li .box p {font-size: 17px;}
.pro-service ul li .box .t p {font-size: 22px;}

.pro-cert {margin-top: 80px;}
.pro-cert .txt {margin-left: 45px;}
.pro-cert .txt h3 {line-height: 52px;margin-top: 20px;}

.rela-pro {padding: 70px 0;}
.rela-pro .list {margin-top: 45px;}
.rela-pro .swiper-pagination-bullets {margin-top: 45px;}
.rela-pro .swiper-slide .txt {padding: 30px 30px 15px;}
}
 
@media screen and (max-width: 1440px) {
}
                                          
@media screen and (max-width: 1367px) {
    
.path p {font-size: 16px;}

.pro_view {padding: 40px 0 50px;}
.pro_img {width: 650px;}
.pro_img .view {width: 540px;}
.pro_img .preview {width: 90px;height: 350px;}
.pro_img .preview .swiper-slide {width: 90px;}
.pro_img .preview .arrow-left, .pro_img .preview .arrow-right {left: calc(50% - 14px);width: 28px;height: 28px;}
.pro_img .preview .arrow-left i, .pro_img .preview .arrow-right i {font-size: 16px;line-height: 28px;}
.pro_img .preview .swiper-slide.video::after {width: 26px;height: 26px;left: calc(50% - 13px);top: calc(50% - 13px);}
.pro_img .view .swiper-slide .video-item::after {width: 64px;height: 64px;left: calc(50% - 32px);top: calc(50% - 32px);}

.pro_view_inner {margin-left: 30px;}
.pro_view_inner h6 {font-size: 20px;}
.pro_view_inner h1 {margin-top: 10px;}
.pro_view_inner .para {margin-top: 15px;font-size: 16px;line-height: 26px;}
.pro_view_inner .para dl dd + dd {margin-top: 9px;}

.pro-cert .txt p {font-size: 17px;line-height: 1.8;margin-top: 25px;}

.pro-text {padding: 40px 0 0;}
.pro-text .pro-content {font-size: 16px;line-height: 26px;margin-top: 20px;}

.pro-faq {padding: 40px 0 60px;}
.pro-faq ul {margin-top: 25px;}
.pro-faq ul li {padding: 11px 15px;}
.pro-faq ul li .tit h4 {font-size: 20px;}
.pro-faq ul li .con p {line-height:28px;}

.pro-service {padding: 60px 0;}
.pro-service .tit p {font-size: 16px;line-height: 26px;margin-top: 15px;}
.pro-service ul {margin: 30px -10px 0;}
.pro-service ul li {padding: 10px 10px;}
.pro-service ul li .box .ico {height: 90px;}
.pro-service ul li .box h5 {margin-top: 15px;font-size: 18px;}
.pro-service ul li .box p {font-size: 16px;}
.pro-service ul li .box .t p {font-size: 20px;}

.pro-cert {margin-top: 60px;}
.pro-cert .txt {margin-left: 30px;}
.pro-cert .txt h3 {line-height: 44px;margin-top: 15px;}
.pro-cert .txt p {font-size: 16px;line-height: 1.6;margin-top: 20px;}

.rela-pro {padding: 50px 0;}
.rela-pro .list {margin-top: 30px;}
.rela-pro .swiper-pagination-bullets {margin-top: 35px;}
.rela-pro .swiper-slide .txt {padding: 25px 25px 10px;}
}
                                    
@media screen and (max-width: 1280px) {
.path {margin-top:60px;}
.pro_view_inner h6 {font-size:18px;}
.pro_view_inner .para p + p{margin-top:10px;}
.pro_view_inner .btn-box a{font-size:17px;}
.pro_view_inner .btn-box a:hover::before{font-size:17px;}

.rela-pro .swiper-slide .txt a.more{font-size:15px;}
.rela-pro .swiper-slide .txt a.more::before{font-size:15px;}
}
                                
@media screen and (max-width: 992px) {
.pro_view {padding: 30px 0;}
.pro_view .container {display: block;}
.pro_img {margin: 0 auto;}
.pro_view_inner {margin-left: 0;margin-top: 30px;}
.pro_view_inner h6{font-size:17px;}
.pro_view_inner h1{margin-top: 5px;}
.pro_view_inner .para {margin-top: 10px;font-size: 15px;line-height: 24px;}
.pro_view_inner .para dl dd + dd {margin-top: 5px;}

.pro_view_inner .btn-box a {line-height: 40px;border: 1px solid #fff;padding: 0 25px;}

.pro-service {padding: 30px 0;}
.pro-service ul {margin: 20px -10px 0;}
.pro-service ul li {padding: 10px 10px;width: 33.333%;}
.pro-service ul li .box {padding: 15px 0;}
.pro-service ul li .box .ico {height: 72px;}
.pro-service ul li .box h5 {margin-top: 10px;font-size: 17px;}
.pro-service ul li .box p {font-size: 15px;}
.pro-service ul li .box .t p {font-size: 18px;}
.pro-service ul li:last-child .t {font-size: 17px;padding: 0 10px;transform: translateY(0);height: 100%;}

.pro-cert {margin-top: 30px;display: block;}
.pro-cert .list {width: 100%;}
.pro-cert .swiper-pagination-bullets {position: static;margin-top: 20px;}
.pro-cert .txt {margin-left: 0;margin-top: 20px;text-align: center;}
.pro-cert .txt p {margin-top: 10px;}

.pro-faq {padding: 30px 0;}
.pro-faq ul {margin-top: 15px;}
.pro-faq ul li .tit h4 {font-size: 18px;padding-right: 20px;}
.pro-faq ul li .con {margin-top: 10px;}
.pro-faq ul li .con p {line-height: 24px;font-size: 15px;}

.rela-pro {padding: 30px 0;}
.rela-pro .list {margin-top: 20px;}
.rela-pro .swiper-pagination-bullets {margin-top: 20px;}
.rela-pro .swiper-slide .txt {padding: 15px 15px 10px;}
.rela-pro .swiper-slide .txt a.more {margin-top: 10px;line-height: 30px;padding: 0 15px;font-size:14px;}
}
                                
@media screen and (max-width: 768px) {
.path {margin-top:30px;}
.pro_img {width: 100%;display: block;}
.pro_img .view {width: 100%;}
.pro_img .preview {width: 100%;height: auto;margin-top: 20px;}
.pro_img .preview .swiper-slide.video::after {width: 26px;height: 26px;left: calc(50% - 13px);top: calc(50% - 13px);}
.pro_img .preview .arrow-left, .pro_img .preview .arrow-right {top: calc(50% - 14px);bottom: auto;transform: rotate(0);background: rgba(19,94,169,.93);color: #fff;}
.pro_img .preview .arrow-left{left: -14px;right: auto;}
.pro_img .preview .arrow-right{right:-14px;left: auto;}

.pro_view_inner h6{font-size:16px;}
.pro_view_inner .btn-box a{font-size:16px;line-height:34px;padding: 0 20px;}
.pro_view_inner .btn-box a:hover::before{font-size:16px;}

.pro-content table td {padding: 10px;white-space: nowrap;font-size: 15px;}

.pro-cert .txt p{font-size:15px;}
.pro-faq ul li .tit h4{font-size:17px;}
.rela-pro .swiper-slide .txt h5{-webkit-line-clamp:3;}

}

@media screen and (max-width: 480px) {
    
.pro_view_inner h6{font-size:15px;}
.pro_view_inner .btn-box a{font-size:15px;line-height:30px;}
.pro_view_inner .btn-box a:hover::before{font-size:15px;}

.pro-content table td{font-size:14px;}

.pro-service ul li {width: 50%;}
.pro-service ul li .box .ico {height: 60px;}

.pro-service ul li .box h5{font-size:15px;}
.pro-cert .txt p{font-size: 14px;margin-top:15px;}

.pro-faq ul li .tit h4{font-size:16px;}

.rela-pro .swiper-slide .txt h6 {font-size: 11px;letter-spacing: 2px;}
.rela-pro .swiper-slide .txt a.more{line-height:28px;font-size:13px;}

.rela-pro .swiper-slide .txt a.more::before{font-size:13px;}

}

@media screen and (max-width:420px) {
.pro_view_inner h6{font-size:14px;}

}