@charset "utf-8";
/* CSS Document */

/*回版頭*/
#gotopBtn { display:none !important;} /*把系統手機版原本的Gotop關掉*/
#gotop { display: none; position:fixed; z-index:201; right:0; padding:14px 6px 3px 10px; font:12px/30px Verdana; text-align:center; color:#fff; cursor:pointer; transition: 0.2s; transform: translateX(200%);
        bottom:90px;
        bottom: calc(90px + constant(safe-area-inset-bottom)*0.6 );
        bottom: calc(90px + env(safe-area-inset-bottom)*0.6 );}
#gotop::before { content: ""; position:absolute; top:9px; left:19px; width: 0; height: 0; border: 4px solid #fff; border-color: transparent transparent #fff; }
#gotop::after  { content: ""; z-index:-1; position:absolute; top:50%; left:50%; border-radius:50px 0 0 50px; transform:translate(-50%,-50%); width:44px; height:44px; background-color:rgba(0,0,0,0.8);}
#gotop.cate-open { transform: translateX(0%);}
    /*白色*/
    #gotop { color:#000; }
    #gotop::before { border-color: transparent transparent #000;}
    #gotop::after  { background-color: rgba(255,255,255,0.95);  box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2);}



/*共用--輪播基本設定*/
.Area_swiper { position:relative; margin:0 auto; -webkit-box-sizing:border-box; box-sizing:border-box; overflow: hidden;}
.Area_swiper_box { z-index:1; padding-bottom:25px;}
.Area_swiper_box.Area_swiper_box_relative { position:relative;}
.Area_swiper_box.Area_swiper_box_absolute { position:absolute; top:0; left:0; right:0; bottom:0;}
.Area_swiper_box .swiper-wrapper { margin:0; padding:0; list-style:none; display: flex ; grid-gap: 0 }
.Area_swiper_box .swiper-wrapper:after { content:""; display:block; clear:both; }
.Area_swiper_box .swiper-slide { margin:0; padding:0;}
.Area_swiper_box .pagination { bottom:0px !important; transform:scale(0.7); }
.Area_swiper_box .pagination.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { transform: translateX(-50%) scale(0.7); }
    @media screen and (max-width:767px){
      .Area_swiper { }
      .Area_swiper_box { padding-bottom: 5vw;}
    }
    /*按忸*/
    .button.swiper-button-next,
    .button.swiper-button-prev { outline: none;} 
    @media screen and (max-width:767px){
      .button.swiper-button-next,
      .button.swiper-button-prev { display:none !important;} 
    }
    /*輪播套公版時修正*/
    .Area_swiper_box .PD_layout { position: static;}



/*輪播樣式調整--按鈕/小圓點/進度條*/
.Area_boxstyle_pagination .swiper-pagination-bullet {
  border-radius: 20px;
  width: 6px;
  height: 6px;
  -webkit-transition: opacity .3s, background-color .3s, width .3s;
  transition: opacity .3s, background-color .3s, width .3s;
  -webkit-transition-delay: .3s, .3s, 0s;
          transition-delay: .3s, .3s, 0s;
}
.Area_boxstyle_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 24px;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.Area_boxstyle_pagination .swiper-pagination-bullet {
  background-color: #000;
  opacity: 0.4;
}
.Area_boxstyle_pagination .swiper-pagination-bullet-active {
  background-color: #000;
  opacity: 1;
}
.Area_boxstyle_pagination-white .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.4;
}
.Area_boxstyle_pagination-white .swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}
.Area_swiper_box .pagination {
  bottom: 0px !important;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.Area_swiper_box .pagination.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  -webkit-transform: translateX(-50%) scale(0.7);
          transform: translateX(-50%) scale(0.7);
}


										 



/*PC黏人精-區塊錨點*/
.fixarea_tabbar {z-index:99;position:fixed;right:0;top:200px;border-radius:20px 0 0 20px;width:110px; background-color: rgba(0,0,0,.65); text-align: center;font-family:"微軟正黑體", "Microsoft JhengHei", Arial;
  -webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0);
          transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0);
  -webkit-transform-origin:top right;
          transform-origin:top right;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  }
