@charset "UTF-8";

*{ font-family: 'Noto Sans TC', "微軟正黑體", sans-serif;}
body,html{ margin: 0; padding: 0;}
html{ background: #1a0121;}
body{ background: url(../images/all_bg.jpg) center top repeat;}
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;}
@media (max-width:1024px){
html{ font-size: 12px;}
}

.kv{ position: relative; margin: 0 auto; height: 874px; background: url(../images/topbn_bg.jpg) center top no-repeat; background-size: cover; overflow: hidden;}
.kv .topline{ position: absolute; top: 0; left: 0; width: 100%; z-index: 10;}

.kv .mv{ position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 1400px; max-width: 100%; height: 750px;}
.mv .logo{ position: absolute; top: 15.78%; left: 0; z-index: 10;}
.mv .topbn_character{ position: absolute; top: 0; left: -35%;}
.mv .topbn_book{ position: absolute; top: 45%; left: -10%; animation: 2s topbn_book infinite ease-in-out;}
@keyframes topbn_book {
    0%{ padding: 10px 0 0 0; filter: brightness(1.5);}
    50%{ padding: 0 0 0 0; filter: brightness(1);}
    100%{ padding: 10px 0 0 0; filter: brightness(1.5);}
}

.mv .slogan{ position: absolute; top: 15.78%; right: 0; width: 690px; height: 240px; z-index: 10;}
.slogan_01{ position: absolute; right: 77.2%; top: 0; width: 23.18%; animation: 2s slogan_01 forwards ease-in-out;}
.slogan_02{ position: absolute; right: 57%; top: 0; width: 20.43%; animation: 2s slogan_01 forwards ease-in-out; animation-delay: 0.1s;}
.slogan_03{ position: absolute; right: 40.85%; top: 0; width: 16.23%; animation: 2s slogan_01 forwards ease-in-out; animation-delay: 0.2s;}
.slogan_04{ position: absolute; right: 21.1%; top: 0; width: 20.87%; animation: 2s slogan_01 forwards ease-in-out; animation-delay: 0.3s;}
.slogan_05{ position: absolute; right: 0; top: 0; width: 22.17%; animation: 2s slogan_01 forwards ease-in-out; animation-delay: 0.4s;}
.slogan_06{ position: absolute; right: 0; bottom: 0; opacity: 0; width: 77.39%; animation: 1s slogan_03 forwards ease-in-out; animation-delay: 0.4s;}
.slogan img.in{ opacity: 0; transform-origin:center bottom;}
.slogan img.loop{ opacity: 1; transform-origin:center bottom; animation-name: slogan_02; animation-iteration-count: infinite;}
@keyframes slogan_01 {
    0%{ opacity: 0; top: -20px;}
    10%{ opacity: 1; top: -20px; transform: scale(1,1);}
    30%{ opacity: 1; top: 0; transform: scale(1.1,0.9);}
    50%{ opacity: 1; top: 0; transform: scale(1,1);}
    100%{ opacity: 1; top: 0;}
}
@keyframes slogan_02 {
    0%{ opacity: 1; top: 0; transform: scale(1,1);}
    20%{ opacity: 1; top: 0; transform: scale(1.1,0.9);}
    40%{ opacity: 1; top: 0; transform: scale(1,1);}
    100%{ opacity: 1; top: 0;}
}
@keyframes slogan_03 {
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}

.topbtn{ position: absolute; top: calc(15.78% + 480px); right: 0; display: flex; justify-content: space-between; width: 690px; z-index: 10;}
.topbtn a{ display: block; position: relative;}
.topbtn a img:nth-child(1){ position: absolute; bottom: 80%; left: 50%; transform: translateX(-50%); pointer-events: none;}
.topbtn a:hover img:nth-child(1).topbtn_mon02{ animation: 3s topbtn_mon02_hover infinite ease-in-out;}
@keyframes topbtn_mon02_hover {
    0%{ opacity: 1; left: 50%; bottom: 80%;}
    10%{ opacity: 1; left: 50%; bottom: 90%;}
    25%{ opacity: 0; left: 10%; bottom: 90%; transform:scaleX(1)}
    30%{ opacity: 1; left: 10%; bottom: 90%; transform:scaleX(-1)}
    50%{ opacity: 1; left: 50%; bottom: 90%; transform:scaleX(-1)}
    55%{ opacity: 1; left: 50%; bottom: 90%; transform:scaleX(1)}
    75%{ opacity: 0; left: 50%; bottom: 90%;}
    90%{ opacity: 1; left: 50%; bottom: 90%;}
    100%{ opacity: 1; left: 50%; bottom: 80%;}
}
.topbtn a:hover img:nth-child(1).topbtn_mon01{ animation: 1.5s topbtn_mon01_hover infinite ease-in-out;}
@keyframes topbtn_mon01_hover {
    0%{ left: 50%; bottom: 80%; transform: translateX(-50%) scaleY(1);}
    25%{ left: 45%; bottom: 90%; transform: translateX(-50%) scaleY(1.05);}
    30%{ left: 40%; bottom: 80%; transform: translateX(-50%) scaleY(1);}
    70%{ left: 60%; bottom: 80%; transform: translateX(-50%) scaleY(1);}
    95%{ left: 55%; bottom: 90%; transform: translateX(-50%) scaleY(1.05);}
    100%{ left: 50%; bottom: 80%; transform: translateX(-50%) scaleY(1);}
}

