*{
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */

  -webkit-user-drag: none; /* Safari 3.1+ */
	-moz-user-drag: none; /* Firefox 2+ */
	-ms-user-drag: none; /* IE 10+ */
	user-drag: none;
}

html{
	font-family: Microsoft JhengHei !important;
	font-size: 16px;
}

body{
	margin: 0;
	//height: 100vh;
	position: relative;
	background-image: url(../img/bg.png);
}


/*centering main container
=====================================================================*/
.mainContainer{
	/*
	max-width: 1380px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	*/

	display: flex;
	width: 100%;
	min-height: 100vh;

	justify-content: center;
	align-items: center;
	//background: lightblue;
}

.mainContainerWrapper{
	width: 80%;
	//background: lightpink;
	/*
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	//justify-content: space-evenly;
	background: lightsalmon;

	align-items: center;
	*/
	/*
	max-width: 1380px;
	width: 100%;
	*/
}

.contentWrapper{
	width: 100%;
	display: flex;
	//background: lightgrey;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	column-gap: 100px;
	row-gap: 100px;
	/*
	max-width: 1860px;
	width: 100%;
	margin: 50px auto;
	*/
	/*
	background: lightgoldenrodyellow;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	column-gap: 50px;
	row-gap: 50px;
	*/
}

/*man logo setup and dot animation
=====================================================================*/
.mainLogo{
	max-width: 160px;
	width: 100%;
}

.dot{
	max-width: 60px;
	width: 100%;
	vertical-align: 20px;
	animation: dotAppear 0.8s linear;
}

@keyframes dotAppear {
	0%{
		clip-path: polygon(64% 46%, 69% 45%, 73% 46%, 77% 50%, 77% 55%, 74% 59%, 69% 59%, 64% 59%, 62% 56%, 61% 50%);
	}
	100%{
		clip-path: polygon(0 0, 37% 3%, 73% 1%, 95% 11%, 100% 54%, 93% 90%, 68% 100%, 31% 100%, 0 100%, 15% 54%);
	}
}

/*content container setup
=====================================================================*/
.firstContainer, .secondContainer{
	//display: inline-block;
	//vertical-align: top;
}

.firstContainer{
	//margin-left: 95px;
}

.seconContainer{
	//margin-right: 95px;
}

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

.contentWrapper a{
	text-decoration: none;
}

/*footer setup
=====================================================================*/
.footerContainer{
	/*
	display: flex;
	align-items: center;
	justify-content: center;
	*/

	text-align: center;
	margin-top: 80px;
}

.footerMail{
	display: inline-block;
	margin-left: 40px;
}

.fbIcon {
	margin-left: 40px;
}

.footerContainer img{
	width: 28px;
	vertical-align: middle;
}

/*first container
=====================================================================*/
/*cow setup
=====================================================================*/
.firstContainer{
	max-width: 360px;/*720px;/*572px*/
	width: 100%;
	height: 100%;
}

.bkgContainer{
	position: relative;
}

