@charset "utf-8";



#about-page .sub-visual{background:url(../img/sub/about/visual_bg_pc.jpg) no-repeat center center / cover;}

#about-page .sec-com{padding:var(--gap-sub) 0;}



#about-page .con-tit .tit-eng{margin-bottom:30px;font-size:20px;color:var(--main);font-family: var(--eng1);font-weight: 600;}

#about-page .con-tit h3{font-size:var(--sub-con-tit);line-height:1.3;letter-spacing: -0.92px;font-weight:600;}

#about-page .con-txt:has(.con-tit)>p{margin-top:30px;line-height:1.5;letter-spacing: -0.4px;color:var(--gray-6);font-size:var(--sub-con-txt);}





#about-overview .con-l,

#about-ceo .con-l{width:calc(100% - 750px);}

#about-overview .con-r,

#about-ceo .con-r{width:650px;}

#about-overview .con-r .con-img{width:100%;aspect-ratio: 650/420;}

#about-ceo .con-r .con-img{width:100%;aspect-ratio: 650/500;}



#about-overview .con-img{background:url(../img/sub/about/overview_img.jpg) no-repeat center center / cover;}



#about-ceo .con-txt:has(.con-tit)>p span{display:block;margin-top:10px;}

#about-ceo .inner{flex-direction: row-reverse;}

#about-ceo .con-img{background:url(../img/sub/about/ceo_img.jpg) no-repeat center center / cover;}





#about-prog{background: linear-gradient(180deg, #FBF8F6 -2.82%, #FFF 68.03%);}

#about-prog .con-txt{margin-bottom:var(--gap-tit);}

#about-prog .con-img img{width:100%;}



#about-features{background:var(--main)}

#about-features .swip-nav{gap:10px;}

#about-features .swip-nav>div{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255, 255, 255, 1);display:flex;align-items:center;justify-content:center;}

#about-features .swip-nav>div.swiper-button-disabled{opacity:0.5;pointer-events:none;}

#about-features .con-top{margin-bottom:var(--gap-tit)}

#about-features .swip-con{margin-left:calc((100% - 1400px)/2);}

#about-features .swiper-slide{width:444px;}

#about-features .swiper-slide .con-img{width:100%;margin-bottom:30px;aspect-ratio: 444/300;}

#about-features .swiper-slide.s1 .con-img{background:url(../img/sub/about/features_img1.jpg) no-repeat center center / cover;}

#about-features .swiper-slide.s2 .con-img{background:url(../img/sub/about/features_img2.jpg) no-repeat center center / cover;}

#about-features .swiper-slide.s3 .con-img{background:url(../img/sub/about/features_img3.jpg) no-repeat center center / cover;}

#about-features .swiper-slide.s4 .con-img{background:url(../img/sub/about/features_img4.jpg) no-repeat center center / cover;}

#about-features .swiper-slide.s5 .con-img{background:url(../img/sub/about/features_img5.jpg) no-repeat center center / cover;}



#about-features .swiper-slide .con-txt{width:100%;}

#about-features .swiper-slide .con-txt span{font-size:14px;font-weight:600;font-family: var(--eng1);}

#about-features .swiper-slide .con-txt h4{margin-top:10px;font-size:20px;font-weight:600;font-family: var(--eng1);}

#about-features .swiper-slide .con-txt span{display:block;font-family: var(--eng1);font-size:var(--font16);font-weight:500;color:#fff;letter-spacing: -0.32px;text-decoration: underline;}

#about-features .swiper-slide .con-txt p{font-size:var(--font16);color:rgba(255, 255, 255, .6) !important;line-height:1.5;letter-spacing: -0.28px;font-weight:400;}

#about-features .swiper-slide .con-txt h4{margin:10px 0 16px;font-size:26px;font-weight:600;}

#about-features .swiper-pagination-fraction {width:fit-content;font-size:18px;font-family: var(--eng1);}



#about-history .con-top{margin-bottom:var(--gap-tit)}

#about-history .con-tit p{margin-top:16px;line-height:1.5;letter-spacing: -0.4px;color:var(--gray-6);font-size:var(--sub-con-txt);}

#about-history .history-item{display:flex;width:100%;}

#about-history .history-item>div{width:50%;gap:30px;}

#about-history .history-item:not(:last-child){margin-bottom:60px;}

#about-history .history-item .year{font-size:40px;font-weight:600;font-family: var(--eng1);color:var(--main);line-height:1;}

#about-history .history-item dl{position:relative;line-height:1.5;letter-spacing: -0.36px;font-size:var(--font18);color:var(--bk);padding-left:16px;gap:10px;}

#about-history .history-item dl::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--gray-d);}

#about-history .history-item dl:not(:last-child){margin-bottom:6px;}

