@charset "UTF-8";

*{ font-family: "Roboto Condensed", "Noto Sans TC", "微軟正黑體", sans-serif; font-weight: bolder;}
::selection {
	background: #fffce4;
	color: #ff7d9f;
}
html{ margin: 0; padding: 0;}
body{ margin: 0; padding: 0;}
img{ display: block;}


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


.kv{ position: relative; max-width: 1920px; margin: 0 auto; overflow: hidden; z-index: 10;}
.kv .index_bg_01{ position: relative; width: 100%; z-index: 2;}
.kv .index_bg_02{ position: absolute; top: 0; left: 0; width: 100%; z-index: 2;}

.kv_bg{ position: absolute; top: 50%; left: calc(50% - 100vw); width: 200vw; height: 200vw; background: linear-gradient( 90deg, #fff0de 50%, #ece4f8 50%); animation: kv_bg 10s infinite linear; transform-origin: center top; z-index: 1;}
@keyframes kv_bg {
    0%{ transform: rotate(5deg) translate(0, -50%);}
    47%{ transform: rotate(20deg) translate(0, -50%);}
    49%{ transform: rotate(15deg) translate(0, -50%);}
    50%{ transform: rotate(185deg) translate(0, -50%);}
    97%{ transform: rotate(200deg) translate(0, -50%);}
    99%{ transform: rotate(195deg) translate(0, -50%);}
    100%{ transform: rotate(365deg) translate(0, -50%);}
}
.kv_character_a{ position: absolute; top: 50%; left: 0; width: 100vw; max-width: 1920px; height: 100vw; max-height: 1920px; animation: kv_character_a 10s infinite linear; transform-origin: center top; z-index: 3; pointer-events: none;}
@keyframes kv_character_a {
    0%{ transform: rotate(5deg) translate(0, -50%); opacity: 0;}
    1%{ opacity: 1;}
    47%{ transform: rotate(20deg) translate(0, -50%); opacity: 1;}
    49%{ transform: rotate(15deg) translate(0, -50%); opacity: 1;}
    50%{ transform: rotate(185deg) translate(0, -50%); opacity: 0;}
    97%{ transform: rotate(200deg) translate(0, -50%); opacity: 0;}
    99%{ transform: rotate(195deg) translate(0, -50%); opacity: 0;}
    100%{ transform: rotate(365deg) translate(0, -50%); opacity: 0;}
}
.kv_character_a .index_character_01{ position: absolute; left: 0; top: 0; width: 50%;}
.kv_character_a .index_character_02{ position: absolute; right: 0; top: 0; width: 50%;}

.kv_character_b{ position: absolute; top: 50%; left: 0; width: 100vw; max-width: 1920px; height: 100vw; max-height: 1920px; animation: kv_character_b 10s infinite linear; transform-origin: center top; z-index: 3; pointer-events: none;}
@keyframes kv_character_b {
    0%{ transform: rotate(5deg) translate(0, -50%); opacity: 0;}
    47%{ transform: rotate(20deg) translate(0, -50%); opacity: 0;}
    49%{ transform: rotate(15deg) translate(0, -50%); opacity: 0;}
    50%{ transform: rotate(185deg) translate(0, -50%); opacity: 0;}
    51%{ opacity: 1;}
    97%{ transform: rotate(200deg) translate(0, -50%); opacity: 1;}
    99%{ transform: rotate(195deg) translate(0, -50%); opacity: 1;}
    100%{ transform: rotate(365deg) translate(0, -50%); opacity: 0;}
}
.kv_character_b .index_character_03{ position: absolute; right: 0; top: 0; width: 50%;}
.kv_character_b .index_character_04{ position: absolute; left: 0; top: 0; width: 50%;}

.kv .index_logo{ position: absolute; top: 3.2291%; left: 44.11458%; width: 11.8229%; z-index: 2;}
.kv .index_slogan{ position: absolute; top: 24.89583%; left: 27.08333%; width: 45.8333%; z-index: 2; animation: index_slogan 3s infinite linear;}
@keyframes index_slogan {
    0%{ filter: brightness(1);}
    50%{ filter: brightness(1.3);}
    100%{ filter: brightness(1);}
}
.kv .index_btn_01{ position: absolute; top: 78.22916%; left: 27.03125%; padding: 0 0 5px; width: 14.0625%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); transition: .3s;}
.kv .index_btn_01:hover{ padding: 5px 0 0; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));}
.kv .index_btn_02{ position: absolute; top: 78.22916%; left: 43.02083%; padding: 0 0 5px; width: 14.0625%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); transition: .3s;}
.kv .index_btn_02:hover{ padding: 5px 0 0; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));}
.kv .index_btn_03{ position: absolute; top: 78.22916%; left: 58.90625%; padding: 0 0 5px; width: 14.0625%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); transition: .3s;}
.kv .index_btn_03:hover{ padding: 5px 0 0; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));}
.kv .index_btn_04{ position: absolute; top: 88%; left: 11.40625%; width: 14.0625%; z-index: 2; transition: .3s;}
.kv .index_btn_04:hover{ filter: brightness(1.2);}

