:root {
  --main-color: #00787B;
	--main-color-BG: rgba(0,120,123,1);
	
  --arete-second-color: #d8df50;
  --arete-second-bg: rgba(221,225,0,1);
	
  --arete-third-color: #00398a;
  --arete-third-bg: rgba(0,57,138,0.05);
}

.text-main {
	color: var(--main-color);
}

.text-second {
	color: var(--arete-second-color);
}

.text-third {
	color: var(--arete-third-color);
}

.bg-main {background: var(--main-color) !important; color: #fff !important;}
.bg-second {background: var(--arete-second-color) !important;}
.bg-third {background: var(--arete-third-color) !important; color: #fff !important;}

.btn {text-decoration: none !important;}

a {
  color: var(--main-color);
	text-decoration: none;
	font-size: inherit !important;
}

a:hover {
	text-decoration: underline;
}

.secondA a {padding-bottom: 8px; border-bottom: 2px solid var(--arete-second-color);}
.secondA a:link {color:#444 !important; text-decoration:none !important;}
.secondA a:visited {color:#444 !important; text-decoration:none !important;}
.secondA a:active {color:#444 !important; text-decoration:none !important;}
.secondA a:hover {color:var(--arete-second-color) !important; text-decoration:none !important;}

.mainA a {padding-bottom: 8px; border-bottom: 2px solid var(--main-color);}
.mainA a:link {color:#444 !important; text-decoration:none !important;}
.mainA a:visited {color:#444 !important; text-decoration:none !important;}
.mainA a:active {color:#444 !important; text-decoration:none !important;}
.mainA a:hover {color:var(--main-color) !important; text-decoration:none !important;}

.frontImgP {text-align: center;}
.frontImg {width: 100%; border-radius: 10px; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);}

.photoCopy {font-size: 0.7rem; color: #999; padding: 3px;}

.border-radius-5 {border-radius: 5px;}
.border-radius-7 {border-radius: 7px;}
.border-radius-10 {border-radius: 10px;}

.no-list-style {list-style: none;}
.line-height-normal {line-height: normal;}

.lang-selector {
	border: 1px solid #eee;
	border-radius: 20px;
	padding: 2px 12px;
	background: #fdfdfd;
	font-size: 0.85rem;
}

.lang-selector .nav-link {
	padding: 0 4px !important;
	color: #999 !important;
}

.lang-selector .nav-link.active {
	color: var(--main-color) !important;
	font-weight: bold;
}

.lang-selector .nav-link:hover {
	background-color: transparent !important;
	text-decoration: underline;
}


.history {padding-top: 20px;}
.historyYear {font-size: 1.2rem; color:var(--main-color); text-align: right;}
.subEn {color: #999;}
.history li {margin-bottom: 10px;}

.teamDiv {text-align: center; margin-bottom: 100px;}

.teamPhoto-container {
	width: 150px; /* 원하는 정사각형의 크기를 지정하세요 */
	height: 150px;
	overflow: hidden;
	border-radius: 50%; /* 정사각형을 원으로 만들기 위해 반지름을 50%로 지정합니다 */
	margin: 0 auto;
	margin-bottom: 20px;
}

.teamPhoto {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 이미지를 상자에 맞게 자르되 비율 유지 */
	border-radius: 50%; /* 이미지를 원으로 만들기 위해 반지름을 50%로 지정합니다 */
	border: 1px solid #ddd;
}

.termsForm p {color: #666}
.termsForm h3 {padding-bottom: 30px; padding-top: 30px;}
.termsForm h4 {padding-top: 10px;}
.termsForm h5 {padding-top: 10px;}


#cookieConsent {
	background-color: #777;
	display: none;
	box-shadow: 0px -5px 10px rgba(0, 0, 0, 0.1);
	color: #fff;
	border-radius: 0;
	padding: 30px 20px;
}

/**** details ***/

.carousel-image {
  background-size: cover;
  background-position: center center !important;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* set this value to maintain the desired aspect ratio (e.g., 4:3 = 75%, 16:9 = 56.25%) */
}

.carousel-inner {height: 300px;}


.googlemap {
	width: 100%;
	height: 300px;
	border: 1px solid #ddd;
	padding: 5px;
}


.sangdamForm {
	max-width: 800px;
	margin: 0 auto;
	padding: 30px 10px;
}

.sangdam-customer h6 {
	padding-bottom: 15px;
	font-size: 1.05rem;
}

.terms {
	max-height: 150px;
	overflow-y: scroll;
	border: 1px solid #ddd;
	padding: 10px;
	font-size: 0.7rem;
}


/* 스크롤바의 전체 스타일을 설정 */
.terms::-webkit-scrollbar {
  width: 10px; /* 스크롤바의 너비를 조절 */
}

/* 스크롤바의 트랙 스타일을 설정 */
.terms::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 스크롤바 트랙의 배경색을 설정 */
}

/* 스크롤바의 썸머 스타일을 설정 */
.terms::-webkit-scrollbar-thumb {
  background-color: #888; /* 스크롤바 썸머의 배경색을 설정 */
  border-radius: 5px; /* 스크롤바 썸머의 모서리를 둥글게 설정 */
}

/* 스크롤바를 호버했을 때의 썸머 스타일을 설정 */
.terms::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* 스크롤바 썸머의 호버 배경색을 설정 */
}



/**********************/

footer {
	background: #f9f9f9;
	border-top: 1px solid #ddd;
	padding: 30px 15px !important;
	color: #666;
	font-size: 0.75rem !important;	
}


.footerLinks {
	padding-left: 0;
	margin: 0;
}

.footerLinks li {
	display: inline;
	margin: 0 10px;
	list-style: none;
}

.footerLinks a {
  color: inherit;
}

.footerLinks a:hover {
  color: var(--main-color);
	text-decoration: none;
}

/********/


.btn-front {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--main-color);
  --bs-btn-border-color: var(--main-color);
  --bs-btn-hover-color: var(--main-color);
  --bs-btn-hover-bg: var(--arete-second-color);
  --bs-btn-hover-border-color: var(--arete-second-color);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--main-color);
  --bs-btn-active-bg: var(--arete-second-color);
  --bs-btn-active-border-color: var(--arete-second-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--main-color);
  --bs-btn-disabled-bg: #999;
  --bs-btn-disabled-border-color: #999;
}

.btn-front2 {
  --bs-btn-color: var(--main-color);
  --bs-btn-bg: var(--arete-second-color);
  --bs-btn-border-color: var(--arete-second-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--main-color);
  --bs-btn-hover-border-color: var(--main-color);
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: var(--main-color);
  --bs-btn-active-bg: var(--main-color);
  --bs-btn-active-border-color: var(--main-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--arete-second-color);
  --bs-btn-disabled-bg: #999;
  --bs-btn-disabled-border-color: #999;
}

.btn-outline-front {
  --bs-btn-color: var(--main-color);
  --bs-btn-border-color: var(--main-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--main-color);
  --bs-btn-hover-border-color: var(--main-color);
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--main-color);
  --bs-btn-active-border-color: var(--main-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--main-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--main-color);
  --bs-gradient: none;
}

.pagination {
  --bs-pagination-color: #999;
  --bs-pagination-hover-color: #000;
  --bs-pagination-active-bg: var(--main-color);
  --bs-pagination-active-border-color: var(--main-color);
}



/****************/




/*PC*/

@media (min-width: 768px) {
	.frontTitle1 {font-size: 1.5rem; padding-bottom: 10px; line-height: 2.1rem;}
	.frontTitle2 {font-size: 2.4rem; padding-bottom: 30px; line-height: 130%; line-height: 2.4rem;}
	
	.procuctCard-height {height: 300px;}
	
	.frontCate-l {justify-content: flex-end;}
	.frontCate-r {justify-content: flex-start;}
	
	.no-list-style-pc {list-style: none;}

}

/*Mobile*/
@media (max-width: 768px) {
	.frontTitle1 {font-size: 1.6rem; padding-bottom: 10px; line-height: 2.0rem; letter-spacing: -0.05em;}
	.frontTitle2 {font-size: 2.4rem; padding-bottom: 30px; line-height: 2.4rem;}
	
	.procuctCard-height {height: 230px;}
	
	.historyYear {text-align: left;}
}