@charset "UTF-8";

*{ font-family: "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; font-weight: bolder; letter-spacing: 1px;}
::selection {
	background: #fffce4;
	color: #ff7d9f;
}
html{ margin: 0; padding: 0;}
body{ margin: 0; padding: 0;}
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;}

@media (max-width:500px){
html{ font-size: 12px;}
}


.kv{ position: relative;}
.kv_bg{ max-width: 100%;}
.kv_05{ position: absolute; left: 0; bottom: 0; max-width: 100%; z-index: 2;}

.kv_c1{ position: absolute; width: 34.05%; left: 39%; bottom: 10.5%; animation: kv_c1 0.5s forwards ease-in-out;}
@keyframes kv_c1 {
    0%{ transform: translate(10%,0); opacity: 0;}
    100%{ transform: translate(0,0); opacity: 1;}
}
.kv_c2{ position: absolute; width: 28.45%; left: 58%; bottom: 0%; animation: kv_c2 0.5s forwards ease-in-out;}
@keyframes kv_c2 {
    0%{ transform: translate(-10%,0); opacity: 0;}
    100%{ transform: translate(0,0); opacity: 1;}
}
.kv_c3{ position: absolute; width: 17.3%; left: 28%; bottom: 57%; opacity: 0; animation: kv_c3 0.5s forwards ease-in-out; animation-delay: 0.2s;}
@keyframes kv_c3 {
    0%{ transform: translate(10%,0); opacity: 0;}
    100%{ transform: translate(0,0); opacity: 1;}
}
.kv_10{ position: absolute; width: 12.15%; left: 69%; bottom: 6.5%;}
.kv_11{ position: absolute; width: 7.15%; left: 79%; bottom: 10.5%;}

.kv_06{ position: absolute; width: 6%; left: 84%; top: -4.5%;}
.kv_07{ position: absolute; width: 8.45%; left: 15%; top: 31.5%; animation: kv_07 2.5s infinite ease-in-out; animation-delay: 1s;}
@keyframes kv_07 {
    0%, 25%, 50%, 100% { transform: scale(1, 1) translate(0,0);}
    12.5%, 37.5% { transform: scale(1.1, 0.9) translate(0,10%);}
}
.kv_08{ position: absolute; width: 4.6%; left: 8%; top: 54.5%; z-index: 3; animation: kv_07 2.5s infinite ease-in-out; animation-delay: 0.5s;}
.kv_09{ position: absolute; width: 4.75%; left: 39%; top: 63.5%; animation: kv_07 2.5s infinite ease-in-out;}

