﻿@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
    font-family: 'NanumBarunGothic';
    src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
    src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'), url(webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format('woff'), url(webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format('truetype');
}
@font-face {
    font-family: 'NanumSquare';
    src: url(webfont/NanumSquare/NanumSquareR.eot);
    src: url(webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'), url(webfont/NanumSquare/NanumSquareR.woff) format('woff'), url(webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}
@font-face {
    font-family: 'Pretendard';
    src: url(webfont/Pretendard/Pretendard-Regular.woff2);
}
@font-face {
    font-family: 'Pretendard';
    font-weight: bold;
    src: url(webfont/Pretendard/Pretendard-Bold.woff2);
}

/*안중나사렛교회 추가*/
@font-face { font-family: 'HSBomBaram2'; src: url('webfont/HS봄바람체2.0.otf') format('opentype'); }
@font-face { font-family: 'WantedSans-Bold'; src: url('webfont/WantedSans-Bold.woff2') format('woff2'), url('webfont/WantedSans-Bold.otf') format('opentype'); }
@font-face { font-family: 'WantedSans-Regular'; src: url('webfont/WantedSans-Regular.woff2') format('woff2'), url('webfont/WantedSans-Regular.otf') format('opentype'); }

body * { font-family: WantedSans-Regular; letter-spacing: normal; }
.black {background-color: rgba(0,0,0,0.5)!important;}

/* header */
.navbar-default .navbar-collapse, .navbar-default .navbar-form{background-color: unset;text-align: center;position: relative;overflow: hidden;}
.navbar-default .navbar-collapse {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    height: 100% !important;
    width: 80%;
    margin: auto;
}

/* gnb */
#gnb {
    text-align: center;
    position: relative;
    left: 0%;
    width: 68%;
    display: flex;
    justify-content: space-evenly;
    margin: 0;
}
.navbar-default { transition: all ease 0.8s; margin: 0; top: 0; width: 100%; background: unset; border: none; height: 98px; position: absolute; background-color: rgba(255, 255, 255, 0.5); }
.navbar-default #all-menu{ float:right; margin:50px 0px 0px 55px;}
.navbar-default >.container >a:nth-child(1) > img { float:left; margin: 15px 0px;}
.navbar-default >.container > .top-href-btn{position: absolute;top:46px;right: 14%;
transform: translateY(-50%);}
.navbar-default > #navbar > .top-href-btn .live-btn{text-decoration:none;}
#gnb > li { display:inline-block;font-size:20px; outline:none;position:relative;}
#gnb > li > a {font-size: 20px; color: #000; text-decoration: none;transition: all ease 0.2s;display: inline-block;}
#gnb > li > .dropdown-menu {margin: 0; padding: 0; border-radius: 0; width:160px; left:50%; margin-left:-80px; background:rgba(255,255,255,0.8); top:100%;}
#gnb > li > .dropdown-menu > li{position:relative;}
#gnb > li > .dropdown-menu > li > .dropdown-menu{margin: 0;padding: 0;border-radius: 0;width: 220px;left: 235px;
top: 0;margin-left: -80px;background: rgba(255,255,255,0.8);}
#gnb > li > ul > li > a {font-size: 17px; padding: 10px; color:#000;text-decoration: none; }
#gnb > li > ul > li.active > a,
#gnb > li > ul > li > a:hover {background:rgba(255,255,255,1)!important; font-weight:bold; }
#gnb > li > ul > li > ul > li > a {font-size: 15px; padding: 10px; color:#000;text-decoration: none; }
#gnb > li > ul > li > ul > li.active > a,
#gnb > li > ul > li > ul > li > a:hover {background:rgba(255,255,255,1)!important; font-weight:bold; }
#gnb > li:hover > ul {display: block; }
#gnb > li:hover > ul > li:hover > ul {display: block; }

