@charset "UTF-8";

@font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff") format("woff");
    font-weight: 100;
    font-style: normal;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff") format("woff");
    font-weight: 500;
    font-style: normal;
  }
  @font-face {
    font-family: "Pretendard";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
  }


:root {
	/* var color */
	--border-color: #ddd;
	--color-lightgray : #7f7f7f;
    --point-color: #0e74cd;

	/* var width */
	--width-common : 1200px;

	/* font-size */
    --font-default : 1.4rem;
	--font-title : 2.5rem;
	--font-small : 1.5rem;
}


@media screen  and (min-width: 681px) and (max-width: 1199px) {

    :root {
    	/* var width */
	--width-common : 96%;
    }
}


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

    :root {
     	/* var width */
	--width-common : 96%;
    }
  }



html, body, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: middle;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{
/* 브라우저가 지정해주는 기본 폰트 사이즈는 100%=16px
이걸 계산하기 쉽게 62.5%=10px로 변경해주는것이다.
따라서 위 설정을 통해 1rem=10px 이 된다. (16px *62.5%=10px   // 62.5%=0.625) */
    font-size:62.5%;
}

@media screen and (max-width: 680px) {
    html{
        font-size:57%;
        }
}



body{
    font-family: "Pretendard", "Malgun Gothic", dotum, gulim, sans-serif;
    color:#2d2d2d;
    font-size:var(--font-default);
    /* padding-top:167px; */
}


ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
input, select, textarea{
	vertical-align:middle;
	font-size:initial;
    box-sizing: border-box;
}
a{
	color:inherit;
	margin:0;
	padding:0;
	text-decoration: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	cursor: pointer;
	padding: 0;
	background:transparent;
	border:none;
	-webkit-appearance: none;
	-webkit-border-radius: 0;
    vertical-align: middle;
}
input[type="text"],
input[type="password"],
input[type="number"]{
	border:1px solid #ddd;
	-webkit-appearance: none;
	padding:0 10px;
    height:26px;
    font-size:14px;
}
textarea{
	resize: none;
	border:1px solid #ddd;
	border-radius:3px;
	-webkit-appearance: none;
	min-height:78px;
	padding:10px 16px;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}
[type="checkbox"],
[type="radio"]{
	box-sizing: border-box;
	padding: 0;
	border:none;
}
::-webkit-input-placeholder {
	color: #6f6f6f;
}
:-ms-input-placeholder {
	color: #6f6f6f;
}
::-moz-input-placeholder {
	color: #6f6f6f;
}

select{
    position: relative;
    border:1px solid #ddd;
    padding:0 5px;
    height:26px;
    padding:0 26px 0 10px;
    font-size: 1.4rem;
}
input[type="radio"] {
    margin:0 4px 0 0;
    appearance: none;
    border: max(2px, 0.1em) solid #ddd;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: border 0.2s ease-in-out;
}
  
input[type="radio"]:checked {
    border: 0.3em solid #4198f5;
}


input[type="checkbox"] {
    margin:0;
    border: max(2px, 0.1em) solid #ddd;
    width: 16px;
    height: 16px;
    transition: border 0.5s ease-in-out;
}
input[type="checkbox"] + label{
    margin-left: 5px;
}
input[type=text]:focus,
input[type=password]:focus{
    outline: none;
    border:1px solid #0e74cd;
    background: #fafdff;
}


label + input[type=radio] {
    margin-left:10px;
}
input + .input-sidetext{
    margin-left:4px;
}
input[type=file]{
    font-size:13px;
}