.topnote{ position: absolute; top: calc(15.78% + 380px); right: 0; display: flex; align-items: center; width: 690px; z-index: 10;}
.topnote div{ flex: 1; height: 140px; margin: 0 20px 0 0; padding: 1px; border: 2px solid #fff2df; border-radius: 50px 5px 50px 50px;}
.topnote p{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; margin: 0; font-size: 1.25rem; font-weight: bolder; background: rgba(255,242,223,0.3); border-radius: 50px 5px 50px 50px;}
.topnote p i{ margin: 0 0 10px 0; padding: 5px 0; width: 76px; text-align: center; font-size: 0.875rem; font-style: normal; border-radius: 50px; background: #50b5bc; color: #fff;}

@media (max-width:1400px){
.kv{ height: auto; background-position: center; background-size: cover;}
.kv .mv{ position: unset; height: auto; transform: translateX(0);}
.mv .logo{ width: 15%; left: 10px;}
.mv .topbn_character{ position: unset; width: 100%; margin: 0 0 0 -20%;}
.mv .topbn_book{ width: 20%; top: 40%; left: 0;}

.mv .slogan{ right: 10px; width: 50%;}
.slogan_06{ position: unset; padding: 25% 0 0 0; float: right;}

.topbtn{ width: 50%; top: unset; bottom: 13%;}
.topbtn a{ margin: 0 10px 0 0;}
.topbtn img{ max-width: 100%;}
.topbtn a img:nth-child(1){ width: 40%;}

.topnote{ width: 50%; margin: 0 10px 0 0; top: unset; bottom: 13%;}
.topnote img{ width: 30%;}
.topnote div{ height: auto;}
.topnote p{ padding: 10px 20px;}
}

@media (max-width:1024px){
.topnote div{ border-radius: 20px 5px 20px 20px;}
.topnote p{ font-size: 1rem; border-radius: 20px 5px 20px 20px;}
}

@media (max-width:768px){
.topnote div{ margin: 0 10px 0 0;}
.topnote p{ padding: 5px;}
.topnote p i{ margin: 0 0 5px;}
}

@media (max-width:480px){
.kv{ height: 100vh;}
.kv .mv{ height: 100vh;}
.mv .logo{ width: 30%; top: 20px; left: 5%;}
.mv .topbn_character{ width: unset; height: 100vh; margin: 0; transform: scaleX(-1) translateX(36%);}
.mv .topbn_book{ display: none;}

.mv .slogan{ top: unset; bottom: calc(30px + 15%); right: 5%; width: 90%; height: auto;}
.topbtn{ width: 100%; bottom: 30px;}
.topbtn a{ margin: 0 5%;}

.topnote{ width: 100%; bottom: 30px; margin: 0;}
.topnote div{ margin: 0 10px;}
.topnote img{ margin: 0 10px 0 0;}

.topbn_cover{ position: absolute; bottom: 0; left: 0; width: 100vw; height: 50vh; background: linear-gradient(to top, #f1453f 30%, transparent);}
}

section{ position: relative; max-width: 1400px; margin: 0 auto; padding: 80px 100px; background: url(../images/main_bg.jpg) center top repeat; box-shadow: 0 0 0px 5px rgba(255,255,255,0.5); border: 2px solid #fff; border-radius: 50px; box-sizing: border-box;}
section.main_01{ margin: -124px auto 0;}
section.main_02{ margin: 60px auto;}
section.main_03{ display: flex; flex-wrap: wrap; margin: -124px auto 60px;}
@media (max-width:1400px){
section{ margin: 0 2.5%; width: 95%; padding: 80px 50px;}
section.main_01{ margin: -20px 2.5% 0;}
section.main_03{ margin: -20px 2.5% 60px;}
}
@media (max-width:768px){
section{ padding: 40px 30px; border-radius: 20px;}
}
@media (max-width:480px){
section{ padding: 30px 15px; border-radius: 10px;}
}

.info{ display: flex; flex-wrap: wrap;}
.info>div:nth-child(2){ flex: 1; margin: 0 100px 0 20px;}
.info>div:nth-child(3){ display: flex; flex-direction: column; width: 410px;}
.info h3{ margin: 0 0 60px;}
.info p{ display: flex; align-items: flex-start; font-size: 1.25rem; font-weight: bolder;}
.info p i{ padding: 5px 0; width: 76px; text-align: center; font-size: 0.875rem; font-style: normal; border-radius: 50px; background: #50b5bc; color: #fff;}
.info p span{ flex: 1; padding: 0 0 0 20px;}
.info b{ position: relative; display: block; margin: 60px 0 0 0; padding: 20px 40px; border: 2px solid #50b5bc; border-radius: 20px; font-size: 1.25rem; font-weight: bolder; color: #50b5bc; overflow: hidden;}
.info b:after{ position: absolute; top: -20px; right: -20px; display: block; width: 40px; height: 40px; content: ""; background: #b9dedc; transform: rotate(45deg);}
.info b:before{ position: absolute; bottom: -20px; left: -20px; display: block; width: 40px; height: 40px; content: ""; background: #b9dedc; transform: rotate(45deg);}
.info hr{ margin: 0; height: 2px; background: #50b5bc; box-shadow: none; border: none;}
.info>div:nth-child(3) div{ display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex: 1; margin: 10px 0; padding: 0 20px; text-align: center; background: rgba(255,234,205,0.4); border-radius: 20px;}
.info>div:nth-child(3) div a{ position: relative; display: inline-block; width: 120px; margin: 0 0 10px; padding: 15px 30px; font-size: 1.25rem; font-weight: bolder; text-decoration: none; color: #50b5bc; border: 2px solid #50b5bc; border-radius: 20px; background: linear-gradient(to top, #efefef, #fff); transition: .5s;}
.info>div:nth-child(3) div a::after{ position: absolute; left: -2px; bottom: -10px; display: block; content: ""; width: 100%; height: 50%; border-radius: 0 0 20px 20px; border: 2px solid #50b5bc; border-top: none; transition: .3s;}
.info>div:nth-child(3) div a:hover{ margin: 10px 0 0 0;}
.info>div:nth-child(3) div a:hover:after{ bottom: -2px;}
@media (max-width:1400px){
.info>div:nth-child(2){ margin: 0 50px 0 20px;}
}
@media (max-width:1280px){
.info>div:nth-child(1) img{ width: 40px;}
}
@media (max-width:1024px){
.info h3{ margin: 0 0 30px;}
.info h3 img{ width: 102.5px;}
.info b{ margin: 30px 0 0 0;}
.info>div:nth-child(3){ width: 210px;}
.info>div:nth-child(3) div img{ width: 120px;}
}
@media (max-width:768px){
.info{ flex-direction: column;}
.info>div:nth-child(1){ display: none;}
.info>div:nth-child(2){ margin: 0 0 20px 0;}
.info>div:nth-child(3){ width: 100%;}
.info>div:nth-child(3) div{ padding: 20px 0;}
.info>div:nth-child(3) img{ margin: 0 0 20px;}
}


.presents{ display: flex; margin: 60px 0 0; flex-wrap: wrap;}
.presents>div:nth-child(2){ flex: 1; margin: 0 100px 0 20px;}
.presents h3{ margin: 0 0 60px;}
.presents p{ display: flex; align-items: flex-start; font-size: 1.25rem; font-weight: bolder;}
.presents p i{ padding: 5px 0; width: 76px; text-align: center; font-size: 0.875rem; font-style: normal; border-radius: 50px; background: #ffc340; color: #fff;}
.presents p span{ flex: 1; padding: 0 0 0 20px;}
.presents b{ position: relative; display: block; margin: 60px 0 0 0; padding: 20px 40px; border: 2px solid #ffc340; border-radius: 20px; font-size: 1.25rem; font-weight: bolder; color: #ffc340; overflow: hidden;}
.presents b:after{ position: absolute; top: -20px; right: -20px; display: block; width: 40px; height: 40px; content: ""; background: #ffe3aa; transform: rotate(45deg);}
.presents b:before{ position: absolute; bottom: -20px; left: -20px; display: block; width: 40px; height: 40px; content: ""; background: #ffe3aa; transform: rotate(45deg);}
.presents hr{ margin: 0; height: 2px; background: #ffc340; box-shadow: none; border: none;}
.presents>div:nth-child(2) a{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; margin: 40px 0 10px; padding: 15px 30px; font-size: 1.25rem; font-weight: bolder; text-decoration: none; color: #ffc340; border: 2px solid #ffc340; border-radius: 20px; background: linear-gradient(to top, #efefef, #fff); box-sizing: border-box; transition: .5s;}
.presents>div:nth-child(2) a::after{ position: absolute; left: -2px; bottom: -10px; display: block; content: ""; width: 100%; height: 50%; border-radius: 0 0 20px 20px; border: 2px solid #ffc340; border-top: none; transition: .3s;}
.presents>div:nth-child(2) a:hover{ margin: 50px 0 0 0;}
.presents>div:nth-child(2) a:hover:after{ bottom: -2px;}
.presents>div:nth-child(2) a img{ margin: 0 10px 0 0;}

.presents>div:nth-child(3){ display: flex; width: 410px;}
.presents>div:nth-child(3)>div{ margin: 0 10px 0 0; width: calc(50% - 10px);}
.presents>div:nth-child(3)>div+div{ margin: 0 0 0 10px;}
.presents>div:nth-child(3)>div div{ display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; flex: 1; margin: 10px 0; padding: 0 20px; height: calc(100% - 24px); text-align: center; background: rgba(255,234,205,0.4); border-radius: 20px;}
.presents>div:nth-child(3)>div div a{ position: relative; display: inline-block; width: 120px; margin: 0 0 10px; padding: 15px; font-size: 1.25rem; font-weight: bolder; text-decoration: none; color: #ffc340; border: 2px solid #ffc340; border-radius: 20px; background: linear-gradient(to top, #efefef, #fff); transition: .5s;}
.presents>div:nth-child(3)>div div a::after{ position: absolute; left: -2px; bottom: -10px; display: block; content: ""; width: 100%; height: 50%; border-radius: 0 0 20px 20px; border: 2px solid #ffc340; border-top: none; transition: .3s;}
.presents>div:nth-child(3)>div div a:hover{ margin: 10px 0 0 0;}
.presents>div:nth-child(3)>div div a:hover:after{ bottom: -2px;}
@media (max-width:1400px){
.presents>div:nth-child(2){ margin: 0 50px 0 20px;}
}
@media (max-width:1280px){
.presents>div:nth-child(1) img{ width: 40px;}
}
@media (max-width:1024px){
.presents h3{ margin: 0 0 30px;}
.presents h3 img{ width: 102.5px;}
.presents b{ margin: 30px 0 0 0;}
.presents>div:nth-child(2) a{ margin: 30px 0 10px 0;}
.presents>div:nth-child(2) a:hover{ margin: 40px 0 0 0;}
.presents>div:nth-child(3){ width: 210px;}
.presents>div:nth-child(3) div img{ width: 76px;}
.presents>div:nth-child(3)>div div a{ width: auto; padding: 15px; writing-mode: vertical-lr;}
}
@media (max-width:768px){
.presents{ flex-direction: column; margin: 40px 0 0;}
.presents>div:nth-child(1){ display: none;}
.presents>div:nth-child(2){ margin: 0 0 20px 0;}
.presents>div:nth-child(3){ width: 100%;}
.presents>div:nth-child(3) div img{ margin: 0 0 20px;}
.presents>div:nth-child(3)>div div{ padding: 20px 0; height: auto;}
.presents>div:nth-child(3)>div div a{ writing-mode: inherit; padding: 15px 30px;}
}


.note{ display: flex; flex-wrap: wrap;}
.note h3{ margin: 0 0 60px;}
.note>div:nth-child(2){ flex: 1; margin: 0 0 0 20px;}
.note>div:nth-child(2) ul{ margin: 0; padding: 0; font-size: 1.25rem; font-weight: bolder; list-style: none;}
.note>div:nth-child(2) li{ position: relative; margin: 0; padding: 0 0 0 96px; counter-increment:li;}
.note>div:nth-child(2) li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: #ec5b66; width: 76px; height: 26px; line-height: 26px; padding: 0 0 0 10px; border-radius: 50px; text-align: left; font-size: 0.875rem; box-sizing: border-box; color: #fff;}
.note>div:nth-child(2) li+li{ margin: 20px 0 0 0;}
@media (max-width:1280px){
.note>div:nth-child(1) img{ width: 40px;}
}
@media (max-width:1024px){
.note h3{ margin: 0 0 30px;}
.note h3 img{ width: 102.5px;}
}
@media (max-width:768px){
.note>div:nth-child(1){ display: none;}
.note>div:nth-child(2){ margin: 0;}
}



/*--sidebtn--*/
.sidebtn{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80vw; height: 90vh; z-index: 10; pointer-events: none;}
.sidebtn div{ position: absolute; bottom: 0; right: -100px; padding: 5px; background: #fff; border-radius: 50px; pointer-events: painted;}
.sidebtn a{ display: block; transition: .5s;}
.sidebtn a+a{ margin: 10px 0 0 0;}
.sidebtn a:hover{ filter: brightness(1.2);}
@media (max-width:1400px){
.sidebtn div{ right: -74px;}
.sidebtn img{ width: 60px;}
}
@media (max-width:768px){
.sidebtn{ left: 5vw; transform: translate(0,-50%); border-radius: 20px;}
.sidebtn div{ right: -13vw;}
.sidebtn img{ width: 10vw;}
}

/*--member--*/
.member{ position: fixed; bottom: calc(5vh + 10px); left: 50%; transform: translateX(-50%); padding: 10px 10px 10px 20px; border-radius: 50px; background: #fff; box-shadow: 0px 0px 0px 5px rgba(236,91,102,0.5); font-size: 0.875rem; font-weight: bolder; z-index: 100000002;}
.member i{ font-style: normal;}
.member a{ display: inline-block; margin: 0 0 0 10px; padding: 0px 10px; line-height: 25px; border-radius: 50px; background: #d73b36; color: #fff; text-decoration: none;}
.member span{ display: inline-block; margin: 0 0 0 5px; width: 25px; line-height: 25px; border-radius: 50px; text-align: center; background: #eee; cursor: pointer;}
@media (max-width:480px){
.member{ display: flex; align-items: center; bottom: 0; left: 0; transform: translateX(0); width: 100vw; border-radius: 15px 15px 0 0; box-sizing: border-box; box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}
.member i{ margin: 0 auto 0 0;}
}

/*--lightbox--*/
.overlay{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(215,59,54,0.95); z-index: 9;}
.lightbox{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80vw; height: 90vh; padding: 80px 100px; background: url(../images/main_bg.jpg) center top repeat; border-radius: 50px; box-sizing: border-box; z-index: 10;}
.lightbox ul{ margin: 0; padding: 0; font-size: 1.25rem; font-weight: bolder; list-style: none;}
.lightbox ul li{ position: relative; margin: 0; padding: 0 0 0 96px; counter-increment:li;}
.lightbox ul li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); background: #ec5b66; width: 76px; height: 26px; line-height: 26px; padding: 0 0 0 10px; border-radius: 50px; text-align: left; font-size: 0.875rem; box-sizing: border-box; color: #fff;}
.lightbox ul li+li{ margin: 20px 0 0 0;}
.lightbox ul li span{ color:#ce433b;}
.lightbox ul ul{ margin: 15px 0 0 0;}
.lightbox ul ul li{ padding: 0;}
.lightbox ul ul li+li{ margin: 10px 0 0 0;}
.lightbox ul ul li:before{ display: none;}
.lightbox h3{ display: flex; align-items: center; margin: 0 0 60px 0; padding: 0 0 20px 0; font-size: 2rem; border-bottom: 2px solid #ce433b; color: #ce433b;}
.lightbox h3 img{ width: 40px; margin: 0 20px 0 0;}
.lightbox b{ position: relative; display: block; margin: 40px 0 0 0; padding: 20px 40px; border: 2px solid #ce433b; border-radius: 20px; font-size: 1.25rem; font-weight: bolder; color: #ce433b; overflow: hidden;}
.lightbox b:after{ position: absolute; top: -20px; right: -20px; display: block; width: 40px; height: 40px; content: ""; background: #fed8d5; transform: rotate(45deg);}
.lightbox b:before{ position: absolute; bottom: -20px; left: -20px; display: block; width: 40px; height: 40px; content: ""; background: #fed8d5; transform: rotate(45deg);}
.lightbox .box{ height: 100%; padding: 0 20px 0 0; overflow-y: auto;}
.lightbox .box::-webkit-scrollbar { width: 6px; background-color: #fff;}
.lightbox .box::-webkit-scrollbar-thumb { background-color: #fb9aa1;}

.close{ position: absolute; top: 0; right: -100px; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 50%; background: #ffc340; cursor: pointer;}
.close span{ position: absolute; display: block; width: 95%; height: 95%; border: 1px solid #ffc340; border-radius: 50%; transition: .3s;}
.close:hover span{ width: 80%; height: 80%; border: 1px solid #fff;}
.close img{ max-width: 50%;}
@media (max-width:1400px){
.lightbox{ padding: 80px 50px;}
.close{ right: -68px; width: 60px; height: 60px;}
}
@media (max-width:1024px){
.lightbox h3{ margin: 0 0 30px 0;}
.lightbox b{ margin: 30px 0 0 0;}
}
@media (max-width:768px){
.lightbox{ left: 5vw; transform: translate(0,-50%); padding: 40px 30px; border-radius: 20px;}
.close{ right: -13vw; width: 10vw; height: 10vw;}
.close span{ display: none;}
}
@media (max-width:480px){
.lightbox{ padding: 20px 15px;}
.lightbox .box{ padding: 0;}
.lightbox li{ padding: 0 0 0 36px;}
.lightbox li::before{ width: 26px;}
.lightbox h3 img{ width: 30px; margin: 0 10px 0 0;}
.lightbox b{ padding: 20px;}
}


.box_rules{ font-size: 1.25rem; font-weight: bolder;}
.box_rules h4{ display: inline-block; padding: 5px 20px; border-radius: 50px; border: 3px solid #e36169; color: #e36169;}
.box_rules>div{ display: flex; align-items: flex-start; flex-wrap: wrap; margin: 30px 0 0 0; gap: 30px;}
.box_rules>div img{ width: calc(50% - 15px);}
.box_rules>div div{ width: calc(50% - 15px);}
.box_rules>div div h5{ display: flex; align-items: flex-start; margin: 0 0 10px; font-size: 1.25rem;}
.box_rules>div div h5 p{ background: #f00; border-radius: 50px; display: inline-block; margin: 0 10px 0 0; padding: 5px 0; width: 100px; text-align: center; font-size: 0.875rem;}
.box_rules>div div h5 span{ flex: 1;}
@media (max-width:768px){
.box_rules>div{ flex-direction: column;}
.box_rules>div img{ width: 100%;}
.box_rules>div div{ width: 100%;}
}


.box_form{ font-size: 1.25rem; font-weight: bolder;}
.form_member{ display: flex; align-items: center;}
.form_member i{ padding: 5px 0; width: 76px; text-align: center; font-size: 0.875rem; font-style: normal; border-radius: 50px; background: #fff; color: #d73b36; font-style: normal;}
.form_member span{ margin: 0 auto 0 10px;}
.form_member a{ padding: 5px 15px; font-size: 0.875rem; background: #d73b36; color: #fff; text-decoration: none; border-radius: 50px;}

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

.form .upload_image{ position: absolute; left: 0; top: 0; width: 600px; max-width: 100%;}
.form .upload_image label{ cursor: pointer;}
.form .upload_image label img{ position: static; transform: translate(0,0); width: 100%; border-radius: 20px; transition: .5s;}
.form .upload_image label span{ top: auto; bottom: 30px; left: 50%; transform: translate(-50%,0); padding: 5px 15px; color: #fff; border-radius: 50px; background: #d73b36;}
.form .upload_image input{ display: none;}

.form .checkrules input{ display: none;}
.form .checkrules{ display: flex; align-items: flex-start; padding: 15px 20px; border-radius: 20px; background: #fff; cursor: pointer;}
.form .checkrules i{ width: 20px; height: 20px; margin: 5px 10px 0 0; padding: 2px; border-radius: 5px; border: 1px solid #d73b36;}
.form .checkrules i span{ position: static; transform: translate(0,0); display: none; width: 100%; height: 100%; border-radius: 5px; background: #d73b36;}
.form .checkrules i.active span{ display: block;}
.form .checkrules p{ flex: 1; margin: 0;}
.form .checkrules p a{ text-decoration: none; color: #d73b36;}

.form .address{ display: flex; flex-wrap: wrap; margin: 20px 0; gap: 15px;}
.form .address h4{ width: 100%; margin: 0; padding: 10px; border-radius: 50px; text-align: center; color: #d73b36; border: 2px solid #d73b36;}
.form .address label{ width: calc(33.3% - 10px);}
.form .address label:nth-of-type(1), .form .address label:nth-of-type(5){ width: 100%;}
.form .address label+label{ margin: 0;}

.form>a{ position: relative; display: flex; justify-content: center; align-items: center; width: 100%; margin: 40px 0 10px; padding: 15px 30px; font-size: 1.25rem; font-weight: bolder; text-decoration: none; color: #d73b36; border: 2px solid #d73b36; border-radius: 20px; background: linear-gradient(to top, #efefef, #fff); box-sizing: border-box; transition: .5s;}
.form>a::after{ position: absolute; left: -2px; bottom: -10px; display: block; content: ""; width: 100%; height: 50%; border-radius: 0 0 20px 20px; border: 2px solid #d73b36; border-top: none; transition: .3s;}
.form>a:hover{ margin: 50px 0 0 0;}
.form>a:hover:after{ bottom: -2px;}

@media (max-width:1650px){
.form .address label{ width: 100%;}
}
@media (max-width:1400px){
.form{ padding: 0 0 0 450px;}
.form .upload_image{ width: 400px;}
.form .address label{ width: calc(33.3% - 10px);}
}
@media (max-width:1210px){
.form .address label{ width: 100%;}
}
@media (max-width:1024px){
.form{ padding: 0;}
.form .upload_image{ position: static; width: 100%; margin: 0 0 20px 0;}
.form .address label{ width: calc(33.3% - 10px);}
}
@media (max-width:768px){
.form_member i{ display: none;}
.form_member span{ margin: 0 auto 0 0;}
}
@media (max-width:480px){
.form .upload_image{ margin: 0 0 10px 0;}
.form label+label{ margin: 10px 0 0 0;}
.form .checkrules i{ width: 10px; height: 10px; margin: 3px 10px 0 0;}
.form .address{ margin: 10px 0; gap: 10px;}
.form .address label{ width: 100%;}
}


.box_presents{ font-size: 1.25rem; font-weight: bolder;}
.box_presents ol{ display: flex; flex-wrap: wrap; justify-content: space-between; list-style: none; margin: 0; padding: 0;}
.box_presents ol li{ width: 48%; margin: 0 0 60px;}
.box_presents i{ display: inline-block; height: 26px; line-height: 26px; padding: 0 10px; background: #ec5b66; border-radius: 50px; text-align: left; font-size: 0.875rem; font-style: normal; color: #fff;}
.box_presents ol li>div{ display: flex; margin: 30px 0 0 0; padding: 5px; background: #fff6e7; border-radius: 10px 10px 0 0;}
.box_presents ol li div div:first-of-type{ display: flex; align-items: center; justify-content: center; flex: 1; padding: 5px; background: #fff; border-radius: 10px;}
.box_presents ol li div div:nth-child(2){ display: flex; align-items: center; justify-content: center; width: 69%; margin: 0 0 0 5px; border-radius: 10px; background: #f8e5ea;}
.box_presents ol li div img { max-width: 100%; border-radius: 10px;}
.box_presents ol p{ display: flex; margin: 0; padding: 0 5px 5px 5px; background: #fff6e7; border-radius: 0 0 10px 10px; text-align: center; color: #e36169;}
.box_presents ol span:first-of-type{ flex: 1; padding: 15px 5px; background: #fff; border-radius: 10px 0 0 10px;}
.box_presents ol span:nth-child(2){ flex: 1; padding: 15px 5px; background: #fce7c4; border-radius: 0 10px 10px 0;}
@media (max-width:1400px){
.box_presents{ font-size: 1rem;}
}
@media (max-width:1280px){
.box_presents ol li{ width: 100%; margin: 0 0 30px;}
}
@media (max-width:480px){
.box_presents ol li{ margin: 0 0 15px; padding: 0;}
.box_presents ol li>div{ margin: 5px 0 0 0;}

.box_presents ol p{ flex-wrap: wrap;}
.box_presents ol span:first-of-type{ display: block; width: 100%; flex: auto; border-radius: 10px;}
.box_presents ol span:nth-child(2){ display: block; width: 100%; flex: auto; border-radius: 10px;}
}


.list{ width: calc(50% - 40px); margin: 0 0 60px 0;}
.list:nth-last-of-type(even){ margin: 0 0 60px 80px;}
.list h3{ display: flex; margin: 0 0 20px; font-size: 1.25rem; font-weight: bolder;}
.list h3 span{ display: inline-block; margin: 0 auto 0 0; padding: 5px 15px; font-size: 0.875rem; font-weight: bolder; border-radius: 50px; color: #fff; background: #273144;}

.list div{ position: relative; padding: 10px; border: 1px solid #ffe6c3; border-radius: 20px; cursor: pointer;}
.list img{ width: 100%; border-radius: 20px; transition: .5s;}
.list div span{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border: 1px solid transparent; border-radius: 20px; transition: .5s;}
.list div:hover span{ top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 40px); border: 1px solid #fff;}
.list div:hover img{ box-shadow: 0 0 5px 3px rgba(0,0,0,0.1);}
.list div i{ position: absolute; right: 15px; bottom: 15px; padding: 5px 15px; font-size: 1.25rem; font-weight: bolder; font-style: normal; border-radius: 50px; background: rgba(255,255,255,0.8);}

.list p{ display: flex; margin: 10px 0 0 0; padding: 1px; background: #ffe6c3; border-radius: 20px;}
.list p span{ flex: 1; display: block; line-height: 60px; font-size: 1.25rem; font-weight: bolder; color: #d73b36; background: #fff; border-radius: 20px; text-align: center;}
.list p a{ display: flex; align-items: center; justify-content: center; width: 140px; text-decoration: none; color: #fff; font-size: 0.875rem;}
.list p a b{ padding: 5px 15px; background: #d73b36; border-radius: 50px;}

.list u{ display: flex; margin: 10px 0 0 0; padding: 1px; background: #ffe6c3; border-radius: 20px; text-decoration: none;}
.list u a{ display: flex; align-items: center; justify-content: center; width: 140px; text-decoration: none; color: #fff; font-size: 0.875rem;}
.list u a b{ padding: 5px 15px; background: #d73b36; border-radius: 50px;}

.list u label{ position: relative; flex: 1; display: block; font-size: 1.25rem; font-weight: bolder; color: #d73b36; background: #fff; border-radius: 20px; text-align: center;}
.list u label select{ position: relative; line-height: 60px; margin: 0; padding: 0 20px; width: 100%; font-size: 1rem; border-radius: 20px; box-sizing: border-box; color: #d73b36; background: #fff; z-index: 1; cursor: pointer; transition: .2s;}

.list u label img{ position: absolute; top: 50%; right: 21px; width: auto; transform: translate(0, -50%); z-index: 2;}
.list u label span{ position: absolute; top: 50%; left: 21px; transform: translate(0, -50%); color: #000; transition: .5s; z-index: 2; pointer-events: none;}
.list u label.active span{ top:2px; transform: translate(0, 0); font-size: 12px;}
.list u label select:focus{ background: #ffebde;}

@media (max-width:1400px){
.list{ width: calc(50% - 25px); margin: 0 0 60px 0;}
.list:nth-last-of-type(even){ margin: 0 0 60px 50px;}
}
@media (max-width:1024px){
.list{ width: calc(50% - 15px); margin: 0 0 40px 0;}
.list:nth-last-of-type(even){ margin: 0 0 40px 30px;}
}
@media (max-width:768px){
.list{ width: 100%; margin: 0 0 30px 0;}
.list:nth-last-of-type(even){ margin: 0 0 30px 0;}
.list h3{ margin: 0 0 10px;}

.list div{ border-radius: 10px;}
.list img{ border-radius: 10px;}
.list div span{ border-radius: 10px;}

.list p span{ line-height: 40px;}
.list p a{ width: 90px;}
.list u a{ width: 90px;}
.list u label select{ line-height: 40px;}
}


.path{ width: 100%; text-align: center;}
.path:nth-of-type(1){ margin: 0 0 60px 0;}
.path a{ display: inline-block; width: 39px; height: 39px; line-height: 39px; margin: 0 5px; border-radius: 50px; border: 1px solid #d73b36; font-size: 1.25rem; font-weight: bolder; color: #d73b36; text-decoration: none; transition: .5s;}
.path a.active,.path a:hover{ background: #d73b36; color: #fff;} 
@media (max-width:768px){
.path:nth-of-type(1){ margin: 0 0 30px 0;}
.path a{ width: 29px; height: 29px; line-height: 29px;}
}

.box_vote{}
.box_vote h3{ display: flex; margin: 0 0 20px; padding: 0; font-size: 1.25rem; font-weight: bolder; border-bottom: 0; color: #000;}
.box_vote h3 span{ display: inline-block; margin: 0 auto 0 0; padding: 5px 15px; font-size: 0.875rem; font-weight: bolder; border-radius: 50px; color: #fff; background: #273144;}

.box_vote div{ position: relative;}
.box_vote img{ width: 100%; border-radius: 20px;}
.box_vote div i{ position: absolute; right: 10px; bottom: 10px; padding: 5px 15px; font-size: 1.25rem; font-weight: bolder; font-style: normal; border-radius: 50px; background: rgba(255,255,255,0.8);}

.box_vote p{ display: block !important; margin: 10px 0 0 0; padding: 1px; background: #ffe6c3; border-radius: 20px;}
.box_vote p span{ flex: 1; display: block; line-height: 60px; font-size: 1.25rem; font-weight: bolder; color: #d73b36; background: #fff; border-radius: 20px; text-align: center;}
.box_vote p a{ display: none; align-items: center; justify-content: center; width: 50%; text-decoration: none; color: #fff; font-size: 0.875rem;}
.box_vote p a b{ margin: 0; padding: 5px 15px; background: #d73b36; border-radius: 50px; color: #fff; font-size: 0.875rem;}
.box_vote p a b:before,.box_vote p a b:after{ display: none;}
.box_vote .note{ margin: 40px 0 0 0; padding: 40px; background: #fff; border-radius: 20px;}

.box_vote u{ display: none !important; margin: 10px 0 0 0; padding: 1px; background: #ffe6c3; border-radius: 20px; text-decoration: none;}
.box_vote u a{ display: flex; align-items: center; justify-content: center; width: 50%; text-decoration: none; color: #fff; font-size: 0.875rem;}
.box_vote u a b{ margin: 0; padding: 5px 15px; background: #d73b36; border-radius: 50px; color: #fff;}
.box_vote u a b::after,.box_vote u a b::before{ display: none;}

.box_vote u label{ position: relative; flex: 1; display: block; font-size: 1.25rem; font-weight: bolder; color: #d73b36; background: #fff; border-radius: 20px; text-align: center;}
.box_vote u label select{ position: relative; line-height: 60px; margin: 0; padding: 0 20px; width: 100%; font-size: 1rem; border-radius: 20px; box-sizing: border-box; color: #d73b36; background: #fff; z-index: 1; cursor: pointer; transition: .2s;}

.box_vote u label img{ position: absolute; top: 50%; right: 21px; width: auto; transform: translate(0, -50%); z-index: 2;}
.box_vote u label span{ position: absolute; top: 50%; left: 21px; transform: translate(0, -50%); color: #000; transition: .5s; z-index: 2; pointer-events: none;}
.box_vote u label.active span{ top:2px; transform: translate(0, 0); font-size: 12px;}
.box_vote u label select:focus{ background: #ffebde;}
.box_vote u label select:focus~span{ top:2px; transform: translate(0, 0); font-size: 12px;}

@media (max-width:768px){
.box_vote .note{ margin: 30px 0 0 0; padding: 40px 30px;}
}
@media (max-width:480px){
.box_vote .note{ padding: 20px 15px;}
}


footer{ background: #1a0121;}