/*     2354204 : 스크롤 블록/셀 슬라이드 js      */
.empty__2354204__ {padding:20px 10px;background:#fafafa;font-size:13px;color:blue;text-align:center}
.empty__2354204__ p{font-size:17px;font-weight:bold}
.empty__2354204__ dl{margin:0;text-align:left;color:#333}
.empty__2354204__ dt{margin-bottom:5px;font-size:14px}
.empty__2354204__ dd{margin:0;font-size:13px}


/*     2354214 : 이미지      */
.shgroup .sub_top_wrap, .contents_wrap .sub_page_top {display:none;}

.section {width: 100%;}
.section .section-body {width: 100%; max-width: 1400px; padding: 0 20px; margin: 0 auto; box-sizing: border-box; position: relative;}
.section .section-body .section-inner {padding: 0;}

.section .section-row {width: 100%; height: 100%; display: -webkit-box; display: -moz-box;  display: -ms-flexbox;  display: flex; }
.section .section-row.column {-webkit-box-orient: vertical;  -moz-flex-direction: column;  -ms-flex-direction: column;  flex-direction: column;}
.section .section-row.between {-webkit-box-pack: justify; -moz-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between;}
.section .section-row.center {-webkit-box-pack: justify; -moz-justify-content: center;  -ms-flex-pack: justify; justify-content: center;}
.section .section-row.center > * {text-align: center;}
.section .section-row .section-column {width: 100%;}

.section7{overflow: hidden; position: relative; padding:120px 0;z-index: 9;min-height: 70svh;}
.section7 .section-body{max-width: 1800px; height: 100%;}
.section7 .section-body .section-inner{height: 100%;}

.section7 .tit-area {text-align: center;max-width: 1400px;margin-left: auto;margin-right: auto;}
.section7 .tit-box b {display: block;margin-bottom: 15px;font-size: 25px;color: #0074ff;font-family: 'Pretendard-Bold';word-break:keep-all;}
.section7 .tit-box h3 {display: block;margin: 0;font-size: 35px;font-family: 'Pretendard-Light';font-weight:normal;color: #666;line-height: 1.5em;word-break:keep-all;}
.section7 .tit-box h3 span {font-family: 'Pretendard-Bold';color:#333}
.section7 .tit-box h3:nth-child(2) {margin-left: -10px;}
.section7 .tit-box h3 span {font-family: 'Pretendard-Bold';color: #333;}
.section7 .tit-box p {max-width: 1400px;margin: 40px auto 0;font-size: 18px;font-family: 'Pretendard-Regular';opacity: 0.9;line-height: 1.5em;word-break:keep-all;}
.section7 .tit-box p span {line-height: 1.5em;}
.section7 .tit-box span {
	display: block;margin-bottom: 5px;font-family: 'Pretendard-Regular';color:#999;letter-spacing: -.05em;line-height: 1.5em;word-break:keep-all;
}
.section7 .tit-box p span:last-child {font-family: 'Pretendard-Bold';}
.tit-box p span.fill-text {
	position: relative;background: linear-gradient(to right, #666 0%, #666 50%, #999 50%, #999 100%);
    -webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;
	background-position: 100% 0;transition: background-position cubic-bezier(.1, .5, .5, 1) 2s;margin: 0 auto;line-height: 1.5em;word-break:keep-all;
}

.section7 .fill-text,
.section7 .fill-text span {position: relative;display: inline-block;color: #666;}

.section7 .fill-text span::before {
	content: attr(data-text);position: absolute;inset: 0;color: #999;width: 0;overflow: hidden;white-space: pre-wrap;transition: width 1s ease;
}

.section7 .fill-text.is-fill span::before {width: 100%;}

/* 모바일 */
@media (max-width: 1600px) {
    .tit-box p span.fill-text {width: fit-content;}
}
@media (max-width: 1024px) {
	.section7 .img-area:after{width: calc(100% + 40px); left: -20px;}
}
@media (max-width: 1023px) {
	.section7 {padding:60px 0;}
}
@media (max-width: 768px) {
	.section7 .tit-box b {font-size: 20px;}
	.section7 .tit-box p {margin:15px auto 0;font-size:16px;}
}

@media (min-width: 1024px) {
	#sub_view #container .contents_wrap {padding: 100px 0 60px;}
	.section7 .tit-box h3 {font-size: 55px;}
	.section7 .tit-box span {margin-bottom:10px;}
	.section7 .tit-box p {font-size:22px;}
}

/*     2354224 : 이미지      */
.section2 dl, .section2 ul, .section2 ol, .section2 menu, .section2 li,
.section3 dl, .section3 ul, .section3 ol, .section3 menu, .section3 li {list-style: none;vertical-align: middle;}
fieldset, img {border: 0 none;}

.section2 {overflow: hidden;width: 100%;border-top:1px dashed #ddd;}
.section2.card-section {padding:120px 0;color: #333;overflow: hidden;font-family: 'SUIT', sans-serif;}
.section2 .section-body {margin:0 auto;max-width: 1400px;}
.section2 .section-column + .section-column {margin-top: 80px;}

.section2 .tit-area {text-align: center;max-width: 1400px;margin-left: auto;margin-right: auto;}
.section2 .tit-box b {display: block;margin-bottom: 15px;font-size: 25px;color: #0074ff;font-family: 'Pretendard-Bold';word-break:keep-all;}
.section2 .tit-box h3 {display: block;margin: 0;font-size: 35px;font-family: 'Pretendard-Light';font-weight:normal;color: #333;line-height: 1.5em;word-break:keep-all;}
.section2 .tit-box h3:nth-child(2) {margin-left: -10px;}
.section2 .tit-box h3 span {font-family: 'Pretendard-Bold';font-weight:normal;color: #333;}
.section2 .tit-box p {max-width: 1400px;margin: 30px auto 0;font-size: 18px;font-family: 'Pretendard-Regular';opacity: 0.9;line-height: 1.5em;word-break:keep-all;}
.section2 .tit-box p span {line-height: 1.5em;}
.section2 .tit-box span {
	display: block;margin-bottom: 5px;font-family: 'Pretendard-Regular';color:#efefef;letter-spacing: -.05em;line-height: 1.5em;word-break:keep-all;
}
.tit-box p span.fill-text {
	position: relative;background: linear-gradient(to right, #666 0%, #666 50%, #efefef 50%, #efefef 100%);
    -webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;
	background-position: 100% 0;transition: background-position cubic-bezier(.1, .5, .5, 1) 2s;margin: 0 auto;line-height: 1.5em;word-break:keep-all;
}
.section2 .card-cont-wrap .card_list_wrapper {overflow: hidden;}
.section2 .card-cont-wrap .cards-ul {position: relative;padding-bottom: calc(100svh - 200px);height: 100%;}
.section2 .card-cont-wrap .card_wrapper {position: absolute;top: 0;left: 0;width: 100%;height: 100%;cursor: pointer; background-size: cover; background-position: center; background-repeat: no-repeat;}
.section2 .card-cont-wrap .card_wrapper .txt-wrap {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;}
.section2 .card-cont-wrap .card_wrapper .txt-wrap h4 {
	font-size: 65px;font-family: 'Pretendard-Bold';margin: 0 0 20px 0 !important;color: #fff;letter-spacing: -.05em;
	text-shadow: 0 5px 25px rgba(0,0,0,.9),0 0 20px rgba(255,62,0,.3);line-height: 1;word-break:keep-all;
}
.section2 .card-cont-wrap .txt-wrap p {font-size: 25px;font-family: 'Pretendard-Regular';color: #fff;margin: 0 0 20px 0;letter-spacing: -.05em;word-break:keep-all;}

.section2 .card-cont-wrap .txt-wrap em {
	font-size: 16px;font-family: 'Pretendard-Light';line-height: 1.5em;color: #fff ;opacity: 0.8;max-width: 95%;word-break:keep-all;
}

/* 모바일 */
@media (max-width: 1600px) {
	.section2 .cards-ul {padding-bottom: calc(100dvh - 100px);}
    .tit-box p span.fill-text {width: fit-content;}
}
@media (max-width: 1024px) {
	.section2.card-section {padding:120px 0;}
}
@media (max-width: 1023px) {
   .section2 .card-cont-wrap .cards-ul {padding-bottom: calc(100svh - 84px);}
	.section2 .card-cont-wrap .card_wrapper .txt-wrap h4 {font-size:35px;}
}
@media (max-width: 768px) {
	.section2.card-section {padding: 60px 2% 60px;}
	.section2 .tit-box b {font-size: 20px;}
	.section2 .tit-box p {margin:15px auto 0;font-size:16px;}
	.section2 .card-cont-wrap .card-cont-wrap { height: 62vh; min-height: 420px; }
	.section2. card-cont-wrap .cont-wrap { width: 92%; }
	.section2 .card-cont-wrap .txt-wrap { padding: 35px 30px; }
	.section2 .card-cont-wrap .txt-wrap h4,
	.section2 .card-cont-wrap .card_wrapper .txt-wrap h4 {font-size: 35px;line-height:1.5em;}
}

@media (min-width: 1024px) {
	.section2 .tit-box h3 {font-size: 55px;}
	.section2 .tit-box span {margin-bottom:10px;}
	.section2 .tit-box p {font-size:22px;}
	.section2 .card-cont-wrap .txt-wrap em {font-size:18px}
}

/*     2354234 : 이미지      */
li {list-style:none;}

/***** Grid *****/
.grid-box {display: -webkit-box; /* 구형 Safari 브라우저 */ display: -ms-grid; /* 구형 Internet Explorer */ display: grid; /* 최신 브라우저 */}
.grid-box.col2 { grid-template-columns: repeat(2, 1fr); }
.grid-box.col3 { grid-template-columns: repeat(3, 1fr); }
.grid-box.col4 { grid-template-columns: repeat(4, 1fr); }
.grid-box.col5 { grid-template-columns: repeat(5, 1fr); }
.grid-box.col6 { grid-template-columns: repeat(6, 1fr); }
.grid-box.col7 { grid-template-columns: repeat(7, 1fr); }
.grid-box.col8 { grid-template-columns: repeat(8, 1fr); }

.grid-c-gap-10 { grid-column-gap: 10px; }
.grid-c-gap-20 { grid-column-gap: 20px; }
.grid-c-gap-30 { grid-column-gap: 30px; }
.grid-c-gap-40 { grid-column-gap: 40px; }
.grid-c-gap-50 { grid-column-gap: 50px; }
.grid-c-gap-80 { grid-column-gap: 80px; }

.grid-r-gap-10 { grid-row-gap: 10px; }
.grid-r-gap-20 { grid-row-gap: 20px; }
.grid-r-gap-30 { grid-row-gap: 30px; }
.grid-r-gap-40 { grid-row-gap: 40px; }
.grid-r-gap-50 { grid-row-gap: 50px; }
.grid-r-gap-60 { grid-row-gap: 60px; }
.grid-r-gap-80 { grid-row-gap: 80px; }

.section9 .section-body {margin:0 auto;max-width: 1400px;}
.section9 .section-column + .section-column {margin-top: 80px;}

.section9 .tit-area {text-align: center;max-width: 1400px;margin-left: auto;margin-right: auto;}
.section9 .tit-box b {display: block;margin-bottom: 15px;font-size: 25px;color: #0074ff;font-family: 'Pretendard-Bold';word-break:keep-all;}
.section9 .tit-box h3 {display: block;margin: 0;font-size: 35px;font-family: 'Pretendard-Bold';font-weight:normal;color: #333;line-height: 1.5em;word-break:keep-all;}
.section9 .tit-box h3:nth-child(2) {margin-left: -10px;}

.section9 .tit-box p {max-width: 1400px;margin: 30px auto 0;font-size: 18px;font-family: 'Pretendard-Regular';opacity: 0.9;line-height: 1.5em;word-break:keep-all;}
.section9 .tit-box p span {line-height: 1.5em;}
.section9 .tit-box span {
	display: block;margin-bottom: 5px;font-family: 'Pretendard-Regular';color:#efefef;letter-spacing: -.05em;line-height: 1.5em;word-break:keep-all;
}
.tit-box p span.fill-text {
	position: relative;background: linear-gradient(to right, #666 0%, #666 50%, #efefef 50%, #efefef 100%);
    -webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;background-size: 200% 100%;
	background-position: 100% 0;transition: background-position cubic-bezier(.1, .5, .5, 1) 2s;margin: 0 auto;line-height: 1.5em;word-break:keep-all;
}

/* section9 */
.section9 {position: relative;overflow: hidden;padding: 120px 0;border-top:1px dashed #ddd;}

.section9 .gradient {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
.section9 .gradient .top {position: absolute;top: 0;left: 0;width: 100%;height: 200px;background: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));}
.section9 .gradient .bottom {position: absolute;bottom: 0;left: 0;width: 100%;height: 200px;background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));}
.section9 .listArea {position: relative;z-index: 2;width: 100%;height: 100svh;}
.section9 .listBx {position: relative;width: 100%;height: 100%;transform-style: preserve-3d;perspective: 1000px;}
.section9 .list {position: absolute;width: 200px;height: 200px;background: rgba(255,255,255,0.1);border-radius: 10px;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;cursor: pointer;}
.section9 .list p {color: #fff;font-size: 16px;text-align: center;margin-top: 10px;}
.section9 .list .moimg {width: 80%;height: 80%;}
.section9 .list .moimg img {width: 100%;height: 100%;object-fit: contain;}
.section9 .list:hover {transform: scale(1.1);background: rgba(255,255,255,0.2);}

@media (max-width: 1023px) {
    .section9 { padding: 100px 0;}    
    .section9 .listArea {height: auto;}    
    .section9 .listBx {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;padding: 20px;}    
    .section9 .list {position: relative;width: 100%;height: 150px;}
}
.section9 .portfolio-list li{height: fit-content;}
.section9 .portfolio-list li a .img{position: relative; padding-bottom: 10px;}
.section9 .portfolio-list li a .img img{position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover;}

/* 모바일 */
@media (max-width: 1600px) {
    .tit-box p span.fill-text {width: fit-content;}
}

@media (max-width: 768px) {
	.section9 .tit-box b {font-size: 20px;}
	.section9 .tit-box p {margin:15px auto 0;font-size:16px;} 
}

@media (min-width: 1024px) {
	.section9 .tit-box h3 {font-size: 55px;}
	.section9 .tit-box span {margin-bottom:10px;}
	.section9 .tit-box p {font-size:22px;}
}

.portfolio-list li .txt span{ transition: 0.3s all ease;}
.portfolio-list li:hover .txt span{color: #999;}
.portfolio-list li:hover .txt span:last-of-type{opacity: 1; color: #666;}
.portfolio-list li .img {}
.portfolio-list li .img img {box-shadow:3px 5px 5px rgba(0,0,0,.5);transition: transform 0.3s ease;}
/*.portfolio-list li:hover .img img {transform: scale(1.1);}*/

.portfolio-list li .txt {margin-top: 20px} 
.portfolio-list li .txt span {font-size:18px;font-family: 'Pretendard-Regular';letter-spacing: -.05em;word-break:keep-all;}
.portfolio-list li:hover .txt span{font-family: 'Pretendard-Bold';}

.portfolio-list li .txt span:first-child {position: relative; background: linear-gradient(to right, #666 0%, #666 50%, #999 50%, #999 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; /* 배경 넓게 */ background-position: 100% 0; /* 처음엔 회색 쪽 */ transition: background-position cubic-bezier(.1,.5,.5,1) 3s; margin: 0 auto;}

@media screen and (max-width: 1023px){
	.section9 .portfolio-list li {margin-top: 0 !important;}
	.section9 .grid-r-gap-50.grid-c-gap-50 {grid-row-gap: 40px;grid-column-gap: 40px;}
	.section9 .portfolio-list.grid-box.col4 {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 767px){
	.section9 .grid-r-gap-50.grid-c-gap-50 {grid-column-gap: 20px;}
	.portfolio-list li .txt span {font-size:16px;}
}
@media screen and (min-width: 1024px){
	.portfolio-list li .txt span {font-size:16px;}
    .portfolio-list li:hover .txt span:first-child {background-position: 0 0; /* 호버 시 배경이 왼쪽부터 채워짐 */}
}
.portfolio-list li.on .txt span:first-child {background-position: 0 0; /* 호버 시 배경이 왼쪽부터 채워짐 */}