@charset "utf-8";
/* CSS Document */

html {font-size:8px; /* 1rem = 16px */ }

body{
	padding:0;
	margin:0;
	background-image:url(../images/BANNER/BK.jpg);
	height:100vh;
	font-family: 'Noto Sans TC', sans-serif;
	position: relative;
	overflow-x: hidden; /* 防止水平滾動條影響 */
	}
	
	/*特殊需求*/
	.sr-only {
	  position: absolute;
	  width: 1px;
	  height: 1px;
	  padding: 0;
	  margin: -1px;
	  overflow: hidden;
	  clip: rect(0, 0, 0, 0);
	  border: 0;
}

/* 只有 Tab 鍵盤操作才會顯示 */
a:focus-visible {
  outline: 3px solid #0099BD ;  /* 厚康綠 */
  border-radius: 6px;           /* 可配合圖片圓角 */
}
	
    /* 提示專用 */
    /* 背後滿版的白色背景，透明度設為 0.9 */
    .background-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 9998;
	  opacity: 0;
	  transition: opacity 0.3s ease;
    }
    /* 置中的 DIV，白色背景、圓角，置於最上層 */
    .centered-div {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      z-index: 9999;
      max-width: 400px;
      width: 80%;
      text-align: center;  opacity: 0;
      transition: opacity 0.3s ease;
    }
    .centered-div .close-btn {
      display: inline-block;
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #0099BD;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
	  font-size: 2rem; 
	  line-height:1.7;
    }
	
	#popupMessage{font-size: 2rem; line-height:1.7; /* 16px */}
	
	.fade-in {
     opacity: 1;
	 }

 /* 讀取中 */
    #loader-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 9999;
    }

    .spinner {
      width: 80px;
      height: 80px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #0099BD;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 16px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg);}
      100% { transform: rotate(360deg);}
    }

    .percentage {
      font-size: 16px;
      font-weight: bold;
      color: #0099BD;
    }

h1 {font-size: 4rem; line-height:1.4; /* 32px */ }
h2 {font-size: 3rem; line-height:1.4; /* 24px */}
h3 {font-size: 2.5rem; line-height:1.4; /* 16px */}
p {font-size: 2rem; line-height:1.7; /* 16px */}
a{text-decoration:none;}


.CONTENT{height:auto;}
.CONTENT_OP{overflow:auto; padding:140px 140px 0px 140px;}
.CONTENT_OP .CONTENT_LEFT{
	float:left;
	width:calc(30% - 20px);
	padding-right:20px;
	
	}
		
.CONTENT_OP .CONTENT_RIGHT{
	float:right;
	width: calc(70% - 0px);
	}
	
.CONTENT_OP .CONTENT_LEFT h1{
	font-size:7rem;
    color: #0099BD;
	font-weight:500;
	padding:0;
	margin:0;
	}	
	
.CONTENT_OP .CONTENT_LEFT h2{
	font-size:4rem;
    color: #000;
	font-weight:500;
	padding:0;
	margin:0;
	}	
	
.CONTENT_OP .CONTENT_LEFT h3{
	font-size:3rem;
    color: #0099BD;
	font-weight:500;
	padding:0;
	margin:10px 0 0 0;
	}
	
.CONTENT_OP .CONTENT_LEFT p{
	font-size:2.2rem;
    color: #000;
	font-weight:300;
	padding:20px 0 0 0;
	margin:0;
	}
	
.ABOUT{
	overflow:hidden;
	}
	
.ABOUT img{
	width:80%;
	float:right;
	display:block;
	}

	
.CONTENT_OP .CONTENT_RIGHT .GOOGLE_MAP{
	border-radius: 20px;
	border: 1px solid #0099BD;
	overflow:hidden;
	}
	
.CONTENT_OP .CONTENT_RIGHT .GOOGLE_MAP iframe{
	border-radius: 20px;
	display:block;
	}
	
::placeholder {
	color:#CCC;
	font-size:2rem;
	padding:10px;
}

.SERVICES{
	overflow:hidden;
	margin-top:30px;
	}

.SERVICES .SERVICES_BOX{
	border: 1.6px solid #0099BD;
	border-radius: 10px;
	float:left;
	width:calc(25% - 45px);
	margin:10px;
	padding:10px;
	text-align:center;
	}

	
.SERVICES .SERVICES_BOX h2{
	display:block;
	color: #0099BD;
	font-size:2.6rem;
	font-weight:500;
	padding:0;
	margin:0;
	}

.SERVICES .SERVICES_BOX p{
	display:block;	
	font-size:2rem;
	font-weight:300;
	padding:0;
	margin:0;
	}
	
