@charset "utf-8";

.sec_tit {font-size: 3rem; margin-bottom: 1.5rem;}
.sec_txt {font-size: 1.25rem; margin-bottom: 3.75rem; font-weight: 500;}
.sec_txt .p_br {display: block;}

/* mainVisual */
#mainVisual {position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 0; }
#mainVisual:before {content:''; width: 100%; height: 100%; background: #000; opacity: 0.4; position: absolute; left: 0; top: 0; z-index: 1;}
.mainVisualList {width: 100%; height: 100vh; position: relative;}
.mainVisualList li {width: 100%; height: 100vh;}
.mainVisualList li img {width: 100%; height: 100%; object-fit: cover;}
#mainVisual .slogan-wrap {position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); width: max-content; text-align: center; z-index: 1;}
#mainVisual .slogan {font-family: var(--font-score) !important; color: #fff; text-shadow: 3px 5px 5px rgba(0, 0, 0, 0.5);}
#mainVisual .slogan_tit {font-weight: 500; font-size: 4.375rem; font-family: var(--font-score) !important;}
#mainVisual .slogan_desc {font-weight: 400; font-size: 2rem; margin-top: 1.5rem; font-family: var(--font-score) !important;}
#mainVisual .quick-button {display: flex; justify-content: center; gap: 2rem; padding-top: 9rem;}
#mainVisual .quick-button .btn {font-size: 1.25rem; padding: 0.75rem 0; text-align: center; width: 220px; background: rgba(172,137,86,0.8); transition: 0.2s all linear;}
#mainVisual .quick-button .btn:hover {background: var(--color-brown); transition: 0.2s all linear;}
#mainVisual .slick-dots {position: absolute; left: 50%; bottom: 3.75rem; transform: translateX(-50%); z-index: 98; display: flex; width: var(--inner-width); justify-content: end; align-items: center; gap: 0.875rem;}
#mainVisual .slick-dots li { width: auto; height: auto;}
#mainVisual .slick-dots button {width: 12px; height: 12px; background: #fff; display: block; border-radius: 12px;text-indent: -99999px; font-size: 0; padding: 0; opacity: 0.5;}
#mainVisual .slick-dots .slick-active button {width: 32px; opacity: 1;}


/* One-stop */
#oneStop {}
#oneStop .conList {display: flex;}
.conListItem .con_tit {font-weight: 600; font-size: 2rem; margin-bottom: 1.25rem;}
.conListItem .con_tit span {display: inline-block; margin-left: 1rem; color: var(--color-choco); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.5px;}
.conListItem .con_img {position: relative; border-radius: 1.25rem; overflow: hidden; z-index: 0;}
#oneStop .flex.justify-between {align-items: baseline;}