.kv_04{ position: absolute; width: 21.1%; left: 16%; top: 0%; z-index: 3; animation: 1.5s kv_04 forwards linear;}
.kv.active .kv_04{ animation: 8s kv_04_2 infinite linear;}
@keyframes kv_04 {
    0%{ transform: translate(0,-100%) scale(1, 1) skewX(0deg) skewY(0deg); transform-origin:top; filter: contrast(100%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
    25%{ transform: translate(0,0) scale(1, 0.95) skewX(-5deg) skewY(5deg); transform-origin:top; filter: contrast(90%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
    40%{ transform: translate(0,-10%) scale(0.7, 1) skewX(5deg) skewY(-5deg); transform-origin:top; filter: contrast(100%) drop-shadow(-25px 10px 30px rgba(39,119,175,0.3));}
    50%{ transform: translate(0,0) scale(1, 0.95) skewX(3deg) skewY(-3deg); transform-origin:top; filter: contrast(110%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
    60%{ transform: translate(0,-5%) scale(0.9, 1) skewX(-3deg) skewY(3deg); transform-origin:top; filter: contrast(90%) drop-shadow(25px 10px 30px rgba(39,119,175,0.3));}
    70%{ transform: translate(0,0%) scale(1, 1) skewX(-1deg) skewY(1deg); transform-origin:top; filter: contrast(100%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
    100%{ transform: translate(0,0%) scale(1, 1) skewX(0deg) skewY(0deg); transform-origin:top; filter: contrast(100%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
}
@keyframes kv_04_2 {
    0%{ transform: translate(0,0) scale(1, 1) skewX(0deg) skewY(0deg); transform-origin:top; filter: contrast(100%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
    25%{ transform: translate(0,0) scale(0.95, 1) skewX(1deg) skewY(-1deg); transform-origin:top; filter: contrast(150%) drop-shadow(-25px 10px 30px rgba(39,119,175,0.3));}
    50%{ transform: translate(0,0) scale(1, 1) skewX(0deg) skewY(0deg); transform-origin:top; filter: contrast(100%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
    75%{ transform: translate(0,0) scale(0.95, 1) skewX(-1deg) skewY(1deg); transform-origin:top; filter: contrast(80%) drop-shadow(25px 10px 30px rgba(39,119,175,0.3));}
    100%{ transform: translate(0,0) scale(1, 1) skewX(0deg) skewY(0deg); transform-origin:top; filter: contrast(100%) drop-shadow(5px 10px 20px rgba(39,119,175,0.3));}
}

.kv_01{ position: fixed; width: 6%; left: 90%; top: 49.5%; z-index: 3; animation: 3s kv_01 infinite ease-in-out;}
@keyframes kv_01 {
    0%{ transform: translate(0, -25%); filter: drop-shadow(5px 10px 20px rgba(39,119,175,0.5));}
    50%{ transform: translate(0, 0); filter: drop-shadow(0px 0px 0px rgba(39,119,175,0));}
    100%{ transform: translate(0, -25%); filter: drop-shadow(5px 10px 20px rgba(39,119,175,0.5));}
}
.kv_02{ position: fixed; width: 5.35%; left: 4%; top: 28%; z-index: 3; animation: 3s kv_02 infinite ease-in-out;}
@keyframes kv_02 {
    0%{ transform: translate(0, -20%); filter: drop-shadow(5px 10px 20px rgba(39,119,175,0.5));}
    50%{ transform: translate(0, 0); filter: drop-shadow(0px 0px 0px rgba(39,119,175,0));}
    100%{ transform: translate(0, -20%); filter: drop-shadow(5px 10px 20px rgba(39,119,175,0.5));}
}
.kv_03{ position: fixed; width: 5.35%; left: 74%; top: 6.5%; z-index: 3; animation: 3s kv_03 infinite ease-in-out;}
@keyframes kv_03 {
    0%{ transform: translate(0, -15%); filter: drop-shadow(5px 10px 20px rgba(39,119,175,0.5));}
    50%{ transform: translate(0, 0); filter: drop-shadow(0px 0px 0px rgba(39,119,175,0));}
    100%{ transform: translate(0, -15%); filter: drop-shadow(5px 10px 20px rgba(39,119,175,0.5));}
}

.kv .logo{ position: absolute; width: 10.05%; left: 9%; top: 5%; z-index: 3;}

@media (max-width:1000px){
.kv_01{ position: absolute;}
.kv_02{ position: absolute;}
.kv_03{ position: absolute;}
}

@media (max-width:768px){
.kv{ height: 150vw; overflow: hidden;}
.kv_bg{ position: absolute; height: 100%; object-fit: cover;}

.kv_c1{ width: 76.05%; left: 1%; bottom: 2.5%;}
.kv_c2{ width: 59.45%; left: 40%; bottom: 0%;}

.kv_01{ width: 11%; left: 85%; top: 45.5%;}
.kv_02{ width: 9.35%; left: 5%; top: 40%;}
.kv_03{ width: 12.35%; left: 67%; top: 2.5%;}

.kv_07,.kv_08,.kv_09{ display: none;}

.kv_10{ width: 26.15%; left: 54%; bottom: 1%;}
.kv_11{ width: 18.15%; left: 75%; bottom: 0.5%;}

.kv_04{ width: 68%; left: 16%; top: -29%;}

.kv .logo{ width: 22.05%;}
}


.main{ width: 100%; max-width: 2000px; margin: 0 auto; background: url(../images/main_bg.jpg) center top; box-sizing: border-box;}
.snow_box{ background: #fff; border-radius: 10px; box-shadow: 0px 0px 20px 0px rgba(182,223,243,0.2), 0px 7px 20px 0px rgba(182,223,243,0.5), 0px 0px 20px 0px rgba(182,223,243,0.5) inset, 0px 7px 0px 0px rgba(254,254,254,1) inset;}

.zone_01{ position: relative; max-width: 1000px; margin: 0 auto; padding: 0;}
.zone_01 .title_01{ margin: 0 auto; max-width: 100%;}
.zone_01 .pic_01{ position: absolute; right: 0; bottom: 0; width: 40%;}

.zone_01 .time{ margin: 30px 0 0; padding: 50px 30px; box-sizing: border-box;}
.zone_01 .time p{ margin: 0; width: 60%;}
.zone_01 .time p span{ margin: 0 15px 0 0; padding: 5px 10px 5px 15px; background: #3e9fcf; border-radius: 50px; color: #fff; letter-spacing: 5px;}
.zone_01 .time p b{ color: #3e9fcf;}
.zone_01 .time p+p{ margin: 20px 15px 0 0;}
.zone_01 .time p+p span{ background: #ff8560;}
.zone_01 .time p+p b{ color: #ff8560;}
.zone_01 .info{ margin: 30px 0 0; padding: 30px; box-sizing: border-box;}
.zone_01 .info p{ margin: 0 0 20px; width: 60%; color: #3e9fcf; line-height: 1.8rem;}
.zone_01 .info i{ display: block; margin: 0 0 20px; padding: 20px; width: 60%; font-style: normal; background: #fff9f1; color: #ff8560; box-sizing: border-box; border-radius: 10px;}

@media (max-width:1000px){
.main{ padding: 0 15px; background-size: contain; overflow: hidden;}
.zone_01 .time p{ width: 100%;}
}

@media (max-width:768px){
.zone_01 .time p{ display: flex; flex-direction: column; align-items: center;}
.zone_01 .time p span{ margin: 0;}
.zone_01 .time p b{ margin: 20px 0 0 0;}
.zone_01 .time p+p{ margin: 20px 0 0;}

.zone_01 .info{ position: relative;}
.zone_01 .pic_01{ right: -15%; width: 50%;}
.zone_01 .info p{ width: 70%;}
.zone_01 .info i{ width: 70%;}
}

@media (max-width:500px){
.zone_01 .title_01{ width: 50%;}
.zone_01 .time{ padding: 30px 10px;}

.zone_01 .info{ padding: 30px 15px;}
.zone_01 .pic_01{ right: -10%; bottom: 90%; width: 26%;}
.zone_01 .info p{ width: 100%;}
.zone_01 .info i{ width: 100%; padding: 15px;}
}


.zone_02{ position: relative; max-width: 1000px; margin: 0 auto; padding: 50px 0 0;}
.zone_02 .title_02{ margin: 0 auto; max-width: 100%;}
.zone_02 .pic_02{ position: absolute; left: 0; bottom: 0; width: 40%;}

.zone_02 .acc_log{ margin: 30px 0 0; padding: 50px 30px; box-sizing: border-box;}
.zone_02 .acc_in{ margin-left: 36%;}
.zone_02 .acc_in i{ display: block; margin: 0 0 30px; text-align: center; font-style: normal; color: #3e9fcf;}
.zone_02 .acc_in .server{ display: flex; gap: 10px;}
.zone_02 .acc_in label{ flex: 1;}
.zone_02 .acc_in label input{ display: none;}
.zone_02 .acc_in label b{ position: relative; display: block; font-size: 1.625rem; text-align: center; color: #727272; line-height: 80px; background: #f8f8f8; cursor: pointer; border-radius: 10px; transition: .3s;}
.zone_02 .acc_in label b span{ position: absolute; top: 5px; left: 5px; display: block; width: calc(100% - 10px); height: calc(100% - 10px); border: 1px solid #f0f9ff; border-radius: 10px; transition: 1s; box-sizing: border-box;}
.zone_02 .acc_in label input:checked+b{ color: #3e9fcf; background: #f0f9ff;}
.zone_02 .acc_in label input:hover+b{ background: #f0f9ff;}
.zone_02 .acc_in label input:checked+b span{ border: 1px solid #3e9fcf;}

.zone_02 .acc_in .coins{ display: flex; margin: 10px 0 0; padding: 30px 0; background: #fff9f1; border-radius: 10px;}
.zone_02 .acc_in .coins p{ display: flex; flex: 1; flex-direction: column; align-items: center; margin: 0; color: #666;}
.zone_02 .acc_in .coins p+p{ border-left: 1px solid #ff8560;}
.zone_02 .acc_in .coins p b{ font-size: 3rem; color: #ff8560;}

.zone_02 .acc_in .logout{ display: flex; flex-direction: column; align-items: center; margin: 30px 0 0; font-size: 0.875rem; color: #666;}
.zone_02 .acc_in .logout a{ display: inline-block; margin: 10px 0 0 0; padding: 5px 20px; background: #3e9fcf; color: #fff; text-decoration: none; border-radius: 50px;}

.zone_02 .acc_out{ display: flex; flex-direction: column; align-items: center; justify-content: center; margin-left: 36%; min-height: 300px;}
.zone_02 .acc_out i{ display: block; margin: 0 0 15px; text-align: center; font-style: normal; color: #3e9fcf;}
.zone_02 .acc_out .login a{ display: inline-block; margin: 10px 0 0 0; padding: 5px 20px; background: #3e9fcf; color: #fff; text-decoration: none; border-radius: 50px;}

@media (max-width:768px){
.zone_02 .pic_02{ left: -15%; width: 50%;}

.zone_02 .acc_in{ margin-left: 25%;}
.zone_02 .acc_in label b{ font-size: 1.25rem; line-height: 50px;}

.zone_02 .acc_out{ margin-left: 25%; min-height: 270px;}
}

@media (max-width:500px){
.zone_02 .acc_log{ position: relative; padding: 30px 15px;}
.zone_02 .title_02{ width: 50%;}
.zone_02 .pic_02{ left: -10%; bottom: 90%; width: 30%;}
.zone_02 .acc_in{ margin-left: 0;}
.zone_02 .acc_in i{ margin: 0 0 15px;}

.zone_02 .acc_in .coins{ padding: 15px 0;}
.zone_02 .acc_in .logout{ margin: 20px 0 0 0;}

.zone_02 .acc_out{ min-height: auto; margin-left: 0;}
.zone_02 .acc_out i{ margin: 0 0 5px;}
}


.zone_03{ max-width: 1000px; margin: 0 auto; padding: 50px 0 0;}
.zone_03 i{ display: block; margin: 0 0 50px; text-align: center; font-style: normal; color: #3e9fcf;}
.zone_03 i span{ background: #c4e7ff;}

.zone_03 .gift_list_a{ display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;}
.zone_03 .gift_list_a div{ display: flex; flex-direction: column; position: relative; width: calc((100% - 30px)/3); padding: 10px 30px; text-align: center; box-sizing: border-box;}
.zone_03 .gift_list_a div p{ margin: 0; cursor: pointer;}
.zone_03 .gift_list_a div p b{ position: absolute; top: 10px; right: 10px; display: block; width: 35px; line-height: 35px; border-radius: 5px; color: #3e9fcf; background: #f0f9ff;}
.zone_03 .gift_list_a div p img{ margin: 30px auto; max-width: 100%; transition: .3s;}
.zone_03 .gift_list_a div:hover p img{ margin: 20px auto 40px;}
.zone_03 .gift_list_a div p span{ display: block; margin: 0 0 20px; font-size: 0.875rem;}
.zone_03 .gift_list_a div hr{ display: block; width: 100%; margin: auto 0 0 0; border: 0; border-bottom: 1px dashed #e6e6e6;}
.zone_03 .gift_list_a div a{ display: block; margin: 20px 0 10px; padding: 5px; border: 1px solid #3e9fcf; color: #3e9fcf; text-decoration: none; border-radius: 50px; transition: .3s;}
.zone_03 .gift_list_a div a:hover{ background: #3e9fcf; color: #fff;}
.zone_03 .gift_list_a div a.disabled{ background: #eee; color: #999; border: 1px solid #eee;}

@media (max-width:1000px){
.zone_03 .gift_list_a div{ width: calc((100% - 30px)/3);}
}
@media (max-width:768px){
.zone_03 .gift_list_a div{ width: calc((100% - 15px)/2);}
}
@media (max-width:500px){
.zone_03{ padding: 30px 0 0;}
.zone_03 i{ margin: 0 0 30px;}

.zone_03 .gift_list_a div{ padding: 10px 15px;}
.zone_03 .gift_list_a div p b{ width: 25px; line-height: 25px;}
.zone_03 .gift_list_a div p img{ margin: 10px auto 20px;}
.zone_03 .gift_list_a div:hover p img{ margin: 10px auto 20px;}
}


.zone_04{ max-width: 1000px; margin: 0 auto; padding: 50px 0 0;}
.zone_04 i{ display: block; margin: 0 0 50px; text-align: center; font-style: normal; color: #3e9fcf;}
.zone_04 i span{ background: #c4e7ff;}

.zone_04 .gift_list_b{ display: flex; flex-wrap: wrap; justify-content: center; gap: 15px;}
.zone_04 .gift_list_b div{ display: flex; flex-direction: column; position: relative; width: calc((100% - 15px)/2); padding: 10px 30px; text-align: center; box-sizing: border-box;}
.zone_04 .gift_list_b div p{ margin: 0; cursor: pointer;}
.zone_04 .gift_list_b div p b{ position: absolute; top: 10px; right: 10px; display: block; width: 35px; line-height: 35px; border-radius: 5px; color: #3e9fcf; background: #f0f9ff;}
.zone_04 .gift_list_b div p img{ margin: 30px auto; max-width: 100%; transition: .3s;}
.zone_04 .gift_list_b div:hover p img{ margin: 20px auto 40px;}
.zone_04 .gift_list_b div p span{ display: block; margin: 0 0 20px; font-size: 0.875rem;}
.zone_04 .gift_list_b div hr{ display: block; width: 100%; margin: auto 0 0 0; border: 0; border-bottom: 1px dashed #e6e6e6;}
.zone_04 .gift_list_b div a{ display: block; margin: 20px 0 10px; padding: 5px; border: 1px solid #3e9fcf; color: #3e9fcf; text-decoration: none; border-radius: 50px; transition: .3s;}
.zone_04 .gift_list_b div a:hover{ background: #3e9fcf; color: #fff;}
.zone_04 .gift_list_b div a.disabled{ background: #eee; color: #999; border: 1px solid #eee;}

@media (max-width:768px){
.zone_04 .gift_list_b div{ width: 100%;}
}
@media (max-width:500px){
.zone_04{ padding: 30px 0 0;}
.zone_04 i{ margin: 0 0 30px;}

.zone_04 .gift_list_b div{ padding: 10px 15px;}
.zone_04 .gift_list_b div p b{ width: 25px; line-height: 25px;}
.zone_04 .gift_list_b div p img{ margin: 10px auto 20px;}
.zone_04 .gift_list_b div:hover p img{ margin: 10px auto 20px;}
}


.zone_05{ max-width: 1000px; margin: 0 auto; padding: 50px 0 0;}
.zone_05 i{ display: block; margin: 0 0 50px; text-align: center; font-style: normal; color: #3e9fcf;}
.zone_05 i span{ background: #c4e7ff;}

.zone_05>div{ padding: 50px 30px; text-align: center;}
.zone_05 div p{ margin: 0; color: #3e9fcf; line-height: 1.8rem; text-align: left;}
.zone_05 div b{ display: block; margin: 20px 0; padding: 20px; font-style: normal; background: #fff9f1; color: #ff8560; box-sizing: border-box; border-radius: 10px;}
.zone_05 div>span{ display: block; padding: 15px; background: #f0f9ff; color: #3e9fcf; text-align: center;}
.zone_05 div hr{ display: block; width: 100%; margin: 20px 0; border: 0; border-bottom: 1px dashed #e6e6e6;}
.zone_05 div a{ display: inline-block; margin: 0 auto; padding: 5px 15px; border: 1px solid #3e9fcf; color: #3e9fcf; text-decoration: none; border-radius: 50px; transition: .3s;}
.zone_05 div a:hover{ background: #3e9fcf; color: #fff;}
.zone_05 div a.disabled{ background: #eee; color: #999; border: 1px solid #eee;}

.zone_05 div img{ max-width: 100%; cursor: pointer;}


form{ margin: 0; height: 0; overflow: hidden; transition: .3s;}
.zone_05 form>div{ max-width: 600px; margin: 0 auto; padding: 0;}
form a.main_btn{ display: inline-block; margin: 0 auto; padding: 5px 15px; border: 1px solid #3e9fcf; color: #3e9fcf; text-decoration: none; border-radius: 50px; transition: .3s;}
form a.main_btn:hover{ background: #3e9fcf; color: #fff;}
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: 10px; box-sizing: border-box; color: #ff8560; background: #f1f9ff; 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: 10px; box-sizing: border-box; color: #ff8560; background: #f1f9ff; z-index: 1; cursor: pointer; transition: .2s;}
form label input:focus,form label select:focus{ background: #fff9f1;}
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;}


@media (max-width:500px){
.zone_05{ padding: 30px 0 0;}
.zone_05 i{ margin: 0 0 30px;}
.zone_05>div{ padding: 30px 15px;}

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

}


.zone_06{ position: relative; max-width: 1000px; margin: 0 auto; padding: 50px 0 100px;}
.zone_06 .note{ margin-right: 35%;}
.zone_06 .note p{ display: inline-block; padding: 10px 60px; background: #fff; color: #3e9fcf; border-radius: 50px;}
.zone_06 .note ul{ margin: 0; padding: 0; font-weight: bolder; list-style: none;}
.zone_06 .note li{ position: relative; padding: 0 0 0 30px; color: #3e9fcf; line-height: 1.8rem; list-style: none; counter-increment:li;}
.zone_06 .note li::before{ position: absolute; left: 0; top: 4px; display: inline-block; width: 18px; line-height: 18px; content: counter(li); padding: 0; font-size: 0.75rem; background: #3e9fcf; color: #fff; border-radius: 50px; text-align: center;}
.zone_06 .note li a{ color: #ff7d9f;}
.zone_06 .note li+li{ margin: 15px 0 0 0;}

.zone_06 img{ position: absolute; bottom: 6%; right: -5%; max-width: 100%;}

@media (max-width:900px){
.zone_06 img{ top: 100px; right: -15%;}
}
@media (max-width:768px){
.zone_06{ padding: 50px 0;}
.zone_06 .note{ margin-right: 0;}
.zone_06 .note li::before{ top: 1px;}
.zone_06 img{ top: -5%; right: -6%; width: 20%;}
}


.overlay{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(196,231,255,0.9); z-index: 10; transition: .3s; opacity: 0; pointer-events: none;}
.overlay.active{ opacity: 1; pointer-events: visible;}
.lightbox{ position: fixed; top: 50%; left: 50%; padding: 30px 15px; width: 600px; max-width: 100%; height: auto; max-height: 60vh; transform: translate(-50%,-50%); z-index: 11; transition: .3s; opacity: 0; pointer-events: none;}
.lightbox.lightbox_b_1, .lightbox.lightbox_b_2, .lightbox.lightbox_b_3, .lightbox.lightbox_b_4, .lightbox.lightbox_c{ height: 100vh;}
.lightbox.active{ opacity: 1; pointer-events: visible;}
.lightbox>div{ height: 100%; text-align: center; box-sizing: border-box; overflow-y: auto;}
.lightbox img{ display: inline-block; max-width: 100%;}
.lightbox .item{ margin: 0 10px 10px; padding: 0 20px; border: 1px solid #c4e7ff; border-radius: 10px;}
.lightbox h3{ padding: 0 0 15px; color: #3e9fcf; border-bottom: 1px dashed #c4e7ff;}
.lightbox p{ text-align: left;}
.lightbox .popopop{ position: absolute; right: 0; bottom: 100%; transform: translate(0,17.42%); cursor: pointer;}

.lightbox>div::-webkit-scrollbar { width: 6px; background-color: #fff;}
.lightbox>div::-webkit-scrollbar-thumb { background-color: #c4e7ff;}

@media (max-width:768px){
.lightbox{ padding: 10px 15px; max-width: 95vw; box-sizing: border-box;}
.lightbox .popopop{ right: 15px;}
}
@media (max-width:500px){
.lightbox .popopop{ width: 25%;}
}