.about-box { padding:100px 50px; display: flex; position: relative; flex-direction: column; align-content: center; justify-content: space-between;}
.content-pretitle { margin: auto auto 0px auto; font-size:3rem; line-height: 3rem; font-weight: 700;color: #f39800;  }
.content-pretitle::before { content: ""; margin-right: 0.25rem;  color:#f39800}
.content-title { font-size: 2.5rem; line-height:3rem; margin:70px 0px 30px 0px; font-weight: 700; max-width: 800px; color: #666464; will-change: transform;}

@media (max-width:767.98px) {
.about-box { padding:30px 0px;}
.content-pretitle {  font-size:1.875rem; line-height: 2rem;   }
.content-title { font-size: 1.5rem; line-height:2rem; margin: 30px 0px; font-weight: 700;  }

}


/*about us----*/
.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: center; background-color: transparent;}
@media (min-width:1200px) {
.main-wrap{  padding: 20px 0px; max-width: 100%; }
}
.background{position: relative; width: 100%; height: 100vh; overflow: hidden;   }
@media (max-width:1024px) {
.background{ height: 600px; }  
     
}
@media (max-width:767.98px) {
.background{ height: 200px;margin-top: -5%; }  
}


/* ==== 底圖 === */
.bg-background { background-image: attr(src url); background-repeat: no-repeat; background-size: 100% auto;background-position:center bottom; position: absolute;z-index: 0; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  width: 100%;  }
/* ==== 底圖 fix=== */
.bg-background-fix { background-image: attr(src url); background-repeat: no-repeat; background-size: 100% auto;background-position:center bottom; background-attachment: fixed; position: absolute;z-index: 0; top:0px; left: 0; right: 0; bottom: 0; line-height: 0;  width: 100%;}
@media (max-width:1024px) {
.bg-background-fix { background-size: cover;  background-attachment: scroll;  }    
}
@media (max-width:768px) {
.bg-background-fix {  background-attachment: scroll;  }    
}

.main-about{position: relative; margin:-24% auto 0px auto; padding:0px 0px 0px 0px; width: 100%;display: flex; flex-wrap: wrap; z-index: 0; background-image: url("/images/theme-b67/about/item-bg-1.jpg");background-repeat: no-repeat; background-size: 80% auto; background-position: left top; background-color: #fff;  }

.box-wrap{ margin: 0px auto; padding:0px; display: flex; flex-wrap: wrap; justify-content: center;  position: relative; z-index:0; }
.box-right{width: 50%; margin: 0px; padding:40px 0px 0px 0px;  z-index: 3; position: relative;  }
.box-left{ width:calc(50% - 5%); margin: 0px 0px 0px 5%; padding:0px ; display: flex; flex-wrap: wrap;justify-content: flex-start; align-items: center;position: relative;z-index: 1; }


@media (max-width:1024px) {
.box-wrap{  padding:0px 50px;}   
.box-left,.box-right{ width:100%; margin:0; padding:0px;  }
}
@media (max-width:767.98px) {
.box-wrap{  padding:0px;}   
    
}
  
 /* choose style */
.block-box {width:100%; margin:100px auto; padding:15px 0px; }
.block-txt{width:100%; margin:50px 0px; padding: 0px;    }
.block-txt .title-2 h2{margin:0px 0px 15px 0px; text-align: left!important; }

.block-txt h3{margin:0px auto 15px auto; font-size:2.5rem; font-weight:700; color:#f39800;   }
.block-txt h3 span{  color:#666464;   }
.block-txt p{ font-size: 1rem;font-weight:400; line-height: 1.75rem; color:#000; text-align: justify;}
@media (max-width:1280px) { 
.block-box{width: 100%; margin: 0px auto; padding:0px; }
.block-txt h3{ font-size:1.5rem;    } 
}
 @media (max-width:768px) {
.block-txt{ padding: 0px;}
}
 @media (max-width:767.98px) {
 .block-txt p{   text-align: left;}
    
}
.o-image {margin: 20px auto auto 60px;}
.o-image  img { transform: scale(1); transition-delay: .6}
 @media (max-width:1440px) {
.o-image  img  {transform: scale(.9);}   
}

@media (max-width:1280px) { 
 .o-image {margin: 20px auto auto 0px;}
}

@media (max-width:1024px) { 
 .o-image {margin: 20px auto 40px 40px;}
}
@media (max-width:768px) { 
 .o-image {margin: 0px auto 40px 0px;}
}


.choose{ position: relative; }
.choose .info{ justify-content: flex-end;}
.choose .box-right{margin-top: -120px; z-index: 9;}
.choose .box-left{ margin: 0px 0px 0px 5%; padding:0px;}


@media (max-width:1280px) {
 .choose .box-right{margin-right: 5%;}
}
@media (max-width:1024px) {
.choose .box-right{ width:100%;  margin-top: -80px; padding: 0px; }
    
}


.choose-box{padding-top: 10%; }
 @media (max-width:1366px) {
 .choose-box{padding-top: 5%;}
}
 @media (max-width:1280px) {
 .choose-box{padding-top: 0px;}
}
 @media (max-width:1024px) {
 .choose-box{margin:10% auto; position: relative;width:100%; height: 400px;  }
}

 @media (max-width:767.98px) {
 .choose-box{margin:0px auto;  height: 300px;  }
}


.choose .choose-img {  position: absolute;  left: -65px; bottom: 0px; width: 50%; height: 100%;  max-height: none; -webkit-animation: rotate-center 100s linear infinite both; animation: rotate-center 100s linear infinite both; }
.choose .choose-brands { position: absolute; left: 0; bottom: 20%;  width: 40%;  -o-object-fit: contain; object-fit: contain;  -webkit-animation: slide_up_down 2s ease-in-out infinite alternate both; animation: slide_up_down 2s ease-in-out infinite alternate both;  z-index: 5; }
.choose .choose-bubbles { position: absolute; left: 0; bottom: -5%;  width: 45%;  -o-object-fit: contain; object-fit: contain;  -webkit-animation: slide_up_down 2s ease-in-out infinite alternate both; animation: slide_up_down 2s ease-in-out infinite alternate both;  -webkit-animation-delay: 1s;  animation-delay: 1s;  z-index: 3; }

  @media (max-width:1024px) {
.choose .choose-img { left: 5%;  bottom: 0px; width:80%;  }
.choose .choose-brands { position: absolute; left: 25%; bottom: 10%;  width: 50%;   }
.choose .choose-bubbles { position: absolute; left:25%;  bottom: -5%;  width: 60%;  }
} 
 @media (max-width:768px) {
.choose .choose-img { left: 10%;  bottom: 0px; width:100%;  }  
.choose .choose-brands {  left:0; bottom: -5%;  width: 100%;   }
.choose .choose-bubbles {  left:10%;  bottom: -10%;  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); }
}

/*----------------------------------------/
timeline
----------------------------------------*/
.bg-time{background: url(/images/theme-b67/about/item-bg-1.jpg) no-repeat left 40%; background-size: 80% auto;}
 
.bg-timeline {  position: absolute; width:100%; max-width: 400px; top: 0; bottom: 0; overflow: hidden; right:calc(100% + 2px);}
.bg-timeline-2 {  position: absolute; width:100%; max-width: 400px; top: 120px; bottom: 0; overflow: hidden; left:calc(100% + 1px);}
.about-time {padding:10vh 0; position: relative;z-index: 0;}
.about-time .title-2 h2{ width: auto; margin:0px auto 20px auto; text-align: center;  }
.about-time .title-2 h2:after{   height: 4px; bottom: -15px; left:45%;  }
.about-time .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: calc(50% - 1px); z-index:1;}

@media screen and (max-width:768px) {
 .timeline::after { left:35px; margin-left:0px; }
}
@media screen and (max-width:320px) {
.timeline::after { left:6%;}
}

.timewrap { padding: 10px 40px; position: relative; background-color: inherit; width: 50%;z-index:9;}
.timewrap::after { color: #fff; margin:0px;  content: attr(data-year)' '; position: absolute;  font-size: 1.35rem;  font-weight:700;  width: 96px; height: 96px; right: -48px; background-color:#f39700;  border-color:#f39700; border-style: solid;  border-width:1px; top: 15px; border-radius: 50%; z-index:9; line-height:90px; text-align: center;}
.timewrap::before { content: "";position: absolute;z-index: 9; left:0px; top:11px;  width: calc(96px + 8px);  height: calc(96px + 8px); display: block;  border: dashed 2px #f39700; border-radius:99rem; animation: rotateIt 20s infinite linear;  transform-origin: 50% 50%;}

@media screen and (max-width:768px) {
.timewrap::before {  width: calc(72px + 8px);  height: calc(72px + 8px); top:14px;  }    
.timewrap::after { width:72px; height: 72px;  font-size: 1.15rem; line-height:72px; top: 18px;}      
}


.circlecontainer { color: #b69472; content: " "; position: absolute; width: 96px; height: 96px; right: -48px; 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: -48px;}
.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; }
.time-content h3{ width: 100%; margin: 5px 0px!important; font-size: 1.35rem;  font-weight: 700;color: #000; }
.time-content p{ font-size: 1rem; line-height: 1.5rem;  width: 100%; margin: 5px 0px!important; color: #666464; }
.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:768px) {
.bg-timeline { display: none; }
.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%;}
}
@media screen and (max-width:767.98px) {
 .time-content { padding: 20px 0px 20px 30px;}
}

@media screen and (max-width:320px) {
 .time-content { padding: 20px 0px 20px 0px;  }
}







.right::before { left: -52px;}
.left::before { left:auto;right: -52px;  }
@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); }
} 
@media screen and (max-width:768px) {
.left::after, .right::after { left: 0px; }
.right {  left: 0%; text-align:left; padding-right: 0px;}
.left { text-align:left; }
.right::before { left: -4px;}  
.left::before { left:-4px;right:auto;  }    
}
@media screen and (max-width:320px) {
.left::after, .right::after { left: -20px;  transform: scale(.7)}  
.left::before,.right::before { left: -24px; transform: scale(.7)}  
}
@media screen and (max-width:280px) {
.left::after, .right::after { left: -20px;  transform: scale(.6)}  
.left::before,.right::before { left: -24px; transform: scale(.6)}  
}