@import url('sub.css');


/**** S:: 회사소개 > 회사개요 ****/
.summary {position:relative;}
.summary__title {padding-bottom:60px; text-align:center; box-sizing:border-box;}
.summary__title h3{color:var(--main); font-family:var(--eng); font-weight:700; letter-spacing:0;}
.summary__title p {margin-top:20px; color:var(--black); font-weight:300;}
.summary__title p strong{font-weight:700;}
.summary__box {position:relative; padding:150px 0; box-sizing:border-box;}
.summary__box .bg {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:-1; background:var(--blackBg) url('/about/img/summary_bg.jpg') no-repeat center/cover;}
.summary__info{position:relative; display:flex; flex-wrap:wrap; gap:30px; z-index:1;}
.summary__item {position:relative; width:calc((100% - 90px) / 4); min-height:280px; padding:40px 30px; border-radius:var(--borderR10); background:rgba(255,255,255,.05); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-sizing:border-box;}
.summary__txt {position:relative; z-index:1;}
.summary__txt strong{display:block; color:var(--white); font-weight:600;}
.summary__txt p {margin-top:8px; color:rgba(255,255,255,.7);}
.summary__item::after{content:""; position:absolute; right:30px; bottom:40px; width:70px; height:70px; background-repeat:no-repeat; background-position:center; background-size:contain;}
.summary__item--company::after{background-image:url('/about/img/summary_icon1.svg');}
.summary__item--owner::after{background-image:url('/about/img/summary_icon2.svg');}
.summary__item--date::after{background-image:url('/about/img/summary_icon3.svg');}
.summary__item--address::after{background-image:url('/about/img/summary_icon4.svg');}
.summary__item--business::after{background-image:url('/about/img/summary_icon5.svg');}
.summary__item--contact::after{background-image:url('/about/img/summary_icon6.svg');}
.summary__item--email::after{background-image:url('/about/img/summary_icon7.svg');}
.summary__contact{margin-top:8px;}
.summary__contact li{position:relative; padding-left:30px; color:rgba(255,255,255,.7);}
.summary__contact li + li{margin-top:2px;}
.summary__contact li::before{position:absolute; left:0; top:50%; color:rgba(255,255,255,.7); font-family:var(--icon); font-size:20px; line-height:1; transform:translateY(-50%);}
.summary__tel::before{content:"call";}
.summary__fax::before{content:"print";}
/**** E:: 회사소개 > 회사개요 ****/


/**** S:: 회사소개 > 인사말 ****/
.greeting__wrap{display:flex; align-items:flex-start; gap:60px;}
.greeting__img{flex:0 0 645px; width:645px; max-width:40.566%; aspect-ratio:645/730; overflow:hidden;}
.greeting__img img {display:block; width:100%; height:100%; object-fit:cover;}
.greeting__cnt {flex:1; min-width:0; max-width:885px; align-self:center;}
.greeting__cnt h3 {color:var(--black); font-weight:700;}
.greeting__cnt h3 span {line-height:1.3;}
.greeting__body {margin-top:30px;}
.greeting__body p {color:var(--basic); letter-spacing:inherit;}
.greeting__body p + p {margin-top:30px;}
.greeting__sign {margin-top:30px; color:var(--black); font-weight:600; line-height:1.55; letter-spacing:var(--letter-spacing-default);}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 조직도 ****/
.organ{width:100%; overflow-x:auto;}
.organ__wrap{position:relative; width:100%; min-width:900px; height:386px;}
.organ__line{position:absolute; background:var(--border); z-index:0;}
.organ__line--v{width:1px;}
.organ__line--h{height:1px; top:261px; left:130px; width:calc(100% - 260px);}
.organ__line--main{left:50%; top:0; height:261px; transform:translateX(-50%);}
.organ__box{display:flex; align-items:center; justify-content:center; position:relative; z-index:1; box-sizing:border-box; text-align:center;}
.organ__box--ceo{position:absolute; left:50%; top:0; width:260px; height:70px; transform:translateX(-50%); background:var(--main); color:var(--white); font-weight:700;}
.organ__box--mid{position:absolute; left:50%; top:130px; width:260px; height:70px; transform:translateX(-50%); background:var(--sub); color:var(--white); font-weight:700;}
.organ__teams{position:absolute; left:0; top:320px; display:flex; justify-content:space-between; width:100%;}
.organ__box--team {width:260px; height:66px; background:linear-gradient(rgba(0,77,161,.03), rgba(0,77,161,.03)), var(--grayBg); color:var(--main); font-weight:600;}
.organ__box--team::before{content:""; position:absolute; left:50%; top:-59px; width:1px; height:59px; background:var(--border); transform:translateX(-50%);}
/**** E:: 회사소개 > 조직도 ****/


