@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500&family=Noto+Serif+KR:wght@500&display=swap');


#wrap {width:100%; margin:auto; background:#f5f5f3; background:url('../images/main_bg.png') repeat; overflow-x:hidden; }

#header {width:100%; min-width: 1004px;}
.gnb_area {width:100%; height:70px;background:#fff;opacity:0.79; box-shadow: 0px 2px 5px 0px #666 ;position:fixed; top:0px; left:0px; z-index:920; /*border-top: 4px solid #3378c1;*/}
.gnb_area .gnb {width:990px; margin:auto; text-align:left;}
.gnb_area .gnb .logo {float:left; padding-top:8px; width:180px}
.gnb_area .gnb .logo img{width:100%;}
.login_area {float:right; padding-top:22px;}

.login_area ul li a{color:#333;}

.header_contents {width:100%;  margin:auto; position:relative;}



.main_banner{width:1920px;  position:absolute; top: 0; left:50%;}




.lnb {width:990px; margin:auto; height:80px; margin-top: 406px; position:absolute;z-index: 50;}
.lnb ul li {float:left;}

#container {}

.container_contents {width:990px; margin:55px auto auto auto; position:relative; }
.lastest_section1 {width:100%; height:215px; box-sizing: border-box;}
.tit_img{padding-top:26px; padding-left:25px;}
.more{position: absolute; top: 15px; right: 15px;}

.monthly_book {float:left; width:320px; height:219px; background:url('../images/main_con_bg033.jpg') no-repeat; height:219px; margin-right: 13px; padding: 20px; box-sizing: border-box;}
.book_table {margin-left:12px; margin-top:20px; position:relative;}
.book_img {position:absolute; top:3px; left:43px;}
.book_img img {width:71px; height:101px; border:1px solid #999;}
.book_tit {position:absolute; top:20px; left:70px; }
.book_tit h5{font-size: 20px; line-height: 20px; margin-bottom: 10px; font-family: 'Noto Serif KR'; font-family: 'Noto Serif KR'; font-weight: 500; color: #333;}

.new_member{float:left; width:323px; height:219px; background: #fff; margin-right: 13px; padding: 15px 20px; box-sizing: border-box;}
.new_member .new_member_tit{width: 43px; float: right; text-align:right;}
.new_member .new_member_tit a{margin-right:2px;}
.new_member .new_member_tit .page_index{width: 25px; margin: 2px 0 0 1px; overflow:hidden; }
.new_table{margin-top:20px; margin-left:15px;}
.new_table tr td {text-align:center; letter-spacing: -0.4px;}
.new_table tr td img{/*border:1px solid #bbb;*/}
.new_table .new_people_name td{height: 44px; line-height: 1.3;}

.notice {float:left; width:321px; height:219px; background: #f7f6ed; padding:20px; box-sizing: border-box;}
.notice_table {margin-top:10px; line-height: 2.8; display: table; width: 100%;}
.notice_table tr td {height:25px; letter-spacing: -0.4px; color:#797979; border-bottom: #ccd3c7 dashed 1px;}
.notice_table tr td a{display: inline-block; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;height: 26px;}


.notice_table tr td a:hover{color:#9092be !important;}
.notice_table tr .notice_date {font-family:tahoma; font-size:0.88em; color:#aeaeae;}


.lastest_section2{width:100%; /*height:305px;*/ margin-top: 16px; margin-bottom: 25px;}

.activity{float:left; width:320px; height:219px; background: #fff; margin-right: 13px; position: relative;}
.activity .activity_tit{width: 44px;position: absolute; z-index: 99; right: 15px; top: 15px; }
.activity .activity_tit a{margin-right:2px;}
.activity .activity_tit .page_index{width: 25px; margin: 2px 0 0 1px; overflow:hidden; }


.gallery{float:left; width:323px; height:219px; background: #fff; margin-right: 12px; padding:20px; box-sizing: border-box;}
.gallery .gallery_tit a{width:9px; height:9px; background: url('../images/icon_off.png') no-repeat; margin-left: 5px;}
.gallery .gallery_tit a.on{background: url('../images/icon_on.png') no-repeat;}

.shortcut {float:left; width:321px; height:219px; background: #fff; padding:20px; box-sizing: border-box;}
.shortcut_table {    width: 100%; margin-top: 20px; box-sizing: border-box; border: 0; display: table;}
.shortcut_table tr td {text-align:center; height:70px; letter-spacing: -0.4px;}
.shortcut_table svg{
    color: #3e7f98;
}
#footer {width:100%; min-height:100px; height:100px; background:#fcfcfc;}
.coperation {width:100%; height:60px; border-bottom:1px solid #dfdfdf; background:#fff; background: url('../images/main_con_bg04.png') repeat-x;}
.coperation ul {width:1004px; margin:auto; padding-top:15px;}
.coperation ul li {float:left; margin-left:55px; display:inline;}
.footer_contents {width:1004px; margin:0 auto; padding:23px 0px; color:#d8d5cc;}
.footer_contents ul {}
.footer_contents ul li {float:left;}
.footer_contents ul .flogo {width:15%}
.footer_contents ul .flogo img{width:100%}
.footer_contents ul .address {width: 85%;float: left;line-height: 160%;padding: 0 20px 20px 20px;box-sizing: border-box;}


.lnb {height:80px; position:absolute; }


.lnb_over{width:990px; margin:auto; position:relative;z-index: 200;}
.lnb_over01 {position:absolute; top:-456px; width:330px; z-index:200;}
.lnb_over02 {position:absolute; top:-456px; left:330px; width:330px; z-index:200;}
.lnb_over03 {position:absolute; top:-456px; left:660px;width:330px; z-index:200;}
/* 		.lnb_on {z-index: 100;} */
.lnb_on ul li {float:left;}
.lnb_smenu {background:white; width:330px; height:380px; top: 486px; position: absolute; border-left:1px solid #ddd; border-right:1px solid #ddd; border-bottom:1px solid #ddd; box-sizing: border-box;}
.lnb_smenu ul {padding:40px 30px;}
.lnb_smenu ul li {border-bottom:1px solid #ddd; height:40px; line-height:39px; text-indent:10px;}





#wrap {width:100%; margin:auto;overflow:hidden}
#header {width:100%; }
.gnb {width:990px; margin:auto; text-align:left;}
.login_area ul li {float:left; padding-left:24px; font-size:16px; letter-spacing: -1px; font-weight: 400;}
.btn_admin {/*margin-left:15px;*/ display:inline;}
.btn_admin a {font-weight:500; color:#308d5e!important;}
.main_banner{height:406px; text-align:center; position:relative;}
.banner_contents {position:absolute;  left:-340px; z-index:10;}
.banner_prev {position:absolute; z-index:20; top:190px; left:0px;}
.banner_next {position:absolute; z-index:20; top:190px; right:0px;}
.banner_stats {position:absolute; z-index:20; bottom:30px; right:50px; text-align:right;}
.banner_stats img {padding-left:5px;}
.lnb_area {width:100%;  }
.lnb {margin:auto; height:80px; position:absolute; }
.lnb_over{width:990px; margin:auto; position:relative;z-index: 200;}

/* 		.lnb_on {z-index: 100;} */
.lnb_on ul li {float:left;}


/* 메인 에니메이션을 위한 부분 */
#fla {height:406px; width:990px; margin:0 auto; position:relative;}
#fla li {position:relative;}
/* 메인 에니메이션을 위한 부분 끝 */

.banner_btn {height:100%;position:absolute;cursor:pointer;}
.banner_btn img {margin:190px 15px 0px 15px;}
.banner_img {width:226px; height:129px; float:left; text-align:center;}
.banner_img img {padding-top:20px;}
.banner_sel_img { width:228px; height:129px; float:left; text-align:center;}
.banner_sel_img img {padding-top:20px;}


/*20210219 추가*/
.header_contents{height: 550px;}
.header_contents .flexslider{border: 0; margin: 0;}
.header_contents .slides li{height: 550px; background-size: cover; cursor:pointer; background-position: center center;}


.subheader_contents{height: 200px;}
.subheader_contents .sub_banner_img{height: 200px;}


.lnb_area .lnb{top:-50px}
.lnb_area .lnb .snb_icon{width:110px; height: 80px; text-align: center; color:#fff; cursor: pointer;}
li.snb_icon svg, .lnb_area .lnb_on .snbb_icon svg {
    display: block;
    margin: 10px auto 8px;
    height: 30px;
}


.lnb_area .lnb_on .snb_icon{width:110px; height: 80px; text-align: center; color:#fff; cursor: pointer;}
.lnb_area .lnb .snb_icon i, .lnb_area .lnb_on .snb_icon i{display: block; font-size: 28px;margin: 15px 0 5px;}


.lnb_area .lnb .snbb_icon{width:110px; height: 80px; text-align: center; color:#fff; cursor: pointer;}
.lnb_area .lnb_on .snbb_icon{width:110px; height: 80px; text-align: center; color:#fff; cursor: pointer;}
.lnb_area .lnb .snbb_icon i, .lnb_area .lnb_on .snbb_icon i{display: block; font-size: 28px;margin: 15px 0 5px;}


.snb_1, .snb_2, .snb_3{background-color: #ac2f35;}
.snb_4, .snb_5, .snb_6{background-color: #3f9797;}
.snb_7, .snb_8, .snb_9{background-color: #3e7f98;}

.lnb_on{height: 80px;}
.lnb_smenu_sub{display: none; width:100%; box-sizing: border-box;}

.lnb_txt{height: 406px}
.lnb_txt .lnb_line{height: 6px; }
.lnb_txt .lnb_gr_ttl{height: 200px; background-color: #fff; text-align: center; display: table; width:100%;}
.lnb_txt .lnb_gr_ttl h4{font-size: 30px; line-height: 34px; display: table-cell; vertical-align: middle; font-weight: 500; letter-spacing: -2px;}
.lnb_txt .lnb_gr_ttl h4 b{font-weight: 500;}
.lnb_txt .lnb_gr_cnt{height: 200px; background-color: #F4F1EC;}
.lnb_txt .lnb_gr_cnt .txt ~ svg.svg-inline--fa.fa-church{color: #ab292f;}
.lnb_txt .lnb_gr_cnt .txt ~ svg.svg-inline--fa.fa-chalkboard{color: #3f9797;}
.lnb_txt .lnb_gr_cnt .txt ~ svg.svg-inline--fa.fa-chimney {color: #3e7f98;}
.lnb_txt .lnb_gr_cnt .txt{padding: 30px; display: inline-block; width: 180px;}
.lnb_txt .lnb_gr_cnt .txt ~ svg{
    height:3.2rem;
}
.lnb_txt .lnb_gr_cnt i{font-size: 60px;}


/*정충상 추가*/

.sub_contents {width:990px; min-height:300px; margin:55px auto auto auto; position:relative; background-color: #fff; padding: 30px; box-sizing: border-box;     border-radius: 10px; margin-bottom: 50px;}
.container_title{ padding-top: 60px;}
.container_title h3{font-size: 36px; text-align: center; font-family: 'Noto Serif KR'; font-weight: 500;}

.coperation ul li{background: #eee; width: 12.5%; margin: 0; text-align: center; padding: 7px 0;}
.coperation ul li a{color:#999;}


.lastest_section1 .h4, .lastest_section2 .h4{font-size: 16px; color: #999; font-weight: 500; letter-spacing: -1px;}
.gallery_img{width: 100%; height: 140px; margin-top: 10px; background-size: cover!important;}


.event_img{width: 100%; height: 219px;background-size: cover!important;}
.event_title{position: absolute; bottom: 0; padding: 20px; width: 100%; height: 55px; color: #fff; box-sizing: border-box; text-align: center; font-size: 15px;}
.shortcut_table i{font-size: 30px; color:#3e7f98; margin-bottom: 5px;}
.shortcut_table td svg{
    height:2rem;
}


.flex-control-nav{bottom: 60px!important;}



@media screen and (max-width: 720px){

    /*서브*/

    #header{min-width: auto}
    .gnb_area{height: 60px;}
    .gnb_area .gnb .logo{margin-left: 10px; padding-top: 12px;}
    .gnb_area .gnb .logo img{width:130px;}
    .lnb_area{display: none}
    .header_contents{width:420px; height: 300px;}
    .header_contents .flexslider .slides li{background-position: center center;}

    .flex-direction-nav{display: none;}

    .header_contents .slides li{height: 355px;}

    .container_contents{width:100%}



    /*메인만*/
    .monthly_book{width: 100%;box-sizing: border-box;  position: relative;}
    .new_member{width: 100%; box-sizing: border-box; position: relative;}
    .notice{width: 100%; box-sizing: border-box; position: relative;}
    .activity{width: 100%; box-sizing: border-box;  position: relative;}
    .gallery{width: 100%; box-sizing: border-box;  position: relative;}
    .shortcut{width: 100%; box-sizing: border-box;  position: relative;}

    .coperation{height: 165px;}
    .coperation ul{width:100%;}
    .coperation ul li{width: 50%;}

    .wrappingElement {width: 50px; height: 50px; background: #ccc;position: absolute;right: 0;}




    /* 게시판 */
    .container_title{padding-top: 40px;}
    .sub_contents {padding:15px!important;}
#container{padding: 10px;}

}

/* 로딩 표시 */
#loader-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 30%);
}
#loader-mask .loader-dot-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    transition: .2s linear;
    border-radius: 10%;
}
.loader-dot, .loader-dot:before, .loader-dot:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    animation-fill-mode: both;
    animation: bblFadInOut 1.8s infinite ease-in-out;
}
.loader-dot {
    color: #FFF;
    font-size: 7px;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
}
.loader-dot:before,
.loader-dot:after {
    content: '';
    position: absolute;
    top: 0;
}
.loader-dot:before {
    left: -3.5em;
    animation-delay: -0.32s;
}
.loader-dot:after {
    left: 3.5em;
}

@keyframes bblFadInOut {
    0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em }
    40% { box-shadow: 0 2.5em 0 0 }
}