* { margin: 0; padding: 0; border: 0; font-family: 'Noto Sans KR', sans-serif; }
html { overflow-y: auto; }
body { background-color: rgb(255,255,255); min-width: 320px; font-size: 16px; margin: 0 !important; padding: 0 !important; }
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(88,170,252); }
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; }

/* 눈 효과 */
#snow{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; opacity: 0; pointer-events: none; animation: snow-direction cubic-bezier(2, 0, 2, 1) 4s both alternate infinite; }
body#dark #snow{ opacity: 0.6; }
@keyframes snow-direction{
    from { transform: translateX(-10%); }
    to { transform: translateX(10%); }
}
#snow:before, #snow:after{ content: ''; display: block; position: fixed; top: 0; left: 0; width: 10px; height: 10px; background-color: rgb(255,255,255); border-radius: 50%; filter: blur(1px); animation: snow 10s linear infinite; box-shadow: -5vw 10vh rgb(255,255,255), 30vw 5vh rgb(255,255,255), 55vw 5vh rgb(255,255,255), 75vw 10vh rgb(255,255,255), 105vw 15vh rgb(255,255,255), -10vw 30vh rgb(255,255,255), 40vw 25vh rgb(255,255,255), 60vw 20vh rgb(255,255,255), 90vw 25vh rgb(255,255,255), 20vw 40vh rgb(255,255,255), 5vw 45vh rgb(255,255,255), 65vw 45vh rgb(255,255,255), 105vw 40vh rgb(255,255,255), 50vw 50vh rgb(255,255,255), 30vw 50vh rgb(255,255,255), 10vw 55vh rgb(255,255,255), 20vw 60vh rgb(255,255,255), 40vw 65vh rgb(255,255,255), 60vw 60vh rgb(255,255,255), 80vw 65vh rgb(255,255,255), 5vw 70vh rgb(255,255,255), 30vw 75vh rgb(255,255,255), 55vw 85vh rgb(255,255,255), 75vw 80vh rgb(255,255,255), 105vw 75vh rgb(255,255,255), 20vw 90vh rgb(255,255,255), -5vw 95vh rgb(255,255,255), 65vw 95vh rgb(255,255,255), 100vw 90vh rgb(255,255,255), -5vw 110vh rgb(255,255,255), 30vw 105vh rgb(255,255,255), 55vw 105vh rgb(255,255,255), 75vw 110vh rgb(255,255,255), 105vw 115vh rgb(255,255,255), -10vw 130vh rgb(255,255,255), 40vw 125vh rgb(255,255,255), 60vw 120vh rgb(255,255,255), 90vw 125vh rgb(255,255,255), 20vw 140vh rgb(255,255,255), 5vw 145vh rgb(255,255,255), 65vw 145vh rgb(255,255,255), 105vw 140vh rgb(255,255,255), 50vw 150vh rgb(255,255,255), 30vw 150vh rgb(255,255,255), 10vw 155vh rgb(255,255,255), 20vw 160vh rgb(255,255,255), 40vw 165vh rgb(255,255,255), 60vw 160vh rgb(255,255,255), 80vw 165vh rgb(255,255,255), 5vw 170vh rgb(255,255,255), 30vw 175vh rgb(255,255,255), 55vw 185vh rgb(255,255,255), 75vw 180vh rgb(255,255,255), 105vw 175vh rgb(255,255,255), 20vw 190vh rgb(255,255,255), -5vw 195vh rgb(255,255,255), 65vw 195vh rgb(255,255,255), 100vw 190vh rgb(255,255,255); }
#snow:after{ position: absolute; left: 50px; top: 60px; animation-duration: 6s; width: 8px; height: 8px; opacity: 0.7; filter: blur(3px); }
@keyframes snow{
    from { transform: rotate(10deg) translateY(-100vh); }
    to { transform: rotate(10deg) translateY(0); }
}

/* 비 효과 */
.rain{ width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; z-index: -1; opacity: 0; }
body#dark .rain{ opacity: 0.6; }
.rain.back-row{ display: block; z-index: -2; bottom: 60px; opacity: 0.5; }
.drop{ width: 15px; height: 120px; position: absolute; bottom: 100%; pointer-events: none; animation: drop 0.5s linear infinite; }
@keyframes drop{
    0% { transform: translateY(0vh); }
    75% { transform: translateY(90vh); }
    100% { transform: translateY(90vh); }
}
.stem{ width: 1px; height: 60%; margin-left: 7px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); animation: stem 0.5s linear infinite; }
@keyframes stem{
    0% { opacity: 1; }
    65% { opacity: 1; }
    75% { opacity: 0; }
    100% { opacity: 0; }
}
.splat{ width: 15px; height: 10px; border-top: 2px dotted rgba(255, 255, 255, 0.5); border-radius: 50%; opacity: 1; transform: scale(0); animation: splat 0.5s linear infinite; display: block; }
@keyframes splat{
    0% { opacity: 1; transform: scale(0); }
    80% { opacity: 1; transform: scale(0); }
    90% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}


