/**----------------
about 
--------------------*/
.bg-first{background:url("../images/index/ab-4.png")  repeat-x right bottom; background-size:auto 50%  ; background-attachment: fixed; }
@media (max-width: 767.98px) {
.bg-first{background-position:left top; background-size: auto 300px;   }
}
/* ==== 底圖 === */
.bg-background { background-image: attr(src url); background-repeat: no-repeat; background-size:auto 80%;background-position:left bottom;  background-attachment:fixed; position: absolute;z-index: 0;  width:30%; height: 100%; top: 0px;  bottom: 0; left: 0; line-height: 0; transition: 0.8s 1s; }
.bg-right-background { background-image: attr(src url); background-repeat: no-repeat; background-size:15% auto ;background-position:right 30%;  background-attachment:fixed; position: absolute;z-index: 0;  width:30%; height: 80%; top: 0px;   right: 0; line-height: 0; transition: 0.8s 1s; }
@media (max-width:992px) {
.bg-background {  background-size:auto 20%; background-attachment:scroll; }	
.bg-right-background {  background-size:60% auto ;background-position:right 50%; background-attachment:scroll;  }
}

.bg-end-background { background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto ;background-position:left bottom;  background-attachment: scroll; position: absolute;z-index:0;  width: 100%;  height: 100%; top: 0px; right: 0; bottom: 0; left: 0; transition: 0.8s 1s; }

/*common----*/

