@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,200..800&family=Noto+Serif+TC:wght@200..900&display=swap');
.container {
  transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
  -ms-transition: all 0.9s ease 0s;
}
/*------------ 顏色 ------------*/ 
:root {
  --primary_01: #E9ECF4;
  --primary_02: #9AA4CD;
  --primary_03: #384A9C;
  --primary_04: #343F53;
  --primary_05: #091A38;
  --secondary_01: #FFFBE1;
  --secondary_02: #E5E0CD;
  --secondary_03: #BFB182;
  --secondary_04: #797052;
  --secondary_05: #221F15;
  --gray_01: #FFFFFF;
  --gray_02: #F8F8F8;
  --gray_03: #E5E5E5;
  --gray_04: #CCCCCC;
  --gray_05: #666666;
  --gray_06: #333333;
  --gray_07: #000000;
  --primany-spacing: 80;
}
/*全選底色*/ ::selection {
  background-color: var(--primary_03);
  color: var(--bs-white);
}
body {
  margin: 0;
  padding: 0;
  backface-visibility: hidden;
  font-family: "EB Garamond", "Noto Serif TC", "Microsoft JhengHei", Roboto, "Helvetica Neue", arial, sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  min-width: 320px;
  letter-spacing: .05em;
}
a, a:hover {
  color: var(--primary_03);
  text-decoration: none;
}

/* 去除按鈕框線*/
button:focus,
button:active,
button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.offcanvas *:focus,
.offcanvas *:active,
.offcanvas *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.ul_nolist {
  list-style: none;
  padding-left: 0;
}
/* 手機漢堡*/
.navbar-toggler {
  padding: 0;
}
.breadcrumb {
  margin-bottom: 2rem;
}

