@charset "utf-8";

/* ******************** 공용 - 수정금지 ******************** */
.slider {position:relative; overflow:hidden; height:100%;}
.slider .sliderObj li a {display:block; width:100%; height:100%; border:0; cursor:pointer;}
.slider .sliderObj li img {display:none;}
.slider .sliderObj li {
	position:absolute; width:100%; height:100%; top:0;
	background-position:50%;
	background-repeat:no-repeat;
	background-size:cover;
}
.slider .sliderObj li:not(:first-child) {
	display:none;
}


/* ******************** 슬라이드 타입 ******************** */
/* 좌우 */
.slider .normal {}
.slider .normal li {left:100%;}
.slider .normal li:first-child {left:0;}

/* 상하 */
.slider .updown {}
.slider .updown li {left:0; top:100%;}
.slider .updown li:first-child {left:0; top:0;}

/* 패이드 인 아웃 */
.slider .fade {opacity:1 !important;}
.slider .fade li {
	left:0; opacity:0;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
}
.slider .fade li:first-child {opacity:1;}



/* ******************** 버튼 타입 ******************** */
/* 버튼1 */
.slider .btnType1 {position:absolute; width:100%; top:50%; z-index:30;}
.slider .btnType1 a {
	position:absolute; display:block; width:37px; height:67px; margin-top:-30px; top:50%;
	cursor:pointer;	opacity:.5;
	background-repeat:no-repeat; 
}
.slider .btnType1 a:hover {opacity:1}
.slider .btnType1 a.bPrev {left:20px; background-image:url(../images/main/slide_prev.png);}
.slider .btnType1 a.bNext {right:20px; background-image:url(../images/main/slide_next.png);}

/* 버튼2 */
.slider .btnType2 {position:absolute; width:100%; b:50%;}
.slider .btnType2 a {
	position:absolute; display:block; width:104px; height:36px; margin-top:-15px; top:50%;
	cursor:pointer; border-radius:5px;
	background-color:rgba(0,0,0,.2); background-repeat:no-repeat; background-position:50%;
	
}
.slider .btnType2 a:hover {background-color:rgba(0,0,0,.5)}
.slider .btnType2 .bPrev {left:20px; background-image:url(../images/slider/prev_w.png);}
.slider .btnType2 .bNext {right:20px; background-image:url(../images/slider/next_w.png);}



