@charset "utf-8";
/* CSS Document */
.subBanner {position: relative; z-index: 2;}
.subBanner > .img {line-height: 0; font-size: 0; position: relative; z-index: 1;}
.subBanner > .txt {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 20px 100px; max-width: 1400px; margin: 75px auto auto auto;}
.subBanner > .txt h2, .subBanner > .txt h1 { position: relative; font-size: 141.1764%; font-weight: 500; border: 2px solid #fff; padding: 6px 11px; margin: 0; max-width: 83px;}

.subMain { position: relative; margin-top: 100px; min-height: 300px; z-index: 1; transition: all 0.25s ease 0s;}
.seo_area { margin: 15px 0 50px 0; transition: all 0.25s ease 0s;}
.building_bg { position: fixed; top: 35%; left: 0; width: 46.4%; z-index: -1; transition: all 0.25s ease 0s;}

.path { position: relative; display: flex; flex-flow: wrap; width: 100%; list-style-type:none; margin: 0; padding: 5px 0;}
.path::before { content: ''; display: inline-block; background: url("../images2/icon_home_01.png") no-repeat center / contain; width: 16px; height: 13px; margin: 13px 5px 0 0;}
.path li {list-style-type:none; margin: 0; padding: 0; font-weight: 800; color: #a77722; letter-spacing: 4px; transition: all 0.25s ease 0s;}
.path li::after { content: ">"; display: inline-block; margin: 0 10px; transition: all 0.25s ease 0s;}
.path li:last-child::after {content: none;}
.path li a { position: relative;}
.path li a:link, .path li a:visited {text-decoration:none; color:#a77722; transition: all 0.25s ease 0s;}
.path li a:active, .path li a:hover {text-decoration:none; color:#a77722; cursor:pointer; transition: all 0.25s ease 0s;}
.path li a::after { content: ''; position: absolute; bottom: -2px; right: 0; width: 0%; height: 1px; background: #a77722; z-index: 1; transition: all 0.25s ease 0s;}
.path li a:hover::after { width: 100%; left: 0; transition: all 0.25s ease 0s;}

.subM { margin: 50px 0 15px 0; transition: all 0.25s ease 0s;}
.subM ul { position: relative; width: 100%; max-height: inherit; display: flex; flex-flow: wrap; overflow: hidden; transition: all 0.25s ease 0s;}
.subM ul li { position: relative; background: #fff; padding: 0 15px 15px 0; transition: all 0.25s ease 0s;}
.subM > ul > li:last-child::after { content: ''; position: absolute; top: calc(50% - 7.5px); transform: translateY(-50%); left: 100%; background: #a77722; width: 1200px; height: 1px; z-index: -1;}
.subM ul li a:link, .subM li a:visited { position: relative; text-decoration: none; text-align: center; color: #777777; background: #eee; font-size: 117.647%; font-weight: 700; padding: 3px 45px; letter-spacing: 3px; display: flex; justify-content: center; align-items: center; transition: all 0.25s ease 0s;}
.subM ul li a:active, .subM ul li a:hover {text-decoration:none; cursor:pointer; color:#fff; background: #777; transition: all 0.25s ease 0s;}
.subM ul li.current a {pointer-events: none; cursor: text; color:#fff; background: #777;}

.pages {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 3.5% 0 11.5% 0;}
.pages a:link, .pages a:visited { position: relative; text-decoration:none; color: #212529; line-height: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-width: 30px; height: 30px; margin: 0px 5px 5px 0; padding: 0 0 3px 2px; font-weight: 800; overflow: hidden; z-index: 10; transition: all 0.25s ease 0s;}
.pages a:active, .pages a:hover {text-decoration:none; cursor:pointer; transition: all 0.25s ease 0s;}
.pages a::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #3d3d3d; opacity: 0; z-index: -1; transition: all 0.25s ease 0s;}
.pages a:hover::before { opacity: 1;}
.pages .prev { font-size: 0 !important; margin: 0 5px 5px 0!important;}
.pages .next { font-size: 0 !important; margin: 0 0 5px 0!important;}
.pages .prev::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 0; width: 0; height: 0; border-style: solid; border-width: 8px 10px 8px 0; border-color: transparent #c2c2c2 transparent transparent; z-index: 1; transition: all 0.25s ease 0s;}
.pages .next::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 0; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 10px; border-color: transparent transparent transparent #c2c2c2; z-index: 1; transition: all 0.25s ease 0s;}
.pages .prev:hover::before, .pages .next:hover::before { display: none;} 
.pages .prev:hover::after { border-color: transparent #313332 transparent transparent;} 
.pages .next:hover::after { border-color: transparent transparent transparent #313332;} 
.pages .current::before { opacity: 1;}

.about { position: relative; margin: 2.3% 0 0 0;}
.about h1 { justify-content: center;}
.about .about_A { display: flex; flex-flow: wrap; margin: 10px 0 0 0;}
.about .about_A .text { width: 50.583%; padding: 70px 4% 0 0; transition: all 0.25s ease 0s;}
.about .about_A .tit_a { margin-bottom: 40px; align-items: center;}
.about .about_A .tit_a img { margin-right: 15px;}
.about .about_A .pic { width: 49.417%; text-align: center; transition: all 0.25s ease 0s;}
.about .about_B { margin: 8% 0;}
.about .about_B .pic { max-width: 88%;}
.about .about_B .black { position: relative; display: flex; flex-flow: wrap; padding: 40px 20px; max-width: 79.2%; margin: -17% 0 0 auto; background: rgb(38, 38, 38, .8); z-index: 2;}
.about .about_B .black .pic { position: relative; width: 100%; max-width: 1057px; z-index: 1;}
.about .about_B .black > div { width: 25%; color: #fff; font-weight: 700; display: flex; flex-flow: column; align-items: center; border-right: 1px solid #fff; padding: 25px 10px;}
.about .about_B .black > div:last-child { border-right: 0;}
.about .about_B .black > div .icon { display: flex; flex-flow: column; align-items: center; margin-bottom: 20px;}
.about .about_B .black > div .icon img { width: 33px;}
.about .about_C { padding: 0 0 10% 0;}
.about .about_C .history { background: rgba(230, 229, 227, 0.5); display: flex; flex-flow: wrap; align-items: flex-end; margin: 4% 0 0 0; padding: 40px 50px; transition: all 0.25s ease 0s;}
.about .about_C .history > div { width: 46%; margin: 0 8% 0 0; transition: all 0.25s ease 0s;}
.about .about_C .history > div:nth-child(2n+2) { margin-right: 0;}
.about .about_C .history > div > .time { position: relative; display: flex; flex-flow: wrap; align-items: center;}
.about .about_C .history > div > .time .year { position: relative; width: 106px; color: #323639; font-size: 117.647%; font-weight: 800; margin-bottom: 70px; transition: all 0.25s ease 0s;}
.about .about_C .history > div > .time .year::before { content: ''; position: absolute; top: calc(100% + 10px); left: calc(50% - 2px); transform: translateX(-50%); width: 2px; height: 42px; background: #a77722; transition: all 0.25s ease 0s;}
.about .about_C .history > div > .time .year::after { content: ''; position: absolute; top: calc(100% + 57px); left: calc(50% - 2px); transform: translateX(-50%); width: 4px; height: 4px; background: #a77722; border-radius: 2px; transition: all 0.25s ease 0s;}
.about .about_C .history > div > .time .txt { width: calc(100% - 106px); padding: 0 0 0 10px; font-weight: 600; margin-top: 40px;}
.about .about_C .tit_a { justify-content: center; transition: all 0.25s ease 0s;}

.work_wrap { position: relative;}
.work_wrap .work_list { display: flex; flex-flow: wrap;}
.work_wrap .work_list > div { position: relative; width: 23.75%; margin: 0 1.666% 40px 0; background: #916312; transition: all 0.25s ease 0s;}
.work_wrap .work_list > div:nth-child(4n+4) { margin-right: 0;}
.work_wrap .work_list > div .pic { position: relative; width: 100%; height: 0; padding-bottom: 144.1037%; overflow: hidden; z-index: 1;}
.work_wrap .work_list > div .pic::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgba(145, 99, 18, 0.85) 0%, rgba(145, 99, 18, 0.02) 75%); z-index: 11; opacity: 1; transition: all 0.25s ease 0s;}
.work_wrap .work_list > div .pic::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(0deg, rgb(49, 51, 50, .8) 0%, rgba(49, 51, 50, 0) 75%); z-index: 11; opacity: 0; transition: all 0.25s ease 0s;}
.work_wrap .work_list > div .pic img { transition: all 1.2s ease 0s;}
.work_wrap .work_list > div .text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 15px; z-index: 2;}
.work_wrap .work_list > div .text .tit { margin: 0 0 5px 0; color: #fff; font-weight: 700; letter-spacing: 3px; transition: all 0.25s ease 0s;}
.work_wrap .work_list > div .text .lit { color: #d3d3d3; font-weight: 700; letter-spacing: 1px; transition: all 0.25s ease 0s;}
.work_wrap .work_list > div:hover .pic::before { opacity: 0;}
.work_wrap .work_list > div:hover .pic::after { opacity: 1;}
.work_wrap .work_list > div:hover .pic img { transform: scale(1.05);}
.work_wrap .work_list > div:hover .text .lit { color: #fff;}
.work_wrap .new_list { margin: 3% auto;}
.work_wrap .new_list > div { position: relative; display: flex; flex-flow: wrap; border-bottom: 1px solid #c19f5d; margin-bottom: 10px; color: #212529; font-weight: 800;}
.work_wrap .new_list > div::before { content: ''; position: absolute; bottom: -1.5px; left: 0; width: 15%; height: 3px; background: #dba340; transition: all 0.5s ease 0s;}
.work_wrap .new_list > div .time { width: 15%; text-align: center; padding: 20px; transition: all 0.25s ease 0s;}
.work_wrap .new_list > div .tit { width: 85%; padding: 20px; transition: all 0.25s ease 0s;}
.work_wrap .new_list > div:hover { color: #b08538;}
.work_wrap .new_list > div:hover::before { width: 100%;}

.work_detail_top { margin-top: 205px; transition: all 0.25s ease 0s;}
.work_detail_wrap h1 { font-weight: 700;}
.work_detail_wrap .work_detail { position: relative; display: flex; flex-flow: wrap; margin-top: 40px; transition: all 0.25s ease 0s;}
.work_detail_wrap .work_detail h1 { position: relative; font-weight: 600; letter-spacing: 6px; padding: 0 0 30px 0; margin: 0; transition: all 0.25s ease 0s;}
.work_detail_wrap .work_detail h1::before { content: ''; position: absolute; bottom: 0; left: 0; width: calc(100% - 8px); background: #916312; height: 2px; transition: all 0.25s ease 0s;}
.work_detail_wrap .work_detail h1::after { content: ''; position: absolute; bottom: -1px; left: calc(100% - 4px); width: 4px; background: #916312; height: 4px; border-radius: 6px; transition: all 0.25s ease 0s;}
.work_detail_wrap .work_detail .text { position: sticky; top: 70px; max-height: calc(100vh - 100px); overflow-y: auto; width: 44.666%; padding: 0 4% 0 0; margin: 0 0 50px 0;}
.work_detail_wrap .work_detail .text .text_T .txt { font-weight: 700; margin: 50px 0 30px 0;}
.work_detail_wrap .cont_in_T { margin: 15px auto;}
.work_detail_wrap .cont_in_B { margin: 10px auto 30px auto;}
.work_detail_wrap .btnPBN { display: flex; flex-flow: row; align-items: center; justify-content: space-around; border-top: 1px solid #b08538; border-bottom: 1px solid #b08538; margin: 30px 0;}
.work_detail_wrap .btnPBN .prev { position: relative; padding: 12px 10px 12px 22px; line-height: 1; color: #7e7e7e; font-weight: 700; transition: all 0.25s ease 0s;}
.work_detail_wrap .btnPBN .prev::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 12px; height: 19px; background: url("../images2/icon_prev_02.png") no-repeat top left / contain; transition: all 0.25s ease 0s;}
.work_detail_wrap .btnPBN .back { position: relative; padding: 12px 10px; line-height: 1; font-weight: 700; transition: all 0.25s ease 0s;}
.work_detail_wrap .btnPBN .next { position: relative; padding: 12px 22px 12px 10px; line-height: 1; color: #7e7e7e; font-weight: 700; transition: all 0.25s ease 0s;}
.work_detail_wrap .btnPBN .next::after { content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 12px; height: 19px; background: url("../images2/icon_next_02.png") no-repeat top right / contain; transition: all 0.25s ease 0s;}
.work_detail_wrap .btnPBN a:hover { color: #000;}
.work_detail_wrap .btnPBN .prev:hover::before, .work_detail_wrap .btnPBN .next:hover::after { filter: brightness(0);}
.work_detail_wrap .work_detail .pic { width: 55.334%; text-align: center; margin: 15px 0 0 0; transition: all 0.25s ease 0s;}
.work_detail_wrap .work_detail .pic > div { margin-bottom: 40px; background: #fff; overflow: hidden;}
.work_detail_wrap .work_detail .pic > div:last-child { margin-bottom: 150px;}
.work_detail_wrap .work_detail .pic > div img { transition: all 1.2s ease 0s;}
.work_detail_wrap .work_detail .pic > div:hover img { transform: scale(1.05);}


/* 20251201  舊版架構  */

.form-group .btn.btn-primary {
  background-color: #aaa;
}
.form-group .btn.btn-primary:hover {
  background-color: #a67822;
  border-color: #a67822;
}

.knowm {
  background-color: #ffffff80;
  border: 1px solid #ADAAAA;
  margin-bottom: 10px;
  padding: 20px 10px;
}

.knowm img {
  margin: 0;
}