
/*----------------------------------------------------------------------
	#main
-------------------------------- */
.main{
	margin:var(--spacing-lg) 0;
}

.secbox{
	margin:var(--spacing-xl) 0;
}
.secbox_first{
	margin-top:0;
}


.mainarea{
	display: flex; flex-wrap: wrap;
	/*margin-top: -1rem;
	margin-right: -2rem;
	margin-left: -2rem;*/
}
.mainarea > * {
	flex-shrink: 0;
	width: 100%; max-width: 100%;
	/*padding-right: 2rem;
	padding-left: 2rem;
	margin-top: 1rem;*/
}
@media (min-width:1200px){
	.main-content{ width: calc( 100% - 25% - 32px); }
	.main-side{ width: 25%; margin-left:32px; }		
}

@media (min-width:1400px){
	.main-content{ width: calc( 100% - 20% - 32px); }
	.main-side{ width: 20%; margin-left:32px; }		
}







/*----------------------------------------------------------------------
	#page：頁碼
-------------------------------- */
.page{
	font-size:var(--text-sm); font-weight:600;
	text-align:center;
	color:#666;
	margin-top:var(--spacing-xl);
}
/*.page br:nth-of-type(1){
	display:none;
}*/
.page a ,
.page span{
	display:inline-block;
	min-width:40px;
	background:#fff;
	border:1px solid var(--color-one);
	/*border-bottom-width:3px;*/
	border-radius:4px;
	color:var(--color-one);
	font-size:var(--text-sm);
	padding:var(--spacing-xs) var(--spacing-sm);
	text-align:center;
	margin:var(--spacing-xs) var(--spacing-2xs);
}
.page span{
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}
.page a:hover{
	background: var(--color-one);
	border-color: var(--color-one);
	color:#fff;
}





/*----------------------------------------------------------------------
	#heading_sec
-------------------------------- */
.heading_sec{
	position:relative;
	display:flex; flex-wrap:wrap;
	align-items:center;
	gap:0.5rem;
	
	border-bottom: 2px solid #ccc;
	padding-bottom:0.5rem;
	margin-bottom:2rem;
}
.heading_sec:before{
    position: absolute; left: 0; bottom: -2px; content: "";
    width: 60px; width: 60px;height: 4px;
    background-color: var(--color-accent);
}
.heading_sec .heading-text{
	color:var(--color-one-dark)
}



.heading_breadcrumb:before{
	width: 110px;
}
.breadcrumb-item{
	color:var(--color-one);
	font-weight:600;
}
a.breadcrumb-item:hover{
	color:var(--color-accent);
}

.breadcrumb-item .iconsvg{
	width:24px; height:24px;
}
.breadcrumb-item .iconsvg:before{
	background-color:var(--color-one);
}
.breadcrumb-item:hover .iconsvg:before{
	background-color:var(--color-accent);
}





/*----------------------------------------------------------------------
	{C} #view-column
-------------------------------- */
.view-column{
	display:flex;
	flex-direction:column;
	word-wrap:break-word;
	gap:var(--spacing-md);
	margin-bottom:3rem;
}
.view-column > *{
	width:100%;
}

.view-column .btnbar{
	margin:0;
}


/*----------------------------------------------------------------------
	{C} {view} #videobox [影片]
-------------------------------- */
.videobox{
	text-align:center;
}
.videobox iframe{
	max-width:100%;
}



/*----------------------------------------------------------------------
	{C} {view} #figurebox [相片集]
-------------------------------- */
.figurebox{
}
.figurebox .row{
	justify-content:center;
}



/*----------------------------------------------------------------------
	{C} {view} #heading_figure [相片集-大標]
-------------------------------- */
.heading_figure{
	margin:var(--spacing-md) 0 var(--spacing-lg) 0;
	color:#ccc;
	text-align:center;
	overflow:hidden;
}
.heading_figure .heading-text{
	position:relative;
	 font-size:var(--text-lg); 
	letter-spacing:10px;
	text-transform:uppercase;
}
.heading_figure .heading-text:before, 
.heading_figure .heading-text:after{
	position:absolute; top:50%; content:"";
	width:1000px; height:1px;
	background:#ccc;
}
.heading_figure .heading-text:before{ left:-1010px; }
.heading_figure .heading-text:after{ right:-1010px; }






/*----------------------------------------------------------------------
	#card
-------------------------------- */

/* ===== 標題 */
.card-name{
	font-size: var(--text-lg);
	line-height: 1.4;
}
.card-name,
.card-name a{
	color:#000;
}
.card-name a:hover,
.card:hover .card-name a{
	color:var(--color-accent);
}

