/**
* Template Name: Gp
* Template URL: https://bootstrapmade.com/gp-free-multipurpose-html-bootstrap-template/
* Updated: Jun 14 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/

/* Fonts */
@import
	url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap')
	;

@import
	url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&display=swap')
	;

@import
	url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&display=swap')
	;

* {
	font-family: "Noto Sans KR", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

:root {
	--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
	--heading-font: "Noto Sans KR", sans-serif;
	--nav-font: "Noto Sans KR", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
	--background-color: #ffffff;
	/* Background color for the entire website, including individual sections */
	--default-color: #444444;
	/* Default color used for the majority of the text content across the entire website */
	--heading-color: #151515;
	/* Color for headings, subheadings and title throughout the website */
	--accent-color: #09b1ec;
	/* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
	--contrast-color: #312f2f;
	/* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
	--nav-color: #97d3f0;
	/* The default color of the main navmenu links */
	--nav-hover-color: #0079dd;
	/* Applied to main navmenu links when they are hovered over or active */
	--nav-dropdown-background-color: #ffffff80;
	/* Used as the background color for dropdown items that appear when hovering over primary navigation items */
	--nav-dropdown-color: #212529;
	--nav-dropdown-background-color: #ffffff80;
	/* Used as the background color for dropdown items that appear when hovering over primary navigation items */
	--nav-dropdown-color: #212529;
	/* Used for navigation links of the dropdown items in the navigation menu. */
	--nav-dropdown-hover-color: #60bce773;
	/* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Template Custom Colors */
:root {
	--footer-background-color: #000000;
}

/* Smooth scroll */
:root {
	scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
	color: var(--default-color);
	background-color: var(--background-color);
	font-family: var(--default-font);
}

a {
	color: var(--accent-color);
	text-decoration: none;
	transition: 0.3s;
}

a:hover {
	color: color-mix(in srgb, var(--accent-color), transparent 85%);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--heading-color);
	font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
	--background-color: rgba(0, 0, 0, 0.8);
	--heading-color: rgba(0, 0, 0, 0.8);
	--contrast-color: #ffffff;
	color: var(--default-color);
	background-color: rgba(0, 0, 0, 0.8);
	padding: 10px 0;
	transition: all 0.5s;
	z-index: 997;
}

.header .logo {
	line-height: 1;
}

.header .logo img {
	max-height: 60px;
	margin-right: 8px;
}

.header .logo h1 {
	font-size: 32px;
	margin: 0;
	font-weight: 700;
	color: var(--heading-color);
}

.header .logo span {
	color: var(--accent-color);
	font-size: 32px;
}

.header .btn-getstarted, .header .btn-getstarted:focus {
	color: var(--accent-color);
	font-size: 14px;
	padding: 8px 30px;
	margin: 0 0 0 30px;
	border-radius: 4px;
	transition: 0.3s;
	border: 2px solid var(--accent-color);
}

.header .btn-getstarted:hover, .header .btn-getstarted:focus:hover {
	color: var(--default-color);
	background: var(--accent-color);
}

@media ( max-width : 1200px) {
	.header .logo {
		order: 1;
	}
	.header .btn-getstarted {
		order: 2;
		margin: 0 15px 0 0;
		padding: 6px 15px;
	}
	.header .navmenu {
		order: 3;
	}
}

.scrolled .header {
	box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color),
		transparent 100%);
}

/* Index Page Header
------------------------------*/
.index-page .header {
	--background-color: rgba(0, 0, 0, 0);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
	--background-color: rgba(0, 0, 0, 0.8);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media ( min-width : 1200px) {
	.navmenu {
		padding: 0;
	}
	.navmenu ul {
		margin: 0;
		padding: 0;
		display: flex;
		list-style: none;
		align-items: center;
	}
	.navmenu li {
		position: relative;
	}
	.navmenu a, .navmenu a:focus {
		color: var(--nav-color);
		padding: 18px 15px;
		font-size: 16px;
		font-family: var(--nav-font);
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap;
		transition: 0.3s;
	}
	.navmenu a i, .navmenu a:focus i {
		font-size: 12px;
		line-height: 0;
		margin-left: 5px;
		transition: 0.3s;
	}
	.navmenu li:last-child a {
		padding-right: 0;
	}
	.navmenu li:hover>a, .navmenu .active, .navmenu .active:focus {
		color: var(--nav-hover-color);
	}
	.navmenu .dropdown ul {
		margin: 0;
		padding: 10px 0;
		background: var(--nav-dropdown-background-color);
		display: block;
		position: absolute;
		visibility: hidden;
		left: 14px;
		top: 130%;
		opacity: 0;
		transition: 0.3s;
		border-radius: 0;
		z-index: 99;
		box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
		color:tranparent;
		
	}
	.navmenu .dropdown ul li {
		min-width: 200px;
	}
	.navmenu .dropdown ul a {
		padding: 10px 20px;
		font-size: 15px;
		text-transform: none;
		color: var(--nav-dropdown-color);
	}
	.navmenu .dropdown ul a i {
		font-size: 12px;
	}
	.navmenu .dropdown ul a:hover, .navmenu .dropdown ul .active:hover,
		.navmenu .dropdown ul li:hover>a {
		background-color: var(--nav-dropdown-hover-color);
	}
	.navmenu .dropdown:hover>ul {
		opacity: 1;
		top: 100%;
		visibility: visible;
	}
	.navmenu .dropdown .dropdown ul {
		top: 0;
		left: -90%;
		visibility: hidden;
	}
	.navmenu .dropdown .dropdown:hover>ul {
		opacity: 1;
		top: 0;
		left: -100%;
		visibility: visible;
	}
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 400px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color),
			transparent 90%);
			color:tranparent;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), white 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: color-mix(in srgb, var(--accent-color), white 90%);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    background-color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}
@media (max-width: 767px) {
.navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 10px 10px 100px;
    color:tranparent;
}
	
}

.header .btn-getstarted {
	width: 30%;
	text-align: center; /* 버튼 텍스트 중앙 정렬 */
	display: inline-block; /* a 태그를 inline-block으로 설정 */
	padding: 10px; /* 버튼의 내부 여백 */
	box-sizing: border-box; /* 패딩 포함하여 크기 계산 */
	margin: 20px;
	
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
	--background-color: var(--footer-background-color);
	--default-color: #ffffff;
	--heading-color: #ffffff;
	color: var(--default-color);
	background-color: var(--background-color);
	font-size: 14px;
	position: relative;
}

.footer .footer-top {
	padding: 35px 0;
	background-color: color-mix(in srgb, var(--footer-background-color) 90%,
		white 10%);
}

.footer .footer-about .logo {
	line-height: 1;
	margin-bottom: 10px;
	margin-right: 50px;
}

