﻿
.product-gallery {display: flex;gap: 20px;align-items: flex-start;max-width: 1200px;margin: 0 auto;padding: 20px;}
.thumbnail-list {position: relative;width: 100px;display: flex;flex-direction: column;align-items: center;}
.scroll-btn {width: 100%;height: 30px;border: 0px solid #fff;color: #0069ab;background:none;cursor: pointer;font-size: 18px;border-radius: 4px;}
.scroll-btn:hover {background: #0069ab;border: 0px solid #0069ab;color:#fff;}
.thumb-container {width: 100%;max-height: 700px;overflow: hidden;margin: 10px 0;}
.thumb-item {width: 100%;height: 100px;margin-bottom: 10px;border: 1px solid transparent;box-sizing: border-box;border-radius: 4px;cursor: pointer;overflow: hidden;background: #fff;}
.thumb-item.active {border-color: #0069ab;}
.thumb-item img {width: 100%;height: 100%;object-fit: cover;}
.main-image-wrap {width: 960px;height: 700px;border: 0px solid #f0f0f0;border-radius: 4px;overflow: hidden;}
#mainImage {width: 100%;height: 100%;object-fit: contain;opacity: 1;transition: opacity 0.4s ease;}
#mainImage.fade{opacity: 0;}
.video-background1 {width: 100%;overflow: hidden;}
.video-background1 video {width:100%;height: auto;object-fit: cover;z-index: -1;}
.pronr{width: 100%;display: flex;justify-content: center; flex-wrap: wrap; margin-top: -20px;}
.pronr_1{width: 1580px; height: auto;margin-bottom: 75px; overflow: hidden; background:#efefef;border-radius: 10px; padding:0px;}
.pronr_1_1{width: 100%;height: auto;font-size: 25px;font-weight: 600;line-height: 1.5;color: #1B1B1B;margin-top: 50px;text-align: center; overflow: hidden; }
.pronr_1_2{width: 100%;height: auto;margin-top: 30px;margin-bottom: 50px;text-align: center; overflow: hidden;display: flex;flex-wrap: wrap;}
.pronr_1_2_1{width: 40%;margin: 0px 5%; height: auto;margin-bottom: 10px; border-bottom: solid 2px #b5b5b5;overflow: hidden;display: flex;}
.pronr_1_2_1_1{width: 46%;margin: 0px 2%; height: auto;overflow: hidden; color: #1A1A1A;font-size: 18px;line-height: 2;font-weight: 600; text-align: left;}
.pronr_1_2_1_2{width: 46%;margin: 0px 2%; height: auto;overflow: hidden; color: #1A1A1A;font-size: 18px;line-height: 2;text-align: right;}
.pronr_2{width: 1580px; height: auto;margin-bottom: 75px;overflow: hidden;padding:0px;display: flex;justify-content: space-between;}
.pronr_2_1{width: 49%;overflow: hidden;border: solid 1px #e1e1e1;line-height: 0;}
.pronr_3{width: 1580px; height: auto;margin-bottom: 75px;overflow: hidden;padding:0px;display: flex;justify-content: space-between;}
.pronr_3_1{width: 32%;overflow: hidden;line-height: 0;position: relative;border-radius: 10px;}
.pronr_3_2{width: 100%;height: 100px; overflow: hidden;z-index: 10; position: absolute;bottom:0px;}
.pronr_3_2_1{width: 100%;height: 50px;background:rgba(0,105,171,0.4); overflow: hidden;font-size: 18px;color: #fff;line-height: 50px;text-align: center;}
.pronr_3_2_2{width: 100%;height: 50px;background: #efe8e2; overflow: hidden;text-align: center;}
.pronr_3_2_2 a{width: 100%;height: 100%;display: block; font-size: 18px;color: #000;line-height: 50px;text-align: center;}
.pronr_3_1:hover .pronr_3_2_2{background:#0069ab; }
.pronr_3_1:hover .pronr_3_2_2 a{color: #fff;}
.pronr_3_1 img{width: 100%;object-fit: cover;transition: all 0.4s ease;}
.pronr_3_1:hover img{width: 100%;transform: scale(1.05);}
.pronr_4{width: 1580px; height: auto;margin-bottom: 10px;overflow: hidden;padding:0px;display: flex;justify-content: space-between;}
.pronr_4_1{width: 1580px; height: auto;overflow: hidden;padding:0px;text-align: left;font-size: 27px;line-height: 3;color: #000000;}
.pronr_5{width: 1580px; height: auto;margin-bottom: 75px;overflow: hidden;padding:0px;display: flex;justify-content: space-between;background: #efefef;}
.pronrtj{width: 100%;display: flex;justify-content: center; flex-wrap: wrap;background: #efefef;padding: 50px 0px;}
.pronrtop{width:100%;height: 850px;background: url("/skin/images1/bg-bg2.jpg") center no-repeat;padding: 0px;overflow: hidden;display: flex;justify-content: center;}
.nrt_1{width: 1140px;height: 700px; margin-top: 75px;overflow: hidden;}
.nrt_1_1{width: 410px;height: auto; margin-top: 15px;margin-left: 15px;line-height: 0; overflow: hidden;border: solid 1px #e1e1e1;}
.nrt_1_2{width: 440px;height: 700px; margin-top: 75px; background: #fff;overflow: hidden;}
.nrt_1_3{width: 440px;height: 700px; margin-top: 75px; background: #fff;overflow: hidden;}
.nrt_2{width: 700px;height: 700px; margin-top: 75px; overflow: hidden;}
.nrt_3{width: 440px;height: 700px; margin-top: 75px; overflow: hidden;}
.nrt_3_1{width: 440px; overflow: hidden;color: #1A1A1A;font-size: 30px;line-height: 2;}
.nrt_3_2{width: 440px; overflow: hidden;color: #1A1A1A;font-size: 18px;line-height: 2;margin-top: 20px;}
.nrt_3_3{width: 440px;  overflow: hidden;margin-top: 20px;background: rgba(255,255,255,0.5);display: flex;flex-direction: column;justify-content: space-between;}
.nrt_3_3_1{width:370px;margin:30px; color: #1A1A1A;font-size: 16px;line-height: 1.8;}

.vdanla{width: 160px;height: 40px; font-size: 16px;line-height: 40px;text-align: center;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);border-radius: 5px;background: linear-gradient(to right, #086fb2, #3699da);color: #fff;}
.vdanla:hover{background: linear-gradient(to right, #fff, #fff);color: #111;}

.display-top {width: 23.5%;border: solid 2px #fff;padding: 10px;overflow: hidden;border-radius: 9px;background: #fff;transition:0.3s ease;}
.display-top img{width: 100%;transition:0.3s ease;display: block;}
.display-top img:hover{transform: scale(1.1); }
.display-top:hover{border: solid 2px #7fb0d0;}
.cpimg{width: 100%;overflow: hidden;aspect-ratio: 4/3;display:flex;justify-content:center;align-items:center;margin-bottom:10px;}
.cptext{width: 100%;text-align: center;}
.cptext_1{width: 100%;height:28px;font-size:16px;color: #000;line-height:28px;overflow:hidden;}
.cptext_2{width: 100%;font-size:14px;color: #737373;line-height: 1.5;}
.cptext_3{width: 100%;font-size:14px;color: #737373;line-height: 1.5;}
.cptext_4{width: 100%;padding: 15px 0px 10px 0px; margin-bottom: 30px;}
.cptan1{width:40%;border:solid 1px #737373;padding:5px 0px;font-size: 13px; border-radius: 4px;display: block;float: left;margin: 0 5% 0 7.5%;}
.cptan1 a{color: aqua; }
.cptan1:hover{ background: #0069ab; color: #FFFFFF;border:solid 1px #0069ab;}
.cptan2{width:40%;border:solid 1px #121212;padding:5px 0px;font-size: 13px; color: #FFFFFF !important; background: #121212; border-radius: 4px;display: block;float: left;}
.cptan2 a{}
.cptan2:hover{ background: #0069ab; color: #FFFFFF;border:solid 1px #0069ab;}

@media screen and (max-width: 768px) {
.product-tops{height:1px;overflow: hidden;padding-top:50px;}
.pronrtop {width:100%;height:auto;display:flex;flex-direction:column;background:#E0E7F1;}
.nrt_1 {width:94%;height:auto;margin-left:3%;margin-top:10px;}
.nrt_3 {width:94%;height:auto;margin-left:3%;margin-top:0px;}
.nrt_3_1 {width:100%;font-size:24px;}
.nrt_3_2 {width:100%;}
.nrt_3_3 {width:100%;margin-bottom:20px;}
.nrt_3_3_1{width:90%;margin:5% 20px;}

.pronr{margin-top:0px;background:#E0E7F1;justify-content: flex-start;}
.pronr_1{margin-bottom:20px;width:94%;margin-left:3%;}
.pronr_2{margin-bottom:20px;width:94%;margin-left:3%;}
.pronr_3{margin-bottom:20px;width:94%;margin-left:3%;display:flex;flex-direction: column;}
.pronr_3_1 {width:100%;margin-bottom:20px;}
.pronr_1_1 {margin-top:25px;}
.pronr_1_2 {display:flex;justify-content: space-evenly;}
.pronr_1_2_1{flex-direction: column;width:45%;margin:0;}
.pronr_1_2_1_1 {width:100%;font-size:16px;}
.pronr_1_2_1_2 {width:100%;margin:0px;text-align:left;font-size:16px;}

.product-gallery {display:flex;flex-direction: column;padding:0px;gap:0px;}
.thumbnail-list {width: 100%;flex-direction: row;}
.thumb-container {display: flex;overflow-x:auto;}
.thumb-item {width: 80px;height: 80px;flex-shrink: 0;margin-right:5px;}
.scroll-btn {display: none;}
.main-image-wrap {width: 100%;height:auto;}
  
.display-top {width:100%;margin-bottom:15px;}
.pronr_4_1{width:94%;margin-left:3%;}
.pronr_4 {width:94%;margin-left:3%;display: flex;flex-direction: column;}
.pronrtj {justify-content:normal;padding:0px 0px;}


}