@charset "utf-8";
/* CSS Document */
body {
	margin: 0 auto;
	overflow-x: hidden;
	text-align: center;
	-moz-user-select : none;
	-webkit-user-select: none;
	background: url(../images/bg_yellow.png) center;
	font-family: 'Microsoft JhengHei';
}
li {
	list-style-type:none;
	overflow: hidden;
}
img { border: 0px}
a { 
	outline: none; /* for Firefox Google Chrome  */
	behavior:expression(this.onFocus=this.blur()); /* for IE */
	text-decoration: none;
}
h, h1, h2, h3, h4 {overflow: hidden;}

.logo {
	position: absolute;
	margin:2% 0 0 2%;
	z-index: 6
}
.main {
	width: 1380px;
	height: 1100px;
	position: absolute;
	left: 50%;
	margin-left: -690px;
}
.flafla {
	position: absolute;
	margin: 12px 0 0 -640px;
}
.sun {
	position: absolute;
	margin: 20px 0 0 500px;
    animation: rotate 20s linear infinite;
}
@keyframes rotate {
  100% {-webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)} 
}
.tree2 {
	position: absolute;
	margin: 672px 0 0 -655px;
}
.mtr {
	position: absolute;
	margin: 626px 0 0 550px;
	animation: rotate 100s linear infinite;
}
.r1 {
	position: absolute;
	margin: 189px 0 0 -615px;
}
.dd {
	position: absolute;
	margin: 184px 0 0 -355px;
}

.turf1 {
	width: 100%;
	height: 1120px;
	background: url(../images/turf1.png) bottom repeat-x;
	position: relative;
}
.pop {
	background: url(../images/pop.png) no-repeat;
	width: 418px;
	height: 194px;
	position: absolute;
	left: 50%;
	margin-left: -335px;
	margin-top: 54px;
	font-family: "Meiryo";
	font-size: 32px;
	color: #fff;
	letter-spacing: 5px
}
.pt1 {
	position: absolute;
	margin: 40px 0 0 50px;
	transform: rotate(-5deg)
}
.pt2 {
	position: absolute;
	margin: 90px 0 0 50px;
}
.pt3 {
	position: absolute;
	margin: 135px 0 0 195px;
}
.camp {
	background: url(../images/camp.png) no-repeat;
	width: 872px;
	height: 764px;
	position: absolute;
	left: 50%;
	margin-left: -230px;
	margin-top: -1040px;
}
.camp h1 {
	position: absolute;
	margin: 220px 0 0 220px;
	font-family: "Meiryo";
	font-size: 62px;
	font-weight: normal;
	color: #5da9d8;
	line-height: 77px;
	letter-spacing: 30px
}
.grl {
	color: #60c4a5
}
.pkm {
	color: #dd6b73
}
.camp h2 {
	position: absolute;
	margin: 392px 0 0 267px;
	font-size: 33px;
	color: #998675;
	letter-spacing: 1px
}
.one {
	font-family: "Arial Black";
	font-size: 35px;
	color: #fff;
}
.kfs {
	color: #534741
}
.camp h3 {
	position: absolute;
	margin: 445px 0 0 315px;
	font-size: 33px;
	color: #ff0000;
	letter-spacing: 1px
}
.pri {
	font-family: "Arial";
	font-size: 50px;
	letter-spacing: -2px
}
.camp h4 {
	position: absolute;
	margin: 555px 0 0 310px;
	font-size: 30px;
	font-weight: normal;
	color: #fff;
	letter-spacing: 1px
}
.yel {
	color: #fcee21;
}
.pkn {
	color: #f9c7ce;
	font-weight: bold;
	line-height: 50px;
	letter-spacing: 2px;
}
.startbt {
	animation-duration: 1s;
    animation-name: startbt;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}
