@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Nanum+Myeongjo:wght@400;700&display=swap');

/* 기본 스타일 */
html,
body {height:100%;}

body  {line-height:1.5em; font-size:12px;}
caption {display:none;}
html.single:before {content:""; display:block; position:fixed; top:0; left:0; right:0; bottom:0; z-index:-1;}


/* 폼 요소 스타일 */

button {font-size:12px;}
.form-input {display:block; line-height:30px !important;}
input[type="file"] {padding-left:0 !important;}

.form-input,
input[type="text"],
input[type="password"],
input[type="file"],
select {box-sizing:border-box; height:30px; border-width:1px; border-style:solid; padding:0 10px; max-width:100%; font-size:12px; line-height:1.2;}

.form-input,
input[type="text"].full,
input[type="password"].full,
input[type="file"].full,
select.full {width:100%;}

textarea {box-sizing:border-box; border-width:1px; border-style:solid; padding:5px; width:100%; min-height:50px; font-size:12px; resize:none;}


/* Ajax 검색 리스트 */

.ajax-list-box {height:100px; overflow-y:auto; margin-top:10px; padding:5px;}
.ajax-list-box ul,
.ajax-list-box li {display:block; margin:0; padding:0; position:relative;}
.ajax-list-box li {margin-bottom:5px;}
.ajax-list-box li a {display:block; position:relative; padding:10px; border-radius:3px; text-decoration:none; font-size:12px;}
.ajax-list-box li a .ui-thumb {position:absolute; top:10px; left:10px; width:30px; height:30px; line-height:30px; overflow:hidden; text-align:center;}
.ajax-list-box li a .ui-thumb img {max-width:100%;}
.ajax-list-box li a .ui-info {margin-left:40px;}
.ajax-list-box .no-data {line-height:50px; text-align:center; margin-top:10px;}


/* 기본 라인 스타일 */

hr.line {display:block; position:relative; clear:both; margin:10px 0; border:none; padding:0; height:1px;}
hr.padding {display:block; clear:both; margin:0; padding:0; border:none; height:30px;}
hr.padding.small {height:5px;}

#bo_v_img img {height:auto !important;}


/* TWITTER */

.timeline-Body {border:none; font-size:12px; }
.timeline-Widget {background:none; opacity:.8;}
.timeline-Body-notification,
.timeline-Tweet-actions,
.timeline-Header {display:none;}
.timeline-Viewport {height:100%; overflow:auto;}
.timeline-TweetList {display:block; list-style:none; margin:0; padding:0;}

.timeline-Tweet {position:relative; padding:20px 5px 20px 0;}
.timeline-Tweet:before	{content:""; display:block; position:absolute; bottom:0; left:0; right:0; height:1px; border-top-width:1px; border-top-style:dashed;}
.timeline-TweetList li:first-child .timeline-Tweet	{padding-top:0;}
.timeline-Tweet .timeline-Tweet-text {padding:0 10px;}

.timeline-Tweet-inReplyTo {display:none;}
.TweetAuthor-link {display:block; position:relative; margin-bottom:10px; font-size:13px; font-weight:400; padding:2px 5px;}
.TweetAuthor-avatar {display:none;}
.TweetAuthor-screenName {font-size:11px; opacity:.5;}
.Interstitial-cookieConsentButton {display:none;}
.Interstitial-link {display:inline-block; vertical-align:middle; padding:2px 10px; margin:3px 0;}

.timeline-Tweet-metadata		{display:block; position:relative; font-size:11px; text-align:right; padding-right:10px;}
.timeline-Tweet-metadata a		{ }

.MediaCard-mediaContainer	{ padding-bottom:20px !important; }

.timeline-LoadMore { display:none; }
.Emoji { width:15px; vertical-align:middle; }
.NaturalImage-image,
.CroppedImage-image {height:auto !important;}
.u-floatLeft, .u-floatRight {display:none;}


/* 버튼 */

