.text-content {  background-image: linear-gradient(to top, #868f96 0%, #596164 100%);  }
.series-name{ color: #fff; }
.series-name:before { background-color: #fff;  }
.cms-main-banner-txt h1 { color: #fff;}
.cms-main-banner-txt p {color: #fff;} 
#cms-main p {font-size:1rem; line-height: 1.75rem; font-weight:400; margin-bottom: 20px; word-break: normal;}
@media (max-width:768px) {
#cms-main p {font-size:1rem; margin-bottom: 10px; }
}
/*.cms-section:before { content: ""; display: block; position: absolute; width: 1px; height: 100%; left: 42%; top: 0; border-left: 1px solid #e7e7e7  }*/
.cms-main-wrap { width: 100%; max-width: 1200px; margin: auto; height: auto; display: flex;   flex-wrap: wrap;  align-content: flex-start; align-items: flex-start;}
@media (max-width:1200px) {
.cms-main-wrap { padding:0px 20px; }
}
@media (max-width:767.98px) {
.cms-main-wrap { padding:0px; }
}
/*-------------------*/
/***** 關於我們純文字區塊 *****/
/*------------------*/
.cms-main-about{position: relative; z-index: 0; padding:15px 0; margin: 0; background: url("../images/index/mask-2.png") no-repeat 130% top;background-size:60% auto; }
.cms-main-about:after{ content: 'About us'; width:100%; position: absolute;  z-index: 2; display: block; left: -50px; top: -150px; font-size: 120px; font-weight: 900; color:rgba(246,242,240,.75); writing-mode: vertical-lr; text-orientation: mixed; pointer-events: none; }
.cms-main-about-box{  width: 100%;  margin: auto;  display: flex; flex-wrap: wrap; justify-content: space-between; }
.cms-main-about-txt{width: 50%; margin:0 ; padding:30px 40px;  display: flex; flex-wrap: wrap;  align-self: center; line-height:2.5rem;  color:#000; word-break: keep-all;}
.cms-main-about-txt p{margin:30px 0px 60px 0px;font-size: 1rem!important; line-height:1.85rem;   }
.cms-main-about-pic{width:50%; margin:2% auto auto auto; padding:0px 15px; display: flex; flex-wrap: wrap;align-content: flex-start; text-align: right;position: relative; z-index:9;  }
.cms-main-about-pic figure{margin:0px auto; }
.cms-main-about-pic img{ width: 100%; max-width: 100%; border-radius: 99rem;}
.cms-pic{width:80%; margin: auto; position: relative; display: flex;  justify-content: flex-end; z-index: 3; border: solid 10px #fff;  border-radius: 99rem;box-shadow: 0px 5px 8px rgba(0,0,0,.2);}
.cms-pic-2{width:35%; margin: auto; position: absolute; bottom:-70px; left: 0px; display: flex;  justify-content: center; z-index: 3;border: solid 6px #fff; border-radius: 99rem; box-shadow: 0px 5px 8px rgba(0,0,0,.2);}
.cms-pic-3{width:26%; margin: auto; position: absolute; top:40px; left: -50px; display: flex;  justify-content: center; z-index: 3;border: solid 6px #fff; border-radius: 99rem; box-shadow: 0px 5px 8px rgba(0,0,0,.2);}
.feature-icon{ width: 100%; margin: 0 auto;padding: 0; position: relative; display: flex; flex-wrap: wrap;  list-style: none; z-index: 4;} 
.feature-icon li {width: calc( 100%/4 - 20px);margin: 30px 10px;  display: flex; flex-wrap: wrap;  align-self: flex-start; justify-content: center; }
.feature-icon i{width: 80px; height: 80px; display: block; margin: auto; }
.feature-icon sapn{width: 100%;margin: 0 auto;font-size: 1.063rem;line-height: 1.35rem; text-align: center; font-weight: 700; color:#000; word-wrap:break-word;  white-space:pre-wrap;  } 
.feature-1{background: url("../../theme-b09/images/index/icon-1.svg") no-repeat center top;}
.feature-2{background: url("../../theme-b09/images/index/icon-2.svg") no-repeat center top;}
.feature-3{background: url("../../theme-b09/images/index/icon-3.svg") no-repeat center top;}
.feature-4{background: url("../../theme-b09/images/index/icon-4.svg") no-repeat center top;}
.cms-main-about-pic::before { display: block; content: ''; width: 500px; height:500px; position: absolute; left:  0px; top: 0;  z-index: 0; border:2.5px solid rgba(209, 50, 42, .2); border-left-color: rgba(209, 50, 42,1);animation: loader-spin 3s infinite linear; vertical-align: top;  border-radius: 50%; opacity:0.5;  }
.cms-main-about-pic::after { display: block; content: ''; width: 420px; height:420px; position: absolute; left: 30px; top: 40px; z-index: 0;  border: 1.5px solid rgba(209, 50, 42,.2); border-left-color: rgba(209, 50, 42, 1); animation: loader-spin 2s infinite linear; vertical-align: top; border-radius: 50%; opacity:0.3;}
@keyframes loader-spin {
0% {  transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}

@media (max-width: 820px) {
.cms-main-about:after{ display: none;}
}

@media (max-width: 767.98px) {
.cms-main-about-box{  flex-direction: column-reverse; }
.cms-main-about-txt{width: 100%; margin:0 ; padding:30px 15px; line-height:2.5rem;  color:#000; word-break: keep-all;  }
.cms-main-about-pic{width:100%;  padding:0px;}
.cms-main-about-pic::before {  width: 350px; height:350px;  left: 40px; top: 1vh;  z-index: 0;   }
.cms-main-about-pic::after{  left: 0px; top:1vh;  }
.cms-pic-3{  left: 0px; }
.cms-pic-2{  bottom:-70px; left: auto;  right: 0px; display: flex;  justify-content: center; z-index: 3;border: solid 6px #fff; border-radius: 99rem; box-shadow: 0px 5px 8px rgba(0,0,0,.2);}
}
.cms-section { width: 100%; padding:50px 0px;position: relative; display: flex; flex-wrap: wrap; margin: 5% auto;background: url("../images/index/mask-2.png")  no-repeat left top; background-size: 30% auto;  }
@media (max-width:576px) {
.cms-main-about-pic::before, .cms-main-about-pic::after { display: none;}
}
@media (max-width:768px) {
.cms-section {   padding:0px 20px; margin:0px auto;background-size: 100% auto; }    
}
.cms-box-left { padding-top: 40px; width: calc(45% - 50px); position: relative;}
.cms-box-left  .cms-title:before { content: ""; display: block; width: 50%; height: 2px; bottom:0px; position: absolute;  background: #000; margin-bottom: 18px;}
.cms-box-left .cms-title:before {  transition: all 1.1s cubic-bezier(0.34, 1.56, 0.64, 1); transform: scaleX(1); border-color: #000; transition-delay: .3s}
.cms-box-right { padding-top:40px;  position: relative; width: calc(55% + 50px);}
.cms-box-right:before { content: ""; display: block; position: absolute; width: 1px; height: 100%; left:-10%; top: 0; border-left: 1px solid #e7e7e7  }
@media (max-width:1100px) {
.cms-box-right:before {  left:-5%;   }
}
@media (max-width:820px) {
.cms-box-left { padding-top: 40px; width: 100%;  } 
.cms-box-right { padding-top:0px;  width: 100%;  }
.cms-section .cms-box-right:before { display: none!important;   }
}
@media (max-width:767.98px) {
.cms-box-left { padding-top:0px;  } 
.cms-box-right { padding-top:0px;  width: 100%;  }
}

.cms-section-about { width: 100%; padding:0px;position: relative; display: flex; flex-wrap: wrap; margin: 5% auto;  background-color: #fbfbfb;}
.cms-section-about:before { content: ""; display: block;  width: 42%;  background-color: #f1f1f2; height: 100%; position: absolute; z-index: 0;}
.cms-box-wrap{  padding:0px 0px 0px 0px; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; }
.cms-box-wrap h3{ margin: 40px 0px 20px 0px;font-size: 2.25rem; font-weight: 700; }
.cms-box-wrap p{color: #000; position: relative; z-index: 2;}
.cms-about-left{ width: 100%; position: relative; z-index: 0; }
.cms-about-right{width: 55%;position: absolute; left: 0; z-index: 1; margin: 10% auto auto auto;padding: 20px 40px 60px 40px; text-align: left; background: #fff; }
.cms-section-about .cms-box-left { padding-top: 40px; width: calc(30% - 100px); position: relative;}
.cms-section-about .cms-box-right { padding-top:40px; margin-left: 40px;  position: relative; width: calc(70% + 50px);   }
.cms-section-about .cms-box-right:before {display: none; }
@media (max-width: 820px) {
.cms-about-right{width:80%;position: absolute; left: 0; z-index:0; margin: 10% auto auto auto;padding: 20px 40px 60px 40px; text-align: left; background: #fff; }
.cms-section-about .cms-box-left { padding-top: 40px; width: 100%; z-index: 99; }
.cms-section-about .cms-box-right { padding-top:0px;margin-top: -40px; margin-left: 0px;  width: 100%;   }
.cms-section-about:before { width:100%; background: #fff;}
.cms-about-left{ width: 100%; margin-top: -140px; margin-bottom:40px;  }   
}
@media (max-width: 767.98px) {
.cms-section-about { padding:0px 20px; }
.cms-box-wrap h3{ margin: 0px 0px 20px 0px;font-size: 2rem;}  
.cms-about-right{width:100%; padding: 0px; margin: 0px;  position: relative; background: none; }  
.cms-about-left{  margin-bottom:10px;}      
}
.cms-main-facility { width: 100%; padding:50px 0px;position: relative; display: flex; flex-wrap: wrap; margin:-5% auto 0 auto; background: url("../images/about/bg-about-2.jpg")  no-repeat right bottom; background-size: 100% auto;    }
.cms-main-facility-item { width:60%; display: flex; flex-wrap: wrap;  padding:30px 60px; position: relative;   }
.cms-main-txt{width: 100%;  margin:1% 0; position: relative;z-index: 3; }
#cms-main .cms-main-facility p{ width: 100%; padding: 5px; margin: 20px 0px;   }
#cms-main .cms-main-facility h3{ width: auto;  margin:0px; font-weight: 700; /* font-size: 13rem; color:#e5e5e5; font-weight: 700; text-shadow: 0px 0px rgba(255,255,255,1); position: absolute; left:0px; top:-200px; opacity: .5;z-index:1; */ }
.cms-main-facility-item  .cms-title-3{ position: relative; z-index: 3;}
.cms-main-facility-item  .cms-title-3::after{ content: ""; position: absolute; left: 0;  bottom: 0; width: 40px; height: 3px;background-color:#505761;}
.cms-main-card{ width:45%;  margin:0px; padding:10% 0px 0px 0px;  display: flex; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1;}
.cms-item-1{ width: 100%;   position: relative; z-index: 1;}
.cms-main-card .cms-item-1:before{content: ""; display: block; width:100%; height:100%;top:-5%; left:-5%;  position:absolute;z-index:0; background: #e5e5e5; }
.cms-main-card figure img {  width: 100%; max-width: 100%; transition: all 0.3s; position: relative; z-index: 1; }
@media (min-width: 1900px) {
.cms-main-facility {padding:100px 0px;}
}
@media (max-width: 820px) {
.cms-main-facility-item { width:100%; padding:30px;   }  
.cms-main-card{ width:90%;  margin:0px auto; justify-content: center;  }
}
@media (max-width: 767.98px) {
.cms-main-facility {  padding:20px 0px 160px 0px;  background-size: 200% auto;  }  
.cms-main-facility-item {  padding:20px;   }  
.cms-main-facility .cms-title h2 {font-size: 2rem;}
}

/*----------------------------------------/
timeline
----------------------------------------*/
.cms-about-time {padding:2vh 0 20vh 0;   position: relative; z-index: 0; }
.cms-about-time:after{ content: 'History'; width:100%; position: absolute;  z-index: 2; display: block; left: -50px; top: -150px; font-size: 120px; font-weight: 900; color:rgba(246,242,240,.75); writing-mode: vertical-lr; text-orientation: mixed;  pointer-events: none;}
.cms-about-time .cms-title-block { width: 100%;  max-width: 1200px; margin: 20px auto; }
.timeline { position: relative; max-width: 1200px;  margin: 0 auto;    z-index:1;}
.timeline::after {  content: '';  position: absolute; width: 1px; background-color:#d0312a; top: 0; bottom: 0;  left: 50%;  margin-left: -3px; z-index:1;}
.timewrap { padding: 10px 40px; margin-bottom: 10px; position: relative; background-color: inherit; width: 50%;z-index:9;}
.timewrap::after {margin:0px;content: attr(data-year)' '; font-size: 0;  position: absolute; width: 66px; height: 66px; right: -30px; top: 15px; border-radius: 10%; transform: rotate(45deg); z-index:8; background-image: linear-gradient(-225deg, #FFE29F 0%, #d0312a 48%, #720000 100%);}
.timewrap::before { color: #fff; margin:0px;  content: attr(data-year)' '; position: absolute; right: -30px; top: 15px; font-weight:700;  width: 66px; height: 66px;  z-index:9; line-height: 65px; text-align: center;  }
.timewrap.right::before{left: -36px; }
.circlecontainer { color: #184598; content: " "; position: absolute; width: 66px; height: 66px; right: -33px; background-color: #774e36; border-color:#9e2b2f; border-style: solid;  border-width:1px; top: 15px;  border-radius: 50%;  z-index:99;}
.left { left: 0; text-align:left;}
.right { left: 50%; text-align:left; }
.right::after { left: -36px;}
.time-content { color:#000; padding: 20px 30px; position: relative;   display: flex; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; flex-direction: column; }
.time-content figure{ margin: 0 auto 20px auto; }
.contentboxr { color:#184598; 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;}
#cms-main .time-content p{font-size: 1.15rem;  margin: 0;}
@media screen and (max-width:820px) {
.cms-about-time:after{ display: none;  }
}
@media screen and (max-width:768px) {
 .timeline::after { left: 51px; }
.flex-container { display:none; visibility:hidden; }
.timewrap {  width: 100%; padding-left: 70px; padding-right: 25px; }
.contentboxr { color:#184598; 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;   }
.timewrap.right::before{left:15px; }   
.timewrap.left::before{left:15px; }   
.left { text-align:left; }
.right {  left: 0%; text-align:left;}
.left::after, .right::after { left: 15px; }   
.cms-about-time:after{   left: -20px; font-size: 72px; color: #ebebeb; }
.time-content p{ text-align: left; }
}

 /*----------------------------------------/
 aside cssmenu樣式
----------------------------------------*/
.cssmenu {width: 100%; max-width: 820px; text-align:center; }
.cssmenu > ul{font-size:0;text-align:center; width: 100%; /*background:rgba(246,242,240,1);*/background-image: linear-gradient(to top, rgba(246,242,240,1) 0%, #f8f7f7 100%);}
.cssmenu > ul > li{display:inline-block;float:none; margin: 0; padding: 0px;}
.cssmenu { width: 100%; margin-top: -3.75rem; margin-bottom: 2.5rem}
 @media (min-width:75em) {
.cssmenu {  margin-bottom: 4.375rem }
}
.cssmenu { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; border-radius: 8px; overflow: hidden}
.cssmenu > ul > li{ width: 33.33333%}
@media (min-width:1100px) {
.cssmenu{margin-top: -4%;}    
.cssmenu > ul > li{  width: 20% }
}

@media (min-width:1600px) {
.cssmenu{  max-width: 1200px;}    
 }
.cssmenu > ul > li:nth-child(1).active { color: #fff; background-image: url("../images/index/nu-a-1-w.svg");  background-color:#80a9e5 !important;  border:none;}
.cssmenu > ul > li:nth-child(2).active { color: #fff; background-image: url("../images/index/nu-a-3-w.svg");  background-color:#62cecc !important;  border:none;}
.cssmenu > ul > li:nth-child(3).active { color: #fff; background-image: url("../images/index/nu-a-2-w.svg");  background-color:#77d6be !important;  border:none;}
.cssmenu > ul > li:nth-child(4).active { color: #fff; background-image: url("../images/index/nu-a-4-w.svg");  background-color:#e36f58 !important;  border:none;}
.cssmenu > ul > li:nth-child(5).active { color: #fff; background-image: url("../images/index/nu-a-5-w.svg");  background-color:#febe5a !important;  border:none;}
.cssmenu > ul > li { border: none; transition:all 0.25s ease-out;}
.cssmenu > ul > li:hover { border: none;  background-color:#fff!important; background-size:90px 90px!important;  transform: scale(1.02)}
.cssmenu > ul > li:hover > a { color: #000;  border: none; background-color:transparent; }
.cssmenu > ul > li > a { padding: 90px 0px 10px 0px !important; transition:all 0.25s ease-out; }
.cssmenu > ul > li:nth-child(1){ background: url("../images/index/nu-a-1.svg") no-repeat center 10px; background-size: 80px 80px;}
.cssmenu > ul > li:nth-child(2){ background: url("../images/index/nu-a-3.svg") no-repeat center 10px; background-size: 80px 80px;}
.cssmenu > ul > li:nth-child(3){ background: url("../images/index/nu-a-2.svg") no-repeat center 10px; background-size: 80px 80px;}
.cssmenu > ul > li:nth-child(4){ background: url("../images/index/nu-a-4.svg") no-repeat center 10px; background-size: 80px 80px;}
.cssmenu > ul > li:nth-child(5){ background: url("../images/index/nu-a-5.svg") no-repeat center 10px; background-size: 80px 80px;}
@media (max-width:820px) {
.cssmenu {width: 100%; margin-top: 0px;  text-align:center; }
.cssmenu > ul > li{  width:calc(20% - 10px) }
}

@media (max-width:768px) {
.cssmenu{display: block;  }
.cssmenu > ul > li{  width:calc(50% ) }
    
}
/* service*/
.service{ width: 100%;display: flex; flex-wrap: wrap; position: relative; z-index: 0; padding:15px 0; margin: 0; }
.service:after{ content: 'Service'; width:100%; position: absolute;  z-index: 2; display: block; left: -50px; top: -150px; font-size: 120px; font-weight: 900; color:rgba(246,242,240,.75); writing-mode: vertical-lr; text-orientation: mixed; pointer-events: none; }
.bg-service{background: url("../images/index/mask-2.png") no-repeat 130% top;background-size:100% auto;}
.service-box{  width: 100%; display: flex; flex-wrap: wrap;  margin: auto; list-style: none; padding:50px 0px; counter-reset: index;  }
.service-box li { display: flex; flex-wrap: wrap;   flex-direction: row; width: calc(100%/2 - 80px); margin: 10px 40px; padding: 20px; align-content: flex-start; counter-increment: index; position: relative; } 
.service-box li::before {  content: counters(index, ".", decimal-leading-zero); font-size:2rem; text-align: right;  font-weight: 900;  color: #fff;   min-width: 50px;  height: 50px; padding-right: 12px; font-variant-numeric: tabular-nums; align-self:flex-start; background-image: linear-gradient(-25deg, #ff8484 0%, #ffc107 30%,#C1A3E6 60%, #00cc9b 100%);background-attachment: fixed;/*  -webkit-background-clip: text; -webkit-text-fill-color: transparent;  */ border-radius:99rem;   }   
/*#cms-main .service-box li p{ display: flex; width: calc(100% -100px)}*/
.service-box li::after { content: ""; display: block; position: absolute; bottom:0px; left:0px; width: 100%; height:1px; opacity: .25; background-image: linear-gradient(to right, #ff8484 0%, #ffc107 30%,#C1A3E6 100%);}
#cms-main .service-box li p {position: relative; width: calc(100% - 100px); padding:0px 20px; cursor: pointer;font-size: 1.15rem; line-height:1.75rem;  font-weight:400; color:#000;  transition: color 0.5s ease;}
.service-box-wrap{width: 40%; margin: auto;  padding:40px 0px; position: relative;z-index: 1;}
@media (max-width:820px) {
.service:after{display: none;}  
.service-box-wrap{width: 80%; margin: auto;  padding:40px 0px; position: relative;z-index: 1;}
.service-box li {   width: 100%; margin: 10px 0px; padding: 20px; align-content: flex-start; counter-increment: index; position: relative; }   
}

/* Certified*/
.certified{ width: 100%;display: flex; flex-wrap: wrap; position: relative; z-index: 0; padding:15px 0; margin: 0; }
.certified:after{ content: 'Certified'; width:100%; position: absolute;  z-index: 2; display: block; left: -50px; top: -150px; font-size: 120px; font-weight: 900; color:rgba(246,242,240,.75); writing-mode: vertical-lr; text-orientation: mixed;pointer-events: none;  }
.certified-box{  width: 100%; display: flex; flex-wrap: wrap;  margin: auto; list-style: none; padding:50px 0px;    }
.certified-box li { display: flex; flex-wrap: wrap; flex-direction: row; width: 100%; margin: 10px 0px 80px 0px; padding: 20px; align-content: flex-start;  } 
#cms-main .certified-box li p {position: relative;  font-size: 1.15rem; line-height:1.75rem;  font-weight:400; color:#000;  transition: color 0.5s ease;}
#cms-main .certified-box li .item-txt h3{ margin-bottom: 30px; font-weight: 700; position: relative; z-index: 5;}
.item-img{width: 50%; display: flex; flex-wrap: wrap; position: relative;}
.item-img .iem-1{width:70%; position: relative;}
.item-img .iem-2{width: 30%; position: absolute; right: 15%;top:26%;}
.item-txt{width: 50%; padding: 20px;   }
.certified-box li:nth-child(even){ flex-direction: row-reverse;}
.certified-box li .item-txt h3::after { content: ' '; display: block;  position: absolute;z-index: 1; left:-35%; bottom: -10%; width: 65%; height:3px; background-image: linear-gradient(-45deg, #ff8484 0%, #ffc107 30%,#C1A3E6 100%); }
.certified-box li .item-txt h3::before { content: ' '; display: block;  position: absolute; z-index: 0; left:-20px; top: -10%; width:16px; height:16px; opacity:1;  border-radius:99rem; background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); }
.certified-box li:nth-child(even) .item-txt h3::after { right:-15%; left:auto;  } 

@media (max-width:820px) {
.certified:after{display: none;}
}
@media (max-width:767.98px) {
.certified-box{  width: 100%; display: flex; flex-wrap: wrap;  margin: auto;   padding:50px 0px;    }
.certified-box li {   margin: 10px auto 80px auto; padding: 20px;justify-content: center; align-content: flex-start;  } 
.item-img{width: 100%; display: flex; flex-wrap: wrap; justify-content: center;  position: relative;}
.item-txt{width: 100%; padding: 20px;}
.certified-box li .item-txt h3::after { left:0; bottom: -10%; width: 100%; height:3px;   }
.certified-box li:nth-child(even) .item-txt h3::after { left:0; right:auto;  } 
}

/* Sales Country 


.box { width: 300px; height: 300px;  border-radius: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; padding-top: 100px; background: white; box-shadow: 0 35px 65px 0 rgba(86, 184, 149,0.42), inset 0 -10px 15px 0 rgba(113, 235, 191,0.8);}
.claymorphism { font-size: 2em; line-height: 2;}

.trend { font-size: 1em;}
.roller-box{ height:auto; width:100%; display:flex; align-items:center; justify-content:center; text-align:center;}
.roller{ height: 4.125rem; line-height: 4rem; position: relative; overflow: hidden; width: 100%; display: flex; justify-content: center; align-items: center; color: #1D3557;}
#spare-time{ font-size: 1rem;  font-style: italic; letter-spacing: 1rem; margin-top: 0; color: #A8DADC;}
.roller #rolltext { position: absolute; top: 0; animation: slide 5s infinite;  }

@keyframes slide {
0%{  top:0; }
25%{ top: -4rem; }
50%{ top: -8rem; }
72.5%{ top: -12.25rem; }
}
@media screen and (max-width: 600px){
.roller{ height: 2.6rem;  line-height: 2.125rem;   }
#spare-time { font-size: 1rem; letter-spacing: 0.1rem; }
.roller #rolltext { animation: slide-mob 5s infinite;  }
}
  
@keyframes slide-mob {
0%{ top:0; }
25%{ top: -2.125rem; }
50%{ top: -4.25rem; }
72.5%{ top: -6.375rem; }
}
 

/* Sales Country */ 

.animated { -webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animated.infinite { -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear;  animation-iteration-count: infinite; animation-timing-function: linear;}
.animated.hinge {  -webkit-animation-duration: 2s;  animation-duration: 2s;}
 
@-webkit-keyframes zoomIn {
  from {opacity: 0;  -webkit-transform: scale3d(.6, .6, .6); transform: scale3d(.6, .6, .6); }
  to { opacity: 1; }
}
@keyframes zoomIn {
  from { opacity: 0; -webkit-transform: scale3d(.6, .6, .6); transform: scale3d(.6, .6, .6);}
  to { opacity: 1; }
}
.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; transition: opacity 300ms ease-out transform 600ms cubic-bezier(0.23, 1, 0.32, 1);}
 
.section-map{padding:25vh 0px; }
.section-dark {
	border: none;
	background: #303C46;
	background: linear-gradient(225deg, #39444d , #22292e 88%);
	background-image: -ms-linear-gradient(225deg, #39444d , #22292e 88%);
	background-image: -moz-linear-gradient(225deg, #39444d , #22292e 88%);
	background-image: -o-linear-gradient(225deg, #39444d , #22292e 88%);
	background-image: -webkit-linear-gradient(225deg, #39444d , #22292e 88%);
	background-image: linear-gradient(225deg, #39444d , #22292e 88%);
}

.section-distributions{padding:0px 0px 15vh 0px}
.section-distributions:after{ content: 'Sales Country'; width:100%; position: absolute;  z-index: 2; display: block; left: -50px; top: -150px; font-size: 120px; font-weight: 900; color:rgba(246,242,240,.75); writing-mode: vertical-lr; text-orientation: mixed;pointer-events: none;  }


.distributions{width: 100%;  margin: auto; padding:5vh 10px; display: flex; flex-wrap: wrap; list-style: none;position: relative; }
.distributions li {width: calc( 100%/10 - 40px); margin: 20px;  padding: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; position: relative;  border-radius: 50px; z-index:0;background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); box-shadow: 0 1px 8px rgba(64, 64, 64, .5);/**/}
.distributions li span{text-align: center; margin: auto;}
.distributions li img {  border-radius: 50px; position: relative; }
.distributions li img::after { content: ' '; display: block;  position: absolute; z-index: 1; left:-20px; top: -10%; width:156px; height:156px; opacity:1;  border-radius:99rem; background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); }

@media (max-width:820px) {
 .section-map{padding:5vh 0px; }
   
.distributions li {width: calc( 100%/3 - 40px); }
.section-distributions:after{display: none;}   
}


.location-map { position: relative;}
.location-container { position: absolute; top: 50%; left: 50%;}
.section-dark .location-map .map { opacity: 0.5;}

 
/* Map: Large */

.location-map-lg .map { height: 580px; width: 1174px;}
@media (min-width: 568px) {
.location-map-lg { height: 520px; }
.location-map-lg .location-container { height: 580px; width: 1174px; margin: -290px 0 0 -582px; }
.location-map .actions {position: absolute; bottom: 0; left: 0; width: 100%;}

}
@media (min-width: 568px) and (max-width: 1199px) {
.location-map-lg {height: 450px;}
.location-map-lg .location-container {-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);-o-transform: scale(0.9);transform: scale(0.9);}
}
@media (min-width: 568px) and (max-width: 991px) {
.location-map-lg {height: 424px;}
.location-map-lg .location-container { -webkit-transform: scale(0.68); -moz-transform: scale(0.68); -ms-transform: scale(0.68);-o-transform: scale(0.68);transform: scale(0.68);}
}
@media (min-width: 568px) and (max-width: 767px) {
.location-map-lg {height: 290px;}
.location-map-lg .location-container { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5);-o-transform: scale(0.5);transform: scale(0.5);}
}
@media (max-width: 567px) {
.location-map-lg .map {display: none;}
.location-map-lg .location-container { position: inherit; top: auto; left: auto; max-width: 380px; margin: 0 auto; padding: 25px 0;}
.location-container:after, .location-container:before {display: block; content: ""; clear: both;}
.location-map-lg .location-map {padding: 0 30px;}
}

/* Map: Pin */
.location-pin,.location-pin:after {background-color: #fba419;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;}
.location-pin { position: relative; z-index: 999; display: block;height: 12px;width: 12px;}
.location-pin-lg { position: relative;display: block;height: 20px;width: 20px;}
.location-pin:after { position: absolute; top: 50%; left: 50%; display: block; content: ""; height: 22px; width: 22px; margin: -11px 0 0 -11px; -webkit-animation: pulsate 2s linear; animation: pulsate 2s linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.location-pin-lg:after {height: 40px; width: 40px; margin: -20px 0 0 -20px;}
.location-map-sm .location { height: 8px; width: 8px; cursor: pointer;}
.location-map-sm .location-pin { height: 8px; width: 8px;}
.location-map-sm .location-pin:after { height: 16px; width: 16px; margin: -8px 0 0 -8px;}
@-webkit-keyframes pulsate{
0% {-webkit-transform: scale(0);opacity: .05;}
20% { -webkit-transform: scale(0.7);opacity: .1;}
40% {-webkit-transform: scale(0.9); opacity: .2;}
60% { -webkit-transform: scale(1.1); opacity: .3;}
100% {-webkit-transform: scale(1.4); opacity: 0;}
}
@keyframes pulsate{
0% {transform: scale(0); opacity: .05; }
20% { transform: scale(0.7); opacity: .1; }
40% {transform: scale(0.9);opacity: .2; }
60% { transform: scale(1.1);opacity: .3;}
100% {transform: scale(1.4);opacity: 0; }
}

/*Map: Locations */

.location { position: absolute; z-index: 998; height: 12px; width: 12px;}
.location-name { position: absolute; z-index: 999; display: block; height: 28px;}
.location-name span { display: block; height: 28px; padding: 0 10px; background-color: #fba419; color: #fff; font-size: 14px; line-height: 28px; white-space: nowrap;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px; -webkit-box-shadow: 0 5px 20px -5px rgba(11,27,38, 0.2); box-shadow: 0 5px 20px -5px rgba(11,27,38, 0.2);}
.location-name:after { position: absolute; z-index: -1; display: block; content: ""; height: 1px; width: 20px; background-color: #545a5e;}
	
/* Locations position*/	
.location-usa {top: 200px;left: 267px;}
.location-usa .location-name {bottom: 70px;left: 70px;}
.location-usa .location-name:after { bottom: -31px; left: -75px; width: 90px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.location-map-sm .location-usa { top: 90px; left: 116px;}
 

.location-mexico {top: 280px;left: 210px;}
.location-mexico .location-name {bottom: 28px;left: 28px;}
.location-mexico .location-name:after {bottom: -10px; left: -24px; width: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.location-map-sm .location-mexico {top: 98px;left: 132px;}
 
.location-argentina {top: 470px;left: 340px;}
.location-argentina .location-name {top: -9px; left: 110px;}
.location-argentina .location-name:after {top: 50%; left: -100px; width: 100px;}
.location-map-sm .location-argentina {top: 108px;left: 126px;}

 
.location-colombia {top:340px; left: 300px;}
.location-colombia .location-name {bottom:-5px;right: 54px;}
.location-colombia .location-name:after { bottom: 10px; right: -49px; width: 100px; }
.location-map-sm .location-colombia {top: 74px; left: 66px;}



.location-ecuador {top:360px; left: 280px;}
.location-ecuador .location-name {top: -9px; left: 110px;}
.location-ecuador .location-name:after {top: 50%; left: -100px; width: 100px;}
.location-map-sm .location-ecuador {top: 108px;left: 126px;}


.location-peru {top:380px; left: 290px;}
.location-peru .location-name {bottom:-5px;right: 54px;}
.location-peru .location-name:after { bottom: 10px; right: -49px; width: 100px; }
.location-map-sm .location-peru {top: 74px; left: 66px;}

.location-brazil {top: 430px;left: 370px;}
.location-brazil .location-name {top: -9px; left: 110px;}
.location-brazil .location-name:after {top: 50%; left: -100px; width: 100px;}
.location-map-sm .location-brazil {top: 108px;left: 126px;}


.location-sweden { top: 84px;left: 580px; }
.location-sweden .location-name {bottom: 24px;right: 24px;}
.location-sweden .location-name:after { bottom: -10px; right: -24px; width: 30px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.location-map-sm .location-sweden {top: 62px;left: 232px;}
	
	

.location-poland {top: 160px;left: 560px;}
.location-poland .location-name {bottom: 73px;left: 73px;}
.location-poland .location-name:after { bottom: -32px; left: -78px; width: 95px; -webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-poland {top: 60px;left: 242px;}
	
 
.location-czech {top:174px; left: 540px;}
.location-czech .location-name {bottom:-5px;right: 54px;}
.location-czech .location-name:after { bottom: 10px; right: -49px; width: 100px; }
.location-map-sm .location-czech {top: 74px; left: 66px;}
 


 
.location-israel {top: 230px;right: 500px;}
.location-israel .location-name {bottom: 50px;left: 50px;}
.location-israel .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-israel {top: 90px;right: 72px;}




.location-jordan {top: 250px;right: 480px;}
.location-jordan .location-name {bottom: 50px;left: 50px;}
.location-jordan .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-jordan {top: 90px;right: 72px;}


.location-egypt { top: 240px;left: 610px; }
.location-egypt .location-name {bottom: 24px;right: 24px;}
.location-egypt .location-name:after { bottom: -10px; right: -24px; width: 30px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.location-map-sm .location-egypt {top: 62px;left: 232px;}

 
.location-saudi {top: 275px;left: 690px; }
.location-saudi .location-name {bottom:-5px;right: 54px;}
.location-saudi .location-name:after {bottom: 10px; right: -49px; width: 100px;}
.location-map-sm .location-saudi {top: 74px; left: 66px;}



.location-africa {top: 440px;left: 600px;}
.location-africa .location-name {bottom: 50px;left: 50px;}
.location-africa .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-africa {top: 90px;right: 72px;}


.location-russia {top: 80px;right: 260px;}
.location-russia .location-name {bottom: 50px;left: 50px;}
.location-russia .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-russia {top: 90px;right: 72px;}


.location-korea {top: 200px;right: 210px;}
.location-korea .location-name {bottom: 50px;left: 50px;}
.location-korea .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-korea {top: 90px;right: 72px;}


.location-tokyo {top: 240px;right: 150px;}
.location-tokyo .location-name {bottom: 50px;left: 50px;}
.location-tokyo .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-tokyo {top: 90px;right: 72px;}

 .location-china { top: 214px;right: 280px; }
.location-china .location-name {bottom: 24px;right: 24px;}
.location-china .location-name:after { bottom: -10px; right: -24px; width: 30px; -webkit-transform: rotate(45deg); transform: rotate(45deg);}
.location-map-sm .location-china {top: 62px;left: 232px;}


/*.location-china {top: 232px; right:364px;}
.location-china .location-name {top: 78px;right: -45px;}
.location-china .location-name:after {left: 50%;top: -70px;height: 70px; width: 1px;}
.location-map-sm .location-china {top: 58px;left: 72px;}
*/ 

.location-taiwan {top: 254px;right: 220px;}
.location-taiwan .location-name {top: -9px; left: 110px;}
.location-taiwan .location-name:after {top: 50%; left: -100px; width: 100px;}
.location-map-sm .location-taiwan {top: 108px;left: 126px;}
	
	
.location-bengal {top: 264px;right:330px;}
.location-bengal .location-name {top: 140px;right:-26px;}
.location-bengal .location-name:after {left: 50%;top:-140px;height: 140px;width: 1px;}
.location-map-sm .location-bengal {top: 108px;left: 72px;}
	
	
.location-india {top: 274px;right:386px;}
.location-india .location-name {top: 70px;right:-26px;}
.location-india .location-name:after {left:38%;top:-70px;height: 70px;width: 1px;}
.location-map-sm .location-india {top: 108px;left: 72px;}


.location-lanka {top: 320px;right:364px;}
.location-lanka .location-name {top: 140px;right:-26px;}
.location-lanka .location-name:after {left: 50%;top:-140px;height: 140px;width: 1px;}
.location-map-sm .location-lanka {top: 108px;left: 72px;}


.location-thailand {top: 290px;right: 300px;}
.location-thailand .location-name {bottom: 50px;left: 50px;}
.location-thailand .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-thailand {top: 90px;right: 72px;}

.location-vietnam {top: 310px;right: 275px;}
.location-vietnam .location-name {bottom: 28px;left: 28px;}
.location-vietnam .location-name:after {bottom: -10px; left: -24px; width: 30px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}
.location-map-sm .location-vietnam {top: 90px;right: 72px;}



.location-philippines {top: 310px;right: 220px;}
.location-philippines .location-name {top: -9px; left: 110px;}
.location-philippines .location-name:after {top: 50%; left: -100px; width: 100px;}
.location-map-sm .location-philippines {top: 108px;left: 126px;}

.location-malaysia {top: 348px; right: 260px;}
.location-malaysia .location-name {top: -9px; left: 60px;}
.location-malaysia .location-name:after {top: 50%; left: -50px; width: 50px;}
.location-map-sm .location-malaysia {top: 108px;left: 126px;}

.location-indonesia {top: 388px; right: 200px;}
.location-indonesia .location-name {top: -9px; left: 60px;}
.location-indonesia .location-name:after {top: 50%; left: -50px; width: 50px;}
.location-map-sm .location-indonesia {top: 108px;left: 126px;}
 

.location-sydney {bottom: 102px;right: 83px;}
.location-sydney .location-name {bottom: 50px;left: 50px;}
.location-sydney .location-name:after {bottom: -22px;left: -58px;width: 75px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.location-map-sm .location-sydney {bottom: 44px;right: 36px;}

/*.location-london .location-name {-webkit-transform-origin: bottom right;transform-origin: bottom right;}
.location-silicon-valley .location-name {-webkit-transform-origin: top right;transform-origin: top right;}
.location-los-angeles .location-name {-webkit-transform-origin: top center;transform-origin: top center;}
.location-mexico .location-name {-webkit-transform-origin: bottom center;transform-origin: bottom center;}
.location-argentina .location-name,.location-frankfurt .location-name { -webkit-transform-origin: left center; transform-origin: left center;}
.location-miami .location-name,.location-paris .location-name,.location-colombia .location-name { -webkit-transform-origin: top left;transform-origin: top left;}
	
*/
@media (max-width: 1199px) {

.location-tokyo .location-name {left: auto;right: 50px;}
.location-sydney .location-name {left: auto;right: 50px;}
.location-tokyo .location-name:after, .location-sydney .location-name:after {left: auto;right: -58px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.location-colombia .location-name {bottom: 54px;right: -26px;}
.location-colombia .location-name:after {right: 3px; -webkit-transform: rotate(90deg);transform: rotate(90deg);}
}
@media (min-width: 568px) and (max-width: 767px) {
	.location-map-lg .location-name {height: 36px;font-size: 20px;line-height: 36px;}
}
@media (max-width: 567px) {
.location-map-lg .location {position: inherit;top: auto;bottom: auto;left: auto;right: auto;float: left;height: auto;width: 50%; margin-bottom: 8px;padding-left: 30px;}
.location-map-lg .location:after, .location-map-lg .location:before {display: block;content: "";	clear: both;}
.location-map-lg .location-pin {position: absolute;left: 0;top: 4px;margin: 5px 10px 5px;}
.location-map-lg .location .location-name {position: inherit; left: auto;right: auto;top: auto;bottom: auto;display: inline-block;background: transparent;color: #616366;box-shadow: none;}
.location-map-lg .location .location-name > span { position: inherit; left: auto; right: auto; top: auto; bottom: auto; display: inline-block; background: transparent; color: #616366;box-shadow: none;}
.location-map-lg .location-name:after {display: none;}
.section-dark .location-map-lg .location .location-name span {color: #fff;}
}

 

.section-contact-map > #map { height: 500px;width: 100%;}
.location-map .map { background: url("../images/index/map.svg") no-repeat center center;background-size: cover;}
    
/*circles effect */

.circles > * {  display: inline-block; vertical-align: top; position: relative; margin: 0 2%;}

.circle { width: 45%; height: 45%; border-radius: 100%; box-shadow: 0 1px 0 0 rgba(255, 192, 0, 0.25), 0 -1px 0 0 rgba(255, 64, 0, 0.25), 1px 0 0 0 rgba(255, 192, 0, 0.25), -1px 0 0 0 rgba(255, 64, 0, 0.25), 1px -1px 0 0 rgba(255, 128, 0, 0.5), -1px 1px 0 0 rgba(255, 128, 0, 0.5), 1px 1px 0 0 rgba(255, 255, 0, 0.75), -1px -1px 0 0 rgba(255, 0, 0, 0.75);}

.circle:nth-of-type(2) {position: absolute; top: 27%; left: 27%;  box-shadow: 0 3px 0 0 rgba(225, 131, 194, 0.25), 0 -3px 0 0 rgba(165, 181, 222, 0.25), 3px 0 0 0 rgba(225, 131, 194, 0.25), -3px 0 0 0 rgba(165, 181, 222, 0.25), 3px -3px 0 0 rgba(195, 156, 208, 0.5), -3px 3px 0 0 rgba(195, 156, 208, 0.5), 3px 3px 0 0 rgba(255, 105, 180, 0.75), -3px -3px 0 0 rgba(135, 206, 235, 0.75); animation: rotateThis 1s linear infinite;}
.circle:nth-of-type(3) { box-shadow: 0 1px 0 0 rgba(192, 63, 153, 0.25), 0 -1px 0 0 rgba(214, 69, 99, 0.25), 1px 0 0 0 rgba(192, 63, 153, 0.25), -1px 0 0 0 rgba(214, 69, 99, 0.25), 1px -1px 0 0 rgba(203, 66, 126, 0.5), -1px 1px 0 0 rgba(203, 66, 126, 0.5), 1px 1px 0 0 rgba(181, 59, 180, 0.75), -1px -1px 0 0 rgba(225, 72, 71, 0.75);}

@keyframes rotateThis {
from { transform: rotate(0deg) scale(1); }
to { transform: rotate(360deg) scale(1); }
}

.c-circle { position: absolute; top: 50%; left: 50%;width: 100%;  padding-top: 100%;  -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 0;}
.c-circle div { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);  border: 1px solid #fff; border-radius: 50%; -webkit-animation: circle 8s infinite; animation: circle 8s infinite}
.c-circle div:nth-child(1) { -webkit-animation-delay: .25s; animation-delay: .25s;  }
.c-circle div:nth-child(2) {-webkit-animation-delay: .5s; animation-delay: .5s}
.c-circle div:nth-child(3) {-webkit-animation-delay: .75s; animation-delay: .75s; }
   @-webkit-keyframes circle {
0% { width: 0; height: 0; opacity: 0}  
50% { opacity: .5}
100% { width: 70%; height: 70%; opacity: 0 }
}
@keyframes circle {
0% { width: 0; height: 0; opacity: 0}  
50% { opacity: .5}
100% { width:70%; height: 70%; opacity: 0 }
}