@charset "utf-8";
body { background: #f8f8f8; }
.wrap { margin: 0 auto; width: 1000px; }
#header { position: relative; clear: both; width: 100%; z-index: 1; }
#header .util { background: #24408e; text-align: right; }
#header .util a { display: inline-block; margin-right: -5px; padding: 5px 12px; border-right: 1px solid #5066a5; color: #fff; }
#header .util a:first-child { border-left: 1px solid #5066a5; }
#header .util a:hover { background: #5066a5; }
#header .top-logo { display: block; position: absolute; left: 0; top: 10px; max-width: 200px; max-height: 60px; line-height: 55px; text-align: center; }
#header .top-logo img { max-width: 200px; max-height: 60px; vertical-align: middle; }

#gnb { padding-bottom: 4px; background: url('/img/gnb_bg.png') left bottom repeat-x; }
#gnb .wrap { position: relative; }
#gnb ul.d1 { margin-left: 210px; }
#gnb ul:after { content: ""; clear: both; display: block; }
#gnb ul.d1 > li { position: relative; float: left; width: 16.666%; text-align: center; }
#gnb ul.d1 > li > a { display: inline-block; padding: 25px 5px 25px 5px; font-size: 16px; font-weight: bold; }
#gnb .d2 { display: none; position: absolute; left: 0; top: 65px; width: 150px; background: #24408e; }
#gnb .d2 a { display: block; padding: 6px 0; color: #fff; }
#gnb .d2 a:hover { font-weight: bold; background: #192d64; }

#visual { position: absolute; left: 0; top: 110px; background: #d6dadd; width: 100%; height: 800px; z-index: -1; }
#visual ul { position: relative; height: 800px; overflow: hidden; }
#visual li { position: absolute; left: 0; top: 0; width: 100%; height: 800px; background-position: top center; background-repeat: no-repeat; opacity: 0; transition: opacity 2s 2s; }
#visual li:first-child { float: left; opacity: 1; }

#mainContent { margin-top: 370px; background: #fff; }
#mainContent:after { content: ""; clear: both; display: block; }
#mainContent .top-cont { position: relative; margin: 0 auto; width: 1000px; }
#mainContent .top-cont .pr-video { position: absolute; right: 0; top: -245px; width: 400px; height: 224px; }
#mainContent .top-cont .link-shop { position: absolute; right: 0; top: -350px; width: 400px; height: 70px; background: #b60081; }
#mainContent .row1 { width: 100%; min-width: 1000px; background: #24408e url('/img/mainContBg_row1.gif') top center repeat-y; }
#mainContent .row2 { width: 100%; min-width: 1000px; background: #ebebeb url('/img/mainContBg_row2.gif') top center repeat-y; }
#mainContent .wrap-row { margin: 0 auto; width: 1000px; }
#mainContent .wrap-row:after { content: ""; clear: both; display: block; }
#mainContent .cont { float: left; }
#mainContent .cont-title { position: relative; padding: 20px 20px 0 20px; font-weight: bold; font-size: 21px; }
#mainContent .cont-box { padding: 20px; font-size: 14px; }
#mainContent .more { position: absolute; right: 20px; top: 16px; }
#mainContent .cont .link { display: none; margin-top: 13px; }
#mainContent .data { width: 265px; height: 200px; background: url('/img/data_bg2.png') 182px 113px no-repeat; }
#mainContent .join { width: 265px; height: 200px; background: url('/img/join_bg2.png') 171px 109px no-repeat; }
#mainContent .data a,
#mainContent .join a,
#mainContent .intra a{ font-weight: bold; color: #fff; }
#mainContent .program { width: 335px; height: 200px; background: #d8dee4 url('/img/program_bg2.png') 231px 109px no-repeat;}
#mainContent .program-info { padding: 20px 30px; font-size: 18px; font-weight: bold; color: #444; }
#mainContent .program-info p { margin-top: -5px; font-size: 24px; color: #222; letter-spacing: -1px; }
#mainContent .program-info strong { color: #24408e; }
#mainContent .program-link { padding: 0 30px; }
#mainContent .program-link a { display: block; position: relative; margin-bottom: 5px; padding: 7px 13px; width: 130px; border-radius: 3px; background: #24408e; font-size: 13px; font-weight: bold; color: #fff; }
#mainContent .program-link i { position: absolute; right: 13px; top: 7px; font-size: 18px; }
/*
#mainContent .gallery { width: 335px; height: 200px; background: #fff; }
#mainContent .gallery .cont-title { position: relative; padding: 20px 20px 0 20px; font-size: 21px; font-weight: bold; color: #333; }
#mainContent .gallery .more { position: absolute; right: 20px; top: 23px; }
#mainContent .gallery .cont-box { padding: 20px}
#mainContent .gallery ul { height: 110px; overflow: hidden;}
#mainContent .gallery li { position: relative; }
#mainContent .gallery li a { display: block; height: 108px; line-height: 108px; }
#mainContent .gallery .image { float: left; width: 148px; border: 1px solid #e0e0e0; text-align: center; }
#mainContent .gallery li img { width: 100%; }
#mainContent .gallery li .gallery-title { float: right; margin-top: 5px; swidth: 120px; height: 120px; }
#mainContent .gallery li .gallery-title .title { display: block; width: 120px; height: 63px; text-align: left; font-size: 20px;line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#mainContent .gallery li .gallery-title .date { display: block; margin-top: 20px; font-size: 16px; text-align: left; color: #777; line-height: 16px; }
*/
#mainContent .intra { width: 335px; height: 200px; background: #24408e url('/img/intra_bg2.png') 205px 100px no-repeat; }

#mainContent .gallery { width: 400px; height: 200px; background: #ebebeb; }
#mainContent .gallery .more { position: absolute; right: 20px; top: 23px; }
#mainContent .gallery .cont-box { padding: 20px}
#mainContent .gallery ul { height: 110px; overflow: hidden;}
#mainContent .gallery li { position: relative; }
#mainContent .gallery li a { display: block; height: 108px; line-height: 108px; }
#mainContent .gallery .image { float: left; width: 148px; border: 1px solid #e0e0e0; text-align: center; }
#mainContent .gallery li img { width: 100%; }
#mainContent .gallery li .gallery-title { float: right; margin-top: 5px; width: 195px; height: 120px; }
#mainContent .gallery li .gallery-title .title { display: block; height: 63px; text-align: left; font-size: 20px;line-height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#mainContent .gallery li .gallery-title .date { display: block; margin-top: 15px; font-size: 16px; text-align: left; color: #777; line-height: 16px; }

#mainContent .board .cont-box { line-height: 20px; }
#mainContent .board li { padding: 2px 0;  }
#mainContent .board li a { display: block; position: relative; font-size: 13px; font-weight: normal; color: #fff; }
#mainContent .board li .subject { display: block; padding-right: 80px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#mainContent .board li .subject:hover { text-decoration: underline; }
#mainContent .board li .date { position: absolute; right: 0; top: 0; color: #cfd2e1; }
#mainContent .board .no-result { padding: 20px 0; text-align: center; }
#mainContent .notice { width: 400px; height: 200px; background: #24408e url('/img/notice_bg2.png') 205px 93px no-repeat; line-height: 18px; color: #fff; }
/*
#mainContent .bbs { width: 400px; height: 200px; background: #ebebeb url('/img/freeboard_bg2.png') 238px 103px no-repeat; }
#mainContent .bbs li a { color: #000; }
#mainContent .bbs li .date { color: #777; }
*/
#breadcrumb { position: relative; margin-top: -4px; background: #f8f8f8; border-bottom: 1px solid #dfdfdf; z-index: 0; }
#breadcrumb ul:after { content: ""; clear: both; display: block; }
#breadcrumb .d1 > li { position: relative; float: left; border-right: 1px solid #dfdfdf; }
#breadcrumb .d1 > li a { display: block; padding: 11px 25px 9px 25px; /*padding: 11px 60px 9px 25px;*/ font-size: 13px; color: #777; }
#breadcrumb .d1 > li a.big { padding-right: 30px; /*width: 100px;*/ }
#breadcrumb .d1 .home { border-left: 1px solid #dfdfdf; }
#breadcrumb .d1 .home a { padding: 9px 12px; color: #24408e; }
#breadcrumb .d1 .home .fa-home { font-size: 18px; vertical-align: middle; color: #24408e; }
#breadcrumb ul.d1 > li > a .fa-caret-down { position: absolute; right: 20px; top: 13px; font-size: 14px; }
#breadcrumb .d2 { display: none; position: absolute; left: -1px; top: 40px; width: 100%; background: #f8f8f8; border: 1px solid #dfdfdf; border-top: 0; }
#breadcrumb .d2 li a { padding: 6px 60px 6px 25px; border-top: 1px solid #dfdfdf; }
#breadcrumb .d2 li:first-child a { border-top: 0; }

#container { background: #fff; }
#container .wrap:after { content: ""; clear: both; display: block; }
#container .cont-title { padding: 35px 0 14px 0; border-bottom: 1px solid #b8b8b8; font-size: 32px; font-weight: bold; }
#container .cont-title .desc { display: block; font-size: 13px; font-weight: normal; color: #777; }
#container .cont-title.intro { background: url('/img/title_bg_intro.gif') right top no-repeat; }
#container .cont-title.bbs { background: url('/img/title_bg_news.gif') right top no-repeat; }
#container .cont-title.business { background: url('/img/title_bg_business.gif') right top no-repeat; }
#container .cont-title.program { background: url('/img/title_bg_program.gif') right top no-repeat; }
#container .cont-title.login { background: url('/img/title_bg_login.gif') right top no-repeat; }
#container .cont-title.map { background: url('/img/title_bg_sitemap.gif') right top no-repeat; }

.snb-wrap { float: left; margin-top: 40px; width: 190px; }
.snb-wrap .title { margin-bottom: 15px; padding: 0 10px;font-size: 24px; font-weight: bold; letter-spacing: -1px; color: #444; }
#snb { padding-top: 20px; border-top: 2px solid #222; }
#snb li a { display: block; padding: 10px 0 10px 30px; border-bottom: 1px solid #ccc; background: url('/img/snb_off.png') 15px center no-repeat; font-size: 14px; font-weight: bold; color: #666; }
#snb li.on a, #snb li:hover a { background: #24408e url('/img/snb_on.png') 15px center no-repeat; color: #fff; }

#content { float: right; position: relative; width: 750px; }

.family-banner { padding: 10px 0; border-top: 1px solid #dfdfdf; background: #fff; }
.family-banner .link:after { content: ""; clear: both; display: block; }
.family-banner .link li { float: left; width: 20%; text-align: center; }
.family-banner .link li img { height: 30px; }
#footer { padding: 20px 0; background: #f8f8f8; border-top: 1px solid #dfdfdf; }
#footer .wrap { position: relative; }
#footer .footer-logo { display: block; position: absolute; left: 0; top: 0; max-width: 160px; max-height: 45px; text-align: center; }
#footer .footer-logo img { max-width: 160px; max-height: 45px; vertical-align: middle; }
#footer .family-site { position: absolute; right: 0; top: 0; }
#footer .info { padding: 0 100px 0 180px; color: #888; }

/* 팝업 ------------------------------------------------ */
#popup .pop-header { padding: 10px 20px; background: #24408e; font-size: 18px; font-weight: bold; color: #fff; }
#popup .pop-container { padding: 20px; }

#join > .title { margin-bottom: 15px; font-size: 26px; text-align: center; }
#join > .title span { display: inline-block; padding: 10px 20px; border-bottom: 2px solid #333; }
#join .join-type { margin: 50px auto; width: 496px; }
#join .join-type:after { content: ""; clear: both; display: block; }
#join .join-type li { float: left; text-align: center; }
#join .join-type li a { display: block; padding: 30px 0; width: 230px; border: 4px solid #ccc; }
#join .join-type li:hover a { border-color: #24408e; }
#join .join-type li:first-child { margin-right: 20px; }
#join .join-type li span { display: block; margin-top: 5px; font-size: 18px; font-weight: bold; }
#join .terms .agree-check { position: relative; margin-top: 30px; font-size: 14px; font-weight: bold; }
#join .terms .agree-check .checkbox { position: absolute; right: 0; top: 0; }
#join .terms .agree-check input:focus { border: none; }
#join .terms .agree-check input[type="checkbox"] { overflow: hidden; height: 0; width: 0; border: 0; border-radius: 0; background: none; appearance: none; -webkit-appearance: none; }
#join .terms .agree-check label { padding-left: 25px; height: 20px; background: url("/img/icon_checkbox.png") 0 0 no-repeat;}
#join .terms .agree-check input[type="checkbox"]:checked + label { background-position: 0 -30px; }
#join .terms .agree-cont { margin-top: 5px; border: 1px solid #ccc; }
#join .terms .agree-cont .title { padding: 5px 10px; background: #f7f7f7; border-bottom: 1px solid #e8e8e8; font-size: 14px; font-weight: bold; }
#join .terms .agree-cont .cont { padding: 5px 10px; height: 180px; overflow-y: scroll; }
#join .signup .title { margin-top: 15px; font-size: 14px; font-weight: bold; }
#join .signup .title .etc { margin-left: 5px; font-size: 12px; font-weight: normal; }
#join .signup .table-row th { letter-spacing: -1px; }
#join .signup .password-check { font-size: 11px; color: #e9422e; }
/* 지역선택 드롭다운 ------------------------------------------------ */
#areaSelect .area { position: relative; margin-top: 5px; padding: 5px 10px; border: 1px solid #ccc; }
#areaSelect .area:first-child { margin-top: 0; }
#areaSelect .city { padding: 2px 0; font-size: 14px; font-weight: bold; }
#areaSelect .city input { margin-top: -2px; }
#areaSelect .city .show-local { position: absolute; right: 10px; top: 5px; margin-left: 5px; padding: 2px 8px; border: 1px solid #2e6da4; font-size: 12px; color: #2e6da4; }
#areaSelect .city .show-local:hover { background: #2e6da4; color: #fff; }
#areaSelect .area .checkbox-group { display: none; margin-top: 3px; padding: 5px 0; width: 100%; border-top: 1px dotted #ccc; }
#areaSelect .area .checkbox-group input, 
#areaSelect .area .checkbox-group label { margin: 2px 0; }
#areaSelect .area .checkbox-group label { width: 80px; }
#areaSelect .select-area { padding: 3px 8px; border: 2px solid #2e6da4; }
#areaSelect .select-area strong { display: block; font-size: 14px; color: #2e6da4; }
#areaSelect .select-area .desc span { display: inline-block; margin: 2px 3px; padding: 1px 5px; border-radius: 3px; border: 1px solid #46b8da; background: #5bc0de; color: #fff; }

/* 테이블 ------------------------------------------------ */
.td-pad { padding: 4px 10px !important; }
.td-pad .file-group li { margin-top: 4px; }
.td-pad .file-group li:first-child { margin-top: 0; }
.td-pad .file-group label { width: 100px; }

/* ETC ------------------------------------------------ */
.summary-area { position: relative; padding: 5px 0; }

.guide-list { margin-top: 10px; padding: 15px 20px; border: 1px solid #e7e8f0; background: #fafafa; }
.guide-list strong { display: block; }

.point-input { margin-right: 3px; font-size: 20px; font-weight: bold; vertical-align: middle; color: #e9422e; line-height: 0; }
.bar { margin: 0 10px; color: #ccc; }
.readonly { border-color: #ccc; background: #f6f6f6; color: #555; cursor: pointer; }

/* 로그인 ------------------------------------------------ */
#content.wrap-input { width: 1000px !important; }
.wrap-login { margin: 100px 0 200px 100px; padding: 20px; padding-left: 260px; background: url('/img/login_img.gif') left center no-repeat; }
.wrap-login:after { content: ""; clear: both; display: block; }
.wrap-login .img { float: left; }
.wrap-login .form { position: relative; margin: 0 80px 0 40px; padding: 20px 0 20px 50px; border-left: 1px solid #ddd; }
.wrap-login .form .title { display: block; margin-bottom: 20px; font-size: 16px; font-weight: bold; color: #24408e; }
.wrap-login .form-group { margin-top: 7px; }
.wrap-login .form-group .text { padding: 7px 10px; width: 250px; border: 2px solid #ddd; font-size: 14px; }
.wrap-login .form #btnLogin { position: absolute; right: 20px; top: 64px; width: 140px; height: 85px; font-size: 18px; letter-spacing: 2px; }

.wrap-login .link { margin: 20px 15px 0 0; padding: 15px 10px 0 10px; border-top: 1px dotted #ccc; }
.wrap-login .link strong { font-weight: bold; font-size: 14px; vertical-align: middle;  }
.wrap-login .link .btn { margin-left: 18px; }


/* 사이트맵 ------------------------------------------------ */
.sitemap { padding: 50px 0 100px 0; width: 1000px !important;}
.sitemap ul { display: table; width: 100%; }
.sitemap li { display: table-cell; width: 20%; padding: 10px; text-align: center;  }
.sitemap .title { display: block; padding: 8px 0; background: #24408e; font-size: 17px; font-weight: bold; color: #fff; }
.sitemap li div { padding: 15px 20px; height: 210px; border: 2px solid #24408e; }
.sitemap li div a { display: block; margin-bottom: 5px; font-size: 13px; }
.sitemap li div a:hover { font-weight: bold; text-decoration: underline; }

/* 연합회소개 ------------------------------------------------ */
/* 인사말 */
.introduce { position: relative; padding: 50px 0 100px 0; font-size: 14px; }
.introduce .pic { position: absolute; right: 10px; top: 10px; }
.introduce .desc { padding: 30px 0 50px 0; line-height: 22px; }
/* 연혁 */
.history { padding: 50px 0 100px 0; }
.history .history-box { margin-bottom: 70px; }
.history .history-box:after { content: ""; clear: both; display: block; }
.history .year { float: left; }
.history .detail { float: left; margin: 30px 0 0 30px; font-weight: bold; }
.history .month-box { position: relative;  }
.history .month-box .month { position: absolute; left: 0; top: -2px; font-size: 24px; }
.history .month-box .list { padding-left: 40px; font-size: 14px; }
.history .month-box .list li { margin-bottom: 10px; padding: 5px; border-bottom: 1px dotted #ccc; }
/* 조직도 */
.organization { padding: 50px 0 100px 0; text-align: center; }
/* 정관 */
.incorporation { padding: 50px 0 100px 0; }
.incorporation > .title { font-size: 26px; font-weight: bold; text-align: center; color: #24408e; }
.incorporation .section { margin: 30px 0; }
.incorporation .section .title { font-size: 20px; font-weight: bold; text-align: center; }
.incorporation .section .title span { display: block; margin: 20px 0; font-size: 16px; color: #444; }
.incorporation .desc { margin-top: 10px; line-height: 22px; font-size: 13px; }
.incorporation pre.desc { white-space: pre-wrap; font-family:'Malgun Gothic', '맑은 고딕', '돋움',dotum,sans-serif,Verdana; }
.incorporation .desc .inner { margin: 0 20px 5px 20px; line-height: 18px; }
.incorporation .desc .inner p { margin: 0 20px; }
.incorporation .promoter { margin: 60px 0; text-align: center; font-size: 26px; font-weight: bold; color: #555; }
/* ci, bi */
.cibi-info { padding: 50px 0 100px 0; }
.cibi-info .tab:after { content: ""; clear: both; display: block; }
.cibi-info .tab li { float: left; width: 50%; }
.cibi-info .tab li a { display: block; padding: 10px 0; border: 1px solid #ccc; border-left: 0; font-size: 14px; font-weight: bold; text-align: center; }
.cibi-info .tab li:first-child a { border-left: 1px solid #ccc; }
.cibi-info .tab li.on a { background: #24408e; border-color: #24408e; color: #fff; }
.cibi-info .cibi-cont { margin-top: 40px; }
.cibi-info .cibi-cont > div { display: none; }
/* 협동조합이란 */
.coop-intro, .coop-establish { padding: 50px 0 100px 0; }
.coop-intro .tab:after { content: ""; clear: both; display: block; }
.coop-intro .tab li { float: left; width: 33.3%; }
.coop-intro .tab li a { display: block; padding: 10px 0; border: 1px solid #ccc; border-left: 0; font-size: 14px; font-weight: bold; text-align: center; }
.coop-intro .tab li:first-child a { border-left: 1px solid #ccc; }
.coop-intro .tab li.on a { background: #24408e; border-color: #24408e; color: #fff; }
.coop-intro .coop-cont { margin-top: 40px; }
.coop-intro .coop-cont > div { display: none; }
/* 구성원 소개 */
.member { padding: 50px 0 100px 0; }
.member .search .text { width: 250px; }
/* 찾아오시는 길 */
.map { padding: 50px 0 100px 0; font-size: 13px; }
.map .address p { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #ccc; }
.map .arr { display: inline-block; width: 10px; height:10px; background: url('/img/dot_org.gif') left center no-repeat; }
.map .wrap-iframe iframe { margin-top: 10px; }

/* 꽃나누리 ------------------------------------------------ */
.program-img { padding: 50px 0 100px 0; ; }
/* 꽃나누리체 */
.font-down .btn-blue { position: absolute; right: 10px; top: 175px; padding: 15px 0; width: 200px; font-size: 14px; }

.font-down .banner1 { position: absolute; right: 10px; top: 130px; padding: 10px 0; width: 200px; font-size: 14px; }
.font-down .banner2 { position: absolute; right: 10px; top: 180px; padding: 10px 0; width: 200px; font-size: 14px; }
.font-down .banner3 { position: absolute; right: 10px; top: 230px; padding: 10px 0; width: 200px; font-size: 14px; }

/* 꽃나누리 신청 */
.program-down .title { position: relative; margin-top: 50px; }
.program-down .title .button { position: absolute; right: 10px; top: 20px; }
/*.program-down .title .button .btn { margin-left: 4px; padding: 20px 0; width: 150px; font-size: 16px; }*/
.program-down .title .button .btn { margin-left: 4px; padding: 15px 0; width: 125px; font-size: 14px; }
.program-down .down-wrap { padding: 10px 0 50px 0; }
.program-down .down-wrap .table { margin-top: 5px; }
.program-down .down-wrap .table th { border-top: 1px solid #e8e8e8; }
.program-down .down-wrap .table td { text-align: center; }

/* 이용현황 */
.program-state {}
.program-state .state-list { border: 3px solid #24408e; }
.program-state .state-list ul { display: table; width: 100%; table-layout: fixed; }
.program-state .state-list li { display: table-cell; border-left: 1px solid #ccc; text-align: center; }
.program-state .state-list li:first-child { border-left: 0; }
.program-state .state-list .info dt { padding: 7px 0; border-bottom: 1px solid #24408e; background: #f9f9f9; font-size: 16px; font-weight: bold; letter-spacing: -1px; }
.program-state .state-list .info dd { padding: 20px 0; font-size: 14px; font-weight: bold; }
.program-state .state-list .info .link { padding: 13px 0; }
.program-state .state-list .info dd strong { font-size: 30px; }
.program-state .state-list .info dd a { display: block; }
.program-state .state-list .info dd a:hover { text-decoration: underline; color: #24408e; }
.program-state .state-list .info dd a i { display: inline-block; margin-left: 70px; font-size: 15px; }
.program-state .regist-list { margin-top: 25px; }
.program-state .regist-list .title { font-size: 18px; font-weight: bold; }
.program-state .regist-list .title .use-pc { margin-left: 7px; font-size: 14px; }
.program-state .regist-list .title .use-pc em { font-size: 16px; font-weight: bold; }
.program-state .regist-list .no-result { padding: 20px 0; }

/* 사업소개, 게시판 ------------------------------------------------ */
.business-img, .bbs-list, .bbs-view { padding: 50px 0 100px 0; }
.bbs-list .gallery li { width: 175px !important;}
.bbs-list .gallery .pic img { width: 175px !important; height: 175px !important; }

.comment .cmt-write .textarea { width: 620px !important; }


.intranet_banner { position: absolute; right: 10px; top: 0px;}