@keyframes startbt {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.flag1 {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 0 30px 105px;
	border-color: transparent transparent transparent #e06f46;
	margin: 15px 0 0 435px
}
.flag-animation {
  animation: animationFlag linear 2s;
  animation-iteration-count: infinite;
  transform-origin: 0% 50%;
  -webkit-animation: animationFlag linear 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 0% 50%;
  -moz-animation: animationFlag linear 2s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 0% 50%;
  -o-animation: animationFlag linear 2s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 0% 50%;
  -ms-animation: animationFlag linear 2s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 0% 50%;
}

@keyframes animationFlag{
  0% {
    transform:  scaleX(1.00) ;
  }
  50% {
    transform:  scaleX(1.3) ;
  }
  100% {
    transform:  scaleX(1.00) ;
  }
}

@-moz-keyframes animationFlag{
  0% {
    -moz-transform:  scaleX(1.00) ;
  }
  50% {
    -moz-transform:  scaleX(1.3) ;
  }
  100% {
    -moz-transform:  scaleX(1.00) ;
  }
}

@-webkit-keyframes animationFlag {
  0% {
    -webkit-transform:  scaleX(1.00) ;
  }
  50% {
    -webkit-transform:  scaleX(1.3) ;
  }
  100% {
    -webkit-transform:  scaleX(1.00) ;
  }
}

@-o-keyframes animationFlag {
  0% {
    -o-transform:  scaleX(1.00) ;
  }
  50% {
    -o-transform:  scaleX(1.3) ;
  }
  100% {
    -o-transform:  scaleX(1.00) ;
  }
}

@-ms-keyframes animationFlag {
  0% {
    -ms-transform:  scaleX(1.00) ;
  }
  50% {
    -ms-transform:  scaleX(1.3) ;
  }
  100% {
    -ms-transform:  scaleX(1.00) ;
  }
}
.trial {
	padding-top: 10px;
	padding-bottom: 15px; 
	width: 1140px; 
	border-radius: 6px;
	color: #4d4d4d; 
	background-color: rgba(255, 255, 255, 0.8); 
	position: absolute;
	left:50%; 
	margin-left:-570px; 
	margin-top: 900px;
	box-shadow: 0px 3px 6px 3px rgba(0,0,0,0.1);
}
.travel_jk {
	height: 600px;
	background: url(../images/bg_blue.png) center;
}
.travel_sa {
	height: 620px;
	background: url(../images/turf0.png) center;
}
.travel_eu {
	height: 620px;
	background: url(../images/bg_pink.png) center;
}
.godfriend {
	height: 700px;
	background: url(../images/bg_material.png) center;
}
.features {
	height: 600px;
	background: url(../images/godfrienf_bg.png) no-repeat;
}
.fe_tl1 {
	position: absolute;
	margin: 160px 0 0 210px;
	font-size: 40px;
	font-weight: normal;
	letter-spacing: 2px;
}
.fe_tl2 {
	position: absolute;
	margin: 230px 0 0 370px;
	font-size: 32px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #5da9d8
}
.logo2 {
	position: absolute;
	margin: 150px 0 0 720px
}
.fet1,.fet2,.fet3 {
	float: left;
	font-size: 23px;
	margin-top: 405px;
	letter-spacing: 1px;
}
.fet1 {
	margin-left: 160px
}
.fet2 {
	margin-left: 110px
}
.fet3 {
	margin-left: 110px
}
.bl2 {
	color: #5da9d8
}
.turf2 {
	height: 600px;
	background: url(../images/turf2.png) top center repeat-x;
}

.intro_jk,.intro_sa,.intro_eu,.features {
	width: 1200px;
	position: absolute;
	left:50%; 
	margin-left:-600px; 
}
.intro_jk {
	background: url(../images/travel_bg1.png) no-repeat;
	height: 600px;
}
.intro_jk h1 {
	font-size: 36px;
	color: #1e7faf;
	position: absolute;
	margin: 130px 0 0 260px
}
.intro_sa h1 {
	font-size: 36px;
	position: absolute;
	margin: 130px 0 0 260px
}
.intro_eu h1 {
	font-size: 36px;
	color: #7f4169;
	position: absolute;
	margin: 130px 0 0 260px
}
.jkt1,.jkt2,.jkt3,.sat1,.sat2,.sat3,.sat4,.eut1,.eut2,.eut3 {
	font-size: 25px;
	position: absolute;
	letter-spacing: 1px;
}
.jkt1 {
	margin: 135px 0 0 735px
}
.jkt2 {
	margin: 265px 0 0 705px;
}
.jkt3 {
	margin: 395px 0 0 757px;
}
.sat1 {
	margin: 245px 0 0 180px
}
.sat2 {
	margin: 245px 0 0 630px;
}
.sat3 {
	margin: 390px 0 0 200px;
}
.sat4 {
	margin: 390px 0 0 590px;
}
.eut1 {
	margin: 145px 0 0 715px
}
.eut2 {
	margin: 275px 0 0 715px;
}
.eut3 {
	margin: 405px 0 0 750px;
}
.red {
	color: #ff0000;
}
.bld {
	color: #3bb9c4
}
.intro_sa {
	background: url(../images/travel_bg2.png) no-repeat;
	height: 620px;
}
.intro_eu {
	background: url(../images/travel_bg3.png) no-repeat;
	height: 620px;
}
.f5 {
	width: 300px;
	height: 60px;
	background-image: linear-gradient(to top, #bf8334 0%, #fcbd07 100%);
	color: #fff;
	line-height: 60px;
	border-radius: 14px;
	font-size: 30px;
	position: absolute;
	left: 50%;
	margin-left: -150px;
	margin-top: 600px
}
.f5:hover {
	color: #E0E0E0
}
.footer {
	width: 100%;
	height: 110px;
	background-color: #533c32;
	margin-top: -1px
}
.footer img {
	margin-top: 1%;
}
