.main-about{ position: relative; margin:0px; padding:50px 0px 0px 0px; }
.main-about::after{width:200%; content: attr(data-content); color: #e7f4ff; font-size: 180px; font-weight: 900; word-wrap: normal; letter-spacing: 3px; left:0; bottom:0px; position: absolute; z-index:0; opacity: .5 ;} 
.main-about .animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
@media (max-width:1024px) {
.main-about{  padding:0px;}
}
@media (max-width: 767.98px) {
.main-about{ padding:40px 0px;background-size: 100% auto; background-position:0px top;}    
}

.block {width:50%; height: auto;margin: 0; padding:4vw  2vw; position: relative;z-index: 2}
.block-txt{width:100%; margin:0px auto; padding:0px 0px 0px 20px;  display: block; position: relative;z-index: 9;   }
 .block-txt p { font-size: clamp(.9rem, 2.3vw, 1.05rem); line-height:1.75rem; font-weight:400; margin:0px 0px 10px 0px; color:#3b3d40 }
.block-txt p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;   margin-bottom: 10px; color: #fff; }
@media (max-width: 992px) {
.block {width:100%;margin: 0px; padding: 0px; }  
} 
  
@media (max-width:840px) {
.block-txt{ margin:50px 0px; padding: 0px 20px;}   
}
@media (max-width:767.98px) {
.block-txt{  padding: 0px 20px;}   
}
@media (max-width:640px) {
.block-txt p { font-size:0.9rem; line-height: 1.5rem;  }
}
 
@media (max-width:320px) {
.block-txt{  padding: 0px 10px;}  
.block .block-txt{margin: 0px;}
}

.block-pic {width:50%; height: auto;margin: 0; padding:4vw 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center  }
@media (max-width: 992px) {
.block-pic {width:100%;  order: 2;  }
}
@media (max-width: 320px) {
.block-pic {width:100%;   }
}

.card-1{ width: 80%; margin: auto 0px; position: relative}
.card-1 figure{width: 100%; height: 100%; border-radius:5px; overflow: hidden; }


.card-2{ margin: auto 0px; position: relative}
.card-2 figure{width: 100%; height: 100%; border-radius:25px; overflow: hidden; }

@media (max-width:1024px) {
.card-1{ margin: auto;  }
.card-1 img {  display: block; margin: auto;  }
	
.card-2{ margin: auto;  }
.card-2 img {  display: block; margin: auto;  }
}
  /*-------------------*/
/***** time  *****/
/*------------------*/
 .milestone-block{ width:100%; position: relative ;padding: 6vw 0px; }  
.time-wrap{width:100%;   padding:50px 0px;margin:0px auto; }
.time-nav { position: relative; width: 85%;  z-index: 1;  margin: 0 auto; padding: 0px;}
.time-nav:before { border-top: 1px solid #94cbd9; content:""; margin: 0 auto; position: absolute; top:50%; left: 0; right: 0; bottom: 0; width: 85%;  z-index: -1;}
.time-nav li{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
.nav-item { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: flex-start; width:80px; height: 80px; margin: auto; position: relative}
.nav-item:before { content: ""; width:10px; height:10px; background-color:#3064a5; border: solid 2px #94cbd9;position: absolute; bottom:35px;  } 

.nav-item:hover{color:#3064a5;}
.nav-item p{ font-size:1.375rem; color: #428ea2; font-weight: 700;margin:-50px auto auto auto; }
.time-nav .slick-current .nav-item:before {  background-color:#3064a5; border: solid 2px #3064a5;  }
.time-nav .slick-current .nav-item p{color:#3064a5; }
.time-nav .slick-prev,  .time-nav .slick-next{ top:14%; width: 60px; height: 60px;  border: solid 3px rgba(0,0,0,.1);  }
@media screen and (max-width: 767.98px) {
.time-nav .slick-prev,.time-nav .slick-next{ top:20%;  width: 40px; height: 40px;   }	
.time-nav .slick-prev{left:-30px;}
.time-nav .slick-next{right:-30px;}
}


@keyframes rotate {
0% { transform: rotate(0deg) }
to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
0% { transform: rotate(0deg) scale(1) }
to { transform: rotate(-359deg) scale(1)  }
}

@keyframes rotateIt {
to { transform: rotate(-360deg); }
}

.time-item { width:100%; max-width:960px;  margin:30px auto;  padding: 30px; }
.time-item li a{ width: 100%; margin:0px auto;padding: 30px; position: relative; z-index: 1; list-style: none;  display: flex; flex-wrap: wrap; justify-content: center; align-content:center; align-items: center;  transition: all 0.3s linear 0s;color: #000;  }
 

.time-inner-full{ width: 100%;  } 
.time-inner-full .map-list li{ width: 100%; }
.time-inner-5{ width: 50%;  } 
.time-inner-3{ width: 31.333%; margin: auto -15px;   } 
.time-inner{ margin: 0px; padding:5px 10px;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content:center; align-items: center;   } 
.time-inner .time-inner-img{ width:40%; }
.time-inner .time-inner-txt{ width:60%; }
.time-inner .time-inner-3 .time-inner-txt{ width:60%; }
.time-inner figure{ width:100%; height: auto;}
#cms-main .time-item li h3{flex: 0 0 100%; padding:0px; margin:0px 0px 20px 0px;width: 100%; font-weight:700; font-size:1.5rem;   color:#0070bd;  }
#cms-main .time-item li p{ flex: 0 0 100%; margin:5px 0px; padding:10px 0px; font-size:1rem; line-height: 1.35rem;  font-weight: 700; } 
.map-list{ width: 100%; margin: auto; padding: 0px; display: flex; flex-wrap: wrap;  justify-content: center}
.map-list li{width: auto; margin:5px 10px; display: flex; flex-wrap:wrap; align-items: flex-start; font-weight: 500;}
.map-list li span{ width: calc(100% - 15px); margin-left: 5px; color: #000}
.box-brick { width: 10px!important;height: 10px!important; margin-top: 12px;  border-radius:99rem; display: flex  }
.yellow{ background-color: #eb9a26!important; }
.blue{  background-color:#3064a5!important;}
.green{  background-color: #4caf50!important;}
.red{background-color:#d40c00!important;}
.brown{background-color:#914c2c!important; }
.purple{background-color:#673ab7!important; }
.pink{background-color:#de83ad!important; }
.blue-bk{  background-color:#4f778f!important;}

.t-yellow{ color: #eb9a26!important; }
.t-blue{ color: #3064a5!important; }
.t-green{ color: #4caf50!important; }
.t-red{ color: #d40c00!important; }
.t-brown{ color: #914c2c!important; }
.t-purple{ color: #673ab7!important; }
.t-pink{ color:#de83ad!important; }
.t-blue-bk{ color:#4f778f!important; }
  
@media screen and (max-width: 767.98px) {
.time-item { padding: 30px 0px 0px 0px; }
.time-item li a{  padding: 0px; }	
.time-inner .time-inner-img{ width:100%; }
.time-inner .time-inner-txt{ width:100%; }
.time-inner .time-inner-3 .time-inner-txt{ width:100%; }	
#cms-main .time-item li h3{ font-size:1.125rem;   color:#0070bd;  }
#cms-main .time-item li p{  font-size:.9rem;  line-height: 1.375rem;  } 
.map-list{  justify-content: flex-start}	
.map-list li span{font-size:.9rem; line-height: 1.375rem;  }	
.box-brick {  margin-top: 6px;   }	
 }

 
/* ==== global === */
.bg-global {width: 100%; background-image: attr(src url); background-repeat: no-repeat;background-size:100% auto;background-position:left top; background-color:#0b0c0f; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0; } 
.global-mould{ width: 100%; padding:6vw 0 0 0;  position: relative }
.global{padding:22vw 2vw 5vw 2vw }
.global .col { padding: 0; }
.global .desc { display: flex; align-items: center; flex: 0 0 calc(100%/3 - 30px); margin: 15px; }
.global .block-title { padding: 0 2vw;}
.global .block-title-txt p{ margin: 0; font-size: clamp(.9rem, 2.3vw, 1.125rem); font-weight: 500; color: #fff; line-height: 1.75rem;}
.global-logo{ padding:0; display: flex; flex-wrap: wrap; justify-content: center; margin: auto}
.global-logo .images { width:30%; position: relative;  }
.global-logo .images img {  opacity:1; -o-object-fit: cover; object-fit: cover; width: 100%; height: 100% !important; transition: 1s; }
@media screen and (max-width: 840px) {
.global .desc {  margin: 15px auto;    }
}
/* ==== Sustainable === */
 
.bg-sustainable {width: 100%; background-image: attr(src url); background-repeat: no-repeat; background-size:100%  auto ; background-position:center;  background-attachment: fixed; position: absolute;z-index:-1; top:0px; left: 0; right: 0; bottom: 0; line-height: 0; } 

@media screen and (max-width: 1024px) {
.bg-sustainable { background-attachment: scroll; } 
 }
@media screen and (max-width: 840px) {
.bg-sustainable { background-size:cover; } 	
}
.sustainable-mould{ width: 100%; padding: 0; position: relative }
.sustainable-mould::before{ content: ""; width: 100%;height: 100%; background-color: rgba(0,0,0,.5); position: absolute; left:0px;top:0px;  }
.sustainable{ padding:5vw 2vw;   }
 .sustainable .col { padding: 0; }
.sustainable .desc { display: flex; align-items: center;   margin: 15px auto; }
.sustainable .block-title { padding: 0 2vw;}
.sustainable .block-title-txt p{ margin: 0; font-size: clamp(.9rem, 2.3vw, 1.125rem); font-weight: 500; color: #fff; line-height: 1.75rem;}
 @media screen and (max-width: 767.98px) {
.sustainable .block-title-txt p{ line-height: 1.375rem;}
 }
 
.locatio-icon{width: 100%;}
.icon-list{ display: flex;flex-wrap: wrap; margin: 0px; padding: 0 4vw ; list-style: none;}
.icon-list li{flex: 1 1 0%;margin:20px;position: relative }
.icon-list li .item{ padding:20px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column;}
.icon-list li .number-t{width:auto; padding-bottom: 10px;  margin-bottom: 10px; font-size: 1rem; line-height: 1.5rem; font-weight:700; text-align: center;color:#fff;  }
.icon-list li figure{width: 72px; height: auto; display: flex; margin: auto 0px; }
.icon-list li .number-b { color: #fff;  text-align: center; position: relative }
.icon-list li .number-b span{  font-size:6.5rem;line-height: 6rem;  font-weight: 700;color: #003567;    }
.icon-list li .number-b strong{  font-size:3rem; color: #fff!important;  position: absolute; top:-30px;z-index: 2  }
 @media screen and (max-width:840px) {
.icon-list li .number-t{ min-height: 60px; padding-bottom: 0px;  margin-bottom: 0px;  }	 
.icon-list{ padding: 0; }
}
 @media screen and (max-width:767.98px) {
.icon-list li{flex: 1 1 50%;margin:20px;position: relative }
	 
.icon-list li .number-b span{ font-size:2.5rem;  }

}
.bg-end-background { background-image: attr(src url); background-repeat: no-repeat; background-size:100% auto ;background-position:left bottom;  background-attachment: fixed; position: absolute;z-index:-1;background-color: #173e0f;  width: 100%;  height: 100%; top: 0px; right: 0; bottom: 0; left: 0; transition: 0.8s 1s; -webkit-filter: brightness(0.35); }
@media (max-width: 1024px) {
.bg-end-background {  background-size:120% auto ;  }	
}
 
.grid-card { display: grid; width: 100%; margin: auto; grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)); gap:40px; padding: 15px 0px;position: relative;z-index:2}
.grid-wrap{ width: 50%; }
.grid-flex-end{justify-content: flex-end}
.grid-flex-start{justify-content: flex-start}

.grid-box { width: 100%; padding: 20px;   border:solid 1px #f8f8f8; background-color:#f8f8f8;  }
.grid-w30 h3 { font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#017a84}
.grid-w30 ul { margin: 0px; padding: 0px; list-style: none}
.grid-w30 ul li{ margin: 0px; padding: 0px; }
.grid-w30 figure.pho{   margin-bottom: 20px; border-radius:30px; overflow: hidden}

.grid-box-color { display: flex; flex-wrap: wrap;align-items: center; justify-content: center; width:200px; height: 200px;  padding: 20px;  border-radius:99rem;  border:solid 1px #f8f8f8; background-color:transparent;  }
.grid-box-color:nth-child(1){border: 1px solid #a2c617; background-color:#a2c617; }
.grid-box-color:nth-child(2){border: 1px solid #f59c00;  background-color:#f59c00;}
.grid-box-color:nth-child(3){border: 1px solid #017a84; background-color:#017a84; }
.grid-box-color:nth-child(4){border: 1px solid #03a9f4;  background-color:#03a9f4;}
 
.grid-box-color.grid-w30 h3 { margin:0px  auto; text-align: center; font-size: 1.25rem; margin-bottom: 10px; font-weight: 700; color:#fff}
 figure.pic-radius{ margin:30px; border-radius:30px; overflow: hidden}
 figure.pic-radius img{ border-radius:30px; overflow: hidden}
@media(max-width:1280px) {
.grid-wrap{ width: 60%; }
.grid-card {  grid-template-columns: repeat(auto-fit, minmax(48%, 1fr)); gap:20px; padding: 15px 0px;position: relative;z-index:2}
 }
@media(max-width:1160px) {
.grid-wrap{ width: 100%; }
}
 /*** ----------------------------------------
 * animation slide-up-down
 * ----------------------------------------*/
.slide-up-down { -webkit-animation: slide-up-down 1.7s ease-in-out infinite alternate both;  animation: slide-up-down 1.7s ease-in-out infinite alternate both; }
/* ------- */
@-webkit-keyframes slide-up-down {
0% {  -webkit-transform: translateY(0); transform: translateY(0); }
100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); }
}
@keyframes slide-up-down {
0% { -webkit-transform: translateY(0); transform: translateY(0); }
100% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 
}
@-webkit-keyframes rotate {
to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes rotate {
to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
/* Global Markets*/
.location{ padding: 5vw 0px;  background-color: #e3e8ee;  position: relative;} 
.location-office{ width:100%; background-color: #e3e8ee;   }
.location .block-txt{ padding:0px 30px; }
@media(max-width:767.98px) {
 .location-office{margin-top: -15px }
.location .block-txt{ padding:0px 10px; }	
}


.office{ width:100%; display: flex; flex-wrap: wrap; margin: 0px auto; padding: 2vw; list-style: none}
.office.center{ justify-content: center}
.office li {width:calc(100%/3 - 20px); margin:20px 10px ; position: relative;   list-style: none; }
.office li .item{width: 100%;  display: flex; flex-wrap: wrap;  }
.office li .photo { width: 100%; height: auto; padding: 0px;  overflow: hidden; border-radius:12px;  }
.office li .photo figure{ width: 100%; padding-top:67.25%; height: 0; object-fit: cover;overflow: hidden; position: relative; transition: all 0.5s ease 0s;}
.office li .photo figure img { max-width: none; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.office li .inner-body { position: relative;  width:100%; height: auto; padding:10px 0px 0px 0px;  z-index: 9;  }
.office li h3 { font-size:1rem; font-weight: 700; color:#003567;  margin:3px 0px; word-break: normal; word-wrap: normal }
.office li p { font-size:0.9rem; line-height: 1rem; font-weight: 500; color:#3b3d40;margin:0px; }


@media (max-width:1024px) {
.office{ padding: 0px 2vw; }	
 
}

@media (max-width:767.98px) {
.office li {width:calc(100%/2 - 20px); margin: 10px;}
}
@media (max-width:640px) {
.office li {width:calc(100%/2 - 10px); margin: 10px 5px;}
}
@media (max-width:320px) {
.office li {width:100%; margin: 10px auto;}	
}


/* ==== 底圖 === */
.bg-background { width: 100%;  background-image: attr(src url); background-repeat: no-repeat; background-size:70% auto;background-position: center; position: absolute;z-index:0; top:0px; left: 0; right: 0; bottom: 0; line-height: 0; filter: opacity(.7);animation: bg-circle 30s ease-in-out infinite;  } 
.lines{width: 100%;  }
.line { position: absolute; width: 1px; height:42%; top: 0; left: 25%; background: rgba(196, 209, 220, .4); overflow: hidden;}
.line::after { content: ""; display: block;  position: absolute;  height: 15vh; width: 100%; top: -50%; left: 0;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%); -webkit-animation: drop 7s 0s infinite; animation: drop 7s 0s infinite;  -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97); animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);}

.line:nth-child(1) {  height: 100%;margin-left: -15%;}
.line:nth-child(1)::after {-webkit-animation-delay: 2s; animation-delay: 2s;}
.line:nth-child(2)::after {height: 5vh;margin-left: -15%; }
.line:nth-child(3) { height: 50%;margin-left:50%;}
.line:nth-child(3)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s;}
.line:nth-child(4) { height: 100%;margin-left:65%;}
.line:nth-child(4)::after { -webkit-animation-delay: 2.5s; animation-delay: 2.5s;}

@-webkit-keyframes drop {
0% { top: -50%;  }
100% { top: 110%;  }
}

@keyframes drop {
0% { top: -50%;  }
100% {  top: 110%;  }
} 
@keyframes bg-circle {
0% { transform: translateZ(0)   }
10% {transform: translate(0%, -10%) translate3d(0px, 50px, 0px); }
25% { transform:translate(0%, -18%) translate3d(0px, 0px, 0px);   }
50% {  transform: translate(0%, -20%) translate3d(0px, 0px, 0px); }
70% { transform: translate(0%, -10%) translate3d(0px, 50px, 0px);    }
to {  transform: translate(0%, -5%) translate3d(0px, 0px, 0px); }
}

 
/*---------------------------------------------------------------------*/
/*   sustainability.html
/*---------------------------------------------------------------------*/

 /* csr  -----------------------------------*/
.csr-tab { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin-bottom: 60px; padding-top: 80px; padding-bottom: 60px; border-top: 1px solid #a9a9a9;}
.csr {flex: 1 0 calc(100%/3); border-right: 1px solid #a9a9a9; box-sizing: border-box;}
.csr:nth-child(2) { padding-right: 3%; padding-left: 3%;}
.csr:last-child { padding-right: 3%;  padding-left: 3%; border-right: 0;}
.csr-title { margin-bottom: 10px; color: #000; font-weight: 700; font-size: 1rem; line-height: 1.5rem;  }
.csr .item { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap;}
.csr .img { position: relative; width: 127px; height: 127px; background-position: center;  background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; display: flex;}
.csr .inner { position: relative; width:calc(100% - 127px); display: flex;padding-right: 30px;  padding-left: 30px;}
.csr .item .art-title {  margin-bottom: 10px; color: #515151;  font-size: 15px; line-height: 1.6em; text-align: left;  overflow: hidden;  -o-text-overflow: ellipsis;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.csr .item .art-title span { text-align: left;}
.csr .item .art-date {  margin-bottom: 10px;   font-weight: 700; font-size: 0.875rem; overflow: hidden; -o-text-overflow: ellipsis;  text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.csr .item .art-more {   color:#003567; font-size: 1rem; font-weight: 700; }
.csr .item .art-more:hover {color:#ef6908; }
.csr .inner-txt{ margin-bottom: 20px; color: #515151;  font-size: 0.9rem; line-height: 1.6rem;}
.csr .inner-txt span {  height:70px; margin: 0px 0px 10px 0px;  font-size: clamp(.875rem, 2.3vw, 1rem);  overflow: hidden; text-overflow: ellipsis;word-break: keep-all; word-wrap: break-word;  display: -webkit-box;  -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow-wrap: break-word;  position: relative;}
@media only screen and (max-width: 1150px) {
.csr  {-webkit-box-orient: vertical;  -webkit-box-direction: normal;  -ms-flex-direction: column; flex-direction: column;  -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 0;  width: 100%;  height: auto; border-top: 0;}
}
@media only screen and (max-width:840px) {
.csr-tab { padding-top: 30px;  padding-bottom: 0px;  border-top:none;}
.csr { flex: 0 0 calc(100%/2 - 20px);  margin:20px 10px; padding: 10px; border: 1px solid #a9a9a9;  }
.csr:last-child {   border-right: 1px solid #a9a9a9; }
}
@media only screen and (max-width:767.98px) {
.csr { flex: 0 0 calc(100%); margin:10px auto;padding:15px;  }
.csr:nth-child(2),.csr:last-child { padding:20px;}
.csr .img {  width: 100%; height: auto; }
.csr .inner { width: 100%;padding: 0px;}
	
}

 




/*  page-editor -----------------------*/
.page-editor {  margin: 0 auto;padding: 50px 20px 0px 20px;  letter-spacing: 0.02rem; margin-bottom: 70px; color: #515151}
.page-editor .titlebox{margin:70px auto 50px auto; }
.page-editor p{ font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.5rem;  }
.page-editor blockquote{ width: 80%; margin: auto; font-size: clamp(1rem, 2.3vw, 1.75rem); font-weight: 600;line-height: 2.375rem; color: #000 }
 @media only screen and (max-width:840px) {
.page-editor { margin-bottom: 20px;}
.page-editor blockquote{ width: 100%; line-height: 1.5rem;  }
}
@media only screen and (max-width:767px) {
.page-editor { padding:50px 0px 0px 0px;}
}

.boxarea {  margin-bottom: 60px;}
.box-item { margin: auto; padding: 0px; list-style: none;}
.box-item  li{ padding: 30px 40px; margin: 0px 10px; width: calc(100% - 20px);  height: 220px;   border: 1px solid #b1b1b1;  }
.box-item .blue-t { margin-bottom: 20px; color:#003567; font-weight: 700;  font-size: 30px; overflow: hidden;  -o-text-overflow: ellipsis; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.box-item .blue-t sub { font-size: 18px; bottom: 0;vertical-align: middle}
.box-item p { font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.5rem; color: #515151; overflow: hidden;  -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
.box-item .slick-prev{left:-15px;}
.box-item .slick-next{right:-15px;}
@media only screen and (max-width:320px) {
.box-item  li{ padding: 20px; height: 180px; }
.box-item .blue-t {  font-size: 20px; }
}


.hrefbox {  display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-align: center; -ms-flex-align: center; align-items: center;  -webkit-box-pack: center;  -ms-flex-pack: center; justify-content: center; max-width: 305px; width: 100%; height: 66px; background: -moz-linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%); background: -webkit-linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%); background: -o-linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%);  background: rgb(0,0,128); background: linear-gradient(159deg, rgba(0,0,128,1) 0%, rgba(0,191,255,1) 100%); color: #333; font-weight: 700;   font-size: clamp(.875rem, 2.3vw, 1rem); }
 
.hrefbox span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: calc(100% - 8px); height: calc(100% - 8px); background-color: #fff;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
@media only screen and (min-width: 1025px) {
.hrefbox:hover span { background-color: transparent; color: #fff; }
}
 

.box-cate { width:100%;  margin: auto 0; padding:20px 0px; display: flex; flex-wrap: wrap; list-style: none; }
.box-cate li {width:calc(100%/3 - 30px ); margin: 15px; transition: all 0s ease 0s;position: relative;  } 
.box-cate li figure { width:100%; height: auto;  margin: 0px;padding: 0px;position: relative; z-index: 2; }
.box-cate li figure img{ width:100%; max-width: 100%; height: auto; }
.box-cate li figure:before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0;background:#ec9722; -webkit-transform: scaleX(0);  transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.box-cate li:hover figure  img{ opacity: .5;}
.box-cate li:hover figure:before { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);}    
.box-cate li h3 {  margin:0px; padding:10px; font-size: clamp(.875rem, 2.3vw, 1.188rem);         line-height: 1.25rem; font-weight:600;  text-align: left; color:#ec9722;   word-break: keep-all; word-wrap: break-word;   overflow-wrap: break-word;  position: relative; } 
.box-cate li h3 a{color: #003567}
.box-cate li h3::before{  content: ""; position: absolute; left:0px; top:12px; width:5px; height: 30%; background-color:#003567; }
.box-cate .inner{padding: 10px 0px;}
@media (max-width:767.98px) {
.box-cate { margin:20px auto; padding:0px;  }    
.box-cate li {width:calc(100%/2 - 20px ); margin:10px;   } 
 }

@media (max-width:420px) {
.box-cate li {width:100%; margin:10px auto;} 
 }

/* about Venn diagram*/
.diagram{  width: 100%; height: 100%; position:relative; z-index: 9;}
.diagram h3 { padding-bottom: 0.5rem; border-bottom: currentcolor 1px solid; margin-block: 2rem;}
.diagram hr {  margin: 3rem 0; border: none; border-top: #eee 1px solid;}
.grid { display: grid; /*gap: 2rem 4rem; */   grid-template-columns: repeat(auto-fit, minmax(25%, 2fr)); gap: 30px; }
 
@media (max-width:840px) {
 .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width:767.98px) {
 .grid { grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));}
} 
/*careers.html*/
.box-grid { display: grid;  gap: 2rem 4rem;  grid-template-columns: repeat(auto-fit, minmax(40%, 2fr));   }
.recipe{ position:relative; padding: 20px 0px;}
.recipe-heading{ display: flex; gap: 2rem; align-items: center; font-weight: 600;}
.recipe-heading:before,.recipe-heading:after { content: ""; display: block; flex: 1; height: 1px; background-color: currentcolor;}
.recipe-ingredients h3{ min-height: 40px;  color: #003567 ; font-size: 1.188rem; line-height: 1.25rem; font-weight:700;}
@media (max-width:840px) {
.box-grid {   grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));   }
	
}


/*ul dot style*/
.ingredients { list-style: none; margin: 2rem 0; padding: 0;}
.ingredients li{ list-style-type:square; margin: 1rem 0 1rem 2rem; padding: 0; font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.5rem; }
.ingredients li ::marker { font-variant-numeric: normal;  line-height: 1.2; font-weight: 500;}
 /*ul step style*/
.instructions { list-style-type: decimal-leading-zero; margin: 2rem 0 2rem 2rem; padding: 0;}
.instructions ::marker { font-variant-numeric: normal;  line-height: 1.2; font-weight: 500;}
.instructions-step { margin: 2rem 0;  padding-left: 1rem; position: relative;}
.instructions-step:after { content: "";  display: block; position: absolute;  background: #000; width: 1px;  inset: 2rem auto -1.5rem -1rem;}
.instructions-step:last-child:after { display: none;}
 
.ingredients-item {  border-top: 1px solid #000;  display: grid;  gap: 2rem;  padding: 1rem 0;  grid-template-columns: 3rem 1fr;}
.ingredients-item:first-child { padding-top: 0;  border: none;}
.ingredients-item:last-child { padding-bottom: 0;}
.ingredients-value { font-weight: 600; text-align: center;}

/*-------------------------------
sustainability-environment.html
-------------------------------*/
#web { width: 800px;  height: 600px;    margin: auto;  position: relative; }
#center-sphere { width: 360px; height: 360px; position: absolute; left:30%; top: 15%; background-color:rgba(0,53,103,.1); border: 2px rgba(255,255,255,.5) solid; border-radius: 50%;box-shadow: 0px 5px 8px rgba(66,128,192,0.35);}

#center-sphere .title { position: relative; top:32%; left: 28%; font-weight: 700;color: #004198 }
 .sphere { width: 180px; height: 180px; text-align: center; border-radius: 50%; position: absolute; background:#003567;border: 2px rgba(255,255,255,.5) solid;   transition: background-color 800ms ease-in-out; transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms ; -moz-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;  -ms-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms; -o-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;
-webkit-transition:width 800ms, height 800ms, border-radius 800ms,left 800ms, top 800ms;}

.sphere:hover { transition: background-color 800ms ease-in-out; background: rgb(115,166,183); color: #ffffff; z-index: 999;  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;  -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.sphere.three .text{top:20px;}
.sphere.four .text{top:20px;}
.sphere .text em{font-size:3rem; font-weight: 900; color: #fff; display: block}

.sphere .text {  -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; position: relative; font-size:1.275rem; font-weight:700;   color: #fff; }
.sphere:hover .text { top: -10px;  transition: all 0.5s ease-in-out; }
.sphere:hover .muscles{ top: 20px; left: 82px;}

.blurb {width: 100%; margin: 2.5em 0px; padding: 15px 10px; text-align: left; background-color:rgba(0,53,103,.2);  -ms-transform: scale(.9);  -webkit-transform: scale(.9);  transform: scale(.9); position: relative ; border-radius: 15px; visibility: visible; }
.sphere:hover .blurb {  -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; color:#000; visibility: visible; z-index: 999; background-color:rgba(125,184,214,.35);   border: 2px rgba(115,166,183,.5) solid; }
.blurb li{ margin-bottom: 10px; line-height: 1.5rem;font-weight: 500; color: #000; }
 
.one{left: 467px; top:65px;}
.two{left: 520px; top: 323px;}
.three{left:230px; top: 343px;}
.four{left: 150px; top: 100px;}
 
.sphere.one{ width: 150px; height: 150px; }
.sphere.two{ width: 120px; height: 120px; }
.sphere.three{ width:160px; height: 160px; }
 
.sphere.one .blurb{ width: 400px; top:-240px; right: -120px;  }
.sphere.two .blurb{ width: 400px; top:-100px; right: -70px;   }
.sphere.three .blurb{ width: 400px; top:-140px; left:-360px;  }
.sphere.four .blurb{ width: 400px; top:-170px; left:-360px;  }
 
@media (max-width:1112px) {
#web {  transform: scale(0.9)}
 }
@media (max-width:840px) {
#web { width: 100%; height: auto; transform: none;}
#center-sphere { width:auto; height: auto; position: relative; left:auto; top: auto; background-color: transparent; border:none; border-radius:none;box-shadow:none; }	
#center-sphere .title { position: relative; top:0; left: 0; font-weight: 700;color: #004198 }
.sphere { width: 100%; margin-bottom: 20px;  display: flex;flex-wrap: wrap; border-radius:0px;border:none;  background: none; position: relative;  }	
.one,.two,.three,.four{left: auto; top:auto;position: relative;}
.sphere.one ,.sphere.two ,.sphere.three,.sphere.four{ width:100%; height: auto;position: relative; }
.sphere:hover .text { top: -15px; }
.sphere .text {  width: 120px;  height: 120px; font-size:1.275rem; font-weight:700; color: #fff; background:#003567;border-radius:50%;   }
.sphere.three .text,.sphere.four .text{top:auto;}
.sphere .blurb { width: calc(100% - 150px);margin: auto}
.sphere.one .blurb,.sphere.two .blurb,.sphere.three .blurb,.sphere.four .blurb{width: calc(100% - 150px); top:auto; right: auto; left:auto; position: relative }
.sphere:hover .blurb {   border: 2px rgba(255,255,255,.5) solid; }	
.sphere:hover { background: rgb(115,166,183,.1); border-radius:10px;  }	
 }

@media (max-width:767.98px) {
.sphere .text {  margin: auto   }	
.sphere.one .blurb,.sphere.two .blurb,.sphere.three .blurb,.sphere.four .blurb{width: 100%;  }
}

/*table css*/
:root {   --borderColor: rgba(0,0,0,.75);}
.recipe .datatable { width: 100%; max-width: 600px;  border-spacing: 0; margin:50px auto;background-color:#fff; box-shadow: 0px 0px 13px 0px #dbdee0;}
@media (max-width: 991.98px) {
.recipe .datatable { width: 100%;}
}

.recipe .datatable thead {  letter-spacing: 0.05em;  text-transform: uppercase;  }
.recipe .datatable tbody { font-size: .9rem ;border: 2px solid var(--borderColor); }
.recipe .datatable th { font-size:.9rem; font-weight: 700; color:#000;  padding:10px; text-align: left; white-space: nowrap; border-right: 1px solid var(--borderColor); border-top: 1px solid var(--borderColor);  border-bottom: 1px solid var(--borderColor); background-color: rgba(168,206,125,.3);}
.recipe .datatable td { font-size:.9rem; font-weight: 400;padding: 10px; white-space: nowrap; border: 1px solid var(--borderColor);   }
.recipe .datatable thead td{ color: #000;  font-weight: 700; }
.recipe .datatable td:nth-child(odd) { background-color: rgba(168,206,125,.3);} 
.recipe .datatable td.bg-white { background-color:#fff} 
.recipe .datatable td.bg-green { background-color: rgba(168,206,125,.3);} 

.recipe .datatable td .wrap { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center}
.recipe .datatable span.txt-r{ display: flex; flex-wrap: wrap;text-align: right}
.recipe .datatable span.txt-name{ display: flex; flex-wrap: wrap;flex-direction: column;  }

/*capability.html css*/
.capability{ width: 100%; margin-bottom: 60px;  }


.capability .titlebox{margin: 30px 0px;}
.c-pic{ width: 40%; padding:0px 20px;  }
.c-pic img{ border-radius:15px; overflow: hidden}
.c-txt{ width: 60%; padding:0px 20px;}
 
.capability h3{ font-size: clamp(1rem, 2.3vw, 1.5rem); font-weight: 700;line-height:2rem;  }
.capability h4{ font-size: clamp(.9rem, 2.3vw, 1.125rem); font-weight: 400;line-height:1.5rem;  }
.v-center{align-items: center}
 
.steps { position: relative; padding: 0 1rem 0 3.5rem; margin: 2rem 0 0; list-style: none;}
.steps-item { position: relative;  min-height:60px; counter-increment: list; padding-left: 0.5rem;}
.steps-item:before { content: ""; position: absolute; left: -1.5rem; top: 50px;  height: 54%;  width: 2px;  border-left: 2px solid #003567;}
.steps-item:after { content: counter(list); position: absolute; top:2px; left: -2.5rem; width:36px; height: 36px; border-radius: 50%; background: transparent; color: #003567; font-weight: 400; font-size: 13px; line-height: 2rem; text-align: center; border: 1px solid #003567;}
.steps-item:last-child:before { border: none;}
.steps-item.steps-item--completed { opacity: 1; color: #003567;}
.steps-item.steps-item--completed:after {  content: "\2713"; font-weight: 700;  background: #003567;  color: #fff;}
.steps-item.steps-item--active:after { background: #003567;  color: #fff;}

.steps-title { padding: 0.5rem 0 0.5rem; margin: 0; font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500; line-height: 1.375rem; }
.steps-info { font-size: 13px;}

.step-box { width: 100%;padding: 0 0 0 1rem; margin:1rem 0; }
.step-box li { width: 100%; height: auto;  margin:5px 0px; color:#003567; }  
.step-box li .inner { padding: 0.2rem 0 0.5rem; margin: 0; font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.65rem;  }


.step-box-2 { width: 100%;padding:0; margin:0px 0px 10px 0; }
.step-box-2 ul { width: calc(100% - 20px); padding:10px 20px; margin:0px 0px 0px 20px; display: flex; flex-wrap: wrap; list-style: none}
.step-box-2 li { width: calc(100%/3); padding:0px;margin:5px 0;  font-size: .875rem; font-weight: 500;line-height: 1.375rem;   list-style:disc}  
.step-box-2 li .inner { padding: 0.2rem 0; margin: 0; font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.65rem;  }

.bg-box-light{background:rgb(29,153, 210,10%);   backdrop-filter: blur(15px); border: 4px solid rgba(255, 255, 255, 0.18);  border-radius:5px;}
 .inner-number { width: auto;  margin:0px 0px 0px 20px; padding: 5px 20px;   font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.65rem; color:#003567; background-color:#edf1f5; position: relative;}
/*  .inner-number::before { content: "";  width: 100%; height: 100%; background-color:#003567; position: absolute; left:0px; bottom:0px;  }
*/ 
@media (max-width: 767.98px) {
.step-box-2 li { width: calc(100%/2); padding:0px;margin:5px 0;  font-size: .9rem; font-weight: 500;line-height: 1.375rem;  }  
}
@media (max-width: 420px) {
.step-box-2 li { width:100%;  }  
}

.step-2{position: relative}
.step-list { width: 100%;  height: 100%;  margin:3% auto; padding: 0px;  list-style: none; display: flex; flex-wrap: wrap;  justify-content: flex-start; align-items: stretch; position: relative}
.step-list li{  width: calc(100%/3 - 20px); margin: 10px; background:rgb(29,153, 210,10%);;  backdrop-filter: blur(15px); border: 4px solid rgba(255, 255, 255, 0.18);  border-radius:15px; z-index: 1; position: relative}
.step-list.w2 li{  width: calc(100%/2 - 20px); margin: 10px; background:rgb(29,153, 210,10%);;  backdrop-filter: blur(15px); border: 4px solid rgba(255, 255, 255, 0.18);  border-radius:15px; z-index: 1; position: relative}

.step-list .inner{  padding:30px 20px;  font-size: clamp(.875rem, 2.3vw, 1.275rem); font-weight: 500;line-height: 1.65rem; word-break:normal; word-wrap: normal}
.step-2 .circle{  opacity: .5;filter: blur(15px); position: absolute; width: 300px; height: 300px; transform: translate(-5rem, -15rem); z-index: -1; border-radius: 50%; background: linear-gradient(to right,  #0062a3, #29ABE2);  }
.step-2 .circle:nth-child(2){  filter: blur(35px);width: 200px; height: 200px; background: linear-gradient(to right, #F15, #F15A2A); transform: translate(55rem, -45rem);}
@media (max-width: 1112px) {
.step-list .inner{ padding:30px 10px; font-size: clamp(.875rem, 2.3vw, 1.175rem); }	
}
@media (max-width: 840px) {
.step-list li{ width: calc(100%/2 - 20px);}
}
@media (max-width: 767.98px) {
.capability{  margin-bottom:10px;  }
.step-list li{ width: 100%; margin:10px auto}
.c-txt{ width: 100%; padding:0px;}
.c-pic{ width: 100%; padding:0px;  }
}
 

/*---------------------------------------------------------------------*/
/*  202051205 certification.html
/*---------------------------------------------------------------------*/
 .iso-wrap { margin-bottom: 60px; padding-top: 80px; padding-bottom: 60px; border-top: 1px solid #ddedf6;}
 .iso-column { width: calc(33.33333% - 13.33333px); } 
.iso-pic { width: calc(66.66667% - 6.66667px);   margin-left: 20px;}
 
.iso {width: 100%;margin: auto; padding: 0px; display: flex; flex-wrap: wrap; list-style: none}
.iso li{width: calc(100%/3);  margin:25px 0px;  border-right: 1px solid #ddedf6; box-sizing: border-box;  display: flex; flex-wrap: wrap; justify-content: center;  align-items: center}
.iso li figure { width:calc(100% - 50px); padding: 10px 20px;   position: relative;}
.iso li figure img{margin: auto;}
.a-title{position: relative;margin-top:50px }
.a-title h2 { margin-bottom: 0px; font-size:2rem; font-size: calc(1.125rem + 1.0416666667vw);font-weight: 500; line-height: 1.23; letter-spacing: normal;  color:#004098; }
.a-title:before { width: 10px; height: 10px; content: ""; position: absolute; top: 10px;  left:-10px;   background-color: #f38054;  border-radius: 50%;  -webkit-backface-visibility: hidden; backface-visibility: hidden;}
@media (max-width: 1112px) {
 .iso-column { width:100%; max-width:100%; padding-bottom: 0px;margin-bottom: 30px;} 
.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:767.98px) {
.iso li figure {width:calc(100% - 20px);  padding: 10px;  }
}



.esg{ list-style:none; margin-bottom: 20px 0px; padding: 0px;   }
.esg li{margin: 10px 0px;}
.esg .item{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.esg .depiction{ width: calc(100% - 100px); padding-left: 30px; font-size:1.125rem; font-weight: 500; line-height: 1.23; letter-spacing: normal;}
.esg-icon{ width: 100px; height: 100px;  margin: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #fff; border-radius:50%; box-shadow: 2px 5px 8px rgba(0,0,0,.2)  }
.esg-icon img{  width: 80px; display: block; margin: auto; filter:invert(100%) brightness(100) grayscale(1)}

.esg .half{  display: flex; flex-wrap: wrap;  }
.esg .half li{ width: calc(100%/2);display: flex }


.esg li .box-yellow{ background-color: #ff9c17}
.esg li .box-Purple{ background-color: #ab96b0}
.esg li .box-blue{ background-color: #759bbf}
.esg li .box-red{ background-color: #fa6879}
.esg li .box-d-blue{ background-color: #7fcdc8}

.esg li .box-orange{ background-color: #ff5805}
.borde-orange{ border:solid 1px #ff5805}
.color-orange{ color: #ff5805}

.esg li .box-Purple-d{ background-color: #c83297}
.borde-Purple-d{border:solid 1px #c83297}
.color-Purple-d{color:#c83297}
 
.esg li .box-Purple-d2{ background-color: #7d59af}
.borde-Purple-d2{border:solid 1px #7d59af}
.color-Purple-d2{color:#7d59af}

.esg li .box-blue-light{ background-color: #50c4b9}
.borde-blue-light{  border:solid 1px #50c4b9;   }
.color-blue-light{  color:#50c4b9;   }


 
.esg-block{width: calc(100%/2 - 40px);  margin: 10px 20px; padding: 30px; }
.borde{border-radius:30px; box-shadow:0px 3px 5px rgba(0,0,0,.2)}
.esg-pic{width: 100%; max-width:40%; margin: auto; display: block}


.step-box.half{  display: flex;flex-wrap: wrap }
.step-box.half li  { width: calc(100%/2);  }  
 .esg-block ul li { margin-bottom: 5px;  font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 400;line-height: 1.5rem;  }
@media (max-width:840px) {
.step-box.half li  { width:100%;  }  

}


 /*Application photo Styles 1
=================================*/
.application { width:calc(100%  + 20px); margin:30px auto; padding:0px; display: flex;flex-wrap: wrap;  position: relative; z-index: 99;}
.application li { width:calc(100%/4  - 20px); margin:50px 10px;padding:0px; list-style: none;   transition: all 0.5s ease 0s;  position: relative; z-index: 9;}
.application li:hover .ad::before{ opacity:0;  transition: all 0.5s ease 0s;   }
.application li:hover .ad figure img {transform: scale(1.05); }
.application li:hover h3{ color: #003567 }
@media (max-width:840px) {
.application { width:100%; }	
.application li { width:calc(100%/2  - 20px); margin:10px }
}
@media (max-width:320px) {
.application li { width:100%; margin:10px auto}
	
}


.ad{ overflow: hidden; margin:0px; padding:0px;  position: relative;z-index: 0; transition: all 0.5s ease 0s; }
.ad figure{ display: block; width: 100%; height: auto;  object-fit: cover; transition: all 0.5s ease 0s;  position: relative;      }
.ad figure img { position: relative;z-index: 0; display:block; transition: transform .6s;  /*  pointer-events: none; */  }
.ad::before{content: "" ; width: 100%; height: 100%; display: block; position: absolute; z-index: 9; left:0; top:0;  pointer-events: none; background-image: linear-gradient(180deg, rgba(0,53,103,0) 0%, rgba(0,53,103,0.6) 100%); }
.ad-img-box { position:absolute;z-index: 99; bottom:10px; left:auto; margin:0px auto; padding:0px; width:100%; height:auto;border-radius:99rem;}
@media (max-width:1180px) {
.ad-img-box { left:-17%;   }
}
@media (max-width:1024px) {
.ad-img-box { left:auto;   }
}

/*Application photo icon 
=================================*/
.ad-img-box h3 { width: auto;min-height: 50px; margin:0px auto; font-size:1.125rem;font-weight:600; line-height: 1.5rem;  text-align: center; color:#fff;word-wrap: normal; word-break:normal}
.ad-img-box h3 a{ color:#fff; }
  
@media (max-width:767.98px) {
.ad-img-box h3 {  font-size:1rem;  }
}


.size-16{ font-size: clamp(.875rem, 2.3vw, 1rem); font-weight: 500;line-height: 1.5rem;  }
.size-weight{ font-weight: 500; }