﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&display=swap');



/*內頁麵包*/
.news    .breadcrumb-area {
    top: calc(50% - 26px);
}
.news.today    .breadcrumb-area,
.price  .breadcrumb-area, 
.guide    .breadcrumb-area {
    top: calc(50% - 25px);
}
.contact  .breadcrumb-area,
.shopping  .breadcrumb-area,
.news.calendar    .breadcrumb-area {
    top: calc(50% - 13px);
}
.parkinfo  .breadcrumb-area {
    top: calc(50% - 11px);
}
.faq    .breadcrumb-area {
    top: calc(50% - 28px);
}

/*Taipei → WOC*公車時間*/
.traffic   .timet_be  .go_treex      th:last-child{
	width:20%;
	}
	

/*----------*/





/*內頁標題*/
/*.h1 .sub {
    bottom: 0;
	    top: unset!important;
 
}
.block-title .icon-group.modify-top {
    top: calc(50% - 14px);
}
.block-title:before {
    bottom: -4px;
	    top: unset!important;
}*/
.contact  .block-title:before,
.education    .block-title:before {
    top: calc(50% + 30px);
}
.news.calendar.today   .block-title:before,
.news  .block-title:before {
    top: calc(50% + 17px);
}
.parkinfo   .block-title:before,
.shopping   .block-title:before,
.news.calendar     .block-title:before,
.news.recommend    .block-title:before {
    top: calc(50% + 31px);
}
.faq.parkinfo     .block-title:before {
    top: calc(50% + 30px);
}
.faq   .block-title:before,
.price    .block-title:before,
.guide   .block-title:before {
    top: calc(50% + 16px);
}
.traffic    .block-title:before {
    top: calc(50% + 25px);
}
.faq   .block-title .icon-group,
.news.calendar .block-title .icon-group,
.news   .block-title .icon-group {
    top: calc(50% - 20px);
	}
.guide   	.block-title .icon-group.modify-top {
    top: calc(50% - 16px);
}
.faq.parkinfo    .block-title .icon-group{
    top: calc(50% - 2px);
}
.traffic    .block-title .icon-group {
    top: calc(50% - 12px);
}
.news.calendar     .block-title .icon-group{
    top: calc(50% - 6px);
}
.news.recommend   .block-title .icon-group {
    top: calc(50% - 0px);
}
.price  .block-title .icon-group,
.news.calendar.today   .block-title .icon-group {
    top: calc(50% - 20px);
}

/*----------------------------------*/

/*.block-title.short-words:before {
    top: calc(0% + 30px);
    transform: translateY(-100%);
}*/
.block-title.short-words:before {
    top: calc(50% + 15px);
}
.h1 {
    /*padding: 45px 100px 0;
    margin-bottom: 10px;*/
}
.h1 .main {
    position: relative;
    display:none;
}
.contact   .custom-file-label::after {
    content: "Browse";
    
}

.block-title:before {
    top: calc(50% + 20px);
}
.block-title .h1 .sub .bg {
    position: absolute;
    width: 100%;
    height: calc(100% + 52px);
    background: #fff;
    left: 0;
    top: 0;
    z-index: -1;
}
.block-title .h1 .sub:before, 
.block-title .h1 .sub:after {
    z-index: 10;
}


.recommend-section .block-title .h1.long-words .sub:before, body.recommend .block-title .h1.long-words .sub:before {
    bottom: -20px;
}
.recommend-section .block-title .h1.long-words .sub:after, body.recommend .block-title .h1.long-words .sub:after {
    bottom: -20px;
}
body.home   .h1.long-words.dow_dkl {
    padding-top: 82px;
}
body.home    .h1.long-words.sop_sok {
    padding-top: 76px;
}
body.home   .shop-section .block-title .icon-group,
body.home .download-section   .block-title .icon-group {
    top: calc(50% - 10px);
}
	body.home   .recommend-section    .block-title .icon-group {
    top: calc(50% - 12px);
}
body.home  .block-title .icon-group{
	    top: calc(50% - 16px);
	}
