﻿
#progressBar {
    width: 0%;
    bottom: 0;
    position: fixed;
    float: left;
    height: 5px;
    z-index: 1000;
    max-width: 100%;
    background-color: #245B9B;
    -webkit-transition: width .7s ease;
    -o-transition: width .7s ease;
    transition: width .7s ease;
}
.subTitle { position:relative; }

#header.hover #gnb-wrap { transition:.3s all; }
#header.hover #gnb-wrap img { max-width:200px; transition:.5s all; }
#header.hover #gnb { margin-top:45px; transition:.7s all; }

.page-content * { font-family:NanumSquare, sans-serif; } 

#subtop img { width:100%; }

#subgnb { border-bottom:1px solid #ddd; padding:0px 0px;}
#subgnb .subgnb-home { float:right; display:inline-block; margin:11px 0px 0px 0px;}
#subgnb .subgnb-home img { max-width:25px; position:relative; }
#subgnb span, #subgnb a { font-size:16px; color:#777; position:relative; top:3px; text-decoration:none; transform: skew(-0.05deg);  }
#subgnb a.active { color:#245B9B; font-weight:bold; }
#subgnb .dropdown { display:inline-block;}
#subgnb .dropdown .btn { padding:15px 20px; font-size:17px; font-weight:bold;}
#subgnb .dropdown .btn-default { border:none;}
#subgnb .dropdown .btn:hover { background-color:#245B9B; transition:0.3s all ease; color:#fff!important; }
#subgnb .dropdown .btn:hover .caret { border-top:2px solid #fff; border-left:2px solid #fff; }
#subgnb .dropdown .btn .active  { background-color:#245B9B; }
#subgnb .dropdown-menu>li>a { padding:10px 15px; transition:0.3s all ease; font-size:17px;}
#subgnb .caret { border-top:2px solid #245B9B; border-right: 0px solid transparent; border-left: 2px solid #245B9B; position: relative; margin: 0; height: 8px; width: 8px; transform: rotate(225deg); transition: all 0.6s; margin-top:-10px; margin-left:20px; }

#content { padding:40px 0px;}
#content .third-menus { margin:10px 0 42px 0;text-align:center; }
#content .third-menus ul{ display:inline-block; }
#content .third-menus ul li { border: 1px solid #dedede; float:left; margin-left:-1px;}
#content .third-menus ul li a { color: #333;text-decoration: none;padding: 8px 17px;font-size: 12px;min-width: 160px;display: inline-block;text-align: center; }
#content .third-menus ul li.active a { color:#fff; }
#sub_title { font-size:40px; font-weight:600; margin:0px 0px 50px; border-bottom:4px solid #241e1e; display:inline-block; padding-bottom:10px;}
#dimodePage { padding:30px 0px; border-top:1px solid #E5E5E5;}

