@charset "utf-8";
/* --------------------------------------
 * 共用元件--元件
 * -------------------------------------- */
body{ margin: 0 ;padding:0;}

/*Phone置底黏人精--活動紀錄*/
.fixedfooterArea { z-index:10; position:fixed; left:0; margin:0; padding:0;  width:100%; height:60px; text-align:center;  font-size:14px; line-height:34px; color:#000; font-family:"微軟正黑體", "Microsoft JhengHei", Arial; background-color: transparent;
                    bottom: 45px; 
                    bottom: calc(45px + constant(safe-area-inset-bottom)*0.6 );
                    bottom: calc(45px + env(safe-area-inset-bottom)*0.6 );}
.fixedfooterArea a { display:block; color:inherit; text-decoration:none;}
.fixedfooterArea .fixedBox_1 { z-index:1; position:absolute; top:0px; left:0; width:100%; text-align:center; }
.fixedfooterArea .fixedBox_1 ul { position:relative; margin:0; padding:0; width:100%; list-style:none outside none; white-space: nowrap;}
.fixedfooterArea .fixedBox_1 li { z-index:1; position:relative; display:inline-block;float:inherit; padding:0; border-radius:44px; height:34px; box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2); color:#000; background-color: rgba(255,255,255,0.95);}
.fixedfooterArea .fixedBox_1 li a { padding:0 24px; text-decoration:none;}
.fixedfooterArea .fixedBox_1 li span { position:relative; top:4px; display: inline-block; width:26px; height:auto; }
/*.fixedfooterArea .fixedBox_1 li span img { filter: invert(1);}*/
  /*我的點數-動畫*/
  .fixedfooterArea .fixedBox_1 {   -webkit-animation:fixedBox_1-play 1s 1; animation:fixedBox_1-play 1s 1;}
    @-webkit-keyframes fixedBox_1-play { 
      0%  { -webkit-transform: translate(0,50px); opacity:0;} 
      100%{ -webkit-transform: translate(0,0);    opacity:1;}
    }
    @keyframes fixedBox_1-play { 
      0%  { transform: translate(0,50px); opacity:0;} 
      100%{ transform: translate(0,0);    opacity:1;}
    }



/*Phone置底選單*/
.footerArea { display:none!important;} /*把系統手機版原本的地關掉*/
.Fixedfooter { z-index: 998; position: fixed; bottom: 0; width:100%; font-family:"微軟正黑體", "Microsoft JhengHei", Arial;}
.Fixedfooter * ,
.Fixedfooter *:before ,
.Fixedfooter *:after { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; transition: all 0.15s cubic-bezier(0.5, 0, 0.5, 1);}
.Fixedfooter .Fixedfooter_box { z-index: 1; position: fixed; bottom: 2.5%; width:100%; max-width:767px;
                height: 50px;
                height: calc(50px + constant(safe-area-inset-bottom)*0.6 );
                height: calc(50px + env(safe-area-inset-bottom)*0.6 );
                /*-webkit-box-shadow:0px 0px 8px rgba(0,0,0,0.5);
                   -moz-box-shadow:0px 0px 8px rgba(0,0,0,0.5);
                  -ms-box-shadow:0px 0px 8px rgba(0,0,0,0.5);
                   -o-box-shadow:0px 0px 8px rgba(0,0,0,0.5);
                    box-shadow:0px 0px 8px rgba(0,0,0,0.5);*/}
