/** 思源宋體, Libre+Baskerville **/

/*  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');  */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville::ital,wght@0,400;0,700;1,400&display=swap');


body {
	font-family: "微軟宋體","微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif;
	height: 100%;
	width: 100%;
	background-color: #eaeaea;
}

/*kv & banner */
.kv_wrapper {
	width: 100%;
}
.kv, .bnG {
	display: block;
}
.mkv, .mbnG {
	display: none;
}

/* Main color */
:root {
    --purple: #733d99;
	--peach: #df306f;
	--pink: #f777a6;
	--red:#d20145;
	--gray:#777777;
    --gold: #ffdb96;
    --cream: #FFF5E1;
    --primary-gray: #333333;
    --secondary-gray: #666666;
	--white: #ffffff;
    --brown: #4b0603;
	--black: #222;
    --light-purple:#f2d4ea;
    --light-pink:#ffd7d7;
	
}

/******  fonts   *****/
.libre-baskerville-regular {
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-style: normal;
  }
  
  .libre-baskerville-bold {
	font-family: "Libre Baskerville", serif;
	font-weight: 700;
	font-style: normal;
  }

  .libre-baskerville-regular-italic {
	font-family: "Libre Baskerville", serif;
	font-weight: 400;
	font-style: italic;
  }

.f-skew15deg {
	transform: skewX(15deg);
}

/******  fonts End   *****/

.bg_newin{
	background-color: #39708b;
}
.bg__loveMen, .bg__loveDaddy{
	background-color: #050b0c;
}
.bg-pink {
	background-color: #ffb3b3;
}

.bg-white {
	background-color: #ffffff;
}
.bg-Blue {
	background-color: #2b8fc1;
}
.bg-lightBlue {	
	background-color: #9fd1f2;
}
.bg-yellow {
	background-color: #ffe100;
}

.bg-fuchsia {
	background-color: #EB3E80;
}
.btn-theme{
	background-color: #606060 !important; /* #FF9291 */
	color: #ffffff !important; /* E62949 */
}
.btn-theme2{
	background-color: #b8251c;
	color: #eee;
}

.btn-yellow{
	background-color: #e65282 !important;
    color: #fff !important;
    border: 2px #e65282 solid;
	padding: 2px;
}
.btn-yellow:hover{
	background-color: #fff !important;
	color: #e65282 !important;
	border: 2px #e65282 solid;
}

.btn-red{
	background-color: #ffe33a !important;
    color: #000 !important;
    border: 2px #000 solid;
	border-radius: 22px;
	box-shadow: #000 3px 3px 0px;
	font-weight: 600;
	font-size: large;
}
.btn-red:hover{
	background-color: #ffe33a !important;
	color: #333 !important;
	border: 2px #333 solid;
	box-shadow: transparent 3px 3px 0px;
}

.btn-pink{
	font-family: "Noto Serif TC", serif;
	font-weight: 600 !important;
	font-style: italic;
	background-color: #ffffff !important;
	border: 2px #ffffff solid;
	border-radius: 4px;
    color: #a35fba!important;
    font-size: larger;
	transition: all 0.2s;
}

.btn-pink:hover{
	font-style: normal;
	background-color: transparent !important;
	color: #ffffff !important;
	border: 2px #ffffff solid;
	box-shadow: transparent 3px 3px 0px;
}

.btn-pink-info{
	padding: 4% 2%;
	background-color: transparent !important;
	color: #333333 !important;
	border: 0px #ffffff solid;
	font-size: large;
	text-decoration: underline;
}
.btn-pink-info:hover{
	text-decoration: none;
	font-style: italic;
}

.btn-white-info{
	padding: 4% 2%;
	background-color: transparent !important;
	color: #ffffff !important;
	border: 0px #fff solid;
	font-size: large;
	text-decoration: underline;

}
.btn-white-info:hover{
	color:#f8dbdf !important;
	border: 0px #fff solid;
	text-decoration: none;
}

.btn-darkblue:hover{
	background-color: #ff5db6 !important;
	/* filter: invert(1); */
}


/*font color*/

.text_pink{
	color:#de4174;  /*  #fe3c93   */
}

.text_purple{
	color: #6317c1;
	border: 1px #6317c1 dashed;
	margin: 1% 0%;
	padding: 0.5% 0%;
}

.text_blue{
	color: #2c8fc2;
}

.text_yellow_lite {
	color: #ffef5c;
	font-weight: bold;
}
.text_green{
	color: #4e9d72;
}

.text_red{
	color: #da4633;
}
.text_darkred{
	color: #920117;
}

.text_snack_info{
	color: #2c2b15;
}

.discountBox_title__color{
	color:#c1251a;
}
.text_yellow{
	color: #de4174;
}
.discountBox__title__color2{
	color:#f16081; /*#D7393F;*/
}
.text_title {
	color: #a5ebf7;
}
.text_info2 {
	color: #ffffffeb;
	/* font-weight: 600; */
}
.text_info {
	color: #ffffff;
}

.text_darkO {
	color: #463c37;
}
.text_khaki {
	color: #a2877b;
}
.text_price_red{
	color: #F34D6D;
}
.text_fuchsia {
	color: #ff5991; /*#EB3E80; */
	font-weight: 600;
}
.text_bold {
	font-weight: 600;
}
.text-center {
	text-align: center;
}
.text-left{
	text-align: left;
}
.price-before {
	text-decoration: line-through;
	color:#9E8D8D;
}

/*font size*/

.f1 {
	font-size: 4vw;
}
.f2 {
	font-size: 3vw;
}
.f3-1 {
	font-size: 2vw;
	font-weight: bold;
	/* font-family: 'Noto Serif TC';  思源宋體*/
	margin-top: 2%;
}

.f3 {
	font-size: 1.8vw;
	font-weight: bold;
	/* font-family: 'Noto Serif TC';  思源宋體*/
}
.f3_b {
	font-size: 1.9vw;
}
.f3_r {
	font-size: 2vw;
	font-weight: bold;
	/* filter: drop-shadow(0px 0px 3px #ff425a); */
	line-height: normal;
}
.f4 {
	font-size: 1.2vw;
}
.f5 {
	font-size: 1vw;
	line-height: normal;
}
.f5_r {
	font-size: 1.3vw;
	font-weight: bold;
	line-height: normal;
}
.f6 {
	font-size: 0.9vw;
}
.f6_r {
	font-size: 1vw;
	font-weight: bold;
	letter-spacing: 1px;
}
.f6_g {
	font-size: 1.1vw;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: normal;
}
.f7 {
	font-size: 0.8vw;
}

.btn-wrapper-dis {
    margin: 4% 10% 1%;
	display: block;
}

.btn-wrapper {
	width: 36%;
    margin: 3% 2% 1%;
	display: inline-block;
}
.w42 {
	width: 42%;
	margin-right: 2%;
}
.w36 {
	width: 36%;
}

.kv-bg {
    background-color: #f2a3b8;
}


.btn-wrapper-more {
	width: 100%;  
	margin: 0% auto 0%; 
}
.btn-wrapper-gift {
    width: 60%;
	margin: 0% 20% 0%;
    z-index: 4;
}

.btn-main {
	padding: 3% 5%;
    font-weight: 600;
}

.custom-btn {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    font-size: large;
    font-weight: 400;
    line-height: normal;
    transition: all 0.3s;
    padding: 5%;
}
.custom-btn:hover {
    background-color: #e65282 !important;
    color: #ffffff !important;
}

/* 動態文字     */
.button--atlas > span {
	display: inline-block;
  }
  
  .button--atlas:hover > span {
	opacity: 0;
  }
.marquee {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    pointer-events: none;
}

.marquee__inner {
    width: fit-content;
    display: flex;
    position: relative;
    --offset: 1rem;
    --move-initial: calc(-25% + var(--offset));
    --move-final: calc(-50% + var(--offset));
    transform: translate3d(var(--move-initial), 0, 0);
    animation: marquee 1s linear infinite;
    animation-play-state: paused;
    opacity: 0;
}
.button--atlas:hover .marquee__inner {
	animation-play-state: running;
	opacity: 1;
	transition-duration: 0.4s;
}
  
.marquee span {
	text-align: center;
	white-space: nowrap;
	font-style: italic;
	padding: 15px;
}

@keyframes marquee {
	0% {
	  transform: translate3d(var(--move-initial), 0, 0);
	}
  
	100% {
	  transform: translate3d(var(--move-final), 0, 0);
	}
  }
  


.btn-text-right {
    text-align: right;
}
.btn-text-left {
    text-align: left;
}
.btn-text-center {
    text-align: center;
}

.btn-main-inline {
    display: inline;
    padding: 1% 4%;
	text-align: center;
}
.btn-purple {
    background-color: #7a6dbf !important;
    color: white !important;
    border: 2px #ffffff solid;
	border-radius: 20px;
}

.btn-inline {
    display: inline;
	margin: 0% 0% 0% 24%;
}

.btninfo-c {
    /* line-height: 2em; */
    padding: 5% 2%;
    text-align: center;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
}

.btninfo-c:hover {
    color: #000000;
    text-decoration: none;
}

.btn4 {
    padding: 0 7%;
    text-align: center;
}

