@charset "utf-8";

/* About Us > 인사말 */
.page-greetings {display: flex; gap: 25px clamp(35px, calc(80 / var(--inner) * 100vw), 80px);}
.greeting-img {max-width: 530px; width: 45%;}
.greeting-txt {gap: var(--space-25); font-family: "Kyobo"; background: url('/images/sub/greeting-logo.svg') no-repeat right bottom;}
.greeting-txt p {line-height: 1.777em;}
.greeting-txt h3, .greeting-sign {-webkit-text-stroke-width: 0.2px; -webkit-text-stroke-color: var(--dark-color);}

/* About Us > 기업이념 */
.page-ideology section {padding: var(--space-100) 0;}
.page-ideology .sec-tit {margin-bottom: var(--space-60); font-size: var(--font-size-40); line-height: 1.2em; text-align: center;}
.vision-cnt {display: flex; flex-direction: column; gap: var(--space-40); align-items: center;}
.vision-head {display: flex; flex-direction: column; gap: clamp(20px, calc(28 / var(--inner) * 100vw), 28px); align-items: center; width: 100%; text-align: center;}
.vision-title {display: flex; align-items: center; justify-content: center; gap: var(--space-10); width: 100%;}
.vision-title .icon-quote {flex-shrink: 0; display: block; width: clamp(40px, calc(60 / var(--inner) * 100vw), 60px); height: clamp(40px, calc(60 / var(--inner) * 100vw), 60px); background: url('/images/sub/icon-quote.svg') no-repeat center center; background-size: 60%;}
.vision-title .icon-quote.right {transform: scaleX(-1);}
.vision-title-txt .tit-line {display: block;}
.vision-list {display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border: 1px solid #ddd; list-style: none; margin: 0; padding: 0;}
.vision-item {display: flex; flex-direction: column; align-items: center; gap: var(--space-30); padding: var(--space-60); border-right: 1px solid #ddd;}
.vision-item:last-child {border-right: 0;}
.vision-no {display: flex; align-items: center; justify-content: center; padding: 0 var(--space-15); background: var(--secondary-color); border-radius: 80px; font-size: var(--font-size-14); font-weight: 700; line-height: 24px; color: #fff;}
.vision-txt {font-size: var(--font-size-18); line-height: 1.666em; text-align: center; color: #454545;}
.vision-desc {display: flex; flex-direction: column; gap: var(--space-30); margin-bottom: var(--space-60);}
.vision-desc h3 {margin-bottom: 7px; font-size: var(--font-size-22); color: var(--primary-color); font-weight: 600;}

.sec-value {background: url('/images/sub/bg-value.jpg') no-repeat center center; background-size: cover;}
.value-cnt {gap: var(--space-60);}
.value-photo {max-width: 570px; width: 47.5%;}
.value-list {display: flex; flex-direction: column; justify-content: space-between; gap: 10px;}
.value-item {display: flex; gap: 8px 24px; padding:var(--space-20) var(--space-30); border-radius: var(--radius-16); border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); color: rgba(255, 255, 255, 0.80);}
.value-item .tit {display: flex; align-items: center; gap: 12px; width: 85px; height: fit-content; font-size: var(--font-size-20); font-weight: 600; color: #fff;}
[lang="en"] .value-item .tit {width: 156px;}
.value-item .tit:before {content: ''; width: 16px; height: 1.4em; background: url('/images/sub/value-chk.svg') no-repeat center center; background-size: contain;}
.value-item .tit:after {content: ''; display: block; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.20); margin-left: auto;}
.value-item p {flex: 1; min-width: 0;}

/* About Us > 회사소개 */
.ap-post.ap-kr{font-family:Gellix,NotoSansKR,NotoSansCJK,Arita,sans-serif}
.ap-post sup{vertical-align:text-top;font-size:inherit;line-height:normal;position:static}
.ap-post img{max-width:100%}
.ap-post blockquote{font-style:normal;color:inherit}
.ap-post .only-pc{display:block}
@media screen and (max-width:720px){.ap-post .only-pc{display:none}}
.ap-post .only-mo{display:none}
@media screen and (max-width:720px){.ap-post .only-mo{display:block}}
.ap-post em{color:inherit}
.debug-console {position:fixed; bottom:2%; left:2%; z-index:9999; padding:10px;}
.debug-console button {margin:0 3px; padding:3px 4px 2px; background:rgba(0,0,0,.5); border:1px solid rgba(0,0,0,.3); font-size:14px; line-height:1; color:#fff;}
.debug-console button.is-active {background:rgba(0,0,0,1); color:yellow;}
.debug-console .log {margin:10px 0; font-size:16px; font-weight:bold; color:red;}
article.ap-post--story-2024{width:100%;position:relative;z-index:10;position:relative}
article.ap-post--story-2024 .ap-post__inner{--cont:1920;color:#000}
article.ap-post--story-2024 .colored--white{color:#fff}
article.ap-post--story-2024 .ap-logo{display:block;margin:auto; font-size: var(--font-size-72); line-height: 1em; font-weight: 700;}
article.ap-post--story-2024 .ap-section{position:relative;z-index:0;}
article.ap-post--story-2024 .ap-section--kv .ap-section__header{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center}
article.ap-post--story-2024 .ap-section--kv .ap-section__header .ap-logo{width:clamp(1px,calc(530 / var(--cont) * 100vw),530px)}
article.ap-post--story-2024 .ap-section--kv .ap-section__body{position: relative; width:100%;min-height:100vh;min-height:100dvh;background: var(--gradient-color);display:flex;justify-content:center;align-items:center;flex-direction:column}
article.ap-post--story-2024 .ap-section--kv .ap-section__body .scroll {position: absolute; bottom: 20px; left: 0; width: 100%; text-align: center; font-size: var(--font-size-20); line-height: 1.2em; font-family: 'SUIT'; color: #fff;}
article.ap-post--story-2024 .ap-section--kv .ap-section__body .scroll svg {animation:scrollDown .9s linear infinite alternate; }
article.ap-post--story-2024 .ap-section--kv .ap-section__body .top {display: block; letter-spacing: .3em;; margin-bottom: var(--space-40); color: rgba(255, 255, 255, 0.50); font-family: 'SUIT'; font-size: var(--font-size-20); line-height: 1.9em;}
article.ap-post--story-2024 .ap-section--kv .ap-section__body .top strong {}
article.ap-post--story-2024 .ap-section--kv .ap-section__title{text-align:center;font-size: var(--font-size-48); line-height: 1.1667em;  font-weight: 400;}
article.ap-post--story-2024 .ap-section--kv .ap-section__title strong {font-weight: 400; display: block; margin-bottom: var(--space-30);}

article.ap-post--story-2024 .ap-section--product{background: #F8F8F8;}
article.ap-post--story-2024 .ap-section--product .ap-section__wrapper{width:100%;height:100vh;height:100dvh;overflow:hidden;position:relative}
article.ap-post--story-2024 .ap-section--product .ap-item{width:100%;height:100vh;height:100dvh;background-color:#f6f6f6;overflow:hidden;display:grid;grid-template-columns:repeat(2,1fr);place-items:start center}
/* article.ap-post--story-2024 .ap-section--product .text--colored{ transition:color .5s;} */

article.ap-post--story-2024 .ap-section--product .ap-text{padding:clamp(1px,calc(90 / var(--cont) * 100vw),90px) clamp(1px,calc(20 / var(--cont) * 100vw),20px) 0;height:100%;box-sizing:border-box;}
article.ap-post--story-2024 .ap-section--product .ap-text h3 {line-height: 1.6667em;}
article.ap-post--story-2024 .ap-section--product .ap-img{width:100%;height:100vh;height:100dvh;position:relative}
article.ap-post--story-2024 .ap-section--product .ap-img__wrapper{position:relative;display:block;width:100%;height:100vh;height:100dvh;position:absolute;top:0}
article.ap-post--story-2024 .ap-section--product .ap-img a{position:relative;display:block;height:100%;font-size:clamp(9px,calc(18 / var(--cont) * 100vw),18px);font-weight:400;line-height:1.4444444444;letter-spacing:normal}
article.ap-post--story-2024 .ap-section--product .ap-img img{width:100%;height:100%;position:absolute;top:0;left:0;object-fit: cover;aspect-ratio:119 / 135;}
article.ap-post--story-2024 .ap-section--product .ap-item--2 .ap-text {order: 2;}
article.ap-post--story-2024 .ap-section--product .swiper{width:100%}
article.ap-post--story-2024 .ap-section--product .swiper .swiper-slide{text-align:center;background:#fff}
article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-prev{left:0}
article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-next{right:0}
article.ap-post--story-2024 .ap-section--product .swiper .swiper-pagination{position:absolute;bottom:3%;left:0;right:0}
article.ap-post--story-2024 .ap-section--product .swiper .swiper-pagination-bullet{border:0;width:clamp(6px,calc(12 / var(--cont) * 100vw),12px);height:clamp(6px,calc(12 / var(--cont) * 100vw),12px);margin:0 clamp(5px,calc(9 / var(--cont) * 100vw),9px);background-color:rgba(255, 255, 255, 0.6)}
article.ap-post--story-2024 .ap-section--product .swiper .swiper-pagination-bullet-active{background-color:#fff}
article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-lock{display:none}
article.ap-post--story-2024 .ap-section--product .swiper-button-next:after, .swiper-button-prev:after{all:unset}

@media screen and (max-width:1440px) {
    article.ap-post--story-2024 .ap-post__inner{--cont:1440}
    article.ap-post--story-2024 .ap-section--kv .ap-section__header .ap-logo{width:clamp(1px,calc(285 / var(--cont) * 100vw),285px)}
    article.ap-post--story-2024 .ap-section--kv .ap-section__header .ap-logo svg {width: 100%;}

    
    article.ap-post--story-2024 .ap-section--product .ap-section__wrapper{height:auto}
    article.ap-post--story-2024 .ap-section--product .ap-item{height:auto}
    article.ap-post--story-2024 .ap-section--product .ap-text{margin:0 clamp(1px,calc(20 / var(--cont) * 100vw),20px);padding:clamp(1px,calc(80 / var(--cont) * 100vw),80px) clamp(1px,calc(18 / var(--cont) * 100vw),18px) clamp(1px,calc(40 / var(--cont) * 100vw),40px);height:calc(100% - 0px)}
    article.ap-post--story-2024 .ap-section--product .ap-img{height:0;padding-top:112.5%}
    article.ap-post--story-2024 .ap-section--product .ap-img__wrapper{height:100%;}
    article.ap-post--story-2024 .ap-section--product .ap-img img{height:auto}
}


@media screen and (max-width:1024px){
    article.ap-post--story-2024 .ap-post__inner{--cont:1024}
}

@media screen and (max-width:640px){
    article.ap-post--story-2024 .ap-post__inner{--cont:640}
    article.ap-post--story-2024 .ap-section--kv .ap-section__header .ap-logo{width:clamp(1px,calc(456 / var(--cont) * 100vw),456px)}
    
    article.ap-post--story-2024 .ap-section--product .ap-item{grid-template-columns:1fr;justify-items:start}
    article.ap-post--story-2024 .ap-section--product .ap-text{margin:0;padding:clamp(1px,calc(40 / var(--cont) * 100vw),40px) clamp(1px,calc(50 / var(--cont) * 100vw),50px) clamp(1px,calc(110 / var(--cont) * 100vw),110px) clamp(1px,calc(60 / var(--cont) * 100vw),60px);width:auto;height:100%;}
    article.ap-post--story-2024 .ap-section--product .ap-img{height:100vw;padding-top:0;display:flex;justify-content:flex-start;align-items:center}
    article.ap-post--story-2024 .ap-section--product .ap-img__wrapper{flex:1 0 50%;height:100vw;position:relative;z-index:1}
    article.ap-post--story-2024 .ap-section--product .ap-img img{aspect-ratio:1}
    article.ap-post--story-2024 .ap-section--product .swiper{display:block;position:absolute;top:0;left:0}
    article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-next,article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-prev{width:clamp(1px,calc(64 / var(--cont) * 100vw),64px);height:clamp(1px,calc(64 / var(--cont) * 100vw),64px);background-color:rgba(255,255,255,.5);font-size:0;gap:0;display:flex;justify-content:center;align-items:center;position:absolute;top:50%;z-index:1;transform:translateY(-50%)}
    article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-next::before,article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-prev::before{margin-left:.1333vw;border:.015vw solid #000;transform:rotate(-135deg);border-bottom:0;border-left:0;content:"";width:clamp(1px,calc(12 / var(--cont) * 100vw),12px);height:clamp(1px,calc(12 / var(--cont) * 100vw),12px);display:inline-block;vertical-align:middle}
    article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-prev{left:0}
    article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-next{right:0}
    article.ap-post--story-2024 .ap-section--product .swiper .swiper-button-next::before{transform:rotate(45deg)!important}
    article.ap-post--story-2024 .ap-section--product .swiper .swiper-pagination-bullet{width:8px;height:8px;margin:0 clamp(1px,calc(6 / var(--cont) * 100vw),6px);}
}

.page-history {position: relative;}
.page-history:before {content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #ddd;}
.page-history:after {content: ''; position: absolute; top: 0; left: 50%; width: clamp(16px, calc(27 / var(--inner) * 100vw), 27px); height:clamp(16px, calc(27 / var(--inner) * 100vw), 27px); background: #fff; border-radius: 100%; border: clamp(4px,calc(6 / var(--inner) * 100vw),6px) solid var(--secondary-color); transform: translateX(-50%);}
.history-item {display: grid; grid-template-columns: 1fr 1fr; padding-top: var(--space-100);}
.history-item:nth-child(even) .history-img {order: 2; padding-right: 0; padding-left: var(--history-gap);}
.history-item:nth-child(even) .history-txt {order: 1; padding-left: 0; padding-right: var(--history-gap);text-align: right;}
.history-img {padding-right: var(--history-gap);}
.history-txt {display: flex; flex-direction: column; justify-content: center; padding-left: var(--history-gap);}
.history-txt li:not(:last-child) {margin-bottom: 5px;}
.history-year {position: relative;}
.history-year:before {content: ''; position: absolute; top: 50%; left: calc(var(--history-gap) * -1); width: clamp(12px,calc(20 / var(--inner) * 100vw),20px); height: clamp(12px,calc(20 / var(--inner) * 100vw),20px); background: #fff; border: clamp(4px,calc(6 / var(--inner) * 100vw),6px) solid var(--primary-color); border-radius: 100%; transform: translate(-50%, -50%);}
.history-item:nth-child(even) .history-year:before {left: auto; right: calc(var(--history-gap) * -1); transform: translate(50%, -50%);}
.history-year:after {content: ''; position: absolute; top: 50%; left: calc(var(--history-gap) * -1 + var(--space-10) * 2); width: calc(var(--history-gap) - var(--space-10) * 2 - clamp(6px,calc(10 / var(--inner) * 100vw),10px)); height: 1px;border-top: 1px dashed var(--primary-color);}
.history-item:nth-child(even) .history-year:after {left: auto; right: calc(var(--history-gap) * -1 + var(--space-10) * 2);}

.direction-map {position: relative; width: 100%; height: clamp(270px, calc(520 / var(--inner) * 100vw), 520px);}
.direction-map iframe {width: 100% !important; height: 100% !important;}
.direction-map .direction-address {position: absolute; z-index: 1; bottom: clamp(15px, calc(55 / var(--inner) * 100vw), 55px); left: 0; width: 100%;}
.direction-map .wrap {width: fit-content; padding: var(--space-40); background: var(--gradient-color);}
.direction-map h3 {position: relative; padding-bottom: var(--space-20); margin-bottom: var(--space-20);}
.direction-map h3:after {content: ''; position: absolute; left: 0; bottom: -1px; width: 30px; height: 2px; background: rgba(255, 255, 255, 0.40);}
.direction-boxes .contain {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30);}
.direction-box {padding: var(--space-40); border: 1px solid #ddd; border-radius: var(--radius-24);}
.direction-box h3 .icon {margin-right: 8px;}
.direction-box h3:after {content: ''; display: block; width: 1px; height: 14px; background: #ddd; margin: 0 var(--space-20);}

.page-oem .contain {display: flex; justify-content: flex-end; max-width: 1980px;}
.oem-title {flex: 1; max-width: 700px; padding: var(--space-120) 0;}
.oem-title h3 {border-bottom: 1px solid #ddd; padding-bottom: var(--space-30); margin-bottom: var(--space-30);}
.oem-title p:not(:last-child) {margin-bottom: var(--space-15);}
.oem-cnt {width: 50%;}
.oem-cnt .num {opacity: .6; margin-bottom: 8px;}
.oem-boxes {display: grid; grid-template-columns: repeat(3, 1fr);}
.oem-boxes .icon {width: fit-content; margin: 0 auto; padding: var(--space-10); border-radius: 100%; background: var(--secondary-color); line-height: 0;}
.sec-oem.type2 .oem-boxes .icon {background: var(--primary-color);}
.oem-box {display: flex; flex-direction: column; padding: var(--space-50) 10px;}
.oem-box h4 {flex: 1;}
.oem-box:nth-child(odd) {background: rgba(96, 65, 24, 0.05);}
.sec-oem.type2 .oem-box:nth-child(odd) {background: rgba(203, 160, 66, 0.05);}
.page-partner .main-section {padding: 0;}
.emphasis-txt .contain {display: flex; align-items: center; justify-content: center; gap: var(--space-25);}
.emphasis-txt .contain:before, .emphasis-txt .contain:after {content: ''; display: block; width: 30px; height: 22px; background: url('/images/sub/icon-quote.svg') no-repeat center center; background-size: contain;}
.emphasis-txt .contain:after {transform: scaleX(-1);}
.emphasis-txt span {max-width: fit-content;}

.page-rnd .contain {display: flex; gap: 25px var(--space-60);}
.page-rnd section:nth-child(even) .contain {flex-direction: row-reverse;}
.page-rnd section {padding: var(--space-100) 0;}
.page-rnd section:nth-child(odd) {background: #F7F5F3;}
.page-rnd.type2 section:nth-child(odd) {background: #fff;}
.page-rnd.type2 section:nth-child(even) {background: #F7F5F3;}
.rnd-img {width: 50%;}
.rnd-head:after {content: ''; display: block; width: 40px; height: 3px; background: var(--secondary-color); margin: var(--space-30) 0;}
.page-rnd section:nth-child(even) .rnd-txt {text-align: right;}
.page-rnd section:nth-child(even) .rnd-head:after {margin-left: auto;}

.certification-list {padding: var(--space-100) 0; background: #F8F8F8; overflow: hidden;}
.certification-list .items {max-width: 720px; margin: 0 auto;}
.certification-list .slick-list {overflow: visible;}
.certification-list .slick-slide {padding: 0 var(--space-30);}
.cert-img {width: fit-content; margin: 0 auto var(--space-30);}
.certification-list .slick-dots {margin-top: var(--space-60); display: flex; justify-content: center; line-height: 0; gap: 9px;}
.certification-list .slick-dots button {display: block; width: clamp(6px, calc(12 / var(--inner) * 100vw), 12px); height: clamp(6px, calc(12 / var(--inner) * 100vw), 12px); background: rgba(0, 0, 0, 0.1); border-radius: 100%; border: 0; overflow: hidden; text-indent: -9999em;}
.certification-list .slick-dots .slick-active button {background: var(--primary-color);}
.sec-india-map {position: relative;}
.india-map {height: clamp(250px, calc(520 / var(--inner) * 100vw), 520px);}
.india-map iframe {width: 100% !important; height: 100% !important;}
.sec-india-map .contain {position: absolute; left: 50%; transform: translateX(-50%); width: 100%; bottom: clamp(20px, calc(56 / var(--inner) * 100vw), 56px);}
.india-map-box {width: fit-content; padding: var(--space-40); background: linear-gradient(102deg, #604118 0%, #CBA042 100%);;}
.india-map-box .tit:after {content: '';display: block; width: 30px; height: 2px; margin: var(--space-20) 0; background: rgba(255, 255, 255, 0.40);}
.sec-india-slide .slide-for {position: relative;}
.sec-india-slide .slick-dots {position: absolute; left: 0; bottom: var(--space-30); width: 100%; display: flex; justify-content: center; gap: 10px; line-height: 0;}
.sec-india-slide .slick-dots button {display: block; width: 12px; height: 12px; border-radius: 100px; border: 0; background: rgba(255, 255, 255, 0.4); overflow: hidden; text-indent: -99999em;}
.sec-india-slide .slick-dots .slick-active button {width: 24px; background: #fff;}
.sec-india-slide .slide-nav .slick-list {margin: 0 -10px;}
.sec-india-slide .slide-nav .slick-slide {padding: var(--space-20) 10px;}