@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap');

body,p,div,span,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0; padding:0;}
body,input,textarea,button,select{font-family:'Roboto', Noto Sans KR, '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; color:#111;}
body{font-size:15px;}
ul,li{list-style:none;}
a{text-decoration:none;}
h1,h2,h3,h4,h5,h6,input,textarea,button,select,table{font-size:1em;}
img, fieldset, button{border:0;}
textarea{overflow:auto;}
input[type=submit],
input[type=button],
button{cursor:pointer;}
img{vertical-align:top;}
address, em{font-style:normal;}
table{border-spacing:0; border-collapse:collapse;}
table,th,td{border:none;}
caption{overflow:hidden; line-height:0; text-indent:-2000em;}
legend, .hidden{padding:0; margin:0; overflow:hidden !important; text-indent:100%; white-space:nowrap; font-size:0;}
i{font-style:normal;}
input[type="text"],
input[type="password"],
input[type="submit"]{-webkit-border-radius:1px; -webkit-appearance:none;}

.taL {text-align: left;}
.hidden{text-indent:100% !important; overflow:hidden !important; white-space:nowrap !important; font-size:0 !important;}


/* radio, checkbox custom */
.checks {position: relative; display: inline-block; line-height:16px; margin:10px;} 

.checks input[type="checkbox"] { /* 실제 체크박스는 화면에서 숨김 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0 } 
.checks input[type="checkbox"] + label { display: inline-block; position: relative; padding-left: 30px; /* 글자와 체크박스 사이의 간격을 변경 */ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } 
.checks input[type="checkbox"] + label:before { /* 가짜 체크박스 */ content: ''; position: absolute; left: 0; top: -4px; /* 이 값을 변경해서 글자와의 정렬 */ width: 21px; /* 체크박스의 너비를 지정 */ height: 21px; /* 체크박스의 높이를 지정 */ line-height: 21px; /* 세로정렬을 위해 높이값과 일치 */ text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius : 3px; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); } 
.checks input[type="checkbox"] + label:active:before, .checks input[type="checkbox"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
.checks input[type="checkbox"]:checked + label:before { /* 체크박스를 체크했을때 */ content: '\2714'; /* 체크표시 유니코드 사용 */ color: #3c5095; font-size:20px; text-shadow: 1px 1px #fff; background: #e9ecee; border-color: #adb8c0; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); }

.checks input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; } 
.checks input[type="radio"] + label { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } 
.checks input[type="radio"] + label:before { content: ''; position: absolute; left: 0; top: -4px; width: 21px; height: 21px; text-align: center; background: #fafafa; border: 1px solid #cacece; border-radius: 100%; box-shadow: 0px 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); } 
.checks input[type="radio"] + label:active:before, .checks input[type="radio"]:checked + label:active:before { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); } 
.checks input[type="radio"]:checked + label:before { background: #E9ECEE; border-color: #adb8c0; } 
.checks input[type="radio"]:checked + label:after { content: ''; position: absolute; top: 1px; left: 5px; width: 13px; height: 13px; background: #3c5095; border-radius: 100%; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); }
.checks span {padding-left:30px;}

/* button style */
.btns_wrap {padding:10px 0; text-align:center;}
.btns {display:inline-block !important; text-indent:0 !important; box-sizing:border-box; padding: 0px 13px; border-radius: 5px; background-color:#3c5095; color:#fff; font-size:16px; line-height:30px; margin:3px;transition:all 0.3s ease 0; -webkit-transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s;}
.btns:hover{box-shadow:2px 2px 8px -1px rgba(0, 0, 0, 0.5);}
.btns.white {background-color:#fff;color:#000;border:1px solid #ddd;}
.btns.pink {background-color:#ef5959;}
.btns.navy {background-color:#1e397b;}
.btns.gray {background-color:#666;}
.btns.green {background-color:#38b4cc;}
.btns.print {background:url(../images/common/btn_img.png) left center no-repeat;}
.btns.excel {background:url(../images/common/btn_img.png) left center no-repeat;}
.btns.file {background:url(../images/common/btn_img.png) left center no-repeat;}

/* 본문 내에 삽입되는 text style */
.textbox {margin:10px 0;background:#f9fbff;padding:15px;box-sizing: border-box;}
.textbox p {font-size:15px; color:#3c5095; margin:5px 0;}
.textbox p span.red {font-size:15px; color:#f56d7c;}

/* 검색 area 내에 삽입되는 text style */

.search_textbox {margin:10px 0; padding:5px;box-sizing: border-box;}
.search_textbox p {font-size:15px; color:#3c5095; margin:5px 0; text-align:left;}
.search_textbox p span.red {font-size:15px; color:#f56d7c;}


/* 로딩 style */

.loading_img {width:30px;}
/** Loading Progress BEGIN CSS **/
        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-moz-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-webkit-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @-o-keyframes rotate-loading {
            0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
            100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
        }

        @keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-moz-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-webkit-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }

        @-o-keyframes loading-text-opacity {
            0%  {opacity: 0}
            20% {opacity: 0}
            50% {opacity: 1}
            100%{opacity: 0}
        }
        .loading-container,
        .loading {
            height: 100px;
            position: relative;
            width: 100px;
            border-radius: 100%;
        }

        .loading-container-wrap { background:rgba(0,0,0,0.7); height:100%; width:100%; position:absolute; top:0; left:0; z-index:999; display:flex; justify-content:center; align-items:center;}
        .loading-container { margin: 0 auto; }

        .loading {
            border: 2px solid transparent;
            border-color: transparent #FFFFFF transparent #FFFFFF;
            -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
            -moz-transform-origin: 50% 50%;
            -o-animation: rotate-loading 1.5s linear 0s infinite normal;
            -o-transform-origin: 50% 50%;
            -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
            -webkit-transform-origin: 50% 50%;
            animation: rotate-loading 1.5s linear 0s infinite normal;
            transform-origin: 50% 50%;
        }

        .loading-container:hover .loading {
            border-color: transparent #E45635 transparent #E45635;
        }
        .loading-container:hover .loading,
        .loading-container .loading {
            -webkit-transition: all 0.5s ease-in-out;
            -moz-transition: all 0.5s ease-in-out;
            -ms-transition: all 0.5s ease-in-out;
            -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
        }

        #loading-text {
            -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
            -o-animation: loading-text-opacity 2s linear 0s infinite normal;
            -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
            animation: loading-text-opacity 2s linear 0s infinite normal;
            color: #FFFFFF;
            font-family: "Helvetica Neue, "Helvetica", ""arial";
            font-size: 14px;
            font-weight: bold;
            margin-top: 45px;
            opacity: 0;
            position: absolute;
            text-align: center;
            text-transform: uppercase;
            top: 0;
            left:3px;
            width: 100px;
        }

        #_loadingMessage {
        	-moz-animation: loading-text-opacity 2s linear 0s infinite normal;
            -o-animation: loading-text-opacity 2s linear 0s infinite normal;
            -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
            animation: loading-text-opacity 2s linear 0s infinite normal;
        	color:#FFFFFF;
        	width:80%;
        	margin:10px auto 0;
        	text-align:center;
        	font-size:20px;
        }

    
/* scrollbar style */

    /* 스크롤바 설정*/
    .scroll_cst::-webkit-scrollbar{
        width: 7px; 
    }

    /* 스크롤바 막대 설정*/
    .scroll_cst::-webkit-scrollbar-thumb{
        height: 17%;
        background-color: #3c5095;
        border-radius: 10px;
        
    }

    /* 스크롤바 뒷 배경 설정*/
    .scroll_cst::-webkit-scrollbar-track{
        background-color: rgba(255,255,255,0.2);
    }