/* @charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap&family=Nanum+Gothic:wght@400;700;800');
*/
/* * {padding:0px; margin: 0px; box-sizing: border-box; font-size: 16px; color: #333; font-family:"Noto Sans KR", "Nanum Gothic", "맑은 고딕", sans-serif; word-break: keep-all; }
body{padding: 0; margin: 0;}
a, a:hover, a:visited, a:focus{color: #333; text-decoration: none;} 

.clear{clear: both;}

.main-box{width:100%; height:calc(100vh - 89px); overflow:hidden; }
.main-section{background-image: url('/common/images/bg_main01.png'); background-repeat: no-repeat; background-size: cover; position: relative; padding:20px 0; height:100%;}
.contents-box{position: absolute; left: 0; right: 0px; bottom: 10px;}

.notices-box{display: block; position: absolute; left: 0px; top: 0px; width: 100%; z-index: 5px;;}
.notices-box a{display: block; padding: 10px 0px 10px 15px; width: 70%; background-color: rgba(23,150,218,0.95); border-bottom-right-radius: 20px; font-size: 15px; font-weight: 500; color: #fff;;}
.notices-box a:nth-child(3n){background-color: rgba(23,150,218,0.95);}
.notices-box a:nth-child(3n+1){background-color: rgba(220,202,78,0.95);}
.notices-box a:nth-child(3n+2){background-color: rgba(238,72,94,0.95);}

.login-box{margin-bottom:20px; width: 100%; border-radius: 5px;;}
.login-box:after {content:''; display:block; clear:both; }

.chatbotquick_wrap:after {content: ''; display: block; clear: both;  }
.chatbotquick_wrap button.chatbot-change-image{width: 100px;height: 100px;margin-bottom: 10px; float: right;display: block;cursor: pointer;
    background: url(/common/images/chat_quick_link.png)no-repeat center;
    animation-name: chatbot-change; animation-duration: 5s; animation-iteration-count: infinite; background-size:100px}
	.chatbotquick_wrap button{width: 100%; outline:none; border-radius:0px; background: none; border: none;}

.main-login{width: 100%; height: 70px; padding: 20px 5px;}
.login-left{float:left; width: 70%; height: 70px; padding: 18px 20px; font-size:13px; color:#fff; background-color: rgba(0, 169, 92, 0.565); border-top-left-radius:5px; border-bottom-left-radius:5px; line-height:22px; text-align: center; vertical-align: middle;}  
.login-right{float:right; width: 30%; height: 70px; padding: 35px 20px;  font-size:13px; color:#fff; background-color: rgba(8, 91, 63,0.5); border-top-right-radius:5px; border-bottom-right-radius:5px; text-align: center; vertical-align: middle; background-image: url('/common/images/login.png'); background-position: center 10px; background-repeat: no-repeat; background-size: 20px 20px;}
.login-left_on{float:left; width: 70%; height: 70px; padding: 18px 20px; font-size:13px; color:#fff; background-color: rgba(0, 169, 92, 0.565); border-top-left-radius:5px; border-bottom-left-radius:5px; line-height:22px; text-align: center; vertical-align: middle;}  
.login-right_on{float:right; width: 30%; height: 70px; padding: 35px 20px;  font-size:13px; color:#fff; background-color: rgba(8, 91, 63,0.5); border-top-right-radius:5px; border-bottom-right-radius:5px; text-align: center; vertical-align: middle; background-image: url('/common/images/login_on.png'); background-position: center 10px; background-repeat: no-repeat; background-size: 30px 30px;}


.contents-box ul.link {font-size:0; padding: 20px 5px;}
.contents-box ul.link > li {box-sizing:border-box; display:inline-block; width:calc(25% - 5px); height:90px; margin-left:6px; background-color:#0cbcf2a8; border-radius:5px; vertical-align:top; }
.contents-box ul.link > li:nth-child(1) {margin-left:0; }
.contents-box ul.link > li:nth-child(5) {margin-left:0; }
.contents-box ul.link > li:nth-child(-n+4) {margin-bottom:6px; }
.contents-box ul.link > li a {box-sizing:border-box; display:block; padding:17px 0; width:100%; height:100%; font-size:12px; color:#fff; text-align:center; word-break:keep-all; }
.contents-box ul.link > li a i { display:block; margin-bottom:10px; }
.contents-box ul.link > li a i img {height:25px; }


@keyframes chatbot-change{
	5% { 
		background-image:url('/common/images/chat_quick_link.png');
	}
	15% { 
		background-image:url('/common/images/chat_quick_link_on.png');
	}
	65% { 
		background-image:url('/common/images/chat_quick_link_on.png');
	}
	75% { 
		background-image:url('/common/images/chat_quick_link.png');
	}
} */

