@charset "utf-8";
/* CSS Document */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}
section {
    display: block;	
}
body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {min-width: 320px;}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

body {
	color: #3d6881;
    font-family: "Microsoft JhengHei", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16.5pt;
    font-weight: 400;
	line-height: 1.65;
	
	}

/* Type */
@media screen and (max-width: 1680px) {
			body {font-size: 16pt;}
		}
		@media screen and (max-width: 1280px) {
            body {font-size: 16pt;}
		}
		@media screen and (max-width: 980px) {
			body {font-size: 16pt;}
		}
		@media screen and (max-width: 736px) {
			body {font-size: 14pt;}
		}
        @media screen and (max-width: 480px) {
			body {font-size: 14pt;}
		}
a {
		color: #ffffff;
		text-decoration: none;
	}

p {margin: 0 0 2em 0;}

	h1, h2, h3, h4, h5, h6 {
		font-family: "Microsoft JhengHei", Helvetica Neue, Helvetica, Arial, sans-serif;
		font-weight: 700;
		letter-spacing: 0.1em;
		margin: 0 0 1em 0;
		text-transform: uppercase;
	}
	h2 {font-size: 1em;}
	h2 img{max-width: 100%;}

	h3 {font-size: 1.2em;}

	h4 {font-size: 0.7em;}

	h5 {font-size: 0.7em;}

	h6 {font-size: 0.7em;}
@media screen and (max-width: 736px) {

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}
/* Image */

	.image {
		border-radius: 5px;
		display: inline-block;
		position: relative;
	}

		.image img {display: block;}
}

section {
    position: relative;
	overflow: hidden;
    }
#top{padding-bottom: 50%; 
z-index: -11;
 background-image: linear-gradient(120deg, #f0ed6f, #fec2b0, #fdb5de, #afc2ff, #7cd4e4, #19bce9 );
		animation: AnimationName 8s ease infinite;
		background-size: 150%;
		/*background-attachment: fixed;*/
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}	
.one-floating {
    position: absolute;}
.floattitle {
	top: 5%;
	left:50%;
	margin-left: -336px;
	animation-duration: .75s;
	animation-fill-mode: both;
	animation-name: bounceIn;
	 z-index: 1;
}
@keyframes bounceIn{0%,100%,20%,40%,60%,80%{-webkit-transition-timing-function:cubic-bezier(0.215,.61,.355,1);transition-timing-function:cubic-bezier(0.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);-ms-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);-ms-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);-ms-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);-ms-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);-ms-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.floatdog {
    left: 47%;
    top: 10%;
	animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
	animation-name: kai;
	 z-index: 2;
}
.floatKai {
    left: 18%;
    top: 31%;
	animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
	animation-name: kai;
	 z-index: 3;
}
@keyframes kai {
	0% {transform: rotate(-4deg);	
	}
	50% {transform: rotate(4deg);
	}
	100% {transform: rotate(-4deg);	
	}						
}
.floating1 {
    left: -8%;
	width: 40%;
	transform-origin: left bottom;
	animation: leaves 1.5s infinite ease-in-out alternate;
}

.floating2 {
	bottom: -11%;
	width: 16%;
	z-index: -1;
}
.floating3 {
	top: 54%;
    left: -1%;
	-webkit-animation: float 4s ease-in-out infinite;
    animation: float 4s ease-in-out infinite;
	animation-delay: 3s;
    width: 6%;
}
.floating4 {
    top: 76%;
    left: 17%;
	-webkit-animation: float 4s ease-in-out infinite;
    animation: float 4s ease-in-out infinite;
	animation-delay: 2s;
}
.floating5 {
    top: 9%;
    right: 37%;
	width: 3%;
	-webkit-animation: float 4s ease-in-out infinite;
    animation: float 4s ease-in-out infinite;
	animation-delay: 2s;
}
.floating6 {
    top: 24%;
    right: 30%;
	width: 6%;
	-webkit-animation: float 4s ease-in-out infinite;
    animation: float 4s ease-in-out infinite;
	animation-delay: 1s;
}
.floating7 {
    top: 71%;
    right: 32%;
	width: 16%;
	-webkit-animation: float 4s ease-in-out infinite;
    animation: float 4s ease-in-out infinite;
	animation-delay: 3s;
}
.floating8 {
    right: -5%;
	animation: leaves 1.5s infinite ease-in-out alternate;
	animation-delay: 1s;
	transform-origin: right center;
	width: 28%;
}
 .floating9 {
    bottom: -9%;
    right: 2%;
	width: 25%;
	z-index: -10;
}
@keyframes float {
  0% {margin-top:0px;}
  50% {margin-top:-20px;}
  100% {margin-top:0px;}
}

