@charset "utf-8";
#container.about-history {position: relative; background: url('/images/sub/history-container-top.png') no-repeat left top / 8.75% auto;}
#container.about-history:before {content: ''; position: absolute; top: 0; right: 0; width: 5.78125%; max-width: 111px; height: 100%; background: url('/images/sub/history-top.svg') no-repeat left top / cover; pointer-events: none;}
#container.about-history:after {content: ''; position: absolute; bottom: 0; left: 0; width: 20.3645833%; max-width: 391px; height: 177px; background: url('/images/sub/product-view-bottom.png') no-repeat right bottom / contain; transform: scaleX(-1); pointer-events: none;}
.hist {display: flex; flex-direction: column; gap: var(--space-80);}
.hist .sec {display: flex; gap: clamp(35px, calc(130 / var(--inner) * 100vw), 130px);}
.hist .range-tit {width: 176px; display: block;color: var(--primary-color); font-size: var(--font-size-32); font-weight: 700;}
.hist .list {width: 100%; max-width: 894px; display: flex; flex-direction: column;}
.hist .year {display: flex; flex-direction: column; gap: var(--space-20); margin-bottom: var(--space-40);}
.hist .item-list {display: flex; flex-direction: column;}
.hist .tit {display: block; padding-bottom: var(--space-20); border-bottom: 1px #DDDDDD solid; color: var(--dark-color); font-size: var(--font-size-26); font-weight: 600;}
.hist .item {display: flex;}
.hist .item:not(:last-child) {margin-bottom: var(--space-20);}
.hist .month {width: 40px; flex-shrink: 0; color: var(--primary-color); font-size: var(--font-size-16); font-weight: 600;}
.hist .txt {color: #454545; font-size: var(--font-size-16); text-indent: -.8em; padding-left: .8em;}

#container.about-brands {position: relative; background: url('/images/sub/brands-container.svg') no-repeat left bottom / 58.23% auto;}
.brand-items {display: flex; flex-direction: column; gap: var(--space-80);}
.brand-item {display: flex; justify-content: flex-start; gap: var(--space-40);}
.brand-item.reverse {flex-direction: row-reverse;}
.brand-item .img {width: 57.1667%; max-width: 686px; overflow: hidden; background: #FAFAFA; display: flex; justify-content: center; align-items: center;}
.brand-item:not(.reverse) .img {border-left: 6px #EBAB3D solid; border-radius: 0 var(--radius-16) var(--radius-16) 0;}
.brand-item.reverse .img {border-right: 6px #EBAB3D solid; border-radius: var(--radius-16) 0 0 var(--radius-16);}
.brand-item .cont {flex: 1; min-width: 1%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px;}
.brand-bar img {max-height: 40px; object-fit: contain;}
.brand-item .btn-more:hover {background: var(--primary-color); border-color: var(--primary-color);}

.page-location .sec {display: flex; gap: 25px 40px; line-height: 1.875em;}
.page-location .sec:not(:last-child) {margin-bottom: clamp(30px, calc(100 / var(--inner) * 100vw), 100px); padding-bottom: clamp(30px, calc(100 / var(--inner) * 100vw), 100px); border-bottom: 1px solid #ddd;}
.location-map {position: relative; width: 48.3333%; height: clamp(270px, calc(480 / var(--inner) * 100vw), 480px);}
.location-map iframe {width: 100% !important; height: 100% !important;}
.page-location li:not(:last-child) {margin-bottom: var(--space-20);}

.page-values .sec:not(:last-child) {margin-bottom: var(--space-120);}
.sec-greetings .contain {position: relative; margin-right: 0; padding-right: 0; max-width: calc(50% + 630px); padding-bottom: var(--space-60);}
.sec-greetings .contain:before {content: ''; z-index: -1; position: absolute; bottom: 0; left: var(--space-40); right: 0; height: 75%; background: #F6F6F6;}
.greeting-cnt {position: relative; max-width: 1200px; gap: clamp(35px, calc(50 / var(--inner) * 100vw), 50px);}
.greeting-img {max-width: 380px; height: fit-content; box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.25);}
.greeting-cnt h4 {line-height: 1.2em;}

.sec-values p {max-width:890px; margin-left: auto; margin-right: auto;}
.rnd-cnt {gap: 25px clamp(35px, calc(40 / var(--inner) * 100vw), 40px);}
.rnd-img {width: 50%; max-width: 600px;}

#container.about-warranty {position: relative; background: url('/images/sub/warranty-container.svg') no-repeat right bottom / 19.53125% auto ;}
.warranty-info dl {display: flex;}
.warranty-info dl:not(:last-child) {margin-bottom: var(--space-40);}
.warranty-info dt {display: flex; align-items: center; gap: 5px; min-width: 258px; height: fit-content; font-weight: 700;}
.warranty-info dt:before {content: ''; display: block; width: 5px; height: 5px; margin-right: 5px; background: var(--primary-color);}
.warranty-info li {text-indent: -.8em; padding-left: .8em;}

#container.contactus {background: url('/images/sub/contactus-container.svg') no-repeat left bottom / 36.7708333% auto ;}
.page-contactus {gap: 35px;}
.contact-info {height: fit-content; border-left: 6px solid var(--primary-color); padding-left: var(--space-30);}
.contact-info li:not(:last-child) {margin-bottom: 3px;}
.contact-form {max-width: 600px; width: 50%;}
.inquiry-form {display: flex; flex-direction: column; gap: var(--space-20);}
.inquiry-form .field {display: flex; align-items: flex-start;}
.inquiry-form .input {width: 100%; border-radius: 8px;}
.inquiry-form .input::placeholder {color: #B4B4B4;}
.inquiry-form .checkbox .input {width: auto; padding: 0; border: none; background: transparent;}
.inquiry-form .checkbox {display: flex; align-items: center; gap: 12px; margin: 10px 0;}
.inquiry-form .btn {width: 100%; padding: 15px var(--space-25); background: var(--primary-color); color: #fff; border: none; border-radius: var(--radius-8); font-size: var(--font-size-16); cursor: pointer;}