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

/* ****************** active-page ********************** */
.main-scroll-icon,
.main-wrap .header-util-box{transform:translateX(100%); transition: transform ease-out 1s 0.4s;}
.active-page .main-scroll-icon,
.active-page .main-wrap .header-util-box{transform:translateX(0);}


/* ******************  메인 레이아웃(Fullpage) ********************** */
.main-wrap .header-util-box:before{position: absolute; top: 0; right: 0; width: 100%; height: 100vh; content: ''; background-color: var(--main-color); transition: height 0.5s ease-in-out, background-color 0.3s;}
.main-wrap .header-util-box.hide:before{height: var(--header-height);}
.main-wrap .header-util-box.color-change:before{background-color: #000;}
.main-scroll-icon:before,
.main-scroll-icon .main-scroll-inner{transition: opacity 0.4s; transition-delay:0.5s;}
.main-scroll-icon.hide:before,
.main-scroll-icon.hide .main-scroll-inner{opacity: 0; transition: opacity 0.2s; transition-delay:0s;}

#fullpage{background-color: #0f0f0f;}
#fullpage #mainVisual{height:100vh}

@media all and ( min-width: 1281px ) and (max-height: 750px) {
	#fullpage .section:not(#mainFooter){min-height:750px;}
	#fullpage .section .fp-tableCell{height:100% !important;}
}
@media all and ( min-width: 1281px ) and (min-height: 751px) {
	.main-wrap #header.hide #gnb{opacity: 0; visibility: hidden;}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh; height:calc(100vh - var(--header-height)); position:relative; background-color:#000 }
.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-img{
	width:100%;
	height:100%;
	background-size:cover !important;
	transform: scale(1.08,1.08);
}
.main-visual-item .main-visual-m-img{display:none;}
.main-visual-item.active-item .main-visual-img{animation: image-zoom-out 8s 0s forwards;}
/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:relative; overflow:hidden; height:100vh; width:100%; background-color:#000;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.background-video iframe{
	width: 100vw;
	height: calc(56.25vw + 300px); /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 300px);
	min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events:none;
	opacity:0;filter:Alpha(opacity=0); 
	transition: opacity 3s 0.2s;
}
.background-video.start iframe{opacity:1;filter:Alpha(opacity=100);}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:fixed; width: 100px; bottom:6rem; right:0; text-align:center; z-index:9999;}
.main-scroll-icon:before{position: absolute; left: 50%; bottom: -6rem; width: 1px; height: 7rem; content: ''; background-color: rgba(255,255,255,0.2);}
.main-scroll-inner{display: flex; flex-direction: column; align-items: center; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon .txt{padding-right: 120px; width: 100px; display: inline-block; color:#fff; letter-spacing: 0.01rem; font-weight:600; font-size:12px; transform:rotate(90deg); transition:color 0.3s;}
.main-scroll-icon .icon{position:relative; display:inline-block; width:10px; height:16px; border: 2px solid #fff; background-color: var(--main-color); border-radius: 20px; overflow:hidden;}
.main-scroll-icon .icon:after{position:absolute; content:""; width:2px; height:3px; background-color:#fff; border-radius:50%; top:-20%; left:4px;  animation: scrollUpdown 1.1s ease-in-out infinite;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
.main-intro-con01-bg:after, #mainOnlineCon:after, #mainIntroCon04:after{position: absolute; left: 50%; margin-left: -5px; width: 10px; height: 10px; content: ''; border-radius: 100%; background-color: var(--main-color);}
.main-intro-con01-bg:after{top: 77.77%; opacity: 0; transition: opacity 0.5s; transition-delay:2s;}
#mainOnlineCon:after{top: 28.57%; background-color: #fff;}
#mainIntroCon04:after{top: 50%; margin-top: -5px;}

.main-intro-con01-bg:before, #mainIntroCon02:before, #mainIntroCon03:before, #mainIntroCon04:before, #mainWorkCon:before, #mainOnlineCon:before{position: absolute; top: 0; left: 50%; width: 1px; height: 0; content: ''; background-color: var(--main-color); transition: height 1s;}
.main-intro-con01-bg:before{top: 77.77%; margin-top: 10px; z-index: 1; transition: height 0.3s; /* transition-delay: 0.5s; */}
#mainOnlineCon:before{background-color: #fff; transition: height 0.5s;}

/* active */
/* #mainIntroCon01.effect-start .main-intro-con01-bg:before */
.main-intro-con01-bg.effect-start:before{height: calc(22.23% - 10px);}
#mainIntroCon01.effect-start .main-intro-con01-bg:after{opacity: 1;}
#mainIntroCon02.effect-start:before,
#mainIntroCon03.effect-start:before,
#mainIntroCon04.effect-start:before,
#mainWorkCon.effect-start:before{height: 100%;}
#mainOnlineCon.effect-start:before{height: 28.57%;}

.cm-text-effect{opacity:0; }
.effect-start .cm-text-effect{opacity:1}
.cm-text-effect.splitting .char{animation: cm-text-fade 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.effect-start .cm-text-effect.splitting .char{animation: cm-text-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}


/* -------- 메인 컨텐츠 :: 컨텐츠1(회사소개 1) -------- */
#mainIntroCon01{position: relative;}
.main-intro-con01{position: relative; width: 100%; height: 100%; position: relative;}
.main-intro-con01:before{position:absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ''; background: url('/images/main/main_intro_con01_shadow.png') 50% 100% no-repeat; background-size: cover;}
#particles-js{width: 100%; height: 100%;}

/* 배경 */
.main-intro-con01-bg{position: absolute; bottom: 0; left: 0; width: 100%; height: 55.1%; height: 50.1%;}
.main-intro-con01-bg .area-box{position: relative; width: 100%; height: 100%; padding: 0;}
/* 그림자 배경 */
.main-intro-con01-bg .shadow-circle{position: absolute; top: 0; left: 50%; margin-left: -36.665%; width: 73.33%; max-width: 1100px; height: 100%; display: block;}
.main-intro-con01-bg .shadow-circle span{position: absolute; top: 0; left: 50%; margin-left: -50%; width: 100%; height: 0; padding-top: 100%; background-color: #24382a; box-shadow: 0 0 16rem 5rem rgba(57,91,68,0.6); border-radius: 100%; display: block; transform: rotate(0deg) scale(1);  opacity: 0;}
/* 까만 배경 */
.main-intro-con01-bg .cover-circle{position: absolute; top: 0; left: 50%; margin-left: -46.665%; width: 93.33%; max-width: 1400px; height: 100%;}
.main-intro-con01-bg .cover-circle span{position: absolute; top: 0; left: 50%; margin-left: -50%; width: 100%; height: 0; padding-top: 78.57%; background-color: #050505; border-radius:0 / 0; display: block; opacity: 0;}
/* 사람 이미지 */
.main-intro-con01-bg .person-img{position: absolute; top: 0; left: 50%; margin-left: -3.665%; width: 7.33%; max-width: 110px; display: block; opacity: 0;}
.main-intro-con01-bg .person-img img{max-width: 100%;}
/* 텍스트 */
.main-intro-con01-bg .txt-box{position: absolute; top: 21.29%; left: 0; width: 100%; text-align: center;}
.main-intro-con01-bg .txt-box i{font-size: 3.6rem; color: var(--main-color);}
.main-intro-con01-bg .txt-box p{margin-top: 0.7em; font-size: 5rem; line-height: 1.6; letter-spacing: -0.04em; font-weight: 500; color: #fff;}
.main-intro-con01-bg .txt-box p b{font-weight: 900; display: block;}
.main-intro-con01-bg .txt-box .cm-word-split-JS.splitting .word{overflow: visible;}

/* active */
.main-intro-con01-bg .person-img{transition: all 0.7s;}
.main-intro-con01-bg .shadow-circle span,
.main-intro-con01-bg .cover-circle span{transition: opacity 0.7s, border-radius 0.7s;}
.main-intro-con01-bg.animated .shadow-circle span{opacity: 1; animation: drift 7000ms infinite linear; transition-delay: 0.9s; animation-delay: 0.7s;}
.main-intro-con01-bg.animated .person-img{top: -21.29%; opacity: 1; transition-delay: 0.8s;}
.main-intro-con01-bg.animated .cover-circle span{opacity: 1; border-radius:50% / 50%; transition-delay: 0.7s;}


/* -------- 메인 컨텐츠 :: 컨텐츠2(회사소개 2) -------- */
#mainIntroCon02{background-color: #050505;}

.main-intro-con02{position: relative; display: flex; width: 100%; height: 100%;}
.main-intro-con02-left,
.main-intro-con02-right{width: 50%; height: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; transition: padding-right 0.4s ease-in-out, padding-left 0.4s ease-in-out;}
.main-intro-con02-left{padding-right: 22rem;}
.main-intro-con02-right{padding-left: 22rem;}
.main-intro-con02-left h1,
.main-intro-con02-right h1{padding-top: 5.5rem; font-size: 5rem; font-weight: 800; color: #fff; -webkit-text-stroke: 0.5px #fff; font-family:var(--font-family3); transition: color 0.6s; transition-delay:0.6s;}
.main-intro-con02-left p,
.main-intro-con02-right p{margin-top: 3rem; font-size: 2.4rem; color: rgba(255,255,255,0.5);}
/* 가운데 영역 */
.main-intro-con02-center{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.main-intro-con02-center .bg{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56rem; height: 56rem; background-color: #000; box-shadow: 0 0 16rem 0rem rgba(57,91,68,0.5); border-radius: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease-out; transition-delay: 1s; z-index: -1;}
.main-intro-con02-center h1{width: 100%; font-size: 7rem; letter-spacing: -0.04em; font-weight: 700; color: #fff; font-family:var(--font-family3); opacity: 0; transition: opacity 1.2s ease-out; transition-delay: 1.5s; text-align: center;}
.main-intro-con02-center h1.m-ver{display: none;}
.main-intro-con02-center #particles-js2{position: absolute; top: 50%; left: 50%; margin-top: -20rem; margin-left: -40rem; width: 80rem; height: 30rem; opacity: 0; transition: opacity 1.8s ease-out; transition-delay: 1.7s;}

/* active */
#mainIntroCon02.effect-start .main-intro-con02-left h1,
#mainIntroCon02.effect-start .main-intro-con02-right h1{color: transparent;}
#mainIntroCon02.effect-start .main-intro-con02-center h1{opacity: 1; text-shadow: 0 0 30px rgba(57,91,68,0.4), 0 0 30px rgba(57,91,68,0.4), 0 0 30px rgba(57,91,68,0.4), 0 0 30px rgba(57,91,68,0.4); animation: letter-glow 2s ease infinite;}
#mainIntroCon02.effect-start .main-intro-con02-center .bg,
#mainIntroCon02.effect-start .main-intro-con02-center #particles-js2{opacity: 1;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(회사소개 3) -------- */
#mainIntroCon03{position: relative;}
.main-intro-con03{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}

.main-intro-con03-box{position:absolute; left:50%; top:50%; margin-top: -40rem; margin-left: -40rem; width: 80rem; height: 80rem; opacity: 0; transition: opacity 0.8s;}
.main-intro-con03-box > span {border:0.2rem solid rgba(57, 91, 68, 0.5) ; border-radius: 50%; animation-fill-mode: both; position: absolute; left: 0; top: 0px; opacity: 0; margin: 0; width: 100%; height: 100%; animation: circle-effect 5s ease-in infinite;}
.main-intro-con03-box > span:nth-child(2) {animation-delay: 1s;}
.main-intro-con03-box > span:nth-child(3) {animation-delay: 2s;}
.main-intro-con03-box > span:nth-child(4) {animation-delay:3s;}
.main-intro-con03-box > span:nth-child(5) {animation-delay:4s;}

.main-intro-con03-bg{position:absolute; left:50%; top:50%; margin-top: -13rem; margin-left: -13rem; width:26rem; height:26rem;}
.main-intro-con03-bg .cir01{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width:26rem; height:26rem; background-color: rgba(57,91,68,0.3); border-radius: 100%; transform: scale(0);}
.main-intro-con03-bg .cir02{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 21rem; height: 21rem; background-color: #395b44; border-radius: 100%; display: block; transform: scale(0);}
.main-intro-con03-bg .cir03{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 15rem; height: 15rem; background-color: #050505; border-radius: 100%; display: block; transform: scale(0);}
.main-intro-con03 h1{width: 100%; font-size: 5rem; line-height: 1.4; letter-spacing: -0.04em; font-weight: 700; color: #fff; text-align: center; position: relative; top: 1.5rem;}

@keyframes zoom {
	0 { transform: scale(0);} 
	100% { transform: scale(1);}
}

/* active */
.main-intro-con03-box.animated{opacity: 1; transition-delay: 2.6s;}
.main-intro-con03-bg.animated .cir01{animation: zoom 2s forwards;}
.main-intro-con03-bg.animated .cir02{animation: zoom 2s forwards; animation-delay: 0.2s;}
.main-intro-con03-bg.animated .cir03{animation: zoom 2s forwards; animation-delay: 0.4s;}
#mainIntroCon03.effect-start .cm-text-effect.splitting .char{animation-delay: 0.8s;}


/* -------- 메인 컨텐츠 :: 컨텐츠4(회사소개 4) -------- */
#mainIntroCon04{position: relative;}
.main-intro-con04{display: flex; width: 100%; height: 100%;}
.main-intro-con04-left,
.main-intro-con04-right{width: 50%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center;}

.main-intro-con04-left h1{padding-bottom: 0.2em; font-size: 16rem; line-height: 1.1; letter-spacing: -0.04em; font-weight: 700; color: var(--main-color); overflow: hidden;}
.main-intro-con04-left h1 b{position: relative; display: inline-block; transform: translateY(110%); animation-delay:0.3s;}

.main-intro-con04-right .text-js {display: inline-block; vertical-align: middle; font-size: 5rem; letter-spacing: -0.04em; font-weight: 600; color: #fff;}
.main-intro-con04-right .cursor {display: inline-block; vertical-align: middle; background-color: #395b44; margin-left: 1rem; width: 0.5rem; height: 5rem; animation: blink 0.5s infinite;}
.main-intro-con04-right .cursor.typing {animation: none;}

/* active */
#mainIntroCon04.effect-start .main-intro-con04-left h1 b{animation: text-active-animation 1.5s ease-in-out both;}


/* -------- 메인 컨텐츠 :: 컨텐츠5(업무분야) -------- */
#mainWorkCon{position: relative;}
.main-section-bg{overflow:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index: -1;}
.main-section-bg .main-section-bg-inner{width:100%; height:100%; transform: scale(1.08,1.08); transition:all 2s linear;}
.main-section-bg.animated .main-section-bg-inner{transform:scale(1.0,1.0);}

.main-work-con{position: relative;}
.main-work-tit{font-size: 6rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; text-align: center;}
/* 탭 */
.main-work-tab{margin-top: 6rem;}
.main-work-tab-list{display: flex; flex-wrap:wrap; align-items: center; justify-content: center;}
.main-work-tab-list li{margin: 2rem 4rem;}
.main-work-tab-list li a{font-size: 2rem; line-height: 1.3; letter-spacing: -0.04em; font-weight: 600; color: #fff; opacity: 0.5; transition:var(--transition-custom); transition-property:opacity;}
.main-work-tab-list li a:hover{opacity: 1;}
.main-work-tab-list li.selected a{font-weight: 600; opacity: 1;}
/* 리스트 */
.main-work-box{margin-top: 5rem; position: relative;}
.main-work-container{}
.main-work-list{/* margin: 0 -5.6%; */}
.main-work-item{width: 50%;/* width: 38.8%; margin: 0 5.6%; */ float: left;}
.main-work-item a{display: block; width: 100%;}
.main-work-thum{position: relative; width: 100%; height: 0; padding-top: 60%; overflow: hidden;}
.main-work-thum:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.25); content: ''; transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0); z-index: 1; transition: transform 0.4s ease-in-out;}
.main-work-thum span{position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition:var(--transition-custom);}
.main-work-txt{padding: 7.27%; padding-bottom: 0;}
.main-work-txt .tit{display: inline-block; max-width: 100%; font-size: 3rem; line-height: 1.3; letter-spacing: -0.05em; font-weight: 500; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* background-image: linear-gradient(transparent 60%, var(--main-color) 40%); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 0.8s; */}
.main-work-txt .txt{margin-top: 3rem; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.04em; color: rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-work-txt .category{margin-top: 2.5rem; display: flex; flex-wrap: wrap; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-work-txt .category span{margin-bottom: 1rem; margin-right: 2rem; font-size: 1.5rem; line-height: 1.3; letter-spacing: -0.025em; color: rgba(255,255,255,0.3); position: relative;}
.main-work-txt .category span:before{position: absolute; top: 0; right: -1rem; display: inline-block; content: '·';}
.main-work-txt .category span:last-child:before{display: none;}

.main-work-item a:hover .main-work-thum:before {transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0);}
.main-work-item a:hover .main-work-thum span{transform: scale(1.2) rotate(0.002deg);}
.main-work-item a:hover .main-work-txt .tit{/* background-size: 100% 100%; */ font-weight: 700;}

.main-work-box .swiper-arrow{position: absolute; top: 30%; opacity: 0.2; transition:var(--transition-custom); transition-property:opacity; z-index: 10;}
.main-work-box .swiper-arrow:hover{opacity: 1;}
.main-work-box .swiper-arrow i{font-size: 4.6rem; color: #fff;}
.main-work-box .swiper-arrow.main-work-prev{left: -13rem;}
.main-work-box .swiper-arrow.main-work-next{right: -13rem;}

.main-work-box .swiper-container-horizontal > .swiper-pagination-bullets {bottom: -6rem; padding: 0 4rem; box-sizing: border-box; opacity: 0; visibility: hidden;}
.main-work-box .swiper-pagination-bullet {width: 0.8rem; height: 0.8rem; background: #575757; opacity: 1;}
.main-work-box .swiper-pagination-bullet-active {background: var(--main-color);}
.main-work-box .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin: 0 0.7rem;}

.main-work-box .swiper-pagination-fraction{bottom: -6.5rem; padding: 0 4rem; box-sizing: border-box; opacity: 0; visibility: hidden; font-size: 1.6rem; color: rgba(255,255,255,0.7);}
.main-work-box .swiper-pagination-fraction .swiper-pagination-current{font-weight: 700;}

/* active */

/* -------- 메인 컨텐츠 :: 컨텐츠6(온라인문의) -------- */
#mainOnlineCon{position: relative; background-color: var(--main-color); overflow: hidden;}
.main-online-con{text-align: center; padding-top: 15rem; transition: padding-top 0.6s; transition-delay: 0;}
.main-online-con .tit{/* font-size: 11rem; letter-spacing: -0.04em; font-weight: 700; color: #fff; -webkit-text-stroke: 1px rgba(255,255,255,0.3); font-family:var(--font-family4); transition: color 0.3s; transition-delay:0.6s; */}
.main-online-con .tit svg{margin: 0 auto; max-width: 125.25rem;	}
.main-online-con .tit svg.m-ver{display: none;}
.main-online-con .tit svg .cls-1 {
	fill: none;
	stroke: rgba(57,91,68,0.3);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1px;
	stroke-dasharray: 0;
	stroke-dasharray: 7% 21%;
	opacity: 1;
  }
@keyframes draw-stroke {
	100%{stroke-dashoffset: 7%; stroke-dasharray: 100% 0;}
}
.main-online-con .txt{margin-top: 5rem; font-size: 5rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; opacity: 0; visibility: hidden; transform: translateY(3rem); transition: all 0.6s; transition-delay: 0;}
/* 문의폼 오픈 버튼 */
.online-form-open-btn{position: absolute; bottom: 6.12%; left: 50%; margin-left: -6rem; display: block; animation: upDown 1.5s ease-in-out infinite;}
.online-form-open-btn.m-ver{display: none;}
.online-form-open-btn:before{position: absolute; top: -2rem; left: 50%; margin-left: -3.6rem; content: ''; width: 7.2rem; height: 2.2rem; background: url("/images/main/main_online_txt_img.png") center/contain no-repeat;}
.online-form-open-btn i{font-size: 12rem; color: #050505;}
/* .online-form-open-btn:hover i{animation: navani 0.3s ease-in-out;} */

/* active */
/* #mainOnlineCon.effect-start .main-online-con .tit{color: transparent;} */
#mainOnlineCon.ani-start .main-online-con{padding-top: 0; transition-delay: 2s;}
#mainOnlineCon.ani-start .main-online-con .tit svg .cls-1:nth-child(2){stroke: #617c69; stroke-dashoffset: 7%;}
#mainOnlineCon.ani-start .main-online-con .tit svg .cls-1:nth-child(3){stroke: var(--main-color); stroke-dashoffset: 14%;}
#mainOnlineCon.ani-start .main-online-con .tit svg .cls-1:nth-child(4){stroke: #fff; stroke-dashoffset: 21%;}
#mainOnlineCon.ani-start .main-online-con .tit svg .cls-1{animation: draw-stroke 3.5s linear forwards;}
#mainOnlineCon.ani-start .main-online-con .txt{transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 2s;}

/* 온라인폼 */
.online-form-con{position: absolute; top: 100%; left: 0; width: 100%; height: 100%; z-index: 5; background-color: #111; transition: top 0.5s ease-in-out;}
.online-form-con.open{top: 0;}
.online-form-con:before {
  position: absolute; top: -7.8rem; left: 50%; margin-left: -4rem;
  content: ''; width: 0; height: 0;
  border-bottom: 4rem solid #050505;
  border-top: 4rem solid transparent;
  border-left: 4rem solid transparent;
  border-right: 4rem solid transparent;
}
/* 배경 */
.online-form-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover;}
.online-form-bg:before{position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: #111; transition: height 0.5s ease-in;}
.online-form-con.open .online-form-bg:before{height: 0;}
/* 폼내용 시작 */
.online-form-inner{position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
/* 타이틀 */
.online-form-tit{text-align: center;}
.online-form-tit h1{font-size: 8rem; font-weight: 700; letter-spacing: -0.04em; color: var(--main-color); font-family:var(--font-family4);}
.online-form-tit p{margin-top: 4rem; font-size: 3.6rem; letter-spacing: -0.04em; color: #fff;}
/* 폼 */
.online-form-info-tit{margin-top: 7.5rem; margin-bottom: 1.5rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 300; color: #666; text-align: right;}
.online-form-info-tit span{color: #ff0000; font-weight: 400;}
.online-form-info{margin: 0 -5%; display: flex; flex-wrap:wrap;}
.online-form-list{width: 40%; margin: 0 5%; display: flex; flex-wrap:wrap;}
.online-form-item{display: flex; width: 100%;}
.online-form-item + .online-form-item{margin-top: 1rem;}
.online-form-item .tit{width: 10rem; font-size: 1.6rem; line-height: 4.5rem; letter-spacing: -0.04em; color: rgba(255,255,255,0.8);}
.online-form-item .tit span{color: rgba(255,0,0,0.5);}
.online-form-item .form{display: flex; width: calc(100% - 10rem); background-color: #222; border-radius: 1rem;}
.online-form-item .form .upload-name,
.online-form-item .form input{padding: 0 1.5rem; width: 100%; height: 4.5rem; font-size: 1.4rem; letter-spacing: -0.04em; color: #fff; background-color: transparent; border: 0; appearance: none; box-sizing: border-box;}
.online-form-item .form input::-ms-clear {display: none;}
.online-form-item .form input::placeholder{color: #555; font-weight: 300;}
.online-form-item .form textarea:focus,
.online-form-item .form input:focus{outline: none;}
.online-form-item .form textarea{padding: 1.5rem; width: 100%; height: 15.5rem; font-size: 1.4rem; line-height: 1.5; letter-spacing: -0.04em; color: #fff; resize: none; appearance: none; border: 0; border-radius: 0; background-color: transparent; box-sizing: border-box;}
.online-form-item .form input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;} 
.online-form-item .form label {width:11rem; height:4.5rem; font-size: 1.6rem; letter-spacing: -0.04em; color: rgba(255,255,255,0.5); text-align:center; cursor: pointer; border: 0; background-color:#444; border-radius: 0 1rem 1rem 0; display: flex; align-items: center; justify-content: center;} 
.online-form-item .form .upload-name{width: calc(100% - 11rem); color: #555; font-weight: 300;}
.online-form-item .form .upload-name.active{color: #fff; font-weight: 400;}
.online-form-item .file-custom-box{position: relative;}
.online-form-item .file-custom-box .close-btn{position: absolute; top: 50%; margin-top: -0.6rem; right: 12rem; font-size: 1.2rem; color: #fff; visibility: hidden;}
/* 개인정보 처리방침 */
.online-form-agree{margin-top: 4.5rem; text-align: center;}
.online-form-agree .agree-txt input{display:none;}
.online-form-agree .agree-txt label{position:relative; padding-left:2.2rem; font-size: 1.6rem; line-height: 3rem; letter-spacing: -0.04em; color: #aaa;}
.online-form-agree .agree-txt label a{display: inline-block; font-weight: 600; color: var(--main-color); border-bottom: 1px solid var(--main-color);}
.online-form-agree .agree-txt label:before{position:absolute; top:0; left:0px; font-size: 1.6rem; line-height: 1.3; color:#aaa; content: "\e92c"; font-family:xeicon !important;}
.online-form-agree .agree-txt input:checked + label:before{content: "\e92b"; color: #fff;}
/* 버튼 */
.online-form-btn{margin-top: 3rem; display: flex; align-items: center; justify-content: center;}
.online-form-btn button{margin: 0 1rem; width: 16rem; height: 5rem; font-size: 1.8rem; letter-spacing: -0.04em; color: #fff; background-color: var(--main-color); display: flex; align-items: center; justify-content: center; border-radius: 5rem;}
.online-form-btn .online-form-close-btn{background-color: #222; color: rgba(255,255,255,0.5);}
.online-form-btn .online-form-close-btn.m-ver{display: none;}


/* ******************  메인 왼쪽 퀵메뉴 ********************** */
#quickBar{
	position:fixed; 
	bottom: var(--wide-padding); left: var(--wide-padding);
	z-index:99; 
}
#quickBar > ul {}
#quickBar > ul > li + li{margin-top: 1rem;}
#quickBar > ul > li > a{padding: 0; width: 7rem; height: 7rem; background-color: #222; display: flex; align-items: center; justify-content: center;  color: rgba(255,255,255,0.8); box-sizing: border-box; border-radius: 7rem; overflow: hidden; transition: all 0.3s;}
#quickBar > ul > li + li > a{background-color: var(--main-color);}
#quickBar > ul > li > a span{position: absolute; visibility: hidden; opacity: 0; display: block; width: calc(100% - 4.5rem); font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.04em; transition: position 0.3s, visibility 0.3s, opacity 0s;}
#quickBar > ul > li > a i{font-size: 2.4rem;}

#quickBar.load > ul > li > a{padding: 0 2.5rem 0 2.3rem; width:17rem; color: #fff; justify-content: space-between; transition: all 1s;}
#quickBar.load > ul > li > a span{position: static; visibility: visible; opacity: 1; transition: all 1s;}
#quickBar.load > ul > li > a i{color: #fff;}

#quickBar.color-change > ul > li + li > a{background-color: #617c69;}
#quickBar.color-change2 > ul > li + li > a{background-color: #333;}

@media all and ( min-width: 801px ){
	#quickBar > ul > li > a:hover{padding: 0 2.5rem 0 2.3rem; width:17rem; color: #fff; justify-content: space-between; transition: width 0.3s, background-color 0.3s;}
	#quickBar > ul > li > a:hover span{position: static; visibility: visible; opacity: 1; transition: all 0.3s;}
	#quickBar > ul > li > a:hover i{color: #fff;}
}