@charset "utf-8";

/* [S] 센터장소개 */
.president-wrap {overflow:hidden; position: relative; padding:5rem; background:url('../../images/sub/bg-president.png') no-repeat center / cover; border-radius:1rem;}
.president-wrap::before {content:''; position: absolute; right:2rem; top:2rem; width:34rem; height:26.9rem; background:url('../../images/sub/obj-president.png') no-repeat center;}
.president-wrap .frame {display: flex;}
.president-wrap .left {margin-right: 8rem;}
.president-wrap .left .img-box {overflow:hidden; position: relative; width: 38rem; height:48rem; border-radius:1rem;}
.president-wrap .left .img-box img {width:100%; object-fit: cover;}
.president-wrap .left p {margin-top: 2.2rem;font-family: pb; font-size: 2rem; text-align: center; color:#1C1C1C;}

.president-wrap .right {position: relative; flex:1;}
.president-wrap .right .top {position: relative; display: flex; padding:2.2rem 0 4rem 0;}
.president-wrap .right .top::before {content:''; position: absolute; bottom:0; left:-8rem; width:71.5rem; height:1px; background:#CDCCCC;}
.president-wrap .right .top dl {display: flex; align-items: center; margin-right: 6rem;}
.president-wrap .top dt {min-width:10rem; margin-right: 1.7rem; background:#594246; border-radius:0.5rem; font-family: pb; font-size: 2rem; text-align: center; line-height: 4rem; color:#fff;}
.president-wrap .top dd {font-family: pm; font-size: 2.2rem; color:#1c1c1c;}

.president-wrap .btm {position: relative;}
.president-wrap .list {margin-top: 2rem;}
.president-wrap .list li {position: relative; margin-bottom: 0.5rem; padding-left:2rem; }
.president-wrap .list li::before {content:''; position: absolute; left:0; top:0.9rem; width: 0.6rem; height:0.6rem; background:#4C4C4C; border-radius:50%;}
.president-wrap .list dl {display: flex;font-family: pm; font-size: 1.7rem;}
.president-wrap .list dt {flex-shrink:0; width: 10rem; color:#1c1c1c;}
.president-wrap .list dd {color:#545454;}

.president-text {position: relative; margin-top: 5.5rem;}
.president-text b {display: block; font-family: pm; font-weight: normal; font-size: 4rem; color:#F2778D; line-height: 1.25;}
.president-text p {margin-top: 2.5rem;font-family: pm; font-size: 1.7rem; line-height: 2.8rem; color:#545454;}
.president-text p i {display: block; margin:2.8rem 0;}
.president-text strong {display: block; margin-top: 3rem; font-family: pb; font-size: 2.5rem; color:#1C1C1C;}

@media screen and (max-width:1200px) {
  .president-wrap .frame {flex-direction: column;}
  .president-wrap .left {align-self: center; margin-right: 0;}
  .president-wrap .left p {display: none;}
  .president-wrap .right .top {justify-content: center;}
  .president-wrap .right .top dl:last-child {margin-right: 0;}
  .president-wrap .right .top::before {left:0; width:100%;}
}
@media screen and (max-width:768px) {
  .president-wrap .top dt {font-size: 1.8rem;}
  .president-wrap .top dd {font-size: 1.8rem;}
  .president-wrap .list dl {font-size: 1.6rem;}
  .president-text {margin-top: 4rem;}
  .president-text b {font-size: 3.2rem;}
  .president-text p {font-size: 1.6rem;}
  .president-text strong {font-size: 2.2rem;}
}
@media screen and (max-width:550px) {
  .president-wrap {padding:2rem;}
  .president-wrap .left .img-box {width:100%; height: auto;}
}
/* [E] 센터장소개 */


/* [S] 비전 */
.vision-wrap {position: relative;}
.vision-wrap .box1 {position: relative;}
.vision-wrap .box1 .title {display: flex; align-items: center; justify-content: center; width: 30rem; height: 5rem; margin:0 auto; background:url('../../images/sub/bg-vision-title1.png') no-repeat center / cover;}
.vision-wrap .box1 strong {font-family: pm; font-size: 1.8rem; color:#fff;}
.vision-wrap .box1 .con {display: flex; align-items: center; justify-content: center; height:13rem; margin-top:-2.5rem; border:0.2rem solid #F2778D; border-radius:1rem;}
.vision-wrap .box1 p {display: inline-block; vertical-align: middle; padding-top: 1.3rem; font-family: pb; font-size: 3rem; color:#222222;}
.vision-wrap .box1 p span {display: inline-block; color:#F2778D;}
.vision-wrap .box2 {margin-top: 6rem;}
.vision-wrap .box2 .title {display: flex; align-items: center; justify-content: center; width: 30rem; height: 5rem; margin:0 auto; background:url('../../images/sub/bg-vision-title2.png') no-repeat center / cover;}
.vision-wrap .box2 strong {font-family: pm; font-size: 1.8rem; color:#fff;}
.vision-wrap .box2 .con {margin-top: 4rem;}
.vision-wrap .list {display: flex; margin:0 -1rem;}
.vision-wrap .list > li {display: flex; flex-direction:column; width:33.3333%; padding:0 1rem;}
.vision-wrap .list .con-box {display: flex; flex-direction:column; height:100%;}
.vision-wrap .sub-tit {display: flex; align-items: center; min-height: 6rem; padding:1rem 3rem; background: #8C6E68; border-radius:0.5rem 0.5rem 0 0;}
.vision-wrap .sub-tit strong {font-family: pb; font-size: 2.6rem; color:#fff}
.vision-wrap .con-list {flex:1; min-height:24rem; padding:2rem 3rem; background-color:#F8F8F8; background-position:right 2rem bottom 1.5rem; background-repeat: no-repeat; border-radius:0 0 1rem 1rem;}
.vision-wrap .list > li:nth-child(1) .con-list {background-image:url('../../images/sub/ic-vision1.png');}
.vision-wrap .list > li:nth-child(2) .con-list {background-image:url('../../images/sub/ic-vision2.png');}
.vision-wrap .list > li:nth-child(3) .con-list {background-image:url('../../images/sub/ic-vision3.png');}
.vision-wrap .con-list li {position: relative; margin-bottom: 1rem; padding-left:1.5rem; font-family: pm; font-size: 1.7rem; color:#555;}
.vision-wrap .con-list li::before {content:''; position: absolute; left:0; top:0.9rem; width:0.6rem; height:0.6rem; background-color:#4D4D4D; border-radius:50%;}

@media screen and (max-width:1500px) {
  .vision-wrap .sub-tit strong {font-size: 2.2rem;}
}
@media screen and (max-width:1200px) {
  .vision-wrap .sub-tit {padding:1rem 2rem;}
  .vision-wrap .sub-tit strong {font-size: 2rem;}
}
@media screen and (max-width:1000px) {
  .vision-wrap .box1 .con {padding:0 3rem; text-align: center;}
  .vision-wrap .list {flex-wrap:wrap;}
  .vision-wrap .list > li {width:100%; margin-bottom: 2rem;}
  .vision-wrap .con-list {min-height:unset;}
}
@media screen and (max-width:768px) {
  .vision-wrap .con-list li {font-size: 1.6rem;}
  .vision-wrap .box1 p {font-size:2.5rem;}
}
/* [E] 비전 */


/* [S] 임무기능/주요업무 */
.org-wrap {position: relative; justify-content: center; margin-top: 6rem; padding:10rem 5rem 9.5rem 5rem; background:#F9F3F3; --line: #aaa;}
.org-wrap .org-title {position: relative; padding-bottom: 6rem;}
.org-wrap .org-title::before {content:''; position: absolute; left:50%; top:8rem; width: 1px; height:100%; background:var(--line);}
.org-wrap .org-title strong {overflow:hidden; position: relative; display: flex; align-items: center; justify-content: center; max-width:80rem; width:100%; height: 10rem; margin:0 auto; background:url('../../images/sub/bg-org-title.jpg') no-repeat center / cover; border-radius:1rem; font-family: pb; font-size: 3rem; text-align: center; color:#fff;}
.org-wrap .org-list {position: relative; max-width:118rem; width:100%; margin:0 auto;}
.org-wrap .org-list > ul {position: relative; display: flex; margin:0 -10.7rem;}
.org-wrap .org-list > ul::before {content:''; position: absolute; top:0; left:50%; width:66.7%; height:1px; background:var(--line); transform: translateX(-50%);}
.org-wrap .org-list > ul > li {position: relative; width:33.3333%; padding:5.5rem 10.7rem 0 10.7rem;}
.org-wrap .org-list > ul > li:nth-child(2)::before {display: none;} 
.org-wrap .org-list > ul > li::before {content:''; position: absolute; left:50%; top:0; width:1px; height:100%; background:var(--line);}
.org-wrap .box {overflow:hidden; position: relative; border:1px solid #545454; border-radius:1rem;}
.org-wrap .box-title strong {display: block; padding: 1.5rem 1rem; background:#594246; font-family: pm; font-size: 2rem; text-align: center; color:#fff; }
.org-wrap .con-list {padding:1rem 1.5rem; background:#fff;}
.org-wrap .con-list > ul > li {position: relative; margin-bottom: 0.5rem; padding-left:2rem; font-family: pm; font-size: 1.7rem; color:#545454;}
.org-wrap .con-list > ul > li:last-child {margin-bottom: 0;}
.org-wrap .con-list > ul > li::before {content:''; position: absolute; left:0; top:0.9rem; width:0.6rem; height:0.6rem; background:#545454; border-radius:50%;}

@media screen and (max-width:1200px) {
  .org-wrap .org-list > ul {margin: 0 -7rem;}
  .org-wrap .org-list > ul > li {padding: 5.5rem 7rem 0 7rem;}
}
@media screen and (max-width:1000px) {
  .org-wrap .org-title strong {width:80%;}
  .org-wrap .org-list > ul {margin: 0 -3rem;}
  .org-wrap .org-list > ul > li {padding: 5.5rem 3rem 0 3rem;}
}
@media screen and (max-width:768px) {
  .org-wrap {padding:5rem 2rem;}
  .org-wrap .org-title strong {height:8rem; font-size:2.5rem;}
  .org-wrap .org-list > ul {margin: 0 -1.5rem;}
  .org-wrap .org-list > ul > li {padding: 5.5rem 1.5rem 0 1.5rem;}
}
@media screen and (max-width:600px) {
  .org-wrap { margin-top: 3rem;}
  .org-wrap .org-title {padding-bottom: 3rem;}
  .org-wrap .org-title strong {width:100%;}
  .org-wrap .org-list > ul {flex-direction: column;}
  .org-wrap .org-list > ul::before {display: none;}
  .org-wrap .org-list > ul > li:first-child {padding-top: 0;}
  .org-wrap .org-list > ul > li {width:90%; margin: 0 auto; padding-top:2rem;}
  .org-wrap .org-list > ul > li::before {display: none;}
}
/* [E] 임무기능/주요업무 */

/* [S] 역사 */
.hist-wrap {position: relative;}
.hist-wrap .hist-list {position: relative; padding:2.5rem 3rem; background:#FFF2F3; border-radius:2rem;}
.hist-wrap li { margin-bottom: 1.5rem;}
.hist-wrap li:last-child {margin-bottom: 0;}
.hist-wrap dl {display: flex;}
.hist-wrap dl dt {position: relative; flex-shrink:0; width:12.5rem; margin-right: 2rem; padding-left: 2rem; font-family: psb; font-size: 1.7rem; color:#59302C;}
.hist-wrap dl dt::after {content:''; position: absolute; left:100%; top:0.7rem; width:0.2rem; height:1rem; background:#F2BFBB;}
.hist-wrap dl dt::before {content:''; position: absolute; left:0; top:0.9rem; width:0.6rem; height:0.6rem; background:#59302C; border-radius:50%;}
.hist-wrap dl dd {font-family: pm; font-size: 1.7rem; color:#545454;}
.hist-wrap dl dd span {display: block; font-family: pm; color:#777777;}
@media screen and (max-width:768px) {
    .hist-wrap dl dt,
    .hist-wrap dl dd {font-size: 1.6rem;}
}
/* [E] 역사 */