@charset "utf-8";

/*************** 푸드앤페이 전체 - 공통 CSS ***************/
/*************** 폰트 ***************/
/* 나눔스퀘어 폰트 */
@font-face{
    font-family: 'NanumSquare';
    font-weight: 300;
    src: url("/fonts/NanumSquareL.eot");
    src: url("/fonts/NanumSquareL.eot?#iefix") format("embedded-opentype"),
         url("/fonts/NanumSquareL.woff") format("woff"),
         url("/fonts/NanumSquareL.ttf") format("truetype");
}
@font-face{
    font-family: 'NanumSquare';
    font-weight: 400;
    src: url("/fonts/NanumSquareR.eot");
    src: url("/fonts/NanumSquareR.eot?#iefix") format("embedded-opentype"),
         url("/fonts/NanumSquareR.woff") format("woff"),
         url("/fonts/NanumSquareR.ttf") format("truetype");
}
@font-face{
    font-family: 'NanumSquare';
    font-weight: 700;
    src: url("/fonts/NanumSquareB.eot");
    src: url("/fonts/NanumSquareB.eot?#iefix") format("embedded-opentype"),
         url("/fonts/NanumSquareB.woff") format("woff"),
         url("/fonts/NanumSquareB.ttf") format("truetype");
}
@font-face{
    font-family: 'NanumSquare';
    font-weight: 800;
    src: url("/fonts/NanumSquareEB.eot");
    src: url("/fonts/NanumSquareEB.eot?#iefix") format("embedded-opentype"),
         url("/fonts/NanumSquareEB.woff") format("woff"),
         url("/fonts/NanumSquareEB.ttf") format("truetype");
}


/* Pretendard 폰트 */
@font-face{
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/Pretendard-Regular.otf");
    src: url("/fonts/Pretendard-Regular.otf") format("opentype"),
    url("/fonts/Pretendard-Regular.ttf") format("truetype");
}
@font-face{
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 300;
    src: url("/fonts/Pretendard-Light.otf");
    src: url("/fonts/Pretendard-Light.otf") format("opentype"),
    url("/fonts/Pretendard-Light.ttf") format("truetype");
}
@font-face{
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 500;
    src: url("/fonts/Pretendard-Medium.otf");
    src: url("/fonts/Pretendard-Medium.otf") format("opentype"),
    url("/fonts/Pretendard-Medium.ttf") format("truetype");
}
@font-face{
    font-family: "Pretendard";
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/Pretendard-Bold.otf");
    src: url("/fonts/Pretendard-Bold.otf") format("opentype"),
    url("/fonts/Pretendard-Bold.ttf") format("truetype");
}

/* KOTRA_SONGEULSSI 폰트 */
@font-face{
    font-family: "KOTRA_SONGEULSSI";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/KOTRA_SONGEULSSI.otf");
    src: url("/fonts/KOTRA_SONGEULSSI.otf") format("opentype"),
    url("/fonts/KOTRA_SONGEULSSI.ttf") format("truetype");
}

/* 페이퍼로지 폰트 */
@font-face{
    font-family: 'Paperlogy';
    font-weight: 400;
    src: url("/fonts/Paperlogy-4Regular.ttf");
    src: url("/fonts/Paperlogy-4Regular.ttf") format("truetype");
}
@font-face{
    font-family: 'Paperlogy';
    font-weight: 300;
    src: url("/fonts/Paperlogy-3Light.ttf");
    src: url("/fonts/Paperlogy-3Light.ttf") format("truetype");
}
@font-face{
    font-family: 'Paperlogy';
    font-weight: 500;
    src: url("/fonts/Paperlogy-5Medium.ttf");
    src: url("/fonts/Paperlogy-5Medium.ttf") format("truetype");
}
@font-face{
    font-family: 'Paperlogy';
    font-weight: 700;
    src: url("/fonts/Paperlogy-7Bold.ttf");
    src: url("/fonts/Paperlogy-7Bold.ttf") format("truetype");
}
@font-face{
    font-family: 'Paperlogy';
    font-weight: 900;
    src: url("/fonts/Paperlogy-9Black.ttf");
    src: url("/fonts/Paperlogy-9Black.ttf") format("truetype");
}


/*************** 리셋 CSS ***************/
*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    border: 0;
}
html{
    font-family: "Pretendard","NanumSquare", "Noto Sans KR", "dotum", "돋움", sans-serif !important;
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    box-sizing: border-box;
}
/* 'Pretendard' */
html, body{
    height: 100%;
}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, input, textarea,
blockquote, pre, abbr, address, cite, code, del, dfn, em, img,
ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, button,
menu, nav, section, summary, time, mark, audio, video{
    margin: 0;
    padding: 0;
    border: 0;
    text-shadow: none;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    font-size: 1.4rem;
    /*line-height: 2rem;*/
    line-height: 1.6rem;
    font-style: normal;
    font-weight: 400;
    list-style: none;

}
/*p, h1, h2, h3, h4, h5, h6, td, label, span{*/
p, h1, h2, h3, h4, h5, h6, td, span,
nav a, button, input[type="button"]{
    transform: skew(-0.1deg); /* 폰트 깨짐 방지 */
}
button, input[type="button"]{
    font-family: "Pretendard", "Noto Sans KR", "dotum", "돋움", sans-serif !important;
}

