@charset "utf-8";

/* theme_0104 왕피천생태탐방로(2-1구간) */

#horizontal-section-1 .text-block{left:auto;right:-30px;top:53%;}
#horizontal-section-1 .image-box-1{background-position:50% 50%;}

@media(min-width:1024px){
	#horizontal-section-1 .image-box-1{transition:0.5s ease-in-out;transition-delay:0.5s;}
	#horizontal-section-1 .image-box-2{transform:translate(0, 0);transition:1s ease-in-out;transition-delay:1s;}
	#horizontal-section-1 .text-block{transition:1s ease-in-out;transition-delay:1.5s;}
	#horizontal-section-1.action .image-box-1{background-position:50% 100%;}
	#horizontal-section-1.action .image-box-2{transform:translate(-35%, 0);}
	#horizontal-section-1.action .text-block{right:0;transform:translate(-25%, 0);}
}

@media(max-width:1200px){
	#horizontal-section-1 .text-block{top:45%;}
}

@media(max-width:1023px){
	#horizontal-section-1 .text-block{top:50%;}
}

/* 02 */
#horizontal-section-2 .text-block{left:20px;top:30%;}
#horizontal-section-2 .image-box-1{background-position:50% 100%;width:100%}

@media(min-width:1024px){
	#horizontal-section-2 .image-box-2{transform:translate(0, 0);transition:1s ease-in-out;transition-delay:1s;}
	#horizontal-section-2.action .image-box-2{transform:translate(5%, 0);}
}
@media(max-width:768px){

	#horizontal-section-2 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 03 */
#horizontal-section-3 .img-box-large {width:100%;}
#horizontal-section-3 .image-box-1:after{width:100%}
#horizontal-section-3 .text-block{left:50%;top:40%;margin-left:-250px;}
@media(min-width:1024px){
	#horizontal-section-3 .text-block{left:50%;top:40%;margin-left:-250px;}
}

@media(max-width:768px){

	#horizontal-section-3 .text-block{left:50%;top:40%;margin-left:0;}
}
/* 04 */
#horizontal-section-4 .text-block{left:20px;top:35%;}
#horizontal-section-4 .image-box-2{right:90px;left:auto;}
#horizontal-section-4 .image-box-2{transform:translate(0, 0);transition:1s ease-in-out;transition-delay:1s;}

#horizontal-section-4 .image-box-3{right:140px;top: 42%;opacity: 1;}
#horizontal-section-4 .image-box-3{transform:translate(0, 0);transition:1.5s ease-in-out;transition-delay:1.5s;}


@media(min-width:1024px){
	#horizontal-section-4.action .image-box-2{transform:translate(-10%, 0);}
	#horizontal-section-4.action .image-box-3{transform:translate(-10%, 0);}	
}

/* 05 */
#horizontal-section-5 .img-box-large{width: 100%;}
#horizontal-section-5 .image-box-1{background-position:50% 50%;transition:1.5s ease-in-out;transition-delay:0.5s;}
#horizontal-section-5 .text-block{left:20px;top:35%}
#horizontal-section-5.action .image-box-1{background-position:50% 100%;}
@media(max-width:768px){
	#horizontal-section-5 .img-box-large{height:50%}
}
/* 06 */
#horizontal-section-6 .text-block{top:40%;left:20px;}
@media(max-width:768px){
	#horizontal-section-6 .img-box-large{height:50%}
	#horizontal-section-6 .image-list.image-box-2{float:none;margin:0 auto;}
}

/* 07 */
#horizontal-section-7 .text-block{top:34%;left:20px;width: 570px;}
#horizontal-section-7 .image-list.image-box-2{right:30px;top:30%}
#horizontal-section-7 .image-list.image-box-3{right:350px;top:30%}
@media(max-width:768px){
	#horizontal-section-7 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 08 */
#horizontal-section-8 .text-block{left:20px;top:40%}
@media(max-width:768px){
	#horizontal-section-8 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 09 */
#horizontal-section-9 .img-box-large{width: 100%;}
#horizontal-section-9 .text-block{top:40%;left:20px;}

@media(max-width:768px){
	#horizontal-section-9 .img-box-large{height:60%}
}


#horizontal-section-10 .text-block{top:40%;left:20px;}

/* 11 */
#horizontal-section-11 .text-block{top:40%;left:20px;}
@media(max-width:768px){
	#horizontal-section-11 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 12 */
#horizontal-section-12 .text-block{top:40%;left:20px;}
#horizontal-section-12 .image-box-2{transform:translate(0, 0);transition:1s ease-in-out;transition-delay:1s;}

@media(min-width:1024px){
	#horizontal-section-12.action .image-box-2{transform:translate(-15%, 0);}
}
@media(max-width:768px){
	#horizontal-section-12 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 13 */
#horizontal-section-13 .image-list.image-box-2{right:30px;top:30%}
#horizontal-section-13 .image-list.image-box-3{right:350px;top:30%}
@media(max-width:768px){
	#horizontal-section-13 .img-box-large{height:120%}
}
/* 14 */
#horizontal-section-14 .image-list.image-box-3{top:42%;right:130px;}
#horizontal-section-14 .text-block{top:34%;left:20px;}
@media(max-width:768px){
	#horizontal-section-14 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 15 */
#horizontal-section-15 .text-block{top:34%;left:20px;}
#horizontal-section-15 .image-list.image-box-3{top:42%;right:130px;}
@media(max-width:768px){
	#horizontal-section-15 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 16 */
#horizontal-section-16 .image-list.image-box-2{right:30px;top:30%}
#horizontal-section-16 .image-list.image-box-3{right:350px;top:30%}
#horizontal-section-16 .text-block{top:34%;left:20px;}
@media(max-width:768px){
	#horizontal-section-16 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 17 */
#horizontal-section-17 .img-box-large{width: 100%;}
#horizontal-section-17 .text-block{top:40%;left:20px;}
#horizontal-section-17 .image-list.image-box-3{top:42%}
@media(max-width:768px){
	#horizontal-section-17 .img-box-large{height:60%}
}
/* 18 */
#horizontal-section-18 .img-box-large{width: 100%;}
#horizontal-section-18 .text-block{top:40%;left:20px;}
#horizontal-section-18 .image-list.image-box-3{right:40px;top:42%}
@media(max-width:768px){
	#horizontal-section-18 .img-box-large{height:60%}
}
/* 19 */
#horizontal-section-19 .text-block{top:34%;left:20px;}
#horizontal-section-19 .image-list.image-box-2{right:30px;top:30%}
#horizontal-section-19 .image-list.image-box-3{right:350px;top:30%}
@media(max-width:768px){
	#horizontal-section-19 .image-list.image-box-2{float:none;margin:0 auto;}
}
/* 20 */
#horizontal-section-20 .img-box-large{width: 100%;}
#horizontal-section-20 .text-block{top:40%;left:20px;}
#horizontal-section-20 .image-list.image-box-3{top:42%;right:130px;}