.cowContainer{
	position: absolute;
	top: 30%;
	left: 10%;
	animation-name: moveCow;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.cowContainer img{
	position: absolute;
}

.exclaim{
	bottom: -6px;
	left: 52px;
	animation-name: showExclaim;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.string1, .string2{
	bottom: -2px;
	left: 35px;
}

.string1{
	animation-name: showString1;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.string2{
	animation-name: showString2;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.cow1{
	top: 0;
	left: 0;
	animation-name: swapCow1;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

.cow2{
	top: 0;
	left: 0;
	animation-name: swapCow2;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}


/*horse setup
=====================================================================*/
.horseContainer{
	position: absolute;
	top: 54%;
	right: 31%;
}

.horseContainer img{
	position: absolute;
}

.horse1{
	animation-name: swapHorse1;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

.horse2{
	animation-name: swapHorse2;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

.horse3{
	animation-name: swapHorse3;
	animation-duration: 0.7s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: linear;
}

/*logo setup
=====================================================================*/
.firstContainer .logoContainer{
	/*background: green;*/
	/*
	width: 75%;
	height: 94px;
	margin: 0 auto;
	*/

	height: 115px;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

.firstContainer .logoContainer img{
	opacity: 0;
	/*
	margin-right: 25px;
	*/
}

.firstContainer .logoContainer img:last-child{
	/*margin-right: 0px;*/
}

.logo1{
	animation-name: moveLogo1;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.logo2{
	animation-name: moveLogo2;
	animation-delay: 0.3s;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.logo3{
	animation-name: moveLogo3;
	animation-delay: 0.6s;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.logo4{
	animation-name: moveLogo4;
	animation-delay: 0.9s;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

/*second container
=====================================================================*/
.secondContainer{
	max-width: 360px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.secondContainer .logoContainer {
	margin-top: 18px;
}

.arrowContainer{
	position: absolute;
	margin-left: 150px;
	top: -70px;

}

.arrow1{
	animation-name: shootingArrow1;
	animation-fill-mode: forwards;
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow2{
	animation-name: shootingArrow2;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow3{
	animation-name: shootingArrow3;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow4{
	animation-name: shootingArrow4;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow5{
	animation-name: shootingArrow5;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow6{
	animation-name: shootingArrow6;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow7{
	animation-name: shootingArrow7;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow8{
	animation-name: shootingArrow8;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow9{
	animation-name: shootingArrow9;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow10{
	animation-name: shootingArrow10;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow11{
	animation-name: shootingArrow11;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.arrow12{
	animation-name: shootingArrow12;
	animation-fill-mode: forwards;
	
	animation-duration: 8.3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.secondContainer .logoContainer{
	position: relative;
	max-width: 248px;
	width: 100%;
	margin: 0 auto;
}

.logoArrow{
	position: absolute;
	top: 11px;
	right: -115px;
	animation: moveLogoArrow 0.4s 1.5s forwards linear;
}

/*third container
=====================================================================*/
.thirdContainer{
	//background: red;
	overflow: hidden;
	text-align: center !important;
	width: 260px !important;
}

.thirdBkg{
	//opacity: 0;
	//animation: moveKCName 1s 0.3s forwards ease;
}

/*.KCName{
	opacity: 0;
	animation: showKCName 1s 1s forwards ease;
}

@keyframes showKCName{
	0%{
		opacity: 0
	}
	100%{
		opacity: 1;
	}
}*/

.KCName{
	margin-top: 15px;
}

.kWord{
	display: inline-block; 
	position: relative;
	opacity: 0;
	animation: kcjAnimate 1.5s 0.4s forwards;
}

.cWord{
	opacity: 0;
	animation: kcjAnimate 1.5s 0.8s forwards;
}

.jWord{
	opacity: 0;
	animation: kcjAnimate 1.5s 1.2s forwards;
}

@keyframes kcjAnimate{
	0%{
		transform: scale(0);
		opacity: 0;
	}
	25%{
		transform: scale(0.99);
		opacity: 1;
	}
	30%{
		transform: scale(1.1);
		opacity: 1;
	}
	70%{
		transform: scale(0.99);
		opacity: 1;
	}
	100%{
		transform: scale(0.99);
		opacity: 1;
	}
}



/*.KCName>span{
	font-size: 18px;
	margin-left: 115px;
	//background: yellow;
	opacity: 0;
	animation: readyAni 1s 1.5s forwards ease;
}*/

.logo_open{
	transform-origin: left;
	animation: openLogoLeft 5.5s forwards ease-in;
}

.logo_open2{
	transform-origin: left;
	animation: openLogoLeft 3s forwards ease;
}

.logo_open3{
	transform-origin: left;
	animation: openLogoLeft 6.5s forwards cubic-bezier(.95,.58,.95,1.05);
}


.smoke1{
	opacity: 1;
	animation: smoke1Animate 3s 1s infinite;
}

.smoke2{
	opacity: 0;
	animation: smoke2Animate 3s 1.5s forwards;
}

.smoke3{
	opacity: 1;
	animation: smoke1Animate 3s 2.5s forwards;
}

@keyframes smoke1Animate{
	0%{
		opacity: 1;
	}
	50%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@keyframes smoke2Animate{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}


/*last smoke setup==================================*/
.smoke11, .smoke12, .smoke13, .smoke14, .smoke15, .smoke16 {
	position: absolute; 
	top: 0; 
	left: 0;
}



.smoke11{
	opacity: 0;
	transform-origin: 35% 50%;
	animation: smoke111Animate 3s 2.5s forwards;
}

.smoke12, .smoke13, .smoke14, .smoke15, .smoke16{
	opacity: 0;
	z-index: 20;
}

.smoke12{
	left: 5px !important;
	animation: smoke11Animate 4s forwards;
}

.smoke13{
	left: 5px !important;
	animation: smoke11Animate 4s 0.5s forwards;
}

.smoke14{
	left: 5px !important;
	animation: smoke11Animate 4s 1s forwards;
}

.smoke15{
	left: 5px !important;
	animation: smoke11Animate 3s 1.5s forwards;
}

.smoke16{
	left: 5px !important;
	animation: smoke11Animate 3s 2s forwards;
}

@keyframes smoke111Animate{
	0%{
		opacity: 0;
		transform: scale(0.3, 0.5);
	}
	40%{
		opacity: 0.7;
		transform: scale(1, 1);
	}
	100%{
		opacity: 1;
		transform: scale(1, 1);
	}
}

@keyframes smoke11Animate{
	0%{
		opacity: 0;

	}
	50%{
		opacity: 0.5;
	}
	100%{
		opacity: 0;

	}
}


/*@keyframes smoke11Animate{
	10%{
		opacity: 1;
	}
	40%{
		opacity: 0;
	}
	50%{
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	70%{
		opacity: 0;
	}
	80%{
		opacity: 0;
	}
	90%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}

@keyframes smoke12Animate{
	10%{
		opacity: 0;
	}
	40%{
		opacity: 1;
	}
	70%{
		opacity: 0;
	}
	80%{
		opacity: 0;
	}
	90%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}

@keyframes smoke13Animate{
	10%{
		opacity: 0;
	}
	20%{
		opacity: 0;
	}
	30%{
		opacity: 0;
	}
	60%{
		opacity: 1;
	}
	90%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}

@keyframes smoke14Animate{
	10%{
		opacity: 0;
	}
	20%{
		opacity: 0;
	}
	50%{
		opacity: 0;
	}
	80%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}*/


/*first container animation
=====================================================================*/
@keyframes moveCow {
	0%{
		opacity: 0;
	}
	30%{
		opacity: 0;
	}
	35%{
		opacity: 1;
		transform: translate(0px, 0px);
	}
	52%{
		transform: translate(62px, 0px);
	}
	53%{
		transform: translate(60px, 3px);
	}
	54%{
		transform: translate(62px, 0px);
	}
	90%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translate(180px, 0px);
	}
}

@keyframes swapCow1 {
	0%{
		opacity: 1;
	}
	50%{
		opacity: 1;
	}
	55%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}

@keyframes swapCow2 {
	0%{
		opacity: 0;
	}
	45%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
	}
}

@keyframes showExclaim {
	0%,49%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	51%{
		opacity: 1;
	}
	53%{
		opacity: 1;
	}
	54%,100%{
		opacity: 0;
	}
}

@keyframes showString1 {
	0%,51%{
		opacity: 0;
	}
	52%{
		opacity: 1;
	}
	53%{
		opacity: 0;
	}
	54%{
		opacity: 1;
	}
	55%{
		opacity: 0;
	}
	56%{
		opacity: 1;
	}
	57%,100%{
		opacity: 0;
	}
}

@keyframes showString2 {
	0%,51%{
		opacity: 0;
	}
	52%{
		opacity: 0;
	}
	53%{
		opacity: 1;
	}
	54%{
		opacity: 0;
	}
	55%{
		opacity: 1;
	}
	56%{
		opacity: 0;
	}
	57%,100%{
		opacity: 0;
	}
}

@keyframes swapHorse1 {
	0%,33%{
		opacity: 1;
	}

	34%{
		opacity: 0;
	}
	100%{
		opacity: 0;
	}
}

@keyframes swapHorse2 {
	0%,33%{
		opacity: 0;
	}

	34%,66%{
		opacity: 1;
	}
	67%,100%{
		opacity: 0;
	}
}

@keyframes swapHorse3 {
	0%,33%{
		opacity: 0;
	}

	34%,66%{
		opacity: 0;
	}
	67%,100%{
		opacity: 1;
	}
}

@keyframes moveLogo1 {
	0%{
		opacity: 0;
	}
	10%,100%{
		opacity: 1;
	}
}

@keyframes moveLogo2 {
	0%{
		opacity: 0;
	}
	10%{
		opacity: 1;
		transform: translateY(0);
	}
	100%{
		opacity: 1;
		transform: translateY(20px);
	}
}

@keyframes moveLogo3 {
	0%{
		opacity: 0;
	}
	10%{
		opacity: 1;
		transform: translateY(0);
	}
	100%{
		opacity: 1;
		transform: translateY(36px);
	}
}

@keyframes moveLogo4 {
	0%{
		opacity: 0;
	}
	10%,100%{
		opacity: 1;
	}
}

/*second container animation
=====================================================================*/
@keyframes shootingArrow1 {
	0%, 28%{
		transform: translate(250px, 0) rotate(35deg);
	}
	30%, 100%{
		transform: translate(100px, 120px) rotate(35deg);
	}
}

@keyframes shootingArrow2 {
	0%, 28%{
		transform: translate(250px, 20px) rotate(40deg);
	}
	30%, 100%{
		transform: translate(120px, 130px) rotate(45deg);
	}
}

@keyframes shootingArrow3 {
	0%, 30%{
		transform: translate(150px, 0) rotate(30deg);
	}
	32%, 100%{
		transform: translate(50px, 150px) rotate(25deg);
	}
}

@keyframes shootingArrow4 {
	0%, 30%{
		transform: translate(80px, 0) rotate(25deg);
	}
	32%, 100%{
		transform: translate(30px, 110px) rotate(25deg);
	}
}

@keyframes shootingArrow5 {
	0%, 26%{
		transform: translate(130px, 0) rotate(40deg);
	}
	28%, 100%{
		transform: translate(0px, 160px) rotate(45deg);
	}
}

@keyframes shootingArrow6 {
	0%, 26%{
		transform: translate(110px, 0) rotate(40deg);
	}
	28%, 100%{
		transform: translate(50px, 110px) rotate(20deg);
	}
}

@keyframes shootingArrow7 {
	0%, 26%{
		transform: translate(110px, 0) rotate(50deg);
	}
	28%, 100%{
		transform: translate(-90px, 160px) rotate(50deg);
	}
}

@keyframes shootingArrow8 {
	0%, 30%{
		transform: translate(10px, 0) rotate(20deg);
	}
	32%, 100%{
		transform: translate(-70px, 160px) rotate(20deg);
	}
}

@keyframes shootingArrow9 {
	0%, 28%{
		transform: translate(300px, 0) rotate(50deg);
	}
	30%, 100%{
		transform: translate(70px, 180px) rotate(50deg);
	}
}

@keyframes shootingArrow10 {
	0%, 32%{
		transform: translate(300px, 0) rotate(40deg);
	}
	34%, 100%{
		transform: translate(25px, 160px) rotate(40deg);
	}
}

@keyframes shootingArrow11 {
	0%, 32%{
		transform: translate(200px, 0) rotate(50deg);
	}
	34%, 100%{
		transform: translate(70px, 200px) rotate(30deg);
	}
}

@keyframes shootingArrow12 {
	0%, 32%{
		transform: translate(150px, 0) rotate(25deg);
	}
	34%, 100%{
		transform: translate(-50px, 180px) rotate(25deg);
	}
}

@keyframes moveLogoArrow {
	0%{
		opacity: 0;
		transform: translateX(0);
	}
	100%{
		opacity: 1;
		transform: translateX(-108px);
	}
}

/*third container animation
=====================================================================*/
@keyframes openLogoLeft {
	0%{
		//transform: perspective(0px) rotateY(65deg);
	}
	65%{
		transform: perspective(1800px) rotateY(70deg);
	}
	100%{
		transform: perspective(1800px) rotateY(70deg);
	}
}

@keyframes moveKCName {
	0%{
		opacity: 0;
		transform: translateY(-300px);
	}
	100%{
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes readyAni {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/*adjust logo, first and second container when screen less than 817px
=====================================================================*/
@media (max-width: 817px ) {
	/*
	body{
		height: 100%;
	}

	.mainLogoContainer{
		margin-top: 15px;
		margin-left: 15px;
	}

	.secondContainer{
		margin: 0 auto 80px auto;
		display: block;
	}

	.thirdContainer{
		margin-top: 80px !important; //空城top margin
	}

	.firstContainer{
		margin: 0 auto;
		display: block;
	}

	.contentWrapper{
		justify-content: center;
		align-items: center;
	}
	*/
}


/*adjust footer when screen width less than 665
=====================================================================*/
@media (max-width: 665px){
	/*
	.footerMail{
		margin: 0;
	}

	.footerContainer p{
		text-align: center;
	}

	.footerMail:before{
		content: ' ';
		display: block;
	}
	*/
}


/*adjust 木馬 logo when screen width less than 321
=====================================================================*/
@media (max-width: 321px){
	/*
	.firstContainer .logoContainer {
        width: 84%;
        margin-left: 10%;
    }
    */
}

/*adjust 空城 logo when screen width between 820 to 1280
=====================================================================*/
@media (max-width: 1280px) and (min-width: 820px){
	/*
	.thirdContainer{
		margin-top: 80px !important;
		margin-left: 0px !important;
	}

	.mainLogoContainer{
		margin-top: 20px;
		margin-left: 20px;
	}
	*/
}

/*adjust 木馬 Logo after 375px
=====================================================================*/
@media (max-width: 375px){
	/*
	.logoContainer{
		width: auto !important;
	}
	*/
}

@media (max-width: 1475px) {
	.mainContainerWrapper {
		margin-top: 20px;
	}
}

@media (max-width: 900px) {
	.footerMail {
		display: block;
		margin-left: 0;
	}
}

@media (max-width: 440px) {
	.mainLogoContainer{
		margin-left: 20px;
	}

	.mainContainerWrapper {
		width: 100%;
	}
}

@media (max-width: 339px) {
	.fbIcon {
		margin-left: 0;
		display: block;
	}
}