@charset "utf-8";
/* CSS Document */
.ind_A {position: relative; overflow: hidden;}
.ind_AP {line-height: 0;}
.ind_AC {position: absolute; top: 15.19%; left: 20px; right: 20px; bottom: 0;}
.ind_ACC {color: #7a5530; max-width: 955px; margin: auto; padding: 35px 0 45px 0;}
.ind_ACC p {line-height: 160%; letter-spacing: 1.1px; font-weight: 500; text-align: center;}

.ind_B {position: relative; z-index: 1; padding-bottom: 60px; overflow: hidden;}
.ind_B::before {content: ''; background: url("../images/bg_04.jpg") no-repeat center; background-size: cover; width: 100%; height: 87.472%; position: absolute; top: 16.2%; left: 0; z-index: -1;}
.ind_BC {display: flex; flex-wrap: wrap; padding: 36px 32.92px 0 32.92px;}
.ind_BC div.item > div {width: calc(100% - 54px); margin: 0 27px; position: relative;}
.ind_BC div.item > div > div.ind_BCS {display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 10px;}
.ind_BC div.item > div > div.ind_BCS span {color: #fff; font-family: 'Noto Sans TC', serif; font-weight: 500; letter-spacing: 7.5px; text-align: center; background-color: #c49d62; padding: 5px 19px 13.7px 24px; position: relative; transition: all 1.3s ease 0s;}
.ind_BC div.item > div:hover > div.ind_BCS span {background-color: #d70c19; transition: all 1.3s ease 0s;}
.ind_BC div.item > div > div.ind_BCS span::after {content: ''; position: absolute; bottom: 3px; left: 0; width: 100%; height: 3px; background-color: #fff;}
.ind_BC div.item > div > div.ind_BCD {color: #af8c6a; font-family: 'Noto Sans TC', serif; font-weight: 300; letter-spacing: 1.2px; text-align: center; margin-bottom: 5px; transition: all 1.3s ease 0s;}
.ind_BC div.item > div > div.ind_BCY {color: #af8c6a; font-family:'Arial'; letter-spacing: 1.2px; text-align: center; margin-bottom: 12px; transition: all 1.3s ease 0s;}
.ind_BC div.item > div:hover > div.ind_BCD, .ind_BC div.item > div:hover > div.ind_BCY {color: #d70c19; transition: all 1.3s ease 0s;}
.ind_BC div.item > div > div.ind_BCP {position: relative; width: 100%; padding-bottom: 100%; height: 0; overflow: hidden; background: url("../images/bg_05.png") no-repeat center; background-size: cover; margin-bottom: 12px;}
.ind_BC div.item > div > div.ind_BCP > div {position: absolute; top: 6.56%; left: 6.56%; right: 6.56%; bottom: 6.56%; line-height: 0; border-radius: 50%; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 10;}
.ind_BC div.item > div > div.ind_BCP > div img {max-height: 100%; -moz-transform:rotate(0deg) scale(1.0, 1.0); -webkit-transform:rotate(0deg) scale(1.0, 1.0); -o-transform:rotate(0deg) scale(1.0, 1.0); -ms-transform:rotate(0deg) scale(1.0, 1.0); transform:rotate(0deg) scale(1.0, 1.0); transition: all 1.3s ease 0s;}
.ind_BC div.item > div:hover > div.ind_BCP > div img {max-height: 100%; -moz-transform:rotate(15deg) scale(1.3, 1.3); -webkit-transform:rotate(15deg) scale(1.3, 1.3); -o-transform:rotate(15deg) scale(1.3, 1.3); -ms-transform:rotate(15deg) scale(1.3, 1.3); transform:rotate(15deg) scale(1.3, 1.3); transition: all 1.3s ease 0s;}
.ind_BC div.item > div > h3 {height: 54px; line-height: 46px; padding: 0 15px; color: #936c28; font-weight: 300; letter-spacing: 1.2px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 3px solid #c49d62; transition: all 1.3s ease 0s;}
.ind_BC div.item > div:hover > h3 {color: #fff; border: 3px solid #936c28; background-color: #936c28; transition: all 1.3s ease 0s;}

.ind_C {position: relative; z-index: 1; padding: 50px 0 60px 0; /*background: url("../images/bg_06.png") no-repeat top; background-size: 100%;*/}
.serviceL {display: flex; flex-wrap: wrap; padding: 40px 0 0 0;}
.serviceL > div {width: 22.7845%; margin: 0 2.954% 0 0; position: relative;}
.serviceL > div:nth-child(4n+4) {margin: 0;}
.serviceL > div > div {line-height: 0;}
.serviceL > div > h3 {position: absolute; top: 0; left: 0; width: 100%; height: 38.7%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #5f3a16; font-family: 'Noto Sans TC', serif; font-weight: 500; letter-spacing: 5px; text-align: center; transition: all 0.25s ease 0s;}
.serviceL > div:hover > h3 {color: #d70c19; transition: all 1.3s ease 0s;}

.ind_D {padding: 65px 0 545px 0; background: url("../images/bg_07.png") no-repeat bottom center; background-size: 100%;}
.guidedL {display: flex; flex-wrap: wrap; padding: 40px 0 0 0;}
.guidedL .item > div {width: 100%; max-width: 444px; margin: auto; position: relative; z-index: 1;}
.guidedL .item > div > div.photo {line-height: 0;}
.guidedL .item > div > div.text {position: absolute; top: 50%; left: 50%; right: 50%; bottom: 50%; z-index: 10; padding: 0 20px; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; text-align: center; background: url("../images/bg_08.png") no-repeat center; background-size: 95%; background-color: rgba(196, 157, 98, 0.75); filter:alpha(opacity=0); Opacity:0; transition: all 0.5s ease 0s;}
.guidedL .item > div:hover > div.text {top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(196, 157, 98, 0.75); filter:alpha(opacity=100); Opacity:1.0; transition: all 0.5s ease 0s;}
.guidedL .item > div > div.text h3 {color: #fff; font-family: 'Noto Sans TC', serif; font-weight: 500; letter-spacing: 5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 7px; position: relative; top: -20px; filter:alpha(opacity=0); Opacity:0; -webkit-transition: all 0.4s ease, opacity 0.1s ease; -moz-transition: all 0.4s ease, opacity 0.1s ease; -o-transition: all 0.4s ease, opacity 0.1s ease; transition: all 0.4s ease, opacity 0.1s ease;}
.guidedL .item > div:hover > div.text h3 {top: 0px; filter:alpha(opacity=100); Opacity:1.0; -webkit-transition: all 0.5s ease, opacity 0.2s ease; -moz-transition: all 0.5s ease, opacity 0.2s ease; -o-transition: all 0.5s ease, opacity 0.2s ease; transition: all 0.5s ease, opacity 0.2s ease; -webkit-transition-delay: 0.5s; -moz-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s;}
.guidedL .item > div > div.text p {color: #fff; font-weight: 300; letter-spacing: 1.2px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; bottom: -20px; filter:alpha(opacity=0); Opacity:0; -webkit-transition: all 0.4s ease, opacity 0.1s ease; -moz-transition: all 0.4s ease, opacity 0.1s ease; -o-transition: all 0.4s ease, opacity 0.1s ease; transition: all 0.4s ease, opacity 0.1s ease;}
.guidedL .item > div:hover > div.text p {bottom: 0px; filter:alpha(opacity=100); Opacity:1.0; -webkit-transition: all 0.8s ease, opacity 0.4s ease; -moz-transition: all 0.8s ease, opacity 0.4s ease; -o-transition: all 0.8s ease, opacity 0.4s ease; transition: all 0.8s ease, opacity 0.4s ease; -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s;}