@charset "utf-8";
/***************************************
    copyright by MaxWeb.com.tw 
***************************************/
@import url("global.css");
/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400|Open+Sans:300,400');*/
@import url('https://fonts.googleapis.com/css?family=Exo+2:700|Noto+Sans+TC:400,700|Roboto:400');


/*-------------------------------------------------
 Reset
--------------------------------------------------*/
/*ul,ol,*/html,body,div,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,a,pre,form,p,blockquote,fieldset,input,abbr,article,aside,command,details,figcaption,figure,footer,header,hgroup,mark,meter,nav,output,progress,section,summary,time { margin: 0; padding: 0; box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th,figcaption { font-size: 1em; font-weight: normal; font-style: normal; }
fieldset,iframe { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
article,aside,footer,header,hgroup,nav,section,figure,figcaption { display: block; }



html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

body{
	/*font-family: 'Open Sans', Helvetica, Arial, "微軟正黑體", "Microsoft JhengHei", "Microsoft YaHei";*/
	font-family: 'Roboto', 'Noto Sans SC', Helvetica, Arial, "Microsoft YaHei", "微軟正黑體", "Microsoft JhengHei";
	font-weight: 400;
	color: #666;
	font-size: 1.8rem;/*1.6 × 10px = 16px */
	line-height: 1.6;
	/*text-align: justify;*/
	/*background: #F1E5A8 url( ../../../../../cufiles/images/web/layout/bg_patten.png ) right top;*/
}


h1 {
	font-size: 4.8rem;
	font-weight: 700;
	font-style: italic;
	color: #333;
	font-family: 'Exo 2', "Noto Sans TC";
}
h2 {
	font-size: 3.6rem;
	font-weight: 700;
	color: #333;
	font-family: 'Exo 2', "Noto Sans TC";
}
h3 {
	font-size: 2.8rem;
	font-weight: 700;
	color: #333;
	font-family: 'Exo 2', "Noto Sans TC";
}
h4 {
	font-size: 2.4rem;
	font-weight: 700;
	color: #333;
	font-family: 'Exo 2', "Noto Sans TC";
}
h5 {
	font-size: 2.0rem;
	font-weight: 700;
	color: #333;
	font-family: 'Exo 2', "Noto Sans TC";
}
h6 {
	font-size: 1.8rem;
	font-weight: 700;
	color: #333;
	font-family: 'Exo 2', "Noto Sans TC";
}
p {
	/*line-height: 2;*/
}

*:focus {
	outline: none;
}

a, a:focus {
	color: #333;
	text-decoration: none;
}
a:visited {
	color: #333;
	text-decoration: none;
}
a:hover {
	cursor:pointer;
	text-decoration: none;
	color: #333;
}

.info_ori{
	background: #ECF0F1;
	padding: 20px;
	border-left: 4px solid #2E96D9;
}
.label_red{
	color: #FFF;
	background: #D9534F;
	padding: 3px 6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
.label_blue{
	color: #FFF;
	background: #337AB7;
	padding: 3px 6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
.label_ori{
	color: #FFF;
	background: #F0AD4E;
	padding: 3px 6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
.label_green{
	color: #FFF;
	background: #4BB5C2;
	padding: 4px 12px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}
.hidden{
	display: none;
}


/*-------------------------------------------------
 Form
--------------------------------------------------*/
input[type="text"], input[type="search"], input[type="password"]{
	width: 100%; 
	max-width:328px; 
	height: 34px;
	margin: 0;
	padding: 0 8px;
	font-size: 100%;
	/*background: #EAEAEA;*/
	border: 1px solid #EEE;
}
textarea{
	/*line-height: 30px;*/
	width: 100%;
	max-width:340px; 
	/*width: 100%;*/
	margin: 0 0 4px 0;
	font-size: 100%;
	/*background: #EAEAEA;*/
	border: 1px solid #EEE;
}
input:focus, textarea:focus
{
	border: 1px solid #666;
}
select {
	font-family: Helvetica, Arial, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
	height: 1.8em;
	background: #FFF;
	
	width: 100%;
	max-width:328px; 
	min-width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 34px 0 8px;
	font-size: 100%;
	background: #FFF url(../../../../mw/cufiles/images/web/select_arrow_3.png) no-repeat right;
	cursor: pointer;
	appearance: none;
	-moz-appearance: none; /* Firefox */
	text-overflow: '';
	-webkit-appearance: none; /* Safari and Chrome */
	border-radius: 0;
	border: 1px solid #EEE;
}
select::-ms-expand {
	display: none;
}
select:focus
{ 
	font-family: Helvetica, Arial, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
	border: 1px solid #666;
}
.drop_select {
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #CCC;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #CCC;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #CCC;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #CCC;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #CCC;
}
img {
	border: none;
}

pre{
	border: none;
	background: none;
}


/*
a.main_btn {
	display: inline-block;
	border-radius: 28px;
	padding: 10px 42px;
	font-size: 2rem;
	background: none;
	transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;
}
a.fill_btn {
	background-color: #f24537;
	border-radius: 4px;
	border: 1px solid #d02718;
	display: inline-block;
	color: #FFF;
	padding: 10px 40px;
	text-align: center;
	 text-shadow: 1px 1px 0px #7d15cd; 
}*/
.btn {
	display: inline-block;
	border-radius: 27px;
	padding: 13px 42px;
	/*font-size: 1.6rem;*/
	text-align: center;
	background: none;
	/*transition: all 0.35s ease-in-out;
	-moz-transition: all 0.35s ease-in-out;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	-ms-transition: all 0.35s ease-in-out;*/
}
.btn:hover,.btn:visited  {
	text-decoration: none;
	/*color:#FFF;*/
}
.btn:active {
	position:relative;
	top:1px;
	-moz-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
	-webkit-box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
	box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;
}

a.main_red_btn {
	color:#FFF;
	background: #7E041C;
	/*background: #EB5645;*/
}
a.main_red_btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #BE001F), color-stop(1, #7E041C) );
	background:-moz-linear-gradient( center top, #BE001F 5%, #7E041C 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#BE001F', endColorstr='#7E041C');
	background-color:#BE001F;
	text-decoration: none;
	color:#FFF;
}

a.main_black_btn {
	color:#FFF;
	background: #222;
}
a.main_black_btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #666), color-stop(1, #222) );
	background:-moz-linear-gradient( center top, #666 5%, #222 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666', endColorstr='#222');
	background-color:#666;
	text-decoration: none;
	color:#FFF;
}

a.main_white_btn {
	margin-right: 12px;
	border: 2px solid #FFF;
	color: #FFF !important;
}
a.main_white_btn:hover {
	border: 2px solid #999;
	color: #999 !important;
}

a.main_ori_btn {
	margin-right: 12px;
	background: #F9E72B;
}
a.main_ori_btn:hover {
	background: #EAD827;
}

a.main_gray_btn {
	margin-right: 12px;
	border: 2px solid #BBB;
	color: #BBB !important;
}
a.main_gray_btn:hover {
	border: 2px solid #E84855;
	color: #E84855 !important;
}

a.main_blue_btn {
	color:#FFF;
	background: #02759F;
}
a.main_blue_btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #2E96D9), color-stop(1, #02759F) );
	background:-moz-linear-gradient( center top, #2E96D9 5%, #02759F 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2E96D9', endColorstr='#02759F');
	background-color:#2E96D9;
	text-decoration: none;
	color:#FFF;
}

a.main_green_btn {
	margin-right: 12px;
	/*border: 2px solid #8cb82b;*/
	/*color: #8cb82b !important;*/
	background: #8cb82b;
	color: #FFF;
}
a.main_green_btn:hover {
	/*border: 2px solid #83c41a;*/
	/*color: #83c41a !important;*/
	background: #8cb82b;
	color: #FFF;
}


/*-------------------------------------------- 
	Media Queries 
---------------------------------------------*/
/* Portrait and Landscape */
/*@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}*/

/*iPad Pro*/
@media screen and (max-width: 1279px) {

}

/*iPad*/
@media screen and (max-width: 1023px) {
	
	a.main_btn {
		display: inline-block;
		border-radius: 24px;
		padding: 10px 34px;
		transition: all 0.35s ease-in-out;
		-moz-transition: all 0.35s ease-in-out;
		-webkit-transition: all 0.35s ease-in-out;
		-o-transition: all 0.35s ease-in-out;
		-ms-transition: all 0.35s ease-in-out;
	}
}

/*iPhone*/
@media screen and (max-width: 767px) {

	body{
		font-size: 1.6rem;/*1.6 × 10px = 16px */
		line-height: 1.5;
	}
	h1 {
		font-size: 4.0rem;
		/*font-size: 4.8rem;*/
	}
	h2 {
		font-size: 3.0rem;
		/*font-size: 3.6rem;*/
	}
	h3 {
		font-size: 2.4rem;
		/*font-size: 2.8rem;*/
	}
	h4 {
		font-size: 2.1rem;
		/*font-size: 2.4rem;*/
	}
	h5 {
		font-size: 1.8rem;
		/*font-size: 2.0rem;*/
	}
	h6 {
		font-size: 1.6rem;
		/*font-size: 1.8rem;*/
	}

	.btn {
		padding: 6px 22px;
	}
}