/* 1depth 메뉴 */
#nav{ width: calc(100% - 350px); height: 120px; max-width: 1920px; min-width: 320px; margin: auto; padding-left: 350px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; left: 0; z-index: 10000; transition: all 0.12s ease-in-out; }
#nav>a{ width: auto; height: auto; margin-left: 6%; color: rgb(255,255,255); font-size: 20px; font-weight: 500; transition: all 0.12s ease-in-out; }
#nav>a:nth-of-type(1){ margin-left: 0; }

/* 햄버거 메뉴 & 로고 */
#header{ width: 100%; height: 0; max-width: 1920px; min-width: 320px; margin: auto; position: fixed; top: 0; right: 0; left: 0; z-index: 10000; transition: height 0.12s ease-in-out; }
#header>div{ width: 350px; height: 120px; box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.3); overflow: hidden; background-color: rgb(255,255,255); transition: all 0.12s ease-in-out; }
body#dark #header>div{ 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>button{ width: 120px; height: 120px; border: 0; outline: 0; background-color: rgb(8,91,176); display: inline-block; float: left; position: relative; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark #header>div>button{ background-color: rgb(6,66,125); }
#header>div>button>div{ width: 35px; height: 3px; margin: auto; background-color: rgb(220,220,220); position: absolute; right: 0; left: 0; transition: all 0.12s ease-in-out; }
#header>div>button>div:nth-of-type(1){ top: 0; bottom: 25px; }
#header>div>button>div:nth-of-type(2){ top: 0; bottom: 0; }
#header>div>button>div:nth-of-type(3){ top: 25px; bottom: 0; }
#header>div>button.m>div:nth-of-type(1){ top: 0; bottom: 18px; }
#header>div>button.m>div:nth-of-type(2){ top: 0; bottom: 0; }
#header>div>button.m>div:nth-of-type(3){ top: 18px; bottom: 0; }
#header>div>button.on>div:nth-of-type(1){ top: 0; right: 25px; bottom: 0; left: 0; transform: rotate(90deg); }
#header>div>button.on>div:nth-of-type(2){ top: 0; right: 0; bottom: 0; left: 0; transform: rotate(90deg); }
#header>div>button.on>div:nth-of-type(3){ top: 0; right: 0; bottom: 0; left: 25px; transform: rotate(90deg); }
#header>div>button.on_m>div:nth-of-type(1){ top: 0; right: 18px; bottom: 0; left: 0; transform: rotate(90deg); }
#header>div>button.on_m>div:nth-of-type(2){ top: 0; right: 0; bottom: 0; left: 0; transform: rotate(90deg); }
#header>div>button.on_m>div:nth-of-type(3){ top: 0; right: 0; bottom: 0; left: 18px; transform: rotate(90deg); }
#header>div>a{ width: 230px; height: 120px; background-color: rgb(255,255,255); display: inline-block; float: left; position: relative; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark #header>div>a{ background-color: transparent; }
#header>div>a>img{ width: 120px; height: 81px; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: all 0.12s ease-in-out; }
#header>div>figure{ display: none; }

#header>div>div{ width: 0; height: 60px; display: none; float: left; background-color: rgb(204,204,204); transition: all 0.12s ease-in-out; }
body#dark #header>div>div{ background-color: rgb(85,85,85); }
#header>div>dl{ width: 0; height: 60px; display: none; float: left; position: relative; overflow: hidden; transition: width 0.12s ease-in-out; }
#header>div>dl>dt{ width: calc(100% - 20px); height: 100%; padding: 0 15px 0 5px; display: inline-block; float: left; color: rgb(18,18,18); font-size: 16px; font-weight: 500; text-align: center; line-height: 58px; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark #header>div>dl>dt{ color: rgb(220,220,220); }
#header>div>dl>dt>i{ position: absolute; top: 20px; right: 10px; transition: all 0.12s ease-in-out; }
#header>div>dl>dt>div{ width: 100%; height: 3px; border-bottom: 1px solid rgb(204,204,204); position: absolute; z-index: 100; bottom: -1px; left: 0; background-color: rgb(255,255,255); display: none; }
body#dark #header>div>dl>dt>div{ border-bottom-color: rgb(85,85,85); background-color: rgb(42,42,42); }
#header>div>dl>dd{ width: 100%; height: auto; position: absolute; top: 60px; left: 0; background-color: rgb(255,255,255); box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.3); display: none; }
body#dark #header>div>dl>dd{ 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>dl>dd>a{ width: 100%; height: 50px; display: block; color: rgb(18,18,18); font-size: 16px; font-weight: 400; text-align: center; line-height: 48px; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark #header>div>dl>dd>a{ color: rgb(220,220,220); }
#header>div>dl>dd>a:hover{ background-color: rgb(235,235,235); }
body#dark #header>div>dl>dd>a:hover{ background-color: rgb(85,85,85); }



