@charset "utf-8";

/*
=========================================
	Base Layout
=========================================
*/
/*ALL and Smart Phone*/
*{
	box-sizing: border-box;
}

html,body{
	height: 100%;
}

body{
	width: 100%;
	background: #2a449a;
	font-family:"Noto Sans TC",sans-serif,-apple-system,BlinkMacSystemFont,"Microsoft JhengHei UI","Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
	margin: 0 auto;
	padding: 0;
}

a:hover img{
	opacity: 0.7;
}

/*
=========================================
	Modules（Block）
=========================================
*/

/*header
--------------------*/
header{
	margin: 0 auto;
	padding-top: 40px;
	background: url(../infImg/tsima_TopBg_Right.png) no-repeat top;
	background-size: cover;	
}

header img{
	max-width: 100%;
}

.hero_title {
	min-height: 320px;
	padding-bottom: 130px;
	background: url(../infImg/tsima_TopBg_Graphic_Mobile.png) no-repeat;
	background-size: 95%;
	background-position: right bottom;
}

.hero_title h2{
	display: inline-block;
	padding-top: 16px;
    font-weight: 700;
	color: #ffffff;
	text-shadow: 2px 2px 3px rgb(42, 68, 154, 1);
}

/*main
--------------------*/

/*Subtitle*/
.main_subtitle {
	padding-top: 30px;
	padding-bottom: 20px;
	text-align: center;
	font-style: italic;
	background: url(../infImg/tsima_TopBg_Blueline.png) no-repeat;
	background-position: 50% 50%;
	background-size: 90% 40%;
}

.main_subtitle h2{
    font-weight: 700;
    letter-spacing: 3px;
	text-shadow: 2px 2px 3px rgb(42, 68, 154, 1);
	padding-top: 8px;
}

.main_subtitle h4{
    font-weight: 700;
    letter-spacing: 3px;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
}

.main_subtitle h2, h4{
	color: #ffd900;
	margin-bottom: 0.1rem;
}

.main_subtitle p{
	color: #ffffff;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.3);
	font-size: 13px;
}

/*members*/
.main_members{
	background: #bbd4ef;
	padding-top: 48px;
	padding-bottom: 48px;
}

.main_members .btn-link{
	display: inline-block;
	width: 50%;
}

/* 給所有 btn-link focus 的效果 */
.btn-link:hover{
    outline: 3px solid #2a449a; 
    outline-offset: 2px;    
    border-radius: 6px;  
}

.main_members img{
	width: 100%;
}

/* Tooltip 自訂樣式 */


/*members互動視窗*/
.modal-body .row{
	margin-bottom: 1rem;
}

/*圖片輪播*/
.slick-slider img {
	width: 100%;
	height: auto;
	transition: all 0.3s ease;
	opacity: 0.5; /* 預設暗化 */
}

/* 中間亮的三張 */
.slick-slider .slick-active img {
opacity: 1; /* 中間亮 */
}
.slick-initialized .slick-slide{
	padding: 4px;
}

/*footer
--------------------*/
footer{
	background: #2a449a;
	color: #bbd4ef;
	padding: 2rem 0;
	font-size: 12px;
}

@media only screen and (min-width: 481px)  {
	/*header*/
	header .container-fluid{
		padding-left: 10%;
	}
	header img {
		max-width: 70%;
	}
	.hero_title {
		padding-bottom: 220px;
	}
	/*Subtitle*/
	.main_subtitle p{
		font-size: 1rem;
	}

	/*members*/
	.main_members .btn-link{
		width: 33.333%;
	}
	

}

@media only screen and (min-width: 768px)  {
	/*header*/
	header .container-fluid{
		padding-left: 7%;
	}
	header img {
		max-width: 700px;
	}
	.hero_title {
		background: url(../infImg/tsima_TopBg_Graphic_Desktop.png) no-repeat;
		background-size: 68%;
		background-position: 100% bottom;
		padding-bottom: 280px;
	}
	/*Subtitle*/
	.main_subtitle{
		padding-top: 40px;
		padding-bottom: 36px;
	}

	/*members*/
	.main_members .btn-link{
		width: 20%;
	}

}