@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=Chiron+GoRound+TC:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

*{ font-family: "Chiron GoRound TC", "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; letter-spacing: 1px; font-weight: bold;}
::selection {
	background: #fff5d3;
}
html{ margin: 0; padding: 0; color: #fff; background: #17171b;}
body{ margin: 0; padding: 0;}
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: 5px; 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;}
::placeholder { color: #333333;}

/* ::-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;}
}


.kv{ position: relative; width: 2000px; max-width: 100%; aspect-ratio: 2000 / 1080; margin: 0 auto; overflow: hidden;}
.kv img{ max-width: 100%;}
.kv img:not(.kv_fkbg){ position: absolute;}
.kv .mobile_kv{ display: none;}
.kv>div{ animation: kv_bg 2s forwards cubic-bezier(0, 0.7, 0.8, 0.3);}
@keyframes kv_bg {
    0%{ transform: scale(2) rotate(16deg);}
	100%{ transform: scale(1) rotate(0deg);}
}
.kv_fkbg{ visibility: hidden;}
.kv_bg{ top: 0; left: 0;}
.kv_ch01{ top: 12.22%; left: 33.45%; width: 31.275%; animation: kv_ch01 1s forwards ease-in-out; animation-delay: 0.53s; opacity: 0;}
@keyframes kv_ch01 {
    0%{ transform: scale(1.2) rotate(0deg); opacity: 0; left: 23.45%;}
	100%{ transform: scale(1) rotate(0deg); opacity: 1; left: 33.45%;}
}
.kv_ch02{ top: 19.722%; left: 55.4%; width: 17.475%; animation: kv_ch02 1s forwards ease-in-out; animation-delay: 0.43s; opacity: 0;}
@keyframes kv_ch02 {
    0%{ transform: scale(1.2) rotate(0deg); opacity: 0; left: 65.4%;}
	100%{ transform: scale(1) rotate(0deg); opacity: 1; left: 55.4%;}
}
.kv_ch03{ top: 20%; left: 27.75%; width: 13%; animation: kv_ch03 1s forwards ease-in-out; animation-delay: 0.33s; opacity: 0;}
@keyframes kv_ch03 {
    0%{ transform: scale(1.2) rotate(0deg); opacity: 0; left: 17.75%;}
	100%{ transform: scale(1) rotate(0deg); opacity: 1; left: 27.75%;}
}

.kv_bd01{ top: 9.07%; left: 18.075%; width: 20.175%; animation: kv_bd01 0.5s forwards ease-in-out; animation-delay: 2s; opacity: 0;}
@keyframes kv_bd01 {
    0%{ transform: scale(1.2) rotate(0deg) translate(3%,-10%); opacity: 0;}
	100%{ transform: scale(1) rotate(0deg) translate(0,0); opacity: 1;}
}
.kv_bd02{ top: 6.805%; left: 36.75%; width: 23.975%; animation: kv_bd02 0.5s forwards ease-in-out; animation-delay: 2s; opacity: 0;}
@keyframes kv_bd02 {
    0%{ transform: scale(1.2) rotate(0deg) translate(-5%,10%); opacity: 0;}
	100%{ transform: scale(1) rotate(0deg) translate(0,0); opacity: 1;}
}
.kv_bd03{ top: 7.916%; left: 60%; width: 22%; animation: kv_bd03 0.5s forwards ease-in-out; animation-delay: 2s; opacity: 0;}
@keyframes kv_bd03 {
    0%{ transform: scale(1.2) rotate(0deg) translate(3%,10%); opacity: 0;}
	100%{ transform: scale(1) rotate(0deg) translate(0,0); opacity: 1;}
}

.kv_bird01{ top: 18.51%; left: 20.55%; width: 8.15%; animation: kv_bird01 8s infinite ease-in-out;}
@keyframes kv_bird01 {
    0%{ transform: rotate(15deg) scale(1.1); left: 20.55%;}
	50%{ transform: rotate(0deg) scale(1); left: 18.55%;}
	100%{ transform: rotate(15deg) scale(1.1); left: 20.55%;}
}
.kv_bird02{ top: 7.63%; left: 16.875%; width: 4.1%;}
.kv_bird03{ top: 5.416%; left: 23.175%; width: 3.475%;}
.kv_bird04{ top: 4.875%; left: 69.8%; width: 3.7%; animation: kv_bird04 8s infinite ease-in-out;}
@keyframes kv_bird04 {
    0%{ transform: rotate(15deg) scale(1.1); left: 69.8%;}
	50%{ transform: rotate(0deg) scale(1); left: 71.8%;}
	100%{ transform: rotate(15deg) scale(1.1); left: 69.8%;}
}
.kv_bird05{ top: 15.416%; left: 77.15%; width: 1.45%;}

.kv_fdc01{ top: 28.7%; left: 16.5%; width: 5.025%; animation: kv_fdc01 0.3s forwards ease-in-out; animation-delay: 1.8s; opacity: 0;}
@keyframes kv_fdc01 {
    0%{ transform: scale(0,0); opacity: 0; top: 28.7%;}
	80%{ transform: scale(1,1.2); opacity: 1; top: 26.7%;}
	90%{ transform: scale(1.2,1); opacity: 1; top: 28.7%;}
	100%{ transform: scale(1,1); opacity: 1; top: 28.7%;}
}
.kv_fdc02{ top: 50%; left: 78.3%; width: 6.15%; animation: kv_fdc02 0.3s forwards ease-in-out; animation-delay: 1.85s; opacity: 0;}
@keyframes kv_fdc02 {
    0%{ transform: scale(0,0); opacity: 0; top: 50%;}
	80%{ transform: scale(1,1.2); opacity: 1; top: 48%;}
	90%{ transform: scale(1.2,1); opacity: 1; top: 50%;}
	100%{ transform: scale(1,1); opacity: 1; top: 50%;}
}
.kv_fdc03{ top: 13.88%; left: 82.2%; width: 2.5%; animation: kv_fdc03 0.3s forwards ease-in-out; animation-delay: 1.9s; opacity: 0;}
@keyframes kv_fdc03 {
    0%{ transform: scale(0,0); opacity: 0; top: 13.88%;}
	80%{ transform: scale(1,1.2); opacity: 1; top: 11.88%;}
	90%{ transform: scale(1.2,1); opacity: 1; top: 13.88%;}
	100%{ transform: scale(1,1); opacity: 1; top: 13.88%;}
}

.kv_fpor{ top: 14.81%; left: 36.75%; width: 6.3%; animation: kv_fpor 1s forwards ease-in-out; animation-delay: 0.63s; opacity: 0;}
@keyframes kv_fpor {
    0%{ transform: scale(1.2) rotate(-15deg); opacity: 0; top: 8.81%; left: 38.75%;}
	100%{ transform: scale(1) rotate(0deg); opacity: 1; top: 14.81%; left: 36.75%;}
}

.kv_fbter01{ top: 50.78%; left: 22.25%; width: 4.2%; animation: kv_fbter01 1s forwards ease-in-out; animation-delay: 1.5s; opacity: 0;}
@keyframes kv_fbter01 {
    0%{ transform: scale(0.8) rotate(0deg); opacity: 0; top: 55.78%; left: 24.25%;}
	100%{ transform: scale(1) rotate(0deg); opacity: 1; top: 50.78%; left: 22.25%;}
}
.kv_fbter02{ top: 62.5%; left: 67%; width: 4.3%; animation: kv_fbter02 1s forwards ease-in-out; animation-delay: 1.4s; opacity: 0;}
@keyframes kv_fbter02 {
    0%{ transform: scale(0.8) rotate(0deg); opacity: 0; top: 58.5%; left: 71%;}
	100%{ transform: scale(1) rotate(0deg); opacity: 1; top: 62.5%; left: 67%;}
}
.kv_fbter03{ top: 25.6%; left: 85.8%; width: 3.55%; animation: kv_fbter03 1s forwards ease-in-out; animation-delay: 1.45s; opacity: 0;}
@keyframes kv_fbter03 {
    0%{ transform: scale(0.8) rotate(0deg); opacity: 0; top: 28.6%; left: 80.8%;}
	100%{ transform: scale(1) rotate(0deg); opacity: 1; top: 25.6%; left: 85.8%;}
}

.kv_star01{ top: 34.12%; left: 19%; width: 39.8%; animation: kv_star01 2s infinite ease-in-out;}
@keyframes kv_star01 {
    0%{ filter: brightness(1.2) blur(0px);}
	50%{ filter: brightness(1.5) blur(2px);}
	100%{ filter: brightness(1.2) blur(0px);}
}
.kv_star02{ top: 1.5%; left: 55%; width: 35.4%; animation: kv_star02 2s infinite ease-in-out;}
@keyframes kv_star02 {
    0%{ filter: brightness(1.5) blur(0px);}
	50%{ filter: brightness(1.2) blur(2px);}
	100%{ filter: brightness(1.5) blur(0px);}
}
.kv_light01{ top: 0; left: 23.1%; width: 9.075%; transform-origin:top center; animation: kv_light01 10s infinite linear;}
@keyframes kv_light01 {
    0%{ transform: rotate(-15deg) translate(0,-25%);}
	50%{ transform: rotate(-60deg) translate(0,-20%);}
	100%{ transform: rotate(-15deg) translate(0,-25%);}
}
.kv_light02{ top: 0; left: 25.1%; width: 4.575%; transform-origin:top center; animation: kv_light02 20s infinite linear;}
@keyframes kv_light02 {
    0%{ transform: rotate(-15deg) translate(0,-25%); opacity: 0;}
	50%{ transform: rotate(-60deg) translate(0,-20%); opacity: 1;}
	100%{ transform: rotate(-15deg) translate(0,-25%); opacity: 0;}
}

.kv span{ position: absolute; padding: 20px; bottom: 39%; left: 36.75%; width: 26.5%; backdrop-filter: blur(10px); border-radius: 100px; box-sizing: border-box; border: 1px solid transparent; animation: kv_slo01 0.5s forwards ease-in-out; animation-delay: 2.5s; opacity: 0; transition: .3s; pointer-events: none;}
@keyframes kv_slo01 {
    0%{ transform: translate(0,10%); opacity: 0; cursor: pointer; pointer-events: visible;}
	100%{ transform: translate(0,0); opacity: 1; cursor: pointer; pointer-events: visible;}
}
.kv span:hover{ backdrop-filter: blur(2px);}
.kv span::after{ content: ''; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(90deg,#b876d2,#70baff,#b876d2,#70baff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;}
.kv_slo01 img{ position: relative !important; margin: 0 auto; max-width: 100%; transition: .3s;}
.kv span:hover img{ filter: brightness(1.3);}
.kv_slo02{ bottom: 15.28%; left: 27.85%; width: 44.3%; animation: kv_slo02 0.5s forwards ease-in-out; animation-delay: 2s; opacity: 0;}
@keyframes kv_slo02 {
    0%{ transform: translate(0,-10%); opacity: 0;}
	100%{ transform: translate(0,0); opacity: 1;}
}
@media (max-width:820px){
	.kv{ aspect-ratio: 820 / 1230;}
	.kv .mobile_kv{ display: block;}
	.kv>div{ display: none;}
}


main{ position:relative; z-index:1;}
.dot01{ position: absolute; top: 25%; left: 5%; width: 7%; transform: rotate(5deg); pointer-events: none;}
.dot02{ position: absolute; top: 20%; right: 14%; width: 7%; transform: rotate(8deg); pointer-events: none;}
.dot03{ position: absolute; bottom: 10%; left: 4%; width: 7%; transform: rotate(-5deg); pointer-events: none;}
.dot04{ position: absolute; bottom: 6%; right: 8%; width: 7%; transform: rotate(4deg); pointer-events: none;}
.dot05{ position: absolute; top: 54%; right: 5%; width: 7%; transform: rotate(-5deg); pointer-events: none;}
.dot06{ position: absolute; top: 45%; left: 15%; width: 5%; transform: rotate(-5deg); pointer-events: none;}
.dot07{ position: absolute; top: 64%; left: 7%; width: 5%; transform: rotate(-2deg); pointer-events: none;}
.dot08{ position: absolute; top: 51%; right: 3%; width: 5%; transform: rotate(-3deg); pointer-events: none;}
.dot09{ position: absolute; bottom: 13%; right:13%; width: 5%; transform: rotate(11deg); pointer-events: none;}
@media (max-width:1366px){
.dot01,.dot02,.dot03,.dot04,.dot05,.dot06,.dot07,.dot08,.dot09{ display: none;}
}

.zoneA{ position: relative; width: 2000px; max-width: 100%; margin: 0 auto -1px; z-index: 1;}
.zoneA .linkBtn{ position: absolute; transition: .3s;}
.zoneA .linkBtn:hover{ filter:brightness(1.2);}
.zoneA .linkBtn img{ filter: drop-shadow(5px 0 0 #17171b) drop-shadow(-5px 0 0 #17171b) drop-shadow(0 5px 0 #17171b) drop-shadow(0 -5px 0 #17171b);}
.zoneA .linkBtn_01{ top: 0; left: 50px; transform: rotate(10deg);}
.zoneA .linkBtn_02{ width: 95px; top: 0; right: 397px; transform: rotate(-8deg) translate(0, 99px);}
.zoneA .linkBtn_03{ width: 95px; top: 0; right: 285px; transform: rotate(-12deg) translate(0, 75px);}
.zoneA .linkBtn_04{ width: 95px; top: 0; right: 168px; transform: rotate(-14deg) translate(0, 49px);}
.zoneA .linkBtn_05{ width: 95px; top: 0; right: 50px; transform: rotate(-20deg) translate(0, 15px);}
.zoneA img{ max-width: 100%;}
@media (max-width:1366px){
	.zoneA .linkBtn_01{ width: 120px; top: 0; left: 50px; transform: rotate(10deg) translate(0, 10px);}
	.zoneA .linkBtn_02{ width: 80px; top: 0; right: 346px; transform: rotate(-8deg) translate(0, 82px);}
	.zoneA .linkBtn_03{ width: 80px; top: 0; right: 250px; transform: rotate(-12deg) translate(0, 63px);}
	.zoneA .linkBtn_04{ width: 80px; top: 0; right: 150px; transform: rotate(-14deg) translate(0, 40px);}
	.zoneA .linkBtn_05{ width: 80px; top: 0; right: 50px; transform: rotate(-20deg) translate(0, 15px);}
}
@media (max-width:1080px){
	.zoneA .linkBtn img{ filter: drop-shadow(3px 0 0 #17171b) drop-shadow(-3px 0 0 #17171b) drop-shadow(0 3px 0 #17171b) drop-shadow(0 -3px 0 #17171b);}
	.zoneA .linkBtn_01{ width: 120px; top: 0; left: 50px; transform: rotate(10deg) translate(0, 5px);}
	.zoneA .linkBtn_02{ width: 80px; top: 0; right: 335px; transform: rotate(-4deg) translate(0, 69px);}
	.zoneA .linkBtn_03{ width: 80px; top: 0; right: 240px; transform: rotate(-8deg) translate(0, 57px);}
	.zoneA .linkBtn_04{ width: 80px; top: 0; right: 145px; transform: rotate(-12deg) translate(0, 40px);}
	.zoneA .linkBtn_05{ width: 80px; top: 0; right: 50px; transform: rotate(-20deg) translate(0, 15px);}
}
@media (max-width:960px){
	.zoneA .linkBtn_01{ width: 80px; top: 0; left: 50px; transform: rotate(10deg) translate(0, 5px);}
	.zoneA .linkBtn_02{ width: 60px; top: 0; right: 273px; transform: rotate(-4deg) translate(0, 58px);}
	.zoneA .linkBtn_03{ width: 60px; top: 0; right: 199px; transform: rotate(-7deg) translate(0, 50px);}
	.zoneA .linkBtn_04{ width: 60px; top: 0; right: 125px; transform: rotate(-12deg) translate(0, 37px);}
	.zoneA .linkBtn_05{ width: 60px; top: 0; right: 50px; transform: rotate(-20deg) translate(0, 15px);}
}
@media (max-width:820px){
	.zoneA .linkBtn img{ filter: drop-shadow(2px 0 0 #17171b) drop-shadow(-2px 0 0 #17171b) drop-shadow(0 2px 0 #17171b) drop-shadow(0 -2px 0 #17171b);}
	.zoneA .linkBtn_01{ width: 15%; top: 0; left: 16%; transform: rotate(10deg) translate(-50%, 9%);}
	.zoneA .linkBtn_02{ width: 15%; top: 0; right: 67%; transform: rotate(5deg) translate(50%, 12%);}
	.zoneA .linkBtn_03{ width: 15%; top: 0; right: 50%; transform: rotate(0deg) translate(50%, 20%);}
	.zoneA .linkBtn_04{ width: 15%; top: 0; right: 33%; transform: rotate(-5deg) translate(50%, 19%);}
	.zoneA .linkBtn_05{ width: 15%; top: 0; right: 16%; transform: rotate(-10deg) translate(50%, 9%);}
}

.zoneB{ width: 2000px; max-width: 100%; margin: 0 auto; background: #17171b;}
.zoneB>div{ position: relative; display: flex; align-items: center; justify-content: center; width: 1120px; max-width: 100%; margin: 0 auto; padding: 160px 20px 0; text-align: center; box-sizing: border-box;}
.zoneB .letter{ position: relative; display: inline-block;}
.zoneB .letter>img{ margin: 0 auto;}
.zoneB .letter a{ position:absolute; top: 13%; right: -6%; width: 60px; transition: .3s;}
.zoneB .letter a:hover{ transform: scale(1.2) rotate(15deg); filter: brightness(1.2);}
.zoneB .letter a img{ width: 100%;}
.zoneB i{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-style: normal; font-size: 9rem; font-weight: bold; letter-spacing: -5px; color: #fff; opacity: 0.05;}
.zoneB p{ position: absolute; bottom: 40px; margin: 0; font-size: 2.25rem;}
.zoneB p span{ color: #ffd16e;}
.zoneB p b{ display: block; padding: 5px 0 0; font-size: 2.625rem;}
@media (max-width:820px){
	.zoneB>div{ padding: 100px 10px 0;}
	.zoneB i{ font-size: 5rem;}
	.zoneB p{ font-size: 1.25rem;}
	.zoneB p b{ font-size: 1.625rem;}
}
@media (max-width:500px){
	.zoneB>div{ padding: 60px 10px 0;}
	.zoneB .letter a{ width: 30px; right: 21%;}
	.zoneB .letter>img{ width: 50%;}
	.zoneB p{ bottom: 15px;}

}

.zoneC{ width: 2000px; max-width: 100%; margin: 0 auto; padding: 60px 0 0; background: #17171b;}
.zoneC>div{ width: 1119px; max-width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.zoneC>div img{ max-width: 100%;}
.zoneC .top{ position: relative; background: #1f1f24; text-align: center;}
.zoneC .top .boxMonster{ position: absolute; top: 0; right: 0; width: 20.716%; transform: translate(0,-20%);}
.zoneC .top p{ position: absolute; right: 20px; bottom: 30%; display: inline-block; margin: 0; padding: 5px 10px 5px 15px; border-radius: 50px; background: #c31919;}
.zoneC .top p span{ display: inline-block; margin: 0 0 0 15px; padding: 5px 10px; font-size: 0.875rem; background: #fff; border-radius: 50px; color: #c31919; cursor: pointer;}

.zoneC .middle{ padding: 0 20px; background: #1f1f24;}
.zoneC .middle>div{ display: flex; flex-wrap: wrap; justify-content: center; padding: 60px 0; background: url(../images/boxBg.jpg); background-size: cover;}
.zoneC .middle article{ display: flex; flex: 1; flex-direction: column; align-items: center; padding: 0 10px;}
.zoneC .middle article>div{ position: relative;}
.zoneC .middle article>div img:nth-of-type(2){ position: absolute; top: 0; right: 0; transform:  translate(50%,0); width: 43px;}
.zoneC .middle article+article{ border-left: 1px solid rgba(255,255,255,0.2);}
.zoneC .middle article input[type=text]{ width: 60%; padding: 10px 0; color: #fff; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.2); cursor: pointer;}
.zoneC .middle article input[type=text]::placeholder { color: #fff;}
.zoneC .middle article input[placeholder=選擇伺服器]{ margin: 0 0 30px;}
.zoneC .middle article input[type=button]{ margin: auto 0 0; padding: 10px 30px; border-radius: 20px; background: #fff; cursor: pointer; font-size: 1.25rem; font-weight: bold; color: #18181a; transition: .3s;}
.zoneC .middle article input[type=button]:not(:disabled):hover{ background: #c31919; color: #fff;}
.zoneC .middle article input[type=button]:disabled{ color: #eee; pointer-events: none;}
.zoneC .middle article a{ margin: 10px 0 0; padding: 0 0 3px; color: #fff; font-size: 0.75rem; border-bottom: 1px solid #fff; transition: .3s;}
.zoneC .middle article a:hover{ padding: 0 10px 3px;}
.zoneC .middle article p{ margin: 0 0 10px;}
.zoneC .middle article p+p{ margin: 0 0 20px;}
.zoneC .middle article.dcbox a.hideRegister{ visibility: hidden; pointer-events: none;}
.zoneC .middle i{ display: flex; align-items: baseline; justify-content: center; flex-basis: 100%; margin: 50px 10px 0; padding: 30px 0 0; border-top: 1px solid rgba(255,255,255,0.2); font-style: normal;}
.zoneC .middle i span{ color: #fff;}
.zoneC .middle i b{ display: inline-block; margin: 0 5px 0 0; width: 16px; height: 16px; background: #c31919; color: #fff; border-radius: 50px; font-size: 12px; text-align: center;}
@media (max-width:820px){
	.zoneC .top .boxMonster{ right: 3%;}
	.zoneC .top p{ position: static; margin: 20px 0 0;}

	.zoneC .middle{ padding: 30px 20px;}
	.zoneC .middle>div{ flex-wrap: wrap; padding: 30px 0;}
	.zoneC .middle article>div img:nth-of-type(1){ width: 120px;}
	.zoneC .middle article>div img:nth-of-type(2){ width: 20px; transform: translate(0, 0);}
	.zoneC .middle article{ flex: 1 1 0;}
	.zoneC .middle article:last-of-type{ flex: 0 0 100%; margin: 30px 0 0; padding: 10px 10px 0; border-left: none; border-top: 1px dashed rgba(255,255,255,0.2); box-sizing: border-box;}
	.zoneC .middle article input[type=text]{ width: 90%;}
	.zoneC .middle i{ margin: 50px 0 0; padding: 30px 20px 0;}
	.zoneC .middle i span{ flex: 1;}
}
@media (max-width:500px){
	.zoneC{ padding: 30px 0 0;}
}


.zoneD{ width: 2000px; max-width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.zoneD>div{ display: flex; align-items: center; gap: 20px; width: 1080px; max-width: 100%; margin: 60px auto 0; padding: 15px 35px; border-radius: 20px; background: linear-gradient(to bottom, #5c0fcf, #505af1); box-sizing: border-box;}
.zoneD>div img{ width: 90px;}
.zoneD>div p{ margin: 0 auto 0 0; font-size: 1.5rem;}
.zoneD>div a{ padding: 10px 30px; border-radius: 20px; background: rgba(255,255,255,0.9); color: #5634e0; font-size: 1.25rem; transition: .3s;}
.zoneD>div a:hover{ background: rgba(255,255,255,1);}
@media (max-width:820px){
	.zoneD>div{ margin: 30px 0 0; padding: 10px 20px;}
}
@media (max-width:500px){
	.zoneD>div{ gap: 10px; border-radius: 5px;}
	.zoneD>div img{ width: 40px;}
	.zoneD>div p{ font-size: 1rem;}
}

.sliderZone{ width: 2000px; max-width: 100%; margin: -40px auto 0; background: url("../images/sliderBG.jpg") center top / auto 50% repeat-x, #4f5af1;}
.banner_slider { width: 100%; padding: clamp(10px, 4vw, 20px) 0 clamp(25px, 8vw, 100px); overflow: hidden;}
.banner_slider .slick-list { overflow: visible;}
.banner_slider .slick-slide { width: clamp(280px, 70vw, 1080px); margin: 0 30px; transition: none; transform-origin: center center; will-change: transform;}
.slider_item { width: 100%;}
.slider_item img { display: block; width: 100%; height: auto; border-radius: 10px; user-select: none; -webkit-user-drag: none; pointer-events: none;}
.slick-dots{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); display: flex; justify-self: center; gap: 0 15px; margin: 50px 0 0; list-style: none;}
.slick-dots li{ width: 20px; height: 20px; border-radius: 50px; background: #4f5af1; border: 5px solid #17171b; cursor: pointer;}
.slick-dots li button{ display: none;}
.slick-dots li.slick-active{ background: #17171b;}
@media (max-width:820px){
	.sliderZone{ margin: 30px auto 0;}
	.banner_slider .slick-slide { margin: 0 10px;}
}
@media (max-width:500px){
	.slick-dots{ margin: 20px 0 0;}
	.slick-dots li{ width: 10px; height: 10px;  border: 2px solid #17171b;}
	.slider_item img { border-radius: 3px;}
}

.QAzone{ width: 2000px; max-width: 100%; margin: 0 auto; padding: 60px 0 200px; background: url(../images/qa_bg.jpg) bottom center / 100% auto no-repeat, #515cf1;}
.QAzone>div{ width: 1120px; max-width: 100%; margin: 0 auto; padding: 0 20px; box-sizing: border-box;}
.QAzone article+article{ margin: 10px 0 0;}
.QAzone article div{ display: flex; align-items: center; border-radius: 10px; font-size: 1.25rem; overflow: hidden;}
.QAzone article div+div{ margin: 10px 0 0 0;}
.QAzone article div:nth-of-type(1){ padding: 0 30px 0 0; color: #eee; background-color: #2b2d43; cursor: pointer; transition: .3s;}
.QAzone article div:nth-of-type(1)::before{ align-self: stretch; content: ''; width: 20px; min-width: 20px; background: #5d3ca2;}
.QAzone article div:nth-of-type(2)>img{ margin: 0 10px; width: 15px;}
.QAzone article div:nth-of-type(2)>div{ background-color: #5c3ea7;}
.QAzone article div:nth-of-type(2)>div::before{ align-self: stretch; content: ''; width: 20px; min-width: 20px; background: #2b2d43;}

.QAzone article div img.qaicon{ padding: 10px 0 10px 30px;}
.QAzone article div p{ margin: 0; padding: 10px 0 10px 30px;}
.QAzone article:nth-of-type(1)>div:nth-of-type(1){ background-image: url(../images/qabg01.jpg); background-position: right center; background-repeat: no-repeat; background-size: contain;}
.QAzone article:nth-of-type(2)>div:nth-of-type(1){ background-image: url(../images/qabg02.jpg); background-position: right center; background-repeat: no-repeat; background-size: contain;}
.QAzone article:nth-of-type(3)>div:nth-of-type(1){ background-image: url(../images/qabg03.jpg); background-position: right center; background-repeat: no-repeat; background-size: contain;}
.QAzone article:nth-of-type(4)>div:nth-of-type(1){ background-image: url(../images/qabg04.jpg); background-position: right center; background-repeat: no-repeat; background-size: contain;}
.QAzone article:nth-of-type(5)>div:nth-of-type(1){ background-image: url(../images/qabg05.jpg); background-position: right center; background-repeat: no-repeat; background-size: contain;}
.QAzone article:nth-of-type(6)>div:nth-of-type(1){ background-image: url(../images/qabg06.jpg); background-position: right center; background-repeat: no-repeat; background-size: contain;}
.QAzone article div:nth-of-type(1):hover{ background-position: right -1% center;}
@media (max-width:500px){
	.QAzone{ padding: 30px 0 100px;}
	.QAzone article div{ border-radius: 3px; font-size: 1rem;}
	.QAzone article div:nth-of-type(1){ padding: 0 10px 0 0;}
	.QAzone article div:nth-of-type(1)::before{ width: 5px; min-width: 5px;}
	.QAzone article div:nth-of-type(2)>img{ margin: 0 5px; width: 5px;}
	.QAzone article div:nth-of-type(2)>div::before{ width: 5px; min-width: 5px;}
	.QAzone article div img.qaicon{ width: 40px; padding: 10px;}
	.QAzone article div p{ padding: 10px 0;}
}


.popup{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); width: 660px; max-width: 95vw; padding: 10px; background: #fefdf7; box-sizing: border-box; border-radius: 5px; z-index: 15;}
.popup.active{ animation: popshow 0.3s forwards ease-in-out;}
@keyframes popshow {
    0%{ transform: translate(-50%,-50%) scale(0);}
	80%{ transform: translate(-50%,-50%) scale(1.05);}
	100%{ transform: translate(-50%,-50%) scale(1);}
}
.popup.close{ animation: pophide 0.3s forwards ease-in-out;}
@keyframes pophide {
    0%{ transform: translate(-50%,-50%) scale(1);}
	20%{ transform: translate(-50%,-50%) scale(1.05);}
	100%{ transform: translate(-50%,-50%) scale(0);}
}
.popup .title{ position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 0; color: #fefdf7; background: #2b2d42; font-size: 1.25rem; border-radius: 5px; overflow: hidden;}
.popup .title span{ position: absolute; font-size: 3.125rem; color: rgba(254,253,247,0.03);}
.popup .title i{ position: absolute; right: 10px; cursor: pointer; transition: .3s;}
.popup .title i:hover{ transform: rotate(90deg);}
.popup hr{ height: 1px; background: #f3f1e5; box-shadow: none; border: none;}
.popup .main{ height: 300px; max-height: calc(100vh - 60px); overflow-y: auto; background: url(../images/popbg.jpg) center no-repeat;}
.popup .main::-webkit-scrollbar { width: 9px; background-image: url(../images/popscroll.jpg); background-color: transparent;}
.popup .main::-webkit-scrollbar-thumb {  background-color: rgba(43,45,66,0.3); border-radius: 50px;}
.popup .note{ padding: 10px 20px 30px 0;}
.popup .note h4{ position: relative; display: inline-block; margin: 20px 0 0; padding: 0 10px; font-size: 1.25rem; color: #2b2d42;}
.popup .note h4 i{ position: absolute; bottom: -2px; left: 0; width: 60px; height: 16px; background: #ffd16e; border-radius: 3px; z-index: -1;}
.popup .note p{ margin: 10px 0 0; color: #7f808c; line-height: 1.4em;}
.popup .note p span{ color: #7263fa;}
.popup .note ol{ margin: 10px 0 0; padding: 0;}
.popup .note ol li{ position: relative; padding: 0 0 0 30px; line-height: 1.4em; list-style: none; counter-increment:li; text-align: left; color: #7f808c;}
.popup .note ol li::before{ position: absolute; left: 0; top: 2px; display: inline-block; width: 16px; line-height: 16px; content: counter(li) ". "; padding: 0; text-align: center; }
.popup .note ol li+li{ margin: 10px 0 0 0;}
.popup .note ol li span{ color: #7263fa;}
.overflow{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(23,23,27,0.9); z-index: 14;}

@media (max-width:500px){
	.popup .main{ height: 80vh;}
}

footer{ background: #18171c;}