.main-about{ position: relative; margin:0px; padding:0px; background-color: #d8dfe5;}
.main-about .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
 @media (max-width: 767.98px) {
.main-about{ padding:0px;}   
}

.block {width:50%; height: auto;margin: 0; padding: 2vw 6vw;}
@media (max-width:1280px) {
.block { padding: 0px 40px; }  
} 
@media (max-width: 992px) {
.block {width:100%;margin: 0px; padding: 0px 40px; }  
} 
 @media (max-width:767.98px) {
.block { padding: 0px; }  
} 
.block-txt{width:100%; margin: auto; padding:50px 0px ;  display: block; position: relative;z-index: 9;   }
.post-btn{  margin-top:30px;}
 @media (max-width: 1280px) {
.block-txt p { font-size:0.9rem; }
}
@media (max-width:840px) {
.block-txt{ margin:50px 0px; padding: 0px;}   
}
@media (max-width:767.98px) {
.block-txt{  padding: 0px 20px;}   
}
@media (max-width:640px) {
.block-txt p { line-height: 1.5rem;  }
}
@media (max-width:320px) {
.block-txt{  padding: 0px 20px;}  
}
.block-pic {width:50%; height: auto;margin: 0; padding:0px;  position: relative;  }
 @media (max-width: 992px) {
.block-pic {width:100%; height: 420px; order: 2;  }
}
@media (max-width: 320px) {
.block-pic {width:100%; height: 360px; }
}
.card-box{ width: 100%; height: 100%;  } 
.card-2 { width: 100%;  background-image: attr(src url); background-repeat: no-repeat; background-size:  cover; background-position:left bottom;   position: absolute;z-index: 1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0; overflow: hidden  }
 @media (max-width:1024px) {
.card-2{ margin: auto;  }
.card-2 img {  display: block; margin: auto;  }
}
 @media (max-width:992px) {
.card-2 { background-position:left top; }	 
}

 /*----------------------------------------/
number-list
---------------------------------------- */
.number{padding: 40px; background-color: #fff;}
.number-list{ width: 100%; margin: 0px; padding: 0px; display: flex;flex-wrap: wrap;list-style: none}
.number-list li{ width: calc(100%/3 - 10px); margin: 80px 10px 80px 0px; display: flex; flex-wrap: wrap;justify-content: center;  flex-direction: column; }
.number-list li .number-b{font-size:5rem; line-height: 3rem; font-weight: 900; margin-bottom: 30px;text-align: center;  }
.number-list li .number-b span{ font-size:2rem; font-weight: 900;   }

.number-list li .number-t{ font-size: 1rem; line-height: 1.5rem; font-weight:500; color: #000; text-align: center;}
@media (max-width:1024px) {
.number-list li .number-b{font-size:4rem; line-height:2rem;   }	
}
@media (max-width:840px) {
.number-list li{ width: calc(100%/2 - 30px); margin:30px  auto;  }	
}
@media (max-width:767.98px) {
.number{padding: 40px 0px;}
.number-list li .number-b{font-size:3rem; line-height:2rem;   }	
.number-list li .number-t{ font-size: 0.875rem;  font-weight:400;  }
}
@media (max-width:767.98px) {
.number-list li{ margin:10px  auto;  }	
.number-list li .number-b{font-size:2rem;  }	
}
 
 
.media-wrap { width: 100%;  display: flex; gap: 30px; flex-direction: row; flex-wrap:wrap; align-items: center;   justify-content: space-between }
.text-wrap-box { padding-bottom: 5rem;  padding-top: 5rem;}
.text-card { /*height: 30rem; */width: calc(50% - 60px) }
.text-card-body { height: 100%; }
.text-card-w4 { width: calc(40% - 60px) }
.text-card-w6 { width: calc(60% - 60px) } 
.p-paragraph { font-size:1rem;  line-height:1.65rem; font-weight:400; margin-bottom: 10px; color:#000 }
@media (max-width:1280px) {
.p-paragraph { font-size:0.9rem;  line-height:1.5rem; }
	
}

@media (max-width:1160px) {
.text-wrap-box { padding-bottom: 3rem;  padding-top:3rem;}
.text-card {  width: calc(50% - 30px) }
.text-card-w4 { width: calc(40% - 30px) }
.text-card-w6 { width: calc(60% - 30px) } 
}
@media (max-width:840px) {
.media-wrap { width: 100%;  display: flex; gap: 30px; flex-direction: column;   }
.media-wrap.reverse{ flex-direction:column-reverse }
.text-wrap-box { padding-bottom:1rem;  padding-top:1rem;}
.text-card { width: 100%}
.text-card-w4 {  width: 100% }
.text-card-w6 {  width: 100% } 
}
@media (max-width:767.98px) {
.media-wrap { gap:10px; }
	
}

/*image-size*/

.media-image { height:22.5rem;  min-height: 16.118rem;  width:100%; -o-object-fit: cover; object-fit: cover;}
.media-image-v { height:35rem;  min-height: 16.118rem;  width:100%; -o-object-fit: cover; object-fit: cover; }
.img-corner { border-radius: 10px;}
.image-wrap{  width:100%;  }

@media (max-width:840px) {
.media-image { height:22.5rem;  min-height: 16.118rem;  width:100%; -o-object-fit:contain; object-fit:contain; }
}
@media (max-width:767.98px) {
.media-image { height:auto; min-height:auto; -o-object-fit:contain; object-fit:contain; }
.media-image-v { height:auto;  min-height: auto; -o-object-fit: contain; object-fit: contain; }

}

.promiseArea { padding:0px;  position: relative;}
.promiseArea  strong{color:#c8102e;}
.promiseArea .title-4{ border-bottom: solid 1px #fff;}
.promiseArea .leftBox, .promiseArea .rightBox { width: 50%; max-width: 620px}
.promiseArea .leftBox p{ font-weight: 600 }
@media (max-width:840px) {
.promiseArea { padding:30px 0px;   }	
.promiseArea .leftBox, .promiseArea .rightBox {  width: 100% ; max-width: 100%;}
.promiseArea .leftBox{  margin-bottom: 40px }
}

@media (max-width:767.98px) {
.promiseArea { padding:0px;}	
}

.loacton{width: 100%; margin: 30px 0px; padding: 0px; display: flex; flex-wrap: wrap;  justify-content: space-between}
.loacton li{ width: calc(100%/3 - 30px); margin:30px 30px 30px 0px;background-color: #fff; border: 1px solid #e1e1e1; border-radius: 10px;  box-shadow: 2px 4px 7px rgba(87, 87, 86, 0.1);list-style: none}

.loacton li .item{ width: 100%; padding:30px;  }
.loacton li h3{padding-left: 10px; margin-bottom: 10px; font-size: 1.25rem; color: #c8102e;font-weight:700; position: relative}
.loacton li h3::before{content: ""; width:3px; height: 100%; position: absolute; left:0px; top:0px; background-color: #c8102e; }
.loacton li p{font-size: 1rem; color: #000;font-weight:400; line-height: 1.65rem; word-break:keep-all}
.bg-global{padding:5rem 0px; background: url("../images/index/contact.png") no-repeat center top #f9f9f9;}

@media (max-width:1160px) {
.loacton li{ width: 100%; max-width: 70%;  margin:10px auto;}
}
@media (max-width:840px) {
.loacton{margin: 0px auto;}
.loacton li{ width: calc(100%/3 - 40px); margin:30px auto; }
.bg-global{padding:2rem 0px;}
}
@media (max-width:767.98px) {
.loacton li{ width: 100%; max-width: 100%; margin:10px auto; }
}


 
 
.title-text {  width: 60%; margin: 25px auto; color: #d6d2d0;}


/*---------------------------------------------------------------------*/
/*    certification 
/*---------------------------------------------------------------------*/
.iso-wrap { width: calc(100% - 200px);margin: auto; padding: 0px 0px 60px 0px; }
.iso-column { width: calc(33.33333% - 13.33333px); } 
.iso-pic { width: 100%; margin: 20px auto;}

.iso {width: 100%;margin: auto; padding:0px 0px 40px 0px; display: flex; flex-wrap: wrap; list-style: none}
.iso li{width: calc(100%/5 - 10px);  margin:25px 10px 25px 0px;padding:0px; border: 1px solid #f5f5f5; background-color: #f5f5f5;  box-sizing: border-box; transition: all 0.5s ease 0s; }
.iso li:nth-child(6n){border-right:none}
.iso li .photo{  width: 100%;height: auto;  padding:10px; margin: auto; }
.iso li .photo figure{ width: 100%; padding-top:147.725%; height: 0; margin: auto; object-fit:cover; overflow: hidden; position: relative; transition: all 0.5s ease 0s}
.iso li .photo figure img {  max-width: 100%;   height:auto;   -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.iso li h3{ margin:10px auto; font-size: clamp(.75rem, 2.3vw, 0.875rem); font-weight:400; line-height: 1.5rem}
.iso li:hover figure{ box-shadow: 0px 5px 8px rgba(0,0,0,.2); transition: all 0.5s ease 0s;}
 
@media (max-width: 1160px) {
.iso-wrap { width:100%; }
.iso-column { width:100%; max-width:100%; padding-bottom: 0px;margin-bottom: 30px;} 
.iso li{width: calc(100%/5 - 20px);  margin:25px 20px 25px 0px;  }
.iso-pic { width:100%;max-width:100%; margin-left: 0;}
.iso li figure {width:calc(100% - 40px);  padding: 10px 20px;  }
.a-title{ margin-left: 20px; }
}
@media (max-width: 1024px) {
.iso-wrap {padding:0px; }
.iso li{width: calc(100%/4 - 16px); margin:15px 8px }   
 }
@media (max-width: 840px) {
 .iso li{width: calc(100%/3 - 16px); }   
 }
@media (max-width:767.98px) {
.iso li{width: calc(100%/2 - 16px);   }   
.iso li figure {width:100%;  padding: 10px;  }
}

@media (max-width:320px) {
.iso li{width: calc(100%/2 - 8px); margin:15px 4px }   
.iso li figure {width:100%;  padding: 5px;  }
}


.tab-meun{width: calc(100% - 200px);margin: auto; padding: 0px 0px 60px 0px; display: flex; flex-wrap: wrap; list-style: none;}
.tab-meun li{width: calc(100%/3 - 40px);  margin:5px 20px 10px 20px;padding: 0px;font-size: 1.125rem; font-weight:700; line-height:1.5rem;  transition: all 0.5s ease 0s; list-style: circle}
.tab-meun li a{ color: #000; }
.tab-meun li:hover a{color: #c3112d;}

@media only screen and (max-width: 1160px) {
.tab-meun{width: 100%;}
.tab-meun li {font-size: 1.125rem; font-weight:500;}
}
@media only screen and (max-width: 1024px) {
.tab-meun li{width: calc(100%/2 - 40px);  margin:5px 20px 10px 20px; }
}
@media only screen and (max-width: 767.98px) {
.tab-meun {padding:20px;}
.tab-meun li{width:100%;  margin:5px 0px;padding: 0px;font-size:1rem; line-height:1.5rem;}
}
@media only screen and (max-width: 320px) {
.tab-meun li{ font-size:0.9rem;}
}
  
 /***** time  *****/
/*------------------*/
 .milestone-block{  padding: 100px 0px;  position: relative; }  
.circle-list {  margin:20px 0px 10px 0px; list-style-position: outside; list-style-type:square; padding-left: 15px; color: #c3112d }
.circle-list li{margin-bottom: 5px; font-size:1rem;font-size: min(max(3.5vw, .9rem), 1rem);line-height: 1.675rem;font-weight:400;color: #212529; letter-spacing: 0px;}
/*history*/
.timeline {padding: 0px 0 0 0; margin-bottom: 40px; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap;}
.timeline:before {content: "";position: absolute;top: 0px;left: 56px;width: 4px;height: 100%;background: #c3112d;}
.timeline > div { position:relative; padding: 10px 0 35px 150px; }
.timeline > div:nth-child(even) .timeline-date { color:#dad6d6;}
.timeline > div:before {content: "";position: absolute;left:49px;top: 40%;width: 18px;height: 18px;border-radius:50%; background: #fff;border: 3px solid #c3112d;}
.timeline-date {font-family: "Montserrat", sans-serif;line-height: 110%; font-weight: 700; font-size: 60px;color:#c3122e;}
.timeline-data { font-size: 19px;}
.timeline-data img { margin-left: 5px; margin-top: 10px;}
.timeline .text_pic_end { display: flex; flex-flow: wrap; align-items: flex-end;}

@media only screen and (max-width: 980px) {
.timeline-date { font-size: 50px;}
.timeline-data { font-size: 17px;}
.timeline > div { position:relative; padding: 10px 20px 35px 120px;}
.timeline > div:before { top: 13%; }
}
@media only screen and (max-width: 767.98px) {
 .milestone-block{  padding:0px 0px 50px 0px; }  
.timeline:before { top: -24px;left: 0px; }
.timeline > div:before { left: -6px;}
.timeline > div { padding: 10px 20px 35px 40px;}
}
@media only screen and (max-width:320px) {
.timeline > div { padding: 10px 0px 35px 40px;}
}