@charset "UTF-8";

*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
body,html{ margin: 0; padding: 0;}
html{ background: #000;}
body{ background: #c1e4e1;}
img{ display: block;}
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;}


.all{ position: relative; max-width: 2000px; height: 895px; margin: 0 auto; background: url(../images/bg.jpg) center top no-repeat;}

.bg_icon{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg_icon.png) top center repeat; animation: 40s bg_icon infinite linear;}
@keyframes bg_icon {
    0%{ background-position: 0 0;}
    100%{ background-position: -400px -400px;}
}

@media (max-width:768px){
html{ font-size: 12px;}
.all{ height: 100vh; background-size: cover;}
}

.part_a{ position: relative; width: 100%; height: 100%; cursor: pointer;}
.part_a>div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.part_a01{ opacity: 0; animation: 0.2s part_word forwards ease-in-out;}
.part_a02{ animation: 1s part_a02 infinite ease-in-out;}
@keyframes part_a02 {
    0%{ opacity: 0;}
    50%{ opacity: 1;}
    100%{ opacity: 0;}
}

.part_b{ position: relative; width: 100%; height: 100%; cursor: pointer;}
.part_b>div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.part_b01{ opacity: 0;}
.part_b.active>div .part_b01{ animation: 0.2s part_word forwards ease-in-out;}

