@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
	border: 0px #000 solid;
	box-sizing: border-box;
	position: relative;
}
html,body{
	/*background: #fff;*/
	font-family: 'Noto Sans TC', sans-serif, 微軟正黑體 ;
	/*overflow-x: hidden;*/
	
}
iframe{
	width: 100%;
	height: 250px;
}
p,.article-listbox-li{
	line-height: 1.8em;
	font-size: 14px;
	font-weight: 500;
}
.download,.up,.nav_phone{
	width: 50px;
	height: 50px;
	background: #db0011;
	z-index: 100;
	border-radius: 100%;
	right: 5px;
}
.download{position: fixed;bottom: 120px;display: none;}
.download img{width: 90%;top:1px;left:3px;}
.up{position: fixed;bottom: 60px;display: none;}
.up img{width: 90%;top:1px;left:2px;}

.title{
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.2em;
	font-size: 1.5em;
	padding: 0.6em 0;
}
.btn-outline-r{
	background: #fff;
	color: #db0011;
	border: 1px #db0011 solid;
	border-radius: 2em;
	padding: 0.5em 3.5em;
	font-size: 1.2em;
	font-weight: 600;
}
.btn-outline-r:hover{
	background: #db0011;
	color: #fff;
}

/* logo和FB和line */
.bar {
 	height: 50px;
 	background: #fff;
	padding: 10px 5px;
	z-index: 10;
}
.bar .bar-logo{
	height: 19px;
}
.social{
	position: absolute;
	right: 5px;
	top:35px;
	z-index: 100;
	display: none;
}
.bar-social{
	height: 30px;	
}
/* 開門大圖 */
header{
	height: 250px;
	background-image: url("../images/open2_phone.jpg");
	background-repeat: no-repeat;
	background-position: left;
	background-size: cover;
	color: #fff;
	font-weight: 400;
	z-index: 1;
	top:0px;
	margin-bottom: 50px;
}
header .headertitle{
	width: 50vw;
	position: absolute;
	top: 20px;
	right: 20px;
}
header p{
	margin-top:1em;
	font-size:14px;
	text-shadow:0px 0px 5px rgba(0,0,0,1);
}
/* 選單列 */
.article-listbox_phone{
	position: absolute;
	top: 200px;
	width: 30px;
	height: auto;
	background: #db0011;
	border-radius: 30px;
	right: 15px;
	text-align: center;
	font-weight: 400;
	font-size: 1em;
	line-height: 1em;
	color: #fff;
	padding:10px 0;
	z-index: 100;
	cursor: pointer;
}
.navbar{
	top:-15px;
	background: rgba(255,255,255,0);
}

nav .button{
	border-radius: 50px;
	background: #db0011;
}
.navbar-nav{
	position: relative;
	top:-15px;
	background: rgba(255,255,255,0.8);
	z-index: 10;
	width: 100%;
}
.navbar-toggler{
		position: absolute;z-index: 20;right: 5px;top:5px;
	}

.dropdown-menu{
	z-index: 30;
	background: #fff;
}
nav .nav-link{
	border-right:0px #c4c4c4 solid;
	margin: 5px 0px;
	padding: 0px 20px;
	color: #000;
	font-weight: 600;
	font-size: 18px;
}
nav .nav-link:hover{
	color:#db0011;

}
nav .nav-item{
	width: 100%;
	text-align: center;
	border-top:5px rgba(255,255,255,0) solid;
	/*height: 45px;*/
}
nav .nav-item:hover{
	border-top:5px #db0011 solid;
}
nav .active{
	border-top:5px #db0011 solid;
}
nav .active .nav-link{
	color:#db0011;
}

/* 活動清單頁 */
.pointer{
	cursor: pointer;
}
.event-list{
	overflow: hidden;
}
.event-list-img{
	height: 0;
	padding-bottom: 50%;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position:center;
	z-index: 1;
	
}

.big:hover{
	-webkit-transform: scale(1.1);
	-webkit-filter:contrast(1.2);
    transition: 1s;
}
.event-list-info{
	background: rgba(219,0,17,0.7);
	color: #fff;
	height: auto;
	width: calc(100% - .5rem);
	position: absolute;
	bottom: 0px;
	z-index: 2;
	text-align: center;
	padding: 10px 0;
}

.event-list-info p{
	margin: auto 0;
	line-height: 1.5em;
}
.event-list-info .event-date{
	font-size: 0.8em;
	border: 1px #fff solid;
	border-radius: 1em;
	padding: 1px 12px;
	margin-right: 0.5em;
}
.event-list-info .coming{
	height: 1em;
	line-height: 1em;
	z-index: 3;
}

