@charset="utf-8";
@import "common.css";
@import "nav.css";
@import "fullpage.css";
@import "responsive.css";

 /*main page layout*/

 	.section{
		background-size: cover;
	}
	#section1{
		background-image: url(../images/main/visual_bg01.png);
		background-size:cover;
		background-position: 50%;
  	    background-repeat: no-repeat;
		width:100%;
		height:100%;
	}
	#section2{
		background-image: url(../images/main/visual_bg02.png);
		background-size:cover;
		background-position: 50%;
  	    background-repeat: no-repeat;
		width:100%;
		height:100%;
	}
	#section3{
		background-image: url(../images/main/visual_bg03.png);
		background-size:cover;
		background-position: 50%;
  	    background-repeat: no-repeat;
		width:100%;
		height:100%;
	}


/* animation */
#fullpage .item {
  opacity: 0;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
}

#fullpage .item.active {
  opacity: 1;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 1;
}


		.item.active .animation.animated-item-1 {
		  -webkit-animation: fadeInUp 500ms linear 300ms both;
		  -moz-animation: fadeInUp 500ms linear 300ms both;
		  -o-animation: fadeInUp 500ms linear 300ms both;
		  -ms-animation: fadeInUp 500ms linear 300ms both;
		  animation: fadeInUp 500ms linear 300ms both;
		}

		.item.active .animation.animated-item-2 {
		  -webkit-animation: fadeInUp 300ms linear 600ms both;
		  -moz-animation: fadeInUp 300ms linear 600ms both;
		  -o-animation: fadeInUp 300ms linear 600ms both;
		  -ms-animation: fadeInUp 300ms linear 600ms both;
		  animation: fadeInUp 300ms linear 600ms both;
		}

		.item.active .animation.animated-item-3 {
		  -webkit-animation: fadeInUp 300ms linear 900ms both;
		  -moz-animation: fadeInUp 300ms linear 900ms both;
		  -o-animation: fadeInUp 300ms linear 900ms both;
		  -ms-animation: fadeInUp 300ms linear 900ms both;
		  animation: fadeInUp 300ms linear 900ms both;
		}

		.item.active .animation.animated-item-4 {
		  -webkit-animation: fadeInUp 300ms linear 1200ms both;
		  -moz-animation: fadeInUp 300ms linear 1200ms both;
		  -o-animation: fadeInUp 300ms linear 1200ms both;
		  -ms-animation: fadeInUp 300ms linear 1200ms both;
		  animation: fadeInUp 300ms linear 1200ms both;
		}

		.item.active .animation.animated-item-5 {
		  -webkit-animation: fadeInUp 300ms linear 1200ms both;
		  -moz-animation: fadeInUp 300ms linear 1200ms both;
		  -o-animation: fadeInUp 300ms linear 1200ms both;
		  -ms-animation: fadeInUp 300ms linear 1200ms both;
		  animation: fadeInUp 300ms linear 1200ms both;
		}

		.item.active .animation.animated-item-6 {
		  -webkit-animation: fadeInUp 300ms linear 1500ms both;
		  -moz-animation: fadeInUp 300ms linear 1500ms both;
		  -o-animation: fadeInUp 300ms linear 1500ms both;
		  -ms-animation: fadeInUp 300ms linear 1500ms both;
		  animation: fadeInUp 300ms linear 1500ms both;
		}


		#main .slider-img{
		  text-align: right;
		  position: absolute;
		}
		#main .slider-img.only{
		    position: absolute;
			top:-40px;
		}

		#main h1 {
			display:block;
			color:#fff;
			font-size:72px;
			font-weight:100;
			letter-spacing:-2px;
			line-height:84px;
			text-align:left;
		}

		#main h2 {
			color:#fff;
			font-size: 18px;
			font-weight:400;
			line-height:26px;
			text-align:left;
		}

		#main .txt_wrap {
			float:right
			text-align:left;
		}

		a.btn_more {
			display:block;
			width:180px;
			height:50px;
			border-radius:50px;
			border:1px solid #fff;
			text-align:center;
			color:#fff;
			font-size:18px;
			line-height:50px;
		}

		a.btn_more:hover, 
		a.btn_inverse:hover {
			background-color:#fff;
			color:#283894;
			font-weight:600;
			text-decoration:none;
		}

		 .btn_inverse {
			display:block;
			width:180px;
			height:50px;
			border-radius:50px;
			border:1px solid #333;
			text-align:center;
			color:#333;
			font-size:18px;
			font-weight:400;
			line-height:50px;
		}

	/*scroll down btn style*/
    #section1 #scroll_move ,
	#section2 #scroll_move {	
        position:absolute;
        left: 50%;
        bottom: 50px;
        z-index: 99999;
    }
   
		#section1 #scroll_move a,
		#section2 #scroll_move a{
		  padding-top: 70px;
		  color:#fff;
		  text-decoration:none;
		}

		#section1 #scroll_move a span,
		#section2 #scroll_move a span {
		  position: absolute;
		  top: 0;
		  left: 50%;
		  width: 24px;
		  height: 24px;
		  margin-left: -12px;
		  border-left: 1px solid #fff;
		  border-bottom: 1px solid #fff;
		  -webkit-transform: rotate(-45deg);
		  transform: rotate(-45deg);
		  -webkit-animation: sdb05 1.5s infinite;
		  animation: sdb05 1.5s infinite;
		  box-sizing: border-box;
		}
		@-webkit-keyframes sdb05 {
		  0% {
			-webkit-transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		  }
		  50% {
			opacity: 1;
		  }
		  100% {
			-webkit-transform: rotate(-45deg) translate(-20px, 20px);
			opacity: 0;
		  }
		}
		@keyframes sdb05 {
		  0% {
			transform: rotate(-45deg) translate(0, 0);
			opacity: 0;
		  }
		  50% {
			opacity: 1;
		  }
		  100% {
			transform: rotate(-45deg) translate(-20px, 20px);
			opacity: 0;
		  }
		}