body{
	font-family: "微軟正黑體", sans-serfi;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  color: #263238;
}

a{
	text-decoration: none !important;
}

.container {
  position: relative;
}

.background-video {
  background-position: top center;
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

iframe {
	transition: opacity 500ms ease-in-out;
	transition-delay: 250ms;
}

video,
source {
  bottom: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
}

.loaded .ytplayer-container {
  display: block;
}

.loaded .placeholder-image {
  opacity: 0;
}

.ytplayer-container {
  bottom: 0;
  height: 100%;
  left: 0;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.placeholder-image {
  height: 100%;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}

.ytplayer-shield {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.ytplayer-player {
  position: absolute;
}

.container {
  border-radius: 6px;
  background: rgba(255, 255, 255, .9);
  padding: 80px;
  margin: 30px auto;
}

.content h1 {
    font-size: 62px;
    color: white;
    text-shadow: 0px 1px 10px rgba(0,0,0,0.8);
}

.lead {
    line-height: 2;
	text-align: justify;
}

.img-style{
	position: relative; 
	top: -126px; 
	z-index: 999;
	left: 0px
}

ul li, ol li{
	text-align: left;
}

ul.progress-tracker li{
	text-align: center;
}

#main h1, #main h2, #main h3, #main h4, #main h5, #main h6{
	text-align: center;
}

#day, #hour, #min, #sec {
	padding: 15px;
    color: #FFFFFF;
	font-weight:bold;
	background-color: #000;
	margin: 15px;
	border-radius: 6px;
	line-height:66px;
}

.font3{
	color: #FFFFFF;
	font-weight:bold;
}

.text-center{
	text-align: center;
}

#footer h2, .label{
	color: #111 !important;
}

#footer p, #footer ul li{
	text-align: center !important;
	list-style: none !important;
	font-weight: 500;
}

.desktop{
	display: block;
}
		
.mobile{
	display: none;
}

@media screen and (max-width: 768px){
	#day, #hour, #min, #sec {
		padding:5px;
		color: #FFFFFF;
		font-weight:bold;
		background-color: #000;
		font-size: 18px;
		margin: 5px;
		border-radius: 6px;
		line-height:66px;
	}	
	.font3{
		color: #FFFFFF;
		font-weight:bold;
		font-size: 12px;
	}
	
		#main input[type="submit"],
		#main input[type="reset"],
		#main input[type="button"],
		#main button,
		#main .button {
			background-color: transparent;
			box-shadow: inset 0 0 0 1px #dddddd;
			color: #636363 !important;
			font-size: 16px;
			text-decoration: none;
			word-spacing: pre;
		}
		
		.desktop{
			display: none;
		}
		
		.mobile{
			display: block;
		}
		
		ul{
			margin-left: 1em;
		}
	
}
.wraps {
	position: fixed;
	top: 30%;
	right: 0;
	width: 300px;
	margin: 10px auto;
	text-align: center;
	display: block;
}
.card-body {
    margin-bottom: 40px;
	text-align: left;
}

button.btn.btn-link {
    width: 100%;
	text-align: left;
}

.circle_wrap {
	display: inline-block;
	width: 220px;
	height: 220px;
	position: relative;
	margin: 10px;
}
.circle, .circle_inner, .circle_wrap img {
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	position: absolute;
	cursor: pointer;
}
.circle {
	width: 210px;
	height: 210px;
	border: 8px solid;
	border-color: #fff #17b6c0;
	opacity: .3;
	box-shadow: 0 0 20px #aaa;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;	
	transition: all 0.5s ease-in-out;
}
.circle_inner {
	border: 5px solid;
	margin: 0;
	border-color: #fff #17b6c0;
	width: 200px;
	height: 200px;
	top: 8px;
	left: 8px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
.circle_wrap img {
	opacity: 0.8;
	top: 13px;
	left: 13px;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
}
.circle_wrap:hover .circle {
	border-color: #fff #3f2371;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	transform: rotate(360deg);
}
.circle_wrap:hover .circle_inner  {
	border-color: #fff #3f2371;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	-ms-transform: rotate(315deg);
	-o-transform: rotate(315deg);
	transform: rotate(315deg);
}
.circle_wrap:hover img {
	opacity: 1;
}

.circle_wrap:before {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translate(100%, -50%);
    -ms-transform: translate(100%, -50%);
    transform: translate(100%, -50%);
    width: 60px;
    height: 2px;
    background: #fff; 
}

.fancybox-media{
	z-index: 9999 !important;
}

@media screen and (max-width:992px){
	.wraps{
		display: none;
	}
}