/*  index
-------------------------------------------------
    - text
    - df-width
    - layout
-------------------------------------------------*/






/*-----------------------------------------------
    df-width
-----------------------------------------------*/

.df-width,.df-width.in-page {
    height: 100%;
    max-width: 1600px;
    overflow: hidden;
}


@media screen and (max-width: 768px) {

.df-width {
  padding: 0 1rem 0 4rem;
}

.df-width.in-page {
  padding: 0 15px;
}

}



/*  layout
-------------------------------------------------
    - html,body
    - main
    - header
    - section
    - footer
-------------------------------------------------*/

html {
    /*預留捲軸位置，避免跳一下*/
    scrollbar-gutter: stable;
    /*background:#f6f7f2;*/
}



/*-----------------------------------------------
    main
-----------------------------------------------*/
main {
    overflow: hidden;
    max-width: 1920px;
    min-width: 1024px;
    margin: auto;
    /*background: url(../images/001.jpg) center 0 /100% no-repeat;*/

    /*animation: blur .8s ease-out 0s 1 both;*/
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    background: url(../images/bg-pattern.png) center 0 repeat;


    /*! box-shadow: 1px 1px 1px #000; */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18), 0 1px 2px rgba(0, 0, 0, 0.1);
}

section {
    width: 100%;
    text-align: justify;
    /*! height: 1080px; */
    /*! background: #777; */
}

@media screen and (max-width: 767px) {

    main {
        min-width: auto;
    }
}

/*-----------------------------------------------
    header
-----------------------------------------------*/
header {
    aspect-ratio: 1920 / 1370;
    background: url(../images/header.jpg) center 0 no-repeat;

}



@media screen and (max-width:768px) {
    header {
        aspect-ratio: 768 / 1280;
        background: url(../images/header-m.jpg) center 0 no-repeat;
    }


}



/*-----------------------------------------------
    trip
-----------------------------------------------*/
.trip_ {
    color: var(--text-color);
    height: auto;

    /*! margin-top: 12rem; */
    /*padding: 5rem 0 4rem;*/
    padding: 0 0 10rem 0;
}


.trip01.add-mask,.trip02.add-mask,.trip03.add-mask,.trip04.add-mask{
  background: var(--black05);
}




.trip01 {
     margin-top: 0rem;
    padding-top: 14rem;
}




.trip_.same-height,.feature.same-height{
    height: 100rem;
}




@media screen and (max-width: 768px) {

.trip_.same-height, .feature.same-height {
  height: 510vw;
}

.trip_ {

    /*padding: 6rem 0 2rem 0;*/
    padding: 0 0  6rem 0;
}
.trip01 {
  padding: 12rem 0 2rem 0;
}




}

/*-----------------------------------------------
    feature
-----------------------------------------------*/
.feature {
    /*overflow:hidden;*/
    /*! padding: 0 0 6% 0; */
    position: absolute;
    color: #fff;
    z-index: 50;
}

.feature.show {
    /*aspect-ratio: 976/900;*/
    /*position: relative;*/

}


.feature-list {
    position: absolute;
    max-width: 976px;
    margin: auto;
    left: 0;
    right: 0;
    width: 100%;
    background: url(../images/feature.png) center 0 /100% no-repeat;
    margin-top: -257px;
    aspect-ratio: 976/257;
}

.feature-list_{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateY(200px);

}
.feature01{background: url(../images/feature01.png) center 0 /100% no-repeat;transition: all .5s ease 0s;}
.feature02{background: url(../images/feature02.png) center 0 /100% no-repeat;transition: all .5s ease 0.15s;}
.feature03{background: url(../images/feature03.png) center 0 /100% no-repeat;transition: all .5s ease 0.3s; }
.feature04{background: url(../images/feature04.png) center 0 /100% no-repeat;transition: all .5s ease 0.45s;}


.feature-list_.show {
    transform:  translateY(0);
}


.feature article {
    z-index: 2;
    width: 100%;
    max-width: 976px;
    margin: auto;
    height: 200px;
    aspect-ratio: 976/210;
    border-radius: 0 0 15px 15px;
    background: var(--dark03) url(../images/bg-pattern-w.png) center 0 repeat;
    transition: all .5s ease;
    /*! overflow: hidden; */
}


.feature article.show,
.trip01.show {

    height: 90rem;
}


.trip_.show {
    display: none;
}


.feature article ul {
    display: none;

    /*display: flex;*/
    flex-direction: column;
    gap: 3rem;
    padding: 5rem 3rem 3rem 3rem;

}

.feature article ul.show {
    display: flex;
    overflow: hidden;
    animation:fadeInDown .5s ease-out 0s 1 both;
}


@keyframes fadeInDown
{
0%{opacity:0;height: 0;}
100%{opacity:1;height: 100%;}
}



/*df-mask*/
.df-mask {
    position: absolute;
    z-index: 1;
    background: var(--dark04);
}

.df-mask.show {
    display: block;
}


@media screen and (max-width: 768px) {

.feature-list {
  max-width: 976px;
  left: 0;
  right: 0;
  width: 95%;
  background: url(../images/feature-m.png) center 0 /100% no-repeat;
  margin-top: -25vw;
  aspect-ratio: 976/257;
  overflow: hidden;
}




.feature01{background: url(../images/feature01-m.png) center 0 /100% no-repeat;transition: all .5s ease 0s;}
.feature02{background: url(../images/feature02-m.png) center 0 /100% no-repeat;transition: all .5s ease 0.15s;}
.feature03{background: url(../images/feature03-m.png) center 0 /100% no-repeat;transition: all .5s ease 0.3s; }
.feature04{background: url(../images/feature04-m.png) center 0 /100% no-repeat;transition: all .5s ease 0.45s;}


.feature article {
  width: 95%;

  height: 10rem;
}

.feature article.show, .trip01.show {
  height: 480vw;
}

.feature article ul {
  gap: 3rem;
  padding: 3rem 2rem 2rem 2rem;
}
}





/*-----------------------------------------------
    quote
-----------------------------------------------*/

