@charset "utf-8";

/* @import */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic');

/* Common */
body { font-size:13px; background-color:#fff; background-repeat: no-repeat; background-position: center bottom; background-attachment:fixed; background-size:cover; }
body.is-mobile { font-size:14px; }
a { color: rgb(51, 51, 51); cursor: pointer; text-decoration: none; }
a:hover, a:focus, a:active { color: crimson; text-decoration: none; }
fieldset legend { display:none; }
label { font-weight:normal; }
label.checkbox, label.radio { line-height:12px; font-size: 12px; font-weight: normal; cursor: pointer; }
hr { margin-top: 20px; margin-bottom:20px; border:0; border-top:1px solid #eee; display:block; }
blockquote { font-size: 12px; margin:0px 0px 20px; }

/* Font */
.en { font-family: "Source Sans Pro", sans-serif; }
.ko { font-family: dotum, sans-serif; }
.is-pc .ko .ko-12 { font-family: dotum, sans-serif; font-size:12px; }
.is-pc .ko .ko-11 { font-family: dotum, sans-serif; font-size:11px; letter-spacing:-1px; }

/* Layout */
.responsive #thema_wrapper { overflow:hidden; }
.layout-boxed.header-menu .hidden-boxed { display:none; }
.content-wrapper { line-height: 22px; }
.at-slide { transition: all 0.3s ease-in-out; }
.at-wrap { display:table; width:100%; table-layout:fixed; }
.at-main { display:table-cell; vertical-align:top; padding-right:15px; }
.at-side { width:320px; display:table-cell; vertical-align:top; }

#at-wrap { position:relative; }
#at-left { position:absolute; top:0px; left:0px; }
#at-right { position:absolute; top:0px; right:0px; }
/*@media all and (max-width:991px) {*/
@media all and (max-width:1119px) {
	.responsive .at-row { display:block; width:100%; table-layout:auto; }
	.responsive .at-main { width:100%; display:block; vertical-align:top; padding-right:0px; }
	.responsive .at-side { width:100%; display:block; vertical-align:top; }
	.responsive #at-wrap { padding:0px !important; }
	.responsive #at-left { position:static; width:100%; }
	.responsive #at-right { position:static; width:100%; }
}

/* CUSTOM */
body{color:#ababab;font-size:14px;}

.btn.btn-color {
    border: 1px solid rgb(6 13 14);
    background-color: rgb(45 187 255);
}

/*.form-control{border:none;color:#fff;}*/
.form-control{background:#2d3748;border:1px solid #4a5568;color:#ffffff;border-color:#000000 !important;}
.panel-default>.panel-heading{color:#bcf1e5;}
/* 자동완성 배경색 변경 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px black inset !important;
    -webkit-text-fill-color: #fff !important;
    background-color: black !important;
}

/* Firefox용 */ 
input:-moz-autofill {
    background-color: black !important;
    color: #fff !important;
}

/* 포커스 상태 배경색 변경 */
input:focus,
input:focus-visible,
input:focus-within,
textarea:focus,
textarea:focus-visible,
textarea:focus-within,
select:focus,
select:focus-visible,
select:focus-within {
    background-color: black !important;
    color: #fff !important;
    outline: none !important;
    border-color: #000 !important;
}

.bg-light, i.bg-light, .badge.bg-light{background:#4e4e4e;}

.sidebar-misc{margin-bottom:20px;}

/* 로그인 */
.form-box{background:#1a202c;border-color:#2d3748;}
.form-box .form-footer,
.form-box .form-header{border-color:#2d3748;}
.form-box .form-body{background:#1a202c;}


/* 회원가입 버튼 스타일 */
.btn-register {
    display: block;
    padding: 8px 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white !important;
    text-decoration: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-register:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    color: white !important;
    text-decoration: none;
}

.btn-register i {
    margin-right: 5px;
    font-size: 11px;
}

@media all and (max-width:991px) {
	.responsive  .content {
		padding: 1px;
		margin: 0px;
	}
}
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #282828;
    border: 1px solid #404040;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.well a{color:#d98787;text-decoration:underline;}

.sidebar-menu .treeview-menu { display: block !important; /* 항상 열기 */}
.sidebar-menu .treeview > a .fa-angle-left { transform: rotate(-90deg) !important; /* 항상 열린 모양 */ }
.panel-default {
    border-color: #2d3748;
	background: #1a202c;
}
.panel-default>.panel-heading {
    background-color: #1a202c;
    border-color: #2d3748;
}
.input-group-addon{color:#d1d1d1;}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #2d3748;
    border-color: #4a5568;
}
.pagination li a:hover{background:#ddd;color:#000 !important;}

.pagination>li>a, .pagination>li>span {
    border: 1px solid #4a5568;
}

.list-wrap .pagination a, .view-wrap .pagination a,.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus{color:#fff !important;}

/* 스켈레톤 로딩 컨테이너 */
.skeleton-loading {
	background: linear-gradient(45deg, #e0e0e0, #f8f8f8, #d0d0d0, #f8f8f8, #e0e0e0);
	background-size: 800% 800%;
	animation: skeleton-wave 1.5s ease-in-out infinite;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

/* 스켈레톤 반짝이는 효과 - 가상요소로 처리 */
.skeleton-loading:before {
	content: '';
	position: absolute;
	top: 0;
	left: -150%;
	width: 150%;
	height: 100%;
	background: linear-gradient(110deg, 
		transparent 20%, 
		rgba(255,255,255,0.3) 40%, 
		rgba(255,255,255,0.8) 50%, 
		rgba(255,255,255,0.3) 60%, 
		transparent 80%
	);
	animation: skeleton-shimmer 1.2s infinite;
	z-index: 1;
	pointer-events: none;
	transform: skewX(-15deg);
}

/* Lazy 이미지 스타일 */
.lazy-image {
	opacity: 0;
	transition: opacity 0.5s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 2;
}

/* 이미지 로딩 완료 상태 */
.img-item.loaded {
	background: none !important;
	animation: none !important;
}

.img-item.loaded:before {
	display: none !important;
}

/* 스켈레톤 웨이브 애니메이션 */
@keyframes skeleton-wave {
	0% { 
		background-position: 0% 0%;
		transform: scale(1);
	}
	25% { 
		background-position: 50% 50%;
		transform: scale(1.02);
	}
	50% { 
		background-position: 100% 100%;
		transform: scale(1);
	}
	75% { 
		background-position: 50% 50%;
		transform: scale(0.98);
	}
	100% { 
		background-position: 0% 0%;
		transform: scale(1);
	}
}

/* 스켈레톤 반짝이는 효과 */
@keyframes skeleton-shimmer {
	0% { 
		left: -150%;
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% { 
		left: 150%;
		opacity: 0;
	}
}

/* 다크모드 지원 */
@media (prefers-color-scheme: dark) {
	.skeleton-loading {
		background: linear-gradient(45deg, #1a1a1a, #3a3a3a, #2a2a2a, #3a3a3a, #1a1a1a) !important;
		background-size: 800% 800% !important;
	}
	.skeleton-loading:before {
		background: linear-gradient(110deg, 
			transparent 20%, 
			rgba(255,255,255,0.1) 40%, 
			rgba(255,255,255,0.3) 50%, 
			rgba(255,255,255,0.1) 60%, 
			transparent 80%
		) !important;
	}
}



/* SNS Icon */
.sns-share-icon img { width:20%; max-width:34px; border-radius:50%; }

/* Page Title */
.page-title { width:100%; background: #1A1A1A; border-bottom:1px solid #333333; margin:0 0 15px 0; padding: 0 0 15px 0; overflow:hidden; }
.page-title h2 { display:inline; color: #ffffff; margin: 0px; padding: 0px; font-size: 22px; }
.page-title h2 a span { color: #ffffff; }
.page-title .page-desc { margin-left:10px; color: #cccccc; font-size:11px; }

/* 작은 모바일에서 크기 조정 */
@media (max-width: 480px) {
	.page-title { padding: 8px 0 8px 10px; }
	.page-title h2 { font-size:16px;font-weight:bold; }
}


/* Footer */
.main-footer { line-height:20px; }
.main-footer .info { color:#888; letter-spacing:-1px; margin-bottom:5px; }
.main-footer .info a { color:#888; }
.main-footer .sp { margin:0px 10px; font-size:11px; color:#ddd; }
.main-footer .sc { margin:0px 3px; font-size:11px; color:#ddd; }
.main-footer .txt { letter-spacing:0px; }
.main-footer .corp { color:#888; margin-bottom:5px; }
.main-footer .corp a { color:#666; }
.main-footer .copyright { letter-spacing:0px; }
@media all and (max-width:480px) {
	.responsive .main-footer { text-align:left; }
}

/* Go Top & Bottom */
.go-btn { display:none; position: fixed; bottom: 0px; right: 25px; z-index: 2; }
.go-btn a { display:block; }

/* Bootstrap3 ----------------------------------------------------------------------------------- */

/* Button */
.btn { font-family: "Source Sans Pro", sans-serif; }
.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; }
.btn-xs { padding: 4px 10px; }
.is-pc .ko .btn-xs,
.is-pc .ko .btn-sm { font-family:dotum, sans-serif; }

/* Panel : Accordions */
.panel { box-shadow: none; -webkit-box-shadow: none; border-radius: 0px; }
.panel-group .panel { border-radius: 0px; }
.panel .panel-heading { border-radius: 0px; }
.is-pc .ko .panel .panel-body { font-size:12px; }

/* List Group */
.list-group-item { word-break:break-all; border-radius:0 !important; }

/* Pagination */
.pagination { font-family: "Source Sans Pro", sans-serif; }
.pagination li a { border-radius:0 !important; color:#ddd !important; padding:10px 16px;}
.pagination li.active a { color:#fff !important; background:rgb(45 187 255) !important; border-color:#ffffff !important; }

/* Progress */
.progress { position:relative; border-radius: 0px; height: 28px; overflow: hidden; margin-bottom: 15px; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); background-color: rgb(245, 245, 245); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.progress .sr-only { font-family: "Source Sans Pro", sans-serif; margin: 0px 15px; left: 0px; width: auto; height: 28px; line-height: 28px; font-size: 12px; clip: auto; }
.sr-score { font-family: "Source Sans Pro", sans-serif; height: 28px; line-height: 28px; font-size: 12px; padding-right:8px; }

/* Misc */
.form-control, .well, .btn, .alert, .input-group-addon, .label { border-radius:3px !important; }
.label-circle { border-radius: .25em !important; }

/* Action */
.navbar-custom-menu .dropdown.active .dropdown-menu { display:block !important; }

/* Treeview */
.treeview.active > a {
  font-weight: 600;
}
.treeview-menu > li.active > a {
  font-weight: 600;
}

/* Top Menu */
.at-navbar .navbar-nav .old,
.at-navbar .navbar-nav .sub-old { display: none; }
.at-navbar .navbar-nav .new { color: rgb(233, 75, 59); margin-left:6px; }
.at-navbar .navbar-nav .sub-on > a,
.at-navbar .navbar-nav .sub2-on > a { font-weight:bold; color: #FA4EAB; }
.at-navbar .navbar-nav .sub-off > a,
.at-navbar .navbar-nav .sub2-off > a { font-weight:normal; }
.at-navbar .navbar-nav .sub-new { color: rgb(233, 75, 59); margin-left:6px; }
.at-navbar .navbar-nav .sub-caret { margin-top:2px; }
.at-navbar .navbar-nav > .active > a { font-weight:bold; }
.navbar-toggle.btn-navbar-top { margin-top:1px; }
.is-pc .ko .at-navbar .dropdown-menu { font-size:12px !important; }

.at-navbar .navbar-nav > li > a { letter-spacing:-1px; }
.at-navbar .navbar-nav.nav-12 > li > a { font-size: 15px; }
.at-navbar .navbar-nav.nav-13 > li > a { font-size: 15px; }
.at-navbar .navbar-nav.nav-14 > li > a { font-size: 15px; font-family: "Source Sans Pro", sans-serif; }
.at-navbar .navbar-nav.nav-15 > li > a { font-size: 15px; font-family: "Source Sans Pro", sans-serif; }

.at-navbar .navbar-nav .sub-caret { color:#ddd; }
.at-navbar .dropdown-menu { box-shadow: 0px 6px 12px rgba(0,0,0,0.175); padding:0px; background:#333333; border: 0px; border-radius: 0px; }
.at-navbar .dropdown-menu ul { border:0px; padding:0px; margin:0px; list-style:none; border-radius: 0px; }
.at-navbar .dropdown-menu ul > li { padding:0px; margin:0px; border-bottom:1px solid #222222; }
.at-navbar .dropdown-menu ul > li > a { display:block; padding: 12px 16px; color: #ffffff; line-height:18px; }
.at-navbar .dropdown-menu ul > li:hover > a { font-weight:bold; }
.at-navbar .dropdown-menu ul > li:last-child { border:0px; }

.at-navbar .dropdown-submenu { position: relative; }
.at-navbar .dropdown-submenu > .dropdown-menu { left: 100%; top: 0px; margin-top: 0px; margin-left: -10px; }

.at-navbar .navbar-nav .dropdown-menu ul > li.line,
.at-navbar .navbar-nav .dropdown-menu ul > li.line:hover { background:#f5f5f5 !important; border-bottom:1px solid rgb(238, 238, 238) !important; }
.at-navbar .navbar-nav .dropdown-menu ul > li.line > a,
.at-navbar .navbar-nav .dropdown-menu ul > li.line:hover > a { background:#f5f5f5 !important; color: rgb(0, 0, 0) !important; font-weight:bold; }

.at-navbar .navbar-nav .dropdown-menu ul > li.line-sub,
.at-navbar .navbar-nav .dropdown-menu ul > li.line-sub:hover { background:#f5f5f5 !important; border-bottom:1px solid rgb(238, 238, 238) !important; }
.at-navbar .navbar-nav .dropdown-menu ul > li.line-sub > a,
.at-navbar .navbar-nav .dropdown-menu ul > li.line-sub:hover > a { background:#f5f5f5 !important; color: rgb(0, 0, 0) !important; font-weight:bold; }

@media all and (max-width:767px) {
	.responsive .at-navbar { 
		width:100%; margin:0px; border-top: 1px solid transparent; padding-left:15px; padding-right:15px; 
		-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); box-shadow: inset 0px 1px 0px rgba(255,255,255,0.1);
	}
	.responsive .fixed .at-navbar { max-height:300px; overflow-y:auto; }
	.responsive .at-navbar .navbar-nav > .open > a { font-weight:bold; }
	.responsive .at-navbar .navbar-collapse { border-top:0px !important; -webkit-box-shadow: none !important; box-shadow: none !important; }
	.responsive .at-navbar ul.pull-left { float:none !important; width:100% !important; min-width:100% !important; }
	.responsive .at-navbar .sub-nanum { display:none !important; }
	.responsive .at-navbar .navbar-nav .dropdown-menu ul > li { border-bottom:0px !important; }
	.responsive .at-navbar .dropdown-menu-head > ul > li > a { display: block; padding: 10px 15px; padding-left:30px; line-height:20px; }
	.responsive .at-navbar .dropdown-menu-sub > ul > li > a { display: block; padding: 10px 15px; padding-left:45px; line-height:20px; }
}