@charset "UTF-8";

*{ font-family: "Chiron GoRound TC", "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; letter-spacing: 1px; font-optical-sizing: auto; font-weight: bold;}
::selection {
	background: #fff5d3;
}
html{ margin: 0; padding: 0; background: #fff;}
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{ margin: 0; 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: var(--blueB);}

:root{
	--deepA : #2c2d35;
	--greyA : #eeeeee; 
	--greyB : #bebebe;
	--blueA : #03265e;
	--blueB : #061630;
	--yellowA : #ffc13c;
	--redA : #df463e;
	--purple : #9146ff;
}

@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{ display: flex; position: relative; max-width: 2000px; margin: 0 auto; overflow: hidden; z-index: 1;}
.kv>img{ 
	max-width: 100%;
	visibility: hidden;
}
.kv .blur{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1.02); background: url('../images/kv_bg.jpg'); background-size: cover; filter: blur(10px); animation: kv_bg 15s infinite;}
.kv .clear{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../images/kv_bg.jpg'); background-size: cover; mask-mode: luminance; mask-image: url('../images/kv_bg_c.png'); mask-size: cover; animation: kv_bg 15s infinite;}
@keyframes kv_bg {
    0%{ background-position-y: 50%;}
	50%{ background-position-y: 30%;}
	100%{ background-position-y: 50%;}
}
.kv .layer{ position: absolute; top: 0; left: 0;}

.kv .layer img{ max-width: 100%;}
.kv .layer .kv_btm{ position: absolute; bottom: 0; left: 0; border-bottom: 1px solid #fff;}
.kv .layer .kv_slogan{ position: absolute; bottom: 0; left: 30.625%; width: 38.75%;}
.kv .layer .kv_p1{ position: absolute; bottom: 0; left: 32.25%; width: 21.65%; animation: kv_p 0.5s forwards; animation-delay: 0;}
.kv .layer .kv_p2{ position: absolute; bottom: 0; left: 45%; width: 21.75%; animation: kv_p 0.5s forwards; animation-delay: 0;}
.kv .layer .kv_p3{ position: absolute; bottom: 0; left: 25.8%; width: 15.8%; animation: kv_p 0.5s forwards; animation-delay: 0.2s; transform: scale(0.9) translate(0,100%);}
.kv .layer .kv_p4{ position: absolute; bottom: 0; left: 59.15%; width: 16.95%; animation: kv_p 0.5s forwards; animation-delay: 0.2s; transform: scale(0.9) translate(0,100%);}
@keyframes kv_p {
	0%{ transform: scale(0.9) translate(0,100%);}
	80%{ transform: scale(1.05);}
	100%{ transform: scale(1) translate(0,30px);}
}

.kv .layer .kv_m1{ position: absolute; top: 33.42%; left: 13.65%; width: 6.65%; animation: kv_mScale 0.5s forwards; animation-delay: 0.4s; transform: scale(0);}
.kv .layer .kv_m1 img{ animation: kv_mRotate 2s linear infinite;}
.kv .layer .kv_m2{ position: absolute; top: 67.08%; left: 88.25%; width: 3.7%; animation: kv_mScale 0.5s forwards; animation-delay: 0.4s; transform: scale(0);}
.kv .layer .kv_m2 img{ animation: kv_mRotate 2s linear infinite;}
@keyframes kv_mRotate {
	0%{ transform: rotate(0deg) scale(1);}
	5%{ transform: rotate(5deg) scale(0.95);}
	10%{ transform: rotate(-5deg) scale(1.15);}
	15%{ transform: rotate(5deg) scale(0.95);}
	20%{ transform: rotate(0deg) scale(1);}
	100%{ transform: rotate(0deg) scale(1);}
}
@keyframes kv_mScale {
	0%{ transform: scale(0);}
	80%{ transform: scale(1.15);}
	100%{ transform: scale(1);}
}

.kv .layer .kv_g1{ position: absolute; top: 49.38%; left: 3.9%; width: 4.8%; animation: kv_gRotate1 3s linear infinite;}
.kv .layer .kv_g2{ position: absolute; top: 63.76%; left: 15.65%; width: 4.8%; animation: kv_gRotate2 3s linear infinite;}
.kv .layer .kv_g3{ position: absolute; top: 45.2%; left: 69.35%; width: 4.8%; animation: kv_gRotate1 3s linear infinite;}
.kv .layer .kv_g4{ position: absolute; top: 36.86%; left: 90.5%; width: 4.8%; animation: kv_gRotate2 3s linear infinite;}
@keyframes kv_gRotate1 {
	0%{ transform: rotate(0deg);}
	25%{ transform: rotate(10deg);}
	50%{ transform: rotate(0deg);}
	75%{ transform: rotate(-10deg);}
	100%{ transform: rotate(0deg);}
}
@keyframes kv_gRotate2 {
	0%{ transform: rotate(0deg);}
	25%{ transform: rotate(-10deg);}
	50%{ transform: rotate(0deg);}
	75%{ transform: rotate(10deg);}
	100%{ transform: rotate(0deg);}
}


.kv .logo_link{ position: absolute; top: 6.14%; left: 2.3%; display: flex; padding: 10px 5px; width: 16.75%; border-radius: 500px; background: rgba(255,255,255,0.9);}
.kv .logo_link a{ padding: 0 15px;}
.kv .logo_link a+a{ border-left: 1px solid var(--deepA);}
.kv .logo_link img{ max-width: 100%;}

.kv_mobile{ display: none;}

@media (max-width:750px){
	.kv .blur, .kv .clear, .kv .kv_container, .kv .layer>img, .kv .layer div{ display: none;}
	.kv .layer img.kv_mobile{ display: block;}
	.kv .layer div.logo_link{ display: flex; width: 33.3%; left: 33.3%; top: 3.5%;}
	.kv .layer{ position: relative;}
}
@media (max-width:500px){
	.kv .logo_link a{ padding: 0 10px;}
}

.main{ position: relative; margin: 0 auto; max-width: 1200px;}
.zone01{ margin: 0 auto; max-width: 2000px; background-image: url(../images/melody_bg.png), url(../images/zone01_bg01.png); background-position: bottom center, bottom center; background-repeat: no-repeat, no-repeat; overflow: hidden;}
.zone01 img{ max-width: 100%;}
.zone01 .main{ position: relative; margin: 80px auto 60px;}
.zone01 .card{ position: absolute; top: 40%; left: 30.4165%; display: flex; justify-content: center; width: 39.167%; transform: rotate(-5deg); transition: .5s;}
.zone01 .card:has(.zone01_btn:hover){ transform: rotate(-2deg) scale(1.02);}
.zone01 .zone01_card{ max-width: 100%;}
.zone01 .zone01_m2{ position: absolute; top: 0; width: 36.17%; transform: translate(40%,-70%)}
.zone01 .zone01_m1{ position: absolute; top: 0; width: 18.085%; transform: translate(-60%,-90%);}
.zone01 .zone01_btn{ position: absolute; bottom: 5%; left: 5.532%; width: 88.936%; transition: .5s;}
.zone01 .zone01_btn:hover{ filter: brightness(1.2);}
.zone01 .kv_btm{ display: inline-block; margin: 60px 0 0 0; border-bottom: 1px solid #fff; vertical-align: top;}
.zone01 .zone01_p1{ position: absolute; top: 20%; right: 105%; width: 13%;}
.zone01 .zone01_p2{ position: absolute; bottom: 0; left: 105%; width: 10%;}

.zone01_bg03{ display: none;}

@media (max-width:1400px){
	.zone01{ background-size: contain,contain;}
	.zone01 .main{ margin: 40px 10%;}
}
@media (max-width:750px){
	.zone01 .main{ margin: 10px 0 0;}
	.zone01_bg02{ display: none;}
	.zone01_bg03{ display: block;}
	.zone01 .card{ position: relative; width: 62.67%; left: 23.4%; transform: translate(0, -30%) rotate(-5deg);}
	.zone01 .card:has(.zone01_btn:hover){ transform: translate(0, -30%) rotate(-5deg);}
	.zone01 .kv_btm{ margin: 0;}

	.zone01 .zone01_p1{ right: 5%; width: 13%;}
	.zone01 .zone01_p2{ bottom: 25%; left: 6%; width: 10%;}
}

.zone02{ margin: 0 0 60px; text-align: center;}
.zone02 .title{ margin: 0 auto;}
.zone02 .RO .logo{ display: flex; align-items: center; margin: 60px 0 40px;}
.zone02 .RO .logo img{ flex: 1 1 auto; min-width: 0;}
.zone02 .RO .logo img:nth-of-type(2){ flex: 0 0 247px;}
.zone02 i{ display: inline-block; padding: 10px 30px; color: var(--blueA); border-radius: 500px; background: var(--greyA); font-style: normal; font-size: 1.125rem;}
.zone02 p{ max-width: 500px; margin: 30px auto 0; font-size: 1.125rem;}
.zone02 p.eMsg{ color: var(--redA);}
.zone02 p.sMsg{ color: var(--purple);}
.zone02 a{ position: relative; display: inline-block; margin: 20px 0 0; padding: 10px 20px; color: #fff; font-size: 1.125rem; border-radius: 50px; background: var(--purple); transition: .5s;}
.zone02 a:hover{ color: var(--yellowA);}
.zone02 .server{ display: flex; justify-content: center; gap: 20px 5px; flex-wrap: wrap; margin: 20px 0 -10px;}
.zone02 label{ position: relative; padding: 40px 0; width: calc((100% - 80px) / 5); color: var(--greyB); border-radius: 20px; background: var(--greyA); font-size: 2.5rem; border: 3px solid var(--greyA); cursor: pointer; box-sizing: border-box; transition: .5s;}
.zone02 label:hover:has(input:not(:disabled)){ background: var(--yellowA); color: var(--redA);}
.zone02 label:has(input:checked)::after{ position: absolute; top: 5px; left: 5px; display: block; content: ''; width: 24px; height: 24px; background: url(../images/zone02_icon.png);}
.zone02 label:has(input:checked){ background: var(--yellowA); color: var(--redA);}
.zone02 label input{ display: none;}

.zone02 .twitch{ margin: 60px 0 0;}
.zone02 .twitch span{ display: block; max-width: 90%; margin: 0 auto 60px; color: var(--greyA); font-size: 1.25rem; letter-spacing: 2px; white-space: nowrap; overflow: hidden;}
.zone02 .twitch img{ margin: 0 auto;}
.zone02 .twitch a:hover{ color: var(--yellowA);}

@media (max-width:750px){
	.zone02 .title{ width: 150px; margin: 20px auto 0;}
	.zone02 .RO .logo{ margin: 30px 0 20px;}
	.zone02 label{ font-size: 1.5rem;}
}
@media (max-width:500px){
	.zone02{ margin: 0 0 40px;}
	.zone02 .title{ width: 100px;}
	.zone02 .RO .logo{ margin: 10px 0; justify-content: center;}
	.zone02 .RO .logo img{ display: none;}
	.zone02 .RO .logo img:nth-of-type(2){ display: block; flex: 0 0 150px;}
	.zone02 p{ margin: 20px auto 0;}
	.zone02 a{ margin: 10px 0 0;}
	.zone02 a::after{ height: 3px; bottom: -3px;}
	.zone02 .server{ margin: 10px 20px 0; gap: 5px;}
	.zone02 label{ width: calc((100% - 20px) / 4); padding: 10px 0; border-radius: 10px;}
	.zone02 label:has(input:checked)::after{ top: 1px; left: 1px; width: 10px; height: 10px; background-size: contain;}

	.zone02 .twitch{ margin: 30px 0 0;}
	.zone02 .twitch span{ margin: 0 auto 30px;}
	.zone02 .twitch img{ width: 100px;}
}

.zone03{ padding: 60px 0 80px; background-color: #f6f6f6; background-image: url(../images/melody_bg.png); background-position: center bottom; background-repeat: no-repeat;}
.zone03 .title{ margin: 0 auto;}
.zone03 .info{ position: relative; max-width: 860px; margin: 30px auto 0; padding: 50px 30px; border-radius: 20px; background: rgba(255,255,255,0.6); box-sizing: border-box;}
.zone03 .info h3{ margin: 0; color: var(--purple); font-size: 1.5rem;}
.zone03 .info p{ margin: 20px 0 10px; line-height: 1.2em; color: var(--blueA); font-size: 1.125rem; font-weight: 500;}
.zone03 .info p i{ font-style: normal; color: var(--redA);}
.zone03 .info span{ display: block; margin: 0 auto 30px; color: var(--greyA); font-size: 1.25rem; letter-spacing: 2px; white-space: nowrap; overflow: hidden;}
.zone03 .info .zone03_p1{ position: absolute; top: 0; left: 0; transform: translate(-90%,0);}
.zone03 .info .zone03_p2{ position: absolute; bottom: 0; right: 0; transform: translate(90%,0);}

@media (max-width:1400px){
	.zone03{ background-size: contain,contain;}
}

@media (max-width:1200px){
	.zone03 .info{ max-width: calc(100% - 240px);}
	.zone03 .info .zone03_p1,
	.zone03 .info .zone03_p2{ width: 120px;}
}
@media (max-width:750px){
	.zone03 .title{ width: 150px; margin: 20px auto 0;}
	.zone03 .info{ max-width: calc(100% - 160px);}
	.zone03 .info .zone03_p1,
	.zone03 .info .zone03_p2{ width: 80px;}
}
@media (max-width:500px){
	.zone03{ padding: 30px 0 40px;}
	.zone03 .title{ width: 100px;}
	.zone03 .info{ max-width: calc(100% - 60px); margin: 20px auto 0; padding: 20px;}
	.zone03 .info .zone03_p1,
	.zone03 .info .zone03_p2{ width: 60px;}
	.zone03 .info h3{ font-size: 1.25rem;}
	.zone03 .info p{ margin: 10px 0;}
	.zone03 .info span{ margin: 0 0 10px;}
	.zone03 .info .zone03_p1{ transform: translate(70%,-110%);}
	.zone03 .info .zone03_p2{ bottom: unset; top: 0; transform: translate(-60%,-110%);}
}