@charset "UTF-8";
body,
html,
* {
  margin: 0;
  padding: 0;
  font-family: arial, "Microsoft JhengHei", "微軟正黑體", sans-serif;
}

section {
  position: relative;
}

section .s-block {
  position: absolute;
  width: 100%;
  word-wrap: break-word;
  padding: 0;
}

.text-justify {
  text-justify: distribute;
  text-align: justify;
  -ms-text-justify: inter-ideograph;
  -moz-text-justify: inter-ideograph;
}

a {
  text-decoration: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
 width: 100%;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}

.headerBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

.logolink {
  position: absolute;
  max-width: 115px;
  width: 100%;
  height: auto;
  top: 0;
  left: 2.5vw;
  z-index: 100;
}
@media only screen and (max-width: 768px) {
  .logolink {
    left: 2vw;
    width: 17vw;
    height: 14vw;
  }
}
.logolink a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.swiper {
  --swiper-theme-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
}

.wrap {
  position: relative;
  max-width: 2000px;
  width: 100%;
  line-height: 2;
  font-size: 16px;
  margin: 0 auto;
  overflow: hidden;
  padding-bottom: 0%;
  background-color: #009fdf;
}




.wrap .info {
  width: 85%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  color: #ffffff;
  padding: 0% 0% 1%;;
  font-size: 20px;
  font-weight: 500;
}
@media only screen and (max-width: 1050px) {
  .wrap .info {
    font-size: 1.7vw;
  }
}
@media only screen and (max-width: 768px) {
  .wrap .info {
    font-size: 3.2vw;
    width: 100%;
    padding-left: 0%;
  }
}
.wrap .info .mainItem {
  max-width: 180px;
  width: 16%;
  margin: 1rem 0;
}
@media only screen and (max-width: 768px) {
  .wrap .info .mainItem {
    max-width: unset;
    width: 35%;
  }
}
.wrap .info .subTiem {
  font-size: 1.5vw;
  text-indent: -1.5vw;
  color: #4d879b;
  display: flex;
  width: 100%;
  align-items: center;
  padding-left: 3.1rem;
  margin: 0.5rem 0;
}
@media only screen and (max-width: 768px) {
  .wrap .info .subTiem {
    padding-left: 2%;
    font-size: 4.3vw;
  }
}
.wrap .info .subTiem .subTiem_img {
  max-width: 100%;
  width: 27%;
}
@media only screen and (max-width: 768px) {
  .wrap .info .subTiem .subTiem_img {
    max-width: unset;
    width: 60%;
  }
}
.wrap .info .subTiem .subTiem_img2 {
  width: 37%;
}
@media only screen and (max-width: 768px) {
  .wrap .info .subTiem .subTiem_img2 {
    max-width: unset;
    width: 90%;
  }
}
.wrap .info .subTiem .line {
  flex: 1 0 auto;
  position: relative;
  height: 1px;
}
.wrap .info .subTiem .line::after {
  content: "";
  transform: translateY(50%);
  position: absolute;
  top: 0.3rem;
  left: 10px;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
@media only screen and (max-width: 768px) {
  .wrap .info .subTiem .line::after {
    width: 90%;
  }
}
.wrap .txt {
  padding-left: 0.7rem;
}
@media only screen and (max-width: 768px) {
  .wrap .txt {
    padding-left: 5%;
  }
}
.wrap ol {
  padding: 0% 0% 0 1rem;
  text-align: justify;
  text-justify: distribute;
}
@media only screen and (max-width: 768px) {
  .wrap ol {
    padding-left: 11%;
      padding: 0% 0% 0 1rem;
  }
}
.wrap li {
  margin: 0% 0;
  list-style: decimal;
}
.wrap ol ol li {
  list-style-type: lower-alpha;
}
/* .wrap li::marker {
  content: counter(list-item) "、";
} */
/*.wrap .item2Img {
  transform: translateY(-13%);
}*/
@media only screen and (max-width: 768px) {
  .wrap .item2Img {
    transform: translateY(0%);
  }
}



.wrap .kv .txt01 {
  margin: 0 auto;
  position: relative;
  color: #ffffff;
  /* color: #000; */
  padding: 0% 0% 1%;;
  font-size: 20px;
  font-weight: 500;
  position: absolute;
  top: 47.7%;
  left: 43.7%;
  width: 38%;
  line-height: 1.7;
  z-index: 1;
}
@media only screen and (max-width: 1680px) {
  .wrap .kv .txt01 {
    font-size: 1.1vw;
  }
}
@media only screen and (max-width: 768px) {
  .wrap .kv .txt01 {
    font-size: 4.2vw;
    width: 87%;
    padding-left: 0%;
    left: 50%;
    transform: translateX(-50%);
    top: 47%;
  }
}


.wrap .kv a {
  display: block;
  width: 100%;
  height: 100%;
}
.wrap .kv .txt01 a {
  display: inline;
}

.wrap .kv .linkBox01 {
  position: absolute;
  width: 16%;
  height: 29%;
  top: 14%;
  left:25%;
  transform: translateX(-50%);
  z-index: 1;
}

.wrap .kv .linkBox02 {
  position: absolute;
  width: 16%;
  height: 29%;
  top: 14%;
  left: 40%;
  transform: translateX(-50%);
  z-index: 1;
}
.wrap .kv .linkBox03 {
  position: absolute;
  width: 16%;
  height: 29%;
  top: 14%;
  left: 56%;
  transform: translateX(-50%);
  z-index: 1;
}
.wrap .kv .linkBox04 {
  position: absolute;
  width: 20%;
  height: 29%;
  top: 14%;
  left: 73%;
  transform: translateX(-50%);
  z-index: 1;
}
.wrap .kv .linkBox_btn {
  position: absolute;
  width: 36%;
  height: 6%;
  top: 57%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}


@media only screen and (max-width: 768px) {
  .wrap .kv .linkBox01 {
    width: 41%;
    height: 14%;
    top: 11.5%;
    left: 29%;
  }
	.wrap .kv .linkBox02 {
    width: 41%;
  height: 14%;
  top: 11.5%;
  left: 71%;
  }
	
	.wrap .kv .linkBox03 {
    width: 41%;
  height: 14%;
  top: 25%;
  left: 28%;
  }
	.wrap .kv .linkBox04 {
    width: 47%;
  height: 14%;
  top: 25%;
  left: 72%;
  }
	.wrap .kv .linkBox_btn {
    width: 89%;
  height: 3.5%;
  top: 56%;
  left: 50%;
  }
}
.wrap .kv .linkBox a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .wrap .kv .linkBox a {
    width: 100%;
  }
    .wrap .kv {
  margin: -5% auto 0;
}
}





