@charset 'utf-8';

/* ====================== */
/* UI Reset */
/* ====================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/static/pretendard-subset.min.css');

* {margin:0;padding:0;font:inherit;}
*, *::before, *::after {box-sizing:border-box;}
html {font-size: 62.5%;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-touch-callout: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
img, video, svg, picture {display:block;height:auto;max-width:100%;}
body {font-size:1.4rem;color:#333D4B;overflow-x: hidden;font-family:"Pretendard", pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Hiragino Sans", "Apple SD Gothic Neo",  "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;letter-spacing:-0.1px;}
a {text-decoration:none;cursor:pointer;}
button {border:none;cursor:pointer;background-color:transparent;}
sup {line-height:1;vertical-align:0px;}
ul, ol, li {list-style:none;}

input {-webkit-appearance: none;-moz-appearance: none;appearance: none;color:#333D4B;}
input::-ms-clear {display: none;}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
input[type='number'] {-moz-appearance: textfield;}

select {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand {display: none;}

::-webkit-scrollbar {width: 7px;height:5px;}
::-webkit-scrollbar-thumb {background: lightgray;border-radius: 10px;}

.blind {position:absolute; clip:rect(0 0 0 0); width:1px; height:1px; margin:-1px; overflow:hidden;}
.only-m {display:none;}

.btn {height:48px;display:inline-flex;align-items:center;justify-content:center;background-color:#ddd;border-radius:4px;padding:0 10px;}
.btn.primary {background-color:#5297FF;color:#fff;}
.btn.primary2 {background-color:#446390;color:#fff;}
.btn.gray {background-color:#f9f9f9;border:1px solid #f0f0f0;color:#969696;}

/* ====================== */
/* 공통 */
/* ====================== */
:root {
    --primary: #63008A;
    --secondary: #F5E8FF;
    --red: #FF3336;
    --blue: #3A54FF;
    --green: #00CE6A;

    --swiper-navigation-color: #5297FF;
    --swiper-pagination-color: #5297FF;
}

.inner {padding:0 20px;max-width:1180px;width:100%;margin-left:auto;margin-right:auto;}