.Fixedfooter .Fixedfooter_box ul { position: absolute; left: 0; top: 13px; margin: 0; padding: 0; width: 100%; list-style: outside none none;}
.Fixedfooter .Fixedfooter_box li { float: left; position:relative; padding-top:2px; height:50px; width: 100%;text-align: left; list-style: outside none none;}
    /*icon*/
    .Fixedfooter .Fixedfooter_box li:nth-of-type(1) i { background-image: url(Fixedfooter_icon_1.png?t=1765247900681);}
    .Fixedfooter .Fixedfooter_box li:nth-of-type(2) i { background-image: url(Fixedfooter_icon_2.png?t=1765247900681);}
    .Fixedfooter .Fixedfooter_box li:nth-of-type(3) i { background-image: url(Fixedfooter_icon_3.png?t=1765247900681);}
    .Fixedfooter .Fixedfooter_box li:nth-of-type(4) i { background-image: url(Fixedfooter_icon_4.png?t=1765247900681);}
    /*顆數--4顆*/
    .Fixedfooter .Fixedfooter_box [data-num="4"] li { width:25%;}
    .Fixedfooter .Fixedfooter_box [data-num="4"] .bg i { left: calc((25% - 75px) * 0.5 );}
    .Fixedfooter .Fixedfooter_box [data-num="4"] .bg b { left: calc((25% - 75px) * 0.5 );}
    /*顆數--3顆*/
    .Fixedfooter .Fixedfooter_box [data-num="3"] li { width:33.3%;}
    .Fixedfooter .Fixedfooter_box [data-num="3"] .bg i { left: calc((33.3% - 75px) * 0.5 );}
    .Fixedfooter .Fixedfooter_box [data-num="3"] .bg b { left: calc((33.3% - 75px) * 0.5 );}
    .Fixedfooter .Fixedfooter_box li a { position:relative; display:block; color: #fff; font-size:12px; line-height:12px; text-align:center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;}
    .Fixedfooter .Fixedfooter_box li a i { position:relative; display:block; margin:0 auto; width:40px; height:32px; background-repeat: no-repeat; background-position: center center; background-size: auto 34px;}
    /*高亮*/
    .Fixedfooter .Fixedfooter_box li.cate-hover { -webkit-transform:translateY(-13px); transform:translateY(-13px); }
    .Fixedfooter .Fixedfooter_box li.cate-hover a { color:#fff;}
    /*icon高亮
    .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(1) i { background-image: url(Fixedfooter_icon_1_on.png?t=1765247900681);}
    .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(2) i { background-image: url(Fixedfooter_icon_2_on.png?t=1765247900681);}
    .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(3) i { background-image: url(Fixedfooter_icon_3_on.png?t=1765247900681);}
    .Fixedfooter .Fixedfooter_box li.cate-hover:nth-of-type(4) i { background-image: url(Fixedfooter_icon_4_on.png?t=1765247900681);}*/
    .Fixedfooter .Fixedfooter_box .animated { animation-delay:-0.6s;}
        /*特製背景
        .Fixedfooter .Fixedfooter_box .bg { z-index:-1; position:absolute; bottom:25px; left:0; width:100%; height:100%; pointer-events:none;}
        .Fixedfooter .Fixedfooter_box .bg i { display:block; z-index:2; position:absolute; top:0; left: calc((25% - 75px) * 0.5 ); border-radius:50%; width:75px; height:75px; background:#FF213C;
                            -webkit-transform: scale(0.85); transform: scale(0.85);
                            box-shadow: 
                              0px 1px 2px rgba(0, 0, 0, 0.3),
                            0 8px 20px 5px rgba(191,15,26,0.3),
                            0 16px 20px 10px rgba(191,15,26,0.5),
                            0 16px 20px 10px rgba(191,15,26,0.5),
                            0 30px 40px 30px rgba(191,15,26,0.5);}
        .Fixedfooter .Fixedfooter_box .bg b { display:block; z-index:3; position:relative; left: calc((25% - 75px) * 0.5 ); border-radius:50%; width:75px; height:75px; 
                            box-shadow:
                              45px 40px 0 #E41511, 
                              -45px 40px 0 #E41511,
                              0 60px 0 #E41511, 
                              -32px 77px 0 #E41511,
                              32px 77px 0 #E41511,
                              0 75px 0 #E41511;}
        .Fixedfooter .Fixedfooter_box .bg b:before,
        .Fixedfooter .Fixedfooter_box .bg b:after { content: ''; position: absolute; top: 30%; border-top: solid 2px #FF213C; width: 800%; height: 180%; background: #E41511;}
        .Fixedfooter .Fixedfooter_box .bg b:before { right:100%; border-top-right-radius: 20px;}
        .Fixedfooter .Fixedfooter_box .bg b:after  { left:100%;  border-top-left-radius: 20px;}*/
        /*416品牌狂歡版型*/
        .Fixedfooter .Fixedfooter_box .bg { z-index:-1; position:absolute; bottom:0; left:0; width:100%; height:100%; pointer-events:none; }
        .Fixedfooter .Fixedfooter_box .bg i { display:none;}
        .Fixedfooter .Fixedfooter_box .bg b { display:block; z-index:3; position:relative; left: calc((25% - 75px) * 0.5 ); width:75px; height:98px; }
        .Fixedfooter .Fixedfooter_box .bg b:before,
        .Fixedfooter .Fixedfooter_box .bg b:after { content: ''; position: absolute; top:40%; width: 800%; height: 180%; background: #1a3c6e; }
        .Fixedfooter .Fixedfooter_box .bg b:before { right:0%; }
        .Fixedfooter .Fixedfooter_box .bg b:after  { left:0%;}
    /*高亮*/
    .Fixedfooter .Fixedfooter_box li.cate-hover { -webkit-transform:translateY(-10px); transform:translateY(-10px); transition: none;}
    .Fixedfooter .Fixedfooter_box li span { display:block;}
    .Fixedfooter .Fixedfooter_box li.cate-hover span { -webkit-transform:translateY(10px); transform:translateY(10px); transition: none;}
    .Fixedfooter .Fixedfooter_box li:after { content:""; display: block;  z-index:-1; position:absolute; top:-13px; left:0; padding-bottom:60px; width:100%; height:0; background-image:url(Fixedfooter_icon_bg.png?t=1765247900681); background-position: center; background-size:58px; background-repeat:no-repeat; pointer-events:none;}
    .Fixedfooter .Fixedfooter_box li:after { transform:rotate(-360deg) translate(0,-0%) scale(0) ; transition:0.25s; transition-timing-function:cubic-bezier(.98,.47,.53,1.3);}
    .Fixedfooter .Fixedfooter_box li.cate-hover:after { transform:rotate(0deg) translate(0,0) scale(1) ; }

    /*選單_黑底*/
    .Fixedfooter .Fixedfooter_bg { transition: none;}
        /*【程式切換】cate-open 展開後*/
        .Fixedfooter.cate-open .Fixedfooter_bg { position: fixed; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.5);}
        .Fixedfooter.cate-open .Fixedfooter_bg { display: block;}

    /*浮層區-Phone置底選單*/
    .Fixedfooter_agree { z-index:0; position: fixed; left: 0; bottom: 0; margin:0; width: 100%; border-radius: 2em 2em 0 0; background-color: #fffbbc; box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
                          -webkit-transform: translateY(150%); transform: translateY(150%); transition: 0.2s;
                          padding-bottom: 80px;
                          padding-bottom: calc(80px + constant(safe-area-inset-bottom)*0.6 );
                          padding-bottom: calc(80px + env(safe-area-inset-bottom)*0.6 );}
        /*【程式切換】cate-open 展開後*/
        .Fixedfooter.cate-open .Fixedfooter_agree.cate-open { -webkit-transform: translateY(0%); transform: translateY(0%); transition: 0.2s;}
    .Fixedfooter_agree * { box-sizing:border-box;}
    .Fixedfooter_agree:after { }
    .Fixedfooter_agree ul { width:100%; height:auto; margin:0 ; padding:3%; }
    .Fixedfooter_agree ul:after { content:""; display:block; clear:both;}
    .Fixedfooter_agree li { float:left; display:block; margin-left:2%; margin-top:3%; width:32%; height:30px; border-radius:50px; text-align:center; font-weight:800; font-size:14px; line-height:30px; color:#fff; background-color: #1a3c6e; /*background-color: rgba(0,0,0,0.4);*/ }
    .Fixedfooter_agree li:nth-child(3n+1) { margin-left:0; }
    .Fixedfooter_agree li:nth-child(1),
    .Fixedfooter_agree li:nth-child(2),
    .Fixedfooter_agree li:nth-child(3) {margin-top:0; }
    .Fixedfooter_agree li a { color: #fff; display: block; text-decoration: none; }
    .Fixedfooter_agree li.cate-hover { background-color: #DC670D;}
    .Fixedfooter_agree li.cate-hover a { color:#fff;}
      /*特殊狀況--排數(1排2個)
      .Fixedfooter_agree li { width:49%;}
      .Fixedfooter_agree li:nth-child(3n+1) { margin-left:2%; }
      .Fixedfooter_agree li:nth-child(2n+1) { margin-left:0%; }
      .Fixedfooter_agree li.x1 { width:100%;}*/
    /*配色*/
    /*.Fixedfooter .Fixedfooter_box ul { box-shadow: 0 -2px 0 #e6e3df;}*/
    .Fixedfooter .Fixedfooter_box .bg b:before,
    .Fixedfooter .Fixedfooter_box .bg b:after { background: transparent;}
    .Fixedfooter_agree { bottom: -8vw;background-image: repeating-linear-gradient(274deg,  #ae98f4 0, rgb(243 180 222) 109%)!important;}
    .Fixedfooter_agree .trainglelist { border-top-color: #c7f5f1;}
    .Fixedfooter_agree li { background-color: #7b60da;}
    .Fixedfooter_agree li.cate-hover { background-color: #ff6f8b;}
    .Fixedfooter_agree li.cate-hover a { color:#fff;}
    /*202004全站背景*/
    .Fixedfooter_box:after { content: ""; pointer-events: none; z-index: -10; position: absolute; top: 0px; left: 0; display: block; width: 100%; height: 200px; background-image: url(Fixedfooter_bg.png?t=1765247900681); background-size: 100%; background-position: center top;}