/* ----- 기반 -----*/
#wrap {width: 100%; background-color: var(--color-black); position: relative;}
.container {width: 100%;}
.wrapper {max-width: 1200px; margin: 0 auto; padding: 0 4%;}
main {background-color: #ffffff;}





/* ----- header, nav 영역 시작 ----- */
header {width: 100%; border-bottom: 1px solid #eeeeee20; padding: 1.6rem 0; position: absolute; z-index: 9999; background-color: transparent; transition: background-color 0.2s ease;}
.logo {width: 13rem; position: relative;}
.logo-hover {display: none;}
.gnb {position: absolute; transform: translate(-50%, 0); height: 100%; top: 0; left: 50%;}
.gnb ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 5rem; height: 100%;}
.gnb ul li {height: 100%; display: grid; align-items: center;}
.gnb ul li a {padding: 1rem; font-size: clamp(14px, 2vw, 1.6rem); font-weight: 500; color: #ffffff; transition: color 0.2s ease;}
.lnb-tit {transition: color 0.2s ease;}
.lnb {padding: 3rem 0; background-color: transparent; transition: background-color 0.2s ease; display: none;}
.lnb ul li a {color: #000000;}
.btn-menu {display: none;}
.menu-line span {display: block; width: 4rem; height: 0.3rem; border-radius: 1rem; background-color: #fff; transition: transform 0.3s ease;}
@media only screen and (min-width:961px){
    .lnb {position: absolute; transform: translate(-50%, 0); top: calc(100% + 1px); left: 50%; width: 100vw;}
}
/* nav 호버 시 gnb 변경 */
header:has(.gnb:hover) .lnb {background-color: #ffffff;}
header:has(.gnb:hover) .gnb ul li > a,
header:has(.gnb:hover) .gnb ul li > .lnb-tit {color: #000000;}
header:has(.gnb:hover) .gnb ul li:hover > .lnb-tit,
header:has(.gnb:hover) .lnb ul li a:hover {font-weight: 600; color: #0096d6;}
header:has(.gnb:hover) .gnb > ul > li:hover {border-bottom: 1px solid #0096d6;}
.gnb > ul > li:hover {background: linear-gradient(#0096d6, #0096d6) left bottom / 100% 1px no-repeat;}
@media only screen and (min-width:961px){
    header:has(.gnb:hover) {background-color: #ffffff; border-bottom-color: #eeeeee;}
    header:has(.gnb:hover) .logo-leave {transition: 0.2s ease; display: none;}
    header:has(.gnb:hover) .logo-hover {transition: 0.2s ease; display: block;}
}
@media only screen and (max-width:960px){
    /* nav 햄버거 메뉴 */
    header .wrapper {display: flex; flex-wrap: wrap; justify-content: space-between;}
    .gnb {width: 50rem; height: 100%; padding-top: 10rem; display: block; background-color: #ffffff; transform: translateX(100%); transition: transform .28s ease-out; position: fixed; top: 0; right: 0; left: unset;}
    .gnb.active {transform: translateX(0) !important;}
    .gnb ul {height: unset; gap: unset;}
    .gnb > ul > li {width: 100% !important; text-align: center; border-bottom: 1px solid #eeeeee;}
    .gnb > ul > li:first-child {border-top: 1px solid #eeeeee;}
    .gnb > ul > li > a {padding: 5rem; font-size: 16px !important; color: #000000;}
    .lnb {padding: 0 0 3rem;}
    .lnb ul li {width: 100%;}
    .lnb ul li a {padding: 2rem; font-size: 16px !important;}
    .btn-menu {display: grid; align-items: center; cursor: pointer;}
    .btn-menu.active .menu-line span {background-color: #000000;}
    .btn-menu.active .line-top {transform: rotate(135deg) translate(0.2rem, 0);}
    .btn-menu.active .line-off {display: none;}
    .btn-menu.active .line-bottom {transform: rotate(-135deg) translate(0.2rem, 0);}
    .line-off {margin: 0.8rem 0;}
    body.scroll-lock {overflow: hidden; height: 100%;}
}
@media only screen and (max-width:499px){
    .gnb {width: 100%;}
}
/* ----- header, nav 영역 시작 끝 ----- */





/* ----- hero 영역 시작 ----- */
/* 백그라운드 영상 */
.hero-bg {width: 100%;}
.hero-bg::before {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 1;}
.hero-bg video {width: 100%; height: 100%; object-fit: cover; position: absolute;}
/* 컨텐츠 영역 */
.hero-area {position: relative; z-index: 1;}
.hero-tit {padding-top: 25rem; text-align: center;}
.hero-tit strong {font-size: 6rem; font-weight: 700; color: #ffffff; line-height: 1.3;}
.hero-tit p {margin-top: 3rem; font-size: 2.4rem; color: #ffffff;}
.hero-list {margin: 14rem 0 10rem;}
.hero-list ul {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 0;}
.hero-list ul li {position: relative; overflow: hidden; width: calc((100% - 6rem) / 4); border-radius: 1rem; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.hero-list ul li::before {content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(140deg, #4592e8 0%, #4cbae6 45%, #6a4df4 100%); opacity: 0; transition: 0.2s;}
.hero-list ul li:hover::before {opacity: 0.5;}
.hero-list ul li::after {content: ""; position: absolute; inset: 0; padding: 1px; /* 보더 두께 */ border-radius: inherit; background: linear-gradient(140deg, #ffffff50 0%, #ffffff00 45%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1;}
.hero-list ul li a {position: relative; z-index: 1; width: 100%; height: 100%; padding: 4rem 1rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.hero-list ul li figure {width: 8rem; margin: 0 auto;}
.hero-list ul li strong {display: inline-block; margin: 2rem 0 1rem; font-size: 2rem; font-weight: 700; color: #ffffff;}
.hero-list ul li p {font-size: clamp(14px, 2vw, 1.6rem); color: #ffffff;}
@media only screen and (max-width:960px){
    .hero-list ul li {width: calc((100% - 2rem) / 2);}
}
@media only screen and (max-width:499px){
    .hero-list ul li {width: calc((100% - 1rem) / 2);}
    .hero-list ul li p br {display: none;}
}
/* ----- hero 영역 끝 ----- */





/* ----- company 영역 시작 ----- */
/* 타이틀 영역 */
.visual-area .wrapper {max-width: unset; padding: 0;}
.visual-company {background: url(../images/company_bg.jpg) center / cover no-repeat;}
.visual-business {background: url(../images/business_bg.jpg) center / cover no-repeat;}
.visual-product {background: url(../images/product_bg.jpg) center / cover no-repeat;}
.visual-contact {background: url(../images/contact_bg.jpg) center / cover no-repeat;}
.visual-privacy {background: url(../images/privacy_bg.jpg) center / cover no-repeat;}
.tit-area {position: relative; padding: 17rem 0; z-index: 2;}
.tit-area::before {content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);}
.tit-text {position: relative; z-index: 1;}
.tit-text h2 {font-size: 4.0rem; font-weight: 700; color: #ffffff; text-align: center; display: none;}
.tit-text h2.active {display: block;}
.tit-tab-menu {width: 100%; padding: 2rem 0; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(12px); position: absolute; bottom: 0;}
.tit-tab-menu ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 6rem;}
.tit-tab-menu ul li {font-size: 1.8rem; color: #aaaaaa; transition: color 0.2s ease; cursor: pointer;}
.tit-tab-menu ul li:hover {color: #ffffff; font-weight: 600;}
.tit-tab-menu ul .active {color: #ffffff; font-weight: 600;}

/* 회사소개 */
.tab-area {background-color: #ffffff; position: relative;}
.tab-area > article {width: 100%; padding: 10rem 0; display: none;}
.tab-area > article.active {display: block;}
.information-about h3 {font-size: 4.0rem; font-weight: 700;}
.information-about p {margin-top: 2rem; font-size: clamp(14px, 2vw, 1.6rem);}
.information-list {margin-top: 5rem;}
.information-list ul {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 0;}
.information-list ul li {width: 23.4%; aspect-ratio: 28/37; padding: 2.5rem; box-sizing: border-box; border-radius: 1rem; display: flex; align-items: flex-end;}
.list-bg-01 {background: url(../images/company_01.jpg) center / cover no-repeat;}
.list-bg-02 {background: url(../images/company_02.jpg) center / cover no-repeat;}
.list-bg-03 {background: url(../images/company_03.jpg) center / cover no-repeat;}
.list-bg-04 {background: url(../images/company_04.jpg) center / cover no-repeat;}
.list-text span {font-size: 2.4rem; font-weight: 700; color: #ffffff;}
.list-text p {font-size: clamp(13px, 2vw, 1.4rem); color: #ffffff;}
@media only screen and (max-width:1299px){
    .list-text p br{display: none;}
}
@media only screen and (max-width:960px){
    .information-list ul li {width: calc((100% - 2rem) / 2);}
}
@media only screen and (max-width:499px){
    .information-list ul li {width: calc((100% - 1rem) / 2); aspect-ratio: 28 / 42; padding: 2rem;}
}
/* 연혁 */
.history {padding-top: 0 !important;}
.history .wrapper {max-width: unset; padding: 0;}
.history-about {padding: 5rem 4%; background: #071a39 url(../images/history_bg.png) right / cover no-repeat;}
.history-tit {max-width: 1200px; margin: 0 auto; padding: 4.5rem 8rem; box-sizing: border-box; border-radius: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);}
.history-tit::before {content: ""; width: 100%; height: 100%; position: absolute; background-color: #071a3910; top: 0; left: 0; z-index: -1;}
.history-tit::after {content: ""; position: absolute; inset: 0; padding: 1px; /* 보더 두께 */ border-radius: inherit; background: linear-gradient(80deg, #ffffff60 0%, #ffffff00 20%, #ffffff60 50%, #ffffff00 80%, #ffffff60 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 1;}
.history-tit dl {width: calc((100% - 3rem) / 2); display: flex; flex-wrap: nowrap;}
.history-tit dt {font-size: 1.8rem; font-weight: 600; color: #ffffff;}
.history-tit dd {padding-left: 6rem; font-size: clamp(14px, 2vw, 1.6rem); color: #ffffff; position: relative;}
.history-tit dd::before {content: "|"; font-size: 1.3rem; font-weight: 100; position: absolute; top: 0.5rem; left: 3rem;}
.history-tit .longwords {padding-left: 4.5rem;}
.history-tit .longwords::before {left: 1.5rem;}
.history-tab-menu {padding: 8rem 0 4rem;}
.history-tab-menu ul {display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem;}
.history-tab-menu ul li {max-width: 28.2rem; width: 30%; box-sizing: border-box; padding: 1.75rem; border-radius: 1rem; background-color: #e5e5e5; font-size: 2.0rem; color: #aaaaaa; text-align: center; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer;}
.history-tab-menu ul li:hover {background-color: #0096d6; font-weight: 600; color: #ffffff;}
.history-tab-menu .active {background-color: #0096d6; font-weight: 600; color: #ffffff;}
.history-list {max-width: 1200px; margin: 0 auto; padding: 0 4%;}
.history-detail {padding: 0 6%; position: relative;}
.history-detail::before {content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 100%; background: linear-gradient(transparent 0%, #0096d6 1%, #0096d6 50%, #0096d6 99%, transparent 100%);}
.history-detail ul {padding: 6rem 0; display: none; flex-direction: column; gap: 6rem; /* 연도 간 고정 간격 */ position: relative;}
.history-detail .active {display: flex;}
.history-item {display: grid; grid-template-columns: 1fr 8rem 1fr; align-items: start; position: relative;}
.history-item strong {display: inline-block; margin-bottom: 2rem; font-size: 6.0rem; font-weight: 700; color: #0096d6; line-height: 0.8;}
.history-item p {font-size: clamp(14px, 2vw, 1.6rem); line-height: 1.7;}
.history-item img {border-radius: 1rem;}
.history-item::before {content: ""; position: absolute; transform: translateX(-50%); top: 0; left: 50%; width: 1rem; height: 1rem; border-radius: 1rem; background-color: #0096d6;}
.history-img {max-width: 48.2rem; width: 100%; height: 10rem; grid-column: 1;}
.history-img::before {content: unset !important;}
.history-text {grid-column: 3;}
.history-item.reverse .history-text {grid-column: 1; text-align: right; padding-left: 0; padding-right: 3rem;}
.history-item.reverse .history-img {grid-column: 3;}
@media only screen and (max-width:960px){
    .history-about {background: #071a39 url(../images/history_bg_mo.png) left / cover no-repeat;}
    .history-tit {padding: 4.5rem 5%; justify-content: left;}
    .history-tit dl {width: 100%;}
    .history-tit dd {padding-left: 5.5rem;}
    .history-tit dd::before {left: 3rem;}
    .history-tit .longwords {padding-left: 4rem;}
    .history-tit .longwords::before {left: 1.5rem;}
    .history-detail::before {left: 2%;}
    .history-item {display: block;}
    .history-item::before {left: -4.5%;}
    .history-img {display: none;}
    .history-text {text-align: left !important; padding: 0 0 0 3%!important;}
}
@media only screen and (max-width:499px){
    .history-tab-menu ul {gap: 1rem;}
    .history-tab-menu ul li {width: 45%;}
}
/* 조직현황 */
.organization-about {position: relative;}
.organization-tit {width: 25%; height: 8rem; margin: 0 auto; padding: 1.5rem; box-sizing: border-box; border-radius: 1rem; background-color: #0c1941; text-align: center; position: relative;}
.organization-tit span {font-size: clamp(14px, 2vw, 1.6rem); color: #ffffff; display: block; line-height: 1;}
.organization-tit strong {font-size: 2.4rem; font-weight: 600; color: #ffffff;}
.organization-list {margin-top: 5rem;}
.organization-list figure {width: 3rem;}
.organization-text {width: 19%; height: 6rem; margin-left: 60.8%; padding: 1.5rem; box-sizing: border-box; border: 1px solid #091231; border-radius: 1rem; background-color: #ffffff; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; position: relative;}
.organization-text strong {font-size: 2.0rem; font-weight: 600;}
.organization-detail {margin-top: 5rem; padding-top: 5rem; display: flex; flex-wrap: wrap; justify-content: space-between; position: relative;}
.organization-detail ul {width: 19%; position: relative;}
.organization-detail ul li {width: 100%; height: 6rem; margin-top: 2rem; padding: 1.5rem 0; box-sizing: border-box; border: 1px solid #125584; border-radius: 1rem; background-color: #125584; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;}
.organization-detail ul li:first-child {border: 1px solid #091231; background-color: #ffffff;}
.organization-detail ul li strong {font-size: 2.0rem; font-weight: 600; color: #ffffff;}
.organization-detail ul li:first-child strong {color: #0c1941;}
.organization-detail ul li span {width: 100%; font-size: clamp(13px, 2vw, 1.4rem); color: #ffffff; line-height: 1; text-align: center;}
.organization-sales {padding: 0.7rem !important; gap: unset !important;}
.organization-sales strong {line-height: 1.2;}
/* 조직도 라인 */
.organization-about::before {content: ""; position: absolute; transform: translateX(-50%); left: 50%; width: 1px; height: 24rem; background-color: #0c1941;}
@media only screen and (min-width:961px){
    .organization-text::before {content: ''; position: absolute; transform: translateY(-50%); top: 50%; right: 100%; width: 57%; height: 1px; border-top: 1px dashed #091231;}
    .organization-detail::before {content: ""; position: absolute; transform: translateX(-50%); top: 0; left: 50%; width: 81%; height: 1px; background-color: #0c1941;}
    .organization-detail ul::before {content: ""; position: absolute; transform: translateX(-50%); top: -5rem; left: 50%; width: 1px; height: 7rem; border-left: 1px dashed #091231;}
}
@media only screen and (max-width:960px){
    .organization-about::before {height: 100%;}
    .organization-tit {max-width: 50rem; width: 80%;}
    .organization-text {max-width: 50rem; width: 80%; margin: 0 auto;}
    .organization-detail {margin: unset; padding: unset; display: block;}
    .organization-detail ul {max-width: 50rem; width: 80%; margin: 0 auto;}
    .organization-detail ul li:first-child {margin-top: 5rem;}
}
/* 오시는길 */
.location-about {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5rem;}
.location-text h3 {font-size: 3.6rem; font-weight: 700;}
.location-text p {margin-top: 2rem; font-size: clamp(14px, 2vw, 1.6rem);}
.location-text span {margin-right: 1rem; font-size: clamp(14px, 2vw, 1.6rem);}
.location-text span::before {content: "•"; font-size: 2rem; color: #0096d6; margin-right: 5px;}
.location-contact {margin-top: 3rem;}
.location-contact ul {display: flex; flex-wrap: wrap; gap: 3rem;}
.location-contact ul li {display: flex; flex-wrap: wrap; gap: 1rem;}
.location-contact ul li figure {width: 2rem;}
.location-contact ul li span {font-size: clamp(14px, 2vw, 1.6rem);}
.location-branch {margin-top: 6rem;}
.location-branch ul {display: grid; gap: 2rem;}
.location-branch ul li {width: 28rem; border: 1px solid #0096d6; border-radius: 1rem; padding: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;}
.location-branch ul li figure {width: 1.5rem; padding-top: 0.5rem;}
.location-branch ul li strong {font-size: 2.0rem; font-weight: 700; color: #0096d6;}
.location-branch ul li span {width: 100%; font-size: clamp(14px, 2vw, 1.6rem); text-align: center;}
.location-map {width: calc(100% - 41rem); max-height: 47rem; aspect-ratio: 1 / 0.8;}
#naverMap {width: 100%; height: 100%;}
@media only screen and (max-width:960px){
    .location-tit {width: 100%;}
    .location-map {width: 100%;}
    .location-branch ul {display: flex;}
    .location-branch ul li {width: calc((100% - 2rem) / 2);}
}
@media only screen and (max-width:499px){
    .location-branch ul {gap: 1rem;}
    .location-branch ul li {width: calc((100% - 1rem) / 2);}
}
/* ----- company 영역 끝 ----- */





/* ----- business 영역 시작 ----- */
/* 사업소개 */
.business {padding: 10rem 0 0 !important;}
.business .wrapper {max-width: unset; padding: 0;}
.business-about {max-width: 1200px; margin: 0 auto; padding: 0 4%;}
.business-about h3 {font-size: 4.0rem; font-weight: 700;}
.business-about p {margin-top: 2rem; font-size: clamp(14px, 2vw, 1.6rem);}
.business-about picture {display: flex; width: 100%;}
.business-about img {max-width: 90rem; width: 100%; margin: 7rem auto 9rem;}
.business-list {padding: 10rem 0; background-color: #f4f4f4;}
.business-tit {max-width: 1200px; margin: 0 auto; padding: 0 4%;}
.business-tit h3 {font-size: 4.0rem; font-weight: 700;}
.business-tit p {margin-top: 2rem; font-size: clamp(14px, 2vw, 1.6rem);}
.business-detail {max-width: 1200px; margin: 6rem auto 0; padding: 0 4%;}
.business-detail ul {display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch;}
.business-detail ul li {flex: 0 0 calc((100% - 4rem) / 3); display: flex; flex-direction: column;}
.business-bg-01 {background: url(../images/business_01.jpg) center / cover no-repeat; aspect-ratio: 1 / 0.55; border-radius: 1rem 1rem 0 0; flex: 0 0 auto;}
.business-bg-02 {background: url(../images/business_02.jpg) center / cover no-repeat; aspect-ratio: 1 / 0.55; border-radius: 1rem 1rem 0 0; flex: 0 0 auto;}
.business-bg-03 {background: url(../images/business_03.jpg) center / cover no-repeat; aspect-ratio: 1 / 0.55; border-radius: 1rem 1rem 0 0; flex: 0 0 auto;}
.business-bg-04 {background: url(../images/business_04.jpg) center / cover no-repeat; aspect-ratio: 1 / 0.55; border-radius: 1rem 1rem 0 0; flex: 0 0 auto;}
.business-bg-05 {background: url(../images/business_05.jpg) center / cover no-repeat; aspect-ratio: 1 / 0.55; border-radius: 1rem 1rem 0 0; flex: 0 0 auto;}
.business-bg-06 {background: url(../images/business_06.jpg) center / cover no-repeat; aspect-ratio: 1 / 0.55; border-radius: 1rem 1rem 0 0; flex: 0 0 auto;}
.business-text {padding: 3rem; border-radius: 0 0 1rem 1rem; background-color: #ffffff; flex: 1;}
.business-text strong {display: inline-block; width: 100%; margin-bottom: 1rem; font-size: 2.4rem; font-weight: 700;}
.business-text p {font-size: clamp(13px, 2vw, 1.4rem); line-height: 1.7;}
.business-text p span {display: inline-block; width: 10.5rem; max-width: 100px; font-weight: 700; color: #0096d6; position: relative;}
.business-text p span::after {content: "|"; position: absolute; top: 2px; right: 1rem; font-size: 12px; font-weight: 500; color: #aaaaaa;}
.width-space .business-text p span {width: 7rem; max-width: 70px;}
@media only screen and (max-width:960px){
    .business-detail ul li {flex: 0 0 calc((100% - 2rem) / 2);}
    .business-text p span {width: 11.5rem;}
}
@media only screen and (max-width:499px){
    .business-detail ul li {flex: 100%;}
}
/* 주요 고객사 */
.customer-tit {padding: 8rem 0 2.5rem;}
.customer-detail:first-child .customer-tit{padding-top: 0;}
.customer-tit h3 {font-size: 2.4rem; font-weight: 700;}
.customer-item ul {display: flex; flex-wrap: wrap; gap: 2rem 2%;}
.customer-item ul li {width: calc(23.5% - 2px); border: 1px solid #dddddd; border-radius: 1rem;}
@media only screen and (max-width:960px){
    .customer-item ul li {width: calc(32% - 2px);}
}
@media only screen and (max-width:680px){
    .customer-item ul li {width: calc(48.5% - 2px);}
}
/* ----- business 영역 끝 ----- */





/* ----- product 영역 시작 ----- */
.product-list ul {display: flex; flex-wrap: wrap; gap: 2rem; align-items: stretch;}
.product-list ul li {border: 1px solid #dddddd; border-radius: 1rem; flex: 0 0 calc(31.5% - 2px); display: flex; flex-direction: column;}
.product-detail {padding: 2rem; border-radius: 0 0 1rem 1rem; background-color: #ffffff; display: flex; flex-direction: column; flex: 1;}
.product-tit strong {display: inline-block; width: 100%; margin-bottom: 1rem; font-size: 2.4rem; font-weight: 700;}
.product-tit strong span {display: inline-block; margin-top: 1rem; font-size: clamp(13px, 2vw, 1.4rem); font-weight: 500;}
.product-text {display: flex; flex-wrap: wrap; margin-bottom: 2rem;}
.product-text span {display: inline-block; width: 7rem; font-size: clamp(13px, 2vw, 1.4rem); font-weight: 700; line-height: 2;}
.printer .product-text span {width: 9.5rem;}
.printer .product-text p {width: calc(100% - 9.5rem);}
.product-text p {width: calc(100% - 7rem); font-size: clamp(13px, 2vw, 1.4rem); line-height: 2;}
.product-btn {margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center;}
.btn-more {display: inline-block; width: 45%; padding: 0.7rem; border: 1px solid #0096d6; border-radius: 0.6rem; background-color: #0096d6; font-size: clamp(14px, 2vw, 1.6rem); font-weight: 600; color: #ffffff; text-align: center;}
.btn-more.btn-blue {background-color: #ffffff; color: #0096d6; display: none;}
.product-bg {background: #f6f6f6; aspect-ratio: 1 / 0.62; border-radius: 1rem 1rem 0 0; display: flex; align-items: center;}
.product-bg figure {width: 63%; margin: 0 auto;}
@media only screen and (max-width:960px){
    .product-list ul li {flex: 0 calc(48.5% - 2px);}
}
@media only screen and (max-width:600px){
    .product-list ul li {flex: 100%;}
    .btn-more {width: 43%; padding: 1rem;}
}
/* ----- product 영역 끝 ----- */





/* ----- contact 영역 시작 ----- */
.contact-about h3 {font-size: 4.0rem; font-weight: 700;}
.contact-about p {margin-top: 2rem; font-size: clamp(14px, 2vw, 1.6rem);}
.contact-detail {margin-top: 4rem; display: flex; flex-wrap: wrap; gap: 2rem;}
.contact-detail input {width: calc((100% - 2rem) / 2); border: 1px solid #dddddd; border-radius: 1rem; padding: 1.2rem 2rem; box-sizing: border-box; font-size: clamp(14px, 2vw, 1.6rem); color: #aaaaaa;}
.contact-detail input::placeholder {font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; color: #aaaaaa;}
.contact-category {margin: 2rem 0; border-radius: 1rem; padding: 3rem; background-color: #212237; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 4rem;}
.contact-category label {display: inline-flex; align-items: center; gap: 1rem; font-size: clamp(14px, 2vw, 1.6rem); color: #ffffff;}
.contact-text textarea {width: 100%; height: 14rem; border: 1px solid #dddddd; border-radius: 1rem; padding: 2rem; box-sizing: border-box; resize: none; font-size: clamp(14px, 2vw, 1.6rem);}
.contact-text textarea::placeholder {font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif; color: #aaaaaa;}
.privacy-detail {max-height: 22rem; overflow-y: auto; margin-top: 2rem; border-radius: 1rem; padding: 3rem; box-sizing: border-box; background-color: #f4f4f4;}
.privacy-tit strong {font-size: clamp(14px, 2vw, 1.6rem); font-weight: 600;}
.privacy-text ul li {margin-top: 3rem;}
.privacy-text ul li strong {font-size: clamp(13px, 2vw, 1.4rem); font-weight: 600;}
.privacy-text ul li p {margin-top: 0.5rem; font-size: clamp(13px, 2vw, 1.4rem); line-height: 1.7;}
.privacy-text ul li span {display: inline-block; width: 100%; font-size: clamp(13px, 2vw, 1.4rem);}
.privacy-text ul li span::before {content: "•"; font-size: 1.8rem; margin-right: 0.5rem; position: relative; top: 1px;}
.privacy-agree {margin-top: 2rem;}
.privacy-agree label {display: inline-flex; align-items: center; gap: 1rem; font-size: clamp(14px, 2vw, 1.6rem);}
.privacy-btn {margin-top: 4rem; text-align: center;}
.btn-info {max-width: 22rem; width: 45%; padding: 1.2rem; border: 1px solid #0096d6; border-radius: 1rem; background-color: #0096d6; font-size: 2.0rem; font-weight: 700; color: #ffffff; transition: background-color 0.2s ease, color 0.2s ease; cursor: pointer;}
.btn-info:hover {background-color: #ffffff; color: #0096d6;}
@media only screen and (max-width:960px){
    .contact-detail input {width: 100%;}
}
@media only screen and (max-width:499px){
    .contact-detail {gap: 1.5rem;}
}
/* ----- contact 영역 끝 ----- */





/* ----- privacy 영역 시작 ----- */
.privacy-about h3 {font-size: 4.0rem; font-weight: 700;}
.privacy .privacy-detail {max-height: 55rem; margin-top: 4rem;}
/* ----- privacy 영역 끝 ----- */





/* footer 영역 시작 */
footer {width: 100%; padding: 3rem 0; position: relative; bottom: 0; background-color: #4c4c4c; z-index: 2;}
footer .wrapper {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem;}
.footer-information ul li {font-size: clamp(13px, 2vw, 1.4rem); color: #aaaaaa; line-height: 1.7;}
.footer-information ul li a {font-size: clamp(13px, 2vw, 1.4rem); color: #aaaaaa; text-decoration-line: underline;}
.footer-contact {text-align: right;}
.footer-contact ul li,
.footer-contact ul li a {font-size: clamp(13px, 2vw, 1.4rem); color: #aaaaaa;}
.contact-number {font-size: 2.0rem !important; font-weight: 700;}
@media only screen and (max-width:960px){
    .footer-contact {width: 100%; text-align: left;}
}
/* footer 영역 끝 */