.moreBtn1 {
    width: 16%;
	font-size: 1vw;
	font-weight: bold;
    color: #ab011b;
    background-color: #fff1c9;
    border: 2px solid #fff1c9;
    padding: 8px 4px;
    margin: 0% 42% 1%;
}
.moreBtn1:hover {
    color: #fff1c9;
    background-color:transparent;
    border: 2px solid #fff1c9;
}

.moreBtn {
    width: 16%;
	font-size: 1vw;
	font-weight: bold;
    color: #ffffff;
    background-color: #ab011b;
    border: 2px solid #ab011b;
    padding: 8px 4px;
    margin: 0% 42% 1%;
}
.moreBtn:hover {
    color: #ab011b;
    background-color:#fff1c9;
    border: 2px solid #ab011b;
}

.btn-B5wrapper {
	width: 40%; 
	margin: 0% auto;  
	position: relative;
	/* margin: 10px auto; */
}


.btninfo_y {
    /* line-height: 2em; */
    padding: 5% 2%;
    text-align: center;
    font-weight: 600;
    color: #fcde96;
    text-decoration: underline;
}

.btninfo_y:hover {
    color: #fff;
    text-decoration: none;
}


.btninfo {
    /* line-height: 2em; */
    padding: 5% 2%;
    text-align: center;
    font-weight: 600;
    color: #333333;
}

.btninfo:hover {
    color: #000000;
    text-decoration: none;
}
.underline {
	text-decoration: underline;
}

.btn-info {
    color: #c1251a;
    text-decoration: underline;
    padding: 2%;
    display: block;
    text-align: center;
	margin: 1%;
	letter-spacing: 0.05vw;
}
.btn-info:hover{
	color: #f06b6b;
}

.mg-b{
	margin-bottom: 3%;
}

.mg-top {
	margin-bottom: 2%;
}

.mg-bottom {
	margin-bottom: 2%;
}

.content-text {
	font-size: 1.3vw;
	font-weight: bold;
	line-height: normal;
}

.dis_info {
	position: absolute;
    z-index: 4;
    margin: 71% 17% 0%;
    width: 60%;
}

.event_wrap {
	width: 100%;
	height: 100%;
	/*font-family: futura-pt, Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei";*/
}

a {
	color: #5d656c;
	text-decoration: none;
}

/****** discount ******/
.event-box-wrap-row1 {
    position: relative;
	text-align: center;
}

.discountArea {
	position: relative;
	width: 100%;
	margin: 0% auto;
	/* margin-bottom: 3.5% !important; */
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 1%;
}
.mg-top{
	margin-top: -21%; 
}

.discountBox__icon {
    max-width: 26%;
    position: absolute;
    right: 1%;
	top: 6%;
	-webkit-animation: floating-icon 2s ease-in-out infinite;
    -moz-animation: floating-icon 2s ease-in-out infinite;
    animation: floating-icon 2s ease-in-out infinite;
}

/*discount ROW2*/
.discountArea_row2 {
	position: relative;
	width: 100%;
	/* margin-bottom: 3.5% !important; */
	display: flex;
	align-items: center;
	justify-content: center;
	/* flex-wrap: wrap; */
	/* background: linear-gradient(to top, #16203b 0%, #16203bc7 40%, #16203b00 100%); */
	margin-top: 0%;  /*-25% */
	padding-bottom: 3%;
}


@keyframes floating-icon {
    0% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

    50% {
      -webkit-transform: translateY(4px);
      -moz-transform: translateY(4px);
      -ms-transform: translateY(4px);
      -o-transform: translateY(4px);
      transform: translateY(4px);
    }

    100% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
  }

/***********************************
New In
******************************/

.boutique-bg {
	width: 100%;
	padding: 0%;
	background: url(../images/boutique-bk.jpg) 100% 100% no-repeat;
	background-size: cover;
	background-color: #d2ccc5;
}

/*
.newin__row{
    display: flex;
    flex-wrap: wrap;
}
*/
.mainBox-bg {
    filter: saturate(1.0);
}

.newin_box {
    position: relative;
    width: 37.5%;
    margin: 0.5%;
}


.newin_box2 {
    position: relative;
    width: 18.4%;
    margin: 0.5%;
}

.bk-discount-img {
	background-color: #f148a9;
	/*
	background-image: url(../images/xxxxx.jpg);
    background-repeat: no-repeat;
	background-size: cover;
	background-position: center top;
	*/
}

.btn-pinknew {
    background-color: #f148a9 !important;
    color: white !important;
	border: 2px #f148a9 solid;
	width: 90%;
	font-weight: bold;
	padding: 4% 4%;
}

.btn-pinknew:hover {
    background-color: rgba(255, 255, 255, .85)!important;
    color:  #f148a9 !important;
    border: 2px #f148a9 solid;
}

.btn-pinkrow2 {
    background-color: transparent !important;
    color: #f148a9 !important;
	border: 2px #f148a9 solid;
	width: 90%;
	font-weight: bold;
	padding: 4% 4%;
}

.btn-pinkrow2:hover {
    background-color: #f148a9 !important;
    color:  #ffffff !important;
    border: 2px #f148a9 solid;
}

.lnewIn-bg {
    filter: saturate(1.1);
}

.paddng-B {
	padding-bottom: 3%;
}


.mtopL{
	margin-top: -18%;
}

.summer_leftBR{
	border-radius: 60px 0px 0px 0px;
}

#mtopR, .mtopR{
	margin-top: 18% !important;
}

/***********************************
好物推薦
******************************/

.goods-bg {
	width: 100%;
	padding: 2% 0% 0%;
	background: url(../images/goods-blue.jpg) 100% 100% no-repeat;
	background-size: cover;
	background-color: #d2ccc5;
}

/***********************************
Makeup (Fashion & Beauty)
******************************/


.makeup-box-text-wrap {
    width: 100%;
    margin: 0%;
    background-color: #fff1c9;
    bottom: -60px;
    text-align: center;
    padding: 3%;
}

.event-box-text-wrap {
    width: 86%;
    margin: 4% 7%;
    background-color: #fff;
    position: absolute;
    z-index: 3;
    bottom: -60px;
    border-radius: 16px;
    text-align: center;
    padding: 3%;
}

.event-box-text-wrap-2 {
    width: 86%;
    margin: 4% 7%;
    background-color: #fff;
    position: absolute;
    z-index: 3;
    bottom: -60px;
    border-radius: 16px;
    text-align: center;
    padding: 3%;
}

.btn-red2 {
    background-color: #ab011b !important;
    color: #ffffff !important;
    border: 2px #ab011b solid;
    font-weight: bold;
    padding: 2%;
    width: 50%;
    margin: 2% 25%;
}

