@charset "utf-8";

@font-face {
    font-family: 'KyoboHandwriting2020ParkDoYeon';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112@1.0/KyoboHandwriting2020A.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'YeogiOttaeJalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'WithdriveExclusiveFont';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2207-01@1.0/wedrive.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'KyoboHandwriting2021Seongjiyoung';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KyoboHandwriting2021sjy.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JoseonBoldMyongjo';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunKm.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SchoolSafetyRoundedSmile';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

.sub_visual {margin-top:210px; background-image:linear-gradient(to right, #cccee5, #d0e5e4)}
.sub_visual > div {max-width:1400px; margin:0 auto; height:240px; padding-top:60px; box-sizing:border-box}
.sub_visual > div h2 {font-size:40px; font-weight:700; margin-bottom:30px; text-align:center}
.sub_visual > div .page_navigation {text-align:center}
.sub_visual > div .page_navigation span {background:url('/images/comm/ico_home.png') no-repeat 0 0; padding-left:30px; font-size:18px; line-height:23px; height:23px; display:inline-block}


nav.sub_menu {height:70px; margin-top:-35px}
nav.sub_menu a.m1 {display:none; font-size:18px; line-height:50px; box-sizing:border-box; padding-left:20px; border-bottom:1px solid #fff; position:relative; background:#5a61a9; color:#fff}
nav.sub_menu a.m1 i {width:15px; height:9px; background:url('/images/comm/allow_u.png') no-repeat; display:block; position:absolute; top:50%; transform:translateY(-50%); right:20px; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease}
nav.sub_menu a.m1.on i {transform: rotate(180deg)}

nav.sub_menu ul {max-width:1400px; margin:0 auto; text-align:center; display:flex; background:#fff; border-radius:20px; box-shadow:5px 7px 15px 6px rgba(0, 0, 0, 0.05)}
nav.sub_menu ul li {display:inline-block; position:relative; flex-basis:100%; height:70px}
nav.sub_menu ul li a {font-size:18px; transition:all 0.3s; position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%}
nav.sub_menu ul li a.long {display:flex; align-items:center; justify-content:center}
nav.sub_menu ul li.active > a {box-shadow: 0 5px 10px rgba(0, 0, 0, .1); background-image:linear-gradient(to right, #5a61a9, #5a7ba9); border-radius:20px; color:#fff; font-weight:700}
nav.sub_menu ul li a:hover:before {background-color:#5a61a9; width:50px}
nav.sub_menu ul li a:before {display:block; content:""; position:absolute; width:0; height:5px; border-radius:5px; background-color:transparent; top:0; left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%); -o-transform:translateX(-50%); transition:all 0.3s;}


.container {clear:both; max-width:1400px; margin:0 auto; position:relative; padding-top:70px; box-sizing:border-box}
.container.board {margin-bottom:50px}

.sub_page {line-height:1.5; font-size:17px; padding-bottom:70px; min-height:400px}
.sub_page img {max-width:100%}
.sub_page .section {margin-bottom:50px}
.sub_page p.green {color:#16a54b}

.ready {text-align:center; font-size:22px; font-weight:500; color:#999; padding-top:80px}

h3.tit {font-size:35px; margin-bottom:60px; font-weight:600; text-align:center; position:relative}
h4.tit {font-size:25px; margin-bottom:40px; padding-left:26px; font-weight:600; position:relative}
h4.tit span {font-size:18px; font-weight:400; margin-left:10px}
h4.tit:after {content:''; width:15px; height:15px; border:4px solid #5a61a9; position:absolute; top:10px; left:0; box-sizing:border-box; border-radius:5px}
h4.tit span {color:#5a61a9; font-weight:500}
h5.tit {font-size:22px; margin-bottom:30px; font-weight:600; color:#5a61a9}
h6.tit {font-size:18px; margin-bottom:20px; font-weight:600; padding:10px 20px; border-radius:30px; background:#f6f7ba; display:inline-block}

.nav_tab1 {margin-bottom:50px; font-size:0; margin-left:-1px; display:flex}
.nav_tab1 a {font-size:18px; color:#888; width:100%; height:60px; flex-basis:100%; background:#f9f9f9; border:#ededed solid 1px; text-align:center; margin-left:1px; position:relative; line-height:1; letter-spacing:-1px}
.nav_tab1 a:hover,
.nav_tab1 a.active {border:#5aa9a4 solid 2px; color:#fff; font-weight:500; background:#5aa9a4}
.nav_tab1 a:after {content:''; display:inline-block; width:0; height:100%; vertical-align:middle}
.nav_tab1 a.active:before {content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #5aa9a4; position: absolute; left: 50%; bottom: -8px; transform: translate(-50%, 0)}
.nav_tab1 a.long {display:flex; align-items:center; justify-content:center; line-height:1.5}
.nav_tab1 a.long:after {height:50%}

.nav_tab2 {margin-bottom:50px; font-size:0; margin-left:-1px; display:flex}
.nav_tab2 a {font-size:18px; color:#888; width:100%; height:60px; flex-basis:100%; background:#f9f9f9; border:#ededed solid 1px; text-align:center; margin-left:1px; position:relative; line-height:1; letter-spacing:-1px}
.nav_tab2 a:hover,
.nav_tab2 a.active {border:#54bab6 solid 2px; color:#fff; font-weight:500; background:#54bab6}
.nav_tab2 a:after {content:''; display:inline-block; width:0; height:100%; vertical-align:middle}
.nav_tab2 a.active:before {content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #54bab6; position: absolute; left: 50%; bottom: -8px; transform: translate(-50%, 0)}
.nav_tab2 a.long {display:flex; align-items:center; justify-content:center; line-height:1.5}
.nav_tab2 a.long:after {height:50%}

.nav_tab3 {margin-bottom:50px; font-size:0; margin-left:-5px; display:flex; justify-content:center}
.nav_tab3 a {font-size:18px; font-weight:500; flex-basis:100%; height:60px; color:#5aa9a4; background:#e7f5f1; border:#e7f5f1 solid 1px; border-radius:50px; text-align:center; margin-left:5px; position:relative; line-height:1; letter-spacing:-1px; box-shadow: 0 0 40px 40px #e7f5f1 inset, 0 0 0 0 #e7f5f1; transition: all 200ms ease-in-out;}
.nav_tab3 a:hover,
.nav_tab3 a.active {border:#5aa9a4 solid 1px; font-weight:500; background:#fff; color:#5aa9a4; box-shadow: 0 0 5px 0 #e7f5f1 inset, 0 0 5px 0 #e7f5f1}
.nav_tab3 a:after {content:''; display:inline-block; width:0; height:100%; vertical-align:middle} 
.nav_tab3 a.active:before {content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #6cb77e; position: absolute; left: 50%; bottom: -8px; transform: translate(-50%, 0)}

.nav_tab3.four {flex-wrap:wrap}
.nav_tab3.four a {flex-basis:unset; width:calc(25% - 7.5px); box-sizing:border-box; margin-bottom:7.5px}

.s_tab {text-align:center; margin-bottom:50px; display:flex}
.s_tab li {text-align:center; width:100%; height:60px; flex-basis:100%; height:60px; background:#fff; border:2px solid #f4f4f4; margin-right:1px; vertical-align:top; background:#f4f4f4; box-sizing:border-box}
.s_tab li>a {display:block; color:#999; font-size:16px; height:60px}
.s_tab li>a:after {content:''; display:inline-block; width:0; height:100%; vertical-align:middle}
.s_tab li.active {background:#fff; border:2px solid #b2d56d}
.s_tab li.active a {color:#333; font-weight:700}

.s_tab2 {text-align:center; margin-bottom:50px}
.s_tab2 ul {overflow:hidden; margin-left:-5px; font-size:0}
.s_tab2 ul li {width: calc(50% - 5px); margin-left:5px; border: 1px solid #ededed; background:#f9f9f9; padding:15px 0; box-sizing:border-box; display:inline-block}
.s_tab2 ul li.long {padding:6px 0}
.s_tab2 ul li.active {border:#5aa9a4 solid 1px; color:#fff; font-weight:500; background:#5aa9a4}
.s_tab2 ul li a {display:table; font-size:18px; width:100%}
.s_tab2 ul li a > span {display:table-cell; vertical-align:middle}
.s_tab2 ul li.active a {color:#fff}

.s_tab2.three li {width:calc(33.3% - 5px)}
.s_tab2.four li {width:calc(25% - 5px)}
.s_tab2.five li {width: calc(20% - 5px)}
.s_tab2.six li {width:calc(16.66% - 5px)}
.s_tab2.seven li {width:calc(14.28% - 5px)}
.s_tab2.eight li {width:calc(25% - 5px)}
.s_tab2.eight li:nth-child(n+5) {margin-top:10px}

.sub_page .btns {display:flex; justify-content:center}
.sub_page .btns.left {justify-content:left}
.sub_page .btn1 {min-width:16%; display:block; text-align:center; padding:12px; box-sizing:border-box; background:#5a61a9; color:#fff; border-radius:10px; margin:0 20px; font-size:16px}


/*기관안내*/
.about1 p.title {font-size:3em; font-weight:400; text-align:center; margin-bottom:50px; color:#ccc; font-family: 'WithdriveExclusiveFont'}
.about1 p.title strong {font-size:0.7em; font-family:'SpoqaHanSansNeo'; color:#5a7ba9; padding-left:8px}
.about1 .greeting {display:flex}
.about1 .greeting .img {width:42%}
.about1 .greeting .txt {width:58%; padding-left:80px}
.about1 .greeting .txt p {margin-bottom:20px}
.about1 .greeting .txt p strong {font-weight:500; color:#5aa9a4}
.about1 .greeting .txt .sign {text-align:right; font-family: 'KyoboHandwriting2020ParkDoYeon'; font-size:1.4em}

.about2 .history_tab {position:relative; margin-bottom:60px; font-size:0}
.about2 .history_tab li {display:inline-block; vertical-align:top; position:relative; width:25%; text-align:center}
.about2 .history_tab li:after {width:100%; height:1px; background:#d4d4d4; position:absolute; top:10px; left:0; content:""}
.about2 .history_tab li:last-child {margin-right:0}
.about2 .history_tab li a {display:block; width:100%; padding-top:45px; position:relative; font-size:20px; color:#888888}
.about2 .history_tab li a:after {content:""; width:20px; height:20px; border-radius:50%; border:4px solid #c8c8c8; position:absolute; top:0; left:50%; transform: translate(-50%, 0%); box-sizing:border-box; background:#fff; z-index:1}
.about2 .history_tab li.active a {font-size:25px; color:#333; padding-top:40px}
.about2 .history_tab li.active a:after {border-color:#5aa9a4}

.about2 .history .list {display:none}
.about2 .history .list > div {font-size:0; margin-bottom:50px}
.about2 .history .list span {display:inline-block; font-size:40px; font-weight:700; color:#5a61a9; width:200px; vertical-align:top; position:relative; margin-top:15px}
.about2 .history .list span:before {content:""; display:block; width:50px; height:1px; background:#e3e3e3; position:absolute; top:50%; translate(0%, -50%); right:0}
.about2 .history .list span:after {content:""; width:16px; height:16px; background:#ccc; border-radius:50%; position:absolute; top: calc(50% - 8px);  right:50px}
.about2 .history .list ul {display:inline-block; vertical-align:top; position:relative; padding:30px 0 0 20px; width:calc(100% - 200px); box-sizing:border-box}
.about2 .history .list ul > li {font-size:18px; position:relative; padding-left:80px; margin-bottom:20px; padding-bottom:10px; line-height:30px; border-bottom:#e3e3e3 dotted 2px}
.about2 .history .list ul > li:last-child {margin-bottom:0}
.about2 .history .list ul > li > label {position:absolute; left:0; display:block; color:#e7991f; font-weight:500}
.about2 .history .list ul > li p {margin-bottom:10px; position:relative; padding-left:20px}
.about2 .history .list ul > li p:before {content:""; display:block; width:5px; height:5px; background:#888; border-radius:50%; position:absolute; left:0; top:12px}

.about3 .mv_tit {text-align:center; font-size:1.6em; font-weight:bold; margin-bottom:30px; color:#5aa9a4; font-family: 'YeogiOttaeJalnan'; margin-top:20px}
.about3 .mv_tit.mv2 {color:#5a7ba9; margin-top:0}
.about3 .vision {text-align:center; font-size:1.8em; padding:20px; box-sizing:border-box; border-radius:50px; background:#f0f9f9; margin-bottom:80px; font-family: 'KyoboHandwriting2021Seongjiyoung'}
.about3 .vision strong {color:#5aa9a4; font-weight:normal}
.about3 .vision strong.bl {color:#5a7ba9}
.about3 .mission {display:flex; flex-wrap:wrap; padding:37px 30px 30px; box-sizing:border-box; border-radius:25px; background:#f9f9f9; justify-content:space-between}
.about3 .mission li {width:calc(25% - 15px); background:#fff; padding:30px 20px 20px; box-sizing:border-box; border-radius:15px; text-align:center; position:relative}
.about3 .mission li label {background:#5a7ba9; color:#fff; padding:4px 12px; box-sizing:border-box; border-radius:20px; position:absolute; top:-17px; left:50%; transform:translateX(-50%)}
.about3 .mission li .img {margin:10px 0 20px}

.about4 .strategy {text-align:center}
.about4 .strategy .title {font-size:2em; font-weight:bold; margin-bottom:30px; color:#5aa9a4; font-family: 'YeogiOttaeJalnan'}
.about4 .strategy .substance {margin-bottom:70px}
.about4 .strategy .substance span {font-size:1.5em; font-weight:500; position:relative; padding:40px 70px; border:#d1d4ec solid 7px; display:inline-block}
.about4 .strategy .substance span::before {content:'“'; font-family: 'JoseonBoldMyongjo'; font-size:4em; color:#ddd; line-height:1; position:absolute; left:20px; top:30px; z-index:1}
.about4 .strategy .substance span::after {content:'”'; font-family: 'JoseonBoldMyongjo'; font-size:4em; color:#ddd; line-height:1; position:absolute; right:20px; top:30px; z-index:1}
.about4 .strategy .substance strong {margin-left:10px; color:#5a61a9; font-size:1.5em; font-family: 'JoseonBoldMyongjo'}
.about4 .strategy ul {margin:0 auto; width:55%}
.about4 .strategy ul li {display:flex; align-items:center; justify-content:center; padding-bottom:20px; border-bottom:#dbdbdb dotted 2px}
.about4 .strategy ul li+li {margin-top:20px}
.about4 .strategy ul li .img {width:140px; height:140px; margin-right:50px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:#dbdbdb dotted 2px; background:#f7f7f7}
.about4 .strategy ul li p {width:calc(100% - 190px); font-size:20px; font-weight:500; box-sizing:border-box; border:#c4e3d6 solid 4px; padding:20px; position:relative; border-radius:50px}
.about4 .strategy ul li p::before {content:''; width:50px; height:1px; background:#dbdbdb; position:absolute; left:-54px; top:50%; transform:translateY(-50%)}


.about5 .talent {display:flex}
.about5 .talent .img {width:30%; text-align:center}
.about5 .talent .txt {width:70%; padding:15px 0 0 30px; box-sizing:border-box}
.about5 .talent .txt li {line-height:1.5; position:relative; padding-bottom:15px; border-bottom:#dbdbdb solid 1px}
.about5 .talent .txt li+li {margin-top:30px}
.about5 .talent .txt li label {font-weight:500; font-size:1.2em; display:block; margin-bottom:10px}
.about5 .talent .txt li:nth-child(1) label {color:#6877bb}
.about5 .talent .txt li:nth-child(2) label {color:#e89832}
.about5 .talent .txt li:nth-child(3) label {color:#48b848}
.about5 .img {text-align:center}
.about5 p.title {margin-bottom:30px; padding:30px; box-sizing:border-box; border-radius:15px; border:2px solid #dbdbdb; text-align:center; word-break:keep-all}
.about5 p.title strong {color:#ed7024}

.about5 .ci_txt {display:flex; jusity-content:space-between; align-items:flex-start; margin-bottom:50px}
.about5 .ci_txt .ci {width:35%; text-align:center; padding:50px 10px; border:1px solid #e8e8e8; background:url('/images/about/logo_bg.png') repeat; box-sizing:border-box}
.about5 .ci_txt .colors {width:65%; display:flex; justify-content:space-between; padding-left:50px; box-sizing:border-box}
.about5 .ci_txt .colors > div {width:30%}
.about5 .ci_txt .colors > div > div {height:250px; border-radius:35px; box-shadow:5px 5px 5px #ccc; position:relative; margin-bottom:25px}
.about5 .ci_txt .colors > div > div.c1 {background:linear-gradient(to bottom, #667dc0 70%, #eee 30%)}
.about5 .ci_txt .colors > div > div.c2 {background:linear-gradient(to bottom, #4cc156 70%, #eee 30%)}
.about5 .ci_txt .colors > div > div.c3 {background:linear-gradient(to bottom, #f2a738 70%, #eee 30%)}
.about5 .ci_txt .colors > div > div > .c_txt {position:absolute; left:20px; bottom:12px; font-weight:500}
.about5 .ci_txt .colors > div > .txt {text-align:center; font-weight:500;font-size:1.1em}
.about5 .ci_txt .colors > div > .t1 {color:#667dc0}
.about5 .ci_txt .colors > div > .t2 {color:#4cc156}
.about5 .ci_txt .colors > div > .t3 {color:#f2a738}

.about5 .text_list1 strong {color:#ed7024}

.about5 .logos {display:grid; grid-template-columns:1fr 1fr 1fr; gap:40px; margin-bottom:50px}
.about5 .logos .ci {padding:30px; background:url('/images/about/logo_bg.png') repeat; box-sizing:border-box; border:1px solid #e8e8e8; text-align:center}

.about6 p.text {text-align:right; margin-top:20px}

.about7 .floor_tab {width:50%; position:relative; margin: 0 auto 30px; font-size:0}
.about7 .floor_tab ul {text-align:center}
.about7 .floor_tab li {display:inline-block; vertical-align:top; position:relative; width:calc(20% - 8px); text-align:center}
.about7 .floor_tab li a {display:block; width:100%; position:relative; font-size:20px; color:#888888; padding:10px; box-sizing:border-box; border-radius:10px; border:1px solid #dbdbdb}
.about7 .floor_tab li+li{margin-left:10px}
.about7 .floor_tab li.active a {background:#5a7ba9; color:#fff; border:1px solid #5a7ba9}

.about7 .list {display:none}

.about7 .fac {font-size:0; display:table; width:100%; table-layout:fixed}
.about7 .fac > div {display:table-cell; font-size:16px; border:1px solid #dbdbdb; box-sizing:border-box; vertical-align:top; height:100%}
.about7 .fac .pt {width: calc(100% - 240px); text-align:center; padding:20px}
.about7 .fac .pt img {max-width:100%}
.about7 .fac .flo {width:240px; border-left:none; padding:10px; box-sizing:border-box; background:#eee}
.about7 .fac .flo ul li {padding:10px; text-align:center; border-radius:30px; background:#fff}
.about7 .fac .flo ul li span {font-size:0.8em; word-break:keep-all}
.about7 .fac .flo ul li+li {margin-top:10px}
.about7 .fac .flo ul li a {font-size:18px; display:block}
.about7 .fac .flo ul li.active {background:#fff; border:2px solid #5a7ba9}
.about7 .fac .flo ul li.active a {color:#5a7ba9; font-weight:600}

.about8 .top {display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.about8 .top p {position:relative; padding-left:50px}
.about8 .top p span {font-weight:bold; position:absolute; left:0}
.about8 .top .btn {padding:8px 40px; box-sizing:border-box; border:1px solid #ddd; border-radius:5px; display:inline-block}
.about8 .map_txt {display:flex; border-bottom:1px solid #dbdbdb; padding-bottom:50px; box-sizing:border-box}
.about8 .map_txt.two div {width:50%; display:flex}
.about8 .map_txt.two div > ul > li:first-child {font-weight:bold; font-size:1.2em}
.about8 .map_txt.two div > ul > li+li {margin-top:5px}
.about8 .map_txt i {width:67.5px; height:67.5px; padding:20px; border: 1px solid #eee; font-size:1.5em; border-radius:5px; box-sizing:border-box; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); margin-right:30px}
.about8 .map_txt > ul > li {line-height:1.5}
.about8 .map_txt > ul > li:first-child {font-weight:bold; font-size:1.2em}
.about8 .map_txt > ul > li+li {margin-top:25px}
.about8 .map_txt > ul > li > strong {color:#5a61a9}
.about8 .map_txt > ul > li > p {margin-top:10px}
.about8 .map_txt > ul > li > ul {margin-top:20px; margin-left:7px}
.about8 .map_txt > ul > li > ul > li+li {margin-top:15px}
.about8 .map_txt > ul > li > ul > li > span {color:#fff; padding:3px 10px; box-sizing:border-box; border-radius:3px; margin:5px 5px 5px 0}
.about8 .map_txt > ul > li > ul > li > span.purple {background:#9862c4}
.about8 .map_txt > ul > li > ul > li > span.green {background:#40b23c}
.about8 .map_txt > ul > li > ul > li > span.blue {background:#197fcd}
.about8 .map_txt > ul > li > ul > li > span.red {background:#e03d3d}

/*이용안내*/
.guide .step {display:flex; flex-wrap:wrap; margin-left:-30px; padding-right:30px}
.guide .step li {width:calc(33.333% - 30px); margin-left:30px; text-align:center; color:#888; padding:20px; box-sizing:border-box; border:1px solid #dbdbdb; position:relative}
.guide .step li::before {content:''; width:15px; height:26px; background:url('/images/guide/arrow.png'); position:absolute; top:50%; right: -23px; transform:translateY(-50%)}
.guide .step li:last-child::before {display:none}
.guide .step li .img {margin:30px 0 20px}
.guide .step li label {color:#4cc156; background:#f9f9f9; padding:5px 15px; box-sizing:border-box; border-radius:5px; font-weight:600}
.guide .step li p {color:#333; font-weight:500; font-size:1.1em; margin-bottom:5px}
.guide .step li:nth-child(n+4) {margin-top:30px}

.guide .step2 {background:#f9f9f9; border-radius:25px; padding:20px; box-sizing:border-box}
.guide .step2 ul {display:flex; justify-content:center}
.guide .step2 li {flex-basis:100%; padding-right:30px; text-align:center; padding:20px; box-sizing:border-box; position:relative; font-weight:500; word-break:keep-all}
.guide .step2 li::before {content:''; width:25px; height:25px; background:url('/images/guide/arrow2.png'); position:absolute; top:60px; right:0}
.guide .step2 li:last-child::before {display:none} 
.guide .step2 li .img {margin-bottom:15px}

.guide .notes {display:flex; justify-content:space-between; margin-bottom:50px}
.guide .note {position:relative; background:linear-gradient(-150deg, transparent 1.5em, #f9f9f9 0); width:23%; padding:30px 30px 50px 30px; border-radius:.5em; text-align:center; box-sizing:border-box}
.guide .note::before {content:''; position:absolute; top:0; right:0; background:linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4)) 100% 0 no-repeat; width:1.73em; height:3em; transform:translateY(-1.3em) rotate(-30deg); transform-origin: bottom right; border-bottom-left-radius:inherit; box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15)}
.guide .note .img {margin-top:20px}
.guide .note p {font-size:1.2em; font-weight:600; position:relative; margin:20px 0 10px; color:#5a7ba9}

.guide p.title {font-size:1.4em; font-weight:500; margin-bottom:30px; color:#5aa9a4}
.guide .txt_list {margin-bottom:50px}
.guide .txt_list li {line-height:1.5; position:relative; padding-left:120px}
.guide .txt_list li::before {content:''; width:100%; height:1px; background:#dbdbdb; position:absolute; left:0; bottom:-11px}
.guide .txt_list li label {color:#fff; background:#5a7ba9; border-radius:5px; padding:5px 20px; box-sizing:border-box; position:absolute; top:-6px; left:0}
.guide .txt_list li+li {margin-top:25px}
.guide .txt_list li.ls1 label {letter-spacing:1.6px}
.guide .txt_list li.two label {word-spacing:28px}

.guide .top_tit {display:flex; align-items:center; background:#f9f9f9; border-radius:25px; padding:20px 0; box-sizing:border-box}
.guide .top_tit .txt {width:78%; padding:0 40px 0 80px; box-sizing:border-box}
.guide .top_tit .txt > li {display:flex; flex-wrap:wrap; padding-left:40px; position:relative}
.guide .top_tit .txt > li > i {font-size:1.4em; color:#5aa9a4; margin-top:1px; position:absolute; left:0}
.guide .top_tit .txt > li:nth-child(3) > i {margin-top:3px}
.guide .top_tit .txt > li+li {margin-top:20px}
.guide .top_tit .txt > li > label {width:280px; font-weight:600; font-size:1.1em; display:inline-block}
.guide .top_tit .txt > li > ul > li > label {display:block; font-weight:500; color:#222}
.guide .top_tit .txt > li > ul > li+li {margin-top:15px}

.guide .top_tit .img {width:22%; text-align:right}

.guide .search_box {background:#f7f7f7; border:#dbdbdb solid 1px; box-sizing:border-box; padding:20px; display:flex; align-items:center; justify-content:center}
.guide .search_box > * {margin:0 10px}

.guide .map_img {margin:0 auto 50px}
.guide .map_img img {border-radius:50px}

.guide .img.mobile {display:none}

/* 사업안내 */

.business .table01 i {background:#aaadd3; color:#fff; font-weight:700; padding:3px; border-radius:3px}
.business .table01 .tel {margin-top:5px; font-weight:500}

/*수영센터*/
.center1 {padding-left:100px; padding-right:100px; box-sizing:border-box}
.center1 .title {margin-bottom:50px}
.center1 .title img {border-radius:25px}
.center1 .title_txt {font-size:1.8em; margin-bottom:30px; font-family: 'SchoolSafetyRoundedSmile'; color:#5a61a9}

.center .info {display:flex; align-items:center; background:#f9f9f9; border-radius:25px; padding:20px 50px; box-sizing:border-box; margin-bottom:30px}
.center .info .left {width:20%; font-size:22px; font-weight:bold; color:#5aa9a4}
.center .info ul {width:80%; padding:20px 0 20px 40px; box-sizing:border-box; position:relative}
.center .info ul::before {content:''; width:1px; height:100%; background:#dbdbdb; position:absolute; top:0; left:0}
.center .info.last {margin-bottom:50px}

.center .photo {display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; text-align:center; margin-top:30px}
.center .photo img {border-radius:25px}
.center .photo p {margin-top:20px; background:#f1f1f1; border-radius:50px; padding:12px; box-sizing:border-box}

.center .staff_info {display:flex; flex-wrap:wrap; margin-left:-40px}
.center .staff_info > div {width:calc(50% - 40px); margin-left:40px; box-sizing:border-box; border:#dbdbdb solid 1px; display:flex; background:#f7f7f7}
.center .staff_info > div:nth-child(n+3) {margin-top:40px}
.center .staff_info > div .img {padding:50px 40px; box-sizing:border-box; width:33%}
.center .staff_info > div .txt {width:67%; padding:30px 30px 30px 0; box-sizing:border-box}
.center .staff_info > div .txt p {font-size:25px; color:#5a61a9; font-weight:500; margin-bottom:20px}
.center .staff_info > div .txt li {position:relative; padding-left:20px; font-size:17px; word-break:keep-all}
.center .staff_info > div .txt li:before {content:""; display:block; width:5px; height:5px; border-radius:50%; background:#5a7ba9; position:absolute; left:0; top:10px}

.center .title {margin-bottom:20px}
.center .box {display:flex; padding:30px 0; box-sizing:border-box; border-bottom:1px solid #dbdbdb}
.center .box.first {border-top:1px solid #dbdbdb}
.center .box2 {display:flex; width:50%}
.center .box2 .img {width:80px}
.center .box2 .text {width:calc(100% - 80px); box-sizing:border-box; padding-left:30px}
.center .box2 .tit2 {font-size:1.3em; margin-bottom:10px}
.center .box2 .txt1 > li {position:relative; padding-left:20px; line-height:1.5}
.center .box2 .txt1 > li+li {margin-top:5px}
.center .box2 .txt1 > li > label {position:absolute; top:0; left:0}
.center .box2 .txt1 > li > ul > li {position:relative; padding-left:15px; line-height:1.5; color:#555}
.center .box2 .txt1 > li > ul > li::before {content:'-'; position:absolute; top:0; left:0}
.center .box2 .txt2 li {position:relative; padding-left:20px; line-height:1.5}
.center .box2 .txt2 li+li {margin-top:5px}
.center .box2 .txt2 li::before {content:'·'; position:absolute; top:0; left:0}
.center .box2 .txt2 li.red {padding-left:0; color:#f00}
.center .box2 .txt2 li.red::before {display:none}

/* 후원·자원봉사 */
.divide .field {display:flex; margin-bottom:50px; margin-left:-15px}
.divide .field.two li {width:calc(50% - 15px)}
.divide .field.four li {width:calc(25% - 15px)}
.divide .field li {width:calc(20% - 15px); margin-left:15px; text-align:center; background:#f9f9f9; border-radius:15px; padding:20px; box-sizing:border-box}
.divide .field li p {font-weight:bold; margin-bottom:5px}
.divide .field li .img {margin:10px 0 20px 0}

.divide .benefit {margin-bottom:50px; padding:50px; box-sizing:border-box; border:6px solid #dbe6f4; border-radius:25px}
.divide .benefit ul li {padding-bottom:20px; border-bottom:1px dashed #dbdbdb; line-height:1.5; position:relative; padding-left:50px}
.divide .benefit ul li:last-child {border-bottom:none; padding-bottom:0}
.divide .benefit ul li+li {margin-top:20px}
.divide .benefit ul li label {background:#5a7ba9; color:#fff; font-weight:bold; padding:5px 8px; box-sizing:border-box; border-radius:20px; position:absolute; top:-5px; left:0}

.divide .txt1 {color:#F63; margin-bottom:20px}

/*복지관소식*/

.community .info_box {border:#dbdbdb solid 1px; padding:30px; border-radius:30px}

.community .search_box {background:#f7f7f7; border:#dbdbdb solid 1px; box-sizing:border-box; padding:20px; display:flex; align-items:center; justify-content:center}
.community .search_box ul {display:flex; margin-right:30px}
.community .search_box ul li {display:flex; align-items:center}
.community .search_box ul li label {display:inline-block; margin-right:10px}
.community .search_box ul li+li {margin-left:30px}

.community .step1 {display:flex; margin-left:-20px}
.community .step1 li {width:calc(25% - 20px); margin-left:20px; text-align:center; border:3px solid #eee; border-radius:25px; padding:20px; box-sizing:border-box; font-weight:600}
.community .step1 li .img {margin-bottom:20px}


/* 주간보호시설 */

.facility .v_txt {margin-bottom:40px}
.facility .v_txt p {font-size:1.2em; margin-bottom:15px; font-weight:500; padding:30px; box-sizing:border-box; background:#f9f9f9; border:1px solid #dbdbdb; border-radius:50px; text-align:center; margin-bottom:30px}
.facility .v_txt p strong {font-weight:600; color:#5a7ba9; display:inline-block}

.facility .gray_box {background:#f9f9f9; padding:40px; box-sizing:border-box}
.facility .step3 .step_box {display:flex; margin-bottom:50px; position:relative}
.facility .step3 .step_box::before {content:''; width:100%; height:1px; background:#dbdbdb; position:absolute; bottom:-25px; left:0}
.facility .step3 .step_box .left {width:25%; font-size:1.2em; font-weight:bold; color:#5aa9a4}
.facility .step3 .step_box .left label {display:block; color:#ccc}
.facility .step3 .step_box ul {width:75%; padding-left:30px; box-sizing:border-box}

.facility .title {display:flex; align-items:center; justify-content:space-between; padding:30px 60px 30px 80px; box-sizing:border-box; background:#f9f9f9; border:1px solid #dbdbdb; border-radius:50px}
.facility .title .txt p {font-size:1.4em; font-weight:600; color:#5a7ba9; padding-top:5px}

.facility .bank {display:inline-block; margin-left:10px}

.inquiry {border-top:#666 solid 2px; border-bottom:#dbdbdb solid 1px; padding:20px; display:table; width:100%; background:#f7f7f7; box-sizing:border-box}
.inquiry div {box-sizing:border-box; height:60px; font-size:18px; vertical-align:middle; display:table-cell; padding-left:50px; position:relative}
.inquiry div label {font-weight:500; display:inline-block; margin-right:20px}
.inquiry div i {position:absolute; left:0; top:15px; font-size:32px; color:#5aa9a4}
.inquiry div span {margin-right:20px}
.inquiry div span strong {color:#5a61a9; font-size:20px; margin-left:20px}
.inquiry div span em {text-decoration:none}

.inquiry_list li {line-height:1.5}
.inquiry_list li label {padding:0 10px; font-weight:600; color:#888}
.inquiry_list li+li {margin-top:20px}
.inquiry_list li i {margin-right:10px; color:#fff; background:#5a7ba9; border-radius:25px; padding:10px; box-sizing:border-box; font-size:1.2em}


/* 식단표 */
.calendar {margin-bottom:50px}
.calendar > p {margin-bottom:10px; display:flex; justify-content:center; align-items:center}
.calendar > p span {font-size:30px; font-weight:700}
.calendar > p span strong {color:#009c0f}
.calendar > p span,
.calendar > p a {margin-right:20px}
.calendar > p a:last-child {margin-right:0}
.calendar .Sun {color:#de3634}
.calendar .Sat {color:#477cd8}
.calendar > ul > li > div time em {float:right; font-size:14px}
.calendar > ul > li > div time p strong {font-weight:normal; margin-top:10px; display:inline-block}

.calendar > ul {display:table; width:100%; font-size:0px; margin-bottom:15px}
.calendar > ul > li {display:table-row; width:100%}
.calendar > ul > li > div {padding:5px; display:table-cell; width:14%; min-height:140px; height:140px;border-right:1px solid #ececf1; border-bottom:1px solid #ececf1; background:#fff}
.calendar > ul > li > div:last-child {border-right:0px;}
.calendar > ul > li.cal_header > div {height:30px; line-height:30px; min-height:0px; border-top:1px solid #dfd8c6; border-right:1px solid #dfd8c6; border-bottom:1px solid #dfd8c6; background:#fbfaf7; color:#777777; font-weight:bold; text-align:center; font-size:16px}
.calendar > ul > li.cal_header > div:last-child {border-right:0px}
.calendar > ul > li.cal_header > div.Sun {color:#cc2220}
.calendar > ul > li.cal_header > div.Sat {color:#2453a5}
.calendar > ul > li > div > time {display:block; padding:3px; min-height:15px;  font-size:14px}
.calendar > ul > li > div > time span {display:none;}
.calendar > ul > li > div > time p {font-weight:normal; margin-top:5px; color:#333; text-align:center; font-size:16px; padding-bottom:10px}
.calendar > ul > li > div > time p div {background:#F00}
.calendar > ul > li > div.today{background:#f4f4f4;}

.calendar .food {display:flex; padding-top:30px}
.calendar .food > div {width:calc(14.28% - 10px); text-align:center; border-top:2px solid #4aa55b; box-sizing:border-box}
.calendar .food > div:first-child {width:70px; font-weight:700; background:#f6f9f1}
.calendar .food ul li {padding:10px; box-sizing:border-box; border-bottom:#dbdbdb solid 1px; border-left:#dbdbdb solid 1px; min-height:200px; max-height:200px; display:flex; text-align:center; justify-content:center; align-items:center}
.calendar .food ul li:first-child {background:#eff8e1; min-height:30px; font-weight:700}
.calendar .food > div:first-child li {border-left:none}



/*회원메뉴*/
.member {font-size:16px}
.member .box {border:#e3e3e3 solid 1px; border-radius:10px; padding:20px; margin-bottom:30px}
.member .txt1 {margin-left:20px; margin-bottom:40px}
.member .txt1 p {margin-bottom:20px}
.member ul {margin:10px 0 10px 20px}

.agree {border:1px solid #999; margin-bottom:40px; padding:20px; font-size:16px}
.agree .box {background:#f7f7f7; padding:20px; margin-bottom:20px; text-align:center}
.agree p {margin-bottom:20px}
.agree p.tit {font-weight:700; margin-bottom:20px}
.agree ul {margin-bottom:30px; margin-left:10px}
.agree ul li {font-size:16px}
.agree .btn {text-align:center; padding-bottom:30px; margin-left:-20px}
.agree .btn input {margin-left:20px}
.agree .np {padding-bottom:0; margin-bottom:0}


.sub_page .btn_area {text-align:center; margin-left:-10px; font-size:0; margin-bottom:50px}
.sub_page .btn_area a,
.sub_page .btn_area input,
.sub_page .btn_area button {display:inline-block; margin-left:10px}



.popModal {display:none; max-width:800px !important; padding:30px !important}
.popModal p.title {font-size:20px; font-weight:bold; padding-bottom:20px; margin-bottom:20px; border-bottom:2px solid #888888}
.popModal table {line-height:1.2}