@charset "UTF-8";

/* 字型 */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,700&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;600&display=swap'); */
/*@import "//db.onlinewebfonts.com/c/736cf5b08b01082a3645e14038868e20?family=Krungthep";*/


/* 基本&共用 */
html {font-size: 20px;}
body {font-family:"PingFang TC","Noto Sans TC","SF Pro TC","SF Pro Text","Microsoft JhengHei", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: normal; color: #333; min-width: auto; line-height: 1.6;}
header {max-width: 1142px; margin:0 auto; font-size: 1rem;}
section#header {position: relative;} /* header不固定 */
section#header ~ .header-spacer {display: none;} /* header-spacer佔位不出現 */
.nekos {margin: 0;}
section.footer a {color: rgba(0, 0, 0, 0.5); font-size: 0.75rem;}
section.footer .nekos {display: block; text-align: center;}
section.footer .miniature {color: #999;}
a { transition: all .2s; position: relative;}
a:hover {text-decoration: underline; border: 0; transition: all .2s;}
a:hover img {transform: scale(0.98);}
a:focus {outline: 0; border: 0; text-decoration: none;}

.img-hover {opacity: 0;}
a:hover .img-hover-hide {opacity: 0;}
a:hover .img-hover {position: absolute; padding-top: 2%; left: 0; right: 0; bottom: 0; transform: scale(1); opacity: 1;}

h1 {text-align: center; padding: 40px 0;}
h3 {font-size: 1.4rem; color: #a2e2ff; padding: 0; margin-top: 0; margin-bottom: 0; text-align: center; line-height: 1.4; font-weight: 700;}
.h3-note {text-align: center; font-size: 26px; color: #fff; margin-bottom: 1rem;}

.modal-content {background-color: #f8edff; font-size: .9rem;}
.modal-body {padding: 1rem 2rem;}
.modal-header {padding: 4px; border: 0;}
.modal-header .close {position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; opacity: .6; font-size: 1.6rem; z-index: 9;}

.reveal-box .reveal-action-less a {line-height: 1;}
.color-mark {background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255, 222, 0, 0) 49%,rgba(255, 222, 0, 0) 50%,rgba(255, 222, 0, 0) 50%,rgba(255, 222, 0, 1) 100%);}
.is-yellow {color: #ff0; word-break: break-word;}

th, td {line-height: 1.6rem; font-size: .9rem;}
td {background-color: #fff;color: #333 ;padding: 10px; vertical-align: middle;}
.p_table {width: 100%; display: table!important; white-space: nowrap; font-weight: bold;}
.p_table th, .p_table td {border: 1px solid #333; white-space: normal; font-size: .8rem; font-weight: 500;}
.p_table th {background-color: #333; color: #fff; text-align: center; line-height:1rem; font-size: .9rem; font-weight:400; padding:.4rem;}
.p_table .is-del {text-decoration: line-through; font-size:.8rem;}
.p_table select {padding: 0 1.5rem 0 1rem; border:0;}

/* ol li, ul li {margin-bottom: .2rem; margin-top: .2rem;} */

.owl-carousel {position: relative;}
.owl-carousel .owl-stage-outer {padding-bottom: 10px;}
.owl-carousel.owl-drag .owl-item {justify-content: center;}
.owl-carousel.nekos .neko {padding: 1.4rem;}
.owl-theme .owl-dots .owl-dot span {background: #d9d9d9; width: 14px; height: 14px;}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #eac195;}
.owl-theme .owl-nav .nav-circle-left, .owl-theme .owl-nav .nav-circle-right {background: none; padding: 0; width: 38px; height: auto; box-shadow: none;}
.owl-theme .owl-nav .nav-circle-left .iconic, .owl-theme .owl-nav .nav-circle-right .iconic {background-color: rgba(215,103,0,0.95); width: 100%; height: 1.9rem; opacity: .6; border-radius: 50%;}
.owl-theme .owl-nav .nav-circle-right .iconic {padding: 0.2rem 0 0.2rem 0.2rem;}
.owl-theme .owl-nav .nav-circle-left .iconic {padding: 0.2rem 0.2rem 0.2rem 0;}
.owl-theme[data-items-desktop='1'] .owl-nav .nav-circle-right {right: -15px;}
.owl-theme[data-items-desktop='1'] .owl-nav .nav-circle-left {left: -15px;}

.card, .card:hover {box-shadow: none;}
.card .sub-name {margin-top: .6rem;}
.card .sub-name, .card .sub-content {font-size: .9rem;}
.card .sub-content {color: #f0f; min-height: 55px;}
.card .miniature {margin-top: .4rem; margin-bottom: .5rem; font-size: .8rem; color:#ff874d;}
.card-text {font-size:.9rem; font-weight: 300; padding: 20px 0 0; text-align: justify;}
.card-table {margin: 0 auto; padding: 0; width: 90%;}

.vip-btn {text-align: center; margin-top: 0; margin-bottom: 0; font-size: .8rem; color:#fff;}
.vip-btn .button {font-size: 1rem; padding: .6em .8em; width: 220px; box-shadow: none;}
.button-gray {background: none; border: 1px solid #fcf4cf; color: #fcf4cf;}
.button-gray:hover {color: #fff;}
.button-red {
background: #cf0404; /* Old browsers */
background: linear-gradient(to bottom, #cf0404 0%,#f44f1e 7%,#df4f1c 30%,#b32605 70%,#892517 100%);
color: #fcf4cf;}
.button-red:hover {color: #fff;}
.button.button-disable {background: none; border: 1px solid rgba(252, 244, 207,.4); color: rgba(252, 244, 207,.4);}
.button.button-disable:hover {transform: scale(1);}

.card-btn {text-align: center; margin: 0.8rem 0; line-height: 1.6;}
.card-btn a {font-size: 0.9rem; width: 200px;}
.package-label {margin: 0; text-align: center; font-size: .9rem;}
.package-label>ul {list-style: none;}
.package-label>ul>li {text-align: justify; line-height: 2rem; margin-bottom: .4rem; color: #fff;}
.package-label>ul>li>span {color:#ff0; word-break: break-word;}

.card.product {position: relative;}
.card.product .card-text.content-center {text-align: center;}
.card.product .card-img {background: #fcf4cf; height: 375px; margin: 1.2rem 1rem 0; padding: 0; align-items: center; justify-content: center; display: flex;}
.card.product .card-img img {margin: 0 auto; width: initial;}

.scrollbar-inner > .scroll-element.scroll-y {width: 6px;}

.container {margin: 0 auto; padding:0; width: 100%; max-width: 1106px;}
#cht_wrapper { margin: 0 auto; padding: 0; width: 100%;}
.container-fluid {padding-top: 1rem;}
.container-light-a {position: relative; color: #111;}
.container .package-label {/* width: 1060px; */ float: none; margin: 0 auto;}
.container .package-label .button {font-size: 1rem; padding: .6em 1.8em; text-align: center; box-shadow: none;}
.container .package-label .button:hover, .container .package-label .button:focus {color: #fff;}

section#footer {padding-top: 0;}
section#footer hr {background: transparent; border: none; border-top: 1px solid #333; margin-top: 0; height: 1px; opacity: .2;}
section#footer .footer-site-links {position: relative;}
section#footer .footer-site-links .misc-links, section.footer .footer-site-links .miniature {text-align: center;}
section#footer.no-footer-logo .footer-links-copyright {display: block;}
section#footer.no-footer-logo .footer-site-links {justify-content: center;}
section#footer.no-footer-logo .site-links-copyright {align-items: center; margin-left: 0;}
section#footer.no-footer-logo .footer-scroll-top {position: absolute; right: 10px; top: 0; display: flex; justify-content: center; align-items: center; height: 36px; width: 36px; user-select: none; cursor: pointer; z-index: 10;}


/* tab列 */
.tab {background-color: #c8c5fb;}
.tab .tab-wrap {line-height: 2.6rem;}
.tab .tab-wrap a {font-size: 0.95rem; color: #331dbf; font-weight: bold; text-shadow: 0 0 8px #fff; padding: 0 .8rem; margin: 0 0.25rem; line-height: 2rem;}
.tab .tab-wrap a:hover {color: #df2d43;}
.tab.tab-sticky.is_stuck {height: auto; padding-top: 0;}
.tab .tab-container {width: auto; max-width: none;}
.tab.tab-sticky ul.tab-wrap li.active a, .tab.tab-sticky ul.tab-wrap li.active a.active, .tab.tab-sticky ul.tab-wrap li.active a.current, .tab.tab-sticky ul.tab-wrap li.current a, .tab.tab-sticky ul.tab-wrap li.current a.active, .tab.tab-sticky ul.tab-wrap li.current a.current {color: #df2d43; border-color: transparent; background-color: rgba(255, 255, 255, 0.3); border-radius: 40px;}


#tab_lotto, #tab_lotto_discount, #tab_mobile, #tab_hinet, #tab_hamivideo, #tab_mod, #tab_roaming, #tab_prepaid, #tab_vas, #tab_hamigo {display: block; position: relative; top: -60px; visibility: hidden;}
#tab_lotto_discount {top: -230px;}
#tab_lotto_movie-desktop {top: -100px;}

.sec-btn {position: absolute; top: 0;}
.sec-btn a {width: 100%; display: block;}
.sec-btn img {max-width: 100%;}

.content {background: url(../img/sec-hamivideo-bg.jpg) #7ac0f1  no-repeat center bottom; background-size: cover; left: 0; top: 0; bottom: 0; right: 0;}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}

/* KV */
.kv-banner {position: relative;}
.kv-topic-people-1 {top: 6.5%; left: 68%; width: 15%; z-index: 9;}
.kv-topic-people-2 {top: 16.5%; left: 19.5%; width: 10.5%; z-index: 8;}
.kv-topic-people-3 {top: 46.5%; left: 63%; width: 13%; z-index: 7;}

/* HamiVideo hamivideo-sec */
section.hamivideo-sec {position: relative; padding: 2rem 0 22rem 0;}
/* section.hamivideo-sec::before {content: ''; position: absolute; background: url(../img/sec-hamivideo-bg.jpg) #7ac0f1  no-repeat center bottom; left: 0; top: 0; bottom: 0; right: 0; display: block;} */
section.hamivideo-sec .container {position: relative; padding: 0 0 3.4rem 0; z-index: 1;}
.hamivideo-sec-container {position: relative;}
.hamivideo-sec-btn1 {padding-top: 38.5%; left: 81%; width: 14%; z-index: 9;}
.hamivideo-sec-btn2 {padding-top: 54%; left: 81%; width: 14%; z-index: 8;}
.hamivideo-sec-btn3 {padding-top: 70%; left: 81%; width: 14%; z-index: 7;}
.hamivideo-sec-btn4 {padding-top: 87%; left: 81%; width: 14%; z-index: 6;}
.hamivideo-recommend-title {padding-top: 116%; left: 30%; width: 40%; z-index: 5;}
.hamivideo-sec-btn5 {padding-top: 132%; left: 0; width: 47.4%; z-index: 4;}
.hamivideo-sec-btn6 {padding-top: 132%; left: 52%; width: 47.4%; z-index: 3;}

/* .hamivideo-sec-btn1 img, .hamivideo-sec-btn2 img, .hamivideo-sec-btn3 img, .hamivideo-sec-btn4 img {box-shadow: -4px 4px 8px #999;} */


@media screen and (max-width: 767px) {
	/* 基本&共用-mobile */
	section#header {background:#fff; z-index: 399;}
	section#footer .container {background: none; border: 0; box-shadow: none;}
	.m-break {display: block;}
	h1 {padding: 20px 0;}
	h3 {font-size: 1.4rem; padding: 0; margin: 0 0 1.2rem 0; text-align: center;}
	h3 .br-m {display: block; font-style: normal;}
	.h3-note {/*margin-bottom: 0.2rem;*/ font-size: 1rem;}
	.h3-note span {margin-bottom: 0.2rem; font-size: .6rem;}
	a.button.button-gray { margin-right: 0;}
	ol,ul{margin: 0 0 0 24px;}

	.p_table {font-size: .8rem;}
	.p_table th, .p_table td {font-size: .75rem; line-height: 1.6rem; padding: .4rem; word-break: break-word;}

	.col-xs-12 {padding-right: 0; padding-left: 0;}
	.modal-body {padding: .6rem;}
	.modal-content {font-size: .8rem;}

	.card.product .card-img {height: auto;}
	.card.product .card-img img{height: auto;}

	.package-label {padding: 0;}
	.package-label>ul>li {line-height: 1.4rem; margin-bottom: .8rem; display: block;}

	.owl-carousel.nekos .neko {background: none; padding: 0; margin: 0;}
	.owl-carousel .owl-item {margin: 0 10px;}
	.owl-theme .owl-nav .nav-circle-left, .owl-theme .owl-nav .nav-circle-right {display: initial;}
	.owl-theme .owl-dots .owl-dot span {width: 12px; height: 12px;}

	.card-btn {position: absolute; left: .5rem; right: .5rem; bottom: 1rem;}
	.card-btn a{font-size: 0.8rem; padding: 0.6rem 0.8rem; width: 45%;}

	.container {padding: 0 5px !important;}
	.container-fluid {margin-top:0; padding: 0;}
	.container .package-label {width: auto; margin-bottom: 1rem;}

	section.footer .official-links a {width: auto; overflow: hidden; display: flex; flex-wrap: wrap;}
	section#footer .footer-site-links .misc-links, section#footer .footer-site-links .miniature {text-align: center; font-size: .75rem;}
	section#footer .footer-site-links .misc-links a {white-space: nowrap; margin-right: 0.3rem; padding-right: 0.3rem;}
	section#footer.no-footer-logo .footer-site-links {width: auto; justify-content: space-between; display: inline;}

	/* tab列-mobile */
    #tab_lotto_movie-mobile {top: -200px;}

	/* .content .tab {height:auto; margin-top: 0; line-height: 1.6rem; opacity: 0;}
	.content .tab.tab-sticky.aos-animate {visibility: visible; z-index: 399; opacity: 1;}
	.content .tab#tab-anchor {visibility: hidden; height: 0;} */

	.content .tab .tab-wrap li {padding: 0 .6rem; margin: 0;}
	.content .tab .tab-wrap li a {font-size: .8rem; padding: 0;}
	.content .tab .tab-wrap li.current a, .content .tab .tab-wrap li a:hover {background: none !important; color: #df2d43;}
	.content .tab.tab-sticky#tab-anchor {position: relative; background: none; width: auto; right: 0; left: 0; padding: 0; top: initial; margin-top: 0; box-shadow: none;}
	.tab.tab-sticky.is_stuck.aos-animate {width: 100%; right: 0; left: 0; top: 60px; box-shadow: initial;}
	.content .tab.tab-sticky ul.tab-wrap {background: #c8c5fb; padding-right: 2rem; flex-direction: row; transition: all 0.2s;}
	.tab.tab-sticky.is_stuck .tab-wrap:after {display: none;}
	.tab.tab-sticky.is_stuck .tab-show-expand {position: absolute; right: 0; bottom: 6px; z-index: 19;}
	.tab.tab-sticky.is_stuck .tab-show-expand a {color: #471dbf; padding: 0.3rem 0.2rem;}
	.tab.tab-sticky.is_stuck .tab-show-expand a:hover {text-decoration: none;}
	.tab.tab-sticky.is_stuck .tab-show-expand .tab-close, .tab.tab-sticky.is_stuck.open .tab-show-expand .tab-open {display: none;}
	.tab.tab-sticky.is_stuck.open {z-index: 999;}
	.tab.tab-sticky.is_stuck.open #page-nav-1 {flex-wrap: wrap; justify-content: center; padding-right: 1rem; transition: all 0.2s;}
	.tab.tab-sticky.is_stuck.open .tab-show-expand .tab-close {display: block;}
	.tab.tab-sticky.is_stuck.open .tab-container:after {display: none;}
	.tab.tab-sticky.is_stuck.open ul.tab-wrap li {width: 32.5%; padding: 0 0.2rem; border-right: 1px solid rgba(236,228,217,0.4); border-bottom: 1px solid rgba(236,228,217,0.4); text-align: center;}
	.tab.tab-sticky.is_stuck.open ul.tab-wrap li:nth-child(1), .tab.tab-sticky.is_stuck.open ul.tab-wrap li:nth-child(2), .tab.tab-sticky.is_stuck.open ul.tab-wrap li:nth-child(3) {border-top: 1px solid rgba(236,228,217,0.4);}
	.tab.tab-sticky.is_stuck.open ul.tab-wrap li:nth-child(1), .tab.tab-sticky.is_stuck.open ul.tab-wrap li:nth-child(4), .tab.tab-sticky.is_stuck.open ul.tab-wrap li:nth-child(7) {border-left: 1px solid rgba(236,228,217,0.4);}

	.content .tab#tab-anchor .tab-wrap {background: url(../images/m-bg.jpg) repeat center top; background-size: cover; min-width: auto; justify-content: center; margin: 0 auto; flex-direction: row; padding: 0; flex-wrap: wrap;}
	.content .tab#tab-anchor .tab-wrap li {height: auto; background: rgb(200 197 251 / 90%); padding: 0 .4rem; width: 31%; text-align: center; margin: .2rem 0.1rem 0 0.1rem; border-radius: 4px; line-height: 1.6;}
	/*.content .tab#tab-anchor .tab-wrap li a {width: auto; height: auto; color: #fcf4cf; line-height: 1.4;}*/
	.content .tab#tab-anchor .tab-wrap li a img.menu-hover {left: 0;}
	.content .tab#tab-anchor .tab-wrap:after {display: none;}
	.content .tab .tab-container:after {background: linear-gradient(90deg, #c8c5fb 10%, #c8c5fb 100%); width: 2.5rem;}
	.content .tab#tab-anchor .tab-container:after {display: none;}


	.content {background: url(../img/m-sec-hamivideo-bg.jpg) #7ac0f1  no-repeat center bottom; background-size: cover; left: 0; top: 0; bottom: 0; right: 0;}

	/* HamiVideo hamivideo-sec */
	section.hamivideo-sec {padding: 1rem 0 32rem 0;}
	section.hamivideo-sec .container {padding: 0 0.6rem !important;}
	/* section.hamivideo-sec::before {background: url(../images/m-bg-2.jpg) repeat center -20px; background-size: cover;} */
	.hamivideo-sec-btn1 {padding-top: 100%; left: 55%; width: 32%; z-index: 9;}
	.hamivideo-sec-btn2 {padding-top: 154.5%; left: 55%; width: 32%; z-index: 8;}
	.hamivideo-sec-btn3 {padding-top: 207.5%; left: 55%; width: 32%; z-index: 7;}
	.hamivideo-sec-btn4 {padding-top: 287.5%; left: 55%; width: 32%; z-index: 6;}
	.hamivideo-recommend-title {padding-top: 365%; left: 10%; width: 80%; z-index: 5;}
	.hamivideo-sec-btn5 {padding-top: 398%; left: 0%; width: 100%; z-index: 4;}
	.hamivideo-sec-btn6 {padding-top: 452%; left: 0%; width: 100%; z-index: 3;}
	/* .hamivideo-sec-carousel-1 {position: absolute; top: 0; padding-top: 69%; left: 6%; width: 88%; z-index: 11;} */
	/* .hamivideo-sec-carousel-2 {position: absolute; top: 0; padding-top: 166.5%; left: 6%; width: 88%; z-index: 10;} */

	/* .hamivideo-sec-carousel-1 .owl-item img, .hamivideo-sec-carousel-2 .owl-item img {box-shadow: -4px 4px 8px #999;}
	.hamivideo-sec .owl-theme .owl-nav .nav-circle-left .iconic, .hamivideo-sec .owl-theme .owl-nav .nav-circle-right .iconic {background-color: rgba(58,163,28,0.95);}
	.hamivideo-sec .owl-theme .owl-nav .nav-circle-left {left: -5px;}
	.hamivideo-sec .owl-theme .owl-nav .nav-circle-right {right: -5px;}
	.hamivideo-sec .owl-theme .owl-dots .owl-dot.active span, .hamivideo-sec .owl-theme .owl-dots .owl-dot:hover span {background: #62BB53;} */

}