.lnb { padding:0px 30px;}
.lnb_title { font-size:30px; border-bottom:1px solid #000; padding:40px 0px; font-weight:600; text-align:center; position:relative;}
.sub-left-triangle { position: absolute; right: 0px; top: 0; width: 0; height: 0; border-left: 30px solid transparent; border-top-width: 30px; border-top-style: solid; border-top-color: #245B9B; }
.sub_depth2 { margin-top:0px; padding-top:0px; }
.sub_depth2 li { padding: 20px 25px; border-bottom:1px solid #ddd; transition:all ease 0.3s; }
.sub_depth2 li.active, .sub_depth2 > li:hover { background:#d9d3f2; }
.sub_depth2 > li > a { color:#777; font-weight:600;  font-size:17px; text-decoration:none; }
.sub_depth2 li a { color:#777; font-weight:600;  font-size:16px; text-decoration:none; }
.sub_depth2 li i { position:relative; margin:3px 15px 0px 0px; cursor:pointer; float:right; font-size:16px;}
.sub_depth2 li i.fa-minus { display:none; }
.sub_depth2 li:last-child { border-color:#000; }
.sub_depth3 { padding:0px 15px; margin-top:15px; display:none; }
.sub_depth3.active { display:block; }
.sub_depth3 li { padding: 10px 20px; border-bottom:1px solid #999; background-color: #f4c9ff; }
.sub_depth3 li a  { color:#999; font-size:15px;  text-decoration:none;  transition:all ease 0.3s; }
.sub_depth3 li a:hover  { color:#739AB9; }
.sub_depth3.a_96 li a:hover { color:#4E5397; }
.sub_depth3.a_98 li a:hover { color:#E4C640; }
.depth4 { display:none; }

.depth3 { width:100%; margin-bottom:50px; overflow:hidden; }
.depth3 li { float: left; width: 33%; font-size: 18px; color: #333; cursor: pointer; border: 1px solid #f2f2f2; box-sizing: border-box; color: #333; text-align:center; }
.depth3 li a { color: #333; text-decoration: none; padding: 15px 0; display:inline-block; width:100%; }
.depth3 li.active { background: #245B9B; }
.depth3 li.active a { color:#fff!important;}
.depth3 li:hover { background: #245B9B; transition: 0.3s all; }
.depth3 li:hover a { color:#fff!important; }

/*subpages*/
/*교회소개 - 교회연혁*/
.history_01 td:nth-child(1) {
    white-space:nowrap;
}

/*교회소개 - 교회역사*/
#sub-156 .board-theme.webzine .each-document .list-img {
    background-size: cover !important;
}

/*교회조직 - 부서(팀사역), 속회, 선교회*/
#sub-40 .team_01, #sub-41 .team_01, #sub-42 .team_01 {
    word-break: keep-all;
}

#sub-42 #component3447 #unit3578 > div {
    word-break: keep-all;
}

/*다음세대*/
#sub-43 #component6573 #unit2985 .col-sm-5,
#sub-44 #component6573 #unit2985 .col-sm-5,
#sub-45 #component6573 #unit2985 .col-sm-5 {
    height: unset !important;
    /*margin-bottom:50px;*/
}
#sub-43 #component6573 #unit2985 .col-sm-5 > img, 
#sub-44 #component6573 #unit2985 .col-sm-5 > img, 
#sub-45 #component6573 #unit2985 .col-sm-5 > img {
    object-fit: cover;
}
#sub-43 #component6573 #unit2985 .col-sm-7, 
#sub-44 #component6573 #unit2985 .col-sm-7, 
#sub-45 #component6573 #unit2985 .col-sm-7 {
    word-break: keep-all;
}


@media (min-width:1200px) and (max-width:1499px) {
    .lnb {
        padding: 0px 15px;
    }

    /*subpages*/
    #sub-14 #component2811 #unit2384 > div {
        padding: 25px !important;
        font-size: 17px !important;
    }

    #sub-15 #component8876 #unit4001 > div {
        font-size: 17px !important;
    }
        #sub-15 #component8876 #unit4001 > div > span {
            font-size: 18px !important;
        }
            #sub-15 #component8876 #unit4001 > div > span > span {
                font-size: 23px !important;
            }

    #sub-43 #component6573 #unit2985 .col-sm-5 > img,
    #sub-44 #component6573 #unit2985 .col-sm-5 > img,
    #sub-45 #component6573 #unit2985 .col-sm-5 > img {
        height: 400px !important;
    }

    #sub-43 #component6573 #unit2985 .col-sm-7,
    #sub-44 #component6573 #unit2985 .col-sm-7,
    #sub-45 #component6573 #unit2985 .col-sm-7 {
        height: 400px !important;
    }
    
}

@media (min-width:993px) and (max-width:1199px) {
    .lnb {
        padding: 0px 5px;
    }

    .sub_depth2 li {
        padding: 20px 15px;
    }

    /*subpages*/
    #sub-14 #component2811 #unit2384 > div {
        padding: 25px !important;
        font-size: 17px !important;
    }

    #sub-15 #component8876 #unit4001 > div {
        padding: 15px !important;
        font-size: 15px !important;
    }
        #sub-15 #component8876 #unit4001 > div > span {
            font-size: 15px !important;
        }
            #sub-15 #component8876 #unit4001 > div > span > span {
                font-size: 20px !important;
            }

    #sub-18 #component9604 #unit6061 .map-content-wrap {
        padding: 40px 30px !important;
    }
        #sub-18 #component9604 #unit6061 .map-content-wrap .col-sm-2 > span {
            font-size: 19px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li + li {
            margin-top: 10px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li > div {
            font-size: 17px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li > span {
            font-size: 17px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(3) a > div {
            padding: 7px 0 !important;
            width: 80px !important;
            height: 80px !important;
        }
            #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(3) a > div > span {
                font-size:15px !important;
            }

    /*다음세대*/
    #sub-43 #component6573 #unit2985 .col-sm-5 > img,
    #sub-44 #component6573 #unit2985 .col-sm-5 > img,
    #sub-45 #component6573 #unit2985 .col-sm-5 > img {
        height: 320px !important;
    }
    #sub-43 #component6573 #unit2985 .col-sm-7,
    #sub-44 #component6573 #unit2985 .col-sm-7,
    #sub-45 #component6573 #unit2985 .col-sm-7 {
        height: 320px !important;
        padding: 30px 40px !important;
    }
        #sub-43 #component6573 #unit2985 .col-sm-7 > span,
        #sub-44 #component6573 #unit2985 .col-sm-7 > span,
        #sub-45 #component6573 #unit2985 .col-sm-7 > span {
            font-size: 14px !important;
        }
            #sub-43 #component6573 #unit2985 .col-sm-7 > span > span,
            #sub-44 #component6573 #unit2985 .col-sm-7 > span > span,
            #sub-45 #component6573 #unit2985 .col-sm-7 > span > span {
                font-size: 25px !important;
            }
            #sub-43 #component6573 #unit2985 .col-sm-7 > div > img,
            #sub-44 #component6573 #unit2985 .col-sm-7 > div > img,
            #sub-45 #component6573 #unit2985 .col-sm-7 > div > img {
                width: 60px !important;
            }
}


