/* 초기화
**********************************************/

/* html.fontSmall  { font-size: 58%;}
html.fontNormal { font-size: 62.5%;}
html.fontLarge { font-size: 65%;}
html.fontBig { font-size: 68%;}
*/
@media screen and (min-width: 0) { html {font-size: 48%;}}
@media screen and (min-width: 320px) { html {font-size: 62.5%;}}
@media screen and (min-width: 480px) { html {font-size: 62.5%;}}
@media screen and (min-width: 1119px) { html {font-size: 62.5%;}}


/* Fonts */
/* @font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url(../fonts/NotoSansKR/NotoSansKR-Thin.woff2) format('woff2');
} */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/NotoSansKR/NotoSansKR-Light.woff2) format('woff2');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/NotoSansKR/NotoSansKR-Regular.woff2) format('woff2');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/NotoSansKR/NotoSansKR-Medium.woff2) format('woff2');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 600;
	src: url(../fonts/NotoSansKR/NotoSansKR-SemiBold.woff) format('woff2');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/NotoSansKR/NotoSansKR-Bold.woff2) format('woff2');
}
/* @font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 900;
	src: url(../fonts/NotoSansKR/NotoSansKR-Black.woff2) format('woff2');
} */
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/GmarketSans/GmarketSansLight.woff2) format('woff2');
}
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/GmarketSans/GmarketSansMedium.woff2) format('woff2');
}
@font-face {
	font-family: 'GmarketSansMedium';
	font-style: normal;
	font-weight: 500;
	src: url(../fonts/GmarketSans/GmarketSansMedium.woff2) format('woff2');
}
@font-face {
	font-family: 'Gmarket Sans';
	font-style: normal;
	font-weight: 800;
	src: url(../fonts/GmarketSans/GmarketSansBold.woff2) format('woff2');
}
@font-face {
	font-family: 'Pretendard';
	font-style: normal;
	font-weight: 300 800;
	src: url(../fonts/Pretendard/PretendardGOVVariable.woff2) format('woff2');
}


html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,main,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strong,sub,sup,var,b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td, header, article, section, aside, nav, figure, figcaption, adress, textarea, input[type=text], input[type=password], input[type=file], input[type=email], input[type=tel] {
	margin:0;
	padding:0;
	vertical-align:baseline;
	background:transparent;
	box-sizing:border-box;
	text-size-adjust : none;
}
body {
	font: 1.6rem/1 "Pretendard", "Apple SD Gothic Neo", "Droid sans", "Microsoft NeoGothic ", sans-serif;
	font-weight: 600;
	color:#000;
	-webkit-text-size-adjust: none;
	scroll-behavior: smooth;
}

a:link,
a:visited { color:#000; text-decoration:none;}
select { height: 4rem; padding: 0 3.2rem .1rem 1.2rem; font-family: "Noto Sans KR"; font-size:1.6rem; font-weight: 400; color: #333; vertical-align:middle; border: 1px solid #bcbcbc; appearance: none; border-radius: .6rem; background: #fff url(../images/common/ico_select_arrow.png) no-repeat center right 1.2rem;}
select:hover { border-color: #aaa;}
select[disabled] { color: #959595; border-color: #dbdbdb; background: #f7f7f7;}
select::-ms-expand { display: none;} /* 화살표 없애기 for IE10, 11*/
select.lineBlack { border-color: #333;}
input[type=submit] { border:0; cursor:pointer; appearance: none;}
input[type=file],
input[type=text],
input[type=tel],
input[type=email],
input[type=password] { height: 4rem; padding: 0 3rem 0 1.2rem; font-family: "Noto Sans KR"; font-size:1.6rem; font-weight: 400; vertical-align:middle; border:1px solid #bcbcbc; background-color:#fff; -webkit-appearance: none;	-moz-appearance: none; appearance: none; -webkit-border-radius: 0px; border-radius: 0px; transition: border-color .2s ease-in-out; border-radius: .6rem;}
input[type=file]:hover,
input[type=text]:hover,
input[type=tel]:hover,
input[type=email]:hover,
input[type=password]:hover { border-color: #aaa;}
input[readonly],
input[disabled] { color: #959595; border-color: #ddd; background-color:#f7f7f7;}
input[readonly]::placeholder,
input[disabled]::placeholder { color: #666;}
input[readonly]:hover,
input[disabled]:hover { border-color: #ddd;}
/* input[type=file]:required:not(:placeholder-shown),
input[type=text]:required:not(:placeholder-shown),
input[type=tel]:required:not(:placeholder-shown),
input[type=email]:required:not(:placeholder-shown),
input[type=password]:required:not(:placeholder-shown) { border-color: #ee0700;} */
input[type=file]:required:valid,
input[type=text]:required:valid,
input[type=tel]:required:valid,
input[type=email]:required:valid,
input[type=password]:required:valid { border-color: #aaa;}
input[aria-invalid=true]  { border-color: #ee0700;}
input.success { border-color: #366cc3;}
input[aria-invalid=true] ~ p.errorText { display: block;}
.errorText { display: none; color: #ee0700;}


button { border:0 none; padding:0; margin:0; font-family: "Noto Sans KR"; font-size:1.6rem; font-weight: 600; color:#111; vertical-align:middle; line-height: 1; background:transparent; cursor:pointer;}
button::-moz-focus-inner { margin: -1px; padding: 0;}
button:disabled { opacity: .5; cursor: not-allowed;}
address,caption,cite,code,dfn,var,em { font-style:normal; font-weight:normal;}
textarea { width:100%; padding:1.1rem; font-family: "Noto Sans KR"; font-size:1.6rem; font-weight: 400; border:1px solid #d4d4d4; background-color:#fff; border-radius: .6rem; resize:none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
textarea[disabled],
textarea[readonly] { background-color:#ccc;}
fieldset,
img { border:0;}
ul, ol { list-style:none;}
hr { margin: 0; padding: 0; border: none;}
legend,
caption { overflow: hidden; width: 0; height: 0; padding: 0; text-indent: -99999px; line-height: 0;}
table { width: 100%; border-collapse: collapse; border-spacing: 0; empty-cells:show;}
table th,
table td { vertical-align: middle;}

/* 공통 */
*:focus { outline: 2px dashed #000; border-radius: 2px;}
.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hidden { display:none;}
.invisible { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; white-space: nowrap; border-width: 0; clip-path: polygon(0 0, 0 0, 0 0);}
.etcFocus { overflow: hidden; outline: 1px solid #000 !important; border-radius: 3px;}


.btn_API {  display: flex;
    align-items: center;
    justify-content: center;
    height: 3.5rem;
    width: 20rem;
    margin-left: .7rem;
    padding: 0 1.2rem;
    font-size: 1.6rem;
    white-space: nowrap;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    border-radius: 1.8rem;
    transition: color, border-color, background-color .2s ease-in-out;
}
.btn_API:hover {  color: #20599b;
    border-color: #9dd2f2;
    background-color: #d0e9f8;
}

.api_input {
    font-size: 1.5rem;
    border: 0.5 px;
    height: 3.5rem;
    width: 100%;
	}
	
