/*
+----------------------------------------------------------------------+
| Copyright (c) 2010 - 2024 SPEAKINGMAX @ WEAVERSBRAIN.Co.Ltd
+----------------------------------------------------------------------+
| 작업일 : 2024-09-24
| 파일설명 : MAX AI 사이트 공통 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영   
+----------------------------------------------------------------------+
| 수정이력
| 20241007 반응형 UI 수정 by 최진영 
| 20241223 앱 내 이슈 수정 by 최진영  
| 20250218 텍스트 컬러 추가 by 최진영 
+----------------------------------------------------------------------+ 
*/

@charset "utf-8";

/* 웹폰트 설정 */
@font-face {
	font-family: "Pretendard-Black";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-Black.woff")			format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-Black.otf")				format("opentype");
}
@font-face {
	font-family: "Pretendard-Bold";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-Bold.woff")				format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-Bold.otf")				format("opentype");
}
@font-face {
	font-family: "Pretendard-ExtraBold";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-ExtraBold.woff")		format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-ExtraBold.otf")			format("opentype");
}
@font-face {
	font-family: "Pretendard-ExtraLight";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-ExtraLight.woff")		format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-ExtraLight.otf")			format("opentype");
}
@font-face {
	font-family: "Pretendard-Light";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-Light.woff")			format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-Light.otf")				format("opentype");
}
@font-face {
	font-family: "Pretendard-Medium";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-Medium.woff")			format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-Medium.otf")				format("opentype");
}
@font-face {
	font-family: "Pretendard-Regular";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-Regular.woff")			format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-Regular.otf")			format("opentype");
}
@font-face {
	font-family: "Pretendard-SemiBold";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-SemiBold.woff")			format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-SemiBold.otf")			format("opentype");
}
@font-face {
	font-family: "Pretendard-Thin";
	font-style: normal;
	font-weight: 100;
	src:
		url("../../fonts/pretendard/woff/Pretendard-Thin.woff")				format("woff"),
		url("../../fonts/pretendard/otf/Pretendard-Thin.otf")				format("opentype");
}


/* reset base */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-hyphens: auto;
	hyphens: auto;
	font-family: "Pretendard-Regular", "Dotum", "Gulim", "sans-serif";
}
html, body {
	height:100%;
}
body {
	-webkit-overflow-scrolling: auto;
	-webkit-text-size-adjust: none;
}
legend, caption, figcaption {
	display: none;
}
p, ul, ol, li, dl, dt, dd, form {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	border: 0px;
}
img, fieldset, frameset, frameborder, frame {
	border: 0;
}
table {
	width: 100%;
	border-collapse: collapse;
}
a, img, span, b, input, select, em, textarea, label, strong {
	vertical-align: middle;
	outline-style: none;
	-webkit-tap-highlight-color: transparent;
}
a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}
em, i {
	font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
	all: unset;				/* 모든 기본 스타일 제거 */
	display: block;			/* 인라인 요소로 변하는 것 방지 */
	font-size: inherit;		/* 부모 요소의 글꼴 크기 상속 */
	font-weight: inherit;	/* 기본 글꼴 두께 제거 */
	font-family: inherit;	/* 기본 글꼴 제거 */
	line-height: inherit;	/* 기본 줄 간격 제거 */
	color: inherit;			/* 기본 색상 제거 */
  }


/* form */
textarea {
	resize: none;
}
button {
	cursor: pointer;
	border: none;
	background: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none; /* iOS 기본 스타일 제거 */
	-moz-appearance: none;
	appearance: none;
	text-transform: none; /* iOS 기본 스타일 방지 */
}
select {
	-webkit-appearance:none ;
}
input {
	padding: 14px;
	border:0;
	outline: none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
}
input:focus {
	outline: none;
}
/* input number의 spin 버튼 제거 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}


/* 텍스트 - 스타일 */
/* 
	H	= Heading
	SH	= Sub Heading
	B	= Body
	C	= Caption
*/

.H_32_Bold {
	font-family: 'Pretendard-Bold';
	font-size:32px;
	line-height: 160%;
}
.H_30_Bold {
	font-family: 'Pretendard-Bold';
	font-size:30px;
	line-height: 160%;
}
.H_28_Bold {
	font-family: 'Pretendard-Bold';
	font-size:28px;
	line-height: 160%;
}
.H_24_Bold {
	font-family: 'Pretendard-Bold';
	font-size:24px;
	line-height: 160%;
}
.SH_20_Bold {
	font-family: 'Pretendard-Bold';
	font-size:20px;
	line-height: 160%;
}
.SH_18_Bold {
	font-family: 'Pretendard-Bold';
	font-size:18px;
	line-height: 160%;
}
.B_20_Regular {
	font-family: 'Pretendard-Regular';
	font-size:20px;
	line-height: 160%;
}
.B_18_Regular {
	font-family: 'Pretendard-Regular';
	font-size:18px;
	line-height: 160%;
}
.B_16_Bold {
	font-family: 'Pretendard-Bold';
	font-size:16px;
	line-height: 160%;
}
.B_16_Regular {
	font-family: 'Pretendard-Regular';
	font-size:16px;
	line-height: 180%;
}
.B_15_Bold {
	font-family: 'Pretendard-Bold';
	font-size:15px;
	line-height: 160%;
}
.B_15_Medium {
	font-family: 'Pretendard-Medium';
	font-size:15px;
	line-height: 160%;
}
.B_15_Regular {
	font-family: 'Pretendard-Regular';
	font-size:15px;
	line-height: 160%;
}
.B_14_Bold {
	font-family: 'Pretendard-Bold';
	font-size:14px;
	line-height: 160%;
}
.B_14_Medium {
	font-family: 'Pretendard-Medium';
	font-size:14px;
	line-height: 160%;
}
.B_14_Regular {
	font-family: 'Pretendard-Regular';
	font-size:14px;
	line-height: 160%;
}
.C_13_Bold {
	font-family: 'Pretendard-Bold';
	font-size:13px;
	line-height: 160%;
}
.C_13_Regular {
	font-family: 'Pretendard-Regular';
	font-size:13px;
	line-height: 160%;
}
.C_12_Bold {
	font-family: 'Pretendard-Bold';
	font-size:12px;
	line-height: 160%;
}
.C_12_Regular {
	font-family: 'Pretendard-Regular';
	font-size:12px;
	line-height: 160%;
}
.C_11_Regular {
	font-family: 'Pretendard-Regular';
	font-size:11px;
	line-height: 160%;
}

