@charset "utf-8";
    
@font-face {
    font-family: 'NanumGothicL';
    font-style: normal;
    font-weight: normal;
    src:url("../font/NanumGothicLight.otf");
    }

    @font-face {
    font-family: 'NanumGothic';
    font-style: normal;
    font-weight: normal;
    src: url("../font/NanumGothic.otf");
    
    }

    @font-face {
    font-family: 'NanumGothicB';
    font-style: normal;
    font-weight: 100;
    transform: skew(-0.1deg);
    src: url("../font/NanumGothicBold.otf");

    }

    @font-face {
    font-family: 'NanumGothicEB';
    font-style: normal;
    font-weight: normal;
    src: url("../font/NanumGothicExtraBold.otf");

    }

:root{
    --main-color:#1D3994;
    --main2-color:#14276B;
    --maingr-color:#22B356;
    --line-color:#E6E6E6;
    --line_deep-color: #D2D2D2;
    --bg-color:#F5F5F5;
    --bg_g-color:#F3F9F2;
    --grey-color:#686868;
    --font-color:#333333;
    --font2-color:#999999;
    }

/*  LAYOUT  */

.d_flex{display: flex;} /*한줄정렬 */

.flex_w{flex-wrap: wrap;}/*넘치면 아래로 넘어감 */
.flex_no_w{flex-wrap: nowrap;}
.flex_l{justify-content: flex-start;}


.d_jcsb{justify-content: space-between;}/* 양쪽끝붙이고 간격동일 */

.d_jcc{justify-content: center;}/* 가운데몰려서 정렬 */

.d_jcsa{justify-content: space-around;} /*양쪽끝떼고 가운데정렬*/


.d_end{justify-content: flex-end;}

.inline_b{display: inline-block;}

.potion_r{position: relative;}

.aic{align-items: center;}


.txt_cen{text-align: center;}

.font17{font-size: 17px;}
.font19{font-size: 19px;}

.w14{width: 14px; display: inline-block;}
.w58{width: 58px;}
.w80{width: 80px;}
.w84{width: 84px;}
.w100px{width: 100px;}
.w121{width: 121px;}
.w125{width: 125px;}

.w48{width: 48%;}
.w49{width: 49%;}
.w50{width: 50%;}
.w100{width: 100%;}

.w140{width: 140px;}
.w150{width: 150px;}
.w170{width: 170px;}
.w210{width: 210px;}
.w230{width: 230px;}
.w260{width: 260px;}
.w276{width: 276px;}
.w320{width: 320px;}
.w404{width: 404px;}
.w970{width: 970px;}


.h20{height: 20px;}
.h24{height: 24px;}
.h40{height: 40px;}

.h60{height: 60px;}
.h95{height: 95px;}
.h155{height: 155px;}

.h330{height: 330px;}



.input120{
    width: calc(100% - 120px);
}

.input80{
    width: calc(100% - 80px);
}


.pad14{padding: 14px;}
.pad_r14{padding-right: 14px;}
.pd20{padding: 20px;}

.mt30{margin-top: -30px;}

.h8{height: 8px;}
.h10{height: 10px;}
.h14{height: 14px;}


.font14{font-size: 14px;}

.gap6{gap: 6px;}
.gap14{gap: 14px;}

.gap24{gap: 24px;}
.gap28{gap: 28px;}
.gap40{gap: 40px;}

.line_grey{border: 1px solid var(--line-color);}
.line_g_r{border-right: 1px solid var(--line-color);}
.line_g_b{border-bottom: 1px solid var(--line-color);}

.line_no_r{border-right: none;}

/*  테이블 세로 크기 조정  */
.table_350{
    height: 385px;
    overflow: auto;
}

.table_558{
    height: 558px;
    overflow: auto;
}

.table_686{
    height: 686px;
    overflow: auto;
}




/*  문자열 정렬  */

.word_s{word-spacing: 4px;}
.letter_s{letter-spacing: 20px;}
.word_bk{word-break: keep-all;} /*단어로 잘라서 줄바꿈*/

.normal		{ font-family: 'NanumGothic';}
.bold		{ font-family: 'NanumGothicB';}
.exbold	    { font-family: 'NanumGothicEB'; }
.light		{ font-family: 'NanumGothicL';}
.letter {letter-spacing: -5px;}


body{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333333;
    font: 16px/1 'NanumGothic', sans-serif ;
}



html, body, div, ul, li, table, th, td, label, form, 
input, textarea, em, address, a, span{
	font-size: 16px;
    font-family: 'NanumGothic', sans-serif;    
	color: #333333;
	box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'NanumGothic', sans-serif;

}

h1{ font-size: 30px; 
    font-family: 'NanumGothicB';}

h2{
    font-size: 17px;    
}

h3{
    font-size: 19px;
    line-height: 20px;
    font-family: 'NanumGothicB';
}

h4{
    font-size: 18px;
    font-family: 'NanumGothicB';
}

h5{
    font-size: 16px;
    font-family: 'NanumGothicB';
}


label{font-family: 'NanumGothicB';}

input[type="text"], input[type="password"], input[type="search"], input[type="file"], input[type="number"] {
	box-sizing: border-box;
	padding-left: 10px;
    height: 40px;
    border-radius: 8px;
    font-family: 'NanumGothic', sans-serif;   
    border: 1px solid var(--line_deep-color);
	-webkit-appearance: none; /* Safari and Chrome*/ 
	-moz-appearance: none; /* Firefox*/ 
	-ms-appearance: none;
	-o-appearance:none;
	appearance: none;
}

input[type="file"]{
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}

textarea{
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
    border: 1px solid var(--line_deep-color);
    resize: none;
}


input[type="radio"]{
    vertical-align: middle;
    margin-right: 5px;
    cursor: pointer;
}

input[type="search"]{
    vertical-align: middle;
    border: 1px solid var(--line_deep-color);
    background: url(../img/search_ico.png) no-repeat right 10px center #F5F5F5;
	background-size: 23px 23px;
}

/*인풋search 기본x버튼 없애기*/
input::-ms-reveal, input::-ms-clear{
    display: none;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}


input[type="date"]{
    height: 40px;
    padding: 2px 0 0 14px;
    border-radius: 8px;
    line-height: 40px;
    position: relative;
    background: url(../img/date.png) no-repeat right 10px center / 17px auto;
    background-color: #ffffff;
    appearance: none; -webkit-appearance: none;
    border: 1px solid var(--line_deep-color);
    box-sizing: border-box;
}


input[type='date']::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent; /* 배경은 투명,*/
    color: transparent; /*글자도 투명. 
    이 두 설정을 통해 캘린더 아이콘을 사라지게 만든다."*/
    cursor: pointer;
}

input[type='date']::before {
    content: attr(placeholder); 
    /* input 태그의 placeholder라는 속성값을 가져와서 content로 사용한다. 보통은 placeholder보다는 data-placeholder라는 커스텀 속성을 만들어서 사용하는 것 같다.*/
    width: 100%;
    height: 100%;
}

input[type='date']:valid::before,
input[type='datetime-local']:valid::before,
input[type='time']:valid::before {
    display: none;
}


input[type='checkbox']{
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

select{
    font-family: 'NanumGothic', sans-serif;
    border-radius: 8px;
    border: 1px solid var(--line_deep-color);
    padding-left: 10px;
	box-sizing: border-box;
	height: 40px;
    vertical-align: middle;
	appearance: none; 
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
	background: url(../img/sel_arr.png) no-repeat right 10px center;
	background-size: 12px 7px;
    cursor: pointer;
}



* {
  caret-color: transparent !important;
}

input {
  caret-color: auto !important;
}

table, th, td{
    vertical-align: middle;
}

th {font-family: 'NanumGothicB';}

::placeholder{
    color: var(--line_deep-color);
}

.toggle-switch input{
    -webkit-appearance:none;
    -webkit-border-radius:0;
}

select::-ms-expand{display:none;} /*모든브라우저에서 고유디자인이 나오게*/
select,textarea,input:focus { outline: none;}

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;