@charset "utf-8";


@media all and (min-width:1281px){
	.main-page #header{transform:translateY(-50px); opacity:0;}
	.main-page #header.main-active{transform:translateY(0); opacity:1;}

	.main-page #header.header-hide{transform:translateY(-140px);}
}

/* ******************  메인 레이아웃(Fullpage) ********************** */
#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;}
}

/* ******************  메인 비주얼 ********************** */
#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;}
/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:1;
	text-align:center
}
.main-visual-txt-box{
	display:grid;
	align-items:center;
	height:100%;
	width:100%;
	text-align:center
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:8rem;  font-family: "Cormorant Unicase", serif; letter-spacing:-0.01em; color:#fff; font-weight:500 }
.main-visual-txt-box .main-visual-txt2{font-size:7rem; font-family: "Cormorant", serif; letter-spacing:-0.01em; color:#fff; font-weight:500; margin-top:-1rem}
.main-visual-txt-box .main-visual-txt3{font-size:2rem;  color:rgba(255,255,255,0.8); line-height:1.625; margin-top:2rem}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1,
.active-item .main-visual-txt2,
.active-item .main-visual-txt3{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-item .main-visual-txt1{animation-delay:0.1s;}
.active-item .main-visual-txt2{animation-delay:1s;}
.active-item .main-visual-txt3{animation-delay:1.3s;}
.active-item .main-visual-more-btn{animation-delay:0.8s;}
.main-visual-txt-box .cm-word-split-JS.splitting .word{overflow:visible;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; padding-bottom:0.1em;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(50px); 
		transform: translateX(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
@keyframes text-active-animation-up {
	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-btn-box{position: absolute; bottom:6.5rem; width:100%; height:14.2rem;}
.main-visual-btn-box .area-box{position: relative; display: flex; align-items:center; justify-content:space-between;}

/* 메인 비주얼 :: Dots */
.main-slide-line-wrap{position:relative; width:calc(100% - 16.5rem); text-align:right; z-index:11; transform:translateY(50px); opacity:0; transition:var(--transition-custom2);}
.main-slide-line-wrap .slick-dots{position: relative; width:100%; height:5px; background-color: rgba(255,255,255,0.2); display: block;}
.main-slide-line-wrap .slick-dots li button{position: absolute; top: 0; left: 0; margin:0px; padding:0px; background:none; vertical-align:top; font-size:0; box-sizing:border-box;}
.main-slide-line-wrap .slick-dots li button{position:absolute; content:""; width:0; height:100%; background-color:#fff; top:0; left:0; border-radius:5px;}
.main-slide-line-wrap:not(.start-progress) .slick-dots li.slick-active button{animation:dotLoading 5.4s linear both;}
.main-slide-line-wrap.start-progress .slick-dots li.slick-active button{animation:dotLoading 3.9s linear both;}

@keyframes dotLoading{	
	from{width:0px;}
	to{width:100%;}
}

/* 메인 비주얼 :: 화살표 */
.main-slide-btn-wrap{position: absolute; left:-1rem; top:calc(50% - 3rem); transform:translateY(calc(-50% + 50px)); z-index:9; opacity:0; transition:var(--transition-custom2);}
.main-slide-btn-wrap .slick-arrow{font-size:3.4rem; text-align:center; color:rgba(255,255,255,0.3); font-weight:700; transition:var(--transition-custom);}
.main-slide-btn-wrap .slick-arrow:hover{color:#fff;}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:relative; width:14.2rem; height:14.2rem;  z-index:99; transform:translateX(50px); opacity:0; transition:var(--transition-custom2);}
.main-scroll-icon span{display:block; color:#fff; padding-bottom:5px; letter-spacing:-0.5px; font-weight:300; animation: rolling 7.5s linear infinite;}
.main-scroll-icon span img{width:100%;}
.main-scroll-icon i{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:2.4rem; color:#fff;}
@keyframes rolling {
	0% {
		transform:  rotate(0);
	}
	100% {
		transform:  rotate(360deg);
	}
}

#mainVisual.main-active .main-slide-line-wrap{transform:translateY(0px); opacity:1;}
#mainVisual.main-active .main-slide-btn-wrap{transform:translateY(-50%); opacity:1;}
#mainVisual.main-active .main-scroll-icon{transform:translateX(0px); opacity:1; }


@media all and (max-width:1660px){
	.main-slide-btn-wrap{left:calc(var(--area-padding) - 1rem);}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-tit{font-size:9rem; line-height:1; letter-spacing:-0.025em; color:#000;  font-family: "Cormorant", serif; font-weight:700}
.main-tit-box .main-tit .light{font-weight:200;}
.main-tit-box .main-txt{font-size:1.8rem; line-height:1.55; letter-spacing:-0.055em; color:rgba(0,0,0,0.7); }
.main-tit-box .main-txt-effect.splitting .char,
.main-tit-box .main-tit-effect.splitting .char{
	opacity:0;
	transform:translateY(100%);
}
 /* active-section */ 
.active-section .main-tit-box .main-tit-effect.splitting .char,
.active-section .main-tit-box .main-txt-effect.splitting .char{
	-webkit-animation: text-active-animation-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation: text-active-animation-up 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.active-section .main-tit-box .main-txt-effect.splitting .char{animation-delay:0.5s;}


/* -------- 메인 컨텐츠 :: 컨텐츠1(ODM OEM) -------- */
#mainContent1{padding-top:var(--header-top); box-sizing:border-box;}
#mainContent1 .main-tit-box{display: flex; align-items:center;}
#mainContent1 .main-tit-box .main-tit{margin-right:4rem;}

.main-odm-list{display: flex; justify-content:space-between; margin-top:4.8rem;}
.main-odm-list .list-item{position: relative; width:32%; border-radius:2rem; /* overflow:hidden; */ transition:var(--transition-custom); opacity:0; transform:translateY(50px);}
.main-odm-list .list-item .box{display: block; border-radius:2rem; transition:var(--transition-custom); overflow:hidden;}
.main-odm-list .list-item .img-box{position: relative; width:100%; height:0; padding-top:100%;}
.main-odm-list .list-item .img-box img{position: absolute; width:100%; /* height:100%; */ top:0; left:0; right:0; bottom:0; margin:auto; transition:var(--transition-custom);}
.main-odm-list .list-item .txt-box{position: absolute; width:100%; left:0; bottom:5rem; text-align:center; }
.main-odm-list .list-item .txt-box .tit{font-size:3.2rem; line-height:1.5; letter-spacing:0; color:#fff; font-weight:600;}
.main-odm-list .list-item .txt-box .txt{font-size:1.8rem; line-height:1.55; letter-spacing:-0.055em; color:#fff; padding:1.5rem 2.5rem 0;}

@media all and (min-width: 801px) {
	.main-odm-list .list-item .txt-box .txt{display: none;}
	.main-odm-list .list-item:hover a{box-shadow:rgba(0, 0, 0, 0.2) 3.3rem 3.3rem 9rem 0px;}
	.main-odm-list .list-item:hover .img-box img{transform:scale(1.08);}
	/* active-section */
	.active-section .main-odm-list .list-item{opacity:1; transform:translateY(0);}
}

@media all and (max-width: 800px) {
	.active-section .main-odm-list .list-item{opacity:1; transform:translateY(0);}
	.main-odm-list .list-item {opacity:0;}
	.main-odm-list .list-item .img-box{height:auto;}
	.main-odm-list .list-item .txt-box .txt{display: block !important;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(RND) -------- */
#mainContent2{position: relative; padding-top:var(--header-top); box-sizing:border-box; overflow:hidden;}
#mainContent2 .mo-bg {position: absolute; content:''; top:0; left:0; width:100%; height:100%; background:no-repeat center; background-size:cover; background-image:url('../images/main/main_m_rnd_bg.jpg'); transform: scale(1.08,1.08); display: none;}
#mainContent2:before{position: absolute; content:''; top:0; left:0; width:100%; height:100%; background:no-repeat center; background-size:cover; background-image:url('../images/main/main_rnd_bg.jpg'); transform: scale(1.08,1.08);}
#mainContent2 .main-tit-box{text-align:left; }
#mainContent2 .main-tit-box .plus-txt{font-size:1.8rem; line-height:1.5; letter-spacing:-0.01em; color:#fff; font-style:italic; font-weight:600; margin-bottom:1rem;}
#mainContent2 .main-tit-box .plus-txt.splitting .char:last-child{padding-right:2px;}
#mainContent2 .main-tit-box .main-tit{margin-bottom:2rem; color:#fff}
#mainContent2 .main-tit-box .main-txt {color:#fff}

.main-rnd-list{display: flex; align-items:center; justify-content:center; margin-top:7rem;}
.main-rnd-list .list-item{width:40rem; height:20rem; margin:0 1rem; border-radius:2.4rem; box-shadow:rgba(38, 19, 4, 0.2) 2.5rem 2.5rem 5.7rem 0px; transition:var(--transition-custom2); opacity:0; transform:translateY(50px);}
.main-rnd-list .list-item a{display: flex; flex-direction: column; align-items:center; justify-content:center; width:100%; height:100%;}
.main-rnd-list .list-item .icon-box{text-align:center; margin-bottom:2rem;}
.main-rnd-list .list-item .tit{font-size:2.2rem; line-height:1.36; letter-spacing:-0.055em; font-weight:600;}

.main-rnd-list .list-item:nth-child(1){background:var(--main-color);}
.main-rnd-list .list-item:nth-child(1) .tit{color:#fff;}
.main-rnd-list .list-item:nth-child(2){background:#fff;}
.main-rnd-list .list-item:nth-child(2) .tit{color:#000;}

/* active-section */
#mainContent2.active-section:before{animation: image-zoom-out 8s 0s forwards;}
.active-section .main-rnd-list .list-item{opacity:1; transform:translateY(0);}
.active-section .main-rnd-list .list-item:nth-child(1){transition-delay:0.6s;}
.active-section .main-rnd-list .list-item:nth-child(2){transition-delay:0.8s;}


/* -------- 메인 컨텐츠 :: 컨텐츠3(NEWS) -------- */
#mainContent3 .main-tit-box{margin-top:10rem;}
.main-news-list-wrap{overflow:hidden; width:calc(100% + 36rem); margin-right:-36rem; padding:5rem 0 10rem;}
.main-news-list{max-width:1480px}
.main-news-list .list-item{margin-right:3rem; transition:var(--transition-custom2); opacity:0; transform:translateY(50px);}
.main-news-list .list-item a{display: block; position: relative; padding:4rem 4rem 13rem; box-sizing:border-box; background:#f3f3f3; border-radius:1.6rem; transition:var(--transition-custom);}
.main-news-list .list-item .categoty{display: block; font-size:1.4rem; line-height:1.5; letter-spacing:-0.01em; color:var(--main-color); font-weight:500; margin-bottom:1.2rem; transition:var(--transition-custom);}
.main-news-list .list-item .tit{font-size:2.6rem; line-height:1.46; letter-spacing:-0.055em; color:#000; font-weight:600; margin-bottom:1.5rem; transition:var(--transition-custom);}
.main-news-list .list-item .txt{font-size:1.8rem; line-height:1.66; letter-spacing:-0.055em; color:rgba(0,0,0,0.4); transition:var(--transition-custom);}
.main-news-list .list-item .date{position: absolute; bottom:4rem; left:4rem; font-size:1.4rem; line-height:1.5; letter-spacing:-0.01em; color:rgba(0,0,0,0.3); transition:var(--transition-custom);}

.main-news-list .list-item .img{position: absolute; bottom:-5.5rem; right:-2rem; width:17rem; height:17rem; border-radius:50%; overflow:hidden; transform:scale(0); transition:var(--transition-custom); box-shadow: 1.5rem 1.5rem 3rem 0px rgba(0,0,0,0.21); background:#fff;}
.main-news-list .list-item .img img{position: absolute; width:100%; top:0; left:0; bottom:0; right:0; margin:auto; }

.main-news-btn-box{position: absolute; bottom:8rem; width:100%; max-width:var(--area-box-width);}
/* News :: Dots */
.main-news-slide-line-wrap{position:relative; width:100%; text-align:right; z-index:11; transition:var(--transition-custom2); opacity:0; transform:translateY(50px);}
.main-news-slide-line-wrap .slick-line{position: relative; width:100%; height:5px; background-color: rgba(0,0,0,0.2); display: block;}
.main-news-slide-line-wrap .slick-line span{position: absolute; display: block; height:5px; top:0; left:0; transition:var(--transition-custom); width:0; background:#000;}

/* News :: 화살표 */
.main-news-slide-btn-wrap{position: absolute; left:-1rem; top:calc(50% - 3rem); transform:translateY(calc(-50% + 50px)); z-index:9; transition:var(--transition-custom2); opacity:0;}
.main-news-slide-btn-wrap .slick-arrow{font-size:3.4rem; text-align:center; color:rgba(0,0,0,0.3); font-weight:700; transition:var(--transition-custom);}
.main-news-slide-btn-wrap .slick-arrow:hover{color:#000;}

.main-news-list .slick-list{overflow:visible;}

/* active-section */
.active-section .main-news-list .list-item{opacity:1; transform:translateY(0);}
.active-section .main-news-slide-line-wrap{opacity:1; transform:translateY(0); transition-delay:0.6s;}
.active-section .main-news-slide-btn-wrap{opacity:1; transform:translateY(-50%); transition-delay:0.6s;}
.active-section .main-news-list .list-item:nth-child(4){transition-delay:0.6s;}
.active-section .main-news-list .list-item:nth-child(5){transition-delay:0.9s;}
.active-section .main-news-list .list-item:nth-child(6){transition-delay:1.2s;}
.active-section .main-news-list .list-item:nth-child(7){transition-delay:1.5s;}


/* -------- 메인 컨텐츠 :: 컨텐츠4(Contact) -------- */
#mainContent4{position: relative; overflow:hidden;}
#mainContent4:before{position: absolute; content:''; top:0; left:0; width:100%; height:100%; background:no-repeat center; background-size:cover; background-image:url('../images/main/main_contact_bg.jpg'); transform: scale(1.08,1.08);}
#mainContent4 .main-tit-box{text-align:center; margin-bottom:1.5rem; margin-top:10rem;}

.main-contact-wrap{display: flex; justify-content:space-between; width:100%; max-width:1160px; margin:4rem auto 0; transition:var(--transition-custom2); opacity:0; transform:translateY(50px);}
.main-contact-wrap .contact-list{width:calc(50% - 1rem);}
.main-contact-wrap .contact-list .list-item{position: relative; display: flex; align-items:center; background:#fff; border-radius:0.7rem; min-height:5.2rem; margin-bottom:1rem; box-shadow: 1.7rem 1.7rem 4.9rem 0px rgba(0,0,0,0.08); border:2px solid #fff; transition:all 0.2s;}
.main-contact-wrap .contact-list .list-item:last-child{margin-bottom:0;}
.main-contact-wrap .contact-list .list-item dt{position: relative; width:10rem; padding:0 2.7rem;  box-sizing:border-box; white-space:nowrap; font-size:1.6rem; line-height:1.5; letter-spacing:-0.055em; color:#000; font-weight:600;}
.main-contact-wrap .contact-list .list-item dt:before{position: absolute; content:''; width:1px; height:2.4rem; background:#dfdfdf; opacity:0.7; top:50%; right:0; transform:translateY(-50%);}
.main-contact-wrap .contact-list .list-item dd{width:calc(100% - 10rem); padding:0 2rem; box-sizing:border-box;}
/* input */
.contact-list .write-input{width:100%; height:5.2rem; line-height:5.2rem; border:none; outline:none; font-size:1.6rem; letter-spacing:-0.015em; color:#000;}
.contact-list .write-input::placeholder{color:rgba(0,0,0,0.3);}
.contact-list .write-input[type="file"]{font-size:1.4rem;}
/* textarea */
.main-contact-wrap .contact-list .list-item.textarea-item{align-items:flex-top; height:17.7rem;}
.main-contact-wrap .contact-list .list-item.textarea-item dt{height:100%; line-height:5.2rem;}
.main-contact-wrap .contact-list .list-item.textarea-item dt:before{height:14.6rem;}
.contact-list .write-textarea{width:100%; height:15rem; line-height:1.5; border:none; outline:none; font-size:1.6rem; letter-spacing:-0.015em; color:#000;}
.contact-list .write-textarea::placeholder{color:rgba(0,0,0,0.3);}
/* select */
.main-contact-wrap .contact-list .list-item.select-item{border:2px solid #fff; box-sizing:border-box;}
.main-contact-wrap .contact-list .list-item.select-item dt{z-index:99; background:#fff; border-radius:0.7rem 0 0 0.7rem; line-height:5.2rem;}
.main-contact-wrap .contact-list .list-item.select-item dd{padding:0;}
.main-contact-wrap .contact-list .list-item.select-item dd .custom-select-trigger{z-index:99; background:#fff; border-radius:0 0.7rem 0.7rem 0; line-height:1.3em;}
.main-contact-wrap .contact-list .list-item dd .custom-select-wrapper,
.main-contact-wrap .contact-list .list-item dd .custom-select-wrapper .custom-select{position: static;}
.main-contact-wrap .contact-list .list-item dd .board-custom-select-box .custom-option-drop-list{border:none; left:-2px; right:-2px; top: calc(100% - 0.7rem); padding-top: 0.7rem; border-radius:0 0 0.7rem 0.7rem; box-shadow: 1.7rem 1.7rem 4.9rem 0px rgba(0,0,0,0.08); border:2px solid #fff;}

.main-contact-wrap .contact-list .list-item dd .board-custom-select-box .custom-select.opened .custom-option-drop-list{border-color:var(--main-color); border-top:0;}
.main-contact-wrap .contact-list .list-item.select-item.box-opened{border-color:var(--main-color);}

/* radio */
.main-contact-wrap .contact-list .list-item.radio-item dt{width:13.5rem;}
.main-contact-wrap .contact-list .list-item.radio-item dd{width:calc(100% - 13.5rem); padding:1rem 2rem;}

.main-contact-wrap .contact-list .plus-txt{font-size:1.6rem; line-height:1.65; letter-spacing:-0.055em; color:rgba(0,0,0,0.5);}
.main-contact-wrap .contact-list .privacy-item .agree-txt{margin-top:1.5rem; font-size:1.6rem; letter-spacing:-0.055em; color:#949494;}
.main-contact-wrap .contact-list .privacy-item .agree-txt input{display:none;}
.main-contact-wrap .contact-list .privacy-item .agree-txt label{position:relative; padding-left:2.5rem; }
.main-contact-wrap .contact-list .privacy-item .agree-txt label a{position: relative; color:#000;}
.main-contact-wrap .contact-list .privacy-item .agree-txt label a:before{position: absolute; content:''; width:100%; height:1px; background:#000; bottom:-2px; left:0;}
.main-contact-wrap .contact-list .privacy-item .agree-txt label i{position:absolute; left:0px; font-size:2rem; color:rgba(0,0,0,0.3);}
.main-contact-wrap .contact-list .privacy-item .agree-txt input:checked + label i{color:#000;}

#mainContent4 .cm-btn-controls{transition:var(--transition-custom2); opacity:0; transform:translateY(50px);}

#mainContent4.active-section:before{animation: image-zoom-out 8s 0s forwards;}
.active-section .main-contact-wrap{opacity:1; transform:translateY(0); transition-delay:0.6s}
#mainContent4.active-section .cm-btn-controls{opacity:1; transform:translateY(0); transition-delay:0.6s}


/* 인풋 선택 시 테두리 변화 */
.main-contact-wrap .contact-list .list-item.on:not(.select-item){border-color:var(--main-color);}


/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{
	position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
	left:-50px;
    opacity: 1;
    transform: translate3d(0,0,0);
	transition:var(--transition-custom2);
}
#fp-nav ul li{position:relative; width:8px; margin:20px 0;}
#fp-nav ul li:last-child{display:none} /* 마지막 섹션이 footer일경우 */
#fp-nav ul li a{display:block; position:relative; width:100%; height:8px; box-sizing:border-box;}
#fp-nav ul li a span{position: relative; display:block; width:8px; height:8px; border-radius:50%; border:2px solid rgba(0,0,0,0.25); box-sizing:border-box;}
#fp-nav ul li a span:before{position: absolute; content:''; width:12px; height:12px; background:#000; top:50%; left:50%; transform:translate(-50%, -50%) scale(0); border-radius:50%; transition:var(--transition-custom);}
#fp-nav ul li .fp-tooltip{display: none;}
#fp-nav ul li a.active span:before{transform:translate(-50%, -50%) scale(1);}

/* Black Style */
#fp-nav.black{left:50px;}
.image {display: block; width: 100%;}