.shadow-lg-user{
	box-shadow: 0 1rem 2rem #999;
}
/*page分頁*/
.pagination .page-link:focus,
.pagination .page-link:active,
.pagination .page-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.page-link ,.page-link:hover,.page-link:focus {
    color:var(--secondary_03);
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--secondary_03);
    border-color: var(--secondary_03);
}
/*--------------------間距--------------------*/
.rounded-l {
  border-radius: 1rem !important;
}
.p-l {
  padding: calc(var(--primany-spacing) * 1px);
}
.p-m {
  padding: calc(var(--primany-spacing) * .5px);
}
.pt-l {
  padding-top: calc(var(--primany-spacing) * 1px);
}
.pt-m {
  padding-top: calc(var(--primany-spacing) * .5px);
}
.py-l {
  padding-top: calc(var(--primany-spacing) * 1px);
  padding-bottom: calc(var(--primany-spacing) * 1px);
}
.py-m {
  padding-top: calc(var(--primany-spacing) * .5px);
  padding-bottom: calc(var(--primany-spacing) * .5px);
}
.pb-l {
  padding-bottom: calc(var(--primany-spacing) * 1px);
}
.pb-m {
  padding-bottom: calc(var(--primany-spacing) * .5px);
}
.m-l {
  margin: calc(var(--primany-spacing) * 1px);
}
.m-m {
  margin: calc(var(--primany-spacing) * .5px);
}
.mt-l {
  margin-top: calc(var(--primany-spacing) * 1px);
}
.mt-m {
  margin-top: calc(var(--primany-spacing) * .5px);
}
.mb-l {
  margin-bottom: calc(var(--primany-spacing) * 1px);
}
.mb-m {
  margin-bottom: calc(var(--primany-spacing) * .5px);
}
.my-m {
  margin-top: calc(var(--primany-spacing) * .5px);
  margin-bottom: calc(var(--primany-spacing) * .5px);
}
@media (min-width: 992px) {
  .p-l {
    padding: calc(var(--primany-spacing) * 2px);
  }
  .p-m {
    padding: calc(var(--primany-spacing) * 1px);
  }
  .pt-l {
    padding-top: calc(var(--primany-spacing) * 2px);
  }
  .pt-m {
    padding-top: calc(var(--primany-spacing) * 1px);
  }
  .py-l {
    padding-top: calc(var(--primany-spacing) * 2px);
    padding-bottom: calc(var(--primany-spacing) * 2px);
  }
  .py-m {
    padding-top: calc(var(--primany-spacing) * 1px);
    padding-bottom: calc(var(--primany-spacing) * 1px);
  }
  .pb-l {
    padding-bottom: calc(var(--primany-spacing) * 2px);
  }
  .pb-m {
    padding-bottom: calc(var(--primany-spacing) * 1px);
  }
  .m-l {
    margin: calc(var(--primany-spacing) * 2px);
  }
  .m-m {
    margin: calc(var(--primany-spacing) * 1px);
  }
  .mt-l {
    margin-top: calc(var(--primany-spacing) * 2px);
  }
  .mt-m {
    margin-top: calc(var(--primany-spacing) * 1px);
  }
  .mb-l {
    margin-bottom: calc(var(--primany-spacing) * 2px);
  }
  .mb-m {
    margin-bottom: calc(var(--primany-spacing) * 1px);
  }
  .my-m {
    margin-top: calc(var(--primany-spacing) * 1px);
    margin-bottom: calc(var(--primany-spacing) * 1px);
  }
}
/*--------------------漸層按鈕--------------------*/
.btn{
	    border: 0px solid transparent;
}
.btn-hover {
  color: var(--bs-white);
  background-size: 300% 100%;
  moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
  border-radius: .25rem;
  padding: 0.25rem 1rem;
}
.btn-hover:hover {
  background-position: 100% 0;
  moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  color: var(--bs-white);
}
.btn-hover:focus {
  outline: none;
  color: var(--bs-white);
}
.btn-hover.color-0 {
  border-radius: 50px 50px;
  background-image: linear-gradient(to right, var(--primary_03), var(--primary_04), var(--primary_03), var(--primary_04));
}
.btn-hover.color-0 a {
  color: #FFF;
}
.btn-hover.color-1 {
  border-radius: 50px 50px;
  background-image: linear-gradient(to right, var(--gray_04), var(--gray_05), var(--gray_04), var(--gray_05));
}
.btn-hover.color-1 a {
  color: #FFF;
}
/*--------------------文字--------------------*/
.c-primary_01 {
  color: var(--primary_01);
}
.c-primary_02 {
  color: var(--primary_02);
}
.c-primary_03 {
  color: var(--primary_03);
}
.c-primary_04 {
  color: var(--primary_04);
}
.c-primary_05 {
  color: var(--primary_05);
}
.c-secondary_01 {
  color: var(--secondary_01);
}
.c-secondary_02 {
  color: var(--secondary_02);
}
.c-secondary_03 {
  color: var(--secondary_03);
}
.c-secondary_04 {
  color: var(--secondary_04);
}
.c-secondary_05 {
  color: var(--secondary_05);
}
.c-gray_01 {
  color: var(--gray_01);
}
.c-gray_02 {
  color: var(--gray_02);
}
.c-gray_03 {
  color: var(--gray_03);
}
.c-gray_04 {
  color: var(--gray_04);
}
.c-gray_05 {
  color: var(--gray_05);
}
.c-gray_06 {
  color: var(--gray_06);
}
.c-gray_07 {
  color: var(--gray_07);
}
.bg_primary_01{
	background: var(--primary_01);
}
.bg_primary_03{
	background: var(--primary_03);
}
/*-------------------- 進場動畫 --------------------*/

#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--primary_03);
  z-index: 9999;
  text-align: center;
  color: #fff;
}
#splash-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*========= 画面遷移のためのCSS ===============*/
/*画面遷移アニメーション*/
.splashbg {
  display: none;
}
/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
  display: block;
  content: "";
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  transform: scaleX(0);
  background-color: var(--secondary_03); /*伸びる背景色の設定*/
  animation-name: PageAnime;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes PageAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/*進場動畫*/
#container {
  opacity: 0; /*はじめは透過0に*/
}
/*bodyにappearクラスがついたら出現*/
body.appear #container {
  animation-name: PageAnimeAppear;
  animation-duration: 1s;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes PageAnimeAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*--------------------首頁下滑標誌--------------------*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:50px;
	left:50%;
	z-index: 9999
	
}

/*Scroll動態*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:0;
    /*テキストの形状*/
	color: var(--secondary_03);
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:var(--secondary_03);
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:var(--secondary_03);
}

/*--------------------選單--------------------*/