.btn-red2:hover {
	background-color: transparent !important;
    color:#ab011b !important;
    border: 2px#ab011b solid;
}
.btn-shop {
	color: #ffffff !important;
	filter: drop-shadow(1px 1px 3px #393120);
    font-weight: bold;
    padding: 2%;
    position: absolute;
    bottom: 3%;
    right: 10%;
}
.btn-shop:hover {
	color:#fff9a6 !important;
	filter: drop-shadow(1px 1px 4px #2c2517);
}




.btn-pink3 {
    background-color: #a35fba !important;
    color:var(--white) !important;
    font-weight: bold;
    font-style: normal;
    padding: 2% 6%;
    width: 100%;
    margin: 2% 0%;
    font-size: 1vw;
    border:1px var(--white) solid;
    border-radius: 4px;
}

.btn-pink3:hover {
	color: #a35fba !important;
    background-color: var(--white) !important;
    border:1px #a35fba solid;
    font-style: italic;
}

/***********************************
  Summer Sale
******************************/

.summer_area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: auto;
}

.summersale_box1 {
    position: relative;
    width: 49%;
    margin: 0.5%;
}

.summersale_box2 {
    position: relative;
    width: 24%;
    margin: 0.5%;
}

.btn-summer-wrapper {
	width: 42%;
	/* margin: 5% auto;
	margin: 10px auto; */
}

.btn-summer1 {
    /* line-height: 40px; */
    padding: 1.5%;
    text-align: center;
    position: absolute;
    z-index: 3;
	bottom: 13%;
    left: 15.5%;
}
.btn-summer1-B {
    /* line-height: 40px; */
    padding: 1.5%;
    text-align: center;
    position: absolute;
    z-index: 3;
	bottom: 35%;
	left: 18%;
}

.btn-summer2 {
    /* line-height: 40px; */
    padding: 3%;
    text-align: center;
    position: absolute;
    z-index: 3;
    bottom: 20px;
    right: 20px;
}
.summerS-bg {
    filter: saturate(1);
}
.summerS-bg img {
    border-radius: 0px;
}

.summerS-bg:hover img {
	filter: saturate(1.3);
	transform: scale(1.02);
    transition: all 0.2s;
}

.mb-discountBox{
	margin-bottom: 28% !important;
	margin-top: 28% !important;
}
.discountBox {
	position: relative;
	width: 75%; /* 80% */
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
	padding-top: 0%;
}

.main-box-wrap {
	background: #fff;
    text-align: center;
    width: 100%;
    padding: 5%;
    /* border: 0px solid #111111; */
    border-radius: 24px 24px 24px 24px;
}

.dis-border-red {
	border: 6px solid #da4633;
}
.dis-border-blue {
	border: 6px solid #2d90c2;
}
.dis-border-green {
	border: 6px solid #499d71;
}
.dis-border-yellow {
	border: 6px solid #ffe33b;
}

.main-box-wrap2 {
    background: #ffd0d0;
    text-align: center;
    width: 100%;
    padding: 7%;
	border: 0px solid #111111;
	border-radius: 0px 0px 0px 70px;
}

.top_container {
    position: relative;
}

.fan-box-gold {
	position: absolute;
	z-index: 2;
	left: 24px;
	top: -30px;
    /* border-radius: 48px; */
    /* background: #4e74e4; */
    /* background-image: linear-gradient(to right, #4f75e4 ,#7292e8); */
	/* width: 31%; 
	height: 20.5%; */
}

.fan-box-red {
	position: absolute;
	z-index: 2;
	left: 0px;
	top: -30px;
}

.discountBox_default {
	position: relative;
	width: 24%;
    margin: 0%;
    padding: 0% 0.7%;
	background-size: contain;
	background-repeat: no-repeat;
}
.discountBox_default img {
	margin: 7px 0px;
    -webkit-filter: drop-shadow(6px 6px 8px rgba(106, 78, 84, 0.5));
    filter: drop-shadow(6px 6px 8px rgba(106, 78, 84, 0.5));
}
.discountBox_default_row1{
	position: relative;
	width: 24%;
    margin: 0%;
    padding: 0.2%;
	/* border-radius: 14px; 
		width: 33%;
		margin: 0;
		padding: 2%;
	*/
	background-size: contain;
	background-repeat: no-repeat;
	/* box-shadow: #f4de34 26px 27px 0px; */
}

.discountBox_L_row2{
	position: relative;
	width: 100%;   /* width: 46.9%; */
    margin: 0% 1%;  /* margin: 0%; */
    padding: 0.2%;
	background-size: contain;
	background-repeat: no-repeat;
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	/* box-shadow: #f4de34 26px 27px 0px; */
}

.discountBox_default_row2{
	position: relative;
	width: 47.1%;   /* width: 46.9%; */
    margin: 0% 1%;  /* margin: 0%; */
    padding: 0.2%;
	background-size: contain;
	background-repeat: no-repeat;
	/*
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	 box-shadow: #f4de34 26px 27px 0px; */
}
.img-bor1 {
	border-radius: 24px 0px 0px 0px;
}
.img-bor2 {
	border-radius: 0px 0px 0px 24px;
}

.discountBox_default_row2 img{
	margin: 0px 0px;
    padding: 0px;
    border-radius: 24px 24px 0px 0px;
}



.discountBox01,.discountBox02,.discountBox03, .discountBox04 {
	/* background-color: black;
	padding-top: 1%;*/
	padding: 3% 2% 3% 2%;
}


.discountBoxNo {
	display: inline-block;
	font-style: italic;
	text-align: center;
	padding-top: 5%;
	/* border: 1px solid #ffdf3f;
	padding: 15% 15% 0 0; */
}
.discountDate {
	position: relative;
	margin: -4% auto 0%;
	/* font-family: 'Noto Serif TC', Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei"; */
	line-height: 2em;
	letter-spacing: 3px;
	z-index: 1;
	font-weight: 600;
}

.discountBox ul li {
    list-style: none;
}
.date_paddingL {
	padding-left: 20%;
}

.discountTitle{
	line-height: normal;
}
.date_1 {
	color:#fff;
	font-weight: bold;
}
.date {
	width: 56%;
	margin: 0% auto 1%;
}
.date img {
	width: 100%;
}



/**** animation  PC****/

.animation-one {
	-webkit-animation: move-one 10s ease-in-out infinite;
	animation: move-one 10s ease-in-out infinite;
}
@keyframes move-one {
	0% {
		-webkit-transform: translateX(0) translateY(10px);
		transform: translateX(0) translateY(10px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(-20px);
		transform: translateX(0) translateY(-20px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(10px);
		transform: translateX(0) translateY(10px)
	}
}
@-webkit-keyframes move-one {
	0% {
		-webkit-transform: translateX(0) translateY(10px);
		transform: translateX(0) translateY(10px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(-20px);
		transform: translateX(0) translateY(-20px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(10px);
		transform: translateX(0) translateY(10px)
	}
}


.animation-two {
	-webkit-animation: move-one 5s ease-in-out infinite;
	animation: move-one 5s ease-in-out infinite;
}
@keyframes move-two {
	0% {
		-webkit-transform: translateX(0) translateY(-25px);
		transform: translateX(0) translateY(-25px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(5px);
		transform: translateX(0) translateY(5px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(-25px);
		transform: translateX(0) translateY(-25px)
	}
}
@-webkit-keyframes move-two {
	0% {
		-webkit-transform: translateX(0) translateY(-25px);
		transform: translateX(0) translateY(-25px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(5px);
		transform: translateX(0) translateY(5px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(-25px);
		transform: translateX(0) translateY(-25px)
	}
}

.animation-three {
	-webkit-animation: move-one 6s ease-in-out infinite;
	animation: move-one 6s ease-in-out infinite;
}
@keyframes move-three {
	0% {
		-webkit-transform: translateX(0) translateY(5px);
		transform: translateX(0) translateY(5px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(-20px);
		transform: translateX(0) translateY(-20px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(5px);
		transform: translateX(0) translateY(5px)
	}
}
@-webkit-keyframes move-three {
	0% {
		-webkit-transform: translateX(0) translateY(5px);
		transform: translateX(0) translateY(5px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(-20px);
		transform: translateX(0) translateY(-20px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(5px);
		transform: translateX(0) translateY(5px)
	}
}

.animation-four {
	-webkit-animation: move-four 8s ease-in-out infinite;
	animation: move-four 8s ease-in-out infinite;
}
@keyframes move-four {
	0% {
		-webkit-transform: translateX(0) translateY(-30px);
		transform: translateX(0) translateY(-30px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(10px);
		transform: translateX(0) translateY(10px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(-30px);
		transform: translateX(0) translateY(-30px)
	}
}
@-webkit-keyframes move-four {
	0% {
		-webkit-transform: translateX(0) translateY(-30px);
		transform: translateX(0) translateY(-30px)
	}
	50% {
		-webkit-transform: translateX(0) translateY(10px);
		transform: translateX(0) translateY(10px)
	}
	100% {
		-webkit-transform: translateX(0) translateY(-30px);
		transform: translateX(0) translateY(-30px)
	}
}
/*
content: "";
	position: absolute;
	width: 50%;
	height: 20px;
	background-color: #a5ebf7;
	right: 25%;
	bottom: 10px;
	z-index: -3;

.discountDate-color::after {
	background-color: #ffdf3f;
}*/

.img-box{
	display: inline-block;
	position: absolute;
	height: auto;
	z-index: 4;
}

.img-box-01{
	max-width: 14%;
	left: 9%;
	top: -13%;
}
.img-box-02{
	max-width: 12%;
	left: 10%;
	top: -11%;
}
.img-box-03{
	max-width: 12%;
	left: 54%;
	top: -12%;
}


/* newSale 黑五精品特賣  START */
.newSale{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 2% 0%;
}



.newSale__box{
	position: relative;
	width: 25%;
	margin: 0 1%;
}
.newSale img:hover{
	filter: saturate(1.4);
	transition: all 0.2s;
	opacity: 0.8;
}
.newSale__box01{
	position: relative;
}



.newSale__box02__content{
	position: relative;
}


.newSale__box03__content{
	position: relative;
	margin-top: 8%;
}

.newSale__box04{
	position: relative;
	margin-top: 5.5%;
}

.newSale__box__text{
	position: absolute;
	color: white;
	font-weight: 600;
}
.newSale__box__text_01,.newSale__box__text_04{
	left: 33%;
	top: 37%;
}
.newSale__box__text_02, .newSale__box__text_03 {
    left: 33%;
    top: 28%;
}


.newSale__box__btn__wrap{
	position: absolute;
	width: 100%;
}
.newSale__box__btn__wrap_01,.newSale__box__btn__wrap_04{
	bottom: 30%;
	left: 0%;
}

.newSale__box__btn__wrap_02,.newSale__box__btn__wrap_03{
	bottom: 18%;
	right: 2%;
}





/* newSale 黑五精品特賣  END */



/* newBrand 精品品牌們  START */
.newBrand__wrapper{
	width: 100%;
}
.newBrand{
	width: 80%;
	margin: 0 auto;
}

/* newBrand 精品品牌們  END */

/* gift 限量美妝大禮包  START */

.img_1111{
	position: absolute;
	width: 20%;
	top: 3%;
	left: 35%;

}

.gift__wrap{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 5%;
}

.gift__area{
	width: 40%;
	border: 0.25rem solid #FFB236 ;
	padding: 3% 2% 2% 4%;
}

.gift__img{
	width: 35%;
	margin: 3%;
}

.gift__info{
	margin-top: 5% ;
}

/*---------  gift 限量美妝大禮包 END   ----------*/

.beautySale__wrapper{
	padding-top: 3%;
}


/*---------  美妝&精品 任2件88折 START   ----------*/
.brandBox__one:hover, .brandBox__two__contentBox:hover{
	/* transform: scale(1.03); */
	opacity: 0.9;
	transition: all 0.2s;
}
.brandBox__btn-wrapper>.btn {
	line-height:1.2rem; /*0.6rem; */
	/* padding: 0 7%; */
	background-color: #ffffffcf;
	margin-bottom: 7%;
	width: 70%;
}
.brandBox__btn-wrapper2>.btn {
	/* line-height:1.2rem; 0.6rem; */
	background-color: #ffee06d1;
	margin-bottom: 7%;
	width: 55%;
	color: black;
}

.brandBox__wrap{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 4% 0 7%;/*0 5%; */
}

.brandBox__area__layout{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1% 0%;
	z-index: 1;
	/* margin-right: -17%; */
	/* flex-wrap: wrap; */
}
.width-justify{
	width: 100%;
}
.brandBox__one__new{
	position: relative;
	width: 47%;
	/* margin-bottom: 3%; */
}
.brandBox__one{
	position: relative;
	width: 32.5%;
	margin-bottom: 3%;
}
.brandBox__one__contentBox{
	position: absolute;
	text-align: center;
	width: 100%;
	bottom: 0px;
	left: 0;
	height: 50%;
	/* background-color: #0404045e; #ffffffb0; */
	z-index: 10;
	padding: 1% ;
}
.brandBox__one__contentBox__title, .brandBox__two__contentBox__title{
	text-transform: uppercase;
	line-height: 1.5rem;
}



.brandBox__two{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: 33.5%;
	/* margin-bottom: 3%; */
	margin: 0 7px 3% 0px; /* 0 -8px 3% -11px; */
}

.brandBox__two__contentBox{
    position: relative;
    width: 47%;
    height: 47%;
    /* background-color: #f34d6d; */
    /* margin-right: 0.5%; */
    margin-left: 4px; /* 2% */
    margin-top: 0%;
}

.brandBox__two__contentBox:nth-child(1), .brandBox__two__contentBox:nth-child(2){
	/* border: 2px #f9f330 solid; */
	box-sizing: border-box;
}

.brandBox__two__contentBox:nth-child(3), .brandBox__two__contentBox:nth-child(4){
	margin-top: 1%;
	margin-bottom: 1%;
	box-sizing: border-box;
}

.brandBox__two__content{
	position: absolute;
	bottom: 0%;
	width: 100%;
	height: 27%;
	/* line-height: 1.5em; */
	background-color: #252323bf;
}

.brandBox__two__content__bgc{
	position: absolute;
	bottom: 0%;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(0deg, #46a1b5 0%, #706c6c00 80%, #0a3ee200 100%);
}
#snackSale .brandBox__two__content__bgc{
	background-image: linear-gradient(0deg, #263434 0%, #706c6c00 80%, #0a3ee200 100%);
}

.brandBox__two__content__nobgc{
	position: absolute;
	bottom: 0%;
	width: 100%;
	height: 27%;
	/* background-color: white; */
}

.brandBox__two__contentBox__btn{
	position: absolute;
	width: 100%;
	/* bottom: 4%; */
	bottom: -3%;

}

.brandBox__wrap__new{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}


.brandBox__verticalTwo{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	width: 52%;
	height: 48%;
}

.brandBox__two__new{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	width: calc(33%/2);
	margin-bottom: 3%;
}
.brandBox__area__layout__mgl-justisfy{
	margin-right: -18%;
}
.brandBox__area__layout__mgl-justisfy2{
	margin-left: -9%;
}
.mgl-justisfy{
	margin-left: -26%;
}
/* .mgl-justisfy2{
	margin-right: 56%;
} */
.mgl-justisfy2{
	margin-right: -26%;
}


.brandBox__area__layout2{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1% 0%;
	z-index: 1;
	/* margin-right: -17%; */
	/* flex-wrap: wrap; */
}








/* ------------------ 限量美妝 limitBeauty ------------------ */
.limitBeauty__wrapper{
	position: relative;
	width: 100%;
	display: block;
	text-align: center;
	background-color: #6DC1C1; /*#FF928A; */
}
/* .two__two__wrap{
	position: relative;
	width: 100%;
	margin: 1%;
	display: inline-table;
} */


.three__one__wrapper{
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
}
.three__one__content{
	position: relative;
	/* width: 100%; */
	margin: 4% 0;
	/* margin: 0 auto; */
}
.three__one__box:hover, .two__two__box:hover, .two__two__content__img__info>img:hover{
	transform: scale(1.03);
	transition: all 0.2s;
}
.three__one__perBox a:hover, .two__two__perBox a:hover, .two__two__content__img__info>img:hover{
	/* opacity: 0.9; */
	filter: saturate(1.4);
	transition: all 0.2s;
}
.three__one__content__img__info{
	display: inline-block;
	/* position: absolute; */
	max-width: 65%;
}
.three__one__box {
	position: relative;
	width: 28%;
	height: 100%;
	margin: 3% 1%;
	display: inline-table;
	text-align: center;
	color: black;
	border-radius: 20px; /* 30px 30px 0px 20px; */
}

.three__one__box__title{
	/* font-family: 'Noto Serif TC', Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei"; */
	text-transform: uppercase;
	margin: 10% 0;
	color: #FF2A4E;
	font-weight: 600;
}
.three__one__wrapper .img__title__date{
	display: inline-block;
	position: absolute;
	/* height: auto; */
	max-width: 28%;
	left: 35%;
	top: -18%;
	z-index: 1;
}

.two__two__wrapper{
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: space-evenly;
	/* margin-right: 2%;
	width: 100%;*/
}
.two__two__content{
	position: relative;
	/* width: 100%; */
	margin: 4% 0;
	/* margin: 0 auto; */
}

.two__two__content__img__info{
	display: inline-block;
	/* position: absolute; */
	max-width: 65%;
}

.two__two__wrapper .img__title__date{
	display: inline-block;
	position: absolute;
	/* height: auto; */
	max-width: 40%;
	left: 29%;
	top: -15%;
	z-index: 1;
}
.img__platform{
	display: inline-block;
	position: absolute;
	/* height: auto; */
	max-width: 30%;
	left: 35%;
	bottom: -4%;
	z-index: 0;
}

.two__two__box {
	position: relative;
	width: 43%;
	height: 100%;
	margin: 3% 1%;
	display: inline-table;
	text-align: center;
	color: black;
	border-radius: 20px; /* 30px 30px 0px 20px; */
}

.two__two__box__title{
	font-family: futura-pt, 'Crimson Text', Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei";
	text-transform: uppercase;
	margin: 10% 0 2% 0;
	color: #FF2A4E;
	font-weight: 600;
}





.leaf {
	display: inline-block;
	position: absolute;
	height: auto;
	max-width: 20%;
	left: 10%;
	top: -20%;
	z-index: 1;
}
.mask {
	display: inline-block;
	position: absolute;
	height: auto;
	max-width: 21%;
	left: 69%;
	top: 35%;
	z-index: 1;
}
.hightlight {
	display: inline-block;
	position: absolute;
	height: auto;
	max-width: 7%;
	left: 79%;
	top: 12%;
	z-index: 1;
	animation: hightlight 1.8s infinite;
	animation-delay: 1s;
	animation-iteration-count: 5, 0, infinite;
}
@keyframes hightlight {
	0% {
		opacity: 1;
	}
	15% {
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.lightning {
	display: inline-block;
	position: absolute;
	max-width: 10%;
	height: auto;
	right: 15%;
	top: 47%;
	z-index: 1;
	animation: lightning 1.4s infinite;
}
@keyframes lightning {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 0;
	}
	35% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.mt5 {
	margin-top: 5%;
}
.mb5 {
	margin-bottom: 3.5%;  /* 5%  */
}
.mg5{
	margin: 5% 0;
}
.mg3{
	margin: 3% 0;
}
.discountText {
	line-height: 1.5em;
	/* margin-bottom: 2%; */
	padding: 1% 0;
	z-index: 5;
}
.discountText02, .discountText02_H {
	margin-bottom: 2%;
}
.discountText02_H {
	visibility: hidden;
}


/*new arrival*/

.newArea {
	width: 100%;
	color: #fcf1c3;
	/*#FFDE3F;*/
	padding-top: 4%;
	padding-bottom: 4%;
	background-color: #66B7D3;
}
.newArea a {
	color: #fcf1c3;
	/*#ef2874 #e4e4e4; */
}
.newBox {
	width: 100%;
	margin: 0 auto;
}

.TitleBox {
	/* width: 6%; */
	margin: 0;
	/* margin: 0 2%; */
	/* width: 15%; */
}
/* .Title {
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	padding: 2%;
	background-color: #eb3e80;
	box-shadow: -4px -4px 0px 2px #a5ebf7;
	font-style: italic;
} */

.bigBox{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.bigBox__content{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 4%;
	/* width: 100%; */
	/* background-image: url(../images/bigBox__img.png);
	background-size: contain;
	background-repeat: no-repeat; */
	/* padding: 2% 5%; */

}



.bigBox__img__pc{
	text-align: center;
	position: relative;
	width: 80%;
	/* height: auto; */
	z-index: -1;
	display: block;
}
.bigBox__img__mobile{
	text-align: center;
	position: relative;
	width: 60%;
	z-index: -1;
	display: block;
}

.bigBox__info__wrap{
	position: absolute;
	/* display: flex; */
	 display: inline-block;
	/*width: 100%;*/
	z-index: 1;
	/* margin: 0.5%; */
	top: 26%;
	left: 47%;
}
.bigBox__info__img{
	position: relative;
	/* max-width: 100%; */
	margin: 0 5% 0 0;
}
.bigBox__info{
	padding-right: 10px;
}

.bigBox__info1, .bigBox__info2, .bigBox__info3{
	margin: 3% 0;
}




.newItemBox {
	/* width: 90%; */
	width: 100%;
	display: flex;
	margin-top: 30px;
}
.newItem {
	width: 30%;
	margin: 1.5%;
}
.newItem ul li {
	list-style: none;
}
.newPic:hover {
	filter: saturate(1.3);
}
.newTitle {
	margin: 3.5% 0;
	line-height: 1.3em;
}


.btn-size{
	display: inline-block;
	border: 1px solid white;
	padding: 8px 17px;
	margin: 1% 4% 6%;
}
.btn-size:hover{
	border: 1px solid black;
	color: #020100;
	background-color: rgba(255, 255, 255, 0.281);
}
.newBtn {
	border: 1px solid #FFCC24;
	padding: 3%;
}
.newBtn:hover {
	background-color: #FFCC24;
	color: #fff;
}

/*brand*/
.brandTitleBox>.title {
	/* font-family: 'Noto Serif TC', serif, Helvetica, Arial; */
	font-size: 60px;
	font-weight: 600;
	line-height: 1.2em;
	letter-spacing: 1px;
	color: #fb4273;
	font-style: italic;
}
.brandArea {
	width: 100%;
	margin: 0% auto;
	text-align: center;
    background: linear-gradient(to bottom, #a673cb 0%, #f0c3ff 100%);
}
.brandTitleBox {
	padding-top: 2%;
	margin-bottom: 1.5%;
}

.brandBox_makeup {
	width: 100%;
	margin: 0%;
	padding: 0%;
}
.GiftArea {
	position: relative;
	width: 100%;
	margin: 0% auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0%;  /*-25% */
	padding-bottom: 3%;
}

.brandBox {
	width: 86%;
    margin: 1% auto 0%;
	padding-bottom: 2%;
}

.makeupBox {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 2%;	
}
.makeupBox2 {
	position: relative;
	width: 80%;
	display: flex;
	flex-wrap: nowrap;
	text-align: center;
	justify-content: space-around;
	box-sizing: border-box;
	padding-top: 0%;
	padding-bottom: 0%;
}

.makeupBox a:hover {
	transition: all .2s cubic-bezier(0, 0, 0.58, 0);
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
    /* -webkit-filter: drop-shadow(6px 6px 0px #760007); */
    /* Safari */
	/* filter: drop-shadow(6px 6px 0px #760007); */
}

.makeupBox2 a:hover {
	transition: all .2s cubic-bezier(0, 0, 0.58, 0);
	/* -webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2)); */
}

.musthaveBox {
	width: 90%;
	margin: 0 auto;
	padding-bottom: 2%;	
}

.musthaveBox a:hover {
	transition: all .2s cubic-bezier(0, 0, 0.58, 0);
    -webkit-filter: drop-shadow(6px 6px 0px #8d5f20);
    /* Safari */
	filter: drop-shadow(6px 6px 0px #8d5f20);
}

.makeupBox img, .makeupBox2 img {
	transform: scale(1);
}

.makeupBox img:hover, .makeupBox2 img:hover {
	filter: saturate(1.2);
	/* transform: scale(1.05);
	overflow: hidden; */
}

.brandContentBox {
	width: 23%;
	background-color: #f6f6f6;
	padding: 1.5% 0 0;
	display: inline-table;
	margin: 0 0.5% 1.2%;
	position: relative;
    border: 0px transparent solid;
    -webkit-filter: drop-shadow(3px 4px 4px rgba(106, 78, 84, 0.5));
    filter: drop-shadow(3px 4px 4px rgba(106, 78, 84, 0.5));
    border-radius: 8px;
}

.brandContentBox:hover {
	/* border: 1px #ff81c9 solid;
	filter: drop-shadow(3px 4px 3px #ff81c9); */
	transform: translateY(-5px);
	transition: all 0.2s;
    -webkit-filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.3));
	filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.3))
}
.brandTitleTag {
	/* font-family: 'Noto Serif TC', Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei"; */
	color: #b13135;
	border: 1px solid #b13135;
	display: inline-block;
	padding: 1% 4%;
	font-size: 0.75vw;
	line-height: 1.2em;
}
.brandTitleTag_H {
	border: 1px solid #b13135;
	display: inline-block;
	padding: 1% 4%;
	font-size: 0.75vw;
	line-height: 1.2em;
	visibility: hidden;
}
.brandTitle {
	/* font-family: 'Noto Serif TC',"微軟正黑體", "Microsoft JhengHei", Helvetica, Arial, sans-serif; */
    font-family: "Libre Baskerville","Noto Serif TC", serif;
	font-weight: 700;
	font-style: normal;
	text-transform: uppercase;
	font-size: 1.4vw;
	color: #333;
	margin: 2.5% 0;
}
.brandTitle02 {
	font-family: Helvetica, Arial, sans-serif, "微軟正黑體", "Microsoft JhengHei";
	font-size: 1vw;
	line-height: 1.2em;
}
.brandPic {
	margin-top: 2%;
	bottom: -3px;
	position: relative;
}


.btn-50off {
    padding: 2% 3%;
    text-align: center;
    font-size: medium;
    font-weight: 600;
	position: absolute;
	right: 22px;
	bottom: 22px;
}
.btn {
	/* line-height: 40px; */
	padding: 3%;
	text-align: center;
}

.btn_brand {
    font-family: "Noto Serif TC", serif;
    font-weight: 600 !important;
	font-style: italic;
	font-size: larger;
	position: absolute;
	bottom: 8%;
	width: 50%;
	left: 25%;
	color: var(--white);
	background-color: rgba(0, 0, 0, .60);
	border-radius: 4px;
}
.btn_brand:hover {
    font-style: normal;
	background-color: rgba(0, 0, 0, .85);
	/* background-color: #fe3c93; */
}

.btn__seemore {
	position: relative;
	width: 22%;
	height: 100%;
	/* margin: auto; */
	margin: 2% 0 0 0;
	display: inline-block;
	/* display: inline-table; */
	text-align: center;
	color: black;
}
/*******************
event wrap
*******************/

.wrapper {
	padding: 0% 0% 3%;
}

.wrapper-title-wrap {
	margin-bottom: 15px;
	text-align: center;
}
.sec-title {
	/* font-family: 'Noto Serif TC', serif, Helvetica, Arial; */
	font-size: 65px;
	font-weight: 600;
	font-style: italic;
	line-height: 80px;
}

.title-pd{
	padding: 0% 0% 1%;
	text-align: center;
}

.title-area, .title-area2, .title-area3 {
	padding-top: 3.3%;
	padding-bottom: 0.5%;
	text-align: center;
}
.title-area img, .title-area2 img, .title-area3 img {
	/* max-width: 33%; */
	margin: 0%; /* 2% 0 1% 0;*/
	max-height: 100%;
	width: auto;
    height: auto;
    -webkit-filter: drop-shadow(6px 6px 4px rgba(106, 78, 84, 0.4));
    filter: drop-shadow(6px 6px 4px rgba(106, 78, 84, 0.4));
}

.icon__discount{
	position: absolute;
	left: 0%;
	top: 0%;
	z-index: 3;
}

.icon__discount__text{
	position: absolute;
	color: white;
	left: 25%;
	top: 30%;
	transform: rotate(-10deg);
	z-index: 5;
}

.event-box-title{
	text-transform: uppercase;
}
.event-box-wrap {
	position: relative;
	text-align: center;
	/* padding-top: 2.5%; */
	padding-bottom: 0%;
}
.event-box-wrap ul {
	width: 55%;
	margin: 0 auto;
}

.brandBox_per_noBG {
	position: relative;
    width: 100%;
    margin: 1% 0% 1.3%;
    font-weight: 600;
	padding: 0%;
	/* display: inline-table; 
	filter: drop-shadow(3px 4px 3px #666);
	-webkit-filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.4));
	filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.4));*/

}
.gift-box-wrap {
	position: relative;
	text-align: center;
	padding-top: 2.5%;
}
.bk-event {
	background-color: #ffd7d8;
	/* background: linear-gradient(to bottom, #564ff5 0%, #9990f9 58%, #bbaeff 100%); */
}
.brandBox_per_noBG:hover {
	transform: scale(0.98);
}

.img-a{
	padding-top: 5%;
}
.img-b{
	padding-top: 0%;
}

.Box_even {
	margin-top: 10%;
}

.brandBox_per_food {
	position: relative;
    width: 41.2%;
    height: 100%;
    margin: 1% 1% 1.3%;
    display: inline-table;
    font-weight: 600;
    padding-bottom: 0%;
	/* border-bottom: #f6a024 0px solid;
	border-radius: 20px; */
}
.brandBox_per_food:hover {
	transform: scale(0.98);
}

.eventbox__content{
	display: flex;
	justify-content: space-between;
}

.event-box-wrap-snack {
	position: relative;
	text-align: center;
	padding-top: 3%;
	padding-bottom: 3%;
}

.btn-wrapper-goEverrich {
    width: 50%;
	margin: 0.5% auto 2%;
	display: inline-block;
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
}

.btn-wrapper-more2 {
    width: 18.2%;
	margin: 0.5% auto 2%;
	display: inline-block;
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
}
.btn4 {
    padding: 0 7%;
    text-align: center;
}
.moreBtn1 {
    width: 18%;
    font-size: large;
    font-weight: bold;
    background-color: #da4733 !important;
    color: #ffffff !important;
    border: 3px #ffffff solid;
    border-radius: 20px;
    padding: 8px 4px;
    margin: 0% 41% 1%;
}
.moreBtn1:hover {
    background-color: #ffffff !important;
    color: #da4733 !important;
    border: 3px #da4733 solid;
}


/* Summer SALE */
.event-box-wrap-V {
	position: relative;
	text-align: center;
	padding-top: 3%;
	padding-bottom: 0%;
}

.brandBox_bestChoice {
	width: 100%;
	margin: 0%;
	padding: 0%;
}

.bk-Valentinesday-img2 {
	background-image: url(../images/bk-LeftBottom.png), url(../images/bk-RightBottom.png);
	background-repeat: no-repeat, no-repeat;
	background-position: 5% 100%, 102% 114%;
}

/***********************************
New In  (精品5折起)
******************************/
.newin__area{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
	margin: auto;
	padding-bottom: 0%;
}
.newin__area2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 90%;
	margin: auto;
	padding-bottom: 2.5%;
}

.newin_row1{
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.newin__row{
    display: flex;
    flex-wrap: wrap;
}
.mainBox-bg {
    filter: saturate(1.0);
}

.newin_box {
    position: relative;
    width: 23%;
    margin: 0.6% 0.8%;
}

.newin_box2 {
    position: relative;
    width: 25.6%;
    margin: 0.6% 0.8%;
}

.btn-newin {
    position: absolute;
	z-index: 3;
	top: 245px;
    right: 35px;
}
.btn-newin1 {
    position: absolute;
	z-index: 3;
	top: 405px;
    right: 35px;
}
.btn-newin2 {
    position: absolute;
	z-index: 3;
	top: 210px;
    right: 105px;
}
.btn-newin3 {
    position: absolute;
	z-index: 3;
	top: 200px;
    right: -105px;
}
.btn-pinknew {
    background-color: #f148a9 !important;
    color: white !important;
	border: 2px #f148a9 solid;
	width: 90%;
	font-weight: bold;
	padding: 4% 4%;
}

.btn-pinknew:hover {
    background-color: rgba(255, 255, 255, .85)!important;
    color:  #f148a9 !important;
    border: 2px #f148a9 solid;
}

.btn-pinkrow2 {
    background-color: transparent !important;
    color: #f148a9 !important;
	border: 2px #f148a9 solid;
	width: 90%;
	font-weight: bold;
	padding: 4% 4%;
}

.btn-pinkrow2:hover {
    background-color: #f148a9 !important;
    color:  #ffffff !important;
    border: 2px #f148a9 solid;
}


.lnewIn-bg {
    filter: saturate(1.1);
}
.lnewIn-bg:hover {
	/* filter: saturate(1.8); */
	filter: contrast(125%);
    transform: scale(1.01);
    transition: all 0.2s;
}
.lnewIn-bg img{
	border-radius: 24px;
	border: 1px var(--pink) solid;
    -webkit-filter: drop-shadow(6px 6px 4px rgba(106, 78, 84, 0.5));
    filter: drop-shadow(6px 6px 4px rgba(106, 78, 84, 0.5));
}

.mtopL{
	margin-top: -18%;
}

#mtopR, .mtopR{
	margin-top: 18% !important;
}


/* brandBox_per */
/* event-box-wrap ul li */

.brandBox_per {
	position: relative;
	width: 22%;
	height: 100%;
	margin: 3% 1%;
	display: inline-table;
	/* text-align: center; */
	color: black;
	background-color: #FFDDD4;
	/* border-radius: 20px; */
}
.bg-beauty-info-box:hover{
	/* transform: scale(1.02); */
	/* transform: rotate(3deg); */
	transform: scale(0.97);
	transition: all 0.2s;
	filter: drop-shadow(3px 4px 3px #333333);
}
.brandBox_per__border{
	border: 0.4rem solid #FFEF07;
}
.bg-no-color{
	background-color:transparent !important;
}
ul.event-box-wrapper:nth-child(3) li{
	width: 31%;
}
#limitBeauty .bg-beauty-info-box{
	background-color: #ffffff;
}
#limitBeauty .bg-beauty-info-box-x{
	background-color: #787878;
}

#mustBuy .bg-beauty-info-box{
	background-color: #FFDDD4;
}

.border-fuchsia {
	border: 2.5px solid #EB3E80;
}

.event-box-date img {
	max-width: 45%;
	position: absolute;
	top: -10%;
	left: 25%;
}

.event-box-img-wrap .aaa {
	width: 100%;
	transform: scale(1);
	/* opacity: .9; */
}
.event-box-img-wrap .aaa:hover {
	width: 100%;
	filter: saturate(1.1);
	/* opacity: .9; */
}

.makeup-box-text-wrap h4 {
	/* font-family: 'Noto Serif TC'; */
	font-size: 1.4vw;
    line-height: normal;
    font-weight: 600;
}

.makeup-box-text-wrap h5 {
	font-size: 1.3vw;
    line-height: normal;
    font-weight: 600;
}

.makeup-box-text-wrap p {
	font-size: 1.1vw;
    line-height: normal;
    font-weight: 600;
}
.event-box-img-wrap  img {
	width: 100%;
	transform: scale(1);
	/* opacity: .9; */
}
.makeup-box-img-wrap img:hover {
	width: 100%;
	transform: scale(1.1);
	/* opacity: .9; */
}



.event-box-text-wrap h4 {
	font-size: 1.4vw;
    line-height: normal;
    font-weight: 600;
}
.event-box-text-wrap h5 {   /* 單使用於Godiva*/
	font-size: 1.2vw;
    line-height: normal;
    font-weight: 600;
}

.event-box-text-wrap p {
	font-size: 1.2vw;
	line-height: normal;
    font-weight: 600;
}

.event-box-text-wrap-2 h4 {
	font-size: 1.4vw;
    line-height: normal;
    font-weight: 600;
}

.event-box-text-wrap-2 p {
	font-size: 1.2vw;
	line-height: normal;
    font-weight: 600;
}

.event-box-content {
	line-height: 1.3em;
}

.event__box__img__wrap__btn{
	position: absolute;
	width: 65%;
	/* max-width: 75%; */
	bottom: 10%;
	left: 18%;
}

/*
.btn-wrapper>.btn {
	padding: 0.5% 3%;
	display: inline-block;
}
*/

.event-box-wrap ul a:hover .event-box-img-wrap img {
	opacity: 0.9;
	transition: all .2s linear;
}
.event-box-wrap ul a:hover .btn {
	background: #e5e646;
	color:black;
	transition: all .2s linear;
}

/********************
02 flash 品牌特價週
********************/
.flash-box-wrap {
	text-align: center;
	width: 100%;
}
.flash-text-note {
	font-family: "Noto Serif TC", serif;
    padding: 1%;
    line-height: 1.8vw;
    letter-spacing: 2px;
    font-weight: bold;
}
.flash-text-note .title-purple {
	color: var(--purple);
}
.flash-text-note .title-peach {
	color: var(--peach);
}
.flash-text-note .title-lightpurple {
	color: var(--light-purple);
}
.flash-text-note .title-lightpeach {
	color: var(--light-pink);
}
.flash-bg{
	width: 100%;
	padding: 2% 0% 2%;
	background: url(../images/mom-bk.jpg) left bottom no-repeat;
    background-size: 100%;
    background-color: var(--light-pink);
	/* background-size: cover; */
}
.flash-box-wrap ul {
	width: 65%;
	margin: 0 auto;
}
.flash-box-wrap ul li {
	/* width: 22%; */
	margin: 0.5% 1% 1%;
	display: inline-table;
	text-align: center;
	color: black;
	padding: 0% 0% 0% 0%;

}
.wth_22 {
	width: 22%;
}
.wth_46 {
	width: 46%;
}

.flash-box-img-wrap img {
	width: 100%;
	position: relative;
	z-index: 1;
	padding-bottom: 0%;
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.15));
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.15));
	/* opacity: .9; */
}
.flash-box-img-wrap img:hover {
    transform: scale(0.97);
    transition: all .2s linear;
}
div.rotate6, div.rotate6r, div.rotate4, div.rotate4r {
	transform: rotate(0deg);
}

div.rotate6:hover {
	transform: rotate(6deg);
	filter: saturate(1.8);
}
div.rotate6r:hover {
	transform: rotate(-6deg);
	filter: saturate(1.8);
}
div.rotate4:hover {
	transform: rotate(3deg);
	filter: saturate(1.4);
}
div.rotate4r:hover {
	transform: rotate(-3deg);
	filter: saturate(1.8);
}

.btn_flash {
	width: 100%;
    color: #fff;
    background: linear-gradient(to right, #e65282 0%, #e65282 45%, #e65282 100%) !important;
    /* border: 2px #fff solid; */
    margin: 0%;
    font-weight: 600;
	font-size: 1.2vw;
    padding: 3%;
}

.btn_flash:hover {
    background: linear-gradient(to left, #349cd7 0%,#976afd 40%,#ec5484 100%) !important;
	/* box-shadow: transparent 3px 3px 0px; */
}

/********************
03 skincare
********************/

.skincare-text-note {
	color: var(--primary-gray);
    font-size: 0.95vw;
    padding: 0.8% 1% 4%;
	font-weight: bold;
	text-align: center;
}
.skincare-box-wrap {
	/* text-align: center; */
	width: 100%;
}
.skincare-bg{
	width: 100%;
	padding: 0% 0% 0%;
	background: url(../images/skincare-bk.jpg) left bottom no-repeat;
	background-color: var(--light-purple);
	background-size: cover;
}
.skincare-box-wrap ul {
	width: 65%;
	margin: 0 auto;
}
.skincare-box-wrap ul li {
	width: 30%;
	margin: 1% 1.5% 0%;
	display: inline-table;
	color: black;
	padding: 0% 0% 0.5% 0%;
	transform: rotate(0deg);
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
}
.skincare-box-wrap ul li:hover {
	transform: rotate(2deg);
}
.skincare-box-img-wrap img {
	border: 1px #df3170 solid;
	border-radius: 26px;
	width: 100%;
	position: relative;
	z-index: 1;
	/* opacity: .9; */
}
.skincare-box-img-wrap img:hover{
	filter: contrast(110%);
}

.skincare-box-icon img {
	width:20%;
	position: absolute;
	z-index: 2;
	top: 18%;
	right: 4%;
	-webkit-filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.4));
}
.skincare-box-title-wrap {
	text-align: center;
	width: 100%;
	position: absolute;
	z-index: 2;
	top: 4%;
}
.skincare-box-text-wrap {
	width: 95%;
    position: absolute;
    z-index: 2;
    bottom: 16%;
	text-align: center;
	/*
	width: 44%;
	position: absolute;
	z-index: 2;
	bottom: 15%;
	text-align: right;  */
}

.skincare-box-wrap .btn-wrapper {
	margin: 10px auto;
}
.skincare-box-wrap ul a:hover .skincare-img-wrap img {
	opacity: 1;
	transition: all .2s linear;
}
.skincare-box-wrap ul a:hover .btn {
	background: #66b7d3; /* #c70000 */
	color: var(--white);
	transition: all .2s linear;
}

.skincare-box-title-wrap h4 {
	font-size: 1.3vw;
	font-weight: bold;
	color: var(--white);
	padding: 1% 0%;
}

.skincare-box-text-wrap p {
	color: var(--primary-gray);
	font-size: 1.1vw;
	line-height: normal;
	font-family: "Libre Baskerville", serif;
	padding: 1% 0% 0% 4%;
}

.price_small {
	color: var(--gray);
	/* font-size: 1.2vw; */
	text-decoration: line-through;
}

.price_medium {
	color: var(--red);
	font-size: 1.1vw;
}

.price_large {
	color: var(--red);
	font-size: 1.3vw;
}

.btn_skin {
	width: 90%;
	font-family: "Noto Serif TC", serif;
	font-weight: 600 !important;
	font-style: italic;
	font-size: larger;
	color: var(--white);
	text-align: center;
    margin: 0% 5%;
    padding: 3%;
    position: absolute;
    bottom: 3%;
    z-index: 2;
}

.btn_skin:hover {
	font-style: normal;
}

/*
.btn_skin {
    width: 90%;
    color: #fff;
    background: linear-gradient(to right, #349cd7 0%,#976afd 45%,#ec5484 100%) !important;
    border: 2px #fff solid;
    margin: 0% 5%;
    font-weight: 600;
	font-size: large;
    padding: 3%;
}
*/
/* Big Sale */
.BigSale__area{
	width: 100%;
	padding: 2% 0% 2%;
	background: url(../images/makeup-blue.jpg);
    background-size: cover;
}
.BigSale-box-wrap {
	text-align: center;
	width: 100%;
}

/* 
.bk-BigSale-img {
	background-image: url(../images/monster-1_.png),url(../images/monster-2_.png) ;
	background-repeat: no-repeat, no-repeat;
	background-position: -6% 10%, 98% 0%;
}
*/
.saleArea {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* background: linear-gradient(to top, #16203b 0%, #16203bc7 40%, #16203b00 100%); */
	margin-top: 1%;  /*-25% */
	padding-bottom: 1%;
}
.saleBox {
	position: relative;
	width: 78.5%;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	box-sizing: border-box;
	padding-top: 0%;
}
.saleBox_row2 {
	width: 22.35%;
    margin: 0% 1% 0% 0%;
    padding: 0%;
	display: inline-block;
	/* 
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
	box-shadow: #f4de34 26px 27px 0px; */
}
.saleBox_row1 {
	width: 22.35%;
    margin: 0% 1% 0% 0%;
    padding: 0%;
	display: inline-block;
}
.saleBox_row3 {
	width: 22.35%;
    margin: 0% 1% 0% 0%;
    padding: 0%;
	display: inline-block;
}
.saleBox_product {
	position: relative;
	width: 46.5%;
    margin: 0% 1%;
	padding: 0%;
	display: inline-block;
}

.saleBox_product1 {
	position: relative;
	width: 100%;
    margin: 0%;
	padding: 0%;
	-webkit-filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(6px 6px 0px rgba(0, 0, 0, 0.2));
}

.out_radius1 img {
	border-radius: 24px 0px 0px 0px;
	border: 1px #666666 solid;
}
.out_radius2 img {
	border-radius: 0px 0px 0px 0px;
	border: 1px #666666 solid;
}
.out_radius3 img {
	border-radius: 0px 0px 24px 0px;
	border: 1px #666666 solid;
}

.saleBox_product img, .saleBox_product1 img {
	width: 100%;
}

.saleBox_product img:hover, .saleBox_product1 img:hover {
	transform: scale(0.98);
	transition: all .2s linear;
}

.m_bottom{
	margin-bottom: 3%;
}
.m_bottom_2{
	margin-bottom: 6%;
}
.m_bottom_6{
	margin-bottom: 4.5%;
}
.m_bottom_7{
	margin-bottom: 7%;
}


/*******************
event-hightlight wrap
*******************/

.highlight-event-box-wrap {
	text-align: center;
}
.highlight-event-box-wrap ul {
	width: 80%;
	margin: 0 auto;
}
.highlight-event-box-wrap ul li {
    width: 22%;
    margin: 1% 0.5%;
    display: inline-table;
    text-align: center;
    color: #222222;
    background-color: #ffffff;
    padding: 0.5%;
	border-radius: 8px;
	-webkit-filter: drop-shadow(3px 4px 4px rgba(106, 78, 84, 0.5));
    filter: drop-shadow(3px 4px 4px rgba(106, 78, 84, 0.5));
}
.highlight-event-box-wrap ul li:hover {
	transform: scale(0.98);
	transition: all .2s linear;
}
.highlight-event-box-img-wrap img {
	width: 100%;
	/* opacity: .9; */
}
.highlight-event-box-text-wrap h4 {
    padding-top: 1%;
    font-size: 1.2vw;
    line-height: normal;
    font-weight: 800;
    letter-spacing: 1px;
}

.highlight-event-box-text-wrap p {
	font-size: 1vw;
	line-height: normal;
}
.highlight-event-box-content {
	line-height: normal;
}

.highlight-event-box-wrap .btn-wrapper {
	margin: 10px auto;
}
.highlight-event-box-wrap ul a:hover .event-box-img-wrap img {
	opacity: 1;
	transition: all .2s linear;
}
.highlight-event-box-wrap ul a:hover .btn {
	background: #66b7d3; /* #c70000 */
	color: white;
	transition: all .2s linear;
}


/*******************
pop-up
*******************/

/***** popup's controler *****/

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: opacity 200ms;
	visibility: hidden;
	opacity: 0;
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}
/***** popup's appearance *****/

/* Modal */

.pop-modal {
	background-color: rgba(0, 0, 0, .65);
	display: none;
	overflow: auto;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding-top: 10%;
}
/* Modal Content */

.modal-content {
	position: relative;
    top: 0px;
    width: 600px;
    margin: 0 auto;
    background-color: #434343;
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border: 2px solid #fff;
    border-radius: 16px;
}
.modal-animated-in {
	animation: totop-in .3s ease;
}
.modal-animated-out {
	animation: totop-out .3s ease forwards;
}
.modal-header {
	background-color: var(--purple);  /*  #ffe33a  */
    width: 100%;
    height: 60px;
    line-height: 60px;
	padding-left: 20px;
	border-radius: 16px 16px 0px 0px;
}
.modal-content .close {
	position: absolute;
	right: 0;
	top: 0;
	/*  background-color: #111111; */
	color: #ffffff;
	width: 60px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
	border-radius: 0px 16px 0px 0px;
}
.modal-content .close:hover {
	background-color:#9e50b8;
	/* color: #ffffff; */
	border-radius: 0px 16px 0px 0px;
}
.modal-header h3 {
	color:#ffffff; /* #147e31;*/
	/* text-shadow: 1px 0px rgba(255, 255, 255, 1); */
	font-weight: bolder;
	font-size: 24px;
	text-align: left;
}
/* Modal Body */

.modal-body {
	padding: 20px 27px 20px 20px;
	line-height: 30px;
	font-size: 15px;
	color: #222222;
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 100%);
	border-radius: 0px 0px 12px 12px;
}
.modal-body h3 {
	font-size: 18px;
}
.modal-body-inner {
	overflow-y: auto;
	height: 350px;
	padding: 0 30px 0 10px;
}
.modal-body-inner hr {
	width: 97%;
}
.modal-body-inner h3 {
	margin-bottom: 5px;
	text-align: center;
	/* color: #edff00; */
}
.modal-body-inner h4 {
    margin-bottom: 5px;
    text-align: center;
    /* color: #edff00; */
}

.modal-body-inner::-webkit-scrollbar-track {
	background-color: #d9d5fe;
}
.modal-body-inner::-webkit-scrollbar {
	width: 5px;
	background-color:white;
}
.modal-body-inner::-webkit-scrollbar-thumb {
	background-color: #ea5180;
}
.modal-body ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.modal-body ul li {
	position: relative;
	margin-left: 30px;
	list-style-type: decimal-leading-zero;
	text-align: left;
}
.modal-body ul li::before {
	position: absolute;
	color: #5cc560;
	left: -20px;
	top: 10px;
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

/*
.modal-body a {
	color: #000000;
    text-decoration: underline;
    font-weight: 600;
    background-color: #f1506a;
    padding: 0 4px;
}

.modal-body a:hover {
	color: #ffffff;
	transition: all .2s linear;
}
*/

.modal-body-text-wrap {
	margin-bottom: 20px;
}
.modal-body-text {
	font-size: 15px;
}
.modal-body-text-wrap h5 {
	color:#111111; /* #edf395; */
	font-size: 1vw; /* 15px; */
	font-weight: 600;
	text-align: left;
}
.modal-body-text-wrap h4 {
    color:#6317c1;
    font-size: 1vw;
    font-weight: 600;
    text-align: left;
}
.modal-body-text-wrap p.text_purple {
    color: #6317c1;
    border: 1px #6317c1 dashed;
    margin: 1% 0%;
    padding: 0.5% 1%;
    text-align: left;
}
.modal-body-text-special{
	color:#ffef9a;
}
.modal-body-text-wrap h6 {
	color: #999;
	font-size: 12px;
}


.modal-body h3 {
    font-size: 22px;
}
.modal-body h4 {
    font-size: 18px;
}

.modal-body p.LH {
	line-height: 130%;
	text-align: center;
	padding-top: 3%;
}

.btn2 {
    /* line-height: 40px; */
    padding: 1%;
    text-align: center;
}

.btn_popup {
    width: 32%;
    left: 18%;
    color: #fff;
    background: linear-gradient(to right, #4cafe7 0%,#ae8aff 40%,#ec5484 100%) !important;
    border: 2px #fff solid;
    margin: 5% 34%;
	/* 
	box-shadow: #000 3px 3px 3px;
	margin: auto 34%;  */
	font-weight: 600;
	font-size: large;
}

.btn_popup:hover {
    background: linear-gradient(to left, #4cafe7 0%,#ae8aff 40%,#ec5484 100%) !important;
	color: #fff !important;
	border: 2px #89fbfd solid;
	box-shadow: transparent 3px 3px 0px;
}

.f-h3-b {
    text-decoration: underline;
    color: #e14779;
    font-weight: bold;
    font-size: 1.2vw;
}

.btn_popup a{
    color: #fff;
    text-decoration: none;
}
/* 1-5 EBX Gift  */
.EBX_gifts_container {
	/* 
	width: 40%;
	max-width: 750px; 
	margin: 0% 30% 0%;
	*/
    transition: 0.2s;
    box-sizing: border-box;
    -webkit-filter: drop-shadow(4px 0px 6px rgba(205, 160, 125, 0.48));
    filter: drop-shadow(4px 0px 6px rgba(205, 160, 125, 0.48));
	padding-bottom: 2%;
	position: relative;
}
/*
.EBX_gifts_container:hover {
filter: contrast(130%);
    transform: scale(1.03);
    transition: all 0.2s;
}
*/

/* 07 */
.da_B3_container {
    width: 40%;
    /* max-width: 750px; */
    margin: 0% 30% 0%;
    transition: 0.2s;
    box-sizing: border-box;
    -webkit-filter: drop-shadow(4px 0px 6px rgba(205, 160, 125, 0.48));
    filter: drop-shadow(4px 0px 6px rgba(205, 160, 125, 0.48));
    padding-bottom: 2%;
}
.da_B3_container:hover {
filter: contrast(130%);
    transform: scale(1.03);
    transition: all 0.2s;
}
.da_B3_item {
    position: relative;
	margin: 0 auto;
	width: 95%;
}

.hoverScaleDown {
    transition: 0.2s;
}

.da_everrich {
    transition: 0.2s;
	box-sizing: border-box;
    /* -webkit-filter: drop-shadow(4px 0px 6px rgba(205, 160, 125, 0.48));
    filter: drop-shadow(4px 0px 6px rgba(205, 160, 125, 0.48)); */
}
.da_everrich:hover {
	filter: contrast(130%);
    transform: scale(0.99);
    transition: all 0.2s;
}

/* Modal Footer */

.modal-footer {
	background-color: #656464;
	width: 100%;
	height: 60px;
	line-height: 60px;
	padding-left: 20px;
}
/*sidenav*/

.menu {
	position: fixed;
	z-index: 29;
}
.menu_filter {
	-webkit-filter: drop-shadow(4px 2px 4px rgba(117, 86, 61, 0.6));
    filter: drop-shadow(4px 2px 4px rgba(117, 86, 61, 0.6));
}
.menu__style {
	background-color: #fffbf6;
    text-align: center;
	border: 2px #de4174 solid;
	-webkit-filter: drop-shadow(4px 2px 4px rgba(117, 86, 61, 0.6));
    filter: drop-shadow(4px 2px 4px rgba(117, 86, 61, 0.6));
	/*  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  */
}
.menu ul li {
	font-weight: bold;
    color: #733d99;
    display: inline-block;
    border-bottom: 1px solid #d9baff;
    line-height: 2.2em;
    width: 84%;
}

.menu ul li:hover {
	color: #de4174;
	/*#ffef07; */
}
/* hide sidenav 黏人精*/

#sidebar {
	transition: all 300ms linear;
}
#sidebar.active {
	right: -800px;
	/* -200px */
}
#sidebar .toggle-btn {
	position: fixed;
	/* position:absolute; */
	right: 0px;
	/* 220px */
	/* top:50px; */
	/* box-shadow: 2px 2px 2px 1px rgba(252, 93, 174, 0.3); */
	cursor: pointer;
	background-color: #de4174;
	/* border: 3px #000 solid; */
	z-index: 2;
}
#sidebar .toggle-btn:hover {
	background-color: #733d99;
}
/* 收合導覽黏人精*/

#sidebar .toggle-btn span {
	display: block;
	width: 30px;
	height: 90px;
	color: #fff;
    font-weight: 600;
	margin: 2px 0px;
	padding: 3px 0;
	text-align: center;
	cursor: pointer;
}
/*toTop*/

.toTop-arrow {
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 50%;
	opacity: 0.9;
	background: #733d99;
    color: #ffffff;
    cursor: pointer;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding-top: 5px;
    z-index: 999;
	border: 2px #ffffff solid;
	font-weight: bold;
}
.toTop-arrow::before, .toTop-arrow::after {
	width: 8px;
	height: 3px;
	border-radius: 5px;
	top: 10px;
	background: #ffffff;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 1.1rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 1.1rem;
}
.toTop-arrow:focus {
	outline: none;
}

/* scroll Menu */

#section-menu {
	position: fixed;
	top: 40%;
	right: 0;
	z-index: 3000;
	text-transform: uppercase;
	-webkit-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
#section-menu.freeze {
	right: -112px;
}
.touch #section-menu {
	display: none;
}
#section-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-menu a {
	float: right;
	clear: both;
	display: block;
	height: 2em;
    line-height: 2em;
    font-weight: 600;
	text-decoration: none;
	padding: 0 16px;
	background: #0101a1; /* #1212eed1; */
	color: #ffea06eb; /* #ffea06eb; */
	white-space: nowrap;
	-webkit-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
#section-menu.freeze a {
	float: none;
	width: 128px;
}
#section-menu a:hover{
    background: #04041fd7; /*  */
    color: #fff;
	font-size: 1.2em;
}
#section-menu a span {
	display: none;
	font-weight: 700;
	position: relative;
	width: 48px;
	left: -16px;
	text-align: center;
	background: rgba(0,0,0,0.1); /* #fafd4a*/
}
#section-menu a.active {
    background:#428152; /* #fff821; */
    font-size: 1.2em;
    font-weight: 700;
    color:#fff; /* #fff821; */
}
#section-menu.freeze a span {
	display: inline-block;
}
#section-menu a.active span {
	display: inline-block;
    background:#12772b; /* 040493 #000; */
    color:#fff821; /* #ffff0b; */
}
#section-menu a.active span:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	background: rgba(255,255,255,0.25);
}
#section-menu.freeze a.active span:before {
	display: none;
}