@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
@font-face {
    font-family: 'helvetica';
    src: url("../fonts/HelveticaNowDisplay-Regular.ttf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'helvetica';
    src: url("../fonts/HelveticaNowDisplay-Medium.ttf") format("opentype");
    font-weight: 500;
    font-style: normal;
}

/* ----------RESET---------- */
	#hd *,
	*{
		margin:0;
		padding: 0;
		color:inherit;
		font: inherit;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	#hd{
		position: relative;
		font-size: 17px;
		font-weight: normal;
		font-family: "helvetica", "Roboto", "Arial", sans-serif;
		background-color: #fff;
		color:#333;
		line-height: 1.4;
	}

	#hd ul, #hd li{
		list-style: none;
		font-size: inherit;
	}
	#hd img{
		border:none;
		width: auto;
		height: auto;
		max-width: 100% !important;
		max-height: 100% !important;
	}
	#hd input,
	#hd textarea,
	#hd keygen,
	#hd select,
	#hd a,
	#hd a:active,
	#hd a:hover,
	#hd a:focus{
		outline: none;
	}
	#hd input::-moz-focus-inner,
	#hd button::-moz-focus-inner,
	#hd select::-moz-focus-inner{
		border:0;
		outline:0;
	}
	#hd select:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 #000;
	}
	#hd input[type="search"],
	#hd input[type="search"]:hover,
	#hd input[type="search"]:focus,
	#hd input[type="search"]:active{
		-webkit-appearance:none;
	}
	#hd select::-ms-expand {
		display: none;
	}
	#hd button,
	#hd input[type="submit"],
	#hd input[type="reset"]{
		background: none;
		border:none;
		outline: none;
		cursor:pointer;
		font:inherit;
	}
	#hd table{
		border-collapse:collapse;
	}
/* ----------BLOCK---------- */
	#hd .fleft{float:left; }
	#hd .fright{float: right; }
	#hd .cf:after{
		content:'';
		display: table;
		clear:both;
	}

	#hd .flex-wrap{
		display: flex;
		flex-wrap: wrap;
	}

	#hd .row{
		width: 100%;
		position: relative;
		margin-bottom: 30px;
	}
	#hd .w800,
	#hd .w900,
	#hd .w1000,
	#hd .w1200,
	#hd .w1300,
	#hd .w1400,
	#hd .w1600{
		width: 90%;
		margin:0 auto;
		position: relative;
	}
	#hd .w1700,
	#hd .w1800{
		width: 90%;
		margin:0 auto;
	}
	#hd .w800{ max-width: 800px; }
	#hd .w900{ max-width: 900px; }
	#hd .w1000{ max-width: 1000px; }
	#hd .w1200{ max-width: 1200px; }
	#hd .w1300{ max-width: 1300px; }
	#hd .w1400{ max-width: 1400px; }
	#hd .w1600{ max-width: 1600px; }
	#hd .w1700{ max-width: 1700px; }
	#hd .w1800{ max-width: 1800px; }

	#hd .col90,
	#hd .col80,
	#hd .col75,
	#hd .col70,
	#hd .col66,
	#hd .col60,
	#hd .col50,
	#hd .col45,
	#hd .col40,
	#hd .col33,
	#hd .col30,
	#hd .col25,
	#hd .col20,
	#hd .col15,
	#hd .col05{
		display: inline-block;
		vertical-align: top;
	}
	#hd .col90{ width: 90%; }
	#hd .col80{ width: 80%; }
	#hd .col75{ width: 75%; }
	#hd .col70{ width: 70%; }
	#hd .col66{ width: 66.6666%; }
	#hd .col60{ width: 60%; }
	#hd .col50{ width: 50%; }
	#hd .col50:nth-child(odd){ margin-left: 0px; }
	#hd .col45{ width: 45%; }
	#hd .col40{ width: 40%; }
	#hd .col30{ width: 30%; }
	#hd .col33{ width: 33.3333%; }
	#hd .col25{ width: 25%; }
	#hd .col20{ width: 20%; }
	#hd .col15{ width: 15%; }
	#hd .col05{ width: 05%; }

	#hd .ib-middle{
		display: inline-block;
		vertical-align: middle;
	}
	#hd .ib-top{
		display: inline-block;
		vertical-align: top;
	}

	#hd .main_padding{ padding: 100px 0 }
	#hd .main_padding_b{ padding-bottom: 80px; }
	#hd .header-top{ position: relative; }
	#hd .header-top::before{
		content: "";
		display: block;
		height: 78px;
		position: relative;
	}

