/*
 * ============================================================
 * TABLE OF CONTENTS (目錄)
 * ============================================================
 *
 *  1.  Tab Menu
 *
 *  2.  Tab Content
 *      2-1. Tab Content Display
 *      2-2. Tab Content Item
 *      2-3. fadeIn Animation
 *
 *  3.  RWD: max-width: 991px
 *
 *  4.  RWD: max-width: 767px（手風琴模式）
 *
 * ============================================================
 */

/* ============================================================
 * 1. Tab Menu
 * ============================================================ */
.tab-menu {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		max-width: 25%;
}
.tab-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		padding: 15px 20px;
		margin-bottom: 2px;
		background-color: transparent;
		border: 2px solid #e0e0e0;
		cursor: pointer;
		-webkit-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}
.tab-item:hover,
.tab-item.active {
		background-color: var(--primary-blue);
		color: var(--color-white);
		border-color: var(--primary-blue);
}
.tab-item span {
		font-size: var(--font-size-base);
		font-weight: 500;
}
.tab-item img {
		width: 20px;
		height: 20px;
		-webkit-transition: -webkit-transform 0.3s ease;
		transition: -webkit-transform 0.3s ease;
		-o-transition: transform 0.3s ease;
		transition: transform 0.3s ease;
		transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.tab-item:hover img,
.tab-item.active img {
		-webkit-filter: brightness(0) invert(1);
		filter: brightness(0) invert(1);
}
.tab-item.active img {
		-webkit-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
}

/* ============================================================
 * 2. Tab Content
 * ============================================================ */
/* ---- 2-1. Tab Content Display ---- */
.tab-content-display {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 calc(75% - 20px);
		flex: 0 0 calc(75% - 20px);
		max-width: calc(75% - 20px);
		padding: 0 40px;
}
.tab-content-display h3 {
		font-size: var(--font-size-2lg);
		margin-bottom: 20px;
		color: var(--color-gray);
}
.tab-content-display p {
		font-size: var(--font-size-base);
		line-height: 1.6;
		color: var(--color-gray-dark);
}

/* ---- 2-2. Tab Content Item ---- */
.tab-content-item {
		display: none;
		-webkit-animation: fadeIn 0.3s ease;
		animation: fadeIn 0.3s ease;
}
.tab-content-item.active {
		display: block;
}

/* ---- 2-3. fadeIn Animation ---- */
@-webkit-keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}
@keyframes fadeIn {
		from {
				opacity: 0;
		}
		to {
				opacity: 1;
		}
}

/* ============================================================
 * 3. RWD: max-width: 991px
 * ============================================================ */
@media (max-width: 991px) {
		.tab-menu {
				-webkit-box-flex: 0;
				-ms-flex: 0 0 30%;
				flex: 0 0 30%;
				max-width: 30%;
		}
		.tab-content-display {
				-webkit-box-flex: 0;
				-ms-flex: 0 0 calc(70% - 20px);
				flex: 0 0 calc(70% - 20px);
				max-width: calc(70% - 20px);
				padding: 0 40px;
		}
}

/* ============================================================
 * 4. RWD: max-width: 767px（手風琴模式）
 * ============================================================ */
@media (max-width: 767px) {
		.tab-show-block {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
		}
		.tab-menu {
				-webkit-box-flex: 0;
				    -ms-flex: 0 0 100%;
				        flex: 0 0 100%;
				max-width: 100%;
		}
		.tab-content-display {
				display: contents;
		}
		.tab-item {
				padding: 15px;
			 margin-bottom: 0;
		}
		.tab-content-item {
				display: block !important;
				max-height: 0;
				overflow: hidden;
				padding: 0 20px;
				border-top: none;
				margin-bottom: 5px;
				-webkit-transition: max-height 0.4s ease, padding 0.3s ease;
				-o-transition: max-height 0.4s ease, padding 0.3s ease;
				transition: max-height 0.4s ease, padding 0.3s ease;
		}
		/* 展開狀態 */
		.tab-content-item.open {
				max-height: -webkit-fit-content;
				max-height: -moz-fit-content;
				max-height: fit-content;
				padding: 20px;
				border: 2px solid #e0e0e0;
		}
		/* 箭頭旋轉改為向下展開方向 */
		.tab-item.active img {
				-webkit-transform: rotate(90deg);
				    -ms-transform: rotate(90deg);
				        transform: rotate(90deg);
		}
}