.block-title.short-words .icon-group {
    top: calc(0% - -3px);
 
}
.breadcrumb-area {
    top: calc(50% - 20px);
}
.pea_s ul li > ul > li label {
    padding-right: 0px;
}
.pea_s ul li > ul > li label:before {
    right: -27px;

}
.food_x .titt p.time {
    background: url(../../images/about/time.svg) no-repeat left 5px;

}

.price .content table.table_eri td span.children_d {
    width:80%;
}

.price .content table.table_eri td span.ticket_x {
    width: auto;
    display: block;
}
.price .content table.table_eri td   .d-lg-inline-block {
    display: block;
}

/*********** 活動效果畫面 ************/
.pos-fixed{
    position:fixed;
}
.icon.arrow-tail{
    width:16px;
    height:23px;
    background-image: url('../../images/activity_effect/icon_arrow.svg');
    background-size:100%;
}
.btn.purple {
    font-size: 1.25rem;
    background: #983f90;
    color: #fff;
    padding: 11px 40px;
    border-radius: 30px;
    box-shadow: 2px 2px 6px rgba(80,80,80,0.5);
    background-size:100%;
    /*font-family: 'Sigmar One', cursive;*/
    font-family: 'Fredoka One',cursive;
    letter-spacing: 2px;
}
.btn.purple:hover{
    animation:rubberBand 1.5s;
    background:#e2135e;
}
.btn.purple:hover .icon{
    -webkit-animation-name: butover;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: infinite;
    animation-name: butover;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}

/*.page-cover-section{
    position: fixed;
    width: 100vw;
    height:100vh;
    left:0;
    top:0;
    overflow-y:scroll;
    overflow-x:hidden;
    background: url('../../images/activity_effect/act_bg.jpg') center center no-repeat;
    background-size:cover;
    z-index: 99999;
}
.page-cover-section .page-cover-wrapper {
    
    position:relative;
    width:100%;
    height:1080px;

    opacity: 1;
    transition: all .8s ease;
}*/
.page-cover-section {
    position: fixed;
    width: 100vw;
    height:100vh;
    left:0;
    top:0;
    overflow-y:scroll;
    overflow-x:hidden;
    background: url('../../images/activity_effect/act_bg.jpg') center center no-repeat;
    background-size:cover;
    z-index: 99999;

    opacity: 1;
    transition: all .8s ease;
}
.page-cover-section.fade-out{
    opacity:0;
    pointer-events:none;
}
/*.page-cover-section .close-area {
    right: 0;
    top: 0;
    z-index: 30;
}*/



/*.page-cover-section .close-area .btn.btn-close {
    font-size: 2.25rem;
    color: #ffffff;
    padding: 14px 20px;
    background: #0288ff;
    line-height: 1;
    border-radius: 0;
    box-shadow: 1px -2px 10px #000;
}

.page-cover-section .close-area .btn.btn-close:hover {
    transform: rotate(180deg);
    border-radius: 50%;
    background: #e61e2a;
}*/
.page-cover-section .editor-txt .pic img{
    animation:bounce 3s infinite;
}
.page-cover-section .tree.tr01 {
    left: 0;
    bottom: 0;
    z-index: 11;
}
.page-cover-section .tree.tr02 {
    right: 0;
    bottom: 0;
    z-index: 11;
}
.page-cover-section .waterslide-area {
    left: 0;
    top: 0;
    width: 100%;
    height: 900px;
    min-height: 100%;
    overflow:hidden;
    position:absolute;
}
.page-cover-section .waterslide{
    width: 100%;
    height: 100%;
}
.page-cover-section .waterslide.ws01{
        z-index: 10;
    position: absolute;
    bottom:0;
}

