:root {
    --drkid-lower-font: 16px;
    --drkid-big-font: 20px;
    --drkid-middle-font: 18px;
    --drkid-lowerst-font: 14px;
    --drkid-high-height: 34px;
    --drkid-middle-height: 30px;
    --drkid-lower-height: 24px;
    --drkid-lowerst-height: 22px;
    --mono_point: #111111;
    --mono_main: #4e4e4e;
    --mono_sub: #828282;
    --mono_dea: #bbbbbb;
    --mono_line: #e2e2e2;
    --mono_back: #f9f9f9;
    --main_color: #0F4C81;
    --sub_color: #3F8FD4;
    --sub_se_color: #3c4d60;
    --sub_point_color: #e4b04c;
    --drkid_positive: #005764;
    --drkid_Negative: #ff441d;
    --drkid_alert_positive: #3b77ff;
    --drkid_alert_negative: #ff441d;
}
/*  root에 정해진 색을 쓰는 방법
 *  var(--drkid~~~)식으로 사용가능.
 *  root는 기본적으로 유지 하되 한꺼번에 바꾸어야할시에 root에 변수를 지정
 *  특수한 사항에 존재할때 color등은 각 class마다 지정하는 것으로 한다.
 *  default 색은 하기 Class로 지정되어있으니 필수로 Class 지정하여 색을 컨트롤 한다.
 */

/*font-size*/
.lower-font{font-size:var(--drkid-lower-font);line-height:var(--drkid-lower-height);}
.lowerst-font{font-size:var(--drkid-lowerst-font);line-height:var(--drkid-lowerst-height);}
.middle-font{font-size:var(--drkid-middle-font);line-height:var(--drkid-middle-height);}
.big-font{font-size:var(--drkid-big-font);line-height:var(--drkid-high-height);}

/*line-height*/
.high-height{line-height:var(--drkid-high-height);}
.middle-height{line-height:var(--drkid-middle-height);}
.lower-height{line-height:var(--drkid-lower-height);}
.lowerst-height{line-height:var(--drkid-lowerst-height);}

/*color*/
.mono_point_color{color:var(--mono_point);}
.mono_main_color{color:var(--mono_main);}
.mono_sub_color{color:var(--mono_sub);}
.mono_dea_color{color:var(--mono_dea);}
.mono_line_color{color:var(--mono_line);}
.mono_back_color{color:var(--mono_back);}
.main_color{color:var(--main_color);}
.sub_color{color:var(--sub_color);}
.sub_se_color{color:var(--sub_se_color);}
.drkid_postive_color{color:var(--drkid_positive);}
.drkid_Negative_color{color:var(--drkid_Negative);}
.drkid_alert_postive_color{color:var(--drkid_alert_positive);}
.drkid_alert_negative_color{color:var(--drkid_alert_negative);}
.sub_point_color{color:var(--sub_point_color);}
/*bgcolor*/
.mono_point_bg_color {
    background-color: var(--mono_point);
}
.mono_main_bg_color{background-color:var(--mono_main);}
.mono_sub_bg_color{background-color:var(--mono_sub);}
.mono_dea_bg_color{background-color:var(--mono_dea);}
.mono_line_bg_color{background-color:var(--mono_line);}
.mono_back_bg_color{background-color:var(--mono_back);}
.main_bg_color{background-color:var(--main_color);}
.sub_bg_color{background-color:var(--sub_color);}
.sub_se_bg_color{background-color:var(--sub_se_color);}
.drkid_postive_bg_color{background-color:var(--drkid_positive);}
.drkid_Negative_bg_color{background-color:var(--drkid_Negative);}
.drkid_alert_postive_bg_color{background-color:var(--drkid_alert_positive);}
.drkid_alert_negative_bg_color{background-color:var(--drkid_alert_negative);}

h1{margin:0;font-weight:500;font-size:var(--drkid-big-font);line-height:var(--drkid-high-height);color:var(--mono_point);}
h2{margin:0;font-weight:500;font-size:var(--drkid-middle-font);line-height:var(--drkid-middle-height);color:var(--mono_main);}

/*common*/
thead th{font-weight:500;font-size:var(--drkid-lower-font);color:var(--mono_main);line-height:var(--drkid-lower-height);text-align:left;}
tbody td{font-weight:400;font-size:var(--drkid-lower-font);color:var(--mono_main);line-height:var(--drkid-lower-height);}
table{border-collapse:collapse;table-layout:fixed;}
.title{font-weight:700;font-size:var(--drkid-middle-font);line-height:var(--drkid-middle-height)}
.title_sub{font-weight:700;font-size:var(--drkid-lower-font);line-height:var(--drkid-middle-height)}
.body{font-weight:500;font-size:var(--drkid-lower-font);line-height:var(--drkid-lower-height);}
.body2{font-weight:400;font-size:var(--drkid-lower-font);line-height:var(--drkid-lower-height);}
.body3{font-weight:400;font-size:var(--drkid-lowerst-font);line-height:var(--drkid-lowerst-height);}

/*button은 나중에*/
.closer-inner-btn{position:absolute;width:70%;top:50%;left:50%;transform:translate(-50%,-50%);}

/**/

/*05.31 이용호 img태그 css 추가*/
img{width:100%;height:100%;object-fit:contain;}