/********************************
	var
********************************/
:root {
	--color: 39, 57, 0; /* #273900 */
	--bg-color: 248, 248, 248; /* #f8f8f8 */

	--default-color: 170, 170, 170; /* #aaaaaa */
	--success-color: 100, 132, 32; /* #648420 */
	--primary-color: 60, 141, 188; /* #3c8dbc */
	--warning-color: 243, 156, 18; /* #f39c12 */
	--danger-color: 245, 105, 84; /* #f56954 */
	--info-color: 0, 192, 239; /* #00c0ef */
	--cadetblue-color: 95, 158, 160; /* #5f9ea0 */
	
	--gray-eee-color: 238, 238, 238; /* #eeeeee */
	--gray-ddd-color: 221, 221, 221; /* #dddddd */
	--gray-ccc-color: 204, 204, 204; /* #cccccc */
	--gray-aaa-color: 170, 170, 170; /* #aaaaaa */
	--gray-888-color: 136, 136, 136; /* #888888 */
	--gray-333-color: 51, 51, 51; /* #333333 */
	--ellipsis-color: 136, 136, 136; /* #888888 */
	--white-color: 255, 255, 255; /* #ffffff */
	--gold-color: 255, 215, 0;  /* #ffd700 */
	--darkturquoise-color: 0, 206, 209;  /* #00ced1  darkturquoise */
	--darkseagreen-color: 143, 188, 143;  /* #8fbc8f darkseagreen */
	--lightcoral-color: 240, 128, 128;   /* #f08080  lightcoral */
	--lightblue-color: 113, 188, 231; /* #71BCE7   173, 216, 230;  #add8e6 */
	--lightgreen-color: 141, 203, 80; /* #8dcb50  */

	--lightseagreen-color: 32, 178, 170; /* #20b2aa  */
	--lightsalmon-color: 255, 160, 122; /* #ffa07a */

	--cc-tag-opacity: 0.15;
	
	--datepicker-color: var(--success-color);
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
}

body {
	font-size: 13pt;
	font-family: "FontAwesome", "Material Design Icons", "Helvetica Neue", Helvetica, Arial, "Microsoft JhengHei","Apple LiGothic Medium","微軟正黑體",sans-serif;
	color: rgb(var(--color)) ;
	background-color: rgb(var(--bg-color));
	margin: 0;
	padding: 0;
	height: 100%;
	
	/* 20180328 iphone mobile 游標位置會不在元件上 */
	-webkit-overflow-scrolling : touch !important; 
	/*overflow: auto !important; 
	/*height: 100% !important;*/
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none;  margin: 0; }
input[type='number'] { -moz-appearance:textfield; }
a:active, a:focus { outline: 0; border: none; }
details { cursor: pointer; }
summary { outline: none; }

/************** text ************/
	.text-aaa { color: #aaa; }
	.text-888 { color: #888; }
	
	.text-top { vertical-align: top !important; }
	.text-middle { vertical-align: middle !important; }
	.text-bottom { vertical-align: bottom !important; }
	
	.text-h-center { width: fit-content; margin: auto; }
	
/************** 置中 (center) ************/	
	.cc-flex-w-center { display: flex; justify-content: center; flex-wrap: wrap; }	/** 水平置中，會換行 (改 nowrap就不會換行)**/
	.cc-flex-h-center { display: flex; align-items: center;  }	/** 垂直置中 **/

/************** carousel ************/
	.carousel-inner img { width: 100%; }
	.carousel-control.left, .carousel-control.right { background-image: none; }
	.carousel-indicators { bottom: 0px; }
	.carousel-indicators li, .carousel-indicators .active { margin-right: 5px; }
	@media (max-width: 767px) { .carousel-indicators { bottom: -10px } }

.wrapper { min-height: 100%; position: relative;  }

/*********** display ************/
	.display-inline, .inline { display: inline !important; }
	.display-inline-block, .inline-block { display: inline-block !important; }
	.display-block { display: block !important; }
	.display-inline-table { display: inline-table !important; }
	@media (max-width: 767px) {
		.display-xs-block { display: block !important; }
	}

/*********** position ************/
	.position-relative, .relative { position:relative !important; }
	.position-absolute, .absolute { position:absolute !important; }
	.position-absolute.top-0, .absolute.top-0 { top: 0; }
	.position-absolute.bottom-0, .absolute.top-0 { bottom: 0; }
	.position-absolute.right-0, .absolute.right-0 { right: 0; }
	.position-absolute.left-0, .absolute.left-0 { left: 0; }

/* 按鈕換行時上方要有空間 */
	.btn { z-index: 50; } /* 層級必須比圖表layer還要高才行，預設都給 50 */

/* 將元件focus時出現的外藍圈去掉 */
	.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus { outline:none } 

.form-inline { margin-bottom: 5px; }

 /* 為full screen, 將左右空格移掉 */
	.container-fluid { padding-left: 0px; padding-right: 0px; }
	.container { padding: 0px 5px; }

/* thumbnail */
a.thumbnail.active, a.thumbnail:focus, a.thumbnail:hover { border-color: rgb(var(--gray-aaa-color)); }

/* **************************
	20210905 label 顏色換掉	 
**************************** */
	.label { font-weight: normal; display: inline-block; }
	.label-default { background-color: rgb(var(--default-color)); }
	.label-success { background-color: rgb(var(--success-color)); }
	.label-warning { background-color: rgb(var(--warning-color)); }
	.label-danger { background-color: rgb(var(--danger-color)); }
	.label-info { background-color: rgb(var(--info-color)); }
	.label-primary { background-color: rgb(var(--primary-color)); }
	.label-darkturquoise { background-color: rgb(var(--darkturquoise-color)); }
	.label-lightblue { background-color: rgb(var(--lightblue-color)); }
	.label-lightgreen { background-color: rgb(var(--lightgreen-color)); }
	.label-lightcoral { background-color: rgb(var(--lightcoral-color)); }
	
/* **************************
	20210909 blockquote 樣式	 
**************************** */
	.cc-blockquote { position: relative; border: 1px dashed rgba(var(--default-color), 0.5); border-radius: 10px; padding: 10px; margin-bottom: 0; white-space: pre-line; font-size: inherit; background:rgba(var(--default-color), 0.1) }
	.cc-blockquote:before { content: '\f10d'; position:absolute; top:-8px; left: -5px; font-size: 22px; color: rgba(var(--default-color), 0.8); }
	.cc-blockquote:after { content: '\f10e'; position:absolute; bottom:-8px; right: -5px; font-size: 22px; color: rgba(var(--default-color), 0.8); }
	.cc-blockquote > .inner-100 { max-height: 100px; overflow-y: auto; display: block; }

/* **************************
	陰影 
**************************** */
	.border-shadow,
	.cc-shadow.hover:hover {
		-moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.3);
		-webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.3);
		box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.3);
	}

/* **************************
	20210908 drop menu 
**************************** */
	.dropdown-menu>li>a { font-size: 1.5rem; padding-top: 6px; padding-bottom: 6px; }

/* Panel */
	.panel-cckm {
		border-color: #FCF9CF;
	  	margin-bottom: 0px;
	}
	.panel-cckm > .panel-heading {
	  color: #648420;
	  background-color: #D7F1A0;
	  border-color: #A3C75A;
	}
	.panel-cckm > .panel-body {
	  color: #648420;
	  background-color: transparent;
	  border-color: #A3C75A;
	  border-width: 3px 1px 8px 1px;
	  border-style: solid;
	}
	.panel-cckm > .panel-heading + .panel-collapse > .panel-body {
	  border-top-color: #A3C75A;
	}
	.panel-cckm > .panel-heading .badge {
	  color: #D7F1A0;
	  background-color: #648420;
	}
	.panel-cckm > .panel-footer + .panel-collapse > .panel-body {
	  border-bottom-color: #FCF9CF;
	}

/* Modal */
.modal-open .modal.in,  .modal-open .ui-autocomplete {
	z-index:  100000 !important;
}
.modal-header {
	padding: 10px 15px;
}
.modal-title {
	font-weight: bold;
	font-size: 20px;
}
.modal-body .form-horizontal {
	padding-left: 15px;
	padding-right: 15px;
}
/* Alert */
.alert {
	padding: 5px;
}
.alert-text {
	font-size: 10pt;
}
/* table - 改變格線顏色 */
	.table>thead>tr>th {
	   	border-bottom: 1px solid rgb(240,240,240);
	}
	.table>tbody>tr>td, .table>tbody>tr>th, 
	.table>tfoot>tr>td, .table>tfoot>tr>th, 
	.table>thead>tr>td, .table>thead>tr>th {
	    border-top: 1px solid rgb(240,240,240);
	}	
	.table tr>td.first-fixed:first-child, .table tr>th.first-fixed:first-child {
 		position: sticky; z-index: 1; left: 0; /* 首行永遠固定於左 */
	}
	
	/* 圓角 */
		.table-responsive.no-border { border:none; } 
		.table.round-corner-top { border: none; }
		.table.round-corner-top tr>th:first-child { border-top-left-radius: 10px; }
		.table.round-corner-top tr>th:last-child { border-top-right-radius: 10px; }
		.table.round-corner-top tr>th { border-top: none; }
		.table.round-corner-top tr>th:first-child, .table.round-corner-top tr>td:first-child { border-left: none !important }
		.table.round-corner-top tr>th:last-child, .table.round-corner-top tr>td:last-child { border-right: none !important }

	.table>tbody>tr.primary>td { background-color: rgba(var(--primary-color), 0.15); }

