@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:#b1c2e6 url(../images/bg.png) no-repeat center 40px;background-size:100%}
a:focus{outline:0}
a{text-decoration:underline;color:#00f}
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,h4,p{margin:0;padding:0}
legend{text-align:center;margin:auto}
input[type=text]{width:60%;margin:8px 0;display:inline-block;border:1px solid #ccc;-webkit-box-shadow:inset 0 1px 3px #ddd;box-shadow:inset 0 1px 3px #ddd;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:2%;vertical-align:middle;font-size:1rem}
input[type=text]:focus,select:focus{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
label{width:20%;display:inline-block}
.Wrapper{width:1250px;margin:auto;position:relative}
.Header{position:relative;overflow:hidden}
.Header .Wrapper{z-index:10}
.H1Block{display:flex}
h1{width:645px;height:457px;position:relative;margin:auto;z-index:2;position:relative}
h1 a{width:645px;height:457px;text-indent:-9999px;background-size:100%;display:block;background:url(../images/h1.png) no-repeat;margin:auto}
.h1Splash{width:837px;height:705px;z-index:1;margin-left:-195px;position:relative;z-index:1}
.h1Splash .h1SplashBg{background:url(../images/h1Splash_day.png) no-repeat;background-size:100%;position:absolute;background-size:100%;z-index:4;left:0;right:0;top:0;bottom:0}
#background.display .h1Splash .h1SplashBg{background:url(../images/h1Splash_night.png) no-repeat;background-size:100%;position:absolute;background-size:100%;z-index:4;left:0;right:0;top:0;bottom:0}
.DayLight,.NightLight{position:absolute;background-size:100%;z-index:5;left:0;right:0;top:0;bottom:0}
#background.display{background:#99a8d0 url(../images/bg2.png) no-repeat center 40px;background-size:100%}
.h1Splash img{width:100%;height:auto}
.Contanter{position:relative}
.TabGroup{margin-bottom:3%}
.TabGroup ul{width:100%;display:flex;flex-wrap:wrap}
.TabGroup ul li{width:28.08%;margin:0 2.62%;position:relative;z-index:2}
.TabGroup ul li a{display:block;text-indent:-9999px;width:100%;height:0;padding-bottom:40%}
.TabGroup ul li:nth-child(1) a{background:url(../images/tab01.png) no-repeat center;background-size:100%}
.TabGroup ul li:nth-child(2) a{background:url(../images/tab02.png) no-repeat center;background-size:100%}
.TabGroup ul li:nth-child(3) a{background:url(../images/tab03.png) no-repeat center;background-size:100%}
.Block{margin-bottom:30px}
.PdBlock{display:flex;flex-wrap:wrap;margin-top:-50px}
.PdBlock li{margin:0;position:relative}
.PdBlock li a{display:block;text-indent:-9999px;width:100%;height:0}
#Block1 .PdBlock li:nth-child(1){width:30.4%;margin-left:0;background:url(../images/Title01.png) no-repeat center;background-size:100%;height:0;padding-bottom:28.48%;margin-left:9%}
#Block1 .PdBlock li:nth-child(2){width:48.88%;margin-top:9%;margin-left:5%}
#Block1 .PdBlock li:nth-child(2) a{padding-bottom:84.78%}
#Block1 .PdBlock li:nth-child(3){width:41.68%;margin-left:3%;margin-top:-20%}
#Block1 .PdBlock li:nth-child(3) a{padding-bottom:92%}
#Block1 .PdBlock li:nth-child(4){width:50%;margin-top:4%}
#Block1 .PdBlock li:nth-child(4) a{padding-bottom:69%}
#Block1 .PdBlock li:nth-child(5){width:41.6%;margin-left:3%;margin-top:-22%}
#Block1 .PdBlock li:nth-child(5) a{padding-bottom:102.3%}
#Block1 .PdBlock li:nth-child(6){width:42.16%;margin-top:1%;margin-left: 10%;}
#Block1 .PdBlock li:nth-child(6) a{padding-bottom:102%}
#Block1 .PdBlock li:nth-child(7){width:51.92%;margin-top:-26%;margin-left:0}
#Block1 .PdBlock li:nth-child(7) a{padding-bottom:75%}
#Block1 .PdBlock li:nth-child(2) a{background:url(../images/PdItem01.png) no-repeat center;background-size:100%}
#Block1 .PdBlock li:nth-child(3) a{background:url(../images/PdItem02.png) no-repeat center;background-size:100%}
#Block1 .PdBlock li:nth-child(4) a{background:url(../images/PdItem03.png) no-repeat center;background-size:100%}
#Block1 .PdBlock li:nth-child(5) a{background:url(../images/PdItem04.png) no-repeat center;background-size:100%}
#Block1 .PdBlock li:nth-child(6) a{background:url(../images/PdItem05.png) no-repeat center;background-size:100%}
#Block1 .PdBlock li:nth-child(7) a{background:url(../images/PdItem06.png) no-repeat center;background-size:100%}
.grid-body{padding:80px 35px 35px!important}
.MainBlock6{display:flex}
.MainBlock6 .Title{background:url(../images/gift_title.png) no-repeat center;background-size:100%;width:50.81%;height:0;padding-bottom:38%;margin-left:5%}
.MainBlock6 .Notices{background:url(../images/giftblock.png) no-repeat center;background-size:100%;width:47.9%;height:0;padding-bottom:38%}
.HotPorduct .theme{position:relative;z-index:3;background:#7ca2e3;position:relative;border-radius:80px;margin-bottom:70px;margin-top:-81px}
.HotPorduct h3{text-align:center;font-size:65px;font-weight:700;color:#fff;background-color:#3d599c;border-radius:50px 50px 0 0;width:70%;margin:auto;z-index:10;position:relative}
.HotPorduct h3:before{content:"";background:url(../images/h3_before.png) no-repeat top center;background-size:100%;width:149px;height:172px;position:absolute;left:-160px;bottom:0;z-index:2}
.HotPorduct h3:after{content:"";background:url(../images/h3_after.png) no-repeat top center;background-size:100%;width:182px;height:140px;position:absolute;right:-180px;bottom:-10px;z-index:2}
.HotPorduct h3 span{position:relative;z-index:2}
.HotPorduct h3 span:before{content:"";width:32px;height:32px;position:absolute;background-color:#e5d5be;border-radius:100%;-webkit-box-shadow:3px 4px 0 0 rgb(0 0 53 / 90%);box-shadow:3px 4px 0 0 rgb(0 0 53 / 90%);left:-40%;top:31%}
.HotPorduct h3 span:after{content:"";width:32px;height:32px;position:absolute;background-color:#e5d5be;border-radius:100%;-webkit-box-shadow:3px 4px 0 0 #000035;box-shadow:3px ​4px 0 0 #000035;right:-40%;top:31%}
.Section{padding:0;margin-bottom:30px}
.brightness{-webkit-transition:all .4s ease;-o-transition:all .4s ease;transition:all .4s ease}
.brightness:hover{-webkit-filter:brightness(110%);filter:brightness(110%);-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}
.bg_black{background-color:#000}
.FlyNav{position:fixed;top:200px;right:50%;z-index:20;margin:0;font-size:1.2rem;width:150px;margin:0 -48% 0 0}
.FlyNav ul{background:#3d599c;border-radius:0 0 100px 100px;padding:0 0 10%}
.FlyNav ul:before{content:"";position:absolute;top:-130px;left:0;background:url(../images/FollowertTopRight.png) center top/100% no-repeat;width:150px;text-indent:-9999px;height:130px;z-index:10}
.FlyNav2 ul:before{background:url(../images/FollowertTopLeft.png) no-repeat top;background-size:100%;height:161px;top:-161px}
.FlyNav ul:after{content:"";position:absolute;bottom:-111px;left:-11px;background:url(../images/FollowertBot.png) no-repeat top;width:138px;background-size:100%;text-indent:-9999px;height:111px;z-index:10}
.FlyNav ul li a{display:block;padding:6%;text-align:center;color:#fff;text-decoration:none}
.FlyNav ul li a:hover{color:#fed751}
.FlyNav ul li{position:relative;border-bottom:1px solid #fff}
.FlyNav ul li:last-child{border-bottom:0 none}
.FlyNav2{right:inherit;left:50%;margin:0 0 0 -48%}
.FlyNav ul li.ItemQr{font-size:.8rem}
.FlyNav ul li.ItemQr a{color:#fff;border-radius:0 0 300px 300px;padding-bottom:28px}
.FlyNav ul li.ItemQr img{margin-bottom:5px;width:100%;border-radius:5px}
.FlyNav2 ul li:last-child a{border-radius:0 0 60px 60px;padding-bottom:22%}
.MobileNavBar{background-color:#030000;background-image:repeating-linear-gradient(-1deg,#030000 0,rgba(255,255,255,.3) 100%);box-shadow:0 -.5px 0 .5px rgba(255,255,255,.8);height:45px;position:fixed;bottom:0;left:0;right:0;z-index:100}
.MobileNav ul{display:flex;flex-wrap:wrap}
.MobileNav ul li{width:33%;text-align:center}
.MobileNav ul li a{padding:8% 5%;color:#fff;display:block;text-decoration:none}
.FootOpenNav{background-color:#030000;position:fixed;bottom:45px;z-index:100;display:none;width:100%;transform-origin:center}
.MobileNavBar ul li a i{width:0;height:0;border-style:solid;border-width:10px 7.5px 0 7.5px;border-color:#fff transparent transparent transparent;display:inline-block}
.MobileNavBar ul li.Active{background-color:#000}
.MobileNavBar ul li.Active a{color:#ffeb3b}
.card,.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}
.card:hover,.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%)}
.Mobile{display:none}
.Top a{display:none!important}
@media screen and (max-width:1440px){
.Wrapper{max-width:950px;width:100%}
h1{width:54%;height:auto;margin-left:-2%;margin-top:4%}
h1 a{width:100%;height:0;padding-bottom:88%;background-size:100%}
.TabGroup ul{margin-top:0}
.HotPorduct h3:before{width:19%;height:150%;left:-20%}
.HotPorduct h3:after{width:22%;height:125%;right:-21%}
.h1Splash{width:59%;height:0;padding-bottom:50%;background-size:100%;margin-left:-11%}
}
@media screen and (max-width:1025px){
.Mobile{display:block}
.Desk+.FlyNav{display:none}
.MobileNavBar{height:50px}
.FPrice{font-size:7vmin}
.Mobile{display:block}
.Desk{display:none}
.FlyNav{display:none!important}
}
@media screen and (max-width:768px){
body{background-size:220%}
#background.display{background-size:220%}
img{width:100%;height:auto}
.Wrapper{width:100%;max-width:inherit;overflow-x:hidden}
.Header .Wrapper{width:100%}
#Header .H1Block{flex-direction:column;display:flex}
h1{width:90%;height:auto;margin:4% auto 0}
h1 a{padding-bottom:71%}
.TabGroup ul li{width:32.3%;margin:0 .5%}
.HotPorduct h3{font-size:8vmin;border-radius:25px 25px 0 0}
.grid-body{padding:22px 5px!important}
.h1Splash{width:90%;margin:auto;padding-bottom:80%}
#Block1 .PdBlock li:nth-child(1){margin-top:17%}
#Block1 .PdBlock li:nth-child(2){margin-top:25%}
#Block1 .PdBlock li:nth-child(3){margin-left:2%}
.HotPorduct .theme{margin-top:-6vmin;border-radius:20px;margin-bottom:1em}
.Section{margin-bottom:0}
.Top a{display:block!important}
.HotPorduct h3:after{bottom:-9px;height:115%}
.HotPorduct h3:before{bottom:-9px;height:119%;width:16%}
.MainBlock6 .Title{width:90%;padding-bottom:70%;margin:auto}
.MainBlock6{flex-flow:column}
.MainBlock6 .Notices{width:90%;margin:auto;padding-bottom:70%}
.HotPorduct h3 span:before{box-shadow:1px 2px 0 0 rgb(0 0 53 / 90%);left:-27%;width:16px;height:16px}
.HotPorduct h3 span:after{box-shadow:1px 2px 0 0 rgb(0 0 53 / 90%);right:-27%;width:16px;height:16px}
}