@import url("/eng/comm/css/sub.css");


/**** S:: 회사소개 > 인사말 ****/
.greeting {position:relative;}
.greeting .bg {position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; content:""; background:url('/company/img/greet_bg.png') top center no-repeat; background-size:cover;}
.greeting .greet_in {display:flex; flex-wrap:wrap; justify-content:space-between;}
.greeting dl dt, .greeting dl dd {box-sizing:border-box; width:calc(50% - 20px);}
.greeting dl dt img {max-width:100%;}
.greeting dl dd .subTit {margin-bottom:30px;}
.greeting dl dd .subTit span {line-height:inherit;}
.greeting dl dd .subTit span img {height:32px; width:auto; vertical-align:baseline;}
.greeting dl dd .txt strong {color:var(--black); font-weight:600;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 조직도 ****/
.organ {position:relative;}
.organ .ceo {position:relative; width:190px; height:170px; background:url('/company/img/ceo_bg.png') top center no-repeat; margin-right:auto; margin-left:auto; display:block; background-size:cover;}
.organ .ceo em {position:absolute; left:43%; top:48%; transform:translate(-50%, -50%); z-index:5; font-size:1.333rem; font-weight:700; line-height:126%; color:var(--white); font-style:normal; text-align:center;}
.organ .ceo:after {position:absolute; left:50%; bottom:-60px; display:block; content:""; z-index:-1; width:1px; height:75px; background:var(--border);}
.organ .part {position:relative; margin-top:60px; display:flex; justify-content:center; padding-top:60px; width:100%; margin-right:auto; margin-left:auto;}
.organ .part::before {position:absolute; left:50%; top:0; transform:translateX(-50%); display:block; content:""; z-index:-1; width:calc((((100% - 120px) / 3) * 2) + 120px); height:1px; background:var(--border);}
.organ .part figure {position:relative; width:calc((100% - 120px) / 3); }
.organ .part figure::before {position:absolute; left:50%; top:-60px; display:block; content:""; z-index:-1; width:1px; height:60px; background:var(--border);}
.organ .part figure::after {position:absolute; left:0; top:0; display:block; content:""; z-index:-1; width:100%; height:100%; border-radius:var(--borderR5); border:1px solid var(--border); box-sizing:border-box;}
.organ .part figure:nth-child(2) {margin:0 60px;}
.organ .part figure dl {}
.organ .part figure dl dt {background:#E1EEF7; color:var(--main); text-align:center; padding:20px; box-sizing:border-box; border-radius:5px 5px 0 0; font-weight:600; line-height:130%;}
.organ .part figure dl dd {padding:25px 20px; box-sizing:border-box;}
/**** E:: 회사소개 > 조직도 ****/



/**** S:: 회사소개 > 찾아오시는 길 ****/
.location {position:relative;}
.location > section {position:relative; display:flex; flex-wrap:wrap;}
.location > section .loc_map {width:calc(100% - 570px); border-radius:var(--borderR10); overflow:hidden; line-height:0;}
.location > section .loc_map iframe {width:100%; height:515px;}
.location > section .loc_info {width:510px; margin-left:60px; align-self:center;} 
.location > section .loc_info h5 {color:var(--black); margin-bottom:20px; display:flex; align-items:center; flex-wrap:wrap;}
.location > section .loc_info h5 span {opacity:0.2; margin-left:15px;}
.location > section .loc_info ul {display:flex; flex-wrap:wrap;}
.location > section .loc_info ul li {position:relative; display:flex; flex-wrap:wrap; padding-left:28px; margin-right:30px; box-sizing:border-box;}
.location > section .loc_info ul li + li {margin-top:5px;}
.location > section .loc_info ul li.address, .location > section .loc_info ul li.email {width:100%; margin-right:0; letter-spacing:0;}
.location > section .loc_info ul li.fax {letter-spacing:0;}
.location > section .loc_info ul li:before {position:absolute; left:0; width:22px; height:22px; vertical-align:top; font-size:22px; font-family:var(--icon);  color:var(--black); opacity:0.3; font-variation-settings: 'FILL' 1;}
.location > section .loc_info ul li.address:before {content:"\e0c8";}
.location > section .loc_info ul li.tel:before {content:"\e0b0";}
.location > section .loc_info ul li.fax:before {content:"\ead8";}
.location > section .loc_info ul li.email:before {content:"\e158";}

.location > section.branch {margin-top:100px;}
.location > section.branch .loc_map {order:2;}
.location > section.branch .loc_info {order:1; margin-right:60px; margin-left:0;}

.location .loc_info .loc_btn {display:flex; margin-top:50px;}
.location .loc_info .loc_btn a {display: inline-block; margin:0; width:190px; height: 60px; line-height:60px; box-sizing:border-box; background:#4285F4; border:1px solid #4285F4; text-align:center; color:var(--white); transition:all .3s linear; font-size:1rem; letter-spacing:var(--letter-spacing-body); font-weight:600; border-radius:10rem;}
.location .loc_info .loc_btn a svg {display: inline-block; vertical-align: middle; margin: -2px 5px 0 0; transition:all .3s linear;}
.location .loc_info .loc_btn a svg path {fill:var(--white); transition:all .3s linear;}
.location .loc_info .loc_btn a.google_map:hover{background:var(--white); color:#4285F4;}
.location .loc_info .loc_btn a.google_map:hover svg path{fill:#4285F4 !important;}
/**** E:: 회사소개 > 찾아오시는 길 ****/



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

/**** S:: 회사소개 > 인사말 ****/
.greeting dl dd .txt br {display:none;}
/**** E:: 회사소개 > 인사말 ****/


}

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

/**** S:: 회사소개 > 찾아오시는 길 ****/
.location > section .loc_map {width:calc((100% - 50px) / 2);}
.location > section .loc_map iframe {height:450px;}
.location > section .loc_info {width:calc((100% - 50px) / 2); margin-left:50px;} 
.location > section.branch .loc_info {margin-right:50px;}


}

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


/**** S:: 회사소개 > 인사말 ****/
.greeting dl dt, .greeting dl dd { width:calc(50% - 15px);}
.greeting dl dd .subTit {margin-bottom:20px;}
.greeting dl dd .subTit span img {height:26px; margin-left:2px;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 조직도 ****/
.organ .ceo:after {bottom:-50px; height:65px;}
.organ .part {margin-top:50px; padding-top:50px;}
.organ .part::before {width:calc((((100% - 60px) / 3) * 2) + 60px);}
.organ .part figure {width:calc((100% - 60px) / 3); }
.organ .part figure::before {top:-50px; height:50px;}
.organ .part figure:nth-child(2) {margin:0 30px;}
.organ .part figure dl dt {padding:15px;}
.organ .part figure dl dd {padding:20px 15px;}
/**** E:: 회사소개 > 조직도 ****/



/**** S:: 회사소개 > 찾아오시는 길 ****/
.location > section .loc_map {width: calc((100% - 40px) / 2);}
.location > section .loc_map iframe {height:350px;}
.location > section .loc_info {width: calc((100% - 40px) / 2); margin-left:40px;}
.location > section .loc_info h5 {margin-bottom:15px;} /* flex-wrap:wrap; align-items: flex-start; flex-direction:column; */
.location > section .loc_info h5 span {margin-left:12px;}
 /* .location > section .loc_info h5 span {margin-left:0;} */
.location > section .loc_info ul li {padding-left:25px; margin-right:20px;}
.location > section .loc_info ul li + li {margin-top:5px;}
.location > section .loc_info ul li:before {width:20px; height:20px; font-size:20px;}
.location > section.branch {margin-top:70px;}
.location > section.branch .loc_info {margin-right:40px;}

.location .loc_info .loc_btn {margin-top:30px;}
.location .loc_info .loc_btn a {width: 170px; height:52px; line-height:52px;}
/**** E:: 회사소개 > 찾아오시는 길 ****/

}



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


/**** S:: 회사소개 > 인사말 ****/
.greeting dl dt, .greeting dl dd { width:100%;}
.greeting dl dt {margin-bottom:30px;}
.greeting dl dd .subTit {margin-bottom:20px;}
.greeting dl dd .subTit span img {margin-left:0; height:22px;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 조직도 ****/
.organ .ceo {width:156px; height:140px;}
.organ .ceo:after {bottom:-40px; height:56px;}
.organ .ceo em {font-size:1.283rem;}
.organ .part {margin-top:40px; padding-top:40px;}
.organ .part::before {width:calc((((100% - 20px) / 3) * 2) + 20px);}
.organ .part figure {width:calc((100% - 20px) / 3); }
.organ .part figure::before {top:-40px; height:40px;}
.organ .part figure:nth-child(2) {margin:0 10px;}
.organ .part figure dl dt {padding:12px; border-radius: 2px 2px 0 0;}
.organ .part figure dl dd {padding:15px;}
/**** E:: 회사소개 > 조직도 ****/


/**** S:: 회사소개 > 찾아오시는 길 ****/
.location > section .loc_map {width:100%;}
.location > section .loc_map iframe {height:300px;}
.location > section .loc_info {width:100%; margin-left:0; margin-top:30px;}
.location > section .loc_info ul {flex-direction:column;}
.location > section .loc_info ul li {padding-left:22px; margin-right:0;}
.location > section .loc_info ul li + li {margin-top:4px;}
.location > section .loc_info ul li:before {width:18px; height:18px; font-size:18px;}
.location > section.branch {margin-top:50px;}
.location > section.branch .ioc_map {order:1;}
.location > section.branch .loc_info {order:2; margin-right:0;}

.location .loc_info .loc_btn {margin-top:20px; display:flex; justify-content:space-between;}
.location .loc_info .loc_btn a {height:48px; line-height:48px;}
.location .loc_info .loc_btn a svg {margin:-1px 5px 0 0;}
.location .loc_info .loc_btn a.google_map svg {width:14px;}
/**** E:: 회사소개 > 찾아오시는 길 ****/


}


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


/**** S:: 회사소개 > 조직도 ****/
.organ .ceo {width:134px; height:120px;}
.organ .ceo:after {bottom:-40px; height:56px;}
.organ .part {flex-wrap:wrap; margin-top:0;}
.organ .part::before {display:none;}
.organ .part figure {width:100%;}
.organ .part figure::before {top:-15px; height:15px;}
.organ .part figure:nth-child(2) {margin:15px 0;}
/**** E:: 회사소개 > 조직도 ****/


}