@charset "big5";
@import url("/css/_reset.css");
@import url("/css/_font.css");

/* ==========================================================================
common
========================================================================== */
html, body {
	width: 100%;
	height: 100%;
}
h1, h2 {
	font-family: "Noto Sans TC", Microsoft JhengHei, Arial, sans-serif;
}
.color_gy {
	color: #989898;
	width: 97%;
	margin-left: 3%;
	text-align: justify;
}

/* ==========================================================================
wrap
========================================================================== */
.wrap {
	position: relative;
	padding-top: 600px;
	min-width: 980px;
	background-image: url(img/bg-220817.jpg);
	/* background-color: #62a6d5; */
	background-color: #8bc6de;	
	background-position: center top;
	background-repeat: no-repeat;
}
.logo {
	position: absolute;
	top: 45px;
	left: 50%;
	display: block;
	margin-left: 275px;
	width: 230px;
	height: 150px;
}
.logo img {
	width: 350px;
}
.main {
	position: relative;
	padding: 50px 40px 30px;
	margin: 0 auto 30px;
	width: 780px;
	font-size: 16px;
	color: #444;
	font-family: "Microsoft JhengHei", Arial, sans-serif;
	border: 9px #d1e6f9 solid;
	background: #fff;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.title {
	position: absolute;
	top: -160px;
	left: 0;
	right: 0;
	margin: auto;
	width: 666px;
}
.main h1 {
	margin-bottom: 10px;
	font-size: 21px;
	color: #814ABB;
	font-weight: 500;
}
.main p {
	line-height: 24px;
	margin-bottom: 15px;
}
section {
	margin-bottom: 30px;
}
.btn {
	position: relative;
	margin: 0 auto 50px;
	display: block;
	width: 40%;
	height: 70px;
	font-size: 30px;
	color: #fff;
	line-height: 70px;
	text-align: center;
	font-weight: 400;
	text-decoration: none;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border: 1px #243C71 solid;
	background: #2053C5;
	background: -webkit-linear-gradient(top, #09AEE0 0%, #2053C5 100%);
	background: -moz-linear-gradient(top, #09AEE0 0%, #2053C5 100%);
	background: linear-gradient(to bottom, #09AEE0 0%, #2053C5 100%);
	-webkit-box-shadow: 0 2px #9AE7FF inset;
	-moz-box-shadow: 0 2px #9AE7FF inset;
	box-shadow: 0 2px #9AE7FF inset;
}
.btn:hover {
	border-color: #3f7bbf;
	background: #108dbe;
	background: -webkit-linear-gradient(top, #36e6f9 0%, #108dbe 100%);
	background: -moz-linear-gradient(top, #36e6f9 0%, #108DBE 100%);
	background: linear-gradient(to bottom, #36e6f9 0%, #108DBE 100%);
	-webkit-box-shadow: 0 2px #d7f5ff inset;
	-moz-box-shadow: 0 2px #d7f5ff inset;
	box-shadow: 0 2px #d7f5ff inset;
}
.tbStyle table,
.tbStyle th,
.tbStyle td {
  border: 1px solid #aaa;
}
.tbStyle table {
  border-width: 1px 1px 0 0;
  width: 100%;
  margin-bottom: 8px;
}
.tbStyle th,
.tbStyle td {
  border-width: 0 0 1px 1px;
  padding: 7px 13px;
  line-height: 22px;
  box-sizing: border-box;
  font-family: "Microsoft JhengHei", Arial, sans-serif;
}
.tbStyle th {
  background: #B35C7D;
  color: #fff;
  text-align: center;
}
.case {
	padding: 20px;
	color: #fff;
	background: #9984B5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.main ol {
	padding-left: 16px;
}
.main ol li {
	line-height: 26px;
	list-style-type: decimal;
}
.color_1 {
	color: #00A7A0;
	font-weight: bold;
}
.color_2 {
	color: #BB002E;
	font-weight: bold;
}

/* ==========================================================================
footer
========================================================================== */
footer {
	position: relative;
	height: 75px;
	background: #217cbb;
}
footer ul {
	width: 980px;
	margin: 0 auto;
	padding: 16px 0 0 0;
	text-align: center;
}
footer li {
	display: inline-block;
	font-size: 12px;
	color: #cfebfe;
	font-family: Arial;
	vertical-align: middle;
}
footer .logo_cr {
	width: 138px;
	height: 43px;
	background: url(img/logo_cr.png) 0 6px no-repeat;
}
footer .txt {
	margin: 0 15px;
}
footer .R15 {
	width: 245px;
	line-height: 15px;
	text-align: left;
}
footer .R15 b {
	display: block;
  float: left;
	margin-right: 8px;
	width: 43px;
	height: 43px;
	vertical-align: top;
	background: url(img/+15.gif) no-repeat;
	background-size: cover;
}

/* ==========================================================================
RWD
========================================================================== */
@media screen and (max-width: 800px) {
	#xlegend_head {
		display: none;
	}
	.wrap {
		padding-top: 475px;
		min-width: 100%;
		background-size: 175%;
	}
	.logo {
		top: -10px;
		left: 0;
		margin-left: 0;
	}
	.logo,
	.logo img {
		width: 280px;
		height: 217px;
	}
	.main {
		padding: 65px 4% 30px;
		width: 87%;
	}
	.title {
		top: -150px;
		width: 85%;
	}
	footer {
		width: 100%;
		height: auto;
	}
	footer ul {
		padding: 10px 0;
		width: 100%;
	}
	footer .logo_cr,
	footer .txt span {
		display: none;
	}
	footer .txt {
		margin: 0 20px 0;
		text-align: center;
	}
	footer .R15 {
		margin-right: 20px;
	}
	footer .R15 b {
		background: url(img/+15@2x.gif) no-repeat;
		background-size: cover;
	}
}

@media screen and (max-width: 600px) {
	.wrap {
		padding-top: 380px;
	}
	.main {
		padding: 50px 4% 30px;
		font-size: 15px;
	}
	.title {
		top: -117px;
	}
	.logo, .logo img {
		width: 220px;
		height: 170px;
	}
	.btn {
		width: 50%;
		height: 60px;
		font-size: 24px;
		line-height: 60px;
	}
	footer .txt {
		margin: 0 12px 10px;
	}
	footer .R15 {
		margin-right: 0;
	}
}

@media screen and (max-width: 425px) {
	.wrap {
		padding-top: 285px;
	}
	.logo, .logo img {
		width: 170px;
		height: 131px;
	}
	.main {
		padding: 40px 5% 20px;
		width: 83%;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
	}
	.title {
		top: -83px;
		width: 90%;
	}
	.btn {
		width: 60%;
		height: 55px;
		line-height: 55px;
	}
	.tbStyle th, .tbStyle td {
		padding: 5px 10px;
	}
	.case {
		padding: 13px;
  }
}

@media screen and (max-width: 375px) {
	.wrap {
		padding-top: 260px;
	}
	.logo, .logo img {
		width: 145px;
		height: 112px;
	}
	.main {
		padding: 35px 5% 20px;
		font-size: 14px;
		line-height: 19px;
	}
	.title {
		top: -75px;
	}
	.main h1 {
		margin-bottom: 8px;
		font-size: 19px;
	}
	.btn {
		margin: 0 auto 20px;
		width: 65%;
		height: 55px;
		font-size: 21px;
		line-height: 55px;
	}
}

@media screen and (max-width: 320px) {
	.wrap {
		padding-top: 220px;
	}
	.logo, .logo img {
		width: 130px;
		height: 100px;
	}
	.main {
		padding: 35px 5% 20px;
		font-size: 14px;
		line-height: 19px;
	}
	.title {
		top: -65px;
	}
	.main h1 {
		margin-bottom: 8px;
		font-size: 19px;
	}
	.btn {
		width: 70%;
		height: 50px;
		line-height: 50px;
	}
}