@charset "utf-8";

:root {
  --main-title-font-size: 56px;
  --main-title-font-weight: 700;
  --main-title-line-height: 1.3;

  --sub-title-font-size: 40px;
  --sub-title-font-weight: 700;
  --sub-title-line-height: 1.3;

  --sub-title-md-font-size: 32px;
  --sub-title-md-font-weight: 700;
  --sub-title-md-line-height: 1.3;

  --sub-title-sm-font-size: 24px;
  --sub-title-sm-font-weight: 700;
  --sub-title-sm-line-height: 1.3;

  --body-font-size: 18px;
  --body-line-height: 1.8;
  --body-padding: 227px 0 140px 0;
}

@media screen and (max-width: 1399px) {
  :root {
    --main-title-font-size: 42px;
    --sub-title-font-size: 32px;
    --sub-title-sm-font-size: 22px;
    --body-font-size: 16px;
    --body-padding: 150px 0 120px 0;
  }  
}
@media screen and (max-width: 767px) {
  :root {
    --main-title-font-size: 32px;
    --sub-title-font-size: 24px;
    --sub-title-sm-font-size: 20px;
    --body-font-size: 16px;
    --body-padding: 90px 0 100px 0;
  }

  .m-full-width {margin-left: -15px; max-width: calc(100% + 30px); width: calc(100% + 30px);}
}

.bg-primary {background: var(--primary) !important;}
.bg-primary-dark {background: var(--primary-dark) !important;}
.bg-secondary {background: var(--secondary) !important;}
.bg-third {background: var(--third) !important;}
.bg-dark {background: var(--dark) !important;}
.bg-gray {background: var(--gray) !important;}
.bg-gray-dark {background: var(--gray-dark) !important;}
.bg-gray-light {background: var(--gray-light) !important;}
.bg-gray-lighter {background: var(--gray-lighter) !important;}
.bg-white {background: white !important;}
.bg-black {background: black !important;}

