/* --------------------

2번째로 호출

이 파일은 각 프로젝트에 따라 변경이 있는 유동적인 개별 css 입니다.
해당 프로젝트에만 쓰일 색상, 폰트, padding값 등 기본적인것은 이곳에 작성해 주세요.

기본값으로 설정된것은

font-family: 'Noto Sans KR', sans-serif;
color: #1c1c1c;
line-height: 100%;
font-weight: normal;
font-size: 18px;
line-height: 100%;
letter-spacing: -0.5px;

입니다.

해당 프로젝트에 관련된 변경사항이 있을때는 reset.css대신
현재 파일인 styleguide.css에 작성해주세요.

-------------------- */

/* --------------------

z-index 현황




-------------------- */

*{
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: -0.05em;
}
body{
    font-size: 16px;
    color: #1c1c1c;
    font-weight: 400;
}
.center{
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
}
.center1400{
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}
.center1500{
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}
.center1200{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}
.center1000{
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
::placeholder{color: #999;}
input, select, textarea{color: #333;}



/* ---------------커스텀 클래스--------------- */
/* ------------------------------------------------------------
.ctm :  small, em, i, b, strong, u 등 에디터 사용시 글자 관련
        스타일 미적용 방지를 위하여 따로 작성함.
        html, php에 위 태그들을 style 초기화해서 사용 할 경우 ctm 속성 추가해서 사용.

        ※꼭! 에디터로 작성된 내용이 안들어가는 객체에만 사용하세요.
        (ex. view 페이지 내용 출력 부분에는 사용 X)
------------------------------------------------------------ */
.ctm{
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    font-style: inherit;
    text-decoration: none;
    font-size: inherit;
}
.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
.hidden{
    position: fixed;
    left: -100000px;
}
.clear{clear: both;}
.pe-none{pointer-events: none;}
.tal{text-align: left;}
.tar{text-align: right;}
.tac{text-align: center;}
.test-section{height: 2000px; background-color: yellowgreen;}
.drag-none{-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
@media screen and (max-width:600px){
    .mobile-none{display: none;}
}
/* ---------------커스텀 클래스 end--------------- */



/* ---------------폰트 관련--------------- */
@font-face{
    font-family: 'Noto Sans KR';
    src:url(/assets/fonts/NotoSansKR/NotoSansKR-Light.woff) format('woff');
    font-style: normal;
    font-weight: 300;
}
@font-face{
    font-family: 'Noto Sans KR';
    src:url(/assets/fonts/NotoSansKR/NotoSansKR-Regular.woff) format('woff');
    font-style: normal;
    font-weight: 400;
}
@font-face{
    font-family: 'Noto Sans KR';
    src:url(/assets/fonts/NotoSansKR/NotoSansKR-Medium.woff) format('woff');
    font-style: normal;
    font-weight: 500;
}
@font-face{
    font-family: 'Noto Sans KR';
    src:url(/assets/fonts/NotoSansKR/NotoSansKR-Bold.woff) format('woff');
    font-style: normal;
    font-weight: 700;
}
@font-face{
    font-family: 'Noto Sans KR';
    src:url(/assets/fonts/NotoSansKR/NotoSansKR-Black.woff) format('woff');
    font-style: normal;
    font-weight: 900;
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 300;
    src: url(/assets/fonts/LexendDeca/LexendDeca-Light.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/LexendDeca/LexendDeca-Regular.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 500;
    src: url(/assets/fonts/LexendDeca/LexendDeca-Medium.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 600;
    src: url(/assets/fonts/LexendDeca/LexendDeca-SemiBold.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 700;
    src: url(/assets/fonts/LexendDeca/LexendDeca-Bold.ttf) format('truetype');
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-Thin.woff2) format('woff2');
    font-style: normal;
    font-weight: 100;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-ExtraLight.woff2) format('woff2');
    font-style: normal;
    font-weight: 200;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-Light.woff2) format('woff2');
    font-style: normal;
    font-weight: 300;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-Regular.woff2) format('woff2');
    font-style: normal;
    font-weight: 400;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-Medium.woff2) format('woff2');
    font-style: normal;
    font-weight: 500;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-SemiBold.woff2) format('woff2');
    font-style: normal;
    font-weight: 600;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-Bold.woff2) format('woff2');
    font-style: normal;
    font-weight: 700;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-ExtraBold.woff2) format('woff2');
    font-style: normal;
    font-weight: 800;
}
@font-face{
    font-family: 'Pretendard';
    src: url(/assets/fonts/Pretendard/Pretendard-Black.woff2) format('woff2');
    font-style: normal;
    font-weight: 900;
}
.eng{font-family: 'Lexend Deca';}
.eng, .eng *, .eng-all, .eng-all *{letter-spacing: 0;}
.eng-all *{font-family: 'Lexend Deca';}
.kr, .kr-all *{font-family: 'Noto Sans KR';}
.kr2, .kr2-all *{font-family: 'Pretendard'; letter-spacing: 0;}
.fw200{font-weight: 200;}
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}
.fw700{font-weight: 700;}
.fw900{font-weight: 900;}
/* ---------------폰트 관련 end--------------- */



