@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;}
#header .header-wrap { 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:right;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:100%;right:-50px; top:95px;display:none;z-index:100;  margin-top: 20px }
#header .header-wrap #gnb li ul li{display:block;float:none; background:none;padding-bottom:7px;font-weight:normal;text-align:right; height: 30px;}
#header .header-wrap #gnb li ul li a{font-size:1em;line-height:normal;padding:0px; color:#444; display: inline-block; width:120px;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%; 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;}
a.tel{   }

/* 리스트 스타일 */
.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*/
.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*/
.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_number*/
.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*/
.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*/
.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 */
.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 a:hover .img  div{ 
 cursor:pointer; -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1);transform:scale(1.1);transition: transform .5s; -o-transition: transform .5s; -moz-transition: transform .5s; -webkit-transition: transform .5s; }
 */.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{}
.history ul{}
.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-wrap{}
.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; position: relative; 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;
-moz-transition:color .2s ease;-o-transition:color .2s ease;-ms-transition:color .2s ease;-webkit-transition:color .2s ease;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; padding: ;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);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease; transform: }
#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:0px;background:none;position:relative; left:0; top:0;float:none;background:#eee;padding:10px 0px;margin: 0}
#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;}
#header .header-wrap #gnb.active li ul{display:none;}
#header .header-wrap #gnb.active li.on ul{display:block;}
#header .header-wrap #gnb-bg{height:0px!important;width:0px!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*/
.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 */
.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}

/* 
.read_wrap .read_text img.image {transition-property: transform; margin:100px auto;}
.read_wrap .read_text img.image90 {transition-property: transform; margin:200px auto; transform: rotate(90deg)  scale(1.5); -webkit-transform:rotate(90deg) scale(1.5);	-moz-transform:rotate(90deg) scale(1.5); -o-transform:rotate(90deg) scale(1.5);}
.read_wrap .read_text img.image180 {transition-property: transform; margin:200px auto; transform: rotate(180deg)  scale(1.5); -webkit-transform:rotate(180deg) scale(1.5);	-moz-transform:rotate(180deg) scale(1.5); -o-transform:rotate(180deg) scale(1.5);}
.read_wrap .read_text img.image270 {transition-property: transform; margin:200px auto; transform: rotate(270deg)  scale(1.5); -webkit-transform:rotate(270deg) scale(1.5);	-moz-transform:rotate(270deg) scale(1.5); -o-transform:rotate(270deg) scale(1.5);}

 */

 }

/* .image{transition-property:transform;transform:rotate(90deg);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-o-transform:rotate(90deg);}
.image90{transition-property:transform;transform:rotate(90deg)scale(1.4);-webkit-transform:rotate(90deg)scale(1.4);-moz-transform:rotate(90deg)scale(1.4);-o-transform:rotate(90deg)scale(1.4);}
.image180{transition-property:transform;transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);}
.image270{transition-property:transform;transform:rotate(270deg)scale(1.4);-webkit-transform:rotate(270deg)scale(1.4);-moz-transform:rotate(270deg)scale(1.4);-o-transform:rotate(270deg)scale(1.4);}


.maintype04 .image270{transition-property:transform;transform:rotate(270deg)scale(4);-webkit-transform:rotate(270deg)scale(4);-moz-transform:rotate(270deg)scale(4);-o-transform:rotate(270deg)scale(4);background-size:40% !important}
.maintype04 .image180{transition-property:transform;transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg); }
.maintype04 .image90{transition-property:transform;transform:rotate(90deg)scale(4);-webkit-transform:rotate(90deg)scale(4);-moz-transform:rotate(90deg)scale(4);-o-transform:rotate(90deg)scale(4);background-size:40% !important}

.read_wrap .read_text img.image{transition-property:transform;margin:150px auto;}
.read_wrap .read_text img.image90{transition-property:transform;margin:330px auto;transform:rotate(90deg)scale(1.5);-webkit-transform:rotate(90deg)scale(1.5);-moz-transform:rotate(90deg)scale(1.5);-o-transform:rotate(90deg)scale(1.5);}
.read_wrap .read_text img.image180{transition-property:transform;transform:rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);}
.read_wrap .read_text img.image270{transition-property:transform;margin:330px auto;transform:rotate(270deg)scale(1.5);-webkit-transform:rotate(270deg)scale(1.5);-moz-transform:rotate(270deg)scale(1.5);-o-transform:rotate(270deg)scale(1.5);}


.gallery-lista .img{background-color:#eee}
.gallery-lista .imgdiv.rotate{height:570px;transition-property:transform;transform:rotate(90deg)translateX(-150px);-webkit-transform:rotate(90deg)translateX(-150px);-moz-transform:rotate(90deg)translateX(-150px); -o-transform:rotate(90deg) translateX(-150px);} 

.layer_popup img.image90{transition-property:transform;transform:rotate(90deg)scale(1.4);-webkit-transform:rotate(90deg)scale(1.4);-moz-transform:rotate(90deg)scale(1.4);-o-transform:rotate(90deg)scale(1.4);margin:140px auto;}
.layer_popup img.image270{transition-property:transform;transform:rotate(270deg)scale(1.4);-webkit-transform:rotate(270deg)scale(1.4);-moz-transform:rotate(270deg)scale(1.4);-o-transform:rotate(270deg)scale(1.4);margin:140px auto;}

 
  */