/*
Theme created for use with Sequence.js (http://www.sequencejs.com/)

Theme: Modern Slide In
Version: 1.3
Theme Author: Ian Lunn @IanLunn
Author URL: http://www.ianlunn.co.uk/
Theme URL: http://www.sequencejs.com/themes/modern-slide-in/

This is a FREE theme and is available under a MIT License:
http://www.opensource.org/licenses/mit-license.php

Sequence.js and its dependencies are (c) Ian Lunn Design 2012 - 2013 unless otherwise stated.
*/

.sequence-theme { background-color: transparent; }

/* -------------------------------------------------- */
/*  Main Styles
/* -------------------------------------------------- */

.sequence {margin: 0 auto;	position: relative;	overflow: hidden;	width: 100%;	height: 600px;}

#sequence {/*height: 600px;*/	}

	.sequence > .sequence-canvas {
		height: 100%;
		width: 100%; 
	}
  
  .sequence > .sequence-canvas > li {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  z-index: 1;
	  display: block;
	  list-style: none;
	  opacity: 1 !important;
  }

		.sequence > .sequence-canvas > li img { height: 100%; }
		
	.sequence li > .sequence-entry {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 11;
		padding: 0px;
		width: 100%;
		height: 100%;
	}
	
/* -------------------------------------------------- */
/*  Next Prev Buttons
/* -------------------------------------------------- */	

.sequence-theme .sequence-prev,
.sequence-theme .sequence-next {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: block;
	margin-top: -25px;
	width: 50px;
	height: 50px;
	font-size: 0;
	cursor: pointer;
	text-align: center;

	-webkit-transition: all .30s ease-in-out;
			transition: all .30s ease-in-out;
}

.no-touch .sequence-theme .sequence-prev { left:  -60px; }
.no-touch .sequence-theme .sequence-next { right: -60px; }

.touch .sequence-theme .sequence-prev { left:  20px; }
.touch .sequence-theme .sequence-next { right: 20px; }

.sequence-theme:hover .sequence-prev { left:  20px; }
.sequence-theme:hover .sequence-next { right: 20px; }

.sequence-theme .sequence-prev:after,
.sequence-theme .sequence-next:after {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	font-size: 52px;
	font-family: 'fontello';
	line-height: 1em;
}

/*.sequence-theme .sequence-prev:after { content: "\ea03"; }
.sequence-theme .sequence-next:after { content: "\ea04"; }*/

.sequence-theme .sequence-next{background: url(/images/main/btn_next_on.png) no-repeat center center; background-size: contain}
.sequence-theme .sequence-prev{background: url(/images/main/btn_prev_on.png) no-repeat center center; background-size: contain}
	
.sequence-pause {
	bottom: 0;
	cursor: pointer;
	position: absolute;
	z-index: 1000; 
}

.sequence-paused    { opacity: 0.3; }
#sequence-preloader { background-color: #d9d9d9; }

/* -------------------------------------------------- */
/*  Pagination
/* -------------------------------------------------- */

.sequence-pagination {	position: absolute;	bottom: 15%;	z-index: 10;	display: none;    width: 100%;	text-align: center;	font-size: 0;
	-webkit-transition-duration: .5s;
			transition-duration: .5s; 
}
.sequence-pagination .page { display: inline-block;}
.sequence-pagination .page span {	display: inline-block;margin: 2px 8px;	padding: 4px;
	width: 3px;	height: 3px;	border-width: 1px;	border-style: solid;	border-color: transparent;
	background-color: #fff;	cursor: pointer;	vertical-align: middle;
	-webkit-transition: all .25s ease-in-out;
			transition: all .25s ease-in-out;
	-webkit-border-radius: 50%;
			border-radius: 50%;
}

.sequence-pagination .page.current span,
.sequence-pagination .page:hover span {
	border-color: #fff;
	background-color: transparent;

	-webkit-transform: scale(1.4);
			transform: scale(1.4);
}

/* -------------------------------------------------- */
/*  Fullscreen Image
/* -------------------------------------------------- */

.sequence-canvas .parallax-overlay {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-image: url(overlay-pattern.png);
	background-repeat: repeat;
}

#sequence-fullscreen .animate-in .parallax-overlay {
	z-index: 1;
	background-color:transparent;/* rgba(0,0,0, .2) */
}

.animated-element {
	position: relative;
	opacity: 0;
	
	-webkit-transition-duration: 1s;
			transition-duration: 1s;
}

.animate-out .animated-element { opacity: 0; }
.animate-in  .animated-element { opacity: 1; }

.full-bg-image.animated-element {
    -webkit-transition-duration: 0.5s;
            transition-duration: 0.5s;
    -webkit-transition-delay: 0;
            transition-delay: 0;
}

/* -------------------------------------------------- */
/*  Elements
/* -------------------------------------------------- */