/*手機側選單*/
.offcanvas {
  background: var(--secondary_03);
}
.offcanvas-end {
  width: 100vw
}
/*下拉選單*/
.dropdown-menu {
  font-size: 1rem;
  color: var(--primary_04);
  background-color: #FFF;
  border: 0px solid var(--primary_04);
  border-left: 3px solid var(--primary_03);
  border-radius: 0;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--primary_03);
  color: var(--gray_01);
}
.dropdown-item.active, .dropdown-item:active {
  background: var(--primary_03);
  color: var(--gray_01);
  text-decoration: none;
}
.dropdown-menu li ul {
  padding-left: 0;
  list-style: none
}
.dropdown-menu li ul li a {
  color: var(--gray_06);
  display: block;
  padding-left: 15px;
}
.dropdown-menu li ul li a:hover {
  color: var(--gray_07);
  background: var(--gray_01);
}

@media (min-width: 992px) {
  .navbar-light .navbar-nav .nav-link {
    font-size: 1.125em;
  }
  .dropdown-menu {
    min-width: 10rem;
    padding: .5rem 0;
    font-size: 1rem;
    color: var(--gray_06);
    background-color: var(--secondary_03);
    background-clip: padding-box;
    border: 0px solid var(--primary_05);
    border-radius: .5rem;
  }

  /* 滑入效果 */
  .dropdown:hover .dropdown-menu {
    display: block;
    animation: slideIn 0.3s ease;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.white {
        background: rgba(255, 255, 255, 0.6);
}

@media (min-width: 992px) {
.white {
        background: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
}
}
.nav-item {
  padding: 3vh 0;
  width: 100%;
  border-bottom: solid 1px var(--gray_06);
}
.dropdown-item {
  padding: 1vh;
  font-size: 1.125em;
}
.navbar-light .navbar-nav .nav-link {
  color: var(--gray_06);
  font-size: 1.125em;
}
.navbar-expand-lg .navbar-nav {
  align-items: baseline;
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link {
  color: var(--primary_05);
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: var(--primary_03);
}
@media (min-width: 992px) {
  .nav-item {
    padding: 0 10px;
    width: auto;
    border-bottom: solid 0px var(--gray_06);
  }
  .dropdown-item {
    padding: 5px 15px;
    font-size: 1.125em;
    color: var(--gray_01);
  }
  .navbar-light .navbar-nav .nav-link {
    color: var(--primary_05);
    font-size: 1.125em;
  }
}
.navbar-light .navbar-toggler {
  color: var(--primary_03);
  border-color: rgba(0, 0, 0, 0);
  z-index: 9999;
}
/*選單LOGO*/
.logo {
  width: 170px;
}
/*--------------------選單變X--------------------*/
.openbtn6 {
  position: relative; /*ボタン内側の基点となるためrelativeを指定*/
  background: var(--primary_03);
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
/*ボタン内側*/
.openbtn6 span {
  display: inline-block;
  transition: all .4s; /*アニメーションの設定*/
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: #fff;
}
.openbtn6 span:nth-of-type(1) {
  top: 15px;
  width: 45%;
}
.openbtn6 span:nth-of-type(2) {
  top: 23px;
  width: 35%;
}
.openbtn6 span:nth-of-type(3) {
  top: 31px;
  width: 20%;
}
/*activeクラスが付与されると線が回転して×になる*/
.openbtn6.active span:nth-of-type(1) {
  top: 18px;
  left: 18px;
  transform: translateY(6px) rotate(-135deg);
  width: 30%;
}
.openbtn6.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn6.active span:nth-of-type(3) {
  top: 30px;
  left: 18px;
  transform: translateY(-6px) rotate(135deg);
  width: 30%;
}

/* –––––––––––––––––––––––––語言––––––––––––––––––––––––– */
    /* 基本樣式 */
    .language-selector {
      position: relative;
      display: inline-block;
    }

    /* 按鈕樣式 */
   .language-button {
    padding: 0px 5px;
    border: 1px solid var(--gray_04);
    border-radius: 4px;
    background-color: var(--gray_02);
    color: var(--gray_05);
    font-size: 12px;
    cursor: pointer;
    width: 100px;
    text-align: center;
}

    /* 下拉清單樣式 */
    .language-options {
      display: none;
      position: absolute;
      left: 0;
      background-color: var(--gray_01);
      border: 1px solid  var(--gray_03);
      border-radius: 4px;
      margin-top: 5px;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
      z-index: 1;
    }

    /* 清單項目樣式 */
    .language-option {
padding: 2px 16px;
    font-size: 12px;
    color: var(--gray_05);
    text-decoration: none;
    display: block;
    cursor: pointer;
    width: 100px;
    }

    .language-option:hover {
      background-color:  var(--gray_03);
    }


/* 品牌理念色塊定位在右上角 */
  .bg-block {
     display: none
}
@media (min-width: 992px) {
  .bg-block {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40%;
    height: 70%;
    background-color: var(--secondary_03);
    border-radius: 0;
    z-index: -1;
}
}	
/* 數字動畫 */
  .number-ani {
      opacity: 0; /* 預設隱藏 */
      transition: opacity 0.3s ease-in-out; /* 滑動到時漸顯 */
    }
    .visible {
      opacity: 1;
    }
.number-ani.index {
      font-size: 3rem;
	  width: 100px;
    }

@media (min-width: 992px) {

    .number-ani.index {
      font-size: 4.5rem;
	  width: 160px;
    }
}	
/*--------------------聯絡我們背景圖--------------------*/
.contact_bg {
  background: url("../img/contact-bg.jpg");
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-attachment: fixed;
  background-size: cover;
}

/* --------------------footer--------------------*/
footer {
  color: var(--gray_06);
}
footer p, footer a i, footer a {
  color: var(--gray_06);
}
footer i {
  font-size: 1.5rem;
}
.footer_logo {
  width: 70px;
}
/*--------------------標題設定--------------------*/
.title_en01 {
  font-size: 2em;
  letter-spacing: .1em;
  display: inline-block;
  border-bottom: solid 1px var(--primary_02);
  font-weight: 100;
}
.title_en02 {
  font-size: 1.5em;
  letter-spacing: .1em;
  display: inline-block;
  border-bottom: solid 1px var(--primary_02);
  font-weight: 100;
}
.title01 {
  font-size: 1.5em;
  letter-spacing: .1em;
}
.title02 {
  font-size: 1.5em;
}
.title03 {
}
.title04 {
  font-size: 1.5em;
  letter-spacing: .2em;
  background: var(--gray_03);
  border-left: solid 2px var(--gray_05);
	margin-bottom: 0;
	padding: 2px 8px;
	display: inline-block;
}
.title_number {
  font-size: 2.5em;
	line-height: 1.3;
  display: inline-block;
  border-bottom: solid 1px var(--secondary_03);
}

@media (min-width: 992px) {
.title_en01 {
  font-size: 3em;
  letter-spacing: .1em;
}
.title_en02 {
  font-size: 3em;
  letter-spacing: .1em;
}
.title01 {
    font-size: 1.75em;
  letter-spacing: .1em;
}
.title02 {
  font-size: 1.5em;
  letter-spacing: .1em;
}
.title03 {
  font-size: 1.25em;
}	
	.title04 {
    font-size: 1.75em;
  letter-spacing: .1em;
}
.title_number {
  font-size: 4.5em;
  line-height: 1.3;
}
}

/*--------------------MSK松玥建設自2000年首建起步--------------------*/

.index-case{
    padding-top: calc(var(--primany-spacing)* 0px);
}
.index-case-blue{
    padding: calc(var(--primany-spacing)* 0.5px);
}
@media (min-width: 992px) {
.index-case{
    padding-top: calc(var(--primany-spacing)* 1px);
}
.index-case-blue{
    padding: calc(var(--primany-spacing)* 0px);
}	
}



/*--------------------回到最上--------------------*/
.to-top a.to-top {
  width: 30px;
  height: 30px;
  background: #FFF;
  color: var(--primary_03);
  border: solid 1px var(--primary_03);
  align-items: center;
  justify-content: center;
  display: flex;
  text-decoration: none;
  transition: all 0.9s ease 0s;
  border-radius: 0%;
  font-size: 30px;
  z-index: 9999;
}
.to-top a.to-top:hover {
  background: var(--secondary_03);
  border: solid 1px var(--secondary_03);
  color: #FFF;
  text-decoration: none;
  border-radius: 50%;
}
@media (min-width: 992px) {
  .to-top a.to-top {
    width: 50px;
    height: 50px;
  }
}
/*--------------------iframeRWD--------------------*/
.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 */
}
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*--------------------光出現 --------------------*/
.glowAnime span {
  opacity: 0;
}
.glowAnime.glow span {
  animation: glow_anime_on 1s ease-out forwards;
}
@keyframes glow_anime_on {
  0% {
    opacity: 0;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px #fff, 0 0 15px #fff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 #fff, 0 0 0 #fff;
  }
}




/*背景色が伸びて出現 共通*/
.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}




/* --------------------內頁開始--------------------*/

main.projects,main.equipment,main.news,main.contact-box,main.works{
	background: url('../img/lp_bg.jpg') center right;
	background-size: cover;
	background-attachment: fixed;
}

/* --------------------品牌沿革--------------------*/
main.history{
	background: url('../img/bh_bg.jpg') center right;
	background-size: cover !important;
	background-attachment: fixed !important;
	position: relative;
}
main.company{
	position: relative;
}

.cube{
    background: var(--primary_01);
    width: 18vw;
    height: 100%;
    display: block;
    position: absolute;
	z-index: -1;
}
.timeline {
  padding: 50px 20px;
  margin: 0 auto;
  max-width: 1000px;
}

.timeline ol {
  position: relative;
  list-style: none;
	padding: 0;
}

.timeline ol::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--secondary_03);
}

