* { border: 0; color: rgb(18,18,18); font-family: 'Noto Sans KR', sans-serif; word-break: keep-all; }
*, :after, :before {
    margin: 0; padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body#dark * { color: rgb(220,220,220); }
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; min-width: 320px; font-size: 16px; margin: 0 !important; padding: 0 !important; }
body#light { background-color: rgb(255,255,255); }
body#light .dark_mode { display: none; }
body#dark { background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
body#dark .light_mode { display: none; }
ul, ol, li, dl, dt, dd { list-style: none; }
a { text-decoration: none; }
input, select, button { outline: 0; background-color: transparent; }
input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance: none; margin: 0; }
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
input::placeholder{ color: rgb(185,185,185); font-size: 14px; }
input::-webkit-input-placeholder{ color: rgb(185,185,185); font-size: 14px; }
input::-ms-input-placeholder{ color: rgb(185,185,185); font-size: 14px; }
textarea::placeholder{ color: rgb(185,185,185); font-size: 14px; }
body#dark input::placeholder{ color: rgb(85,85,85); }
body#dark input::-webkit-input-placeholder{ color: rgb(85,85,85); }
body#dark input::-ms-input-placeholder{ color: rgb(85,85,85); }
body#dark textarea::placeholder{ color: rgb(85,85,85); }

body#dark input{ color: rgb(220,220,220); }
body#dark select{ color: rgb(220,220,220); }
body#dark select optgroup{ background-color: rgb(42,42,42); color: rgb(85,85,85); }
body#dark select optgroup[disabled]{ color: rgb(153,153,153); }
body#dark select option{ background-color: rgb(42,42,42); }
body#dark select option[disabled]{ color: rgb(153,153,153); }

/* 스마트폰 버튼 UI */
.smart_btn{ width: 50px; height: 25px; border-radius: 25px; background-color: rgb(185,185,185); position: relative; box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.1); transition: all 0.3s ease-in-out; cursor: pointer; }
body#dark .smart_btn{ background-color: rgb(153,153,153); }
.smart_btn.on{ background-color: rgb(46,168,225); }
body#dark .smart_btn.on{ background-color: rgb(72,136,201); }
.smart_btn>div{ width: 21px; height: 21px; margin: 2px; border-radius: 21px; background-color: rgb(255,255,255); position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; }
body#dark .smart_btn>div{ background-color: rgb(235,235,235); }
.smart_btn.on>div{ left: 25px; }

/* 글자색 */
.color_white{ color: rgb(255,255,255); }
body#dark .color_white{ color: rgb(220,220,220); }


/* 헤더 */
#header_back{ width: 100%; height: 60px; }
header{ width: 100%; min-width: 320px; height: 60px; padding: 0 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; z-index: 10000; background-color: rgba(255,255,255); box-shadow: 0 0 4px 2px rgba(0,0,0,0.3); }
body#dark header{ background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
header>div{ width: 200px; height: 100%; display: flex; flex-flow: row nowrap; align-items: center; position: relative; transition: all 0.12s ease-in-out; }
header>div>div{ width: 100%; height: 100%; display: flex; flex-flow: row nowrap; align-items: center; position: absolute; top: 0; left: 0; transition: all 0.12s ease-in-out; }
header>div>div#light_logo{ opacity: 1; }
header>div>div#dark_logo{ opacity: 0; }
body#dark header>div>div#light_logo{ opacity: 0; }
body#dark header>div>div#dark_logo{ opacity: 1; }
header>div>div>a{ display: flex; align-items: center; cursor: pointer; }
header>div>div>a>img{ max-height: 50px; }
header>nav{ width: calc(100% - 400px); max-width: 900px; padding: 0 20px; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; }
header>aside{ width: 200px; display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; }
header>aside>a{ margin-left: 10px; font-size: 12px; }
header>button{ width: 65px; height: 60px; border: 0; outline: 0; position: relative; transition: all 0.12s ease-in-out; cursor: pointer; display: none; }
header>button>div{ width: 25px; height: 2px; margin: auto; background-color: rgb(18,18,18); position: absolute; right: 0; left: 0; transition: all 0.3s ease-in-out; }
body#dark header>button>div{ background-color: rgb(220,220,220); }
header>button>div:nth-of-type(1){ top: 0; bottom: 18px; }
header>button>div:nth-of-type(2){ top: 0; bottom: 0; }
header>button>div:nth-of-type(3){ top: 18px; bottom: 0; }
header>button.on>div:nth-of-type(1){ bottom: 0; transform: rotate(135deg); }
header>button.on>div:nth-of-type(2){ width: 0; }
header>button.on>div:nth-of-type(3){ top: 0; transform: rotate(-135deg); }
#mobile_menu{ display: none; }

@media(max-width:960px){

    header{ padding-right: 0; }
    header>nav{ display: none; }
    header>aside{ display: none; }
    header>button{ display: block; }
    #mobile_menu_sub{ width: 100%; height: calc(100% - 60px); display: none; position: fixed; top: 60px; right: 0; z-index: 10000; background-color: rgba(0,0,0,0.6); }
    #mobile_menu{ width: 0; height: calc(100% - 60px); border-top-left-radius: 20px; display: block; position: fixed; top: 60px; right: 0; z-index: 10000; background-color: rgb(255,255,255); overflow: hidden; transition: all 0.3s ease-in-out; }
    #mobile_menu.on{ width: 200px; box-shadow: -3px 3px 8px 2px rgba(0,0,0,0.7); }
    body#dark #mobile_menu{ border-top-color: rgb(220,220,220); background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
    #mobile_menu>aside{ width: 100%; padding: 20px 20px 10px; display: flex; }
    #mobile_menu>aside>a{ height: 20px; margin-right: 10px; font-size: 12px; }
    #mobile_menu>nav{ width: 100%; height: auto; max-height: calc(100% - 50px); border-top: 1px solid rgb(220,220,220); overflow-y: auto; }
    body#dark #mobile_menu>nav{ border-top-color: rgb(102,102,102); }
    #mobile_menu>nav>dl{ width: 100%; border-bottom: 1px solid rgb(220,220,220); }
    body#dark #mobile_menu>nav>dl{ border-bottom-color: rgb(102,102,102); }
    #mobile_menu>nav>dl>dt{ width: 100%; padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; }
    #mobile_menu>nav>dl>dd{ width: 100%; padding: 10px 0; display: none; background-color: rgb(245,245,245); }
    body#dark #mobile_menu>nav>dl>dd{ background-color: rgba(255,255,255,0.1); }
    #mobile_menu>nav>dl.on>dd{ display: block; }
    #mobile_menu>nav>dl>dd>a{ width: 100%; padding: 5px 20px 5px 30px; font-size: 14px; font-weight: 400; display: block; cursor: pointer; }

}

/* 서브페이지 gnb */
#sub_gnb{ width: 100%; height: 300px; padding: 10px 20px; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-end; position: relative; background-color: rgb(220,220,220); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; transition: all 0.3s ease-in-out; }
body#dark #sub_gnb{ opacity: 0.85; }
#sub_gnb>div{ width: 100%; height: 100%; padding-bottom: 0; position: absolute; top: 0; left: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; }
#sub_gnb.is_sub>div{ padding-bottom: 30px; }
#sub_gnb>div>h4{ color: rgb(255,255,255); font-size: 32px; text-shadow: 2px 2px 3px rgba(0,0,0,0.5); }
#sub_gnb>div>p{ margin-top: 10px; color: rgba(255,255,255,0.7); font-size: 20px; font-family: 'Satisfy', cursive; text-shadow: 2px 2px 3px rgba(0,0,0,0.3); }
#sub_gnb>ul{ display: none; }
#sub_gnb.is_sub>ul{ padding: 10px 20px 7px; border-radius: 10px; display: flex; flex-flow: row wrap; justify-content: center; background-color: rgba(0,0,0,0.4); overflow: hidden; position: relative; opacity: 1; z-index: 10; }
#sub_gnb>ul>a{ margin: 0 10px; padding: 0 10px 3px; color: rgb(255,255,255); font-size: 16px; cursor: pointer; }
#sub_gnb>ul>a.current{ border-bottom: 1px dotted rgb(255,255,255,0.4); }
#sub_gnb>figure{ display: none; }
#sub_gnb.is_sub>figure{ width: 100%; height: 40px; display: block; opacity: 0; position: absolute; bottom: 0; left: 0; z-index: -1; background-color: rgba(0,0,0,0.6); }
body#dark #sub_gnb.is_sub>figure{ background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
#sub_gnb>canvas{ position: absolute; top: 0; left: 0; z-index: 1; }
#sub_gnb>select{ display: none; }
#sub_gnb.is_sub>select{ width: 100%; height: 40px; padding: 10px 20px 10px 50px; display: block; opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; bottom: 0; left: 0; z-index: -1; color: rgb(255,255,255); font-size: 14px; cursor: pointer; }
body#dark #sub_gnb.is_sub>select{ background-color: rgba(0,0,0,0.5); color: rgb(220,220,220); }
#sub_gnb.is_sub>select::-ms-expand{ display:none; }
#sub_gnb>i#hamburger_icon{ display: none; }
#sub_gnb.is_sub>i#hamburger_icon{ position: absolute; left: 20px; bottom: 12px; z-index: 0; color: rgb(255,255,255); font-size: 16px; cursor: pointer; }
body#dark #sub_gnb.is_sub>i#hamburger_icon{ color: rgb(220,220,220); }

@media(max-width:960px){

    #sub_gnb{ height: 240px; }
    #sub_gnb>div>h4{ font-size: 28px; }
    #sub_gnb>div>p{ font-size: 18px; }
    #sub_gnb.is_sub>ul{ opacity: 0; z-index: -1; }
    #sub_gnb.is_sub>figure{ opacity: 1; z-index: 0; }
    body#dark #sub_gnb.is_sub>figure{ opacity: 0.4; }
    #sub_gnb.is_sub>select{ opacity: 1; z-index: 10; }
    #sub_gnb.is_sub>i#hamburger_icon{ display: block; }

}

@media(max-width:480px){

    #sub_gnb{ height: 170px; }
    #sub_gnb>div>h4{ font-size: 22px; }
    #sub_gnb>div>p{ margin-top: 5px; font-size: 16px; }

}

/* 메인 제외한 각 페이지 내용 영역 */
.sub_page{ width: 100%; min-height: calc(100vh - 60px - 300px - 109px); padding: 40px 20px; overflow: hidden; }

@media(max-width:960px){

    .sub_page{ min-height: calc(100vh - 60px - 240px - 237px); }

}

@media(max-width:480px){

    .sub_page{ min-height: calc(100vh - 60px - 170px - 237px); }

}

