@charset "utf-8";
/* CSS Document */

/*浮層嘿嘿*/
/* .blackBox { clear: both; display:none; z-index:10; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: rgba(34,34,34,0.75); } */
.blackBox * { font-family:"微軟正黑體", "Microsoft JhengHei", Arial; box-sizing:border-box;}
.blackBox  a { text-decoration:none;}
.blackBox_play { z-index: 99; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(34,34,34,0.75);}

/*浮層基本*/
.blackBox .box .button { border-top: 1px solid #d6d6d6; text-align: center; font-size: 1.25rem; line-height: 3.5rem; font-weight: bold;}
.blackBox .box .button a{ text-decoration: none;}
.blackBox .box .but-close { clear: both; width: 100%;}
.blackBox .box .but-close a { display: block; color: #333;}
.blackBox .box h3 span.close { position: absolute; top: 6px; right: 5px; display: block; border: 2px solid #000; border-radius: 5px; width: 63px; height: 33px; font-size: 1rem; line-height: 2rem; text-align: center;}
.blackBox .box h3 span.close a { display: inline-block; width: 100%; height: 100%; color: #000; text-decoration: none;}


/*顏色控制*/
/* .agreeArea .box h3{background-color: #ffd710;} */

/*通知浮層*/
.agreeArea { z-index:1;  position: relative; top: 5%; margin: 0 auto 30px; width: 95%; max-width: 900px; font-family:"Century Gothic", "微軟正黑體", sans-serif;  }
.agreeArea img { width:100%; height:auto;}
.agreeArea .box { border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-color: #fff; overflow: hidden;}
/* .agreeArea .box h3 { padding: 0; margin: 0; height: 3rem; font-size: 1.25rem; font-weight: 800; line-height: 3rem; text-align: center; color:#000000; } */


/*內容*/
.agreeArea .txtArea { height:600px; overflow:auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; text-align: left; color: #333;}
.agreeArea .txtArea h2,
.agreeArea .txtArea h4,
.agreeArea .txtArea p { margin: 0; padding: 0;}
.agreeArea .txtArea h2 { margin: 0; padding: 0.5em 1em 1em 1em; font-size: 1.45rem;}
.agreeArea .itembox { display: flex; width: 100%; margin-bottom: 1em;}
.agreeArea .itembox h4 {width:calc(100% - 9em); margin:0; padding:0; font-size:1.25rem; font-weight:800; line-height:1; text-align:left; color:#000; box-sizing: border-box; padding: 0 1em}



.agreeArea .itembox .itembox_box {  width:calc(100% - 5em); margin:0; padding:0 1em 0 0; font-size:1rem; text-align:left; line-height:1.65rem; color:#000;font-weight:500;}


.agreeArea .itembox table { width:100%; margin:1em 0 0 0; padding:0; max-width:465px;    font-size: 0.9em; line-height: 1.5; border-collapse:collapse; font-weight: bolder; text-align: left}
.agreeArea .itembox table:first-child { margin-top: 0;}
.agreeArea .itembox th { width: 34%; padding:6px 6px 6px 18px; border:1px solid #CCC;  }
.agreeArea .itembox td { width:66%; padding:6px 6px 6px 18px; border:1px solid #CCC; vertical-align:top; }
.agreeArea .itembox table tr:nth-child(odd){background:#eee;}

/*PC*/
@media screen and ( min-width:737px) {
.agreeArea .itembox h4 {width:calc(100% - 35em);}

.agreeArea .itembox table { width:84%; margin:1em 0 0 0; padding:0; max-width:465px; font-size:1rem; line-height: 1.5; border-collapse:collapse; font-weight: bolder; text-align: left}
.agreeArea .itembox table:first-child { margin-top: 0;}
.agreeArea .itembox th { width: 25%; padding:6px 6px 6px 18px; border:1px solid #CCC;  }
.agreeArea .itembox td { width:75%; padding:6px 6px 6px 18px; border:1px solid #CCC; vertical-align:top; }
.agreeArea .itembox table tr:nth-child(odd){background:#eee;}  
}

/*手機*/
@media screen and ( max-width:736px) {
.agreeArea .itembox.itemwrap {flex-wrap: wrap}
.agreeArea .itembox.itemwrap .itembox_box {  width:100%; margin-bottom: 2em;}
.agreeArea .itembox.itemwrap .itembox_box {padding:1em 2em 0 2em; }
  
}


.agreeArea .itembox ul,
.agreeArea .itembox ol { margin: 0; padding-left: 1em;}
.agreeArea .itembox li { margin:0 0 1em 0px;line-height: 1.65rem;}

.agreeArea .box .agree_table table { margin:20px auto; border-collapse:collapse; width:90%; text-align:center;}
.agreeArea .box .agree_table th { padding:5px; border:1px solid #CCC; width:33%; font-size:0.9em; }
.agreeArea .box .agree_table td { padding:5px; border:1px solid #CCC; font-size:0.9em; }
.agreeArea .box .agree_table th a{ color:#c70026; text-decoration:underline;}
.agreeArea .box .xxx{ display:block; width:80%; height:40px; font-size:1.5em; text-align:center; line-height:40px; color:#FFF; background-color:#7048A0; margin:0 auto; margin-bottom:20px; margin-top:10px; font-weight:bold; border-radius:10px;}

.agreeArea .box .qrcodeimg { text-align:center; }
.agreeArea .box .qrcodeimg a { color:#006afe;}
.agreeArea .box .qrcodeimg img { width:100%; height:auto;}


/*通知浮層*/

/* 群新增 旅遊客製 */
/* 顏色控制 */
.spcolor {color: #ec589f;}
.swiper-button-next, .swiper-button-prev { color: #7e787b !important;}
.phone_box .swiper-pagination-bullet-active { background:#ec589f !important;}

/* .head { height: 5vw; background: url("pc_head.png?t=1750937800238") top center no-repeat; background-size: cover;} */

.tab_box { display: block; margin: 0.8vw 0 0.6vw 4vw; font-weight: bolder; font-size: 1.1vw; text-align: left;}
.inner { display: inline-flex; justify-content: flex-start; align-items: flex-start; border-radius: 0.3vw; }

.tab { white-space: nowrap; letter-spacing: 0.2vw; cursor: pointer; border: 0.15vw #e53184 solid; padding: 0.1vw 0.4vw; color: #e53184;}
.inner .tab:nth-child(1) { border-right: none; border-radius: 0.5vw 0 0 0.5vw;}
.inner .tab:nth-last-child(1) { border-left: none; border-radius: 0 0.5vw 0.5vw 0;}
.selected { transition: 0.8s; background: #e53184; color: white;}

.triangle { color: #ec589f; pointer-events: none;}
/*.selected { opacity: 1; transition: 0.5s;}*/
.selected { opacity: 1; transition: 0.5s;}

.phone_box { position:relative; height: 37.5rem; width: 100%; background-size: 100% 100%; background-position: center -3vw;}
.phone { position: absolute; top: -1.5vw; z-index: 2; width: 33.2%; left: 50%; transform: translateX(-50%);pointer-events: none;}
.phone_pic { position: absolute; top: -1.5vw; z-index: 1; width: 33.2%; left: 50%; transform: translateX(-50%);}
.shadow { width: 34%; position: absolute; bottom: 0.3%; left: 50%; transform: translateX(-50%);}
.swiper-container { height:100%; }
.swiper-container .area_swiper_1,
.swiper-container .area_swiper_2,
.swiper-container .area_swiper_3{
    height: 100%;
}

.swiper-container .PD_layout .PD_wrapper{
    display: flex;
}

.swiper-container .PD_layout{
    height: 100%;
}

.swiper-container ul.swiper-wrapper{ margin: 0;}
.swiper-container ul.swiper-wrapper li{ list-style: none;}

@media screen and (max-width: 767px){
    /* .head { height: 20.5vw; background: url("head.png?t=1750937800238") top center no-repeat; background-size: contain;} */
    
    .tab_box {display: block;margin: 2.5vw 0 0 6.5vw;font-weight: bolder;font-size: 4vw;padding-bottom: 2vw;text-align: left;}
    .inner { display: inline-flex; justify-content: flex-start; align-items: flex-start; border-radius: 0.3vw;}
   
    .tab { white-space: nowrap; letter-spacing: 0.5vw; transition: 0.5s; border: 0.45vw #e53184 solid; padding: 0.3vw 1.2vw; color: #e53184;}
    .inner .tab:nth-child(1) { border-right: none; border-radius: 1vw 0 0 1vw;}
    .inner .tab:nth-last-child(1) { border-left: none; border-radius: 0 1vw 1vw 0;}     
    .selected { transition: 0.8s; background: #e53184; color: white;}
    
    .phone_box { position:relative; height: 112vw; width: 100%; padding-right: 1px;}
    .phone { position: absolute; top: -3.3vw; z-index: 2; width: 59%; left: 50%; transform: translateX(-50%);}
    .phone_pic { position: absolute; top: -3.3vw; z-index: 1; width: 59%; left: 50%; transform: translateX(-50%);}
    .shadow { width: 60%; position: absolute; bottom: -4.4vw; left: 50%; transform: translateX(-50%);}
    .shadow { width: 60%; position: absolute; bottom: -4.4vw; left: 50%; transform: translateX(-50%);}
    .swiper-container { height:100%;}
    .swiper-container-horizontal .swiper-pagination-bullets {bottom: -1px !important;}

}