/* CSS Document */



html{border-right-width:0px; width:100%;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,textarea,input,botton,form{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}
fieldset,img{border-width:0px;}
input, button, textarea, select {font-family: inherit;font-size: inherit;font-weight: inherit;}
ul,ol,dl,dd,dt,form{list-style:none;}
li {list-style:none outside none;}
h1, h2,h4, h5, h6 {font-weight:normal;}
h3{font-weight:bold;font-size:14px;}
h1{font-size:16px}
h5,h6{font-size:12px}
.clear{clear:both; }
table{font-size:inherit;align:center;}
body{line-height:1.5em; color:#000; background-attachment:fixed; font-family:Cambria, Georgia, serif; padding:8px 8px 8px 8px;}
a{text-decoration:none; color:#162a45;}
a:hover{color:#FF3300; text-decoration:underline;}
html{background:#FFFFFF;}
body div{text-align:left; width:95%; max-width:2048px; padding:8px 0px 8px 0px;}
#top{height:85px; background:url(/Images/logo.gif) no-repeat left; }
#top img{height:60px; float:left; display:none;}
#top .company{ padding-top:12px; font-size:18px; text-align:right; width:99%; color:#162a45;font-weight:bold;}
#top .menu{padding-top:12px; text-align:right; width:99%; font-size:medium;}
#top_img{text-align:left; max-width:2048px;}
#top_img div{float:left; position:absolute; width:60%; text-align:center; color:#FFFFFF; font-size:13px; font-weight:bold; margin-left:25%; margin-top:14px;}




#Language{ text-align:right; position:absolute; margin-top:-14px;}
#imageSelect {
text-align:right;
font-size:12px;
width: 120px; /* 定义宽度 */
height: 20px; /* 定义高度 */
appearance: none; /* 移除默认的下拉箭头，仅限Webkit浏览器 */
-moz-appearance: none; /* 移除默认的下拉箭头，针对Firefox浏览器 */
-webkit-appearance: none; /* 移除默认的下拉箭头，针对Webkit浏览器 */
background-color: #fff; /* 背景颜色 */
border: 0px solid #ddd; /* 边框样式 */
border-radius: 0px; /* 边框圆角 */
font-family: Arial, sans-serif; /* 字体 */
padding-right: 0px; /* 右侧内边距，给自定义下拉箭头留位置 */
}

/* 自定义下拉箭头 */
#imageSelect:after {
content: 'ccione';
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 0px solid #999;
}



















#product{padding:0px;}
#product .product_title{color:#162a45; font-weight:bold; font-size:22px; text-align:center; line-height:26px; width:100%;}










#market{ 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 .title_2{color:#162a45; font-weight:bold; font-size:36px; padding-top:40px; padding-bottom:20px;}
#Features .doc_2{width:100%; line-height:40px;}


#Features .doc_2 .left div{font-size:26px; line-height:60px;}
#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:24px; line-height:40px;}
#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;}


#about{background:#162a45; padding:8px 0px 8px 0px;border-radius: 12px 12px 0px 0px;}
#about .about_title{text-align:center; font-size:22px; 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{text-align:center; background:#162a45; color:#FFFFFF; clear:both;border-radius: 0px 0px 12px 12px;}

#FilmType{padding:8px 0px 8px 0px;}
#FilmType ul{padding-left:14px; padding-right:14px;}
#FilmType ul .Film_title{ font-weight:bold; text-align:center;}
#FilmType ul .Film_doc{text-align:center;}
#FilmType ul .Film_b{font-weight:bold; background:#162a45; color:#FFFFFF;}
#FilmType ul .Film_1{ text-align:center; float:left; border-bottom:#999999 1px solid; border-right:#999999 1px solid; border-left:#999999 1px solid; font-weight:bold;}
#FilmType ul .Film_2{  text-align:center; float:left; border-bottom:#999999 1px solid; border-right:#999999 1px solid;}
#FilmType ul .Film_3{text-align:center; float:left;border-bottom:#999999 1px solid; border-right:#999999 1px solid;}
#FilmType ul .Film_4{  text-align:center; float:left;border-bottom:#999999 1px solid; border-right:#999999 1px solid;}



#content .here{text-align:right; color:#162a45; width:auto;}
#content .content_left{float:left; width:20%; line-height:35px;}
#content .content_left .sort_1{font-weight:bold;}
#content .content_left .sort_1 a{font-size:24px;}
#content .content_left .sort_2{padding-left:16px; background:url(/Images/sort.png) no-repeat left; margin-left:12px;}
#content .content_right{float:right; width:80%;}
#content .content_right .content_title{text-align:center; font-size:36px; font-weight:bold; line-height:44px;}
#content .content_right .content_content{ line-height:28px; font-size:20px; padding-top:14px;}

#content_img{text-align:center;}
#content_img img{width:auto; height:40vh;}




/* Custom, iPhone Retina */  
@media only screen and (min-width:320px) {



#FilmType ul{line-height:14px;}
#FilmType ul .Film_title{font-size:13px;}
#FilmType ul li{font-size:10px;} 
#FilmType ul .Film_1{ width:17%; height:30px;}
#FilmType ul .Film_2{ width:22%; height:30px;}
#FilmType ul .Film_3{ width:26%; height:30px;}
#FilmType ul .Film_4{ width:32%; height:30px;}
#FilmType ul .Film_b{height:20px; line-height:20px;}

#top{height:60px; background:none;}
#top img{height:60px; float:left;  display:block;}
#top .menu{font-size:13px;}

body{font-size:12px;line-height:1.2em; }
#about ul li{width:100%;}
#about ul .lino{display:none;}
#bottom {font-size:13px; line-height:20px;} 
#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;}




.product_doc{display:none;}



.carousel-container {position: relative;width: 100%; max-width: 2048px; margin: 2rem auto;border-radius: 12px;overflow: hidden;box-shadow: var(--shadow);  padding:0px 0px 0px 0px; margin-top:4px;}
.carousel-slides {position: relative;width: 100%;height: 300px;padding-top:0px}
.slide {position: absolute;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease-in-out;padding-top:0px}
.slide.active {opacity: 1; }
.slide img {width: 100%;height: 100%;object-fit: cover;display: block;}
.caption { position: absolute; bottom: 0;left: 0; width: 100%; padding: 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: var(--text-color); font-size: 1.2rem;   text-align: center; margin-bottom:8px;  color:#FFFFFF;}
.carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 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(255, 255, 255, 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(255, 255, 255, 0.5);cursor: pointer;transition: all 0.3s ease;}
.indicators span.active {background-color: var(--primary-color);transform: scale(1.2);}







.carousel-container1  {position: relative;width: 100%; max-width: 2048px; margin: 2rem auto;border-radius: 12px;overflow: hidden;box-shadow: var(--shadow); padding:0px 0px 0px 0px; margin-top:4px;}
.carousel-slide1s1 {position: relative;width: 100%;height: 300px;padding-top:0px; }
.slide1 {position: absolute;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease-in-out;padding-top:0px;}
.slide1.active1  {opacity: 1; }
.slide1 img {width: 100%;height: 100%;object-fit: cover;display: block;}
.caption1{ position: absolute; bottom: 0;left: 0; width: 100%; padding: 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: var(--text-color); font-size: 1.2rem;   text-align: center; margin-bottom:8px; color:#FFFFFF;}

.carousel-control1 { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 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(255, 255, 255, 0.7);color: var(--primary-color);}
.carousel-control1.prev1 {left: 20px;}
.carousel-control1.next1{right: 20px;}
.indicators1 {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 8px;}
.indicators1 span  {display: block;width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);cursor: pointer;transition: all 0.3s ease;}
.indicators1 span.active1  {display: block;width: 12px;height: 12px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);cursor: pointer;transition: all 0.3s ease;}







}  
  
/* Extra Small Devices, Phones */  
@media only screen and (min-width:480px) {  
  }
/* Small Devices, Tablets */  
@media only screen and (min-width:768px) { } 
  
/* Medium Devices, Desktops */  
@media only screen and (min-width:992px) {



#FilmType ul{padding-left:8px; padding-right:8px; line-height:35px;}
#FilmType ul .Film_title{font-size:20px;}
#FilmType ul li{font-size:16px;}
#FilmType ul .Film_1{ width:15%; height:auto;}
#FilmType ul .Film_2{ width:15%; height:auto;}
#FilmType ul .Film_3{ width:34%; height:auto;}
#FilmType ul .Film_4{ width:35%; height:auto;}
#FilmType ul .Film_b{height:30px; line-height:30px;}






body{font-size:16px;line-height:1.2em; }
#bottom {font-size:16px;} 
#top .company{font-size:2.2vw;}
#top_img div{font-size:2.5vw; padding-top:50px; width:50%; margin-left:25%; line-height:80px;}
#top .menu{ font-size:18px;}




#imageSelect {
font-size:14px;
}




.carousel-container{display:none;}
.carousel-container1{display:none;}
.product_doc{display:block; width:100%;}
.product_doc ul{padding:0px 14px 0px 14px;}
.product_doc ul li{float:left; width:25%; text-align:center; overflow:hidden;}
.product_doc ul li img{ height:30vh; max-width:90%; }
.product_doc ul li div{text-align:center; font-size:20px;}


#Features .title_2{font-size:36px;}



#about ul li{ width:25%; text-align:center; float:left;}
#about ul .lino{display:block;}
#about ul li input{width:98%; background:#d7d0c0; border:0px;}
#about .clear{width:100%;}
#about .clear .submit{width:20%;}
#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 (max-width: 768px) {
    .carousel-container {
        width: 100%;
    }
    
    .carousel-slides {
        height: 50vh;
    }
    
    .caption {
        font-size: 1rem;
        padding: 0.8rem;
    }
}
 
 
 @media (max-width: 768px) {
    .carousel-container1 {
        width: 100%;
    }
    
    .carousel-slide1s1 {
        height: 300px;
    }
    
    .caption1 {
        font-size: 1rem;
        padding: 0.8rem;
    }
}