.background {
	background: url(../images/card-bg.jpg) no-repeat;
	background-position: center;
	background-size: cover;
	height: 100vh;
	width: 100%;
	filter: blur(10px);

	position: fixed;
}

.content {
	display: flex;
	flex-direction: column;
	position: relative;
}

.container {
	/*
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	*/
	width: 80%;
	max-width: 1200px;
	min-height: 605px;
	margin-top: 20px;
	/*background: blue;*/
	background: url(../images/card-bg.jpg) no-repeat;
	background-position: center;
	background-size: cover;
	border-radius: 20px;
	overflow: hidden;

	display: flex;
	justify-content: center;
	align-items: center;

	padding: 10px;
}

.container-header, .container-footer {
	height: 100px;
	width: 100%;
}

.item {
	/*
	position: absolute;
	top: 0;
	left: 0;
	width: 58%;
	height: 100%;
	*/
	color: #fff;
	/*background: green;*/
	background: transparent;
	/*padding: 40px;*/
	display: flex;
	justify-content: center;
	flex-direction: column;

	width: 100%;
}

.item .logo {
	color: #fff;
	font-size: 3rem;
	font-weight: 600;

	text-align: center;
	word-break: keep-all;
	margin-bottom: 3rem;
}

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

.text-item h2 {
	font-size: 2rem;
	line-height: 1;

	font-weight: 600;
	text-align: center;

	word-break: keep-all;
}

.text-item p {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 20px 0;

	word-break: keep-all;
}

.text-item div {
	font-size: 1.5rem;
	font-weight: 600;
}

.text-item .yellow {
  color: yellow;
}

.text-item .white {
  color: white;
}

.text-item .addr {
	font-weight: normal;
	word-wrap: break-word;
}

.text-item .schedule {
	font-size: 1rem;
	font-weight: 500;
  color: white;
}

.schedule span {
	word-wrap: break-word;
}

.social-icon a i {
	color: #fff;
	font-size: 24px;
	margin-left: 10px;
	cursor: pointer;
	transition: .5s ease;
}

.social-icon a:hover i {
	transform: scale(1.2);
}


@media (max-width: 575px) {
	.col-xs-12 {
		text-align: center;
		padding: 0;
	}
}

@media (min-width: 576px) {
	.col-sm-12 {
		text-align: center;
		padding: 0;
	}
}

@media (min-width: 768px) {
	.col-md-4, .col-md-5 {
		text-align: right;
	}

	.col-md-8, .col-md-7 {
		text-align: left;
		padding-left: 5px;
	}
}

svg {
	font-weight:bold;
	max-width:600px;
	height:auto;
	margin: 0 auto;
}


.social-card {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

.social-web {
	display: flex;
	align-items: center;
	justify-content: center;
	/*flex-direction: row;*/
	flex-wrap: wrap;

	margin: 5px;
}

.social-web img, .social-web div, .social-web a {
	margin: 5px;
}

.social-web div, .social-web a {
	color: white;
}

.social-web .web-title {
	text-align: center;
}

.social-qrcode {
	display: flex;
	align-items: center;
	justify-content: center;
	/*flex-direction: row;*/
	flex-wrap: wrap;

	margin: 5px;
}

.social-qrcode div {
	margin: 5px;
}

.social-qrcode a {
	margin: 5px;
	text-decoration: none;
	color: white;
}

.social-qrcode .qrcode {
	display: flex;
	/*align-items: center;*/
	justify-content: center;
	flex-direction: column;
}

.qrcode img {
		margin: 0 auto;
}

.qrcode div {
	text-align: center;
	border: 1px solid;
	border-radius: 20px;
	padding-left: 10px;
	padding-right: 10px;
}

.qrcode-web div {
	background-color: #549ccc;
}

.qrcode-fb div {
		background-color: #5055c7;
}

.qrcode-line div {
	background-color: #50973d;
}

.qrcode-ig div {
	background-color: #bf3979;
}


.move-float {
	animation: movefloat 5s linear 1;
	animation-delay: 0.5s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-title {
	animation: movedown 1s linear 1;
	animation-delay: 0.5s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-subtitle {
	animation: moveright 1s linear 1;
	animation-delay: 1s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-addr {
	animation: moveleft 1s linear 1;
	animation-delay: 1.5s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-schedule {
	animation: moveup 1s linear 1;
	animation-delay: 2s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-logo {
	animation: moveright 1s linear 1;
	animation-delay: 2.5s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-logo-web {
	animation: moveleft 1s linear 1;
	animation-delay: 3s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-qrcode-web {
	animation: moveright 1s linear 1;
	animation-delay: 3.5s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-qrcode-fb {
	animation: moveup 1s linear 1;
	animation-delay: 4s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-qrcode-line {
	animation: moveup 1s linear 1;
	animation-delay: 4.5s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

.move-qrcode-ig {
	animation: moveleft 1s linear 1;
	animation-delay: 5s; /*為了晚N秒才出現*/
	visibility: hidden; /*因為晚N秒才出現，但一開始還是會有在畫面上，所以先hidden*/
	animation-fill-mode: forwards; /*因為hidden後，動畫跑玩了，最後又hidden，所以加此*/
}

@keyframes movefloat {
  0% {
    transform: translateX(-100px);
    visibility: visible;
  }
	25% {
		transform: translate(-50px, -50px);
		visibility: visible;
	}
	50% {
		transform: translate(-75px, 25px);
		visibility: visible;
	}
	70% {
		transform: translate(25px, 25px);
		visibility: visible;
	}
  100% {
    transform: translate(0, 0);
    visibility: visible;
  }
}

@keyframes movedown {
  0% {
    transform: translateY(-50px);
    visibility: visible;
  }
  100% {
    transform: translateY(0);
    visibility: visible;
  }
}

@keyframes moveup {
  0% {
    transform: translateY(100px);
    visibility: visible;
  }
  100% {
    transform: translateY(0);
    visibility: visible;
  }
}

/*直式*/
/*
@keyframes moveup {
  0% {
    transform: translateY(100px) rotate(-90deg);
    visibility: visible;
  }
  100% {
    transform: translateY(0) rotate(-90deg);
    visibility: visible;
  }
}
*/

@keyframes moveleft {
  0% {
    transform: translateX(100px);
    visibility: visible;
  }
  100% {
    transform: translateX(0);
    visibility: visible;
  }
}


@keyframes moveright {
  0% {
    transform: translateX(-100px);
    visibility: visible;
  }
  100% {
    transform: translateX(0);
    visibility: visible;
  }
}

@keyframes zoomin {
  0% {
    transform: scale(0.5);
    visibility: visible;
  }
  100% {
    transform: scale(1);
    visibility: visible;
  }
}