@charset "UTF-8";@import url("/resources/css/fnc_css/font/font.css");*,
*::after,
*::before { box-sizing: border-box; margin: 0; padding: 0; } 
html { font-size: 16px; line-height: 24px; font-family: "Noto Sans KR", sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: transparent; } 
body { display: block; position: relative; word-break: keep-all; } 
a { color: inherit; text-decoration: none; cursor: pointer; } 
img { max-width: 100%; max-height: 100%; } 
input,
button,
select,
textarea { border: none; outline: none; background-color: transparent; color: inherit; cursor: pointer; font-size: inherit; } 
form,
label { display: block; width: 100%; } 
canvas { width: 100%; height: 100%; } 

/* 헤더 */
.header { width: 100%; height: 80px; background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding-right: 50px; z-index:999;position:relative;} 
.header-logo { width: 320px; height: 100%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 
.header > div { display: flex; align-items: center; gap: 20px; } 
.header > div > a { height: 40px; padding: 0 30px; display: flex; align-items: center; justify-content: center; border: 1px solid #d6d6d6; border-radius: 21px; font-size: 16px; line-height: 24px; color: #34bdea; transition: all 0.2s; } 
.header > div > a:hover { background-color: #34bdea; color: #fff; border: 1px solid #34bdea; } 
.header > div > p { font-size: 16px; line-height: 24px; font-weight: 600; display: flex; align-items: center; gap: 10px; } 
.header > div > p > span { color: #b7b7b7; font-weight: 400; } 

.mo-btn { display: none; } 

/* 사이드바 */
.sidebar {z-index:999; width: 320px; height: 100%; flex-shrink: 0; background-color: #fff; display: flex; flex-direction: column; justify-content: space-between; } 
.sidebar > div { background-color: #fff; } 
.sidebar-menu { height: 100%; } 
.sidebar-menu > div > a { position: relative; width: 100%; height: 65px; display: flex; align-items: center; color: #989898; font-size: 18px; line-height: 26px; font-weight: 500; padding-left: 80px; } 
.sidebar-menu > div > a::before { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background-color: #dce8ec; top: 50%; left: 60px; transform: translateY(-50%); } 
.sidebar-menu > div.active > a,
.sidebar-menu > div:hover > a { background-color: #f3f3f3; color: #34bdea; } 
.sidebar-menu > div.active > a::before,
.sidebar-menu > div:hover > a::before { background-color: #34bdea; } 
.sidebar-menu > div.active > a::after,
.sidebar-menu > div:hover > a::after { content: ""; position: absolute; width: 8px; height: 100%; background-color: #34bdea; border-radius: 10px 0 0 10px; right: 0; top: 0; } 
.sidebar-bot { flex-shrink: 0; } 
.sidebar-bot > p { width: 100%; font-size: 12px; line-height: 20px; font-weight: 500; color: #989898; text-align: center; padding: 0 20px 40px; } 
.sidebar-sns { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 30px; } 
.sidebar-menu-hidden { display: none; } 
.sidebar-menu > div.active > .sidebar-menu-hidden { display: block; } 
.sidebar-menu-hidden > a { display: flex; align-items: center; width: 100%; height: 60px; padding-left: 100px; color: #b4b4b4; font-size: 16px; line-height: 24px; font-weight: 500; background-color: #f3f3f3; position: relative; } 
.sidebar-menu-hidden > a::before { content: ""; position: absolute; width: 8px; height: 8px; top: 50%; left: 80px; transform: translateY(-50%); background: url("/resources/images/fnc_images/common/sidebar_hidden_icon1.svg") no-repeat center; } 
.sidebar-menu-hidden > a.active,
.sidebar-menu-hidden > a:hover { background-color: #34bdea; box-shadow: inset 0px 3px 6px #00000029; color: #fff; } 
.sidebar-menu-hidden > a.active::before,
.sidebar-menu-hidden > a:hover::before { background: url("/resources/images/fnc_images/common/sidebar_hidden_icon2.svg") no-repeat center; } 

/* 페이징 */
#user_board_paging { border: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 10px; margin-top: 30px; } 
#user_board_paging span { border-radius: 50%; background: #fff; color: #34bdea; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-weight: bold; } 
#user_board_paging a span { background: #fff; color: #c1c1c1; font-weight: 400; } 
#user_board_paging a span:hover { background: #fff; color: #34bdea; border: none; font-weight: bold; } 
#user_board_paging span.prev { background: #fff; color: #000; } 
#user_board_paging span.next { background: #fff; color: #000; } 

/* 반응형 */
@media (max-width: 1650px){
 .header-logo { width: 240px; } 
 .sidebar { width: 240px; } 
 .sidebar-menu > div > a { padding-left: 50px; } 
 .sidebar-menu > div > a::before { left: 30px; } 
 .sidebar-menu-hidden > a { padding-left: 70px; } 
 .sidebar-menu-hidden > a::before { left: 50px; } 
 }
/* @media (max-width: 1439px) { } */
@media (max-width: 1279px){
 .sidebar { display: none; position: fixed; right: 0; top: 60px; height: calc(100% - 60px); overflow:auto;background:#fff;z-index:990;} 
 .sidebar::before { content: ""; position: fixed; right: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } 
 .sidebar.active { display: flex; } 
 .sidebar-menu,.sidebar-bot { z-index: 5; }
 .sidebar-bot{padding-top:30px;} 
 .sidebar-menu > div > a{height:50px;font-size:16px;line-height:24px;padding-left:30px;}
 .sidebar-menu > div > a::before{display:none;}
 .sidebar-menu-hidden > a{padding-left:40px;height:40px;font-size:14px;line-height:22px;}
 .sidebar-menu-hidden > a::before{left:15px;}
 .header { height: 60px; padding: 0 20px; position:fixed;top:0;left:0;} 
 .header-logo { width: 140px; } 
 .header > div > a { height: 35px; font-size: 14px; line-height: 20px; padding: 0 15px; display:none;} 
 .mo-btn { display: block; }
 .mo-btn > img{height:25px;} 
 .sidebar-bot > p{padding:0 10px 20px;}
 .sidebar-sns{margin-bottom:20px;gap:20px;}
 .sidebar-sns > a{width:40px;}

 }
@media (max-width: 1023px){
 #user_board_paging { gap: 5px; margin-top:20px;} 
 #user_board_paging span { width: 25px; height: 25px; font-size: 14px; border: none; } 
 }

@media (max-width: 767px){
 .header { padding: 0 10px; } 
 .header > div { gap: 10px; } 
 .header > div > p { flex-direction: column; gap: 0; font-size: 14px; line-height: 20px; }
 .header-logo{width:120px;} 
 }

@media (max-width: 479px) { }