.ui-btn {display:inline-block; position:relative; text-align:center; border-width:1px; border-style:solid; vertical-align:middle; height:28px; padding:0 15px; box-sizing:border-box; cursor:pointer;}
a.ui-btn {line-height:26px;}
.ui-btn.small {height:25px; line-height:23px; font-size:12px;}
.ui-btn.full {width:100%;}

.ui-btn.admin {background:#8c1e1e; color:#fff; border-color:#691010;}
.ui-btn.disable {opacity:.3;}

.ui-btn.ico {width:15px; height:15px; text-align:left; line-height:15px; padding:0; font-size:11px; overflow:hidden; text-indent:-999px;}
.ui-btn.ico.default {width:28px; height:28px; line-height:28px;}
.ui-btn.ico:before {display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; text-indent:0; font-family:'icon';}
.ui-btn.ico.big {width:40px; height:40px; line-height:40px; font-size:18px;}
.ui-btn.ico.circle {border-radius:9.0em;}

.ui-btn.ico.del {background:#a40000; color:#fff; border:none; border-radius:2px; margin-left:5px;}
.ui-btn.ico.del:before {content:"\e9ac";}
.ui-btn.ico.camera:before {content:"\e90f";}
.ui-btn.ico.search:before {content:"\e986";}
.ui-btn.ico.exp:before {content:"\e923";}
.ui-btn.ico.search:before {content:"\e986";}


/* 기본박스 */
.theme-box {display:block; position:relative; padding:10px; box-sizing:border-box;}



table {width:100%; padding:0; border-spacing:0px; border:0; border-collapse:collapse; table-layout:fixed;}
th, td {border:none;}

.theme-form { }
.theme-form td {padding:5px; height:30px;}
.theme-form th {padding:5px 10px;}
.theme-form .frm_info {display:block; font-size:12px; padding:0 0 8px 0;}

.theme-list {table-layout:fixed;}
.theme-list thead th {height:30px;}
.theme-list td {padding:5px; height:30px;}
.theme-list td.no-data {padding:5px; text-align:center; line-height:200px;}


/* 도움말 정보 */

.frm_info {display:block; font-size:12px; padding:0 0 8px 0; opacity:.7;}
.status-bar .frm_info {padding:0;}


/* Status Bar */

.status-bar {display:block;}
.status-bar dl,
.status-bar dd,
.status-bar dt {margin:0; padding:0;}
.status-bar dl {display:block; position:relative; margin:1px 0; padding-left:100px; line-height:28px;}
.status-bar dt {position:absolute; top:0; left:0;}
.status-bar dd p {position:relative; height: 16px; border-radius: 8px; overflow: hidden;}
.status-bar dd p span {display:block; position:absolute; top:0; left:0; bottom:0; z-index:0;}
.status-bar dd p sup {display:block; position:absolute; top:0; left:0; bottom:0; z-index:0;}
.status-bar dd p i {display:block; position:relative; padding-left:5px; font-size:11px; z-index:1;}

/** Bar Control 추가 **/
.status-bar dl.ui-control {padding-right:60px;}
.status-bar dl dd.control {display:block; position:absolute; top:0; bottom:0; right:0; width:60px;}
.status-bar dl dd.control a {display:block; position:relative; width:50%; float:left; margin:0; padding:0; text-indent:-999px; overflow:hidden;}
.status-bar dl dd.control a:before  {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-indent:0; text-align:center; font-family:'icon';}
.status-bar dl dd.control a + a {border-left-width:0;}
.status-bar dl dd.control a[data-function="plus"]:before {content:'\ea0a';}
.status-bar dl dd.control a[data-function="minus"]:before {content:'\ea0b';}


/* BGM */
html.single .bgm-player {display:none !important;}

.bgm-player {text-align:center;}
.bgm-player .title {display:inline-block; vertical-align:middle; line-height:30px; font-size:13px;}
.bgm-player ul {display:inline-block; vertical-align:middle; margin:0 auto; padding:0; list-style:none;}

.bgm-player li {display:inline-block; width:30px; height:30px; vertical-align:middle; margin:0 2px;}
.bgm-player li a {display:block; position:relative; width:100%; height:100%; line-height:30px; text-align:left; text-indent:-999px; overflow:hidden;}
.bgm-player li a:before {content:""; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-indent:0; text-align:center; font-family:'icon'; font-size:14px; line-height:30px;}

.bgm-player li a.play:before {content:"\ea1c";}
.bgm-player li a.pause:before {content:"\ea1d";}


/* 헤더 레이아웃 */
/* 디자인 설정 안할 시 */
#no_design_gnb {padding:50px 0; text-align:center; line-height:1.5em;}
#no_design_gnb li {display:block; margin-bottom:30px; font-size: 18px;}

.close-header #header {width:0px !important;}
.close-header #body {margin-left:0 !important;}
.close-header body {min-width:0;}

#header .header-layout {padding:0;}
#logo {padding-top: 100px;}
#logo img {max-width:250px;}

.gnb-logo {
    display: none;
}

@media all and (max-width:1024px)  {
	.close-header #header {width:auto !important;}
}

/* 모바일 헤더 레이아웃 */
@media all and (max-width:1024px)  {
	body {width:100%;}
	#logo {display: none !important; }
	#body {margin-left:0px;}
    
	/* 모바일 메뉴 내부 로고 */
	.gnb-logo {
		display: block;
		text-align: center;
		padding-top: 50px;
    }
	.gnb-logo img {
		max-width: 100%;
		height: auto;
		display: inline-block;
	}
	
	/* 헤더 위치 */
	#header .header-layout {padding:0;}
	#header {
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:auto;
        z-index:999;
        width:auto;
        height: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        overflow:visible;}

	/* 메인메뉴 */
	#gnb {
        position:fixed;
        top:0;
        right:-280px;
        bottom:0;
        width:280px;
        z-index:999;
        overflow-y:auto;
    }
	#gnb_control_box {
        position: fixed;
        margin-top:0;
        top:20px;
        right:20px;
        width:25px;
        height:25px;
        border-radius:100%;
        text-align:center;
    }
	#gnb_control_box img {display:inline-block; max-width:100%; max-height:100%; vertical-align:middle; margin-left:-12%; opacity:1;}

	/* 메뉴 열고 닫기 */
	#gnb_control_box,
	#gnb_control_box *  {transition:all 0s ease; -webkit-transition:all 0s ease; -ms-transition:all 0s ease;}

	/* 메뉴 열렸을 시 */
	.open-gnb #gnb {right:0;}
	.open-gnb #gnb_control_box {position:fixed; top:0; left:0; right:0; bottom:0; z-index:99; background:rgba(0, 0, 0, 0.8); border-radius:0; width:auto; height:auto; backdrop-filter: blur(5px);}
	.open-gnb #gnb_control_box img {opacity:0;}
}


