@charset "utf-8";

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body, html {margin: 0; padding: 0; font-family: 'SUIT-Regular';}
h1,h2,h3,h4,h5,h6,span,p,a,strong,ul,li{margin: 0;padding: 0; word-break: keep-all; word-wrap: break-word; font-family: 'SUIT-Regular'; font-size: 16px; color: #111; letter-spacing: -.5px;}
a:hover {text-decoration: none;}
ul, li {list-style: none; margin: 0; padding: 0; box-sizing: border-box;}
table, thead, tbody, tr, td, th {border-collapse:collapse; font-family: 'SUIT-Regular'; box-sizing: border-box; word-break: keep-all; word-wrap: break-word;}
input, label {box-sizing: border-box;}

.loading {position: fixed; width: 100%; height: 100vh; background-color: #fff; z-index: 10;}
.x {max-width: 1200px; margin: auto;}
/* top_button */
    .top_button {display: none;}
    .top_button_wrap {width: 50px; height: 50px; background-color: #fff; box-shadow: 0px 4px 8px rgba(0, 0, 0, .3); border-radius: 100%; cursor: pointer; padding: 15px; position: fixed; right: 30px; bottom: 140px; z-index: 10; display: flex; justify-content: center; align-items: center;}
    .top_button_wrap > i {font-size: 30px; font-weight: bold;}

/* header */
header {position: fixed; width: 100%; height: 122px; left: 0; top: 0; z-index: 5; background-color: #fff;}
.h_wrap { border-bottom: 1px solid #eee; background-color: #fff;}
    .tnb {background-color: #e1e1e1; padding: 8px 0;}
    .tnb a {font-size: 14px; padding: 0 30px; position: relative;}
    .tnb a:first-child {padding-left: 0;}
    .tnb a:last-child {padding-right: 0;}
    .tnb a:not(:last-child)::after { content:''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50%; background-color: #b7b7b7;}

        .tnb_wrap {width: 1200px; margin: auto; text-align: right;}
        
    .gnb {height: 85px; background-color: #fff; width: 1200px; margin: auto; position: relative; display: flex; justify-content: flex-end; align-items: center; padding-left: 165px;}
        .logo {width: 165px; height: 135px; line-height: 135px;  position: absolute; left: 0; top: -36px; box-shadow: 0px 5px 15px rgba(0, 0, 0, .075); border-radius: 0px 0px 10px 10px; background-color: #fff; text-align: center; z-index: 3;}
        .menu {margin: auto; height: 85px; position: relative; width: 100%;}
        .menu {display: flex; justify-content: center; align-items: center; height: 100%;}
        .menu a {text-align: center; font-size: 22px; font-weight: bold; padding: 0 30px;}
            
        .youtube {height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #d33333; width: 140px; text-align: center;}
        .youtube i {font-size: 24px;}
        .youtube i,
        .youtube p {color: #fff; font-family: 'SUIT-Regular';}

.h_cover {position: absolute; left: 0; top: 122px; width: 100%; background-color: #fff; z-index: 1; overflow: hidden; height: 0px;}
    ul.first {display: flex; justify-content: space-between; width: 1200px; margin: auto; padding: 70px 0; position: relative; padding-left: 300px;}
    ul.first::before {content: ''; position: absolute; left: -55px; bottom: 0; background: url('../img/main/hand.png')no-repeat bottom / contain; width: 390px; height: 365px;}
    ul.first li {flex:  1; padding: 0 20px; border-left: 1px solid #e5e5e5;}
    ul.first a {display: block; text-align: left; font-family: 'SUIT-Regular'; font-size: 20px; font-weight: bold; margin-bottom: 15px;}

    ul.secocnd li {border-left: 0; padding: 0;}
    ul.secocnd a {font-size: 18px; color: #888; padding: 5px 7px; margin-bottom: 0; font-weight: 500; width: fit-content;}
    ul.secocnd a:hover {background-color: #215aa5; color: #fff; border-radius: 5px;}
        
.h_bg {position: fixed; left: 0; top: 0; width: 100%; height: 100vh; z-index: 3; background-color: rgba(0, 0, 0, .6); display: none;}
/* container */
.main_contents {max-width: 1920px; margin: auto; overflow: hidden; padding-top: 122px;}
.sub_contents {max-width: 1200px; margin: auto; overflow: hidden; padding-top: 122px; padding-bottom: 80px; min-height: calc(100vh - 442px);}
    .n_contents {max-width: 1200px; margin: auto; padding: 50px 0;}
    .w_contents {max-width: 1920px; margin: auto;}
    .v_content {max-width: 1920px; overflow: visible;}

/* visual */
.visual img {width: 100%;}

/*dock bar*/
    .dock_bar { border-radius: 10px; box-shadow: 0px 5px 15px rgba(0, 0, 0, .2); background-color: #fff; margin-top: -130px; position: relative; z-index: 1; overflow: hidden; margin-bottom: 80px;}
    .dock_bar ul {display: flex; justify-content: space-between; align-items: center;}
    .dock_bar li {flex: 1;}
    .dock_bar li p {font-size: 18px; text-align: center; font-weight: bold;}
    .dock_bar li:hover {background-color: #215aa5;}
    .dock_bar li:hover p {color: #fff;}
    .dock_bar a {display: flex; justify-content: center; align-items: center; flex-direction: column; height: 180px;}

    .dock_bar li .dock_img {background-position: center !important; background-repeat: no-repeat !important; height: 100px; width: 120px;}
    .dock_bar li:nth-child(1) .dock_img {background:url('../img/main/main_icon_01.png');}
    .dock_bar li:nth-child(2) .dock_img {background:url('../img/main/main_icon_02.png');}
    .dock_bar li:nth-child(3) .dock_img {background:url('../img/main/main_icon_03.png');}
    .dock_bar li:nth-child(4) .dock_img {background:url('../img/main/main_icon_04.png');}
    .dock_bar li:nth-child(5) .dock_img {background:url('../img/main/main_icon_05.png');}
    .dock_bar li:nth-child(6) .dock_img {background:url('../img/main/main_icon_06.png');}
    .dock_bar li:nth-child(7) .dock_img {background:url('../img/main/main_icon_07.png');}

    .dock_bar li:nth-child(1):hover .dock_img {background:url('../img/main/main_icon_01_ov.png');}
    .dock_bar li:nth-child(2):hover .dock_img {background:url('../img/main/main_icon_02_ov.png');}
    .dock_bar li:nth-child(3):hover .dock_img {background:url('../img/main/main_icon_03_ov.png');}
    .dock_bar li:nth-child(4):hover .dock_img {background:url('../img/main/main_icon_04_ov.png');}
    .dock_bar li:nth-child(5):hover .dock_img {background:url('../img/main/main_icon_05_ov.png');}
    .dock_bar li:nth-child(6):hover .dock_img {background:url('../img/main/main_icon_06_ov.png');}
    .dock_bar li:nth-child(7):hover .dock_img {background:url('../img/main/main_icon_07_ov.png');}

/** n_contents **/
.n_section {display: flex; justify-content: space-between; align-items: flex-start;}
    .nsl {width: 767px; position: relative;}
    .nsl img {transition: all .3s;}
    .nsl:hover img {transform: scale(1.03); transition: all .3s;}
        .nsl_mark {position: absolute; top: 0; left: 30px; z-index: 1;}

    .nsr {width: 404px;}
    .nsr a {height: 200px; display: block;}
    .nsr a:not(:last-child) {margin-bottom: 12px;}

    .nsr a {background-position: center !important; background-repeat: no-repeat !important;}
    .nsr a:nth-child(1) {background:url('../img/main/main_jubo.png');}
    .nsr a:nth-child(2) {background:url('../img/main/main_church.png');}
    .nsr a:nth-child(3) {background:url('../img/main/main_youtube2.jpg');}
    .nsr a:nth-child(3) i {color: #FE0101;}

    .nsr h2 {padding: 22px 30px; color: #fff; display: flex; justify-content: space-between; align-items: center; font-size: 20px;}

/** w_contents **/
.w_section {display: flex; justify-content: space-between; align-items: center;}
    .notice,
    .advertising {padding: 85px;}

    .notice {background:url('../img/main/main_notice_bg.jpg')no-repeat bottom / cover; height: 354px; width: 1157px;}
    .advertising {background:url('../img/main/main_ad_bg.jpg')no-repeat center / cover; height: 354px; width: 763px;}

    .n_box,
    .a_box {overflow: hidden;}

    .n_box {width: 710px; height: 100%; margin-left: auto; display: flex; justify-content: space-between; align-items: flex-start;}
        .nb_tit {height: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;}
        .nb_tit h2 {font-size: 36px; font-weight: bold; display: flex; justify-content: space-between; align-items: center;}
        .nb_tit h2 i {font-size: 28px; margin: auto;}
        .nb_tit p {font-size: 16px; color: #6f6f6f;}
        .nb_tit a {margin-top: auto; color: #fff; background-color: #ababab; padding: 5px 15px; border-radius: 20px;}
        .nb_tit span {width: 50px; height: 1px; margin: 5px 10px; display: inline-block; background-color: #fff;}

        .nb_list {height: 100%; width: 465px;}
        .nb_list div {height: 100%;}
        .nb_list ul {display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
        .nb_list li {display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d2d2d2;}
        .nb_list a {display: block; white-space: nowrap; text-overflow: ellipsis; font-size: 20px; overflow: hidden; padding-right: 15px; width: 80%; font-weight: 500; padding: 5px 0;}
        .nb_list span {font-size: 18px; color: #888; width: 120px; display: inline-block; text-align: right;}

    .a_box {height: 100%;}
        .a_tit h2 {color: #fff; font-size: 24px; font-weight: 600;}
        .a_list li {display: flex; justify-content: space-between; align-items: center; margin: 15px 0 !important;}
        .a_list a {color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .3); width: fit-content; padding: 5px; padding-left: 15px; position: relative; opacity: .85;}
        .a_list a::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, .3); border-radius: 100%; width: 6px; height: 6px;}
        .a_list a:hover {opacity: 1;}
        .a_list a:hover::before {background-color: #ffc600;}

    .photo_wrap {position: relative; padding: 95px 0; background-color: #e8eef6;}
        .photo_tit {margin-bottom: 40px; width: 1200px; margin: auto; position: relative;}
        .photo_tit::before {content: attr(data-name); position: absolute; left: 50%; top: -50px; transform: translateX(-50%); font-weight: bold; color: #111; opacity: .1; font-size: 320px; line-height: 1;}
        .photo_tit h2 {font-size: 36px; font-weight: bold; margin-bottom: 15px;}
        .photo_tit p {font-size: 16px; color: #888;}

        .photo_list {width: 100%; }
        .photo_list .xe-widget-wrapper {height: 100%;}

/** sub **/
.sub_visual {padding-top: 122px; position: relative;}
    .sv_tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 33px)); z-index: 2;}
    .sv_tit p {text-align: center;}
    .sv_tit p:first-child {font-size: 32px; font-weight: bold; color: #fff; line-height: 2;}
    .sv_tit p:last-child {color:rgba(255, 255, 255, .7); font-size: 16px;}
    .sv_img {text-align: center;  overflow: hidden;}
    .sv_img img {width: 100%; animation: widezoom 2s; transform: scale(1.05);}
    @keyframes widezoom {
        0% {transform: scale(1);}
        100% {transform: scale(1.05);}
    }

    .sub_tab {display: flex; justify-content: center; align-items: center; width: 100%; background-color:rgba(0,0,0,.5); position:absolute; bottom:0;}
        .tab_wrap {max-width:1200px; width:100%; margin: auto; display: flex; justify-content: flex-start; align-items: center; height: 66px;}
        .tab_wrap ul {display: none; position: absolute; left: 0; top: 66px; width: 100%;background-color: #fff; border-left: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; z-index: 3;}
        .tab_wrap a {display: flex; height: 54px; align-items: center; justify-content: flex-start; padding: 0 30px; color:#333; transition:all .2s; border-bottom: 1px solid #e5e5e5;}
        .tab_wrap a:hover{background-color:#e5e5e5; color:#333;}
        .tab_wrap a.home_site{width: 60px; height: 66px; border-right: 1px solid rgba(255, 255, 255, .3); border-left:1px solid rgba(255, 255, 255, .3); display: block; height: 100%; border-bottom: 0; padding: 0; text-align: center; line-height: 66px;}
        .tab_wrap a.home_site:hover {background-color: transparent;}
        .tab_wrap li.active a{background-color:#0c5992; color:#fff;}
        .tab_wrap i {color: #fff;}

        .dropdown {display: flex; height: 100%; flex-direction: column; justify-content: center; align-items: center; position: relative;}
        .dropdown span {padding: 0 30px;min-width:260px; width: fit-content; height: 100%; display: flex; justify-content: space-between; align-items: center; color: #fff; cursor: pointer;  border-right: 1px solid rgba(255, 255, 255, .3);}

    .sub_box {width: 1200px; margin: auto;}
    
/** greetings **/
    .sub_greetings {display: flex; justify-content: space-between; align-items: flex-start;}
        .sb_img h2 {margin-top: 35px; font-size: 24px; font-weight: bold;}
        .sb_img p {font-size: 18px; color: #888; margin-top: 12px;}
        .sb_img img {border-radius: 50px 0 0 0;}

        .sb_text {padding-left: 85px;}
        .sb_text h2 {font-size: 24px; line-height: 2; color: #b4b4b4;}
        .sb_text h3 {font-size: 38px; color: #2059a5; font-weight: bold;}
        .sb_text h4 {border-radius: 15px; padding: 30px 25px; margin: 20px 0; line-height: 1.5; background-color: #eff4f9; width: fit-content;}
        .sb_text h5 {text-align: right; margin-top: 35px;}
        .sb_text img {display: inline-block; margin-left: 10px;}
        .sb_text p {margin-top: 50px; font-weight: 500;}

/** history **/
    .sh_tab {height: 120px; line-height: 120px; background-color: #2159a5; border-radius: 20px 0 20px 0;}
    .sh_tab ul {display: flex; justify-content: space-between; align-items: center;}
    .sh_tab li {color: #fff; position: relative; opacity: .75; flex: 1; text-align: center; cursor: pointer;}
    .sh_tab li:not(:last-child)::after {content: ''; position: absolute; top: 50%; transform: translateY(-50%); right: -15px;  width: 35px; height: 1px; background-color: #fff;}
    .sh_tab li.on {opacity: 1;}past

    .sh_content {padding: 110px 0;}
        .shc_box {margin-bottom: 130px; padding: 0 40px; position: relative;}
        .shc_box::before {content: ''; position: absolute; width: 12px;height: 12px;border-radius: 100%; background-color: #d33333; left: 0; top: 15px;}
        .shc_box h2 {font-size: 48px; font-weight: bold; margin-bottom: 40px;}
        .shc_box span {display: inline-block; min-width: 100px; font-weight: 900; font-size: 18px;}
        .shc_box p {display: flex; color: #303030; font-size: 18px;}
        .shc_box p:not(:last-child) {margin-bottom: 24px;}

/** staff **/
    .sub_staff div h2 {font-size: 30px; font-weight: bold; margin-bottom: 20px;}
        .pastor, .worker, .presbyter, .seneschal {margin-bottom: 100px;}
            .ss_box {padding:0 20px; width: 100%; border: 1px solid #dddddd;}
            .ss_box ul {display: flex; justify-content: flex-start; align-items: center; border-bottom: 1px solid #ddd; padding: 20px 0;}
            .ss_box ul:last-child{border-bottom: none;}
            .ss_box a {display: block;}



            .pastor li:nth-of-type(even) {padding-left: 50px;}
            .pastor li h2 {font-size: 24px; font-weight: bold; margin-bottom: 45px;}
            .pastor li h3 {font-size: 20px; font-weight: bold; color: #215aa5;}
            .pastor li p {padding: 3px 0; font-size: 16px; line-height: 2;}

            .worker li:nth-of-type(odd)  {width: 15%;}
            .worker li:nth-of-type(even) {width: 35%;}
            .worker li h2, .presbyter li h2 {font-size: 20px; font-weight: bold;}
            .worker li a,
            .worker li p, .presbyter li h2 {padding: 3px 0; font-size: 16px;}

            .ss_box_between{justify-content: space-between!important;}
            .presbyter li, .seneschal li {width: 14%;}
            .presbyter li h2, .seneschal li h2, .worker2 li h2{text-align: center; margin-bottom: 0; font-size: 18px;}

            .table-custom{width: 100%; margin-bottom: 8px;}
            .custom2{width: 38%;  transform: translateX(-50%);  position: relative; left: 50%;}

/** worship **/
    .sub_worship table {width: 100%; margin-bottom: 70px; border: 1px solid #e3e3e3;}
    .sub_worship td {padding: 20px 25px; font-size: 16px; border: 1px solid #e3e3e3; word-break: break-all;}
    .sub_worship .thead td {font-size: 18px; background-color: #e9eff6; color: #111; border-top: 2px solid #111; font-weight: bold;}
    .sub_worship h2 {font-size: 26px; font-weight: bold; margin-bottom: 15px;}


/** new **/
    .sub_new {text-align: center; height: 100%;}
        .t_header {display: flex; justify-content: center; align-items: center;}
        .t_header h2 {line-height: 1.5; margin-left: 10px; text-align: left;}
        .t_header span {color: #215aa5; font-weight: bold;}
        .t_content {background-color: #f5f5f5; padding: 40px 0; margin: 15px 0;}

/** 평신도훈련 **/


/** global **/
    .sg_box:not(:last-child) { margin-bottom: 100px;}
    .sg_box h2 {font-size: 30px; margin-bottom: 15px; font-weight: bold;}
    .sg_box table {width: 100%; border-top: 2px solid #111;}
    .sg_box tr:first-child th,
    .sg_box tr:first-child td {padding-top: 35px;}
    .sg_box th, .sg_box td {font-size: 16px; color: #555; line-height: 1.5; padding:3px 7px ; font-weight: 400;}
    .sg_box th {vertical-align: top; width: 125px;}
    .sg_box th span {display: inline-block; padding: 10px; border-radius: 12px; color: #fff; background-color: #215aa5; width: 100%; text-align: center;}

    .sg_box ul {display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
    .sg_box li {margin: 10px; width: calc((100% / 8) - 20px);}
    .sg_box li p {text-align: center; line-height: 1.5; color: #555; margin-top: 5px; font-size: 15px;}
    .sg_box img {width: 100%;}

/** 직능선교회 **/
    .sub_vertical h3 {font-size: 18px; color: #555; margin-bottom: 65px;}
        .sv_box tr:first-child th,
        .sv_box tr:first-child td {padding: 10px 0px;}
        .sv_box th,
        .sv_box td {padding: 15px 0px; border-bottom: 1px solid #e3e3e3; text-align: center;}
        .sv_box span {display: inline-block; padding: 10px; border-radius: 10px; width: fit-content; margin: auto;}
        /* .sv_box span:hover {color: #fff; background: #215aa5; cursor: default;} */

        .sv_box2 {margin-bottom: 55px;}
        .sv_box2 h2 {font-size: 18px; color: #215aa5; margin-bottom: 16px; font-weight: bold;}
        .sv_box2 p {line-height: 1.5; font-size: 16px; color: #666;}

/** 교회둘러보기 **/
.svi_box h2 {padding: 40px 0; text-align: center; font-weight: bold; font-size: 24px; border-bottom: 1px solid #e5e5e5;}

    .svi_tab {width: 1200px; margin: auto; border-bottom: 1px solid #7692b8;}
    .svi_tab ul {display: flex; justify-content: space-between; align-items: center; width: 800px; margin: auto;}
    .svi_tab li {flex: 1;  border: 1px solid #cbcbcb; border-bottom: 0; cursor: pointer;}
    .svi_tab li:not(:last-child) {border-right: 0;}
    .svi_tab li.on a,
    .svi_tab li:hover a {color: #fff; border: 1px solid #215aa5; border-bottom: 0; font-weight: bold; background-color: #215aa5;}
    .svi_tab li a {display: block; padding: 15px 0; text-align: center; font-size: 18px; color: #777;}


    .view2 {margin-top: 50px; overflow: hidden;}
    .view2 img {width: 100%;}
    .view2 .swiper-slide{opacity:0.6; transition:opacity 0.3s;}
	.view2 .swiper-slide-active{opacity:1}
    .view2 p {text-align: center; margin: 10px 0;}

    .view1_wrap {position: relative; width: 1380px; margin: auto;}
        .view1 {padding: 40px 0; overflow: hidden; width: 1200px; margin: auto;}
        .view1 .swiper-slide {border: 5px solid transparent; border-radius: 5px;}
        .view1 .swiper-slide-thumb-active{border: 5px solid #215aa5; border-radius: 5px;}
        .view1 .swiper-slide img {width: 100%;}
        .view1 .swiper-button-prev,
        .view1 .swiper-button-next {width: 60px; height: 60px; color: #fff; background-color: #4c4c4c; border-radius: 100%;}
        .view1 .swiper-button-prev::after,
        .view1 .swiper-button-next::after {font-size: 18px; font-weight: 100;}

        .view1 .swiper-pagination {width: 1200px; margin: auto;  text-align: center; margin-top: 25px;}
        .view1 .swiper-pagination span {margin: 0 5px;}
        .view1 .swiper-pagination-bullet-active {background-color: #215aa5;}

    .view1_wrap2 {width: 850px;}
    .view1_wrap2 .view1{width: 600px;}

/** 주일학교 **/
    .sub_sc h2 {font-size: 26px; font-weight: bold; margin-bottom: 15px;}
        .sc_top {padding: 25px 60px; background-color: #E8EFF6; border-top: 2px solid #111;}
        .sc_top li {list-style: disc; margin: 7px 0;  font-size: 17px; font-weight: bold;}

        .sc_list {display: flex; flex-wrap: wrap; align-items: flex-start; padding: 35px 0; border-bottom: 1px solid #e5e5e5;}
        
            .scl_box {flex: 1 1 30%; margin-bottom: 40px;}
            .scl_box h3 {color: #fff; width: fit-content; padding: 8px 40px; border-radius: 12px; background-color: #215aa5; margin-bottom: 15px; font-weight: bold; font-size: 18px;}
            .scl_box p {margin: 7px 0; letter-spacing: 0px;}

            .scl_sns {display: flex; justify-content: space-between; align-items: center; height: 100%;}
            .scl_sns a {width: 170px; height: 170px; text-align: center; border: 1px solid #e5e5e5; display: flex; flex-direction: column; justify-content: center; align-items: center;}
            .scl_sns a:first-child:hover {background-color: #215aa5;}
            .scl_sns a:first-child:hover p {color: #fff;}
            .scl_sns a .sns_img {width: 50px; height: 50px;}
            .scl_sns a:nth-child(1) .sns_img {background: url('../img/sub/sns_facebook.png')no-repeat center / contain;}
            .scl_sns a:nth-child(1):hover .sns_img {background: url('../img/sub/sns_facebook_ov.png')no-repeat center / contain;}
            .scl_sns a:nth-child(2) .sns_img {background: url('../img/sub/sns_instar.png')no-repeat center / contain;}
            .scl_sns a:nth-child(3) .sns_img {background: url('../img/sub/sns_cafe.png')no-repeat center / contain;}

        .sc_list:last-child {align-items: center;}
        .sc_list:last-child .scl_box {margin-bottom: 0;}
        .sc_list:last-child .scl_sns p {font-weight: bold; margin-top: 15px;}

footer {height: 120px; background-color: #202020; padding: 30px 0;}
    .f_wrap {width: 1200px; margin: auto; display: flex; justify-content: flex-start; align-items: center; height: 100%;}
        .f_txt {padding: 0 30px;}
        .f_txt p:not(:last-child) {margin-bottom: 10px;}
        .f_txt p,
        .f_txt a {color: #ddd; font-size: 15px;}

@media (max-width:991px) {
    /* main */
    .main_contents {padding-top: 66px;}
    .sub_contents {padding: 30px 15px;}
    .w_section {flex-direction: column;}
    .n_contents {padding: 15px;}
    .n_section {flex-direction: column;}

    header {height: 65px;}
    .m_menu_btn {height: 18px;}
    .gnb {width: 100%; padding: 0; justify-content: space-between; padding: 15px; height: auto;}
    .logo {position: static; width: auto; height: auto; line-height: 1.25; box-shadow: none; border-radius: 0; background-color: transparent;}
    .logo img {height: 28px;}
    .youtube {width: 35px; height: 35px; border-radius: 100%;}
    .youtube i {font-size: 18px;}

    /* dock bar */
        .dock_bar {margin-bottom: 30px; padding: 20px; margin-top: -70px;}
        .dock_bar a {width: 100px; height: auto;}
        .dock_bar li {flex: auto;}

        .dock_bar li:hover p {color: #111;}
        .dock_bar li:hover {background: transparent;}
        .dock_bar li .dock_img {width: 40px; height: 40px; background-size: 100% !important; margin-bottom: 5px;}
        .dock_bar li p {font-size: 15px;}

        .dock_bar li:nth-child(1):hover .dock_img {background:url('../img/main/main_icon_01.png');}
        .dock_bar li:nth-child(2):hover .dock_img {background:url('../img/main/main_icon_02.png');}
        .dock_bar li:nth-child(3):hover .dock_img {background:url('../img/main/main_icon_03.png');}
        .dock_bar li:nth-child(4):hover .dock_img {background:url('../img/main/main_icon_04.png');}
        .dock_bar li:nth-child(5):hover .dock_img {background:url('../img/main/main_icon_05.png');}
        .dock_bar li:nth-child(6):hover .dock_img {background:url('../img/main/main_icon_06.png');}
        .dock_bar li:nth-child(7):hover .dock_img {background:url('../img/main/main_icon_07.png');}

    .nsl {width: 100%; margin-bottom: 30px;}
    .nsl img {Width: 100%;}
    .nsl img.nsl_mark {width: 75px;}
        
    .nsr {width: 100%;}
    .nsr a:not(:last-child) {margin-bottom: 5px;}

    .notice, .advertising {padding:45px 25px;}
    .notice {width: 100%; height: 300px;}
    .advertising {width: 100%; height: 254px;}

    .n_box {width: 100%; flex-direction: column;}
    .nb_tit {width: 100%; flex-direction: row; height: 100%; justify-content: space-between;}
    .nb_tit a {margin-top: 0; font-size: 13px; padding: 5px 10px;}
    .nb_tit p {font-size: 14px;}
    .nb_tit h2 {font-size: 24px; margin-bottom: 5px;}
    .nb_tit h2 i {font-size: 22px;}
    .nb_tit span {width: 25px;}

    .nb_list {width: 100%; height: auto;}
    .nb_list a {font-size: 15px;}
    .nb_list span {font-size: 15px;}

    .a_tit {margin-bottom: 15px;}

    .a_list li {margin: 7px 0 !important;}
    .a_list a {width: 100%;}

    .photo_wrap {padding: 45px 15px;}
    .photo_tit {width: 100%;}
    .photo_tit::before {font-size: 72px; top: -45px; transform: none; left: auto; right: -15px;}
    .photo_tit h2 {font-size: 24px; margin-bottom: 5px;}

    /* m_menu */
    .m_menu{position:fixed; top:66px; left:0; width:100%; height:calc(100vh - 66px); z-index:9999; background-color:#fff;display: none;}
		
    .close-button {font-size: 34px;color: #fff;}
    .m_cbs_online {display: flex;justify-content: space-between;align-items: center;color: #fff;background-color: #f12043;padding: 10px 20px;}

    .m_selected span {position: relative; color: #004b93 !important; font-weight: bold;}
    .m_selected span::after {content: ""; width: 70%; height: 2px; background-color: #004b93; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);}

    .menu_first {background-color: #fff; width: 35%;}
    .menu_first ul {height: calc(100vh - 66px);}
    .menu_first li {cursor: pointer; background-color:#f0f0f0; text-align:center; color:#000; font-size:16px; line-height:1em; border-bottom:1px solid #cfcfcf; height: 20%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .menu_first li.on{background-color:#004b93; color:#fff;}
    .menu_first li:last-child{border-bottom:0;}

        .first_icon {width: 35px; height: 35px; margin:0 auto;}
    .menu_first li:nth-child(1) .first_icon {background:#f0f0f0  url('../img/main/m_icon_01.png')no-repeat center / contain;}
    .menu_first li:nth-child(2) .first_icon {background:#f0f0f0  url('../img/main/m_icon_02.png')no-repeat center / contain;}
    .menu_first li:nth-child(3) .first_icon {background:#f0f0f0  url('../img/main/m_icon_03.png')no-repeat center / contain;}
    .menu_first li:nth-child(4) .first_icon {background:#f0f0f0  url('../img/main/m_icon_04.png')no-repeat center / contain;}
    .menu_first li:nth-child(5) .first_icon {background:#f0f0f0  url('../img/main/m_icon_05.png')no-repeat center / contain;}

    .menu_first li.on:nth-child(1) .first_icon {background:#004b93 url('../img/main/m_icon_01_ov.png')no-repeat center / contain;}
    .menu_first li.on:nth-child(2) .first_icon {background:#004b93 url('../img/main/m_icon_02_ov.png')no-repeat center / contain;}
    .menu_first li.on:nth-child(3) .first_icon {background:#004b93 url('../img/main/m_icon_03_ov.png')no-repeat center / contain;}
    .menu_first li.on:nth-child(4) .first_icon {background:#004b93 url('../img/main/m_icon_04_ov.png')no-repeat center / contain;}
    .menu_first li.on:nth-child(5) .first_icon {background:#004b93 url('../img/main/m_icon_05_ov.png')no-repeat center / contain;}

    .menu_second {background-color: #fff; width: 65%; padding:0px 15px; overflow-y: auto; height: 100vh;}
        .second_wrap {padding-bottom: 20px; display:none;}
        .second_wrap.on{display:block;}
        .second_wrap:last-child {padding-bottom: 0;}
        .second_wrap ul {background-color: #fff; border-bottom:1px solid #e7e7e7;}
        .second_wrap ul > li > a,
        .second_wrap ul > li > span {display: block;  padding: 20px 13px; font-size:16px; color:#000; line-height:1em; font-weight:bold;}
        .second_wrap ul > li > ul {background-color: #f0f0f0; border-radius:15px; padding:15px; margin-bottom:20px;}
        .second_wrap ul > li > ul > li > a {padding: 15px; display: block;}

    .first_title {font-weight: bold; font-size: 14px; margin-top: 10px;}
    .second_title {display: flex; justify-content: space-between; align-items: center;}
    #second_title_on {color: #004b93 !important;}


    footer {height: auto;}
    .f_wrap {flex-direction: column; justify-content: center; width: 100%;}
        .f_txt p, .f_txt a {font-size: 13px; text-align: center;}
        .f_txt p:last-child {padding: 10px 0;}
        .f_txt p:last-child a {display: inline-block; padding: 0 8px;}
        .f_txt p:last-child img {height: 20px;}
        .f_logo {margin-bottom: 15px;}
        .f_logo img {height: 35px;}

    /* sub */
        .sub_box {width: 100%;}
        /* visual */
        .sub_visual {padding-top: 66px;}
            .sv_img {height: 250px;}
            .sv_img img{height: 100%; object-fit: cover;}

            .sv_tit {transform: translate(-50%, calc(-50% + 7.5px)); width: 100%; padding: 0 15px;}
            .sv_tit p:first-child {font-size: 24px;}
            .sv_tit p:last-child {font-size: 14px;}

            .tab_wrap {height: 60px;}
            .tab_wrap a {padding: 0 15px; font-size: 14px; height: 45px;}
            .tab_wrap a.home_site {width: 15%;}

            .dropdown {width: 42.5%;}
            .dropdown span {min-width: auto; width: 100%; padding:0 15px; font-size: 14px;}

            .tab_wrap ul {top: 60px;}

        /* 인사말 */
        .sub_greetings {flex-direction: column;}
            .sb_img h2 {font-size: 20px; margin-top: 15px;}
            .sb_img,
            .sb_img img{width: 100%;}

            .sb_text {padding: 0; margin-top: 25px;}
            .sb_text h2 {font-size: 20px;}
            .sb_text h3 {font-size: 24px;}
            .sb_text p {margin-top: 15px;}

        /* 연혁 */
            .sh_tab {height: auto;}
            .sh_tab ul {flex-wrap: wrap; padding:10px 15px;}
            .sh_tab li {flex: auto; height: 45px; width: 30%; line-height: 45px; padding: 0 5px;}
            .sh_tab li:not(:last-child)::after {width: 1px; right: 0px; height: 25%;}

            .sh_content {padding: 30px 0;}
            .shc_box h2 {font-size: 26px; margin-bottom: 15px;}
            .shc_box {margin-bottom: 35px; padding: 0 25px;}
            .shc_box::before {top: 7px; width: 8px; height: 8px;}
            .shc_box span {min-width: 85px; font-size: 15px;}
            .shc_box p {font-size: 14px;}

        /* 섬기는 분들 */
            .ss_box ul {flex-direction: column; flex-wrap: wrap; padding-top: 20px; padding-bottom: 10px;}
            .ss_box li {width: 100%;}
            .ss_box img {width: 100%;}

            .pastor li h2 {margin: 15px 0; font-size: 20px;}
            .pastor li:nth-of-type(even) {padding-left: 0;}
            .pastor li p {line-height: 1.5;}

            .worker .ss_box {padding:0 12px;}
            .worker ul { flex-direction: row; padding: 12px 0;}
            .worker2 ul {padding: 0; border-bottom: none;}
            .worker li, .presbyter li, .seneschal li {margin: 5px 5px 15px 5px;}
            .worker li:nth-of-type(even),
            .worker li:nth-of-type(odd) {width: calc(50% - 10px);}
            .worker li h2, .presbyter li h2 {font-size: 16px;}
            .worker li a, .worker li p, .presbyter li a, .presbyter li p {font-size: 16px; padding: 0;}

            .presbyter li, .seneschal li{width: calc(50% - 10px);}
            .worker2 li{border-bottom: 1px solid #e1e1e1; padding: 16px 0;}
            .worker2 li:nth-child(3){border-bottom: none;}
            .ss_box_mobile{flex-direction: row !important;}



        /* 예배안내 */
            .sub_worship table {margin-bottom: 35px;}
            .sub_worship h2 {font-size: 18px;}
            .sub_worship .thead td {font-size: 14px; text-align: center;}
            .sub_worship td {padding: 8px; font-size: 13px; text-align: center;}

        /* 둘러보기 */
            .svi_tab {width: 100%;}
            .svi_tab ul {width: 100%; flex-wrap: wrap;}
            .svi_tab li {flex: 1 1 40%;}
            .svi_tab li a { font-size: 16px;}
            .svi_tab li:nth-child(2),
            .svi_tab li:nth-child(4) {border-right: 1px solid #cdcdcd;}

            .svi_box h2 {padding: 25px 0; font-size: 20px;}
            .svi_box ul {margin-top: 12px;}
            .svi_box li {margin-bottom: 12px;}
            .svi_box img {width: 100%;}
            .svi_box p {margin-top: 5px; font-size: 14px; text-align: center;}

            .view1_wrap {width: 100%;}
            .view1 {width: 100%; padding: 25px 0;}

            .view2 {margin-top: 35px;}
            .view2 .swiper-slide img {height: auto; width: 100%;}

            .view1 .swiper-button-prev,
            .view1 .swiper-button-next {width: 35px; height: 35px; color: #fff; background-color: #4c4c4c; border-radius: 100%;}
            .view1 .swiper-button-prev::after,
            .view1 .swiper-button-next::after {font-size: 14px; font-weight: 100;}

            .view1 .swiper-pagination {width: 100%; margin-top: 5px;}

        /* 새가족 등록 안내 */
            .sub_new img {width: 100%;}

        /* 평신도 훈련 */
            .t_header {flex-direction: column;}
            .t_header img{width: auto;}
            .t_header h2 {margin-left: 0; text-align: center; margin-top: 10px;}

            .t_content {padding: 25px;}

        /* 선교 */
            .sg_box tr {display: flex; justify-content: flex-start; flex-wrap: wrap;}
            .sg_box tr.msg:not(:nth-child(3)) {margin-bottom: 10px;}
            .sg_box tr:first-child th, .sg_box tr:first-child td {padding: 5px 0;}
            .sg_box th {width: 100%;}
            .sg_box th span {font-size: 15px; padding: 5px;}
            .sg_box td {width: 50%;}
            .sg_box td.w100 {width: 100%;}
            .sg_box th, .sg_box td {padding: 5px 0; font-size: 14px;}
            .sg_box:not(:last-child) {margin-bottom: 35px;}

            .sg_box h2 {font-size: 18px;}

            .sg_box li {margin: 5px; width: calc((100% / 3) - 10px);}
            .sg_box p {font-size: 14px; line-height: 1.25;}

        /* 직능선 */
            .sub_vertical h3 {margin-bottom: 35px;}
            .sv_box2 {margin-bottom: 35px;}
            .sv_box2 h2 {margin-bottom: 10px;}

        /* 주일학교 */
            .sub_sc h2 {font-size: 18px;}
            .sc_top {padding: 25px 40px;}
            .sc_top li {margin: 3px 0; font-size: 14px;}

            .scl_box {margin: 5px; margin-bottom: 15px;}
            .scl_box h3 {margin: auto; margin-bottom: 15px; text-align: center; font-size: 15px;}
            .scl_box p {margin: 4px 0; font-size: 14px;}
                .scl_sns {margin-top: 10px;}
                .scl_sns a {width: 90px; height: 90px;}
                .sc_list:last-child {padding: 12px 0;}
                .sc_list:last-child .scl_sns p {display: none;}
}