/* 메인 */


.visual_ba{ position:absolute; bottom:30px; z-index:1000; right:50px;}


#visual{width:98%;margin:100px auto 0 ; border-radius:12px; overflow:hidden; }
.site-main { background: #fff; }
.main { position: relative; top: 0; }

.main .slogan {
	position: absolute;
	left:50%;  transform:translateX( -50%);
	top: 44%;
	z-index: 10;
	color: #fff;text-align:Center;  width:100%; 
}

.main .slogan h1 span, .main .slogan p, .main .slogan .main_txt01:nth-child(2) i {
	animation: fadeUp 1s both;
	-webkit-animation: fadeUp 1s both;
	-ms-animation: fadeUp 1s both;
	-o-animation: fadeUp 1s both;
}


.main .slogan .main_txt {
	
	overflow: hidden; text-shadow:1px 5px 10px rgba(0,0,0,0.1) ;
	 align-items: center; 
	font-size:62px; color:#fff; font-family: 'Paytone One', sans-serif; animation-delay: .5s; -webkit-nimation-delay: .5s; -ms-nimation-delay: .5s; -o-nimation-delay: .5s;
}
.main .slogan .main_txt span{color:#fffd34; margin-right:6px;}
.main .slogan p.s_txt { text-shadow:1px 5px 10px rgba(0,0,0,0.1) ; animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; margin-bottom:0px;  font-size:27px; font-weight: 300; font-family: 'Noto Sans KR', sans-serif; }

@keyframes line1 {
	from { width: 0; }
	to { width: 100%; }
}
@-webkit-keyframes line1 {
	from { width: 0; }
	to { width: 100%; }
}
@-ms-keyframes line1 {
	from { width: 0; }
	to { width: 100%; }
}
@-o-keyframes line1 {
	from { width: 0; }
	to { width: 100%; }
}
@keyframes line2 {
	from { height: 0; }
	to { height: 100%; }
}
@-webkit-keyframes line2 {
	from { height: 0; }
	to { height: 100%; }
}
@-ms-keyframes line2 {
	from { height: 0; }
	to { height: 100%; }
}
@-o-keyframes line2 {
	from { height: 0; }
	to { height: 100%; }
}
@keyframes ring {
	0% {
		transform: rotate(0deg);
		border-color: #FF560E transparent transparent transparent;
	}
	100% {
		transform: rotate(360deg);
		border-color: #FF560E;
	}
}
@-webkit-keyframes ring {
	0% {
		transform: rotate(0deg);
		border-color: #FF560E transparent transparent transparent;
	}
	100% {
		transform: rotate(360deg);
		border-color: #FF560E;
	}
}
@-ms-keyframes ring {
	0% {
		transform: rotate(0deg);
		border-color: #FF560E transparent transparent transparent;
	}
	100% {
		transform: rotate(360deg);
		border-color: #FF560E;
	}
}
@-o-keyframes ring {
	0% {
		transform: rotate(0deg);
		border-color: #FF560E transparent transparent transparent;
	}
	100% {
		transform: rotate(360deg);
		border-color: #FF560E;
	}
}

.main_slider { /*height: 100vh;*/ position: relative; overflow: hidden; }
.main_slider .swiper-slide {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.main_slider .swiper-slide img { width: 100%; }
.main_slider .swiper-slide p {
	font-size: 0.89rem;
	font-weight: 700;
	letter-spacing: -0.05em;
	color: #fff;
	position: absolute;
	bottom: 72px;
	right: 239px;
}
.main_slider .progress_bar.animate .bar { width: 100%; }
.main_slider .bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: rgba(0, 0, 0, 0.4);
	z-index: 10;
}

.main_slider .bar::after {
	position: absolute;
	top: 0;
	left: 0;
	background: #FF560E;
	height: 100%;
	width: 0;
	content: "";
	transition: 0.1s width linear;
	z-index: 10
}

.main_slider .bar.animate:after {
	transition: width linear;
	transition-delay: unset;
	width: 100%;
	transition-duration: 5s;
}
.main_slider .controller {
	position: absolute;
	left: 50%; transform:translateX(-50%); z-index:10;
	bottom:150px;
}
.main_slider .swiper-pagination-bullet { display: none; width: auto; height: auto; background: none; border-radius: 0; font-size: 0.88rem; }
.main_slider .swiper-pagination-bullet-active { display: block; }
.controller {
	/* width: 134px; */
	display: flex;
	align-items: center;
}
.controller .swiper-button-prev,
.controller .swiper-button-next {
	width: 17px;
	height: 28px;
	background: url("../images/main/left_bt.png") no-repeat center center;
	background-size: contain;
	position: static;
	margin-top: 3px;
}
.controller .swiper-button-next {
	transform: rotate(180deg);
}
.controller .counter { position: relative; z-index: 10; }
.controller .swiper-pagination, .controller .counter {
	position: static;
	color: #fff;
	font-size: 0;
	width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.controller .swiper-pagination span, .controller .counter span { font-size: 0.89rem; }
.controller .swiper-pagination-current, .controller .counter .cur-num { font-weight: 700; }
.controller .swiper-pagination-current:after,
.controller .counter .cur-num:after {
	display: inline-block;
	vertical-align: middle;
	margin: -3px 15px 0;
	width: 1px;
	height: 10px;
	background: #fff;
	opacity: .3;
	content: '';
}
.main .controller .swiper-pagination { width: auto; margin-right: 33px; display:none }

.mo{display:none}



@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@-webkit-keyframes fadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@-ms-keyframes fadeUp {
	from {
		opacity: 0;
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}



@media(max-width:1200px){


#visual{width:96%;margin:75px auto 0 ;}
.site-main { background: #fff; }
.main { position: relative; top: 0;}

.main_slider{}
.main_slider .controller {
	position: absolute;
	left: 50%; transform:translateX(-50%); z-index:10;
	bottom: 77px;
}

.pc{display:none}
.mo{display:block}


.main .slogan {
	position: absolute;
	left:50%;  transform:translateX( -50%);
	top: 40%;
	z-index: 10;
	color: #fff;text-align:Center;  width:80%; 
}

.main .slogan h1 span, .main .slogan p, .main .slogan .main_txt01:nth-child(2) i {
	animation: fadeUp 1s both;
	-webkit-animation: fadeUp 1s both;
	-ms-animation: fadeUp 1s both;
	-o-animation: fadeUp 1s both;
}


.main .slogan .main_txt {
	
	overflow: hidden; text-shadow:1px 5px 10px rgba(0,0,0,0.1) ;padding-bottom:20px;
	 align-items: center; letter-spacing:-0.5px; line-height:3.2rem;
	font-size:3rem; color:#fff; font-family: 'Paytone One', sans-serif; animation-delay: .5s; -webkit-nimation-delay: .5s; -ms-nimation-delay: .5s; -o-nimation-delay: .5s;
}
.main .slogan .main_txt span{color:#fffd34; margin-right:6px;}
.main .slogan p.s_txt { text-shadow:1px 5px 10px rgba(0,0,0,0.1) ; animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; margin-bottom:15px; 
font-size:1.2rem; font-weight: 300; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-0.5px }



}



@media(max-width:768px){
#visual{width:94%; height:100%;  margin:75px auto 0 ;   overflow:hidden; perspective:1px; }

.visual_ba{ position:absolute; bottom:5px; z-index:1000; right:-50px; }
.visual_ba img{width:65%}

.main .slogan {
	position: absolute;
	left:50%;  transform:translateX( -50%);
	top: 34%;
	z-index: 10;
	color: #fff;text-align:Center;  width:80%; 
}

.main .slogan h1 span, .main .slogan p, .main .slogan .main_txt01:nth-child(2) i {
	animation: fadeUp 1s both;
	-webkit-animation: fadeUp 1s both;
	-ms-animation: fadeUp 1s both;
	-o-animation: fadeUp 1s both;
}


.main .slogan .main_txt {
	
	overflow: hidden; text-shadow:1px 5px 10px rgba(0,0,0,0.1) ;
	 align-items: center; letter-spacing:-0.5px; line-height:2.0rem;
	font-size:2rem; color:#fff; font-family: 'Paytone One', sans-serif; animation-delay: .5s; -webkit-nimation-delay: .5s; -ms-nimation-delay: .5s; -o-nimation-delay: .5s;
}
.main .slogan .main_txt span{color:#fffd34; margin-right:6px;}
.main .slogan p.s_txt { text-shadow:1px 5px 10px rgba(0,0,0,0.1) ; animation-delay: 1s; -webkit-animation-delay: 1s; -ms-animation-delay: 1s; -o-animation-delay: 1s; margin-bottom:7px; 
font-size:1rem;line-height:1.2rem; font-weight: 400; font-family: 'Noto Sans KR', sans-serif; letter-spacing:-0.5px }




}