/*=======================================================
	분기점 기준
=========================================================*/

/* 태블릿 전용 스타일 */
@media (max-width: 1024px) {
  
}


/* 모바일 전용 스타일 */
@media (max-width: 768px) {

}





/*=======================================================
	공통
=========================================================*/

* { margin: 0; padding: 0; box-sizing: border-box;}
html, body{ width: 100%; overflow-x: hidden; font-family: 'pretendard', sans-serif; word-break: keep-all; word-wrap: break-word; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;}
body { background: #fff; font-family: 'pretendard', sans-serif; color: #222; font-weight: 500; line-height: 1.4; letter-spacing: -0.025em;}
body.menu-open { overflow: hidden;}
a { color: #222; font-family: 'pretendard', sans-serif; text-decoration: none; }
ul, li { list-style: none;}
button { border: none; background: none; font-family: 'pretendard', sans-serif; cursor: pointer;}
img { display: block; max-width: 100%; height: auto;}


div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,
strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border: 0; font-size: 100%; vertical-align: baseline;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}

ol,ul,dl,li { list-style: none;}

blockquote,q { quotes: none;}

blockquote:before,blockquote:after,q:before,q:after { content: ""; content: none;}

table { width: 100%; border-spacing: 0; border-collapse: collapse;}
table th, td { font-size: 16px;}

img { border: 0;}

label { vertical-align: middle; cursor: pointer;}

textarea { outline: none; }

select,textarea { vertical-align: middle;}

select { border: 0; background: url(../img/arrow_down.png) right 10px center no-repeat; background-size: 12px; -webkit-appearance: none; color: #222; appearance: none; outline: none; cursor: pointer;}

select:-webkit-autofill,textarea:-webkit-autofill { -webkit-box-shadow: 0 0 0 300px white inset;}




svg { width: auto; height: auto;}
::placeholder { color: #aaa; opacity: 1;}
:-ms-input-placeholder { color: #aaa;}


input[type="password"]:focus { border-color: var(--purple);}


button, input[type="text"], input[type="password"], input[type="button"], input[type="submit"], input[type="number"], input[type="search"] { outline: none; appearance: none; cursor: pointer;}

button { outline: 0; border: 0;}



/* <label class="radio">
  <input type="radio" name="gender" checked>
  <span class="radiotxt">남성</span>
</label> */


.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* 1. 기본 라디오 버튼 숨기기 및 커스텀 틀 만들기 */
input[type="radio"] { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--gray3); /* 미체크 상태 테두리 */ border-radius: 50%; background-color: #fff; transition: all 0.2s; appearance: none; }

/* 2. 체크되었을 때의 테두리와 배경색 */
input[type="radio"]:checked { border-color: var(--purple);}

/* 3. 체크되었을 때 내부 원(Dot) 만들기 */
input[type="radio"]:checked::after { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--purple);}

.radiotxt { display: flex; gap: 5px; font-size: 15px; font-weight: 400; }



input[type="checkbox"] { overflow: hidden; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip: rect(0,0,0,0); -webkit-appearance: none; opacity: 0; }
input[type="checkbox"] + label { display: inline-block; position: relative; min-height: 28px; padding-left: 28px; color: #333; font-size: 16px; text-align: left; cursor: pointer;}
input[type="checkbox"] + label::before { content: ''; position: absolute; top: 1px; left: 0; width: 20px; height: 20px; border: 1px solid #d3d3d3; border-radius: 3px; background: #fff;}
input[type="checkbox"]:checked + label::before { left: 0; border: none; background: #7056f5 url(../img/ico_checkbox.png) center center no-repeat; background-size: 13px 9px; }









/*───────────────────────────────────────────────────────────
    width
  ───────────────────────────────────────────────────────────*/

  
.w100p { width: 100%;}
.w100 { width: 100px;}
.w120 { width: 120px;}
.w150 { width: 150px;}
.w160 { width: 160px;}
.w180 { width: 180px;}
.w200 { width: 200px;}
.w300 { width: 300px;}



/*───────────────────────────────────────────────────────────
    color
───────────────────────────────────────────────────────────*/

:root {

  --purple: #7056f5;
  --purple1: #6040ff;
  --purple2: #9681ff;
  --purple3: #a096e0;
  --purple4: #b6a8ff;
  --purple5: #e7e3ff;
  --purple6: #f6f5ff;
  --purple7: #e4e2f0;

  --black: #111;
  
  --gray: #3b3b3b;
  --gray1: #555;
  --gray2: #999;
  --gray3: #e1e1e1;
  --gray4: #eee;
  --gray5: #f5f5f5;
  --gray6: #f9f9f9;
  --gray7: #a8a8a8;

  --yellow: #FFEB3B;
  --yellow2: #ffef63;
  --green: #03C75A;
  --pink: #ffcbcb;

}


/*───────────────────────────────────────────────────────────
    Common font
───────────────────────────────────────────────────────────*/

.bold600 { font-weight: 600;}
.bold700 { font-weight: 700;}

.line { text-decoration: underline;}



/*───────────────────────────────────────────────────────────
    input
  ───────────────────────────────────────────────────────────*/





/*───────────────────────────────────────────────────────────
    Layout
  ───────────────────────────────────────────────────────────*/