/* ---------------color 관련--------------- */
.focus-bdcb .select:focus, .focus-bdcb .text-input:focus, .focus-bdcb .textarea:focus{border-color: #1c1c1c !important;}
.focus-bdcp .select:focus, .focus-bdcp .text-input:focus, .focus-bdcp .textarea:focus{border-color: #601986 !important;}
.focus-bdco .select:focus, .focus-bdco .text-input:focus, .focus-bdco .textarea:focus{border-color: #f76a00 !important;}
.focus-bdcr .select:focus, .focus-bdcr .text-input:focus, .focus-bdcr .textarea:focus{border-color: #ff0000 !important;}
@media screen and (min-width:850.1px){
    .focus-bdcb .select:hover, .focus-bdcb .text-input:hover, .focus-bdcb .textarea:hover{border-color: #1c1c1c !important;}
    .focus-bdcp .select:hover, .focus-bdcp .text-input:hover, .focus-bdcp .textarea:hover{border-color: #601986 !important;}
    .focus-bdco .select:hover, .focus-bdco .text-input:hover, .focus-bdco .textarea:hover{border-color: #f76a00 !important;}
    .focus-bdcr .select:hover, .focus-bdcr .text-input:hover, .focus-bdcr .textarea:hover{border-color: #ff0000 !important;}
}



.bdcb{border-color: #1c1c1c !important;}
.bdcp{border-color: #601986 !important;}
.bdco{border-color: #f76a00 !important;}
.bdcr{border-color: #ff0000 !important;}



.before-bgc-b1::before{background-color: #1c1c1c;}
.before-bgc-b2::before{background-color: #2c2c2c;}
.before-bgc-b3::before{background-color: #3b3b3b;}
.before-bgc-b4::before{background-color: #404040;}
.before-bgcw::before{background-color: #FFF;}
.before-bgcb::before{background-color: #1c1c1c;}
.before-bgcp::before{background-color: #601986;}
.before-bgco::before{background-color: #f76a00;}
.before-bgcr::before{background-color: #ff0000;}
.before-bgc1::before{background-color: #bab8b6;}
.before-bgc2::before{background-color: ;}
.before-bgc3::before{background-color: ;}
.before-bgc-g1::before{background-color: #f7f7f7;}
.before-bgc-g2::before{background-color: #c5c5c5;}
.before-bgc-g3::before{background-color: #7f7f7f;}
.before-bgc-g4::before{background-color: #646464;}
.before-bgc-g5::before{background-color: #ACACAC;}
.before-bgc-g6::before{background-color: #f5f5f5;}



.bgc-b1{background-color: #1c1c1c;}
.bgc-b2{background-color: #2c2c2c;}
.bgc-b3{background-color: #3b3b3b;}
.bgc-b4{background-color: #404040;}
.bgcw{background-color: #FFF;}
.bgcb{background-color: #1c1c1c;}
.bgcp{background-color: #601986;}
.bgco{background-color: #f76a00;}
.bgcr{background-color: #ff0000;}
.bgc1{background-color: #bab8b6;}
.bgc2{background-color: ;}
.bgc3{background-color: ;}
.bgc-g1{background-color: #f7f7f7;}
.bgc-g2{background-color: #c5c5c5;}
.bgc-g3{background-color: #7f7f7f;}
.bgc-g4{background-color: #646464;}
.bgc-g5{background-color: #ACACAC;}
.bgc-g6{background-color: #f5f5f5;}



.before-bgc-hitfit-green::before{background-color: #86ffaa;}
.before-bgc-hitfit-pink::before{background-color: #fdb3fd;}
.before-bgc-hitfit-red::before{background-color: #ff5249;}
.before-bgc-hitfit-blue::before{background-color: #737bfb;}
.bgc-hitfit-green{background-color: #86ffaa;}
.bgc-hitfit-pink{background-color: #fdb3fd;}
.bgc-hitfit-red{background-color: #ff5249;}
.bgc-hitfit-blue{background-color: #737bfb;}
.txc-hitfit-green{color: #86ffaa;}
.txc-hitfit-pink{color: #fdb3fd;}
.txc-hitfit-red{color: #ff5249;}
.txc-hitfit-blue{color: #737bfb;}



.txc-b1{color: #1c1c1c;}
.txc-b2{color: #2c2c2c;}
.txc-b3{color: #3b3b3b;}
.txc-b4{color: #404040;}
.txcw{color: #FFF;}
.txcb{color: #1c1c1c;}
.txcp{color: #601986;}
.txco{color: #f76a00;}
.txcr{color: #ff0000;}
.txc1{color: #bab8b6;}
.txc2{color: ;}
.txc3{color: ;}
.txc-g1{color: #f7f7f7;}
.txc-g2{color: #c5c5c5;}
.txc-g3{color: #7f7f7f;}
.txc-g4{color: #646464;}
.txc-g5{color: #ACACAC;}
.txc-g6{color: #f5f5f5;}
/* ---------------color 관련 end--------------- */



/* ---------------padding 관련--------------- */
.pd50{
    padding: 50px 0;
    box-sizing: border-box;
}
.pdt50{
    padding-top: 50px;
    box-sizing: border-box;
}
.pdb50{
    padding-bottom: 50px;
    box-sizing: border-box;
}
.pd70{
    padding: 70px 0;
    box-sizing: border-box;
}
.pdt70{
    padding-top: 70px;
    box-sizing: border-box;
}
.pdb70{
    padding-bottom: 70px;
    box-sizing: border-box;
}
.pd100{
    padding: 100px 0;
    box-sizing: border-box;
}
.pdt100{
    padding-top: 100px;
    box-sizing: border-box;
}
.pdb100{
    padding-bottom: 100px;
    box-sizing: border-box;
}
.pd150{
    padding: 150px 0;
    box-sizing: border-box;
}
.pdt150{
    padding-top: 150px;
    box-sizing: border-box;
}
.pdb150{
    padding-bottom: 150px;
    box-sizing: border-box;
}
.pd200{
    padding: 200px 0;
    box-sizing: border-box;
}
.pdt200{
    padding-top: 200px;
    box-sizing: border-box;
}
.pdb200{
    padding-bottom: 200px;
    box-sizing: border-box;
}
@media screen and (max-width:1350px){
    .pd50{padding: 45px 0;}
    .pdt50{padding-top: 45px;}
    .pdb50{padding-bottom: 45px;}
    .pd70{padding: 67px 0;}
    .pdt70{padding-top: 67px;}
    .pdb70{padding-bottom: 67px;}
    .pd100{padding: 85px 0;}
    .pdt100{padding-top: 85px;}
    .pdb100{padding-bottom: 85px;}
    .pd150{padding: 135px 0;}
    .pdt150{padding-top: 135px;}
    .pdb150{padding-bottom: 135px;}
    .pd200{padding: 180px 0;}
    .pdt200{padding-top: 180px;}
    .pdb200{padding-bottom: 180px;}
}
@media screen and (max-width:1150){
    .pd50{padding: 40px 0;}
    .pdt50{padding-top: 40px;}
    .pdb50{padding-bottom: 40px;}
    .pd70{padding: 55px 0;}
    .pdt70{padding-top: 55px;}
    .pdb70{padding-bottom: 55px;}
    .pd100{padding: 70px 0;}
    .pdt100{padding-top: 70px;}
    .pdb100{padding-bottom: 70px;}
    .pd150{padding: 120px 0;}
    .pdt150{padding-top: 120px;}
    .pdb150{padding-bottom: 120px;}
    .pd200{padding: 160px 0;}
    .pdt200{padding-top: 160px;}
    .pdb200{padding-bottom: 160px;}
}
@media screen and (max-width:850px){
    .pd50{padding: 35px 0;}
    .pdt50{padding-top: 35px;}
    .pdb50{padding-bottom: 35px;}
    .pd70{padding: 47px 0;}
    .pdt70{padding-top: 47px;}
    .pdb70{padding-bottom: 47px;}
    .pd100{padding: 62px 0;}
    .pdt100{padding-top: 62px;}
    .pdb100{padding-bottom: 62px;}
    .pd150{padding: 100px 0;}
    .pdt150{padding-top: 100px;}
    .pdb150{padding-bottom: 100px;}
    .pd200{padding: 140px 0;}
    .pdt200{padding-top: 140px;}
    .pdb200{padding-bottom: 140px;}
}
@media screen and (max-width:600px){
    .pd50{padding: 30px 0;}
    .pdt50{padding-top: 30px;}
    .pdb50{padding-bottom: 30px;}
    .pd70{padding: 40px 0;}
    .pdt70{padding-top: 40px;}
    .pdb70{padding-bottom: 40px;}
    .pd100{padding: 55px 0;}
    .pdt100{padding-top: 55px;}
    .pdb100{padding-bottom: 55px;}
    .pd150{padding: 85px 0;}
    .pdt150{padding-top: 85px;}
    .pdb150{padding-bottom: 85px;}
    .pd200{padding: 120px 0;}
    .pdt200{padding-top: 120px;}
    .pdb200{padding-bottom: 120px;}
}
@media screen and (max-width:450px){
    .pd50{padding: 25px 0;}
    .pdt50{padding-top: 25px;}
    .pdb50{padding-bottom: 25px;}
    .pd70{padding: 35px 0;}
    .pdt70{padding-top: 35px;}
    .pdb70{padding-bottom: 35px;}
    .pd100{padding: 45px 0;}
    .pdt100{padding-top: 45px;}
    .pdb100{padding-bottom: 45px;}
    .pd150{padding: 70px 0;}
    .pdt150{padding-top: 70px;}
    .pdb150{padding-bottom: 70px;}
    .pd200{padding: 90px 0;}
    .pdt200{padding-top: 90px;}
    .pdb200{padding-bottom: 90px;}
}
@media screen and (max-width:350px){
    .pd100{padding: 40px 0;}
    .pdt100{padding-top: 40px;}
    .pdb100{padding-bottom: 40px;}
    .pd150{padding: 60px 0;}
    .pdt150{padding-top: 60px;}
    .pdb150{padding-bottom: 60px;}
    .pd200{padding: 75px 0;}
    .pdt200{padding-top: 75px;}
    .pdb200{padding-bottom: 75px;}
}
.pd0{padding: 0;}
.pdt0{padding-top: 0;}
.pdb0{padding-bottom: 0;}
.pdl0{padding-left: 0;}
.pdr0{padding-right: 0;}

.pdn{padding: 0 !important;}
.pdtn{padding-top: 0 !important;}
.pdbn{padding-bottom: 0 !important;}
.pdln{padding-left: 0 !important;}
.pdrn{padding-right: 0 !important;}
/* ---------------padding 관련 end--------------- */



/* ---------------br 관련--------------- */
@media screen and (min-width:991.1px){
    br.brs{display: none;}
}
@media screen and (max-width:991px){
    br.brl{display: none;}
}
/* ---------------br 관련 end--------------- */



/* ---------------media screen--------------- */
@media screen and (min-width:991.1px){

}
/* @media screen and (max-width:1350px){
    
}
@media screen and (max-width:1150px){
    
} */
@media screen and (max-width:991px){
    
}
@media screen and (max-width:750px){
    
}
@media screen and (max-width:600px){

}
@media screen and (max-width:400px){

}
/* ---------------media screen end--------------- */



/* ---------------그누보드 페이지네이션--------------- */
/* ------------------------------------------------------------
그누보드에서 기본으로 출력되는 .pg_wrap 를
.pagination-btns 클래스로 한번 감싸고 사용.
------------------------------------------------------------ */
.pagination-btns {
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.pagination-btns .pg_wrap {
    clear: unset;
    float: none;
    display: inline-block;
}

.pagination-btns .pg_wrap .pg {
    display: block;
    text-align: center;
}

.pagination-btns .pg_wrap .pg::after {
    content: '';
    display: block;
    clear: both;
}

.pagination-btns .pg_wrap .pg .sound_only {
    position: fixed;
    left: -100000px;
}

.pagination-btns .pg_wrap .pg .pg_current, .pagination-btns .pg_wrap .pg .pg_page,
.pagination-btns .pg_wrap .pg .pg_start::after, .pagination-btns .pg_wrap .pg .pg_end::after,
.pagination-btns .pg_wrap .pg .pg_prev::after, .pagination-btns .pg_wrap .pg .pg_next::after {
    min-width: unset;
    padding: unset;
    float: left;
    display: block;
    margin: 0 5px;
    position: relative;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 100%;
    font-weight: 300;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #c6c6c6;
    font-size: 16px;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}

.pagination-btns .pg_wrap .pg .pg_page:hover {   
    color: #1c1c1c;
}

.pagination-btns .pg_wrap .pg .pg_start, .pagination-btns .pg_wrap .pg .pg_end,
.pagination-btns .pg_wrap .pg .pg_prev, .pagination-btns .pg_wrap .pg .pg_next {
    text-indent: unset !important;
    background: none !important;
    font-size: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

.pagination-btns .pg_wrap .pg .pg_start:hover, .pagination-btns .pg_wrap .pg .pg_end:hover,
.pagination-btns .pg_wrap .pg .pg_prev:hover, .pagination-btns .pg_wrap .pg .pg_next:hover {
    background: none;
    color: unset;
}

.pagination-btns .pg_wrap .pg .pg_start:hover::after, .pagination-btns .pg_wrap .pg .pg_end:hover::after,
.pagination-btns .pg_wrap .pg .pg_prev:hover::after, .pagination-btns .pg_wrap .pg .pg_next:hover::after {  
    color: #1c1c1c;
}

.pagination-btns .pg_wrap .pg .pg_start::after, .pagination-btns .pg_wrap .pg .pg_end::after,
.pagination-btns .pg_wrap .pg .pg_prev::after, .pagination-btns .pg_wrap .pg .pg_next::after {
    position: absolute;
    left: 0;
    top: 0;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    margin: 0 !important;
}

.pagination-btns .pg_wrap .pg .pg_start::after {
    content: '\f323';
}

.pagination-btns .pg_wrap .pg .pg_end::after {
    content: '\f324';
}

.pagination-btns .pg_wrap .pg .pg_prev::after {
    content: '\f053';
}

.pagination-btns .pg_wrap .pg .pg_next::after {
    content: '\f054';
}

.pagination-btns .pg_wrap .pg .pg_current {
    font-weight: 700;   
    color: #1c1c1c;
}
/* @media screen and (max-width:850px){
    .pagination-btns .pg_wrap .pg .pg_current, .pagination-btns .pg_wrap .pg .pg_page,
    .pagination-btns .pg_wrap .pg .pg_start::after, .pagination-btns .pg_wrap .pg .pg_end::after,
    .pagination-btns .pg_wrap .pg .pg_prev::after, .pagination-btns .pg_wrap .pg .pg_next::after {
        margin: 0 4px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
    }
} */
@media screen and (max-width:400px){
    .pagination-btns .pg_wrap .pg .pg_current, .pagination-btns .pg_wrap .pg .pg_page,
    .pagination-btns .pg_wrap .pg .pg_start::after, .pagination-btns .pg_wrap .pg .pg_end::after,
    .pagination-btns .pg_wrap .pg .pg_prev::after, .pagination-btns .pg_wrap .pg .pg_next::after {
        margin: 0 4px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 15px;
    }
}
/* ---------------그누보드 페이지네이션 end--------------- */