@font-face {
    font-family: "Pretendard-Thin";
    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-ExtraLight";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff")
    format("woff");
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: "Pretendard-Light";
    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-Regular";
    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-Medium";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff")
    format("woff");
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: "Pretendard-SemiBold";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff")
    format("woff");
    font-weight: 600;
    font-style: normal;
}      
@font-face {
    font-family: "Pretendard-Bold";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff")
    format("woff");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Pretendard-ExtraBold";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff")
    format("woff");
    font-weight: 800;
    font-style: normal;
}
@font-face {
    font-family: "Pretendard-Black";
    src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff")
    format("woff");
    font-weight: 900;
    font-style: normal;
}
.font-thin {font-family: "Pretendard-Thin";}
.font-extralight {font-family: "Pretendard-ExtraLight";}
.font-light {font-family: "Pretendard-Light";}
.font-regular {font-family: "Pretendard-Regular";}
.font-medium {font-family: "Pretendard-Medium";}
.font-semibold {font-family: "Pretendard-SemiBold";}
.font-bold {font-family: "Pretendard-Bold";}
.font-extrabold {font-family: "Pretendard-ExtraBold";}
.font-black {font-family: "Pretendard-Black";}

.brandColor01 {color:#8E43E9;}
.brandColor02 {color:#7138C1;}
.brandColor03 {color:#522396;}

.brandColorBg01 {background-color:#8E43E9;}
.brandColorBg02 {background-color:#7138C1;}
.brandColorBg03 {background-color:#522396;}

.h0 {font-size:32px;}
.h1 {font-size:26px;}
.h2 {font-size:20px;}
.h3 {font-size:18px;}
.h4 {font-size:16px;}
.h5 {font-size:14px;}
.h6 {font-size:12px;}
.h7 {font-size:10px;}

.dackColor900 {color:#232527;}
.dackColor800 {color:#444444;}
.dackColor700 {color:#636363;}
.dackColor600 {color:#777777;}
.dackColor500 {color:#A5A5A5;}
.dackColor400 {color:#BFBFBF;}
.dackColor300 {color:#E2E2E2;}
.dackColor200 {color:#EFEFEF;}
.dackColor100 {color:#F5F5F5;}
.dackColor50 {color:#FAFAFA;}

.dackBgColor900 {background-color:#232527;}
.dackBgColor800 {background-color:#444444;}
.dackBgColor700 {background-color:#636363;}
.dackBgColor600 {background-color:#777777;}
.dackBgColor500 {background-color:#A5A5A5;}
.dackBgColor400 {background-color:#BFBFBF;}
.dackBgColor300 {background-color:#E2E2E2;}
.dackBgColor200 {background-color:#EFEFEF;}
.dackBgColor100 {background-color:#F5F5F5;}
.dackBgColor50 {background-color:#FAFAFA;}

.rightRedColor {color:#ff514b;}

body {font-family: "Pretendard-Regular";}

.w-p-1 { padding-left:1%; padding-right: 1%;}
.w-p-2 { padding-left:2%; padding-right: 2%;}

.p-t-10 { padding-top:10px;}
.p-t-20 { padding-top:20px;}
.p-t-30 { padding-top:30px;}
.p-t-40 { padding-top:40px;}
.p-t-50 { padding-top:50px;}

.p-b-10 { padding-bottom:10px;}
.p-b-20 { padding-bottom:20px;}
.p-b-30 { padding-bottom:30px;}
.p-b-40 { padding-bottom:40px;}
.p-b-50 { padding-bottom:50px;}

.p-l-10 { padding-left:10px;}
.p-l-20 { padding-left:20px;}
.p-l-30 { padding-left:30px;}
.p-l-40 { padding-left:40px;}
.p-l-50 { padding-left:50px;}

.p-r-10 { padding-right:10px;}
.p-r-20 { padding-right:20px;}
.p-r-30 { padding-right:30px;}
.p-r-40 { padding-right:40px;}
.p-r-50 { padding-right:50px;}

.m-t-10 { margin-top:10px;}
.m-t-20 { margin-top:20px;}
.m-t-30 { margin-top:30px;}
.m-t-40 { margin-top:40px;}
.m-t-50 { margin-top:50px;}

.m-b-10 { margin-bottom:10px;}
.m-b-20 { margin-bottom:20px;}
.m-b-30 { margin-bottom:30px;}
.m-b-40 { margin-bottom:40px;}
.m-b-50 { margin-bottom:50px;}

.m-l-10 { margin-left:10px;}
.m-l-20 { margin-left:20px;}
.m-l-30 { margin-left:30px;}
.m-l-40 { margin-left:40px;}
.m-l-50 { margin-left:50px;}

.m-r-10 { margin-right:10px;}
.m-r-20 { margin-right:20px;}
.m-r-30 { margin-right:30px;}
.m-r-40 { margin-right:40px;}
.m-r-50 { margin-right:50px;}