html{
	scroll-behavior: smooth;
}
body{
	width: 100%;
	margin: 0;
	position: relative;
	overflow-x: hidden;
	font-family: 'Noto Sans TC' , 'Open Sans', Arial, 'sans-serif';
/*	height: 600vh;*/
}
a:link,a:-webkit-any-link {
	color: rgb(230, 95, 45, 1.0);
}
#header div ,#content ,#footer ,#content{
	border: rgba(0, 0, 0, 0.0) 1px solid;

}
#header ,#content ,#end{
	background-color: rgb(9, 31, 91, 1.0);
}
#about{
	background-color: rgb(230, 95, 45, 1.0);
	padding: 5%;
	font-size: 25px;
	color: white;
}
#footer ,.Hinfo ,.Hinfocent ,.contlist li{
	background-color: rgb(208, 206, 207, 1.0);
}
#header{
	height: 100vh;
}
.Htitle{

	overflow: hidden;
	padding: 0 5%;
/*	vertical-align: ;*/
}
.Htitle H1{
	color: white;
}
.Hinfo{
	padding: 0 5%;
}
.Hinfocent div{
/*	margin: 5% auto;*/
}
#content div{
/*	background-color: white;*/
/*	padding: 5%;*/
}
.Hlogo{
/*	width: 80%;*/
/*	margin: 0 10%;*/
	padding: 25vh 0;
	background-image: url("photo/logo3.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
/*	align-content: center;*/


}
.line{
	display: inline-block;
}
.LINElogo{
	position: absolute;
	margin: 0 20px;
	top: 22%;
	width: 8vh;
	height: 8vh;
/*	padding: 5vh 0;*/
	background-image: url("photo/LINE.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	filter: grayscale(100%);
}
.Cphoto{
	width: 90%;
	margin: 5% 5%;
	padding-bottom: 50%;
}
.Cphoto div{
	position: absolute;
	width: 90%;
	padding-bottom: 50%;
}
.Cbutton{
/*	padding-bottom: 20%;*/
}
#content div{
	background-repeat: no-repeat;
	background-size: cover;
 	background-position: center;
}
#content div:hover{
/*	box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.4), 0 6px 20px 0 rgba(255, 255, 255, 0.4);*/
    color: #000;
}
.CbuttonF{
	font-size: 35px;
	text-align: center;
    color: #fff;
    font-weight: bold;
}
.CbuttonF:hover{
	background-color: rgb(51,51,51,0.2);
    backdrop-filter: saturate(100%) blur(5px);
    -webkit-backdrop-filter: saturate(100%) blur(5px);
}
.Cbutton ,.CbuttonM{
	width: 26.3%;
}
.Cbutton ,.CbuttonM{
	margin: 0 0 5% 5%;
	display: inline-block;
	vertical-align: text-top;
}

.contlist {
	margin: 5% 5%;
	list-style: none;
	padding-inline-start: 0px;
}
.contlist p{
	color: #fff;
    margin-block-start: 0.6em;
    margin-block-end: 0.6em;
    font-size: 40px;
}
.contlist ul{
	padding: none;
}
.contlist li{
	font-size: 35px;
	border-radius: 15px;
	width: 35%;
/*	height: 200px;*/
	padding: 5%;
	margin: 2%;
	display: inline-block;
	vertical-align: text-top;
}
#content{
	position: relative;
}
 .contmore{
	display: none;
	position: fixed;
	width: 80vw;
	height: 70vh;
	background-color: rgb(208, 206, 207, 1.0);
	border: rgb(230, 95, 45, 1.0) 3px solid;
	border-radius: 20px;
	bottom: 5%;
	left: 5%;
	padding: 2vw 5vw;
    z-index: 40;
}
.contmoretext{
	overflow: scroll;
}
.contbutton{
	border: rgb(230, 95, 45, 1.0) 3px solid;
	border-radius: 20px;
	padding: 15px;
	font-size: 20px;
	position: fixed;
	top: 9vh;
	right: 4.5vw;
    z-index: 50;

}
.contmore a,
.contmore div{
	margin-bottom: 2.5vh;
	display: inline-block;
}
.contmore a{
	font-size: 40px;
}
.contmore div{
	width: 80vw;
	height: 70vh;
}
.blur-bg {
    display: none; 
/*    visibility: hidden;*/
/*    opacity: 0;*/
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    /* width: 0; */
    background-color: rgb(255,255,255,0.5);
    backdrop-filter: saturate(100%) blur(20px);
    -webkit-backdrop-filter: saturate(100%) blur(20px);
    transition: 0.3s;
}
#footer {
	padding: 5% 0;
}
.footerL{
	width: 14%;
	margin-left: 5%;
	display: inline-flex;
	align-items: flex-start;
}
.footerR{
	position: relative;
	width: 70%;
	margin: 0 5%;
	display: inline-flex;
	align-items: flex-start;
}
#end{
    text-align: center;
}
#end a{
	color: white;
    text-decoration: none;
    display: inline-block;
    padding: 2% 0;
}
@media screen and (min-width: 1100px) {

.CbuttonF{
	line-height: 300px;
}

}
@media screen and (max-width: 1100px) {

.CbuttonF{
	line-height: 210px;
}
.contbutton{
	top: 13vh;
	right: 4vw;
}

}
@media screen and (max-width: 650px) {
	h1 {
		font-size: 1.2em;
	}
	h2 {
		font-size: 1.0em;
	}
	h3 ,#end{
		font-size: 0.8em;
	}
	h2 ,h3 div{
		white-space: pre;
	}
	#about{
		font-size: 20px;
	}
	.footerL ,.footerR {
		display: block;
	}
	.Cbutton ,.CbuttonM{
		margin: 0 0 5% 4.2%;
		display: block;
	}
	.Cbutton{
		width: 42.5%;
		display: inline-block;
	}
	.CbuttonF{
		line-height: 150px;
		overflow: hidden;
	}
	.CbuttonM{
		width: 90%;
	}
	.Cphoto{
		width: 91.6%;
		margin: 5% 4.2%;
	}
	#header{
		height: auto;
	}
	.Hinfo{
		padding: 5% 5%;
	}
	.Hlogo{
		padding: 15vh 0;
	}
	.LINElogo{
		margin: 0 20px;
		top: 15%;
		width: 5vh;
		height: 5vh;
	}
	.Hinfocent h1{
		font-size: 1.0em;
	}
	.contlist p{
	    margin-block-start: 0.3em;
	    margin-block-end: 0.3em;
	    font-size: 30px;
	}
	.contlist li{
		font-size: 20px;
	}
	#content .contmore{
		width: 80vw;
		height: 45vh;
	}
	.contbutton{
		top: 39vh;
		padding: 10px;
		font-size: 20px;
	}
	.contmore a{
		font-size: 35px;
	}
	.contmore div{
		height: 45vh;
		display: inline-block;
		margin-bottom: 0.5vh;
	}
}