@charset "utf-8";
/* ----- 공통 layout ----- */

.layer_popup{width:300px; height:auto; margin:0; position:fixed; top:50%; left:50%; z-index:9999; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); border:5px solid #000; text-align:center; background:#fff; padding-top:20px;}
.layer_popup p{text-align:left; padding:0 10px;}
.layer_popup img{width:100%; max-height:420px;height:auto;margin:10px 0}
.layer_popup > div{width:100%; border:0; margin:0;position:relative; padding-bottom:45px;}
.layer_popup > div a{display:block}
.layer_popup #pop_today{position:relative; top:1px; left:-3px;}
.layer_popup #today{color:#fff; background:#333; text-align:right; padding:5px 20px;position:absolute; bottom:0; left:0; width:100%;}
.layer_popup .btn{color:#333;background:#eee;  margin-left:5px;padding:2px 5px; font-weight:bold}

#header{width:100%; min-width:320px; background:#fff; height:100px; border-top:5px solid #c03322; border-bottom:1px solid #ddd;}
#header .header-wrap{width:100%; background:#fff; z-index:999; height:50px; margin:0 auto; position:relative;}
#header .header-wrap .container{position:relative;}
#header .header-wrap h1{position:absolute; left:0px; top:0px; margin:0;}
#header .header-wrap h1 a{width:250px; height:95px; left:0px; display:block; text-indent:-9999px; background-position:left center; background-repeat:no-repeat;}
#header .header-wrap .btn-menu{display:none;}
#header .header-wrap #gnb{max-width:950px; width:950px; height:95px; margin:0 auto; float:right;}
#header .header-wrap #gnb ul{z-index:100; display:table; width:100%; margin:0;}
#header .header-wrap #gnb:after{content:''; display:block; clear:both;}

#header .header-wrap #gnb li{font-weight:bold; display:table-cell; position:relative; height:95px; text-align:center; vertical-align:middle;}
#header .header-wrap #gnb li a{color:#000; font-size:20px; line-height:25px; padding:0px; display:inline-block;}
#header .header-wrap #gnb li a:hover,#header #gnb li.on a{color:#c03322; text-decoration:none;}
#header .header-wrap #gnb li.on ul li a{color:#444;}
#header #gnb li.on .depth-in{position:relative;}
#header #gnb li .depth-in:before{content:''; display:block; background:#c03322; height:2px; width:0%; position:absolute; left:0px; top:58px; z-index:100;}

#header .header-wrap #gnb li ul{position:absolute; width:140px; left:50%; right:auto; top:95px; display:none; z-index:100; margin-top:10px; transform:translateX(-50%);}
#header .header-wrap #gnb li ul li{display:block; float:none; background:none; padding-bottom:7px; font-weight:normal; text-align:left; height:30px;}
#header .header-wrap #gnb li ul li a{font-size:1em; line-height:normal; padding:0px; color:#444; display:inline-block; width:140px; text-align:left;}
#header .header-wrap #gnb li ul li a::before{content:""; display:inline-block; width:3px; height:3px; border-radius:5px; background:#aaa; position:relative; top:-5px; left:-7px;}
#header .header-wrap #gnb li ul li:hover{background:none;}
#header .header-wrap #gnb li ul li a:hover{color:#c03322; font-weight:600;}
#header .header-wrap #gnb.active li ul{display:block;}
#header .header-wrap #gnb-bg{width:100%; min-height:120px; height:220px; background:#fff; position:absolute; left:0px; top:95px; display:none; z-index:10; box-shadow:0px 5px 5px rgba(0,0,0,0.2);}

#location { background: #696976; height: 60px; }
#location ul li{max-width: 200px; width: 25%; border-right: 1px solid #7f7f8b; float: left; display: table; height: 60px }
#location ul li:first-child a::before{content: "\f015";display: inline; font-family: 'Font Awesome 5 Free';  font-weight: 900; opacity: 0.7; font-size: 1.3em}
#location ul li:first-child{border-left: 1px solid #7f7f8b; }
#location ul li a{display: block; color: #fff ; opacity: 0.7; text-align: center; vertical-align: middle; display: table-cell;font-family: 'NanumSquare'; font-size: 1.1em; padding-top: 5px;}
#location ul li:last-child a{opacity: 1; font-weight: 700}
#location ul li a:hover{opacity: 1 ; background: #4a4a5b;}
#location ul li:last-child a:hover{background: #696976;}

#footer{ background: #484850; color: #d1d1db; padding: 2em 0 }
#footer span{display: inline-block;}
#footer span::after{ content: ""; display: inline-block;margin: 0 10px; width: 1px; height: 15px; background: #9e9e9e; position: relative;top: 2px}
#footer span:last-child::after, #footer span:nth-last-child(2)::after{display: none}
#footer .copyright{margin-top: 5px; display: block}

.container-wrap{margin-top: 100px}
#content{min-height: 500px; padding: 60px 0 100px}

/* 서브 컨텐츠 */
h2.title-style01{font-size: 2.5rem; color: #000; text-align: center; font-weight: 700; margin-bottom: 40px}
h3.title-style02 {font-size: 1.8rem; color: #c03322;font-weight: 700;margin-bottom:20px}
h4.title-style03{font-size: 1.5rem; color: #333;font-weight: 700;margin-bottom:10px }

.text-style01{font-size: 1.6rem;font-family: 'NanumSquare';color:#c03322; font-weight: 700;}
.text-style02{color: #eb6100; margin-top: 5px;}
.par-style01{line-height: 160%; word-break: keep-all}
.text-box{ border: 3px dotted #d1d1db; padding:30px; max-width: 800px; margin: auto; width:100%;line-height: 160%;  word-break: keep-all}
button.file::before{content:"\f56d"; display: inline-block; font-family: 'Font Awesome 5 Free'; font-weight:600; color: #333; margin-right: 5px;}

.list-style01 li{margin-bottom: 5px; padding-left: 12px; position: relative;}
.list-style01 li::before{content: "-"; display: block; position: absolute; top: 0px; left: 0;}

.tab-list{display: table; width: 100%; margin-bottom: 40px ;table-layout: fixed}
.tab-list li{display: table-cell; word-break:keep-all; max-width:290px ; height: 50px; text-align: center; font-family: 'NanumSquare';color:#333; font-size: 1.2em; font-weight:700; vertical-align: top}
.tab-list li button{width: 100%; height: 100%; border: 1px solid #ddd ; border-left:0;}
.tab-list li:first-child button{border-left: 1px solid #ddd}
.tab-list li button:hover{background: #f2f2f7;}
.tab-list li button.active{color:#fff ;background: #c03322;}
.tab-panner{display: none}
.tab-panner.active{display: block}

.table{margin:30px 0;}
.table.type1{border-top: solid 2px #777; border-bottom: solid 1px #777}
.table.type1 th, .table.type1 td{text-align: center; vertical-align: middle}
.table.type1 thead th{border-bottom:1px solid #999;}
.table.type1 tbody td{vertical-align: middle}
.table.type1 tbody td.line{border-right:1px solid #ddd;}
.table.type1 tbody td:nth-child(n+2){border-left:1px solid #ddd;}
.table.type1 tbody tr:first-child td{border-top:0}

.board_list{width:100%; border-top:1px solid #555555;border-bottom:1px solid #999999; text-align:center;color:#555; clear:both;display:table;}
.board_list .board_colum{display:table-column-group}
.board_list .board_colum div{display:table-column}
.board_list .board_list_head{background:#f2f2f2; color:#3f3f3f;padding:10px 0;display:table-header-group;}
.board_list .board_list_head div{display:table-cell;font-weight:600;text-align:center;padding:10px 0;}
.board_list .board_list_tr{display:table-row;}
.board_list .board_list_tr div{display:table-cell;padding:15px 0; border-top:1px solid #dfdfdf; vertical-align: middle;}
.board_list .board_list_tr .rowspan {padding:0;}
.board_list .board_list_tr .rowspan p{display:block;padding:15px 0;}
.board_list .board_list_tr:hover{background:#f8f8f8;}
.board_list .board_list_tr.new{font-weight: 700; color: #333}
.board_list div.bl_title{text-align:left;padding-left:20px;}
.board_list div.bl_file > p::after{content:"\f56d"; display: inline-block; font-family: 'Font Awesome 5 Free'; font-weight:600; color: #333}
.board_list div.text_al{padding-left: 20px;}

.search{border:1px solid #eee; width:100%; padding:15px 0 ; text-align:center; background-color:#f8f8f8; display:block;}
.search select{margin-right:10px; height:28px;border:1px solid #aaaaaa; vertical-align: top; font-size: 0.9em}
.search input{border:1px solid #aaa;padding:0 10px; line-height:28px; height:28px; max-width:300px; width:50%; vertical-align: top; font-size: 0.9em}
.searchBtn{border:1px solid #aaaaaa;padding:2px 10px 2px; color:#333333; background-color:#fff ; text-decoration:none; cursor: pointer;height: 28px; display: inline-block; font-size: 0.9em;vertical-align:middle;}
.searchBtn:hover{background-color:#ddd;}
.searchBtn::after{content: "\f002"; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: inline-block; margin-left: 5px;}

.btn_wrap{text-align:left;margin-top:20px; margin-bottom:20px;line-height:1rem;}
.btn_wrap a{border:1px solid #cccccc; min-width:20px; padding:5px 10px;font-weight:500;margin-left:5px;vertical-align:middle;border-radius:3px;display: inline-block;}
.btn_wrap a:hover{background-color:#f8f8f8;}
.btn_wrap a.btn_list,.btn_wrap a.btn_01{border:1px solid #333; background:#333; color:#fff;}
.btn_wrap a.btn_list{float:right;}
.btn_wrap a.btn_list:hover,.btn_wrap a.btn_01:hover{border:1px solid #555; background:#555; color:#fff;}
.btn_wrap .btn_prev::before{content: "\f104"; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: inline-block; margin-right:10px; position: relative; top:1px}
.btn_wrap .btn_next::after{content: "\f105"; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: inline-block; margin-left: 10px; position: relative; top:1px}
.btn_wrap a.btn_list::after{content: "\f0c9"; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: inline-block; margin-left: 10px; position: relative; top:1px}

.list_num{margin-top:30px;margin-bottom:30px;display:block; text-align:center}
.list_num ul{display:inline-block;}
.list_num ul li{width:30px;height: 35px; display: table; float: left; margin-left:5px;}
.list_num ul li:first-child{margin-left:0;}
.list_num ul li a{border:1px solid #c1c1c1;background:#fff;display:table-cell; font-size:13px; vertical-align:middle;}
.list_num ul li a:hover{color:#444;background:#f3f3f3;}
.list_num ul li.on a{background:#666;border:1px solid #666; color:#fff;}
.list_num ul li.lbtn a::after{content: "\f100"; font-family: 'Font Awesome 5 Free'; font-weight: 900;}
.list_num ul li.lbtn a:hover{background-color:#ddd;border:1px solid #aaa;}
.list_num ul li.prev a::after{content: "\f104";}
.list_num ul li.next a::after{content: "\f105";}
.list_num ul li.end a::after{content: "\f101";}
.list_num ul:after{content:''; clear:both; display:block;}

.read_wrap{width:100%; border-top:2px solid #555555;border-bottom:1px solid #999999;}
.read_wrap h3{background:#f2f2f2; color:#3f3f3f; font-size:19px!important; padding:10px;text-align:center;font-weight:600;margin-bottom:0px}
.read_wrap dl{border-bottom:1px solid #dfdfdf;padding:7px 0px; margin: 0}
.read_wrap dl dt{min-width:60px;display:inline-block;padding:0px 10px ;font-weight:bold;color:#333}
.read_wrap dl dd{display:inline-block;min-width:100px; padding-right: 20px;}
.read_wrap dl dd img{vertical-align:middle; margin-right:5px;}
.read_wrap dl:after{content:''; clear:both; display:block;}
.read_wrap .read_text{padding:30px 20px; line-height:160%}
.read_wrap .read_text img{max-width:800px;width: 100%; display: block; margin: 0 auto}
.read_wrap .read_text video{max-width: 800px; width: 100%; display: block; margin: 0 auto}

.write_wrap{display:table;width:100%;border-bottom:1px solid #999999;}
.write_wrap .write_colum{display:table-column-group}
.write_wrap .write_colum p{display:table-column}
.write_wrap .write_row{display:table-row}
.write_wrap .write_row p{display:table-cell;border-top:1px solid #dfdfdf;padding:10px 10px;vertical-align:middle}
.write_wrap .write_row p.write_th{background:#f2f2f2; color:#3f3f3f; text-align:center;font-weight:bold}
.write_wrap input[type=text],.write_wrap input[type=password]{width:100%;}
.write_wrap textarea{width:100%;}
.write_wrap div:nth-of-type(2) p{border-top:1px solid #555555;}

.photo_list{border-bottom: 1px solid #ddd;border-top: 1px solid #ddd; padding: 20px 0 10px; text-align: center;}
.photo_list:after{content:''; clear: both;display: block;}
.photo_list > div:after{content:''; clear: both;display: block;}
.photo_list > div{width:20%; float: left; padding: 10px;}
.photo_list div a{position: relative;display: block;}
.photo_list div .img{width: 100%; height: 200px ; overflow: hidden; margin-bottom: 15px; padding: 0}
.photo_list div .img div{width: 100%; background-size: cover; background-position: center; height: 100%;}
.photo_list div .title{display: block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-weight: 600; width: 100%; margin-bottom: 5px;font-family: 'NanumSquare'; font-size: 1.1em}
.photo_list div .data{display: block; margin-bottom: 10px;}

.info-img{max-width: 600px; float: right; margin-left: 30px; margin-bottom:10px;}

.history ul li{display: table; width: 100%; position: relative; height: 100%;}
.history ul li::before{content: ""; display: block; width: 1px; height:100%; background: #ccc; position: absolute; top:0; left: 90px; z-index: -1}
.history ul li:last-child::before{display: none}
.history ul li strong{display: table-cell; width: 18%; text-align: center; font-size: 1.5em; color: #000}
.history ul li strong span{border: 3px solid #ddd; display: inline-block; padding: 10px 20px; border-radius: 10px; background: #fff; z-index: 1}
.history ul li > div{display: table-cell;width: 85%; line-height: 160%; padding-bottom: 40px; vertical-align: middle; text-align: justify}
.history ul li > div p:nth-child(2){margin-top:10px; border-top:1px dotted #ddd; padding-top:10px;}

.adults-img{max-width: 800px; width: 100%; margin:0 auto 30px; display: block}

.clergy > li::after{content: ""; display: block; clear: both;}
.clergy > li{border: 3px dotted #ddd; padding:30px; margin-bottom: 30px; position: relative;}
.clergy .photo{max-width: 260px; min-width: 200px; width: 26%; border:15px solid #f2f2f7; float: left; margin-right: 30px}
.clergy .photo h3{text-align: center; background: #f2f2f7; font-size: 1.4em; color:#333; font-weight: 700; padding: 10px 0 20px;}
.clergy .photo img{width: 100%;}
.clergy .info{width: 21%;max-width: 240px; min-width: 200px; float: left;margin-right: 20px}
.clergy .info .name{font-family: 'NanumSquare';font-size: 1.7em;font-weight: 700; padding: 20px 0; border-bottom: 1px solid #ddd; margin-bottom: 20px; color: #000}
.clergy .info dl{width: 100%;}
.clergy .info dt{clear:left;float:left; display:block; margin:0 0 7px; width:40%;}
.clergy .info dd{padding:0 0 0 40%; margin:0 0 7px;}
.clergy .info dd:after{content: "";display: table;clear: both;}
.clergy .his{float: right; width: 48%; padding-top:92px; margin-left: 20px}
.clergy .his li{margin-bottom: 7px; position: relative;}
.clergy .his li::before{content: "-"; display: inline-block; position: absolute; top: 0px; left: -10px;}

.mass-con .time-wrap{display: table; width: 100%; border: 3px dotted #ddd; padding: 30px; position: relative;}
.mass-con .time-wrap > div{display: table-cell; width: 33%; border-left: 1px solid #ddd;padding-left: 30px;}
.mass-con .time-wrap::before{content: "\f51d"; display: block; font-family: 'Font Awesome 5 Free'; font-weight: 900; color:#f8f8f8; font-size: 8em; position: absolute; right: 30px; bottom: 30px; z-index: -1;}
.mass-con .time-wrap > div:first-child{border-left: 0;padding-left:0px;}
.mass-con .time-wrap > div h4{background: #f2f2f7; margin-right: 30px; padding:10px 20px; border-radius: 5px}
.mass-con .time-wrap > div dl{width: 100%; padding: 10px 20px}
.mass-con .time-wrap > div dt{clear:left;float:left; display:block; margin:0 0 7px; width:20%;}
.mass-con .time-wrap > div dd{padding:0 0 0 20%; margin:0 0 7px; height:19px;}
.mass-con .time-wrap > div dd span, .mass-con .time-wrap > div dd p{display: inline-block; margin-left: 10px;}

.sacrament-con{margin-top: 40px; position: relative;}
.sacrament-con ul{width: 100%; border: 3px dotted #ddd; padding: 30px;}
.sacrament-con ul::after{content: ""; display: block; clear: both;}
.sacrament-con li{width: 33%; float: left; border-left:1px solid #ddd;padding-left: 30px; padding-bottom: 15px; position: relative;}
.sacrament-con li:nth-child(3n+1){border-left:0;padding-left: 0px;}
.sacrament-con li span:first-child{font-weight: 700; display: block; margin-bottom: 5px; color:#000; font-size: 1.1em;font-family: 'NanumSquare';}
.sacrament-con li span:nth-child(2)::before{content: "-"; display: inline-block; margin-right: 5px;}
.sacrament-con::before{content: "\f0f3"; display: block; font-family: 'Font Awesome 5 Free'; font-weight: 900; color:#f8f8f8; font-size: 8em; position: absolute; right: 50px; bottom: 30px; z-index: -1;}

#content button.map{border:1px solid #c1c1c1; float: right; position: relative; top:-5px}
#content button.map::after{content: "\f3c5"; font-family: 'Font Awesome 5 Free'; font-weight: 900; display: inline-block; margin-left: 5px;}
#content button.map:hover{background-color: #eee;}
#content .api{width: 100%; height: 500px; background:#f2f2f7; margin-bottom: 30px;}

.trans{width:70px; height:25px; display:inline-block; vertical-align:middle; border-radius:5px; padding-top:5px; font-weight:700; font-size:0.8em; margin-right:10px; text-align:center}
.trans::after{display:inline-block; color:#fff}
.trans.line1{background-color:#003292}.trans.line1::after{content:"1호선"}
.trans.line2{background-color:#30b828}.trans.line2::after{content:"2호선"}
.trans.line3{background-color:#ff5f28}.trans.line3::after{content:"3호선"}
.trans.line4{background-color:#2e72d8}.trans.line4::after{content:"4호선"}
.trans.line5{background-color:#8839b1}.trans.line5::after{content:"5호선"}
.trans.line6{background-color:#994d0a}.trans.line6::after{content:"6호선"}
.trans.line7{background-color:#5b6d00}.trans.line7::after{content:"7호선"}
.trans.line8{background-color:#ea1f6b}.trans.line8::after{content:"8호선"}
.trans.line9{background-color:#c09f19}.trans.line9::after{content:"9호선"}
.trans.linein{background-color:#6590c1}.trans.linein::after{content:"인천1호선"}
.trans.linebn{background-color:#e8b614}.trans.linebn::after{content:"분당선"}
.trans.lineku{background-color:#2fc5a5}.trans.lineku::after{content:"경의중앙선"}
.trans.linesi{background-color:#ae3e3d}.trans.linesi::after{content:"신분당선"}
.trans.lineko{background-color:#588caa}.trans.lineko::after{content:"공항철도"}
.trans.lineju{background-color:#68bab6}.trans.lineju::after{content:"중앙선"}
.trans.linekug{background-color:#56c2c8}.trans.linekug::after{content:"경춘선"}
.trans.lineso{background-color:#ebb412}.trans.lineso::after{content:"수인선"}
.trans.bus1{background-color:#2e75b5}.trans.bus1::after{content:"간선버스"}
.trans.bus2{background-color:#70ad47}.trans.bus2::after{content:"지선버스"}
.trans.bus3{background-color:#ffc000}.trans.bus3::after{content:"순환버스"}
.trans.bus4{background-color:#e84c22}.trans.bus4::after{content:"광역버스"}
.trans.bus5{background-color:#70ad47}.trans.bus5::after{content:"마을버스"}
.trans.bus6{background-color:#595967}.trans.bus6::after{content:"일반버스"}
.trans.bus7{background-color:#395cb4}.trans.bus7::after{content:"좌석"}
.trans.bus8{background-color:#c91017}.trans.bus8::after{content:"직행"}
.trans.bus9{background-color:#70b0e0}.trans.bus9::after{content:"공항"}
.trans.bus10{background-color:#e0121a}.trans.bus10::after{content:"간선급행"}
.trans.bus11{background-color:#e0121a}.trans.bus11::after{content:"시외"}
.trans.lineujb{background-color:#f18819}.trans.lineujb::after{content:"경전철"}

#content .calender{font-family:'NanumSquare'; font-weight:400; position:relative;}
#content .calender .control{text-align:center; font-size:1.6em; font-weight:700;}
#content .calender .control .prev, #content .calender .control .next{position:relative; display:inline-block; top:3px;}
#content .calender .control .next::before{content:"\f054";}
#content .calender .control .prev::before{content:"\f053";}
#content .calender .control .next::before, #content .calender .control .prev::before{display:block; font-family:'Font Awesome 5 Free'; font-weight:900; font-size:30px; color:#babac7; transition:color .2s ease;}
#content .calender .control .prev:hover::before, #content .calender .control .next:hover::before{color:#333}
#content .calender table{width:100%; margin-top:20px; margin-bottom:10px}
#content .calender table th{background:#595967; color:#fff; font-size:1.2em; text-align:center; padding:15px 0}
#content .calender table td{font-size:1.1em;text-align:center; border:1px solid #f2f2f2; vertical-align:middle}
#content .calender table td p{display:inline-block; padding:20px 0;}
#content .calender table td.today{color:#000; font-weight:900;}
#content .calender table td.event{font-weight:700; background:#c03322; color:#fff;}

#content .event-list{background:#fff; width:100%; padding:30px; border:3px dotted #ddd}
#content .event-list li{font-size:1.1em; margin-bottom:10px; border-bottom:1px solid #eee; padding-bottom:10px;}
#content .event-list li:last-child{margin-bottom:0; border-bottom:0; padding-bottom:0px;}
#content .event-list .data{color:#c03322; font-weight:700; font-size:1.1em; display:inline-block; margin-right:15px; width:27%; position:relative; padding-left:15px;cursor:pointer;}
#content .event-list .data::before{content:""; width:5px; height:5px; background:#c03322; border-radius:15px; position:absolute; top:7px; left:0;}

.weekly_list{display:block; width:100%; margin-bottom:60px}
.weekly_list::after{content:""; display:block; clear:both;}
.weekly_list > div{display:block; width:25%; height:auto; float:left; padding:0 10px;text-align:center; margin-bottom:20px;}
.weekly_list img{width:100%; border:1px solid #ddd; height:320px}
.weekly_list button{height:60px; width:100%; font-weight:600;font-family:'NanumSquare'; font-size:18px; background:#f2f2f2; border:1px solid #ddd; border-top:0}
.weekly_list button:hover{background:#ddd}
.weekly_list button::after{content:"\f019"; display:inline-block; font-family:'Font Awesome 5 Free'; font-weight:600; color:#555; margin-left:15px;}
.weekly_list .title{font-family:'NanumSquare'; font-size:1.1em; font-weight:600;color:#c03322; margin-top:15px; white-space:nowrap;overflow:hidden; text-overflow:ellipsis;}
.weekly_list .data{margin-top:5px;}

@media (max-width:1199px){
    .info-img{float:none; display:block; width:100%;max-width:600px; margin:10px auto 20px;}
    .his{width:43% !important;}
}

@media (max-width:991px){
    #location{height:45px;}
    #location .container{padding:0}
    #location ul li{width:40%;height:45px;}
    #location ul li:first-child{width:13%; border-left:0}
    .history ul li strong{display:block; width:100%;}
    .history ul li::before{display:none}
    .history ul li strong span{border:0; background-color:#f3f3f8; width:100%; margin-bottom:10px; font-size:1.2rem;}
    .history ul li div{display:block;width:100%; line-height:160%; padding-bottom:40px; vertical-align:middle; text-align:justify}
    .his{width:26% !important;}
    .mass-con .time-wrap > div{width:50%; display:inline-block; vertical-align:top;border:0;}
    .mass-con .time-wrap > div:nth-child(2n+1){padding:0; border-right:1px solid #ddd}
    .mass-con .time-wrap::before, .sacrament-con::before{display:none;}
    .sacrament-con li{width:50%;}
    .sacrament-con li:nth-child(3n+1){border-left:1px solid #ddd;padding-left:30px;}
    .sacrament-con li:nth-child(2n+1){border-left:0;padding-left:0px;}
    #content .event-list .data{display:block; width:100%; margin-bottom:10px;}
}

@media (max-width:768px){
    .mHide{display:none !important;}
    .mShow{display:block !important;}
    .mImage{width:100%;max-width:768px; margin:10px 0;}
    .mH-table{display:none;}
    .mH-col{display:none;}
    #header{height:60px;}
    #header .header-wrap{padding:0 3%}
    #header .header-wrap h1{display:inline-block; left:3%;}
    #header .header-wrap h1 a{width:130px;height:55px; background-size:contain}
    #header .header-wrap ul{left:0px;height:1px;}
    #header .header-wrap ul li:first-child{display:none;}
    #header .header-wrap ul li{border-left:0px;padding:0px;display:block;}
    #header .header-wrap .btn-menu{display:block; position:absolute; right:3%; width:38px; height:38px; font-size:38px; color:#ccc; display:inline-block;}
    #header .header-wrap #gnb{position:fixed;z-index:99999; width:100%;right:-100%;top:0px;height:100%;background:rgba(0,0,0,0.5);transition:all 0.3s ease;}
    #header .header-wrap #gnb.active{right:0px;}
    #header .header-wrap #gnb .mn{width:87%;height:100%; background:#fff; display:block; float:right; padding:0;}
    #header .header-wrap #gnb .mn li{float:none;display:block;border-top:1px solid #ddd; text-align:left;height:auto}
    #header .header-wrap #gnb .mn li:last-child{border-bottom:1px solid #ddd;}
    #header .header-wrap #gnb .mn li ul li:last-child{border-bottom:0px;}
    #header .header-wrap #gnb .mn li a{padding:10px 20px;display:block;width:100%;}
    #header .header-wrap #gnb .mn li ul{width:100%; height:auto;padding:10px 0px;background:#eee;position:relative; left:0; top:0;float:none;margin:0;transform:none;}
    #header .header-wrap #gnb .mn li ul li{border-top:none;}
    #header .header-wrap #gnb .mn li ul li a{color:#333;padding:5px 33px;width:100%;}
    #header .header-wrap #gnb.active li ul{display:none;}
    #header .header-wrap #gnb.active li.on ul{display:block;}
    #header .header-wrap #gnb-bg{display:none !important;width:0 !important;height:0 !important;min-height:0 !important;overflow:hidden !important;box-shadow:none !important;}
    #header .header-wrap #gnb .btn-close{position:absolute; left:0; top:0px; cursor:pointer;display:block; width:10%; height:50px;}
    #header .header-wrap #gnb .btn-close::before{content:"\f057"; font-family:'Font Awesome 5 Free'; color:#fff;font-weight:600; font-size:3rem;}

    .container-wrap{margin-top:60px}
    #content{min-height:500px; padding:30px 0 50px}
    h2.title-style01{font-size:2rem; margin-bottom:20px}
    .text-style01{font-size:1.3rem;}
    .tab-list li{font-size:1.1rem;}

    .board_list{display:block;text-align:left;}
    .board_list .board_list_head{display:none;}
    .board_list .board_list_tr{display:block;border-top:1px solid #dfdfdf; padding:5px 0;}
    .board_list .board_list_tr:first-child{border-top:0px;}
    .board_list .board_list_tr div{display:inline-block;border-top:none;padding:5px 3%;font-size:0.8rem;}
    .board_list div.bl_title{display:block;padding-bottom:10px; font-weight:600; font-size:1rem;}
    .board_list div.bl_no{display:none;}
    .board_list div.bl_file:before{content:'파일:';display:inline-block; padding-right:5px;color:#888}
    .board_list div.bl_file > p{display:inline;}
    .board_list div.bl_data img{height:15px;vertical-align:middle}
    .board_list div.bl_date:before{content:'등록일:';display:inline-block; padding-right:5px;color:#888}
    .board_list div.bl_view:before{content:'조회:';display:inline-block; padding-right:5px;color:#888}
    .board_list div.bl_part:before{content:'[ ';display:inline-block;}
    .board_list div.bl_part:after{content:' ]';display:inline-block;}
    .board_list div.bl_employ:before{content:'공고기간 :';display:inline-block; padding-right:5px;color:#888}
    .board_list .board_list_tr.new{background:#f8f8f8}
    .list_num ul li{width:23px;height:25px; margin-left:1px}
    .search .info_txt{margin-bottom:10px; display:block}
    .photo_list div{width:50%; float:left; padding:10px;}
    .weekly_list > div{width:50%; margin-bottom:20px;}
    #container .api{height:300px; margin-bottom:20px}
    #container button.map{float:none; margin-bottom:20px; padding-top:6px; top:0}
    .clergy .photo, .clergy .info{width:45%; max-width:45%;}
    .clergy .his{clear:both; float:none; width:100% !important; padding:20px 30px 0; max-width:100%; min-width:100%; border-top:1px solid #ddd; margin:20px 0;}
}

@media (max-width:575px){
    #footer{padding:20px;}
    #footer span{display:block}
    #footer span::after{display:none}
    #footer .copyright{border-top:1px solid #6a6a7a; padding-top:10px; margin-top:10px; margin-bottom:0}
    .mass-con .time-wrap > div, .mass-con .time-wrap > div:nth-child(2n+1){width:100%; border:0 !important; padding:0}
    .mass-con .time-wrap > div h4{margin-right:0}
    .mass-con .time-wrap > div:last-child dl{margin-bottom:0px; padding-bottom:0}
    .sacrament-con li, .sacrament-con li:nth-child(3n+1){width:100%;border-left:0;padding-left:0px; border-bottom:1px solid #ddd; margin-bottom:20px;}
    .sacrament-con li:last-child{border-bottom:0; margin-bottom:0px; padding-bottom:0}
    .clergy .photo{width:100%; max-width:100%; float:none;}
    .clergy .info, .clergy .his{float:none; width:100% !important; padding:10px 0 0; max-width:100%; min-width:100%;}
    .clergy .his{padding-left:10px}
    .photo_list div{width:100%; float:none;}
    .weekly_list img{width:100%; border:1px solid #ddd; height:180px}
}