.quote {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 1.5rem 2.5rem 2.5rem 2.5rem;
}

.title.add-mask > * ,.title.add-mask > * >*{
    color:#fff;
}

.title .num {
    font-family: var(--font-family-eng2);
    font-size: var(--fs-4xl);
    text-align: center;
    font-weight: 100;
    line-height: 1;
}

.title .num span{
    font-size: var(--fs-h3);
    text-align: center;
    font-weight: 100;
    line-height: 1;
    /*! position: absolute; */
    margin: 0 0 0 -3%;
    color: var(--black05);
}


.sub-title {
    font-family: var(--font-family2);
    background: var(--black09);
    color: #fff;
    line-height: 1.5;
    padding: 0 0.5rem;
}

.sub-title01{
    padding: 0 0 0 0.5rem;
}
.sub-title02{
    padding: 0;
}
.sub-title03{
    padding: 0  0.5rem 0 0;
}


.quote q {
    /*color: var(--text-color);*/

    font-family: var(--font-family2);
    padding: 0 0 .4rem 0;
    text-align: center;
    display: inline-block;
    font-size: var(--fs-h1);
    position: relative;
    margin: auto;
    min-width: 50%;
    line-height: 1.2;
}
.quote q br{
    display: none;
}
.quote span.hidden {
    opacity: 0;
    display: inline-block;
    padding: 0;
}


.quote q:before,
.quote q:after {
    content: '';
    width: 3.5rem;
    height: 3.5rem;
    background: url(../images/icon-quote.png) center 0 /100% no-repeat;
    position: absolute;
    left: -5rem;
    top: -0.5rem;
}

.quote q:after {
    content: '';
    left: initial;
    transform: scale(-1);
    right: -6rem;
    top: 1.5rem;
}



.feature .quote {
    padding: 3.5rem;


}

.feature .quote q:before,
.feature .quote q:after {
    content: '';
    background: url(../images/icon-quote-w.png) center 0 /100% no-repeat;
}



.feature .quote q {

    /*! line-height: 2; */
}


.feature .quote>cite {
    display: block;
    padding: 0 0 0 33%;
    position: relative;
    min-width: 60%;
    letter-spacing: 0.05rem;
    /*! font-style: normal; */
    font-weight: 300;
}

.feature .quote>cite:before {
    content: '';
    position: absolute;
    width: 11%;
    height: 1px;

    background: #fff;
    top: 50%;
    left: 41%;
}

@media screen and (max-width: 1440px) {
    .quote q {

        min-width: 45%;
    }

}

@media screen and (max-width: 768px) {
.quote {
  padding: 0.5rem 0.1rem .5rem 0rem;
  align-items: initial;
  /*! overflow: hidden; */
}
      .quote q {
    max-width: 87%;
    text-align: left;
    margin-right: auto;
    /*! margin-left: 5%; */
    font-size: var(--fs-h2);
  }


.feature .quote > cite {

  font-size: var(--fs-s1);
}


.quote q br{
    display: block;
}
.quote q:before,
.quote q:after {
    content: '';
    width: 1.3rem;
    height: 1.3rem;

    left: -1.5rem;
}

.quote q:after {
    content: '';
    left: initial;
    transform: scale(-1);
    right: -1.5rem;
    bottom: 0.4rem;
    top: initial;
}


.feature .quote > cite::before {
  content: '';
  width: 11%;
  top: 52%;
  left: 20%;
}
.feature .quote {
  padding: 1.5rem;
  width: 100%;
}
.sub-title {
  padding: 0 1rem;
  margin: 0.1rem;
  display: block;
  text-align: center;
  width: 100%;
  text-align: left;
  display: inline-block;
}
.sub-title01{
    padding: 0 0 0 0.5rem;
}
.sub-title02{
    padding: 0 0 0 0.5rem;
}
.sub-title03{
    padding: 0 0 0 0.5rem;
}

}

/*-----------------------------------------------
    btn - a
-----------------------------------------------*/

a.btn-more {
border-radius: 25px;
  background: var(--red);
  color: #fff;
  padding: 0.2rem 1rem;
  font-size: var(--fs-h6);
  min-width: 6rem;
  letter-spacing: 0.05rem;
  transition: all .3s ease;
  line-height: 1.5;
}
a.btn-more:hover{
    padding: 0.2rem 1.2rem;
    letter-spacing: 0.1rem;
    transition: all .3s ease;
}

@media screen and (max-width: 768px) {

a.btn-more:hover{
    padding: 0.2rem 1rem;
    letter-spacing: 0.05rem;
}
}

/*-----------------------------------------------
    btn -button
-----------------------------------------------*/

button.btn-more,button.btn-close {
    position: absolute;
    width: 6rem;
    height: 6rem;
    bottom: -3rem;
    right: 2rem;
    border: 5px solid var(--bg-color);
    border-radius: 50%;
    cursor: pointer;
    background: var(--bg-color);
    z-index: 101;
}

button.btn-more span,button.btn-close span {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /*! animation: btnMore 1.5s ease-out infinite both; */


    display: block;
}

button.btn-more::after,button.btn-close::after {
    content: "教你看門道";
    color: var(--orange);
    position: absolute;
    bottom: -25%;
    left: 50%;
    margin: auto;
    font-size: var(--fs-s4);
    font-weight: 500;
    letter-spacing: 0.1rem;
    transition: opacity .3s;
    min-width: 5rem;
    transform: translate(-49%,50%);
}
button.btn-more::after{
    font-size: var(--fs-s3);
}



/* 切換文字 */
button.btn-more.show::after {
    content: "BACK";
    color: #fff;
    font-size: var(--fs-s3);
    letter-spacing: 0.2rem;
}


button.btn-more>span::before,button.btn-close>span::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/icon-more.png) center 0 / 100% no-repeat;
    border-radius: 50%;
    transition: transform 0.5s ease;
}

/* 翻轉效果 */
button.btn-more span.show::before {
    transform: scaleY(-1);
}


