@charset "utf-8";
/* CSS Document */
.banner {position: relative; z-index: 1; line-height: 0;}
.banner img { width: 100%;}


.ind_A {display: flex; flex-wrap: wrap; align-items: center;}
.ind_AL {width: 52.2334%; line-height: 0; text-align: left;}
.ind_AR {width: 47.7666%; color: #333; padding: 0 5%;}
.ind_AR div.text {padding: 0 0 5.596% 0;}

.ind_B {color: #333; padding: 4.73% 0; position: relative; z-index: 1;}
.ind_B h2 {letter-spacing: 3.1px; line-height: 1.8; font-family: 'Noto Serif TC', serif; font-weight: 500; text-align: center; margin-bottom: 30px;}
.ind_B div.text {display: flex; flex-wrap: wrap; padding: 5.339% 0 4.587% 0; text-shadow: -1px -1px 0 #edeeea,1px -1px 0 #edeeea,-1px 1px 0 #edeeea,1px 1px 0 #edeeea;}
.ind_B div.text > div:nth-child(1) {width: 50%; padding: 0 4.888% 0 0;}
.ind_B div.text > div:nth-child(2) {width: 50%; padding: 0 0 0 5.865%;}
.ind_B div.text > div, .ind_B div.text > div p {line-height: 2.25;}
.ind_B .btn_a {margin: auto;}

.ind_C {display: flex; flex-wrap: wrap; align-items: center;}
.ind_CL {width: 47.7666%; color: #333; padding: 0 0 0 15.765%;}
.ind_CL div.text {padding: 0 0 5.596% 0;}
.ind_CR {width: 52.2334%; line-height: 0; text-align: right;}

.ind_D {color: #333; padding: 4.9922% 0 3.2581% 0; position: relative; z-index: 1;}
.ind_D > div.frame_1170 {display: flex; flex-wrap: wrap; justify-content: space-between;}
.ind_D > div.frame_1170 > div {width: calc(100% / 3); max-width: 272px; margin-bottom: 40px; position: relative;}
.ind_D > div.frame_1170 > div > div.photo {height: 0; padding-bottom: 100%; overflow: hidden; border-radius: 50%; position: relative; z-index: 1; margin-bottom: 12.5%;}
.ind_D > div.frame_1170 > div:hover > div.photo {-webkit-animation: topmove_b5 3000ms infinite; animation: topmove_b5 3000ms infinite;}
.ind_D > div.frame_1170 > div > div.photo::before {content: ''; background: url("../images/icon_01a.png") no-repeat rgba(0, 0, 0, 0.7); background-position: right bottom; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; filter:alpha(opacity=0); Opacity:0; transition: all 0.5s ease 0s;}
.ind_D > div.frame_1170 > div:hover > div.photo::before {background-position: center; filter:alpha(opacity=100); Opacity:1; transition: all 0.5s ease 0s;}
.ind_D > div.frame_1170 > div > div.photo::after {content: ''; position: absolute; top: 9px; left: 9px; right: 9px; bottom: 9px; z-index: 50; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; transition: all 0.5s ease 0s;}
.ind_D > div.frame_1170 > div:hover > div.photo::after {top: calc(100% - 10px); left: calc(100% - 10px); right: calc(100% - 10px); bottom: calc(100% - 10px); border: 3px solid rgba(255, 255, 255, 1); border-radius: 50%; transition: all 0.5s ease 0s;}
.ind_D > div.frame_1170 > div > h3 {color: #333; text-align: center; transition: all 0.5s ease 0s; line-height: 1.6;}
.ind_D > div.frame_1170 > div:hover > h3 {color: #7d5f51; transition: all 0.5s ease 0s;}

.ind_E {color: #333; padding: 2.838% 0 2.891% 0; position: relative; z-index: 1;}
.ind_E h2 {letter-spacing: 3.1px; font-family: 'Noto Serif TC', serif; font-weight: 500; text-align: center; margin-bottom: 2.891%;}
.ind_E > div.frame_1170 {display: flex; flex-wrap: wrap; justify-content: space-between;}
.ind_E > div.frame_1170 > div {width: calc(100% / 3 - 30px); max-width: 320px; margin: 0 15px 40px 15px; position: relative;}
.ind_E > div.frame_1170 > div > div.photo {height: 0; padding-bottom: 100%; overflow: hidden; position: relative; z-index: 1; margin-bottom: calc(15px + 1%);}
.ind_E > div.frame_1170 > div:hover > div.photo {-webkit-animation: topmove_b5 3000ms infinite; animation: topmove_b5 3000ms infinite;}
.ind_E > div.frame_1170 > div > div.photo::before {content: ''; background: url("../images/icon_01a.png") no-repeat rgba(0, 0, 0, 0.7); background-position: bottom right; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; filter:alpha(opacity=0); Opacity:0; transition: all 0.5s ease 0s;}
.ind_E > div.frame_1170 > div:hover > div.photo::before {background-position: center; filter:alpha(opacity=100); Opacity:1; transition: all 0.5s ease 0s;}
.ind_E > div.frame_1170 > div > div.photo::after {content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: 50; border: 1px solid rgba(255, 255, 255, 0); transition: all 0.5s ease 0s;}
.ind_E > div.frame_1170 > div:hover > div.photo::after {top: calc(100% - 15px); left: calc(100% - 15px); right: calc(100% - 15px); bottom: calc(100% - 15px); border: 3px solid rgba(255, 255, 255, 1); border-radius: 50%; transition: all 0.5s ease 0s;}
.ind_ED {font-family:'Microsoft JhengHei'; letter-spacing: 0.4px; margin-bottom: 4px;}
.ind_E > div.frame_1170 > div > h3 {color: #333; transition: all 0.5s ease 0s;}
.ind_E > div.frame_1170 > div:hover > h3 {color: #7d5f51; transition: all 0.5s ease 0s;}


.video-section { max-width: 1200px; margin: 0 auto; width: 100%;}
.video-container {position: relative;padding-bottom: 51.5%;padding-top: 30px;height: 0;overflow: hidden;}
.video-container iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; border-width: 0;}