@charset "utf-8";

/*
@작업자			:홍길동
@작업완료일		:2024.01.01
@최종수정일		:2024.00.00
*/

/* 공통적인 표현을 위한 스타일 */

/* common */
html{font-size: 62.5%; height: 100%;} /* 1rem을 10px로 설정하기 위함 */
body{ height: 100%; font-size:1.5rem;line-height:1.8rem;font-family:"Pretendard", Pretendard, -apple-system, "맑은 고딕", helvetica, "Apple SD Gothic Neo", sans-serif; background-color: #333;}
.blind, caption{position:absolute;top:-1px;left:-1px;width:1px;height:1px;line-height:1px;font-size:1px;color:transparent;text-indent:-9999em;visibility:hidden;overflow:hidden}
.hidden{display:none}

.pr{position:relative}
.pl{position:absolute;left:0;top:0}
.pr{position:absolute;right:0;top:0}

.fl{float:left !important}
.fr{float:right !important}

.tl{text-align:left !important}
.tc{text-align:center !important}
.tr{text-align:right !important}

.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt25{margin-top:25px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}
.mt60{margin-top:60px !important}
.mt70{margin-top:70px !important}
.mt80{margin-top:80px !important}

.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb25{margin-bottom:25px !important}
.mb30{margin-bottom:30px !important}
.mb40{margin-bottom:40px !important}
.mb50{margin-bottom:50px !important}
.mb60{margin-bottom:60px !important}
.mb70{margin-bottom:70px !important}
.mb80{margin-bottom:80px !important}

.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.ml15{margin-left:15px !important}
.ml20{margin-left:20px !important}
.ml25{margin-left:25px !important}
.ml30{margin-left:30px !important}
.ml40{margin-left:40px !important}
.ml50{margin-left:50px !important}

.mr5{margin-right:5px !important}
.mr10{margin-right:10px !important}
.mr15{margin-right:15px !important}
.mr20{margin-right:20px !important}
.mr25{margin-right:25px !important}
.mr30{margin-right:30px !important}
.mr40{margin-right:40px !important}
.mr50{margin-right:50px !important}

/* flex */
.flx {display: flex; align-items: center;}

/* gap */
.gap-5 {gap: 5px;}
.gap-10 {gap: 10px;}
.gap-15 {gap: 15px;}
.gap-20 {gap: 20px;}
.gap-25 {gap: 25px;}
.gap-30 {gap: 30px;}
.gap-35 {gap: 35px;}
.gap-40 {gap: 40px;}
.gap-45 {gap: 45px;}
.gap-50 {gap: 50px;}


/* 변수 */
:root{
    /* color */
    --color-primary: #003A88; /*navy*/
    --color-secondary: #2772E2; /*blue*/

    --color-orange: #F76707;
    --color-green: #0DB14B;
    --color-yellowgreen: #7DC242;
    --color-skyblue: #F2F6FA;

    --color-gray10: #F9F9F9;
    --color-gray20: #eee;
    --color-gray30: #e2e2e2;

    --font-black10: #222;
    --font-black20: #444;
    --font-gray: #777;
    --font-green: #4E7B27;

    --color-stroke: #dcdcdc;

    /* size */
    --font-size: 16px;
}


/*폰트*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-display: swap;
    src: local('Pretendard-Thin'),
    url(../../font/Pretendard-Thin.woff2) format('woff2'),
    url(../../font/Pretendard-Thin.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-display: swap;
    src: local('Pretendard-ExtraLight'),
    url(../../font/Pretendard-ExtraLight.woff2) format('woff2'),
    url(../../font/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-display: swap;
    src: local('Pretendard-Light'),
    url(../../font/Pretendard-Light.woff2) format('woff2'),
    url(../../font/Pretendard-Light.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-display: swap;
    src: local('Pretendard-Regular'),
    url(../../font/Pretendard-Regular.woff2) format('woff2'),
    url(../../font/Pretendard-Regular.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-display: swap;
    src: local('Pretendard-Medium'),
    url(../../font/Pretendard-Medium.woff2) format('woff2'),
    url(../../font/Pretendard-Medium.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-display: swap;
    src: local('Pretendard-SemiBold'),
    url(../../font/Pretendard-SemiBold.woff2) format('woff2'),
    url(../../font/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-display: swap;
    src: local('Pretendard-Bold'),
    url(../../font/Pretendard-Bold.woff2) format('woff2'),
    url(../../font/Pretendard-Bold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-display: swap;
    src: local('Pretendard-ExtraBold'),
    url(../../font/Pretendard-ExtraBold.woff2) format('woff2'),
    url(../../font/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-display: swap;
    src: local('Pretendard-Black'),
    url(../../font/Pretendard-Black.woff2) format('woff2'),
    url(../../font/Pretendard-Black.woff) format('woff');
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 100;
    font-display: swap;
    src: local('Montserrat-Thin'),
    url(../../font/Montserrat-Thin.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 200;
    font-display: swap;
    src: local('Montserrat-ExtraLight'),
    url(../../font/Montserrat-ExtraLight.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 300;
    font-display: swap;
    src: local('Montserrat-Light'),
    url(../../font/Montserrat-Light.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 400;
    font-display: swap;
    src: local('Montserrat-Regular'),
    url(../../font/Montserrat-Regular.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 500;
    font-display: swap;
    src: local('Montserrat-Medium'),
    url(../../font/Montserrat-Medium.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 600;
    font-display: swap;
    src: local('Montserrat-SemiBold'),
    url(../../font/Montserrat-SemiBold.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 700;
    font-display: swap;
    src: local('Montserrat-Bold'),
    url(../../font/Montserrat-Bold.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 800;
    font-display: swap;
    src: local('Montserrat-ExtraBold'),
    url(../../font/Montserrat-ExtraBold.ttf);
}

@font-face {
    font-family: 'Montserrat';
    font-weight: 900;
    font-display: swap;
    src: local('Montserrat-Black'),
    url(../../font/Montserrat-Black.ttf);
}

@font-face {
    font-family: 'iceJaram';
    font-weight: 400;
    font-display: swap;
    src: local('iceJaram'),
    url(../../font/iceJaram.ttf);
}

@font-face {
    font-family: 'Jalnan';
    font-weight: 400;
    font-display: swap;
    src: local('Jalnan2'),
    url(../../font/Jalnan2TTF.ttf);
}