@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:#fba3c1 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}
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:1080px;margin:auto;position:relative}
.Header{position:relative;overflow:hidden}
.Header .Wrapper{z-index:10}
.H1Block{position:relative;z-index:2;margin-top:50px}
h1 a{width:674px;height:495px;text-indent:-9999px;background-size:100%;display:block;background:url(../images/h1.png) no-repeat;margin:auto}
.Idol1{background:url(../images/idol01.png) no-repeat;background-size:100%;width:212px;height:374px;position:absolute;top:34px;left:50%;margin-left:-510px}
.Idol2{background:url(../images/idol02.png) no-repeat;background-size:100%;width:284px;height:384px;position:absolute;top:386px;left:50%;margin-left:-845px}
.Idol4{background:url(../images/idol04.png) no-repeat;background-size:100%;width:272px;height:268px;position:absolute;top:203px;right:50%;margin-right:-553px}
.Idol5{background:url(../images/idol05.png) no-repeat;background-size:100%;width:171px;height:472px;position:absolute;top:561px;right:50%;margin-right:-740px}
.Contanter{position:relative}
#BlockMain .Title{background:url(../images/6pro_title.png) no-repeat center bottom;background-size:100%;width:224px;height:223px;margin:auto}
.TabGroup .Wrapper{width:922px;margin:auto}
.TabGroup ul{width:100%;display:flex;flex-wrap:wrap}
.TabGroup ul li{width:23%;margin:0 1%}
.TabGroup ul li a{display:block;text-indent:-9999px;width:100%;height:0;padding-bottom:100%}
.TabGroup ul li:nth-child(1) a{background:url(../images/tab01.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%}
.TabGroup ul li:nth-child(5) a{background:url(../images/tab05.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(4) a{background:url(../images/tab04.png) no-repeat center;background-size:100%}
.TabGroup ul li:nth-child(6) a{background:url(../images/tab06.png) no-repeat center;background-size:100%}
.Block{margin-bottom:30px}
.PdBlock{display:flex;flex-wrap:wrap;margin-top:-140px}
.PdBlock li{width:34.5%;margin:0 1.2%;position:relative}
.PdBlock li a{display:block;text-indent:-9999px;width:100%;height:0;padding-bottom:111%}
.PdBlock li:nth-child(1){margin-left:-1.5%}
.PdBlock li:nth-child(2){margin-left:-3%;margin-top:15%}
.PdBlock li:nth-child(3){margin-left:-3%}
.PdBlock li:nth-child(4){margin-left:-1.5%;margin-top:-15%}
.PdBlock li:nth-child(5){margin-left:-3%;margin-top:1%}
.PdBlock li:nth-child(6){margin-left:-3%;margin-top:-15%}
.PdBlock li:nth-child(1) a{background:url(../images/PdItem01.png) no-repeat center;background-size:100%}
.PdBlock li:nth-child(2) a{background:url(../images/PdItem02.png) no-repeat center;background-size:100%}
.PdBlock li:nth-child(3) a{background:url(../images/PdItem03.png) no-repeat center;background-size:100%}
.PdBlock li:nth-child(4) a{background:url(../images/PdItem04.png) no-repeat center;background-size:100%}
.PdBlock li:nth-child(5) a{background:url(../images/PdItem05.png) no-repeat center;background-size:100%}
.PdBlock li:nth-child(6) a{background:url(../images/PdItem06.png) no-repeat center;background-size:100%}
.EventGroup{margin-bottom:70px}
.EventGroup ul{width:100%;display:flex;flex-wrap:wrap}
.EventGroup ul li{width:26%;margin:0 -1% 0 0}
.EventGroup ul li a{display:block;text-indent:-9999px;width:100%;height:0;padding-bottom:40%}
.EventGroup ul li:nth-child(1) a{background:url(../images/event01.png) no-repeat center;background-size:100%}
.EventGroup ul li:nth-child(2) a{background:url(../images/event02.png) no-repeat center;background-size:100%}
.EventGroup ul li:nth-child(3) a{background:url(../images/event03.png) no-repeat center;background-size:100%}
.EventGroup ul li:nth-child(4) a{background:url(../images/event04.png) no-repeat center;background-size:100%}
.HotPorduct .theme{position:relative;z-index:3;position:relative;margin-bottom:70px;background:#aa806f}
.HotPorduct .theme:after{content:"";position:absolute;left:0;right:0;top:-45px;z-index:-1;width:100%;height:0;margin:0 auto 0 auto;border-top:45px solid transparent;border-left:0 solid transparent;border-right:950px solid #aa806f}
.HotPorduct h3{text-align:center;font-size:52px;font-weight:700;color:#965940}
.HotPorduct h3 i{background:url(../images/IconGift.png) no-repeat top center;background-size:100%;width:38px;height:38px;display:none}
.HotPorduct h3 i.IconLeft{margin-right:4%}
.HotPorduct h3 i.IconRight{margin-left:4%}
.HotPorduct h3 span:before{content:"";background:url(../images/h3_before_01.png) no-repeat top center;background-size:100%;width:214px;height:150px;position:absolute;left:-50%;bottom:-22px;z-index:2}
.HotPorduct h3 span:after{content:"";background:url(../images/h3_after_01.png) no-repeat top center;background-size:100%;width:270px;height:150px;position:absolute;right:-50%;bottom:-22px;z-index:2}
.HotPorduct h3 span{position:relative;z-index:2;display:block;border-radius:100px;margin:auto;z-index:10;position:relative;background:#fff7ec;box-shadow:0 0 0 2px #965940,0 0 0 5px #fff7ec;margin:auto;width:50%}
.HotPorduct h3:before{content:"";border-radius:100px;width:50%;height:8%;background-color:#92604b;position:absolute;left:22%;top:-12px;z-index:4}
.HotPorduct h3:after{content:"";border-radius:100px;width:50%;height:8%;background-color:#92604b;position:absolute;right:22%;top:15px;z-index:4}
.Section:nth-child(odd) .HotPorduct .theme{background:#ff7989}
.Section:nth-child(odd) .HotPorduct .theme:after{border-right:950px solid #ff7989}
.Section:nth-child(odd) .HotPorduct h3{color: #fa5c6f}
.Section:nth-child(odd) .HotPorduct h3:before{background-color:#ff808f}
.Section:nth-child(odd) .HotPorduct h3:after{background-color:#fdc2c9}
.Section:nth-child(odd) .HotPorduct h3 span{background:#fff7ec;box-shadow:0 0 0 2px #fa5c6f,0 0 0 5px #fff7ec;}

#Block2 .HotPorduct h3 span:before{content:"";background:url(../images/h3_before_02.png) no-repeat top center;background-size:100%;width:235px;height:150px}
#Block2 .HotPorduct h3 span:after{content:"";background:url(../images/h3_after_02.png) no-repeat top center;background-size:100%;width:254px;height:150px}
#Block3 .HotPorduct h3 span:before{content:"";background:url(../images/h3_before_03.png) no-repeat top center;background-size:100%;width:199px;height:150px}
#Block3 .HotPorduct h3 span:after{content:"";background:url(../images/h3_after_03.png) no-repeat top center;background-size:100%;width:254px;height:150px}

#Block4 .HotPorduct h3 span:before{content:"";background:url(../images/h3_before_04.png) no-repeat top center;background-size:100%;width:177px;height:150px}
#Block4 .HotPorduct h3 span:after{content:"";background:url(../images/h3_after_04.png) no-repeat top center;background-size:100%;width:254px;height:150px}

#Block5 .HotPorduct h3 span:before{content:"";background:url(../images/h3_before_05.png) no-repeat top center;background-size:100%;width:197px;height:140px}
#Block5 .HotPorduct h3 span:after{content:"";background:url(../images/h3_after_05.png) no-repeat top center;background-size:100%;width:183px;height:150px}
#Block6 .HotPorduct h3 span:before{content:"";background:url(../images/h3_before_06.png) no-repeat top center;background-size:100%;width:197px;height:140px}
#Block6 .HotPorduct h3 span:after{content:"";background:url(../images/h3_after_06.png) no-repeat top center;background-size:100%;width:183px;height:150px}
.grid-body{padding:35px!important}
.MainBlock6{background:url(../images/MainBlock6Bg.png) repeat;width:100%;border-radius:40px;display:flex}
.MainBlock6 .Title{background:url(../images/gift_title.png) no-repeat center;background-size:100%;width:50%;height:0;padding-bottom:38%}
.MainBlock6 .Notices{background:url(../images/giftblock.png) no-repeat center;background-size:100%;width:50%;height:0;padding-bottom:38%}
.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:150px;right:50%;z-index:20;margin:0;font-size:1rem;width:122px;margin:0 -48% 0 0}
.FlyNav ul{position:relative}
.FlyNav ul:before{content:"";position:absolute;top:-105px;left:0;background:url(../images/FollowertTopRight.png) no-repeat top;width:122px;background-size:100%;text-indent:-9999px;height:105px;z-index:10}
.FlyNav2 ul:before{background:url(../images/FollowertTopLeft.png) no-repeat top;background-size:100%}
.FlyNav ul li a{display:block;padding:6%;text-align:center;color:#fff;text-decoration:none;background-color:#965940}
.FlyNav ul li a:hover{background-color:#ba804f}
.FlyNav ul li{position:relative;margin-bottom:1px}
.FlyNav2{right:inherit;left:50%;margin:0 0 0 -48%}
.FlyNav ul li.ItemQr{font-size:.8rem}
.FlyNav ul li.ItemQr a{border-radius:0 0 300px 300px;padding-bottom:28px}
.FlyNav ul li.ItemQr img{margin-bottom:5px;width:100%;border-radius:5px}
.FlyNav1 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 a{width:46%;height:0;padding-bottom:40%;background-size:100%;margin:auto}
.TabGroup .Wrapper{width:100%}
.IdolFrame{width:100vw;overflow-x:hidden;position:absolute;top:0;bottom:0}
}
@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:160%;overflow-x:hidden}
img{width:100%;height:auto}
.Wrapper{width:100%}
#Header .Flexblock{flex-direction:column;display:flex}
.GoActivity a{width:61%;height:0;padding-bottom:40%;margin:0 0 0 37vmin}
.H1Block{margin:0;position:relative;z-index:11;width:100%}
.HotPorduct h3{font-size:8vmin}
.HotPorduct h3 i{width:5vmin;height:5vmin}
#Block1 .HotPorduct h3 span:before,#Block2 .HotPorduct h3 span:before,#Block3 .HotPorduct h3 span:before,#Block4 .HotPorduct h3 span:before,#Block5 .HotPorduct h3 span:before,#Block6 .HotPorduct h3 span:before{bottom:-9px;height:129%;width:33%;left:-17vmin;background-size:100%}
#Block1 .HotPorduct h3 span:after,#Block2 .HotPorduct h3 span:after,#Block3 .HotPorduct h3 span:after,#Block4 .HotPorduct h3 span:after,#Block5 .HotPorduct h3 span:after,#Block6 .HotPorduct h3 span:after{width: 33%;right: -17vmin;height: 126%;bottom: -9px;background-size: 133%;}
#Block2 .HotPorduct h3 span:after{background-size: 119%}
.HotPorduct h3:after,.HotPorduct h3:before{height:11vmin;width:65%}
.HotPorduct h3 span{width:65%}
#Block5 .HotPorduct h3 span:after{background-size:101%}
#Block6 .HotPorduct h3 span:after{background-size:101%}
.PdBlock li{width:48%;margin:0 1%!important}
h1 a{width:75%;height:0;padding-bottom:60%;background-size:100%;margin:11% auto 0}
.grid-body{padding:15px 5px!important}
#Block1{background-size:130%}
#Block1 .Title{width:80%;height:0;padding-bottom:30%}
.PdBlock{margin-top:0}
.HotPorduct .theme{margin-bottom:2em}
.Section{margin-bottom:0}
.MainBlock6{flex-flow:column;margin:2%;border-radius:20px;width:auto}
.MainBlock6 .Title{width:100%;padding-bottom:60%;margin:auto}
.MainBlock6 .Notices{width:100%;margin:auto;padding-bottom:60%}
.Idol1{width: 29vmin;height: 41vmin;top: 10vmin;margin: 0;left: -4vmin;right: 0;}
.Idol2{width: 39vmin;height: 33vmin;top: 99vmin;margin: 0;left: -17vmin;}
.Idol4{width: 34vmin;height: 28vmin;top: 24vmin;margin: 0;right: -11vmin;}
.Idol5{width:24vmin;height:32vmin;top:95vmin;margin:0;right:1vmin }
.EventGroup{margin-bottom:2em}
.HotPorduct .theme:after{border-right:90vmin solid #aa806f}
.Section:nth-child(odd) .HotPorduct .theme:after{border-right:90vmin solid #ff7989}
.EventGroup ul li{width:49%;margin:0 .5%}
}