@charset "utf-8";
/* CSS Document */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 微軟正黑體;
}

html {
    width: 100%;
    height: auto;
}

img {
    width: 100%;
    border: none;
    display: block;
}

/*::-webkit-scrollbar {display:none;}*/

body {
    width: 100vw;
    height: auto;
    overflow-x: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-position: bottom;
}
#ten,
#ten2
{
    display: block;
    position: absolute;
    top:0%;
    width: 100%;
    z-index: 8;
}

#header-float {
    position: absolute;
    top: 74%;
    width: 100%;
    z-index: 6;
}
.shop-bottom{
    width: 100%;
}

footer {
    width: 100%;
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: rgb(0, 0, 0);
    background: rgb(113, 137, 185);

}

a {
    text-decoration: none;
}

.alink {
    width: 100%;
    height: 100%;
}

#bgtop2 {
    display: inline-block;
    position: absolute;
    z-index: -10;
    width: 100%;
    min-width: 320px;
    height: 100%;
    right: 0;
    background-size: 100%;
    background-image: url(../img/background.png);
    background-repeat:  no-repeat;
    background-position: center top;
    pointer-events: none;
    background-color: #FFEEC1;
}

@keyframes bgupup-play {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -100%;
    }
}


.page-header {
    display: block;
    position: relative;
    width: 100%;
    min-width: 320px;
    height: auto;
    background-size: cover;
    background-position: center center;
    margin-bottom: 15%;
    z-index: 2;
}

.page-header-image {
    display: block;
    position: relative;
    width: 100%;
    min-width: 325px;

}


.page-header-coverbar {
    display: block;
    position: relative;
    width: 100%;
    height: 120px;
    z-index: 30;
    top: 0px;
    background-color: #fff6f7;
    box-shadow: 0px -3px 3px 0px rgba(9, 18, 36, 0.1);
}

.page-header-coverbar-flo {
    display: block;
    position: absolute;
    width: 12%;
    height: auto;
    z-index: 30;
    top: -175%;
    left: 12%;
}

.page-header-coverbar>img {
    position: absolute;
    bottom: -1px;
}

.page-main {
    display: block;
    position: relative;
    width: 100%;
    min-width: 320px;
    margin: 10% auto 0 auto;
    /*filter:drop-shadow(0px 7px 3px rgba(0, 0, 0, 0.5));*/
}

.title {
    display: block;
    width: 100%;
    max-width: 800px;
    min-width: 275px;
    height: auto;
    margin: 0px auto 25px;
    /*filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.5));
	-webkit-filter: drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.5));*/
}

.shop-list {
    display: block;
    width: 100%;
    max-width: 1250px;
    height: auto;
    min-height: 315px;
    margin: 0px auto;
    margin-top: 0px;
    background-image: url(../img/_mid202312.png);
    padding: 10px 0 20px;
    background-position: center bottom;
    background-repeat: repeat-y;
    background-size: contain;

}

.shop-list2 {
    display: block;
    width: 100%;
    max-width: 1250px;
    height: auto;
    min-height: 315px;
    margin: 0px auto;
    margin-top: 0px;
    background-image: url(../img/_mid202312.png);
    padding: 10px 0 20px;
    background-position: center bottom;
    background-repeat: repeat-y;
    background-size: contain;

}

.shop-list::after,
.shop-list2::after {
    content: " ";
    display: table;
    clear: both;
}

.shop-list ul,
.shop-list2 ul {
    display: block;
    text-align: center;
    padding: 0px 0px 0px 13px;
}

.shop-list li,
.shop-list2 li {
    display: inline-block;
    position: relative;
    margin: 0px 23px 16px -15px;
    padding: 7px;
    width: 247px;
    height: auto;
    list-style: none outside none;
    background: #fff;
    border: 1px solid #e5e5e5;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.shop-list li:hover,
.shop-list2 li:hover {
    transform: translateY(-6px);
    box-shadow: 0px 4px 6px 3px rgba(118, 55, 73, 0.53);
}

.shop-list li:hover>.shop_type {
    background: #f8ec45;
}

.shop-list2 li:hover>.shop_type {
    background: #f8ba45;
}

.shop-list-top {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1250px;
    height: 60px;
    margin: 0px auto;
    padding: 0 10px;
    background-image: url(../img/_mid202312.png);
    background-color: #FFF;
    background-position: center bottom;
    background-repeat: no-repeat;
    pointer-events: none;
    background-size: contain;
}

.shop-list-bottom {
    display: block;
    position: relative;
    width: 100%;
    max-width: 1250px;
    height: 175px;
    margin: 0px auto;
    margin-top: 0px;
    padding: 0;

    background-color: transparent;
    background-position: center top;
    background-repeat: no-repeat;
    pointer-events: none;
    background-size: contain;
}

.shop_img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.shop_img img {
    width: auto;
    height: 100%;
}

.shop_type {
    display: block;
    width: 100%;
    height: auto;
    margin: 8px auto;
    text-align: center;
    background: rgb(255, 222, 145);
    padding: 3px 0;
    color: #000000;
    font-size: 21px;
    box-sizing: content-box;
    border-radius: 5px;
}

.s-tittle {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    min-width: 325px;
    max-width: 1250px;
    height: auto;
    margin: 0px auto 40px auto;
    margin-bottom: 0;
    background-color: transparent;
    color: #FFF;
    font-weight: 700;
    font-size: 42px;
    border-radius: 22px 22px 0 0;
}


.shop_name {
    display: block;
    width: 98%;
    height: 42px;
    margin: 1%;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    color: #1F1F1F;

}

.shop_Price {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: auto;
    margin: 4px 0;
}

.shop_Price>p {
    width: 50%;
    font-size: 19px;
    font-weight: 300;
    text-align: left;
    color: #CCC;
    text-decoration: line-through;
}

.shop_Price>p2 {
    width: 50%;
    text-align: right;
    font-size: 28px;
    color: #eb1629;
}

/*Animetion*/
#header-floatAD {
    display: block;
    position: absolute;
    top: 9%;
    left: 29%;
    width: 20%;
    animation-name: banner-floatAD;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes banner-floatAD {
    0% {
        top: 7%;
    }

    50% {
        top: 9%;
    }

    100% {
        top: 7%;
    }
}


/*前背景**************************/

#bgtop3 {
    display: block;
    position: fixed;
    z-index: -5;
    width: 100%;
    background-size: 100vw;
    min-width: 320px;
    height: 16000px;
    top:-464px;;
    background-image: url(../img/ba-scroll.png);
    background-position: center top;
    background-repeat: repeat-y;
    transform: translateY(0%);
}


