@charset "utf-8";
.page-greetings .sec {padding: var(--space-120) 0; color: #ccc; overflow: hidden;}
.sec-greetings h2 {font-size: var(--font-size-36); line-height: 1.27778em; margin-bottom: var(--space-30); color: #fff;}
.greeting-img {position: relative; width: 32%; z-index: 1;}
.greeting-img:before {position: absolute; content:''; top: -10%; right: -90%; width: 133%; height: 68.5%; background: #303030; z-index: -1;}

.sec-tit {margin-bottom: var(--space-50);}
.sec-tit h2 {font-size: var(--font-size-36); line-height: 1.27778em; color: #fff;}
.sec-tit p {margin-top: var(--space-20);}
.circle-list>li {position: relative; padding-left: 15px;}
.circle-list>li:before {content: ''; display: block; width: 5px; height: 5px; border-radius: 100%; background: var(--primary-color); position: absolute; top: 12px; left: 0;}

.sec-philosophy {background: url('/images/sub/bg-philosophy.jpg') no-repeat left bottom / cover;}
.philosophy-boxes {gap: var(--space-30);}
.philosophy-box {display: flex; flex-direction: column; border-radius: var(--radius-20); overflow: hidden;}
.philosophy-box h3 {padding: clamp(10px, calc( 24 / var(--inner) * 100vw ), 24px) 10px; background: var(--primary-color); color:  #fff; font-size: var(--font-size-22); font-weight: 600; line-height: 1.5em;}
.philosophy-box .txt {flex: 1; display: flex; align-items: center; background: #fff; color: #505050;}
.philosophy-box .wrap {width: 100%; padding: 20px 15px;}
.sec-greeting-last {padding-bottom: 0 !important;}
.sec-greeting-last .contain {gap: 20px 30px;}
.sec-greeting-last .desc {width: 64.16667%;}
.sec-greeting-last strong {color: #fff;}

.vision-txt {gap: 25px; margin-top: var(--space-35);}
.vision-list-box {padding: var(--space-35) var(--space-40); margin-left: var(--space-40); background: #fff; border-radius: 10px; border: 2px solid #ddd; box-shadow: 3px 3px 7px rgba(0,0,0,.35); color: #505050;}
.vision-list-box li:not(:last-child) {margin-bottom: 5px;}
.vision-txt p {padding: 20px 0; font-size: var(--font-size-22); line-height: 1.3em;}
.sec-management {position: relative; z-index: 1; padding: var(--space-120) 0; text-align: center;}
.sec-management:before {position: absolute; content: ''; left: 0; right: 0; bottom: 0; z-index: -1; height: 57%; background: #323232;}

.history-wrap {padding-top:80px; margin-top: var(--space-50); position:relative;}
.history-wrap:before {top:0; bottom:0; position:absolute; left:50%; width:1px; background-color:#ddd; content:""; opacity: .4;}
.history-item {width: 50%; padding-left: var(--history-gap); margin-left: auto; font-size: var(--font-size-16);}
.history-item:nth-child(even) {margin-left: 0; margin-right: auto; padding-right: var(--history-gap); padding-left: 0; text-align: right;}
.history-item:nth-child(even) .circle-list>li {padding-left: 0; padding-right: 15px;}
.history-item:nth-child(even) .circle-list>li:before {left: auto; right: 0;}
.history-item:not(:last-child) {padding-bottom: clamp(20px, calc(75 / var(--inner) * 100vw), 75px);}
.history-year {position: relative; margin-bottom: var(--space-25); font-size: var(--font-size-40); line-height: 1em; color: #fff;}
.history-year:before {content: ''; display: block; width: 11px; height: 11px; border: 2px solid #686868; background: #fff; border-radius: 100%; position: absolute; top: 50%; left: calc(var(--history-gap) * -1); transform: translate(-50%, -50%); transition: .2s; z-index: 1;}
.history-year:after {content: ''; position: absolute; top: 50%; left: calc(var(--history-gap) * -1); width: 0; height: 0; border-radius: 100%; background: var(--primary-color); opacity: .3; transform: translate(-50%, -50%); transition: .2s;}
.history-item:nth-child(even) .history-year:before {left: auto; right: calc(var(--history-gap) * -1); transform: translate(50%, -50%);}
.history-item:nth-child(even) .history-year:after {left: auto; right: calc(var(--history-gap) * -1); transform: translate(50%, -50%);}
.history-item.active .history-year:before {width: 24px; height: 24px; border: 6px solid var(--primary-color);}
.history-item.active .history-year:after {width: 36px; height: 36px;}
.history-detail {margin-bottom:15px; display:flex; font-size:18px; letter-spacing:-.03em; font-weight:500; transition:all 0.5s ease;}
.history-detail:last-child {margin-bottom:0;}
.history-detail .month {width:55px; color:#898989; display:block;}
.history-detail p {flex:1;}
.page-business-boxes {display: flex; gap: var(--space-40); flex-wrap: wrap;}
.business-box {display: flex; flex-direction: column; width: calc((100% - var(--space-40)) / 2); background: #e5e5e5; border-radius: var(--radius-24); overflow: hidden; font-size: var(--font-size-22); line-height: 1.7272em; font-weight: 600;  color: var(--dark-color);}
.business-txt {flex: 1; padding: var(--space-45) var(--space-50);}
.business-txt .icon {margin-bottom: var(--space-30);}
.hyphen-txt li {display: flex; gap: 5px;}
.hyphen-txt li:before {content: '-'; }
.history-item:nth-child(even) .hyphen-txt li {flex-direction: row-reverse;}
.history-img {margin-top: var(--space-20);}

.btn-view {display: flex; align-items: center; gap: 10px; width: fit-content; padding: 15px 30px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 30px; font-size: 16px; font-weight: 600; line-height: 1.5em; transition: .2s;}
.btn-view:after {content: ''; display: block; width: 14px; height: 14px; background: url('/images/sub/arrow-view.png') no-repeat center center / contain; filter: grayscale(1) brightness(0) invert(1);}
.btn-view:hover {background: #fff; color: var(--dark-color); border-color: #fff;}
.btn-view:hover:after {filter: none;}

.page-product-detail {padding-top: clamp(50px, calc(135 / var(--inner) * 100vw), 135px); line-height: 1.7778em; color: var(--gray-color);}
.page-product-detail h2 {margin-bottom: var(--space-30); font-size: var(--font-size-46); line-height: 1.2em; color: #fff; letter-spacing: -.02em;}
.detail-txt {text-align: center;}
.relative-items {margin-top: var(--space-60);}
.relative-items>ul {display: flex; flex-wrap: wrap; margin: -10px;}
.relative-items>ul>li {width: 33.3335%; max-width: 406px; padding: 10px;}
.relative-item {position: relative;display: flex; flex-direction: column; height: 100%; background: #2a2a2a; border-radius: var(--radius-20); overflow: hidden;}
.relative-item:after {position: absolute; content:''; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #3a3a3a; border-radius: var(--radius-20); z-index: 1;}
.relative-item:hover {box-shadow: 0 0 12px rgba(237,28,36,.4);}
.relative-item:hover:after {border-color: var(--primary-color);}
.relative-items .thumb {position: relative; width: 100%; padding-bottom: 75.1185%; overflow: hidden;}
.relative-items .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: auto !important; max-width: 100%; min-height: 100%; object-fit: cover;}
.relative-items .txt {display: flex; flex-direction: column; justify-content: space-between; flex: 1; padding: var(--space-25) var(--space-30); font-size: var(--font-size-16); line-height: 1.5em; color: #fff;}
.relative-items h3 {margin-top: 7px; font-size: var(--font-size-28); line-height: 1.5em; font-weight: 700;}

.inquiry-box {margin-bottom: var(--space-50); padding: var(--space-50) 20px; border-radius: var(--radius-20); background: #ccc; line-height: 1.5556em; color: #2c2c2c; text-align: center;}
.inquiry-box strong {display: block;}
.required {color: var(--primary-color);}
.inquiry-item:not(:last-child) {margin-bottom: var(--space-50);}
.inquiry-num {display: inline-flex; align-items: center; justify-content: center; margin-right: 10px; width: 24px; height: 24px; border-radius: 100%; background: #404040; color: #fff; font-size: var(--font-size-16); font-weight: 600; line-height: 1em;}
.inquiry-cnt {padding-left: 40px; margin-top: var(--space-25);}
.inquiry-cnt .radiobox {margin-right: 40px;}
.inquiry-cnt .input {background: #2a2a2a; border-color: #3a3a3a; border-radius: 6px; width: 100%;color: #ccc;}
.inquiry-cnt .input::placeholder {color: #ccc;}
.btn-submit {display: flex; flex-direction: column; gap: 5px; align-items: center; justify-content: center; width: 100px; height: 100px; margin: 0 auto; border: 0; border-radius: 100%; background: var(--primary-color); font-size: 16px; font-weight: 500; color: #fff;}
.btn-submit .arrow {height: 7px;}