@charset "utf-8";
/* --------------------------------------
 * pageGameRWDLayout RWD分頁用 2022/01/17 11:05
 * -------------------------------------- */
/* .articleList img.lazy_off { background-image: none!important;} */

/*基本
html { background-color:#8b1f26; }
body { background-image:url(bgrepeat.jpg?t=1751882578031); background-repeat: repeat; background-position: left 45px;}
  @media screen and (max-width:767px){
    body {background-image:url(m_bgrepeat.jpg?t=1751882578031); background-repeat: repeat-y; background-position: center top; background-size: 100%; }
  }
*/

.WRAPPER { overflow: hidden;}

/*PC選單*/
/* .cantantBase1 { display: none;}
.cantantBase2 { display: block;} */

/*預載vue框架首屏骨架*/
.Area_SkeletonScreen { opacity: 1; pointer-events: none; z-index: -99; position: relative; transition: opacity 0.4s;}
    .v-SkeletonScreen .Area_SkeletonScreen { z-index: 10; opacity: 1; display: block; }  
    .v-loaded         .Area_SkeletonScreen { z-index: 10; opacity: 0; display: block; position: absolute; left: 50%; transform: translateX(-50%); transition: opacity 0.4s;}  
    /* .v-loaded .Area_SkeletonScreen { opacity: 1; mix-blend-mode: luminosity; }   */
    .Area_SkeletonScreen > .box { margin: 0 !important; padding: 0 !important;}
    .Area_SkeletonScreen .SkeletonScreen { position: relative; margin: 0 auto;}
    .Area_SkeletonScreen .SkeletonScreen .box { position: relative; width: 100%; height: 0; padding-bottom: 200%;}
    .Area_SkeletonScreen .SkeletonScreen svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
    .Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop { 
      mix-blend-mode: soft-light;  
      stop-color:hsl(5, 100%, 85%); stop-opacity:0.5;
      animation: skeleton-loading 0.5s linear infinite alternate;
    }
    .Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(1) { animation-delay: -4s;}
    .Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(2) { animation-delay: -0.3s;}
    .Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(3) { animation-delay: -0.2s;}
    .Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(4) { animation-delay: -0.1s;}
    .Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(5) { animation-delay: 0s;}
        @keyframes skeleton-loading { 
          0%   { stop-color:hsl(5, 100%, 85%); stop-opacity:0.5;}
          100% { stop-color:hsl(5,  20%, 95%); stop-opacity:0.5;}
        }
        @media screen and (min-width:768px){
          .Area_SkeletonScreen .SkeletonScreen { width: 100%;}
        }
        @media screen and (max-width:767px){
          .Area_SkeletonScreen .SkeletonScreen { width: 100%;}
        }

/* --------------------------------------
 * Page 機制頁共用樣式
 * -------------------------------------- */ 
