@charset "utf-8";

/*font set*/
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

html {
    height: -webkit-fill-available;
    scroll-behavior: smooth;
}

body {
    font-family: 'pretendard';
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
    color: #333333;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* SCROLL */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0);
    display: none;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgba(000, 000, 000, 0.3);
}

::-webkit-scrollbar-button {
    display: none;
}


/* Drag color(text block color */

::selection {
    color: #fff;
    background: #18525e;
}

::-moz-selection {
    color: #fff;
    background: #18525e;
}


/*고정설정*/
html {
    scroll-behavior: smooth;
}

ul,
li {
    list-style: none;
}

hr {
    border: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

a {
    text-decoration: none;
    color: #9F9F9F;
}

.texthidden {
    text-indent: -99999px;
    font-size: 0;
}


/*input 포커싱 라인 제거*/
input:focus,
option:focus,
select:focus {
    outline: none;
}

/*말줄임표 Class*/
.omit {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*모바일 내비게이션 바*/
.mobile-aside {
    width: 80%;
    height: 72px;
    position: fixed;
    bottom: 24px;
    left: 10%;
    border-radius: 8px;
    text-align: center;
    overflow: hidden;
    background: rgba(240, 240, 240, 0.7);
    color: #1A2229;
    padding-top: 8px;
    box-sizing: border-box;
    display: none;
}

.mobile-aside li {
    width: 33%;
}

.mobile-aside a {
    height: 72px;
    display: inline-block;
    color: #1A2229;
}

.mobile-aside p {
    font-size: 0.9em;
    font-weight: 700;
}

.mobile-aside span {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #639DB0;
    display: inline-block;
}

/*flex 단축*/
.flx-center {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
}

/*
!! - 아래는 일괄 컨텐츠에 주는 명령어임 - !!

[아이템 정렬 명령어]
flex-direction: row; - 아이템 좌측정렬
flex-direction: row-reverse; - 아이템 우측정렬
flex-direction: column; - 가로 100% 크기로 위에서 아래로 정렬
flex-direction: column-reverse; - 가로 100% 크기로 아래 위로 정렬

[아이템이 컨텐츠 영역을 초과시 줄바꿈 명령어]
flex-wrap: nowrap; - 줄 바꾸지 않고 삐져나감
flex-wrap: wrap; - 줄 바꾸고 위에서 아래로 정렬
flex-wrap: wrap-reverse; - 줄 바꾸고 아래서 위로 정렬

[컨텐츠의 축을 지정해 아이템을 자동 정렬하게 하는 명령어]
justify-content: flex-start; - 가장 좌측부터 시작하는 기본 정렬, 아이템 w값 기본 상태
justify-content: flex-end; - 가장 우측부터 시작하는 정렬, 아이템 w값 기본 상태
justify-content: center; - 중앙 정렬로 시작하는 정렬, 아이템 w값 기본 상태
justify-content: space-between; - 아이템 사이에 자동으로 마진값을 넣어서 컨텐츠에 가득 차게 정렬하는 상태(아이템이 컨텐츠 좌우에 딱 붙음)
justify-content: space-around; - 아이템 사이에 자동으로 마진값을 넣어서 컨텐츠에 가득 차게 정렬하는 상태(아이템이 컨텐츠 좌우에 여백을 둔 상태로 정렬됨)

[수직 정렬 명령어]
align-items: stretch; - 아이템의 h값을 컨텐츠에 100%로 맞춤
align-items: flex-start; - 상단 정렬
align-items: flex-end; - 하단 정렬
align-items: center; - 중앙 정렬
align-items: baseline; - 텍스트 베이스라인 기준으로 정렬

[아이템의 행이 2줄 이상일때 정렬 명령어]
align-content: stretch; - 컨텐츠의 높이값에서 자동으로 계산에 종합적으로 100%가 되도록 정렬
align-content: flex-start; - 상단으로 기본정렬
align-content: flex-end; - 하단으로 기본정렬
align-content: center; - 중앙으로 기본정렬 
align-content: space-between; - 시작줄은 상단에 끝줄은 하단에 딱 붙여서 정렬
align-content: space-around; - 위의 설정에 상하단에 마진이 있는 상태로 정렬
align-content: space-evenly; - 위의 설정에 마진의 간격이 동일한 상태로 정렬
*/

/*.lin-center{vertical-align: bottom;} - 한 그룹으로 묶여있는 인라인 블록의 위치를 앞의 블록 바텀에 맞춤 */

.bg_gredetion { /* URL 또는 문자열 필요 */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), #fff);
}

/*위와같이 ,를 적용하면 이미지에 효과 중복 적용ㅇ ㅣ가능함 대박대박*/



/*반응형 - 1240*/
@media screen and (max-width: 1240px) {
    aside {
        display: none;
    }

    .mobile-aside{
        display: block;
    }
}