.text-primary {color: var(--primary) !important;}
.text-primary-dark {color: var(--primary-dark) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-third {color: var(--third) !important;}
.text-dark {color: var(--dark) !important;}
.text-gray {color: var(--gray) !important;}
.text-gray-dark {color: var(--gray-dark) !important;}
.text-gray-light {color: var(--gray-light) !important;}
.text-gray-lighter {color: var(--gray-lighter) !important;}
.text-white {color: white !important;}
.text-black {color: black !important;}

.text-main-title {font-size: var(--main-title-font-size); font-weight: var(--main-title-font-weight); line-height: var(--main-title-line-height);}
.text-sub-title {font-size: var(--sub-title-font-size); font-weight: var(--sub-title-font-weight); line-height: var(--sub-title-line-height);}
.text-sub-title-md {font-size: var(--sub-title-md-font-size); font-weight: var(--sub-title-md-font-weight); line-height: var(--sub-title-md-line-height);}
.text-sub-title-sm {font-size: var(--sub-title-sm-font-size); font-weight: var(--sub-title-sm-font-weight); line-height: var(--sub-title-sm-line-height);}

.space-y > *:not(:first-child) {margin-top: 1em;}
.space-y-sm > *:not(:first-child) {margin-top: 0.5em;}
.space-y-lg > *:not(:first-child) {margin-top: 1.5em;}
.space-y-xl > *:not(:first-child) {margin-top: 2em;}

.breadcrumbs {display: flex; align-items: center; gap: 10px; margin-left: auto; color: black; font-weight: 700; font-size: 16px;}
.bg-dark .breadcrumbs {color: var(--gray-light);}
.breadcrumbs span {opacity: 0.5;}
.breadcrumbs span:last-child {opacity: 1;}

.subpage-body {font-size: var(--body-font-size);line-height: var(--body-line-height);padding: var(--body-padding); background: no-repeat center / cover; background-attachment: fixed;}
.subpage-head {padding-bottom: 50px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;}
.subpage-head .breadcrumbs {margin-left: auto; flex-shrink: 0;}

@media screen and (max-width: 1399px) {
  .breadcrumbs {font-size: 14px;}

  .subpage-head {padding-bottom: 35px;}
}
@media screen and (max-width: 767px) {
  .breadcrumbs {font-size: 12px;}
  .subpage-head {padding-bottom: 25px; flex-direction: column-reverse; gap: 10px;}
  .subpage-head .breadcrumbs {margin-left: 0;}
}


/* Company Overview */
.cmp-ov-banner {display: flex;}
.cmp-ov-banner img {width: 100%;}
.cmp-ov-banner.rohecare-banner {display: grid; grid-template-columns: repeat(2, 1fr);}
.cmp-ov-content {display: grid; grid-template-columns: 34fr 66fr; gap: 40px;}
.cmp-ov-content-head-logo {width: 254px; height: auto;}
.cmp-ov-content-head-logo.rohecare-logo {width: 302px;}

@media screen and (max-width: 1399px) {
  .cmp-ov-content-head-logo {width: 200px!important;}
}
@media screen and (max-width: 767px) {
  .cmp-ov-banner {flex-direction: column;}
  .cmp-ov-banner img {height: 250px; object-fit: cover;}
  .cmp-ov-banner.rohecare-banner {grid-template-columns: 1fr;}
  .cmp-ov-banner.rohecare-banner img {height: auto;}
  .cmp-ov-content {grid-template-columns: 1fr; gap: 20px;}
  .cmp-ov-content-head-logo {width: 150px!important;}
}


/* Product Lineup */
.lineup-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
.lineup-card {background: rgb(255,255,255,0.1); backdrop-filter: blur(10px); padding-block: 38px 70px; display: flex; flex-direction: column; gap: 30px;}
.lineup-card .row {padding-inline: 36px; width: 100%;}
.lineup-card .head .title {display: block; font-size: 20px; font-weight: 700; color: var(--primary); margin-bottom: 0.5em;}
.lineup-card .foot {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
.lineup-card .foot .button {font-size: 16px;}

@media screen and (max-width: 1399px) {
  .lineup-list {gap: 10px;}
  .lineup-card {padding-block: 20px;}
  .lineup-card .row {padding-inline: 20px;}
  .lineup-card .head .title {font-size: 14px;}
  .lineup-card .head .logo {width: auto; height: 24px;}
  .lineup-card .thumbnail {}
  .lineup-card .foot {grid-template-columns: repeat(1, 1fr); gap: 5px;}
  .lineup-card .foot .button {font-size: 14px;}
}
@media screen and (max-width: 767px) {
  .lineup-list {grid-template-columns: repeat(1, 1fr);}
}


/* Product Detail */
.prd-head {display: grid; grid-template-columns: 580fr 763fr; gap: 50px; align-items: flex-start; padding-bottom: 140px;}
.prd-section {margin-block: 140px;}
.prd-section:last-child {margin-bottom: 0;}
.prd-section-head {margin-bottom: 80px;}
.prd-article {padding-block: 100px;}

.prd-gallery {width: 100%;}
.prd-gallery .swiper-slide {background: var(--gray-light);}
.prd-gallery .swiper-slide img {aspect-ratio: 1 / 1; object-fit: cover;}
.prd-gallery-thumbs {padding-top: 20px;}
.prd-gallery-thumbs .tit {display: block; font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 0.5em;}
.prd-gallery-thumbs nav {display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px;}
.prd-gallery-thumbs nav button {aspect-ratio: 1 / 1; width: 100%; background: var(--gray-light); border: 1px solid var(--gray); opacity: 0.5;}
.prd-gallery-thumbs nav button img {width: 100%; height: 100%; object-fit: cover;}
.prd-gallery-thumbs nav button.active {opacity: 1;}

.prd-intro {border-top: 1px solid var(--dark);}
.prd-intro .row {padding-inline: 30px; padding-top: 37px;}
.prd-intro .head {padding-block: 52px 40px; border-bottom: 1px solid var(--gray);}
.prd-intro .head .title {font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--secondary); margin-bottom: 0.5em; display: block;}
.prd-intro .body {display: flex; flex-direction: column; min-height: 366px; gap: 20px; justify-content: space-between;}

.prd-banner {display: flex; justify-content: center;}
.prd-banner img {width: 100%; max-width: 1920px;}

.prd-key-visuals {display: grid; grid-template-columns: repeat(3, 1fr);}

.prd-components {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 16px;}
.prd-components-item {display: flex; gap: 20px; border-top: 3px solid #C5C5C5; min-height: 235px;}
.prd-components-item .head {padding-top: 15px; background: white; width: 136px; display: flex; flex-direction: column; gap: 30px; justify-content: space-between; flex-shrink: 0;}
.prd-components-item .head-title {padding-inline: 12px;}
.prd-components-item .head-title .title small {font-size: 13px; display: block;}
.prd-components-item .head .icon {margin-top: auto; margin-inline: auto;}
.prd-components-item .body {padding-top: 20px; font-size: 16px;}
.prd-components-item .body ul.bullet > li:before {background: var(--gray-dark); width: 0.33em; height: 0.33em;}
.prd-components-item .body ul.bullet > li b {color: var(--gray-dark);}

.prd-spec-banner {}
.prd-spec-banner .banner {width: 100%; max-width: 1920px; height: 576px; margin-inline: auto; object-fit: cover;}
.prd-spec-banner .thumbnails {display: flex; gap: 10px; padding: 10px; background: white; margin-top: -130px; position: relative; z-index: 1;}
.prd-spec-banner .thumbnails img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}

.prd-spec .legend-mark {font-size: 14px; font-weight: 700; color: var(--secondary);}
.prd-spec-table-legend {display: flex; flex-wrap: wrap; gap: 0em 1.5em; font-size: 14px; font-weight: 700; color: var(--gray-dark); justify-content: flex-end;}
.prd-spec-table-legend .item {}
.prd-spec-table-legend .item .legend-mark {}
.prd-spec-table-legend .item .value {}

.prd-spec-table table {table-layout: fixed; width: 100%; font-size: 16px; border-block: 1px solid var(--gray-dark); line-height: 1.5;}
.prd-spec-table table :where(th, td) {padding: 0.6em 0.8em;}
.prd-spec-table table :where(tr) {border-bottom: 1px solid var(--gray);}
.prd-spec-table table :where(tr:last-child) {border-bottom: 0;}
.prd-spec-table table th {background: black; color: white; font-weight: 700; text-align: left;}
.prd-spec-table table td {text-align: center; border-right: 1px solid var(--gray);}
.prd-spec-table table td:last-child {border-right: 0;}
.prd-spec-table table .unit {background: var(--gray-light); font-weight: 700; width: 84px; text-align: center!important;}
.prd-spec-table.type-2 table th {width: 130px;}
.prd-spec-table.type-2 table td {text-align: left;}
.prd-spec-note {margin-top: 1em; font-weight: 700; color: var(--gray-dark); text-align: right; line-height: 1.3; font-size: 14px;}

.prd-spec-group {border-top: 3px solid var(--gray-dark);}
.prd-spec-group-head {display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-block: 1em;}
.prd-spec-group-head .unit {font-size: 14px; display: inline-block; margin-left: auto;}
.prd-spec-group-head .title {flex-shrink: 0;}
.prd-spec-group-head .title .unit {margin-left: 0.5em;}


.stargate-s4 .prd-spec {display: grid; grid-template-columns: 88fr 46fr; gap: 54px;}
.stargate-s6 .prd-spec {display: grid; grid-template-columns: 88fr 46fr; gap: 54px;}
.stargate-s6 .prd-spec-table.type-2 table :where(th, td) {padding-block: 0.78em;}
.startube .prd-spec {display: grid; grid-template-columns: 35fr 65fr; gap: 34px;}
.startube .prd-spec-group-head .title {width: 100%; display: flex; align-items: flex-end; justify-content: space-between;}
.startube .prd-spec table th {width: 200px;}
.startube .prd-spec-img {display: grid; grid-template-columns: repeat(2, 1fr);}

.prd-zone-list > div:not(:first-child) {margin-top: 60px;}
.prd-zone {--theme: black; display: grid; grid-template-columns: 268px 1fr; gap: 42px;}
.prd-zone-title {font-size: 32px; font-weight: 800; line-height: 1.3; padding-top: 15px; border-top: 4px solid var(--theme); color: var(--theme);}
.prd-zone-body {padding-top: 15px; border-top: 4px solid var(--gray); display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
.prd-zone-body .col {display: grid; grid-template-columns: 1fr 160px; gap: 15px;}
.prd-zone-body .col .list li {display: flex; gap: 0.5em;}
.prd-zone-body .col .list li .num {font-weight: 700; color: var(--theme);}
.prd-zone-body .col .list li .cont strong {display: block;}
.prd-zone-body .col .list li .cont span {font-size: 15px; line-height: 1.5; display: block;}
.prd-zone-body .col .imgs {display: flex; flex-direction: column; gap: 10px;}
.prd-zone-body .col .imgs img {width: 100%;}
.prd-zone.red, .prd-zone .red {--theme: #FF4515;}
.prd-zone.gray, .prd-zone .gray {--theme: #808080;}
.prd-zone.orange, .prd-zone .orange {--theme: #FE9C2B;}
.prd-zone.green, .prd-zone .green {--theme: #51B91B;}

.prd-estimate {border-top: 1px solid var(--dark);}
.prd-estimate .row {padding-inline: 0px;}
.prd-estimate .head {padding-block: 20px; position: sticky; top: 0; z-index: 100; background: white; border-bottom: 1px solid var(--gray);}
.prd-estimate .head .title {display: flex; align-items: flex-end; gap: 20px; margin-bottom: 30px;}
.prd-estimate .head .title .logo {height: 50px;}
.prd-estimate .head .title .txt {}
.prd-estimate .head .total-price {font-size: 48px; display: flex; gap: 0.3em; align-items: center; font-weight: 700; line-height: 1; justify-content: flex-end;}
.prd-estimate .head .total-price strong {color: var(--secondary);}
.prd-estimate .head .total-price small {color: var(--gray-dark); font-size: 0.67em;}
.prd-estimate .head .note {font-size: 16px; color: var(--gray-dark); line-height: 1.3; margin-top: 1em; text-align: right; display: block;}
.prd-estimate .body {}
.prd-estimate .option-group {border-top: 1px solid var(--gray); padding-block: 20px 50px;}
.prd-estimate .option-group:first-child {border-top: none;}
.prd-estimate .option-group .title {margin-bottom: 0.4em;}
.prd-estimate .option-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 17px;}
.prd-estimate .option-item {padding: 14px; border: 1px solid var(--gray-light); background: var(--gray-light); text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; font-weight: 700;}
.prd-estimate .option-item:has(.checkbox) {background: white; padding: 0;}
.prd-estimate .option-item:has(.checkbox):hover {border-color: var(--secondary);}
.prd-estimate .option-item:not(:has(.checkbox)) {line-height: 1.3;}
.prd-estimate .option-item:not(:has(.checkbox)) small {display: inline-block; color: var(--gray-dark); line-height: 1.3; font-weight: 400;}
.prd-estimate .option-item .checkbox {position: relative; width: 100%; cursor: pointer; display: flex; flex-direction: column; gap: 10px; padding: 14px;}
.prd-estimate .option-item .checkbox .checkbox-body {display: flex; justify-content: space-between; align-items: center; gap: 0.5em; position: relative; padding-inline: 3px;}
.prd-estimate .option-item .checkbox .checkbox-body input {position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; border: 0; padding: 0; opacity: 0;}
.prd-estimate .option-item .checkbox .checkbox-body .check {width: 1.5em; height: 1.5em; border: 1px solid var(--gray); position: relative; color: var(--gray); display: flex; align-items: center; justify-content: center;}
.prd-estimate .option-item .checkbox .checkbox-body .check .chck {display: none;}
.prd-estimate .option-item .checkbox .checkbox-body .price {font-weight: 700; color: var(--gray-dark);}
.prd-estimate .option-item:has(input:checked) {border-color: var(--secondary);}
.prd-estimate .option-item .checkbox:has(input:checked) .checkbox-body .check {color: white; background: var(--secondary);}
.prd-estimate .option-item .checkbox:has(input:checked) .checkbox-body .check .chck {display: block;}
.prd-estimate .option-item .checkbox:has(input:checked) .checkbox-body .check .plus {display: none;}
.prd-estimate .option-item .checkbox-head {text-align: left; padding-bottom: 10px; border-bottom: 1px solid var(--gray); line-height: 1.3; padding-inline: 3px;}

@media screen and (max-width: 1399px) {
  .prd-head {gap: 20px; padding-bottom: 80px;}
  .prd-section {margin-block: 120px;}
  .prd-section-head {margin-bottom: 50px;}
  .prd-article {padding-block: 80px;}

  .prd-gallery-thumbs nav {gap: 5px;}

  .prd-intro .row {padding-inline: 20px;}
  .prd-intro .head {padding-block: 20px;}
  .prd-intro .body {min-height: 280px;}
  .prd-intro .head .title {font-size: 16px;}
  .prd-intro .head .logo {max-width: 80%;}
  .prd-intro .body {padding-top: 20px; min-height: 0px; gap: 40px;}
  .prd-intro .body .desc br {display: none;}

  .prd-components {grid-template-columns: repeat(2, 1fr);}
  .prd-components-item {flex-direction: column; gap: 15px; min-height: 0px;}
  .prd-components-item .head {width: 100%; flex-direction: row; padding: 15px; align-items: center;}
  .prd-components-item .head-title {padding: 0; display: flex; gap: 0.5em; font-size: 20px;}
  .prd-components-item .head .icon {margin-right: 0; width: 60px;}
  .prd-components-item .body {padding-top: 0; padding-inline: 3px; font-size: 15px;}

  .prd-spec-banner .banner {height: 200px;}
  .prd-spec-banner .thumbnails {display: grid; grid-template-columns: repeat(2, 1fr); margin-top: -40px;}

  .prd-spec {display: block!important;}
  .prd-spec-group:not(:first-child) {margin-top: 50px;}
  .prd-spec-group-head {flex-direction: column; align-items: flex-start; gap: 5px;}
  .prd-spec-group-head .title {font-size: 24px;}
  .prd-spec-group-head .prd-spec-table-legend {justify-content: flex-start;}
  .prd-spec-table {overflow-x: auto;}
  .prd-spec-table table {font-size: 14px;}
  .prd-spec-table:not(.type-2) table {min-width: 720px;}
  .prd-spec-table table :where(td) {padding-inline: 0.5em;}

  .prd-estimate .head .title {gap: 10px;}
  .prd-estimate .head .title .logo {height: 30px;}
  .prd-estimate .head .title .txt {font-size: 24px;}
  .prd-estimate .head .total-price {font-size: 28px;}
  .prd-estimate .head .total-price strong {font-size: 32px;}
  .prd-estimate .head .total-price small {font-size: 18px;}
  .prd-estimate .head .note {font-size: 14px;}
  .prd-estimate .option-group {padding-block: 15px 30px;}
  .prd-estimate .option-group .title {font-size: 20px;}
  .prd-estimate .option-list {grid-template-columns: repeat(2, 1fr); gap: 10px;}

  .startube .prd-spec table th {width: 180px;}
  .startube .prd-spec-img {margin-top: 30px;}

  .prd-zone {grid-template-columns: 1fr; gap: 0px;}
  .prd-zone-title {border-top-width: 2px; font-size: 24px; padding-block: 0.5em;}
  .prd-zone-body {border-top-width: 2px;}
  .prd-zone-body .col {grid-template-columns: 1fr 100px;}
}

@media screen and (max-width: 767px) {
  .prd-head {display: flex; flex-direction: column-reverse; gap: 30px; padding-bottom: 60px;}
  .prd-section {margin-block: 80px;}
  .prd-section-head {margin-bottom: 30px;}
  .prd-article {padding-block: 50px;}

  .prd-intro .row {padding-inline: 0px;}
  .prd-intro .head .title {font-size: 15px;} 
  .prd-intro .body nav .button {width: 100%;}

  .prd-banner img {height: 180px; object-fit: cover;}

  .prd-key-visuals {grid-template-columns: repeat(1, 1fr);}

  .prd-components {grid-template-columns: repeat(1, 1fr);}
  .prd-components-item .head {padding: 10px;}
  .prd-components-item .head-title {font-size: 18px;}
  .prd-components-item .head-title .title small {display: inline-block;}
  .prd-components-item .head .icon {width: 50px;}

  .prd-spec-banner .thumbnails {padding: 5px; gap: 5px;}

  .prd-estimate {width: 100%;}
  .prd-estimate .head {background: white; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--gray);}
  .prd-estimate .head .title .logo {height: 20px;}
  .prd-estimate .head .title .txt {font-size: 16px;}
  .prd-estimate .head .total-price {font-size: 20px;}
  .prd-estimate .head .total-price strong {font-size: 24px;}
  .prd-estimate .head .total-price small {font-size: 16px;}
  .prd-estimate .option-group:first-child {border-top: none;}
  .prd-estimate .option-list {gap: 5px;}
  .prd-estimate .option-item:has(.checkbox) {grid-column: span 2;}

  .startube .prd-spec table {min-width: 0;}
  .startube .prd-spec table th {width: 180px;}
  .startube .prd-spec-img {grid-template-columns: repeat(1, 1fr);}

  .prd-zone-list > div:not(:first-child) {margin-top: 30px;}
  .prd-zone-title {border-top-width: 1px; font-size: 18px;}
  .prd-zone-body {border-top-width: 1px; grid-template-columns: repeat(1, 1fr); gap: 10px;}
  .prd-zone-body .col {grid-template-columns: 1fr; gap: 5px;}
  .prd-zone-body .col .imgs {display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; padding-left: 20px;}
  .prd-zone-body .col .list li .cont strong {font-size: 15px;}
  .prd-zone-body .col .list li .cont span {font-size: 14px;}
}


/* 게시판 */
.paging {--number-color-active: var(--secondary);}
.thumb-download-list-1 {--thumbnail-aspect-ratio: 270 / 380;}

@media screen and (min-width: 1400px) {
  .thumb-download-list-1 {--tag-color: var(--secondary); --title-size: 22px; --list-grid-gap: 80px 40px;}
}