/**標***************/
#word{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 100%;
    z-index: 5;
    -webkit-animation-name: bangIn;
    -webkit-animation-duration: 1s;

    animation-name: bangIn;
    animation-duration: 1s;
    animation-timing-function:linear;
}
	@keyframes bangIn { 
		0%   {-webkit-transform: scale(3);transform: scale(3);filter:brightness(120%);opacity:0;} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(120%);} 
		60%  { -webkit-transform: scale(1.05); transform: scale(1.05); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);}
	}
	@-webkit-keyframes bangIn {   
		0%   { -webkit-transform: scale(3); transform: scale(3); filter:brightness(120%);opacity:0;} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(120%);} 
		60%  { -webkit-transform: scale(1.05); transform: scale(1.05); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);}
		}

#word01,#word02,#word03 ,#right_hand{
    position: absolute;
    top: 0%;
    right: 0%;
    width: 100%;
    z-index: 6;
}
#word03{
    animation-duration: 3s;
    animation-fill-mode: both;
    animation:shine_light;
    -webkit-animation:shine_light 0.75s infinite alternate linear;
    -moz-animation:shine_light 0.75s infinite alternate linear;
    -ms-animation:shine_light 0.75s infinite alternate linear;
    -o-animation:shine_light 0.75s infinite alternate linear;
    animation:shine_light 0.75s infinite alternate linear;
}
@keyframes shine_light {
    0%   { 
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -ms-transform:scale(1);
        -o-transform:scale(1);
        transform:scale(1);	
    }
    100% { 
        -webkit-transform:scale(0.95);
        -moz-transform:scale(0.95);
        -ms-transform:scale(0.95);
        -o-transform:scale(0.95);
        transform:scale(0.95);	
    }
    }

#gift_all {
        position: absolute;
        top: -9px;
        left: -0.5%;
        width: 100%;
        z-index: 11;
}

#banner{
    position: absolute;
    top: -9px;
    left: -0.5%;
    width: 100%;
    z-index: 2;
}
#rainbow {
    display: inline-block;
    position: absolute;
    overflow: hidden;
    top: -9px;
    left: -0.5%;
    width: 100%;
    z-index: 1;
    animation: wrapper-move1 1s ease;
}
#rainbow>img {
    animation: img-move1 1s ease;
  }
@keyframes wrapper-move1 {
    0% {
      transform: translateY(100%);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes img-move1{
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }

#bot_rainbow {
    display: inline-block;
    overflow: hidden;
    animation: wrapper-move 2s ease;
    position: absolute;
    top: -9px;
    left: -0.5%;
    width: 100%;
    z-index: 3;
}

#bot_rainbow>img {
    animation: img-move  2s ease;
  }

@keyframes wrapper-move {
    0% {
      transform: translateX(200%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes img-move{
    0% {
      transform: translateX(-200%);
    }
    100% {
      transform: translateX(0);
    }
  }
/**回頂部**/
#gotop {
    position:fixed;
    z-index:90;
    right:3%;
    bottom:31px;
    display:none;
    width:50px;
    height:50px;
    background:rgb(255, 222, 145);
    line-height:50px;
    border-radius:50%;
    transition:all 0.5s;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    opacity: 0;
}
#gotop :hover{
    background:rgb(113, 137, 185);
    border-radius: 50%;
}

/******/
#barbar{
    display: block;
    position: relative;
    width: 100%;
    z-index: 1;
    transition:all 0.2s;
}


#bar{
    position: fixed;
    right: 3%;
    width: 8%;

}

.bar1{
    position: absolute;
    z-index: 90;
    right: 33%;
    width: 34%;
}

.menu01{top: 41%;}
.menu02{top: 52%;}
.menu03{top: 64%;}
.menu04{top: 74%;}
.menu05{
    top: 88%;
    width: 49%;
    right: 30%;
}


.bar_hover{
    display: block;
    position: absolute;
    width: 18%;
    right: -57%;
    top: 0%;
    opacity: 0;
}
.bartop_hover{
    display: block;
    position: absolute;
    top: 0%;
    width: 100%;
    opacity:0 ;
}

.bar_text{
    display: block;
    position: absolute;
    width: 204%;
    right: 124%;
    top: 0%;
    opacity:0 ;
}
#background-flower {
    display: block;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 11;
    pointer-events: none;
}



.menu01 :hover .bar_text {opacity:1 ;}
.menu02 :hover .bar_text {opacity:1 ;}
.menu03 :hover .bar_text {opacity:1 ;}
.menu04 :hover .bar_text {opacity:1 ;}


.menu01 :hover .bar_hover {opacity:1 ;}
.menu02 :hover .bar_hover {opacity:1 ;}
.menu03 :hover .bar_hover {opacity:1 ;}
.menu04 :hover .bar_hover {opacity:1 ;}
.menu05 :hover {
    content:url(../img/_bar_5_1.png) ;
}