˙@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&family=Noto+Serif+TC:wght@300;600&family=Playfair+Display:wght@500&family=Karla:wght@400;500;700&family=Hind+Siliguri:wght@500&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' */
}
a{display: block;transition: all 0.4s ease;}
a:hover{text-decoration: none;}
html .text-color-dark:hover{color: #247c68 !important;color: var(--main)!important;}
#revolutionSlider{
  /* border-bottom: 5px solid #247c68;
  border-bottom: 5px solid var(--main) */
}
.text-main2{color: #faaa56;color: var(--second)}
.bg-maindark{background-color: #23635d;background-color: var(--maindark)}
.line-height-xs{line-height:18px}
.serif{
    letter-spacing: 1px;
    font-family: 'Noto Serif TC',-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;
}
.sans{
    letter-spacing: 1px;
    font-family:'Noto Sans TC',-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; 
}
.karla{
  font-family:'Karla';
}
.titleBox .en {
    position: relative;
    font-style: normal;
    z-index: 0;
    display: block;
    font-size: 40px;
    letter-spacing: .02em;
    color: #6f6f6f;
    font-family:'Hind Siliguri', "Times New Roman", "Noto Sans TC", sans-serif;
}
.titleBox .title {
    position: relative;
    display: inline-block;
    font-size: 25px;
    letter-spacing: .1em;
    font-weight: 500;
    margin-top: 10px;
    /* font-family: "Noto Serif TC", serif; */
    color: #323232;
}
.titleBox .title:before{
    content: "\f058";
    position: relative;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    color: #247c68;
    font-size: 1.6em;
    color: var(--main);
    top: 5px;
    /* margin-left: -50px; */
    margin-right: 8px;
}
.titleBox .title.noicon:before{content: none}
.page-date{
    position: relative;
    display: inline-block;
    color: #666
}
.page-date::after{
    content: '';
    position: absolute;
    right: -33px;
    top: 14px;
    width: 25px;
    height: 1px;
    background-color: #666;
}
.titleBox .title::after{
    content: '';
    position: absolute;
    right: -40px;
    top: 33px;
    width: 35px;
    height: 1px;
    background-color: #282828;
}
.titleBox .title.text-white::after,.titleBox .title.text-light::after{
    background-color: #fff;
}
.pagetitle{
    /* border-bottom: 1px solid #444; */
    margin-bottom: 15px;
    padding-bottom: 8px;
    line-height: 1.6;
    font-size: 26px;
    display: inline;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(241, 130, 14, 0)));
    background-image: -webkit-linear-gradient(rgba(241, 130, 14, 0));
    background-image: -o-linear-gradient(rgba(241, 130, 14, 0));
    background-image: linear-gradient(rgba(241, 130, 14, 0));
}
.post_title{ font-size: 24px;}
.poster_box{
    margin-bottom: 20px;
    transition: all .5s;
    padding:15px 0;
    align-items: center;
}
.poster_box:hover{
    webkit-box-shadow: -10px 10px 40px rgba(4, 4, 4, 0.1);
    box-shadow: -10px 10px 40px rgba(4, 4, 4, 0.1);
}
.poster_box:hover .pagetitle{
    /*  border-bottom: 1px solid var(--second); */
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff8303));
    background-image: -webkit-linear-gradient(#f1820e);
    background-image: -o-linear-gradient(#f1820e);
    background-image: linear-gradient(#f1820e);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 28px;
}
.poster_box:hover i,.about-box [tab]:hover i,.links_box:hover i{
    -webkit-animation: navItemArrow 600ms ease;
    animation: navItemArrow 600ms ease;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.side-title{position: relative;}
.side-title::before{
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  display: block;
  transform: skewX(30deg);
  background: #facd7b;
  width: 30px;
  height: 50px;
  transition: all 0.3s ease;
  z-index: 0;
}
.side-title strong{z-index: 2}
.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all 0.2s ease;
}
.cta::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  display: block;
  transform: skewX(30deg);
  background: rgb(250 205 123 / 50%);
  width: 36px;
  height: 56px;
  transition: all 0.3s ease;
}
.cta span {
  position: relative;
  font-size: 16px;
  line-height: 18px;
  font-weight: 900;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  vertical-align: middle;
  color: #444;
}
.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.cta:hover:before {
  width: 100%;
  background: #faaa56;
}
.cta:hover svg {
  transform: translateX(0);
  stroke: #fff;
}
.cta:hover span{color: #fff;}
.cta:active {
  transform: scale(0.96);
}
.index_news::before{
  content: attr(data-line);
  font-family: 'Playfair Display', sans-serif;
  display: block;
  position: absolute;
  top: 0;
  /* right: calc(100% - 35px); */    
  left: 0;
  color: #f3f8f8;
  font-size: 180px;
  line-height: 200px;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}
.index_news::after{
  content: '';
  position: absolute;
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  height: 100%;
  left: 200px;
  top: 0;
}
.about-ul li{
    position: relative;
    display: inline-block;
    padding: 5px 16px;
    border-radius: 25px;
    background-color: #fff;
    margin-right: 8px;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}
.about-ul li a{color:#23635d;}
.about-ul li a::after{
    position: absolute;
    display: block;
    content: '';
    width: 108%;
    height: 122%;
    top: -11%;
    left: -4%;
    border: 1px solid #71ddd3;
    border-radius: 25px;
    z-index: 0;
}
.about-ul li:hover ,.about-ul li.active{ background: #faaa56;background: var(--second);}
.about-ul li:hover a,.about-ul li.active a{ color:#432404;}
.about-ul li:hover a::after,.about-ul li.active a:after{ border: 1px solid #faaa56;border: 1px solid var(--second);}
.tabs.tabs-simple .nav-tabs > li .nav-link{padding: 15px}
.about-box [tab]{display: none;}
.about-box [tab].active{display: block;transition: all 0.3s ease;}
.about .cover.h100,.index_about_section{height: 550px;padding-bottom: 0}
  #revolutionSlider2,.tp-bgimg ,.slotholder,.slotzoom-vertical,.tp-revslider-mainul{ height: 550px !important;}
.index_about_section .order-1{position: relative;height: 100%}
.post-medium{border:1px solid #eef4f2;}
.post-medium .page-date{color: #78978d;}
.post-medium .page-date::after{background-color: #78978d;}
.post-medium .bg-light.lt{min-height: 64px;transition: all 0.3s ease;}
.post-medium .bg-light.lt{background-color: #fafafa !important}
.custom-arrow {
  position: absolute;
  top: 50%;
  right: 25px;
  width: 40px;
  transform: translateY(-50%);
  transition: ease all 300ms;
}
.custom-arrow:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: -2px;
  width: 70%;
  border-top: 1px solid #1e1e24;
  transform: translateY(-50%);
}
.post-medium:hover.custom-arrow {
    width: 55px;
}
.custom-arrow:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 15px;
  height: 15px;
  border-top: 1px solid #1e1e24;
  border-right: 1px solid #1e1e24;
  transform: translateY(-50%) rotate(45deg);
}
.post a:hover h3{color: #23635d;color: var(--maindark);}
.post a:hover .custom-arrow:after{border-top: 1px solid  #23635d;border-top: 1px solid var(--maindark); border-right: 1px solid #23635d;border-right: 1px solid var(--maindark);}
.post a:hover .custom-arrow:before {border-top: 1px solid #23635d;border-top: 1px solid var(--maindark)}
.pos-r{position: relative;}
.footer_logo::before{
  content: '';
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #60646c;
  left: -1px;
}
#footer ul li{
  display: inline-block;
  list-style-type: none;
  padding: 5px 12px;
}
#footer ul li span{
  color: #fff;
  font-weight: 600;
}
#footer .page-date::after{
  top: 12px;
}
.main-img{max-width: 80%}
.tp-loader{display: none;}
.page-data p{font-size: 17px;line-height: 2;}
.page-data a{display: inline-block;}
.page-data img{display: inline-block; max-width: 100%; height: auto;}
.breadcrumb.bg-light{padding-left: 0}
.breadcrumb.bg-light li{
  position: relative;
}
.breadcrumb > li + li:before {
    color: inherit;
    opacity: 0.5;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f105";
    padding: 0 7px 0 5px;
}
.alx-vertical-lines{
  background: transparent url(../img/vertical-lines.png) repeat-y fixed center !important
}
#particles-js {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bg-flower::before{
  content: '';
  position: absolute;
  /* bottom: 30px; */
  width: 30%;
  height: 70%;
  background: url(../img/flower.png) center/cover;
  opacity: .1;
  filter: brightness(5);
}
.bg-flower::after{
  content: '';
  position: absolute;
  width: 20%;
  height: 40%;
  background: url(../img/flower.png) center/cover;
  opacity: .15;
  filter: brightness(5);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  bottom: 0;
  right: 40%;
}
.links_box{
  border-right: 1px solid #ececec;
  border-top: 1px solid #ececec;  
  transition: all 0.2s ease;
}
.links_box span{opacity: 0; transition: all 0.2s ease;}
.links_box:hover{
  webkit-box-shadow: -10px 10px 40px rgba(4, 4, 4, 0.1);
  box-shadow: -10px 10px 40px rgba(4, 4, 4, 0.1);
}
.links_box:hover span{opacity: 1;}
.links_box:nth-child(1){
  /* border-left: 1px solid #ececec; */
}
.links_box:nth-child(1),.links_box:nth-child(2),.links_box:nth-child(3),
.links_box:nth-child(4){
  border-top: none;
}
.links_box:nth-child(4n){border-right:none;border-bottom:1px solid #ececec;}


.links_img{
  background-size: cover;
  height: 100px;
  width: 100px;
  background-color: #e7f1f0;
  border-radius: 100%;
  margin: 10px auto 0;
}
.owl-carousel.show-nav-title .owl-nav button[class*="owl-"], 
.owl-carousel.show-nav-title .owl-nav button[class*="owl-"]:hover{
  color: #808080;
  background-color: #f3f3f3 !important;
  width: 30px;
  border-radius: 0;
  -webkit-transform: translate3d(0, -95%, 0);
    transform: translate3d(0, -95%, 0);
}
.owl-carousel.show-nav-title .owl-nav button.owl-prev{
    left: -63px;
}
.custom-box-shadow-2 {
    box-shadow: 0px 12px 90px -10px rgba(171, 191, 216, 0.6) !important;
}
section.custom-timeline {
  width: calc(100% - 30px);
  margin: 0 0 0 40px;
  padding: 0;
}
section.custom-timeline:after, section.custom-timeline:before {
  content: none;
}
section.custom-timeline .timeline-body:after {
  content: '';
  display: block;
  clear: both;
}
section.custom-timeline .timeline-bar {
  position: absolute;
  background:#8cb2a2;
  width: 3px;
  left: -3.6%;
  z-index: 0;
}
section.custom-timeline .timeline-box {
  position: relative;
  border: 0 !important;
  margin: 15px 0 !important;
  width: 100%;
  margin: 0;
  padding: 0;
}
section.custom-timeline .timeline-box.right {
  max-width: 100%;
}
section.custom-timeline .timeline-box.right:before {
  top: 50%;
  left: -3.8%;
  background: #8cb2a2 !important;
  box-shadow: 0 0 0 3px #ecf1f7, 0 0 0 6px #8cb2a2 !important;
  margin-top: 0;
  transform: translateY(-50%);
}
section.custom-timeline .timeline-box.right:after {
  top: 50%;
  left: -22px;
  background: #FDD55C;
  border: none;
  transform: translateY(-50%) rotate(45deg);
}
section.custom-timeline .timeline-box .experience-info, section.custom-timeline .timeline-box .experience-description {
  padding: 40px;
}
section.custom-timeline .timeline-box .experience-info p {
  opacity: 0.5;
  text-transform: uppercase;
  font-size: 11px;
}
section.custom-timeline .timeline-box .experience-info .from, section.custom-timeline .timeline-box .experience-info .to {
  display: inline-block;
  width: 49%;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.3;
}
section.custom-timeline .timeline-box .experience-info .from > span, section.custom-timeline .timeline-box .experience-info .to > span {
  display: block;
  text-transform: none;
  font-size: 16px;
}
section.custom-timeline .timeline-box .experience-info .company {
  font-size: 18px;
  letter-spacing: 2px;
  font-family: 'karla'

}
section.custom-timeline .timeline-box .experience-info .company > span {
  display: block;
  opacity: 0.5;
  text-transform: uppercase;
  font-size: 11px;
}

@media (max-width: 1199px) {
  section.custom-timeline {
    width: calc(100% - 60px);
    margin: 0 0 0 60px;
  }
  section.custom-timeline .timeline-bar {
    left: -5.1%;
  }
  section.custom-timeline .timeline-box.right:before {
    left: -5.5%;
  }
}
@media (max-width: 991px) {
  section.custom-timeline {
    width: calc(100% - 30px);
    margin: 0 0 0 20px;
  }
  section.custom-timeline .timeline-bar {
    left: -6.7%;
  }
  section.custom-timeline .timeline-box:before, section.custom-timeline .timeline-box:after {
    display: block !important;
  }
  section.custom-timeline .timeline-box.right {
    float: right;
  }
  section.custom-timeline .timeline-box.right:before {
    left: -7%;
  }
}
@media (max-width: 767px) {
  section.custom-timeline {
    width: 100%;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  section.custom-timeline .timeline-bar {
    display: none;
  }
  section.custom-timeline .timeline-box:before, section.custom-timeline .timeline-box:after {
    display: none !important;
  }
}
@media (max-width: 575px) {
  section.custom-timeline {
    padding-left: 0;
    padding-right: 0;
  }
}
.timeimg{
  max-width: 600px;
  overflow: hidden;
  margin-top: 15px;
  background-position: center;
  background-size: cover;
}
.box-shadow-0{box-shadow: none;}
html body .tabs.tabs-vertical.tabs-left .nav-tabs li .nav-link{border: 1px solid #eee;border-radius: 0;}
.list-borders li a,html body .tabs .nav-tabs li .nav-link{color: #676767;background: #fff;padding: 15px 10px;}
 html body .tabs .nav-tabs.point_tab li .nav-link{border-left:none;border-right:none;}
.list-borders li a.active{color:#247c68;color:var(--main)}
.tabs-left.tabs-vertical .nav.nav-tabs li a{
  border-right: none;
  border-left: none;
  position: relative;
  z-index: 2;
}
.tabs-left.tabs-vertical ul > li{margin-bottom: 15px;}
.tabs-left.tabs-vertical ul > li.active a{background: #247c68;background: var(--main); color: #fff !important}
.tabs-left.tabs-vertical .nav-tabs li.active .nav-link,
.tabs-left.tabs-vertical .nav-tabs li.active .nav-link:hover,
.tabs-left.tabs-vertical .nav-tabs li.active .nav-link:focus{background-color: #247c68;background-color: var(--main)}
.team_table.table{width: 800px}
.team_table th{background-color: #247c68;background-color: var(--main);color: #fff;border: none;}
.team_table th:nth-last-child(3),.team_table th:nth-last-child(2),.team_table th:nth-last-child(1){background-color:#e39e21}
.team_table td:nth-last-child(3),.team_table td:nth-last-child(2),.team_table td:nth-last-child(1){text-align: center;}
.team_table th:nth-last-child(3){position: relative;z-index: 2}
.team_table th:nth-last-child(3):before{
  content: '';
  width: 30px;
  height: 51px;
  position: absolute;
  left: -15px;
  top: -1px;
  background-color:#e39e21;
  transform: skewX(-30deg);
  z-index: -1;
}
.team_table td{vertical-align: middle;padding: 15px 5px;}
.team_table td[colspan]{
  color: #247c68;
  color: var(--main);
  font-size: 16px;
  text-align: left;
  font-weight: 600;
  background-color: #e9f3ee;
  border-top: 1px solid #247c68;
  border-bottom: 1px solid #247c68;
  border-top: 1px solid var(--main);
  border-bottom: 1px solid var(--main);
}
.select-box{
  line-height: 49px;
}
.select-box option{display: none;}
.port-project-info{margin-bottom: 10px;}
.infoex tr td{padding-bottom: 10px;}
.infoex tr td:first-child{
  color: #323335;
  display: inline-block;
  font-weight: 700;
  width: 150px;
}
.language{
    position: relative;
    z-index: 1;
    margin-left: 10px;
    width: 118px;
}
.language > a{
  display: block;
  background-color: #247c68;
  background-color: var(--main);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 1px;
  color: #fff !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 5px 37px 5px 16px;
  text-transform: uppercase;
}
#header .header-nav-top .nav > li.language > a:hover,#header .header-nav-top .nav > li.language > a:focus,
#header .header-nav-top .nav > li.language > a:active{
  background-color: #247c68;
  background-color: var(--main)
}
.language ul {
  position: absolute;
  top: 110%;
  width: 118px;
  opacity: 0;
  padding-left: 0;
  font-weight: 300;
  letter-spacing: 1px;
  pointer-events: none;
  transition: all .5s;
}
.language.show ul {
  top: 100%;
  opacity: 1;
  pointer-events: auto;
}
.language ul a {
  display: block;
  padding: 8px 5px;
  text-align: center;
  color: #fff;
  background-color: #247c68;
  background-color: var(--main);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.language ul li{
  list-style: none;
}
.language ul a:hover {
  background-color: #faaa56;
  background-color: var(--second);
}
#map{
    height: 400px;
    width: 100%;
    min-height: calc(50vh + 60px);
    /* min-width: calc(100% - 10%); */
}
.contact-map iframe{width: 100%;min-height: 450px}
.content-grid .content-grid-item .counters{width: calc(100% - 48px)}
.visible-x5{display: none !important}
.hidden-x5{display: block !important}
select.team-select{
  -webkit-appearance:none;
  background-color: #23635d;
  background-color: var(--maindark);
  color: #fff;
  padding: 8px 30px 8px 12px;
  height: 45px;
}
select.team-select:focus{  background-color: #23635d;background-color: var(--maindark); color: #fff;}
select~label{
  display: block;
  position: absolute;
  bottom: 13px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  right: 26px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  width: 8px;
  height: 8px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tab-pane p{font-size: 16px: }
.underline.{border-bottom: 1px solid #444;padding-bottom: 2px;}
.item-block{
  -webkit-box-shadow: 0px 1px 10px 6px #0000000d;
  box-shadow: 0px 1px 10px 6px #0000000d;
  border-radius: 4px;
  margin-bottom: 80px
}
.item-block .cover{
  z-index: 2;
  position: relative;
  transform: translate(-50px, -30px);
  width: 120%;
}
.bg-color-light.dk{background-color:#eef4f2 !important}
.honor .bg-color-light{min-height: 300px;position: relative;z-index: 2}
.custom-step-item .step {
  position: relative;
  text-align: center;
  clear: both;
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 600;
}
.custom-step-item .step:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: -20px;
  height: 63px;
  border-left: 1px solid #fff;
}
.custom-step-item .step .step-number {
  display: block;
  font-size: 2.5em;
  font-weight: 600;
  line-height: 1;
}
.custom-step-item .step-content {
  margin-left: 50px;
}

.owl-carousel.numbered-dots .owl-dots {
  display: inline-block;
  counter-reset: dots;
  margin-left: 70px;
}
.owl-carousel.numbered-dots button.owl-dot span {
  width: 30px;
  height: 30px;
}
.owl-carousel.numbered-dots button.owl-dot span:before {
  counter-increment: dots;
  content: counter(dots);
  color: #245432;
  font-weight: bold;
  line-height: 2.2;
}
.owl-carousel.numbered-dots button.owl-dot.active span:before, .owl-carousel.numbered-dots button.owl-dot:hover span:before {
  color: #FFF;
}
.owl-carousel.numbered-dots button.owl-dot:hover {
  opacity: 0.5;
}
.owl-carousel.owl-theme button.owl-dot span {
  background: #eef4f2;
}
section.index_news{min-height:654px}
.accordion-toggle {transition: ease all 300ms;}
.accordion-toggle .fas.fa-icon:before{content: "\f068";}
.accordion-toggle.collapsed .fas.fa-icon:before{content: "\f067";}
.f25em{font-size: 2.5em}
.light_content img{
  border: 10px solid #eef4f2;
  border: 10px solid var(--mainlight);
  padding:10px; 
  display: block;
  max-width: 100%;
  height: auto;
}
.light_content img+p{
  /* font-weight: 600; */
}


















:root{
    --font:Arial,-apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", "Microsoft JhengHei" ,"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;
    --main:#268077;  /* #1d847a */
    --maindark:#23635d; /* #23635d */
    --mainlight:#eef4f2;
    --second:#faaa56;
    --seconddark:;
    --seconddlight:;
}
::-webkit-scrollbar {
    -webkit-appearance: none;
}

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

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

::-webkit-scrollbar-thumb {
    background-color: #23635d;
    background-color: var(--maindark);
    border-radius: 10px;
    border: 5px solid transparent;
}

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

/*
| ----------------------------------------------------
| responsive
| ----------------------------------------------------
*/
@media (max-width: 1367px) {}


@media (max-width: 1025px)and (min-width: 770px){
  #header .header-logo img{width: 280px !important;height: 73px!important}
  #header .header-nav-main nav > ul > li > a{font-size: 18px}
}


@media (max-width: 769px) {
  #header .header-row{flex-wrap: wrap}  
  .header-logo img{width: 350px !important;height: 85px !important}
  .index_about_section{height: 600px}
  #revolutionSlider2,.tp-bgimg ,.slotholder,.slotzoom-vertical,.tp-revslider-mainul{ height: 595px !important;}
  .bg-flower::after,.index_news::before{display: none}
  .index_news::after{content: none}
  #header .header-nav.header-nav-dropdowns-dark { min-height: 80px;}
  .links_box:nth-child(4n){border-right:1px solid #ececec; border-top:1px solid #ececec;border-bottom: none}
  .links_box:nth-child(3n){border-right:none;}
  .custom-step-item .step{left:15px;}
  .item-block .cover{transform: translate(-10px, 20px);width: 105%;}
  .custom-step-item .step-content{margin-left: 0}  
  section.custom-timeline .timeline-box .experience-info, section.custom-timeline .timeline-box .experience-description{padding: 20px}
  .item-block{margin-bottom: 40px}



}


 /*iphone plus*/
@media (max-width: 415px) {
  .index_about_section .order-1{height: 300px}
  #revolutionSlider2,.tp-bgimg ,.slotholder,.slotzoom-vertical,.tp-revslider-mainul{ height: 300px !important;}
  .links_img{width: 100px;height: 100px}
  .header-logo img{width: 250px !important;height: 65px !important}
  .page-header.page-header-modern.page-header-background.page-header-background-sm{padding: 50px 0}
  #header .header-nav.header-nav-dropdowns-dark { min-height: 70px;}
  #header.header-effect-shrink .header-container{min-height: 50px}
  #header .header-nav{padding:0 }
  #header .header-logo{margin: 0;}
  .side-title::before{left:10px;}
  .contact-map iframe{min-height: 250px;overflow: hidden}
  .index_about_section{height: auto;}
  .about .cover.h100{height: 250px}
  .tabs .nav.nav-tabs{padding:0 15px }
  section.custom-timeline .timeline-box .experience-info, section.custom-timeline .timeline-box .experience-description{margin: 0 15px}
  section.custom-timeline .timeline-box .experience-info, section.custom-timeline .timeline-box .experience-description{padding: 30px 20px}
  .tabs-vertical,.tabs-vertical .tab-content{display: block}
  .tab-content{padding: 15px 0}
  .links_box,.links_box:nth-child(3n){border-top: 1px solid #ececec;border-right:1px solid #ececec;}
  .links_box:nth-child(2n){border-right:none;}
  /* .links_box:nth-child(4n){border-top:none;} */
  .language{width: 98px}
  .poster_box .cover{margin-bottom: 8px}
  section.section.section-no-border{margin-top: 0}  
  .titleBox .title::after{content: none}

     
}


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



/*iphone 5*/
@media (max-width: 321px) {
  /* #header .header-column .header-row{justify-content: start;} */
  .header-logo img {
    width: 220px !important;
    height: 55px !important;
  }
  .visible-x5{display: block !important}
  .hidden-x5{display: none !important}
  .about-ul li{padding: 5px 10px}
}


/*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) {}