.cms-main-content{ margin-top: -20px;}
.cms-main-area p{color: #666; font-size: 1.15rem;line-height: 150%; margin-bottom: 15px;}

.cms-block p,.cms-block-txt p  { width: 100%; font-size:1.125rem;  line-height:1.5rem; font-weight: 400;  padding:5px; margin-bottom: 20px;  color:#404040; }
.cms-block p strong{  display: block;  width: 100%; font-size: 1.313rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:400;  padding:5px; margin-bottom: 10px; color: #404040; }

 #cms-main .cms-block-txt p strong{  display: block;  width: 100%; font-size: 1.5rem; line-height: 2rem; letter-spacing: 1.2px; font-weight:700;  padding:5px; margin-bottom: 10px; color: #eb9924;  }

 @media (max-width:767.98px) {
 .cms-block p,.cms-block-txt p  { font-size:1rem;  }
    
}

/*about us----*/
.cms-main-wrap{ width: 100%; padding-right: 10px; padding-left: 10px; max-width: calc((100% - 40px)/12*12 + 40px); margin: auto; height: auto;  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; background-color: transparent;}

/*Milestone*/
.pageAboutMilestone > * > .sameYear:after {top:0!important;}
.pageAboutMilestone > * > .sameYear .itemLabel {color: rgba(244, 156, 0, 0);}
.pageAboutMilestone .itemLabel:before {content: '';display: inline-block;position: absolute;border-radius: 100%;width: 100%;top: 0;left: 0;height: 100%;border: 1px solid #033C77;}
.pageAboutMilestone > * > .sameYear .itemLabel:before {width: 1em;height: 1em;padding: 0;top: 50%;left: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);background: #156fb7;}

.pageAboutMilestone > * {display: -webkit-box;display: -ms-flexbox;display: flex;display: -webkit-flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-flex-wrap: nowrap;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;-webkit-align-items: stretch;overflow: hidden;}
.pageAboutMilestone > * > *:nth-child(1) {position: relative; width: 60px;}
.pageAboutMilestone .itemLabel{position: relative;text-align: center;width: 60px;max-width: 60px;line-height: 60px;padding: 0;margin: 0;font-size: 20px;color: #ec9823;font-weight: normal;}
.pageAboutMilestone .itemLabel:before{content: '';display: inline-block;position: absolute;border-radius: 100%;width: 100%;top: 0;left: 0;height: 100%;border: 1px solid #156fb7;}
.pageAboutMilestone > * > *:nth-child(1):after{content: '';display: inline-block;height: 100%;position: absolute;top: 60px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);width: 1px;background: #156fb7;}
.pageAboutMilestone .itemContent{display: inline-block;width: 100%;word-break: break-word;padding: 1em;font-size: 15px;min-height: 90px;}
.pageAboutMilestone > *:last-child > *:after {display: none; }
/*Awards*/
.cms-main-content2 {position: relative;width: 100%;margin: auto;padding: 0px;}
.cms-wrapper2 {position: relative;margin-right: auto;margin-left: auto;width: 100%;padding-right: 10px;padding-left: 10px;max-width: calc((100% - 40px)/12*12 + 40px);}
.cms-coach {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;width: 100%;max-width: 1200px;justify-content: flex-start;position: relative;padding: 100px 0px;margin: 0 auto;}
.cms-coach li {display: inline-block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgb(0 0 0 / 0%);position: relative;}
.cms-coach li {list-style: none;width: calc( 100%/3 - 50px );margin: 0px 25px 100px 25px;}
.cms-coach li:before {content: '';position: absolute;border: #d70749 solid 4px;top: 8px;right: 0;bottom: 0;left: 0;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: top, right, bottom, left;transition-property: top, right, bottom, left;}
.cms-coach li figure {width: 100%;max-width: 100%;margin: auto;display: block;position: relative;z-index: 0;height: 0;padding-bottom: 132.87%;}
.cms-coach li figure > div{top: 0;left: 0;right: 0;bottom: 0;position: absolute;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.cms-coach li figure > div > img{max-height: 100%!important;width: auto;}
.cms-coach li > div {width: 90%;padding: 5px;background: #d70749;margin-top: -50px;position: relative;z-index: 2;-moz-transform: skew(-15deg, 0deg);-o-transform: skew(-15deg, 0deg);-ms-transform: skew(-15deg, 0deg);-webkit-transform: skew(-15deg, 0deg);transform: skew(-15deg,0deg);}
.cms-coach li h3 {margin: 0px auto;color: #f7ffcb;font-size: 1.313rem;font-weight: 400;text-align: center;}
.cms-coach li p {margin: 0px;color: #fff;text-align: center;font-weight: 500;}
.cms-coach li:hover:before, .cms-coach li:focus:before, .cms-coach li:active:before {top: -8px;right: -8px;bottom: -8px;left: -8px;}
 @media (min-width:1200px) {
.cms-main-wrap{  padding-right:0px; padding-left: 0px;max-width: 100%; }
}
 
 @media (max-width: 1024px) {
 .cms-main-wrap{padding: 0px;}    
     
}
 .cms-main-about{position: relative; margin:0px auto; padding:80px 0px; width: 100%;display: flex; flex-wrap: wrap; z-index: 0; background-image: url("../images/about/item-bg.jpg");background-repeat: no-repeat; background-size:auto 100%; background-position: left top;   }
.cms-block {width:54%; height: auto;margin: auto; padding:15px;  display: flex; flex-wrap: wrap; align-items: center; position: relative;z-index: 1 }
.cms-block-title{width:auto; margin:0; padding: 0px; display: flex; flex-wrap: wrap; position: relative; z-index: 1;}
 

.icon-list{width: 100%; margin:0px auto; padding:50px 0px; display: flex; flex-wrap: wrap;}
.icon-list li{width:calc(100%/3); margin:0px; display:flex; flex-wrap: wrap;  align-content: flex-start; transition: all 0s ease 0s;position: relative; } 
.icon-list li figure { width:64px; height: 64px; display:flex; flex-wrap: wrap; justify-content: center;  margin: 0px;padding: 0px; border-radius:15px;background-color: #ec9722;  }
.icon-list li figure img{width: 100%;  margin:0px auto; padding:10px;}
.icon-list li figcaption{width:calc(100% - 84px); margin:0px; padding:0px 10px; }
.icon-list li h3 { width: 100%; font-size:2.75rem; line-height: 2.75rem; font-weight:600;  color:#ec9722;overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; position: relative; }  
.icon-list li h3 span{font-size:1.5rem; position: absolute; top:-10px;}
.icon-list li p {  width: 100%; font-size: 1rem; line-height: 1.15rem; font-weight:700; color:#ec9722;overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; position: relative; }  


 @media (max-width: 1024px) {
.cms-block {width: 80%; margin: 0px auto; padding:0px 25px; }
.cms-block-pic {width: 100%; margin: 0px auto;  padding: 0px;}  
}
@media (max-width:768px) {
.cms-main-about{ padding:0px 25px 40px 25px; }
.cms-block {width: 100%; margin: 0px auto; padding:0px; }
.cms-coach li {margin: 0px 0px 100px 0px;width: 70%;}
.cms-coach {justify-content: center;align-items: center;}
    .cms-coach li:before{top:0px; left: -12px; right: -12px; bottom: -4px;}
 }
 @media (max-width:767.98px) {
.icon-list{ padding:0px; }    
.icon-list li{width:100%; margin:0px;  } 
 .icon-list li h3 {   margin:5px 0px; font-size:2.5rem;  }      
 .icon-list li p {   margin:0px; font-size: 1rem;   }      
}
.cms-block-txt{width:100%; margin:0; padding:20px 0px; display: flex; flex-wrap: wrap;align-content: center;  position: relative; z-index: 1;}
@media (max-width:768px) {
 .cms-about-card .item-2{ width:60%; max-width: 100%; margin:80px 150px 0 0;  }
}
/*-------------------*/
/***** bg *****/
/*------------------*/
.cms-box-block{ width: 45%; position: relative; z-index: 1}
.item-pic{width: 100%; position: relative;}
.item-pic figure{ width:100%;  height:auto ; margin:auto; position:relative;z-index: 1;}
.item-pic figure img{  width:100%; height: auto; position:relative;z-index: 1;}
.item{width: 80%; position: relative;}
.item-2{width:55%; left:-8%;top:22%; position: absolute;box-shadow: 0px 5px 8px rgba(0,0,0,.3);}
.item-txt{width:30%;display: flex; flex-wrap: wrap; align-self: center; flex-direction: column;}
.bg-box-line {background-image:url("../images/index/bg-dot.svg"),url("../images/index/bg-dot.svg"); background-attachment: fixed,scroll; background-position:left 30%,60% bottom;  background-repeat: no-repeat; background-size: auto 40%, auto 80%;}
.bg-about-2{background:url("../images/about/a-2-2.jpg") no-repeat left bottom #f9f9f9; background-size:auto 100%;  }
.bg-about-end {background:url("../images/about/a-1-1.jpg") no-repeat right top #fff; background-size:auto 100%;  position: relative;z-index: 0;}
.bg-who {background:url("../images/about/who-2.jpg") no-repeat left top #456781; background-size:auto 100%;  position: relative;z-index: 0;}
@media screen and (max-width: 1024px) {
.bg-who {background:url("../images/about/who-2-m.jpg") no-repeat left bottom #456781; background-size:auto 70%;  position: relative;z-index: 0;}
}
@media screen and (max-width:767.98px) {
.bg-who { background: #456781; }
}
.cms-box-wrap{ margin: 0px auto; padding:100px 0px; display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index:0; }
.cms-box-right{width: 50%; margin: 0px 0px 0px 5%; padding:20px 0px; display: flex; flex-wrap: wrap;justify-content: flex-end; z-index: 3; }
.cms-box-left{ width:45%;  margin:0px; padding:0px 20px; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;position: relative;z-index: 1; }
.cms-box-all{ width:50%;  margin:0px auto; padding:0px 20px; display: flex; flex-wrap: wrap; align-items: center;position: relative;z-index: 1; }
@media screen and (max-width: 1180px) {
.cms-box-left{ width:55%;  }
.cms-box-right{ width: 40%; margin-top: 5%; position: relative;}
.cms-box-right .item-2{  top:62%; }
.cms-box-all{ width:60%; margin: 0 0 0 30%;  }
}
@media screen and (max-width:768px) {
.cms-box-wrap{ padding:30px 0px 50px 0px; }
.cms-box-left{ width:100%; padding: 0px; }
.cms-box-right{ width:100%; padding: 0px;  }
.cms-box-all{ width:70%; margin: 0 0 0 30%;  }    
.cms-box-right .item-2{  top:32%; left:2%; }
.item{width: 60%; }
}

@media screen and (max-width:767.98px) {
.cms-box-all{ width:100%; margin: 0 auto; padding: 0px;  }    

}

.cms-box { width:100%; height: auto;  margin:10px 0px;   padding: 0; display: flex;  flex-wrap: wrap;   flex-direction:column; position: relative; }
.cms-box:after{ content: ""; width:100%; height: 2px;  margin:0px;   padding: 0; background:#f1f1f1;  position: relative; }
.cms-box h3{ width: 100%; margin:0px 0px 5px 0px; font-size: 1.313rem; font-weight:600; color: #0070bd;  }
.cms-box p{ width: 100%; margin:0px auto; font-size: 1rem; font-weight: 400; line-height: 1.875rem;    }
@media screen and (max-width: 1024px) {
 .cms-box p{  line-height: 1.5rem;    }   
}

.cms-box-wrap-2{ width:100%; padding:0px; margin:0 auto;  display: flex; flex-wrap: wrap; justify-content: center;position: relative; z-index: 0;  background: #fff;}
.cms-box-right-2{width:50%; margin:0px; display: flex; flex-wrap: wrap; justify-content:flex-start;  align-items: center;z-index: 0;  }
.cms-box-left-2{ width:50%; margin:0px;  padding:40px 30px 30px 100px;display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;position: relative;z-index: 1; background: #fff; }
@media screen and (max-width: 1280px) {
.cms-box-left-2{  padding:0px 30px 30px 100px;display: flex; flex-wrap: wrap;justify-content: flex-start;align-self: center; position: relative;z-index: 1; background: #fff; }    
}


@media screen and (max-width: 1024px) {
.cms-box-left-2{width:60%;padding:0px 30px 30px 30px;}    
.cms-box-right-2{width:40%;padding:50px 0px;align-self: center; }    
}
 
@media screen and (max-width: 767.98px) {
.cms-box-left-2{width:100%;padding:0px 30px 30px 30px;order: 2; }    
.cms-box-right-2{width:100%; padding:20px;align-self: center; }    
   
}
.cms-cate { width: 100%; padding:40px 15px;   position: relative;display: flex; flex-wrap: wrap; }
.cms-cate li{ width:calc(100%/2 - 100px);  padding:0px;  margin:50px; position: relative; list-style: none;}
.cms-cate li figure{clip-path: polygon(0 14%, 100% 0, 100% 88%, 0% 100%);}
.cms-cate h3{ width:auto; margin: 0px;padding-left: 30px; display: block; color:#006fbc; font-weight: 700; position: relative;}
.cms-cate h3:before{  content: "";  left: 0px; bottom: 12px; width: 8px; height: 8px; position: absolute; background: #eb9924;border-radius:99rem; }
.cms-inner{ width: 100%;padding:5px  10px; display: flex; flex-wrap: wrap; border-bottom: solid 1px #f1f1f1;}
.cms-inner-title{ width: 35%;  border-right: solid 1px #f1f1f1;  position: relative;  }
.cms-inner-info{width: calc(65% - 10px); padding-left: 10px;}
@media screen and (max-width: 820px) {
 .cms-cate { padding:40px 0px; }
 .cms-cate li{ width:calc(100%/2 - 30px);  padding:0px;  margin:50px 15px;  }  
}
@media screen and (max-width: 767.98px) {
 .cms-cate li{ width:calc(100% - 30px);}  

}
 /*-------------------*/
/***** service *****/
/*------------------*/
.cms-service-box { width:70%;  margin:20px auto;   padding:0px 20px; display: flex; flex-wrap: wrap; align-items: center;position: relative;  z-index: 1;}
.cms-service-box .item{ width: 50%; max-width: 100%; margin:0px; padding: 30px 0px 40px 0px; height: auto }
.cms-service-box .item-2{ width: 50%; max-width: 100%; margin:0px; padding: 80px 0px 0px 0px;  display: flex; flex-wrap: wrap; align-items: center;}
.cms-service-box p{ font-size: 0.9rem; color: #333;}

/*-------------------*/
/***** about-team*****/
/*------------------*/
.about-team{ padding: 40px 20px; display: flex; flex-wrap: wrap; justify-content: center;position: relative;z-index: 0;  }
.about-team .cms-title-v{height:50%;}
.about-team-column:nth-child(odd) {  width: calc(15% - 11.66667px); max-width: calc(15% - 11.66667px); -webkit-box-flex: 0; -ms-flex: 0 0  calc(15% - 11.66667px); flex: 0 0  calc(15% - 11.66667px);}
.about-team-column:nth-child(2n) {  width: calc(85% - 8.33333px); max-width: calc(85% - 8.33333px);  -webkit-box-flex: 0; -ms-flex: 0 0 calc(85% - 8.33333px);  flex: 0 0 calc(85% - 8.33333px); margin-left: 20px;}

.about-team-main { position: relative; margin-top: 17px; display: flex; flex-wrap: wrap;}
.about-team-main-row {  width: calc(50% - 8.33333px);   position: relative; margin-bottom: 33px; padding-left: 30px;}
.about-team-main-row-full {  width: calc(85% - 8.33333px);   position: relative; margin-bottom: 33px; padding-left: 30px;}

.about-team-main-name { font-size: 1.135rem; font-weight:400;  line-height: 1.5; letter-spacing: normal; position: relative; }
.about-team-main-name:before {  width: 12px;  height: 12px;  content: "";  position: absolute; left:-20px; top:8px; background:url("../images/icon/square.svg") no-repeat left top; background-size: 12px;   }
.about-team-main-name+.about-team-main-summary { margin-top: 11px;}
.about-team-main-summary { font-size:0.9375rem; font-weight: 400; line-height: 1.75; letter-spacing: 1px; color: #666;}




/*-------------------*/
/***** about-item*****/
/*------------------*/
.about-item{padding: 80px 20px;   }
.about-item-summary { width: 100%;display: flex; flex-wrap: wrap; margin: 0px;padding: 0px; }
.about-item-summary li{ width: auto; padding:0px; margin: 5px 2px; list-style: none; font-size:0.875rem; font-weight: 400; line-height: 1.75;  color: #666;}
.about-item-summary li:after{ content: " / " ; display: inline-block; margin-left: 5px;}
.about-item-column{ width: 80%; margin: auto; padding: 20vh 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-self: center;}
 

/**banner=================================*/
.cms-item-banner { width: 100%; max-width:100%; height: auto; margin:0px auto; padding:0px; position: relative; z-index: 2;  }
.cms-item-banner .imgSliderBox {  width: 100%;  display: flex; flex-wrap: wrap;justify-content: center; }
.cms-item-banner img{ display: block; width: 100%; max-width: 100%;  height: auto; position: relative;  -webkit-animation: zoom 6s ease-in-out; -moz-animation: zoom 6s ease-in-out; -o-animation: zoom 6s ease-in-out; -ms-animation: zoom 6s ease-in-out; animation: zoom 6s ease-in-out;animation-iteration-count:infinite;   -webkit-animation-duration: 6s; animation-duration: 6s;  animation-direction:alternate;}
.cms-item-banner .cms-sloga {   position: absolute;  width: 100%;  display: flex; flex-wrap: wrap; justify-content:center; align-self: flex-start;  z-index: 9; }   
.item-v{ width:auto; padding: 20px 30px;  }
.item-v-name{  width: auto; height: 100%; margin:0px 5px 0px 20px; font-size:2rem; line-height:4rem; letter-spacing: 10px; font-weight:400;  word-wrap:break-word;word-break:keep-all;font-family: 'Noto Serif TC', serif;}
.item-summary{  width: auto; height: 100%; margin:0px 5px; padding: 0px; list-style: none; }
.item-summary li{ font-size: 1.063rem; margin:0px 15px; letter-spacing: 3px; }

/*----------------------------------------/
timeline
----------------------------------------*/
.cms-about-time {padding:10vh 0; position: relative;z-index: 0;}
.timeline { position: relative; max-width: 1160px;  margin: 0 auto;  z-index:1;}
.timeline::after {  content: '';  position: absolute; width: 1px; background-color: #000; top: 0; bottom: 0;  left: 50%;  margin-left: -3px; z-index:1;}
.timewrap { padding: 10px 40px; position: relative; background-color: inherit; width: 50%;z-index:9;}
.timewrap::after { color: #000; margin:0px;  content: attr(data-year)' '; position: absolute; font-weight:700;  width: 66px; height: 66px; right: -33px; background-color:#fff;  border-color: #000; border-style: solid;  border-width:1px; top: 15px; border-radius: 50%; z-index:9; line-height: 65px; text-align: center;}
.circlecontainer { color: #b69472; content: " "; position: absolute; width: 66px; height: 66px; right: -33px; background-color: #774e36; border-color: #b69472; border-style: solid;  border-width:1px; top: 15px;  border-radius: 50%;  z-index:99;}
.left { left: 0; text-align:left!important;}
.right { left: 50%; text-align:left; }
.right::after { left: -36px;}
.time-content { color:#774e36; padding: 20px 30px; position: relative; border-radius: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; flex-direction: column; }
#cms-main .time-content h3{ width: 100%; margin: 5px 0px!important; font-family: 'Noto Serif TC', serif; font-weight: 700;color: #000; }
#cms-main .time-content p{ width: 100%; margin: 5px 0px!important;}
.time-content figure{ margin: 0 auto 20px auto; }
.contentboxr { color:#b69472; padding: 20px 30px; background-color: #181818; position: relative; border-style: solid;  border-left: 1px; border-left-color:#181818; border-width:1px; left:-43px;  z-index:5; line-height:1.2;}
.containerbox { padding: 10px 40px; position: relative; background-color: inherit;  width: 50%;}
.contentboxr::after { display: none !important; visibility: hidden;}
@media screen and (max-width: 600px) {
.timeline::after { left: 51px; }
.flex-container { display:none; visibility:hidden; }
.timewrap {  width: 100%; padding-left: 70px; padding-right: 25px; }
.contentboxr { color:#b69472; padding: 10px 20px; background-color: #181818;  position: relative; border-style: solid; border-left: 0px; border-left-color:#181818; border-right: 0px; border-right-color:#181818; width:330%;}
.timewrap::before { left: 60px; border: medium solid white; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent;}
.left::after, .right::after { left: 15px; }
.right {  left: 0%; text-align:left;}
.left { text-align:left; }
}

@media screen and (min-width:768px) {
:root { --card-height: 60vw; --card-top-offset: 1em; --numcards: 4; --outline-width: 0px;}
#card_1 { --index: 1;}
#card_2 { --index: 2; }
#card_3 { --index: 3; }
#card_4 { --index: 4;}
#cards { display: grid; grid-template-columns: 1fr;} 
.card { /*position: sticky; top: 0;*/ border: 1px solid rgba(255,255,255,1)!important;   border-radius: 0px!important;}
    
}
@media screen and (max-width:430px){

}