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

/*基本*/
body{ margin:0; padding:0; background-color: #f5f5f5;}


/*全BOX版面*/
.WRAPPER { z-index:0; position: relative; display:block; margin: 0 auto; padding:0; overflow: hidden; width:100%; min-width: 1220px; background-color: #080713; text-align:left; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none; -webkit-tap-highlight-color: transparent}
/*預設清單樣式*/
.Area .list_00 ul { display:inline-block; margin:0; padding:0;}
.Area .list_00 li { list-style:none; float:left; overflow: hidden;}
  @media screen and (min-width: 768px) {
		.WRAPPER { /*max-width: 2000px;*/}
	}
	@media screen and (max-width:767px){
		.WRAPPER {min-width: inherit;min-height:100vh;padding-bottom: 7vw;}
		.WRAPPER img {  width:100%;  height:auto;}
	}



/*fixed背景*/
.bg_00 { z-index:-2; position:absolute;top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}
.bg_01 { z-index:-48; position:fixed;top:0;left:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center top; pointer-events:none;}
.bg_top { z-index:2; position:fixed;top:0px;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position: center top; pointer-events:none;}
  @media screen and (max-width:767px){
 .m_bg { z-index: -60; position: fixed; bottom:0; left: 0; width: 100%; height:100%; background-position: center top; background-repeat: no-repeat; pointer-events: none; background-size: 100%;}	
}

/*PC背景*/
.Area_bgtop { z-index: 0; position: absolute; top: 0; left: 50%; width: 2000px; -webkit-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none;}
.Area_bgtop .bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 1000px;}
.Area_bgtop .bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; background-position: center top;}
  @media screen and (min-width: 768px) {
    .Area_bgtop span { background-repeat: no-repeat;}
    .Area_bgtop_fixed { position: fixed;}
  }

/*Phone背景*/
.m_Area_bgtop { z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.m_Area_bgtop .m_bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 0; padding-bottom: 100%;}
.m_Area_bgtop .m_bgtop_ span { position: absolute; display: block; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; background-position: center top; background-size: 100%;}
  @media screen and (max-width: 767px) {
    .m_Area_bgtop span { background-repeat: no-repeat;}
    .m_Area_bgtop_fixed { position: fixed; top: 32px;} /*搭配js-appBgFixed*/
    .m_Area_bgtop_1 .m_bgtop_1_1 span { z-index: -3; position: absolute; top: 10vw; left: 0; width: 100%; height:100%; background: url(m_bgtop_1_1.jpg?t=1733111026878)  center top no-repeat ; background-size: 100%;}
  }

/*螢火蟲*/
#glows { position: fixed; z-index: 0; width: 100%; top: 0; left: 0; pointer-events: none;}
@media screen and (max-width:767px){
  #glows { width: 100%; height: auto; z-index: 0;}
}


/*間距*/
@media screen and (min-width:768px){
.Area_bottom {margin-bottom: 60px!important;}
}
@media screen and (max-width: 767px){
.Area_bottom {margin-bottom: 5vw!important;}
}

/*編輯按鈕移動*/
#eWriterBtn_bt_B_000_v0-he1 { z-index: 99!important;margin-top: 70px!important; }


/*版頭區塊*/
@media screen and (min-width:768px){
	.Area_title {height: 1200px;}
}

@media screen and (max-width:767px){
	.Area_title {height: 137vw;z-index: 20;}	
}



