/* 공통 :: 타이틀 */
.main-tit-box{}
.main-tit-box .main-category{display:block; color:var(--main-color); font-size:2rem; font-weight:600; line-height:1.5; margin-bottom:2rem;}
.main-tit-box .main-tit{color:#000; font-size:6rem; font-weight:700; line-height:1.1; margin-bottom:2rem; text-transform: uppercase;}
.main-tit-box .main-tit02{color:#000; font-size:4rem; font-weight:600; line-height:1.55;}
.main-tit-box .main-txt{color:#58595B; font-size:2rem; font-weight:400; line-height:1.7;}

.main-tit-box .main-category,
.main-tit-box .main-tit,
.main-tit-box .main-tit02,
.main-tit-box .main-txt{letter-spacing:0.05em; filter:blur(20px); transition:var(--transition-custom2);}

.animated .main-tit-box .main-category{letter-spacing:-0.05em; filter:blur(0px);}
.animated .main-tit-box .main-tit{letter-spacing:-0.025em; filter:blur(0px);}
.animated .main-tit-box .main-tit02{letter-spacing:0em; filter:blur(0px);}
.animated .main-tit-box .main-txt{letter-spacing:-0.05em; filter:blur(0px);}

/* 공통 :: 타이틀 :: white */
.main-tit-box.white .main-tit,
.main-tit-box.white .main-tit02{color:#fff;}
.main-tit-box.white .main-txt{color:rgba(255,255,255,0.5);}

/* 공통 :: 버튼 */
.main-visual-more-btn{display:inline-flex; align-items: center; padding:1rem 3rem 1rem 1rem; border-radius:5rem; background-color:rgba(255,255,255,0.1); backdrop-filter:blur(20px); overflow:hidden; margin-top: 6rem;}
.main-visual-more-btn .arrow-circle {display:inline-flex; align-items: center; justify-content:center; width: 4rem; height: 4rem; background: var(--main-color); border-radius:100%; /* line-height:4rem; */ margin-right: 2rem; position: relative; z-index:1; text-align:center;}
.main-visual-more-btn .arrow-circle > i {color: #fff; font-size:2.4rem;}
.main-visual-more-btn em {font-size:1.5rem; color:#fff; letter-spacing:-0.3px; font-weight: 400; position: relative; z-index:1; transition:var(--transition-custom);}
.btn-effect .cm-fill {position:absolute; display: block; width: 0; height: 0; transform:translate(-50%,-50%); border-radius:50%; background:#fff; transition:width 0.7s, height 0.7s; z-index:0;}
.btn-effect:hover .cm-fill {width: 40rem; height: 40rem;}
.btn-effect:hover em{color:#58595B}

/* 공통 :: 화살표 */
.cm-left-arrow{position: relative; display: flex; align-items:center; width:80px; /* height:2rem; */ }
.cm-left-arrow em{position: absolute; width:100%; height:2px; background:#fff;}
.cm-left-arrow i{color:#fff; font-size:20px; transform: translateX(-32%);}
.cm-right-arrow{position: relative; display: flex; align-items:center; justify-content: flex-end; width:80px; height:20px; text-align:right; margin-left:30px;}
.cm-right-arrow em{position: absolute; width:100%; height:2px; background:#fff;}
.cm-right-arrow i{color:#fff; font-size:20px; transform: translateX(32%);}

/* 공통 :: 화살표(black) */
.cm-left-arrow.black em{background:#222;}
.cm-left-arrow.black i{color:#222;}
.cm-right-arrow.black em{background:#222;}
.cm-right-arrow.black i{color:#222;}

/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:100vh;  position:relative; background-color:#000; z-index:9; }
.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;
	filter: brightness(0.8);
	/* transform: scale(1.08,1.08); */
}
.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;
}
.main-visual-txt-box{
	display:flex;
	justify-content: center;
	align-items:center;
	height:100%;
}
.main-visual-txt-inner{text-align:center;}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3{
	transition:1.4s;
	/* transition-delay:0.8s; */
	filter:blur(20px);
}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2,
.main-visual-txt-box .main-visual-txt3,
.main-visual-txt-box .main-visual-more-btn{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:28px; font-weight:700; letter-spacing:0.05em; color:#FF8200; text-align:center; transition-delay:0.6s; font-family: 'Freesentation-9Black';}
.main-visual-txt-box .main-visual-txt1.color-wh {
	font-size: 40px;
	color: #fff;
}
.main-visual-txt-box .main-visual-txt2{/* font-size:20px; */font-size:24px; letter-spacing:0.09em; line-height:1.2em; /* line-height:1em; */ color:#ffe69e; 
	/* color:#ffc419; */
	margin-top:3rem; font-weight: bold; transition-delay:0.9s; font-family: 'GmarketSansMedium'; /* #f7c126 */
/* position: relative;
transform: translateY(20%); */
}
.main-visual-txt-box .main-visual-txt3{/* font-size:28px; */ font-size:22px; letter-spacing:0.05em; line-height:1.2em; color:#fff; margin-top:1rem; font-weight: 600; transition-delay:1.2s;}


/* 메인 비주얼 :: 텍스트 :: active효과 */
.active-item .main-visual-txt1{opacity: 1; filter:blur(0); letter-spacing:-0.065em;}
.active-item .main-visual-txt2{opacity: 1; filter:blur(0); letter-spacing:-0.05em;}
.active-item .main-visual-txt3{opacity: 1; filter:blur(0); letter-spacing:-0.05em;}

.active-item .main-visual-more-btn{
	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:0.3s;} */
.active-item .main-visual-more-btn{animation-delay:1.1s;}
.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;}
.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:blur(20px);
	}
	to {
		opacity:1.0;
		filter:blur(0px);
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}


/* 메인 비주얼 :: 화살표 + 버튼 */
.main-visual-control-box{position: absolute; bottom:10%; width:100%; z-index:9999; transition:var(--transition-custom2); padding: 0 20px; box-sizing: border-box;}
.main-visual-control-box .area-wide{display: flex; justify-content:flex-end; align-items:center;}

.main-visual-control-box .main-slide-arrows{display: flex; margin-left:30px;}

/* 메인 비주얼 :: 스크롤아이콘 */
.cm-scroll-icon{display: flex; align-items:center; transition:var(--transition-custom2);}
.cm-scroll-icon .scroll-txt{font-size:14px; letter-spacing:0.02em; color:#fff; font-weight:600; margin:0 2rem; transition:var(--transition-custom2);}
.cm-scroll-icon .scroll-box{position: relative; width:60px; height:60px;}
.cm-scroll-icon .scroll-box svg{stroke-dasharray: 500; stroke-dashoffset: 500; transition:all 3s linear; transition-delay:0.8s}
.cm-scroll-icon .scroll-box svg *{fill:transparent; stroke:#fff; stroke-width:3px; transition:stroke 0.8s ease-in-out;}

.cm-scroll-icon .scroll-box .dots{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:2px; height:4rem; /* background:rgba(255,255,255,0.1); */ overflow:hidden;}
.cm-scroll-icon .scroll-box .dots span{display: block; width:100%; height:100%; animation: scroll-icon 1.25s linear infinite; animation-delay:1s; transition:var(--transition-custom2); transform:translateY(-100%);
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+25,1+75,0+100 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 60%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/* active */
.main-active .cm-scroll-icon .scroll-box svg{stroke-dashoffset: 0;}
/* black */
.cm-scroll-icon.black .scroll-txt{color:#58595B;}
.cm-scroll-icon.black .scroll-box svg *{stroke:#58595B;}
.cm-scroll-icon.black .scroll-box .dots span{
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+25,1+75,0+100 */
background: linear-gradient(to bottom,  rgba(88,89,91,0) 0%,rgba(88,89,91,1) 40%,rgba(88,89,91,1) 60%,rgba(88,89,91,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */}

@keyframes scroll-icon {
	0% {
		transform:translateY(-100%)
	}
	50% {
		transform:translateY(0%)
	}
	100% {
		transform:translateY(100%)
	}
}

/* 브랜드페이지 전용 css */
.cm-scroll-icon{position: fixed; /* bottom:6rem; */ /* left:10rem; */ left:50%; transform:translateX(-860px);}

/* -------- 메인 컨텐츠 :: 공통 슬라이드 -------- */
/* 메인 비주얼 :: Dots */
.main-slide-dots .slick-dots{display:inline-block; vertical-align:top; /* *display:inline;*zoom:1; */ }
.main-slide-dots .slick-dots li{float:left; margin-left:20px; margin-top:-5px;}
.main-slide-dots .slick-dots li:first-child{margin-left:0}
.main-slide-dots .slick-dots li button{ cursor:pointer; margin:0px; padding:0px; background:transparent; width:10px; height:10px; font-size:0; border:1px solid #fff; box-sizing:border-box; transition:var(--transition-custom);}
.main-slide-dots .slick-dots li.slick-active button{background-color:#fff;}

/* black */
.main-slide-dots.black .slick-dots li button{border-color:#000;}
.main-slide-dots.black .slick-dots li.slick-active button{background:#000;}
.main-slide-arrows.black .slick-arrow{color:#000;}

/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1780px){
	.cm-scroll-icon{left:var(--area-padding); transform:none;}
}
@media all and ( max-width: 1280px ){
	/* 메인 비주얼 :: 스크롤 */
	.cm-scroll-icon{position: absolute; top:calc(100vh - 20rem); bottom:auto; left:50%; transform:translate(-50%, -100%); }
	.cm-scroll-icon .scroll-txt{display: none;}
	/* 메인 비주얼 :: 화살포 + 버튼 */
	.main-visual-control-box .area-wide{justify-content: space-between; width:100%; box-sizing: border-box;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{margin-bottom:120px;}
	.main-visual-txt-box .main-visual-txt1{font-size:24px;}
	.main-visual-txt-box .main-visual-txt1.color-wh {
		font-size: 24px;
		color: #fff;
	}
.main-visual-txt-box .main-visual-txt2{font-size:18px; letter-spacing:0.05em; line-height:1.06em; /* color:#fff; */ margin-top:2rem;  transition-delay:0.9s;}

.main-visual-txt-box .main-visual-txt3{font-size:16px; letter-spacing:0.05em; line-height:1.06em; color:#fff; margin-top:2rem; font-weight: 600; transition-delay:0.9s;}

	/* 메인 비주얼 :: 화살포 + 버튼 */
	.cm-left-arrow,
	.cm-right-arrow{width:60px;}

}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-category{font-size:1.6rem;}
	.main-tit-box .main-tit{font-size:4rem;}
	.main-tit-box .main-tit02{font-size:3rem;}
	.main-tit-box .main-txt{font-size:1.6rem;}
}

/* ========================================================
 * LAYOUT
======================================================== */





/* 제품소개 */
/* -------- 메인 컨텐츠 :: 컨텐츠3() -------- */
#product{ overflow:hidden; padding:10rem 0; background:#f5f5f5;}
.main-product-wrap .main-board-top-box{display: flex; justify-content:space-between; align-items:flex-end; transform:translateY(100px); transition:var(--transition-custom2);}
.main-product-wrap .main-tit-box{text-align:left;}
.main-product-wrap .main-tit-box .main-tit{color:#000; text-transform: uppercase;}
.main-product-wrap .main-tit-box .main-txt{color:rgba(0,0,0,0.5);}

.main-board-arrow-wrap{display: flex;}
.main-board-arrow-wrap .slick-arrow{position: relative; display: flex; align-items:center; height:6rem; margin-right:2rem;}
/* .main-board-arrow-wrap .slick-arrow:before{position: absolute; content:''; width:6rem; height:6rem; border:2px solid #000; box-sizing:border-box; opacity:0; transition:var(--transition-custom);} */
.main-board-arrow-wrap .slick-arrow span{display: block; width:10.2rem; height:1.3rem; background:no-repeat center; background-size:cover; opacity:1; transition:var(--transition-custom);}
.main-board-arrow-wrap .slick-arrow.slick-prev:before{top:0; left:-2.5rem;}
.main-board-arrow-wrap .slick-arrow.slick-prev span{background-image:url('/images/main/main_left_arrow.svg');}
.main-board-arrow-wrap .slick-arrow.slick-next:before{top:0; right:-2.5rem;}
.main-board-arrow-wrap .slick-arrow.slick-next span{background-image:url('/images/main/main_right_arrow.svg');}

.main-board-arrow-wrap .slick-arrow.slick-disabled span{opacity:0.2;}

.main-product-list{margin:100px 0; transform:translateX(120%); transition:all 2s;}
.main-product-list .list-item{margin:0 3rem;}
.main-product-list .list-item .img-box{transition:var(--transition-custom); overflow:hidden;}
.main-product-list .list-item .img-box span{position: relative; display: block; width:100%; height:0; padding-top:100%; background:#fff;}
.main-product-list .list-item .img-box span img{position: absolute;/* width:100%; */height: 100%;top: 50%;/* bottom:0; */left: 50%;/* right:0; */margin:auto;transform: translate(-50%, -50%); object-fit: cover;}
.main-product-list .list-item .img-box span svg{width:75%; max-width:240px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.main-product-list .list-item .txt-box{margin-top:3.5rem;}
.main-product-list .list-item .txt-box .category{font-size:1.8rem; line-height:1.5; letter-spacing:-0.03em; color:var(--main-color); font-weight:bold; margin-bottom:0.6rem;}
.main-product-list .list-item .txt-box .tit{font-size:2.5rem; font-weight: bold; line-height:1.5; letter-spacing:-0.02em; color:#000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main-product-list .slick-list{overflow:visible;}
.main-product-list .list-item.slick-cloned{opacity:0;}
.main-product-list .list-item.slick-active + .list-item.slick-cloned{opacity:1;}

/* animated */
.animated .main-product-wrap .main-board-top-box{transform:translateY(0px); transition-delay:0.25s}
.animated .main-product-list{transform:translateX(0px);}

@media all and (min-width:1281px){
	.main-product-list .list-item:hover .img-box{border-radius:50%;}
}

@media all and (min-width:801px){
	.main-product-list .list-item a:hover .img-box{box-shadow: 2rem 2rem 6rem #0000001A;}
	/* .main-board-arrow-wrap .slick-arrow:hover:before{opacity:1}
	.main-board-arrow-wrap .slick-arrow:hover span{opacity:1;} */
}
@media all and (max-width:1280px){
	#product{padding:12rem 0;}
	.main-product-list{margin:9rem -3rem 0;}
}
@media all and (max-width:800px){
	.main-product-wrap .main-board-top-box{display: block;}
	.main-product-wrap .main-tit-box{text-align:center;}
	/* .main-product-wrap .main-tit-box .main-txt{display: none;} */
	.main-board-arrow-wrap{width:100%; justify-content: space-between; margin-top:5rem;}
	.main-board-arrow-wrap .slick-arrow{height:auto; margin-right:0;}
	.main-board-arrow-wrap .slick-arrow:before{display: none;}
	.main-board-arrow-wrap .slick-arrow span{width:14.1rem;}

	.main-product-list{margin:6rem -1rem 0}
	.main-product-list .slick-list{overflow:hidden;}
	.main-product-list .list-item{margin:0 1rem;}
}

/* 제품소개 */


/* 회사소개와 브랜드 */


/* -------- 메인 컨텐츠 :: 컨텐츠2(퀵메뉴) -------- */
#mainQuickCon{padding: 10rem 0; position: relative; z-index: 1; overflow: hidden;}

.main-quick-con{}
/* 오른쪽 텍스트 영역 */
.main-quick-right{float: right; margin-top: 245px; width: 500px;}
.main-quick-right .main-quick-tit-box{}
.main-quick-right .main-quick-tit-box .tit{font-size: 60px; font-weight: 700; line-height: 0.8; letter-spacing: -0.025em; color: var(--main-color); text-transform: uppercase;}
.main-quick-right .main-quick-tit-box .tit.cm-word-split-JS.splitting .word{line-height: 1;}
.main-quick-right .main-quick-tit-box .tit b{display: inline-block; color: var(--main-color); font-weight: 700;}
.main-quick-right .main-quick-tit-box .txt01 {margin-top: 45px; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; color: #083250;}
.main-quick-right .main-quick-tit-box .txt02 {margin-top: 25px; font-size: 15px; line-height: 1.6; color: #55585b;}

.main-quick-tit-box .txt01,
.main-quick-tit-box .txt02{opacity: 0;}
.main-quick-tit-box .tit.splitting .char{opacity:0;}
.animated .main-quick-tit-box .tit.splitting .char,
.animated .main-quick-tit-box .txt01,
.animated .main-quick-tit-box .txt02{
	-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;
}
.animated .main-quick-tit-box .txt01{animation-delay: 0.2s;}
.animated .main-quick-tit-box .txt02{animation-delay: 0.4s;}

/* 왼쪽 이미지 영역 */
.main-quick-left{max-width: 834px; width: calc(100% - 500px); float: left;}
.main-quick-wrapper{position: relative;}
.main-quick-list{width: 46.76%;}
.main-quick-list.list01{float: left;}
.main-quick-list.list02{margin-top: 155px; float: right;}
.main-quick-item{position: relative;}
.main-quick-list.list02 .main-quick-item {box-shadow: 38px 40px 150px 0px rgba(0, 0, 0, 0.26);}
.main-quick-item .quick-item-inner {display: block; position: relative; width: 100%; height: 0; padding-top: 147.16%; -webkit-box-shadow: 55px 55px 150px -75px rgba(0,0,0,0.26); box-shadow: 55px 55px 150px -75px rgba(0,0,0,0.26); overflow: hidden;}
.main-quick-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.7s; transition: all 0.7s;}
.main-quick-txt{position: absolute; left: 10%; padding-right: 10%; bottom: 7%;}
/* 내부 텍스트 영역 */
.main-quick-txt p{font-size: 22px; font-weight: 500; line-height: 1.5em; color: #fff; text-transform: uppercase;}
.quick-txt-bottom {margin-top: 30px; display: flex; align-items: center; justify-content: space-between;}
.main-quick-list.list02 .quick-txt-bottom{margin-top: 10px;}
.quick-txt-bottom p{font-size: 16px; font-weight: bold; line-height: 2.8em; letter-spacing: -0.025em; color: rgba(255, 255, 255,0.55);}
.quick-txt-bottom span{display: inline-block; position: relative; font-size: 12px; font-weight: 700; letter-spacing: -0.025em; color: #fff;}
.quick-txt-bottom span:before{position: absolute; top: 50%; margin-top: -1px; right: 80px; content: ''; width: 20px; height: 1px; background-color: rgba(255,255,255,0.2); -webkit-transition: width 0.2s; transition: width 0.2s;}

@media all and (min-width:801px){	
	.main-quick-item a:hover .main-quick-bg{-webkit-transform: scale(1.2); transform: scale(1.2);}
	.main-quick-item a:hover .quick-txt-bottom span:before{width: 30px;}
}

/* 왼쪽 이미지 영역 23-06-01 수정 */
.quick-txt-bottom span {left: 2.3rem;}
.main-quick-list.list02 .quick-txt-bottom {margin-top: 30px;}
.main-quick-txt .quick-link {display: block; margin-bottom: 0.6rem;}
.main-quick-txt .quick-link:last-of-type {margin-bottom: 0;}
.main-quick-item .quick-link:hover ~ .quick-txt-bottom span:before {width: 30px;}
.main-quick-item .quick-link:hover .main-quick-bg{-webkit-transform: scale(1.2); transform: scale(1.2);}



/* -------- 메인 컨텐츠 :: 컨텐츠2(퀵메뉴) -------- */
@media all and (max-width:1650px){
	.main-quick-right {width: 38%;}
	.main-quick-left {width: calc(62% - 60px);}
	.main-quick-tit-box .txt02 .pc-br{display: none;}
}
@media all and (max-width:1220px){
	.main-quick-right {width: 42%;}
	.main-quick-left {width: calc(58% - 60px);}
	.main-quick-list .main-quick-item .quick-txt-bottom {flex-direction: column; align-items: flex-start;}
	.main-quick-list .main-quick-item .quick-txt-bottom a:nth-child(2)::before {left: auto; right: -35px;}
}
@media all and (max-width:1024px){
	#mainQuickCon {padding: 50px 0 160px;}
	.main-quick-right{float: none; width: 100%; margin-top: 0;}
	.main-quick-left{float: none; width: 100%;}
	.main-quick-list{position: relative; float: left;}
	.main-quick-list.list02{top: 0; float: right;}
	.main-quick-wrapper {margin-top: 3rem;}
}
@media all and (max-width:800px){
	#mainQuickCon {padding: 50px 0;}
	/* 오른쪽 텍스트 영역 */
	.main-quick-txt{left: 10%; bottom: 10%;}
	.main-quick-right .main-quick-tit-box .tit{font-size: 28px;}
	.main-quick-right .main-quick-tit-box .txt01 {margin-top: 25px; font-size: 15px;}
	.main-quick-right .main-quick-tit-box .txt02 {margin-top: 15px; font-size: 13px;}
	/* 내부 텍스트 영역 */
	.main-quick-txt p{font-size: 15px;}
	.quick-txt-bottom {margin-top: 15px;}
	.main-quick-list.list02 .quick-txt-bottom{margin-top: 10px;}
	.quick-txt-bottom p{font-size: 13px; line-height: 2.8em;}
	.quick-txt-bottom span{padding-left: 30px; font-size: 12px;}
	.quick-txt-bottom span:before{right: auto; left: 0;}
}
@media all and (max-width:640px){
	.main-quick-list .main-quick-item .quick-txt-bottom {flex-direction: column; align-items: flex-start;}
}



/* 회사소개와 브랜드 */

/* 중간배너 */
/* -------- 메인 컨텐츠 :: 컨텐츠4(배너) -------- */
#mainBannerCon{position: relative; height: 61rem; overflow: hidden;}
/* 메인 비주얼 영상영역 */
.background-video-wrapper{position:absolute; overflow:hidden; height:100vh; width:100%; background-color:#000f1f;}
.background-video{position:absolute; top:0; left:0px; width:100%; height:100%}
.background-video-wrapper.pc-img{display: block;}
.background-video-wrapper.tbl-img,
.background-video-wrapper.m-img{display: none;}
.background-video img{}
.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.8;filter:Alpha(opacity=80);
	transition: opacity 3s 0.2s;
}
.main-banner-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-banner-box .area{width: 100%; height: 100%; display: flex; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-banner-box .img,
.main-banner-box .txt{width: 50%; /* opacity: 0; transform: translateY(50px); transition: all 0.8s; */}
.main-banner-box .img img{max-width: 100%; height: auto;}
.main-banner-box .img span{font-size: 48px; color: #fff; font-weight: bold; font-family: 'BMDOHYEON';}
.main-banner-box .txt h5{font-size: 3.5rem; line-height: 1.3; font-weight: 600; color: #fff;}
.main-banner-box .txt p{margin-top: 1.66em; font-size: 1.6rem; line-height: 1.66; color: rgba(255,255,255,0.78);}

/* #mainBannerCon.animated .main-banner-box .img,
#mainBannerCon.animated .main-banner-box .txt{opacity: 1; transform: translateY(0);} */
@media all and (max-width:800px){
	#mainBannerCon{height: auto;}
	.background-video-wrapper.tbl-img{display: block;}
	.background-video-wrapper.pc-img,
	.background-video-wrapper.m-img{display: none;}
	.main-banner-box{position: relative; height: auto; text-align: center;}
	.main-banner-box .area{padding: 12rem 0; height: auto; display: block;}
	.main-banner-box .img{width: 100%;}
	.main-banner-box .txt{margin-top: 9rem; width: 100%;}
	.main-banner-box .txt h5{font-size: 4rem; line-height: 1.1;}
	.main-banner-box .txt p{margin-top: 1.66em; font-size: 1.8rem;}
}
@media all and (max-width:480px){
	.main-banner-box .img{
		max-width: 240px;
        margin: 0 auto;
	}
	.background-video-wrapper.m-img{display: block;}
	.main-banner-box .area {padding: 8rem 0;}
	.background-video-wrapper.tbl-img,
	.background-video-wrapper.pc-img{display: none;}

	.main-banner-box .txt h5{font-size: 2rem; }
	.main-banner-box .txt p{margin-top: 1.4em; font-size: 1.5rem;}
}
/* 중간배너 */



/* 프로젝트 */
/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
#project{/* margin-bottom:23.5rem; */ padding: 10rem 0;}
#project .main-tit-box {display: flex; align-items:flex-end; justify-content:space-between; margin-bottom:6.5rem;}
.main-project-con{margin:0 -1.85rem; max-height:60rem;}
.main-project-con .list-item{position: relative; margin:0 1.85rem;}
.main-project-con .list-item .tit-box{margin-top:3.8rem;}
.main-project-con .list-item .tit-box .tit{font-size:2.5rem; line-height:1.24; letter-spacing:-0.06em; color:#000; font-weight:600;}
.main-project-con .list-item .tit-box .txt{font-size:1.7rem; line-height:1.5; letter-spacing:-0.045em; color:#555; margin-top:2.2rem;}
.main-project-con .list-item .img-box{overflow:hidden; aspect-ratio: 9/11;}
.main-project-con .list-item img{width:100%; transition:var(--transition-custom); display: block; height: 100%; object-fit: cover;}

#project .slide-btn-wrap .slick-arrow{margin-left:2.4rem;}
#project .slide-btn-wrap .slick-arrow img{transition:var(--transition-custom); opacity:0.24;}
#project .slide-btn-wrap .slick-arrow:hover img{opacity:1;}

/* hover */
.main-project-con .list-item a:hover img{transform:scale(1.08);}

/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
@media all and (max-width:800px){
	#project{/* margin-bottom:10rem; */ width: 100%; overflow: hidden;}
  #project .main-tit-box{
    flex-direction: column;
    align-items: flex-start;
  }
  #project .slide-btn-wrap .slick-arrow{
    margin-left: 0;
  }
	.main-project-con{margin:0 -0.5rem;}
	.main-project-con .list-item{position: relative; margin:0 0.5rem;}
	.main-project-con .list-item .tit-box{margin-top:2.7rem;}
	.main-project-con .list-item .tit-box .tit{font-size:2.2rem;}
	.main-project-con .list-item .tit-box .txt{margin-top:1rem; font-size:1.6rem;}

	.main-project-con .slick-list{overflow:visible;}
}

/* 프로젝트 */




/* 문의하기 */
/* -------- 메인 컨텐츠 :: 컨텐츠4(contact) -------- */
#contact{ padding: 10rem 0;}
.main-contact-top{padding: 14rem 0 8.5rem; background-color: #F5F5F5; text-align: center;}
.main-contact-top .main-tit-box .main-sub-tit{font-size:3rem; line-height: 1.1;}

.main-contact-bottom{position: relative;}
.main-contact-bottom:before{position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 50%; background-color: #F5F5F5;}
.main-contact-bnr{width: 100%; height: 50rem; position: relative; overflow: hidden; border-radius: 50px;}
.main-contact-bg{width: 100%; height: 100%; position: absolute; top: 0; left: 0; /* width: 75%; height: 50%; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); transition: all 0.6s; */ background: url("/images/main/contact_bg.jpg") center/cover no-repeat; transform: scale(1.2); transition:var(--transition-custom2);}
.main-contact-txt{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: translateY(5rem); opacity: 0; transition:var(--transition-custom2); transition-delay: 0.3s;}
.main-contact-txt p{font-size: 3.6rem; line-height: 1.5; color: #fff; font-weight: 700;}
.main-contact-txt a{margin: 6.5rem auto 0; width: 28rem; height: 6rem; border-radius: 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: transparent; position: relative; transition:var(--transition-custom);}
.main-contact-txt a:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6rem; content: ''; z-index: -1;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8dc63f+0,00854a+100 */
background: rgb(141,198,63); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(63, 117, 198,1) 0%, rgba(0, 47, 133, 1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(63, 117, 198,1) 0%,rgba(0, 47, 133, 1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(63, 117, 198,1) 0%,rgba(0, 47, 133, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#00854a',GradientType=1 ); /* IE6-9 */}
.main-contact-txt a span{font-size: 2rem; line-height: 1.3; color: #fff; font-weight: 700; transition:var(--transition-custom);}
.main-contact-txt a:hover{background: #fff; color: var(--main-color);}
.main-contact-txt a:hover span{background: linear-gradient(to right, rgb(63, 117, 198), rgb(0, 47, 133)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800;}

.main-contact-bnr.animated .main-contact-bg{transform: scale(1.0); /* width: 100%; height: 100%; */}
.main-contact-bnr.animated .main-contact-txt{transform: translateY(0); opacity: 1;}

/* -------- 메인 컨텐츠 :: 컨텐츠4(contact) -------- */
@media all and ( max-width: 800px ){
	.main-contact-top{padding: 10rem 0 4rem;}
	.main-contact-top .main-tit-box .main-sub-tit{font-size:2rem; line-height: 1.2;}

	.main-contact-bottom{position: relative; background-color: #F5F5F5;}
	.main-contact-bottom .area-box{padding: 0;}
	.main-contact-bottom:before{display: none;}
	.main-contact-bnr{height: 50rem;}
	.main-contact-bg{width: 100%; height: 100%;}
	.main-contact-txt{padding: 0 var(--area-padding); box-sizing: border-box;}
	.main-contact-txt p{font-size: 2.6rem; line-height: 1.69;}
	.main-contact-txt a{margin: 4rem auto 0; width: 20rem; height: 5.4rem; font-size: 1.8rem;}
}

/* 문의하기 */