@charset "utf-8";

/* ******************** 공용 - 수정금지 ******************** */
.slider {position:relative; overflow:hidden; height:100%;}
.slider .sliderObj li a {display:block; width:100%; height:100%; border:0;}
/* .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 .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;}



/* ******************** 버튼 타입 ******************** */
@media screen and (min-width: 992px) {
	.slider .btnType3 {z-index:1000; position:absolute; bottom:15vh; left:10vw; -webkit-transform:rotate(-90deg);}
	.slider .btnType3 a {position:absolute; display:inline-block; top:0; right:0; width:30px; height:30px;}
	.slider .btnType3 a:hover div {border-color:#1fb3ec;}
	.slider .btnType3 a div {
		position:absolute; left:25%; top:25%; display:block; width:50%; height:50%; border:3px solid #000;	
		transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);
	}
	.slider .btnType3 a.bPrev {top:0;}
	.slider .btnType3 a.bPrev div {border-left:0; border-bottom:0;}
	.slider .btnType3 a.bNext {top:50px;}
	.slider .btnType3 a.bNext div {border-top:0; border-right:0;}
}
@media screen and (max-width: 991px) {
	.slider .btnType3 {z-index:1000; position:absolute; top:55%; right:5%;}
	.slider .btnType3 a {position:absolute; display:inline-block; top:0; right:0; width:30px; height:30px; opacity:.5;}
	.slider .btnType3 a:hover {opacity:1;}
	.slider .btnType3 a div {
		position:absolute; left:25%; top:25%; display:block; width:50%; height:50%; border:1px solid #fff;	
		transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);
	}
	.slider .btnType3 a.bPrev {top:-30px;}
	.slider .btnType3 a.bPrev:hover {top:-40px;}
	.slider .btnType3 a.bPrev div {border-left:0; border-bottom:0;}
	.slider .btnType3 a.bNext {top:0px;}
	.slider .btnType3 a.bNext:hover {top:10px;}
	.slider .btnType3 a.bNext div {border-top:0; border-right:0;}
}



/* ******************** 페이지 타입 ******************** */
/* 페이지1 */
.slider .pageType1 {position:absolute; width:100%; bottom:10px; padding: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:15px; height:15px;
	border-radius:50%; background:rgba(255,255,255,.7);
}
.slider .pageType1>div>a.on {background:rgba(255,176,59,1) !important;}
.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);	
}
.slider .hidden {display:none;}

/* 페이지2 */
.slider .pageType2 {position:absolute; width:100%; bottom:10px; padding:0; text-align:center;}
.slider .pageType2>* {display:inline-block; vertical-align:middle; line-height:0; font-size:0;}
.slider .pageType2>div>a {
	display:inline-block; margin:5px; width:15px; height:6px; line-height:0; font-size:0;
	border-radius:3px; background:rgba(0,0,0,.2);
}
.slider .pageType2>div>a.on {background:rgba(0,0,0,6);}
.slider .pageType2 .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%; border-radius:50%;
	background-color:rgba(255,255,255,.5);
}
.slider .pageType2 .bState.play {	
	background-image:url(../images/slider/play.png);
	background-color:rgba(255,255,255,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);
}


@media screen and (min-width: 992px) {
	.slider .bar {z-index:0; position:absolute; display:block; width:90vw; left:5vw; top:60%; height:1px; background-color:rgba(255,255,255,.1);}
	.slider .bar .grap {position:absolute; display:block; width:100%; height:1px; overflow:hidden;}
	.slider .bar .grap li {position:absolute; display:block; left:50%; width:0; top:0; height:1px; background-color:#fff; opacity:.5;}
	.slider .bar .grap li.on {
		width:100%; left:0;
		transition:all 6s ease-in-out !important;
		-webkit-transition:all 6s ease-in-out !important;
		-moz-transition:all 6s ease-in-out !important;
	}
}

@media screen and (max-width: 991px) {
	.slider .bar {z-index:0; position:absolute; display:block; width:90%; left:5%; top:55%; height:1px; background-color:rgba(255,255,255,.2);}
	.slider .bar .grap {position:absolute; display:block; width:100%; height:1px; overflow:hidden;}
	.slider .bar .grap li {position:absolute; display:block; width:0; top:0; left:50%; height:1px; background-color:#fff; opacity:.5;}

	
}