.timeline ol li .item-inner {
  padding: 10px 180px;
  margin-bottom: .5vh;
}

.timeline ol li .time-wrapper {
  color: var(--secondary_03);

  position: relative;
  font-size: 3rem;
  line-height: 0.9;
}

.timeline ol li .time-wrapper::before,
.timeline ol li .time-wrapper::after {
  content: "";
  position: absolute;
  background: var(--secondary_03);
}

.timeline ol li .time-wrapper::before {
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  width: 0;
  height: 3px;
  transition: width 0.8s linear;
}

.timeline ol li .time-wrapper::after {
  top: calc(50% - 8px);
  left: -60px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: left center;
  transition: all 0.4s linear;
}

.timeline ol li time,
.timeline ol li .details > * {
  opacity: 0;
  transition: 0.5s;
}

.timeline ol li time {
  display: inline-block;
  transform: translateY(-30px);
}

.timeline ol li .details > * {
  transform: translateY(30px);
}

.timeline ol li .details h3 {
  font-size: 1.25rem;
  line-height: 1;
  margin: 15px 0;
  color: var(--primary_04);
	
}

.timeline ol li.in-view .time-wrapper::before {
  width: 120px;
}

.timeline ol li.in-view .time-wrapper::after {
  transition-delay: 0.8s;
  transform: scale(1.5);
}

