@charset "big5";
/* CSS Document */
body {min-width: 1200px; color: #333; font: 15px/1.6em "Century Gothic", Arial, 'Microsoft JhengHei', "蘋果儷中黑", "儷黑 Pro", "新細明體", "sans-serif";}
a {display: block; text-decoration: none;}
:focus {outline: none;}
i {font-style: normal;}
.header, .footer {text-align: center; background: #fff;}
.display_pc {display: block}
.display_m {display: none}

/**main_wrapper**/
.main_wrapper {overflow: hidden; background: url("../images/index/bg.png") center top #f4f4f4;}

/**kv**/
.kv_wrapper {background: url(../images/index/kv_bg.png) no-repeat top center; height: 200px;}
.kv_container {position: relative; width: 1100px; margin: auto;}
.kv_slogan {width: 383px; display: block; margin: auto; padding-top: 60px;}

/*錨點*/
.NavArea.fix {position: fixed; top: 0; z-index: 500; width: 100%; height: 60px;}
.NavArea {overflow: hidden;
    -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);}

.Nav {width: 100%; background: #930006;}
.Nav-wrapper {width: 950px; margin: auto; height: 60px; text-align: center;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;}
.Nav-wrapper li {width: 100%; border-left: 1px solid #ffefdc;}
.Nav-wrapper li:last-child {border-right: 1px solid #ffefdc;}
.Nav-wrapper li a {color: #ffefdc; font-weight: bold; font-size: 24px; line-height: 40px; transition: 0.3s linear; letter-spacing: 1px;}
.Nav-wrapper li.active a {width: 90%; margin: auto; color: #9a0a0f; background: #fad6b6; border-radius: 20px;}


/**prod**/
.prod_wrapper {position: relative; }
.ProductList {position: relative; z-index: 100; padding-bottom: 50px;}
.group {width: 1020px; margin: 0 auto; overflow: hidden;}
.title {width: 100%; text-align: center; padding-top: 20px; padding-bottom: 20px;}


.event_bn {position: relative; width: 1000px; margin: auto; border: 1px solid #fff; margin-bottom: 40px; transition: linear .2s;
    -webkit-box-shadow: 0 0 10px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 0 10px 0px rgb(0 0 0 / 30%);
    box-shadow: 0 0 10px 0px rgb(0 0 0 / 30%);}
.event_bn:hover {filter: brightness(110%); transform: scale(0.995);}
.icon_best {position: absolute; top: 14px; right: 0; z-index: 1;}

.list_main {width: 940px; margin: auto; background: #fff; padding: 20px 30px 30px; border: 1px solid #c1c1c1;
    -webkit-box-shadow: 0 0 10px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 0 10px 0px rgb(0 0 0 / 30%);
    box-shadow: 0 0 10px 0px rgb(0 0 0 / 30%);}
.list {width: 100%; margin-bottom: 25px;}
.list ul {padding-bottom: 60px;}
.list li, .panel li {font-size: 20px; line-height: 20pt; letter-spacing: 0.05em; border-bottom: 1px #a8a8a8 dashed; padding: 12px 5px 3px 15px; margin: 0 20px;}
.list li a, .panel li a {color: #191919;}
.list li a:hover, .panel li a:hover {color: #b30a29;}
.list li:hover, .panel li:hover {background-color: #ffe7d4;}

/* ================================================
- container
================================================ */
/*標題hover*/
.flip {width: 910px; margin: auto; padding-bottom: 15px; font-weight: bold; border-bottom: dotted 2px #94273b; font-size: 18px; color: #94273b;
    position: relative; z-index: 1;
    cursor: pointer; transition: .2s ease-in-out;}
.flip ol {list-style:none;}
.flip:hover, .flip:focus, .flip:active {color: #2f2f2f;}

/*隱藏內容*/
div.panel {width: 940px; margin: auto; height: 0; overflow: hidden; transition: .5s linear height;}
.active div.panel {width: 96%; margin: auto; height: 250px; overflow-y: auto; background-color: #fffdf2; padding: 5px 0 20px;}

/*展開收合的按鈕*/
.open, .close, .open01, .close01 {
    border-radius: 30px; border: 1px solid #94273b; color: #fff; background: #94273b; display: inline-block;
    /*可以設定長寬*/
    padding: 6px 10px; font-size: 10px; line-height: 12px;
    position: relative; float: right; left: 0px;
    transition: .3s ease-in-out; cursor: pointer;}
.close {display: none;}
.open01 {display: none;}

.flip:hover {color: #94273b;}
.flip:hover .open, .flip:hover .close {background-color: #fff; color: #94273b;}
.active .open01 {display: block;}
.active .close01 {display: none;}
.active .open {display: none;}
.active .close {display: block;}


@media screen and (max-width:1024px) {
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: 10px; 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-size: 100%;}
    
/**kv_m**/
.kv_wrapper {background-size: 200%; height: 20.5vw; border-bottom: 3px solid #9a0a0f;}
.kv_wrapper img {width: 100%;}
.kv_container {width: 100vw;}
.kv_slogan {width: 40vw; padding-top: 6.2vw;}

.NavArea.fix {display: block; height: 50px; top: auto; bottom: 0; }
.NavArea {position: fixed; z-index: 999; bottom: 0; box-shadow: none; border-top: 2px solid #ccc;}
.NavArea .Nav {position: relative; margin: 0; padding: 0; background: #9a0a0f;}
.NavArea .Nav ul {width: 100vw; height: 50px;}
.NavArea .Nav a {color: #ffefdc; height: 50px; font-size: 15px; line-height: 50px; font-weight: bold; padding-bottom: 5px;}
.Nav-slide.active a {color: yellow; font-weight: bold; background: #525252;}
.Nav-wrapper li.active a {width: 100%; border-radius: 0;}
.Nav-wrapper li {width: auto; flex: auto;}

/*prod_m*/
.prod_wrapper {padding-top: 10px; padding-bottom: 30px;}
.ProductList {width: 100vw; margin: auto;}
	
.title {width: 94%; margin: auto; padding-top: 0;}
	
.group {width: 94vw;}
.group img {width: 100%;}

.event_bn {width: 100%; margin-bottom: 20px; border: 0; box-shadow: none;}
.icon_best {width: 15.5vw; top: 1.5vw;}
.icon_best img {width: 100%;}
	
.list_main {width: 88.8vw; padding: 10px; border: 0.1vw solid #ccc;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;}
.list li, .panel li {font-size: 16px; line-height: 18px; padding: 10px 0; margin: 0 10px;}
	
.flip {width: 94%; margin-bottom: 10px;}
	
}

@media screen and (max-width:768px) {
.title {padding-top: 20px; padding-bottom: 20px;}
	
}

@media screen and (max-width:560px) {	
.title {padding-top: 10px; padding-bottom: 10px;}
.list li, .panel li {font-size: 14px; letter-spacing: 0;}
}

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

}

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