.FORM{
	margin-top:19px;
	overflow:hidden;	
	}	
	
.FORM_A001{
	margin-bottom:20px;
	overflow:hidden;
	}

.INPUT_A001{
	border-radius:10px;
	border: 1px solid #0099BD;
	height:40px;
	width: calc(100% - 20px);
	}	
	
.INPUT_A001_SELECT{
	border-radius:10px;
	border: 1px solid #0099BD;
	height:45px;
	width: calc(100% - 10px);
	}
	
select{
	font-size:2rem;
	padding:10px;
	}
	
input{
	font-size:2rem;
	}
	
.INPUT_A002{
	border-radius:10px;
	border: 1px solid #0099BD;
	height: auto;
	width: calc(100% - 5px);
	}
	
.INPUT_A003{
	border-radius:10px;
	border: 1px solid #0099BD;
	height:42px;
	float:left;
	width:150px;
	}	

.VC{
	border-radius:10px;
	border: 1px solid #0099BD;
	margin:0px 10px 0 10px;
	padding:0px;
	display:block;
	float:left;
	}

.SUBMIT{
	border-radius:10px;
	background-color:#0099BD;
	color:#FFF;
	font-size:16px;
	border: 1px solid #0099BD;
	height:45px;
	width:100px;
	display:block;
	}
	
.layer2{display:block; overflow:hidden;}		
.layer2-2{display:none; overflow:hidden;}	

#LOGO{
	width: 100px;
	overflow: hidden;
 	position: fixed;
	z-index: 9999;
	left: 0px;
	top: 0px;
	}	
	
/*選單*/
#MENU{
	overflow:hidden;
 	position: fixed;
	z-index: 9999;
	right:0px;
	top:0px;
	display:block;
	}
	
/*手機選單*/

    /* 選單按鈕的 CSS 設定 */
    .menu-icon {
      width: 40px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      cursor: pointer;
    }
    /* 每條橫槓的樣式 */
    .menu-icon span {
      display: block;
      width: 100%;
      height:2px;
      background-color: #fbb03b;
      border-radius:100em;
      transition: all 0.3s ease;
    }
    /* 當加上 open 狀態時，第一與第三橫槓旋轉平移，第二橫槓隱藏 */
    .menu-icon.open span:nth-child(1) {
      transform: translateY(17px) rotate(45deg);
    }
    .menu-icon.open span:nth-child(2) {
      opacity: 0;
    }
    .menu-icon.open span:nth-child(3) {
      transform: translateY(-17px) rotate(-45deg);
    }

#PHOME_MENU{
	display:none;
	overflow:hidden;	
	z-index:9998;
	position:fixed;
	}	

#PHOME_MENU_X{
	display:none;
	position: fixed;
	z-index:9999;
	top:0;
	right:0;
	padding:15px 15px 12px 17px;
	}
	
#PHOME_MENU_CO{	
	display:none;
	overflow:hidden;
	}
	
#PHOME_MENU_CO_BK{	
	display:none;
	width:100%;
	height:100%;
	background-color:#FFF;
    opacity:0.9;
	transition: opacity 0.5s ease; /* 平滑過渡 */
	}

ul{
	list-style:none;
	margin:0 10px 0 0;
	padding:0;
	display:block;
	height:100px;
	}
	
li{
	float:left;
	line-height:1.1;
	}
	
li a{
	display:block;
	font-size:20px;
	color:#333;
	padding:10px 10px 0px 10px;
	margin:10px;
	/*background-color:#CCC;*/
	transition:0.4s;
	-webkit-transition:0.4s;
	text-decoration:none;
	text-align:center;
	}
	
li a:hover{
	color: #0099BD;
	}

