@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css?family=Muli:300');

/*font-family: 'Muli', sans-serif;*/

*{
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}


html,
body {
    height: 100% !important;
    margin: 0;
    padding: 0
}

img{
	max-width: 100%
}

a:hover,
a:focus{
	text-decoration: none;
}

.outsp2-t{ margin-top:2px}.outsp5-t{ margin-top:5px}.outsp8-t{ margin-top:8px}.outsp10-t{ margin-top:10px}
.outsp15-t{ margin-top:15px}.outsp18-t{ margin-top:18px}.outsp20-t{ margin-top:20px}.outsp25-t{ margin-top:25px}
.outsp30-t{ margin-top:30px}.outsp35-t{ margin-top:35px}.outsp40-t{ margin-top:40px}.outsp45-t{ margin-top:45px}
.outsp50-t{ margin-top:50px}.outsp55-t{ margin-top:55px}.outsp60-t{ margin-top:60px}.outsp65-t{ margin-top:65px}
.outsp70-t{ margin-top:70px}.outsp75-t{ margin-top:75px}.outsp80-t{ margin-top:80px}.outsp85-t{ margin-top:85px}
.outsp90-t{ margin-top:90px}.outsp95-t{ margin-top:95px}.outsp100-t{ margin-top:100px}

.outsp2-b{ margin-bottom:2px}.outsp5-b{ margin-bottom:5px}.outsp8-b{ margin-bottom:8px}.outsp10-b{ margin-bottom:10px}
.outsp15-b{ margin-bottom:15px}.outsp18-b{ margin-bottom:18px}.outsp20-b{ margin-bottom:20px}.outsp25-b{ margin-bottom:25px}
.outsp30-b{ margin-bottom:30px}.outsp35-b{ margin-bottom:35px}.outsp40-b{ margin-bottom:40px}.outsp45-b{ margin-bottom:45px}
.outsp50-b{ margin-bottom:50px}.outsp55-b{ margin-bottom:55px}.outsp60-b{ margin-bottom:60px}.outsp65-b{ margin-bottom:65px}
.outsp70-b{ margin-bottom:70px}.outsp75-b{ margin-bottom:75px}.outsp80-b{ margin-bottom:80px}.outsp85-b{ margin-bottom:85px}
.outsp90-b{ margin-bottom:90px}.outsp95-b{ margin-bottom:95px}.outsp100-b{ margin-bottom:100px}

.padding2-t{ padding-top:2px}.padding5-t{ padding-top:5px}.padding8-t{ padding-top:8px}.padding10-t{ padding-top:10px}
.padding15-t{ padding-top:15px}.padding18-t{ padding-top:18px}.padding20-t{ padding-top:20px}.padding25-t{ padding-top:25px}
.padding30-t{ padding-top:30px}.padding35-t{ padding-top:35px}.padding40-t{ padding-top:40px}.padding45-t{ padding-top:45px}
.padding50-t{ padding-top:50px}.padding55-t{ padding-top:55px}.padding60-t{ padding-top:60px}.padding65-t{ padding-top:65px}
.padding70-t{ padding-top:70px}.padding75-t{ padding-top:75px}.padding80-t{ padding-top:80px}.padding85-t{ padding-top:85px}
.padding90-t{ padding-top:90px}.padding95-t{ padding-top:95px}.padding100-t{ padding-top:100px}

/*==垂直置中==*/
.sub-item{
	display: flex;
	flex-direction:column;
	align-items: center; 
	justify-content: center; 

	display: -webkit-flex; 
	-webkit-flex-direction:column;
	-webkit-align-items: center; 
	-webkit-justify-content: center; 

	display: -moz-flex;
	-moz-flex-direction:column;
	-moz-align-items: center; 
	-moz-justify-content: center; 

	display: -ms-flex;
	-ms-flex-direction:column;
	-ms-align-items: center; 
	-ms-justify-content: center; 

	display: -o-flex;
	-o-flex-direction:column;
	-o-align-items: center; 
	-o-justify-content: center; 

}


/*====等高====*/
.cover-row-euqal-height {
	display: table; /*先預設為表格模式*/
	table-layout: fixed; /*列宽由表格宽度和列宽度设定。*/
	height: 100%;
	width: 100%;
}

.cover-col-euqal-height {
	display: table-cell; /*轉為表格欄位*/
	float: none; /*取消浮動*/
	height: 100%;
	vertical-align: middle; /*垂直置底*/
	padding-left: 0;
	padding-right: 0;
}

/* Overline From Center */
.nav_link>li>a{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  backface-visibility:hidden; /*隱藏*/
 -webkit-backface-visibility:hidden;  /* Chrome 和 Safari */
 -moz-backface-visibility:hidden;   /* Firefox */
 -ms-backface-visibility:hidden;  /* Internet Explorer */

  -moz-osx-font-smoothing: grayscale;  
}

.nav_link>li>a:before{
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 40px;
  background-color: #a5191f; 
  height: 4px;

  transition: left, right, 0.3s ease-out;
  -webkit-transition: left, right, 0.3s ease-out;
  -moz-transition: left, right, 0.3s ease-out;
  -ms-transition: left, right, 0.3s ease-out;
  -o-transition: left, right, 0.3s ease-out;
}

.nav_link>li>a.active:before,
.nav_link>li>a:hover:before,
.navbar-center.nav_link>li.active>a:before{
    left: 35%;
    right: 35%;
}


/*======Placeholder======*/

/* WebKit browsers */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { 
    color: #555555;
}

/* Firefox browsers */
input input::-555555moz-placeholder,
textarea::-moz-input-placeholder { 
    color: #555555
}

/* IE */
input input::-ms-input-placeholder,
textarea::-ms-input-placeholder { 
    color: #555555
}

/* Opera */
input input::-o-input-placeholder,
textarea::-o-input-placeholder { 
    color: #555555
}

/*Scroll樣式*/
.select_style { 
	position: relative;
	width: 100%; 
	height:55px; 
	margin-bottom: 8px;
	background-color: #333333; 
	overflow:hidden; 
	z-index: 1
}

.select_style::after{
	content: url(../images/arrow.png);
	display: inline-block;
	position: absolute;
	top:50%;
	right: 10px;
	transform: translateY(-50%);
	z-index: 2
}

.select_style select { 
	display: block; 
	padding:5px; 
	background:transparent; 
	width: 100%; 
	font-size: 16px; 
	border:none; 
	height:55px; 
	appearance: none; /*for Webkit browsers*/
	-webkit-appearance: none; /*for Webkit browsers*/
	-moz-appearance: none; /*for Webkit browsers*/
	-ms-appearance: none; /*for Webkit browsers*/
	-o-appearance: none; /*for Webkit browsers*/
}