#header>figure{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,0.6); display: none; }
#header>dl{ width: calc(100% - 300px); height: calc(100% - 300px); max-width: 1920px; margin: auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgb(8,91,176); display: none; overflow: auto; }
body#dark #header>dl{ background-color: rgb(6,66,125); }
#header>dl>dt{ width: calc(100% - 50px); height: 70px; padding: 0 30px 0 20px; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; position: absolute; top: 0; left: 0; background-color: rgb(8,91,176); }
body#dark #header>dl>dt{ background-color: rgb(6,66,125); }
#header>dl>dt>a{ width: 30px; height: 30px; position: relative; transition: all 0.12s ease-in-out; cursor: pointer; }
#header>dl>dt>a>div{ width: 30px; height: 2px; position: absolute; top: 50%; left: 0; background-color: rgb(255,255,255); transition: all 0.1s ease-in-out; }
#header>dl>dt>a>div:nth-of-type(1){ transform: rotate(45deg); }
#header>dl>dt>a>div:nth-of-type(2){ transform: rotate(-45deg); }
#header>dl>dt>div{ width: auto; display: flex; flex-flow: row nowrap; align-items: center; transition: all 0.12s ease-in-out; }
#header>dl>dt>div>a{ width: auto; height: auto; margin-left: 15px; color: rgb(255,255,255); font-size: 14px; font-weight: 300; line-height: 30px; transition: all 0.12s ease-in-out; cursor: pointer; }
#header>dl>dt>div>a:nth-of-type(1){ margin-left: 0; }
#header>dl>dd{ width: calc(100% - 100px); height: auto; margin-top: 70px; padding: 50px; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; transition: all 0.12s ease-in-out; }
#header>dl>dd>dl{ width: 100%; max-width: 600px; transition: all 0.12s ease-in-out; }
#header>dl>dd>dl>dt{ width: 100%; height: 50px; display: flex; flex-flow: row nowrap; align-items: center; transition: all 0.12s ease-in-out; }
#header>dl>dd>dl>dt>img{ width: 33px; height: 38px; margin-right: 15px; transition: all 0.12s ease-in-out; }
#header>dl>dd>dl>dt>span{ width: 100px; color: rgb(255,255,255); font-size: 20px; color: rgb(255,255,255); font-weight: 700; transition: all 0.12s ease-in-out; }
#header>dl>dd>dl>dd{ width: 100%; height: auto; padding: 5px 0 30px; word-break: keep-all; display: flex; flex-flow: row wrap; }
#header>dl>dd>dl>dd>a{ width: auto; margin: 5px 15px 0 0; font-size: 16px; color: rgb(170,212,255); font-weight: 400; transition: all 0.12s ease-in-out; cursor: pointer; }

@media(max-width:1200px){

    /* 1depth 메뉴 */
    #nav{ width: calc(100% - 390px); padding-right: 20px; padding-left: 370px; justify-content: space-around; }
    #nav>a{ margin-left: 0; font-size: 18px; }

}

@media(max-width:960px){

    /* 1depth 메뉴 */
    #nav{ width: 100%; height: 60px; padding-right: 0; padding-left: 0; position: static; }
    #nav>a{ display: none; }

    /* 햄버거 메뉴 & 로고 */
    #header{ height: 60px; }
    #header>div{ width: 100%; height: 100%; }
    #header>div>button{ width: 60px; height: 100%; }
    #header>div>button>div{ width: 25px; height: 2px; }
    #header>div>button>div:nth-of-type(1){ bottom: 18px; }
    #header>div>button>div:nth-of-type(3){ top: 18px; }

    #header>div>a{ width: calc(100% - 120px); height: 100%; }
    #header>div>a>img{ width: 74px; height: 50px; }
    #header>div>div{ display: none !important; }
    #header>div>dl{ display: none !important; }
    #header>div>figure{ width: 59px; height: 100%; border-left: 1px solid rgb(204,204,204); display: inline-block; float: left; line-height: 58px; text-align: center; font-size: 20px; color: rgb(8,91,176); background-color: rgb(255,255,255); transition: all 0.12s ease-in-out; cursor: pointer; }
    body#dark #header>div>figure{ border-left-color: rgb(85,85,85); background-color: transparent; color: rgb(220,220,220); }
    #header>div>figure:hover{ background-color: rgb(8,91,176); color: rgb(255,255,255); }
    #header>dl{ width: calc(100% - 100px); height: calc(100% - 100px); }
    #header>dl>dd>dl>dt>img{ width: 30px; height: 32px; }

}