.kv .social_download{ position: absolute; top: 9.375%; left: 70.83333%; padding: 0 0 5px; width: 5.20833%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); transition: .3s;}
.kv .social_download:hover{ padding: 5px 0 0; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));}
.kv .social_ig{ position: absolute; top: 9.375%; left: 77.83333%; padding: 0 0 5px; width: 5.20833%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); transition: .3s;}
.kv .social_ig:hover{ padding: 5px 0 0; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));}
.kv .social_fb{ position: absolute; top: 9.375%; left: 84.83333%; padding: 0 0 5px; width: 5.20833%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); transition: .3s;}
.kv .social_fb:hover{ padding: 5px 0 0; filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));}

.kv .index_pic_01{ position: absolute; top: 59.0625%; left: 26.30208%; width: 4.84375%; z-index: 2; filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3)); animation: index_pic_01 2s infinite ease-in-out;}
@keyframes index_pic_01 {
    0%{ top: 59.0625%; filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3));}
    50%{ top: 61.0625%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));}
    100%{ top: 59.0625%; filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_02{ position: absolute; top: 40.20833%; left: 40.41666%; width: 5%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); animation: index_pic_02 2s infinite ease-in-out;}
@keyframes index_pic_02 {
    0%{ top: 41.20833%; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));}
    50%{ top: 40.20833%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));}
    100%{ top: 41.20833%; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_03{ position: absolute; top: 20.3125%; left: 45.20833%; width: 5.15625%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); animation: index_pic_03 2s infinite ease-in-out;}
@keyframes index_pic_03 {
    0%{ top: 20.3125%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));}
    50%{ top: 21.0625%; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));}
    100%{ top: 20.3125%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_04{ position: absolute; top: 41.04166%; left: 57.60416%; width: 5.98958%; z-index: 2; filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3)); animation: index_pic_04 2s infinite ease-in-out;}
@keyframes index_pic_04 {
    0%{ top: 39.04166%; filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3));}
    50%{ top: 41.04166%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));}
    100%{ top: 39.04166%; filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_05{ position: absolute; top: 31.04166%; left: 69.94791%; width: 3.95833%; z-index: 2; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); animation: index_pic_05 2s infinite ease-in-out;}
@keyframes index_pic_05 {
    0%{ top: 31.04166%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));}
    50%{ top: 32.04166%; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.3));}
    100%{ top: 31.04166%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3));}
}


