@charset "utf-8";
/* 设置主题 */
:root {--primary: #37493e;}

/* css样式初始化 */
*,::before,::after {box-sizing: border-box;}
html { -moz-tab-size: 4;-o-tab-size: 4;tab-size: 4;}
html {line-height: 1; /* 1 */-webkit-text-size-adjust: 100%; /* 2 */}
body {margin: 0;}
body {font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
     'Segoe UI', Roboto,Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';}
body {font-family: inherit;line-height: inherit;}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {margin: 0;}
ol,ul {list-style: none;margin: 0;padding: 0;}
a {color: inherit;text-decoration: inherit;}
html {font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont,'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* 1 */line-height: 1; /* 2 */}
pre,code,kbd,samp {font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,'Liberation Mono', 'Courier New', monospace;}
img,video {max-width: 100%;height: auto;}
button,input,optgroup,select,textarea {padding: 0;line-height: inherit;color: inherit}
textarea {resize: vertical;}
input::-moz-placeholder, textarea::-moz-placeholder {opacity: 1;color: #9ca3af;}
input::placeholder,textarea::placeholder {opacity: 1;color: #9ca3af;}

/* 滚动条+选中渲染css */
::selection{background:var(--primary);color:#fff;}
::-moz-selection{background:var(--primary);color:#fff;}
::-webkit-input-placeholder{text-overflow:ellipsis}
::-webkit-scrollbar{width:8px;height:8px;overflow:auto}
::-webkit-scrollbar-thumb{background-color:var(--primary);min-height:25px;min-width:25px;border:1px solid #e0e0e0}
::-webkit-scrollbar-track{background-color:#f7f7f7;border:1px solid #efefef}

/* 分页css */
.ui-bhpage{ width:auto; height:auto; overflow:hidden; clear:both; text-align:center;  margin:20px auto 20px auto;}
.ui-bhpage li{min-width:32px; height:32px;text-align:center; display:inline-block; line-height:32px; margin-right:4px;border:solid 1px #d9d9d9; border-radius:4px;}
.ui-bhpage li:first-child a,.ui-bhpage li:last-child a{box-sizing: border-box;padding: 0 10px;}
.ui-bhpage li:first-child span, .ui-bhpage li:last-child span {box-sizing: border-box;padding: 0 10px;}
.ui-bhpage li a{ width:100%; height:32px; text-align:center; line-height:32px; display:block; font-size:14px; color:#666; box-sizing: border-box; }
.ui-bhpage li:hover,.ui-bhpage li.active{ background:var(--primary); color:#fff; border:solid 1px var(--primary); }
.ui-bhpage li:hover a{ color: #fff;}

/* 文章分页 */
.article-pager{ width:100%; height:38px; margin:15px auto 15px auto; clear:both; text-align:center;}
.article-pager ul {display: flex;align-items: center;justify-content: center;}
.article-pager li{height:38px; border:solid 1px #efefef; text-align:center;line-height:38px; box-sizing:border-box; border-radius:4px; background:#fff;margin-left: 10px;flex: 1;max-width: 128px;}
.article-pager li a{ width:100%; height:38px; display:block; color:#333; font-size: 13px;}
.article-pager li a span{ font-size: 13px;}
.article-pager li:hover{  border:solid 1px var(--primary);}
.article-pager li:hover a{ color:var(--primary);}

/* 无数据 */
.ui-nodata {display: flex;justify-content: center;align-items: center;flex-direction: column;min-height: 300px;}
.ui-nodata img {max-width: 100px;}
.ui-nodata p {font-size: 15px;line-height: 30px;color: #444444;}

/* 文章内容 */
.ui-content{ width: 100%; min-height: 350px; margin: 10px auto; overflow: hidden;line-height:180%;word-wrap:break-word}
.ui-content p{ line-height: 32px; font-size: 16px;word-wrap:break-word;}
.ui-content img{ max-width: 100%;  border-radius: 3px; cursor: pointer; display: inline-block;}
.ui-content table{ width: 100%; border-collapse: collapse; margin: 10px auto;}
.ui-content table th{ padding:8px 12px; text-align: center; vertical-align: middle; background-color: #fafafa; border: solid 1px #dcdcdc;}
.ui-content table td{ padding:8px 12px; border: solid 1px #dcdcdc; font-size: 14px;}
.ui-content table tr:hover td{background-color: #fafafa;}
.ui-content table th:hover td{background-color: #efefef;}
.ui-content video{border:solid 1px #dcdcdc; overflow:hidden; padding:5px; border-radius:4px;}
.ui-content pre{ background-color: #f6f8fa; border: solid 1px #dcdcdc; border-radius: 4px; line-height: 160%; padding: 10px 12px; font-size: 13px; color: #666;}
.ui-content pre code{ padding: 0; border: 0;}
.ui-content code{background-color: #f6f8fa; border: solid 1px #dcdcdc; border-radius: 4px; padding: 4px 6px; font-size: 12px; margin:0 2px;}
.ui-content input{ margin-right: 5px;}

/* 文本溢出省略 */
.ellipsis-1,.ellipsis-2,.ellipsis-3{-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;text-overflow:ellipsis}
.ellipsis-1{-webkit-line-clamp:1}
.ellipsis-2{-webkit-line-clamp:2}
.ellipsis-3{-webkit-line-clamp:3}


/* 版心 */
.wrap {width: 1600px;margin: 0 auto;box-sizing: border-box;overflow: hidden;height: auto;padding: 0; position: relative;}
.w {width: 1400px;margin: 0 auto;box-sizing: border-box;overflow: hidden;height: auto;padding: 0;}
.container{width: 100%;height: auto; overflow: hidden;}

/* 头部 */
.header {height: 100px;width: 100%;background-color: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 999;box-shadow: 0px 1px 30px rgba(53, 53, 53, 0.1);}
.flex_header_wrap {display: flex;justify-content: space-between;align-items: center;height: 100%;gap: 50px;overflow: visible;}
.header .logo {font-size: 0;height: 47px;overflow: hidden;}
.header .logo img {width: 100%;height: 100%;object-fit: contain;}
.header .header_nav {flex: 1; display: flex;align-items: center;justify-content: flex-end;gap:40px;height: 100%;}
.header_nav li {position: relative;height: 100%;display: flex;align-items: center;}
.header_nav li a {font-size: 18px;line-height: 30px;color: #000000;font-weight: normal;position: relative;}
.header_nav li a:hover {color: var(--primary);font-weight: bold;}
.header_nav li.active a {color: var(--primary);font-weight: bold;}
.header_nav li.active a::after {content: "";position: absolute;bottom: 0;width: 100%;background-color: var(--primary);left: 0;height: 2px;}
.header_nav li .drop_down_menu {position: absolute;width: 200px;left: calc(50% - 100px); top: 100px;background-color: #fff;height: auto;max-height: 480px;overflow-y: auto;display: none;}
.header_nav li .drop_down_menu a {padding: 0;font-size: 16px;border-bottom: 0.5px solid rgba(178, 178, 178, 0.4);width: 100%;display: flex;height: 60px;line-height: 30px;align-items: center;justify-content: center;color: #000;font-weight: normal;}
.header_nav li .drop_down_menu a:hover {color: var(--primary);}
.header_nav li .drop_down_menu a:last-child{border-bottom: 0;}
.header_nav li .drop_down_menu a::after {content: '';height: 0;}
.header .other_header_nav {display: flex;align-items: center;gap: 15px;}
.other_header_nav .search_btn {width: 48px;height: 48px;color: #000;display: flex;justify-content: center;align-items: center;border-radius: 50%;cursor: pointer;}
.other_header_nav .search_btn span {font-size: 20px;}
.other_header_nav .lang {display: flex;align-items: center;gap: 10px;color: #000000;cursor: pointer;}
.other_header_nav .lang span {font-size: 18px;}
.other_header_nav .lang i {font-size: 20px;}
.other_header_nav .lang i:last-child {font-size: 12px;}
/* 头部分类 */
.classify {position: relative;height: 44px; width: 44px;-webkit-transition: background 0.5s;-moz-transition: background 0.5s;-o-transition: background 0.5s;transition: background 0.5s;display: none;}
.classify:hover {cursor: pointer;background-color: rgba(255, 255, 255, 0.2);}
.classify span {position: absolute;left: calc((100% - 25px) / 2);top: calc((100% - 2px) / 2);width: 25px;height: 2px;background-color: #000;}
.classify span:nth-child(1) {transform: translateY(10px) rotate(0deg);}
.classify span:nth-child(2) {opacity: 0;}
.classify span:nth-child(3) {transform: translateY(-10px) rotate(0deg);}
.classify-active span:nth-child(1) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: clickfirst;}
.classify-active span:nth-child(2) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: clicksecond;}
.classify-active span:nth-child(3) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: clickthird;}
/*第一条线旋转动画*/
@keyframes clickfirst { 0% {transform: translateY(8px) rotate(0deg);} 100% {transform: translateY(0) rotate(45deg);}}
/*第二条线淡入淡出动画动画*/
@keyframes clicksecond { 0% {opacity: 1;} 100% {opacity: 0;}}
/*第三条线旋转动画*/
@keyframes clickthird { 0% {transform: translateY(-8px) rotate(0deg);} 100% {transform: translateY(0) rotate(-45deg);}}
.classify-out span:nth-child(1) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outfirst;}
.classify-out span:nth-child(2) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outsecond;}
.classify-out span:nth-child(3) {animation-duration: 0.5s;animation-fill-mode: both;animation-name: outthird;}
@keyframes outfirst { 0% {transform: translateY(0) rotate(-45deg);} 100% {transform: translateY(-8px) rotate(0deg);}}
@keyframes outsecond { 0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes outthird { 0% {transform: translateY(0) rotate(45deg);} 100% {transform: translateY(8px) rotate(0deg);}}
/* 固定高度 */
.fixed_header {height: 100px;width: 100%;}

/* 分类容器 */
.asidewrap {position: fixed;top: 0px; left: 0;  right: 0;  bottom: 0; z-index: 998;display: none;background-color: #f5f5f5;padding: 0 15px; padding-top: 100px;}
.asidewrap ul {width: 100%;overflow-y: auto;height: calc(100vh - 100px);}
.asidewrap li {border-bottom: 1px solid #dcdcdc;font-size: 16px;}
.asidewrap li .asideheader {display: flex;justify-content: space-between;align-items: center;height: 60px;}
.asidewrap li .asideheader .tit {flex: 1;font-size: 16px;color: #333;line-height: 60px;}
.asidewrap li .asideheader .kz {width: 60px;font-size: 35px;font-style: normal;font-weight: normal;text-align: right;color: #666;}
.asidewrap li .asideheader .tit:hover {color: var(--primary);}
.asidewrap li .asidecontent {padding: 0 15px;display: none;}
.asidewrap li .asidecontent a {display: block;position: relative;line-height: 44px;color: #666;font-size: 14px;padding-left: 15px;}
.asidewrap li .asidecontent a:hover {color: var(--primary);}

/* 搜索容器 */
.searchWrap {position: fixed;display: none;justify-content: center;align-items: center;width: 100%;height: 100%;
background-color: rgba(0, 0, 0, 0.2);z-index: 99;top: 0;left: 0;}
.searchMain {position: relative;width: 45%;padding: 100px 80px;background-color: #fff;}
.searchMain .close{position: absolute;top: 0;right: 0; height: 50px;width: 50px;line-height: 50px;text-align: center;transition: all .5s;}
.searchMain .close span {font-size: 25px;}
.searchMain .close:hover{transform: rotate(180deg);}
.searchMain .searchform {display: flex;flex-direction: column;}
.searchMain .searchform .search-text {height: 60px;outline: none;font-size: 16px;padding: 0 10px;}
.searchMain .searchform .search-btn {cursor: pointer;width: 160px;height: 50px;margin-top: 30px;font-size: 16px;}


/* 底部 */
.footer {background-image: url(../images/footer_bg.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;}
.footer .footer_main {display: flex;justify-content: space-between;align-items: flex-start;border-bottom: 1px solid rgba(255, 255, 255, 0.2);padding-top: 60px;padding-bottom: 30px;}
.footer .footer_main .logo {font-size: 0;height: 56px;overflow: hidden;}
.footer .footer_main .logo img {width: 100%;height: 100%;object-fit: contain;}
.footer .footer_main dl dt {font-size: 20px;line-height: 25px;font-weight: bold;color: #fff;margin-bottom: 25px;}
.footer .footer_main dl dd {margin-bottom: 20px;}
.footer .footer_main dl dd a {font-size: 18px;line-height: 25px;color: #8c9b92;}
.footer .footer_main dl dd a:hover {color: #fff;}
.footer .footer_main .tit {font-size: 20px;line-height: 25px;margin-bottom: 25px;color: #fff;font-weight: bold;}
.footer .footer_main .follow_main .link_wrap {display: flex;align-items: center;gap: 10px;}
.footer .footer_main .follow_main .link_wrap a {width: 30px;height: 30px;border-radius: 50%;overflow: hidden;}
.footer .footer_main .follow_main .link_wrap a img {width: 100%;height: 100%;object-fit: contain;}
.social-item {position: relative;}
.wechat-icon {display: inline-flex;align-items: center;justify-content: center;width: 30px;height: 30px;border-radius: 50%;cursor: pointer;transition: all 0.3s ease;}
.qrcode-popup {position: absolute;top: 0px;left: 50%;transform: translateX(-50%);width: 200px;background: white;border-radius: 15px;padding: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);z-index: 1000;opacity: 0;
visibility: hidden;transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);}
.qrcode-popup.show {opacity: 1;visibility: visible;top: 40px;}
.qrcode-popup:before {content: '';position: absolute;top: -10px;left: 50%;transform: translateX(-50%);width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid white;}
.popup-header {display: flex;justify-content: flex-end;align-items: center;}
.close-popup {background: none;border: none;color: #95a5a6;font-size: 1.2rem;cursor: pointer;width: 24px;height: 24px;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: all 0.2s;}
.close-popup:hover {background: #f8f9fa;color: #e74c3c;}
.qrcode-img {width: 160px;height: 160px;margin: 0 auto 15px;background: #f8f9fa;border-radius: 8px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.qrcode-img img {width: 100%;height: 100%;object-fit: cover;}
.qrcode-desc {text-align: center;font-size: 0.9rem;color: #7f8c8d;}

.footer .footer_main .info {width: 458px;flex-shrink: 0;}
.footer .footer_main .info p {color: #fff;font-size: 18px;line-height: 24px;margin-bottom: 15px;}
.footer .footer_foot {padding: 30px 0;display: flex;justify-content: center;align-items: center;font-size: 16px;line-height: 22px;color: #76857c;gap: 10px;flex-wrap: wrap;}
.footer .footer_foot a:hover {color: #fff;}

/* 首页 */
.index_swiper {height: 700px;width: 100%;--swiper-theme-color:var(--primary);}
.index_swiper .swiper-slide a {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
.index_swiper .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
/* 首页关于我们 */
.index_about_wrap {height: 700px;width: 100%;background-image: url(../images/index_about_bg.jpg);background-position: center;background-size: cover;background-repeat: no-repeat;}
.index_about_wrap .index_about {height: 100%;display: flex;flex-direction: column;justify-content: center;}
.index_about .about_top {height: 200px;display: flex;justify-content: space-between;border-bottom: 1px solid rgba(255, 255, 255, 0.2);gap: 240px;}
.index_about .about_top h4 {font-size: 50px;font-weight: bold;color: #fff;flex-shrink: 0;}
.index_about .about_top .tip {font-size: 50px;line-height: 60px;color: #fff;}
.index_about .about_top .tip strong {color: #eded94;}
.index_about .about_bottom {margin-top: 80px;display: flex;justify-content: space-between;gap: 260px;}
.index_about .about_bottom .more {width: 170px;height: 50px;border: 1px solid #fff;flex-shrink: 0;display: flex;align-items: center;gap: 15px;font-size: 16px;font-weight: bold;color: #fff;border-radius: 25px;justify-content: center;}
.index_about .about_bottom .more:hover {color: var(--primary);border-color: var(--primary);}
.index_about .about_bottom p {font-size: 20px;line-height: 30px;color: #fff;}
.index_section_tit {display: flex;margin-top: 70px;padding-bottom: 45px;align-items: center;justify-content: space-between;border-bottom: 1px solid #eaeaea;}
.index_section_tit h3 {font-size: 50px;font-weight: bold;color: #000;}
.index_section_tit .more {width: 170px;height: 50px;border-radius: 25px;background-color: #000000;color: #fff;display: flex;align-items: center;justify-content: center;gap: 15px;font-size: 16px;}
.index_service_grid {padding: 40px 0;display: grid;grid-template-columns: repeat(3,1fr);gap: 22px;}
.index_service_grid .service_item {height: 520px;background-color: #e4e4e4;border-radius: 20px;overflow: hidden;box-sizing: border-box;position: relative;overflow: hidden;}
.index_service_grid .service_item img {width: 100%;height: 100%;object-fit: cover;transition: all 1.0s;}
.index_service_grid .service_item .mask {position: absolute;top: 0;left: 0;background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0.0) 100%);width: 100%;height: 100%;padding: 40px;box-sizing: border-box;overflow: hidden;display: flex;flex-direction: column;justify-content: flex-end;color: #fff;gap: 20px;}
.index_service_grid .service_item .mask h2 {font-size: 30px;font-weight: bold;}
.index_service_grid .service_item .mask .tag {height: 36px;border: 1px solid #fff;border-radius: 18px;color: #fff;line-height: 36px;text-align: center;font-size: 16px;padding: 0 20px;width: fit-content;}
.index_service_grid .service_item:hover img {transform: scale(1.5);}

.index_online_book {height: 460px;width: 100%;margin-bottom: 40px;background: url(../images/index_online_book_bg.jpg) no-repeat;background-size: cover;background-position: center;overflow: hidden;border-radius: 20px;display: flex;flex-direction: column;justify-content: center;padding: 0 90px;box-sizing: border-box;gap: 30px;}
.index_online_book h2 {font-size: 50px;color: #000;}
.index_online_book p {width: 500px;font-size: 20px;line-height: 30px;color: #666666;}
.index_online_book .more {display: flex;justify-content: center;align-items: center;gap: 10px;font-size: 16px;color: #fff;background-color: #000;width: 170px;height: 50px;border-radius: 25px;}
.index_adv_grid {display: flex;justify-content: space-between;align-items: center;gap: 24px;}
.index_adv_grid .adv_swiper {flex: 1;height: 600px;overflow: hidden;box-sizing: border-box;border-radius: 20px;position: relative; --swiper-theme-color: #000;}
.index_adv_grid .adv_swiper .swiper-horizontal>.swiper-pagination-bullets,.index_adv_grid .adv_swiper .swiper-pagination-bullets.swiper-pagination-horizontal,.index_adv_grid .adv_swiper .swiper-pagination-custom, .index_adv_grid .adv_swiper .swiper-pagination-fraction {bottom: 50px;}
.index_adv_grid .adv_swiper .swiper-slide {position: relative;}
.index_adv_grid .adv_swiper .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.index_adv_grid .adv_swiper .swiper-slide video {width: 100%;height: 100%;object-fit: cover;}
.index_adv_grid .adv_swiper .swiper-slide .mask {position: absolute;left: 0;height: 100%;top: 0;width: 100%;padding: 30px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: flex-end;}
.index_adv_grid .adv_swiper .swiper-slide .mask .adv_bg {height: auto;padding: 30px;background-color: #fff;border-radius: 20px;box-sizing: border-box;overflow: hidden;padding-bottom: 60px;}
.index_adv_grid .adv_swiper .swiper-slide .mask .adv_bg h2 {font-size: 20px;font-weight: bold;line-height: 25px;color: #000000;}

.center-play-button {position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%); width: 70px;height: 70px;background: rgba(0, 0, 0, 0.7);border-radius: 50%;display: flex;justify-content: center;align-items: center;cursor: pointer;z-index: 10;transition: all 0.3s ease;border: 2px solid rgba(255, 255, 255, 0.8);}
.center-play-button:hover {background: rgba(0, 0, 0, 0.9);transform: translate(-50%, -50%) scale(1.1);border-color: white;}
.center-play-button i {color: white;font-size: 2.5rem;margin-left: 5px;}
 /* 视频播放时隐藏播放按钮 */
.video-playing .center-play-button {opacity: 0;visibility: hidden;}
.video-playing .center-play-button i {margin-left: 0;}
.video-playing:hover .center-play-button {opacity: 0.8;visibility: visible;}
        

/* 关于我们 */
.about_index_wrap {padding-top: 60px;padding-bottom: 80px;}
.about_index_wrap h4 {font-size: 34px;font-weight: bold;line-height: 50px;color: #000;}
.about_index_wrap p {font-size: 20px;line-height: 32px;color: #666666;margin: 20px 0;}
.about_index_wrap .about_cont {display: flex;justify-content: space-between;align-items: center;gap: 20px;}
.about_index_wrap .about_cont .video_wrap {width: 550px;flex-shrink: 0;height: 400px;overflow: hidden;border-radius: 20px;}
.about_index_wrap .about_cont .video_wrap video {height: 100%;width: 100%;object-fit: cover;}
.about_index_wrap .about_cont .pic {flex: 1;height: 400px;}
.about_index_wrap .about_cont .pic img {width: 100%;height: 100%;object-fit: cover;}
.about_list_wrap {padding-top: 80px;padding-bottom: 100px;background-color: #f9f9f9;}
.about_list_wrap .about_list_main {display: flex;justify-content: space-between;align-items: center;gap: 100px;position: relative;}
.about_list_wrap .about_list_main .left {overflow-y: auto;height: 850px;} 
.about_list_wrap .about_list_main .left::-webkit-scrollbar{width:0px;}
.about_list_wrap .about_list_main .left .list-item {overflow: hidden;transition: all 0.3s ease;border-bottom: 1px solid #e0e0e0;}
.about_list_wrap .about_list_main .left .list-item:last-child {border-bottom: 0;}
.list-item .list-header {width: 100%;height: 120px;display: flex;align-items: center;justify-content: space-between;}
.list-item .list-header .list-title {flex: 1;font-size: 34px;line-height: 40px;color: #000000;font-weight: bold;}
.list-item .list-header .show-btn {width: 40px;height: 40px;display: flex;justify-content: center;align-items: center;background-color: #fff;border-radius: 50%;background-image: url(../images/zk.png);background-repeat: no-repeat;background-size: contain;background-position: center;cursor: pointer;}
.list-item .list-content {max-height: 0;transition: max-height 0.5s ease;overflow-y: auto;}
.list-item .list-content .content-inner {padding: 30px 0px;border-bottom: 1px solid #eceae6;font-size: 18px;line-height: 30px;color: #666;}
.list-item.active .show-btn {background-image: url(../images/sq.png);background-color: #37493e;}
.list-item.active .list-content {max-height: 500px;overflow-y: auto;}
.about_list_wrap .about_list_main .pic {height: 850px;width: 580px;flex-shrink: 0;border-radius: 10px;overflow: hidden;}
.about_list_wrap .about_list_main .pic img {width: 100%;height: 100%;object-fit: cover; opacity: 0;transform: scale(0.9);
transition: opacity 0.5s, transform 0.5s;}
.about_list_wrap .about_list_main .pic img.loaded {opacity: 1;transform: scale(1);}

/* 产品 */
.product_brand_wrap {background-image: url(../images/product_bg.jpg);width: 100%;background-position: bottom;background-repeat: no-repeat;}
.brand_section {margin-top: 60px;}
.brand_section:last-child {margin-bottom: 70px;}
.brand_section h2 {font-size: 50px;font-weight: bold;}
.brand_section .brand_grid {display: grid;grid-template-columns: repeat(5,1fr);gap: 30px;padding: 30px 0;}
.brand_section .brand_grid .brand_item {border: 1px solid #e5e5e5;height: 180px;overflow: hidden;}
.brand_section .brand_grid .brand_item img {width: 100%;height: 100%;object-fit: contain;transition: all 1.0s;}
.brand_section .brand_grid .brand_item:hover img {transform: scale(1.2);}

/* OK镜 */
.ok_head {background-color: #fff;margin: 60px 0;box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);border-radius: 20px;display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px;gap: 20px;padding-bottom: 20px;}
.ok_head h2 {font-size: 34px;line-height: 50px;}
.ok_head p {color: #666;font-size: 20px;line-height: 34px;}
.ok_head .pic {width: 100%;height: auto;overflow: hidden;}
.ok_head .pic img {width: 100%;height: 100%;object-fit: cover;}
.ok_wrap {display: flex;align-items: flex-start;justify-content: space-between;gap: 50px;position: relative; min-height: 100vh;overflow: visible;margin-bottom: 100px;}
.ok_wrap .left {width: 560px;height: 790px;position: sticky;top: 140px;border-radius: 20px;overflow: hidden;}
.ok_wrap .left img {width: 100%;height: 100%;object-fit: cover;}
.ok_wrap .right {flex: 1;height: auto;} 
.ok_wrap .right .item {border-bottom: 1px solid #eeeeee;padding: 50px 0;cursor: pointer;}
.ok_wrap .right .item:first-child {padding-top: 0;}
.ok_wrap .right .item h4 {font-size: 30px;line-height: 40px;color: #000000;margin-bottom: 20px;}
.ok_wrap .right .item p {font-size: 18px;line-height: 30px;color: #666666;}
.ok_wrap .right .item:hover {border-color: #37493e;}
.ok_wrap .right .item:hover h4 {color: #37493e;}
.ok_wrap .right .item:hover p {color: #37493e;}

/* 服务 */
.service_index_wrap {padding-top: 60px;padding-bottom: 100px;}
.service_index_main {display: flex;justify-content: space-between;align-items: flex-start;gap: 50px;}
.service_index_main dl {width: 320px;flex-shrink: 0;}
.service_index_main dl dt {font-size: 34px;font-weight: bold;line-height: 40px;margin-bottom: 15px;}
.service_index_main dl dd {height: 70px;width: 100%;border-bottom: 1px solid #e8e8e8;}
.service_index_main dl dd a {display: flex;justify-content: space-between;align-items: center;height: 100%;width: 100%;font-size: 18px;color: #000;font-weight: bold;line-height: 30px;}
.service_index_main dl dd.active {border-color: #37493e;}
.service_index_main dl dd.active a {color: #37493e;}
.service_index_main dl dd.active a i {color: #37493e;}
.service_index_main dl dd:hover {border-color: #37493e;}
.service_index_main dl dd:hover a {color: #37493e;}
.service_index_main dl dd:hover a i {color: #37493e;}
.service_index_main .service_main {flex: 1;}
.service_index_main .service_main h2 {font-size: 30px;font-weight: bold;line-height: 40px;margin-bottom: 15px;}
.service_index_main .service_main .service_nav {display: none;align-items: center;overflow-x: auto;flex-wrap: nowrap;gap: 15px;margin-bottom: 30px;}
.service_index_main .service_main .service_nav::-webkit-scrollbar {width: 0;height: 0;}
.service_index_main .service_main .service_nav .nav_item {padding: 0 15px;border: 1px solid #000;text-wrap: nowrap;height: 32px;line-height: 32px;border-radius: 15px;font-size: 14px;color: #000;}
.service_index_main .service_main .service_nav .nav_item.active {background-color: #37493e;color: #fff;}

/* 联系我们 */
.contact_us_wrap {padding: 80px 0;background-color: #f9f9f9;}
.contact_us_main {display: flex;background-color: #ffffff;box-shadow: 0px 0px 20px 0px rgba(187, 187, 187, 0.4);overflow: hidden;box-sizing: border-box;}
.contact_us_main .left {padding: 100px 60px;background-color: #37493e;flex: 1;display: flex;flex-direction: column;justify-content: space-between;gap: 180px;box-sizing: border-box;overflow: hidden;}
.contact_us_main .left h3 {font-size: 38px;line-height: 50px;color: #ffffff;font-weight: bold;}
.contact_us_main .left p {font-size: 20px;line-height: 30px;color: #fff;flex: 1;margin-top: 55px;}
.contact_us_main .left .bottom {display: flex;justify-content: space-between;align-items: center;gap: 30px;}
.contact_us_main .left .bottom .info_table {flex: 1;display: flex;gap: 30px;flex-direction: column;}
.contact_us_main .left .bottom .info_table .info_cell {font-size: 22px;line-height: 25px;color: #ffffff;display: flex;align-items: center;gap: 10px;}
.contact_us_main .left .bottom .info_table .info_cell i {font-size: 22px;}
.contact_us_main .left .bottom .code {width: 120px;height: 120px;}
.contact_us_main .left .bottom .code  img {width: 100%;height: 100%;object-fit: cover;}
.contact_us_main .right {padding: 100px 80px;background-color: #fff;width: 50%;flex-shrink: 0;}
.contact_us_main .right h3 {font-size: 30px;line-height: 50px;font-weight: bold;margin-bottom: 30px;}
.contact_us_main .right .input_wrap {height: 60px;overflow: hidden;box-sizing: border-box;margin-bottom: 15px;}
.contact_us_main .right .input_wrap input {height: 100%;width: 100%;font-size: 20px;border: none;outline: none;border-bottom: 1px solid #e9e9e9;}
.contact_us_main .right .text_wrap {height: 160px;overflow: hidden;margin-bottom: 40px;margin-top: 30px;}
.contact_us_main .right .text_wrap textarea {width: 100%;height: 100%;border: 0;outline: none;font-size: 20px;border-bottom: 1px solid #e9e9e9;}
.send_btn {height: 56px;width: 200px;border-radius: 4px;background-color: #37493e; margin-top: 40px;cursor: pointer;display: flex;justify-content: center;align-items: center;font-size: 18px;color: #fff;font-weight: bold;}
.contact_us_main .right .time_wrap .ui-content{min-height: auto;}


/* 其他页面的轮播图*/
.other_swiper {height: 450px;width: 100%;}
.other_swiper .swiper-slide a {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;position: relative;}
.other_swiper .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.other_swiper .swiper-slide h6 {position: absolute;top: 0;height: 100%;left: 0;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 50px;color: #fff;}


/* 其他页面的在线预约 */
.online_book_wrap {height: 460px;width: 100%;background-image: url(../images/online_book_bg.jpg);background-size: cover;background-repeat: no-repeat;background-size: cover;background-position: center;}
.online_book_wrap .onlin_book_main {display: flex;flex-direction: column;justify-content: center;gap: 34px;height: 100%;}
.online_book_wrap .onlin_book_main h4 {font-size: 50px;font-weight: bold;color: #000;}
.online_book_wrap .onlin_book_main p {color: #000;font-size: 20px;line-height: 30px;color: #666666;width: 540px;}
.online_book_wrap .onlin_book_main a {width: 170px;height: 50px;border-radius: 25px;color: #fff;background-color: #000;display: flex;justify-content: center;align-items: center;gap: 24px;font-size: 16px;font-weight: bold;}

/* 悬浮广告窗样式 */
.floating-ad {position: fixed;width: 240px;overflow: hidden;z-index: 1000;display: none;opacity: 0;transform: translateY(20px);transition: opacity 0.3s, transform 0.3s;padding-top: 30px;box-sizing: border-box;}
.floating-ad.show {display: block;opacity: 1;transform: translateY(0);}
.floating-ad.bottom-right {bottom: 20px;right: 20px;}
.floating-ad.bottom-left {bottom: 20px;left: 20px;}
.floating-ad.top-right {top: 20px;right: 20px;}
.floating-ad.top-left {top: 20px;left: 20px;}
.floating-ad.center {top: 50%;left: 50%;transform: translate(-50%, -50%);}
.floating-ad.center.show {transform: translate(-50%, -50%);}
.ad-close {position: absolute;top: 0px;right: 0px;width: 22px;height: 22px;display: flex;justify-content: center;align-items: center;border: 1px solid #000;color: #000;border-radius: 50%;cursor: pointer;}
.ad-content {height: 390px;width: 100%;display: flex;justify-content: space-between;flex-direction: column;border-radius: 20px;overflow: hidden;}
.ad-content .pic {height: 320px;flex-shrink: 0;width: 100%;}
.ad-content .pic img {width: 100%;height: 100%;object-fit: cover;}
.ad-content .ad_txt {flex: 1;display: flex;justify-content: center;align-items: center;padding: 15px;background-color: #37493e;}
.ad-content .ad_txt h6 {color: #fff;font-size: 16px;line-height: 24px;text-align: center;}

 /* 动画效果 */
@keyframes slideInRight {
    from {transform: translateX(100px);opacity: 0;}
    to {transform: translateX(0);opacity: 1;}
}
@keyframes slideInLeft {
    from {transform: translateX(-100px);opacity: 0;}
    to {transform: translateX(0);opacity: 1;}
}
@keyframes slideInBottom {
    from {transform: translateY(100px);opacity: 0;}
    to {transform: translateY(0);opacity: 1;}
}
@keyframes slideInTop {
    from {transform: translateY(-100px);opacity: 0;}
    to {transform: translateY(0);opacity: 1;}        
}
@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.05);}
    100% {transform: scale(1);}
}
.animate-right {animation: slideInRight 0.5s ease forwards;}
.animate-left {animation: slideInLeft 0.5s ease forwards;}
.animate-bottom {animation: slideInBottom 0.5s ease forwards;}
.animate-top {animation: slideInTop 0.5s ease forwards;}
.animate-pulse {animation: pulse 2s infinite;}

.index_brand_flex {display: flex;height: auto;width: 100%;justify-content: space-between;align-items: center;margin-top: 50px;margin-bottom: 70px;gap: 28px;}
.index_brand_flex .brand_item {background-image: url(../images/lensbrands_bg.png);background-position: center;background-repeat: no-repeat;background-size: cover;height: 762px;padding: 30px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 30px;width: 50%;border-radius: 20px;overflow: hidden;}
.index_brand_flex .brand_item:last-child {background-image: url(../images/framebrands_bg.png);}
.index_brand_flex .brand_item .icon {display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 20px;}
.index_brand_flex .brand_item .icon img {width: 50px;height: 50px;object-fit: contain;}
.index_brand_flex .brand_item .icon h2 {font-size: 34px;color: #fff;font-weight: bold;}
.index_brand_flex .brand_item .brand_swiper_wrap {background-color: #fff;width: 100%;border-radius: 20px;overflow: hidden;position: relative;overflow: hidden;flex: 1;padding: 30px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 30px;}
.index_brand_flex .brand_item .brand_swiper {width: 100%;overflow: hidden;flex: 1;}
.index_brand_flex .brand_item .brand_swiper .swiper-slide {background: #fff;border: 1px solid #e5e5e5;overflow: hidden;}
.index_brand_flex .brand_item .brand_swiper .swiper-slide img {width: 100%;height: 100%;object-fit: contain;transition: all 1.0s;}
.index_brand_flex .brand_item .brand_swiper .swiper-slide:hover img {transform: scale(1.2);}
.brand_swiper_wrap .bottom {height: 50px;flex-shrink: 0;width: 100%;display: flex;justify-content: center;align-items: center;gap: 10px;}
.brand_swiper_wrap .bottom a {width: 140px;height: 50px;background-color: #000;border-radius: 25px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 16px;}
.brand_swiper_wrap .bottom .swiper_btn {height: 50px;width: 50px;border-radius: 50%;background-color: #e5e5e5;display: flex;justify-content: center;align-items: center;color: #7d7d7d;cursor: pointer;}
.brand_swiper_wrap .bottom .swiper_btn i{font-size: 16px;}
.brand_swiper_wrap .bottom .swiper_btn.prev {transform: rotate(-180deg);}
.brand_swiper_wrap .bottom .swiper_btn:hover {background-color: #000;color: #fff;}

/* 在线预约 */
.online_index_book {width: 100%;background-image: url(../images/online_bg.jpg);background-repeat: no-repeat;background-size: cover;background-position: center;padding: 100px 0;}
.flex_onlin_book {display: flex;justify-content: space-between;align-items: center;gap: 30px;}
.flex_onlin_book .left {width: 530px;flex-shrink: 0;height: 740px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 40px;}
.flex_onlin_book .left h2 {font-size: 34px;line-height: 50px;font-weight: bold;color: #000;}
.flex_onlin_book .left p {font-size: 20px;line-height: 30px;color: #000000;}
.flex_onlin_book .left .pic {width: 321px;height: auto;}
.flex_onlin_book .left .pic img {width: 100%;height: 100%;object-fit: contain;}

.flex_onlin_book .right {height: 740px;flex: 1;position: relative;overflow: hidden;border-radius: 20px;background-color: #fff;box-shadow: 0px 0px 20px 0px rgba(187, 187, 187, 0.4);}

/* 文章 */
.ui_article {padding-top: 60px;padding-bottom: 90px;display: flex;align-items: flex-start;justify-content: space-between;gap: 115px;}
.article_main {flex: 1;}
.article_main .article_head {border-bottom: 2px solid #e7e7e7;padding-bottom: 40px;}
.article_main .article_head h4{font-size: 32px;line-height: 38px;text-align: center;}


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

    /* 版心 */
    .wrap {width: 100%;padding: 0 15px;}
    .w {width: 100%;padding: 0 15px;}

    /* 头部 */
    .header {height: 64px;}
    .header .logo {height: 35px;}
    .header .header_nav {display: none;}
    .header .other_header_nav {gap: 0px;}
    .other_header_nav .search_btn {height: 44px;width: 44px;}
    .other_header_nav .classify {display: block;}
    .other_header_nav .lang{width: 44px;height: 44px;justify-content: center;}
    .other_header_nav .lang i {display: none;}
    .fixed_header {height: 64px;}
    .searchMain {width: 90%;padding: 50px 15px;}



    /* 底部 */
    .footer .footer_main {flex-direction: column;padding-top: 30px;gap: 30px;}
    .footer .footer_main dl {display: none;}
    .footer .footer_main .info {width: 100%;}

    /* 首页 */
    .index_swiper {height: 175px;}
    .index_section_tit {margin-top: 30px;padding-bottom: 30px;}
    .index_section_tit h3 {font-size: 25px;}
    .index_section_tit .more {width: 120px;font-size: 14px;}
    .index_service_grid {grid-template-columns: repeat(1,1fr);padding: 30px 0;}

    /* 首页关于我们 */
    .index_about_wrap {height: auto;} 
    .index_about .about_top {height: auto;flex-direction: column;gap: 30px;padding: 30px 0;}
    .index_about .about_top h4 {font-size: 25px;}
    .index_about .about_top .tip {font-size: 25px;line-height: 30px;}
    .index_about .about_bottom {margin-top: 0px;flex-direction: column;gap: 30px;padding: 30px 0;}
    .index_about .about_bottom p {font-size: 16px;line-height: 24px;}
    .index_online_book {height: auto;margin-bottom: 30px;padding:30px;}
    .index_online_book h2 {font-size: 25px;}
    .index_online_book p {width: 100%;font-size: 15px;}
    .index_online_book .more {width: 120px;font-size: 14px;}
    .index_adv_grid {flex-direction: column;}
    .index_adv_grid .adv_swiper {width: 100%;height: auto;}
    .index_adv_grid .adv_swiper .swiper-slide .mask {padding: 15px;}
    .index_adv_grid .adv_swiper .swiper-horizontal>.swiper-pagination-bullets, .index_adv_grid .adv_swiper .swiper-pagination-bullets.swiper-pagination-horizontal, .index_adv_grid .adv_swiper .swiper-pagination-custom, .index_adv_grid .adv_swiper .swiper-pagination-fraction {bottom: 30px;}
    .index_adv_grid .adv_swiper .swiper-slide .mask .adv_bg {padding: 15px;padding-bottom: 30px;}
    .index_adv_grid .adv_swiper .swiper-slide .mask .adv_bg h2 {font-size: 15px;}

    .index_brand_flex {flex-direction: column;}
    .index_brand_flex .brand_item {width: 100%;padding: 15px;}
    .index_brand_flex .brand_item .icon h2 {font-size: 24px;}
    .index_brand_flex .brand_item .brand_swiper_wrap {padding: 15px;gap: 15px;}
    .brand_swiper_wrap .bottom a {font-size: 14px;}

    /* 产品 */
    .brand_section {margin-top: 30px;}
    .brand_section h2 {font-size: 25px;}
    .brand_section .brand_grid {grid-template-columns: repeat(3, 1fr);gap: 15px;}
    .brand_section .brand_grid .brand_item {height: 140px;}

    /* 联系我们 */
    .contact_us_wrap {padding: 40px 0;}
    .contact_us_main {flex-direction: column;gap: 15px;}
    .contact_us_main .left {padding: 15px;gap: 60px;}
    .contact_us_main .left h3 {font-size: 18px;line-height: 38px;}
    .contact_us_main .left p {margin-top: 30px;font-size: 15px;}
    .contact_us_main .right {width: 100%;padding: 15px;}
    .contact_us_main .left .bottom {flex-direction: column;gap: 15px;}
    .contact_us_main .left .bottom .info_table {gap: 15px;}
    .contact_us_main .left .bottom .info_table .info_cell {font-size: 16px;}
    .contact_us_main .right .input_wrap input {font-size: 15px;}
    .contact_us_main .right .text_wrap textarea {font-size: 15px;}
    .contact_us_main .right h3 {font-size: 25px;margin-bottom: 15px;}

    /* 关于我们 */
    .about_index_wrap {padding-top: 30px;padding-bottom: 30px;}
    .about_list_wrap {padding: 30px 0;}
    .about_list_wrap .about_list_main .pic {display: none;}
    .about_list_wrap .about_list_main .left {height: auto;}
    .list-item .list-header .list-title {font-size: 24px;}
    .list-item .list-content .content-inner {font-size: 15px;}

    /* OK镜 */
    .ok_head {margin: 30px 0;padding: 15px;}
    .ok_head h2 {font-size: 24px;line-height: 40px;}
    .ok_head p {font-size: 16px;}
    .ok_wrap .left {display: none;}
    .ok_wrap .right {width: 100%;}
    .ok_wrap .right .item {padding: 30px 0;}
    .ok_wrap .right .item h4 {font-size: 20px;}
    .ok_wrap .right .item p {font-size: 15px;}

    /* 服务 */
    .service_index_wrap {padding: 30px 0;}
    .service_index_main dl {display: none;}
    .service_index_main .service_main {width: 100%;}
    .service_index_main .service_main .service_nav  {display: flex;}
    .service_index_main .service_main h2 {font-size: 20px;}



    /* 其他页面的轮播图*/
    .other_swiper {height: 225px;width: 100%;}
    .other_swiper .swiper-slide h6  {font-size: 25px;}
    .about_index_wrap h4 {font-size: 18px;}
    .about_index_wrap p {font-size: 14px;}
    .about_index_wrap .about_cont {flex-direction: column;}
    .about_index_wrap .about_cont .video_wrap {width: 100%;height: auto;}
    .about_index_wrap .about_cont .pic {height: auto;}


    /* 其他页面的在线预约 */
    .online_book_wrap {height: 230px;}
    .online_book_wrap .onlin_book_main {gap: 15px;}
    .online_book_wrap .onlin_book_main h4 {font-size: 25px;}
    .online_book_wrap .onlin_book_main p {font-size: 14px;width: 100%;}



    .online_index_book {padding: 30px 0;}
    .flex_onlin_book .left {display: none;}
    .flex_onlin_book .right {width: 100%;}

}