.wrap .info2 {
  position: relative;
  text-align: center;
	
	
}

.wrap .info2 .form_title {
  position: relative;
  text-align: center;
	margin: 9% 0 5% 11%;
	width: 80%;
}



.wrap .info2 .linkBox {
  position: absolute;
  width: 100%;
  height: 49%;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
}
@media only screen and (max-width: 768px) {
  .wrap .info2 .linkBox {
    height: 100%;
      top:-2%;
  }
}
.wrap .info2 .linkBox a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 768px) {
  .wrap .info2 .linkBox a {
    width: 100%;
  }
    .wrap .info2 .form_title {
  margin: 12% 0 8% 1%;
		
		width: 100%;
}
}


table {
  padding: 0;
  width: 100%;
  font-size: 20px;
}

/* @media only screen and (max-width: 1680px) {
  table {
    font-size: 1.1vw;
  }
} */
@media only screen and (max-width: 768px) {
  table  {
    font-size: 4.2vw;
  }
}

tr {
  display: flex;
}
table td {
  padding: 0.8rem 0;
}
tr td:first-of-type {
  flex: 0 0 30%;
  min-width: 5rem;
	text-align:left;
	padding: 0.8rem;
}
@media only screen and (max-width: 768px) {
  tr td:first-of-type {
    /* width: 5rem;;
    min-width: 5rem; */
  }
}
tr td:last-of-type {
  flex-grow: 1;
  text-align: left;
  padding: 0.8rem;
}


.wrap .table {
  padding: 0;
  width: 100%;
}
.wrap .table .tableImg {
  transform: translateY(-5%);

}
.table img{    width: 60%; margin:0 auto;}
@media only screen and (max-width: 768px) {
  .wrap .table .tableImg {
    transform: translateY(0%);
  }
    .wrap .table img{ width: 90%;}
}
.wrap .table .btn {
  padding-bottom: 10%;
}
@media only screen and (max-width: 768px) {
  .wrap .table .btn {
    padding-bottom: 0%;
    padding-top: 5%;
  }
}
.wrap .info3 {
  /* transform: translateY(-10%); */
  padding-bottom: 2%;
  padding-top: 5%;
	
}

.wrap .info3 .rule_title {
	margin: 0 0 3% 26%;
	width: 50%;
}

@media only screen and (max-width: 768px) {
  .wrap .info3 {
    transform: translateY(0%);
    padding-bottom: 5%;
	 
  }
	.wrap .info3 .rule_title {
		margin: 5% 0 7% 5%;
	width: 90%;
}
}
.wrap .info3 .title {
  font-size: 30px;
  font-weight: 600;
  padding-bottom: 1%;
}
@media only screen and (max-width: 1050px) {
  .wrap .info3 .title {
    font-size: 3vw;
  }
}
@media only screen and (max-width: 768px) {
  .wrap .info3 .title {
    text-indent: -2rem;
    font-size: 4.5vw;
  }
}
.wrap .footer {
  font-size: 14px;
  text-align: center;
  padding: 1rem;
  font-size: 0.8vw;
  color: #6f84de;
  background-color: #1a2659;
}
@media only screen and (max-width: 1050px) {
  .wrap .footer {
    font-size: 1.275vw;
  }
}
@media only screen and (max-width: 768px) {
  .wrap .footer {
    font-size: 2.56vw;
    padding-bottom: 3%;
  }
}
@media only screen and (max-width: 768px) {
  .wrap .pc {
    display: none;
  }
}
.wrap .md {
  display: none;
}
.item a{display: block; position: absolute; width: 100%;z-index: 5; height: 32vw;}
@media only screen and (max-width: 768px) {
  .wrap .md {
    display: block;
  }
.item a{ height: 171vw; }
}/*# sourceMappingURL=main.css.map */