/* about
=================================*/
.about{position: relative; z-index: 0; padding:50px 0px 100px 0px; margin: 0;    }
.about p { width: 100%;  padding:5px; margin-bottom: 15px;  font-size: 1.05rem;  font-size: min(max(3vw, .9rem), 1.05rem); line-height:2.25rem; color:#404040; font-weight: 400;  }
.about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.block {width:50%; height: auto;  margin: 0; padding:0px;  }
.block figure{ width:100%; margin: 0px; padding: 0px; display: block; }
.block figure img{ width:100%; height: auto; display: block;  }
.block-txt{width:100%; max-width:70%;  margin:60px auto; padding:0px 20px ; }
.block p strong{  display: block;  width: 100%;  letter-spacing: 1.2px; font-weight:700;   margin-bottom: 0px; color: #000; }
.card-1{ width: 80%;  padding:10% 0px 0px 0px;   position: relative;}
.card-1 img{display: block; width: 100%; height: auto;}
.main-txt{width: 100%;  margin:0; padding: 0px;  }
@media (max-width: 1280px) {
.block-txt{max-width:100%; padding:20px 40px;  }
}
@media (max-width: 1114px) {
.block-txt{ padding:0px 0px 0px 30px;  }	
}
@media (max-width: 1024px) {
.about{ padding:0px 0px 100px 0px;}	
.block {width:100%;margin: 0px; padding: 0px; }  
.block-box{ width: 100%;}         
}
@media (max-width:992px) {
.block-txt{ padding: 0px 30px;  }		
}

@media (max-width:767.98px) {
.about{  padding:50px 0px; margin: 0;    }
.block-txt{ margin:20px 0px; padding: 0px 20px;}   
}
@media (max-width:320px) {
.about{  padding:0px 0px 50px 0px;}
.bg-first .block .block-txt{ padding: 0px 20px; }  	
.block-txt{  padding: 0px;}   	
}


.facility-item { width:60%; margin: auto;padding:50px 0px 30px 0px; position: relative;z-index: 1; }
@media (max-width: 1280px) {
.facility-item { width: 80%;  padding:50px 30px 30px 130px;  }  
}
@media (max-width: 1024px) {
.facility-item { width: 90%; padding-left: 0px; }
}

@media (max-width: 992px) {
.facility-item .title h3{  text-align: center  }
}

@media (max-width: 767.98px) {
.facility-item { width: 100%; padding: 30px 0px;}
} 

.about-item { width:60%; margin: auto;padding:50px 0px 250px 0px; position: relative;z-index: 1; }
.about-pic{ width: 50%; margin-top: 0px; margin-bottom: 100px; padding: 0px; position: relative;  }
.about-pic-1{width:70%; margin:40% 0px 0px 45%; padding:0px;position: absolute; z-index:1;   animation:zoomIn 10s linear infinite alternate-reverse; }
.about-pic-2{width:80%; margin:1% 0px 0px 0px;  padding:0px;position: absolute; z-index:2; animation:zoomIn 10s linear infinite alternate;}
.about-pic img{position: relative; z-index: 1; transform-origin: 50% 100%; transform: translateZ(-5rem); }
@media (max-width: 1114px) {
.about-item { width:100%; padding:50px 0px;}		
}
@media (max-width: 1024px) {
.about-item { margin-top: 50px;padding:50px 20px; clear: both}			
.about-pic{width:80%; margin: auto;}
.about-pic-1{width:60%; margin:0px 0px 0px 45%;position: relative; }	
.about-pic-2{width:60%;top:0px;}
}
@media (max-width: 840px) {
.about-pic{ margin:-10% auto auto auto;}	
.about-item { margin: auto;padding:50px 30px 50px 30px; }
}
@media (max-width: 767.98px) {
.about-item { width:100%; margin: auto;padding:0px 20px;  }
}
@media (max-width:320px) {
.about-pic{width: 100%;}		
}
.about-team-container {display: -webkit-box; display: -ms-flexbox;display: flex;  -ms-flex-wrap: wrap; flex-wrap: wrap; padding:50px;}
.about-team-container >.about-team-column:nth-child(odd) { width: calc(36.66667% - 11.66667px); max-width:calc(36.66667% - 11.66667px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(36.66667% - 11.66667px);; flex: 0 0 calc(36.66667% - 11.66667px);padding-right: 20px;}
.about-team-container >.about-team-column:nth-child(2n) {  width: calc(63.33333% - 8.33333px); max-width: calc(63.33333% - 8.33333px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(63.33333% - 8.33333px); flex: 0 0 calc(63.33333% - 8.33333px);margin-left: 20px; padding-right: 50px;}
.about-team-main-row { position: relative; margin-bottom: 63px;  }
.about-team-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;}  
.about-team-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:#9d0015;}
.about-team-main-name:before { width: 10px; height:10px; content: "";  position: absolute; left:0px; top:10px; margin-right: 8px;  margin-bottom: 4px; background-color:#9d0015; border-radius: 3px; transform: rotate(45deg);}
.about-team-image{position: relative;}
.about-team-main-row:before {content: ""; display: block; top: 0px;left:4px; width: 1px;height: calc(100% + 80px);  background-color:#9d0015;  position: absolute; transition: all 1.05s 0.85s ease-in-out;  pointer-events: none;}
@media (max-width:840px) {
.about-team-container{padding: 0px 40px;}
.about-team-container .wrapper{padding: 0px;}    
.about-team-main-name {font-size: 120%;}   
}

@media (max-width:768px) {
.about-team-container {padding:0px;}   
.about-team-container .wrapper{padding: 0px 30px;}   
.about-team-container >.about-team-column:nth-child(odd),.about-team-container >.about-team-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:0px 20px; }
.about-team-main{padding: 0px 50px;}   
}
@media (max-width:767.98px) {
.about-team-main-name { font-size: 125%; }   
}
@media (max-width:320px) {
.about-team-main-name { font-size: 100%; }   
.about-team-container .wrapper{padding: 0px 20px;}   
.about-team-container >.about-team-column:nth-child(odd),.about-team-container >.about-team-column:nth-child(2n) {padding: 20px 10px; }
.about-team-main{padding: 0px 20px;}   
.about-team-main-summary {  font-size: 0.9rem;  }  	
}

.title-v { width: 100%; padding: 50px 0; position: relative; z-index: 10;  writing-mode: tb-rl; font-family: "Noto Serif TC", serif; letter-spacing: 2.5px;  font-weight: 500;  color: #080808; line-height: 2; flex-direction: column; display: flex; justify-content: center;}
.title-v h2{margin-left: 30px; color:#c30d24; font-size:3rem; font-weight: 500; letter-spacing:20px; line-height: 1.5; position: relative; border-right: solid 1px #c30d24;border-left: solid 1px #c30d24}
.title-v h2::before{content: ""; width: 1px; height: 100%; position: absolute; right: -10px; top:0px; background-color: #c30d24}
.title-v h2::after{content: ""; width: 1px; height: 100%; position: absolute; left: -10px; top:0px; background-color: #c30d24}
.title-v h3{margin-left:10px; color:#000; font-size:2rem; font-weight: 700; letter-spacing:8px; line-height: 1.5; position: relative;  }
.title-v p{  color:#666; font-size:1.5rem; font-weight: 500; letter-spacing:2px; line-height: 1.5; position: relative;}

@media (max-width:768px) {
.title-v { width: auto;   padding: 50px ; writing-mode: lr-tb;}	
.title-v h2{  color:#c30d24; font-size:2rem; font-weight: 500; border-right:none; border-left:none; letter-spacing:2px; }	
.title-v h2::before,.title-v h2::after{ display: none}	
}
@media (max-width:320px) {
.title-v { padding: 20px; }		
.title-v h2{margin-left: 0px;	}
}