@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,500,700");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
.main-nav .container .menu ul.nav-content li > a:before, #info .container .main .word, #schedule .container .tab-content #taoyuan:before, #schedule .container .tab-content #taichung:before, #schedule .container .tab-content #kaohsiung:before, #more .container .article .box:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

html, body {
  font-family: 'Work Sans','微軟正黑體', sans-serif;
  letter-spacing: 2px;
}
html a, html a:hover, html a:active, html a:focus, body a, body a:hover, body a:active, body a:focus {
  text-decoration: none;
}
@media (min-width: 0) {
  html, body {
    min-width: 320px;
  }
}

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
 
}

h1, h2, h3, h4, h5, ul, li {
  margin: 0;
  padding: 0;
}


h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}


p {
  font-size: 18px;
}

span {
  font-size: 1rem;
}

@media (max-width: 767px) {
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 2rem;
    color: #3A3A3A;
  }

  h4 {
    font-size: 20px;
    color: #3A3A3A;
  }



  p {
    font-size: 18px;
    color: #3A3A3A;
  }

  span {
    font-size: 0.875rem;
  }
}


.main-nav {
  background-color: transparent;
  padding-top: 30px;
  padding-bottom: 30px;
}
.main-nav .container {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.main-nav .container .logo {
  position: absolute;
  top: -10px;
  left: 0px;
}
.main-nav .container .logo a img {
  width: 300px;
  transition: 0.2s ease-out;
}
.main-nav .container .menu ul.nav-content {
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-nav .container .menu ul.nav-content li {
  float: left;
}
.main-nav .container .menu ul.nav-content li > a {
  color: #FDA28F;
  padding: 10px 15px;
  position: relative;
}
.main-nav .container .menu ul.nav-content li > a:before {
  content: "";
  width: 0px;
  height: 2px;
  background-color: #82CFE0;
  top: 35px;
  opacity: 0;
}
.main-nav .container .menu ul.nav-content li > a:hover:before {
  width: 30px;
  opacity: 1;
  transition: 0.5s ease-out;
}
.main-nav .container .menu ul.nav-content li > a.active {
  text-decoration: none;
}
.main-nav .container .menu ul.nav-content li > a.active:before {
  width: 30px;
  opacity: 1;
  transition: 0.5s ease-out;
}
.main-nav .container .menu.vhide {
  display: block;
}
.main-nav .container a.menu-trigger {
  display: none;
}

.navbg {
  background-color: rgba(255, 255, 255, 0.9);
  transition: 0.5s ease-out;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.describe{ 
	display:block; 
	width:100%; 
	padding-top:20px; 
	margin:0 auto; text-align:center;} 
.describe h5{
	color:#fff;
	line-height:2rem;}


@media (max-width: 991px) {
  .main-nav {
    background-color: rgba(244, 244, 244, 0.9);
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .main-nav .container {
    justify-content: center;
  }
  .main-nav .container .logo {
    top: -15px;
    left: 20px;
    width: 250px;
  }
  .main-nav .container .logo a img {
    width: 100%;
  }
  .main-nav .container .menu {
    display: flex;
    align-items: center;
    height: 100vh;
  }
  .main-nav .container .menu ul.nav-content {
    padding-top: 10%;
    transition: 0.5s ease-out;
  }
  .main-nav .container .menu ul.nav-content li {
    float: none;
    text-align: center;
    margin-bottom: 30px;
  }
  .main-nav .container .menu ul.nav-content li > a {
    margin-bottom: 10px;
    font-size: 30px;
  }
  .main-nav .container .menu ul.nav-content li > a:before {
    width: 0px;
    top: 50px;
  }
  .main-nav .container .menu ul.nav-content li > a:hover:before {
    width: 60px;
  }
  .main-nav .container .menu ul.nav-content li > a.active:before {
    width: 60px;
  }
  .main-nav .container .menu.vhide {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  .main-nav .container a.menu-trigger {
    z-index: 999;
    display: block;
    position: fixed;
    top: 15px;
    right: 10px;
    padding-left: 6px;
    height: 40px;
    width: 40px;
    cursor: pointer;
  }
  .main-nav .container a.menu-trigger .menu-line {
    background: #FDA28F;
    transition: 0.6s ease;
    transition-timing-function: cubic-bezier(0.75, 0, 0.29, 1.01);
    position: absolute;
  }
  .main-nav .container a.menu-trigger .top-menu,
  .main-nav .container a.menu-trigger .mid-menu,
  .main-nav .container a.menu-trigger .bottom-menu {
    width: 30px;
    height: 4px;
    border-radius: 5px;
    background-color: #FDA28F;
  }
  .main-nav .container a.menu-trigger .top-menu {
    top: 10px;
  }
  .main-nav .container a.menu-trigger .mid-menu {
    top: 18px;
  }
  .main-nav .container a.menu-trigger .bottom-menu {
    top: 26px;
  }
  .main-nav .container a.menu-trigger.close-btn .top-menu {
    background: #FDA28F;!important;
    top: 18px !important;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .main-nav .container a.menu-trigger.close-btn .mid-menu {
    opacity: 0;
  }
  .main-nav .container a.menu-trigger.close-btn .bottom-menu {
    background: #FDA28F;!important;
    top: 18px !important;
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
  }
  
 
}
@media (max-width: 823px) {
  .main-nav .container .menu ul.nav-content {
    padding-top: 30%;
  }
  .main-nav .container .menu ul.nav-content li {
    margin-bottom: 20px;
  }
  .main-nav .container .menu ul.nav-content li > a {
    font-size: 20px;
  }
  .main-nav .container .menu ul.nav-content li > a:before {
    width: 0px;
    top: 40px;
  }
  .main-nav .container .menu ul.nav-content li > a:hover:before {
    width: 45px;
  }
  .main-nav .container .menu ul.nav-content li > a.active:before {
    width: 45px;
  }
}
@media (max-width: 640px) {
  .main-nav .container .menu ul.nav-content {
    padding-top: 10%;
  }
  .main-nav .container .menu ul.nav-content li {
    margin-bottom: 20px;
  }
}
@media (max-width: 479px) {
  .main-nav .container .menu ul.nav-content li {
    margin-bottom: 30px;
  }

}
@media (max-width: 320px) {
	.main-nav .container .logo {
    width: 200px;
  }
}


 /*------------------KV-content--------------------*/
.KVcontent{
	display: block;
	width: 100%;
	height: 750px;
	top:80px;
	background: url(../images/kvbg.jpg)no-repeat;
	background-size:cover;
  	background-position:bottom;
  	position:inherit;
}
.KVcontent .KVphoto{
	display: inline-block;
	width: 50%;
	padding: 0 0 0 20px;	
}
.KVcontent .KVphoto img{
 	width: 90%;
}

.KVcontent .main{
	width: 40%;
	position: relative;
	margin-top:-25%;
	margin-left: 60%;
}

.KVcontent .kvtitlesmail{
	font-size: 45px;
	color: #8BC53F;
	letter-spacing: 10px;
}

.KVcontent .kvtitlemeid{
	font-size: 55px;
	color: #8BC53F;
	letter-spacing: 25px;
}

.KVcontent .kvtitlebig{
	font-size:120px;
	color: #51C3C3;
	letter-spacing: 30px;
	margin:20px 0; 

}
.KVpc{ display: block; }
.KVm{display: none; }
.KVcontent p{
	width: 450px;
	padding: 25px 0 0;
	text-align:center;
	line-height: 28px;
}
.KVbottomimg{ 
}

}
.KVbottomimg img{
	width: 100%; 
}

.KVpeople{
	display: block;
	position: relative;
	margin-top: -1%;
	margin-left: 30%;

}
.KVmobile{
	display: none;
}
@media (max-width: 1600px) {
.KVcontent{
	display: block;
	width: 100%;
	height: 680px;
	top:80px;
	background: url(../images/kvbg.jpg)no-repeat;
	background-size:cover;
  	background-position:bottom;
  	position:inherit;
}
.KVcontent .KVphoto{
	display: inline-block;
	width: 50%;
	padding: 0 0 0 20px;	
}
.KVcontent .KVphoto img{
 	width: 90%;
}
.KVpeople{
	position: relative;
	margin-top: -5%;
	margin-left: 25%;
}
}
@media (max-width: 1280px) {
.KVcontent{
	display: block;
	width: 100%;
	height: 980px;
	top:100px;
	background:none;
	background-size:cover;
  	background-position:bottom;
  	position:inherit;
}
.KVcontent .KVphoto,.KVpeople{
	display:none;
}


.KVcontent .main{
	width: 700px;
	position: relative;
	margin-top:0%;
	margin-left:30%;
	padding-bottom: 60px;
}

.KVcontent .kvtitlesmail{
	font-size: 3rem;
	letter-spacing: 10px;
}

.KVcontent .kvtitlemeid{
	font-size: 3.5rem;
	letter-spacing: 25px;
}

.KVcontent .kvtitlebig{
	font-size:8rem;
	letter-spacing: 30px;
	margin:20px 0; 

}
.KVcontent p{
	padding: 25px 0 0;
	text-align:center;
	line-height: 28px;
}
}
.KVmobile{
	display:block;
	width: 800px;
	height:auto;
	margin: 0 auto;
	padding-bottom: 100px;
}
.KVmobile img{
	width: 100%;
}

@media (max-width: 991px) {

.KVcontent{
	display: block;
	height:auto;
	
}
.KVmobile{
	display:block;
	width: 100%;
	height:auto;
	margin: 0 auto;
}
.main h1{ width: 100%; text-align: center; }
.KVcontent .main{
	width: 100%;
	position:relative;
	margin:0 auto;
	padding: 10px;
}

.KVcontent .kvtitlesmail{
	font-size: 38px;
	letter-spacing: 5px;
}

.KVcontent .kvtitlemeid{
	font-size:48px;
	letter-spacing: 5px;
}

.KVcontent .kvtitlebig{
	font-size:80px;
	letter-spacing: 20px;
	margin:20px 0; 

}
.KVpc{ display: none; }
.KVm{ display: block; }
.KVcontent p{
	width:100%;
	padding:10px;
	text-align:center;
	line-height: 28px;
}
}

@media (max-width: 375px) {
.KVcontent .kvtitlemeid{
	font-size:42px;
	letter-spacing: 5px;
}
.KVcontent .kvtitlebig{
	font-size:85px;
	margin:20px 0 0 22px; 

}
.KVcontent p{
	width:100%;
	padding:5px;
	text-align:center;
	line-height: 28px;
}

}


@media (max-width: 320px) {

.KVcontent .kvtitlebig{
	font-size:70px;
	margin:20px 0 0 22px; 

}
}
/*--activity活動內容-------------------*/

.act{
	width: 100%;
	background: #C6E29F;
}
.content-m{
	display: none;
}
.act .content{
	display: block;
	padding: 90px 0 0;
	text-align: center;
}

.act .content h3 , .content-m h3{
	line-height: 2.4rem;
	padding: 10px 0;
}

.act .content p  , .content-m p{
	line-height: 1.8rem;
	padding: 10px 0;
}

.act .photo-m{
	display: none;
}
.act .photo{
	display: block;
	width: 1000px;
	margin:0 auto;
}

.act .photo img{
	width: 90%;
}

.act .actimg{
	width: 100%;
	position: relative;
	bottom: 0;
}
.act .actimg img{
	width: 100%;
}
@media (max-width: 1024px) {

.content-m{
	display: block;
	padding: 20px ;
	text-align: center;
}
.act .content-m h3{
	padding-top: 50px;
	line-height: 2.5rem;
	font-size: 1.4rem;
}
.content-m p{ 
	text-align: justify; 
}
.act .content{
	display: none;
}

.act .photo{
	display: none;
}
.act .photo-m{
	display: block;
	width: 100%;
	padding: 10px;

}	
.act .photo-m img{
	width: 100%;}
}



/*-----information----------*/

.info{
	width: 100%;
	background: #F4F4F4;
}
.info h2{
	padding-top: 100px;
}
.info h2,.info h4{
	text-align: center;
}
.info .dategroup{
	width: 400px;
	margin-top: 40px;
	padding-bottom: 20px;
	margin: 0 auto;
}
.info .date{
	width: 400px;
	height: 389px;
	margin:auto;
	background: url(../images/INFOR-dateBG.png)no-repeat;
	background-size:cover;
  	background-position:center;
  	position:inherit;
  	color: #82cfe0;
}

.info .year{
	position: absolute;
	margin-top: 20%;
	margin-left: 40%;
	font-size: 30px;
}


.info .day{
	position: absolute;
	margin-top: 25%;
	margin-left: 20%;
	font-size: 150px;
}


.info .day .smail{
	font-size: 50px;
}

.info .week{
	position: absolute;
	margin-top: 55%;
	margin-left: 70%;
	font-size: 30px;
}


.info .time{
	position: absolute;
	margin-top: 72%;
	margin-left: 30%;
	font-size: 40px;
	color: #3A3A3A;
}
.placegroup{
	text-align: center;
	padding-top: 20px;
	font-size: 20px;

}



.info .palcename {
	font-size: 40px;
	color: #82cfe0;
}
.info .address{
	line-height: 24px;
}


.button {
  border-radius: 4px;
  background-color: #FDA28F;
  border: none;
  color: #FFFFFF;
  text-align: center;
  padding: 10px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin-top: 5px;
  margin-left: 25%;
}

.button span {
 font-size: 28px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover  {
  background-color: #82cfe0;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}


.contact{
	background: #DDD;
	width: 100%;
	height: 100px;
}
	
.runnerimg{
	display: block;
	position: absolute;
	margin-left: 65%;
	margin-top: -15%;
	z-index: 30;
}
.contact a{
 	text-decoration: none; 
 	color: #3A3A3A;
  }

 .contact a:hover{color:#FDA28F;} 

.contact p{
	padding: 20px;
	text-align: center;
	line-height: 24px;
  }

.line{ 
	width: 100%;
	margin-top: -30px; 
	height: 10px; 
	background: #FFF5F0; 
}


@media (max-width: 1205px) {
.runnerimg{
	display:none;
}
}

@media (max-width: 414px) {
.info .dategroup{
	width: 316px;
	margin-top: 40px;
	padding-bottom: 20px;
	margin: 0 auto;
}
.info .date{
	width: 316px;
	height: 308px;

}

.info .year{
	position: absolute;
	margin-top: 20%;
	margin-left: 40%;
	font-size: 30px;
}

.info .day{
	position: absolute;
	margin-top: 25%;
	margin-left: 20%;
	font-size: 110px;
}

.info .day .smail{
	font-size: 50px;
}
.info .week{
	position: absolute;
	margin-top: 55%;
	margin-left: 70%;
	font-size: 30px;
}
.info .time{
	position: absolute;
	margin-top: 72%;
	margin-left: 26%;
	font-size: 36px;
	color: #3A3A3A;
}
.placegroup{
	text-align: center;
	padding-top: 20px;
	font-size: 18px;
}
.info .palcename {
	font-size: 36px;
	color: #82cfe0;
}
.info .address{
	line-height: 24px;
}
.button {
  margin-left: 20%;
}
}

/*----speaker------------*/

.speak{
	width: 100%;
	height:900px;
	padding: 100px 0 0;
	margin:0 auto;
	text-align: center;
}

.speak .group{
 	width: 1050px;
 	margin: 40px auto; 
 }
 .col-md-6{

 }

 .step{
 	height: 60px;
 	width: 100%;
 	background-color: #82CFE0;
 }
 .step h5{
 	padding: 20px 0 0 10px  ;
 	color: #FFF;
 	font-size: 24px;
 	text-align:left;
 }



.introduce{
	background:#FFEFDC ;
	width:100%;
	height:195px;
	margin-top:20px;
	margin-bottom: 20px;
	clip-path: polygon(100% 0, 100% 71%, 90% 100%, 0 100%, 0 0);

}
.photo {
	display: inline-block;
	width: 200px;
	margin-right: 0;
	margin-top:5px;
	padding: 0 10px;
	z-index: 30;
}

.photo img{
	width:100%;
	padding-bottom:0px;

}

.speak  .group .name{
	width: 50%;
	display: inline-block;
	margin-top:0px;
	z-index: 30;
	text-align: left;
}
.speak  .group .name h5{
	font-size: 24px;
}

.speak  .group .name p{
	font-size: 18px;
	padding-top: 10p
}
@media (max-width: 1200px) {
.speak{
	height:800px;
}

}
@media (max-width: 992px) {
.speak{
	height:auto;
}
.speak .group{
 	width:90%;
 	margin: 40px auto; 
 }

.introduce{
	background:#FFEFDC ;
	width:100%;
	height:200px;

}
.photo {
	display: inline-block;
	width: 200px;
	margin-top:5px;
	padding: 0 10px;
}


}



@media (max-width: 600px) {

 .step h5{
 	font-size: 20px;
 }
.speak  .group{
 	width:98%;
 	margin: 40px auto; 
 }

.introduce{
	background:#FFEFDC ;
	width:100%;
	height:auto;

}
.speak  .photo {
	display: inline-block;
	width: 60%;
	margin-top:5px;
	padding: 0 10px;
}
.speak  .group .name{
	width: 90%;
	display: inline-block;
	margin-top:20px;
	z-index: 30;
	text-align:center;
}
.speak .group .name h5{
	font-size: 24px;
}

.speak .group .name p{
	font-size: 18px;
	padding-top: 10px;
}

}

@media (max-width: 370px) {
 .speak  .step h5{
 	font-size: 18px;
}
}
/*------schedule------------*/
.schedule{
	width: 100%;
	text-align: center;
	background-color: #D3F9FA;
}

.schedule h2{
	padding-top:  100px;
}
.col-12{ padding-top: 30px; }
.schedule .group{
	width: 700px;
	margin: 20px auto;

}

.schedule .group .time{
	position: absolute;
	margin-top: 20px;
	z-index: 30;
	width: 200px;
	height: 60px;
	background: #C6E29F;
	border-radius:  50px;
	
}
.schedule .group .time p{
	padding-top: 15px;
	font-size: 20px;
	font-weight: bold;
}

.schedule .group .content{
	position: relative;
	margin-left: 50px;
	width: 650px;
	height: 100px;
	background: #FFF;
	border-radius:  50px;
	text-align: left;
}

.schedule .group .content h5{
	padding-top: 5%;
	font-size: 24px;
	color: #6FAB5C;
}

.schedule .group .content p{
	padding-top: 1%;
}

.schedule .group .title{
	width: 450px;
	margin-left: 160px;
}
.schedule .group .hight h5{
	padding-top: 7%;
}

.schedule .group .big{
	height: 120px;
	border-radius:  60px;
}

.schedule .BG{

	width: 100%;
	}

.schedule .BG img{
	width: 100%;
}

@media (max-width: 785px) {

.schedule .group{
	width: 100%;
}

.schedule .group .time{
	position: absolute;
	margin-top: -30px;
	margin-left: 35%;
	width: 200px;
	height: 60px;
}
.schedule .group .time p{
	padding-top: 15px;
}

.schedule .group .content{
	position: relative;
	margin-left: 0px;
	margin-bottom: 80px;
	width: 100%;
	height: 150px;
	border-radius:  50px;
	text-align: center;
}

.schedule .group .content h5{
	padding-top: 8%;
	font-size: 24px;
	color: #6FAB5C;
}

.schedule .group .content p{
	padding-top: 1%;
}

.schedule .group .title{
	width: 100%;
	margin-left: -1%;

}
.schedule .group .hight {
	height: 100px;	
}
.schedule .group .hight h5{
	padding-top: 6%;
}

.schedule .group .big{
	height: 160px;
	border-radius:  50px;
}


.schedule .group .big .title{
	width: 100%;
}

}

@media (max-width: 650px) {
.schedule .group .hight h5{
	padding-top: 8%;
}
}

@media (max-width:415px) {
.schedule .group{
	width: 100%;
	padding: 0 10px;
}

.schedule .group .time{
	position: absolute;
	margin-top: -30px;
	margin-left: 25%;
	width: 200px;
	height: 50px;
}
.schedule .group .time p{
	padding-top: 10px;
}

.schedule .group .content{
	position: relative;
	margin-left: 0px;
	margin-bottom: 60px;
	width: 100%;
	height: 120px;
	border-radius:  50px;
	text-align: center;
}

.schedule .group .content h5{
	padding-top: 10%;
	font-size: 22px;
	color: #6FAB5C;
}

.schedule .group .content p{
	padding: 2% 10px 0;
	
}

.schedule .group .title{
	width: 100%;
	margin-left: -1%;

}
.schedule .group .hight {
	height: 100px;	
}
.schedule .group .hight h5{
	padding-top: 10%;
}

.schedule .group .big{
	height: 160px;
	border-radius:  50px;
}


.schedule .group .big .title{
	width: 100%;
}
}
@media (max-width:376px) {
.schedule .group .time{
	margin-left: 22%;
}
}

@media (max-width:320px) {
.schedule .group .time{
	margin-left: 16%;
}
.schedule .group .content{
	border-radius:  20px;
}
.schedule .group .content h5{
	padding-top: 12%;
	font-size: 20px;}
}

/* go to top*/



.go-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 18px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  transition: all 0.3s ease-in-out;
  background-color:  #FDA28F;
  cursor: pointer;
  z-index: 999;
}
.go-top a {
  display: block;
  width: 50px;
  height: 50px;
}
.go-top a:before, .go-top a:after {
  content: "";
  display: block;
  width: 18px;
  height: 5px;
  border-radius: 10px;
  background-color: #fff;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 999;
}
.go-top a:before {
  transform: rotate(45deg);
  right: 11px;
}
.go-top a:after {
  transform: rotate(-225deg);
  left: 11px;
}

.go-top:hover {
  background-color: #3A3A3A;
}

@media (max-width: 767px) {
  .go-top {
    width: 40px;
    height: 40px;
    bottom: 40px;
  }
  .go-top a {	
    width: 40px;
    height: 40px;
  }
  go-top a:before, .go-top a:after {
  width: 16px;
}
  .go-top a:before {
    transform: rotate(45deg);
    right: 7px;
  }
  .go-top a:after {
    transform: rotate(-225deg);
    left: 7px;
  }
}