@charset "utf-8"; 
/* deepest.lee@gmail.com */

/* base.css */
@import url("base.css"); 

/* layout */
html, body {width:100%; word-break:keep-all;}
html {scroll-behavior:smooth;}
body {position:relative; background:#141414; overflow-x:hidden;}

/* responsive */
.pc_view {display:block;}
.m_view {display:none;}
.over_h {display:none; width:100%; height:100%; background:rgba(0,0,0,0.6); position:absolute; top:0; left:0; z-index:19; position:fixed;}

/* base layout */
/* header */
#wrapper {width:100%; height:100%; position: relative; background:#000;}
header {width:100%;}
header.main_header {background:#0005; position: absolute; top:0; left:0; z-index:100;}
header .header_box {width:1400px; margin:auto;}
header .header_box:after {content:""; display:block; clear:both;}
header .header_box h1 {float:left; padding:25px 0;}
header .header_box .m_nav_open {display:none;}
header .header_box .m_nav_close {display:none;}
header .header_box nav {float:right; padding-top:35px;}
header .header_box nav ul > li {float:left; padding-right:5px; text-align:center; min-width:100px;}
header .header_box nav ul > li > a {font-size:20px; font-size:18px; padding:15px;}
header .header_box nav ul > li.on > a {font-weight:bold;}
header .header_box nav ul > li > ul {margin-top:-6px; padding-left:15px;}
header .header_box nav ul > li > ul > li {padding-right:0;  min-width:auto;}
header .header_box nav ul > li > ul > li > a {padding:5px;}
.m_nav_open {display:none;}

.mvisual_wrap {width:100%; position: relative; background:#000;}
.mvisual_wrap .txt {position: absolute; top:470px; z-index:90; font-size:36px;}
.mvisual_wrap .txt div {text-align: left; font-size:20px; padding-top:20px;}
.mvisual_wrap .txt span {z-index:9999;}
.mvisual_wrap .txt strong br {display:none;}
.mvisual_wrap .slickPrev, .mvisual_wrap .slickNext {cursor: pointer;}
.mvisual_wrap .mvisual img {width:100%;}
.mvisual_wrap .mvisual_box {width:1400px; margin:auto; text-align:left;}
.mvisual_wrap .mv {text-align:center;}
.mvisual_wrap video {width:100%; margin:auto;}

/*recent_work*/
.recent_work {width:100%; background:#000; min-height:480px;}
.recent_work .recent_work_box {width:1400px; margin:auto; padding-top: 80px;}
.recent_work_box .title {width:195px; position: absolute;}
.recent_work_box .title h2 {font-size:32px; font-weight:500;}
.recent_work_box .title a {font-size:16px; margin-top:20px; display:inline-block;}
.recent_work_box .recent {width:1480px; margin-left:195px;}
.recent_work_box .recent .img {width:480px; height:280px; background-size:cover; background-repeat:no-repeat; background-position:center;}
.recent_work_box .recent p {padding-top:10px;} 
.recent_work_box .recent .box {width:500px; font-size:26px; font-weight:500;}
.recent_work_box .recent .box img {display: none;}
.recent_work_box:after {content:""; clear:both; display:block;}
.recent_slick_ct {padding-top:100px;}
.recent_slick_ct span {font-size:30px; padding:4px 10px 8px; border:2px solid #fff; float:left; line-height:30px; cursor: pointer;}
.recent_slick_ct span:nth-child(1) {border-radius: 10px 0 0 10px; border-right:none;}
.recent_slick_ct span:nth-child(2) {border-radius: 0 10px 10px 0;}

/* footer */
footer {clear:both; height:150px; background:#141414;}
footer .footer_box {width:1400px; margin:auto; font-size:14px;}
footer .footer_box br {display:none;}
footer .site_info {padding-top:20px;}
footer .site_info .copy {padding-top:10px;}


.contents {width:1400px; margin:auto; font-size:20px; font-weight:400; padding-bottom:300px; background:url("../images/bg_sub_01.png") no-repeat right bottom 50px;}
.contents h2 {font-size:36px; font-weight:500;}
.contents h3 {font-size:32px; font-weight:400; padding-bottom:20px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/* 고정 헤더(.hdr) 아래로 밀어냄 — 아래 title_st_01 padding-top 규칙과 함께 본다 */
.title_st_01 {padding-top:90px; padding-bottom:35px;}
.list_st_01 ul li:after {content:""; clear:both; display:block;}
.list_st_01 .txt {float:left; font-size:14px; width:340px; padding-right:10px;}
.list_st_01 .txt p {text-overflow:ellipsis; overflow:hidden; word-break:break-word; display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient: vertical}
.list_st_01 .imgbox {float:left;}
.list_st_01 .imgbox li {float:left; padding:10px;}
.list_st_01 .imgbox .img {width:330px; height:330px; background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:16px; position:relative; overflow:hidden;}
/* hover 시 박스는 고정, 내부 이미지 층(::before, background:inherit 복제)만 확대 — 둥근 모서리 유지 */
.list_st_01 .imgbox .img::before {content:""; position:absolute; top:0; right:0; bottom:0; left:0; background:inherit; transition:transform .5s ease, filter .5s ease;}
.list_st_01 .imgbox .img:hover::before {transform:scale(1.07); filter:brightness(1.12);}
.list_st_01 .imgbox img {display:none;}
.list_st_01 > ul > li {padding:20px 0; border-bottom:1px dashed #808080; position: relative;}
/* .list_st_01 > ul > li:nth-of-type(n+11) {display:none;} */
.list_st_01 .txt ul li {float:left; padding-right:10px;}
.list_st_01 .txt ul {position:absolute; left:0; bottom:40px}
.list_st_01 .txt div {padding-bottom:75px;}
.list_st_02 > ul {width:1400px; margin:auto; padding-bottom:30px;}
.list_st_02 > ul:after {content:""; display:block; clear:both;}
.list_st_02 > ul > li {width:340px; display:inline-block; margin-left:6px; font-size:18px; padding-bottom:20px; cursor:pointer; vertical-align:top;} 
/* .list_st_02 > ul > li:nth-of-type(n+11) {display:none;} */
.list_st_02 > ul > li:nth-child(1), .notice_content ul li:nth-child(4n+1) {margin-left:0;} 
.list_st_02 > ul > li .title {font-size:24px; padding:0 0 15px 30px; color:#8652e9; font-weight:400; background:url("../images/icon_project.png") no-repeat 0 6px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.list_st_02 > ul > li .img {width:327px;height:327px;margin-bottom: 8px; border:3px solid #51318f; overflow: hidden;}
.list_st_02 > ul > li .img > div {width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: center;}
.list_st_02 > ul > li .txt {font-size:16px; color:#666; padding-bottom:5px; padding-right:10px;}
.list_st_02 > ul > li .info {font-size:14px; padding-top:10px;}
.list_st_02 > ul > li .info li {padding-left:20px; background:url("../images/dot_project.png") no-repeat top 6px left 4px; text-overflow:ellipsis; overflow:hidden; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical}

.slider {width:1050px; clear:both;}


.table_st_01 thead {border-top:2px solid #fff; border-bottom:2px solid #fff;}
.table_st_01 thead th {padding:20px; font-size:16px;}
.table_st_01 tbody tr {border-bottom:1px solid #808080; cursor: pointer;}
.table_st_01 tbody tr:hover td {font-weight:bold;}
.table_st_01 td {padding:20px 24px; font-size:14px; text-align: center;}
.table_st_01 td:nth-child(1) {text-align: left;}
.table_st_01 ul {display:none;}

.contact_form {font-size:14px; padding-top: 55px;}
.contact_form li {padding: 15px 0px;}
.contact_box_01 li {display:inline-block;}
.contact_box_01 li(even) {padding-left:20px;}
.contact_box_01 label {padding-left:15px; background:url("../images/dot_project.png") no-repeat top 6px left 0; width:130px; float:left;}
.contact_box_01 label.even {margin-left: 65px;}
.contact_box_01 input[type=text] { width: 506px; padding:0 5px 8px; color:#747474; border-bottom:2px solid #fff; box-sizing: border-box; max-width: 100%;}
.contact_box_01 textarea {width:1235px; padding: 10px 5px 0; height:140px; border: none;background: none;border-bottom:2px solid #fff; color:#747474; box-sizing: border-box; max-width: 100%;}
.contact_box_01 select {padding: 0px 2px 5px;background: none;border: none;border-bottom: 2px solid #fff;color: #747474;width: 517px; box-sizing: border-box; max-width: 100%;}
.contact_box_01 select option[value=""][disabled] {display: none;}
.contact_box_01 input[type=text]:focus,
.contact_box_01 textarea:focus,
.contact_box_01 select:focus { outline: none; border-bottom-color: #8b5cf6; }
.contact_box_02 span {padding-left:15px; background:url("../images/dot_project.png") no-repeat top 6px left 0; width:130px; float:left;}
.contact_box_02 li:nth-child(1) span {margin-top:10px;}
.contact_box_02 .file_btn {display: inline-block;width:154px;padding:10px;text-align:center;border: 2px solid #fff; cursor: pointer;}
.contact_box_02 input[type=file] {display:none;}
.contact_box_02 .file_name {width: 1015px; margin-left:40px; padding:0 5px 8px; color:#747474; border-bottom:2px solid #fff; vertical-align: bottom; display: inline-block;}
.contact_box_02 input::file-selector-button {display: none;}
.contact_box input[type="file"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0;}
.contact_box_02 .contact_checkbox {float:left; color:#747474; }
.contact_box_02 .contact_checkbox dl { border-bottom: 2px solid #fff;width: 1245px; margin-bottom:16px;}
.contact_box_02 .contact_checkbox dl dd {padding-bottom:35px;}
.contact_box_02 .contact_checkbox .checkline {color:#fff;}
.contact_box_02 .contact_checkbox input[type="checkbox"]{display: none;}
.contact_box_02 .contact_checkbox input[type="checkbox"] + label{display:inline-block; width:18px; height:18px; border:2px solid #fff; position: relative;vertical-align: -5px;margin-right: 5px;cursor: pointer;}
.contact_box_02 .contact_checkbox input[type="checkbox"]:checked + label::after{content:'';width: 14px;height: 14px;background:#8652e9;position: absolute;left: 2px;top:2px;}
.submit {clear:both; text-align:center; padding:65px 0 0;}
.submit button {width:195px; padding:13px 0; font-size:16px; color:#fff; background:#51318f; border-radius: 25px; cursor: pointer; border:none;}


@media screen and (max-width:1400px){
	/* responsive */
	.pc_view {display:none;}
	.m_view {display:block;}
	
	/* header */
	header {width:100%; height:65px; margin:auto; font-size:20px; z-index:1000;}
	header.main_header {position: static;}
	header .header_box {width:100%;}
	header .header_box h1 {padding:16px 12px;}
	header .header_box h1 img {width:110px;}
	header .header_box .m_nav_open {display:block; position:absolute; padding:15px 15px; right:10px; cursor:pointer;}
	header .header_box .m_nav_open img {width:22px;}

	header .header_box .m_nav_close {display:block; font-weight:bold; font-size:30px; color:#fefefe; padding-top:10px;}
	header .header_box .m_nav_close span {padding:0px 15px; float:right; cursor:pointer;}
	header .header_box nav {position:fixed; display:none; width:40%; min-width:300px; background:#333; right:0; top:0; height:100%; padding-top:0; z-index:9999}
	header .header_box nav ul {clear:both; padding-top:20px;}
	header .header_box nav ul > li {float:unset; text-align:left; padding:10px 10px;}
	header .header_box nav ul > li > a {font-size:25px; color:#fefefe;}
	
	.main_wrap {clear:both;}
	.mvisual_wrap .mvisual_box {width:100%;}
	.mvisual_wrap .txt {top:40%; font-size:24px; left:15px;}
	.mvisual_wrap .txt img {width:125px;}
	.mvisual_wrap .txt div {font-size:13px;}
	.mvisual_wrap .txt span {font-size:13px;}

	.recent_work .recent_work_box {width:auto; padding:25px 12px;}
	.recent_work .recent_work_box .title {width:auto; position:static; padding:0 10px 10px;}
	.recent_work_box .title h2 {font-size:24px;}
	.recent_work_box .title a {font-size:16px; margin-top:5px; display:inline-block;}
	.recent_work_box .recent {width:100%; margin-left:0; clear:both;}
	.recent_slick_ct {padding-top:0; float:right}

	.recent_work_box .recent .img {width:auto; height:280px; margin:0 10px;}
	.recent_work_box .recent p {padding:0 10px;}
	.recent_work_box .recent .img img {width:100%; max-width:767px}
	.recent_work_box .recent .box {font-size:18px;}
	.recent_slick_ct span {font-size: 16px;padding: 6px 8px 6px;border: 2px solid #fff;float: left;line-height: 16px;}
	.recent_slick_ct span:nth-child(1) {border-radius: 5px 0 0 5px;}
	.recent_slick_ct span:nth-child(2) {border-radius: 0 5px 5px 0;}

	footer .footer_box {width:auto; padding:0 12px;}
	footer .footer_box br {display:inline;}
	footer .site_info {padding:20px 0;}


	.contents {width:auto; margin:auto; font-size:16px; font-weight:400; background:none; padding-bottom:40px;}
	.contents h2 {font-size:24px; font-weight:500;}
	.contents h3 {font-size:18px; font-weight:500;}
	
	.list_st_01 .txt {width:100%; padding-right:0;}
	.list_st_01 > ul > li {width:100%;}
	.slider {width:100%; clear:both; text-align:center;}
	.list_st_01 .imgbox {float:unset;}
	.list_st_01 .imgbox .img {width:auto; margin:0 5px;}
	.slider .slick-dots {display:inline-block;}
	.slider .slick-dots li {padding:2px;}
	.slider .slick-dots span {width:5px; height:5px; border-radius:10px; background:#fff; display:block; cursor: pointer;}
	.slider .slick-dots li.slick-active span {width:20px; background:#51318f;}
	.slider img {margin:auto;}
	.title_st_01 {padding-left:12px;}
	.list_st_01 {width:auto; padding:0 12px;}
	.list_st_01 .txt ul {position:static; padding:10px 0;}
	.list_st_01 .txt ul li img {width:30px; margin:auto;}
	.list_st_01 .txt div {padding-bottom:0px;}

	.list_st_02 > ul {width:1050px;}
	.list_st_02 > ul > li {width:330px; margin:0 10px;} 
	.list_st_02 > ul > li .img {width:330px; box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
	.list_st_02 > ul > li .img img {width:330px;}

	
	.table_st_01 {padding:0 12px 30px;}
	.table_st_01 ul {display:block;}
	.table_st_01 ul li:nth-child(1) {border-top:2px solid #fff;}
	.table_st_01 ul li {cursor: pointer;}
	.table_st_01 ul li:hover {font-weight:bold;}
	.table_st_01 ul li {width:100%; border-bottom:1px solid #fff; padding:20px 0;}
	.table_st_01 ul li div {font-size:16px; padding-bottom:20px;}
	.table_st_01 ul li p {font-size:14px;}
	.table_st_01 table {display:none;}

	.contact_form {font-size:14px; padding-top:0px; width:auto; padding:0 12px;}
	.contact_box_01 li {display:block;}
	.contact_box_01 label {float:unset; padding-bottom:10px; padding-left:10px; display:block; font-size:16px; background:url("../images/dot_project.png") no-repeat top 8px left 0;}
	.contact_box_01 input[type=text] {width: calc(100% - 20px); padding: 0 10px 8px;}
	.contact_box_01 select {width:100%; padding: 0 6px 8px;}
	.contact_box_01 label.even {margin-left:0;}
	.contact_box_01 textarea {width: calc(100% - 20px); padding: 0 10px 8px; height:100px;}
	
	.contact_box_02 span {width:100%; padding-bottom:10px; padding-left:10px; font-size:16px; background:url("../images/dot_project.png") no-repeat top 8px left 0;}
	.contact_box_02 span br {display:none;}
	.contact_box_02 li:nth-child(1) span {display: block; width:100%;}
	.contact_box_02 .file_btn {width:108px; padding:4px;}
    .contact_box_02 input[type=file] {display:none;}
	.contact_box_02 .file_name {margin-left:10px; width:calc(100% - 145px);}
	.contact_checkbox {width:100%;}
	.contact_box_02 .contact_checkbox dl {width:100%;}
	.submit button {padding-top:40px; width:190px; padding:10px 0;}
}

@media screen and (max-width:1070px){

	/* Sub */
	.list_st_02 > ul {width:767px;}
	.list_st_02 > ul > li {width:335px; margin:0 12px;} 
	.list_st_02 > ul > li .img {width:332px;}
	.list_st_02 > ul > li .img img {width:330px;}
	.list_st_02 > ul > li:nth-child(1) {margin:0 12px;}
}

@media screen and (max-width:767px){
	.mvisual_wrap .txt {position: static; padding:15px 12px 0;}
	.mvisual_wrap .txt strong br {display:inline;}
	.mvisual_wrap .txt div {border-bottom:1px solid #fff; padding-bottom:20px;}

	.recent_work .recent_work_box .title {width:auto; position:static; padding:0 0 10px;}
	.recent_work_box .recent .img {margin:0;}
	.recent_work_box .recent p {padding:0px;}
	
	/* List Style */
	.list_st_02 > ul {width:100%;}
	.list_st_02 > ul > li {width:calc(100% - 24px); margin:0 auto; display:block; padding-bottom:60px;} 
	.list_st_02 > ul > li .img {width:100%; background-size:80px;}
	.list_st_02 > ul > li .img img {width:100%;}
	.list_st_02 > ul > li:nth-child(1) {margin:0 auto;}
}
/* ------------------------------------------------------------
   Contact 폼 유동 레이아웃
   1) 기존 데스크톱 규칙이 고정 픽셀(textarea 1235px, dl 1245px, file_name 1015px)이라
      1400px 언저리에서 2단 정렬이 무너졌다. 폭을 비율로 잡아 어느 창 너비에서도
      라벨-입력 정렬이 유지되게 한다. 마크업은 그대로 둔다.
   2) 운영은 페이지 본문이 .editorOutput 래퍼 안에 들어가고, base.css 의
      `.editorOutput ul li {margin:0; padding:0; list-style-type:disc}` 가 명시도
      (0,1,2)로 `.contact_form li` (0,1,1)을 이겨 행 간격이 사라지고 불릿이 생긴다.
      그래서 모든 선택자에 .contact_form 을 붙여 (0,2,x)로 올린다.
      로컬 프리뷰에는 그 래퍼가 없어 이 차이가 드러나지 않는다 — 운영에서 검증할 것.
   ------------------------------------------------------------ */
.contact_form .contact_box_01,
.contact_form .contact_box_02 {margin:0; padding:0;}
.contact_form .contact_box_01 > li,
.contact_form .contact_box_02 > li {list-style:none; margin:0; padding:15px 0;}

.contact_form .contact_box_01 {display:flex; flex-wrap:wrap; column-gap:40px;}
.contact_form .contact_box_01 > li {display:flex; align-items:flex-start; width:calc(50% - 20px); box-sizing:border-box;}
.contact_form .contact_box_01 > li:last-child {width:100%;}
.contact_form .contact_box_01 label {float:none; flex:0 0 130px;}
.contact_form .contact_box_01 label.even {margin-left:0;}
.contact_form .contact_box_01 input[type=text],
.contact_form .contact_box_01 select,
.contact_form .contact_box_01 textarea {width:auto; flex:1 1 auto; min-width:0;}

.contact_form .contact_box_02 > li {display:flex; align-items:flex-start;}
.contact_form .contact_box_02 span {float:none; flex:0 0 130px;}
.contact_form .contact_box_02 .file_name {width:auto; flex:1 1 auto; min-width:0; margin-left:40px;}
.contact_form .contact_box_02 .contact_checkbox {float:none; flex:1 1 auto; min-width:0;}
.contact_form .contact_box_02 .contact_checkbox dl {width:auto;}

@media screen and (max-width:900px){
	.contact_form .contact_box_01 > li {width:100%;}
	.contact_form .contact_box_01 > li,
	.contact_form .contact_box_02 > li {flex-wrap:wrap;}
	.contact_form .contact_box_01 label,
	.contact_form .contact_box_02 span {flex-basis:100%; margin-bottom:6px;}
	.contact_form .contact_box_02 .file_name {margin-left:0;}
}

/* ------------------------------------------------------------
   페이지 본문(.contents) — .editorOutput 래퍼 대응
   운영은 페이지 본문이 <div class="editorOutput"> 안에 들어가고, base.css 의
   `.editorOutput p {font-size:13px; padding:3px 0}` (명시도 0,1,1) 가
   .contents 의 상속 글꼴(20px)과 본문 p 여백을 덮어쓴다. 로컬 프리뷰에는 이
   래퍼가 없어 차이가 드러나지 않으므로 반드시 운영에서 확인한다.
   body 를 붙여 (0,1,2) 로 올려 원래 값으로 되돌린다.
   font-size 는 20px 고정이 아니라 inherit — .contact_form(14px) 처럼 자체 크기를
   가진 블록 안에서는 그 크기를 그대로 물려받아야 한다.
   래퍼가 글꼴도 'apple SD gothic neo' 로 바꿔놓으므로 사이트 기본 스택(--font,
   Pretendard)으로 되돌린다. h2·h3 는 별도 규칙이 없어 .contents 에서 상속된다.
   ------------------------------------------------------------ */
body .contents { font-family: var(--font); }
/* about·careers 는 renewal 디자인이라 .lead·.hr-narr p 등이 각자 크기를 갖는다.
   이 규칙(0,1,2)이 그 규칙들(0,1,1)을 이겨 13px 로 뭉개므로 두 페이지는 제외한다.
   font-family 복원은 두 페이지에도 필요해 위 줄에 그대로 둔다. */
body #wrapper:not(.about):not(.careers) .contents p { font-family: inherit; font-size: inherit; padding: 0; }
body .contents .recent_work_box .recent p { padding-top: 10px; }

/* 구 레이아웃의 `footer {height:150px}` 는 리뉴얼 푸터(.ftr, padding 56/64px)에는
   너무 낮아 내용이 85px 넘쳐 나온다 — 내용에 맞춰 늘어나게 한다. */
footer.ftr { height: auto; }

/* 서브페이지 제목(brand·press·notice·contact) — 헤더 로고 아래 30px.
   1400px 초과: 헤더 113px 가 본문 위를 덮으므로 113+30.
   1400px 이하: 헤더가 65px 로 줄고 본문이 이미 그 아래에서 시작하므로 30 만. */
body .contents .title_st_01 { padding-top: 143px; }
@media screen and (max-width:1400px){
	body .contents .title_st_01 { padding-top: 30px; }
}