@charset "UTF-8";

*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
html,body{ margin: 0; padding: 0; font-size: 16px;}
html{ background: #11131c;}
body{ background: #eedcc4;}
img{ vertical-align: middle;}
input, select, textarea{ font-weight: bolder; border: none; appearance: none; -moz-appearance: none; -webkit-appearance: none;}
input:focus, select:focus, textarea:focus{ border: none; outline: none;}


footer{ background: #11131c;}
.all{ position: relative; max-width: 2000px; height: 925px; margin: 0 auto; background: url(../images/bg.jpg) center top repeat; overflow: hidden;}

.index_mv{ position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: 2000px; height: 100%; }
.index_mv img{ position: absolute; transition: .5s;}
.index_mv img.character01{ right: 100%; bottom: 0;}
.index_mv img.character02{ right: 100%; bottom: 0;}
.index_mv img.character03{ right: 100%; bottom: 31.9%;}
.index_mv img.goblin01{ right: 100%; bottom: 0;}
.index_mv img.poring02{ right: 100%; bottom: 53.62%;}

.index_mv img.character04{ left: 100%; bottom: 0;}
.index_mv img.character05{ left: 100%; bottom: 0;}
.index_mv img.character06{ left: 100%; bottom: 32%;}
.index_mv img.goblin02{ left: 100%; bottom: 0;}
.index_mv img.poring03{ left: 100%; bottom: 53.62%;}

.index_mv img.poring01{ left: 59.3%; bottom: 82.16%; opacity: 0;}

.index_mv img.character01.active{ right: 75.1%;}
.index_mv img.character02.active{ right: 66.7%; bottom: 0;}
.index_mv img.character03.active{ right: 68.05%; bottom: 31.9%;}
.index_mv img.goblin01.active{ right: 65.4%; bottom: 0;}
.index_mv img.poring02.active{ right: 68.6%; bottom: 53.62%; animation: 2.5s picnicPoring infinite ease-in-out; animation-delay: 1s;}

.index_mv img.character04.active{ left: 71.7%; bottom: 0;}
.index_mv img.character05.active{ left: 66.2%; bottom: 0;}
.index_mv img.character06.active{ left: 67.15%; bottom: 32%;}
.index_mv img.goblin02.active{ left: 63.1%; bottom: 0;}
.index_mv img.poring03.active{ left: 67.2%; bottom: 53.62%; animation: 2.5s picnicPoring infinite ease-in-out;}

.index_mv img.poring01.active{ left: 59.3%; bottom: 82.16%; opacity: 1; animation: 2.5s picnicPoring infinite ease-in-out; animation-delay: 1.5s;}
@keyframes picnicPoring2 {
    0%, 25%, 100% { transform: scale(1, 1) translateY(0); }
    12.5% { transform: scale(1.1, 0.9) translateY(10px); }
}
@keyframes picnicPoring {
    0%, 25%, 100% { transform: scale(1, 1) translateY(0); }
    12.5% { transform: scale(0.9, 1.1) translateY(-10px); }
}

.bg_mobile{ display: none;}

@media (max-width:750px){
.all{ height: auto; background: url(../images/main_bg.png) top center repeat; text-align: center;}
.index_mv, .logo, .slogan{ display: none;}
.bg_mobile{ display: block; max-width: 100%;}
}


.index_main{ position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); width: 660px; height: 100%; text-align: center;}
.index_main .logo{ margin: 15.46% 0 0 0;}
.index_btn{ margin: 20px 0 0 0;}
.index_btn .index_btn02{ display: inline-block; margin: 0 0 0 12px;}
.index_btn>a{ transition: .5s;}
.index_btn>a:hover{ filter: hue-rotate(-90deg);}

.logout{ position: absolute; left: 50%; bottom: 55px; transform: translate(-50%, 0); min-width: 180px; background: rgba(255,255,255,0.3); padding: 5px 20px; border-radius: 50px; font-size: 12px; text-align: center;}
.logout a.logout_btn{ display: inline-block; margin: 0 0 0 10px; padding: 3px 8px; background: #11131c; color: #fff; text-decoration: none; border-radius: 5px; }
.logout img{ width: 36px; margin: 10px 5px 0 5px;}


@media (max-width:750px){
.index_main{ position: static; transform: translate(0, 0); width: auto; height: auto; }
.index_btn{ margin: 0; font-size: 0;}
.index_btn a{ display: inline-block;}
.index_btn a.index_btn01{ width: 50%;}
.index_btn a.index_btn02{ width: 50%; margin: 0;}
.index_btn a.index_btn03{ width: 100%;}
.index_btn a>img{ width: 100%;}

.logout{ display: inline-block; position: static; transform: translate(0, 0); margin: 15px 0 30px;}
}


.main{ display: flex; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 660px; height: 730px;}

.main_btn{ display: flex;}
.main_btn>a{ transition: .5s;}
.main_btn>a:hover{ filter: hue-rotate(-90deg);}
.main_btn>a img{ max-width: 100%;}
.main_btn04, .main_btn11{ margin: 0 0 0 auto;}
.main_btn_fake{ visibility: hidden;}

.zone{ margin: 20px 10px 0; flex: 1; border:3px solid #dddaff; border-radius: 20px; background: url(../images/main_bg.png) top center repeat; box-shadow: 0px 0px 10px 0px rgb(255 255 255 / 66%); overflow-y: auto;}
.zone>div{ margin: 20px; padding: 0 20px 80px; height: calc(100% - 40px); overflow-y: auto; box-sizing: border-box;}
.zone>div::-webkit-scrollbar { width: 6px; background-color: #fff; }
.zone>div::-webkit-scrollbar-thumb { background-color: #dddaff; border-radius: 3px;}

.zone h3{ display: flex; align-items: center; margin: 0 0 10px; color: #9367ff; font-size: 19px;}
.zone h3 span{ margin: 0 0 0 10px;}
.zone p{ line-height: 24px; margin: 0 0 30px; padding: 0 0 0 35px; color: #333; font-weight: bolder;}
.zone i{ display: block; margin: 0 0 20px; padding: 20px 20px; background: #dedafe; font-size: 14px; text-align: center; color: #9367ff; font-style: inherit; font-weight: bolder; border-radius: 10px;}

.zone ul{ padding: 0 0 0 32px;}
.zone ul li{ position: relative; margin: 0 0 15px; padding: 0 0 0 35px; font-weight: bolder; counter-increment:li; list-style: none;}
.zone ul li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: transparent; width: 19px; height: 19px; line-height: 19px; color:#6a37e6; border:1px solid #6a37e6; border-radius: 50px; text-align: center; font-size: 0.75rem;}

.zone .gift{ display: flex; justify-content: center; margin: 0 0 20px 0; padding: 10px; background: #dedafe; border-radius: 10px;}
.zone .gift:nth-last-of-type(odd){ background: #ffdae4;}
.zone .gift p{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; line-height: normal; margin: 0; padding: 0; border-radius: 10px; color: #333; font-weight: bolder; text-align: center; background: #fff; width: 25%;}
.zone .gift p+p{ margin: 0 0 0 10px;}
.zone .gift p span{ display: block; width: 100%; background: #f1eeff; color: #9367ff; padding: 10px 5px; font-size: 12px; border-radius: 0 0 10px 10px; box-sizing: border-box;}
.zone .gift:nth-last-of-type(odd) p span{ background: #ffeef3; color: #ff3c7b;}
.zone .gift p img{ max-width: 100%; margin: 10px 0;}

@media (max-width:750px){
.main{ position: fixed; width: 95%; height: 90%; z-index: 2;}
.main_btn>a img{ max-width: 100%;}

.zone{ margin: 10px 5px 0; text-align: left;}
.zone>div{ padding: 0 0 80px;}
}



.character07{ position: absolute; left: 50%; bottom: -200px; transform: translate(-50%, 0); transition: .5s;}
.character07.active{ bottom: 0;}
.overlay{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; opacity: 0.9; z-index: 1;}

@media (max-width:750px){
.character07{ position: fixed; z-index: 2; width: 153px;}
}



/*--表單--*/
.title{ display: flex; color: #6a37e6; margin: 0 0 20px 0; padding: 5px 20px; background: #f1eeff; border-radius: 50px;}
.title span{ flex: 1; height: 12px; border-bottom: 1px solid #f7f5ff;}
.title b{ padding: 0 10px;}

label{ display: block; position: relative; width: 100%; padding: 1px; background:linear-gradient(155deg, #ff51c4, #309bff); border-radius: 50px; font-weight: bolder; box-sizing: border-box;}
label input{ position: relative; margin: 0; padding: 0 20px; width: 100%; height: 48px; border-radius: 50px; font-size: 16px; box-sizing: border-box; color: #9367ff; background: #fff; z-index: 1;}
label select{ position: relative; margin: 0; padding: 0 20px; width: 100%; height: 48px; border-radius: 50px; font-size: 16px; box-sizing: border-box; color: #9367ff; background: #fff; z-index: 1;}
label textarea{ width: 100%; height: 120px; padding: 20px; box-sizing: border-box; border-radius: 50px; font-size: 16px; color: #9367ff; resize: none;}
label img{ position: absolute; top: 50%; right: 21px; transform: translate(0, -50%); z-index: 2;}
label span{ position: absolute; top: 50%; left: 21px; transform: translate(0, -50%); color: #999; transition: .5s; z-index: 2; pointer-events: none;}
label.active span{ top:2px; transform: translate(0, 0); font-size: 12px; }
label+label{ margin: 10px 0 0 0;}
label+div.title{ margin: 50px 0 20px 0;}

.submit_btn{ text-align: center; margin: 30px 0 0 0;}

.main_bn{ position: relative; margin: 0 0 50px 0; background:linear-gradient(155deg, #ff51c4, #309bff); border-radius: 10px;}
.main_bn img{ max-width: calc(100% - 2px); border-radius: 10px; margin: 1px;}
.main_bn p{ position: absolute; top: 27.15%; left: 23.8%; padding: 0; color: #9367ff; font-size: 24px; font-weight: bolder;}
.main_bn p span{ display: block; margin: 10px 0 0; color: #f43385; font-size: 36px;}

.character_info{ position: relative; width: 100%; height: 50px; background:linear-gradient(155deg, #ff51c4, #309bff); border-radius: 50px; font-weight: bolder;}
.character_info>div{ position: absolute; display: flex; flex-wrap: wrap; align-items: center; margin: 1px 0 0 1px; padding: 0 20px; width: calc(100% - 2px); height: 48px; border-radius: 50px; font-size: 16px; box-sizing: border-box; color: #9367ff; background: #fff;}
.character_info span{ position: absolute; top: 2px; left: 21px; font-size: 12px; color: #999;}
.character_info p{ margin: 0; padding: 0; color: #9367ff;}
.character_info i{ margin: 0; padding: 0; background: transparent; font-size: 25px; border: none; color: #f43385;}
.character_info .icon_point{ margin: 0 10px 0 auto;}
.character_info .icon_party{ margin: 0 10px 0 auto;}
.character_info .icon_close{ position: absolute; top: 50%; right: -10px; transform: translate(0, -50%); cursor: pointer;}
.character_info+div.title{ margin: 50px 0 20px 0;}
.character_info+.character_info{ margin: 10px 0 0 0;}

.pick_parnter{ display: flex; justify-content: space-between; margin: 10px 0 0 0;}
.pick_parnter label{ width: 49%;}
.pick_parnter label+label{ margin: 0;}

@media (max-width:750px){
.main_bn{ margin: 0 0 20px 0;}
.main_bn p{ top: 50%; transform: translate(0, -50%); font-size: 16px;}
.main_bn p span{ margin: 0; font-size: 20px;}

.character_info i{ font-size: 20px;}
.character_info .icon_close{ position: static; transform: translate(0, 0); margin: 0 0 0 10px;}
}


/*--競猜頁面--*/
.gambling{ display: flex; flex-direction: column; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 660px; height: 730px;}

.battle{ margin: 20px 10px 0;}
.party_box{ display: flex; align-items: center; padding: 1px; font-weight: bolder; background:linear-gradient(155deg, #ff51c4, #309bff); border-radius: 24px;}
.party_box span{ width: 48px; line-height: 48px; text-align: center; background: #fff; border-radius: 24px 5px 5px 24px; font-size: 30px; color: #9367ff;}
.party_box span:last-child{ border-radius: 5px 24px 24px 5px; color: #f43385;}
.party_box div{ display: flex; justify-content: space-between; align-items: center; flex: 1; margin: 0 1px; padding: 0 10px; line-height: 48px; background: #fff; border-radius: 5px;}
.party_box div p{ flex: 1; margin: 0; color: #9367ff; text-align: center;}
.party_box div p:last-child{ color: #f43385;}
.party_box div i{ font-style: normal; line-height: normal; text-align: center; color: #333;}
.party_box div i b{ padding: 0 5px; font-size: 12px; background: #f8d93e; color: #dd7d09; border-radius: 50px;}
.party_box div img{ padding: 0 14px 0 13px;}

.party_box.purple span{ background: #9367ff; color: #fff;}
.party_box.purple span:last-child{ background: #fff; color: #999;}
.party_box.purple div{ background: #9367ff;}
.party_box.purple div p{ margin: 0; color: #fff;}
.party_box.purple div p:last-child{ color: #fff;}

.party_box.pink span{ background: #fff; color: #999;}
.party_box.pink span:last-child{ background: #f43385; color: #fff;}
.party_box.pink div{ background: #f43385;}
.party_box.pink div p{ margin: 0; color: #fff;}
.party_box.pink div p:last-child{ color: #fff;}

.party_list{ flex: 1; width: 100%; margin: 50px 10px 50px; padding: 0 16px 0 0; overflow-y: auto; box-sizing: border-box;}
.party_list::-webkit-scrollbar { width: 6px; background-color: #fff; }
.party_list::-webkit-scrollbar-thumb { background-color: #dddaff; border-radius: 3px;}
.party_box+.party_box{ margin: 10px 0 0;}

.ticket{ margin: 10px 0 0 0; padding: 1px; border-radius: 24px; background:linear-gradient(155deg, #ff51c4, #309bff); font-weight: bolder;}
.ticket>div{ display: flex; position: relative; padding: 3px; height: 140px; background: #fff; border-radius: 24px;}
.ticket>div a{ display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50%); width: 160px; height: 60px; background: #f8d93e; color: #dd7d09; border-radius: 30px; text-decoration: none; border:3px solid #fff; box-sizing: border-box;}
.ticket .battle_purple{ width: 50%; height: 100%; background:linear-gradient(90deg, #6a37e6, #9367ff); border-radius: 22px 0 0 22px;}
.ticket .battle_pink{ width: 50%; height: 100%; background:linear-gradient(90deg, #f43385, #e10d67); border-radius: 0 22px 22px 0;}

.ticket .vote_info{ display: flex; justify-content: space-evenly; align-items: center; position: absolute; width: calc(100% - 6px); height: calc(100% - 6px); color: #fff;}
.ticket .vote_info p{ flex: 1; text-align: center; font-size: 50px;}
.ticket .vote_info i{ flex: 0.5; text-align: center; font-size: 30px; font-style: normal;}

.ticket>div.purple:after{ display: block; content: ""; width: 82px; height: 35px; position: absolute; left: 0; top: 50%; transform: translate(-50%,-50%); background: url(../images/ticket.png);}
.ticket>div.pink:before{ display: block; content: ""; width: 82px; height: 35px; position: absolute; right: 0; top: 50%; transform: translate(50%,-50%); background: url(../images/ticket.png);}

@media (max-width:750px){
.gambling{ position: static; width: 95%; height: auto; margin: 0 auto; transform: translate(0,0);}


.battle{ margin: 20px 0 0;}
.party_box span{ width: 42px; font-size: 20px;}
.party_box div{ font-size: 12px;}

.party_list{ margin: 50px 0 0; padding: 0;}

.ticket>div{ height: 100px; }
.ticket .vote_info p{ font-size: 20px;}
.ticket .vote_info i{ font-size: 12px;}

.ticket>div.purple:after{ width: 42px; height: 18px; left: 10px; top: 10px; transform: translate(0,0); background-size: contain;}
.ticket>div.pink:before{ width: 42px; height: 18px; right: 10px; top: 10px; transform: translate(0,0); background-size: contain;}
}