div[data-widget=banner-list] {
    position: relative;
}

div[data-widget=banner-list] div.mymenu {
    display: block;
    position: absolute;
    left: 0;
    top: 0px;
    width: 100%;
    z-index: 5;
}

div[data-widget=banner-list] div.mymenu a {
	position: relative;
    box-sizing: border-box;
    display: block;
    padding: 13px 0 13px 48px;
    width: 100%;
    background: rgba(130,133,149,0.8);
    background: rgb(195 185 50 / 90%);
    background: rgb(17 64 115 / 80%);
    font-size: 0;
}

#appGuide {
	background: rgba(23,150,218,0.9);
}

div[data-widget=banner-list] div.mymenu a:not(:last-child) {border-bottom: 1px solid rgba(255 255 255 / 0.5);}
div[data-widget=banner-list] div.mymenu a strong {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    vertical-align: middle;
}

div[data-widget=banner-list] div.mymenu a i.icon {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 22px;
    transform: translateY(-50%);
}

main div.visual {
	visibility:hidden;
    box-sizing: border-box;
    position: relative;
     height: calc((var(--vh) * 100) - 89px); 
    /* padding: 20px 0;
    background: no-repeat top;
    background-size: cover; */
}

main div.bg_img {
	filter: saturate(0.8);
	height: 100%;
	background: no-repeat top;
	background-size: cover;
	z-index: -1;
	position: relative;
}


div.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

