/* Css For Potu */

/************ TABLE OF CONTENTS ***************
1. Fonts
2. Reset
3. Global
4. Main Header/style-one/style-two
5. Main Slider/style-one/style-two
6. Intro Section
7. Welcome Section
9. Cta Section
8. Research Fields
10. Testimonial Section
11. Researches Section
12. Team Section
14. Video
15. Fact Counter
16. News Section
19. Clients Section
20. Main Footer
21. Footer Bottom
22. Research Style Two
23. Innovative Solution
24. Discover Section
25. Testimonial Section
26. Chooseus Section
27. News Style Two
28. Page Title
29. Research Page Section
30. Research Details
31. Professor Page Section
32. Professor Details
33. About Section
34. Error Section
35. Blog Page Section
36. Blog Details
37. Blog Sidebar
38. Contact Section
39. Google Map


**********************************************/



/*** 

====================================================================
  Reset
====================================================================

 ***/
* {
  margin:0px;
  padding:0px;
  border:none;
  outline:none;
}


/*** 

====================================================================
  Global Settings
====================================================================

 ***/


:root{
  --theme-color: #005351;
  --theme-color-2: #2661FF;
  --secondary-color: #000000;
  --text-color: #000;
  --title-color: #000000;
  --text-font: "Noto Sans TC", sans-serif;
  --title-font: "Marcellus", "Noto Sans TC", sans-serif;
  --kai-font: "LXGW WenKai TC", "Marcellus", "Noto Sans TC", sans-serif;
}

body {
  font-size:16px;
  color: var(--text-color);
  line-height:26px;
  font-weight:400;
  font-family: var(--text-font);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center top;
  -webkit-font-smoothing: antialiased;
	letter-spacing: 1px;
}

.light_bg{
  background-color: #ffffff;
}

.large-container{
  max-width: 1840px;
  padding: 0px 50px;
  margin: 0 auto;
}

.container-fluid{
  padding: 0px;
}

.auto-container{
  position:static;
  max-width:1470px;
  padding:0px 15px;
  margin:0 auto;
}

.small-container{
  max-width:680px;
  margin:0 auto;
}

.boxed_wrapper{
  position: relative;
  margin: 0 auto;
  overflow: hidden !important;
  width: 100%;
  min-width: 300px;
}


a{
  text-decoration:none;
  transition:all 500ms ease;
  -moz-transition:all 500ms ease;
  -webkit-transition:all 500ms ease;
  -ms-transition:all 500ms ease;
  -o-transition:all 500ms ease;
}

a:hover{
  text-decoration:none;
  outline:none;
}

input,button,select,textarea{
  font-family: var(--text-font);
  font-weight: 400;
  font-size: 18px;
  background: transparent;
}

::-webkit-input-placeholder {
  color: inherit;
}

::-moz-input-placeholder {
  color: inherit;
}

::-ms-input-placeholder {
  color: inherit;
}

ul,li{
  list-style:none;
  padding:0px;
  margin:0px; 
}

input{
  transition: all 500ms ease;
}

button:focus,
input:focus,
textarea:focus{
  outline: none;
  box-shadow: none;
  transition: all 500ms ease;
}

p{
  position: relative;
  font-family: var(--text-font);
  color: var(--text-color);
  font-weight: 400;
  margin: 0px;
  transition: all 500ms ease;
}

h1,h2,h3,h4,h5,h6{
  position:relative;
  font-family: var(--title-font);
  font-weight: 400;
  color: var(--title-color);
  margin: 0px;
  transition: all 500ms ease;
}

/* Preloader */

.handle-preloader {
  align-items: center;
  -webkit-align-items: center;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  justify-content: center;
  -webkit-justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background: #000;
}

.preloader-close{
  position: fixed;
  z-index: 99999999;
  font-size: 14px;
  background: #fff;
  color: red;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  right: 30px;
  top: 30px;
  font-weight: 400;
}

.handle-preloader .animation-preloader {
  position: absolute;
  z-index: 100;
}

.handle-preloader .animation-preloader .spinner{
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  height: 150px;
  margin: 0 auto 45px auto;
  width: 150px;
}