/* pagination - 改變分頁顏色及字型大小 */
.pagination>li>a, .pagination>li>span { color: #273900; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #273900;
    border-color: #273900;
}
.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { color: #273900}

.control-label { font-size: 80%; font-weight: normal; color:#888 }
/* disabled component */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	background-color: #f0f0f0;
}
.form-control:focus{ box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); border: 1px solid #ccc; }

.row { margin-left: 0px; margin-right: 0px; }
.row-grid { margin-left: -15px; margin-right: -15px; }
@media all and (min-width:768px) {
	.form-inline .form-group {
		margin-bottom: 15px;
	}
}
@media(max-width:767px) { }

/* chart start */
	.chart-top { margin-top: 10px; }
	.chart { height: 350px; }
	
	.gauge { top: -30px; }

/* datatables start */
	.dataTables_wrapper .col-sm-12 { padding: 0px 3px; }
	.dataTables_wrapper .row { padding-bottom: 0px; }
	.dataTables_wrapper .btn { margin: 0px 2px; }
	.dataTables_info, .dataTables_paginate { font-size: 10pt; color: #888; }
	.dataTables_scrollHead table thead { white-space: nowrap; }

.form-msg { font-size:9pt; color: red; padding-right: 50px; }

.data-src { color: #888; font-size:10pt;  padding-top: 30px; }

/* 讓input field 不換行顯示 */
	.form-control-cckm { display: inline-block; width:100%; }
/* 間隔 */
	.spacer { margin: 2em 0; }
/* 必填 */
	.required { font-size: 8px; color: rgb(var(--danger-color)); }

	a, a:active, a:focus, a:hover, a:visited { color: rgb(var(--color));/* color: #648420; */ font-weight: normal; text-decoration: none; }
	a:hover { text-decoration: none; }
	a.underline, a.hover-underline:hover { text-decoration:underline; }
	a.shadow:hover { box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.3); }

/* **************************
	white-space	 
**************************** */
	.nowrap { white-space: nowrap; }
	.pre-line { white-space: pre-line; } /* 連續空白，取代成一個空白 */
	/* 強制換行 */
	.force-wrap { word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; }

/* **************************
	文字溢位	 
**************************** */
	.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	/** 如果是 display:table-cell，一般的 text-ellipsis不會有效果，要用webkit-box 方式才有效 **/
	.text-ellipsis-1r {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden; }
	.text-ellipsis-2r {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; }
	.text-underline { text-decoration: underline; }

/** toggle **/
	.toggle.circle { min-width: 50px;  }
	.toggle.circle, .toggle-on.circle, .toggle-off.circle, .toggle.circle .toggle-handle { border-radius: 20px; }
	.toggle-handle { padding-left: 12px; padding-right: 12px; }
	.toggle.circle .btn-sm { height: 26px !important; }

/*********************************/
/* 隱私權 , 意見回饋, 會員升級付費  */
/*********************************/
.policy {
	margin: 30px auto;
	padding-top: 0;
	color: #888;
	font-size: 11pt;
	counter-reset: hitem;
}
.policy h2, .policy h3, .policy h4, .policy h5, .register-note h5,
.feedback h2, .feedback h3, .feedback h4, .feedback h5, 
.pay h2, .pay h3, .pay h4, .pay h5, 
.fadv h2, .fadv h3, .fadv h4, .fadv h5 {
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: 600;
	color:#273900;
}
.policy h5 {
	color: #888;
	font-weight: normal;
}
.policy h4:before {
	content: counter(hitem, cjk-ideographic) ' 、 ' ; 
	counter-increment: hitem;
}
.policy ul {
	list-style: none;
	padding-left: 30px;
}
.policy ul li  {
	margin-left: 10px;
	padding-bottom: 10px;
}
.policy ul>li:before, .policy ol>li:before {
	content: '\f02e';
	font-size: 14px;
	position: absolute;
	left: 30px;
}
 .policy ol {
	list-style: none;
	counter-reset: item;
	padding-left: 15px;
}
.policy ol>li:before {
	content: counter(item) ' )' ; 
	counter-increment: item;
	left: 55px;
}

.register-policy {
	overflow-y: scroll; 
	overflow-x: hidden;
	height: 250px;
	font-size: 10pt;
	/*border: 1px solid #eee; */
	padding-left: 15px;
	padding-top: 15px;
}
.register-policy ul li {
	padding-bottom: 5px;
}
.register-footer {
	background-color: #f7f7f7;
	border-top: 1px solid #d8d8d8;
}
.register-footer .register-note {
	
}
.register-footer .register-note h5 {
	padding-left: 15px;
/*	padding-top: 20px; */
 	padding-bottom: 0px;
}
.register-footer .scroll-btn-div {
    bottom: 50px;
    position: absolute;
    text-align: center;
    width: 100%;
}
.register-footer .register-btn-div {
	margin-top: 10px;
	padding-right: 15px;
	display: none;
}

/** 回頂頁 **/
.back-top {
    position: fixed;
    bottom: 90px;
    right: 25px;
    z-index: 9990;

    width: 50px;
    height: 50px;
    padding: 5px;
    display: none;
    border-radius: 50%;
   	font: 32px/38px FontAwesome;
   	text-align: center;
    color: #273900;
    background-color: rgba(135, 168, 65, 0.5);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 2px 3px 8px 0px rgba(0, 0, 0, 0.3);
}
.back-top:hover {
	color: #FFF;
	background-color: #273900;
	cursor: pointer;
}
.back-top:before {
    content: '\f106';
    font-family: 'FontAwesome';
}
.back-top.active {
	transform: translateY(0px) scale(1);
}

/**********************************************************/
/* autocomplete  2017.10.17                               */
/**********************************************************/
.ui-autocomplete {
	font-size: 12pt;
	font-weight: normal;
	color: #AAA;
    position: absolute;
    z-index: 1200;
    cursor: default;
    padding: 0;
    margin-top: 2px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
	border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
  padding: 7px 10px;
}
.ui-autocomplete > li:hover {
  color: #333;
}
.ui-autocomplete > li:first-child:hover {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.ui-autocomplete > li:last-child:hover {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.ui-menu .ui-menu-item:hover {
  background-color: #f6f6f6;
}
.ui-helper-hidden-accessible {
  display: none;
}

/*************************************/
/* small 必填, 非必填                                             */
/*************************************/
small.required { font-size: 10px; color: rgb(var(--danger-color)); padding-left:2px; }
small.required:before { content: "✳︎"; }
small.required:after { content: ""; }
small.non-required { font-size: 10pt; padding-left: 5px; color: rgb(var(--success-color)) }
small.non-required:before { content: "( "; }
small.non-required:after { content: " )"; }

small.size-60 { font-size: 60%; }
small.size-70 { font-size: 70%; }
small.size-80 { font-size: 80%; }

/********************************************/
/*** checkbox radio 樣式                                                                                  */
/********************************************/
.check-radio input[type=checkbox], .check-radio input[type=radio] {
	outline: none; -webkit-appearance: none; appearance: none; border-radius: 1px; box-sizing: border-box; position: relative; cursor: pointer; vertical-align: middle; margin: 0; margin-right: 5px; width: 22px; height: 22px; background: #fff; border: 1px solid #dcdcdc;
}
.check-radio input[type=checkbox]:active, .check-radio input[type=radio]:active {
	border-color: #c6c6c6; background: #ebebeb;
}
.check-radio input[type=checkbox]:hover {
  border-color: #c6c6c6; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
}
.check-radio input[type=checkbox]:checked, .check-radio input[type=radio]:checked {
  background: #fff;
}
.check-radio input[type=radio] {
  border-radius: 1em; width: 22px; height: 22px;
}
.check-radio input[type=radio] + .form-control {
	display: inline-block; width: auto;
}
.check-radio input[type=radio]:checked:after {
	content: ''; display: block; position: relative; top: 4px; left: 4px; width: 12px; height: 12px; background: #648420; border-radius: 1em;
}
.check-radio.default input[type=radio]:checked:after { background: #aaaaaa; }
.check-radio.primary input[type=radio]:checked:after { background: #3c8dbc; }
.check-radio.info input[type=radio]:checked:after { background: #00c0ef; }
.check-radio.warning input[type=radio]:checked:after { background: #f39c12; }
.check-radio.danger input[type=radio]:checked:after { background: #f56954; }

.check-radio > label { font-weight: normal; }
.check-radio > label.circle-bg { background: #eee; padding: 6px 15px 6px 10px; border-radius: 30px; }
.check-radio > label.circle-bg.active { background: #aaa; color: #fff; }

.check-radio input[type=checkbox]:checked:after {
	content: "\f00c"; font-family: FontAwesome; margin-top: 1px; margin-left: 2px; display: block;
}
.check-radio input[type=checkbox].remove:checked:after {
	content: "\f00d"; font-family: FontAwesome; margin-top: 1px; margin-left: 4px; display: block; color: rgb(var(--danger-color));
}
.check-radio input[type=checkbox][disabled].checked:after {
	content: "\f00c"; font-family: FontAwesome; margin-top: 1px; margin-left: 2px; display: block; color: #aaa
}
.check-radio input[type=checkbox][disabled].remove:after {
	content: "\f00d"; font-family: FontAwesome; margin-top: 1px; margin-left: 3px; display: block; color: #aaa
}

.check-radio.default input[type=checkbox]:checked:after { color: #aaaaaa; }
.check-radio.primary input[type=checkbox]:checked:after { color: #3c8dbc; }
.check-radio.info input[type=checkbox]:checked:after { color: #00c0ef; }
.check-radio.warning input[type=checkbox]:checked:after { color: #f39c12; }
.check-radio.danger input[type=checkbox]:checked:after { color: #f56954; }

.check-radio input[type=checkbox]:focus { outline: none; }
.check-radio .checkbox-inline label, .check-radio .radio-inline label {
	cursor: pointer; margin-top: -5px; padding-left: 0; font-weight: normal;
}

.check-radio input[type=radio][disabled], .check-radio input[type=checkbox][disabled] {
	background: #eee;
}
.check-radio input[type=radio][disabled]+span, .check-radio input[type=checkbox][disabled]+span {
	color: #aaa;
}
form .checkbox {
	margin-top: 0; margin-bottom: 0;
}
form .checkbox label {
	font-size: 11pt; padding-left: 0;
}
form .check-radio input[type=checkbox]:checked:after {
	margin-left: 3px;
}
/*****************/

.radio-box {
	display: inline-block;
}
.radio-box input[type=radio] {
	display: none;
}
.radio-box .radio-input {
	background-color: #fff;
	border: 1px solid rgba(39, 57, 0, 0.2);
	border-radius: 100%;
	display: inline-block; 
	width: 20px;
	height: 20px; 
	margin-right: 10px;
	margin-top: -1px;
	vertical-align: middle;
	line-height: 1
}
.radio-box input[type=radio]:checked + .radio-input:after {
	background-color: #648420;
	border-radius: 100%;
	content: "";
	display: inline-block;
	height: 12px;
	margin: 3px;
	width: 12px
}


/*************************************/
/* 時間/順序軸 (功能說明使用)                */
/*************************************/
.cc_timeline {
	position: relative;
	padding-top: 10px;
}
.cc_timeline .timeline-content {
	position: relative;
	padding-top: 0px;
	padding-bottom: 0px;
	font-size: 1.25em;
	letter-spacing: 0.5px;
   }
   .cc_timeline .timeline-content:after {
	content: "";
    position: absolute;
    left: 20px;
    top: 10px;
    bottom: 0px;
    width: 2px;
    background: #d7d7d7;
   }
   .cc_timeline .timeline-content article {
   	counter-reset: list;
   	position: relative;
	margin-left: 40px;
	min-height: 100px;
   }
   .cc_timeline .timeline-content article:before {
	content: "";
	position: absolute;
	margin-left: -30px;
	top: 10px;
	width: 20px;
	height: 20px;
	line-height: 25px;
	text-align: center;
	border-radius: 50%;
	background-color: #d7d7d7;
	outline: 6px solid #f9f9f9;
	z-index: 1;
   }
   .cc_timeline .timeline-content article h4 {
   	margin-top: 5px;
   	width: 100%;
	font-size: 16pt;
	line-height: 32px;
	display: inline-block;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #273900;
}
.cc_timeline .timeline-content article .caption {
	position: relative;
    display: inline-block;
    max-width: 100%;
	margin-bottom: 20px;
	margin-top: 20px;
    padding: 15px;
    line-height: 150%;
    font-size: 12pt;
    border: 1px solid #d7d7d7;
	border-radius: 6px;
}
.cc_timeline .timeline-content article .caption:before {
	content: counter(list);
	counter-increment: list;
	position: absolute;
    left: -16px;
    top: -15px;
    width: 30px;
    height: 30px;
    line-height: 25px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	border: 2px solid #b4d276;
	background-color: #87a841;
	z-index: 1;
}
.cc_timeline .timeline-content article .caption img {
	max-width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 2px solid #B4D276;
}
@media (max-width: 767px) { /* mobile */
	.cc_timeline .timeline-content {
		padding-left: 5px;
		padding-right: 5px;
	}
	.cc_timeline .timeline-content article:before {
		margin-left: -35px;
	}
	.cc_timeline .timeline-content article h4 {
		font-size: 16pt;
	}
	.cc_timeline .timeline-content article .col-md-6 {
		padding-right: 0px;
		padding-left: 6px;
	}
}
/*************************************/
/* Tabs                              */
/*************************************/
.cc_tabs .nav-tabs:before, .cc_tabs .nav-tabs:after {
	display: none;
}
.cc_tabs .nav-tabs li {
	float: none;
	border: 0;
	cursor: pointer;
}
.cc_tabs .nav-tabs li.active {
	cursor: default;
}
* + .tabs-corporate {
	margin-top: 25px;
}
.tabs-corporate .tab-content {
	padding: 25px 5px;
}
.tabs-corporate .nav-tabs {
	position: relative;
	width: 100%;
	display: block;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	-webkit-box-pack: center;
	justify-content: center;
	text-align: center;
	border: 0;
	margin-bottom: 10px;
}
.tabs-corporate .nav-tabs > * {
	position: relative;
	margin-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
}
.tabs-corporate .nav-tabs li {
	display: inline-block;
	will-change: transform;
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	-webkit-box-flex: 1;
	flex-grow: 1;
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}
.tabs-corporate .nav-tabs li a {
	padding: 15px;
	font-size: 18px;
	font-weight: normal;
	line-height: 1.4;
	color: #9b9b9b;
	background: transparent;
	border: 2px solid #B4D276;
	border-radius: 6px;
	text-align: center;
	vertical-align: middle;

}
.tabs-corporate .nav-tabs li a:hover, .tabs-corporate .nav-tabs li.active a {
	color: #FFF;
	background: #648420;
	border: 2px solid #648420;
}

.tabs-corporate .nav-tabs-sub li a {
	border-color: #FFB15E;
	padding: 10px;
}
.tabs-corporate .nav-tabs-sub li a:hover, .tabs-corporate .nav-tabs-sub li.active a {
	background-color: #B85E00;
	border-color: #B85E00;
}

.tabs-corporate .nav-tabs-sub2 li a {
	border-color: #ccc;
	padding: 8px;
}
.tabs-corporate .nav-tabs-sub2 li a:hover, .tabs-corporate .nav-tabs-sub2 li.active a {
	background-color: #555;
	border-color: #555;
}

.tabs-corporate .nav-tabs.primary li a {
	border-color: rgb(var(--primary-color), 0.7);
	padding: 8px;
}
.tabs-corporate .nav-tabs.primary li a:hover, .tabs-corporate .nav-tabs.primary li.active a {
	background-color: rgb(var(--primary-color));
	border-color: rgb(var(--primary-color));
}

/*************************************/
/* 功能說明/影片  (說明)                    */
/*************************************/
.func-desc>.desc {
	margin: 30px 20px;
}
.func-desc>.desc p {
	text-align: center;
	line-height: 35px;
	letter-spacing: 2px;
	padding-bottom: 10px;
}
.func-desc>.desc p span {
	padding-bottom: 5px;
	border-bottom: 3px solid lightgreen;
}
@media (min-width: 1200px) {
	.func-desc>.desc {
		margin-left: 200px;
		margin-right: 200px;
	}
}
/*************************************/
/* 沒有符合資料                    */
/*************************************/
.no-data {
	font-size: 26pt;
	text-align: center;
	padding: 50px 20px;
}
@media (max-width:767px) {
	.no-data { font-size: 20pt; }
}
/*************************************/
/* 元件內加上icon                    */
/*************************************/
.icon-addon {
    position: relative;
    color: #aaa;
    display: block;
}
.icon-addon:after, .icon-addon:before {
    display: table;
    content: " ";
}
.icon-addon:after {
    clear: both;
}
.icon-addon.addon-md .glyphicon, .icon-addon .glyphicon, .icon-addon.addon-md .fa, .icon-addon .fa {
    position: absolute;
    z-index: 2;
    left: 10px;
    font-size: 13pt;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: 1px
}
.icon-addon.addon-md.right-addon .glyphicon, .icon-addon.right-addon .glyphicon, 
.icon-addon.addon-md.right-addon .fa, .icon-addon.right-addon .fa {
	left: inherit;
	right: 10px;
}
.icon-addon.addon-lg .form-control {
    line-height: 1.33;
    height: 46px;
    font-size: 18px;
    padding: 10px 16px 10px 40px;
}
.icon-addon.addon-lg.right-addon .form-control {
	padding-left: 15px;
	padding-right: 15px;
}
.icon-addon.addon-sm .form-control {
    height: 30px;
    padding: 5px 10px 5px 28px;
    font-size: 12px;
    line-height: 1.5;
}
.icon-addon.addon-sm.right-addon .form-control {
	padding-left: 15px;
	padding-right: 15px;
}
.icon-addon.addon-lg .fa, .icon-addon.addon-lg .glyphicon {
    font-size: 18px;
    margin-left: 0;
    left: 11px;
    top: 4px;
}
.icon-addon.addon-lg.right-addon .fa, .icon-addon.addon-lg.right-addon .glyphicon {
	left: inherit;
	right: 11px;
}
.icon-addon.addon-md .form-control, .icon-addon .form-control {
    padding-left: 30px;
    float: left;
    font-weight: normal;
}
.icon-addon.addon-md.right-addon .form-control, .icon-addon.right-addon .form-control {
	padding-left: 15px;
	padding-right: 15px;
}
.icon-addon.addon-sm .fa, .icon-addon.addon-sm .glyphicon {
    margin-left: 0;
    font-size: 12px;
    left: 5px;
    top: -1px
}
.icon-addon.addon-sm.right-addon .fa, .icon-addon.addon-sm.right-addon .glyphicon {
	left: inherit;
	right: 5px;
}

/** mail autocomplete css **/
.email-suggestion {
	color: #ccc;
}

/**** 以下因調整次首頁而增加 ********/
/***********************
* 共用 (cc-fb-video-block , cc-display-block)
***********************/
.section-padding {
	position: relative;
	display: block;
	padding-top: 30px;
	padding-bottom: 30px;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
	font-family: Flaticon;
	font-size: inherit;
	margin-left: 0 !important;
}
.fg {
	display: inline-block;
	font: normal normal normal 14px/1 Flaticon;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.fg-lg {
	font-size: 1.33333333em;
	line-height: 0.75em;
	vertical-align: -15%;
}
.fg-2x {
	font-size: 2em;
}
.fg-3x {
	font-size: 3em;
}
.fg-4x {
	font-size: 4em;
}
.fg-5x:before, .fg-5x:after {
	font-size: 5em;
}
 .even-row {
	background-color: #e0e0e0;
}
 .odd-row {
	background-color: #eee;
}
.cc-cmm .bg-img {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
/***********************
* cc-video-block ( fb, youtube 影片 ）
***********************/
.cc-video-block  {
	position: relative;
	background: #273900;
	border: 10px solid #A3C75A;
} 
.cc-video-block .cc-video-box {
	/* z-index: -99; */
}
.cc-video-link-box {
	padding-top: 5px;
	padding-bottom: 10px;
	text-align: center;
}
.cc-video-link-box  .cc-video-link  {
	font-size: 16px;
	font-weight: normal;
	color: #888;
	text-decoration: underline;
	position: relative;
	padding-left: 28px;
}
.cc-video-link-box  .cc-video-link.dark {
	color: yellow;
}
.cc-video-link-box .cc-video-link span:before {
	content: '\f16a';
    position: absolute;
    top: -6px;
    left: 0;
    color: orangered;
    opacity: 0.9;
	font-size: 22px;
}
/***********************
* cc-display-block
***********************/
 .cc-display-block {
	padding:  30px 20px;
	position: relative;
}
.cc-display-block .cc-desc {
	padding-top: 15px;
	padding-left: 100px;
}
.cc-display-block .cc-desc.cc-desc-right {
	padding-left: 0;
	padding-right: 100px;
	text-align: right;
}
.cc-display-block .cc-video-desc .cc-title,
.cc-display-block .cc-desc .cc-title {
	font-size: 40px;
	font-weight: bold;
	padding: 20px 0 10px;
	transition: opacity 0.8s ease , transform 0.8s ease;
}
.cc-display-block .cc-video-desc .cc-title [class*=" flaticon-"]:before, 
.cc-display-block .cc-video-desc .cc-title [class*=" flaticon-"]:after,
.cc-display-block .cc-desc .cc-title [class*=" flaticon-"]:before, 
.cc-display-block .cc-desc .cc-title [class*=" flaticon-"]:after {
	font-size: 55px;
	font-weight: normal;
}
.cc-display-block .cc-desc .cc-intro-text {
	font-size: 22px;
	line-height: 42px;
	font-weight: 300;
	color: #648420;
	padding: 10px 0;
}
.cc-display-block .cc-video-desc .cc-title small,
.cc-display-block  .cc-desc .cc-title small  {
    font-size: 18px !important;
    color: #888 !important;
    margin-left: 5px;
    font-weight: normal !important;
}
/** 螢幕 **/
@media (min-width:992px) and (max-width:1199px) {
	.cc-display-block .cc-desc {
		padding-top: 0;
		padding-left: 60px;
	}
	.cc-display-block .cc-video-desc .cc-title,
	.cc-display-block .cc-desc .cc-title {
		padding: 10px 0;
	}
	.cc-display-block .cc-desc .cc-intro-text {
		padding: 5px 0;
	}
	.cc-display-block .cc-desc.cc-desc-right {
		padding-right: 60px;
	}
}
/** 平板 **/
@media (min-width:768px) and (max-width:991px) {
	.cc-display-block .cc-desc {
		padding-top: 0px;
		padding-left: 0;
		text-align: center;
	}
	.cc-display-block .cc-video-desc .cc-title,
	.cc-display-block .cc-desc .cc-title {
		font-size: 28px;
		padding: 10px 0;
	}
	.cc-display-block .cc-desc .cc-intro-text {
	    font-size: 18px;
		line-height: 30px;
		padding: 5px 0;
	}
	.cc-display-block .cc-desc.cc-desc-right {
		padding-right: 0;
		float: none;
		text-align: center;
	}
}
/** 手機 **/
@media  (max-width:767px) {
	.cc-display-block {
		padding-bottom: 20px;
	}
	.cc-display-block [class^="col-sm-"] {
		padding-left: 0;
		padding-right: 0;
	}
	.cc-display-block .cc-img {
		background: #000;
	}
	.cc-display-block .cc-video-block .cc-video-box { 
		opacity: 0.55;
	}
	.cc-display-block.cc-display-block-re .cc-video-block .cc-video-box { 
		opacity: 1;
	}
	.cc-display-block .cc-desc-block {
		position: absolute;
	    width: 100%;
	    top: calc(50% - 50px);
	    left: 0;
	    z-index: 1;
	}
	.cc-display-block .cc-video-desc,
	.cc-display-block .cc-desc, 
	.cc-display-block .cc-desc.cc-desc-right {
		text-align: center;
		padding: 0;
		width: 100%;
	}
	.cc-display-block .cc-video-desc .cc-title,
	.cc-display-block .cc-desc .cc-title  {
		color: #FFF;
		padding: 0;
		font-size: 36px
	}
	.cc-display-block .cc-video-desc .cc-title [class*=" flaticon-"]:before, 
	.cc-display-block .cc-video-desc .cc-title [class*=" flaticon-"]:after,
	.cc-display-block .cc-desc .cc-title [class*=" flaticon-"]:before, 
	.cc-display-block .cc-desc .cc-title [class*=" flaticon-"]:after {
		font-size: 36px;
		font-weight: normal;
	}
	.cc-display-block .cc-desc .cc-intro-text {
	 	color: white;
	    font-size: 20px;
	    line-height: 28px;
	}
	.cc-display-block.cc-display-block-re .cc-desc-block {
		position: relative;
	}
	.cc-display-block .cc-video-desc .cc-title,
	.cc-display-block.cc-display-block-re .cc-desc .cc-title {
		color: #273900;
	}
	.cc-display-block.cc-display-block-re .cc-desc .cc-intro-text {
		color: #648420;
		display: none;
	}
	.cc-display-block .cc-desc .cc-intro-text.cc-intro-text-none {
		display: none;
	}
	.cc-display-block.cc-display-block-re .cc-desc-block .cc-desc .cc-intro-text-re {
		display: inline-block;
	}
}
@media  (max-width:424px) {
	.cc-display-block .cc-video-desc .cc-title,
	.cc-display-block .cc-desc .cc-title  {
		font-size: 32px;
	}
	.cc-display-block .cc-desc .cc-intro-text {
		font-size: 18px;
		line-height: 25px;
	}
}
@media  (max-width:374px) {
	.cc-display-block .cc-desc, 
	.cc-display-block .cc-desc.cc-desc-right {
		bottom: 0;
	}
	.cc-display-block .cc-desc .cc-intro-text,
	.cc-display-block .cc-desc .cc-btn-block {
		padding-top: 5px;
		padding-bottom: 5px;
	}
}
/***********************
* cc-item-block
***********************/
.cc-item-block .cc-item-box {
	margin-bottom: 20px;
	padding: 20px;
	width: 100%;
	text-align: center;
	color: #fff;
	font-size: 30px;
	border: 5px solid #f9f9f9;
}
.cc-item-block  a {
	text-decoration: none;
}
.cc-item-block .cc-item-box [class*=" flaticon-"]:before, .cc-item-block .cc-item-box [class*=" flaticon-"]:after {
	font-size: 55pt;
	font-weight: normal;
}
.cc-item-block  a:hover .cc-item-box {
	background: transparent;
}

.cc-item-box.cc-item-box-primary {
	background: #3c8dbc;
	border-color: #3c8dbc;
}
.cc-item-block  a:hover .cc-item-box-primary {
	color: #3c8dbc;
}
.cc-item-box.cc-item-box-warning {
	background: #f39c12;
	border-color: #f39c12;
}
.cc-item-block  a:hover .cc-item-box-warning {
	color: #f39c12;
}
.cc-item-box.cc-item-box-purple {
	background: #932ab6;
	border-color: #932ab6;
}
.cc-item-block  a:hover .cc-item-box-purple {
	color: #932ab6;
}
.cc-item-box.cc-item-box-info {
	background: #00c0ef;
	border-color: #00c0ef;
}
.cc-item-block  a:hover .cc-item-box-info {
	color: #00c0ef;
}
.cc-item-box.cc-item-box-success {
	background: #648420;
	border-color: #648420;
}
.cc-item-block  a:hover .cc-item-box-success {
	color: #648420;
}
.cc-item-box.cc-item-box-default {
	background: gray;
	border-color: gray;
}
.cc-item-block  a:hover .cc-item-box-default {
	color: gray;
} 

/***********************
* mask-bg-box
***********************/
.mask-bg-box {
	margin-bottom: 0;
    position: static;
}
.mask-bg-box .bg-container {
	background: #000000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
 }
 .mask-bg-box .bg-container .bg-img {
	background-size: cover;
    background-position: 50% 50%;
    opacity: 0.3;
    /*background-image: url(../../img/cc_00_0000.jpg);*/
    background-color: inherit;
    width: 100%;
    height: 280px;
    transform: translate3d(0px, -116.286px, 0px);
    overflow: hidden;
 }
 
/***********************
* cc-btn-block
***********************/
.cc-btn-block {
	padding: 15px 0;
}
.cc-btn-block .btn {
	padding-left: 70px;
	padding-right: 70px;
}
.cc-btn-block .btn-default, .cc-btn-block .btn-success {
	transition: all,0.2s,ease-in-out;
	box-shadow: 0 5px 5px rgba(0,0,0,0.14)  !important;
	margin-right: 10px;
}
.cc-btn-block .btn-success  {
	background: #648420 !important;
	border-color:  #648420;
	color: white;
}
.cc-btn-block .btn-success:hover {
	background: #b5cc86 !important;
	border-color:  #b5cc86;
	color: #273900;
}	
@media (max-width:991px) {
	.cc-btn-block .btn {
		padding-left: 40px;
    		padding-right: 40px;
	}
}
@media (max-width:767px) {
	.cc-btn-block .btn {
		margin-bottom: 10px;
	}
}
@media  (max-width:374px) {
	.cc-btn-block {
		padding-top: 5px;
		padding-bottom: 5px;
	}
}

/***********************
* gift-point-box
***********************/
.gift-point-box {
	position: relative;
    text-align: center;
}
.gift-point-box .point-box {
	position: relative;
}
.gift-point-box .point-box .point:before  {
	content: 'G';
	position: absolute;
	left: 0;
	top: 0;
	padding-top: 10px;
	text-align: center;
    margin: 0;
    line-height: 0;
	width: 20px; 
	height: 20px; 
    font-size: 11px;
    border-radius: 50%;
    color: yellow;
    font-weight: bold;
    background: #648420;
	/*z-index: -1;*/
}
.gift-point-box .point-box .point {
	padding-left: 25px;
	font-size: 15px;
}

.gift-point-box .vaPoint-box .point {
	padding-left: 25px;
	font-size: 18px;
}

/*************************************************
  自設元件  
*************************************************/
/********* Table ***************/
	.cc-table.table tr>th { color: white;  background-color: #273900; }
	.cc-table.table-bordered {border: none}
	.cc-table.table caption {font-size: 14px;margin-top: 20px}
	.cc-table.table caption.first {margin-top: 0px}
	.cc-table.table>tbody>tr>td, .cc-table.table>tbody>tr>th, .cc-table.table>tfoot>tr>td, .cc-table.table>tfoot>tr>th, 
	.cc-table.table>thead>tr>td, .cc-table.table>thead>tr>th {border-style: dotted; font-size:14px}
	.cc-table.table>thead>tr:first-child>th:first-child { border-top-left-radius: 6px; border-left-width:0 }
	.cc-table.table>thead>tr:first-child>th:last-child { border-top-right-radius: 6px; border-right-width:0 }
	.cc-table.table>thead>tr:not(:first-child) th { border-radius: 0; }
	.cc-table.table>thead>tr>th {text-align:center;}
	.cc-table.table>thead>tr>th.v-middle, .cc-table.table>tbody>tr>td.v-middle { vertical-align: middle; }
	.cc-table.table>thead>tr>th.h-left, .cc-table.table>tbody>tr>td.h-left { text-align: left !important; }
	.cc-table.table>thead>tr>th.h-center, .cc-table.table>tbody>tr>td.h-center { text-align: center !important; }
	.cc-table.table>thead>tr>th.h-right, .cc-table.table>tbody>tr>td.h-right { text-align: right !important; }
	.cc-table.table>tfoot { border-top-style: double;}
	@media (max-width:767px) {
		.cc-table.table>tbody>tr>td, .cc-table.table>tbody>tr>th, .cc-table.table>tfoot>tr>td, .cc-table.table>tfoot>tr>th, 
		.cc-table.table>thead>tr>td, .cc-table.table>thead>tr>th {border-style: dotted; font-size:14px}
	}
	
.table-group.fixed { position: relative; overflow: auto; width: 101%; height: 361px; }
.table-group.fixed table { table-layout: fixed; }
.table-group.fixed td:first-child, .table-group.fixed th:first-child { position: sticky; position: -webkit-sticky; left: 0; z-index: 1; color:#fff; background:#888; }
.table-group.fixed thead tr th { position: sticky; position: -webkit-sticky; top:0; }
.table-group.fixed th:first-child { z-index: 2; }
.table-group.fixed th, .table-group.fixed td { white-space: nowrap; width:100%; box-sizing: border-box; }
@media (max-width:767px) { .table-group.fixed table { width: auto; } }

.table-responsive { width: 99.5%; }
@media( max-width: 991px) {
	.table-responsive { width: 99.3%; }
}
@media (max-width:767px) { 
	.table-responsive { border:none; }
	.table-responsive>.table-bordered>tbody>tr>td:first-child, .table-responsive>.table-bordered>tbody>tr>th:first-child, .table-responsive>.table-bordered>tfoot>tr>td:first-child, .table-responsive>.table-bordered>tfoot>tr>th:first-child, .table-responsive>.table-bordered>thead>tr>td:first-child {
    	border-left: 1px dotted #ddd;
	}
	.table-responsive>.table-bordered>tbody>tr:last-child>td, .table-responsive>.table-bordered>tbody>tr:last-child>th, .table-responsive>.table-bordered>tfoot>tr:last-child>td, .table-responsive>.table-bordered>tfoot>tr:last-child>th {
		border-bottom: 1px dotted #ddd;
	}
	.table-responsive>.table-bordered>tbody>tr>td:last-child,  .table-responsive>.table-bordered>tbody>tr>th:last-child,  .table-responsive>.table-bordered>tfoot>tr>td:last-child,  .table-responsive>.table-bordered>tfoot>tr>th:last-child, .table-responsive>.table-bordered>thead>tr>td:last-child {         
		border-right: 1px dotted #ddd;
	}
	/* .table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
		border-top: 1px dotted #ddd;
	}
 */
}

/********* 按鈕 ****************/
	.btn-danger, .btn-warning, .btn-info, .btn-primary, .btn-success,
	.btn-green { color: #fff !important; } /* 上面將 a 的字顏色改掉，所以在這裡必須強制再改一次 */

	.cc-btn-block-inline { display: inline-block; width: 50%; }
	.cc-btn-default {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(var(--default-color),0.7);
	    border: 2px solid rgb(var(--default-color));
	    color: #fff !important;
	}
	.cc-btn-default.active, .cc-btn-default:hover { color: #fff !important; background-color: rgb(var(--default-color)); }
	.cc-btn-default:focus { color: #fff !important; }
	.cc-btn-default.cc-input { border: 1px solid #888;  box-shadow: none !important;}
	.input-group-addon.cc-default { color: #fff; background-color: rgba(var(--default-color),0.7); border-color: #888; }
	
	.cc-btn-default.light { background-color: rgb(var(--default-color)); }
	.cc-btn-default.light:hover { background-color: rgba(var(--default-color),0.7) }	
	
	.cc-btn-green, a.cc-btn-green {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(0,166,90,0.7);
	    border: 2px solid #00a65a;
	    color: #fff !important;
	}
	.cc-btn-green.active, .cc-btn-green:hover { color: #fff !important; background-color: #00a65a; }
	.cc-btn-green:focus { color: #fff !important; }
	.cc-btn-green.cc-input { border: 1px solid #00a65a;  box-shadow: none !important;}
	.input-group-addon.cc-green { color: #fff; background-color: rgba(0,166,90,0.7); border-color: #00a65a; }
	
	.cc-btn-green.light { background-color: #00a65a; }
	.cc-btn-green.light:hover { background-color: rgba(0,166,90,0.7) }	
	
	.cc-btn-success, a.cc-btn-success {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(100,132,32,0.7);
	    border: 2px solid #648420;
	    color: #fff !important;
	}
	.cc-btn-success.active, .cc-btn-success:hover { color: #fff !important; background-color: #648420; }
	.cc-btn-success:focus { color: #fff !important; }
	.cc-btn-success.cc-input { border: 1px solid #648420;  box-shadow: none !important;}
	.input-group-addon.cc-success { color: #fff; background-color: rgba(100,132,32,0.7); border-color: #648420; }
	
	.cc-btn-success.light { background-color: #648420; }
	.cc-btn-success.light:hover { background-color: rgba(100,132,32,0.7) }	
	
	.cc-btn-warning, a.cc-btn-warning {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(243,156,18,0.7);
	    border: 2px solid #f39c12;
	    color: #fff !important;
	}
	.cc-btn-warning.active, .cc-btn-warning:hover { color: #fff !important; background-color: #f39c12; }
	.cc-btn-warning:focus { color: #fff !important; }
	.cc-btn-warning.cc-input { border: 1px solid #f39c12;  box-shadow: none !important;}
	.input-group-addon.cc-warning { color: #fff; background-color: rgba(243,156,18,0.7); border-color: #f39c12; }
	
	.cc-btn-warning.light { background-color: #f39c12; }
	.cc-btn-warning.light:hover { background-color: rgba(243,156,18,0.7) }	
	
	.cc-btn-danger, a.cc-btn-danger {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(245,105,84,0.7);
	    border: 2px solid #f56954;
	    color: #fff !important;
	}
	.cc-btn-danger.active, .cc-btn-danger:hover { color: #fff !important; background-color: #f56954; }
	.cc-btn-danger:focus { color: #fff !important; }
	.cc-btn-danger.cc-input { border: 1px solid #f56954;  box-shadow: none !important;}
	.input-group-addon.cc-danger { color: #fff; background-color: rgba(245,105,84,0.7); border-color: #f56954; }
	
	.cc-btn-danger.light { background-color: #f56954; }
	.cc-btn-danger.light:hover { background-color: rgba(245,105,84,0.7) }	
	
	.cc-btn-primary, a.cc-btn-primary {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(60,141,188,0.7);
	    border: 2px solid #3c8dbc;
	    color: #fff !important;
	}
	.cc-btn-primary.active, .cc-btn-primary:hover { color: #fff !important; background-color: #3c8dbc; }
	.cc-btn-primary:focus { color: #fff !important; }
	.cc-btn-primary.cc-input { border: 1px solid #3c8dbc;  box-shadow: none !important;}
	.input-group-addon.cc-primary { color: #fff; background-color: rgba(60,141,188,0.7); border-color: #3c8dbc; }
	
	.cc-btn-primary.light { background-color: #3c8dbc; }
	.cc-btn-primary.light:hover { background-color: rgba(60,141,188,0.7) }	
	
	.cc-btn-info, a.cc-btn-info {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(0,192,239,0.7);
	    border: 2px solid #00c0ef;
	    color: #fff !important;
	}
	.cc-btn-info.active, .cc-btn-info:hover { color: #fff !important; background-color: #00c0ef; }
	.cc-btn-info:focus { color: #fff !important; }
	.cc-btn-info.cc-input { border: 1px solid #00c0ef;  box-shadow: none !important;}
	.input-group-addon.cc-info { color: #fff; background-color: rgba(0,192,239,0.7); border-color: #00c0ef; }
	
	.cc-btn-info.light { background-color: #00c0ef; }
	.cc-btn-info.light:hover { background-color: rgba(0,192,239,0.7) }	
	
	.cc-btn-teal, a.cc-btn-teal {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(57,204,204,0.7);
	    border: 2px solid #39cccc;
	    color: #fff !important;
	}
	.cc-btn-teal.active, .cc-btn-teal:hover { color: #fff !important; background-color: #39cccc; }
	.cc-btn-teal:focus { color: #fff !important; }
	.cc-btn-teal.cc-input { border: 1px solid #00c0ef;  box-shadow: none !important;}
	.input-group-addon.cc-teal { color: #fff; background-color: rgba(57,204,204,0.7); border-color: #39cccc; }
	
	.cc-btn-teal.light { background-color: #39cccc; }
	.cc-btn-teal.light:hover { background-color: rgba(57,204,204,0.7) }	
	
	.cc-btn-cadetblue, a.cc-btn-cadetblue {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    background-color: rgba(95,158,160,0.7);
	    border: 2px solid #5F9EA0;
	    color: #fff !important;
	}
	.cc-btn-cadetblue.active, .cc-btn-cadetblue:hover { color: #fff !important; background-color: #5F9EA0; }
	.cc-btn-cadetblue:focus { color: #fff !important; }
	.cc-btn-cadetblue.cc-input { border: 1px solid #5F9EA0;  box-shadow: none !important;}
	.input-group-addon.cc-cadetblue { color: #fff; background-color: rgba(95,158,160,0.7); border-color: #5F9EA0; }
	
	.cc-btn-cadetblue.light { background-color: #5F9EA0; }
	.cc-btn-cadetblue.light:hover { background-color: rgba(95,158,160,0.7) }	
	
	.cc-btn-link, a.cc-btn-link {
		transition: all,0.2s,ease-in-out;
	    box-shadow: 0 5px 5px rgba(0,0,0,0.14) !important;
	    border: 2px solid #eee;
	    color: inherit !important;
	}
	.cc-btn-link.active, .cc-btn-link:hover { color: inherit !important; background-color: #eee; }
	.cc-btn-link:focus { color: inherit !important; }
	.cc-btn-link.cc-input { border: 1px solid #eee;  box-shadow: none !important;}
	.input-group-addon.cc-link { color: inherit; background-color: #eee; border-color: #eee; }
	
	.cc-btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { border-right-width: 0px; }
	.cc-btn-group>.btn:last-child:not(:first-child):not(.dropdown-toggle) { border-left-width: 0px; }
	
	.btn.btn-app { position: relative; padding: 15px 5px; margin: 0 5px 10px 5px; min-width: 80px; height: 60px; box-shadow: none; border-radius: 0; text-align: center; color: #666; border: 1px solid #ddd; background-color: #fafafa; font-size: 14px; }
	.btn.btn-app > .fa, .btn.btn-app > .glyphicon, .btn.btn-app > .ion { font-size: 20px; display: block; }
	.btn.btn-app:hover, .btn-app.active { background: #f4f4f4; color: #444; border-color: #aaa; }
	.btn.btn-app:active, .btn.btn-app:focus, .btn-app.active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
	.btn.btn-app > .badge { position: absolute; top: -3px; right: -10px; font-size: 10px; font-weight: 400; }
/* 	.btn.btn-app:first-child { margin-left: 0; } */
	
	/** btn circle **/
	.cc-btn-circle { position: relative; display: inline-block; padding: 0; width: 36px;  height: 36px;  line-height: 32px; border-radius: 100%; font-size:18px; text-align:center; }
	
	/** btn-ellipsis (...下拉選單) **/
	.cc-btn-ellipsis { background-color: rgba(var(--ellipsis-color), 0.05); color: rgba(var(--ellipsis-color), 0.6) !important; border: none; line-height: 36px !important; }
	.cc-btn-ellipsis.active, .cc-btn-ellipsis:hover, .cc-btn-ellipsis:focus { background-color: rgba(var(--ellipsis-color), 0.3); color: rgb(var(--ellipsis-color)) !important; }
	
	/** btn app **/
	.cc-btn-app { position: relative; padding: 10px 5px; margin: 0 0 10px 10px; min-width: 80px; height: 60px; box-shadow: none; border-radius: 0; text-align: center; color: #666; border: 1px solid #ddd; background-color: #fafafa; font-size: 12px; }
	.cc-btn-app > .fa, .cc-btn-app > .glyphicon, .cc-btn-app > .ion { font-size: 20px; display: block; margin-bottom: 3px; }
	.cc-btn-app:hover { background: #f4f4f4; color: #444; border-color: #aaa; }
	.cc-btn-app:active, .cc-btn-app:focus { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
	.cc-btn-app > .badge { position: absolute; top: -3px; right: -10px; font-size: 10px; font-weight: 400; }
	
	.cc-btn-app.primary { color: #FFF; border-color:#3c8dbc; background-color: #3c8dbc; }
	.cc-btn-app.primary:hover { background: #3c8dbc77; color: #3c8dbc; border-color: #3c8dbc; }
	.cc-btn-app.primary.active, .cc-btn-app.primary:focus { box-shadow: inset 0 3px 5px #3c8dbc11; }
	
	.cc-btn-app.warning { color: #FFF; border-color:#f39c12; background-color: #f39c12; }
	.cc-btn-app.warning:hover { background: #f39c1277; color: #f39c12; border-color: #f39c12; }
	.cc-btn-app.warning.active, .cc-btn-app.warning:focus { box-shadow: inset 0 3px 5px #f39c1211; }
	
	.cc-btn-app.danger { color: #FFF; border-color:#f56954; background-color: #f56954; }
	.cc-btn-app.danger:hover { background: #f5695477; color: #f56954; border-color: #f56954; }
	.cc-btn-app.danger.active, .cc-btn-app.danger:focus { box-shadow: inset 0 3px 5px #f5695411; }
	
	/** btn group -> choice **/
	.btn-group.choice .btn {
	    background: transparent; color: #888 !important; border-top: none; border-left: none; border-right: none; border-radius: unset; margin: 0 8px; padding-left: 8px; padding-right: 8px;
    }
    .btn-group.choice .cc-btn-default { color: #888 !important }
    .btn-group.choice .cc-btn-success { color: #648420 !important }
    .btn-group.choice .cc-btn-danger { color: #f56954 !important }
    .btn-group.choice .cc-btn-warning { color: #f39c12 !important }
    .btn-group.choice .cc-btn-primary { color: #3c8dbc !important }
    .btn-group.choice .cc-btn-info { color: #00c0ef !important }

/**** 手風琴列表 ***/
	.cc-accordion-list > .cc-accordion {
		padding: 10px;
		position: relative;
		display: flex;
		flex-direction: column;
		min-width: 0;
		word-wrap: break-word;
		background-clip: border-box;
		border: 1px solid rgba(25,25,25,.125);
		border-radius: 5px;
		background-color: inherit;
		
		border-radius: 0;
		border: none;
		border-bottom: 1px solid #d9d9d9;
    }
    .cc-accordion-list > .cc-accordion>.cc-accordion-header {
	    position: relative;
		padding: .75rem 1.25rem 0 0;
		margin-bottom: 0;
		border-radius: 0;
		border: 0;
		font-weight: 700;
		text-transform: uppercase;
		transition: color .25s;
		background-color: transparent;
	}
	.cc-accordion-list > .cc-accordion>.cc-accordion-header::after {
		content: '\f068';
		position: absolute;
		top: 24px;
		right: 0;
		transform: translateY(-50%);
		font-size: 21px;
		font-weight: normal;
		color: inherit;
	}
	.cc-accordion-list > .cc-accordion>.cc-accordion-header, 
	.cc-accordion-list > .cc-accordion>.cc-accordion-header:hover, 
	.cc-accordion-list > .cc-accordion>.cc-accordion-header:focus { color: inherit; text-decoration: none; outline: none;	}
   	.cc-accordion-list > .cc-accordion>.cc-accordion-body {
   		/*margin: 0 auto; */
	    flex: 1 1 auto;
	    padding: 10px;
	}
	.cc-accordion-list > .cc-accordion.collapsed-cc-accordion >.cc-accordion-header { color: #9b9b9b !important; padding-bottom: .75rem }
	.cc-accordion-list > .cc-accordion.collapsed-cc-accordion >.cc-accordion-header::after { content: '\f067'; }
	.cc-accordion-list > .cc-accordion.collapsed-cc-accordion >.cc-accordion-body {display: none;	}

/********* cursor ****************/
.cc-cursor-pointer { cursor: pointer; }

/********* circle ****************/
	.cc-circle-35 { width: 35px; height: 35px; padding: 0; border-radius: 50%; }
	.cc-circle-30 { width: 30px; height: 30px; padding: 0; border-radius: 50%; }
/********* 圓弧 ****************/
	.cc-radius { border-radius: 100%; }	
	.cc-radius-0 { border-radius: 0 }
	.cc-radius-6 { border-radius: 6px; }
	.cc-radius-10 { border-radius: 10px; }
	.cc-radius-30 { border-radius: 30px; }
	.cc-radius-r-10 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
	.cc-radius-l-30 { border-top-left-radius: 30px; border-bottom-left-radius: 30px; }

/********* border ****************/
	.cc-border { border: 1px solid #eee;}
	.cc-border.hover:hover { background: #ddd }
	.cc-border-left { border-left: 1px solid #eee; }
	.cc-border-right { border-right: 1px solid #eee; }
	.cc-border-top { border-top: 1px solid #eee; }
	.cc-border-bottom { border-bottom: 1px solid #eee; }
	.cc-border-bottom-dotted { border-bottom: 1px dotted #eee; }
	.cc-border-width-1 { border-width: 1px }
	.cc-border-width-2 { border-width: 2px }
	.cc-border-width-3 { border-width: 3px }
	.cc-border-width-5 { border-width: 5px }
	.cc-border-dashed { border-style: dashed }
	.cc-border-dotted { border-style: dotted }
	.cc-border-top-double { border-top-style: double }
	.cc-border.color-ddd, .cc-border-left.color-ddd, .cc-border-right.color-ddd, .cc-border-top.color-ddd, .cc-border-bottom.color-ddd, .cc-border-color-ddd { border-color: #ddd; }
	.cc-border.color-ccc, .cc-border-left.color-ccc, .cc-border-right.color-ccc, .cc-border-top.color-ccc, .cc-border-bottom.color-ccc, .cc-border-color-ccc { border-color: #ccc; }
	.cc-border.color-aaa, .cc-border-left.color-aaa, .cc-border-right.color-aaa, .cc-border-top.color-aaa, .cc-border-bottom.color-aaa, .cc-border-color-aaa { border-color: #aaa; }
	.cc-border.color-888, .cc-border-left.color-888, .cc-border-right.color-888, .cc-border-top.color-888, .cc-border-bottom.color-888, .cc-border-color-888 { border-color: #888; }
	.cc-border.color-gold, .cc-border-left.color-gold, .cc-border-right.color-gold, .cc-border-top.color-gold, .cc-border-bottom.color-gold, .cc-border-color-gold { border-color: rgb(var(--gold-color)); }
	.cc-border.color-success, .cc-border-left.color-success, .cc-border-right.color-success, .cc-border-top.color-success, .cc-border-bottom.color-success, .cc-border-color-success { border-color: rgb(var(--success-color)); }
	.cc-no-border { border: none; }
	.cc-no-border-bottom-i { border-bottom: none !important; }

/********* font weight ****************/
	.cc-font-weight-300 { font-weight: 300; }
	.cc-font-weight-500 { font-weight: 500; }
	.cc-font-weight-bold { font-weight: bold; }
	.cc-font-weight-normal { font-weight: normal; }
/********* font size ****************/
	.cc-font-size-xxx-large { font-size: xxx-large }
	.cc-font-size-xx-large { font-size: xx-large }
	.cc-font-size-x-large { font-size: x-large }
	.cc-font-size-larger { font-size: larger }
	.cc-font-size-large { font-size: large }
	.cc-font-size-medium { font-size: medium !important }
	.cc-font-size-smaller { font-size: smaller !important }
	.cc-font-size-small { font-size: small }
	.cc-font-size-x-small { font-size: x-small }
	.cc-font-size-75 { font-size: 75% }	
	.cc-font-size-80 { font-size: 80% }	
	.cc-font-size-85 { font-size: 85% }	
	.cc-font-size-1-5 { font-size: 1.5rem }	
	.cc-font-size-2 { font-size: 2rem }	
	.cc-font-size-3 { font-size: 3rem }	
	.cc-font-size-2i { font-size: 2rem  !important }	
	.cc-font-size-3i { font-size: 3rem !important }
/********* line height ****************/
	.cc-line-height-2 { line-height: 2rem }
	.cc-line-height-1-5 { line-height: 1.5 }	
	
	.cc-text-spacing-0-5 { letter-spacing: 0.5rem }
	
/********* width ****************/
	.cc-width-fit-content { width: fit-content; }
	.cc-width-150 { width: 150px; }
	.cc-width-170 { width: 170px; }
	.cc-width-auto { width: auto; }
	.cc-width-full { width: 100%; }
	
/********* height ****************/
	.cc-height-full { height: 100%; }
	
	
/******** tips *******************/
	.cc-tips:before {
	    content: '\f0eb';
	    font-size: 120%;
	    margin-right: 5px;
	    color: orange;
	}
/******** max width *******************/	
	.cc-max-w-0 { max-width: 0; }
	.cc-max-w-250 { max-width: 250px; }
	
/******** move 滑動 *******************/
	.cc-move-horizontal { position: relative; overflow:hidden; }
	.cc-move-horizontal > .move-inner { overflow-x:scroll; cursor: ew-resize; white-space: nowrap; }
	.cc-move-horizontal > ul.tags { margin-left: 0; }
	.cc-move-horizontal > .move-inner > .tag { font-weight:500; margin-right: 3px; }
	.no-scrollbar { scrollbar-width: none; margin-bottom: 0; padding-bottom: 0; -ms-overflow-style: none; overflow: -moz-scrollbars-none; }
	.no-scrollbar::-webkit-scrollbar { display: none; width: 0 !important; }

/******** HR ************/
	.cc-hr { border: none; padding-top: 15px; padding-bottom: 15px; margin: 0;}
	.cc-hr:before { content: ''; position: absolute; left: 50%; width: 100%; max-width: 640px; height: 1px; transform: translateX(-50%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #b7b7b7 50%, rgba(0, 0, 0, 0) 100%);}

/******* font size *******/
	.cc-size-18 { font-size: 18px; }
	.cc-size-16 { font-size: 16px; }

/******** div table *******************/
	.cc-div-inline-table { display: inline-table; }
	.cc-div-table { position: relative; display: table; width:100% }
	.cc-div-table.border { border: 1px solid #ccc; border-top-right-radius: 6px; border-top-left-radius: 6px; }
	.cc-div-table.w-auto { width:auto; }
	.cc-div-table .w-50 { width: 50% }
	.cc-div-table .w-30 { width: 30% }
	.cc-div-table .w-25 { width: 25% }
	.cc-div-table .w-20 { width: 20% }
	.cc-div-table .w-15 { width: 15% }
	.cc-div-table .w-10 { width: 10% }
	.cc-div-table .w-5 { width: 5% }
	.cc-div-table.fixed { table-layout:fixed; }
	.cc-div-table.fixed-424 { table-layout:auto; }
	.cc-div-table.fixed .cc-div-table-cell { background: #f9f9f9; }
	.cc-div-table-row { display: table-row; }
	
	.cc-div-table.striped .cc-div-table-row:nth-child(even),
	.cc-div-table.striped .cc-div-table-row:nth-child(even) .cc-div-table-cell.td { background: #f9f9f9; }
	.cc-div-table.striped .cc-div-table-row:nth-child(odd),
	.cc-div-table.striped .cc-div-table-row:nth-child(odd) .cc-div-table-cell.td { background: white; }
	
	.cc-div-table.hover .cc-div-table-row:hover,
	.cc-div-table.hover .cc-div-table-row:hover .cc-div-table-cell.td { background: #eee; }
	
	.cc-div-table-cell { display: table-cell; }
	.cc-div-table-cell > span { padding: 5px; }
	.cc-div-table-cell > .th-name { display: none; }
	.cc-div-table-row:last-child > .cc-div-table-cell { border-bottom: none; }
	.cc-div-table-cell.border-bottom-dotted { border-bottom: 1px dotted #ccc; }
	.cc-div-table-cell.border-bottom-dashed { border-bottom: 1px dashed #ccc; }
	.cc-div-table-cell.border-bottom-double { border-bottom: 3px double #ccc; }
	.cc-div-table-cell.no-border { border-bottom: none; }
	.cc-div-table-cell.th, .cc-div-table.fixed .cc-div-table-cell.th { padding: 10px 5px; text-align: center; background:#888; color:#fff; }
	.cc-div-table-cell.td { padding: 5px; }
	.cc-div-table-cell.th:first-child, .cc-div-table.fixed .cc-div-table-cell.th:first-child { border-top-left-radius: 6px; }
	.cc-div-table-cell.th:last-child, .cc-div-table.fixed .cc-div-table-cell.th:last-child { border-top-right-radius: 6px; }
	.cc-div-table-cell.th.non-raidus { border-radius: 0 }
	
	.cc-div-table .border-dashed { border: 2px dashed #39cccc55; }
	.cc-div-table .border-dashed.default { border-color: #ccc}
	.cc-div-table .border-dashed.danger { border-color: #f5695455; }
	.cc-div-table .border-dashed.warning { border-color: #f39c1255; }
	.cc-div-table .border-dashed.success { border-color: #00a65a55; }
	.cc-div-table .border-dashed.info { border-color: #00c0ef55; }
	.cc-div-table .border-dashed.primary { border-color: #3c8dbc55; }

	.cc-div-table-caption.top, .cc-div-table-cell.top { vertical-align: top; }
	.cc-div-table-caption.middle, .cc-div-table-cell.middle { vertical-align: middle; }
	.cc-div-table-caption.bottom, .cc-div-table-cell.bottom { vertical-align: bottom; }
	.cc-div-table-caption.center, .cc-div-table-cell.center { text-align: -webkit-center; text-align: center; }

	.cc-div-table-caption.full, .cc-div-table-cell.full { width:100% }
	.cc-div-table .nowrap { white-space: nowrap; }
	.cc-div-table .pre-line { /* letter-spacing: 3px; */ white-space: pre-line; }
	.cc-div-table-caption { display: table-caption; caption-side: bottom; }
	
	.cc-div-table.fixed .cc-div-table-cell.first-sticky:first-child,
	.cc-div-table.fixed-424 .cc-div-table-cell.first-sticky:first-child { position:sticky;  left:0; z-index:1; min-width:120px }
	.cc-div-table.fixed .cc-div-table-cell.last-sticky:last-child,
	.cc-div-table.fixed-424 .cc-div-table-cell.last-sticky:last-child { position:sticky; right:0; z-index:1; min-width: 40px }
	
	@media (max-width:767px) {
		.cc-div-table.xs-list { display: block; }
		.cc-div-table.xs-list .cc-div-table-row { display: block; border-bottom: 1px dotted #ccc; padding: 8px; }
		.cc-div-table.xs-list .cc-div-table-row:first-child { display: none; } /** th **/
		.cc-div-table.xs-list .cc-div-table-row:last-child { border-bottom: none; }
		.cc-div-table.xs-list.border, .cc-div-table.xs-list .cc-div-table-row:last-child { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
		.cc-div-table.xs-list .cc-div-table-row:nth-child(2) { border-top-left-radius: 6px; }
		.cc-div-table.xs-list .cc-div-table-row:nth-child(2) { border-top-right-radius: 6px; }
		.cc-div-table.xs-list .cc-div-table-row > .td { display: block; text-align: left; border-bottom: none; padding-top: 2px; padding-bottom: 2px; }
		.cc-div-table.xs-list .cc-div-table-row > .td > span { padding : 0 }
		.cc-div-table.xs-list .cc-div-table-row > .td > * { display: inline; }
		.cc-div-table.xs-list .cc-div-table-row > .td > .th-name.block { display: block; }
	}
	
	@media (max-width:424px) {
		.cc-div-table.fixed-424 { table-layout:fixed; width: auto; }
	}

/******** func header *******************/
	.cc-func-header {  padding: 3rem 0.8rem 4rem; }
	.cc-func-header h1 { line-height: 1.3; }
	.cc-func-header  h1 small { font-size: 50%; color: #888; margin-bottom: 10px; display: inline-block; padding-bottom:3px; border-bottom:2px solid #aaa; }
	.cc-func-header p { line-height: 1.75em; }
	.cc-func-header .desc { margin: 8px 30px 0; color:#888; font-size: 16px; }
	@media (max-width:767px) { .cc-func-header .desc { margin: 8px 0 0; } }

/******** search bar *******************/
	.cc-search-bar { padding: 20px 16px; background: #dddddd55; }
	.cc-search-bar.bg-transparent { background:transparent!important; }
	.cc-search-bar .btn-link { color: #888; }
	.cc-search-bar .btn-link i.fa { font-size: 1.3em; }
	.cc-search-bar .search-way ul { min-width: 90px; }
	.cc-search-bar .search-way ul > li { font-size: 16px; padding: 5px 10px; cursor: pointer; }
	.cc-search-bar .search-way ul > li:hover { background: rgba(var(--default-color), 0.3)}
	@media (max-width: 767px) {
		.cc-search-bar input[type=search] { border-top-left-radius: 6px !important; border-bottom-left-radius: 6px !important; }
	}
	
/********* tag ****************/
	a.cc-tag, .cc-tag { color: rgb(var(--default-color)); }
	.cc-tag { display: inline-block; border: 1px solid rgba(var(--default-color), var(--cc-tag-opacity)); background:rgba(var(--default-color), var(--cc-tag-opacity)); font-size: 75%; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; padding: 10px; margin-bottom: 10px; }
	.cc-tag:hover { background: rgb(var(--default-color)); color: white !important; }
	
	.cc-tag.cc-tag-success { color: rgb(var(--success-color)); border-color: rgba(var(--success-color), var(--cc-tag-opacity)); background:rgba(var(--success-color), var(--cc-tag-opacity)); }
	.cc-tag.cc-tag-success:hover { background: rgb(var(--success-color)); }
	.cc-tag.cc-tag-warning { color: rgb(var(--warning-color)); border-color: rgba(var(--warning-color), var(--cc-tag-opacity)); background:rgba(var(--warning-color), var(--cc-tag-opacity)); }
	.cc-tag.cc-tag-warning:hover { background: rgb(var(--warning-color)); }
	.cc-tag.cc-tag-primary { color: rgb(var(--primary-color)); border-color: rgba(var(--primary-color), var(--cc-tag-opacity)); background:rgba(var(--primary-color), var(--cc-tag-opacity)); }
	.cc-tag.cc-tag-primary:hover { background: rgb(var(--primary-color)); }
	.cc-tag.cc-tag-danger { color: rgb(var(--danger-color)); border-color: rgba(var(--danger-color), var(--cc-tag-opacity)); background:rgba(var(--danger-color), var(--cc-tag-opacity)); }
	.cc-tag.cc-tag-danger:hover { background: rgb(var(--danger-color)); }
	
/********* padding ****************/
	.cc-padding-clear-first-last > div:first-child, .cc-padding-clear-first-last > span:first-child { padding-left: 0 }
	.cc-padding-clear-first-last > div:last-child, .cc-padding-clear-first-last > span:last-child { padding-right: 0}
	@media (max-width: 767px) {
		.cc-padding-clear > div, 
		.cc-padding-clear-first-last > div:first-child, .cc-padding-clear-first-last > span:first-child,
		.cc-padding-clear-first-last > div:last-child, .cc-padding-clear-first-last > span:last-child { padding-left: 0; padding-right: 0}
	}
	.cc-padding-0i { padding: 0 !important; }
	.cc-padding-0 { padding: 0; }
	.cc-padding-5 { padding: 5px; }
	.cc-padding-5i { padding: 5px !important; }
	.cc-padding-7 { padding: 7px; }
	.cc-padding-10 { padding: 10px; }
	.cc-padding-15 { padding: 15px; }
	.cc-padding-20 { padding: 20px; }
	.cc-padding-30 { padding: 30px; }
	.cc-padding-l-0 { padding-left: 0px; }	
	.cc-padding-l-10 { padding-left: 10px; }
	.cc-padding-l-15 { padding-left: 15px; }
	.cc-padding-l-20 { padding-left: 20px; }
	.cc-padding-r-0 { padding-right: 0px; }	
	.cc-padding-r-5 { padding-right: 5px; }	
	.cc-padding-r-15 { padding-right: 15px; }
	.cc-padding-r-10 { padding-right: 10px; }
	.cc-padding-r-20 { padding-right: 20px; }
	.cc-padding-l-r-0-i { padding-left: 0px !important; padding-right: 0px !important;}	
	.cc-padding-l-r-15-i { padding-left: 15px !important; padding-right: 15px !important;}	
	.cc-padding-l-r-0 { padding-left: 0px; padding-right: 0px;}	
	.cc-padding-l-r-5 { padding-left: 5px; padding-right: 5px;}	
	.cc-padding-l-r-10 { padding-left: 10px; padding-right: 10px;}
	.cc-padding-l-r-15 { padding-left: 15px; padding-right: 15px;}	
	.cc-padding-l-r-20 { padding-left: 20px; padding-right: 20px;}	
	.cc-padding-l-r-30 { padding-left: 30px; padding-right: 30px;}	
	.cc-padding-l-r-40 { padding-left: 40px; padding-right: 40px;}	
	.cc-padding-l-r-50 { padding-left: 50px; padding-right: 50px;}	
	.cc-padding-t-0 { padding-top: 0px;}	
	.cc-padding-t-5 { padding-top: 5px;}	
	.cc-padding-t-10 { padding-top: 10px;}	
	.cc-padding-t-15 { padding-top: 15px;}	
	.cc-padding-t-20 { padding-top: 20px;}	
	.cc-padding-t-30 { padding-top: 30px;}	
	.cc-padding-b-0 { padding-bottom: 0px;}	
	.cc-padding-b-5 { padding-bottom: 5px;}	
	.cc-padding-b-10 { padding-bottom: 10px;}	
	.cc-padding-b-15 { padding-bottom: 15px;}	
	.cc-padding-b-20 { padding-bottom: 20px;}	
	.cc-padding-b-30 { padding-bottom: 30px;}	
	.cc-padding-t-b-5 { padding-top: 5px; padding-bottom: 5px; }
	.cc-padding-t-b-10 { padding-top: 10px; padding-bottom: 10px; }
	.cc-padding-t-b-15 { padding-top: 15px; padding-bottom: 15px; }
	.cc-padding-t-b-20 { padding-top: 20px; padding-bottom: 20px; }
	.cc-padding-t-b-30 { padding-top: 30px; padding-bottom: 30px; }
	.cc-padding-t-b-50 { padding-top: 50px; padding-bottom: 50px; }
	@media (max-width:767px) {
		.cc-xs-padding-l-r-0 { padding-left: 0px !important; padding-right: 0px !important; }
		.cc-xs-padding-l-0 { padding-left: 0px !important; }
		.cc-xs-padding-r-0 { padding-right: 0px !important; }	
	}
/********* margin ****************/	
	.cc-margin-auto { margin: auto; }
	.cc-margin-0 { margin: 0 !important; }
	.cc-margin-5 { margin: 5px; }
	.cc-margin-t-b-0 {margin-top: 0; margin-bottom: 0; }
	.cc-margin-t-b-3 {margin-top: 3px; margin-bottom: 3px; }
	.cc-margin-t-b-5 {margin-top: 5px; margin-bottom: 5px; }
	.cc-margin-t-b-15 {margin-top: 15px; margin-bottom: 15px; }
	.cc-margin-t-b-10 {margin-top: 10px; margin-bottom: 10px; }
	.cc-margin-t-b-20 {margin-top: 20px; margin-bottom: 20px; }
	.cc-margin-t-b-30 { margin-top: 30px; margin-bottom: 30px; }
	.cc-margin-t-5 { margin-top: 5px; }
	.cc-margin-t-10 { margin-top: 10px; }
	.cc-margin-t-15 { margin-top: 15px; }
	.cc-margin-t-20 { margin-top: 20px; }
	.cc-margin-t-25 { margin-top: 25px; }
	.cc-margin-t-30 { margin-top: 30px; }
	.cc-margin-t-50 { margin-top: 50px; }
	.cc-margin-b-5 { margin-bottom: 5px; }
	.cc-margin-b-10 { margin-bottom: 10px; }
	.cc-margin-b-15 { margin-bottom: 15px; }
	.cc-margin-b-20 { margin-bottom: 20px; }
	.cc-margin-b-30 { margin-bottom: 30px; }
	.cc-margin-b-50 { margin-bottom: 50px; }
	.cc-margin-r-2 {margin-right: 1rem; }
	.cc-margin-t-3 { margin-top: 3rem; }
	.cc-margin-r-5 { margin-right: 5px; }
	.cc-margin-r-10 { margin-right: 10px; }
	.cc-margin-r-15 { margin-right: 15px; }
	.cc-margin-r-30 { margin-right: 30px; }
	.cc-margin-r-50 { margin-right: 50px; }
	.cc-margin-l-r-0 { margin-left:0; margin-right:0; }
	.cc-margin-l-r-5 { margin-left: 5px; margin-right:5px; }
	.cc-margin-l-r-10 { margin-left: 10px; margin-right:10px; }
	.cc-margin-l-r-15 { margin-left: 15px; margin-right:15px; }
	.cc-margin-l-r-20 { margin-left: 20px; margin-right:20px; }
	.cc-margin-l-5 { margin-left: 5px; }
	.cc-margin-l-10 { margin-left: 10px; }
	.cc-margin-l-15 { margin-left: 15px; }
	.cc-margin-l-30 { margin-right: 30px; }
	.cc-margin-l-50 { margin-right: 50px; }