@charset "utf-8";

/* layout */
/*
body:not(.body-dark) #hd.open,
.nav-open #hd{background: #fff !important}
*/
#hd.open {background-color: rgba(0,0,0,0.8);}
#hd.open a,
.body-transparent #hd a{color:#fff}
.open #gnb a{color:#fff !important}
#hd.open::after{content: "";position: absolute;z-index: -1; top: 0;left: 0;width: 100%;height: 100%;backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);;}


#gnb{display: block !important}
#gnb>ul,
#sitemap .sitemap{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    width:min(1200px,calc(100vw - 320px));
    margin-right:auto;
    margin-left:auto;
}
#gnb>ul>li{min-width:0;margin:0}
html[lang="en"] #gnb>ul,
html[lang="en"] #sitemap .sitemap{width:min(1360px,calc(100vw - 320px))}
#sitemap .sitemap>li,
#sitemap .sitemap>li+li{min-width:0;padding-right:0;padding-left:0}
#gnb ul ul{display:none !important}
#gnb>ul>li>a{width:fit-content}
#gnb>ul>li>a:before{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;margin:1em 0;border:3px solid;border-radius:9em;opacity:0;transform:translateX(-50%)}
#gnb>ul .active a:before{opacity: 1}
#gnb a:hover,#gnb a:focus,
.menu-mypage-link a:hover,.menu-mypage-link a:focus,
.sitemap a:hover,.sitemap a:focus{ color:#000}
.h4.v2{font-size: 24px !important;}

#ft{z-index: 10;overflow: hidden;}
#ft img{max-width: 120px;}
html[lang="en"] #ft .ft-info li span{flex:0 0 170px;width:170px;padding-right:16px;white-space:normal}
#ft::before{content:"" ;position: absolute;width:calc(100% / 3);height: calc(100% - 30px);top: 0;left: 0;background-color: transparent; border-right: 1px solid rgba(255,255,255,0.12);}
#ft>div>div:last-child{background-color: #000;position: relative;padding-top: 27px;}
#ft>div>div:last-child::before{content:"" ;position: absolute;width:100vw;height:1px;top: 0;left: 50%;transform: translateX(-50%); background-color:  rgba(255,255,255,0.12);}
#ft>div>div:last-child>*{margin-bottom: 0 !important}
.ft-mn+.row{margin-top: 2.5rem;}
/* typo */
h3.display-3.snd{margin-top: 130px;}
h3.display-3:not([class*=mb-]){margin-bottom: 2.222rem !important;}
/* grid */
.row:not(.no-gutters){margin-left: -20px;margin-right: -20px;}
.row:not(.no-gutters)>[class^=col],
.row:not(.no-gutters)>[class*= col]{padding-left: 20px;padding-right: 20px;}
/* form */
.btn-fix{width: 220px;}
.btn-lg{font-size: 1.111rem}
.btn-sm{min-width: 8.75em}
.btn-g{width: 251px;}
.page-item:first-child{margin-right: 1rem;}
.page-item:last-child{margin-left: 1rem;}

/* navs */ 
.nav-pills{text-align: center;width: 100%;margin-bottom: 80px;background-color: #F8F8F8 ;}
.nav-pills .nav-item{flex:1; line-height: 1;letter-spacing: -.05em;white-space: nowrap;background-color: #fff;} 
.nav-pills .nav-item a{margin:0 -1px -1px 0; padding: 1rem ;border: 1px solid rgba(17, 17, 17, 0.20); color: rgba(17, 17, 17, 0.25);}
.nav-pills .nav-item a.active{color: #fff;background-color: #111;}
.nav-pills .nav-item:last-child:after{content: none}
.nav-pills .nav-link{border-radius: 0;border: 0}
.nav-pills-step{max-width: 480px;margin-bottom: 60px}
.nav-pills-step .active .num{font-weight: 600}

.nav-pills.nav-full .nav-item{flex: 1; }
.nav-pills .nav-item{ width: calc(100% / 6) !important;min-width: calc(100% / 6) !important;flex-grow: 0;}
.nav-pills .nav-item:nth-child(-n+6){flex-grow: 1;}


/* index */
#index .btn{min-width: 220px;}
#index-nav .swiper-pagination-bullet:only-child{display: block !important;}
#index.index-scroll-native{
    overflow-x: clip;
    overflow-y: visible;
    height: auto;
}
#index.index-scroll-native #index-visual-slide{
    overflow: hidden;
    max-width: 100%;
}
#index.index-scroll-native > .swiper-wrapper{
    display: block;
    height: auto;
}
#index.index-scroll-native > .swiper-wrapper > .swiper-slide:not(#index-visual):not(#index-footer){
    height: auto;
    min-height: 100vh;
}
#index.index-scroll-native #index-nav{
    transform: translate3d(0, -50%, 0);
}
#index.index-scroll-native #index-nav li{
    display: block;
    cursor: pointer;
}
#index.index-scroll-native .is-reveal-pending h2,
#index.index-scroll-native .is-reveal-pending h2 + *,
#index.index-scroll-native .is-reveal-pending h2 + * + *,
#index.index-scroll-native .is-reveal-pending h2 + * + * + *,
#index.index-scroll-native #index-about.is-reveal-pending img,
#index.index-scroll-native #index-news.is-reveal-pending .col-lg-8{
    opacity: 0;
}
#index.index-scroll-native .is-revealed-section h2{
    animation: fadeIn 1s .4s both;
}
#index.index-scroll-native .is-revealed-section h2 + *{
    animation: fadeIn 1s .8s both;
}
#index.index-scroll-native .is-revealed-section h2 + * + *{
    animation: fadeIn 1s 1.2s both;
}
#index.index-scroll-native .is-revealed-section h2 + * + * + *,
#index.index-scroll-native #index-about.is-revealed-section img,
#index.index-scroll-native #index-news.is-revealed-section .col-lg-8{
    animation: fadeIn 1s 1.6s both;
}
#index.index-scroll-native #index-inquiry.is-reveal-pending .index-inquiry-visual,
#index.index-scroll-native #index-inquiry.is-reveal-pending .index-inquiry-panel{
    opacity: 0;
}
#index.index-scroll-native #index-inquiry.is-revealed-section .index-inquiry-visual{
    animation: fadeIn 1s .4s both;
}
#index.index-scroll-native #index-inquiry.is-revealed-section .index-inquiry-panel{
    animation: fadeIn 1s .8s both;
}
@media (prefers-reduced-motion: reduce){
    #index.index-scroll-native{
        scroll-behavior: auto;
    }
    #index.index-scroll-native .is-reveal-pending h2,
    #index.index-scroll-native .is-reveal-pending h2 + *,
    #index.index-scroll-native .is-reveal-pending h2 + * + *,
    #index.index-scroll-native .is-reveal-pending h2 + * + * + *,
    #index.index-scroll-native #index-about.is-reveal-pending img,
    #index.index-scroll-native #index-news.is-reveal-pending .col-lg-8{
        opacity: 1;
    }
    #index.index-scroll-native .is-revealed-section h2,
    #index.index-scroll-native .is-revealed-section h2 + *,
    #index.index-scroll-native .is-revealed-section h2 + * + *,
    #index.index-scroll-native .is-revealed-section h2 + * + * + *,
    #index.index-scroll-native #index-about.is-revealed-section img,
    #index.index-scroll-native #index-news.is-revealed-section .col-lg-8,
    #index.index-scroll-native #index-visual .swiper-slide-active .bg{
        animation: none;
        opacity: 1;
    }
}
#index-reference::before{content: ""; position: absolute;width: 50%;height: 100%;left:50%;background-color:#F8F8F8 ;}
#index-reference .col-lg-4{position: relative;z-index: 10;}
/* #index-reference-slide{width: calc(50vw + (467px / 2));overflow: hidden;} */
#index-reference-slide .swiper-slide{width: 467px;opacity: 0;}
#index-reference-slide .swiper-slide-active,
#index-reference-slide .swiper-slide-active ~ .swiper-slide{opacity: 1 !important;}
#index-news strong{font-size: 16px;}
#index-news .row>*:not(.news-thumb){padding-top: 30px;}
#index-news li:last-child a{border-bottom: 0 !important;}