/* ====================== */
/* 레이아웃 */
/* ====================== */
.header-wrap {border-bottom: 1px solid #F0F0F0;background: #FFF;box-shadow: 1px 1px 4px 0px rgba(140, 194, 215, 0.10);position:fixed;top:0;left:0;right:0;z-index:10;}
.header-wrap header {display:flex;justify-content:space-between;height:74px;align-items:center;}
.header-wrap .hd-gnb {display:flex;gap:40px;}
.header-wrap .hd-gnb a {color:#333D4B;}
.header-wrap .hd-right {display:flex;gap:10px;align-items:center;}
.header-wrap .hd-right .btn-register {display:flex;padding:10px 25px;background: #F9FAFB;gap:6px;border-radius:50px;color:#333D4B;align-items:center;}
.header-wrap .hd-right .btn-login {display:flex;padding:10px 25px;background: #F9FAFB;gap:6px;border-radius:50px;color:#333D4B;align-items:center;}
.header-wrap .hd-right .btn-register img {flex:none;width:14px;}
.header-wrap .hd-right .btn-login img {flex:none;width:14px;}
.header-wrap .hd-right .btn-menu {display:none;width:40px;height:40px;font-size:0;white-space:nowrap;overflow:hidden;background:transparent url(../images/btn_menu.svg) no-repeat center;background-size:50% auto;}
#container {padding-top:74px;}
.footer-wrap {border-top: 1px solid #F0F0F0;background: #FFF;padding:40px 0 30px;margin-top:100px;}
.footer-wrap .ft-logo {height:33px;margin-bottom:40px;}
.footer-wrap .ft-link {margin-bottom:30px;}
.footer-wrap .ft-link a {color:#969696;font-size:14px;margin-right:20px;}
.footer-wrap .ft-company {margin-bottom:36px;}
.footer-wrap .ft-company > div {display:flex;gap:8px;align-items:start;font-size:14px;color:#969696;margin-bottom:10px;line-height:1.55;}
.footer-wrap .ft-company > div img {height:18px;width:18px;object-fit:contain;}
.footer-wrap .ft-copyright {font-size:14px;color:#969696;}

/* drawer */
.drawer-wrap {position:fixed;left:0;top:68px;bottom:0;right:0;z-index:101;background-color:rgba(0, 0, 0, .4);overflow:hidden;opacity:0;transition:opacity .3s ease;pointer-events:none;}
.drawer-wrap .drawer {width:100%;height:100%;padding-top:20px;background-color:#fff;margin-left:auto;box-shadow:0 0 13px 3px rgba(43, 43, 43, 0.1);transform:translateX(100%);transition:transform .5s ease;}
.drawer-wrap.active {opacity:1;pointer-events:inherit;}
.drawer-wrap.active .drawer {transform:translateX(0);}
.drawer-wrap .hd-auth {width:100%;display:flex;gap:16px;margin-bottom:12px;padding:0 20px;}
.drawer-wrap .hd-auth .btn-register {display:flex;padding:12px 13px;background: #efefef;gap:6px;border-radius:50px;color:#333D4B;align-items:center;width:100%;justify-content:center;font-size:16px;}
.drawer-wrap .hd-auth .btn-login {display:flex;padding:12px 13px;background: #efefef;gap:6px;border-radius:50px;color:#333D4B;align-items:center;width:100%;justify-content:center;font-size:16px;}
.drawer-wrap .hd-auth .btn-register img {flex:none;width:15px;}
.drawer-wrap .hd-auth .btn-login img {flex:none;width:15px;}
.drawer-wrap .hd-gnb a {display:block;color:#333D4B;font-weight:500;padding:20px 20px;border-bottom:1px solid #efefef;font-size:16px;}

/* sns */
.sns-navigation {position:fixed;right:40px;top:50%;transform:translateY(-50%);border-radius: 50px;border: 1px solid #F0F0F0;background: #FFF;box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.06);width:60px;text-align:center;padding:20px 0;z-index:10;}
.sns-navigation img {margin:0 auto 4px;}
.sns-navigation a {display:block;font-size:10px;color:#7A7A7A;}
.sns-navigation a:after {content:'';display:block;width:30%;border:1px solid #DADADA;margin:20px auto;}
.sns-navigation a:last-child:after {content:none;}

/* 테이블 공통 */
.tls {border-radius:8px;border:1px solid #f0f0f0;overflow:hidden;}
.tls table {width:100%;border-collapse:collapse;text-align: center;}
.tls th {background-color:#5297FF;color:#fff;font-weight:500;padding:12px 0;border:1px solid #F0F0F0;}
.tls td {padding:11px 5px;border:1px solid #f0f0f0;line-height:1.4;vertical-align:middle;}
.tls tbody tr:nth-child(even) {background-color:#f9f9f9;}

/* 서브페이지 공통 */
h3 {font-size:16px;font-weight:600;line-height:1;padding-left:6px;border-left:3px solid #5297FF;margin:40px 0 20px;}
h3 span {font-size:13px;color:#969696;font-weight: 400;margin-left:3px;}
.page-header {padding:40px 0;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #E4E4E4;margin-bottom:60px;}
.page-header .page-prev,
.page-header .page-next {color:#969696;display:inline-flex;font-size:16px;align-items:center;gap:10px;transition:all .3s ease;}
.page-header .page-prev:hover,
.page-header .page-next:hover {color:#333D4B;}
.page-header .page-prev:before,
.page-header .page-next:after {content:'';display:inline-block;width:36px;height:36px;border-radius:100px;border:1px solid #999;background: rgba(255, 255, 255, 0.20) url(../images/page_prev.svg) no-repeat calc(50% - 1px) center/50%;transition: all .3s ease;opacity:.4;}
.page-header .page-prev:hover:before,
.page-header .page-next:hover:after {opacity:1;}
.page-header .page-next:after {transform:rotate(180deg);}
.page-header .page-title {text-align:center;margin:0 auto;}
.page-header .page-title h2 {font-size:24px;font-weight:600;margin-bottom:8px;}
.page-header .page-title p {color:#969696;font-size:16px;}
.breadcrumb {padding:15px 0;border-bottom:1px solid #E4E4E4;;}
.breadcrumb a {vertical-align:middle;color:#969696;display:inline-block;}
.breadcrumb i {display:inline-block;width:1px;height:12px;margin:0 20px;background-color:#969696;vertical-align:middle;}
.breadcrumb .home {width:30px;height:30px;border-radius:4px;background:#5297FF url(../images/breadcrumb_home.svg) no-repeat center/19px auto;font-size:0;text-indent:-9999px;overflow:hidden;white-space:nowrap;}

/* pagination */
.pagination {display:flex;gap:10px;align-items:center;justify-content:center;margin-top:30px;}
.pagination a {width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:100px;border: 1px solid #eee;background: #FFF;font-size:13px;color:#333D4B;}
.pagination a.active {color:#5297FF;font-weight:600;}
.pagination .pg-prev,
.pagination .pg-next {font-size:0;text-indent:-9999px;overflow:hidden;white-space:nowrap;background:url(../images/pagination_arrow.svg) no-repeat calc(52%) center/40%;}
.pagination .pg-prev.disabled,
.pagination .pg-next.disabled {background-image: url(../images/pagination_arrow_disabled.svg);}
.pagination .pg-next {transform:rotate(180deg);}

/* 게시판 */
.board-wrap .board-top {display:flex;align-items:center;justify-content:space-between;padding-bottom:15px;}
.board-wrap .board-top p {font-size: 16px;font-weight:600;}
.board-wrap .board-top .title {vertical-align:middle;font-size:16px;font-weight:600;margin-right:4px;}
.board-wrap .board-top .total {color:#5297FF;font-weight:600;vertical-align:middle;}
.board-wrap .board-top .search {position:relative;width:226px;}
.board-wrap .board-top .search input {border-radius: 5px;border: 1px solid #EEE;width:100%;height:36px;font-size:13px;padding:0 12px;transition:all .3s ease;padding-right:36px;}
.board-wrap .board-top .search input:focus {outline:none;border-color:#333D4B;}
.board-wrap .board-top .search input::placeholder {color:#969696;font-weight:400;}
.board-wrap .board-top .search .btn-search {display:inline-block;width:36px;height:36px;position:absolute;right:0;top:0;font-size:0;text-indent:-999px;white-space:nowrap;overflow:hidden;background:transparent url(../images/btn_search.svg) no-repeat center/45%;z-index:1;}
.board-wrap .board-list .list-head {border-top:1px solid #333D4B;}
.board-wrap .board-list .list-head .list-item > div[class^="col-"] {font-weight:600;}
.board-wrap .board-list .list-item {border-bottom:1px solid #E4E4E4;display:table;width:100%;text-align: center;height:48px;table-layout:fixed;position:relative;}
.board-wrap .board-list .list-item > [class^="col-"] {display:table-cell;vertical-align:middle;padding:13px 28px;}
.board-wrap .board-list .list-item .doc {display:inline-block;width:17px;height:17px;border-radius:3px;font-size:0;text-indent:-9999px;overflow:hidden;white-space:nowrap;background:#5297FF url(../images/board_icon_doc.svg) no-repeat center/12px auto;margin-right:6px;vertical-align:middle;}
.board-wrap .board-list .list-item .comment {font-size:13px;color:#5297FF;font-weight:500;margin-left:4px;}
.board-wrap .board-list .list-item:hover a {text-decoration:underline;}
.board-wrap .board-list .list-item > .col-title {text-align:left;min-width: 0;}
.board-wrap .board-list .list-item > .col-title a {width:85%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle;}
.board-wrap .board-list .list-item > .col-writer {width:100px;}
.board-wrap .board-list .list-item > .col-time {width:160px;}
.board-wrap .board-list .list-item > .col-view {width:94px;}
.board-wrap .board-list .list-item .m-label {display:none;}

/* 태블릿 */
@media screen and (max-width: 960px) {
    .header-wrap .hd-gnb {display:none;}
    .header-wrap .hd-right .btn-menu {background-size:60% auto;display:block;}
    .sns-navigation {right:20px;}
    .header-wrap .hd-right .btn-login {display:none;}
    .header-wrap .hd-right .btn-register {display:none;}
}

/* 모바일 */
@media screen and (max-width: 768px) {
    .only-m {display:block;}
    .only-pc {display:none;}

    .header-wrap header {height:68px;}
    
    

    #container {padding-top:68px;}

    .footer-wrap .ft-logo {margin-bottom:20px;}
    .footer-wrap .ft-link a {font-size:14px;}
    .footer-wrap .ft-company {margin-bottom:24px;}
    .footer-wrap .ft-company > div {font-size:14px;margin-bottom:8px;}
    .footer-wrap .ft-company > div img {height:17px;}
    .footer-wrap .ft-copyright {font-size:14px;line-height:1.5;}
    
    .sns-navigation {top:auto;transform:none;bottom:20px;width:50px;padding:16px 0;}
    .sns-navigation a {font-size: 0;}
    .sns-navigation img {margin-bottom:0;}
    .sns-navigation a:after {margin:12px auto;}

    .breadcrumb {padding:10px 0;}
    .page-header {position:relative;padding-top:70px;padding-bottom:30px;margin-bottom:30px;}
    .page-header .page-prev,
    .page-header .page-next {font-size:14px;position:absolute;top:14px;width: 50%;gap:8px;}
    .page-header .page-prev  {left:0;justify-content:start;}
    .page-header .page-next {right:0;justify-content:end;}
    .page-header .page-prev:before,
    .page-header .page-next:after {width:24px;height:24px;}
    .page-header .page-title {width:100%;}
    .page-header .page-title p {font-size:15px;}

    .board-wrap .board-top .search {width:180px;}
    .board-wrap .board-list .list-head {display:none;}
    .board-wrap .board-list .list-item {display:block;height:auto;padding:18px 0;text-align:left;}
    .board-wrap .board-list .list-item>[class^="col-"] {display:block;width:100%;padding:0;}
    .board-wrap .board-list .list-item>.col-title {margin-bottom:10px;}
    .board-wrap .board-list .list-item>.col-title a {font-size:15px;}
    .board-wrap .board-list .list-item>.col-writer {display:inline-block;width:auto;color:#969696;}
    .board-wrap .board-list .list-item>.col-writer:after {content:'';display:inline-block;width:1px;height:10px;background-color:#ddd;vertical-align:0;margin:0 4px 0 8px;}
    .board-wrap .board-list .list-item>.col-time {display:inline-block;width:auto;color: #969696;}
    .board-wrap .board-list .list-item>.col-view {display:inline-block;width:auto;color: #969696;float:right;}
    .board-wrap .board-list .list-item .m-label {display:inline-block;margin-right:4px;font-size:12px;vertical-align:1px;}

    .tls th {font-size:13px;}
    .tls td {font-size:13px;}
}