@charset "utf-8";
/* CSS Document */



/* ==========================================================================
   NOTE:
   Please put your custom css styles after this line to make it easy
   for you to manage your website whenever a new version of this template
   is available.
   ========================================================================== */
.btn-facebook{
	background-color: #3b5998 !important;
	color:white !important;
	text-transform : none !important;
}
.btn-kakao{
	background-color: #fff000 !important;
	color:#222222 !important;
	text-transform : none !important;
}
.pem-blog-contents-top .page-header{
	margin:0 !important;
}
.btn-pem{
	margin:2px;
}

#top_nav_area #top_login_box .top_login_text{
	color:white !important;
}

.select_menu_pem{
	color : #F62459 !important;
	font-weight: bold;

}
.select_menu_pem a{
	font-size:14px !important;
	color : #F62459 !important;
	font-weight: bold !important;;

}
.datatable tbody tr{
	cursor: pointer;
}
.datatable tbody tr td:hover{
	color : #F62459 !important;
}

#blog_content_area{
	color:#222
}
#blog_content_area{
	word-break:break-all ;
	}

#blog_content_area img{max-width:100%; height:auto !important;}

.user-circle-img{
	height:100px;width:100px;border: 2px dotted white;
}

.pem-thum-main{
	height:200px !important;
}

/* React App Custom Styles */

/* Page header background - 고정 네비바를 위한 스타일 */
.page-header.parallax {
	padding: 120px 0 50px;
	margin-top: 0;
	margin-bottom: 0;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	position: relative;
}

/* 메인페이지가 아닌 다른 페이지들의 상단 여백 제거 */
section.page-header:first-child {
	margin-top: 0;
}

/* 히어로 섹션 다음 콘텐츠 섹션 마진 축소 */
.page-header.parallax + .section {
	padding-top: 30px;
}

.page-header.parallax::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
}

.page-header.parallax .container {
	position: relative;
	z-index: 1;
}

.page-header.parallax h1 {
	color: #fff;
	font-size: 48px;
	margin-bottom: 10px;
}

.page-header.parallax p {
	color: rgba(255,255,255,0.8);
	font-size: 18px;
}

/* Blog posts styling */
.blog-posts .post {
	margin-bottom: 30px;
}

.blog-posts .post .post-meta {
	margin-bottom: 10px;
}

.blog-posts .post .post-meta span {
	margin-right: 15px;
	color: #888;
	font-size: 13px;
}

.blog-posts .post .post-meta i {
	margin-right: 5px;
}

.blog-posts .post .post-title {
	font-size: 20px;
	margin-bottom: 10px;
}

.blog-posts .post .post-title a {
	color: #333;
	text-decoration: none;
}

.blog-posts .post .post-title a:hover {
	color: #337ab7;
}

/* Widget styling */
.widget {
	margin-bottom: 30px;
	padding: 20px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.widget-title {
	font-size: 18px;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid #337ab7;
}

.widget-categories li,
.widget-recent-posts li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}

.widget-categories li:last-child,
.widget-recent-posts li:last-child {
	border-bottom: none;
}

.widget-categories li a,
.widget-recent-posts li a {
	color: #555;
	text-decoration: none;
}

.widget-categories li a:hover,
.widget-recent-posts li a:hover {
	color: #337ab7;
}

.widget-categories li.active a {
	color: #337ab7;
	font-weight: bold;
}

.widget-recent-posts .post-date {
	display: block;
	font-size: 12px;
	color: #999;
}

/* Contact page styling */
.contact-info .info-box {
	margin-bottom: 25px;
	padding: 15px;
	background: #f9f9f9;
	border-radius: 4px;
}

.contact-info .info-box i {
	margin-bottom: 10px;
}

.contact-info .info-box h4 {
	margin-bottom: 10px;
	color: #333;
}

.contact-form h3 {
	margin-bottom: 20px;
}

/* Portfolio filter buttons */
.cbp-l-filters-button .cbp-filter-item {
	display: inline-block;
	padding: 10px 20px;
	margin: 5px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #555;
	cursor: pointer;
	transition: all 0.3s;
}