@media(max-width:480px){

    /* 햄버거 메뉴 & 로고 */
    #header>dl{ width: 100%; height: 100%; min-width: 320px; }
    #header>dl>dd{ width: 100%; padding: 10px 0 30px; }
    #header>dl>dd>dl{ max-width: 240px; }
    #header>dl>dd>dl>dt{ cursor: pointer; }
    #header>dl>dd>dl>dt>img{ order: 2; width: 30px; height: 32px; margin: 0 0 0 15px; }
    #header>dl>dd>dl>dt>span{ order: 1; width: calc(100% - 45px); }
    #header>dl>dd>dl>dd{ height: 0; overflow: hidden; padding: 0; flex-flow: column nowrap; }
    #header>dl>dd>dl>dd>a{ margin: 10px 0 0; }

}


/* 서브 페이지 헤더 */
#sub_head{ width: 100%; height: 630px; margin-bottom: 100px; background-position: top 0 center; background-repeat: no-repeat; background-size: 100% auto; background-attachment: fixed; position: relative; transition: height, background-size 0.12s ease-in-out; }
#sub_head>figure{ width: 100%; height: 100%; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
#sub_head>figure>h4{ max-width: 100%; color: rgb(255,255,255); font-size: 46px; font-weight: 700; text-align: center; word-break: keep-all; transition: all 0.12s ease-in-out; }
#sub_head>figure>p{ max-width: 100%; margin: 10px 0 60px; color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 300; text-align: center; word-break: keep-all; letter-spacing: 5px; transition: all 0.12s ease-in-out; }
#sub_head>section{ width: 100%; height: 119px; border-top: 1px solid rgb(255,255,255); position: absolute; bottom: 0; left: 0; background-color: rgba(255,255,255,0.1); transition: all 0.12s ease-in-out; }
#sub_head>section>article{ width: calc(100% - 40px); height: 100%; max-width: 1200px; margin: auto; padding: 0 20px; display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; transition: all 0.12s ease-in-out; }
#sub_head>section>article>a{ width: auto; height: calc(100% - 9px); padding: 0 30px; border-top: 4px solid transparent; border-bottom: 5px solid transparent; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
#sub_head>section>article>a.current{ border-top-color: rgb(255,255,255); }
#sub_head>section>article>a>p{ max-width: 100%; color: rgb(255,255,255); font-size: 20px; font-weight: 300; word-break: keep-all; text-align: center; transition: all 0.12s ease-in-out; }
#sub_head>section>article>a.current>p{ font-weight: 700; }
#sub_head>div{ display: none !important; }

@media(max-width:1510px){
    #sub_head{ background-size: auto 630px; background-position: top 0 center; }
}

@media(max-width:960px){

    #sub_head{ height: 400px; margin-bottom: 70px; background-size: auto 460px; }
    #sub_head>figure>h4{ font-size: 40px; }
    #sub_head>figure>p{ margin: 10px 0 60px; }
    #sub_head>section{ display: none; }
    #sub_head>div{ width: 100%; height: 60px; min-width: 320px; border-top: 1px solid rgb(255,255,255); position: absolute; bottom: 0; left: 0; display: block !important; background-color: rgba(255,255,255,0.1); transition: all 0.12s ease-in-out; }
    #sub_head>div.scroll_down{ border-top: 1px solid rgb(204,204,204); position: fixed; top: 60px; z-index: 9999; box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.3); background-color: rgb(255,255,255); }
    body#dark #sub_head>div.scroll_down{ border-top: 1px solid rgb(85,85,85); position: fixed; top: 60px; z-index: 9999; box-shadow: rgba(0,0,0,0.3) 2px 2px 3px 1px; 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_head>div>div{ width: 1px; height: 60px; display: inline-block; float: left; background-color: rgb(255,255,255); transition: all 0.12s ease-in-out; }
    #sub_head>div>dl{ width: 50%; height: 60px; display: inline-block; float: left; position: relative; transition: width 0.12s ease-in-out; }
    #sub_head>div>dl:nth-of-type(2){ width: calc(50% - 1px); }
    #sub_head>div>dl>dt{ width: calc(100% - 35px); height: 100%; padding: 0 25px 0 10px; display: inline-flex; float: left; flex-flow: row nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; cursor: pointer; }
    #sub_head>div>dl>dt.on{ background-color: rgba(8,40,74,0.5); }
    #sub_head>div.scroll_down>dl>dt.on{ background-color: rgb(255,255,255); }
    body#dark #sub_head>div.scroll_down>dl>dt.on{ background-color: transparent; }
    #sub_head>div>dl>dt>span{ color: rgb(255,255,255); font-size: 16px; font-weight: 500; text-align: center; word-break: keep-all; transition: all 0.12s ease-in-out; }
    #sub_head>div>dl>dt>i{ color: rgb(255,255,255); font-size: 16px; position: absolute; top: 20px; right: 10px; transition: transform 0.12s ease-in-out; }
    #sub_head>div>dl>dt.on>i{ transform: rotate(180deg); }
    #sub_head>div>dl>dt>div{ width: 100%; height: 3px; border-bottom: 1px solid rgb(255,255,255); position: absolute; z-index: 100; bottom: -1px; left: 0; background-color: rgb(255,255,255); display: none; }
    #sub_head>div>dl>dd{ width: 100%; height: auto; position: absolute; top: 60px; left: 0; z-index: 10; background-color: rgb(8,40,74); box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.3); display: none; }
    #sub_head>div.scroll_down>dl>dd{ border-top: 1px solid rgb(220,220,220); background-color: rgb(255,255,255); }
    body#dark #sub_head>div.scroll_down>dl>dd{ border-top: 0; background-image: url('/static/img/dark_pattern.jpg'); background-position: center top 0; background-repeat: repeat; background-size: auto; }
    #sub_head>div.scroll_down>dl>dd>a{ color: rgb(18,18,18); }
    body#dark #sub_head>div.scroll_down>dl>dd>a{ color: rgb(220,220,220); }
    #sub_head>div>dl>dd>a{ width: 100%; height: 50px; border-top: 1px solid rgba(255,255,255,0.1); display: block; color: rgb(255,255,255); font-size: 16px; font-weight: 400; text-align: center; line-height: 48px; word-break: keep-all; transition: all 0.12s ease-in-out; cursor: pointer; }
    #sub_head>div>dl>dd>a:hover{ background-color: rgb(14,60,108); }
    #sub_head>div.scroll_down>dl>dd>a:hover{ color: rgb(255,255,255); }
    body#dark #sub_head>div.scroll_down>dl>dd>a:hover{ color: rgb(220,220,220); }

}

