.main-area .top{margin-top: 0px; background-image: linear-gradient(to top,#f4e5db 0%, #fcf8f6 30%, #fcf8f6 100%);}
 .main-area.top .main-content{margin-top: 0px; padding: 0px}
 .main-area::before { content: ""; position: absolute; background-image: url(../images/index/black_bg.png); background-position: center;  background-size: auto; background-repeat: repeat; opacity: 0.75;  width: 100%; height: 100%;  top: 0; left: 0; z-index: -1; pointer-events: none;}
 
/*about*/
.main-about{ position: relative;z-index: 2; margin:0px; padding:0px 0px 100px 0px; display: flex; flex-wrap: wrap;justify-content: space-between; }
.main-about .animated {  -webkit-animation-duration: 1.5s; animation-duration: 1.5s; transition: opacity 0.5s ease 0.3s;}
.main-about .bg-position {background-size:60% auto; background-position:right bottom;background-color: #000; }

@media (max-width: 1366px) {
.main-about{ padding:60px 0px;}
}
@media (max-width: 1280px) {
.main-about{ padding:60px 0px 60px 30px;}
}
@media (max-width: 1180px) {
.main-about{ padding:60px 0px 0px 30px;}
}
@media (max-width:767.98px) {
.main-about{ padding:60px 30px 180px 30px; }
 .main-about .bg-position {   background-size:100% auto; }   
 }


@media (max-width:320px) {
.main-about{ padding:40px 20px; }
}

.block {width:50%; height: auto;margin: 0; padding:0px;  display: flex; flex-wrap: wrap; flex-direction: column; position: relative;z-index: 2 }
.block p,.block-txt p{ width: 100%; font-size:1.375rem; font-size: min(max(3.5vw, 1.15rem), 1.375rem); line-height:2.75rem; font-weight: 400;  padding:5px; margin-bottom: 20px;  color:#3f3a39;  }
.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: #3f3a39; }
 
.block-txt{width:50%; margin:60px auto; }
.block-box{position: relative; width: 100%;height: auto;padding:20px;  border: 1px solid  rgba(223, 212, 199, 0.35); }
.block-box::before { content: ""; position: absolute;  width: calc(100% + 20px); height:  calc(100% + 20px); top: 0; left: -10px; right: 0; bottom: 0;z-index: -1;  margin: auto; border: 1px solid rgba(223, 212, 199, 0.5); }
 @media (max-width:1520px) {
.block-txt{width:75%; margin:60px auto; }
}
@media (max-width:1360px) {
.block .title {margin-top: -10%; }
}
@media (max-width:991.98px) {
  .block {width:70%; }  
}
 
@media (max-width:767.98px) {
  .block {width:100%; margin: auto;}  
 .block-box{ padding:20px 10px;  }
   
}
 @media (max-width:320px) {
 .block {padding-bottom: 100px;}  
  .block-txt{width:100%; margin:60px auto; }
 .block p,.block-txt p{ font-size:1rem; line-height:1.75rem;  }
    
}
.pointbox {display: flex; justify-content: space-between;  list-style: none; margin:50px auto; padding: 0px; position: relative;}
.pointbox li{width: calc(100%/3 - 60px);margin: 0px 30px; padding: 0px; position: relative;  }
.pointbox li::after {content: "";width:50px; height:24px; top:35%; left:calc(100% - 10px); position: absolute; z-index: 9;   background: url("../images/index/ar-next.svg") no-repeat center center; background-size: cover;  }
.pointbox li:last-child::after {  display: none; }

.pointbox .item {  width: 100%; margin: auto;  padding: 0px; display: flex; flex-direction: column; justify-content: space-between;align-content: flex-start; }
.pointbox .item .mask1 {width:  100%; height: 100%; position: relative;}
.pointbox .item .mask1::before {content: "";width:100%; height: 100%;position: absolute; z-index:2; left: 0px; top:0px; background: url("../images/index/mask.svg") no-repeat center center; background-size: cover;  }
.mask1 img {vertical-align: middle;  border: none; max-width: 100%;  width: initial; height: initial; position: relative;  }
.pointbox .item h3 { font-size: 2rem; font-weight: 600;  letter-spacing: 1px; line-height: 1.5; color:#866c5b;}


@media (max-width:767.98px) {
.pointbox { flex-direction: column;}
.pointbox li{width: calc(100% - 60px);margin: 30px auto;  }
.pointbox li::after {content: "";width:50px; height:24px;top:auto; bottom:-13%; left:35%; transform: rotate(90deg)}
 .pointbox .item h3 { font-size: 1.125rem; }
   
}


.grid-title{width:20%; }
.grid-txt{width:65%; padding: 10px 100px 10px 0px; }
.grid-txt p{ font-size: 1.125rem; }

.grid-btn{width:15%; align-items: center;}
.grid-product{width:100%;margin: 30px auto; }

 
.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(31.66667% - 11.66667px); max-width: calc(31.66667% - 11.66667px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(31.66667% - 11.66667px); flex: 0 0 calc(31.66667% - 11.66667px);}
.about-team-container >.about-team-column:nth-child(2n) {  width: calc(68.33333% - 8.33333px); max-width: calc(68.33333% - 8.33333px); -webkit-box-flex: 0; -ms-flex: 0 0 calc(68.33333% - 8.33333px); flex: 0 0 calc(68.33333% - 8.33333px); margin-left: 20px;}
.about-team-main-row { position: relative; margin-bottom: 63px;  }
.about-team-main-summary { padding-left: 20px;  font-size: 1.125rem; font-size: min(max(3.5vw, 1rem), 1.125rem);line-height: 1.875rem; font-weight: 400; letter-spacing: 1px;margin-top: 11px;}  

.about-team-main-name { margin-bottom: 20px;padding-left: 20px; font-size: 26px; font-weight: 700; line-height: 1.5; letter-spacing: normal; color: #000;}
.about-team-main-name:before { width: 10px; height:10px; content: "";  position: absolute; left:0px; top:10px; margin-right: 8px;  margin-bottom: 4px; background-color:#866c5b; border-radius: 3px; transform: rotate(45deg);}
.about-team-image{position: relative;}
.about-team-main-row:before {content: ""; display: block; top: 0px;left:5px; width: 1px;height: calc(100% + 80px);  background-color:rgba(134,108,91,.3);  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 0px 30px 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:  20px; }
}
@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 { position: relative;  display: block;  padding:40px 0px; }
@media (max-width: 1280px) {
.about-team { margin-bottom: 0px;}   
}



.shadows-wrap {  width: 100vw; height: auto; display: flex; align-items: center; justify-content: center;}
.shadows { position: relative; width: auto; text-transform: uppercase;  text-shadow: -15px 5px 20px #866c5b; color: #fff; font-weight: 700; letter-spacing: -0.1em;font-family: "Arial", sans-serif; -webkit-user-select: none; -moz-user-select: none;  -ms-user-select: none;user-select: none; font-size: 150px;  transition: all 0.25s ease-out;}
@media (max-width:1024px) {
.shadows { font-size: 120px; }
}
@media (max-width:991.98px) {
.shadows { font-size: 100px; }
}
@media (max-width:768px) {
.shadows { font-size: 90px; }
}

@media (max-width:767.98px) {
.shadows { font-size: 48px; }
}
@media (max-width:320px) {
.shadows { font-size: 32px; }
}
/*底圖
----------------------------------------*/
.background{position: relative; width: 100%; height: 40vh; overflow: hidden; padding-top: 100px;text-align: center; }
.background-bg img{ width: 100%; max-width: 100%; height: auto; display: block; margin: auto; -o-object-fit: cover;  object-fit: cover; -webkit-backface-visibility: hidden;  backface-visibility: hidden; transition: all 0.3s; position: relative; z-index: 0;}
@media (max-width:992px) {
.bg-background-fix{background-position: center; background-size: cover;}
}
@media (max-width:768px) {
.background{ height: 400px; }    
}
@media (max-width:767.98px) {
.background{ height: 200px;margin-top: -5%; }  
.bg-background-fix { background-attachment: scroll;  }   
}

.bg-top {padding-top: 140px; background: url(../images/index/bg-01.jpg) no-repeat left 0px; background-size: 100% auto; background-color: #f9f7f4}
.bg-end {padding-bottom: 140px; background: url(../images/index/bg-02.jpg) no-repeat left bottom; background-size: 100% auto;}
@media (max-width:767.98px) {
 .bg-end {padding-bottom: 40px;}
 }
@media (max-width:320px) {
 .bg-end {padding:0px 20px 40px 20px;}
 }


.background-txt {position: absolute; width: 100%;   padding: 0 20px; margin: auto;  -webkit-box-sizing: border-box; box-sizing: border-box;  z-index:2; }
.facilities{ width: 100%; position: relative;}


/*產品清單頁  cms-main-.product-item  
----------------------------------------*/
.product-item { width:100%; margin:0px auto;  padding:0px 10px; display: flex; flex-wrap: wrap; position: relative; }
.product-item li { width:calc(100%  - 16px); margin:20px 8px 0px 8px;   padding:0px;  z-index: 1; list-style: none;  transition: all 0.3s linear 0s; position: relative; border-radius:0px; overflow: hidden; }
.product-item li figure{  width: 100%;height: 0; padding-top: 66.66%; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s ease 0s; }
.product-item li figure img{  border-radius:  0px; overflow: hidden; }
 .product-item .slick-dots{ bottom: -60px;  }
.product-item .slick-dots li{ border-radius: 99rem; overflow: visible; }
.product-item .slick-prev,.product-item .slick-next{ top: 40%; bottom: auto; }
.product-item .slick-prev{left:0px;}
.product-item .slick-next{right:0px;}


 /*service
----------------------------------------*/
.service{ position: relative;z-index: 2; margin:0px; padding:0px 0px 100px 0px; }
.service-box {  width: 100%;  max-width: 950px;  margin: 0 auto;   padding: 50px 0;}
.service .bgimg { max-width: 100%; height: auto;  pointer-events: none;  position: absolute;  z-index: 1;}
.service .bgimg.bg1 {width: 30%; height: auto; top: 0px; left: 0;  bottom: auto; right: auto;}
.service .bgimg.bg2 { width: 30%; height: auto; top: auto; left: auto;  bottom: 0; right: 0;}
.service .decoimg {width: 50%; margin:10% auto; }
.service .bg-wrap{max-width: 100%; height: auto; margin-top: 200px; pointer-events: none;  position: absolute;  z-index: 1;} 
.bg-service {padding-bottom: 140px; background-image: url(../images/index/s-bg.jpg),url(../images/index/s-eg.jpg);background-position: right top,left bottom; background-size: 55% auto, 35% auto; background-color: #f0ebe8; background-repeat: no-repeat,no-repeat;}
  @media (max-width:640px) {
.bg-service { background-size: 105% auto, 55% auto; background-color: #f0ebe8; background-repeat: no-repeat,no-repeat;}
  .service .bgimg.bg2 { width: 50%; }

}

  @media (max-width:320px) {
.service-box {    padding: 50px 20px;}
     
}
.srolling-background{width: 500px; height: 300px; position: absolute; left:0px; } 


 /*odm
----------------------------------------*/

.wrap { width: 100%;  max-width: 1360px; margin: 0 auto; padding-left: 20px; padding-right: 20px;}
@media (max-width: 1440px) {
.wrap { width: 100%;  max-width: 1360px;  margin: 0 auto; padding-left: 30px;  padding-right: 30px;}
}
@media (max-width: 1180px) {
.wrap {  width: 100%; max-width: 1340px; margin: 0 auto;  padding-left: 40px;  padding-right: 40px; }
}
@media (max-width: 767.98px) {
.wrap {  padding-left: 30px;  padding-right: 30px; }
}


/* CSS Document */
 
@-webkit-keyframes tire {
  0% {  -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% {  -webkit-transform: rotate(359deg);  transform: rotate(359deg); }
}
@keyframes tire {
  0% { -webkit-transform: rotate(0deg);  transform: rotate(0deg); }
  100% {  -webkit-transform: rotate(359deg);  transform: rotate(359deg); }
}
@-webkit-keyframes carshow {
  0% { width: 0; }
  100% { width: 100%;}
}
@keyframes carshow {
  0% { width: 0; }
  100% {  width: 100%; }
}
@-webkit-keyframes carmove {
  0% { -webkit-transform: translateY(0px); transform: translateY(0px);}
  25% { -webkit-transform: translateY(1px); transform: translateY(1px);}
  29% { -webkit-transform: translateY(2px); transform: translateY(2px);}
  33% { -webkit-transform: translateY(3px); transform: translateY(3px);}
  47% {-webkit-transform: translateY(0px); transform: translateY(0px);}
  58% { -webkit-transform: translateY(1px);  transform: translateY(1px);}
  62% { -webkit-transform: translateY(2px); transform: translateY(2px);}
  66% { -webkit-transform: translateY(3px);  transform: translateY(3px);}
  75% { -webkit-transform: translateY(1px); transform: translateY(1px);}
  100% { -webkit-transform: translateY(0px); transform: translateY(0px);}
}
@keyframes carmove {
  0% { -webkit-transform: translateY(0px); transform: translateY(0px);}
  25% { -webkit-transform: translateY(1px); transform: translateY(1px);}
  29% { -webkit-transform: translateY(2px); transform: translateY(2px);}
  33% { -webkit-transform: translateY(3px); transform: translateY(3px);}
  47% {-webkit-transform: translateY(0px); transform: translateY(0px);}
  58% { -webkit-transform: translateY(1px);  transform: translateY(1px);}
  62% { -webkit-transform: translateY(2px); transform: translateY(2px);}
  66% { -webkit-transform: translateY(3px);  transform: translateY(3px);}
  75% { -webkit-transform: translateY(1px); transform: translateY(1px);}
  100% { -webkit-transform: translateY(0px); transform: translateY(0px);}
}
 
.process { width: 100%;  position: relative; padding:0px 0px 150px 0;}
@media (max-width: 1180px) {
.process { padding: 40px 0; }
}

@media (max-width: 1180px) {
.process::before {  background-size: auto; }
}
.process .auto-list { width: 100%;  position: relative; margin: 0 auto; padding: 0px; list-style: none;}
.process .auto-box .auto { position: relative;}
.process .auto-box .auto .item-pic { width: auto;}
.process .auto-box {margin-bottom: 100px;}
/*@media (max-width: 1440px) {
.process .auto-box .auto .item-pic {  width: 75%; }
}*/
@media (max-width: 992px) {
.process .auto-box .auto { margin: 30px auto;}    
.process .auto-box .auto .item-pic {  width: 100%; }
}
.process .auto-box .auto .item-pic img {  width: 100%;  display: block;  -webkit-backface-visibility: hidden; backface-visibility: hidden; height: auto;}
.process .auto-box .auto:nth-child(1) .item { max-width: 400px;}
.process .auto-box .auto:nth-child(1) .num {display: none;}
.process .auto-box .auto:nth-child(1) .subtitle { position: relative; margin-bottom: 40px; padding-bottom: 40px; color: #c9a27e;}
.process .auto-box .auto:nth-child(1) .subtitle::before { content: "";  position: absolute;  width: 30px; height: 1px;  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(169, 112, 70)), to(rgb(219, 162, 111))); background-image: linear-gradient(0deg, rgb(169, 112, 70) 0%, rgb(219, 162, 111) 100%); bottom: 0; left: 0; pointer-events: none;}
.process .auto-box .auto:nth-child(1) .item-pic img {  width: 100%; /*width: 290px;*/height: auto; display: block;  -webkit-backface-visibility: hidden;  backface-visibility: hidden;}
@media (max-width: 1024px) {
.process .auto-box .auto:nth-child(1) .item-pic img {width: 260px;}
}
@media (max-width: 992px) {
.process .auto-box .auto:nth-child(1) .item { max-width: 100%;}    

}
@media (max-width: 1180px) {
.process .auto-box .auto:nth-child(1) .item-pic img {width: 100%; max-width: 100%;}    
}

.process .auto-box .auto:nth-child(1) .supply {top: -50px;right: -40px;}
@media (max-width: 1280px) {
.process .auto-box .auto:nth-child(1) .supply { right: -10%;}
}
@media (max-width: 1024px) {
.process .auto-box .auto:nth-child(1) .supply {right: -36%;}
}
 .process .auto-box .auto:nth-child(2) .supply { top: 190px; right: 0px;}
 @media (max-width: 1440px) {
 .process .auto-box .auto:nth-child(2) .supply {  top: 190px; right: 0px;}     
}
 @media (max-width: 1024px) {
 .process .auto-box .auto:nth-child(2) .supply { top: 300px; right: 0px;}     
}
.process .auto-box .auto:nth-child(3) {margin: -50px 0 0 0;}
@media (max-width: 1180px) {
.process .auto-box .auto:nth-child(3) { margin: 30px auto; }
}
.process .auto-box .auto:nth-child(3) .inner {padding: 0 111px 0 0;}
@media (max-width: 1180px) {
.process .auto-box .auto:nth-child(3) .inner {padding: 0;}
}
.process .auto-box .auto:nth-child(4) {padding-top: 500px;}
@media (max-width: 992px) {
.process .auto-box .auto:nth-child(4) {padding-top: 0;}
}
.process .auto-box .auto:nth-child(4) .supply { top: 0px; right: 0px;}
@media (max-width: 1280px) {
.process .auto-box .auto:nth-child(4) .supply { top: 0px; right: 0px;}    
}
.process .auto-box .auto:nth-child(5) .item {max-width: 1060px;position: relative;}
.process .auto-box .auto:nth-child(5) .inner {max-width: 440px;}
.process .auto-box .auto:nth-child(5) .tip {max-width: 555px;width: 100%;padding: 0 20px;}
 
@media (max-width: 640px) {
 .process .auto-box .auto:nth-child(5) .tip {padding: 15px 0;}
}
.process .auto-box .auto:nth-child(5) .tipBox { display: -webkit-box;  display: -ms-flexbox; display: flex;  -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%;}
@media (max-width: 640px) { 
.process .auto-box .auto:nth-child(5) .tipBox { -webkit-box-orient: vertical;  -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}
.process .auto-box .auto:nth-child(5) .supply { top: 0%; right: 0px;}

.process .auto-box .auto:nth-child(6) .supply { top: -10%; left: 0; right: auto;}
.process .auto-box .auto:nth-child(6) {}
@media (max-width: 992px) {
.process .auto-box .auto:nth-child(6) { margin: 0; }
}
.process .auto-box .auto:nth-child(6) .inner { padding: 0 111px 0 0;}
@media (max-width: 1180px) {
  .process .auto-box .auto:nth-child(6) .inner { padding: 0;}
}


.process .auto-box .auto:nth-child(7) .item {max-width: 1060px;position: relative;}
.process .auto-box .auto:nth-child(7) .inner {max-width: 440px;}
.process .auto-box .auto:nth-child(7) .tip {max-width: 555px;width: 100%;padding: 0 20px;}
@media (max-width: 640px) {
.process .auto-box .auto:nth-child(7) .tip {padding: 15px 0;}
}
.process .auto-box .auto:nth-child(7) .tipBox { display: -webkit-box;  display: -ms-flexbox; display: flex;  -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%;}
@media (max-width: 640px) { 
.process .auto-box .auto:nth-child(7) .tipBox { -webkit-box-orient: vertical;  -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}
.process .auto-box .auto:nth-child(7) .supply { top: 20%; right: 0px;}

@media (max-width: 1280px) {
 .process .auto-box .auto:nth-child(7) .supply {top:0px;right:-15%;transform: scale(.95);}   
}

.process .auto-box .auto:nth-child(8) .supply { top:20%; right: auto;left:-10%;}
.process .auto-box .auto:nth-child(even) .item {  margin: 0 0 0 auto;}
@media (max-width: 640px) {
.process .auto-box .auto:nth-child(even) .item {margin: 0;}
}
.process .auto-box .supply { position: absolute; pointer-events: none; z-index: -1;}
@media (max-width: 1280px) {
.process .auto-box .supply {  width: 100%;  margin: 0 auto; left: 0; right: 0;}
}
@media (max-width: 992px) {
.process .auto-box .supply {display: none;}
}

.process .auto-box .supply img { width: 100%; height: auto; display: block; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
.process .auto-box .supply .bk { opacity: .5} 

 
.process .auto-box .supply .gd {position: absolute; width: 100%; height: 0%;  top: 0; left: 0;  -webkit-transition: all 1s linear; transition: all 1s linear; z-index: 2; overflow: hidden;}
.process .auto-box .item {  padding: 0;  max-width: 560px;  width: 100%; color: #fff; margin: 0;}
.process .auto-box .inner { width: 100%; position: relative; margin-bottom: 30px;}
.process .auto-box .inner .num {  color: #ce9c74; font-size: 70px; line-height: 1;}
.process .auto-box .inner .title-en { font-size: 22px; color: #ce9c74;}
.process .auto-box .inner .title-ch {  font-size: 34px;  font-weight: 700; color: #866c5b;}

@media (max-width: 1280px) {
.process .auto-box .item {  max-width: 400px; }
}
@media (max-width: 992px) {
.process .auto-box .item {  max-width: 100%;  }
}

@media (max-width: 640px) {
.process .auto-box .inner .title-ch {  font-size: 30px;}
}
.process .auto-box .inner .title { margin-bottom: 15px; font-size: 30px; line-height: 2.375rem; font-weight: 700;color:#a65723;}
@media (max-width: 640px) {
.process .auto-box .inner .title {  font-size: 26px;  }
}
.process .auto-box .inner .subtitle { font-size: 20px; font-weight: 600; color: #c9a27e;}
.process .auto-box .inner .text { font-size: 1.125rem; color: #000;  margin-top: 10px;  letter-spacing: 1px; line-height: 1.7;  font-weight: 400;}

@-webkit-keyframes vanmove {
0% { -webkit-transform: translateX(-50%) translateY(0px); transform: translateX(-50%) translateY(0px); }
50% {  -webkit-transform: translateX(-25%) translateY(5px);  transform: translateX(-25%) translateY(5px);  }
100% { -webkit-transform: translateX(0) translateY(0px); transform: translateX(0) translateY(0px);}
}

@keyframes vanmove {
0% { -webkit-transform: translateX(-50%) translateY(0px); transform: translateX(-50%) translateY(0px);}
50% {  -webkit-transform: translateX(-25%) translateY(5px); transform: translateX(-25%) translateY(5px);}
100% {-webkit-transform: translateX(0) translateY(0px); transform: translateX(0) translateY(0px); }
}
@-webkit-keyframes vanmove2 {
0% { opacity: 0;  -webkit-transform: translateY(10px); transform: translateY(10px);}
100% { opacity: 1; -webkit-transform: translateY(0px);  transform: translateY(0px); }
}
@keyframes vanmove2 {
0% {  opacity: 0;  -webkit-transform: translateY(10px);  transform: translateY(10px);}
100% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@-webkit-keyframes change-pc {
0% { -webkit-filter: brightness(0) invert(0.5); filter: brightness(0) invert(0.5);}
100% {  -webkit-filter: unset; ilter: unset; }
}
@keyframes change-pc {
0% { -webkit-filter: brightness(0) invert(0.5); filter: brightness(0) invert(0.5);}
100% {  -webkit-filter: unset; filter: unset; }
}
@-webkit-keyframes change-2 {
0% {fill: #424242;}
100% { fill: #cf9466;}
}
@keyframes change-2 {
0% {
fill: #424242;
}
100% {
fill: #cf9466;
}
}
@-webkit-keyframes change-3 {
0% {stroke: #424242;}
100% {stroke: #cf9466;}
}
@keyframes change-3 {
0% {stroke: #424242;}
100% { stroke: #cf9466; }
}
@-webkit-keyframes change-4 {
0% { color: #fff;}
100% {color:#d59644;}
}
@keyframes change-4 {
0% { color: #fff; }
100% { color:#d59644; }
}
@-webkit-keyframes change-5 {
0% {border: 3px solid #3e3e3e;}
100% {border: 3px solid #ce9c74;}
}
@keyframes change-5 {
0% {border: 3px solid #3e3e3e;}
100% { border: 3px solid #ce9c74;}
}
@-webkit-keyframes vanshow {
0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px);}
100% { opacity: 1;  -webkit-transform: translateY(0px);  transform: translateY(0px);}
}
@keyframes vanshow {
0% {  opacity: 0;  -webkit-transform: translateY(20px); transform: translateY(20px);}
100% { opacity: 1;  -webkit-transform: translateY(0px); transform: translateY(0px);}
}
@-webkit-keyframes lineshow {
0% { opacity: 0; width: 0; }
100% { opacity: 1; width: 75%;  }
}
@keyframes lineshow {
0% { opacity: 0;  width: 0;}
100% {  opacity: 1; width: 75%; }
}
@-webkit-keyframes lineshow2 {
0% { opacity: 0; width: 0;}
100% { opacity: 1; width: 130px; }
}
@keyframes lineshow2 {
0% {  opacity: 0; width: 0;  }
100% { opacity: 1; width: 130px; }
}
@-webkit-keyframes lineshow3 {
0% { opacity: 0;  height: 0; }
100% {  opacity: 1; height: 70px; }
}
@keyframes lineshow3 {
0% { opacity: 0; height: 0; }
100% { opacity: 1;  height: 70px; }
}
.step { width: 100%;}
@media (min-width: 1440px) {
    .step {transform: scale(1.1)}

}

@media (max-width: 1180px) {
.step { display: none; }
    .step {transform: scale(1)}
}
.step .step-box { margin-top: 120px;}
@media (max-width: 640px) {
.step .step-box {margin-top: 20px;}
}
.step .step-list-box { opacity: 0; height: 140px;width: 100%;z-index: 2;position: relative;}
.step .step-list {  display: -webkit-box; display: -ms-flexbox;  display: flex;  -webkit-box-align: end;  -ms-flex-align: end;  align-items: flex-end;width: 100%; position: relative; z-index: 2; list-style: none;margin: 0px;padding: 0px;}
.step .step-list::before {opacity: 0;content: "";  width: 0;height:6px; background-color: #ce9c74; top: 30%; left: 20px; bottom: 0; margin: auto; position: absolute;z-index: -1;}
.step .step-list .step-item {  padding: 0px 18px;  position: relative;}

.step .step-list .step-item.last { position: absolute; top: -100%; right: 140px;}
.step .step-list .step-item.last::before { content: ""; position: absolute; height: 4px; background-color: #ce9c74; top: 30%; bottom: 0; left: -12px; width: 0px;  margin: auto 0; z-index: -1;}
.step .step-list .step-item.last::after { content: ""; position: absolute;  width: 4px; height: 0px;  background-color: #ce9c74; top: 64%; right: 186px; bottom: 0; margin: auto; z-index: -1;}
.step .step-list .step-item.last .item::before { content: "";  position: absolute; width: 4px; height: 0px; background-color: #ce9c74; top: 100%; left: 0; right: 0px; bottom: 0;  margin: 0 auto; z-index: -1;}
.step .step-list .step-item.last .info { position: relative;}
.step .step-list .step-item.last .num { top: 20px;}
.step .step-list .step-item.last .inner { padding: 0;  line-height: 1; margin: 45px 0 0;}
.step .step-list .inner { position: relative;  padding: 60px 0 0; opacity: 0;  -webkit-transform: translateY(20px); transform: translateY(20px);}
.step .step-list .item {  display: -webkit-box;  display: -ms-flexbox; display: flex;  -webkit-box-orient: vertical;  -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center;  justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%;  color: #dddddd;}
@media (max-width: 640px) {
.step .step-list .item {width: 100px; height: 100px;}
}
.step .step-list .num { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; font-size: 30px;color: #dddddd; text-align: center;}
@media (max-width: 640px) {
.step .step-list .num {  font-size: 1.125rem; }
}
.step .step-list .info {  width: 140px;  height: 140px; border-radius: 50%; border: 3px solid #866c5b; display: -webkit-box;  display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal;  -ms-flex-direction: column; flex-direction: column;  -webkit-box-pack: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  background-color: #866c5b;  }
.step .step-list .info a{ color: #fff;}
@media (max-width: 640px) {
.step .step-list .info { width: 100px;  height: 100px; }
}
.step .step-list .info .inner { padding: 10px 0; text-align: center; font-size: 1.125rem;line-height: 1.5rem; font-weight: 700 }
@media (max-width: 640px) {
.step .step-list .info .inner { font-size: 1rem;  }
}

/*car run*/
.step .transport {width: 100%; margin-top: -74px; display: -webkit-box; display: -ms-flexbox; display: flex;  -webkit-box-align: end;  -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify;  -ms-flex-pack: justify; justify-content:flex-end;}
.step .van { max-width: 315px; width: 100%; height: 200px;  position: relative;}
.step .van .car {  -webkit-filter: brightness(0) invert(0.5); filter: brightness(0) invert(0.5);}
@media (max-width: 1366px) {
    .step .van{transform: scale(.8)} 
}

.step .van .poster { position: absolute; top: 0; left: 0; width: 315px; height: 200px; display: -webkit-box;  display: -ms-flexbox; display: flex;  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center;  align-items: center;}
.step .van .poster .van-logo {position: absolute; top: -25px; left: 10px; right: 0; bottom: 0;  margin: auto;  width: 315px; height: 200px; -webkit-filter: brightness(0) invert(0.5); filter: brightness(0) invert(0.5);}
.step .van .tire-box { display: -webkit-box; display: -ms-flexbox;  display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center;  -ms-flex-align: center; align-items: center; width: 220px; position: absolute; bottom: 0; right:50px;}
.step .van .tire-box .tire {  -webkit-filter: brightness(0) invert(0.5); filter: brightness(0) invert(0.5);}
.step .step-list-box { -webkit-animation: vanmove2 2s 1s linear forwards; animation: vanmove2 2s 1s linear forwards;}
.step .step-list::before { -webkit-animation: lineshow 3.5s 1s linear forwards; animation: lineshow 3.5s 1s linear forwards;}
.step .step-list .step-item .info { -webkit-animation: change-5 1s 1s linear forwards; animation: change-5 1s 1s linear forwards;}
.step .step-list .step-item .num { -webkit-animation: change-4 1s 1s linear forwards; animation: change-4 1s 1s linear forwards;}
.step .step-list .step-item .inner {  -webkit-animation: change-4 1s 1s linear forwards;  animation: change-4 1s 1s linear forwards;}
.step .step-list .step-item:nth-child(1) .inner { -webkit-animation: vanshow 1s 1s linear forwards; animation: vanshow 1s 1s linear forwards;}
.step .step-list .step-item:nth-child(2) .inner {-webkit-animation: vanshow 1s 1.5s linear forwards; animation: vanshow 1s 1.5s linear forwards;}
.step .step-list .step-item:nth-child(3) .inner { -webkit-animation: vanshow 1s 2s linear forwards; animation: vanshow 1s 2s linear forwards;}
.step .step-list .step-item:nth-child(4) .inner { -webkit-animation: vanshow 1s 2.5s linear forwards; animation: vanshow 1s 2.5s linear forwards;}
.step .step-list .step-item:nth-child(5) .inner {-webkit-animation: vanshow 1s 3s linear forwards; animation: vanshow 1s 3s linear forwards;}
.step .step-list .step-item:nth-child(6) .inner { -webkit-animation: vanshow 1s 3.5s linear forwards; animation: vanshow 1s 3.5s linear forwards;}
.step .step-list .step-item:nth-child(7) .inner { -webkit-animation: vanshow 1s 4s linear forwards; animation: vanshow 1s 4s linear forwards;}
.step .step-list .step-item:nth-child(7)::before {-webkit-animation: lineshow2 1.5s 3s linear forwards; animation: lineshow2 1.5s 3s linear forwards;}
.step .step-list .step-item:nth-child(7)::after { -webkit-animation: lineshow3 1s 2s linear forwards; animation: lineshow3 1s 2s linear forwards;}
.step .step-list .step-item:nth-child(7) .item::before { -webkit-animation: lineshow3 1s 4s linear forwards; animation: lineshow3 1s 4s linear forwards;}
.step .transport { -webkit-animation: vanmove 1s linear forwards; animation: vanmove 1s linear forwards;}
.step .van .car {  -webkit-animation: change-pc 2s linear forwards; animation: change-pc 2s linear forwards;}
.step .van .car img {  -webkit-animation: carmove 2.5s infinite linear; animation: carmove 2.5s infinite linear;}
.step .van .poster .van-logo { -webkit-animation: change-pc 2s 0.5s linear forwards; animation: change-pc 2s 0.5s linear forwards;}
.step .van .tire-box .tire { -webkit-animation: change-pc 1s 0.5s linear forwards;  animation: change-pc 1s 0.5s linear forwards;}
.step .van .tire-box .tire img { -webkit-animation: tire 2s linear infinite; animation: tire 2s linear infinite;}
  


 /*----------------------------------------/
timeline
----------------------------------------*/
.about-time {padding:10vh 0; position: relative;z-index: 0;}
.about-time .cms-title-2 h2{ width: auto; margin:0px auto 20px auto; text-align: center;  }
.about-time .cms-title-2 h2:after{   height: 4px; bottom: -15px; left:45%;  }
.about-time .cms-title-2 h3{ width: auto; margin:35px auto 10px auto; text-align: center;   }
.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:0px 40px; position: relative; background-color: inherit; width: 50%;z-index:9;}
.timewrap::after { color: #fff; margin:0px;  content: attr(data-year)' '; position: absolute; font-weight:700;  width: 66px; height: 66px; right: -33px; background-color:#866c5b;  border-color:#ce9c74; 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:#312927; padding: 5px 30px; position: relative; border-radius: 6px; display: flex; flex-wrap: wrap; justify-content: flex-start;  flex-direction: column; }

.time-content h3 { margin-bottom: 20px; font-size: 26px; font-weight: 700; line-height: 1.5; letter-spacing: normal; color: #000;}
.time-content h3:before { width: 10px; height:10px; content: ""; display: inline-block;  margin-right: 8px;  margin-bottom: 4px; background-color:#866c5b; border-radius: 3px; transform: rotate(45deg);}
.time-content p{ font-size: 1.15rem;   width: 100%; margin: 5px 0px!important;}
.left .time-content h3{ text-align: right;}
.left .time-content p{ text-align: right;}
.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 (max-width:840px) {
.time-content h3 {font-size: 120%;}   
}

@media (max-width:767.98px) {
.time-content h3{ font-size: 125%; }   
}

@media screen and (max-width: 600px) {
   .about-time {padding:5vh 0;  }
 
.timeline::after { left: 36px; }
.flex-container { display:none; visibility:hidden; }
.timewrap {  width: 100%; padding-left: 70px; padding-right: 0px; margin-bottom: 20px;}
.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 { top:0px;left: 0px; }
.right {  left: 0%; text-align:left;}
.left { text-align:left; }
.time-content {  padding: 5px 10px;}
  .time-content p{ font-size:1rem;  }   
.left .time-content h3{   text-align: left;}
.left .time-content p{ font-size: 100%; text-align: left;}
}

@media screen and (max-width: 320px) {
.about-time {padding:5vh 0;}
.time-content h3 { font-size: 100%; } 
 .left .time-content p{ font-size: 100%; text-align: left;}
    

}
  
 .subtitle { font-size: 20px; font-weight: 700; color: #c9a27e; position: relative; margin-bottom: 20px; padding-bottom: 20px; }
 .subtitle::before { content: ""; position: absolute; width: 30px; height: 1px; background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(169, 112, 70)), to(rgb(219, 162, 111))); background-image: linear-gradient(0deg, rgb(169, 112, 70) 0%, rgb(219, 162, 111) 100%); bottom: 0; left: 0;  pointer-events: none;}




.note-wrap  { width:50%; margin: auto; }
.notebox { margin-top: 20px; padding: 20px; width:100%;position: relative;border: 1px solid rgba(206, 149, 101, 0.5); background-color: rgba(186 ,171 ,135,.15);  } 
.notebox::before { content: ""; position: absolute;  width: calc(100% + 20px); height:  calc(100% + 20px); top: 0; left: -10px; right: 0; bottom: 0;z-index: -1;  margin: auto;   border: 1px solid rgba(206, 149, 101, 0.5); }
@media (max-width:992px) {
.note-wrap  { width:100%;   margin-top: 50px;  }
}