@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:wght@100;300;400;500;600;&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap&display=swap');
@import url('bootstrap-icons.css');

/* 頁面淡入 */
@keyframes fadeOut {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.index { animation-duration: 3s; animation-name: fadeOut;  position: relative; }
body { background-color: #BE0081; animation-duration: 2s; animation-name: fadeOut; color: #666;  margin: 0; font-family: 'Rubik', 'Noto Sans TC', bootstrap-icons, Microsoft JhengHei; font-weight: 600; position: relative; font-size: 14px; }
.index-body { max-width: 1400px; margin: 20px auto; }
.max-640px { max-width: 640px !important; margin: 0 auto; }
.max-480 { max-width: 480px !important;  margin: 0 auto; display: block;}
.mobile { display: none !important; }
.w-full { width: 100%; flex: none !important;}
.w-200px { width: 200px; flex: none !important;}
.w-180px { width: 180px; flex: none !important;}
.w-160px { width: 160px; flex: none !important;}
.w-120px { width: 120px; flex: none !important;}
.w-100px { width: 100px; flex: none !important;}
.w-80px { width: 80px; flex: none !important;}
.w-60px { width: 60px; flex: none !important;}

a {  text-decoration: none; color: #333333;  transition: all 0.3s ease; }

header {  background: #ffffff; padding: 0 10px;  }
.logo a { width: 320px; display: block; }
img { max-width: 100%; width: auto;}
.text-right{ text-align: right; }
.font-red { color: #C60; }
.hide { display: none !important; }

/* header */
header { background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(7px); position: fixed; top: 0; left: 0; right: 0; z-index: 900; height: 78px; transition: all 0.3s ease; display: flex; justify-content: center;}
header.down { height: 67px; }
header.down .logo a { width: 240px; }

header .navbar-collapse .navbar-nav { flex-direction:row; display: flex; justify-content: flex-end}
header .navbar-nav  a {  color: #fff; font-weight: 600; padding: 8px 12px; font-size: 19px;}
header .navbar-nav  li a:hover { color: rgb(255, 255, 87);}
header .navbar-expand-lg { width: 100%;}

header .top-language { width: 120px; flex: none; }
.mobile-menu .top-language { text-align: center; padding-top: 10px; font-weight: 600; } 
.top-language button { color: #fff; margin-left: 5px; padding: 0px 10px; }
.top-language button:hover { background-color: #C60; color: #fff; }
.top-language button.active { background-color: #bc5055; color: #fff; pointer-events: none;}



/*共用標籤*/
.wallpeper { min-height: 100%;  border-radius: 12px; background: fixed; background-color: #7859db; background-image: url("../images/cont-bg01.jpg"); background-position: bottom center; background-repeat: no-repeat; background-size: cover;  }
.main-box {  min-height: 350px; padding: 100px 50px; }

.areatitle { font-size: 42px; margin-bottom: 30px; color: #fff; font-weight: 500; text-shadow: 0 0 10px rgba(0,0,0,.6); text-align: center; text-stroke: 10px #cb9f62;}
.areatitle:before {
    position: absolute;
    z-index: -1;
    -webkit-text-stroke: 10px #cb9f62;
    text-stroke: 10px #cb9f62;
}

.areatitle span { font-size: 0.5em; }
.areatitle span:before { content: '/'; padding: 0 10px; }

.sub-title { text-align: center; font-size: 30px; color: #ffffff; padding: 30px 0; font-weight: 500; text-shadow:  0 0 5px rgba(0, 0, 0, 0.6); }
.sub-note { font-size: 24px; color: #fff; text-align: center; width: auto; margin: 20px auto; padding: 1.2em; text-align: center; background-color: rgba(186,39,55,0.8);  box-shadow:  0 0 10px rgba(255, 255, 255, 1); font-weight: 500; border-radius: 12px; max-width: 1080px; margin: 0 auto; }


/* 主視覺 */
.main-visaul {  position: relative; padding: 0; min-height: 100%; height: auto; }
.main-visaul .quick-icon { position: absolute; right: 20px; bottom: 20px; background: linear-gradient(to bottom, rgba(255,93,177,0.8) 0%,rgba(239,1,124,0.8) 100%); backdrop-filter: blur(7px); box-shadow: 0 0 5px rgba(255,255,255,0.9);  border-radius: 8px; padding: 10px 15px; }
.main-visaul .quick-icon i { font-size: 36px;  color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2); margin: 0 5px; transition: all 0.3s ease; }
.main-visaul .quick-icon a:hover i {  color: #eaff00; }
.main-visaul .main-text { max-width: 650px; width: 90%; height: auto; margin-bottom: 50px; }
.main-visaul .main-text02 { max-width:560px; width: 80%; height: auto; margin: 0 auto; }

/* ====== 視差舞台：固定高度的 Hero 區塊 ====== */
.parallax {
position: relative; min-height: 100%; /* 全螢幕高度讓你一滾就有感覺 */ isolation: isolate; /* 讓混合模式/濾鏡彼此不互相影響 */ }
/* 所有圖層共同樣式 */
.layer { position: absolute;inset: -5vh 0 -5vh 0; /* 略放大避免位移時邊緣露底 */ will-change: transform; transform: translate3d(0,0,0); pointer-events: none; /* 圖層不要擋到互動 */ }

/* ====== 三個示範圖層 ====== */
/* Background：遠景雲層/漸層 */
.layer--back { background-image: url("../images/vk004.png"); background-position: bottom center; background-repeat: no-repeat; background-size: 100% auto;  text-align: center;}
/* Midground：山脈/波浪（使用多重漸層製作幾何山形） */
.layer--mid { background-image: url("../images/vk002.png"); background-attachment: fixed; background-position: bottom center; background-repeat: no-repeat; background-size: auto 100%; text-align: center; padding-top: 150px;}
/* Foreground：前景花草/紋理 */
.layer--front { margin-top: 200px; text-align: center;}
.layer--front img { width: 100%; height: auto; display: block; margin: 0 auto;}
/* 前景的文字內容（可互動） */
.hero-content { position: relative; z-index: 20; height: 100%; display: grid; place-items: center; text-align: center; padding: 0 clamp(16px, 4vw, 48px); color: #fff; }
.hero-content h1 { font-size: clamp(28px, 6vw, 56px); line-height: 1.1; margin: 0 0 8px; letter-spacing: .5px; }
.hero-content p { opacity: .8; margin: 0; font-size: clamp(14px, 2.2vw, 18px); }


.taipei-map-box { max-width: 1020px; margin: 0 auto 20px auto; padding: 20px; border-radius: 8px; background-color: #fff; font-size: 18px; font-weight: 400; color: #333; line-height: 1.6em; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); text-align: left;  }
.taipei-map-box img { max-width: 680px; width: 100%; display: block; margin: 0 auto 20px auto; border-radius: 4px; }


/* 最新消息 */
.news-area {  height: auto; }

.news-area .news .swiper { position: relative; padding-bottom: 100px;}
.news-area .news .left-side { position: absolute; bottom: 40px; left: 0; width: 100%; } 
.news-area .news .left-side .swiper-button-prev, .news-area .news .left-side .swiper-button-next { color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.3); }
.news-area .news .left-side .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #fff;}
.news-area .news .left-side .swiper-pagination { margin-left: 50px; margin-top: -3px;  width: calc(100% - 100px); border-radius: 99em; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);  }
.news-area .news .swiper-wrapper { height: auto; }

.news-area .swiper-slide {  color: #fff; font-weight: 400; }
.news-area .swiper-slide .photo { width: 100%; overflow: hidden; border-radius: 4px; }
.news-area .swiper-slide .photo a { display: block; width: 100%; padding-bottom: 56%;  background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3 ease; transform:scale(1,1);}
.news-area .swiper-slide .photo:hover a { transform:scale(1.2,1.2 ); }
.news-area .swiper-slide h4 { font-size: 18px; font-weight: 500; color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); padding: 15px 0 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow:hidden; cursor: pointer;}
.news-area .swiper-slide .time { font-size: 12px; padding:0 0 5px 0; }
.news-area .swiper-slide p { font-size: 14px; line-height: 1.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow:hidden; cursor: pointer;}



/* 關於活動 */
.about-info {  background: fixed; background-image: url("../images/cont-bg02.jpg"); background-position: bottom center; background-repeat: no-repeat; background-size: cover;}
.about-info .about-event-cont { max-width: 1200px; margin: 30px auto; padding: 30px; font-size: 18px; line-height: 1.6em; font-weight: normal; color: #333333; background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.about-info .about-event-cont h4 { font-size: 1.2em; color: #454d87; margin: 10px 0 15px 0; }
.about-info .about-event-cont p {font-size: 1em;  }  
.about-info .about-event-cont ol { font-size: 1em; color: #666; }

.about-info .about-event-cont .faq-list h4 { margin: 0; color: #fff; font-weight: 500;  } 
.accordion.faq-list .accordion-button.collapsed { background: linear-gradient(to bottom,  rgba(255,30,161,1) 0%,rgba(223,47,239,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
.accordion.faq-list .accordion-button:not(.collapsed) { background: linear-gradient(to bottom,  rgba(255,30,161,1) 0%,rgba(211,42,138,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }
.accordion.faq-list .accordion-button::after {  filter: brightness(10);}
.accordion.faq-list .accordion-item { background: #fcfcfc; }


/* 跨年晚會 */
.new-year-party { background: fixed; background-image: url("../images/cont-bg01.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; }
.main-stage-cast { text-align: center; max-width: 1080px; margin: 0 auto; }
.main-stage-cast h3 { font-size: 24px; text-align: center; }
.main-stage-cast .cast-item { display: inline-block; width: 260px; border-radius: 12px; background-color: rgba(249, 120, 120, 0.8); border: 3px solid #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 12px; margin: 5px; 
    background: linear-gradient(to bottom, rgba(150,59,160,0.8) 0%,rgba(239,1,124,0.8) 100%);
}
.main-stage-cast .cast-item img { border-radius: 4px; box-shadow: 0 0 5px rgba(255, 255, 255, 0.4); }
.main-stage-cast .cast-item h4 { color: #fff; font-size: 18px; padding: 10px 0; margin-bottom: 0; text-shadow: 0 0 12px rgba(0, 0, 0, 0.6);}
.main-stage-cast .cast-item.full-width { max-width: 810px; width: 100%; flex: none; } 

.main-stage-cast .cast-note { color: #f9ffda; text-shadow: 0 0 5px rgba(0, 0, 0, 1); font-size: 32px; padding: 30px 0; letter-spacing: 0.2em; }

.multiple-stage-list { text-align: center; }
.multiple-stage-list .list-item { width: 240px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.3); display: inline-block; margin: 10px 8px; padding: 15px 15px; background-color: #fff; }
.multiple-stage-list .list-item h4 { font-weight: 700; padding-bottom: 5px; }
.multiple-stage-list .list-item tab { display: block; border-radius: 9em; background-color: rgba(0,0,0,.3); color: #fff; padding: 5px 15px; margin: 10px 0; }
.multiple-stage-list .list-item a { display: block; width: 100%; height: 0; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 16px; }

/* 周邊活動 */
.activite { background-color:#cc5b9b; }

.activitie-list { max-width: 1080px; display: flex; flex-wrap: wrap; margin: 0 auto; justify-content: center; }
.activitie-list .list-item { width: 250px; flex: none; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.3); margin: 10px 15px; padding: 15px 15px; background-color: #fff; }
.activitie-list .list-item h4 { font-weight: 700; padding-bottom: 5px; text-align: center; font-size: 18px; }
.activitie-list .list-item tab { font-size: 20px; display: block; border-radius: 9em; background-color: rgba(0,0,0,.3); color: #fff; padding: 5px 15px; margin: 10px 0; text-align: center; }
.activitie-list .list-item a { display: block; width: 100%; height: 0; padding-bottom: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 16px; }



/* 轉播資訊 */
.broadcast {  background: fixed; background-image: url("../images/cont-bg03.jpg"); background-position: bottom center; background-repeat: no-repeat; background-size: cover;}
.broadcast-time {  color: #fff; font-size: 24px; font-weight: 400;  background-color: rgba(87, 94, 167, 0.8); backdrop-filter: blur(1.2); color: #ffffff; border-radius: 12px; padding: 12px 40px; max-width: 1080px; margin:0 auto 20px auto; }
.broadcast-list { max-width: 1080px; display: flex; flex-wrap: wrap; margin: 0 auto; }
.broadcast-list .list-item { flex: 1; border-radius: 14px; box-shadow: 0 0 10px rgba(0,0,0,.3); margin: 10px 15px; padding: 15px 15px; background-color: #fff; }
.broadcast-list .list-item h4 { font-weight: 700; padding-bottom: 5px; text-align: center; }
.broadcast-list .list-item a { font-size: 18px; font-weight: 400; display: block; border-radius: 9em; background-color: rgba(215, 0, 115, 0.6); color: #fff; padding: 5px 15px; margin: 10px 0; text-align: center; }


/* 交通資訊 */
.traffic { background-color:#c55252; }
.traffic-cont { max-width: 1080px; margin: 10px auto 0 auto; padding: 30px 20px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); color: #333; font-size: 18px; font-weight: 400; }

.traffic-title { border-radius: 8px; background-color: #e87070; color: #fff !important; padding: 10px 15px; margin-bottom: 5px !important; }
.traffic-info {  border-radius: 8px; background-color: #efefe9; padding: 20px 20px 20px 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }

.traffic-cont h4 {margin-bottom: 20px; color: #000; font-size: 1.2em; }
.traffic-cont p { margin: 10px 0 10px 2em; font-size: 1em;}
.traffic-cont ol { margin-left: 2.5em; color: #666; font-size: 1 em;}
.traffic-cont .note { color: #d90303; }
.traffic-cont .traffic-sub-title { font-weight: 600; color: #7361c4; }

/* 旅遊資訊 */
.travel { background: fixed; background-image: url("../images/cont-bg04.jpg"); background-position: bottom center; background-repeat: no-repeat; background-size: cover; }

.travel-cont { max-width: 1080px; border-radius: 8px; background-color: #fff; padding: 30px 20px; margin: 20px auto; font-size: 18px; font-weight: 400; color: #333; line-height: 1.6em; }
.travel-cont img { width: 100%; max-width: 680px; display: block; border-radius: 4px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); margin:0 auto 10px auto; }

.hotel-Offers { max-width: 1080px; margin: 30px auto; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); padding: 30px; font-size: 16px; border-radius: 12px; display: flex; flex-wrap: wrap; justify-content: left;}
.hotel-Offers .hotel-item {  background-color: #fff; border-radius: 8px; margin: 5px; padding: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); width: calc(33.3% - 10px); flex: none; font-weight: 400;font-size: 14px; }
.hotel-Offers .hotel-item h4 { color: #000; border-bottom: 1px #bcbcbc dotted; margin-bottom: 5px; padding-bottom: 8px; font-size: 18px; font-weight: 600; }
.hotel-Offers .hotel-item .phone { padding-left: 1.5em; position: relative; }
.hotel-Offers .hotel-item .phone:before { content: '\F5B4'; display: inline-block; vertical-align: middle;  position: absolute; top: 2px; left: 0; color: #d64646; }
.hotel-Offers .hotel-item .address { padding-left: 1.5em; position: relative; }
.hotel-Offers .hotel-item .address:before { content: '\F3E7'; display: inline-block; vertical-align: middle;  position: absolute; top: 2px; left: 0; color: #d64646; }
.hotel-Offers .hotel-item .discount-info { font-weight: 400; padding-top: 10px; }
.hotel-Offers .hotel-item .discount-info:before { content: ' 優惠內容 '; display: block; padding: 5px 15px; border-radius:  6px 6px 0 0; background-color: #f34c4c; color: #fff; font-size: 12px; text-align: center; }
.hotel-Offers .hotel-item .discount-info p { padding: 15px 0; margin-bottom: 0; }
.hotel-Offers .hotel-item ul { margin-left: 0px; margin-top: 0; padding: 10px 10px 10px 30px; position: relative; background-color: #fff0f0; border-radius:  0 0 6px 6px; }


.rock-stay { max-width: 1080px; margin: 0 auto; padding: 20px; background-color: #ffffff; border-radius: 8px; font-weight: 300; font-size: 18px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); margin-bottom: 20px; }
.rock-stay h4 { border-radius: 6px; background-color: #ff8000; color: #fff; padding: 10px 15px; }
.rock-stay h4:before { content: "\F3B8"; margin-right: 5px; vertical-align: middle; }
.rock-stay .rock-stay-note { padding: 10px 10px 10px 15px; border-radius: 6px; background-color: #ea7f7f; color: #fff; font-size: 1.2em; border-left: 10px #a22a2a solid; }
.rock-stay tab { background-color: #4c70b2; color: #fff; display: inline-block; padding: 5px 10px; border-radius: 4px; font-size: 0.9em; margin-right: 5px;}
.rock-stay .team-list {  border-radius: 4px; padding: 10px; font-size: 0.9em; margin: 5px 0; background-color: #f2ecce; color: #5b5b2b; line-height: 1.6em; }

/* 台北續攤地圖 */
.taipei-map { background-color:#be4295; background: linear-gradient(to bottom, rgba(242,130,91,1) 0%,rgba(229,91,43,1) 50%,rgba(240,113,70,1) 100%); }

.afterparty-map-list { max-width: 1200px; display: flex; flex-wrap: wrap; margin: 0 auto; }
.afterparty-map-list .list-item { flex: 1; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.3); margin: 10px 15px; padding: 15px 15px; background-color: #fff; }
.afterparty-map-list .list-item h4 { font-weight: 700; padding-bottom: 5px; text-align: center; font-size: 30px; color: #9d6166; }
.afterparty-map-list .list-item tab { font-size: 20px; font-weight: 500; display: block; border-radius: 9em; background-color: rgba(191, 68, 68, 0.8); color: #fff; padding: 5px 15px; margin: 10px 0; text-align: center; }
.afterparty-map-list .list-item a { font-size: 18px; display: block; }

.taipei-continue-map { max-width: 1080px;  border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.3); margin: 10px auto; padding: 15px 15px; background-color: #fff; font-size: 18px; }
.taipei-continue-map h4 { font-size: 1.2em; color: #5d5b4d; font-weight: 600; text-align: center; }
.taipei-continue-map p {  color: #333; font-weight: 400; font-size: 1em; margin-bottom: 15px; }
.taipei-google-map { position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); margin-bottom: 30px; }
.taipei-google-map .map-title { position: absolute; top: 0; left: 0; width: 100%; height: 67px; background-color: #333; color: #fff; font-size: 24px; line-height: 67px; text-align: center; }

/* artical-box */
.artical-box { max-width: 980px; margin: 50px auto 0 auto; padding-top: 80px; padding-bottom: 50px; }
.artical-box .artical-title { font-size: 36px;  font-weight: 600; color: #ffffff; line-height: 1.2em; margin-bottom: 30px; text-shadow: 0 0 10px rgba(0,0,0,.6); }
.artical-box .artical-time { padding: 15px 0; font-size: 18px; color: #fff; }  
.artical-box .artical-time:before { content: '\F1F6'; display: inline-block; margin-right: 10px; vertical-align: middle;}
.artical-box .event-time,
.artical-box .event-location { background-color: #eaeaea; padding: 10px 20px; border-radius: 12px; font-size: 18px; line-height: 1.6em; color: #81265e; font-weight: 400; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); margin-bottom: 10px; font-weight: 600; }
.artical-box .event-time span,
.artical-box .event-location span { color: #000; }
.artical-box .artical-cont { background-color: #eaeaea; padding: 30px 20px; border-radius: 12px; font-size: 18px; line-height: 1.6em; color: #333333; font-weight: 400; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
.artical-box .artical-cont img { border-radius: 8px; margin-bottom: 5px; display: block; margin: 0 auto 10px; }
.artical-box .artical-cont h4 { border-left: 4px #454d87 solid; font-size: 1.1em; margin-bottom: 5px; color: #4c70b2; }

/* tab-menu */
.tab-menu { margin: 15px auto; border: 0; display: block; text-align: center; padding: 15px; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(1.6em); max-width: 1080px; border-radius: 8px; flex: none; border: 2px rgba(255, 0, 123, 0.9) dashed; }
.nav-tabs.tab-menu .nav-item { display: inline-block; margin:0 5px; font-size: 24px; }
.nav-tabs.tab-menu button.nav-link { color: #fff; width: 100%; border-radius: 6px; border: 0; }
.nav-tabs.tab-menu button.nav-link:hover { background-color: #f6ff00;  box-shadow: 0 0 10px rgba(255, 255, 255, 1); color: #000;} 
.nav-tabs.tab-menu button.nav-link.active { background-color: #ffffff; color: #333; border: 0; box-shadow: 0 0 10px rgba(255, 255, 255, 1); pointer-events: none; }

.burger { display: none;} 
.mobile-menu { width: 100%; right: -100%;  height: 100vh; background: rgba(31, 39, 87, 0.9); position: fixed;  z-index: 9998; transition: all 0.5s ease;  top: 0; opacity: 0; overflow: hidden; }
.mobile-menu.index { display: block; opacity: 1; }
.mobile-menu>ul { position: relative; top: 50%; transform: translateY(-50%); padding: 0;}
.mobile-menu>ul>li { list-style: none; }
.mobile-menu>ul>li {color: #ffffff; font-size: 24px; font-weight: bold; text-align: center; }
.mobile-menu a { text-decoration: none; color: #ffffff;}
.mobile-menu>ul>li>a { width: 100%; margin: 0 auto; display: block;  text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; overflow: hidden; position: relative; padding: 10px 0; }

.mobile-menu>ul>li>a { font-weight: 500;  }
.mobile-menu>ul>li>a:hover { color: #ffffff; letter-spacing: 0.1em; }
.mobile-menu--open {  right: 0; opacity: 1;}
.mobile-menu>ul>li span.ch-text { font-size: 12px; font-weight: normal; color: #BFBFBF; }
.mobile-menu>ul>li a:hover { color: #898989; }
.mobile-menu>ul>li a:hover span.ch-text { color:#898989;}
.mobile-menu>ul>li span.ch-text:before { content: "/"; padding: 0 10px; }
.mobile-menu ul.sub { margin:8px 0 20px 0; padding: 0; }
.mobile-menu ul.sub li { position: relative; font-size: 26px; display: inline-block; width: 25%; overflow: hidden;}
.mobile-menu ul.sub li a { color: #CCCCCC; padding: 8px; display: block; max-width: 300px; margin: 0 auto; border-top: 1px #333333 dotted;}
.mobile-menu ul.sub li a:hover { color:#0f0f0f }


/* 多文列表 */
.swiper-list { padding-top: 30px; }
.swiper-list .swiper { position: relative; padding-bottom: 100px;}
.swiper-list .left-side { position: absolute; bottom: 40px; left: 0; width: 100%; } 
.swiper-list .left-side .swiper-button-prev, 
.swiper-list .left-side .swiper-button-next { color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.3); }
.swiper-list .left-side .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background-color: #fff;}
.swiper-list .left-side .swiper-pagination { margin-left: 50px; margin-top: -3px;  width: calc(100% - 100px); border-radius: 99em; overflow: hidden; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);  }
.swiper-list .swiper-wrapper { height: auto; }

.swiper-list .swiper-slide { color: #fff; text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
.swiper-list .swiper-slide .photo { width: 100%; overflow: hidden; border-radius: 4px; }
.swiper-list .swiper-slide .photo a { display: block; width: 100%; padding-bottom: 56%;  background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 0.3 ease; transform:scale(1,1);}
.swiper-list .swiper-slide .photo:hover a { transform:scale(1.2,1.2 ); }
.swiper-list .swiper-slide h4 { font-size: 18px; font-weight: 600; padding: 15px 0 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow:hidden; cursor: pointer;}
.swiper-list .swiper-slide .time { font-size: 12px; padding:0 0 5px 0; font-weight: 700; }
.swiper-list .swiper-slide p { font-size: 14px; line-height: 1.6em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow:hidden; cursor: pointer;}



/* footer */
footer { background-color: #eaeaea; color: #333; font-weight: 400; font-size: 13px; }

footer .foot-organizer { max-width: 980px; padding-top: 50px; margin: 0 auto; }
footer .foot-organizer .unit { display: flex; flex-wrap: wrap; margin-bottom: 40px;}
footer .foot-organizer .unit h3 { width: 140px; flex: none; font-size: 24px;  position: relative; font-weight: 600; display: flex; align-items: center; margin-right: 20px; margin-bottom: 0;  }
footer .foot-organizer .unit h3:before { content: ''; display: block; width: 5px; height: 40px; background-color: #a08e7a; position: absolute; bottom: calc( 50% - 20px );  right: 0; }

footer .foot-organizer .unit h4 { width: 100%; flex: none; font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 10px; padding-bottom: 15px; position: relative; }
footer .foot-organizer .unit h4:before { content: ''; display: block; width: 80px; height: 4px; background-color: #a08e7a; position: absolute; left: calc( 50% - 40px );  bottom: 0; }

footer .foot-organizer .unit .item { flex: 1;  }
footer .foot-organizer .unit .item img { width: 200px; display: inline-block; margin: 0 10px; }
footer .foot-organizer .unit .item.sponsor-logo img { width: 140px; margin-bottom: 20px; }

.copyright { max-width: 1200px; margin: 0 auto; padding: 40px 20px; text-align: center; font-size: 16px; border-top: 1px #bebebe solid; }
.copyright a { display: inline-block; padding: 10px; color: #a08e7a; margin-bottom: 20px; }
.copyright a:hover { color: #544700; }




/*top*/
.top {  position: fixed; right: -60px; bottom: 50px; width: 40px; height: 40px; cursor: pointer; transition: all 0.3s ease; z-index: 100; font-size: 40px; border-radius: 99em; color: #fff; text-shadow: 0 0 5px rgba(0,0,0,.3);}
.top:hover { color: #ffee00; }


.modal-header { color: #f0999a; flex-wrap: wrap; }

.btn-box { padding: 15px 0; text-align: center; }
.btn-ok { background-color: #ff4242; color: #ffff; }
.btn-ok:hover { background-color: #d80073; color: #ffffff; }

/* scrollbar */
::-webkit-scrollbar-track
{   border-radius: 10px; background-color: transparent; margin:0 5px; background-color: rgba(255 255 255 / 30%); }
::-webkit-scrollbar
{ background-color: transparent; height: 6px; width: 6px; margin: 5px; }
::-webkit-scrollbar-thumb
{ border-radius: 10px; -webkit-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #acadae; }