@media (max-width:750px){
.kv{ height: 150vw;}
.kv .index_bg_01{ top: 14%;}

.kv .index_logo{ left: calc(50% - 50px); width: 100px;}
.kv .index_slogan{ top: 14%; left: 7.5%; width: 85%; animation: none;}

.kv_character_a{ top: 0; height: 150vw; animation: none;}
.kv_character_a .index_character_01{ width: 69%; left: 18%; top: 27%; transform: rotate(6deg);}
.kv_character_a .index_character_02{ width: 84%; right: 50%; top: 11%; transform: rotate(11deg);}
.kv_character_b{ top: 0; height: 150vw; animation: none;}
.kv_character_b .index_character_03{ display: none;}
.kv_character_b .index_character_04{ width: 75%; left: 28%; top: 5%; transform: rotate(193deg);}

.kv .index_btn_01{ top: 87%; left: 5%;  width: 26.66666%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); z-index: 4;}
.kv .index_btn_02{ top: 87%; left: 36.66666%; width: 26.66666%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); z-index: 4;}
.kv .index_btn_03{ top: 87%; left: 68.33333%; width: 26.66666%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); z-index: 4;}
.kv .index_btn_04{ top: 80%; left: 57%; width: 38%; z-index: 4;}

.kv .social_download{ width: 12%; top: 70%; left: 57%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); z-index: 4;}
.kv .social_ig{ width: 12%; top: 70%; left: 70%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); z-index: 4;}
.kv .social_fb{ width: 12%; top: 70%; left: 83%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3)); z-index: 4;}

.kv .index_pic_01{ top: 32%; left: 8%; width: 10%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
@keyframes index_pic_01 {
    0%{ top: 32%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
    50%{ top: 34%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));}
    100%{ top: 32%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_02{ top: 24%; left: 32%; width: 9%; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));}
@keyframes index_pic_02 {
    0%{ top: 24%; filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));}
    50%{ top: 23%; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));}
    100%{ top: 24%; filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_03{ top: 3%; left: 16%; width: 11%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
@keyframes index_pic_03 {
    0%{ top: 3%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
    50%{ top: 4%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));}
    100%{ top: 3%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_04{ top: 37%; left: 83%; width: 10%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
@keyframes index_pic_04 {
    0%{ top: 37%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
    50%{ top: 39%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));}
    100%{ top: 37%; filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));}
}
.kv .index_pic_05{ top: 10%; left: 77%; width: 7%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));}
@keyframes index_pic_05 {
    0%{ top: 10%; filter: drop-shadow(1px 1px 2% rgba(0, 0, 0, 0.3));}
    50%{ top: 11%; filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3));}
    100%{ top: 10%; filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));}
}
}