@media (min-width:768px) and (max-width:992px) {
    #content > .container > .col-xs-12 {
        padding: 0;
    }
    .subTitle {
        text-align: center;
    }
    #sub_title {
        font-size: 30px;
        margin: 0px 0px 50px;
    }
    #subgnb .dropdown {
        display: inline-block;
    }
        #subgnb .dropdown .btn {
            padding: 15px;
            font-size: 17px;
            font-weight: bold;
        }
        #subgnb .dropdown .btn-default {
            border: none;
        }
    #subgnb .dropdown-menu > li > a {
        padding: 10px 20px;
        transition: 0.3s all ease;
        font-size: 18px;
    }
    #subgnb .caret {
        border-top: 2px solid #000;
        border-right: 0px solid transparent;
        border-left: 2px solid #000;
        position: relative;
        margin: 0;
        height: 8px;
        width: 8px;
        transform: rotate(225deg);
        transition: all 0.6s;
        margin-top: -10px;
        margin-left: 20px;
    }
    #subgnb .subgnb-home {
        margin: 13px 0px;
    }


    /*subpages*/
    #sub-14 #component2811 #unit2384 > div {
        padding: 25px !important;
        font-size: 17px !important;
    }

    #sub-15 #component8876 #unit4001 > div {
        padding: 15px !important;
        font-size: 15px !important;
    }
        #sub-15 #component8876 #unit4001 > div > span {
            font-size: 15px !important;
        }
            #sub-15 #component8876 #unit4001 > div > span > span {
                font-size: 20px !important;
            }

    #sub-16 #component2843 #unit9985 > div > div, #sub-79 #component2843 #unit9985 > div > div,
    #sub-80 #component2843 #unit9985 > div > div, #sub-81 #component2843 #unit9985 > div > div {
        font-size: 17px !important;
    }

    #sub-18 #component9604 #unit6061 .map-content-wrap {
        padding: 30px 20px !important;
    }
        #sub-18 #component9604 #unit6061 .map-content-wrap .col-sm-2 > span {
            font-size: 16px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li + li {
            margin-top: 10px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li > div {
            font-size: 15px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li > span {
            font-size: 17px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(3) a > div {
            padding: 7px 0 !important;
            width: 75px !important;
            height: 75px !important;
        }
            #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(3) a > div > span {
                font-size:15px !important;
            }

    #sub-19 .history_01 {
        font-size: 16px;
    }
        #sub-19 .history_01 td:nth-child(1) {
            font-size: 17px;
        }
    #sub-19 #unit4723 > div {
        font-size: 40px !important;
    }

    #sub-156 .board-theme.webzine .each-document {
        width: 45%;
        margin: 0 1%;
    }

    #sub-40 .team_01, #sub-41 .team_01, #sub-42 .team_01 {
        font-size: 16px;
    }
        #sub-40 .team_01 tr:first-child, #sub-41 .team_01 tr:first-child, #sub-42 .team_01 tr:first-child {
            font-size: 18px;
        }
        #sub-40 .team_01 td, #sub-41 .team_01 td, #sub-42 .team_01 td {
            padding: 10px !important;
        }

    /*다음세대*/
    #sub-43 #component6573 #unit2985 .col-sm-5 > img,
    #sub-44 #component6573 #unit2985 .col-sm-5 > img,
    #sub-45 #component6573 #unit2985 .col-sm-5 > img {
        height: 280px !important;
    }
    #sub-43 #component6573 #unit2985 .col-sm-7,
    #sub-44 #component6573 #unit2985 .col-sm-7,
    #sub-45 #component6573 #unit2985 .col-sm-7 {
        height: 280px !important;
        padding: 10px 20px !important;
    }
        #sub-43 #component6573 #unit2985 .col-sm-7 > span,
        #sub-44 #component6573 #unit2985 .col-sm-7 > span,
        #sub-45 #component6573 #unit2985 .col-sm-7 > span {
            font-size: 13px !important;
        }
            #sub-43 #component6573 #unit2985 .col-sm-7 > span > span,
            #sub-44 #component6573 #unit2985 .col-sm-7 > span > span,
            #sub-45 #component6573 #unit2985 .col-sm-7 > span > span {
                font-size: 22px !important;
            }
        #sub-43 #component6573 #unit2985 .col-sm-7 > div,
        #sub-44 #component6573 #unit2985 .col-sm-7 > div,
        #sub-45 #component6573 #unit2985 .col-sm-7 > div {
            bottom: 4% !important;
            right: 2% !important;
        }
            #sub-43 #component6573 #unit2985 .col-sm-7 > div > img,
            #sub-44 #component6573 #unit2985 .col-sm-7 > div > img,
            #sub-45 #component6573 #unit2985 .col-sm-7 > div > img {
                width: 45px !important;
            }
}