@media(max-width:580px){

    #sub_head>div>dl>dt.on{ background-color: rgba(255,255,255,0); }

}

@media(max-width:480px){

    #sub_head{ height: 240px; margin-bottom: 40px; background-size: auto 300px; }
    #sub_head>figure>h4{ font-size: 32px; }
    #sub_head>figure>p{ margin: 5px 0 50px; font-size: 12px; }
    #sub_head>div{ height: 50px; }
    #sub_head>div>div{ height: 50px; }
    #sub_head>div>dl{ height: 50px; }
    #sub_head>div>dl>dt>span{ font-size: 14px; }
    #sub_head>div>dl>dt>i{ top: 15px; font-size: 14px; }
    #sub_head>div>dl>dd{ top: 50px; }
    #sub_head>div>dl>dd>a{ font-size: 14px; }

}


/* 푸터 */
#footer{ width: 100%; margin-top: 100px; padding: 40px 0; background-color: rgb(34,34,34); transition: all 0.12s ease-in-out; }
body#dark #footer{ background-color: rgba(0,0,0,0.5); }
#footer>div{ width: calc(100% - 40px); max-width: 1240px; margin: auto; display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; }
#footer>div>div{ width: calc(100% - 200px); height: auto; display: flex; flex-flow: row wrap; transition: all 0.12s ease-in-out; }
#footer>div>div>h5{ width: 100%; color: rgb(102,102,102); font-size: 16px; font-weight: 500; transition: all 0.12s ease-in-out; }
#footer>div>div>a{ width: auto; margin: 5px 30px 0 0; color: rgb(102,102,102); font-size: 16px; font-weight: 500; word-break: keep-all; display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; cursor: pointer; }
#footer>div>div>a:hover{ color: rgb(204,204,204); }
#footer>div>div>a>span:nth-of-type(1){ width: 40px; min-width: 40px; }
#footer>div>div>h6{ width: 100%; margin-top: 10px; color: rgb(102,102,102); font-size: 16px; font-weight: 500; transition: all 0.12s ease-in-out; }
#footer>div>nav{ width: 200px; display: flex; flex-flow: column nowrap; transition: all 0.12s ease-in-out; }
#footer>div>nav>p{ width: 100%; transition: all 0.12s ease-in-out; }
#footer>div>nav>p>a{ width: auto; color: rgb(102,102,102); font-size: 14px; font-weight: 500; transition: all 0.12s ease-in-out; cursor: pointer; }
#footer>div>nav>p>a:hover{ color: rgb(204,204,204); }
#footer>div>nav>p:nth-of-type(2)>a{ color: rgb(255,255,255); }

/* 라이트 / 다크 모드 버튼 */
#view_mode_ctrl{ width: 130px; height: 40px; border-radius: 40px; position: fixed; right: 20px; bottom: 20px; z-index: 10; transition: all 0.12s ease-in-out; cursor: pointer; }
#view_mode_ctrl>div{ width: 100%; height: 100%; border-radius: 50px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; transition: all 0.12s ease-in-out; }
#view_mode_ctrl>div{ background-color: rgba(0,0,0,0.8); color: rgb(220,220,220); }
#view_mode_ctrl>div:hover{ background-color: rgba(51,51,51,0.8); }
body#light #view_mode_ctrl>div#light_btn{ display: none; }
body#dark #view_mode_ctrl>div#dark_btn{ display: none; }
#view_mode_ctrl>div>i{ transition: all 0.12s ease-in-out; }
#view_mode_ctrl>div#light_btn>i{ color: rgb(46,168,225); }
#view_mode_ctrl>div#dark_btn>i{ color: rgb(252,216,38); }
#view_mode_ctrl>div>p{ margin-left: 10px; transition: all 0.12s ease-in-out; }

