﻿.vas-desc .vas-desc-card {box-shadow: none; padding-bottom: 2rem;}
.vas-desc-card .in-content-top {max-width: none; flex-direction: row; padding: 44px 88px 24px 88px; box-shadow: 0.1rem 0.1rem 0.4rem rgba(0, 0, 0, 0.2);}
.vas-desc-card .in-content-bot {border-top: 0;}

.vas-card-zone {background: #e9f5ff; padding: 0 0 2rem 0;}
.vas-card-zone .title-zone {font-size: 24px; font-weight: bold; margin-bottom: 1rem; padding-top: 1.6rem;}
.vas-card-zone .title-zone h3 {font-size: 32px; font-weight: bold;}

.vas-card-line {background-color: #e9f5ff;}
.vas-card-line::after {content:''; background: rgba(32, 156, 255, 0.15); width: 1060px; height: 2px; margin: 0 auto; display: block;}

.vas-card-zone-expand {display: none;}
.vas-card-zone-expand-btn {font-size: 16px; font-weight: bold; border: 1px solid #209cff; width: 200px; margin: 0 auto; padding: 4px; text-align: center; border-radius: 8px; display: block;}
.vas-card-zone-expand-btn:hover {color: #007aff; border: 1px solid #007aff; text-decoration: none;}
.vas-card-zone-expand-btn .arrow {display: inline-block; margin-left: 4px; transition: transform 0.3s ease;}
.vas-card-zone-expand-btn.active .arrow {transform: rotate(180deg);}
.vas-card-source {background: #e9f5ff; text-align: center; padding-bottom: 28px; font-size: 16px;}
.vas-card-source a {color: #848484;}
.vas-card-source a img {vertical-align: middle; margin-right: 8px;}

/* video-swiper */
.video-swiper-container {position: relative;}
.video-swiper-container .container{overflow: hidden; width: 1060px;}
.video-swiper-slide {display: flex; flex-direction: column; padding: .4rem 0; cursor: pointer;}
.video-swiper-slide .video-zone {position: absolute; background: rgba(0,0,0,0.7); right: 8px; bottom: 8px; font-size: 14px; color: #fff; padding: 4px; display: block; line-height: 1; border-radius: 4px;}
.video-swiper-slide .video-zone .text:before {content:url('../../img/video-play.svg'); margin-right: 2px; display: inline-block; vertical-align: middle;}
.video-swiper-slide .img-zone {position: relative; border-radius: 12px 12px 0 0; overflow: hidden;}
.video-swiper-slide .img-zone img {width: 332px;}
.video-swiper-slide .text-zone {background-color: #fff; width: 332px; padding: 12px 16px; font-size: 16px; text-align: left; box-sizing: border-box; border-radius: 0 0 12px 12px; box-shadow: 2px 2px 2px #dfdfdf;}
.video-swiper-slide .text-zone .title-tag {height: 50px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.video-swiper-slide .from-date {font-size: 14px; color: #848484; margin-top: .4rem; text-align: left;}

.video-swiper-container .swiper-button-next.swiper-button-disabled, .video-swiper-container .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.video-swiper-container .swiper-button-next, .video-swiper-container .swiper-button-prev {
		position: absolute;
		width: 36px;
		height: 36px;
		background-color: rgba(255,255,255,1);
		color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 45% !important;
		transform: translateY(-50%);
		margin-top: 0;
		box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);
		z-index: 10;
}
.video-swiper-container .swiper-button-next {
		background: url("../../img/swiper-button-next.svg") no-repeat #fff center center;
		background-size: 20%;
		right: calc(50% - 580px) !important;
}
.video-swiper-container .swiper-button-next:hover {
		background: url("../../img/swiper-button-next-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.video-swiper-container .swiper-button-prev {
		background: url("../../img/swiper-button-prev.svg") no-repeat #fff center center;
		background-size: 20%;
		left: calc(50% - 580px) !important;
}
.video-swiper-container .swiper-button-prev:hover {
		background: url("../../img/swiper-button-prev-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.video-swiper-container .swiper-pagination-bullets {
		left: initial;
		top: auto;
		bottom: 10px;
		font-size: inherit;
		width: inherit;
}
.video-swiper-container .swiper-pagination {
		position: relative;
		bottom: auto;
		left: auto;
		margin-top: 8px;
		width: 100%;
		text-align: center;
}
.video-swiper-container .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: #ccc;
		opacity: 0.8;
		margin: 0 5px;
}
.video-swiper-container .swiper-pagination-bullet-active {
		background: #007aff;
}

/* article-swiper */
.article-swiper-container {position: relative;}
.article-swiper-container .container{overflow: hidden; width: 1060px;}
.article-swiper-slide {display: flex; flex-direction: column; padding: .4rem 0; cursor: pointer;}
.article-swiper-slide .img-zone {position: relative; height: 186px; border-radius: 12px 12px 0 0; overflow: hidden;}
.article-swiper-slide .img-zone img {width: 332px;}
.article-swiper-slide .article-zone {position: absolute; background: rgba(0,0,0,0.7); right: 8px; bottom: 8px; font-size: 14px; color: #fff; padding: 4px; display: block; line-height: 1; border-radius: 4px;}
.article-swiper-slide .article-zone .text:before {content:url('../../img/video-play.svg'); margin-right: 2px; display: inline-block; vertical-align: middle;}
.article-swiper-slide .text-zone {background-color: #fff; width: 332px; height: 106px; padding: 12px 16px; font-size: 16px; text-align: left; box-sizing: border-box; border-radius: 0 0 12px 12px; box-shadow: 2px 2px 2px #dfdfdf;}
.article-swiper-slide .text-zone .title-tag {height: 50px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.article-swiper-slide .from-date {font-size: 14px; color: #848484; margin-top: .4rem; text-align: left;}

.article-swiper-container .swiper-button-next.swiper-button-disabled, .article-swiper-container .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.article-swiper-container .swiper-button-next, .article-swiper-container .swiper-button-prev {
		position: absolute;
		width: 36px;
		height: 36px;
		background-color: rgba(255,255,255,1);
		color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 45% !important;
		transform: translateY(-50%);
		margin-top: 0;
		box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);
		z-index: 10;
}
.article-swiper-container .swiper-button-next {
		background: url("../../img/swiper-button-next.svg") no-repeat #fff center center;
		background-size: 20%;
		right: calc(50% - 580px) !important;
}
.article-swiper-container .swiper-button-next:hover {
		background: url("../../img/swiper-button-next-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.article-swiper-container .swiper-button-prev {
		background: url("../../img/swiper-button-prev.svg") no-repeat #fff center center;
		background-size: 20%;
		left: calc(50% - 580px) !important;
}
.article-swiper-container .swiper-button-prev:hover {
		background: url("../../img/swiper-button-prev-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.article-swiper-container .swiper-pagination-bullets {
		left: initial;
		top: auto;
		bottom: 10px;
		font-size: inherit;
		width: inherit;
}
.article-swiper-container .swiper-pagination {
		position: relative;
		bottom: auto;
		left: auto;
		margin-top: 8px;
		width: 100%;
		text-align: center;
}
.article-swiper-container .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: #ccc;
		opacity: 0.8;
		margin: 0 5px;
}
.article-swiper-container .swiper-pagination-bullet-active {
		background: #007aff;
}

.article-page {font-size: 18px; margin: 0 -44px;}
.article-page .title {font-size: 32px; font-weight: bold;}
.article-page .sub-title {display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #848484;}
.article-page .insertion {background: #fafafb; width: 800px; margin: 12px auto; padding: 20px; font-size: 17px; font-weight: bold; text-align: center; display: flex; justify-content: space-between; align-items: center; border: 1px solid #e5e7e9; border-radius: 8px;}
/* .article-page .insertion-btn {margin-top: 0.6rem;} */
.article-page .insertion-btn a {padding: 6px 24px;}
.article-page .insertion-btn a:hover {box-shadow: none;}

/* music-swiper */
.music-swiper-container {position: relative;}
.music-swiper-container .container{overflow: hidden; width: 1060px;}
.music-swiper-slide {display: flex; flex-direction: column; padding: .4rem 0; cursor: pointer;}
.music-swiper-slide:hover {text-decoration: none;}
.music-swiper-slide .music-zone {position: absolute; background: rgba(0,0,0,0.7); right: 8px; bottom: 8px; font-size: 14px; color: #fff; padding: 4px; display: block; line-height: 1; border-radius: 4px;}
.music-swiper-slide .music-zone .text:before {content:url(../../img/video-play.svg); margin-right: 2px; display: inline-block; vertical-align: middle;}
.music-swiper-slide .img-zone {position: relative; border-radius: 12px 12px 0 0; overflow: hidden;}
.music-swiper-slide .img-zone img {width: 190px;}
.music-swiper-slide .text-zone {background-color: #fff; width: 190px; height: 72px; padding: 12px 16px; font-size: 18px; box-sizing: border-box; border-radius: 0 0 12px 12px; box-shadow: 2px 2px 2px #dfdfdf;}
.music-swiper-slide .text-zone .song-title {font-size: 15px; color: #333; text-align: left; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.music-swiper-slide .from-date {font-size: 14px; color: #848484; margin-top: .4rem; text-align: left;}

.music-swiper-container .swiper-button-next.swiper-button-disabled, .music-swiper-container .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.music-swiper-container .swiper-button-next, .music-swiper-container .swiper-button-prev {
		position: absolute;
		width: 36px;
		height: 36px;
		background-color: rgba(255,255,255,1);
		color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 45% !important;
		transform: translateY(-50%);
		margin-top: 0;
		box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);
		z-index: 10;
}
.music-swiper-container .swiper-button-next {
		background: url("../../img/swiper-button-next.svg") no-repeat #fff center center;
		background-size: 20%;
		right: calc(50% - 580px) !important;
}
.music-swiper-container .swiper-button-next:hover {
		background: url("../../img/swiper-button-next-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.music-swiper-container .swiper-button-prev {
		background: url("../../img/swiper-button-prev.svg") no-repeat #fff center center;
		background-size: 20%;
		left: calc(50% - 580px) !important;
}
.music-swiper-container .swiper-button-prev:hover {
		background: url("../../img/swiper-button-prev-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.music-swiper-container .swiper-pagination-bullets {
		left: initial;
		top: auto;
		bottom: 10px;
		font-size: inherit;
		width: inherit;
}
.music-swiper-container .swiper-pagination {
		position: relative;
		bottom: auto;
		left: auto;
		margin-top: 8px;
		width: 100%;
		text-align: center;
}
.music-swiper-container .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: #ccc;
		opacity: 0.8;
		margin: 0 5px;
}
.music-swiper-container .swiper-pagination-bullet-active {
		background: #007aff;
}

.fancybox-container .lightbox-music {border-radius: 16px;}

/* image-swiper */
.image-swiper-container {position: relative;}
.image-swiper-container .container{overflow: hidden; width: 1060px;}
.image-swiper-slide {display: flex; flex-direction: column; padding: .4rem 0;}
.image-swiper-slide .img-zone {position: relative; border-radius: 12px; overflow: hidden;}
.image-swiper-slide .img-zone img {width: 190px;}

.image-swiper-container .swiper-button-next.swiper-button-disabled, .image-swiper-container .swiper-button-prev.swiper-button-disabled {opacity: 0;}
.image-swiper-container .swiper-button-next, .image-swiper-container .swiper-button-prev {
		position: absolute;
		width: 36px;
		height: 36px;
		background-color: rgba(255,255,255,1);
		color: white;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		top: 45% !important;
		transform: translateY(-50%);
		margin-top: 0;
		box-shadow: 0px 3px 10px rgb(0 0 0 / 25%);
		z-index: 10;
}
.image-swiper-container .swiper-button-next {
		background: url("../../img/swiper-button-next.svg") no-repeat #fff center center;
		background-size: 20%;
		right: calc(50% - 580px) !important;
}
.image-swiper-container .swiper-button-next:hover {
		background: url("../../img/swiper-button-next-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.image-swiper-container .swiper-button-prev {
		background: url("../../img/swiper-button-prev.svg") no-repeat #fff center center;
		background-size: 20%;
		left: calc(50% - 580px) !important;
}
.image-swiper-container .swiper-button-prev:hover {
		background: url("../../img/swiper-button-prev-hover.svg") no-repeat #fff center center;
		background-size: 20%;
}
.image-swiper-container .swiper-pagination-bullets {
		left: initial;
		top: auto;
		bottom: 10px;
		font-size: inherit;
		width: inherit;
}
.image-swiper-container .swiper-pagination {
		position: relative;
		bottom: auto;
		left: auto;
		margin-top: 8px;
		width: 100%;
		text-align: center;
}
.image-swiper-container .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: #ccc;
		opacity: 0.8;
		margin: 0 5px;
}
.image-swiper-container .swiper-pagination-bullet-active {
		background: #007aff;
}

/* funpark */
.funpark-page-summary {width: 800px; margin: 0 auto; display: flex; justify-content: space-between;}
.funpark-page-summary .title-zone {width: 62%; display: flex; flex-direction: column;}
.funpark-page-summary .title {font-size: 24px; margin-bottom: 16px;}
.funpark-page-summary .img-zone img {width: 252px; height: 252px; border-radius: 8px;}
.funpark-page-summary .preview {background: rgba(32, 156, 255, 0.1); font-size: 15px; padding: 16px 24px; border-radius: 8px;}
.funpark-page-summary .preview a.button {padding: .4rem 2.6rem; margin-top: 1rem;}
.funpark-page .album-introduction {margin-top: 16px;}
.funpark-page .album-introduction-title {font-weight: bold; font-size: 20px; margin-bottom: 12px;}

/* ilisten */
.ilisten-page-summary {width: 800px; margin: 0 auto; display: flex; justify-content: space-between;}
.ilisten-page-summary .title-zone {width: 62%; display: flex; flex-direction: column;}
.ilisten-page-summary .title-zone .title {font-size: 24px;}
.ilisten-page-summary .title-zone .author {font-size: 15px; color:#666; margin-bottom: 16px;}
.ilisten-page-summary .img-zone img {width: 252px; height: 252px; border-radius: 8px;}
.ilisten-page-summary .preview {background: rgba(32, 156, 255, 0.1); font-size: 15px; padding: 16px 24px; border-radius: 8px;}
.ilisten-page-summary .preview a.button {padding: .4rem 2.6rem; margin-top: 1rem;}
.ilisten-page .album-introduction {margin-top: 16px;}
.ilisten-page .album-introduction-title {font-weight: bold; font-size: 20px; margin-bottom: 12px;}

/* .ilisten-player */
.ilisten-player .player-title {font-size: 15px; font-weight: bold; margin-bottom: 4px;}
.ilisten-player .controls {display: flex; justify-content: center; align-items: center; margin: 0 auto; gap: 56px;}
.ilisten-player button {color: #fff; padding: 0; width: 36px; height: 36px; border: none; border-radius: 999px; cursor: pointer;}
.ilisten-player button:hover {opacity: .85;}
.ilisten-player button.play {background: url('../../img/player-icon-play.svg'); background-size: contain; width: 52px; height: 52px;}
.ilisten-player button.pause {background: url('../../img/player-icon-pause.svg'); background-size: contain; width: 52px; height: 52px;}
.ilisten-player button.forward {background: url('../../img/player-icon-forward.svg'); background-size: contain;}
.ilisten-player button.back {background: url('../../img/player-icon-back.svg');}
.ilisten-player .progress{background: transparent; --progress: 0%; width: 100%; -webkit-appearance:none; appearance:none; height: 8px; border-radius: 999px; outline:none;}
.ilisten-player .time {display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; color: #666;}
/* 軌道 */
.progress::-webkit-slider-runnable-track {background: /* 已播放 */ linear-gradient(to right, #209cff 0%, #209cff var(--progress), transparent var(--progress), transparent 100%), /* 未播放 */ linear-gradient( to right, #fff, #fff ); height: 8px; border-radius: 999px; box-shadow: 1px 1px 4px #ccd0d3 inset;}
/* 時間點 - Chrome / Safari */
.progress::-webkit-slider-thumb{background: #fff; width: 20px; height: 20px; margin-top:-7px; border: 6px solid #209cff; border-radius: 50%; -webkit-appearance: none; cursor:pointer; box-shadow: 2px 2px 8px 0px #00000026;}
.progress::-webkit-slider-thumb:hover {opacity: .8;}
/* Firefox */
.progress::-moz-range-track {background: /* 已播放 */ linear-gradient(to right, #209cff 0%, #209cff var(--progress), transparent var(--progress), transparent 100%), /* 未播放 */ linear-gradient( to right, #fff, #fff ); height: 8px; border-radius: 999px; box-shadow: 1px 1px 4px #ccd0d3 inset;}
.progress::-moz-range-thumb{background: #fff; width: 20px; height: 20px; margin-top:-7px; border: 6px solid #209cff; border-radius: 50%; -webkit-appearance: none; cursor:pointer; box-shadow: 2px 2px 8px 0px #00000026; box-sizing: border-box;}
.progress::-moz-range-thumb:hover {opacity: .8;}

/* 260602 精彩生活+ 卡片擴充*/
.vas-desc-card .in-content-bot .tab {margin: 0 1.9rem;}
.vas-desc-card .in-content-bot .in-page-tab-content {margin: 1rem 1.4rem 0;}
.vas-desc-card .in-content-bot .in-page-tab-content .card {width: 328px;}
.vas-desc-card .in-content-bot .in-page-tab-content .card .card-title {margin-bottom: 12px;}
.vas-desc-card .in-content-bot .in-page-tab-content .card .rent-period-content {display: flow-root;}
.vas-desc-card .in-content-bot .in-page-tab-content .card .card-price span {font-weight: 500;}

.rent-period-content{display: none;}
.rent-period-btn-title {font-size: 14px; font-weight: 600; text-align: left; margin-bottom: 6px; margin-top: 8px;}
.rent-period-btn-group {display: flex; margin-bottom: 12px;}
.rent-period-btn-group .button {padding: 0.3rem 0.4rem; min-width: auto; margin-right: 8px; font-size: 15px; font-weight: 400; border-radius: 12px; cursor: pointer;}
.rent-period-btn-group .button.active {color: #209cff; font-weight: 700; border: 1px solid #209cff;}
.rent-period-content .card-rent-info {display: flex; background: #ECF7FF; padding: 8px; margin-bottom: 8px; font-weight: 400; text-align: left; justify-content: space-between; border-radius: 4px;}
.rent-period-content .card-rent-info .card-rent-basic {display: flex; flex-direction: column; justify-content: center;}
.rent-period-content .card-rent-info .card-rent-period {font-size: 17px; font-weight: bold;}
.rent-period-content .card-rent-info .card-rent-flow {font-size: 15px; font-weight: 400;}
.rent-period-content .card-content-info {position: relative; width: 16px; height: 16px; margin-left: 4px; vertical-align: sub; display: inline-block;}
.rent-period-content .card-content-lightbox {position: absolute; bottom: 8px; left: -130px; display: none;}
.rent-period-content .card-content-info:hover .card-content-lightbox, .card-content-lightbox:hover {display: block;}
.rent-period-content .card-content-lightbox .card {color: #333; font-size: 0.65rem; padding: .5rem; margin-bottom: 25px; width: 200px!important; border: 0; line-height: 1.6; display: block;}
.rent-period-content .card-content-lightbox .card ul{list-style: none; margin: 0; max-height: 108px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cecece #f5f5f5; scrollbar-gutter: auto;}
.rent-period-content .card-rent-gift {margin-bottom: 4px; font-weight: 400;}
.rent-period-content .card-rent-gift .in-text {width: 20px; height: 20px; margin-right: 4px;}
.rent-period-content .card-rent-gift .nekos {list-style: none; margin: 0; text-align: left; font-size: 15px;}
.rent-period-content .card-rent-gift .neko {display: block; margin-bottom: 4px;}
.rent-period-content .card-rent-renew {background: #f5f5f5; padding: 8px; margin-bottom: 4px; font-weight: 400; border-radius: 4px;}
.rent-period-content .card-rent-renew .nekos {list-style: none; margin: 0; text-align: left; font-size: 14px;}
.rent-period-content .card-rent-renew .card-content-info {margin-top: 2px;}

/* 260616增加產品包小logo，調整間距 */
.vas-desc-card .in-content-bot .in-page-tab-content .card-text {padding-top: 0.8rem;}
.vas-desc-card .in-content-bot .in-page-tab-content .card .card-logo a {height: 40px; width: 40px; border: 1px solid #ccc; border-bottom: 2px solid #ccc; border-radius: 10px; display: inline-block; overflow: hidden; cursor: default;}
.vas-desc-card .in-content-bot .in-page-tab-content .card .card-logo a img {width: 38px; height: 38px;}
.vas-desc-card .in-content-bot .in-page-tab-content .card h3 {line-height: 1.4;}