/* gnb2 */
.gnb2 {background: #0a3c8a; width:100%; height:0px; position:absolute;left:0px; z-index:9999;}
.gnb2 .container { padding:20px 0px 0px; text-align:right;}
.subtext-wrap { float:left;  padding:0px; display:none; width:220px; text-align:center; margin-right:30px;}
.subtext { display:inline-block; }
.subtext p { color:#333333;}
.subtext p:first-child { font-size:14px; margin-bottom:0px; display:none; }
.subtext p:nth-child(2) { font-size:30px; color:#fff; font-weight:bold;}
.subtext img { display:inherit; position:relative; float:none!important; margin:20px auto; }
.subul > li { display:inline-block; width:150px; text-align:center;margin:0px 20px 0px 0px;}
.subul > li:last-child { margin-right:0px; }
.subul > li > a { font-size:18px; font-weight:600;}
.subul > li > a > i { float:right; position:relative; top:3px; }
.subul > li > ul { margin-top:15px; }
.subul > li > ul > li { font-size:13px; transition:all ease 0.3s;height: 29px;margin-top:1px; }
.subul > li > ul > li:hover { background-color:#1f4346;}
.subul > li > ul > li > a { padding: 5px 7px;border-bottom: 1px solid #fff;display: inline-block;overflow: hidden; width: 100%;text-overflow: ellipsis; white-space: nowrap; }
.subul > li > ul > li > a > i { margin-right:5px; position:relative; }
.subul li a { color: #fff; text-decoration:none; }

/*logo*/
.logo-wrap{/*width: 15%;*/ width:auto;}
.top-href-btn{width: 5%;}
.top-right-btn { width: 12%; margin-bottom: 4px; text-align: right; white-space: nowrap; }
.top-right-btn a{color:#17204e; text-decoration:none;font-size: 18px; font-weight:bold;}
.top-right-btn span{margin: 0px;color: #585858;font-size: 17px; font-weight:bold;}

.subtop-bottom { background-color: #524439; height: 75px; position: relative; bottom: 0; width: 100%; }
.subtop-bottom .subtop-menu ul{text-align:center;}
.subtop-bottom .subtop-menu ul li{display:inline-block;}
.subtop-bottom .subtop-menu ul li a{display: inline-block;padding: 40px 22px 25px;font-size: 17px;text-decoration: none;color: #fff;position: relative;}
.subtop-bottom .subtop-menu ul li a .btn-plus { position: absolute; top: 30%; left: 45%; background: #DEBA96; width: 10px; height: 10px; border-radius: 50%; text-align: center; opacity: 0; transition: all .3s linear; }
.subtop-bottom .subtop-menu ul li a:hover .btn-plus,
.subtop-bottom .subtop-menu ul li.active a .btn-plus,
.subtop-bottom .subtop-menu ul li a:focus .btn-plus{opacity:1;}

/* footer */
#footer { background: #524439; padding: 74px 0px 72px; position: relative; }
#footer .foot-1{position:relative;}
#footer .foot-1 .footer-login{position:absolute;right:20%;top:20%;}
#footer .foot-1 .footer-login a { padding: 5px; margin: 0 5px; font-size: 17px; color: #fff; text-decoration: none; background-color: #555; }
#footer .foot-1 img {display:block;}
#footer .foot-1 ul li { color: #fff; font-size: 17px; }
#footer .foot-1 ul li:last-of-type {margin-top:30px;}
#footer .foot-1 ul li span { color: rgba(255, 255, 255, 0.5); }
.foot-1 .footM .footL a { color: #fff; text-decoration: none; }
.foot-1 .footM .footL a:hover,
.foot-1 .footM .footL a:focus { text-decoration: none; }
.foot-1 .footM .footR li { /*width: 100%; height: 48.5px; font-size: 24px !important;*/ }
.foot-1 .footM .footR li:hover { /*font-weight: bold;*/ }
.foot-1 .footM .footR li:hover a { /*border-bottom: 1px solid #fff;*/ }
#footer .foot-2 .foot-2-1 { display: inline-block; float: left; border-right: 1px solid #ccc; }
#footer .foot-2 .foot-2-1 .footer-table { border: none; }
.foot-2 > .foot-2-1 > .footer-table > tbody > tr > td:nth-child(1) { color: #fff !important; font-weight: bold; }
#footer .foot-2 .foot-2-1 .footer-table tbody tr td { color: #848484; padding: 5px 10px; font-size: 15px; letter-spacing: 1px; }
#footer .foot-2 .foot-2-2 { display: inline-block; float: right; }
#footer .foot-2 .foot-2-2 .footer-table { border: none; }
.foot-2 > .foot-2-2 > .footer-table > tbody > tr > td:nth-child(1) { color: #fff !important; font-weight: bold; }
#footer .foot-2 .foot-2-2 .footer-table tbody tr td { color: #848484; padding: 5px 10px; font-size: 15px; letter-spacing: 1px; }
.mm-listview > li, .mm-listview > li .mm-next, .mm-listview > li .mm-next:before, .mm-listview > li:after { color: #fff !important; }
.subtop-bottom .subtop-menu ul li a .btn-plus { position: absolute; top: 25%; left: 45%; background: #DEBA96; width: 10px; height: 10px; border-radius: 50%; text-align: center; opacity: 0; transition: all .3s linear; }

/* mobile */
.header-mobile-gnb .toggle{ color:#000!important;}
#my-menu{ background-color:rgba(0,0,0,.3); max-width:240px; }
#mm-0:before { height:0!important; }
#mm-1 > ul > li:hover > a.mma1 { color: #34b4c7 !important; }
.mm-btn {top:unset!important;}
.mm-menu .mm-listview>li .mm-next:after { border-color:#fff !important; }
.mm-navbar { position:relative !important; }
.mm-navbar a { color: #fff !important; font-size: 20px; font-weight: bold; }
.mm-panels>.mm-panel>.mm-listview { margin:20px!important;}
.mm-listview>li:not(.mm-divider):after {border-bottom-style: unset !important;}
.mm-panels>.mm-panel>.mm-listview .mmenu-login { display: flex;justify-content: space-around;padding-bottom: 10px;border-bottom: 1px solid #eee !important;}
.mm-panels>.mm-panel>.mm-listview .mmenu-login a {padding:0 !important;}
.mm-menu .mm-btn:before {border-color: #fff !important;}
.mm-panels>.mm-panel.mm-hasnavbar { padding-top:0!important; }
.mm-panels > .mm-panel { padding:0; }
.mm-panels, .mm-panels>.mm-panel { z-index:9999; }
.mm-listview { margin:0; }
.mm-listview > li > a, .mm-listview > li > span { padding: 10px 10px 10px 20px; margin: 0; }
.mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel { padding:0 0 0 10px; }
.mm-listview>li>a, .mm-listview>li>span { padding:10px 5px!important; font-size:17px; }
.mob-login { overflow:hidden; padding:15px 0; border-bottom:1px solid #808080; margin-bottom:10px; }
.mob-login li { float:right; overflow:hidden; }
.mob-login a { display: inline-block !important; font-size: 17px !important; border: 0px !important; box-shadow: none !important; color: #aaa !important; padding: 0px 10px !important; }
.mob-login a .fa { font-size:20px!important; }
.mmenu-depth1 > a{ color:#fff!important; }
.mmenu-depth2 > a{ color:#E4E3B9!important; }
.mmenu-depth3 > a{ color:#B4EBF1!important; }
a.mm-next{width:100%!important;}
/* all-menu */

.gnb-all { display: none; position: fixed; z-index: 9999; background: rgba(255, 255, 255, 0.8); top: 0; left: 0; width: 100%; height: 100%; 
           text-align:center;max-height: 100vh;max-width: 100vw;overflow: scroll;}
.gnb-all .all-wrapper ul {text-align:left;}
.gnb-all a {color:#fff; text-decoration:none;}
.gnb-all .all-wrapper img {margin:80px 0px 25px; max-width:185px; }
.gnb-all .all-wrapper .login-wrap {display: flex;justify-content: center;margin-bottom:25px;}
.gnb-all .all-wrapper .login-wrap span {padding: 0 15px;}
.gnb-all .all-wrapper .all-close { color: #585858; cursor: pointer; font-weight: 600; font-size: 5em; float:right; }
.gnb-all .all-wrapper .container a { display: block; color: #585858; }
.gnb-all .all-wrapper .container > ul > li { display: inline-block; vertical-align: top; padding:0px 24px;}
.gnb-all .all-wrapper .container > ul > li > a { margin:0px 0px 18px; font-size: 25px; font-weight: 600; text-decoration:none;}
.gnb-all .all-wrapper .container > ul > li:first-child { display: none; }
.gnb-all .all-wrapper .container > ul > li > ul > li > a { color: #585858; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:20px; padding:6px 0px;}
.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover { font-weight:bold; transition:0.2s all ease;}
.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a { color: #fff; display: block; margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:16px;}

#my-menu{z-index:999999}
.foot-1 hr{width:2%;display:block;float:left;}
.foot-1 .footM{width:100%; display:inline-block;}
.foot-1 .footM .footL{float:left; text-align:left;}
.foot-1 .footM .footR{float:left; text-align:left;}
.foot-1 .footM .footL > img {margin-bottom: 71px;}
    .foot-1 .footM .footR li a {
        color: #fff;
        text-decoration: none;
        /*display: flex;
        justify-content: space-between;
        align-items: center;*/
    }
    .foot-1 .footM .footR img {
        width: 23px;
        height: 23px;
    }
.footer_dark {
    background: #050d1b;
    color: #fff;
    padding: 15px;
    font-size: 16px;
}
.slider .slider-wrapper .slide p img {
    width: 100%;
}

.mm-menu .mm-listview > li .mm-next:after {
    border-color: #fff !important;
}

/*@media (min-width:1410px){.container{width:1410px;}}*/

@media(min-width:1200px) and (max-width:1499px) {
    .top-right-btn{right: 7%;}
    .foot-1 .footM .footR li {font-size:18px !important; width:80%;}
    .foot-1 .footM .footR img {width:21px;height:21px;}
}

@media (min-width:993px) and (max-width:1199px) {
    .logo-wrap{left: 2%; max-width: 180px;}
    #gnb > li > a{font-size: 16px;}
    #gnb > li > ul > li > a {font-size:16px;}
    .top-href-btn img { width: 24px;height: 21px; }
    .top-right-btn a {font-size:16px;}
    .top-right-btn{right: 7%;}
    .gnb-all .all-wrapper .container > ul > li > a{font-size:20px;}
    .gnb-all .all-wrapper .container > ul > li > ul > li > a{font-size:17px;}
    .subtop-bottom{height:inherit;}
    .foot-1 .footM .footR li { font-size: 20px !important; }
}

@media (min-width:768px) and (max-width:992px) {
    #main-8 { padding: 20px 0; }
    #main-9 { padding: 20px 0; }
    .logo-wrap { width: unset; max-width: 180px; }
    #navbar { justify-content: flex-start; }
    .navbar-default { height: 95px; }
    .top-right-btn { right: 7%; }
    .header-mobile-gnb { float: right; font-size: 40px; position: absolute; right: 10px; }
    #footer { padding: 35px 10px 25px; }
    .subtop-bottom { height: inherit; }
    #footer .foot-1 ul li { font-size: 14px; }
    .foot-1 .footM .footR li { font-size: 19px !important; }
    .foot-1 .footM .footR li { font-size: 18px !important; }
    .foot-1 .footM .footL > img { margin-bottom: 61px; width: 210px; }
}

@media (max-width:767px) {
    #subtop img { height: 125px !important; }
    #footer .foot-1 ul li { word-break: keep-all; }

    .subtop-bottom { height: inherit; }
    #subtop .subtop-bottom .subtop-menu ul li a { padding: 25px 10px 15px; }
    #subtop .subtop-bottom .subtop-menu ul li a .btn-plus { top: 18%; }
    .logo-wrap { left: 2%; max-width: 180px; width: 50%; }
    #navbar { height: 70px !important; /*display: block;*/ justify-content: flex-start; }
    .navbar-default { height: 70px; }
    .top-right-btn { right: 7%; }
    #footer .foot-1 ul li { font-size: 15px; }
    .footer_dark { font-size: 14px; }
    .header-mobile-gnb { float: right; margin: 17px 10px; font-size: 25px; position: absolute; right: 10px; }
    .foot-1 .footM .footL { width: 100%; float: left; text-align: left; }
    .foot-1 .footM .footR { width: 100%; float: left; text-align: left; }
    #footer { padding: 35px 10px 25px; }
    .subtop-bottom { height: inherit; }
    #footer .foot-1 ul li { font-size: 14px; }
    .foot-1 .footM .footR li { font-size: 19px !important; }
    .foot-1 .footM .footR li { font-size: 18px !important; }
    .foot-1 .footM .footL > img { margin-bottom: 61px; width: 210px; }
    .foot-1 .footM .footL ul li { width: 100%; }
}
@media (max-width:500px) {
    #navbar {height: 100% !important;}
    .navbar-default .navbar-collapse { width: 100%; }
    .subtop-bottom .subtop-menu ul li a { padding: 20px 22px 10px; font-size: 14px; }
    .logo-wrap { max-width: 150px; }
    .logo-wrap img { width: auto; }
    .foot-1 .footM .footR { margin-top: 15px; }
    .foot-1 .footM .footR ul { display: flex; flex-wrap: wrap; }
    #footer .foot-1 .footR ul li { /*width: 50%;*/ }
    .foot-1 .footM .footR li {font-size: 15px !important;}
    .foot-1 .footM .footR li a {width: fit-content;}
    .foot-1 .footM .footR li a {/*margin-left: 15px;*/}
    .foot-1 .footM .footL > img {margin:auto; margin-bottom:15px;}
    .foot-1 .footM .footR img {margin-left:15px;}
}