@keyframes leaves {
  0% {transform: rotate(-1deg);}
  100% {transform: rotate(1deg);}
}
#one{padding: 90px 0 0;
    margin: 0;
    margin-top: -155px;}	
#one::before {
    content: "";
    width: 150%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -10;
    transform: rotate(-4.5deg);
    transform-origin: top right;
    background-image: url("../images/sun-pattern.jpg");	
}

.content{
   display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    height: auto;
	position: relative;
    width: 100%;
    max-width: 1366px;
    margin: 0 auto;
    padding: 100px 20px 0;
}
.title{position: relative;
    display: block;
    max-width: 100%;
	    z-index: 1;
}
.t-block {
    display: block;}
.t-none {
    display: none;}
.txt{font-weight: bold;    font-size: 2rem;
}
/* card game */
.card{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;}
.card-container {
  width: 300px;
  height: 400px;
  position: relative;
  perspective: 1000px;
	margin: 15px;
}

.cover, .back {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform .25s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .4rem;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .18);
}
.cover {
  transform: rotatey(0deg);
  background: url(https://john123.neocities.org/cd1.jpg)  center no-repeat;
            background-attachment: fixed;
            background-size: cover;
}

.card-container:hover .cover {transform: rotatey(180deg);}
.back {
  transform: rotatey(-180deg);
  background: url(https://john123.neocities.org/300x400-1.jpg)  center no-repeat;
            background-attachment: fixed;
            background-size: cover;}
.card-container:hover .back {transform: rotatey(0deg);}

.back2 {background-image: url(https://john123.neocities.org/300x400-2.jpg);}
.back3 {background-image: url(https://john123.neocities.org/300x400-3.jpg);}
.back4 {background-image: url(https://john123.neocities.org/300x400-4.jpg);}

@media screen and (max-width: 759px) {
     .card-container {
        width: 163px;
        height: 216px;
        /*margin:0.5%;*/
            }
        }
.inner{ /*padding: 3em 0 1em 0;*/
    margin: 0 auto;
    width: 55em;
	display: flex;
    align-items: center;
    flex-direction: row;
}
.image {
    margin: 0 0em 2em 0;
	/*width: 15em;*/
    }
 .image img {
    width: 70%;
    border-radius: 5px;
    border:8px solid #fff;
    box-shadow:0px 3px 5px rgb(89, 152, 167, 0.35);
}
.content{width: 100%;}
.txt2{width: 100%;}
h3.major {
    padding-bottom: 1em;
    border-bottom: solid 2px rgba(6, 6, 6, 0.125);
	display: block;
}
.inner:nth-child(odd) {flex-direction: row-reverse;}
.image:nth-child(odd) {margin: 0 0 2em 3em;}
.content2{margin: 5em 0;}
#two{background-image: linear-gradient(135deg, #33a4fd, #6292fb);  
     background-size: 100% 100%;}

.insurance{display: flex;
    flex-wrap: wrap;
	justify-content: space-evenly;
    margin: 0 0 2em 0;}
.btn:hover{ transform: rotate(0deg) scale(1.1);} 
#three{background: url("../images/3bg.gif") #c8fbff repeat-x;}
.pet{border-radius: 5px;
    border:9px solid #fff;
    transform: rotate(-2deg);
	max-width: 100%;}
.txt3{margin: 4em 15em;
     position: relative;}
.txt3:before {content: "“";
font: bold 9em/0 Arial;
  position: absolute;
  left: -16%;
  color:#fd0;}
.txt3:after{content: "”";
font: bold 9em/0 Arial;
  position: absolute;
  right: -14%;
  bottom: -42%;
color:#fd0;} 
    
#four {background: url("../images/4bg.png") #feda00 center no-repeat;  background-size: contain;
	 }
.f2{ position: absolute;  
	top:45%; left:10%;}
.video{position: relative;
   width: 918px;
  border-radius: 20px;
	margin: -8rem auto 4rem auto;
border: 16px solid #68e8f1;
display: block;
    overflow: hidden;}
.video:before {
    padding-top: 56.25%;
	display: block;
    content: "";
}
.video iframe {position: absolute; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;}  
.floatKai2 {
    left: 9%;
	top: 56%;}
#five{background-image: url("../images/3bg.gif");}
.btn2{border-radius: 60px;
    box-shadow: 6px 6px 0px rgba(105, 105, 105, 0.6);
	background-color: #ff0164;
	border: 9px solid #fff;
    display: inline-block;
    text-align: center;
    margin-bottom: 4rem;
	transition: box-shadow 0.2s ease;
		position: relative;
	padding: 1.3rem 5rem;
}
.btn2 span{/*display: block;
    padding: 1.3rem 5rem;*/
     font-weight: bold;
	 color: #fff;
     font-family: inherit;
     font-size: 25px;
    /*background: url(../images/arrow.svg) 91% 50% no-repeat;
    background-size: 13px auto;*/}
.btn2:hover{
    top: 5px;
    box-shadow: inset 0 0 0 0 transparent;
}
.arrow-icon{animation: bounceRight 0.8s infinite;}

@keyframes bounceRight {
  0%, to { transform: translateX(12px); }
  50% {transform: translateX(4px); }
}

/*.partner{position: absolute;}
.partner-floa{left: 47%;}*/

/*平板介面*/
@media screen and (max-width: 1280px) {
 #top{padding-bottom: 70%;}		
 .floatKai {top:28%; left: 12%;}
 .floatdog {top: 9%;}
 .floating2 { width: 20%;}
 .floating3 {left: 3%;}
 .floating5 {width: 5%; top: 3%;}
 .floating6 {right: 23%;}
 .floating7 {top: 65%;}
 .floating8 {top:10%;}
 .floating9 {right: -2%;}
 .card-container {
    width: 250px;
    height: 333px;}
 .inner {width: 45em;}
}
@media screen and (max-width: 980px) {
    #top{padding-bottom: 100%;}
	.floatdog {left: 45%;}
	.floatKai {left: 1%;}
	.floating1 { left: -16%; width: 50%;}
	.floating2 { bottom: 0%;width: 26%;left: -11%;}
	.floating3 {top: 64%;left: 14%;}
    .floating4 {top: 71%;left: 25%;}
    .floating5 {top: 5%; right: 29%;width: 6%;}
	.floating6 {right: 14%; width: 10%;}
	.floating7 {right: 25%; width: 20%;top: 60%;}
	.floating8 {right: -20%; width: 43%;}
	.floating9 {bottom: -4%;right: -12%;width: 27%;}
	.inner { width: 35em;}
	.txt3 {margin: 4em 8em;}
	.video {width: 718px;}
	.floatKai2 {left: 1%;}
	.partner-floa img{max-width: 100%;}
	.card-container {width: 200px; height: 267px;}
		}
@media screen and (max-width: 736px) {
	 #top{padding-bottom: 110%;}
	.floattitle {width: 504px; margin-left: -252px;}
	.floatdog {left: 44%; width: 15%;}
	.floatKai {left: 1%; top: 26%;width: 30%;}
	.floating2 {}
	.floating3 {top: 76%;}
	.floating4 {top: 79%;}
	.floating6 {right: 9%; top:14%;}
	.floating7 {top: 71%;}
	.floating9 {right: -19%;width: 35%;}
	.txt3 {margin: 4em 6em;}
.card-container{margin: 17px;}
.floatKai2 {width: 25%;}
.video {width: 100%;}
}
@media screen and (max-width: 480px) {
	  #top{padding-bottom: 150%;}
	  .floatdog {top: 12%;}
	  .floatKai {top: 34%;}
	  .floattitle {max-width: 100%;
                 left: 50%;
                 margin-left: -50%;}
	#one{padding-top: 50px;}
	.floating2 {bottom: 7%;}
	.floating3 {top: 70%;}
	.floating4 {width: 14%;top: 76%;}
	.floating9 {bottom: 22%;}
			.txt {font-size: 1.5rem;}
			.card-container { margin: 10px;}
			.image:nth-child(odd) {margin: 0 0 2em 1em;}
			.card-container {width: 150px; height: 200px;}
				.txt3 {margin: 4em 2em;}
				.content2 {margin: 5em 1em;}
				.insurance img{max-width: 100%;
                               height: auto;}
				.inner { width: 100%;}
				.txt3:after{bottom: -26%;} 
				.video {margin: -5rem auto 4rem;}	
				.content{ padding-top: 80px;}
				.f2{left:5%;}	
		}
@media (min-width: 736px) {
.t-lg-block {display: block;}
.t-lg-none {display: none;}
}