.fixarea_tabbar.fixarea_off { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0);}
.fixarea_tabbar .fix_box { margin:20px auto 10px; margin-left:10px;}
.fixarea_tabbar ul { margin:0; padding:0; list-style:none;}
.fixarea_tabbar li { position:relative; margin:0; padding:0; font-weight:800; font-size:15px; line-height:20px; }
.fixarea_tabbar a { display:block; text-decoration:none; color:#fff; }
.fixarea_tabbar a:hover{ color:#ffffbe; }
.fixarea_tabbar .cate-hover a { color:#ffffbe; }
.fixarea_tabbar .fix_other { }
.fixarea_tabbar .fix_other li { padding:10px 0; }
.fixarea_tabbar .fix_other li:before { content: ""; display: block; position: absolute; bottom:0; left:18%; width:64%; height:1px; background-color:#fff; opacity: 0.2}
.fixarea_tabbar .fix_other li:last-child::before { display:none;}
.fixarea_tabbar .fix_other li i { display:none; z-index:-1; position: absolute; top:53%; left:-2px; width:12px; height:12px; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); background:url('') no-repeat center center; background-size:100%;}
.fixarea_tabbar .fix_other .cate-hover i { display: block;}
.fixarea_tabbar .fix_footer { position: relative; margin-bottom:10px; margin-left: 10px; font-weight:800; font-size:24px;}
.fixarea_tabbar .fix_footer a { display:block; padding-top:11px; color: #fff;}
.fixarea_tabbar .fix_footer a::before { content: ""; position: absolute; top:6px; left:44%; display:block; width: 0; height: 0; border-width: 0 5px 8px 5px; border-style: solid; border-color:transparent transparent #FFF transparent;}
.fixarea_tabbar .fix_footer a:hover { color:#ffffbe; }    
/*錨點icon--用SVG格式*/
.fixarea_tabbar .fix_other li i { mask-image: url('data:image/svg+xml,%3Csvg%20id%3D%22navlight_icon%22%20data-name%3D%22navlight%20icon%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3E%3C%2Ftitle%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M10%2C0A7.17%2C7.17%2C0%2C0%2C0%2C2.8%2C7.2C2.8%2C12.9%2C10%2C20%2C10%2C20s7.2-7.1%2C7.2-12.8A7.17%2C7.17%2C0%2C0%2C0%2C10%2C0Zm0%2C11a3.8%2C3.8%2C0%2C1%2C1%2C3.8-3.8A3.8%2C3.8%2C0%2C0%2C1%2C10%2C11Z%22%2F%3E%3C%2Fsvg%3E'); background-color: #ffffbe }
.fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #ffffbe transparent;}
                

/*可拖移廣告icon*/
.Area_hammerAD { z-index: 300; display: none; position: fixed; bottom: 0; left: 0; }
.Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD img { width: 100%; height: auto;}
.Area_hammerAD .closeButton a { display:block; cursor:pointer; position:absolute; width:20px; height:20px; border-radius:50%; font:bold 20px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5); text-decoration: none; z-index:2}
  @media screen and (max-width:767px){
    .Area_hammerAD { display: block; width: 22%;}
    .Area_hammerAD .closeButton a { top: 1vw; right: 1vw;}
  }
  @media screen and (min-width:768px){
    .Area_hammerAD { position: fixed; display: block; width: 180px; height: 180px; top: 750px; left: 18px; }
    .Area_hammerAD .closeButton a { top: 0; right: 0; }
  }

.Area_hammerAD2 { z-index: 300; display: none; position: fixed; bottom: 0; right: 0; }
.Area_hammerAD2 .box { position: relative; margin-right: 10px; opacity: 1;}
.Area_hammerAD2 img { width: 100%; height: auto;}
.Area_hammerAD2 .closeButton a { display:block; cursor:pointer; position:absolute; width:20px; height:20px; border-radius:50%; font:bold 20px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5); text-decoration: none; z-index:2}
  @media screen and (max-width:767px){
    .Area_hammerAD2 { display: block; width: 22%;}
    .Area_hammerAD2 .closeButton a { top: 1vw; right: 1vw;}
  }
  @media screen and (min-width:768px){
    .Area_hammerAD2 { display: block; width: 120px; bottom: 230px; }
    .Area_hammerAD2 .closeButton a { top: 0; right: 0; }
  }


  /*選單外掛*/
  .NavArea { z-index:100; position:relative; display: block; margin-bottom:0px; text-align:left; font: 16px/44px "Century Gothic","微軟正黑體","Microsoft JhengHei", Arial, Helvetica;}
  .NavArea * ,
  .NavArea *:before ,
  .NavArea *:after { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box;}
        /*【程式切換】cate-open 展開後*/
        .NavArea.cate-open { z-index:1000 !important;}
    /*選單_黑底*/
    .NavArea .Nav_bg {}
        /*【程式切換】cate-open 展開後*/
        .NavArea.cate-open .Nav_bg {position: fixed; top:0; left:0; display:none; width:100%; height:100%; background-color:rgba(0,0,0,0.8);}
        .NavArea.cate-open .Nav_bg { display: block;}
    /*選單_保留區*/
    .NavArea .Nav_target { display:none; height:44px;}
        /*【程式切換】cate-fixed置頂後*/
        .NavArea.cate-fixed .Nav_target { display:block;}
    /*選單_選單區*/
    .NavArea .Nav_box { position:relative; background-color: rgba(255,255,255,1);}
        /*【程式切換】cate-fixed置頂後*/
        .NavArea.cate-fixed .Nav_box { position: fixed; top:0; width:100%; -position: absolute; -top: expression(eval(document.documentElement.scrollTop)); box-shadow: -1px 0 10px rgba(150,150,150,0.2);}
      /*前置標*/
      .NavArea .Nav_toptext { display:none; z-index:10; position: absolute; top:0; width:90px; height:100%; text-align:center; color:#E40580; letter-spacing:-0.5px;}
      .NavArea .Nav_toptext a { color: inherit; }
      .NavArea .Nav_toptext:after { content: ""; position: absolute;  top:11px;  right:0px; display:block; width:1px; height:22px; background-color:#000 !important;}
          /*【程式切換】cate-open 展開後*/
          .NavArea.cate-open .Nav_toptext { display:none !important;}
              /* 
               * -------------------------------------------
               *【切換樣版】要前置標:[data-toptext="on"]
               * -------------------------------------------
               */
               .NavArea[data-toptext="on"] .Nav_toptext { display: block;}
          /* 
           * -------------------------------------------
           *【切換高亮樣式】[data-light="line"] 高亮: 底線
           * -------------------------------------------
           */
          .NavArea[data-light="line"] .Nav_toptext:after { display:none;} 
          .NavArea[data-light="line"] .Nav_toptext i { z-index:-1; position: absolute; bottom:0%; left:50%; width:100%; height:10%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%); background-color: #E40580;}
          /* 
           * -------------------------------------------
           *【切換高亮樣式】[data-light="box"] 高亮: 色塊
           * -------------------------------------------
           */
          .NavArea[data-light="box"] .Nav_toptext:after { display:none; }
          .NavArea[data-light="box"] .Nav_toptext { margin-left:5px; width:85px;}
          .NavArea[data-light="box"] .Nav_toptext,
          .NavArea[data-light="box"] .Nav_toptext a { color:#fff;}
          .NavArea[data-light="box"] .Nav_toptext i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:44px; width:100%; height:70%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); border: 1px solid #F2235E !important; background-color:#F2235E !important;}
          /* 
           * -------------------------------------------
           *【切換高亮樣式】[data-light="icon"] 高亮: 圖標
           * -------------------------------------------
           */
          .NavArea[data-light="icon"] .Nav_toptext:after { display:none; }
          .NavArea[data-light="icon"] .Nav_toptext i { z-index:-1; position: absolute; top:50%; left:0; width:12px; height:12px; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Im5hdmxpZ2h0X2ljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFNDAwODAiIGQ9Ik0xMCwwQzYuMDIxLDAsMi43OTcsMy4yMjUsMi43OTcsNy4yMDNDMi43OTcsMTIuOTA2LDEwLDIwLDEwLDIwczcuMjAzLTcuMDk0LDcuMjAzLTEyLjc5Nw0KCUMxNy4yMDMsMy4yMjUsMTMuOTc5LDAsMTAsMHogTTEwLDExLjAwNWMtMi4xLDAtMy44MDMtMS43MDMtMy44MDMtMy44MDJDNi4xOTcsNS4xMDMsNy45LDMuNCwxMCwzLjRjMi4xLDAsMy44MDIsMS43MDMsMy44MDIsMy44MDMNCglTMTIuMSwxMS4wMDUsMTAsMTEuMDA1eiIvPg0KPC9zdmc+DQo=') no-repeat center center; background-size:100%;}
      /*按鈕區*/
      .NavArea .Nav_Btn { z-index:1; position:relative;}
      .NavArea .Nav_Btn b { display:none; padding:0 10px; opacity:0.75;}
      .NavArea .Nav_Btn b:before { content:attr(data-opentext); color:#000; }
      .NavArea .Nav_Btn i { position: absolute; top:0; right:0; display:block; width:44px; height:44px; cursor:pointer; /*box-shadow:-1px 0 3px rgba(150,150,150,0.1);*/ }
      .NavArea .Nav_Btn i:before { content: ""; position:absolute; top:50%; left:50%; display:block; border:1px solid #000; border-width:0 1px 1px 0; width:20%; height:20%; -webkit-transform:translate(-50%,-50%) rotate(45deg); transform:translate(-50%,-70%) rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
          /*【程式切換】cate-open 展開後*/
          .NavArea.cate-open .Nav_Btn {}
          .NavArea.cate-open .Nav_Btn b { display:block; height:44px;}
          .NavArea.cate-open .Nav_Btn i {}
          .NavArea.cate-open .Nav_Btn i:before { -webkit-transform:translate(-50%,-50%) rotate(225deg); transform:translate(-50%,-30%) rotate(225deg);}
              /* 
               * -------------------------------------------
               *【切換樣版】不要展開按鈕:[data-Btn="off"]
               * -------------------------------------------
               */
               .NavArea[data-Btn="off"] .Nav_Btn { display:none;}
      /*選單*/
      .NavArea .Nav {  position:relative; margin:0; padding:0; overflow-y: hidden; width: calc(100% - 44px); height:44px; white-space: nowrap; -webkit-transition:0s; -moz-transition:0s; -ms-transition:0s; -o-transition:0s; transition:0s;
               -webkit-overflow-scrolling: touch;
                -moz-overflow-scrolling: touch; 
                 -ms-overflow-scrolling: touch; 
                  -o-overflow-scrolling: touch; 
                   overflow-scrolling: touch;}
          /*【程式切換】cate-open 展開後*/
          .NavArea.cate-open .Nav { overflow-y:initial; margin:0 !important; width:100% !important; height: inherit;}
              /* 
               * -------------------------------------------
               *【切換樣版】不要展開按鈕:[data-Btn="off"]
               * -------------------------------------------
               */
               .NavArea[data-Btn="off"] .Nav { width:100%;}
              /* 
               * -------------------------------------------
               *【切換樣版】要前置標:[data-toptext="on"]
               * -------------------------------------------
               */
               .NavArea[data-toptext="on"] .Nav { margin-left:90px; width: calc(100% - 134px);}
              /* 
               * -------------------------------------------
               *【切換樣版】不要展開按鈕:[data-Btn="off"]要前置標:[data-toptext="on"]
               * -------------------------------------------
               */
               .NavArea[data-Btn="off"][data-toptext="on"] .Nav { margin-left:90px; width: calc(100% - 90px);}
      /*選單內容*/
      .NavArea .Nav ul { position:relative; list-style:none outside none; white-space: nowrap;}
      .NavArea .Nav li,
      .NavArea .Nav li > span,
      .NavArea .Nav li > b { float:none; z-index:10; position:relative; display:inline-block; padding:0; overflow:hidden; width:auto; height:44px; font-weight:inherit; text-align:center;}
      .NavArea .Nav li > b a:after { content: ""; position:relative; top:3px; left:5px; display:inline-block; border:1px solid #000; border-width:0 1px 1px 0; width:7.5px; height:7.5px; -webkit-transform:translate(-50%,-50%) rotate(-45deg); transform:translate(-50%,-70%) rotate(-45deg);}
      .NavArea .Nav a { display:block;  position:relative; padding:0 12px; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -ms-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); transform:translate3d(0,0,0); color:inherit; text-decoration:none;}
          /*【程式切換】cate-hover高亮*/
          .NavArea .Nav .cate-hover {}
          /*【程式切換】cate-open 展開後*/
          .NavArea.cate-open .Nav ul { display:block; overflow:hidden; width:100%; padding:1%; white-space: inherit;}
          .NavArea.cate-open .Nav li,
          .NavArea.cate-open .Nav li > span { float:left; padding:0 1%; width:33.3% !important;}
          .NavArea.cate-open .Nav li > b { float:left; width:100%; text-align:left;}
          .NavArea.cate-open .Nav li > b a:after { display:none;}
              /* 
               * -------------------------------------------
               *【切換高亮樣式】[data-light="line"] 高亮: 底線
               * -------------------------------------------
               */
              .NavArea[data-light="line"] .Nav li a i,
              .NavArea[data-light="line"] .Nav span a i { z-index:-1; position: absolute; bottom:-2%; left:50%; width:100%; height:10%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%);}
                  /*【程式切換】cate-hover高亮*/
                  .NavArea[data-light="line"] .Nav .cate-hover a { color:#E40580;}
                  .NavArea[data-light="line"] .Nav .cate-hover i {background-color: #E40580;}
                  /*【程式切換】cate-open 展開後*/
                  .NavArea[data-light="line"].cate-open .Nav li a i,
                  .NavArea[data-light="line"].cate-open .Nav li > span a i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:44px;width:90%; height:70%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); background-color:#F6F7F9 ;}
              /* 
               * -------------------------------------------
               *【切換高亮樣式】[data-light="box"] 高亮: 色塊
               * -------------------------------------------
               */
              .NavArea[data-light="box"] .Nav ul { padding-left:10px; }
              .NavArea[data-light="box"] .Nav li a i,
              .NavArea[data-light="box"] .Nav li > span a i { z-index:-1; position: absolute; top:50%; left:50%; border-radius:44px; width:100%; height:70%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
                  /*【程式切換】cate-hover高亮*/
                  .NavArea[data-light="box"] .Nav .cate-hover a { color:#fff;}
                  .NavArea[data-light="box"] .Nav .cate-hover i { display:block; border: 1px solid #F2235E !important; background-color:#F2235E !important;}
                  /*【程式切換】cate-open 展開後*/
                  .NavArea[data-light="box"].cate-open .Nav ul { padding-left:0; }
                  .NavArea[data-light="box"].cate-open .Nav li a i { width:90%; background-color:#F6F7F9;}
              /* 
               * -------------------------------------------
               *【切換高亮樣式】[data-light="icon"] 高亮: 圖標
               * -------------------------------------------
               */
              .NavArea[data-light="icon"] .Nav ul { padding-left:10px; }
                  /*【程式切換】cate-hover高亮*/
                  .NavArea[data-light="icon"] .Nav .cate-hover a { color:#E40580;}
                  .NavArea[data-light="icon"] .Nav .cate-hover i { z-index:-1; position: absolute; top:50%; left:0; width:12px; height:12px; -webkit-transform:translate(0%,-50%); transform:translate(0%,-50%); background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Im5hdmxpZ2h0X2ljb24iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNFNDAwODAiIGQ9Ik0xMCwwQzYuMDIxLDAsMi43OTcsMy4yMjUsMi43OTcsNy4yMDNDMi43OTcsMTIuOTA2LDEwLDIwLDEwLDIwczcuMjAzLTcuMDk0LDcuMjAzLTEyLjc5Nw0KCUMxNy4yMDMsMy4yMjUsMTMuOTc5LDAsMTAsMHogTTEwLDExLjAwNWMtMi4xLDAtMy44MDMtMS43MDMtMy44MDMtMy44MDJDNi4xOTcsNS4xMDMsNy45LDMuNCwxMCwzLjRjMi4xLDAsMy44MDIsMS43MDMsMy44MDIsMy44MDMNCglTMTIuMSwxMS4wMDUsMTAsMTEuMDA1eiIvPg0KPC9zdmc+DQo=') no-repeat center center; background-size:100%;}
                  /*【程式切換】cate-open 展開後*/
                  .NavArea[data-light="icon"].cate-open .Nav ul { padding-left: 0; }
  
  
  /*2019.01.02--新增高亮選單滑動的色塊*/
  .NavArea .Nav-slidebg { position:absolute; left:0; top:0; width:100%; height:0;}
  .NavArea .Nav-slidebg.cate-ing { -webkit-transition:all 300ms ease; transition:all 300ms ease;}
      /*【程式切換】cate-open 展開後*/
      .NavArea.cate-open .Nav-slidebg { display:none;}
  
  
  /*2018.11.23新增垂直樣式*/
  .NavArea_vertical { position:absolute; left:0; text-align:center; font-size:13px; line-height:16px;}
    /*選單_保留區*/
    .NavArea_vertical .Nav_target {height:0;}
    /*選單_選單區*/
    .NavArea_vertical .Nav_box { width:44px; height: calc(100vh - 50px); background-color: transparent;
            height: calc(100vh - 50px - constant(safe-area-inset-bottom) );
            height: calc(100vh - 50px - env(safe-area-inset-bottom) ); }
          /*【程式切換】cate-fixed置頂後*/
          .NavArea_vertical.cate-fixed .Nav_box { left:0; width:44px;}
      /*選單*/
      .NavArea_vertical .Nav { z-index:2; overflow: inherit; overflow-x:hidden; width:100%; height:100%; white-space: inherit; color:#fff;}
      /*按鈕區*/
      .NavArea_vertical .Nav_Btn { display:none; z-index:1; position:relative;}
      .NavArea_vertical .Nav_Btn li > b { display:none; padding:0 10px; opacity:0.75;}
      .NavArea_vertical .Nav_Btn li > b:before { content:attr(data-opentext); color:#fff; }
      .NavArea_vertical .Nav_Btn i { position: absolute; top:0; right:0; display:block; width:44px; height:44px; cursor:pointer; /*box-shadow:-1px 0 3px rgba(150,150,150,0.1);*/ }
      .NavArea_vertical .Nav_Btn i:before { content: ""; position:absolute; top:50%; left:50%; display:block; border:1px solid #fff; border-width:0 1px 1px 0; width:20%; height:20%; -webkit-transform:translate(-50%,-50%) rotate(45deg); transform:translate(-50%,-70%) rotate(45deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
      /*選單內容*/
      .NavArea_vertical .Nav ul { padding-left:0  !important; white-space: inherit;}
      .NavArea_vertical .Nav li,
      .NavArea_vertical .Nav li > span,
      .NavArea_vertical .Nav li > b { display:block;; height: auto;}
      .NavArea_vertical .Nav a { padding:15px 8px;}
      /*2019.01.02--新增高亮選單滑動的色塊*/
      .NavArea_vertical .Nav-slidebg { border-left: 2px solid #fff; background-color:#660e1d;}
  
  
  /*只顯示在手機版*/
  @media screen and (min-width:768px){
    .NavArea { display:none; width:960px;}
  }