@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");
}


/* Pretendard 폰트 */
@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");
}



/*************** 리셋 CSS ***************/
*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    box-sizing: border-box;
    border: 0;
}
html{
    font-family: "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%;
	/*overflow-y: auto;*/
}
/* body:not(.body_popup){
    min-width: 1024px;
} */
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"],
dl{
    transform: skew(-0.1deg); /* 폰트 깨짐 방지 */
}
button, input[type="button"]{
    font-family: "NanumSquare", "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;
}
/*자동 완성 배경색*/
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;}
.flex-wrap{flex-wrap: wrap;}
.flex-00auto{flex: 0 0 auto !important;}
.flex-direction{flex-direction: column;}
.text-align-center{text-align: center;}
.overflow-x-unset{overflow-x: unset !important;}

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

/** 여백 **/
.mt-24px{margin-top: 24px !important;}

.mb-0px{margin-bottom: 0px !important;}
.mb-4px{margin-bottom: 4px !important;}
.mb-8px{margin-bottom: 8px !important;}
.mb-12px{margin-bottom: 12px !important;}
.mb-16px{margin-bottom: 16px;}
.mb-24px{margin-bottom: 24px !important;}
.mb-unset{margin-bottom: unset !important;}

.ml-0px{margin-left: 0px !important;}
.ml-4px{margin-left: 4px;}
.ml-8px{margin-left: 8px;}
.ml-24px{margin-left: 24px;}
.ml-unset{margin-left: unset !important;}
.ml-auto{margin-left: auto !important;}

.mr-0px{margin-right: 0px !important;}
.mr-4px{margin-right: 4px;}
.mr-8px{margin-right: 8px;}
.mr-12px{margin-right: 12px;}

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


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

/** 정렬 **/
.text-align_right{
    text-align: right;
}

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