/* --------------------

2번째로 호출

이 파일은 각 프로젝트에 따라 변경이 있는 유동적인 개별 css 입니다.
해당 프로젝트에만 쓰일 색상, 폰트, padding값 등 기본적인것은 이곳에 작성해 주세요.

기본값으로 설정된것은

font-family: 'Pretendard';
color: #1c1c1c;
line-height: 100%;
font-weight: normal;
font-size: 16px;
line-height: 100%;
letter-spacing: -0.05em;

입니다.

해당 프로젝트에 관련된 변경사항이 있을때는 reset.css대신
현재 파일인 styleguide.css에 작성해주세요.

-------------------- */

/* --------------------

z-index 현황




-------------------- */
html{font-size: 10px;}
*{
	font-family: 'SUIT';
	letter-spacing: 0;
}
body{
	font-size: 18px;
	color: #1c1c1c;
	font-weight: 400;
}
.center{
	width: 90%;
	max-width: 1400px;
	margin: 0 auto;
}
.center1200{
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.center1000{
width: 90%;
max-width: 1000px;
margin: 0 auto;
}
.center500{
width: 90%;
max-width: 500px;
margin: 0 auto;
}
.center1640{
	width: 90%;
	max-width: 1640px;
	margin: 0 auto;
}
::placeholder{color: #999;}
select{color: #5d5d5d;}



/* ---------------커스텀 클래스 START--------------- */
/* ------------------------------------------------------------------------------------------
.ctm :  small, em, i, b, strong, u 등 에디터 사용시 글자 관련 스타일 미적용 방지를 위하여 따로 작성함.
			html, php에 위 태그들을 style 초기화해서 사용 할 경우 ctm 속성 추가해서 사용.

			※꼭! 에디터로 작성된 내용이 안들어가는 객체에만 사용하세요.
			(ex. view 페이지 내용 출력 부분에는 사용 X)
------------------------------------------------------------------------------------------ */
.ctm{
	font-weight: inherit;
	font-family: inherit;
	color: inherit;
	font-style: inherit;
	text-decoration: none;
	font-size: inherit;
}
.clearfix::after{
	content: "";
	clear: both;
	display: block;
}
.hidden{
	position: fixed;
	left: -100000px;
}
.clear{clear: both;}
.pe-none{pointer-events: none;}
.drag-none{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
.scroll-none{overflow: hidden;}
.tal{text-align: left;}
.tar{text-align: right;}
.tac{text-align: center;}
.test-section{height: 2000px; background-color: yellowgreen;}
@media screen and (max-width:600px){
	.mxw600-none{display: none;}
}
/* ---------------커스텀 클래스 END--------------- */



/* ---------------폰트 관련 START--------------- */
@font-face {
		font-family: 'SUIT';
		font-weight: 100;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-Thin.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 200;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-ExtraLight.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 300;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-Light.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 400;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-Regular.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 500;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-Medium.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 600;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-SemiBold.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 700;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-Bold.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 800;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-ExtraBold.woff2) format('woff2');
}

@font-face {
		font-family: 'SUIT';
		font-weight: 900;
		font-style: normal;
		src: url(/assets/fonts/SUIT/SUIT-Heavy.woff2) format('woff2');
}

.kr, .kr-all *{font-family: 'SUIT';}
.fw100{font-weight: 100;}
.fw200{font-weight: 200;}
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}
.fw700{font-weight: 700;}
.fw800{font-weight: 800;}
.fw900{font-weight: 900;}

.fsz50{font-size: 50px;}
.fsz40{font-size: 40px;}
.fsz35{font-size: 35px;}
.fsz30{font-size: 30px;}
.fsz28{font-size: 28px;}
.fsz26{font-size: 26px;}
.fsz20{font-size: 20px;}
.fsz18{font-size: 18px;}
.fsz16{font-size: 16px;}
.fsz15{font-size: 15px;}
.fsz14{font-size: 14px;}
.fsz12{font-size: 12px;}
@media screen and (max-width:1350px){
		.fsz50{font-size: 45px;}
		.fsz40{font-size: 36px;}
		.fsz35{font-size: 32px;}
		.fsz30{font-size: 28px;}
		.fsz28{font-size: 26px;}
		.fsz26{font-size: 24px;}
		.fsz20{font-size: 19px;}
		.fsz18{font-size: 17px;}
}
@media screen and (max-width:1150px){
		.fsz50{font-size: 40px;}
		.fsz40{font-size: 32px;}
		.fsz35{font-size: 29px;}
		.fsz30{font-size: 26px;}
		.fsz28{font-size: 24px;}
		.fsz26{font-size: 22px;}
		.fsz20{font-size: 18px;}
		.fsz18{font-size: 16px;}
		.fsz16{font-size: 15px;}
		.fsz15{font-size: 14px;}
		.fsz14{font-size: 13px;}
		.fsz12{font-size: 11px;}
}
@media screen and (max-width:600px){
		.fsz50{font-size: 35px;}
		.fsz40{font-size: 29px;}
		.fsz35{font-size: 27px;}
		.fsz30{font-size: 24px;}
		.fsz28{font-size: 22px;}
		.fsz26{font-size: 20px;}
		.fsz20{font-size: 17px;}
		.fsz18{font-size: 15px;}
		.fsz16{font-size: 14px;}
		.fsz15{font-size: 13px;}
		.fsz14{font-size: 12px;}
}
@media screen and (max-width:450px){
		.fsz50{font-size: 30px;}
		.fsz40{font-size: 26px;}
		.fsz35{font-size: 24px;}
		.fsz30{font-size: 22px;}
		.fsz28{font-size: 20px;}
		.fsz26{font-size: 18px;}
		.fsz20{font-size: 16px;}
		.fsz18{font-size: 14px;}
		.fsz16{font-size: 13px;}
		.fsz15{font-size: 12px;}
		.fsz14{font-size: 11px;}
		.fsz12{font-size: 10px;}
}
/* ---------------폰트 관련 END--------------- */



/* ---------------color 관련 START--------------- */
.bgc1{background-color: #4ef7ee;}
.bgc2{background-color: #0ba29a;}
.bgc3{background-color: #08706b;}
.bgc4{background-color: #122a88;}
.bgc5{background-color: #0084a0;}

.bgcw{background-color: #FFF;}

.bgc-b1{background-color: #1c1c1c;}
.bgc-b2{background-color: #2c2c2c;}
.bgc-b3{background-color: #3b3b3b;}
.bgc-b4{background-color: #404040;}
.bgc-b5{background-color: #505050;}
.bgc-b6{background-color: #606060;}
.bgc-b7{background-color: #707070;}

.bgc-g1{background-color: #f8f8f8;}
.bgc-g2{background-color: #c5c5c5;}
.bgc-g3{background-color: #aaa;}
.bgc-g4{background-color: #bbb;}
.bgc-g5{background-color: #ccc;}
.bgc-g6{background-color: #7f7f7f;}
.bgc-g7{background-color: #646464;}



.txc1{color: #4ef7ee;}
.txc2{color: #0ba29a;}
.txc3{color: #08706b;}
.txc4{color: #122a88;}
.txc5{color: #0084a0;}

.txcw{color: #FFF;}

.txc-b1{color: #1c1c1c;}
.txc-b2{color: #2c2c2c;}
.txc-b3{color: #3b3b3b;}
.txc-b4{color: #404040;}
.txc-b5{color: #505050;}
.txc-b6{color: #606060;}
.txc-b7{color: #707070;}

.txc-g1{color: #f8f8f8;}
.txc-g2{color: #c5c5c5;}
.txc-g3{color: #aaa;}
.txc-g4{color: #bbb;}
.txc-g5{color: #ccc;}
.txc-g6{color: #7f7f7f;}
.txc-g7{color: #646464;}



.before-bgc1::before{background-color: #4ef7ee;}
.before-bgc2::before{background-color: #0ba29a;}
.before-bgc3::before{background-color: #08706b;}



@media screen and (min-width:991.1px){
		.hover-bgc1:hover{background-color: #4ef7ee !important;}
		.hover-bgc2:hover{background-color: #0ba29a !important;}
		.hover-bgc3:hover{background-color: #08706b !important;}

		.hover-txc1:hover{color: #4ef7ee !important;}
		.hover-txc2:hover{color: #0ba29a !important;}
		.hover-txc3:hover{color: #08706b !important;}
}
/* ---------------color 관련 END--------------- */



/* ---------------padding 관련 START--------------- */
.pd50{
		padding: 50px 0;
		box-sizing: border-box;
}
.pdt50{
		padding-top: 50px;
		box-sizing: border-box;
}
.pdb50{
		padding-bottom: 50px;
		box-sizing: border-box;
}
.pd70{
		padding: 70px 0;
		box-sizing: border-box;
}
.pdt70{
		padding-top: 70px;
		box-sizing: border-box;
}
.pdb70{
		padding-bottom: 70px;
		box-sizing: border-box;
}
.pd100{
		padding: 100px 0;
		box-sizing: border-box;
}
.pdt100{
		padding-top: 100px;
		box-sizing: border-box;
}
.pdb100{
		padding-bottom: 100px;
		box-sizing: border-box;
}
.pd150{
		padding: 150px 0;
		box-sizing: border-box;
}
.pdt150{
		padding-top: 150px;
		box-sizing: border-box;
}
.pdb150{
		padding-bottom: 150px;
		box-sizing: border-box;
}
.pd200{
		padding: 200px 0;
		box-sizing: border-box;
}
.pdt200{
		padding-top: 200px;
		box-sizing: border-box;
}
.pdb200{
		padding-bottom: 200px;
		box-sizing: border-box;
}
@media screen and (max-width:1350px){
		.pd50{padding: 45px 0;}
		.pdt50{padding-top: 45px;}
		.pdb50{padding-bottom: 45px;}
		.pd70{padding: 67px 0;}
		.pdt70{padding-top: 67px;}
		.pdb70{padding-bottom: 67px;}
		.pd100{padding: 85px 0;}
		.pdt100{padding-top: 85px;}
		.pdb100{padding-bottom: 85px;}
		.pd150{padding: 135px 0;}
		.pdt150{padding-top: 135px;}
		.pdb150{padding-bottom: 135px;}
		.pd200{padding: 180px 0;}
		.pdt200{padding-top: 180px;}
		.pdb200{padding-bottom: 180px;}
}
@media screen and (max-width:1150px){
		.pd50{padding: 40px 0;}
		.pdt50{padding-top: 40px;}
		.pdb50{padding-bottom: 40px;}
		.pd70{padding: 55px 0;}
		.pdt70{padding-top: 55px;}
		.pdb70{padding-bottom: 55px;}
		.pd100{padding: 70px 0;}
		.pdt100{padding-top: 70px;}
		.pdb100{padding-bottom: 70px;}
		.pd150{padding: 120px 0;}
		.pdt150{padding-top: 120px;}
		.pdb150{padding-bottom: 120px;}
		.pd200{padding: 160px 0;}
		.pdt200{padding-top: 160px;}
		.pdb200{padding-bottom: 160px;}
}
@media screen and (max-width:600px){
		.pd50{padding: 35px 0;}
		.pdt50{padding-top: 35px;}
		.pdb50{padding-bottom: 35px;}
		.pd70{padding: 47px 0;}
		.pdt70{padding-top: 47px;}
		.pdb70{padding-bottom: 47px;}
		.pd100{padding: 62px 0;}
		.pdt100{padding-top: 62px;}
		.pdb100{padding-bottom: 62px;}
		.pd150{padding: 100px 0;}
		.pdt150{padding-top: 100px;}
		.pdb150{padding-bottom: 100px;}
		.pd200{padding: 140px 0;}
		.pdt200{padding-top: 140px;}
		.pdb200{padding-bottom: 140px;}
}
@media screen and (max-width:450px){
		.pd50{padding: 30px 0;}
		.pdt50{padding-top: 30px;}
		.pdb50{padding-bottom: 30px;}
		.pd70{padding: 40px 0;}
		.pdt70{padding-top: 40px;}
		.pdb70{padding-bottom: 40px;}
		.pd100{padding: 55px 0;}
		.pdt100{padding-top: 55px;}
		.pdb100{padding-bottom: 55px;}
		.pd150{padding: 85px 0;}
		.pdt150{padding-top: 85px;}
		.pdb150{padding-bottom: 85px;}
		.pd200{padding: 120px 0;}
		.pdt200{padding-top: 120px;}
		.pdb200{padding-bottom: 120px;}
}
@media screen and (max-width:350px){
		.pd50{padding: 25px 0;}
		.pdt50{padding-top: 25px;}
		.pdb50{padding-bottom: 25px;}
		.pd70{padding: 35px 0;}
		.pdt70{padding-top: 35px;}
		.pdb70{padding-bottom: 35px;}
		.pd100{padding: 45px 0;}
		.pdt100{padding-top: 45px;}
		.pdb100{padding-bottom: 45px;}
		.pd150{padding: 70px 0;}
		.pdt150{padding-top: 70px;}
		.pdb150{padding-bottom: 70px;}
		.pd200{padding: 90px 0;}
		.pdt200{padding-top: 90px;}
		.pdb200{padding-bottom: 90px;}
}
.pd0{padding: 0;}
.pdt0{padding-top: 0;}
.pdb0{padding-bottom: 0;}
.pdl0{padding-left: 0;}
.pdr0{padding-right: 0;}

.pdn{padding: 0 !important;}
.pdtn{padding-top: 0 !important;}
.pdbn{padding-bottom: 0 !important;}
.pdln{padding-left: 0 !important;}
.pdrn{padding-right: 0 !important;}
/* ---------------padding 관련 END--------------- */



/* ---------------br 관련 START--------------- */
@media screen and (min-width:1350.1px){
		.brs1350{display: none;}
}
@media screen and (max-width:1350px){
		.brl1350{display: none;}
}
@media screen and (min-width:991.1px){
		.brs{display: none;}
}
@media screen and (max-width:991px){
		.brl{display: none;}
}
@media screen and (min-width:600.1px){
		.brs600{display: none;}
}
@media screen and (max-width:600px){
		.brl600{display: none;}
}
/* ---------------br 관련 END--------------- */



/* ---------------media screen START--------------- */
@media screen and (min-width:991.1px){

}
@media screen and (max-width:1350px){
	
}
@media screen and (max-width:1150px){
	
}
@media screen and (max-width:991px){
	
}
@media screen and (max-width:750px){
	
}
@media screen and (max-width:600px){

}
@media screen and (max-width:400px){

}
/* ---------------media screen END--------------- */



/* ---------------그누보드 페이지네이션 START--------------- */
/* ------------------------------------------------------------
그누보드에서 기본으로 출력되는 .pg_wrap 를
.pagination-btns 클래스로 한번 감싸고 사용.
------------------------------------------------------------ */
.pagination-btns {
		width: 100%;
		text-align: center;
}

.pagination-btns .pg_wrap {
		clear: unset;
		float: none;
		display: inline-block;
}

.pagination-btns .pg_wrap .pg {
		display: block;
		text-align: center;
}

.pagination-btns .pg_wrap .pg::after {
		content: '';
		display: block;
		clear: both;
}

.pagination-btns .pg_wrap .pg .sound_only {
		position: fixed;
		left: -100000px;
}

.pagination-btns .pg_wrap .pg .pg_current,
.pagination-btns .pg_wrap .pg .pg_page,
.pagination-btns .pg_wrap .pg .pg_start::after,
.pagination-btns .pg_wrap .pg .pg_end::after,
.pagination-btns .pg_wrap .pg .pg_prev::after,
.pagination-btns .pg_wrap .pg .pg_next::after {
		min-width: unset;
		padding: unset;
		float: left;
		display: block;
		margin: 0 5px;
		position: relative;
		width: 25px;
		height: 30px;
		line-height: 30px;
		border-radius: 100%;
		text-align: center;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		color: #c6c6c6;
		font-size: 20px;
		font-family: 'Pretendard';
		-webkit-transition: background-color 0.3s, color 0.3s;
		transition: background-color 0.3s, color 0.3s;
}

.pagination-btns .pg_wrap .pg .pg_page:hover {   
		color: #4ef7ee;
}

.pagination-btns .pg_wrap .pg .pg_start,
.pagination-btns .pg_wrap .pg .pg_end,
.pagination-btns .pg_wrap .pg .pg_prev,
.pagination-btns .pg_wrap .pg .pg_next {
		text-indent: unset;
		background: none;
		font-size: 0 !important;
		border: 0;
		line-height: 0;
}

.pagination-btns .pg_wrap .pg .pg_start:hover,
.pagination-btns .pg_wrap .pg .pg_end:hover,
.pagination-btns .pg_wrap .pg .pg_prev:hover,
.pagination-btns .pg_wrap .pg .pg_next:hover {
		background: none;
		color: unset;
}

.pagination-btns .pg_wrap .pg .pg_start:hover::after,
.pagination-btns .pg_wrap .pg .pg_end:hover::after,
.pagination-btns .pg_wrap .pg .pg_prev:hover::after,
.pagination-btns .pg_wrap .pg .pg_next:hover::after {  
		color: #4ef7ee;
}

.pagination-btns .pg_wrap .pg .pg_start::after,
.pagination-btns .pg_wrap .pg .pg_end::after,
.pagination-btns .pg_wrap .pg .pg_prev::after,
.pagination-btns .pg_wrap .pg .pg_next::after {
		position: absolute;
		left: 0;
		top: 0;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		-webkit-font-smoothing: antialiased;
		font-family: "Font Awesome 6 Pro";
		font-weight: 400;
		margin: 0;
}

.pagination-btns .pg_wrap .pg .pg_start::after {
		content: '\f053';
}

.pagination-btns .pg_wrap .pg .pg_end::after {
		content: '\f054';
}

.pagination-btns .pg_wrap .pg .pg_prev::after {
		content: '\f053';
}

.pagination-btns .pg_wrap .pg .pg_next::after {
		content: '\f054';
}

.pagination-btns .pg_wrap .pg .pg_current {
		font-weight: 700;   
		color: #343434;
}
@media screen and (max-width:1350px){
		.pagination-btns .pg_wrap .pg .pg_current,
		.pagination-btns .pg_wrap .pg .pg_page,
		.pagination-btns .pg_wrap .pg .pg_start::after,
		.pagination-btns .pg_wrap .pg .pg_end::after,
		.pagination-btns .pg_wrap .pg .pg_prev::after,
		.pagination-btns .pg_wrap .pg .pg_next::after {
				font-size: 19px;
		}
}
@media screen and (max-width:1150px){
		.pagination-btns .pg_wrap .pg .pg_current,
		.pagination-btns .pg_wrap .pg .pg_page,
		.pagination-btns .pg_wrap .pg .pg_start::after,
		.pagination-btns .pg_wrap .pg .pg_end::after,
		.pagination-btns .pg_wrap .pg .pg_prev::after,
		.pagination-btns .pg_wrap .pg .pg_next::after {
				font-size: 18px;
				margin: 0 4px;
				width: 25px;
				height: 25px;
				line-height: 25px;
		}
}
@media screen and (max-width:600px){
		.pagination-btns .pg_wrap .pg .pg_current,
		.pagination-btns .pg_wrap .pg .pg_page,
		.pagination-btns .pg_wrap .pg .pg_start::after,
		.pagination-btns .pg_wrap .pg .pg_end::after,
		.pagination-btns .pg_wrap .pg .pg_prev::after,
		.pagination-btns .pg_wrap .pg .pg_next::after {
				font-size: 17px;
				margin: 0 3px;
				width: 20px;
				height: 20px;
				line-height: 20px;
		}
}
@media screen and (max-width:450px){
		.pagination-btns .pg_wrap .pg .pg_current,
		.pagination-btns .pg_wrap .pg .pg_page,
		.pagination-btns .pg_wrap .pg .pg_start::after,
		.pagination-btns .pg_wrap .pg .pg_end::after,
		.pagination-btns .pg_wrap .pg .pg_prev::after,
		.pagination-btns .pg_wrap .pg .pg_next::after {
				font-size: 16px;
		}
}
/* ---------------그누보드 페이지네이션 END--------------- */