@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body,html{margin:0;height:100%}
body{height:100%;width:100%;margin:0;padding:0}
body{font-size:100%;line-height:1.5;font-family:'Noto Sans TC',"微軟正黑體",'Century Gothic';color:#333;position:relative;margin:auto;background:#2b2a34 url(../images/bg.png)no-repeat fixed;background-size:100%;}
a:focus{outline:0}
a{text-decoration:none;color:#000}
a:hover{text-decoration:none}
img{border:0 none;line-height:0;display:block}
form{margin:0;padding:0}
ul,ul li{margin:0;padding:0;list-style-type:none}
dd,dl,dt{margin:0;padding:0}
dl{height:1%}
button{border:0 none;cursor:pointer;padding:0;margin:0;background:0 0}
.clearfix:after,.clearfix:before{content:"";display:table;height:0;overflow:hidden}
.clearfix:after{clear:both}
.clearfix{zoom:1}
h1,h2,h3,h6,p{margin:0;padding:0}
.Btn{background-color:#2b2a34;font-size:2.5625rem;color:#fff;display:block;border-radius:100px;text-align:center;padding:1% 10%;font-weight:700}
.Header{position:relative;z-index:3}
.Wrapper{width:950px;margin:auto;position:relative}
.Container{margin:0 3% 3%}
#Activity{margin:3%}
#Activity h4{width:100%;color:#000;line-height:1.9;position: relative;}
#Activity h4 span{position: relative;z-index: 3;}
#Activity h4 span:after {content: "";height: 28px;background-color: #ff1be8;position: absolute;left: -20%;right: -20%;border-radius: 20px;bottom: 0;z-index: -1;}
.BtnBack{background:url(../images/BtnBack.png) no-repeat;text-indent:-9999px;margin:auto;position:absolute;z-index:1;background-size:100%;width:10%;height:21%;background-size:100%;right:0;top:20px;z-index:10;}
h1{background:url(../images/h1.png) no-repeat center;width:100%;height:0;text-indent:-9999px;margin:auto;position:relative;z-index:1;background-size:100%;max-width:1060px;animation-iteration-count:infinite;padding: 4% 0 46%;box-sizing: border-box;}
.ball1{background:url(../images/ball1.png) no-repeat;background-size: 100%;}
.ball2{background:url(../images/ball2.png) no-repeat;background-size: 100%}
.same{position:absolute;left: 0;right: 0; bottom: 0; top: 0;}
.GiftTitle{background:#22ac38;border-radius:55px;display:block;padding:5px;margin:2% auto;text-align:center;font-size:3rem;color:#fff}
.GiftTitle .Border{background:#feccc0;display:block;padding:1rem 2rem;border-radius:50px;font-size:3rem;color:#303e63}
.GiftTitle .Border .Date{font-size:2.5rem;color:#ff5c66;font-family:Century Gothic;font-weight:700}
.LinkDetail{display:inline-block;background-color:#303e63;padding:.2rem 1rem;color:#fff;font-size:20px;vertical-align:middle}
.Label{position:absolute;background:url(../images/label.png) no-repeat;width:257px;height:85px;background-size:100%;top:0;z-index:5;font-size:2.5rem;text-align:center;line-height:1.8;margin:auto;left:0;right:0;font-weight:700}
.Label span{font-size:3rem}
.GiftItem{margin-bottom:2em;position:relative}
.GiftItem .GiftBorder{display:flex;padding:3%;box-sizing:border-box;border-radius:30px;margin:auto;position:relative; border: 10px solid #902dbc; border-radius: 10px;}
.GiftImg{flex:1;position:relative;text-align:center}
.GiftImg img{margin:auto}
.LinkIntro{background-color:#303e63;color:#fff;position:absolute;bottom:0;left:0;right:0;font-size:40px;color:#fff;text-align:center;padding:.7% 0}
.LinkIntro a{color:#fff;display:block}
.LinkIntro span{color:#fff}
i.IconArrow{width:0;height:0;border-style:solid;border-width:19px 0 19px 22px;border-color:transparent transparent transparent #fff;display:inline-block;vertical-align:middle}
.LinkIntro i.IconArrow{border-width:15px 0 15px 20px}
.GiftName{flex:1;margin-left:3%;position:relative;align-self:center}
.GiftName h3{color:#000;font-size:2.4rem;font-weight:700;line-height:1.3;}
.GiftName h3 span{color:#e60012}
.GiftName .h3Title{color:#000;font-size:2rem;font-weight:700;line-height:1.2;margin-bottom:1%;}
.GiftName .SubTitle{font-size:1.5rem;color:#000;line-height:1.6;display:inline-block;margin-bottom: 2%;}
.GiftName .SubTitle2{background-color:#2b2a34;color: #fff;padding: 1% 3%;}
.GiftName .SubTitle1{font-size:1rem;}
.GiftItem:nth-child(4) .GiftName .SubTitle{margin-bottom:10px}
.GiftName .Discript{font-size:1.2rem;min-height:10vh}
.LinkGo{position:relative}
.LinkGo a{display:inline-block;width:70%;border-radius:55px;display:block;padding:7px;margin:4% auto;text-align:center;font-size:2.5rem;color:#fff;background-image:-moz-linear-gradient(120deg,#7d29a3 50%,#902dbc 50%);background-image:-webkit-linear-gradient(90deg,#ff02e4 0,#d900c2 100%);background-image:-ms-linear-gradient(90deg,#ff02e4 0,#902dbc 100%);box-shadow:0 4px 0 2px #d900c2}
.go_bt{-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease}
.go_bt:hover{-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);-ms-transform:translateY(-6px);-o-transform:translateY(-6px);transform:translateY(-6px);filter:brightness(105%)}
.ButtnBar{margin-bottom:3%}
.ButtnBar ul{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.ButtnBar ul li{width:44%;margin:0 2%}
.ButtnBar ul li a{-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;box-sizing:border-box}
.ButtnBar ul li a:hover{-webkit-transform:translateY(-6px);-ms-transform:translateY(-6px);transform:translateY(-6px)}
.ButtnBar ul li i{margin-left:5px;width:0;height:0;border-style:solid;border-width:10px 0 10px 18px;border-color:transparent transparent transparent #fff;display:inline-block;vertical-align:middle}
.Ps{font-size:24px;color:#333}
.LightboxOverlay{background:rgba(0,0,0,.8);position:fixed;left:0;right:0;top:0;bottom:0;z-index:100}
.LightboxWrap{position:fixed;left:50%;top:50%;width:900px;height:700px;margin:-330px 0 0 -450px;z-index:101;background-color:#fff;border-radius:20px}
.LightboxWrap .GiftBlock{overflow-y:scroll;height:580px;width:90%;margin:auto;padding:0 3%}
.LightboxWrap h4{text-align:center;margin-top:-5%}
.LightboxWrap h4 span{background-color:#ec5e6d;border:5px solid #fff;box-shadow:0 3px 7px 0 rgba(3,3,3,.35);border-radius:50px;font-size:66px;display:inline-block;color:#fff;width:90px;height:90px;line-height:90px;text-align:center;margin:0 1%}
.GiftIntroList>li{display:flex;padding-top:5%;margin-top:5%;border-top:1px dashed #9c414b}
.GiftIntroList>li:first-child{border:0 none;padding-top:0;margin-top:0}
.GiftIntroList>li .ImgBlock{flex:1}
.GiftIntroList>li .ImgBlock img{margin:auto}
.GiftIntroList>li .ImgName h3{font-size:42px;color:#9c414b;line-height:1.2;margin-bottom:5%}
.GiftIntroList>li .ImgName .Price{font-size:31px;color:#645b5c;font-weight:700;margin-bottom:4%}
.GiftIntroList>li .ImgName{align-self:center;margin-left:3%;flex:1}
.GiftIntroList>li .ImgName ol li{background-color:#f39ca5;width:100%;text-align:center;font-size:28px;margin-bottom:4%;color:#fff}
.GiftIntroList>li .ImgName ol li:nth-child(even){background-color:#d47c85}
.Gift02 .GiftIntroList{margin-top:-10%;position:relative;z-index:1;border:3px dotted #e02f42;padding:9% 4% 4%}
.Gift02 .List02 .GiftIntroList{border:3px dotted #f26836}
.Gift02 h5{width:50%;border:6px solid #ec5e6d;background:#e02f42;border-radius:55px;display:block;padding:7px;margin:4% auto;text-align:center;padding:.5% 2%;font-size:55px;color:#fff;position:relative;z-index:2}
.Gift02 .List02 h5{background-color:#f26836;border:6px solid #fa9c7a}
.Gift02 .GiftIntroList>li{border:0 none;margin:0 0 5%;padding:0}
.Lightbox .BtnClose a{background:url(../images/BtnClose.png) no-repeat;text-indent:-9999px;width:55px;height:55px;display:block;background-size:100%;position:absolute;right:0;top:-8%}
.Note{font-size:20px;color:#313131;text-align:center}
.ImpFont{font-size:30px;color:#e73f3f;margin:2% 0}
#Recordpage .Box{background-color:#fff;padding:3%}
#Recordpage .GiftTitle{margin-top:5%}
#Record{padding-bottom:5%}
.Lightbox{display:none}
h4{font-size:3rem;color:#c03;text-align:center;margin: 0 0 .5em}
h5{color:#f94d37;font-size:1.5rem;text-align:center;margin:0;padding:0}
.Box{background-color:#fff;padding:5% 5% 1%;border-radius:50px;margin-bottom:5%}
/* .IntorBlock{margin-bottom:5%;padding-bottom:5%;border-bottom:1px solid #999}
.IntorBlock+.IntorBlock+.IntorBlock{border-bottom:0 none} */
#Note{background-color:#373737;color:#fff;padding:4%;line-height:1.8}
#Note h4{text-align:center;font-size:2.5rem;background:0 none;border-radius:inherit;padding:0;margin:0;color:#ffee4d}
#Note .Box{background-color:inherit}
.ActivityRow{margin:8px 0;color:#fff;font-size:1.2rem;line-height:1.8;color:#333}
.ActivityRow a{color:#e91e63;text-decoration:underline}
.ActivityRow ol li{list-style-type:disc}
.Border{background-color:#fff5dd;border-radius:20px;padding:3%;margin-bottom:1%}
.Table{border-top:1px solid #fff;border-right:1px solid #fff;background-color:#fff}
.Table th{background-color:#f3eded;color:#f56a6a;text-align:center;padding:1% 0;border-bottom:1px solid #fff;border-left:1px solid #fff;}
.Table td{padding:1% .5%;border-bottom:1px solid #fff;border-left:1px solid #fff;text-align:left;}
.Table{width:100%;text-align:center;font-size:1rem}
.Table th{background:#666;color:#fff;padding:1%}
.Table td{padding:1%;background-color:#eee;color:#373737}
.PageBar{padding:20px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.PageBar a{margin:0 1px;text-decoration:none;border:1px solid #666;color:#666;padding:1%}
.PageBar a:hover{text-decoration:none}
.PageBar a.On,.PageBar a.On:hover{font-weight:700;text-decoration:none;color:#666;border:transparent 1px solid}
.GiftNote .GiftBorder:before{display:none}
@keyframes scaleDraw{
0%{transform:scale(2.6);opacity:1}
50%{opacity:1}
100%{transform:scale(.2);opacity:0}
}
.scaleDraw-play span{background:url(../images/main_light.png) no-repeat;background-size:100%;position:absolute;width:100%;height:100vh}
@media screen and (max-width:1440px){
.Wrapper{width:100%}
.Wrapper{width:950px;margin:auto;position:relative}
}
@media screen and (max-width:768px){
body{background-position: center 9vmin;}
img{width:100%;height:auto}
.Wrapper{width:100%}
.BtnBack{width:10vmin;height:12vmin;border-radius:0 0 5px 5px;font-size:4vmin;right:10px;padding:1% 2%;top:3vmin;display: none;}
.GiftList{border-radius:20px}
.Box{border-radius:20px;padding:3% 3% 1%;font-size: 3vmin;}
h4{font-size:1.5rem}
#Note h4{font-size:1.5rem;margin:0}

#Activity{padding:4%}
.GiftTitle .Border{font-size:1.6rem;;padding:4% 1%;white-space:nowrap}
.GiftTitle .Border .Date{font-size:1.6rem;}
.LinkDetail{font-size:15px}
.LinkDetail{padding:.2rem .5rem}
.Container{z-index:2}
i.IconArrow{border-width:5px 0 5px 8px}
.LinkIntro i.IconArrow{border-width:5px 0 5px 8px}
.GiftName .h3Title{font-size:1.3rem;}
.GiftName .SubTitle{font-size:1rem;line-height:1.4;margin:0 0 2vmin 0}
.GiftName .Discript{font-size:15px;min-height:inherit}
.LinkGo a{padding:3px;font-size:1.1rem;width:55%;box-shadow:0 2px 0 1px #d900c2}
.GiftImg img{width:70%}
.GiftItemMain .GiftImg img{width:100%}
.GiftName h3{font-size:1.2rem;}
.Ps{font-size:15px}
.GiftName{padding:0;text-align:center;width:100%}
.LightboxWrap{width:90%;height:500px;margin:-250px 0 0 -45%}
.LightboxWrap h4 span{font-size:1.4rem;width:50px;height:50px;line-height:50px;border:2px solid #fff}
.Lightbox .BtnClose a{width:30px;height:30px;top:-7%}
.GiftIntroList>li{flex-flow:column}
.GiftIntroList>li .ImgName h3{font-size:8vmin}
.GiftIntroList>li .ImgName .Price{font-size:6vmin}
.GiftIntroList>li .ImgName ol li{font-size:6vmin}
.LightboxWrap .GiftBlock{height:400px}
.GiftIntroList>li .ImgName{margin:0;flex:inherit;width:90%}

.Note{font-size:4vmin}
.ImpFont{font-size:1.3rem}
.Gift02 h5{font-size:8vmin}
.Gift02 .List02 h5{border-width:3px}
.GiftIntroList>li .ImgName h3{margin-top:3%}
.GiftBorder{padding:10px;flex-flow:column}
.GiftItemMain .GiftBorder:after{width:56vmin;height:15vmin;top:-17vmin;margin-left:-21vmin}
.Btn{font-size: 1.1rem;padding: 3%;}
.ButtnBar ul li i{border-width:5px 0 5px 9px}
.ButtnBar ul li{width:60%}
/* .GiftItem{margin-bottom:2em} */
.Label{font-size:5vmin;width:120px;height:42px;top:0;line-height:2}
.Label span{font-size:5vmin}
.GiftItem .GiftBorder{padding:5% 3%;border-radius:15px;border-width: 5px;;}
.GiftItem .GiftBorder:before{border-radius:10px;left:5px;right:5px;bottom:5px;top:5px}
.GiftItem .GiftBorder:after{border-radius:15px}
.GiftTitle{font-size:15px;width:90%;margin:0 auto 3%}
.GiftNote{padding:5%}
.idol01{background-size:100%;width:25vmin;height:38vmin;background-size:100%;left:0;bottom:6vmin}
.h1_gift{width:15vmin;height:17vmin;background-size:100%;right:15vmin;bottom:10vmin}
.coin01{background-size:100%;width:10vmin;bottom:19vmin;right:8vmin;height:10vmin}
.coin02{background-size:100%;width:5vmin;height:5vmin;bottom:28vmin;right:19vmin}
.Bg{background-size:194%;height:59vmin}
#Activity h4{font-size:1.5rem;}
h5{font-size: 1.2rem;}
.Table{font-size:3vmin;}
#Activity h4 span:after{height: 14px;}
.ActivityRow{font-size: 3vmin;;}
}