.cbp-l-filters-button .cbp-filter-item:hover,
.cbp-l-filters-button .cbp-filter-item-active {
	background: #337ab7;
	border-color: #337ab7;
	color: #fff;
}

/* Thumbnail styling */
.thumbnail.style1 {
	margin-bottom: 30px;
	border: none;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	transition: all 0.3s;
}

.thumbnail.style1:hover {
	box-shadow: 0 5px 20px rgba(0,0,0,0.15);
	transform: translateY(-5px);
}

.thumbnail.style1 .thumb-wrapper {
	position: relative;
	overflow: hidden;
}

.thumbnail.style1 .thumb-wrapper img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.thumbnail.style1 .thumb-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s;
}

.thumbnail.style1:hover .thumb-overlay {
	opacity: 1;
}

.thumbnail.style1 .caption {
	padding: 20px;
}

.thumbnail.style1 .caption h3 {
	font-size: 18px;
	margin-bottom: 10px;
}

.thumbnail.style1 .caption .post-meta {
	margin-bottom: 10px;
}

/* Main service boxes */
.main-subc {
	padding: 20px 30px;
}

.main-subc p {
	line-height: 1.8;
}

/* 메인 페이지 서비스 섹션 패딩 축소 */
.section.color-bg.no-padding .icon-box.style4 {
	padding: 20px 15px 5px;
}

.section.color-bg.no-padding .shade {
	padding: 15px 0 5px;
}

/* Softmoa Corp. 섹션 (기술및개발경력 버튼) - 여유 추가 */
.section.color-bg.no-padding .shade.bg-gary .center.text-center {
	padding-top: 10px;
	padding-bottom: 20px;
}

/* 3개 카드 섹션 (포트폴리오, 견적, 톡상담 버튼) - 여유 축소 */
.section.color-bg.no-padding .shade.bg-info .center.text-center,
.section.color-bg.no-padding .shade.bg-success .center.text-center,
.section.color-bg.no-padding .shade.bg-warning .center.text-center {
	padding-top: 5px;
	padding-bottom: 8px;
}

/* Scrolled navbar - top-nav-collapse (theme.css 보완) */
.navbar-custom.transparent-nav.top-nav-collapse {
	background: rgba(255,255,255,0.98) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-custom.transparent-nav.top-nav-collapse .navbar-brand img {
	filter: none;
}

/* top-nav-collapse 시 메뉴 텍스트 색상 변경 - 데스크톱만 */
@media (min-width: 768px) {
	.navbar-custom.transparent-nav.top-nav-collapse .nav > li > a {
		color: #333 !important;
	}

	.navbar-custom.transparent-nav.top-nav-collapse .nav > li > a:hover,
	.navbar-custom.transparent-nav.top-nav-collapse .nav > li > a:focus {
		color: #337ab7 !important;
	}

	.navbar-custom.transparent-nav.top-nav-collapse .search-cart a {
		color: #333 !important;
	}

	.navbar-custom.transparent-nav.top-nav-collapse .dropdown-toggle span.fa {
		color: #333 !important;
	}
}

/* 드롭다운 메뉴 배경색 - 데스크톱: 검정 (#111) */
@media (min-width: 768px) {
	.navbar-custom .dropdown-menu {
		background-color: #111;
		border: none;
	}

	.navbar-custom .dropdown-menu > li > a {
		color: #eee;
	}

	.navbar-custom .dropdown-menu > li > a:hover,
	.navbar-custom .dropdown-menu > li > a:focus {
		background-color: #222;
		color: #fff;
	}
}

/* 모바일 드롭다운 메뉴 - 밝은 색상 */
@media (max-width: 767px) {
	.navbar-custom .dropdown-menu {
		background-color: #f5f5f5;
		border: none;
		box-shadow: none;
	}

	.navbar-custom .dropdown-menu > li > a {
		color: #333;
		padding: 10px 20px;
	}

	.navbar-custom .dropdown-menu > li > a:hover,
	.navbar-custom .dropdown-menu > li > a:focus {
		background-color: #e8e8e8;
		color: #337ab7;
	}

	.navbar-custom .navbar-collapse {
		background-color: rgba(255, 255, 255, 0.98);
		border-top: 1px solid #ddd;
	}

	.navbar-custom .nav > li > a {
		color: #fff !important;
		font-weight: 600;
		text-shadow: 0 1px 2px rgba(0,0,0,0.5);
	}

	.navbar-custom .nav > li > a .fa-chevron-down {
		color: #fff !important;
	}
}

/* Load more button */
.cbp-l-loadMore-button {
	text-align: center;
	margin-top: 30px;
}

.cbp-l-loadMore-link {
	display: inline-block;
	padding: 12px 30px;
	background: #337ab7;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s;
}

.cbp-l-loadMore-link:hover {
	background: #286090;
	color: #fff;
}

/* Container width - 기존 사이트와 동일하게 */
@media (min-width: 1200px) {
	.container {
		max-width: 1170px;
		width: 1170px;
	}
}

/* 데스크톱에서 navbar-collapse 항상 표시 */
@media (min-width: 768px) {
	.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important;
	}
	.navbar-toggle {
		display: none;
	}
}

