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

body{
/*			font-family: "微軟正黑體", Arial;*/
	font-family: "微軟正黑體", serif;
			line-height: 30px;
			background-color: #E1FFFE;
			font-size: 2.0vh;
			line-height: 3vh;
			color: #464646;
			padding-top: -20px;
			/*background-image: url(images/bg2.jpg);
			background-repeat: no-repeat;
			background-position: 50% 0%;
			background-size: cover;*/
			
		}
		h1{
			font-size: 21px;
			font-weight: bold;
			color:#ffe123;
		}
		h2{
			font-size: 21px;
			font-weight: bold;
			color:#cf3e37;
		}
		.bg{
			background-image: url(images/bg.jpg);
			background-repeat: no-repeat;
			background-position: 50% 0%;
			background-size: cover;
			margin-top: -20px;
			border-style: solid;
			border-width: 0px 0px 15px 0px;
			border-color: #223e57;

		}
		.bg1{
			background-image: url(images/bg1.jpg);
			background-repeat: no-repeat;
			background-position: 50% 0%;
			background-size: cover;
			margin-top: -20px;
			border-style: solid;
			border-width: 0px 0px 15px 0px;
			border-color: #223e57;

		}

		.bg2{
			background-image: url(images/bg2.jpg);
			background-repeat: no-repeat;
			background-position: 50% 0%;
			background-size: cover;
			margin-top: -20px;
			border-style: solid;
			border-width: 0px 0px 15px 0px;
			border-color: #223e57;

		}

		.bg3{
			background-image: url(images/bg3.jpg);
			background-repeat: no-repeat;
			background-position: 50% 0%;
			background-size: cover;
			margin-top: -20px;
			border-style: solid;
			border-width: 0px 0px 15px 0px;
			border-color: #223e57;

		}
		.bg4{
			background-image: url(images/bg4.jpg);
			background-repeat: no-repeat;
			background-position: 50% 0%;
			background-size: cover;
			margin-top: -20px;
			border-style: solid;
			border-width: 0px 0px 15px 0px;
			border-color: #223e57;

		}

		.content{
			background-color: #FFF;
			min-height: 300px;
			padding-bottom: 30px;
			border-radius: 0px;
			background-image: url(images/content_bg.jpg);
			background-size: cover;
			background-position: auto auto;
			background-repeat: repeat;
			background-attachment: fixed;
		}
		.content .col-sm-3{
			margin-top: 20px;
		}
		.content .col-sm-9{
			margin-top: 20px;
		}
		.content .col-sm-3 img{
			border-radius: 10px;
		}
		.content .col-sm-9 img{
			border-radius: 10px;
		}
		.content .col-md-6 img{
			border-radius: 10px;
			margin-bottom: 15px;
			width: 100%;
		}

		.content .col-md-6 img{
			border-radius: 10px;
			margin-top: 15px;
		}
		.content .col-sm-5 img{
			border-radius: 10px;
			margin-bottom: 20px;
		}

.ww{
    margin-top: 3%;
    background-image: url(images/bt01.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    height: 502px;
}

.ww2{
    margin-top: 3%;
    background-image: url(images/bt02.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    height: 502px;
}

.ww3{
    background-color: #FFF;
    margin-top: 3%;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
    padding: 0% 5% 0% 5%;
    border-radius: 20px;
    border: 5px solid #223e57;
}

		.title{
			font-family: "微軟正黑體", Arial;
			color:#FFF;
			padding-left:5px;
			font-size: 4vh;
			font-weight: bold;
		}
		.title_b{
    /*			font-family: "微軟正黑體", Arial;*/
    color: #000;
    padding-left: 5px;
    font-size: 4vh;
    font-weight: bold;
    text-align: center;
		}
		
		.pink{
			color:#ea186d;
			font-size: 19px;
			font-weight: bold;
		}

		.blue{
			color:#FFF;
			font-size: 20px;
			font-weight: bold;
			background-color: #629995;
			padding: 5px;
		}

		.pinkbg{
			color:#ea186d;
			font-size: 21px;
			background-color: #ffdfe9;
			padding: 5px;
		}
		.navbar-default{
			background-color:#223e57;
			color: #525252; 
			border-color: #223e57;
			border-width: 0px;
			border-radius: 0px;
		}
		.navbar-default .navbar-nav>li>a{
			color: #FFF;
			font-size: 17px;
		}
		.navbar-default .navbar-nav>li{
			/*margin-right: -15px;*/
		}
		.navbar-default .navbar-header>a{
			color: #c1d1ee;
			font-size: 19px;
		}
		.navbar-default .navbar-nav>li>a:hover{
			background-color: #34649C;
			color: #FFF;
		}
		
		.navbar-default .navbar-toggle{
			border-color: #240300;
		}
		.navbar-default .navbar-toggle .icon-bar{
			background-color: #FFF;
			border-color: #240300;
		}
		.navbar-default .navbar-toggle:hover{
			background-color: #000;

		}


.bt001 img{
filter: grayscale(50%);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease ,;

}

.bt001 img:hover{
    filter: grayscale(0%);
    transform: translate(0px,-10px);
}
		.copyright{
			font-size: 15px;
			text-align: center;
			color: #5d5d5d;
			padding:10px;
		}
		
		.topimg{
			margin-top: 30px;
		}
		.page-header{
			border-bottom-width: 1px;
			border-bottom-style: solid;
			border-bottom-color: #000;
			color: #000;
			font-size: 3vh;
		}
		
		.menu{
			margin-bottom: 20px;
		}
		.mt20{
			margin-top: 20px;
		}
		.carousel-inner .item img{
			width: 100%;
		}
		.col-md-4{
			margin-bottom: 5%;
			/*margin-top: 20px;
			border-top-width: 1px;
			border-top-style: solid;
			border-top-color: #555;
			padding-top: 30px;*/


		}
		.col-md-4 img{
    margin-bottom: 2%;
    border-width: 3px;
    border-style: solid;
    border-color: #8291B1;
    border-radius: 10px;
		}
		.col-md-3 p{
			font-weight: bolder;
		}
		.col-md-3 img{
			border-radius: 10px;
			margin-bottom: 10px;
			margin-top: 20px;
			width: 100%;
		}
		.dir{
			font-size: 2.3vh;
			color: #1A3557;
			font-weight: 900;
		}
		.p0{
			padding: 0px;
		}

.note{
    font-size: 15px;
    line-height: 26px;
    color: #000;
    background-color: hsla(0,0%,100%,0.50);
    padding: 3%;
    border-radius: 20px;
}

bootstrap 五格語法 
.col-xs-1-5,
.col-sm-1-5,
.col-md-1-5,
.col-lg-1-5 {
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}

.col-xs-1-5 {
	width: 20%;
	float: left;
}

.pc-banner{
    display:block;
}

.mobile-banner{
    display:none;
}

@media (min-width: 767px) {
	.col-sm-1-5 {
		width: 20%;
		float: left;
	}
    .pc-banner{
        display:none;
    }

    .mobile-banner{
        display:block;
    }     
}
@media (min-width: 992px) {
	.col-md-1-5 {
		width: 20%;
		float: left;
	}
}
@media (min-width: 1200px) {
	.col-lg-1-5 {
		width: 20%;
		float: left;
	}
}

.col-md-1-5 p{
	margin-left: auto;
	margin-right: auto;
	font-size: 1.2em;
	text-align: center;
}