#about-history .history-item dl dt{font-weight:600;}

#about-history .history-item .certify-img{margin-top:20px;}

#about-history .history-item .certify-img ul{display:flex;gap:10px;flex-wrap:wrap;}

#about-history .history-item .certify-img ul li{width:calc((100% - 20px) / 3);}

#about-history .history-item .certify-img ul li img{width:100%;}



#about-history .history-item>div{position:relative;}

#about-history .history-item>div::before{content:'';position:absolute;left:-8px;top:12px;width:16px;height:16px;border-radius:50%;background:#fff;z-index:5;border:4px solid var(--main);filter: drop-shadow(0 4px 4px rgba(188, 54, 45, 0.20));}

#about-history .history-con{position:relative;}

#about-history .history-con::before{content:'';position:absolute;left:50%;transform: translateX(-50%);top:16px;width:1px;height:calc(100% - 16px);background:var(--main);z-index:2;}

#about-history .history-txt{padding-top:5px;}





#about-clients{background:var(--light-gray)}

#about-clients .con-top{margin-bottom:var(--gap-tit)}

#about-clients .con-tit p{margin-top:16px;line-height:1.5;letter-spacing: -0.4px;color:var(--gray-6);font-size:var(--sub-con-txt);}

#about-clients .client-logo-list{display:flex;flex-wrap:wrap;gap:12px;}

#about-clients .client-logo-list li{width:calc((100% - 48px) / 5);}

#about-clients .client-logo-list li img{width:100%;}



#about-location .con-top{margin-bottom:var(--gap-tit)}

#about-location .con-top dl{gap:16px;font-size:22px;}

#about-location .con-top dl::before{content:'';display:inline-block;width:24px;height:24px;margin-right:-8px;z-index:1;}

#about-location .con-top dl:first-child::before{background:url(../img/sub/about/ico_location.svg) no-repeat center center / contain;}

#about-location .con-top dl:last-child::before{background:url(../img/sub/about/ico_phone.svg) no-repeat center center / contain;}

#about-location .con-top dl dt{font-weight:600;color:var(--bk);font-family: var(--eng1);}

#about-location .con-top dl dd{line-height:1;}

#about-location .location-info{gap:30px;}



#about-page .map-area{width:100%;aspect-ratio: 1/0.4;}

#daumRoughmapContainer1770014542659{width:100%;height:100%;border-radius: 20px;overflow:hidden;border:none !important;}

#daumRoughmapContainer1770014542659 .cont{display:none !important;}

#daumRoughmapContainer1770014542659.root_daum_roughmap .wrap_map{height:100% !important;}





#about-btn-area .inner{gap:20px;}

#about-btn-area .inner>a{width:calc((100% - 20px) / 2);height:180px;padding:0 50px;}

#about-btn-area .inner>a h4{margin-bottom:6px;font-size:28px;font-weight:700;line-height:1.5;letter-spacing: -0.56px;}

#about-btn-area .inner>a p{font-size:var(--font16);line-height:1.5;letter-spacing: -0.32px;font-weight:400;}

#about-btn-area .portfolio-btn{background:var(--bk);}

#about-btn-area .price-btn{background:var(--main);}

#about-btn-area .ico-wrap{width:130px;height:130px;}

#about-btn-area .portfolio-btn .ico-wrap{background:url(../img/sub/about/ico_portfolio.svg) no-repeat center center / contain;}

#about-btn-area .price-btn .ico-wrap{background:url(../img/sub/about/ico_inquiry_btn.svg) no-repeat center center / contain;}



/*팝업*/

.popup-dim.prog-pop{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:1000;align-items:center;justify-content:center;}

.prog-pop .popup{display:inline-block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align: right;}

.prog-pop .popup-close{margin-bottom:10px;}

area:hover {cursor: pointer;}

.prog-pop #popup-img{display:block;}

.prog-pop .portrait #popup-img{max-height:600px;}





@media screen and (max-width:1450px){

  #about-features .swip-con{margin-left:50px;}

}





@media screen and (max-width:1200px){

  #about-overview .con-r, #about-ceo .con-r{width:55%;}

  #about-overview .con-l, #about-ceo .con-l{width:calc(45% - 30px);}

  /* .prog-pop .portrait #popup-img{max-height:none;width:80vw;max-width:800px;} */

  .prog-pop .land #popup-img{max-height:none;width:80vw;max-width:800px;}

  .prog-pop .popup-close svg{width:24px;height:24px;}

}