.part_c{ position: relative; width: 100%; height: 100%;}
.part_c>div{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.part_c.active>div .part_c01{ animation: 0.2s part_word forwards ease-in-out; opacity: 0;}
.part_c.active>div .part_c02{ animation: 0.2s part_word forwards ease-in-out; animation-delay: 0.1s; opacity: 0;}
.part_c.active>div .part_c03{ margin: 20px 0; animation: 0.2s part_word forwards ease-in-out; animation-delay: 0.2s; opacity: 0; cursor: pointer;}
.part_c.active>div .part_c04{ animation: 0.2s part_word forwards ease-in-out; animation-delay: 0.3s; opacity: 0;}
@keyframes part_word {
    0%{ transform:scaleY(0); opacity: 0;}
    100%{ transform:scaleY(1); opacity: 1;}
}
.part_c.active>div .part_c03:hover{ filter: brightness(1.1);}

@media (max-width:655px){
.part_a>div, .part_b>div, .part_c>div{ width: 80%;}
.part_a01, .part_a02, .part_b01, .part_c01, .part_c02, .part_c03, .part_c04{ width: 100%;}
.part_c.active>div .part_c03{ margin: 0;}

.part_a02{ display: block;}
}


.index{ position: relative; width: 100%; height: 100%; overflow: hidden;}
.logo{ position: absolute; left: 3.65%; top: 10.61%; z-index: 3; animation: 0.2s logo forwards ease-in-out; opacity: 0;}

.index.active .logo{ animation: 0.5s logo forwards ease-in-out; opacity: 0;}
@keyframes logo {
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}
.bg_top{ position: absolute; left: 0; top: 0; width: 100%; z-index: 3;}
.index.active .bg_top{ top: -100%; animation: 0.5s bg_top forwards ease-in-out;}
@keyframes bg_top {
    0%{ top: -100%;}
    100%{ top: 0;}
}
.character_01{ position: absolute; left: 25.75%; left: 435px; bottom: 0; z-index: 2;}
.index.active .character_01{ animation: 0.3s character_01 forwards ease-in-out; animation-delay: .5s; opacity: 0;}
@keyframes character_01 {
    0%{ margin: 0 0 0 30px; opacity: 0;}
    100%{ margin: 0; opacity: 1;}
}
.character_02{ position: absolute; left: 55.95%; left: 990px; bottom: 0; z-index: 2;}
.index.active .character_02{ animation: 0.3s character_02 forwards ease-in-out; animation-delay: .5s; opacity: 0;}
@keyframes character_02 {
    0%{ margin: 0 0 0 -30px; opacity: 0;}
    100%{ margin: 0; opacity: 1;}
}
.character_03{ position: absolute; left: 17.6%; left: 335px; top: 0; z-index: 2;}
.index.active .character_03{ animation: 0.3s character_03 forwards ease-in-out; animation-delay: .5s; opacity: 0;}
@keyframes character_03 {
    0%{ margin: 0 0 0 -30px; opacity: 0;}
    100%{ margin: 0; opacity: 1;}
}

.slogan{ position: absolute; left: 3.85%; top: 28.715%; z-index: 1;}
.index.active .slogan{ animation: 0.3s slogan forwards ease-in-out; animation-delay: .5s; opacity: 0;}
@keyframes slogan {
    0%{ padding: 20px 0 0 0; opacity: 0;}
    100%{ padding: 0; opacity: 1;}
}

.index_btm{ position: absolute; left: 0; bottom: 0; z-index: 3;}
.index.active .index_btm{ bottom: -100%; animation: 0.5s index_btm forwards ease-in-out;}
@keyframes index_btm {
    0%{ bottom: -100%;}
    100%{ bottom: 0;}
}
.bg_btm{ width: 100%;}
.character_04{ position: absolute; left: 3.65%; bottom: 25px; width: 27%; z-index: 4;}
.index.active .character_04{ animation: 0.3s character_04 forwards ease-in-out; animation-delay: .5s; opacity: 0;}
@keyframes character_04 {
    0%{ left: 3.65%; opacity: 0;}
    100%{ left: 3.65%; opacity: 1;}
}
.index_btm a{ width: 12%;}
.index_btm a:hover{ margin: 0 0 10px; filter: saturate(1.3);}
.index_btm a img{ width: 100%;}
.index_btm a img:nth-of-type(2){ display: none;}
.btn_01{ position: absolute; left: 39.65%; bottom: 25px; z-index: 4; transition: .2s;}
.index.active .btn_01{ animation: 0.7s btn forwards linear; animation-delay: .8s; opacity: 0;}
@keyframes btn {
    0%{ transform:rotateY(0deg); padding: 0; opacity: 0;}
    50%{ transform:rotateY(540deg); padding: 0 0 20px; opacity: 1;}
    75%{ transform:rotateY(720deg); padding: 0 0 20px; opacity: 1;}
    80%{ transform:rotateY(720deg); padding: 0; opacity: 1;}
    90%{ transform:rotateY(720deg); padding: 0 0 10px; opacity: 1;}
    100%{ transform:rotateY(720deg); padding: 0; opacity: 1;}
}
.btn_02{ position: absolute; left: 53.65%; bottom: 60px; z-index: 4; transition: .2s;}
.index.active .btn_02{ animation: 0.7s btn forwards linear; animation-delay: 1s; opacity: 0;}

.btn_03{ position: absolute; left: 67.65%; bottom: 45px; z-index: 4; transition: .2s;}
.index.active .btn_03{ animation: 0.7s btn forwards linear; animation-delay: 1.2s; opacity: 0;}

.btn_04{ position: absolute; left: 81.65%; bottom: 80px; z-index: 4; transition: .2s;}
.index.active .btn_04{ animation: 0.7s btn forwards linear; animation-delay: 1.4s; opacity: 0;}

.index.off .btn_01{ animation: 0.4s btn_off forwards linear; animation-delay: 0s; pointer-events: none;}
.index.off .btn_02{ animation: 0.4s btn_off forwards linear; animation-delay: 0.1s; pointer-events: none;}
.index.off .btn_03{ animation: 0.4s btn_off forwards linear; animation-delay: 0.2s; pointer-events: none;}
.index.off .btn_04{ animation: 0.4s btn_off forwards linear; animation-delay: 0.3s; pointer-events: none;}
@keyframes btn_off {
    0%{ transform:rotateY(0deg); padding: 0; opacity: 1;}
    100%{ transform:rotateY(540deg); padding: 0 0 20px; opacity: 0;}
}


@media (max-width:1600px){
.character_01{ left: 330px; bottom: 30px;}
.character_02{ left: 860px; bottom: 100px;}
.character_03{ left: 220px; top: -55px;}
.character_04{ width: 32%;}

.index_btm a{ width: 14%;}
.btn_01{ left: 38.65%;}
.btn_02{ left: 53.65%;}
.btn_03{ left: 68.65%;}
.btn_04{ left: 83.65%;}
}

@media (max-width:1400px){
.character_01{ left: 230px; bottom: 43px;}
.character_02{ left: 745px; bottom: 100px;}
.character_03{ width: 13%; top: 20px;}
}

@media (max-width:1200px){
.character_01{ left: 8%;}
.character_02{ display: none;}
.character_03{ display: none;}

.slogan{ width: 40%; top: 33%;}
}

@media (max-width:1000px){
.character_01{ width: 150%; left: -15%; bottom: unset; top: 15%;}
.character_02{ display: none;}
.character_04{ display: none;}

.logo{ left: 4%; top: 5%; width: 20%;}
.slogan{ left: 26%; top: 5%; z-index: 4;}

.index_btm a{ width: 22%;}
.btn_01{ left: 3%;}
.btn_02{ left: 26.5%;}
.btn_03{ left: 51.5%;}
.btn_04{ left: 75%;}
}

@media (max-width:768px){
.character_01{ left: -15%; bottom: 0; top: unset; width: 150%;}
.character_02{ display: none;}
.character_04{ display: none;}

.logo{ left: 5%; right: unset; top: 4%; width: 24%;}
.slogan{ left: 35%; top: 3%; width: 60%;}

.index_btm a img:nth-of-type(1){ display: none;}
.index_btm a img:nth-of-type(2){ display: block;}
.btn_01{ bottom: 10px;}
.btn_02{ bottom: 20px;}
.btn_03{ bottom: 15px;}
.btn_04{ bottom: 25px;}
}

@media (max-width:480px){
.character_01{ left: -83%; bottom: unset; top: 25%; width: 250%;}
.character_02{ display: none;}
.character_03{ display: block; width: 60%; top: 8%; left: -16%;}

}


.main{ position: absolute; bottom: -100%; width: 100%; height: 100%; background: linear-gradient(155deg, #b9e0dc, #8dd3cc); z-index: 5;}
.main .title{ position: absolute; top: 10%; right: 2%; max-height: 80%; color: #229186; font-size: 1.875rem; font-weight: bolder; writing-mode: vertical-lr;}
.main .title img{ max-height: 100%; opacity: 0;}
.main .title span{ display: block; opacity: 0;}
.main .title.active img{ animation: 0.5s title forwards linear; animation-delay: 1s;}
.main .title.active span{ animation: 0.5s title forwards linear; animation-delay: 1.3s;}
@keyframes title {
    0%{ transform:translate(-10px, 0); opacity: 0;}
    100%{ transform:translate(0, 0); opacity: 1;}
}

.main .zone{ position: absolute; top: 10%; left: 15%; transform:translate(7px, 7px); transform-style: preserve-3d; height: 80%; width: 70%; background: url(../images/bg_main.jpg) center top repeat; border-radius: 10px;}
.main .zone.active{ animation: 0.3s zone forwards linear; animation-delay: 0.3s;}
@keyframes zone {
    0%{ transform:translate(7px, 7px);}
    100%{ transform:translate(0, 0);}
}
.main .zone::after{ display: block; content: ""; position: absolute; left: 0px; top: 0px; transform: translateZ(-1px); width: 100%; height: 100%; background: #fff1ad; border-radius: 10px; opacity: 0; pointer-events: none;}
.main .zone.active::after{ animation: 0.3s zone_after forwards linear; animation-delay: 0.3s;}
@keyframes zone_after {
    0%{ left: 0px; top: 0px; opacity: 0;}
    50%{ left: 0px; top: 0px; opacity: 0;}
    100%{ left: 15px; top: 15px; opacity: 1;}
}
.main .zone::before{ display: block; content: ""; position: absolute; left: 20px; top: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 1px solid #fff; border-radius: 10px; box-shadow: rgba(255,167,179,1) 0px 0px 10px 0px inset; pointer-events: none;}
.main .zone .box{ position: absolute; left: 50%; top: 7%; transform: translate(-50%, 0); width: 600px; max-width: 90%; height: 86%; padding: 0 30px 0 0; color: #3c3c3c; overflow-y: scroll;}
.main .zone .box::-webkit-scrollbar { width: 6px; background-color: #fff;}
.main .zone .box::-webkit-scrollbar-thumb { background-color: #fb9aa1;}
.main .zone .box img{ width: 100%;}
.main .zone .main_btn{ position: absolute; top: 7%; right: 45px; display: flex; flex-direction: column;}
.main .zone .main_btn>div{ display: flex; justify-content: center; align-items: center; background: #fb9aa1; color: #fff; width: 60px; padding: 18px 0; border-radius: 20px 5px 20px 5px; font-size: 1.25rem; font-weight: bolder; cursor: pointer; transition: .3s;}
.main .zone .main_btn>div:nth-of-type(1){ height: 60px; padding: 0; color: #333; font-size: 1.875rem; text-align: center;}
.main .zone .main_btn>div:hover{ background: #fff; color: #fb9aa1; box-shadow: rgba(0,0,0,0.2) 2px 2px 2px 0px;}
.main .zone .main_btn>div.active{ background: #fff; color: #fb9aa1; box-shadow: rgba(0,0,0,0.2) 2px 2px 2px 0px;}
.main .zone .main_btn>div+div{ margin: 10px 0 0 0; writing-mode: vertical-lr;}
.main .zone>img{ position: absolute; left: -20%; bottom: -5%; opacity: 0;}
.main .zone.active>img{ animation: 0.3s zone_img forwards linear; animation-delay: 0.3s;}
@keyframes zone_img {
    0%{ transform:translate(-20px, 0); opacity: 0;}
    100%{ transform:translate(0, 0); opacity: 1;}
}

@media (max-width:1400px){
.main .zone>img{ width: 300px;}
}

@media (max-width:1400px){
.main .zone::before{ left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px);}
.main .zone .box{ top: 5%; height: 90%;}
.main .zone .main_btn{ top: 5%; right: 20px;}
}

@media (max-width:1200px){
.main .zone .main_btn>div{ width: 40px; padding: 10px 0;}
.main .zone .main_btn>div:nth-of-type(1){ height: 40px; padding: 0;}
.main .zone .box{ left: 25px; width: calc(100% - 100px); transform: translate(0, 0); box-sizing: border-box;}
.main .zone>img{ width: 200px;}

}

@media (max-width:768px){
.main{ height: 100vh;}
.main .title{ top: 10px; left: 5%; writing-mode: inherit;}
.main .title img{ display: none;}

.main .zone{ top: 8%; left: 5%; width: 90%; height: 90%; transform:translate(5px, 5px);}
@keyframes zone {
    0%{ transform:translate(5px, 5px);}
    100%{ transform:translate(0, 0);}
}
@keyframes zone_after {
    0%{ left: 0px; top: 0px; opacity: 0;}
    50%{ left: 0px; top: 0px; opacity: 0;}
    100%{ left: 10px; top: 10px; opacity: 1;}
}
.main .zone::before{ left: 0; top: 0; width: 100%; height: 100%;}
.main .zone .box{ top: 10px; left: 10px; height: calc(100% - 20px); width: calc(100% - 65px); padding: 0;}
.main .zone .main_btn{ top: 10px; right: 10px;}

.main .zone>img{ width: 100px; right: -10%; left: unset;}
@keyframes zone_img {
    0%{ transform:translate(-20px, 0) scaleX(-1); opacity: 0;}
    100%{ transform:translate(0, 0) scaleX(-1); opacity: 1;}
}
}


@media (max-width:512px){
.main .zone::after{ display: none;}
}


.member_logout{ right: 2%; bottom: calc(10% - 15px); padding: 5px; position: absolute; background: #fff; border-radius: 5px; font-size: 12px; text-align: center; color: #333; z-index: 5; opacity: 0;}
.member_logout p{ display: flex; justify-content: space-between; margin: 5px 0 0 0;}
.member_logout a{ padding: 0 5px; background: #eee; color: #333; border-radius: 5px; text-decoration: none;}
.member_logout.active{ animation: 0.5s member_logout forwards linear; animation-delay: 1.6s;}
@keyframes member_logout {
    0%{ transform:translate(-10px, 0); opacity: 0;}
    100%{ transform:translate(0, 0); opacity: 1;}
}
@media (max-width:768px){
.member_logout{ top: 10px; bottom: unset; right: calc(5% - 10px);}
.member_logout img{ display: none;}
.member_logout p{ margin: 0;}
}
    

.zone h3{ display: inline-block; margin: 0 0 20px 0; padding: 5px 20px; border-radius: 5px 20px 5px 20px; font-size: 1.25rem; font-weight: bolder; color: #fff; background: #ffb486;}
.zone h4{ margin: 10px 0; padding: 10px; border-radius: 10px; text-align: center; font-weight: bolder; color: #e23434; background: #ffb486;}
.zone p{ margin: 0 0 30px 0; font-size: 1.125rem; font-weight: bolder;}
.main_pic05{ margin: -40px 0 30px 0;}

.zone ul li{ position: relative; margin: 0 0 15px; padding: 0 0 0 35px; font-weight: bolder; font-size: 1.125em; counter-increment:li; list-style: none;}
.zone ul li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: rgba(255,255,255,0.6); width: 25px; height: 25px;line-height: 25px; font-style: italic; border-radius: 5px; text-align: center; font-size: 0.75rem;}
.zone ul li span{ color: #fb9aa1;}
.zone ul li a{ color: #e23434;}

.zone label{ display: block; position: relative; width: 100%; padding: 1px; font-weight: bolder; box-sizing: border-box;}
.zone label input{ position: relative; margin: 0; padding: 0 20px; width: 100%; height: 48px; font-size: 1rem; border-radius: 5px 20px 5px 20px; box-sizing: border-box; color: #fb9aa1; background: #fff; z-index: 1; cursor: pointer; transition: .2s;}
.zone label select{ position: relative; margin: 0; padding: 0 20px; width: 100%; height: 48px; font-size: 1rem; border-radius: 5px 20px 5px 20px; box-sizing: border-box; color: #fb9aa1; background: #fff; z-index: 1; cursor: pointer; transition: .2s;}
.zone label input:focus, .zone label select:focus{ background: #ffebde;}
.zone label img{ position: absolute; top: 50%; right: 21px; width: auto !important; transform: translate(0, -50%); z-index: 2;}
.zone label span{ position: absolute; top: 50%; left: 21px; transform: translate(0, -50%); color: #999; transition: .5s; z-index: 2;}
.zone label.active span{ top:2px; transform: translate(0, 0); font-size: 12px;}
.zone label+label{ margin: 10px 0 0 0;}
.zone label+h3{ margin: 30px 0 20px 0;}
.zone .form_column{ display: flex; margin: 10px 0 0 0;}
.zone .form_column label+label{ margin: 0 0 0 5px;}
.zone .form_column+label{ margin: 10px 0 0 0;}

.zone_03 label input{ cursor: default;}
.zone_03 label.del input{ cursor: pointer;}
.zone_03 label.del img{ filter: grayscale(100%); cursor: pointer; transition: .2s;}
.zone_03 label.del:hover img{ filter: grayscale(0);}

.zone_03 label.cancel input{ cursor: pointer; text-decoration: line-through; background: #eee;}
.zone_03 label.cancel img{ filter: grayscale(100%); cursor: pointer; transition: .2s;}
.zone_03 label.cancel:hover img{ filter: grayscale(0);}
.zone_03 label.cancel input:focus{ background: #eee;}

.zone_03 label span{ top:2px; transform: translate(0, 0); font-size: 12px;}
.zone_03 label input:focus, .zone_03 label select:focus{ background: #fff;}

.zone .send{ text-align: center;}
.zone .send a{ display: block; background: linear-gradient(155deg, #b9e0dc, #8dd3cc); margin: 10px 0 0 0; padding: 14px; font-size: 1rem; border-radius: 5px 20px 5px 20px; text-decoration: none; color: #045c53; transition: .2s;}
.zone .send a:hover{ box-shadow: rgba(105,170,163,1) 0px 0px 10px 0px inset;}
@media (max-width:768px){
.main_pic05{ margin: -20px 0 30px 0;}
}


/*--獎品--*/
.gift{ display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 0 30px;}
.gift>div{ position: relative; width: 49%; padding: 5px; border-radius: 20px 5px; box-sizing: border-box; background: #f9b689;}
.gift>div img{ border-radius: 20px 5px;}
.gift>div p{ margin: 10px 0; font-size: 0.875rem; font-weight: bolder; text-align: center;}

.gift>div::after{ position: absolute; top: 10px; right: 10px; display: block; content: "虛寶"; background: #91c6e6; padding: 4px 10px; border-radius: 5px; font-size: 0.75rem; font-weight: bolder; color: #fff; }
.gift>div.realgift::after{ content: "實體"; background: #9692e6;}
@media (max-width:768px){
.gift{ margin: 0 0 20px;}
.gift>div p{ font-size: 0.875rem;}
}

footer{ background: #000;}