@charset "utf-8";
@import url('//fonts.googleapis.com/css?family=Roboto:400,700');
/* Ionicons : https://ionicons.com/v2/ */
@import url('../../../nariya/css/ionicons/css/ionicons.min.css');
@import url('../../../nariya/css/g5.css');
@import url('../../../nariya/css/mask.css');

/********************************************************
■ Theme Common
********************************************************/
body { margin:0; padding:0;	background:#fff; color:var(--text-color); }
h1, h2, h3, h4, h5, h6, .en { font-family:"Roboto", sans-serif; }

/********************************************************
■ Theme Layout : 테마 레이아웃
********************************************************/

.page-link{background-color:var(--black-100) !important; color:#6c757d !important; border:0px !important;}
.wrapper { background:#fff; height:100%;}
@media all and (max-width:991px) {
	.responsive .wrapper { overflow-x:hidden; }
}
.nt-container,
.nt-container-wide { margin:0 auto; }
@media all and (min-width:992px) {
	.responsive .boxed-a.wrapper .nt-container.px-xl-0 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
	.responsive .boxed-b.wrapper { padding-left:1.5rem !important; padding-right:1.5rem !important; }
	.responsive .boxed-b.wrapper #nt_title .nt-container.px-xl-0,
	.responsive .boxed-b.wrapper #nt_wing .nt-container.px-xl-0 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
}

/* 비반응형 */
.no-responsive .boxed-a.wrapper .nt-container.px-xl-0 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
.no-responsive .boxed-b.wrapper { padding-left:1.5rem !important; padding-right:1.5rem !important; }
.no-responsive .boxed-b.wrapper #nt_title .nt-container.px-xl-0,
.no-responsive .boxed-b.wrapper #nt_wing .nt-container.px-xl-0 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
@media all and (max-width:1199px) {
	.no-responsive .wrapper.wided .nt-container.px-xl-0 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
	.no-responsive .wrapper.wided #nt_title .nt-container.px-xl-0,
	.no-responsive .wrapper.wided #nt_wing .nt-container.px-xl-0 { padding-left:1.5rem !important; padding-right:1.5rem !important; }
}

/********************************************************
■ Loader : 페이지 로딩바
********************************************************/
#nt_loader { background: #fff; left: 0; top: 0; width: 100%; height: 100%; display: block; position: fixed; z-index: 10000; }
#nt_loader .loader { margin: -25px 0 0 -25px; left: 50%; top: 50%; width: 50px; height: 50px; line-height:50px; font-size: 45px; position: absolute; z-index: 10001; }

/********************************************************
■ LNB
********************************************************/
#nt_lnb ul { list-style: none; margin: 0; }
#nt_lnb ul > li { float: left; padding: 0 13px; }
#nt_lnb ul > li::after { font-family: dotum; font-weight: normal; float: right; color:#ccc; content: "|"; margin-right:-15px; }
#nt_lnb ul > li:first-child { padding-left:0; }
#nt_lnb ul > li:last-child { padding-right:0; }
#nt_lnb ul > li:last-child::after { content: ""; margin-right:0; }
#nt_lnb ul > li > a { float:left; white-space:nowrap; }
#nt_lnb .dropdown-toggle::after { color:#ccc; }

/********************************************************
■ PC 헤더(Header)
********************************************************/
/* #header_pc .nt-container { background: url('../img/header.jpg') no-repeat right bottom; } */
#header_pc .header-logo img { max-width:100%; }
#header_pc .header-search { width:100%;	max-width:400px; }
#header_pc .header-search form { padding:0; border-width:2px; border-style:solid; width:100%; }
#header_pc .header-search input { font-size:16px !important; background: #fff; border:0 !important; box-shadow:none !important; -webkit-box-shadow:none !important; }
#header_pc .header-search .form-control:focus { box-shadow:none !important; -webkit-box-shadow: none !important; }
#header_pc .header-search .btn { border:0; background: none !important; outline:none; }

/********************************************************
■ 모바일 헤더(Header)
********************************************************/
#header_mo { box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); }

/********************************************************
■ PC 주메뉴
********************************************************/
/* 공통 */
#nt_menu { position:relative; z-index:20; box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); }
#nt_menu .nt-container,
#nt_menu .me-list .me-li,
#nt_menu .sub-1dul,
#nt_menu .sub-1dli { position:relative; }
#nt_menu .sub-slide { display:none; visibility:visible; border: 1px solid var(--point) }
#nt_menu .sub-icon::after { font-family: "FontAwesome"; float: right; position: relative; content: "\f105"; }
#nt_menu .me-icon {	width:4.0rem; text-align:center; }
#nt_menu .me-a { display:block; position:relative; text-align:center; font-weight:bold; color:#fff; }
#nt_menu .me-li.on .me-a,
#nt_menu .me-li:hover .me-a { color:#fff; background:rgba(0,0,0,0.2) !important; }
#nt_menu .sub-2div { left:100%; top:0; position:absolute; z-index:22; background: #fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } 
#nt_menu .sub-2dul { }
#nt_menu .sub-2dli { }
#nt_menu .sub-2da { display:block; color:#000; border-bottom: 1px solid #eee; } 
#nt_menu .sub-2dli.on .sub-2da,
#nt_menu .sub-2dli:hover .sub-2da { color:#000; background: #fafafa; border-color: #eee; font-weight: bold; }
#nt_menu .sub-2line { display:block; color:#000; font-weight:bold; background:#f5f5f5; }

/* 일반형 */
.nt-menu .sub-1div { position:absolute; left:0; z-index:21; width:auto; text-align:left; top:100%; background:#fff; box-shadow: 0 6px 12px rgba(0, 0, 0, .175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }
.nt-menu .sub-1div::before { left: 50%; margin-left:-8px; }
.nt-menu .sub-1da { display:block; color:var(--text-color); }
.nt-menu .sub-1line { position:relative; display:block; }
.nt-menu .sub-1dli.on .sub-1da,
.nt-menu .sub-1dli:hover .sub-1da { color:#000; background: #f5f5f5; border-color: #eee; font-weight:bold; }
.nt-menu .sub-1line { color:#000; font-weight:bold; background:#fafafa; }
.nt-menu .me-sh { padding:0.59rem 1.0rem; } /* 서브메뉴 높이설정 : 페딩값으로 조절 */

/* 풀다운형 */
.nt-menu-full .me-list { position:relative; width:100%; }
.nt-menu-full .me-ul { position:absolute; top:0; left:0; z-index:20; width:100%; background:rgba(255,255,255); }
.nt-menu-full .me-li { margin-right:-1px; }
.nt-menu-full .nav-full { box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); -webkit-box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); -moz-box-shadow: 0px 5px 5px -2px rgba(50, 60, 70, 0.15); }
.nt-menu-full .sub-full { display:none; visibility:visible; }
.nt-menu-full .sub-1div { text-align:left; padding:1.0rem 0; border:1px solid #eee; border-top:0; }
.nt-menu-full .me-li:hover .sub-1div { background: rgb(253,253,253); }
.nt-menu-full .sub-1da { color:#000; }
.nt-menu-full .sub-1line { position:relative; display:block; background:#f5f5f5; font-weight:bold; }
.nt-menu-full .sub-1dli.on .sub-1da,
.nt-menu-full .sub-1dli:hover .sub-1da { color:orangered; font-weight:bold; }
.nt-menu-full .sub-1div .me-sh { display:block; padding:0.25rem 1.25rem; } /* 1차 서브메뉴 높이설정 : 페딩값으로 조절 */
.nt-menu-full .sub-2div .me-sh { padding:0.59rem 1.0rem; } /* 2차 서브메뉴 높이설정 : 페딩값으로 조절 */

/* 메뉴 상단 고정 */
#nt_sticky_wrap.me-sticky { position:fixed; width:100%; z-index:900; left:0; top:0; }
@media all and (min-width:992px) {
	.wrapper.m-lg-auto #nt_sticky_wrap.me-sticky nav { margin:0 auto !important; }
	.wrapper.ml-lg-auto #nt_sticky_wrap.me-sticky nav { margin:0 0 0 auto !important; }
	.wrapper.mr-lg-auto #nt_sticky_wrap.me-sticky nav { margin:0 auto 0 0 !important; }
}

/********************************************************
■ 모바일 상단 주메뉴
********************************************************/
#nt_menu_mobile .d-block.on { color:#fff; background:rgba(0,0,0,0.2); }
#nt_menu_mobile .gra { content: " "; position: absolute; z-index:1; top:0; width:1.25rem; height:100%; }
#nt_menu_mobile .gra-left-primary { left:0; }
#nt_menu_mobile .gra-right-primary { right:0; }
#nt_menu_mobile .gra-left-white { left:0; background: linear-gradient(to left, rgba(0,0,0,0) 0, #fff 60%); }
#nt_menu_mobile .gra-right-white { right:0; background: linear-gradient(to right, rgba(0,0,0,0) 0, #fff 60%); }

/********************************************************
■ 페이지 타이틀
********************************************************/
#nt_title { position:relative; overflow:hidden; }
#nt_title .nt-container { position:relative; z-index:2; }
#nt_title .page-title { font-size:26px; letter-spacing:-1px; line-height:1.4; }
#nt_title .breadcrumb-item + .breadcrumb-item::before {	font-family: dotum;	font-weight: normal; content:">"; }
#nt_title a { background: none !important; }
.pt-nav-wrap { margin-right:-2px; }
.pt-nav { position:absolute; top:0; left:-1px; width:100%; z-index:10; }
@media all and (max-width:767px) {
	.responsive #nt_title .page-title { font-size:24px; }
}
@media all and (max-width:575px) {
	.responsive #nt_title .page-title { font-size:22px; }
}

/********************************************************
■ Wing
********************************************************/
#nt_wing .nt-container { position:relative; overflow:visible !important; }
#nt_wing img { max-width:100%; }
#nt_wing .wing-left,
#nt_wing .wing-right { position:absolute; width:160px; }
#nt_wing .wing-left { left:-180px; }
#nt_wing .wing-right { right:-180px; }
.boxed-b #nt_wing .wing-left { left:-200px; }
.boxed-b #nt_wing .wing-right { right:-200px; }

/********************************************************
■ Footer 
********************************************************/
#nt_footer .nt-links ul { list-style: none; margin: 0; padding:0; }
#nt_footer .nt-links ul > li { float: left; padding: 0 13px; }
#nt_footer ul > li:first-child { padding-left:0; }
#nt_footer ul > li:last-child { padding-right:0; }
#nt_footer .nt-links ul > li::after { font-family: dotum; font-weight: normal; float: right; color:#ccc; content: "|"; margin-right:-15px; }
#nt_footer .nt-links ul > li:last-child::after { content: ""; }
#nt_footer .nt-links ul > li > a { color: #333; white-space:nowrap;	}
@media all and (max-width:991px) {
	.responsive #nt_footer .nt-links ul > li { float:none; display:inline-block; }
}

/********************************************************
■ Widget
********************************************************/
h3.h3 { padding:0; margin:0; font-weight:bold; }
hr.hr::before { width:100%; height:1px; content: ""; position:absolute; left:0; bottom:1px; line-height:1px; background-color:#ddd; }
hr.hr { display:block; position:relative; height:3px; border: none; line-height:1px; padding:0;	margin:0; }
hr.hr::after { width:4.0rem; height:3px; content: ""; position:absolute; left:0; bottom:0; line-height:1px; }
@media all and (max-width:575px) {
	.responsive h3.h3 {	padding-left:1.0rem; padding-right:1.0rem; }
	.responsive hr.hr::after { left:1.0rem;	}
}

/* 라인 */
.na-list li { line-height:2.0; }
.na-list .na-line { border-bottom:1px solid #efefef; }
.is-pc .na-list .na-line { padding-bottom:0.15rem; margin-bottom:0.15rem; }
.is-mobile .na-list .na-line {	padding-bottom:0.20rem;	margin-bottom:0.25rem; }

/* 큰제목 */
.f-h1 {	font-size:18px !important; }

/* Owl 네비 */
.owl-slider.owl-nav-top .owl-nav { position:absolute; right:0; top:-3.75rem; z-index:3; }
.owl-slider.owl-nav-bottom .owl-nav { text-align:center; }
.owl-slider.owl-nav-right .owl-nav { text-align:right; }
.owl-slider .owl-carousel .owl-nav button { outline:none !important; width:auto !important; padding:0.35rem 0.75rem !important; margin:0 !important; border:1px solid #ddd !important; background:#fff !important; color:#ccc !important; line-height:1.2 !important; }
.owl-slider .owl-carousel .owl-nav button:hover {	background:#f5f5f5 !important; }
.owl-slider .owl-carousel .owl-nav button.owl-prev { border-right:0 !important; }
.owl-slider.owl-nav-lg .owl-carousel .owl-nav button { padding: .5rem 1.0rem !important; }

/* 슬라이더 상단 네비 위치 조정 */
.slider-nav-top 

/* 배분 네비 */
.owl-slider.owl-nav-both .owl-nav button.owl-prev { float:left;	border:1px solid #ddd !important; }
.owl-slider.owl-nav-both .owl-nav button.owl-next {	float:right; }
.owl-slider.owl-nav-both .owl-nav:after { display:block;visibility:hidden;clear:both;content:"" }

/* 타이틀용 네비 */
.owl-slider.owl-nav-title .owl-nav { position:absolute; left:0; top:50%; margin-top:-40px; width:100%; z-index:1; }
.owl-slider.owl-nav-title .owl-nav button { border:0 !important; background:none !important; color:rgba(255,255,255,0.5) !important; line-height:1.0 !important; }
.owl-slider.owl-nav-title .owl-nav button:hover { background:none !important; color:rgba(255,255,255,1) !important; }
.owl-slider.owl-nav-title .owl-nav button.owl-prev { position:absolute; left:80px; top:0; font-size:80px !important; }
.owl-slider.owl-nav-title .owl-nav button.owl-next { position:absolute; right:80px; top:0; font-size:80px !important; }
@media (max-width:1399px) { 
	.owl-slider.owl-nav-title .owl-nav button.owl-prev { left:30px; }
	.owl-slider.owl-nav-title .owl-nav button.owl-next { right:30px; }
}
@media (max-width:1199px) { 
	.owl-slider.owl-nav-title .owl-nav { margin-top:-35px; }
	.owl-slider.owl-nav-title .owl-nav button.owl-prev { left:20px; font-size:70px !important; }
	.owl-slider.owl-nav-title .owl-nav button.owl-next { right:20px; font-size:70px !important; }
}
@media (max-width:767px) { 
	.owl-slider.owl-nav-title .owl-nav { margin-top:-30px; }
	.owl-slider.owl-nav-title .owl-nav button.owl-prev { left:15px; font-size:60px !important; }
	.owl-slider.owl-nav-title .owl-nav button.owl-next { right:15px; font-size:60px !important; }
}
@media (max-width:575px) { 
	.owl-slider.owl-nav-title .owl-nav { margin-top:-25px; }
	.owl-slider.owl-nav-title .owl-nav button.owl-prev { left:10px; font-size:50px !important; }
	.owl-slider.owl-nav-title .owl-nav button.owl-next { right:10px; font-size:50px !important; }
}

/* 회원 포토 등 */
.owl-slider .owl-carousel .owl-item .sv_wrap img { display:inline-block !important;	width:auto !important; }

/* 페이지네이션 상단 등 */
@media all and (min-width:768px) {
	.pagination-top { position:absolute; top:-4.1rem; right:0; margin:0 !important; z-index:1; }
	.pagination-top.pagination-sm { top:-3.6rem; }
	.pagination-top.pagination-lg { top:-5.2rem; }
}
@media all and (max-width:767px) {
	.pagination-top { justify-content: center !important; }
}
/********************************************************
■ Bootstrap 4 : 부트스트랩 기본 속성
********************************************************/
/* 툴팁 */
.tooltip .tooltip-inner { font-size:1.0rem !important; }

/* 체크박스, 라디오버튼 재지정 */
.custom-checkbox .custom-control-label::before,
.custom-checkbox .custom-control-label::after,
.custom-radio .custom-control-label::before,
.custom-radio .custom-control-label::after { top:0.15rem !important; width:1.4rem !important; height:1.4rem !important; }

/* 체크박스, 라디오버튼과 글자간 간격 */
.custom-checkbox .custom-control-label span,
.custom-radio .custom-control-label span { cursor: pointer; padding-left:0.5rem !important; }

/* 스위치 버튼 재지정 */
.custom-switch .custom-control-label::before,
.custom-switch .custom-control-label::after { margin-top:2px; }

/* Button */
.btn-lg { padding: 10px 16px; border-radius: 3px; line-height: 1.33; font-size: 18px; }
.btn-lg i {	top: 3px; font-size: 24px; position: relative; }

/* Form */
.col-form-label { font-weight:bold; }

/* Pagenation */
.page-link,
.page-link:hover,
.page-link:focus { color: #333; }

/* 라운드 스타일 */
.na-round,
.view_image img,
.pretty-embed img { border-radius: 0.3rem !important; }

/* 사각 스타일 */
.is-square .na-round,
.is-square .view_image img,
.is-square .pretty-embed img,
.is-square .btn,
.is-square .alert,
.is-square .nav-link,
.is-square .form-control,
.is-square .input-group-prepend,
.is-square .input-group-append,
.is-square .input-group-text,
.is-square .custom-file-label,
.is-square .custom-file-label:after,
.is-square .custom-select,
.is-square .label,
.is-square .progress,
.is-square .pagination li a,
.is-square .list-group-item { border-radius:0 !important; }

/********************************************************
■ Root
********************************************************/
:root {
	--point: #3e4c80;
	--border: #d8d8d8;

	--black-100:#fff;
	--black-200:#fff;
	--text-color: #000;
}
[data-theme=dark] {
	--border: #777;

	--black-100:#27282A;
	--black-200:#333333;
	--text-color: #ffffff;
}

[data-theme=dark] .form-control.black-100 {
    background-color: var(--black-100);
    color: var(--text-color);
    border: 1px solid var(--border);
}

[data-theme=dark] .form-control.black-100:focus {
    background-color: var(--black-100); /* 포커스 상태에서도 같은 배경색 */
    color: var(--text-color);          /* 포커스 상태에서도 같은 텍스트 색 */
    border: 1px solid var(--border);   /* 포커스 상태에서도 동일한 테두리 */
    box-shadow: none;                  /* 포커스 시 기본 브라우저 스타일 제거 */
    outline: none;                     /* 포커스 시 외곽선 제거 */
}

[data-theme=dark] .form-control,
[data-theme=dark] .custom-select,
[data-theme=dark] .custom-file-input,
[data-theme=dark] textarea {
    background-color: var(--black-100); /* 다크 모드 배경색 */
    color: var(--text-color);          /* 다크 모드 텍스트 색 */
    border: 1px solid var(--border);   /* 테두리 색 */
}

[data-theme=dark] .form-control:focus,
[data-theme=dark] .custom-select:focus,
[data-theme=dark] .custom-file-input:focus,
[data-theme=dark] textarea:focus {
    background-color: var(--black-100); /* 포커스 상태에서도 동일 배경색 */
    color: var(--text-color);           /* 포커스 상태에서도 동일 텍스트 색 */
    border-color: var(--border);        /* 테두리 색 유지 */
    box-shadow: none;                   /* 기본 브라우저 포커스 효과 제거 */
    outline: none;                      /* 외곽선 제거 */
}

[data-theme=dark] .custom-file-label {
    background-color: var(--black-100); /* 파일 선택 라벨 배경 */
    color: var(--text-color);           /* 파일 선택 라벨 텍스트 */
    border: 1px solid var(--border);    /* 테두리 색 */
}

[data-theme=dark] .custom-file-label::after {
    background-color: var(--border);    /* "선택" 버튼 배경색 */
    color: var(--text-color);           /* "선택" 버튼 텍스트 */
}

[data-theme="dark"] {
    --input-bg: #333333;
    --input-text: #ffffff;

    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select {
        background-color: var(--input-bg) !important;
        color: var(--input-text) !important;
        border: 1px solid #555555;
    }

    input::placeholder,
    textarea::placeholder {
        color: #aaaaaa !important;
    }
}

[data-theme="dark"] {
	/* 다크모드 */
	.btn-basic {
		color: #ddd !important;
		border-image: none !important;
		background-image: none !important;
		border: 1px solid #999;
		background-color: #333;
	}
	.btn-basic:hover {
		color: #000 !important;
		background-color: #fff;
	}
}

[data-theme="dark"] {
	.by-writer {
		background:  #333333 !important;
		border-top: 1px solid #f6cece !important;
	}
}
/********************************************************
■ Custom
********************************************************/
.menu-left-border { border-radius: 10px 0px 0px 10px; }
.menu-right-border { border-radius: 0px 10px 10px 0px; }
.menu-both-border { border-radius: 10px; }
.board-border { border-radius: 12px; }

.loing-widget { padding: 0.75rem; border: 1px solid var(--border); border-radius: 12px; background-color: var(--black-200); }
.loing-input { background-color: var(--black-200); border: 1px solid var(--border); color: var(--text-color); }
/*  */
input { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; }
/*  */
.rank-widget { background-color: var(--point); color: var(--white); font-size: 16px; text-align: center; border-radius: 12px 12px 0 0; height: 48px; line-height: 48px !important; }
.rank-widget-desc { border: 1px solid var(--border); border-radius: 0px 0px 12px 12px; background-color: var(--black-200); color: var(--text-color); }

.nav-tabs { border-bottom: none !important; }
.nav-tabs .nav-link { background-color: var(--black-200) !important; color: var(--text-color); }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { background-color: var(--black-100) !important; border-color: var(--border) !important; color: var(--text-color); }
.nav-tabs .nav-link { border-radius: 12px 12px 0px 0px !important; }

.black-100 { background-color: var(--black-100); }
.black-200 { background-color: var(--black-200); }

.text-color { color: var(--text-color) !important; }
.point-color { color: var(--point); }

.board-desc h2 { font-size: 22px; }
.board-desc h3 { margin: 20px 0 0 0; padding: 0 0 10px 0; border-bottom: 1px solid var(--point); font-size: 16px; }
.board-desc p { margin: 10px 0 0 0; font-size: 14px; }

.navbar-light .navbar-brand { color: var(--text-color) !important; }



#mifr1, #mifr2 { display: none; } 
#mifr1.active, #mifr2.active { display: block; } 
.main_tab_wrap { } 
.main_tab_wrap ul { font-size: 0; padding: 0; margin: 0; } 
.main_tab_wrap ul li { display: inline-block; vertical-align: middle; border: 1px solid var(--border); box-sizing: border-box; width: 50%; } 
.main_tab_wrap ul li a { color: var(--text-color); font-size: 17px; display: block; text-align: center; padding: 10px 0; background-color: var(--black-100);} 
.main_tab_wrap ul li a.active { color: var(--text-color); background-color: var(--black-200); } 
.tab_content2 { display: none; } 
.tab_content2.active { display: block; } 
.sub_tab_wrap { } 
.sub_tab_wrap ul { padding: 0; margin: 0; font-size: 0; background-color: var(--black-100); } 
.sub_tab_wrap ul li { display: inline-block; vertical-align: middle; width: 33.333%; } 
.sub_tab_wrap ul li a { padding: 5px 10px; font-size: 14px; line-height: 22px; cursor: pointer; color: var(--text-color); text-align: center; display: block; } 
.sub_tab_wrap ul li a.active { color: var(--point); } 
body #main_event_wrap, .gb_col6{ width: 100%; }


/* Mobile Footer */
#new_ft { width: 100%; height: auto; position: fixed; bottom: 0; left: 0; z-index: 100; } 
#new_ft .ft_area { width: 100%; height: auto; position: relative; } 
#new_ft .ft_area .ft_con { width: 100%; height: auto; position: relative; } 
#new_ft .ft_navbox { width: 100%; height: auto; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; z-index: 100; } 
#new_ft .ft_navbox > li { width: 100%; height: auto; position: relative; } 
#new_ft .ft_navbox > li > a { width: 100%; height: auto; position: relative; padding: 6px 5px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 5px; background-color: var(--point); font-size: 1rem; font-weight: 800; color: #fff; } 
#new_ft .ft_navbox > li > a > span { font-size: 1.25rem; } 
.chat_cont { width: 100%; height: 0; position: absolute; bottom: 80px; left: 0; right: 0; background-color: #343a40; z-index: 98; } 
.chat_cont.active { height: 40vh; } 


/* Mobile Custom SideBar */
#fullscreenToggleButton { position: absolute; top: 12px; left: 20px; background-color: transparent; color: white; border: none; border-radius: 5px; cursor: pointer; } 
#fullscreenToggleButton:hover { background-color: #3e4c80; } 
#fullscreenSidebar { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black-100); color: white;  transition: transform 0.3s ease-in-out; transform: translateX(-100%); z-index: 1000; overflow-y: auto; overflow-x: hidden; } 
#fullscreenSidebar.fullscreen-hidden { transform: translateX(-100%); /* 숨김 */ } 
#fullscreenSidebar.fullscreen-visible { transform: translateX(0); /* 보임 */ } 
.fullscreen-sidebar-content {  } 
#fullscreenCloseButton { background-color: transparent; border: none; border-radius: 5px; cursor: pointer; } 
#fullscreenCloseButton:hover { background-color: #a71d2a; }
.mo-side { border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); }
.mo-side-title { padding: 0.55rem 1.0rem; margin: 0; font-weight: bold !important; border-top: 1px solid #dee2e6; margin-top: -1px;}



/* 기존 스타일 유지 */
.v-image {
    background-image: url('https://blackholetv-03.com/img/icon/notice.png');
    background-position: center center;
    background-size: contain; /* 아이콘이 잘리지 않고 크기에 맞게 조정 */
    background-repeat: no-repeat;
    height: 25px; /* 고정 크기 설정 */
    width: 25px; /* 고정 크기 설정 */
	margin-top: 4px;
}
.fixAlert {padding:8px 0 0 0; width: 800px;}
@media all and (max-width:767px) {
.fixAlert {padding:8px 0 0 0; width: 100%;}
}
.border-notice-primary {
    border: 1px solid #3c497d;
}

.site-primary {
    background: #3c497d !important;
    display: flex;
    align-items: center;
    flex: 0 0 auto; /* 텍스트와 아이콘의 크기를 자동으로 맞춤 */
}

.text-marquee_container {
    overflow: hidden;
    flex: 1 1 auto; /* 남은 공간을 채우도록 설정 */
    width: 100%;
    display: flex; /* 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
}

@media only screen and (min-width: 1264px) {
    .text-marquee_container {
        max-width: 1060px !important;
    }
}

.text-marquee_text {
    display: inline-block; /* 텍스트 너비에 맞추기 */
    white-space: nowrap; /* 텍스트가 한 줄로 유지되도록 설정 */
    animation: marquee 20s linear infinite;
    transform: translateX(100%);
}

@media only screen and (max-width: 1263.98px) {
    .text-marquee_text {
        animation: mb-marquee 20s linear infinite;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%); /* 부모 요소 너비만큼 이동 */
    }
}

@keyframes mb-marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 모바일 스타일 조정 */
@media all and (max-width: 767px) {
    .site-primary {
        display: flex;
        flex-direction: row; /* 아이콘과 텍스트를 한 줄로 정렬 */
        align-items: center; /* 세로 정렬 */
        height: auto; /* 모바일에서 높이 자동 조정 */
    }

    .v-image {
        height: 25px; /* 아이콘 크기 유지 */
        width: 25px; /* 아이콘 크기 유지 */
        flex-shrink: 0; /* 아이콘 크기를 줄이지 않음 */
    }

    .text-marquee_container {
        flex: 1; /* 텍스트 영역이 남은 공간을 차지하도록 설정 */
        display: flex;
        align-items: center; /* 텍스트 세로 중앙 정렬 */
        overflow: hidden; /* 넘치는 내용 숨김 */
    }

    .text-marquee_text {
        white-space: nowrap; /* 텍스트 한 줄 유지 */
        animation: mb-marquee 20s linear infinite; /* 모바일 애니메이션 적용 */
    }
}