﻿/* body {
    line-height:1;
	background:url(../images/3collection클릭.jpg);
	background-repeat: no-repeat;
	background-position: top;  
}
 */
 
/* -------img01------- */
#img01{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
	
}
.btn_x{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x img{
	cursor: pointer;
}
.yj-slider {width:464px; margin:0 auto; position:relative; height:656px}
.yj-slider .yj-screen {width:100%; overflow:hidden; position:relative;}
.yj-slider .yj-screen .imgs {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs li img {width:100%;}

.yj-slider .yj-screen .imgs2 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs2 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs2 li img {width:100%;}

.yj-slider .yj-screen .imgs3 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs3 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs3 li img {width:100%;}

.yj-slider .yj-screen .imgs4 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs4 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs4 li img {width:100%;}

.yj-slider .yj-screen .imgs5 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs5 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs5 li img {width:100%;}

.yj-slider .yj-screen .imgs6 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs6 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs6 li img {width:100%;}

.yj-slider .yj-screen .imgs7 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs7 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs7 li img {width:100%;}

.yj-slider .yj-screen .imgs8 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs8 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs8 li img {width:100%;}

.yj-slider .yj-screen .imgs9 {width:400%; height:656px; position:relative; left:-135%;}
.yj-slider .yj-screen .imgs9 li {width:25%; position:absolute; left:33.5%; top:0;}
.yj-slider .yj-screen .imgs9 li img {width:100%;}
.yj-slider .yj-controls {}
.yj-slider .yj-controls a {display:inline-block; position:absolute; font-size:14px; color:#666;}
.yj-slider .yj-controls .yj-prev {top:40%; left:-262px;cursor: pointer;width:88px;height:90px;background:url("../images/btn_left.png") no-repeat left top}
.yj-slider .yj-controls .yj-next {top:40%; right:-264px;cursor: pointer;background:url("../images/btn_right.png") no-repeat left top;width:88px;height:90px;}

#thumbnail .container{
	overflow: hidden;
	width: 100%;
	height: 656px;
	position: relative;
}





#thumbnail .container .thumb.m10{
	margin-left: 0;
}
/* -------img01끝------- */

/* -------img02------- */
#img02{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_02{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_02{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_02 img{
	cursor: pointer;
}
#thumbnail_02 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_02 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}







/* -------img02끝------- */

/* -------img03------- */
#img03{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_03{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_03{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_03 img{
	cursor: pointer;
}
#thumbnail_03 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_03 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}




/* -------img03끝------- */

/* -------img04------- */
#img04{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_04{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_04{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_04 img{
	cursor: pointer;
}
#thumbnail_04 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_04 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}

/* -------img04끝------- */

/* -------img05------- */
#img05{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_05{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_05{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_05 img{
	cursor: pointer;
}
#thumbnail_05 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_05 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}


/* -------img05끝------- */

/* -------img06------- */
#img06{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_06{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_06{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_06 img{
	cursor: pointer;
}
#thumbnail_06 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_06 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}


/* -------img06끝------- */

/* -------img07------- */
#img07{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_07{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_07{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_07 img{
	cursor: pointer;
}
#thumbnail_07 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_07 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}


/* -------img07끝------- */

/* -------img08------- */
#img08{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_08{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_08{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_08 img{
	cursor: pointer;
}
#thumbnail_08 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_08 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}


/* -------img08끝------- */

/* -------img09------- */
#img09{
	position: absolute;
	width: 990px;
	height: 765px;
	top: -100px;
	left: -100px;
	background-image: url(../images/3collection.png);
}
#thumbnail_09{
	width: 990px;
	height: 765px;
	margin: 45px auto 0;
}

.btn_x_09{
	position: relative;
	text-align: center; 	
	margin-left: 522px;
}
.btn_x_09 img{
	cursor: pointer;
}
#thumbnail_09 .left{
	width: 88px;
	height: 98px;
	margin: 290px 163px 0 0;
	text-align: center; 
	cursor: pointer;
}

#thumbnail_09 .right{
	width: 88px;
	height: 98px;
	margin: 290px 0 0 163px;
	text-align: center; 
	cursor: pointer;
}

