/* base style */
#wrap{margin:0 auto;}
#main_wrap{margin-top:40px; border-top:1px solid #e3e3e3; padding-bottom:10px; background-image:url(../img/bg.png);}

/* top */
#top_wrap{position:relative; top:0; margin-bottom:5px;}
#top_frame{width:1200px; margin:0 auto;}
#top_frame img{vertical-align:middle;}
#top_logo{float:left;}
#top_logo > a{margin:15px 0 0 50px; display:block;}
#top_navbar{float:right; text-align:center; margin-top:25px;}
#top_navbar li{float:left; font-size:12px; padding:0 10px;}
#top_navbar li.log{font-weight:bold;}
#top_navbar li a{line-height:20px; display:inline-block; color:#000000;}
#top_navbar li a:hover{text-decoration:underline;}

/* menu */
#menu_wrap{border-bottom:3px double #e3e3e3; border-top:3px double #e3e3e3; background-color:#00598d;}
#menu_mob{display:none;}
#menu_frame{width:1250px; margin:0 auto;}
#menu_nav{text-align:center;}
#main_menu{font-size:0px;}
#main_menu > ul > li{display:inline-block; font-size:17px; padding:0px; text-align:center;}
#main_menu > ul > li > a{height:50px; line-height:50px; display:block; position:relative; padding:0px 25px; color:white; font-weight:bold;}
#main_menu > ul > li > a:hover{color:#a8dfff;}
#main_menu > ul > li > a > u{width:1px; height:3px; display:block; position:absolute; left:50%; bottom:0px; transition:all .2s ease;}
#main_menu > ul > li:hover u{width:50%; margin-left:-25%; background-color:#a8dfff;}
#main_menu > ul > li.on > a{color:#6cc9ff;}
#main_menu > ul > li.on > a > u{width:50%; margin-left:-25%; background-color:#6cc9ff;}
#main_menu > ul > li:hover > ul.sub_menu > li{max-height:40px;}
.sub_menu{overflow:hidden; z-index:10; padding-top:4px; position:absolute; background-color:transparent;}
.sub_menu > li{float:left; max-height:0px; transition:all .5s;}
.sub_menu > li > a{font-size:12px; text-align:center; padding:10px 10px; display:block; font-weight:bold; color:#6b6b6b; transition:padding .2s;}
.sub_menu > li > a:hover{color:#0093e9; padding:7px 10px 13px 10px ; transition:padding .2s;}


/* home style */
#home_wrap{width:1200px; margin:0 auto; padding:30px 0;}
#main_left{box-shadow:0px 0px 5px 3px #e3e3e3; float:left; width:400px; height:800px; background-color:white;}
#main_right{float:left; margin-left:10px; width:790px;}
#maintabevent{position:relative; height:300px; box-shadow:0px 0px 5px 3px #e3e3e3; background-color:white;}
#tabbtnlist{z-index:8; position:absolute; bottom:15px; left:50%; transform:translateX(-50%);}
#tabbtnlist > div{user-select:none; background-color:white; float:left; line-height:13px; font-size:13px; color:#6b6b6b; font-weight:bold; border:1px solid #e3e3e3; margin:0 10px; padding:10px 15px; cursor:pointer;}
#tabbtnlist > div:hover{color:#0093e9;}
#tabbtnlist > div.active{background-color:#0093e9; color:#eeeeee; border:1px solid #0093e9;}
#tabevent_inner{position:relative; height:100%; overflow:hidden; width:100%;}
.tab_item{opacity:0; width:100%; position:absolute; height:100%; transition:opacity .5s;}
.tab_item.active{opacity:1; z-index:7;}
.tab_item > a{position:relative; display:block; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8)}
.tab_item > a > img.worship{float:right;}
.tab_item > a > img.praise{position:absolute;}
.tab_item > a > .container.worship{width:auto; overflow:hidden; padding:0 10px; text-align:right; color:white; height:100%;}
.tab_item > a > .container.worship > .tab_title{padding-top:50px; font-weight:bold; font-size:24px; text-shadow:0px 0px 10px #000000; word-break:keep-all;}
.tab_item > a > .container.worship > .tab_words{margin-top:30px; word-break:keep-all;}
.tab_item > a > .container.worship > .tab_date{margin-top:5px;}
.tab_item > a > .container.praise{min-height:204px; position:absolute; background-color:rgba(0,0,0,0.5); color:#ffffff; width:80%; margin:0 auto; margin-top:30px; left:50%; transform:translateX(-50%); text-shadow:0px 0px 10px #000000; text-align:center;}
.tab_item > a > .container.praise > .tab_title{width:80%; font-size:24px; font-weight:bold; margin:0 auto; margin-top:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.tab_item > a > .container.praise > .tab_date{margin-top:120px; font-weight:bold;}
#maingrid{
    display:-ms-grid; display:grid;
    -ms-grid-rows:240px 10px 240px; grid-template-rows:240px 240px;
    -ms-grid-columns:300px 10px 235px 10px 235px; grid-template-columns:260px 260px 260px;
    gap:5px; margin-top:15px;
}
#maingrid > #main_recent{-ms-grid-row:1; -ms-grid-column:1; -ms-grid-column-span:3; grid-row:1; grid-column:1 / span 2;}
#maingrid > #main1{-ms-grid-row:3; -ms-grid-column:1; grid-row:2; grid-column:1;}
#maingrid > #main2{-ms-grid-row:3; -ms-grid-column:3; grid-row:2; grid-column:2;}
#maingrid > #main3{-ms-grid-row:1; -ms-grid-column:5; grid-row:1; grid-column:3; position:relative;}
#maingrid > #main4{-ms-grid-row:3; -ms-grid-column:5; grid-row:2; grid-column:3; position:relative;}
#maingrid > div{box-shadow:0px 0px 5px 3px #e3e3e3; border-radius:5px; background-color:white; overflow:hidden;}
#main3 .title{height:60px; padding:10px; background-color:#1e2022; text-align:center; color:#f0f5f9; font-size:20pt;}
#main3 .title i{color:red; padding-right:10px; vertical-align:middle;}
#main3 li{border-top:1px solid #f0f5f9; height:60px;}
#main3 li a{padding:20px 10px; display:block; height:100%; font-weight:bold; background-color:#52616b; color:#f0f5f9; transition:all .3s;}
#main3 li a:hover{padding:20px 10px 20px 20px;}
.listbox{padding:10px 10px 0 10px;}
.listbox a:hover{color:#6b6b6b; text-decoration:underline;}
.listbox > p{font-weight:600; border-bottom:1px solid #e3e3e3;}
.listbox > p > a{font-size:11px; color:#c5c5c5; float:right; margin-top:5px;}
.listbox > p > a:hover{color:#999999;}
.listbox ul{padding:9px 0 0 0; font-size:12px;}
.listbox li{padding:3px 0;}
.listbox li::after{clear:both; visibility:hidden; display:block; content:""}
.listbox li:first-child{padding-top:0px;}
.listbox li > a{display:block; float:left; max-width:calc(100% - 20px); text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.listbox .icon{margin-left:2px; vertical-align:text-top;}
.listbox .date{float:right; text-align:right;}
#main_bottom{
    float:left; margin-top:10px; width:100%;
    display:-ms-grid; display:grid; gap:5px;
    -ms-grid-rows:240px; grid-template-rows:240px;
    -ms-grid-columns:auto 10px 260px; grid-template-columns:auto 260px;
}
#main_bottom > div{box-shadow:0px 0px 5px 3px #e3e3e3; border-radius:5px; overflow:hidden; background-color:white;}
#main_bottom > #main_photo{padding:20px 30px 0 30px;}
#main_bottom > #main_photo > p{padding:3px; font-size:16px; font-weight:bold; color:#0093e9; border-bottom:1px solid #e3e3e3;}
#main_bottom > #main_photo > p > a{float:right; margin-top:5px; color:#c5c5c5; font-size:11px;}
#main_bottom > #main_photo > p > a:hover{color: #999999;}
#main_bottom > #way_to{width:260px; height:240px; position:relative; float:left;}
#main_bottom > #way_to > #map{height:calc(100% - 50px)}
#main_bottom > #way_to > .map_desc{height:50px; background-color:#353535; width:100%; position:absolute; bottom:0; color:white; text-align:center;}
#main_bottom > #way_to > .map_desc .address{font-size:10px; word-break:keep-all;}
#photowrap{
    display:-ms-grid; display:grid;
    -ms-grid-rows:160px; grid-template-rows:160px;
    -ms-grid-columns:18% 2.45% 18% 2.45% 18% 2.45% 18% 2.45% 18%; grid-template-columns:18% 18% 18% 18% 18%;
    gap:2.45%; margin-top:15px;}
#photowrap > *:nth-child(1){-ms-grid-row:1; -ms-grid-column:1; grid-row:1; grid-column:1;}
#photowrap > *:nth-child(2){-ms-grid-row:1; -ms-grid-column:3; grid-row:1; grid-column:2;}
#photowrap > *:nth-child(3){-ms-grid-row:1; -ms-grid-column:5; grid-row:1; grid-column:3;}
#photowrap > *:nth-child(4){-ms-grid-row:1; -ms-grid-column:7; grid-row:1; grid-column:4;}
#photowrap > *:nth-child(5){-ms-grid-row:1; -ms-grid-column:9; grid-row:1; grid-column:5;}
.photobox > a > .photo{display:flex; justify-content:center; align-items:center; height:130px;}
.photobox > a > .photo img{display: block; max-width:100%; max-height:100%; width: auto; height: auto;}
.photobox > a > p{text-align:center; font-size:14px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; margin-top:5px; padding:0px 5px;}
.photobox > a:hover > p{text-decoration:underline; color:#6b6b6b;}
.photobox > a{display:block;}


/* board style - list */
#content{min-height:500px; box-shadow:0px 0px 5px 3px #e3e3e3; background-color:white; overflow:hidden;}
#content.list{padding:10px 30px; float:left; margin-left:80px; width:calc(100% - 300px);}
#title_wrap{width:100%; height:100px; background-image:url(../img/title_bg.png); border-top:1px double #e3e3e3; position:relative;}
#title{margin:35px 0; line-height:30px; color:white; text-align:center;}
#crtmap{width:1200px; position:absolute; top:0; left:50%; transform:translateX(-50%); color:white; margin:40px 0; line-height:20px; font-size:14px;}
#wrapper{width:1250px; margin:0 auto; padding:30px 0;}
#side_nav_wrap{float:left; width:200px; margin-left:10px; box-shadow:0px 0px 5px 3px #e3e3e3; background-color:white; padding:20px;}
#side_title{font-weight:bold; font-size:24px; padding:0 0 5px 10px; border-bottom:3px solid #666666; text-shadow:2px 2px #dbdbdb;}
#side_nav{font-size:16px;}
#side_nav > ul > li.mission{border-bottom:1px solid #e3e3e3;}
#side_nav > ul > li > a{display:block; padding:10px; border-bottom:1px solid #e3e3e3; color:#666666; font-weight:600; transition:all .2s;}
#side_nav > ul > li:last-child > a{border-bottom:none;}
#side_nav > ul > li > a:hover{color:#0093e9; padding-left:18px; transition:all .2s;}
#side_nav > ul > li.on > a{color:#0093e9; border-right:3px solid #0093e9;}
#side_nav > ul > li > ul > li > a{display:block; padding:5px 0 5px 20px; color:#666666; font-size:14px;}
#side_nav > ul > li > ul > li > a:hover{color:#0093e9}
#side_nav > ul > li > ul > li.on > a{color:#0093e9; font-weight:bold;}

#list_table{margin:10px 0 20px 0; width:100%;}
#list_table tr.notice{font-weight:bold; background-color:#e3e3e3;}
#list_table th{padding:10px 0; border-top:3px solid #666666;}
#list_table tbody tr{border-top:1px solid #e3e3e3;}
#list_table td{padding:10px 5px; line-height:16px; font-size:14px;}
#list_table td:not(.td_title){text-align:center; font-size:12px;}
#list_table .th_no{width:40px;}
#list_table .th_title{width:500px;}
#list_table .th_writer{width:60px;}
#list_table .th_date{width:90px;}
#list_table .th_views{width:55px;}
#list_table .td_title #mob_list_info{display:none;}
#list_table .td_title a{display:block; float:left; max-width:calc(100% - 100px); text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#list_table .td_title a:hover{text-decoration:underline; color:#6b6b6b;}
#list_table .icon_wrap{margin-left:5px; float:left;}
#list_table .icon{vertical-align:sub; float:left;}
#list_table .cmt_count{float:left; vertical-align:sub; margin-left:5px; color:#aaaaaa;}
#list_table td.no_list{font-size:14px; vertical-align:middle;}
#pic_table{margin-bottom:50px; min-height:100px;}
#pic_table > a > .container{float:left; height:200px; width:200px; margin-right:22px; margin-top:20px;}
#pic_table > a:hover > .container > .con_date,
#pic_table > a:hover > .container > .con_title{text-decoration:underline; color:#6b6b6b;}
#pic_table .no_list{text-align:center; font-size:14px; line-height:100px;}
#pic_table .container > img{box-shadow:3px 3px 5px 5px #e3e3e3;}
#pic_table .container > .con_title{margin:20px 25px 0 25px; text-align:center; width:150px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#pic_table .container > .con_date{text-align:center; font-size:11px;}

#pagination{width:auto; margin:0 auto; text-align:center; position:relative;}
#pagination > li{display:inline-block;}
#pagination > li > a,
#pagination > li > span{display:inline-block; padding:8px 10px; margin:3px; border:1px solid #dadada; font-size:12px; line-height:12px;}
#pagination > li.disabled > span{color:#9e9e9e}
#pagination > li.active > span{color:#ffffff; font-weight:bold; background-color:#303030;}
#to_write{position:absolute; top:0px; right:0px;}
#to_write > a{padding:8px 10px; background-color:black; color:white; font-size:12px; font-weight:bold; margin:3px; display:block; line-height:14px;}

#search_wrap{text-align:center; margin-top:20px;}
#search_wrap input,
#search_wrap select{height:40px; padding:5px 10px; border:1px solid #a3a3a3;}
#search_wrap input:focus,
#search_wrap select:focus{border:1px solid #0093e9;}

/* board style - fixedview */
.fixedview{width:100%; margin:0 auto;}
#welcome.fixedview{width:97%; margin-top:10px; word-break:keep-all;}
#way_to_church.fixedview{width:80%; margin-top:30px;}
#nurture.fixedview{width:80%;}

#fixed_pics{height:200px; margin-bottom:10px;}

/* board style - fixedview - history */
#history_btn_wrap{text-align:right; font-family:'NanumBarunGothic'; margin-bottom:20px;}
#history_btn_wrap > .container{user-select:none; display:inline-block; padding:10px 10px; margin:0 10px; font-weight:bold; text-shadow:2px 2px #e6e6e6; font-size:20px; color:#b6b6b6; cursor:pointer;}
#history_btn_wrap > .container.on{color:#0093e9;}
#history_wrap{width:100%;}
#history_wrap > .history_table{display:none;}
#history_wrap > .history_table.on{display:block;}
#history_wrap > .history_table > table{table-layout:fixed; width:100%;}
#history_wrap > .history_table > table td{padding:10px; font-size:14px;}
#history_wrap > .history_table > table .year{width:60px; font-size:16px; font-weight:bold;}
#history_wrap > .history_table > table .date{width:75px; text-align:left; border-bottom:1px solid #e3e3e3;}
#history_wrap > .history_table > table .content{border-bottom:1px solid #e3e3e3; word-break:keep-all; width:calc(100% - 135px);}

/* board style - fixedview - community */
#community > #community_wrap{font-size:0px;}
#community > #community_wrap > .c_top{background-image:url(../img/community_bg_01.png); position:relative; text-align:center;}
#community > #community_wrap .c_01{font-size:30px; padding:30px 40px; word-break:keep-all;}
#community > #community_wrap .community_image{position:relative;}
#community > #community_wrap .community_image > img{width:calc(100% - 40px); margin:0 20px; border:8px double black;}
#community > #community_wrap .c_02{font-size:20px; padding:20px; word-break:keep-all;}
#community > #community_wrap .c_youtube{position:absolute; transition:all .5s; max-width:80px; float:left; max-height:80px; overflow:hidden; bottom:20px; left:40px; background-color:rgba(0,0,0,0.7); border-radius:50px; cursor:pointer; color:white; font-weight:bold; font-size:14px; padding-right:20px; line-height:80px;}
#community > #community_wrap .c_youtube:hover{transition:all .5s; max-width:200px;}
#community > #community_wrap .c_youtube:hover > img{transform:rotate(360deg); transition:all .5s;}
#community > #community_wrap .c_youtube > img{padding:10px; float:left; transition:all .5s;}
#community > #community_wrap .c_03,
#community > #community_wrap .c_04{background-color:rgba(188, 188, 188, 0.1)}
#community > #community_wrap > .c_top > .container > .title{font-size:35px; position:relative; padding:10px; color:black; font-weight:bold;}
#community > #community_wrap > .c_top > .container > .title > u{width:200%; height:5px; background-color:#333333; position: absolute; bottom:0px; left:-50%; box-shadow:0px 0px 10px 3px #333333;}
#community > #community_wrap > .c_top > .container > .content{padding:15px 0px; color:black; font-weight:bold; background-color:rgba(255,255,255,0.5);}
#community > #community_wrap > .container > .title{padding:20px 5px 5px 10px; margin:0 5px 15px 5px; border-bottom:3px double #c5c5c5; color:black; font-weight:bold; font-size:30px; text-shadow:1px 1px 2px #929292;}
#community > #community_wrap > .container > .content{font-size:13px; padding:10px;}


/* board style - detail */
#content.detail{padding:10px 80px; float:left; margin-left:30px; width:1010px; position:relative;}
#content.detail p > img{cursor:pointer; margin:0 auto;}
#detail_header{border-bottom:2px solid #666666; padding:5px 10px; margin-top:10px;}
#post_info{float:right; font-size:12px; color:#999999;}
#post_additional_info{font-size:14px;}
#post_additional_info .container{border-bottom:1px dotted #999999; padding:3px 10px;}
#post_additional_info .title{font-weight:bold; margin:5px 0; display:inline-block; min-width:70px; padding:0px 5px;}
#file_wrap{font-size:12px; text-align:right; padding-top:5px;}
#file_wrap .icon{vertical-align:sub;}
#file_wrap a:hover{color:#999999; text-decoration:underline;}
#detail_content{padding:10px 10px 30px 10px; font-size:14px; border-bottom:1px solid #999999;}
#detail_content > .youtube_container {float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;}
#detail_content > .youtube_container > iframe {position:absolute; top:0; left:0; right:0; width:100%; height:100%; margin-left:auto; margin-right:auto;}
#detail_content > p > a{text-decoration:underline;}
#detail_content > p > a:hover{color:#999999;}
#detail_content img{display:block; margin-bottom:5px; max-width:100%; height:auto!important;}
#detail_content > .youtube_link{margin:5px 0;}
#detail_content > .youtube_link > img{display:inline; margin:0px; vertical-align:sub;}
#detail_content > .youtube_link > a{font-weight:bold; color:#0093e9;}
#detail_content > .youtube_link > a:hover{color:#007dc5;}

/* board style - detail - photopopup */
#photopopup{display:none; position:absolute; max-width:80%;}
#photopopup .carousel-inner{width:100%; margin:0 auto;}
#photopopup .carousel-control-next{right:-60px;}
#photopopup .carousel-control-prev{left:-60px;}
#photopopup .carousel-control-next,
#photopopup .carousel-control-prev{color:white; border:none; opacity:1; background-color:black;}
#photopopup .carousel-control-next:hover,
#photopopup .carousel-control-prev:hover{color:black;}
#photopopup .carousel-control-prev:hover,
#photopopup .carousel-control-next:hover{background-color:white;}

/* board style - comment */
#comment_write_wrap{padding:20px; border:1px solid #e3e3e3; margin:20px 0;}
#comment_write{width:100%; height:100px; resize:none; border:none;}
#comment_submit{float:right; padding:10px 20px; border:1px solid #e3e3e3; cursor:pointer;}
#comment_opener_wrap{margin-bottom:20px;}
#comment_opener{cursor:pointer; width:auto; font-size:16px; text-align:left; line-height:16px;}
#cmt_toggle{margin-left:10px; vertical-align:top; transition:.2s all;}
#cmt_toggle.up{transform:rotate(180deg);}
#comment_list_wrap{border-bottom:1px solid #999999; border-top:1px solid #999999;}
#comment_list_wrap .container{
    display:-ms-grid; display:grid;
    -ms-grid-rows:auto; grid-template-rows:auto;
    -ms-grid-columns:60px 10px calc(100% - 155px) 10px 75px; grid-template-columns:60px auto 75px;
    gap:0 10px; border-top:1px solid #e3e3e3; font-size:13px; line-height:20px; padding:10px;
}
#comment_list_wrap .container > *:nth-child(1){-ms-grid-row:1; -ms-grid-column:1; grid-row:1; grid-column:1;}
#comment_list_wrap .container > *:nth-child(2){-ms-grid-row:1; -ms-grid-column:3; grid-row:1; grid-column:2;}
#comment_list_wrap .container > *:nth-child(3){-ms-grid-row:1; -ms-grid-column:5; grid-row:1; grid-column:3;}
#comment_list_wrap .container:first-child{border-top:none;}
.cmt.name{font-weight:bold;}
.cmt.content{word-break:break-all;}
.cmt.date_del{font-size:12px; color:#9e9e9e; width:75px; position:relative;}
.cmt.date_del img{vertical-align:sub; cursor:pointer; position:absolute; right:0px; top:1x;}
.no_comment{padding:30px 10px;}
#buttons_wrap{margin-top:10px;}
#buttons_wrap .left{float:left;}
#buttons_wrap .right{float:right;}
#buttons_wrap .btn{font-size:14px; padding:5px 10px; border-width:1px 1px 3px 1px; border-style:solid; margin:0 2px; color:#fff; text-shadow:0px 0px 2px #3b3b3b;}
#buttons_wrap .blue{border-color:#0093e9; background-color:#00a2ff;}
#buttons_wrap .grey{border-color:#5c5c5c; background-color:#797979;}
#prev_next_wrap{margin-top:40px; border-bottom:1px solid #999999; border-top:1px solid #999999;}
#prev_wrap, #next_wrap{padding:5px;}
#prev_wrap > div,
#next_wrap > div{float:left; line-height:22px; font-size:14px;}
#prev_next_wrap .desc{margin-right:10px;}
#prev_next_wrap .desc img{vertical-align:sub;}
#prev_next_wrap .title > a:hover{color:#999999; text-decoration:underline;}
#prev_next_wrap .title .disabled{color:#aaaaaa;}
#prev_next_wrap .date{float:right; font-size:12px; color:#aaaaaa; margin-right:10px;}

/* board style - write */
#content.write{width:1010px; margin:0 auto; padding:10px 80px;}
#write_wrap{padding:50px 0;}
#write_wrap h2{text-align:center;}
#write_wrap select{border:1px solid #c5c5c5; height:40px; font-size:14px; line-height:14px; background-color:white; width:90px; margin-right:20px;}
#write_wrap .field_wrap input{padding:8px; border:1px solid #c5c5c5; width:684px; height:40px; font-size:14px; line-height:14px;}
#write_wrap .field_wrap input.full{width:600px;}
#write_wrap .field_wrap .tag{margin:0px;}
#write_wrap .field_wrap input.half{width:330px;}
#write_wrap .field_wrap input.required{background-image:url(../img/required.png); background-repeat:no-repeat; background-position:right top;}
#write_wrap .field_wrap input.reservation{width:200px; margin-right:10px;}
#write_wrap .field_wrap input.reservation:read-only{background-color:rgba(119, 119, 119, 0.5);}
#write_wrap #button_wrap{text-align:center;}
#write_wrap input[type="submit"]{width:200px; margin-top:20px; cursor:pointer; height:50px;}
#write_wrap .field_wrap{margin:10px 10px; display:inline-block; white-space:nowrap;}
#write_wrap .field_wrap.content{width:calc(100% - 20px)}
#write_wrap .field_wrap label{padding:5px; border-left:3px solid #0093e9; display:block;}
#write_wrap .field_wrap.error_label label{border-left:3px solid #fa5555;}
#write_wrap .field_wrap .error{font-size:12px; color:#fa5555; font-weight:bold;}
#write_wrap .field_wrap .input_wrap{margin-top:5px;}
#write_wrap .field_wrap .help_text{font-size:12px;}
#write_wrap .field_wrap input[type="checkbox"]{display:inline-block; width:40px; margin:0px;}
#write_wrap .field_wrap .input_wrap > a{display:inline-block; margin-bottom:10px;}
#write_wrap #file_add{padding:0px; vertical-align:baseline; cursor:pointer; background-color:white; color:#0093e9; border:none; font-weight:bold; font-size:14px;}
#write_wrap .file_delete{cursor:pointer; vertical-align:middle; margin-left:5px;}
#fileform_wrap{display:inline-block; margin:10px;}
#fileform_wrap > label{padding:5px; border-left:3px solid #0093e9; display:inline-block;}
#fileform_wrap .field_wrap{display:block;}
#fileform_wrap .field_wrap .input_wrap{display:inline-block;}
#fileform_wrap .field_wrap .input_wrap .filecount{padding:5px; border-right:2px solid #c5c5c5; margin-right:5px;}
#fileform_wrap .field_wrap.file .input_wrap input[type="checkbox"],
#fileform_wrap .field_wrap.file .input_wrap label,
#fileform_wrap .field_wrap.file .delete input[type="checkbox"]{display:none;}
#fileform_wrap .field_wrap.file .delete .delete_label{display:inline-block; vertical-align:top; border:1px solid #c5c5c5; color:#c5c5c5; border-radius:5px; font-weight:bold; cursor:pointer;}
#fileform_wrap .field_wrap.file .delete input:checked + label{background-color:#c5c5c5; color:white;}

/* Footer */
#footer_wrap{position:relative; bottom:0; background-color:#c5c5c5; padding:20px 0;}
#footer_wrap .container{text-align:center;}
#footer_wrap .container address p{margin-top:10px; font-size:15px;}
#footer_wrap .container address span{display:inline-block; padding:2px 5px;}
#footer_wrap .container p{font-size:12px; margin-top:10px;}
#footer_wrap #desktop_mode{padding:5px 20px; font-size:15px; font-weight:bold; width:100px; margin:10px auto; background-color:#0093e9; color:white; cursor:pointer;}

/* 모바일 전환 */
#to_mobile{text-align:center; font-size:20px; font-weight:bold; border:5px double #0093e9; color:#0093e9;}

/* Modal */
#modal{width:100%; height:100%; background-color:rgba(0,0,0,0.6); display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999;}
#modal.on{display:block;}

/* mobile css */
body.mob_menu_on{overflow:hidden;}
#mob_menu_wrap,
#header_mob,
#mob_menu_btn,
#mob_home_btn,
#mob_menu .mob_menu_toggle{display:none;}

/* 반응형 */
@media screen and (max-width:1250px){
    /* base */
    #menu_frame, #header_wrap, #main_wrap, #wrapper, #footer_wrap{width:100%;}
    /* top */
    #header_wrap{text-align:center;}
    #menu_nav{width:auto; float:none; margin:0 auto; margin-top:0px;}
    #main_menu li{font-size:17px;}
    #main_menu > ul > li{position:relative;}
    #main_menu > ul > li:hover > ul.sub_menu{box-shadow:0px 3px 3px 1px #e3e3e3;}
    .sub_menu{width:100%; padding-top:2px;}
    #main_menu > ul > li:hover > ul.sub_menu > li{border-top:1px solid #ffffff;}
    .sub_menu li{float:none; background-color:#00598d; transition:all .2s;}
    .sub_menu li a{color:#ffffff;}
    .sub_menu li a:hover{color:#a8dfff;}
    #top_frame{width:90%;}
    #top_logo a{margin:5px 0px 0px 0px;}
    /* main */
        /* home */
    #home_wrap{width:100%;}
    #main_left{display:none;}
    #main_right, #main_photo{float:none;}
    #main_right{margin:0 auto;}
    #main_bottom{
        float:none; margin:10px auto; width:790px;
        display:-ms-grid; display:grid; gap:5px;
        -ms-grid-rows:240px; grid-template-rows:240px;
        -ms-grid-columns:auto; grid-template-columns:auto;
    }
    #photowrap{
        display:-ms-grid; display:grid;
        -ms-grid-rows:180px; grid-template-rows:180px;
        -ms-grid-columns:30% 5% 30% 5% 30%; grid-template-columns:30% 30% 30%;
        gap:5%; margin-top:15px;
    }
    #photowrap > *:nth-child(1){-ms-grid-row:1;-ms-grid-column:1; grid-row:1; grid-column:1;}
    #photowrap > *:nth-child(2){-ms-grid-row:1;-ms-grid-column:3; grid-row:1; grid-column:2;}
    #photowrap > *:nth-child(3){-ms-grid-row:1;-ms-grid-column:5; grid-row:1; grid-column:3;}
    #main_bottom > #way_to{display:none;}
        /* board */
    #crtmap{width:95%;}
    #content.list{padding:0px; width:70%;}
    #content.detail{padding:0px; width:70%;}
    #content.write{width:95%;}
    #wrapper{margin:0;}
    #side_nav_wrap{width:20%; margin:0 0 0 2%;}
                /* list */
    #content.list{margin-left:30px;}
    #list_table .th_title{width:400px;}
    #list_table .th_date{width:100px;}
                /* detail */
    #content.detail{margin-left:2%;}   
    #nurture > .section > .content > .image_01{float:none; margin:0 auto;}
    #nurture > .section.s01 > .content > .container{float:none; margin:0px; padding:15px; text-align:center;}
    #footer_wrap #desktop_mode{display:block;}
}

@media screen and (max-width:970px){
    #header_mob{height:80px; width:100%; box-shadow:0px 0px 3px 1px #8f8f8f; position:sticky; top:0px; z-index:99; background-color:white;}
    #mob_menu_btn{float:left; margin: 16px 0 0 20px; border:2px solid #818181; border-radius:5px; display:none;}
    #mob_menu_btn img,
    #mob_home_btn img{vertical-align:middle;}
    #mob_home_btn{float:right; margin:16px 20px 0 0; border:2px solid #818181; border-radius:5px;}
    #mob_logo{width:180px; margin:0 auto; height:auto;}
    #mob_logo img{margin-top:20px;}
    /* 모바일 사이드 메뉴 */
    #mob_menu_wrap{opacity:0; display:block; flex:0; width:280px; transform:translateX(-100%); position:fixed; box-shadow:0px 0px 5px 3px #444444; background-color:white; height:100vh; z-index:9999; overflow-y:auto; overflow-x:hidden; transition:all .3s ease-in-out 0s;}
    #mob_menu_wrap.mob_menu_on{opacity:1; transform:translateX(0); flex:0 0 100%;}
    #mob_menu_top_wrap{height:80px; background-color:#0093e9}
    #mob_menu_top_wrap .container_01{user-select:none; color:white; font-size:12px; padding:2px; background-color:#00598d; text-align:center;}
    #mob_menu_top_wrap .container_02{height:calc(100% - 22px)}
    #mob_menu_top_wrap img{vertical-align:middle;}
    #mob_menu_close{float:right; height:100%; width:58px; line-height:54px; background-color:#818181; text-align:center;}
    #mob_login_wrap{float:left; width:calc(100% - 58px);}
    #mob_login_wrap > ul > li{float:left; font-size:10px;}
    #mob_login_wrap > ul > li.half{width:50%;}
    #mob_login_wrap > ul > li.full{width:100%;}
    #mob_menu{display:block; width:100%; overflow:auto; height:100%;}
    #mob_menu a{display:block;}
    #mob_menu > ul{float:left; text-align:left; width:100%;}
    #mob_menu > ul.on > h3{border-right:3px solid #0093e9;}
    #mob_menu > ul > h3{padding:15px 10px; border-bottom:1px solid #666666; width:100%; margin:0 auto;}
    #mob_menu > ul > li{max-height:0px; overflow:hidden; border:none; font-size:14px; transition:max-height .3s;}
    #mob_menu > ul > li > a{padding:10px 10px;}
    #mob_menu > ul.show > li{border-bottom:1px dotted #b6b6b6; max-height:50px; transition:max-height .3s;}
    #mob_menu > ul > li.mission{border-bottom:none;}
    #mob_menu > ul > li.mission > em{font-weight:bold; display:block; position:relative; border-bottom:1px solid #b6b6b6; padding:10px 10px;}
    #mob_menu > ul > li.mission > ul{font-size:13px; display:none;}
    #mob_menu > ul > li.mission > ul > li{padding:10px 10px; border-bottom:1px dotted #b6b6b6;}
    #mob_menu > ul > li.mission > ul > li:last-child{border:none;}
    #mob_menu > ul > li.mission.show{max-height:100%; transition:0s;}
    #mob_menu > ul > li.mission.show > ul{display:block; border-bottom:1px solid #b6b6b6;}
    #mob_menu > ul > li.mission img{transform:rotate(180deg); position:absolute; right:10px; top:12px; transition:all .3s;}
    #mob_menu > ul > li.mission.show img{transform:rotate(0deg);}
    #mob_menu .mob_menu_toggle{display:block; float:right; margin-top:5px; transform: rotate(180deg); transition:all .3s;}
    #mob_menu > ul.show .mob_menu_toggle{transform: rotate(0deg);}


    /* base */
    #menu_frame, #main_wrap, #wrapper, #footer_wrap{width:100%;}
    #main_wrap{border:none;}
    #header_wrap, #side_nav_wrap{display:none;}
    #header_mob,
    #mob_menu_btn,
    #mob_home_btn{display:block;}
    /* main */
    #main_wrap{width:100%; margin:0 auto;}
        /* home */
    #main_right{width:98%; margin:0 auto;}
    #maingrid{
        -ms-grid-rows:240px 10px 240px 10px 240px; grid-template-rows:240px 240px 240px;
        -ms-grid-columns:49% 2% 49%; grid-template-columns:260px calc(48% - 260px) 48%;
        gap:10px 2%;
    }
    #maingrid > #main_recent{-ms-grid-row:1;-ms-grid-column:1; grid-row:1; grid-column:1 / span 3;}
    #maingrid > #main1{-ms-grid-row:1;-ms-grid-column:3; grid-row:2; grid-column:1 / span 2;}
    #maingrid > #main2{-ms-grid-row:3;-ms-grid-column:1; grid-row:2; grid-column:3;}
    #maingrid > #main4{-ms-grid-row:3;-ms-grid-column:3; grid-row:3; grid-column:1;}
    #maingrid > #main3{-ms-grid-row:5;-ms-grid-column:1; grid-row:3; grid-column:2/ span 2;}
    #main3{text-align:center;}
    #main_bottom{width:98%;}
    #main_photo{width:100%;}
        /* board */
    #crtmap{display:none;}
    #content.list,
    #content.detail{width:90%; margin:0 auto; float:none;}
    #content.write{padding:0px;}
    #title_wrap{position:sticky; top:0px; box-shadow:0px 1px 3px 1px #8f8f8f; height:80px; border:none; z-index:10;}
    #title{margin:0 auto!important; vertical-align:middle; line-height:80px;}
    #list_table{margin:0 auto;}
    #photopopup{display:none!important;}
        /* fixedview */
    #fixedview{width:95%; margin:0 auto;}
            /* history */
    #history_btn_wrap > .container{padding:10px 5px; margin:0 5px;}
}

@media screen and (max-width:700px){
    #content{padding-top:10px;}
    #content.list{width:100%;}
    #content.detail{width:100%;}
    #content.write{width:100%;}
    #wrapper{padding-top:0;}
    #list_table{table-layout:fixed;}
    #list_table > thead,
    #list_table .td_no,
    #list_table .td_writer,
    #list_table .td_date,
    #list_table .td_views{display:none;}
    #list_table td{padding:3px 5px;}
    #list_table .td_title .td_title_title{padding:5px 0;}
    #list_table .td_title #mob_list_info{display:block; font-size:12px;}
    #list_table td.no_list{padding:20px 5px; height:500px;}
    #detail_header h2{word-break:break-all;}
    #post_info{float:left;}
    #file_wrap{padding-right:10px;}
    #comment_write_wrap{margin:20px 10px;}
    #comment_opener_wrap{margin:0 10px 20px 10px;}
    .tab_item > a > img.worship{position:absolute; left:50%; transform: translateX(-50%);}
    .tab_item > a > .container.worship{display:none;}
    #tabbtnlist > div{margin:0 5px;}
    #history_wrap{width:95%; margin:0 auto;}
    #server{margin-top:20px;}
    #server > .container{margin-bottom:30px;}
    #server > .container > .server_div{width:80%; margin:0 auto; margin-bottom:20px;}
    #server > .container > .server_table > .server_box{width:80%; margin:0 auto; display:block; margin-bottom:20px;}
    #pastol > #pastol_experience{margin:0 10px; padding:30px;}
}

@media screen and (max-width:600px){
    #tabbtnlist{bottom:0px; width:100%; left:0px; transform:none;}
    #tabbtnlist > div{width:50%; margin:0px; text-align:center; padding:10px 5px;}
    #home_wrap{padding-top:0;}
    #main_bottom{display:none;}
    #history_btn_wrap > .container{padding:10px 0px; margin:0 5px; font-size:18px;}
    #history_wrap > .history_table > table td{padding:10px 5px; font-size:12px;}
    #history_wrap > .history_table > table .date{width:50px;}
    #content.write .input_wrap input{width:100%;}
    #content.write .input_wrap select{width:calc(33% - 20px)}
    #write_wrap .field_wrap{width:calc(100% - 20px);}
    #write_wrap .field_wrap.is_reserved,
    #write_wrap .field_wrap.notice{width:auto;}
    #write_wrap .field_wrap input.reservation{width:120px;}
    #content.write .input_wrap input[type="checkbox"]{width:40px;}
    #fileform_wrap .field_wrap input[type='file']{width:220px;}
}

@media screen and (max-width:500px){
    #maingrid{
        -ms-grid-rows:240px 5px 240px 5px 240px 5px 240px; grid-template-rows:auto auto auto auto auto;
        -ms-grid-columns:100%; grid-template-columns:100%;
        gap:10px 0;
    }
    #maingrid > #main_recent{-ms-grid-row:1;-ms-grid-column:1; grid-row:1; grid-column:1;}
    #maingrid > #main1{-ms-grid-row:5;-ms-grid-column:1; grid-row:2; grid-column:1;}
    #maingrid > #main2{-ms-grid-row:7;-ms-grid-column:1; grid-row:4; grid-column:1;}
    #maingrid > #main3{-ms-grid-row:7;-ms-grid-column:1; grid-row:3; grid-column:1;}
    #maingrid > #main4{-ms-grid-row:7;-ms-grid-column:1; grid-row:5; grid-column:1; height:300px;}
    #mob_menu_btn,
    #mob_home_btn{transform:scale(0.8); margin:15px 5px;}
    #home_wrap,
    #wrapper{max-height:100%;}
    #maintabevent{height:235px;}
    #tabevent_inner{height:200px;}
    .tab_item > a > .container.praise{height:160px; margin-top:0px;}
    .tab_item > a > .container.praise > .tab_title{font-size:18px; width:90%;}
    .tab_item > a > .container.praise > .tab_date{margin-top:120px;}
    #title > h1{font-size:22px;}
    #to_write{position:static;}
    #to_write a{width:142px; margin:5px auto;}
    #comment_list_wrap .container{grid-template-columns:auto 75px; gap:10px 0;}
    #comment_list_wrap .container > *:nth-child(1){-ms-grid-row:1; -ms-grid-column:1; grid-row:1; grid-column:1;}
    #comment_list_wrap .container > *:nth-child(2){grid-area:2 / 1 / span 1 / span 2;}
    #comment_list_wrap .container > *:nth-child(3){-ms-grid-row:1; -ms-grid-column:5; grid-row:1; grid-column:2;}
    #search_wrap input,
    #search_wrap select{padding:3px 2px; height:30px;}
    #fixed_pics{height:150px;}
    #way_to_church.fixedview{width:95%; margin-top:10px;}
    #nurture.fixedview{width:100%;}
    #history_btn_wrap{text-align:center; margin:10px 0;}
    #history_btn_wrap > .container{display:block; padding:0px; margin:5px; font-size:16px;}
    #community > #community_image{float:none;}
    #server{margin-top:10px;}
    #server > .container > .server_div{width:95%; margin:0 auto; margin-bottom:10px;}
    #server > .container > .server_table > .server_box{width:95%; margin:0 auto; display:block; margin-bottom:10px;}
    #pastol > div{float:none;}
    #pastol > #pastol_image{width:180px; margin:0 auto; margin-top:10px;}
    #pastol > #pastol_wrap{width:95%; margin:0 auto;}
    #pastol > #pastol_experience{padding:20px;}
    #worship > div{float:none;}
    #worship > #worship_image{display:none;}
    #worship_wrap{width:95%; margin:0 auto; margin-top:10px;}
    #worship_table{word-break:keep-all;}
    #nurture > .section > .content > .image_02{width:300px;}
    #write_wrap .field_wrap .input_wrap > a{max-width:180px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; vertical-align:text-bottom;}
    #community > #community_wrap{font-size:0px;}
    #community > #community_wrap > .c_top{background-image:url(../img/community_bg_01.png); position:relative; text-align:center;}
    #community > #community_wrap .c_01{font-size:20px; padding:10px; word-break:keep-all;}
    #community > #community_wrap .community_image{position:relative;}
    #community > #community_wrap .community_image > img{width:calc(100% - 40px); margin:0 20px; border:8px double black;}
    #community > #community_wrap .c_02{font-size:16px; padding:10px; word-break:keep-all;}
    #community > #community_wrap .c_youtube{position:absolute; transition:all .5s; max-width:80px; float:left; transform:translate(-50%, 50%); max-height:80px; overflow:hidden; bottom:50%; left:50%; background-color:rgba(0,0,0,0.7); border-radius:50px; cursor:pointer; color:white; font-weight:bold; font-size:14px; padding-right:20px; line-height:80px;}
    #community > #community_wrap .c_youtube:hover{transition:all .5s; max-width:80px;}
    #community > #community_wrap .c_youtube:hover > img{transform:none; transition:all .5s;}
    #community > #community_wrap .c_youtube > img{padding:10px; float:left; transition:all .5s;}
    #community > #community_wrap > .c_top > .container > .title{font-size:22px; position:relative; padding:10px; color:black; font-weight:bold;}
    #community > #community_wrap > .c_top > .container > .title > u{width:150%; height:5px; background-color:#333333; position: absolute; bottom:0px; left:-25%; box-shadow:0px 0px 10px 3px #333333;}
    #community > #community_wrap > .c_top > .container > .content{padding:15px 0px; color:black; font-weight:bold; background-color:rgba(255,255,255,0.5);}
    #community > #community_wrap > .container > .title{padding:20px 5px 5px 10px; margin:0 0 15px 0; border-bottom:3px double #c5c5c5; color:black; font-weight:bold; font-size:22px; text-shadow:1px 1px 2px #929292;}
    #community > #community_wrap > .container > .content{font-size:13px; padding:10px;}
}