@charset 'UTF-8';
/*
  파일명: utils.css
  작성자: 김도희
  최초작성일: 2025-04-30
  수정자: 김도희
  수정일: 2025-04-30
  설명: 이 파일은 reset, base, heading 등 utils 관련 css입니다.
*/

/* fonts */
@import url('/src/font/font.css');

/* reset css */
* {margin: 0;padding: 0;}
*,*:before,*:after {box-sizing: border-box;}
html,body,div,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,sub,sup,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,aricle,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button,input, select, textarea {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;font-weight: 400; box-sizing:border-box}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display: block;}

/* table reset은 예외 
table,caption,tbody,tfoot,thead,tr,th,td{vertical-align: baseline;}
*/

/* base css */
b, strong{font-weight: bold}
ol,ul {list-style: none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: "";display: none;}
table{border-collapse: collapse;border-spacing: 0;}
a,a:hover {text-decoration: none;color: inherit;cursor: pointer;}
/*a:not(.btn):hover {color: #f8a300;}*/
input,textarea,a,button,label {-webkit-appearance: none;-webkit-tap-highlight-color: transparent;outline: none;}
input{font-family: 'Pretendard', system-ui, sans-serif; font-weight: 400; border: 0; letter-spacing: -0.26px}
input::placeholder{color: #9da5af}
input[type="radio"], input[type="checkbox"]{display: none}
button{cursor: pointer; background-color: transparent}
button > span{position:relative;}
table th, table td{font-size: inherit}
.blind, .hide{display: none; visibility: hidden}
hr{border-top:1px solid #f4f6f8}

/* heading tag */
h1, h2, h3, h4, h5, h6{font-weight: 900}

/* font-weight */
.fwL {font-weight: 400 !important;}
.fwM {font-weight: 500 !important;}
.fwB {font-weight: 700 !important;}
.fwBL {font-weight: 900 !important;}
strong {font-weight: 700;}

/* font color */
.f_color1{color: #363c43 !important}
.f_color2{color: #777e87 !important}
.f_color3{color: #9ca3ab !important}
.f_color4{color: #087ef7 !important}

/* point color */
.point-red{color: #FF5C5C !important;}
.point-blue{color: #087ef7 !important;}

/* text-align */
.txt-left {text-align: left !important;}
.txt-right {text-align: right !important;}
.txt-center {text-align: center !important;}
.txt-just {text-align: justify !important;}
.verTop {vertical-align: top;}
.verMid {vertical-align: middle;}
.verBtm {vertical-align: bottom;}

/* text space - keyword values */
.wsNor{white-space: normal !important;}
.wsNowrap{white-space: nowrap !important;}
.wsPre{white-space: pre !important;}

.ellipsis{display: inline-block; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden}
.ellipsis.line2{display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; white-space: normal}

.desc.inline > *{display: inline-block;}
.desc dt{color: #777e87}

.req{font-weight: 500;line-height: 1.25;color: #363c43;}
.req:before{content:'*'; color: #ff0000}
.linked::after{content:'\e157'; font-family: 'Material Icons'; font-style: normal; font-weight: normal; text-decoration: inherit; color: #087ef7 !important; vertical-align: middle}

/* spacing - padding, border, margin */
/* padding */
.pt-0 {padding-top: 0px !important;}
.pr-0 {padding-right: 0px !important;}
.pb-0 {padding-bottom: 0px !important;}
.pl-0 {padding-left: 0px !important;}
.pt-4 {padding-top: 4px !important;}
.pr-4 {padding-right: 4px !important;}
.pb-4 {padding-bottom: 4px !important;}
.pl-4 {padding-left:4px !important;}
.pt-5 {padding-top: 5px !important;}
.pr-5 {padding-right: 5px !important;}
.pb-5 {padding-bottom: 5px !important;}
.pl-5 {padding-left:5px !important;}
.pt-8 {padding-top: 8px !important;}
.pr-8 {padding-right: 8px !important;}
.pb-8 {padding-bottom: 8px !important;}
.pl-8 {padding-left:8px !important;}
.pt-10 {padding-top: 10px !important;}
.pr-10 {padding-right: 10px !important;}
.pb-10 {padding-bottom: 10px !important;}
.pl-10 {padding-left: 10px !important;}
.pt-12 {padding-top: 12px !important;}
.pr-12 {padding-right: 12px !important;}
.pb-12 {padding-bottom: 12px !important;}
.pl-12 {padding-left: 12px !important;}
.pt-16 {padding-top: 16px !important;}
.pr-16 {padding-right: 16px !important;}
.pb-16 {padding-bottom: 16px !important;}
.pl-16 {padding-left: 16px !important;}
.pt-20 {padding-top: 20px !important;}
.pr-20 {padding-right: 20px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pl-20 {padding-left: 20px !important;}
.pt-24 {padding-top: 24px !important;}
.pr-24 {padding-right: 24px !important;}
.pb-24 {padding-bottom: 24px !important;}
.pl-24 {padding-left: 24px !important;}
.pt-32 {padding-top: 32px !important;}
.pr-32 {padding-right: 32px !important;}
.pb-32 {padding-bottom: 32px !important;}
.pl-32 {padding-left: 32px !important;}

/* border */
.brd_t0 {border-top:0 !important;}
.brd_r0 {border-right:0 !important;}
.brd_b0 {border-bottom:0 !important;}
.brd_l0 {border-left:0 !important;}

/* margin */
.mt-0 {margin-top: 0px !important;}
.mt-4 {margin-top: 4px !important;}
.mt-5 {margin-top: 5px !important;}
.mt-8 {margin-top: 8px !important;}
.mt-10 {margin-top: 10px !important;}
.mt-12 {margin-top: 12px !important;}
.mt-16 {margin-top: 16px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-24 {margin-top: 24px !important;}
.mt-28 {margin-top: 28px !important;}
.mt-32 {margin-top: 32px !important;}
.mt-40 {margin-top: 40px !important;}
.mt-44 {margin-top: 44px !important;}
.mt-48 {margin-top: 48px !important;}

.mr-0 {margin-right: 0px !important;}
.mr-4 {margin-right: 4px !important;}
.mr-5 {margin-right: 5px !important;}
.mr-8 {margin-right: 8px !important;}
.mr-10 {margin-right: 10px !important;}
.mr-12 {margin-right: 12px !important;}
.mr-16 {margin-right: 16px !important;}
.mr-20 {margin-right: 20px !important;}
.mr-24 {margin-right: 24px !important;}
.mr-32 {margin-right: 32px !important;}

.mb-0 {margin-bottom: 0px !important;}
.mb-4 {margin-bottom: 4px !important;}
.mb-5 {margin-bottom: 5px !important;}
.mb-8 {margin-bottom: 8px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-12 {margin-bottom: 12px !important;}
.mb-16 {margin-bottom: 16px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-24 {margin-bottom: 24px !important;}
.mb-32 {margin-bottom: 32px !important;}

.ml-0 {margin-left: 0px !important;}
.ml-4 {margin-left:4px !important;}
.ml-5 {margin-left:5px !important;}
.ml-8 {margin-left:8px !important;}
.ml-10 {margin-left: 10px !important;}
.ml-20 {margin-left: 20px !important;}
.ml-16 {margin-left: 16px !important;}
.ml-12 {margin-left: 12px !important;}
.ml-24 {margin-left: 24px !important;}
.ml-32 {margin-left: 32px !important;}
.ml-auto {margin-left: auto !important;}

/* float */
.float-left{float: left}
.float-right{float: right}
.clear-both:after{content:''; display: block; clear: both}

.nothover, *:hover > .hover{display: block}
.hover, *:hover > .nothover{display: none}

/* grid */
/* Row */
.row {
  display: flex;
  margin-right: -12px;  /* 가로 간격 */
  margin-left: -12px;
}

/* Column */
.col {
  padding-right: 12px;
  padding-left: 12px;
  flex-basis: 100%;
  max-width: 100%;
}

.col-6 {
  padding-right: 12px;
  padding-left: 12px;
  flex-basis: 50%;
  max-width: 50%;
}