.footer .footer-about .logo img {
	max-height: 150px;
	padding-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

.footer .footer-about .logo span {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 1px;
	font-family: var(--heading-font);
	color: var(--heading-color);
}

.footer .footer-about p {
	font-size: 14px;
	font-family: var(--heading-font);
}

.footer .social-links a {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	background-color: color-mix(in srgb, var(--default-color) 5%, white 10%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	font-size: 16px;
	margin-right: 10px;
	transition: 0.3s;
}

.footer .social-links a:hover {
	color: var(--contrast-color);
	background-color: var(--accent-color);
}

.footer h4 {
	font-size: 16px;
	position: relative;
	padding-bottom: 12px;
}

.footer .footer-links {
	margin-bottom: 30px;
	position: relative;
}

.footer .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer .footer-links ul i {
	margin-right: 4px;
	font-size: 12px;
	line-height: 0;
	color: var(--accent-color);
}

.footer .footer-links ul li {
	padding: 10px 0;
	display: flex;
	align-items: center;
}

.footer .footer-links ul li:first-child {
	padding-top: 0;
}

.footer .footer-links ul a {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	display: inline-block;
	line-height: 1;
}

.footer .footer-links ul a:hover {
	color: var(--accent-color);
}

.footer .footer-contact p {
	margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
	margin-top: 30px;
	padding: 6px 8px;
	position: relative;
	border-radius: 4px;
	border: 1px solid color-mix(in srgb, var(--default-color), transparent
		80%);
	display: flex;
	background-color: color-mix(in srgb, var(--footer-background-color) 90%,
		white 15%);
	transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
	border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
	border: 0;
	padding: 4px;
	width: 100%;
	background-color: color-mix(in srgb, var(--footer-background-color) 90%,
		white 15%);
	color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible
	{
	outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
	border: 0;
	font-size: 16px;
	padding: 0 20px;
	margin: -7px -8px -7px 0;
	background: var(--accent-color);
	color: var(--contrast-color);
	transition: 0.3s;
	border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
	background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
	display: none;
	background: #df1529;
	color: #ffffff;
	text-align: left;
	padding: 15px;
	margin-top: 10px;
	font-weight: 600;
	border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
	display: none;
	color: #ffffff;
	background: #059652;
	text-align: center;
	padding: 15px;
	margin-top: 10px;
	font-weight: 600;
	border-radius: 4px;
}

.footer .footer-newsletter .loading {
	display: none;
	background: var(--background-color);
	text-align: center;
	padding: 15px;
	margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
	content: "";
	display: inline-block;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	margin: 0 10px -6px 0;
	border: 3px solid var(--accent-color);
	border-top-color: var(--background-color);
	animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.footer .copyright {
	padding: 5px 0;
	color: #ffffff62;
}

.footer .copyright p {
	margin-bottom: 0;
}

.footer .credits {
	margin-top: 2px;
	font-size: 13px;
}

.footer .footer-open {
	margin-bottom: 0px;
	position: relative;
}

.footer .footer-open a {
	font-weight: bold;
}

.footer .footer-contact {
	color: #a2a2a2
}

@media ( max-width : 1023px) {
	.footer .footer-about {
		width: 100%;
		margin-bottom: 10px;
	}
	.footer .footer-links {
		width: 100%;
		font-size: 0.8rem; /* 글자 크기를 줄입니다. 필요에 따라 조정 */
		box-sizing: border-box; /* 패딩과 테두리가 요소의 전체 너비를 차지하도록 합니다 */
		margin-bottom: 0px;
		
	}
	.footer .footer-links .footer-contact p {
		margin-bottom: 10px; /* 각 항목 간의 간격을 조정합니다. 필요에 따라 조정 */
	}
	.footer .footer-links .pt-3 {
		padding-top: 0px !important;
	}
	.footer .footer-about .logo img {
		max-height: 130px;
		padding-top: 5px;
		margin-right: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}
	.footer .footer-top {
		padding: 15px 0;
	}
	.footer .footer-contact p {
            line-height: 1.2; /* 행 간격 줄이기 */
            margin-bottom: 0.5rem; /* 항목 사이의 간격 줄이기 */
        }
	}
/*--------------------------------------------------------------
# footer Privacy Section
--------------------------------------------------------------*/
.modal-dialog {
    max-width: 60%;
    width: auto;
}

.modal-content {
	color: var(--contrast-color);
}

.modal-title {
	color: black;
	font-size: 1.5rem; /* 기본 폰트 사이즈 설정 */
	white-space: nowrap; /* 줄 바꿈 방지 */
	overflow: hidden; /* 넘치는 부분 숨김 */
	text-overflow: ellipsis; /* 넘치는 경우 생략 부호 (...) 표시 */
}
.modal-body img {
            width: 100%;
            height: auto;
            display: block;
        }


@media ( max-width : 767px) {
.modal-dialog {
    max-width: 80%;
    width: auto;
    margin: auto; /* 수평 중앙 정렬 유지 */
}
.modal-title {
        font-size: 4vw; /* 초기 폰트 사이즈 설정 */
        white-space: nowrap; /* 줄 바꿈 방지 */
        overflow: hidden; /* 넘치는 부분 숨김 */
        text-overflow: ellipsis; /* 넘치는 경우 생략 부호 (...) 표시 */
        max-width: 90%; /* 타이틀이 너무 길어지지 않도록 최대 너비 설정 */
}

}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: hidden;
	background: #000;
	transition: all 0.6s ease-out;
}

#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid #ffffff;
	border-color: var(--accent-color) transparent var(--accent-color)
		transparent;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
	background-color: var(--accent-color);
	width: 40px;
	height: 40px;
	border-radius: 4px;
	transition: all 0.4s;
}

.scroll-top i {
	font-size: 24px;
	color: var(--contrast-color);
	line-height: 0;
}

.scroll-top:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent
		20%);
	color: var(--contrast-color);
}

.scroll-top.active {
	visibility: visible;
	opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	[data-aos-delay] {
		transition-delay: 0 !important;
	}
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
	color: var(--default-color);
	background-color: var(--background-color);
	position: relative;
}

.page-title .heading {
	padding: 60px 0;
	border-top: 1px solid color-mix(in srgb, var(--default-color),
		transparent 90%);
}

.page-title .heading h1 {
	font-size: 38px;
	font-weight: 700;
}

.page-title nav {
	background-color: color-mix(in srgb, var(--default-color), transparent
		95%);
	padding: 20px 0;
}

.page-title nav ol {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 16px;
	font-weight: 400;
}

.page-title nav ol li+li {
	padding-left: 10px;
}

.page-title nav ol li+li::before {
	content: "/";
	display: inline-block;
	padding-right: 10px;
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section, .section {
	color: var(--default-color);
	background-color: var(--background-color);
	padding: 40px 0;
	scroll-margin-top: 80px;
	overflow: clip;
}

@media ( max-width : 1199px) {
	section, .section {
		scroll-margin-top: 58px;
	}
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
	padding-bottom: 40px;
	position: relative;
}

.section-title h2 {
	font-size: 14px;
	font-weight: 500;
	padding: 0;
	line-height: 1px;
	margin: 0;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--default-color), transparent 50%);
	position: relative;
}

.section-title h2::after {
	content: "";
	width: 120px;
	height: 1px;
	display: inline-block;
	background: var(--accent-color);
	margin: 4px 10px;
}

