@import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
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: 'Noto Sans TC', sans-serif,Roboto;
  font-size: 1rem;
  font-weight: 300;
}
/* 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-color: #D5D7D3;*/
	/*background: linear-gradient(-45deg, #712d80, #93b6d6, #91cacd);
  background: -moz-linear-gradient(-45deg, #712d80, #93b6d6, #91cacd);
  background: -webkit-linear-gradient(-45deg, #712d80, #93b6d6, #91cacd);
  background: -o-linear-gradient(-45deg, #712d80, #93b6d6, #91cacd);
  background: -ms-linear-gradient(-45deg, #712d80, #93b6d6, #91cacd);*/
}

.join_flw{ display: block; position: fixed; top:60%; right: -8px; z-index: 10000; width:130px;}
.join_flw_m {display: none;}
.join_flw a img{ max-width: 100%;}

/*Section-01*-----------------------------------------------------------*/
.hdr_logo {
  position:absolute;
  width: 50%;
  z-index: 10;
	top: 50px;
	left: 50px;
  /*padding:50px 0 0 50px;
  background: rgba(8,5,85,0);*/
}
.logo_stm{
  display: block;
	float: left;
	width: 165px;
  margin-right: 50px;
}
.logo_ms{
  display: block;
	float: left;
	width: 237px;
}
.logo_stm a img,.logo_ms a img{max-width: 100%;}

