@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  -main-width: 1300px;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, section, article, footer {
  padding: 0;
  margin: 0;
}
body {
  font-family: "Poppins", "Noto Sans TC", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 1px;
}
/* Reset */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* Clearfix hack */
.clearfix:before, .clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
section, article, footer {
  display: block;
}
img {
  border: 0;
  display: block;
  margin: 0 auto;
}
ul, ol, li {
  list-style-type: none;
  list-style-image: none;
}
:link, :visited, :hover, :active, :focus {
  -webkit-transition: color .4s linear, background-color .4s linear, border-color .4s linear, padding .4s linear, opacity .4s linear, all .4s, -webkit-filter .4s linear;
  -o-transition: color .4s linear, background-color .4s linear, border-color .4s linear, padding .4s linear, filter .4s linear, opacity .4s linear, all .4s;
  transition: color .4s linear, background-color .4s linear, border-color .4s linear, padding .4s linear, filter .4s linear, opacity .4s linear, all .4s, -webkit-filter .4s linear, all 0.5s ease-out;
}
a {
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
  outline: none;
  transition: all 0.5s ease-out;
}
a:hover, a:active {
  transition: all 0.5s ease-out;
}

.wrap {
  display: block;
  position: relative;
  width: 100%;
	overflow: hidden;
background: #fff;
	
}

