@charset "utf-8";
html { height: 100%;}
body {background: #ebebeb; margin: 0; height: 100%; font-family: 'Noto Sans TC', Microsoft JhengHei; font-weight: 300; position: relative;}

img { border: 0; vertical-align: middle; }
input { vertical-align: middle; font-family: 'Noto Sans TC', Microsoft JhengHei; font-weight: 300;}
button { font-family: 'Noto Sans TC', Microsoft JhengHei; font-weight: 300;}
input.check-box { width: 20px; height: 20px; vertical-align: middle; display: inline-block; font-weight: 300;}
select { font-family: 'Noto Sans TC', Microsoft JhengHei; font-weight: 300;}
textarea { font-family: 'Noto Sans TC', Microsoft JhengHei;  font-weight: 300;}
hr { margin: 0 0 15px 0; padding: 15px 0 0 0; border: 0; border-bottom: 1px #cacaca solid;}

h1, h2, h3, h4 { margin: 0; padding: 0; font-weight: 300; }

/*  漸變效果 */
a { color: #554c74; transition: all 0.3s ease 0s; text-decoration: none;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}

/* End hide from IE-mac */
/*  padding and border no width  */
* {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

.wallpeper { width: 100%; min-height: calc(100% - 155px); overflow: hidden;}
.i-main-box { max-width: 1040px; margin: 0px auto 50px auto; background-color: #ffffff;  position: relative; z-index: 1; border-bottom: 2px #ececec solid;}
.i-more-box { text-align: center; margin-bottom: 30px;}
.i-more-box a { display: inline-block; vertical-align: middle; padding: 6px 12px; text-align: center; letter-spacing: 2px; font-size: 14px; color: #acacac; border: 1px #d1d1d1 solid;}
.i-more-box a:hover { background-color: #f0f0f0;}
.main-box { max-width: 1040px;  margin: 50px auto 50px auto; background-color: #ffffff;  position: relative; z-index: 1; }
.page-box { position: relative; z-index: 10;  padding-top: 20px;}
.top-bg { position: absolute; top: 0; left: 0; width: 100%; max-height: 100%; max-width: 100%; z-index: 0;  overflow: hidden; display: none;}
.top-bg img { width: 100%; height: auto; }
.left-bg {  position: absolute; top: 0; left: 0; width: auto; height: auto; z-index: 1;}

/*  header */
header { box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); height: 80px; border-bottom: 1px #ffbfbf solid; padding: 10px; display: flex; flex-wrap: wrap; z-index: 900; font-size: 16px; transition: all 0.3s ease; top: auto; position: fixed; top: 0; left: 0; width: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffeded+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #ffeded 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#ffeded 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#ffeded 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffeded',GradientType=0 ); /* IE6-9 */
}

header .logo { width: 100px; flex: none;  transition: all 0.3s ease; }
header .logo:hover { filter: brightness(1.2); }
header .logo a { display: block; position: relative;}
header .logo img { width: 150%; height: auto; position: absolute; top: 0; left: 0;}

header.down { padding: 0 10px; height: 60px; }


header nav { flex: 1; display: flex; align-items: center;}
header nav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; width: 100%; flex: none;}
header nav ul li { flex: none; display: inline-block; padding: 0 0.5em;  }
header nav ul li a { color: #333333;}
header nav ul li:after { content: '/'; padding: 0 0 0 1em; color: #aaaaaa;}
header nav ul li:last-child::after { display: none;  }

header .login-box { display: inline-block; flex: none; padding: 0 1em; display: flex; align-items: center; }
.login-box button { cursor: pointer; margin: 0 0.25em; font-size: 1em; border-radius: 5px; border: 0; padding: 0.2em 0.5em 0.3em 0.5em; transition: all 0.3s ease; }
.login-box button.person { background-color: #a39045; color: #ffffff;}
.login-box button.person:hover { background-color: #f3c408;}
.login-box button.store { background-color: #3579a0; color: #ffffff;}
.login-box button.store:hover { background-color: #0c486b;}

main { min-height: 300px; padding-top: 80px; padding-bottom: 3em;}

main.index { background-image: url('../images/index-bg.jpg'); background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat;}
.main-body { max-width: 1200px; margin: 3em auto; min-height: 300px; background-color: #ffffff; padding: 1em; border-radius: 4px; overflow: hidden; box-shadow: 0 0 3px rgba(34, 34, 34, 0.3);}
.login-box { max-width: 380px;}
.m-burger { display: none;}

/* mobile-menu */
.mobile-menu { display: none;}

/* article */
.article-title {  border-bottom: 1px #d4d4d4 solid; padding: 0.5em 55px; margin: 0 -1em; font-size: 24px; }
.article-title h3 { font-weight: 700; color: #333333;}
.article-title .time { color: #88bddb; font-size: 16px; margin-top: 8px; text-align: right;}
.article-title .time .news-label { float: left; border-radius: 99em; background-color: #df2f2f; color: #ffffff; padding: 0.1em 1em; }

.article-body { min-height: 200px; font-size: 16px; color: #555555; line-height: 1.6em; padding: 0 30px 2em 30px; text-align: justify;}

/* page-change */
.page-change { display: flex; border-top: 1px #d4d4d4 solid; margin: 1em -1em -1em -1em; background-color: #f8f8f8;}
.page-change div { display: flex; align-items: center; transition: all 0.3s ease;}
.page-change div:hover { background-color: #f1f1f1;}
.page-change a { color: #333333; display: block; padding: 0.5em 1em; }
.page-change .prev { flex: 1; display: flex; align-items: flex-start;}
.page-change .prev a { position: relative; padding-left: 6em; display: block; width: 100%;}
.page-change .prev a:before { content: '< 上一則'; display: block; position: absolute; top: 0.5em; left: 1em; color: #1c9de7;}

.page-change .back-page { width: 5em; border-left: 1px #d4d4d4 solid; border-right: 1px #d4d4d4 solid; justify-content: center; padding: 0; }
.page-change .back-page a { padding: 0; text-align: center; width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f8f8f8+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f8f8f8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f8f8f8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f8f8f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
}
.page-change .back-page a:hover { 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ededed+0,f8f8f8+100 */
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top,  #ededed 0%, #f8f8f8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ededed 0%,#f8f8f8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ededed 0%,#f8f8f8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#f8f8f8',GradientType=0 ); /* IE6-9 */
}
.page-change .next { flex: 1; }
.page-change .next a { display: block; position: relative; padding-right: 6em; width: 100%; text-align: right; }
.page-change .next a:before { content: '下一則 >'; display: block; color: #1c9de7; position: absolute; right: 1em; top: 0.5em;}


/* bookmark */
.bookmark { text-align: center; padding: 15px 0; margin: 15px 0 5px 0; }
.bookmark>span { font-size: 14px; color: #202020; display: inline-block; border-radius: 99em; border: 1px #e7e7e7 solid; line-height: 2em; height: 2.2em; padding: 0 1em; cursor: pointer; transition: all 0.3s ease ;}
.bookmark>span:hover { background-color: #eeeeee;}
.bookmark>span.prev { margin-right: 1em;}
.bookmark>span.next { margin-left: 1em;}
.bookmark a { background: #ffffff; border: 1px #dbdbdb solid; font-size: 16px; display: inline-block; color: #272727; margin: 0 2px; border-radius: 2px; border-radius: 99em; width: 2.2em; line-height: 2em; height: 2.2em; text-align: center; }
.bookmark a.active { background-color: #eeeeee; cursor: default; }

.bookmark a:hover { background: #ececec; }
.bookmark select { background: #ffffff; border: 0; border-bottom: 1px #cccccc solid; padding: 5px;  color: #81795A; margin: 0 2px; display: none; }
.bookmark .portal-pages { text-align: center; margin-top: 10px; }
.bookmark .portal-pages span { display: inline-block; color: #242424; font-size: 14px; padding-top: 10px; }


/* page-title */
.page-title { padding: 1em 0; position: relative; text-align: center;  }
.page-title:before { position: absolute; content: ''; display: block; background-color: #c0c0c0; height: 1px; left: 0; top: 60%; width: 100%; }
.page-title h3 { background-color: #ffffff; text-align: center; font-size: 36px; font-weight: 500; color: #333333; padding: 0 1em; position: relative; z-index: 1; display: inline-block; }
.page-title h3 span { display: block; font-size: 14px; color: #979797; padding-top: 0.5em;}

.page-banner { margin-top: -100px; }
.page-banner img { width: 100%; height: auto; }

.text-center { text-align: center;}

/* search-box  */
.search-box { display: flex; flex-wrap: wrap; font-size: 18px; padding: 2em 0;}
.search-box input, .search-box select, .search-box button { padding: 0.3em 0.7em; flex: 1; color: #222222; margin-right: 10px; border-radius: 4px; font-size: 1em; border: 1px #dddddd solid; transition: all 0.3s ease; }
.search-box select { width: 200px; flex: none;}
.search-box input:hover, .search-box select:hover { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);}
.search-box .btn-search { width: 150px; flex: none; cursor: pointer; border: 0; margin-right: 0; background-color: #333333; color: #ffffff;}
.search-box .btn-search:hover { background-color: #bb5d5d;}

.search-data { padding: 0.5em 1em; font-size: 18px; border: 1px #dbdbdb solid; margin-bottom: 20px;}



/* shop-body */
.shop-body { display: flex; flex-wrap: wrap;}
.shop-body .left { flex: 1; padding-right: 12px; }
.shop-body .right { width: 320px; flex: none; margin-left: 12px;}

.info-list { margin-bottom: 30px;}
.info-list .list { color: #333333; margin-bottom: 0.5em; padding-bottom: 0.5em; display: flex; flex-wrap: wrap; border-bottom: 1px #d1d1d1 dotted;}
.info-list .list label { width: auto; flex: none; font-weight: 500; color: #b84646;}
.info-list .list p { flex: 1; margin: 0 0 0 0.5em;}

.shop-logo { max-width: 240px; margin: 0 auto;}
.shop-logo .photo { width: 100%; height: 0; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; background-color: #f3f3f3; background-image: url(../images/shop-cover-defalt.png); border-radius: 6px;}
.shop-name { text-align: center; margin: 1em 0; font-size: 24px;}

.shop-body .icon { padding: 0.5em 0;  margin-bottom: 30px; position: relative;}
.shop-body .icon:after { content: ''; border-radius: 6px; display: block; background-color: #f3f3f3; height: 6px;  position: absolute; top: calc(50% - 3px); left: 60px; right: 0; }
.shop-body .icon::before { content: ''; display: block; width: 48px; height: 48px; background-position: center; background-repeat: no-repeat; background-size: cover; }
.icon-shop::before { background-image: url(../images/icon-store.svg);}
.icon-shop-info::before { background-image: url(../images/icon-store-info.svg);}

.shop-google-map { position: relative; border: 1px #f1f1f1 solid;}
.shop-google-map::before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 60%;}
.shop-google-map iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 0;}

.intro h3,
.discount h3 { position: relative;  padding: 0.3em 25px; overflow: hidden; position: relative; background-color: transparent;}
.intro h3:before,
.discount h3:before { content: ''; display: block; width: 50px; height: 50px; position: absolute; top: -15%; left: -50px; transform: rotate(45deg); background-color: #ebebeb; z-index: 1; }

.intro h3:after,
.discount h3:after { content: ''; display: block;  position: absolute; top: calc(50% - 1px); left: 130px; right: 0; height: 2px; background-color: #cccccc;}

.intro .cont, 
.discount .cont { padding: 0.5em 0 0 25px; margin-bottom: 25px; color: #555555; }

/* news-list */
.news-list { margin: 0 50px; padding-bottom: 1em;}
.news-list .list { display: flex; flex-wrap: wrap; border-bottom: 1px #8a8787 dotted; padding: 0.5em 0; }
.news-list .list:last-child { border-bottom: 0;}
.news-list .list .time { width: 6em; flex: none; color: #333333;}
.news-list .list .news-label {  width: auto; flex: none;  margin-right: 1em; } 
.news-list .list .news-label span { display: inline-block; border-radius: 99em; background-color: #df2f2f; color: #ffffff; padding: 0.1em 1em;}
.news-list .list .faq-label {  width: 24px; flex: none;  margin-right: 0.5em; } 
.news-list .list .faq-label:before { content: '?'; font-weight: 900; text-align: center; color: #ffffff; display: block; width: 24px; height: 24px; background-color: #df2f2f; border-radius: 99em;}
.news-list .list > a { display: block; flex: 1; color:#5a5a5a;} 
.news-list .list > a:hover { color: #1c9de7;}
.news-list .list .views { width: auto; flex: none; margin-left: 2em; font-size: 13px;}


/* shop-list */
.shop-list { display: flex; flex-wrap: wrap; margin: 0 -10px;}
.shop-list .list { position: relative; width: calc(33.3% - 20px); margin: 10px; overflow: hidden; box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s ease;}
.shop-list .list:hover { box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3); }
.shop-list .list:after { content: '';}
.shop-list .list .photo { overflow: hidden; position: relative;}
.shop-list .list .photo:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 56%; }

.shop-list .list .photo span { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.5s ease; }
.shop-list .list:hover .photo span { transform: scale(1.1); }

.shop-list .list .category { font-size: 14px; text-align: center; color: #ffffff; padding: 0.4em 12px; background-color: #c597ac; }
.shop-list .list h3 { font-size: 18px; padding: 15px 25px 0px 25px; font-weight: 500;}
.shop-list .list h3:after { content: ''; display: block; width: 40px; height: 3px; background-color: #d47eb8; margin: 12px 0;}
.shop-list .list .intro { padding: 0px 25px 60px 25px; color: #666666; font-size: 16px;}
.shop-list .list:after { content: '店家資訊'; font-size: 14px; font-weight: 100; color: #cccccc; border: 1px #f0f0f0 solid; width: 100px; text-align: center; padding: 0.3em 0; position: absolute; bottom: 10px; left: calc(50% - 50px);} 

.shop-catalogry { display: flex; flex-wrap: wrap; margin: 15px -3px; }
.shop-catalogry span { border: 1px #dfdfdf solid; cursor: pointer; border-radius: 4px; margin: 3px; padding: 10px 20px; font-size: 1em; width: auto; flex: none; transition: all 0.3s ease;}
.shop-catalogry span:hover { background-color: #e6e6e6; }
.shop-catalogry span.active { background-color: #f164ab; border: #f164ab; color: #ffffff; }

.store-partner-info { margin-bottom: 40px; }
.store-state { display: flex; flex-wrap: wrap; color: #e7661c; padding: 8px 0; border-top: 1px #ececec solid;}
.store-state label { width: auto; flex: none; margin-right: 0.5em; color: 333333;}


/* invoice-list  */
.invoice-list { margin-bottom: 50px;}
.invoice-list .td { display: flex; flex-wrap: wrap; text-align: center; border-bottom: 1px #ebebeb solid; }
.invoice-list .td > div { flex: 1; padding: 8px 5px;}

.invoice-list .td .nodata { padding: 20px; text-align: center; }
.invoice-list .td .date:before { content: '日期';}
.invoice-list .td .type:before { content: '類型';}
.invoice-list .td .number:before { content: '發票號碼';}
.invoice-list .td .state:before { content: '驗證狀態';}
.invoice-list .td .amount:before { content: '金額';}
.invoice-list .td > div:before { display: none;}
.invoice-list .td:nth-child(odd) { background-color: #fafafa;}

.invoice-list .td .state.unverified { color: #c55b5b;}

.invoice-list .td.th { background-color: #333333; color: #ffffff; border-bottom: 0;}
.invoice-list .td.th > div:before { display: inline-block;}

.invoice-list .td.winner { background-color: #fff36b; border-bottom: 1px #cecc60 solid;}
.invoice-list .td.winner .number:after { content: '(中獎)'; color: #ff0000;}

.invoice-note { display: flex; flex-wrap: wrap; color: #e23a3a; }
.invoice-note h3 { font-size: 18px; font-weight: 700; }
.invoice-note .info { font-size: 0.9em;  }

.total-amount { display: flex; flex-wrap: wrap; padding: 15px 10px; border-radius: 6px; font-size: 16px; border: 1px #cfcfcf solid; margin-bottom: 12px; color: #da0086;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f7f7f7+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}
.total-amount .money { flex: 1; display: flex; align-items: center;}
.total-amount .money span { font-size: 24px; color: #a11717; padding: 0 5px; font-weight: 700;}
.total-amount .bonus-ticket { flex: 1; text-align: right; display: flex; align-items: center; justify-content: right;}
.total-amount .bonus-ticket span { font-size: 24px; color: #a11717; padding: 0 5px; font-weight: 700;}


/* member */
.member-body { display: flex; flex-wrap: wrap;}
.member-body .left { width: 240px; flex: none; margin-right: 20px;}
.member-body .right { flex: 1; }

.member-title { border-bottom: 1px #f3bfbf solid; margin-bottom: 30px;}
.member-title h3 { display: inline-block; padding: 0.5em 0; border-bottom: 5px #f3bfbf solid; font-size: 24px; font-weight: 700;}
.member-title span { margin-left: 10px; color: #ff0000;}

/* left-menu */
.left-menu { list-style: none; padding: 0; }
.left-menu li { margin-bottom: 5px; border-radius: 4px; overflow: hidden; font-size: 18px; }
.left-menu li a { display: block; padding:  0.5em 1em; color: #333333; background-color: #f5f5f5;}
.left-menu li a:hover { background-color: #d13b3b; color: #ffffff;}
.left-menu li a.active { background-color: #272727; color: #ffffff; cursor: default; }

/* index-main  */
.index-main { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; padding: 1.5em 0 100px 0;}
.index-main .index-news { flex: 3;}
.index-main .index-video {flex: 2; margin-left: 10px;}
.index-title { font-size: 28px; color: #333333; text-align: center; font-weight: 500;}
.index-title span { display: block; font-size: 15px; color: #2e3757; margin: 0.3em 0 0.5em 0; font-weight: 300;}
.index-title span:before  { content: ''; background-color: #ff7e7e; display: block; width: 30px; height: 2px; margin:0 auto 0.3em auto; }
.index-title span:after  { content: ''; background-color: #cecece; display: block; width: 1px; height: 20px; margin: 0.2em auto 0 auto; }

.index-news-lis { display: flex; flex-wrap: wrap; margin: 0 -5px;}
.index-news-lis .list {  width: calc(33.3% - 10px); flex: none; background-color: #ffffff; margin: 5px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);}
.index-news-lis .list .photo { background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s ease; position: relative;}
.index-news-lis .list .photo:hover { filter: brightness(1.2);} 
.index-news-lis .list .photo a {display: block; width: 100%; height: 0; padding-bottom: 56%;}
.index-news-lis .list .photo .news-label { position: absolute; top: 0.5em; left: 0.9em; padding: 0.5em 3.5em 0.5em 1em; font-size: 1em; background-color: #bb0035; border-radius: 99em; color: #ffffff;}
.index-news-lis .list .info { padding: 0.5em 1em 1.5em 1em;}
.index-news-lis .list .info .time { color: #cc776c; font-size: 14px; margin-bottom: 0.3em; }
.index-news-lis .list .info h4 { line-height: 1.2em; max-height: 2.4em; margin-bottom: 0.3em; font-size: 18px; font-weight: 400; overflow: hidden; }
.index-news-lis .list .info p { font-size: 14px; overflow: hidden; line-height: 1.2em; height: 2.4em; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; color: #777777; }

/* index-video-lis */
.index-video-lis { display: flex; flex-wrap: wrap; justify-content: center;}
.index-video-lis .list { width: 100%; max-width: 375px; margin: 5px 0; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 6px; overflow: hidden; transition: all 0.3s ease; position: relative; }
.index-video-lis .list a { display: block; width: 100%; height: 0; padding-bottom: 56%; }
.index-video-lis .list:hover { filter: brightness(1.2);}
.index-video-lis .list:after { content: ''; display: block;  width: 3em; height: 3em; position: absolute; top: calc(50% - 1.5em); left: calc(50% - 1.5em); background-image: url(../images/btn-play.svg); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 10; }


/* index-shop */
.index-shop { width: 100%; flex: none; margin-top: 3em; display: flex; flex-wrap: wrap; }
.index-shop .index-title { width: 100%; flex: none;}
.index-shop .list {  width: calc(25% - 10px); flex: none; background-color: #ffffff; margin: 5px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);}
.index-shop .list .photo {  position: relative; overflow: hidden; border-bottom: 4px #f3f3f3 solid;}
.index-shop .list .photo a {display: block; width: 100%; height: 0; padding-bottom: 56%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3s ease;}
.index-shop .list:hover .photo a { transform: scale(1.1);} 

.index-shop .list .info { padding: 0.5em 1em 0em 1em;}
.index-shop .list .info h4 { line-height: 1.2em; max-height: 2.4em; text-align: center; margin-bottom: 0.3em; font-size: 16px; font-weight: 400; overflow: hidden; }
.index-shop .list .info .note { background-color: #ce6666; color: #ffffff; font-size: 18px; display: block; width: 100px; text-align: center; margin: 20px auto 0 auto; padding: 5px 10px; border-radius: 6px 6px 0 0;}

/* video-lis */
.video-list { display: flex; flex-wrap: wrap; margin: 0 5px;}
.video-list .list { width: calc(33.3% - 10px); margin: 5px;  }
.video-list .list .video { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 6px; overflow: hidden; transition: all 0.3s ease; position: relative; transition: all 0.3s ease;  cursor: pointer;}
.video-list .list .video:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 56%; }
.video-list .list .video:after { content: ''; display: block;  width: 3em; height: 3em; position: absolute; top: calc(50% - 1.5em); left: calc(50% - 1.5em); background-image: url(../images/btn-play.svg); background-repeat: no-repeat; background-size: cover; background-position: center; z-index: 10; }


.video-list .list .video:hover { filter: brightness(1.2);}
.video-list .list .time { font-size: 14px; color: #1c9de7; padding: 0.4em 0;}
.video-list .list h3 { font-size: 18px; padding-bottom: 0.5em;}


/* index-banner */
.index-banner { position: relative; }
.index-banner .index-banner-bottom { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 0%; padding-bottom: 7.8%; background-image: url(../images/banner-cover.png);  background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom;   } 

/* footer */
footer { padding: 15px 0px 0px 0px; position: relative; z-index: 1; background-color: #333333; font-size: 14px;  color: #eaeaea; border-top: 6px #d80090 solid;}
footer:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../images/footer.png); background-position: right center; background-size: contain; background-repeat: no-repeat; opacity: 0.5; z-index: -1;}
.foot-main { max-width: 1200px; margin: 0 auto;}
.foot-main .list-box {  display: flex; flex-wrap: wrap; margin-bottom: 0.3em; line-height: 28px; }
.foot-main .list-box h4 { color: #fffedb; margin-right: 1.5em; font-weight: 500;  }
.foot-main .list-box .list { margin-right: 1em; } 

footer .count-box {  background-color: #111111; text-align: center; padding: 0.5em 0 0.2em 0; max-width: 200px; margin: 0 auto; border-radius: 12px 12px 0 0;}
footer .count-box span { color: #b9b18f; padding: 0 0.5em; font-size: 1.2em;}

footer .social-list-box { flex: 1; }
footer .social-list-box a { display: inline-block; margin-right: 0.5em; transition: all 0.3s ease;}
footer .social-list-box a:hover { opacity: 0.8;}
footer .social-list-box a.icon.icon-contact::before { width: 36px;} 

.copyright {   color: #b3b3b3; padding: 12px; background-color: #111111; text-align: center; }


/* foot-icon */
.foot-icon { position: absolute; right: 0; bottom: 0;}
.foot-icon a { display: inline-block; width: 24px; background-position: center; background-repeat: no-repeat; background-size: contain; margin: 0 3px; vertical-align: middle; }
.foot-icon a:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%;}
.foot-icon a.cs { width: auto; line-height: 22px; background-color: #313131; border-radius: 5px; font-size: 14px; color: #ffffff; padding: 0 15px; vertical-align: middle; }
.foot-icon br { display: none;}
.foot-icon a.cs:before { display: inline-block; width: 18px; padding-bottom: 24px; background-image: url(../images/icon-phone.png); background-position: center; background-repeat: no-repeat; background-size: contain; margin-right: 5px; vertical-align: middle; }

.foot-icon a.fb { background-image: url(../images/icon-01.svg);}
.foot-icon a.ig { background-image: url(../images/icon-02.svg);}
.foot-icon a.line { background-image: url(../images/icon-06.svg);}
.foot-icon a:hover { opacity: 0.6;}

.foot-icon a.app-icon { width: 77px;}
.foot-icon a.app-icon:before { padding-bottom: 32.71%; }
.foot-icon a.app-icon.andorid { background-image: url(../images/app-android.svg);}
.foot-icon a.app-icon.apple { background-image: url(../images/app-apple.svg);}

.icon::before { content: ''; width: 28px; height: 28px; display: inline-block; background-position: center; background-repeat: no-repeat; background-size: cover; }
.icon.icon-fb::before  { background-image: url(../images/icon-fb.svg);}
.icon.icon-contact::before  { background-image: url(../images/icon-contact.svg);}


/* contact-body */
.contact-body .form-note { text-align: center; margin-bottom: 30px; }

/* form-body */
.form-body { max-width: 480px; margin: 0 auto;}
.form-body .list { display: flex; flex-wrap: wrap; margin-bottom: 12px; font-size: 16px;}
.form-body .list label { flex: none; width: auto; margin-right: 15px; padding: 0.5em 0; }
.form-body .list .note { flex: none; width: 100%; color: #ff0000; font-size: 14px; padding:5px 0 0 6em; }
.form-body .list input.text,
.form-body .list select.select-list,
.form-body .list textarea { flex: 1; border-radius: 4px; border: 1px #dddddd solid; padding: 0.5em 0.75em; font-size: 1em; }
.form-data { flex: 1; border-radius: 4px; border: 0px #dddddd solid; padding: 0.5em 0.75em 0.5em 0; font-size: 1em; }
.form-body .list.code input.text { width: calc(100% - 110px); flex: none;}
.form-body .list.code button.vercode { width: 100px; flex: none; text-align: center; margin: 0 0 0 10px; }


.form-body .list.city-area { flex: 1;}
.form-body .list.city-area select.select-list.city { flex: 1; margin-right: 5px; }
.form-body .list.city-area select.select-list.area { flex: 1; margin-left: 5px; }
.form-body .list.city-area input.road { margin-top: 10px; width: 100%; flex: none;}


.form-body .list.radio.country { font-size: 18px; text-align: center; display: flex; justify-content: center; } 
.form-body .list.radio input { display: inline-block; width: 20px; height: 20px; margin: 0 5px 0 0; border: 1px #dddddd solid;}
.form-body .list.radio > div { display: flex; align-items: center; margin: 0 1em　0 0; color: #666666;}

.form-body.member-form { max-width: 100%;}

.form-body .list.mug-shot { display: block;}
.form-body .list.mug-shot .photo { max-width: 320px; width: 90%; flex: none; position: relative; border: 1px #e9e9e9 solid; border-radius: 6px; overflow: hidden; margin: 0 auto 15px auto; } 
.form-body .list.mug-shot .photo:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 100%; } 
.form-body .list.mug-shot .photo span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url(../images/shop-cover-defalt.png);}
.form-body .list.mug-shot .text { display: block; width: 100%; max-width: 320px; margin: 0 auto;}


.form-btn { text-align: center; padding: 1em 0;}
.form-btn button { display: inline-block; padding: 0.5em 1em; margin: 0 2px; border-radius: 4px; border: 0; transition: all 0.3s ease; cursor: pointer; font-size: 16px; color: #ffffff;}
.form-btn button.btn-reset { background-color: #1c9de7;}
.form-btn button.btn-reset:hover { background-color: #00558d;}
.form-btn button.btn-send { background-color: #333333;}
.form-btn button.btn-send:hover { background-color: #5a5a5a;}
.form-btn button.btn-sign-up { background-color: #f75a5a; width: 100%; margin: 0;}
.form-btn button.btn-sign-up:hover { background-color: #b41010;}
.form-btn button.btn-login { background-color: #f75a5a; width: 100%; margin: 0;}
.form-btn button.btn-login:hover { background-color: #b41010;}

.agree-info { padding: 0.5em 0; display: flex; align-items: center; color: #686868;}
.agree-info input.checkbox { width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; }
.agree-info a { color: #e71c6a; padding: 0 5px;}

.sign-forget { display: flex;}
.sign-forget a { flex: 1;}
.sign-forget a.sign { color: #666666; }
.sign-forget a.forget { color: #666666; text-align: right; }

.socail-login { display: flex; flex-wrap: wrap; padding-top: 1em;}
.socail-login button { flex: none; width: 100%; margin: 8px 0 0 0; display: block; font-size: 16px; border: 0; border-radius: 6px; background-color: #333333; color: #ffffff; padding: 0.5em 1em; text-align: center; }
.socail-login button.fb { background-color: #1266ac;}
.socail-login button.google { background-color: #da3636;}

/* 框架 */
.col-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -0.5%;
}

.content-box img {  max-width: 100%; width: auto; height: auto;}
.max-w860 { max-width: 860px; margin: 0 auto;}
.max-w640 { max-width: 640px; margin: 0 auto;}
.col-1 { width: 8.33%; margin: 0 0.5%; }
.col-2 { width: 15.66%; margin: 0 0.5%; }
.col-3 { width: 23.99%; margin: 0 0.5%; }
.col-4 { width: 32.32%; margin: 0 0.5%; }
.col-5 { width: 40.65%; margin: 0 0.5%; }
.col-6 { width: 48.98%; margin: 0 0.5%; }
.col-7 { width: 57.31%; margin: 0 0.5%; }
.col-8 { width: 65.64%; margin: 0 0.5%; }
.col-9 { width: 73.97%;  margin: 0 0.5%; }
.col-10 { width: 82.3%; margin: 0 0.5%; }
.col-11 { width: 90.63%; margin: 0 0.5%; }
.col-12 { width: 99%; margin: 0 0.5%;}

img.btn-icon { display: inline-block; width: 16px !important; height: auto; margin-right: 10px; vertical-align: middle; }

/***** 表單預設文字顏色設定 *****/
/* 通用 */
::-webkit-input-placeholder { color: #696969;}
::-moz-placeholder { color: #696969; }

/* firefox 19+ */
:-ms-input-placeholder { color: #696969; }

/* ie */
input:-moz-placeholder { color: #836363; }

/* webkit专用 */
#field2::-webkit-input-placeholder { color: #696969; }
#field3::-webkit-input-placeholder { color: #696969; background: lightgreen; text-transform: uppercase; }
#field4::-webkit-input-placeholder { font-style: italic; text-decoration: overline; letter-spacing: 3px; color: #696969; }

/* mozilla专用 */
#field2::-moz-placeholder { color: #696969; }
#field3::-moz-placeholder {  color: #696969; background: lightgreen; text-transform: uppercase; }
#field4::-moz-placeholder { font-style: italic; text-decoration: overline; letter-spacing: 3px;  color: #696969;}


/* pop */
.pop { position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); top: 0; right: 0; z-index: 996; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center;  justify-content: center; transition: all 0.5s ease; opacity: 0; visibility: hidden; }
.pop.open {  opacity: 1; visibility: visible; transition: all 0.5s ease; }
.pop-body { background-color: #ffffff; border-radius: 15px; max-width: 640px;  width: 80%;  max-height: 800px; height: 90%;  max-height: 480px; padding: 20px; overflow: hidden; position: relative;}

.pop-cont { overflow-y: auto; height: calc(100% - 10px); max-height: 710px;}
.pop-body h2 { text-align: center;}
.pop-body h3 { color: #727071; text-align: center;}
.pop .btn-close { display: block; width: 40px; height: 40px; background-image: url(../images/btn-close.png); background-size: cover; position: absolute; top: 20px; right: 20px; cursor: pointer; }
.pop .btn-close:hover { opacity: 0.8; }


/*top*/
.top {  position: fixed; right: -70px; bottom: 20px; width: 50px; height: 50px; border-radius: 4px; box-shadow: 0 0 5px #9e9e9e; background-color: #222222; color: #ffffff; font-size: 14px; text-align: center;  z-index: 850; cursor: pointer; transition: all 0.3s ease; }
.top:hover {  background-color: #b32424; transition: all 0.3s ease; }
.top:before { content: ''; display: block; width: 12px; height: 12px;  margin: 7px auto 2px auto; background-image: url(../images/top-arrow.png); background-repeat: no-repeat; background-position: center; background-size: contain; }
button.copy-btn { background-color: #000000; color: #ffffff; width: 100px; }
.member-form .form-lis button.copy-btn { float: right;} 

/* scrollbar */
::-webkit-scrollbar-track
{   border-radius: 10px; background-color: transparent; margin:0 5px; background-color: rgba(255 255 255 / 30%); }
::-webkit-scrollbar
{ background-color: transparent; height: 6px; width: 6px; margin: 5px; }
::-webkit-scrollbar-thumb
{ border-radius: 10px; -webkit-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #acadae; }