@import url('sub.css'); 

/* 회사개요 */
.overview_list__grid{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%;}
.overview_list__card{position: relative; box-sizing: border-box; min-height: 260px; padding: 35px 30px; display: flex; flex-direction: column;}
.overview_list__card--gray{background: var(--grayBg);}
.overview_list__card--line{background: var(--white); border: 1px solid var(--border);}
.overview_list__text{position: relative; z-index: 1;}
.overview_list__ttl{margin: 0; color: var(--black);}
.overview_list__desc{margin: 10px 0 0; color: var(--basic); font-weight: 400; width: 100%;}
.overview_list__desc--stack p{margin: 0;}
.overview_list__icon{position: absolute; right: 30px; bottom: 35px; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.overview_list__icon img{display: block; width: auto; height: 70px;}



/* 사훈 */
.motto_style{display: flex; justify-content: center; align-items: center; gap: 25px; margin: 0; padding: 0; list-style: none;}
.motto_style li{flex: 1;}
.motto_style li .in{position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 50%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 0 20px;}
.motto_style li:nth-child(1) .in{background: var(--subBlue);}
.motto_style li:nth-child(2) .in{background: var(--subGreen);}
.motto_style li:nth-child(3) .in{background: var(--subSkyBlue);}
.motto_style li .in::after{content: ''; position: absolute; inset: 15px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.55); box-sizing: border-box; pointer-events: none;}
.motto_style li .in::before{content:'\f3dd'; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 46px; aspect-ratio: 1/1; border-radius: 50%; background:var(--ligthBu); text-align: center; font-family: var(--icon); color:var(--main); position: absolute; right: -36px; top:50%; margin-top: -23px; z-index: 5; font-size:20px; font-weight: 500;}
.motto_style li:nth-child(3) .in::before{display: none;}
.motto_style li .in > *{position: relative; z-index: 1;}
.motto_style li .in img{display: block; width: auto; height: 100px;}
.motto_style li .in h5{margin: 0; color: var(--white); text-align: center; font-weight: 600;}



/* 비전 */
.vision_box{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; box-sizing: border-box; padding: 50px; background: var(--ligthBu); border-radius: var(--borderR10);}
.vision_box img{display: block; width: auto; height: 80px;}
.vision_box h5{color: var(--black); font-weight: 700; text-align: center; line-height: 140%;}
.vision_box h5 b{font-weight: 700;}

.strategic_focus{display: flex; gap: 20px;  width: 100%; box-sizing: border-box; margin-bottom: 30px;} 
.strategic_focus dl{position: relative; box-sizing: border-box; flex:1; width: 100%; background: var(--grayBg); border-radius: var(--borderR10); overflow: hidden; padding: 90px 20px 30px; display: flex; flex-direction: column; gap: 15px;}
.strategic_focus dt{position: absolute; left: 0; top: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 20px; box-sizing: border-box; border-radius: var(--borderR10);}
.strategic_focus dl:nth-child(1) dt{background: var(--subBlue);}
.strategic_focus dl:nth-child(2) dt{background: var(--subGreen);}
.strategic_focus dt span{display: flex; align-items: center; justify-content: center; width: 56px; box-sizing: border-box; padding: 0 15px; background: var(--white); border-radius: 100px; font-size: 0.833rem; font-weight: 600; line-height: 35px; letter-spacing: var(--letter-spacing-caption); text-align: center;}
.strategic_focus dl:nth-child(1) dt span{color: var(--subBlue);}
.strategic_focus dl:nth-child(2) dt span{color: var(--subGreen);}
.strategic_focus dt h5{margin: 0; color: var(--white); font-weight: 600; line-height: 120%;}
.strategic_focus dd{width: 100%;}

.vision_title {text-align: center; box-sizing:border-box; padding: 20px 40px; background:var(--subBlue); border-radius:70px; margin-top: 20px;}
.vision_title h5{font-weight: 700; color: var(--white);}
.vision_title.w_ver{background: var(--white); border:1px solid var(--subBlue);}
.vision_title.w_ver h5{color: var(--subBlue);}

