/* ------------@main------------ */
header{
    position: fixed;
    left: 0;top: 0;
    width: 100%;
    z-index: 990;
}
header a{
    text-transform: uppercase;
    padding: 0 .5rem;
    cursor: pointer;
    transform: scale(1);
    transition: all .2s;
    display: block;
}
header a:hover{
    transform: scale(1.1);
    color: #A142DD;
}
.head_inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}
.scroll_down{
    display: none;
}
#logo{
    margin: 0 1rem 0 0;
    width: 5rem;
}
#mainnav nav{
    display: flex;
}
#rightnav nav{
    display: flex;
}
.head_left{
    display: flex;
    align-items: center;
}
.esbtn a{
    display: inline-block;
    padding: .5rem 1.5rem;
    color: #fff;
    border-radius: 10rem;
    font-size: 1.5rem;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
}
.esbtn a span{
    position: relative;
    z-index: 1;
}
.esbtn a:after,
.esbtn a:before{
    content: '';
    width: 100%;
    height: 100%;
    left: 0;top: 0;
    background-color: #A142DD;
    position: absolute;
    border-radius: 10rem;
}
.esbtn a:hover{
    transform: scale(1.1);
}
.page_inner{
    background-image: url('../img/bg_desk.svg');
    height: 100vh;
    background-size: 1000vw;
    background-position: left center;
    background-repeat: no-repeat;
}
.page_inner[data-scroll-section]{
    display: flex;
    align-items: center;
}
.page_inner{
    white-space: nowrap;
}
.page_inner section{
    white-space: initial;
    position: relative;
    height: 100%;
    max-height: 55vw;
}
.es_wrap{
    padding: 10vh 0 3rem 7vw;
    position: relative;
    z-index: 10;
}
.visual_position{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.visual_position > div{
    position: absolute;
}
.click_change{
    position: relative;
    cursor: pointer;
}
.click_change img{
    width: 100%;
    height: auto;
}
.click_change img:last-child{
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: 0;
}
.click_change:hover img{
    opacity: 0;
}
.click_change:hover img:last-child{
    opacity: 1;
}
.bubblebox{
    z-index: 10;
}
.bubblebox > div{
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 2rem;
    padding: 1.5rem;
    position: relative;
}
.secc_countcart > div:before,
.bubblebox > div:before{
    content: '';
    background-image: url('../img/bubble_arrow.svg');
    background-size: cover;
    position: absolute;
    width: 4rem;
    height: 3rem;
    left: 40%;
    bottom: -3rem;
}
.square_btn{
    margin: 2rem auto;
    text-align: center;
}
.square_btn span{
    display: inline-block;
    padding: .5rem 1.5rem;
    border: 2px solid #000;
    background-color: #fff;
    text-transform: uppercase;
    font-size: 1.4rem;
}
.hover_shake:hover img{
    animation: shakeRotate 1s infinite;
}
#loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    transition: all .5s cubic-bezier(0.87, 0, 0.13, 1);
}
#loader > div{
    width: 100%;
    height: 100%;
    background-color: #DAFAF5;
    animation: loadaerAni .5s infinite;
}
#loader span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #A142DD;
    font-weight: bolder;
    font-size: 2rem;
    text-align: center;
}
#loader.loaded{
    transform: scaleY(0);
}
@keyframes loadaerAni {
    0%{
        background-color: #DAFAF5;
    }20%{
        background-color: #F8F8D9;
    }40%{
        background-color: #FFE8F7;
    }60%{
        background-color: #CFE9F9;
    }80%{
        background-color: #F4EBFD;
    }100%{
        background-color: #DDFAF9;
    }
}
/* ------------@section_a------------ */
.es_section_a{
    width: 100vw;
}
.es_section_a .visual_position img{
    width: 21vw;
}
.mvtext{
    font-size: 7vw;
    line-height: 1;
    font-weight: bolder;
    margin: 2rem 0 2rem;
}
.mvtext span{
    position: relative;
    display: inline-block;
}
.mvtext img{
    width: 5%;
    height: auto;
    position: absolute;
}
.mvtext_1 img:nth-child(1){
    left: -6%;
    top: 2%;
    width: 10%;
}
.mvtext_1 img:nth-child(2){
    left: 44%;
    top: -7%;
}
.mvtext_1 img:nth-child(3){
    right: -5%;
    top: -9%;
    width: 8%;
}
.mvtext_1 img:nth-child(4){
    right: 26%;
    bottom: -30%;
    width: 8%;
}
.mvtext_1 img:nth-child(5){
    right: 8%;
    bottom: 5%;
    transform: rotate(45deg);
}
.mvtext_2 img:nth-child(1){
    left: -7%;
    width: 18%;
    transform: rotate(-45deg);
}
.mvtext_2 img:nth-child(2){
    right: 15%;
    bottom: 4%;
    width: 18%;
    transform: rotate(-45deg);
}
.mvtext_3 img:nth-child(1){
    bottom: 5%;
    right: -11%;
    width: 20%;
    transform: rotate(55deg);
}
.mvtext_3 img:nth-child(2){
    width: 35%;
    left: -23%;
    bottom: -15%;
}
.es_section_a .es_wrap{
    width: 70%;
}
.es_section_a .bubblebox:nth-child(1){    
    width: 23vw;
    right: 31vw;
    bottom: 22vw;
    z-index: 11;
}
.es_section_a .bubblebox:nth-child(2) > div:before{
    transform: scaleX(-1);
}
/* @mvcats */
.mvcat-1{
    left: 0;
    bottom: 6vh;
}
.mvcat-2{    
    bottom: 0;
    left: 16vw;
}
.mvcat-3{
    bottom: 0;
    left: 35vw;
}
.mvcat-4{    
    bottom: 3vh;
    right: 24vw;
}
.mvcat-5{    
    position: absolute;
    left: 0;
    bottom: 13vw;
}
.mvcat-6 {
    right: 5vw;
    bottom: -1vw;
}
.blood_box {
    right: 13vw;
    bottom: 10vh;
}
.kidnap_bag{
    left: 27vw;
    bottom: 10vw;
}
.es_section_a .kidnap_bag img{
    width: 16vw;
    animation: shakeRotate 1s infinite;
}
/* @hole */
.path_wall{
    fill:#FFFFF3;
}
.ellipse_hole{
    stroke:#000000;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.path_line{
    fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.jump_hole svg{
    width: 13vw;
    height: auto;
    margin: 0 -4px 0 0;/* 防止破圖 */
}
.jump_hole image{
    transform: scale(.23) translate3d(25rem,50%,0);
    transition: transform .3s;
}
.jump_hole:hover image{
    transform: scale(.23) translate3d(0,50%,0);
}
.jump_hole{
    right: 5vw;
    top: 10vw;
    overflow: hidden;
}
/* ------------@section_b------------ */
.es_section_b{
    width: 80vw;
}
.es_section_b .es_wrap{
    padding-left: 0;
    margin: 8vh 0 0;
}
.secb_layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4vw 0 0;
}
.secb_layout > div:first-child{
    width: 22vw;
}
.es_section_b h2{
    margin: 0 0 1rem;
}
.cat_frame_a{
    display: flex;
}
.frame_cat{    
    position: relative;
    width: 16vw;
    height: 17.7vw;
    margin: 1rem;
    transform-origin: 50% 0;
    transition: transform .3s;
    cursor: pointer;
}
.frame_cat:hover{
    transform: rotate(-5deg);
}
.frame_cat figure{
    position: absolute;
    left: 11%;
    width: 80%;
    bottom: 9%;
}
.frame_cat:after{
    content: '';
    background-image: url('../img/gal_frame-blue.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.cat_frame_a > div:nth-child(2) .frame_cat:after{
    background-image: url('../img/gal_frame-orange.svg');
}
.cat_frame_a > div:nth-child(3) .frame_cat:after{
    background-image: url('../img/gal_frame-green.svg');
}
.esb_cat{
    bottom: 0;
    left: 16vw;
    width: 22vw;
}
.es_section_b .bubblebox{
    bottom: 5vw;
    left: 33vw;
    max-width: 300px;
}
.es_section_b .bubblebox > div:before{
    left: 1px;
    bottom: -1.2rem;
    transform-origin: 0 0;
    transform: scaleX(-1) rotate(-90deg);
}
/* ------------@section_c------------ */
.es_section_c{
    width: 185vw;
}
.es_section_c .es_wrap{
    display: flex;
    height: 100%;
}
.secc_layout{
    display: flex;
    position: relative;
    z-index: 2;
    align-items: center;
}
.secc_layout.type_a figure{
    width: 21vw;
}
.secc_layout.type_a{
    padding: 10vh 0 0;
}
.secc_textarea{
    width: 25vw;
    position: relative;
}
.secc_countcart{
    margin: 0 0 0 3vw;
    min-width: 18rem;
    position: relative;
}
.secc_countcart > div{
    position: relative;
    border: 2px solid #000;
    padding: 1.5rem;
    border-radius: 2rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #A142DD;
    margin: 0 0 2rem;
    z-index: 1;
}
.seccc_title{
    font-size: 2.2rem;
    margin: 0 0 10px;
    font-weight: bolder;
    display: flex;
    align-items: center;
    text-align: center;
}
.seccc_title img{
    width: 2rem;
    height: auto;
    margin: 0 .5rem 0 0;
}
.seccc_number{
    max-width: 200px;
}
.seccc_number > div{
    position: relative;
    border-radius: 10rem;
    border: 2px solid #A142DD;
}
.seccc_number .minus,
.seccc_number .plus{
    position: absolute;
    left: -2px;
    z-index: 1;
    top: 0;
    width: 3rem;
    height: 3rem;
    padding: .7rem;
    border-radius: 100%;
    background-color: #fff;
    border: 2px solid #A142DD;
    transition: background-color .3s;
    cursor: pointer;
}
.seccc_number .minus:hover,
.seccc_number .plus:hover{
    background-color: #A142DD;
}
.seccc_number .plus{
    left: initial;
    right: -2px;
}
.seccc_number svg{
    width: 100%;
    height: auto;
    fill: #A142DD;
    transition: fill .3s;
}
.seccc_number .minus:hover svg,
.seccc_number .plus:hover svg{
    fill: #fff;
}
.seccc_number input{
    height: calc(2rem - 4px);
    border-radius: 10rem;
    width: 100%;
    border: 0;
    color: #A142DD;
    font-size: 1.4rem;
    font-weight: bolder;
    text-align: center;
    padding: 1.5rem;
    background: #a142dd21;
}
.secc_countcart .esbtn a{
    width: 100%;
    margin: 1rem 0 0;
}
.plus.click,
.minus.click{
    animation: clickAni .2s;
}
.black_board{
    margin: 0 3vw -5vw;
    position: relative;
}
.black_board img:first-child{
    width: 24vw;
    height: auto;
}
.black_board img:last-child{
    position: absolute;
    bottom: -4vw;
    left: 20%;
    width: 11vw;
}
.secc_layout.typeb{
    align-items: center;
}
.secc_layout.typeb .secc_textarea{
    width: 30vw;
}
.secc_bubble_cats{
    display: flex;
    height: 20vw;
    margin: 2rem 0 -4vw 0;
}
.secc_bubble_cats figure{
    width: 17vw;
}
.secc_bubble_cats .bubblebox{
    margin: 0 0 0 0;
    min-width: 17rem;
}
.secc_bubble_cats > div:last-child{    
    margin: 6vw 0 0 -5vw;
    position: relative;
    z-index: 11;
}
.sickcat{    
    right: 56vw;
    width: 11vw;
    top: 30vh;
}
.secc_kidnap_bag{
    right: 25vw;
    bottom: 3%;
    width: 11vw;
}
.jump_hole.alient{
    right: 13vw;
    top: 23vw;
}
.jump_hole.alient .path_wall{
    fill: #CFE9F9;
}
.es_section_c .visual_position .bubblebox{    
    right: 21vw;
    top: 19vw;
}

/* ------------@section_d------------ */
.esd_wrap{
    display: flex;
    align-items: center;
}
.es_section_d{
    display: flex;
    width: 140vw;
    align-items: center;
    justify-content: space-between;
}
.secd_textarea{
    width: 32vw;
    margin: 0px 1rem 0 0;
}
.secd_textarea img{
    margin: 0 0 .5rem;
    width: 38px;
    height: auto;
}
.secd_textarea p{
    margin: 0 0 1rem;
}
.es_section_d .square_btn span{
    font-size: 1rem;
}
.secd_layout > div{
    display: inline-block;
}
.secd_layout .square_btn{
    margin: 1rem 0;
}

/* ------------@section_e------------ */
.es_section_e{
    width: 115vw;
}
.ese_percent{
    display: flex;
}
.ese_percent > div{
    position: relative;
    padding: 1rem 2rem 0 0;
    width: 16vw;
}
.ese_percent > div:nth-child(3){
    width: 24vw;
}
.ese_percent > div:before{
    content: '';
    top: 6.5rem;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: #fff;
    position: absolute;
}
.ese_percent .ball{
    position: absolute;
    left: 0;
    top: 5.8rem;
    width: 26px;
    height: 26px;
    border-radius: 100%;
    background-color: #fff;
}
.ese_percent .ball:before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28% 0 0 -31%;
    width: 60%;
    height: 60%;
    border-radius: 100%;
    background-color: #A661EB;
}
.ese_percent .number{
    font-size: 3rem;
    color: #A661EB;
    font-weight: bolder;
}
.ese_percent > div:last-child:before{
    display: none;
}
.mile_img{
    width: 8rem;
    height: auto;
    margin: 0 0 2rem;
}
.ese_percent > div:nth-child(2) .number{ color: #4F92ED }
.ese_percent > div:nth-child(3) .number{ color: #64BC72 }
.ese_percent > div:nth-child(4) .number{ color: #F08A3F }
.ese_percent > div:nth-child(5) .number{ color: #EB5B5B }

.ese_percent > div:nth-child(2) .ball:before{ background-color: #4F92ED ; }
.ese_percent > div:nth-child(3) .ball:before{ background-color: #64BC72; }
.ese_percent > div:nth-child(4) .ball:before{ background-color: #F08A3F; }
.ese_percent > div:nth-child(5) .ball:before{ background-color: #EB5B5B; }
.ese_percent .des li{
    position: relative;
    display: block;
    margin: 0 0 10px;
}
.ese_percent .des li:before{
    content: '';
    position: absolute;
    top: 10px;
    left: -13px;
    width: 6px;
    height: 6px;
    background-color: #000;
    border-radius: 100%;
}
.skele_cat{
    left: 10vw;
    bottom: 0;
    width: 20vw;
}
.black_dead_cat{
    left: 50%;
    bottom: 0;
    width: 20vw;
}
.es_section_e .bubblebox{
    left: 35vw;
    bottom: 6vw;
    width: 25vw;
}
.es_section_e .bubblebox > div:before{    
    left: initial;
    right: -3.9rem;
    bottom: -2.1rem;
    transform-origin: 0 0;
    transform: scale(1) rotate(-90deg);
}
/* ------------@section_f------------ */
.es_section_f{
    width: 84vw;
}
.esf_wrap{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 0 0 5vw;
    margin: -5vh 0 0;
    position: relative;
    z-index: 1;
}
.esf_textarea{
    width: 40vw;
}
.esf_textarea p{
    margin: 0 0 .5rem;
}
.esf_img{    
    position: relative;
}

.esg_faq{
    padding: 1.5rem 1rem 1.5rem 1.5rem;
    border: 2px solid #000;
    background-color: #fff;
    position: absolute;
    z-index: 10;
    left: 13vw;
    bottom: 37%;
    width: 28vw;
    border-radius: 30px;
}
.esg_faq:before{
    content: '';
    background-image: url(../img/bubble_arrow.svg);
    background-size: cover;
    position: absolute;
    width: 5vw;
    height: 4vw;
    left: 30%;
    bottom: -4vw;
    transform: scaleX(-1);
}
.esg_fag_inner{
    height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 0 1rem 0 0;
}
.esg_fag_inner::-webkit-scrollbar{
    background-color: #e6e6e6;
    width: 5px;
    border-radius: 10px;
}
.esg_fag_inner::-webkit-scrollbar-thumb{
    background-color:#E89659;
    border-radius: 10px;
}
.esg_fag h2{
    font-weight: bolder;
}
.esg_fag_inner h4,
.esg_fag_inner h3{
    color: #E89659;
    margin: 1.5rem 0 .5rem;
}
.esg_fag_inner p{
    margin: 0 0 .5rem;
}
/* ------------@section_g------------ */
.es_section_g{
    width: 93vw;
}
.manybox {    
    right: 25%;
    bottom: 20px;
    width: 30%;
}
.boxtop_cat {
    right: 0;
    bottom: 80%;
    z-index: 1;
    width: 20vw;
    position: absolute;
}
.poison_bucket_cat {
    width: 20vw;
    left: 6vw;
    bottom: 0;
}
/* ------------@section_h------------ */
.es_section_h{
    width: 200vw;
}
.esh_wrap{
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 0 0 4vw 25vw;
}
.ballon{
    position: absolute;
    display: inline-block;
    z-index: 2;
    max-width: 290px;
}
.ballon img{
    width: 18vw;
    max-width: none;
    transform-origin: 50% 100%;
    animation: ballonMove 1.5s infinite linear;
}
.ballon_cat{
    width: 16vw;
    margin-left: -3vw;
    position: relative;
}
.ballon_cat > img{
    position: relative;
    z-index: 1;
}
.ballon_cat:nth-child(odd){
    padding: 0 0 5vw;
}
.ball_text{
    position: absolute;
    text-align: center;
    width: 100%;
    top: 17%;
    animation: updownMove 1.5s infinite linear;
    z-index: 1;
}
.ball_text span{
    font-weight: bolder;
    font-size: 2rem;
    display: block;
}
.ballon_cat:nth-child(4) .ball_text span{
    font-size: 1.4rem;
}
.ballon_cat:nth-child(5) .ball_text span{
    font-size: 1.4rem;
}
.ballon_cat:nth-child(6) .ball_text span{
    font-size: 1.4rem;
}
.ballon_cat:nth-child(1) .ballon{
    left: -3.5vw;
    bottom: 8.2vw;
}
.ballon_cat:nth-child(2) .ballon{
    left: 1vw;
    bottom: 3vw;
}
.ballon_cat:nth-child(3) .ballon{
    left: 3vw;
    bottom: 15vw;
    z-index: 0;
}
.ballon_cat:nth-child(4) .ballon{
    left: 4vw;
    bottom: 3vw;
}
.ballon_cat:nth-child(5) .ballon{
    left: 2vw;
    bottom: 9vw;
}
.ballon_cat:nth-child(6) .ballon{
    left: 5vw;
    bottom: 4vw;
}
.ballon_cat:nth-child(1) .ball_text,
.ballon_cat:nth-child(1) .ballon img{ animation-delay: .1s; }
.ballon_cat:nth-child(2) .ball_text,
.ballon_cat:nth-child(2) .ballon img{ animation-delay: .2s; }
.ballon_cat:nth-child(3) .ball_text,
.ballon_cat:nth-child(3) .ballon img{ animation-delay: .3s; }
.ballon_cat:nth-child(4) .ball_text,
.ballon_cat:nth-child(4) .ballon img{ animation-delay: .4s; }
.ballon_cat:nth-child(5) .ball_text,
.ballon_cat:nth-child(5) .ballon img{ animation-delay: .5s; }
.ballon_cat:nth-child(5) .ball_text,
.ballon_cat:nth-child(5) .ballon img{ animation-delay: .6s; }

.last_kill_cat{
    width: 16vw;
}
.last_blackboard{
    display: flex;
    align-items: flex-end;
    margin: 0 0 4rem 4rem;
}
.social_board{
    position: relative;
    width: 23vw;
}
.social_media{
    position: absolute;
    top: 6vw;
    text-align: center;
    width: 100%;
}
.social_media img{
    display: block;
    margin: 0 auto;
    width: 5vw;
}
.social_media a{
    display: block;
    color: #4AAADD;
    line-height: 1.2;
    transition: transform .3s;
}
.social_media a:hover{
    transform: scale(1.1);
}
.social_media a:last-child{
    color: #AE64E5;
    margin: 1rem 0 0 -1rem;
}
.last_kidnap{
    position: absolute;
    bottom: -3vw;
    right: -4vw;
    width: 11vw;
}
.ghost_cat{
    position: absolute;
    bottom: 11vw;
    right: -11vw;
    width: 11vw;
    animation: updownMove 1.5s infinite linear;
}
/* ------------@animation------------ */
@keyframes clickAni {
    0%{
        transform: scale(1);
    }50%{
        transform: scale(1.4);
    }100%{
        transform: scale(1);
    }
}
@keyframes changeSrc {
    0%{
        transform: scale(1);
        opacity: 1;
    }50%{
        transform: scale(0);
        opacity: 0;
    }100%{
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes shakeRotate {
    0%{
        transform: rotate(0);
    }10%{
        transform: rotate(3deg);
    }20%{
        transform: rotate(-3deg);
    }30%{
        transform: rotate(3deg);
    }40%{
        transform: rotate(0);
    }60%{
        transform: rotate(-3deg);
    }70%{
        transform: rotate(3deg);
    }80%{
        transform: rotate(-3deg);
    }90%{
        transform: rotate(3deg);
    }100%{
        transform: rotate(0);
    }
}
@keyframes ballonMove{
    0%{
        transform: scaleY(1);
    }50%{
        transform: scaleY(.9);
    }100%{
        transform: scaleY(1);
    }
}
@keyframes updownMove {
    0%{
        transform: translateY(0);
    }50%{
        transform: translateY(2rem);
    }100%{
        transform: translateY(0);
    }
}
@keyframes shining {
    0%{
        opacity: 1;
    }50%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}