@charset "utf-8";

@font-face {
    font-family: 'WarhavenB';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2312-1@1.1/WarhavenB.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
    font-weight: 200;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
}


/* list */

#navi_category { text-align: center; padding: 20px 0; }
#navi_category li { display: inline-block; padding: 0 20px; }

.trpg_ss_list,
.trpg_ss_list * {box-sizing: border-box;}

.trpg_ss_list {display: flex; flex-wrap: wrap; padding-top: 20px; border-radius: 10px; line-height: 1; font-family: 'Pretendard'; font-weight:200;}
.trpg_ss_list li {position: relative; margin-bottom: 15px; width: 100%;}
.trpg_ss_list li > a {position: relative; display: flex; gap: 20px; padding: 15px; border-radius: 15px; width: 100%; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)); box-shadow: 0 0 6px rgba(0,0,0,0.5); transition: all 0.3s;}
.trpg_ss_list li > a:before {content: ''; position: absolute; top: 0; left: 0;z-index: -1; width: 100%; height: 100%; border-radius: 15px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)); opacity: 0; transition: all 0.3s;}
.trpg_ss_list li > a:hover:before,
.trpg_ss_list li > a:focus:before {opacity: 1;}
.trpg_ss_list li .thumb_img {overflow: hidden; border-radius: 15px; max-width: 345px; width: 100%; height: 100%; box-shadow: 0 0 5px rgba(0,0,0,0.5);}
.trpg_ss_list li .thumb_img .thumb_img_wrap {position: relative; padding-top: 56.25%;}
.trpg_ss_list li .thumb_img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
.trpg_ss_list li .thumb_img.is_blur {filter: blur(2px);}
.trpg_ss_list li .thumb_img.is_blur img {filter: blur(3px);}
.trpg_ss_list li .thumb_img.thumb_img_no {background: rgba(0,0,0,0.7);}
.trpg_ss_list li .thumb_img.thumb_img_no i {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 4em;}
.trpg_ss_list li > a:hover .thumb_img img,
.trpg_ss_list li > a:focus .thumb_img img {scale: 1.05;}
.trpg_ss_list li .session_info {width: calc(100% - 320px);}
.trpg_ss_list li > a.n_thumb .session_info {width: 100%;}
.trpg_ss_list li .session_info .info_cate {margin-bottom: 6px;}
.trpg_ss_list li .session_info .no_cate {padding-top: 15px;}

