@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');

/* 초기화 */
/* *, body {font-family: 'Noto Sans KR', sans-serif; font-weight: 400; color: #212121;}*/
*, body {font-family: 'Noto Sans KR', sans-serif; font-weight: 400;}
body{background-color: #fff;}
a, a:active, a:hover, i{color: inherit;}
.jejugothic{font-family: 'Jeju Gothic', sans-serif; font-weight: 400;}
.jejugothic2{font-family: 'Jeju Gothic', sans-serif; font-weight: 400;}
.Logofont { font-family: 'Jeju Gothic', sans-serif; font-weight: 400; }
.test_1 {gap: 10px; width: 203px; height: 48px; display: flex; justify-content: flex-end; align-items: center;}
.test_2 {display: flex;width: 40px;height: 40px;background-image: url(/image/ssn_logo.png); background-size: 40px 40px;}

/*--------------------------------------------------------------------------------------------------------------------*/
/* header */
#header{background-color: rgba(0, 0, 0, 0.3); position: absolute; z-index: 999; width: 100%;}
#header #mobile-button{cursor: pointer;}
#header #mobile-space, #header #mobile-button{display: none; width: 27px;}
#header #header-logo{margin-top: 8px; font-size: 30px; color: #ffffff; text-decoration: none;}
#header #menus{position: relative; width: calc(100% - 141px); height: 90px;}
#header #menus #sign-register{position: absolute; top: 10px; right: 0; margin: 0; padding: 0;}
#header #menus #sign-register > li{display: inline-block; margin-left: 10px; color: #ffffff;}
#header #menus #sign-register > li > a{text-decoration: none;}
#header #menus #menu-1{margin: 0; padding: 0; height: 100%;}
#header #menus #menu-1 > li{display: inline-block; font-size: 20px; color: #ffffff; font-weight: 500; margin-top: 44px; position: relative;}
#header #menus #menu-1 > li > a{display: block; text-decoration: none; padding: 0 10px;}
/*
#header #menus #menu-1 > li:nth-of-type(2) > a,
#header #menus #menu-1 > li:nth-of-type(3) > a,
#header #menus #menu-1 > li:nth-of-type(4) > a{padding: 0 50px;}
*/
#header #menus #menu-1 > li:nth-of-type(1) > a{padding: 0 60px;}
#header #menus #menu-1 > li:nth-of-type(2) > a{padding: 0 60px;}
#header #menus #menu-1 > li:nth-of-type(3) > a{padding: 0 60px;}
#header #menus #menu-1 > li:nth-of-type(4) > a{padding: 0 30px 0px 30px;}
#header #menus .menu-2{position: absolute; top: 46px; margin: 0; padding: 10px 0; width: 100%; text-align: center; height: 370px; border-left: 1px solid #e1e1e1; visibility: hidden;}
#header #menus #menu-1 > li:last-child .menu-2{border-right: 1px solid #e1e1e1;}
#header #menus .menu-2 > li{display: block; color: #444444; font-size: 14px; font-weight: 400;}
#header #menus .menu-2 > li > a{display: block; text-decoration: none; padding: 5px 0;}
#header #menus .menu-3{display: none;}
#header:after{content: ''; display: block; width: 100%; height: 370px; background-color: #ffffff; visibility: hidden; position: absolute; top: 90px; left: 0; box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);}
@media screen and (min-width: 993px) {
    /* effect */
    #header.fixed{position: fixed; top: 0; left: 0;}
    #header.fixed, #header.active{background-color: rgba(255, 255, 255, 0.99); border-bottom: 1px solid #e1e1e1;}
    #header.fixed #header-logo,
    #header.active #header-logo{color: #000000;}
    #header.fixed #sign-register > li, #header.fixed #menus #menu-1 > li,
    #header.active #sign-register > li, #header.active #menus #menu-1 > li{color: #000000 !important;}
    #header #menus #menu-1 > li.now:after{content: ''; display: block; width: 100%; height: 3px; background-color: #005bb4; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
    #header #menus #menu-1.active .menu-2{visibility: visible; z-index: 999;}
    #header #menus .menu-2:hover{background-color: #fafafa;}
    #header #menus .menu-2 > li:hover{color: #005bb4;}
    #header.open:after{visibility: visible; border-top: 1px solid #e1e1e1;}

}
@media screen and (max-width: 1200px) {
    #header #menus #menu-1 > li{font-size: 15.5px;}
    #header #menus .menu-2 > li{font-size: 13.5px;}
    #header #menus .menu-2, #header:after{height: 340px;}
    #header #header-logo {font-size: 27px}
    .test_2 {width: 36px;height: 36px; background-size: 36px 36px;}
    .test_1 {justify-content: normal}
}
@media screen and (max-width: 992px) {
    #body.flowHidden{position:fixed; width:100%; height:100%;}
    main.flowHidden{overflow: hidden !important; height: 100% !important; position: absolute !important;}
    #header #menus{width: 100%; height: calc(100% - 56px); position: fixed; top: 56px; left: 0; background-color: #ffffff; display: none; box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15); overflow: auto;}
    #header #mobile-space, #header #mobile-button{display: block; color: #ffffff;}
    #header:after{display: none;}
    #header #header-logo{margin: 8px 0; font-size: 25px;}
    #header #menus #sign-register{position: static; text-align: right; padding: 10px 0;}
    #header #menus #sign-register > li{color: #ffffff; margin: 0 15px 0 0;}
    #header #menus #sign-register > li > a{display: inline-block; padding: .375rem .75rem; border-radius: .25rem; background-color: #005bb4;}
    #header #menus #menu-1{width: 100%; height: auto;}
    #header #menus #menu-1 > li{color: #000000; margin: 0;}
    #header #menus #menu-1 > li > a{padding: 0.5rem 15px !important; border-top: 1px solid #e1e1e1; position: relative;}
    #header #menus #menu-1 > li:last-child > a{border-bottom: 1px solid #e1e1e1;}
    #header #menus #menu-1 > li > a:after{content: '\f067';font-weight: 900; font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
    #header #menus .menu-2{border: none !important; height: auto; padding: 0; position: static; visibility: visible; display: none; text-align: left;}
    #header #menus .menu-2 > li{color: #000000; font-size: 16px;}
    #header #menus .menu-2 > li > a{padding: 0.5rem 30px; position: relative; border-top: 1px solid #e1e1e1;}
    #header #menus .menu-2 > li.has-depth-3 > a:after{content: '\f067';font-weight: 900; font-family: "Font Awesome 5 Free"; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
    #header #menus .menu-3 > li{margin: 10px 0;}
    /* effect */
    #header.fixed{position: fixed; top: 0; left: 0;}
    #header.fixed, #header.m-active{background-color: rgba(255, 255, 255, 0.99); border-bottom: 1px solid #e1e1e1;}
    #header.fixed #header-logo,
    #header.m-active #header-logo{color: #000000;}
    #header.fixed #mobile-button, #header.m-active #mobile-button{color: #000000;}
    #header.m-active #menus{display: block;}
    #header #menus #menu-1 > li.m-now > a{border-bottom: 1px solid #e1e1e1; background-color: #fafafa; color: #005bb4;}
    #header #menus #menu-1 > li.m-now > a:after{content: '\f068';}
    #header #menus #menu-1 > li.m-now .menu-2{display: block;}
    #header #menus .menu-2 > li.m-now > a{border-bottom: 1px solid #e1e1e1; background-color: #005bb4; color: #ffffff;}
    #header #menus .menu-2 > li.m-now > a:after{content: '\f068';}
    #header #menus .menu-2 > li.m-now .menu-3{display: block;}
    .test_2 {display: none;}
    .test_1 {width:auto; }
}
/*--------------------------------------------------------------------------------------------------------------------*/
.section-wrap{height: 850px; padding: 71px 0;}
@media screen and (max-width: 992px) {
    .section-wrap{height: auto; padding: 15px;}
    #section-1 .section-wrap{min-height: auto; padding: 71px 15px;}
}
body.fp-responsive .section, body.fp-responsive .section .fp-tableCell{height: auto !important;}
/* section-1 */
#section-1{background: url("/image/bokji-net/mainBackground_1_1.jpg") no-repeat center center; background-size: cover; position: relative;}
#bokjinet-notice{max-width: 570px; color: #ffffff; font-size: 16px; margin-bottom: 10px;}
#bokji-service-search > #service-search-title{font-size: 40px; color: #ffffff; display: block; margin-bottom: 25px;}
#bokji-service-search > #service-search-title > span{font-size: 54px; color: #4bcaf9; font-weight: 700;}
#bokji-service-search > #search{margin: 0 25px;}
#bokji-service-search > #search > div{background-color: #ffffff; border-radius: 0.25rem; padding: 0.375rem 0.75rem;}
#bokji-service-search > #search input[type="text"]{border: none; width: calc(100% - 42px);}
#bokji-service-search > #search button{background-color: #4bcaf9; color: #ffffff;}
#bokji-service-search > #search-example{color: #ffffff; padding: 0 25px; margin-top: 15px;}
#popup-guide{position: absolute; bottom: 71px; left: 20%;}
#happy-talk{position: absolute; bottom: 71px; right: 20%;}
#happy-talk img{width: 100px;}
#side-quick-menu{position: fixed; right: 40px; top: 50%; transform: translateY(-50%); margin: 10px 0; color: #ffffff; z-index: 99;}
.side-quick-menu-1{background-color: rgba(0,0,0,0.3);}
.side-quick-menu-2{display: none !important;}
#side-quick-menu > a{padding: 5px 30px; margin: 10px 0; font-size: 16px; text-decoration: none; border-left: 2px solid transparent;}
#side-quick-menu > a:hover{border-left: 2px solid #e1e1e1;}
@media screen and (max-width: 992px) {
    #popup-guide, #happy-talk{position: static; text-align: center;}
    #happy-talk{margin-top: 10px;}
    #happy-talk img{width: 70px;}
    .scroll-down{display: none !important;}
    .side-quick-menu-1{display: none !important;}
    .side-quick-menu-2{display: flex !important;}
    #side-quick-menu{position: static; transform: translateY(0);background-color: rgba(0,0,0,0.3); width: 530px;}
}
@media screen and (max-width: 576px) {
    #bokjinet-notice{max-width: 100%;}
    #bokji-service-search{width: 100%;}
    #bokji-service-search > #service-search-title{font-size: 20px;}
    #bokji-service-search > #service-search-title > span{font-size: 30px;}
    #bokji-service-search > #search{margin: 0;}
    #bokji-service-search > #search-example{padding: 0;}
    #side-quick-menu{width: 100%;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* section-2 */
#section-2{background: url("/image/bokji-net/mainBackground_2_1.png") no-repeat center center; background-size: cover;}
#service-boxs-title{font-size: 42px; color: #ffffff; font-weight: 700;}
#service-boxs > div > a{text-decoration: none; width: 140px; height: 140px; background-color: rgba(0,0,0,0.3); text-align: center; color: #ffffff; border-radius: 0.25rem;}
#service-boxs > div > a:hover{background-color: #2c58a0;}
#service-boxs > div > a > div{margin-bottom: 10px;}
#service-boxs > div > a > p{margin: 0; color: #ffffff;}
@media screen and (max-width: 576px) {
    #service-boxs-title{font-size: 30px;}
    #service-boxs > div > a{margin: 15px; width: 100px; height: 100px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* section-3 */
#section-3{background: linear-gradient(90deg, #3c5f99 50%, #f0f0f0 50%);}
#bokji-map > #map-title > span{font-size: 42px; color: #ffffff; font-weight: 700;}
#bokji-map > #map-links > a{color: #ffffff; border: 2px solid #ffffff;}
#bokji-map > #map-links > a:hover{background-color: #005bb4;}
#bokji-notice > #notice-title > span{font-size: 42px; color: #b49b80; font-weight: 700;}
#notice-boxs img:hover{box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);}
#notice-boxs a img{height: 442px;}
#notice-boxs-btns{width: 80%; margin: 0 auto;}
#notice-boxs-btns > div{width: 100px;}
#notice-boxs-btns > div > button{background-color: #a8a8a8;}
#notice-boxs-btns > div > button > i{color: #ffffff;}
#bokji-notice > #notice-links > a{color: #575757; border: 2px solid #575757;}
#bokji-notice > #notice-links > a:hover{background-color: #005bb4; color: #ffffff;}
@media screen and (max-width: 768px) {
    #section-3{background: none;}
    #bokji-map{background-color: #3c5f99;}
    #bokji-notice{background-color: #f0f0f0;}
    #notice-boxs a img{height: auto;}
}
@media screen and (max-width: 576px) {
    #bokji-map > #map-title > span, #bokji-notice > #notice-title > span{font-size: 30px;}
    #bokji-map > #map-title > span, #bokji-notice > #notice-title > span{display: block;}
    #notice-boxs .slick-slide{margin: 0;}
}
@media screen and (max-width: 370px) {
    #bokji-map > #map-links > a:nth-of-type(1){margin-bottom: 15px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* jcsw-1 */
#jcsw-1{background-color: #f7f7f7;}
#jcsw-intro > #jcsw-intro-title > span{font-size: 42px; font-weight: 700; color: #212121;}
#jcsw-intro > #jcsw-intro-boxs > div{position: relative;}
#jcsw-intro > #jcsw-intro-boxs a{display: block; border: 1px solid #cdcdcd; border-radius: 0.25rem; height: 265px; text-decoration: none; background-color: #ffffff; position: relative;}
#jcsw-intro > #jcsw-intro-boxs a:hover{box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.15);}
#jcsw-intro > #jcsw-intro-boxs a > h6{font-size: 26px; margin-top: 40px; z-index: 9; color: #ffffff;}
#jcsw-intro > #jcsw-intro-boxs a:before{content: ''; display: block; width: 100%; height: 265px; position: absolute; top: 0; left: 0;}
#jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(1) > a:before{background: url("/image/bokji-net/jcsw-01.png") no-repeat center; background-size: 100% 265px;}
#jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(2) > a:before{background: url("/image/bokji-net/jcsw-04.png") no-repeat center; background-size: 100% 265px;}
#jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(3) > a:before{background: url("/image/bokji-net/jcsw-05.png") no-repeat center; background-size: 100% 265px;}
#jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(4) > a:before{background: url("/image/bokji-net/jcsw-03.png") no-repeat center; background-size: 100% 265px;}
#jcsw-intro > #jcsw-intro-boxs a:hover:before{display: none;}
#jcsw-intro > #jcsw-intro-boxs a:hover > h6{color: #212121;}
#jcsw-service-links-1 a{text-align: center; color: #686868; border: 1px solid #ababab; display: block; margin-bottom: 20px; font-size: 17px;}
#jcsw-service-links-1 a:hover{color: #ffffff; background: url("/image/bokji-net/service-links-1-hover.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 a{height: 92px; color: #ffffff; padding: 15px 0;}
#jcsw-service-links-2 a:hover{background: #ffffff !important; color: #212121; border: 1px solid #212121;}
#jcsw-service-links-2 a:hover > div{color: #212121;}
#jcsw-service-links-2 > div:nth-of-type(1) > div > div:nth-of-type(1) > a{background: url("/image/bokji-net/service-links-2-1.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 > div:nth-of-type(1) > div > div:nth-of-type(2) > a{background: url("/image/bokji-net/service-links-2-2.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 > div:nth-of-type(1) > div > div:nth-of-type(3) > a{background: url("/image/bokji-net/service-links-2-3.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 > div:nth-of-type(1) > div > div:nth-of-type(4) > a{background: url("/image/bokji-net/service-links-2-4.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 > div:nth-of-type(2) > div > div:nth-of-type(1) > a{background: url("/image/bokji-net/service-links-2-5.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 > div:nth-of-type(2) > div > div:nth-of-type(2) > a{background: url("/image/bokji-net/service-links-2-6.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 > div:nth-of-type(2) > div > div:nth-of-type(3) > a{background: url("/image/bokji-net/service-links-2-7.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 > div:nth-of-type(2) > div > div:nth-of-type(4) > a{background: url("/image/bokji-net/service-links-2-8.png") no-repeat center; background-size: cover;}
#jcsw-service-links-2 a > div{color: #ffffff; text-align: center;}
@media screen and (max-width: 992px) {
    #jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(1), #jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(2){margin-bottom: 30px;}
    #jcsw-service-links-2 > div{margin-bottom: 15px;}
    #jcsw-intro > #jcsw-intro-boxs a{height: 200px;}
    #jcsw-intro > #jcsw-intro-boxs a:before{height: 200px;}
    #jcsw-intro > #jcsw-intro-boxs a > h6{margin-top: 15px;}
}
@media screen and (max-width: 576px) {
    #jcsw-intro > #jcsw-intro-title > span{font-size: 30px; display: block;}
    #jcsw-intro > #jcsw-intro-boxs a{height: 150px;}
    #jcsw-intro > #jcsw-intro-boxs a:before{height: 150px;}
    #jcsw-intro > #jcsw-intro-boxs a > img{width: 50%;}
    #jcsw-intro > #jcsw-intro-boxs a > h6{font-size: 16px;}
    #jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(1), #jcsw-intro > #jcsw-intro-boxs > div:nth-of-type(2){margin-bottom: 15px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* jcsw-2 */
#jcsw-2{background: url("/image/bokji-net/mainBackground_3.jpg") no-repeat center center; background-size: cover;}
#jcsw-news-title{font-size: 42px; color: #ffffff; font-weight: 700;}
.jcsw-news-board .news-board-title{color: #ffffff; background: url("/image/bokji-net/news-board-title.png") no-repeat center; background-size: cover; padding: 15px 18px;}
.jcsw-news-board .news-board-title > span{color: #ffffff; font-size: 20px;}
.jcsw-news-board .news-board-title > a > i{font-size: 20px;}
.jcsw-news-board .news-board-list{border: 1px solid #d9d9d9; padding: 15px; background-color: #ffffff;}
.jcsw-news-board .news-board-list li{padding: 10px 0; border-bottom: 1px solid #d9d9d9;}
.jcsw-news-board .news-board-list li:hover{border-bottom: 1px solid #005bb4;}
.jcsw-news-board .news-board-list li a{text-decoration: none; width: calc(100% - 130px)}
.jcsw-news-board .news-board-list li a:before{content: '\00B7'; color: #005bb4;}
.jcsw-news-board .news-board-list li span{float: right; color: #929292;}
@media screen and (max-width: 576px) {
    #jcsw-news-title{font-size: 30px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* jcsw-3 */
#jcsw-3, #jcsw-3 .fp-tableCell{height: auto !important;}
#jcsw-food #food-banner{padding: 0; margin-bottom: 0;}
#jcsw-food #food-banner li{text-align: center; font-size: 12px;}
#jcsw-food #food-banner .slick-track{display: flex; align-items: center;}
#jcsw-food #food-banner .slick-arrow:before{color: #000000;}
#jcsw-links{text-align: center; background-color: #f0f0f0;}
@media screen and (max-width: 768px) {
    #jcsw-food, #jcsw-links{display: none;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* footer */
#footer{background-color: #282828; height: auto !important;}
#footer .fp-tableCell{height: auto !important;}
#footer #footer-links a{color: #ffffff; margin-right: 15px;}
#footer #footer-links a.links-button{border: 1px solid #ffffff; padding: 5px 10px;}
#footer #footer-links a.links-button:hover{background-color: #ffffff; color: #212529; text-decoration: none;}
#footer  #address-copyrigth{margin-top: 15px;}
#footer  #address-copyrigth p{color: rgba(255,255,255,0.35); margin-bottom: 0; font-size: 13px;}
@media screen and (max-width: 992px) {
    #footer-select{margin-top: 15px;}
}
@media screen and (max-width: 768px) {
    #footer #footer-links a{margin-right: 0; text-align: center;}
    #footer #footer-links a.links-button, #footer-select{display: none;}
}
@media screen and (max-width: 576px) {
    #footer #footer-links a{display: block; margin-top: 10px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* #sub-page-image */
.sub-background-1{background: url("/image/bokji-net/subBackground_1.jpg") no-repeat; background-size: cover; background-position: 50%;}
.sub-background-2{background: url("/image/bokji-net/subBackground_2.jpg") no-repeat; background-size: cover; background-position: 50%;}
.sub-background-3{background: url("/image/bokji-net/subBackground_3.jpg") no-repeat; background-size: cover; background-position: 50%;}
.sub-background-4{background: url("/image/bokji-net/subBackground_4.jpg") no-repeat; background-size: cover; background-position: 50%;}
.sub-background-5{background: url("/image/bokji-net/subBackground_5.jpg") no-repeat; background-size: cover; background-position: 50%;}
#sub-page-image .row{height: 380px;}
#sub-page-image .row #sub-page-image-title{text-align: right;}
#sub-page-image .row #sub-page-image-title > *{color: #ffffff;}
#sub-page-image .row #sub-page-image-title h5{font-size: 25px; margin-bottom: 0;}
#sub-page-image .row #sub-page-image-title h3{font-size: 53px; margin-bottom: 0;}
@media screen and (max-width: 576px) {
    #sub-page-image .row #sub-page-image-title{text-align: center;}
    #sub-page-image .row #sub-page-image-title h5{font-size: 17px;}
    #sub-page-image .row #sub-page-image-title h3{font-size: 36px;}
    #sub-page-image .row{height: 200px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* #sub-contents-wrap */
#sub-contents-wrap{padding-top: 30px; padding-bottom: 30px;}
/*--------------------------------------------------------------------------------------------------------------------*/
/* #side-menu */
#side-menu ul{list-style: none; padding: 0;}
.side-menu-3 > li > a:before, .side-menu-4 > li > a:before, .side-menu-5 > li > a:before{content: '-'; margin-right: 10px;}
#side-menu-1 > li > p{
    background: url("/image/bokji-net/sideTitleBack.png") no-repeat center; background-size: cover;
    color: #ffffff; text-align: center; padding: 30px 0; font-size: 25px; position: relative;}
#mobile-sub-menu {position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}
#side-menu-1 > li > p > span{font-size: 25px;}
#side-menu a{display: block; text-decoration: none;}
#side-menu-2 > li > a{border-top: 1px solid #e1e1e1; padding: 10px 0 10px 10px; font-size: 17px; margin-bottom: 0;}
#side-menu-2 > li:last-child > a{border-bottom: 1px solid #e1e1e1;}
#side-menu-2 > li:hover > a, #side-menu-2 > li.side-menu-active > a{background-color: #f4f4f4;}
.side-menu-3{padding: 10px 0 !important; display: none; color: #212121;}
#side-menu-2 > li.side-menu-active .side-menu-3{display: block;}
.side-menu-3 > li > a{padding-left: 10px; font-size: 13px;}
.side-menu-3 > li.nowMenu{background-color: #005bb4; color: #fff;}
.side-menu-4  > li > a{padding-left: 17px;}
@media screen and (max-width: 992px) {
    #side-menu-1 > li > p{padding: 15px 0; font-size: 20px;}
    #side-menu-2{display: none;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* sub-contents */
#sub-contents{position: relative;}
#sub-contents-title{height: 80px; border-bottom: 1px solid #b8b8b8; margin-bottom: 50px;}
#sub-contents-title > h3{font-size: 32px;}
#sub-contents-route, #sub-contents-route i{color: #005bb4;}
/* #sub-contents-text{color: #212121; min-height: 700px;} */
#sub-contents-text{min-height: 700px;}
@media screen and (max-width: 576px) {
    #sub-contents-title{height: auto;}
    #sub-contents-title > h3{font-size: 25px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 컨텐츠 내에서 사용하는 클래스 모음 */
.bg-blue{background-color: #005bb4;}
.font-color-blue{color: #005bb4;}
.font-color-red{color: #fc1515;}
.font-color-green{color: #81aa07;}
.font-20{font-size: 20px;}
.font-18{font-size: 18px;}
.font-16{font-size: 16px;}
.font-12{font-size: 12px;}
.font-bold{font-weight: 700;}
#sub-contents-text .table-responsive .table{min-width: 690px;}
#sub-contents-text .table-responsive .table caption{caption-side: top; text-align: right; padding-top: 0;}
.table-head{border-top: 2px solid #005bb4;}
.table-head th{background-color: #ddeefd; color: #212121; vertical-align: middle !important; font-weight: 700;}
.table-head td, .table-body td{vertical-align: middle;}
.contents-title{font-size: 20px; font-weight: 500; margin-bottom: 5px;}
.contents-title:before{content: ''; display: block; width: 37px; height: 2px; background-color: #005bb4; position: relative; top: 0; left: 0;}
.contents-list{list-style: none; padding-left: 5px; text-indent: -14px; margin-left: 10px;}
.contents-list > li{padding-bottom: 10px;}
.contents-list > li:before{content: '\2022'; color: #005bb4; margin-right: 10px;}
.contents-list.no-decoration > li:before{display: none;}
.contents-list ul{list-style: none; padding-left: 5px; text-indent: -14px; margin-left: 10px;}
.contents-border-box{border: 1px solid #e1e1e1; padding: 15px;}
.contents-border-box .contents-list{margin-bottom: 0;}
.contents-button-blue{background-color: #005bb4; color: #ffffff;}
.contents-button-blue:hover{color: #ffffff; background-color: #0078e8;}
.contents-button-outline-blue{border: 1px solid #005bb4; color: #005bb4;}
.contents-button-outline-blue.active{background-color: #005bb4; color: #ffffff;}
.contents-box-btn > span{display: inline-block; background-color: #e6f5fe; border: 1px solid #b8d0ea; border-radius: 0.25rem; padding: 0.375rem 0.75rem; color: #0a69bb; margin: 5px 0;}
.contents-box-btn > i{color: #0a69bb; margin: 0 10px;}
.ellipsis3{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.2em; height: 3.6em;}
.ellipsis2{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2em; height: 2.4em;}
@media screen and (max-width: 576px) {
    .contents-box-btn > span{width: 100%; text-align: center;}
    .contents-box-btn > i:before{content: '\f0d7';}
    .pagination .page-link{padding: .25rem .5rem; font-size: .875rem; line-height: 1.5;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 명예의 전당 */
.hof-box{border: 1px solid #e1e1e1; padding: 15px;}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 복지지식 */
#dictionaries-box{background-color: #f3f7fa; border-top: 1px solid #005bb4; border-bottom: 1px solid #005bb4;}
.en-title, .ko-title {padding-right: 10px; margin: 5px 0;}
.en-list, .ko-list {margin: 0; padding: 0;}
.en-list > li, .ko-list > li {float: left; list-style: none;}
.en-list > li > a, .ko-list > li > a{padding: 5px 10px; margin: 5px 3px; display: inline-block; background-color: #ffffff; border: 1px solid #d7d7d7; text-decoration: none;}
.en-list > li > a:hover, .ko-list > li > a:hover{background-color: #005bb4; color: #ffffff;}
.en-list > li > a.active, .ko-list > li > a.active{background-color: #005bb4; color: #ffffff;}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 푸드뱅크 */
.table-p-0 td{padding: 0;}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 주요사업 */
#business-tab a.active{background-color: #005bb4; color: #ffffff;}
#business-1{background: url("/image/bokji-net/jcsw/mb-1.jpg") no-repeat bottom right; background-size: auto}
#business-1-title{position: relative;}
#business-1-title > span:nth-of-type(1){background-color: #ffffff; display: inline-block; padding-right: 30px;}
#business-1-title > span:nth-of-type(2){display: block; height: 2px; width: 100%; background-color: #005bb4; position: absolute; top: 50%; transform: translateY(-50%); z-index: -1;}
@media screen and (max-width: 768px) {
    #business-tab > li{width: 100%; text-align: center;}
    #business-1{background: none;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 제주사회공헌네트워크 */
.csrc-progress > div{background-color: #3c5f99; color: #ffffff; border-radius: 0.25rem; width: 100%; padding: 0.375rem 0.75rem;}
.csrc-progress > p{font-size: 11px;}
.csrc-procedure{border: 1px solid #e1e1e1;}
.csrc-procedure > div{text-align: center; background-color: #3c5f99; color: #ffffff; min-height: 46px;}
.csrc-procedure > .contents-list{margin: 0; padding: 10px; min-height: 135px; text-indent: 0;}
@media screen and (max-width: 992px) {
    .csrc-progress:nth-child(-n+3){margin-bottom: 15px;}
    .csrc-progress > p{font-size: 14px;}
}
@media screen and (max-width: 768px) {
    .csrc-progress:nth-child(-n+4){margin-bottom: 15px;}
    .csrc-progress > p{font-size: 12px;}
    .csrc-procedure-box > div:nth-child(-n+2){margin-bottom: 15px;}
    .csrc-procedure > .contents-list{min-height: auto;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 자원봉사FAQ */
#volunteer-faq .card{border: none; border-bottom: 1px dashed #bbbbbb;}
#volunteer-faq .card-header{background-color: #ffffff; border: none;}
#volunteer-faq .card-header button{padding: 0.375rem 0; border: none; background-color: #ffffff;}
#volunteer-faq .card-header button i{color: #005bb4; margin-right: 5px;}
#volunteer-faq .card-body{background-color: #f6f6f6; margin: 0 1.25rem 1.25rem 1.25rem; border-radius: 0.25rem;}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 자주묻는질문 */
#food-faq .card{border: none; border-bottom: 1px dashed #bbbbbb;}
#food-faq .card-header{background-color: #ffffff; border: none;}
#food-faq .card-header button{padding: 0.375rem 0; border: none; background-color: #ffffff;}
#food-faq .card-header button i{color: #005bb4; margin-right: 5px;}
#food-faq .card-body{background-color: #f6f6f6; margin: 0 1.25rem 1.25rem 1.25rem; border-radius: 0.25rem;}
/*--------------------------------------------------------------------------------------------------------------------*/
/* search */
#search #search-bar{background-color: #f2f2f2; height: 100px;}
#search #search-bar > div{background-color: #ffffff; padding: 10px; border: 1px solid #c2c2c2;}
#search #search-bar > div > input{background-color: transparent; border: none; width: calc(100% - 36px);}
#search #search-bar > div > button{background-color: #44a1f0; border: none; color: #ffffff; border-radius: 5px; padding: 5px 10px;}
#search #search-word{background-color: #c5e4ff; padding: 15px; font-size: 18px;}
#search-service #service-title{color: #44a1f0;}
#search-map #map-title{color: #44a1f0;}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 복지서비스 */
.welfare-category-box{position: relative; overflow: hidden;}
.welfare-category-box > input[type="checkbox"]{position: absolute; top: -50%;}
.welfare-category-box > label{background-color: #f4f4f4; border: 1px solid #cccccc; color: #5f5f5f; border-radius: 50%; cursor: pointer; width: 63px; height: 63px;}
.welfare-category-box > label > img{height: 27px;}
.welfare-category-box > span{font-size: 13px;}
#welfare-category .welfare-category-box > label > img:nth-of-type(1){display: block;}
#welfare-category .welfare-category-box > label > img:nth-of-type(2){display: none;}
#welfare-category .welfare-category-box > label:hover > img:nth-of-type(1){display: none;}
#welfare-category .welfare-category-box > label:hover > img:nth-of-type(2){display: block;}
.welfare-category-box > label:hover,
#welfare-category .welfare-category-box > input[type="checkbox"]:checked + label{background-color: #005bb4;}
#welfare-category .welfare-category-box > input[type="checkbox"]:checked + label > img:nth-of-type(1){display: none;}
#welfare-category .welfare-category-box > input[type="checkbox"]:checked + label > img:nth-of-type(2){display: block;}
#welfate-lg-classify > #lg-classify-title{background-color: #005bb4; color: #ffffff; height: 50px; padding: 0 20px;}
#welfate-lg-classify > #lg-classify-title > span{color: #ffffff; font-size: 12px;}
#welfate-md-classify > #md-classify-title{background-color: #005bb4; color: #ffffff; height: 50px; padding: 0 20px;}
#welfate-classify label{position: relative; border: 1px solid #c1c1c1; border-radius: 0; margin: 1px; }
#welfate-classify label:before{content: "\f0c8"; box-sizing: border-box; font-family: "Font Awesome 5 Free"; font-weight: 400;
    -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto;
    line-height: 1; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: #c1c1c1;}
#welfate-classify label.active:before{content: "\f14a"; color: #ff0000;}
#welfate-classify #dep1-list, #welfate-classify #dep2-list {border: 1px solid #dddddd; height: 150px; overflow-y: scroll; overflow-x: hidden;}
#welfate-classify .empty-classify{text-align: center;}
#welfare-category-search{padding: 10px; border: 1px solid #e7e7e7; background-color: #f8f8f8;}
.btn-search{background-color: #005bb4; color: #ffffff;}
#welfare-category-search button > i{margin: 0 20px;}
#service-category{border-bottom: 1px solid #005bb4;}
#service-category .nav-link:focus,
#service-category .nav-link:hover,
#service-category .nav-link.active{border-color: #005bb4 #005bb4 #f8fafc;}
#service-category > a{font-size: 18px; font-weight: 500; padding: 0 10px;}
.welfare-search .card-header{background-color: #ffffff;}
.welfare-search .card-header > span{margin-right: 10px;}
.welfare-search .card-body{color: #5c5c5c;}
@media screen and (max-width: 992px) {
    #welfare-category-search{width: 100%;}
    .welfare-category-box > label:hover{background-color: #f4f4f4; color: #5f5f5f;}
}
@media screen and (max-width: 768px) {
    .welfare-category-box{margin: 0 15px;}
}
@media screen and (max-width: 576px) {
    .welfare-category-box{margin: 0 5px;}
    #service-category{border: none;}
    #service-category .nav-item{width: 100%;}
    .welfare-search .card-header{text-align: center;}
    .welfare-search .card-header > a{display: block;}
    .welfare-search .card-header > span{margin-right: 0;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 회원명단 */
.members-box{height: 650px; overflow-y: scroll; overflow-x: hidden;}
@media screen and (max-width: 576px) {
    .members-box{height: 300px;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* service-guide */
#service-guide-1-background{position: absolute; bottom: 0; right: 0; z-index: -1;}
@media screen and (max-width: 768px) {
    #service-guide-1-background{position: static;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* popup */
.popup-container{position: relative;}
.popup{overflow: hidden; position: absolute;}
.popup > .popup-contents img{max-width: 100% !important; height: auto !important;}
.popup > .popup-contents > p{margin: 0;}
@media screen and (max-width: 768px) {
    .popup-container{position: absolute; top: 56px; left: 0; z-index: 10000;}
    .popup{position: static !important; display: inline-block; max-width: 100%;}
}
@media screen and (max-width: 576px) {
    .popup-contents{width: auto !important; height: auto !important;}
}
/*--------------------------------------------------------------------------------------------------------------------*/
/* 사회복지역사관 */
.history-hall-circle{background: url("/image/bokji-net/historyHall-circle.png") no-repeat center; background-size: contain; width: 206px; height: 172px; text-align: center; font-size: 20px; color: #ffffff; padding-top: 60px;}
.history-hall-div{display: none;}
.history-hall-div.active{display: flex;}
.history-hall-contents{margin-left: 45px; width: calc(100% - 206px);}
.history-hall-contents .hall-contents-year{position: relative;}
.history-hall-contents .hall-contents-year > span{font-size: 26px; background-color: #ffffff; padding-right: 15px;}
.history-hall-contents .hall-contents-year:after{content: ''; height: 2px; width: 100%; display: block; background-color: #005bb4; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: -1;}
.history-hall-contents > div > p{font-size: 16px; margin-bottom: 0; text-indent: -77px; margin-left: 77px;}
.history-hall-contents > div > p:last-child{margin-bottom: 30px;}
.history-hall-contents > div > p > span{margin-right: 37px;}
@media screen and (max-width: 576px) {
    .history-hall-contents{margin-left: 0; width: 100%;}
}