#index-inquiry .index-inquiry-layout {
    padding-right: 4rem;
    padding-left: 4rem;
}
@media (max-height: 820px) and (min-width: 992px) {
    #index-inquiry .index-inquiry-kicker{margin-bottom:.55rem;}
    #index-inquiry h2{font-size:clamp(1.75rem,2.25vw,2.75rem);}
    #index-inquiry .index-inquiry-description{margin-top:1rem;font-size:.82rem;line-height:1.55;}
    #index-inquiry .index-inquiry-panel{padding:0 0 1rem;}
    #index-inquiry .index-inquiry-grid{gap:.42rem .65rem;}
    #index-inquiry .index-inquiry-actions{margin-top:2.5rem;}
}

/* sub */
.page-container{ padding:210px 0 180px;}
.page-hd{ position: relative;padding-bottom:35px;}
.page-hd h2{font-size: 100px;line-height: 1.1;}
.page-hd-ko h2{font-size:80px}
.page-hd h2+a{display: none;}
.page-hd h2 ~ ul{display: inline-flex; margin-top:30px;}
.page-hd h2 ~ ul li{position: relative; margin-right: 44px;font-size: 20px }
.page-hd h2 ~ ul li a::after{content: "";position: absolute;top: 2rem;left:calc(50% - 2px);width: 5px;height: 5px;background-color: #fff;border-radius: 3px;}
.page-hd h2 ~ ul li:hover,
.page-hd h2 ~ ul li.active{font-weight: 700;} 
.page-hd h2 ~ ul li.active a::after{background-color: #111;}
.page-visual{ animation: fadeIn 0.5s both;} 
.page-visual img{width:100%}
.page-visual+.contents{margin-top: 90px;}
.contents .category-absolute{position: absolute; margin-top: -90px;}

/* board */
.board-search{margin-bottom: 60px;justify-content: flex-end;}
.board-card>div{margin-bottom: 40px;}
.board-card div.cont>a,
.board-card div.cont>div.a{position: absolute;top: 0;bottom: 0;right: 0;left: 0; display: flex;flex-direction: column;justify-content: space-between;padding: 60px 40px;}
.board-card div.cont::before{content: "";display: block; width: 100%;padding-top:75%;}
.board-card.v2 div.cont::before{content: "";display: block; width: 100%;padding-top:115%;}
.board-card.v2 div.cont>a,
.board-card.v2 div.cont>div.a{padding: 40px;}
.board-thumb .cont{margin-bottom: 20px;padding: 60px 60px calc(60px - 0.5rem);}
.board-thumb .cont>a{display: flex;}
.board-thumb .cont>a>div:first-child{width: calc(100% - 360px);}
.board-thumb img{max-width: 200px;margin-left: 160px;}
.board-thumb .down{}
.newsletter-list {padding-bottom: 80px;padding-top: 40px;}
.newsletter-list .board-list>div {padding:40px 35px 40px !important;}
.newsletter-list:not(.v2) .board-list>div:not(:nth-child(4n)){border-right: 1px solid #E5E5E5;}
.newsletter-list.v2 .board-list>div:not(:nth-child(3n)){border-right: 1px solid #E5E5E5;}
.newsletter-list.v2 img{border: 1px solid #E5E5E5;}
.board-gallery{padding-bottom: 60px;}
.board-gallery>div:nth-child(n+4){padding-top: 80px;}
.board-navi .button{padding: 32px 30px}

.detail-reference{padding:50px 60px;margin-bottom: 50px;}
.detail-reference dl{display: flex;}
.detail-reference>.row>div:first-child dl{border-right: 1px solid #e5e5e5;}
.detail-reference-en{padding:44px 40px;}
.detail-reference-en dt{font-size:.9rem;min-width:5.5em;}
.detail-reference-en>.row>div:last-child dt{min-width:6.5em;white-space:nowrap;}
.detail-reference-en dd{font-size:.75rem;width:100%;}
.detail-reference-en dl ul li span{width:6em;min-width:6em;white-space:nowrap;}
.detail-reference-en dl ul li p{line-height:1.4;}
.detail-contact>*:last-child{text-align: right;}
/* product사업분야 */

.product-summary>div{padding-left: 100px;}
.product-summary .btn-wrap .btn-fix{flex-basis: 0;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}
.product-nav{padding-top: calc(90px + 20px);}
#prodCont {padding-top: 183px;}
#prodCont>div{padding-top: 86px !important;}
.product-detail .swiper-slide{opacity: 0.2;}
.product-detail .swiper-slide-active,
.product-detail .swiper-slide-active+.swiper-slide,
.product-detail .swiper-slide-active+.swiper-slide+.swiper-slide {opacity:1;}
#prodCont .swiper-nav-page{display: none;}
#prod-case .img{margin-bottom:25px}
.cs-btn a>i{display: none;}

/* About */
#about-2{text-align: right;}
#about-2 h3 span{position: absolute;white-space: nowrap;opacity:0; transform:translate(0,-50%);transition:opacity 1s}
#about-2 h3 .active{opacity:1}
#about-2 h3{position: sticky;top:50%;float: left;margin:25% 0 30%; text-align: left}
#about-2 img{margin:2rem 0}
#about-3 h4{margin:.4em 2em; font-size:1.4rem}
#about-4>div{display: flex;align-items: center;justify-content: center;flex-direction:column;overflow: hidden;height:calc(100vh - 90px); position: sticky;top:90px;}
#about-4 ul{position: absolute;left:60%;top:50%;transform:translate(0,-50%);transition:1s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
#about-4 li>*{width: 320px; height:400px;padding:30px; }
#about-4 .about-pagination{display: none;}
#about-4.i1 ul{transition-duration:2s}
#about-4 li{position: absolute;top:0;left:0;transition:transform 1s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
#about-4.i1 .ani-obj{transform:translate(-360px,0);transition-delay:1s; }
#about-4.i1 ul{transform:translate(-360px,-50%);}
#about-4.i1 li{transition-duration:2s}
#about-4.i1 li:nth-child(2){transform: translate(360px,0)}
#about-4.i1 li:nth-child(3){transform: translate(720px,0)}
#about-4.i1 li:nth-child(4){transform: translate(1080px,0)}
#about-4.i1 li:nth-child(5){transform: translate(1440px,0)}
#about-4.i1 li:nth-child(6){transform: translate(1800px,0)}
#about-4.i1 li:nth-child(7){transform: translate(2160px,0)}
#about-4.i1 li:nth-child(8){transform: translate(2520px,0)}
#about-4.i1 li:nth-child(9){transform: translate(2860px,0)}
#about-4.i2 .ani-obj{transition:none}
#about-4.i3 .ani-obj{opacity:0;transition:1s}
/*
#about-4.i2 .ani-obj{transition:3s;transform:translate(-2520px,0);}
#about-4.i3 .ani-obj{opacity:0;transform: translate(-4320px,0)}
*/
#about-4.i3 footer{opacity:1; pointer-events:auto}
.color-box p span+span{margin-left: 1em;}

.about-history .year{top: 9rem; }
.about-history>div{padding-top:50px;}
.history-cont ul{padding-bottom: 9rem;}
#vision1{display: flex;justify-content: center;align-items: center;}
#vision1>p{font-size: 28px;padding-bottom: 3rem !important;}
.contect1{display: flex;justify-content: center;}
.contect1>div{padding:0 65px;position: relative;}
.contect1>div:not(:last-child)::after{content: ""; position: absolute;top:15%;right: 0; width: 1px; height:70%;background-color: #ccc;}
#patent .caption2{font-size: 15px;}
#patentModal .modal-dialog{max-width: 600px;}
#patentModal .close{transform: translateX(100%);}
.root_daum_roughmap .wrap_map{height:520px !important;}
.contect-showroom-detail {margin-top: 100px; padding-top:60px;} 

/* esg  */
.esg-box{padding: 70px;margin-top:60px;}
.esg-box>div>div{padding-left: 20px;padding-right: 20px;}
.esg-vision-box{padding: 100px;}
#esg-vision {margin-top: 50px;}
#esg-vision a+div{padding: 50px 0 120px;}
#esg-vision a+div.show{display: flex;}
#esg-vision a+div>div:last-child{flex: 1 ; padding-left: 2.2222rem;}
#esg-v3 .esg-box{padding: 1.5rem;margin-top: 1.5rem;} 
.recruit-tit {margin-bottom: 60px;}
.recruit-box>div{padding: 50px !important;} 
.board-card.recruit-benefit div.cont::before{padding-top: 57.6%;}
.board-card.recruit-benefit div.cont>div.a{padding: 35px;}
.board-card.recruit-process{padding: 40px;}
.recruit-benefit{margin-left: -10px !important;margin-right: -10px !important;}
.recruit-benefit>div{padding-left: 10px !important;padding-right: 10px !important;margin-bottom: 20px !important;}
.recruit-process>div:not(:last-child)::after{content: "";position: absolute;top: calc(50% - 2rem);left: 100%;background: url(../img/ESG/ic_arw_process.svg)no-repeat 0 0 / 26px 9px; width:26px; height: 9px;transform: translateX(-50%);}
.recruit-process div.cont>*{padding: 0 !important;}
.esg-recruit-bn{height: 360px;}

/* CS */
.form-frame{padding:0 20px 20px;}
#cs-ask p.h1{padding-top: 80px}
#as-ask p.h1{padding-top: 40px}
.cs-write .form-group {display: flex;margin-bottom: 2.2222rem;}
.cs-write .label{width: 8rem;}
.cs-write input[type=text]:not(.w-100),
.cs-write select{max-width: 608px;} 
.cs-write select.short{max-width: 320px !important;}
.cscenter>div>div{height: 300px;padding: 36px;}
.cscenter h4{font-size: 24px;}
.cscenter .h1{font-size: 36px;}
.cs-snd{margin-top: 6.6666rem;}
.cs-service>div>div{height: 336px;padding: 32px;word-break: break-all;}
.cs-snd h4{margin-bottom: 2.2222rem;}
.cs-service dl dt{font-size: 24px;}
.cs-location li span{width: 40px;height: 46px;font-size: 20px;}
.location-list{top: 50%;left: 0;width: 400px; transform: translate(-50% , -50%); padding: 50px;}
.cs-map{margin-top: 168px;}
.cs-map h3{font-size:2.22rem;line-height: 1.5;}
#faq{margin-bottom:60px;}
#faq [class*=faq-]::before {line-height: 40px;font-size:19px;width: 40px;height: 40px;}

/* modal */
#newsLetterModal .subscribe-body .hd{display: flex; justify-content:space-between; align-items:flex-end}

@media (min-width: 1920px) {
}
@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
    #ft::before{width:calc(1440px / 3);  left: calc( (100% - 1440px) / 2 );}
    #ft h1+.row>div:first-child{padding-right: 60px;}
    #ft h1+.row>div:last-child{padding-left: 60px;}
}

@media (max-width: 1400px) {
    #acc{display: none !important;}
}