@charset "utf-8";

.MRRI-wrap h3 { color:RoyalBlue;}
.MRRI-wrap strong { color:DodgerBlue;}
.MRRI-wrap em { font-style:normal; color:red;}
.MRRI-wrap a { color:blue; text-decoration:underline;}
.MRRI-wrap table { border-top:1px solid black; border-left:1px solid black;}
.MRRI-wrap table td { border-right:1px solid black; border-bottom:1px solid black; padding:10px;}
.MRRI-wrap table p { padding:0; margin:0;}
.MRRI-wrap small em { color:DeepPink;}
.MRRI-wrap div > *,
.MRRI-wrap div > * td { font-size:16px; line-height:1.6;}
.MRRI-wrap h1 { color:DeepPink; font-size:24px;}
.MRRI-wrap h2 { color:Crimson; font-size:20px;}
.MRRI-wrap dd { padding-left:0; margin-left:0;}

/* 標籤按鈕容器 */
        .MRRI-wrap div.tab-container {
            display: flex;
			flex-wrap:wrap;
			gap:calc( 20px / 3  );
			margin-bottom:0;
        }

        /* 標籤按鈕樣式 */
        .MRRI-wrap div > .tab-button {
            background-color: #f1f1f1;
            border: none;
            outline: none;
            cursor: pointer;
            padding:10px;
            font-size: 14px;
            transition: 0.3s;
            border-radius: 8px 8px 0 0;
			width:calc( 25% - 5px );
        }

        /* 滑鼠移過標籤時的顏色 */
        .MRRI-wrap div > .tab-button:hover {
            background-color: #ddd;
        }

        /* 作用中 (Active) 標籤的樣式 */
        .MRRI-wrap div > .tab-button.active {
            background-color: #9070af;
            color: white;
        }

        /* 內容區塊預設隱藏 */
        .MRRI-wrap div.tab-content {
            display: none;
            padding: 0 10px;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 8px 8px;
			overflow:hidden;
        }

        /* 作用中 (Active) 內容區塊顯示 */
        .MRRI-wrap div.tab-content.active {
            display: block;
            animation: fadeIn 0.3s; /* 加入簡單的淡入動畫 */
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }