@charset "utf-8";


:root{

    /* font family */
    --font-basic: "Pretendard", "Noto Sans KR", sans-serif;

    /* font size */
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-36: 36px;

    --fs-h1: 68px;
    --fs-h2: 54px;
    --fs-h3: 44px;
    --fs-h4: 28px;

    /* brand color */
    --primary: #004098;
    --primary-1: #0B50D0;
    --primary-2: #0077FF;
    --primary-3: #0ECCE6;
    --primary-4: #2452A7;
    --primary-5: #052663;

    --secondary-1: #0295CD;
    --secondary-2: #029E93;

    /* gray scale */
    --gray-100: #f5f5f5;
    --gray-200: #cccccc;
    --gray-300: #999999;
    --gray-400: #555555;
    --gray-500: #222222;

    --point-blue: #0B50D0;
    --point-red: #FC4C4E;
    --focus: var(--point-red);

    /* base color */
    --white: #ffffff;
    --black: #000000;

    /* semantic color */
    --bg: var(--white);
    --surface: var(--gray-100);
    --border: var(--gray-200);
    --form-border: #aaa;

    --text: var(--gray-500);
    --text-muted: var(--gray-400);

}

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

        --fs-14: 14px;
        --fs-16: 15px;
        --fs-18: 16px;
        --fs-20: 18px;
        --fs-36: 28px;
        --fs-24: 20px;

        --fs-h1: 58px;
        --fs-h2: 54px;
        --fs-h3: 38px;
        --fs-h4: 24px;
        
    }
}


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

        --fs-14: 13px;
        --fs-16: 14px;
        --fs-20: 18px;
        --fs-36: 24px;
        --fs-24: 18px;

        --fs-h1: 44px;
        --fs-h2: 40px;
        --fs-h3: 32px;
        --fs-h4: 20px;
        
    }
}


@media screen and (max-width: 480px) {
    :root{
        --fs-h1: 30px;
        --fs-h2: 30px;
        --fs-h3: 28px;
        --fs-h4: 18px;
        --fs-36: 20px;
    }
}



* {
	margin:0;
	padding:0;
    box-sizing:border-box;
    letter-spacing: -1px;

    /* 사파리 브라우저 글자크기 적용 */
    -webkit-text-size-adjust: 100%;        

    /* 크롬 브라우저에서 인쇄할때 배경색도 나오게 적용 */
    -webkit-print-color-adjust:exact;
}

*::before, *::after {box-sizing: border-box; -webkit-print-color-adjust:exact;}

html {scroll-behavior:smooth;}
body {width: 100%; height: 100%; font-size: var(--fs-18); line-height: 1.6; font-weight: 400; font-family: var(--font-basic); color: var(--text);}
body[data-page-type="main"] {line-height: 1.4;}

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, font, 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, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; } 
a { color: inherit; text-decoration: inherit; } 
li { list-style: none; } 
address, em, i { font-style: normal; } 

button { background: none; border: none; } 

img {display: block; max-width:100%;}

li {list-style:none}

table {width: 100%; border-collapse: collapse; vertical-align: middle; text-align: center; table-layout: fixed;}

caption {position:absolute; left:-10000px; visibility: hidden;}

a {color: inherit; text-decoration: none; transition: all 0.3s ease; color: inherit;}

input,button,select {color: inherit; vertical-align: middle; border: 1px solid #ddd; font-size: inherit;}
input {padding: 0 10px;}
input::placeholder {font-family: 'Pretendard'; color: inherit;}
select {padding: 8px 10px;}

/* 사파리 기본 border-radius 제거 */
input:not([type="radio"]):not([type="checkbox"]) {border-radius: 0;}

select {font-family: 'Pretendard'; background-color: #fff;}
button {font-family: 'Pretendard'; background-color: transparent; border: none; cursor: pointer; transition: all 0.3s ease;}
textarea {width: 100%; resize: none;}

blockquote,fieldset,iframe{border:0}

address {font-style: normal;}

label {cursor: pointer; display: inline-flex; align-items: center;}

article,aside,details,figcaption,figure,footer,header,nav,section {display:block; width: 100%;}

.sr-only {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px;overflow: hidden; } 


/* 키보드 포커스 표시 */
a:focus-visible,
button:focus-visible,
/* input:not([type="checkbox"]):focus-visible,
input:not([type="radio"]):focus-visible, */
/* select:focus-visible,
textarea:focus-visible, */
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible{
  outline: 3px solid var(--point-red);
  outline-offset: 3px;
}

:focus:not(:focus-visible){
  outline: none;
}

/***************************************************************

	Web Font

***************************************************************/


/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    src: url('/resources/user/eng/font/Pretendard/Pretendard-Light.subset.woff2') format('woff2'),
        url('/resources/user/eng/font/Pretendard/Pretendard-Light.subset.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('/resources/user/eng/font/Pretendard/Pretendard-Regular.subset.woff2') format('woff2'),
        url('/resources/user/eng/font/Pretendard/Pretendard-Regular.subset.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('/resources/user/eng/font/Pretendard/Pretendard-Medium.subset.woff2') format('woff2'),
        url('/resources/user/eng/font/Pretendard/Pretendard-Medium.subset.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('/resources/user/eng/font/Pretendard/Pretendard-SemiBold.subset.woff2') format('woff2'),
        url('/resources/user/eng/font/Pretendard/Pretendard-SemiBold.subset.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    src: url('/resources/user/eng/font/Pretendard/Pretendard-Bold.subset.woff2') format('woff2'),
        url('/resources/user/eng/font/Pretendard/Pretendard-Bold.subset.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}