@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
}

@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');
}

/* body * { font-family: 'Noto Sans KR',sans-serif; } */
a:hover, a {text-decoration: none;}
body { font-family: NanumSquare, sans-serif; }
.lato { font-family: 'Lato', sans-serif; }

/*header*/
.header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; position: relative; }
.header .logo { width: 100%; order: 1; text-align: center; position: relative; padding: 20px 0; }
.header #gnb { height: inherit; order: 2; width: 100%; text-align: center; border-top: #E5E5E5 solid 1px; /*background-color: #0E1B4F;*/ }
.header #gnb .container { /*width: 1340px;*/ }
.header #gnb a { text-decoration: none; color: #000; }
.header #gnb #depth1 { display: inline-flex; height: inherit; align-items: center; justify-content: space-between; }
.header #gnb #depth1 > li { position: relative; text-align: center; height: inherit; display: inline-flex; align-items: center; vertical-align: middle; }
.header #gnb #depth1 > li > a { font-size: 23px; font-weight: bold; display: block; color: #323232; padding: 30px 0; }
.header #gnb #depth1 > li.active > a { }
.header #gnb #depth2 { display: none; }
.header #gnb #depth2.active { display: block; position: absolute; background: #fff; top: 45px; width: 220px; z-index: 99; left: 50%; transform: translateX(-50%); border-top: 3px solid #32385C; padding: 15px 0; border-radius: 0 0 10px 10px; box-shadow: 0px 2px 10px #a9a9a9; }
.header #gnb #depth2 > li > a { font-size: 17px; padding: 10px; display: inline-block; /*border: 1px solid #d7d7d7;*/ width: 90%; margin: 5px 0; }
.header #gnb #depth2 > li > a:hover { background: #32385C; color: #fff; font-weight: bold; transition: all ease-in-out .15s; }
.header #gnb .depth3 > li > a { font-size: 15px; margin: 3px 15px; position: relative; display: inline-block; padding-bottom: 5px; }
.header #gnb .depth3 > li > a:hover { color: #000; font-weight: bold; }
.header #gnb .depth3 > li > a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 1px; left: 50%; position: absolute; background: #000; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; }
.header #gnb .depth3 > li > a:hover:after { width: 100%; left: 0; height: 2px; }
.header .login-info a { color: #000; margin: 0 10px; font-size: 15px; }
.header .login-info { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); display: flex; }
.header .login-info span { color: #CCCCCC; }
.menu-window { position: relative; z-index: 9999; }
.menu-window .get-menu { z-index: 999; position: absolute; background: #fff; width: 100%; box-shadow: 1px 3px 20px #d7d7d7; overflow: hidden; }
.menu-window .get-menu > div > li { list-style: unset; display: flex; }
.menu-window .get-menu > div > li > a { color: #005EBF; text-decoration: none; padding: 7px 15px; border: 2px solid #005EBF; font-size: 19px; min-width: 180px; text-align: center; margin: 7px 0; border-radius: 10px; }
.menu-window .get-menu div > li > ul { display: flex; align-items: center; margin-left: 25px; }
.menu-window .get-menu div > li > ul > li > a { color: #000; text-decoration: none; padding: 5px 25px 5px 0px; font-size: 17px; }
.hvr-underline-from-left:before { height: 2px; }
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before { right: 10px; }

/*gnb-all*/
.gnb-all { display: none; position: absolute; z-index: 9999; top: 110px; left: 0; width: 100%; height: 100%; text-align: center; }
.gnb-all a { text-decoration: none; }
.gnb-all .all-wrapper { background: #fff; padding: 0; border-bottom: 2px solid #0765BF; border-top: 2px solid #0765BF; }
.gnb-all .all-wrapper .container { width: 1230px; padding: 0; }
.gnb-all .all-wrapper .container a { display: block; color: #005EBF; }
.gnb-all .all-wrapper .container > div { overflow: hidden; }
.gnb-all .all-wrapper .container > ul { display: flex; justify-content: center; }
.gnb-all .all-wrapper .container > ul > li { width: 100%; float: left; position: relative; text-align: left; padding: 40px 15px; border-right: 1px solid #d7d7d7; }
.gnb-all .all-wrapper .container > ul > li:nth-child(1) { border-left: 1px solid #d7d7d7; }
.gnb-all .all-wrapper .container > ul > li > a { margin: 0px 0px 15px; font-size: 19px; font-weight: 600; text-decoration: none; border-bottom: 2px solid #005EBF; padding-bottom: 8px; }
.gnb-all .all-wrapper .container > ul > li > ul > li > a { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; padding: 0px; margin: 10px 0; transform: skew(-0.05deg); font-weight: bold; /*border: 1px solid #d7d7d7;*/ padding: 5px; }
.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: #333; display: block; margin: 10px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; padding: 0 5px; transform: skew(-0.05deg); }
.gnb-all .close { opacity: 1; position: absolute; top: 30px; right: 70px; font-size: 50px; color: #000; }

#subgnb { border: 1px solid #DDDDDD; }
#subgnb .dropdown { display: inline-block; float: left; }
#subtop { position: relative; }
#subtop .subtop-bottom { position: absolute; bottom: 0; width: 100%; background: #f5f5f5; height: 60px; }
#subtop .subtop-menu { background: #fff; bottom: 0; z-index: 3; width: 100%; }
#subtop .subtop-menu ul { text-align: center; width: 100%; line-height: 60px; margin-bottom: 50px; }
#subtop .subtop-menu ul li { display: inline-block; position: relative; cursor: pointer; margin-bottom: 15px; }
#subtop .subtop-menu ul li a { color: #000; text-decoration: none; font-size: 18px; margin: 0 25px; font-weight: bold; padding: 15px 30px; border-radius: 30px; border: 1px solid #d7d7d7; }
#subtop .subtop-menu ul li.active a { font-weight: bold; border: 1px solid #747474; padding-bottom: 20px; background: #32385C; color: #fff; }
.subgnb-home { position: absolute; top: 15px; width: 100%; text-align: right; }
.subgnb-home span { color: #000; font-size: 17px; /*text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000;*/ text-shadow: -1px 0px #eee, 0px 1px #eee, 1px 0px #eee, 0px -1px #eee; }
.subgnb-home a { color: #000; text-decoration: none; font-size: 17px; font-family: NanumBarunGothic, sans-serif; /*text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000;*/ text-shadow: -1px 0px #eee, 0px 1px #eee, 1px 0px #eee, 0px -1px #eee; }
.subgnb-home a.active { /*font-weight: bold;*/ color: #000; text-shadow: -1px 0px #eee, 0px 1px #eee, 1px 0px #eee, 0px -1px #eee; }
.subTitle { }
#sub_title { text-align: center; color: #000; font-size: 50px; }
.subal { font-weight:bold; width: 220px; padding: 18px 10px; background-color: #fff; color: #fff; position: absolute; left: 50%; z-index: 9999 !important; /*visibility: hidden;*/ -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); /*opacity: 0;*/ top: 80px; -webkit-transition: opacity .2s ease-in-out, top .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, top .2s ease-in-out; -o-transition: opacity .2s ease-in-out, top .2s ease-in-out; transition: opacity .2s ease-in-out, top .2s ease-in-out; word-break: keep-all; border-radius: 5px; box-shadow: rgba(0,0,0, 1) 0px 4px 7px; }
/*.subal:before { content: ''; position: absolute; left: 50%; top: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #fff; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: opacity .2s ease-in-out; -moz-transition: opacity .2s ease-in-out; -o-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out; }*/
.subal li { height: auto; text-align: center; font-size: 17px; padding: 0 10px; line-height: normal; }
.subal a { text-decoration: none; color: #555; }
.all-menu-wrap { position: relative; width: 35px; }
.all-menu { width: 35px; height: 35px; }
.all-menu ul { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); cursor: pointer; height: inherit; width: inherit; }
.all-menu ul li { list-style: none; position: absolute; left: 5%; width: 80%; height: 3px; transition: .5s; background: #000; transform: translateY(-50%) rotate(0); opacity: 1; }
.all-menu ul li:nth-child(1) { top: 25%; }
.all-menu ul li:nth-child(2) { top: 50%; }
.all-menu ul li:nth-child(3) { top: 75%; }
.all-menu ul.active li:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.all-menu ul.active li:nth-child(2) { opacity: 0; }
.all-menu ul.active li:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }
#my-menu { display: none; }
.mm-panels > #mm-1 { background-color: #0E1B4F !important; }

.mm-panels #mm-2,
.mm-panels #mm-3,
.mm-panels #mm-4,
.mm-panels #mm-5,
.mm-panels #mm-6,
.mm-panels #mm-7,
.mm-panels #mm-8,
.mm-panels #mm-9,
.mm-panels #mm-10,
.mm-panels #mm-11,
.mm-panels #mm-12,
.mm-panels #mm-13,
.mm-panels #mm-14,
.mm-panels #mm-15,
.mm-panels #mm-16,
.mm-panels #mm-17,
.mm-panels #mm-18,
.mm-panels #mm-19,
.mm-panels #mm-20,
.mm-panels #mm-21,
.mm-panels #mm-22,
.mm-panels #mm-23,
.mm-panels #mm-24,
.mm-panels #mm-25,
.mm-panels #mm-26,
.mm-panels #mm-27,
.mm-panels #mm-28,
.mm-panels #mm-29,
.mm-panels #mm-30,
.mm-panels #mm-31,
.mm-panels #mm-32,
.mm-panels #mm-33,
.mm-panels #mm-34,
.mm-panels #mm-35,
.mm-panels #mm-36,
.mm-panels #mm-37,
.mm-panels #mm-38,
.mm-panels #mm-39,
.mm-panels #mm-40,
.mm-panels #mm-41,
.mm-panels #mm-42,
.mm-panels #mm-43 { background-color: #1f2e68 !important; }

.mm-panels #mm-3,
.mm-panels #mm-16,
.mm-panels #mm-17,
.mm-panels #mm-18,
.mm-panels #mm-19 { background-color: #2f3e7a !important; }

.mm-navbar { position: relative !important; padding: 0 0px 20px !important; height: inherit !important; }
.mm-navbar a { font-size: 19px; color: #fff !important; }
.mm-listview > li > a, .mm-listview > li > span { padding: 10px 15px !important; font-size: 17px; color: #fff; }
.mm-panels > .mm-panel > .mm-listview { margin: 0px !important; }
.mm-btn { top: unset !important; }
.mm-next:after, .mm-prev:before { border-top: 2px solid rgba(255,255,255, 1) !important; border-left: 2px solid rgba(255,255,255, 1) !important; }
.mm-panels > .mm-panel { padding: 0 5px !important; }
.top-btn { position: fixed; right: 6%; display: none; cursor: pointer; bottom: 4%; }
footer {margin-top: 70px;padding: 50px 0px;background: #F9F9F9;position: relative;}
footer .container {width: 1420px;}
footer .footer-wrapper {display: flex;position: relative;}
footer .footer-logo {margin-right: 30px;}
footer .quick-icons {position: absolute;top: 0;right: 0;}
footer .quick-icons a {text-decoration: none;}
footer .quick-icons img {margin-left: 20px;}
footer .church-info p, footer .church-info p a {font-size: 15px;color: #646464; margin:0;}
footer .church-info p .bar {padding: 0 10px;color: #646464;}

/*회원가입*/
#joinForm .form-wrapper table tr td { text-align: center !important; word-break: keep-all; font-size:14px !important; }
#joinForm .form-wrapper table tr td:nth-of-type(1) { width: 45% !important; }
#joinForm .form-wrapper table tr td:nth-of-type(2) { width: 10% !important; }
#joinForm .form-wrapper table tr td:nth-of-type(3) { width: 45% !important; }
#joinForm .form-wrapper table tr td:nth-of-type(4) { display: none !important; }

/*회원정보 보기*/
#memberInfoForm table tr td { text-align: center !important; word-break: keep-all; font-size: 14px !important; }
#memberInfoForm table tr td:nth-of-type(1) { width: 45% !important; }
#memberInfoForm table tr td:nth-of-type(2) { width: 10% !important; }
#memberInfoForm table tr td:nth-of-type(3) { width: 45% !important; }
#memberInfoForm table tr td:nth-of-type(4) { display: none !important; }


@media (min-width:1500px) {
    .menu-window .get-menu .container{ width:1320px;}
}

@media (max-width: 1499px) {
    .header #gnb {padding: 5px 0;}
    .header #gnb #depth1 > li > a {font-size: 1.3vw;}
   .gnb-all {top: 80px;}
   .gnb-all .all-wrapper .container{width: 100%;}
    footer .container {width: 1170px;}
}

@media (max-width:1199px) {
    .header #gnb #depth1 > li > a {    padding: 15px 0;}
    #subtop .subtop-bottom {height: 50px;}
    #subtop .subtop-menu ul { line-height: 45px; display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
    #subtop .subtop-menu ul li a {font-size: 16px; margin: 0 15px;}
    #subtop .subtop-menu ul li.active a {padding-bottom: 13px;}
    .subal { top: 46px; width: 151px; padding: 5px 10px; }
    .header #gnb #depth2 > li > a { font-size: 13px; padding: 10px 0; }
    .gnb-all { top: 70px; }
    .gnb-all .all-wrapper .container{width: 100%;}
    .gnb-all .all-wrapper .container > ul > li {padding: 10px;}
    .gnb-all .all-wrapper .container > ul > li > a {font-size: 0.8rem;}
    .gnb-all .all-wrapper .container > ul > li > ul > li > a { font-size: 13px; }
    .gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a { font-size: 12px; }
    .menu-window .get-menu > div > li > a { min-width: 165px; font-size: 1.6rem; }
    .menu-window .get-menu div > li > ul > li > a {font-size: 1.5rem; padding: 5px 10px 5px 0;}
    footer .container {width: 991px;}
}

@media (max-width: 992px) {
    .header #gnb { display: none; }
    .header .login-info {display: none;}    
    .header .mobile-hamberger {font-size: 3vw;position: absolute;right: 0;padding: 0 20px;}
    .header .mobile-hamberger a {color: black!important;}
    .header .logo {width: 30%;}
    .header .logo img {margin-left:5%;}    
    .mmenu-login:after { content: unset !important; font-size: 13px !important; }
    .mm-menu.mm-offcanvas { width:35% !important;}
    footer { padding: 30px 0 20px; border-top: 1px solid #cecece; margin-top: 30px; }
    footer .container {width: 720px;}
    footer > div > .img-wrap { margin-bottom: 10px; }
    footer > div > .img-wrap img { width: 70%; }
    footer p { word-break: keep-all; }
    footer p.p2 { margin-bottom: 10px; }
    footer .righr-cont { position: static; }
    footer .righr-cont ul { display: flex; justify-content: space-between; }
    footer .righr-cont ul li { font-size: 10px; }
    footer p.p3 { padding: 10px 0; }
    .top-btn { width: 35px; right: 5%; }
    footer ul { position: static; transform: unset; padding: 10px 15px; }
    footer .church-info p { font-size: 14px; }
    footer .address { padding: 10px 15px; }
    footer .top-btn { bottom: 0px; }
    footer .all-menu { display: none; }
    footer ul li:nth-child(3) img { margin-right: 20px; }
    footer .quick-icons { bottom: 40px; top: unset; right: unset; }
    footer .quick-icons a:first-child img { margin-left: 0; }
    #subtop .subtop-menu ul li a { font-size: 15px; margin: 0 10px; }
    .subgnb-home { width: auto; right: 0; }
    .subgnb-home a { font-size: 14px; }
}

@media (max-width: 767px) {
    .header .logo {  width: 50%; }
    .header .mobile-hamberger {font-size: 3rem;}
    footer .church-info { word-break: keep-all;text-align: center; }
    footer .church-info p .bar {padding: 0 5px;}
    footer { padding: 20px 5px 0; }
    footer .footer-logo {margin-right: 0; margin: 0 0 15px;}
    footer .container {width: auto;}
    footer .footer-wrapper { flex-direction: column; align-items: center; }
    .mm-menu.mm-offcanvas { width: 55% !important; }
    .subTitle{margin-top:20px;}
    .subgnb-home {top: 10px;}
    .subgnb-home a {font-size: 10px;}
    #subtop .subtop-menu ul li a { font-size: 14px; margin: 0; padding: 5px 15px; width: 100%; display: inline-block; }
    #subtop .subtop-menu ul { line-height: 35px; }
    #subtop .subtop-bottom { }
    #subtop .subtop-menu ul li { width: 50%; margin: 0; padding: 5px 10px; }

    /*회원가입*/
    #joinForm .form-wrapper table tr td { font-size: 12px !important; }
}


@media (max-width: 414px) {
    .header .logo {padding: 15px 20px;}
    .header .mobile-hamberger {font-size: 2rem; padding:0 15px;}
    .mm-listview > li > a, .mm-listview > li > span {font-size:12px;}
}