@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* 초기화 */
html {overflow-y:scroll;}
body {margin:0;padding:0;font-family:'Noto Sans KR', serif,'Sans-serif', 'dotum';color:#fff;font-size:14px;font-weight:400;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-family:'Noto Sans KR','Sans-serif', 'dotum';color:#fff;font-size:14px;font-weight:400;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, li, dl, dt, dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:14px;outline:none;}
input, button {margin:0;padding:0;font-family:'Noto Sans KR','Sans-serif', 'dotum';font-size:14px;font-weight:400;}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR','Sans-serif', 'dotum';color:#fff;font-size:14px;font-weight:400;outline:none;}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:14px}
a {color:#fff;text-decoration:none;cursor:pointer;}
a:hover {color:#fff;text-decoration:none;}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {color:#fff;background:#373737;border:solid 1px #575757;border-radius:5px;}
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {}

input, textarea, button {-webkit-appearance:none; -moz-appearance:none; appearance:none;}
input, textarea, button, select {-webkit-border-radius:0; -moz-border-radius:0; -o-border-radius:0; border-radius:0;}

.placeholdersjs {color:#999 !important}
input::placeholder {color:#999;}
input::-webkit-input-placeholder {color:#999;}
input::-ms-input-placeholder {color:#999;}
textarea::placeholder {color:#999;}
textarea::-webkit-input-placeholder {color:#999;}
textarea::-ms-input-placeholder {color:#999;}

.placeholdersjs {color:#999 !important}


#panel,
#container_wrap,
#tnb_wrap,
#tnb,
#header_wrap,
#header,
#gnb_wrap,
#gnb,
#body_wrap,
#side_wrap,
#content_wrap,
#bottom_wrap,
#bottom,
#bnb_wrap,
#bnb,
#footer_wrap,
#footer {display:block;position:relative;}

#panel:after,
#container_wrap:after,
#tnb_wrap:after,
#tnb:after,
#header_wrap:after,
#header:after,
#gnb_wrap:after,
#gnb:after,
#body_wrap:after,
#side_wrap:after,
#content_wrap:after,
#bottom_wrap:after,
#bottom:after,
#bnb_wrap:after,
#bnb:after,
#footer_wrap:after,
#footer:after {display:block;visibility:hidden;clear:both;content:""}


#container_wrap {min-height:100vh;background:#171717;}

#header_wrap {display:block;position:fixed;left:0;right:0;top:0;padding:5px;background:#000;z-index:99;}

#header {}
#header a#logo {display:flex;float:left;align-items:center;gap:7px;height:35px;font-size:20px;font-weight:800;line-height:35px;letter-spacing:-.5px;white-space:nowrap;}
#header a#logo img {display:block;width:29px;height:29px;flex:0 0 29px;vertical-align:middle;}
#header a#logo span {display:block;}

.search_wrap {display:block;float:right;position:relative;width:calc(100% - 150px);max-width:380px;line-height:35px;}
.search_wrap:after {display:block;visibility:hidden;clear:both;content:""}
.search_wrap .input {display:inline-block;width:100%;height:32px;padding:0 14px;font-size:16px;line-height:30px;}
.search_wrap .btn_search {display:block;position:absolute;right:0;top:50%;width:32px;height:32px;margin:-16px 0 0 0;background:none;border:none;}
.search_wrap a.btn_viewtype {display:none;float:right;width:30px;height:30px;background:none;border:none;vertical-align:middle;}
.search_wrap a.btn_viewtype img {width:30px;height:30px;border-radius:5px;}

@media screen and (max-width:520px) {
#header a#logo {gap:5px;font-size:18px;}
#header a#logo img {width:27px;height:27px;flex-basis:27px;}
.search_wrap .input {width:calc(100% - 40px);}
.search_wrap .btn_search {right:40px;}
.search_wrap a.btn_viewtype {display:inline-block;}
}

#footer_wrap {padding:10px 10px 60px 10px;font-size:12px;text-align:center;line-height:140%;border-top:solid 1px #373737}

.btn_top {display:block;position:fixed;right:15px;bottom:15px;width:56px;height:56px;background:rgba(222,38,0,0.8);border:none;border-radius:5px;opacity:0;z-index:99;
transition: all .3s ease-out;
}
.btn_top img {width:100%;height:auto;}
.btn_top.sticky {opacity:0.8;}

#body_wrap {padding:50px 0 0 0;}

#gnb {position:relative;margin:0 0 10px;padding:3px;z-index:90;}
#gnb .gnb_primary {display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:2px;list-style:none;margin:0;padding:0;}
#gnb .gnb_primary li {display:block;position:relative;min-width:0;}
#gnb .gnb_primary > li > a,
#gnb .gnb_primary button {display:block;width:100%;height:36px;padding:0 6px;color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#5f5fff;border:2px solid;border-color:#8f8fff #2f2fff #2f2fff #8f8fff;border-radius:5px;cursor:pointer;}
#gnb .gnb_primary > li > a.active {background:#de2600;border-color:#fe4620 #ae1600 #ae1600 #fe4620;}
#gnb .gnb_primary button {background:#252525;border-color:#4a4a4a #111 #111 #4a4a4a;}
#gnb .gnb_primary button[aria-expanded="true"] {background:#de2600;border-color:#fe4620 #ae1600 #ae1600 #fe4620;}
#gnb .gnb_drop {display:none;position:absolute;left:0;min-width:100%;top:38px;z-index:95;padding:6px;background:#171717;border:1px solid #444;border-radius:6px;box-shadow:0 10px 24px rgba(0,0,0,.45);}
#gnb .gnb_has_sub:hover .gnb_drop,
#gnb .gnb_has_sub:focus-within .gnb_drop {display:block;}
#gnb .gnb_drop a {display:block;padding:0 10px;color:#ddd;font-size:12px;font-weight:700;line-height:28px;white-space:nowrap;background:#2b2b2b;border:1px solid #3c3c3c;border-radius:5px;}
#gnb .gnb_drop a + a {margin-top:4px;}
#gnb .gnb_drop a:hover,
#gnb .gnb_drop a.active {color:#fff;background:#de2600;border-color:#fe4620;}
.board_menu_group h2 a {color:#ff6140;}

#board_menu_panel {position:absolute;left:3px;right:3px;top:43px;z-index:1002;padding:0 14px 16px;color:#fff;background:#171717;border:1px solid #444;border-radius:8px;box-shadow:0 14px 40px rgba(0,0,0,.65);}
#board_menu_panel[hidden],#board_menu_bg[hidden] {display:none !important;}
.board_menu_head {display:flex;align-items:center;justify-content:space-between;height:52px;border-bottom:1px solid #3b3b3b;}
.board_menu_head strong {font-size:19px;}
.board_menu_head button {width:38px;height:38px;color:#fff;font-size:20px;background:transparent;border:0;cursor:pointer;}
.board_menu_groups {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:14px;}
.board_menu_group {padding:13px;background:#202020;border:1px solid #343434;border-radius:7px;}
.board_menu_group_jav {grid-column:span 2;}
.board_menu_group h2 {margin:0 0 10px;padding:0 0 8px;color:#ff6140;font-size:16px;border-bottom:1px solid #393939;}
.board_menu_links {display:flex;flex-wrap:wrap;gap:6px;}
.board_menu_links a {display:block;padding:6px 9px;color:#ddd;font-size:13px;line-height:1.25;background:#2b2b2b;border:1px solid #3c3c3c;border-radius:5px;}
.board_menu_links a:hover,.board_menu_links a.active {color:#fff;background:#de2600;border-color:#fe4620;}
#board_menu_bg {position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.58);}

@media screen and (max-width:800px) {
  #gnb .gnb_primary {display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  #gnb .gnb_primary::-webkit-scrollbar {display:none;}
  #gnb .gnb_primary li {flex:0 0 96px;}
  #gnb .gnb_primary .gnb_menu_item {flex-basis:108px;}
  #board_menu_panel {position:fixed;left:8px;right:8px;top:58px;bottom:8px;overflow-y:auto;padding:0 10px 14px;}
  .board_menu_groups {grid-template-columns:1fr;gap:10px;}
  .board_menu_group_jav {grid-column:auto;}
  body.board_menu_open {overflow:hidden;}
}

#category {padding:0 4px 8px;border-bottom:solid 1px #2e2e2e;}
#category:after {display:block;visibility:hidden;clear:both;content:""}
#category ul {display:flex;gap:6px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
#category ul::-webkit-scrollbar {display:none;}
#category ul:after {display:block;visibility:hidden;clear:both;content:""}
#category ul li {display:block;flex:0 0 auto;}
#category ul li a {display:block;padding:0 12px;color:#d4d4d4;font-size:13px;font-weight:700;text-align:center;line-height:30px;background:#202020;border:solid 1px #3a3a3a;border-radius:16px;}
#category ul li a:hover {color:#fff;border-color:#555;}
#category ul li a.active {color:#fff;background:#de2600;border-color:#de2600;}

.bo_total {padding:10px 4px;color:#dfdfdf;font-size:16px;font-weight:700;}

.list_toolbar {display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 4px 0;padding:0 2px 8px;}
.list_filter {display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.list_filter::-webkit-scrollbar {display:none;}
.list_filter a {display:block;flex:0 0 auto;padding:0 12px;color:#d4d4d4;font-size:13px;font-weight:700;line-height:30px;background:#202020;border:1px solid #3a3a3a;border-radius:16px;white-space:nowrap;}
.list_filter a:hover {color:#fff;border-color:#555;}
.list_filter a.is-active {color:#fff;background:#de2600;border-color:#de2600;}
.list_toolbar_meta {display:flex;align-items:baseline;gap:8px;min-width:0;margin:0 4px 8px;padding:0 2px 10px;color:#cfcfcf;border-bottom:1px solid #2e2e2e;}
.list_toolbar_meta strong {color:#fff;font-size:16px;font-weight:800;line-height:1.2;white-space:nowrap;}
.list_toolbar_count {color:#ff6140;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;}
.list_toolbar_count:after {content:'개';margin-left:1px;color:#8d8d8d;font-size:12px;font-weight:700;}
.list_toolbar_page,
.list_toolbar_note {color:#8d8d8d;font-size:13px;font-weight:600;white-space:nowrap;}
.list_sort {display:inline-flex;flex:0 0 auto;padding:3px;background:#151515;border:1px solid #3a3a3a;border-radius:8px;}
.list_sort a {display:block;padding:0 12px;color:#bdbdbd;font-size:13px;font-weight:700;line-height:28px;border-radius:6px;white-space:nowrap;}
.list_sort a:hover {color:#fff;background:#2a2a2a;}
.list_sort a.is-active {color:#fff;background:#de2600;}
.list_toolbar .btn_trash {flex:0 0 auto;padding:0 12px;color:#cfcfcf;font-size:13px;font-weight:700;line-height:30px;background:#202020;border:1px solid #3a3a3a;border-radius:8px;white-space:nowrap;cursor:pointer;}
.list_toolbar .btn_trash:hover {color:#fff;border-color:#de2600;}
@media screen and (max-width:680px) {
	.list_toolbar {gap:8px;margin-top:6px;padding-bottom:6px;}
	.list_filter a {padding:0 10px;font-size:12px;}
	.list_toolbar_meta {margin-bottom:6px;padding-bottom:8px;}
	.list_toolbar_meta strong {font-size:15px;}
	.list_sort a {padding:0 10px;font-size:12px;}
}

.sort {float:right;}
.sort:after {display:block;visibility:hidden;clear:both;content:""}
.sort .sort_p {display:block;float:left;position:relative;margin:0 5px 0 0;}
.sort .sort_p:last-child {margin:0;}
.sort .sort_p a {display:block;position:relative;padding:0 28px 0 10px;color:#cfcfcf;font-size:13px;line-height:30px;border:solid 1px #3f3f3f;border-radius:5px;}
.sort .sort_p a:after {content:'▼';display:block;position:absolute;right:0;top:0;width:30px;height:30px;color:#cfcfcf;font-family:inherit;font-size:9px;text-align:center;text-indent:0;line-height:30px;z-index:1}
.sort .sort_p .sort_layer {display:none;position:absolute;left:auto;right:0;top:33px;min-width:100%;padding:5px 0;background:#000;border:solid 1px #3f3f3f;border-radius:5px;z-index:20;}
.sort .sort_p .sort_layer a {padding:0 10px;line-height:30px;border:none;border-radius:0;white-space:nowrap;}
.sort .sort_p .sort_layer a:after {display:none;}
.sort .sort_p .sort_layer a:hover,
.sort .sort_p .sort_layer a.active {color:#de2600;background:#373737;}


#list {padding:3px;}
.yako-home-guide{margin:4px 4px 15px;padding:16px 18px;border:1px solid #363636;border-radius:10px;background:#202020;color:#bdbdbd;line-height:1.65}
.yako-home-guide h1{margin:0 0 6px;color:#fff;font-size:19px;line-height:1.35}
.yako-home-guide p{margin:0}
@media screen and (max-width:680px){.yako-home-guide{padding:13px 14px}.yako-home-guide h1{font-size:17px}}
#list ul {}
#list ul:after {display:block;visibility:hidden;clear:both;content:""}
#list ul li {display:block;float:left;width:12.5%;padding:1px;cursor:pointer}
#list ul li .box {padding:3px;background:#272727;border-radius:5px;}
#list ul li .box .thumb {display:block;position:relative;}
#list ul li .box .thumb img {display:block;width:100%;height:132px;object-fit:cover;border-radius:5px;}
#list ul li .box .thumb .ctg {display:block;position:absolute;right:3px;top:3px;z-index:4;padding:0 4px;color:#fff;font-weight:600;font-size:12px;line-height:20px;background:rgba(0,0,0,0.4);border-radius:3px;}
#list ul li .box .yako-preview-thumb {overflow:hidden;background:#000;}
#list ul li .box .yako-preview-media {position:absolute;inset:0;z-index:2;display:block;overflow:hidden;opacity:0;pointer-events:none;background:#000;border-radius:5px;transition:opacity .16s ease;}
#list ul li .box .yako-preview-media video,
#list ul li .box .yako-preview-media img {display:block;width:100%;height:100%;object-fit:cover;border-radius:5px;}
#list ul li .box .yako-preview-thumb.is-preview-active .yako-preview-media {opacity:1;}
#list ul li .box .yako-preview-thumb.is-preview-loading:after {content:'';position:absolute;left:50%;top:50%;z-index:3;width:22px;height:22px;margin:-11px 0 0 -11px;border:2px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;animation:yakoPreviewSpin .7s linear infinite;pointer-events:none;}
@keyframes yakoPreviewSpin {to{transform:rotate(360deg)}}
#list ul li .box .title {display:-webkit-box;height:42px;min-height:42px;padding:4px 3px 2px;color:#cfcfcf;font-size:15px;font-weight:700;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}
#list ul li .box .etc {color:#cfcfcf;font-size:12px;text-align:right;}
#list ul li .box .etc img {width:20px;height:auto;}
#list ul li .box .time {padding:3px 0 0 0;color:#cfcfcf;font-size:12px;}
#list ul li .box .time:last-child {padding:0 0 3px 0;}
#list ul li .box .time img {width:20px;height:auto;}
#list ul li .box .card-meta {display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;height:27px;padding:3px;color:#cfcfcf;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap;}
#list ul li .box .card-duration {display:flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;}
#list ul li .box .card-stats {display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-left:auto;}
#list ul li .box .card-stats > span {display:flex;align-items:center;gap:2px;}
#list ul li .box .card-meta img {display:inline-block;width:16px;height:16px;object-fit:contain;border-radius:0;opacity:.9;}


@media screen and (max-width:1800px) {#list ul li {width:14.28%;}}
@media screen and (max-width:1600px) {#list ul li {width:16.66%;}}
@media screen and (max-width:1400px) {#list ul li {width:20%;}}
@media screen and (max-width:1140px) {#list ul li {width:25%;}}
@media screen and (max-width:920px) {#list ul li {width:33.33%;}}
@media screen and (max-width:680px) {
	#list ul li {width:50%;}
	#list.active ul li {width:100%;}
}

.paging {margin:20px 0;padding:0 4px;text-align:center;}
.paging a {display:inline-block;padding:0 18px;color:#cfcfcf;font-size:14px;line-height:45px;font-weight:700;background:#373737;border-radius:3px;}
.paging a.active {background:#de2600}


.subject {padding:10px 4px;color:#fff;font-size:20px;font-weight:700;}
.subject strong {color:#cfcfcf;font-weight:700;}

.av {padding:4px;}

/* ifrma response */
.embed-container {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;} 
.embed-container iframe, 
.embed-container object, 
.embed-container embed {position:absolute;top:0;left:0;width:100%;height:100%;}

ul.act {}
ul.act:after {display:block;visibility:hidden;clear:both;content:""}
ul.act li {display:block;float:left;width:50%;padding:20px;}
ul.act li a {display:block;width:110px;margin:0 auto;color:#fff;font-size:16px;font-weight:600;text-align:center;line-height:34px;background:#000;border:solid 1px #3f3f3f;border-radius:3px;}
ul.act li a img {width:24px;height:auto;margin:0 0 2px 0;vertical-align:middle}

.tags {margin:0 4px 30px 4px;}
.tags a {display:inline-block;color:#cfcfcf;font-size:16px;}

a.btn_banner {display:block;margin:0 4px 15px 4px;color:#fff;font-size:18px;font-weight:600;text-align:center;line-height:40px;border-radius:5px;background:#303030;
border-left:solid 2px #484848;
border-top:solid 2px #484848;
border-right:solid 2px #303030;
border-bottom:solid 2px #303030;
}
a.btn_banner.red {background:#de2600;
border-left:solid 2px #fe4620;
border-top:solid 2px #fe4620;
border-right:solid 2px #ae1600;
border-bottom:solid 2px #ae1600;
}
a.btn_banner strong {color:#ff0000;}


ul.banner {margin:0 0 15px 0;padding:3px;}
ul.banner:after {display:block;visibility:hidden;clear:both;content:""}
ul.banner li {display:block;float:left;width:25%;padding:1px;}
ul.banner li img {width:100%;height:auto;border-radius:5px;}

@media screen and (max-width:1140px) {ul.banner li {width:33.33%}}
@media screen and (max-width:920px) {ul.banner li {width:50%;}}
@media screen and (max-width:500px) {ul.banner li {width:100%;}}