@media(max-width:960px){

    /* 푸터 */
    #footer{ margin-top: 70px; padding: 30px 0; }
    #footer>div>div{ width: calc(100% - 150px); }
    #footer>div>div>h5{ font-size: 14px; }
    #footer>div>div>a{ margin-right: 15px; font-size: 14px; }
    #footer>div>div>h6{ font-size: 14px; }
    #footer>div>nav{ width: 150px; }

    /* 라이트 / 다크 모드 버튼 */
    #view_mode_ctrl{ margin: 20px 20px 0 auto; position: static; right: 0; border: 0; }

}

@media(max-width:480px){

    /* 푸터 */
    #footer{ margin-top: 40px; padding: 20px 0; }
    #footer>div>div{ width: 100%; flex-flow: column nowrap; }
    #footer>div>div>a{ margin-right: 0; }
    #footer>div>nav{ width: 100%; margin-top: 20px; flex-flow: row wrap; }
    #footer>div>nav>p{ width: auto; margin-right: 15px; }

}

/* 페이지 준비중 */
.preparation{ width: 100%; height: 400px; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; transition: all 0.12s ease-in-out; }
.preparation>i{ color: rgb(8,91,176); font-size: 80px; transition: all 0.12s ease-in-out; }
body#dark .preparation>i{ color: rgb(46,168,225); }
.preparation>h4{ margin-top: 20px; font-size: 20px; font-weight: 500; transition: all 0.12s ease-in-out; }
.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; transition: all 0.12s ease-in-out; }
body#dark .preparation>p{ color: rgb(153,153,153); }

@media(max-width:960px){

    .preparation{ height: 300px; }
    .preparation>i{ font-size: 60px; }
    .preparation>h4{ font-size: 16px; }
    .preparation>h4>span{ font-size: 24px; }

}

@media(max-width:480px){

    .preparation{ height: 200px; }
    .preparation>i{ font-size: 50px; }
    .preparation>h4{ margin-top: 15px; font-size: 14px; }
    .preparation>h4>span{ font-size: 20px; }
    .preparation>p{ font-size: 13px; }

}

/* 개인정보처리방침 */
#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% - 380px); height: calc(100% - 380px); max-width: 1840px; 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% - 380px); height: calc(100% - 380px); max-width: 1840px; 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% - 160px); height: calc(100% - 160px); 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% - 160px); height: calc(100% - 160px); 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: calc(100% - 40px); 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; }
    #privacy_info>dl>dd{ width: calc(100% - 40px); height: calc(100% - 80px); 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: calc(100% - 40px); 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; }
    #policy_info>dl>dd{ width: calc(100% - 40px); height: calc(100% - 80px); 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; }

}


/* 게시판 공통 */
/* 뷰페이지 */
.board_view{ width: 100%; margin-bottom: 150px; 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: 150px; height: auto; margin-left: 10px; padding: 10px 0; border: 1px solid transparent; 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>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.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); }
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.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); }
.board_view>h5{ width: 100%; margin-top: 20px; display: flex; flex-flow: row wrap; }
.board_view>h5>p{ margin-right: 40px; color: rgb(18,18,18); font-size: 14px; font-weight: 400; }
body#dark .board_view>h5>p{ color: rgb(220,220,220); }
.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: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>dl>dt{ width: 100px; padding: 15px 10px; color: rgb(18,18,18); font-size: 14px; font-weight: 500; word-break: keep-all; transition: all 0.12s ease-in-out; }
body#dark .board_view>dl>dt{ color: rgb(220,220,220); }
.board_view>dl>dd{ width: calc(100% - 140px); padding: 15px 10px; color: rgb(18,18,18); font-size: 14px; font-weight: 400; word-break: keep-all; transition: all 0.12s ease-in-out; }
body#dark .board_view>dl>dd{ color: rgb(220,220,220); }
.board_view>div{ width: calc(100% - 20px); height: auto; min-height: 220px; padding: 15px 10px; border-bottom: 1px solid rgb(220,220,220); font-size: 14px; transition: all 0.12s ease-in-out; }
body#dark .board_view>div{ color: rgb(220,220,220); }
body#dark .board_view>div{ border-bottom-color: rgb(85,85,85); }
.board_view>div>.player_area{ width: 100%; height: 0; margin-bottom: 20px; padding-top: 0; padding-bottom: 56.25%; position: relative; overflow: hidden; }
.board_view>div>.player_area iframe,.board_view>div>.player_area object,.board_view>div>.player_area embed{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.board_view>div img{ width: auto; height: auto; max-width: 100%; margin: 10px 0; display: block; }
.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%; color: rgb(18,18,18); display: flex; flex-flow: row nowrap; }
body#dark .board_view>ul>li>a>dl>dt{ color: rgb(220,220,220); }
.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; transition: all 0.12s ease-in-out; }
.board_view>section>a{ width: 70px; height: auto; padding: 10px 0; border: 1px solid rgb(220,220,220); color: rgb(18,18,18); 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; }
body#dark .board_view>section>a{ border-color: rgb(85,85,85); color: rgb(220,220,220); }
.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>section>a.next_btn{ margin-left: auto; }

