@charset "utf-8";
.dot-list li {text-indent: -0.5em; padding-left: .5em;}
.dot-list li:not(:last-child) {margin-bottom: 5px;}
.dot-list li:before {content: '•'; margin-right: 5px; font-weight: 700;}
.dot-list.type2 li:before {color: var(--primary-color);}
.page-greeting {gap: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px);}
.greeting-img {max-width: 450px; width: 32.5%;}
.greeting-txt h3 {position: relative; width: fit-content;}
.greeting-txt h3:before, .greeting-txt h3:after {position: absolute; content: '“'; font-size: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px); font-family: 'Netmarble'; color: #ddd; line-height: 1em;}
.greeting-txt h3:before { top: 0; right: calc(100% + 10px);}
.greeting-txt h3:after {bottom: 0; left: calc(100% + 10px); transform: scale(-1);}
.direction-txt li {display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-20);}
.direction-map {max-width: 900px; width: 65%; height: clamp(270px, calc( 450 / var(--inner) * 100vw ), 450px);}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.direction-map iframe {width: 100% !important; height: 100% !important;}
.contact-wrap {gap: 30px 35px;}
.contact-wrap .info {margin-top:70px;}
.contact-wrap .info dl {margin-bottom:14px; display:flex;}
.contact-wrap .info dl:last-child {margin-bottom:0;}
.contact-wrap .info dl dt {min-width:36px;}
.contact-wrap .info dl dt svg {vertical-align:middle;}
.contact-wrap .info dl dt dd {letter-spacing:0; color:#454545; font-weight:400; line-height:1.5em;}
.contact-wrap form {width: 53%; max-width: 732px;}
.contact-wrap .form .required {font-style:normal; color:var(--secondary-color); font-weight:600;}
.contact-wrap .form .inner {display:flex; flex-wrap:wrap; margin:-10px;}
.contact-wrap .form .col {width:50%; padding:10px;}
.contact-wrap .form .col.col-x2 {width:100%;}
.contact-wrap .form label {display: block; margin-bottom: var(--space-10); font-weight: 600; color: var(--dark-color);}
.contact-wrap .form .input {width:100%;border-radius:6px;}
.contact-wrap .form textarea.input {height:235px;}
.contact-wrap .submit-area {margin-top:25px; display:flex; justify-content:space-between; align-items:center;}
.contact-wrap .submit-area .form-agree {margin:0;}
.contact-wrap .submit-area .check {margin:0;}
.contact-wrap .submit-area .submit {margin-left:20px;}
.contact-wrap .submit-area .submit button {display:inline-flex; align-items:center; justify-content:space-between; padding:0 30px; height:46px; min-width:165px; letter-spacing:0; line-height:1.5em; color:#454545; border-radius:23px; border:1px solid #ddd; background:#fff; transition:.2s;}
.contact-wrap .submit-area .submit button:after {transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); content:'↑'; font-weight:700;}
.contact-wrap .submit-area .submit button:hover {background:#1d60b6; border-color:#1d60b6; color:#fff;}

.page-product {display: flex; flex-direction: column; gap: var(--space-80);}
.page-product .intro-body {gap: 40px;}
.page-product .patent-badge {flex-shrink: 0;}
.page-product .patent-badge .img {width: 124px; line-height: 0;}
.page-product .patent-badge .img img {width: 100%; height: auto; aspect-ratio: 124 / 153; object-fit: contain;}
.page-product .patent-list {gap: 14px; min-width: 0;}
.page-product .patent-item {gap: var(--space-20);}
.page-product .patent-item .num {color: #999999;  flex-shrink: 0;}
.page-product .patent-line {height: 1px; background: #DDDDDD;}
.page-product .showcase .img {position: relative; border-radius: var(--radius-24); overflow: hidden;}
.page-product .showcase .img:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #DDD; border-radius: var(--radius-24);}
.page-product .model {padding: var(--space-80); background: #FAFAFA; border-radius: var(--radius-24); outline: 1px solid #DDDDDD; outline-offset: -1px; gap: clamp(30px, calc(80 / var(--inner) * 100vw), 80px);}
.page-product .model-img {width: 50%; max-width: 620px; height: fit-content; overflow: hidden; border-radius: 12px; outline: 1px solid #DDDDDD; background: #fff; outline-offset: -1px; line-height: 0;}
.page-product .model-img img {width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;}
.page-product .model-info {gap: clamp(40px, calc(80 / var(--inner) * 100vw), 80px); min-width: 0;}
.model-info .tag {width: fit-content; padding: 2px 14px; border-radius: 100px; background: #999; color: #fff; font-size: var(--font-size-14); font-weight: 600; line-height: 1.4286em;}
.page-product .model .tab-list {display: flex; gap: 0 var(--space-20); border-bottom: none; margin-bottom: 0;}
.page-product .model .tab-list li {position: relative;}
.page-product .model .tab-list li a {display: flex; gap: 10px; padding: 12px 0; color: #AAAAAA;}
.page-product .model .tab-list li.active a {color: var(--primary-color);}
.page-product .model .tab-list li a:after {display: none; content: ''; width:clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px); height: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px); background: var(--primary-color); border-radius: 9999px;}
.page-product .model .tab-list li.active a:after {display: block;}
.page-product .model .btn-square {width: 100%; text-align: center;}
.page-product .tab-panels {flex: 1; min-width: 0;}
.page-product .tab-content {display: none;}
.page-product .tab-content:first-child {display: block;}
.page-product .spec-line {height: 1px; background: #DDDDDD; margin-bottom: var(--space-40);}
.page-product .spec-row {display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--space-20);}
.page-product .spec-row:last-child {margin-bottom: 0;}
.page-product .spec-row dt {flex: 0 0 160px; color: #484848;}
.page-product .spec-row dd {flex: 1; color: #484848; line-height: 1.875em;}
.tag-q {display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 100%; background: var(--secondary-color); color: #fff; font-weight: 700; margin-left: auto; margin-right: auto;}
.page-product .why .desc:after {content: ''; display: block; width: 2px; height: clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); background: #DDDDDD; margin: var(--space-80) auto 0;}
.page-product .smart-box {padding: var(--space-20); background: #FAFAFA; border-radius: 16px; outline: 1px solid #DDDDDD; outline-offset: -1px; display: flex; flex-direction: column; gap: var(--space-20);}
.page-product .smart-top {display: flex; gap: var(--space-20);}
.page-product .smart-banner {padding: var(--space-20) 0; background: var(--primary-color); border-radius: 8px; line-height: 32px;}
.page-product .smart-cards {display: flex; gap: var(--space-20);}
.page-product .smart-card {padding: var(--space-35) 15px; background: #fff; border-radius: 8px; outline: 1px solid #DDDDDD; outline-offset: -1px; gap: var(--space-15);}
.page-product .smart-num {display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 10px; background: rgba(0, 58, 112, 0.24); border-radius: 9999px; line-height: 1em;}
.page-product .sec-flex {display: flex;}
.page-product .sec-flex h2 {width: 33%; max-width: 460px;}
.page-product .density-inner {display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 940px;}
.page-product .chart-area {display: flex; flex-direction: column; gap: 4px;}
.page-product .chart-head {gap: 24px;}
.page-product .chart-tit {color: #484848;}
.page-product .chart-legend {display: flex; align-items: center; gap: 24px;}
[lang="en"] .page-product .chart-legend {font-size: 12px;}
.page-product .legend-item {display: flex; align-items: center; gap: 8px;}
.page-product .legend-item .dot {display: block; width: 6px; height: 6px; background: #fff; border: 2px solid; border-radius: 9999px;}
.page-product .legend-item.secondary-color .dot {border-color: var(--secondary-color);}
.page-product .legend-item.primary-color .dot {border-color: var(--primary-color);}
.page-product .chart-img {margin: 0; line-height: 0;}
.page-product .chart-img img {width: 100%; height: auto;}
.page-product .density-table {overflow-x: auto;}
.page-product .density-table table {width: 100%; border-collapse: collapse; font-size: var(--font-size-14); line-height: 1.5em;}
.page-product .density-table th, .page-product .density-table td {padding: 8px 13px; border-bottom: 1px solid #DDD; text-align: center;}
.page-product .density-table thead th {background: #FAFAFA; border-top: 1px solid #ddd; font-weight: 600;}
.page-product .density-table .addr {min-width: 100px; padding: 8px 13px; background: #FAFAFA; border-right: 1px solid #ddd; font-weight: 600; text-align: center;}
.page-product .density-table tbody th.addr {font-weight: 600;}
.page-product .density-banner {padding: 20px; background: var(--primary-color); border-radius: 8px; outline: 1px solid #DDDDDD; outline-offset: -1px; line-height: 32px;}

.feature-boxes {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-20);}
.feature-box {display: flex; flex-direction: column; padding: var(--space-40); background: #FAFAFA; border-radius: var(--radius-16); border: 1px solid #ddd;}
.feature-box ul {flex: 1;}
.feature-box .icon {text-align: right;}
.feature-list {display: flex; flex-direction: column; gap: 16px; max-width: 940px;}
.feature-item {display: flex; padding: 16px 0; gap: 20px; align-items: flex-start;}
.feature-head {flex: 0 0 460px; max-width: 50%; gap: 20px;}
.feature-num {display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 10px; background: var(--primary-color); border-radius: 9999px; line-height: 1em; flex-shrink: 0;}
.feature-tit {font-size: var(--font-size-24); line-height: 38px; letter-spacing: -0.03em;}
.feature-desc {flex: 1; min-width: 0; color: #484848; line-height: 30px;}
.feature-desc p {margin-bottom: 4px;}
.feature-desc p:last-child {margin-bottom: 0;}
.feature-line {height: 1px; background: #DDDDDD;}
.product-background-box {gap:var(--space-40); padding: var(--space-20); border-radius: var(--radius-16); border: 1px solid #DDDDDD; background: #FAFAFA;}
.product-background-box .img {max-width: 180px; width: 20%; }
.product-bg-arrow {display: flex; justify-content: center; align-items: center; width: clamp(30px, calc( 35 / var(--inner) * 100vw ), 35px); height: clamp(30px, calc( 35 / var(--inner) * 100vw ), 35px); padding: var(--space-10); border-radius: 100%; background: rgba(0, 58, 112, 0.24); margin: var(--space-40) auto;}
.place-boxes {display: flex; gap: var(--space-20); flex-wrap: wrap;}
.place-box {position: relative; flex: 1 1 auto; width: calc((100% - var(--space-20) * 2) / 3); border-radius: var(--radius-16); overflow: hidden;}
.place-box:after {content: ''; padding: var(--space-20); border-radius: var(--radius-16); border: 1px solid #ddd; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;}
.place-box .txt {padding: var(--space-25);}