.timeline ol li.in-view time,
.timeline ol li.in-view .details > * {
  opacity: 1;
  transform: none;
}

.timeline ol li.in-view time {
  transition-delay: 1.3s;
}

.timeline ol li.in-view .details h3 {
  transition-delay: 1.5s;
}

.timeline ol li.in-view .details p {
  transition-delay: 1.7s;
}

@media (max-width: 992px) {
  .timeline ol li .item-inner {
    padding: 20px 40px;
  }

  .timeline ol li .time-wrapper::before {
    display: none;
  }

  .timeline ol li .time-wrapper::after {
    left: -45px;
    transform-origin: center;
  }

  .timeline ol li.in-view .time-wrapper::after {
    transition-delay: 0s;
  }

  .timeline ol li.in-view time {
    transition-delay: 0.5s;
  }

  .timeline ol li.in-view .details h3 {
    transition-delay: 0.7s;
  }

  .timeline ol li.in-view .details p {
    transition-delay: 0.9s;
  }
}




/* --------------------swiper共用--------------------*/

/* 基本按鈕樣式 */
.swiper-button-next, 
.swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s;
  z-index: 10;
}

@media (min-width: 992px) {
.swiper-button-next, 
.swiper-button-prev {
  width: 60px;
  height: 60px;
}

}
/* 下一頁和上一頁按鈕的位置 */
.swiper-button-next {
  right: 10px;
}
.swiper-button-prev {
  left: 10px;
}

/* 懸停效果：按鈕放大 */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.8);
  transform: translateY(-50%) scale(1.2);
}

/* 脈衝動畫：新增圓形動畫效果 */
.swiper-button-next::before,
.swiper-button-prev::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: pulse 1.5s infinite;
}

/* 脈衝動畫的關鍵幀 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Swiper 預設箭頭調整：讓箭頭置中 */
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 30px;
  color: white;
}
/* --------------------最新項目--------------------*/