.Area_GameStyle { color: #fff; font-family: "Century Gothic","Microsoft JhengHei"; font-size: 16px;}
.Area_GameStyle h3 { margin: 0; padding: 0;}
.Area_GameStyle strong { color: #fff;}
.Area_GameStyle b      { color: #000;}
.Area_GameStyle small  { font-size: 0.875em;}
.Area_GameStyle .money { position: relative; top: -0.05em; font-size: 0.8em;}
.Area_GameStyle .Price { font-size: 1.15em; font-weight: 800;}
.Area_GameStyle .box_list { color: #494949;}
    @media screen and (min-width:768px){
      .Area_GameStyle h3 { font-size: 2.4em;}
      .Area_GameStyle .box_txt { font-size: 1.5em; padding-bottom: 1em;}
    }
    @media screen and (max-width:767px){
      .Area_GameStyle h3 { font-size: 1.15em; line-height: 1.5;}
      .Area_GameStyle .box_txt {font-size: 0.9em; padding-bottom: 1em;}
    }
    /*獲得*/
    .Area_GameStyle .earn { display: inline-block;width: 42%; margin: 0.5em auto; padding: 0.5em 1em 0.7em; border-radius: 0.45em; color: #d22000;  background: #ffe1bd;
      /*box-shadow: inset -0.1em -0.1em 0.3em rgba(0,0,0,0.5);*/}
    .Area_GameStyle .earn .Price { font-size: 1.5em; }
        @media screen and (min-width:768px){
          .Area_GameStyle .earn { font-size: 2.2em;}
        }
        @media screen and (max-width:767px){
          .Area_GameStyle .earn { font-size: 1em; width: 50%; }
        }
    /*btn*/
    .Area_GameStyle .btn { margin: 1em auto; width: 32%; }
    /*判斷顯示隱藏*/
    .Area_GameStyle .is_if span { display: block;}
    .Area_GameStyle .is_if .end { display: none;}
    .Area_GameStyle .is_if .on  { display: none;}
        /*切換*/
        .Area_GameStyle .is_end .off { display: none;}
        .Area_GameStyle .is_end .end { display: block;}
        .Area_GameStyle .is_on  .off { display: none;}
        .Area_GameStyle .is_on  .on  { display: block;}
    /*表格*/
    .Area_GameStyle .box_table { margin: 0 auto 1em; }
    .Area_GameStyle .box_table table { margin: 0 auto ; border-radius: 10px; overflow: hidden; border-collapse: collapse ; width: 100%; /*box-shadow: 0 0.1em 0.25em rgba(7,31,28,1)*/}
    .Area_GameStyle .box_table table { font-weight: 300; font-size: 1em; text-align: center; line-height: 1.2;}
    .Area_GameStyle .box_table th { padding: 0.6em 0.4em; color: #5a3c17; background-color:#ffe1bd; }
    .Area_GameStyle .box_table td { padding: 0.6em 0.4em;  border-right: solid 0.05em #665ca033; background-color: #fff;}
    .Area_GameStyle .box_table tr:first-child td { border-top: none;}
    .Area_GameStyle .box_table th:last-child { border-left: solid 0.05em  rgba(102,92,160,.2); }
    .Area_GameStyle .box_table tr td:first-child { border-left: none; color: #3c4b6c ;}
    .Area_GameStyle .box_table tr td:last-child { border-right: none; color: #f74a6d ;}
    .Area_GameStyle .box_table tr { border-bottom: solid 0.05em rgba(102,92,160,.2); }
    .Area_GameStyle .box_table tr:first-child,
    .Area_GameStyle .box_table tr:last-child { border-bottom: none; }

    .Area_GameStyle .box_table td p { margin: 0; padding: 0;}
    .Area_GameStyle .box_table td a { color: #942a0e;}
        @media screen and (min-width:768px){
          .Area_GameStyle .box_table table { font-size: 1.5em; }
        }
        @media screen and (max-width:767px){
          .Area_GameStyle .box_table table { font-size: 0.875em; border-radius: .5em;}
        }



/*活動說明*/
.Area_GameStyle .box_list { text-align: justify;}
.Area_GameStyle .box_list h3 { font-size: 1.25em; margin-bottom: 0.75em; padding-left: 0.5em; }
.Area_GameStyle .box_list ol { margin: 0; padding: 0 1em 0.5em 2em; /*padding-left: 1em;*/}
.Area_GameStyle .box_list ul { margin: 0; padding: 0 1em 0.5em 1em; list-style: none;}
.Area_GameStyle .box_list li { margin: 0; padding: 0; margin-bottom: 0.75em;}
.Area_GameStyle .box_list li img { margin: 0.2em 0; width: 100%; /*max-width: 480px; box-shadow: 0em 0.3em 1.5em rgba(0,0,0,0.1);*/}
    @media screen and (min-width:768px){
      .Area_GameStyle .box_list { font-size: 1.5em; padding: 0%;}
    }
    @media screen and (max-width:767px){
      .Area_GameStyle .box_list { font-size: 0.875em; padding: 0;}
    }
    /*li樣式(自定樣式) (1) (2) (3) */
    .Area_GameStyle .box_list .counter_increment_num { list-style:none;}
    .Area_GameStyle .box_list .counter_increment_num li { counter-increment: num; text-indent:-1.5rem;}
    .Area_GameStyle .box_list .counter_increment_num li:before { content: "(" counter(num) ") " ;}


/*登記區塊*/
.Area_grabgift .box_grabgift { position: relative; margin: 0.5em auto; width: 88%;}
    /*贈品介紹*/
    .Area_grabgift .box_grabgift .grabgift_img { position: relative;}
    .Area_grabgift .box_grabgift .grabgift_img img { width: 100%; height: auto; filter: drop-shadow(0.3em 0.3em 0.2em rgba(231,66,61,0.4));}
    .Area_grabgift .box_grabgift .grabgift_img .grabgift_img_more { z-index: 1; position: absolute; top: 9%; left: 5%; width: 42%; height: 0; padding-bottom: 47%;}
    .Area_grabgift .box_grabgift .grabgift_img .grabgift_img_more a { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
    /*按鈕*/
    .Area_grabgift .box_grabgift .grabgift_btn { position: absolute; top: 53%; left: 50%; width: 35%; }
    /*文案*/
    .Area_grabgift .box_grabgift .grabgift_txt   { position: absolute; left: 49.5%; letter-spacing: -0.04rem; text-align: left;}
    .Area_grabgift .box_grabgift .grabgift_cpNum { top: 75%; color: #fff;}
    .Area_grabgift .box_grabgift .grabgift_cpNum span { letter-spacing: 0;}
    .Area_grabgift .box_grabgift .grabgift_time  { top: 84.5%; color: #942a0e;}
        @media screen and (min-width:768px){
          .Area_grabgift .box_grabgift .grabgift_txt { font-size: 28px;}
        } 
        @media screen and (max-width:767px){
          .Area_grabgift .box_grabgift .grabgift_txt { font-size: 3vw;}
        } 
    /*活動說明*/
    .Area_grabgift .box_list { margin-top: 1em;}
    .Area_grabgift .box_list a { display: inline; text-decoration: underline; color: #942a0e;}


/*浮層--加價購商品介紹*/
.agreeArea .box {border-radius: 10px;background-color: #fff; overflow: hidden;-webkit-box-shadow: none;}
.agreeArea .box_title { padding: 5% 5% 0; font-weight: 800; line-height: 1; text-align: center;}
.agreeArea .box_title b { position: relative; display: block;}
.agreeArea .box_title span { z-index: 1; position: relative; display: inline-block; padding: 0 0.5em; background-color: #fff;}
.agreeArea .box_title b:before { content: ""; position: absolute; bottom: -0.55em; display: block; width: 100%; height: 1px; background-color: #000;}
.agreeArea .box_title img { width: 35%;}
.agreeArea .box_sub { text-align: center;}
.agreeArea .box_derails { padding: 0 5%; font-weight: 800;}
.agreeArea .box_derails dt { margin: 0; margin-top: 0.8em; padding: 0.5em 0; border-top: 1px solid #000; text-align: center;}
.agreeArea .box_derails dd { margin: 0; padding: 0; color: #9d9d9d; line-height: 1.2;}
.agreeArea .box_derails dd ul { margin: 0; padding: 0; padding-left: 2em;}
.agreeArea .box_derails dd li img { margin: 0.2em 0; width: 70%; max-width: 480px; box-shadow: 0em 0.3em 1.5em rgba(0,0,0,0.1);}
.agreeArea .box_derails .txt_into { color: #5a5958;}
.agreeArea .box_derails .txt_spec ul { padding-left: 1em; list-style: none;}
.agreeArea .box_derails .txt_note ul { list-style: decimal; }
        @media screen and (min-width:768px){
          .agreeArea .box_title { font-size: 40px; }
          .agreeArea .box_title span { font-size: 34px;}
		      .agreeArea .box_sub { font-size: 18px; line-height: 30px; margin: 22px 0 10px; padding: 0 5%}
          .agreeArea .box_derails { font-size: 30px;}
          .agreeArea .box_derails dd { font-size: 26px;}
        }
        @media screen and (max-width:767px){
          .agreeArea .box_title { font-size: 1.2rem; }
          .agreeArea .box_title span { font-size: 1.25rem;}
		      .agreeArea .box_sub { font-size: 1rem; line-height: 1.5rem; margin: 0.5rem 0 0.5rem; padding: 0 10% ;}
          .agreeArea .box_derails { font-size: 1.25rem;}
          .agreeArea .box_derails dd { font-size: 1.1rem;}
        }

    
/*特殊--1區有2個登記btn區塊*/
/* .Area_grabgift .box_grabgift .box_btn_ { position: absolute; left: 44%; width: 60%; }
.Area_grabgift .box_grabgift .box_btn_ .btn { position: relative; width: 62%;}
.Area_grabgift .box_grabgift .box_btn_ .txt_cpNum { position: absolute; top: 10%; left: 64%; width: 45%; font-size: 28px; font-weight: 300; line-height: 2; color: #323232; letter-spacing: -0.01rem; text-align: left;}
.Area_grabgift .box_grabgift .box_btn_1 { top: 68%;}
.Area_grabgift .box_grabgift .box_btn_2 { top: 77%;}
    @media screen and (max-width:767px){
      .Area_grabgift .box_grabgift .box_btn_ .txt_cpNum { font-size: 2.8vw; transform: scale(0.85); transform-origin: left center;}
    } */