@charset "utf-8";
.desc p:not(:last-child) {margin-bottom: 1.6em;}
.bdrs16 {border-radius: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); overflow: hidden;}
.bdrs8 {border-radius: 8px; overflow: hidden;}
.border-box {position: relative;}
.border-box:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd; pointer-events: none;}
.border-box.bdrs8:after {border-radius: 8px;}
.border-box.bdrs16:after {border-radius: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px);}
.deco-tit {position: relative; padding-left: 30px; margin-bottom: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px);}
.deco-tit:before {position: absolute; content: ''; top: 0; left: 0; height: 100%; width: 20px; background: url('/images/sub/deco-tit.png')no-repeat center center; background-size: contain;}

.greetings {padding:clamp(25px, calc( 90 / var(--inner) * 100vw ), 90px) clamp(15px, calc( 80 / var(--inner) * 100vw ), 80px);}
.greetings .sign .wrap {height: 32px; gap: 20px;}
.directions h2 {margin-bottom: clamp(25px, calc( 100 / var(--inner) * 100vw ), 100px); font-family: 'KoPub Dotum';}
.direction-items {font-family: 'KoPub Dotum';}
.direction-time {display: flex; flex-wrap: wrap; align-items: center;}
[lang="es"] .direction-time {flex-direction: column; align-items: flex-start;}
.direction-info li {display: flex; color: var(--dark-color);}
.direction-info li:not(:last-child) {margin-bottom: 10px;}
.dayoff {display: flex; align-items: center; gap: 5px; margin-left: 25px; color: #fc5000; font-weight: 400;}
[lang="en"] .dayoff {margin-left: 15px;}
[lang="es"] .dayoff {margin-left: 0;}
.dayoff img {height: 18px;}
.direction-txt {width: 51.231%;}
[lang="en"] .direction-txt,
[lang="es"] .direction-txt {width: 60%; padding-right: 30px;}
.direction-txt h3 {padding-left: 15px; margin-bottom: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); border-left: 6px solid var(--secondary-color); line-height: 1em;}
.direction-txt h3 span {margin-left: 15px; color: #797979; letter-spacing: -.06em;}
.direction-info li > .icon {min-width: 44px;}
[lang="en"] .direction-info li > .icon {min-width: 33px;}
.direction-info li > .icon img {height: 23px;}
.direction-map iframe {width: 100% !important; border: 1px solid #ddd !important;}
.mission-item {display: flex;}
.mission-item h2 {width: 21.4%;}
.value-photo img {width: 100%;}
.history-item {position: relative; width: 50%; margin-left: auto; padding-left: var(--history-indent);}
.history-item:not(:last-child) {padding-bottom: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.history-item:not(:last-child):before {position: absolute; content: ''; top: 23px; bottom: -23px; left: 0; width: 1px; border-left: 1px dashed #ddd;}
.history-item:nth-child(even):before {left: auto; right: 0;}
.history-item:nth-child(even) {margin-left: 0; padding-left: 0; padding-right: var(--history-indent); text-align: right;}
.history-cnt>ul>li {display: flex; gap: 10px;}
[lang="es"] .history-cnt>ul>li,
[lang="es"] .history-item:nth-child(even) .history-cnt>ul>li {flex-direction: column;}
.history-item:nth-child(even) .history-cnt>ul>li {flex-direction: row-reverse;}
.history-cnt li:not(:last-child) {margin-bottom: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px);}
.history-month {width: 33px; text-align: right; font-weight: 600; color: var(--dark-color);}
[lang="es"] .history-item:nth-child(odd) .history-month {text-align: left;}
[lang="es"] .history-month {width: 100%;}
[lang="en"] .history-month, [lang="ja"] .history-month {min-width: 40px;}
.history-year {position: relative;}
.history-year:before {position: absolute; content: ''; top: 50%; left: calc(var(--history-indent) * -1); margin-top: -13px; margin-left: -13px; width: 26px; height: 26px; border-radius: 100%; border: 1px solid var(--secondary-color); opacity: .35;}
.history-year:after {position: absolute; content: ''; top: 50%; left: calc(var(--history-indent) * -1); margin-top: -6px; margin-left: -6px; width: 12px; height: 12px; border-radius: 100%; background: var(--secondary-color);}
.history-item:nth-child(even) .history-year:before {left: auto; right: calc(var(--history-indent) * -1); margin-left: 0; margin-right: -13px;}
.history-item:nth-child(even) .history-year:after {left: auto; right: calc(var(--history-indent) * -1); margin-left: 0; margin-right: -6px;}

.gray-txt-box {padding:clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 15px;background: #f8f8f8; border: 1px solid #ddd; border-radius: 8px;}
.table-wrap table {width: 100%; border-top: 1px solid #242424; border-collapse: collapse; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px);}
.table-wrap thead th {background: #f8f8f8;}
.table-wrap th, .table-wrap td {padding: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px) clamp(5px, calc( 9 / var(--inner) * 100vw ), 9px); border: 1px solid #ddd;}
.table-wrap th {color: var(--dark-color); font-weight: 500; border-top: 0;}
.table-wrap tr>*:first-child {border-left: 0;}
.table-wrap tr>*:last-child {border-right: 0;}
.table-wrap span {display: inline-block;}
.table-wrap .indent10 {text-indent: -10px; padding-left: 10px;}
.dot-list>li, .hyphen-list>li {position: relative; padding-left: 16px;}
.dot-list>li:before {position: absolute; content: '•'; left: 0;}
.hyphen-list>li:before {position: absolute; content:'-'; left: 0;}
.table-wrap li {text-align: left; line-height: 1.5em;}

.items {display: flex; gap:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); flex-wrap: wrap;}
.items .item {width: calc((100% - clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px)) / 2);}
.vocs-disadvantage-items .item {gap: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px);padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(15px, calc( 50 / var(--inner) * 100vw ), 50px);}
.vocs-disadvantage-items .icon {width: 100px; border-radius: 100%; box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.2);}
.vocs-disadvantage-items .txt {flex: 1;}
.differentiation .table-wrap td, .spec .table-wrap td {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);}
.differentiation .table-wrap thead th:nth-child(2) {background: var(--secondary-color); color: #fff; font-weight: 700;}
.differentiation .table-wrap tbody td:nth-of-type(1) {background: rgba(254,80,0,.07);color: var(--secondary-color);}
.btn-more {display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 auto; padding: clamp(8px, calc( 13 / var(--inner) * 100vw ), 13px) clamp(20px, calc( 33 / var(--inner) * 100vw ), 33px); background: var(--secondary-color); border-radius: 8px; font-size: clamp(15px, calc( 17 / var(--inner) * 100vw ), 17px); font-weight: 500; color: #fff;}
.btn-wrap {gap: clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px);}
.btn-wrap .btn-more {margin: 0;}
.model-items .img {padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 15px;}
.model-items .txt {padding: clamp(7px, calc( 14 / var(--inner) * 100vw ), 14px) 15px;color: #fff;}
.service-items {padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) 0 clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); background: #fff;}
.service-item {padding: 0 10px;}
.service-item:not(:last-child) {border-right: 1px dashed #ddd;}
.service-item h4 {max-width: 270px; width: 100%; padding: clamp(5px, calc( 8 / var(--inner) * 100vw ), 8px) 15px; margin: 0 auto; border-radius: 20px;}
.key-function-photo {padding: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(30px, calc( 150 / var(--inner) * 100vw ), 150px) 0; background: #f8f8f8;}
.key-components-photo {padding: clamp(20px, calc( 48 / var(--inner) * 100vw ), 48px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); background: #fff;}
.model-need-item {gap:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); padding: 11px; border: 1px solid #ffdccc; border-radius: 40px;}
.model-need-item .num {width: 60px; height: 60px; border-radius: 100px;}
.model-need-item p {flex: 1;}
.application-field-slide {position: relative;}
.application-field-slide .items {margin: 0 -77px; padding: 0 77px;}
.application-field-slide .slick-list {margin: 0 -15px;}
.application-field-slide .slick-slide {padding: 0 15px;}
.application-field-slide .slick-arrow {position: absolute; content: ''; top: 50%; margin-top: -25px; right: 0; width: 50px; height: 50px; background: url('/images/sub/slick-arrow.png') no-repeat center center; background-size: contain; border: 0; overflow: hidden; text-indent: -9999em; transition: .2s; z-index: 1;}
.application-field-slide .slick-arrow.slick-prev {transform: rotate(180deg); right: auto; left: 0;}
.application-field-slide .slick-arrow:hover {background-image: url('/images/sub/slick-arrow-on.png');}
.key-feature {width: calc((100% - clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px) * 2) / 3); padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 15px; background: #fff; border: 1px solid #ffdccc;}
.spec .table-wrap td:last-child {color: var(--secondary-color);}
.txt-box {position: relative; z-index: 1; padding: 0 clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.txt-box:before {position: absolute; z-index: -1; content: ''; left: 0; bottom: 0; right: 0; height: calc(100% - 20px); background: #fff; border-radius: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); border: 1px solid #ddd;}
.txt-box h2 {padding: clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px) 15px; line-height: 1.2em;}
.txt-box .dot-list {line-height: 1.875em;}
.function-info-items {gap:clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px) clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.function-info {display: flex; flex-direction: column; flex: 1 1 auto;}
.function-info .key-components-photo {flex: 1; margin-bottom: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px);}
.function-info p {height: 3em;}
.function-info p span {display: block;}
.product-item {display: flex; gap: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.product-item .img {width: 50%; display: flex; align-items: center; justify-content: center; padding: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) 15px;}
.product-item .txt {flex: 1; display: flex; flex-direction: column; justify-content: center; line-height: 1.875em;}
.product-item .dot-list li:before, .txt-box:first-child .dot-list li:before {color: var(--secondary-color);}
.helmet-inner .service-item {display: flex; flex-direction: column; justify-content: flex-end; padding: 0 50px;}

.tugu-video-wrap {position: relative; width: 100%; padding-bottom: 54.16667%; overflow: hidden;  border-radius:clamp(8px, calc( 16 / var(--inner) * 100vw ), 16px); background: #000;}
.tugu-video-wrap video, .tugu-video-wrap iframe {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: contain;}
.brand-item {display: flex; align-items: center; gap: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px);}
.brand-item:nth-child(even) {flex-direction: row-reverse;}
.brand-item .img {width: 48.75%;}
.brand-item .txt {flex: 1;}
.brand-item:nth-child(odd) .txt {padding-left: clamp(0px, calc( 45 / var(--inner) * 100vw ), 45px);}
.application-items ul {flex-wrap: wrap; margin: calc(clamp(7px, calc( 15 / var(--inner) * 100vw ), 15px) * -1);}
.application-items li {width: 25%; padding: clamp(7px, calc( 15 / var(--inner) * 100vw ), 15px);}
.accident .txt-box:before {background: #fff6f2; border-color: var(--secondary-color);}
.accident .txt-box h2 {max-width: 600px; margin-left: auto; margin-right: auto;}
[lang="es"] .accident .txt-box h2 {max-width: 100%;}
.b2b-items ul {display: flex; flex-wrap: wrap; gap:clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px) 0;  margin: 0 calc(clamp(5px, calc( 15 / var(--inner) * 100vw ), 15px) * -1);}
.b2b-items li {width: 25%; padding: 0 clamp(5px, calc( 15 / var(--inner) * 100vw ), 15px);}
.b2b-items .border-box {margin-bottom: 12px;}

.tugu-detail-wrap {display: none; padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.direction-txt.sec-app-down,
[lang="en"] .direction-txt.sec-app-down{width: 100%;}
.tugu-apps {display: flex; justify-content: space-around; width: 100%;}