/*btn-close*/
button.btn-close {
    position: fixed;
    width: 3rem;
    height: 3rem;
    bottom: initial;
    top: 2rem;
    right: 2rem;
    z-index: 101;
    display: none;
}
button.btn-close.show{
    display: block;
}

button.btn-close::after {
    content: "CLOSE";
    position: absolute;
    bottom: -38%;
    left: 50%;
    font-weight: 400;
    transition: opacity .3s;
    min-width: 5rem;
    color: #fff;
}

button.btn-close>span::before {
    content: "";

    background: url(../images/icon-close.png) center 0 / 100% no-repeat;

}



/* 按鈕跳動動畫 */
@keyframes btnMore {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}



@media screen and (max-width: 768px) {
button.btn-more {
  width: 4.5rem;
  height: 4.5rem;
  bottom: -2rem;
  right: 2rem;
}
button.btn-close {
  width: 2rem;
  height: 2rem;
  top: 1rem;
  right: 1rem;
  border: 3px solid var(--bg-color);
}

button.btn-more::after,button.btn-close::after {

    font-size: var(--fs-s4);

    bottom: -49%;
}

.feature button.btn-more::after{
font-size: var(--fs-s3);
bottom: -24%;
}

}

/*-----------------------------------------------
    btn  open-spot打開行程亮點
-----------------------------------------------*/
.open-spot_ {
    /*! width: 35%; */
    height: 197px;
    background: url(../images/open-spot.png) center 100% /100% no-repeat;

    width: 542px;
    margin: auto;
    display: block;
    cursor: pointer;
    overflow: hidden;
    position: relative;

    z-index: 10;
}


.man {
    position: absolute;
    inset: 0;
    background: url(../images/man.png) center 100% /100% no-repeat;
    transform: scale(.5) translateY(580px);
    transition: all .5s ease;
    transform-origin: 50% 100%;
}

.man.show {
    transform: scale(1) translateY(0);
}

.talk {
    position: absolute;
    width: 67px;
    height: 53px;
    background: url(../images/talk.png) center 0 /100% no-repeat;
    left: 174px;
    top: 53px;
    animation: wobble 1.5s ease-out 0s infinite both;
}

@-webkit-keyframes wobble {
    0% {
        -webkit-transform: none;
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }

    100% {
        -webkit-transform: none;
    }
}

@media screen and (max-width: 768px) {

.open-spot_ {
    background: url(../images/open-spot-m.png) center 100% /100% no-repeat;


}
.talk {

    background: url(../images/talk-m.png) center 0 /80% no-repeat;

}

.open-spot_ {

  width: 95%;
  height: 29vw;
  margin: 5% auto;
}

.talk {
  left: 34%;
  top: 11%;
}
}


/*-----------------------------------------------
    line
-----------------------------------------------*/
.trip-wrap .line {
    position: absolute;
    top: -1rem;
    left: 50%;
    width: 1px;
    height: 104%;
    overflow: hidden;
}

.trip-wrap .line span {
    position: absolute;
    left: 0;
    width: 1px;
    background: var(--black04);
    animation: line-move 15s linear infinite;
    animation-fill-mode: both;
}

/* 裝飾 */
.trip-wrap .line span::before,
.trip-wrap .line span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 1px;
    background: var(--black04);
}

.trip-wrap .line span::before {
    top: -66%;
    height: 50%;
}

.trip-wrap .line span::after {
    top: 103%;
    height: 40%;
}

.trip-wrap .line .line-1 {
    height: 70%;
    animation-delay: 0s;
}

.trip-wrap .line .line-2 {
    height: 50%;
    animation-delay: -6s;

}

@keyframes line-move {
    0% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(200%);
    }
}

@media screen and (max-width: 768px) {

.trip-wrap .line {
  display: none;
}

}




/*-----------------------------------------------
    spot
-----------------------------------------------*/
.spot {
    display: flex;
    gap: 4rem;
    position: relative;
}


.trip_ .spot {
    padding: 0  0  4rem 0;
}


.spot:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--black04);
    top: 0;
    left: 50%;
    z-index: 10;
}

.spot-text {
    flex: 1;
    display: block;
    position: relative;

    margin-top: auto;
    font-size: var(--fs-s1);
    line-height: 2;
}



.spot-text .spot-title {
    font-family: var(--font-family2);
    color: var(--orange);
    font-size: var(--fs-h3);
}



.spot-text .spot-title.too-long span {
    display: block;

}



.trip_  .spot-text .spot-title {
    font-family: var(--font-family2);
    color: var(--black02);
    font-size: var(--fs-h3);
    line-height: 1.5;
    /*! max-width: 62%; */
    margin-bottom: 10%;
    margin-left: auto;
    /*! margin-right: 5%; */
}


.p-1{
    display: block;
    /*! text-indent: 2em; */
}
.p-1-2{
    padding:  0 2rem 0 0;
    display: block;
}
.p-2{
    /*! padding:  0  0 0 2rem; */
    display: block;
    text-indent: 2em;

}
.trip_  .spot-text {

    font-size: var(--fs-s2);
    color: var(--black05);
    line-height: 1.8;
}

.spot-img {
    flex: 1;
    /*! background: #d74f4fa3; */
}

.trip_  .spot-text br{
    display: block;
}
.trip_  .spot-text br.show-br-m{
    display: none;
}

@media screen and (max-width: 1280px) {
.trip_  .spot-text br{
    display: none;
}
.p-1{
    text-indent: 0em;
}

.spot-text .spot-title.too-long span {
    display: initial;

}
}


@media screen and (max-width: 768px) {



.trip_  .spot-text br.show-br-m{
    display: block;
}


  /* 所有 spot 先直排 */
  .spot {
    flex-direction: column;
    gap: 1rem;
  }

  /* 只有單數 spot 再反轉 */
  .spot:nth-of-type(odd) {
    flex-direction: column-reverse;
  }

.spot::before {
  content: '';
  width: 100%;
  height: 1px;
  top: -5%;
  left: 0;
}

.spot:nth-child(1)::before {
  content: '';
  display: none;

}

.trip_ .spot-text {
  font-size: var(--fs-p);
  line-height: 1.8;
  text-align: justify;
}
}