/* 탭 설정 */

#tab_list {display:block; position:relative; overflow:hidden; border-bottom-width:2px; border-bottom-style:solid;}
#tab_list li {display:block; position:relative; float:left;}
#tab_list li a {display:block; position:relative; border-bottom-width:0;}
#tab_list li + li a {border-left-width:0px;}


/* 페이지 설정 */

.pg_wrap {display:block; position:relative; text-align:center; padding:20px 0;}
.pg_wrap .pg_page {display:inline-block; position:relative; height:30px; line-height:28px; min-width:30px; box-sizing:border-box; padding:0 5px; font-size:13px; text-align:center; vertical-align:middle; border-width:1px; border-style:solid;}
.pg_wrap .pg_control {overflow:hidden; text-align:left; text-indent:-999px;}
.pg_wrap .pg_control:before {font-family:'icon'; display:block; position:absolute; top:0; left:0; right:0; bottom:0; text-indent:0; text-align:center; font-size:14px;}
.pg_wrap .pg_start,
.pg_wrap .pg_end {display:none;}
.pg_wrap .pg_prev:before {content:"\ea23";}
.pg_wrap .pg_next:before {content:"\ea24";}


/* Search Box */

.searc-sub-box {position:relative; clear:both; padding:30px 0px;}
.ui-search-box {position:relative; padding-left:100px; padding-right:80px; margin-top:5px;}
.ui-search-box .sch_category {position:absolute; top:0; left:0; width:95px; line-height:30px;}
.ui-search-box .sch_button {position:absolute; top:0; right:0; width:75px;}
.ui-search-box span {display:block; padding:0 15px;}
.ui-search-box select,
.ui-search-box input[type="text"],
.ui-search-box button {display:block; width:100%;}


