@charset "utf-8";
/* CSS Document */
body {background: #FFFFFF!important;}
.Area_top .momologo { left: 40px!important; }
.Area_top .momologo a:hover{ transform: scale(1)!important;}
.WRAPPER {background: #FFFFFF;}
.momostyle_bg {
background-image:url("EDM_BG.jpg?t=1751965184437"),url("EDM_BG_02.jpg?t=1751965184437");
background-position:center top;
background-repeat: no-repeat,repeat-y;
max-width: 2000px;
margin: auto;
overflow: hidden;
font-size: 0;
}
a img {
transform: translateY(0%);
transition: all .1s .1s;
}
.momostyle_edm_all ul li:hover{
transform: translateY(-2.5%);
transition: all .3s;
z-index: 2;
}
.momostyle_edm_kv { width: 1220px; height:760px; margin: auto; position: relative;}
.momostyle_edm_kv > img,
.momostyle_edm_kv > span { position: absolute; margin: auto; animation-delay: 0s;text-align: center;}
.momostyle_edm_kv > img:nth-child(1) { right: 0; top: 10%; bottom: auto; left: 0;}
.momostyle_edm_kv > span:nth-child(2) { right: 0; top: 5%; bottom: auto; left: 0; animation-delay: .0s; transform: translateY(23%);}
/*KV輪播*/
.KV_PD {transform: translate(0%,0%); width: 50.49%; position: absolute; left: auto; right: 0%; top: 0%; bottom: auto; margin: auto;z-index: 3;}
.KV_PD img {width: 100%!important;}
.KV_PD .slider .slick-dots { display: none!important; }
/*KV輪播*/
/*LIST輪播*/
.variable01 {
width: 100%!important;
margin: 0 auto 0 auto!important;
}
.variable01 img{
width: 100%;
}
.sale_list {
margin-top: 0%!important;}
ul.list_style {
width: 80%;
margin:21% auto 15% auto;
padding: 0;
font-size: 0;
}
ul.list_style li {
width: calc(100% / 3);
margin: 0;
padding: 0;
display: inline-block;
}
ul.list_style li:nth-child( -n + 2) {
width: calc(100% / 2);
}
.sale_list .slick-dots {
position: absolute;
bottom: auto;
top: 4.8%;
left: 0;
right: 0;
display: block;
width: calc(92% - 10px);
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center
}
.sale_list .slick-dots li {
position: relative;
display: inline-block;
width: calc(100% / 6);
height: auto;
margin: 0px;
padding: 0;
cursor: pointer
}
.sale_list .slick-dots li.slick-active button:before {
opacity: 1;
background-color: transparent!important;
}
.sale_list .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 100%;
height: 0;
padding-bottom: 54.19%!important;
padding: 0;
cursor: pointer;
color: transparent;
border: 0;
outline: 0;
background: 0 0;
transition: all .3s;
background-color: transparent!important;
filter: brightness(0.5);
}
.sale_list .slick-dots li.slick-active button{
filter: brightness(1);
transition: all .3s;
z-index: 2;
}
.sale_list .slick-dots li button:before {
line-height: 50px;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 0;
content: "";
text-align: center;
opacity: 1;
padding-bottom: 54.19%;
background-color: transparent!important;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.sale_list .slick-dots li:nth-child(1) button:before {
background-image: none;
right: 2%;
left: auto;
}
.sale_list .slick-dots li:nth-child(2) button:before {
background-image: none;
right: auto;
left: 2%;
}
.sale_list .slick-dots li:nth-child(3) button:before {
background-image: none;
right: auto;
left: 2%;
}
.sale_list .slick-dots li:nth-child(4) button:before {
background-image: none;
right: auto;
left: 2%;
}
.sale_list .slick-dots li:nth-child(5) button:before {
background-image: none;
right: auto;
left: 2%;
}
.sale_list .slick-dots li:nth-child(6) button:before {
background-image: none;
right: auto;
left: 2%;
}
/*輪播-end*/
.edm_dd_01 { animation-name:kv_dd_01; animation-iteration-count: infinite; }
@keyframes kv_dd_01 {
0% {
transform: translateY(0%); opacity: 0;
}
20% {
transform: translateY(-10%); opacity: 1;
}
70% {
opacity: .7;
}
100% {
transform: translateY(-50%); opacity: 0;
}
}
/**漂浮**/
.edm_kv_animation02 {
animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; transform: translateY(1%); animation-delay: 0s;
}
@keyframes floating {
0% {
transform: translateY(1%);
}
50% {
transform: translateY(-1%);
}
100% {
transform: translateY(1%);
}
}
/**位移**/
.PD_R {
animation:PDR 1.5s 1 ; animation-fill-mode:forwards; }
@keyframes PDR {
0% {
transform: translateY(10%);
}
100% {
transform: translateY(0%);
}
}
.PD_L {
animation:PDL 1.5s 1 ; animation-fill-mode:forwards;}
@keyframes PDL {
0% {
transform: translateY(-23%);
}
100% {
transform: translateY(0%);
}
}
/**淡入**/
.FADE_IN {
animation-name: FADE_IN; animation-duration: 3s; animation-fill-mode:forwards; opacity: 0; }
@keyframes FADE_IN {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/**彈出**/
.edm_kv_jump {
animation-name: jump;
animation-duration: 8s;
animation-timing-function: ease;
transform-origin: 50% 100%;
animation-delay: .9s;
animation-iteration-count:infinite;
transform: scaleY(0) scaleX(0);
animation-fill-mode:forwards;
}
@keyframes jump {
0% {
transform: translateY(0%) scaleY(0.6) scaleX(0.6);
}
6%{
transform: translateY(-80%) scaleY(1.1) scaleX(1.1);
}
8%{
transform: translateY(0%) scaleY(0.55) scaleX(1.05);
}
10%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
12%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
14%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1);
}
}
/*閃光*/
.brightness-play { -webkit-animation:brightness-play 3s infinite ;
animation:brightness-play 3s infinite ;}
@-webkit-keyframes brightness-play {
0% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
92% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
94% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(200%);
}
96% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
98% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(120%);
}
100% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
}
@keyframes brightness-play {
0% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
92% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
94% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(120%);
}
96% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
98% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(120%);
filter:brightness(120%);
}
100% {
filter:url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter:brightness(100%);
filter:brightness(100%);
}
}
.Area_danji { margin-bottom: 3%;}
.Area_danji .warningTxt h3 { color: #000!important; padding: 0rem 0 0!important;}
.Area_danji .danji_box ul li .content { display: none;}
.Area_danji .danji_box ul li .content p { background-color: #145aa4!important; color: #fff!important;}
.Area_4PDa .layuot_4PDa { padding-bottom: 0!important;}
.PD_layout ul {background:none;}
.PD_layout ul li { border:none;}
.Area_slide .PD_layout_pd li { border:none!important;}
.momostyle_edm_all { width: 1220px; margin:0% auto 6% auto; text-align: center; font-size: 0; position: relative;}
.momostyle_edm_all ul {
width: 100%; margin: 0; padding: 0; font-size: 0; background-position: top center;
background-size: cover; background-repeat: no-repeat; position: relative;}
.momostyle_edm_all ul li {padding: 0; margin: auto; display: inline-block; list-style: none;}
.momostyle_edm_all ul li img {max-width: 100%;}
.momostyle_edm_all h2 { margin: 5% auto 3% auto; padding: 0;}
.momostyle_edm_danji {width: 1220px; margin:0% auto 2% auto; text-align: center; font-size: 0; position: relative; background-position: center; background-repeat: no-repeat; background-size: contain; }
.momostyle_edm_danji .Area_danji {padding: 1% 0 1% 0; }
.momostyle_gift_bg { width: 1220px; margin:2% auto; padding: 3% 0 3% 0; background-position: center top; background-repeat: no-repeat; background-size: contain; background-image: url("GIFT_BG.png?t=1751965184437");}
.momostyle_gift_bg_B,
.momostyle_gift_bg_C,
.momostyle_gift_bg_D { width: 1220px; margin:2% auto; padding: 0 0 0.5% 0; background-position: center bottom; background-repeat: no-repeat; background-size: contain; background-image: url("GIFT_BG_A.png?t=1751965184437");}
.momostyle_list_bg { margin-top: 5%;}
.momostyle_list_bg .PD_layout {padding: 1% 0; background-position: center; width: 100%;}
.momostyle_list_bg .PD_layout ul { grid-gap:40px; }
.momostyle_list_bg .PD_layout img { max-width: 95%; width: auto;}
.momostyle_footer_bg {width: 100%; padding: 0% 0 1% 0; background-position: center; background-repeat: no-repeat; background-size: cover;}
.momostyle_list_bar { max-width: 1220px; margin:2% auto 2% auto; text-align: center;}
.main_bar {max-width: 1220px; margin:2% auto 0% auto; text-align: center;}
.gift_bar {max-width: 1220px; margin:2% auto 0% auto; text-align: center; transform: translateY(40%);}
/*ul.PD_wrapper { padding-left: 2%!important; padding-right: 2%!important; width: 96%!important; margin: 0 auto!important;}
ul.PD_wrapper li { padding-bottom: 10px;}
*/
/*改特標底色*/
.PD_layout[data-pd-h3="1"] .PD h3,
.PD_layout[data-pd-h3="2"] .PD h3,
.PD_layout[data-pd-h3="3"] .PD h3,
.PD_layout[data-pd-h3="4"] .PD h3,
.PD_layout[data-pd-h3="6"] .PD h3 {
margin-bottom: 0.5em;
padding: 0 1em;
color: #fff;
background-color: #000000;
border-radius:0!important;
}
/*PC背景*/
.bg_01 { z-index:-50; position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top; pointer-events:none;}
.bg_02 { z-index:-55; position:absolute;top:900px;width:100%;height:100%;background-repeat:no-repeat;background-position: center top; pointer-events:none;}
@media screen and (max-width:767px){
.momostyle_bg {
background-image:url("EDM_BG_M.jpg?t=1751965184437"),url("EDM_BG_M_02.jpg?t=1751965184437");
max-width: 100%;
overflow: hidden;
background-size: contain;
background-position:center 44px;
}
.momostyle_edm_kv { width: 100%; height:0px; padding-bottom: 80.17%; margin: 0 auto 0 auto;}
.momostyle_edm_kv > span:nth-child(1) { width: 50%;}
/*.momostyle_edm_list ul li { width: calc(100% / 2 - 1%); margin: 0.5%; }
.list_A ul li{ width: calc(100% / 1 - 1%);}
.list_B ul li:nth-child(-n+3) { width: calc(100% / 1 - 1%);}
.list_C ul li{ width: calc(100% / 3 - 1%);}
.list_D ul li{ width: calc(100% / 3 - 1%);}*/
.Area_danji {}
.momostyle_edm_all,.Area_4PDa,.momostyle_edm_main { width: 96%;}
.momostyle_edm_danji { width: 96%;}
.momostyle_list_bar { max-width: 80%; margin:5% auto 2% auto; text-align: center;}
.main_bar {width: 100%; margin:0% auto 2% auto;}
.momostyle_gift_bg { width: 100%; margin:2% auto; padding: 3% 0 3% 0; background-image: url("GIFT_BG.png?t=1751965184437");}
.momostyle_gift_bg_B,
.momostyle_gift_bg_C,
.momostyle_gift_bg_D { width: 100%; margin:2% auto; }
.momostyle_edm_danji .Area_danji {padding: 1% 0 1% 0; width: 75%; margin:0% auto }
.momostyle_danji_A .for_phone img,
.momostyle_danji_B .for_phone img { width: 90%;}
.momostyle_danji_A .for_phone .danji_box,
.momostyle_danji_B .for_phone .danji_box { margin-top: 7%;}
.momostyle_danji_A .for_phone .Area_danji,
.momostyle_danji_B .for_phone .Area_danji { font: 16px / 1 "Century Gothic", "微軟正黑體", sans-serif;}
.momostyle_danji_A .for_phone .box_2,
.momostyle_danji_B .for_phone .box_2 { margin-bottom: 0em;}
.momostyle_danji_A .warningTxt,
.momostyle_danji_B .warningTxt { font: 16px / 0.3 "Century Gothic", "微軟正黑體", sans-serif;}
.momostyle_list_bg { margin-top: 2.5%;}
.momostyle_list_bg .PD_layout {padding: 3% 0 3% 0; background-size: contain;}
.momostyle_list_bg .PD_layout ul { grid-gap:10px;}
.momostyle_list_bg .PD_layout img { max-width: 100%; width: auto;}
}