@media screen and (max-width: 768px) {
.p-2 {
  padding: 0;
  display: block;
  text-indent: 0em;
}

}


/*-----------------------------------------------
    function
-----------------------------------------------*/
.align-right {
    text-align: right;
    display: block;
}

.align-left {
    text-align: left;
    display: block;
}

.block-white{
    display: inline-block;
    width: 2rem;

}

@media screen and (max-width: 768px) {

.block-white{
display: none;
}

.align-right {
  text-align: left;
  display: block;
}
}



/*-----------------------------------------------
    article-close
-----------------------------------------------*/

.article-close{
    position: fixed;
    width: 3.5rem;
    height: 5rem;
    right: 7.5rem;
    top: 30%;
    z-index: 101;
    padding: 2% 0 0 0;

    /*background: var(--bg-color);*/
    cursor: pointer;
    opacity: 0;
  pointer-events: none;
  visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;

}


.article-close span{
  font-size:var(--fs-s4);
    letter-spacing: 0.2rem;
    text-align: center;
    /*! text-shadow: 13px 41px 21px #f61212; */
  background: var(--bg-color);
  color: var(--orange);
}


.article-close.show {
  opacity: 1;
    visibility: visible;
  pointer-events: auto;
}

.article-close:after{
    content: '';
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    background: #fff url(../images/icon-close.png) center 49% /70% no-repeat;

    top: 0;
    left: 0;
    margin: auto;
    right: 0;
    border-radius: 2.5rem;
}


@media screen and (max-width: 768px) {

.trip_ article ul {

  padding: 5rem 0rem 0rem 0rem;

}
}

/*-----------------------------------------------
    map
-----------------------------------------------*/

.map:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/map-bg.png) center 0 /100% no-repeat;
    pointer-events: none;


    width: 100%;
    height: 100%;
    z-index: 2;
}

.map{
    background: var(--dark09) ;

    aspect-ratio: 1400/600;
    max-width: 1400px;
    margin: auto;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
}
.map img{

    margin-left: auto;
    padding-right: 2%;
    margin-top: 0;
}


@media screen and (max-width: 1600px) {

.map img{
    transform: scale(0.9);
}
}

@media screen and (max-width: 768px) {
.map:before{
    content: '';
    background: url(../images/map-bg-m.png) center 0 /100% no-repeat;


}



.map{
    background: var(--dark09) ;

    aspect-ratio: 768/1200;
    max-width: 768px;
    margin: 5rem auto 0;
    overflow: hidden;
}

.map img{
    transform: scale(3) translate(-10%,33%);
}
}





/*-----------------------------------------------
    view
-----------------------------------------------*/

/* view */
.view {


    position: absolute;
    cursor: move;

    overflow: hidden;
    right: 0;
    top: 0;
    z-index: 0;
}


/*#scroll .view {
    overflow: scroll;
}
*/

.view {
    width: 100%;
    height: 100%;
    /*! background: rgba(109, 190, 122, 0.6); */
    /*! aspect-ratio: 1028/575; */
}

.content {

    width: 100%;
    /*! top: 0; */
    /*! left: 0; */
}


@media screen and (max-width:768px) {

    .view {
   width: 100%;
   top: 20%;
   height: 80%;
    }

    .content {
        /*! width: 2000px; */
    }


}



/*-----------------------------------------------
    article
-----------------------------------------------*/

.trip_ article{
    position: relative;
    /*border-bottom:1px solid var(--black05);*/
    padding: 5rem 3rem 3rem 3rem;
    margin: -2rem auto 5rem;
    overflow: hidden;
    display: none;
    background: var(--bg-color);
    border-radius: 15px;
}

.line-top{
    position: absolute;
    border-top:1px solid var(--black05);
    border-left:1px solid var(--black05);
    border-right:1px solid var(--black05);
    top: 0;
    width: 100%;
    left: 0;
    height: 5rem;
    border-radius: 15px 15px 0 0;
}


.line-l{
    position: absolute;
        top: 5rem;
    background:var(--black05);
    width: 1px;
    left: 0;
    height: 95%;
}

.line-r{
    position: absolute;
     top: 5rem;
    background:var(--black05);
    width: 1px;
    left: initial;
    right: 0;
    height: 95%;
}

.trip_ article:after{
    /*! content: ''; */
    position: absolute;
    border-bottom: 1px solid var(--black05);
    border-left:1px solid var(--black05);
    border-right:1px solid var(--black05);
    bottom:  0;
    width: 100%;
    left: 0;
    height: 5rem;
    border-radius: 0 0 15px 15px;
}


.trip_ article.hidden  {
  display: none;
}



.trip_ article ul {
  display: none;
  display: flex;
  flex-direction: column;
  padding: 5rem 0rem 0rem 0rem;
  z-index: 2;
  position: relative;
}


@media screen and (max-width: 768px) {
.trip_ article {
  padding: 5rem 1.5rem 0rem 1.5rem;
  margin: -8rem auto 0;
  display: none;
}



}


/*-----------------------------------------------
    flower
-----------------------------------------------*/
.flower-r {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  max-height: 72rem;
  top: 0;
  opacity: 1;
}

/* 左邊花 */
.flower-r::before {
  content: "";
  position: absolute;
  top: 42%;
  left: -6%;
  width: 100%;
  height: 100%;
  background: url(../images/flower01.png) 0 0%  no-repeat;
  background-size: 35%;
  /*! animation: flower-swing1 8s ease-in-out infinite alternate; */
}

/* 右邊花 */
.flower-r::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1%;
  width: 100%;
  height: 100%;
  background: url(../images/flower02.png) 100% 0 no-repeat;
  background-size: 34%;
  animation: flower-swing2 8s ease-in-out infinite alternate;
}



.flower-l {
  position: absolute;
  width: 50%;
  height: 100%;
  bottom: 0;
  left: 0%;
  overflow: hidden;
   pointer-events: none;
  max-height: 72rem;
  top: 0;
  z-index: 1;
  opacity: 1;
}

