@charset "utf-8";
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width: 100% !important; height: 100% !important;}

.page-greeting {gap: 25px clamp(35px, calc( 80 / var(--inner) * 100vw ), 80px);}
.greeting-img {max-width: 640px; width: 45.8%;}
.page-brand {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-30);}
.brand-item {position: relative; width: 100%; padding-bottom: 40.625%;}
.brand-item .img {display: none;}
.brand-item .txt {display: flex; justify-content: center; align-items: center;  position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transform: translate(-50%, -50%);}
.direction-txt ul {display: flex; margin-top: 8px; gap: 5px 20px;}
.direction-txt li {display: flex; align-items: center; gap: 10px;}
.direction-head {display: flex; align-items: flex-end; gap: 20px 35px;}
.btn-kakao {display: flex; align-items: center; gap: 10px; width: fit-content; padding: 12px 20px; border-radius: 8px; background: var(--primary-color); color: #fff;}
.btn-kakao:after {content: ''; display: block; width: 7px; height: 12px; background: url('/images/sub/btn-arrow.svg') no-repeat center center / contain;}
.direction-map {height: clamp(270px, calc( 500 / var(--inner) * 100vw ), 500px);}
.direction-map iframe {width: 100% !important; height: 100% !important;}

.product-view {gap: 25px clamp(35px, calc( 100 / var(--inner) * 100vw ), 100px); margin-bottom: var(--space-100);}
.product-view-photo {position: relative; max-width: 600px; width: 42.86%; height: fit-content;}
.product-view-photo:before {content: ''; display: block; width: 100%; padding-bottom: 85.335%; border: 1px solid #ddd;}
.product-view-photo img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;;}
.product-view-txt .tit p {margin-top: var(--space-15); color: #686868;}
.product-view-txt .tit:after {content: ''; display: block; width: 40px; height: 3px; margin: var(--space-40) 0; background: #ddd;}
.product-view-txt .info {display: flex; flex-direction:column; gap: var(--space-25); flex: 1; margin-bottom: var(--space-40);}
.product-view-txt .info li {display: flex; gap: 8px var(--space-40);}
.product-view-txt .info strong {display: block; width: 130px;}
.view-buttons {display: flex; gap: var(--space-20);}
.view-buttons a.btn-pack {display: flex; justify-content: center; min-width: 230px; padding: var(--space-15); border-radius: 8px; font-size: var(--font-size-18); font-weight: 500; line-height: 1.5em;}
.product-view-detail .tit {padding-bottom: var(--space-20); margin-bottom: var(--space-30); border-bottom: 1px solid #ddd;}
.product-view-detail .tit span {position: relative;}
.product-view-detail .tit span:after {content: ''; position: absolute; left: 0; right: 0; bottom: calc((var(--space-20) + 2px) * -1); height: 1px; background: var(--primary-color);}