/* 페이지 - 배경 컬러 */
.bg_ffffff {
	background: #fff;
}
.bg_f3f5f6 {
	background: #f3f5f6;
}
.bg_f5f5f7 {
	background: #f5f5f7;
}
.bg_222129 {
	background: #222129;
}
.bg_2e2e30 {
	background: #2e2e30;
}

/* 텍스트 - 컬러 */
.text_point {
	color:#A449FF;
}
.text_heading {
	color:#212121;
}
.text_default {
	color:#424242;
}
.text_subdued {
	color:#616161;
}
.text_disabled {
	color:#9E9E9E;
}
.text_white {
	color:#FFFFFF;
}
.text_purple {
	color:#A45FD6;
}

/* 경고 컬러 */
.state_warning_bg {
	background:#EC0000;
}
.state_warning_text {
	color:#EC0000;
}

/* 공통 클래스 */
.position_r {
	position:relative;
}

/* 폼 디자인 */
.formUIBox {
	position:relative;
	margin-top:10px;
}
.formUIBox:first-child {
	margin-top:0;
}
.formUIBox .formUI {
	display:block;
	width:100%;
	height:40px;
	padding:0;
	border:0;
	border-bottom:1px solid #cfcfcf;
	background:transparent;
	box-sizing:border-box;
}
.formUIBox .formUI:not(.readonly):focus {
	border-color:#c362ff;
}
.formUIBox .formUI.select {
	background:url('/assets/images/common/icon/icon_arrow_down_gray.png') no-repeat calc(100% - 10px) 50%/10px;
	padding-left:5px;
}
.formUIBox .formUI.textarea {
	margin-top:10px;
	padding:10px;
	height:100px;
	border:1px solid #cfcfcf;
	border-radius:8px;
}
.formUIBox .errorMsg  {
	display: none;
	margin-top: 4px;
	color:#c362ff;
}


/* 버튼 */
.button {
	display:block;
	width:100%;
	height:54px;
	background:#f1f1f1;
	border:1px solid #f1f1f1;
	color:#707070;
	border-radius:10px;
}
.button.small {
	height:30px;
}
.button.on {
	background:#c362ff;
	border-color:#c362ff;
	color:#fff;
}
.button.reverse {
	background:#f6e9ff;
	border-color:#f6e9ff;
	color:#c362ff;
}
.button.line {
	background:#fff;
	border-color:#000;
	color:#000;
}
.button.black {
	background:#000;
	border-color:#000;
	color:#fff;
}
.button.darkgray {
	background:#555;
	border-color:#555;
	color:#fff;
}

/* 
	페이지네이션
	ㄴ 맥스 기반 PHP 라이브러리라 커스터마이징이 어렵기 때문에 listPaging이라는 상위 클래스를 만들어 사용
*/
.listPaging {
	text-align: center;
	margin-top:20px;
}
.listPaging .pagination span,
.listPaging .pagination a {
	display:inline-flex;
	justify-content: center;
	align-items: center;
	margin:0 5px;
	width:26px;
	height:26px;
	font-size:12px;
	border:1px solid #e0e0e0;
	background:transparent no-repeat 0 0/100%;
}
.listPaging .pagination span:first-child,
.listPaging .pagination a:first-child {
	margin-left:0;
}
.listPaging .pagination span:last-child,
.listPaging .pagination a:last-child {
	margin-right:0;
}
.listPaging .pagination span.on {
	background:#c362ff;
	color:#fff;
	border-color: #c362ff;
}
.listPaging .pagination span > a {
	width:100%;
	height:100%;
	margin:0;
	border:none;
}
.listPaging .pagination span.pagination-wrap-first > a {
	background-image:url('/assets/images/common/icon/icon_doubleArrow_left_black.png');
}
.listPaging .pagination span.pagination-wrap-prev > a {
	background-image:url('/assets/images/common/icon/icon_arrow_left_black_type2.png');
}
.listPaging .pagination span.pagination-wrap-next > a {
	background-image:url('/assets/images/common/icon/icon_arrow_right_black.png');
}
.listPaging .pagination span.pagination-wrap-last > a {
	background-image:url('/assets/images/common/icon/icon_doubleArrow_right_black.png');
}