/* ******************** 페이지 타입 ******************** */
/* 페이지1 */
.slider .pageType1 {z-index:200; display:inline-block; position:absolute; left:50% !important; bottom:140px; transform:translate(-50%,0); text-align:center;}
.slider .pageType1>* {display:inline-block; vertical-align:middle; line-height:0; font-size:0;}
.slider .pageType1>div>a {
	display:inline-block; margin:5px; width:18px; height:18px;
	border-radius:50%; border:4px solid #fff;
}
.slider .pageType1>div>a.on {background:#fff;}
.slider .pageType1>div>a:hover {background:rgba(255,255,255,1);}
.slider .pageType1 .bState {	
	width:25px; height:25px; border-radius:50%;
	background-image:url(../images/slider/pause_w.png);
	background-color:rgba(0,0,0,.3); background-repeat:no-repeat; background-position:50%;
	background-size:50%;
}
.slider .pageType1 .bState.play {	
	background-image:url(../images/slider/play_w.png);
	background-color:rgba(0,0,0,.7);	
}

/* 페이지2 */
.slider .pageType2 {position:absolute; width:auto; right:-10px; bottom:30px; padding:0 30px 0 0; text-align:right;}
.slider .pageType2>* {display:inline-block; vertical-align:middle; line-height:0; font-size:0;}
.slider .pageType2>div>a {
	display:inline-block; margin:5px; width:11px; height:11px;
	border-radius:50%; background:rgba(225,225,225,1);
}
.slider .pageType2>div>a.on {background:rgba(43,134,255,1) !important;}
.slider .pageType2>div>a:hover {background:rgba(209,209,209,1);}


/* 페이지3 */
.slider .pageType3 {position:absolute; width:100%; bottom:10px; padding:0; text-align:center;}
.slider .pageType3>* {display:inline-block; vertical-align:middle; line-height:0; font-size:0;}
.slider .pageType3>div>a {
	display:inline-block; margin:2px; width:23px; height:23px; line-height:1; font-size:11px; color:rgba(0,0,0,.5);
	background:rgba(255,255,255,.5);  border:1px solid #fff;
}
.slider .pageType3>div>a>span {display:inline-block; padding-top:5px; line-height:1;}
.slider .pageType3>div>a.on {color:rgba(0,0,0,1); font-weight:bold; background:rgba(255,255,255,1);}
.slider .pageType3 .bState {	
	width:23px; height:23px; border:1px solid #fff;
	background-image:url(../images/slider/pause.png);
	background-repeat:no-repeat; background-position:50%;
	background-size:50%;
	background-color:rgba(255,255,255,.5);
}
.slider .pageType3 .bState.play {	
	background-image:url(../images/slider/play.png);
	background-color:rgba(255,255,255,1);
}



/* --------------------------------------------- 메인 공지사항 -------------------------------------------- */


/* ******************** 공용 - 수정금지 ******************** */
.slider_notice {position:relative; overflow:hidden; height:100%;}
.slider_notice .sliderObj li a {display:block; width:100%; height:100%; border:0;}
.slider_notice .sliderObj li img {display:none;}
.slider_notice .sliderObj li {
	position:absolute; width:100%; height:100%; top:0;
	background-position:50%;
	background-repeat:no-repeat;
	background-size:cover;
}


/* ******************** 슬라이드 타입 ******************** */
/* 좌우 */
.slider_notice .normal {}
.slider_notice .normal li {left:100%;}
.slider_notice .normal li:first-child {left:0;}

/* 상하 */
.slider_notice .updown {height:80px;}
.slider_notice .updown li {left:0; top:100%;}
.slider_notice .updown li a {color:#666; font-size:16px;}
.slider_notice .updown li a:hover {color:#01b0f1;}
.slider_notice .updown li:first-child {left:0; top:0;}

/* 패이드 인 아웃 */
.slider_notice .fade {opacity:1 !important;}
.slider_notice .fade li {
	left:0; opacity:0;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
}
.slider_notice .fade li:first-child {opacity:1;}



/* ******************** 버튼 타입 ******************** */
/* 버튼1 */
.slider_notice .btnType1 {position:absolute; width:100%; top:50%;}
.slider_notice .btnType1 a {
	position:absolute; display:block; width:60px; height:60px; margin-top:-30px; top:50%;
	cursor:pointer;	opacity:.5;
	background-repeat:no-repeat; background-position:50%; background-size:50%;
}
.slider_notice .btnType1 a:hover {opacity:1}
.slider_notice .btnType1 a.bPrev {left:20px; background-image:url(../images/slider/prev.png);}
.slider_notice .btnType1 a.bNext {right:20px; background-image:url(../images/slider/next.png);}

/* 버튼2 */
.slider_notice .btnType2 {position:absolute; width:100%; top:50%;}
.slider_notice .btnType2 a {
	position:absolute; display:block; width:30px; height:30px; margin-top:-15px; top:50%;
	cursor:pointer; border-radius:5px;
	background-color:rgba(0,0,0,.2); background-repeat:no-repeat; background-position:50%;
	background-size:50%;
}
.slider_notice .btnType2 a:hover {background-color:rgba(0,0,0,.5)}
.slider_notice .btnType2 .bPrev {left:20px; background-image:url(../images/slider/prev_w.png);}
.slider_notice .btnType2 .bNext {right:20px; background-image:url(../images/slider/next_w.png);}



/* --------------------------------------------- 메인 상품 -------------------------------------------- */

.slider_product {position:relative; overflow:hidden; margin:50px auto; height:320px;}
.slider_product .sliderObj .tableWrap a {display:block; width:100%; height:100%; border:0;}
.slider_product .sliderObj .tableWrap img {display:none;}
.slider_product .sliderObj .tableWrap {
	position:absolute; width:100%; height:100%; top:0;
	background-position:50%;
	background-repeat:no-repeat;
	background-size:cover;
}

.slider_product .cube {display:inline-block !important;}
.slider_product .tableWrap {margin:0 auto; text-align:center;}
.slider_product .cube {max-width:350px;}

.slider_product .sliderObj .cube.on {
	position:absolute; width:100%; height:100%; top:0; left:-100%;
	background-position:50%;
	background-repeat:no-repeat;
	background-size:cover;
	background:#fff !important;
	
}
.slider_product .sliderObj section {width:100%; float:left; display:inline-block; padding:0 15px !important;}
.slider_product .bPrev {left:0 !important;}
.slider_product .bNext {right:0 !important;}

/* ******************** 슬라이드 타입 ******************** */
/* 좌우 */
.slider_product .normal {}
.slider_product .normal .tableWrap {left:100%;}
.slider_product .normal .tableWrap:first-child {left:0;}

/* 상하 */
.slider_product .updown {}
.slider_product .updown .tableWrap {left:0; top:100%;}
.slider_product .updown .tableWrap:first-child {left:0; top:0;}

/* 패이드 인 아웃 */
.slider_product .fade {opacity:1 !important;}
.slider_product .fade .tableWrap {
	left:0; opacity:0;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
}
.slider_product .fade .tableWrap:first-child {opacity:1;}

/* ******************** 버튼 타입 ******************** */
/* 버튼3 */
.slider_product .btnType3 {position:absolute; width:100%; top:45%;}
.slider_product .btnType3 a {
	position:absolute; display:block; width:55px; height:55px; margin-top:-15px; top:50%;
	cursor:pointer;background-repeat:no-repeat; background-position:50%;
	background-size:50%; opacity:.5;
}
.slider_product .btnType3 a:hover {opacity:1;}
.slider_product .btnType3 .bPrev {left:20px !important; background-image:url(../images/common/pro_slide_prev.png) !important;}
.slider_product .btnType3 .bNext {right:20px !important; background-image:url(../images/common/pro_slide_next.png) !important;}

/* ******************** 페이지 타입 ******************** */
/* 페이지3 */
.slider_product .pageType3 {position:absolute; width:100%; bottom:10px; padding:0; text-align:center; z-index:88;}
.slider_product .pageType3>* {display:inline-block; vertical-align:middle; line-height:0; font-size:0;}	
.slider_product .pageType3>div>a {
	display:inline-block; margin:5px; width:15px; height:15px;
	border-radius:50%; background:#e1e1e1;
}
.slider_product .pageType3>div>a.on {background:rgba(211,179,91,1) !important;}
.slider_product .pageType3>div>a:hover {background:#ddd;}



/* --------------------------------------------- 메인 사례 -------------------------------------------- */

.slider_example {position:relative; overflow:hidden;}
.slider_example .sliderObj .tableWrap a {display:block; width:100%; height:100%; border:0;}
.slider_example .sliderObj .tableWrap img {display:none;}
.slider_example .sliderObj .tableWrap {
	position:absolute; width:100%; height:100%; top:0;
	background-position:50%;
	background-repeat:no-repeat;
	background-size:cover;
}

.slider_example .cube {display:inline-block !important;}
.slider_example .tableWrap {margin:0 auto; text-align:center;}
.slider_example .cube {max-width:280px; margin-top:20px;}

.slider_example .sliderObj .cube.on {
	position:absolute; width:100%; height:100%; top:0; left:-100%;
	background-position:50%;
	background-repeat:no-repeat;
	background-size:cover;
	background:#fff !important;
}
.slider_example .sliderObj section {width:100%; float:left; display:inline-block; padding:0 15px !important;}
.slider_example .bPrev {left:0 !important;}
.slider_example .bNext {right:0 !important;}

/* ******************** 슬라이드 타입 ******************** */
/* 좌우 */
.slider_example .normal {}
.slider_example .normal .tableWrap {left:100%;}
.slider_example .normal .tableWrap:first-child {left:0;}

/* 상하 */
.slider_example .updown {}
.slider_example .updown .tableWrap {left:0; top:100%;}
.slider_example .updown .tableWrap:first-child {left:0; top:0;}

/* 패이드 인 아웃 */
.slider_example .fade {opacity:1 !important;}
.slider_example .fade .tableWrap {
	left:0; opacity:0;
	transition:all 0.3s linear;
	-webkit-transition:all 0.3s linear;
	-moz-transition:all 0.3s linear;
}
.slider_example .fade .tableWrap:first-child {opacity:1;}

/* ******************** 버튼 타입 ******************** */
/* 버튼4 */
.slider_example .btnType4 {position:absolute; width:100%; top:45%;}
.slider_example .btnType4 a {
	position:absolute; display:block; width:29px; height:51px; margin-top:-15px; top:50%;
	cursor:pointer;background-repeat:no-repeat; background-position:center;
	background-size:50%; opacity:.5;
	z-index:1;
}
.slider_example .btnType4 a:hover {opacity:1;}
.slider_example .btnType4 .bPrev {left:-5px !important; background-image:url(../images/common/pro_slide_prev.png) !important;}
.slider_example .btnType4 .bNext {right:15px !important; background-image:url(../images/common/pro_slide_next.png) !important;}



/* ************************ 태블릿 이하(~991) << 태블릿 세로 >> ************************ */
@media screen and (max-width: 991px) {
	.slider_notice .updown {height:50px;}
	.slider_notice .updown li a {font-size:14px;}
	.slider .sliderPage, .slider .sliderButton {display:none !important;}
	.slider .pageType1 {bottom:30px;}
	.slider .pageType1>div>a {width:15px; height:15px; border:3px solid #fff;}
	
	
	/* -------- 메인 상품 -------- */
	.slider_product {margin:30px auto; height:320px;}
	.slider_product .cube {max-width:350px;}
	.slider_product .btnType3 a {
		width:30px; height:30px; margin-top:-15px; top:50%;
		cursor:pointer;background-repeat:no-repeat; background-position:50%;
		background-size:50%; opacity:.5;
	}
	.slider_product .btnType3 .bPrev {left:10px !important;}
	.slider_product .btnType3 .bNext {right:10px !important;}

}
