@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2020-11-25
******************************************************** */

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:740px; position:relative;}	/* 비주얼높이값 이미지에맞게 수정 */
#mainVisual.full-height,
#fullpage #mainVisual{height:1000px;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	 -webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img, .main-visual-item .main-visual-m-img{
	width:100%; height:100%; display: flex; align-items: center;
	background-size:cover !important;
	opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s;
}
.main-visual-item .main-visual-pc-img .area-box2{width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box;}
/* 2번째 섹션 추가 css */
.main-visual-item.item02 .main-visual-pc-img .area-box2{margin-top: 105px;}
.main-visual-item .main-visual-pc-img img, .main-visual-item .main-visual-m-img img{opacity: 0; -webkit-transition: opacity 0.7s; transition: opacity 0.7s; transition-delay:0.3s; animation: upDown 2s ease-in-out infinite;}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-item .main-visual-txt-con{
	position:absolute; 
	top:50%; left:0px; 
	width:100%; 
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.main-visual-txt-inner{width: 46.5%; float: right;}
.main-visual-item .main-visual-txt-con .main-visual-txt1,
.main-visual-item .main-visual-txt-con .main-visual-txt2,
.main-visual-item .main-visual-txt-con .main-visual-txt3,
.main-visual-item .main-visual-txt-con .main-visual-more-btn{
	opacity:0; 
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:56px; font-weight:600; letter-spacing:-0.25px; color:#fff; margin-bottom:25px;}
.main-visual-item .main-visual-txt-con .main-visual-txt1 b{color: #fff200;}
.main-visual-item .cm-word-split-JS.splitting .word {line-height: 1.2;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:23px; line-height: 1.4; letter-spacing:-0.25px; color:rgba(255,255,255,0.9); margin-bottom:33px;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn{position: relative; display:block; width: 175px; height: 61px; line-height: 61px; font-size:18px; font-weight:600; letter-spacing: -0.25px; color:#fff; text-indent: 22px; background-color: #f47b67; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; -webkit-transition: width 0.3s; transition: width 0.3s;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn:before{position: absolute; top: 0; right: -38px; display: block; content: ''; width: 38px; height: 61px; background: url("../images/main/btn_bg.png") 0 0 no-repeat;}
.main-visual-item .main-visual-txt-con .main-visual-more-btn img{display: inline-block; margin-left: 15px; -webkit-transition: transform 0.3s; transition: transform 0.3s;}

@media all and (min-width:801px){
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{width: 145px;}
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover img{-webkit-transform: translateX(10px); transform: translateX(10px);}
}
@media all and (min-width: 1025px ){
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{width: 165px;}
}
@media all and (min-width: 1221px ){
	.main-visual-item .main-visual-txt-con .main-visual-more-btn:hover{width: 185px;}
}

/* 메인 비주얼 :: active효과 */
.main-visual-item.active-item .main-visual-pc-img,
.main-visual-item.active-item .main-visual-m-img{opacity: 1;}
.main-visual-item.active-item .main-visual-pc-img img,
.main-visual-item.active-item .main-visual-m-img img{opacity: 1;}
.main-visual-item.active-item .main-visual-txt1,
.main-visual-item.active-item .main-visual-txt2,
.main-visual-item.active-item .main-visual-txt3,
.main-visual-item.active-item .main-visual-more-btn{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.5s; animation-delay:0.5s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-txt2{ -webkit-animation-delay:0.9s; animation-delay:0.9s;}
.main-visual-item.active-item .main-visual-txt-con .main-visual-more-btn{-webkit-animation-delay:1.1s; animation-delay:1.1s;}
.main-visual-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.main-visual-item.active-item .main-visual-txt1.splitting .char{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes upDown {
	0% {
		/* opacity: 0.5; */
		transform:  translateY(-5px);
	}
	50% {
		/* opacity: 1; */
		transform: translateY(5px);
	}
	100% {
		/* opacity: 0.5; */
		transform:  translateY(-5px);
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: 화살표 */
.main-visual-con .slick-arrow{position:absolute; width:50px; top:50%; transform:translateY(-50%); border:0; cursor:pointer; z-index:9; font-size:50px; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2)}
.main-visual-con .slick-arrow.slick-prev{left: 50%; margin-left: -900px;}
.main-visual-con .slick-arrow.slick-next{right: 50%; margin-right: -900px;}
.main-visual-con .slick-arrow img{-webkit-transition: all 0.3s; transition: all 0.3s;}
@media all and (min-width:1025px){
	.main-visual-con .slick-arrow.slick-prev:hover img{-webkit-transform: translateX(-10px); transform: translateX(-10px);}
	.main-visual-con .slick-arrow.slick-next:hover img{-webkit-transform: translateX(10px); transform: translateX(10px);}
}
/* 메인 비주얼 :: Dots */
.main-visual-dot{position:absolute; left:0; bottom:63px; width:100%; text-align:left; z-index:11;}
.main-visual-dot-wrapper{width: 234px; float: right;}
.main-visual-dot-list{margin: 0 -15px;}
.main-visual-dot-list a{margin: 0 15px; width: 102px; display: block; float: left; font-size: 0; text-align: center;}
.main-visual-dot-list a .img{position: relative; width: 102px; height: 102px; display: inline-block; -webkit-border-radius: 100%; border-radius: 100%;}
.main-visual-dot-list a .img:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; border: 1px dashed #fff; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 100%; border-radius: 100%; -webkit-transition: background-color 0.3s; transition: background-color 0.3s;}
.main-visual-dot-list a .img img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.main-visual-dot-list a p{margin-top: 10px; font-size: 14px; font-weight: 600; color: #fff;}
.main-visual-dot-list a.slick-current .img:before{background-color: #fff;}
@media all and (min-width:801px){
	.main-visual-dot-list a:hover .img:before{background-color: #fff;}
}

/* 회전 애니메이션 효과 */
.main-visual-dot-list .img:before {
	-webkit-animation: spin 16s infinite linear;
	-o-animation: spin 16s infinite linear;
	-moz-animation: spin 16s infinite linear;
	animation: spin 16s infinite linear;
}
@-webkit-keyframes spin {
    0%  {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes spin {
   0%  {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@keyframes spin {
    0%  {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainQuickCon{padding:40px 0 65px;}
.main-quick-con{display: flex; flex-wrap: wrap; margin: 0 -0.95%;}
.main-quick-item{width: 18.1%; margin: 0 0.95%; font-size: 16px;}
.main-quick-inner{display: block; position: relative; height: 0; padding-top: 100%; -webkit-border-radius: 45px; border-radius: 45px; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box;}
/* 공지사항 */
.main-notice-group{position: absolute; margin: auto; top: 12%; bottom: 12%; left: 10%; right: 10%;}
.main-notice-tit{position: relative;}
.main-notice-tit p{font-size: 24px; letter-spacing: -0.5px; color: #111;}
.main-notice-tit a{position: absolute; display: inline-block; top: 50%; margin-top: -12px; right: 0;}
.main-notice-tit a i{font-size: 24px; color: #111;}
.main-notice-list{margin-top: 45px;}
.main-notice-list li{margin-top: 22px;}
.main-notice-list li:first-child{margin-top: 0;}
.main-notice-list li a{display: block; width: calc(100% - 90px); position: relative; padding-left: 90px; font-size: 15px; line-height: 1.2; letter-spacing: -0.25px;}
.main-notice-list li a:before{position: absolute; bottom: -3px; left: 0; display: block; content: ''; width: 100%; height: 1px; background-color: transparent; -webkit-transition: all 0.3s; transition: all 0.3s;}
.main-notice-list li a .date{position: absolute; top: 0; left: 0; color: rgba(34,34,34,0.4); font-weight: 400; display: inline-block;}
.main-notice-list li a p{color: rgba(34,34,34,0.9); font-weight: 400;}
@media all and (min-width:801px){
	.main-notice-list li a:hover:before{background-color: #000;}
}
/* 각 메뉴 바로가기 */
.main-quick-img{position: absolute; width: 100%; height: 100%; left: 0; top: 0;/* top: 13.6%; */ text-align: center;}
.main-quick-img img{display: none;}
.main-quick-tit{position: absolute; width: 100%; left: 0; top: 68.7%; font-weight: 600; letter-spacing: -0.5px; color: #fff; text-align: center;}
.main-quick-tit h5{font-size: 26px;}
.main-quick-tit p{margin-top: 10px; font-size: 18px;}

.item02 .main-quick-inner:before, .item03 .main-quick-inner:before, .item04 .main-quick-inner:before, .item05 .main-quick-inner:before{position: absolute; display: block; content: ''; width: 256px; height: 256px; -webkit-border-radius: 100%; border-radius: 100%; background-color: rgba(255,255,255,0.1); -webkit-transition: all 0.3s;; transition: all 0.3s;}
.item02 .main-quick-inner:before{left: -138px; top: -148px;}
.item03 .main-quick-inner:before{right: -114px; bottom: -128px;}
.item04 .main-quick-inner:before{right: -100px; top: -115px;}
.item05 .main-quick-inner:before{left: -167px; bottom: -114px;}
/* 문의전화 */
.main-online-group{position: absolute; top: 20%; left: 15%; right: 15%; letter-spacing: -0.5px; color: #fff;}
.main-online-tit{font-size: 26px; font-weight: 600;}
.main-online-txt{margin-top: 20px;}
.main-online-txt .call{display: block; position: relative; padding-left: 24px; font-size: 24px; line-height: 1.4; font-weight: 600; color: #fff;}
.main-online-txt .call i{position: absolute; top: 6px; left: 0; font-size: 18px;}
.main-online-txt .time{margin-top: 20px; font-size: 14px; line-height: 1.6;}
.main-online-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;/* bottom: 7%; right: 6%; */}
.main-online-img img{display: none;}
@media all and (min-width:801px){
	.item02:hover .main-quick-inner:before, .item03:hover .main-quick-inner:before, .item04:hover .main-quick-inner:before, .item05:hover .main-quick-inner:before{width: 600px; height: 600px;}
}