@charset "utf-8";
/* CSS Document */

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul, dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object, a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, kbd, q, samp, small, span, strong, sub, sup, tt, var, legend, fieldset {
	padding: 0;
	margin: 0;
}

fieldset {
	border: 0;
}
ul {
	list-style: none;
	clear: both;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, table {
	display: block;
}

a {
	text-decoration: none;
	cursor: pointer;
	outline: none;
}
.clear {
	clear : both;
}
.display{
	display:none;	
}

img {
	vertical-align: middle;
	border: 0;
	text-align: center;
	height: auto;
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
img, fieldset {
	border: 0 none;
}
ul, ol, li {
	list-style: none;
}
em, address {
	font-style: normal;
}
table {
	border-collapse: collapse;
}
em, i {
	font-style: normal;
}
strong, b {
	font-weight: normal;
}
input, img {
	vertical-align: middle;
}
input {
	outline: none;
	border: none;
  -webkit-appearance:none;/*去掉IOS預設樣式*/
  border-radius: none;
}

*{
	/*-webkit-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;*/
	transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	box-sizing: border-box;	
}

body {
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "微軟正黑體 Light", "itc-avant-garde-gothic-lt-bold",'Helvetica Neue', 'Open Sans', sans-serif ,"Adobe 繁黑體 Std B";;
	font-size: 1rem;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	background-repeat: no-repeat;
	background-position: top center;
	background-image: url("../images/Poster-0.5x-1080x540.jpg");
	background-size: cover;
	background-color: #30393f;
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
.wrapper {
  display: block;
  position: relative;
}
.container {
	width: 1280px;
}
section , footer{
  container-type: inline-size;/*和clamp一起*/
}


a
{
  --min-size: 14;
  --max-size: 22;
  --font-size: calc(
    (var(--min-size) * 1px) + 
    (var(--max-size) - var(--min-size)) * 
    ((100cqw - 320px) / (1920 - 320))
  );
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
a:hover
{
  --min-size: 16;
  --max-size: 24;
  --font-size: calc(
    (var(--min-size) * 1px) + 
    (var(--max-size) - var(--min-size)) * 
    ((100cqw - 320px) / (1920 - 320))
  );
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}


/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

header {
	width: 100%;
	position: relative;
	padding: 0;
	margin: 0 auto;
	z-index: 999;
}

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
#MainHome{
	width: 100%;
	padding: 0% 0 0 0;
	position: relative;
	z-index: 51;
	}
#MainHome .MainHomeLogo{
	width: 100%;
	margin: 10vh auto 0;
	position: relative;
	display: block;
}
#MainHome .MainHomeLogo img:nth-child(1){
	width: 45%;
	display: block;
	margin: 5% auto;
}
#MainHome .MainHomeLogo img:nth-child(2){
	width: 70%;
	display: block;
	margin: 0 auto;
}


#MainHome .MainHomeDownload{
	width: 100%;
	margin: 0 auto;
	position: relative;
	display: block;
}
#MainHome .MainHomeDownload a.Download{
	width: 30%;
	display: block;
	margin: 5% auto;
}
#MainHome .MainHomeDownload a:hover.Download{
	width: 32%;
	display: block;
	margin: 5% auto;
}


#MainHome .MainHomeDownload img{
	width: 100%;
	display: block;
}

#MainHome .MainHomeIcon{
	width: 100%;
	margin: 0 auto;
	position: relative;
	display: block;
  text-align: center;
}
#MainHome .MainHomeIcon p.FollowUS{
  width: auto;
  display: inline-block;
  color: #FFFFFF;
  font-size: 20px;
  line-height: 2rem;
  margin: auto;
}
#MainHome .MainHomeIcon a:hover.FollowUS{
  color: #0099ff;
  font-size: 22px;
  line-height: 2rem;
}

#MainHome .MainHomeIcon ul {
	width: 50%;
	display: flex;
  position: relative;
  margin: 5% auto;
  text-align: center;
}
#MainHome .MainHomeIcon ul li{
	width: 100%;
}

#MainHome .MainHomeIcon ul li a{
	width: 10vmin;
	display: block;
  background-color: #000;
  border-radius: 50rem;
  padding: 2vmin;
  margin: auto;
}
#MainHome .MainHomeIcon ul li a:hover{
	width: 11vmin;
	display: block;
  background-color: #0099ff;
  border-radius: 50rem;
  padding: 1.5vmin;
  margin: auto;
}


/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/


/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
@media (min-width: 0) {
.container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
.container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
}
@media (max-width: 768px) {
header nav ul li {
  float: left;
  margin-left: 0.3rem;
}
	
}



@media (min-width: 800px) {
.container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
}

@media (min-width: 992px) {
.container {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.csslider > ul {
  width: 760px;
  height: 420px;
}
}

@media (min-width: 1280px) {
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}
}



/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/