a{
    color: #000;
}
a:link, a:visited{
    text-decoration: none;
}
a:hover, a:focus, a:active{
    text-decoration: none;
}
button{
    background: none;
    cursor: pointer;
}
input:focus, select:focus, option:focus, textarea:focus, button:focus{
    outline: none !important;
}
/*자동 완성 배경색*/
input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
}

table{
    vertical-align: top;
    font-size: 100%;
    border-collapse: separate;
    border-spacing: 0px;
}
/* 테이블 사라지는거 제거 */
table{
    border-collapse: collapse;
}
table caption{
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
}


/*****스크롤*****/
/** ie 스크롤 **/
body{
    scrollbar-face-color: #ddd;
    scrollbar-track-color: #f2f2f2;
    scrollbar-arrow-color: none;
    scrollbar-highlight-color: #ddd;
    scrollbar-3dlight-color: none;
    scrollbar-shadow-color: #ddd;
    scrollbar-darkshadow-color: none;
    
    /** 파이어폭스 스크롤 **/
    /* scrollbar-color: #ddd #f2f2f2; */
}
/**스크롤바 넓이**/
::-webkit-scrollbar{
    width: 11px;
    height: 11px;
}
/**트랙 배경 색상**/
::-webkit-scrollbar-track{
    background-color: #f2f2f2;
}
/**바 색상, 바 둥근 모서리 정도**/
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{
    background-color: #ddd;
}
::-webkit-scrollbar-thumb{
    /*background-color: #ccc;*/
    border-radius: 5px;
}
/**마우스 올렸을 때 색상*/
::-webkit-scrollbar-thumb:hover{
    background-color: #ccc;
}
/**버튼 넓이, 높이, 색상 - 보통 스크롤바 넓이랑 같이 맞춤**/
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{
    width: 8px;
    height: 8px;
    border-radius: 2px;
}


/*************** 공통 CSS ***************/
.none{display: none !important;}
/** 레이아웃 **/
.d-block{display: block !important;}
.d-inline_blook{display: inline-block !important;}
.d-flex{display: flex !important;}
.d-inline_flex{display: inline-flex !important;}
.justify-content-between{justify-content: space-between;}
.justify-content-center{justify-content: center;}
.justify-content-end{justify-content: flex-end !important;}
.align-items-center{align-items: center;}
.align-item-flexstart{align-items: flex-start !important;}
.align-item-flexend{align-items: flex-end !important;}
.flex-wrap{flex-wrap: wrap;}
.flex-00auto{flex: 0 0 auto !important;}
.flex-direction{flex-direction: column;}
.text-align-center{text-align: center;}

/** 위치 **/
.position-relative{position: relative}
.position-absolute{position: absolute;}

/*** 여백 ***/
/** 마진 아래 **/
.mb-0px{margin-bottom: 0px !important;}
.mb-8px{margin-bottom: 8px !important;}
.mb-12px{margin-bottom: 12px !important;}
.mb-16px{margin-bottom: 16px !important;}
.mb-24px{margin-bottom: 24px !important;}
.mb-unset{margin-bottom: unset !important;}

/** 마진 왼쪽 **/
.ml-0px{margin-left: 0px !important;}
.ml-8px{margin-left: 8px;}
.ml-16px{margin-left: 16px;}
.ml-24px{margin-left: 24px;}
/* rem 단위 */
.ml-10{margin-left: 1rem;} /* 10rem */
.ml-20{margin-left: 2rem;} /* 20rem */
.ml-25{margin-left: 2.5rem;} /* 25rem */
.ml-100{margin-left: 10rem;} /* 100rem */
.ml-120{margin-left: 12rem;} /* 120rem */
.ml-125{margin-left: 12.5rem;} /* 125rem */
.ml-150{margin-left: 15rem;} /* 150rem */
.ml-180{margin-left: 18rem;} /* 180rem */
/* 기타 */
.ml-unset{margin-left: unset !important;}
.ml-auto{margin-left: auto !important;}

/** 마진 오른쪽 **/
.mr-0px{margin-right: 0px !important;}
.mr-8px{margin-right: 8px;}
.mr-12px{margin-right: 12px;}

/** 마진 위 **/
.mt-12px{margin-top: 12px;}
.mt-16px{margin-top: 16px;}

/*** 패딩 여백 ***/
.pb-8px{padding-bottom: 8px !important;}
.pb-9px{padding-bottom: 9px !important;}

.pl-0px{padding-left: 0px !important;}


/** 크기 **/
.h_100_percent{height: 100%;}



/** 폰트 **/
.font_handwriting{font-family: "KOTRA_SONGEULSSI";}

.normal_font{
	font-size: 1.5rem;
	line-height: 2rem;
}