.main-area.top { background-color: transparent; }
.main-about{ position: relative; margin:0px;   }
@media (max-width:767.98px) {
.main-about{ padding: 30px 0px; }    
}
.about-title { font-size: 52px; font-weight: 500; line-height: 1.375rem; letter-spacing: normal;  width: 100%;  height: auto; word-break: normal; word-wrap: break-word;  margin-bottom: 25px; position: relative; color: #000;}
@media (max-width:767.98px) {
.about-title { font-size: 30px; line-height: 1.375rem;padding: 0px 20px; margin-bottom: 10px;  }
}
.about-title-text { position: relative;}
.about-title-text:last-child:before { width: 10px; height: 10px; content: ""; position: absolute; bottom: 18px; right: -15px; display: block; background-color: #e60013; border-radius: 50%;  -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.about-title-text.zh { font-size: 32px; font-weight: 500; line-height: 1.5rem; letter-spacing: 1px; position: relative;}
@media (max-width:767.98px) {
.about-title-text.zh { font-size: 16px;  }
 }

.video { width:100%;margin: 0px auto; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center;  position: relative; transition: all 0.3s linear 0s; overflow: hidden;  }
.video figure{ position: relative; width:100%;  height: auto;  overflow: hidden;object-fit: contain;background-color:#070630;   transition: all 0.5s ease 0s; }
.video figure img { max-width: 100%; height: auto; transition: all .35s ease;  }
.video:hover figure{  transform: scale(1.05)}
.video-title { width: 100%; max-height: 56.7px; margin: auto; padding:10px 0px; color:#565656; font-size:1rem; line-height: 1.375rem;  font-weight:400; overflow: hidden; word-break:normal;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.video .btn-play {   margin: auto; z-index:99; }  
@media (max-width: 768px) {
.video { width:100%; padding:0px; }   
.video li{ width: calc(100%/2 - 50px); margin: 50px 25px;  }
}
@media (max-width: 767.98px) {
.video { width: 100%; margin: 30px auto;}
.fancybox-slide--iframe .fancybox-content { padding: 0px;  width: 100%!important; height: 80%; max-width: calc(100% - 10px); max-height: calc(100% - 100px);}
}


.main-about{ position: relative; margin:0px; padding:0px;  }
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.about-wrap{ display: flex;flex-wrap: wrap; overflow: hidden}
.block {width:50%; height: auto;margin: 0; padding:0px;    }
@media (max-width:992px) {
.block {width:100%;margin: 0px; padding: 0px; }  
}

.block-pic {width:50%; height: auto;margin: 0; padding:0px; background-size: cover; object-fit: cover; position: relative;  }
.block-box{ width: 50%; margin:auto;  }
.block-txt{width:80%; margin: auto 0px; padding:150px 20px; word-wrap: normal; position: relative;z-index: 1;   }
.block-txt p { font-size:1rem;  line-height:1.5rem; font-weight: 400;  padding:5px; margin-bottom: 10px;  }
.block-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #fff; }
.post-btn{ margin-top:30px; }
@media (max-width: 1280px) {
.block-txt{width:100%; }
}
@media (max-width: 1160px) {
.block-txt{ margin:0 auto auto auto;  }
}
@media (max-width: 1024px) {
.block-txt p { line-height: 1.375rem; padding:0px; margin-bottom: 10px;  }	 
}
@media (max-width:840px) {
.block-txt{ padding: 50px 30px;}   
}
@media (max-width:767.98px) {
.block-box{ width: 100%; margin:auto;  }
.block-txt{ margin:230px 0px 20px 0px; padding:20px;}   
}
@media (max-width:320px) {
.block-txt{ margin:280px 0px 20px 0px; padding:20px;}   
.block-txt p { font-size:.9rem;  line-height:1.375rem;   }
}
/* ==== 底圖 === */
.bg-background { width: 100%; background-image: attr(src url); background-repeat: no-repeat; background-size:auto 100% ;background-position:left bottom; position: absolute;z-index: 0; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;   }
@media (max-width:767.98px) {
.bg-background {  background-size:auto 40% ; background-position:left top;   }	 
}
 
.block-video{ display: flex; flex-wrap: wrap; justify-content: center; padding:0px; position: relative; z-index: 9; }
.block-video iframe{ max-width: 80%;  margin: 0px auto;}      
@media (max-width:768px){
.block-video iframe{ max-width:100%; }      
}
@media (max-width:767.98px){
.block-video{ padding:30px 0px; background-color: #070630 }
}
   
.bg-about-2{padding:40px 0px;  background: url("../images/index/bg-1.jpg") no-repeat right bottom #fff }
.bg-about-2::before { content: ""; position: absolute; width: 100%; height: 517px; bottom:0px; left: 0;background: url("../images/index/banner-mask.png") no-repeat left bottom;background-size: 100% auto;}
.bg-white{ padding:60px 0px;  background-color: #fff}
.bg-white figure{margin:8% auto; border-radius:30px; overflow: hidden; box-shadow: 0px 5px 15px rgba(0,0,0,.1) }
@media (max-width:767.98px) {
.bg-about-2{padding:0px 0px 40px 0px;  background-color: #fff;background-size: 100% auto}
.bg-about-2 .block-txt{ margin: 20px 0px; padding:20px 0px;}   
}
 
 
/*--橫式樣式--*/
.map-item .inner{  width: 100%;  padding:0px 10px; position: relative;border-radius:15px; background-color:#0e4991;  } 
.map-item .inner h3{ width: 100%;margin:10px 0px; font-weight:700; font-size: 1.275rem;  color:#fff; line-height:2rem; }
 
 /*distributor*/
.distributor-info { padding: 80px 0px;background-color: #fff; }
.distributor-main { padding: 40px 5% 60px 5%; }
.distributor_all { display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; width: 100%; max-width: 1100px; margin: 0 auto; padding: 20px 0 0px 0;position: relative}
.image_worldmap { width: 65%;}
.distributor_rightblock { width: 35%; padding-left: 30px;}
.image_worldmap img { max-width: 100%; height: auto;  height: auto;vertical-align: top;  filter: blur(0px);  -webkit-backface-visibility: hidden;  backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);}
#mapd area { cursor: pointer;}
#list_02,#list_03,#list_04,#list_05 { display: none;}
.distributor_flag {  display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding-top: 10px;}
.distributor_flag > div {  display: flex; flex-direction: column; margin-right: 14px; line-height: 110%;  margin-bottom: 12px; width:auto;  color: #000;  font-size: 12px; letter-spacing: 0; text-align: center;}
.distributor_flag img { width: 45px; height: 25px; border: 1px solid #CCC; display: block; margin-bottom: 5px;}
.distributor_flag p {  font-size: 12px; letter-spacing: 0; margin: 0; padding: 0; }
.distributor_list h2 {border-radius: 20px 0 20px 0; background:#063f68; padding: 8px 10px; text-align: center; color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 15px;} 
.map-item {position: absolute; width:140px; height: auto; left: 0px; bottom: 0px;}
@media only screen and (max-width:  1279px) {
.image_worldmap { width: 100%; }
.distributor_rightblock { width: 100%; padding-left: 0px; }
.map-item { left: 0px; top: 250px;}
}
@media only screen and (max-width: 768px) {
.distributor-info { padding: 80px 30px; }
.map-item { left: 0px; top: 180px;}
.distributor-main { padding: 40px 20px 60px 20px; }
}

@media only screen and (max-width: 678px) {
.map-item { left: 0px; top: 140px;}
}
@media only screen and (max-width:440px) {
.map-item {display: none}
}