@charset "utf-8";

/* 线路页左侧横图 */
.tuijian { width: 100%; overflow: hidden; text-align: center; margin-bottom: 20px; }
.tuijian img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* 筛选 */
.shai {
    width: 100%;
    height: auto;
    margin-top: 20px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.shai_top { width: 100%; height: 35px; border-bottom: 2px solid #00b0dd; }
.shai_top h1 {
    height: 35px;
    padding: 0 15px;
    background: #00b0dd;
    color: #FFF;
    font-size: 16px;
    line-height: 35px;
    float: left;
}
.shai_box {
    width: 100%;
    height: auto;
    padding: 10px 0;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    overflow: hidden;
}
.shai_con {
    padding: 0 0 0 15px;
    border-bottom: 1px solid #E5E5E5;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 9fr;
}
.shai_tit { color: #555; padding: 15px 0; font-weight: bold; }
.shai_txt { padding: 15px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.shai_txt a {
    display: inline-block;
    height: 24px;
    color: #555;
    padding: 0 10px;
    white-space: nowrap;
    line-height: 24px;
    border-radius: 3px;
}
.shai_txt a:hover { color: #f60; text-decoration: none; }
.shai_txt a.curr { background: #00b0dd; color: #F9F9F9; border-radius: 2px; }
.shai_yix {
    padding: 0 0 0 15px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(70px, 1fr) 9fr;
}
.shai_yic { padding: 15px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.shai_yic a {
    display: inline-block;
    height: 24px;
    padding: 0 10px;
    white-space: nowrap;
    line-height: 24px;
    border-radius: 3px;
    color: #fff;
    background: #00b0dd;
}
.shai_yic a i{display:inline-block; background:url(../images/yixuan.png) no-repeat; width:10px; height:9px; margin:7px 0 0 10px; }
.shai_yic a:hover{text-decoration:none; color:#FFF;}
@media (max-width: 480px) {
    .shai_tit,.shai_txt,.shai_yic{ padding: 10px 0; }
    .shai_txt { gap: 8px;}
    .shai_txt a { padding: 0 5px;}
}
        
/* 排序 */
.pai_tit {
    width: 100%;
    height: 36px;
    background: #F9F9F9;
    border: 1px solid #D7D6D6;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 4px;
}       
.pai_con { float: left; height: 36px; overflow: hidden; }
.pai_con li {
    height: 36px;
    line-height: 36px;
    padding: 0 15px;
    float: left;
    overflow: hidden;
    border-right: 1px solid #D7D6D6;
}
.pai_con li.curr { background: #FFF; color: #f60; }
.pai_con li.curr a { color: #F60; }
.pai_con li a { color: #555; }
.pai_con li a:hover { color: #f60; text-decoration: none; }
.pai_con li span { display: inline-block; vertical-align: middle; line-height: 36px; float: left; }
.pai_con li i { display: inline-block; margin: 1px 0 0 2px; float: left; }
.pai_con li i.fa { font-size: 10px;}
        
/* 价格区间 */
.pai_jia { line-height: 22px; float: right; padding: 7px 0; padding-right: 20px; overflow: hidden; }
.pai_jia .priceipt {
    width: 50px;
    border: 1px solid #CCC;
    float: left;
    line-height: 20px;
    font-size: 12px;
    font-family: arial;
    color: #333;
    padding-left: 5px;
}
.pai_jia i { float: left; color: #555; padding: 0 5px; font-family: Verdana, Arial, "宋体"; font-size: 16px; }
.pai_jia .button {
    width: 42px;
    height: 22px;
    border: 1px solid #CCC;
    float: left;
    color: #333;
    margin-left: 5px;
    cursor: pointer;
    display: block;
    border-radius: 3px;
}
        
/* 线路产品列表 */
.linebox { width: 100%; margin-top: 20px; }
        
        /* 单个线路项 */
        .linelist {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 25px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .linelist:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); }
        
/* 线路顶部区域 */
.linetop { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid #eee; }
        
/* 图片区域 */
.linepic { width: 200px; position: relative; border-radius: 2px; overflow: hidden; }
        
        .linepic img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease, opacity 0.3s ease; 
            opacity: 0;
        }  
        .linepic img.loaded {
            opacity: 1;
        }
        .linepic:hover img {
            transform: scale(1.05);
        }
        
.pic-f {
background: rgba(0, 0, 0, .6);
border-radius: 2px 0 12px 0;
position: absolute;
top: 0;
left: 0;
font-size: 12px;
color: #fff;
padding: 0 6px 0 6px;
line-height: 24px;
}
.float_type { font-size: 12px; }
.vertical_heng {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .5);
    display: inline-block;
    margin: 0 6px 0 6px;
    vertical-align: -1px;
}
.float_from { font-size: 12px; }        

        
/* 线路信息区域 */
.linecon { flex: 1; }
.tit { font-size: 16px; font-weight: bold; margin: 6px 0 12px; line-height: 1.6; }
.tit a:hover { color: #f60; }
.red2 { color: #e74c3c; margin-right: 5px; }
.thbj, .tjbj, .stbj {
    display: inline-block;
    height: 22px;
    font-weight: normal;
    margin-left: 8px;
    position: relative;
}
.thbj::after {
    content: "特惠";
    font-size: 12px;
    background: #ff6b6b;
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
}
.tjbj::after {
    content: "推荐";
    font-size: 12px;
    background: #1abc9c;
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
}
.stbj::after {
    content: "首推";
    font-size: 12px;
    background: #3498db;
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
}
        
/* 标签区域 */
.line-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 15px 0; }
.tags {
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 0 8px;
    background: rgba(35, 190, 174, 0.1);
    border: 1px solid rgba(35, 190, 174, 0.3);
    border-radius: 20px;
    color: #555;
}
        
/* 亮点描述 */ 
.sight { font-size: 14px; color: #666; line-height: 1.6; margin: 15px 0; padding-left: 10px; border-left: 3px solid #00b0dd; }

/* 线路信息盒子 */ 
.line_info_box{margin: 0 0 4px 0;font-size: 12px; display: flex ; flex-wrap: wrap; gap: 10px;}
.line_code{
    padding: 0 6px;
    border-width: 0;
    border-radius: 2px;
    color: #fff;
    background: #00b0df;
}
.line_info_box .vertical_heng{ margin: 3px 0 0 0;background: rgb(0 0 0 / 0.5);}
        
/* 价格区域 */
.linepre { margin: 5px 0; display: flex ; flex-wrap: wrap; gap: 10px; align-items: center;}
.tuanqi{display: flex ; flex-wrap: wrap; align-items: center; font-size:12px;}
.tq-zk{padding:0 0 0 10px;}
.pro-price {
    font: 24px Arial;
    font-weight: bold;
    color: #e74c3c;
    margin-left: auto;
    margin-right: 8px;
}
.pro-price a{ color: #e74c3c; }
.pro-price em { font-size: 18px; font-weight: normal;}
.pro-price i { font-size: 12px; font-style: normal; font-weight: normal; }

/* 线路列表响应式设计 */
@media (max-width: 1024px) {
    .linepic { flex: 0 0 180px; }
    }

@media (max-width: 768px) {
    .linepic { flex: 0 0 auto; width: 116px; }
    .line-tags { gap: 8px; }
    .float_type { font-size: 10px; }
    .float_from { font-size: 10px; }
    .vertical_heng { height: 10px; margin: 0 3px 0 3px; }
    .pro-price { font-size: 20px; }
    .pro-price em { font-size: 16px; }
    }
        
@media (max-width: 480px) {
    .linetop { gap: 10px; }
    .linepic { max-height: 180px; }
    .pic-f { border-radius: 2px 0 8px 0; font-size: 10px; line-height: 18px; }
    .line-tags { gap: 5px; margin: 10px 0; }
    .tags { font-size: 10px; padding: 0 5px; }
    .tit {font-size: 14px;margin-bottom: 8px;}
    .red2 { margin-right: 0; }
    .thbj, .tjbj, .stbj {display:none;}
    .sight {display:none; }
    .line_info_box{font-size: 10px;}
    .pro-price { font-size: 16px; }
    .pro-price em { font-size: 14px; }
}
        
/* 分页样式 */
.pages { margin: 30px 0; text-align: center; font-size: 16px; }
.pages a, .pages span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 3px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
}
.pages .current { background: #00b0dd; color: #fff; border-color: #00b0dd; }
.pages a:hover { background: #f5f5f5; }


/* 悬浮弹出层 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 20px;
}

.popup-content {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow: auto;
    position: relative;
}

/* 弹出层标题区域 */
.popup-title .line-code {
    display: inline-block;
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
}
.popup-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.popup-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.popup-title h3 {
    margin: 10px 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    padding-right: 36px;
}

.month-control {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.month-control button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 36px;
    height: 36px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.month-control button:hover {
    background: #f0f0f0;
}

.popup-header h3#currentMonth {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    min-width: 120px;
    text-align: center;
}

.popup-close {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 32px;
    cursor: pointer;
    color: #e74c3c;
    transition: color 0.2s;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    border-radius: 50%;
    background: #f1f1f1;
}

.popup-close:hover {
    background: #eee;
    color: #e74c3c;
}



/*****攻略列表页背景图*********/
.gonglue-bg {
    margin-bottom: 0px;
    position: relative;
    width: 100%;
	height:224px;
	background: 
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
    url('/Attachments/userfiles/ab/glbg.jpg') no-repeat;
    background-size: cover; 
    justify-content: center;
    align-items: center;
    display: none;
    overflow: hidden;
}
.gonglue-bg .gl-tit {max-width: 90%; margin: 0 auto;text-align: center}
.gonglue-bg h1 {margin: 0;display: inline-block;font-size: 24px;font-weight: normal;color: #fff;text-shadow: rgb(51, 51, 51) 1px 1px 1px;position: relative}
.gonglue-bg h1::before,.gonglue-bg h1::after {position: absolute;top: 50%;content: '';width: 32px;height: 1px;background-color: #fff}
.gonglue-bg h1::before {left: -42px}
.gonglue-bg h1::after {right: -42px}
.gonglue-bg h3 {margin-top: 5px;font-size: 16px;font-weight: normal;line-height: 1.5;color: #fff;text-shadow: rgb(51, 51, 51) 1px 1px 1px;}
@media (max-width: 768px) {
	.gonglue-bg {height:180px;margin-bottom: 15px;display: flex;}
	.gonglue-bg h1 {font-size: 20px}
	.gonglue-bg h3 {font-size: 12px}
}
@media (max-width: 544px) {
    .gonglue-bg {height:150px;display: flex;}
    .gonglue-bg h1 {font-size: 16px;font-weight: bold}
    .gonglue-bg h3 {font-size: 12px}
}

/*定义一个名字为lefteaseinAnimate动画，实现从页面的左边淡入页面效果*/
@keyframes lefteaseinAnimate {
    0% { transform: translateX(-100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes righteaseinAnimate {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
/* 应用动画 */
.gonglue-bg h1 {
    animation: lefteaseinAnimate 1s ease forwards;
}
.gonglue-bg h3 {
    animation: righteaseinAnimate 1s ease 0.3s forwards; /* 延迟0.3秒播放 */
}

/* 攻略背景end */

/* 分类导航 */
.main-category { max-width: 1200px; margin: 20px auto; padding: 0 20px; }
.category-nav {
    height: auto;
    margin: 2px 0;
    font-size: 16px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}
.category-nav li { box-sizing: border-box; position: relative; flex-grow: 1; }
/* 宽屏（大屏幕）样式 */
@media (min-width: 769px) {
    .category-nav li {
        flex: 1 0 calc(12.5% - 9px);
        max-width: calc(12.5% - 9px);
        list-style: none;
    }
}
/* 窄屏（移动设备）样式 */
@media (max-width: 768px) {
    .category-nav { font-size: 14px;}
    .category-nav li {
        flex: 1 0 calc(25% - 10px);
        max-width: calc(25% - 10px);
        list-style: none;
    }
}
.category-nav a {
    display: block;
    padding: 8px 5px;
    text-decoration: none;
    color: #555;
    border-radius: 10px;
    transition: all 0.3s;
    border: 1px solid #e1e4e8;
} 
.category-nav .li-a a {
    color: white;
    font-weight:700;
    background: linear-gradient(to right, #ff9f00, #ff7b00);
    border-color: #ff9f00;
    box-shadow: 0 3px 6px rgba(255, 123, 0, 0.25);
}
.category-nav li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background: linear-gradient(to right, #e2e8f0, #f1f5f9); }
.category-nav .li-a a:hover { background: linear-gradient(to right, #ff8c00, #ff6a00); }


/* 新闻条目样式 */
.news_box { display: flex; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #e5e5e5; }
.news_box:last-child { border-bottom: none; }

/* 新闻图片样式 */
.news_pic { flex: 0 0 200px; margin-right: 20px; }
.news_pic img { width: 100%; height: 140px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* 新闻内容样式 */
.news_con { flex: 1; }
.news_con h3 { font-size: 18px; margin-bottom: 10px; }
.news_con h3 a:hover { color: #e74c3c; }
.news_info {  display: flex; align-items: center;color: #666; margin-bottom: 15px; }
.news_info .editor,
.news_info .views { margin: 0 10px 0 0; }
.news_info .views { margin-left: auto; margin-right: 0; }
.news_info .editor .fa,
.news_info .views .fa { font-size: 16px; font-weight: 400; margin-right:5px; }

.news_con p {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 分页样式 */
.pages { text-align: center; margin-top: 40px; }
.pages a, .pages span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px 5px;
    border-radius: 4px;
    border: 1px solid #eee;
}
.pages .current { background-color: #3498db; color: white; border-color: #3498db; }
.pages a:hover { background-color: #f5f5f5; }
.pages .next { background-color: #f8f9fa; font-weight: bold; }

@media (max-width: 768px) {
    .news_box { margin-bottom: 15px; padding-bottom: 15px; }
    .news_pic { flex: 0 0 120px; margin-right: 15px; }
    .news_pic img { max-height:100px; }
    .news_con h3 {
        max-height: 80px;
        min-height: 60px;
        font-size: 16px;
        text-align: justify;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .news_con p { display:none; }
    /* 分页调整 */
    .pages a, .pages span { padding: 6px 12px; font-size: 14px; }
}
/* 新闻列表end */