.section-title p {
	color: var(--heading-color);
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	text-transform: uppercase;
}
@media (max-width: 767px) {
	.section-title {
	padding-bottom: 20px;
	}
	
.section-title h2 {
	font-size: 13px;
	}
	.section-title p {
	font-size: 30px;
	}
	
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
	--default-color: #ffffff;
	--background-color: #000000;
	--heading-color: #ffffff;
	width: 100%;
	min-height: 70vh;
	position: relative;
	padding: 100px 0 80px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.hero:before {
	content: "";
	background: color-mix(in srgb, var(--background-color), transparent 30%);
	position: absolute;
	inset: 0;
	z-index: 2;
}

.hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero .row {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center; /* Center align text */
	flex-wrap: wrap; /* 아이템이 중앙에서 넘칠 때 줄 바꿈 */
}
  .icon-box-container .col-xl-2 {
    display: flex;
    justify-content: center;
  }

.hero .col-xl-6, .col-lg-8 {
	flex: 0 1 auto;
	max-width: 100%; /* Ensure columns do not overflow their container */
	box-sizing: border-box;
	/* Include padding and border in element's total width and height */
}

.hero h2 {
	margin-top: 10vmax;
	font-size: 3em;
	white-space: nowrap;
}

.hero h2 span {
	color: var(--accent-color);
}

.hero p {
	margin: 15px 0 5vmax 0;
	font-size: 24px;
	color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.mt-5 {
	margin-bottom: 5vmax;
}

.hero .icon-box-container {
    display: flex;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 (필요 시) */
    flex-wrap: wrap; /* 필요 시 줄 바꿈 */
    width: 100%; /* 부모 컨테이너의 가로 너비를 전체로 설정 */
}

.hero .icon-box {
	padding: 30px 20px;
	transition: ease-in-out 0.3s;
	border: 1px solid color-mix(in srgb, var(--accent-color), transparent
		30%);
	height: 100%;
	text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* 수평 중앙 정렬 */
    justify-content: center; /* 수직 중앙 정렬 */
    
    box-sizing: border-box;
    text-align: center; /* 내부 텍스트 중앙 정렬 */
}

.hero .icon-box i {
	font-size: 32px;
	line-height: 1;
	color: var(--accent-color);
}

.hero .icon-box h3 {
	font-weight: 700;
	margin: 10px 0 0 0;
	padding: 0;
	line-height: 1;
	font-size: 20px;
	line-height: 26px;
}

.hero .icon-box h3 a {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	transition: ease-in-out 0.3s;
}

.hero .icon-box:hover {
	border-color: var(--accent-color);
}

.hero .icon-box:hover h3 a {
	color: var(--accent-color);
}

.hero .icon-box-container {
	margin-top: 3rem;
}
/* hero - Mobile */
/* Mobile version adjustments */
@media (max-width: 1199px) {
	.hero {
		padding: 80px 0 60px 0; /* Adjust padding for smaller screens */
		min-height: 50vh; /* Reduce min-height on smaller screens */
				
	}
	.hero h2 {
		font-size: 2em; /* Reduce font size for headings */
	
		margin-bottom: 2rem;
		margin-top: 5rem;
		text-align: center; /* Ensure heading text is centered */
	}

	.hero p {
		font-size: 1.2rem;
		margin: 10px 0 3vmax 0;
		text-align: center; /* Ensure heading text is centered */
	}
	.hero .icon-box-container {
		display: flex;
		justify-content: center; /* 수평 중앙 정렬 */
		align-items: center; /* 수직 중앙 정렬 (필요 시) */
		flex-wrap: wrap; /* 필요 시 줄 바꿈 */
		width: 100%; /* 부모 컨테이너의 가로 너비를 전체로 설정 */
	}
	.hero .icon-box {
		padding: 20px 10px; /* Adjust padding for icon boxes */
		width: 100%; /* Ensure icon boxes take full width */
		max-width: 300px; /* Optional: limit max width for better layout */
		text-align : center; 
		display : flex; 
		flex-direction : column;
		box-sizing: border-box; /* Include padding in width */
		align-items: center; /* 수평 중앙 정렬 */
		justify-content: center; /* 수직 중앙 정렬 */
	}
	.hero .icon-box i {
		font-size: 24px; /* Reduce font size for icons */
	}

	.hero .icon-box h3 {
		font-size: 18px; /* Adjust font size for headings in icon boxes */
		text-align: center; /* Ensure icon box headings are centered */
	}
}

@media (max-width: 767px) {
	.hero {
		padding: 60px 0 40px 0;  /* Further adjust padding for very small screens */
		min-height: 40vh; /* Further reduce min-height */
	}

	.hero h2 {
		font-size: 1.5em; /* Further reduce font size for headings */
		font-size: 1.7rem;
		margin-bottom: 2rem;
		margin-top: 5rem;
	}

	.hero p {
		font-size: 1.2rem;
		margin-bottom: 4rem;
	}

	.hero .icon-box {
		padding: 15px 5px; /* Further adjust padding for icon boxes */
	}

	.hero .icon-box i {
		font-size: 20px; /* Further reduce font size for icons */
	}

	.hero .icon-box h3 {
		font-size: 16px; /* Further adjust font size for headings in icon boxes */
	}
	
	.hero .icon-box-container {
	margin-top: 1.5rem;
}
}


/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
	padding-top: 70px;
}

.about .content h3 {
	font-size: 2.00rem;
	font-weight: 700;
	padding-left: 20px;
}

.about .content .fst-italic {
	color: color-mix(in srgb, var(--default-color), var(--contrast-color)
		50%);
}

.about .content ul {
	list-style: none;
	padding-left: 10px;
}

.about .content ul li {
	padding: 20px 0 0 0;
	display: flex;
}

.about .content ul i {
	color: var(--accent-color);
	margin-right: 0.5rem;
	line-height: 1.2;
	font-size: 1.25rem;
}

.about .content p:last-child {
	margin-bottom: 0;
}
@media (max-width: 767px) {
	.about .content h3 {
	font-size: 1.70rem;
	font-weight: 700;
	padding-left: 20px;
}
	
}
/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
	opacity: 0.5;
	transition: 0.3s;
	filter: grayscale(100);
}

.clients .swiper-slide img:hover {
	filter: none;
	opacity: 1;
}

.clients .swiper-wrapper {
	height: auto;
}

.clients .swiper-pagination {
	margin-top: 20px;
	position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	opacity: 1;
	background-color: color-mix(in srgb, var(--default-color), transparent
		80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features .features-image  {
	display: flex;
	justify-content: center; /* 가로 중앙 정렬 (옵션) */
	align-items: center; /* 세로 중앙 정렬 */
	
}

.features .features-image img {
	position: relative;
	inset: 0;
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	z-index: 1;
}

.features .features-item h4 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 5px 0;
}

.features .features-item i {
	font-size: 48px;
	color: var(--accent-color);
	margin-right: 20px;
	line-height: 0;
}

.features .features-item p {
	font-size: 15px;
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	margin: 0;
}
@media (max-width: 767px) {
	.features .features-item h4 {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 5px 0;
}
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
	text-align: center;
	border: 1px solid color-mix(in srgb, #b0d6f5, transparent
		10%);
	padding: 80px 20px;
	height: 100%;
	transition: all ease-in-out 0.3s;
}

.services .service-item .icon {
	background: #b0d6f5;
	color: var(--contrast-color);
	margin: 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	transition: 0.3s;
}

.services .service-item .icon i {
	font-size: 28px;
	transition: ease-in-out 0.3s;
}

.services .service-item h3 {
	font-weight: 700;
	margin: 10px 0 15px 0;
	font-size: 22px;
	transition: 0.3s;
}

.services .service-item p {
	line-height: 24px;
	font-size: 14px;
	margin-bottom: 0;
}

.services .service-item:hover {
	box-shadow: 0px 0 25px 0 color-mix(in srgb, var(--default-color),
		transparent 70%);
	transform: translateY(-10px);
}
@media (max-width: 1199px) {
	.services .service-item {
	text-align: center;
	border: 1px solid color-mix(in srgb, #b0d6f5, transparent
		10%);
	padding: 40px 20px;
	height: 100%;
	transition: all ease-in-out 0.3s;
}
}
@media (max-width: 767px) {
.services .service-item {
	margin : 0px 30px 0px 30px;
}
	
}
/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
	--background-color: #000000;
	--default-color: #ffffff;
	--contrast-color: #ffffff;
	padding: 80px 0;
	position: relative;
	clip-path: inset(0);
}

