@charset "utf-8";

/*
@작업자			:홍길동
@작업완료일		:2024.01.01
@최종수정일		:2024.00.00
*/

/* 공통적인 표현을 위한 스타일 */
/* common */
html{font-size:62.6%; width:100%; min-width:320px; max-width:100%; width:100%; height:100%; overflow-x:hidden;}
body,button{font-size:1.5rem;line-height:2rem; /* letter-spacing:-.05em;  */ font-family:'NotoSansKorean',-apple-system,"Malgun Gothic","맑은 고딕",helvetica,"Apple SD Gothic Neo",sans-serif}
.blind, caption{position:absolute;top:-1px;left:-1px;width:1px;height:1px;line-height:1px;font-size:1px;color:transparent;text-indent:-9999em;visibility:hidden;overflow:hidden}
/* .hidden{display:none; } */
p{letter-spacing:-.05em; font-weight:300;}

.pr{position:relative}
.pl{position:absolute;left:0;top:0}
.pr{position:absolute;right:0;top:0}

.fl{float:left !important}
.fr{float:right !important}

.tl{text-align:left !important}
.tc{text-align:center !important}
.tr{text-align:right !important}

.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}

.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb25{margin-bottom:25px !important}
.mb30{margin-bottom:30px !important}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px !important}

.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml25{margin-left:25px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}

.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr15{margin-right:15px !important}
.mr20{margin-right:20px !important}
.mr25{margin-right:25px !important}
.mr30{margin-right:30px !important}
.mr40{margin-right:40px !important}
.mr50{margin-right:50px !important}

.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font20{font-size:20px;}
.font22{font-size:22px;}
.font24{font-size:24px;}
.font26{font-size:26px;}
.font28{font-size:28px;}
.font30{font-size:30px;}
.font32{font-size:32px;}
.font34{font-size:34px;}
.font36{font-size:36px;}
.font38{font-size:38px;}
.font40{font-size:40px;}

.bold_200{font-weight:200}
.bold_300{font-weight:300}
.bold_400{font-weight:400}
.bold_500{font-weight:500}
.bold_600{font-weight:600}
.bold_700{font-weight:700}

/* flex 정렬 */
.display-flex{display:flex}
.display-inline-block{display:inline-block}

/*방향*/
.flex-direction-row{flex-direction:row;}
.flex-direction-column {flex-direction:column;}
.flex-direction-row-reverse {flex-direction:row-reverse;}
.flex-direction-column-reverse {flex-direction:column-reverse;}

/*배치*/
.flex-wrap-nowrap {flex-wrap: nowrap}
.flex-wrap-wrap {flex-wrap: wrap}

/*전체 정렬*/
.align-content-center{align-content: center}
.align-content-flex-start{align-content: flex-start}
.align-content-flex-end{align-content: flex-end}
.align-content-space-around{align-content: space-around}
.align-content-space-between{align-content: space-between}
.align-content-stretch{align-content: stretch}

/*높이 정렬*/
.justify-content-center{justify-content: center}
.justify-content-flex-start{justify-content: flex-start}
.justify-content-flex-end{justify-content: flex-end}
.justify-content-space-between{justify-content: space-between}
.justify-content-space-around{justify-content: space-around}
.justify-content-space-evenly{justify-content: space-evenly}

/* 아이템 위치 */
.align-items-center{align-items: center}
.align-items-flex-start{align-items: flex-start}
.align-items-flex-end{align-items: flex-end}
.align-items-stretch{align-items: stretch}
.align-items-baseline{align-items: baseline}

/* position 가운데 정렬 */
.posiion-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);} 


/* 변수 */
:root{
	/* color */
	--color-primary:#246beb;
	--color-secondary:#003675;
	--color-gray5:#f8f8f8;
	--color-gray10:#f0f0f0;
	--color-gray20:#e4e4e4;
	--color-gray30:#d8d8d8;
	--color-gray40:#c6c6c6;

	/* size */
	--base-space:4px;
	--font-size:18px;
	--border-radius:16px;
}