.conListItem .con_img img{}
.conListItem .con_txt{position: absolute; right: 2rem; bottom: 1.25rem; line-height: 1.5; z-index: 1; text-align: right; color: #fff; text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5); font-size: 1.375rem; line-height: 1.5; letter-spacing: -0.5px;}


/* Our Portfolio */
.tab_wrap {display: flex; align-items: center; gap: 1rem; justify-content: center; margin-top: 2rem; }
.tab_wrap .tab {box-sizing: border-box; border: 1px solid #ddd; font-size: 1.125rem; text-transform: uppercase; padding: 0.25rem 1.5rem; border-radius: 2rem; font-weight: 500;transition: 0.2s all linear;}
.tab_wrap .tab:hover, .tab_wrap .tab.on {background: var(--color-brown); color: #fff; border-color: var(--color-brown); transition: 0.2s all linear;}
.tab_con .tabContents {display: none;}
.tab_con .tabContents.on {display: block;}
#portfolio .btn {display: flex; justify-content: center; width: max-content; margin: 0 auto;}
#portfolio .tab_con {margin: 5rem auto;}
.portfolioList {display: flex; gap: 50px; position: relative;}
.portfolioList .portfolio-item {margin: 0 25px;}
.portfolioList .item-img {box-sizing: border-box; border-radius: 20px; overflow: hidden; position: relative; height: 0; padding-top: 68%;}
.portfolioList .item-img img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.portfolioList .item-info {margin-top: 1.5rem;}
.portfolioList .item-info .item-cate {text-transform: uppercase; color: var(--color-choco); font-weight: 500;}
.portfolioList .item-info .item-tit {font-size: 1.375rem; font-weight: 600; margin-top: 0.375rem;}
.portfolioList .slick-arrow {width: 44px; height: 44px; background-position: center; background-size: contain !important; background-repeat: no-repeat; background-color: transparent; text-indent: -99999px; padding: 0; position: absolute; top: 50%; transform: translateY(-50%);}
.portfolioList .slick-arrow.slick-prev {background-image: url('/wp-content/uploads/2025/06/icon-arrp-prev.png'); left: -3rem}
.portfolioList .slick-arrow.slick-next {background-image: url('/wp-content/uploads/2025/06/icon-arrp-next.png'); right: -3rem}
.slick-prev:before, .slick-next:before {display: none;}



/* Business Areas */
#businessArea {}
.businessList {flex-wrap: wrap; gap: 3rem; justify-content: center;}
.businessList .businessListItem {position: relative; width: calc((100% - (3rem * 2)) / 3); height: 200px; background-size: cover; background-position: center; border-radius: 1.25rem; overflow: hidden; z-index: 0; text-align: center;}
.businessList .businessListItem:before {content:''; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0.8; position: absolute; left: 0; top: 0; z-index: -1; transition: 0.2s all linear;}
.businessListItem.bs01 {background-image: url('/wp-content/uploads/2025/06/business-img01.jpg');}
.businessListItem.bs02 {background-image: url('/wp-content/uploads/2025/06/business-img02.jpg');}
.businessListItem.bs03 {background-image: url('/wp-content/uploads/2025/06/business-img03.jpg');}
.businessListItem.bs04 {background-image: url('/wp-content/uploads/2025/06/business-img04.jpg');}
.businessListItem.bs05 {background-image: url('/wp-content/uploads/2025/06/business-img05.jpg');}
.businessListItem.bs06 {background-image: url('/wp-content/uploads/2025/06/business-img06.jpg');}
.businessListItem {display: flex; flex-direction: column; gap: 0.25rem; justify-content: center; align-items: center; width: 100%; height: 100%; color: #fff;}
.businessListItem a {width: 100%; height: 100%; display: flex; justify-content: center ;align-items: center;flex-direction: column;}
.businessListItem .sm-tit {color: #fff;}
.businessListItem .tit {font-size: 1.375rem; font-weight: 600; color: #fff;}
.businessListItem .txt {line-height: 1.4; margin-top: 0rem;  opacity: 0; height: 0; pointer-events: none; color: #fff;}
.businessListItem .more {position: absolute; right: 1.5rem; bottom:1.5rem; width: 36px; height: 36px; border-radius:50%; font-size: 1.25rem;font-weight: 800; background: rgba(255,255,255,0.3); text-align: center; line-height: 34px; color: #fff; transition: 0.2s all linear;opacity: 0; pointer-events: none;}
.businessListItem:hover {background: #fff; color: var(--color-brown); transition: 0.2s all linear;}

.businessList .businessListItem:hover:before {background: var(--color-brown); opacity: 0.9; transition: 0.2s all linear;}
.businessList .businessListItem:hover {transition: 0.2s all linear; }
.businessList .businessListItem:hover .txt {height: auto; opacity: 1; transition: 0.2s all linear; pointer-events: auto; margin-top: 0.75rem; letter-spacing: -0.5px; }
.businessList .businessListItem:hover .more {transition: 0.2s all linear; pointer-events: auto; opacity: 1;}

.partnerList {margin: 6.25rem 0; display: flex; gap: 3rem; align-items: center;}
.partnerList li {width: 280px; height: 90px; display: flex !important; align-items: center; justify-content: center;}


/* 하단 정보 */
#quickInfo {position: relative; height: 600px; margin-top: 0;}
#quickInfo:before, #quickInfo:after {content:''; width: 50%; height: 100%; position: absolute; top: 0; background-size: cover; background-repeat: no-repeat; z-index: -1;}
#quickInfo:before {background-image: url('/wp-content/uploads/2025/06/info-bg01.jpg'); left: 0;}
#quickInfo:after {background-image: url('/wp-content/uploads/2025/06/info-bg02.jpg'); right: 0;}
#quickInfo .flex > div {width: 50%; display: flex; flex-direction: column; height: 600px; justify-content: center; color: #fff;}
.quick-con .sm-tit {font-size: 1.5rem; font-weight: 500; text-transform: uppercase; margin-bottom: 0.5rem; }
.quick-con .tit {font-size: 2.5rem; font-weight: 600; line-height: 1.4;}
.quick-con .btn { width: fit-content; background: rgba(172,137,86,0.5); transition: 0.2s all linear; text-transform: uppercase; font-weight: 500; margin-top: 3.75rem;}
.quick-con .btn:hover {background: var(--color-brown); transition: 0.2s all linear;}
.quick-con.txt-right {align-items: end;}