.cm-sign {
  position: fixed;
  top: 60%;
  right: 0;
  width: 120px;
  z-index: 9998;
}
.cm-sign_m{display: none;}
.cm-sign a img, .cm-sign_m a img{
  max-width: 100%;
}
.cm-sign img {
  animation: signsign;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
}
@keyframes signsign {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/*- Header --------------------------------------------------------------------------*/
.hdr {
  position: fixed;
  width: 100%;
  z-index: 9999;
  padding: 0;
  background: rgba(255, 255, 255, .9);
	border-bottom: 1px solid ;
	border-image: linear-gradient(to right, #006def 0%, #eb067f 50%, #eb6031 100%) 1;
}
.hdr-cnt{
	display: block;
	width: 1400px;
	margin: 0 auto;
	overflow: hidden;
}
.logo_clm {
  display: block;
  float: left;
  width:180px;
	/*width:8vw;*/
  margin: 1.25rem 0;
}

.logo_clm img{
  max-width: 100%;
}

.signup{display: block; margin: 0;width: 170px; float: right;}
.large{width: 330px; float: none;}
.sub{width: 360px; float: none; margin: 0 auto}
.none{
	display: block;
	float: none;
	margin: 1.25rem auto;
	width: 360px;
	text-align: center;
  font-size: 1.2rem;
  height: 48px;
  line-height: 48px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  border-radius: 2rem;
  background: linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -moz-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -webkit-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -o-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -ms-linear-gradient(0deg, #eb6031, #eb067f, #006def);
}

.signup a {
	display: block;
  /*float: right;
	float: none;*/
	margin: 1.25rem auto;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  height: 48px;
  line-height: 48px;
  letter-spacing: 1px;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  border-radius: 2rem;
  background: linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -moz-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -webkit-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -o-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -ms-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  text-decoration: none;
	opacity: .85;
	/*box-shadow: rgba(0,0,0,.85) 0.2em 0.2em 0;*/	
}
.signup i { 
	margin-left: .5rem; 
	font-size: 1rem;
  vertical-align: middle;
	transition: all .5s;
}
.signup a:hover { 
	color: rgba(255,255,255,1);
  text-decoration: none;
	background: linear-gradient(0deg, #eb6031, #eb067f, #006def);
	background: -moz-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -webkit-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -o-linear-gradient(0deg, #eb6031, #eb067f, #006def);
  background: -ms-linear-gradient(0deg, #eb6031, #eb067f, #006def);
	opacity: 1;
}
.signup a:hover i , .signup .large a:hover i, .signup .sub a:hover i{
  transform: translateX(3px);
	transition: all .5s;
}
.logos{
	display: block;
	width: 600px;
	overflow: hidden;
}
.logos img{
	max-width: 100%;
}




/*Section-intro*-----------------------------------------------------------*/

.intro{
	display: block;
	position: relative;
	overflow: hidden;
	width: 1400px;
	margin: 8rem auto 5rem;
}

.intro-txt{
	display: block;
	float: left;
	width: 42.85%;
}

.date_name{
	display: block;
	width: 100%;
	overflow: hidden;
}
.date_name h3{
	display: inline-block;
	vertical-align: top;
	width: fit-content;
	font-size: 1.65rem;
	font-weight: 600;
	color: #ef8200;
	border: 2px solid #ef8200;
	padding: 0 1rem;
	line-height: 1.75;
	text-align: center;
	border-radius: 2rem;
	margin-right: .75rem;
}

.intro-txt h1{
	display: block;
	font-family: "Poppins", "Noto Sans TC", sans-serif;
	font-size: 5rem;
	font-weight: 900;
	color: #006def;
	line-height: 1.2;
	margin: 1.5rem 0;
	text-align: justify;
}
.main-point{
	display: block;
	width: 100%;
	overflow: hidden;
}
.main-point ul{}
.main-point li{
	display: block;
	font-family: "Poppins", "Noto Sans TC", sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: #333;
	line-height: 1.5;
	margin-bottom: .5rem;
}
.main-point li i{
	color: #ef8200;
	margin-right: .5rem;
}

.intro-kv{
	display: block;
	float: left;
	width: 57.14%;
}

.intro-kv img{
  max-width: 100%;
}



/*Section-01*-----------------------------------------------------------*/
.main{
	display: block;
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 3rem;
}
.container{
	display: block;
	overflow: hidden;
	width: 100%;
	margin-top: 100px;
}

.area-title{
	display: block;
	position: relative;
	width: fit-content;
	font-weight: 700;
	color: #070155;
	font-size: 2.5rem;
	line-height: 1.5;
	margin: 1rem auto;
	letter-spacing: 2px;
	text-align: center;
	z-index: 2002;
}
.area-title .tt {
  position: absolute;
  top: -0.125em;
  left: -1em; /* 起始基準點 */
  display: block;
  width: 1.75em;
  height: 1.75em;
  border-radius: 80px;
  z-index: -1;
}
.area-title .tt.type1 {
	background-color: #cce1fc;
  animation: animation_type1 1.5s ease-in-out infinite alternate;
}
@keyframes animation_type1 {
	0% {
		left: -1em;
		width: 1.75em;
	}
	50% {
		left: -1em;
		width: 9.25em;
	}
	100% {
		left: 6.5em;
		width: 1.75em;
	}
}
.area-title .tt.type2 {
  background-color: #fce7cc;
  animation: animation_type2 1.5s ease-in-out infinite alternate;
}
@keyframes animation_type2 {
	0% {
		left: -1em;
		width: 1.75em;
	}
	50% {
		left: -1em;
		width: 10.55em;
	}
	100% {
		left: 8.15em;
		width: 1.75em;
	}
}
.area-title .tt.type3 {
	background-color: #cce1fc;
  animation: animation_type3 1.5s ease-in-out infinite alternate;
}
@keyframes animation_type3 {
	0% {
		left: -1em;
		width: 1.75em;
	}
	50% {
		left: -1em;
		width: 7.25em;
	}
	100% {
		left: 4.5em;
		width: 1.75em;
	}
}
.area-title .tt.type4 {
	background-color: #f6d3f3;
  animation: animation_type4 1.5s ease-in-out infinite alternate;
}
@keyframes animation_type4 {
	0% {
		left: -1em;
		width: 1.75em;
	}
	50% {
		left: -1em;
		width: 8.5em;
	}
	100% {
		left: 5.75em;
		width: 1.75em;
	}
}

.area01, .area02, .area03, .area04{
	display: block;
	overflow: hidden;
	width: 100%;
	margin-top: 1.5rem;
}
.area01 h4{
	display: block;
	font-weight: 600;
	color: #070155;
	font-size: 1.85rem;
	line-height: 1.5;
	text-align: center;
}
.area01 p{
   display: block;
  color: #333;
  font-size: 1.35rem;
  line-height: 1.7;
  letter-spacing: 1px;
  text-align: justify;
  font-weight: 300;
  padding-top: 2rem;
}

.area01 p b{
  font-weight: 600;
	color: #222;
}


/*Section-02*-----------------------------------------------------------*/
.area02 ul{
}

.area02 li{
	display: inline-block;
	vertical-align: top;
	width: calc(33.333% - 4rem);
	margin: 1rem 1.8rem;
	overflow: hidden;
}
.icon{
	display: block;
	width: 180px;
	margin: 0 auto;
}
.icon img{ max-width: 100%;}
.area02 li h3{
	display: block;
	line-height: 2;
	font-size: 1.7rem;
	text-align: center;
  font-weight: 700;
	color: #070155;
	letter-spacing: 2px;
	margin-top: .5rem;
}
.area02 li h3::after {
  content: "";
  height: 1px;
  width: 50px;
  margin: .4rem auto;
  background: #070155;
  display: block;
}
.area02 li p{
	display: block;
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6;
  letter-spacing: .05rem;
  text-align: center;
  font-weight: 400;
  padding-top: .5rem;
}


/*Section-03*-----------------------------------------------------------*/
.area03 ul{
	display: block;
	margin-top: 1rem;
}

.area03 li{
	display: block;
	width: 100%;
	margin-bottom: .4rem;
	overflow: hidden;
}
.agd-time{
	display: inline-block;
	vertical-align: top;
	width: 20.83333%;
	margin-right: .15rem;
	 font-size: 1.5rem;
	text-align: center;
	color: #222;
	background: #f1f1f1;
	border-radius: .7rem;
	line-height: 2.25;
	font-weight: 400;
	overflow: hidden;
}
.agd-cnt {
  display: inline-block;
  vertical-align: top;
  width: calc(78.5% - .21rem);
  font-size: 1.5rem;
  color: #070155;
  background: #f1f1f1;
  border-radius: .7rem;
  line-height: 2.25;
  font-weight: 400;
  overflow: hidden;
  padding: 0 1rem;
}
.class{background: #cce2fc;font-weight: 500;}

/*Section-04*-----------------------------------------------------------*/
.note{
	display: block;
	width: 100%;
	margin: 1rem 0 2rem;
	overflow: hidden;
}
.note h4{
	display: block;
	line-height: 1.5;
	font-size: 1.125rem;
  font-weight: 600;
	color: #ef8200;
	letter-spacing: 1px;
	margin-bottom: .5rem;
}
.note-li{display: block; width: 100%; overflow: hidden; margin-top: .5rem;}
.note-li i {
  display: block;
  float: left;
  width: 14px;
  margin-right: 6px;
  font-size: .7rem;
  line-height: 24px;
  color: #ef8200;
}

.note-li p{
	display: block;
	float: left;
	width: calc(99.999% - 22px);
	line-height: 24px;
	font-size: 1rem;
  font-weight: 400;
	color: #333;
}
.note-li p a,.note-li p a:hover{ 
	color: #ef8200;
	text-decoration: underline;
}

/*footer*/
footer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem;
	font-family:"Poppins", "Noto Sans TC", sans-serif;
  background: rgba(255, 255, 255, 1);
	border-top: 1px solid ;
	border-image: linear-gradient(to right, #eb6031 0%, #eb067f 50%, #006def 100%) 1;
}
.flex-cont {
  display: flex;
  justify-content: center;
  margin:.5rem auto;
  width: 1280px;
}

footer .copy {
  display: block;
  color: #070155;
  font-size: .9rem;
  line-height: 1.7;
  letter-spacing: 3px;
  text-align: center;
  font-weight: 300;
  padding: .5rem 0 ;
}

/*background element*/
.element_01{
	position: absolute;
	width: 32.29vw;
  top: 830px;
  right: -50px;
  z-index: 1001;
	animation: pulse2 3s infinite;
}
.element_02{
	position: absolute;
	width: 17.1875vw;
  top: 1150px;
  left: -80px;
  z-index: 1002;	
}
.element_03{
	position: absolute;
	width: 17.1875vw;
  bottom: 1200px;
  right: -100px;
  z-index: 1003;	
}
.element_04{
	position: absolute;
	width: 22.6vw;
  bottom: 540px;
  left: -50px;
  z-index: 1004;
	animation: pulse2 3s infinite;
}

.element_05{
	position: absolute;
	width: 35vw;
  bottom: 0;
  right: -6vw;
  z-index: 1005;	
}


@keyframes pulse2 {
  0% {
    transform: scaleX(1);
    opacity: 0.2;
  }
  50% {
    transform: scale3d(1.15, 1.15, 1.15);
    opacity: 1;
  }
  to {
    transform: scaleX(1);
    opacity: 0.2;
  }
}
/*RWD  ========================================================================================*/


@media screen and (max-width:1600px) {

}

@media screen and (max-width:1536px) {

}

@media screen and (max-width:1440px) {
.hdr-cnt {
  display: block;
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.intro {
  display: block;
  position: relative;
  overflow: hidden;
  width: 1200px;
  margin: 8rem auto 5rem;
}
.date_name h3 {
  display: inline-block;
  vertical-align: top;
  width: fit-content;
  font-size: 1.25rem;
	}
.intro-txt h1 {
  display: block;
  font-family: "Poppins", "Noto Sans TC", sans-serif;
  font-size: 5rem;
	font-size: 4.75vw;
  line-height: 1.2;
  margin: 1.5rem 0;
  text-align: justify;
}
.main-point li {
	font-size: 1.35rem;
	}
}

@media screen and (max-width:1366px) {

}

@media screen and (max-width:1280px) {
.area03 {
  display: block;
  overflow: hidden;
  width: 90%;
  margin-top: 1.5rem;
	margin: 1.5rem auto 0;
}
.agd-time {
  display: inline-block;
  vertical-align: top;
  width: 20.83333%;
  margin-right: .15rem;
  font-size: 1.25rem;
  line-height: 3;
}
.agd-cnt {
  display: inline-block;
  vertical-align: top;
  width: calc(78.5% - .21rem);
  font-size: 1.25rem;
  line-height: 3;
  padding: 0 1rem;
}
.element_01 {
  width: 30vw;
  top: 730px;
  right: -70px;
}
.element_03 {
  width: 17vw;
  bottom: 1500px;
  right: -100px;
}
.element_04 {
  width: 20vw;
  bottom: 900px;
  left: -50px;
}
.logos {
  display: block;
  width: 540px;
  overflow: hidden;
}
}

@media screen and (max-width:1200px) {
.hdr-cnt {
  display: block;
  width: 1070px;
  margin: 0 auto;
  overflow: hidden;
}
.intro {
  display: block;
  position: relative;
  overflow: hidden;
  width: 1070px;
  margin: 8rem auto 5rem;
}
.logos {
  clear: both;
}
.main {
  display: block;
  position: relative;
  width: 1070px;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.area02 li {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333% - 2.65rem);
  margin: 1rem 1.2rem;
  overflow: hidden;
}
.area02 li h3 {
  font-size: 1.5rem;}
.area02 li p {
  display: block;
  color: #333;
  font-size: 1.12rem;}
}

@media screen and (max-width:1024px) {
.hdr-cnt {
  width: 960px;
}
.intro {
  width: 960px;
  margin: 8rem auto 5rem;
}
.main {
  width: 960px;
}
 .date_name h3 {
    display: inline-block;
    vertical-align: top;
    width: fit-content;
    font-size: 1rem;
	padding: 0 .75rem;
	margin-right: .5rem;
  }
 .main-point li {
    font-size: 1.125rem;
  }
 .logos {
    display: block;
    width: 480px;
    overflow: hidden;
  }
.icon {
  display: block;
  width: 150px;
  margin: 0 auto;
}
 .area02 li h3 {
    font-size: 1.25rem;
  }
 .area02 li p {
    display: block;
    color: #333;
    font-size: 1rem;
  }
.container {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top: 60px;
}
}


@media screen and (max-width:820px) {
.hdr-cnt {
  width: 720px;
}
 .intro {
    width: 720px;
    margin: 8rem auto 5rem;
  }
.intro-txt {
  display: block;
  float: none;
  width: 100%;
}
 .date_name h3 {
    display: inline-block;
    vertical-align: top;
    width: fit-content;
    font-size: 1.25rem;
    padding: 0 .75rem;
    margin-right: .5rem;
  }
 .intro-txt h1 {
    font-size: 6.75vw;
    line-height: 1.2;
    margin: 1.5rem 0;
  }
 .main-point li {
    font-size: 1.5rem;
  }
.intro-kv {
  display: block;
  float: none;
  width: 100%;
}
 .logos {
    display: block;
    width: 600px;
    overflow: hidden;
    margin: 1rem auto 0;
  }
 .main {
    width: 90%;
  }
.element_01 {
    width: 30vw;
    top: 1230px;
    right: -70px;
  }
.area01 h4 {
  font-size: 3.17vw;
  line-height: 1.5;
}
.area01 p {
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 400;
  padding-top: 2rem;
}
 .area03 {
    width: 100%;
    margin-top: 1.5rem;
    margin: 1.5rem auto 0;
  }
.element_02 {
  position: absolute;
  width: 15vw;
  top: 1650px;
  left: -30px;
  z-index: 1002;
}
 .element_04 {
    width: 17vw;
    bottom: 950px;
    left: -30px;
  }
}


@media screen and (max-width:768px) {

}


@media screen and (max-width:500px) {
 .hdr-cnt {
    width: 92%;
  }
.logo_clm {
  display: block;
  float: left;
  width: 150px;
	width: 31.25vw;
  margin: 1rem 0;
}
.signup a {
  display: block;
  float: right;
  float: none;
	margin: .65rem auto;}
.intro {
    width: 92%;
    margin: 6.5rem auto 3rem;
  }
 .date_name h3 {
    display: inline-block;
    vertical-align: top;
    width: fit-content;
    font-size: 3.5vw;
    padding: 0 .75rem;
    margin-right: .5rem;
  }	
  .intro-txt h1 {
    font-size: 10vw;
    line-height: 1.2;
    margin: 1.5rem 0;
  }
 .main-point li {
    font-size: 4.5vw;
  }
 .intro-kv {
    display: block;
    float: none;
    width: 100%;
    margin-top: 2.5rem;
  }
 .logos {
    display: block;
    width: 100%;
    overflow: hidden;
    margin: 1rem auto 0;
  }

.area-title {
	font-size: 1.65rem;
	}
 .area01 h4 {
    font-size: 5vw;
    line-height: 1.5;
  }
 .container {
    display: block;
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
  }
 .area01 p {
    font-size: 1.125rem;
    line-height: 1.7;
    font-weight: 400;
    padding-top: 2rem;
  }
 .element_01 {
    width: 30vw;
    top: 1400px;
    right: -20px;
  }
 .area02 li {
    display: block;
    vertical-align: top;
    width: calc(99.999% - 2.41rem);
    margin: 1rem 1.2rem;
    overflow: hidden;
	 padding-bottom: 2rem;
  }
 .area02 li h3 {
    font-size: 1.4rem;
  }
 .area02 li p {
    font-size: 1.125rem;
  }
 .agd-time {
    display: block;
    width: 100%;
    margin-right: 0;
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: 2px;
    background: none;
  }
.area03 li {
  display: block;
  width: 100%;
  margin-bottom: 1.75rem;
  overflow: hidden;
}	
 .agd-cnt {
    display: block;
    width: 100%;
    font-size: 1.25rem;
    line-height: 2.5;
    padding: 0 1rem;
	font-weight: 500;
	 text-align: center;
  }
.class {
  background: #e6f0fd;
}
 .element_02 {
	 display: none;
    position: absolute;
    width: 15vw;
    top: 2650px;
    left: -10px;
    z-index: 1002;
  }
.element_04 {
    width: 20vw;
    bottom: 2350px;
    left: -10px;
  }
.large {
  width: 330px;
  float: none;
  margin: 0 auto;
}
}