@charset "UTF-8";
@import url(../../../css/cckm-box.css);

@import url(./webFont/flaticon_retirement-plus.css);

:root { 
	/** 參數 **/
	--retire-plus-color: 60, 141, 188; /* #3c8dbc tsit 藍*//* 100, 132, 32; #648420  綠*/
	/** 配合退休＋色系，重新指定顏色為retire-plus-color */
	--datepicker-color: var(--retire-plus-color);
}

.link { 
	padding-bottom: 5px; border-bottom: 1px dashed rgb(var(--gray-888-color)); 
}
.link:hover { 
	border-bottom-color: rgb(var(--retire-plus-color)); border-bottom-style: solid; color: rgb(var(--retire-plus-color)); 
}

.label { color: inherit; padding-left: 0; }

/** 背景 **/
.retire-plus > .bg-container {
	background-image:url(https://d1r4509tniam8v.cloudfront.net/img/fm-retired-plan-bg.png);
    background-size: cover; background-position: center 25%; background-repeat: no-repeat; opacity: 0.2;
	position: absolute; height: 200px; width: 100%; border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%;
} 
@media (max-width:767px) {
	.retire-plus > .bg-container { height: 230px; border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%; }
}

.retire-plus { 
	padding-bottom: 30px; 
	margin: auto 10px;
}
.retire-plus small { color:#888; }
.retire-plus .no-data { font-size: initial; padding-top: 30px; padding-bottom: 30px; }
.retire-plus .no-data img { width: 50%; height: 50%; max-width: 150px; }

/* section */
	section { margin-bottom: 20px; }
	.section-title { 
		/*display: flex; align-items: center; justify-content: space-between; gap: 8px;
		padding: 0; margin: 0;*/ margin-bottom: 15px;
	}
	.section-title.title-line {
		border-bottom: 1px solid rgb(var(--retire-plus-color)); 
	}
	.section-title > h4, .section-title > .title { 
		font-size: 18px; padding: 5px 10px; margin: 0; font-weight:normal; 
		border-left: 6px solid rgb(var(--retire-plus-color)); border-top-left-radius: 6px;
	}
	.section-content { line-height: 1.8; letter-spacing: 2px; }
	.section-content .md-content > p { margin-bottom: 15px; white-space: pre-line;} /* for markdown */

	.section-footer { border-top: 1px solid rgb(var(--retire-plus-color)); }
	
	.retire-plus .section-footer.double-line { border-top-style: double; border-top-width: 3px; }
	@media (max-width: 767px) {
		.retire-plus .section-footer .label { display: block; text-align: right; }
	}
	
/** box **/
	@media (max-width: 767px) {
		.box-footer .label { display: block; text-align: right; }
	}
	.retire-plus .box { border-top-color: rgb(var(--retire-plus-color)) !important; }

/** hr **/
	hr { margin: 15px 0; border-color: #ccc; }
	hr.dashed { border-style: dashed; }

/** box-btn **/
	.box-btn { margin: 15px; display: flex; align-items: center; gap: 15px; }
	.box-btn.center { justify-content: center; }
	.box-btn.left { justify-content: flex-start; }
	.box-btn.right { justify-content: flex-end; }
	.box-end { border-top: 1px solid rgb(var(--retire-plus-color)); margin: 20px 0; padding-top: 20px; }

/** input 欄位 **/
	.input-lg { padding-left: 14px; padding-right: 14px; }	/* 為讓年期col-2時輸入3位數不會被截掉 */
	
/** col **/
	[class*='col-'] { padding-left: 10px; padding-right: 10px; }
	.row-grid { margin-left: -10px; margin-right: -10px; }/* 必須與 col-* 同步 */
	
/** 靜態欄位 **/
	/*.static-field .label { color: rgb(var(--gray-888-color)) }*/
	.static-field .form-control {
	    background: inherit !important; font-weight: bold; opacity: 1;
	    box-shadow: none; border-radius: 0; border-bottom-right-radius: 6px; border-top: none; border-left: none;
	}
	.static-field .form-control .caret { display:none; }
	.static-field .input-group .form-control:first-child { border-right: none; border-radius: 0; }
	.static-field .input-group .form-control:not(:first-child):not(:last-child),
	.static-field .input-group .input-group-addon:first-child { background-color:inherit; border-left: none; border-top: none; border-right: none; border-radius: 0; }
	.static-field .input-group .input-group-addon:last-child { background-color:inherit; border-left: none; border-top: none; border-top-right-radius: 0; }
	
	.static-field .form-control:last-child { border-right: 1px solid rgb(var(--retire-plus-color)); }
	.static-field .form-control,
	.static-field .input-group .input-group-addon:last-child,
	.static-field .input-group .form-control:not(:first-child):not(:last-child),
	.static-field .input-group .input-group-addon:first-child {
		border-bottom: 1px solid rgb(var(--retire-plus-color));
	}
	.static-field .input-group .input-group-addon:last-child,
	.static-field .input-group .input-group-addon:first-child {
		color: rgb(var(--retire-plus-color));
	}
	.static-field .ui-select-match-text { text-align: center !important; } /** ui-select 靜態元件時值置中 **/
	.static-field .btn-default[disabled]:hover { border-color: rgb(var(--retire-plus-color)); }

/** 元件 - check / radio **/
	.retire-plus .check-radio input[type=radio]:checked:after { background: rgb(var(--retire-plus-color)); }
	.retire-plus .check-radio input[type=checkbox]:checked:after { color: rgb(var(--retire-plus-color)); }

/** 彙總 - 年齡金額區塊 **/
	.retire-plus .summary .ageAmt { overflow: hidden; }
	.retire-plus .summary .ageAmt .inner { border: 1px solid rgba(var(--retire-plus-color), .5); }
	.retire-plus .summary .ageAmt .inner > .age { background-color: rgba(var(--retire-plus-color), .3); padding: 10px; }
	.retire-plus .summary .ageAmt .inner > .age.active,
	.retire-plus .summary .ageAmt .inner > .age.active > small { background-color: rgb(var(--retire-plus-color)); color: white !important; }
	.retire-plus .summary .ageAmt .inner > .amt.current { color: rgb(var(--retire-plus-color)); }
	.retire-plus .summary .ageAmt .inner > .amt { overflow-x:auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 10px; white-space: nowrap }
	.retire-plus .summary .ageAmt .inner > .amt .content { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 5px;}

/** 圖表 grid>main 一定要給 overflow:hidden讓超過寬度都隱藏起來，才不會讓內部區塊頁面把寬度撐開 **/ 
	.chart-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; /* iOS 平滑滾動 */ }

/** main table **/
	.cc-table.table>thead>tr>th, .cc-table.table>tbody>tr>th, .cc-table.table>tbody>tr>td { 
		text-align:center; vertical-align: middle; border-style: solid; white-space:normal; }
	.cc-table.table>tbody+tbody { border-top: none; }
	.cc-table.table>thead>tr>th, .cc-table.table>tbody>tr>th { background-color: rgb(var(--retire-plus-color)); border-color: lightgray; }
	.cc-table.table>tbody>tr>td, table>tbody>tr>td { border-color: rgba(var(--retire-plus-color), .3); }

/** 強調 **/
	.highlight { font-weight: 500; }
	.highlight.highlight-color { color: rgb(var(--retire-plus-color)); }
	
/** text-color **/
	.retire-plus .text-color { color: rgb(var(--retire-plus-color)); }
	
/** bg-color **/
	.retire-plus .bg-color { background-color: rgb(var(--retire-plus-color)); }

/** blockquote **/
	blockquote { border-left-color: rgb(var(--retire-plus-color)); background-color: rgba(var(--retire-plus-color), 0.05);
				  border-width: 6px; border-top-left-radius: 6px; }
/** media **/
	.main-list .media { margin: 0; padding: 15px 5px; border-bottom: 1px dashed #ddd; }
	.main-list .media:last-child { border-bottom: none; }
	.main-list .media .media-left { padding-right: 25px; }
	.main-list .media .media-left img.media-object { max-width: 250px; height: 100%; max-height: 250px; object-fit: cover; }
	.main-list .media .media-body .media-heading { font-size:x-large; font-weight: bold; margin-bottom: 10px; }
	.main-list .media .media-body .media-heading a:hover { color: rgb(var(--retire-plus-color)); }
	.main-list .media .media-body .media-desc ul li { margin-bottom: 5px; }
	.main-list .media .media-body .tags ul li { padding-top: 5px; padding-bottom: 5px; }
	.main-list .media .media-object-text {
		position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); color: white;
    	display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
	}
	@media (max-width:767px) {
		.main-list .media .media-left { display: block; padding-right: 0; padding-bottom: 25px; }
		.main-list .media .media-left img.media-object { max-width: 100%; }
	}
	
/** 標籤 **/
	.tags ul li { margin: 5px; padding: 10px 12px; border-radius: 6px; background-color: rgb(var(--retire-plus-color)); color: #fff; border: 1px solid rgb(var(--retire-plus-color)); }
	.tags ul.hover li {cursor: pointer; }
	.tags ul.hover li:hover, .tags ul li.active { background-color: rgba(var(--retire-plus-color), .1); color: rgb(var(--retire-plus-color));  }
	
/** ********************** **/
/** ***** cc-btn 按鈕 ***** **/
/** ********************** **/
	.cc-btn, a.cc-btn {
		transition: all,0.2s,ease-in-out; box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important; color: #fff !important;
		background-color: rgba(var(--retire-plus-color),0.7); border: 2px solid rgb(var(--retire-plus-color)); 
	}
	.cc-btn.active, .cc-btn:hover { color: #fff !important; background-color: rgb(var(--retire-plus-color)); }
	.cc-btn:focus { color: #fff !important; }
	.cc-btn.cc-input { border: 1px solid rgb(var(--retire-plus-color));  box-shadow: none !important; }
	.input-group-addon { color: #fff; background-color: rgba(var(--retire-plus-color),0.7); border-color: rgb(var(--retire-plus-color)); }

	.btn.btn-app { padding: 10px 12px; }

/** ************************ **/
/** ***** cc-nav 導覽列 ***** **/
/** ************************ **/
	.cc-nav { position: relative; width: 100%; overflow: hidden; }
	/* 左右按鈕樣式 */
	.cc-nav .scroll-btn {
	  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(0, 0, 0, 0.2); 
	  color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; 
	}
	.cc-nav .left-btn { left: 0; }
	.cc-nav .right-btn { right: 0; }
	.cc-nav-wrapper {
		overflow-x: auto; white-space: nowrap; text-align: center;	padding: 10px 0;
		-webkit-overflow-scrolling: touch; /* iOS 慣性滑動 */
		scroll-behavior: smooth;           /* 滑動柔順 */
		scrollbar-width: none; /* Firefox 隱藏捲軸 */
		-ms-overflow-style: none; /* IE/Edge 隱藏捲軸 */
	}
	/* 隱藏滾動條 (WebKit) */
	.cc-nav::-webkit-scrollbar { display: none; }
	/** 導覽列-》bar **/
	.cc-nav .nav-bar { display: inline-flex; }
	/** 導覽列->bar->item **/
	.cc-nav .nav-bar .nav-item {
		flex: 0 0 auto;	display: flex; align-items: center; gap: 6px; margin: 0 10px; padding: 10px 10px; min-width: 120px;
		background-color: rgba(var(--retire-plus-color), 0.1); font-weight: bold; color: #888;
		border: 1px solid rgba(var(--retire-plus-color), 0.2); border-radius: 6px;
		white-space: nowrap; overflow: hidden; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.1);
		transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease;	
	}
	
	/** item hover / active **/
	.cc-nav .nav-bar .nav-item:hover,
	.cc-nav .nav-bar .nav-item:active,
	.cc-nav .nav-bar .nav-item.active {
	  background-color: rgb(var(--retire-plus-color)); color: white; transform: translateY(-2px);  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
	}
	.cc-nav .nav-bar .nav-item .icon { color: rgb(var(--retire-plus-color)); font-size: 28px; line-height: 1; display: inline-block; transition: transform 0.2s ease; flex-shrink: 0; }
	/* 滑入或點擊時放大圖示 */
	.cc-nav .nav-bar .nav-item:hover .icon,
	.cc-nav .nav-bar .nav-item:active .icon,
	.cc-nav .nav-bar .nav-item.active .icon { color: white; transform: scale(2.2) translate(-5px, -2px); /* 往左上角偏移一點 */ }
	
	@media (min-width: 992px) {
		.cc-side-frame.side {
			display: grid; row-gap: 20px; column-gap: 20px; grid-template-columns: 200px 1fr; justify-content: center; margin: auto 15px;
		}
		.cc-side-frame.side .cc-nav { position: sticky; align-self: flex-start; top: 120px; }
		.cc-side-frame.side .cc-nav .nav-bar { display: block; }
		.cc-side-frame.side .cc-nav .nav-bar .nav-item { margin-bottom: 20px; }
		.cc-side-frame.side .cc-nav .scroll-btn { display: none; }
		.cc-side-frame.side .main { padding-left: 20px; /*overflow: hidden; mark才能讓子選單超過仍顯示*/ }
		.cc-side-frame.side.left  .main { border-left: 1px solid #ddd; overflow: hidden; }
		.cc-side-frame.side.right .main { border-right: 1px solid #ddd; overflow: hidden; }
	}
	@media (max-width: 991px) {
		.cc-side-frame.side { padding: 10px; }
		.cc-side-frame.side .main { padding-top: 20px; padding-left: 0; border-left: none; border-right: none; }
	}

/** ************************ **/
/** *****    nav-tab   ***** **/
/** ************************ **/
	.nav-tabs { padding-bottom: 20px; }
	.nav-tabs.nav-justified { display: table !important; width: 100%; table-layout: fixed; }
	.nav-tabs.nav-justified > li { display: table-cell; float: none !important; width: 100%; text-align: center; }
	.nav-tabs > li > a {
		background: rgba(var(--retire-plus-color), .1);
		border: 0.5px solid rgba(var(--retire-plus-color), .5); 
		border-radius:0 !important; white-space: nowrap; text-align: center; 
	}
	.nav-tabs > li > a:hover { background: rgba(var(--retire-plus-color), .3); }
	.nav-tabs > li:first-child > a { border-top-left-radius: 6px !important; }
	.nav-tabs > li:last-child > a { border-top-right-radius: 6px !important; }
	.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, 
	.nav-tabs > li.active > a:hover { background: rgb(var(--retire-plus-color)); color: white; }
	.nav-tabs > li .tab-content { border: 1px solid #eee; }

/** ************************ **/
/** ***** cc-grid 格欄 ***** **/
/** ************************ **/
	.cc-grid {
		display: grid; row-gap: 30px; column-gap: 30px; margin: auto 15px;
		grid-template-columns: repeat(3, 1fr); justify-content: center; align-items: center;
	}
	.cc-grid.move-h { grid-auto-flow: column; grid-auto-columns: 80%; overflow: hidden; overflow-x: scroll; justify-content: start; }
	.cc-grid.move-h > * { min-width: 200px }
	.cc-grid.grid-auto-fr { grid-template-columns: auto 1fr; }
	.cc-grid.grid-fr-auto { grid-template-columns: 1fr auto; }
	.cc-grid.grid-auto-fill-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
	.cc-grid.grid-auto-fr-auto { grid-template-columns: auto 1fr auto; }
	.cc-grid.md-c-1 { grid-template-columns: repeat(1, 1fr); }
	.cc-grid.md-c-2 { grid-template-columns: repeat(2, 1fr); }
	.cc-grid.md-c-3 { grid-template-columns: repeat(3, 1fr); }
	.cc-grid.md-c-4 { grid-template-columns: repeat(4, 1fr); }
	.cc-grid.md-c-5 { grid-template-columns: repeat(5, 1fr); }
	.cc-grid.cc-r-gap-0 { row-gap: 0; }
	.cc-grid.cc-r-gap-10 { row-gap: 10px; }
	.cc-grid.cc-r-gap-15 { row-gap: 15px; }
	.cc-grid.cc-r-gap-20 { row-gap: 20px; }
	.cc-grid.cc-c-gap-0 { column-gap: 0; }
	.cc-grid.cc-c-gap-10 { column-gap: 10px; }
	.cc-grid.cc-c-gap-15 { column-gap: 15px; }
	.cc-grid.cc-c-gap-20 { column-gap: 20px; }
	.cc-grid.cc-align-items-normal  { align-items: normal; }
	.cc-grid.cc-align-items-start   { align-items: start; }
	.cc-grid.cc-align-items-stretch { align-items: stretch; }
	.cc-grid.cc-justify-content-start { justify-content: start; }
	/* 平板两列 */
	@media (max-width: 991px) and (min-width:768px) {
		.cc-grid { grid-template-columns: repeat(2, 1fr); }
		.cc-grid.grid-auto-fr { grid-template-columns: auto 1fr; }
		.cc-grid.grid-fr-auto { grid-template-columns: 1fr auto; }
		.cc-grid.sm-c-4 { grid-template-columns: repeat(4, 1fr); }
		.cc-grid.sm-c-3 { grid-template-columns: repeat(3, 1fr); }
		.cc-grid.sm-c-2 { grid-template-columns: repeat(2, 1fr); }
		.cc-grid.sm-c-1 { grid-template-columns: 1fr; }
	}
	/* 手机一列 */
	@media (max-width: 767px) {
		.cc-grid.xs-c-2 { grid-template-columns: repeat(2, 1fr); }
		.cc-grid.xs-c-1 { grid-template-columns: 1fr !important; }
	}
	.cc-grid .cc-grid-item { width: 100%; min-width: 0;	/* 想讓內部 div 可以使用 scroll ，必須加 */ }
	.cc-grid-item:hover { transform: translateY(-2px);   box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
	/* 上下左右置中 */
	.item-center { display: grid; place-items: center; /* 同时水平 + 垂直居中 */ }