/*!
 * Start Bootstrap - Half Slider HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */


/* You can change the height of the carousel by changing the height in the class below. It is set to 50% by default, but can be any height! */

.mainvisual {position:relative;  height:100vh}
.carousel {position:relative; height:100%;}

.item,
.active,
.carousel-inner {height: 100%;}

/* Background images are set within the HTML using inline CSS, not here */
.fill {width: 100%; height: 100%;  background-position: left top; background-size:cover;  -webkit-background-size: covero;  -moz-background-size:cover; -o-background-size: cover;}

@media all and (max-width:1580px){
	.carousel {}
}

@media all and (max-width:1024px){
	.fill {background-position:right 80% top 0}
}

@media all and (max-width:768px){
	.fill {background-position:right 80% top 0}
}

@media all and (max-width:580px){
	.fill {background-position:left -40px top 0}
}





/* ÆäÀÌ¡ */
.carousel-indicators {display:none; position: absolute; bottom: 50px; z-index: 15; width: 100%; padding-left: 0; text-align: center; list-style: none;}
.carousel-indicators li {display: inline-block; width: 17px; height: 17px; margin:0 7px; text-indent: -999px; cursor: pointer; background-color: rgba(0, 0, 0, 0); border-radius: 10px; border:4px solid #fb9012}
.carousel-indicators .active {width: 17px; height: 17px; background-color: #fb9012; border:none;}

@media all and (max-width:1024px){
	.carousel-indicators {bottom:30px;}
}

@media all and (max-width:768px){
	.carousel-indicators {bottom:100px;}
	.carousel-indicators li {width: 14px; height: 14px; margin:0 8px; border:3px solid #fb9012; margin:0 5px;}
	.carousel-indicators .active {width: 14px; height: 14px;}
}




/* Á¿ì¹öÆ° */
.carousel-control {display:none; position: absolute; top: 0; bottom: 0; left: 0; width: 92px; font-size: 20px; color: #fff; text-align: center; /*text-shadow: 0 1px 2px rgba(0, 0, 0, .6); filter: alpha(opacity=50); opacity: .5;*/ z-index:1000;}
.carousel-control.left {background:url('../img/btn_left.png')no-repeat center 50%; font-size:0px;}
.carousel-control.right {right: 0; left: auto; background:url('../img/btn_right.png')no-repeat center 50%; font-size:0px;}
.carousel-control:hover,
.carousel-control:focus {color: #fff; text-decoration: none; /*filter: alpha(opacity=90); outline: 0; opacity: .9;*/}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {position: absolute;  top: 50%;  margin-top:-39px;z-index: 5; display: inline-block;}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left { left: 50%; margin-left: -0px;}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right { right: 50%; margin-right: -0px;}
.carousel-control .icon-prev,
.carousel-control .icon-next { width: 40px; height: 78px; margin-top: -10px; font-family: serif; line-height: 1;}
.carousel-control .icon-prev:before {}
.carousel-control .icon-next:before {}

@media all and (max-width:1024px){
	.carousel-control {width: 70px;}
	.carousel-control.left {background-size:40%}
	.carousel-control.right {background-size:40%}
}

@media all and (max-width:768px){
	.carousel-control {width: 40px;}
	.carousel-control.left {background-size:60%}
	.carousel-control.right {background-size:60%}
}

@media all and (max-width:480px){
	.carousel-control {width: 30px;}
	.carousel-control.left {background-size:60%}
	.carousel-control.right {background-size:60%}
}




/* ÅؽºÆ® */
.carousel-caption {width:100%; height:100%;}
.carousel-caption h2 {position:relative; display:flex; justify-content:center;  flex-direction:column; max-width:1665px; width:90%; height:90%; margin:0 auto;}
.carousel-caption h2 .big {font-family:var(--font4); font-size:82px; font-weight:700; color:#fff; line-height:100%; text-align:left; letter-spacing:-3px; padding-top:35px; animation: text 1s .5s both;}
.carousel-caption h2 .big br {display:none}
.carousel-caption h2 .small {font-size:18px; text-align:left; line-height:90%; margin-top:20px; line-height:170%; font-weight:500; color:#fff; animation: text 1s .7s both;}

@keyframes text {
	0%		{opacity:0; transform:translateY(30px);}
	100%		{opacity:1; transform:translateY(0);}
}


@media all and (max-width:1400px){
	.carousel-caption h2 .big {font-size:77px;}
}

@media all and (max-width:1300px){
	.carousel-caption h2 .big {font-size:72px;}
}

@media all and (max-width:1200px){
	.carousel-caption h2 .big {font-size:67px;}
}

@media all and (max-width:1024px){
	.carousel-caption h2 .big {font-size:62px;}
	.carousel-caption h2 .small {font-size:17px;}
}

@media all and (max-width:768px){
	.carousel-caption h2 .big {font-size:57px;}
	.carousel-caption h2 .big br {display:inline-block}
	.carousel-caption h2 .small {max-width:500px; width:100%; font-size:16px;}
	.carousel-caption h2 .small br {display:none}
}

@media all and (max-width:480px){
	.carousel-caption h2 .big {font-size:52px;}
}