@media (max-width:767px) {
    #content > .container > .col-xs-12 {
        padding: 0;
    }
    #gnb-wrap {
        padding: 0px;
        position: relative;
    }
    #subgnb .container {
        padding: 0px;
    }
    #subgnb span, #subgnb a {
        font-size: 14px;
        top: 2px;
    }
    .subTitle {
        text-align: center;
    }
    #sub_title {
        font-size: 22px;
        margin: 0px 0px 30px;
    }
    #header .container {
        padding: 0px 15px
    }
    #subgnb .dropdown {
        display: inline-block;
    }
        #subgnb .dropdown .btn {
            padding: 10px 10px;
            font-size: 14px;
            font-weight: bold;
            text-align: center;
        }
        #subgnb .dropdown .btn-default {
            border: none;
        }
    #subgnb .dropdown-menu > li > a {
        padding: 8px 15px;
        transition: 0.3s all ease;
        font-size: 14px;
    }
    #subgnb .caret {
        border-top: 2px solid #000;
        border-right: 0px solid transparent;
        border-left: 2px solid #000;
        position: relative;
        margin: 0;
        height: 8px;
        width: 8px;
        transform: rotate(225deg);
        transition: all 0.6s;
        margin-top: -10px;
        margin-left: 20px;
    }
    #subgnb .subgnb-home {
        padding: 15px 15px;
        width: 100%;
        border-top: 1px solid #e5e5e5;
        margin: 0px;
    }
    .depth3 {
        margin-bottom: 30px;
    }
        .depth3 li {
            width: 50%;
            font-size: 16px;
        }
            .depth3 li a {
                padding: 10px 0;
            }
    #subgnb .dropdown-menu {
        min-width: 135px;
    }

    /*subpages*/
    #sub-14 #component2811 #unit2384 > div {
        padding: 25px !important;
        font-size: 15px !important;
    }
    #sub-14 #component2811 #unit1198 > div {
        height: 150px !important;
        background-size: contain !important;
        margin-bottom: 30px;
    }
    #sub-14 #component2811 #unit1198 > div > div {
        left: 10% !important;
        font-size: 20px !important;
    }
    #sub-14 #component2811 #unit2384 > div > span > span {
        font-size: 19px !important;
    }

    #sub-15 #component8876 #unit1613 { text-align:center; }
    #sub-15 #component8876 #unit1613 > img { max-width:400px; }
    #sub-15 #component8876 #unit4001 {
        word-break: keep-all;
    }
    #sub-15 #component8876 #unit4001 > div {
        padding: 15px !important;
        font-size: 15px !important;
    }
        #sub-15 #component8876 #unit4001 > div > span {
            font-size: 15px !important;
        }
            #sub-15 #component8876 #unit4001 > div > span > span {
                font-size: 20px !important;
            }

    #sub-16 #component2843 #unit9985, #sub-79 #component2843 #unit9985,
    #sub-80 #component2843 #unit9985, #sub-81 #component2843 #unit9985 {
        margin-bottom:15px;
    }
    #sub-16 #component2843 #unit9985 > div > div, #sub-79 #component2843 #unit9985 > div > div,
    #sub-80 #component2843 #unit9985 > div > div, #sub-81 #component2843 #unit9985 > div > div {
        text-align: center;
        font-size: 17px !important;
    }

    #sub-17 #unit9343 .worship_03 {
        font-size: 15px !important;
        word-break: keep-all;
    }
        #sub-17 #unit9343 .worship_03 tr:first-child {
            font-size: 15px !important;
        }
        #sub-17 #unit9343 .worship_03 td {
            padding: 10px !important;
        }

    #sub-18 #component9604 #unit6061 .map-content-wrap {
        padding: 30px 10px !important;
    }
        #sub-18 #component9604 #unit6061 .map-content-wrap .col-sm-2 > span {
            font-size: 16px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 { margin-left:0 !important;}
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li + li {
            margin-top: 10px !important;
        }
            #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li > div {
                font-size: 15px !important;
                margin-bottom: 10px;
            }
        #sub-18 #component9604 #unit6061 .map-content-wrap .map_01 li > span {
            font-size: 16px !important;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(1) {
            border-right: unset !important;
            margin-bottom: 15px;
        }
        #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(3) a > div {
            padding: 7px 0 !important;
            width: 70px !important;
            height: 70px !important;
            float: right;
        }
            #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(3) a > div > img {
                width: 30px;
            }
            #sub-18 #component9604 #unit6061 .map-content-wrap .row > div:nth-of-type(3) a > div > span {
                font-size: 14px !important;
            }

    #sub-19 .history_01 {
        font-size: 14px;
    }
        #sub-19 .history_01 td:nth-child(1) {
            font-size: 15px;
        }
    #sub-19 #unit4723 > div {
        font-size: 30px !important;
    }
    #sub-19 #component6661 #unit4723 {
        top : 0 !important;
        z-index:999;
    }

    #sub-156 .board-theme.webzine .each-document .list-img {
        background-size: contain !important;
    }

    #sub-40 .team_01, #sub-41 .team_01, #sub-42 .team_01 {
        font-size: 13px;
    }
        #sub-40 .team_01 tr:first-child, #sub-41 .team_01 tr:first-child, #sub-42 .team_01 tr:first-child {
            font-size: 15px;
        }
        #sub-40 .team_01 td, #sub-41 .team_01 td, #sub-42 .team_01 td {
            padding: 10px !important;
        }
    #sub-42 #component3447:nth-child(3) #unit3578 > div {
        padding: 20px !important;
        font-size: 15px !important;
    }

    /*다음세대*/
    #sub-43 #component6573 #unit2985 .col-sm-5,
    #sub-44 #component6573 #unit2985 .col-sm-5,
    #sub-45 #component6573 #unit2985 .col-sm-5 {
        padding-right:15px !important;
    }
        #sub-43 #component6573 #unit2985 .col-sm-5 > img,
        #sub-44 #component6573 #unit2985 .col-sm-5 > img,
        #sub-45 #component6573 #unit2985 .col-sm-5 > img {
            float: unset !important;
            height: 280px !important;
            width: 100% !important;
            border-radius: unset !important;
        }
    #sub-43 #component6573 #unit2985 .col-sm-7,
    #sub-44 #component6573 #unit2985 .col-sm-7,
    #sub-45 #component6573 #unit2985 .col-sm-7 {
        /*height: 280px !important;*/
        height: 320px !important;
        padding: 10px 25px !important;
        border-radius: unset !important;
        margin: 0 15px;
    }
        #sub-43 #component6573 #unit2985 .col-sm-7 > span,
        #sub-44 #component6573 #unit2985 .col-sm-7 > span,
        #sub-45 #component6573 #unit2985 .col-sm-7 > span {
            font-size: 12px !important;
        }
            #sub-43 #component6573 #unit2985 .col-sm-7 > span > span,
            #sub-44 #component6573 #unit2985 .col-sm-7 > span > span,
            #sub-45 #component6573 #unit2985 .col-sm-7 > span > span {
                font-size: 20px !important;
            }
        #sub-43 #component6573 #unit2985 .col-sm-7 > div,
        #sub-44 #component6573 #unit2985 .col-sm-7 > div,
        #sub-45 #component6573 #unit2985 .col-sm-7 > div {
            bottom: 2% !important;
            right: 2% !important;
        }
            #sub-43 #component6573 #unit2985 .col-sm-7 > div > img,
            #sub-44 #component6573 #unit2985 .col-sm-7 > div > img,
            #sub-45 #component6573 #unit2985 .col-sm-7 > div > img {
                width: 45px !important;
            }

    #sub-51 #component2562 #unit9343 div > div:nth-of-type(1),
    #sub-33 #component2562 #unit9343 div > div:nth-of-type(1) {
        font-size: 20px !important;
    }
    #sub-51 #component2562 #unit9343 div > div:nth-of-type(2),
    #sub-33 #component2562 #unit9343 div > div:nth-of-type(2) {
        padding: 35px 15px !important;
        font-size: 15px !important;
        word-break: keep-all;
    }
    #sub-51 #component2562 #unit9343 div > div:nth-of-type(2) > span,
    #sub-33 #component2562 #unit9343 div > div:nth-of-type(2) > span {
        font-size: 17px !important;
    }


    @media (max-width:375px) and (min-width:321px) {
        /*subpages*/
    }

    @media (max-width:320px) {
        /*subpages*/



    }


}