/* 게시판 목록 - 리스트형 */
.board_list{ width: 100%; transition: all 0.12s ease-in-out; }
.board_list>h6{ width: calc(100% - 10px); margin: 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>div{ width: 100%; border-top: 1px solid rgb(185,185,185); border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
body#dark .board_list>div{ border-top-color: rgb(220,220,220); border-bottom-color: rgb(153,153,153); }
.board_list>div>p{ padding: 15px 0; 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>div>p{ color: rgb(220,220,220); }
.board_list>div>p:nth-of-type(1){ width: 80px; }
.board_list>div>p:nth-of-type(2){ width: calc(100% - 360px); }
.board_list>div>p:nth-of-type(3){ width: 100px; }
.board_list>div>p:nth-of-type(4){ width: 80px; }
.board_list>div>p:nth-of-type(5){ width: 100px; }
.board_list>ul{ width: 100%; transition: all 0.12s ease-in-out; }
.board_list>ul>a{ 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; cursor: pointer; }
body#dark .board_list>ul>a{ border-bottom-color: rgb(85,85,85); }
.board_list>ul>a:hover{ background-color: rgb(250,250,250); }
body#dark .board_list>ul>a:hover{ background-color: rgba(255,255,255,0.1); }
.board_list>ul>a.notice{ background-color: rgb(245,245,245); }
body#dark .board_list>ul>a.notice{ background-color: rgba(255,255,255,0.3); }
.board_list>ul>a>p{ padding: 15px 0; color: rgb(18,18,18); font-size: 14px; font-weight: 400; text-align: center; word-break: keep-all; transition: all 0.12s ease-in-out; }
body#dark .board_list>ul>a>p{ color: rgb(220,220,220); }
.board_list>ul>a>p:nth-of-type(1){ width: 80px; }
.board_list>ul>a>p:nth-of-type(2){ width: calc(100% - 360px); display: flex; flex-flow: row nowrap; }
.board_list>ul>a>p:nth-of-type(3){ width: 100px; }
.board_list>ul>a>p:nth-of-type(4){ width: 80px; }
.board_list>ul>a>p:nth-of-type(5){ width: 100px; }
.board_list>ul>a>p>b{ color: inherit; font-size: inherit; font-weight: inherit; transition: all 0.12s ease-in-out; }
.board_list>ul>a>p:nth-of-type(2)>b{ text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board_list>ul>a>p:nth-of-type(2)>b.is_file{ max-width: calc(100% - 20px); }
.board_list>ul>a>p:nth-of-type(2)>span{ width: 20px; color: rgb(8,91,176); text-align: right; }
body#dark .board_list>ul>a>p:nth-of-type(2)>span{ color: rgb(46,168,225); }
.board_list>p{ width: 100%; padding: 50px 0; border-bottom: 1px solid rgb(220,220,220); color: rgb(18,18,18); font-size: 14px; text-align: center; }
body#dark .board_list>p{ border-bottom-color: rgb(85,85,85); color: rgb(220,220,220); }

/* 게시판 목록 - 웹진형 */
.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: calc(100% - 10px); margin: 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: calc(100% - 30px); border-bottom: 1px solid rgb(220,220,220); padding: 15px; display: flex; flex-flow: row wrap; align-items: flex-start; 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-width: 0; padding: 0 15px; 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; 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{ background-image: url('/static/img/logo.png'); background-size: auto; }
body#dark .board_webzine>a>figure.no_thumb{ background-image: url('/static/img/logo_w.png'); }
.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; 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: 20px; 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>dd{ width: 100%; height: 90px; margin-top: 15px; color: rgb(153,153,153); font-size: 16px; font-weight: 400; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 30px; transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>dl>dd{ color: rgb(153,153,153); }
.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: 16px; font-weight: 400; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; line-height: 30px; transition: all 0.12s ease-in-out; }
body#dark .board_webzine>a>dl>p{ color: rgb(102,102,102); }
.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); }

/* 페이징 */
.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; color: rgb(18,18,18); 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); color: rgb(220,220,220); }
.page_area>li{ width: 35px; height: 35px; margin: 0 3px; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; color: rgb(18,18,18); word-break: keep-all; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .page_area>li{ color: rgb(220,220,220); }
.page_area>li.current{ font-size: 14px; font-weight: 400; text-align: center; line-height: 35px; cursor: auto; }
.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); }
.page_area>li>a{ width: 100%; height: 100%; color: inherit; font-size: 14px; font-weight: 400; text-align: center; line-height: 35px; }