/* 인벤토리 팝업 뷰 */
/* 기본 폰트 및 트랜지션 정의 */
.inven-popup-viewer,
.inven-popup-viewer * {
    box-sizing: border-box;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

/* 팝업 컨테이너 */
.inven-popup-viewer {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 320px;
    height: auto;
    min-height: 380px;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease-in-out;
    margin: 0;
    z-index: 30;
    background: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    color: #eee;
}
.inven_popup_viewer_close {
    display: none;
}
.inven-popup-on .inven_popup_viewer_close {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 25;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.inven_popup_viewer_close a {
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    text-indent: -9999px;
    overflow: hidden;
}
.inven-popup-viewer .ui-style-btn {
    transition: background 0.2s, transform 0.2s;
}
/* 내부 레이아웃 */
.inven-popup-viewer.default-form {
    padding: 50px;
}
.inven-popup-viewer.default-form .inner-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 에러 메시지 */
.inven-popup-viewer.default-form .inner-content .error {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    font-weight: 500;
}

/* 아이템 이미지 영역 */
.inven-popup-viewer.default-form .info {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.inven-popup-viewer.default-form .info .ui-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    background: none;
    border: none;
    overflow: hidden;
}
.inven-popup-viewer.default-form .info .ui-thumb img {
    object-fit: contain;
}

/* 아이템 텍스트 영역 */
.inven-popup-viewer.default-form .text {
    position: relative;
    flex: 1;
}

/* 아이템 타이틀 및 가격 설정 */
.inven-popup-viewer.default-form .text .title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Noto Serif KR', serif;
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.inven-popup-viewer.default-form .text .title span {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: #be343c;
    padding: 1px 10px;
    margin-top: 10px;
    border-radius: 20px;
}

/* 내용 상자 */
.inven-popup-viewer.default-form .text .item-content-box {
    overflow-y: auto;
    margin-bottom: 20px;
}
.inven-popup-viewer.default-form .text .item-content-box::-webkit-scrollbar {
    width: 4px;
}
.inven-popup-viewer.default-form .text .item-content-box::-webkit-scrollbar-track {
    background: transparent;
}
.inven-popup-viewer.default-form .text .item-content-box::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
.inven-popup-viewer.default-form .text .item-content-box::-webkit-scrollbar-thumb:hover {
    background: #be343c;
}

.inven-popup-viewer.default-form .text .item-content-box div {
    font-size: 13px;
    word-break: keep-all;
}
.inven-popup-viewer.default-form .text div.default {
    color: #eee;
}
.inven-popup-viewer.default-form .text div.effect {
    padding-top: 10px;
    color: #fca5a5;
    font-weight: 500;
}
.inven-popup-viewer.default-form .text div.memo {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    color: #888;
    font-size: 12px;
}
.inven-popup-viewer.default-form .text div.memo p {
    margin: 2px 0;
}

.inven-popup-viewer.default-form .control-box {
    clear: both; 
    position: relative; 
    padding: 10px 0;
}

.inven-popup-viewer.default-form .control-box ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.inven-popup-viewer.default-form .control-box li {
    display: block;
}

.inven-popup-viewer.default-form .control-box li a {
    display: block; 
}

/* 버튼 스타일링 */
.inven-popup-viewer.default-form .control-box li a.ui-style-btn {
    display: block;
    width: 40px;
    padding: 5px 0;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    background: #be343c;
    text-decoration: none;
    cursor: pointer;
}
.inven-popup-viewer.default-form .control-box li a.ui-style-btn:hover {
    background: #a32a31;
    transform: translateY(-1px);
}
.inven-popup-viewer.default-form .control-box li a.ui-style-btn:active {
    transform: translateY(1px);
}
/* 추가/선물 입력 폼 영역 스타일 */
.inven-popup-viewer.default-form .add-item-form .item-info span {
    color: #94a3b8;
    font-size: 11px;
}
.inven-popup-viewer.default-form .add-item-form input,
.inven-popup-viewer.default-form .send-item-form input,
.inven-popup-viewer.default-form .send-item-form select {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 11px;
    outline: none;
}
.inven-popup-viewer.default-form .add-item-form input:focus,
.inven-popup-viewer.default-form .send-item-form input:focus,
.inven-popup-viewer.default-form .send-item-form select:focus {
    border-color: #be343c;
    box-shadow: 0 0 0 2px rgba(190, 52, 60, 0.2);
}
.inven-popup-viewer.default-form .ui-style-btn.type4 {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 8px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: #be343c;
}


/* Top 버튼 */

#goto_top {position:fixed; right:0; bottom:0; z-index:50;}
@media all and (max-width:580px)  {#goto_top  {width:50px;}}


/* 서브메뉴 레이아웃 */

#submenu {display:block; position:relative; text-align:center;}
#submenu li {display:inline-block; vertical-align:middle; font-size:13px; font-weight:600; padding:8px 10px;}
#subpage {margin-top:20px;}
#subpage section {padding-bottom:50px;}

@media all and (max-width:1024px)  {
	#submenu {margin:0 -10px;}
	#submenu li {padding:5px; font-size:12px;}
	#subpage {margin-left:0;}
}


/* 페이지 타이틀 */

.page-title {font-size:18px; padding:10px 0 20px;}
.page-title span {font-size:14px; opacity:.8; font-weight:400;}

.sub-title {font-size:14px; padding:0 0 10px;}
.sub-title:before {content:"\e906"; display:inline-block; vertical-align:middle; font-family:'icon'; margin-right:8px;}


/* 알람 팝업 */

.ui-memo-alram-box,
.ui-call-alram-box {display:none; position:fixed; top:0; left:0; right:0; z-index:999; text-align:center;}


/* 마퀴 (우 ▶ 좌) 흐름 */

.marquee span {display:block; position:relative; overflow:hidden;}
.marquee span i:after {content:""; white-space:nowrap; padding-right:50px;}
 .marquee span i {margin:0; padding-left:100%; display:inline-block; white-space:nowrap;
	-webkit-animation-name:marquee;
	-webkit-animation-timing-function:linear;
	-webkit-animation-duration:10s;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-name:marquee;
	-moz-animation-timing-function:linear;
	-moz-animation-duration:10s;
	-moz-animation-iteration-count:infinite;
	-ms-animation-name:marquee;
	-ms-animation-timing-function:linear;
	-ms-animation-duration:10s;
	-ms-animation-iteration-count:infinite;
	-o-animation-name:marquee;
	-o-animation-timing-function:linear;
	-o-animation-duration:10s;
	-o-animation-iteration-count:infinite;
	animation-name:marquee;
	animation-timing-function:linear;
	animation-duration:10s;
	animation-iteration-count:infinite;
}
@-webkit-keyframes marquee  {
	from    {-webkit-transform:translate(0%);}
	99%,to  {-webkit-transform:translate(-100%);}
}
@-moz-keyframes marquee  {
	from    {-moz-transform:translate(0%);}
	99%,to  {-moz-transform:translate(-100%);}
}
@-ms-keyframes marquee  {
	from    {-ms-transform:translate(0%);}
	99%,to  {-ms-transform:translate(-100%);}
}
@-o-keyframes marquee  {
	from    {-o-transform:translate(0%);}
	99%,to  {-o-transform:translate(-100%);}
}
@keyframes marquee  {
	from    {transform:translate(0%);}
	99%,to  {transform:translate(-100%);}
}


/* 게시판 본문 영역 */
#bo_v_con ul, .view-content ul {
    list-style-type: disc;
    padding-left: 25px;
    margin: 10px 0;
}

#bo_v_con ol, .view-content ol {
    list-style-type: decimal;
    padding-left: 25px;
    margin: 10px 0;
}

#bo_v_con li, .view-content li {
    display: list-item;
}