html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { text-decoration: none }
table { border-collapse: collapse; border-spacing: 0; }
img { vertical-align: top; }
body { font-family: "微軟雅黑", "microsoft yahei"; font-size: 16px; color: #404040; }
.clearfix:after { content: ''; display: block; clear: both; }
.box { margin: 0 auto; width: 1200px; }
a { color: #333; text-decoration: none; }
a:hover { color: #bd1a2d; text-decoration: none; }
.pos-re { position: relative; }
.pos-ab { position: absolute; right: 10px; top: 10px; margin: 20px 0px 0px 860px; }
.bg-white { background: #FFFFFF; }
.fl { float: left; }
.fr { float: right; }
.inner1000 { width: 1200px; margin: 0 auto; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.banner{width: 100%;height: 408px;text-align: center;background: url('../images/banner.png') no-repeat top center;}
.banner img{width: 100%;height: 408px;display: none;}
.banner .qr-code{width: 80px !important;height: auto !important;position: absolute;right: 100px;bottom: 40px; z-index: 10; display: block;}
.main{width: 100%;height: auto;text-align: center;background: url('../images/event-bg.png') no-repeat top center;}
.box{width: 1200px;height: auto;margin: 0 auto;}

/* 精彩演藝活動部分 */
.event-section {padding: 20px 0 30px;}
/* 欄目條 */
.column-header {width: 1200px;margin: 0 auto;}
.column-header-inner {background: url('../images/column-bg.png') no-repeat center center;padding: 0 0 5px;display: flex;align-items: center;justify-content: center;}
.column-title {font-size: 36px; font-weight: bold; margin: 0 30px; position: relative;letter-spacing: 7px;color: #505050;}
.column-subtitle {text-align: center;font-size: 22px;color: #414141;margin-bottom: 50px;font-weight: 200;}

/* SuperSlide 輪播容器 */
.event-slide {position: relative;width: 1320px;margin: 0 auto;overflow: hidden;}
.event-slide .bd {position: relative;overflow: hidden;margin: 0 60px;}
.event-slide .bd .tempWrap{margin: 0 auto;}
.event-slide .bd ul {overflow: hidden;zoom: 1;}
.event-slide .bd ul li {float: left;width: 280px;margin-right: 26px;}
.event-slide .bd ul li:last-child {margin-right: 0;}

/* 左右箭頭 */
.event-slide .prev,
.event-slide .next {position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 40px;display: flex;align-items: center;justify-content: center;z-index: 10;cursor: pointer;transition: all 0.3s;}
.event-slide .prev {left: 0;}
.event-slide .next {right: 0;}
.event-slide .prev img,
.event-slide .next img {width: 30px;height: 40px;}

/* 演出卡片 */
.event-card {overflow: hidden;}
.event-card .pic {width: 280px;height: 180px;overflow: hidden;margin: 0 auto;}
.event-card .pic img {width: 280px;height: 180px;object-fit: cover;}
.event-card .title {font-size: 18px;font-weight: bold;color: #000;padding: 34px 0 23px;margin: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.event-card .title a {color: #000;font-size: 18px;}
.event-card .info {font-size: 16px;color: #000;font-weight: bold;}
.event-card .info span {font-size: 15px;color: #414141;font-weight: normal;}

/* 查看更多按鈕 */
.view-more {width: 1200px;margin: 0 auto;text-align: center;margin-top: 40px;}
.btn-more {display: inline-flex;align-items: center;justify-content: center;gap: 6px;padding: 0 10px;color: #245ec1;height: 28px;line-height: 28px;border: solid 1px #7e9bd8;transition: all 0.3s;}
.btn-more:hover {color: #245ec1;}
.btn-more img {width: 12px;height: 12px;}

/* 探尋演藝勝地部分 */
.venue-section {padding: 60px 0;}
.venue-section .column-header {margin-bottom: 30px;}

/* Tab切換容器 */
.venue-tab-slide {width: 1200px;margin: 0 auto;}

/* Tab導航 */
.venue-tab-slide .hd {display: flex;border-radius: 8px;overflow: hidden;margin-bottom: 60px;}
.venue-tab-slide .hd ul {display: flex;width: 100%;gap: 52px;}
.venue-tab-slide .hd ul li {flex: 1;text-align: center;height: 72px;line-height: 72px; cursor: pointer;color: #000;font-size: 26px;transition: all 0.3s;}
.venue-tab-slide .hd ul li.yycg {background: url('../images/tab1.png') no-repeat center center;}
.venue-tab-slide .hd ul li.yycg.on {background: url('../images/tab1-active.png') no-repeat center center;}
.venue-tab-slide .hd ul li.yycg.on span {color: #fff;}
.venue-tab-slide .hd ul li.yyxkj {background: url('../images/tab2.png') no-repeat center center;}
.venue-tab-slide .hd ul li.yyxkj.on {background: url('../images/tab2-active.png') no-repeat center center;}    
.venue-tab-slide .hd ul li.yyxkj.on span {color: #fff;}

/* Tab內容 */
.venue-tab-slide .bd {}
.venue-tab-slide .bd ul {list-style: none;margin: 0;padding: 0;}
.venue-tab-slide .bd ul li {display: none;}
.venue-tab-slide .bd ul li:first-child {display: block;}

/* 頂部資訊欄 */
.venue-top {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 20px;}
.venue-count {font-size: 18px;color: #414141;font-weight: bold;}
.venue-count span {color: #245ec1;font-weight: bold;}

/* 搜索框 */
.search-box {width: 380px;height: 50px; display: flex;align-items: center;border: 1px solid #d0d0d0;;border-radius: 5px;overflow: hidden;padding: 0 15px;}
.search-box input {border: none;outline: none;font-size: 14px;width: 90%;background: none;}
.search-box input::placeholder {color: #a8a8a8;font-size: 16px;}
.search-btn {background: none;border: none;cursor: pointer;padding: 5px;}
.search-btn img {width: 25px;height: 25px;}

/* 場館卡片網格 */
.venue-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;}
/* 場館卡片 */
.venue-card {height: 455px; border-radius: 12px;overflow: hidden;transition: all 0.3s;position: relative;}
/* 場館圖片 */
.venue-pic {width: 100%;height: 295px;overflow: hidden;}
.venue-pic img {width: 100%;height: 100%;object-fit: cover;}
/* 場館資訊 */
.venue-info {height: 177px;background: url('../images/text-bg.png') no-repeat top center;position: absolute;bottom: 0;padding: 35px 30px;box-sizing: border-box;text-align: left;}
.venue-name {font-size: 22px;color: #fff;position: absolute;top: 32px;left: 25px;}
.venue-tag {display: inline-flex;align-items: center;font-size: 16px;color: #444040;margin-bottom: 20px;}
.venue-tag::before {content: '';display: inline-block;width: 20px;height: 22px;background: url('../images/location-icon.png') no-repeat center center;background-size: contain;margin-right: 4px;}
.venue-desc {font-size: 16px;color: #444040;line-height: 30px;margin: 0 0 12px 0;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.venue-detail {font-size: 14px;color: #245ec1;text-decoration: none;position: absolute;right: 30px;bottom: 15px;}
.venue-detail:hover {text-decoration: underline;}

/* 展開更多按鈕 */
.expand-more {text-align: center;margin-top: 30px;}
.btn-expand {display: inline-flex;align-items: center;justify-content: center;gap: 6px;padding: 0 10px;color: #245ec1;height: 28px;line-height: 28px;border: solid 1px #7e9bd8;transition: all 0.3s;}
.btn-expand:hover {color: #245ec1;}
.btn-expand img {width: 12px;height: 12px;}

/* 跟著演藝去旅行部分 */
.travel-section {padding: 0 0 60px;}
.travel-section .column-header-inner{background: url('../images/column-bg2.png') no-repeat center center;}

/* 旅行線路輪播容器 */
.travel-slide {position: relative;width: 1320px;margin: 0 auto;overflow: hidden;}
.travel-slide .bd {position: relative;overflow: hidden;margin: 0 60px;}
.travel-slide .bd .tempWrap{margin: 0 auto;}
.travel-slide .bd ul {overflow: hidden;zoom: 1;width: 9999px;}
.travel-slide .bd ul li {float: left;width: 288px;margin-right: 16px;}
.travel-slide .bd ul li:last-child {margin-right: 0;}

/* 左右箭頭 */
.travel-slide .prev,
.travel-slide .next {position: absolute;top: 50%;transform: translateY(-50%);width: 30px;height: 40px;display: flex;align-items: center;justify-content: center;z-index: 10;cursor: pointer;transition: all 0.3s;}
.travel-slide .prev {left: 0;}
.travel-slide .next {right: 0;}
.travel-slide .prev img,
.travel-slide .next img {width: 30px;height: 40px;}

/* 旅行卡片 */
.travel-card {width: 288px;height: 439px; background: url('../images/travel-bg.png') no-repeat top center; transition: all 0.3s;margin: 0 auto;}

/* 旅行圖片 */
.travel-pic {width: 100%;height: 180px;overflow: hidden;}
.travel-pic img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s;}

/* 旅行資訊 */
.travel-info {padding: 0 15px;}
.travel-title {font-size: 18px;font-weight: bold;color: #000;margin: 25px 0;}
.travel-points {height: 74px; font-size: 16px;color: #000;line-height: 26px;margin: 0 0 15px 0;font-weight: bold;text-align: left;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.travel-points span {color: #414141;font-weight: normal;text-align: left;}
.travel-desc {height: 74px; font-size: 16px;color: #000;line-height: 26px;margin: 0;font-weight: bold;text-align: left;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.travel-desc span {color: #414141;font-weight: normal;}
.jiucuo_btn{position: fixed;right: 0;bottom:350px;z-index: 1001;}
.jiucuo_btn a{display: block;background: #fff;width: 55px;border-top-left-radius: 10px;border-bottom-left-radius: 10px;padding: 10px 0;text-align: center;box-shadow: 0px 0px 10px 0px rgb(5 0 0 / 10%);}
.jiucuo_btn img{width:30px;}
.jiucuo_btn p{font-size:16px;color:#C72820;padding: 5px 0 0;font-weight:700;}
.jiucuo_btn p span{display:block;}
.jiucuo_btn .close_jiucuo_btn{position: absolute;left: -15px;top: -15px;cursor: pointer;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;}
.jiucuo_btn .close_jiucuo_btn img{width:15px;height:15px;}

@media only screen and (max-width: 1200px) and (min-width: 1024px){
    html, body {min-width: 1200px!important; }
    .banner{background: none;height: auto;}
    .banner img {width: 100%;height: auto;display: block;}
    .event-slide{width: 100%;}
    .venue-tab-slide {width: 100%;padding: 0 20px;box-sizing: border-box;}
    .travel-slide {width: 100%;}
    .event-slide .bd ul li{margin: 0 15px;}
    .travel-slide .bd ul li{margin: 0 15px;}
}
@media only screen and (max-width: 1023px) {
    .crumbsBox{width: 100%;}
    .crumbsBox .crumbs{width: 97%;}
    .crumbs{height: auto !important;}
    #breadcrumb{line-height: 40px;}
    .banner{background: none;height: auto;}
    .banner img {width: 100%;height: auto;display: block;}
    body { min-width: 100%;}
    .event-slide .bd ul li{margin: 0 15px;}
    .travel-slide .bd ul li{margin: 0 15px;}
    /* banner 適配 */
    .banner img {width: 100%;height: auto;}
    /* 主容器適配 */
    .main {height: auto;background-size: cover;background-position: top center;padding-bottom: 40px;}
    .main .box {width: 95%;max-width: 100%;padding: 0 10px;box-sizing: border-box;}
    /* 欄目條適配 */
    .column-header {width: 100%;}
    .column-header-inner {background-size: 199%;padding: 10px 0;}
    .travel-section .column-header-inner{background-size: 199%;}
    .column-title {font-size: 24px;letter-spacing: 4px;margin: 0 15px;}
    .column-subtitle {font-size: 16px;margin-bottom: 30px;}
    
    /* 輪播容器適配 */
    .event-slide {width: 100%;}
    .event-slide .bd {margin: 0 30px;}
    
    /* 演出卡片適配 */
    .event-card .title {font-size: 16px;padding: 15px 10px 10px;}
    .event-card .title a {font-size: 16px;}
    .event-card .info {font-size: 14px;padding: 0 10px;}
    .event-card .info span {font-size: 13px;}
    
    /* 查看更多按鈕適配 */
    .view-more {width: 100%;margin-top: 30px;}
    .btn-more {font-size: 14px;height: 24px;line-height: 24px;}
    
    /* 場館Tab適配 */
    .venue-tab-slide {width: 100%;padding: 0 15px;box-sizing: border-box;}
    .venue-tab-slide .hd ul li {padding: 12px 0;font-size: 16px;}
    .venue-top {flex-direction: column;gap: 15px;}
    .venue-count {font-size: 13px;}
    .venue-grid {grid-template-columns: repeat(3, 1fr);gap: 15px;}
    .venue-card {margin-bottom: 0;}
    .venue-name {font-size: 16px;}
    .venue-desc {font-size: 13px;}
    
    /* 旅行輪播適配 */
    .travel-slide {width: 100%;}
    .travel-slide .bd {margin: 0 30px;}
    .travel-pic {height: 130px;}
    .travel-card .travel-info {padding: 12px;}
    .crumbsBox { width: 100%; }
	.crumbsBox .crumbs { width: 97%; }
	.crumbs { height: auto !important; }
	#breadcrumb { line-height: 40px; }
	.xl_box { width: 95%;  }
    .xl_content{gap: 40px;}
	.xl_recommend {  gap: 30px; }
	.tishi { height: auto; }
	.tishi_box { width: 90%; }
    .xl_left, .xl_right { flex: 0 0 48%; }
    .xl_recommend_left, .xl_recommend_right { flex: 0 0 48%; }
    .xl_surround_title{font-size: 22px;}
    .xl_recommend_title{font-size: 22px;}
    .banner .qr-code { width: 35px !important;height: auto !important;right: 10px;bottom: 10px;display: block;}
}
@media only screen and (max-width: 768px) {
    /* 欄目標題字號 */
    .column-subtitle {font-size: 14px;}
    .view-more {width: 100%;margin-top: 20px;}
    
    /* 場館Tab適配 */
    .venue-section {padding: 0px 0 30px 0;;}
    .venue-grid {gap: 12px;}
    .venue-tab-slide .hd {margin-bottom:20px;}
    .venue-tab-slide .hd ul li {font-size: 14px;padding: 10px 0;}
    .venue-desc { line-height: 170%;}
    
    
    /* 旅行輪播適配 */
    .travel-slide .bd {margin: 0 20px;}
    .travel-pic {height: 150px;}
    .banner .qr-code { display: none;}
    .jiucuo_btn{bottom:240px;}
    .jiucuo_btn p{font-size:14px;padding:3px 0 0;}
}
@media only screen and (max-width: 700px) {
    .venue-grid {grid-template-columns: repeat(2, 1fr); gap: 15px;}
}

@media only screen and (max-width: 480px) {
    .search-box{width: 90%;}
    /* 欄目標題字號 */
    .column-title {letter-spacing: 2px;margin: 0 10px;}
    .column-subtitle {font-size: 13px;}
    
    /* 演出卡片適配 */
    .event-card .title {font-size: 14px;padding: 10px;}
    .event-card .title a {font-size: 14px;}
    .event-card .info {font-size: 12px;padding: 0 10px;}
    .event-card .info span {font-size: 12px;}
    
    /* 按鈕字號 */
    .btn-more {font-size: 13px;}
    
    /* 場館Tab適配 */
    .venue-grid {grid-template-columns: 1fr;width: 380px;margin: 0 auto;}
    .venue-tab-slide .hd ul li {font-size: 14px;padding: 10px 0;}
    
    /* 旅行輪播適配 */
    .travel-slide .bd {margin: 0 15px;}
    .travel-pic {height: 140px;}
    .travel-card .travel-info {padding: 10px;}
}
@media only screen and (max-width: 360px) {
.venue-grid{width: 100%;}

}

/* ================ 細覽頁樣式 (xl_ 前綴) ================ */
/* 麵包屑 */
.crumbsBox { width: 1200px; margin: 0 auto; background-color: #fff; }
.crumbsBox .crumbs { height: 64px; margin: 0 auto; }
#breadcrumb { width: 100%; line-height: 56px; font-size: 14px; color: #333; }
#breadcrumb a { color: #333; }

/* 主體 */
.xl_main {background: url('../images/xl_bg.png') no-repeat center 126px;height: auto;padding: 20px 0 0 0;}
.xl_box { width: 1200px; margin: 0 auto; }

/* 標題 */
.xl_title {font-size: 36px;font-weight: bold;color: #333;margin-bottom: 18px;padding-left: 22px;}
.repeatX{width: 100%; background: url(../images/xl_jc_column_bg.png) no-repeat center center; height: 15px;}
/* 內容區域 */
.xl_content { display: flex; gap: 60px; margin-bottom: 40px; margin-top: 40px;}
.xl_left { flex: 0 0 570px; }
.xl_pic { margin-bottom: 55px; }
.xl_pic img {width: 100%;height: 360px;}
.xl_right { flex: 0 0 570px; }
.xl_intro {font-size: 16px;line-height: 30px;color: #3d3d3d;text-align: justify;margin-bottom: 40px;}

/* 地圖 */
.xl_map { margin-bottom: 40px; }
.xl_map iframe { width: 100%; height: 269px;  }

/* 資訊卡片網格 */
.xl_info_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.xl_info_card { display: flex; align-items: flex-start; gap: 12px; }
.xl_info_icon { width: 28px; height: 28px; flex-shrink: 0; }
.xl_info_icon img { width: 100%; height: 100%; }
.xl_info_text { flex: 1; }
.xl_info_label { font-size: 18px; font-weight: bold; color: #3c3c3c;margin-bottom: 8px; }
.xl_info_value { font-size: 18px; color: #3c3c3c; line-height: 1.6; }

/* 地址區域 */
.xl_address {display: flex;align-items: center;gap: 15px;margin-bottom: 30px;}
.xl_address_icon { display: flex;justify-content: center;align-items: center;width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;background-color: #c0ab74; }
.xl_address_icon img { width: 24px; height: 24px; }
.xl_address_info { flex: 1; }
.xl_address_label { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 8px; }
.xl_address_value { font-size: 16px; color: #666; line-height: 1.6; }

/* 顯示更多按鈕 */
.xl_more_btn {display: flex;align-items: center;justify-content: center;padding: 3px 3px 3px 9px;background: #fff;border: 1px solid #dedede;;border-radius: 20px;cursor: pointer;transition: all 0.3s;font-size: 14px;color: #3c3c3c;margin: 0 auto;width: fit-content;}
/* 向下箭頭 - 使用CSS繪製 */
.xl_arrow_down {display: inline-flex;align-items: center;justify-content: center;width: 24px;height: 24px;background-color: #c0ab74;border-radius: 50%; margin-left: 4px;transition: all 0.3s;position: relative;}
.xl_arrow_down::before { content: '';position: absolute; width: 8px;height: 2px;background-color: #fff;transform: rotate(45deg);left: 5px;top: 50%;margin-top: -1px;}
.xl_arrow_down::after {content: ''; position: absolute;width: 8px;height: 2px;background-color: #fff;transform: rotate(-45deg);right: 5px;top: 50%;margin-top: -1px;}
.xl_more_btn.expanded .xl_arrow_down::before { transform: rotate(-45deg);}
.xl_more_btn.expanded .xl_arrow_down::after {transform: rotate(45deg);}

/* 周邊推薦 */
.xl_surround {padding-top: 45px;}
.xl_surround_title {height: 72px;line-height: 72px; font-size: 30px;font-weight: bold;color: #3c3c3c;text-align: center;margin-bottom: 50px;background: url('../images/xl_zbtj_column_bg.png') no-repeat center center;}
.xl_surround_grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 40px;margin-bottom: 30px;}
.xl_surround_card {display: flex;gap: 20px;}
.xl_surround_icon {width: 60px;height: 60px;border-radius: 50%;object-fit: cover;flex-shrink: 0;}
.xl_surround_info {flex: 1;}
.xl_surround_name {font-size: 20px;font-weight: bold;color: #4c4c4c;line-height: 30px;}
.xl_surround_desc {font-size: 16px;color: #4c4c4c;line-height: 28px;}
.xl_surround_source {display: flex;align-items: center;justify-content: center;gap: 10px;padding: 3px 10px 3px 3px;border: solid 1px #dedede;border-radius: 25px;font-size: 14px;color: #999;margin: 0 auto;width: fit-content;}
.xl_source_icon {width: 24px;height: 24px;object-fit: contain;}
.xl_source_link {color: #c0ab74;text-decoration: underline;}

/* 活動推薦和遊覽線路推薦 */
.xl_recommend {display: flex;gap: 60px;margin-top: 70px;padding-bottom: 40px;}
.xl_recommend_left {flex: 0 0 570px;}
.xl_recommend_right {flex: 0 0 570px;}
.xl_recommend_title {height: 72px;line-height: 72px; font-size: 30px;font-weight: bold;color: #333;text-align: center;margin-bottom: 30px;background: url('../images/xl_column-bg.png') no-repeat center center;}
.xl_activity_card {display: flex;gap: 20px;padding: 32px 28px ;background-color: #fbfaf8;margin-bottom: 20px;position: relative;border-bottom: 1px solid #dedede;;}
.xl_activity_img {width: 250px;height: 160px;object-fit: cover;}
.xl_activity_info {flex: 1;}
.xl_activity_name {font-size: 18px;font-weight: bold;color: #000;margin-bottom: 15px;line-height: 36px;}
.xl_activity_time {font-size: 16px;color: #414141;}
.xl_label {display: block;font-size: 16px; font-weight: bold;color: #000;margin-bottom: 10px;}
.xl_label_list{font-size: 16px; font-weight: bold;color: #000;margin-bottom: 10px;}
.xl_activity_link {position: absolute;right: 20px;bottom: 20px;width: 24px;height: 24px;}
.xl_activity_link img {width: 20px;height: 20px;}
.xl_activity_list {margin-bottom: 20px;}
.xl_activity_item {display: flex;align-items: flex-start;gap: 15px;padding: 28px 0;border-bottom: 1px solid #dedede;}
.xl_dot {width: 14px;height: 4px;background-color: #af534c;border-radius: 2px;margin-top: 10px;flex-shrink: 0;}
.xl_activity_item_info h4 {font-size: 18px;font-weight: bold;color: #000;margin-bottom: 8px;}
.xl_activity_item_info p {font-size: 16px;color: #414141;}
.xl_route_grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;margin-bottom: 20px;}
.xl_route_card {padding: 39px 20px 30px;background-color: #fbfaf8;border-bottom: 1px solid #dedede;position: relative;}
.xl_route_header {display: flex;align-items: center;gap: 10px;margin-bottom: 15px;}
.xl_route_icon {width: 22px;height: 18px;}
.xl_route_name {font-size: 18px;font-weight: bold;color: #000;flex: 1;padding-left:10px;}
.xl_route_link {width: 20px;height: 20px;position: absolute;right: 20px;top: 20px;}
.xl_route_link img {width: 100%;height: 100%;}
.xl_route_list {list-style: none;padding-left: 34px;position: relative;}
.xl_route_list::before {content: '';position: absolute;left: 11px;top: -19px;bottom: 8px;width: 1px;background: #ddd;}
.xl_route_list li {font-size: 16px;color: #414141;line-height: 27px;position: relative;padding-left: 10px;margin-bottom: 14px;}
.xl_route_list li::before {content: '';position: absolute;left: -27px;top: 50%;transform: translateY(-50%);width: 7px;height: 7px;background: #fbfaf8;border-radius: 50%;border: 1px solid #c0ab74;}

.tishi{width: 100%;height: 60px;background-color: #f0f0f0;}
.tishi_box{width: 1200px;margin: 0 auto; text-align: center;}
.tishi_box p{font-size: 14px;color: #999;line-height: 60px;}

/* ================ 細覽頁響應式 ================ */
@media only screen and (max-width: 1200px) and (min-width: 1024px) {
	.xl_box { width: 95%; }
	.xl_left, .xl_right { flex: 0 0 48%; }
	.xl_recommend_left, .xl_recommend_right { flex: 0 0 48%; }
	.xl_activity_img { width: 180px; height: 130px; }
	.tishi_box { width: 90%; }
}

@media only screen and (max-width: 768px) {
    .xl_box { width: 100%; }
	.xl_title { font-size: 24px; }
	.xl_intro {  line-height: 1.8; }
	.xl_pic img { height: auto; }
	.xl_activity_img { width: 160px; height: 120px; }
	.xl_route_grid { grid-template-columns: repeat(2, 1fr); }
	.xl_surround_grid { grid-template-columns: repeat(2, 1fr); }
    .xl_content{gap: 30px;}
}
@media only screen and (max-width: 750px) {
    .xl_recommend_left, .xl_recommend_right{flex: 0 0 100%;}
    .xl_recommend {flex-flow: column;}
    .xl_surround_source { font-size: 12px; padding: 10px 15px; display: block;}
}

@media only screen and (max-width: 640px) {
	.xl_info_grid { grid-template-columns: repeat(2, 1fr); }
	.xl_activity_card { flex-direction: column; }
	.xl_activity_img { width: 100%; height: auto; }
	.xl_activity_link { position: static; margin-top: 10px; }
	.xl_surround_grid { grid-template-columns: 1fr; gap: 20px;}
	.xl_surround_icon { width: 60px; height: 60px; }
    .xl_content{flex-direction: column;}
    .xl_recommend{flex-direction: column;}
    .xl_map iframe{height: 400px;}
    .xl_surround_card { padding: 15px; }
    .tishi_box p{line-height: 38px;}
}

@media only screen and (max-width: 480px) {
	.xl_title { margin-bottom: 15px; padding-bottom: 10px; }
	.xl_intro {  line-height: 1.7; }

	.xl_info_card { gap: 10px; }
	.xl_info_icon { width: 28px; height: 28px; }
	.xl_address { padding: 15px; gap: 10px; }
	.xl_address_icon { width: 40px; height: 40px; }
	.xl_address_label { font-size: 16px; }
	.xl_address_value { font-size: 14px; }
	.xl_more_btn { padding: 8px 20px; font-size: 13px; }
	.xl_arrow_down { width: 20px; height: 20px; }
	.xl_arrow_down::before, .xl_arrow_down::after { width: 6px; }
	.xl_arrow_down::before { left: 4px; }
	.xl_arrow_down::after { right: 4px; }
	.xl_surround { margin-top: 20px; padding-top: 40px; }
	
	.xl_surround_source { font-size: 12px; padding: 10px 15px; display: block;}
	.xl_source_icon { width: 20px; height: 20px; }
	.xl_activity_name { font-size: 16px; }
    .xl_route_grid{grid-template-columns: 1fr;}
    
}

@media only screen and (max-width: 360px) {
	.xl_title { font-size: 20px; }
	.xl_intro { font-size: 12px; }
	.xl_info_label { font-size: 13px; }
	.xl_info_value { font-size: 13px; }
	.xl_address_label { font-size: 14px; }
	.xl_address_value { font-size: 13px; }
	.xl_recommend_title { font-size: 22px; }
	.xl_activity_name { font-size: 16px; }
    .xl_info_grid { grid-template-columns: 1fr; gap: 15px; }
}