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

2번째로 호출

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

기본값으로 설정된것은

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

입니다.

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

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

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

z-index 현황

gnb : 120 (mobile 메뉴)
popup-bg : 105 (스토어 매장찾기 팝업 모달 background)
popup-store : 110 (스토어 매장찾기 팝업)
project-header : 100 (헤더)
header-wrap : 90 (헤더 내용)
gnb-dummy : 80 (메뉴 모달 background)
right-fixed-menu : 70 (우측 고정 메뉴)

-창업경쟁력 페이지
    popup:70,
    하단픽스바:71,

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

@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 300;
    src:url(/html/assets/fonts/NotoSansKR/NotoSansKR-Light.woff2) format('woff2');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src:url(/html/assets/fonts/NotoSansKR/NotoSansKR-Regular.woff2) format('woff2');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src:url(/html/assets/fonts/NotoSansKR/NotoSansKR-Medium.woff2) format('woff2');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src:url(/html/assets/fonts/NotoSansKR/NotoSansKR-Bold.woff2) format('woff2');
}
@font-face{
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 900;
    src:url(/html/assets/fonts/NotoSansKR/NotoSansKR-Black.woff2) format('woff2');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 200;
    src: url(/html/assets/fonts/LexendDeca/LexendDeca-ExtraLight.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 300;
    src: url(/html/assets/fonts/LexendDeca/LexendDeca-Light.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 400;
    src: url(/html/assets/fonts/LexendDeca/LexendDeca-Regular.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 500;
    src: url(/html/assets/fonts/LexendDeca/LexendDeca-Medium.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 600;
    src: url(/html/assets/fonts/LexendDeca/LexendDeca-SemiBold.ttf) format('truetype');
}
@font-face{
    font-family: 'Lexend Deca';
    font-style: normal;
    font-weight: 700;
    src: url(/html/assets/fonts/LexendDeca/LexendDeca-Bold.ttf) format('truetype');
}

*{
    font-family: 'Noto Sans KR', sans-serif;
}
body{
    font-size: 18px;
    color: #1c1c1c;
    font-weight: 400;
}
.center1200{
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}
.center{
    width: 95%;
    max-width: 1440px;
    margin: 0 auto;
}
.center1700{
    width: 95%;
    max-width: 1700px;
    margin: 0 auto;
}
::placeholder{color: inherit;font-size: inherit;font-weight: 300;}
select{color: #1c1c1c;font-size: inherit;}
.upper{text-transform: uppercase;}


/* ---------------커스텀 클래스--------------- */
/* ------------------------------------------------------------
.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: #FFF;}
.art_s{font-size:16px;}
@media screen and (max-width:600px){
    .mobile-none{display: none;}
	.art_s{font-size:14px;}
}
/* ---------------커스텀 클래스 end--------------- */



/* ---------------폰트 관련--------------- */
.eng{font-family: 'Lexend Deca', sans-serif;}
.kor{font-family: 'Noto Sans KR', sans-serif;}

.fw200{font-weight: 200;}
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}
.fw700{font-weight: 700; line-height: 1.4;}
.fw900{font-weight: 900;}

.ls15{letter-spacing: 1.5px;}
.ls1{letter-spacing: 1px;}
.ls05{letter-spacing: 0.5px;}
.ls00{letter-spacing: 0px;}
.ls-1{letter-spacing: -1px;}
.ls-15{letter-spacing: -1.5px;}

@media screen and (max-width:600px){
    .ls15{letter-spacing: 1px;}
    .ls1{letter-spacing: 0.5px;}
    .ls-1{letter-spacing: -0.5px;}
    .ls-15{letter-spacing: -1px;}
}
/* ---------------폰트 관련 end--------------- */



/* ---------------color 관련--------------- */
.bgcb{background-color: #1c1c1c;}
.bgcw{background-color: #FFF;}

.bgc1{background-color: #AFD4A5;}
/*#c0c0c0*/
.bgcs{
    background-color: #222223;
}


.txcb{color: #1c1c1c;}
.txcw{color: #FFF;}
.txcr{color: red;}
.txc1{color: #c0c0c0;}
.txcp{color: #ffb400;}

/*.bgc-g1{background-color: #f3f4f5;}*/
.txc-g1{color: #f3f4f5;}
/* ---------------color 관련 end--------------- */



/* ---------------padding 관련--------------- */
.pd100{
    padding: 100px 0;
    box-sizing: border-box;
}
.pd120{
    padding: 120px 0;
    box-sizing: border-box;
}
.pd150{
    padding: 150px 0;
    box-sizing: border-box;
}
.pdt100{
    padding-top: 100px;
    box-sizing: border-box;
}
.pdt120{
    padding-top: 120px;
    box-sizing: border-box;
}
.pdb100{
    padding-bottom: 100px;
    box-sizing: border-box;
}
.pd50{
    padding: 50px 0;
    box-sizing: border-box;
}
.pdt50{
    padding-top: 50px;
    box-sizing: border-box;
}
.pdb50{
    padding-bottom: 50px;
    box-sizing: border-box;
}

.pdt20{
    padding-top: 20px;
    box-sizing: border-box;
}
.pdb20{
    padding-bottom: 20px;
    box-sizing: border-box;
}
.pdt10{
    padding-top: 10px;
    box-sizing: border-box;
}
.pdb10{
    padding-bottom: 10px;
    box-sizing: border-box;
}
.pdt150{
    padding-top: 150px;
    box-sizing: border-box;
}
.pdb150{
    padding-bottom: 150px;
    box-sizing: border-box;
}
@media screen and (max-width:991px){
    .pd100{padding: 70px 0;}
    .pd150{padding: 120px 0;}
    .pdt100{padding-top: 70px;}
    .pdt120{padding-top: 80px;}
    .pdt150{padding-top: 100px;}
    .pdb150{padding-bottom: 100px;}
    .pdb100{padding-bottom: 70px;}
    .pd50{padding: 40px 0;}
    .pdt50{padding-top: 40px;}
    .pdb50{padding-bottom: 40px;}
}
@media screen and (max-width:600px){
    .pd100{padding: 50px 0;}
    .pd150{padding: 80px 0;}
    .pdt100{padding-top: 50px;}
    .pdt120{padding-top: 60px;}
    .pdb100{padding-bottom: 50px;}
    .pd50{padding: 30px 0;}
    .pdt50{padding-top: 30px;}
    .pdb50{padding-bottom: 30px;}
    .pdt150{padding-top: 80px;}
    .pdb150{padding-bottom: 80px;}
    
}
.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:600.1px){
    br.brs{display: none;}
}
@media screen and (max-width:600px){
    br.brl{display: none;}
}
/* ---------------br 관련 end--------------- */



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

}
@media screen and (max-width:1024px){
    
}
/* @media screen and (max-width:850px){
    
} */
@media screen and (max-width:600px){
    
}
@media screen and (max-width:450px){
    
}
/* ---------------media screen end--------------- */



/* ---------------slick--------------- */
.slider-none{display: flex !important;width: 100% !important;justify-content: center !important;}
.slider-none2{display: flex !important;width: 100% !important;justify-content: flex-start !important;}
.slider-none .slick-list, .slider-none .slick-track{display: block !important; width: fit-content !important;padding: 0 !important;}
.slider-none2 .slick-list, .slider-none2 .slick-track{display: block !important; width: fit-content !important;padding: 0 !important;}
.slider-none .slider-box{margin: 0 10px !important;}
.slider-none2 .slider-box{margin: 0 10px !important;}
/* ---------------slick end--------------- */






/* ---------------페이지네이션--------------- */
.pagination-btns {
  width: 100%;
  text-align: center;
  margin-top: 25px;
}

.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 2px;
  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: #555;
  font-size: 18px;
  font-family: 'Lexend Deca', sans-serif;
  -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 {
  background-color: #c0c0c0;
  color: #FFF;
}

.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;
  background: none;
  font-size: 0 !important;
  border: 0;
  line-height: 0;
}

.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 {
  background-color: #c0c0c0;
  color: #FFF;
}

.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 5 Pro";
  font-weight: 400;
  margin: 0;
}

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

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

.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;
  background-color: #AFD4A5;
  color: #242424;
}
@media screen and (max-width:850px){
    .pagination-btns{margin-top: 20px;}
    .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 1px;
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 16px;
    }
}
@media screen and (max-width:450px){
    .pagination-btns{margin-top: 15px;}
    .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 1px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
    }
}
/* ---------------페이지네이션 end--------------- */