* {font-family: 'Heiti TC', 'Microsoft JhengHei';}
body, html{background-color:#fff;margin: 0px;}

.container{margin:auto;}
.banner,.detail {width: 100%;max-width: 1200px;margin: auto;}
.header { width: 100%; /*background:#fff; */ text-align: center;    /*border-top: 4px solid #cf9c2f;*/}
.header img{width: 800px;padding:10px 0px}
.top_title,.top_title2 { width: 100%;  text-align: center;    }
.top_title img{width: 700px;padding:10px 0px}
.top_title2 img{width: 850px;/*padding:10px 0px*/}

.banner img{width:100%;border-radius: 10px;}
.detail {color:#fff; background-size: cover;height: 1000px;}
.detail_area{ float: left;width: 100%;background:url(img/ex_bg.jpg) center top repeat-x;}

.tvb{text-align: center;}
.tvb img{width:400px;padding: 10px;}

a.btn_link {text-decoration: none; color:#fff}
a.btn_link:hover {}
.btn01 {border-radius: 28px;border: 3px solid #cc9c30;text-align: center;padding:20px 0px ;font-weight: bold;font-size: 30px;margin:5px 5px;   text-align: center;}

.btn01:hover {border:3px solid #b2882b;background:url(img/button_bg_hover.png)/*background:#156ba5;*/}
.yellow{color:#fff700;font-size:26px;padding: 0px 20px;font-weight: bold;}
.video_item_b{box-shadow: 0px 0px 10px #ddd;border-radius: 5px;}
.video_item{/*border-bottom: 5px solid #e18e27;*/}
.video_item {float:left;background:#fffdee;width:45%;  margin: 2%;padding: 0.5%;}
.video_item:hover {background:#fff;box-shadow: 0px 0px 10px #f4f4f4;}
.video_item_b{float:left;background:#fff;width:65%;  margin: 2%;padding: 0.5%;margin: 60px 0px 60px 0px;margin-left: 2%;}
.video_side_img {float:left;width:30%;}
.video_content {color:#333;font-size:18px;font-weight:bold;padding: 10px 0px;}

.top_area{/*padding:20px 0px*/width: 100%;}
.video_area{width:100%;margin-bottom:0px;}
.top_area,.video_area,.v_item_gp,.v_item_gp2,.v_item_content,.v_item_pdf{float:left;}
.top_banner img{width:100%}

.title { font-size: 25px;font-weight:bold;letter-spacing: 5px; color: #EAA52E;width: 99%;padding-top: 18px;border-bottom: 2px solid #EAA52E;}

.video_item2_01{float:left;background:#fff;width:65%;  margin: 2%;padding: 0.5%;}
.video_pdf{width:30%;border-radius: 8px; border: 2px solid #fff;background: #f1bb00; text-align: center; padding: 10px; font-weight: bold;font-size: 18px; text-align: left;}
.video_item2_01:hover{background:#f1bb00}
.video_img2{width:100%; float:left}
.video_txt2{width:30%; position: absolute;padding-top: 252px;}	
.video_item2_01,.video_img2 img{border-radius: 10px 10px }

.video_img, .video_txt{width:50%; float:left}
.video_img img{width:100%}
.video_txt h1{color:#333;font-size:28px;font-weight:bold; border-bottom: 2px solid #ad0001;}
.video_txt h2{color:#b60005;font-size:23px;font-weight:bold;padding:10px 0px }
.video_txt h1,.video_txt h2{margin: 0px 10px;}

.icon01,.icon02,.icon03{ display: block; width: 30px;height: 30px; float: right;}
.icon01{background:url(img/icon_youtube.png) no-repeat; }
.icon02{background:url(img/icon_wechat.png) no-repeat; }
.icon03{background:url(img/icon_download.png) no-repeat; }

.btn_start {text-align: center;}
.btn_start img {width:90%}

a, .btn01, .video_item,.video_item2_01,.top_area {
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -ms-transition: all 0.25s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}

.top_banner{float:left;width:100%}
.top_content{float:left;width:100%}

.top_left,.top_right{float: left;}
.top_left{width: 40%;margin-top: -20px;}
.top_right{width: 60%;}
.top_left img,.top_right img{width: 100%;}	

.top_content{font-size: 20px; color: #fff;line-height: 34px;margin-top: 10px;font-weight:bold;text-align: justify;/*margin: 0px 20%;*/}
.top_content p{margin:0px}
.table01{font-size: 16px;}
.top_content h2{color:#b60005;margin: 20px 0px 10px 0px;font-size: 25px;}

.table_style {background:#cf9c2f;text-align:center;color: #fff; }
.table01{ background:#F2F2F2;color:#333;font-size:20px;border-radius: 10px 10px;}
.table01 tr td{padding:8px ;font-weight: bold;}
.small{font-size:13px;color:#888;padding: 10px;text-align:right}

.contentContainer_grey1 {width: 100%; background: #fff;margin-top: -10px;float: left;border-radius: 30px;}
.insideContainer {width: 100%; margin: 0px auto; float: left;}
.title_yellow1 {font-size: 46px;color: #177abd;;padding-top: 48px;text-align: center;}
.upcomingEventTable {width: 765px;padding-top: 35px;border-collapse: separate;}
.upcomingEventTable3 {background:#177abd;background-image: linear-gradient(#177abd, #1d96e8);border: 5px solid #57afeb;width: 865px;border-collapse: separate;color:#fff;border-bottom-left-radius: 30px;border-bottom-right-radius: 30px;}

.vertBar { background-image: linear-gradient(#177abd, #fff);
/*background: #177abd;*/}

.upcomingEventsWord2 {padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #177abd;;  padding-left: 15px;font-size:23px;color:#177abd;;font-weight:bold}
.upcomingEventsDate2 {/*padding-left: 57px;*/padding-top: 10px;border-bottom: 2px solid #177abd;;font-size: 28px;font-weight:bold;color:#fff;/*background:#177abd;border-radius: 8px;*/}
.upcomingEventsTitle3 {padding-top: 10px; padding-bottom: 10px;  padding-left: 20px;font-size:25px;color:#fff;;font-weight:bold}
.upcomingEventsContent3 {padding-left: 15px;padding:10px 20px;;font-size: 23px;font-weight:bold;color:#fff;/*background:#177abd;border-radius: 8px;*/}
.video_name {background:#177abd;border-radius: 8px;padding: 2px 30px;}

.upcomingEventsWord {padding-top: 10px;padding-bottom: 10px; border-bottom: 2px dashed #f1f1f1; font-size: 20px;color:#333;font-weight:bold; line-height: 35px;text-align: justify;}
.upcomingEventsWord img{border-radius: 20px;}
.upcomingEventsDate {padding-left: 57px;padding-top: 10px; border-bottom: 2px dashed #f1f1f1;font-size: 18px;color:#333}
.upcomingEventTable {width: 865px;padding-top: 35px; border-collapse: separate;}
.upcomingEventTable2 {width: 90%;padding-top: 35px;border-collapse: separate;}

.bold{color:#57afeb;font-size:22px}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px; 
  z-index: 99;  height: 45px;
    width: 45px;
  outline: none;background: #177abd;cursor: pointer;  padding: 5px; border-radius: 50px;
  /*border-bottom: 3px solid #d79d2f; */
}

#myBtn:hover {background-color: #14659c; /* Add a dark-grey background on hover */}

.add_astronaut {   width: 293px;
    height: 240px;
    background: url(img/astronaut.png) center no-repeat;
    background-size: cover;
    position: absolute;
    z-index: -1000;
    margin-top: -48px;
    right: 0px;}

.btn01 {margin:auto; display: block;width:700px;background:url(img/button_bg.png)}	

.avatar1 {animation: float1 6s ease-in-out infinite;}
.avatar2 {animation: float2 3s ease-in-out infinite;}
.avatar3{animation: float3 7s ease-in-out infinite;}
.avatar_fast{animation: float_fast 1s ease-in-out infinite;}
.avatar_fly{animation: float_fly 8s ease-in-out infinite;}
	

@keyframes float1 {
	0% {transform: translatey(0px);}
	50% {transform: translatey(-20px);}
	100% {transform: translatey(0px);}
}
@keyframes float2 {
	0% {transform: translatey(-10px);}
	50% {transform: translatey(0px);}
	100% {transform: translatey(-10px);}
}	

@keyframes float3 {
	0% {transform: translatey(-10px);}
	50% {transform: translatey(0px);}
	100% {transform: translatey(-10px);}
}	

@keyframes float_fly {
	0% {transform: translatex(50px);}
	50% {transform: translatex(0px);}
	100% {transform: translatex(50px);}
}	
	
@keyframes float_fast {
	0% {transform: translatey(-20px);}
	50% {transform: translatey(0px);}
	100% {transform: translatey(-20px);}
}		


.episode_date,.episode_name,.episode_date2,.episode_name2{width:50%;padding: 0.5% 0%;}
.episode_date,.episode_name {float:left}
.episode_date2,.episode_name2 {float:right}

.episode_name2,.episode_date{text-align: right;}
.episode_name_txt,.episode_name2_txt{background: #177abd; border-top-left-radius: 8px;border-top-right-radius: 8px;padding:1% 2.5%; }
.episode_date,.episode_date2{color:#177abd;}
.episode_date_txt,.episode_date2_txt {font-size:20px}

.img_right{width:40%;margin-left:2%;margin-bottom:2%;float:right}
.img_left{width:40%;margin-right:2%;margin-bottom:2%;float:left}

.footer_new{width:100%; height:700px;background: url(img/bg_bottom.png) top center no-repeat;background-size: cover;margin-top:-120px;float: left;}

.footer_new_content{width:50%; height:700px;/*background:#ddd;*/margin: auto;text-align:center }
.footer_new_space{width:100%; height:450px;/*background:#cdcdcd;*/margin: auto;text-align:center }

.footer_btn {width:100%; /*height:150px;background:#000;*/margin: auto;text-align:center;border-radius:40px;font-size:50px;/*border:5px solid #fff*/
border:5px solid #177abd;background:#feffca}
.footer_btn a {color:#177abd;text-decoration: none;font-weight: bold;}

.footer_btn:hover {border:5px solid #fff;background:#177abd }
.footer_btn:hover a{ color:#fff}





@media only screen and (max-width: 980px) {
 .detail_right, .detail_left,.detail_right2, .detail_left2,.top_area, .top_title img  ,.top_title2 img,.top_left,.top_right {
    width: 100%;
} 
.top_left {margin:0px}
.header img{width: 100%;padding:10px 0px}

.detail_left h2,.detail_right h2 {font-size:25px}

.big1,.big2{font-size:24px}

.tvb img{width:70%}
.video_img, .video_txt{width:100%; float:left}
.video_item_b, .video_item{width:95%;  margin: 2%;padding: 0.5%;border-radius: 5px;}
.video_item {margin-bottom:50px;}
.video_item2_01{float:left;background:#fffdee;width:100%; padding: 0.5%;}
.video_img2{width:100%; float:left}
.video_txt2{width:100%; float:left;    position: initial;}

.top_banner{text-align: center;width:100%}
.top_banner img{text-align: center;width:100%}
.top_content{/*background:#fff;*/width:90%;padding:2% 5%;margin:0%}

.video_txt2{padding:0px}
.v_item_content{width:99%}

.upcomingEventTable,.upcomingEventTable3{width:100%}

.title_yellow1 {display:none}

.add_astronaut{
width: 100%;
    height: -webkit-fill-available;
}
	.footer{height:150px}
	
.btn01{width:100%}	
	
.img_right,.img_left{width:100%;margin:0px}

.upcomingEventsWord{padding:10px}
.upcomingEventsWord img{width: 100% !important;}
	
.episode_name,.episode_date,.episode_name2,.episode_date2 {width: 95%;padding:1% 2.5%;}
.episode_name,.episode_date {float: left;}
.episode_name2,.episode_date2 {float: right;}
.episode_name_txt,.episode_name2_txt  {width: 95%;float: left;}
.episode_name2,.episode_date{text-align: left;}
	

.footer_new,.footer_new_content{width:100%}
.footer_btn{width:90%}

.footer_btn {height: auto;border:5px solid #177abd;background:#fff }
.footer_btn a {color:#177abd; font-size: 33px;font-weight: bold;}
}






 /* Slideshow container */
 
.slideshow-container {
 /* max-width: 1000px;*/
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  background:#177abd;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom:20px;
  width: 100%;
  text-align: center;
}
.mySlides {
  display:none;
}
.active-slide {
  display:block;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}