.core_list{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap:20px; width: 100%; box-sizing: border-box;}
.core_list li{background: var(--grayBg); border-radius: var(--borderR10); overflow: hidden;}
.core_list li img{width: 100%; height: auto;}
.core_list li h5{padding: 0 20px 30px; text-align: center; box-sizing: border-box; font-weight: 600; color: var(--black);}

.business_process{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:50px;}
.business_process li{position: relative; background: var(--ligthBu); border-radius: var(--borderR10); padding: 50px 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center;}
.business_process li:first-child::after{content: '\e5e1'; position: absolute; top: 50%; right: -38px; margin-top: -12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-family: var(--icon); font-size: 24px; font-weight: 500; line-height: 100%; color: var(--black); z-index: 2;}
.business_process li img{display: block; width: auto; height: 80px;}
.business_process li h5{width: 100%; text-align: center; color: var(--black); font-weight: 600; line-height: 145%;}



/* 찾아오시는길 */
.location_map{width: 100%; height: 550px; box-sizing: border-box; border:1px solid var(--border);}
.location_map .wrap_controllers{display: none !important;}
.location_map .cont{display: none !important;}
.location_map .map_border{display: none !important;}
.location_map .wrap_map{width: 100%; height: 100% !important;}

.location_list{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap:30px; width: 100%; box-sizing: border-box;}
.location_list > li{border: 1px solid var(--border); padding: 50px 40px; box-sizing: border-box;}
.location_list > li h4{color: var(--black); font-weight: 700; line-height: 134%;}
.location_list > li h5{color: var(--black); font-weight: 600; line-height: 150%; padding-top: 20px;}
.location_list > li p{color: var(--basic); line-height: 156%; padding-top: 20px;}
.location_list dl{display: flex; align-items: center; gap: 8px 20px; padding-top: 10px; flex-wrap: wrap;}
.location_list dd{display: inline-flex; align-items: center; gap: 8px; color: var(--basic); line-height: 153%;}
.location_list dd::before{font-family: var(--icon); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; font-size: 24px; line-height: 100%; color: var(--basic); display: inline-block;}
.location_list dd.tel::before{content: 'phone_in_talk';}
.location_list dd.fax::before{content: 'print';}
.location_btn{display: flex; justify-content: flex-end; gap: 5px; padding-top: 30px;}
.location_btn a{display: inline-flex; align-items: center; justify-content: center; gap: 15px; width: 100%; max-width: 180px; height: 59px; box-sizing: border-box; font-weight: 600; font-size: 0.944rem; line-height: 159%; letter-spacing: var(--letter-spacing-button);}
.location_btn a img{display: block; width: auto; height: 20px;}
.location_btn .naver_btn{background: #10d265; color: var(--white);}
.location_btn .kakao_btn{background: #fae100; color: #371c1d;}
.location_btn a:hover{filter: brightness(0.95);}






/*******************************************************************************
    @media  1500px               
*******************************************************************************/
@media all and (max-width:1500px){


}
/*******************************************************************************
    @media  1300px               
*******************************************************************************/
@media all and (max-width:1300px){






/* 사훈 */
.motto_style li .in img{height: 70px;}


}
/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){






/* 회사개요 */
.overview_list__grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.overview_list__card{min-height: 240px; padding: 28px 24px;}
.overview_list__icon{right: 24px; bottom: 28px;}
.overview_list__icon img{height: 60px;}

.overview_list__card--gray,
.overview_list__card--line{background: var(--white); border: 1px solid var(--border);}
.overview_list__grid .overview_list__card:nth-child(4n+1),
.overview_list__grid .overview_list__card:nth-child(4n+4){background: var(--grayBg);}

/* 사훈 */
.motto_style{gap:20px;}
.motto_style li .in img{height:50px;}
.motto_style li .in::after{inset: 10px;}
.motto_style li .in::before{width: 36px; right: -28px; top:50%; margin-top: -18px; font-size:16px;}


/* 비전 */
.vision_box{gap: 15px; padding: 30px;}
.vision_box img{height: 60px;}

.strategic_focus{gap: 10px; margin-bottom: 20px;} 
.strategic_focus dl{padding: 80px 20px 20px;  gap: 10px;}
.strategic_focus dt{gap: 10px; padding: 15px 20px;}
.strategic_focus dt span{width: 50px; padding: 0 10px; line-height: 30px;}

.vision_title {padding: 15px 30px;}

.core_list{grid-gap:10px}
.core_list li h5{padding: 0 10px 20px;}

.business_process{grid-gap:30px;}
.business_process li{padding: 40px 20px; gap: 15px;}
.business_process li:first-child::after{right: -28px;}
.business_process li img{height: 60px;}


/* 찾아오시는길 */
.location_map{height: 400px;}

.location_list{grid-gap:20px;}
.location_list > li{padding: 40px 30px;}
.location_list > li h5{padding-top: 15px;}
.location_list > li p{padding-top: 15px;}
.location_list dd::before{font-size: 20px;}
.location_btn{padding-top: 20px; flex-wrap:wrap;}
.location_btn a{max-width: 100%; }





}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){






/* 회사개요 */
.overview_list__grid{grid-template-columns: 1fr;}
.overview_list__card{min-height: 114px; padding: 20px 90px 20px 15px; justify-content: center;}
.overview_list__icon{right: 15px; bottom: 50%; margin-bottom: -20px;}
.overview_list__icon img{height: 40px;}
.overview_list__desc{margin: 5px 0 0;}

.overview_list__grid .overview_list__card.overview_list__card--gray{background: var(--grayBg); border: 0;}
.overview_list__grid .overview_list__card.overview_list__card--line{background: var(--white); border: 1px solid var(--border);}



/* 비전 */
.vision_box img{height: 50px;}

.strategic_focus{flex-direction: column;} 
.strategic_focus dl{padding: 60px 20px 20px;}
.strategic_focus dt{gap: 8px; padding: 10px 15px;}
.strategic_focus dt span{width: 40px; line-height: 25px;}


.vision_title {padding: 10px 30px; margin-top: 10px;}



.core_list{grid-template-columns: repeat(1, 1fr);}

.business_process{grid-template-columns: repeat(1, 1fr); grid-gap:20px;}
.business_process li{padding: 25px 20px; gap: 10px;}
.business_process li:first-child::after{top: auto; right: 50%; margin-right: -10px; margin-top: 0; bottom: -20px; transform: rotate(90deg); width: 20px; height: 20px; font-size: 20px;}
.business_process li img{height: 50px;}


/* 찾아오시는길 */
.location_map{height: 300px;}

.location_list{grid-template-columns: repeat(1, 1fr); grid-gap:5px;}
.location_list > li{padding: 25px 20px;}
.location_list > li h5{padding-top: 10px;}
.location_list > li p{padding-top: 10px;}
.location_list dl{gap: 6px 20px; padding-top: 6px;}
.location_list dd{gap: 5px;}
.location_list dd::before{font-size: 16px;}
.location_btn{padding-top: 15px;}
.location_btn a{gap: 10px; max-width: calc((100% - 5px)/2); height: 45px;}
.location_btn a img{height: 16px;}




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:480px){

/* 사훈 */
.motto_style{gap:0 10px; flex-wrap: wrap; max-width:270px; margin: 0 auto;}
.motto_style li{max-width: 130px; width: 100%; flex:auto;}
.motto_style li .in img{height:45px;}
.motto_style li .in{gap:10px;}
.motto_style li .in::before{width: 30px; right: -21px; top:50%; margin-top: -15px; font-size:12px;}
.motto_style li:nth-child(2) .in::before{ right: auto; left: 15px; top:auto; bottom:-7px; margin-top: 0;}
.motto_style li:nth-child(3) .in::before{display: flex; right: auto; left: 15px; top:-6px; margin-top: 0;}
.motto_style li:nth-child(3){margin-top: -15px;}




}