/*主標+版頭品微調*/
.Area_title img{width: 100%;border-radius: 0!important;}
.Area_title .PD_layout .PD_slide {min-width:auto;}
.Area_title .PD_layout ul{ background-color: #0000;  }
.Area_title .PD_layout li { border:none; }

@media screen and (min-width:768px){
.title .title_box li:nth-of-type(1) {position: absolute;top: 29px;left: 77px;z-index: 10;width: 54%;}
.title .title_box li:nth-of-type(2) {position: absolute;top: 332px;left: 279px;z-index: 10;width: 23%;}
.title .title_box .PD img { width: 100%!important; }		
}
@media screen and (max-width: 767px) {
.title {position: relative;top: 1vw;}
.title .title_box li:nth-of-type(1) {position: absolute;top: -1vw;left: -3vw;z-index: 10;width: 68.8%;}
.title .title_box li:nth-of-type(2) {position: absolute;top: 31.3vw;left: 18.4vw;z-index: 30;width: 29%;}
.title .title_box .PD img { width: 100%!important; }
}

/*副標*/
.sub .PD_layout ul{display: flex;padding: 0;}
@media screen and (min-width: 768px){
.sub {position: absolute;top: 228px;left: 209px;width: 33%;height: 210px;z-index: 30;overflow: hidden;}	
.sub .PD_layout .PD img {width: 100%;}	
}
@media screen and (max-width:767px){
.sub {position: absolute;top: 20vw;left: 6vw;width: 54%;height: 20vw;z-index: 30;overflow: hidden;}
.sub .PD_layout .PD img {width: 86%;padding: 0;}
}

/*版頭品輪播*/
.pdbg_a .Area_swiper_box .PD_layout li,.pdbg_b .Area_swiper_box .PD_layout li { background-color: #0000; }
.pdbg_a {width: 33%;position: absolute;top: 71px;left: 870px;height: 520px;transform: translateX(-50%);z-index: 20;}
.pdbg_b {z-index: 50;position:absolute;top: 434px;left: 145px;width: 43%;height: 140px;}
.pdbg_b .PD_layout ul{grid-gap: 5px;}
.pdbg_b .PD_layout li {height: 65px;padding: 5% 5%;}
.pdbg_b .PD_layout ul li::after {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -1;background-color: #ff65b7;opacity: 0.2;border-radius: 0.3em;}
.pdbg_b .PD_layout .PD img { width: 100%!important; }
.pdbg_a .PD_layout ul{display: flex;padding: 0;grid-gap: 0;height: 508px;}
.pdbg_a .PD_layout .PD img {width: 100%;}

@media screen and (max-width:767px){
.pdbg_a {width: 42%;position: absolute;top: 5vw;left: 79vw;overflow: hidden;height: 60vw;z-index: 10;}
.pdbg_a .PD_layout ul{display: flex;padding: 0;grid-gap: 0;height: 56vw;}
.pdbg_b {width: 55%;position: absolute;top: 41vw;left: 4vw;z-index: 10;}
.pdbg_b .PD_layout li {height: 7vw;padding: 7% 4%;}
.pdbg_b .PD_layout ul li::after {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -1;background-color: #ff65b7;opacity: 0.2;border-radius: 0.2em;}
.Area_swiper_box .swiper-pagination { bottom: 5vw!important }	
}

/*輪播特效*/
@media screen and (min-width:768px){
.pdbg_b .PD_layout .PD img {width: auto;}
.Area_title .pdbg_a .Area_swiper .swiper-slide .PD_img { opacity: 0; transform: translate(0,-6%);}
.Area_title .pdbg_a .Area_swiper .swiper-slide-active .PD_img { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}	
}


/*版頭線上入搞品*/
.Area_title .box01 .PD_layout .PD_into { align-items: center;}
.Area_title .box01 .PD_layout .PD h3 { width: 100%; }
.Area_title .box01 .PD_layout[data-pd-h3="5"] .PD h3 span{ max-width: 100%!important; }
.Area_title .box01 .PD_layout .PD h3,.Area_title .box01 .PD_layout .PD h4 { margin-bottom: 0; }
.Area_title .box01 .PD_layout .PD_slide { background-color: #fff; border-radius: 0.5em; }
.Area_title .box01 .PD_layout .PD_slide:hover { box-shadow: none; }
.Area_title .box01 .PD_layout .PD p	{}
.Area_title .box01 .PD_layout .PD h3 span { background-color: #0000; }
.Area_title .box01 ul.PD_wrapper { position: relative; display: flex; flex-wrap: nowrap; margin: 0; width: 100%; box-sizing: content-box; background-color: rgba(0,0,0,0); }
.Area_title .box01 ul.PD_wrapper li{ flex-shrink: 0; margin: 0; padding: 0; min-width: auto; background-color: #fff; border-top: none; border-right:none; border-radius: 0.5em;}

@media screen and (min-width: 768px){
.Area_title .box01 {position: relative;top: 702px;left: 42px;z-index: 20;width: 1144px;border-radius: 1em;overflow: hidden;}
.PD_boxbg {position: absolute;top: 615px;left: 0;z-index: 10;}	
.Area_title .box01 ul{grid-gap: 0;padding: 10px 0 30px;}
}
@media screen and (max-width:767px){
.Area_title .box01 {position: relative;width: 91%;overflow: hidden;top: 68vw;right: -8.7vw;z-index: 20;}
.PD_boxbg {position: absolute;top: 60vw;left: 0;z-index: 10;height: 66vw;}	
.Area_title .box01 ul{grid-gap: 0;padding: 0 0 3vw;}
.Area_title .box01 .PD_layout .PD p del {font-size: 0.7em;}
.Area_title .box01 .PD_layout .PD p .Price{ font-size: 1.5em; }
}



/*區標(線上入稿)*/
@media screen and (min-width:768px){
.box_title {position: relative;width: 85%;margin: 0 auto;z-index: 2;}
.box_title .PD_layout .PD h3{position: relative;overflow: hidden;margin: 0.45em auto;height: 1.7em;font-size: 2.9em;color: #4a000e;font-family: Noto Sans CJK SC, "Microsoft JhengHei", Helvetica;font-weight: 600;box-sizing: border-box;}
.box_txtbg::before {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -10;background: url("box_title_bg.png?t=1733111026878") center top/100% no-repeat scroll;}	
.box_txtbg2::before {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -10;background: url("box_title_bg2.png?t=1733111026878") center top/100% no-repeat scroll;}	
}
@media screen and (max-width:767px){
.box_title {position: relative;width: 100%;margin: 0 auto;z-index: 2;}
.box_title .PD_layout .PD h3{position: relative;overflow: hidden;margin: 0.5vw auto;height: 1.6em;font-size: 1.3em;color: #4a000e;font-family: Noto Sans CJK SC, "Microsoft JhengHei", Helvetica;font-weight: 600;box-sizing: border-box;}
.box_txtbg::before {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -10;background: url("box_title_bg.png?t=1733111026878") center top/100% no-repeat scroll;}	
.box_txtbg2::before {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -10;background: url("box_title_bg2.png?t=1733111026878") center top/100% no-repeat scroll;}
}


/*區塊0*/
@media screen and (min-width: 768px){
.Area00 {margin-bottom: 90px!important;}
.Area00_bg {z-index: -10;position:absolute;top: 58px;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}	
.Area00 .box_all {padding: 0 13%;}
.Area00 img{ width: 100%; }	
}
@media screen and (max-width:767px){
.Area00 .box_all {position: relative;padding: 1% 5% 0;}
.m_Area00_top {z-index:-50;position:absolute;top: 5vw;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
.m_Area00_repeat {z-index:-50;position:absolute;top: 37vw;left:0;width:100%;height: 13%;background-repeat:repeat-y;background-position: center top;pointer-events:none;background-size: 100%;}
.m_Area00_end {z-index:-50;position:absolute;bottom: 0;left:0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center bottom;pointer-events:none;background-size: 100%;}
}


/*區塊1*/
@media screen and (min-width: 768px){
.Area01 {margin-bottom: 90px!important;}
}
@media screen and (max-width:767px){
.Area01 {margin-bottom: 10vw!important;}	
.Area01 .box_all {position: relative;padding: 1% 0 0;}
.Area01 .PD_layout .PD p del { display: none; }	
}




/*版頭線上入搞品*/
.Area02 .box01 .PD_layout .PD h3 { width: 100%; }
.Area02 .box01 .PD_layout[data-pd-h3="5"] .PD h3 span{ max-width: 100%!important; }
.Area02 .box01 .PD_layout .PD h3,.Area_title .box01 .PD_layout .PD h4 { margin-bottom: 0; }
.Area02 .box01 .PD_layout .PD_slide:hover { box-shadow: none; }
.Area02 .box01 .PD_layout .PD h3 span { background-color: #0000; }

@media screen and (min-width: 768px){
.Area02_bg {z-index: -10;position:absolute;top: 0;width:100%;height: 100%;background-repeat:no-repeat;background-position: center top;pointer-events:none;}	
.Area02 .box_all {position: relative;width: 1100px;margin: 0 auto;}
.Area02_vs {position: absolute;top: 606px;left: 514px;z-index: 30;pointer-events: none;}
.Area02 .box01 {position: relative;top: 0;left: 0;z-index: 20;height: 940px;overflow: hidden;}
.Area02 .box01 ul{grid-gap: 0!important;padding: 0;}
.Area02 .box01 ul.PD_wrapper {position: relative;display: flex;flex-wrap: nowrap;margin: 0;width: 100%;height: 900px;grid-gap: 0;}
.Area02 .box01 .PD_layout .PD_into {padding: 6% 0 0;align-items: center;}
}
@media screen and (max-width:767px){
.Area02 .box_all {position: relative;margin: 0 auto;}
.m_Area02_bg {z-index:-50;position:absolute;top: 0;left:0;width:100%;height: 110%;background-repeat:no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}
.Area02_vs {position: absolute;top: 52vw;left: 46vw;width: 11%;z-index: 30;pointer-events: none;}
.Area02 .box01 ul{grid-gap: 0;}
.Area02 .box01 .PD_layout .PD p del {font-size: 0.6em;}
.Area02 .box01 .PD_layout .PD p .Price{font-size: 1.4em;}
.Area02 .box01 ul.PD_wrapper {position: relative;display: flex;flex-wrap: nowrap;margin: 0;width: 100%;height: 80vw;grid-gap: 0;}
.Area02 .box01 .PD_layout .PD_into {padding: 12% 0 0;align-items: center;}	
}

/*作圖區調整*/
@media screen and (min-width: 768px){
.PD2_box li:nth-of-type(odd) .PD_into::before {content:"";position: absolute;display:block;top: 480px;left: 30px;width: 92%;height: 100%;pointer-events:none;z-index: -1;background: url("Area02_txtbg.png?t=1733111026878") center top/100% no-repeat scroll;}
.PD2_box li:nth-of-type(even) .PD_into::before {content:"";position: absolute;display:block;top: 480px;left: 40px;width: 92%;height: 100%;pointer-events:none;z-index: -1;background: url("Area02_txtbg2.png?t=1733111026878") center top/100% no-repeat scroll;}
.PD2_box .PD .PD_img { z-index: -1; }
.PD2_box .PD .PD_img::before {content:"";position: absolute;display:block;top: 9px;left: 9px;width: 527px;height: 527px;pointer-events:none;z-index: -1;border: #e7c4a9 1px solid;border-radius: 50em;}
.PD2_box .PD img { border-radius: 50em; }
.PD2_box .PD .PD_logo {position: relative;top: -17px;height: 5.4em!important;}
.PD2_box .PD h3,.PD2_box .PD h4 {font-size: 1.8em;width: 77%;color: #fff;}
.PD2_box .PD p .Price {font-size: 3.2em;line-height: 1.1em;}
.PD2_box .PD p b {font-size: 2em;background-color: #f13995;padding: 0.5% 1%;margin-left: 5px;margin-right: 8px;color: #fff;}
.PD2_box .PD p del {font-size: 1.5em;color: #989898;}
.PD2_box .PD p	{color: #f8e8c7;height: 130px;width: 100%;}
}
@media screen and (max-width:767px){
.PD2_box li:nth-of-type(odd) .PD_into::before {content:"";position: absolute;display:block;top: 39.4vw;left: 1vw;width: 101%;height: 100%;pointer-events:none;z-index: -1;background: url("Area02_txtbg.png?t=1733111026878") center top/100% no-repeat scroll;}
.PD2_box li:nth-of-type(even) .PD_into::before {content:"";position: absolute;display:block;top: 39.4vw;left: 1vw;width: 97%;height: 100%;pointer-events:none;z-index: -1;background: url("Area02_txtbg2.png?t=1733111026878") center top/100% no-repeat scroll;}
.PD2_box .PD .PD_img {z-index: -1;}
.PD2_box .PD .PD_img::before {content:"";position: absolute;display:block;top: 1vw;left: 1vw;width: 175px;height: 175px;pointer-events:none;z-index: -1;border: #e7c4a9 1px solid;border-radius: 50em;}
.PD2_box .PD img { border-radius: 50em; }
.PD2_box .PD .PD_logo {position: relative;top: -1vw;height: 2.2em!important;}
.PD2_box .PD h3,.PD2_box .PD h4 {font-size: 0.8em;width: 89%;color: #fff;margin: 0;line-height: 1.3em;}
.PD2_box .PD p .Price {font-size: 3.2em;line-height: 1.1em;}
.PD2_box .PD p b {font-size: 0.8em;background-color: #f13995;padding: 0.5% 1%;margin-left: 1px;margin-right: 3px;color: #fff;display: none;}
.PD2_box .PD p del {font-size: 1.5em;color: #989898;}
.PD2_box .PD p	{margin-top: -1vw;color: #f8e8c7;height: 9vw;width: 100%;}
}




/*精選單品 瘋狂搶購*/
.Area05 {}
.Area05 .box_all {background-color: #000;border-radius: 2em;padding: 20px 20px 30px;}
.Area05 .box_all02 {background-color: #000;border-radius: 2em;padding: 20px 20px 30px;}
.Area05 .Area05_bg {z-index: 1;position:relative;top: 0px;width:100%;height: 80px;background-repeat:no-repeat;background-position: center top;pointer-events:none;}
@media screen and (max-width:767px){
.Area05 {}
.Area05 .box_all {background-color: #000;width: 96%;padding: 0;padding-bottom: 5vw;margin: 0 auto 6vw;}
.Area05 .box_all02 {background-color: #000;width: 96%;padding: 0;padding-bottom: 5vw;margin: 0 auto;}
.Area05 .m_Area05_bg { z-index:0; position:relative; top:0; left:0; width:100%; height:6vw; background-repeat:no-repeat; background-size: 100%; background-position: center top; pointer-events:none;}
}

/*公版標題*/
.box_txt ul { padding: 0; }	
@media screen and (min-width: 768px){
.box_txt {position: relative;display: flex;margin: 0 auto;width: 100%;height: auto;justify-content: center;}
.box_txt img{width: 88%!important;padding: 0;}
.box_txt .PD_layout .PD h3 {color: #fff7ff;font-size: 3.2em;font-family: "Century Gothic";letter-spacing: -1px;}

}
@media screen and (max-width:767px){
.box_txt {position: relative;margin: 0 auto;width: 100%;height: auto;z-index: 30;}
.box_txt img{width: 100%;}
.box_txt .PD_layout .PD h3 {color: #fff;font-size: 1.5em;letter-spacing: -2px;line-height: 11vw;font-family: "Century Gothic","微軟正黑體";max-height: 9vw;font-weight: bold;}

}

/*區塊4*/
@media screen and (min-width: 768px){
.Area04 .box_all .PD_layout ul {padding: 1% 4%;grid-gap: 10px;}	
.Area04 .box_all .PD_layout ul li{padding: 8% 13%;}
.Area04 .box_all .PD_layout ul li::after {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -1;background: url("Area04_logobg.png?t=1733111026878") center top/100% no-repeat scroll;}
}
@media screen and (max-width:767px){
.Area04 .box_all .PD_layout ul {padding: 1% 4%;grid-gap: 0.2em;}
.Area04 .box_all .PD_layout ul li{padding: 8% 10%;}
.Area04 .box_all .PD_layout ul li::after {content:"";position: absolute;display:block;top: 0;left: 0;width: 100%;height: 100%;pointer-events:none;z-index: -1;background: url("Area04_logobg.png?t=1733111026878") center top/100% no-repeat scroll;}
}





/*區塊_all*/
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
.Area a { position:relative; display:block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
		  
		  
.WRAPPER .go_bt1 {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.WRAPPER .go_bt1:hover { 
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);}
		  
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		.Area .go_bt:hover {  
			-webkit-transform:none;
			-moz-transform:none;
			-ms-transform:none;
			-o-transform:none;
			transform:none;}
	}

/*公版間距微調*/
.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 { background-color: #50336a;}
	@media screen and (max-width:767px){
    .PD_layout ul { grid-gap: .25em;}
	}
	

/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}



/*LOGO*/
.Area_top {}

	@media screen and (max-width:767px){
		.Area_top { height: auto;}
		
    /*提醒我按鈕*/
    a.mo_remind_btn { z-index:10; position: absolute; right: 0; top: 90.5vw; width: 17%;} 	
	}



/*背景微亮*/		  
.minbright-play { -webkit-animation:minbright-play 1s linear infinite alternate; animation:minbright-play 1s linear infinite alternate ;}
	@-webkit-keyframes minbright-play {

						 0% { filter:brightness(85%);  }
						100% { filter:brightness(102%);  }
	}
	@keyframes minbright-play {
						 0% { filter:brightness(85%);  }
						100% { filter:brightness(102%);  }
	}

/*閃光*/				  
.brightness-play1 { -webkit-animation:brightness-play 4s infinite ;
				           animation:brightness-play 4s infinite ;}
	@-webkit-keyframes brightness-play {
	  0% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  92% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  94% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(120%); 
		        filter:brightness(200%);
	  }
	  96% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  98% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(120%); 
		        filter:brightness(120%);
	  }
	  100% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/1500/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	}
	@keyframes brightness-play {
	  0% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  92% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }

	  94% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(120%); 
		        filter:brightness(120%);
	  }
	  96% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
	  98% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 

		-webkit-filter:brightness(120%); 
		        filter:brightness(120%);
	  }
	  100% { 
		filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
		-webkit-filter:brightness(100%); 
		        filter:brightness(100%);
	  }
}


/*心跳A*/
.heartbeat-play {-webkit-animation-duration:1.2s;  animation-duration:1.2s;  -webkit-animation-name: heartbeat-play;  animation-name: heartbeat-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
	@-webkit-keyframes heartbeat-play {   
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		}
	@keyframes heartbeat-play { 
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(120%);} 
	}


/*流星動畫*/
.night {
  position: fixed;
  width: 100%;
  height: 800px;
  top: 30px;
  left: -30px;
  /*overflow:hidden;*/
  pointer-events: none;
  -webkit-transform: rotateZ(35deg);
          transform: rotateZ(35deg);

}


.shooting_star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #e4f0ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  -webkit-filter: drop-shadow(0 0 6px #e4f0ff);
          filter: drop-shadow(0 0 6px #e4f0ff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
          animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.shooting_star::before, .shooting_star::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #95dcfd, rgba(0, 0, 255, 0));
  -webkit-transform: translateX(50%) rotateZ(45deg);
          transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
          animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
  -webkit-transform: translateX(50%) rotateZ(-45deg);
          transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
  top: calc(50% + 403px);
  left: calc(50% - 800px);
  -webkit-animation-delay: 8057ms;
          animation-delay: 8057ms;
}
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after, .shooting_star:nth-child(1)::after {
  -webkit-animation-delay: 8057ms;
          animation-delay: 8057ms;
}
.shooting_star:nth-child(2) {
  top: calc(50% - -700px);
  left: calc(50% - 600px);
  -webkit-animation-delay: 1107ms;
          animation-delay: 1107ms;
}
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after, .shooting_star:nth-child(2)::after {
  -webkit-animation-delay: 1107ms;
          animation-delay: 1107ms;
}
.shooting_star:nth-child(3) {
  top: calc(50% - 60px);
  left: calc(50% + 720px);
  -webkit-animation-delay: 5571ms;
          animation-delay: 5571ms;
}
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after, .shooting_star:nth-child(3)::after {
  -webkit-animation-delay: 5571ms;
          animation-delay: 5571ms;
}
.shooting_star:nth-child(4) {
  top: calc(50% - 420px);
  left: calc(50% + 300px);
  -webkit-animation-delay: 5304ms;
          animation-delay: 5304ms;
}
.shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after, .shooting_star:nth-child(4)::after {
  -webkit-animation-delay: 5304ms;
          animation-delay: 5304ms;
}


@media screen and (max-width:736px){
  .night {
    position: absolute;
    width: 109%;
    height: 100vh;
    top: -25vw;
    left: -20vw;
    overflow:hidden;
  }

  .shooting_star:nth-child(1) {
    top: calc(50% - -250px);
    left: calc(50% - 210px);
  }
  .shooting_star:nth-child(2) {
    top: calc(50% - -99px);
    left: calc(50% - 271px);
  }
  .shooting_star:nth-child(3) {
    top: calc(50% - 195px);
    left: calc(50% - 131px);
  }
  .shooting_star:nth-child(4) {
    top: calc(50% - 420px);
    left: calc(50% + 100px);
  }
	
}


@-webkit-keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
	


@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}
@-webkit-keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@-webkit-keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);

  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}
@keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}