@import "animate.css";
body{
	font-family: '微軟正黑體', Arial, "Helvetica Neue", Helvetica, sans-serif;
	}
a{
	color:#026;
	}
a:hover, a:focus, nav a:hover, nav a:focus{
	color:#059;
	text-decoration:none;
	}
.logo{
	float:left;
	max-width:60px;
	}
.logoText{
	float:left;
	}
.logoText h1{
	color:#000;
	font-size:150%;
	}
.logo img{
	width:90%;
	}
nav{
	float:right;
	padding:0;
	}
nav a{
	font-size:110%;
	}
.bannerWrap{
	height:100px;
	padding:30px 0;
	background:url(../images/banner_inside.jpg) 0 0 no-repeat;
	background-size:cover;
	}
.bannerIndexWrap{
	color:#fff;
	text-align:center;
	height:200px;
	padding-top:50px;
	background:url(../images/banner.jpg) center 0 no-repeat;
	}
.bannerIndexWrap div{
	width:40%;
	margin:0 auto;
	}
.bannerIndexWrap p{
	font-size:190%;
	font-family:Arial, Helvetica, sans-serif;
	margin-bottom:0;
	}
h1{
	color:#fff;
	font-size:180%;
	font-weight:bold;
	line-height:1.8em;
	margin-bottom:0;
	}
h2{
	font-size:150%;
	font-weight:bold;
	color:#854;
	margin-bottom:15px;
	}
h2 i{
	margin-right:5px;
	}
main{
	font-size:110%;
	line-height:2rem;
	padding:30px 0;
	}
.indexMain{
	background-color:#def;
	}
.indexContent{
	padding:20px 0;
	}
.indexContent article{
	color:#fff;
	height:320px;
	margin-bottom:30px;
	padding:20px;
	background-color:#348;
	}
.indexContent i{	
	color:#abf;
	font-size:120%;
	margin-right:10px;
	}
.indexContent p{
	color:#abf;
	font-size:150%;
	font-weight:bold;	
	}
.indexContent ul{
	padding-left:20px;	
	}
.researchContent{
	margin-bottom:30px;
	}
.researchContent .row div p{
	padding:5px 5px 5px 20px;
	background-color:#ccc;
	border:1px solid #ccc;
	}
.quantityList, .qualityList{
	margin-bottom:35px;
	}
.surveyContent h3{
	font-size:130%;
	font-weight:bold;
	}
.surveyList img{
	max-width:100%;
	margin-bottom:10px;
	}
.surveyList p{
	line-height:1.5em;
	}
.serviceContent p{
	color:#fff;
	font-size:130%;
	font-weight:bold;
	margin-bottom:8px;
	}
.serviceContent ul{
	padding-left:20px;
	margin-bottom:0;
	}
.serviceContent .row .col-md-4, .serviceContent .row .col-sm-6{
	margin-bottom:20px;
	}
.serviceContent .row div div{
	color:#fff;
	height:100%;
	padding:15px;
	}
.serviceContent .row div:nth-child(2n+1) div{
	background-color:#0b9;
	}
.serviceContent .row div:nth-child(2n) div{
	background-color:#266;
	}
.aboutMain p, .titleAbout{
	margin-bottom:30px;
	}
.newsMain dl{
	padding:25px 0;
	margin-bottom:0;
	border-bottom:1px solid #ccc;
	}
.newsMain dt{
	font-size:120%;
	color:#854;
	line-height:1.5em;
	}
.newsMain dd{
	margin-bottom:0;
	}
.newsMain p{
	color:#777;
	font-size:80%;
	font-weight:normal;
	}
footer{
	color:#fff;
	text-align:center;
	padding:15px 0;
	background-color:#000;
	}
footer a{
	color:#fff;
	}
footer a:hover{
	color:#fff;
	}
footer ul{
	width:596px;
	margin:0 auto 10px;
	padding-left:0;
	text-align:center;
	overflow:hidden;
	zoom:1;
	}
footer li{
	float:left;
	margin:0 10px;
	list-style:none;
	}

/* ====================================================================================================================
 * Mobile Start
 * ====================================================================================================================*/
.drawer-navbar-header{
	padding-top:10px;
	padding-bottom:10px;
	overflow:hidden;
	zoom:1;
	}
.drawer-menu{
	list-style:none;
	margin-bottom:0;
	padding-left:0;
	}
.drawer-menu-item{
	display: block;
	padding:0 .75rem;
	line-height:3.2rem;
	}  
.drawer-open {
  overflow: hidden !important;
}

/**手機版sidemenu**/
.drawer-nav{
  position: fixed;
  z-index:1;
  top: 0;
  overflow: hidden;
  width: 16.25rem;
  height:3.2rem;
  }


/*!------------------------------------*\
    Right
\*!------------------------------------*/

.drawer--right .drawer-nav {
  right: -16.25rem;
  -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--right .drawer-hamburger,
.drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
  right:10px;
  }
.drawer--right.drawer-open .drawer-hamburger {
  right: 16.25rem;
  }