.A001{font-size:16px; color:#0099BD; padding:0; margin:0;}
	
.BUTTON_ENTER{
	position:fixed;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 210px;
	width:120px;
	z-index: 9996;
	border-radius:10em;
	background-color:#0099BD;
	transition:0.4s;
	-webkit-transition:0.4s;
	font-size:1em;
	display:block;
	}

.BUTTON_ENTER a{
	display:block;
	color:#FFF;
	text-decoration:none;
	padding:15px 0px 15px 0px;
	text-align:center;
	font-size: 2rem;
	}

.BUTTON_ENTER:hover{background-color:#00B8DF;}
	

.LEFT_TITLE{
	display:block;
	position:fixed;
	z-index: 9997;
	width:30%;
	top:100px;
	left:150px;
	}
	
.LEFT_TITLE_02{
	display:none;
	}
	
.LEFT_TEXT{
	position:absolute;
	z-index: 9997;
	width:500px;
	bottom:100px;
	left:150px;	
	}
	
.RIGHT_IMG{
	position:absolute;
	z-index: 9995;
	width:40%;
	top:90px;
	right:120px;
	}
	
.RIGHT_IMG_BK{
	position:absolute;
	z-index:9994;
	width:33%;
	bottom:0px;
	right:10px;	
	}
	
#PROJECT_CO{
  position: relative;
	overflow:hidden;
	}		

.PROJECT{
	overflow:hidden;
	margin-top:30px;
	}	
	
.PJ_TITLE{	display: flex;
	}
	
.PJ_BACK{
	border-radius: 10em;
    background-color: #0099BD;
    display: block;
    width: 45px;
    height: 45px;
    margin:19px 0px 0px 6px;
    transition: 0.4s;
    position: relative;
	}

.PJ_BACK:hover{
    background-color:#00B8DF;
	}	
    
    /* 利用偽元素繪製「<」箭頭（back） */
    .PATH::before,
    .PATH::after {
      content: "";
      position: absolute;
      width: 11px;
      height: 2px;
      background-color: #fff;
      transform-origin: right center;  /* 固定右側為旋轉中心 */
    }
    .PATH::before {
      right: 15.4px;
      top: 15.4px;
      transform: translate(-5px, 0px) rotate(-45deg);
    }
    .PATH::after {
      right: 15.4px;
      top: 29.6px;
      transform: translate(-5px, 0px) rotate(45deg);
    }

	
	
.PROJECT .PROJECT_BOX{
	/*border: 1.6px solid #0099BD;*/
	border-radius: 10px;
	float:left;
	width:calc(25% - 30px);
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
	display:block;
	margin:15px;
	overflow:hidden;
	}
	
.PROJECT .PROJECT_BOX a{
  	display: block;
	overflow:hidden;
	}
	
.PROJECT .PROJECT_BOX img{
	border-radius: 10px;
	display:block;
	transform:scale(1,1);transition: all 0.2s ease-out;
	}
	
.PROJECT .PROJECT_BOX img:hover{transform:scale(1.1,1.1);}

.PROJECT_PAGE{overflow:hidden;}
.PROJECT_PAGE img{ width:80%;display:block;margin:0 auto 10px auto;border: 1px solid #0099BD;}

.MEXT_CO{ overflow:hidden; margin:auto; width:110px;}


    /* 基本圓形樣式，適用於所有箭頭 */
    .MEXT_CO .MEXT {
      border-radius: 10em;
      background-color: #0099BD;
      display: block;
      width: 45px;
      height: 45px;
      float: left;
      margin: 10px 5px;
      transition: 0.4s;
      position: relative; /* 為偽元素提供定位參考 */
    }
    
    /* 利用偽元素繪製「>」箭頭（forward） */
    .MEXT_CO .MEXT.forward::before,
    .MEXT_CO .MEXT.forward::after {
      content: "";
      position: absolute;
      width: 10px;    /* 線條長度 */
      height: 2px;    /* 線條粗細 */
      background-color: #fff;
      transform-origin: left center;  /* 固定左側為旋轉中心 */
    }
    .MEXT_CO .MEXT.forward::before {
      left: 15.4px;
      top: 15.4px;
      transform: translate(5px, 0px) rotate(45deg);
    }
    .MEXT_CO .MEXT.forward::after {
      left: 15.4px;
      top: 29.6px;
      transform: translate(5px, 0px) rotate(-45deg);
    }
    
    /* 利用偽元素繪製「<」箭頭（back） */
    .MEXT_CO .MEXT.back::before,
    .MEXT_CO .MEXT.back::after {
      content: "";
      position: absolute;
      width: 10px;
      height: 2px;
      background-color: #fff;
      transform-origin: right center;  /* 固定右側為旋轉中心 */
    }
    .MEXT_CO .MEXT.back::before {
      right: 15.4px;
      top: 15.4px;
      transform: translate(-5px, 0px) rotate(-45deg);
    }
    .MEXT_CO .MEXT.back::after {
      right: 15.4px;
      top: 29.6px;
      transform: translate(-5px, 0px) rotate(45deg);
    }

.MEXT_CO .MEXT a{color:#FFF; display:block;}

.MEXT_CO .MEXT a img{ padding-top:9px;}

.MEXT_CO .MEXT:hover{background-color:#00B8DF;}

.page-wrapper {
    position: relative;
    overflow: hidden;
}
	
footer{
    overflow:hidden;
    position: fixed;
    z-index:9999;
    left:0px;
	bottom:0px;
	width:100%;
	background-color:#FFF;
	}
	
footer p{
	font-size:1.6em;
	text-align: center;
	color: #0099BD;
	padding:0;
	margin:0;
	}
		
	


@media screen and (max-width:1768px) {/* 如果使用者視窗寬度 <=1600px， */	
}

@media screen and (max-width:1600px) {/* 如果使用者視窗寬度 <=1600px， */	
.BUTTON_ENTER{
	left: 0;
	right: 0;
	margin: auto;
	bottom: 210px;
	width:120px;
	}
.LEFT_TITLE{width:25%;}
.RIGHT_IMG{	width:40%;}	
.RIGHT_IMG_BK{width:31%;}
}

@media screen and (max-width:1440px) {/* 如果使用者視窗寬度 <=1440px， */		

}

@media screen and (max-width:1366px) {/* 如果使用者視窗寬度 <=1366px， */	.BUTTON_ENTER{
	left: 0;
	right: 0;
	margin: auto;
	bottom: 210px;
	width:120px;
	}
.LEFT_TITLE{width:22%;}
.RIGHT_IMG{	width:33%;}	
.RIGHT_IMG_BK{width:29%;}
}

@media screen and (max-width:1280px) {/* 如果使用者視窗寬度 <=1280px， */	
.BUTTON_ENTER{
	left: 0;
	right: 0;
	margin: auto;
	bottom: 210px;
	width:120px;
	}
.LEFT_TITLE{width:20%;}
.RIGHT_IMG{	width:33%;}	
.RIGHT_IMG_BK{width:29%;}
}

@media screen and (max-width:800px) {/* 如果使用者視窗寬度 <=800px， */	
}

@media screen and (max-width:768px) {/* 如果使用者視窗高度 <=768px， */

#MENU{display: none;}	

#PHOME_MENU_X{
	display:block;
	position:fixed;
	z-index:9999;
	top:0;
	right:0;
	padding:15px 15px 12px 17px;
	}


.CONTENT_OP{padding:80px 20px 20px 20px;}
	
.CONTENT_OP .CONTENT_LEFT{
	float:left;
	width:auto;
	overflow:hidden;
	}
.CONTENT_OP .CONTENT_RIGHT{
	float:left;
	width:100%;
	overflow:hidden;
	}
	
#PHOME_MENU_CO{	
	display:block;
	overflow:hidden;
	height:100%;
	z-index:9996;
	position:fixed;
	transition:opacity;
	}
	
#PHOME_MENU_CO_BK{	
	display:block;	
	width:100%;
	height:100%;
	position:fixed;
	z-index:9995;
	overflow:hidden;
	background-color:#FFF;
    opacity:0.95;
	top:0;
	left:0;
	}
	
.CONTENT_OP .CONTENT_LEFT h1 {
    font-size:6rem;
}

ul{
	margin:100px 0px 0 0;
	height:auto;
	}
	
li{
	width:100%;
	line-height:1.1;
	}	
	
.layer2{display: none;}		
.layer2-2{display: block;}	

.LEFT_TITLE{
	display: none;
	position:absolute;
	z-index: 9997;
	width:;
	top:20%;
	left:0px;
	}
	
.LEFT_TITLE_02{
	display:block;
	position: fixed;
	z-index: 9996;
	bottom:80px;
	padding:10px;
	left:0px;
	}
		
.LEFT_TEXT{
	position:absolute;
	z-index: 9996;
	width:100%;
	bottom:0px;
	left:0px;
	display:none;
	}
	
.LEFT_TEXT p{
	padding:10px;
	text-align:center;
	}
	
.RIGHT_IMG{
	position:absolute;
	z-index: 9995;
	width:90%;
	top:40px;
	right:10px;
	}
	
.RIGHT_IMG_BK{
	position:absolute;
	z-index:9994;
	width:100%;
	bottom:240px;
	right:0px;	
	}
	
  .responsive-br {
    display: none;
  }
  
  .BUTTON_ENTER{
	bottom:35px;
	}
	
	.SERVICES {
    margin-top:10px;
	}
	
	.SERVICES .SERVICES_BOX {
    width: calc(50% - 45px);
	}
	
	.SERVICES .SERVICES_BOX h2 {
    font-size: 2.3rem;
	}
	
	.PROJECT {
    margin-top:10px;
	}
	
	.PROJECT .PROJECT_BOX {
    width: calc(100% - 30px);
	}
	
	.SUBMIT {
    width: calc(100% - 10px);
	}
	
	.ABOUT img{
	width:100%;
	float:left;
	}
		
	.PROJECT_PAGE img{ width:calc(100% - 0px);display:block;margin:10px 0 10px 0;}
	
	.PJ_BACK{
    margin:13px 0px 0px 6px;
	}
	
	.FORM_A001 img{
	margin-bottom:20px;
	}

}