/* Sidebar 스타일 - 기존 theme.css 보완 */
.widget.style1 {
	margin-bottom: 15px;
	padding: 10px 0;
}

.widget.style1 .page-header {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 3px;
	border-bottom: 2px solid #337ab7;
	font-size: 14px;
}

.widget.style1 hr {
	margin: 8px 0;
}

.widget.style1 .aside-list {
	margin: 0;
	padding-left: 5px;
	padding-top: 2px;
}

.widget.style1 .aside-list li {
	padding: 2px 0;
}

.widget.style1 .aside-list li:first-child {
	padding-top: 0;
}

/* aside-list 스타일 오버라이드 */
.aside-list li.select_menu_pem a {
	color: #F62459 !important;
	font-weight: bold;
}

/* Search form in sidebar */
.search-form .form-group {
	position: relative;
	margin-bottom: 0;
}

.search-form .form-control {
	padding-right: 45px;
}

.search-form .btn {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Quill Editor Styles */
.ql-toolbar.ql-snow {
	border: 1px solid #ddd;
	border-radius: 4px 4px 0 0;
	background: #f9f9f9;
}

.ql-container.ql-snow {
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 4px 4px;
	font-size: 14px;
}

.ql-editor {
	min-height: 300px;
}

.ql-editor img {
	max-width: 100%;
	height: auto;
}

/* Blog Write Page Styles */
#blog_content_area .form-group {
	margin-bottom: 15px;
}

#blog_content_area .btn-social {
	margin: 0 5px;
}

/* Service Cards - 모바일에서 전체 너비, 데스크톱에서 3등분 */
.service-card {
	flex: 1 1 100% !important;
}

@media (min-width: 992px) {
	.service-card {
		flex: 1 1 33.33% !important;
	}
}

/* 모바일에서 서비스 섹션 전체 너비 */
@media (max-width: 991px) {
	.services-container {
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* 견적문의 폼 클릭 문제 해결 */
#tec-qna form,
#tec-qna .form-group,
#tec-qna .form-control,
#tec-qna button {
	position: relative;
	z-index: 10;
}

#tec-qna fieldset {
	position: relative;
	z-index: 10;
}

/* wow 애니메이션 요소가 폼 클릭을 방해하지 않도록 */
#tec-qna .section-header {
	pointer-events: none;
}

#tec-qna .section-header * {
	pointer-events: auto;
}

/* Contact 페이지 폼 클릭 문제 해결 (Safari) */
.contact-form form,
.contact-form .form-group,
.contact-form .form-control,
.contact-form textarea,
.contact-form button {
	position: relative;
	z-index: 10;
}

.contact-form.wow {
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

/* 푸터 톡상담하기 버튼 색상 */
.footer .btn-warning {
	background-color: #d4940a;
	border-color: #c78c09;
	color: #fff;
}

.footer .btn-warning:hover {
	background-color: #f0ad4e;
	border-color: #eea236;
}