.call-to-action img {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.call-to-action:before {
	content: "";
	background: color-mix(in srgb, var(--background-color), transparent 50%);
	position: absolute;
	inset: 0;
	z-index: 2;
}

.call-to-action .container {
	position: relative;
	z-index: 3;
}

.call-to-action h3 {
	font-size: 28px;
	font-weight: 700;
	color: var(--default-color);
}

.call-to-action p {
	color: var(--default-color);
}

.call-to-action .cta-btn {
	font-family: var(--heading-font);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 1px;
	display: inline-block;
	padding: 12px 40px;
	border-radius: 5px;
	transition: 0.5s;
	margin: 10px;
	border: 2px solid var(--contrast-color);
	color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
	background: var(--accent-color);
	color: var(--background-color);
	border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
	padding: 0;
	margin: 0 auto 20px auto;
	list-style: none;
	text-align: center;
}

.portfolio .portfolio-filters li {
	cursor: pointer;
	display: inline-block;
	padding: 8px 20px 10px 20px;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	margin-bottom: 5px;
	border-radius: 4px;
	transition: all 0.3s ease-in-out;
	font-family: var(--heading-font);
}

.portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active
	{
	color: var(--contrast-color);
	background-color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
	margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
	margin-right: 0;
}

@media ( max-width : 575px) {
	.portfolio .portfolio-filters li {
		font-size: 14px;
		margin: 0 0 10px 0;
	}
}

.portfolio .portfolio-item {
	position: relative;
	overflow: hidden;
}

.portfolio .portfolio-item .portfolio-info {
	opacity: 0;
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -100%;
	z-index: 3;
	transition: all ease-in-out 0.5s;
	background: color-mix(in srgb, var(--background-color), transparent 10%);
	padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
	font-size: 18px;
	font-weight: 600;
	padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	font-size: 14px;
	margin-bottom: 0;
	padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link, .portfolio .portfolio-item .portfolio-info .details-link
	{
	position: absolute;
	right: 50px;
	font-size: 24px;
	top: calc(50% - 14px);
	color: color-mix(in srgb, var(--default-color), transparent 30%);
	transition: 0.3s;
	line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
	.portfolio .portfolio-item .portfolio-info .details-link:hover {
	color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
	right: 14px;
	font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
	opacity: 1;
	bottom: 0;
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
	padding: 10px;
}

.stats .stats-item i {
	font-size: 44px;
	color: var(--accent-color);
	line-height: 0;
	margin-right: 15px;
}

.stats .stats-item .purecounter {
	color: var(--heading-color);
	font-size: 40px;
	display: block;
	font-weight: 700;
	line-height: 40px;
}

.stats .stats-item p {
	color: color-mix(in srgb, var(--default-color), transparent 40%);
	padding: 15px 0 0 0;
	margin: 0;
	font-family: var(--heading-font);
	font-size: 14px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
	--default-color: #ffffff;
	--background-color: #000000;
	--heading-color: #ffffff;
	padding: 80px 0;
	position: relative;
}

.testimonials:before {
	content: "";
	background: color-mix(in srgb, var(--background-color), transparent 30%);
	position: absolute;
	inset: 0;
	z-index: 2;
}

.testimonials .testimonials-bg {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.testimonials .container {
	position: relative;
	z-index: 3;
}

.testimonials .testimonials-carousel, .testimonials .testimonials-slider
	{
	overflow: hidden;
}

.testimonials .testimonial-item {
	text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
	width: 100px;
	border-radius: 50%;
	border: 6px solid color-mix(in srgb, var(--default-color), transparent
		85%);
	margin: 0 auto;
}

.testimonials .testimonial-item h3 {
	font-size: 20px;
	font-weight: bold;
	margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
	font-size: 14px;
	margin: 0 0 15px 0;
	color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.testimonials .testimonial-item .stars {
	margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
	color: #ffc107;
	margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right
	{
	color: color-mix(in srgb, var(--default-color), transparent 40%);
	font-size: 26px;
	line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
	display: inline-block;
	left: -5px;
	position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
	display: inline-block;
	right: -5px;
	position: relative;
	top: 10px;
	transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
	font-style: italic;
	margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
	height: auto;
}

.testimonials .swiper-pagination {
	margin-top: 20px;
	position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background-color: color-mix(in srgb, var(--default-color), transparent
		50%);
	opacity: 0.5;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
	background-color: var(--default-color);
	opacity: 1;
}

@media ( min-width : 992px) {
	.testimonials .testimonial-item p {
		width: 80%;
	}
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
	overflow: hidden;
	border-radius: 5px;
	box-shadow: 0px 2px 15px color-mix(in srgb, var(--default-color),
		transparent 90%);
	height: 100%;
}

.team .team-member .member-img {
	position: relative;
	overflow: hidden;
}

.team .team-member .social {
	position: absolute;
	left: 0;
	bottom: 30px;
	right: 0;
	opacity: 0;
	transition: ease-in-out 0.3s;
	text-align: center;
}

.team .team-member .social a {
	background: color-mix(in srgb, var(--background-color), transparent 25%);
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	margin: 0 3px;
	border-radius: 4px;
	width: 36px;
	height: 36px;
	transition: ease-in-out 0.3s;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.team .team-member .social a:hover {
	color: var(--contrast-color);
	background: var(--accent-color);
}

.team .team-member .social i {
	font-size: 18px;
	line-height: 0;
}

.team .team-member .member-info {
	padding: 25px 15px;
}

.team .team-member .member-info h4 {
	font-weight: 700;
	margin-bottom: 5px;
	font-size: 18px;
}

.team .team-member .member-info span {
	display: block;
	font-size: 13px;
	font-weight: 400;
	color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .team-member:hover .social {
	opacity: 1;
	bottom: 15px;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
	margin-bottom: 100px;
}

.contact .info-item+.info-item {
	margin-top: 50px;
}

.contact .info-item i {
	color: var(--contrast-color);
	background: var(--accent-color);
	font-size: 20px;
	width: 44px;
	height: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	transition: all 0.3s ease-in-out;
	margin-right: 15px;
}

.contact .info-item h3 {
	padding: 0;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 5px;
}

.contact .info-item p {
	padding: 0;
	margin-bottom: 0;
	font-size: 14px;
}

.contact .php-email-form {
	height: 100%;
}

.contact .php-email-form .error-message {
	display: none;
	background: #df1529;
	color: #ffffff;
	text-align: left;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.contact .php-email-form .sent-message {
	display: none;
	color: #ffffff;
	background: #059652;
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.contact .php-email-form .loading {
	display: none;
	background: var(--background-color);
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
	content: "";
	display: inline-block;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	margin: 0 10px -6px 0;
	border: 3px solid var(--accent-color);
	border-top-color: var(--background-color);
	animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text], .contact .php-email-form input[type=email],
	.contact .php-email-form textarea {
	font-size: 14px;
	padding: 10px 15px;
	box-shadow: none;
	border-radius: 0;
	color: var(--default-color);
	background-color: color-mix(in srgb, var(--background-color),
		transparent 50%);
	border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus, .contact .php-email-form input[type=email]:focus,
	.contact .php-email-form textarea:focus {
	border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder, .contact .php-email-form input[type=email]::placeholder,
	.contact .php-email-form textarea::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
	color: var(--contrast-color);
	background: var(--accent-color);
	border: 0;
	padding: 10px 30px;
	transition: 0.4s;
	border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
	background: color-mix(in srgb, var(--accent-color) 90%, white 20%);
}

@keyframes animate-loading {
	0% {
	transform: rotate(0deg);
}


 100% {
 transform: rotate(360deg);
}
}

/*다운로드박스*/
.contact .catalog {
	margin-top: 50px;
	padding-left: 20px;
}

.contact .service-box {
	padding: 20px;
	box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color),
		transparent 88%);
}

.contact .service-box+.service-box {
	margin-top: 30px;
}

.contact .service-box h4 {
	font-size: 20px;
	font-weight: 700;
	border-bottom: 2px solid color-mix(in srgb, var(--default-color),
		transparent 92%);
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.contact .download-catalog a {
	color: var(--default-color);
	display: flex;
	align-items: center;
	padding: 10px 0;
	transition: 0.3s;
	border-top: 1px solid color-mix(in srgb, var(--default-color),
		transparent 90%);
}

.contact .download-catalog a:first-child {
	border-top: 0;
	padding-top: 0;
}

.contact .download-catalog a:last-child {
	padding-bottom: 0;
}

.contact .download-catalog a i {
	font-size: 24px;
	margin-right: 8px;
	color: var(--accent-color);
}

.contact .download-catalog a:hover {
	color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
	width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
	margin-top: 20px;
	position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet
	{
	width: 12px;
	height: 12px;
	background-color: color-mix(in srgb, var(--default-color), transparent
		85%);
	opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active
	{
	background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
	padding: 30px;
	box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color),
		transparent 90%);
}

.portfolio-details .portfolio-info h3 {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--default-color),
		transparent 85%);
}

.portfolio-details .portfolio-info ul {
	list-style: none;
	padding: 0;
	font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
	margin-top: 10px;
}

.portfolio-details .portfolio-description {
	padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
	padding: 0;
	color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Detail Section
--------------------------------------------------------------*/
/*Feature 제목*/
.service-detail .service-details h4 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 5px 0;
}
/*문의 form*/
.service-detail  .php-email-form {
	height: 100%;
}

.service-detail  .php-email-form .error-message {
	display: none;
	background: #df1529;
	color: #ffffff;
	text-align: left;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.service-detail  .php-email-form .sent-message {
	display: none;
	color: #ffffff;
	background: #059652;
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
	font-weight: 600;
}

.service-detail  .php-email-form .loading {
	display: none;
	background: var(--background-color);
	text-align: center;
	padding: 15px;
	margin-bottom: 24px;
}

.service-detail  .php-email-form .loading:before {
	content: "";
	display: inline-block;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	margin: 0 10px -6px 0;
	border: 3px solid var(--accent-color);
	border-top-color: var(--background-color);
	animation: animate-loading 1s linear infinite;
}

.service-detail  .php-email-form input[type=text], .service-detail  .php-email-form input[type=email],
	.service-detail  .php-email-form textarea {
	font-size: 14px;
	padding: 10px 15px;
	box-shadow: none;
	border-radius: 0;
	color: var(--default-color);
	background-color: color-mix(in srgb, var(--background-color),
		transparent 50%);
	border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.service-detail  .php-email-form input[type=text]:focus, .service-detail  .php-email-form input[type=email]:focus,
	.service-detail  .php-email-form textarea:focus {
	border-color: var(--accent-color);
}

.service-detail  .php-email-form input[type=text]::placeholder,
	.service-detail  .php-email-form input[type=email]::placeholder,
	.service-detail  .php-email-form textarea::placeholder {
	color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.service-detail  .php-email-form button[type=submit] {
	color: var(--contrast-color);
	background: var(--accent-color);
	border: 0;
	padding: 10px 30px;
	transition: 0.4s;
	border-radius: 4px;
}

.service-detail  .php-email-form button[type=submit]:hover {
	background: color-mix(in srgb, var(--accent-color) 90%, white 20%);
}

@keyframes animate-loading { 
	0% {
	transform: rotate(0deg);
}


 100% {
 transform: rotate(360deg);
}
}
.service-detail.section img {
	width: 40%;
	position: relative;
	margin-left: 20px;
	position: relative;
}

.service-detail.section h3 {
	color: #3f3f3f;
}

.service-call.container {
	position: relative;
	z-index: 3;
	
}

.service-Industry.title {
	margin-bottom: 40px;
}

.service-industry span {
	font-size: 1.2rem;
}

.service-call {
	margin-top: 5rem;
	margin-bottom: 10rem;
}

.service-call .content {
	padding-top: 2rem;
}

.service-call strong {
	font-size: 0.8rem;
}

.service-call .help-box {
	background-color: #65c2f5;
    width: 100%; /* 컨텐츠 폭 맞춤 */
    text-align: center;
    padding: 20px; /* 적당한 내부 여백 */  
    justify-content: center;
   
}

.service-call .container .row{
	display: flex;
    align-items: stretch; /* 자식 요소들을 동일한 높이로 설정 */
}
.service-call .col-lg-3, .service-call .col-md-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.service-call img {
    max-width: 100%;
    height: auto; /* 이미지의 비율 유지 */
    flex-grow: 1; /* 컨테이너의 남은 공간 채우기 */
    object-fit: cover; /* 이미지 비율을 유지하면서 컨테이너에 맞춤 */
}

/*원문*/
.service-detail .service-box {
	padding: 20px;
	box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color),
		transparent 88%);
}

.service-detail .service-box+.service-box {
	margin-top: 30px;
}

.service-detail .service-box h4 {
	font-size: 20px;
	font-weight: 700;
	border-bottom: 2px solid color-mix(in srgb, var(--default-color),
		transparent 92%);
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.service-detail .services-list a {
	color: color-mix(in srgb, var(--default-color), transparent 20%);
	background-color: color-mix(in srgb, var(--default-color), transparent
		96%);
	display: flex;
	align-items: center;
	padding: 12px 15px;
	margin-top: 15px;
	transition: 0.3s;
}

.service-detail .services-list a:first-child {
	margin-top: 0;
}

.service-detail .services-list a i {
	font-size: 16px;
	margin-right: 8px;
	color: var(--accent-color);
}

.service-detail .services-list a.active {
	color: var(--contrast-color);
	background-color: var(--accent-color);
}

.service-detail .services-list a.active i {
	color: var(--contrast-color);
}

.service-detail.services-list a:hover {
	background-color: color-mix(in srgb, var(--accent-color), transparent
		95%);
	color: var(--accent-color);
}

.service-detail .download-catalog a {
	color: var(--default-color);
	display: flex;
	align-items: center;
	padding: 10px 0;
	transition: 0.3s;
	border-top: 1px solid color-mix(in srgb, var(--default-color),
		transparent 90%);
}

.service-detail .download-catalog a:first-child {
	border-top: 0;
	padding-top: 0;
}

.service-detail .download-catalog a:last-child {
	padding-bottom: 0;
}

.service-detail .download-catalog a i {
	font-size: 24px;
	margin-right: 8px;
	color: var(--accent-color);
}

.service-detail .download-catalog a:hover {
	color: var(--accent-color);
}

.service-call-area {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* 자식 요소들이 동일한 높이를 가짐 */
    flex-wrap: wrap; /* 화면이 작아질 때 줄바꿈을 허용 */
    margin: 0 -15px; /* 기존 컨테이너의 패딩과 동일한 마진 적용 */
}

.service-call .row > .col-lg-3, .service-call .row > .col-md-6 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1; /* 남은 공간을 채우도록 설정 */
}

.service-call .help-box, 
.service-call .help-box-img {
     flex-grow: 1; /* 남은 공간을 채우도록 설정 */
    display: flex;
    align-items: center; /* 가운데 정렬 */
    justify-content: center; /* 가운데 정렬 */
    min-height: 100%; /* 높이를 100%로 설정하여 동일한 높이 유지 */
}
.service-call .help-box {
	background-color:  #65c2f5;
	color: var(--contrast-color);
	padding: 15px 15px;
	box-sizing: border-box;
}

.service-call .help-box .help-icon {
	font-size: 48px;
}

.service-call .help-box h4, .service-call .help-box a {
	color: var(--contrast-color);
}

.service-call .help-box-img img {
    width: 100%; /* 가로 폭을 맞추기 위해 */
    height: 100%; /* 높이를 맞추기 위해 */
    object-fit: cover; /* 이미지 비율 유지하면서 크기 조정 */
}

.service-detail .services-img {
	margin-bottom: 20px;
}


.service-detail h3 {

	font-weight: 700;
	display: inline-block;
    margin-right: 5px; /* 제목과 다음 텍스트 사이의 간격을 조정 */
    font-size: 1.5em; /* 글자 크기 조정 */
}
.service-detail span {
	 white-space: normal; /* span 요소는 줄바꿈 허용 */
}


.service-detail ul {
	list-style: none;
	padding: 0;
	font-size: 15px;
}

.service-detail ul li {
	padding: 6px 0;
	display: block;

}
.service-detail ul li h3 {
    display: inline; /* h3를 인라인 요소로 설정 */
    margin-right: 0.5px; /* h3와 다음 텍스트 사이의 간격 */
    font-size: 1.5em; /* h3 글자 크기 조정 */
}
.service-detail ul li span {
    display: inline; /* 이어지는 span 텍스트를 같은 줄에 배치 */
    white-space: normal; /* 줄바꿈 허용 */
    word-break: break-word; 
}

.service-detail ul i {
	font-size: 20px;
	margin-right: 8px;
	color: var(--accent-color);
}
.service-process .service-process-img{
	display: flex;
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center;     /* 세로 중앙 정렬 (필요시 사용) */
    text-align: center;      /* 텍스트 중앙 정렬 */
    width: 100%; 
    height: auto;            /* 컨테이너가 이미지에 맞게 늘어남 */
    overflow: hidden;        /* 불필요한 넘침을 방지 */ 
}
.service-process.service-process-img img {
    max-width: 100%;         /* 이미지가 컨테이너의 너비를 초과하지 않도록 */
    height: auto;            /* 이미지 비율 유지 */
    display: block;          /* 인라인 간격 제거 */
}

.service-process.section-title {
	padding-bottom: 4px;
}

.service-industry .carousel {
	display: grid;
	place-items: center;
}

.service-industry.section img {
	width: 80%;
	position: relative;
}
/* 캐러셀 항목과 인디케이터 사이의 간격 설정 */
.carousel-item {
    margin-bottom: 30px; /* 인디케이터와의 간격 설정 */
}
.carousel-indicators {
	margin-bottom: 0;
}
.carousel-item img {
    width: 100%;
    height: auto;
}

/* 화살표 버튼 스타일 */
.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto; /* 필요한 경우, 버튼의 너비를 조정 */
    background: none;
    border: none;
    z-index: 10;
    outline: none;
    padding: 0;
    font-size: 2rem;
}

/* 버튼과 이미지 사이에 간격 추가 */
.carousel-control-prev {
    left: -3%; /* 버튼을 이미지 바깥쪽으로 이동 */
}

.carousel-control-next {
    right: -3%; /* 버튼을 이미지 바깥쪽으로 이동 */
}

/* 화살표 아이콘 스타일 조정 */
.carousel-control-prev-icon, .carousel-control-next-icon {
	width: 30px;
	height: 30px;
	background-size: 100%, 100%;
}

.service-industry .carousel-inner-text {
	margin-bottom: 30px;
	overflow: hidden; /* 텍스트가 요소를 벗어나지 않도록 설정 */
	text-align: center; /* 텍스트 가운데 정렬 */
}

/* 텍스트가 한 줄로 유지되도록 설정 */
.carousel-inner-text h5 {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0; /* 여백 제거 */
}

/* 텍스트 크기를 자동 조정 */
.carousel-inner-text span {
	display: block;
	font-size: calc(0.7vw + 0.7vh + 0.5vmin); /* 기본 크기 설정 */
	max-width: 100%; /* 부모 요소의 최대 너비에 맞춤 */
	line-height: 1.2; /* 줄 높이 조정 */
	white-space: nowrap; /* 텍스트를 한 줄로 유지 */
	overflow: hidden; /* 넘치는 부분 숨기기 */
	text-overflow: ellipsis; /* 텍스트가 넘칠 때 생략 기호 표시 */
}
/* 모바일 스타일 - 작은 화면에서의 크기 조정 */
@media ( max-width : 767px) {
	.service-detail.section img {
	width: 60%;

}
	.carousel-item {
		padding: 0 15px; /* 좌우 여백 추가 */
	}
	  .carousel-inner-text {
        margin-bottom: 10px;
    }

    .carousel-inner-text span {
        font-size: calc(0.8vw + 0.8vh); /* 모바일 화면에 맞춰 폰트 크기 조정 */
        max-height: 1.2em; /* 한 줄로 유지되도록 최대 높이 설정 */
        line-height: 1.2; /* 줄 높이 조정 */
    }
	.carousel-item img {
		width: 100%;
		height: auto;
		max-height: 400px; /* 최대 높이 제한 - 필요에 따라 조정 가능 */
	}
	.carousel-control-prev, .carousel-control-next {
		display: block; /* 캐러셀 제어 버튼 보이게 */
		width: 10%; /* 버튼 크기 증가 */
	}
	.carousel-control-prev-icon, .carousel-control-next-icon {
		width: 100%; /* 아이콘 크기 조정 */
		height: 100%;
	}
	.carousel-indicators {
		bottom: 10px; /* 인디케이터 위치 조정 */
	}
	.service-industry .carousel-inner-text {
		margin-bottom: 10px;
	}
	/* 버튼과 이미지 사이에 간격 추가 */
	.carousel-control-prev {
		left: -2%; /* 버튼을 이미지 바깥쪽으로 이동 */
	}
	.carousel-control-next {
		right: -2%; /* 버튼을 이미지 바깥쪽으로 이동 */
	}

	/* 화살표 아이콘 스타일 조정 */
	.carousel-control-prev-icon, .carousel-control-next-icon {
		width: 20px;
		height: 20px;
		background-size: 100%, 100%;
	}
	.service-call .service-call-area {
	display: flex;
    flex-direction: row;
    align-items: center; /* 자식 요소들을 수직 중앙 정렬 */
    justify-content: center; /* 자식 요소들을 가로 중앙 정렬 */
    flex-wrap: wrap; /* 화면이 작아질 때 줄바꿈을 허용 */
    margin: 0 -15px; /* 기존 컨테이너의 패딩과 동일한 마진 적용 */
	}
	.service-call .service-call-area h5 {
		font-size: 16px;
		
	}
	.service-call  {
		margin-top: 3rem;
		margin-bottom: 3rem;
	}
	.service-call .help-box, .service-call .help-box-img {
		width: 80%; /* 부모 컨테이너 너비의 80%로 크기 조정 */
		max-width: 80%; /* 최대 너비 제한 */
		margin-bottom: 15px; /* 요소 간의 하단 여백 */
		display: flex;
		align-items: center; /* 중앙 정렬 */
		justify-content: center; /* 중앙 정렬 */
	}
	.service-call .help-box-img img {
		width: 100%;
		height: auto;
		object-fit: contain; /* 이미지 비율 유지 */
	}
	.service-call .row>.col-lg-3, .service-call .row>.col-md-6 {
		display: flex;
		flex-direction: column;
		justify-content: center; /* 자식 요소들을 수직 중앙 정렬 */
		align-items: center; /* 자식 요소들을 가로 중앙 정렬 */
		flex-grow: 1; /* 남은 공간을 채우도록 설정 */
	}
	.service-call .col-lg-3.col-md-6 {
		display: flex;
		justify-content: center; /* 가로 방향 중앙 정렬 */
	}
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
	/* Add your styles here */
	
}

/*--------------------------------------------------------------
# login Sectiorgb(142, 230, 217), 226, 206)--------------------------------------------------------------*/
.login .php-email-form button[type=submit]:hover {
	background: color-mix(in srgb, var(--accent-color) 90%, white 20%);
}

.login .page-title .heading {
	padding-bottom: 20px;
}

.login .col-lg-8 {
	margin: 40px;
}

.login .btn {
	
	border: 0;
	padding: 10px 0px;
	transition: 0.4s;
	border-radius: 4px;
	width:100%;
    box-sizing: border-box; /* padding과 border를 너비에 포함 */
    min-width: 100px;
    max-width: 240px;
}

.login .inputID
{
	color:var(--accent-color);
	font-weight: bold;
}
.login .inputpw
{
	color:var(--accent-color);
	font-weight: bold;
}

.login {
    display: flex;
    flex-direction: column;
    justify-content: center; /* 세로 중앙 정렬 */
	align-items: center; /* 가로 중앙 정렬 */
    height: 70vh; /* 화면 높이의 80%만큼 높이 설정 */
}
.login .custom-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; /* 버튼 간 간격 설정 */
	justify-content: center; /* 중앙 정렬 */
	width: 100%; /* 전체 너비를 채우도록 설정 */
  }
  .login .custom-cols .custom-col {
	flex: 1 1 calc(50% - 10px); /* 2개 버튼씩 한 줄에 배치되도록 설정 */
	max-width: 240px; /* 최대 너비 설정 */
	display: flex; /* flexbox를 사용하여 버튼 정렬 */
	justify-content: center; /* 중앙 정렬 */
	margin-bottom: 10px; /* 버튼 간 하단 여백 설정 */
  }
  
@media (max-width: 767px) {
.login{
	margin-top: 5vh; /* 화면 높이의 10%만큼 상단 마진 설정 */
    margin-bottom: 0vh; /* 화면 높이의 10%만큼 하단 마진 설정 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 세로 중앙 정렬 */
    height: 70vh; /* 화면 높이의 80%만큼 높이 설정 */
}
.login .btn {
	margin-top: 10px;
	margin-right: 10px;
	border: 0;
	padding: 10px 10px;
	transition: 0.4s;
	border-radius: 4px;
	width:11rem;
	min-width: 40px;
	font-size: 12px;	
	max-width: none; /* 모바일에서는 최대 너비 제한 해제 */
    width: 100%; /* 모바일에서 버튼이 그리드 너비를 가득 채우도록 */
}
.login .custom-cols .custom-col.col-lg-6 {
    width: calc(50% - 10px); /* col의 너비를 50%에서 약간 줄여서 간격을 줄임 */
    margin-left: 5px; /* col 사이의 간격을 균일하게 조정 */
    margin-right: 5px; /* col 사이의 간격을 균일하게 조정 */
  }
}	
/*--------------------------------------------------------------
# Join Section
--------------------------------------------------------------*/
.join .submitbtn {
	margin-bottom: 100px;
}

.join .form-label {
	margin-right: 50px;
}
/*--------------------------------------------------------------
# Board Section
--------------------------------------------------------------*/
.Boarding .tag {
	align-self: flex-start;
	padding: .2em .6em;
	border-radius: 1em;
	font-size: .7rem;
	margin: 0.5px;
}

.Boarding .tag+.tag {
	margin-left: .1em;
}

.Boarding .tag-blue {
	background: #56CCF2;
	background: linear-gradient(to bottom, #2F80ED, #56CCF2);
	color: #fafafa;
}

.Boarding .tag-brown {
	background: #4FC0D0;
	background: linear-gradient(to bottom, #4FC0D0, #0B666A);
	color: #fafafa;
}

.Boarding .tag-red {
	background: #cb2d3e;
	background: linear-gradient(to bottom, #ef473a, #cb2d3e);
	color: #fafafa;
}

.Boarding .bbsID {
	color: #444444;
	font-size: smaller;
}

.Boarding.btn {
	align-self: flex-start;
	padding: .25em .75em;
	border-radius: 0.5em;
	font-size: 1rem;
	margin: 3px;
}

.Boarding .btn-gray {
	background: #4444446b;
	color: white;
}

.Boarding .btn-ac {
	background: black;
	color: white;
	margin-bottom: 20px;
}

.Boarding btn-outline-secondary {
	font-size: smaller;
}

.Boarding .btn-white {
	background: transparent;
	color: rgb(63, 61, 61);
	border: 1px solid #44444473;
	font-size: 12px;
	padding: 6px 10px;
}
.Boarding .card-mid {
	display: flex;
	flex-direction: row; /* 카드 중간 부분의 내용이 수평으로 정렬되도록 설정 */
	justify-content: space-between; /* 태그와 버튼을 양 끝으로 정렬 */
	align-items: center; /* 수직 정렬을 중앙으로 설정 */
}

.Boarding .card-mid .btn {
	align-self: flex-end; /* 버튼을 카드 중간 부분의 오른쪽에 정렬 */
}


/* 모바일 화면에서만 적용 */
@media (max-width: 767px) {
	.Boarding .row>.col-lg-3.col-md-4 {
		display: none; /* 기본적으로 모든 게시글 숨기기 */
	}
	.Boarding .row>.col-lg-3.col-md-4:nth-child(-n+4) {
		display: block; /* 첫 5개의 게시글만 보이도록 설정 */
	}
	.Boarding .card-container {
	margin-top:1em;
	}
	.Boarding .card-body{
		padding : 0.5em 1em 0.5em 1em;
	}
	.Boarding .card-footer{
		padding : 0.2em 1em 0.2em 1em ;
	}
	.Boarding .card-text{
		margin : 0;
	}
	.Boarding .card-title h5 {
		font-size :1rem;
	}
}

.Board {
    margin-top: 40px;
}

.Board .board-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 50px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.Board .board-table th,
.Board .board-table td {
    padding: 10px;
    border-right: 1px solid #cccccc;
    background-color: rgba(255, 255, 255, 0.2);
    color: #212a3e;
}

.Board .board-table thead th {
    background-color: #044c9b;
    color: #ffffff;
}

.Board .board-table tbody tr:hover {
    background-color: #279eff60;
}

.Board .board-table td {
    position: relative;
}

.Board .board-table td:hover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -9999px;
    bottom: -9999px;
    background-color: #279eff80;
    z-index: -1;
}

.Board .btn-getstarted, .Board .btn-getstarted:focus {
    color: #071952;
    background: #00a9ff50;
    font-size: 14px;
    padding: 8px 30px;
    border-radius: 4px;
    transition: 0.3s;
    border: 2px solid var(--accent-color);
}

.Board .btn-getstarted:hover, .Board .btn-getstarted:focus:hover {
    color: var(--default-color);
    background: var(--accent-color);
}

.Board .container form {
    display: flex;
    flex-wrap: nowrap; /* 요소들이 줄 바꿈 없이 한 행에 배치되도록 설정 */
    gap: 10px; /* 요소들 사이에 간격 추가 */
}

.Board.pagination-container {
	text-align: center;
	margin: 20px 0;
}

.Board .pagination-link {
	display: inline-block;
	padding: 10px 15px;
	margin: 0 5px;
	text-decoration: none;
	color: #0056b3; /* Text color */
	background-color: #FFF; /* Background color for links */
	border-radius: 0px; /* Rounded corners */
	transition: background-color 0.3s, color 0.3s;
}

.Board   .pagination-link:hover {
	background-color: #0056b3; /* Darker background on hover */
	color: #fff; /* Text color on hover */
}

.Board   .pagination-link.active {
	background-color: #0056b3; /* Active link background */
	color: #fff; /* Active link text color */
	cursor: default; /* No cursor pointer */
	font-weight: bold;
}

/* 모바일에서 열 숨기기 */
@media (max-width: 767px) {
	.Board {
		margin-top: 10px;
	}
	.Board .container form {
		display: flex;
		flex-wrap: nowrap; /* 요소들이 줄 바꿈 없이 한 행에 배치되도록 설정 */
		gap: 2px; /* 요소들 사이에 간격 추가 */
	}
	.Board .container .form-select, .Board .container .form-control {
		font-size: 0.7em;
	}
	.Board .text-end {
		font-size: 13px;
		color: var(--default-color);
		margin-top: 5px;
	}
	.Board .board-table th:nth-child(3), .Board .board-table th:nth-child(4)
		{
		display: none;
	}
	.Board .board-table td:nth-child(3), .Board .board-table td:nth-child(4)
		{
		display: none;
	}
	.Board .board-table th, .Board .board-table td {
		padding: 5px;
		font-size: 12px;
	}
	.Board .board-table td:nth-child(1) {
		width: 10%; /* No 열 너비 */
	}
	.Board .board-table td:nth-child(2) {
		width: 40%; /* No 열 너비 */
	}
	.Board .board-table td:nth-child(3) {
		width: 30%; /* No 열 너비 */
		font-size: 10px;
	}
	.Board .board-table td:nth-child(4) {
		width: 20%; /* No 열 너비 */
		font-style: italic;
	}
	.Board .pagination-link, .Board  .btn-getstarted {
		font-size: 12px; /* 버튼 글자 크기 줄이기 */
		padding: 5px 5px; /* 버튼 패딩 줄이기 */
		margin: 2px; /* 버튼 간격 줄이기 */
	}
	.Board .btn-outline-info {
		font-size: 12px; /* 버튼 글자 크기 줄이기 */
		padding: 5px 5px; /* 버튼 패딩 줄이기 */
		margin: 2px; /* 버튼 간격 줄이기 */
	}
	.Board .btn-outline-secondary {
		font-size: 12px; /* 버튼 글자 크기 줄이기 */
		padding: 5px 5px; /* 버튼 패딩 줄이기 */
		margin: 2px; /* 버튼 간격 줄이기 */
	}
	.Board .col-auto {
            display: flex;
            align-items: center;
            gap: 2px; /* 버튼과 아이콘 간의 간격 조정 */
        }
	
}

/*--------------------------------------------------------------
# recruit Section
--------------------------------------------------------------*/
.recruit .recruit-box {
	padding: 10px;
}

.recruit-outtro img {
	width: 100%;
	height: auto;
}

.recruit .responsive-table {
	width: 100%;
	margin-bottom: 1.5em;
	border-collapse: collapse;
}

.recruit .recruit-intro {
	margin-bottom: 2em;
}

.recruit-intro h5 {
	margin-top: 20px;
}

.recruit-outtro {
	padding-top: 0px;
	padding-bottom: 40px;
}


@media (max-width: 767px) {

	.recruit h1{
	font-size:26px;
	}
	.recruit h5{
	font-size:16px;
	}
	.recruit .recruit-box2 {
	display: none;
}

.recruit-outtro img {
	width: 100%;
	height: auto;
}
	
}


.recruit .responsive-table p {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.recruit .responsive-table thead {
	position: absolute;
	clip: rect(1px, 1px, 1px, 1px);
	/* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.recruit .responsive-table thead th {
	background-color: rgba(96, 188, 231, 80);
	padding-left: 20px;
	font-weight: normal;
	text-align: center;
	color: white;
}

.recruit .responsive-table thead th:first-of-type {
	text-align: left;
}

.recruit .responsive-table tbody, .recruit .responsive-table tr, .recruit .responsive-table th,
	.responsive-table td {
	display: block;
	padding: 0;
	text-align: left;
	white-space: normal;
}

.recruit .responsive-table th, .recruit .responsive-table td {
	padding: .5em;
	vertical-align: middle;
}

.recruit .responsive-table caption {
	margin-bottom: 1em;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
}

.recruit .responsive-table tfoot {
	font-size: .8em;
	font-style: italic;
}

.recruit .responsive-table tbody tr {
	margin-bottom: 1em;
	border: 2px solid #ffffff;
}

.recruit .responsive-table tbody tr:last-of-type {
	margin-bottom: 0;
}

.recruit .responsive-table tbody th[scope="row"] {
	background-color: #60BCE7;
	color: #ffffff;
	width: 100%;
	padding-left: 0.5em;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

.recruit .responsive-table tbody td[data-type=currency] {
	text-align: left;
	background-color: #EDEBEB60;
}

.recruit .responsive-table tbody td[data-title]:before {
	float: left;
	font-size: .8em;
	color: rgba(94, 93, 82, 0.75);
	background-color: #EDEBEB60;
}

.recruit .responsive-table tbody td {
	text-align: left;
	border-right: 1px solid #ffffff;
	padding-left: 40px;
	background-color: #EDEBEB60;
}

.recruit .responsive-table span {
	color: #60BCE7;
}

@media ( min-width : 52em) {
	.recruit .responsive-table {
		font-size: .9em;
	}
	.recruit .responsive-table thead {
		position: relative;
		clip: auto;
		height: auto;
		width: auto;
		overflow: auto;
	}
	.recruit .responsive-table tr {
		display: table-row;
		padding-left: .5em;
	}
	.recruit .responsive-table th, .recruit .responsive-table td {
		display: table-cell;
		padding: .5em;
		color: #5e5d52;
	}
	.recruit .responsive-table caption {
		font-size: 1.5em;
	}
	.recruit .responsive-table tbody {
		display: table-row-group;
	}
	.recruit .responsive-table tbody tr {
		display: table-row;
		border-width: 1px;
		padding-left: 0.5em;
	}
	.recruit .responsive-table tbody tr:nth-of-type(even) {
		background-color: #EDEBEB00;
	}
	.recruit .responsive-table tbody th[scope="row"] {
		background-color: #EDEBEB60;
		color: #095C98;
		font-size: 0.98em;
		font-weight: 400;
		padding-left: 20px;
		width: 25%;
		border-left: 7px solid #60BCE7;
		border-right: 0.5px solid rgba(94, 93, 82, 0.3);
		border-top: 1px solid #ffffff;
		border-bottom: 0.5em solid #ffffff;
	}
	.recruit .responsive-table tbody td {
		text-align: left;
		padding-left: 0.5em;
		border-right: 1px solid #ffffff;
		background-color: #EDEBEB60;
		border-bottom: 0.5em solid #ffffff;
	}
	.recruit .responsive-table tbody td[data-title]:before {
		content: none;
	}
}

@media ( min-width : 62em) {
	.recruit .responsive-table {
		font-size: 1em;
	}
	.recruit .responsive-table th, .recruit .responsive-table td {
		padding: .75em .5em;
		padding-left: 0.5em;
	}
	.recruit .responsive-table tfoot {
		font-size: .9em;
	}
}

@media ( min-width : 75em) {
	.recruit .responsive-table th, .recruit .responsive-table td {
		padding-left: 0.5em;
		padding: .75em;
	}
}

/*--------------------------------------------------------------
# Client-call Section
--------------------------------------------------------------*/
.help-box {
	background-color: var(--accent-color);
	color: var(--contrast-color);
	padding: 15px 15px;
}

/*--------------------------------------------------------------
# Write Section
--------------------------------------------------------------*/
.write {
	margin-bottom: 60px;
}

.write .section-title {
	padding-bottom: 10px;
}

.write .btn-getstarted button[type=submit] {
	color: var(--contrast-color);
	background: var(--accent-color);
	border: 0;
	padding: 10px 30px;
	transition: 0.4s;
	border-radius: 4px;
}

.write .btn-getstarted, .write3 .btn-getstarted:focus {
	color: #071952;
	background: #00A9FF50;
	font-size: 14px;
	padding: 8px 30px;
	margin: 0 0 0 0px;
	border-radius: 4px;
	transition: 0.3s;
	border: 2px solid var(--accent-color);
}

.write .btn-getstarted:hover, .write3 .btn-getstarted:focus:hover {
	color: var(--default-color);
	background: var(--accent-color);
}
	.write .bbsContent{
	height: 700px; 
}

@media (max-width: 767px) {
	.write .breadcrumbs {
        display: none;
    }

	.write h5{
	font-size :0.9em;
	}
    .write .btn-getstarted, 
    .write .btn-getstarted:focus {
        font-size: 12px; /* 모바일 화면에서 글씨 크기 조정 */
        padding: 6px 20px; /* 모바일 화면에서 패딩 조정 */
        min-width: 80px; /* 최소 너비 설정 */
        
    }
     .btn-group, 
    .btn-group-vertical {
        font-size: 12px; /* 모바일 화면에서 글씨 크기 조정 */
        padding: 4px; /* 모바일 화면에서 패딩 조정 */
    }
	.btn-group .btn, .btn-group-vertical .btn {
		padding: 6px 12px; /* 모바일 화면에서 버튼 패딩 조정 */
		font-size: 12px; /* 모바일 화면에서 버튼 글씨 크기 조정 */
	}
	
	.write .btn-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
	.write .form-select,
	.write .form-control{
	font-size:0.9em;
	}
	
	.write .bbsContent{
	height: 70vw; 
}
}

/*--------------------------------------------------------------
# Update Section
--------------------------------------------------------------*/
.Update {
	margin-bottom: 60px;
}

.Update .btn-getstarted, .Update .btn-getstarted:focus {
	color: #071952;
	background: #00A9FF50;
	font-size: 14px;
	padding: 8px 30px;
	margin: 0 0 0 0px;
	border-radius: 4px;
	transition: 0.3s;
	border: 2px solid var(--accent-color);
}

.Update .btn-getstarted:hover, .Update .btn-getstarted:focus:hover {
	color: var(--default-color);
	background: var(--accent-color);
}
.Update .bbsContent{
	height: 700px; 
}

.custom-checkbox {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 16px;
}

.custom-checkbox input[type="checkbox"] {
	display: none; /* 기본 체크박스 숨기기 */
}

.custom-checkbox input[type="checkbox"]:checked+.checkmark {
	background-color: #007bff;
}

/* 체크박스 체크되지 않은 상태에서 "삭제" 문구 */
.custom-checkbox input[type="checkbox"]:not(:checked)+.checkmark::before
	{
	content: "삭제"; /* 체크 기호 대신 "삭제"라는 문구 */
	color: #007bff; /* 텍스트 색상 */
	background-color: transperent; /* 배경 색상 */
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px; /* 폰트 크기 */
	text-align: center;
}

.custom-checkbox input[type="checkbox"]:checked+.checkmark::after {
	content: "✔"; /* FontAwesome 체크 기호 */
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	color: #fff;
	width: 20px;
	height: 20px;
	background-color: #007bff;
	border-radius: 4px;
	margin-right: 8px;
	position: relative;
}

@media (max-width: 767px) {
	.Update .breadcrumbs {
        display: none;
    }
	.Update h5{
	font-size :0.9em;
	}
    .Update .btn-getstarted, 
    .Update .btn-getstarted:focus {
        font-size: 12px; /* 모바일 화면에서 글씨 크기 조정 */
        padding: 6px 20px; /* 모바일 화면에서 패딩 조정 */
        min-width: 80px; /* 최소 너비 설정 */
        
    }
     .btn-group, 
    .btn-group-vertical {
        font-size: 12px; /* 모바일 화면에서 글씨 크기 조정 */
        padding: 4px; /* 모바일 화면에서 패딩 조정 */
    }
	.btn-group .btn, .btn-group-vertical .btn {
		padding: 6px 12px; /* 모바일 화면에서 버튼 패딩 조정 */
		font-size: 12px; /* 모바일 화면에서 버튼 글씨 크기 조정 */
	}
	
	.Update .btn-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
	.Update .form-select,
	.Update .form-control{
	font-size:0.9em;
	}
	
	.Update .bbsContent{
	height: 70vw; 
}
}

/*--------------------------------------------------------------
# view Section
--------------------------------------------------------------*/
.view {
	margin-bottom: 60px;
}

.view .section-title {
	padding-bottom: 10px;
}
.view .bbsContent{
	height: 700px; 
}

.view .btn-getstarted, .view .btn-getstarted:focus {
	color: #071952;
	background: #00A9FF50;
	font-size: 14px;
	padding: 8px 30px;
	margin: 0 0 0 0px;
	border-radius: 4px;
	transition: 0.3s;
	border: 2px solid var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.view .btn-getstarted:hover, .view .btn-getstarted:focus:hover {
	color: var(--default-color);
	background: var(--accent-color);
}

.view .fileareatext {
	height: auto;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	background-clip: padding-box;
	background-color: #44444480;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	text-align: center;
}

.view .filearea {
	height: auto;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bs-body-color);
	background-clip: padding-box;
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
}

.file-list {
	margin-top: 20px;
}

.file-item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	padding: 10px;
	border: var(--bs-border-width) solid transparent;
	border-radius: var(--bs-border-radius);
	background-color: #cfcfcf30;
	padding: 10px;
}

.file-item i {
	margin-right: 10px;
	color: #007bff;
}

.file-item a {
	color: #007bff;
	text-decoration: none;
}

.file-item a:hover {
	text-decoration: underline;
}

.file-item span {
	margin-left: 10px;
	color: #6c6c6c;
	font-size: smaller;
}

.file-list-ul {
	padding: 0px;
}

@media (max-width: 767px) {
	.view .breadcrumbs {
        display: none;
    }

	.view h5{
	font-size :0.9em;
	}
    .view .btn-getstarted, 
    .view .btn-getstarted:focus {
        font-size: 12px; /* 모바일 화면에서 글씨 크기 조정 */
        padding: 6px 20px; /* 모바일 화면에서 패딩 조정 */
        min-width: 80px; /* 최소 너비 설정 */
        
    }
     .btn-group, 
    .btn-group-vertical {
        font-size: 12px; /* 모바일 화면에서 글씨 크기 조정 */
        padding: 4px; /* 모바일 화면에서 패딩 조정 */
    }
	.btn-group .btn, .btn-group-vertical .btn {
		padding: 6px 12px; /* 모바일 화면에서 버튼 패딩 조정 */
		font-size: 12px; /* 모바일 화면에서 버튼 글씨 크기 조정 */
	}
	
	.view .btn-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
	.view .form-select, 
	.view .form-control {
		font-size: 0.9em;
	}
	.view .bbsContent{
	height: 70vw; 
	
	}