/*mini*/
.card_text_sm .card-name{
	font-size: var(--text-base);
}




/* ===== 文字 */
.card-text{
	font-size: var(--text-sm);
	line-height: 1.6;
}


/* ===== 資訊列 */
.card-info{
    font-size: var(--text-sm); font-weight:600;
}
.card-info,
.card-info a{
	color:#333;
}
.card-info a:hover{
	color: var(--color-accent);
}



/*新聞類別*/
/*.card-info_cate,
.card-info_cate a,
.info_cate,
.info_cate a{
	color:var(--color-one);
	font-weight:600;
}
.card-info_cate .iconsvg,
.info_cate .iconsvg{
	width:20px; height:20px;
}
.card-info_cate .iconsvg:before,
.info_cate .iconsvg:before{
	background-color:var(--color-one);
}
.card-info_cate a:hover,
.info_cate a:hover{
	color:var(--color-accent);
}*/


.info_bmark,
.info_bmark a{
	color:var(--color-one);
	font-weight:600;
}
.info_bmark .iconsvg{
	width:20px; height:20px;
}
.info_bmark .iconsvg:before{
	background-color:var(--color-one);
}
.info_bmark a:hover{
	color:var(--color-accent);
}




/*----------------------------------------------------------------------
	#card_news
-------------------------------- */
.card_news{
	background:#fff;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
    overflow: hidden;
	box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
	transition: var(--transition);
}
.card_news:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgb(10 37 64 / 10%);
}

.card_news .card-photo .item-fitimg:before{
	padding-bottom:70%;
}
.card_news .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_news .card-iframe{
	padding-bottom:70%;
}


.card_news .card-body{
	padding:1rem;
}


.card_news .card-name,
.card_news .card-text{
	/*限行*/
	display:-webkit-box; 
	text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; white-space:normal;
}
.card_news .card-name{ -webkit-line-clamp:2; }
.card_news .card-text{ -webkit-line-clamp:3; }


.card_news .card-infoline{
	margin-bottom:1rem;
}

.card_news .card-btnbar{
	justify-content:flex-start;
	margin-top:1rem;
}
.btn_readmore{
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	color:var(--color-one);
	font-size:var(--text-sm); font-weight:600;
}
.btn_readmore .iconsvg {
	width:16px; height:16px;
	transition: transform 0.3s ease;
}
.btn_readmore .iconsvg:before{
	background-color:var(--color-one);
}
.btn_readmore:hover .iconsvg {
	color:var(--color-accent);
}

.card_news:hover .btn_readmore{
	color:var(--color-accent);
}
.card_news:hover .btn_readmore .iconsvg {
	transform: translateX(5px);
}
.card_news:hover .btn_readmore .iconsvg:before{
	background-color:var(--color-accent);
}


.card_news .card-info_date{
	color:#999;
	justify-content: flex-end;
	margin-top:1rem;
}




.card_news.photo-conatin .card-photo .fitimg{
	-webkit-object-fit: contain;
	   -moz-object-fit: contain;
		    object-fit: contain;
}





/*----------------------------------------------------------------------
	#card_news_shadow
-------------------------------- */
.card_news_shadow a{
	position:relative; z-index:1;
	display:block;
}

.card_news_shadow .card-photo .item-fitimg:before{
	padding-bottom:70%;
}
.card_news_shadow .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_news_shadow .card-name{
	position:absolute; z-index:3; bottom:0; left:0;
	width:100%;
	color:#fff;
	margin:0;
	padding:1rem;
}
.card_news_shadow .card-name:before{
	position:absolute; z-index:-1; bottom:0; left:0; content:"";
	width:100%; height:160px;
	
	background:linear-gradient(top,transparent , rgba(0,0,0,1) );
	background:-moz-linear-gradient(top,transparent , rgba(0,0,0,1) );
	background:-webkit-linear-gradient(top,transparent , rgba(0,0,0,1) );
	background:-o-linear-gradient(top,transparent , rgba(0,0,0,1) );
	background:-ms-linear-gradient(top,transparent , rgba(0,0,0,1) );
}

.card_news_shadow .card-name-text{
	display:block;
	font-size:var(--text-3xl); font-weight:600;
	color:#fff;

	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}





/*----------------------------------------------------------------------
	#card_news_circle
-------------------------------- */
.card_news_circle{
	background:transparent;
}

.card_news_circle .card-photo{
	border-radius:50%; overflow:hidden;
}
.card_news_circle .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_news_circle .card-info_cate{
	margin-bottom:0.25rem;
	transition: transform 0.3s ease;
}
.card_news_circle .card-info_cate a:hover{
	color:var(--color-one);
}
.card_news_circle:hover .card-info_cate {
	transform: translateX(5px);
}