/* 上邊花 */
.flower-l::before {
  content: "";
  position: absolute;
  top: 6%;
  left: -2%;
  width: 100%;
  height: 100%;
  background: url(../images/flower03.png) 0 0% no-repeat;
  background-size: 37%;
  animation: flower-swing1 6s ease-in-out infinite alternate;
}

/* 下邊花 */
.flower-l::after {
  content: "";
  position: absolute;
  top: 40%;
  left: -1%;
  width: 100%;
  height: 100%;
  background: url(../images/flower04.png) 0% 0% no-repeat;
  background-size: 35%;
  animation: flower-swing2 8s ease-in-out infinite alternate;
}




.page .flower-l {
  position: absolute;
  width: 50%;
  height: 100%;
  bottom: 0;
  left: 0%;
  overflow: hidden;
   pointer-events: none;
  max-height: initial;
  top: 5rem;
}

.page .flower-l::before {
  content: "";
  position: absolute;
  top: -2%;
  left: -7%;
  width: 100%;
  height: 100%;
  background: url(../images/flower03.png) 0% 0% repeat-y;
  background-size: 35%;
  animation: flower-swing1 6s ease-in-out infinite alternate;
}
.page .flower-l::after {
  content: "";
  display: none;
}

.page .flower-r {
  position: absolute;
  width: 50%;
  height: 100%;
  right: 0;
  overflow: hidden;
  z-index: 1;
  /*pointer-events: none;*/
  max-height: initial;
  top: 0;
  left: initial;
  /*! background: #ff00006b; */
}

/* 左邊花 */
.page .flower-r::before {
  content: "";
  position: absolute;
  top: 31%;
  right: -3rem;
  width: 100%;
  height: 100%;
  background: url(../images/flower02.png) 100% 0  repeat-y;
  background-size: 33%;
  animation: flower-swing1 6s ease-in-out infinite alternate;
  left: initial;
}

/* 右邊花 */
.page .flower-r::after {
  content: "";
   display: none;
}




