.about{}
.about p { font-size:1rem;  line-height:1.875rem; font-weight: 400; }
 @media (max-width: 1280px) {
.about p { font-size:0.9rem; }
}
@media (max-width:640px) {
.about p { font-size:0.9rem; line-height: 1.5rem;  }
}
.main-wrap{ width: 100%; padding:0px; margin:0px auto; height: auto;  display: flex; flex-wrap: wrap;  }
.main-about{ position: relative; margin:0px; padding:0px; }

.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:40px 0px 0px 0px;background-size: 100% auto; background-position:0px top;}   
}
.block {width:50%; height: auto;margin: 0; padding: 2vw 2vw; position: relative; z-index: 9;}
@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;   }
.block-txt p {   margin-bottom: 10px; 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; }
.post-btn{ margin-top:30px; }
@media (max-width:840px) {
.block-txt{ margin:50px 0px; padding: 0px;}   
}
@media (max-width:767.98px) {
.block-txt{margin:0px 0px 50px 0px;  padding: 0px;}   
}
@media (max-width:320px) {
.block-txt{  padding: 0px 20px;}  
}

.block-pic {width:50%; height: auto;margin:  auto; padding:0px;  position: relative;  }
 @media (max-width: 992px) {
.block-pic {width:100%; height: 420px; order: 2;  }
}
@media (max-width: 767.98px) {
.block-pic {width:100%; height: 360px; }
}
 
 
.imgBox{ display: flex; flex-wrap: wrap; justify-content: center;align-items: center;  position: relative}
.one { max-width: 540px;margin:auto;  -webkit-animation: slide_up_down 2s ease-in-out infinite alternate both; animation: slide_up_down 2s ease-in-out infinite alternate both}
.one  img { display: block; border-radius: 10px;  width: 100%; box-shadow:0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);}
.choose-us-img { position: absolute; left:5%;  top:-15%;  width: 150%; height: 150%;  max-height: none;z-index: -1; -webkit-animation: rotate-center 100s linear infinite both;  animation: rotate-center 100s linear infinite both; }
 /*.skewed-bg*/
