@import "fontawesome.all.min.css";
@import "animate.css";
@import "hover-min.css";


/*========================================================
                         Basic
=========================================================*/
a:hover, a:focus {
    text-decoration: none;
}
a:link      {color: #3E3E3E; text-decoration: none;}
a:visited   {color: #3E3E3E; text-decoration: none; outline:none;/* ● 去除Firefox會在鏈接周圍產生一個虛線外框 */}
a:active    {color: #3E3E3E; text-decoration: none;}
a:hover     {color: #C23697; text-decoration: none;}




@media (min-width: 575px) {
	.dropdown-toggle::after { display: none;}
}







/*========================================================
                       INDEX 首頁
=========================================================*/

@media (min-width: 576px) {
	body { border-top: #8568C0 5px solid;}
}


@media (min-width: 576px) {
	.top-sect .navbar-brand {
		padding-left: 5px;
		padding-top: 12px;
	}
	.TopMenu {
		margin-top: 9px;
	}
	.top-menu-search {
		margin-top: 13px;
	}
}
@media (min-width: 768px) {
	.top-sect .navbar-brand {
		padding-left: 39px;
	}
}


/*========================================================
                   index_Carousel_bg
=========================================================*/
div.index_Carousel_bg {}

@media (min-width: 576px) {
	div.index_Carousel_bg { background: url(../images/bg_indexBanner.jpg) center no-repeat; height: 236.84px;}
}
@media (min-width: 768px) {
	div.index_Carousel_bg { height: 315.8px;}
}
@media (min-width: 992px) {
	div.index_Carousel_bg { height: 421.5px;}
}
@media (min-width: 1200px) {
	div.index_Carousel_bg { height: 500px;}
}

@media (min-width: 576px) {
	div.carousel img.A { display: block;}
	div.carousel img.B { display: none;}
}
@media (max-width: 575px) {
	div.carousel img.A { display: none;}
	div.carousel img.B { display: block;}
}




/*========================================================
                   index_index_Circle
=========================================================*/
div.index_Circle { background: #F2F0F8; padding: 38px 0 34px 0;}

div.index_Circle a {
	display: block;
	width: 180px;
	margin: 0 auto;
}
div.index_Circle h3 {
	text-align: center;
	color: #4d2ba6;
	margin: 7px 0 0 0;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 500;
}
div.index_Circle h4 {
	text-align: center;
	color: #3a3a3a;
	font-weight: bold;
	margin: 3px 0 15px 0;
}
div.index_Circle h3.A { font-size: 30px;}
div.index_Circle h4.A { font-size: 20px;}

div.index_Circle h3.B { font-size: 25px;}
div.index_Circle h4.B { font-size: 20px;}


@media (min-width: 576px) {
	div.index_Circle a { width: 140px;}
	div.index_Circle a:hover {
		-webkit-animation-name: heartBeat;
		        animation-name: heartBeat;
		-webkit-animation-duration: calc(1s * 1.3);
		        animation-duration: calc(1s * 1.3);
		-webkit-animation-duration: calc(var(--animate-duration) * 1.3);
		        animation-duration: calc(var(--animate-duration) * 1.3);
		-webkit-animation-timing-function: ease-in-out;
		        animation-timing-function: ease-in-out;
	}
	div.index_Circle h3 { margin: 7px 0 0 0;}
	div.index_Circle h4 { margin: 3px 0 0 0;}
	div.index_Circle h3.A { font-size: 20px;}
	div.index_Circle h4.A { font-size: 15px;}

	div.index_Circle h3.B { font-size: 14px;}
	div.index_Circle h4.B { font-size: 15px;}

	div.index_Circle h4.one { margin-top: -3px;}
}

@media (min-width: 768px) {
	div.index_Circle a { width: 150px;}
	div.index_Circle h3.A { font-size: 25px;}
	div.index_Circle h4.A { font-size: 17px;}

	div.index_Circle h3.B { font-size: 19px;}
	div.index_Circle h4.B { font-size: 17px;}
}

@media (min-width: 992px) {
	div.index_Circle a { width: 197px;}
	div.index_Circle h3.A { font-size: 30px;}
	div.index_Circle h4.A { font-size: 20px;}

	div.index_Circle h3.B { font-size: 25px;}
	div.index_Circle h4.B { font-size: 20px;}
}

@media (min-width: 1200px) {
	div.index_Circle h3.A { font-size: 35px;}

	div.index_Circle h3.B { font-size: 30px;}
}






/*========================================================
                   index_NewsA
=========================================================*/
div.index_NewsA { padding-top: 68px; padding-bottom: 40px;}
div.index_NewsA h2 {
	font-size: 40px;
	color: #676768;
	margin-bottom: 30px;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 700;
}
div.index_NewsA h2 span { font-size: 30px; color: #353535; padding-left: 15px;}


div.index_NewsA div.out {
	border-top: 10px #c25e86 solid;
	border-bottom: 2px #d1d0d0 solid;
	border-left: 2px #d1d0d0 solid;
	border-right: 2px #d1d0d0 solid;
	background: #fafafa;
	padding: 13px 13px 11px 13px;
}
@media (min-width: 576px) {
	div.index_NewsA div.out div.title { height: 185px;}
}

div.index_NewsA div.out { margin-bottom: 15px;}
div.index_NewsA div.out div.title { display: block; overflow: hidden;}
div.index_NewsA div.out ul { line-height: 150%;}
div.index_NewsA div.out ul li.date { color: #ec6615; margin-bottom: 2px;}
div.index_NewsA div.out ul li.txt { font-size: 17px; color: #3e3e3e; line-height: 130%;}
div.index_NewsA div.out ul li.local { font-size: 16px; color: #3c6abe; margin-top: 5px;}

div.index_NewsA div.out a.more { width: 100%; display: block; color: #8e8e8e; border-top: 2px #d1d0d0 solid; padding-top: 13px;}
div.index_NewsA div.out a.more:hover { color: #C25E86;}
div.index_NewsA div.out a.more:after {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    background: #fff;
    font-size: 18px;
    color: #b8b7b7;
	right: 29px;
    position: absolute;
}






/*========================================================
                   index_NewsB
=========================================================*/
div.index_NewsB {
	padding-top: 68px; padding-bottom: 40px;
	background: -webkit-linear-gradient(180deg, rgb(236, 235, 237), rgb(192, 184, 201));
	background: linear-gradient(180deg, rgb(236, 235, 237), rgb(192, 184, 201));
}
div.index_NewsB h2 {
	font-size: 40px;
	color: #676768;
	margin-bottom: 30px;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 700;
}
div.index_NewsB h2 span { font-size: 30px; color: #353535; padding-left: 15px;}


div.index_NewsB div.out {
	border-top: 10px #734898 solid;
	border-bottom: 2px #8e8e8e solid;
	border-left: 2px #8e8e8e solid;
	border-right: 2px #8e8e8e solid;
	background: #ffffff;
	padding: 13px 13px 11px 13px;
}
@media (min-width: 576px) {
	div.index_NewsB div.out div.title { height: 185px;}
}

div.index_NewsB div.out { margin-bottom: 15px;}
div.index_NewsB div.out div.title { display: block; overflow: hidden;}
div.index_NewsB div.out ul { line-height: 150%;}
div.index_NewsB div.out ul li.date { color: #ec6615; margin-bottom: 2px;}
div.index_NewsB div.out ul li.txt { font-size: 17px; color: #3e3e3e; line-height: 130%;}

div.index_NewsB div.out a.more { width: 100%; display: block; color: #8e8e8e; border-top: 2px #d1d0d0 solid; padding-top: 13px;}
div.index_NewsB div.out a.more:hover { color: #C25E86;}
div.index_NewsB div.out a.more:after {
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    background: #fff;
    font-size: 18px;
    color: #b8b7b7;
	right: 29px;
    position: absolute;
}






/*========================================================
                   index_sponsor
=========================================================*/
div.sponsor { padding: 40px 0; text-align: center;}
div.sponsor ul { margin: 0;}
div.sponsor ul li img { width: 250px; border: #c0c0c0 1px solid;}

@media (min-width: 576px) {
	div.sponsor ul {
		display: flex;
		justify-content: center;
	}
	div.sponsor ul li { margin-right: 30px;}
	div.sponsor ul li:last-child { margin-right: 0;}
}
@media (max-width: 575px) {
	div.sponsor ul li { margin-bottom: 15px;}
	div.sponsor ul li:last-child { margin-bottom: 0;}
}

div.sponsor.mainIn {
	background: -webkit-linear-gradient(-180deg, rgb(231, 229, 233), rgb(255, 255, 255));
	background: linear-gradient(-180deg, rgb(231, 229, 233), rgb(255, 255, 255));
}






/*========================================================
                        footer
=========================================================*/
footer {
	background: url(../images/bg_footer.jpg) center no-repeat;
	padding: 40px 0;
	color: #fff;
	font-size: 16px;
}
footer h2 {
	margin: 0; padding: 0;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 700;
}

footer ul { margin-top: 20px;}
footer ul li i { width: 25px; text-align: center; margin-right: 5px;}
footer ul li a:link { color: #fff;}
footer ul li a:hover { color: #B172BC;}

@media (min-width: 576px) {
	footer ul {
		display: flex;
		justify-content: center;
		margin: 15px 0 10px 0; padding: 0;
	}
	footer ul li:first-child { margin-right: 20px;}
}
@media (max-width: 575px) {
	footer ul li:first-child { margin-bottom: 7px;}
}






/*========================================================
               seMenu      main_title
=========================================================*/
div.header_title { background: url(../images/Bg_main_title.jpg) center no-repeat;}

div.main_title { background: url(../images/Bg_main_titleA.jpg);}

div.main_title {
	background-repeat: no-repeat;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	text-shadow: rgb(255, 255, 255) 0px 0px 10px;
	color: #ffffff;
	height: 64px;
}
div.main_title h1 { font-weight: bold; font-size: 30px;}

@media (max-width: 575px) {
	div.main_title { height: 100px; background-size: cover; background-position: right; padding-top: 10px;}
}
@media (min-width: 576px) {
	div.main_title { height: 100px; background-position: right; background-size: 130%;}
	div.main_title h1 { font-size: 30px;}
}
@media (min-width: 768px) {
	div.main_title { height: 93px; background-size: contain; padding-left: 75px;}
	div.main_title h1 { font-size: 30px;}
}
@media (min-width: 992px) {
	div.main_title { height: 126px; padding-left: 100px;}
	div.main_title h1 { font-size: 40px;}
}
@media (min-width: 1200px) {
	div.main_title { height: 150px; padding-left: 110px;}
	div.main_title h1 { font-size: 45px;}
}









/*========================================================
                     breadcrumb
=========================================================*/
.breadcrumbOut { background: #e8edf5;}
.breadcrumb {
	background: transparent;
	font-size: 15px;
	margin-bottom: 0;
}
.breadcrumb a { color: #055c67;}










/*========================================================
                       Main
=========================================================*/
.main {
	padding: 23px 0 30px 0;
	background: url(../images/Bg_index_mid.jpg) bottom no-repeat;
}


:root {
    --bg: #fdfdfd;
    --highlight1: #ed4264;
    --highlight2: #ffedbc;
    --color: #1a1e24;
}

div.content h2.title {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #576AB1;
	border-bottom: 3px #C8C8C8 solid;
	line-height: 1.8;
}
div.content h2.title span { display: inline-block; border-bottom: 3px #7559B4 solid; margin-bottom: -3px;}







div.content div.cont {
	color: #3e3a39;
	line-height: 180%;
	padding-top: 10px;
	padding-bottom: 25px;
}
@media (min-width: 768px) {
	div.content div.cont {
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 20px;
	}
}



















/*========================================================
                     share_btn
=========================================================*/
div.share_btn {
	border-top: 2px #7559B4 solid;
	padding-top: 15px;
	text-align: right;
}
@media (min-width: 768px) {
	div.share_btn {
		padding-left: 15px;
		padding-right: 15px;
	}
}
div.share_btn ul {
	display: flex;
	flex-direction: row-reverse;
}
div.share_btn ul li { margin-left: 8px;}