@charset "UTF-8";

*{ font-family: "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif;}
::selection {
	background: #fffce4;
	color: #ff7d9f;
}
html{ margin: 0; padding: 0; background: #fff;}
body{ margin: 0; padding: 0; background: url(../images/main_bg.png) top center 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;}
.cursor_pointer{ cursor: pointer;}

.kv{ position: relative; max-width: 2000px; height: 900px; margin: 0 auto; overflow: hidden; transition: .5s; z-index: 2;}
.kv.kv_short{ height: 400px;}
@media (max-width:1200px){
.kv{ height: 700px;}

}
@media (max-width:1000px){
.kv{ height: 500px;}
}
@media (max-width:768px){
html{ font-size: 12px;}

.kv{ height: 150vw;}
.kv.kv_short{ height: 150vw;}
}

.kv img.index_bg{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0);}
.kv img.logo{ position: absolute; top: 4.11%; left: 2.35%; width: 247px; z-index: 1;}

.kv img.index_character01{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); opacity: 0;}
.kv img.index_character02{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); opacity: 0;}
.kv1 img.index_character01{ animation: 0.5s index_character01 forwards ease-in-out;}
@keyframes index_character01 {
    0%{ left: 40%; opacity: 0;}
    100%{ left: 50%; opacity: 1;}
}
.kv1 img.index_character02{ animation: 0.5s index_character02 forwards ease-in-out;}
@keyframes index_character02 {
    0%{ left: 60%; opacity: 0;}
    100%{ left: 50%; opacity: 1;}
}
.kv img.index_character03{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); opacity: 0;}
.kv img.index_character04{ position: absolute; top: 0; left: 50%; transform: translate(-50%,0); opacity: 0;}
.kv2 img.index_character03{ animation: 0.5s index_character01 forwards ease-in-out;}
.kv2 img.index_character04{ animation: 0.5s index_character02 forwards ease-in-out;}
@media (max-width:1200px){
.kv img.logo{ width: 185px;}

.kv img.index_character01{ height: 100%;}
.kv img.index_character02{ height: 100%;}
.kv img.index_character03{ height: 100%;}
.kv img.index_character04{ height: 100%;}

.kv_short img.index_character01{ height: 700px;}
.kv_short img.index_character02{ height: 700px;}
.kv_short img.index_character03{ height: 700px;}
.kv_short img.index_character04{ height: 700px;}
}
@media (max-width:1000px){
.kv img.logo{ top: 20px; width: 123px;}

.kv_short img.index_character01{ height: 500px;}
.kv_short img.index_character02{ height: 500px;}
.kv_short img.index_character03{ height: 500px;}
.kv_short img.index_character04{ height: 500px;}
}
@media (max-width:768px){
.kv img.logo{ left: calc(50% - 61px);}
.kv img.index_character01{ left: -200%; transform: translate(0,0);}
@keyframes index_character01 {
    0%{ left: -210%; opacity: 0;}
    100%{ left: -200%; opacity: 1;}
}
.kv img.index_character02{ left: -15%; transform: translate(0,0);}
@keyframes index_character02 {
    0%{ left: -5%; opacity: 0;}
    100%{ left: -15%; opacity: 1;}
}
.kv img.index_character03{ left: -140%; transform: translate(0,0);}
.kv img.index_character04{ left: -93%; transform: translate(0,0);}
.kv2 img.index_character03{ animation: 0.5s index_character03 forwards ease-in-out;}
@keyframes index_character03 {
    0%{ left: -130%; opacity: 0;}
    100%{ left: -140%; opacity: 1;}
}
.kv2 img.index_character04{ animation: 0.5s index_character04 forwards ease-in-out;}
@keyframes index_character04 {
    0%{ left: -103%; opacity: 0;}
    100%{ left: -93%; opacity: 1;}
}
.kv_short img.index_character01{ height: 100%;}
.kv_short img.index_character02{ height: 100%;}
.kv_short img.index_character03{ height: 100%;}
.kv_short img.index_character04{ height: 100%;}
}

