@charset "utf-8";

.og_map {
    text-align: center;
}
.ceo {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-image: linear-gradient(45deg, #E6925A, var(--color-main));
    border-radius: 50%;
    /* border: 4px solid rgb(255 255 255); */
}
.ceo strong {
    color: #fff;
    font-size: 30px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: center;
    border: 10px solid #00000054;
    border-radius: 50%;
}
.dept {width: 100%;}
.dept ul {display: flex;width: 100%;justify-content: space-evenly;padding-top: 3rem;position: relative;gap: 5rem;}
.dept li {
    width: 100%;
    background-color: #222222;
    /* padding: 1rem 0; */
    border-radius: 1rem;
    position: relative;
    /* padding-top: 2rem; */
    margin-top: 3rem;
}
.dept li dt:after {content:""; width:80%; height:4px; background-color:var(--color-main); position:absolute; top:0; left:50%; transform:translateX(-50%); border-radius:4px}
.dept dl {
    /* background-color: #222222; */
}
.dept dt{
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 1.5rem;
}
.dept dd {
    padding: 1.5rem;
    border-top: 1px solid rgb(255 255 255 / 20%);
    opacity: .8;
    font-size: 18px;
}
.dept ul:before {content:"";position:absolute;width:1px;height: 3rem;background-color:rgb(255 255 255 / 20%);top:0}
.dept ul:after {content:"";position:absolute;width: 79.25%;height:1px;background-color: rgb(255 255 255 / 20%);top:0;margin-top: 3rem;}
.dept ul li:before {content:"";position:absolute;width:1px;height: 100%;background-color:rgb(255 255 255 / 20%);top:0;margin-top: -3rem;z-index: -1;}

/* PC */ 
@media all and (min-width:1024px) and (max-width: 1400px)  {
	
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) {
   .dept ul {gap:1rem}
    .dept ul:after {width: 77%;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
	.dept ul {flex-wrap:wrap;gap: .5rem;}
    .dept ul li {width: 48%;}
    .dept ul:after {width:50%}
    .dept ul li:last-child, .dept ul li:nth-last-child(2) {margin-top:0}
    .dept ul li:last-child:before, .dept ul li:nth-last-child(2):before {display:none;}
}