@charset "big5";
@import url('//fonts.googleapis.com/earlyaccess/notosanstc.css');
/* 粽情粽禮粽意你 */
/* color: #155b31, #e5700e, #faa23b; */
/* color: #7bb486, #8ecca2, #bfdfb2, #c8f1ec, #dbf3e9, #bdede9, #8fe0db, #86cec8; */
/* CSS Document */
body {
    /* min-width: 1200px; */
    color: #333;
    font: 15px/1.6em 'Century Gothic', Arial, 'Noto Sans TC', 'Microsoft JhengHei', 'sans-serif';
    background-color: #bdddc8;
    /* background: url('../images/layout.jpg') no-repeat center 0; */ /* 115px */
}
a { 
    text-decoration: none;
    display: inline-block;
}
:focus { outline: none; }
i { font-style: normal; }
* { box-sizing: border-box; }
.header, .footer { 
    text-align: center; 
    background: #fff;
    position: relative;
    z-index: 22;
}
.display_pc { display: block; }
.display_m { display: none; }

.main_wrapper {
    margin: auto; 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    background: url('../images/rule_kv.jpg') no-repeat center top, url('../images/bg.jpg') repeat center top #bdddc8;
}

.main_wrapper h1 {
    position: relative;
    z-index: 2;
    /* display: table; */ display: none;
    background: #bdddc8;
    color: #fff;
    border-radius: 10px;
    border: 3px solid #fff;
    font-size: 27px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    padding: 10px 40px;
    margin: 30px auto;
}

.kv_wrapper {
    overflow: hidden;
    position: relative;
    /* border-bottom: 5px solid #bdddc8; */
}

.kv_head {
    max-width: 1200px;
    margin: auto;
    transition: .2s ease-in-out;
    position: absolute;
    top: 0;
    left: 0; right: 0;
    z-index: 999;
}
    .kv_logo {
        box-sizing: border-box;
        text-align: center;
        background: url('../images/bg_logo.png') center bottom no-repeat;
        background-size: 100% 100%;
        width: 169px;
        padding: 25px 10px 15px;
        border-radius: 0 0 10px 10px;
        transform: translateY(-10px);
    }
        .kv_logo:hover {
            filter: brightness(120%);
            transform: translateY(0);
        }

.kv_container {
    position: relative; 
    margin: auto; 
    max-width: 1200px;
    height: 720px;
}

.kv_slogan {
    text-align: center;
    margin: auto;
    position: absolute;
    top: 6.5%;
    left: 0; right: 0;
    z-index: 2;
    pointer-events:none;  
}

/*all_bg_move*/
.all_bg_move {
    display: none;
    background: url('../images/bg_move_all.png') no-repeat center; background-size: 100%;
    /* position */
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 1;
    pointer-events: none;
}

/**prod**/
.prod_wrapper {
  position: relative;
}
.prod_container {
  position: relative;
  z-index: 100;
}
.ProductList {
  position: relative; 
  z-index: 500;
}
/**group**/
.group {
  max-width: 1100px; 
  margin: auto; 
  padding-bottom: 50px;
}