.handle-preloader .animation-preloader .txt-loading {
  text-align: center;
  user-select: none;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  animation: letters-loading 4s infinite;
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  top:0;
  position: absolute;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading{
  font-family: var(--title-font);
  font-weight: 500;
  letter-spacing: 15px;
  display: inline-block;
  position: relative;
  font-size: 70px;
  line-height: 70px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.30);
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {animation-delay: 0.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {animation-delay: 0.4s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {animation-delay: 0.6s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {animation-delay: 0.8s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { animation-delay: 1s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { animation-delay: 1.2s;}
.handle-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { animation-delay: 1.4s;}
.handle-preloader .loader-section {
  background-color: #ffffff;
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}

.preloader .loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}

.handle-preloader .animation-preloader .txt-loading .letters-loading:before{
  color: #ffffff;
}

.handle-preloader .animation-preloader .spinner{
  border: 3px solid #ffffff;
  border-top-color: rgba(255, 255, 255, 0.5); 
}

/* Animación del preloader */
@keyframes spinner {
  to {
    transform: rotateZ(360deg);
  }
}
@keyframes letters-loading {
  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.centred{
  text-align: center;
}

.pull-left{
  float: left;
}

.pull-right{
  float: right;
}


figure{
  margin: 0px;
}

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  transition-delay: .1s;
  transition-timing-function: ease-in-out;
  transition-duration: .7s;
  transition-property: all;
}

.row{
  --bs-gutter-x: 30px;
}

/** button **/


.theme-btn{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  font-family: var(--text-font);
  color: #fff;
  text-align: center;
  border-radius: 40px;
  padding: 15px 32px;
  border: solid;
  border-width: 2px;
  z-index: 1;
  text-transform: capitalize;
  transition: all 500ms ease;
}

.theme-btn:hover{
  background: transparent;
}

.theme-btn span{
  position: relative;
  padding-right: 40px;
}

.theme-btn span:before{
  position: absolute;
  content: '\e900';
  font-family: 'icomoon';
  font-size: 16px;
  top: -2px;
  right: 0px;
  transition: all 500ms ease;
}

.theme-btn:hover span:before{
  transform: rotate(45deg);
}

.theme-btn-three{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  font-family: var(--text-font);
  color: #fff;
  background: #B9916E;
  text-align: center;
  padding: 15.5px 40px;
  z-index: 1;
  transition: all 500ms ease;
}

.theme-btn-three:hover{
  color: #fff;
}

.theme-btn-three span {
  position: absolute;
  width: 25%;
  height: 100%;
  transform: translateY(150%);
  border-radius: 50%;
  left: calc((var(--n) - 1) * 25%);
  transition: 0.5s;
  transition-delay: calc((var(--n) - 1) * 0.1s);
  z-index: -1;
  background: var(--secondary-color);
}

.theme-btn-three:hover span {
  transform: translateY(0) scale(2);
}

.theme-btn-three span:nth-child(1) {
  --n: 1;
}

.theme-btn-three span:nth-child(2) {
  --n: 2;
}

.theme-btn-three span:nth-child(3) {
  --n: 3;
}

.theme-btn-three span:nth-child(4) {
  --n: 4;
}

.parallax-bg{
  position: absolute;
  left: 0px;
  top: -30%;
  width: 100%;
  height: calc(100% + 30%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}


/** styled-pagination */

.pagination{
  position: relative;
  display: block;
}

.pagination li{
  position: relative;
  display: inline-block;
  margin: 0px 2px;
}

.pagination li a{
  position: relative;
  display: inline-block;
  font-size: 14px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  background: #FFF9F7;
  text-align: center;
  color: #656565;
  border-radius: 50%;
  z-index: 1;
  transition: all 500ms ease;
}

.pagination li a:hover,
.pagination li a.current{
  color: #fff;
  background: #1F1F1F;
}

.sec-pad{
  padding: 142px 0px 150px 0px;
}

.mr-0{
  margin: 0px !important;
}



@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 30px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}



.sec-title{
  position: relative;
  display: block;
  padding-bottom: 30px;
}

.sec-title:before{
  position: absolute;
  content: '';
  background-image: url(../images/shape/shape-10.png);
  width: 261px;
  height: 23px;
  left: 0px;
  bottom: 0px;
  background-repeat: no-repeat;
}

.sec-title h2{
  position: relative;
  display: block;
  font-size: 90px;
  line-height: 100px;
  font-weight: 500;
}

.sec-title h2 span{
  display: block;
  opacity: 0.4;
}

.sec-title.light h2{
  color: #fff;
}





/*** 

====================================================================
                        Home-Page-One
====================================================================

***/

.hamburger {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 40px;
	line-height: 40px;
  text-align: center;
	padding: 10px 0;
  cursor: pointer;
  overflow: hidden;
}

.hamburger__container {
  width: 55px;
  height: 20px;
  position: relative;
	margin-top: 12px;
}

.hamburger__inner {
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
}

.hamburger__inner::before {
  top: -8px;
}

.hamburger__inner::after {
  top: 8px;
}

.hamburger__inner::before, .hamburger__inner::after {
  width: 100%;
  height: 2px;
  background-color: #fff;
  position: absolute;
  content: "";
	left: 0;
}

.inside_navbtn .hamburger__inner::before, .inside_navbtn .hamburger__inner::after {
	background-color: #000;
}

.sticky-header .hamburger__inner::before, .sticky-header .hamburger__inner::after {
  background-color: #000;
}

.hamburger__hidden {
  width: 100%;
  height: 2px;
	background-color: #fff;
  position: absolute;
}

.inside_navbtn .hamburger__hidden{
	background-color: #000;
}

.sticky-header .hamburger__hidden{
	background-color: #000;
}


.hamburger__hidden::before {
  top: -8px;
}

.hamburger__hidden::after {
  top: 8px;
}

.owl-dots-none .owl-dots,
.owl-nav-none .owl-nav{
  display: none !important;
}

.owl-nav button{
  background: transparent;
}

.float-bob-y {
  animation-name: float-bob-y;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-y;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-y;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-y;
  -ms-animation-duration: 2s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-y;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}

.float-bob-x{
  animation-name: float-bob-x;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-name: float-bob-x;
  -webkit-animation-duration: 15s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: float-bob-x;
  -moz-animation-duration: 15s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: float-bob-x;
  -ms-animation-duration: 15s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -o-animation-name: float-bob-x;
  -o-animation-duration: 15s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
}


/** demo-switch **/

.demo-switch{
  position: fixed;
  top: 390px;
  left: 10px;
  z-index: 9999;
}

.demo-switch button{
  position: absolute;
  display: inline-block;
  left: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 28px;
  border-radius: 50%;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  opacity: 0;
}

.light_bg .demo-switch .demo-dark-bg button{
  opacity: 1;
}

.dark_bg .demo-switch .demo-dark-bg button{
  opacity: 0;
}

.light_bg .demo-switch .demo-light-bg button{
  opacity: 0;
}

.dark_bg .demo-switch .demo-light-bg button{
  opacity: 1;
}







.lenis.lenis-smooth {
  scroll-behavior: auto;
}

html.lenis {
  height: auto;
}




.nav-style-one .owl-nav button span{
  display: none !important;
}

.nav-style-one .owl-nav button{
  position: relative;
  display: inline-block;
  width: 74px;
  height: 74px;
  line-height: 74px;
  border-radius: 50%;
  text-align: center;
  transition: all 500ms ease;
	border: 1px solid var(--theme-color);
	margin-right: 20px;
}

.nav-style-one .owl-nav button:hover{
  background: var(--theme-color);
	border: 1px solid var(--theme-color);
}

.nav-style-one .owl-nav button.owl-prev:before{
  position: absolute;
  content: '\e907';
  font-family: 'icomoon';
  font-size: 20px;
  color: var(--theme-color);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button.owl-next:before{
  position: absolute;
  content: '\e907';
  font-family: 'icomoon';
  font-size: 20px;
  color: var(--theme-color);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 1px;
  transform: rotate(180deg);
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button.owl-prev:hover:before{
  transform: scale(0,0);
}

.nav-style-one .owl-nav button.owl-next:hover:before{
  transform: rotate(180deg) scale(0,0);
}

.nav-style-one .owl-nav button.owl-prev:after{
  position: absolute;
  content: '\e906';
  font-family: 'icomoon';
  font-size: 18px;
  color: #fff;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  transform: rotate(180deg) scale(0,0);
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button.owl-prev:hover:after{
  transform: rotate(180deg) scale(1,1);
}

.nav-style-one .owl-nav button.owl-next:after{
  position: absolute;
  content: '\e906';
  font-family: 'icomoon';
  font-size: 18px;
  color: #fff;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  transform: scale(0,0);
  transition: all 500ms ease;
}

.nav-style-one .owl-nav button.owl-next:hover:after{
  transform: scale(1,1);
}


@keyframes marqueslide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.dots-style-one .owl-dots{
  position: relative;
  display: inline-block;
  min-height: 30px;
  counter-reset: slides-num;
}

.dots-style-one .owl-dots::after {
  position: absolute;
  right: 0px;
  top: -14px;
  content: "/ 0" counter(slides-num);
  display: inline-block;
  font-size: 20px;
  line-height: 30px;
  color: rgba(0, 0, 0, 0.30);
  font-weight: 700;
  font-family: var(--text-font);
}

.dots-style-one .owl-dots button{
  position: absolute;
  top: -14px;
  right: 58px;
  counter-increment: slides-num;
  font-size: 20px;
  line-height: 30px;
  font-family: var(--text-font);
  color: var(--title-color);
}

.dots-style-one .owl-dots button.active:before{
  position: absolute;
  content: counter(slides-num);
}

.dots-style-one .owl-dots button.active:after{
  position: absolute;
  content: '0';
  top: 0px;
  right: 0px;
}

.dots-style-one .owl-dots button span{
  display: none !important;
}

.social-style-one{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: right;
}

.social-style-one li{
  display: inline-block;
  margin-right: 12px;
}

.social-style-one li:last-child{
  margin: 0px !important;
}

.social-style-one li a{
  position: relative;
  display: inline-block;
  width: 65px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  border: solid;
  border-width: 1px;
  border-radius: 50%;
  border-color: var(--secondary-color);
  font-size: 20px;
  font-weight: 700;
  color: var(--title-color);
  z-index: 1;
}

.social-style-one li a:hover{
  color: #fff;
  background: var(--secondary-color);
  font-size: 24px;
}

.social-style-one li a:before{
  position: absolute;
  content: '';
  background: var(--secondary-color);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1;
  transform: scale(0,0);
  border-radius: 50%;
  transition: all 500ms ease;
}

.social-style-one li a:hover:before{
  transform: scale(1,1);
}


/** slide-text-box **/

.slide-text-box{
  position: relative;
  background: #FBF5F1;
  padding: 0px;
}

.slide-text-box .text-list{
  position: relative;
  display: flex;
  align-items: center;
  width: max-content;
  animation: 135s marqueslide infinite linear;
}

.slide-text-box .text-list li{
  position: relative;
  display: inline-block;
  font-size: 220px;
  line-height: 277px;
  font-family: var(--title-font);
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 317px;
}

.slide-text-box .text-list li:last-child{
  margin: 0px;
}

.slide-text-box .text-list li:before{
  position: absolute;
  content: '';
  background: var(--secondary-color);
  width: 1px;
  height: 172px;
  top: 52px;
  right: -160px;
}

.slide-text-box .text-list li:last-child:before{
  display: none;
}


.slide-text-box.st-2 .text{
  position: relative;
  display: block;
  width: max-content;
  font-size: 200px;
  line-height: 270px;
  color: var(--title-color);
  font-weight: 700;
  animation: 135s marqueslide infinite linear;
}

.tabs-box .tab{
  position:relative;
  display:none;
  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
}

.tabs-box .tab.active-tab{
  display:block;  
}

.tabs-box .tab{
  transform:scale(0.9,0.9) translateY(0px);
}

.tabs-box .tab.active-tab{
  transform:scale(1) translateY(0px);
}

.mt_250{
  margin-top: 250px;
}

@-webkit-keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.big-image-box .image{
  position: relative;
  display: block;
  overflow: hidden;
}

.big-image-box .image img{
  width: 100%;
  transition: all 15s ease;
}

.big-image-box .image:hover img{
  transform: scale(1.5);
}

/** follow-section **/

.follow-section{
  position: relative;
  background: #F6EFE9;
}

.follow-section .outer-container{
  position: relative;
  padding: 0px 125px;
}

.follow-section .content-box{
  position: relative;
  border-top: solid;
  border-bottom: solid;
  border-width: 1px;
  border-color: var(--secondary-color);
  padding: 67px 0px;
}

.follow-section .content-box p{
  font-size: 20px;
  line-height: 50px;
  font-weight: 500;
  color: var(--title-color);
}

.follow-section .content-box p a{
  display: inline-block;
  font-weight: 700;
  text-decoration: underline;
  color: var(--title-color);
}

.follow-section .content-box p a:hover{

}

.theme-btn-two{
  position: relative;
  display: inline-block;
  font-size: 23px;
  line-height: 30px;
  color: #fff;
  font-weight: 500;
  background: var(--secondary-color);
  border: solid;
  border-width: 1px;
  border-color: var(--secondary-color);
  padding: 14px 40px;
  z-index: 1;
}

.theme-btn-two:hover{
  color: #fff;
}

.theme-btn-two:before{
  position: absolute;
  content: '';
  width: 0%;
  height: 100%;
  right: 0px;
  top: 0px;
  z-index: -1;
  transition: all 500ms ease;
}

.theme-btn-two:hover:before{
  width: 100%;
  left: 0px;
}

.list-style-one li{
  position: relative;
  display: block;
  font-size: 20px;
  line-height: 48px;
  font-weight: 500;
  color: var(--title-color);
  padding-left: 30px;
}

.list-style-one li:before{
  position: absolute;
  content: '\e90b';
  font-family: 'icomoon';
  font-size: 16px;
  left: 0px;
  top: 0px;
}

/** custome-mouse-pointer **/


.mouse-pointer {
  position: fixed;
  top: 50%;
  left: -100px;
  -webkit-transform: translate(200%, 200%);
  -ms-transform: translate(200%, 200%);
  transform: translate(200%, 200%);
  width: 10px;
  height: 10px;
  pointer-events: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 9999;
  -webkit-transition-property: width, height, background;
  -o-transition-property: width, height, background;
  transition-property: width, height, background;
  border-radius: 50%;
  overflow: hidden;
  font-size: 16px;
  text-indent: 0;
  border: none;
  mix-blend-mode: difference;
  background-color: #fff;
  -webkit-box-shadow: 0 0 0 transparent;
  -ms-box-shadow: 0 0 0 transparent;
  box-shadow: 0 0 0 transparent;
}

body.out .mouse-pointer {
  width: 0;
  height: 0;
}


/** text-overlay-animation **/

.overlay-anim-black-bg,
.overlay-anim-red-bg,
.overlay-anim-white-bg {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.overlay-anim-black-bg:after,
.overlay-anim-red-bg:after,
.overlay-anim-white-bg:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: 1s cubic-bezier(.858, .01, .068, .99);
  -o-transition: 1s cubic-bezier(.858, .01, .068, .99);
  transition: 1s cubic-bezier(.858, .01, .068, .99);
  z-index: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);       
}

.overlay-anim-black-bg:after{
  background: #222;
}

.overlay-anim-white-bg:after{
  background: #fff;
}

.overlay-anim-black-bg.overlay-animation:after,
.overlay-anim-red-bg.overlay-animation:after,
.overlay-anim-white-bg.overlay-animation:after {
  -webkit-transform: translateX(110%);
  -ms-transform: translateX(110%);
  transform: translateX(110%);
}


@-webkit-keyframes bounceSlide {
    0%,20%,50%,80%,100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes bounceSlide {
    0%,20%,50%,80%,100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

.bounce-slide {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: bounceSlide;
    animation-name: bounceSlide
}



.scroll-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  box-shadow: inset 0 0 0 2px rgba(255,111,15,.2);
  border-radius: 50%;
  z-index: 90000;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(15px);
  -ms-transform: translateY(15px);
  transform: translateY(15px);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear
}

.scroll-to-top.scroll-top-active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0)
}

.scroll-to-top::after {
  position: absolute;
  content: "\e91d";
  font-family: 'icomoon';
  text-align: center;
  line-height: 46px;
  font-size: 12px;
  color: var(--theme-color);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear
}

.scroll-to-top:hover::after {
  color: var(--theme-color)
}

.scroll-to-top:hover::before {
  opacity: 1
}

.scroll-to-top .scroll-top-inner path {
  stroke: var(--theme-color);
  stroke-width: 4;
  fill: transparent;
  box-sizing: border-box;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
}


.anim-icons {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}

.about-style-four .odometer.odometer-auto-theme .odometer-digit, 
.about-style-four .odometer.odometer-theme-default .odometer-digit{
  letter-spacing: 6px;
}

.about-style-five .odometer.odometer-auto-theme, 
.about-style-five .odometer.odometer-theme-default{
  letter-spacing: 3px;
}

.about-style-seven .left-content .count-outer span{
  display: inline-block;
  letter-spacing: 3px;
}

.feature-section .odometer.odometer-auto-theme .odometer-digit,
.odometer.odometer-auto-theme .odometer-digit{
  letter-spacing: 2px;
}

.about-style-ten .funfact-inner .single-item .count-outer span,
.about-style-four .funfact-inner .single-item .count-outer span,
.about-style-12 .funfact-inner .single-item .count-outer span,
.service-details-two .funfact-block-one .inner-box .count-outer span{
  display: inline-block;
}

@-moz-keyframes scroll-top1 {
    0% {
        -moz-transform: translateY(0%);
    }

    100% {
        -moz-transform: translateY(-100%);
    }
}

@-webkit-keyframes scroll-top1 {
    0% {
        -webkit-transform: translateY(0%);
    }

    100% {
        -webkit-transform: translateY(-100%);
    }
}




@keyframes marqueeinvert {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-moz-keyframes marqueeinvert {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

@-webkit-keyframes marqueeinvert {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

.borbtm_b{
	border-bottom: 1px solid #000;
}

.index-title-box{
	position: relative;
	display: flex;
	align-items: flex-end;
    justify-content: space-between;
	padding-bottom: 125px;
}

.inside-title-box{
	position: relative;
	display: flex;
	align-items: flex-end;
    justify-content: space-between;
	padding-bottom: 120px;
}

.inside_i-title-box{
	position: relative;
	display: flex;
	align-items: flex-end;
    justify-content: space-between;
	padding-bottom: 270px;
}

.current-projects-section .index-title-box{
	border-bottom: 1px solid #000;
}

.projects-progress-section .index-title-box{
	padding-bottom: 100px;
}

.current-projects-section{
	padding-top: 250px;
}

.projects-progress-section{
	padding-top: 130px;
}

.news-section{
	padding-top: 130px;
}

.insidepage-section{
	padding-top: 250px;	
}

.insidepage-section .sec-title-animation {
    border-bottom: 1px solid #000;
}

.insidepage-section .title_content{
	margin-bottom: 110px;
}

.projects-progress-section .title_content{
	margin-bottom: 110px;
}

.insidepage-section .title_content h5, .projects-progress-section .title_content h5{
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 15px;
}

.insidepage-section .title_content p, .projects-progress-section .title_content p{
	font-size: 14px;
}

.index-title-box h2, .inside-title-box h2{
	font-size: 130px;
}

.index-title-box h3, .inside-title-box h3{
	font-size: 24px;
	font-weight: bold;
}

.inside_i-title-box .en_title{
	font-size: 87px;
	font-family: var(--title-font)
}

.inside_i-title-box .tw_title{
	font-size: 16px;
	font-weight: bold;
}

.index_tabs{
	padding-top: 36px;
	padding-bottom: 130px;
	border-bottom: 1px solid #000;
}

.index_tabs-nav {
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
}

.projects_btn{
	display: flex;
	padding-top: 37px;
	margin-bottom: 240px;
}

.current_btn{
	display: flex;
	padding-top: 37px;
	margin-bottom: 155px;
}

.index_tabs-nav li, .projects_btn a, .current_btn a{
    cursor:pointer;
    padding: 8px 20px;
	border: 1px solid #000;
	text-align: center;	
	width: 240px;
	font-size: 16px;
	font-weight: bold;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.projects_btn a, .current_btn a{
	display: inline-block;
	padding: 8px 20px;
	width: 280px;
}

.index_tabs-nav li.active, .index_tabs-nav li:hover, .projects_btn a.active, .projects_btn a:hover, .current_btn a.active, .current_btn a:hover{
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: #fff;
}

.index_tabs-content .tab-panel{
   display: none;
  padding-top: 85px;
}

.index_tabs-content .tab-panel.active{
  display: block;
}

.index_tabs-content .index_tabs-img{
	margin: 0 auto 130px auto;
	max-width: 100%;
}

.index_tabs-text{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.index_tabs-text .title{
	width: 560px;
}

.index_tabs-text .title h5{
	font-size: 24px;
	font-weight: bold;
	padding-bottom: 20px;
}

.index_tabs-text .title p{
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
}

.index_tabs-text .content{
	width: 600px;
}

.index_tabs-text .content p{
	font-size: 14px;
	line-height: 25px;
}

.index_tabs-text .btn{
	text-align: right;
}

.index_tabs-text .btn a, .index_tabs-text .link_btn img{
	display: block;
	width: 70px;
	height: 70px;
}

.progress-mobile h5{
	font-size: 16px;
	font-weight: bold;
	font-family: var(--text-font);
	margin-bottom: 30px;
}

.progress-mobile p{
	font-size: 13px;
	line-height: 27px;
	margin-bottom: 130px;
}


.projects-progress-section .col-lg-4{
	padding-right: 35px;
	padding-left: 35px;
}

.projects-progress-section .progress_img{
	margin-bottom: 0;
}

.progress_img img{
	width:100%;
	display: block;
}

.progress_text{
	padding-top: 100px;
}

.progress_text .tag{
	background: var(--theme-color);
	color: #fff;
	display: inline-block;
	padding: 5px 25px;
	margin-right: 20px;
	font-size: 14px;
	font-weight: bold;
}

.progress_text .date{
	font-size: 18px;
	font-family: var(--title-font);
}

.progress_text .title{
	padding-top: 20px;
	font-size: 20px;
	font-weight: bold;
}

.index_more_btn{
	text-align: center;
	padding-top: 170px;
	padding-bottom: 130px;
}

.index_more_btn .theme-btn-three{
	position: relative;
    display: inline-block;
    font-size: 15px;
	font-family: var(--title-font);
    line-height: 27px;
    font-weight: 500;
    color: var(--theme-color);
    border: solid;
    border-width: 1px;
    border-color: var(--theme-color);
    border-radius: 50px;
    padding: 13px 75px;
    background: transparent;
}

.index_more_btn .theme-btn-three:hover{
	color: #fff;
}

.index_more_btn .theme-btn-three span{
	background: var(--theme-color);
}

.index_more_btn .theme-btn-three i{
	position: absolute;
	font-size: 18px;
	top: calc(50% - 9px);
	right: 45px;
}

.more_btn_w{
}

.about_brand_row .more_btn_w{
	margin-top: 90px;
}

.more_btn_w .theme-btn-three{
	position: relative;
    display: inline-block;
    font-size: 15px;
	font-family: var(--title-font);
    line-height: 27px;
    font-weight: 500;
    color: #fff;
    border: solid;
    border-width: 1px;
    border-color: #fff;
    border-radius: 50px;
    padding: 10px 75px;
    background: transparent;
}

.more_btn_w .theme-btn-three:hover{
	color: var(--theme-color);
}

.more_btn_w .theme-btn-three span{
	background: #fff;
}

.more_btn_w .theme-btn-three i{
	position: absolute;
	font-size: 18px;
	top: calc(50% - 9px);
	right: 45px;
}


.news-section .inner-box .single-item {
    position: relative;
    padding: 100px 120px 60px 0;
    border-bottom: 1px solid #000;
}

.news-section .inner-box .single-item .date {
    position: absolute;
    left: 0px;
    top: 60px;
    display: block;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
	font-family: var(--title-font);
    color: var(--title-color);
}

.news-section .inner-box .single-item .date span{
	font-size: 14px;
	display: inline-block;
	color: #b5b5b6;
	border: 1px solid #b5b5b6;
	width: 70px;
	text-align: center;
	margin-right: 4px;
	position: relative;
	top: -2.5px;
}

.news-section .inner-box .single-item .text-box h3 {
    position: relative;
    display: block;
    font-size: 20px;
    line-height: 24px;
    font-weight: bold;
	font-family: var(--text-font);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;	
}

.news-section .inner-box .single-item .btn-box{
	position: absolute;
    top: 29px;
    right: 0px;
}

.news-section .inner-box .single-item .btn-box img{
	width: 18px;
}

.news-section .inner-box .single-item .btn-box span {
    position: relative;
	top: 70px;
	right: 70px;
    display: inline-block;
    width: 18px;
    height: 18px;
	text-decoration: none;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.news-section .inner-box .single-item:hover .btn-box span{
	transform: rotate(45deg);
}

.news_tabs{
	display: flex;
	justify-content: space-around;
	padding: 40px 80px 180px 80px; 
}

.news_tabs a{
	display: inline;
	padding: 12px 10px;
	font-size: 16px;
	font-weight: 600;
	color: #000;
	border-bottom: 4px solid #fff;
	letter-spacing: 2px;
}

.news_tabs a.active{
	border-bottom: 5px solid var(--theme-color);
}

.news-wrap {
	width: min(100%, 1920px);
	margin: 0 auto;
}

.news-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 70px 90px;
}

.news-pic {
	aspect-ratio: 370 / 250;
	overflow: hidden;
	margin-bottom: 50px;
}

.news-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-info .news-meta{
	font-size: 14px;
	font-family: var(--title-font);
	margin-bottom: 15px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 20px;
}

.news-info .news-meta span{
	font-size: 12px;
	display: inline-block;
	color: #b5b5b6;
	border: 1px solid #b5b5b6;
	width: 70px;
	text-align: center;
	margin-right: 4px;
}

.news-info h3{
	font-size: 18px;
	font-weight: bold;
	font-family: var(--text-font);
	line-height: 26px;
	height: 52px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.page{
	padding: 150px 0 130px 0;
	line-height: 16px;
	font-size: 15px;
	text-align: center;
	font-family: var(--title-font);
}

.page .page_no{
	display: inline-block;
	padding: 0 22px;
	border-right: 1px solid #dcdddd;
	color: #dcdddd;
}

.page .page_no:nth-last-child(2) {
	border-right: 1px solid #fff;
}

.page .page_no.active, .page .page_no:hover{
	color: #000;
}

.news_i_left, .progress_i_left{
	border-right: 1px solid #000;	
}

.news_i_list{
	padding-top: 185px;
}

.news_i_list .news_i_list_item{
	padding-right: 50px;
	margin-bottom: 85px;
}

.news_i_list .news_i_list_item a{
	display: flex;
	align-items: flex-start;
}

.news_i_list .news_i_list_item .news_i_list_img{
	aspect-ratio: 370 / 250;
	overflow: hidden;
	width: 115px;
	margin-right: 35px;
	flex-shrink: 0;
}

 .news_i_list .news_i_list_item .news_i_list_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news_i_list .news_i_list_item .news_i_list_info{
	flex: 1;
	overflow: hidden;
}

.news_i_list .news_i_list_item .news_i_list_info .news_i_list_meta{
	font-size: 14px;
	font-family: var(--title-font);
	margin-bottom: 7px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 20px;
}

.news_i_list .news_i_list_item .news_i_list_info .news_i_list_meta span{
	font-size: 12px;
	display: inline-block;
	color: #b5b5b6;
	border: 1px solid #b5b5b6;
	width: 70px;
	text-align: center;
	margin-right: 4px;
}

 .news_i_list .news_i_list_item .news_i_list_info h3{
	font-size: 16px;
	font-weight: bold;
	font-family: var(--text-font);
	line-height: 24px;
	height: 48px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.news_i_list_btn{
	overflow: hidden;
	padding-top: 85px;
	margin-bottom: 120px;
	font-size: 14px;
}

.news_i_list_btn a{
	float: left;
	display: inline;
	width: calc(33.33% - 7px);
	margin-right: 7px;
	margin-bottom: 8px;
	text-align: center;
	line-height: 34px;
	border: 1px solid #b5b5b6;
	color: #b5b5b6;
}

.news_i_list_btn a:hover{
	border: 1px solid #000;
	color: #000;
}

.news_i, .progress_i{
	padding-top: 100px;
	padding-left: 80px;
}

.news_i_line, .progress_i_line{
	display: flex;
	align-items: stretch;
	margin-bottom: 110px;
}

.news_i_tit{
	font-size: 34px;
	font-family: var(--title-font);
	margin-bottom: 55px;
}

.news_i h1{
	font-size: 36px;
	line-height: 52px;
	font-weight: bold;
	font-family: var(--text-font);
	margin-bottom: 40px;
}

.news_i_meta{
	font-size: 16px;
	font-family: var(--title-font);
	line-height: 20px;
	margin-bottom: 70px;
}

.news_i_meta span{
	font-size: 12px;
	display: inline-block;
	color: #b5b5b6;
	border: 1px solid #b5b5b6;
	width: 70px;
	text-align: center;
	margin-right: 4px;
}

.news_i_img, .progress_i_img{
	margin-bottom: 145px;
}

.news_i_img img, .progress_i_img img{
	display: block;
	margin-bottom: 25px;
}

.news_i_content, .progress_i_content{
	font-size: 15px;
	line-height: 31px;
}

.news_i_content img, .progress_i_content img{
	max-width: 100% !important;
}

.news_i_btn, .progress_i_btn{
	padding: 210px 0 130px 0;
	font-size: 16px;
	font-family: var(--title-font);
	letter-spacing: 2px;
}

.news_i_btn a, .progress_i_btn a{
	float: left;
	display: inline-block;
	width: calc(50% - 100px);
}

.news_i_btn .back_btn, .progress_i_btn .back_btn{
	text-align: right;
	margin-right: 100px;
}
.news_i_btn .next_btn, .progress_i_btn .next_btn{
	margin-left: 100px;
}

.progress_list {
	display: flex;
	flex-direction: column;
	gap: 70px;
	margin-bottom: 245px;
}

.progress_row {
	display: grid;
	gap: 0 90px;
	align-items: start;
}

/* 奇數排：左大右小 */
.progress_row:nth-child(odd) {
	grid-template-columns: minmax(0, 1010fr) minmax(0, 640fr);
}

/* 偶數排：左小右大 */
.progress_row:nth-child(even) {
	grid-template-columns: minmax(0, 640fr) minmax(0, 1010fr);
}

.progress_row > .progress_item {
	width: 100%;
	min-width: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.progress_row > .progress_item > a {
	display: block;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.progress_img {
	width: 100%;
  overflow: hidden;
  margin-bottom: 38px;
  padding: 0;
  line-height: 0;
  box-sizing: border-box;
}

/* 奇數排：左大 */
.progress_row:nth-child(odd) > .progress_item:first-child .progress_img {
	aspect-ratio: 1010 / 650;
}

/* 奇數排：右小 */
.progress_row:nth-child(odd) > .progress_item:last-child .progress_img {
	aspect-ratio: 640 / 650;
}

/* 偶數排：左小 */
.progress_row:nth-child(even) > .progress_item:first-child .progress_img {
	aspect-ratio: 640 / 650;
}

/* 偶數排：右大 */
.progress_row:nth-child(even) > .progress_item:last-child .progress_img {
	aspect-ratio: 1010 / 650;
}

.progress_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.progress_info{
	padding: 0 27px;
}

.progress_date{
	font-size: 18px;
	font-family: var(--title-font);
	margin-bottom: 10px;
}

.progress_info h3{
	font-size: 20px;
	font-weight: bold;
	font-family: var(--text-font);
	margin-bottom: 10px;
}

.progress_info p{
	font-size: 14px;
}

.progress_i_tab{
	padding-top: 85px;
	padding-right: 50px;
	display: flex;
	align-items: flex-start;
    flex-direction: column;
	margin-bottom: 240px;
	font-size: 16px;
	font-weight: 600;
}

.progress_i_tab a{
	display: inline-block;
	padding: 5px;
	margin-bottom: 35px;
	border-bottom: 1px solid #c9caca;
	color: #c9caca;
}

.progress_i_tab a.active, .progress_i_tab a:hover{
	border-bottom: 1px solid var(--theme-color);
	color: #000;
}

.progress_i_list{
	overflow: hidden;
	margin-bottom: 30px;
}

.progress_i_list_item{
	margin-bottom: 90px;
	padding-right: 50px;
}

.progress_i_list_item h3{
	font-size: 16px;
	font-family: var(--text-font);
}

.progress_i_list_item .progress_i_list_date{
	font-size: 12px;
	font-family: var(--title-font);
}

.progress_i_title{
	display: flex;
	flex-wrap: nowrap;
    justify-content: flex-start;
	align-items: baseline;
	margin-bottom: 115px;
}

.progress_i_title .pro_i_tit_date{
	font-size: 18px;
	font-family: var(--title-font);	
	padding-right: 34px;
}

.progress_i_title .pro_i_tit_tab{
	font-size: 24px;
	font-weight: bold;
	padding-right: 34px;
}

.progress_i_title .pro_i_tit{
	font-size: 24px;
	font-weight: bold;
}

.simple_slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.simple_slider,
.simple_slider * {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.simple_slider img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.simple_slider_track {
  position: relative;
  width: 100%;
  height: 100%;
}

.simple_slider_item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}

.simple_slider_item.active {
  display: block;
  position: relative;
  z-index: 2;
}

.simple_slider_item img {
  display: block;
  width: 100%;
  height: auto;
}

.simple_slider_dots {
  position: absolute;
  right: 60px;
  bottom: 50px;
  z-index: 10;
  font-size: 0;
}

.simple_slider_dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.simple_slider_dots .dot.active {
  background: rgba(255, 255, 255, 1);
}

.classic-project-padding{
	padding-top: 240px;
	padding-bottom: 240px;
	border-bottom: 1px solid #000;
}

.classic_project_flex{
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 0px 40px;
	font-family: var(--title-font);
	align-items: center;
}


.classic_project_flex .est, .classic_project_flex .year, .classic_project_flex .item_name, .classic_project_flex .item_name_en{
	line-height: normal;
}

.classic_project_flex .est{
	font-size: 168px;
}

.classic_project_flex .year{
	font-size: 342px;
}

.classic_project_flex .item_name{
	font-size: 24px;
    font-weight: bold;
	font-family: var()
}

.classic_project_flex .item_name span{
	font-size: 18px;
	font-weight: 400;
	margin-top: 10px;
	display: inline-block;
}

.classic_project_flex .item_name_en{
	font-size: 87px;
	text-align: justify;
}

.classic_project_btn_flex{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
}

.classic_project_btn a{
	border-radius: 50%;
	background: var(--theme-color);
	color: #fff;
	font-size: 17px;
	font-family: var(--title-font);
	text-align: center;
	display: inline-grid;
	width: 280px;
	height: 280px;
	align-items: center;
    justify-content: center;
    align-content: center;	
}

.classic_project_btn a i{
	display: block;
	padding-top: 15px;
}

.about-us-section{
	padding-top: 240px;
}

.about-us-section .about_us_padding{
	padding-bottom: 240px;
	border-bottom: 1px solid #000;
	align-items: flex-end;
}

.about_us_logo{
	text-align: center;
}

.about_us_logo img{
	width: 310px;
}

.about_us_title{
	margin-bottom: 150px;
}

.about_us_title h5{
	font-size: 58px;
	margin-bottom: 40px;
}

.about_us_title p{
	font-size: 22px;
	font-weight: bold;
}

.about-us-section .index_more_btn{
	padding: 0;
	text-align: right;
}

.classic_project_section {
	padding: 240px 90px 40px 90px;
}

.classic_project_section .index_more_btn{
	padding-top: 0px;
}

.current_projects_section{
	
}

.about_section{
	padding-top: 220px;
	padding-bottom: 220px;
}

.classic_project_list {
	display: flex;
	flex-wrap: wrap;
}

.classic_project_item {
	position: relative;
	width: 33.3333%;
	margin-bottom: 180px;
	text-align: center;
}

.classic_project_item::after {
	content: "";
	position: absolute;
	top: 180px;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--theme-color);
	z-index: 1;
}

.classic_project_pic {
	position: relative;
	width: 360px;
	height: 360px;
	margin: 0 auto 70px auto;
	border-radius: 50%;
	overflow: hidden;
	z-index: 999;
}

.classic_project_pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.classic_project_date{
	margin-bottom: 20px;
	font-size: 40px;
	line-height: 45px;
	font-family: var(--title-font);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.classic_project_info h4 {
	margin-bottom: 5px;
	font-size: 20px;
	font-weight: 900;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.classic_project_info p {
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.classic_project_more_wrap {
	text-align: center;
}

.service_request_section {
	padding: 180px 0 30px 0;
	font-size: 15px;
}

.service_request_title, .current_exterior_title {
	max-width: 520px;
	margin: 0 auto 100px auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	text-align: center;
}

.about_title {
	margin-bottom: 200px;
	text-align: center;
}

.current_exterior_title {
	max-width: 350px;
}

.service_request_title h2, .current_exterior_title h2 {
	font-size: 45px;
	padding-bottom: 10px;
}

.about_title h2 {
	width: auto;
	display: inline-block;
	margin: 0 auto 45px auto;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	text-align: center;
	padding: 10px 100px;
}

.service_request_title h6, .current_exterior_title h6 {
	font-size: 14px;
}

.about_title h6 {
	font-size: 22px;
	font-weight: bold;
}

.about_title_2{
	font-size: 61px;
	font-weight: bold;
	text-decoration: underline;
	text-decoration-thickness: 10px;
	text-underline-offset: 20px;
	text-align: center;
	margin-bottom: 100px;
	line-height: 2;
}

.about_title_s_tw{
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}

.about_title_s_en{
	font-size: 36px;
	font-family: var(--title-font);
	text-align: center;
}

.service_request_form {
	max-width: 1160px;
	margin: 0 auto;
}

.service_request_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 45px 66px;
	align-items: flex-start;
}

.service_request_row {
	/*display: flex;*/
	/*align-items: center;*/
	width: calc(50% - 33px);
	/*min-height: 80px;*/
	/*border-bottom: 1px solid #000;*/
}

.service_request_label {
	flex: 0 0 165px;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 15px;
}

.service_request_label span {
	display: inline-block;
	margin-right: 2px;
}

.service_request_label .span_gray{
	font-size: 15px;
	 color: #AAABAB;
}

.service_request_field {
	width: 100%;
	min-width: 0;
	border: 1px solid #AAABAB;
	line-height: 50px;
	padding: 0 20px;
}

.service_request_section input,
.service_request_section button,
.service_request_section textarea {
	font-size: 15px;
	font-family: inherit;
}

.service_request_field input[type="text"] {
	width: 100%;
	border: 0;
	outline: none;
	box-shadow: none;
	padding: 0;
	background: transparent;
}

.service_request_field input[type="text"]::placeholder {
	color: #aaabab;
}

.service_request_inline {
	display: flex;
	align-items: center;
	gap: 30px;
}

.service_request_inline input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
}

.service_request_radio_group {
	display: flex;
	align-items: center;
	gap: 25px;
	flex: 0 0 auto;
}

.service_request_radio {
	display: flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	font-weight: 700;
}

.service_request_radio input {
	display: none;
}

.service_request_radio .radio_custom {
	width: 9px;
	height: 9px;
	border: 1px solid #000;
	border-radius: 50%;
	display: inline-block;
	position: relative;
}

.service_request_radio input:checked + .radio_custom::after {
	content: "";
	width: 8px;
	height: 8px;
	background: #000;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* select */
.service_request_row_select {
	display: block;
	border-bottom: 0;
	align-items: initial;
}

.service_request_row_main {
	/*display: flex;
	align-items: center;
	min-height: 80px;
	border-bottom: 1px solid #000;*/
}

.service_request_row_select .service_request_label {
	flex: 0 0 165px;
}

.service_request_row_select .service_request_field {
	width: 100%;
	min-width: 0;
}

.service_request_select {
	width: 100%;
}

.service_request_select_trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	text-align: left;
}

.service_request_select_text {
	color: #aaabab;
}

.service_request_select.is-selected .service_request_select_text {
	color: #111;
}

.service_request_select_arrow {
	position: relative;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

.service_request_select_arrow::before,
.service_request_select_arrow::after {
	content: "";
	position: absolute;
	top: 8px;
	width: 9px;
	height: 1px;
	background: #000;
}

.service_request_select_arrow::before {
	left: 1px;
	transform: rotate(45deg);
}

.service_request_select_arrow::after {
	right: 1px;
	transform: rotate(-45deg);
}

.service_request_select.is-open .service_request_select_arrow::before {
	transform: rotate(-45deg);
}

.service_request_select.is-open .service_request_select_arrow::after {
	transform: rotate(45deg);
}

.service_request_select_options {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #AAABAB;
}

.service_request_select_options li {
	/*margin-left: 165px;*/
	padding: 12px 20px;
	border-bottom: 1px solid #a8a8a8;
	color: var(--theme-color);
	cursor: pointer;
}

.service_request_select_options li:last-of-type{
	border-bottom: 0px;
}

.service_request_select_options li:hover {
	opacity: 0.9;
}

/* upload */
.service_request_upload {
	width: 100%;
}

.service_request_upload_top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.service_request_upload_top p {
	margin: 0;
	color: #999;
	letter-spacing: 0;
}

.service_request_upload_btn {
	flex: 0 0 auto;
	width: 100%;
	/*height: 27px;*/
	padding: 0 16px;
	border: 0;
	background: var(--theme-color);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.service_request_upload_input {
	display: none;
}

.service_request_upload_list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.service_request_file_chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 28px;
	padding: 0 14px;
	border: 1px solid #000;
	border-radius: 999px;
	background: transparent;
}

.service_request_file_chip_remove {
	position: relative;
	width: 14px;
	height: 14px;
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
}

.service_request_file_chip_remove::before,
.service_request_file_chip_remove::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 0;
	width: 14px;
	height: 1px;
	background: #000;
}

.service_request_file_chip_remove::before {
	transform: rotate(45deg);
}

.service_request_file_chip_remove::after {
	transform: rotate(-45deg);
}

/* textarea */
.service_request_row_textarea {
	display: block;
	width: 100%;
	min-height: auto;
	padding-bottom: 18px;
}

.service_request_row_textarea .service_request_label {
	display: block;
	margin-bottom: 18px;
}

.service_request_row_textarea .service_request_field {
	width: 100%;
}

.service_request_row_textarea textarea {
	display: block;
	width: 100%;
	min-height: 180px;
	padding: 0;
	border: 0;
	outline: none;
	box-shadow: none;
	background: transparent;
	resize: vertical;
	line-height: 1.8;
}

.service_request_row_textarea textarea::placeholder {
	color: #aaabab;
}

.service_request_row_upload {
	display: block;
	border-bottom: 0;
}

.service_request_row_upload .service_request_row_main {
	/*display: flex;
	align-items: center;
	min-height: 80px;
	border-bottom: 1px solid #000;*/
}

.service_request_row_upload .service_request_label {
	flex: 0 0 165px;
}

.service_request_row_upload .service_request_upload_list {
	/*margin-left: 165px;*/
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 18px;
}

.current_info{
	padding-top: 155px;
	padding-bottom: 200px;
}

.current_info_item{
	display: grid;
    grid-template-columns: repeat(4, max-content);
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
	gap: 80px 200px;
}

.current_info_bline{
	text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
}

.current_info_item .current_green{
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	color: var(--theme-color);
	border: 1px solid var(--theme-color);
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 25px;
}

.current_info_item .current_bs{
	font-size: 15px;
	font-weight: 400;
}

.current_exterior_flow{
	max-width:1500px;
	margin: 200px auto 250px auto;
	overflow:hidden;
}

.current_exterior_row{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.current_exterior_row + .current_exterior_row{
	margin-top:-310px;
}

.current_exterior_img{
	width:47%;
}

.current_exterior_img img{
	width:100%;
	display:block;
}

.current_exterior_text{
	width:47%;
  	display:flex;
	align-items:center;
	justify-content: center;
}

.current_exterior_text_box{
	width: auto;
}
							
.current_exterior_row .current_exterior_text_box{
	transform:translateY(-155px);
}

.current_exterior_row:nth-child(even){
	flex-direction:row-reverse;
}

.current_exterior_row:nth-child(even) .current_exterior_text_box{
	transform:translateY(155px);
}

.current_exterior_text h2{
	font-size:24px;
	font-weight: 900;
	margin-bottom: 20px;
}

.current_exterior_text h3{
	font-size:18px;
	margin-bottom: 55px;
	font-weight: 600;
}

.current_exterior_text p{
	font-size: 14px;
}
							
.current_section_info{
	display: flex;
	justify-content: center;
	padding: 160px 0 180px 0;
}

.current_section_item{
	padding: 0 50px;
	text-align: center;
}

.current_section_item h5{
	font-size: 18px;
	font-weight: 900;
	font-family: var(--text-font);
	color: var(--theme-color);
	text-decoration: underline;
	text-decoration-color: var(--theme-color);
	text-underline-offset: 5px;
	margin-bottom: 35px;
}

.current_section_item p{
	font-size: 14px;
	font-weight: 400;
}

.current_floor_img{
	padding-bottom: 220px;
	max-width: 1440px;
	margin: 0 auto;
}

.about_brand{
	padding-bottom: 220px;
	border-bottom: 1px solid var(--secondary-color);
}

.about_philosophy, .index_esg{
	padding-top: 220px;
	padding-bottom: 220px;
	border-bottom: 1px solid var(--secondary-color);
}

.about_esg{
	padding-top: 220px;
}

.about_brand_square{
	padding-top: 260px;
}

.about_brand_row{
	display:grid;
	grid-template-columns: 1fr 1fr;
}

.about_brand_row:nth-child(even) .image-item{
	order:2;
}

.about_brand_row:nth-child(even) .text-item,
.about_brand_row:nth-child(even) .brand-item{
	order:1;
}

.about_brand_item{
	position:relative;
	aspect-ratio:1 / 1;
	overflow:hidden;
}

.about_brand .brand_bg_01, .about_brand .brand_bg_02, .about_brand .brand_bg_03{
	background-repeat: none;
	background-size: cover;
	background-position: center center;
} 

.about_brand .brand_bg_01{
	background-image: url(../images/about_brand01bg.jpg);
}

.about_brand .brand_bg_02{
	background-image: url(../images/about_brand02bg.jpg);
}

.about_brand .brand_bg_03{
	background-image: url(../images/about_brand03bg.jpg);
}

.about_brand .image-item img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
}

.about_brand .text-item, .about_brand .brand-item{
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
}

.about_brand .text-item h6{
	font-size: 22px;
	font-weight: 900;
	color: #fff;
	margin-bottom: 50px;
}

.about_brand .text-item p{
	color: #fff;
	font-size: 14px;
}

.about_brand .text-box{
	width:50%;
	position:relative;
	z-index:2;
}

.about_brand .brand-box{
	width: auto;
	position:relative;
	z-index:2;
}

.about_brand .brand-box img{
	width: 125px;
	margin-bottom: 110px;
}

.about_brand .brand-box h2{
	font-size: 61px;
	color: #fff;
}

.about_concept .concept-list{
	padding-top: 170px;
}

.about_concept .concept-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 170px 240px;
	border-bottom:1px solid var(--secondary-color);
	gap: 0 150px;
}

.about_concept .concept-row:nth-child(even){
	flex-direction:row-reverse;
}

.about_concept .concept-row:last-child{
	border-bottom: 0px;
	padding-bottom: 0px;
}

.about_concept .concept-img{
	position:relative;
	width:100%;
	max-width:555px;
	aspect-ratio:1 / 1;
}

.about_concept .concept-img img{
	width:100%;
	height:100%;
	display:block;
	object-fit:cover;
	border-radius:50%;
}

.about_concept .concept-word{
	position:absolute;
	left: -45px;
	top: 60px;
	width: 190px;
	height: 190px;
	background: var(--theme-color);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size: 129px;
	font-family: var(--kai-font);
	z-index:2;
}

.about_concept .concept-text{
	width:46%;
}

.about_concept .concept-text h3{
	font-size:34px;
	font-weight:900;
	margin-bottom: 15px; 
}

.about_concept .concept-text h3 span{
	color: var(--theme-color);
}

.about_concept .concept-text h4{
	font-size: 24px;
	margin-bottom: 50px;
}

.about_concept .concept-text p{
	font-size: 14px;
	font-weight: 400;
}

.about_concept .concept-text p strong{
	font-weight: bold;
}

.about_esg_info{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	display: flex;
	padding-top: 220px;
}

.index_esg_info{
	width: 100%!important;
	margin-left: 0!important;
	display: flex;
	padding-top: 220px;
	
}

.about_esg_info .about_esg_card, .index_esg_info .index_esg_card{
	width:33.3333%;
	height: 1000px;
	position:relative;
	overflow:hidden;
	display: flex;
    justify-content: center;
    align-items: center;
}

.about_esg_info .about_esg_card .about_esg_bg, .index_esg_info .index_esg_card .index_esg_bg{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	z-index:0;	
}

.about_esg_info .about_esg_text, .index_esg_info .index_esg_text{
	position:relative;
	color:#fff;
	text-align: center;
	width: 65%;
	z-index: 3;
}

.about_esg_info .about_esg_text h4, .index_esg_info .index_esg_text h4{
	color: #fff;
	font-size: 36px;
	margin-bottom: 20px;
}

.about_esg_info .about_esg_text h5, .index_esg_info .index_esg_text h5{
	color: #fff;
	font-size: 22px;
	font-weight: 900;
	margin-bottom: 45px;
	border-bottom: 1px solid #fff;
	padding-bottom: 45px;
}

.about_esg_info .about_esg_text p, .index_esg_info .index_esg_text p{
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	padding-right: 30px;
	padding-left: 30px;
}

.about_esg_info .about_esg_text p strong, .index_esg_info .index_esg_text p strong{
	font-weight: bold;
}

.about_esg_info .about_esg_card::before, .index_esg_info .index_esg_card::before{
	content:"";
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.6);
	z-index:1;
	pointer-events:none;
}

.about_organizational_img{
	text-align: center;
	margin: 0 auto;
}

.about_organizational_img img{
	margin: auto;
}

.pro_progress_list{
	padding-bottom: 150px; 
}

.pro_progress_item{
	margin-bottom: 70px;
}

.pro_progress_card{
    max-width: 1390px;
    background: var(--theme-color);
    padding: 70px 110px;
	margin: 0 auto;
    display: flex;
    align-items: center;
}

.pro_progress_date{
    width: 90px;
    flex-shrink: 0;
	color: #fff;
	font-family: var(--title-font);
	text-align: center;
}

.month{
	font-size: 20px;
}
	
.month span{
	font-size: 75px;
}	

.year{
    font-size: 35px;
	margin-top: 37px;
}

.pro_progress_pic{
    width: 190px;
    height: 190px;
	margin: 0 130px;
    flex-shrink: 0;
}

.pro_progress_pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.pro_progress_content{
    flex: 1;
	
}

.pro_progress_content h3{
    font-size: 22px;
    font-weight: 900;
	color: #fff;
	width: 370px;
	margin-bottom: 20px;
  	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pro_progress_content p{
    font-size: 14px;
	font-weight: 400;
	color: #fff;
	width: 370px;
  	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pro_progress_arrow{
    flex-shrink: 0;
    text-align: right;
}

.pro_progress_arrow img{
	width: 20px;
}

/* 首頁純Youtube Banner版本 */
/*.video-banner {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background-color: #111;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.video-banner__video {
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
	pointer-events: none;
	transform: translate3d(-50%, -50%, 0);
	backface-visibility: hidden;
}
.video-banner__video.is-desktop {
	width: 177.77777778vh;
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
}
.video-banner__video.is-mobile {
	width: 56.25vh;
	min-width: 100%;
	height: 177.77777778vw;
	min-height: 100%;
}
.video-banner__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	pointer-events: none;
}*/

/* 首頁純Youtube+mp4 Banner版本 Start */
.video-banner {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 400px;
  overflow: hidden;
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.video-banner__video-box {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-banner__mp4 {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.video-banner__video-box iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  border: 0;
  pointer-events: none;

  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.video-banner__video-box.is-desktop iframe {
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100vh;
}

.video-banner__video-box.is-mobile iframe {
  width: 100vw;
  height: 177.78vw;
  min-width: 56.25vh;
  min-height: 100vh;
}

.video-banner__shield {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* 首頁純Youtube+mp4 Banner版本 End */