@charset "utf-8";

/* 메인비주얼 */
.mv-wrap {
	position: relative;
}
.mv .item {
	position: relative;
	height: 843px;
}
.mv .slick-slide .bg {
	width:100%;
	height:843px;
	background-repeat: no-repeat !important;
	background-position: 50% 50% !important;
	background-size: cover !important;
}
.mv .slick-slide.slick-active .bg {
	-webkit-animation:KEYFRAME 5s both;
	-moz-animation:   KEYFRAME 5s both;
	-o-animation:     KEYFRAME 5s both;
	animation:        KEYFRAME 5s both;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}
	@-webkit-keyframes KEYFRAME {
	  0% {-webkit-transform:scale(1.2);transform:scale(1.2)}
	  100% {-webkit-transform:scale(1.0);transform:scale(1.0)}
	}
	@-moz-keyframes KEYFRAME {
	  0% {-webkit-transform:scale(1.2);transform:scale(1.2)}
	  100% {-webkit-transform:scale(1.0);transform:scale(1.0)}
	}
	@-o-keyframes KEYFRAME {
	  0% {-webkit-transform:scale(1.2);transform:scale(1.2)}
	  100% {-webkit-transform:scale(1.0);transform:scale(1.0)}
	}
	@keyframes KEYFRAME {
	  0% {-webkit-transform:scale(1.2);transform:scale(1.2)}
	  100% {-webkit-transform:scale(1.0);transform:scale(1.0)}
	}

.mv .item .text {
    position: absolute;
    top: 230px;
    left: 0;
    right: 0;
    width: 900px;
    margin: 0 auto;
	padding-left: 350px;
    color: #fff;
    font-size: 58px;
    line-height: 1.3;
    -webkit-animation-duration: 1.3s;
    animation-duration: 1.3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.mv .slick-slide.slick-active .text {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

.mv-control {
	position: absolute;
	z-index: 9;
	top: 410px;
	left: 0;
    right: 0;
    width: 900px;
    margin: 0 auto;
	padding-left: 350px;
}
.mv-dots{
	padding-left: 20px
}
.mv-dots li {
	display: inline-block;
	margin: 0 5px;
}
.mv-dots li button {
	border: 1px solid #fff;
	border-radius: 100%;
	padding: 0;
	width: 10px;
	height: 10px;
	background: transparent;
	text-indent: -999em;
}
.mv-dots li.slick-active button {
	width: 25px;
	border-radius: 10px;
	background: #fff;
} 
.mv-arrows {
	position: relative;
	width: 115px;
}
.mv-arrows .slick-arrow {
	text-indent: -999em;
	outline: 0;
	padding: 0;
	width:7px;
	height: 12px;
	border: 0;
	position: absolute;
	top: 9px;
}
.mv-arrows .slick-prev {
	background: url('/image/main/small_prev.png') no-repeat;
	left: 0;
}
.mv-arrows .slick-next {
	background: url('/image/main/small_next.png') no-repeat;
	right: 0;
}

.mv-link {
	position: absolute;
	bottom: 65px;
	left: 0;
    right: 0;
    width: 900px;
    margin: 0 auto;
	padding-left: 350px;
}
.mv-link ul {
	float: right;
	width: 600px;
	background: #fff;
	padding: 40px 15px;
	border-radius: 0 30px 0 30px;
	box-sizing: border-box;
	height: 120px;
}
.mv-link ul li {
	width: 33.333%;
	text-align: Center;
}
.mv-link ul li a {
	font-size: 20px;
	displaY: block;
	border-right: 1px solid #ddd;
}
.mv-link ul li:last-child a {
	border-right: 0;
}
.mv-link ul li a img {
	vertical-align: middle;
	margin-right: 15px;
}

.family-site {
	padding: 25px 0;
	margin-left: 350px;
	background: #fff;
}
.family-site .title {
	font-weight: bold;
	position: absolute;
	left: 0;
	top: 12px;
	font-size: 20px;
}
.family-site .control {
	position: absolute;
	left: 0;
	top: 10px;
	padding: 0 30px;
}
.family-site .control .goStop {
	background: url('/image/main/bot_arw.png') no-repeat;
	background-position: center;
	height: 32px;
	width: 32px;
}

.site-arw .slick-arrow {
	background: url('/image/main/bot_arw.png') no-repeat;
	height: 32px;
	width: 30px;
	border: 0;
	text-indent:-9999em;
	position: absolute;
	top: 0;
}
.site-arw .slick-prev {
    background-position: left;
    left: 0;
}
.site-arw .slick-next {
    background-position: right;
    right: 0;
}
.site-slide {
	margin-left: 100px;
}
.site-slide .item {
	margin-left: 40px;
}
.site-slide .item img {
	margin: 0 auto;
}