﻿body{font-family:Cambria, Georgia, serif;}
fieldset,img{border-width:0px;}
ul,ol,dl,dd,dt,form{list-style:none;}
li {list-style:none outside none;}
a{text-decoration:none; color:#162a45;}
a:hover{color:#FF3300; text-decoration:underline;}
.clear{clear:both; line-height:1px;}
.Facebook{position: fixed; right: 5px; top:200px; z-index:998;}
IMG {MAX-WIDTH: 100%; HEIGHT: auto;}
*{LIST-STYLE-TYPE: none; BOX-SIZING: border-box; TEXT-DECORATION: none; PADDING: 0px; MARGIN: 0px;}


.app{MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto; padding-top:12px; text-align:center;}
.app img{height:30px;}
.wechat-popup{display:none;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);background:#fff;padding:24px;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,0.25);z-index:10000;text-align:center;color:#000000; font-size:13px; line-height:1.5em;}
.wechat-popup img{width:200px;margin:10px 0;}
.close-btn{padding:5px 16px;border:none;background:#eee;border-radius:5px;cursor:pointer;}
.social-item{margin-right:8px;}

@media only screen and (min-width:320px) {
BODY {PADDING:24px 0px 80px 0px;}
#Language{position: fixed;top:12px;right:6px;z-index:998;width:100px;}
#Language .country-dropdown{}
#Language .country-select-btn svg {HEIGHT: 25px; color:#FFFFFF;}
#top {HEIGHT: 48px; WIDTH: 100%; BACKGROUND: rgb(22,42,69); POSITION: fixed; PADDING-TOP: 8px; Z-INDEX: 99; DISPLAY: table; TOP: 0px;}
#top IMG {HEIGHT: 30px; MARGIN-LEFT: 12px; FILTER: brightness(0) invert(1);}
#top .company {FONT-SIZE: 18px; HEIGHT: 40px; VERTICAL-ALIGN: middle; FONT-WEIGHT: bold; COLOR: rgb(255,255,255); DISPLAY: table-cell; LINE-HEIGHT: 40px;}
#menu{FONT-SIZE: 13px; HEIGHT: 40px; WIDTH: 100%; BACKGROUND: rgb(22,42,69); POSITION: fixed; PADDING-BOTTOM: 12px; Z-INDEX: 99; BOTTOM: 0px; z-index:99;}
#top_img {MAX-WIDTH: 1600px; HEIGHT: auto; WIDTH: 100%; MARGIN: 0px auto; LINE-HEIGHT: 1px;}
#top_img DIV {FONT-SIZE: 13px; WIDTH: 65%; MARGIN-TOP: 14px; POSITION: absolute;  transform: translateX(33%); FONT-WEIGHT: bold; COLOR: rgb(255,255,255); TEXT-ALIGN: center; LINE-HEIGHT: 1.5em}
#content {MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto;}
#content .here {FONT-SIZE: 12px; LINE-HEIGHT: 2em; WIDTH: 100%; BACKGROUND: rgb(215,208,192); COLOR: rgb(22,42,69); TEXT-ALIGN: right;}
#content .content_left {WIDTH: 100%; LINE-HEIGHT: 0px; clear:both;}
#content .content_left UL{display: grid;grid-template-columns: 50% 50%;list-style: none;padding:0;margin:0;border:1px solid #aaa;}/* 4列，规则统一，只写一次 */
#content .content_left UL li{background:url(/Images/sort.png) 8px no-repeat;padding: 8px 24px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;overflow-wrap: break-word;font-size:13px;line-height:1em;}/* 每一行最后一列清除右边框：4列，4n的li */
#content .content_left UL li:nth-child(2n){border-right:none;}/* 表头高亮 */
#content .content_left UL li:nth-child(-n+1){background:url(/Images/sort.png) 8px no-repeat;font-weight:bold;font-size:16px;}

#content .content_right {WIDTH: 100%; MARGIN-TOP: 12px; CLEAR: both}
#content .content_right .content_title H1 {FONT-SIZE: 22px; TEXT-ALIGN: center; LINE-HEIGHT: 28px}
#content .content_right .content_content {FONT-SIZE: 14px; WIDTH: 100%; PADDING-TOP: 14px; LINE-HEIGHT: 20px}
.content_p{WIDTH: 98%; MARGIN: 0px auto;}
.p_t{font-size:18px; font-weight:bold; line-height:2em; color:#FFFFFF; background:rgb(22,42,69);border-radius: 12px 12px 0px 0px; display: inline-block; width:auto; padding:0px 12px;}
.p_c{font-size:14px; line-height:2em; border-radius: 0px 12px 0px 12px; padding:8px 12px; border:rgb(22,42,69) 3px solid; margin-bottom:18px;}
.content_p h2{FONT-SIZE: 14px; LINE-HEIGHT: 28px}
.product_doc {DISPLAY:none;}
.product_key{DISPLAY: none}
.product_key h2{ font-size:10px;}
#FilmType ul li{font-size:10px; line-height:1.5em;}
#FilmType ul .Film_title{font-size:14px; line-height:1.5em;}


#Features .doc_2{width:100%; line-height:2em;}
#Features .doc_2 .left ul .title_left{ width:100%; }
#Features .doc_2 .left ul .doc_left{ width:100%; }
#Features .doc_2 .right ul .doc_right{width:100%; }
#market .doc_1 div{ padding:0px 14px 0px 14px;}
#Features .doc_2 ul{padding:0px 0px 0px 0px;}
#Features .title_2{font-size:18px; padding-top:12px; padding-bottom:5px;}
#Features .doc_2 {padding:0px;}
#Features .doc_2 .left{width:100%;}
#Features .doc_2 .left div{font-size:14px; line-height:20px; padding:0px; font-weight:bold;}
#Features .doc_2 .right {padding:0px;width:100%;}
#Features .doc_2 .right div{font-size:13px; line-height:20px; padding:0px;}}
@media only screen and (min-width:992px) {
BODY {PADDING:0px 0px 0px 0px;}
#Language{position:absolute;top:12px;right:6px;z-index:998;width:100px;}
#Language .country-dropdown{width:100px;}
#Language .country-select-btn svg {HEIGHT: 25px; color:rgb(22,42,69);}
#top {MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto; HEIGHT: 60px; position:static; padding-top:0px; padding-bottom:0px; background:none; line-height:1px;}
#top IMG {HEIGHT: 80px; MARGIN-LEFT: 12px; FILTER:none;}
#top .company {FONT-SIZE: clamp(28px, 3vw, 88px); HEIGHT: 40px; VERTICAL-ALIGN: middle; FONT-WEIGHT: bold; COLOR:rgb(22,42,69); DISPLAY: table-cell; LINE-HEIGHT: 40px;}
#menu{MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto; FONT-SIZE: 18px; font-weight:bold; HEIGHT: 40px; BACKGROUND: rgb(22,42,69); POSITION:static; PADDING-BOTTOM: 12px; Z-INDEX: 99; BOTTOM: 0px;}
#top_img {MAX-WIDTH: 1600px; HEIGHT: auto; WIDTH: 100%; MARGIN: -20px auto; LINE-HEIGHT: 1px;}
#top_img DIV {FONT-SIZE: clamp(28px, 3vw, 58px); WIDTH: 66%; max-width:1000px; MARGIN-TOP: 14px; float:right; FONT-WEIGHT: bold; COLOR: rgb(255,255,255); TEXT-ALIGN: center; LINE-HEIGHT: 1.5em}
#content {MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto; clear:both; position:relative; z-index:99999;}
#content .here {FONT-SIZE: 26px; LINE-HEIGHT: 2em; WIDTH: 100%; BACKGROUND: rgb(215,208,192); COLOR: rgb(22,42,69); TEXT-ALIGN: right;}
#content .content_left {WIDTH: 20%; LINE-HEIGHT: 0px; clear:both; float:left;}
#content .content_left UL{display: grid;grid-template-columns: 100%;list-style: none;padding:0;margin:0;border:1px solid #aaa;}/* 4列，规则统一，只写一次 */
#content .content_left UL li{background:url(/Images/sort.png) 8px no-repeat;padding: 8px 24px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;overflow-wrap: break-word;font-size:16px;line-height:2em;}/* 每一行最后一列清除右边框：4列，4n的li */
#content .content_left UL li:nth-child(1n){border-right:none;}/* 表头高亮 */
#content .content_left UL li:nth-child(-n+1){background:url(/Images/sort.png) 8px no-repeat;font-weight:bold;font-size:16px;}

#content .content_right {WIDTH: 80%; overflow:hidden; MARGIN-TOP: 12px; CLEAR:none; float:left;}
#content .content_right .content_title H1 {FONT-SIZE:xx-large; TEXT-ALIGN: center; LINE-HEIGHT: 4em;}
#content .content_right .content_content {FONT-SIZE: 16px; WIDTH: 100%; PADDING-TOP: 14px; LINE-HEIGHT:2em;}
.content_p{WIDTH: 100%; MARGIN: 0px auto;}
.p_t{font-size:18px; font-weight:bold; line-height:2em; color:#FFFFFF; background:rgb(22,42,69);border-radius: 12px 12px 0px 0px; display: inline-block; width:auto; padding:0px 12px;}
.p_c{font-size:14px; line-height:2em; border-radius: 0px 12px 0px 12px; padding:8px 12px; border:rgb(22,42,69) 3px solid; margin-bottom:18px;}
.content_p h2{FONT-SIZE: 14px; LINE-HEIGHT: 28px}
.carousel-container{DISPLAY: none}
.product_doc {DISPLAY:block;}
.product_key{DISPLAY:block;}
.product_key h2{ font-size:14px; color:#FFFFFF; padding-bottom:16px; padding-top:16px;}
#FilmType ul li{font-size:16px; line-height:2em;}
#FilmType ul .Film_title{font-size:18px; line-height:2em;}


#Features .title_2{font-size:36px;}
#Features .doc_2 .left{float:left; width:50%;}
#Features .doc_2 .left ul{padding-right:30px;}
#Features .doc_2 .right{float:right; width:50%;}}
@media only screen and (min-width:1600px) {#Language{position:fixed;top:12px; right:50%;z-index:998; width:100px;transform: translateX(800px);}}



#market{MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto; background:#162a45;border-radius: 12px;}
#market .title_1{font-weight:bold;text-align:center; font-size:22px; color:#FFFFFF; width:100%;}
#market .doc_1{color:#FFFFFF; width:100%;}
#market .doc_1 div{padding:14px 14px 14px 14px; width:auto;}
#Features{MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto; }
#Features .title_2{color:#162a45; font-weight:bold; font-size:30px; padding-top:12px; padding-bottom:12px;}
#Features .doc_2{width:100%; line-height:40px;}
#Features .doc_2 .left div{font-size:18px; line-height:2em;}
#Features .doc_2 ul{padding:0px 0px 0px 14px;}
#Features .doc_2 .left ul .title_left{ font-weight:bold; font-size:larger; width:100%;}
#Features .doc_2 .left ul .doc_left{ width:100%; padding-bottom:20px;}


#Features .doc_2 .right div{font-size:16px; line-height:1.5em;}
#Features .doc_2 .right ul .title_right{font-weight:bold; font-size:large; padding-bottom:4px;}
#Features .doc_2 .right ul .doc_right{width:90%; border-bottom:#999999 solid 1px; padding-bottom:6px; margin-bottom:12px;}




















#Language .country-select-btn{width:100%;height:32px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:right;}  /* 移除边框 */
#Language .country-select-btn:hover{opacity:0.75;}
#Language .flag{font-size:13px;}/* 下拉菜单 */
#Language .country-list{display:none;margin-top:4px;background:#fff;border:1px solid #eee;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.1);overflow:hidden;}
#Language .country-list li a{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;color:#333;font-size:13px;white-space:nowrap;}
#Language .country-list li a:hover{background:#f5f5f5;}
#Language .country-list.show{display:block;}

#menu A {HEIGHT: 40px; WIDTH: 20%; border-right:#FFFFFF dotted 1px; FLOAT: left; COLOR: rgb(255,255,255); DISPLAY: flex; align-items: center; justify-content: center}
#menu .menu_right{border-right:#FFFFFF dotted 0px;}
#menu A:hover {TEXT-DECORATION: underline; BACKGROUND: rgb(215,208,192); COLOR: rgb(22,42,69);}


#FilmType{WIDTH: 100%; MARGIN: 12px auto; clear:both;}
#FilmType ul{display: grid;grid-template-columns: 18% 23% 27% 32%;list-style: none;padding:0;margin:0;border:1px solid #aaa;}
#FilmType ul li{padding: 1px 2px;border-right:1px solid #aaa;border-bottom:1px solid #aaa;overflow-wrap: break-word;display:flex;align-items:center;justify-content:center;}
#FilmType ul li:nth-child(2+4n){border-right:none;}#FilmType ul li:nth-child(-n+6){background:#f5f5f5;font-weight:bold;}
#FilmType ul .Film_title{grid-column: 1 / -1;font-weight:bold; text-align:center; background:#FFFFFF;}
#FilmType ul .Film_doc{grid-column: 1 / -1; text-align:center; background:#FFFFFF;}
#FilmType ul .Film_b{font-weight:bold; text-align:center;}

#about{MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto;line-height:1px; background:#162a45; padding:8px 0px 8px 0px;border-radius: 12px 12px 0px 0px; clear:both; display:none;}
#about .about_title{text-align:center; font-size:22px; line-height:1.5em; color:#FFFFFF; font-weight:bold; width:100%;}
#about ul{width:100%;}
#about ul li{text-align:center; padding:5px 0px 5px 0px;}
#about input{width:90%; background:#d7d0c0; border:0px;}
#about .submit{background:#d7d0c0; border-bottom:0px; padding:2px 0px 2px 0px; color:#162a45;}
#bottom{MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto;font-size:13px; clear:both; line-height:1.5em;text-align:center; background:#162a45; color:#FFFFFF;border-radius: 0px 0px 12px 12px; padding:8px 0px 8px 0px;}
#content .here A {COLOR: rgb(22,42,69)}
#content .here A:hover {TEXT-DECORATION: underline; COLOR: rgb(22,42,69)}
#product{MAX-WIDTH: 1600px; WIDTH: 100%; MARGIN: 0px auto; font-size:13px; line-height:1.5em;}
.product-main-wrap {MAX-WIDTH: 600px; WIDTH: 100%; MARGIN: 0px auto; border-radius: 16px 16px 0px 0px; overflow: hidden;}
.main-img-box {width:100%;padding-top:100%;position:relative;background:#f7f7f7;}
.main-img-box img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:1}
.main-img-box video  {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:2}/* 副图缩略图区域，3张横向排列 */
.thumb-list {display:flex;gap:10px;margin-top:10px;}
.thumb-item {flex:1;cursor:pointer;}
.thumb-box {width:100%;padding-top:100%;position:relative;border:2px solid transparent;}/* 当前选中缩略图边框高亮 */
.thumb-box.active {border-color:#222;}.thumb-box img {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}
.product{width:98%;}
.product_doc{width:100%; MARGIN: 0px auto;  background:rgb(22,42,69);border-radius: 0px 12px 0px 12px; padding:16px 16px 0px 16px;}
.product_doc ul li img{width:15vw;border-radius: 12px 12px 12px 12px;}
.product_doc ul li a{color:#FFFFFF; font-size:14px;}
.product_doc ul li a:hover{color:#FFFFFF; text-decoration:underline;}
.product_doc ul{display: grid;grid-template-columns: 25% 25% 25% 25%;list-style: none;padding:0;margin:0;}/* 4列，规则统一，只写一次 */
.product_doc ul li{padding: 8px 10px;overflow-wrap: break-word;text-align:center;}
.carousel-container {position: relative; width: 100%; padding-top: 100%; MARGIN: 0px auto; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);}
.carousel-slides {position: absolute;top: 0;left: 0;width: 100%;height: 100%; text-align:center;}
.slide {position: absolute;width: 100%; opacity: 0; display:none; transition: opacity 0.5s ease-in-out;}
.slide.active {opacity: 1; display:block;}
.slide img {width:100%; object-fit: cover; display: block;}
.caption { position: absolute; bottom: 0;left: 0; width: 100%; padding:5px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: var(--text-color); font-size: 1.2rem; color:#FFFFFF; font-size:13px;}
.caption a{color:#FFFFFF;}
.carousel-control {  position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(22, 42, 69, 0.3);color: white;border: none;border-radius: 50%;width: 40px;height: 40px;font-size: 1.2rem;cursor: pointer;transition: all 0.3s ease;z-index: 10;}
.carousel-control:hover {background-color: rgba(22, 42, 69, 0.7);color: var(--primary-color);}
.carousel-control.prev {left: 20px;}
.carousel-control.next {right: 20px; }
.indicators {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 8px; }
.indicators span {display: block;width: 12px;height: 12px;border-radius: 50%;background-color: rgba(22, 42, 69, 0.5);cursor: pointer;transition: all 0.3s ease;}
.indicators span.active {display: block;width: 12px;height: 12px;border-radius: 50%;background-color: rgba(22, 42, 69, 0.7);cursor: pointer;transition: all 0.3s ease;}



.carousel-container1{position: relative; width: 90%; padding-top: 90%; MARGIN: 0px auto; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);}
.carousel-slides1{position: absolute;top: 0;left: 0;width: 100%;height: 100%; text-align:center;}
.slide1 {position: absolute;width: 100%; opacity: 0; display:none; transition: opacity 0.5s ease-in-out;}
.slide1.active1 {opacity: 1; display:block;}
.slide1 img {width:100%; object-fit: cover; display: block;}
.caption1{ position: absolute; bottom: 0;left: 0; width: 100%; padding:5px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: var(--text-color); font-size: 1.2rem; color:#FFFFFF; font-size:13px;}
.caption1 a{color:#FFFFFF;}
.carousel-control1 { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(22, 42, 69, 0.3);color: white;border: none;border-radius: 50%;width: 40px;height: 40px;font-size: 1.2rem;cursor: pointer;transition: all 0.3s ease;z-index: 10;}
.carousel-control1:hover {background-color: rgba(22, 42, 69, 0.7);color: var(--primary-color);}
.carousel-control1.prev1 {left: 20px;}
.carousel-control1.next1{right: 20px;}
.indicators1 {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;gap: 8px;}
.indicators1 span {display: block;width: 12px;height: 12px;border-radius: 50%;background-color: rgba(22, 42, 69, 0.5);cursor: pointer;transition: all 0.3s ease;}
.indicators1 span.active1 {display: block;width: 12px;height: 12px;border-radius: 50%;background-color: rgba(22, 42, 69, 0.7);cursor: pointer;transition: all 0.3s ease;}