.card_news_circle .card-name{
	/*限行*/
	display:-webkit-box; 
	text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; white-space:normal;
	-webkit-line-clamp:2;
}




/*----------------------------------------------------------------------
	#card_news_sub
-------------------------------- */
.card_news_sub{
	background:#fff;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
    overflow: hidden;
	box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
	transition: var(--transition);
}
.card_news_sub:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgb(10 37 64 / 10%);
}

.card_news_sub .card-photo .item-fitimg:before{
	padding-bottom:70%;
}
.card_news_sub .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_news_sub .card-body{
	padding:1rem;
}

.card_news_sub .card-infoline{
	margin-top:1rem;
}

.card_news_sub .card-info_cate{
	margin-bottom:0.25rem;
	transition: transform 0.3s ease;
}
.card_news_sub .card-info_cate a:hover{
	color:var(--color-one);
}
.card_news_sub:hover .card-info_cate {
	transform: translateX(5px);
}

.card_news_sub .card-name{
	/*限行*/
	display:-webkit-box; 
	text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; white-space:normal;
	-webkit-line-clamp:2;
}




/*----------------------------------------------------------------------
	#views
-------------------------------- */
.heading_view{
}
@media (min-width:992px){
	.heading_view{
		font-size:var(--text-5xl);
	}
}




/*----------------------------------------------------------------------
	#com-findbox
-------------------------------- */
.findbox{
	background:#fff;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
	padding:1rem;
	margin: var(--spacing-xl) 0;
}
@media (min-width:992px){
	.findbox{
		background:#fff;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
		padding:2rem;
	}
}

.findbox-cate{
	margin-top:2rem;
}
.findbox-cate li a{
	position:relative;
	display:block;
	color:var(--color-one);
	font-size:var(--text-sm); font-weight:600;
	padding:0.25rem 0.75rem;
}
.findbox-cate li a:before{
	position:absolute; top:50%; left:5px; content:"";
	width:4px; height:4px;
	border-radius:50%;
	background:var(--color-one);
	transform:translate(0, -50%);
}
.findbox-cate li a:hover{
	background:rgba(var(--color-one-rgb),0.1);
	color:var(--color-accent);
}
.findbox-cate li a:hover:before{
	background:var(--color-accent);
}




/*----------------------------------------------------------------------
	#card_company
-------------------------------- */
/*.card_company .card-photo{
	padding:0 var(--spacing-xs); 
}*/
.card_company .card-photo .item-fitimg:before{
	padding-bottom:70%;
}

.card_company .card-info_tag{
	color:var(--color-one);
	margin-bottom:var(--spacing-sm);
}
.card_company .card-info_tag .iconsvg:before{
	background-color:var(--color-one);
}

.card_company .card-infolist{
	margin-top:var(--spacing-base);
}
.card_company .card-infolist .card-info{
	font-weight:500;
	color:#666;
}
.card_company .card-infolist .card-info .iconsvg{
	width:14px; height:14px;
}
.card_company .card-infolist .card-info .iconsvg:before{
	background-color:#666;
}






/*----------------------------------------------------------------------
	#card_outlink
-------------------------------- */
.card_outlink{
	background:#fff;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
    overflow: hidden;
	box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
	transition: var(--transition);
}
/*.card_outlink a{
	position:relative; z-index:5;
	display:block;
}*/
.card_outlink:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgb(10 37 64 / 10%);
}
	
.card_outlink .card-body{
	padding:1rem;
	padding-bottom:1.5rem;
}	

.card_outlink .card-info_company{
	margin-top:1.5rem;
	color:var(--color-one);
}
.card_outlink .card-info_company .iconsvg:before{
	background-color:var(--color-one);
}

.card_outlink:hover .card-name{
	color:var(--color-accent);
}
	