/* 푸터 */
footer{ width: 100%; min-width: 320px; padding: 15px 0; background-color: rgb(51,51,51); transition: all 0.12s ease-in-out; }
body#dark footer{ background-color: rgba(0,0,0,0.5); }
footer>div{ width: 100%; padding: 0 20px; display: flex; flex-flow: row wrap; align-items: center; transition: all 0.12s ease-in-out; }
footer>div>a{ margin-right: 10px; color: rgb(153,153,153); font-size: 12px; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark footer>div>a{ color: rgb(102,102,102); }
footer>div>a#dark_btn{ display: block; }
footer>div>a#light_btn{ display: none; }
body#dark footer>div>a#dark_btn{ display: none; }
body#dark footer>div>a#light_btn{ display: block; }
footer>dl{ width: 100%; margin-top: 10px; padding: 0 20px; display: flex; flex-flow: row wrap; align-items: center; transition: all 0.12s ease-in-out; }
footer>dl>dt{ width: 200px; transition: all 0.12s ease-in-out; }
footer>dl>dt>img{ max-width: 100%; max-height: 50px; filter: invert(0.5); transition: all 0.12s ease-in-out; }
body#dark footer>dl>dt>img{ opacity: 0.7; }
footer>dl>dd{ width: calc(100% - 200px); display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; }
footer>dl>dd>a{ margin-right: 20px; color: rgb(153,153,153); font-size: 14px; text-align: center; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark footer>dl>dd>a{ color: rgb(102,102,102); }
footer>dl>dd>p{ width: 100%; margin-top: 5px; color: rgb(153,153,153); font-size: 12px; transition: all 0.12s ease-in-out; }
body#dark footer>dl>dd>p{ color: rgb(102,102,102); }

@media(max-width:960px){

    footer>div{ padding-bottom: 15px; border-bottom: 1px solid rgb(85,85,85); justify-content: center; }
    footer>div>a{ margin: 0 5px; }
    footer>dl{ justify-content: center; }
    footer>dl>dt{ width: 100%; text-align: center; }
    footer>dl>dd{ width: 100%; margin-top: 10px; flex-flow: column nowrap; justify-content: center; align-items: center; }
    footer>dl>dd>a{ margin-top: 5px; margin-right: 0; }
    footer>dl>dd>p{ margin-top: 10px; text-align: center; }

}

/* 게시판 공통 */
.board_list_content{ width: 100%; max-width: 1200px; margin: auto; }
.board_gallery_content{ width: 100%; max-width: 3440px; margin: auto; }
.board_webzine_content{ width: 100%; max-width: 1200px; margin: auto; }
.board_view_content{ width: 100%; max-width: 1200px; margin: auto; }
.board_write_content{ width: 100%; max-width: 1200px; margin: auto; }

.button_set{ width: 100%; margin-bottom: 35px; display: flex; flex-flow: row wrap; justify-content: flex-end; }
.button_set>button{ width: 80px; height: 30px; margin: 0 0 5px 5px; border-radius: 10px; color: rgb(255,255,255); font-size: 14px; font-weight: 500; text-align: center; line-height: 28px; transition: all 0.12s ease-in-out; cursor: pointer; }
.button_set>a{ width: 80px; height: 30px; margin: 0 0 5px 5px; border-radius: 10px; color: rgb(255,255,255); font-size: 14px; font-weight: 500; text-align: center; line-height: 28px; transition: all 0.12s ease-in-out; cursor: pointer; }
.button_set .grey_btn{ background-color: rgb(153,153,153); }
body#dark .button_set .grey_btn{ background-color: rgb(102,102,102); }
.button_set .blue_btn{ background-color: rgb(8,91,176); }
body#dark .button_set .blue_btn{ background-color: rgb(6,66,125); }
.button_set .red_btn{ background-color: rgb(176,36,26); }
body#dark .button_set .red_btn{ background-color: rgb(189,92,85); }

/* 목록 상단 영역(검색, 글작성 버튼) */
.board_nav{ width: 100%; margin-bottom: 40px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end; }
.board_nav>a{ width: 80px; height: 30px; margin-left: auto; border: 1px solid rgb(8,91,176); border-radius: 7px; color: rgb(8,91,176); font-size: 14px; font-weight: 400; text-align: center; line-height: 28px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1); transition: all 0.12s ease-in-out; cursor: pointer; }
.board_nav>a:hover{ background-color: rgb(8,91,176); color: rgb(255,255,255); }
body#dark .board_nav>a{ border-color: rgb(6,66,125); background-color: rgb(6,66,125); }
body#dark .board_nav>a:hover{ border-color: rgb(35,129,173); background-color: rgb(35,129,173); }
.board_nav>form{ width: 100%; max-width: 300px; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row nowrap; transition: width 0.12s ease-in-out; }
body#dark .board_nav>form{ border-bottom-color: rgb(85,85,85); }
.board_nav>form>input{ width: calc(100% - 35px); height: 29px; padding: 5px 10px; border: 0; outline: 0; font-size: 14px; font-weight: 400; background-color: transparent; transition: all 0.12s ease-in-out; }
.board_nav>form>button{ width: 35px; height: 29px; border: 0; outline: 0; font-size: 18px; text-align: center; background-color: transparent; transition: all 0.12s ease-in-out; cursor: pointer; }

/* 뷰페이지 */
.board_view{ width: 100%; display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; }
.board_view>article{ width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-end; transition: all 0.12s ease-in-out; }
.board_view>article>a{ width: 80px; height: 30px; margin-left: 10px; border: 1px solid transparent; border-radius: 7px; font-size: 14px; font-weight: 400; text-align: center; line-height: 28px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1); transition: all 0.12s ease-in-out; cursor: pointer; }
.board_view>article>a:nth-of-type(1){ margin-left: 0; }
.board_view>article>a.list_btn{ border-color: rgb(153,153,153); background-color: rgb(153,153,153); color: rgb(255,255,255); }
.board_view>article>a.delete_btn{ border-color: rgb(224,67,88); color: rgb(224,67,88); }
.board_view>article>a.edit_btn{ border-color: rgb(8,91,176); color: rgb(8,91,176); }
.board_view>article>a.print_btn{ border-color: rgb(237,104,59); color: rgb(237,104,59); }
.board_view>article>a.list_btn:hover{ border-color: rgb(220,220,220); background-color: rgb(220,220,220); color: rgb(42,42,42); }
.board_view>article>a.delete_btn:hover{ background-color: rgb(224,67,88); color: rgb(255,255,255); }
.board_view>article>a.edit_btn:hover{ background-color: rgb(8,91,176); color: rgb(255,255,255); }
.board_view>article>a.print_btn:hover{ background-color: rgb(237,104,59); color: rgb(255,255,255); }
body#dark .board_view>article>a.list_btn{ border-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.1); }
body#dark .board_view>article>a.delete_btn{ border-color: rgb(173,52,68); background-color: rgb(173,52,68); }
body#dark .board_view>article>a.edit_btn{ border-color: rgb(6,66,125); background-color: rgb(6,66,125); }
body#dark .board_view>article>a.print_btn{ border-color: rgb(186,81,47); background-color: rgb(186,81,47); }
body#dark .board_view>article>a.list_btn:hover{ border-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2); }
body#dark .board_view>article>a.delete_btn:hover{ border-color: rgb(224,67,88); background-color: rgb(224,67,88); }
body#dark .board_view>article>a.edit_btn:hover{ border-color: rgb(35,129,173); background-color: rgb(35,129,173); }
body#dark .board_view>article>a.print_btn:hover{ border-color: rgb(209,108,42); background-color: rgb(209,108,42); }
.board_view>article>a.approval_btn{ display: none; }
.board_view>h5{ width: 100%; margin-top: 20px; display: flex; flex-flow: row wrap; }
.board_view>h5>p{ margin-right: 40px; font-size: 14px; font-weight: 400; }
.board_view>h5>p>span{ color: rgb(153,153,153); }
body#dark .board_view>h5>p>span{ color: rgb(153,153,153); }
.board_view>dl{ width: 100%; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
body#dark .board_view>dl{ border-bottom-color: rgb(85,85,85); }
.board_view>dl.half_input{ width: 50%; }
.board_view>dl.right_dl{ border-left: 1px solid rgb(220,220,220); }
body#dark .board_view>dl.right_dl{ border-left: 1px solid rgb(85,85,85); }
.board_view>dl:nth-of-type(1){ margin-top: 20px; border-top: 1px solid rgb(185,185,185); }
body#dark .board_view>dl:nth-of-type(1){ border-top-color: rgb(220,220,220); }
.board_view.worship_view>dl:nth-of-type(1){ height: 0; border-bottom-width: 0; }
.board_view>dl>dt{ width: 120px; padding: 10px; border-right: 1px solid rgb(220,220,220); font-size: 14px; font-weight: 500; word-break: keep-all; transition: all 0.12s ease-in-out; }
body#dark .board_view>dl>dt{ border-right-color: rgb(85,85,85); }
.board_view>dl>dd{ width: calc(100% - 120px); padding: 10px; font-size: 14px; font-weight: 400; word-break: keep-all; transition: all 0.12s ease-in-out; }
.board_view>dl.main_view_btn_area>dd{ padding: 7.5px 10px; }
.board_view>dl>dd.free_text{ text-align: justify; word-break: break-all; }
.board_view>dl>dd#bible_txt_area{ display: flex; flex-flow: row wrap; }
.board_view>dl>dd#bible_txt_area>span{ margin-right: 4px; }
.board_view>dl>dd>span.po_name_txt{ font-size: 12px; color: rgb(153,153,153); }
body#dark .board_view>dl>dd>span.po_name_txt{ color: rgb(153,153,153); }
.board_view>div.content{ width: 100%; height: auto; min-height: 220px; padding: 10px; border-bottom: 1px solid rgb(220,220,220); font-size: 14px; overflow-x: auto; transition: all 0.12s ease-in-out; }
body#dark .board_view>div.content{ border-bottom-color: rgb(85,85,85); }

/* 콘텐트 영역은 사용자가 색상을 변경할 수 있기 때문에 script로 라이트 모드와 다크 모드 색상 값을 제어하며, 그렇기에 아래 요소만 예외적으로 다크 모드 css 기본 값을 라이트 모드의 css 값으로 세팅함 */
body#dark .board_view>div.content p,
body#dark .board_view>div.content span
    { color: rgb(18,18,18); }

/* 콘텐트 영역에서 b, u 태그 등은 색상 값을 갖지 않기 때문에 부모 요소의 값 상속 */
.board_view>div.content b,
.board_view>div.content u
    { color: inherit !important; }

.board_view>div.content>#player_area{ width: 100%; height: 0; margin-bottom: 20px; padding-top: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; }
.board_view>div.content>#player_area iframe,.board_view>div.content>#player_area object,.board_view>div.content>#player_area embed{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.board_view>div.content>dl{ width: 100%; margin-bottom: 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; }
.board_view>div.content>dl>dt{ width: 80px; display: flex; flex-flow: row wrap; }
body#dark .board_view>div.content>dl>dt{ border-color: rgb(85,85,85); }
.board_view>div.content>dl>dt>p{ width: 80px; height: auto; padding: 5px 0; border: 1px solid rgb(220,220,220); border-radius: 7px; font-size: 14px; font-weight: 400; text-align: center; box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 10%); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .board_view>div.content>dl>dt>p{ border-color: rgb(85,85,85); }
.board_view>div.content>dl>dt>select{ width: 80px; height: auto; margin-top: 5px; padding: 4px 0; border: 1px solid rgb(220,220,220); border-radius: 7px; font-size: 14px; font-weight: 400; text-align: center; box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 10%); -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; text-align-last: center; cursor: pointer; }
.board_view>div.content>dl>dt>select::-ms-expand{ display:none; }
body#dark .board_view>div.content>dl>dt>select{ border-color: rgb(85,85,85); }
.board_view>div.content>dl>dd{ width: calc(100% - 100px); transition: all 0s ease-in-out; }
.board_view>div.content>dl>dd>h4{ width: 100%; margin: 10px 0 5px; font-weight: 500; display: none; flex-flow: row nowrap; align-items: baseline; transition: all 0.12s ease-in-out; }
.board_view>div.content>dl>dd>h4.show{ display: flex; }
.board_view>div.content>dl>dd>h4.first_obj{ margin-top: 0; }
.board_view>div.content>dl>dd>h4>p:nth-of-type(1){ margin-right: 5px; }
.board_view>div.content>dl>dd>p{ width: 100%; display: none; flex-flow: row nowrap; align-items: flex-start; line-height: 1.6; }
.board_view>div.content>dl>dd>p.show{ display: flex; }
.board_view>div.content>dl>dd>p>span{ transition: all 0.12s ease-in-out; }
.board_view>div.content>dl>dd>p>span:nth-of-type(1){ width: 55px; margin-top: 1px; padding-right: 8px; color: rgb(102,102,102) !important; font-size: 12px; font-weight: 300; text-align: right; }
body#dark .board_view>div.content>dl>dd>p>span:nth-of-type(1){ color: rgb(185,185,185) !important; }
.board_view>div.content>dl>dd>p>span:nth-of-type(2){ width: calc(100% - 55px); font-weight: 400; }
.board_view>div.content>dl>dd>p>span:nth-of-type(2)>span{ width: 100%; color: rgb(8,91,176) !important; font-size: 12px; font-weight: 500; display: block; transition: all 0.12s ease-in-out; }
body#dark .board_view>div.content>dl>dd>p>span:nth-of-type(2)>span{ color: rgb(35,129,173) !important; }
.board_view>div img{ width: auto; height: auto; max-width: 100%; margin: 10px 0; display: block; }
.board_view>div img.event_img{ width: 300px; max-width: 100%; margin-bottom: 30px; }
.board_view>ul{ width: 100%; padding-bottom: 20px; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row wrap; }
.board_view>ul>li{ width: 50%; margin-top: 20px; display: flex; flex-flow: row wrap; }
.board_view>ul>li>a{ width: auto; max-width: 100%; display: flex; flex-flow: row wrap; align-items: center; }
.board_view>ul>li>a>figure{ width: 50px; height: 50px; margin-right: 15px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.board_view>ul>li>a>img{ width: 50px; height: 50px; margin-right: 15px; }
.board_view>ul>li>a>dl{ width: calc(100% - 65px); height: auto; display: flex; flex-flow: row wrap; }
.board_view>ul>li>a>dl>dt{ width: 100%; display: flex; flex-flow: row nowrap; }
.board_view>ul>li>a>dl>dt>p{ max-width: calc(100% - 40px); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board_view>ul>li>a>dl>dt>span{ width: auto; min-width: 40px; font-size: 14px; font-weight: 500; }
.board_view>ul>li>a>dl>dd{ width: 100%; color: rgb(153,153,153); font-size: 12px; font-weight: 300; }
.board_view>section{ width: 100%; margin-top: 15px; display: flex; flex-flow: row nowrap; justify-content: space-between; transition: all 0.12s ease-in-out; }
.board_view>section.right_align{ justify-content: flex-end; }
.board_view>section>a{ width: 60px; height: auto; padding: 5px 0; border: 1px solid rgb(220,220,220); border-radius: 7px; font-size: 14px; font-weight: 400; text-align: center; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1); transition: all 0.12s ease-in-out; cursor: pointer; }
.board_view>section>a.next_btn{ margin-left: auto; }
body#dark .board_view>section>a{ border-color: rgb(85,85,85); }
.board_view>section>a:hover{ background-color: rgb(250,250,250); }
body#dark .board_view>section>a:hover{ background-color: rgba(255,255,255,0.2); }
.board_view>div.comment{ width: 100%; height: auto; margin-top: 50px; padding: 15px 0; border-top: 1px solid rgb(220,220,220); transition: all 0.12s ease-in-out; }
body#dark .board_view>div.comment{ border-top-color: rgb(85,85,85); }


.board_view>div.comment ul{ width: 100%; display: flex; flex-flow: row wrap; }
.board_view>div.comment ul>li ul{ width: calc(100% - 40px); margin: 0 10px 0 30px; }
.board_view>div.comment ul>li{ width: calc(100% - 2px); margin-bottom: 10px; border: 1px solid rgb(220,220,220); border-radius: 5px; display: flex; flex-flow: row wrap; }
.board_view>div.comment ul>li ul>li{ background-color: rgb(245,245,245); }
body#dark .board_view>div.comment ul>li{ border-color: rgb(85,85,85); background-color: rgba(255,255,255,0.1); }
body#dark .board_view>div.comment ul>li ul>li{ border-color: rgb(85,85,85); background-color: rgba(255,255,255,0.1); }
.board_view>div.comment ul>li>h6{ width: 100%; padding: 10px 10px 0; display: flex; flex-flow: row wrap; justify-content: space-between; }
.board_view>div.comment ul>li>h6>p{ font-size: 14px; font-weight: 500; }
.board_view>div.comment ul>li>h6>p:nth-of-type(2){ color: rgb(153,153,153); font-size: 12px; }
body#dark .board_view>div.comment ul>li>h6>p:nth-of-type(2){ color: rgb(153,153,153); }
.board_view>div.comment ul>li>h6>p>span{ font-size: 12px; color: rgb(153,153,153); }
body#dark .board_view>div.comment ul>li>h6>p>span{ color: rgb(153,153,153); }
.board_view>div.comment ul>li>div{ width: calc(100% - 40px); height: 40px; min-height: 40px; position: relative; }
.board_view>div.comment ul>li>div>textarea{ width: 100%; height: 20px; min-height: 20px; padding: 10px; border: 0; outline: 0; resize: none; line-height: 20px; overflow: hidden; position: relative; z-index: 1; background-color: transparent; }
.board_view>div.comment ul>li>div>textarea:nth-of-type(2){ position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; }
.board_view>div.comment ul>li>p{ width: 40px; display: flex; flex-flow: row nowrap; justify-content: center; }
.board_view>div.comment ul>li>p>i{ width: 20px; height: 20px; margin: 10px; color: rgb(8,91,176); font-size: 16px; text-align: center; line-height: 20px; display: none; cursor: pointer; }
body#dark .board_view>div.comment ul>li>p>i{ color: rgb(35,129,173); }
.board_view>div.comment ul>li>p>span{ margin: 10px 5px 0 0; font-size: 12px; }
.board_view>div.comment ul>li>p>span>i{ width: 14px; cursor: pointer; }
.board_view>div.comment ul>li>p>span:nth-of-type(1)>i{ color: rgb(8,91,176); }
body#dark .board_view>div.comment ul>li>p>span:nth-of-type(1)>i{ color: rgb(35,129,173); }
.board_view>div.comment ul>li>p>span:nth-of-type(2)>i{ color: rgb(224,67,88); }
body#dark .board_view>div.comment ul>li>p>span:nth-of-type(2)>i{ color: rgb(173,52,68); }
.board_view>div.comment ul>li>h5{ width: 100%; padding: 0 10px 10px; display: flex; flex-flow: row wrap; }
.board_view>div.comment ul>li>h5>p{ margin-left: 10px; color: rgb(153,153,153); font-size: 12px; font-weight: 300; position: relative; z-index: 1; cursor: pointer; }
body#dark .board_view>div.comment ul>li>h5>p{ color: rgb(153,153,153); }
.board_view>div.comment ul>li>h5>p:nth-of-type(1){ margin-left: 0; }


.board_view>div.comment dl{ width: 100%; border: 1px solid rgb(220,220,220); border-radius: 5px; display: flex; flex-flow: row nowrap; }
.board_view>div.comment ul>li dl{ width: calc(100% - 40px); margin: 0 10px 10px 30px; background-color: rgb(245,245,245); }
body#dark .board_view>div.comment dl{ border-color: rgb(85,85,85); background-color: rgba(255,255,255,0.1); }
.board_view>div.comment dl>dt{ width: calc(100% - 40px); height: 40px; min-height: 40px; position: relative; overflow: hidden; }
.board_view>div.comment dl>dt>textarea{ width: 100%; height: 40px; min-height: 40px; padding: 10px; border: 0; outline: 0; resize: none; line-height: 20px; overflow: hidden; position: relative; z-index: 1; background-color: transparent; }
.board_view>div.comment dl>dt>textarea:nth-of-type(2){ position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; }
.board_view>div.comment dl>dd{ width: 40px; }
.board_view>div.comment dl>dd>i{ width: 20px; height: 20px; margin: 10px; color: rgb(8,91,176); font-size: 16px; text-align: center; line-height: 20px; cursor: pointer; }
body#dark .board_view>div.comment dl>dd>i{ color: rgb(35,129,173); }


/* 게시판 목록 - 리스트형 */
.board_list{ width: 100%; transition: all 0.12s ease-in-out; }
.board_list>h6{ width: 100%; padding: 0 5px 2px; color: rgb(18,18,18); font-size: 12px; font-weight: 400; text-align: right; }
body#dark .board_list>h6{ color: rgb(220,220,220); }
.board_list>ol{ width: 100%; border-top: 1px solid rgb(185,185,185); border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row wrap; background-color: rgb(245,245,245); transition: all 0.12s ease-in-out; }
body#dark .board_list>ol{ border-top-color: rgb(220,220,220); border-bottom-color: rgb(153,153,153); background-color: rgba(255,255,255,0.05); }
.board_list>ol>li{ padding: 10px 5px; color: rgb(18,18,18); font-size: 14px; font-weight: 500; text-align: center; transition: all 0.12s ease-in-out; }
body#dark .board_list>ol>li{ color: rgb(255,255,255); }
.board_list>ol>li:nth-of-type(1){ width: 80px; }
.board_list>ol>li:nth-of-type(2){ width: calc(100% - 460px); }
.board_list>ol>li:nth-of-type(3){ width: 100px; }
.board_list>ol>li:nth-of-type(4){ width: 100px; }
.board_list>ol>li:nth-of-type(5){ width: 80px; }
.board_list>ol>li:nth-of-type(6){ width: 100px; }
.board_list>article{ width: 100%; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; }
body#dark .board_list>article{ border-bottom-color: rgb(153,153,153); }
.board_list>article>a{ padding: 10px 5px; color: rgb(18,18,18); font-size: 14px; font-weight: 500; text-align: center; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .board_list>article>a{ color: rgb(255,255,255); }
.board_list>ul{ width: 100%; transition: all 0.12s ease-in-out; }
.board_list>ul>li{ width: 100%; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row nowrap; align-items: center; transition: all 0.12s ease-in-out; }
.board_list>ul>li.ui-widget-content{ border: 0; border-bottom: 1px solid rgb(220,220,220); background: none; color: inherit; }
.board_list>ul>li.ui-selected{ background-color: rgb(255,232,235) !important; }
body#dark .board_list>ul>li.ui-selected{ background-color: rgb(102,61,67) !important; }
body#dark .board_list>ul>li{ border-bottom-color: rgb(85,85,85); }
body#dark .board_list>ul>li.ui-widget-content{ border-bottom-color: rgb(85,85,85); background-color: transparent; background-image: none; }
.board_list>ul>li.ui-widget-content:hover{ background-color: rgb(250,250,250); }
body#dark .board_list>ul>li.ui-widget-content:hover{ background-color: rgba(255,255,255,0.1); }
.board_list>ul>li.ui-widget-content.notice{ background-color: rgb(245,245,245); }
body#dark .board_list>ul>li.ui-widget-content.notice{ background-color: rgba(255,255,255,0.3); }
body#dark .board_list>ul>li.ui-widget-content.notice:hover{ background-color: rgba(255,255,255,0.1); }
.board_list>ul>li>p{ padding: 10px 0; font-size: 14px; font-weight: 400; text-align: center; word-break: keep-all; overflow: hidden; transition: all 0.12s ease-in-out; }
.board_list>ul>li>p:nth-of-type(1){ width: 80px; }
.board_list>ul>li>p:nth-of-type(2){ width: calc(100% - 460px); display: flex; flex-flow: row nowrap; }
.board_list>ul>li>p:nth-of-type(3){ width: 100px; }
.board_list>ul>li>p:nth-of-type(4){ width: 100px; padding: 8px 0; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; }
.board_list>ul>li>p:nth-of-type(5){ width: 80px; }
.board_list>ul>li>p:nth-of-type(6){ width: 100px; }
.board_list>ul>li>p:nth-of-type(2)>a{ width: auto; max-width: calc(100% - 40px); font-size: inherit; font-weight: inherit; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.12s ease-in-out; cursor: pointer; }
.board_list>ul>li>p:nth-of-type(2)>a.no_comment{ max-width: 100%; }
.board_list>ul>li>p:nth-of-type(2)>a>span{ padding-left: 5px; color: rgb(8,91,176); font-size: 0.9em; font-weight: 500; }
body#dark .board_list>ul>li>p:nth-of-type(2)>a>span{ color: rgb(46,168,225); }
.board_list>ul>li>p:nth-of-type(2)>span{ width: auto; margin-left: 5px; color: rgb(224,67,88); font-size: 12px; font-weight: inherit; text-align: left; position: relative; top: 2px; }
body#dark .board_list>ul>li>p:nth-of-type(2)>span{ color: rgb(250,150,163); }
.board_list>ul>li>p:nth-of-type(4)>a{ width: 20px; height: 20px; margin: 2px; }
.board_list>ul>li>p:nth-of-type(4)>a>img{ width: 100%; height: 100%; }
body#dark .board_list>ul>li>p:nth-of-type(4)>a>img{ opacity: 0.7; }
.board_list>ul>li>p:nth-of-type(4)>a.empty{ width: 20px; height: 0; margin: 0 2px; }
.board_list>ul>li>p:nth-of-type(5)>a{ width: 100%; height: auto; }
.board_list>ul>li>p:nth-of-type(5)>a>input{ width: 100%; height: auto; text-align: center; }
.board_list>p{ width: 100%; padding: 50px 0; border-bottom: 1px solid rgb(220,220,220); font-size: 14px; text-align: center; }
body#dark .board_list>p{ border-bottom-color: rgb(85,85,85); }
.board_list>section{ width: 100%; margin-top: 10px; display: flex; flex-flow: row nowrap; justify-content: flex-end; }
.board_list>section>button{ width: 80px; height: 30px; margin-left: 10px; border: 1px solid transparent; border-radius: 7px; font-size: 14px; font-weight: 400; text-align: center; line-height: 28px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1); transition: all 0.12s ease-in-out; cursor: pointer; }
.board_list>section>button:nth-of-type(1){ margin-left: 0; }
.board_list>section>button.clear_btn{ border-color: rgb(153,153,153); background-color: rgb(153,153,153); color: rgb(255,255,255); }
.board_list>section>button.delete_btn{ border-color: rgb(224,67,88); color: rgb(224,67,88); }
.board_list>section>button.edit_btn{ border-color: rgb(8,91,176); color: rgb(8,91,176); }
.board_list>section>button.excel_btn{ border-color: rgb(33,114,69); color: rgb(33,114,69); }
.board_list>section>button.print_btn{ border-color: rgb(237,104,59); color: rgb(237,104,59); }
.board_list>section>button.clear_btn:hover{ border-color: rgb(220,220,220); background-color: rgb(220,220,220); color: rgb(42,42,42); }
.board_list>section>button.delete_btn:hover{ background-color: rgb(224,67,88); color: rgb(255,255,255); }
.board_list>section>button.edit_btn:hover{ background-color: rgb(8,91,176); color: rgb(255,255,255); }
.board_list>section>button.excel_btn:hover{ background-color: rgb(33,114,69); color: rgb(255,255,255); }
.board_list>section>button.print_btn:hover{ background-color: rgb(237,104,59); color: rgb(255,255,255); }
body#dark .board_list>section>button.clear_btn{ border-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.1); }
body#dark .board_list>section>button.delete_btn{ border-color: rgb(173,52,68); background-color: rgb(173,52,68); }
body#dark .board_list>section>button.edit_btn{ border-color: rgb(6,66,125); background-color: rgb(6,66,125); }
body#dark .board_list>section>button.excel_btn{ border-color: rgb(33,114,69); background-color: rgb(33,114,69); }
body#dark .board_list>section>button.print_btn{ border-color: rgb(186,81,47); background-color: rgb(186,81,47); }
body#dark .board_list>section>button.clear_btn:hover{ border-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2); }
body#dark .board_list>section>button.delete_btn:hover{ border-color: rgb(224,67,88); background-color: rgb(224,67,88); }
body#dark .board_list>section>button.edit_btn:hover{ border-color: rgb(35,129,173); background-color: rgb(35,129,173); }
body#dark .board_list>section>button.excel_btn:hover{ border-color: rgb(18,61,37); background-color: rgb(18,61,37); }
body#dark .board_list>section>button.print_btn:hover{ border-color: rgb(209,108,42); background-color: rgb(209,108,42); }
.board_list>h5{ width: 100%; margin-top: 5px; font-size: 12px; font-weight: 400; text-align: right; }

/* 게시판 목록 - 웹진형 */
.board_webzine{ width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; transition: all 0.12s ease-in-out; }
.board_webzine>h6{ width: 100%; padding: 0 5px 2px; color: rgb(18,18,18); font-size: 12px; font-weight: 400; text-align: right; }
body#dark .board_webzine>h6{ color: rgb(220,220,220); }
.board_webzine>a{ width: 100%; border-bottom: 1px solid rgb(220,220,220); padding: 15px; display: flex; flex-flow: row wrap; align-items: flex-start; position: relative; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .board_webzine>a{ border-bottom-color: rgb(85,85,85); }
.board_webzine>a:nth-of-type(1){ border-top: 1px solid rgb(185,185,185); }
body#dark .board_webzine>a:nth-of-type(1){ border-top-color: rgb(220,220,220); }
.board_webzine>a:hover{ background-color: rgb(250,250,250); }
body#dark .board_webzine>a:hover{ background-color: rgba(255,255,255,0.1); }
.board_webzine>a.empty{ height: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0; box-shadow: none; }
.board_webzine>a>figure{ width: 300px; height: 200px; margin-right: 40px; background-color: rgb(245,245,245); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 10; transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>figure{ background-color: rgba(255,255,255,0.1); }
.board_webzine>a>figure.no_thumb{ display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; }
.board_webzine>a>figure.no_thumb>p{ color: rgb(153,153,153); font-size: 14px; }
body#dark .board_webzine>a>figure.no_thumb>p{ color: rgb(153,153,153); }
.board_webzine>a>div.player_area{ width: 300px; height: 200px; margin-right: 40px; padding-top: 0; position: relative; overflow: hidden; background-color: rgb(245,245,245); transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>div.player_area{ background-color: rgba(255,255,255,0.1); }
.board_webzine>a>div.player_area iframe,.board_webzine>a>div.player_area object,.board_webzine>a>div.player_area embed{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.board_webzine>a>div.player_area>figure{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; }
.board_webzine>a>dl{ width: calc(100% - 340px); height: 200px; position: relative; transition: all 0.12s ease-in-out; }
.board_webzine>a>dl>dt{ width: 100%; height: 30px; margin-top: 10px; color: rgb(18,18,18); font-size: 16px; font-weight: 500; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>dl>dt{ color: rgb(220,220,220); }
.board_webzine>a>dl>h6{ width: 100%; height: 18px; margin-top: 6px; color: rgb(102,102,102); font-size: 14px; font-weight: 400; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 18px; transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>dl>h6{ color: rgb(185,185,185); }
.board_webzine>a>dl>dd{ width: 100%; height: 96px; margin-top: 9px; color: rgb(153,153,153); font-size: 14px; font-weight: 400; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; line-height: 24px; transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>dl>dd{ color: rgb(153,153,153); -webkit-line-clamp: 2; }
.board_webzine.worship_webzin>a>dl>dd{ height: 72px; -webkit-line-clamp: 3; }
.board_webzine>a>dl>dd img{ display: none; }
.board_webzine>a>dl>dd br{ display: none; }
.board_webzine>a>dl>p{ width: 100%; height: 30px; margin-top: 15px; color: rgb(102,102,102); font-size: 14px; font-weight: 400; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; line-height: 24px; transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>dl>p{ color: rgb(102,102,102); }
.board_webzine>a>article{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; background-position: 99% 100%; background-size: auto 95%; background-repeat: no-repeat; opacity: 0; transition: all 0.3s ease-in-out; }
.board_webzine>a:hover>article{ opacity: 1; }
.board_webzine>p{ width: 100%; padding: 50px 0; border-top: 1px solid rgb(185,185,185); border-bottom: 1px solid rgb(220,220,220); color: rgb(18,18,18); font-size: 14px; text-align: center; }
body#dark .board_webzine>p{ border-top-color: rgb(220,220,220); border-bottom-color: rgb(85,85,85); color: rgb(220,220,220); }

/* 게시판 목록 - 웹진형 */
.board_gallery{ width: 100%; margin: auto; }
.board_gallery>article{ width: calc((100% / 10) - (16px * 9 / 10)); min-height: 60px; margin-bottom: 16px; border-radius: 10px; overflow: hidden; position: relative; background-color: rgb(245,245,245); transition: background 0.12s ease-in-out; }
body#dark .board_gallery>article{ background-color: rgb(42,42,42); background-image: url(/static/img/dark_pattern.jpg); background-position: center top 0; background-repeat: repeat; background-size: auto; }
.board_gallery>article>a{ font-size: 12px; font-weight: 400; position: absolute; z-index: 100; transition: all 0.12s ease-in-out; cursor: pointer; }
.board_gallery>article>a:nth-of-type(1){ width: 100%; padding: 5px 10px; color: rgb(255,255,255); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; bottom: 0; left: 0; background-color: rgba(0,0,0,0.3); }
body#dark .board_gallery>article>a:nth-of-type(1){ color: rgb(220,220,220); }
.board_gallery>article>a:nth-of-type(2){ color: rgb(255,255,255); top: 5px; right: 10px; text-shadow: 0 0 4px rgb(0,0,0); opacity: 0.5; }
body#dark .board_gallery>article>a:nth-of-type(2){ color: rgb(255,255,255); }
.board_gallery>article>a:nth-of-type(3){ color: rgb(255,255,255); top: 5px; left: 10px; text-shadow: 0 0 4px rgb(0,0,0); opacity: 0.5; }
body#dark .board_gallery>article>a:nth-of-type(3){ color: rgb(255,255,255); }
.board_gallery_content>p{ width: 100%; padding: 50px 0; border-top: 1px solid rgb(185,185,185); border-bottom: 1px solid rgb(220,220,220); color: rgb(18,18,18); font-size: 14px; text-align: center; }
body#dark .board_gallery_content>p{ border-top-color: rgb(220,220,220); border-bottom-color: rgb(85,85,85); color: rgb(220,220,220); }

/* 게시판 퀵버튼 */
.quick_btn{ width: calc(100% + 10px); margin-bottom: 20px; display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; }
.quick_btn>li{ padding: 5px 10px; border: 1px solid rgb(220,220,220); border-radius: 30px; margin: 5px 5px 0 0; font-size: 12px; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .quick_btn>li{ border-color: rgb(85,85,85); }
.quick_btn>li:hover{ border-color: rgb(8,91,176); background-color: rgb(8,91,176); color: rgb(255,255,255); }
body#dark .quick_btn>li:hover{ border-color: rgb(6,66,125); background-color: rgb(6,66,125); color: rgb(220,220,220); }
.quick_btn>li.on{ border-color: rgb(8,91,176); background-color: rgb(8,91,176); color: rgb(255,255,255); }
body#dark .quick_btn>li.on{ border-color: rgb(6,66,125); background-color: rgb(6,66,125); color: rgb(220,220,220); }

/* swiper slider */
.gallery_slide{ width: 100%; height: auto; overflow: hidden; position: relative; transition: height 0.12s ease-in-out; }
body#dark .gallery_slide{ background-color: rgba(255,255,255,0.1); }
.gallery_slide .swiper-pagination{ bottom: 32px; }
.gallery_slide .swiper-pagination .swiper-pagination-bullet{ border: 1px solid rgb(255,255,255); background-color: rgba(255,255,255,0.5); }
.gallery_slide .swiper-pagination .swiper-pagination-bullet-active{ border-color: rgba(255,255,255,0.5); background-color: rgb(8,91,176); }
.gallery_img{ width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; overflow: hidden; transition: all 0.12s ease-in-out; }
.gallery_img>a{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; text-align: center; cursor: pointer; }
.gallery_img>a>p{ color: rgb(185,185,185); font-size: 14px; text-align: center; transition: all 0.12s ease-in-out; }
body#dark .gallery_img>a>p{ color: rgb(102,102,102); }

@media(max-width:3000px){
    .board_gallery>article{ width: calc((100% / 9) - (16px * 8 / 9)); }
}

@media(max-width:2700px){
    .board_gallery>article{ width: calc((100% / 8) - (16px * 7 / 8)); }
}

@media(max-width:2400px){
    .board_gallery>article{ width: calc((100% / 7) - (16px * 6 / 7)); }
}

@media(max-width:2100px){
    .board_gallery>article{ width: calc((100% / 6) - (16px * 5 / 6)); }
}

@media(max-width:1800px){
    .board_gallery>article{ width: calc((100% / 5) - (16px * 4 / 5)); }
}

@media(max-width:1500px){
    .board_gallery>article{ width: calc((100% / 4) - (16px * 3 / 4)); }
}

@media(max-width:1080px){
    .board_gallery>article{ width: calc((100% / 3) - (16px * 2 / 3)); }
}

@media(max-width:720px){
    .board_gallery>article{ width: calc((100% / 2) - (16px * 1 / 2)); border-radius: 7px; }
}

@media(max-width:360px){
    .board_gallery>article{ width: 100%; margin-bottom: 10px; }
}



/* 페이징 */
.page_area{ width: 100%; margin-top: 40px; display: flex; flex-flow: row nowrap; justify-content: center; transition: all 0.12s ease-in-out; }
.page_area>a{ width: 33px; height: 33px; margin: 0 2px; border: 1px solid rgb(220,220,220); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 14px; font-weight: 400; text-align: center; word-break: keep-all; transition: all 0.12s ease-in-out; cursor: pointer; }
.page_area>a>i.first_arrow{ position: relative; left: 2px; }
.page_area>a>i.second_arrow{ position: relative; right: 2px; }
body#dark .page_area>a{ border-color: rgb(85,85,85); }
.page_area>li{ width: 35px; height: 35px; margin: 0 3px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; word-break: keep-all; transition: all 0.12s ease-in-out; cursor: pointer; }
.page_area>li.current{ font-size: 14px; font-weight: 400; text-align: center; line-height: 35px; cursor: auto; }
.page_area>li>a{ width: 100%; height: 100%; font-size: 14px; font-weight: 400; text-align: center; line-height: 35px; }
.page_area>li:hover{ background-color: rgb(250,250,250); }
body#dark .page_area>li:hover{ background-color: rgba(255,255,255,0.1); }
.page_area>li.current{ background-color: rgb(235,235,235); }
body#dark .page_area>li.current{ background-color: rgba(255,255,255,0.3); }

/* 작성 페이지 */
.board_write{ width: 100%; display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; }
.board_write>article{ width: 100%; display: flex; flex-flow: row nowrap; justify-content: flex-end; transition: all 0.12s ease-in-out; }
.board_write>article>a{ width: 80px; height: 30px; margin-left: 10px; border: 1px solid transparent; border-radius: 7px; font-size: 14px; font-weight: 400; text-align: center; line-height: 28px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1); transition: all 0.12s ease-in-out; cursor: pointer; }
.board_write>article>a:nth-of-type(1){ margin-left: 0; }
.board_write>article>a.cancel_btn{ border-color: rgb(153,153,153); background-color: rgb(153,153,153); color: rgb(255,255,255); }
.board_write>article>a.cancel_btn:hover{ border-color: rgb(220,220,220); background-color: rgb(220,220,220); color: rgb(42,42,42); }
.board_write>article>a.list_btn{ border-color: rgb(8,91,176); color: rgb(8,91,176); }
.board_write>article>a.list_btn:hover{ background-color: rgb(8,91,176); color: rgb(255,255,255); }
body#dark .board_write>article>a.cancel_btn{ border-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.1); }
body#dark .board_write>article>a.cancel_btn:hover{ border-color: rgba(255,255,255,0.2); background-color: rgba(255,255,255,0.2); }
body#dark .board_write>article>a.list_btn{ border-color: rgb(6,66,125); background-color: rgb(6,66,125); }
body#dark .board_write>article>a.list_btn:hover{ border-color: rgb(35,129,173); background-color: rgb(35,129,173); }
.board_write>article>button{ width: 80px; height: 30px; margin-left: 10px; border: 1px solid transparent; border-radius: 7px; font-size: 14px; font-weight: 400; text-align: center; line-height: 28px; box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.1); transition: all 0.12s ease-in-out; cursor: pointer; }
.board_write>article>button.list_btn:hover{ background-color: rgb(8,91,176); color: rgb(255,255,255); }
.board_write>dl{ width: 100%; height: auto; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row nowrap; overflow: hidden; }
.board_write>dl.half_input{ width: 50%; }
.board_write>dl.right_dl{ border-left: 1px solid rgb(220,220,220); }
body#dark .board_write>dl.right_dl{ border-left: 1px solid rgb(85,85,85); }
.board_write>dl:nth-of-type(1){ margin-top: 20px; border-top: 1px solid rgb(185,185,185); }
.board_write.worship_write>dl:nth-of-type(1){ height: 0; border-bottom-width: 0; }
.board_write>dl:last-of-type{ border-bottom-width: 0; }
body#dark .board_write>dl{ border-bottom-color: rgb(85,85,85); }
body#dark .board_write>dl:nth-of-type(1){ border-top-color: rgb(220,220,220); }
.board_write.notice>dl.worship_input{ height: 0; border-bottom-width: 0; }
.board_write>dl>dt{ width: 120px; padding: 10px; border-right: 1px solid rgb(220,220,220); font-size: 14px; font-weight: 500; word-break: keep-all; transition: all 0.12s ease-in-out; }
body#dark .board_write>dl>dt{ border-right-color: rgb(85,85,85); }
.board_write.notice>dl>dt>span{ display: none; }
.board_write>dl>dd{ width: calc(100% - 120px); font-size: 14px; font-weight: 400; word-break: keep-all; position: relative; transition: all 0.12s ease-in-out; }
.board_write>dl>dd>input{ width: 100%; padding: 10px; font-size: 14px; font-weight: 400; word-break: keep-all; transition: all 0.12s ease-in-out; }

.board_write>dl#bible_area>dd{ padding: 0; display: flex; flex-flow: row wrap; position: relative; }
.board_write>dl#bible_area>dd>section{ width: calc(50% - 17.5px); margin: 0 5px 5px; border-radius: 5px; display: flex; flex-flow: row wrap; align-items: center; background-color: rgb(245,245,245); overflow: hidden; position: relative; transition: all 0.12s ease-in-out; }
body#dark .board_write>dl#bible_area>dd>section{ background-color: rgba(255,255,255,0.1); }
.board_write>dl#bible_area>dd>section:nth-of-type(1){ margin-top: 5px; }
.board_write>dl#bible_area>dd>section:nth-of-type(2){ margin-top: 5px; }
.board_write>dl#bible_area>dd>section:nth-of-type(2n){ margin-left: 0; }
.board_write>dl#bible_area>dd>section>select{ padding: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; text-align-last: center; }
.board_write>dl#bible_area>dd>section>select::-ms-expand{ display:none; }
.board_write>dl#bible_area>dd>section>p{ width: 20px; text-align: center; transition: all 0.12s ease-in-out; }
.board_write>dl#bible_area>dd>section>i{ width: 12px; color: rgb(176,36,26); font-size: 14px; position: absolute; top: 7px; right: 3px; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .board_write>dl#bible_area>dd>section>i{ color: rgb(189,92,85); }
.board_write>dl#bible_area>dd>p{ width: 20px; height: 100%; color: rgb(255,255,255); font-size: 14px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; background-color: rgb(8,91,176); position: absolute; top: 0; right: 0; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .board_write>dl#bible_area>dd>p{ color: rgb(220,220,220); background-color: rgb(6,66,125); }
.board_write>dl#bible_area>dd>p>i{ color: inherit; font-size: inherit; }


.board_write>dl>dd#subject_area>input{ width: 100%; padding: 10px 70px 10px 10px; }
.board_write>dl>dd#subject_area.no_notice>input{ width: 100%; padding: 10px; }
.board_write>dl>dd#subject_area>label{ width: 50px; height: 30px; font-size: 14px; font-weight: 400; line-height: 28px; position: absolute; top: 5px; right: 5px; cursor: pointer; }
.board_write>dl>dd#subject_area.no_notice>label{ width: 0; height: 0; overflow: hidden; }
.board_write>dl>dd#subject_area>label>svg{ width: 16px; height: 16px; min-width: 16px; position: relative; top: 3px; }
.board_write>dl>dd#subject_area>label>svg path{ fill: rgb(204,204,204); transition: all 0.12s ease-in-out; }
body#dark .board_write>dl>dd#subject_area>label>svg path{ fill: rgb(185,185,185); }
.board_write>dl>dd#subject_area>label.on>svg path{ fill: rgb(8,91,176); }
body#dark .board_write>dl>dd#subject_area>label.on>svg path{ fill: rgb(46,168,225); }
.board_write>dl>dd#subject_area>label>span{ color: rgb(204,204,204); transition: all 0.12s ease-in-out; }
body#dark .board_write>dl>dd#subject_area>label>span{ color: rgb(185,185,185); }
.board_write>dl>dd#subject_area>label.on>span{ color: rgb(8,91,176); }
body#dark .board_write>dl>dd#subject_area>label.on>span{ color: rgb(46,168,225); }
.board_write>dl>dd#subject_area>label>input{ width: 0; height: 0; position: absolute; }
.board_write>dl>dd>select{ width: 100%; padding: 9px 10px; font-size: 14px; font-weight: 400; transition: all 0.12s ease-in-out; }


.board_write>div{ width: 100%; height: auto; transition: all 0.12s ease-in-out; }
body#dark .board_write>div textarea{ display: none; }
body#dark .board_write>div iframe{ background-color: rgba(255,255,255,0.65); }
.board_write>h5{ width: 100%; height: auto; margin-top: 30px; padding: 10px 0 5px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; transition: all 0.12s ease-in-out; }
.board_write>h5>p{ font-size: 14px; font-weight: 500; }
.board_write>section{ width: 100%; height: auto; min-height: 120px; padding: 10px; display: flex; flex-flow: row wrap; background-color: rgb(245,245,245); position: relative; transition: all 0.12s ease-in-out; }
.board_write>section.for_file_part{ min-height: 140px; }
.board_write>section.active{ background-color: rgb(200,230,240); }
body#dark .board_write>section{ background-color: rgba(255,255,255,0.1); }
body#dark .board_write>section.active{ background-color: rgb(200,230,240); }
.board_write>section>input{ width: 0; height: 0; }
.board_write>section>div{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
.board_write>section>div>img{ width: 60px; height: 58px; opacity: 0.9; transition: all 0.12s ease-in-out; }
.board_write>section>div>p{ margin-top: 10px; color: rgb(153,153,153); font-size: 14px; transition: all 0.12s ease-in-out; }
body#dark .board_write>section>div>p{ color: rgb(153,153,153); }
.board_write>section>div>p>span{ color: rgb(8,91,176); font-weight: 500; }
body#dark .board_write>section>div>p>span{ color: rgb(46,168,225); }
.board_write>section>article{ width: 80px; height: 100px; margin: 10px; display: flex; flex-flow: column nowrap; align-items: center; position: relative; transition: all 0.12s ease-in-out; }
.board_write>section.for_file_part>article{ height: 120px; }
.board_write>section>article>i{ position: absolute; top: 0; right: 0; font-size: 16px; color: rgb(224,67,88); transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .board_write>section>article>i{ color: rgb(173,52,68); }
.board_write>section>article>figure{ width: 100%; height: 50px; min-width: 50px; min-height: 50px; background-position: center; background-repeat: no-repeat; background-size: contain; transition: all 0.12s ease-in-out; }
.board_write>section>article>img{ width: 50px; height: 50px; min-width: 50px; min-height: 50px; transition: all 0.12s ease-in-out; }
.board_write>section>article>h6{ width: 100%; max-width: 100%; height: 20px; margin-top: 7px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
.board_write>section>article>h6>span{ font-size: 14px; font-weight: 500; }
.board_write>section>article>h6>span:nth-of-type(1){ font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board_write>section>article>h6>span:nth-of-type(2){ font-size: 14px; font-weight: 500; }
.board_write>section>article>p{ width: 100%; font-size: 13px; font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; transition: all 0.12s ease-in-out; }

.board_write>section.for_file_part>article>dl{ width: 100%; height: 20px; position: relative; }
.board_write>section.for_file_part>article>dl>dt{ width: calc(100% - 2px); height: 18px; border: 1px solid rgb(220,220,220); border-radius: 5px; color: rgb(8,91,176); font-size: 13px; font-weight: 500; text-align: center; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
body#dark .board_write>section.for_file_part>article>dl>dt{ border-color: rgb(85,85,85); color: rgb(46,168,225); }
.board_write>section.for_file_part>article>dl>dd{ width: calc(100% - 2px); height: auto; max-height: 350px; border: 1px solid rgb(220,220,220); border-radius: 5px; background-color: rgb(250,250,250); position: absolute; bottom: 22px; left: 0; overflow-x: hidden; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; display: none; }
body#dark .board_write>section.for_file_part>article>dl>dd{ border-color: rgb(85,85,85); background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
.board_write>section.for_file_part>article>dl>dd>label{ width: 100%; display: block; color: rgb(153,153,153); cursor: pointer; }
body#dark .board_write>section.for_file_part>article>dl>dd>label{ color: rgb(124,124,124); }
.board_write>section.for_file_part>article>dl>dd>label:hover{ background-color: rgb(235,235,235); }
body#dark .board_write>section.for_file_part>article>dl>dd>label:hover{ background-color: rgba(255,255,255,0.1); }
.board_write>section.for_file_part>article>dl>dd>label.on{ background-color: rgb(8,91,176); color: rgb(255,255,255); }
body#dark .board_write>section.for_file_part>article>dl>dd>label.on{ background-color: rgb(6,66,125); color: rgb(220,220,220); }
.board_write>section.for_file_part>article>dl>dd>label>input{ display: none; }
.board_write>section.for_file_part>article>dl>dd>label>p{ width: calc(100% - 10px); padding: 2px 5px; color: inherit !important; font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#file_input_tmp{ width: 0; height: 0; max-width: 0; max-height: 0; margin: 0; padding: 0; border: 0; outline: 0; opacity: 0; }
.board_write>figure{ width: calc(100% - 30px); height: auto; max-width: 300px; max-height: calc(100% - 30px); padding-bottom: 10px; border: 1px solid rgb(220,220,220); border-radius: 5px; position: absolute !important; top: 130px; right: 40px; z-index: 1; background-color: rgb(255,255,255); box-shadow: 2px 2px 4px 1px rgba(0,0,0,0.1); display: none; cursor: grab; }
.board_write>figure.grabbing{ cursor: grabbing; }
.board_write>figure.on{ display: block; }
body#dark .board_write>figure{ border-color: rgb(85,85,85); background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; box-shadow: 2px 2px 4px 1px rgba(255,255,255,0.1); }
.board_write>figure>h4{ width: calc(100% - 30px); padding: 15px 15px 10px; transition: all 0.12s ease-in-out; }
.board_write>figure>ul{ width: 100%; height: auto; max-height: 250px; overflow: auto; }
.board_write>figure>ul>li{ width: calc(100% - 20px); height: auto; margin: 5px 10px; padding: 5px 10px; border: 1px solid rgb(220,220,220); border-radius: 7px; display: flex; flex-flow: row nowrap; align-items: center; background: rgb(255,255,255); position: relative; }
.board_write>figure>ul>li#current_subject{ border-color: rgb(8,91,176); background-color: rgb(8,91,176); }
body#dark .board_write>figure>ul>li{ border-color: rgb(85,85,85); background-color: rgba(255,255,255,0.1); }
body#dark .board_write>figure>ul>li#current_subject{ border-color: rgb(35,129,173); background-color: rgb(35,129,173); }
.board_write>figure>ul>li>p{ width: 20px; min-width: 20px; transition: all 0.12s ease-in-out; cursor: grab; }
.board_write>figure>ul>li>p.grabbing{ cursor: grabbing; }
.board_write>figure>ul>li>p>i{ color: rgb(185,185,185); font-size: 14px; position: relative; top: -1px; transition: all 0.12s ease-in-out; }
.board_write>figure>ul>li#current_subject>p>i{ color: rgb(255,255,255); }
body#dark .board_write>figure>ul>li#current_subject>p>i{ color: rgb(220,220,220); }
.board_write>figure>ul>li>h6{ width: calc(100% - 65px); font-size: 14px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.12s ease-in-out; }
.board_write>figure.no_notice>ul>li>h6{ width: calc(100% - 25px); }
.board_write>figure>ul>li#current_subject>h6{ color: rgb(255,255,255); font-weight: 500; }
body#dark .board_write>figure>ul>li#current_subject>h6{ color: rgb(220,220,220); }

.board_write>figure>ul>li>label{ width: 45px; height: 24px; font-size: 14px; font-weight: 400; line-height: 22px; position: absolute; top: 5px; right: 5px; cursor: pointer; }
.board_write>figure.no_notice>ul>li>label{ width: 0; height: 0; overflow: hidden; }
.board_write>figure>ul>li#current_subject>label{ display: none; }
.board_write>figure>ul>li>label>svg{ width: 16px; height: 16px; min-width: 16px; position: relative; top: 3px; }
.board_write>figure>ul>li>label>svg path{ fill: rgb(204,204,204); transition: all 0.12s ease-in-out; }
body#dark .board_write>figure>ul>li>label>svg path{ fill: rgb(185,185,185); }
.board_write>figure>ul>li>label.on>svg path{ fill: rgb(224,67,88); }
body#dark .board_write>figure>ul>li>label.on>svg path{ fill: rgb(173,52,68); }
.board_write>figure>ul>li>label>span{ font-size: 12px; color: rgb(204,204,204); transition: all 0.12s ease-in-out; }
body#dark .board_write>figure>ul>li>label>span{ color: rgb(185,185,185); }
.board_write>figure>ul>li>label.on>span{ color: rgb(224,67,88); }
body#dark .board_write>figure>ul>li>label.on>span{ color: rgb(173,52,68); }
.board_write>figure>ul>li>label>input{ width: 0; height: 0; position: absolute; }

.board_write>figure>p{ width: 100%; padding-top: 10px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
.board_write>figure>p>i{ width: 20px; height: 20px; color: rgb(85,85,85); font-size: 20px; text-align: center; line-height: 20px; transition: all 0.4s ease-in-out; cursor: pointer; }
.board_write>figure>p.on>i{ transform: rotate(180deg); }

.file_loading{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; z-index: 1000000; display: none; flex-flow: column nowrap; justify-content: center; align-items: center; }
.file_loading>div{ width: 190px; height: 40px; position: relative; }
.file_loading>div>figure{ height: 100%; position: absolute; top: 0; left: 0; background-position: top 0 left 0; background-repeat: no-repeat; background-size: 190px 40px; }
.file_loading>div>figure:nth-of-type(1){ width: 100%; opacity: 0.4; }
.file_loading>div>figure:nth-of-type(2){ width: 0; }
.file_loading>p{ margin-top: 20px; color: rgb(255,255,255); font-size: 14px; display: flex; flex-flow: row nowrap; align-items: center; }
.file_loading>p>span{ color: inherit; font-size: inherit; font-weight: inherit; }
.file_loading>p>span:nth-of-type(2){ width: 30px; text-align: right; }
.file_loading>h6{ max-width: calc(100% - 20px); margin-top: 5px; color: rgb(185,185,185); font-size: 12px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }




@media(max-width:1200px){

    .board_nav{ margin-bottom: 30px; }

    .board_list>ol>li{ padding: 10px 0; }
    .board_list>ol>li:nth-of-type(1){ width: 50px; }
    .board_list>ol>li:nth-of-type(2){ width: calc(100% - 260px); }
    .board_list>ol>li:nth-of-type(3){ width: 80px; }
    .board_list>ol>li:nth-of-type(4){ width: 0; height: 0; overflow: hidden; }
    .board_list>ol>li:nth-of-type(5){ width: 50px; }
    .board_list>ol>li:nth-of-type(6){ width: 80px; }
    .board_list>ul>li{ flex-flow: row wrap; }
    .board_list>ul>li>p{ padding: 10px 0; font-size: 13px; }
    .board_list>ul>li>p:nth-of-type(1){ width: 50px; }
    .board_list>ul>li>p:nth-of-type(2){ width: calc(100% - 260px); }
    .board_list>ul>li>p:nth-of-type(3){ width: 80px; }
    .board_list>ul>li>p:nth-of-type(4){ order: 1; width: 100%; padding: 0 10px 10px 50px; justify-content: flex-start; }
    .board_list>ul>li>p.no_files{ display: none; }
    .board_list>ul>li>p:nth-of-type(5){ width: 50px; }
    .board_list>ul>li>p:nth-of-type(6){ width: 80px; }

}

@media(max-width:1080px){

    .board_write>dl#bible_area>dd>section{ width: calc(100% - 30px); }
    .board_write>dl#bible_area>dd>section:nth-of-type(1){ margin-top: 5px; }
    .board_write>dl#bible_area>dd>section:nth-of-type(2){ margin-top: 0; }
    .board_write>dl#bible_area>dd>section:nth-of-type(2n){ margin-left: 5px; }

}

@media(max-width:960px){

    .board_view>dl.half_input{ width: 100%; }
    .board_view>dl.right_dl{ border-left-width: 0 !important; }
    .board_view>div.content{ min-height: 150px; }

    .board_view>div.content>dl{ width: 100%; margin-bottom: 20px; flex-flow: row wrap; }
    .board_view>div.content>dl>dt{ width: 100%; margin-bottom: 10px; }
    .board_view>div.content>dl>dt>select{ margin-top: 0; margin-left: 5px; }
    .board_view>div.content>dl>dd{ width: 100%; }

    .board_webzine{ border-top: 0; }
    .board_webzine>h6{ margin-bottom: 10px; }
    .board_webzine>a{ width: calc(33.3% - 13px); height: auto; margin-top: 20px; border-bottom: 0; border-radius: 10px; padding: 0; box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1); overflow: hidden; }
    body#dark .board_webzine>a{ background-color: rgba(255,255,255,0.1); }
    body#dark .board_webzine>a:hover{ background-color: rgba(255,255,255,0.2); }
    .board_webzine>a:nth-of-type(1){ border-top: 0; }
    .board_webzine>a:nth-of-type(1), .board_webzine>a:nth-of-type(2), .board_webzine>a:nth-of-type(3){ margin-top: 0; }
    .board_webzine>a.empty{ padding: 0; }
    .board_webzine>a>figure{ width: 100%; height: 180px; margin-right: 0; }
    .board_webzine>a>div.player_area{ width: 100%; height: 180px; margin-right: 0; }
    .board_webzine>a>dl{ width: 100%; height: auto; padding: 20px; }
    .board_webzine>a>dl>dt{ height: 24px; margin-top: 0; }
    .board_webzine>a>dl>dd{ height: auto; margin-top: 10px; transition: all 0.12s ease-in-out; }
    .board_webzine>a>dl>p{ height: auto; margin-top: 20px; }
    .board_webzine>a>dl>dd *{ margin-right: 5px; display: inline; }
    .board_webzine>a>article{ display: none; }

    .page_area{ margin-top: 30px; }

    .board_write>dl.half_input{ width: 100%; }
    .board_write>dl.right_dl{ border-left-width: 0; }

}

@media(max-width:780px){

    .board_nav>form>input{ width: calc(100% - 35px); height: 29px; padding: 5px 10px; border: 0; outline: 0; font-size: 14px; font-weight: 400; background-color: transparent; transition: all 0.12s ease-in-out; }
    .board_nav>form>button{ width: 35px; height: 29px; border: 0; outline: 0; font-size: 18px; text-align: center; background-color: transparent; transition: all 0.12s ease-in-out; cursor: pointer; }

    .board_view>ul{ padding-bottom: 15px; }
    .board_view>ul>li{ width: 100%; margin-top: 15px; }
    .board_view>ul>li>a>figure{ width: 25px; height: 25px; margin-right: 10px; }
    .board_view>ul>li>a>img{ width: 25px; height: 25px; margin-right: 10px; }
    .board_view>ul>li>a>dl{ width: calc(100% - 35px); }
    .board_view>ul>li>a>dl>dt>p{ max-width: calc(100% - 35px); font-size: 13px; }
    .board_view>ul>li>a>dl>dt>span{ min-width: 35px; font-size: 13px; }
    .board_view>ul>li>a>dl>dd{ font-size: 12px; }

    .board_list>ol>li:nth-of-type(1){ width: 0; height: 0; overflow: hidden; }
    .board_list>ol>li:nth-of-type(2){ width: calc(100% - 160px); }
    .board_list>ol>li:nth-of-type(5){ width: 0; height: 0; overflow: hidden; }
    .board_list>ul>li>p:nth-of-type(1){ width: 0; height: 0; overflow: hidden; }
    .board_list>ul>li>p:nth-of-type(2){ width: calc(100% - 160px); padding-left: 10px; }
    .board_list>ul>li>p:nth-of-type(4){ padding-left: 10px; }
    .board_list>ul>li>p:nth-of-type(5){ width: 0; height: 0; overflow: hidden; }

    .board_webzine>a{ width: calc(50% - 10px); }
    .board_webzine>a:nth-of-type(3){ margin-top: 20px; }

    .board_write>dl>dt{ width: 80px; }
    .board_write>dl>dd{ width: calc(100% - 80px); }

}

@media(max-width:620px){

    .board_search>label>select{ padding: 0; }
    .board_search>button>span{ display: none; }

    .board_write>figure{ width: 100%; max-width: 100%; padding-bottom: 5px; border: 0; border-bottom: 1px solid rgb(220,220,220); border-radius: 0; flex-flow: row wrap; position: static !important; right: 20px; box-shadow: none; cursor: auto; }
    .board_write>figure.on{ display: flex !important; }
    body#dark .board_write>figure{ box-shadow: none; background: transparent; }
    .board_write>figure>h4{ order: 1; width: calc(100% - 35px); padding: 10px 10px 5px; font-size: 14px; font-weight: 500; }
    .board_write>figure>ul{ order: 3; }
    .board_write>figure>ul>li{ width: calc(100% - 20px); margin: 5px 10px; }
    .board_write>figure>p{ order: 2; width: 20px; height: 20px; margin: 10px 10px 0 5px; padding-top: 0; }

}

@media(max-width:580px){

    #bible_area>dt{ width: 0; height: 0; padding: 0; overflow: hidden; }
    #bible_area>dd{ width: 100%; }

}

@media(max-width:500px){

    .board_search>button{ width: 10%; min-width: 30px; }

    .board_write>dl#bible_area>dd>section>p{ width: calc(100% - 200px); padding-left: 5px; text-align: left; }

}

@media(max-width:480px){

    .board_nav{ margin-bottom: 20px; }
    .board_nav{ flex-flow: column nowrap; }
    .board_nav>a{ order: 1; margin: 0 0 20px auto; }
    .board_nav>form{ order: 2; margin-right: auto; }

    .search_area{ margin: 0 auto; }

    .board_search>label>select{ padding: 0 10px; }
    .board_search>button{ width: calc(100% - 335px); }

    .board_view>dl>dt{ width: 80px; }
    .board_view>dl>dd{ width: calc(100% - 80px); }
    .board_view>div.content{ min-height: 120px; }

    .board_list>ol>li:nth-of-type(2){ width: calc(100% - 160px); }
    .board_list>ul>li>p:nth-of-type(2){ width: calc(100% - 170px); }
    .board_list>p{ font-size: 12px; }

    .board_webzine>a>figure{ height: 130px; }
    .board_webzine>a>div.player_area{ height: 130px; }
    .board_webzine>a>dl{ padding: 15px; }
    .board_webzine>a>dl>dt{ height: 20px; font-size: 14px; }
    .board_webzine>a>dl>dd{ height: 60px; font-size: 12px; line-height: 20px; -webkit-line-clamp: 3; }
    .board_webzine.worship_webzin>a>dl>dd{ height: 40px; -webkit-line-clamp: 2; }
    .board_webzine>a>dl>p{ margin-top: 15px; font-size: 12px; line-height: 20px; }

    .page_area{ margin-top: 20px; }
    .page_area>a{ margin: 0; border: 0; }
    .page_area>li{ margin: 0 2px; }

}

@media(max-width:430px){

    .board_search{ flex-flow: row wrap; }
    .board_search>label#part_label{ width: calc(100% - 2px); margin-right: 0; }
    body#dark .board_search>label#part_label{ width: 100%; }
    .board_search>label#year_label{ width: calc(60% - 37px); margin-top: 5px; }
    body#dark .board_search>label#year_label{ width: calc(60% - 35px); }
    .board_search>label#month_label{ width: calc(40% - 37px); margin-top: 5px; }
    body#dark .board_search>label#month_label{ width: calc(40% - 35px); }
    .board_search>button{ width: 60px; margin-top: 5px; }
    .board_search>button>span{ display: inline; }

}

@media(max-width:380px){

    .board_nav{ min-height: 38px; }

    .board_webzine>a{ width: 100%; }
    .board_webzine>a:nth-of-type(2){ margin-top: 20px; }
    .board_webzine>a>dl>dt{ font-size: 14px; }

}

/* 페이지 직접 관리 영역 */
.manage_page_content{ width: 100%; display: flex; flex-flow: row wrap; }
.manage_page_content>dl{ width: 100%; margin: 10px auto; display: flex; flex-flow: row wrap; justify-content: space-between; }
.manage_page_content>dl.show_mobile{ display: none; }
.manage_page_content>dl>dt{ width: calc(50% - 10px); display: flex; flex-flow: row wrap; justify-content: center; }
.manage_page_content>dl>dt.full_width{ width: 100%; }
.manage_page_content>dl.pc_text_img>dt{ order: 2; }
.manage_page_content>dl.pc_text_youtube>dt{ order: 2; }
.manage_page_content>dl>dt>img{ width: auto; height: auto; max-width: 100%; }
.manage_page_content>dl>dd{ width: calc(50% - 10px); }
.manage_page_content>dl>dd.full_width{ width: 100%; }
.manage_page_content>dl.pc_text_img>dd{ order: 1; }
.manage_page_content>dl.pc_youtube_img>dd{ order: 1; }
.manage_page_content>dl>dd *{ max-width: 100%; }
.manage_page_content>dl>div{ width: calc(50% - 10px); }
.manage_page_content>dl>div.full_width{ width: 100%; }
.manage_page_content>dl.pc_text_youtube>div{ order: 1; }
.manage_page_content>dl.pc_youtube_img>div{ order: 2; }
.manage_page_content>dl>div>div{ width: 100%; padding-top: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; position: relative; }
.manage_page_content>dl>div>div>iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/* 콘텐트 영역은 사용자가 색상을 변경할 수 있기 때문에 script로 라이트 모드와 다크 모드 색상 값을 제어하며, 그렇기에 아래 요소만 예외적으로 다크 모드 css 기본 값을 라이트 모드의 css 값으로 세팅함 */
body#dark .manage_page_content p,
body#dark .manage_page_content span
    { color: rgb(18,18,18); }

/* 콘텐트 영역에서 b, u 태그 등은 색상 값을 갖지 않기 때문에 부모 요소의 값 상속 */
.manage_page_content b,
.manage_page_content u
    { color: inherit !important; }


@media(max-width:960px){

    .manage_page_content>dl.show_pc{ display: none; }
    .manage_page_content>dl.show_mobile{ display: flex; }
    .manage_page_content>dl>dt{ width: 100%; }
    .manage_page_content>dl.mobile_text_img>dt{ order: 2; margin-top: 20px; }
    .manage_page_content>dl.mobile_text_youtube>dt{ order: 2; margin-top: 20px; }
    .manage_page_content>dl>dd{ width: 100%; margin-top: 20px; }
    .manage_page_content>dl.mobile_text_img>dd{ order: 1; margin-top: 0; }
    .manage_page_content>dl.mobile_youtube_img>dd{ order: 1; margin-top: 0; }
    .manage_page_content>dl>div{ width: 100%; }
    .manage_page_content>dl.mobile_text_youtube>div{ order: 1; margin-top: 20px; }
    .manage_page_content>dl.mobile_youtube_img>div{ order: 2; margin-top: 20px; }

}

/* 개인정보처리방침 */
#privacy_info{ width: 100%; height: 100%; min-width: 320px; margin: auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; background-color: rgba(0,0,0,0.4); display: none; }
#privacy_info>dl{ width: calc(100% - 300px); height: calc(100% - 300px); max-width: 2000px; min-width: 320px; margin: auto; padding: 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgb(255,255,255); box-shadow: 2px 2px 7px 3px rgba(0,0,0,0.5); transition: all 0.12s ease-in-out; }
body#dark #privacy_info>dl{ background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
#privacy_info>dl>dt{ width: 100%; height: 50px; color: rgb(18,18,18); font-size: 20px; font-weight: 700; line-height: 48px; word-break: keep-all; position: relative; transition: all 0.12s ease-in-out; }
body#dark #privacy_info>dl>dt{ color: rgb(220,220,220); }
#privacy_info>dl>dt>i{ margin-top: -10px; position: absolute; top: 50%; right: 10px; transition: all 0.12s ease-in-out; cursor: pointer; }
#privacy_info>dl>dd{ width: 100%; height: calc(100% - 50px); overflow: auto; -ms-overflow-style: none; scrollbar-width: none; transition: all 0.12s ease-in-out; }
#privacy_info>dl>dd::-webkit-scrollbar{ display: none; }
#privacy_info>dl>dd>h4{ margin-top: 40px; color: rgb(18,18,18); font-size: 18px; font-weight: 700; word-break: keep-all; display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
body#dark #privacy_info>dl>dd>h4{ color: rgb(220,220,220); }
#privacy_info>dl>dd>h4>span:nth-of-type(1){ min-width: 60px; margin-right: 5px; transition: all 0.12s ease-in-out; }
#privacy_info>dl>dd>h6{ margin-top: 20px; color: rgb(18,18,18); font-size: 16px; font-weight: 500; word-break: keep-all; display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
body#dark #privacy_info>dl>dd>h6{ color: rgb(220,220,220); }
#privacy_info>dl>dd>h6>span:nth-of-type(1){ min-width: 15px; margin-right: 5px; transition: all 0.12s ease-in-out; }
#privacy_info>dl>dd>p{ margin-top: 5px; color: rgb(18,18,18); font-size: 14px; font-weight: 400; word-break: keep-all; transition: all 0.12s ease-in-out; }
body#dark #privacy_info>dl>dd>p{ color: rgb(153,153,153); }
#privacy_info>dl>dd>p.step{ display: flex; flex-flow: row nowrap; }
#privacy_info>dl>dd>p.left_1step{ padding-left: 20px; }
#privacy_info>dl>dd>p.left_2step{ padding-left: 35px; }
#privacy_info>dl>dd>p>.wordbreak{ word-break: break-all; }
#privacy_info>dl>dd>p.step>span:nth-of-type(1){ min-width: 15px; margin-right: 5px; font-weight: 500; }
#privacy_info>dl>dd>p.left_1step>span:nth-of-type(1){ min-width: 10px; }
#privacy_info>dl>dd>p.step_2letter>span:nth-of-type(1){ min-width: 20px; }
#privacy_info>dl>dd>p.step_6letter>span:nth-of-type(1){ min-width: 65px; }
#privacy_info>dl>dd>p.step_7letter>span:nth-of-type(1){ min-width: 70px; }
#privacy_info>dl>dd>p.step_8letter>span:nth-of-type(1){ min-width: 75px; }
#privacy_info>dl>dd>p.step_11letter>span:nth-of-type(1){ min-width: 95px; }
#privacy_info>dl>dd>p.step_12letter>span:nth-of-type(1){ min-width: 125px; }
#privacy_info>dl>dd>p.step_19letter>span:nth-of-type(1){ min-width: 180px; }
#privacy_info>dl>dd>p>span>a{ color: inherit; font-size: inherit; font-weight: inherit; transition: all 0.12s ease-in-out; cursor: pointer; }
#privacy_info>dl>dd>p>a{ color: inherit; font-size: inherit; font-weight: inherit; transition: all 0.12s ease-in-out; cursor: pointer; }

/* 사이트이용약관 */
#policy_info{ width: 100%; height: 100%; min-width: 320px; margin: auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; background-color: rgba(0,0,0,0.4); display: none; }
#policy_info>dl{ width: calc(100% - 300px); height: calc(100% - 300px); max-width: 2000px; min-width: 320px; margin: auto; padding: 40px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgb(255,255,255); box-shadow: 2px 2px 7px 3px rgba(0,0,0,0.5); transition: all 0.12s ease-in-out; }
body#dark #policy_info>dl{ background-color: rgb(42,42,42); background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
#policy_info>dl>dt{ width: 100%; height: 50px; color: rgb(18,18,18); font-size: 20px; font-weight: 700; line-height: 48px; word-break: keep-all; position: relative; transition: all 0.12s ease-in-out; }
body#dark #policy_info>dl>dt{ color: rgb(220,220,220); }
#policy_info>dl>dt>i{ margin-top: -10px; position: absolute; top: 50%; right: 10px; transition: all 0.12s ease-in-out; cursor: pointer; }
#policy_info>dl>dd{ width: 100%; height: calc(100% - 50px); overflow: auto; -ms-overflow-style: none; scrollbar-width: none; transition: all 0.12s ease-in-out; }
#policy_info>dl>dd::-webkit-scrollbar{ display: none; }
#policy_info>dl>dd>h4{ margin-top: 40px; color: rgb(18,18,18); font-size: 18px; font-weight: 700; word-break: keep-all; display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
body#dark #policy_info>dl>dd>h4{ color: rgb(220,220,220); }
#policy_info>dl>dd>h4>span:nth-of-type(1){ min-width: 60px; margin-right: 5px; transition: all 0.12s ease-in-out; }
#policy_info>dl>dd>h6{ margin-top: 5px; color: rgb(18,18,18); font-size: 14px; font-weight: 400; word-break: keep-all; transition: all 0.12s ease-in-out; }
body#dark #policy_info>dl>dd>h6{ color: rgb(220,220,220); }
#policy_info>dl>dd>p{ margin-top: 5px; color: rgb(18,18,18); font-size: 14px; font-weight: 400; word-break: keep-all; display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
body#dark #policy_info>dl>dd>p{ color: rgb(153,153,153); }
#policy_info>dl>dd>p.left_1step{ padding-left: 20px; }
#policy_info>dl>dd>p>span:nth-of-type(1){ min-width: 15px; margin-right: 5px; font-weight: 500; transition: all 0.12s ease-in-out; }


@media(max-width:960px){

    /* 개인정보처리방침 */
    #privacy_info>dl{ width: calc(100% - 130px); height: calc(100% - 130px); padding: 30px; }
    #privacy_info>dl>dd>p.left_1step{ padding-left: 15px; }
    #privacy_info>dl>dd>p.left_2step{ padding-left: 30px; }

    /* 사이트이용약관 */
    #policy_info>dl{ width: calc(100% - 130px); height: calc(100% - 130px); padding: 30px; }
    #policy_info>dl>dd>p.left_1step{ padding-left: 15px; }

}

@media(max-width:480px){

    /* 개인정보처리방침 */
    #privacy_info>dl{ width: 100%; height: 100%; padding: 0; }
    #privacy_info>dl>dt{ width: 100%; height: 40px; padding: 0 20px; background-color: rgb(8,91,176); color: rgb(255,255,255); font-size: 16px; font-weight: 500; line-height: 38px; }
    body#dark #privacy_info>dl>dt{ background-color: rgb(6,66,125); }
    #privacy_info>dl>dt>i{ margin-top: -8px; color: rgb(255,255,255); }
    body#dark #privacy_info>dl>dt>i{ color: rgb(220,220,220); }
    #privacy_info>dl>dd{ width: 100%; height: calc(100% - 40px); padding: 20px; }
    #privacy_info>dl>dd>h4{ margin-top: 30px; font-size: 16px; }
    #privacy_info>dl>dd>h4>span:nth-of-type(1){ min-width: 50px; }
    #privacy_info>dl>dd>h6{ margin-top: 15px; font-size: 14px; }
    #privacy_info>dl>dd>p{ font-size: 12px; }
    #privacy_info>dl>dd>p.left_1step{ padding-left: 15px; }
    #privacy_info>dl>dd>p.left_2step{ padding-left: 30px; }
    #privacy_info>dl>dd>p.step>span:nth-of-type(1){ min-width: 12px; }
    #privacy_info>dl>dd>p.left_1step>span:nth-of-type(1){ min-width: 7px; }
    #privacy_info>dl>dd>p.step_2letter>span:nth-of-type(1){ min-width: 12px; }
    #privacy_info>dl>dd>p.step_6letter>span:nth-of-type(1){ min-width: 40px; }
    #privacy_info>dl>dd>p.step_7letter>span:nth-of-type(1){ min-width: 50px; }
    #privacy_info>dl>dd>p.step_8letter>span:nth-of-type(1){ min-width: 60px; }
    #privacy_info>dl>dd>p.step_11letter>span:nth-of-type(1){ min-width: 83px; }
    #privacy_info>dl>dd>p.step_12letter>span:nth-of-type(1){ min-width: 105px; }
    #privacy_info>dl>dd>p.step_19letter>span:nth-of-type(1){ min-width: 150px; }
    #privacy_info>dl>dd>p>a{ color: inherit; font-size: inherit; font-weight: inherit; }

    /* 사이트이용약관 */
    #policy_info>dl{ width: 100%; height: 100%; padding: 0; }
    #policy_info>dl>dt{ width: 100%; height: 40px; padding: 0 20px; background-color: rgb(8,91,176); color: rgb(255,255,255); font-size: 16px; font-weight: 500; line-height: 38px; }
    body#dark #policy_info>dl>dt{ background-color: rgb(6,66,125); }
    #policy_info>dl>dt>i{ margin-top: -8px; color: rgb(255,255,255); }
    body#dark #policy_info>dl>dt>i{ color: rgb(220,220,220); }
    #policy_info>dl>dd{ width: 100%; height: calc(100% - 40px); padding: 20px; }
    #policy_info>dl>dd>h4{ margin-top: 30px; font-size: 16px; }
    #policy_info>dl>dd>h4>span:nth-of-type(1){ min-width: 50px; }
    #policy_info>dl>dd>h6{ font-size: 12px; }
    #policy_info>dl>dd>p{ font-size: 12px; }
    #policy_info>dl>dd>p.left_1step{ padding-left: 15px; }
    #policy_info>dl>dd>p>span:nth-of-type(1){ min-width: 12px; }

}

/* 서비스 준비중 */
.preparation{ width: 100% !important; height: calc(100vh - 60px - 300px - 109px - 80px); margin: 0 !important; display: flex; flex-flow: column nowrap !important; justify-content: center; align-items: center; background-color: transparent !important; ransition: all 0.12s ease-in-out; }
.preparation>i{ color: rgb(8,91,176); font-size: 80px; }
body#dark .preparation>i{ color: rgb(46,168,225); }
.preparation>h4{ margin-top: 20px; font-size: 20px; font-weight: 500; }
.preparation>h4>span{ color: rgb(8,91,176); font-size: 30px; }
body#dark .preparation>h4>span{ color: rgb(46,168,225); }
.preparation>p{ margin-top: 5px; color: rgb(153,153,153); font-size: 14px; font-weight: 300; }
body#dark .preparation>p{ color: rgb(153,153,153); }

@media(max-width:960px){

    .preparation{ height: calc(100vh - 60px - 240px - 237px - 80px); }
    .preparation>i{ font-size: 60px; }
    .preparation>h4{ font-size: 16px; }
    .preparation>h4>span{ font-size: 24px; }

}

@media(max-width:480px){

    .preparation{ height: calc(100vh - 60px - 170px - 237px - 80px); }
    .preparation>i{ font-size: 50px; }
    .preparation>h4{ margin-top: 15px; font-size: 14px; }
    .preparation>h4>span{ font-size: 20px; }
    .preparation>p{ font-size: 13px; }

}