/* ----------TEXT----------- */
	#hd h1,
	#hd h2,
	#hd h3,
	#hd h4,
	#hd h5,
	#hd h6,
	#hd a,
	#hd p,
	#hd b,
	#hd small{
		font:inherit;
		color:inherit;
		margin: 0;
	}
	/* 59 */
	#hd h1,#hd .h1{
		font-size: 3.7em;
		line-height: 1.25;
		letter-spacing: 2px;
	}
	/* 48 */
	#hd h2,#hd .h2{
		font-size: 2.8em;
		line-height: 1.25;
		letter-spacing: 2px;
	}
	/* 38 */
	#hd h3,#hd .h3{
		font-size: 2.4em;
		line-height: 1.25;
		letter-spacing: 2px;
	}
	/* 24 */
	#hd h4,#hd .h4{
		font-size: 1.5em;
		line-height: 1.25;
		letter-spacing: 2px;
	}
	/* 22 */
	#hd h5,#hd .h5{
		font-size: 1.1em;
		line-height: 1.25;
	}
	/* 18 */
	#hd h6,#hd .h6{
		font-size: 1.1em;
		line-height: 1.25;
	}
	/* 16 */
	#hd a{
		font-size: 1rem;
		line-height: 1.5;
		display: inline-block;
		text-decoration: none;
	}
	#hd p,#hd .p{
		font-size: 1rem;
		line-height: 1.5;
		letter-spacing: .5px;
	}
	/* 14 */
	#hd small,#hd .small, #hd sup{
		font-size: .88em;
		line-height: 1.5;
	}
	#hd sup{
		font-size: .5em;
	}
	#hd b, #hd strong{
		letter-spacing: 0;
		font-weight: bolder;
	}
	#hd .txt-up{
		text-transform: uppercase;
	}

	#hd .txt-main	  { color: #D7B992; }
	#hd .txt-darkmain { color: #B28733; }
	/* #hd .txt-green 	  { color: #A5A529; } */
	#hd .txt-grey	  { color: #999999; }
	#hd .txt-darkgrey { color: #333333; }
	#hd .txt-black    { color: #000000; }
	#hd .txt-white	  { color: #ffffff; }
	#hd .txt-silver   {
		display: inline-block;
		padding-bottom: 5px;
		color: #ffffff;
		background: #ffffff;
		background: -webkit-linear-gradient(left, #ffffff 0% , #777777 30% , #ffffff 60% , #777777 90%);
		background:	   -moz-linear-gradient(left, #ffffff 0% , #777777 30% , #ffffff 60% , #777777 90%);
		background: 	 -o-linear-gradient(left, #ffffff 0% , #777777 30% , #ffffff 60% , #777777 90%);
		background:			linear-gradient(to right, #ffffff 0% , #777777 30% , #ffffff 60% , #777777 90%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	#hd .txt-gold     {
		display: inline-block;
		padding-bottom: 5px;
		color: #DBC9A9;
		background: #DBC9A9;
		background: -webkit-linear-gradient(left, #DBC9A9 0% , #977A5A 90%);
		background:	   -moz-linear-gradient(left, #DBC9A9 0% , #977A5A 90%);
		background: 	 -o-linear-gradient(left, #DBC9A9 0% , #977A5A 90%);
		background:			linear-gradient(to right, #DBC9A9 0% , #977A5A 90%);
		-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	}
	@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
		/* IE10+ CSS styles go here */
		#hd .txt-gold {
			background: transparent !important;
		}
	}

	#hd .txt-title{
		position: relative;
		padding-top: 10px;
	}
	#hd .txt-title::before{
		content: '';
		width: 100%;
		height: 1px;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		background: -webkit-linear-gradient(left, #DBC9A9 0% , #977A5A 90%);
		background:	   -moz-linear-gradient(left, #DBC9A9 0% , #977A5A 90%);
		background: 	 -o-linear-gradient(left, #DBC9A9 0% , #977A5A 90%);
		background:			linear-gradient(to right, #DBC9A9 0% , #977A5A 90%);
	}

	#hd .txt-link	  { text-decoration: underline; }
	#hd .txt-lite	  { font-weight: 300;}
	#hd .txt-normal	  { font-weight: normal;}
	#hd .txt-bold	  { font-weight: 500;}

	#hd .txt-left{text-align: left; }
	#hd .txt-right{text-align: right; }
	#hd .txt-center{text-align: center; }

/* ----------FORM----------- */
	#hd input[type=text],
	#hd input[type=email],
	#hd input[type=password],
	#hd textarea,
	#hd select{
		width: 100%;
		margin: 5px 0;
		border: 1px solid transparent;
		background-color: #F4F4F4;
		padding: 6px 8px;
		letter-spacing: 1px;
	}
	#hd input[type=text]:focus,
	#hd input[type=email]:focus,
	#hd input[type=password]:focus{
		border-color: #533A22;
	}
	#hd select{
		border-radius: 5px;
		margin: 0;
		padding: 10px 8px;
		border-radius: 0px;
		border:2px solid transparent;
		-webkit-appearance:none;
		-moz-appearance:none;
		appearance:none;
		background: url("../img/select.png") no-repeat 97% center transparent;
		background-color: #fff;
		border-bottom: #ccc 1px solid;
		text-align: center;
	}
	#hd option{
		text-align: center;
	}
	#hd label.select{
		display: inline-block;
		width: 100%;
		height: 100%;
		position: relative;
	}
	#hd label.select:before {
		content:'';
		display:block;
		width:50px;
		height:27px;
		background:#ffffff;
		position:absolute;
		top:2px;
		bottom:2px;
		right:2px;
		margin:auto 0;
		pointer-events:none;
	}
	#hd label.select:after {
		content:'';
		display:block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 10px 7px 0 7px;
		border-color: #003979 transparent transparent transparent;
		position:absolute;
		top:0;
		bottom:0;
		right:20px;
		margin:auto 0;
		pointer-events:none;
	}

	#hd ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	    color:   #ccc;
	}
	#hd :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
		color:    #ccc;
		opacity:  1;
	}
	#hd ::-moz-placeholder { /* Mozilla Firefox 19+ */
		color:    #ccc;
		opacity:  1;
	}
	#hd :-ms-input-placeholder { /* Internet Explorer 10-11 */
	  	color:    #ccc;
	}
	#hd ::-ms-input-placeholder { /* Microsoft Edge */
	   	color:    #ccc;
	}

	/*radio&checkbox樣式覆蓋*/
	#hd input[type=radio   ]:not(old),
	#hd input[type=checkbox]:not(old){
		width     : 0;
		margin    : 0;
		font-size : 0;
		opacity   : 0;
		pointer-events: none;
		display: none;
	}
	#hd input[type=radio   ]:not(old) + label,
	#hd input[type=checkbox]:not(old) + label{
		display      : inline-block;
		vertical-align: middle;
		margin-right : 17px;
		cursor       : pointer;
		letter-spacing: 0;
	}
	#hd input[type=radio   ]:not(old) + label > span,
	#hd input[type=checkbox]:not(old) + label > span{
		display          : inline-block;
		width            : 18px;
		height           : 18px;
		padding          : 0;
		margin           : -1px 8px 3px 5px;
		position         : relative;
		border-radius    : 0;
		background       : rgba(255,255,255,.8);
		border			 : 2px solid #cccccc;
		vertical-align   : middle;
		cursor           : pointer;
	}
	#hd input[type=radio]:not(old):checked +  label > span:before{
		display          : block;
		width            : 10px;
		height           : 10px;
		margin           : auto;
		top: 0;right: 0;bottom: 0;left: 0;
		position         : absolute;
		border-radius    : 0;
		background       : #336194;
	}
	#hd input[type=checkbox]:not(old):checked + label > span:before{
		content     : '';
		display          : block;
		width            : 10px;
		height           : 10px;
		margin           : auto;
		top: 0;right: 0;bottom: 0;left: 0;
		position         : absolute;
		border-radius    : 0;
		background       : #336194;
	}

