.main-content{ margin-top: -20px;}
.main-area p{color: #666; font-size: 1.15rem;line-height: 150%; margin-bottom: 15px;}
.block p,.block-txt p ,.box p ,.box-wrap p{ width: 100%; font-size:1rem; font-size: clamp(0.875rem, 2.3vw, 1rem); line-height:1.75rem; font-weight: 500;  padding: 0px; margin-bottom: 5px;  color:#404040; }
.block p strong{  display: block;  width: 100%; font-size: 1.313rem; font-size: clamp(1rem, 2.3vw,  1.313rem);line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #404040; }
.block-txt p strong{  display: block;  width: 100%; font-size: 1.5rem; font-size: clamp(1.15rem, 2.3vw,1.5rem); line-height: 2rem; letter-spacing: 1.2px; font-weight:700;  padding:5px; margin-bottom: 10px; color: #eb9924;  }
/*about us----*/
.main-wrap{ width: 100%; padding-right: 10px; padding-left: 10px; max-width: calc((100% - 40px)/12*12 + 40px); margin: auto; height: auto;  display: flex; flex-wrap: wrap; align-content: flex-start;    }
@media (min-width:1200px) {
.main-wrap{  padding-right:0px; padding-left: 0px;max-width: 100%; }
}
@media (max-width: 1024px) {
.main-wrap{padding: 0px;}       
}
.block {width:54%; height: auto;margin: auto; padding:15px;  display: flex; flex-wrap: wrap; align-items: center; position: relative;z-index: 1 }
.block-title{width:auto; margin:0; padding: 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
@media (max-width: 1024px) {
.block {width: 80%; margin: 0px auto; padding:0px 25px; }
.block-pic {width: 100%; margin: 0px auto;  padding: 0px;}  
}
@media (max-width:768px) {
.block {width: 100%; margin: 0px auto; padding:0px; }
}
.block-txt{width:100%; max-width:65%; margin:0 auto; padding:20px 0px; display: flex; flex-wrap: wrap;align-content: center;  position: relative; z-index: 1;}
@media (max-width:840px) {
.block-txt{width:100%; max-width:85%; margin:0 auto; padding:20px 0px; }    
}
@media (max-width:767.98px) {
.block-txt{  max-width:100%;  padding:0px; }    
}
/*-------------------*/
/***** bg *****/
/*------------------*/
.bg-box {background-image:url("../images/index/aboout-bg-1.jpg"),url("../images/index/aboout-bg.jpg"); background-attachment: scroll; background-position:left bottom,right bottom;  background-repeat: no-repeat; background-size: auto 100%, auto 100%;}
@media screen and (max-width: 1440px) {
.bg-box {background-size: auto 100%, auto 80%; background-position:left top,right top; }
}
@media screen and (max-width: 1380px) {
.bg-box {background-size: auto 80%, auto 60%;}
}
@media screen and (max-width: 840px) {
.bg-box { background-image:url("../images/index/aboout-bg-1.jpg"); background-attachment: scroll; background-position:left bottom;  background-size: auto 80%; }
}

.bg-who {background:url("../images/index/who-2.jpg") no-repeat left top #000; background-size:auto 100%;  position: relative;z-index: 0;}
@media screen and (max-width: 1024px) {
.bg-who { background-size:auto 70%;  }
}
@media screen and (max-width:767.98px) {
.bg-who { background-size:  cover; background-position: center bottom;}
}
.box-wrap{ margin: 0px auto; padding:100px 0px; display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index:0; }
.box-right{width: 50%; margin: 0px 0px 0px 5%; padding:20px 0px; display: flex; flex-wrap: wrap;justify-content: flex-end; z-index: 3; }
.box-left{ width:45%;  margin:0px; padding:0px 20px; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;position: relative;z-index: 1; }
.item{width: 80%; position: relative;}
.item-2{width:55%; left:-8%;top:42%; position: absolute;box-shadow: 0px 5px 8px rgba(0,0,0,.3);}
@media screen and (max-width: 1180px) {
.box-left{ width:55%;  }
.box-right{ width: 40%; margin-top: 5%; position: relative;}
.item-2{  top:32%; }
}
@media screen and (max-width:840px) {
.box-wrap{ padding:30px 0px 50px 0px; }
.box-left{ width:100%; padding: 0px; }
.box-right{ width:100%; padding: 0px 0px 50px 0px;  }
.box-right .item-2{  top:32%; left:2%; }
.item{width: 60%; }
}
@media screen and (max-width:768px) {
.box-right .item-2{  top:12%; left:-2%; }    
}
.box { width: calc(100%/2 - 20px); min-height: 380px;  margin:10px; padding: 20px; border: solid 1px #fff;  display: flex; flex-wrap: wrap;   align-content: stretch ; }
.box h3{ width: 100%; margin:0px 0px 5px 0px; font-size: 1.313rem; font-weight:600; color: #0070bd; position: relative; }
.box h3:after{ content: ""; width:100%; height: 2px; display: block; margin:10px 0px 0px 0px;  background:#f1f1f1;}
.box ul{margin: 30px 0px;}
.box ul li{margin: 5px 0px; font-weight: 500; }
@media screen and (max-width: 1024px) {
.box p{  line-height: 1.5rem; }   
}
@media screen and (max-width: 767.98px) {
.box { width: 100%; min-height:auto;    }
 }
 /*----------------------------------------/
  ul style 自訂樣式
----------------------------------------*/
.cms-dot{ width: 100%;  display: block; margin:0px;padding: 0px; position: relative;}
.cms-dot li{ width: 100%!important;display: block; padding: 2px 0px 2px 15px!important; margin:4px 0px!important; font-size:1rem; line-height:1.75rem; font-weight:500; color: #333; position: relative;  }
.cms-dot li:before{ content: ''; width:6px; height:6px; background-color:#d7820e; border-radius: 99rem; position: absolute; top: 12px; left: 0px;  transition: all 0.5s ease 0s;}