@charset "UTF-8";

*{ font-family: "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; letter-spacing: 1px; font-weight: normal;}
::selection {
	background: #fff5d3;
}
html{ margin: 0; padding: 0; background: #fff;}
body{ margin: 0; padding: 0; background: url(../images/index_bg.jpg) repeat center top;}
body.scrollhide{ overflow-y: hidden; height: 100vh;}
img{ display: block;}
a{ text-decoration: none;}
a.text{ position: relative; padding: 0 0 0 20px; color: #163bb5; text-decoration: none;}
a.text::before{ position: absolute; top: 2px; left: 2px; display: block; content: ""; width: 15px; height: 15px; background: url(../images/icon_link.png);}

input, select, textarea{ font-weight: normal; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent;}
input:focus, select:focus, textarea:focus{ border: none; outline: none; background: transparent;}
::placeholder { color: #000;}

/* ::-webkit-scrollbar { width: 5px; background-color: transparent;}
::-webkit-scrollbar-thumb { background-color: #160732;} */

footer{ background: #fff;}

@media (max-width:500px){
html{ font-size: 12px;}
::-webkit-scrollbar{ width: 0;}
a.text::before{ top: 1; width: 11px; height: 11px; background-size: contain;}
}



.all{ width: 2560px; max-width: 100%; margin: 0 auto; background: url(../images/bg_tower.webp) no-repeat center top; background-size: cover; overflow: hidden;}
.all .kv{ position: relative; width: 2000px; max-width: 100%; margin: 0 auto;}
.all .kv>img{ max-width: 100%;}
.all .bg_tower_mid{ position: relative; margin: 0 auto; z-index: 2;}
.all .logo{ position: absolute; left: 5.15%; top: 3.9583%; width: 198px; max-width: 9.9%; z-index: 5;}

.all .cloud_01{ position: absolute; left: 0; top: 20.1041%; width: 29.4%; z-index: 1; animation: cloud_01 45s linear infinite;}
@keyframes cloud_01 {
    0%{ left: 0; opacity: 0;}
	3%{ left: 2.5%; opacity: 1;}
	20%{ left: 14.12%; opacity: 1;}
	40%{ left: 28.24%; opacity: 1;}
	60%{ left: 42.36%; opacity: 1;}
	80%{ left: 56.48%; opacity: 1;}
	97%{ left: 68.1%; opacity: 1;}
	100%{ left: 70.6%; opacity: 0;}
}
.all .cloud_02{ position: absolute; left: 63.7125%; top: -2.6041%; width: 15.05%; z-index: 2; animation: cloud_02 40s linear infinite;}
@keyframes cloud_02 {
    0%{ left: 63.7125%; opacity: 1;}
	17%{ left: 81.763%; opacity: 1;}
	20%{ left: 84.95%; opacity: 0;}
	40%{ left: 0%; opacity: 0;}
	43%{ left: 3.187%; opacity: 1;}
	60%{ left: 21.2375%; opacity: 1;}
	80%{ left: 42.475%; opacity: 1;}
	100%{ left: 63.7125%; opacity: 1;}
}
.all .cloud_03{ position: absolute; left: 51.3%; top: 2.2916%; width: 48.7%; z-index: 1; animation: cloud_03 32s linear infinite; animation-delay: 5s; opacity: 0;}
@keyframes cloud_03 {
    0%{ left: 51.3%; opacity: 0;}
	20%{ left: 0%; opacity: 0;}
	22%{ left: 1.2825%; opacity: 1;}
	40%{ left: 12.825%; opacity: 1;}
	60%{ left: 25.65%; opacity: 1;}
	80%{ left: 38.475%; opacity: 1;}
	98%{ left: 50.0175%; opacity: 1;}
	100%{ left: 51.3%; opacity: 0;}
}
.all .cloud_04{ position: absolute; left: 89.45%; top: 55%; width: 10.55%; z-index: 6; animation: cloud_04 50s linear infinite;}
@keyframes cloud_04 {
    0%{ left: 67.0875%; opacity: 1;}
	5%{ left: 72.1%; opacity: 1;}
	20%{ left: 89.45%; opacity: 0;}
	40%{ left: 0%; opacity: 0;}
	45%{ left: 5.1%; opacity: 1;}
	60%{ left: 22.3625%; opacity: 1;}
	80%{ left: 44.725%; opacity: 1;}
	100%{ left: 67.0875%; opacity: 1;}
}

.all .slogan{ position: absolute; left: 9.4%; top: 20.208%; width: 39.2%; z-index: 7; animation: slogan 1s forwards; opacity: 0;}
@keyframes slogan {
    0%{ transform: translate(0,0) scale(1.05,0.95); opacity: 0; transform-origin:center bottom;}
	70%{ transform: translate(0,-50px) scale(0.95,1.05); opacity: 1; transform-origin:center bottom;}
	100%{ transform: translate(0,0) scale(1,1); opacity: 1; transform-origin:center bottom;}
}


.all .en{ position: absolute; left: 13.5%; top: 68.021%; width: 31.4%; display: flex; justify-content: space-between; gap: 2px; z-index: 5;}
.all .en img{ max-width: 100%; opacity: 0;}
.all .en span.active img{ animation: en 0.3s forwards; opacity: 0;}
@keyframes en {
    0%{ transform: translate(0,0) scale(1.05,0.95); opacity: 0; transform-origin:center bottom;}
	70%{ transform: translate(0,-10px) scale(0.95,1.05); opacity: 1; transform-origin:center bottom;}
	100%{ transform: translate(0,0) scale(1,1); opacity: 1; transform-origin:center bottom;}
}

.all .talk_01{ position: absolute; left: 16.8%; top: 10.625%; width: 3.7%; z-index: 5;}
.all .talk_02{ position: absolute; left: 23.5%; top: 6.875%; width: 3.95%; z-index: 5;}
.all .talk_03{ position: absolute; left: 30.6%; top: 8.9583%; width: 3.95%; z-index: 5;}
.all .talk_04{ position: absolute; left: 37.9%; top: 11.458%; width: 3.8%; z-index: 5;}
.all .talk{ opacity: 0;}
.all .talk.active{ animation: talk 0.5s forwards;}
@keyframes talk {
    0%{ transform: scale(0,1); opacity: 0; transform-origin:center bottom;}
	100%{ transform: scale(1,1); opacity: 1; transform-origin:center bottom;}
}
.all .talk.active2{ animation: talk2 3s infinite; opacity: 1;}
.all .talk_01.active2{ animation-delay: .5s;}
.all .talk_03.active2{ animation-delay: .4s;}
.all .talk_04.active2{ animation-delay: .2s;}
@keyframes talk2 {
    0%{ transform: rotate(0deg); transform-origin:center bottom;}
	25%{ transform: rotate(-10deg); transform-origin:center bottom;}
	50%{ transform: rotate(0deg); transform-origin:center bottom;}
	75%{ transform: rotate(10deg); transform-origin:center bottom;}
	100%{ transform: rotate(0deg); transform-origin:center bottom;}
}

.all nav{ position: absolute; left: 10.3%; top: 76.354%; width: 37.15%; z-index: 5;}
.all nav ul{ display: flex; gap: 1%; list-style: none;}

.all nav ul li img{ max-width: 100%;}
.all nav ul li{ position: relative; cursor: pointer;}
.all nav ul li img:nth-of-type(2){ position: absolute; top: 0; left: 0; opacity: 0; transition: .5s;}
.all nav ul li:hover img:nth-of-type(2){ opacity: 1;}

.all .charactor_01{ position: absolute; left: 49.7%; top: 5.625%; width: 41.35%; z-index: 5;}
.all .charactor_02{ position: absolute; left: 50%; top: 26.667%; width: 7.1%; z-index: 5; animation: charactor_02 5s infinite; animation-delay: 5s;}
@keyframes charactor_02 {
    0%{ transform: translate(0,0); opacity: 1;}
	5%{ transform: translate(-50px,-50px); opacity: 0;}
	20%{ transform: translate(50px,50px); opacity: 0;}
	25%{ transform: translate(0,0); opacity: 1;}
	100%{ transform: translate(0,0); opacity: 1;}
}
.all .charactor_03{ position: absolute; left: 88.25%; top: 41.5625%; width: 6.8%; z-index: 5; animation: charactor_03 5s infinite; animation-delay: 8s;}
@keyframes charactor_03 {
    0%{ transform: translate(0,0); opacity: 1;}
	5%{ transform: translate(50px,-50px); opacity: 0;}
	20%{ transform: translate(-50px,50px); opacity: 0;}
	25%{ transform: translate(0,0); opacity: 1;}
	100%{ transform: translate(0,0); opacity: 1;}
}

.login{ position: absolute; top: 86%; left: 10.45%; z-index: 7;}
.login p{ display: inline-block; margin: 0; padding: 3px; background: #f7ece3; color: #f75c61; font-size: 0.875rem; border-radius: 50px;}
.login p a{ display: inline-block; padding: 3px 15px; background: #f75c61; color: #f7ece3; border-radius: 50px; transition: .3s;}
.login p a:hover{ background: #f77b84;}

.logout{ position: absolute; top: 86%; left: 10.45%; z-index: 7;}
.logout p{ display: inline-block; margin: 0; padding: 3px 3px 3px 15px; background: #f7ece3; color: #f75c61; font-size: 0.875rem; border-radius: 50px;}
.logout p a{ display: inline-block; padding: 3px 15px; background: #f75c61; color: #f7ece3; border-radius: 50px; transition: .3s;}
.logout p a:hover{ background: #f77b84;}

.all .pd{ display: none;}
.all .footer_m{ display: none;}

@media (max-width:1024px){
.login p{ font-size: 0.75rem;}
.logout p{ font-size: 0.75rem;}
}


@media (max-width:768px){
.all{ background: none;}
.all .bg_tower_mid{ display: none;}

.all .logo{ position: static; margin: 20px auto 10px; width: 20%; max-width: 20%;}
.all .charactor_01{ position: static; margin: 0 auto; width: 80vw;}
.all .slogan{ position: static; margin: -20vw auto 0; width: 90vw;}
.all .en{ display: none;}
.all .pd{ display: block; margin: 20px auto; width: 70vw;}

.all .cloud_02{ width: 40vw;}
.all .cloud_04{ width: 30vw;}

.all .talk_01{ left: 20vw; top: 77vw; width: 10vw;}
.all .talk_02{ left: 37vw; top: 76vw; width: 10vw;}
.all .talk_03{ left: 55vw; top: 74vw; width: 10vw;}
.all .talk_04{ left: 72vw; top: 77vw; width: 10vw;}

.all .charactor_02{ left: 8vw; top: 28vw; width: 10vw;}
.all .charactor_03{ left: 76vw; top: 14vw; width: 10vw;}

.all nav{ position: static; margin: 0 auto; width: 85vw;}
.login, .logout{ position: static; text-align: center; margin: 10px 0 0 0;}
.all .footer_m{ display: block; width: 100%;}
}





.overlay{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #502119; z-index: 100000000;}
.lightbox{ position: fixed; top: 5vh; left: 50%; transform: translate(-50% , 0); width: calc(2000px - 5vw); max-width: 90vw; height: 90vh; border-radius: 20px; box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.1); background: url(../images/popup_bg.jpg) top center repeat; z-index: 100000001; overflow: hidden;}
.lightbox .close{ display: flex; justify-content: center; align-items: center; position: absolute; right: 10px; top: 10px; width: 50px; height: 50px; background: #fff; border-radius: 50px; box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.1); font-size: 1.25rem; color: #f75c61; z-index: 10; cursor: pointer; transition: .3s;}
.lightbox .close:hover{ background: #f75c61; color: #fff;}

.popup_pic01{ position: absolute; left: 0; top: 40%; transform: translate(0, -30%); width: 40%; pointer-events: none;}
.popup_pic02{ position: absolute; right: 0; top: 0; z-index: 1; width: 11.2%; pointer-events: none;}
.popup_pic03{ position: absolute; left: 0; bottom: 0; z-index: 1; width: 13.05%; pointer-events: none;}

.popup_info{ float: right; margin: 30px 30px 0 0; padding: 60px 0; width: 70%; height: calc(100% - 60px); border-radius: 20px 0 0 20px; background: rgba(255,255,255,0.6); box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.1); overflow-y: auto; box-sizing: border-box;}
.popup_info::-webkit-scrollbar { width: 8px; background-color: #fff;}
.popup_info::-webkit-scrollbar-thumb { background-color: #f75c61;}
.popup_info>div{ width: 60%; margin: 0 auto;}
.popup_info>div>img{ max-width: 100%; margin: 20px 0 0 0;}

.popup_info>div .popup_title{ margin: 0 auto 60px;}
.popup_info>div article{ display: flex; margin: 20px 0 0 0;}
.popup_info>div article h3{ position: relative; display: inline-block; margin: 0 20px 0 0; color: #f75c61; font-size: 1.5rem;}
.popup_info>div article h3 i{ position: absolute; width: 100%; height: 15px; top: 15px; left: 0; background: #ff969b; z-index: -1; border-radius: 50px;}
.popup_info>div article span{ flex: 1; padding: 10px 0 0 0;}

.popup_info>div article.white{ flex-direction: column; padding: 20px; background: #fff; border-radius: 10px; box-sizing: border-box;}
.popup_info>div article h4{ margin: 0 0 10px; color: #f75c61; font-size: 1rem;}
.popup_info>div article p{ margin: 0;}

.popup_info>div ol{ margin: 0 0 20px; padding: 0; list-style: none;}
.popup_info>div ol li{ position: relative; padding: 0 0 0 30px; line-height: 2em; list-style: none; counter-increment:li;}
.popup_info>div ol li::before{ position: absolute; left: 0; top: 7px; display: inline-block; width: 16px; line-height: 16px; content: counter(li); padding: 0; font-size: 0.75rem; background: #f75c61; color: #fff; text-align: center; border-radius: 50px;}
.popup_info>div ol li a{ color: #f75c61;}
.popup_info>div ol li span{ color: #f75c61;}
.popup_info>div ol li+li{ margin: 10px 0 0 0;}

.popup_info>div article.form{ flex-wrap: wrap;}
.popup_info>div article select,.popup_info>div article input{ margin: 10px 0 0 0; padding: 0 20px; width: 100%; background: rgba(255,217,219,0.5); line-height: 46px; border: 1px solid #ffd9db; border-radius: 10px; font-size: 1rem;}
.popup_info>div article.form>div{ display: flex; width: 100%; justify-content: space-between;}
.popup_info>div article.form>div select{ width: calc(25% - 5px); box-sizing: border-box;}
.popup_info>div article.form>div input{ width: calc(75% - 5px); box-sizing: border-box;}

.popup_info>div article.form:nth-last-of-type(1){ justify-content: center;}
.popup_info>div article.form img{ max-width: 100%;}

@media (max-width:768px){
.lightbox .close{ width: 30px; height: 30px; box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.1);}

.popup_info{ margin: 5px; padding: 30px 0; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 20px;}
.popup_info::-webkit-scrollbar { width: 0px;}
.popup_pic01{ display: none;}

.popup_info>div .popup_title{ width: 140px; margin: 0 auto 30px;}
.popup_info>div{ width: 90%;}
.popup_info>div article h3{ font-size: 1rem;}
.popup_info>div article h3 i{ height: 10px; top: 6px;}
.popup_info>div article span{ padding: 0;}

.popup_info>div article.white{ padding: 15px;}

.popup_info>div article.form>div select{ width: calc(33.3% - 5px); box-sizing: border-box;}
.popup_info>div article.form>div input{ width: calc(66.6% - 5px); box-sizing: border-box;}

}