@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:#000; cursor:pointer; transition: 0.2s; transform: translateX(200%);
        bottom:90px;
        bottom: calc(120px + constant(safe-area-inset-bottom)*0.6 );
        bottom: calc(120px + 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);}


/*訂閱說明 展開選單*/
.QAbox .moreButton { width:100%;   }
.QAbox .moreButton .title { font:20px/1.7em '微軟正黑體'; letter-spacing: 0; text-align:left; margin-bottom:10px; display:inline-block; color: #000;}
.QAbox .moreButton dl {}
.QAbox .moreButton dt { cursor:pointer; }
.QAbox .moreButton dd { display: none; margin:0; padding:3%; font:18px/1.8em '微軟正黑體', 'Century Gothic'; text-align:left; color:#2c2c2c; background-color:#ffffff; }
.QAbox .moreButton .menu_btn { position: relative; display: block; height:50px; width: 100%; font:bold 21px/50px 微軟正黑體; color: #ffffff; text-align: left; box-sizing: border-box; padding-left: 2% }
.QAbox .moreButton .up::after{ content: ""; position: absolute; top:45%; right:2%; width: 0; height: 0; border-style: solid; border-width: 0.6em 0.4em 0 0.4em; border-color: #ffffff transparent transparent transparent;transform:rotate(180deg);}
.QAbox .moreButton .down::after { content: ""; position: absolute; top:45%; right:2%; width: 0; height: 0; border-style: solid; border-width:0.6em 0.4em 0 0.4em; border-color: #ffffff transparent transparent transparent;}
.QAbox .moreButton .up img{ width:100%; height:auto }
.QAbox .moreButton .down img{ width:100%; height:auto}
.QAbox .moreButtontag { display:none!important;}

	@media screen and (max-width:767px){

	.QAbox .moreButton { width:100%; margin:1vw auto; }
    .QAbox .moreButton .title {font:16px/1.7em '微軟正黑體'; letter-spacing: 0; text-align:left; margin-bottom:10px; display:inline-block}
    .QAbox .moreButton dl {}
    .QAbox .moreButton dt {cursor:pointer; }
    .QAbox .moreButton dd {display: none; margin:0; padding:3%; font:16px/1.8em '微軟正黑體', 'Century Gothic'; text-align:left; color:#2c2c2c; background-color:#fff;}
    .QAbox .moreButton .menu_btn { position: relative; display: block; height:2em; font:bold 16px/2em 微軟正黑體;color: #ffffff;text-align:left; padding: 0 2% ; }
/*    .moreButton .up::after{content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;transform:rotate(180deg);}*/
/*    .moreButton .down::after {content: ""; position: absolute; top:44%; right:10vw; width: 0; height: 0; border-style: solid; border-width: 3vw 2vw 0 2vw; border-color: #fff transparent transparent transparent;}*/
	.QAbox .moreButton .up img{ width:100%; height:auto }
    .QAbox .moreButton .down img{ width:100%; height:auto}
    .QAbox .moreButtontag { display:none!important;}
	}




/*浮層嘿嘿*/
.blackBox {
    clear: both;
    display: none;
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(34,34,34,0.75);
}

.blackBox * {
    font-family: "微軟正黑體", "Microsoft JhengHei", Arial;
    box-sizing: border-box;
}

.blackBox a {
    text-decoration: none;
}

.blackBox_play {
    z-index: 99;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34,34,34,0.75);
}

/*浮層基本*/
.blackBox .box .button {
    border-top: 1px solid #d6d6d6;
    text-align: center;
    font-size: 1.25rem;
    line-height: 3.5rem;
    font-weight: bold;
}

.blackBox .box .button a {
    text-decoration: none;
}

.blackBox .box .but-close {
    clear: both;
    width: 100%;
}

.blackBox .box .but-close a {
    display: block;
    color: #333;
}

.blackBox .box h3 span.close {
    position: absolute;
    top: 6px;
    right: 5px;
    display: block;
    border: 2px solid #fff;
    border-radius: 5px;
    width: 63px;
    height: 33px;
    font-size: 1rem;
    line-height: 2rem;
    text-align: center;
}

.blackBox .box h3 span.close a {
    display: inline-block;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}

/*IT用*/
.blackBox_IT {
    display: block;
    z-index: inherit;
    position: static;
    width: auto;
    height: auto;
    background: none;
}

/*點黑區關閉*/
.blackBox .Boxclose { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;}


/*通知浮層*/
.agreeArea {
    z-index: 1;
    position: relative;
    top: 10% !important;
    margin: 0 auto 30px;
    width: 94%;
    max-width: 700px;
    font-family: "Century Gothic", "微軟正黑體", sans-serif;
    /*text-align:justify; word-break:break-all;*/
    ; text-align: justify;
}

.agreeArea img {
    width: 100%;
    height: auto;
}

.agreeArea .box {
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    overflow: hidden;
}

.agreeArea .box .txtArea {
    height: 600px;
    overflow: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.agreeArea .box h3 {
    margin: 0;
    padding: 0;
    height: 3rem;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 3rem;
    text-align: center;
    color: #fff;
    /*background-color: #EA27C2;*/
    background-color: #ff6a94;
}

.agreeArea .box p {
    margin: 10px auto;
    margin-top: 1rem;
    padding: 0 0 0 24px;
    font-size: 1em;
    text-align: left;
    line-height: 1.2em;
    color: #000;
}

.agreeArea .box p b {
    display: block;
    padding-bottom: 0;
}

.agreeArea .box .qrcodeimg {
    text-align: center;
}

.agreeArea .box .qrcodeimg a {
    color: #006afe;
}

.agreeArea .box .qrcodeimg img {
    width: 100%;
    height: auto;
}

.agreeArea .box .agree_table table {
    margin: 20px auto;
    border-collapse: collapse;
    width: 90%;
    text-align: center;
}

.agreeArea .box .agree_table th {
    padding: 5px;
    border: 1px solid #CCC;
    width: 33%;
    font-size: 0.9em;
}

.agreeArea .box .agree_table td {
    padding: 5px;
    border: 1px solid #CCC;
    font-size: 0.9em;
}

.agreeArea .box .agree_table th a {
    color: #c70026;
    text-decoration: underline;
}

.agreeArea .box .xxx {
    display: block;
    width: 80%;
    height: 40px;
    font-size: 1.5em;
    text-align: center;
    line-height: 40px;
    color: #FFF;
    background-color: #7048A0;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 10px;
    font-weight: bold;
    border-radius: 10px;
}

.agreeArea .box ul, .agreeArea .box ol {
    margin: 0;
}

.agreeArea .box li {
    margin: 0 20px 10px 0px;
    font-size: 0.9em;
}

.agreeArea .box ul li {
    font-size: 1em;
}

.agreeArea .box table {
    margin: 0 5%;
    width: 90%;
    border-collapse: collapse;
}

.agreeArea .box th {
    padding: 5px;
    border: 1px solid #CCC;
    background: #eee;
    font-size: 0.8em;
}

.agreeArea .box td {
    padding: 5px;
    border: 1px solid #CCC;
    font-size: 0.8em;
    vertical-align: top;
}

.agreeArea .box table ul, .agreeArea .box table ol {
    padding: 0 0 0 20px;
}

.agreeArea .box table li {
    margin: 0 0 10px 0px;
}

/*浮層輪播*/
.agreeArea .box_pic {
    padding: 5% 5% 0;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.agreeArea .box_pic .pic_swiper ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.agreeArea .box_pic .pic_swiper li {
    margin: 0;
    padding: 0;
}

/*商品大圖*/
.agreeArea .box_pic .box_picimg {
    position: relative;
    overflow: hidden;
}

.agreeArea .box_pic .box_picimg .pagination {
    padding: 0 10px;
    text-align: right;
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    -webkit-transform: translateZ(0) scale(0.8);
    transform: translateZ(0) scale(0.8);
}

.agreeArea .box_pic .box_picimg .pagination span {
    display: inline-block;
    padding: 0 10px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.7);
}

/*商品列表*/
.agreeArea .box_pic .box_piclist {
    padding-top: 2%;
}

.agreeArea .box_pic .box_piclist li {
    background-color: #000;
    cursor: pointer;
}

.agreeArea .box_pic .box_piclist li img {
    opacity: 0.75;
}

.agreeArea .box_pic .box_piclist li.cate-active img {
    opacity: 1;
}

/*樣式--圖片放大*/
.agree_piczoom .Boxclose {
    cursor: pointer;
}

.agree_piczoom .agreeArea {
    pointer-events: none;
}

.agree_piczoom .box {
    position: relative;
    top: -8vh;
    overflow: visible;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: none;
}

.agree_piczoom .box img {
    width: 100%;
    height: auto;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/*關閉btn*/
.agree_piczoom .box .but-close {
    position: fixed;
    top: 10px;
    right: 10px;
    width: auto;
}

.agree_piczoom .box .but-close a {
    display: block;
}

.agree_piczoom .box .but-close a i {
    display: inline-block;
    position: relative;
    top: 3px;
    left: 0;
    width: 44px;
    height: 44px;
}

.agree_piczoom .box .but-close a i {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.agree_piczoom .box .but-close a i::before, .agree_piczoom .box .but-close a i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6%;
    background-color: white;
}

.agree_piczoom .box .but-close a i::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.agree_piczoom .box .but-close a i::after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

/*PD介紹浮層修改*/
.PDagree .box h3 span.close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 24px;
    height: 24px;
    background: url(xx.png?t=1750674515105) no-repeat ;
    background-size: 100%;
    border: none
}

.PDagree .box h3 {
    height: auto;
    background-color: #fafafa;
    /*border-bottom: solid 1px #999;*/
}

.PDagree .box .txtArea {
    padding: 0;
}

/*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:#e6dae4; }
.fixarea_tabbar .cate-hover a {color: #e6dae4;}
.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:#e6dae4; }    
    /*錨點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: #e6dae4;}
    .fixarea_tabbar .fix_footer:hover a::before { border-color: transparent transparent #e6dae4 transparent;}
	


/*Phone置頂滑動選單*/
.NavArea_tabbar {
    margin: 4vw auto 0vw;
    width: 94%;
    opacity: 0.9
}

.NavArea_tabbar.cate-fixed {
    width: 100%;
    opacity: 1
}

.NavArea_tabbar .Nav_box {
    border-radius: 8px;
    box-shadow: -1px 0 10px rgba(150,150,150,0.2);
}

.NavArea_tabbar .Nav li {
    overflow: visible;
}

/*.NavArea_tabbar .Nav a { display:inline-block;}*/
.NavArea_tabbar.cate-fixed .Nav_box {
    border-radius: 0;
    background-color: rgba(255,255,255,0.92);
    box-shadow: -1px 0 10px rgba(150,150,150,0.2);
}

/*.NavArea.cate-open .Nav li, .NavArea.cate-open .Nav span { width: 50%!important;}*/
/*.NavArea.cate-open .Nav ul { padding: 1%;}*/
/*.NavArea .Nav li, .NavArea.cate-open .Nav span { width: 48%!important;}*/