@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%;
  height: 100vh;
	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/pc_bg.png");
	background-size: cover;
	background-color: #fff;
}

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

a,h1
{
  --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: 30vh auto 0;
	position: relative;
	display: block;
}
#MainHome .MainHomeLogo img{
	width: 60%;
	display: block;
	margin: 5% 0 0 25%;
}

#MainHome .MainHomeDownload{
	width: 100%;
	margin: 0 auto;
	position: relative;
	display: block;
}
#MainHome .MainHomeDownload a.Download{
	width: 25%;
	display: block;
	margin: 2% auto auto 45%;
}
#MainHome .MainHomeDownload a:hover.Download{
	width: 26%;
	display: block;
}


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


/*右側*/
#MainHome .MainHomeIcon{
  height: 396px;
	position: fixed;
  right: 0%;
  top: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#R_Icon_B:target {
  display: block
}     

#R_Icon_A{
  width: 65px;
  height: 184px;
  background-image: url("../images/pc_Ricon.png");
  background-repeat: no-repeat;  
  display: block;
  position: relative;
  z-index: 5;
}

#R_Icon_B{
  width: 97px;
  height: 396px;
  background-image: url("../images/pc_Ricon_bg.png");
  background-repeat: no-repeat;  
  display: none;
  position: absolute;
  top: 0;
  right: 0%;
  z-index: 10;
}

#MainHome .MainHomeIcon ul {
	width: 100%;
  height: 396px;
	display: flex;
  flex-direction: column;
  justify-content: space-around;
  position: relative;
  text-align: center;
  padding: 2vh 0;
}
#MainHome .MainHomeIcon ul li{
	width: 100%;
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

#MainHome .MainHomeIcon ul li a{
  width: 100%;
	display: block;
  margin: 0 auto;
}
#MainHome .MainHomeIcon ul li a:hover{
  width: 50%;
}

.cols{
}

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

#MainHome .MainHomeIcon#Icon_M{
	display: none;
}


/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
/*---------------------------------------------------------------------*/
@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;
}
}

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

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