.page-cover-section .waterslide.ws02{
    z-index: 1;
    left: 0;
    top: 0;
}
.page-cover-section .waterslide.ws01 img,
.page-cover-section .waterslide.ws02 img{
    width:100%;
    height:100%;
}
.page-cover-section .waterflow.wf01{
    left:0;
    top:0;
    z-index:2;
    width: 100%;
    height: 100%;
}
.page-cover-section .waterflow.wf01 img{
    width:100%;
    height:100%;

    transform-origin:left top;

    -webkit-animation-name: waterflow;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-name: waterflow;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.page-cover-section .waterflow.wf02{
    left:0;
    top:0;
    z-index:1;
    width: 100%;
    height: 100%;
    /*left: 19%;
    top: 0;
    z-index: 1;
    transform: rotate(0deg);
    transform-origin: right top;
    width: 13%;*/
}
.page-cover-section .waterflow.wf02 img{
    width: 100%;
    height: 100%;

    
    transform-origin:left top;

    -webkit-animation-name: waterflow2;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-name: waterflow2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

.page-cover-section .people-area {
    z-index: 11;
     left: -12%;
    top: -50%;
    transform: scale(0.5);
    /*left: 8%;
    top: 0;*/

    -webkit-animation-name: peopledown;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-name: peopledown;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    
}
.page-cover-section .people-area .people.pp01 img{
    -webkit-animation-name: peoplemove;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-name: peoplemove;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}
.page-cover-section .people-area .dialog.dl1 {
    top: 0;
    left: 80px;
}
.page-cover-section .people-area .dialog.dl2 {
    top: 50px;
    right: 50px;
}
.page-cover-section .people-area .dialog.dl1 img{
    -webkit-animation-name: dialogmove1;
    -webkit-animation-duration: 5.2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: dialogmove1;
    animation-duration: 5.2s;
    animation-iteration-count: infinite;
}
.page-cover-section .people-area .dialog.dl2 img{
    -webkit-animation-name: dialogmove1;
    -webkit-animation-duration: 4.8s;
    -webkit-animation-iteration-count: infinite;
    animation-name: dialogmove1;
    animation-duration: 4.8s;
    animation-iteration-count: infinite;
}
.page-cover-section .people-area .waterspry.sp01{
    bottom: 29px;
    left: 0;
}
.page-cover-section .people-area .waterspry.sp01 img{
    -webkit-animation-name: watermove1;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-name: watermove1;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

.page-cover-section .waterspray.sp02{
    z-index: 10;
    bottom: 0;
    left: calc(50% - 10%);
    width: 20%;
}
.page-cover-section .waterspray.sp02 img{
    -webkit-animation-name: watermove2;
    -webkit-animation-duration: 11s;
    -webkit-animation-iteration-count: infinite;
    animation-name: watermove2;
    animation-duration: 11s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.page-cover-section .waterspray.sp03{
    z-index: 11;
    bottom: 0;
    left: calc(77% - 6%);
    width: 12%;
}
.page-cover-section .waterspray.sp03 img{
    transform-origin:left bottom;
    -webkit-animation-name: watermove3;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-name: watermove3;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.page-cover-section .waterspray.sp04{
    z-index: 10;
    top: 20%;
    left: -1%;
    width: 20%;
}
.page-cover-section .waterspray.sp04 img{
    -webkit-animation-name: watermove2;
    -webkit-animation-duration: 13s;
    -webkit-animation-iteration-count: infinite;
    animation-name: watermove2;
    animation-duration: 13s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.page-cover-section .waterspray.sp05{
    z-index: 11;
    top: 9%;
    right: 18%;
    width: 10%;
}
.page-cover-section .waterspray.sp05 img{
    -webkit-animation-name: watermove2;
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
    animation-name: watermove2;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.page-cover-section .waterspray.sp06{
    z-index: 11;
    top: 8%;
    right: 10%;
    width: 10%;
}
.page-cover-section .waterspray.sp06 img{
    -webkit-animation-name: watermove2;
    -webkit-animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-name: watermove2;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
    animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
.page-cover-section .editor-txt .btn-area {
    margin: 0;
    right: 32px;
    bottom: -20px;
}
.page-cover-section .editor-txt .btn-area .btn .icon {
    margin-top: 4px;
}

@-webkit-keyframes waterflow {
    0%,100%  {transform:scale(1,1);}
	20%,30%  {transform:scale(1.2,1.1);}
	50% {transform:scale(1.3,1.2);}
    80% {transform:scale(1.3,1.2);}
}
@keyframes waterflow {
    0%,100%  {transform:scale(1,1);}
	20%,30%  {transform:scale(1.2,1.1);}
	50% {transform:scale(1.3,1.2);}
    80% {transform:scale(1.3,1.2);}
}

@-webkit-keyframes waterflow2 {
    0%,100%  {transform:scale(1,1);}
	20%,65%  {transform:scale(1.05,1);}
	45% {transform:scale(1,1.05);}
    80% {transform:scale(1.05,1);}
}
@keyframes waterflow2 {
    0%,100%  {transform:scale(1,1);}
	20%,65%  {transform:scale(1.05,1);}
	45% {transform:scale(1,1.0.5);}
    80% {transform:scale(1.05,1);}
}



@-webkit-keyframes peopledown {
    0%  {
        left: -23%;
        top: -50%;
        transform: scale(0.5);
    }
    /*20%{
        left: 0;
        top: 4%;
        transform: scale(0.7);
    }*/
	100%{
        left: 55%;
        top: 110%;
        transform: scale(1.3);
	}
}
@keyframes peopledown {
    0%  {
        left: -23%;
        top: -50%;
        transform: scale(0.5);
    }
    /*20%,40%{
        left: 0;
        top: 4%;
        transform: scale(0.7);
    }*/
	100%{
        left: 55%;
        top: 110%;
        transform: scale(1.3);
    }
}

@-webkit-keyframes peoplemove {
    0%,100%  {transform:translate(0,0);}
	20%,30%,40%  {transform:translate(0,20px);}
	25%,35% {transform:translate(0,0);}
    45%,55%,65%,80% {transform:translate(30px,5px);}
    50%,65%,90% {transform:translate(-40px,0);}
}
@keyframes peoplemove {
    0%,100%  {transform:translate(0,0);}
	20%,30%,40%  {transform:translate(0,20px);}
	25%,35% {transform:translate(0,0);}
    45%,55%,65%,80% {transform:translate(30px,5px);}
    50%,65%,90% {transform:translate(-40px,0);}
}


@-webkit-keyframes dialogmove1 {
    0%,100%  {transform:translateY(0);}
	50%{transform:translateY(10px);}
}
@keyframes dialogmove1 {
    0%,100%  {transform:translateY(0);}
	50%{transform:translateY(10px);}
}
@-webkit-keyframes watermove1 {
    0%,100%  {transform:scale(1) translate(0,0);}
	20%,30%,40%  {transform:scale(1) translate(0,20px);}
	25%,35% {transform:scale(1) translate(0,0);}
    45%,55%,65%,80% {transform:scale(1.1) translate(-10px,-10px);}
    50%,65%,90% {transform:scale(1) translate(10px,23px);}
}
@keyframes watermove1 {
    0%,100%  {transform:scale(1) translate(0,0);}
	20%,30%,40%  {transform:scale(1) translate(0,20px);}
	25%,35% {transform:scale(1) translate(0,0);}
    45%,55%,65%,80% {transform:scale(1.1) translate(-10px,-10px);}
    50%,65%,90% {transform:scale(1) translate(10px,23px);}
}
@-webkit-keyframes watermove2 {
    0%,100%  {transform:scale(1) translate(0,0);}
	30%,40%,90%{transform:scale(0.95) translate(10px,0);}
    50%,80%{transform:scale(1) translate(0,15px);}
    70%{transform:scale(0.9) translate(10px,5px);}
}
@keyframes watermove2 {
    0%,100%  {transform:scale(1) translate(0,0);}
	30%,40%,90%{transform:scale(0.95) translate(10px,0);}
    50%,80%{transform:scale(1) translate(0,15px);}
    70%{transform:scale(0.9) translate(10px,5px);}
}

@-webkit-keyframes watermove3 {
    0%,60%  {transform:scale(0) rotate(-90deg) translate(0,-100px);}
    70%{transform:scale(0) rotate(-45deg) translate(0,0);}
	100%{transform:scale(1) rotate(0) translate(0,0);}
}
@keyframes watermove3 {
    0%,60%  {transform:scale(0) rotate(-90deg) translate(0,-100px);}
	70%{transform:scale(0) rotate(-45deg) translate(0,0);}
    100%{transform:scale(1) rotate(0) translate(0,0);}
}
@-webkit-keyframes butover {
    0%   {transform:translateX(0px);}
	50%  {transform:translateX(5px);}
	100% {transform:translateX(0px);}
}
@keyframes butover {
    0%   {transform:translateX(0px);}
	50%  {transform:translateX(5px);}
	100% {transform:translateX(0px);}
}

.page-cover-section .editor-txt {
    margin-top: 120px;
    position: relative;
    z-index: 15;
}
.page-cover-section .editor-txt .info-txt {
    background: #fff;
    border-radius: 20px;
    padding: 37px 32px;
    box-shadow: 0 0 10px #a5a5a5;
    width: 70%;
    margin: 0 auto;
    position: relative;
    font-size: 1.25rem;
    color: #161616;
    line-height: 1.7;
    margin-top: -20px;
}
.page-cover-section .editor-txt .info-txt:before {
    position: absolute;
    content: "";
    display: block;
    width: calc(100% - 7px);
    height: calc(100% - 7px);
    border: solid 2px #0991da;
    border-radius: 20px;
    left: 3px;
    top: 3px;
    pointer-events: none;
}
.page-cover-section .editor-txt .mttxt {
    max-height: 300px;
    overflow-y: auto;
}
.page-cover-section .editor-txt .pic{
    position:relative;
    z-index:1;
}
.page-cover-section .editor-txt .border-line{
    width:15px;
    height:80px;
    position:absolute;
    top:-80px;
    background:#fff;
}
.page-cover-section .editor-txt .border-line.bin01{
    left:20px;
}
.page-cover-section .editor-txt .border-line.bin02{
    right:20px;
}
.page-cover-section .editor-txt .border-line:before,
.page-cover-section .editor-txt .border-line:after{
    position:absolute;
    content:"";
    display:block;
    
}
.page-cover-section .editor-txt .border-line:before{
    width:2px;
    background:#0991da;
    height:calc(100% + 4px);
    left:50%;
    transform:translateX(-50%);
    top:0;
}
.page-cover-section .editor-txt .border-line:after{
    height:100%;
    width:100%;
    box-shadow:0 -6px 10px #a5a5a5;
    left:0;
    top:0;
}

.preloader{
    position:fixed;
    width:100%;
    height:100%;
    background:#fff;
    z-index: 9999;
}



/*********** 活動效果畫面 ************/

@media (min-width: 992px) {
    .footer-content > .container {
        max-width: 1433px;
    }

}
@media (max-width: 1500px) {
.side.side1 .navbar-nav .dropdown-menu li.nav-title a {
 white-space: inherit;
}
.shopping_x .dragon_bg ul li.handle_w {
      background-position-y: 4px;
    line-height: 23px;
	    margin-top: 7px;
}
.shopping_x .srod_a a {
    padding: 10px 15px;
   
}
}
@media (max-width: 1199px){
    /*** 活動效果 ***/
                .page-cover-section .people-area{
                    left:-20%;
                }
                @-webkit-keyframes peopledown {
                    0%  {
                        left: -20%;
                        top: -40%;
                        transform: scale(0.5);
                    }
                    20%{
                        left: -12%;
                        top: 4%;
                        transform: scale(0.7);
                    }
	                100%{
                        left: 55%;
                        top: 110%;
                        transform: scale(1.3);
	                }
                }
                @keyframes peopledown {
                    0%  {
                        left: -20%;
                        top: -40%;
                        transform: scale(0.5);
                    }
                    20%,40%{
                        left: -12%;
                        top: 4%;
                        transform: scale(0.7);
                    }
	                100%{
                        left: 55%;
                        top: 110%;
                        transform: scale(1.3);
                    }
                }
                /*** 活動效果 ***/
}
@media (max-width: 992px) {
.side-area {
    z-index: 100;
    position: relative;
}

}

@media (max-width: 991px) {
.traffic .timet_be .go_with {
    width: 100%;
}
}





@media (max-width: 767px) {
	
	.traffic .tr_ac li {
    width: 50%;
}
	
	.icon.ic-facility2 {
    width: 50px;
    height: 56px;
}
	.icon.ic-facility1 {
    width: 50px;
    height: 55px;
}
	.page-section {
    margin-top: 28px;
}
	.side-area {
    margin-top: 17px;
}
	.download-section    .block-title .icon-group .icon {
    bottom: 25px;
}
	
	
	.download-section .block-title  {
    bottom: -20px;
}
	.download-section   .h1 .sub {
    bottom: 30px;
}
.shop-section   	.h1 .sub {
    bottom: 31px;
}
	.recommend-section   .h1 .sub {
    bottom: 36px;
}
	.feature-section   .h1 .sub {
    bottom: 33px;
}
	.calendar.today     .h1 .sub {
    bottom: -4px;
}
	.page_wrapper   .breadcrumb {

    display: none;
}
	.contact  .h1 .sub {
      bottom: 12px;
}
	.shopping   .h1 .sub {
       bottom: 12px;
}
.parkinfo   .h1 .sub,
	.education     .h1 .sub {
    bottom: 12px;
}
	.recommend  .h1 .sub {
    bottom: 17px;
}
	.traffic   .h1 .sub {
       bottom: 2px;
}
	.calendar    .h1 .sub {
    bottom: 11px;
}
	.h1 .sub {
       top: unset;
    bottom: -3px;
 
}
	.shop-section   .block-title .icon-group .icon {
    bottom: 21px;
}
	.recommend-section   .block-title .icon-group .icon {
    bottom: 23px;
}
	.feature-section  .block-title .icon-group .icon {
    bottom: 24px;
}
	.block-title:before {
    top: calc(50% + 17px)!important;
}
	.reflow-table.reflow-table-sm td:before {
    min-width: 170px;
}
	.traffic .content table th, .traffic .content .table.blue_w th {
    font-size: 18px;
 
}
	.block-title .icon-group .icon {
    bottom: 3px;
}
	.traffic .content table td, .traffic .content table td:nth-child(1) {
    font-size: 14px;
}
.traffic  	.reflow-table.reflow-table-sm td:before {
    font-size: 12px;
	    min-width: 210px;
}
	.breadcrumb-area {
    top: unset!important;
}
    .calendar-area .filter-item2 .btn {
        font-size: 12px;
        padding: 7px;
    }

     /***** 活動效果 *****/
        
        .page-cover-section .editor-txt .info-txt {
            padding: 24px 15px 30px 15px;
            font-size: 1rem;
            margin-top: 0;
        }
        .btn.purple {
            font-size: 1.125rem;
            padding: 10px 10px 10px 20px;
        }
        .page-cover-section .editor-txt .border-line {
            height: 50px;
            top: -50px;
        }
        .page-cover-section .tree.tr01,
        .page-cover-section .tree.tr02 {
            width: 30%;
        }
        .page-cover-section .waterslide.ws01, .page-cover-section .waterslide.ws02,.page-cover-section .waterflow.wf01 {
            width: 130%;
            height: auto;
            left: -23%;
        }

        .page-cover-section .waterslide.ws02,.page-cover-section .waterflow.wf01 {
            top: auto;
            bottom: 0;
        }
        .page-cover-section .waterspray.sp04 {
            top: auto;
            bottom: 10%;
            width: 11%;
        }
        .page-cover-section .waterspray.sp06 {
            top: auto;
            bottom: 30%;
            right: 5%;
        }
        .page-cover-section .waterspray.sp05 {
            top: auto;
            right: 8%;
            bottom: 30%;
        }
        .page-cover-section .editor-txt {
            margin-top: 50px;
        }

        .page-cover-section .waterslide-area {
            height: 100vh;
        }

        .page-cover-section .people-area {
                width: 30%;
                
                top: auto;
                bottom: 50%;
                left: -38%;
                /**
                    終點
                    bottom: -30%;
    left: 52%;
                    **/

        }
        .page-cover-section .people-area .dialog.dl1 {
            width: 30%;
            left: 5%;
            top: -15%;
        }
        .page-cover-section .people-area .dialog.dl2 {
            width: 30%;
            right: -5%;
            top: 5%;
        }
        .page-cover-section .people-area .waterspry.sp01 {
            width: 52%;
            bottom: 0;
        }

        @-webkit-keyframes peopledown {
            0%  {
                top: auto;
                bottom: 50%;
                left: -38%;
                transform: scale(0.5);
            }
            20%{
                top: auto;
                bottom: 25%;
                left: -35%;
                transform: scale(0.7);
            }
	        100%{
                top: auto;
                bottom: -30%;
                left: 72%;
                transform: scale(1.3);
	        }
        }
        @keyframes peopledown {
            0%  {
                top: auto;
                bottom: 50%;
                left: -38%;
                transform: scale(0.5);
            }
            20%{
                top: auto;
                bottom: 25%;
                left: -35%;
                transform: scale(0.7);
            }
	        100%{
                top: auto;
                bottom: -30%;
                left: 72%;
                transform: scale(1.3);
	        }
        }


        @-webkit-keyframes peoplemove {
            0%,100%  {transform:translate(0,0);}
	        20%,30%,40%  {transform:translate(0,20px);}
	        25%,35% {transform:translate(0,0);}
            45%,55%,65%,80% {transform:translate(20px,5px);}
            50%,65%,90% {transform:translate(-10px,0);}
        }
        @keyframes peoplemove {
            0%,100%  {transform:translate(0,0);}
	        20%,30%,40%  {transform:translate(0,20px);}
	        25%,35% {transform:translate(0,0);}
            45%,55%,65%,80% {transform:translate(20px,5px);}
            50%,65%,90% {transform:translate(-10px,0);}
        }

        body .page-cover-section .waterslide-area{
            display:block;
        }
        body.landscape .page-cover-section .waterslide-area{
            display:none;
        }
        body.landscape .page-cover-section .editor-txt{
            margin-top:0;
        }
        .page-cover-section .waterslide-area{
            position:fixed;
        }
        /***** 活動效果 *****/
}
@media (max-width: 575px){

     /***** 活動效果 *****/
     /*.page-cover-section .close-area .btn.btn-close {
        font-size: 1.5rem;
        padding: 8px 10px;
    }*/
    .page-cover-section .tree.tr01,
    .page-cover-section .tree.tr02 {
        width: 20%;
    }
    .page-cover-section .waterspray.sp06,
    .page-cover-section .waterspray.sp05{
        display:none;
    }
    .page-cover-section .editor-txt .mttxt {
        max-height: 200px;
    }

    .page-cover-section .editor-txt {
        margin-top: 15px;
    }

    .page-cover-section .lgt-mobile{
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%,-50%);
        max-height: 100vh;
    }
    .page-cover-section .editor-txt .info-txt {
            margin-top: -10px;
    }

    .page-cover-section .people-area {
                bottom: 70%;
                left: -38%;

        }

    @-webkit-keyframes peopledown {
            0%  {
                top: auto;
                bottom: 70%;
                left: -38%;
                transform: scale(0.5);
            }
            20%{
                top: auto;
                bottom: 25%;
                left: -35%;
                transform: scale(0.7);
            }
	        100%{
                top: auto;
                bottom: -30%;
                left: 90%;
                transform: scale(1.3);
	        }
        }
        @keyframes peopledown {
            0%  {
                top: auto;
                bottom: 70%;
                left: -38%;
                transform: scale(0.5);
            }
            20%{
                top: auto;
                bottom: 25%;
                left: -35%;
                transform: scale(0.7);
            }
	        100%{
                top: auto;
                bottom: -30%;
                left: 90%;
                transform: scale(1.3);
	        }
        }

     /***** 活動效果 *****/
}


