@font-face {
    font-family: 'NanumSquare';
    src: url('/fonts/NanumSquareR.otf') format('opentype');
    font-weight: 500; /* Regular 폰트 */
    font-style: normal;
    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+0041-005A, U+0061-007A, U+0030-0039;
}
@font-face {
    font-family: 'NanumSquare';
    src: url('/fonts/NanumSquareL.otf') format('opentype');
    font-weight: 300; /* Regular 폰트 */
    font-style: normal;
    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+0041-005A, U+0061-007A, U+0030-0039;
}
@font-face {
    font-family: 'NanumSquare';
    src: url('/fonts/NanumSquareB.otf') format('opentype');
    font-weight: bold; /* Regular 폰트 */
    font-style: normal;
    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+0041-005A, U+0061-007A, U+0030-0039;
}

/* 모바일웹 css 설정 */
html {
    /* 화면을 길게 누르고 있을때 뜨는 팝업이나 액션시트를 제어 */
    -webkit-touch-callout:none;
    /* 텍스트나 이미지를 선택할 수 있게 하는 여부를 제어 */
    -webkit-user-select: none;
    /* 링크를 터치했을때 나오는 기본 영역의 색상을 제어 */
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

body, button, input {font-family: 'NanumSquare', sans-serif;}
button {border: none; background-color: transparent; padding: 0; margin: 0;}
body {overflow: hidden;}
div {box-sizing: border-box;}
button {cursor: pointer;}
input {border-radius: 0;}

a {line-height: 1;}
a:link {color:#000; text-decoration: none;}
a:visited {color:#000; text-decoration: none;}

.mgt-5 {margin-top: 0.3125rem;}
.mgt-10 {margin-top: 0.625rem;}
.mgt-20 {margin-top: 1.25rem;}
.mgt-30 {margin-top: 1.875rem;}
.mgt-32 {margin-top: 2rem;}
.mgt-50 {margin-top: 3.125rem;}
.mgt-64 {margin-top: 4rem;}

.mgb-5 {margin-bottom: 0.3125rem;}
.mgb-10 {margin-bottom: 0.625rem;}
.mgb-20 {margin-bottom: 1.25rem;}
.mgb-30 {margin-bottom: 1.875rem;}
.mgb-40 {margin-bottom: 2.5rem;}

.mgr-5 {margin-right: 0.3125rem;}
.mgr-10 {margin-right: 0.625rem;}
.mgr-20 {margin-right: 1.25rem;}
.mgr-30 {margin-right: 1.875rem;}
.mgr-40 {margin-right: 2.5rem;}
.mgr-100 {margin-right: 6.25rem;}
.mgr-125 {margin-right: 7.8125rem;}

.mgl-10 {margin-left: 0.625rem;}
.mgl-170 {margin-left: 10.625rem;}

.pdt-10 {padding-top: 0.625rem;}

.pdb-40 {padding-bottom: 2.5rem;}

.pdl-10 {padding-left: 0.625rem;}
.pdl-20 {padding-left: 1.25rem;}
.pdl-30 {padding-left: 1.875rem;}

.pdr-10 {padding-right: 0.625rem;}
.pdr-20 {padding-right: 1.25rem;}
.pdr-30 {padding-right: 1.875rem;}

/* font size */
.text-xs {font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */}
.text-sm {font-size: 0.875rem; /* 14px */line-height: 1.25rem; /* 20px */}
.text-base {font-size: 1rem; /* 16px */line-height: 1.5rem; /* 24px */}
.text-lg {font-size: 1.125rem; /* 18px */line-height: 1.75rem; /* 28px */}
.text-xl {font-size: 1.25rem; /* 20px */line-height: 1.75rem; /* 28px */}
.text-2xl {font-size: 1.5rem; /* 24px */line-height: 2rem; /* 32px */}
.text-3xl {font-size: 1.875rem; /* 30px */line-height: 2.25rem; /* 36px */}
.text-4xl {font-size: 2.25rem; /* 36px */line-height: 2.5rem; /* 40px */}
.text-5xl {font-size: 3rem; /* 48px */line-height: 1;}
.text-6xl {font-size: 3.75rem; /* 60px */line-height: 1;}
.text-7xl {font-size: 4.5rem; /* 72px */line-height: 1;}
.text-8xl {font-size: 6rem; /* 96px */line-height: 1;}
.text-9xl {font-size: 8rem; /* 128px */line-height: 1;}

/* font weight */
.font-light	{font-weight: 300;}
.font-normal {font-weight: 500;}
.font-bold {font-weight: bold;}

/* text align */
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

/* color */
:root {
    --primary-color: #532080;
    --secondary-color: #EFE7FC;
    --third-color: #3C185C;
    --fourth-color: #A898C5;
    --lightgray-color: #F6F6F6;
    --darkgray-color: #EFEFEF;
    --darkgray2-color: #CCCCCC;
    --black-color: #000;
    --white-color: #fff;
    --title-text-color: #505050;
    --light-text-color: #888888;
    --content-text-color: #1A1311;

    --mdc-theme-primary: black;
    --mdc-theme-secondary: #532080;
    --mdc-ripple-color: transparent;
}