/* 左花搖晃 */
@keyframes flower-swing1 {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(-3px) rotate(-1deg); }
  50%  { transform: translateX(0) rotate(0deg); }
  75%  { transform: translateX(3px) rotate(1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* 右花搖晃 */
@keyframes flower-swing2 {
  0%   { transform: translateX(0) rotate(0deg); }
  25%  { transform: translateX(2px) rotate(1deg); }
  50%  { transform: translateX(0) rotate(0deg); }
  75%  { transform: translateX(-2px) rotate(-1deg); }
  100% { transform: translateX(0) rotate(0deg); }
}




.trip_.add-mask > .flower-l,.trip_.add-mask > .flower-r{
    opacity: 0.2;
}




@media screen and (max-width: 768px) {

/* 上邊花 */
.flower-l::before {
  content: "";

  background-size: 75%;
}

/* 下邊花 */
.flower-l::after {
  content: "";

  background-size: 75%;
}
.flower-r::before {
  content: "";

  background:transparent;

}


/*----------------*/

.page .flower-r::before {
  content: "";

  background-size: 70%;
  /*background: transparent;*/
  top: -10%;
}

/* 右邊花 */
.page .flower-r::after {
  content: "";

  background-size: 70%;
  top: 66%;
  right: -11%;
}
/* 上邊花 */
.page .flower-l::before {
  content: "";
  background-size: 70%;
  top: 0%;
  left: -15%;
}

/* 下邊花 */
.page .flower-l::after {
  content: "";
  background-size: 70%;
}




}

/*-----------------------------------------------
    trip_
-----------------------------------------------*/
.trip_ .trip-wrap {
    display: flex;
    gap: 4rem;
    position: relative;
    height: 27rem;
}

.trip_ .title {

    max-width: 1000px;
    margin: auto;
}


.trip-sub-title {
    color: var(--black08);
    line-height: 1.5;
    /*! padding: 0 1rem; */
    font-size: var(--fs-s1);
    display: block;
    margin: 2% 0 0 0;
}
/*.trip_ ul:before{
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: var(--black04);
    top: 0;
    left: 50%;
    z-index: 10;
}*/

.trip_>ul>li {
    min-height: 36rem;
}

.trip_ .trip-text {
    flex: 1;
    display: block;
    position: relative;
    font-size: var(--fs-s1);
    line-height: 2;

    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: space-between;


}

.trip_ .trip-text.add-mask {
    color: #fff;
}

.trip_ .trip-title {
    font-size: var(--fs-h2);
    margin: 1rem 0 3.7rem 0;
    height: 4rem;
    line-height: 1.5rem;
    letter-spacing: 0.1rem;
}

.trip_ .trip-title-s {
    font-size: var(--fs-s1);
    color: var(--red);
    font-weight: 500;
    display: block;
    line-height: 0;
}

.trip_ .trip-img {
    flex: 1;
    /*! background: #d74f4fa3; */
    display: flex;
    justify-content: end;
    align-items: end;
    padding: 0 0 2% 0;
}

@keyframes run
{
/*0%{right:-200%;filter:brightness(1);}
50%{right:300%;filter:brightness(1.5);}
100%{right:-200%;filter:brightness(1);}*/
0%{transform: scale(0);filter:brightness(1);opacity: 0.5;}
20%{transform: scale(50); filter:brightness(1.5);opacity: 0;}
40%{transform: scale(0); filter:brightness(1.5); opacity: 0;}
100%{transform: scale(0);filter:brightness(1); opacity: 0.5;}
}


/*usage: add "run-effect" to class in Html */
.run-effect
{
    position: relative;
    overflow: hidden;
}

.run-effect:after
{
    content   : '';
    position  : absolute;
    top: 0%;
    left: 0%;
    border-radius: 50%;
    background:var(--bg-color);
    animation : run 8s ease 0s infinite both;

    width: 100px;
    height: 100px;
    z-index: 10;
}




.day_ {
    font-family: var(--font-family-eng);
    font-size: var(--fs-3xl);
    font-style: italic;
}

.cost {
    font-family: var(--font-family-eng);
    font-size: var(--fs-2xl);
    font-style: italic;
    color: var(--red);
    padding: 0 0.5rem;
}



@media screen and (max-width: 768px) {
.trip_ .trip-wrap {
  gap: 1rem;
  height: auto;
  flex-direction: column;
}

.cost {
  font-size: var(--fs-2xl);
  letter-spacing: -0.1rem;
  /*line-height: 1;*/
  padding: 0;
}

.trip-sub-title {
  color: var(--black08);
  line-height: 1.5;
  padding: 0 1rem;
  font-size: var(--fs-s1);
  display: block;
  padding: 0.5rem 0 0 0;
  border-top: 1px solid var(--black09);
  margin: 0.5rem 0 0;
}

.trip_ .trip-title {
  margin: 1rem 0 4rem 0;
  letter-spacing: 0rem;
}

.trip_ .trip-img {

  padding: 0;
}

.trip_ .trip-text {

    font-size: var(--fs-p);



}

}


/*-----------------------------------------------
    trip-info
-----------------------------------------------*/
.trip-info {
    width: 95%;
    /*! margin-left: auto; */
}

.trip-info ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0;
    /*line-height: 1;*/
}
.trip-info ul li:nth-child(odd) {
    height: 2rem;
    width: 55%;
}

.trip-info ul li:nth-child(even) {
    height: 2rem;
    text-align: right;
    width: 40%;
    min-width: 7rem;
}

.trip-info ul li:nth-child(1),
.trip-info ul li:nth-child(2) {
    border-bottom: 1px solid var(--black07);

    line-height: 2.5rem;
    height: 3rem;
}

.date{
    font-size: var(--fs-p);
}



@media screen and (max-width: 768px) {

.trip-info {
  width: 100%;
  margin: 5% 0 0 0;
}


.date{
    font-size: var(--fs-s3);
}


.trip-info ul li:nth-child(1),
.trip-info ul li:nth-child(2) {

    line-height: 2.5rem;
    height: 2.7rem;
}
}

/*-----------------------------------------------
    figure
-----------------------------------------------*/
figure {}



figcaption {
    padding: 0 0 0 1.7rem;
    position: relative;
    line-height: var(--line-height);
}

figcaption:before {
    content: '';
    position: absolute;
    width: 1.1rem;
    height: 1.1rem;
    background: url(../images/icon-check.png) center /100% no-repeat;

    top: 0.5rem;
    left: 0rem;
}


@media screen and (max-width: 768px) {

figcaption {

  line-height: 1.8;
  letter-spacing: 0.02rem;
}
figcaption::before {
  content: '';
  width: 1rem;
  height: 1rem;

}

figure {
  width: 100%;
}
}


/*-----------------------------------------------
    footer
-----------------------------------------------*/

footer {
    /*background: #f6f7f2;*/
    z-index: 11;
}




/*-----------------------------------------------
    header
-----------------------------------------------*/

/*.window{
    position: absolute;
    overflow:hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background: url(../images/header.webp) center 0 /100% no-repeat;
    animation:blurEffect calc(var(--opening-time) - 0.1s) ease-out 0s 1 both;
}


main.italy .window {    background: url(../images/italy/header.jpg) center 0  /100% no-repeat;}
main.spm .window {    background: url(../images/spm/header.jpg) center 0 /100%  no-repeat;}
main.turkey .window {    background: url(../images/turkey/header.jpg) center 0 /100%  no-repeat;}
main.kenya .window {    background: url(../images/kenya/header.jpg) center 0  /100% no-repeat;}

*/

.window {
    --bg-webp: url(../images/header.webp);
    --bg-jpg: url(../images/header.jpg);

    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;

    background-position: center 0;
    background-size: cover;
    background-repeat: no-repeat;

    animation: blurEffect calc(var(--opening-time) - 0.1s) ease-out both;
    will-change: filter, transform;


    background-image: var(--bg-jpg);

    background-image: -webkit-image-set(
        var(--bg-webp) 1x,
        var(--bg-jpg) 1x
    );

    background-image: image-set(
        var(--bg-webp) type("image/webp"),
        var(--bg-jpg) type("image/jpeg")
    );
}

main.greece .window {
    --bg-webp: url(../images/greece/header.webp);
    --bg-jpg: url(../images/greece/header.jpg);
}

main.italy .window {
    --bg-webp: url(../images/italy/header.webp);
    --bg-jpg: url(../images/italy/header.jpg);
}

main.spm .window {
    --bg-webp: url(../images/spm/header.webp);
    --bg-jpg: url(../images/spm/header.jpg);
}

main.turkey .window {
    --bg-webp: url(../images/turkey/header.webp);
    --bg-jpg: url(../images/turkey/header.jpg);
}

main.kenya .window {
    --bg-webp: url(../images/kenya/header.webp);
    --bg-jpg: url(../images/kenya/header.jpg);
}




.icons{
    position: absolute;
    width: 55%;
    height: 50px;
    left: 9%;
    top: 98%;
    background: url(../images/icons.png) center 0 /100% no-repeat;
    opacity: 0.9;
    max-width: 173px;
}

.sl {
    --sl-webp: url(../images/sl.webp);
    --sl-png: url(../images/sl.png);

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    clip-path: inset(0 100% 0 0);
    animation: slReveal 1s ease-out calc(var(--opening-time) + 0.1s) 1 both;

    background-position: center 0;
    background-repeat: no-repeat;

    background-image: var(--sl-png);
    background-image: -webkit-image-set(
        var(--sl-webp) 1x,
        var(--sl-png) 1x
    );
    background-image: image-set(
        var(--sl-webp) type("image/webp"),
        var(--sl-png) type("image/png")
    );


}


main.spm .sl {
    --sl-webp: url(../images/spm/sl-spm.webp);
    --sl-png: url(../images/spm/sl-spm.png);
}

main.ne .sl {
    --sl-webp: url(../images/ne/sl-ne.webp);
    --sl-png: url(../images/ne/sl-ne.png);
}

main.turkey .sl {
    --sl-webp: url(../images/turkey/sl-turkey.webp);
    --sl-png: url(../images/turkey/sl-turkey.png);
}

main.kenya .sl {
    --sl-webp: url(../images/kenya/sl-kenya.webp);
    --sl-png: url(../images/kenya/sl-kenya.png);
}



@keyframes slReveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0 0 0); /* 展現全部內容 */
    }
}