.sequence-extra   {display: table;	width: 100%;	height: 50%;	padding-top:0%;	vertical-align: middle; text-align: center; border-top:0px solid #fff;}
.sequence-content {	display: table;	width: 100%;	height: 50%;	padding-top:16%;	vertical-align: middle; text-align: center; border-top:0px solid #fff;}
.sequence-content.first { padding-top:0% !important;}
.sequence-content { display: table-cell; }

.sequence-content .sequence-slogan,
.sequence-content .sequence-text {	margin-bottom: 0px;	opacity: 0;	color: #fff;	
	font-weight: 500;	font-family:'vijaya', 'Noto Sans KR', 'Raleway', sans-serif;	line-height: 1.3em;}
	
.sequence-content .sequence-slogan { font-size: 75px; letter-spacing:-.02em; }
.sequence-content .sequence-text   { font-size: 21px; line-height:30px; font-weight:400;font-family:'Noto Sans KR'; letter-spacing: 0}
	
.sequence-content .sequence-slogan,
.sequence-content .sequence-text {
	-webkit-transform: translateY(50px);
			transform: translateY(50px);
			
	-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
	-webkit-transition-duration: .7s;
			transition-duration: .7s;
	-webkit-transition-timing-function: ease;
			transition-timing-function: ease;
}

.sequence-content .sequence-button {opacity: 0;
	
	-webkit-transform: translateY(50px);
			transform: translateY(50px);
			
	-webkit-transition-property: -webkit-transform, opacity;
			transition-property: transform, opacity;
	-webkit-transition-duration: .7s;
			transition-duration: .7s;
	-webkit-transition-timing-function: ease;
			transition-timing-function: ease;
}

.sequence-content .sequence-slogan > span { color: #f8b637; }
	
/* -------------------------------------------------- */
/*  Animation
/* -------------------------------------------------- */

/* Sequence Fullscreen */
	.animate-out .sequence-slogan {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-slogan {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: .5s;
				transition-delay: .5s;
	}

	.animate-out .sequence-text {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-text {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: 1.1s;
				transition-delay: 1.1s;
	}

	.animate-out .sequence-button {
		opacity: 0;

		-webkit-transform: translateY(50px);
				transform: translateY(50px);
	}

	.animate-in .sequence-button {
		opacity: 1;

		-webkit-transform: translateY(0);
				transform: translateY(0);
				
		-webkit-transition-delay: 1.6s;
				transition-delay: 1.6s;
	}
	
	/* Sequence with Extra Radius */
	
	.sequence-canvas .extra-radius {
		opacity: 0;
		
		-webkit-transition: -webkit-transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
				transition: transform .65s cubic-bezier(0.000, 1.035, 0.265, 1.550) .5s, opacity .45s ease .5s;
		-webkit-transform: scale(0);
				transform: scale(0);
	}
	
	.animate-out .extra-radius {
		opacity: 0;
		
		-webkit-transform: scale(0);
				transform: scale(0);
	}	
	
	.animate-in .extra-radius {
		opacity: 1;
		
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	
		.sequence-canvas .inner-content h2 {
			opacity: 0;

			-webkit-transition-duration: 0;
					transition-duration: 0;
			-webkit-transition-property: opacity, transform;
					transition-property: opacity, transform;
			-webkit-transition-timing-function: ease;
					transition-timing-function: ease;
			-webkit-animation-fill-mode: both;
					animation-fill-mode: both;
		}
		
		.sequence-canvas .inner-content > h2:nth-child(1) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(2) {
			-webkit-transform: translateX(15px);
					transform: translateX(15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(3) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(4) {
			-webkit-transform: translateX(15px);
					transform: translateX(15px);
		}

		.sequence-canvas .inner-content > h2:nth-child(5) {
			-webkit-transform: translateX(-15px);
					transform: translateX(-15px);
		}

		.animate-in .inner-content > h2:nth-child(1) { 
			-webkit-transition-delay: 1.1s;
					transition-delay: 1.1s;
			-webkit-transition-duration: .6s;  
					transition-duration: .6s;  
		}

		.animate-in .inner-content > h2:nth-child(2) { 
			-webkit-transition-delay: 1.8s;
					transition-delay: 1.8s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(3) { 
			-webkit-transition-delay: 2.4s;
					transition-delay: 2.4s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(4) { 
			-webkit-transition-delay: 3s;
					transition-delay: 3s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}

		.animate-in .inner-content > h2:nth-child(5) { 
			-webkit-transition-delay: 3.6s;
					transition-delay: 3.6s;
			-webkit-transition-duration: .6s; 
					transition-duration: .6s; 
		}
		
		.sequence-canvas .animate-in .inner-content > h2 { 
			opacity: 1;

			-webkit-transform: translateX(0);
					transform: translateX(0);
		}	
	
/* -------------------------------------------------- */
/*  Responsive
/* -------------------------------------------------- */


@media only screen and (max-width: 767px) {
		
	.sequence li > .sequence-entry { padding: 50px 30px; }	
	
		.touch .sequence-theme .sequence-prev { left:  10px; }
		.touch .sequence-theme .sequence-next { right: 10px; }

		.sequence-theme:hover .sequence-prev { left:  10px; }
		.sequence-theme:hover .sequence-next { right: 10px; }
	
}



@media only screen and (max-width: 767px) and (orientation: portrait) {
	
	
	
	#sequence li > .sequence-entry { /*padding: 25px;*/ }	
	
	.sequence-content .sequence-slogan { font-size: 40px; }
	.sequence-content .sequence-text   { font-size: 16px; }

	
} 

@media only screen and (max-width: 767px)  {
	
    .sequence-content {padding-top:25%; }
    .sequence-pagination {display:none !important; }
	
	#sequence li > .sequence-entry { padding: 0; }	
	
	.sequence-content .sequence-slogan { font-size: 50px; line-height:52px; }
	.sequence-content .sequence-text   { font-size: 16px; }
	
	
} 

@media screen and (max-width: 500px)  {
	.sequence-content {padding-top:50%; }
	.sequence-content .sequence-slogan { font-size: 40px; line-height:42px; }
	.sequence-content .sequence-text   { font-size: 14px; }
	
	
}