.event-list-info .coming img{
	height: 100%;
}
/* 文章頁 */
.Preface{
	color: #999;
}
.article h4{
	color: #db0011;
	font-size: 1.5em;
	font-weight: 400;
	margin: 0.6em 0 0.5em 0;
}
.article h6{
	font-size: 12px;
	font-weight: 400;
	color: #999;
}
.article-title{
	text-align: center;
	font-weight: 500;
	/*letter-spacing: 0.2em;*/
	font-size: 1.7em;
	line-height: 1.1em;
	padding: 5px 0;
}
.article-title h2{
	font-size: 0.6em;
	font-weight: 400;
}
.hr-article{
	border-bottom: 3px double #db0011;
}
.article-student{
	border-bottom: 1px dashed #ddd;
}
.article-student-info{
	border: 1px solid #999;
	color: #999;
	padding: 5px 20px;
	line-height: 3em;
	display: inline;
	margin: auto 0;
}


.article-student-img{
	width: 180px;
	height: 180px;
	border-radius: 180px;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
	z-index: 1;

}
.img-top-30,.img-top-45,.img-top-0{
	top:0px;
}
.article-student-img img{
	height: 100%;

}
.article-volunteer{

}
.article-volunteer h4{
	background: #ddd;
	color: #666;
	padding: 5px 20px;
	font-size: 1em;
	font-weight: 400;
	margin-bottom: 1.5em;
}
.article-school-imgs div{
	height: 0;
	padding-bottom: 60%;
	border-top: 8px #fff solid;
	border-bottom: 8px #fff solid;
	box-sizing: border-box;
	background-size: cover;
	background-repeat: no-repeat;
	background-position:center;
}

/* 文章頁 選單列*/
.article-listbox{
	/*background: #333;*/
	height: auto;
	position: absolute;
	z-index: 5;
}

.article-listbox-h1{
	background: #db0011;
	color: #fff;
	font-size: 1.4em;
	text-align: center;
	padding: 8px 0;
	letter-spacing: 0.2em;
}
.article-listbox-h2{
	background: #ddd;
	color: #666;
	font-size: 0.8em;
	text-align: center;
	padding: 8px 0;
	margin-bottom: 10px;
	letter-spacing: 0.2em;
}
.article-listbox-li{
	border-bottom: 1px dashed #ddd;
	padding: 8px 5px;
	letter-spacing: 1px;
	cursor: pointer;
}
.article-listbox-li:hover {
	color: #db0011;
}
.article-img-70 img,.article-img-40 img{
	width: 100%;
}

@media (min-width: 400px) {
	header .headertitle{width: 45vw;top: 30px;right: 30px;}
	iframe{height: 300px;}
}

@media (min-width: 576px) { 
	header{height: 350px;}
	header .headertitle{width: 45vw;top: 70px;}
	header p{font-size:18px;}
	.nav_phone{top: 375px;}
	.article-listbox_phone{top: 430px;}
	p,.article-listbox-li{font-size: 0.9em;}
	/* 活動清單頁 */
	.event-list-info .coming{height: 1.5em;}
	iframe{height: 350px;}
}

@media (min-width: 768px) { 
	p,.article-listbox-li{font-size: 14px;}
	.bar {height: 60px;padding: 13px;}
	.logos{right: 80px;}
	.bar .bar-logo{height: 30px;}
	.social{position: absolute;right: 10px;top:12px;display: block;}
	.social .bar-social{height: 35px;}
	header{height: 400px;background-image: url("../images/open2.jpg");background-size: cover;background-position: center;}
	header .headertitle{width: 40vw;top: 80px;right: 5vw;}
	.navbar-nav{background: rgba(255,255,255,1);}
	nav .nav-link{border-right:2px #c4c4c4 solid;}
	nav .nav-item{width: auto;}
	nav .E{display: none;}
	.article-listbox_phone{display: none;}
	/* 活動清單頁 */
	.event-list-img{padding-bottom: 50%;}
	.event-list-info{padding: 15px 0;}
	/* 文章頁 */
	.article-school-imgs div{padding-bottom: 20%;border: 8px #fff solid;}
	.article-img-70 img{width: 70%;}
	.article-img-40 img{width: 40%;}
	.img-top-30{top:-30px;}
	.img-top-45{top:-45px;}
	.img-top-0{top:0px;}
}

@media (min-width: 992px) {	
	p,.article-listbox-li{font-size: 0.9em;}
	header .headertitle{width: 35vw;}
}

@media (min-width: 1200px) { 
	header{height: 450px;}
	header .headertitle{width: 400px;top:80px;right: 9vw;}
	iframe{height: 450px;}
}
@media (min-width: 1400px){
			
}