/* -------img09끝------- */
	@media screen and (min-width:801px) {
		#img01{left:-100px !important}
		#img02{left:-100px !important}
		#img03{left:-100px !important}
		#img04{left:-100px !important}
		#img05{left:-100px !important}
		#img06{left:-100px !important}
		#img07{left:-100px !important}
		#img08{left:-100px !important}
		#img09{left:-100px !important}
		
		#thumbnail{margin:0 auto !important}
		#thumbnail_02{margin:0 auto !important}
		#thumbnail_03{margin:0 auto !important}
		#thumbnail_04{margin:0 auto !important}
		#thumbnail_05{margin:0 auto !important}
		#thumbnail_06{margin:0 auto !important}
		#thumbnail_07{margin:0 auto !important}
		#thumbnail_08{margin:0 auto !important}
		#thumbnail_09{margin:0 auto !important}
	}
	@media screen and (max-width:800px) {
		
		#img01{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x{margin-left:0;left:37%;top:10px}
		#thumbnail{width:70%;margin:10px auto}
		.yj-slider {width:100%;margin:0;left:0}
		.yj-slider .yj-controls .yj-prev{top:45%;left:-15px;width:65px;background-size:65px}
		.yj-slider .yj-controls .yj-next{top:45%;right:-15px;width:65px;background-size:65px}
		 #thumbnail .container{width:100%}
		 #thumbnail .container .thumb{width:25%}
		 #thumbnail .container .thumb img{width:100%}
		 #thumbnail .container ul{width:400%}
		
		#img02{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_02{margin-left:0;left:37%;top:10px}
		#thumbnail_02{width:70%;margin:10px auto}
		#thumbnail_02 .container{width:100%}
		 #thumbnail_02 .container .thumb{width:25%}
		 #thumbnail_02 .container .thumb img{width:100%}
		 #thumbnail_02 .container ul{width:400%}
		
		#thumbnail_02 .left{margin:0;position:absolute;top:267px;left:10px;}
		#thumbnail_02 .right{margin:0;position:absolute;top:267px;right:10px;}	
		
		#img03{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_03{margin-left:0;left:37%;top:10px}
		#thumbnail_03{width:70%;margin:10px auto}
		#thumbnail_03 .container{width:100%;}
		#thumbnail_03 .container .thumb{width:25%}
		#thumbnail_03 .container .thumb img{width:100%}
		#thumbnail_03 .container ul{width:400%}
		#thumbnail_03 .left{margin:0;position:absolute;top:267px;left:10px}
		#thumbnail_03 .right{margin:0;position:absolute;top:267px;right:10px}	
		
		#img04{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_04{margin-left:0;left:37%;top:10px}
		#thumbnail_04{width:70%;margin:10px auto}
		#thumbnail_04 .container{width:100%;}
		#thumbnail_04 .container .thumb{width:25%}
		#thumbnail_04 .container .thumb img{width:100%}
		#thumbnail_04 .container ul{width:400%}
		#thumbnail_04 .left{margin:0;position:absolute;top:267px;left:10px}
		#thumbnail_04 .right{margin:0;position:absolute;top:267px;right:10px}	
		
		
		#img05{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_05{margin-left:0;left:37%;top:10px}
		#thumbnail_05{width:70%;margin:10px auto}
		#thumbnail_05 .container{width:100%;}
		#thumbnail_05 .container .thumb{width:25%}
		#thumbnail_05 .container .thumb img{width:100%}
		#thumbnail_05 .container ul{width:400%}
		#thumbnail_05 .left{margin:0;position:absolute;top:267px;left:10px}
		#thumbnail_05 .right{margin:0;position:absolute;top:267px;right:10px}
		
		#img06{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_06{margin-left:0;left:37%;top:10px}
		#thumbnail_06{width:70%;margin:10px auto}
		#thumbnail_06 .container{width:100%;}
		#thumbnail_06 .container .thumb{width:25%}
		#thumbnail_06 .container .thumb img{width:100%}
		#thumbnail_06 .container ul{width:400%}
		#thumbnail_06 .left{margin:0;position:absolute;top:267px;left:10px}
		#thumbnail_06 .right{margin:0;position:absolute;top:267px;right:10px}
		
		#img07{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_07{margin-left:0;left:37%;top:10px}
		#thumbnail_07{width:70%;margin:10px auto}
		#thumbnail_07 .container{width:100%;}
		#thumbnail_07 .container .thumb{width:25%}
		#thumbnail_07 .container .thumb img{width:100%}
		#thumbnail_07 .container ul{width:400%}
		#thumbnail_07 .left{margin:0;position:absolute;top:267px;left:10px}
		#thumbnail_07 .right{margin:0;position:absolute;top:267px;right:10px}
		
		#img08{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_08{margin-left:0;left:37%;top:10px}
		#thumbnail_08{width:70%;margin:10px auto}
		#thumbnail_08 .container{width:100%;}
		#thumbnail_08 .container .thumb{width:25%}
		#thumbnail_08 .container .thumb img{width:100%}
		#thumbnail_08 .container ul{width:400%}
		#thumbnail_08 .left{margin:0;position:absolute;top:267px;left:10px}
		#thumbnail_08 .right{margin:0;position:absolute;top:267px;right:10px}
		
		#img09{height:100%;width:100%;left:0;top:70px;position:fixed;-webkit-transform: translateZ(0);}
		.btn_x_09{margin-left:0;left:37%;top:10px}
		#thumbnail_09{width:70%;margin:10px auto}
		#thumbnail_09 .container{width:100%;}
		#thumbnail_09 .container .thumb{width:25%}
		#thumbnail_09 .container .thumb img{width:100%}
		#thumbnail_09 .container ul{width:400%}
		#thumbnail_09 .left{margin:0;position:absolute;top:267px;left:10px}
		#thumbnail_09 .right{margin:0;position:absolute;top:267px;right:10px}
	}
	
		@media screen and (max-width:430px) {
			.yj-slider .yj-controls .yj-prev{top:30%;background-size:40px;width:40px;left:-8px}
			.yj-slider .yj-controls .yj-next{top:30%;background-size:40px;width:40px;right:-8px}

			}

		@media screen and (max-width:350px) {
			.yj-slider .yj-controls .yj-prev{top:20%}
			.yj-slider .yj-controls .yj-next{top:20%}
		}
