@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] 비전 */
.wrap-vision {position: relative;}
.wrap-vision .title {padding-bottom: 3rem; text-align: center;}
.wrap-vision .title strong {display: inline-flex; align-items: center; justify-content: center; min-width:30rem; height:5rem; padding:0.5rem 2rem; background:url('../../images/sub/bg-vision-title.png') no-repeat center / cover; font-family: pm; font-size: 1.8rem; color:#fff;}
.wrap-vision .text-box ul {display: flex; gap:0 2rem; padding-bottom: 8rem; background:url('../../images/sub/img-vision-arrw.png') no-repeat top 3.2rem center / contain;}
.wrap-vision .text-box li {overflow:hidden; display: flex; align-items: center; justify-content: center;width:25%; min-height:10rem; padding:1rem 2rem; background:url('../../images/sub/bg-vistion-con.png') no-repeat center / cover; border-radius:1rem; font-family: pb; font-size: 2.2rem; text-align: center; color:#fff; line-height: 1.2;}
.wrap-vision .slogan {position: relative; display: flex; align-items: center; justify-content: center; min-height:13rem; border:0.2rem solid #F2778D; border-radius:1rem; text-align: center;}
.wrap-vision .slogan strong {display: inline-block; padding: 1rem 2rem; font-family: pb; font-size: 3rem; color:#222;}
.wrap-vision .slogan strong span {color:#F2778D}
@media screen and (max-width:2000px) {
    .wrap-vision .text-box ul {background-size:contain;}
}
@media screen and (max-width:1200px) {
    .wrap-vision .text-box li {font-size:2rem;}
    .wrap-vision .text-box strong br {display: none;}
    .wrap-vision .slogan strong {font-size: 2.8rem;}
}
@media screen and (max-width:768px) {
    .wrap-vision .text-box ul {flex-wrap:wrap; gap:2rem; background-position:bottom -2rem center;}
    .wrap-vision .text-box li {width:calc(50% - 1rem); font-size: 1.8rem;}
    .wrap-vision .slogan strong {font-size: 2.5rem;}
}
/* [E] 비전 */

/* [S] img-box */
.wrap-image-box {position: relative; border:0.5rem solid #F1F1F1; border-radius:1rem;}
.wrap-image-box img {width:100%;}
/* [E] img-box */


/* [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; height:100%; 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 {height:100%; 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] 역사 */

/* [S] Troops */
.wrap-mission-area {position: relative;}
.wrap-mission-area .map {position: relative; border:0.5rem solid #f1f1f1; border-radius:1rem;}
.wrap-mission-area dl {position: absolute; background:#fff; border-radius:0.5rem; text-align: center;}
.wrap-mission-area .box-color1 {border:1px solid #FD6C6C;}
.wrap-mission-area .box-color1 dt{background:#FD6C6C;}
.wrap-mission-area .box-color2 {border:1px solid #FFAE00;}
.wrap-mission-area .box-color2 dt{background:#FFAE00;}
.wrap-mission-area dl dt {padding:0.5rem 1rem; color:#fff; font-family: pb; font-size: 1.4rem; line-height: 2rem;}
.wrap-mission-area dl dd {padding:0.5rem 1rem; font-family: pr; font-size: 1.4rem; line-height: 2rem; color:#555;}
.wrap-mission-area dl dd strong {display: block; font-family: pm; color:#222;}
.wrap-mission-area .map img {width:100%;}
.wrap-mission-area dl:first-child {left:87.8rem; top:20.7rem;}
.wrap-mission-area dl:first-child::before {content:''; position: absolute; left:-1.2rem; top:100%; width:9.6rem; height:9.2rem; background: linear-gradient(-45deg, transparent 49.5%, #FD6C6C 50%, transparent 50.5%)}
.wrap-mission-area dl:first-child::after {content:''; position: absolute; left:-3rem; top:16.8rem; width:2.4rem; height:2.4rem; box-shadow: inset 5rem 5rem #fd6666; border:0.9rem solid rgba(255,197,197,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(2) {left:98.6rem; top:32.8rem;}
.wrap-mission-area dl:nth-child(2)::before {content:''; position: absolute; right:100%; top:50%; width:5.4rem; height:6.9rem; background: linear-gradient(-51deg, transparent 49.5%, #FD6C6C 50%, transparent 51.5%)}
.wrap-mission-area dl:nth-child(2)::after {content:''; position: absolute; left:-7rem; top:9.6rem; width:2.4rem; height:2.4rem; box-shadow: inset 5rem 5rem #fd6666; border:0.9rem solid rgba(255,197,197,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(3) {left:29.4rem; bottom:18.9rem;}
.wrap-mission-area dl:nth-child(3)::before {content:''; position: absolute; left:100%; bottom:5rem; width:23.5rem; height:6.4rem; background: linear-gradient(165deg, transparent 49.5%, #FD6C6C 50%, transparent 50.5%)}
.wrap-mission-area dl:nth-child(3)::after {content:''; position: absolute; right:-25.8rem; top:-4.8rem; width:2.4rem; height:2.4rem; box-shadow: inset 5rem 5rem #fd6666; border:0.9rem solid rgba(255,197,197,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(4) {right:17.5rem; bottom:13.4rem;}
.wrap-mission-area dl:nth-child(4)::before {content:''; position: absolute; right:17.5rem; bottom:calc(100% - 0.3rem); width:22.7rem; height:8.6rem; background: linear-gradient(20deg, transparent 49.5%, #FD6C6C 50%, transparent 50.5%)}
.wrap-mission-area dl:nth-child(4)::after {content:''; position: absolute; left:-8.2rem; top:-10rem; width:2.4rem; height:2.4rem; box-shadow: inset 5rem 5rem #fd6666; border:0.9rem solid rgba(255,197,197,0.6); border-radius:50%;}

.wrap-mission-area dl:nth-child(5) {left:18.6rem; top:30.1rem;}
.wrap-mission-area dl:nth-child(5)::before {content:''; position: absolute; left:100%; top:3.3rem; width:3.8rem; height:2.5rem; background: linear-gradient(31deg, transparent 49.5%, #FFAE00 50%, transparent 54.5%)}
.wrap-mission-area dl:nth-child(5)::after {content:''; position: absolute; right:-6rem; top:4.7rem; width:2.4rem; height:2.4rem; box-shadow: inset 5rem 5rem #FFAE00; border:0.9rem solid rgba(255,230,124,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(6) {left:51.7rem; top:32.4rem;}
.wrap-mission-area dl:nth-child(6)::before {content:''; position: absolute; left:100%; top:3.3rem; width:3.8rem; height:2.5rem; background: linear-gradient(31deg, transparent 49.5%, #FFAE00 50%, transparent 54.5%)}
.wrap-mission-area dl:nth-child(6)::after {content:''; position: absolute; right:-6rem; top:4.7rem; width:2.4rem; height:2.4rem; box-shadow: inset 5rem 5rem #FFAE00; border:0.9rem solid rgba(255,230,124,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(7) {left:66.2rem; top:24.2rem;}
.wrap-mission-area dl:nth-child(7)::before {content:''; position: absolute; left:50%; top:100%; width:0.1rem; height:2.7rem; background: linear-gradient(90deg, transparent 49.5%, #FFAE00 50%, transparent 54.5%)}
.wrap-mission-area dl:nth-child(7)::after {content:''; position: absolute; left:50%; bottom:-5.1rem; width:2.4rem; height:2.4rem; margin-left:-1.2rem; box-shadow: inset 5rem 5rem #FFAE00; border:0.9rem solid rgba(255,230,124,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(8) {left:40.5rem; top:41.1rem;}
.wrap-mission-area dl:nth-child(8)::before {content:''; position: absolute; left:100%; top:50%; width:3.4rem; height:0.1rem; background: linear-gradient(0deg, transparent 49.5%, #FFAE00 50%, transparent 54.5%)}
.wrap-mission-area dl:nth-child(8)::after {content:''; position: absolute; right:-5.6rem; top:50%; width:2.4rem; height:2.4rem; margin-top:-1.2rem; box-shadow: inset 5rem 5rem #FFAE00; border:0.9rem solid rgba(255,230,124,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(9) {right:17.5rem; bottom:31.4rem;}
.wrap-mission-area dl:nth-child(9)::before {content:''; position: absolute; right:100%; top:50%; width:2.2rem; height:0.1rem; background: #FFAE00}
.wrap-mission-area dl:nth-child(9)::after {content:''; position: absolute; left:-4.6rem; top:50%; width:2.4rem; height:2.4rem; margin-top:-1.2rem; box-shadow: inset 5rem 5rem #FFAE00; border:0.9rem solid rgba(255,230,124,0.6); border-radius:50%;}
.wrap-mission-area dl:nth-child(10) {right:58.6rem; bottom:18.2rem;}
.wrap-mission-area dl:nth-child(10)::before {content:''; position: absolute; left:50%; bottom:100%; width:10.1rem; height:11.1rem; background: linear-gradient(-48deg, transparent 49.5%, #FFAE00 50%, transparent 50.5%)}
.wrap-mission-area dl:nth-child(10)::after {content:''; position: absolute; right:-2rem; top:-12rem; width:2.4rem; height:2.4rem; margin-top:-1.2rem; box-shadow: inset 5rem 5rem #FFAE00; border:0.9rem solid rgba(255,230,124,0.6); border-radius:50%;}
@media screen and (max-width:1540px) {
    .wrap-mission-area .frame {overflow-x:auto;}
    .wrap-mission-area .frame::-webkit-scrollbar {width: 1rem; height: 1rem;}
    .wrap-mission-area .frame::-webkit-scrollbar-thumb {background: #005B95; border: 2px solid #f1f1f1; border-radius: 1rem;}
    .wrap-mission-area .frame::-webkit-scrollbar-track {background-color: #f1f1f1;}
    .wrap-mission-area .map {width:1500px;}
}
/* [E] Troops */

/* [S] Finance */
.wrap-finance {position: relative; margin-top: 6rem;}
.wrap-finance .frame {display: flex; gap:0 4rem; text-align: center;}
.wrap-finance .frame > div {display: flex; flex-direction: column; width:100%}
.wrap-finance h3 {flex:1; font-family: pr; font-size: 2.2rem; color:#B17E1B; margin-bottom: 2rem;}
.wrap-finance h3 .bold {font-size: 2.6rem; color:#B17E1B;}
.wrap-finance img {width:100%;}
@media screen and (max-width:1000px) {
    .wrap-finance .frame {flex-direction: column;}
    .wrap-finance .frame > div {max-width:73rem; margin:0 auto; margin-bottom: 3rem; }
}
/* [E] Finance */

/* [S] Apply for courses */
.wrap-apply {position: relative; background:#FBF5F6; border-radius:1rem;}
.wrap-apply .frame {padding:5.5rem 7rem;}
.wrap-apply .list .line {display: flex; flex-wrap:wrap; margin:0 -4rem;}
.wrap-apply .list .line:nth-child(even) {flex-direction: row-reverse;}
.wrap-apply .list .item {position: relative; width:33.3333%; padding:0 4rem;}

.wrap-apply .list .line:not(.last) .item {padding-bottom:8rem;}
.wrap-apply .box {position: relative; display: flex; align-items: center; min-height:13rem; padding:2rem; background:#fff; border:1px solid #F27A90; border-radius:1rem;}
.wrap-apply .box::after {content:''; position: absolute; left:100%; top:50%; width:8rem; height:8rem; margin-top:-4rem; background:url('../../images/sub/ic-apply-arrw80.png') no-repeat center / contain;}
.wrap-apply .item:last-child .box::after{transform:rotate(90deg); left:unset; right:unset; top:100%; left:50%; margin-left:-4rem; margin-top:0;}
.wrap-apply .line.reverse .box::after {left:unset; right:100%; transform: rotate(180deg);}
.wrap-apply .line.last .item:last-child .box::after {display: none;}
.wrap-apply .box p {position: relative; display: flex; align-items: center; min-height:9rem; padding-left:11rem; font-family: pr; font-size: 1.7rem; line-height: 2.8rem; color:#555;}
.wrap-apply .box p::before {content:''; position: absolute; left:0; top:50%; width:9rem; height:9rem; margin-top:-4.5rem; background-color:#FBF5F6; background-position:center; background-size:cover; border-radius:50%;}
.wrap-apply .icon1 p::before {background-image:url('../../images/sub/ic-apply1.png');}
.wrap-apply .icon2 p::before {background-image:url('../../images/sub/ic-apply2.png');}
.wrap-apply .icon3 p::before {background-image:url('../../images/sub/ic-apply3.png');}
.wrap-apply .icon4 p::before {background-image:url('../../images/sub/ic-apply4.png');}
.wrap-apply .icon5 p::before {background-image:url('../../images/sub/ic-apply5.png');}
.wrap-apply .icon6 p::before {background-image:url('../../images/sub/ic-apply6.png');}
@media screen and (max-width:1300px) {
    .wrap-apply .frame {padding:4rem 3rem;}   
}
@media screen and (max-width:1200px) {
    .wrap-apply .frame {padding:4rem 3rem;}   
    .wrap-apply .box::after {background-size:unset; width:4.5rem; height:4rem; margin-top:-2rem;}
    .wrap-apply .item:last-child .box::after {margin-left:-2rem;}
    .wrap-apply .list .line:not(.last) .item {padding-bottom:4rem;}
    .wrap-apply .list .line {margin:0 -2rem;}
    .wrap-apply .list .item {width:50%; padding:0 2rem;}
    .wrap-apply .box p {padding-left:9rem; line-height: 1.2; font-size: 1.5rem;}
    .wrap-apply .box p::before {width: 7rem; height:7rem; margin-top:-3.5rem;}
    .wrap-apply .last-item .box::after{transform:rotate(90deg) !important; left:unset !important; right:unset !important; top:100% !important; left:50% !important; margin-left:-4rem !important; margin-top:0;}
}
@media screen and (max-width:768px) {
    .wrap-apply .list .item {width:100%;}
    .wrap-apply .last-item .box::after {margin-left:-2rem !important}
}
/* [E] Apply for courses */

/* [S] Guidebook */
.wrap-guide {position: relative;}
.wrap-guide .frame {display: flex; }
.wrap-guide .frame .left {flex-shrink: 0; max-width:71rem; width:100%; padding: 5.5rem 5.1rem 5.5rem 5.2rem; margin-right: 5rem; background:#FCF6F6;}
.wrap-guide .frame .left img {width:100%;}
.wrap-guide h3 {display: flex; align-items: center; font-family: pb; font-size: 2.2rem; color:#F2778D;}
.wrap-guide ul{margin-top: 7rem;}
.wrap-guide li {margin-top:2.5rem;}
/* .wrap-guide li p {min-height:9.5rem;} */
.wrap-guide li:first-child {margin-top: 0;}
.wrap-guide li:first-child h3::before {content:''; display: block; width: 2.4rem; height:2.4rem; margin-right: 1.5rem; background:url('../../images/sub/ic-guide1.png') no-repeat center / cover;}
.wrap-guide li:nth-child(2) h3::before {content:''; display: block; width: 2.5rem; height:2.6rem; margin-right: 1.7rem; background:url('../../images/sub/ic-guide2.png') no-repeat center / cover;}
.wrap-guide li:nth-child(3) h3::before {content:''; display: block; width: 2.7rem; height:2.6rem; margin-right: 1.4rem; background:url('../../images/sub/ic-guide3.png') no-repeat center / cover;}
.wrap-guide li:nth-child(4) h3::before {content:''; display: block; width: 3.2rem; height:2.2rem; margin-right: 1.4rem; background:url('../../images/sub/ic-guide4.png') no-repeat center / cover;}
@media screen and (max-width:1200px) {
    .wrap-guide .frame .left {width:50%; max-width:unset;}
    .wrap-guide ul{margin-top:0rem;}
}
@media screen and (max-width:900px) {
    .wrap-guide .frame {flex-direction: column;}
    .wrap-guide .frame .left {width:100%; margin:0 auto;}
    .wrap-guide .frame .right {margin-top: 3rem;}
}
/* [E] Guidebook */