.main-area.top { background-color: transparent;}
.bg-color-1{background-color:#ede8e4 }

.main-about{  margin:0px; padding:8vw 0px 2vw 0; }
.article .editor { max-width: 80%; color: #4a4a4a; line-height: 1.6; letter-spacing: 1px; position: relative;z-index: 1;}
.article >.main-wrap img {  display: block; max-width: 100%}
.article .left-box { width: 28.5%; position: relative}

@media (max-width:840px) {
.article .editor { max-width: 100%; }
.article .left-box { width: 32%; position: relative}
}
@media (max-width: 767.98px) {
.article .left-box { width: 100%; min-height: 77vh; }
.article .left-box.m-no-show{display: none;}
}

.article .right-box { padding-left: 100px;  width: 71.5%;  -webkit-box-sizing: border-box; box-sizing: border-box}
@media (max-width: 1180px) {
.article .right-box { padding-left:30px }
}
@media (max-width: 840px) {
.article .right-box {  width: 68%;padding-left:0px }
}
@media (max-width: 767.98px) {
.article .right-box { padding-left:0; width: 100% }
}
/*pic style*/
.article .pic-box { position: relative; margin-top: 70px; padding-left: 35px; display: flex}
@media (max-width: 1180px) {
.article .pic-box {  margin-top:0px;  padding-left:0 }
}
@media (max-width: 662px) {
.article .pic-box { margin:0px auto}
}
.article .pic-box:before { content: ""; position: absolute; top: 0; left: 185px; width: 450px; height: 325px; background-color:#f7f6f6;}
@media (max-width: 1024px) {
.article .pic-box:before { top: 20px; left: 120px; height: 275px;  }
	
}
@media (max-width: 960px) {
.article .picBox:before { left:auto; right: 40px  }
}

@media (max-width: 840px) {
.article .pic-box:before { top: 40px;  width: 250px; height: 175px; }
}
@media (max-width: 662px) {
.article .pic-box:before { height: 156px; }
}
@media (max-width: 420px) {
.article .pic-box:before { height: 140px; }
}


.article .pic-first {  position: relative; }
.article .pic-first img { position: relative;  z-index: 2}
.article .pic-first:before { content: ""; position: absolute; z-index: 0; bottom: -60px; left: -30px; width: 95%; height: 50%; background-color: #fcf8f9;}
 
@media (max-width: 767.98px) {
.article .pic-first { display: none; }
	
}
.article .pic-01 { width:90%; height: auto;margin-left: 5%; margin-top: 20%; position: relative}
.article .pic-01 img { position: relative;  z-index: 2}
.article .pic-01:before { content: ""; position: absolute; top: 20%; left: -80px; width: 350px; height: 400px; background-color:#f7f6f6; opacity: 0.75;}

@media (max-width: 1024px) {
.article .pic-01 { width:70%; height: auto;margin-left: 40%;position: relative}
.article .pic-01:before {  height: 350px; }
	
}
@media (max-width: 840px) {
.article .pic-01:before { left:auto;right:-40%; top:30%; height: 300px;  }
.article .pic-01 { width:100%; margin-left:auto; margin-right: auto }
}


@media (max-width: 768px) {
.article .pic-01:before { display: none }
}

.article .pic-04 {width: 80%; height: auto; position: absolute; left:-20%; top:25%;}
.article .pic-04 img { position: relative; margin-left: auto; z-index: 1}
@media (max-width: 1280px) {
.article .pic-04 {  top:30%;}
}
@media (max-width: 840px) {
.article .pic-04 { left:0;right:auto; top:22%;  }
}
@media (max-width: 767.98px) {
.article .pic-04 { left:-10%; top:32%;  }
}
.article .pic-02 { position: relative; margin-top: 150px}
@media (max-width: 1180px) {
.article .pic-02 { margin-top:80px }
}

.article .pic-03 { position: relative; margin-top: 25px;  margin-left: 105px; margin-right: -55px}
@media (max-width: 1530px) {
.article .pic-03 { margin-right:0 }
}

@media (max-width: 1180px) {
.article .pic-03 { margin-left:30px}
}

@media (max-width: 480px) {
.article .pic-03 { margin-left:10px  }
}


.inner-box {  margin: auto; padding:0px;   }
.inner-box h3 { margin-bottom: 30px; font-size:clamp(1rem, 2.3vw, 1.75rem); font-weight:600; color: #000  }
.inner-txt{ margin: auto 0px 20px 20px;}
@media (max-width:767.98px) {
.inner-txt{ margin: auto;}	
}
.inner-txt p{font-size:clamp(.9rem, 2.3vw, 1rem); line-height: 1.7rem;  margin-bottom: 15px; font-family: "Noto Sans TC", sans-serif;}  

.main-name { margin-bottom: 10px; font-size:clamp(1rem, 2.3vw, 1.375rem); font-weight:600; line-height: 1.5; letter-spacing: normal; color:#684914;}
.main-name:before { width: 1px; height:20px; content: ""; display: inline-block;  margin-right: 8px;  margin-top: 4px; background-color:#684914; }
.main-summary { margin-left: 10px; }  
.main-summary p{  font-size:clamp(.9rem, 2.3vw, 1rem);line-height: 1.7rem; font-weight: 600; color: #54703e;}  

 
.item-main{ margin: auto; }
.item-container { padding:50px; margin: auto; display: -webkit-box; display: -ms-flexbox;  display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; }
.item-container >.item-column {  width: 30%;   }
.item-container >.item-column:nth-child(2) {  width: calc(70% - 20px);  margin-left: 20px;}

.item-main-row { position: relative; margin-bottom: 63px;  }
.item-main-summary { padding-left: 20px;  font-size: 1.125rem; font-size: clamp(1rem, 2.3vw, 1.125rem);font-weight: 400;  line-height:1.75rem;  line-height: 1.875rem;  letter-spacing: 1px;margin-top: 11px;}  
.item-main-summary p{font-size:clamp(.9rem, 2.3vw, 1rem);line-height: 1.7rem; font-weight: 400; font-family: "Noto Sans TC", sans-serif; }


.item-main-name { margin-bottom: 20px;padding-left: 20px; font-size: clamp(1rem, 2.3vw, 1.5rem);font-weight: 400;  line-height:1.75rem; letter-spacing: 2px; color:#684918;}
.item-main-name:before { width: 10px; height:10px; content: "";  position: absolute; left:0px; top:10px; margin-right: 8px;  margin-bottom: 4px; background-color:#684918; border-radius: 3px; transform: rotate(45deg);}
.item-image{position: relative;}
.item-main-row:before {content: ""; display: block; top: 0px;left:4px; width: 1px;height: calc(100% + 80px);  background-color:#684918;  position: absolute; transition: all 1.05s 0.85s ease-in-out;  pointer-events: none;}
@media (max-width:840px) {
.item-container{padding: 0px 40px;}
.item-container .wrapper{padding: 0px;}    
.item-main-name {font-size: 120%;}   
}

@media (max-width:768px) {
.item-container {padding: 0px 0px 30px 0px;}   
.item-container .wrapper{padding: 0px 30px;}   
.item-container >.item-column:nth-child(odd),.item-container >.item-column:nth-child(2n) { width: 100%; max-width: 100%; -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; margin-left: 0px;padding:  20px; }
}

@media (max-width:767.98px) {
.item-main-name { font-size: 125%; }   
}

@media (max-width:320px) {
.item-main-name { font-size: 100%; }   
.item-container .wrapper{padding: 0px 20px;}   
.item-container >.item-column:nth-child(odd),.item-container >.item-column:nth-child(2n) {padding: 20px 10px; }
}

 


.w-list{ width: 100%; margin: auto; padding: 0px 20px; list-style:none;font-family: "Noto Sans TC", sans-serif;}
.w-list li{ display: block; padding-left: 20px;  margin-bottom: 10px;font-size: clamp(.9rem, 2.3vw, 1rem);  font-weight:400; line-height: 1.5; letter-spacing: normal; color: #54703e;  position: relative; }
.w-list li:before { width: 10px; height:10px; content: "";  left:0px; top:5px;position: absolute; background-color:#54703e; border-radius: 2px;}

.w-list li p{font-size: clamp(.875rem, 2.3vw, 1.5rem);}
@media (max-width:767.98px) {
.w-list{  padding: 0px; }    
}

 

.icon-list{width: 100%; margin:0px auto; padding:30px 0px; display: flex; flex-wrap: wrap;position: relative; }
.icon-list:after{ content: "";width: 90%; height: 2px; position: absolute;left:5%;top:50%;  background:#215285;  }
.icon-list li{width:calc(100%/4 - 20px); margin:10px; padding: 10px; transition: all 0s ease 0s;position: relative; list-style: none;   border-radius:15px;} 
.icon-list li:after{ content: "";width: 16px; height: 16px;border-radius:50%;  position: absolute;left:-20px;top:calc(50% - 8px);  background:#215285;  }
.icon-list li:first-child:after{ display: none;  }
.icon-list li .item{ width: 100%; margin:0px; padding:0px;  display:flex; flex-wrap: wrap; justify-content: center;align-content: flex-start;  }

.icon-list li .item-txt{width: 100%; padding: 10px;}
.icon-list li .item-pic{width: 100%; padding-bottom:140%; height: 0; overflow: hidden; border-radius:15px;position: relative; z-index: 1; transition: all 0.5s ease 0s;box-shadow: 0px 5px 16px rgba(0, 0, 0, .3);}
.icon-list li:hover .item-pic img{ transform: scale(1.15)} 
.icon-list li .item-txt h3 { font-size:1.375rem; line-height: 2.75rem; font-weight:400;  color:#215285;overflow: hidden; word-break: normal; word-wrap: break-word;   }  
.icon-list li:hover .item-txt h3 { color: #ed6d34}

@media (max-width:920px) { 
.icon-list li{width:calc(100%/2 - 20px);   } 
.icon-list:after,.icon-list li:after{ display: none; }
}
@media (max-width:767.98px) { 
 .icon-list li .item-txt h3 { font-size:1.175rem; line-height: 1.75rem;   }  
   
}
/* About Us ===================================================================== */
.custom {  padding: 85px 0;}
@media (max-width:1160px) {
.custom { transform: scale(.9)}
 }

@media (max-width:920px) {
 .custom {  padding: 40px 0px;}   
}
@media (max-width:767.98px) { 
 .custom {  padding: 0px 20px; transform: scale(1)}   
}

.custom .wrap { max-width: 1240px; margin: auto;  display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-align: center; flex-wrap: wrap;  -ms-flex-align: center; align-items: center;}
.custom .left { width: 39.5%; position: relative;z-index: 1; display: flex; align-items: center; justify-content: center; }
.custom .left:before {width: 473px; height: 473px; background-color: #215284;   animation: growAndFade 3s infinite ease-out; }
.custom .left:after {background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd); width: 403px; height: 403px;opacity: .2;   }
.custom .left:after, .custom .left:before { content: ""; border-radius: 50%; z-index: -1; position: absolute;}
.custom .left .custom-title { text-align: center; position: relative; z-index: 1;}
.custom-title .titleTw { font-size: 30px; line-height: 1.2; letter-spacing: 1.5px; font-weight: 400;}
.custom-title .titleEn { font-weight: 500; font-size: 48px; line-height: 1.05; letter-spacing: 0.48px;}
.custom .left .pic { z-index: 2; position: absolute; top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); overflow: clip; opacity: 1;}
.custom .left .pic img { width: 140px; height: 40px; display: block;  -webkit-backface-visibility: hidden; backface-visibility: hidden;}
@media (max-width:767.98px) {
.custom .left { width:100%; margin:30% auto; transform: scale(.8)}
}

@media (max-width:320px) {
.custom .left {   transform: scale(.5)}
}

.custom .right { width: 60%; margin-left: -36px;}
.custom .right .custom-list .txt {max-width: 70%; text-align: left;}
.custom .right .custom-list .txt h3 { color:#215284; font-weight: 700; font-size: 1.375rem;line-height: 1.2;letter-spacing: 0.2px;text-transform: uppercase;margin-bottom: 0px;}
.custom .right .custom-list .txt .subtitle { padding-top: 5px; color:#ed6d34; text-transform: uppercase; font-size: 0.875rem;  font-weight: 500;line-height: 1.2;  }
.custom .right .custom-list .txt .textEditor {  padding-top: 8px;}
.custom .right .custom-list .txt .textEditor p{ color: #4a4a4a;  font-weight: 400; font-size: 1rem; text-align: left; line-height: 1.375rem; }
.custom .left .custom-title:after { content: ""; position: absolute; width: 340px; height: 340px; z-index: -1; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff;  border-radius: 50%;}

.custom .right .custom-list .item { padding: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; -webkit-column-gap: 36px; -moz-column-gap: 36px; column-gap: 36px; border: 1px solid #215284; border-radius: 84.5px;}

.custom .right .custom-list .Img { border-radius: 50%;  background-color: #215284; height: 141px; min-width: 141px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;justify-content: center; align-items: center;}

.custom .right .custom-list .Img img{  height: 80px; width:80px;  }
.custom .right .custom-list .custom-item { opacity: 1;  position: relative; max-width: 692px; padding: 10px 0;}
.custom .right .custom-list .custom-item:nth-child(2) {  -webkit-transform: translateX(72px); transform: translateX(72px);}


.custom .right .custom-list .link {z-index: 3; position: absolute; left: 0; top: 50%;  display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;}
.custom .right .custom-list .custom-item:nth-child(1) .link { top: 68%; left: -38px; -webkit-transform: rotate(-27.75deg); transform: rotate(-27.75deg);}
.custom .right .custom-list .custom-item:nth-child(2) .link {left: -42px;}
.custom .right .custom-list .custom-item:nth-child(3) .link { top: 31%;  left: -38px;  -webkit-transform: rotate(27.75deg); transform: rotate(27.75deg);}

.custom .right .custom-list .link span { background-color: #215284; display: block;}
.custom .right .custom-list .link span:nth-child(1) {width: 5.85px; height: 5.85px; border-radius: 50%;}
.custom .right .custom-list .link span:nth-child(2) {width: 30px; height: 1px;}
.custom .right .custom-list .link span:nth-child(3) { width: 5.85px; height: 5.85px; border-radius: 50%; position: relative; margin-left: 4px;}

.custom .right .custom-list .link span:nth-child(3) {  width: 5.85px; height: 5.85px; border-radius: 50%; position: relative; margin-left: 4px;}
.custom .right .custom-list .link span:nth-child(3):after{content: "";width: 15px; height: 15px; background-color: #fff; position: absolute;top: -4px; left: -4px;  z-index: -1; border-radius: 50%;}

@media (max-width:767.98px) {
.custom .right { width: 100%; margin-left: auto;}
.custom .right .custom-list .custom-item:nth-child(2) {  -webkit-transform: translateX(0px); transform: translateX(0px);}   
.custom .right .custom-list .item {  flex-direction: column; border: none; padding: 0px;}
.custom .right .custom-list .txt h3 , .custom .right .custom-list .txt .subtitle {text-align: center}
.custom .right .custom-list .txt {max-width: 90%;  } 
 .custom .right .custom-list .link{display: none;} 
 }
 

.card-item{ width: 100%; padding: 80px 0px 0px 0px; display: flex; flex-wrap: wrap; position: relative;}
.card-item li{width: auto; position: relative; list-style: none;}
.card-item li:nth-child(1){width: 25%; -webkit-animation: slide_up_down 2s ease-in-out infinite alternate both;  animation: slide_up_down 2s ease-in-out infinite alternate both;  -webkit-animation-delay: 1s; animation-delay: 1s;}
.card-item li:nth-child(2){width: 45%; -webkit-animation: slide_up_down 3s ease-in-out infinite alternate both;  animation: slide_up_down 3s ease-in-out infinite alternate both;  -webkit-animation-delay: 1s; animation-delay: 1.5s; }
.card-item li:nth-child(3){width: 30%;  }

.card-item li .item .circlebox{ position: relative; padding: 2%;  display: block; overflow: hidden; transition: all 0.5s;}
.card-item li .item .circlebox::before {  content: "";  display: block; position: absolute; top: 50%; left: 50%;  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  width: calc(100% - 2px);  height: 100%; background: url("../images/index/circle2.png") no-repeat center center/100%; z-index: 1; -webkit-animation: rotateCenter 10s linear infinite; animation: rotateCenter 10s linear infinite;}
.card-item li .item .circlebox .item-pic { border-radius: 50%; overflow: hidden; border: 10px solid #f6f8f7; display: -ms-flexbox; display: flex;  -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 2; transition: all 0.5s;}
.card-item li .item .circlebox .item-pic:before { content: ""; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 8px); height: calc(100% + 8px); background: url("../images/index/circle.png") no-repeat center center/100%; transition: all 0.5s; -webkit-animation: rotateCenter2 9s linear infinite; animation: rotateCenter2 9s linear infinite; z-index: 1;}
.card-item li .item .circlebox .item-pic img {  position: relative; width: 100%; border-radius: 50%; overflow: hidden;}