.skewed{ background-color: #e7364b}
.skewed-bg { padding:100px 0px 150px 0px; transform: skew(0deg, -7deg); margin-top: 100px;  background:#010c3d; box-shadow: inset 0 0 100px rgba(255,255,255,.25);}
.skewed-bg .content { transform: skew(0deg, 7deg); text-align: center;}
.skewed-bg .content .title { padding-top: 100px; font-weight: normal;}
.skewed-bg .content .title-text { width: 60%; margin: 25px auto; color: #d6d2d0;}
  .background-3 { background-image: linear-gradient(#8b9da9, #fff6e4); box-shadow: inset 0 0 100px hsla(0,0%,0%,.3); }
@media (max-width:840px) {
.skewed-bg .content .title-text { width: 90%; }
}
/**  ----------------------------------------
 * animation rotate-center
 * ----------------------------------------*/

.rotate-center { -webkit-animation: rotate-center 100s linear infinite both; animation: rotate-center 100s linear infinite both; }
 @-webkit-keyframes rotate-center {
  0% {  -webkit-transform: rotate(0); transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes rotate-center {
  0% { -webkit-transform: rotate(0); transform: rotate(0); }
  100% {  -webkit-transform: rotate(360deg); transform: rotate(360deg); } 
}

/* --- 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); } 
}

/* --- animation slide_down_up  ------------- */
 .slide_down_up { -webkit-animation: slide_down_up 1.7s ease-in-out infinite alternate both; animation: slide_down_up 1.7s ease-in-out infinite alternate both; }
 @-webkit-keyframes slide_down_up {
	0% { -webkit-transform: translateY(20px); transform: translateY(-20); }
	100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes slide_down_up {
	0% {  -webkit-transform: translateY(20px); transform: translateY(20px); }
	100% { -webkit-transform: translateY(0px); transform: translateY(0px); } 
}




.card-box{ width: 100%; height: 100%;  } 
 

.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:#010c3f;  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 ;  }	
}
@media (max-width:767.98px) {
.bg-end-background {  background-position:left bottom;  background-attachment:local;  }
}

.promiseArea { padding: 50px 0px;  position: relative; overflow: hidden}
.promiseArea  strong{color:#0199ff;}
.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 .rightBox {  width: 100% ; max-width: 100%;  margin-bottom: 140px }
.promiseArea .leftBox{   width: 100% ; max-width: 100%; margin-bottom: 40px }
}
 
 
 
@keyframes animate-pulse{
0%{ box-shadow: 0 0 0 0 rgba(255,109,74,0.7), 0 0 0 0 rgba(255,109,74,0.7); }
40%{ box-shadow: 0 0 0 20px rgba(255,109,74,0.0), 0 0 0 0 rgba(255,109,74,0.7);  }
80%{ box-shadow: 0 0 0 20px rgba(255,109,74,0.0), 0 0 0 30px rgba(255,109,74,0); }
100%{ box-shadow: 0 0 0 0 rgba(255,109,74,0.0), 0 0 0 30px rgba(255,109,74,0);     }
}

 
/**
 * ----------------------------------------
 * 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); }
}

@-webkit-keyframes rotateCenter {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);}
100% {  -webkit-transform: translate(-50%, -50%) rotate(360deg);  transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotateCenter {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);  }
100% {-webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
}
@-webkit-keyframes rotateCenter2 {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg);  }
100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); }
}
@keyframes rotateCenter2 {
0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%, -50%) rotate(-360deg); transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes growAndFade {
0% { opacity: 0.75;  transform: scale(0);  }
100% {  opacity: 0; transform: scale(1); }
}
 
 
 
 /***** time  *****/
/*------------------*/
 .milestone-block{  padding: 100px 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 #091b48; content:""; margin: 0 auto; position: absolute; top:46%; left: 0; right: 0; bottom: 0; width: 85%;  z-index: -1;}
.time-nav li{ width: 100%;  }
.nav-item { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: flex-start; width:100px; height: 100px; margin: auto; position: relative}
 
.nav-item:before  { content: "";  -moz-transition: -moz-transform 0.2s ease-in; -o-transition: -o-transform 0.2s ease-in; -webkit-transition: -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in;  -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);  -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: #0a1b48;    display: block; margin: 0.5em 0.5em 0.5em -0.5em; position: absolute;  top: auto;  left: 50%; bottom:36px;   width: 1em; height: 1em;  border-radius: 3px;}

.nav-item:hover{color:#3064a5;}
.nav-item p{ font-size:1.375rem; color:#091b48; font-weight: 700;margin:-50px auto auto auto; }
.time-nav .slick-current .nav-item:before {  background-color:#e7364b;   }
.time-nav .slick-current .nav-item p{color:#e7364b; }
.time-nav .slick-prev,  .time-nav .slick-next{ top:14%; width: 60px; height: 60px;  border: solid 3px rgba(0,0,0,.1);  }

.time-inner{ width: 70%; margin: 20px auto; padding:20px; } 
.time-inner p{font-size:1.175rem; line-height: 2rem;  color:#091b48; font-weight: 700; }


@media screen and (max-width: 767.98px) {
.time-inner{ width: 100%;padding:20px 0px; } 	
.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;}
}
  
 

 .box_container .text, .box_container { font-size: 60px; font-weight: 900; line-height: 200px; text-transform: uppercase;  text-align: center; color: rgba(19, 149, 186, 0); border-radius: 50%;}
.box { background-image: transparent; height: 30vh; width: 30vw; position: relative;  display: flex; align-items: center; justify-content: center; box-sizing: border-box;}
[class^='ci'] { border-radius: 50%; height:30vh;  width: 30vh; mix-blend-mode: screen; position: absolute;}
.box_container { color: rgba(19, 149, 186, 0); margin: 40px auto 0 auto;}


.circle1 {  background-color: rgba(231, 54, 75, 1);-webkit-animation: circle1 4s ease infinite forwards;animation: circle1 4s ease infinite alternate;}
.circle2 {  background-color: rgba(13, 60, 85,1);-webkit-animation: circle2 4s ease infinite forwards;animation: circle2 4s ease infinite alternate ;}

.box_container .text_merge {  width: 400px; height: 160px; margin-top: 100px; font-size: 50px; line-height: 80px; text-align: center; color: white;  z-index:2;   -webkit-animation: text_02 5s infinite alternate ease-in; animation: text_02 7s infinite alternate ease-in;}
.text_merge { background: rgba(19, 149, 186, 0); -webkit-animation: text_02 4s infinite alternate ease-in; animation: text_02 4s infinite alternate ease-in;}
.text {margin-top: 50px;background: rgba(19, 149, 186, 0);  -webkit-animation: text_01 4s infinite alternate ease-in; animation: text_01 4s infinite alternate ease-in;}


@keyframes text_01 {
100% {  color: rgba(19, 149, 186, 0); }
60% {color: rgba(19, 149, 186, 0);}
0% {color: white; }
}
@-webkit-keyframes text_01 {
  100% { color: rgba(19, 149, 186, 0); }
  60% {color: rgba(19, 149, 186, 0);}
  0% { color: white; }
}

@keyframes text_02 {
  0% { color: rgba(19, 149, 186, 0);  }
  60% {color: rgba(19, 149, 186, 0);}
  100% { color: white; }
}
@-webkit-keyframes text_02 {
  0% { color: rgba(19, 149, 186, 0); }
  60% {color: rgba(19, 149, 186, 0);}
  100% { color: white; }
}

/*Keyframes*/ 
/*>>>>>>>>>>>>>>>>>>>>>>>>C1>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*---------------------------------------c1-blue-(dev)-*/
@-webkit-keyframes circle1 {
  from { transform: translate(-80%, 0%); }
  to {  transform: translate(0, 0); }
}
@keyframes circle1 {
  from { transform: translate(-80%, 0%); }
  to { transform: translate(0, 0); }
}
 /*>>>>>>>>>>>>>>>>>>>>>>>>C3>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*---------------------------------------c3-pink-(data)*/
@-webkit-keyframes circle2 {
  from { transform: translate(80%, 0%); }
  to { transform: translate(0, 0); }
}
@keyframes circle2 {
  from { transform: translate(80%, 0%);  }
  to { transform: translate(0, 0); }
}
@keyframes fade {
  0% {  opacity: 0 }
  30% { opacity: 0 }
  100% { opacity: 1 }
}

/*R&D*/
.rnd-section-1{ padding: 80px 0;}
.rnd-section-2{ padding: 50px 0;}

.rnd-section-1 .rnd-pic{ text-align: left; position: relative;}
.rnd-section-1 .rnd-pic img{ border-left: 5px solid #e8334a; }
.rnd-section-1 .rnd-pic .deco-txt{ font-size: 70px; color: rgba(256,256,256,.4); -webkit-text-stroke: 2px #e8334a; position: absolute; right: 0;bottom: 0;z-index: 2; font-weight: 600;}
.rnd-section-1 .rnd-txt {  width: 70%; margin-left: 30%; margin-top: 30px; }
.rnd-section-2 { background: #e6e6e6 url("../images/line-w.png") no-repeat -30% -30% / 60% 60%; position: relative; }
.rnd-section-2 .rnd-pic{ text-align: right; }
.rnd-section-2 .rnd-pic img{ border-right: 5px solid #e8334a; }
.rnd-section-2 .rnd-txt { twidth: 70%; margin-right: 30%; margin-top: 30px; }

@media screen and (max-width: 992px) {
.rnd-section-1{ padding: 50px 0;}
.rnd-section-2{ padding: 50px 0;}    
.rnd-section-1 .rnd-txt,.rnd-section-2 .rnd-txt {  width: 100%; margin-left: 0%; }
}
@media screen and (max-width: 768px) {
.rnd-section-1 .rnd-pic .deco-txt{ font-size: 36px;-webkit-text-stroke: 1px #e8334a;}
}
@media screen and (max-width: 480px) {
.rnd-section-1 .rnd-pic .deco-txt{ font-size: 24px;}
}

/*esg*/
.esg-section-1{display: flex;flex-wrap: wrap;position: relative; padding: 80px 0 12%;}
.esg-section-1::after{content: "";display: block; width: 2085px; height: 1122px;background: url("../images/line-g.png"); position: absolute; top: 0; left: 50%;transform: translateX(-50%); z-index: -2;}
.esg-section-1 .esg-pic{ width: 50%; max-width: 540px;margin: 0 auto; }
.esg-section-1 .esg-pic img{ border-radius: 10px;}
.esg-section-1 .esg-txt{ width: 50%; padding: 2vw;}
.esg-section-2,.esg-section-3,.esg-section-4{padding-bottom: 10%;}
.esg-section-3 .esg-con-pic > div{width: calc(50% - 16px); margin-right: 16px; }

.esg-con-txt{ display: flex;flex-wrap: wrap; align-items: flex-end; margin-bottom: 30px; }
.esg-con-txt .esg-tit{ width: 45%; padding-right: 3%; border-right: 2px solid #e7364a; }
.esg-con-txt .esg-list{ width: 55%; padding: 0 0 0 3%; }
.esg-con-txt .esg-list ul li{ font-family: 'Noto Sans TC','Microsoft JhengHei', '微軟正黑體', sans-serif;  }
.esg-con-pic { display: flex;flex-wrap: wrap;}
.esg-con-pic > div{padding: 20px 0 50px; border-bottom: 2px solid #bababa;position: relative;}
.esg-con-pic > div .esg-pic-tag{position: absolute;right: 0;bottom: -15px;background: #0a1b48;color: #FFF; font-size: 24px;font-weight: 600;padding: 5px 20px;}

.esg-section-5{position: relative;text-align: center;font-size: 24px;font-family: 'Noto Sans TC','Microsoft JhengHei', '微軟正黑體', sans-serif;color: #FFF;font-weight: 500;margin-bottom: 10%;padding: 5% 50px;}
.esg-section-5::before{content: ""; display: block;width: 2000px;height: 300px;background: #e7364a;opacity: .5; position: absolute; right: 5%; bottom: -50px;z-index: -10;}
.esg-section-5::after{content: ""; display: block;width: 2000px;height: 350px;background: #0a1b48; position: absolute; left: 5%; bottom: 0px;z-index: -5;}

@media screen and (max-width: 1200px) {
.esg-section-5{ background: #0a1b48; padding: 5% 20px;}    
.esg-section-5::after{display: none;}   
}
@media screen and (max-width: 992px) {
.esg-section-1{ padding: 50px 0 12%;}  
.esg-section-1 .esg-pic{ width: 100%; margin: 0 auto; order: 2;}
.esg-section-1 .esg-txt{ width: 100%; padding: 0; order: 1;margin-bottom: 30px;}    
.esg-con-txt .esg-tit{ width: 100%; padding-right: 0px;  border-right: none;}
.esg-con-txt .esg-list{ width: 100%; padding: 0px 0 0 0%; } 
}
@media screen and (max-width: 768px) {
.esg-section-3 .esg-con-pic > div{width: 100%; margin-right: 0px; margin-bottom: 20px; }   
}