.kv img.index_face_a01{ position: absolute; top: 44.33%; left: 13%; width: 200px; border-radius: 20px; border: 10px solid #fff; opacity: 0; pointer-events: none; transition: .5s;}
.kv img.index_face_a01_link{ position: absolute; top: 44.33%; left: 13%; width: 200px; border-radius: 20px; border: 10px solid #fff; cursor: pointer; z-index: 1; opacity: 0; transition: .5s; pointer-events: none;}
.kv img.index_face_a01_link:hover+img{ filter: brightness(1.1);}
.kv img.index_face_a02{ position: absolute; top: 17.56%; left: 75.65%; width: 200px; border-radius: 20px; border: 10px solid #fff; opacity: 0; pointer-events: none; transition: .5s;}
.kv img.index_face_a02_link{ position: absolute; top: 17.56%; left: 75.65%; width: 200px; border-radius: 20px; border: 10px solid #fff; cursor: pointer; z-index: 1; opacity: 0; transition: .5s; pointer-events: none;}
.kv img.index_face_a02_link:hover+img{ filter: brightness(1.1);}
.kv img.index_face_a03{ position: absolute; top: 50.22%; left: 67.55%; width: 100px; border-radius: 20px; border: 10px solid #fff; opacity: 0;}
.kv img.index_face_a04{ position: absolute; top: 6.67%; left: 33.4%; width: 160px; border-radius: 20px; border: 10px solid #fff; opacity: 0;}
.kv1 img.index_face_a01{ animation: 0.5s index_face_a01 forwards ease-in-out; animation-delay: .4s;}
.kv1 img.index_face_a01_link{ animation: 0.5s index_face_a01 forwards ease-in-out; animation-delay: .4s; z-index: 2; pointer-events: visible;}
@keyframes index_face_a01 {
    0%{ top: 45.33%; opacity: 0;}
    100%{ top: 44.33%; opacity: 1;}
}
.kv1 img.index_face_a02{ animation: 0.5s index_face_a02 forwards ease-in-out; animation-delay: .3s;}
.kv1 img.index_face_a02_link{ animation: 0.5s index_face_a02 forwards ease-in-out; animation-delay: .3s; z-index: 2; pointer-events: visible;}
@keyframes index_face_a02 {
    0%{ top: 18.56%; opacity: 0;}
    100%{ top: 17.56%; opacity: 1;}
}
.kv1 img.index_face_a03{ animation: 0.5s index_face_a03 forwards ease-in-out; animation-delay: .2s;}
@keyframes index_face_a03 {
    0%{ top: 51.22%; opacity: 0;}
    100%{ top: 50.22%; opacity: 1;}
}
.kv1 img.index_face_a04{ animation: 0.5s index_face_a04 forwards ease-in-out; animation-delay: .2s;}
@keyframes index_face_a04 {
    0%{ top: 7.67%; opacity: 0;}
    100%{ top: 6.67%; opacity: 1;}
}
.kv_short img.index_face_a01,
.kv_short img.index_face_a01_link,
.kv_short img.index_face_a02,
.kv_short img.index_face_a02_link,
.kv_short img.index_face_a03,
.kv_short img.index_face_a04{ display: none;}

.kv img.index_face_b01{ position: absolute; top: 25.33%; left: 10%; width: 200px; border-radius: 20px; border: 10px solid #fff; opacity: 0; pointer-events: none; transition: .5s;}
.kv img.index_face_b01_link{ position: absolute; top: 25.33%; left: 10%; width: 200px; border-radius: 20px; border: 10px solid #fff; cursor: pointer; z-index: 1; opacity: 0; transition: .5s; pointer-events: none;}
.kv img.index_face_b01_link:hover+img{ filter: brightness(1.1);}
.kv img.index_face_b02{ position: absolute; top: 49.56%; left: 75.65%; width: 200px; border-radius: 20px; border: 10px solid #fff; opacity: 0; pointer-events: none; transition: .5s;}
.kv img.index_face_b02_link{ position: absolute; top: 49.56%; left: 75.65%; width: 200px; border-radius: 20px; border: 10px solid #fff; cursor: pointer; z-index: 1; opacity: 0; transition: .5s; pointer-events: none;}
.kv img.index_face_b02_link:hover+img{ filter: brightness(1.1);}
.kv img.index_face_b03{ position: absolute; top: 62.78%; left: 23%; width: 100px; border-radius: 20px; border: 10px solid #fff; opacity: 0;}
.kv img.index_face_b04{ position: absolute; top: 9%; left: 69.7%; width: 160px; border-radius: 20px; border: 10px solid #fff; opacity: 0;}
.kv2 img.index_face_b01{ animation: 0.5s index_face_b01 forwards ease-in-out; animation-delay: .4s;}
.kv2 img.index_face_b01_link{ animation: 0.5s index_face_b01 forwards ease-in-out; animation-delay: .4s; z-index: 2; pointer-events: visible;}
@keyframes index_face_b01 {
    0%{ top: 26.33%; opacity: 0;}
    100%{ top: 25.33%; opacity: 1;}
}
.kv2 img.index_face_b02{ animation: 0.5s index_face_b02 forwards ease-in-out; animation-delay: .3s;}
.kv2 img.index_face_b02_link{ animation: 0.5s index_face_b02 forwards ease-in-out; animation-delay: .3s; z-index: 2; pointer-events: visible;}
@keyframes index_face_b02 {
    0%{ top: 50.56%; opacity: 0;}
    100%{ top: 49.56%; opacity: 1;}
}
.kv2 img.index_face_b03{ animation: 0.5s index_face_b03 forwards ease-in-out; animation-delay: .2s;}
@keyframes index_face_b03 {
    0%{ top: 63.78%; opacity: 0;}
    100%{ top: 62.78%; opacity: 1;}
}
.kv2 img.index_face_b04{ animation: 0.5s index_face_b04 forwards ease-in-out; animation-delay: .2s;}
@keyframes index_face_b04 {
    0%{ top: 10%; opacity: 0;}
    100%{ top: 9%; opacity: 1;}
}
.kv_short img.index_face_b01,
.kv_short img.index_face_b01_link,
.kv_short img.index_face_b02,
.kv_short img.index_face_b02_link,
.kv_short img.index_face_b03,
.kv_short img.index_face_b04{ display: none;}

@media (max-width:1200px){
.kv img.index_face_a01{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_a01_link{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_a02{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_a02_link{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_a03{ width: 75px; border: 5px solid #fff;}
.kv img.index_face_a04{ width: 120px; border: 5px solid #fff;}
.kv img.index_face_b01{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_b01_link{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_b02{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_b02_link{ width: 150px; border: 5px solid #fff;}
.kv img.index_face_b03{ width: 75px; border: 5px solid #fff;}
.kv img.index_face_b04{ width: 120px; border: 5px solid #fff;}
}
@media (max-width:1000px){
.kv img.index_face_a01{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_a01_link{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_a02{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_a02_link{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_a03{ width: 50px; border: 5px solid #fff;}
.kv img.index_face_a04{ width: 80px; border: 5px solid #fff;}
.kv img.index_face_b01{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_b01_link{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_b02{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_b02_link{ width: 100px; border: 5px solid #fff;}
.kv img.index_face_b03{ width: 50px; border: 5px solid #fff;}
.kv img.index_face_b04{ width: 80px; border: 5px solid #fff;}
}
@media (max-width:768px){
.kv img.index_face_a01{ width: 28%; top: 65%; left: 20%; border: 3px solid #fff;}
.kv img.index_face_a01_link{ width: 28%; top: 65%; left: 20%; border: 3px solid #fff;}
.kv1 img.index_face_a01{ animation-delay: .3s;}
.kv1 img.index_face_a01_link{ animation-delay: .3s;}
@keyframes index_face_a01 {
    0%{ top: 75%; opacity: 0;}
    100%{ top: 65%; opacity: 1;}
}
.kv img.index_face_a02{ width: 28%; top: 65%; left: 52%; border: 3px solid #fff;}
.kv img.index_face_a02_link{ width: 28%; top: 65%; left: 52%; border: 3px solid #fff;}
.kv1 img.index_face_a02{ animation-delay: .4s;}
.kv1 img.index_face_a02_link{ animation-delay: .4s;}
@keyframes index_face_a02 {
    0%{ top: 75%; opacity: 0;}
    100%{ top: 65%; opacity: 1;}
}
.kv img.index_face_a03{ display: none;}
.kv img.index_face_a04{ display: none;}

.kv_short img.index_face_a01,
.kv_short img.index_face_a01_link,
.kv_short img.index_face_a02,
.kv_short img.index_face_a02_link{ display: block;}

.kv img.index_face_b01{ width: 28%; top: 65%; left: 20%; border: 3px solid #fff;}
.kv img.index_face_b01_link{ width: 28%; top: 65%; left: 20%; border: 3px solid #fff;}
.kv2 img.index_face_b01{ animation-delay: .3s;}
.kv2 img.index_face_b01_link{ animation-delay: .3s;}
@keyframes index_face_b01 {
    0%{ top: 75%; opacity: 0;}
    100%{ top: 65%; opacity: 1;}
}
.kv img.index_face_b02{ width: 28%; top: 65%; left: 52%; border: 3px solid #fff;}
.kv img.index_face_b02_link{ width: 28%; top: 65%; left: 52%; border: 3px solid #fff;}
.kv2 img.index_face_b02{ animation-delay: .4s;}
.kv2 img.index_face_b02_link{ animation-delay: .4s;}
@keyframes index_face_b02 {
    0%{ top: 75%; opacity: 0;}
    100%{ top: 65%; opacity: 1;}
}
.kv img.index_face_b03{ display: none;}
.kv img.index_face_b04{ display: none;}

.kv_short img.index_face_b01,
.kv_short img.index_face_b01_link,
.kv_short img.index_face_b02,
.kv_short img.index_face_b02_link{ display: block;}
}

.colorful{ display: flex; flex-direction: column; position: absolute; top: 0; left: 0; width: 100%; height: 100%; gap: 10px;}
.colorful span{ height: 20%; width: 0%; transition: .5s;}
.colorful span:nth-of-type(1){ background: rgba(236,196,211,0.5); margin: 0 100% 0 0;}
.colorful span:nth-of-type(2){ background: rgba(255,223,189,0.5); margin: 0 100% 0 0;}
.colorful span:nth-of-type(3){ background: rgba(196,199,236,0.5); margin: 0 0 0 100%;}
.colorful span:nth-of-type(4){ background: rgba(255,245,188,0.5); margin: 0 0 0 100%;}
.colorful span:nth-of-type(5){ background: rgba(177,243,189,0.5); margin: 0 100% 0 0;}
.kv1 .colorful span:nth-of-type(1){ margin: 0 15% 0 0; width: 85%;}
.kv1 .colorful span:nth-of-type(2){ margin: 0 30% 0 0; width: 70%;}
.kv1 .colorful span:nth-of-type(3){ margin: 0 0 0 30%; width: 70%;}
.kv1 .colorful span:nth-of-type(4){ margin: 0 0 0 15%; width: 85%;}
.kv1 .colorful span:nth-of-type(5){ margin: 0 5% 0 0; width: 95%;}
.kv2 .colorful span:nth-of-type(1){ margin: 0 15% 0 0; width: 85%;}
.kv2 .colorful span:nth-of-type(2){ margin: 0 30% 0 0; width: 70%;}
.kv2 .colorful span:nth-of-type(3){ margin: 0 0 0 30%; width: 70%;}
.kv2 .colorful span:nth-of-type(4){ margin: 0 0 0 15%; width: 85%;}
.kv2 .colorful span:nth-of-type(5){ margin: 0 5% 0 0; width: 95%;}

.kv .square01{ position: absolute; top: 29.22%; left: 2.35%; width: 1.5%; height: 6.66%; border-radius: 5px; background: #fff;}
.kv .square02{ position: absolute; top: 86.89%; left: 9.6%; width: 3%; height: 3.33%; border-radius: 5px; background: #fff;}
.kv .square03{ position: absolute; top: 77.1%; left: 92%; width: 3%; height: 6.66%; border-radius: 5px; background: #fff;}
.kv_short .square01,
.kv_short .square02,
.kv_short .square03{ display: none;}

.kv .slogan{ display: flex; flex-wrap: wrap; position: absolute; top: 12.22%; left: calc(50% - 210px); width: 420px; z-index: 5;}
.kv .slogan img.slogan_01{ width: 50%; margin: 0 0 10px; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));}
.kv .slogan img.slogan_02{ width: 50%; margin: 10px 0 0; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));}
.kv .slogan img.slogan_03{ width: 100%; margin: 15px 0 0 0; filter: drop-shadow(0 10px 0 rgba(0, 0, 0, 0.2));}
.kv .slogan img.star_01{ position: absolute; top: 22%; left: 104.3%; width: 9.76%; animation: 3s star_01 infinite linear;}
@keyframes star_01 {
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(-359deg);}
}
.kv .slogan img.star_02{ position: absolute; top: 64%; right: 104.3%; width: 17.86%; animation: 3s star_02 infinite linear;}
@keyframes star_02 {
    0%{ transform: rotate(0deg);}
    100%{ transform: rotate(359deg);}
}
.kv .slogan img.star_03{ position: absolute; top: 84%; left: 56.33%; width: 12.38%; animation: 3s star_01 infinite linear;}
.kv .slogan img.star_04{ position: absolute; top: 86%; left: 58.5%; width: 8.1%; animation: 3s star_02 infinite linear;}
.kv_short .slogan{ display: none;}

@media (max-width:1200px){
.kv .slogan{ width: 315px; left: calc(50% - 157px);}
}
@media (max-width:1000px){
.kv .slogan{ width: 210px; left: calc(50% - 105px);}
}
@media (max-width:768px){
.kv .slogan{ width: 50%; top: 20%; left: 25%;}
.kv_short .slogan{ display: flex;}
}

.kv .fst_menu{ display: flex; justify-content: space-evenly; align-items: center; position: absolute; bottom: 12%; left: calc(50% - 350px); width: 700px; max-width: 100%; height: 80px; border-radius: 50px; box-shadow: 0 0 0 1px #dbffd6 ,0 0 0 10px #fff; background: linear-gradient(#f0ffee , #b7faf1); z-index: 5;}
.kv .fst_menu:after{ position: absolute; top: 50%; right: 4%; transform: translate(0, -50%); display: block; content: ""; width: 28px; height: 28px; background: url(../images/icon_diamond.png) top center no-repeat;}
.kv .fst_menu:before{ position: absolute; top: 50%; left: 4%; transform: translate(0, -50%); display: block; content: ""; width: 28px; height: 28px; background: url(../images/icon_diamond.png) top center no-repeat;}
.kv .fst_menu a{ display: flex; justify-content: center; align-items: center; position: relative; margin: 0; font-size: 1.25rem; font-weight: bolder; color: #757fff; text-decoration: none;}
.kv .fst_menu a span{ filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 1));}
.kv .fst_menu a i{ position: absolute; display: block; content: ""; width: 200px; height: 200px; background: #efeaff; transform: scale(0); border-radius: 50%;}
.kv .fst_menu a:hover i{ animation: 0.5s a_01 forwards ease-in-out;}
@keyframes a_01 {
    0%{ transform: scale(0);}
    80%{ transform: scale(1);}
    100%{ transform: scale(0.9);}
}

.kv .fst_menu a>span{ position: relative; z-index: 1;}
.kv .fst_menu a:hover i span{ display: block; width: 100%; height: 100%; border: 25px solid #fff; border-radius: 50%; box-sizing: border-box; transform: scale(0); animation: 0.5s a_02 forwards ease-in-out;}
@keyframes a_02 {
    0%{ transform: scale(0);}
    100%{ transform: scale(0.8);}
}
.kv_short .fst_menu{ bottom: 50%;}
@media (max-width:1200px){
.kv .fst_menu{ height: 70px;}
}
@media (max-width:1000px){
.kv .fst_menu{ height: 60px;}
}
@media (max-width:768px){
.kv .fst_menu{ width: 90%; height: 40px; left: 5%; bottom: 20px; box-shadow: 0 0 0 1px #dbffd6 ,0 0 0 5px #fff;}
.kv .fst_menu:after{ width: 14px; height: 14px; background-size: contain; right: 3px;}
.kv .fst_menu:before{ width: 14px; height: 14px; background-size: contain; left: 3px;}
.kv .fst_menu a{ font-size: 0.875rem;}
.kv .fst_menu a i{ width: 80px; height: 80px;}
}

.social{ position: fixed; top: 80px; right: 50px; width: 80px; z-index: 5;}
.social a{ position: relative; display: block;}
.social a i{ position: absolute; top: -10px; left: 10px; display: block; content: ""; width: 100%; height: 100%; border-radius: 10px;}
.social a:nth-of-type(1) i{ background: linear-gradient(45deg, #7dd9fa, #cffcff);}
.social a:nth-of-type(2) i{ background: linear-gradient(45deg, #ed9ec5, #ffdde4);}
.social a:nth-of-type(3) i{ background: linear-gradient(45deg, #c7f3cd, #e9fbbf);}
.social a span{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; border-radius: 10px; text-align: center; border: 5px solid #fff; box-sizing: border-box; z-index: 1;}
.social a img{ position: relative; width: 100%; z-index: 1;}
.social a+a{ margin: 1.5vw 0 0 0;}
@media (max-width:1200px){
.social{ right: 30px; width: 60px;}
}
@media (max-width:1000px){
.social{ top: 55px; right: 20px; width: 40px;}
.social a i{ top: -5px; left: 5px;}
.social a span{ border: 3px solid #fff;}
}
@media (max-width:768px){
.social{ top: 20px;}
}


.main{ position: relative; z-index: 3;}
.main_bg{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1;}
.main_bg .main_face_01{ position: absolute; bottom: 10%; right: 80%; border-radius: 20px; border: 10px solid #fff;}
.main_bg .main_face_02{ position: absolute; top: 10%; left: 80%; border-radius: 20px; border: 10px solid #fff;}
.main_bg .main_face_03{ position: absolute; bottom: 5%; left: 85%; border-radius: 20px; border: 10px solid #fff;}
.main_bg .square01{ position: absolute; top: 29.22%; left: 2.35%; width: 1.5%; height: 6.66%; border-radius: 5px; background: #f7ffe6;}
.main_bg .square02{ position: absolute; top: 86.89%; left: 9.6%; width: 3%; height: 3.33%; border-radius: 5px; background: #f7ffe6;}
.main_bg .square03{ position: absolute; top: 77.1%; left: 92%; width: 3%; height: 6.66%; border-radius: 5px; background: #f7ffe6;}
.main_bg .square04{ position: absolute; top: 4%; left: 80%; width: 1.5%; height: 6.66%; border-radius: 5px; background: #f7ffe6;}
.main_bg .square05{ position: absolute; top: 58%; left: 72%; width: 3%; height: 3.33%; border-radius: 5px; background: #f7ffe6;}
.main_bg .square06{ position: absolute; top: 12%; left: 23%; width: 3%; height: 6.66%; border-radius: 5px; background: #f7ffe6;}


.event{ border-top: 5px solid #d6fdef; text-align: center;}
.snd_menu{ position: relative; display: flex; justify-content: space-evenly; align-items: center; max-width: 1200px; height: 60px; margin: -30px auto 50px; border-radius: 50px; box-shadow: 0 0 0 1px #81f3e3 ,0 0 0 5px #d6fdef; background: linear-gradient(#fff , #eefaff);}
.snd_menu a{ position: relative; display: flex; font-size: 1.25rem; font-weight: bolder; color: #787878; text-decoration: none;}
.snd_menu a span{ position: relative; padding: 2px 10px; border-radius: 50px; z-index: 1; transition: .5s;}
.snd_menu a i{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.snd_menu a i:before{ position: absolute; left: 0px; top: 0; display: block; content: ""; width: 31px; height: 31px; border-radius: 50px; background: transparent; transition: .5s;}
.snd_menu a i::after{ position: absolute; right: 0px; top: 0; display: block; content: ""; width: 31px; height: 31px; border-radius: 50px; background: transparent; transition: .5s;}
.snd_menu a:hover span,.snd_menu a.active span{ color: #30bfb7; background: #b8f5e1;}
.snd_menu a:hover i:before,.snd_menu a.active i:before{ position: absolute; left: -10px; top: 0; display: block; content: ""; width: 31px; height: 31px; border-radius: 50px; background: #dbfff3; transition: .5s;}
.snd_menu a:hover i:after,.snd_menu a.active i:after{ position: absolute; right: -10px; top: 0; display: block; content: ""; width: 31px; height: 31px; border-radius: 50px; background: #dbfff3; transition: .5s;}
@media (max-width:1200px){
.snd_menu{ max-width: 95%;}
}
@media (max-width:768px){
.snd_menu{ margin: 20px auto; height: 40px;}
.snd_menu a{ font-size: 0.875rem;}
.snd_menu a span{ padding: 2px;}
.snd_menu a i:before{ display: none;}
.snd_menu a i::after{ display: none;}
.snd_menu a:hover i:before,.snd_menu a.active i:before{ display: none;}
.snd_menu a:hover i:after,.snd_menu a.active i:after{ display: none;}
}


.info_title{ display: inline-block; margin: 50px 0 0;}
.info_title img{ max-width: 95%; margin: 0 auto;}
.info_title span{ display: block; max-width: 95%; margin: 10px auto 0; background: #b889ff; font-size: 1rem; font-weight: bolder; color: #fff;}
.info_title.green span{ background: #67d9d2;}

.info_container{ position: relative; width: 800px; max-width: 95%; margin: 30px auto 10px; padding: 50px 30px; border-radius: 20px; background: #fbf4ff; color: #3c3c3c; font-size: 1rem; font-weight: bolder; box-sizing: border-box;}
.info_container.green{ background: #f4fffb;}
.info_container:after{ position: absolute; bottom: 100%; left: 50%; transform: translate(-50%,0); display: block; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 15px 15px 15px; border-color: transparent transparent #f2ddff transparent;}
.info_container.green:after{ border-color: transparent transparent #dbfff3 transparent;}
.info_container+.info_container{ margin: 10px auto;}
.info_container+.info_container:after{ display: none;}

.info_container article{ line-height: 1.6rem;}
.info_container article:not(:nth-of-type(1)){ margin: 30px 0 0 0;}
.info_container article h2{ display: flex; margin: 0 0 30px; padding: 10px; background: #fff; border-radius: 10px; font-size: 1.25rem;}
.info_container article h2 img{ margin: 0 10px 0 0; border-radius: 10px;}
.info_container article h2 p{ display: flex; flex-direction: column; justify-content: center; flex: 1; margin: 0; padding: 0 20px; background: #fbf4ff; border-radius: 10px; color: #8c41fd;}
.info_container.green article h2 p{ background: #f4fffb; color: #30bfb7;}
.info_container.green article h3{ color: #30bfb7; border: 1px solid #30bfb7;}
.info_container article ul{ margin: 0; padding: 0; list-style: none;}
.info_container article ul li{ position: relative; margin: 0; padding: 0 0 0 36px; counter-increment:li; text-align: left;}
.info_container article ul li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); padding: 0 0 0 10px; color: #b889ff; font-style: italic;}
.info_container article ul li+li{ margin: 15px 0 0 0;}
.info_container article ul li span{ background: #f2ddff;}
.info_container article i{ display: inline-block; margin: 10px 0 0 0; padding: 10px; color: #ff64b4; background: rgba(255,255,255,0.5); font-style: normal; font-size: 0.875rem; border: 1px dashed #f2ddff;}
.info_container.green article i{ border: 1px solid #dbfff3;}
.info_container article b{ display: block; margin: 10px 0 0 0; padding: 10px; color: #ff64b4; background: rgba(255,255,255,0.5); font-size: 0.875rem; border: 1px dashed #f2ddff;}
.info_container.green article b{ border: 1px dashed #81f3e3;}
.info_container h4{ margin: 0; text-align: left;}
.info_container h4:not(:nth-of-type(1)){ margin: 30px 0 0 0;}
.info_container h4 span{ display: inline-block; padding: 0 0 5px; color: #8c41fd; border-bottom: 4px solid #8c41fd;}
.info_container.green h4 span{ color: #30bfb7; border-bottom: 4px solid #30bfb7;}
.info_container h5{ margin: 30px 0 10px; text-align: left; font-size: 1rem;}
.info_container h5 span{ display: inline-block; padding: 5px 10px; background: #f2ddff; border-left: 4px solid #8c41fd; color: #8c41fd; font-size: 0.875rem;}
.info_container.green h5 span{ background: #dbfff3; border-left: 4px solid #30bfb7; color: #30bfb7;}

.info_container p{ text-align: left; line-height: 1.6rem;}
.info_container p span{ display: block; margin: 10px 0 0 0; color: #ff64b4; font-size: 0.875rem; text-align: left;}
.info_container b{ display: block; margin: 10px 0 0 0; padding: 10px; color: #ff64b4; background: rgba(255,255,255,0.5); font-size: 0.875rem; border: 1px dashed #f2ddff;}
.info_container.green b{ border: 1px dashed #aff5dd;}
.info_container>img{ max-width: 100%; margin: 20px 0 0 0; border: 10px solid #fff; box-sizing: border-box;}

.info_container table{ margin: 10px 0 0 0; width: 100%; border: 1px solid #eccfff; border-collapse: collapse; border-spacing: 0;}
.info_container table tr{ background: #f2ddff;}
.info_container table tr:nth-of-type(even){ background: #fbf4ff;}
.info_container table tr+tr{ border-top: 1px solid #eccfff;}
.info_container table td{ padding: 10px;}
.info_container table td+td{ border-left: 1px solid #eccfff; text-align: left;}
.info_container table td:nth-of-type(1){ width: 150px; white-space: nowrap;}
.info_container table td span{ background: #f2ddff;}
.info_container table.style2+.style2{ margin: 1px 0 0 0;}
.info_container table.style2 tr:nth-of-type(3){ background: rgba(255,255,255,0.5);}

.info_container.green table{ border: 1px solid #aff5dd;}
.info_container.green table tr{ background: #dbfff3;}
.info_container.green table tr:nth-of-type(even){ background: #f5fffb;}
.info_container.green table tr+tr{ border-top: 1px solid #aff5dd;}
.info_container.green table td+td{ border-left: 1px solid #aff5dd;}

.info_container ol{ display: flex; margin: 30px 0 0 0; padding: 0; list-style: none;}
.info_container .toggle_box ol{ margin: 10px 0 0 0;}
.info_container ol+ol{ margin: 10px 0 0 0;}
.info_container ol li{ display: flex; align-items: center; padding: 10px 20px; border: 1px solid #f2ddff; background: #f2ddff; color: #8c41fd;}
.info_container.green ol li{ border: 1px solid #dbfff3; background: #dbfff3;}
.info_container ol li+li{ display: block; flex: 1; margin: 0 0 0 10px; color: #3c3c3c;}

.info_container ol.even li{ background: #fff;}
.info_container.green ol.even li{ background: #fff;}
.info_container ol li span{ display: inline-block; margin: 0 0 0 5px; padding: 2px 10px; color: #ff64b4; background: #fff;}


.info_container ol.gift_list li{ padding: 5px 30px; background: #fff;}

.info_container ol.gift_list li+li{ display: flex; justify-content: space-between; padding: 5px 20px; background: #f2ddff;}
.info_container ol.gift_list.even li+li{ background: #fff;}
.info_container.green ol.gift_list li+li{ background: #dbfff3;}
.info_container.green ol.gift_list.even li+li{ background: #fff;}
.info_container ol.gift_list li i{ width: 30px; line-height: 30px; background: #ffffdb; color: #ed9ec5; font-style: normal; cursor: pointer;}

.note_container ul{ margin: 0; padding: 0; font-size: 1rem; font-weight: bolder; list-style: none;}
.note_container li{ position: relative; margin: 0; padding: 0 0 0 36px; counter-increment:li; text-align: left;}
.note_container li::before{ position: absolute; left: 0; display: inline-block; content: counter(li); padding: 0 0 0 10px; color: #b889ff; font-style: italic;}
.note_container li+li{ margin: 15px 0 0 0;}
.note_container li span{ background: #f2ddff;}
.note_container li a{ color: #8c41fd; text-decoration: none;}
.note_container li b{ display: block; margin: 10px 0 0 0; padding: 10px; color: #ff64b4; background: rgba(255,255,255,0.5); font-size: 0.875rem; border: 1px dashed #f2ddff;}

@media (max-width:768px){
.info_title{ margin: 30px 0 0;}

.info_container{ padding: 30px 20px;}
.info_container article{}
.info_container article h2{ margin: 0 0 20px; padding: 3px;}
.info_container article h2 img{ width: 70px; margin: 0 3px 0 0;}
.info_container article h2 p{ padding: 10px;}
.info_container article h2 p span{ margin: 0;}
.info_container article h3{ margin: 0 0 20px;}
.info_container h4:not(:nth-of-type(1)){ margin: 20px 0 0 0;}
.info_container h5{ margin: 20px 0 10px;}

.info_container table td:nth-of-type(1){ width: 60px;}
.info_container table.style2 tr:nth-of-type(1) td{ width: 80px;}
.info_container table img{ width: 100%;}


.info_container ol{ margin: 20px 0 0 0;}
.info_container ol+ol{ margin: 5px 0 0 0;}
.info_container ol li{ padding: 7px 10px;}
.info_container ol li+li{ margin: 0 0 0 5px;}

.info_container ol.gift_list li{ padding: 3px 13px;}
.info_container ol.gift_list li+li{ padding: 3px 10px;}


}

.info_container .toggle_info { height: 0; transition: 0.3s ease; overflow: hidden;}
.info_container .toggle_info .gift_note{ margin: 10px 0 0 0; padding: 20px; line-height: 1.8rem; border: 1px solid #f2ddff; background: #fff; text-align: left;}
.info_container.green .toggle_info .gift_note{ border: 1px solid #dbfff3;}
.info_container .toggle_info .gift_note span{ color: #ff64b4;}
.info_container .toggle_info .gift_note img{ max-width: 100%;}
.info_container .toggle_info .gift_note hr{ border: 1px dashed #eccfff;}

.note{ background: #fafafa; margin: 50px 0 0; padding: 50px 0;}
@media (max-width:768px){
.note .info_title{ margin: 0;}
}

form{ margin: 30px 0 0;}
form a.main_btn{ display: inline-block; padding: 30px 100px; border-radius: 50px; border: 1px solid #30bfb7; font-size: 1.25rem; color: #30bfb7; background: linear-gradient(#fff , #eefaff); text-decoration: none; transition: .5s;}
form a.main_btn:hover{ background: linear-gradient(#f0ffee , #b7faf1);}
form span.highlight{ display: inline-block; margin: 0 5px; padding: 2px 10px; color: #ff64b4; background: #fff;}

form label{ display: block; position: relative; width: 100%; margin: 30px 0 0 0; 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: 50px; 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: 50px; box-sizing: border-box; color: #d73b36; background: #fff; z-index: 1; cursor: pointer; transition: .2s;}
form label input:focus,form 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: 0.75rem;}
form label+label{ margin: 20px 0 0 0;}
form label:nth-last-of-type(1){ margin: 20px 0 30px;}

form .address{ display: flex; margin: 20px 0; gap: 10px;}
form .address label{ margin: 0;}
form .address+label{ margin: 20px 0 0;}

form .phone{ display: flex; margin: 20px 0; gap: 10px;}
form .phone label{ margin: 0;}
form .phone label:nth-of-type(1){ flex: 1;}
form .phone label:nth-of-type(2){ flex: 2;}

form .coins{ display: flex; gap: 10px;}
form .coins p{ display: flex; justify-content: center; align-items: center; flex: 1; margin: 0; height: 70px; border-radius: 10px; background: url(../images/coins_bg01.png) left no-repeat #dbfff3; background-size: contain; color: #30bfb7;}
form .coins p:nth-of-type(2){ background: url(../images/coins_bg02.png) right no-repeat #feebef; background-size: contain; color: #ff4f74;}

.member a{ display: inline-block; margin: 20px 0 0; padding: 2px 10px; color: #ff64b4; background: #fff; font-size: 0.875rem; text-decoration: none;}
@media (max-width:768px){
form{ margin: 20px 0 0;}
form a.main_btn{ padding: 0; width: 100%; line-height: 48px; font-size: 1rem;}
form label{ margin: 20px 0 0 0; }
form label+label{ margin: 10px 0 0 0;}
form label:nth-last-of-type(1){ margin: 10px 0;}

form .address{ margin: 10px 0; gap: 5px;}
form .address label{ margin: 0;}
form .address+label{ margin: 10px 0 0;}

form .phone{ margin: 10px 0; gap: 5px;}
form .phone label{ margin: 0;}

form .coins{ flex-direction: column;}
form .coins p{ min-height: 50px;}
}


.overlay_filter{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; backdrop-filter: blur(5px); z-index: 10;}
.overlay_white{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255,255,255,0.8); z-index: 11; cursor: pointer;}
.lightbox{ display: flex; flex-direction: column; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 1200px; max-width: 95vw; max-height: 80vh; background: #f4fffb; border: 3px solid #b7faf1; border-radius: 20px; font-size: 1rem; font-weight: bolder; z-index: 12;}
.lightbox .top_bar{ display: flex; justify-content: space-between; padding: 10px; background: #b7faf1; color: #30bfb7; border-radius: 15px 15px 0 0;}
.lightbox .top_bar i{ display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; background: #fff; border-radius: 50px; cursor: pointer; transition: .3s;}
.lightbox .top_bar i:hover{ transform: scale(1.5);}
.lightbox .top_bar i span{ width: 12px; height: 3px; border-radius: 50px; background: #30bfb7;}
.lightbox .lightbox_main{ flex: 1; margin: 10px; padding: 20px 30px; background: #fff; overflow-y: auto; border-radius: 20px;}
.lightbox .lightbox_main::-webkit-scrollbar { width: 20px; background-color: #f4fffb;}
.lightbox .lightbox_main::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #b7faf1;}
.lightbox .lightbox_face_01{ position: absolute; right: -80px; top: 25%; border-radius: 10px;}
.lightbox .lightbox_face_02{ position: absolute; left: -80px; bottom: 15%; border-radius: 10px;}
.lightbox .square01{ position: absolute; width: 30px; height: 30px; right: -100px; bottom: 30%; border-radius: 10px; background: #b7faf1;}
.lightbox .square02{ position: absolute; width: 30px; height: 30px; left: -60px; bottom: 50%; border-radius: 10px; background: #b7faf1;}

.lightbox.lightbox_3c_1 .lightbox_main img{ width: 600px; max-width: 100%; margin: 0 auto;}
.lightbox .lightbox_main .item_info{ width: 600px; max-width: 100%; margin: 0 auto; padding: 20px; border: 1px solid #eccfff; border-radius: 10px; box-sizing: border-box;}
.lightbox .lightbox_main .item_info+.item_info{ margin: 20px auto 0;}
.lightbox .lightbox_main .item_info hr{ border: 1px dashed #eccfff;}
.lightbox .lightbox_main .item_info span{ display: block; padding: 10px; background: #fbf4ff; border-radius: 10px; box-sizing: border-box;}
.lightbox .lightbox_main .item_info p{ margin: 0 0 15px;}
@media (max-width:1600px){
.lightbox .lightbox_face_01{ right: -55px;}
}
@media (max-width:768px){
.lightbox{ max-height: 85vh;}
.lightbox .lightbox_face_01,
.lightbox .lightbox_face_02,
.lightbox .square01,
.lightbox .square02{ display: none;}
.lightbox .lightbox_main{ padding: 15px;}
}


.lightbox_main{ color: #3c3c3c;}
.lightbox_main h2{ margin: 0 0 30px; padding: 10px; font-size: 1.25rem; text-align: center; color: #8c41fd; border: 1px solid #b889ff;}
.lightbox_main .column{ display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 10px;}
.lightbox_main .column img{ width: calc(25% - 8px);}
.lightbox_main .column div{ padding: 10px; width: calc(20% - 8px); background: #dbfff3; border-radius: 10px; box-sizing: border-box;}

.lightbox_main .capsule img{ margin: 0 auto; max-width: 100%;}

.lightbox_main article{ margin: 20px 0 30px 0; padding: 20px; text-align: center; background: #f4fffb;}
.lightbox_main article .column{ align-items: normal;}
.lightbox_main article i{ display: block; margin: 10px 0 0 0; padding: 10px; color: #ff64b4; background: #fff; font-style: normal; border-radius: 10px; border: 1px solid #dbfff3;}

.lightbox_main ul{ margin: 0; padding: 0; border: 1px solid #dbfff3; list-style: none;}
.lightbox_main ul li{ display: flex; flex-wrap: wrap; padding: 20px 0;}
.lightbox_main ul li+li{ border-top: 1px solid #dbfff3;}
.lightbox_main ul li:nth-child(odd){ background: #fafafa;}
.lightbox_main ul li:first-child{ padding: 10px 0; background: #f4fffb; color: #30bfb7;}
.lightbox_main ul li:first-child i{ border-right: 1px solid #30bfb7;}
.lightbox_main ul li:first-child b{ border-right: 1px solid #30bfb7;}
.lightbox_main ul li:first-child p{ text-align: center;}
.lightbox_main ul li i{ display: flex; align-items: center; justify-content: center; width: 100px; font-style: normal; border-right: 1px solid #dbfff3;}
.lightbox_main ul li b{ display: flex; align-items: center; justify-content: center; width: 150px; border-right: 1px solid #dbfff3;}
.lightbox_main ul li p{ flex: 1; margin: 0; padding: 0 20px;}
.lightbox_main ul li p span{ display: inline-block; background: #f4fffb; margin: 0 0 5px; padding: 5px 10px; border-radius: 10px;}
.lightbox_main ul li:nth-child(odd) p span{ background: #fff;}

@media (max-width:1200px){
.lightbox_main .column img{ width: calc(33.3% - 7px);}
.lightbox_main .column div{ width: calc(33.3% - 7px);}
}
@media (max-width:768px){
.lightbox_main .column img{ width: calc(50% - 5px);}
.lightbox_main .column div{ width: calc(50% - 5px);}

.lightbox_main ul li i{ width: 60px;}
.lightbox_main ul li b{ width: 100px;}

}
@media (max-width:480px){
.lightbox_main .column img{ width: 100%;}
.lightbox_main .column div{ width: 100%;}

.lightbox_main article{ padding: 10px;}

.lightbox_main ul{ border: 0;}
.lightbox_main ul li+li{ margin: 10px 0 0; padding: 0; border: 1px solid #dbfff3;}
.lightbox_main ul li:first-child{ display: none;}
.lightbox_main ul li i{ width: 50%; border: 0; background: #dbfff3;}
.lightbox_main ul li i:before{ display: block; content: "需求等級："; border: 0;}
.lightbox_main ul li b{ order: -1; width: 50%; padding: 10px 0; border-right: 1px solid #fff; background: #dbfff3; box-sizing: border-box;}
.lightbox_main ul li p{ flex: auto; width: 100%; padding: 10px;}
}


.redeem{ margin: 30px 0 0 0; padding: 10px; background: #fff;}
article .redeem b{ margin: 0;}
.redeem dl{ display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0;}
.redeem dl dt,.redeem dl dd{ margin: 0; padding: 1px; width: calc((100% - 30px) / 4); box-sizing: border-box;}
.redeem dl dt{ display: flex; flex-direction: column; background: url(../images/main_face_06.jpg) no-repeat; background: #dbfff3; background-size: cover;}
.redeem dl dt:nth-of-type(even){ background: url(../images/main_face_07.jpg) no-repeat; background: #feebef; background-size: cover;}
.redeem dl dt p{ margin: 0; padding: 10px; background: rgba(255,255,255,0.8); text-align: center; color: #30bfb7;}
.redeem dl dt.red p{ color: #ff4f74;}
.redeem dl dt q{display: flex; align-items: center; justify-content: center; flex: 1;}
.redeem dl dt q::before{display: none;}
.redeem dl dt q u{ position: relative; width: 70%;}
.redeem dl dt q u img{ width: 100%; visibility: hidden;}
.redeem dl dt q u span{ display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(255,255,255,0.8); border: 1px dashed #30bfb7; color: #30bfb7; font-size: 3rem;}
.redeem dl dt.red q u span{ border: 1px dashed #ff4f74; color: #ff4f74;}

.redeem dl dd{ position: relative; display: flex; flex-direction: column; background: #dbfff3;}
.redeem dl dd.red{ background: #feebef;}
.redeem dl dd img{ width: 100%;}
.redeem dl dd p{ flex: 1; margin: 10px 5px; text-align: center;}
.redeem dl dd a{ display: block; margin: 0 10px 10px; padding: 5px 0; background: #fff; text-decoration: none; color: #30bfb7; font-size: 0.875rem; border-radius: 50px; border: 1px solid #b7faf1;}
.redeem dl dd a:hover{ background: #b7faf1;}
.redeem dl dd a.unavailable{ background: #fafafa; border: 1px solid #fafafa; color: #787878; cursor: default;}
.redeem dl dd.red a{ border: 1px solid #ffd0da; color: #ff4f74;}
.redeem dl dd.red a:hover{ background: #ffd0da;}
.redeem dl dd.red a.unavailable{ background: #fafafa; border: 1px solid #fafafa; color: #787878; cursor: default;}
.redeem dl dd i{ position: absolute; top: 3px; right: 3px; margin: 0; padding: 0; width: 30px; line-height: 30px; background: #dbfff3; color: #30bfb7; font-style: normal; border: 0 !important;}
.redeem dl dd.green i{ background: #dbfff3; color: #30bfb7;}
.redeem dl dd.red i{ background: #feebef; color: #ff4f74;}


.redeem dl.second dt{ width: calc((100% - 30px) / 4); background: url(../images/main_face_08.jpg) no-repeat; background: #dbfff3; background-size: cover;}
.redeem dl.second dt:nth-of-type(even){ background: url(../images/main_face_09.jpg) no-repeat; background: #feebef; background-size: cover;}
.redeem dl.second dd{ width: calc(((100% - 30px) / 4) * 3 + 20px);}

@media (max-width:768px){
.redeem{ margin: 20px 0 0 0;}
.redeem dl dt,.redeem dl dd{ width: calc((100% - 10px) / 2);}

.redeem dl.second dt{ width: calc((100% - 30px) / 4); background: url(../images/main_face_10.jpg) no-repeat center; background-size: cover;}
.redeem dl.second dt:nth-of-type(even){ background: url(../images/main_face_11.jpg) no-repeat center; background-size: cover;}
.redeem dl.second dt{ width: 100%;}
.redeem dl.second dd{ width: 100%; margin: -10px 0 0 0;}
.redeem dl.second dt q{}
.redeem dl.second dt q u{ width: 30%; margin: 10px 0;}
}


.job_tabs{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 0 30px;}
.job_tabs>div{ position: relative; align-items: center; display: flex; border-radius: 10px; overflow: hidden; cursor: pointer;}
.job_tabs>div::after{ position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; border: 1px solid transparent; border-radius: 10px; box-sizing: border-box;}
.job_tabs>div:hover::after{ border: 1px solid #f2ddff;}
.job_tabs>div.active::after{ border: 1px solid #f2ddff;}
.job_tabs>div img{ max-width: 100%;}
.job_tabs>div img:nth-of-type(2){ position: absolute; bottom: 0; left: 0;}
.job_tabs>div p{ position: absolute; width: 100%; margin: 0; text-align: center; color: #8c41fd; font-size: 1.25rem;}
.job_tabs>div p span{ margin: 0; color: #8c41fd; text-align: center;}

.job_step{ display: flex; align-items: center; justify-content: space-evenly; padding: 10px; border-radius: 10px; background: #fff;}
.job_step+.job_step{ margin: 10px 0 0 0;}
.job_step>div{ background: #fbf4ff; border-radius: 10px;}
.job_step>div img{ margin: 0 auto; max-width: 100%;}
.job_step>div span{ display: inline-block; margin: 0 5px 10px; padding: 5px 15px; border-radius: 50px; background: #f2ddff;}
.job_step>div span.active{ color: #8c41fd;}

.job_box .film{ position: relative; margin: 10px 0 20px; background: #fff; padding: 10px;}
.job_box .film video{ width: 100%; margin: 0; border: 5px solid #fbf4ff; box-sizing: border-box;}
.job_box .film img{ position: absolute; top: 0; left: 0; padding: 15px; width: 100%; height: 100%; box-sizing: border-box; cursor: pointer; transition: .5s;}
.job_box .film img:hover{ filter: brightness(1.1);}

@media (max-width:842px){
.job_tabs>div{ width: 16%;}
}

@media (max-width:768px){
.job_tabs>div{ width: 16%;}
.job_tabs>div p{ font-size: 0.875rem;}
.job_tabs>div p span{ display: none;}

.job_step{ flex-direction: column;}
.job_step>img{ margin: 5px 0; transform: rotate(90deg);}
.job_step>div{ width: 100%; padding: 0 5px; background: #fbf4ff; border-radius: 10px;}
.job_step>div img{ display: none;}
.job_step>div span{ margin: 0; padding: 3px 5px; width: 100%; font-size: 0.875rem; box-sizing: border-box;}

.job_box video{ margin: 10px 0;}
}
    

.skill_renew{ position: fixed; top: 100%; left: 50%; transform: translate(-50%, 0); width: 800px; z-index: 1; transition: .5s; animation: 1s skill_renew forwards ease-in-out;}
@keyframes skill_renew {
    0%{ transform: translate(-50%, 0);}
    50%{ transform: translate(-50%, 0);}
    100%{ transform: translate(-50%, -100%);}
}
.skill_renew.close{ animation: 0.5s skill_renew_close forwards ease-in-out;}
@keyframes skill_renew_close {
    0%{ transform: translate(-50%, -100%);}
    100%{ transform: translate(-50%, 0);}
}

.skill_renew p{ position: absolute; top: -30px; right: 0; width: 10%; line-height: 30px; margin: 0; border-radius: 5px 5px 0 0; background: #ffffdb; color: #ed9ec5; cursor: pointer; pointer-events: none; opacity: 0; transition: .5s;}
.skill_renew.close p{ pointer-events: visible; opacity: 1;}
.skill_renew p:hover{ top: -35px; line-height: 35px;}
.skill_renew img{ max-width: 100%; border-radius: 10px 10px 0 0; transition: .5s;}
.skill_renew img:hover{ filter: brightness(1.05);}

@media (max-width:842px){
.skill_renew{ left: 0%; width: 100%; transform: translate(0, 0);}
@keyframes skill_renew {
    0%{ transform: translate(0, 0);}
    50%{ transform: translate(0, 0);}
    100%{ transform: translate(0, -100%);}
}
@keyframes skill_renew_close {
    0%{ transform: translate(0, -100%);}
    100%{ transform: translate(0, 0);}
}

.skill_renew p{ right: 2.5%;}
}



footer{ background: #fff; z-index: 1;}