/*毛玻璃*/
.blur-effect {

    position: absolute;

    top: 0px;
    left: 0%;
    width: 100%;
    height: 99.99vh;
    z-index: 2;
    animation:blurEffect calc(var(--opening-time) + 0.2s) ease-out 0s 1 both;

}


@keyframes blurEffect
{
0%{ background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

100%{ background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: inset 0 0 0px transparent, 0 0 0px transparent;
}
}


.frame {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    background: url(../images/frame.png) center 0 / 100% no-repeat;

    background-image: image-set(
        url(../images/frame.webp) type("image/webp"),
        url(../images/frame.png) type("image/png")
    );


}

@media screen and (max-width: 768px) {
    /*.window{
    background: url(../images/header-m.jpg) center 0 /100% no-repeat;
}


main.ne .window {    background: url(../images/header-m.jpg) center 0 /100%  no-repeat;}
main.italy .window {    background: url(../images/italy/header-m.jpg) center 0 /100%  no-repeat;}
main.spm .window {    background: url(../images/spm/header-m.jpg) center 0 /100%  no-repeat;}
main.turkey .window {    background: url(../images/turkey/header-m.jpg) center 0 /100%  no-repeat;}
main.kenya .window {    background: url(../images/kenya/header-m.jpg) center 0 /100%  no-repeat;}

*/

    .window {
        --bg-webp: url(../images/header-m.webp);
        --bg-jpg: url(../images/header-m.jpg);


        background-image: var(--bg-jpg);
        background-image: -webkit-image-set(var(--bg-webp) 1x,
            var(--bg-jpg) 1x);
        background-image: image-set(var(--bg-webp) type("image/webp"),
            var(--bg-jpg) type("image/jpeg"));
    }

    main.ne .window {
        --bg-webp: url(../images/header-m.webp);
        --bg-jpg: url(../images/header-m.jpg);
    }

    main.italy .window {
        --bg-webp: url(../images/italy/header-m.webp);
        --bg-jpg: url(../images/italy/header-m.jpg);
    }

    main.spm .window {
        --bg-webp: url(../images/spm/header-m.webp);
        --bg-jpg: url(../images/spm/header-m.jpg);
    }

    main.greece .window {
        --bg-webp: url(../images/greece/header-m.webp);
        --bg-jpg: url(../images/greece/header-m.jpg);
    }

    main.turkey .window {
        --bg-webp: url(../images/turkey/header-m.webp);
        --bg-jpg: url(../images/turkey/header-m.jpg);
    }

    main.kenya .window {
        --bg-webp: url(../images/kenya/header-m.webp);
        --bg-jpg: url(../images/kenya/header-m.jpg);
    }

    .frame {

        background: url(../images/frame-m.png) center 0 /100% no-repeat;
    }


.sl {
    /*不能省*/
        background-position: center 0;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }


    main.ne .sl,main.turkey .sl,main.spm .sl,
    main .sl {
        --sl-webp: url(../images/sl-m.webp);
        --sl-png: url(../images/sl-m.png);


        background-image: var(--sl-png);
        background-image: image-set(var(--sl-webp) type("image/webp"),
            var(--sl-png) type("image/jpeg"));
    }

    /* 肯亞 Kenya */
    main.kenya .sl {
        --sl-webp: url(../images/sl-m.webp);
        --sl-png: url(../images/sl-m.png);
        background-image: url(../images/kenya/sl-kenya-m.png);
        background-image: image-set(url(../images/kenya/sl-kenya-m.webp) type("image/webp"),
            url(../images/kenya/sl-kenya-m.png) type("image/png"));
    }

}



/*-----------------------------------------------
   opening
-----------------------------------------------*/




.opening {

    color: var(--white02);
    position: fixed;
    width: 80%;
    /*! height: 100vh; */
    top: 0;
    left: 0;
    z-index: 999;
    /*background: #fff;*/
    /*background: rgb(3, 3, 3);*/
    opacity: 0.95;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scale_ var(--opening-time) both 0s 1;
    /*pointer-events: none;*/
    right: 0;
    margin: auto;
    max-height: 1370px;
    max-width: 1400px;
    aspect-ratio: 1920 / 1370;
}

@keyframes scale_ {

    0%,
    95% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scaleY(0);
    }
}




.opening-sl{
    color: var(--white02);
    font-family: var(--font-family2);
    position: absolute;
    left: 0;
    font-size: var(--fs-3xl);

    line-height: 1.5;
    padding: 5% 0 0 0;
}


.opening-sl-1 {
    font-size: var(--fs-xl);
    display: block;
    z-index: 5;
    overflow: hidden;
    line-height: 3rem;
    height: 3rem; /* 視窗高度固定一行 */
    position: relative;
}

.opening-sl-1 > span {
    display: block;
    /* 初始狀態在第一行 */
    transform: translateY(0);
    /* 這裡的動畫時間建議設定在 4s 左右，因為你 5.1s 後整個 opening 會消失 */
    animation: openingS1 var(--opening-time) ease-in-out forwards;
}

@keyframes openingS1 {
    0%   { transform: translateY(0); }       /* 第 1 行：飯店已確認 */
    20%  { transform: translateY(0); }       /* 停頓 */
    30%  { transform: translateY(-3rem); }   /* 第 2 行：旅遊天數14天 */
    50%  { transform: translateY(-3rem); }   /* 停頓 */
    60%  { transform: translateY(-6rem); }   /* 第 3 行：您的行程如下 */
    80%  { transform: translateY(-6rem); }   /* 停頓 */
    90%  { transform: translateY(-9rem); }   /* 第 4 行：即將抵達 */
    100% { transform: translateY(-9rem); }   /* 最後停在第 4 行 */
}
@keyframes openingS1-m {
    0%   { transform: translateY(0); }       /* 第 1 行：飯店已確認 */
    20%  { transform: translateY(0); }       /* 停頓 */
    30%  { transform: translateY(-2rem); }   /* 第 2 行：旅遊天數14天 */
    50%  { transform: translateY(-2rem); }   /* 停頓 */
    60%  { transform: translateY(-4rem); }   /* 第 3 行：您的行程如下 */
    80%  { transform: translateY(-4rem); }   /* 停頓 */
    90%  { transform: translateY(-6rem); }   /* 第 4 行：即將抵達 */
    100% { transform: translateY(-6rem); }   /* 最後停在第 4 行 */
}

