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

/* ========================================================
 * Main Visual 
======================================================== */
/* ******************  Main Visual :: 텍스트 ********************** */
.main-visual-wheel-container.wheel-container{overflow:visible; background-color:#000;}
#mainVisual{width:100%; height:100vh; position:relative;}
.main-visual-wrapper{overflow:hidden; position:absolute; bottom:0; left:0; width:100%; height:100%; }
/* 메인비주얼영역 :: 비주얼 텍스트 */
.main-visual-txt-con{position:relative;  height:100%; }
.main-visual-slogan-txt {
	position:absolute; 
	bottom:12.2396vw; 
	left:0px; 
	grid-area: content-item;
	pointer-events: none;
	display: flex;
	align-content: center;
	flex-direction: column;
	height: 0;
	justify-content: center;
	overflow: visible;
	height: auto;
	opacity: 0;
	pointer-events: auto;
}
.main-visual-slogan-item {
	font-size: 140px;
	font-weight: 600;
	line-height: 1.15;
	position: relative;
	flex: none;
	color:#fff;
}
.main-visual-slogan-item.small{
	font-size:60px;
	font-weight:300;
	letter-spacing:-0.0333em;
}
.main-visual-slogan-item .char{
	opacity:0;
	-webkit-user-select:none;
	-moz-user-select: none;
	-ms-user-select: none; 
	margin-left:-0.05em;
}
.main-visual-slogan-item:last-child{margin-top:-0.342em}
.main-visual-slogan-item:not(.small) .word{margin-left:-0.1em;}
.main-visual-slogan-item .word:first-of-type,
.main-visual-slogan-item.small .char,
.main-visual-slogan-item .char:first-child{margin-left:0;}
.ie-browser .main-visual-slogan-item .char{background-image:none;}

/* ******************  Main Visual :: 영상 ********************** */
.background-video-wrapper{position:fixed; top:0px; left:0px; 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: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: calc(100vh + 340px);
	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:0.9;filter:Alpha(opacity=90); }
.background-video-alternative{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}

/* ******************  Main Visual :: 이미지 ********************** */
.background-image-wrapper{position:fixed; top:0px; left:0px; overflow:hidden; height:100vh; width:100%; background-color:#000;}
.background-image-wrapper .background-bg-img{width:100%; height:100%; background-size:cover !important; transform:scale(1.1); opacity:0; }

/* ========================================================
 * Main Contents 
======================================================== */
/* ******************  메인 :: 공통 ********************** */
#mainContent{overflow:hidden; position:relative; background-color:#fff; font-size:15px}

/* 메인 공통 :: 카테고리 */
.main-cm-category{display:inline-block; position:relative; height:1.71em; padding:0.42em 1.071em 0.38em; color:#fff; font-size:14px; box-sizing:border-box; }
.main-cm-category:before{position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:#92d050; content:""; transform:scaleX(0); transition:transform 0.5s; transform-origin:0 0;}
.main-cm-category em{position:relative; font-weight:inherit; color:inherit; opacity:0; transition:opacity 0.3s 0.4s}
.main-cm-category.is-active:before{transform:scaleX(1);}
.main-cm-category.is-active em{opacity:1;}

/* 메인 공통 :: 타이틀 */
.main-cm-tit{color:#252525; line-height:1.125; font-size:4.2666em; letter-spacing:-0.039em; font-weight:700;}
.main-cm-sub-txt{color:#444; font-size:1.3333em; letter-spacing:-0.01em; line-height:1.66em; font-weight:300; }

/* 메인 공통 :: more 버튼 */
.read-more-btn{display:inline-block; position:relative; line-height:40px; font-size:1.333em; letter-spacing:-0.15px; color:#ff8500; }
.read-more-btn:before{position:absolute; top:50%; left:0px; width:40px; height:40px; transform:translate(-50%, -50%); background-color:#fff2e5; content:""; border-radius:50%; transition:all 0.7s }
.read-more-btn em,
.read-more-btn i{position:relative; transition:all 0.7s}
.read-more-btn i{top:3px; margin-left:1em; font-size:1.23em;}
.read-more-btn:hover:before{left:100%;}
.read-more-btn:hover i{transform:translateX(12px); letter-spacing:-0.15px;}
.read-more-btn:hover em{letter-spacing:1px;}
.read-more-btn.green{color:#000;}
.read-more-btn.green:before{background-color:#dbedcd;}

/* ******************  메인 :: 회사소개 ********************** */
.wheel-container.main-company-wheel-container{display:block;}
#mainCompanyContent{height:calc(100% - 200px); overflow:hidden; position:relative; background-color:#ffe345; /* font-size:20px; */ box-sizing:border-box; }
/* 회사소개 :: BG */
#mainCompanyContent .company-left-top-bg{position:absolute; top:0px; left:41px; /* width:225px; height:120px; */ width:11.7188vw; height:6.2500vw; background:url(/images/main/company_top_left_bg.gif) no-repeat; background-size:100% auto}
#mainCompanyContent .company-left-bottom-bg{position:absolute; bottom:0px; left:0px; width:11.1458vw; height:17.5521vw; background:url(/images/main/company_bottom_left_bg.gif) no-repeat; background-size:100% auto}
#mainCompanyContent .company-right-bg{position:absolute; top:0px; right:0px; width:50%; height:100%; background:url(/images/main/company_right_bg.jpg) no-repeat 100% 0; background-size:auto 100%;}
/* 회사소개 :: 레이아웃 */
.main-company-container{position:relative; height:100%; width:100%; display:table; /* padding:120px 0 105px; */ box-sizing:border-box;}
.main-company-intro-wrapper{position:relative; z-index:1; display:table-cell; vertical-align:middle;}
.main-company-intro-inner{/* display:flex; height:100%; display:flex; align-items:center; */}
/* 회사소개 :: 타이틀 영역 */
.main-company-tit-box{margin-bottom:4.05em;}
.main-company-tit-box .main-company-intro-tit{margin:0.468em 0 0.406em; }
.main-company-tit-box .main-company-intro-txt{font-size:1.3333em ; color:#444; }
/* 회사소개 :: 숫자 영역 */
.main-company-number-box{overflow:hidden; padding-left:5px;}
.main-company-number-box ul{display:flex; justify-content:space-between; margin-left:-6px;}
.main-company-number-box ul li:first-child{padding-left:5px;}
.main-company-intro-num dt{color:#ff8400; font-size:1.3333em ; letter-spacing:-0.025em; margin-bottom:0.6em;}
.main-company-intro-num dd{display:flex; align-items:center; color:#252525; font-size:4em; letter-spacing:-1px; margin-left:-0.11em}
.main-company-intro-num dd .num{font-size:1.833em; letter-spacing:-0.0677em; margin-right:8px; font-weight:700;}

/* ******************  메인 :: 카테고리 메뉴 ********************** */
#mainQuickContent{/* display:flex; align-items:center; */ height:200px; background-color:#f7f7f7; padding:51px 0; box-sizing:border-box;}
.main-quick-menu-container{position:relative; padding:0 120px; }
.main-quick-menu-inner .main-quick-menu-item{width:170px; box-sizing:border-box; padding:0 20px; text-align:center;}
.main-quick-menu-inner .main-quick-menu-item .quick-menu-icon{overflow:hidden; display:block; position:relative; height:70px; margin:auto; /* height:55px; width:55px; margin:0px auto 4px; */ }
.main-quick-menu-inner .main-quick-menu-item .quick-menu-icon .icon{position:absolute; top:0; left:0;display:block; margin:auto; width:100%; height:100%; transition:all 0.4s}
.main-quick-menu-inner .main-quick-menu-item .quick-menu-icon .on-icon{top:100%;}
.main-quick-menu-inner .main-quick-menu-item .quick-menu-tit{display:flex; /* align-items:center; */  height:3.6em; justify-content:center; color:#252525; font-size:1em; line-height:1.2; letter-spacing:-0.1px; font-weight:500; transition:all 0.3s; margin-top:10px;}
.main-quick-menu-inner .main-quick-menu-item a:hover .quick-menu-tit{color:#92d050}
.main-quick-menu-inner .main-quick-menu-item a:hover .quick-menu-icon .off-icon{top:-100%;}
.main-quick-menu-inner .main-quick-menu-item a:hover .quick-menu-icon .on-icon{top:0%;}
.main-quick-menu-container .quick-menu-control-btn{position:absolute; width:60px; top:0px; font-size:1em; text-align:center;}
.main-quick-menu-container .quick-menu-prev-btn{left:0px; }
.main-quick-menu-container .quick-menu-next-btn{right:0px;}
.main-quick-menu-container .quick-menu-control-btn .arrow-icon{display:block; width:60px; height:60px; line-height:60px; border-radius:50%; box-sizing:border-box; border:1px solid #ddd; color:#bbb; font-size:1.6em; transition:all 0.3s}
.main-quick-menu-container .quick-menu-control-btn span{display:block; color:#bbb; font-weight:500; font-size:1em; height:2.4em; line-height:2.4em; padding-top:0.66em}
.main-quick-menu-container .quick-menu-control-btn:hover .arrow-icon{border-color:#92d050; color:#92d050}
.main-quick-menu-container .quick-menu-control-btn:hover span{color:#92d050}
.main-quick-menu-inner .main-quick-menu-item .quick-menu-icon .icon svg {width:100%; height:100%; }
.main-quick-menu-inner .main-quick-menu-item .quick-menu-icon.small .icon {top:5px; left:0; bottom:5px; height:auto;}



/* ******************  메인 :: Select Work 프로젝트 ********************** */
#mainProjectContent{font-size:0.93333em; height:100%; box-sizing:border-box;}

/* -------- 메인 프로젝트 :: 타이틀영역 -------- */
.main-project-tit-box{display:table;  width:100%;}
.main-project-tit-box .main-project-tit-box-inner{display:table-cell; vertical-align:middle;}
.main-project-tit-box .area{position:relative;}
.main-project-tit-box .main-project-tit{margin:0.21em 0 0 0; }
.main-project-tit-box .read-more-btn{position:absolute; bottom:13px; right:0px;   }

/* -------- 메인 프로젝트 :: 아코디언영역 -------- */
.main-project-list-container{position:absolute; bottom:0px; left:0px; right:0px; padding-top:41.6666%; }
.accordion-wrapper{overflow:hidden; position:absolute; top:0; left:0; right:0; height:100%;}
/* 아코디언 이미지 레이아웃 */
.accordion-bg-list-container{height:100%;}
.accordion-bg-list{position:relative; height:100%;}
.accordion-bg-list .accordion-bg-item{position:absolute; top:0px; width:25%; height:100%; overflow:hidden; opacity:0; }
.accordion-bg-list .accordion-bg-item:nth-child(1){left:0%;}
.accordion-bg-list .accordion-bg-item:nth-child(2){left:25%;}
.accordion-bg-list .accordion-bg-item:nth-child(3){left:50%;}
.accordion-bg-list .accordion-bg-item:nth-child(4){left:75%;}
.accordion-bg-list .accordion-bg-item .accordion-inner{display:block; position:relative; width:100%; height:100%; margin:0; background-size:cover !important;}
.accordion-bg-list .accordion-bg-item .accordion-outer{position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:1; background-size:cover !important; transition:opacity 0.2s ease, transform 0.2s ease;;}
.accordion-bg-list .accordion-bg-item.active{z-index:1;}
.accordion-bg-list .accordion-bg-item.active .accordion-inner{transform:scale(1.1) rotate(0.002deg); transition:transform 5s ease-in-out}
.accordion-bg-list .accordion-bg-item.active .accordion-outer{opacity:0; transform:scale(1.05) rotate(0.002deg); z-index:0;}
/* 아코디언 오버영역 레이아웃 */
.accordion-over-container{position:absolute; top:0px; left:0px; bottom:0px; right:0px; z-index:2;}
.accordion-over-list{position:absolute; top:0px; left:0px; bottom:0px; right:0px; }
.accordion-over-item{float:left; position:relative; width:25%; height:100%; }
.accordion-over-item .accordion-inner-con{position:relative; display:block; height:100%; }
.accordion-over-item:before{
	position:absolute;	left:0; right:0; top:0; bottom:0;
	content:"";
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
}
.accordion-over-item .accordion-off-tit-box{position:absolute; bottom:3em; left:3.33em; right:3.33em; color:#fff; }
.accordion-over-item .project-category{display:block; font-size:1em; letter-spacing:-0.15px; margin-bottom:1em}
.accordion-over-item .project-tit{display:block; font-size:2.14em; letter-spacing:-0.3px; line-height:1.33; font-weight:700; }
.accordion-over-item .accordion-detail-con{position:absolute; bottom:0px; left:0px; width:100%; height:240px; display:flex; align-items:flex-start; flex-direction:column; flex-wrap:nowrap; align-content:center; justify-content:center; background:#ffe345; opacity:0; padding:0 3.33em; box-sizing:border-box;}
.accordion-over-item .accordion-detail-con .accordion-detail-txt{color:#252525;}
.accordion-over-item .accordion-detail-con .read-more-btn{display:inline-block; margin-top:2.08em}
.accordion-over-item .accordion-detail-con .read-more-btn:before{opacity:0;}
.accordion-over-item .accordion-detail-con .read-more-btn:hover:before{opacity:0.5;}

@media all and (min-width:1281px) {
	.accordion-over-item{background:none !important; }
}

/* ******************  메인 :: 게시판영역 ********************** */
#mainBoardContent{padding:120px 0 72px; }
.main-board-list-con{margin:0 -1em 70px;}
.main-board-list-con .main-board-item{float:left; width:calc(33.33% - 2em); margin:0 1em;}
.main-board-list-con .main-board-item:nth-child(4),
.main-board-list-con .main-board-item:nth-child(5),
.main-board-list-con .main-board-item:nth-child(6){margin:4em 1em;}
.main-board-list-con .main-board-item a{position:relative; display:block; padding-right:3.69em; }
.main-board-list-con .main-board-item a:after{position:absolute; top:0px; bottom:0px; right:2em; background-color:#eee; width:1px; content:"";}
.main-board-list-con .main-board-item:nth-child(3n) a:after{display:none;}
.main-board-list-con .main-board-item .main-board-tit{height:2.8em; font-size:1.6em; color:#252525; line-height:1.4em; letter-spacing:-0.016em; font-weight:500; margin:0.79em 0 0.8em; transition:all 0.3s}
.main-board-list-con .main-board-item .main-board-tit.line-clamp3{height:4.2em; margin-bottom:1.46em;}
.main-board-list-con .main-board-item .main-board-date{display:block; color:#aaa; font-size:1em; letter-spacing:-0.016em; margin-bottom:2.66em}
.main-board-list-con .main-board-item a .read-more-btn:before{opacity:0;}
.main-board-list-con .main-board-item a:hover .main-read-more-btn em{letter-spacing:1px;}
.main-board-list-con .main-board-item a:hover .main-board-tit{color:#92d050;}
.main-board-list-con .main-board-item a:hover .read-more-btn:before{opacity:1;}
.main-board-list-con .main-board-item a:hover .read-more-btn:before{left:100%;}
.main-board-list-con .main-board-item a:hover .read-more-btn i{transform:translateX(12px); letter-spacing:-0.15px;}
.main-board-list-con .main-board-item a:hover .read-more-btn em{letter-spacing:1px;}

/* ******************  메인 :: Social Hub 영역 ********************** */
#mainPortfolioContent{position:relative; z-index:1; margin-bottom:130px}
.portfolio-list-con{margin:0 -10px 70px}
.portfolio-list-con .portfolio-item{float:left; width:calc(25% - 20px); margin:0 10px;}
.portfolio-list-con .portfolio-thumb-con{overflow:hidden; display:block; position:relative; padding-top:100%; height:0; }
.portfolio-list-con .portfolio-thumb-con .portfolio-thumb{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.portfolio-list-con .portfolio-thumb-con .portfolio-thumb img{object-fit:cover;}
.portfolio-list-con .portfolio-thumb-con .portfolio-sns-icon{display:flex; align-items:flex-end; justify-content:center; position:absolute; top:0px; left:20px; width:40px; height:70px; text-align:center;  background:#000; border-radius:0 0 30px 30px}
.portfolio-list-con .portfolio-thumb-con .portfolio-sns-icon.insta{
	background: rgb(89,94,212);
	background: -moz-linear-gradient(top,  rgba(89,94,212,1) 0%, rgba(187,46,159,1) 50%, rgba(248,158,92,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(89,94,212,1) 0%,rgba(187,46,159,1) 50%,rgba(248,158,92,1) 100%);
	background: linear-gradient(to bottom,  rgba(89,94,212,1) 0%,rgba(187,46,159,1) 50%,rgba(248,158,92,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#595ed4', endColorstr='#f89e5c',GradientType=0 );
}
.portfolio-list-con .portfolio-thumb-con .portfolio-sns-icon.pinterest{background-color:#cd1f28;}
.portfolio-list-con .portfolio-thumb-con .portfolio-sns-icon.youtube{background-color:#ff0000;}
.portfolio-list-con .portfolio-thumb-con .portfolio-sns-icon i{font-size:24px; letter-spacing:-0.5px; color:#fff; line-height:46px;}
.portfolio-list-con .portfolio-info-box{display:flex; flex-direction:column; justify-content:center; background:#fff; padding:20px 24px; box-sizing:border-box; box-shadow:4px 3px 20px 0px rgba(0, 0, 0, 0.1);}
.portfolio-list-con .portfolio-info-box dt{display:none; overflow:hidden; color:#252525; font-size:1.6em; font-weight:500; line-height:1.1; letter-spacing:-0.5px; white-space:nowrap; text-overflow:ellipsis; transition:all 0.3s}
.portfolio-list-con .portfolio-info-box dd{overflow:hidden; font-size:1.333em; white-space:nowrap; text-overflow:ellipsis; color:#888; line-height:1.6; font-weight:300; /* margin-top:0.55em */}
.portfolio-list-con .portfolio-item a:hover .portfolio-info-box dt{color:#92d050}
.main-portfolio-more-box{text-align:center;}
.main-portfolio-more-box .read-more-btn{color:#ff8500;}
.main-portfolio-more-box .read-more-btn:before{background-color:#fff2e5;}


/* ******************  메인 One Stop ********************** */
#mainOneStopContent{position:relative; padding:230px 0 120px; background-color:#f7f7f7; margin-top:-140px;}
.main-one-stop-wrapper{display:flex; align-items:flex-end}
/* One Stop :: circle배경 */
.one-stop-circle-bg{position:absolute; right:47px; top:-87px; width:388px; height:388px;}
.one-stop-circle-bg:before{display:block; width:100%; height:100%; background:url(/images/main/circle_txt_big2.png) no-repeat; content:"";}
.one-stop-circle-bg:after{position:absolute; top:0px; left:0px; width:100%; height:100%; background:url(/images/main/circle_txt_small2.png) no-repeat; content:"";}
/* One Stop :: 타이틀박스 */
.main-onestop-tit-box{float:left; width:480px; margin-right:120px;}
.main-onestop-tit-box .main-onestop-tit{margin:0.4375em 0 1.531em;}
.main-onestop-tit-box .main-onestop-txt{color:#aaa; }
/* One Stop :: 서비스리스트 */
.main-onestop-service-list{float:left; width:600px; }
.main-onestop-service-list ul{display:flex; justify-content:space-between;}
.main-onestop-service-list ul:first-child{margin-bottom:72px;}
.main-onestop-service-list li{text-align:center; min-width:105px;}
.main-onestop-service-list li .icon{display:block;}
.main-onestop-service-list li .tit{display:block; padding-top:37px; color:#252525; font-size:18px; letter-spacing:-0.35px; font-weight:600;}

/* ******************  메인 Search영역 ********************** */
#mainSearchContent{background:#252525; padding:110px 0; }
.main-search-tit-box .main-search-tit{color:#fff; margin-bottom:0.16em}
.main-search-tit-box .main-search-tit b{color:#ff8400}
.main-search-tit-box .main-search-sub-txt{color:#666;}
/* Search영역 :: 검색박스 */
.total-search-control-box{position:relative; z-index:11; margin:2.22em 0 3.33em; font-size:1.2em;}
.total-search-control-box > form{display:flex; align-items:center; }
.total-search-control-box .search-select-con,
.total-search-control-box .search-word-con,
.total-search-control-box .search-btn-con{width:240px; height:60px; font-size:18px; border-bottom:5px solid #fff;}
.total-search-control-box .search-select-con{border-bottom-color:#ff8400;}
.total-search-control-box .search-select-con .custom-select-trigger{border:0; color:#ff8400; font-size:1em; line-height:60px; padding:0; letter-spacing:-0.25px;}
.total-search-control-box .search-select-con .custom-select-trigger:after{font-size:1.33em; right:-5px;}
.total-search-control-box .search-select-con .custom-option-drop-list{background-color:#ff8400; border:0;}
.total-search-control-box .search-select-con .custom-option-item{color:#fff;}
.total-search-control-box .search-select-con .custom-option-item:hover{background:rgba(255,255,255,0.1)}
.total-search-control-box .search-word-con{width:calc(100% - 480px);}
.total-search-control-box .search-word-con input{width:100%; height:60px; border:0; background:transparent; padding:0 20px; box-sizing:border-box; color:#fff; font-size:1em;}
.total-search-control-box .search-word-con input::placeholder{color:#fff;}
.total-search-control-box .search-btn-con .search-btn{position:relative; width:100%; height:100%; padding-left:36px; font-size:1em; color:#fff; font-weight:600; text-align:left;;}
.total-search-control-box .search-btn-con .search-btn:before{position:absolute; top:14px; left:0px; bottom:14px; width:1px; background-color:#444; content:"";}
.total-search-control-box .search-btn-con .search-btn .xi-search{position:absolute; top:50%; right:0px; font-size:2em; color:#f5f5f5; letter-spacing:-0.15px; transform:translateY(-50%)}
/* Search영역 :: 해쉬태그 */
.main-search-hash-tag-list{margin:0 -10px}
.main-search-hash-tag-list .hash-tag-item{float:left; margin:10px; color:#666; font-size:1.333em; font-weight:300; transition:all 0.3s ease-out}
.main-search-hash-tag-list .hash-tag-item:hover{color:#fff;}




/* ******************  메인 :: Social Hub 영역 :: 동영상 타이틀 삭제 2023-05-15 MJ ********************** */
.portfolio-list-con .portfolio-item{box-shadow: 4px 3px 20px 0px rgba(0, 0, 0, 0.1);}
.portfolio-list-con .portfolio-info-box{display: none;}