/**** S:: 회사소개 > 찾아오시는 길 ****/
.location__wrap{display:flex; align-items:flex-start; gap:60px;}
.location__map{flex:0 0 990px; width:990px; max-width:62.264%; height:600px; overflow:hidden; border:1px solid var(--border); box-sizing:border-box;}
.location__map .root_daum_roughmap {display:block; width:100%; height:100%;}
.location__map .root_daum_roughmap .wrap_map {height:100%;}
.location__map .map_border,.location__map .wrap_controllers{display:none !important;}
.location__map .root_daum_roughmap .cont {display:none;}
.location__cnt{flex:1; min-width:0; max-width:540px;}
.location__cnt h3{color:var(--black); font-weight:700;}
.location__info {margin-top:30px; padding:35px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box;}
.location__item {display:flex; gap:8px;}
.location__item + .location__item{margin-top:8px;}
.location__icon {flex:0 0 32px; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--borderR5); background:#a9a9a9; box-sizing:border-box;}
.location__icon::before {color:var(--white); font-family:var(--icon); font-size:20px; line-height:1; font-variation-settings:'FILL' 0;}
.location__item--address .location__icon::before{content:"location_on";}
.location__item--tel .location__icon::before{content:"call";}
.location__item--fax .location__icon::before{content:"fax";}
.location__item--email .location__icon::before{content:"mail";}
.location__item p{flex:1; min-width:0; color:var(--basic); align-self:center;}
.location__btn{display:flex; justify-content:flex-end; gap:4px; margin-top:30px;}
.location__link{display:inline-flex; align-items:center; justify-content:center; width:165px; height:58px; border-radius:var(--borderAll); font-weight:600; box-sizing:border-box; transition:all .3s;}
.location__link span{display:inline-flex; align-items:center; justify-content:center; gap:14px;}
.location__link svg{display:block; width:20px; height:20px; transition:fill .3s;}
.location__link--naver{background:#10d265; color:var(--white); border:1px solid #10d265;}
.location__link--naver svg{fill:var(--white);}
.location__link--naver:hover{background:var(--white); color:#10d265;}
.location__link--naver:hover svg{fill:#10d265;}
.location__link--kakao{background:#feda0d; color:var(--black); border:1px solid #feda0d;}
.location__link--kakao svg{fill:var(--black);}
.location__link--kakao:hover{background:var(--black); color:#feda0d; border-color:var(--black);}
.location__link--kakao:hover svg{fill:#feda0d;}
/**** E:: 회사소개 > 찾아오시는 길 ****/



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

.greeting__cnt h3 br {display:none;}
.greeting__cnt h3 br.block {display:block;}

}

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

/**** S:: 회사소개 > 회사개요 ****/
.summary__box{padding:120px 0;}
.summary__info{gap:20px;}
.summary__item{width:calc((100% - 60px) / 4); padding:30px 25px;}
.summary__item::after{right:25px; bottom:30px;}
/**** E:: 회사소개 > 회사개요 ****/


/**** S:: 회사소개 > 인사말 ****/
.greeting__wrap{gap:40px;}
.greeting__img{flex-basis:520px; width:520px;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 조직도 ****/
.organ__line--h {top:241px; left:50%; transform:translateX(-50%); width:calc(100% - 220px);}
.organ__line--main {height:241px;}
.organ__box--ceo {width:220px; height:60px;}
.organ__box--mid {top:120px; width:220px; height:60px;}
.organ__teams {top:300px;}
.organ__box--team {width:220px; height:61px;}
.organ__box--team::before{top:-58px; height:58px;}
/**** E:: 회사소개 > 조직도 ****/


/**** S:: 회사소개 > 찾아오시는 길 ****/
.location__wrap{gap:40px;}
.location__map{flex-basis:780px; width:780px; height:520px;}
.location__info{padding:30px 0;}
.location__link{width:150px; height:52px;}
/**** E:: 회사소개 > 찾아오시는 길 ****/

}

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

/**** S:: 회사소개 > 회사개요 ****/
.summary__title {padding-bottom:50px;}
.summary__title p {margin-top:15px;}
.summary__box {padding:80px 0;}
.summary__item {width:calc((100% - 40px) / 3); min-height:220px; padding:25px 20px;}
.summary__item::after {width:60px; height:60px; right:20px; bottom:25px;}
/**** E:: 회사소개 > 회사개요 ****/

/**** S:: 회사소개 > 인사말 ****/
.greeting__wrap{flex-direction:column; gap:40px;}
.greeting__img{flex:none; width:100%; max-width:100%;}
.greeting__cnt{max-width:100%;}
.greeting__body{margin-top:25px;}
.greeting__body p + p{margin-top:20px;}
.greeting__sign{margin-top:25px;}
/**** E:: 회사소개 > 인사말 ****/

/**** S:: 회사소개 > 조직도 ****/
.organ__wrap {height: 346px;}
.organ__line--h {top:230px; width:calc(100% - 190px);}
.organ__line--main {height:230px;}
.organ__box--ceo {width:190px;}
.organ__box--mid {top:110px; width:190px;}
.organ__teams {top:280px;}
.organ__box--team {width:190px; height:56px;}
.organ__box--team::before{top:-50px; height:50px;}
/**** E:: 회사소개 > 조직도 ****/

/**** S:: 회사소개 > 찾아오시는 길 ****/
.location__wrap{flex-direction:column;}
.location__map{flex:none; width:100%; max-width:100%; height:400px;}
.location__cnt{width:100%; max-width:100%;}
.location__info{margin-top:25px; padding:25px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.location__icon {flex: 0 0 28px; width: 28px; height: 28px;}
.location__icon::before {font-size: 18px;}
.location__item + .location__item {margin-top: 0;}
.location__btn{margin-top:25px;}
.location__link svg{width:18px; height:18px;}
/**** E:: 회사소개 > 찾아오시는 길 ****/

}


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

    /**** S:: 회사소개 > 찾아오시는 길 ****/
    .location__info{display:grid; grid-template-columns:1fr; gap:6px;}
    /**** E:: 회사소개 > 찾아오시는 길 ****/

}


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


/**** S:: 회사소개 > 회사개요 ****/
.summary__title {padding-bottom:40px;}
.summary__title p {margin-top:10px;}
.summary__box {padding:60px 0;}
.summary__info{gap:10px;}
.summary__item {width:calc((100% - 10px) / 2);}
.summary__item::after {width:50px; height:50px;}
/**** E:: 회사소개 > 회사개요 ****/

/**** S:: 회사소개 > 인사말 ****/
.greeting__wrap{gap:30px;}
.greeting__body{margin-top:20px;}
.greeting__body p + p{margin-top:15px;}
.greeting__sign{margin-top:20px;}
/**** E:: 회사소개 > 인사말 ****/

/**** S:: 회사소개 > 조직도 ****/
.organ__wrap {min-width:680px; height:270px;}
.organ__line--h {top:180px; width:calc(100% - 160px);}
.organ__line--main {height:180px;}
.organ__box--ceo {width:160px; height:55px;}
.organ__box--mid {top:90px; width:160px; height:55px;}
.organ__teams {top:210px;}
.organ__box--team {width:160px; height:50px;}
.organ__box--team::before{top:-30px; height:30px;}
/**** E:: 회사소개 > 조직도 ****/

/**** S:: 회사소개 > 찾아오시는 길 ****/
.location__wrap{gap:30px;}
.location__map{height:300px;}
.location__info{margin-top:20px; padding:20px 0;}
.location__btn{justify-content:stretch; margin-top:20px;}
.location__link{flex:1; width:auto; height:48px; gap:10px;}
.location__link svg{width:16px; height:16px;}
/**** E:: 회사소개 > 찾아오시는 길 ****/

}

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

/**** S:: 회사소개 > 회사개요 ****/
.summary__item {width:100%; min-height:auto; padding:25px 20px 90px;}
.summary__item::after {width:40px; height:40px;}
/**** E:: 회사소개 > 회사개요 ****/

}