/*進度條*/
.opening:after {
    content: "";
    display: block;
    position: absolute;
    /*! top: 50%; */
    left: 0;
    height: 1px;
    background-color: var(--white02);

    animation: bar var(--opening-time) linear both 1;
}

   @-webkit-keyframes bar {
       0% {
           width: 0%;
       }

       100% {
           width: 75%;
       }
   }

   @-webkit-keyframes bar-m {
       0% {
           width: 0%;
       }

       100% {
           width: 55%;
       }
   }


.loader {
    /*color: var(--text-color);*/
    var(--white02);

    position: absolute;
    top: 27%;
    right: 2%;
    /*! background: #fff; */
    width: 25%;
    /*height: 20%;*/
    z-index: 10;
    text-align: center;

    min-width: 15rem;
}

.loader:after {
    font-size: var(--fs-h1);
    content: "%";
}

/*數字*/
.loader:before {
    width: 100%;
    height: 100%;
    font-family: var(--font-family-eng2);
    font-size: var(--fs-4xl);
    color: var(--white02);
    content: "";

    animation: loading var(--opening-time) linear both 1;
}


@media screen and (max-width: 768px) {

    .opening {
    width: 85%;
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 0.95;
    animation: scale_ var(--opening-time) both 0s 1;
    right: 0;
    margin: 0 0 0 10%;
    max-height: 1370px;
    max-width: 1400px;
    aspect-ratio: 768/ 700;
}
.loader {
    var(--white02);

    top: 43%;
    right: 1%;
    width: 65%;
    z-index: 10;
    text-align: right;

    min-width: 10rem;
    line-height: 1;
}
.opening-sl{
    left: 0;
    top: 30vw;
    font-size: var(--fs-2xl);

    line-height: 1;
    padding: 0;
}
/*數字*/
.loader:before {
    width: 100%;
    height: 100%;
    font-size: var(--fs-3xl);
    content: "";

    animation: loading var(--opening-time) linear both 1;
}

/*進度條*/
.opening:after {
    content: "";

    animation: bar-m var(--opening-time) linear both 1;
}

.opening-sl-1 > span {
    display: block;
    animation: openingS1-m var(--opening-time) ease-in-out forwards;
    height: 2rem;
    margin: 0 0 1rem 0;
}


.opening-sl-1 {
  font-size: var(--fs-h4);

  line-height: 2rem;
  height: 2rem;
  margin: 0 0 1rem 0;
}

.icons {
  position: absolute;
  width: 75%;
  height: 50px;
  left: 9%;
  top: 111%;
  opacity: 0.9;
}
}




@media screen and (max-width: 375px) {

.opening-sl{
    top: 28vw;

}
}


@keyframes loading {
    0% {content: "0";}

   1% {content: "1";}

   2% {content: "2";}

   3% {content: "3";}

   4% {content: "4";}

   5% {content: "5";}

   6% {content: "6";}

   7% {content: "7";}

   8% {content: "8";}

   9% {content: "9";}

   10% {content: "10";}

   11% {content: "11";}

   12% {content: "12";}

   13% {content: "13";}

   14% {content: "14";}

   15% {content: "15";}

   16% {content: "16";}

   17% {content: "17";}

   18% {content: "18";}

   19% {content: "19";}

   20% {content: "20";}

   21% {content: "21";}

   22% {content: "22";}

   23% {content: "23";}

   24% {content: "24";}

   25% {content: "25";}

   26% {content: "26";}

   27% {content: "27";}

   28% {content: "28";}

   29% {content: "29";}

   30% {content: "30";}

   31% {content: "31";}

   32% {content: "32";}

   33% {content: "33";}

   34% {content: "34";}

   35% {content: "35";}

   36% {content: "36";}

   37% {content: "37";}

   38% {content: "38";}

   39% {content: "39";}

   40% {content: "40";}

   41% {content: "41";}

   42% {content: "42";}

   43% {content: "43";}

   44% {content: "44";}

   45% {content: "45";}

   46% {content: "46";}

   47% {content: "47";}

   48% {content: "48";}

   49% {content: "49";}

   50% {content: "50";}

   51% {content: "51";}

   52% {content: "52";}

   53% {content: "53";}

   54% {content: "54";}

   55% {content: "55";}

   56% {content: "56";}

   57% {content: "57";}

   58% {content: "58";}

   59% {content: "59";}

   60% {content: "60";}

   61% {content: "61";}

   62% {content: "62";}

   63% {content: "63";}

   64% {content: "64";}

   65% {content: "65";}

   66% {content: "66";}

   67% {content: "67";}

   68% {content: "68";}

   69% {content: "69";}

   70% {content: "70";}

   71% {content: "71";}

   72% {content: "72";}

   73% {content: "73";}

   74% {content: "74";}

   75% {content: "75";}

   76% {content: "76";}

   77% {content: "77";}

   78% {content: "78";}

   79% {content: "79";}

   80% {content: "80";}

   81% {content: "81";}

   82% {content: "82";}

   83% {content: "83";}

   84% {content: "84";}

   85% {content: "85";}

   86% {content: "86";}

   87% {content: "87";}

   88% {content: "88";}

   89% {content: "89";}

   90% {content: "90";}

   91% {content: "91";}

   92% {content: "92";}

   93% {content: "93";}

   94% {content: "94";}

   95% {content: "95";}

   96% {content: "96";}

   97% {content: "97";}

   98% {content: "98";}

   99% {content: "99";}

   100% {content: "100";}
   }