@charset "UTF-8";
/* ---- 改版方案頁 Start Mario 2022/9/15 ---- */
body { background: #12172c; }
.content { background: #12172c; position: relative; }
.clearfix{ clear: both;}

/* 麵包屑 */
#bread_crumbs { position: absolute; z-index: 1; left: 3%; top: 100px; }
#bread_crumbs .breadcrumb-item { display: inline-block; color: #e7e7e7; font-size: 16px; }
#bread_crumbs .breadcrumb-item .link-to { color: #e7e7e7; opacity: 0.9; transition: 0.15s linear; }
#bread_crumbs .breadcrumb-item .link-to:hover { opacity: 1; color: #fff; }
#bread_crumbs .breadcrumb-item img { margin-right: 5px; display: inline; vertical-align: baseline; }
#bread_crumbs .breadcrumb-item::before { content: '/'; margin: 0 10px; }
#bread_crumbs .breadcrumb-item:nth-child(1)::before { content: ''; margin: 0;}
#bread_crumbs .breadcrumb-item.active { color: #fff; font-weight: 700; }
#bread_crumbs .breadcrumb-item.active .link-to { color: #fff; opacity: 1;cursor: auto; }

/* 版頭文字區塊 */
#packages_con { position:relative; display:block; overflow:hidden; height: auto;  width:100%; background-color:#12172c; }
.section_head_img { overflow:hidden; height:600px; display:block;}
.section_head_img img { width:100%; height:100%; display:block; }
.pac_area { width:100%; position:absolute; z-index:99; top:140px; padding: 0 10%; }
.pac_area h2, h3 { text-shadow:2px 2px 2px #000000; display:block; color:#FFFFFF; }
.pac_area h2 { font-size:44px; font-weight:bold; border-bottom:3px solid #089bd2; width:fit-content; padding-bottom: 5px;}
.pac_area h3 { font-size:24px; margin-top:20px; line-height: 34px; }
.pac_btncon { width:auto; display:block; overflow:hidden; margin-top:40px; margin-bottom: 90px;}
.pac_btncon p {font-size: 16px; color: #CECECE;}
.pac_btncon p .price { font-size: 30px; color: #fff; margin-left: 8px;}
.pac_btncon p .month { font-size: 16px; color: #fff;}
.pac_btncon .btn-freetrial, .btn-sn { display:inline-block; width: 160px; height: 50px; border: 1.2px solid #CECECE; text-decoration:none; color:#FFFFFF; font-size:20px; line-height: 50px; border-radius:5px; text-align: center; transition: all 0.3s ease-in 0s; margin-right:10px; }
.pac_btncon .btn-freetrial { width: 240px; background-color:#1B62B4; border: none; border: 1px solid #1B62B4; }
.pac_btncon .btn-freetrial:hover { background-color:#fff; border: 1px solid #1B62B4; color: #1B62B4; }
.pac_btncon .btn-sn:hover { border: 1.2px solid #fff; color: #fff; text-decoration: none; }
.pac_btncon .pac_more { display: block; width: fit-content; color: #fff; font-size: 18px; text-decoration-line: underline; margin-top: 20px; }
.pac_btncon .pac_more:hover { color: #CECECE; }

/* 隨時隨地盡享影音樂趣 - 六張圖片區 */
.section_intro_imgs { margin: 0 auto; max-width: 1280px; }
.section_intro_imgs .intro_imgs_title { font-size: 40px; line-height: 56px; text-align: center; color: #fff; margin: 0; font-weight: 600; }
.section_intro_imgs .intro_imgs { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 40px; padding: 0;}
.section_intro_imgs .intro_imgs .intro_img_item { position: relative; width: 30%; display: flex; align-items: center; flex-direction: column; margin-bottom: 60px; }
.section_intro_imgs .intro_imgs .intro_img_item .img_box { position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; }
.section_intro_imgs .intro_imgs .intro_img_item .img_box .pic { width: 100%; height: 100%; object-fit: contain; object-position: center; position: absolute; }
.section_intro_imgs .intro_imgs .intro_img_item .intro_text{ font-size: 24px; line-height: 24px; text-align: center; color: #FFFFFF; margin-top: 40px;}

/* 方案卡片區塊 */
#price_area{  width:100%; display:block; overflow:hidden; text-align:center; padding-bottom:20px; background: #172045; }
#price_area h2 { font-size: 40px; font-weight: 600; margin-top: 80px; margin-bottom: 20px; }
/* #price_area h4, .pack_bancon h4{font-size:20px; margin-top:20px; color:#FFFFFF; text-align:center; font-weight:bold !important;} */
.pac_w18{font-size: 20px; color:#FFFFFF; text-align:center; margin-bottom: 28px;}
.choice_pro{clear:left; width:100%; margin:0 auto;}
.choice_pro ul.tabs { width:100%; height:36px; padding:0; margin:0; border-bottom:1px solid #999999; position: relative; }
.choice_pro ul.tabs li { display:inline-block; width: fit-content; height: 36px; padding: 0 20px; }
.choice_pro ul.tabs li.tab_right_buttons { position: absolute; right: 10%; width: 20%; text-align: end; }
.choice_pro ul.tabs li.tab_right_buttons .sn_change { width: 84px; height: 28px; font-size: 14px; background: #1B62B4; border-radius: 28px; border: none; color: #fff; line-height: 28px;}
.choice_pro ul.tabs li.tab_right_buttons .sn_change:hover { border:1px solid #089BD2; background-color: initial; color:#089BD2; }
.choice_pro ul.tabs li.tab_right_buttons .member_right { width: 84px; height: 28px; font-size: 14px; border: 1px solid #FFFFFF; border-radius: 28px;  background-color: initial; margin-left: 10px; color: #fff; line-height: 28px; }
.choice_pro ul.tabs li.tab_right_buttons .member_right:hover { border:1px solid #089BD2; background-color: initial; color:#089BD2; }
.choice_pro ul.tabs li i{ font-size:13px; color:#05BDFF;}
.choice_pro ul.tabs li a { display:inline-block; width:100%; color:#C3C3C3; text-decoration: none; font-size:18px; text-align:center; }
.choice_pro ul.tabs li a:hover { color:#00A4DF; }
.choice_pro ul.tabs li.active_a { border-bottom: 3px solid #089bd2; }
.choice_pro ul.tabs li.active_a a{ font-size:18px; color:#00A4DF; }
.choice_pro ul.tabs li.active_a a:hover { }

.tab_content .two_con{ width: 100%; margin: 0 auto; text-align: center;display: flex; display: inline-flex; justify-content: center;}
span.promote_con{ text-align:center; font-size:16px; color:#FFFFFF; padding: 15px 0 15px 0; display: block;}
.choice_pro .tab_container{ height:auto; margin:0 auto; display:block; overflow:hidden; margin-top:30px;width: 95%;}
.choice_pro .tab_container div.p_bigcon{ border: 1px solid #4F60AA; background: rgba(98, 119, 208, 0.2); border-radius: 10px; width: 300px; display:inline-block; padding:15px; position:relative; transition:all 600ms ease; overflow: hidden; margin: 0 5px; padding-bottom: 100px; }
.choice_pro .tab_container div.p_bigcon:hover{ transform: translateY(-10px); opacity: 1; }
.choice_pro .tab_container div.p_bigcon.on{ transform: translateY(-10px); opacity: 1; }
.prmo_pink{ position: absolute; top:1px; left: -1px; z-index: 10;}
.p_bigcon .corner { position: absolute; width: 120px; height: 24px; font-size: 15px; font-weight: bold; top: 4%; left: -10%; background: linear-gradient(180deg, #7F2F7A 0%, #2746AF 100%); box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3); transform: rotate(-45deg); display: -ms-flexbox; display: flex; -ms-flex-align: end; align-items: flex-end; -ms-flex-pack: center; justify-content: center; color: #FFF; }
.p_bigcon .pack-contractView { position: absolute; width: 100%; bottom: 0; left: 0; }
.p_bigcon .contractView p{display:inline-block;padding-top:10px;width:100%;border-top:1px solid #4b5d7a70;color:#fff;font-size:14px}
.p_bigcon .p_cancel_package { background: #00AFEB; border-radius: 5px; display: inline-block; padding: 2px 8px; }
.prmo_pink img{ width: 80px !important;height: auto;}
.choice_pro .tab_container .p_title_div{ width: 100%; height: 75px; line-height: 75px; border-bottom: 1px solid #4F60AA; margin-bottom:10px; }
.choice_pro .tab_container span.p_word1{ font-size:20px; font-weight:bold; display:inline-block; vertical-align: middle; line-height: 25px; letter-spacing: 0.5px;}

div.three_con{display:block;overflow:hidden;margin-bottom:5px}
.tab_content ul.three_tabs{display:inline-block;margin:0 auto;padding:0;color: #E7E7E7;}
.tab_content ul.three_tabs li{float:left;display:inline-block;overflow:hidden;height:auto;min-width:84px;vertical-align:middle;border-bottom: 1px solid #FFFDE5;}
.tab_content ul.three_tabs li a{display:inline-block;padding:5px 0;width:84px;color:#d2d2d2;text-decoration:none}
.tab_content ul.three_tabs li.active_b a{color:#FFFDE5;font-weight: bold;border-bottom: 2px solid #FFFDE5;}
.tab_content ul.three_tabs li.active_b a::after{ content: " "; display: block; position: absolute; width: 10px; height: 10px; margin-left: 34px; margin-top: -2px; border-width: 8px; border-style: solid; border-color: transparent #FFFDE5 #FFFDE5 transparent; transform: rotate(45deg); }
.tab_content ul.three_tabs li.active_b a:hover,a.center:hover,a.left:hover,a.right:hover{color:#FFFDE5;font-weight: bold;border-bottom: 2px solid #FFFDE5;}

.tab_content .p_bigcon img{ width:14px; height:auto;  display:inline-block; margin:-2px 3px 0 0;}
.p_w20{ font-size:20px; color:#FFFFFF; letter-spacing:1.5px;}
.p_w48b{ font-size:48px; font-weight: bold; color:#FFFFFF; letter-spacing:0.5px;}
.p_w36b{ font-size:40px; font-weight: bold; color:#FFFFFF; letter-spacing:3px;}
.p_b24{ font-size:24px; font-weight: bold;  color:#05BDFF;}
.p_w22b{ font-size:22px; font-weight: bold; color:#FFFFFF; display:block; margin-bottom:15px;}
.p_w14{ font-size:15px; color:#FFFFFF;}
.p_w14d{ font-size:15px; color:#FFFFFF; text-decoration:line-through;}
.p_g14{font-size:15px; color: #D2D2D2; line-height: 51px; display: block;}
.p_what { font-weight: 400; font-size: 15px; line-height: 24px; letter-spacing: 0.5px; color: #FFFFFF; text-align: left; padding: 0 20px; }
.sale_text { font-weight: 400; font-size: 12px; line-height: 20px; letter-spacing: 0.5px; color: #CECECE; text-decoration:line-through; position: relative; margin: 0; text-align: left; padding-left: 44px; transform: translateY(15px); }
.sale_text .sale_textd { text-decoration:line-through; }
.sale_text .sale_tag { font-weight: bold; color:#fff; font-size: 12px; line-height: 14px; background: #FF8400; border-radius: 5px; padding: 3px 5px; width: 35px; height: 20px; position: absolute; top: 25px; left: 40px; margin-top: -4px; }
ul.p_list{ margin-top:20px; padding: 0 20px;}
ul.p_list li{ display:block; text-align:left; list-style: none; line-height: 28px; padding-left: 2em; text-indent: -1.3em;}
a.p_abtn { cursor: pointer; display:inline-block; border:1px solid #089BD2; text-align:center; background-color:#089BD2; color:#FFF; border-radius: 50px; font-size:18px; font-weight: bold; padding:3px 15px; text-decoration: none; position: absolute; bottom: 10%; transform: translateX(-50%); }
a:hover.p_abtn { border:1px solid #089BD2; background-color: initial; color:#089BD2; }

.go_section_common_question { vertical-align: middle; }
.go_section_common_question img { width: 16px; height: 16px; margin: 0; transform: translateY(-3px); }

/* 會員權益區塊 */
.section_member_right { width: 100%; position: relative; background: #000; padding: 80px 0; }
.section_member_right .member_right_title { font-size: 40px; text-align: center; margin-bottom: 40px; color: #fff; font-weight: 700; margin-top: 0; }
.section_member_right .member_right_container { margin: 0 auto; max-width: 1280px; padding: 0 10%; }
.section_member_right .member_right_container table.packages_memberrights_table { width: 100%; margin: 0; }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr:nth-child(1) .packages_memberrights_table_td { font-weight: 700;}
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td { color: #fff; text-align: center; font-size: .9375em; position: relative; border-radius: 15px; border: 5px solid #000; outline: none; padding: 8px 0; width: calc(82%/3); }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td:nth-child(1) { width: 18%; background: rgba(27, 98, 180, 0.5); font-weight: 700; }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td:nth-child(2) { background: #2A2E39; }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td:nth-child(3) { background: #3F4250; }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td:nth-child(4) { background: #007AA5; }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr:nth-child(1) .packages_memberrights_table_td:nth-child(4) { background: #00AFEB; }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td .check_img { width: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td em { font-size: .85em; }
.section_member_right .member_right_container table.packages_memberrights_table .packages_memberrights_table_tr .packages_memberrights_table_td span { display: inline-block; margin-top: 24px; }
.section_member_right .member_right_container .packages_memberrights_info { margin-left: 5px; margin-top: 5px; }

@media all and (min-width: 768px){
  .member_right .member_right_title { font-size: 40px; margin-bottom: 40px; }
}

/* 常見問題區塊 */
.section_common_question { width: 100%; padding: 80px 0; background: #fff; }
.section_common_question .common_question_title { font-weight: 600; font-size: 40px; line-height: 40px; color: #333333; text-align: center; margin-bottom: 40px; }
.section_common_question .common_questions { width: 100%; padding: 0 10%; position: relative; display: flex; flex-direction: column; flex-wrap: wrap; max-width: 1280px; margin: 0 auto; }
.section_common_question .common_questions .common_question { width: 100%; padding-bottom: 20px; border-bottom: 1px solid #999999; }
.section_common_question .common_questions .common_question .question_title { font-weight: 600; font-size: 18px; line-height: 18px; color: #1B62B4; text-shadow: none; }
.section_common_question .common_questions .common_question table { width: 100%; background: none; border-spacing: 5px; border-collapse: separate; }
.section_common_question .common_questions .common_question table tr {  }
.section_common_question .common_questions .common_question table tr th { text-align: center; height: 36px; border-radius: 5px; font-size: 14px; font-weight: 400; color: #333333; line-height: 16px; padding: 10px; }
.section_common_question .common_questions .common_question table tr th:nth-child(1) { background: #aaaaaa; color: #FFFFFF; font-weight: bold; }
.section_common_question .common_questions .common_question table tr th:nth-child(2) { background: #999999; }
.section_common_question .common_questions .common_question table tr th:nth-child(3) { background: #CECECE; }
.section_common_question .common_questions .common_question table tr th:nth-child(4) { background: #E7E7E7; }
.section_common_question .common_questions .common_question table tr:nth-child(1) th { font-weight: bold; }
.section_common_question .common_questions .common_question table tr:nth-child(4) th { background: #8CB0D9; padding: 20px 0; }
.section_common_question .common_questions .common_question table tr th .buy_now { background: #1B62B4; border-radius: 20px; padding: 5px 15px; width: 90px; height: 30px; border: none; opacity: 1; color: #fff; }
.section_common_question .common_questions .common_question table tr th .buy_now:hover { border:1px solid #fff; background-color: initial; color:#fff; text-decoration: none; }
.section_common_question .common_questions .common_question .answer { font-weight: 400; font-size: 16px; line-height: 28px; color: #333333; }
.section_common_question .common_questions .common_question .answer .text_blue { color: #00AFEB; }
.section_common_question .common_questions .common_question .answer a { color: #00AFEB; text-decoration: underline;}

/* 超值優惠區塊 */
#packages_con .pack_bancon{ overflow:hidden; display:block; background-size:100% auto; height: 800px; position: relative;}
.p_bnslider{ display:block; z-index: 999; background: #000; padding: 80px 0;}
.p_bnslider h2 { font-weight: 600; font-size: 48px; line-height: 48px; text-align: center; color: #FFFFFF; margin-bottom: 40px; }
.p_bnslider li .s_block img{ width:450px; height:auto;}
ul.wordslider{ height: 500px; display: block; width: 600px; margin: 0 auto;}
ul.wordslider li{ background-color: transparent; }

/* 其他購買通路區塊 */
.buyline{ display: block;background-color: transparent;height: auto;overflow: hidden;text-align: center;padding-bottom: 100px; z-index: 999; background: #12172c;}
.buyline h2 { font-weight: 600; font-size: 48px; line-height: 48px; text-align: center; color: #FFFFFF; margin-top: 80px; margin-bottom: 40px; }
.buyline a{ display: inline-block; margin: 20px 10px 0 0;}
.buyline a img{ width:160px; height: auto;}

/* goTop按鈕 */
.gotop.triangle { bottom: 318px; background: #12172c; }


/* ---- 改版方案頁 End Mario 2022/9/15 ---- */


/* ----2019新版購買流程 start----*/
.n_buyflow{ display: block; overflow:hidden; height:780px; background-image: url("/img/buyprocess_bg.jpg"); background-repeat:no-repeat; background-size:100% auto;}
.n_buycon{ width: 800px;  padding-top: 120px; display: block; overflow:hidden; height: auto; margin: 0 auto; text-align: center;}
.step_list{ display: block; text-align: center; margin: 0 auto; width: 200px; height:40px; position: relative; color: #000000; margin-bottom: 30px;}
.step_list .s_onL, .step_list .s_onR, .step_list .s_none, .step_list .s_onLb{ position:absolute; border-radius: 50px; display:block; font-size:22px; font-weight:bold; width:36px; height:36px; text-align: center; line-height: 32px; z-index:100;}
.step_list .s_onL{ left: 0; border: 2px solid #089BD2; background-color: #190037; color: #089BD2; }
.step_list .s_onLb{ left: 0; border: 2px solid #089BD2; background-color: #089BD2; color: #FFF; }
.step_list .s_onLb img{ display:block; width:19px; height:auto; text-align:center; vertical-align: middle; margin:6px;}
.step_list .s_onR{ right: 0; border:2px solid #089BD2; background-color: #190037; color: #089BD2; }
.step_list .s_none{ right: 0; background-color: #4F4F4F; color: #000; border: 2px solid #4F4F4F; }
.step_list .bar{ width:200px; height:2px; background:#4F4F4F; position:absolute; z-index:99; top:15px;}
.step_list .bar2{ width:200px; height:2px; background:#089BD2; position:absolute; z-index:99; top:15px;}
.n_buycon ul.step1{ display:block; overflow:hidden; padding:30px 60px 40px 60px; border: 1px solid #4b5d7a; background-color:#2b254c; border-radius:8px; width: 380px; margin: 0 auto; margin-top: 20px;}
.n_buycon ul.step2{ display:block; overflow:hidden; padding:30px 10px; width:400px; margin:0 auto; margin-top: 0px;}
.n_buycon ul li{ display:block; font-size:16px; color:#FFF; text-align:left; margin:0 auto; margin-bottom: 8px;}
.n_buycon ul.step1 li{ width: 220px;}
.n_buycon ul.step2 li{ width:100%;}
.n_buycon ul li span.w18{ display:inline-block; font-size:20px; color: #FFFFFF;}
.n_buycon ul li span.w44{ display:inline-block; font-size: 44px; font-weight: bold;  color: #FFFFFF; margin: 0 8px;}
.n_buycon li img{ width:14px; height:auto; margin-right:5px;}
.n_buyflow a{ cursor: pointer; display: inline-block; background-color:#1B62B4; padding:6px 20px; color: #FFF; border-radius:50px; margin-top:30px; text-decoration:none; transition:all 500ms ease; font-size:16px;}
.n_buyflow a:hover{ background-color:#089BD2; }
div.comfdata ul{ margin:0 auto; text-align:left; width:450px; margin-top:40px;}
@media screen and (min-width: 990px) and (max-width: 1920px) {
  .head_img { height:740px;}

}

/* popup */
.popup-pakc{ width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 50; background: rgba(0, 0, 0, .9); opacity: 0; display: none; }
.pack-contract{ width: 90%; max-width: 600px; max-height: 90vh; background: #ffffff; padding: 20px 15px; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); overflow-y:auto; z-index: 10; }

.hideinfo{display:none;}


/* 條款popup */
#contractMsg-modal .popup-block .popup-content{ padding: 30px 20px; width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 400px; background: #fff; border-radius: 5px; box-sizing: border-box; max-width: 700px; }
#contractMsg-modal .contractInfo{ padding: 0 10px; max-height: calc(80vh - 80px - 56px - 80px); overflow-y: auto; box-sizing: border-box; }
#contractMsg-modal .contractInfo ol{ list-style: disc; margin-left: -10px; }
#contractMsg-modal .contractInfo ol::-webkit-scrollbar{ width: 5px; }
#contractMsg-modal .contractInfo ol::-webkit-scrollbar-track{ background: #e7e7e7; border-radius: 10px; }
#contractMsg-modal .contractInfo ol::-webkit-scrollbar-thumb { background: #cecece; border-radius: 10px; }
#contractMsg-modal .contractInfo ol::-webkit-scrollbar-thumb:hover { background: #999; }
#contractMsg-modal .contractInfo ol li{ list-style: disc; font-size: 1em; font-weight: 500; color: #333; line-height: 1.5em; margin-bottom: 5px; }
#contractMsg-modal .popup-block .btn-box { text-align: center; width: 100%; clear: both; overflow: hidden; margin: 30px auto 0; }