/* ----------ANIMATION------ */	
	@-webkit-keyframes showContent{
		from{
			opacity: 0;
			-webkit-transform: scale(.95);
		}
		to  {
			opacity: 1;
			-webkit-transform: scale(1);
		}
	}
	@keyframes showContent{
		from{
			opacity: 0;
			-webkit-transform: scale(.95);
			   -moz-transform: scale(.95);
			    -ms-transform: scale(.95);
			     -o-transform: scale(.95);
			        transform: scale(.95);
		}
		to  {
			opacity: 1;
			-webkit-transform: scale(1);
			   -moz-transform: scale(1);
			    -ms-transform: scale(1);
			     -o-transform: scale(1);
			        transform: scale(1);
		}
	}
	@-webkit-keyframes fadeInFromDown{
		from{
			opacity: 0;
			-webkit-transform: translateY(50%);
		}
		to  {
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
	@keyframes fadeInFromDown{
		from{
			opacity: 0;
			-webkit-transform: translateY(50%);
			   -moz-transform: translateY(50%);
			    -ms-transform: translateY(50%);
			     -o-transform: translateY(50%);
			        transform: translateY(50%);
		}
		to  {
			opacity: 1;
			-webkit-transform: translateY(0);
			   -moz-transform: translateY(0);
			    -ms-transform: translateY(0);
			     -o-transform: translateY(0);
			        transform: translateY(0);
		}
	}



/* ----------RWD----------------------- */
@media screen and (max-width: 1440px){}
@media screen and (max-width: 1366px){
	#hd h4,#hd h4{font-size: 1.25em;}
}
@media screen and (max-width: 1280px){}
@media screen and (max-width: 1024px){}
@media screen and (max-width: 1023px){
	#hd h1,#hd .h1{font-size: 3em;}
	#hd h2,#hd .h2{font-size: 2.2em;}
	#hd h3,#hd .h3{font-size: 1.9em;}
	#hd h4,#hd .h4{font-size: 1.15em;}
	#hd h5,#hd .h5{font-size: 1.1em;}
	#hd h6,#hd .h6{font-size: 1em;}
	#hd p,#hd .p,#hd a{font-size: .9rem;}
}
@media screen and (max-width: 768px){
	#hd h1,#hd .h1{font-size: 2.5em;}
	#hd h2,#hd .h2{font-size: 1.8em; letter-spacing: 1px;}
	#hd h3,#hd .h3{font-size: 1.4em;}
	#hd h4,#hd .h4{font-size: 1.1em;}
	#hd h5,#hd .h5{font-size: 1em;}
	#hd .main_padding{ padding: 30px 0 }
	#hd .main_padding_b{ padding-bottom: 30px; }

	#hd .w800,
	#hd .w900,
	#hd .w1000,
	#hd .w1200,
	#hd .w1300,
	#hd .w1400,
	#hd .w1600{
		width: 90%;
	}
}
@media screen and (max-width: 520px){
	#hd h3,#hd h3{font-size: 1.2em;}
}
@media screen and (max-width: 480px){
	#hd h2,#hd h2{font-size: 1.6em;}
}