.card_outlink .btn_outlink{
	position:absolute; bottom:0; right:0;
	width:50px; height:50px;
	border-radius:50% 0 0 0;
}
.card_outlink .btn_outlink:before,
.card_outlink .btn_outlink:after{
	position:absolute; z-index:-1; top:100%; left:100%; content:"";
	background: linear-gradient(-45deg,#405efc 0,#5aa7fe 38%,#73f0ff 100%);
	border-radius:50%;
	transform:translate(-50%, -50%);
	transition: var(--transition);
}
.card_outlink .btn_outlink:before{
	width:110px; height:110px;
	opacity:0.2;
}
.card_outlink .btn_outlink:after{
	width:140px; height:140px;
	opacity:0.2;
}

.card_outlink .btn_outlink .iconsvg{
	width:100%; height:100%;
}
.card_outlink .btn_outlink .iconsvg:before{
	background-color:#fff;
	
	-webkit-mask-size: 50% 50%;
			mask-size: 50% 50%;
}

.card_outlink:hover .btn_outlink .iconsvg{
	animation-name:LefttoRight;
	animation-duration:0.5s;
	animation-iteration-count:infinite;
	animation-timing-function:linear;
}

.card_outlink:hover .btn_outlink:before{
	width:140px; height:140px;
	opacity:1;
}
.card_outlink:hover .btn_outlink:after{
	width:160px; height:160px;
	opacity:0.2;
}



@keyframes LefttoRight {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
	50% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}




/*----------------------------------------------------------------------
	#card_people
-------------------------------- */
.card_people{
	background:#fff;
	border: 1px solid #E2E8F0;
	border-radius: 8px;
    overflow: hidden;
	box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
	transition: var(--transition);
}
.card_people:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgb(10 37 64 / 10%);
}


