*{
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', system-ui, Roboto, 'Helvetica Neue', sans-serif;
    letter-spacing: -0.5px;
    line-height: 1.2;
    font-weight: 400;
    --PC_MAX_WIDTH: 1400px;
    --MOBILE_MAX_WIDTH: 100%;
    --HEADER_HEIGHT: 70px;
}

button{padding:0; color: #1a1a1a;}
html, body{  margin:0; padding:0; background: #1a1a1a;}
html {
    overflow-x: hidden;
    overscroll-behavior: none;
    height: 100%;
}
/* 기본 스타일 */

body {
    overflow-x: hidden;
    overflow-y: visible;
    margin:0;
    padding:0;
    min-height: 100%;
    font-size: 14px;
    line-height: 1;
    color: #333;
    -webkit-tap-highlight-color: transparent;
    display: block;
}
body::-webkit-scrollbar{
    /* display: none; */
}
body.no-scroll{
    overflow:hidden;
    position: fixed;
    touch-action: none;
}
body.pc .media-type-pc,
body.mobile .media-type-mobile,
body.tablet .media-type-tablet{
    display: flex;
}
body.pc .media-type-mobile,
body.pc .media-type-tablet,
body.mobile .media-type-pc,
body.mobile .media-type-tablet,
body.tablet .media-type-pc,
body.tablet .media-type-mobile{
    display: none;
}
form{padding:0; margin:0;}
/* 기본 링크 스타일 */
a {
    color: inherit;
    text-decoration: none;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
select{
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
p{
    margin: 0;
}
/* 버튼 리셋 */
button {
    border: none;
    background: none;
    cursor: pointer;
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
/* input, textarea 기본 글꼴 적용 */
input, textarea {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: transparent;
    color: #333;
}
input:focus, textarea:focus {
    outline: none;
    box-shadow: none;
    border: none;
}
ul, ol{list-style: none; padding:0; margin: 0;}


main{
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    z-index: 0;
    width: 100%;
    margin-top: 70px;
    overflow-x: hidden;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

main::-webkit-scrollbar {
    width: 4px;                          /* 세로 스크롤 너비 */
    height: 4px;                         /* 가로 스크롤 높이 */
}

main::-webkit-scrollbar-track {
    background: #ddd;                 /* 트랙 배경 */

}

main::-webkit-scrollbar-thumb {
    background: #aaa;                    /* thumb 색 */
    border-radius: 10px;
}

main::-webkit-scrollbar-thumb:hover {
    background: #555;                    /* hover 시 색 진하게 */
}

main::-webkit-scrollbar-corner {
    background: #f1f1f1;                 /* 모서리 부분 */
}



main > section.wrap{
    display: flex;
    flex-direction: column;
}
.text{
    white-space: normal;
    word-break: keep-all;
    line-height: 1.2;
}
.text.quill p{
    font-size: 20px;
}
/* 테두리 스타일 (FILL 0) */
.icon-thin         { font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24; }
.icon-light        { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24; }
.icon-regular      { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-medium       { font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.icon-bold         { font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24; }

/* 채워진 스타일 (FILL 1) */
.icon-thin-filled   { font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 24; }
.icon-light-filled  { font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 0, 'opsz' 24; }
.icon-regular-filled{ font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-medium-filled { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.icon-bold-filled   { font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 24; }








.margin-rl-8px{margin-right: 8px; margin-left: 8px; }
.margin-rl-6px{margin-right: 6px; margin-left: 6px; }
.margin-rl-4px{margin-right: 4px; margin-left: 4px; }
.font-weight-700{font-weight: 700!important;}
.font-weight-600{font-weight: 600!important;}
.font-weight-500{font-weight: 500!important;}
.text.color-red{color: red!important;}

/* 헤더 스타일 */
header {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    z-index: 10;
    height: var(--HEADER_HEIGHT);
    background: #1a1a1a;
	transform: translateY(0);
	transition: transform 0.1s ease;
	will-change: transform;
}
header > .wrapper{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;

}
header.hiding {
    transform: translateY(-100%);
}
.color-red{color: red!important;}
.color-main-black{color: #333;}
.color-main-white{color: #fafafa;}
.color-main-highlight{color: #3f4448;}
.color-main-highlight-gradient-text{
    background: linear-gradient(90deg, #333, #3f4448);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.invisible, .hide{
    display: none;
}

/* 푸터 스타일 */
footer {
    margin-top: auto;
    height: 0;
    min-height: 0;
    position: relative;
    z-index: 0;
    display: flex;
}

/* 에러 페이지 스타일 */
.error-template {
    padding: 40px 15px;
}






.list-shadow{
    position: absolute;
    z-index: 3;
}

.list-shadow.top{
    width: 100%;
    height: 40px;
    top:0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}
.list-shadow.bottom{
    width: 100%;
    height: 40px;
    bottom:0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}
.list-shadow.left{
    width: 40px;
    height: 100%;
    left:0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}
.list-shadow.right{
    width: 40px;
    height: 100%;
    right:0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0));
}


.text-group{
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: start;
}
/* 기본 설정 */

.col-group{
    display: flex;
    flex-direction: row;
}

.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top:0;
    padding-bottom:0;
    padding-left:0;
    padding-right:0;
}

.container .box{
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
}

input{
    padding: 0 10px;
    transition: border-color 0.3s ease;
    outline: none;
    height: 45px;
    border-radius: 10px;
    border: 1px solid #aaa;
    background: #fff;
}
input:focus{
    border: 1px solid #00d4c5;
    transition: border-color 0.3s ease;
    outline: none;
}

/** S : 해상도 분기 - 1 :: 기기의 가로 기준 해상도 */

/* 모바일 + 태블릿 */
@media (max-width: 1199px){
  

}

/* 모바일 - 저해상도, 구형 스마트폰 */
@media (max-width: 359px){
   
}

/* 모바일 - 일반 (기본 베이스) */
@media (min-width: 360px) and (max-width: 767px){
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1199px){

    
    
}


/* PC - 일반 (기본 베이스) */
@media (min-width: 1200px) {


    

}

/* PC - 2k (qhd 기준 2560px * 1440px) */
@media (min-width: 2400px) {
}

/* PC - 4k (uhd 기준 3840px * 2160px)*/
@media (min-width: 3000px) {
}

/** E : 해상도 분기 - 1 :: 기기의 가로 기준 해상도 */


/** S : 해상도 분기 - 2 :: 기기의 가로/세로 해상도, 화면 방향 기준 */

/* 모바일 + 태블릿 */
@media (max-width: 1199px), (orientation: portrait), (min-width: 3841px), (min-height: 2161px) { 

 


}

/* 모바일 - 일반 (기본 베이스) */
@media (min-width: 1px) and (max-width: 767px) {

    

}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1199px), (min-width: 768px) and (orientation: portrait), (min-width: 3841px), (min-height: 2161px) { 


    
}



/* PC - 일반 (기본 베이스) */
@media (min-width: 1200px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {

 
}

/* PC - 2k (qhd 기준 2560px * 1440px) */
@media (min-width: 2400px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {
}

/* PC - 4k (uhd 기준 3840px * 2160px)*/
@media (min-width: 3000px) and (orientation: landscape) and (max-width: 3840px) and (max-height: 2160px) {
}

/** E : 해상도 분기 - 2 :: 기기의 가로/세로 해상도, 화면 방향 기준 */

/* Quill 에디터 사이즈 클래스 */
.ql-size-small {
    font-size: 14px !important;
}

.ql-size-normal {
    font-size: 20px !important;
}

.ql-size-large {
    font-size: 26px !important;
}

.ql-size-huge {
    font-size: 32px !important;
}
.ql-align-center{
    text-align: center !important;
}