/*圖片集*/
 .swiper-container {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }
    .swiper-wrapper {
      display: flex;
    }
    .swiper-slide {
      flex-shrink: 0;
      width: auto;
    }
    /* 主图始终为100%透明度 */
    .mySwiper2 .swiper-slide img {
      opacity: 1;
    }
    /* 缩略图默认透明度为50% */
    .mySwiper .swiper-slide img {
      opacity: 0.5;
      transition: opacity 0.3s;
    }
    /* 当前缩略图与主图一致时透明度为100% */
    .mySwiper .swiper-slide-thumb-active img {
      opacity: 1;
    }

/* --------------------最新項目--------------------*/
.zoomIn h5{
	font-size: 1.25rem;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;

}
@media (max-width: 992px) {
.zoomIn h5{
	font-size: 1rem;
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;
}
}
/*　画像の拡大　*/
.zoomIn img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
	transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


/*圖片集*/

 .swiper-container {
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }
    .swiper-wrapper {
      display: flex;
    }
    .swiper-slide {
      flex-shrink: 0;
      width: auto;
    }
    /* 主图始终为100%透明度 */
    .mySwiper2 .swiper-slide img {
      opacity: 1;
    }
    /* 缩略图默认透明度为50% */
    .mySwiper .swiper-slide img {
      opacity: 0.5;
      transition: opacity 0.3s;
    }
    /* 当前缩略图与主图一致时透明度为100% */
    .mySwiper .swiper-slide-thumb-active img {
      opacity: 1;
    }

/* --------------------機械設備--------------------*/
/* Lightbox overlay styling */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1050;
  align-items: center;
  justify-content: center;
}
.lightbox-overlay.active {
  display: flex;
}
.lightbox-container {
  width: 100%;
  max-width: 800px; /* 限制最大寬度為 800px */
  max-height: 90%; /* 限制最大高度，防止溢出 */
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-container img {
  width: 100%; /* 使圖片填滿容器的寬度 */
  height: auto; /* 自動調整高度以保持圖片比例 */
  max-height: 100%; /* 防止圖片高度超過容器 */
  object-fit: contain; /* 保持圖片完整顯示 */
}

/* Lightbox Caption Style */
.lightbox-caption {
  color: #fff;
  text-align: center;
  font-size: 1.1em;
  margin-top: 10px;
}

/* Gallery Thumbnail Style */
.gallery-thumbnail {
  cursor: pointer;
  transition: transform 0.3s;
}
.gallery-thumbnail:hover {
  transform: scale(1.05);
}

/* Swiper Navigation Buttons */
.swiper-button-next, .swiper-button-prev {
  color: #fff;
}

/* --------------------內頁聯絡我們--------------------*/

.contact{
	background: url('../img/contactbg.jpg') center center;
	background-size: cover;
	height: 60vh;
	background-position: top;
}
/* --------------------工程實績--------------------*/
.works .bl{
	border-left: solid 5px  var(--secondary_03);
	padding-left: 16px;
}
.works .r-con ul {
    list-style: square;
}
.works li::marker {
    color: var(--secondary_03);
}
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.accordion-item {
    border: 0px solid rgba(0, 0, 0, .125);
}
/* 一级菜单 - 展开前背景色 */
.accordion-button.collapsed {
  background: var(--gray_02);
	border-bottom: solid 1px  var(--primary_02);
	  color: var(--primary_03);

}

/* 一级菜单 - 展开后背景色 */
.accordion-button:not(.collapsed) {
  background: var(--primary_03);
  color: #fff; /* 可选: 设置展开后的字体颜色 */
}

/* 二级菜单 - 展开时背景色 */
.accordion-body {
  background: var(--primary_01);
  color: var(--primary_03);
}
/* 更改展开后箭头颜色为白色 */
.accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1); /* 将箭头颜色改为白色 */
}
.accordion-button::after {
  filter: brightness(0) saturate(100%) invert(70%);
}
/* 初始樣式 */
.accordion-body a {
  color: inherit; /* 繼承文字顏色 */
  text-decoration: none; /* 取消預設底線 */
  position: relative; /* 設定相對定位來放置底線 */
  transition: transform 0.3s ease; /* 文字滑入的動畫 */
	line-height: 2;
}

/* 滑入時的樣式 */
.accordion-body a:hover {
  transform: translateX(5px); /* 文字向右移動 5px */
}