/**活動說明**/
.terms_wrapper {width: 1100px;  margin: 0 auto; padding-bottom: 20px;}
.terms_container {background-color: #fff; border: solid 3px #fff; border-radius: 30px 30px; box-shadow: rgba(35, 76, 75, 0.32) 0px 2px 4px 0px, rgba(35, 76, 75, 0.52) 0px 2px 16px 0px}
.terms_container h2 {font-size: 36px; font-weight: 800; text-align: center;  background-color: #f18059; color: #fff; border-radius: 30px 30px 0 0; padding: 30px 0;}
.terms_content {width: 90%; margin: 30px auto 40px; font-size: 17px; line-height: 24px; }
.terms_container h3 { background-color: #a66f6d; border-radius: 20px; font-size: 22px; line-height: 30px; font-weight: bold; padding: 5px 20px; display: inline-block; margin: 20px 0; color: #fff; transform: translateX(-1.5em); }
.terms_content h3 strong {color: #ffe398; margin-right: 3px;}
.terms_container h3:hover { transform: translateX(0); }
.terms_content h4 {font-weight: bold; font-size: 18px;  color: tomato;}
.terms_content ul li {margin: 0 30px 7px 30px; list-style-type: disc;}
.terms_content ul li.circle {list-style-type: circle;  }
.terms_content li strong {color: red;}
.terms_content a {display: inline-block; font-weight: bold; font-size: 18px; margin: 5px 3px; border-radius: 30px; color: #fff; background-color: #ff706d; padding: 3px 15px; transition: transform .35s; -webkit-transform: translate(0, 0); transform: translate(0, 0);}
.terms_content a:hover {-webkit-transform: translate(5%, 0); transform: translate(5%, 0); cursor: pointer;}
.terms_content a.over {background-color: lightgray;}
.terms_content a.over:hover {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
.terms_container p { padding-left: 18px; margin-bottom: 5px;}
.terms_prize_list th, .terms_prize_list td {border: 2px solid #66cda3; text-align: center;}

table {background: white; border-collapse: collapse; margin: 15px 0; width: 100%; border: 2px solid #008fbe;}
table tr,table th,table td {border: none; border-bottom: 1px solid #e4ebeb;}
table th,table td {padding: 5px 10px; text-align: left;}
table th {background: #008fbe; color: #ffffff; text-transform: uppercase; padding: 10px;}
table tr td {background: #fff;}
/* table.two-axis tr:nth-of-type(2n+2) td { background: #f5f5f5; } */
table.bt tfoot th,table.bt tfoot td,table.bt tbody td {font-size: 14px; padding: 0;}
table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before {background: #989898; color: white; margin-right: 10px; padding: 10px 10px 0;}
table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content {display: inline-block; padding: 10px 5px 0;}
table.bt tfoot th:first-of-type:before,
table.bt tfoot th:first-of-type .bt-content,
table.bt tfoot td:first-of-type:before,
table.bt tfoot td:first-of-type .bt-content,
table.bt tbody td:first-of-type:before,
table.bt tbody td:first-of-type .bt-content {padding-top: 10px;}
table.bt tfoot th:last-of-type:before,
table.bt tfoot th:last-of-type .bt-content,
table.bt tfoot td:last-of-type:before,
table.bt tfoot td:last-of-type .bt-content,
table.bt tfoot td:last-of-type .bt-content,
table.bt tbody td:last-of-type:before,
table.bt tbody td:last-of-type .bt-content {padding-bottom: 10px;}

/* table.box2 tr, table.box2 td {border: 1px solid #c5c5c5;}
table.box3 tr, table.box3 td {border: 1px solid #c5c5c5;} */

/**coupon**/
.coupon {width: 100%; margin: 0 auto 15px; position: relative;}
.coupon img {width: 100%;}
.coupon ul{display: flex; justify-content: space-around;}
.coupon ul li {list-style-type: none; margin: 0;}
.coupon a { display: inline-block; transition: transform .35s;  -webkit-transform: translate(0, 0); background: none; padding: 0px 0px; }
.coupon a:hover { -webkit-transform: translate(0, -5px);  transform: translate(0, -5px); }

/**button**/
.button { }
.button a {
    display: inline-block;
    background: #cc3032;
    border-radius: 20px;
    color: #FFF;
    padding: 10px 15px;
    border-bottom: 3px #8d1f20 solid;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.2;
}
.button a:hover{background-color: #8d1f20;}

/**img**/
.layout{width: 100%; margin:5px 0;}
.label{width: 20%; margin:5px 0;}
.red{ color: crimson; font-weight: bolder;}

/* ================================================
- 右側懸浮 float
================================================ */

.gotop {
    /* background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 22px;
    line-height: 60px;
    text-align: center;
    height: 60px;
    position: fixed;
    left: calc(50% + 620px);
    width: 60px;
    border-radius: 30px;
    bottom: 250px;
    z-index: 900;
    display: none;
    cursor: pointer; */
    pointer-events: none;
}

.NavArea {
    display: none;
}

@media screen and (min-width: 1025px) {

    /** float **/
    .NavArea {
        display: none;
        width: 140px;
        position: fixed;
        top: 25%;
        right: 0;
        z-index: 250;
    }

    .Nav-slide.active {
        color: #fff;
        /* background: #5f9c94; text-shadow: #5f9c94 0 0 1em; */
        background: #5d814f; text-shadow: #5d814f 0 0 1em;
    }
    .Nav-slide.active a { color: #fff; }
    
    .Nav-title {
        background: url("../images/float_hd.png") no-repeat center;
        background-size: contain;
        margin: auto;
        position: relative;
        z-index: 251;
    }
    .Nav-title img { opacity: 0; }
    /* .Nav-title::before { content: " "; display: block; background: #96a84d; width: 100%; height: 10px; border-radius: 0 0 10px 10px; position: absolute; top: 0; left: 0; right: 0; }
    .Nav-title::after, .Nav-wrapper li.Nav-title::after { content: " "; display: block; background: #96a84d; width: 100%; height: 10px; border-radius: 10px 10px 0 0; position: absolute; bottom: 0; left: 0; right: 0; } */

    .float_tit {
        position: relative;
        z-index: 9;
    }

    .float_main {
        width: 138px;
        opacity: 0.9;
        filter: alpha(opacity=90);
    }

    .go_top {
        display: block;
        cursor: pointer;
    }

    .Nav-wrapper {
        /* background: #4c7447; */
        /* background-color: rgba(76, 116, 71, 0.8); */
        background: #96a84d;
        /* background-color: rgba(150, 168, 77, 0.8); */
        width: 100px;
        margin: -30px auto 0;
        padding-top: 40px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        overflow: hidden;
        opacity: 0.96;
    }

    .Nav-wrapper li {
        font-size: 15px;
        text-align: center;
        background: transparent;
        margin: auto;
        padding: 5px 0 5px;
        position: relative;
    }

    .Nav-wrapper li.highlight0 {
        font-size: 24px;
        line-height: 26px;
        border-radius: 20px 0 0 0;
        padding-top: 20px;
        padding-left: 2px;
        color: #fff;
        font-weight: bold;
    }

    .Nav-wrapper li.highlight1 {
        /* padding-left: 2px; */
        /* background-color: rgba(250, 162, 59, 0.8); */
        background-color: #faa23b;
        margin: 2px auto;
        border-radius: 3em;
    }
    .Nav-wrapper li.highlight1+.highlight1 {
        background-color: rgba(250, 162, 59, 0.4);
    }

    .Nav-wrapper li.highlight2 {
        font-size: 24px;
        border-radius: 0 0 20px 20px;
        padding-bottom: 20px;
        padding-left: 2px;
    }

    .Nav-wrapper li.highlight3 {
        background-color: #e5700e;
        margin: 2px auto;
        border-radius: 3em;
    }

    .Nav-wrapper li a {
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        position: relative;
        z-index: 500;
    }

    .Nav-wrapper li a:hover,
    .Nav-wrapper li a:focus,
    .Nav-wrapper li a:active {
        color: #fff;
        /* text-shadow: #000 0 0 1em; */
    }

    .Nav-wrapper li.Nav-slide:after {
        background: #bfdfb2;
        /* box-shadow: #bfdfb2 0 0 1em; */
        height: 2px;
        position: absolute;
        right: 51%; left: 51%;
        bottom: 0;
        z-index: 1;
        content: "";
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: left, right;
        transition-property: left, right;
    }

    .Nav-wrapper li.Nav-slide:hover:after,
    .type_leftmenu li:focus:after,
    .type_leftmenu li:active:after,
    .type_leftmenu li.active:after,
    .type_leftmenu li.Nav-slide.active:after {
        right: 10%; left: 10%;
    }

    .Nav-wrapper li.highlight0:after {
        background: transparent;
    }

    /* 次層 */
    .Nav-wrapper .sub-menu {
        background: #657c2e;
        background: linear-gradient(0deg, rgba(76, 116, 71, 1) 0%, rgba(76, 116, 71, 0) 30%, rgba(76, 116, 71, 0) 80%, rgba(76, 116, 71, 1) 100%);
        /* background: linear-gradient(0deg, rgba(76, 116, 71, 1) 0%, #657c2e 40%, #657c2e 60%, rgba(76, 116, 71, 1) 100%); */
        padding: 20% 0 13%;
        position: relative;
    }
        .Nav-wrapper .sub-menu::before { content: " "; display: block; background: #96a84d; width: 100%; height: 10px; border-radius: 0 0 10px 10px; position: absolute; top: 0; left: 0; right: 0; }
        .Nav-wrapper .sub-menu::after { content: " "; display: block; background: #96a84d; width: 100%; height: 10px; border-radius: 10px 10px 0 0; position: absolute; bottom: 0; left: 0; right: 0; }
        .Nav-wrapper .sub-menu ul {
            background: #bfdfb2;
            width: 96%;
            margin: auto;
            border-radius: 10px;
            overflow: hidden;
        }
        .Nav-wrapper li.sub-menu li a { color: #4c7447; }
        .Nav-wrapper li.sub-menu li.Nav-slide.active a { color: #fff; }
        .Nav-wrapper .sub-menu ul li:first-child { padding-top: 10px; }
        .Nav-wrapper .sub-menu ul li:last-child { padding-bottom: 10px; }
        .Nav-wrapper li.sub-menu li+li { border-top: 1px dashed #4c7447; }
        .sub-menu .Nav-title {
            color: #103b43;
            font-size: 120%;
            font-weight: bold;
            /* text-shadow: 0 2px white, 0 -2px white, 2px 0 white, -2px 0 white; */
            background: none !important;
            margin: auto;
            position: relative;
        }
}
@media screen and (max-width: 1024px) {
    .Nav-slide2.highlight4 {}
    .Nav-slide2.highlight4 ol {
        color: #fff;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: center;
        /* background: #4c7447; */
        /* background-color: rgba(150, 168, 77, 0.8); */
        background-color: rgba(76, 116, 71, 0.8);
        padding-left: 15px;
    }
}
/* ================================================
- 底部選單
================================================ */

.M_menu_wrap {
	display: none;
}
@media screen and (max-width:768px) {
    .M_menu_wrap { display:block; position: absolute; }
    .M_menu_block { position: fixed; bottom:0; /**background: rgba(0,0,0,1)**/; width: 100%; z-index: 200;}
    .M_menu_block ul li { width: 40vw; box-sizing: border-box;text-align: center; float: left; height: 50px; cursor: pointer; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555), color-stop(100%, #111));
    border-top: 1px solid #999;border-right: 1px solid #666;border-left: 1px solid #222;}
    .M_menu_block ul li.M_menu_gotop  { background: linear-gradient(0deg, #5e20ed 50%, #6e69e9 100%); width: 20vw; }
    /**.M_menu_block ul li:last-child {border:none;}**/
    .M_menu_block ul li:before {content:''; display: inline-block; vertical-align: middle; height: 100%;}
    .M_menu_block ul li a { display: inline-block; width: 100%; color: #fff; font-size: 15px; line-height: 16px; vertical-align:middle; }
    .M_menu_block ul li a b { display: inline-block; text-shadow: 0 0 2px black; box-sizing: content-box; background: #4d32ff; padding: 5px; width: 1em; height: 1em; border-radius: 100px; }
    .M_menu_block ul li.best a {color: yellow;}
    .M_menu_filter { display: none; position: fixed; bottom:60px; width: 95%; margin: auto; left: 0; right: 0; background: #fefefe; border-radius: 10px;z-index: 200; }
    .M_menu_filter:after { content:''; display: inline-block;width: 0; height: 0; border-width:7px; border-color:#fefefe transparent transparent transparent ; border-style:solid; position: absolute; left: 0; right: 0; bottom:-14px; margin: auto; }
    .M_menu_filter ul li { width: 33.3%; box-sizing: border-box;text-align: center; float: left; height: 50px; padding: 5px; }
    .M_menu_filter ul li a { background: darkred;  display: block; font-size: 14px; height: 35px; color: #fff;vertical-align: middle; border-radius: 20px; }
    .M_menu_filter ul li a:before { content:''; display: inline-block; vertical-align: middle; height: 100%; }
    .bk_mask { display: none; position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0,.8); top:0;z-index: 100; }     
}

.M_menu_block li span {
    font-size: 1.2em;
    display: inline-block;
    padding: 6px 5px;
    margin: 2px;
    transition: all .5s;

    color: #1f0303;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.45);
    background: #fff3dc;
    background: -moz-linear-gradient(90deg, #e4cea3 0%, #fff3dc 50%);
    background: -webkit-linear-gradient(90deg, #e4cea3 0%, #fff3dc 50%);
    background: linear-gradient(90deg, #e4cea3 0%, #fff3dc 50%);

    padding: 6px 5px;
    margin: 2px 4px 2px 2px;
    border-radius: 3em;
    box-shadow: 2px 2px 0 0 #c56c2c;
    transform: rotateZ(10deg);

    /* color: #006699;
    font-weight: bold;
    font-style: italic;
    background-color: #8affff;
    padding: 6px 8px 6px 4px;
    margin: 0 0 0 2px;
    clip-path: polygon( 15% 0, 100% 0, 85% 100%, 0% 100%); */

    /* color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
    background: linear-gradient(to right, #ff34ff, #00ffff);
    padding: 6px 5px;
    margin: 2px 2px 2px 4px;
    border-radius: 3em;
    box-shadow: 0 0 0 2px #ffffff, 3px 3px 0 1px #701be4, 4px 4px 0 2px #ffffff;
    transform: rotateZ(10deg); */

    animation: M_menu_block 0.4s linear .2s backwards;
}
@-webkit-keyframes M_menu_block {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(10deg);
    }
}
@keyframes M_menu_block {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(10deg);
    }
}

/* ================================================
- 自適應 RWD
================================================ */
/* screen Min-width */
@media screen and (min-width: 1025px) {
    .kv {}
}
/* screen Max-width */
@media screen and (max-width:768px) {
    body {width: 100vw; min-width: inherit;}
    .gotop {background: url('//www.payeasy.com.tw/pay_event/pezlib/images/icon_top.png') no-repeat;  height: 36px; position: fixed; right: 5px; width: 36px; bottom: 60px; z-index: 999;display: none;}
    .gotop a {display: block; width: 48px; height: 36px;}
    .header {width: 100vw; }
    .display_m {display: block;}
    .display_pc {display: none;}
        
    .main_wrapper{
        background: url('../images/rule_kv_m.png') no-repeat center top, url('../images/bg.jpg') repeat center top #bdddc8;
        background-size: 125%;
    }
    .main_wrapper h1 {
        margin: 20px auto 10px;
        font-size: 16px;
        line-height: 22px;
        padding: 6px 30px;
        border: 2px solid #fff;
    }
    
    .kv_wrapper {
        background: none;
    }
    .kv_head { display: none; }
    .kv_container {
        width: 100vw;
        height: 65vw;
    }
    .kv_container img {
        width: 100%;
    }
    .kv_slogan {
        width: 43vw;
        left: 2vw;
        top: 12.5vw;
    }  

    .bg_fly {
        display: none;
    }    
        
    /**prod_m**/
    .prod_wrapper{
    padding-bottom: 50px;
    } 
        
    .group {width: 100vw; padding-bottom: 20px;}
    

    /**嚙踝蕭嚙褊鳴蕭嚙踝蕭**/
    .terms_wrapper {width: 94vw; padding-bottom: 36px;}
    .terms_container {border-radius: 30px 30px;}
    .terms_container h2 {font-size: 21px; line-height: 24px; border-radius: 30px 30px 0 0; padding: 10px 0;}
    .terms_container h2 span {display: block;}
    .terms_content {width: 96%; font-size: 14px; line-height: 18px; margin: 15px auto 0; padding-bottom: 10px;}
    .terms_content a {font-size: 15px;}
    .terms_container h3 {font-size: 16px; line-height: 20px; margin-bottom: 10px;}
    .terms_content ol li {margin: 4px 5px 0 15px;}
    .terms_content ul li {margin: 0 0 0 20px;}
    .lazy .terms_prize_list { font-size: 14px;  line-height: 20px;}
    .terms_prize_list th { display: none;}
    .terms_prize_list td { display: block;  text-align: left;  border: none;  border-bottom: 1px dotted #66cda3;  margin: 3px 0;}
    .lazy .terms_prize_list td {float: left; border-bottom: none; margin: 0;  }
    .terms_prize_list_date {margin-top: 20px !important;}
    .terms_prize_list td:before {display: inline-block;  width: 120px;  text-align: center;  font-size: 15px;  color: #fff;  border-radius: 10px;  background-color: #66cda3;  content: attr(data-label);  margin: 3px 5px 3px 0; padding: 3px 0; font-weight: bold;}
    .rule .terms_content img {max-width: 80%;}
    .rule-img{width:100%; padding-top: 10px;}
    .rule-img img{width:100%;}

    table {border: 1px solid #e4ebeb;}
    table.two-axis tr td:first-of-type,
    table.two-axis tr:nth-of-type(2n+2) td:first-of-type,
    table.two-axis tr td:first-of-type:before {background: #008fbe; color: #ffffff;}
    table.two-axis tr td:first-of-type {border-bottom: 1px solid #e4ebeb;}
    table.two-axis tr td:first-of-type:before {padding-bottom: 10px;}
    table tr,table th,table td {border-bottom: 1px solid #e4ebeb; font-size:14px; padding: 10px 5px;}
    table th {background: #008fbe;}
        
    table th.denomination {width: 17%;}

    /**coupon**/
    .coupon {width: 100%;}
    .coupon ul {
        display: flex;
        flex-wrap: wrap;}
    .coupon ul li {margin: 0; width: 50%;}
    .coupon ul li img{ width: 100%;}
        
        
    .button { }
    .button a {border-radius: 10px; padding: 7px 25px; font-size: 15px; display: block;}

    /**嚙踝蕭嚙瘢-top**/ 
    .float_tit, .float_tit2, .float_tit3{display: none;}
    .NavArea {display: none; position: fixed; top: 0; left: 0; right: 0;z-index: 998;}
    .NavArea .Nav {position: relative; margin: 0; padding: 0; overflow-x: scroll; background: #000; border-bottom: 2px solid #ccc;}
    .NavArea .Nav ul {display: flex;}
    .NavArea .Nav li {z-index: 10;flex: none;}
    .NavArea .Nav a {color: #fff; padding: 0 15px; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold;}
    .Nav-slide.active a {color: yellow;}
    .NavArea li.highlight0 {display: none;}
    .Nav-slide.active a {color: yellow; font-weight: bold; border-bottom: 2px solid yellow; background: #525252;}
    .NavArea .Nav li span {
        display: inline-block;
    }
        
    /**floatM-bottom**/
    .float_wrapper { display: none;}
    .M_menu_wrap { position: fixed;  bottom: 0; z-index: 999; }
    .M_menu_block{ width: 100vw; background-color: rgb(0 0 0 / 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);  }
    .M_menu_block ul { border-top: 2px solid #999; display: flex; justify-content: center; align-items: center; }
    .M_menu_block li { width: 100%; font-size: 16px; line-height: 18px; height: 50px; display: flex; flex: auto; justify-content: center; align-items: center; text-align: center; border-left: 1px solid #222; border-right: 1px solid #666; padding-bottom: 8px;}
    .M_menu_block li a{ color: #fff; }
    .M_menu_block a{ color: #fff;}
        
    .label{width: 40%;}

}