@media screen and (min-width:1025px){

  #about-history .history-item:has(>.con-r){flex-direction: row-reverse;}

  #about-history .history-item .con-l{flex-direction: row-reverse;}

  #about-history .history-item .con-l dl{flex-direction: row-reverse;padding-left:0;padding-right:16px;}

  #about-history .history-item .con-l dl::before{left:auto;right:0;}

  #about-history .history-item .con-l .certify-img ul{justify-content: flex-end;}

  #about-history .history-item .con-l{padding-right:56px;}

  #about-history .history-item .con-r{padding-left:56px;}

  #about-history .history-item>div.con-l::before{left:auto;right:-8px;}



}



@media screen and (max-width:1024px){

  #about-ceo .inner{flex-direction: row;}

  #about-ceo .inner,

  #about-overview .inner{flex-wrap: wrap;}

  #about-overview .con-l, #about-ceo .con-l{width:100%;}

  #about-overview .con-r, #about-ceo .con-r{width:100%;margin-top:24px;}

  #about-overview .con-img, #about-ceo .con-img{width:100%;}

  #about-overview .con-txt, #about-ceo .con-txt{width:100%;text-align: center;}

  #about-overview .con-txt p span, #about-ceo .con-txt p span{display:block;margin-top:10px;}

  #about-overview .con-txt p span{font-size:16px;}

  #about-page .con-tit .tit-eng{margin-bottom:12px;}

  #about-page .con-txt:has(.con-tit)>p{margin-top:12px;}

  #about-prog .con-tit h3{font-size:26px;}

  #about-features .swip-con{margin-left:30;}

  #about-history .history-item>div{width:100%;padding-left:20px;}

  #about-history .history-con::before{left:0;transform: translateX(0%);}

  #about-history .history-item .certify-img ul li{width:calc((100% - 20px) / 2);}

  #about-clients .client-logo-grid{display:flex;flex-wrap: wrap;gap:7px;}

  #about-clients .client-logo-grid li{width:calc((100% - 7px) / 2);}

  #about-clients .client-logo-grid li img{width:100%;}

  #about-clients .client-logo-swip-ctrl{gap:20px;margin-top:30px;}

  #about-clients .client-logo-swip-page{position:relative;top:auto;right:auto;bottom:auto;left:auto;background:var(--gray-d)}



  #about-clients .client-logo-swip-nav>div{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid var(--bk);border-radius: 50%;}

  #about-clients .client-logo-swip-nav{gap:10px;}

  #about-clients .swiper-pagination-progressbar-fill{background:var(--bk)}

  #about-location .con-top{flex-wrap: wrap;}

  #about-location .location-info{width:100%;}

  #about-location .location-info dl{width:100%;}

  #about-location .con-tit{margin-bottom:30px;}

  #about-location .location-info{flex-wrap: wrap;gap:0;}

  #about-location .location-info dl{width:100%;}

  #about-location .location-info dl:first-child{margin-bottom:20px;padding-bottom:20px;border-bottom:1px dashed var(--gray-d);}

  #about-btn-area .inner>a{padding:20px;}

  #about-btn-area .ico-wrap{width:80px;height:80px;}

  #about-btn-area .inner>a h4{font-size:22px;}

  #about-btn-area .inner>a p{font-size:16px;}

}



@media screen and (max-width:768px){

  #about-prog .con-img img{content:url(../img/sub/about/prog_img_m.svg);}

  #about-features .swip-con{margin-left:20px;margin-right:20px;}

  #about-features .prog-bar{position:relative;width:calc(100% - 120px);height:4px;background: rgba(255, 255, 255, 0.20);border-radius: 0;}

  #about-features .prog-bar .bar {

  width: 0%;

  height: 100%;

  transition: width .3s ease;

  background:#fff;

}

#about-features .swip-nav>div{border:none;width:auto;height:auto;}

#about-features .swip-nav{gap:6px;}

#about-location .location-info dl{flex-wrap: wrap;}

#about-location .location-info dd{width:100%;}

#about-location .con-top dl dt{font-size:18px;}

#about-location .con-top dl dd{font-size:18px;}

#about-page .map-area{aspect-ratio: 1/1;}

#about-btn-area .inner{flex-wrap: wrap;gap:10px;}

#about-btn-area .inner>a{width:100%;}

#about-btn-area .con-txt{width:calc(100% - 100px);}

#about-history .history-item .year{font-size:28px;}

#about-history .history-item dl{font-size:16px;}

#about-history .history-item>div{flex-wrap: wrap;gap:10px;}

#about-history .history-item .history-txt{width:100%;padding-top:0;}

#about-history .history-item .year{width:100%;}

#about-history .history-item>div::before{top:7px;}

#about-history .history-item:not(:last-child){margin-bottom:40px;}

.prog-pop .land #popup-img{max-height:none;width:90vw;max-width:600px;}

.prog-pop .portrait #popup-img{max-height:none;width:90vw;max-width:400px;}

}