@charset "utf-8";

/* About us */
.introduction-content {display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.sub1-img {min-width: 420px; max-width: 680px; border-radius: 20px; overflow: hidden; flex-shrink: 0; flex:1;}
.right-content{max-width: 606px; flex: 1;}
.common-text {display: flex; flex-direction: column; gap: 30px;}
.common-header {display: flex; align-items: center; gap: 30px; width: 100%; }
.common-title {font-weight: 700; font-size: var(--font-size18); color: var(--color-primary); line-height: 1.5em; flex-shrink: 0; }
.common-line {flex: 1 1 auto; min-width: 0; height: 1px; background: var(--color-primary); }
.common-content {display: flex; flex-direction: column; gap: 40px; max-width: 600px;}
.common-sub-title {font-weight: 700; font-size: var(--font-size40); color: #242424; line-height: 1.5em; }
.common-desc {font-family: 'Pretendard'; font-weight: 400; font-size: var(--font-size20); color: #454545; line-height: 1.5em; }
.common-desc p {margin-bottom: 30px; }
.common-desc p:last-child {margin-bottom: 0; }
.ceo { text-align: right; margin-top: 40px; color: #242424; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

/* vision */
.vs-bg {display: flex; align-items: center; width: 100%; height: clamp(500px, 56.25vw, 720px); padding: 0 100px; background: url(../images/sub/sub1-2-bg.jpg) no-repeat center / cover; border-radius: 20px; overflow: hidden; }
.vs-title {color: #fff; }
.vs-line {background: #fff; }
.vs-sub-title {color: #fff; }
.vs-desc {color: #fff; }

/* 연혁 */
.hst-big { background: url(../images/sub/hst-img.jpg) center no-repeat; background-size: cover; border-radius: 16px; text-align: center; color: #fff; padding: 95px 15px; position: relative; }
.hst-big h4 { font-size: var(--font-size24); line-height: 1em; font-weight: 700; }
.hst-big h2 { font-size: var(--font-size40); font-weight: 700; line-height: 1.2em; margin: 5px 0 16px;}
.hst-big p { font-size: var(--font-size18); font-weight: 700; } 
.hst-big::after { content: ""; position: absolute; left: 0; right: 0; margin: auto; bottom: -15px; width: 30px; height: 30px; background: url(../images/sub/hst-img-dot.png) center no-repeat; background-size: contain; z-index: 1;}
.hst { position: relative; padding-top: 56px; }
.hst::before { content: ""; position: absolute; left: 0; right: 0; margin: auto; top: 0; width: 1px; height: 92%; background: #ddd; }
.hst .group { margin-bottom: 40px; width: 50%; margin-left: 50%; position: relative; padding-left: 85px; }
.hst .group::before { content: ""; position: absolute; left: -10px; top: 6px; width: 20px; height: 20px; background: url(../images/sub/hst-dots.png) center no-repeat; background-size: contain;}
.hst .group::after { content: ""; position: absolute; left: 0; top: 15px; width: 65px; height: 1px; background: #ddd; z-index: -1;}
.hst .group:last-child { margin-bottom: 0; }
.hst .group .year { font-size: var(--font-size32); line-height: 1em; margin-bottom: 15px; color: #242424; font-weight: 700; }
.hst .group ul li {display: flex; }
.hst .group ul li .month { width: 37px; font-weight: 700; color: var(--color-primary); position: relative; }
.hst .group ul li .month.wt { width: 65px; }
.hst .group ul li .month::after { content: ""; position: absolute; right: 8px; width: 3px; height: 3px; border-radius: 4px; background: #242424; top: 11px; }
.hst .group ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; color: #000; }
.hst .group:nth-child(even) { padding-right: 0; padding-right: 85px; width: 50%; margin-left: 0; text-align: right; }
.hst .group:nth-child(even)::before { left: auto; right: -10px; }
.hst .group:nth-child(even)::after { left: auto; right: 0; }
.hst .group:nth-child(even) ul li { flex-direction: row-reverse;}
.hst .group:nth-child(even) ul li .month::after { right: auto; left: 7px; }

/* 찾아오시는 길 */
.lct { display: flex; align-items: center; position: relative; top: -65px; z-index: 1; padding-left: 30px; }
.lct .left { background: var(--color-primary); color: #fff; padding: 40px; width: 340px; }
.lct .left h5 { font-size: 17px; line-height: 1.58em; font-weight: 300; }
.lct .left h3 { font-size: var(--font-size24); line-height: 1.333em; font-weight: 600; margin-top: 70px; }
.lct .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 45px; display: flex; flex-wrap: wrap; gap: 10px 35px;}
.lct .info li { display: flex; }
.lct .info li strong { display: inline-block; font-size: var(--font-size18); font-weight: 600; color: var(--color-primary); position: relative; padding-right: 15px; padding-left: 20px; }
.lct .info li strong::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--color-primary);}

/* Business 리스트 */
.bs-tab { gap: 10px 60px; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 60px; }
.bs-tab li a { display: inline-block; font-size: var(--font-size18); font-weight: 500; color: #242424; line-height: 1.33em; }
.bs-tab li.active a,
.bs-tab li:hover a { color: var(--color-primary);}
.bs-wrap { display: flex; flex-wrap: wrap; gap: 60px; }
.bs-wrap .col { width: calc(100%/4 - 45px); }
.bs-wrap .col a { display: block; }
.bs-wrap .col .thumb { position: relative; display: block; overflow: hidden; padding-bottom: 140%; }
.bs-wrap .col .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-wrap .col .thumb .tit { position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(44, 44, 44, 0.5); color: #fff; padding: 10px; font-size: var(--font-size20); font-weight: 500; line-height: 1.2em; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: .3s;}
.bs-wrap .col a:hover .thumb .tit { opacity: 1; }

/* Business 상세 */
.bs-summary { margin: 120px 0 100px; display: flex; }
.bs-summary .image { width: 42%; }
.bs-swiper .thumb { position: relative; display: block; overflow: hidden; padding-bottom: 140%; }
.bs-swiper .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.bs-prev::after, .bs-next::after { display: none; }
.bs-prev, .bs-next { top: 50%; transform: translateY(-50%); width: 60px; height: 60px; background-repeat: no-repeat; background-position: center; background-size: 13px; background-color: #fff; border-radius: 60px; }
.bs-prev { left: 30px; background-image: url(../images/sub/pd-prev.png);}
.bs-next { right: 30px; background-image: url(../images/sub/pd-next.png); left: auto;}
.bs-summary .swiper-pagination { bottom: 25px; }
.bs-summary .swiper-pagination-bullet { background: #fff; width: 9px; height: 9px; opacity: 1; bottom: 40px; }
.bs-summary .swiper-pagination-bullet-active { background: var(--color-primary);}
.bs-summary .info { width: 58%; padding-left: 90px; display: flex; flex-direction: column; justify-content: space-between;}
.bs-summary .info .tit { font-size: var(--font-size40); line-height: 1.2em; font-weight: 700; color: #242424; margin-bottom: 80px; }
.bs-summary .info .group { margin-bottom: 35px; font-size: var(--font-size18); }
.bs-summary .info .group:last-child { margin-bottom: 0; }
.bs-summary .info .group h5 { line-height: 1.2em; font-weight: 600; color: #242424; margin-bottom: 16px; font-size: var(--font-size18);}
.bs-summary .info .group p { line-height: 1.7em; }
.bs-summary .info .download-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-primary); color: #fff; line-height: 1em; width: 156px; height: 52px; font-size: var(--font-size20); font-weight: 600; margin-top: 30px; }
.bs-detail { padding-bottom: 60px; border-bottom: 1px solid #ddd;}

/* 문의하기 */
.ct-img { text-align: center; }
.ct-gray { margin: 100px 0; background: #fafafa; padding: 70px;}
.ct-gray .group { margin-bottom: 40px; }
.ct-gray .group:last-child { margin-bottom: 0; }
.ct-gray h4 { font-size: var(--font-size24); font-weight: 700; line-height: 1.666em; color: #242424; margin-bottom: 15px; }
.ct-gray .span-fx { display: flex; gap: 20px; flex-wrap: wrap;}
.ct-gray .span-fx span { display: inline-block; position: relative; }
.ct-gray .span-fx span::after { content: ""; position: absolute; right: -11px; top: 6px; width: 2px; height: 12px; background: #454545; }
.ct-gray .span-fx span:last-child::after { display: none; }
.ct-gray ul { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-bottom: 30px; }
.ct-gray ul li { display: flex; font-size: 16px; }
.ct-gray ul li strong { display: inline-block; font-weight: 600; color: var(--color-primary); position: relative; padding-right: 20px; line-height: 1.5em; }
.ct-gray ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; line-height: 1.5em; word-break: break-all;}
.ct-gray ul li .txt a { display: inline-block; text-decoration: underline; text-underline-position: under;}

/* 찾아오시는 길 - Location */
.location-content {display: flex; flex-direction: column; gap: 40px; align-items: center; }
.location-contact {display: flex; gap: 40px; align-items: center; width: 100%;}
.contact-card {background: #f8f8f8; display: flex; flex-direction: column; height: 258px; padding: 30px; border-radius: 20px; flex:1; }
.contact-card .contact-icon {position: relative; width: 48px; height: 48px; }
.contact-card .contact-info {display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.contact-title {font-family: 'Pretendard'; font-weight: 700; font-size: var(--font-size24); color: #242424; line-height: 1.5em; }
.contact-text {font-family: 'Pretendard'; font-weight: 400; font-size: var(--font-size18); color: #454545; line-height: 1.5em; }
.location-office {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; width: clamp(100%, 100%, 100%); height: clamp(300px, 20.8vw, 400px);}
.office-info {background: var(--color-primary); display: flex; flex-direction: column; height: 100%; padding: 30px; border-radius: 20px; width: clamp(320px, 25.5vw, 490px); }
.office-info .contact-icon {position: relative; width: 48px; height: 48px; }
.office-info .icon-img img {width: 100%; height: 100%; object-fit: contain; }
.office-info .contact-info {display: flex; flex-direction: column; gap: 24px; width: 100%; margin-top: 24px;}
.office-title {font-family: 'Pretendard'; font-weight: 700; font-size: var(--font-size24); color: #fff; line-height: 1.5em; }
.office-text {font-family: 'Pretendard'; font-weight: 600; font-size: var(--font-size18); color: #fff; line-height: 1.5em; padding-right: 20px;}
.office-image {height: 100%; position: relative; border-radius: 20px; overflow: hidden; flex:1; }
.office-image iframe {width: 100%; height: 100%; border: 0;}
.root_daum_roughmap {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .wrap_map {height: 100% !important;}

/* overview */
.ov-content {display: flex; align-items: center; gap: 70px;; margin-bottom: 114px;}
.ov-content .img-wrap {border-radius: 20px; overflow: hidden;}
.ov-text {flex:1; }
.ov-desc {min-width: 500px;}

/* strenth */
.strenth-content {display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
.strenth-title {font-weight: 700; font-size: var(--font-size40); color: #242424; line-height: 1.5em; }
.strenth-list {display: flex; gap: 40px; align-items: flex-start; width: 100%; }
.strenth-item {display: flex; flex-direction: column; gap: 30px; flex:1; }
.strenth-img {aspect-ratio: 440/300; border-radius: 20px; overflow: hidden; width: 100%; }
.strenth-info {display: flex; flex-direction: column; gap: 30px; line-height: 1.5em; }
.strenth-header {display: flex; flex-direction: column; gap: 16px; }
.strenth-num {font-family: 'Pretendard'; font-weight: 600; font-size: var(--font-size18); color: var(--color-primary); line-height: 1.5em; }
.strenth-item-title {font-weight: 700; font-size: var(--font-size24); color: #242424; line-height: 1.5em; }
.strenth-desc {font-weight: 400; font-size: var(--font-size18); color: #454545; line-height: 1.5em; } 

/* development */
.dev-tab {margin-bottom:114px;}
.dev-tab ul {display:flex; gap: 10px; max-width: 650px; height: 56px; margin: auto;}
.dev-tab ul li {position: relative; background:#fff; border:1px solid #ddd;border-radius: 56px; flex:1;}
.dev-tab ul li a {display:flex; justify-content:center; align-items:center; gap: 3px; width:100%; height: 100%; color:#8F8F8F; text-align:center; font-size:16px; font-weight: 500; line-height: 1.5em;}
.dev-tab ul li:hover ,.dev-tab ul li.active {border-color:var(--color-primary);}
.dev-tab ul li:hover a, .dev-tab ul li.active a {color:var(--color-primary); }

.development {display: flex; flex-direction: column; gap: 100px; align-items: flex-start; }
.dev-intro {display: flex; flex-direction: column; gap: 40px; width: 100%; }
.dev-title {font-weight: 700; font-size: var(--font-size40); color: #242424; line-height: 1.5em; }
span.pretendard {font-family: 'Pretendard'; font-weight: 700; }
.dev-desc {font-family: 'Pretendard'; font-weight: 400; font-size: var(--font-size20); color: #454545; line-height: 1.5em; }
.dev-desc p {margin-bottom: 0; }
.dev-gallery {display: flex; flex-direction: column; gap: 40px; width: 100%; }
.dev-gallery-row {display: flex; gap: 40px; align-items: center; }
.dev-img {border-radius: 20px; overflow: hidden; flex: 1;}

/* sustainable */
.sustainable-item {display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 40px; border-radius: 20px; border: 1px solid #ddd;}
.sustainable-item:not(:last-child) {margin-bottom: 40px;}
.sustainable-item .left-box {width: 65%;}
.sustain-title {font-weight: 700; font-size: var(--font-size30); color: #242424; line-height: 1.5em; margin-bottom: 40px;}
.sustain-desc {font-family: 'Pretendard'; font-weight: 400; font-size: var(--font-size18); color: #454545; line-height: 1.5em;}
.sustainable-item1 .sustain-desc {width: 80%;}
.sustainable-item .img-box {border-radius: 20px; overflow: hidden;}

/* product */
.sub-title.blind {padding: 0;}
.product-list {display: flex; flex-direction: column; gap: 72px; align-items: center; margin-top: 100px;}
.product-grid {display: flex; flex-direction: column; gap: 30px; width: 100%; }
.product-row {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.product-item {display: flex; flex-direction: column; gap: 24px;}
.product-img {position: relative; border-radius: 20px; overflow: hidden; max-width: 560px;}
.product-img > div {position: relative; padding-bottom: 67%; overflow: hidden;}
.product-img img {position:absolute; top:50%; left:0; transition:.4s ease-in-out; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.product-img > .abbox { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); border-radius: 20px; overflow: hidden; opacity: 0; transition: .3s;}
.product-img > .abbox .view { display: inline-block; padding: 10px 20px; border-radius: 30px; background: #fff; color: var(--color-primary); font-size: var(--font-size18); font-weight: 500; line-height: 1.5em; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.product-row a:hover .product-img > .abbox { opacity: 1; }
.product-title {font-weight: 400; font-size: var(--font-size18); color: #242424; line-height: 1.56em; }
.product-banner {display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 400px; background: url(../images/sub/sub3-bg.jpg) no-repeat center / cover; border-radius: 20px; overflow: hidden; }
.banner-btn {display: flex; align-items: center; justify-content: center; width: 600px; height: 72px; padding: 26px 50px; background: #fff; border-radius: 72px; font-weight: 500; font-size: var(--font-size18); color: #242424; line-height: 1.66em; }
.banner-btn:after{content: "→"; margin-left: 10px;}
.banner-btn:hover {background: var(--color-primary); color: #fff; }

/* inquiry */
.inquiry-wrap {display: flex; gap: 150px;}
.inquiry {display: flex; flex-direction: column; gap: 80px; align-items: flex-start; flex:0.85; }
.inquiry-header {display: flex; flex-direction: column; gap: 30px; width: 100%;}
.inquiry-label-line {display: flex; gap: 30px; align-items: center; }
.inquiry-label {font-weight: 700; font-size: var(--font-size18); color: var(--color-primary); line-height: 1.5em; }
.inquiry-line {position: relative; height: 0; width: 492px; }
.inquiry-line img {position: absolute; top: -1px; left: 0; width: 100%; height: 100%; }
.inquiry-title {font-weight: 700; font-size: var(--font-size40); color: #242424; line-height: 1.5em; width: 100%; }
.inquiry-info {display: flex; flex-direction: column; gap: 32px; font-size: var(--font-size18); }
.info-item {display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.info-item:first-child {gap: 12px; }
.info-item:nth-child(n+3) {gap: 8px; }
.info-label {font-size: var(--font-size18); font-weight: 700; color: #242424; line-height: 1.5em; }
.info-text {font-weight: 400; color: #454545; line-height: 1.5em; }
.info-item .btns .btn a { display: flex; width: 174px; height: 48px; border-radius: 24px; align-items: center; justify-content: center; background: linear-gradient(180deg, #E02743 0%, #864695 99.52%); color: #fff; line-height: 1em; font-weight: 600; gap: 22px; }
.info-item .btns .btn.whats a { margin-bottom: 16px; background: #000; gap: 0; justify-content: flex-start;}
.info-item .btns .btn.whats a img { position: relative; left: -10px; }
.info-item .btns .btn.whats a .txt { color: #47c856; font-size: 12px; margin-top: 3px;}
[lang="ja"] .info-item .btns .btn a { font-size: 15px; gap: 15px; line-height: 1.5em; }
[lang="ja"] .info-item .btns .btn.whats a { gap: 0; }
[lang="ja"] .info-item .btns .btn.whats a .txt { margin-top: 0; }
.inquiry-image {border-radius: 20px; overflow: hidden; }

.contact-form-wrap {flex:1;}
.contact-form {display: flex; flex-direction: column; gap: 40px; }
.form-item > label, .form-item > p {display: block; font-size: 16px; font-weight: 600; color: #242424; line-height: 1.5em; margin-bottom: 12px;}
.board-form.contact-form .input {height: 64px; padding: 18px 20px; border: none; border-bottom: 1px solid #555;}
.board-form.contact-form .input::placeholder {font-size: 15px; color: #BFBFBF; font-weight: 600;}
.contact-form .captcha-wrap {height: 64px;}
.contact-form-wrap .form-agree {margin: 40px 0;}
.contact-form-wrap .form-agree h3 {margin-bottom: 25px;}
.form-agree .scroll-box {height: 140px; overflow-y: auto;}
.btn-pack.send-btn {width: 100%; height: 72px; background: #fff; border: 1px solid #DDD; border-radius: 72px; color: #242424; font-size: 18px; font-weight: 500; line-height: 1.66em; transition: all 0.2s ease-in-out;}
.btn-pack.send-btn:hover {background: var(--color-primary); color: #fff; border-color: var(--color-primary);}
.checkbox2 label:before {border-radius: 4px; background: #fff;}

/* customer */
.op-list { display: flex; flex-wrap: wrap; gap: 40px 52px;}
.op-list li { width: calc(100%/4 - 39px); text-align: center; }