.card_people .card-photo{
	padding:0 2rem;
}
.card_people .card-photo-inner{
	position:relative;
	max-width:250px;
	margin:0.5rem auto;
}
.card_people .card-photo-inner:before {
    position: absolute; z-index: -1; left: 3%; bottom: 3%; content: "";
    width: 90%; height: 90%;
    background: linear-gradient(-45deg,#405efc 0,#5aa7fe 38%,#73f0ff 100%);
    border-radius: 50%;
    transition: left 0.5s ease-in-out, bottom 0.5s ease-in-out, filter 0.8s ease-in-out;
}
.card_people:hover .card-photo-inner:before{
	left:12%; bottom:12%;
	filter: blur(10px);
}
.card_people .card-photo .item-fitimg{
	background:#fff;
	border-radius:50%;
	overflow:hidden;
	border:1px solid rgba(255,255,255,1);
}


.card_people .btn_outlink{
	position:absolute; bottom:0; left:50%;
	width:70px; height:70px;
	border-radius:50%;
	transform:translate(-50%, 50%);
}
.card_people .btn_outlink:before{
	position:absolute; z-index:-1; top:0 left:0; content:"";
	width:100%; height:100%;
	background: linear-gradient(-45deg,#405efc 0,#5aa7fe 38%,#73f0ff 100%);
	border-radius:50%;
	transition: var(--transition);
	opacity:0.5;
}
.card_people .btn_outlink .iconsvg{
	width:24px; height:24px;
	margin:0.5rem auto 0 auto;
}
.card_people .btn_outlink .iconsvg:before{
	background-color:#fff;
}

.card_people:hover .btn_outlink:before{
	opacity:1;
	transform: scale(1.1);
}


.card_people .card-info_tag{
	color:var(--color-one);
	margin:1rem 0 0 1rem;
}
.card_people .card-info_tag .iconsvg:before{
	background-color:var(--color-one);
}
/*.card_people:hover .card-info_tag{
	color:#fff;
}
.card_people:hover .card-info_tag .iconsvg:before{
	background-color:#fff;
}*/


.card_people .card-body{
	padding:1rem;
	padding-bottom:3.5rem;
	text-align:center;
}	

.card_people:hover .card-name{
	color:var(--color-accent);
}
.card_people .card-slogan{
	color:var(--color-accent);
	font-size:var(--text-lg); font-weight:600;
}

.card_people .card-infoline{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:1rem;
	margin-top:1.5rem
}







/*----------------------------------------------------------------------
	#card_activity
-------------------------------- */
.card_activity .card-photo .item-fitimg:before{
	padding-bottom:70%;
}
.card_activity .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_activity .card-info_status{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:4px;
	
	margin:var(--spacing-sm) 0;
	color:var(--color-one);
}
.card_activity .card-info_status .icon,
.card_activity .card-info_status .text{
	line-height:1;
}


.card_activity .card-text{
	/*限行*/
	display:-webkit-box; 
	text-overflow:ellipsis; overflow:hidden;
	-webkit-box-orient:vertical; white-space:normal;
	-webkit-line-clamp:3;
}


.card_activity .card-infoline{
	display:flex; flex-wrap:wrap;
	align-items:center; justify-content:center;
	gap:1rem;
	margin-top:1.5rem
}
.card_activity .card-info_event{
	display:flex; flex-wrap:wrap;
	align-items:flex-start;
	
	width:100%;
	color:#333;
}
.card_activity .card-info_event .title{
	position:relative;
	width:44px;
}
.card_activity .card-info_event .title:after{
	position:absolute; top:0; right:0; content:"：";
	color:var(--color-one);
}
.card_activity .card-info_event .text{
	flex:1 1 auto;
	width:1%; min-width:0;
}

/*.card_outlink .card-info_company{
	margin-top:1.5rem;
	color:var(--color-one);
}
.card_outlink .card-info_company .iconsvg:before{
	background-color:var(--color-one);
}*/








/*----------------------------------------------------------------------
	#card_promotion
-------------------------------- */
.card_promotion .card-photo .item-fitimg:before{
	padding-bottom:70%;
}
.card_promotion .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_promotion .card-photo{
	overflow:hidden;
	border-radius: 8px;
	margin-bottom:0.5rem;
	box-shadow: 0 4px 6px rgb(0 0 0 / 5%);
	transition: var(--transition);
}
.card_promotion .card-photo .item-fitimg{
	transition: var(--transition);
}
.card_promotion:hover .card-photo{
    /*transform: translateY(-5px);*/
    box-shadow: 0 12px 24px rgb(10 37 64 / 10%);
}

.card_promotion:hover .card-photo .item-fitimg{
	transform-origin:center;
	transform: scale(1.1);
}

.card_promotion .card-infoline{
	display:flex; flex-wrap:wrap;
	align-items:center;
	gap:1rem;
}





/*----------------------------------------------------------------------
	#sidebox
-------------------------------- */
.sidebox{
	margin-bottom:var(--spacing-lg);
}

.heading-sidebox{
	position:relative;
	color:var(--color-one);
	padding-left:0.5rem;
}
@media (min-width:992px){
	.heading-sidebox{
		font-size:var(--text-lg);
	}
}
.heading-sidebox:before{
	position:absolute; top:10%; left:0; content:"";
	width:3px; height:90%;
	background:var(--color-one);
}

.sidebox_inner{
	margin-top:1rem;
}



/*----------------------------------------------------------------------
	#股價
-------------------------------- */
.stockinfo{
	background:#fff;
	border:1px solid rgba(var(--color-one-rgb),0.2);
}


.stock-item{
	display:flex; flex-wrap:wrap;
	align-items:center;
	
	border-bottom:1px solid rgba(var(--color-one-rgb),0.2);
	padding:6px 4px;
}
.stock-item:last-child{ border-bottom-width:0; }

.stock-item:hover{
	background:rgba(var(--color-one-rgb),0.02);
}
.stock-item.headline:hover{
	background:#fff;
}


.stock-item .col{
	flex:1;
}
.stock-item .col-name{ flex:2; }
.stock-item .col-price{ flex:3; }

.stock-item .up{ color:#ff0000; }
.stock-item .down{ color:#008000; }

.stock-item .info-gain{
	display:flex; flex-wrap:wrap;
	align-items:center;
	gap:4px;
	font-size:var(--text-xs);
	margin-top:4px;
}
.stock-item .info-gain .iconsvg{
	width:12px; height:12px;
}

.stock-item .up .iconsvg:before{ background-color:#ff0000; }
.stock-item .down .iconsvg:before{ background-color:#008000; }

@media (min-width:992px){
	.stock-item{
		font-size:var(--text-sm);
	}
}




/*----------------------------------------------------------------------
	#card_figure [相片集]
-------------------------------- */
.card_figure{
	padding:0;
	border-width:0;
	transition:box-shadow 0.5s ease-in-out;
}

.card_figure .card-photo{
	background:#fff;
	border:1px solid #eee;
	border-radius:0;
	padding:0.5rem;
	box-shadow:1px 1px 2px rgb(0,0,0,0.4);
}

.card_figure .card-photo .item-fitimg:before{
	padding-bottom: 75%; /* 4:3 */
}
.card_figure .card-photo .fitimg{
	-webkit-object-fit: cover;
	   -moz-object-fit: cover;
		    object-fit: cover;
}

.card_figure:hover .card-photo{
	background:#fff;
	box-shadow:1px 1px 5px rgb(0,0,0,0.8);
}

.card_figure .card-text{
	color:#666;
	font-size:var(--text-sm);
	text-align:center;
	margin-top:var(--spacing-2xs);
}




/*----------------------------------------------------------------------
	#joinus
-------------------------------- */
.joinus{
	max-width:900px;
	margin:4rem auto 2rem auto;
	transition: transform 0.3s ease;
}
.joinus img{ display:block; max-width:100%; height:auto; }

.joinus:hover{
    transform: translateY(-5px);
}