main div.visual div.contents {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

main div.visual div.contents div.box_login {
    margin-bottom: 20px;
    width: 100%;
    border-radius: 5px;
}

main div.visual div.contents div.box_login div.chatbotquick_wrap button.chatbot-change-image {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    float: right;
    display: block;
    cursor: pointer;
    background: url(/common/images/chat_quick_link.png)no-repeat center;
    background-size: contain;
    animation-name: chatbot-change;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

main div.visual div.contents div.box_login div.chatbotquick_wrap:after {
    content: '';
    display: block;
    clear: both;
}

div[data-widget=member-login][data-templet=index] {
    box-sizing: border-box;
    width: 100%;
    min-height: 70px;
    border-radius: 5px;
    background: #00a95c90;
}

div[data-widget=member-login][data-templet=index] section {
    position: relative; display: flex; align-items: stretch; width: 100%; min-height: 70px; text-align: center;
    border-radius: 5px; overflow: hidden;
}

div[data-widget=member-login][data-templet=index] section.login > p {
    float: left;
    box-sizing: border-box;
    width: 70%;
    height: 100%;
    padding: 15px 20px;
    color: #fff;
    font-size: 13px;
    line-height: 22px;
    background: #00a95c90;
    word-break: keep-all;
}

div[data-widget=member-login][data-templet=index] section.login > button {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 0;
    width: 30%;
    height: 100%;
    padding: 15px 20px;
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    color: #fff;
    font-weight: bold;
}

div[data-widget=member-login][data-templet=index] section.login > button i {
    display: block;
    margin-bottom: 7px;
    font-size: 17px;
}

/* 로그인 후 */
div[data-widget=member-login][data-templet=index] section {
    position: relative;
    width: 100%;
    min-height: 70px;
    text-align: center;
}

div[data-widget=member-login][data-templet=index] section.logged > div.user {
	width: 54%;
    position: relative;
    display: flex; align-items: center; gap: 10px;
    box-sizing: border-box;
    padding: 12px 16px;
    color: #fff;
    font-size: 0;
    background: #00a95c90;
    word-break: keep-all;
    text-align: left;
}

div[data-widget=member-login][data-templet=index] section.logged > div.user div.photo {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    vertical-align: middle;
    background: url(/common/images/default.png) no-repeat left center;
    background-size: cover;
}

@media(max-width: 380px){
	div[data-widget=member-login][data-templet=index] section.logged > div.user div.photo {display: none;}
}

div[data-widget=member-login][data-templet=index] section.logged > div.user div.info {
	flex: 1;
    color: #fff;
    text-align: left;
    vertical-align: middle;
}

div[data-widget=member-login][data-templet=index] section.logged > div.user div.info span.name {
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 5px;
    display: block;
    word-break: break-word;
}

div[data-widget=member-login][data-templet=index] section.logged > div.user div.info div.department {
    font-size: 12px; line-height: 1.2em;
}

div[data-widget=member-login][data-templet=index] section.logged > div.user.online div.info div.department {}

div[data-widget=member-login][data-templet=index] section.logged button.employee_card {
	flex: none;
    width: 23%;
    padding: 10px 10px;
    background: rgba(27,32,23,0.2);
    font-size: 12px;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

div[data-widget=member-login][data-templet=index] section.logged button.employee_card i.card {
    display: inline-block;
    width: 32px;
    height: 28px;
    background: url(/common/images/ico_employee_card.png) no-repeat center;
    background-size: contain;
}

div[data-widget=member-login][data-templet=index] section.logged button.employee_card span {
    display: block;
    margin-top: 5px;
}

div[data-widget=member-login][data-templet=index] section.logged button.card {
	flex: none;
    width: 23%;
    padding: 10px;
    background: rgba(0,0,0,0.4);
    font-size: 12px;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

div[data-widget=member-login][data-templet=index] section.logged button.card i.card {
    display: inline-block;
    width: 32px;
    height: 28px;
    background: url(/common/images/ico_card.png) no-repeat center;
    background-size: contain;
}

div[data-widget=member-login][data-templet=index] section.logged button.card span {
    display: block;
    margin-top: 5px;
}

div[data-widget=member-login][data-templet=index] section.logged a.emergency {
	flex: none;
    width: 23%;
    padding: 10px;
    background: rgba(238,72,94,0.95);
    font-size: 12px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div[data-widget=member-login][data-templet=index] section.logged a.emergency i.emergency {
	display: inline-block;
    width: 22px;
    height: 22px;
    background: url(/common/images/ico_tel_institution01.png) no-repeat center;
    background-size: contain;
}
div[data-widget=member-login][data-templet=index] section.logged a.emergency span {
    display: block;
    margin-top: 5px; letter-spacing: -0.1em;
}

main div.visual div.contents ul.link {
    font-size: 0;
}

main div.visual div.contents ul.link > li:nth-child(-n+4) {
    margin-bottom: 6px;
}

main div.visual div.contents ul.link > li a {
    box-sizing: border-box;
    display: block;
    padding: 17px 0;
    width: 100%;
    height: 100%;
    font-size: 12px;
    color: #fff;
    text-align: center;
    word-break: keep-all;
}

main div.visual div.contents ul.link > li a i {
    display: block;
    margin-bottom: 10px;
}

main div.visual div.contents ul.link > li a i img {
    height: 25px;
}

main div.visual div.contents ul.link > li:nth-child(1) {
    margin-left: 0;
}

main div.visual div.contents ul.link > li:nth-child(5) {
    margin-left: 0;
}

main div.visual div.contents ul.link > li {
    box-sizing: border-box;
    display: inline-block;
    width: calc(25% - 5px);
    height: 90px;
    margin-left: 6px;
    background-color: rgba(5,85,172,0.7);
    border-radius: 5px;
    vertical-align: top;
}
main div.visual div.contents ul.link > li.emergency {margin: 6px 0 0; width: 100%; height: auto; background-color: rgba(238,72,94,0.95);}
main div.visual div.contents ul.link > li.emergency a {display: flex; align-items: center; justify-content: center; padding: 10px 0;}
main div.visual div.contents ul.link > li.emergency a i {margin: 0 10px 0 0;}

@keyframes chatbot-change{
    5% { 
        background-image:url('/common/images/chat_quick_link.png');
    }
    15% { 
        background-image:url('/common/images/chat_quick_link_on.png');
    }
    65% { 
        background-image:url('/common/images/chat_quick_link_on.png');
    }
    75% { 
        background-image:url('/common/images/chat_quick_link.png');
    }
}

@media (min-width: 380px) {
    @media (min-width:380px) {
        main div.visual {background-size:cover;}
    }

    /* iOS 에서 높이 안잡힐때 */
    /* main.index {
       height: calc((var(--vh, 1vh) * 100) - 89px);
    } */
}

/*@media all and (max-width: 800px) {
    main.index {       
       height: calc((var(--vh, 1vh) * 100) - 89px);
    }
}*/

@media all and (max-height:550px) {
    main div.visual div.contents{
        bottom:20px;
    }
    
    main div.visual div.contents ul.link > li{
        height:60px;
    }
    
    main div.visual div.contents ul.link > li a{
        padding: 10px 0;
    }
    
    main div.visual div.contents ul.link > li a i img{
        height:15px;
    }
    
    div[data-widget=banner-list] div.mymenu a strong{
        font-size:13px;
    }
}

/* iOS only */
/*@supports (-webkit-touch-callout: none) { 
    main.index { min-height:-webkit-fill-available; }
}*/

div.visual div.popup-view  {font-family: NanumSquare, "Apple SD Neo Gothic", "malgun gothic", dotum, sans-serif;}
div.visual div.popup-view > div.container {top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; height: 390px; max-height: 80%; padding: 0; width: 95%; max-width: 300px; overflow: hidden;}
div.visual div.popup-view > div.container > div.header {min-height: 80px; padding: 0; position: relative; display: block;}
div.visual div.popup-view > div.container > div.header > h1 {font-size: 18px; line-height: 30px; color: #333; padding: 25px 60px 25px 20px;}
div.visual div.popup-view > div.container > div.header > div[data-role=button] {position: absolute; top: 20px; right: 10px; background: transparent; color: #666;}
div.visual div.popup-view > div.container > div.header > div[data-role=button] > button {width: 40px; height: 40px; font-size: 20px;}
div.visual div.popup-view > div.container > div.header > div[data-role=button] > button i {width: auto; height: auto; float: unset; margin: 0; line-height: normal;}

div.visual div.popup-view > div.container > div.article-wrapper {flex: 1; overflow: auto; padding: 0 20px 20px;}
div.visual div.popup-view > div.container > div.article-wrapper > div.popup-title {font-size: 15px; font-weight: 600; line-height: 1.3; word-break: break-all; margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #ddd;}
div.visual div.popup-view > div.container > div[data-role=input] {flex: none; display: flex; padding: 0; background: #004F9F; color: #ffffff;}
div.visual div.popup-view > div.container > div[data-role=input] label {flex: 1; display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 5px; text-align: center;}
div.visual div.popup-view > div.container > div[data-role=input] label input {display: none;}

div.visual div.popup-view > div.container > div.article-wrapper > div[data-module=attachment] {padding: 20px 0 0;}
div.visual div.popup-view > div.container > div.article-wrapper > div[data-module=attachment] h5 {font-size: 13px; line-height: 30px; border-bottom: 1px solid #e3e4e5; margin-bottom: 5px;}
div.visual div.popup-view > div.container > div.article-wrapper > div[data-module=attachment] h5 i {width: 20px;}
div.visual div.popup-view > div.container > div.article-wrapper > div[data-module=attachment] ul li {padding: 5px 0px;}
div.visual div.popup-view > div.container > div.article-wrapper > div[data-module=attachment] ul li i {float: left; width: 20px; height: 20px; margin-right: 5px; background-image: url(/common/images/icon_large_document.png); background-repeat: no-repeat; background-size: contain;}
div.visual div.popup-view > div.container > div.article-wrapper > div[data-module=attachment] ul li a {display: inline-block; line-height: 20px; max-width: calc(100% - 25px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; vertical-align: middle;}

@media (max-width: 800px) {
	div.visual div.popup-view > div.container > div[data-role=input] {flex-direction: row;}
    div.visual div.popup-view > div.container > div[data-role=input] label:not(:last-child) {border-bottom: 1px solid rgba(255 255 255 / 0.2);}
}

@media only screen and (max-width: 767px) {
	div.visual div.popup-view > div.container > div.header {min-height: 60px;}
	div.visual div.popup-view > div.container > div.header > h1 {font-size: 16px; height: auto; line-height: 30px; padding: 15px 60px 15px 20px;}
    div.visual div.popup-view > div.container > div.header > div[data-role=button] {top: 10px; right: 10px;}
}