/* 공통 */
html,body {overflow-x:hidden;}
* {letter-spacing:-0.5px;}
*:not(html,body)::-webkit-scrollbar {width:10px; height:4px; background:rgba(136, 136, 136, 0.4); border-radius:30px;}
*:not(html,body)::-webkit-scrollbar-thumb {background:#888; height:4px; border-radius:30px;}
.is-pc {display:block;}
.is-m {display:none;}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
}
/* 컨테이너 */
.container {max-width:1310px; padding:0 15px;}
@media (max-width:991px){
.container {padding:0 20px;}
}
/* 헤더 */
header {display:flex; flex-wrap:wrap; position:fixed; left:0; top:0; width:440px; height:100%; transition:all ease 0.5s; z-index:9999; overflow:hidden; box-shadow:8px 3px 16px rgba(0,0,0,0.08);}
header .header-lnb {position:relative; z-index:10; width:120px; height:100%; background:#202020; padding:46px 0 0;}
header .header-lnb h1:after {display:block; content:""; margin:50px auto 32px; width:48px; height:1px; background:#707070;}
header .header-lnb h1 a {display:block;}
header .header-lnb h1 a img {width:76px; display:block; margin:0 auto;}
header .header-lnb .menu {display:flex; flex-wrap:wrap; align-items:center; align-content:space-between; width:32px; height:24px; margin:0 auto;}
header .header-lnb .menu span {transition:all ease 0.5s; position:relative; width:100%; height:4px; background:#fff; border-radius:2px; display:block;}
header .header-lnb .menu span:first-of-type {transform:rotate(45deg); top:10px;}
header .header-lnb .menu span:last-of-type {transform:rotate(-45deg); top:-10px;}
header .header-lnb .menu span:nth-of-type(2) {opacity:0;}
header .header-gnb {position:absolute; right:0; top:0; width:320px; height:100%; background:#fff; padding:60px 40px; transition:all ease 0.5s;}
header .header-gnb .gnb-head {border-bottom:1px solid #E4E4E4; padding:0 0 32px; margin:0 0 64px;}
header .header-gnb .gnb-head ul {display:flex; flex-wrap:wrap; align-items:center;}
header .header-gnb .gnb-head ul li {display:flex; flex-wrap:wrap; align-items:center;}
header .header-gnb .gnb-head ul li:after {display:inline-block; content:""; width:16px; height:16px; background:url('../images/icon_location.png') no-repeat center / cover; margin:0 8px;}
header .header-gnb .gnb-head ul li:last-of-type:after {display:none;}
header .header-gnb .gnb-head ul li a {font-size:20px; font-weight:600; color:#7E7E7E;}
header .header-gnb .gnb-head ul li.home a {display:block; font-size:0; width:24px; height:24px; background:url('../images/icon_home.png') no-repeat center / cover;}
header .header-gnb .gnb-head h2 {margin:16px 0 0; font-size:30px; font-weight:800; color:#202020;}
header .header-gnb .gnb-body ul li {margin:0 0 32px;}
header .header-gnb .gnb-body ul li:last-of-type {margin:0;}
header .header-gnb .gnb-body ul li a {
display:flex; align-items: center; font-size:20px; font-weight:500; color:#7E7E7E;
}
header .header-gnb .gnb-body ul li a i {
margin-right:12px;
font-size:22px;
}
header .header-gnb .gnb-body ul li.active a {font-weight:700; color:#8FC320;}
header .header-gnb .gnb-body ul li:hover a {font-weight:700; color:#8FC320;}
header.active {width:120px;}
header .header-lnb .menu span:first-of-type {transform:none; top:0;}
header .header-lnb .menu span:last-of-type {transform:none; top:0;}
header .header-lnb .menu span:nth-of-type(2) {opacity:1;}
header.active .header-gnb {left:-320px;}
@media (max-width:1250px){
header {width:350px;}
header .header-lnb {
width:80px; padding-top:70px;
}
header .header-lnb h1 a img {width:50px;}
header .header-gnb {width:270px;}
header.active {width:80px;}
}
@media (max-width:991px){
header {width:100%; height:auto; box-shadow:none;}
header .header-lnb {
display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
background:#202020; padding:10px; width:100%; height:64px;
}
header .header-lnb h1:after {display:none;}
header .header-lnb h1 a img {width:40px; margin:0;}
header .header-lnb .menu {margin:0; width:28px; height:20px; position:relative; z-index:999999;}
header .header-lnb .menu span {height:2px;}
header .header-lnb .menu span:first-of-type {transform:none; top:0px;}
header .header-lnb .menu span:last-of-type {transform:none; top:0px;}
header .header-lnb .menu span:nth-of-type(2) {opacity:1;}
header .header-gnb {opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.8); pointer-events:none;}
header .header-gnb .box {padding:20px; position:absolute; left:-280px; top:0; width:280px; height:100%; background:#fff; transition:all ease 0.5s;}
header .header-gnb .gnb-head {padding:0 0 20px; margin:0 0 20px;}
header .header-gnb .gnb-head ul li:after {width:13px; height:13px; margin:0 7px;}
header .header-gnb .gnb-head ul li a {font-size:15px;}
header .header-gnb .gnb-head ul li.home a {width:20px; height:20px;}
header .header-gnb .gnb-head h2 {margin:15px 0 0; font-size:30px;}
header .header-gnb .gnb-body ul li {margin:0 0 20px;}
header .header-gnb .gnb-head ul li a {font-size:16px;}
header.active {width:100%; height:100%;}
/*header .header-lnb .menu span:first-of-type {transform:rotate(45deg); top:8px;}
header .header-lnb .menu span:last-of-type {transform:rotate(-45deg); top:-10px;}*/
header .header-lnb .menu span:nth-of-type(2) {opacity:1;}
header.active .header-gnb {z-index:9999; opacity:1; pointer-events:inherit; left:0;}
header.active .header-gnb .box {left:0;}
}
/* 본문 */
section {
width:calc(100% - 440px); margin-left:440px;
min-height:calc(100vh - 110px);
transition:all ease 0.5s; padding:60px 0 100px; padding-left:50px; padding-right:50px;
}
section.active {width:calc(100% - 120px); margin-left:120px;}
@media (max-width:1250px){
section {width:calc(100% - 350px); margin-left:350px; padding-left:0; padding-right:0;
}
section.active {width:calc(100% - 80px); margin-left:80px;}
}
@media (max-width:991px){
section {width:100%; min-height:calc(100vh - 250px); margin-left:0; margin-top:64px; padding:40px 0; padding-left:0px;}
section.active {width:100%; margin-left:0;}
}
/* 푸터 */
section + footer {
}
footer {
width:calc(100% - 440px); margin-left:440px;
background:#202020;
padding:30px 0; padding-left:50px;
transition:all ease 0.5s;
}
footer.active {width:calc(100% - 120px); margin-left:120px;}
footer .container {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
footer .footer-left {display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-left img {
width:200px;
}
footer .footer-left ul {padding-left:90px;}
footer .footer-left ul li {font-size:12px; line-height:14px; color:rgba(255,255,255,0.6);}
footer .footer-right ul {display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-right ul li {display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-right ul li:after {display:inline-block; content:""; width:2px; height:11px; background:rgba(255,255,255,0.6); margin:0 15px;}
footer .footer-right ul li:last-of-type:after {display:none;}
footer .footer-right ul li a {font-size:12px; font-weight:600; color:rgba(255,255,255,0.6);}
footer .footer-right select {display:block; margin:8px 0 0; min-width:160px; border:1px solid #707070; padding:7px 12px; padding-right:30px; background:#fff url('../images/icon_select.png') no-repeat calc(100% - 12px) center / 11px;}
footer .footer-sitemap {transition:all ease 0.5s; opacity:0; pointer-events:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:999999; background:#fff; padding:100px 80px;}
footer .footer-sitemap .sitemap-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
footer .footer-sitemap .sitemap-head h2 {font-size:40px; color:#202020; font-weight:700;}
footer .footer-sitemap .sitemap-head a {width:32px; height:32px; font-size:0; background:url('../images/icon_close.png') no-repeat center / cover;}
footer .footer-sitemap .sitemap-body {margin:80px 0 0;}
footer .footer-sitemap .sitemap-body ul li {margin:0 0 40px; display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-sitemap .sitemap-body ul li:last-of-type {margin:0;}
footer .footer-sitemap .sitemap-body ul li strong {width:145px; font-size:24px; font-weight:700; color:#202020;}
footer .footer-sitemap .sitemap-body ul li dl {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-sitemap .sitemap-body ul li dl dd {padding:15px 24px; width:16.66%; position:relative;}
footer .footer-sitemap .sitemap-body ul li dl dd:after {position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:24px; content:""; background:#202020;}
footer .footer-sitemap .sitemap-body ul li dl dd a {display:flex; flex-wrap:wrap; align-items:center; font-size:24px; font-weight:500; color:#202020;}
footer .footer-sitemap .sitemap-body ul li dl dd {
width:auto !important;
}
footer .footer-sitemap .sitemap-body ul li dl dd.active a {
display: flex; align-items: center;
color:#8FC320; font-weight:bold; flex-wrap:nowrap;
white-space: nowrap;
}
footer .footer-sitemap .sitemap-body ul li dl dd.active a:after {display:inline-block; content:""; width:26px; height:26px; background:url('../images/icon_link.png') no-repeat center / cover; margin-left:8px;}
footer .footer-sitemap.fixed {opacity:1; pointer-events:inherit;}
@media (max-width:1400px){
footer .footer-sitemap {padding:50px 30px;}
footer .footer-sitemap .sitemap-body {margin:50px 0 0;}
}
@media (max-width:1250px){
footer {width:calc(100% - 350px); margin-left:350px; padding-left:0;}
footer.active {width:calc(100% - 80px); margin-left:80px;}
footer .footer-sitemap .sitemap-body ul li strong {width:130px; font-size:20px;}
footer .footer-sitemap .sitemap-body ul li dl dd {padding:15px;}
footer .footer-sitemap .sitemap-body ul li dl dd a {font-size:20px;}
}
@media (max-width:991px){
footer {width:100%; margin-left:0; padding-left:0px;}
footer.active {width:100%; margin-left:0;}
footer .footer-left {width:100%;}
footer .footer-left h2 {width:100%; margin:0 0 7px;}
footer .footer-left h2 img {display:block; margin:0 auto;}
footer .footer-left ul {width:100%; justify-content:center; padding-left:0;}
footer .footer-left ul li {justify-content:center; width:100%; text-align:center; margin:0 0 5px;}
footer .footer-left ul li:last-of-type {margin:0;}
footer .footer-left ul li a {font-size:12px;}
footer .footer-right {width:100%; margin:10px 0 0;}
footer .footer-right ul {justify-content:center;}
footer .footer-right select {width:80%; min-width:80%; margin:10px auto 0; color:#000;}
footer .footer-sitemap {padding:25px 15px; overflow-y:auto;}
footer .footer-sitemap .sitemap-head h2 {font-size:30px;}
footer .footer-sitemap .sitemap-head a {width:25px; height:25px;}
footer .footer-sitemap .sitemap-body {margin:30px 0 0;}
footer .footer-sitemap .sitemap-body ul li {margin:0 0 20px; border-bottom:1px solid #ddd; padding:0 0 20px;}
footer .footer-sitemap .sitemap-body ul li strong {width:100%; padding:0 0 10px;}
footer .footer-sitemap .sitemap-body ul li dl {flex:none; width:100%;}
footer .footer-sitemap .sitemap-body ul li dl dd {padding:5px 10px; width:33.33%;}
footer .footer-sitemap .sitemap-body ul li dl dd:after {display:none;}
footer .footer-sitemap .sitemap-body ul li dl dd a {font-size:16px;}
}
/* 팝업 */
.popup {transition:all ease 0.5s; opacity:0; pointer-events:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:999999; background:rgba(0,0,0,0.5);}
.popup > .box {width:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); opacity:1;}
.popup > .box a.popup-link {z-index:10; position:absolute; top:0; right:-68px; width:48px; height:48px; font-size:0; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.3); background:#fff url('../images/icon_swiper_more.png') no-repeat center / 36px;}
.popup > .box .swiper-container ul li {padding:30% 0; overflow:hidden; border-radius:24px; background-size:cover; background-position:center;}
.popup > .box .swiper-control {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:24px 0 0;}
.popup > .box .swiper-control > div {position:static; margin:0; width:48px; height:48px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.3);}
.popup > .box .swiper-control > div.swiper-button-prev {background:#fff url('../images/icon_swiper_prev.png') no-repeat center / 36px; margin-right:12px;}
.popup > .box .swiper-control > div.swiper-button-next {background:#fff url('../images/icon_swiper_next.png') no-repeat center / 36px;}
.popup.fixed {opacity:1; pointer-events:inherit;}
@media (max-width:991px){
.popup {background:rgba(0,0,0,0.9);}
.popup > .box {max-width:calc(100% - 30px) !important;}
.popup > .box a.popup-link {width:35px; height:35px; background-size:25px; right:0; top:-45px;}
.popup > .box .swiper-container ul li {border-radius:10px; padding:50% 0;}
.popup > .box .swiper-control > div {width:35px; height:35px; background-size:25px !important;}
}
/* 팝업내부 */
.popup .inner {display:flex; flex-wrap:wrap; padding:16px; background:#fff; border-radius:32px; height:100%; max-height:492px; overflow-y:auto; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.popup .inner .m-ratioBox-wrap {
width:300px; padding-top:458px;
border-radius:15px;
}
.popup .inner .m-ratioBox {
background-repeat: no-repeat;
background-size:cover;
background-position: cente center;
}
.popup .inner::-webkit-scrollbar {display:none;}
.popup .inner .popup-image {width:370px;}
.popup .inner .popup-image img {width:100%; height:100%; object-fit:cover; border-radius:24px;}
.popup .inner .popup-content {flex:1; min-width:0; padding-left:48px; padding-right:32px; padding-top:20px;}
.popup .inner .popup-content .content-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.popup .inner .popup-content .content-head span {border-radius:32px; color:#fff; font-weight:600; padding:8px 24px; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.popup .inner .popup-content .content-head span.예정 {background:#202020;}
.popup .inner .popup-content .content-head span.진행중 {background:#8FC320;}
.popup .inner .popup-content .content-head span.완료 {background:#7E7E7E;}
.popup .inner .popup-content .content-head a {width:32px; height:32px; font-size:0; background:url('../images/icon_close.png') no-repeat center / cover;}
.popup .inner .popup-content .content-body {margin:24px 0 0;}
.popup .inner .popup-content .content-body > h2 {font-size:26px; line-height:1.5; color:#202020; margin:0 0 15px;}
.popup .inner .popup-content .content-body > p {font-size:18px; line-height:1.5; color:rgba(32,32,32,0.8);}
.popup .inner .popup-content .content-body dl {border-top:1px solid #E4E4E4; margin:16px 0 0; padding:24px 0 0;}
.popup .inner .popup-content .content-body dl dd {display:flex; flex-wrap:wrap; margin:0 0 24px;}
.popup .inner .popup-content .content-body dl dd:last-of-type {margin:0;}
.popup .inner .popup-content .content-body dl dd em {font-size:16px; font-weight:600; line-height:1.5; color:#202020; padding-right:20px;}
.popup .inner .popup-content .content-body dl dd p {flex:1; min-width:0; font-size:16px; line-height:1.5; font-weight:300; color:rgba(32,32,32,0.8);}
.popup .inner .popup-content .content-body dl dd.full em {width:100%; padding-right:0;}
.popup .inner .popup-content .content-body dl dd.full p {flex:none; width:100%;}
@media (max-width:991px){
.popup .inner {max-height:80%;}
.popup .inner .m-ratioBox-wrap {width:100%; padding-top:54%;}
.popup .inner .popup-content {flex:none; width:100%; padding-left:0; padding-right:0;}
.popup .inner .popup-content .content-head a {width:20px; height:20px;}
.popup .inner .popup-content .content-body {margin:10px 0 0;}
.popup .inner .popup-content .content-body > h2 {font-size:20px; margin:0 0 5px;}
.popup .inner .popup-content .content-body > p {font-size:16px;}
.popup .inner .popup-content .content-body dl dd {margin:0 0 10px;}
.popup .inner .popup-content .content-body dl dd em {font-size:14px; padding-right:10px;}
.popup .inner .popup-content .content-body dl dd p {font-size:14px;}
}
/* 타이틀 */
.sub-title h2 {font-size:32px; font-weight:700; color:#8FC320;}
@media (max-width:991px){
.sub-title h2 {font-size:28px;}
}
/* 인사말 */
.sub-greeting h2 {font-size:48px; line-height:1.3; font-weight:bold; color:rgba(32,32,32,0.6); margin:0 0 40px;}
.sub-greeting h2 b {font-size:48px; line-height:1.3; font-weight:bold; color:#202020;}
.sub-greeting > img {display:block; max-width:100%; margin:0 0 50px;}
.sub-greeting p {font-size:18px; line-height:1.5; color:rgba(32,32,32,0.88); word-break:keep-all;}
.sub-greeting p strong {display:block; font-size:32px; font-weight:bold; color:#8FC320; margin:0 0 40px;}
.sub-greeting .bottom {margin:80px 0 0; display:flex; flex-wrap:wrap; justify-content: flex-end; align-items:flex-end;}
.sub-greeting .bottom b {font-size:20px; font-weight:600; color:#202020;}
.sub-greeting .bottom .sign {width:168px; margin:0 0 0 30px; margin-right:40px; position:relative; top:10px;}
.sub-greeting .bottom .img {
}
@media (max-width:991px){
.sub-greeting h2 {font-size:30px; margin:0 0 20px;}
.sub-greeting h2 b {font-size:30px;}
.sub-greeting > img {margin:0 0 25px;}
.sub-greeting p {font-size:15px;}
.sub-greeting p strong {font-size:25px; margin:0 0 15px;}
.sub-greeting .bottom {display:block; margin:40px 0 0; }
.sub-greeting .bottom b {display:block; width:100%; font-size:17px; text-align: center}
.sub-greeting .bottom .sign {display:block; width:120px; margin:0 auto;}
.sub-greeting .bottom .img {
display: block; margin:0 auto;
}
}
/* 미션 */
.sub-mission {display:flex; flex-wrap:wrap; background:#fff url('../images/img_mission.png') no-repeat right top / contain; padding:0 0 30px; margin:0 0 34px;}
.sub-mission .left-box {padding-right:50px;}
.sub-mission .left-box ul {margin:56px 0 0;}
.sub-mission .left-box ul li > * {display:inline-block; padding:25px 0; font-size:22px; font-weight:600; color:#202020; border-bottom:2px solid #202020;}
.sub-mission .left-box strong {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:40px; font-weight:bold; color:#fff; background:#202020; padding:15px 24px; margin:40px 0 0;}
.sub-mission .right-box {display:none;}
@media (max-width:1700px){
.sub-mission {background-position:right center; background-size:50%;}
}
@media (max-width:1350px){
.sub-mission {background:none; padding-right:50px;}
.sub-mission .left-box {width:100%; padding-right:0;}
.sub-mission .left-box ul {margin:35px 0 0;}
.sub-mission .left-box strong {width:100%; font-size:35px;}
.sub-mission .right-box {display:block; width:100%;}
.sub-mission .right-box img {width:100%;}
}
@media (max-width:1250px){
.sub-mission {padding:0 15px;}
}
@media (max-width:991px){
.sub-mission .left-box ul {margin:10px 0 0;}
.sub-mission .left-box ul li > * {display:block; padding:15px 0; font-size:16px; word-break:keep-all; line-height:1.3;}
.sub-mission .left-box strong {font-size:25px; text-align:center; line-height:1.3; margin:20px 0 0;}
}
/* 연혁 */
.sub-history {margin:60px 0 0 -50px; padding:80px 50px; background:#F5F5F5; display:flex; flex-wrap:wrap;}
.sub-history .left-box p {margin:40px 0 0; font-size:18px; line-height:1.3; color:#202020;}
.sub-history .right-box {flex:1; min-width:0; padding-left:13%;}
.sub-history .right-box ul li {display:flex; flex-wrap:wrap;}
.sub-history .right-box ul li strong {display:block; font-size:22px; font-weight:bold; color:#202020; width:100px; position:relative; top:10px;}
.sub-history .right-box ul li dl {flex:1; min-width:0; border-left:1px solid #404040;}
.sub-history .right-box ul li dl dd {display:flex; flex-wrap:wrap; align-items:flex-start; padding:0 0 24px 60px; position:relative;}
.sub-history .right-box ul li dl dd:before {position:absolute; left:-6px; top:17px; width:12px; height:12px; background:#404040; border-radius:50%; content:"";}
.sub-history .right-box ul li dl dd:first-of-type:before {width:16px; height:16px; background:#fff; border:4px solid #8FC320; left:-12px; top:8px;}
.sub-history .right-box ul li dl dd b {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#8FC320; border-radius:20px; color:#fff; font-size:20px; line-height:1.3; text-align:center; font-weight:bold; padding:8px 0; width:110px;}
.sub-history .right-box ul li dl dd p {flex:1; min-width:0; padding:8px 0 0 24px; font-size:18px; line-height:1.3; font-weight:500; color:#202020;}
.sub-history .right-box ul li dl dd p span {display:block; margin:12px 0 0; font-size:17px; line-height:1.5; color:#202020; font-weight:300;}
.sub-history .right-box ul li dl dd p span em {border:1px solid #202020; border-radius:50%; display:inline-block; font-size:13px; font-weight:300; width:14px; height:14px; line-height:14px; text-align:center; position:relative; top:5px}
@media (max-width:1700px){
.sub-history .right-box {padding-left:30px;}
}
@media (max-width:1500px){
.sub-history .left-box {width:100%;}
.sub-history .right-box {padding-left:0; width:100%; flex:none; margin:30px 0 0;}
}
@media (max-width:1250px){
.sub-history {margin:60px 0 0; padding:50px 15px;}
}
@media (max-width:991px){
.sub-history {padding:30px 15px; margin:30px 0 -40px;}
.sub-history .left-box p {margin:20px 0 0; font-size:16px;}
.sub-history .right-box ul li strong {width:100%; font-size:20px; top:0;}
.sub-history .right-box ul li dl {flex:none; width:100%; margin:15px 0 0 20px;}
.sub-history .right-box ul li dl dd {padding-left:30px;}
.sub-history .right-box ul li dl dd:before {top:9px;}
.sub-history .right-box ul li dl dd:first-of-type:before {top:5px;}
.sub-history .right-box ul li dl dd b {width:80px; font-size:16px; padding:5px 0;}
.sub-history .right-box ul li dl dd p {flex:none; width:100%; padding:0; margin:10px 0 0; word-break:keep-all; font-size:15px;}
.sub-history .right-box ul li dl dd p span {margin:8px 0 0; font-size:14px;}
.sub-history .right-box ul li dl dd p span em {font-size:12px; top:3px;}
}
/* 조직도 */
.sub-work {margin:-80px -50px 0; padding:80px 50px 120px; background:#f5f5f5;}
.sub-work.work2 {background:none;}
.sub-work .work-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.sub-work .work-head a {font-size:18px; font-weight:700; color:#fff; padding:12px 24px; background:#202020; border-radius:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-work .work-head a:after {display:inline-block; content:""; width:18px; height:18px; margin-left:4px; background:url('../images/icon_work_more.png') no-repeat center / cover;}
.sub-work .work-body {margin:55px auto 0; max-width:1040px; position:relative;}
.sub-work .work-body img {display:block; max-width:100%; margin:0 auto;}
.sub-work .work-body ul {position:absolute; left:0; top:0; width:100%; height:100%;}
.sub-work .work-body ul li {position:absolute; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-work .work-body ul li p {font-size:28px; font-weight:500;}
.sub-work .work-body ul li b {font-size:28px; font-weight:700;}
.sub-work .work-body ul li:nth-of-type(1) {color:#8FC320; left:37.6%; width:25%; height:19%;}
.sub-work .work-body ul li:nth-of-type(1) b {color:#8FC320; margin-left:10px;}
.sub-work .work-body ul li:nth-of-type(2) {color:#8FC320; left:72.5%; top:29%; width:25%; height:13%;}
.sub-work .work-body ul li:nth-of-type(3) {color:#fff; left:37.5%; top:53.5%; width:25%; height:13%;}
.sub-work .work-body ul li:nth-of-type(3) b {color:#fff; margin-left:10px;}
.sub-work .work-body ul li:nth-of-type(4) {color:#202020; width:25%; height:12.5%; bottom:0; left:3%;}
.sub-work .work-body ul li:nth-of-type(5) {color:#202020; width:25%; height:12.5%; bottom:0; left:37.4%;}
.sub-work .work-body ul li:nth-of-type(6) {color:#202020; width:25%; height:12.5%; bottom:0; left:72%;}
@media (max-width:1350px){
.sub-work .work-body ul li {font-size:28px;}
.sub-work .work-body ul li p {font-size:28px;}
.sub-work .work-body ul li b {font-size:28px;}
}
@media (max-width:1100px){
.sub-work .work-body ul li {font-size:23px;}
.sub-work .work-body ul li p {font-size:23px;}
.sub-work .work-body ul li b {font-size:23px;}
}
@media (max-width:991px){
.sub-work {padding:40px 0; margin:-40px 0 0;}
.sub-work .work-head a {font-size:15px;}
.sub-work .work-head a:after {width:13px; height:13px;}
.sub-work .work-body {margin:30px 0 0;}
.sub-work .work-body img {display:none;}
.sub-work .work-body ul {position:static; display:flex; flex-wrap:wrap;}
.sub-work .work-body ul li {position:static; text-align:center; width:100% !important; display:block;}
.sub-work .work-body ul li:nth-of-type(1) p {position:relative; overflow:hidden; width:200px; margin:0 auto; border-radius:50px; background:#fff url('../images/logo_o.png') no-repeat right bottom / cover; border:4px solid #8FC320; padding:15px 0;}
.sub-work .work-body ul li:nth-of-type(1):after {display:block; content:""; margin:0 auto; width:2px; height:35px; background:#202020;}
.sub-work .work-body ul li:nth-of-type(2) {margin:0 auto; border-radius:50px;}
.sub-work .work-body ul li:nth-of-type(2):after {display:block; content:""; margin:0 auto; width:2px; height:35px; background:#202020;}
.sub-work .work-body ul li:nth-of-type(2) p {width:200px; margin:0 auto; border-radius:50px; background:#fff; border:4px solid #8FC320; padding:15px 0;}
.sub-work .work-body ul li:nth-of-type(3) {margin:0 auto;}
.sub-work .work-body ul li:nth-of-type(3):after {display:block; content:""; margin:0 auto; width:2px; height:35px; background:#202020;}
.sub-work .work-body ul li:nth-of-type(3) p {width:200px; margin:0 auto; border-radius:50px; background:#8FC320; padding:15px 0;}
.sub-work .work-body ul li:nth-of-type(4) {width:calc(33.33% - 10px) !important; margin:0 5px;}
.sub-work .work-body ul li:nth-of-type(5) {width:calc(33.33% - 10px) !important; margin:0 5px;}
.sub-work .work-body ul li:nth-of-type(6) {width:calc(33.33% - 10px) !important; margin:0 5px;}
.sub-work .work-body ul li:nth-of-type(4) p,
.sub-work .work-body ul li:nth-of-type(5) p,
.sub-work .work-body ul li:nth-of-type(6) p {font-size:20px; width:100%; margin:0 auto; border-radius:50px; background:#E4E4E4; padding:15px 0;}
}
/* 연락처 */
.sub-contact {padding:80px 0;}
.sub-contact ul {border-top:2px solid #202020; margin:40px 0 0; padding:20px 0 0;}
.sub-contact ul li {border-bottom:1px solid #E4E4E4; padding:20px 0; display:flex; flex-wrap:wrap;}
.sub-contact ul li .list-head {background:#8FC320; border-radius:24px; width:240px; padding:24px 32px;}
.sub-contact ul li .list-head strong {display:block; font-size:32px; font-weight:600; color:#202020;}
.sub-contact ul li .list-head strong:after {display:block; width:37px; height:3px; content:""; background:#202020; margin:20px 0 25px;}
.sub-contact ul li .list-head a {
display:block;
margin-top:8px;
font-size:16px; color:#202020; font-weight:300;
}
.sub-contact ul li .list-head a:first-of-type {
margin-top:0;
}
.sub-contact ul li .list-head a .title {
display: inline-block;
width:24px; margin-right:8px;
font-weight:bold;
}
.sub-contact ul li .list-body {flex:1; min-width:0; padding-left:32px;}
.sub-contact ul li .list-body dl {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.sub-contact ul li .list-body dl dd {width:calc(33.33% - 24px); margin:0 12px 24px; background:#F5F5F5; border-radius:24px; padding:24px;}
.sub-contact ul li .list-body dl dd strong {display:flex; flex-wrap:wrap; align-items:center; font-size:24px; font-weight:300; color:#202020; letter-spacing:5px; margin:0 0 30px;}
.sub-contact ul li .list-body dl dd strong b {font-size:24px; font-weight:700; color:#202020; letter-spacing:7px; margin-right:24px;}
.sub-contact ul li .list-body dl dd p {margin:0 0 10px; position:relative; font-size:16px; font-weight:500; line-height:1.3; color:#202020; padding-left:10px; word-break:keep-all;}
.sub-contact ul li .list-body dl dd p:last-of-type {margin:0;}
.sub-contact ul li .list-body dl dd p:before {position:absolute; left:0; top:7px; width:3px; height:3px; background:#202020; content:""; border-radius:50%;}
.sub-contact ul li:last-of-type .list-head strong:after {display:none;}
.sub-contact ul li:last-of-type .list-body dl {margin:0; background:#f5f5f5; padding:20px 30px; border-radius:24px;}
.sub-contact ul li:last-of-type .list-body dl dd {width:10%; margin:0; padding:0; background:none;}
.sub-contact ul li:last-of-type .list-body dl dd strong {font-size:14px; letter-spacing:0; text-align:center; justify-content:center; margin:0 0 10px;}
.sub-contact ul li:last-of-type .list-body dl dd strong b {font-size:14px; letter-spacing:0; margin-right:5px;}
.sub-contact ul li:last-of-type .list-body dl dd em {display:block; text-align:center; font-size:18px; font-weight:700; color:#202020;}
@media (max-width:1500px){
.sub-contact ul li .list-head {width:180px;}
.sub-contact ul li .list-body {padding-left:20px;}
.sub-contact ul li .list-body dl dd {width:calc(50% - 24px);}
.sub-contact ul li:last-of-type .list-body dl {padding:20px 30px 5px;}
.sub-contact ul li:last-of-type .list-body dl dd {width:20%; margin:0 0 15px;}
}
@media (max-width:1250px){
.sub-contact ul li .list-head {width:100%;}
.sub-contact ul li .list-body {padding-left:0; flex:none; width:100%; margin:20px 0 0;}
}
@media (max-width:991px){
.sub-contact {padding:40px 0;}
.sub-contact ul {margin:20px 0 0; padding:0;}
.sub-contact ul li .list-head {padding:15px; border-radius:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.sub-contact ul li .list-head strong {font-size:25px;}
.sub-contact ul li .list-head strong:after {display:none;}
.sub-contact ul li .list-head a {font-size:16px;}
.sub-contact ul li .list-head a:first-of-type {
margin-top:8px;
}
.sub-contact ul li .list-head .contacts {
display: block; width:100%;
}
.sub-contact ul li .list-body dl {margin:0 0 -10px;}
.sub-contact ul li .list-body dl dd {width:100%; margin:0 0 10px; padding:15px; border-radius:10px;}
.sub-contact ul li .list-body dl dd.pb48 {padding-bottom:15px !important; width:100% !important;}
.sub-contact ul li .list-body dl dd strong {font-size:18px; letter-spacing:0; margin:0 0 10px;}
.sub-contact ul li .list-body dl dd strong b {font-size:18px; letter-spacing:0; margin-right:5px;}
.sub-contact ul li .list-body dl dd p {margin:0 0 5px; font-size:14px;}
.sub-contact ul li:last-of-type .list-body dl {padding:15px 15px 0; border-radius:10px;}
.sub-contact ul li:last-of-type .list-body dl dd {width:25%;}
}
/* 관리시설 연락처 */
.sub-work2 {border-top:1px solid #E4E4E4; margin:28px 0 0; padding:40px 0 0;}
.sub-work2 ul {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.sub-work2 ul li {width:calc(25% - 24px); margin:0 12px 24px; padding:24px 32px; border-radius:24px;}
.sub-work2 ul li:nth-of-type(odd) {background:#F5F5F5;}
.sub-work2 ul li:nth-of-type(even) {background:rgba(143,195,32,0.4);}
.sub-work2 ul li strong {display:block; font-size:32px; font-weight:600; color:#202020;}
.sub-work2 ul li strong:after {display:block; width:37px; height:3px; content:""; background:#202020; margin:20px 0 25px;}
.sub-work2 ul li a {display:block; font-size:20px; color:#202020; font-weight:300;}
@media (max-width:1700px){
.sub-work2 ul li {width:calc(33.33% - 24px);}
}
@media (max-width:1300px){
.sub-work2 ul li {width:calc(50% - 24px);}
}
@media (max-width:991px){
.sub-work2 {margin:20px 0 0; padding:20px 0 0;}
.sub-work2 ul {margin:0 -5px -10px;}
.sub-work2 ul li {padding:15px; border-radius:10px; width:calc(50% - 10px); margin:0 5px 10px;}
.sub-work2 ul li strong {font-size:22px;}
.sub-work2 ul li strong:after {width:22px; height:2px; margin:15px 0;}
.sub-work2 ul li a {font-size:14px;}
}
/* 찾아오시는길 */
.sub-directions {}
.sub-directions iframe {width:100%; height:480px; border-radius:32px;}
.sub-directions ul {margin:60px 0 0;}
.sub-directions ul li {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 30px;}
.sub-directions ul li:last-of-type {margin:0;}
.sub-directions ul li strong {display:flex; flex-wrap:wrap; align-items:center; font-size:26px; font-weight:bold; color:#202020; width:250px;}
.sub-directions ul li strong:before {display:inline-block; content:""; width:50px; height:50px; margin-right:14px; background-image:url('../images/icon_directions_03.png'); background-size:cover; background-position:center;}
.sub-directions ul li:nth-of-type(1) strong:before {background-image:url('../images/icon_directions_01.png');}
.sub-directions ul li:nth-of-type(2) strong:before {background-image:url('../images/icon_directions_02.png');}
.sub-directions ul li:nth-of-type(4) strong:before {background-image:url('../images/icon_directions_04.png');}
.sub-directions ul li:nth-of-type(5) strong:before {background-image:url('../images/icon_directions_05.png');}
.sub-directions ul li p {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; font-size:20px; font-weight:600; color:rgba(32,32,32,0.88);}
.sub-directions ul li p a {font-size:20px; font-weight:600; color:rgba(32,32,32,0.88);}
.sub-directions ul li p small {font-size:16px; font-weight:500; color:rgba(32,32,32,0.88); margin-left:40px; word-break:keep-all;}
.sub-directions ul li p span {word-break:keep-all; margin-left:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:10px 15px; font-size:14px; font-weight:bold; color:#fff; background:#202020; border-radius:20px;}
.sub-directions ul li:nth-of-type(4) {border-top:1px solid #E4E4E4; padding:30px 0 0;}
@media (max-width:1750px){
.sub-directions ul li p small {width:100%; margin-left:0; margin-top:10px;}
.sub-directions ul li p span {margin-left:0; margin-top:10px;}
}
@media (max-width:991px){
.sub-directions {margin:30px 0 0;}
.sub-directions iframe {border-radiuS:0; height:250px;}
.sub-directions ul {margin:20px 0 0;}
.sub-directions ul li {border-bottom:1px solid #e4e4e4; padding:0 0 15px; margin:0 0 15px;}
.sub-directions ul li strong {width:100%; font-size:20px;}
.sub-directions ul li strong:before {width:30px; height:30px; margin-right:5px;}
.sub-directions ul li p {width:100%; flex:none; margin:5px 0 0; padding-left:35px; font-size:15px;}
.sub-directions ul li p a {font-size:15px;}
.sub-directions ul li p small {font-size:14px; line-height:1.3;}
.sub-directions ul li:nth-of-type(4) {border-top:0; padding:0 0 15px;}
}
/* 대회일정 */
.sub-schedule {margin:56px 0 0;}
.sub-schedule ul {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.sub-schedule ul li {width:calc(25% - 24px); margin:0 12px 24px; background-size:cover; background-position:center; border-radius:24px; overflow:hidden; position:relative;}
.sub-schedule ul li a {display:block;}
.sub-schedule ul li:after {display:block; content:""; padding-bottom:148%;}
.sub-schedule ul li .list-type {position:absolute; z-index:2; left:0; top:15px; padding:0 15px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.sub-schedule ul li .list-type b {padding:8px 15px; font-size:14px; font-weight:bold; color:#fff; border-radius:32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-schedule ul li .list-type b.예정 {background:#202020;}
.sub-schedule ul li .list-type b.진행중 {background:#8FC320;}
.sub-schedule ul li .list-type b.완료 {background:#7E7E7E;}
.sub-schedule ul li .list-content {transition:all ease 0.5s; position:absolute; left:0; bottom:0px; height:138px; padding:12px 24px; width:100%; background:rgba(0,0,0,0.65); backdrop-filter:blur(8px); display:flex; flex-wrap:wrap; align-items:center; align-content:center;}
.sub-schedule ul li .list-content strong {
display:block;
width:100%; padding-right:40px;
position: relative;
font-size:20px; font-weight:600; white-space: nowrap; overflow:hidden; text-overflow:ellipsis;
color:#fff;
}
.sub-schedule ul li .list-content strong:after {
display:inline-block; content:""; transition:all ease 0.5s;
width:20px; height:20px;
position: absolute; top:50%; right:0px; transform:translateY(-50%);
background:url('../images/icon_more.png') no-repeat center / cover;
}
.sub-schedule ul li .list-content p {line-height:1.3; font-size:16px; color:rgba(255,255,255,0.8); width:100%; margin:24px 0 0;}
@media (max-width:1700px){
.sub-schedule ul li {width:calc(33.33% - 24px);}
.sub-schedule ul li .list-content strong {font-size:17px;}
}
@media (max-width:1350px){
.sub-schedule ul li {width:calc(50% - 24px);}
}
@media (max-width:991px){
.sub-schedule {margin:30px 0 0;}
.sub-schedule ul {margin:0 0 -10px;}
.sub-schedule ul li {width:100%; margin:0 0 10px; border-radius:10px;}
.sub-schedule ul li:after {padding-bottom:100%;}
.sub-schedule ul li .list-type {left:0px; top:10px; padding:0 10px;}
.sub-schedule ul li .list-type b {padding:5px 10px; font-size:13px;}
.sub-schedule ul li .list-content {padding:10px; height:100px;}
.sub-schedule ul li .list-content strong {font-size:16px;}
.sub-schedule ul li .list-content strong:after {width:16px; height:16px;}
.sub-schedule ul li .list-content p {font-size:14px; margin:10px 0 0;}
}
/* 체육시설 */
.sub-athletic {}
.sub-athletic ul {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.sub-athletic ul li {
width:calc(25% - 24px); margin:0 12px 24px; background-size:cover; background-position:center; border-radius:24px; overflow:hidden; position:relative;
border:1px solid #e1e1e1;
}
.sub-athletic ul li a {
display: block; width:100%; height:100%;
}
.sub-athletic ul li:before {
content:""; width:200px; height:47px;
position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
background:url("../images/logo-replace.png") no-repeat;
background-position:center center;
background-size:100% 100%;
z-index:-1;
}
.sub-athletic ul li:after {display:block; content:""; padding-bottom:65%;}
.sub-athletic ul li .list-type {position:absolute; z-index:2; left:0; top:15px; padding:0 15px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.sub-athletic ul li .list-type b {padding:8px 15px; font-size:14px; font-weight:bold; color:#fff; background:#202020; border-radius:32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-athletic ul li .list-content {transition:all ease 0.5s; position:absolute; left:0; bottom:0px; height:48px; padding:12px 24px; width:100%; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); display:flex; flex-wrap:wrap; align-items:center; align-content:center;}
.sub-athletic ul li .list-content strong {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:20px; font-weight:600; color:#fff;}
.sub-athletic ul li .list-content strong:after {
display:inline-block; content:""; transition:all ease 0.5s; width:20px; height:20px; background:url('../images/icon_up.png') no-repeat center / cover;
}
.sub-athletic ul li .list-content p {display:none; opacity:0; transition:all ease 0.5s; font-size:16px; color:rgba(255,255,255,0.8); width:100%; margin:24px 0 0;}
.sub-athletic ul li .list-content a.tel {display:none; opacity:0; transition:all ease 0.5s; margin:4px 0 0; width:100%; font-size:16px; color:rgba(255,255,255,0.8);}
.sub-athletic ul li .list-content a.more {
position:absolute; right:15px; top:15px; opacity:0; transition:all ease 0.5s; width:25px; height:25px; font-size:0; background:url('../images/icon_more.png') no-repeat center / cover;
}
.sub-athletic ul li .list-content:hover {background:rgba(0,0,0,0.4); height:100%; padding-top:105px;}
.sub-athletic ul li .list-content:hover strong:after {opacity:0;}
.sub-athletic ul li .list-content:hover p {display:block; opacity:1;}
.sub-athletic ul li .list-content:hover a.tel {display:block; opacity:1;}
.sub-athletic ul li .list-content:hover a.more {opacity:1;}
@media (max-width:1700px){
.sub-athletic ul li {width:calc(33.33% - 24px);}
.sub-athletic ul li .list-content strong {font-size:17px;}
}
@media (max-width:1350px){
.sub-athletic ul li {width:calc(50% - 24px);}
}
@media (max-width:991px){
.sub-athletic ul {margin:0 0 -10px;}
.sub-athletic ul li {width:100%; margin:0 0 10px; border-radius:10px;}
.sub-athletic ul li .list-type {left:0px; top:10px; padding:0 10px;}
.sub-athletic ul li .list-type b {padding:5px 10px; font-size:13px;}
.sub-athletic ul li .list-content {padding:10px;}
.sub-athletic ul li .list-content strong {font-size:16px;}
.sub-athletic ul li .list-content strong:after {width:16px; height:16px;}
.sub-athletic ul li .list-content p {font-size:14px; margin:10px 0 0;}
.sub-athletic ul li .list-content a.tel {font-size:14px;}
.sub-athletic ul li .list-content a.more {width:22px; height:22px; top:10px; right:10px;}
}
/* 상세 */
.sub-detail .detail-head {display:flex; flex-wrap:wrap; align-items:center;}
.sub-detail .detail-head span {background:#8FC320; border-radius:32px; padding:8px 16px; font-size:14px; font-weight:bold; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-detail .detail-head h2 {margin-left:15px; font-size:32px; font-weight:700; color:#202020;}
.sub-detail .detail-body {margin:56px 0 0; flex-wrap:wrap; justify-content:space-between;}
.sub-detail .detail-body > div {}
.sub-detail .detail-body .list-image {position:relative;}
.sub-detail .detail-body .list-image a.popup-link {z-index:10; position:absolute; top:24px; right:24px; width:48px; height:48px; font-size:0; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.3); background:#fff url('../images/icon_swiper_more.png') no-repeat center / 36px;}
.sub-detail .detail-body .list-image ul li {
height:506px; background-size:cover; background-position:center; border-radius:24px; overflow:hidden;
position:relative; border:1px solid #e1e1e1;
}
.sub-detail .detail-body .list-image ul li:before {
content:""; width:200px; height:47px;
position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
background:url("../images/logo-replace.png") no-repeat;
background-position:center center;
background-size:100% 100%;
z-index:-1;
}
.sub-detail .detail-body .list-image .swiper-control {z-index:10; position:absolute; bottom:24px; right:24px; display:flex; flex-wrap:wrap; align-items:center;}
.sub-detail .detail-body .list-image .swiper-control > div {position:static; margin:0; width:48px; height:48px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.3);}
.sub-detail .detail-body .list-image .swiper-control > div.swiper-button-prev {background:#fff url('../images/icon_swiper_prev.png') no-repeat center / 36px; margin-right:12px;}
.sub-detail .detail-body .list-image .swiper-control > div.swiper-button-next {background:#fff url('../images/icon_swiper_next.png') no-repeat center / 36px;}
.sub-detail .detail-body .list-content {background:#F5F5F5; border-radius:24px; padding:48px 40px;}
@media (max-width:1700px){
.sub-detail .detail-body > div {width:100%;}
.sub-detail .detail-body .list-content {margin:20px 0 0;}
}
@media (max-width:991px){
.sub-detail .detail-head span {padding:5px 15px;}
.sub-detail .detail-head h2 {margin-left:0; width:100%; margin:5px 0 0; line-height:1.5; font-size:28px;}
.sub-detail .detail-body {margin:20px 0 0;}
.sub-detail .detail-body .list-image ul li {height:auto; padding:30% 0; border-radius:15px;}
.sub-detail .detail-body .list-image a.popup-link {width:35px; height:35px; background-size:25px;}
.sub-detail .detail-body .list-image .swiper-control > div {width:35px; height:35px; background-size:25px !important;}
.sub-detail .detail-body .list-content {border-radius:15px; padding:20px;}
}
/* 탭 */
.sub-tab .tab-head ul {display:table; table-layout:fixed; width:100%;}
.sub-tab .tab-head ul li {display:table-cell;}
.sub-tab .tab-head ul li a {display:block; padding:0 0 15px; text-align:center; font-size:24px; color:#202020; border-bottom:2px solid #E4E4E4;}
.sub-tab .tab-head ul li.active a {color:#8FC320; font-weight:600; border-color:#8FC320;}
.sub-tab .tab-body {margin:30px 0 0;}
.sub-tab .tab-body ul li {margin:0 0 24px; display:flex; flex-wrap:wrap;}
.sub-tab .tab-body ul li strong {width:80px; display:flex; flex-wrap:wrap; font-size:16px; line-height:1.5; font-weight:bold; color:#333;}
.sub-tab .tab-body ul li strong:before {display:inline-block; content:""; width:4px; height:4px; background:#333; border-radius:50%; margin-right:10px; position:relative; top:9px;}
.sub-tab .tab-body ul li p {flex:1; min-width:0; word-break:keep-all; font-size:16px; line-height:1.5; color:#202020;}
.sub-tab .tab-body ul li p a {font-size:16px; line-height:1.5; color:#202020;}
@media (max-width:991px){
.sub-tab .tab-head ul li a {padding:0 0 10px; font-size:16px;}
.sub-tab .tab-body {margin:15px 0 0;}
.sub-tab .tab-body ul li {margin:0 0 15px;}
.sub-tab .tab-body ul li p {font-size:14px; word-break:keep-all;}
.sub-tab .tab-body ul li p a {font-size:14px;}
}
/* 검색 */
.sub-search form {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; padding:8px; width:100%; max-width:780px; margin:0 auto; border:1px solid #E4E4E4; border-radius:32px;}
.sub-search form input {flex:1; min-width:0; padding:0 24px; font-size:24px; font-weight:500;}
.sub-search form input::placeholder {color:rgba(0,0,0,0.4);}
.sub-search form .submit {width:48px; height:48px; font-size:0; background:url('../images/icon_search.png') no-repeat center / cover;}
@media (max-width:991px){
.sub-search form {padding:5px;}
.sub-search form input {padding:0 15px; font-size:16px;}
.sub-search form .submit {width:35px; height:35px;}
}
/* 페이징 */
.sub-paging {border-top:4px solid #202020; padding:50px 0 0; margin:60px 0 0;}
.sub-paging ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-paging ul li {margin:0 4px;}
.sub-paging ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; font-size:16px; font-weight:700; color:rgba(0,0,0,0.4);}
.sub-paging ul li.active a {color:#000;}
.sub-paging ul li.prev a {font-size:0; background:url('../images/icon_paging_prev.png') no-repeat center / cover;}
.sub-paging ul li.next a {font-size:0; background:url('../images/icon_paging_next.png') no-repeat center / cover;}
@media (max-width:991px){
.sub-paging {border-top:2px solid #202020; padding:20px 0 0; margin:20px 0 0;}
.sub-paging ul li {margin:0 2px;}
.sub-paging ul li a {width:30px; height:30px; font-size:14px;}
}
/* 보도자료 */
.sub-press {margin:56px 0 0;}
.sub-press ul {display:flex; flex-wrap:wrap; margin:0 -12px -24px;}
.sub-press ul li {width:calc(25% - 24px); margin:0 12px 24px;}
.sub-press ul li a {position:relative; overflow:hidden; display:block; border:1px solid #E4E4E4; border-radius:24px; padding:24px;}
.sub-press ul li a:after {width:40px; height:40px; position:absolute; right:0; top:0; border-radius:0 24px 0 24px; background:#8FC320 url('../images/icon_press.png') no-repeat center / cover; content:"";}
.sub-press ul li a time.month {font-size:20px; font-weight:500; color:#202020;}
.sub-press ul li a time.year {display:block; margin:15px 0 0; position:relative;}
.sub-press ul li a time.year:after {position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; height:1px; background:#707070; content:"";}
.sub-press ul li a time.year b {display:inline-block; background:#fff; font-size:16px; color:rgba(32,32,32,0.6); padding-right:10px; position:relative; z-index:2;}
.sub-press ul li a p {font-size:24px; font-weight:bold; color:#202020; line-height:1.3; margin:15px 0 0; overflow:hidden; display:-webkit-box; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.sub-press ul li a p span {font-size:18px; color:#8FC320; line-height:1.3; margin-right:10px;}
.sub-press ul li a small {display:block; margin:10px 0 0; font-size:16px; color:rgba(32,32,32,0.6);}
@media (max-width:1550px){
.sub-press ul li {width:calc(33.33% - 24px);}
}
@media (max-width:1200px){
.sub-press ul li {width:calc(50% - 24px);}
}
@media (max-width:991px){
.sub-press {margin:30px 0 0;}
.sub-press ul {margin:0 -10px -10px);}
.sub-press ul li {width:100%;}
.sub-press ul li a {border-radius:15px; padding:15px;}
.sub-press ul li a:after {border-radius:0 15px 0 15px; width:46px; height:46px;}
.sub-press ul li a time.month {font-size:20px;}
.sub-press ul li a time.year {margin:10px 0 0;}
.sub-press ul li a p {font-size:16px; margin:10px 0 0;}
.sub-press ul li a p span {font-size:16px; margin-left:5px;}
.sub-press ul li a small {margin:7px 0 0; font-size:14px;}
}
/* 게시판상세 */
.sub-view .view-head {border-bottom:1px solid #E4E4E4; padding:0 0 40px; margin:0 0 40px;}
.sub-view .view-head h2 {text-align:center; font-size:26px; line-height:1.5; text-align:center; font-weight:600; color:#202020; margin:0 0 10px;}
.sub-view .view-head time {display:block; text-align:center; font-size:16px; color:rgba(32,32,32,0.6);}
.sub-view .view-body .view-body-detail img {display:block; margin:0 auto; max-width:100%;}
.sub-view .view-body .view-body-detail p {font-size:16px; line-height:1.5; color:#202020;}
.sub-view .view-body .view-body-file {margin:100px 0 0;}
.sub-view .view-body .view-body-file ul li {margin:0 0 12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-view .view-body .view-body-file ul li:last-of-type {margin:0;}
.sub-view .view-body .view-body-file ul li a {padding:8px 24px; border-radius:30px; border:2px solid #202020; font-size:20px; font-weight:600; color:#202020; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-view .view-body .view-body-file ul li a:after {display:inline-block; content:""; width:24px; height:24px; margin-left:10px; background:url('../images/icon_file.png') no-repeat center / cover;}
.sub-view .view-body .view-body-related {border-top:1px solid #E4E4E4; margin:50px 0 0; padding:32px 0 0; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;}
.sub-view .view-body .view-body-related a.list {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:30px; border:2px solid #202020; padding:8px 24px; font-size:20px; font-weight:600; color:#202020;}
.sub-view .view-body .view-body-related a.list:before {display:inline-block; content:""; width:24px; height:24px; margin-right:10px; background:url('../images/icon_back.png') no-repeat center / cover;}
.sub-view .view-body .view-body-related ul {flex:1; min-width:0; padding-left:50px;}
.sub-view .view-body .view-body-related ul li {margin:0 0 15px;}
.sub-view .view-body .view-body-related ul li:last-of-type {margin:0;}
.sub-view .view-body .view-body-related ul li a {padding:13px 55px 13px 0; font-size:16px; color:#202020; display:block; text-align:right; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:url('../images/icon_paging_up.png') no-repeat right center / 40px;}
.sub-view .view-body .view-body-related ul li:last-of-type a {background:url('../images/icon_paging_down.png') no-repeat right center / 40px;}
.sub-view .view-body .view-body-related ul li:first-of-type a:after {transform:rotate(90deg);}
.sub-view .view-body .view-body-related ul li:last-of-type a:after {transform:rotate(-90deg);}
@media (max-width:991px){
.sub-view .view-body .view-body-related ul li:last-of-type a {
background-size:30px 30px;
}
.sub-view .view-head {padding:0 0 20px; margin:0 0 20px;}
.sub-view .view-head h2 {font-size:22px;}
.sub-view .view-body .view-body-file {margin:30px 0 0;}
.sub-view .view-body .view-body-file ul li {margin:0 0 8px;}
.sub-view .view-body .view-body-file ul li a {padding:5px 15px; font-size:14px;}
.sub-view .view-body .view-body-file ul li a:after {width:15px; height:15px;}
.sub-view .view-body .view-body-related {margin:20px 0 0; padding:20px 0 0;}
.sub-view .view-body .view-body-related a.list {width:100%; border-radius:0; font-size:15px;}
.sub-view .view-body .view-body-related ul {width:100%; margin:15px 0 0; flex:none; padding:0;}
.sub-view .view-body .view-body-related ul li {margin:0;}
.sub-view .view-body .view-body-related ul li a {font-size:15px; padding:10px 35px 10px 0; display:block; text-align:left; background-size:30px;}
.sub-view .view-body .view-body-related ul li a:after {display:none;}
}
/* 달력 */
.sub-datetime {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.sub-datetime a {width:40px; height:40px; font-size:0; background-position:center; background-size:cover;}
.sub-datetime a.prev {background-image:url('../images/icon_paging_prev.png');}
.sub-datetime a.next {background-image:url('../images/icon_paging_next.png');}
.sub-datetime time {font-size:39px; font-weight:700; color:#202020; margin:0 25px; letter-spacing:-1px;}
@media (max-width:991px){
.sub-datetime a {width:30px; height:30px;}
.sub-datetime time {font-size:30px; margin:0 15px;}
}
.m-ratioBox-wrap {width:100%; padding-top:100%; position:relative; overflow:hidden;}
.m-ratioBox-wrap .m-ratioBox {
position:absolute; top:0; left:0; right:0; bottom:0;
background-size:cover; background-position:center center; background-repeat: no-repeat;
}
.m-ratioBox-wrap .m-ratioBox:after {content:""; width:179px; height:63px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background-size:100%;}
.m-ratioBox-wrap img {width:105%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}
.m-ratioBox-wrap iframe {width:105%; position:absolute; left:50%; top:50%; transform:translateY(-50%) translateX(-50%); z-index:1;}
/* 메인 */
#scrollbar {height:100vh;}
#scrollbar .wrapper {display:flex; height:100%; position:relative;}
#scrollbar .scroll-content {height:100%;}
#scrollbar .scrollbar-track-y {display:none !important;}
@media (max-width:991px){
#scrollbar {height:auto; padding-bottom:60px;}
#scrollbar .wrapper {height:auto; display:block;}
#scrollbar .scroll-content {height:auto; transform:none !important;}
#scrollbar .scrollbar-track-x {display:none !important;}
#scrollbar .scrollbar-track-y {display:none !important;}
}
/* 메인 첫번째영역 */
.main-01 {
position:relative; width:100%; flex:0 0 100%; overflow:hidden; height:100%;
background:url('../images/mainBanner1.jpg') no-repeat center / cover;
transition: all .3s;
}
.main-01 video {
width:100%; height:100%;
position: absolute; top:0; left:0;
object-fit: cover;
opacity:0;
transition:all .3s;
}
.main-01 .circle {
display: none;
}
.main-01 .swiper-container {width:100%;}
.main-01 .box {
height:100%; width:100%; max-width:1030px; padding:0 15px; margin:0 auto; display:flex; flex-wrap:wrap; align-content:center;
opacity:1;
transition: all .3s;
}
.main-01.videoMode .box {
opacity: 0;
}
.main-01.videoMode video {
opacity:1;
}
.main-01 .box .title {
display: block; margin:0 auto; margin-bottom:20px;
position: relative; z-index:1;
max-width:100%;
}
.main-01 .box .swiper-slide img {
display: none;
}
.main-01 .box p {width:100%; text-align:center; font-size:32px; font-weight:500; color:#fff;}
.main-01 .box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid #fff; border-radius:76px; width:100%; max-width:870px; margin:70px auto 0;}
.main-01 .box ul li {width:20%; position:relative;}
.main-01 .box ul li:after {position:absolute; right:0; top:50%; transform:translateY(-50%); width:2px; height:24px; background:#fff; content:"";}
.main-01 .box ul li:last-of-type:after {display:none;}
.main-01 .box ul li a {display:block; text-align:center; padding:30px 0; font-size:20px; font-weight:600; color:#fff;}
.m-quick.type01 .circle {
border-radius:50%; position:absolute; left:-210px; top:50%; z-index:2; transform:translateY(-50%);
width:420px; height:420px;
}
.m-quick.type01 .circle:after {
content:"";
width:300px; height:300px;
border-radius:50%; position:absolute; left:63px; top:50%; z-index:-1; transform:translateY(-50%);
background:url('../images/circle-center.png') no-repeat center / cover;
}
.m-quick.type01 .circle.active:before {
content:"";
width:420px; height:420px;
max-width:420px; max-height:420px;
position:absolute; left:50%; top:50%; z-index:-1; transform:translate(-50%, -50%);
border-radius:50%; background-color:rgba(254,147,130,0.9); opacity:1;
}
.m-quick.type01 .circle:before {
content:"";
opacity:0;
transition:opacity .6s;
}
.m-quick.type01 .circle h2 {cursor:pointer; font-size:20px; font-weight:500; line-height:1.3; position:absolute; left:225px; top:50%; transform:translateY(-50%);}
.m-quick.type01 .circle h2 .plus,
.m-quick.type01 .circle h2 .minus {
cursor:pointer; font-size:20px; font-weight:500; line-height:1.3;
}
.m-quick.type01 .circle ul li {opacity:0; transition:all ease 0.5s; position:absolute;}
.m-quick.type01 .circle ul li:nth-of-type(1) {left:239px; top:39px;}
.m-quick.type01 .circle ul li:nth-of-type(2) {left:309px; top:99px;}
.m-quick.type01 .circle ul li:nth-of-type(3) {left:341px; top:189px;}
.m-quick.type01 .circle ul li:nth-of-type(4) {left:309px; top:277px;}
.m-quick.type01 .circle ul li:nth-of-type(5) {left:239px; top:328px;}
.m-quick.type01 .circle ul li a {display:block;}
.m-quick.type01 .circle ul li a:before {display:block; margin:0 auto 8px; background-size:cover; background-position:center; content:"";}
.m-quick.type01 .circle ul li a b {display:block;font-size:14px; font-weight:500; color:#202020;}
.m-quick.type01 .circle ul li:nth-of-type(1) a:before {width:30px; height:34px; background-image:url('../images/icon_main_01.png');}
.m-quick.type01 .circle ul li:nth-of-type(2) a:before {width:32px; height:32px; background-image:url('../images/icon_main_02.png');}
.m-quick.type01 .circle ul li:nth-of-type(3) a:before {width:28px; height:31px; background-image:url('../images/icon_main_03.png');}
.m-quick.type01 .circle ul li:nth-of-type(4) a:before {width:27px; height:31px; background-image:url('../images/icon_main_04.png');}
.m-quick.type01 .circle ul li:nth-of-type(5) a:before {width:29px; height:29px; background-image:url('../images/icon_main_05.png');}
.m-quick.type01 .circle .plus {
display: block;
}
.m-quick.type01 .circle .minus {
display: none;
}
.m-quick.type01 .circle.active .plus {
display: none;
}
.m-quick.type01 .circle.active .minus {
display: block;
}
.m-quick.type01 .circle.active ul li {opacity:1;}
.main-01 .main-01-head img {
width:240px;
}
.main-01 .main-01-head {position:absolute; left:50%; transform:translateX(-50%); top:40px; max-width:1710px; padding:0 15px; width:100%; z-index:100; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.main-01 .main-01-head .btn-sitemap {font-size:0; width:32px; height:24px; background:url('../images/icon_menu.png') no-repeat center / cover;}
.main-01 .main-01-scroll {position:absolute; right:0; top:50%; transform:translateY(-50%);}
.main-01 .main-01-scroll strong {text-align:right; font-size:20px; font-weight:bold; color:#fff; display:block; padding-right:15px; margin:0 0 12px;}
.main-01 .main-01-scroll > div {position:relative; width:120px; height:4px; background:#fff; border-radius:2px 0 0 2px; overflow:hidden;}
.main-01 .main-01-scroll > div span {position:absolute; left:0; top:0; height:100%; width:25%; background:#8FC320;}
.main-01 .swiper-btns {
display: flex; align-items: center; justify-content: center;
width:100%; margin-top:40px;
}
.main-01 .swiper-btn {
display: flex; justify-content: center; align-items: center;
width:50px; height:50px;
margin:0 10px;
z-index:1;
background-color:rgba(255,255,255,0.2);
border-radius:100%;
cursor:pointer;
}
.main-01 .swiper-btn i {
font-size:24px;
color:#fff;
}
.main-01 .swiper-btn-prev {
left:20px;
}
.main-01 .swiper-btn-next {
right:20px;
}
@media (max-width:991px){
.main-01.videoMode video {
opacity: 0;
}
.main-01.videoMode .box {
opacity: 1;
}
.main-01 .box {
margin-top:65px;
}
.m-quick.type01 .circle:before {
display: none;
}
.m-quick.type01 .circle:after {
display: none;
}
.main-01 {
flex:none; height:auto; padding:100px 0;
transition: all .3s;
}
.main-01 .box {height:auto;}
.main-01 .box p {
position: relative; z-index:1;
font-size:18px; line-height:1.3; word-break:keep-all;
}
.main-01 .box ul {margin:20px 0 0;}
.main-01 .box ul li:after {width:1px; height:10px;}
.main-01 .box ul li a {padding:15px 0; font-size:12px;}
.m-quick.type01 .circle {position:fixed; left:0; top:auto; transform:none; z-index:9999; bottom:0; width:100%; height:auto; background:rgba(254,147,130,1); border-radius:0;}
.m-quick.type01 .circle h2 {display:none;}
.m-quick.type01 .circle ul {display:flex; flex-wrap:wrap; align-items:center;}
.m-quick.type01 .circle ul li {position:static; width:20%; opacity:1;}
.m-quick.type01 .circle ul li a {padding:10px 0; text-align:center;}
.m-quick.type01 .circle ul li a b {font-size:12px;}
.m-quick.type01 .circle ul li:nth-of-type(1) a:before {width:18px; height:22px;}
.m-quick.type01 .circle ul li:nth-of-type(2) a:before {width:22px; height:22px;}
.m-quick.type01 .circle ul li:nth-of-type(3) a:before {width:18px; height:21px;}
.m-quick.type01 .circle ul li:nth-of-type(4) a:before {width:17px; height:21px;}
.m-quick.type01 .circle ul li:nth-of-type(5) a:before {width:21px; height:21px;}
.main-01 .main-01-head {top:15px; padding:0 10px;}
.main-01 .main-01-head .btn-sitemap {width:28px; height:20px;}
.main-01 .main-01-scroll {display:none;}
}
/* 메인 두번째영역 */
.main-02 {width:100%; max-width:1200px; flex:0 0 100%; height:100%; background:url('../images/bg_main_02.png') no-repeat center 0px / cover;}
.main-02 .box {width:100%; height:100%; padding:7% 80px 0; margin:0 auto;}
.main-02 .box h2 {font-size:40px; font-weight:700; color:#202020; margin:0 0 40px;}
.main-02 .box .main-02-tab {margin:0 0 24px;}
.main-02 .box .main-02-tab ul {display:flex; flex-wrap:wrap; align-items:center; border-bottom:2px solid #E4E4E4;}
.main-02 .box .main-02-tab ul li {margin-right:48px;}
.main-02 .box .main-02-tab ul li:last-of-type {margin:0;}
.main-02 .box .main-02-tab ul li a {display:block; padding:0 0 24px; font-size:24px; font-weight:500; color:rgba(32,32,32,0.6);}
.main-02 .box .main-02-tab ul li.active a {font-weight:bold; color:#202020; position:relative;}
.main-02 .box .main-02-tab ul li.active a:after {position:absolute; left:0; bottom:-2px; width:100%; height:2px; background:#8FC320; content:"";}
.main-02 .box .main-02-tab ul li:hover a {font-weight:bold; color:#202020;}
.main-02 .box .main-02-cate {margin:0 0 55px;}
.main-02 .box .main-02-cate ul {display:flex; flex-wrap:wrap; align-items:center; margin:0 -8px;}
.main-02 .box .main-02-cate ul li {width:calc(16.66% - 16px); margin:0 8px;}
.main-02 .box .main-02-cate ul li:last-of-type {margin-right:0;}
.main-02 .box .main-02-cate ul li a {font-size:16px; font-weight:bold; color:#8FC320; border:1px solid #8FC320; border-radius:32px; height:48px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-02 .box .main-02-cate ul li.active a {background:#8FC320; color:#202020;}
.main-02 .box .main-02-cate ul li:hover a {background:#8FC320; color:#202020;}
.main-02 .box .main-02-intro {display:flex; flex-wrap:wrap;}
.main-02 .box .main-02-intro .list-image {
width: 100%;
overflow:hidden;
}
.main-02 .box .main-02-intro .list-image .swiper-slide {
}
.main-02 .box .main-02-intro .list-image .swiper-slide a {
display: block;
}
.main-02 .box .main-02-intro .list-image .swiper-slide .m-ratioBox-wrap {
margin-bottom:16px;
}
.main-02 .box .main-02-intro .list-image .swiper-slide .m-ratioBox {
background-size:cover !important;
background-position:center center !important;
border:1px solid #e1e1e1;
}
.main-02 .box .main-02-intro .list-image .swiper-slide .m-ratioBox:after {
content:""; width:200px; height:47px;
position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);
background:url("../images/logo-replace.png") no-repeat;
background-position:center center;
background-size:100% 100%;
z-index:-1;
}
.main-02 .box .main-02-intro .list-image .swiper-slide .category {
display: inline-block;
padding:8px 16px; margin-bottom:15px;
font-size:13px; font-weight:bold;
background-color:#060606; color:#fff; border-radius:32px;
}
.main-02 .box .main-02-intro .list-image .swiper-slide .title {
margin-bottom:24px;
font-size:22px; font-weight:500;
}
.main-02 .box .main-02-intro .list-image .swiper-slide .body:first-of-type {
margin-top:0;
}
.main-02 .box .main-02-intro .list-image .swiper-slide .body {
margin-top:4px;
font-size:15px; opacity:0.8; white-space: nowrap; overflow:hidden; text-overflow: ellipsis;
}
.main-02 .box .main-02-intro .list-image .m-ratioBox-wrap {
padding-top:240px;
}
.main-02 .box .main-02-intro .list-image .m-ratioBox-wrap .m-ratioBox {
background-size:cover; background-position:center center;
border-radius:24px;
}
.main-02 .box .main-02-intro .list-image .swiper-pagination {position:absolute; left:0; bottom:32px; width:100%;}
.main-02 .box .main-02-intro .list-image .swiper-pagination span {width:8px; height:24px; background:#fff; border-radius:4px; margin:0 6px; opacity:1;}
.main-02 .box .main-02-intro .list-image .swiper-pagination span.swiper-pagination-bullet-active {background:#8FC320;}
.main-02 .box .main-02-intro .list-content {display:flex; flex-wrap:wrap; align-content:space-between; flex:1; min-width:0; padding-left:80px;}
.main-02 .box .main-02-intro .list-content > div {width:100%;}
.main-02 .box .main-02-intro .list-content strong {display:block; font-size:24px; color:#202020; margin:0 0 12px;}
.main-02 .box .main-02-intro .list-content h3 {font-size:40px; font-weight:700; color:#222; margin:0 0 48px;}
.main-02 .box .main-02-intro .list-content dl dd {margin:0 0 20px; display:flex; flex-wrap:wrap; align-items:center;}
.main-02 .box .main-02-intro .list-content dl dd:last-of-type {margin:0;}
.main-02 .box .main-02-intro .list-content dl dd b {font-size:18px; font-weight:600; color:#202020; width:55px;}
.main-02 .box .main-02-intro .list-content dl dd p {flex:1; min-width:0; font-size:18px; color:#202020;}
.main-02 .box .main-02-intro .list-content a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:206px; height:56px; border-radius:32px; border:1px solid #202020; font-size:20px; font-weight:bold;}
.main-02 .swiper-btn {
display: flex; justify-content: center; align-items: center;
width:50px; height:50px;
position:absolute; top:31%; transform:translateY(-50%);
z-index:1;
background-color:rgba(0,0,0,0.8);
border-radius:100%;
cursor:pointer;
}
.main-02 .swiper-btn i {
font-size:24px;
color:#fff;
}
.main-02 .swiper-btn-prev {
left:20px;
}
.main-02 .swiper-btn-next {
right:20px;
}
@media (max-width:991px){
.main-02 {height:auto; flex:none; padding:40px 0; background:none;}
.main-02 .box {padding:0 15px;}
.main-02 .box h2 {font-size:30px; margin:0 0 15px;}
.main-02 .box .main-02-tab {margin:0 0 15px;}
.main-02 .box .main-02-tab ul li {margin-right:15px;}
.main-02 .box .main-02-tab ul li a {padding:0 0 10px; font-size:15px; text-align:center;}
.main-02 .box .main-02-cate {margin:0 0 25px;}
.main-02 .box .main-02-cate ul {margin:0 -5px -10px;}
.main-02 .box .main-02-cate ul li {width:calc(33.33% - 10px); margin:0 5px 10px;}
.main-02 .box .main-02-cate ul li a {font-size:15px; height:40px;}
.main-02 .box .main-02-intro .list-image {width:100%;}
.main-02 .box .main-02-intro .list-image img {height:400px;}
.main-02 .box .main-02-intro .list-content {flex:none; padding-left:0; width:100%; margin:20px 0 0;}
.main-02 .box .main-02-intro .list-content strong {font-size:20px; margin:0 0 10px;}
.main-02 .box .main-02-intro .list-content h3 {font-size:30px; margin:0 0 15px;}
.main-02 .box .main-02-intro .list-content dl dd {margin:0 0 10px;}
.main-02 .box .main-02-intro .list-content dl dd b {font-size:14px; width:50px;}
.main-02 .box .main-02-intro .list-content dl dd p {font-size:14px;}
.main-02 .box .main-02-intro .list-content a {width:100%; height:50px; font-size:16px; border-radius:5px; margin:15px 0 0;}
}
/* 메인 세번째영역 */
.main-03 {width:100%; flex:0 0 100%; height:100%; background:url('../images/bg_main_03.png') no-repeat center / cover;}
.main-03 .box {height:100%; width:100%; max-width:1570px; padding:0 80px; margin:0 auto; display:flex; flex-wrap:wrap; align-content:center;}
.main-03 .box h2 {width:100%; font-size:40px; font-weight:700; color:#202020; margin:0 0 70px;}
.main-03 .box .main-03-list {display:flex; flex-wrap:wrap; justify-content:space-between; width:100%;}
.main-03 .box .main-03-list .list-image {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-content:space-between;}
.main-03 .box .main-03-list .list-image img {width:429px;}
.main-03 .box .main-03-list .list-image > div {width:100%;}
.main-03 .box .main-03-list .list-image > div a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:206px; height:56px; border-radius:32px; border:1px solid #202020; font-size:20px; font-weight:bold;}
.main-03 .box .main-03-list .list-content {width:832px;}
.main-03 .box .main-03-list .list-content ul {display:flex; flex-wrap:wrap; justify-content:space-between;}
.main-03 .box .main-03-list .list-content ul li {width:calc(50% - 16px);}
.main-03 .box .main-03-list .list-content ul li img {width:100%; object-fit:cover; border-radius:24px; margin:0 0 24px;}
.main-03 .box .main-03-list .list-content ul li .m-ratioBox-wrap {
width:100%; border-radius:24px; margin:0 0 24px;
padding-top:110%;
}
.main-03 .box .main-03-list .list-content ul li .m-ratioBox {
}
.main-03 .box .main-03-list .list-content ul li p {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:20px; font-weight:bold; color:#202020; margin:0 0 8px;}
.main-03 .box .main-03-list .list-content ul li div {display:flex; flex-wrap:wrap; align-items:center;}
.main-03 .box .main-03-list .list-content ul li div span {padding:4px 12px; border-radius:4px; background:#202020; color:#fff; font-size:14px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-03 .box .main-03-list .list-content ul li div time {flex:1; min-width:0; margin-left:10px; font-size:16px; color:#202020;}
@media (max-width:991px){
.main-03 {position:relative; flex:none; height:auto; padding:40px 0; background-position:right bottom;}
.main-03:before {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.8); content:"";}
.main-03 .box {padding:0 15px; height:auto; position:relative; z-index:2;}
.main-03 .box h2 {font-size:30px; margin:0 0 20px;}
.main-03 .box .main-03-list .list-image {flex:none; width:100%;}
.main-03 .box .main-03-list .list-image img {display:block; width:80%; max-width:400px;}
.main-03 .box .main-03-list .list-image > div a {background:#202020; color:#fff; width:100%; height:50px; font-size:16px; border-radius:5px; margin:15px 0 0;}
.main-03 .box .main-03-list .list-content {width:100%; margin:25px 0 0;}
.main-03 .box .main-03-list .list-content ul li:last-of-type {margin:0;}
.main-03 .box .main-03-list .list-content ul li a {display:block;}
.main-03 .box .main-03-list .list-content ul li img {width:100%; margin:0 0 15px;}
}
@media (max-width:500px){
.main-03 .box .main-03-list .list-content ul li {width:100%; margin:0 0 40px;}
}
/* 메인 네번째영역 */
.main-04 {width:100%; flex:0 0 100%; height:100%;}
.main-04 .box {height:calc(100% - 110px); width:100%; max-width:1310px; padding:0 15px; margin:0 auto; display:flex; flex-wrap:wrap; align-content:center;}
.main-04 .box .main-04-list {display:flex; flex-wrap:wrap; width:100%;}
.main-04 .box .main-04-list .list-content {flex:1; min-width:0; padding-right:60px;}
.main-04 .box .main-04-list .list-content h2 {width:100%; font-size:40px; font-weight:700; color:#202020; margin:0 0 40px;}
.main-04 .box .main-04-list .list-content .main-04-cate {margin:0 0 40px;}
.main-04 .box .main-04-list .list-content .main-04-cate ul {display:flex; flex-wrap:wrap; align-items:center; margin:0 -8px;}
.main-04 .box .main-04-list .list-content .main-04-cate ul li {width:calc(16.66% - 16px); margin:0 8px;}
.main-04 .box .main-04-list .list-content .main-04-cate ul li:last-of-type {margin-right:0;}
.main-04 .box .main-04-list .list-content .main-04-cate ul li a {font-size:16px; font-weight:bold; color:#8FC320; border:1px solid #8FC320; border-radius:32px; height:48px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.main-04 .box .main-04-list .list-content .main-04-cate ul li.active a {background:#8FC320; color:#202020;}
.main-04 .box .main-04-list .list-content .main-04-cate ul li:hover a {background:#8FC320; color:#202020;}
.main-04 .box .main-04-list .list-content .list ul li {margin: 0 0 15px;}
.main-04 .box .main-04-list .list-content .list ul li:last-of-type {margin:0;}
.main-04 .box .main-04-list .list-content .list ul li a {border:1px solid #E4E4E4; border-radius:40px; padding:30px 45px; box-shadow:0 8px 12px rgba(0,0,0,0.08); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.main-04 .box .main-04-list .list-content .list ul li a p {flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-right:45px; font-size:16px; font-weight:500; color:#202020;}
.main-04 .box .main-04-list .list-content .list ul li a time {font-size:16px; color:#202020;}
.main-04 .box .main-04-list .list-image {width:424px; background:url('../images/bg_main_04.png') no-repeat center / cover; border-radius:32px; position:relative;}
.main-04 .box .main-04-list .list-image > div {padding:40px 55px; position:absolute; left:0; bottom:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:flex-end; align-content:flex-end;}
.main-04 .box .main-04-list .list-image > div * {width:100%;}
.main-04 .box .main-04-list .list-image > div h3 {font-size:32px; font-weight:bold; color:#fff; margin:0 0 24px;}
.main-04 .box .main-04-list .list-image > div a {font-size:16px; font-weight:bold; color:#fff;}
.main-04 .box .main-04-list .list-image > div time {font-size:16px; color:#fff; margin:5px 0 0;}
.main-04 .box .main-04-list .list-image > div p {margin:10px 0 0; font-size:16px; font-weight:bold; color:#fff;}
.main-04 footer {width:100%; margin-left:0;}
.main-04 footer .container {margin:0 auto;}
@media (max-width:991px){
.main-04 {flex:none; height:auto; padding:40px 0 0;}
.main-04 .box {height:auto; margin:0 0 40px;}
.main-04 .box .main-04-list .list-content {order:2; flex:none; width:100%; padding-right:0;}
.main-04 .box .main-04-list .list-content h2 {font-size:30px; margin:0 0 15px;}
.main-04 .box .main-04-list .list-content .main-04-cate {margin:0 0 25px;}
.main-04 .box .main-04-list .list-content .main-04-cate ul {margin:0 -5px -10px;}
.main-04 .box .main-04-list .list-content .main-04-cate ul li {width:calc(33.33% - 10px); margin:0 5px 10px;}
.main-04 .box .main-04-list .list-content .main-04-cate ul li a {font-size:15px; height:40px;}
.main-04 .box .main-04-list .list-content .list ul li {margin:0 0 10px;}
.main-04 .box .main-04-list .list-content .list ul li a {padding:25px 15px; border-radius:10px;}
.main-04 .box .main-04-list .list-content .list ul li a p {font-size:15px; padding-right:15px;}
.main-04 .box .main-04-list .list-content .list ul li a time {font-size:13px;}
.main-04 .box .main-04-list .list-image {order:1; width:100%; padding-bottom:130%; flex:none; margin:0 0 30px;}
.main-04 .box .main-04-list .list-image > div {padding:30px;}
}
.area-facilities-show .m-table td > p {
margin-top:8px;
}
.area-facilities-show .m-table td > p:first-of-type {
margin-top:0;
}
.area-facilities-show .m-table td .m-before-hyphen {
margin-left:12px;
}
.area-facilities-show .m-table td .m-before-reference {
margin-left:24px;
}
.area-facilities-show .section {
margin-top:70px;
}
.area-facilities-show .section > .m-title {
margin-bottom:32px;
}
@media screen and (max-width:768px) {
.area-facilities-show .section {
margin-top:40px;
}
.area-facilities-show .section > .m-title {
margin-bottom:20px;
}
}
.m-title.type01 {
font-size:28px; font-weight:bold;
}
@media screen and (max-width:768px) {
.m-title.type01 {
font-size:20px;
}
}
.m-infos .m-info.type01 {
margin-top:20px;
}
.m-infos .m-info.type01:first-of-type {
margin-top:0;
}
.m-info.type01 {
display: flex;
}
.m-info.type01 .m-info-title {
min-width:85px;
margin-right:30px; padding-left:12px;
position:relative;
font-weight:bold; font-size:16px;
word-break: keep-all;
}
.m-info.type01 .m-info-title:before {
content:"";
width:4px; height:4px;
position:absolute; left:0; top:6px;
background-color:#202020;
border-radius:100%;
}
.m-info.type01 .m-info-body {
font-size:16px;
word-break: keep-all;
}
@media screen and (max-width:768px) {
}
.m-table.type01 {}
.m-table.type01 th {
padding:15px 8px;
font-size:16px;
background-color:#8FC320; color:#000;
border-bottom:2px solid white;
border-left:2px solid white;
}
.m-table.type01 td {
padding:15px 16px;
background-color:#F5F5F5;
font-size:16px;
border-left:2px solid white; border-bottom:2px solid white;
word-break: keep-all;
}
@media screen and (max-width:768px) {
.m-table-wrap {
overflow-x:auto;
}
.m-table-wrap .m-table.type01 {
width:auto; min-width:100%;
white-space: nowrap;
}
.m-table.type01 th {
font-size:14px;
}
.m-table.type01 td {
padding:15px 8px;
font-size:14px;
}
}
.m-swiper.type01 {
position:relative;
}
.m-swiper.type01 .swiper-btn {
display: flex; justify-content: center; align-items: center;
width:40px; height:40px;
position:absolute; top:50%; transform:translateY(-50%);
z-index:1;
background-color:rgba(0,0,0,0.8);
border-radius:100%;
cursor:pointer;
}
.m-swiper.type01 .swiper-btn i {
color:#fff;
}
.m-swiper.type01 .swiper-btn-prev {
left:12px;
}
.m-swiper.type01 .swiper-btn-next {
right:12px;
}
.m-swiper.type01 .m-ratioBox-wrap {
padding-top:80%;
border-radius:24px;
}
.m-tabs.type01 {
display: flex ;
border-bottom:8px solid #8FC320;
}
.m-tabs.type01 .m-tabs-tab {
display: flex; align-items: center; justify-content: center;
min-width:240px;
padding:16px; padding-top:24px;
border-radius:24px 24px 0 0;
background-color:#F5F5F5; color:#7E7E7E;
font-size:24px; font-weight:500;
cursor:pointer;
}
.m-tabs.type01 .m-tabs-tab.active {
background-color:#8FC320; color:#000;
}
.m-tabs-content.active {
display: block;
}
.m-tabs-content {
display: none;
}
@media screen and (max-width:768px) {
.m-tabs.type01 .m-tabs-tab {
flex:1;
min-width: auto;
padding:10px; padding-top:16px;
font-size:16px;
}
}
.mt-40 {
margin-top:40px;
}
.mt-24 {
margin-top:24px;
}
.m-tabs.type02 {
display: flex ; flex-wrap:wrap;
background-color:#F5F5F5; border-radius:5px;
}
.m-tabs.type02 .m-tabs-tab {
display: flex; align-items: center; justify-content: center;
width:16.66%;
padding:12px 10px;
color:#999;
font-size:16px; font-weight:500;
cursor:pointer;
}
.m-tabs.type02 .m-tabs-tab.active {
background-color:#8FC320; color:#fff;
}
@media screen and (max-width:768px) {
.m-tabs.type02 {
display: block; white-space: nowrap; overflow-x:auto;
}
.m-tabs.type02 .m-tabs-tab {
display: inline-block; width:auto;
}
}
.m-before-dot.type01 {
padding-left:14px;
position: relative; text-align: left;
font-size:16px;
}
.m-before-dot.type01:before {
content:"";
width:3px; height:3px;
position:absolute; left:0; top:7px;
border-radius:100%; background-color:black;
}
.m-before-hyphen.type01 {
padding-left:14px;
position: relative; text-align: left;
font-size:16px;
color:#999;
}
.m-before-hyphen.type01:before {
content:"-";
position:absolute; left:0; top:0px;
color:#999;
}
.m-before-reference.type01 {
padding-left:14px;
position: relative; text-align: left;
font-size:14px;
color:#8FC320;
}
.m-before-reference.type01:before {
content:"※";
position:absolute; left:0; top:0px;
color:#8FC320;
}
.m-bodies.type01 {}
.m-bodies.type01 .m-body {
margin-bottom:8px;
}
.m-bodies.type01 .m-body:first-of-type {
}
.m-bodies.type01 > .m-body {
padding-left:14px;
position: relative; text-align: left;
font-size:16px;
}
.m-bodies.type01 > .m-body:before {
content:"";
width:3px; height:3px;
position:absolute; left:0; top:7px;
border-radius:100%; background-color:black;
}
.m-bodies.type01 > .m-bodies > .m-body {
padding-left:14px; margin-left:16px;
position: relative; text-align: left;
font-size:16px;
color:#999;
}
.m-bodies.type01 > .m-bodies > .m-body:before {
content:"-";
position:absolute; left:0; top:0px;
color:#999;
}
.align-left {
text-align: left !important;
}
.m-bodies.type01 > .m-bodies > .m-bodies > .m-body {
padding-left:14px; margin-left:30px;
position: relative; text-align: left;
font-size:14px;
color:#8FC320;
}
.m-bodies.type01 > .m-bodies > .m-bodies > .m-body:before {
content:"※";
position:absolute; left:0; top:0px;
color:#8FC320;
}
.m-divide.type01 {
padding:32px 0;
border-top:1px solid #e1e1e1;
}
.m-divide.type01 .m-divide-title {
margin-bottom:20px;
font-size:20px; font-weight:bold;
}
.normal {font-weight:normal !important;}
.BI .img-wrap { width: 100%; position: relative; }
.BI .img-wrap::before { content: ''; display: block; padding-top: 33%; }
.BI .img-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-image: url(../images/logo_bg.svg); border: solid 1px #989898; padding: 0 24px; }
.BI .btn-st1:hover { background-color: #00428e; color: #fff; }
.BI .section1 { margin-bottom: 120px; }
.BI .section1 .img-bg img { width: 100%; max-width: 420px; }
.BI .section1 .color-wrap { display: flex; margin-bottom: 40px; }
.BI .section1 .color-wrap li { width: 100%; height: 140px; display: flex; justify-content: center; flex-direction: column; gap: 16px; padding: 0 36px; }
.BI .section1 .color-wrap li span { font-weight: 500; letter-spacing: -0.4px; color: #fff; }
.BI .section1 .color-wrap li p { letter-spacing: -0.4px; color: #fff; }
.BI .section1 .color-wrap li:nth-child(1) { background-color: #f6ab00; }
.BI .section1 .color-wrap li:nth-child(2) { background-color: #e35a49; }
.BI .section1 .color-wrap li:nth-child(3) { background-color: #81a9d9; }
.BI .section1 .color-wrap li:nth-child(4) { background-color: #0b0909; }
.BI .section1 h2 { font-size: 40px; font-weight: 600; margin-bottom: 56px; text-align: center; }
.BI .section2 { margin-bottom: 120px; }
.BI .section2 h2 { font-size: 40px;font-weight: 600; margin-bottom: 56px; text-align: center; }
.BI .section2 .img-wrap { margin-bottom: 40px; }
.BI .section2 .img-bg img { width: 100%; max-width: 580px; }
.BI .section3 { margin-bottom: 120px; }
.BI .section3 h2 { font-size: 40px; font-weight: 600; margin-bottom: 56px; text-align: center; }
.BI .section3 .logo-list-wrap { display: flex; margin-bottom: 160px; }
.BI .section3 .logo-list-wrap li { width: 50%; }
.BI .section3 .logo-list-wrap li .logo-img-wrap { margin-bottom: 48px; }
.BI .btn-st1 {
display: flex;
justify-content: center;
align-items: center;
width: 260px; margin: 0 auto; border: solid 1px #00428e; color: #00428e;
height: 64px;
border-radius: 32px;
font-size: 17px;
font-weight: 600;
background-color: #fff;
transition: all 0.3s;
}
@media screen and (max-width:768px) {
.BI .img-bg { padding: 0 56px; }
.BI .btn-st1 { width: 200px; height:54px; }
.BI .section1 { margin-bottom: 70px; }
.BI .section1 .color-wrap { flex-direction: column; margin-bottom: 32px; }
.BI .section1 .color-wrap li { height: 48px; flex-direction: unset; justify-content: unset; align-items: center; padding: 0 16px; }
.BI .section1 .color-wrap li span { font-size: 14px; }
.BI .section1 .color-wrap li p { font-size: 14px; }
.BI .section1 h2 { margin-bottom:0px; font-size: 24px; }
.BI .section2 { margin-bottom: 60px; }
.BI .section2 h2 { font-size: 24px; }
.BI .section2 .img-wrap { margin-bottom: 32px; }
.BI .section3 .logo-list-wrap { flex-direction: column; margin: unset; }
.BI .section3 .logo-list-wrap li { width: 100%; margin-bottom: 48px; }
}
img.ready {
margin-top:60px;
}
@media screen and (max-width:768px) {
img.ready {
margin-top:20px;
}
}
.BI .comments-wrap {
margin-top:40px;
padding:40px;
border:1px solid #e1e1e1; background-color:#efefef;
}
.BI .comments-wrap .title {
margin-bottom:20px;
font-size:24px; font-weight:bold; text-align: center;
}
.BI .comments-wrap .comment {
margin-top:8px; word-break: keep-all;
}
.area-facilities-video video {
width:100%; height:100%;
}
.m-btns.type01 {
display: flex;
margin:-4px;
}
.m-btns.type01 .m-btn-wrap {
padding:4px;
}
.m-btn.type01 {
display: flex; align-items: center; justify-content: center;
height:35px; padding:0 16px;
border-radius:5px;
border:1px solid #e1e1e1;
transition: all .3s;
cursor: pointer; color:#999;
}
.m-btn.type01 i {
margin-right:12px;
}
.m-btn.type01:hover {
color:#8FC320;
border-color: #8FC320;
}
.m-btn.type01.active {
color:#8FC320;
border-color: #8FC320;
}
.m-comments-wrap.type01 {
padding:40px;
border:1px solid #e1e1e1; background-color:#efefef;
}
.m-comments-wrap.type01 .title {
margin-bottom:24px;
font-size:24px; font-weight:bold; text-align: center;
}
.m-comments-wrap.type01 .comment {
margin-top:8px; word-break: keep-all;
font-size:18px; line-height:24px;
}
.mt-40 {
margin-top:40px;
}
.mt-20 {
margin-top:20px;
}
.m-section.type01 {
padding-top:20px; margin-top:20px;
border-top:1px solid #e1e1e1;
}
.m-section.type01:first-child {
padding-top:0; margin-top:0;
border-top:none;
}
.m-section.type01 .m-section-title {
margin-bottom:12px;
font-size:18px; font-weight:500;
}
.m-section.type01 .body:first-child {
margin-top:0;
}
.m-section.type01 .body {
margin-top:8px;
color:#555;
line-height:20px; word-break: keep-all;
}
@media screen and (max-width:768px) {
.m-comments-wrap.type01 .title {
margin-bottom:16px;
font-size:18px; word-break: keep-all;
}
.m-comments-wrap.type01 .comment {
font-size:14px; line-height:18px; word-break: keep-all;
}
.m-comments-wrap.type01 .comment br {
display: none;
}
}
.sub-trainingGuide .btn-st1:hover { background-color: #00428e; color: #fff; }
.sub-trainingGuide .btn-st1 {
display: flex;
justify-content: center;
align-items: center;
width: 260px; margin: 0 auto; border: solid 1px #00428e; color: #00428e;
height: 64px;
border-radius: 32px;
font-size: 17px;
font-weight: 600;
background-color: #fff;
transition: all 0.3s;
}