@charset "utf-8";
/* 서브공통 */


/********************* (주)코리아그린 *********************/
/* 인사말 */
.greeting .box {display: flex; gap: var(--space-50); align-items: flex-start;}
.greeting .main {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-50);}
.greeting .intro {font-size: var(--font-size-36); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: var(--color-sub);}
.greeting .intro .primary {color: var(--color-primary);}
.greeting .block {display: flex; flex-direction: column; gap: var(--space-40); color: #505050;}
.greeting .lead {font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em;}
.greeting .lead p {margin-bottom: 0;}
.greeting .txt {font-size: var(--font-size-20); font-weight: 400; line-height: 1.7em; letter-spacing: -0.02em;}
.greeting .txt p {margin-bottom: 0;}
.greeting .block .txt {display: flex; flex-direction: column; gap: var(--space-30);}
.greeting .sign {display: flex; gap: var(--space-28); align-items: center;}
.greeting .sign .role {font-size: var(--font-size-16); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em; color: var(--color-sub);}
.greeting .sign .name {width: 129px;}
.greeting .aside {flex-shrink: 0; display: flex; gap: var(--space-16); align-items: flex-end;}
.greeting .v-text {writing-mode: vertical-rl; transform: rotate(180deg); font-size: var(--font-size-15); font-weight: 400; letter-spacing: 0.3em; color: #ccc; padding-top: var(--space-24); width: 24px; text-align: center;}
.greeting .img {position: relative; width: clamp(300px, calc(584 / var(--inner) * 100vw), 584px); max-width: 100%; }

/* 찾아오시는 길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 520px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}

.location-section .map {margin-bottom: var(--space-60); border-radius: var(--radius-24); overflow: hidden;}
.lct-info-wrap .lct-cont {flex: 1;}
.lct-info-wrap .lct-cont h3 {font-size: var(--font-size-36); font-weight: 600; line-height: 1.388em; color: var(--color-sub); margin-bottom: var(--space-16);}
.lct-info-wrap .lct-cont .addr {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; color: var(--color-sub);}
.lct-info-wrap .lct-info {flex: 1;}
.lct-info-wrap .lct-info dl {display: flex; align-items: center; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em;  padding: var(--space-30) 0; border-bottom: 1px solid #DFDFDF;}
.lct-info-wrap .lct-info dl:first-child {border-top: 1px solid #DFDFDF;}
.lct-info-wrap .lct-info dt {display: flex; align-items: center; color: #A8A8A8;}
.lct-info-wrap .lct-info dt .icon {width: 40px;}
.lct-info-wrap .lct-info dt .lct-tit {width: 100px; padding: 0 20px; text-align: center;}
.lct-info-wrap .lct-info dd {font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; color: var(--color-sub);}

/********************* 제품소개 *********************/
/* 탭 */
.product-section .business-tab {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; list-style: none; margin-bottom: var(--space-100); padding: 0;}
.product-section .business-tab li a {display: flex; align-items: center; justify-content: center; padding: var(--space-14) var(--space-24); border-radius: 500px; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; text-decoration: none; background: #f1f1f1; color: #a8a8a8;}
.product-section .business-tab li.active a {background: var(--color-primary); color: #fff;}

/* 리스트 */
.product-section .gallery-list {padding-top: 50px; border-bottom: none;}
.product-section .gallery-list ul {margin: 0 -12px;}
.product-section .gallery-list ul li {width: 25%; padding: 0 12px; margin-bottom: var(--space-60);}
.product-section .gallery-list ul li .thumb {position: relative; padding-bottom: 100%; display: block; margin-bottom: var(--space-24); overflow: hidden; background: #fff;}
.product-section .gallery-list ul li .thumb:after {border: 1px solid #eee; border-radius: var(--radius-24); transition: 0.1s;}
.product-section .gallery-list ul li .thumb img {position: absolute; left: 50%; top: 50%; object-fit: contain; transform: translate(-50%, -50%); width: 100%; height: auto !important; max-width: 73%; min-height: 71%;}
.product-section .gallery-list ul li a {text-align: left;}
.product-section .gallery-list ul li .cate {font-size: var(--font-size-16); font-weight: 500; line-height: 1.5em; color: #A8A8A8; margin-bottom: 6px;}
.product-section .gallery-list ul li .name {font-size: var(--font-size-24); font-weight: 600; line-height: 1.666em; color: var(--color-sub);}
.product-section .gallery-list ul li a:hover .cate {color: var(--color-primary);}
.product-section .gallery-list ul li a:hover .name {color: var(--color-primary);}
.product-section .gallery-list ul li a:hover .thumb:after {border: 3px solid var(--color-primary);}
.product-section .paginate {margin-top: 20px;}

/* 상세페이지 */
.product-view .box {display: flex; flex-direction: column; gap: var(--space-50);}
.product-view .head {border-bottom: 3px solid var(--color-sub); padding-bottom: var(--space-60); display: flex; flex-direction: column; gap: var(--space-24);}
.product-view .path {display: flex; align-items: center; gap: 14px;}
.product-view .path .cate {font-size: var(--font-size-18); font-weight: 500; line-height: 1.556em; letter-spacing: -0.02em; color: var(--color-primary);}
.product-view .path .bar {width: 1px; height: 10px; background: #dfdfdf;}
.product-view .path .parent {font-size: var(--font-size-18); font-weight: 500; line-height: 1.556em; letter-spacing: -0.02em; color: #a8a8a8;}
.product-view .head .tit {font-size: var(--font-size-42); font-weight: 600; line-height: 1.333em; letter-spacing: -0.02em; color: var(--color-sub); margin: 0;}
.product-view .body {display: flex; gap: var(--space-100); align-items: stretch;}
.product-view .body .img {position: relative; width: clamp(300px, calc(580 / var(--inner) * 100vw), 580px); max-width: 100%; height: clamp(300px, calc(580 / var(--inner) * 100vw), 580px); }
.product-view .body .img:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid #dfdfdf; border-radius: var(--radius-24); }
.product-view .body .img > div {position: relative; padding-bottom: 100%; display: block; overflow: hidden; background: #fff;}
.product-view .body .img img {position: absolute; left: 50%; top: 50%; object-fit: contain; transform: translate(-50%, -50%); width: 100%; height: auto !important; max-width: 65.5%; min-height: 87%;}
.product-view .info {flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between;}
.product-view .list {margin: 0; display: flex; flex-direction: column; gap: 0;}
.product-view .list .row {display: flex; align-items: flex-start; padding: var(--space-40) 0; border-bottom: 1px solid #eee;}
.product-view .list .row dt {flex: 0 0 140px; font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.02em; color: var(--color-sub); margin: 0;}
.product-view .list .row dd {flex: 1 1 0; min-width: 0; font-size: var(--font-size-20); font-weight: 400; line-height: 1.7em; letter-spacing: -0.02em; color: #505050; margin: 0;}
.product-view .btn-wrap {margin: var(--space-50) 0;}
.product-view .btn {display: inline-flex; align-items: center; justify-content: center; padding: var(--space-16) var(--space-40); border: 1px solid var(--color-sub); border-radius: 500px; font-size: var(--font-size-18); font-weight: 600; line-height: 1.778em; letter-spacing: -0.02em; color: #505050; text-decoration: none;}
.product-view .btn:hover {background: var(--color-sub); color: #fff;}

.product-view .detail-sec {display: flex; flex-direction: column; gap: var(--space-40); margin-top: var(--space-50);}
.product-view .detail-sec .tit {font-size: var(--font-size-36); font-weight: 600; line-height: 1.389em; letter-spacing: -0.02em; color: var(--color-sub); margin: 0;}
.product-view .detail-area {width: 100%; margin-bottom: var(--space-60);}
.product-view .detail-sec .btn-wrap.center {text-align: center;}

.product-view .fr-view table td, .product-view .fr-view table th {padding: 10px;}

/********************* 포토갤러리 *********************/
/********************* 고객센터 *********************/