@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}


/* ****************** 서브 공통 ********************** */
.sub-bg-video{position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.sub-bg-video:before{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ''; background-color: rgba(0,0,0,0.2); z-index: 1;}
.sub-bg-video video {
	position:absolute; 
	top:50%; 
	left:50%; 
	min-width:100%; 
	min-height:100%; 
	-ms-transform:translate(-50%,-50%); 
	-webkit-transform:translate(-50%,-50%); 
	transform:translate(-50%,-50%);
	pointer-events: none;
}


/* ****************** 01 ABOUT TARS ********************** */
.intro-page{text-align: center; position: relative; z-index: 1;}
.intro-page p{font-size: 1.8rem; font-size: 2.1rem; line-height: 1.66; letter-spacing: -0.01em; color: #fff; font-weight: 500;}
.intro-page p + p{margin-top: 3.5rem;}
.intro-con01{}
.intro-con02{margin-top: 8rem;}


/* ****************** 02 DIRECTORS :: 리스트 ********************** */
.project-page{padding-top: 24rem;}
.project-page .area-box{max-width: none; padding: 0 20px;}
/* 사이드바 */
.sticky-aside{position: fixed; top: 24rem; bottom: 0; left: 0; width: 100%;}
/* sticky */
.sticky-box{padding-left: 22rem; width: calc(100% - 22rem); display: flex; justify-content: space-between;}
/* sticky 왼쪽 */
.sticky-left{width: calc(20.66% - 1rem); position: relative;}
.sticky-row-list{display: flex; flex-direction: column; position: relative;}
.sticky-row-item{width: 100%;}
.sticky-row-item + .sticky-row-item{margin-top: 2rem;}
.sticky-row-item a{display: block; width: 100%;}
.sticky-row-item .project-img-tit-box{position: relative; width: 100%; height: 0; padding-top: 126.66%; display: block; overflow: hidden;}
/* sticky 오른쪽 */
.sticky-right{width: 78.66%; position: relative;}
.sticky-col-list{display: flex; flex-wrap:wrap; justify-content: space-between; position: relative;}
.sticky-col-item{width: calc(50% - 1rem); margin-right: 1rem; margin-bottom: 2rem;}
.sticky-col-item:nth-child(even){margin-left: 1rem; margin-right: 0;}
.sticky-col-item a{display: block; width: 100%;}
.sticky-col-item .project-img-tit-box{width: 100%; position: relative; height: 0; padding-top: 55.17%; overflow: hidden;}
/* sticky full */
.sticky-full{width: 100%; position: relative;}
.sticky-full .sticky-row-list{display: flex; flex-wrap:wrap; flex-direction: initial; position: relative;}
.sticky-full .sticky-row-item{width: calc(20% - 1.25rem); margin-right: 1.25rem; margin-bottom: 1.25rem;}
.sticky-full .sticky-row-item + .sticky-row-item{margin-top: 0;}
.project-img-tit-box img{width: 100%; height: auto;}
/* 공통 이미지&영상 */
.project-img-tit-box .project-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.project-img-tit-box .project-video {position:absolute; top: 0; left: 0; width: 100%; height: 100%;/* top:50%; left:50%; min-width:100%; min-height:100%; -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); */}
.is-mobile .project-img-tit-box .project-video{display: none;}
.sticky-row-item .project-title,
.sticky-col-item .project-title{margin-top: 2rem; font-size: 2rem; line-height: 1.3; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* 공통 타이틀 */
.project-img-tit-box .project-title{position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: var(--font-family3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-color: rgba(0,0,0,0.8); opacity: 0; visibility: hidden; transition: var(--transition-custom);}
.project-img-tit-box .project-title h5{font-size: 3rem; line-height: 1.2; font-weight: 700; color: #fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.project-img-tit-box .project-title p{margin-top: 1.5rem; font-size: 1.5rem; line-height: 1.3; font-weight: 400; color: #aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media all and (min-width: 801px){
	.project-img-tit-box:hover .project-title{opacity: 1; visibility: visible;}
	.project-img-tit-box .project-img{transition:var(--transition-custom); transition-property:transform;}
	.sticky-row-item a:hover .project-img-tit-box .project-img,
	.sticky-col-item a:hover .project-img-tit-box .project-img{transform: scale(1.1) rotate(0.002deg);}
}


/* ****************** 02 DIRECTORS :: 뷰 ********************** */
.popup-video-top{position: relative; padding-right: 10rem; margin-bottom: 3.5rem; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between;}
.popup-video-top .tit{font-size: 3rem; font-weight: 900; color: #fff; font-family: var(--font-family3);}
.popup-video-top .control-btn{display: flex; position: relative;}
.popup-video-top .control-btn:before{position: absolute; top: 50%; margin-top: -1rem; left: 50%; margin-left: -0.05rem; content: ''; width: 0.1rem; height: 2rem; background-color: #333;}
.popup-video-top .control-btn button{font-size: 1rem; letter-spacing: 0.15em; color: #fff; font-weight: 900; font-family: var(--font-family3); display: flex; align-items: center;}
.popup-video-top .control-btn button + button{margin-left: 6rem;}
.popup-video-top .control-btn button i{margin-left: 1rem; font-size: 2.4rem; color: #fff;}
.popup-video-top .control-btn button + button i{margin-left: 0; margin-right: 1rem;}
.popup-video-top .modal-close-btn{top: 50%; margin-top: -1.2rem; right: 0; color: #fff;}
.popup-video-top .modal-close-btn i{font-size: 2.4rem; color: #fff;}
.popup-video-bottom{position: relative; width: 100%; height: 0; padding-top: 56.06%;}
.popup-video-bottom video,
.popup-video-bottom iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/* ****************** 03 CONTACT ********************** */
.contact-page{position: relative; z-index: 1;}
.contact-con01 .contact-tit{font-size: 5rem; font-weight: 700; letter-spacing: -0.05em; color: #fff; text-align: center;}
.main-inquiry-box{margin: 14rem auto 0; max-width: 760px; width: 100%;}
.main-inquiry-wrapper{}
.main-inquiry-list{margin: -2rem -1.8%; display: flex; flex-wrap:wrap;}
.main-inquiry-item{width: 46.4%; margin: 2rem 1.8%;}
.main-inquiry-item.full{width: 96.4%;}

/* 공통 textarea */
.main-inquiry-tit{font-size: 1.8rem; color: #fff;}
.cm-textarea-con{margin-top: 1.5rem;}
.cm-textarea-con textarea{padding: 1.5rem; color:#fff; font-size:1.8rem; width: 100%; height: 20rem; background-color: transparent; resize: none; -webkit-appearance: none; border: 0; box-sizing: border-box; border: 1px solid #fff;}
.cm-textarea-con textarea:focus{outline: none;}
.cm-textarea-con.open textarea,
.cm-textarea-con.selected textarea{border-color:var(--main-color);}

/* 공통 인풋 */
.cm-date-input-box,
.cm-file-custom-box,
.cm-search-input-box{}
.cm-date-input-inner,
.cm-file-custom-inner,
.cm-search-input-inner{display:block; position:relative;}
.cm-date-input-inner .cm-date-input-con,
.cm-file-custom-inner .cm-file-custom-con,
.cm-search-input-inner .cm-input-con{position: relative; width:100%; height:4rem; border-bottom:1px solid #fff; transition: border-bottom-color 0.3s;}
.cm-date-input-inner .cm-input-trigger,
.cm-file-custom-inner .cm-input-trigger,
.cm-search-input-inner .cm-input-trigger{display:block; position: absolute; top: 0; left: 0; width: 100%; height: 4rem; color:#fff; font-size:1.8rem; text-align:left; transition: top 0.3s; cursor: auto;}
.cm-date-input-inner .cm-input-trigger em,
.cm-file-custom-inner .cm-input-trigger em,
.cm-search-input-inner .cm-input-trigger em{display:block;}
.cm-date-input-inner .cm-input-trigger em span,
.cm-file-custom-inner .cm-input-trigger em span,
.cm-search-input-inner .cm-input-trigger em span{color: var(--main-color2);}
.cm-search-input-inner .cm-input{position:absolute; top:0; left: 0; width: 100%; height: 100%; z-index: 100; display: none;}
.cm-search-input-inner .cm-input input{font-size: 1.8rem; color: var(--main-color); width: 100%; height: 100%; background-color: transparent; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-border-radius: 0;}
.cm-search-input-inner .cm-input input::-ms-clear { display: none; }
.cm-search-input-inner .cm-input input:focus{outline: none;}
.cm-search-input-inner .cm-input input::placeholder{color: var(--main-color);}
/* atvie */
.cm-date-input-inner .cm-date-input-con.open,
.cm-date-input-inner .cm-date-input-con.selected,
.cm-file-custom-inner .cm-file-custom-con.open,
.cm-file-custom-inner .cm-file-custom-con.selected,
.cm-search-input-inner .cm-input-con.open,
.cm-search-input-inner .cm-input-con.selected{border-bottom-color: var(--main-color);}
.cm-date-input-inner .cm-date-input-con.open .cm-input-trigger,
.cm-date-input-inner .cm-date-input-con.selected .cm-input-trigger,
.cm-file-custom-inner .cm-file-custom-con.open .cm-input-trigger,
.cm-file-custom-inner .cm-file-custom-con.selected .cm-input-trigger,
.cm-search-input-inner .cm-input-con.open .cm-input-trigger,
.cm-search-input-inner .cm-input-con.selected .cm-input-trigger{font-size: 1.5rem; height: auto; top: -2rem; transition: top 0.3s; cursor: auto;}
.cm-search-input-inner .cm-input-con.selected .cm-input{display: block !important;}

/* tel input */
.cm-search-input-inner .cm-input.tel-input-box{}
.cm-search-input-inner .cm-input.tel-input-box .slash{float: left; width: 2rem; font-size: 1.8rem; line-height: 4rem; color: #fff; text-align: center; display: block;}
.cm-search-input-inner .cm-input.tel-input-box input{float: left; width: calc(33.33% - 1.34rem); text-align: center;}

/* select input */
.cm-search-input-inner .input-select-group{position: relative; display: flex; padding-right: 60px; box-sizing: border-box;}
.cm-search-input-inner .input-select-group .cm-input{width: calc(100% - 60px);}
.cm-search-input-inner .input-select-group .select-box{position: absolute; top: 0; right: 0; width: 60px;}
.cm-search-input-inner .input-select-group .custom-select-trigger {padding:0; color: #fff; line-height: 4rem; font-size:1.3rem; border:none;}
.cm-search-input-inner .input-select-group .custom-select-trigger:after{right:0; font-size:2.4rem;}
.cm-search-input-inner .input-select-group .custom-option-drop-list::-webkit-scrollbar{width: 2px;}
.cm-search-input-inner .input-select-group .custom-option-item {padding: 1rem; font-size:1.3rem;}

/* 공통 파일선택 */
.cm-file-custom{position: relative; display: flex; align-items: flex-start;}
.cm-file-custom input[type="file"] { 
	position: absolute; 
	width: 1px; 
	height: 1px; 
	padding: 0; 
	margin: -1px; 
	overflow: hidden; 
	clip:rect(0,0,0,0); 
	border: 0; 
} 
.cm-file-custom label { 
	display: block;
	width:8rem;
	height:3rem;
	font-size: 1.3rem; color: var(--main-color);
	line-height: 3rem; 
	text-align:center;
	cursor: pointer; 
	border: 1px solid #fff; 
	background-color:transparent;
	border-radius: 0.5rem;
} 
/* named upload */ 
.cm-file-custom .upload-name { 
	display: block;
	width: calc(100% - 8rem);
	height:4rem;
	font-size: 1.8rem; color: var(--main-color);
	background-color: transparent; 
	border: 0; 
	appearance: none; 
	box-sizing: border-box;
}

/* 공통 Datepicker */
.cm-date-input-box{}
.cm-date-input-inner .date-input{position: relative; display: flex; align-items: center;}
.cm-date-input-inner .date-input input{position: absolute; top: 0; left: 0; width: 100%; padding-right: 12rem; height: 4rem; font-size: 1.8rem; color: var(--main-color); border: 0; background-color: transparent; appearance: none; box-sizing: border-box; cursor: pointer; z-index: 1;}
.cm-date-input-inner .date-input input:focus{outline:none;}
.cm-date-input-inner .date-input button{position: absolute; top: 0; right: 0; width: 12rem; font-size: 1.3rem; line-height: 4rem; color: #555; display: flex; align-items: center; justify-content: space-between;}
.cm-date-input-inner .date-input button span{font-weight: 600;}
.cm-date-input-inner .date-input button i{font-size: 2.4rem; color: #fff;}

/* 동의하기 */
.main-inquiry-agree{margin-top: 4rem; color: #fff; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
.main-inquiry-agree .agree-txt input{display:none;}
.main-inquiry-agree .agree-txt label{position:relative; padding-left:4rem; font-size: 1.5rem;}
.main-inquiry-agree .agree-txt label:before{position:absolute; top:-0.3rem; left:0; font-size: 2.4rem; color:#fff; content: "\e92c"; font-family:xeicon !important;}
.main-inquiry-agree .agree-txt input:checked + label:before{content: "\e92b";}
.main-inquiry-agree .agree-txt label a{color: #fff; border-bottom: 1px solid #fff;}
/* 버튼 */
.main-inquiry-summit-btn{position: relative; display: inline-block; width: 24rem; height: 6rem; font-size: 1.8rem; line-height: 6rem; font-weight: 700; color: #fff; text-align: center; border: 0.2rem solid var(--main-color); z-index: 0; overflow: hidden;}
.main-inquiry-summit-btn::before{content: ""; position: relative; z-index: -1; background-color: #fff; width: 0; height: 0; padding: 50%; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0) scale(0); transition: transform .15s ease-out;}
.main-inquiry-summit-btn span{position: relative; top: -0.2rem;}

.cm-file-custom label,
.cm-file-custom .upload-name,
.cm-date-input-inner .date-input input,
.cm-date-input-inner .date-input button,
.cm-textarea-con textarea,
.cm-search-input-inner .cm-input input,
.main-inquiry-tit,
.cm-search-input-inner .cm-input-trigger em, 
.main-inquiry-summit-btn{font-family: var(--font-family3);}
.main-inquiry-tit span {color: var(--main-color2);}

@media all and (min-width:801px){
	.main-inquiry-summit-btn:hover{color: #000;}
	.main-inquiry-summit-btn:hover::before{transition-duration: .3s; transform: translate3d(-50%, -50%, 0) scale(1.5);}
}

/* 달력 ::  DATEPICKER CUSTOM */
/* datepicker box  */
#ui-datepicker-div{width:300px}
.ui-datepicker{background-color:#fff}
/* datepicker header  */
.ui-datepicker-header{position:relative; height:auto; line-height:1.3; color:#fff; background-color:#434343; text-align:center;}
.ui-datepicker-prev,.ui-datepicker-next{position:absolute; top: 9px !important; cursor:pointer; color:#fff !important;}
.ui-datepicker-prev{left:3%;}
.ui-datepicker-next{right:3%;}
.ui-datepicker-title{color:#333; font-size:20px; font-weight:600; letter-spacing:-0.3px;}
/* datepicker calendar */
.ui-datepicker-calendar{border:1px solid #ddd; width:100%; box-sizing:border-box; }
/* datepicker calnedar :: 요일 */
.ui-datepicker-calendar thead th{width:14.25%; height:20px; border-bottom:1px solid #ddd; border-left:1px solid #ddd; font-size:14px; font-weight:600;}
.ui-datepicker-calendar thead th:first-child{width:14.5%}
.ui-datepicker-calendar thead .ui-datepicker-week-end{color:#0000ff}
.ui-datepicker-calendar thead .ui-datepicker-week-end:first-child{color:#ff0000}
/* datepicker calnedar :: 날짜 */
.ui-datepicker-calendar td{height:36px;  border-bottom:1px solid #ddd; border-left:1px solid #ddd; text-align:right; vertical-align:top; font-size:14px;}
.ui-datepicker-calendar tr td:first-child{border-left:0;}
.ui-datepicker-calendar td.ui-datepicker-unselectable{color:#ccc}   /* 비활성화 */
.ui-datepicker-calendar td .ui-state-default{display:block; width:100%; height:100%; padding:10px; box-sizing:border-box; color:inherit;}
.ui-datepicker-calendar td.ui-datepicker-today, .ui-datepicker-calendar td .ui-state-hover{background:#eee;}        /* 마우스오버 */
.ui-datepicker-calendar td .ui-state-active{background-color:#3666aa; color:#fff;}  /*active */

/********** 250611 프로젝트 수정 **********/
.project-page {padding-top: 15.25rem;}
.project-tit {font-size: 12.5rem; font-weight: 500; /* letter-spacing: -0.05em; */ color: #fff; text-align: center;}
.project-list-con {padding-top: 8.75rem;}

.project-list-box {position: relative; display: grid; grid-gap: 0; margin-bottom: 0;}
.project-list-box.one-ver {grid-template-columns: repeat(1, 1fr); grid-gap: 0;}
.project-list-box.two-ver {grid-template-columns: repeat(2, 1fr);}
.project-list-box.three-ver {grid-template-columns: repeat(3, 1fr);}

.project-list-box li {position: relative; height: 0; padding-top: 56.25%; overflow: hidden;}
.project-list-box.one-ver li {padding-top: 56.25%;}
.project-list-box.two-ver li {padding-top: 56.25%;}
.project-list-box.three-ver li {padding-top: 125%;}

.project-list-box li .thumb-box {position: absolute; display: flex; align-items: center; justify-content: center; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%; z-index: 1; transition: all 0.3s; overflow: hidden;}
.project-list-box li .thumb-box .img {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.project-list-box li .thumb-box p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; font-size: 3.2rem; font-weight: 400; letter-spacing: 0.025em; color: #fff; text-align: center;}
.project-list-box li .thumb-box.hide {opacity: 0; visibility: hidden;}
.project-list-box li img {width: 100%; height: 100%; transition: all 0.3s; object-fit: cover;}
.project-list-box li video {position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); z-index: 0;}
.project-list-box li .img-box:hover img {transform: scale(1.1);}

@media all and (min-width: 801px) {
	.project-modal-content {width: 92%;}
}

.project-modal-content .control-btn{display: flex; justify-content: space-between; position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%);}
.project-modal-content .control-btn:before{display: none;}
.project-modal-content .control-btn button{position: relative; left: -4rem; font-size: 1rem; letter-spacing: 0.15em; color: #fff; font-weight: 900; font-family: var(--font-family3); display: flex; align-items: center;}
.project-modal-content .control-btn button + button {left: auto; right: -4rem;}
.project-modal-content .control-btn button i{font-size: 2.4rem; color: #fff;}

.popup-video-top {justify-content: flex-end;}

@media all and (max-width: 800px) {
	.project-page {padding-top: calc(6rem + 60px) !important;}
	.project-list-con {padding-top: 4rem;}
	.project-tit {font-size: 6rem;}
	.project-list-box li .thumb-box p {font-size: 2.6rem;}

	.project-modal-content .control-btn {display: none;}
}

@media all and (max-width: 480px) {
	.project-tit {font-size: 4rem;}
	.project-list-box {grid-template-columns: repeat(1, 1fr) !important;}
	.project-list-box li video {display: none;}
}