.main_kv_m{ display:none;}
.main_kv {
  display: block;
  position: relative;
  width: 100%;
 height: auto;
}
.kv_date{
	position:absolute;
  z-index: 9;
	top: 40px;
	right: 50px;
	font-family: Roboto,'Noto Sans TC', sans-serif;
}
.kv_date_m{display: none;}
.kv_date h3,.kv_date_m h3{display: block; font-size: 2.5rem; font-weight: 400; color: #fff; line-height: 1;letter-spacing:5px; border-bottom: 3px solid #fff; margin-bottom: .75rem;padding-bottom: .25rem;}
.kv_date h3 b,.kv_date_m h3 b{font-size: 4rem; font-weight: 900;font-family: Roboto;}
.kv_date h3 span,.kv_date_m h3 span {
  display: block;
  border: 2px solid #fff;
  font-size: 1.5rem;
  padding: .27rem;
  text-align: center;
  border-radius: 50%;
  line-height: 1;
  margin-right: .5rem;
  margin-top: 1.25rem;
  letter-spacing: 0;
  float: right;
}
.kv_bg{
	position: relative;
	z-index: 1;
	width: 100%;
	top:0;
	right:0;
}
.kv_bg img{max-width: 100%;}
.kv_bg_m{display: none;
}
/*.keyv {
  display: table;
  height:100%;
  width: 100%;
  position: relative;
  background: url("../img/main_kv.jpg") no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/

.kv_slg{display: block; position: absolute; width:720px; top: 280px; right: 140px;z-index: 4;font-family: Roboto,'Noto Sans TC', sans-serif;}
.kv_slg h4{display: block; width:640px; margin:2rem auto 0 auto; text-align: center; letter-spacing: 2px;font-size: 1.7rem; font-weight: 400; color: #fff; line-height: 2.1;  background: rgba(6,177,211,.3); border-radius: 2.1rem;}
.kv_slg .join {
  display: block;
  margin: 4.5rem auto 0 auto;
  width: 400px;
}
.kv_slg .join_m { display: none;}
.kv_slg .join p a{display: inline-block;letter-spacing: 3px;font-size: 5rem; color: rgba(105,244,247,.8);text-align: center; font-weight: 900;text-decoration: none;}
.kv_slg .join p a:hover{ color: rgba(105,244,247,1);text-decoration: none;}
.kv_slg .join p a img{display: inline-block; margin-left: .5rem; max-width: 60px;}

.kv_slg img, .kv_02 img {
  max-width: 100%;
}
.msite_join{display:none;}

/*Section02*-----------------------------------------------------------*/
.sec02 {
  display: block;
  position: relative;
  width: 100%;
	/*height:700px;*/
	font-family: Roboto,'Noto Sans TC', sans-serif;
	background: #000;
}

.sec02_txt{
	display: block;
	position: absolute;
	width: 1000px;
	left:50%;
	margin-left: -500px;
	padding: 160px 0 80px 0;
	z-index: 103;
}

.sec02_txt p{font-size: 1.75rem;font-weight: 500;color: #fff;line-height: 1.5;letter-spacing:1px; text-align: justify; padding-bottom: 1.5rem;text-shadow: 2px 2px 3px black}

.banner {
  width: 100%;
  height: 75vh;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.6;
}

/*Section03*-----------------------------------------------------------*/
/*.mor_wrap{ display: block; position: relative; width: 100%; font-family: Roboto,'Noto Sans TC', sans-serif; background: #011844;}*/
.mor_wrap,.afr_wrap{ 
  display:table;
  height:auto;
  width: 100%;
  position: relative;
	font-family: Roboto,'Noto Sans TC', sans-serif;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
background-size: cover;
}
.mor_wrap{background: url("../img/mor_bg.jpg") no-repeat center center; }
.afr_wrap{background: url("../img/afr_bg.jpg") no-repeat 0 0;}
/*.mor_bg{display: block; position: relative; z-index: 1; overflow: hidden;width: 100%;}
.mor_bg img{max-width: 100%;}*/
.maincntA{display: block; position: relative; z-index: 5; width: 1440px; margin: 0 auto;/*left:50%; margin-left: -720px; */color: #fff;padding: 5rem 0 1.5rem 0;}
.maincntA h2,.maincntB h2{display: block;font-size: 2.5rem; font-weight: 400; color: #fff; text-align: center; line-height: 1.5; letter-spacing: 1px; }
.maincntA h2 small,.maincntB h2 small{display: block;font-size: 1.25rem; font-weight: 300; color:#aaa; text-align: center; line-height: 1.5; letter-spacing: 8px; }
.note{display: block; width: 100%; background: rgba(0,0,0,.25); border: 2px solid #3c577b; margin: 3rem 0; padding: 1.5rem; font-size: 1.36rem; font-weight: 400; color: #fff; text-align: center; letter-spacing: 1px; line-height: 1.75; }
.note b{color: rgba(105,244,247,1);font-weight: 500;}
.note a{ text-decoration: none; color: #fff;}
.note a:hover{ text-decoration:underline; }

.area_tt{
	display: block;
font-size: 1.75rem;
width: 170px;
font-weight: 600;
line-height: 1.5;
color: rgba(105,244,247,1);
margin: 1rem auto 2.5rem auto;
border: 2px solid rgba(105,244,247,1);
border-radius: 3rem;
text-align: center;
letter-spacing: 2px;}
.speak_agenda{display: block; overflow: hidden; position: relative; width: 100%; font-family: Roboto,'Noto Sans TC', sans-serif; margin: 2.5rem 0; letter-spacing: 1px;}
.speaks{display: block; float: left; overflow: hidden; width: calc(49.999% - 1.49rem); margin: 0 2.85rem 0 0; }
.agenda{display: block; float: left; overflow: hidden; width: calc(49.999% - 1.49rem); margin: 0; /*background: rgba(105,244,247,.05);*/}
.spker{display: inline-block; position: relative; overflow: hidden; margin-right: 2rem; width: calc(49.999% - 2.16rem);padding: 0 0 2.75rem 1rem; vertical-align: top;}
.kntA,.kntB{
	position: absolute; 
	margin-top: 1rem; 
	margin-left: -1rem;
	color: #fff; 
	font-size: 1rem;
	font-weight: 400;
	text-align: center;
	letter-spacing: 3px;
	padding: 6px 0;
	width: 105px;
	z-index: 10;
	opacity: .9;
}
.kntA{
	background: linear-gradient(-45deg, #0abbbf, #2383cd);
  background: -moz-linear-gradient(-45deg, #0abbbf, #2383cd);
  background: -webkit-linear-gradient(-45deg, #0abbbf, #2383cd);
  background: -o-linear-gradient(-45deg, #0abbbf, #2383cd);
  background: -ms-linear-gradient(-45deg, #0abbbf, #2383cd);
}
.kntB{
	background: linear-gradient(-45deg, #c291f0, #2d2dce);
  background: -moz-linear-gradient(-45deg, #c291f0, #2d2dce);
  background: -webkit-linear-gradient(-45deg, #c291f0, #2d2dce);
  background: -o-linear-gradient(-45deg, #c291f0, #2d2dce);
  background: -ms-linear-gradient(-45deg, #c291f0, #2d2dce);
}
.kntA span,.kntB span{ font-weight:500;}
.spker img,.spker a img{position: relative;max-width: 100%; opacity: .9; }
.spker a:hover img{opacity: 1; }
.spker h6{display: block; font-size: 1rem; color: #fff; line-height: 1.5;font-weight: 300; margin-top: .5rem;}
.spker h4{display: block; font-size: 2.25rem; color: #fff; line-height: 1.5;font-weight: 700;}
.spker h5{display: block; font-size: 1.5rem; color: rgba(105,244,247,1); line-height: 1.25;font-weight: 500; border-left: 2px solid rgba(105,244,247,1); padding-left: .5rem;}

.timetable { display: block; overflow: hidden; width: 100%;}
.timetable ul {}
.timetable li{display: block; margin-bottom:1.35rem;}
.clock{ 
  display: inline-block; 
  width: 170px; 
  text-align: center; 
  font-family:Roboto ;
  font-size:1.4rem ;
  font-weight:500 ;
  letter-spacing: 0; 
  border-radius: 1.4rem; 
  line-height: 2.8rem;
  margin-right: 15px;
vertical-align: top;
}

.clock_A{ background: rgba(255,255,255,.35);color: #fff;}
.clock_B{ background: rgba(255,255,255,1);color: #0f2f76;}
.agd_cnt{ display: inline-block;  width: calc( 99.99% - 190px );}
.agd_cnt p{
  font-size:1.4rem ;
  line-height: 2.8rem;
  font-weight:400 ;
  color: #fff;
  font-family: Roboto,'Noto Sans TC', sans-serif; 
}
.agd_cnt p span{
	font-size:1.75rem ;
  font-weight:700;
  margin-left: 10px;
	color: rgba(105,244,247,1);
}
.agd_cnt h3{
  font-size:1.75rem ;
  line-height:1.5;
  font-weight:700 ;
}
.agd_cnt h3 small{
  font-size:1.125rem ;
  font-weight:400 ;
	color: rgba(255,255,255,.75);
}
.stt{
display: block;
font-size: 1rem;
width: 80px;
font-weight: 300;
line-height: 1.5;
color: rgba(105,244,247,1);
margin:.25rem 0 0 0 ;
border: 1px solid rgba(105,244,247,1);
border-radius: 1.5rem;
text-align: center;
letter-spacing: 1px;}

.prp_tt{color:#c291f0;border: 2px solid rgba(194,145,240,1); }
.spker h5.prp_h{color: rgba(194,145,240,1); border-left: 2px solid rgba(194,145,240,1);}


/*Section04*-----------------------------------------------------------*/
.sec04_wrp{
	display: block; 
	position: relative; 
	width: 100%; 
	font-family: Roboto,'Noto Sans TC', sans-serif; 
	background: linear-gradient(-45deg, #022e70, #3e338c);
  background: -moz-linear-gradient(-45deg, #022e70, #3e338c);
  background: -webkit-linear-gradient(-45deg, #022e70, #3e338c);
  background: -o-linear-gradient(-45deg, #022e70, #3e338c);
  background: -ms-linear-gradient(-45deg, #022e70, #3e338c);
}

.maincntB{display: block; position: relative; z-index:7; width: 1200px; margin: 0 auto;  color: #fff;padding: 5rem 0 2rem 0;}
.event{display: block; width: 100%; overflow: hidden; }
.event ul{ display: block; overflow: hidden; margin: 2.5rem 0 1rem 0;}
.event li{
	display: block; 
	float: left; 
	width: 49.999%; 
	font-size:1.5rem ;
  line-height: 3rem;
  font-weight:300 ;
  color: #fff;
  font-family: Roboto,'Noto Sans TC', sans-serif;
letter-spacing: 1px;
	padding-bottom: 1rem;
}
.event li span {
  width: 130px;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 5px;
  border-radius: 1.25rem;
  line-height: 2.5rem;
  margin-right: .75rem;
  background: rgba(255,255,255,1);
  color: #0f2f76;
  display: inline-block;
}
.event li small {font-size:1rem ;}
.event h6 { display: block; font-size: 1rem; letter-spacing: 1px;}
.event h6 i{ color:rgba(105,244,247,1); margin-right: .25rem; font-size: 1.25rem;}

.map{display: block; width: 100%; margin-top: 3rem}
.map_h{height: 320px; }

.bg_map {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 800px;
}
.bg_map img{max-width: 100%;}

.flex-cont {
  display: flex;
  justify-content: center;
  margin: 1rem 0 2rem 0;
  width: 100%;
}
.spr_wp{display: block; overflow: hidden; width: calc( 33.333% - 2rem); margin: 0 1rem;}
.spr_tt{
display: block;
font-size: 1.25rem;
width: 170px;
font-weight: 400;
line-height: 2.25;
color: #fff;
margin: 1rem auto 1.5rem auto;
border: 1px solid #fff;
border-radius: 3rem;
text-align: center;
letter-spacing: 4px;	
}

.spr_logo a img,.mslogo a img{ display: block; margin: 1rem auto 2rem auto; width: auto; max-width: 248px;}
.spr_wp span {
  display: block;
  font-size: 1.125rem;
  letter-spacing: 3px;
  text-align: center;
  line-height: 1;
}
/*Section07*-----------------------------------------------------------*/


/*footer*/
footer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 2rem 1rem;
	border-top: 1px solid #fff;
  z-index: 999;
	font-family: 'Noto Serif TC', serif;
  
}

footer p {
  color: rgba(255, 255, 255, 1);
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 1px;font-weight:500;
	text-align: center;
	margin: .25rem 1rem;
}

footer p span{
  color: rgba(255, 255, 255, .75);
  font-size: 1rem;
  line-height: 1.4;
	font-weight: 300;
}

footer .copyright {
  display: block;
  overflow: hidden;

}

.menu_share {
  display: block;
  width: 170px;
  overflow: hidden;
  margin: 1rem auto 0 auto;
}
.menu_share p{display: block;float: left;color: #fff;font-size: 1rem;line-height: 3.1rem; margin: 0 .35rem;}
.menu_share a {
  display: block;
  float: left;
  font-size: 1rem;
 width: 50px;
  font-weight: 600;
  font-family: Roboto;
  line-height: 3.1rem;
  color: #fff;
  margin: 0 .25rem;
  background-color: none;
	border: 1px solid #fff;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s ease-out;
}
.menu_share a:hover, .menu_share a:active {
  background-color:  rgb(19, 131, 153);
	border: 1px solid rgb(19, 131, 153);
  color: #fff;
  text-decoration: none;
  transition: all 0.5s ease-out;
}

/*footer*/
#footer {
  background:none;
  font-size: 0.875rem;
  position: relative;
  z-index: 9999;
	padding-top: 1rem;
	border-top:1px solid rgba(255,255,255,1);
}
#footer #footer_bottom {
  color: #fff;
  font-family: Noto Sans TC, Roboto, Arial, sans-serif;
  /*padding-top: 1em;*/
  text-align: center;
}
#footer #footer_bottom #slogan_wrapper {
  width: 100%;
  max-width: 1150px;
  height: auto;
  margin: 0 auto;
  padding: 18px 0;
  line-height: 25px;
  text-align: center;
}
#footer #footer_bottom #slogan_wrapper .slogans {
  display: inline-block;
  height: 14px;
  padding: 0 8px;
}
#footer #footer_bottom #footer_info_wrapper {
  display: block;
  max-width: 1150px;
  margin: 0 auto;
  padding-bottom: 20px;
  line-height: 1.5;
}
#footer #footer_bottom #footer_info_wrapper a {
  color: #fff;
  text-decoration: none;
}
#footer #footer_bottom #footer_info_wrapper a:hover {
  color: #ff3838;
  text-decoration: none;
}
#footer #footer_bottom #footer_info_wrapper .footer_info_contents {
  display: inline-block;
  padding: 0 10px;
  font-weight: 400;
  letter-spacing: 1px;
}
#footer #footer_bottom #copyright {
  display: block !important;
  color: #fff;
}

/*RWD  ========================================================================================*/

@media screen and (max-width:1600px) {
.kv_slg {
  width: 600px;
  top: 240px;
	right: 120px;}
.kv_slg h4 {
  width: 540px;
  margin: 2rem auto 0 auto;
  letter-spacing: 1px;
	font-size: 1.5rem;}
.kv_slg .join {
  display: block;
  margin: 3.5rem auto 0 auto;
  width: 400px;
}
.banner {
  width: 100%;
	height: 95vh;}
}

@media screen and (max-width:1440px) {
.hdr_logo {
  position: absolute;
  width: 50%;
  z-index: 10;
  top: 40px;
	left: 40px;
	}
.logo_stm {
  width: 125px;
  margin-right: 40px;
}
.logo_ms {
  width: 185px;
}
.kv_date {
  top: 30px;
	right: 40px;}
.kv_slg {
  width: 500px;
  top: 220px;
  right: 120px;
}
.kv_slg h4 {
  width: 450px;
  margin: 1.5rem auto 0 auto;
  letter-spacing: 1px;
  font-size: 1.3rem;
}
.kv_slg .join {
  display: block;
  margin: 3rem auto 0 auto;
  width: 340px;
}
.kv_slg .join p a {
  letter-spacing: 3px;
  font-size: 4rem;
  font-weight: 900;
}
.join_flw { width: 110px;}
.banner {
  width: 100%;
  height: 85vh;
}
.sec02_txt {
  width: 900px;
  margin-left: -450px;
  padding: 120px 0 80px 0;
}
.sec02_txt p {font-size: 1.5rem;line-height: 1.7;}
.maincntA { display: block; position: relative; width: 1150px;}
.note{font-size: 1.25rem;}
.maincntA h2, .maincntB h2 {font-size: 2.15rem;letter-spacing: 5px;}
.area_tt{font-size: 1.5rem; width: 150px; font-weight: 500; letter-spacing: 3px;}
.maincntA h2 small, .maincntB h2 small { font-size: 1rem; font-weight: 400;}
.agd_cnt {
  display: inline-block;
  width: calc( 99.99% - 160px );
}
.agd_cnt p {
  font-size: 1.25rem;
	line-height: 2.3rem;}
.agd_cnt p span {
  font-size: 1.4rem;
  color: rgba(105,244,247,1);
}
.agd_cnt h3 {
  font-size: 1.4rem;
}
.agd_cnt h3 small {font-size: 1rem;}
.spker h6 {font-size: .85rem;}
.spker h4 {font-size: 1.75rem;}
.spker h5 {font-size: 1.3rem;}
.kntA, .kntB {
  margin-top: .75rem;
  margin-left: -1rem;
  font-size: .9rem;
  letter-spacing: 2px;
  padding: 3px 0;
  width: 90px;
}
.timetable li {
  display: block;
  margin-bottom: 1.15rem;
}
.clock {
  display: inline-block;
  width: 140px;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: 1.4rem;
  line-height: 2.3rem;
  margin-right: 10px;
}

.maincntB { display: block; position: relative; width: 1150px;}
.event li span {
  width: 130px;
  text-align: center;
  font-size: 1.25rem;
	font-weight: 400;}
}

@media screen and (max-width:1366px) {
.join_flw {
  width: 100px;
}
.kv_slg .join {
  display: block;
  margin: 2rem auto 0 auto;
  width: 340px;
}
}

@media screen and (max-width:1280px) {
.kv_date h3 {font-size: 1.75rem;}
.kv_date h3 b {font-size: 2.5rem;}	
.kv_date h3 span {font-size: 1.25rem;margin-top: .25rem;}
.kv_slg {
  width: 470px;
  top: 180px;
  right: 90px;
}
.kv_slg .join {
  margin: 2rem auto 0 auto;
  width: 295px;
}
.kv_slg .join p a { font-size: 3.5rem;}	
.kv_slg .join p a img {
  display: inline-block;
  max-width: 50px;
}
}

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

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

.art-slider {
    max-width: 95%;
    margin: 1rem auto 3rem auto;
}	

}

@media screen and (max-width:820px) {
.kv_bg_m{
	display: block;
  position: relative;
  width: 100%;}
.kv_bg_m img{max-width: 100%;}
.kv_bg { display: none;}
.kv_slg {
  width: 520px;
  top: 660px;
  right: 0;
  left: 50%;
  margin-left: -250px;
}
.sec02{ 
  display:table;
  height:auto;
  width: 100%;
  position: relative;
	font-family: Roboto,'Noto Sans TC', sans-serif;
background: url("../img/m_v_bg.jpg") no-repeat 0 0; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
background-size: cover;
}

.sec02_txt {
	position: relative;
  width: 640px;
  margin-left: -320px;
  padding: 80px 0;
}
.mor_wrap {
  background: url("../img/mor_bg.jpg") no-repeat -300px 0;
	background-color:rgb(1, 24, 68);
}
.maincntA {
  display: block;
  position: relative;
  width: 90%;
padding: 3rem 0 2rem 0;
}
.speaks {
  display: block;
  float: none;
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
}
.agenda {
  display: block;
  float: none;
  overflow: hidden;
  width: 100%;
	margin: 0 auto;}
.afr_wrap {
  background: url("../img/afr_bg.jpg") no-repeat -500px 0;
background-color:rgb(38, 27, 67);
}
.maincntB {
  display: block;
  position: relative;
  width: 90%;
padding: 3rem 0 2rem 0;
}
.event li {
  display: block;
  float: none;
	width: 100%;}
.event h6 {
  line-height: 2;
}
.bg_map {
  position: absolute;
  width: 100%;
  z-index: 1;
  top: 1700px;
}
.flex-cont {
  display: block;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}
.spr_wp {
  display: block;
  overflow: hidden;
  width: 90%;
  margin: 1rem auto;
}
.banner {display: none;}
.video_m{ display: block; width: 100%;}
.spr_logo a img { max-width: 130px;}
.mslogo a img{max-width: 180px;}
.spr_logo a img, .mslogo a img { margin: 1rem auto;}
}

@media screen and (max-width:480px) {
.join_flw {display: none;}
.join_flw_m {display: block;position: fixed; bottom: 0; width: 100%;z-index: 10000;}
.join_flw_m a img {max-width: 100%;}
 .kv_date{display: none;}
.kv_slg .join {
  display: none;
  /*margin: 4.5rem auto 0 auto;
  width: 400px;*/
}
.hdr_logo {
  position: absolute;
  width: 90%;
  z-index: 10;
  top: 30px;
  left: 30px;
}
.logo_stm {
  width: 110px;
  margin-right: 30px;
}
.logo_ms {
  width: 170px;
}
.kv_slg {
  width: 400px;
  top: 400px;
  right: 0;
  left: 50%;
  margin-left: -195px;
}
.kv_slg h4 {
  width: 100%;
  margin: 1rem auto 0 auto;
  letter-spacing: 1px;
  font-size: 1rem;
}
.msite_join{ display: block;
  position: relative;
  width: 100%;
	/*height:700px;*/
	font-family: Roboto,'Noto Sans TC', sans-serif;
	background: #006194;
	padding: 2rem 0;}
.kv_date_m{
	display: block;
width:300px;
margin: 0 auto;
	font-family: Roboto,'Noto Sans TC', sans-serif;
}
.join_m {
  display: block;
 margin: 1.5rem auto 0 auto;
  width: 330px;
}
.join_m p a{display: inline-block;letter-spacing: 3px;font-size: 4rem; color: rgba(105,244,247,.8);text-align: center; font-weight: 900;text-decoration: none;}
.join_m p a:hover{ color: rgba(105,244,247,1);text-decoration: none;}
.join_m p a img{display: inline-block; margin-left: .5rem; max-width: 50px;}
.sec02_txt {
  width: 400px;
  margin-left: -200px;
  padding: 80px 0;
}
.spker {
  display: block;
  position: relative;
  overflow: hidden;
  margin-right: 0;
  width: calc(99.999% - 1.5rem);
  padding: 0 0 2.25rem 1.5rem;
}
.spker h6 {
  font-size: 1rem;
}
.sec02_txt p {
  font-size: 1.3rem;
  line-height: 1.7;
}
.note {
	margin: 2rem 0;
  font-size: 1.125rem;
}
.timetable li {
  display: block;
  margin-bottom: 2rem;
}
.clock {
  display: block;
  width: 250px;
  font-size: 1.125rem;
  font-weight: 500;
  border-radius: 1.4rem;
  line-height: 2.3rem;
  margin-right: 0;
  margin: .5rem auto;
}
.agd_cnt {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: .5rem;
}
.agd_cnt p span {
  font-size: 1.3rem;
  color: rgba(105,244,247,1);
  display: block;
}
.stt {
  display: block;
  font-size: .9rem;
  width: 120px;
	margin: 1rem auto .25rem auto;}
.event li {
  display: block;
  float: none;
  width: 100%;
  text-align: center;
}
.event li span {
  width: 150px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0 auto;
  display: block;
}
.kv_date h3, .kv_date_m h3 {
  display: block;
	font-size: 2rem;}
.kv_date h3 b, .kv_date_m h3 b {
	font-size: 3rem;}	
.kv_date h3 span, .kv_date_m h3 span {
  font-size: 1.3rem;
  padding: .27rem;
  margin-right: .5rem;
  margin-top: .6rem;
  letter-spacing: 0;
  float: right;
}
.spr_tt {
  font-size: 1.125rem;
  width: 150px;
  font-weight: 400;
  line-height: 2;
  color: #fff;
	margin: 1rem auto .75rem auto;}
.agd_cnt h3 small {
  font-size: .9rem;
}
#footer #footer_bottom #footer_info_wrapper {
  padding-bottom: 100px;
}

@media screen and (max-width:430px) {
.kv_slg {
  width: 350px;
  top: 360px;
  right: 0;
  left: 50%;
  margin-left: -175px;
}
.sec02_txt {
  width: 360px;
  margin-left: -180px;
  padding: 80px 0;
}
.event li {
	font-size: 1.25rem;}
.event li small {
  font-size: .85rem;
}
kv_date h3 span, .kv_date_m h3 span {
  font-size: 1.4rem;
  padding: .27rem;
	margin-right: .75rem;}
}

@media screen and (max-width:415px) {
.kv_slg { width: 350px;top: 340px;}		
}

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

footer p {
    font-size: .9rem;
    line-height: 2;
    letter-spacing: 0;
    font-weight: 500;
    text-align: center;
    margin: .25rem 0;
}
}