/*!------------------------------------*\
    Hamburger
\*!------------------------------------*/
.drawer-hamburger {
  position:absolute;
  z-index:9;
  top: 0;
  display: block;
  box-sizing: content-box;
  width: 2rem;
  padding: 0;
  padding-top: 18px;
  padding-right: .75rem;
  padding-bottom: 30px;
  padding-left: .75rem;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  border: 0;
  outline: 0;
  background-color: transparent;
}
.drawer-hamburger:hover {
  cursor: pointer;
  background-color: transparent;
}
.drawer-hamburger-icon {
  position: relative;
  display: block;
  margin-top: 10px;
}
.drawer-hamburger-icon,
.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  width: 100%;
  height: 2px;
  -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
  background-color: #222;
}

.drawer-hamburger-icon:before,
.drawer-hamburger-icon:after {
  position: absolute;
  top: -10px;
  left: 0;
  content: ' ';
}

.drawer-hamburger-icon:after {
  top: 10px;
}

.drawer-open .drawer-hamburger-icon {
  background-color: transparent;
}

.drawer-open .drawer-hamburger-icon:before,
.drawer-open .drawer-hamburger-icon:after {
  top: 0;
}

.drawer-open .drawer-hamburger-icon:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.drawer-open .drawer-hamburger-icon:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/*!------------------------------------*\
    accessibility
\*!------------------------------------*/
.sr-only{
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  }


/*!------------------------------------*\
    Navbar
\*!------------------------------------*/

.drawer-navbar{
  z-index:1;
  top: 0;
  width: 100%;
}


@media (min-width: 64em) {
	.drawer-navbar .drawer-menu li{
		float:left;
		}
	.drawer-navbar .drawer-hamburger{
		display:none;
		}
	.drawer-navbar .drawer-nav{
		position:relative;
		left:0;
		overflow:visible;
		width:auto;
		padding-top:0;
		-webkit-transform:translate3d(0, 0, 0);
				transform:translate3d(0, 0, 0);
				}
	}
/* ====================================================================================================================
 * Mobile Start
 * ====================================================================================================================*/
@media screen and (max-width: 1366px) {
	.bannerIndexWrap div{
		width:60%;
		}
	}
@media screen and (max-width: 1280px) {

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

	}
@media screen and (max-width: 960px) {
	.drawer-nav{
		height:100%;
		}
	.drawer-menu{
		padding-top:80px;
		}
	.drawer-open .drawer-hamburger-icon::before, .drawer-open .drawer-hamburger-icon::after{
		background-color:#fff;
		}
	.drawer--right.drawer-open .drawer-nav{
		right:0;
		}
	.drawer-menu{
		position:inherit;
		}
	.drawer-menu li{
		border-bottom:1px solid #45c;
		}
	nav{
		background:#333;
		}
	nav a, nav a:focus{
		color:#fff;
		}
	nav li a:hover{
		color:#fff;
		background-color:#777;
		}
	.drawer-menu{
		width:100%;
		}
	.drawer-menu li{
		border-bottom:1px solid #fff;
		}
	header .container{
		max-width:100%;
		}
	.indexContent p{
		font-size:130%;
		}
	.indexContent article{
		height:435px;
		}
	.serviceMain .col-md-4{
		flex:0 0 50%;
		max-width:50%;
		}
	.serviceContent .row div:nth-child(2n) div{
		background-color:#0b9;
		}
	.researchContent .row div{
		margin-bottom:5px;
		}
	.quantityList .row div p{
		
		height:100%;
		}
	.researchContent .row div p{
		padding:5px;
		}
	.titleAbout img{
		max-width:100%;
		}
	}
@media screen and (max-width: 900px) {
	.bannerIndexWrap div{
		width:80%;
		}
	}
@media screen and (max-width: 812px) {

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

	}
@media screen and (max-width: 766px) {
	.bannerIndexWrap div{
		width:95%;
		}
	.indexContent article{
		height:375px;
		}
	}
@media screen and (max-width: 667px) {
	.bannerWrap{
		height:80px;
		}
	h1{
		font-size:160%;
		}
	}
@media screen and (max-width: 568px) {
	main{
		padding:30px 20px;
		}
	.indexContent article{
		height:auto;
		}
	.serviceMain .col-md-4{
		flex:0 0 100%;
		max-width:100%;
		}
	.quantityList .row div p{
		height:auto;
		}
	footer ul{
		width:auto;
		}
	footer li{
		float:none;
		}
	}
@media screen and (max-width: 414px) {	
	.logo{
		max-width:50px;
		}
	.logoText h1{
		font-size:110%;
		}
	.surveyList div{
		margin-bottom:25px;
		}
	.researchContent .row div p{
		margin-bottom:0;
		}
	.quantityList .row div p{
		height:100%;
		}
	}
@media screen and (max-width: 375px) {
	.logoText h1{
		font-size:100%;
		}
	.bannerIndexWrap{
		padding-top:40px;
		height:160px;
		}
	.bannerIndexWrap p{
		line-height:1em;
		}	
	}
@media screen and (max-width: 360px) {
	}