/* font */
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* //font */

:root {
  --pr : #333333;
  --yellow : #fae100;
  --black : #000;
  --black_08 : rgba(0, 0, 0, 0.8);
  --gray_d1 : #d1d1d1;
  --gray_b8 : #b8b8b8;
  --gray_6 : #666666;
  --gray_d9 : #d9d9d9;
  --wt : #fff;
  --wt_f2 : #f2f2f2;
  --wt_01 : rgba(255, 255, 255, 0.1);
}

body {font-family: 'Pre';}
.container {max-width: 1280px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box;}
section {width: 100%; min-height: calc(100vh - 60px); height: auto; padding: 180px 0 100px; background: url(./../img/sub_bg.png)no-repeat 50% 50%; background-size: cover; background-attachment: fixed;}

/* tit-box */
.tit-box {margin-bottom: 99px; text-align: center;}
.tit-box .tit {margin-bottom: 10px; font-size: 30px; font-weight: 400; line-height: 1; color: var(--black_3);}
.tit-box .tit img {width: auto; height: 21px;}
.tit-box .sub {font-size: 18px; font-weight: 400; line-height: 1; color: var(--gray_6);}

/* dim */
.dim {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 9;}

/* .pg_current */
.pg_wrap {float: none !important; width: 100%; margin-top: 30px;}
.pg_wrap .pg {display: flex; align-items: center; justify-content: center; gap: 5px;}
.pg_wrap:after {display: none !important;}
.pg_current {background: var(--black) !important; border-color: var(--black) !important;}

/* notice_none */
.notice_none {display: none;}

/* write_btn */
.write_btn {display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px; text-align: right;}
.write_btn a {display: flex; align-items: center; justify-content: center; width: 120px; height: 45px; border-radius: 5px; background: var(--black); font-size: 16px; font-weight: 400; line-height: 1; color: var(--wt);}
.write_btn a:hover {color: var(--wt) !important;}

.bo_v_nb {display: none !important;}
.cmt_btn {display: none !important;}
#bo_vc {display: none !important;}
.bo_vc_w {display: none !important;}
#bo_v_share {display: none !important;}
#bo_v_info {display: none !important;}
#bo_v {background: transparent !important;}
#bo_v_atc {padding: 0 !important;}

/* view_ct */
.detail-area .view_tit {display: none;}
.view_ct {width: 100%; height: auto; padding: 30px; background: transparent; border-radius: 0; box-sizing: border-box;}
#bo_v {margin-bottom: 0 !important;}
#bo_v_con {margin-bottom: 0 !important;}

.d_none {display: none !important;}

/* view_tit */
.view_tit {display: flex; flex-flow: column; gap: 10px; margin-bottom: 20px;}
.view_tit .tit {font-size: 36px; font-weight: bold; line-height: 130%; color: var(--black);}
.view_tit .date {font-size: 18px; font-weight: 500; line-height: 140%; color: var(--gray_6);}

/* view detail css */

/* ck에디터 부분 */
.detail-area p {display: none; font-size: 16px; font-weight: 400; line-height: 1.44; letter-spacing: -0.32px; color: #000;}
.detail-area p.img {display: block;}
.detail-area p span{font-size: 16px; font-weight: 400; line-height: 1.44; letter-spacing: -0.32px; color: #000;}
.detail-area span{font-size: 16px; font-weight: 400; line-height: 1.44; letter-spacing: -0.32px; color: #000;}

.detail-area div {font-size: 16px; font-weight: 400; line-height: 1.44; letter-spacing: -0.32px; color: #000; text-align: center;}
/* .detail-area p:first-of-type {margin-bottom: 20px;} */

.detail-area h2 {font-size: 30px; font-weight: 600; line-height: 1.6; letter-spacing: -0.32px; color: #000; margin: 10px 0 5px;}
.detail-area h3 {font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: -0.32px; color: #000; margin: 10px 0 5px;}
.detail-area h4 {font-size: 22px; font-weight: 600; line-height: 1.6; letter-spacing: -0.32px; color: #000; margin: 10px 0 5px;}
.detail-area h2 span {font-size: 30px; font-weight: 600; line-height: 1.6; letter-spacing: -0.32px; color: #000;}
.detail-area h3 span {font-size: 24px; font-weight: 600; line-height: 1.6; letter-spacing: -0.32px; color: #000;}
.detail-area h4 span {font-size: 22px; font-weight: 600; line-height: 1.6; letter-spacing: -0.32px; color: #000;}

.detail-area img {max-width: 600px; width: auto; height: auto; margin: 20px auto;}
.detail-area figure {max-width: 600px; width: auto; height: auto; margin: 20px auto;}

.detail-area .text-huge {font-size: 1.8em;}
.detail-area .text-big {font-size: 1.4em;}
.detail-area .text-small {font-size: .85em;}
.detail-area .text-tiny {font-size: .7em;}


.editor-sec p {font-size: 16px;}
.editor-sec h2 {font-size: 30px;}
.editor-sec h3 {font-size: 24px;}
.editor-sec h4 {font-size: 22px;}

/* list_link */
.list_link {display: flex; align-items: center; justify-content: flex-end;}
.list_link a {display: flex; align-items: center; justify-content: center; width: 120px; height: 45px; margin-top: 30px; background: var(--black); font-size: 16px; font-weight: 400; line-height: 1; color: var(--wt);}
.list_link a:hover {color: var(--wt);}

/* elim */
.elim {display: flex; align-items: center; justify-content: flex-end; margin-bottom: 30px;}
.elim a {display: flex; align-items: center; justify-content: center; width: 120px; height: 45px; margin-top: 30px; background: #FF4D29; font-size: 16px; font-weight: 400; line-height: 1; color: var(--wt);}
.elim a:hover {color: var(--wt);}

/* btn_cancel */
.btn_confirm {display: flex; align-items: center; justify-content: flex-end; gap: 10px;}
.btn_confirm .btn_cancel {display: flex; align-items: center; justify-content: center; width: 120px; height: 45px; background: var(--gray_6); font-size: 16px; font-weight: 400; line-height: 1; color: var(--wt);}
.btn_confirm .btn_submit {display: flex; align-items: center; justify-content: center; width: 120px; height: 45px; background: var(--black); font-size: 16px; font-weight: 400; line-height: 1; color: var(--wt);}


.mb_log_cate .join {display: none;}
.mb_log_cate h2 {width: 100%;}
#login_info {display: none;}

/* sound_btn */
.sound_btn {position: fixed; top: 13px; right: 20px; width: 50px; height: auto; aspect-ratio: 1; border-radius: 100%; padding: 9px; background: var(--black); box-sizing: border-box; z-index: 10;}