@charset "utf-8";

.sub-content {padding: 272px 0 230px;}

/* S101 */
.greeting-wrap {display: flex; gap: 90px;}
.greeting-text {flex: 1; min-width: 0;}
.page-text p {font-size: 24px; line-height: 1.6; color: #222;}
.page-text p:not(:last-child) {margin-bottom: 30px;}
.page-text .text-intro {font-size: 32px; font-weight: 700; color: #2F1E19;}
.greeting-text .signature {margin-left: 14px; transform: translateY(-16px);}
.greeting-img {max-width: 650px; width: 100%;}

/* S102 */
.company-intro {margin-bottom: 85px;}
.company-visual {position: relative; margin-bottom: 90px;}
.company-visual:before {content: ''; width: 951px; height: 246px; background: url('../img/sub/intro-bg.jpg') no-repeat 50% 50%; position: absolute; top: -170px; right: -133px; z-index: -1 ;}
.company-awards ul {padding: 50px 60px; background: #FDF6EA;}
.company-awards ul li {position: relative; font-size: 24px; line-height: 1.8em; color: #222; padding-left: 35px;}
.company-awards ul li:before {content: ''; width: 8px; height: 8px; position: absolute; top: 18px; left: 14px; border-radius: 50%; background: #222;}

/* s103 */
#sub .page-history .contain {max-width: 1450px;}
.history-layout {display: flex; gap: 120px; align-items: flex-start;}
.history-block:not(:last-child) {margin-bottom: 170px;}
.history-left {width: 40%; padding-left: 42px;}
.history-left .history-period {font-size: 42px; font-weight: 600; line-height: 1.2; color: #666; text-align: right; margin-bottom: 30px;}
.history-left .history-period b {display: inline-block; font-size: 64px; font-weight: 700; color: #222;}
.history-left img {width: 100%; height: auto; display: block;}

.history-right {width: 51%;}
.history-right.scroll-area {max-height: 840px; overflow-y: auto; padding-right: 10px;}
.history-right.scroll-area::-webkit-scrollbar {width: 8px; height: 8px;}
.history-right.scroll-area::-webkit-scrollbar-thumb {background: #999; border-radius: 6px; cursor: pointer;}
.history-right.scroll-area::-webkit-scrollbar-track {background: #eee; border-radius: 6px;}

.year-group {position: relative; padding-bottom: 80px; padding-left: 60px;}
.year-group:before {content: ''; position: absolute; top: 24px; left: 0; width: 18px; height: 18px; border-radius: 50%; border: 4px solid #522C0F; background: #FFF;}
.year-group:after {content: ''; position: absolute; top: 25px; left: 8px; width: 1px; height: 100%; border: 1px solid #eee; z-index: -1;}
.year-group:last-child:after {display: none;}
.year {font-size: 42px; font-weight: 600; line-height: 1.6; color: #522C0F;}
.work-list li {position: relative; font-size: 24px; line-height: 1.6; color: #222; padding-left: 14px;}
.work-list li:before {content: ''; width: 4px; height: 4px; position: absolute; top: 16px; left: 0; background: #522C0F; border-radius: 50%;}

/* s201 */
/* 리스트형 게시판 */
.project-top.board-top {align-items: center;}
.project-top #bo_cate {margin-bottom: 0;}
.project-controls {display: flex; gap: 20px;}
.btn-board-mode {display: flex; border: 1px solid #ccc;}
.btn-board-mode a {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px;}
.btn-board-mode a.is-active {background: #E9E9E9;}
.btn-board-mode a.is-active svg path {fill: #222;}

.project-list,
.project-gallery {margin-bottom: 40px;}
.project-list ul {border-top: 1px solid #ccc;}
.project-list ul li {border-bottom: 1px solid #eee;}
.project-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; font-size: 18px; color:#666;}
.project-list ul li a {display:flex; align-items: center; gap: 60px; padding: 30px 0; transition:all 0.4s;}
.project-list .project-thumb {max-width:360px; width:100%;}
.project-list .project-thumb .pic {aspect-ratio: 360 / 216; overflow:hidden;}
.project-list .project-thumb .pic img {width:100%; height:100%; object-fit:cover; transition:.4s ease-in-out;}
.project-list ul li a .project-text {flex: 1; min-width: 0;}
.project-list ul li a .project-tit {font-size:30px; font-weight: 600; line-height: 1.6; color: #222; margin-bottom:10px; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; transition:all 0.6s;}
.project-list ul li a .project-info {display: flex; flex-wrap: wrap; margin: 0 -20px 48px; font-size:24px; line-height: 1.6;}
.project-list ul li a .project-info span {display: inline-block; padding: 0 20px;}
.project-list ul li a .project-address {position: relative; color: #222;}
.project-list ul li a .project-address:after {content: ''; width: 1px; height: 20px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); background: #ccc;}
.project-list ul li a .project-use {color: #666;}
.project-list ul li a .project-year {font-size:20px; line-height:1.6; color:#999;}
.project-list ul li a .project-year .icon {display: inline-block; margin-right: 5px;}
.project-list ul li a .project-year img {display: inline-block; vertical-align: text-top; margin-top: 2px;}
.project-list ul li a:hover .project-tit  {color:#522C0F; text-decoration-line: underline; text-underline-offset: 4px;}

/* 갤러리형 게시판 */
.sub-content.project-gallery-mode,
.sub-content.project-list-mode {padding-top: 160px;}
.project-slide {position: relative;}
#sub .project-slide .contain {/* max-width: 1830px; */}
.project-slide {margin-bottom: 100px;}
.project-slide .slide-item {aspect-ratio: 1800 / 610;}
.project-slide img {width:100%; height:100%; object-fit:cover;}
.project-slide .arrows {position: absolute; bottom: 0; right: 0; display: flex; align-items: center; padding: 14px 30px; background: rgba(255, 255, 255, 0.70);}
.project-slide .arrows:after {content: ''; width: 1px; height: 10px; position: absolute; top: 50%; left: 50%; transform: translateY(-50%); background: #ccc;}
.project-slide .slick-arrow {display: inline-block; width: 24px; height: 24px; font-size: 0; border: 0; background-color: transparent; background-repeat: no-repeat; background-position: 50% 50%; transition: all 0.3s;}
.project-slide .slick-prev {background-image: url('../img/main/swiper-button-prev.png'); margin-right: 20px;}
.project-slide .slick-next {background-image: url('../img/main/swiper-button-next.png'); margin-left: 20px;}
.project-slide .slick-arrow:hover {opacity: 0.5;}

.project-gallery-items {position: relative; display: flex; flex-wrap: wrap; margin: -30px;}
.project-gallery-items li.none {width:100%; padding:70px 0; margin:0; text-align:center; font-size:18px; color:#666;}
.project-gallery-item {width: 33.3333333%; padding: 30px;}
.project-gallery-item a {position: relative; width: 100%; height: 100%;}
.project-gallery-item a:after {opacity: 0; content: ''; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.70); position: absolute; top: 0; left: 0; transition: all 0.5s;}
.project-gallery-item a:hover:after {opacity: 1;}
.project-gallery-item .project-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; padding: 10px; z-index: 5;}
.project-gallery-item .project-text .inner {opacity: 0; transform: translateY(20px);}
.project-gallery-item a:hover .project-text .inner {opacity: 1; transform: translateY(0); transition: all 0.6s;}
.project-gallery-item .project-tit {font-size: 26px; font-weight: 700; line-height: 1.6; color: #fff;}
.project-gallery-item .project-address {font-size: 20px; line-height: 1.6; color: #fff;}
.project-gallery-item .project-thumb .pic {aspect-ratio: 487 / 292;}
.project-gallery-item .project-thumb .pic img {width:100%; height:100%; object-fit:cover}

/* 뷰페이지 */
/* .project-view-thumb {max-width: 1920px; width: 100%; margin: 0 auto;} */
.project-view-thumb .pic {aspect-ratio: 1920 / 790;}
.project-view-thumb img {width:100%; height:100%; object-fit:cover;}
.project-view.sub-content {padding-top: 112px;}
.project-view-content {display: flex; flex-direction: column; gap: 80px; padding: 120px 0 190px; border-bottom: 1px solid #ddd;}
.project-view-text {display: flex; gap: 30px;}
.project-view-title {/* max-width: 680px; */ max-width: 43%; width: 100%; padding-left: 28px;}
.project-view-title h3 {position: relative; font-size: 50px; font-weight: 700; line-height: 1.2; color: #222; margin-bottom: 10px;}
.project-view-title h3:before {content: ''; width: 8px; height: 38px; background: #D98600; position: absolute; top: 11px; left: -28px;}
.project-view-title .date {font-size: 20px; line-height: 1.6; color: #999;}
.project-view-desc {flex: 1; min-width: 0; font-size: 24px; line-height: 1.6; color: #222; padding-top: 40px;}
.project-slide-view .slide-item {aspect-ratio: 1580 / 880;}
.project-view-video {text-align: center; aspect-ratio: 1100 / 620; overflow:hidden;}
.project-view-video iframe  {width: 100%; height: 100%; }
.project-view-overview h4 {font-size: 32px; font-weight: 700; line-height: 1.6; color: #000; margin-bottom: 20px;}
.project-view-overview .project-view-desc {padding-top: 0;}

/* s302 */
.essay-list ul {border-top: 1px solid #ccc;}
.essay-list ul li {border-bottom: 1px solid #eee;}
.essay-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.essay-list ul li a {display:flex; align-items: center; gap: 40px; padding: 40px 30px; transition:all 0.4s;}
.essay-list .essay-thumb {max-width:216px; width:100%;}
.essay-list .essay-thumb .pic {aspect-ratio: 216 / 260; overflow:hidden;}
.essay-list .essay-thumb .pic img {width:100%; height:100%; object-fit:cover; transition:.4s ease-in-out;}
.essay-list ul li a .essay-text {flex: 1; min-width: 0;}
.essay-list ul li a .essay-tit {font-size:30px; font-weight: 600; line-height: 1.6; color: #222; margin-bottom:10px; overflow: hidden; white-space: nowrap;  text-overflow: ellipsis; transition:all 0.6s;}
.essay-list ul li a .essay-desc {font-size:22px; line-height: 1.6; color: #222; margin-bottom:20px; overflow: hidden;  display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 3;  text-overflow: ellipsis; transition:all 0.6s;}
.essay-list ul li a .essay-date {font-size:20px; line-height:1.6; color:#999; }
.essay-list ul li a .essay-date .icon {display: inline-block; margin-right: 5px;}
.essay-list ul li a .essay-date img {display: inline-block; vertical-align: text-top; margin-top: 2px;}
.essay-list ul li a:hover .essay-tit  {color:#522C0F; text-decoration-line: underline; text-underline-offset: 4px;}
.essay-list ul li.none {width: 100% !important; border-top:2px solid #000; border-bottom:1px solid #ddd; font-size:18px; color:#666;}

/* s403 */
#sub .page-location .contain {max-width: 1450px;}
.location-map {position: relative; margin-bottom: 30px;}
.location-map > img {width: 100%; display: block;}
.location-map .btn-wrap {position: absolute; bottom: 30px; right: 30px; display: flex; gap: 20px; z-index: 5;}
.location-map .btn-wrap a {display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.20);}
.location-map .btn-naver-map {background: #fff;}
.location-map .btn-kakao-map {background: #FBE300;}
.location-info .info-item {display: flex; align-items: center; gap: 40px; padding: 30px 40px; border-bottom: 1px solid #eee;}
.location-info .info-title {display: flex; max-width: 254px; width: 100%; align-items: center; gap: 20px;}
.location-info .info-icon {display: flex; width: 50px; height: 50px; justify-content: center; align-items: center; background: #D98600; border-radius: 12px;}
.location-info .info-text {font-size: 24px; font-weight: 600; line-height: 1.6; color: #222;}
.location-info .info-desc {flex: 1; min-width: 0; font-size: 24px; line-height: 1.6; color: #222;}
.location-info .info-desc .line {display: inline-block; width: 1px; height: 20px; background: #ccc; margin: 0 30px; transform: translateY(3px);}