@charset "utf-8";

body:has(.subpage.bg){background:var(--bk);}
.subpage {overflow:hidden;}
.subpage .visual{display:flex;position:relative;width:100%;align-items: center;justify-content: center;}
.subpage .visual .con-txt{position:relative;z-index:2;color:#fff;text-align: center;}
.subpage .visual .con-txt>p{margin-top:var(--mg-mm);font-size: var(--com-txt);line-height:1.6;}
.subpage .visual .con-tit p{margin-bottom:20px;font-size: var(--com-txt);}
.subpage .visual h2{font-size:100px;font-weight: 700;}
.subpage.bg .visual{padding:278px 20px 100px;}
.subpage .visual .line{display:block;margin:var(--mg-mm) auto 0;width:1px;height:100px;}
.subpage .visual .bg{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:-1;width:100%;}
.subpage .visual .bg img{width:100%;}

.service-com .visual{height:700px;background:url('../img/sub/service_visual.jpg') no-repeat center;background-size: cover;}
.service-com .con-tab{margin:var(--mg-bg) 0 calc(var(--mg-bg) - 20px)}
.service-com .con-tab ul{justify-content: center;gap:15px;}
.service-com .con-tab li a{display:flex;width:122px;height:55px;border-radius: 999px;align-items: center;justify-content:center;font-size: var(--page-tab);font-weight: 700;background:var(--bg1);}
.service-com .con-tab li.tab-on a{background:var(--main);color:#fff;}
.service-com .service-top{text-align: center;}
.service-com .service-top p{font-size: var(--com-txt);line-height:1.6;}
.service-com .service-top .con-tit p{color:#c5c5c5;}
.service-com .service-top .con-tit h3{margin:20px 0 40px;font-size:var(--page-tit);font-weight: 700;line-height:1.2;}
.service-com .service-img{margin-top:var(--mg-bg)}
.service-com .service-img img{width:100%;}
.service-com .service-detail{padding:var(--mg-bg) 0;}
.service-com .history-wrap{margin-top:var(--mg-bg)}
.service-com .service-detail .con-tit h4{margin-bottom:var(--mg-mm);font-size: var(--con-tit);font-weight:700;line-height:1.4;}
.service-com .feature-wrap{flex-wrap: wrap;gap:40px;align-items: stretch;}
.service-com .feature-bx{width:calc(50% - 20px);padding:var(--mg-mm);border-radius: 10px;background:var(--bg1);align-items:flex-start;}
.service-com .feature-bx h5{width:200px;font-weight: 700;font-size: var(--com-txt-bg);line-height:1.5;}
.service-com .feature-bx p,
.service-com .feature-bx ul{width:calc(100% - 200px);padding-left:20px;line-height:1.5;font-size: var(--com-txt);}
.service-com .feature-bx ul{flex-wrap: wrap;gap:20px 10px;}
.service-com .feature-bx li{width:100%;font-size: var(--com-txt);padding:5px 10px;border-radius: 30px;background:#dfe3ea;text-align: center;}
.service-com .feature-bx li.width50{width:calc(50% - 5px);}
.service-com .history-wrap{gap:40px;align-items: stretch;}
.service-com .history-wrap .con-l{width:calc(50% - 20px);}
.service-com .history-wrap .con-r{width:calc(50% - 20px);}
.service-com .history-wrap .con-r dl div{padding:30px 0;align-items: stretch;line-height:1.5;}
.service-com .history-wrap .con-r dl div:not(:last-child){border-bottom:1px solid #eee;}
.service-com .history-wrap .con-r dl .first{padding-top:0;}
.service-com .history-wrap .con-r dl .last{padding-bottom:0;}
.service-com .history-wrap .con-r dt{width:150px;font-size: var(--com-txt-bg);font-weight: 700;}
.service-com .history-wrap .con-r dd{width:calc(100% - 150px);font-size: var(--com-txt);}

/*회사소개*/
#intro .intro-sec .con-tit{margin-bottom:var(--mg-mm)}
#intro h3{color:#fff;font-size: var(--con-tit);}
#intro .intro-sec01 .con-wrap{flex-wrap: wrap;gap:40px;}
#intro .intro-sec01 .conbx{position:relative;width:calc(50% - 20px);height:280px;border-radius:10px;}
#intro .intro-sec01 .conbx .con-txt{position:absolute;bottom:50px;left:50px;}
#intro .intro-sec01 .conbx h4{margin-bottom:10px;font-size: 30px;line-height:1.5;color:#fff;}
#intro .intro-sec01 .conbx p{font-size:calc(var(--com-txt) + 2px);color:#8585B4;font-weight: 400;}
#intro .intro-sec01 .conbx1{background:url('../img/sub/intro_lst_bg1.jpg') no-repeat center right;background-size: cover;}
#intro .intro-sec01 .conbx2{background:url('../img/sub/intro_lst_bg2.jpg') no-repeat center right;background-size: cover;}
#intro .intro-sec01 .conbx3{background:url('../img/sub/intro_lst_bg3.jpg') no-repeat center right;background-size: cover;}
#intro .intro-sec01 .conbx4{background:url('../img/sub/intro_lst_bg4.jpg') no-repeat center right;background-size: cover;}
#intro .intro-sec02{margin-top:var(--mg-bg)}
#intro .intro-sec02 img{width:100%;}

#contact .map-area{width:100%;height:500px;}
#contact .root_daum_roughmap{width:100% !important;height:100% !important;}
#contact .root_daum_roughmap .wrap_map{width:100% !important;height:100% !important;}
#contact .address{margin:50px auto;color:#fff;}
#contact .address p{margin-bottom:20px;font-size:30px;font-weight: 600;text-align: center;}
#contact .address ul{justify-content: center;gap:50px;}
#contact .address li{font-size: var(--com-txt-sm);gap:30px;}
#contact .address strong{color:var(--main);font-size: var(--com-txt-bg);}
#contact .visual{padding-bottom:0;}


/*미디어쿼리*/
@media screen and (max-width:1200px){
  .service-com .feature-bx:has(ul){display:block;}
  .service-com .feature-bx ul{width:100%;margin-top:15px;padding-left:0;}
  .service-com .feature-bx:has(ul) h5 br{display:none;}
}

@media screen and (max-width:1024px){
  .service-com .feature-wrap{gap:20px;}
  .service-com .feature-bx{display:block;width:calc(50% - 10px);flex-wrap: wrap;padding:30px;}
  .service-com .feature-bx h5,
  .service-com .feature-bx p, 
  .service-com .feature-bx ul{width:100%;padding:0;}
  .service-com .feature-bx h5 br{display:none;}
  .service-com .history-wrap{flex-wrap: wrap;}

  .subpage .visual h2{font-size:60px;}
  .service-com .feature-bx ul{gap:10px;margin-top:20px;}
  .subpage .visual .line{height:80px;}
  #intro .intro-sec01 .conbx h4{font-size: 25px;}
  #intro .intro-sec01 .con-wrap{gap:20px;}
  #intro .intro-sec01 .conbx{width:100%;}
  #contact .address p{font-size: var(--com-txt-bg);}
  #contact .address ul{gap:30px;flex-wrap: wrap;}
  #contact .address li{gap:15px;}
}

@media screen and (max-width:768px){
  .service-com .feature-bx{width:100%;}
  .service-com .con-tab{overflow-x: auto;}
  .service-com .con-tab ul{width:max-content;justify-content: flex-start;gap:10px;}
  .service-com .con-tab li a{width:100px;height:40px;}
  .service-com .history-wrap>div{width:100% !important;}
  .service-com .history-wrap .con-r dt{width:80px;}
  .service-com .history-wrap .con-r dd{width:calc(100% - 100px)}
  .service-com .history-wrap .con-r dl div{padding:20px 0;}
  
  .subpage .visual .line{height:60px;}
  .subpage .visual h2{font-size:45px;}
  .service-com .visual{height:50dvh;}
  .subpage.bg .visual{padding:160px 20px 100px;}
  #intro .intro-sec01 .conbx .con-txt{bottom:20px;left:20px;}
  #intro .intro-sec01 .conbx{height:200px;}
  #intro .intro-sec01 .conbx h4{font-size: var(--com-txt-bg);}
  #intro .intro-sec01 .conbx p{font-size: var(--com-txt-sm);}
  #intro .intro-sec02{margin:var(--mg-bg) 0;}
  #contact .address ul{gap:10px;}
  #contact .address ul li{width:100%;align-items: center;justify-content: center;}
  #contact .map-area{height:30dvh;}
  #contact .address p{font-size: var(--com-txt);}
  #contact .contact-sec{margin-bottom:var(--mg-bg)}
  .subpage .visual .bg{top:90px;}
  .subpage .visual .bg img{width:100%;}
  
  .service-com .history-wrap {gap: 0}
  #contact .address strong {font-size: 14px}
  
}

@media screen and (max-width:500px){
  #intro .intro-sec01 .conbx {height: 90vw}
  #intro .intro-sec01 .conbx1{background:url('../img/sub/intro_lst_bg1_m.jpg') no-repeat top center;background-size: cover;}
  #intro .intro-sec01 .conbx2{background:url('../img/sub/intro_lst_bg2_m.jpg') no-repeat top center;background-size: cover;}
  #intro .intro-sec01 .conbx3{background:url('../img/sub/intro_lst_bg3_m.jpg') no-repeat top center;background-size: cover;}
  #intro .intro-sec01 .conbx4{background:url('../img/sub/intro_lst_bg4_m.jpg') no-repeat top center;background-size: cover;}
}