@import url('https://fonts.googleapis.com/css2?family=Hind:wght@700&family=Prompt&display=swap');
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

html,body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
   /*  -webkit-user-select: none;   */                /* prevent copy paste, to allow, change 'none' to 'text' */
}
html{
  touch-action: manipulation !important;
  -ms-touch-action: manipulation !important;
}
body{
  -webkit-overflow-scrolling: touch;  
}
.image-layer{width: 100%;}
.language{position: relative;width: 90px !important;display: inline-block;}
/* .language:after{
  font-family: 'FontAwesome';
  content: "\f107";
  position: absolute;
  right: 40px;
  font-size: 13px;
  color:var(--color-five);
} */
/* .language>span{color:#fff;} */
.language ul{
  display: none;
  opacity: 0;
  background-color: #fff;
  padding: 10px 10px;
  width: 100%;
  height: 1px;
  transition: all 0.4s ease;
  text-align: center;
  position: absolute;
  box-shadow: 0 0 25px rgb(0 0 0 / 10%);
  z-index: 9;
  bottom: -20px;
  left: -35px;
}
.language:hover ul{
  opacity: 1;
  bottom: -101px;
  height: auto;
}
.language ul:before{
  content: '';
  position: absolute;
  top: -6px;
  left: 36px;
  border-style: solid;
  border-width: 0px 8px 6px 8px;
  border-color:  transparent transparent #fff transparent;
}
.language:hover ul li{padding: 6px;}
.language span a {color:var(--color-five);}
.language:before {
    position: absolute;
    content: '';
    left: -20px;
    top: 0px;
    bottom: 0px;
    width: 1px;
    opacity: 0.50;
    transform: rotate(20deg);
    background-color:#a5a5a5;
}
.logo .small img,.home_contact_logo{width: 155px;}
.slider_height{min-height: 300px;}
.footer_menu>li{
  display: inline-block;
  width: calc(100% / 4.1);
  vertical-align: top;
}
.footer_menu>li a{color: #fff;font-weight: 500;font-size: 18px;padding-bottom: 8px; display: inline-block;}
.footer_menu>li>ul>li,.timing a{display: block;color: #fff;}
.footer_menu>li>ul>li>a{font-size: 15px;opacity: .7;}
.footer_menu>li>ul>li>a:hover,.timing a:hover{opacity: 1;}
hr.border-white{border-color: #fff;opacity: .2;} 
.main-header .sticky-header .main-menu .navigation > li > a.active{color: var(--main-color)}
.main-header .main-menu .navigation > li.dropdown > a.active,.main-header .main-menu .navigation > li > a.active{text-shadow:0 0 8px rgb(255 255 255 / 90%)}
.map iframe{width: 100%;height: 400px;}
.bg-primary{background-color: var(--main-color) !important;}
.text-primary{color: var(--main-color)!important;}
.big-text.light{    -webkit-text-stroke-color: rgb(255 255 255 /15%);}
.shadow .location-block{margin-bottom: 10px;}
.shadow .inner-box{box-shadow: none;background-color: #fff0;padding: 15px;}
.shadow .inner-box a,.location-block .content .icon,.shadow .location-block .inner-box{color:#fff!important;}
.location-block .content .icon{background-color: rgb(255 255 255 / 25%)!important;}
.cta-section.contact:before{background: #fff;}
.container-fluid.shadow,.map iframe{position: relative; z-index: 5;}
.pos_r{position: relative;}
.sidebar-title span.pos_r ,.content span.pos_r{padding-left: 30px;font-weight: 300;font-family: 'Prompt',var(--font);}
.sidebar-title span.pos_r:before,.content span.pos_r:before{
    content: '';
    position: absolute;
    left: 13px;
    top: 2px;
    width: 1px;
    height: 30px;
    border-left: 1px solid #666;
    transform: rotate(24deg);
}
.content span.pos_r:before{height: 20px; border-left: 1px solid #c0c0c0;}
ol.num{padding-left: 30px;margin-top: 10px;}
ol.num li{ list-style: auto;font-size: 15px;color: var(--color-five);line-height: 1.6}
.prod-tabs .tab .image{padding-bottom: 55%;transform: translateY(50px);background-size: cover;}
.icon-box img.icon{width: 30px;transform: translateY(-4px);}
.service-block-four.style-two .inner-box:hover .icon-box img.icon{filter: brightness(50);}
.alternate h2{line-height: 1.5}
.mobile-menu .navigation li:last-child{
  background-color: #f9f9f9;
  text-align: center;
  border: none;
}

/* 20220830 add  */
.service-detail .owl-nav {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 50%;
    margin-top: -22px;
}
.service-detail .owl-nav .owl-prev{
    position: absolute;
    left: 0px;
    width: 40px;
    height: 40px;
    line-height: 34px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    color: var(--white-color);
    font-size: var(--font-20);
    font-family: "Flaticon";
    background-color: rgb(98 98 101 / 29%);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
.service-detail .owl-nav .owl-next {
    position: absolute;
    right: 0px;
    width: 40px;
    height: 40px;
    line-height: 34px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    color: var(--white-color);
    font-size: var(--font-20);
    font-family: "Flaticon";
    background-color: rgb(98 98 101 / 29%);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
.f28{
  font-size: 28px;
  line-height: 1.3;
  color: #666;
}










/* timeline-carousel */

.timeline-carousel {
  padding: 86px 6.9444% 90px 6.9444%;
  position: relative;
  overflow: hidden;
}
/* .timeline-carousel:after, .timeline-carousel:before {
  content:'';
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  width: 6.9444%;
  background-color: #1d1d1e;
  z-index: 3;
  width: 6.9444%;
} */
.timeline-carousel:after {
  left: 0;
}
.timeline-carousel:before {
  right: 0;
  opacity: 0;
}
.timeline-carousel .slick-list {
  overflow: visible;
}
.timeline-carousel .slick-dots {
  bottom: -73px;
}
.timeline-carousel h1 {
  color: white;
  font-size: 46px;
  line-height: 50pd;
  margin-bottom: 40px;
  font-weight: 900;
}
.timeline-carousel__image {
  padding-right: 30px;
}
.timeline-carousel__item {
  cursor: pointer;
}
.timeline-carousel__item .media-wrapper {
  opacity: 0.4;
  padding-bottom: 71.4%;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
  width: calc(100% - 30px);
}
.timeline-carousel__item-inner {
  position: relative;
  padding-top: 45px;
}
.timeline-carousel__item-inner:after {
  position: absolute;
  width: 100%;
  top: 45px;
  left: 0;
  content: '';
  border-bottom: 1px solid rgb(164 164 164 / 20%);
}
.timeline-carousel__item-inner .year {
  font-size: 36px;
  line-height: 36px;
  background-color: white;
  display: table;
  letter-spacing: -1px;
  padding-right: 10px;
  color: #1d1d1e;
  z-index: 1;
  position: relative;
  margin: -15px 0 20px;
  font-weight: 900;
}
.timeline-carousel__item-inner .year:after {
  content:'';
  position: absolute;
  display: block;
  left: -10px;
  top: 0;
  height: 100%;
  width: 10px;
  background-color: #fff;
  z-index: 3;
}
.timeline-carousel__item-inner .month {
  font-size: 18px;
  text-transform: uppercase;
  color: var(--main-color);
  display: block;
  margin-bottom: 10px;
  font-weight: 900;
}
.timeline-carousel__item-inner p {
  font-size: 18px;
  line-height: 1.6;
  width: 60%;
  font-weight: 400;
  margin-bottom: 15px;
}
.timeline-carousel__item-inner .read-more:after {
  content:'';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  border-bottom: 2px solid #b38c52;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.timeline-carousel__item-inner .read-more:hover:after {
  width: 100%;
}
.timeline-carousel__item-inner .pointer {
  height: 29px;
  position: relative;
  z-index: 1;
  margin: -4px 0 16px;
}
.timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
  position: absolute;
  content:'';
}
.timeline-carousel__item-inner .pointer:after {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  top: 0;
  left: 0;
  background-color: var(--main-color);
}
.timeline-carousel__item-inner .pointer:before {
  width: 1px;
  height: 100%;
  top: 0;
  left: 4px;
  background-color: var(--main-color);
}
.timeline-carousel .slick-active .media-wrapper {
  opacity: 1 !important;
  margin: 10px 0
}

.slick-dots {
  bottom: 60px;
  list-style: none;
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 2;
  margin: 30px 0;
}
.slick-dots li {
  cursor: pointer;
  display: inline-block;
  margin: 0 6px;
  position: relative;
  width: 10px;
  height: 10px;
}
.slick-dots li:last-child {
  margin-right: 0;
}
.slick-dots li.slick-active button {
  background: var(--main-color);
  border-color: var(--main-color);
}
.slick-dots li button {
  /* display: block;
  font-size: 0;
  width: 10px;
  height: 10px;
  border-radius: 25px;
  margin-bottom: 15px;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53); */
  font-size: 0;
  position: relative;
  width: 7px;
  height: 7px;
  margin: 0px 12px;
  border-radius: 50%;
  display: inline-block;
  background-color: var(--color-two);
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}
.slick-dots li button:before{
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  right: -7px;
  bottom: -7px;
  opacity: 0;
  border-radius: 50px;
  display: inline-block;
  border: 1px solid var(--main-color);
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}
.slick-dots li.slick-active button:before{
   opacity: 1;
}
.slick-dots li button:hover {
  background:  var(--main-color);
  border-color:  var(--main-color);
}

.link {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  z-index: 9999;
}
.link a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.link .fa {
  font-size: 28px;
  margin-right: 8px;
  color: #fff;
}
/* 20220830 add  */
.service-detail .owl-nav {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 50%;
    margin-top: -22px;
}
.service-detail .owl-nav .owl-prev{
    position: absolute;
    left: 0px;
    width: 40px;
    height: 40px;
    line-height: 34px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    color: var(--white-color);
    font-size: var(--font-20);
    font-family: "Flaticon";
    background-color: rgb(98 98 101 / 29%);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
.service-detail .owl-nav .owl-next {
    position: absolute;
    right: 0px;
    width: 40px;
    height: 40px;
    line-height: 34px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    color: var(--white-color);
    font-size: var(--font-20);
    font-family: "Flaticon";
    background-color: rgb(98 98 101 / 29%);
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}













:root{
    --font:"Microsoft JhengHei",-apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 5px;
}

::-webkit-scrollbar:horizontal {
    height: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent; 
}

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (max-width: 1441px) {
  /* .main-slider-carousel .owl-item{max-height:500px;} */
  .main-slider .slide{
    padding:140px 0px 0px;
  }
}


@media (max-width: 1367px) {}


@media (max-width: 1025px) {}

@media (max-width: 821px) {
  .welcome-section .image-column .image{width: 300px;height: 300px;}
  .prod-tabs .title-box h2{text-align: left;padding-left: 60px;}
  .main-header .header-upper .logo-box{width: 30%}
  .main-header .header-upper .upper-right{width: 70%;}
  .main-header .header-upper .logo-box .logo{max-width: 150px;}
  .main-header .main-menu .navigation{width: 100vw;text-align: center;}
}

@media (max-width: 769px) {}


 /*iphone plus*/
@media (max-width: 430px) {
  .prod-tabs .title-box h2{text-align: center;}
  .project-section ul.tab-btns.tab-buttons,.prod-tabs .title-box h2{padding-left: 0}
  .main-slider .image-layer{height: 40%;}
  .main-header .header-upper .logo-box{width: 100%}
  .main-header .header-upper .logo-box .logo{max-width: 250px;margin: 0 auto;}
  .main-slider-carousel .owl-item{max-height:120px;}
  .main-slider .owl-nav .owl-prev, .main-slider .owl-nav .owl-next{
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 10px;
  }
  .main-slider .owl-nav{width: auto;}
  .prod-tabs .tab .image{padding-bottom: 80%;background-position: bottom;}
  .cta-section{padding: 50px 0;background-position:80%;}
  .cta-section .pattern-layer{width: 64px; height: 135px;}
  .cta-section h2{text-shadow: 0 0 10px rgba(0 0 0 /10%);}
  .welcome-section .image-column .image{width: 100vw;height: 100vw;max-width: 100%;}
  .alternate h2{font-size: 24px;margin-bottom: 0}
  .contact h3.text-dark{font-size: 24px;}


     
}


/*iphone: 7px*/
@media (max-width: 400px) {}



/*iphone 5*/
@media (max-width: 321px) {}


/*iPhone XR*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 2) { 



}

/*iPhone XS*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 

}

/*iPhone XS Max*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 896px) 
    and (-webkit-device-pixel-ratio : 3) { 


}
/*橫拿*/
@media screen and  (orientation:landscape) {}
/*縱拿*/
@media screen and (orientation:portrait) {}
/*設備寬高比*/
@media screen and (device-aspect-ratio: 16/9) {}