.trpg_ss_list li .session_info .ss_subject_wrap {margin-bottom: 10px;}
.trpg_ss_list li .session_info .ss_subject_wrap h5 {display: flex; justify-content: space-between; gap:10px; align-items: flex-end; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dashed rgba(255,255,255,0.3); font-family: 'WarhavenB'; font-weight: normal}
.trpg_ss_list li .session_info .ss_subject_wrap h5 span.ss_subject {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 24px; text-shadow: 0 0 3px rgba(0,0,0,0.5); line-height: 1.3; word-break: keep-all; font-weight: bold;}
.trpg_ss_list li .session_info .ss_subject_wrap h5 span.writer_name {min-width: 100px; font-size: 12px; text-align: right;}
.trpg_ss_list li .session_info .ss_subject_wrap .ss_outline {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.3; font-size: 14px; letter-spacing: -0.02em; opacity: 0.8;}
.trpg_ss_list li .session_info .ss_subject_wrap .ss_outline .is_blur {filter: blur(3px);}
.trpg_ss_list li dl {display: flex; margin: 0 0 3px; font-size: 14px; line-height: 1.3; word-break: keep-all;}
.trpg_ss_list li dl dt {width: 50px; font-weight: 500;}
.trpg_ss_list li dl dd {margin: 0; width: calc(100% - 50px); opacity: 0.8;}
.trpg_ss_list li .session_room {position: absolute; top: 15px; right: 15px; z-index: 1;}
.trpg_ss_list li .session_room a {display: inline-block; padding: 5px 15px; border-radius: 30px; border: 1px solid #eee; color: #eee; transition: background-color 0.3s, color 0.3s; background: transparent;}
.trpg_ss_list li .session_room a:hover,
.trpg_ss_list li .session_room a:focus {background: #fff; color: #333;}
.trpg_ss_list li .session_room a i {margin-right: 3px;}
.trpg_ss_list li .btn_manage {position: absolute; bottom: 15px; right: 15px; color: #fff;}
.trpg_ss_list li .btn_manage a {margin-left: 5px; color: #fff;}

/* view */
.trpg_ss_view,
.trpg_ss_view * {box-sizing: border-box;}
.trpg_ss_view {overflow: hidden; padding-bottom: 30px; border-radius: 20px; background: rgba(0,0,0,0.7); font-family: 'Pretendard'; font-weight:200; line-height: 1; color: #fff;}
.trpg_ss_view .ss_card_img {margin-bottom: -15px;}
.trpg_ss_view .ss_card_img img {width: 100%; mask-image: linear-gradient(180deg, black 75%, transparent);}
.trpg_ss_view .session_con_wrap {padding:0 30px;}
.trpg_ss_view .session_con_wrap.no_thumb {padding-top: 30px;}
.trpg_ss_view .scenario_info {position: relative; text-align: center; font-size: 13px;}
.trpg_ss_view .scenario_info .ss_writer_name {margin-bottom: 10px; font-style: italic;}
.trpg_ss_view .scenario_info .ss_subject {margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px dashed #666; font-size: 36px; font-family: 'WarhavenB'; font-weight: normal; text-shadow: 0 0 8px rgba(0,0,0,0.5); line-height: 1.2;}
.trpg_ss_view .scenario_info .ss_outline {font-size: 15px; line-height: 1.5; opacity: 0.9; margin: 0 auto; max-width: 600px; word-break: keep-all;}
.trpg_ss_view .session_info {display: flex; flex-wrap: wrap; justify-content: center; margin: 0; margin-top:20px; gap: 5px 10px; font-size: 14px;}
.trpg_ss_view .session_info dl {display: flex; margin: 0; word-break: keep-all; line-height: 1.3;}
.trpg_ss_view .session_info dt {font-weight: bold;}
.trpg_ss_view .session_info dt::after {content: '·'; margin-left: 5px; font-weight: normal;}
.trpg_ss_view .session_info dt.ss_date:after {content: none;}
.trpg_ss_view .session_info dd {margin: 0 15px 0 5px;}
.trpg_ss_view .session_info dd:last-child {margin-right: 0;}
.trpg_ss_view .session_logue_wrap {overflow: hidden; overflow-y: scroll; max-height: 90vh; margin-top: 40px; border-radius: 20px;}
.trpg_ss_view .view_ss_room {margin-top: 30px; text-align: center;}
.trpg_ss_view .view_ss_room a {display: inline-block; padding: 8px 20px; border-radius: 15px; border: 1px solid #fff; font-size: 14px; color: #fff; transition: all 0.3s;}
.trpg_ss_view .view_ss_room a:hover,
.trpg_ss_view .view_ss_room a:focus {color: #333; background:#fff;}
.trpg_ss_view .session_review {margin-top: 30px;}
.trpg_ss_view .session_review p {padding: 0 10px 10px; border-bottom: 1px dashed #666; font-size: 18px; font-weight: bold; font-family: 'WarhavenB';}
.trpg_ss_view .session_review div {margin-top: 10px; padding: 0 10px; font-size: 14px; line-height: 1.3;}

.view_campaign {margin-top: 20px; color: #fff;}
.view_campaign ul {display: flex; flex-wrap: wrap; gap: 10px;}
.view_campaign ul li {width: calc(25% - 30px/4);}
.view_campaign ul li a {display: block; padding:12px; border-radius: 10px; height: 100%;}
.view_campaign ul li .camp_thumb {position: relative; overflow: hidden; margin-bottom: 10px; padding-top: 56.25%; border-radius: 10px;}
.view_campaign ul li .camp_thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;}
.view_campaign ul li .camp_no_thumb {background: rgba(0,0,0,0.7);}
.view_campaign ul li .camp_no_thumb i {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2em;}
.view_campaign ul li a:hover .camp_thumb img {transform: scale(1.1)}
.view_campaign ul li .camp_subject {font-family: 'WarhavenB'; font-weight: normal; font-size: 14px; line-height: 1.3; word-break: keep-all;}
.view_campaign ul li .camp_outline {overflow: hidden; margin-top: 10px; line-height: 1.3; font-size: 12px; text-align: justify; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.view_campaign ul li .camp_date {margin-top: 10px; opacity: 0.8; line-height: 1.3;}
.view_campaign ul li .camp_date i {margin-right: 5px;}

.bo_v_com {margin-top: 10px; text-align: center;}

/* write */
.board-write {display: block; position: relative; padding: 10px; box-sizing: border-box; border-radius: 30px; background: rgba(0, 0, 0, 0.5);}
.board-write h3	{font-size: 26px; text-align: center; padding: 30px 0 20px;} 
.board-write .write-notice {padding: 10px;font-size: 11px;}
.board-write > dl {position:relative; display: flex; gap: 10px; margin: 10px 0;}
.board-write > dl > dt {border-radius: 50px; width:90px; height: max-content; padding: 7px 0; text-align:center; background: #000; color: #fff;}
.board-write > dl > dd { width:calc(100% - 100px);margin-left:0;box-sizing:border-box;}
.board-write input,
.board-write textarea,
.board-write select {margin: 2px 0; border: 1px solid #333 !important; border-radius: 5px !important; color: #fff !important; background: #000 !important;}
.board-write input::placeholder,
.board-write textarea::placeholder {color: #999;}
.board-write input[type="number"] {padding: 5px; border: 0; width: 50px; height: 30px; box-sizing: border-box;}
.board-write input[type="url"] {box-sizing: border-box; height: 30px; padding: 0 10px; max-width: 100%; font-size: 12px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}
.board-write textarea {resize: none;}
.board-write input[type="date"] {border: none; padding: 5px 10px; background: #000; color: #fff;}
.board-write input[type="date"]::-webkit-calendar-picker-indicator {filter: invert(1);}
.board-write .btn_thumb {margin-bottom: 5px; padding: 7px 15px; border-radius: 10px; border: 1px solid #999; background: #999; color: #fff;}
.board-write .btn_thumb.active {opacity: 1; border-color: #000; background: #0eb3b5;}
.board-write .file_down_btn {display: inline-block; padding: 7px 15px; border-radius: 10px; background: #0eb3b5; color: #fff; transition: all 0.3s;}
.board-write .file_down_btn:hover,
.board-write .file_down_btn:focus {background: #02788d;}

.board-write .div_campaign {display: none;}

label.required::after {content: '*'; color: #ff4747;}

@media (max-width:992px) {
    .view_campaign ul li {width: calc(33.33% - 20px/3);}
}

@media (max-width:768px) {
    .trpg_ss_list {gap: 2%;}
    .trpg_ss_list li {width: 49%;}
    .trpg_ss_list li > a {flex-wrap: wrap; height: 100%;}
    .trpg_ss_list li .thumb_img {max-width: none; height: max-content;}
    .trpg_ss_list li .session_info {width: 100%; height: calc(100% - 26vw);}
    .trpg_ss_list li .session_info .ss_subject_wrap h5 {flex-wrap: wrap; padding-bottom: 8px;}
    .trpg_ss_list li .session_info .ss_subject_wrap h5 span {width: 100%; text-align: left !important;}
    .trpg_ss_list li .session_info .ss_subject_wrap h5 span.ss_subject {font-size: 20px;}
    .trpg_ss_list li .session_info .no_cate {display: none;}
    .trpg_ss_list li .session_room {display: none;}
    .trpg_ss_list li .btn_manage {top: 30vw;}

    .trpg_ss_view .scenario_info .ss_subject {font-size: 30px;}
    .view_campaign ul li a {padding: 10px; border-radius: 10px;}
}

@media (max-width:576px) {
    .trpg_ss_list li {width: 100%;}
    .trpg_ss_list li .btn_manage {top: auto; bottom: 15px;}
    .trpg_ss_list li .session_info {height: auto;}
    .trpg_ss_list li .session_info .ss_subject_wrap h5 span.ss_subject {font-size: 18px;}

    .trpg_ss_view .session_con_wrap {padding: 15px;}
    .trpg_ss_view .scenario_info .ss_subject {padding-bottom: 10px; font-size: 24px;}
    .view_campaign ul li {width: calc(50% - 10px);}
}

/* white-theme */
.trpg_ss_list.white_theme li > a {color: #333; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7)); font-weight: 500; box-shadow: 0 0 6px rgba(0,0,0,0.3);}
.trpg_ss_list li > a:before {background: linear-gradient(0deg, transparent, rgba(14, 14, 82, 0.2));}
.trpg_ss_list.white_theme li .session_info .info_cate span {color: #fff;}
.trpg_ss_list.white_theme li .session_info .ss_subject_wrap h5 {border-color: rgba(0,0,0,0.3);}
.trpg_ss_list.white_theme li .session_info .ss_subject_wrap h5 span.ss_subject {text-shadow: 0 0 3px rgba(255,255,255,0.5);}
.trpg_ss_list.white_theme li .session_room a {border-color:#333; color: #333;}
.trpg_ss_list.white_theme li .session_room a:hover,
.trpg_ss_list.white_theme li .session_room a:focus {background: #333; color: #fff;}
.trpg_ss_list.white_theme li .btn_manage {color: #333;}
.trpg_ss_list.white_theme li .btn_manage a {color: #333;}
.trpg_ss_list.white_theme li .thumb_img.thumb_img_no {background: rgba(240, 240, 240, 0.7); box-shadow: 0 0 5px rgba(0,0,0,0.2);}

.trpg_ss_view.white_theme {background: rgba(2552,255,255,0.6); font-weight: 500; color: #333; box-shadow: 0 0 15px rgba(0,0,0,0.2);}
.trpg_ss_view.white_theme .scenario_info .ss_subject {text-shadow: 0 0 8px rgba(255,255,255,0.5);}
.trpg_ss_view.white_theme .view_ss_room a {border-color:#333; color: #333;}
.trpg_ss_view.white_theme .view_ss_room a:hover,
.trpg_ss_view.white_theme .view_ss_room a:focus {color: #fff; background:#333;}
.view_campaign ul li .white_theme .camp_no_thumb {background: rgba(240, 240, 240, 0.7);}

.board-write.white_theme {color: #333; box-shadow: 0 0 15px rgba(0,0,0,0.3); background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.7));}