/* 검색 영역 */
.search_area{ width: 100%; max-width: 300px; margin-top: 80px; border-bottom: 1px solid rgb(220,220,220); display: flex; flex-flow: row nowrap; transition: all 0.12s ease-in-out; }
body#dark .search_area{ border-bottom-color: rgb(85,85,85); }
.search_area>input{ width: calc(100% - 55px); height: 25px; padding: 5px 10px; border: 0; outline: 0; color: rgb(18,18,18); font-size: 14px; font-weight: 400; background-color: transparent; transition: all 0.12s ease-in-out; }
body#dark .search_area>input{ color: rgb(220,220,220); }
.search_area>button{ width: 35px; height: 35px; border: 0; outline: 0; color: rgb(18,18,18); font-size: 18px; text-align: center; background-color: transparent; transition: all 0.12s ease-in-out; cursor: pointer; }
body#dark .search_area>button{ color: rgb(220,220,220); }

@media(max-width:960px){

    .board_view{ margin-bottom: 80px; }
    .board_view>div{ min-height: 150px; }

    .board_list>ul>a>p{ font-size: 13px; }
    .board_list>div>p:nth-of-type(1){ width: 50px; }
    .board_list>div>p:nth-of-type(2){ width: calc(100% - 260px); }
    .board_list>div>p:nth-of-type(3){ width: 80px; }
    .board_list>div>p:nth-of-type(4){ width: 50px; }
    .board_list>div>p:nth-of-type(5){ width: 80px; }
    .board_list>ul>a>p:nth-of-type(1){ width: 50px; }
    .board_list>ul>a>p:nth-of-type(2){ width: calc(100% - 260px); }
    .board_list>ul>a>p:nth-of-type(3){ width: 80px; }
    .board_list>ul>a>p:nth-of-type(4){ width: 50px; }
    .board_list>ul>a>p:nth-of-type(5){ width: 80px; }

    .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-width: 0; padding: 0; box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.1); }
    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: calc(100% - 40px); height: auto; padding: 20px; }
    .board_webzine>a>dl>dt{ height: 24px; margin-top: 0; font-size: 18px; }
    .board_webzine>a>dl>dd{ height: auto; margin-top: 10px; font-size: 14px; line-height: 24px; transition: all 0.12s ease-in-out; }
    .board_webzine>a>dl>p{ height: auto; margin-top: 20px; font-size: 14px; line-height: 1.6; }
    .board_webzine>a>dl>dd *{ margin-right: 5px; display: inline; }

    .page_area{ margin-top: 30px; }

    .search_area{ margin-top: 50px; }

}

@media(max-width:780px){

    .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_webzine>a{ width: calc(50% - 10px); }
    .board_webzine>a:nth-of-type(3){ margin-top: 20px; }

}

@media(max-width:480px){

    .board_view{ margin-bottom: 60px; }
    .board_view>div{ min-height: 120px; }

    .board_list>ul>a>p{ font-size: 13px; }
    .board_list>div>p:nth-of-type(1){ width: 50px; }
    .board_list>div>p:nth-of-type(2){ width: calc(100% - 130px); }
    .board_list>div>p:nth-of-type(4){ width: 0; height: 0; overflow: hidden; }
    .board_list>div>p:nth-of-type(5){ width: 0; height: 0; overflow: hidden; }
    .board_list>ul>a>p:nth-of-type(1){ width: 50px; }
    .board_list>ul>a>p:nth-of-type(2){ width: calc(100% - 130px); }
    .board_list>ul>a>p:nth-of-type(4){ width: 0; height: 0; overflow: hidden; }
    .board_list>ul>a>p:nth-of-type(5){ width: 0; height: 0; overflow: hidden; }

    .board_webzine>a>figure{ height: 130px; }
    .board_webzine>a>div.player_area{ height: 130px; }
    .board_webzine>a>dl{ width: calc(100% - 30px); padding: 15px; }
    .board_webzine>a>dl>dt{ height: 20px; font-size: 16px; }
    .board_webzine>a>dl>dd{ font-size: 12px; line-height: 20px; }
    .board_webzine>a>dl>p{ margin-top: 15px; font-size: 12px; }

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

    .search_area{ margin: 30px auto 0; }

}

@media(max-width:380px){

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

}



/* jquery-ui */
body#dark .ui-widget.ui-widget-content{ border-color: rgb(85,85,85); }
body#dark .ui-widget-content{ 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 .ui-widget-header{ border-color: rgb(85,85,85); background: rgba(255,255,255,0.1); }
body#dark .ui-state-default, body#dark .ui-widget-content .ui-state-default{ border-color: rgb(85,85,85); background: rgba(255,255,255,0.1); }
body#dark .ui-state-default:hover, body#dark .ui-widget-content .ui-state-default:hover{ background: rgba(255,255,255,0.2); }