.main{ max-width: 1920px; margin: 0 auto;}
.zone{ position: relative;}
.zone nav{ position: sticky; top: 0; display: flex; justify-content: center; background: linear-gradient(#fff, #fff0de); z-index: 3;}
.zone nav a{ position: relative;}
.zone nav a img{ max-width: 100%; transition: .3s;}
.zone nav a img+img{ position: absolute; top: 0; left: 0; opacity: 0;}
.zone nav a:hover img, .zone nav a.active img{ opacity: 0;}
.zone nav a:hover img+img, .zone nav a.active img+img{ opacity: 1;}
.main_content{ width: 1200px; max-width: 100%; margin: 0 auto; padding: 0 0 100px; /*background: url(../images/main_bg.png) repeat-y; background-size: 100% auto;*/}
.main_character_01{ position: fixed; width: 13.375%; left: 5%; bottom: 5%; z-index: 2;}
.main_character_02{ position: fixed; width: 17.979%; right: 1.5%; top: 18%; z-index: 2;}
.main_pic_01{ position: fixed; width: 2.375%; left: 3%; bottom: 76%; z-index: 1; opacity: 0.8;}
.main_pic_02{ position: fixed; width: 4.375%; left: 7%; bottom: 52%; z-index: 1; opacity: 0.8;}
.main_pic_03{ position: fixed; width: 7.375%; left: 15%; bottom: 68%; z-index: 1; opacity: 0.8;}
.main_pic_04{ position: fixed; width: 6.375%; right: 16%; top: 49%; z-index: 1; opacity: 0.8;}
.main_pic_05{ position: fixed; width: 4.375%; right: 10%; top: 73%; z-index: 1; opacity: 0.8;}
.main_pic_06{ position: fixed; width: 3%; right: 4%; top: 66%; z-index: 1; opacity: 0.8;}
.main_pic_07{ margin: 80px 0 0 0;}
.main_pic_09{ margin: 80px 0 0 0;}



.main_content>img{ padding: 0 16.666%; max-width: 100%; box-sizing: border-box;}
.main_content article{ position: relative; width: 700px; margin: 0 auto; text-align: center;}
.main_character_03{ position: absolute; right: -3%; bottom: -100px;}
.main_character_04{ position: absolute; right: -3%; bottom: -100px;}

.article_title{ margin: 10px auto 30px;}
.main_content article p{ margin: 30px 0 10px; font-size: 1rem; line-height: 1.8rem; text-align: left;}
.main_content article p mark{  background: linear-gradient(transparent 10%,#ffdadd 11%, #ffdadd 89%, transparent 90%); padding: 2px 1px; color: #333333; border-radius: 0px;}
.main_content article p.t_center{ text-align: center;}
.event_img{ max-width: 100%; margin: 0 auto 30px;}
a.text{ position: relative; padding: 0 0 0 20px; color: #ff4650; text-decoration: none;}
a.text::before{ position: absolute; top: 2px; left: 2px; display: block; content: ""; width: 15px; height: 15px; background: url(../images/icon_link.png);}
a.text:hover{ text-decoration: underline;}
article ul{ margin: 0 0 30px; padding: 30px; list-style: none; background: #f7f7f7; border-radius: 10px; color: #777; font-size: 0.875rem; text-align: left;}
article ul li{ position: relative; padding: 0 0 0 24px; counter-increment:li;}
article ul li+li{ margin: 10px 0 0;}
article ul li:before{ position: absolute; left: 0; top: 1px; display: inline-block; width: 18px; line-height: 18px; content: counter(li); padding: 0; font-size: 0.75rem; background: #ffdadd; color: #ff4650; text-align: center;}
article ul mark{  background: linear-gradient(transparent 10%,#ffdadd 11%, #ffdadd 89%, transparent 90%); padding: 2px 1px; color: #333333; border-radius: 0px;}

article h3{ position: relative; display: inline-block; margin: 0; padding: 10px 40px; border-radius: 50px; background: #ece4f8; color: #743acb; font-size: 1rem;}
article h3::before{ position: absolute; top: calc(50% - 5px); left: 20px; display: block; content: ''; width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: #743acb;}
article h3::after{ position: absolute; top: calc(50% - 5px); right: 20px; display: block; content: ''; width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: #743acb;}

article h4{ position: relative; margin: 30px 0 10px; padding: 0 0 0 20px; font-size: 1rem; text-align: left;}
article h4::before{ position: absolute; top: 4px; left: 0; display: block; content: ''; width: 15px; height: 15px; border-radius: 50px; background: #743acb;}
article h4::after{ position: absolute; top: calc(50% - 1px); left: 5px; display: block; content: ''; width: 5px; height: 5px; transform: rotate(45deg); border-radius: 1px; background: #fff;}

article h3+.table_01{ margin: 30px 0 10px;}
article .table_01{ margin: 0 0 10px; border: 1px solid #eee; border-radius: 10px;}
article .table_01>div{ display: flex; flex-wrap: wrap;}
article .table_01>div+div{ border-top: 1px solid #eee;}
article .table_01>div:nth-child(odd){ background: #f7f7f7;}
article .table_01 b{ padding: 10px; width: 120px; text-align: center;}
article .table_01 b+i{ flex: 1; padding: 10px 20px; border-left: 1px solid #eee; font-style: normal; text-align: left;}

article .table_02{ margin: 0 0 10px;}
article .table_02>div:nth-child(1){ padding: 10px 20px; background: #f7f7f7; border-radius: 10px 10px 0 0; border: 1px solid #eee;}
article .table_02>div:not(:nth-child(1)){ display: flex; flex-wrap: wrap; border-left: 1px solid #eee;}
article .table_02>div:nth-child(odd){ background: #f7f7f7;}
article .table_02 b{ width: 25%; padding: 10px; text-align: center; border-right: 1px solid #eee; border-bottom: 1px solid #eee; box-sizing: border-box;}

article .toggle_box{ margin: 10px 0;}
article ol.item_list{ display: flex; margin: 10px 0 0 0; padding: 0; list-style: none;}
article ol.item_list li{ padding: 5px 30px; border: 1px solid #eee; border-radius: 10px; background: #fff;}
article ol.item_list li+li{ display: flex; flex: 1; justify-content: space-between; align-items: center; margin: 0 0 0 10px; padding: 5px 20px; background: #f7f7f7;}
article ol.item_list.even li+li{ background: #fff;}
article ol.item_list li i{ width: 30px; line-height: 30px; background: #ece4f8; color: #743acb; border-radius: 50px; font-style: normal; cursor: pointer;}
article .toggle_info{ height: 0; transition: 0.3s ease; overflow: hidden;}
article .item_note{ margin: 10px 0 0 0; padding: 20px; border-radius: 10px; border: 1px solid #eee; text-align: left; line-height: 1.8rem;}
article .item_note span{ color: #743acb;}
article .item_note hr{ margin: 15px 0; border: 0; border-bottom: 1px solid #eee;}

.main_note{ padding: 60px 0; background: #f7f7f7;}
.main_note ol{ width: 800px; max-width: 100%; margin: 0 auto; padding: 0; list-style: none;}
.main_note ol li{ position: relative; padding: 0 0 0 24px; counter-increment:li;}
.main_note ol li+li{ margin: 10px 0 0;}
.main_note ol li:before{ position: absolute; left: 0; top: 2px; display: inline-block; width: 18px; line-height: 18px; content: counter(li); padding: 0; font-size: 0.75rem; background: #ffdadd; color: #ff4650; text-align: center;}

@media (max-width:1200px){
.main_content article{ z-index: 2;}
}
@media (max-width:1100px){
.main_content{ background: none;}
.main_content>img{ padding: 0 5%; width: 100%;}
.main_character_01{ left: 0.5%; bottom: 4%;}
.main_character_02{ right: -2.5%;}
.main_pic_01{ left: 3%; bottom: 76%;}
.main_pic_02{ left: 3%; bottom: 35%;}
.main_pic_03{ left: 8%; bottom: 47%;}
.main_pic_04{ right: 6%; top: 44%;}
.main_pic_05{ right: 10%; top: 73%;}
.main_pic_06{ right: 4%; top: 66%;}
.main_note{ position: relative; z-index: 3;}
}
@media (max-width:1000px){
.main_character_01{ display: none;}
.main_character_02{ display: none;}
}
@media (max-width:750px){
.main_pic_07{ margin: 40px 0 0 0;}
.main_pic_09{ margin: 40px 0 0 0;}

.main_content>img{ padding: 0 3%; width: 100%;}
.main_content article{ width: 95%;}
}

@media (max-width:500px){
.main_content{ padding: 0 0 40px;}
.main_character_03{ right: 0; bottom: -80px; width: 15%;}
.main_character_04{ left: 0; top: -60px; width: 20%; transform:scaleX(-1);}

.article_title{ margin: 10px auto 10px; width: 120px;}
.main_content article p{ margin: 0 auto 10px; max-width: 95%;}
.main_content article .toggle_box+p{ margin: 20px auto 10px;}
.event_img{ margin: 0 auto 20px; max-width: 95%;}
a.text::before{ top: 0px; width: 13px; height: 13px; background-size: contain;}

article ul{ margin: 0 auto 20px; padding: 15px; max-width: 95%; border-radius: 5px; box-sizing: border-box;}
article h3{ margin: 10px 0 20px;}

article h4{  margin: 10px auto; padding: 0 0 0 15px; width: 95%; box-sizing: border-box;}
article h4::before{ top: 3px; width: 12px; height: 12px;}
article h4::after{ left: 4px; width: 4px; height: 4px;}

article h3+.table_01{ margin: 0 auto 10px;}
article .table_01{ margin: 0 auto 10px; width: 95%;}
article .table_01 b{ width: 80px;}
article .table_02{ margin: 0 auto 10px; width: 95%;}
article .table_02 b{ width: 33.3%;}

article .toggle_box{ margin: 5px 0;}
article ol.item_list{ width: 95%; margin: 5px auto 0;}
article ol.item_list li{ padding: 3px;}
article ol.item_list li+li{ margin: 0 0 0 5px; padding: 3px 10px;}
article ol.item_list li img{ width: 36px;}

article .item_note{ width: 95%; margin: 5px auto 0; box-sizing: border-box;}

.main_note{ padding: 20px 3% 40px;}
}

.gotop{ position: fixed; right: 3%; bottom: 5%; z-index: 10; cursor: pointer; transform: rotate(180deg); opacity: 0; pointer-events: none; transition: 1s;}
.gotop.active{ right: 4%; transform: rotate(0deg); pointer-events: visible; opacity: 1;}
.gotop img{ width: 100%;}
.gotop img:nth-child(2){ position: absolute; top: 0; left: 0; opacity: 0;}
.gotop:hover img{ opacity: 0;}
.gotop:hover img:nth-child(2){ opacity: 1;}
@media (max-width:1000px){
.gotop{ right: 10px; bottom: 20px; width: 10%; max-width: 100px;}
.gotop.active{ right: 20px;}
}


.overlay{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255,255,255,0.9); z-index: 11;}
.lightbox{ position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 5px; width: 600px; max-width: 95%; height: 60vh; background: #ff4550; border-radius: 15px; z-index: 12; box-sizing: border-box;}
.lightbox>div{ height: 100%; padding: 10px; background: #fed09e; border-radius: 10px; box-sizing: border-box;}
.lightbox>div>div{ height: 100%; padding: 20px; background: #fff; border-radius: 8px; text-align: center; overflow-y: auto; box-sizing: border-box;}
.lightbox .close{ position: absolute; bottom: 100%; right: 0; transform: translate(0,40%); cursor: pointer;}
.lightbox .lightbox_character{ position: absolute; top: 100%; right: 100%; height: 200px; transform: translate(60%,-80%);}
.lightbox>div>div::-webkit-scrollbar { width: 5px; background-color: transparent; border-radius: 50px;}
.lightbox>div>div::-webkit-scrollbar-thumb { background-color: #eee; border-radius: 50px;}

.lightbox h3{ position: relative; display: inline-block; margin: 0 0 30px; padding: 10px 40px; border-radius: 50px; background: #ff4550; color: #fff; font-size: 1rem;}
.lightbox h3::before{ position: absolute; top: calc(50% - 5px); left: 20px; display: block; content: ''; width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: #fff;}
.lightbox h3::after{ position: absolute; top: calc(50% - 5px); right: 20px; display: block; content: ''; width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px; background: #fff;}

.lightbox ol.item_list{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none;}
.lightbox ol.item_list li{ width: calc( ( 100% - 10px ) / 2 ); margin: 0; padding: 10px; border: 1px solid #fff0de; border-radius: 10px; box-sizing: border-box;}
.lightbox ol.item_list li img{ margin: 0 auto; max-width: 100%;}
.lightbox ol.item_list li span{ display: block; padding: 5px; border-radius: 5px; font-size: 0.875rem; background: #fff0de;}
@media (max-width:500px){
.lightbox>div{ padding: 5px;}
.lightbox>div>div{ padding: 30px 5px;}
.lightbox h3{margin: 0 0 20px;}
}


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