/* 底線動畫 */
.accordion-body a::after {
  content: ''; /* 空內容 */
  position: absolute; /* 絕對定位 */
  bottom: 0; /* 置於文字下方 */
  left: 0;
  width: 100%; /* 底線寬度與文字寬度相同 */
  height: 1px; /* 底線高度 */
  background-color: var(--primary_02); /* 底線顏色 */
  transform: scaleX(0); /* 初始底線寬度為 0 */
  transform-origin: left; /* 底線從左邊開始展開 */
  transition: transform 0.3s ease; /* 底線的動畫 */
}

/* 滑入時顯示底線 */
.accordion-body a:hover::after {
  transform: scaleX(1); /* 底線展開 */
}

/*社會公益*/
.single-image-swiper {
  position: relative;
}

.swiper-slide {
  position: relative;
}

.swiper-slide img {
  width: 100%;
  height: auto;
}

.image-title-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6); /* 黑色背景，透明度 80% */
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 1rem;
}
/*0.5 1 0.5輪播*/

.multi-image-swiper {
  width: 100%;
}

.multi-image-swiper .swiper-slide {
  width: auto;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.multi-image-swiper .swiper-slide img {
  width: 100%;
  height: auto;
}

/*七個切換*/
.button-group7 {
  display: flex;
  justify-content: space-between;
  gap: 1%;
}

.button-group7 .btn {
  flex: 1;
  background-image: linear-gradient(to right, var(--gray_04), var(--gray_05), var(--gray_04), var(--gray_05));
  padding: 0.5rem;
  color: var(--bs-white);
  background-size: 300% 100%;
  moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
  border-radius: .25rem;
  padding: 0.25rem 1rem;
	border-bottom: solid 2px #999;
}

.button-group7 .btn:hover,
.button-group7 .btn.active {
  color: var(--bs-white);
  background-size: 300% 100%;
  moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.04);
  border-radius: .25rem;
  padding: 0.25rem 1rem;	
  background-image: linear-gradient(to right, var(--primary_03), var(--primary_04), var(--primary_03), var(--primary_04));
}

.content-group .content-item {
  display: none;
}

.content-group .content-item.active {
  display: block;
}

/*基本資料*/
.basics{
	background: url('../img/basics.jpg') center center;
	background-size: cover;
	height: 60vh;
}
.basic-mt{
	padding-top: 15vh;
}
.basics h5{
	font-size: 1rem;
}
.team{
	background: url('../img/team.jpg') center center;
	background-size: cover;
}
.honor{
	background: url('../img/honor.jpg') center center;
	background-size: cover;
	height: 70vh;
}

@media (min-width: 992px) {
.basics{
	background: url('../img/basics.jpg') center center;
	background-size: cover;
	height: 70vh;
}
.basic-mt{
	padding-top: 28vh
}	
.basics h5{
	font-size: 1.25rem;
}	
.honor{
	background: url('../img/honor.jpg') center center;
	background-size: cover;
	height: 130vh;

}
	
}

.basics-number h2, .basics-number .number-ani {
  margin: 0; /* 去除 margin，文字置中 */
  text-align: center;
}


.number-ani.inner {
      font-size: 1.5rem;
    }

@media (min-width: 992px) {

    .number-ani.inner {
      font-size: 2.5rem;
    }
}	


.basics-number {
  border: solid 2px transparent; /* 初始邊框透明 */
  background-color: #fff; /* 白底 */
  border-radius: 50%; /* 圓形 */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1; /* 保持正圓 */
  width: 100%; /* 容器寬度，根據需要調整 */
  max-width: 150px; /* 限制最大寬度，避免過大 */
  margin: 0 auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加陰影 */
  padding: 5%; /* 可選：調整內距 */
  flex-direction: column;
  line-height: 0.7;
  font-weight: bold;
  animation: draw-border 5s ease-in-out infinite; /* 邊框動畫 */
}

/* 畫線效果的動畫 */
@keyframes draw-border {
  0% {
    border-color: transparent;
    border-width: 3px;
  }
  25% {
    border-top-color: var(--primary_02);
  }
  50% {
    border-right-color: var(--primary_03);
  }
  75% {
    border-bottom-color: var(--primary_04);
  }
  100% {
    border-left-color: var(--primary_05);
  }
}