*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
html,body{ margin: 0; padding: 0;}
body{ background: #fdead9;}
img{ vertical-align: middle;}

.main_w{ position: relative; max-width: 1200px; margin: 0 auto;}
hr.normal{ margin: 30px 0 0 0; border-top: 1px solid #f5c7b8; border-bottom: 0;}
hr.dot{ max-width: 2000px; height: 13px; margin: 0 auto; border: none; background: url(../images/bg_dot.png) center top repeat;}
hr.dot_w{ margin: 30px 0 0 0; width: 100%; background: url(../images/bg_dot2.png) center top repeat;}
@media (max-width:480px){
.main_w{ overflow-x: hidden;}
hr.normal{ margin: 10px 0 0 0;}
hr.dot{ height: 8px; background-size: contain;}
}


.zone01{ position: relative; max-width: 2000px; margin: 0 auto 50px; overflow-x: hidden;}
.zone01 .top_bg{ max-width: 100%;}
.zone01 .top_mmv{ display: none; max-width: 100%;}
.zone01 .top_p1{ position: absolute; top: 41.31%; left: 78.45%; z-index: 7; width: 14.8%; opacity: 0; animation: .2s top_p1 linear forwards; animation-delay: .35s;}
@keyframes top_p1 {
    0%{ top: 43.31%; left: 75.45%; transform: scale(0.8); opacity: 0;}
    100%{ top: 41.31%; left: 78.45%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p2{ position: absolute; top: 9.45%; left: 23.85%; z-index: 6; width: 12.65%; opacity: 0; animation: .2s top_p2 linear forwards; animation-delay: .3s;}
@keyframes top_p2 {
    0%{ top: 11.45%; left: 25.85%; transform: scale(0.8); opacity: 0;}
    100%{ top: 9.45%; left: 23.85%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p3{ position: absolute; top: 15.61%; left: 5.65%; z-index: 6; width: 15.8%; opacity: 0; animation: .2s top_p3 linear forwards; animation-delay: .35s;}
@keyframes top_p3 {
    0%{ top: 18.61%; left: 7.65%; transform: scale(0.8); opacity: 0;}
    100%{ top: 15.61%; left: 5.65%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p4{ position: absolute; top: 24.26%; left: 16.8%; z-index: 7; width: 17.4%; opacity: 0; animation: .2s top_p4 linear forwards; animation-delay: .25s;}
@keyframes top_p4 {
    0%{ top: 26.26%; left: 18.8%; transform: scale(0.8); opacity: 0;}
    100%{ top: 24.26%; left: 16.8%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p5{ position: absolute; top: 10.01%; left: 65.25%; z-index: 7; width: 12.7%; opacity: 0; animation: .2s top_p5 linear forwards; animation-delay: .3s;}
@keyframes top_p5 {
    0%{ top: 12.01%; left: 63.25%; transform: scale(0.8); opacity: 0;}
    100%{ top: 10.01%; left: 65.25%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p6{ position: absolute; top: 20.73%; left: 44.7%; z-index: 8; width: 27%; opacity: 0; animation: .2s top_p6 linear forwards;}
@keyframes top_p6 {
    0%{ top: 22.73%; left: 43.7%; transform: scale(0.8); opacity: 0;}
    100%{ top: 20.73%; left: 44.7%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p7{ position: absolute; top: 12.81%; left: 26.75%; z-index: 9; width: 31.95%; opacity: 0; animation: .2s top_p7 linear forwards;}
@keyframes top_p7 {
    0%{ top: 14.81%; left: 27.75%; transform: scale(0.8); opacity: 0;}
    100%{ top: 12.81%; left: 26.75%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p8{ position: absolute; top: 31.31%; left: 65.55%; z-index: 9; width: 16.85%; opacity: 0; animation: .2s top_p8 linear forwards; animation-delay: .25s;}
@keyframes top_p8 {
    0%{ top: 33.31%; left: 63.55%; transform: scale(0.8); opacity: 0;}
    100%{ top: 31.31%; left: 65.55%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p9{ position: absolute; top: 14.57%; left: 82.5%; z-index: 6; width: 13.8%; opacity: 0; animation: .2s top_p9 linear forwards; animation-delay: .4s;}
@keyframes top_p9 {
    0%{ top: 16.57%; left: 79.5%; transform: scale(0.8); opacity: 0;}
    100%{ top: 14.57%; left: 82.5%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p10{ position: absolute; top: 48.52%; left: 65.7%; z-index:10; width: 19.75%; opacity: 0; animation: .2s top_p10 linear forwards; animation-delay: .2s;}
@keyframes top_p10 {
    0%{ top: 52.52%; left: 62.7%; transform: scale(0.8); opacity: 0;}
    100%{ top: 48.52%; left: 65.7%; transform: scale(1); opacity: 1;}
}
.zone01 .top_p11{ position: absolute; top: 44.03%; left: 7.2%; z-index: 11; width: 33.2%; opacity: 0; animation: .2s top_p11 linear forwards; animation-delay: .1s;}
@keyframes top_p11 {
    0%{ top: 48.03%; left: 10.2%; transform: scale(0.8); opacity: 0;}
    100%{ top: 44.03%; left: 7.2%; transform: scale(1); opacity: 1;}
}

.zone01 .top_slogan1{ position: absolute; top: 51.76%; left: 17.8%; z-index: 12; width: 63.65%;}
.zone01 .top_slogan2{ position: absolute; top: 84.06%; left: 27%; z-index: 12; width: 46.35%; opacity: 0;}
.zone01 .top_slogan2.active{ animation: .5s top_slogan2 forwards;}
@keyframes top_slogan2 {
    0%{ top: 74.06%;  opacity: 0;}
    100%{ top: 84.06%;  opacity: 1;}
}

@media (max-width:480px){
    .zone01{ margin: 0 auto 10px;}
    .zone01 .top_bg,.top_p1,.top_p2,.top_p3,.top_p4,.top_p5,.top_p6,.top_p7,.top_p8,.top_p9,.top_p10,.top_p11,.top_slogan1,.top_slogan2{ display: none;}
    .zone01 .top_mmv{ display: block;}
}

.zone01 .logo{ position: absolute; top: 3%; left: 50%; transform: translate(-50%,0); width: 323px; z-index: 19;}
.zone01 .nav05{ position: absolute; top: 5.36%; right: 30px; cursor: pointer; transition: .5s;}
.zone01 .nav05:hover{ filter: hue-rotate(-30deg);}
.zone01 .nav_burger{ display: none; position: absolute; top: 5.36%; left: 30px; cursor: pointer; transition: .5s;}
.zone01 .nav_burger:hover{ filter: hue-rotate(-30deg);}
@media (max-width:1360px){
    .zone01 .logo{ top: 1%; width: 240px;}
    .zone01 .nav05{ top: 5.36%; right: 30px; z-index: 21;}
    .zone01 .nav05 img{ width: 58px;}
    .zone01 .nav_burger{ top: 5.36%; left: 30px; z-index: 21;}
    .zone01 .nav_burger img{ width: 58px;}
}
@media (max-width:1024px){
    .zone01 .nav05{ z-index: 19;}
    .zone01 .nav_burger{ display: block; z-index: 19;}
}
@media (max-width:480px){
    .zone01 .logo{ top: 3%; width: 200px;}
    .zone01 .nav05{ right: 10px;}
    .zone01 .nav_burger{ left: 10px;}
}

nav{ position: absolute; top: 5.36%; left: 50%; width: 1140px; transform: translate(-50%, 0); z-index: 20;}
nav ul{ display: flex; max-width: 1140px; margin: 0 auto; padding: 0; list-style: none;}
nav li{ padding: 0 5px; transition: .5s;}
nav li:hover{ filter: hue-rotate(-30deg);}
nav a:nth-child(3){ margin: 0 0 0 auto;}
nav .nav_close{ display: none; cursor: pointer;}
@media (max-width:1360px){
    nav ul{ max-width: 860px;}
    nav li img{ width: 136px;}
}
@media (max-width:1024px){
    nav{ display: none; position: fixed; top: 0; width: 100vw; height: 100%; background: rgba(0,0,0,0.8); overflow-y: auto;}
    nav .nav_close{ display: block; margin: 20px 0 0 0; text-align: center;}
    nav ul{ flex-direction: column; margin: 30px 0 0 0; max-width: 100%; text-align: center;}
    nav li{ padding: 5px 0;}
    nav a:nth-child(3){ margin: 0;}
    nav .nav_close img{ width: 58px;}
}


.zone02{ position: relative; max-width: 2000px; margin: 0 auto 6px; background: #fbd7cb url(../images/bg_line.png) top center repeat; overflow: hidden;}
.zone02::before{ content: ""; position: absolute; left: 0; top: 50%; transform: translate(-100%,-50%); width: 50vw; height: 50vw; border-radius: 50%; background: #fdead9;}
.zone02.active::before{ animation: .5s zone02_b forwards;}
@keyframes zone02_b {
    0%{ transform: translate(-100%,-50%);}
    100%{ transform: translate(-64%,-50%);}
}
.zone02::after{ content: ""; position: absolute; right: 0; top: 50%; transform: translate(100%,-50%); width: 50vw; height: 50vw; border-radius: 50%; background: #fdead9;}
.zone02.active::after{ animation: .5s zone02_a forwards;}
@keyframes zone02_a {
    0%{ transform: translate(100%,-50%);}
    100%{ transform: translate(64%,-50%);}
}

.zone02_main{ max-width: 60%; margin: 50px auto;}
.zone02_main .zone02_mainTop{ display: flex; justify-content: center; margin: 0 0 50px; text-align: center;}
.zone02_main .zone02_mainTop img{ max-width: 100%;}
.zone02_pic{ position: relative; padding: 0 10px;}
.zone02_pic .zone02_name{ position: absolute; left: 0; bottom: -7%;}
.zone02_pic04{ display: flex; flex-direction: column; justify-content: center; padding: 0 10px;}
.zone02 .zone02_pic04 .msg01{ opacity: 0;}
.zone02.active .zone02_pic04 .msg01{animation: .5s msg forwards; animation-delay: 0.5s;}
.zone02 .zone02_pic04 .msg02{ opacity: 0;}
.zone02.active .zone02_pic04 .msg02{ opacity: 0; animation: .5s msg forwards; animation-delay: 1s;}
@keyframes msg {
    0%{ transform: translate(-20px,0); opacity: 0;}
    100%{ transform: translate(0,0); opacity: 1;}
}
.zone02.active .zone02_pic02{ animation: .5s train forwards; animation-delay: 1s;}
.zone02.active .zone02_pic03{ animation: .5s train forwards; animation-delay: 1.1s;}
@keyframes train {
    0%{ transform: translate(0,0px);}
    50%{ transform: translate(0,-20px);}
    100%{ transform: translate(0,0);}
}
.zone02 .zone_02_train{ animation: .2s zone_02_train infinite;}
@keyframes zone_02_train {
    0%{ transform: translate(-1px,0);}
    50%{ transform: translate(1px,0);}
    100%{ transform: translate(-1px,0);}
}

.zone02_main .zone02_mainBtm{ position: relative; background: #fdead9; max-width: 1000px; margin: 0 auto; padding: 50px 20px 15px; border-radius: 10px; text-align: center; box-shadow: 0px 10px 0px 0px #f1c8b9;}
.zone02_main .zone02_mainBtm:before{ position: absolute; top: 10px; left: 10px; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f5c7b8;}
.zone02_main .zone02_mainBtm::after{ position: absolute; top: 10px; right: 10px; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f5c7b8;}
mark{ font-size: 1.5em; color: #f79676; font-weight: bolder; line-height: 2em; background: linear-gradient(transparent 50%, #fff 50%, #fff 75%, #fff 90%, #fff 95%);}
@media (max-width:1024px){
    .zone02_main{ max-width: 75%;}
    .zone02::before{ width: 100vw; height: 100vw;}
    @keyframes zone02_b {
        0%{ transform: translate(-100%,-50%);}
        100%{ transform: translate(-90%,-50%);}
    }
    .zone02::after{ width: 100vw; height: 100vw;}
    @keyframes zone02_a {
        0%{ transform: translate(100%,-50%);}
        100%{ transform: translate(90%,-50%);}
    }
}
@media (max-width:768px){
    .zone02_main .zone02_mainTop{ margin: 0 0 20px;}
    .zone02_main .zone02_mainBtm{ padding: 20px 15px 15px;}
    .zone02_main{ max-width: 95%;}
    .zone02::before{ display: none;}
    .zone02::after{ display: none;}
    mark{ font-size: 1em;}
}
@media (max-width:480px){
    .zone02_main{ margin: 30px auto;}
    .zone02_pic{ padding: 0 2px;}
    .zone02_pic04{ padding: 0 2px;}
    mark{ font-size: 0.875em;}
}


.zone03{ max-width: 2000px; margin: 0 auto 6px; overflow: hidden;}
.zone03_main{ display: flex; flex-wrap: wrap; max-width: 1700px; margin: 50px auto;}
.zone03_mainRight{ position: relative; display: flex; align-items: flex-end; width: 34.58%; order: 2;}
.zone03_mainRight img{ max-width: 100%;}
.zone03_mainRight .zone03_pic02{ position: absolute; bottom: 0; right: 0; width: 28.23%; opacity: 0;}
.zone03_mainRight .zone03_pic02.active{ animation: .5s zone03_pic02 forwards;}
@keyframes zone03_pic02 {
    0%{ transform: translate(20px,0); opacity: 0;}
    100%{ transform: translate(0,0); opacity: 1;}
}

.zone03_mainLeft{ width: 65.42%; order: 1;}
.zone03_mainLeft .party{ display: flex; justify-content: space-between; align-items: center; color: #f5c7b8;}
.zone03_mainLeft .party p{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 15.625vw; height: 15.625vw; margin: 0 0 40px 0; border-radius: 50%; border:5px solid #fff; outline: 10px solid #f5c7b8; background: #fbeada; font-weight: bolder;}
.zone03_mainLeft .party p b{ padding: 10px 0 0 0; font-size: 2.5em; color: #687dff;}
.zone03_mainLeft .party p span{ padding: 10px 0 15px 0; font-size: 1.5em; color: #ff596d;}
.zone03_mainLeft .party p i{ padding: 5px 20px; font-style: normal; color: #7c1f1d; background: #f5c7b8; border-radius: 5px;}

.zone03_mainLeft .info{ display: flex; margin: 40px 0 0 0;}
.zone03_mainLeft .info_left{ margin: 0 20px 0 0;}
.zone03_mainLeft .info_left p{ margin: 0; font-size: 1.5em; color: #4f2e11; font-weight: bolder;}
.zone03_mainLeft .info_left p+p{ margin: 30px 0 0 0;}
.zone03_mainLeft .info_left span{ margin: 0 20px 0 0; padding: 5px 10px; background: #8dbd47; color: #fff; border-radius: 5px;}

.zone03_mainLeft .info_right{ position: relative; display: flex; justify-content: center; align-items: center; flex: 1; background: linear-gradient(-45deg, #8dbd47 50%, #a4d064 50%); background-size: 150%; font-size: 3.75em; font-weight: bolder; text-decoration: none; color: #fff; text-shadow: 0 3px #659222; border-radius: 10px; transition: .5s;}
.zone03_mainLeft .info_right.active{ animation: .5s btn forwards;}
@keyframes btn {
    0%{ background-size: 150%;}
    100%{ background-size: 100%;}
}
.zone03_mainLeft .info_right:hover{ animation: .5s btn1 forwards;}
@keyframes btn1 {
    0%{ background-size: 100%;}
    100%{ background-size: 150%;}
}

@media (max-width:1740px){
    .zone03_main{ padding: 0 20px;}
}
@media (max-width:1360px){
    .zone03_mainLeft .party{ font-size: 0.875em;}
    .zone03_mainLeft .party p{ width: 18.5vw; height: 18.5vw; border:3px solid #fff; outline: 7px solid #f5c7b8;}
    .zone03_mainLeft .info{ flex-wrap: wrap;}
    .zone03_mainLeft .info_right{ flex: auto; width: 100%; line-height: 2em; margin: 30px 0 0 0;}
}
@media (max-width:1024px){
    .zone03_main{ flex-direction: column; align-items: center;}
    .zone03_mainRight{ width: 50%; margin: 0 0 40px 0; order: 1;}
    .zone03_mainLeft{ width: 100%;}
    .zone03_mainLeft .party p{ width: 30vw; height: 30vw;}
}
@media (max-width:768px){
    .zone03_mainRight{ width: 75%;}
    .zone03_mainLeft .party{ font-size: 1em;}
    .zone03_mainLeft .party p{ padding: 10px 5px; width: 30vw; height: auto; border-radius: 10px; border:1px solid #fff; outline: 2px solid #f5c7b8;}
    .zone03_mainLeft .party p b{ font-size: 1.25em;}
    .zone03_mainLeft .party p span{ font-size: 0.75em;}
    .zone03_mainLeft .party p i{ padding: 5px; font-size: 0.75em;}

    .zone03_mainLeft .info_left p{ font-size: 1em;}
}
@media (max-width:480px){
    .zone03_main{ margin: 30px auto;}

    .zone03_mainLeft .info{ margin: 30px 0 0 0; text-align: center;}
    .zone03_mainLeft .info_left{ margin: 0; width: 100%;}
    .zone03_mainLeft .info_left span{ display: block; margin: 0 0 10px 0;}
}



.zone04{ position: relative; max-width: 2000px; margin: 0 auto 6px; background: #fbd7cb url(../images/bg_line.png) top center repeat; overflow: hidden;}
.zone04_main{ display: flex; flex-wrap: wrap; align-items: flex-end; max-width: 1700px; margin: 50px auto;}
.zone04_main .zone04_info{ flex: 1;}
.zone04_main .zone04_pic02{ margin: 0 30px 0 0;}
.zone04_main .zone04_pic03{ margin: 0 0 0 30px;}

.large_msg{ display: flex;}
.large_msg+.large_msg{ margin: 50px 0 0 0;}
.large_msgLeft{ display: flex; flex-direction: column; align-items: flex-end; flex: 1; margin: 0 30px 0 0;}
.large_msgLeft div{ position: relative; background: #fdead9; width: 100%; margin: 25px auto 35px; padding: 50px 20px 15px; border-radius: 10px; text-align: center; box-sizing: border-box; opacity: 0; box-shadow: 0px 10px 0px 0px #f1c8b9;}
.large_msgLeft div:before{ position: absolute; top: 10px; left: 10px; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f5c7b8;}
.large_msgLeft div:after{ position: absolute; top: 10px; right: 10px; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f5c7b8;}
.large_msgLeft a{ position: relative; display: flex; justify-content: center; align-items: center; flex: 1; padding: 10px; width: 60%; background: linear-gradient(-45deg, #8dbd47 50%, #a4d064 50%); background-size: 100%; font-size: 3.75em; font-weight: bolder; text-decoration: none; color: #fff; text-shadow: 0 3px #659222; border-radius: 10px; transition: .5s; opacity: 0;}
.large_msgLeft img{ max-width: 100%; opacity: 0;}

.large_msgLeft ul{ margin: 0 15px 0 25px; padding: 0; list-style: none; text-align: left;}
.large_msgLeft ul img{ margin: 0 0 30px;}
.large_msgLeft li{ position: relative; margin: 0 0 30px; padding: 0 0 0 45px; font-weight: bolder; font-size: 1.5em; counter-increment:li; list-style: none; color: #f79676;}
.large_msgLeft li::before{ position: absolute; top: 0; left: 0; display: inline-block; content: counter(li); background: #fff; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; color: #f79676; text-align: center; font-size: 0.875em;}
.large_msgLeft li a{ color: #4a97ff; text-decoration: none;}
.large_msgRight img{ max-width: 100%; opacity: 0;}

.large_msg.active .large_msgRight img{ animation: .5s showup forwards;}
.large_msg.active .large_msgLeft img{ animation: .5s showup forwards; animation-delay: .3s;}
.large_msg.active .large_msgLeft div{ animation: .5s showup forwards; animation-delay: .6s;}
.large_msg.active .large_msgLeft a{ animation: .5s showup forwards; animation-delay: .9s;}

.zone04_main+.zone04_main .large_msgLeft{ align-items: flex-start; margin: 0 0 0 30px;}
@keyframes showup {
    0%{ transform: translate(0,20px); opacity: 0;}
    100%{ transform: translate(0,0); opacity: 1;}
}

@media (max-width:1740px){
    .zone04_main{ padding: 0 20px;}
    .zone04_main .zone04_pic02,.zone04_main .zone04_pic03{ width: 25%;}
}
@media (max-width:1024px){
    .zone04_main .zone04_pic02,.zone04_main .zone04_pic03{ display: none;}
}
@media (max-width:768px){
    .large_msgLeft div{ padding: 20px 15px 15px;}
    .large_msgLeft a{ width: 100%; box-sizing: border-box;}
    .large_msgLeft li{ font-size: 1em;}
    .large_msgRight{ width: 50px;}
}
@media (max-width:480px){
    .zone04_main{ margin: 30px auto;}
    .zone04_main+.zone04_main .large_msgLeft{ margin: 0 0 0 10px;}
    .large_msg+.large_msg{ margin: 30px 0 0 0;}
    .large_msgLeft{ margin: 0 10px 0 0;}
    .large_msgRight{ width: 30px;}
    .large_msgLeft li{ margin: 0 0 15px; font-size: 0.875em;}
    
}


.overlay{ display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 30;}
.overlay .close{ position: fixed; top: 5vh; left: 50%; transform: translate(-50%,0); transition: .5s;}
.overlay .close:hover{ filter: hue-rotate(-30deg);}
.overlay .close img{ width: 58px; cursor: pointer;}
.lightbox{ display: none; position: fixed; top: calc(5vh + 78px); left: 50%; transform: translate(-50%,0); width: 700px; max-width: calc(100% - 40px); max-height: calc(90vh - 78px); padding: 20px; background: #fdead9; overflow-y: auto; border-radius: 10px; box-sizing: border-box; z-index: 31;}
.lightbox:before{ position: absolute; top: 10px; left: 10px; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f5c7b8;}
.lightbox:after{ position: absolute; top: 10px; right: 10px; content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f5c7b8;}
.lightbox::-webkit-scrollbar { width: 6px; background-color: #f5c7b8; }
.lightbox::-webkit-scrollbar-thumb { background-color: #feda74; border-radius: 3px;}


.lightbox .title{ display: block; margin: 30px auto;}
.lightbox h3{ width: 100%; text-align: center;}

.lightbox_login .login{ display: flex; justify-content: center; flex-wrap: wrap;}
.lightbox_login .login a{ display: inline-block; background: #ffd6ca; border-radius: 50%;}
.lightbox_login .login a+a{ margin: 0 0 0 10px;}

.lightbox .logout{ text-align: center;}
.lightbox .logout span{ background: #fbd7cb; padding: 5px 10px; border-radius: 50px;}
.lightbox .logout a{ color: #687dff; text-decoration: none;}

.lightbox_apply>div{ max-width: 600px; margin: 0 auto;}
.lightbox_apply p{ display: flex; align-items: baseline; font-weight: bolder;}
.lightbox_apply span{ display: inline-block; margin: 0 20px 0 0; padding: 5px 10px; width: 120px; line-height: 30px; background: #8dbd47; color: #fff; border-radius: 5px; text-align: center;}
.lightbox_apply select{ flex: 1; margin: 0 0 10px; padding: 0 20px; line-height: 36px; font-size: 1em; text-align: center; color: #333; background: transparent; border: 3px solid #8fbd4c; border-radius: 10px; appearance: none; cursor: pointer;}
.lightbox_apply input{ flex: 1; margin: 0 0 10px; padding: 0 20px; line-height: 36px; font-size: 1em; text-align: center; color: #333; background: transparent; border: 3px solid #8fbd4c; border-radius: 10px; appearance: none;}
.lightbox_apply input:disabled{ background: #f5c7b8; border: 3px solid #f5c7b8;}
.lightbox_apply a{ position: relative; display: flex; justify-content: center; align-items: center; flex: 1; margin: 30px 0 0 0; background: linear-gradient(-45deg, #8dbd47 50%, #a4d064 50%); background-size: 100%; font-size: 3.75em; font-weight: bolder; text-decoration: none; color: #fff; text-shadow: 0 3px #659222; border-radius: 10px; transition: .5s;}
.lightbox_apply a:hover{ background-size: 150%;}


.lightbox_note ul{ max-width: 600px; margin: 0 auto; padding: 0; list-style: none; text-align: left;}
.lightbox_note li{ position: relative; margin: 0 0 20px; padding: 0 0 0 45px; font-weight: bolder; font-size: 1em; counter-increment:li; list-style: none; color: #f79676;}
.lightbox_note li::before{ position: absolute; top: 0; left: 0; display: inline-block; content: counter(li); background: #fff; width: 25px; height: 25px; line-height: 25px; border-radius: 100%; color: #f79676; text-align: center; font-size: 0.8em;}
.lightbox_note li a{ color: #4a97ff; text-decoration: none;}

.lightbox_gift img{ max-width: 100%;}


.lightbox_guest{ display: none; position: fixed; top: calc(5vh + 78px); left: 50%; transform: translate(-50%,0); max-width: calc(100% - 40px); max-height: calc(90vh - 78px); z-index: 31;}

@media (max-width:480px){
    .lightbox_apply p{ flex-wrap: wrap; margin: 0;}
    .lightbox_apply span{ width: 100%; box-sizing: border-box; margin: 0; padding: 0; background: transparent; color: #8dbd47; text-align: left; font-size: 0.875em;}
    .lightbox_apply select{ width: 100%;}

    .lightbox_note li{ padding: 0 0 0 35px; font-size: 0.875em;}
}


footer{ background: #b94044; margin: 50px 0 0 0;}