[v-cloak] {
    display: none;
}
.fade-enter-active {
    transition: opacity 1.2s
}
.fade-enter, .fade-leave {
    opacity: 0
}
.fast_fade-enter-active {
    transition: opacity 0.8s
}
.fast_fade-enter, .fast_fade-leave {
    opacity: 0
}
@keyframes slidein {
    from {
        position:relative;
        top:-5px;
        opacity:0.7;
    }

    to {
        position:relative;
        top:0px;
        opacity:1;
    }
}

html{overflow: auto;}
html.top-menu-open{overflow: hidden;}
html.log-layout body{
    background:url("../images/log-bg.jpg") no-repeat center top #2b343b; background-size: 100% auto;
}
body{font-size: 14px; font-weight: 400; font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif; color:#666; margin: 0px; padding: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body *{box-sizing: border-box;}
@-webkit-keyframes zoom-a {
    0% {
        background-size: 130% auto;
    }
    100% {
        background-size: 110% auto;
    }
}
@-moz-keyframes zoom-a {
    0% {
        background-size: 130% auto;
    }
    100% {
        background-size: 110% auto;
    }
}
@-o-keyframes zoom-a {
    0% {
        background-size: 130% auto;
    }
    100% {
        background-size: 110% auto;
    }
}
@keyframes zoom-a {
    0% {
        background-size: 130% auto;
    }
    100% {
        background-size: 110% auto;
    }
}
@-webkit-keyframes zoom-b {
    0% {
        background-size: 110% auto;
    }
    100% {
        background-size: 130% auto;
    }
}
@-moz-keyframes zoom-b {
    0% {
        background-size: 110% auto;
    }
    100% {
        background-size: 130% auto;
    }
}
@-o-keyframes zoom-b {
    0% {
        background-size: 110% auto;
    }
    100% {
        background-size: 130% auto;
    }
}
@keyframes zoom-b {
    0% {
        background-size: 110% auto;
    }
    100% {
        background-size: 130% auto;
    }
}
header, header *, footer, footer *{margin: 0px; padding: 0px; box-sizing: border-box;}
/*.alert-modal button:focus, .confirm-modal button:focus{outline: none !important;}*/
legend{position: absolute; opacity: 0;}
.wrap{overflow-x:hidden;}
li{list-style: none;}
a,button{cursor: pointer; text-decoration: none; margin: 0px; padding: 0px;}
.center{text-align: center !important;}
.left{text-align: left !important;}
.right{text-align: right !important}
/* 화면전환관련 버튼 */
.screen-btn{border: 1px solid #888 !important; color:#444 !important; background-color:#f9f9f9 !important;}
/* 서버반영관련 버튼 */
.server-btn{border: 1px solid #998873 !important;  background-color:#f3ece4 !important;  color: #715e46 !important; }
/* 삭제버튼 */
.del-btn{border: 1px solid #ed5e68 !important; color: #cb2523 !important; background-color:#ffedee !important;}
.del-btn i:before{color: #ed5e68;}
/* 출력, 다운로드관련 버튼 */
.print-btn{border: 1px solid #36b579 !important; color: #2c8755 !important; background-color:#e7fff4 !important;}
header h2{padding-bottom: 0px; font-size:16px; color:#fff; padding-top: 10px;}
header h2:after{content:""; display:block; clear: both; }
header h2 span.location{ text-align: center; display: block; float: none;}
header h2 span.location *{font-weight: normal;  font-size: 13px; font-style: normal; vertical-align: middle;}
header h2 span.location em{display: inline-block; padding: 0 4px;}
header h2 span.location  a{display: inline-block; text-align: center; color:#333;}
header h2 span.location strong{color:#fff; font-weight: bold;}
header h2 span.location a.home{font-size: 0px;}
header h2 span.location a.home:before{content:"H"; display: block; width: 20px; height: 20px; border-radius: 180px; background-color: #a5a6ba; color:#fff; font-size: 12px; line-height: 19px;}
.td-title{display:none;}

/* 메인 스타일 */
.main-page{background: #fff;}
.main-page button{border: 0px;}
.line-banner *,.login-area *, .main-search *,.main-area *, .main-page footer{padding: 0px; margin: 0px;}
.login-area{border-bottom: 1px solid #e0e0e0; background: #fff; }
.login-area .hak-info{background: url("../images/qu.png") no-repeat left center; font-size: 15px; color:#535353; padding:5px 25px;}
.login-area > div{max-width:1300px; margin:0 auto; padding: 15px 0;}
.login-area ul{float: right;}
.login-area ul:after,.login-area > div:after{content: ""; display: block; clear: both;}
.login-area ul li{float: left;}
.login-area ul li a{font-size: 14px; color:#535353; display: block; background: url("../images/main-login.png") no-repeat left center; padding:2px 20px; }
.login-area .login a{}
.login-area .join a{background-image: url("../images/main-join.png"); padding-left: 25px;}
.login-area .admin a{background-image: url("../images/main-admin.png"); padding-left: 25px;}
.login-area .main-mypage a{background-image: url("../images/main-mypage.png"); padding-left: 25px;}
.login-area .logout{color:#3da998; font-weight: 700;}
.login-area .logout a{background-image: url("../images/main-logout.png"); display:inline-block; margin-left: 5px; font-weight: normal;}
.login-area .main-all a{background-image: url("../images/main-all.png");}

.main-search{}
.main-search > div{position: relative; max-width: 1300px;  margin: 0 auto;}
.main-search .hak-logo{background: url("../images/hak-logo.png") no-repeat left center; padding:10px; padding-left:110px; font-size: 16px; font-weight: normal; color:#767676; display: inline-block; margin-top: 15px;}
.main-search .ding-dong {float:right; margin-top:20px; margin-right:5px;font-size:16px;color:cornflowerblue;}
.ding-dong-2 {display:none;}
.ding-dong-2 a {font-size:18px;color:cornflowerblue;}
.main-search h1{position: absolute; left:50%; margin-left: -150px; top:70px;}
.main-search h1 img{}
.search-con{}
.s-top{padding-top: 100px; margin-bottom: 15px; padding-left:35px; padding-right: 35px;}
.s-top:after{content: ""; display: block; clear: both;}
.s-top a.hak-go{float: right; color:#535353; font-size: 14px; background: url("../images/hak-go.png") no-repeat left center; padding:5px; padding-left: 25px; display:none;}

.key{float: left; position: relative; width: 50%; padding-left: 100px; font-size: 14px;}
.key dt{color:#6d707d; font-weight: 700; background: url("../images/key.png") no-repeat left center; padding: 5px; padding-left:30px;  position: absolute; left:0px; top:0px;}
.key dd{padding: 5px 10px; }
.key dd ul{}
.key dd ul li{display:none;}
.key dd ul li.on{display: block;}
.key dd ul li a{color:#6c5a44;}
.serch-in:after{content:""; display: block; clear: both;}
.search-input-area{border: 2px solid #7ebd25; position: relative; border-radius: 45px 0 45px 0; width: 100%; max-width: calc(100% - 150px); float: left; overflow: hidden; background-color:#7ebd25; }


.search-input-area select{border: 0px; text-indent:40px; border-radius: 0px !important; font-size: 20px; font-weight: 800; color:#7ebd25; height: 90px; line-height: 90px; position: absolute; left:0px; top:0px; max-width:150px; text-align: center;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
    background-image: url("../images/main-search-select.png");
}

.search-input-area select::-ms-expand { display:none; }
.search-input-area input[type="text"]{height: 90px; border: 0px; padding-right: 225px; padding-left: 10px; border-radius: 0px; text-indent: 20px; max-width:calc(100% - 0px); font-size: 20px; font-weight: 700;}
::-webkit-input-placeholder { /* Edge */
    color: #999999;
    line-height: 90px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#999999;
    line-height: 90px;
}
::placeholder {
    color:#999999;
    line-height: 90px;
}
.search-input-area .detail{position: absolute; right:250px; top:50%; margin-top: -12px; display: block; width: 25px; height: 25px; background:url("../images/de.png") no-repeat center center; font-size: 0px;}
.search-input-area .search{position: absolute; border-radius: 0 0 35px 0; right:0px; top:0px; width: 225px; height: 90px; line-height: 90px; font-size: 22px; color:#fff; font-weight: 800; background: url("../images/main-search.png") no-repeat left 65px center #7ebd25; text-indent: 15px; text-align: center;}
.serch-in .apply{color:#fff; float: right; width: 100%; line-height: 94px; font-size: 22px; color:#fff; font-weight: 800; display: block; height: 94px; text-align: center; background-color: #3da998; border: 2px solid #3da998; border-radius: 0 45px 0 45px; max-width: 140px;}

.main-gnb{padding:20px;}
.main-gnb > ul{margin: 0 auto; max-width: 1300px; padding:0px;}
.main-gnb > ul:after{content:""; display: block; clear: both;}
.main-gnb > ul > li{float: left; position: relative; min-width: 170px;}
.main-gnb > ul > li.on{width: calc(100% - 510px);}
.main-gnb > ul > li > a{text-align: center; display: block;}
.main-gnb > ul > li.on > a{text-align: left;}
.main-gnb > ul > li.on > div{ display: block;
    font-size: 0px;
    background: url("../images/menu-txt.png") no-repeat left top;
    width: 140px;
    height: 100px;
    position: absolute;
    opacity:1;
    left: 165px;
    top: 25px;
    transition:all ease-out 0.6s;
}
.main-gnb > ul > li > div{width:0px; font-size: 0px; overflow:hidden; height:0px; transition:all 0.3s; opacity:0; position: absolute; top: 25px;}
.main-gnb > ul > li > div strong{}
.main-gnb > ul > li > div span{}
.main-gnb > ul > li > ul{ overflow:hidden; position:absolute; opacity:0; top:0px; left:0px; z-index:-10; transition:all 0s;}
.main-gnb > ul > li.on > ul{display: block; position: absolute; top:0px; left:0px; opacity:1; z-index:10; height:auto; padding-left: 290px; width: 100%; transition:all ease 0.6s;}
.main-gnb > ul > li > ul > li{width: calc(50% - 10px); float: left; margin-left: 7px; margin-bottom: 7px;}
.main-gnb > ul > li > ul > li > a{padding: 10px;  font-weight: bold; display: block; border: 1px solid #7ebd25; color:#51800f; border-radius: 6px; font-size: 15px; text-align: center; background: url("../images/menu-txt-off.png") no-repeat left bottom -5px;}
.main-gnb > ul > li > ul > li > a.focus,.main-gnb > ul > li > ul > li > a:hover{background:url("../images/menu-txt-on.png") no-repeat left bottom -5px #7ebd25; color:#fff;}
.main-gnb > ul > li.hak > div{}
.main-gnb > ul > li.hak > ul{padding-left: 270px;}
.main-gnb > ul > li.hak > ul > li > a{border-color: #f9a95c; color:#c56b14; background-image: url("../images/menu-txt-off1.png");}
.main-gnb > ul > li.hak > ul > li > a.focus,.main-gnb > ul > li.hak > ul > li > a:hover{background:url("../images/menu-txt-on.png") no-repeat left bottom -5px #f88d27; color:#fff;}
.main-gnb > ul > li.seub > div{background: url("../images/menu-txt2.png") no-repeat left top;}
.main-gnb > ul > li.seub > ul{padding-top: 0px;}
.main-gnb > ul > li.seub > ul > li > a{height: 33px;}
.main-gnb > ul > li.seub > ul > li > a.focus,.main-gnb > ul > li.seub > ul > li > a:hover{}
.main-gnb > ul > li.dam > div{background: url("../images/menu-txt3.png") no-repeat left top;}
.main-gnb > ul > li.dam > ul > li > a{background-image: url("../images/menu-txt-off2.png"); border-color: #3da998; color:#3da998;}
.main-gnb > ul > li.dam > ul > li > a.focus,.main-gnb > ul > li.dam > ul > li > a:hover{background:url("../images/menu-txt-on.png") no-repeat left bottom -5px #3da998; color:#fff;}
.main-gnb > ul > li.go > div{background: url("../images/menu-txt4.png") no-repeat left top;}
.main-gnb > ul > li.go > ul{top: 45px;}
.main-gnb > ul > li.go > ul > li > a{background-image: url("../images/menu-txt-off3.png"); border-color: #998873; color:#998873;}
.main-gnb > ul > li.go > ul > li > a.focus,.main-gnb > ul > li.go > ul > li > a:hover{background:url("../images/menu-txt-on.png") no-repeat left bottom -5px #998873; color:#fff;}
.main-gnb > ul > li.go.on:before{content:""; display: block; width: 180px; height: 128px; position: absolute; bottom:-20px; right:10px; background: url("../images/go-bg.png") no-repeat right bottom;}
.open-su{
    margin: 0 auto;
    max-width: 1300px;
    padding: 0px;
    box-sizing:border-box;
    border:2px solid #3da998;
    border-radius:8px;
    position:relative;
    margin-top:10px;
    padding-left:150px;
    background:#f6fdfc;
    min-height:100px;
}
.open-su h2{    position: absolute;
    left: 30px;
    top: 5px;
    line-height: 130%;
    font-weight: bold;
    color: #3da998;
}
.open-su ul{padding:0px;}
.open-su ul:after{content:""; display:block; clear:both;}
.open-su li{float:left;}
.open-su li a{color: #267165; font-weight:bold; font-size:17px; position:relative; display:block; padding:7px 10px; padding-left:27px; }
.open-su li a:before{content:""; display:block; border-radius:180px; background-color:#3da998; width:7px; height:7px; position:absolute; left:10px; top:14px; }
.open-su li a:hover,.open-su li a:focus,.open-su li a:active{color:#998873; text-decoration:underline;}
.main-area{background-color: #f1f1f1; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb;}
.main-area > div{position: relative; max-width: 1300px;  margin: 0 auto;}
.main-banner > div:after,.main-area > div:after{content: ""; display: block; clear: both;}
.main-area .main-list{position: relative; width:calc(55% - 20px); float: left;}
.main-area .main-list *{vertical-align: middle;}
.main-area .main-list + .main-list{margin-left:40px; width: calc(45% - 20px);}
.main-area .main-list h2{background: url("../images/main-list1.png") no-repeat left center; padding: 10px; font-size: 15px; font-weight: 900; color:#6c5a44; padding-left: 40px; position: absolute; left:0px; top:12px;}
.main-area .main-list h2.icon2{background: url("../images/main-list2.png") no-repeat left center;}
.main-area .main-list ul{padding: 18px; padding-left: 160px;    padding-right: 60px; }
.main-area .main-list + .main-list ul{padding-left: 120px; padding-top:20px;}
.main-area .main-list ul li{width:0px; height:0px; overflow:hidden; opacity:0; transition:all ease 1s;}
.main-area .main-list ul li span{background-color: #3da998; color:#fff; margin-right: 5px; font-size: 12px; border: 1px solid #3da998; border-radius: 3px; padding: 2px 15px; text-align: center; min-width: 75px; padding: 2px 5px; display: inline-block;}
.main-area .main-list ul li em{background-color: #f1fffd; color:#00977f; margin-right:10px; font-size: 12px; display: inline-block; border: 1px solid #48ae9e; border-radius: 3px; min-width: 75px; padding: 2px 5px; text-align: center;}
.main-area .main-list ul li.on{display: block; width:auto; height:auto; overflow:visible; opacity:1; transition:all ease 1s;}
.main-area .main-list ul li.on a{font-size: 14px; color:#5b5b5b; overflow: hidden; white-space: nowrap; word-break: break-all; text-overflow: ellipsis; display: block; width: 100%;    padding-top: 3px;
    padding-bottom: 3px; }
.main-area .main-list ul li.on a:hover,.main-area .main-list ul li.on a:focus{text-decoration: underline;}
.main-area .main-list .roll{position: absolute; right:0px; top:50%; margin-top: -9px;}
.main-area .main-list .roll button{width: 15px; height: 15px; font-size: 0px;}
.main-area .main-list .roll .prev{background: url("../images/m-arr-left.png") no-repeat center center; margin-right: 5px;}
.main-area .main-list .roll .next{background: url("../images/m-arr-right.png") no-repeat center center;}
.main-area .main-list .roll .more{ width: 15px; height: 15px; margin-right:5px; font-size: 0px; display:inline-block;background: url("../images/notice-plus.png") no-repeat center center; }
.main-banner{background-color: #ebebeb; padding-top: 65px;}
.main-banner > div{position: relative; max-width: 1300px;  margin: 0 auto;}
.main-banner .left-link{float: left; width: calc(50% - 17px);}
.main-banner .left-link .menu-list{margin-bottom: 40px; margin-top: 17px; padding-left: 0px;}
.main-banner .left-link .menu-list a{ text-align: center; color:#fff; min-height: 100px; line-height: 100px; font-weight: 900; font-size: 20px;}
.main-banner .left-link .menu-list a:hover,.main-banner .left-link .menu-list a:focus{
    /*-webkit-animation: zoom-b 1s linear both ; /* Safari 4+ */
    /*-moz-animation:    zoom-b 1s linear both ; /* Fx 5+ */
    /*-o-animation:      zoom-b 1s linear both ; /* Opera 12+ */
    /*animation:         zoom-b 1s linear both ; /* IE 10+, Fx 29+*/
}
.main-banner .left-link .menu-list:after{content: ""; display: block; clear: both;}
.main-banner .left-link .menu-list .hak-dong{background: url("../images/link1-bg.png") no-repeat center top; background-size:cover; float: left; width: calc(33.333% - 10px); margin-left: 10px;}
.main-banner .left-link .menu-list .kang{background: url("../images/link2-bg.png") no-repeat center top; background-size:cover; float: left; width: calc(33.333% - 10px); margin-left: 10px;}
.main-banner .left-link .menu-list .citizen{background: url("../images/link3-bg.png") no-repeat center top; background-size:cover; float: left; width: calc(33.333% - 10px);}
.main-banner .left-link .link-list:after{content: ""; display: block; clear: both;}
.main-banner .left-link .link-list li{float: left; width:16.666%;}
.main-banner .left-link .link-list li a{text-align: center; background: url("../images/b1.png") no-repeat center top; display: block; font-size: 15px; color:#555555; font-weight: 700; padding-top: 70px;}
.main-banner .left-link .link-list li a.link0{background-image: url("../images/b0.png");}
.main-banner .left-link .link-list li a.link1{}
.main-banner .left-link .link-list li a.link2{background-image: url("../images/b2.png");}
.main-banner .left-link .link-list li a.link3{background-image: url("../images/b3.png");}
.main-banner .left-link .link-list li a.link4{background-image: url("../images/b4.png");}
.main-banner .left-link .link-list li a.link5{background-image: url("../images/b5.png");}


.main-banner .right-link{float: right; width: calc(50% - 17px); position: relative; min-height: 300px;}
.main-banner .right-link h2{background: url("../images/h2-bg.png") no-repeat left center; color: #fff; font-size: 20px; padding-left: 35px; height: 100px; line-height: 100px; max-width: 450px;
    /* -webkit-animation: zoom-a 1s linear both ; /* Safari 4+ */
    /* -moz-animation:    zoom-a 1s linear both ; /* Fx 5+ */
    /* -o-animation:      zoom-a 1s linear both ; /* Opera 12+ */
    /* animation:         zoom-a 1s linear both ; /* IE 10+, Fx 29+*/
}
.main-banner .right-link h2:hover,.main-banner .right-link h2:focus{
    -webkit-animation: zoom-b 1s linear both ; /* Safari 4+ */
    -moz-animation:    zoom-b 1s linear both ; /* Fx 5+ */
    -o-animation:      zoom-b 1s linear both ; /* Opera 12+ */
    animation:         zoom-b 1s linear both ; /* IE 10+, Fx 29+*/
}
.main-banner .left-link .link-list li a:hover,.main-banner .left-link .link-list li a:focus{
    display:block;
    animation-duration: 0.5s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.main-banner .right-link h2 strong{color:#c0ff67;}
.main-banner .right-link h2 .more{font-size: 0px; width: 30px; height:30px; margin-left:7px; position: relative; top:28px; display: inline-block; background: url("../images/main-more.png") no-repeat center center;}
.main-banner .right-link .main-map{position: absolute; right:0px; top:-35px;}
.main-map > img{display: none;}
.main-map > img.on{display: block;}
.main-banner .right-link  .map-search{padding: 30px; max-width: 350px;}
.map-search-title{
    color: #7c7c7c;
    font-size: 16px !important;
    font-weight: bold;
    display: block;
    padding: 10px 0;
}
.map-search-title i{margin-right: 5px;}
.radio{position: relative;margin-bottom:12px; margin-right:5px;}
.radio label{color:#7c7c7c; font-size: 16px !important; font-weight: bold;}
.main-banner .right-link .radio label:before{border: 2px solid #b1b1b1; background-color:#ebebeb;}
.main-banner .right-link .radio input[type="radio"]:checked + label:after{background-color: #818181;}
.main-banner .right-link  .map-search input[type="radio"]{position: absolute; left:1px; top:4px;}
.main-banner .right-link  .map-search input[type="radio"] + label{}
.main-banner .right-link  .map-search input[type="radio"]:checked + label,.main-banner .right-link  .map-search input[type="radio"][checked="checked"] + label{}
.main-banner .right-link  .map-search > span.search-map{display: block; position: relative;}
.main-banner .right-link  .map-search > span.search-map > input{height: 35px; border: 1px solid #c7c7c7; text-indent: 5px; font-size: 14px; background-color: rgba(0,0,0,0.1); border-radius: 0px;}
.main-banner .right-link  .map-search > span.search-map > input::placeholder{color:#5c5c5c;}
.main-banner .right-link  .map-search > span.search-map button{background: url("../images/map-search.png") no-repeat left center; width:30px; font-size: 0px; display: block; height: 35px; position: absolute; right:0px; top:0px;}

/*메인 끝*/

/* 트리테이블 */
.depth_1 > *{display: inline-block; font-weight: bold;}
/* .depth_2 td{background-color:#fcfcfc;}
.depth_3 td{background-color:#f7f7f7;}*/
.depth_2 > *{display: inline-block; margin-left: 20px;}
.depth_3 > *{display: inline-block; margin-left: 40px;}
.depth_4 > *{display: inline-block; margin-left: 60px;}
.depth_5 > *{display: inline-block; margin-left: 80px;}
.depth_6 > *{display: inline-block; margin-left: 100px;}
/*.depth_3 td{border-bottom: 1px dashed #ddd !important; border-top: 1px dashed #ddd !important; }*/

tr.select-tr td{background-color:#f0f9ff !important; color:#666;}

/* 컴포넌트 */

input[type="number"],input[type="text"],input[type="password"], select{ box-sizing:border-box; padding:0 5px; line-height: 22px; width: 100%; border: 1px solid #dddddd;  height: 24px; border-radius: 5px; color:#666; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select{ -moz-appearance:none; /* Firefox */  -webkit-appearance:none; /* Safari and Chrome */  appearance:none; background: url("../images/select-arr.png") no-repeat right 10px center; padding-right: 28px; color:#666; }
select::-ms-expand { display:none; }

.double-comp{width: 100%; display: block;}
.double-comp:after{content:""; display: block; clear: both;}
.double-comp > div{float: left; width:50%; box-sizing: border-box; padding-left: 2px;}
.double-comp > div:first-child{ padding-right: 2px; padding-left: 0px;}
.double-txt-comp{border: 1px solid #bbbbbb !important; background-color:#fff !important; height: 26px; background-color: #fff; line-height: 24px; box-sizing: border-box; position: relative; border-radius: 0px; display: block;}
.double-txt-comp.term{max-width: 255px;}
.double-txt-comp:after{content:""; display: block; clear: both;}
.double-txt-comp *{border: 0px; line-height: 22px;}
.double-txt-comp > div:first-child{float: left; width: calc(50% - 7px);}
.double-txt-comp > div:last-child{float: right; width: calc(50% - 7px);}
.double-txt-comp > span{position: absolute; left:50%; margin-left: -7px; top:0px; height: 22px; line-height: 22px; width:14px; display: block; text-align: center; font-size: 12px; }
.double-txt-comp input{border: 0px !important; height: 24px !important; background-color: transparent !important;}
.double-txt-comp .cal input{height: 22px !important;}
.double-txt-comp input[type="text"][readonly]{border: 0px !important; background-color: transparent !important;}
.double-txt-comp select{border: 0px !important; height: 24px !important;}
.input-btn{position: relative; display: block;}
.input-btn input{padding-right: 35px;}
.input-btn button, .input-btn span{position: absolute; right:0px; top:0px; width: 25px; height: 24px; display: block; font-size: 0px; color:#a5a6ba; background-color: transparent;}
.input-btn .value-delete{right:22px; width: 20px; background: url("../images/select-x.png") no-repeat center center; cursor: pointer;}
.cal .value-delete{font-size: 0px; background: url("../images/select-x.png") no-repeat center center; cursor: pointer;}
.input-btn *:last-child{right:0px; width: 25px;}
.input-btn button i:before{font-size: 14px;}
.cal{display: block; position: relative;}
.cal input{padding-right: 35px;}
.cal > span{position: absolute; top:0px; right:21px; width:20px; height:24px; min-height: 100%;}
.cal > button{position: absolute; right:0px; top:0px; height: 24px; background: url("../images/cal.png") no-repeat center center; font-size: 0px; width: 25px; min-height: 100%;}
.double-txt-comp .cal input, .double-comp .cal input,.double-txt-comp .input-txt input,.double-txt-comp .input-txt input{display: block; border: 0px; height: 22px;}
.input-txt{position: relative; display: block;}
.input-txt input{padding-right: 35px;}
.input-txt em{position: absolute; right:0px; top:0px; width: 35px; height: 22px; line-height: 22px; text-align: center; font-size: 13px; color:#666;}
.text{margin-left: 4px; line-height: 24px;}
.btn-group *{vertical-align: middle;}
.btn-group i:before{margin-right:5px; position: relative; top:-1px;}
.btn-group > span{font-size: 14px; margin-right: 10px; margin-left: 10px; position: relative; top:3px;}
em{font-style: normal;}

/*체크박스*/
.check{position: relative; display: inline-block;}
.check *{margin: 0px; padding: 0px;}
.check label{display: inline-block; padding-left: 17px; cursor: pointer; text-indent:5px; font-size:13px; }
.check label:before{content:""; display: block; width: 17px; box-sizing:border-box; height: 17px; border: 2px solid #ddd; position:absolute; left:0px; top:1px; background-color: #fff;}
.check input[type ="checkbox"]:checked + label:after{content:""; display: block; width: 17px; box-sizing:border-box; height: 17px; background: url("../images/check.png") no-repeat center center; position: absolute; left:0px; top:1px; }
.check input{position: absolute; left:0px; top:1px; opacity: 1; width: 17px; height: 17px;}
.check input:focus{outline: 1px dotted #888;}
.check + .check{margin-left: 5px;}
.check input[type ="checkbox"]:disabled + label:before, .check input[type ="checkbox"][disabled] + label:before, .check input[type ="checkbox"][disabled="disabled"] + label:before{background-color:#f3f3f3 !important; border-color: #ddd !important;}
.check input[type ="checkbox"]:checked:disabled + label:after,.check input[type ="checkbox"][checked][disabled] + label:after,.check input[type ="checkbox"][checked="checked"][disabled="disabled"] + label:after{background-image: url("../images/check-disabled.png") !important;}
.check input[type ="checkbox"]:disabled + label,.check input[type ="checkbox"][disabled] + label,.check input[type ="checkbox"][disabled="disabled"] + label,.check input[type ="checkbox"]:checked:disabled + label,.check input[type ="checkbox"][checked][disabled] + label,.check input[type ="checkbox"][checked="checked"][disabled="disabled"] + label{color:#999 !important; cursor: auto !important;}
.check.type-button{margin-left: 3px; margin-right: 3px; position: relative;}
.check.type-button input{opacity: 0 !important;}
.check.type-button label{background-color: #ebf1fb; border: 1px solid #536aab; color:#536aab; padding: 10px 15px; border-radius: 40px; min-width:140px; text-align: center; font-size: 16px; text-indent: 0px; }
.check.type-button label:before{content: ""; display: block; position: absolute; left:50%; margin-left: -5px; top:40px; display: block; width: 0px; height: 0px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-top: 5px solid #3da998; opacity: 0;}
.check.type-button input[type ="checkbox"]:checked + label:after{display: none !important;}
.check.type-button input[type ="checkbox"]:disabled + label:before, .check.type-button input[type ="checkbox"][disabled] + label:before, .check.type-button input[type ="checkbox"][disabled="disabled"] + label:before,
.check.type-button input[type ="checkbox"]:checked:disabled + label:after,.check.type-button input[type ="checkbox"][checked][disabled] + label:after,.check.type-button input[type ="checkbox"][checked="checked"][disabled="disabled"] + label:after,
.check.type-button input[type ="checkbox"]:disabled + label,.check.type-button input[type ="checkbox"][disabled] + label,.check.type-button input[type ="checkbox"][disabled="disabled"] + label,.check.type-button input[type ="checkbox"]:checked:disabled + label,.check.type-button input[type ="checkbox"][checked][disabled] + label,.check.type-button input[type ="checkbox"][checked="checked"][disabled="disabled"] + label
{display: none !important;}

.check.type-button input[type ="checkbox"]:checked + label{background-color: #3da998; color:#fff; border-color: #3da998;}
.check.type-button input[type ="checkbox"]:checked + label:before{opacity: 1;}
.check.type-button input[type ="checkbox"]:checked:disabled + label,.check.type-button input[type ="checkbox"][checked][disabled] + label,.check.type-button input[type ="checkbox"][checked="checked"][disabled="disabled"] + label{background-color: green;}
.check.type-button input[type ="checkbox"]:disabled + label,.check.type-button input[type ="checkbox"][disabled] + label,.check.type-button input[type ="checkbox"][disabled="disabled"] + label,.check.type-button input[type ="checkbox"]:checked:disabled + label,.check.type-button input[type ="checkbox"][checked][disabled] + label,.check.type-button input[type ="checkbox"][checked="checked"][disabled="disabled"] + label{background-color: green;}

/*라디오버튼*/
.radio.no-txt label, .check.no-txt label{font-size: 0px; }
.radio + .radio{margin-left: 5px;}
/*.radio + .radio input{left:5px;}*/
.radio{position: relative; display:inline-block; }
.radio label{display: inline-block; min-height: 17px; padding: 4px 0; padding-left: 17px; text-indent: 5px;  cursor: pointer; font-size: 13px; position: relative; box-sizing: border-box;}
.radio label:before{content:""; display: block; width: 17px; height: 17px; box-sizing: border-box; border: 2px solid #ddd; border-radius: 180px; position: absolute; left:0px; top:4px; background-color: #fff;}
.radio input[type="radio"]:checked + label:after{content:""; display: block; width: 9px; height:9px; box-sizing: border-box; background:#998873; border-radius: 180px; position: absolute; left: 4px; top:8px;}
.radio input{position: absolute; left:1px; top:5px; opacity: 1; width: 15px; height: 15px;}
.radio input:focus{outline: 1px dotted #888;}
.radio input[type="radio"]:checked:disabled + label:after,.radio input[type="radio"][checked][disabled] + label:after,.radio input[type="radio"][checked="checked"][disabled="disabled"] + label:after{background-color: #ccc !important;}
.radio input[type="radio"]:disabled + label:before, .radio input[type="radio"][disabled] + label:before, .radio input[type="radio"][disabled="disabled"] + label:before{background-color: #f3f3f3 !important; }
.radio input[type="radio"]:disabled + label, .radio input[type="radio"][disabled] + label, .radio input[type="radio"][disabled="disabled"] + label{color:#999 !important;}
.req{color:red; font-weight: bold;}
td{font-size: 14px;}
/*tr[class *="depth_"] i:before[data-icon="caret-right"]{transform: rotate(360deg); transition: all 0.7s;}
tr[class *="depth_"] i:before[data-icon="caret-down"]{transform: rotate(360deg); transition: all 0.7s;}*/
td > a ,td > button{width: 100%; box-sizing: border-box; color:#007bcf; }
td > a:hover,td > a:focus{text-decoration: underline;}
.td-btn-group:after{content:""; display: block; clear: both;}
.td-btn-group a, .td-btn-group button{margin-left: 4px; border: 1px solid #a58e71; font-size: 12px; display:inline-block; background-color:#f3eae0; color: #7b684f; height: 24px; line-height: 22px; padding: 0 10px; border-radius: 5px; box-sizing: border-box;}
.td-btn-group a i:before, .td-btn-group button i:before{font-size: 11px; margin-right: 3px;}
.btn{border: 1px solid #62bfff; display: inline-block; background-color:#ddf1ff; color: #007bcf;height: 24px; line-height: 22px; padding: 0 10px; border-radius: 5px; text-align: center;}
.btn_1{display: inline-block; height: 24px; line-height: 22px; padding: 0 10px; border-radius: 5px; text-align: center;}
.td-btn-group{text-align: center; display: inline-flex; font-size: 0px;}
.td-btn-group a:first-child, .td-btn-group button:first-child{margin-left: 0px;}


.close-menu{display: block; transform: rotate(0deg); width: 31px; height: 31px; border-radius: 180px; position: absolute; right:0px; bottom:15px; z-index: 9999; margin-top: 0px; background: url("../images/close-menu.png") no-repeat center center rgba(255,255,255,0.2); font-size: 0px; transition:transform 1s;}
.all-menu{ display: block; z-index:999; transform: rotate(0deg); transition: all 1s; width: 31px; height: 31px; border-radius: 180px; position: absolute; right:0px; opacity:1; top:30px; background: url("../images/all-menu1.png") no-repeat center center; font-size: 0px;}
.user-area{position: absolute;
    right: 15px;
    text-align: right;
    top: 135px;
    width: calc(100% - 250px);
    padding-right: 150px; color:#fff;}
.user-area:after{content:""; display: block; clear: both;}
.user-area > span{font-size: 14px; position: relative; top:20px; font-weight: 400; display: none;}
.user-area > span strong{margin-right: 7px; color:#ff524f; }
.user-area button,.user-area a{font-size: 0px; width: 25px; height: 25px; display: block; float: left; margin-left: 15px;}
.user-btn{display: inline-block; position: absolute; right:0px; top:0px;}
.user-btn a{display: inline-block; width:58px; height:58px; border-radius: 180px; background-color:rgba(255,255,255,0.4);}
.user-btn:after{content:""; display: block; clear: both;}
.user-btn .home{ width: 25px; height: 25px; background: url("../images/home.png") no-repeat center center;}
.my-page{background: url("../images/my-page.png") no-repeat center center;}
.logout{background: url("../images/log-out.png") no-repeat left 9px center;}
.alarm{position: relative; background: url("../images/al.png") no-repeat center center;}
.alarm em{position: absolute; top:-9px; right:-7px; font-size: 14px; font-weight: 400; text-align: center; width: 24px; height: 24px; border-radius: 180px; color:#fff; font-style: normal; line-height: 24px; background-color: #fc667c;}

.content{padding:0px 0; box-sizing: border-box; width:100%;/*max-width: 1699px;*/ margin: 0 auto; overflow:visible; position: relative;}
.content > h2{display: none;}
.content-header{background: url("../images/sub-visual.jpg") repeat-x center top; min-height: 270px; overflow: hidden; background-size: cover;}
.go .content-header{min-height: 220px;}
/*
.my .content-header{min-height: 220px;}
.my .content-header .location{padding-top: 30px;}
*/
.join-group{padding: 15px 0px; }
.join-group .check label:before{width:20px; height: 20px; top:-2px;}
.join-group .check input[type ="checkbox"]:checked + label:after{width:20px; height: 20px; top:-2px;}
.join-group label{font-size: 15px; font-weight: bold; padding-left: 23px;}
.skip-link{display: block; position: absolute; left:0px; top:0px; width: 100%; z-index: 9999;}
.skip-link a{    display: block;
    height: 0px;
    overflow: hidden;
    width: 100%;
    background-color:rgba(0,0,0,0.7);
    z-index: 9999;
    text-align: center;
    color: #fff;
    text-decoration: none;
    position: fixed;
    top: 0px;
    left: 0px;}
.skip-link a:focus,.skip-link a:hover,.skip-link a:active{height: 30px; line-height: 30px;}
.content-header h2{font-size: 0px; position: relative; max-width:1160px; margin: 0 auto;}
.content-header .location{font-size: 15px; color:#fff; font-weight: normal; margin: 0 auto; padding-top: 40px; padding-bottom:10px;}
.content-header .location .home{background: url("../images/home-icon.png") no-repeat center center; display: inline-block; width: 20px; height: 20px;}
.content-header .location .home:before{display: none;}
.content-header h3{color:#fff; font-size: 47px; font-weight:800; text-align: center; position: relative; }
.content-header h2:before{content:""; display: block; width: 444px; height: 437px; background: url("../images/sub-v-icon.png") no-repeat left top 0px; position: absolute; left:-20px; top:45px;}
.content-header > div ul {margin: 0 auto; max-width: 1160px; text-align: center; border-right:1px solid rgba(255,255,255,0.2); }
.sub-tab{border: 0px solid #bbb; position: absolute; bottom:0px; border-radius:0 0 4px 4px; background-color:rgba(84,120,212,0.8); padding:0px 10px; width: 100%;  box-sizing: border-box;}
.dam .sub-tab{background-color:rgba(71, 169, 152, 0.8);}
.seup .sub-tab{background-color:rgba(119, 181, 31, 0.8);}
.hak .sub-tab{background-color:rgba(224, 130, 36, 0.8);}
.sub-tab ul:after{content:""; display: block; clear: both;}
.sub-tab ul li{display: flex; float: left; width: 16.666%; border-left: 1px solid rgba(255,255,255,0.2);}
.sub-tab ul li a{background-color: transparent; color:#fff; padding: 21px 0px; font-size: 16px; display: block; width: 100%; letter-spacing: -1px;}
.sub-tab ul li a:hover,.sub-tab ul li a:focus{color:yellow; text-decoration: none; }/* background: url("../images/tab-arr.png") no-repeat left 10px center; */
.sub-tab ul li.on a{background:url("../images/tab-arr.png") no-repeat left 10px center rgba(0,0,0,0.2); color:#fff;}
.sub-tab ul li.on a:before{display: none;}
.sub-tab ul li a:before{content:""; display: none; width: 4px; height: 4px; background-color:#999; border-radius: 180px; margin-right:5px; position: relative; left:-5px; top:-2px;}
.sub-tab ul li a:hover,.tab .sub-tab ul li a:focus,.tab .sub-tab ul li a:active{text-decoration: none;}
.sub-tab ul li.on a:hover,.tab .sub-tab ul li.on a:focus,.tab .sub-tab ul li.on a:active{text-decoration: none;}
.sub-tab.sub-4 ul li{width: 25%;}
.sub-tab.sub-5 ul li{width: 20%;}
.sub-tab.sub-7 ul li{width: 14.28%;}
.sub-tab.sub-1{display: none;}


/* .top-header + .content > div{min-width: 990px;} */
form .btn-group, .con-box > .btn-group{padding: 10px 0px; text-align: right; font-size: 0px;}
.content > .btn-group{ text-align: right; font-size: 0px;}
form .btn-group a,form .btn-group button,.content > .btn-group a,.content > .btn-group button{min-width: 90px;}
.btn-group > a, .btn-group > button{
    color: #fff;
    text-align: center;
    background-color: #a5a6ba;
    font-size: 15px;
    text-indent: 7px;
    font-weight: bold;
    display: inline-block;
    padding: 7px 15px 7px 5px;
    box-sizing: border-box;
    border-radius: 5px;
    position: relative;
    margin-left: 5px;
}
.btn-group .screen-btn{border: 1px solid #666 !important; color:#fff !important; background-color:#666 !important;}
.btn-group .server-btn{border: 1px solid #695744 !important; color:#fff !important; background-color: #715e46 !important;}
.btn-group .del-btn{border: 1px solid #ed5e68 !important; color: #fff !important; background-color:#ed5e68 !important;}
.btn-group .del-btn i:before{color: #fff;}
.btn-group .print-btn{border: 1px solid #7ebd25 !important; color: #fff !important; background-color:#7ebd25 !important;}

.modal-body .btn-group a,.modal-body .btn-group button {border:1px solid #a5a6ba;}

.ex{ font-size: 0px; padding: 10px 13px; display: inline-block;}
.ex > span{display: inline-block; font-size: 12px; color:#9a6855; margin-right: 10px; padding-left: 10px; border-left: 1px solid #bbb;}
.ex > span a i:before,.ex > span a{ color:#c1552d;}
.ex > span:first-child{padding-left:0px; border-left: 0px;}
.ex > span a:hover,.ex > span a:focus,.ex > span a:active{text-decoration: underline;}
.ex i:before{margin-right: 3px; display: inline-block; color:#9a6855;}
.log-layout-portal{background: url("../images/login-bg.png") repeat-x left top #f4f4f4;}
.log-layout-portal.join header{background: #5665b0; padding:20px 0;}
.log-layout-portal header{background: #5a4b38; padding:20px 0;}
.log-layout-portal header > div{max-width: 1300px; position: relative; margin: 0 auto;}
.log-layout-portal header > div h1 a{padding: 0px !important;}
.log-layout-portal h1{margin-left: 20px;}
.cj{position: absolute; right:20px; top:0px; padding: 10px 30px; border-radius: 40px; display: block; border: 1px solid rgba(255,255,255,0.4); background-color: rgba(255,255,255,0.1); color:#fff;}
.login-group{width: 40vw; box-shadow: 0px 3px 3px rgba(0,0,0,0.15); min-width: 700px; margin: 0 auto; box-sizing: border-box; padding: 60px 70px; background-color: #fff; height: auto; margin-top:260px; border-radius:40px; max-width: 600px; border:0px solid #323a41; position: relative;}
.login-group *{margin: 0px; padding: 0px;}
.login-group:before{display: none;}
.login-group button{border: 0px;}
.join-form.no-padding{padding-top: 10px;}
.join-form{position: relative; padding-top: 292px;}
.join-form .tab ul li.active a{background-color: #7fbe27; border-color:#7fbe27 !important;}
.join-form .tab ul li.active a:before{background-color: #7fbe27; }
.join-form > h2,.login-group h2{ font-weight:700; position: absolute; color: #fff; text-transform: uppercase; font-size:73px; font-family: Arial,sans-serif;
    top: -200px; width: 100%; text-align: center;
    left:0%;
}
.join-form h2:before, .login-group h2:before{content:""; background:url("../images/log-bg1.png") no-repeat left top; width: 138px; height: 134px; position: absolute; left:-24%; top:35px;}
.join-form h2 + p,.login-group h2 + p{font-size: 17px;
    color: #fff;
    text-align: center;
    position: absolute;
    top: -90px;
    left: 0;
    text-align: center;
    line-height: 150%;
    width: 100%;
}
.join-form h2{top:45px; font-size: 70px; max-width: 1300px; margin: 0 auto;}
.join-form h2 + p{top:160px;}
.join-form h2:before{left: 5%;  top: 85px;}
.join-form .code-select{height: 28px;
    line-height: 28px; text-indent: 10px;
    padding: 0px;
    font-size: 13px; position: relative;}
.err body{background:url("../images/err-icon.png") repeat center top #555;}
.error-page{font-size: 40px; color: #655848; background: url("../images/error-logo.png") no-repeat center top !important; width: 100%; max-width: 1000px; text-align: center; height:500px;  padding-top: 270px; position: absolute; left:50%; top:50%; margin-left: -500px; margin-top: -250px;}
.error-page p{margin-top: 0px; color:#fff;}
.error-page .btn-g a{font-size: 25px; display:inline-block; padding:15px 40px; background:#47a998; color:#fff; border-radius: 10px;}
.view-table .check{margin: 3px;}
.view-table .code-select .open + div{border: 1px solid #ccc; background-color: #fff; position: absolute; left:0px; top:28px; z-index: 99; width: 100%; padding: 10px;}
.view-table .code-select .open + div input{box-sizing: border-box; display: block; margin-bottom: 10px;}
.view-table .code-select .open + div ul{height:180px; overflow-y: auto;}
.modal-body .view-table .code-select .open + div ul{height:110px; overflow-y: auto;}
.view-table .code-select .open + div ul li{padding: 3px; border-top: 1px dashed #ddd;}
.view-table .code-select .open + div ul li:first-child{border-top: 0px;}
.view-table .code-select > div:first-child{background: url("../images/select-arr.png") no-repeat right 10px center #fff; border:1px solid #ccc;}
.view-table.type2 th,.view-table.type2 td{padding: 15px;}
.code-select .highlighted{background: rgba(0,0,0,0.05);}
.code-select .search-input + button{position: absolute; right:20px; top: 17px; background: url("../images/input-del.png") no-repeat center center; width:15px; height: 15px; font-size: 0px; }
.code-select > div:first-child *{vertical-align: middle;}
.code-select > div:first-child button{ background: url("../images/input-del.png") no-repeat center center; display: inline-block; width:15px; height: 15px; font-size: 0px; position: absolute;
    right: 27px;
    top: 50%;
    margin-top: -8px; }
.select-group{float: right;}
.select-group .code-select > div:first-child{background: url("../images/select-arr.png") no-repeat right 10px center #fff; border:1px solid #ccc; padding: 5px; padding-right: 30px; }
.code-select ul{margin-top: 2px;}
.code-select li{padding: 5px;}
.code-select li:hover{ background-color: rgba(0,0,0,0.05);}
.view-table .code-select .open{background-image: url("../images/select-arr-on.png") !important; }
.join-form .view-table .btn{border: 1px solid #ff9133; color: #ff7500; background-color: #fffaf3;}
.certification{}
.list .info{color: #f17600; line-height: 32px;}
.dam .list .info{color: #379382;}
.info{position: relative;
    display: inline-block;
    padding-left: 25px !important;
    color: #f17600;
    line-height: 32px;
    margin-bottom: 10px !important;
    font-weight: bold;}
.info:before{      content: "!";
    color: #fff;
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 180px;
    background-color: #f28f28;
    position: absolute;
    left: 0px;
    line-height: 20px;
    text-align: center;
    top: 6px;}
.no-icon.info{padding-left: 0px !important;}
.no-icon.info:before{display: none;}
.certification > div{ max-width: 500px; position: relative; margin: 0 auto;}
.certification > div input{
    height: 60px;
    border: 3px solid #3da998;
    color: #3da998;
    font-size: 20px;
    letter-spacing: 10px;
    padding: 0 30px;
}
.certification > div span{
    position: absolute;
    right: 30px;
    top: 50%;
    font-size: 18px;
    color:#f28d28;
    margin-top: -11px;
}
.certification > button{}
.radio-group *{margin: 0px; padding: 0px;}
.view-table .radio-group .radio{margin-bottom: 2px; margin-top: 2px;}
.card-group{max-width: 800px; margin: 0 auto; padding-top: 40px; padding-bottom: 80px;}
.card-group:after{content: ""; display: block; clear: both;}
.card{border:1px solid #ccc !important; background:url("../images/join-img1.png") no-repeat center top 40px #fff; float: left; width: calc(50% - 10px);  text-align: center; border-radius: 15px; box-shadow: 2px 2px 0px rgba(0,0,0,0.06);}
.join-phone{background:url("../images/join-phone.png") no-repeat center top 40px #fff;}
.join-ipin{background:url("../images/join-ipin.png") no-repeat center top 40px #fff; margin-left: 20px;}
.card:hover,.card:focus{border-color:#745f47; }
.card + .card:hover,.card + .card:focus{border-color:#3da998;}
.card + .card{background-image: url("../images/join-img2.png");}
.card + .card strong{color:#3da998;}
.card a{display: block; padding: 30px; padding-top: 160px;}
.card strong{ font-size: 25px; font-weight: 700; display: block; text-align: center; margin-bottom: 10px; color:#745f47;}
.card span{color:#767676;}
.card + .card{margin-left: 20px;}
.stp{white-space: pre-wrap; width: 100%; border: 1px solid #ccc; background-color: #fff; padding: 20px; max-height: 300px; overflow-y: auto; line-height: 150%;}
.stp ul{padding: 0px; margin: 0px; margin-bottom: 15px;}
.stp h3{margin: 0px; padding: 0px; margin-bottom: 10px; color: #6f5d48 ;}
.stp h4{margin: 0px; padding: 0px; margin-bottom: 10px; color:#3da998 ;}
.stp ul,.stp ol{margin: 0px; padding: 0px; margin-bottom: 30px;}
.stp li{padding: 5px 10px; position: relative;}
.stp ul li:before{content:""; display: block; position: absolute; left:0px; top:12px; width: 4px; height: 4px; background-color:#7fbe27; }
.stp ul li ol li:before{display: none;}
.stp ol ol li:before{display: none;}
.stp ol ol{margin-bottom: 0px;}
.stp h2{display: block; text-align: center; font-size: 18px !important; margin-bottom: 20px;}
.stp > strong{margin-bottom: 20px; display: block;}
.stp a.btn{background: #506eba; color:#fff; border-color: #506eba; padding:0px 15px; font-size: 16px; height: 42px; line-height: 40px;}
.stp ul li ol{margin-bottom: 0px;}
.login-group form{ position: relative;}
.login-group input{height:65px; margin-bottom:15px; border-radius:20px; padding:0 30px; width: calc(100% - 0px); font-size: 18px; text-indent: 5px; color:#888888; background-color: #ececec; line-height: 63px;}
.login-group .join-btn, .login-group button{display: block; text-align: center; width:100%; line-height: 70px; font-family: Arial sans-serif; height: 70px; font-size:24px; background-color:#7fbe26; color:#fff; text-transform:uppercase; border-radius: 20px;}
.login-group .join-btn{background-color:#777;}
.log-btn{font-size: 14px; margin-top: 20px; margin-bottom: 30px; text-align: left; position: relative; padding-left:15px;}
.log-btn a{color:#715e46; position: relative; font-size: 15px; position: absolute; right:15px;}
.log-btn a:before{content:""; display: none; height: 15px; width: 1px; background-color:#ccc; position: absolute; left:-17px; top:1px;}
.log-btn .check + a + a{margin-left:30px;}
.log-btn i:before{margin-right:5px;}
.log-btn .check{margin-right: 30px;}
.log-btn .check label{font-size:15px;}
.log-btn .check input[type="checkbox"]{height: 17px; width: 17px;}
.join-btn-type{    background-color: #3da998 !important;
    padding: 13px 30px;
    font-size: 18px;
    color: #fff !important;
    border: 0px !important;
    border-radius: 4px;
    min-width: 200px;
}
.join-btn-group{padding:30px 20px;}
.join-btn-group button, .join-btn-group a{margin: 0 3px;}
.join-btn-group button + button,.join-btn-group a + a{background-color: #666 !important;}
.join-btn-group button i, .join-btn-group a i{margin-right: 10px;}
.join-t{    text-align: center;
    color: #7fbe27;
    font-size: 44px;
    font-weight: normal;}
.join-t i{    display: block;
    margin-bottom: 25px;
    font-size: 59px;}
.join-t1 strong{    color: #f17600;
    display: block;
    text-align: center;
    font-size: 26px;
    font-weight: normal;
    margin-top: 25px;
    margin-bottom: 15px;}
.join-t1 span{color: #444;
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    display: block;
    margin-bottom: 45px;}
.sms{height: 60px !important;
    border: 3px solid #3da998 !important;
    color: #3da998 !important;
    font-size: 20px !important;
    letter-spacing: 0px;
    padding: 0 30px !important; max-width:500px;}

.box-slider-type{position: relative; background: url("../images/border-back.png") repeat left top; padding: 5px; margin-bottom: 40px;}
.box-slider-type *{margin: 0px; padding: 0px;}
.box-slider-type > div{background: #fff; padding: 25px 0px; }
.box-slider-type.off > div .scroll{max-height: 135px;}
.box-slider-type.off .info-open-btn{background-image: url("../images/ab.png"); }
.box-slider-type > div .scroll{max-height: 100%; overflow-y: auto; padding: 0 25px;}
.box-slider-type .info-open-btn{position: absolute; bottom:-18px; left:50%; border: 0px; width: 91px;height: 18px; background: url("../images/at.png") no-repeat center top; display: block; margin-left: -45px; font-size: 0px;}
.box-slider-type h3{font-size: 18px; font-weight:900; color:#4660a2; margin-bottom: 15px;}
.box-slider-type ul.sc-ul > li{font-size: 15px; padding: 5px; position: relative; padding-left: 20px; margin-bottom: 10px;}
.box-slider-type .scroll ul.sc-ul > li > strong{color: #3da998;}
.box-slider-type .scroll ul.sc-ul > li:before{content: ""; display: block; width: 7px; height: 7px; border:3px solid #3da998; position: absolute; left:0px; top:8px; border-radius: 180px;}
.box-slider-type .scroll ul.sc-ul > li > ul{padding-left: 10px; padding-top: 15px;}
.box-slider-type .scroll ul.sc-ul > li > ul > li{font-size: 14px;  padding: 5px; padding-left: 12px; position: relative; color: #555; margin-bottom: 0px;}
.box-slider-type .scroll ul.sc-ul > li > ul > li:before{content: ""; display: block; position: absolute; left: 0px; top:12px; width:4px; height: 4px; border-radius: 180px; background-color:#f17600;}
.box-slider-type .scroll ul.sc-ul > li > ul > li > ul{padding-left: 10px; padding-top: 15px;}
.box-slider-type .scroll ul.sc-ul > li > ul > li > ul > li{font-size: 13px;  padding: 5px; position: relative; color:#4660a2; padding-left: 12px;}
.box-slider-type .scroll ul.sc-ul > li > ul > li > ul > li:before{content: ""; display: block; position: absolute; left: 0px; top:12px; width: 5px; height: 1px; background-color:#4660a2;}
.box-slider-type .scroll .info{padding-top: 10px; color:#f17600;}
.box-slider-type .scroll ul.sc-ul > li.important strong, .box-slider-type .scroll .important{color: #f13c00 !important; text-decoration: underline !important; font-weight: bold;}
.scrollbar-track{background: rgba(222, 222, 222, .35) !important; margin-right: 10px; border-radius: 30px;}

/* 검색박스 스타일 적용 */


.search-box{width: 100%; position: relative; box-sizing: border-box; padding:20px 40px 30px 40px; min-height: 135px; border:1px solid #d3d3d3; background-color: #fafafa; border-radius:0px; margin-bottom: 15px;}
.search-box *{margin: 0px; padding: 0px; border: 0px;}
.search-box i{display:inline; text-indent: 0px;}
.search-box i:before{left:0px;}
.search-box *{box-sizing: border-box;}
.search-box .reset-btn{text-indent: 15px !important; display: block; margin-top: 15px;}
.search-box .reset-btn:before{text-indent: 0px !important;}
.search-box:after{content:""; display: block; clear: both;}
.search-box input[type="text"],.search-box .code-select{height:26px; border:1px solid #aeaeae; border-radius: 0px;}
.search-box > dl{position: relative; float: left; padding-left:115px; margin-top: 10px; max-width: 100%;}/* z-index: 9; */
.search-box > dl.all-col{width: calc(100% - 177px) !important;}
.search-box > dl > dt{position: absolute; left:0px; top:0px; width: 115px; font-size: 14px; color:#222222; text-align: right; padding-right: 14px; line-height: 24px; height: 24px;}
.search-box > dl > dd{width: 100%;}
.search-box > dl > dd .btn{height: 28px; line-height: 26px; border: 1px solid #62bfff; color:#1d8bd5;  }

.search-box.one-line > .btn-group{width: auto; display: flex;}
.search-box > .btn-group{float: none; clear: both; text-align: right; padding: 0px;display:block; position: absolute; right:40px; top:30px;}
.search-box > .btn-group button,.search-box > .btn-group a{color:#fff; background-color:#7f7f7f; border:1px solid #727272; font-size: 13px; text-indent:7px; font-weight: bold; display: inline-block; min-width: 109px; padding: 5px; box-sizing: border-box; border-radius: 4px; position: relative;}
.search-box > .btn-group .search-btn{background-color: #2e71d1; margin-right: 0px; border: 1px solid #2465c0; display: block;}
.seup .search-box > .btn-group .search-btn{background-color: #7ebd25; border: 1px solid #74af22;}
.dam .search-box > .btn-group .search-btn{background-color:#3da998;border: 1px solid #3da998; }
.hak .search-box > .btn-group .search-btn{background-color:#f17600;border: 1px solid #f17600; }
.search-box > .btn-group button i:before{position: absolute; left:8px; top:50%; margin-top: -7px;}
.search-box > .btn-group .info{position: relative; padding-left: 35px;}
.search-box > .btn-group .info:before{content: "!"; color:#fff; display: block; width: 30px; height: 30px; border-radius: 180px; background-color: red; position: absolute; left:0px; top:0px;}
.search-box.dt-top > dl{padding-left: 0px;}
.search-box.dt-top > dl > dt{position: relative; width: 100%; text-align: left; padding-right: 0px;}

/* 한줄 검색박스 스타일 적용 */
.search-box.one-line{padding-right:290px; min-height: 10px;}
.search-box.one-line .btn-group{position: absolute; right:40px; top:15px; padding-top: 0px;}
.search-box.one-line > .btn-group .search-btn{position: relative; left:0px; top:13px; height: 30px;}
.search-box.one-line > .btn-group .reset-btn{top:-2px;}
.search-box.one-line > .btn-group button i:before{ left: 13px;}

/*컨텐츠영역*/
.con-box{background-color: #fff; border-radius: 5px; box-shadow: 0px 0px 0px rgba(0,0,0,0.0); margin-bottom: 15px; } /* overflow: hidden; */
.con-box h3.title-h3, .view-con h3.title-h3{border-bottom: 1px solid #ddd; font-size: 15px; padding: 8px 15px; padding-left: 20px; position: relative; color:#444b5e; background: url("../images/h3-icon.png") no-repeat left 10px center;}
.con-box h3.title-h3 .more{display: block; font-size: 0px; background: url("../images/box-more.png") no-repeat center center; width: 20px; height: 20px; position: absolute; right:10px; top:5px;}

.con-area{padding: 15px;}
.modal-body .con-box{border: 1px solid #ccc;} /* overflow: hidden; */
.box-in-type table tr:last-child td,.box-in-type table tr:last-child th{border-bottom: 0px;}
p .info{display: block; color: #506eba;}

/*리스트 테이블*/
caption{font-size: 0px; position: absolute;}
.list-table .td-btn-group a,.list-table .td-btn-group button{height: 20px; line-height: 18px; border-radius: 4px; margin-left: 3px; white-space: nowrap;}
.table-scroll{max-width: 100%; overflow-x:auto;}
.table-scroll table{table-layout: fixed; border-top:1px solid #ddd; margin-bottom:8px; }
.list-table{width: 100%; border-collapse: collapse; margin-bottom: 40px;}
table.list-table thead th{border: 1px solid #b5b7c0 ; color:#6b6e82; padding: 15px; border-top:2px solid #767676; background-color: #f3f3f3; font-size: 17px; font-weight: 800;}
table.list-table thead .top-thead th{border: 1px solid #b5b7c0 ;}
table.list-table tbody th:first-child, table.list-table tbody td:first-child, table.list-table thead th:first-child{ border-left: 0px; }
table.list-table tbody td:last-child,  table.list-table thead th:last-child{border-right: 0px;}
table.list-table tbody td{border: 1px solid #b5b7c0; padding:5px; line-height: 140%; word-break: break-word; font-size: 17px; padding: 15px;}
table.list-table tbody tr:first-child td, table.list-table tbody tr:first-child th{border-top:2px solid #f0f0f0;}
table.list-table tbody td ul.list{margin: 0px; padding: 0px;}
table.list-table tbody td ul.list li{margin-top: 5px;}
.list-table tbody tr:hover td,.list-table tbody tr:active td,.list-table tbody tr:focus td{background-color: rgba(0,0,0,0.05);}
.table-info{font-size: 17px; margin-bottom:10px; color:#998873;}
.column-set{position: relative; display: inline-block; margin-left: 3px;}
.column-set .col-set{display: block; width: 24px; height: 24px; font-size: 0px; background:url("../images/col-set.png") no-repeat center center #998873; border-radius:4px; }
.column-set .col-set.close{background:url("../images/col-set-close.png") no-repeat center center #54a6de;}
.column-set ul{overflow: auto;}
.column-set ul li{padding:5px 0;}
.column-set ul li .check{display: block; text-align: left; color:#007bcf;}
.column-set ul li .check input[type="checkbox"]{width: 14px; height: 14px;}
.column-set ul li .check label:before{width: 14px; height: 14px; border: 1px solid #54a6de; border-radius: 2px;}
.column-set ul li .check label{text-indent: 3px;}
.column-set ul li .check input[type ="checkbox"]:checked + label:after, .column-set > ul li .check input[type ="checkbox"][checked] + label:after{width: 14px; height: 14px;}
.column-set .col-set-list{padding:5px 10px 10px 10px; border: 1px solid #54a6de; position: absolute; right:0px; top:27px; background-color: #fff; border-radius: 4px; box-shadow: 2px 2px 3px rgba(0,0,0,0.15); z-index:10;}
.column-set .col-set-list > button{width: 100%; margin-top: 5px; background: url("../images/col-check.png") no-repeat center center #54a6de; font-size: 0px; border-radius:4px; display: block; height: 24px; }

.red-tr{background-color: rgba(237,94,104,0.22) !important;}
/*.list-table table tbody td{height:34px;}*/
.title-name{color:#007bcf;}
.con-box h3 + .list-table table thead th{border-top: 0px;}
.con-box h3 + .list-table .board-count + table{border-top: 1px solid #ccc;}
.board-count{text-align: right; position: relative; padding: 9px 10px 5px 10px; min-height: 24px;}
.board-count:after{content: ""; display: block; clear: both;}
.modal-body .board-count{padding-left: 0px; padding-right: 0px;}
.modal-body .con-box .board-count{padding: 9px 10px 5px 10px;}
.modal-body .search-box{border: 1px solid #ccc; box-sizing: border-box;}
.board-count *{vertical-align: middle;}
.board-count > span{font-size: 13px; text-transform: uppercase; float: left; position: relative; top:5px;}/*position: absolute; left:10px; top:13px; */
.board-count > span strong{color: #e20e00;}
.board-count .btn-group{display: inline-block; font-size: 0px;}
.board-count .btn-group a, .board-count .btn-group button{
    border: 1px solid #62bfff;
    display: inline-block;
    box-sizing: content-box;
    background-color: #ddf1ff;
    color: #007bcf;
    height: 22px;
    font-size: 12px;
    line-height: 20px;
    margin-left: 3px;
    padding: 0 10px;
    padding-left: 5px;
    border-radius: 4px;
    text-align: center; }
.board-count .btn-group a i, .board-count .btn-group button i{display: inline; margin-left: -3px;}
.paging{width: 100%; text-align: center; padding: 15px 0; box-sizing: border-box;}
.list-table + .paging{margin-top: -30px;}
.paging *{vertical-align: middle;}
.paging button,.paging a{display: inline-block;  padding:0px 5px; box-sizing: border-box; border-radius: 180px; min-width: 30px; height: 30px; line-height: 28px; margin: 0 2px; color:#666;}
.paging a{z-index: 0; border: 1px solid #fff;}
.paging a.active,.paging.small input{color:#3da998; background-color: rgba(126, 189, 37, 0.11); border:1px solid #7ebd25;}
.hak .paging a.active,.hak .paging.small input{color: #f17600; background-color: rgba(241, 118, 0, 0.11); border:1px solid #f17600;}
.dam .paging a.active,.dam .paging.small input{color:#3da998; background-color: rgba(61, 169, 152, 0.11); border:1px solid #3da998;}
.go .paging a.active,.go .paging.small input{color:#8e7a61; background-color: rgba(153, 136, 112, 0.11); border:1px solid #998873;}
.move{background:url("../images/move.png") no-repeat left 8px center #7f7f7f !important; border-color: #7f7f7f !important; }
.hak .move{background-color:#f17600 !important; border-color: #f17600 !important; }
.dam .move{ border-color: #3da998 !important; background-color: #3da998 !important;}
.go .move{ border-color: #998873 !important; background-color: #998873 !important;}
.paging a:hover,.paging a:focus{color:#444; background-color: #fff; border: 1px solid #ccc;}
.paging button{font-size: 0px; background: url("../images/next.png") no-repeat center center; border: 1px solid #ccc;}
.paging button.first-page{background-image: url("../images/first-page.png");}
.paging button.first-page:hover,.paging button.first-page:focus,.paging button.first-page:active{background-image: url("../images/first-page-on.png");}
.paging button.last-page{background-image: url("../images/last-page.png");}
.paging button.last-page:hover,.paging button.last-page:focus{background-image: url("../images/last-page-on.png");}
.paging button.prev{background-image: url("../images/prev.png");}
.paging button.prev:hover,.paging button.prev:focus{background-image: url("../images/prev-on.png");}
.paging button:hover,.paging button:focus{border: 1px solid #666; background-image: url("../images/next-on.png");}
.list-table + .btn-group + .paging{margin-top: -54px;}
.list-table + .btn-group{min-height: 27px;}

.search-open-btn{font-size: 0px !important; min-width: 27px !important; height: 27px; transition: all 1s; transform: rotate(0deg);}
.toggle-search.one-line{padding-right: 235px;}
.toggle-search.one-line .search-open-btn{transform: rotate(180deg); transition: all 1s;}
.search-open-btn i:before,.search-open-btn i{font-size: 14px !important;}

/*뷰테이블*/
.view-table table{width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: -1px; background-color: #fff;}
.view-table table thead{}
.view-table table thead th{border: 1px solid #ddd; padding:9px 5px; background-color: #f1f1f1; border-top:0px;}
.view-table table thead th:first-child{border-left: 0px;}
.view-table table thead th:last-child{border-right: 0px;}
/*.view-table table tbody tr:first-child td, .view-table table tbody tr:first-child th{border-top:0px;}*/
.view-table table thead + tbody tr:first-child td,.view-table table thead + tbody tr:first-child th{border-top: 0px;}
.view-table table tbody th{padding: 5px; border: 1px solid #ddd; background-color: #f9f9f9; word-break: keep-all;}
.view-table table tbody td{padding: 5px; border: 1px solid #ddd; height: 24px; word-break: break-word;}
.view-table table tbody td:first-child,.view-table table tbody th:first-child{border-left: 0px;}
.view-table table tbody td:last-child{border-right: 0px;}
.view-table table tbody td .file-list dt{border-bottom: 0px; display: none;}
.view-table table tbody td .file-list dt + dd ul li:first-child{border-top:0px solid #ccc; }
.view-table table td textarea, .modify textarea{border: 1px solid #ddd; width: 100%; box-sizing: border-box; border-radius: 5px; padding: 4px; color: #666; border-spacing: 0px; display: block; font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif; }
.view-table input[type="number"],.view-table input[type="text"],.view-table input[type="password"],.view-table select{
    box-sizing: border-box;
    padding: 0 5px;
    line-height: 22px;
    width: 100%;
    border: 1px solid #ccc;
    height: 28px;
    color: #666;
    border-radius: 0px;
}
.view-table table.input-table th, .view-table table.input-table td{padding: 15px;}
.view-table .btn{height: 28px;}
.view-table .radio label{font-size: 14px !important;}
.join-form .view-table table{border: 1px solid #ccc; box-shadow: 3px 3px 0px rgba(0,0,0,0.06); border-top: 2px solid #666;}
.join-form .view-table table td{padding: 10px;}
.input-table tbody td .file-list dt + dd ul li:first-child{border-top:1px dashed #ddd !important; margin-top: 3px;}
.input-table button{border: 0px;}
.input-table .file-list{margin: 0px;}
.input-table .file-list dt{display: block !important;}
.input-table .file-list ul, .input-table .file-list dd {margin: 0px; padding: 0px;}
.input-table .file-list dd{max-height: 100%;}
.input-table .code-select > div:first-child{padding: 5px;}
.input-table .code-select .open + div ul{border: 0px; height: auto;}
.input-table .code-select .open + div ul li{padding:7px;}
.input-table .code-select .open + div{padding: 0px;}
/*양쪽영역*/
.area-double{width: 100%;}
.area-double:after{content:""; display: block; clear: both;}
.area-double > div{float: left; box-sizing: border-box; width: 50%;}
.area-double > div .list-table .board-count{min-height: 34px;}
.area-double .left-area{padding-right: 7px;}
.area-double .left-area .view-table,.area-double .left-area .list-table{width:calc(100% + 1px);}
.area-double .right-area{padding-left: 7px;}
.area-double *{box-sizing: border-box;}
.area-double:after{content:""; display: block; clear: both;}
.area-double .left-area.left-tab{ width:calc(200px - 0px) !important; border-radius: 4px; box-sizing: border-box;}
.area-double .left-area.left-tab + .right-area{width: calc(100% - 200px) !important; }
.area-double .right-area{float: left; width:50%; padding-left: 7px;}

a.del-btn:disabled, button.del-btn:disabled, a.del-btn[disabled], button.del-btn[disabled],
a.print-btn:disabled, button.print-btn:disabled, a.print-btn[disabled], button.print-btn[disabled],
a.screen-btn:disabled, button.screen-btn:disabled, a.screen-btn[disabled], button.screen-btn[disabled],
a.server-btn:disabled, button.server-btn:disabled, a.server-btn[disabled], button.server-btn[disabled],a:disabled, button:disabled, a[disabled], button[disabled]{background-color: #efefef !important; color:#999 !important; border: 1px solid #dbdbdb !important;}

input[type="text"]:disabled, input[type="text"]:disabled, input[type="text"][disabled], input[type="text"][disabled]{background-color: #efefef !important; color:#999 !important; border: 1px solid #dbdbdb !important;}
.cal input[type="text"]:read-only,.cal  input[type="text"][readonly="readonly"],.cal input[type="text"][readonly]{background-color: #fff !important;}
input[type="text"]:read-only, input[type="text"][readonly], input[type="text"][readonly="readonly"]{background-color:#f0f9ff !important; border:1px solid #d1d1d1 !important;  }
a:disabled i:before, button:disabled i:before, a[disabled] i:before, button[disabled] i:before{color:#aaa !important;}

select option:disabled {color:#ccc;}
.tab{margin-bottom: 13px; position: relative;}
.tab:before{content:""; display:block; width: 100%; height: 1px; position: absolute; left:0px; bottom:0px; background: #bbb;}
.tab.sub-type:before{display: none;}
.tab ul{position: relative;}
.tab ul:after{content:""; display: block; clear: both;}
.tab ul li{float: left; list-style: none; margin-right:1px;}
.tab ul li a{display: block; padding:7px 12px; border: 1px solid #bbb; background: #fff; border-bottom: 1px solid #bbb; border-radius:0px 0px 0px 0px; color:#555; }
.tab ul li.disabled a{background-color: #f6f6f6; color:#999; cursor:inherit;}
.tab ul li.on a{background-color: #666; color:#fff; border: 1px solid #666;}
/*.tab-con > .btn-group{text-align: right;}*/

.left-tab-con{box-sizing: border-box; border: 0px solid red; padding: 0px; border-radius:4px;}
.left-tab-con li{list-style: none; margin-top: 3px;}
.left-tab-con li:first-child{margin-top: 0px;}
.left-tab-con li a{display:block; padding: 7px 12px; border:1px solid #bbb; background-color: #fff; border-radius: 5px; color:#666; padding-right:18px; }
.left-tab-con li a:hover,.left-tab-con li a:active.left-tab-con li a:focus{background:url("../images/left-tab-arr-on.png") no-repeat right 8px center #f9f9f9; border: 1px solid #888; color:#444; }
.left-tab-con li.on a{background:url("../images/left-tab-arr.png") no-repeat right 8px center #ed5e68; color:#fff; border-color: #ed5e68;}
.bg-gray{background-color: #f9f9f9;}
.site-map{box-sizing: border-box; padding: 15px 20px;}
.site-map > ul{}
.site-map > ul:after{content:""; display: block; clear: both;}
.site-map > ul > li{width:calc(25% - 15px); float: left; padding-left: 20px; }
.site-map > ul > li:first-child{padding-left: 0px;}
.site-map > ul > li > a{display: block; padding: 10px; text-align: left; border-bottom:1px solid #323a41; font-size: 16px; font-weight: bold; color:#444; position: relative; padding-left: 25px; }/*background: url(../images/h2-icon.png) no-repeat left 5px top 11px;*/
.site-map > ul > li > a:before{content: ""; display: block; width:15px; height:16px; background: url("../images/h2-icon.png") no-repeat left center; position: absolute; left:5px; top:12px; box-sizing: border-box;}
.site-map > ul > li > ul{padding:5px 0;}
.site-map > ul > li > ul > li{}
.site-map > ul > li > ul > li > a{display: block;
    text-align: left;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 14px;
    color: #666;
    position: relative;
    padding-left: 20px;}
.site-map > ul > li > ul > li.active > a{color:#007bcf; font-weight: bold;}
.site-map > ul > li > ul > li > a:hover,.site-map > ul > li > ul > li > a:focus,.site-map > ul > li > ul > li > a:active{text-decoration: none; color:#ed5e68;}
.site-map > ul > li > ul > li > a:before{content:""; display: block; width: 4px; height: 1px; background: #666; position: absolute; left:10px; top:14px;}
.site-map > ul > li > ul > li.active > a:before{background-color:#007bcf; }
.site-map > ul > li > ul > li > ul{padding-left: 10px;}
.site-map > ul > li > ul > li > ul > li.active a{color: #007bcf; }
.site-map > ul > li > ul > li > ul > li.active a:before{background-color:#007bcf; }
.site-map > ul > li > ul > li > ul > li > a{display: block; text-align: left; padding: 7px 10px; color:#666; font-size: 13px; position: relative; padding-left:18px;}
.site-map > ul > li > ul > li > ul > li > a:hover{color:#ed5e68; }
.site-map > ul > li > ul > li > ul > li > a:before{content: "";
    display: block;
    width:2px;
    height:2px;
    background:#666;
    position: absolute;
    left: 10px;
    top: 13px; }
.center-arr{position: relative;}
.center-arr:before{content:""; display: block; position: absolute; left:50%; top:50%; margin-left: -8px; margin-top: -22px; background: url("../images/center-arr.png") no-repeat center center; width:16px; height: 44px;}

.center-arr .right-area{padding-left: 12px;}
.center-arr .left-area{padding-right: 12px;}

.multi-comp{font-size: 0px;}
.multi-comp *{vertical-align: middle;}
.multi-comp > * {margin-top: 1.5px; margin-bottom: 1.5px; display: inline-block; margin-right: 4px;}
.multi-comp > .text,.multi-comp > .input-btn,.multi-comp > select, .multi-comp > input[type="text"],.multi-comp > input[type="password"],.multi-comp > .cal,.multi-comp > .check,.multi-comp > .double-comp,.multi-comp > .double-txt-comp,.multi-comp > a,.multi-comp > button,.multi-comp > .radio{width:auto; margin-right:4px; box-sizing: border-box; display:inline-block; min-height: 20px;}
.multi-comp > .check,.multi-comp > .radio{min-height: 17px;}
.multi-comp > *:last-child{margin-right: 0px !important; }
.multi-comp > .code-select{width:auto; margin-right:4px; box-sizing: border-box; display:inline-block; }
.multi-comp > a,.multi-comp > button{font-size: 12px;}
.multi-comp > .value-delete{min-width: 10px;}
.multi-comp > a i:before,.multi-comp > button i:before{font-size: 11px; margin-right: 3px;}
.multi-comp > div.code-select{font-size: 14px;}
.multi-comp > div.code-select > div:first-child{padding-right: 40px;}
.error-message{color:red; font-size:13px; padding: 3px !important; padding-left:19px !important; background: url("../images/error-message.png") no-repeat left center; display: block;}
.error-message:before{content:"";}
.code-select{font-size: 13px; position: relative;}
.code-select *{margin: 0px; padding: 0px;}
.search-input.hidden-input{border: 0px !important; margin: 0px !important; padding: 0px !important;}
.search-input.hidden-input{display: none;}
.code-select .disabled{color:#bbb;}
.code-select ul{background-color: #fff; border: 1px solid #ddd;}
.code-select .open + div{z-index: 999; position: relative;}
.code-select > div:first-child{line-height: 23px; background: url("../images/select-arr.png") no-repeat right 10px center #fff; text-indent: 5px;}
.code-select > div:first-child.open{background-image: url("../images/select-arr-on.png");}
.pre{white-space:pre-wrap; }
.text-area{padding: 20px; margin-bottom:40px; border: 1px solid #ddd; background-color: #f9f9f9; font-size: 15px; line-height: 160%; max-height:400px; overflow-y: auto;}
.text-area div{padding:5px 5px;}
.text-area h4{font-size: 17px; color: #7e6652;}
.text-area  strong{color:#3da998;}
.jo{width: 100%;}
.wd1{width: 5% !important;}
.wd2{width: 10% !important;}
.wd3{width: 15% !important;}
.wd4{width: 20% !important;}
.wd5{width: 25% !important;}
.wd6{width: 30% !important;}
.wd7{width: 35% !important;}
.wd8{width: 40% !important;}
.wd9{width: 45% !important;}
.wd10{width: 50% !important;}
.wd11{width: 55% !important;}
.wd12{width: 60% !important;}
.wd13{width: 65% !important;}
.wd14{width: 70% !important;}
.wd15{width: 75% !important;}
.wd16{width: 80% !important;}
.wd17{width: 85% !important;}
.wd18{width: 90% !important;}
.wd19{width: 95% !important;}
.wd20{width: 100% !important;}

.float-area > div.wd1{width:calc(5% - 7px) !important;}
.float-area > div.wd2{width:calc(10% - 7px) !important;}
.float-area > div.wd3{width:calc(15% - 7px) !important;}
.float-area > div.wd4{width:calc(20% - 7px) !important;}
.float-area > div.wd5{width:calc(25% - 7px) !important;}
.float-area > div.wd6{width:calc(30% - 7px) !important;}
.float-area > div.wd7{width:calc(35% - 7px) !important;}
.float-area > div.wd8{width:calc(40% - 7px) !important;}
.float-area > div.wd9{width:calc(45% - 7px) !important;}
.float-area > div.wd10{width:calc(50% - 7px) !important;}
.float-area > div.wd11{width:calc(55% - 7px) !important;}
.float-area > div.wd12{width:calc(60% - 7px) !important;}
.float-area > div.wd13{width:calc(65% - 7px) !important;}
.float-area > div.wd14{width:calc(70% - 7px) !important;}
.float-area > div.wd15{width:calc(75% - 7px) !important;}
.float-area > div.wd16{width:calc(80% - 7px) !important;}
.float-area > div.wd17{width:calc(85% - 7px) !important;}
.float-area > div.wd18{width:calc(90% - 7px) !important;}
.float-area > div.wd19{width:calc(95% - 7px) !important;}
.float-area > div.wd20{width:calc(100% - 7px) !important;}

.multi-comp > *.wd1{width:calc(5% - 4px) !important;}
.multi-comp > *.wd2{width:calc(10% - 4px) !important;}
.multi-comp > *.wd3{width:calc(15% - 4px) !important;}
.multi-comp > *.wd4{width:calc(20% - 4px) !important;}
.multi-comp > *.wd5{width:calc(25% - 4px) !important;}
.multi-comp > *.wd6{width:calc(30% - 4px) !important;}
.multi-comp > *.wd7{width:calc(35% - 4px) !important;}
.multi-comp > *.wd8{width:calc(40% - 4px) !important;}
.multi-comp > *.wd9{width:calc(45% - 4px) !important;}
.multi-comp > *.wd10{width:calc(50% - 4px) !important;}
.multi-comp > *.wd11{width:calc(55% - 4px) !important;}
.multi-comp > *.wd12{width:calc(60% - 4px) !important;}
.multi-comp > *.wd13{width:calc(65% - 4px) !important;}
.multi-comp > *.wd14{width:calc(70% - 4px) !important;}
.multi-comp > *.wd15{width:calc(75% - 4px) !important;}
.multi-comp > *.wd16{width:calc(80% - 4px) !important;}
.multi-comp > *.wd17{width:calc(85% - 4px) !important;}
.multi-comp > *.wd18{width:calc(90% - 4px) !important;}
.multi-comp > *.wd19{width:calc(95% - 4px) !important;}
.multi-comp > *.wd20{width:calc(100% - 4px) !important;}

.multi-comp > *:first-child.wd1{width:calc(5% - 0px) !important;}
.multi-comp > *:first-child.wd2{width:calc(10% - 0px) !important;}
.multi-comp > *:first-child.wd3{width:calc(15% - 0px) !important;}
.multi-comp > *:first-child.wd4{width:calc(20% - 0px) !important;}
.multi-comp > *:first-child.wd5{width:calc(25% - 0px) !important;}
.multi-comp > *:first-child.wd6{width:calc(30% - 0px) !important;}
.multi-comp > *:first-child.wd7{width:calc(35% - 0px) !important;}
.multi-comp > *:first-child.wd8{width:calc(40% - 0px) !important;}
.multi-comp > *:first-child.wd9{width:calc(45% - 0px) !important;}
.multi-comp > *:first-child.wd10{width:calc(50% - 0px) !important;}
.multi-comp > *:first-child.wd11{width:calc(55% - 0px) !important;}
.multi-comp > *:first-child.wd12{width:calc(60% - 0px) !important;}
.multi-comp > *:first-child.wd13{width:calc(65% - 0px) !important;}
.multi-comp > *:first-child.wd14{width:calc(70% - 0px) !important;}
.multi-comp > *:first-child.wd15{width:calc(75% - 0px) !important;}
.multi-comp > *:first-child.wd16{width:calc(80% - 0px) !important;}
.multi-comp > *:first-child.wd17{width:calc(85% - 0px) !important;}
.multi-comp > *:first-child.wd18{width:calc(90% - 0px) !important;}
.multi-comp > *:first-child.wd19{width:calc(95% - 0px) !important;}
.multi-comp > *:first-child.wd20{width:calc(100% - 0px) !important;}

/* 핸들링 테이블 */
.sort-handle{cursor: move;}
.sort-handle td:first-child{background: url("../images/sorting.png") no-repeat left 10px center;}
.sort-handle:hover td:first-child,.sort-handle:focus td:first-child,.sort-handle:active td:first-child{background-image: url("../images/sorting-on.png");}
.sort-background-class {background-color: #C8EBFB;}
.error{text-align: center; font-size: 20px; color:#ed5e68; font-weight: bold; background: url("../images/error.png") no-repeat center top 100px; padding-top: 370px; position: absolute; left:0px; top:0px; margin-left: 25vw; margin-top: 15vh; width: 50vw; height: 70vh; box-sizing: border-box;}

/* 첨부파일 */
.file-list{}
.file-list dt{position: relative; padding: 10px; border-bottom: 1px solid #ccc; font-size: 14px; font-weight: bold; min-height: 37px; box-sizing: border-box;}
.file-list dt button{position: absolute; right:5px; top:5px; font-size: 12px;}
.file-list dt button i:before{margin-right: 5px;}
.file-list dd{max-height: 72px; overflow: auto;}
.file-list dd ul{}
.file-list dd ul li{border-top:1px dashed #ddd; position: relative; padding: 5px;}
.file-list dd ul li:first-child{border-top:0px; }
.file-list dd ul li a{display: inline-block; padding: 5px 20px; color:#666; position: relative; padding-left: 27px;}
.down-xlsx:before,.file-list dd ul li a:before{content:""; background-size: 80% 80%; background: url("../images/file-icon.png") no-repeat center center #fff; display: block; position:absolute; left:0px; top:2px; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 180px;}
.down-file{position: relative;}
.down-file:before{content:""; display:block; background: url("../images/dater-icon.png") no-repeat center center; width: 22px; height: 22px; border: 1px solid #ddd; border-radius: 180px; position: absolute; left:-11px;}
.down-con ul li strong.down-file:before{top:-3px !important;}
.file-list dd ul li a.hwp:before{background-image:url("../images/hwp.png");}
.down-xlsx:before,.file-list dd ul li a.xlsx:before,.file-list dd ul li a.xls:before{background-image:url("../images/xls.png");}
.file-list dd ul li a.pdf:before{background-image:url("../images/pdf.png");}
.file-list dd ul li a.ppt:before{background-image:url("../images/ppt.png");}
.file-list dd ul li a.zip:before{background-image:url("../images/zip.png");}
.file-list dd ul li a.docx:before{background-image:url("../images/docx.png");}
.file-list dd ul li a span{display: inline-block; margin-left: 10px; color:#ed5e68;}
.file-list dd ul li .del{position: absolute; right:5px; top:50%; margin-top: -8px; width: 17px; height: 17px; border: 1px solid #ddd; font-size: 0px; border-radius: 2px; background: url("../images/file-x.png") no-repeat center center #fff;}
.no-file{text-align: center; display: block; padding: 10px;}
.down-btn{border-radius: 24px 0 24px 0; font-size: 17px; display:inline-block; margin-bottom:40px; font-weight: 700; padding: 14px 25px; padding-left: 60px; border: 1px solid #506eba; color:#506eba;  background: url("../images/down-icon.png") no-repeat left 20px center #eff4ff;}
.info-box{border: 1px solid #cfcfcf; padding: 35px; padding-left: 125px; font-size: 17px; background: url("../images/info1.png") no-repeat left 35px center #fafafa; color:#666; line-height: 160%; margin-bottom: 45px;}
.info-box ul{padding: 0px;}
.info-box ul li{position: relative; padding-left: 14px; margin-bottom: 5px;}
.info-box ul li:last-child{margin-bottom: 0px;}
.info-box ul li:before{content: ""; position: absolute; left:0px; top:11px; display: block; width: 3px; height: 3px; background-color: #999;}
.info-box ul li strong.fb{font-size:18px}
.info-title{display: block; font-size: 20px; margin-bottom: 5px; }
.con-count > span{top:0px;}
.dam .info-title{color:#3da998;}
.dam .info-box{background-image: url("../images/info2.png"); background-position: left 15px center;}
.icon-list{margin: 0px; padding: 0px; margin-bottom:60px !important;}
.icon-list *{margin: 0px; padding: 0px;}
.icon-list:after{content: ""; display: block; clear: both;}
.icon-list li{float: left; width: 20%; text-align: center; font-size: 17px; font-weight: 800; color:#998873; position: relative; background: url("../images/arr-icon.png") no-repeat right top 42px;}
.icon-list li:last-child{background-image: none;}
.icon-list li:before{content:""; display: block; width: 116px; margin: 0 auto; height: 116px; margin-bottom: 20px; border-radius: 180px; background: url("../images/icon-list1.png") no-repeat center center #998873;}
.icon-list li:nth-of-type(2):before{background-image: url("../images/icon-list2.png");}
.icon-list li:nth-of-type(3):before{background-image: url("../images/icon-list3.png");}
.icon-list.type1 li:nth-of-type(3):before{background-image: url("../images/icon-list8.png");}
.icon-list li:nth-of-type(4):before{background-image: url("../images/icon-list4.png");}
.icon-list li:nth-of-type(5):before{background-image: url("../images/icon-list5.png");}
.icon-list.seub-list li{width: 16%;}
.icon-list.seub-list li:nth-of-type(1):before{background-image: url("../images/icon-list0.png"); background-position: center top 33px; }
.icon-list.seub-list li:nth-of-type(2):before{background-image: url("../images/icon-list1.png");}
.icon-list.seub-list li:nth-of-type(3):before{background-image: url("../images/icon-list2.png");}
.icon-list.seub-list li:nth-of-type(4):before{background-image: url("../images/icon-list4.png");}
.icon-list.seub-list li:nth-of-type(5):before{background-image: url("../images/icon-list6.png");}
.icon-list.seub-list li:nth-of-type(6):before{background-image: url("../images/icon-list7.png");}
.icon-list.type1 li:nth-of-type(4):before{background-image: url("../images/icon-list6.png");}
.vision{background: url("../images/vis.png") no-repeat right 30px top;}
/* 다운로드 스탭 */
.down-step{border: 1px solid #ed5e68; margin-bottom: 10px; border-radius: 40px; overflow: hidden;}
.down-step:after{content:""; display: block; clear: both;}
.down-step li{float: left; width: 33.333%; text-align: center; box-sizing: border-box; padding: 10px; color:#ed5e68; position: relative; font-weight: 700;}
.down-step li:after{content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid #ed5e68;
    border-bottom:6px solid transparent;
    position: absolute;
    right: -6px;
    top: 50%;
    margin-top: -6px;
}
.down-step li:last-child:after{display: none;}
.down-step li.active:after{border-left: 6px solid rgba(255,255,255,0.7); z-index: 999;}
.down-step li.active{background:#ed5e68 !important; color:#fff;}
.down-step li:last-child.active:before{display: none;}
.down-step li.active:before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-left: 18px solid #ed5e68;
    border-bottom: 18px solid transparent;
    position: absolute;
    right: -18px;
    top: 0;
    margin-top: 0px;
}
.down-step li:last-child.active{width: 33.336%;}

.down-con ul{border-top: 1px solid #999; border-bottom: 1px solid #ccc;}
.down-con ul li{padding: 10px; border-bottom: 1px dashed #ccc; position: relative;}
.down-con ul li strong{display: inline-block; padding-left: 20px;}
.down-con ul li strong:before{top:7px !important;}
.down-con ul li:last-child{border-bottom: 0px;}
.down-con ul li label{font-size: 13px; }

.list-plus{display: block;}
.list-plus .code-select{width:calc(100% - 70px); display: inline-flex;}
.list-plus .btn{margin-left: 5px;}
.list-plus .btn i:before{margin-right:3px; position: relative; top:-1px; left:-2px;}
.scrollbar-thumb{background: rgba(0, 0, 0, .2) !important;}
.cursor-table tbody tr td{cursor: pointer;}
.cursor-table tbody tr:hover td,.cursor-table tbody tr:active td,.cursor-table tbody tr:focus td{background-color: rgba(0,0,0,0.05);}
.border-box{border:1px solid #ddd; background: rgba(0,0,0,0.01); overflow: hidden; border-radius: 6px;}
.border-box .cursor-table{border-top: 0px;}
.border-box .board-count{padding-left: 10px; padding-top: 5px;}
.border-box .board-count .btn-group{ padding-top: 0px; padding-bottom: 0px;}
.border-box .board-count .btn-group a,.border-box .board-count .btn-group button{min-width: 20px;}
/* 트리 */
.tree-ul{box-sizing: border-box; border: 1px solid rgba(0,0,0,0.1); background-color: rgba(0,0,0,0.03); border-radius: 5px; padding: 10px;}
.tree-ul li{padding: 5px 0;}
.tree-ul li a.tree-arr .fa-caret-down{color:#666;}
.tree-ul li a.tree-arr .fa-caret-right{color:#666;}
.tree-ul li a.tree-arr + a{margin-left: 5px;}
.tree-select{background: url("../images/folder-icon1.png") no-repeat left center; padding-left: 23px;}
.tree-select.on{color:#007bcf; text-decoration: underline; background: url("../images/folder-icon-open1.png") no-repeat left center;}
.data-table{width: 100%; border-top: 1px solid #666 !important; margin-top: 10px; border-collapse: collapse;}
.dam .data-table{border-top: 1px solid #47a998 !important;}
.go .data-table{border-top: 1px solid #998873 !important;}
.data-table td[class*="depth_"]{padding-left:10px;}
.data-table thead th{padding: 15px; border-bottom: 1px solid #666;}
.dam .data-table thead th{border-bottom: 1px solid #47a998; color:#3da998;  background: rgba(61, 169, 152, 0.03);}
.go .data-table thead th{border-bottom: 1px solid #998873; color:#6f5a41;  background:rgba(153, 136, 115, 0.03);}
.data-table tbody td{padding: 15px; border-color: #ccc !important; border-bottom: 1px solid #ccc !important;}
.no-line{border-bottom: 0px !important;}
.ma-s{margin-bottom: 10px !important;}
.modal-mask {position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); display: block;}
.modal-wrapper {display: inherit; height: 100%;}
.modal-basic *{margin: 0px; padding: 0px; border: 0px;}
.modal-container {width: 300px; max-width:100%; padding:0px; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 8px rgba(0, 0, 0, .33); position: absolute; padding-top: 39px;}
.modal-body{padding:15px 15px 0px 15px; margin-bottom: 10px; overflow-y:visible; max-height: calc(80vh - 100px); height: 100%;}
.modal-body.scrolling-body{overflow-y:auto;}
.modal-body .scrolling-body{height:100%;max-height: calc(80vh - 100px);overflow-y:auto;}
#pdf-viewer-modal-vue .modal-container {background-color:#3e3e3e;}
#pdf-viewer-modal-vue .modal-body {height:calc(90vh - 100px); max-height:calc(90vh - 100px); padding:0;}
.modal-body .view-table table{border: 0px solid #ddd; border-left: 0px; border-right: 0px;}
.modal-body .view-table table th,.modal-body .view-table table td{padding: 10px;}
.modal-body .view-table table tr{border-bottom: 1px solid #666;}
.modal-header{position: absolute; top:0px; left:0px; width: 100%; background:url("../images/admin-bg.png") no-repeat right -125px center #536aab; }
.modal-header *{border: 0px; margin: 0px; padding: 0px;}
.modal-header h1{color:#fff; font-size: 16px; width: 100%; padding: 10px 15px; box-sizing: border-box; height: 39px;}
.modal-header button{font-size: 0px; display: block; width: 15px; height: 15px; position: absolute; right:12px; top:12px; background: url("../images/pop-close.png") no-repeat center center;}
.modal-container.confirm-modal,.modal-container.alert-modal{padding-top: 80px;}
.modal-container.confirm-modal:before{content:""; display: block; width: 70px; height: 70px; background:url("../images/confirm.png") no-repeat center center #64a743; left:50%; top:0px; position: absolute; margin-left: -35px; margin-top: -35px; border-radius: 180px; box-sizing: border-box; border:4px solid #fff;}
.modal-container.confirm-modal:after{content:""; display: block; width: 100%; text-align: center; font-size: 33px; font-weight: bold; color:#64a743; position: absolute; top:40px;}
.modal-container.alert-modal:before{content:""; display: block; width: 70px; height: 70px; background:url("../images/alert.png") no-repeat center center #4364a7; left:50%; top:0px; position: absolute; margin-left: -35px; margin-top: -35px; border-radius: 180px; box-sizing: border-box; border:4px solid #fff;}
.modal-container.error-modal:before{background-color:#f12432 !important;}
.modal-container.alert-modal:after{content:""; display: block; width: 100%; text-align: center; font-size: 33px; font-weight: bold; color:#4364a7; position: absolute; top:40px;}
.modal-container.confirm-modal > div,.modal-container.alert-modal > div{text-align: center; font-size: 17px; padding-left: 25px; padding-right: 25px;}
.modal-container.confirm-modal .modal-footer,.modal-container.alert-modal .modal-footer{padding-top:45px; padding-bottom: 20px; text-align: center;}
.modal-container.alert-modal .modal-footer button,.modal-container.confirm-modal .modal-footer button{padding: 0px 15px; height: 30px; text-align: center; background-color:#64a743 !important; color:#fff !important; font-size: 15px; border: 0px !important; min-width: 110px;}
.modal-container.alert-modal .modal-footer button{ background-color:#4364a7 !important;}
.modal-container.error-modal .modal-footer button{ background-color:#f12432 !important;}
.modal-container.confirm-modal .modal-footer button:last-child{background-color:#666 !important; margin-left:6px !important;}
.modal-enter {opacity: 0; }
.modal-leave-active { opacity: 0; }
.modal-enter .modal-container,
.modal-leave-active .modal-container {-webkit-transform: scale(1.1); transform: scale(1.1);}
.modal-footer{background-color:#fff; text-align: right; padding:5px 15px 15px; font-size: 0px;}
.modal-footer button,.modal-footer a{display:inline-block; background:#666; margin-left:4px; color:#fff; height: 24px; line-height: 22px; padding: 0 15px; border-radius: 40px; padding-left: 10px;}
.modal-footer button i:before,.modal-footer a i:before{margin-right: 5px; position: relative; top:1px;}
.modal-footer .title-info{display: inline-block; padding-left: 17px; color: #ff524f; font-size: 13px; background: url(../images/title-info.png) no-repeat left top 2px;}

footer{background-color: #f5f5f7; border-top: 1px solid #c0bfbd; border-bottom: 1px solid #c0bfbd;}
.footer-list{padding: 8px; border-bottom: 1px solid #ceced0;}
.footer-list ul:after{content:""; display: block; clear: both;}
.footer-list ul li{float: left; padding: 5px;}
.footer-list ul li:first-child a{border-left: 0px; color:#2d92a0;}
.footer-list ul li a{color:#666666; border-left: 1px solid #bcbcbe; padding-left: 10px;}
.footer-list > div{max-width: 1160px; margin: 0 auto; position: relative;}
.addr > div{max-width: 1160px; margin: 0 auto; padding-top: 30px; padding-bottom: 30px;}
address{font-style: normal; font-size: 15px; color:#666666; display: inline-block;}
.phone{display: inline-block; margin-left: 20px;}
.phone > span{background: url("../images/phone-icon.png") no-repeat left center; display: inline-block; padding: 7px 35px;}
.phone > span + span{margin-left:-20px;}
.phone + div{padding: 13px 0;}
.family{position: absolute; right:0px; top:0px;}
.family ul li{float: none;}
.family ul li a{display: block; padding: 7px 0; padding-left: 40px; border: 0px; background:url("../images/fa-icon1.png") no-repeat left center; color:#666 !important;}
.family ul li a:hover,.family ul li a:focus{color:#2d92a0 !important; font-weight: 700;}
.family ul li a.fa1{}
.family ul li a.fa2{background-image: url("../images/fa-icon2.png");}
.family ul li a.fa3{background-image: url("../images/fa-icon1.png");}
.family ul li a.fa4{background-image: url("../images/fa-icon3.png");}
.family ul li a.fa5{background-image: url("../images/fa-icon4.png");}
.family ul li a.fa6{background-image: url("../images/fa-icon5.png");}
.family ul li a.fa7{background-image: url("../images/fa-icon6.png");}
.family ul li a.fa8{background-image: url("../images/fa-icon7.png");}
.family ul{position: absolute; bottom:35px; border: 1px solid #ddd; right:0px; padding: 17px; background-color: #fff; border-radius: 5px; box-shadow: 3px 2px 3px rgba(0,0,0,0.1); min-width: 265px; color:#666; font-size: 13px;}
.family > button{display: block; border: 0px; font-size: 13px; color:#656565; text-transform: uppercase; width: 163px; height: 28px; border-radius: 40px; background:url("../images/select-arr.png") no-repeat right 15px center #d8d8d9; text-indent: -5px;}
.join{background:url("../images/join1.png") no-repeat center center; }
.login{background:url("../images/login1.png") no-repeat center top 13px;}
.admin-page{background:url("../images/admin1.png") no-repeat center center;}
.v-area{background: url("../images/v-img1.png") no-repeat right top 100px;}
.v-area1{background: url("../images/v-img2.png") no-repeat right top 20px;}
.title-txt{margin-bottom: 50px; padding-top: 50px;}
.title-txt.happy{}
.title-txt strong{font-size: 47px; display: block; color:#f28d28; margin-bottom:25px; font-weight: 900;}
.title-txt strong em{display: block; font-size: 33px; margin-bottom: 10px;}
/*.title-txt .title-box{border: 1px solid #dcdcdc; background-color: #f5f5f5; position: relative; padding-top: 50px; padding-bottom: 20px; margin-bottom: 20px;}*/
.title-txt .title-box > p.ttxt{display: block; color:#333; font-size: 35px; font-weight: 700; line-height:35px; margin:0; margin-bottom:30px;}
.title-txt .green{color:#80a54e;}
.title-txt .orange{color:#f88d27;}
.title-txt .blue{color:#257ebd;}
.title-txt .purple{color:#7030A0;}
.title-txt .pink{color:#E966A0;}
.title-txt strong.green{font-weight: 900; color:#80a54e;}
.title-txt span{color:#666666; font-size: 24px; font-weight: 700; display: block; padding-top:15px;}
.title-txt span strong{display: inline-block; font-size:20px; margin: 0px;}
.title-txt span.txt-small{font-size:20px; line-height: 170%; letter-spacing: -1px;}
.title-txt div{font-size: 33px; color:#f88d27; font-weight: 700; margin-bottom:60px;}
.hak .content h3.title-h3{background: url("../images/h3-hak.png") no-repeat left 5px center; padding-left: 40px; color:#444444; font-size: 20px; margin-bottom:27px; margin-top: 0px;}
.seup .content h3.title-h3{background: url("../images/h3-seub.png") no-repeat left 5px center; padding-left: 40px; color:#444444; font-size: 20px; margin-bottom:27px; margin-top: 0px;}
.dam .content h3.title-h3{background: url("../images/h3-dam.png") no-repeat left 5px center; padding-left: 40px; color:#444444; font-size: 20px; margin-bottom:27px; margin-top: 0px;}
.go .content h3.title-h3{background: url("../images/h3-go.png") no-repeat left 5px center; padding-left: 40px; color:#444444; font-size: 20px; margin-bottom:27px; margin-top: 0px;}
.my-type h3.title-h3, .my h3.title-h3{background: url("../images/h3-my.png") no-repeat left 5px center; padding-left: 40px; color:#444444; font-size: 20px; margin-bottom:15px; margin-top: 0px; border-bottom: 0px;}

#board-app h3.title-h3{border-bottom: 0px; margin-top: 0px;}
h4.title-h4{font-size: 18px; font-weight: 800; color:#526eb8; background: url("../images/h4.png") no-repeat left top 3px; padding-left:25px; margin-bottom:25px;}

.my .con-box .title-h3 + .list-table > .board-count{margin-top: -17px;}
.my .paging a.active{color:#5478d4; border-color:#5478d4; background-color: rgba(84,120,212,0.07);}

/***
.content ul.list{margin: 0px; padding: 0px; margin-bottom: 50px;}
.content ul.list *{margin: 0px; padding: 0px;}
.content ul.list li{color:#666666; font-size: 17px; position: relative; padding-left: 19px; margin-top: 20px;}
.content ul.list div.font-red{margin-top: 10px;}
.content ul.list li:first-child{margin-top: 0px;}
.content ul.list li:before{content: ""; display: block; width: 4px; height: 4px; background-color: #f88d27; position: absolute; left:0px; top:10px;}
.content ul.list ul{padding-top: 15px;}
.content ul.list ul li{margin-top: 10px;}
.content ul.list ul li ul{margin-bottom: 20px;}
.content ul.list ul li ul li{font-size: 15px;}
.content ul.list ul li:before{content: ""; height: 1px; width:6px; background-color: #666;}
.content ul.list a{color:#5b910f;}
.content ul.list a:hover,.content ul.list a:focus{text-decoration: underline;}
.down-btn-group a{margin-left:10px;}
.down-btn-group a:first-child{margin-left: 0px;}
.list + .down-btn{margin-top: -30px;}
.content ul.list.strong > li{font-weight: 700;}
.content ul.list.strong > li div{margin-top: 20px;}
.content ul.list.strong > li div + strong{margin-top: 20px; display: block;}
.content ul.list.strong > li ul li {font-weight: normal;}
.content ul.list.strong > li div{font-weight: normal;}
.content ul.list.strong > li .info{display: block; margin-top: 20px;}
.content ul.list.strong > li .info.strong{font-weight: 700;}
.content ul.list ul.arr-li{margin-bottom: 50px;}
.content ul.list ul.arr-li > li:before{background: url("../images/arr-li-icon.png") no-repeat left center; width: 8px; height: 7px;}
**/

.content table td > ul.list{margin: 0px; padding: 0px; margin-bottom: 50px;}
.content table td > ul.list *{margin: 0px; padding: 0px;}
.content table td > ul.list li{color:#666666; font-size: 15px; position: relative; padding-left: 19px; margin-top: 5px;}
.content table td > ul.list div.font-red{margin-top: 10px;}
.content table td > ul.list li:first-child{margin-top: 0px;}
.content table td > ul.list li:before{content: ""; display: block; width: 4px; height: 4px; background-color: #f88d27; position: absolute; left:0px; top:10px;}
.content table td > ul.list ul{padding-top: 5px;}
.content table td > ul.list ul li{margin-top: 5px;}
.content table td > ul.list ul li ul{margin-bottom: 10px;}
.content table td > ul.list ul li ul li{font-size: 15px;}
.content table td > ul.list ul li:before{content: ""; height: 1px; width:6px; background-color: #666;}
.content table td > ul.list a{color:#5b910f;}
.content table td >  ul.list a:hover,.content ul.list a:focus{text-decoration: underline;}

.v-area1 p, p.con-p{font-size: 17px; color:#777; margin-bottom: 35px; line-height: 240%;}
.v-area1 p, p.con-p2{font-size: 17px; color:#777; margin-bottom: 35px;}
.vi-list{max-width: 990px; margin:40px auto; padding: 0px;}
.vi-list *{padding: 0px; margin: 0px;}
.vi-list:after{content: ""; display: block; clear: both;}
.vi-list dl{position: relative; padding: 27px; padding-left: 180px; min-height: 155px; border: 1px solid #ccc; border-radius: 180px; float: left; width: calc(50% - 15px); margin-bottom: 30px;}
.vi-list dl:nth-child(even){margin-left: 30px;}
.vi-list dl dt{position:absolute; left:8px; top:8px; width: 136px; height: 136px; background:url("../images/vi-list-bg.png") no-repeat right bottom #f88d27; border-radius: 180px; color:#fff; text-align: center; line-height: 136px; font-size: 22px; font-weight:700;}
.vi-list dl:nth-child(2) dt{background-color:#7ebd25;} .vi-list dl:nth-child(2) dd ul li strong{color:#7ebd25; }
.vi-list dl:nth-child(3) dt{background-color: #3da998;} .vi-list dl:nth-child(3) dd ul li strong{color:#3da998;}
.vi-list dl:nth-child(4) dt{background-color: #998873; } .vi-list dl:nth-child(4) dd ul li strong{color:#998873;}
.vi-list dl dd{}
.vi-list dl dd ul{}
.vi-list dl dd ul li:first-child{margin-top: 0px;}
.vi-list dl dd ul li{font-size: 17px; color:#666; margin-top: 10px;}
.vi-list dl dd ul li strong{font-size: 23px; color:#f88d27; display: inline-block; padding-bottom: 10px;}
.tab{border: 1px solid #ccc; margin-bottom: 50px; border-spacing: 0px; z-index: 9;}
.tab.tab1 li{width: 100%;}
.tab.tab2 li{width: 50%;}
.tab.tab3 li{width: 33.333%;}
.tab.tab4 li{width: 25%;}
.tab.tab5 li{width: 20%;}
.tab.tab6 li{width: 16.666%;}
.tab.tab7 li{width: 14.285%;}
.tab.tab8 li{width: 12.5%;}
.tab.tab9 li{width: 11.111%;}
.tab ul li:before{display: none;}
.tab ul{border: 0px; margin-bottom: 0px; z-index: 99; padding: 0px; margin: 0px;}
.tab ul:after{content: ""; display:block; clear: both;}
.tab ul li{float: left; padding: 0px; margin: 0px; display:table; height:70px;}
.tab ul li a{/*display: block;*/display:table-cell; vertical-align:middle; text-align: center; padding: 17px; border: 0px; color:#707070; font-size: 17px; font-weight: 700; border-left: 1px solid #cccccc;}
.content-tab ul li a{font-size: 15px;}
.tab ul li.active a{color:#fff; background: #f88d27; position: relative;}
.seup .tab ul li.active a{background: #7ebd25;}
.seup .tab ul li.active a:before{background: #7ebd25;}
.dam .tab ul li.active a{background: #3da998;}
.dam .tab ul li.active a:before{background: #3da998;}
.go .tab ul li.active a{background: #998873;}
.go .tab ul li.active a:before{background: #998873;}
.my .tab ul li.active a{background: #5478d4;}
.my .tab ul li.active a:before{background: #5478d4;}
.tab ul li.active a:before{content: ""; display: block; width: 14px; height: 14px; background-color:#f88d27; transform: rotate(45deg); position: absolute; left:50%; bottom: -7px;}
.tab ul li:first-child a{border-left: 0px;}
.img img{max-width: 100%; display: block; margin: 0 auto; height: auto !important;}
.img1 img{max-width: 100%; display: block; margin: 0 auto;}
/*.img{margin-bottom: 40px;}*/
.img1{margin-bottom: 40px; height: 100%;}
.sub-menu{background-color: rgba(0,0,0,0.03); border: 1px solid #ccc; border-top: 0px;
    position: absolute;
    left: 0px;
    top: 120px;
    width: 100%;
}
.no-data{text-align: center; border-top: 1px solid #ddd; border-bottom: 0px solid #ddd; min-height: 130px; display:block;  font-size: 17px; padding-top: 20px !important;}
.no-data:before{content: ""; display: inline-block; width:40px; height: 50px; background: url("../images/no-data.png") no-repeat left center; margin-right: 10px; position: relative; top:17px;}
.message-page{background: url("../images/p-bg.png") no-repeat center top 30px; padding:40px; padding-top:130px;}
.message-page p{border: 1px solid #ddd; text-align: center; padding: 20px; font-size: 15px; min-height: 100px; border-radius: 5px; background:url("../images/p-l.png") no-repeat right -78px center #f9f9f9;}
.message-page .btn-g{display:block; text-align: center; padding-top: 20px;}
.message-page .btn-g a,.message-page .btn-g button{display: inline-block; min-width: 100px; padding: 10px 20px; font-size: 16px; background-color: #777; color:#fff; border-radius: 5px;}


.p-end{background: url("../images/p-bg.png") no-repeat center top 30px; padding:40px; padding-top:130px;}
.p-end h2{border: 1px solid #ddd; text-align: center; padding: 20px; font-size: 20px; min-height: 100px; border-radius: 5px; background:url("../images/p-l.png") no-repeat right -78px center #f9f9f9;}
.p-end .btn-g, .bank-info .btn-g {display:block; text-align: center; padding-top: 20px;}
.p-end .btn-g a, .p-end .btn-g button, .bank-info .btn-g a{display: inline-block; min-width: 100px; padding: 10px 20px; font-size: 16px; background-color: #777; color:#fff; border-radius: 5px;}

.bank-info{background: url("../images/p-bg.png") no-repeat center top 30px; padding:40px; padding-top:130px;}
.bank-info h2{text-align: center; color:#6c5a44; color: #6c5a44; font-size: 25px; margin-bottom: 45px; margin-top: 25px;}
.bank-info dl{position: relative; border-bottom: 1px dashed #ccc; margin: 0px;}
.bank-info dl:before{content:""; display:block; width: 4px; height: 4px; background-color: #f28d28; position: absolute; left:0px; top:22px;}
.bank-info dl:last-child{border-bottom: 0px;}
.bank-info dl dt{position: absolute; left:0px; top:0px; font-weight: bold; color:#3da998; padding:15px 5px; padding-left: 15px;}
.bank-info dl dd{padding: 15px; padding-left: 110px; }
.bank-list{border: 1px solid #998873; padding:10px 20px; font-size: 15px; min-height: 100px; border-radius: 5px; background:url("../images/p-l.png") no-repeat right -138px center #f9f9f9; margin-bottom: 15px;}


.card-group{background: url("../images/p-bg.png") no-repeat center top 30px; padding:40px; padding-top:130px;}
.card-group h2{text-align: center; color:#6c5a44; color: #6c5a44; font-size: 25px; margin-bottom: 45px; margin-top: 25px;}
.card{border-color: #47a998 !important;}
.card a:hover,.card a:focus{background-color: rgba(71, 169, 152, 0.1); }
.card.account{border-color: #998873 !important;}
.card.account a:hover,.card.account a:focus{background-color: rgba(153, 136, 115, 0.1); }

.sub-menu *{padding: 0px; margin: 0px;}
.sub-img-tab{border: 1px solid #dcdcdc; background-color: #f5f5f5; position: relative; padding-top: 50px; padding-bottom: 50px; margin-bottom: 40px;}
.sub-img-tab ul{position: absolute; left:25px; top:25px;}
.sub-img-tab ul:after{content: ""; display: block; clear: both;}
.sub-img-tab ul li{float: left; margin-right: 2px;}
.sub-img-tab ul li a{display: block; min-width: 76px; height: 45px; text-align: center; line-height: 45px; color:#fff; background-color:#a9a9a9; }
.sub-img-tab ul li.on a{background-color: #6c5a44; position: relative;}
.sub-img-tab ul li.on a:before{content: "";
    display: block;
    width: 19px;
    height: 19px;
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -10px;
    transform: rotate(45deg);
    background:#6c5a44;
}
.sub-img-tab > div{text-align: center;}
.img-list{display: none;}
.img-list.on{display: block;}
.img-list li{float: left; width:calc(33.333% - 20px); margin-left: 30px; margin-bottom: 30px;}
.img-list li:first-child,.img-list li:nth-child(3n + 1){margin-left: 0px;}
.img-list li img{display: block; width: 100%; margin: 0 auto;}
.img-list li span{display: inline-block; font-size: 17px; position: relative; padding-left: 10px;  margin-top:25px;}
.img-list li span:before{content: ""; display: block; width: 4px; height: 4px; background-color: #f88d27; position: absolute; left:0px; top:8px;}
.img-list:after{content: ""; display: block; clear: both;}
.si-list{position: relative; margin: 0px; padding: 0px;}
.si-list *{margin: 0px; padding: 0px;}
.si-list:after{content: ""; display: block; clear: both;}
.si-list:before{content: ""; display: block; width:calc(100% - 200px); position: absolute; left:100px; top:90px; height: 1px; z-index: -1; background:url("../images/dotte-line.png") repeat-x left center;}
.si-list dl{float: left; width: 25%;}
.si-list dt{width:178px; position: relative; margin: 0 auto; margin-bottom: 40px; height:178px; border-radius: 180px; background:url("../images/si1.png") no-repeat center top 30px #998873; color:#fff; text-align: center; font-weight:900; line-height: 260px; font-size: 21px;}
.si-list dt:before{content: ""; display: block; width: 17px; height: 17px; border-radius: 180px; background:#c8c8c8; position: absolute; left:-8px; z-index: -1; top:50%; margin-top: -8px;}
.si-list dt:after{content: ""; display: block; width: 17px; height: 17px; border-radius: 180px; background:#c8c8c8; position: absolute; right:-8px; z-index: -1; top:50%; margin-top: -8px;}
.si-list .si2 dt{background-color: #3da998; background-image: url("../images/si2.png");}
.si-list .si3 dt{background-color: #f88d27; background-image: url("../images/si3.png");}
.si-list .si4 dt{background-color: #7ebd25; background-image: url("../images/si4.png");}
.si-list .si4 dt:after,.si-list .si1 dt:before{display: none;}
.si-list dd{text-align: center;}
.si-list dd ul{display: inline-block; }
.si-list dd li{font-size: 17px; color:#666; position:relative; padding-left: 10px; margin-bottom: 12px; text-align: left;}
.si-list dd li:before{content: ""; display: block; width: 4px; height: 4px; border-radius: 180px; background-color: #5472be; position: absolute; left:0px; top:8px;}

.font-line{text-decoration: underline !important;}
.font-blue{color:#506eba !important;}
.font-red{color:#ff3c00 !important;}
.sub-menu ul:after{content: ""; display: block; clear: both;}
.sub-menu ul li{float: left; margin-left: 30px;}
.sub-menu ul li a{padding: 15px; display: block; font-size: 16px; position: relative; color:#666; background-color: transparent;}
.sub-menu ul li.on a:after{content: ""; display: block; position: absolute; width:calc(100% - 20px); right:11px; bottom:0px; height: 2px; background-color:#f88d27;}
.sub-menu ul li.on a:before{background-color: #f88d27;}
.sub-menu ul li a:before{content: ""; display: block; width: 4px; height: 4px; background-color: #aaa; position: absolute; left:0px; top:22px;}
.tab-con{padding-top:50px;}
.center{text-align: center !important;}
.box-table{position: relative; background-color: #fff; margin-bottom: 40px;}
.box-table.no-thead{border: 0px;}
table.box-table.no-thead tbody td{border-top:1px solid #959fc6;}
table.box-table.no-thead tbody th{    border: 1px solid #959fc6;
    background-color: #fcfcfd;
    padding: 15px;
    font-size: 17px;
    color: #666;}
.link{color:#257ebd;  }
.link:hover,.link:focus,.link:active{color:#f88d27;}
.box-table *{padding: 0px; margin: 0px;}
.box-table td ul{}
.box-table td ul:after{content: ""; display: block; clear: both;}
.box-table td ul > li{float: left; margin-right: 30px; padding-top:5px; padding-bottom:5px; position: relative; padding-left: 15px;}
.box-table td ul > li strong{font-weight: normal; color:#257ebd;}
.box-table td ul > li:before{width: 3px; height: 3px; background-color:#6b6f82; content: ""; display: block; position: absolute; left:0px; top:13px;}

.box-table td ul.tb-list{padding:20px 0}
.box-table td ul.tb-list:after{content: ""; display: block; clear: both;}
.box-table td ul.tb-list > li{float: none; display:block; margin-right: 20px; padding-top:5px; padding-bottom:5px; position: relative; padding-left: 15px;}
.box-table td ul.tb-list > li strong{font-weight: 700; color:#257ebd;}
.box-table td ul.tb-list > li:before{width: 3px; height: 3px; background-color:#6b6f82; content: ""; display: block; position: absolute; left:0px; top:13px;}

.box-table:before{content: ""; display: block; width:70px; height: 70px; opacity: 0.3; background: url("../images/box-bg.png") repeat left top; position: absolute; right:-10px; bottom:-10px; z-index: -1;}
.team-group .team{border: 1px solid #9ca6ca; padding: 27px; margin-bottom: 35px; position: relative; padding-left: 130px; background-color: #fff; min-height: 85px;}
.team-group *{margin: 0px; padding: 0px;}
.team-group .team:after{content: ""; display: block; clear: both;}
.team-group .team strong{font-size: 20px; font-weight: 700; color:#f17600; width: 20%; display: inline-block; text-align: center; position: relative; top:4px;}
.team-group .team strong em{font-size: 17px; margin-right: 12px;}
.team-group .team span{width: 25%; display: inline-block; text-align: center; font-size: 17px; position: relative; top:4px;}
.team-group .team span:nth-last-child(2):before{content: ""; display: inline-block; width: 3px; height: 3px; background-color: #6b6f82; position: relative; top:-4px; margin-right:10px;}
.team-group .team span:last-child{float: right; position: relative; top:-4px;}
.team-group .team span:last-child:before{content: ""; display: inline-block; width: 38px; height: 25px; background: url("../images/phone.png") no-repeat left center; position: relative; top:7px; margin-right: 15px;}
.team-group .team:before{content: ""; display: block; width: 85px; height: 83px; background: url("../images/team2.png") no-repeat center center #f17600; position: absolute; left:0px; top:0px;}
.team-group:after{content: ""; display: block; clear: both;}
.team-group dl{float: none;
    width: 100%;
    margin-right: 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 999;
    background-color: #fff;}
.team-group dl:before{content: "";
    display: block;
    width: 100%;
    min-height: 100px;
    right: -0px;
    bottom: -3px;
    background: url(../images/box-bg.png) repeat left top;
    position: absolute;
    opacity: 0.3;
    z-index: -1;
}
.team-group .team:after{content: ""; display: block; width: 100%; height: 85px; background: url("../images/box-bg.png") repeat left top; position: absolute; left: 5px; top: 3px; z-index: -1; opacity: 0.3;}
.team-group dl dt{text-align:left;
    padding:15px 30px;
    background-color: #fff1e3;
    color: #f17600;
    font-weight: bold;
    font-size: 20px;
    border: 1px solid #f17600;}
.team-group dl dt span{font-size: 17px; margin-right:10px;}
.team-group dl:nth-of-type(3n){margin-right: 0px;}
.team-group dl dd{padding: 28px; padding-left: 10px; padding-bottom: 15px; border: 1px solid #9ca6ca; border-top: 0px; border-bottom: 0px; min-height: 10px; background-color: #fff;}
.team-group dl dd ul:after{content: ""; display: block; clear: both;}
.team-group dl dd ul li{position: relative; padding-left: 14px; font-size: 17px; color:#666; margin-bottom: 10px; float: left; margin-left: 20px;}
.team-group dl dd ul li:before{content: ""; display: block; width: 3px; height: 3px; background:#f17600; position: absolute; left:2px; top:8px;}
.team-group dl dd.phone-num{padding: 15px; border-bottom: 1px solid #9ca6ca;  min-height: 20px; font-size: 17px; border-top: 1px dashed #9ca6ca; padding-left: 78px; background: url("../images/phone.png") no-repeat left 25px center #fff;}
.team-group + .team-group dt{background-color: #f2f9e3;
    border: 1px solid #89a74c;
    color:#708a3d;
}
.team-group + .team-group .team strong{color:#89a74c;}
.team-group + .team-group .team:before{ background:url("../images/team3.png") no-repeat center center #89a74c; }
.team-group + .team-group + .team-group dt{background-color: #eef2ff;
    border: 1px solid #5875c2;
    color: #5875c2;}
.team-group + .team-group + .team-group .team strong{color:#5875c2;}
.team-group + .team-group + .team-group .team:before{background:url("../images/team1.png") no-repeat center center #5875c2; }
.team-group + .team-group dl dd ul li:before{background-color:#89a74c; }
.team-group + .team-group + .team-group dl dd ul li:before{background-color:#5875c2;}
.team-group .team-jang:before{background: url("../images/team4.png") no-repeat center center #3da998;}
.team-group .team-jang strong{color:#3da998;}
table.box-table {border-collapse:collapse; border: 1px solid #959fc6; width: 100%;}
table.box-table caption{font-size: 0px !important;}
table.box-table thead th{ border: 1px solid #959fc6; text-align: left; font-size: 18px; font-weight: 900; color:#f17600; padding: 20px; }
table.box-table tbody td{ border: 1px solid #959fc6; border-top: 0px; background-color: #fcfcfd; padding:15px; font-size: 17px; color: #666;}


#map{border: 1px solid #d4d4d4;}
.map-title{margin-bottom: 30px; padding-top: 55px; padding-left: 5px;}
.map-title h3{color:#3da998; font-size:20px; margin-bottom: 10px;}
.map-title ul:after{content: ""; display: block; clear: both;}
.map-title ul li{float: left; font-size: 17px; color:#516fbd; padding-top: 6px; padding-bottom:6px;}
.map-list{padding-top: 40px;}
.map-list ul{margin-bottom: 40px;}
.map-list ul li{font-size: 17px; color:#666666; position: relative; padding-left: 10px; margin-bottom: 20px; line-height: 140%;}
.map-list ul li:last-child{margin-bottom: 0px;}
.map-list ul li span{color:#2e93a2;}
.map-list ul li:before{content: ""; display: block; width: 4px; height: 4px; border-radius: 180px; background-color: #5472be;position: absolute; left:0px; top: 8px;}
.map-list h4{ font-size: 17px; color:#3f5ca8; font-weight:900; padding: 7px; padding-left:30px; background: url("../images/car1.png") no-repeat left center; margin-bottom: 20px;}
.map-list h4.car{background-image: url("../images/car.png");}
.tel{background: url("../images/tel.png") no-repeat left center; padding-left: 30px; margin-left: 15px;}
.title-history{float: left; width: 45%;}
.title-history * {margin: 0px; padding: 0px;}
.title-history h2{font-size: 85px; color:#7ebd25; font-family: Arial,sans-serif; text-transform: uppercase;}
.title-history strong{color:#998873; font-size: 30px; font-weight: 800; display: block; line-height: 150%; margin-bottom:20px;}
.title-history span{font-size: 18px; color:#555555; line-height: 150%; display: block; padding-right:40px;}
.history{padding-top: 40px;}
.history:after{content:""; display: block; clear: both;}
.history-list{float: right; width: 55%;}
.history-list *{margin: 0px; padding: 0px;}
.history-list ol{position: relative;}
.history-list ol:before{content: ""; width: 2px; height: 100%; background-color:#a4a4a4; display: block; position: absolute; left:59px;}
.history-list ol li{margin-bottom: 50px;}
.history-list dt{font-size: 23px; color:#464c90; font-weight: 900; position: relative; padding-left: 100px; padding-top: 22px; padding-bottom: 22px; margin-bottom: 45px; margin-left:21px;}
.history-list dt strong{font-size: 38px; background-color: #fff; position: absolute; left:0px; top:50%; margin-top: -38px; margin-right: 30px; display: inline-block; text-align: center; line-height: 68px; width: 76px; height: 76px; border-radius: 180px; border: 4px solid #565a95;}
.history-list dd > strong:before{content: ""; display: block; width: 58px; height:7px; background: url("../images/his-icon.png") no-repeat left center; position: absolute; right:-62px; top:8px;}
.history-list dd{padding-bottom: 20px;}
.history-list dd > strong{ position: relative; font-size: 18px; background-color: #fff; font-weight:800; border: 4px solid #565a95; display: inline-block; float: left; text-align: center; color:#464c90; width: 120px; padding:1px 5px; border-radius: 40px;}
.history-list dd em{font-style: normal; font-size: 18px; font-weight:700; color:#3da998; margin-right: 20px; min-width: 48px; float: left; padding-top: 4px; display: inline-block; margin-left:80px;}
.history-list dd em:first-child{margin-left: 199px;}
.history-list dd span{font-size: 18px; color:#222222; display: block; float: left; padding-top: 0px; line-height: 150%; max-width: 365px;}
.history-list dd span > strong{font-weight: normal; color:#855733; font-size: 17px;}
.history-list dd:after{content: ""; display: block; clear: both;}
.history-list ol li:last-child dd:nth-last-child(1),.history-list ol li:last-child dd:nth-last-child(2){background-color:#fff; z-index: 99; position: relative;}

.history-list ol li:nth-of-type(2) dt{color:#3da998}
.history-list ol li:nth-of-type(2) em{color:#f88d27;}
.history-list ol li:nth-of-type(2) dt strong,.history-list ol li:nth-of-type(2) dd strong{color:#3da998; border-color:#3da998; }
.history-list ol li:nth-of-type(3) dt{color:#f88d27}
.history-list ol li:nth-of-type(3) em{color:#565a95;}
.history-list ol li:nth-of-type(3) dt > strong,.history-list ol li:nth-of-type(3) dd > strong{color:#f88d27; border-color:#f88d27; }
img{max-width: 100%; display: inline-block;}

.line-banner{background-color: #3da998; min-height: 92px;}
.line-banner ul{margin: 0 auto; max-width: 1300px; max-height: 100px; overflow: hidden;}
.line-banner ul li{display: none;}
.line-banner ul li.on{display: block;}
.line-banner ul li.on a{display: block;}
.line-banner-con{ position: relative; max-width: 1300px; margin: 0 auto;}
.banner-paging{position: absolute; right:15px; top:67px; }
.banner-paging a{display: inline-block; width: 10px; margin:0 3px; position: relative; top:-5px; height: 10px; border-radius: 180px; background-color:rgba(0,0,0,0.2); font-size: 0px;}
.banner-paging a.on{background-color:rgba(0,0,0,0.4);}
.banner-close{position: absolute; width: 91px; height: 18px; background: url("../images/at.png") no-repeat center top; display: block; left:50%; top:92px; margin-left: -45px; font-size: 0px;}
.banner-close.b-close{background-image: url("../images/ab.png"); top:0px;}
.banner-btn{position: absolute; right: 10px; top: 28px;}
.banner-btn button{font-size: 0px; display: inline-block; width: 30px; height: 30px; border: 0px;}
.banner-btn button.banner-left{ background:url("../images/banner-left.png") no-repeat center center;}
.banner-btn button.banner-right{ background:url("../images/banner-right.png") no-repeat center center;}
.banner-btn button.banner-stop{ background:url("../images/banner-stop.png") no-repeat center center;}
.banner-btn button.banner-play{background:url("../images/banner-play.png") no-repeat center center;}
@-webkit-keyframes autofill {
    to {
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}


/* input number */
.number-input .number-input__button{width: 24px !important; height: 22px;}
.number-input__input{width: 100% !important; box-sizing: border-box; padding: 0px 4px !important; color:#666 !important; height: 24px; text-align: center; font-size: 13px !important;}
.number-input--controls .number-input__input{ padding-left: 24px !important; padding-right: 24px !important;}

/*회원가입*/
.join-form{max-width: 1300px; margin: 0 auto;  min-height: 500px;}
.join-form .code-select *{margin: 0px; padding:0px;}
.join-form .code-select > div:first-child button{margin-top: -6px;}
.join-form button{border: 0px;}
.hide{display: none;}
.title-board{border-bottom: 1px solid #e0e1e3; border-top: 2px solid #7ebd25; padding: 20px; position: relative; background-color: #f9f9f9;}
.dam .title-board{border-top: 2px solid #47a998; }
.hak .title-board{border-top: 2px solid #f28d28; }
.dam .title-board > strong{color: #47a998;}
.hak .title-board > strong{color: #f28d28;}
.title-board > strong{display: block;
    font-size: 21px;
    color: #7ebd25;
    font-weight: 700;
    vertical-align: middle;
}

.title-board span strong{font-weight: normal; color:#998873;}
.title-board .day{position: absolute; right:20px; top:20px;}
.view-area{padding: 20px; min-height: 150px;}
.view-area ul li{list-style: initial;}
.view-area ol li{list-style: decimal;}
.view-area em{font-style: italic;}
.view-area img{max-width: 100%; display: block; margin: 0 auto;}
.view-area-cn{font-size: 13px;line-height: 1.6;word-wrap: break-word;overflow-y:auto;}

@media only screen and (max-width: 767px) {
    .view-area img {height: auto !important}
}

.title-board .data{margin-top: 20px;}
.title-board .data span{margin-right: 10px;}
.title-board i{margin-right: 5px; color:#998873;}
.view-file{background-color: #fcfcfc; border-top: 1px solid #e0e1e3;}
.view-file *{margin: 0px; padding: 0px;}
.list-prev-next table{border-top: 0px solid #ccc; border-collapse: collapse; width: 100%;}
.list-prev-next table th{border-bottom: 1px solid #ccc; border-right:1px solid #ccc; font-size: 14px; padding: 10px; background-color: #fff; }
.list-prev-next table th span{background: url("../images/dot-arr.png") no-repeat right center; display: inline-block; padding-right:17px;}
.list-prev-next table tr:nth-child(2) th span{background-image: url("../images/dot-arr1.png");}
.list-prev-next table td{border-bottom: 1px solid #ccc; padding: 10px;}
.list-prev-next table td a{color:#666;}
.view-file dt{display: none;}
.view-file dd{overflow: visible; max-height:100%;}
.view-file dd li{padding:5px 20px !important;}
.view-file dd li:last-child{border-bottom: 1px solid #e0e1e3;}

.vision{padding-right: 500px;}
.vision strong{display:block; font-size: 20px; color:#f17600; }
.hak-pop.on{display: block;}
.hak-pop{background-color: #fff; border: 1px solid #222; position: absolute;     left: 0px; display: none;
    top:67px; z-index: 999; padding:7px; max-width:550px; box-shadow: 2px 2px 3px rgba(0,0,0,0.2);}
.hak-pop h2{color:#867866; background: url("../images/pop-logo.png") no-repeat center top 20px; padding: 30px; padding-top:110px; font-size: 15px; line-height: 160%; background-size: auto 60px;}
.hak-pop dl{border: 1px solid #b2b2b2; position: relative; margin-top: 7px; background-size: auto 80px !important;}
.hak-pop dt{position: absolute; font-size: 0px; width: 0px; height: 0px;}
.hak-pop dd{padding: 17px; padding-left: 120px; min-height: 95px;}
.hak-pop dd ul{}
.hak-pop dd ul:after{content: ""; display: block; clear: both;}
.hak-pop dd li{padding: 6px; padding-left: 25px; position: relative; float: left; color: #696969;}
.hak-pop dd li:before{content:""; display: block; width: 4px; height: 4px; border-radius: 180px; background-color:#ff9133; position: absolute; left:10px; top:13px;}
.hak-pop dl:nth-of-type(1){background: url("../images/hak.png") no-repeat left 25px center;}
.hak-pop dl:nth-of-type(2){background: url("../images/seub.png") no-repeat left 25px center;}
.hak-pop dl:nth-of-type(3){background: url("../images/dam.png") no-repeat left 25px center;}
.hak-pop dl:nth-of-type(4){background: url("../images/go.png") no-repeat left 25px center;}
.hak-pop dl:nth-of-type(2) dd li:before{background-color: #7ebd25;}
.hak-pop dl:nth-of-type(3) dd li:before{background-color: #47a998;}
.hak-pop dl:nth-of-type(4) dd li:before{background-color: #998873;}
.pop-close{position: absolute; right:17px; top:17px; display: block; width: 32px; height: 32px; border-radius: 180px; background: url("../images/pop-close.png") no-repeat center center #bbb; font-size: 0px;}
/*갤러리*/
.gallery{margin-top: 10px; padding: 0px;}
.gallery:after{content:""; display: block; clear: both;}
.gallery li{float: left; border: 1px solid #ddd; width: calc(20% - 10px); margin-left: 5px; margin-right: 5px; box-shadow: 3px 3px 0px rgba(0,0,0,0.05); margin-bottom: 10px;}
.gallery i{margin-right: 5px;}
.gallery li a{display: block; padding:5px; position: relative;}
.gallery li a .gall-title{font-weight: normal; display: block; text-align: left; padding:10px 0 3px 10px; border-top: 1px solid #ccc; color:#3da998; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.gallery li a span.gall-time{display: block; padding:3px 0px 7px 10px; font-size: 13px; color:#767676;}
.gallery li a span.gall-count{display: block; color:rgba(255,255,255,0.9); position: absolute; right:15px; font-size: 12px; top:15px; background-color: rgba(0, 0, 0,0.6); border-radius: 100px; padding: 3px 8px;}
.gallery li a .gall-img{padding:0px; background-color: #aaa; height: 150px; overflow: hidden; width: 100%; text-align: center; }
.gallery li a img{display: inline-block; max-width: none; width: 100%; height: 150px;}

/*FAQ*/
.faq *{margin: 0px; padding: 0px; line-height: 150%;}
.faq p{margin-top: 10px; line-height: 150%;}
.faq p:nth-child(2){margin-top: 0px;}
.faq > ul{box-shadow: 2px 2px 0px rgba(0,0,0,0.08);}
.faq ul li.on{margin-top: -1px;}
.faq ul li.on > div{display: block; border: 1px solid #47a998; border-top:0px solid rgba(0,0,0,0.04);}
.faq ul li.on > a{ box-shadow: 0px 2px 0px rgba(0,0,0,0.04); color:#47a998; border: 1px solid #47a998 !important;}
.faq ul li.on > a:before{color:#47a998;}
.faq ul li:first-child > a{border-top: 1px solid #ddd; }
.faq ul li > a{display: block; padding: 15px 45px; border: 1px solid #ddd; color:#555; font-weight: bold; font-size: 15px; border-top: 0px; position: relative;}
.faq ul li > a:before{content: "Q."; display: block; position: absolute; left:15px; color:#a07246; top:13px; font-weight:800; font-size: 18px; }

.faq ul li > a:after{
    content: "";
    display: block;
    position: absolute;
    right: 14px;
    top: 11px;
    width: 30px;
    height: 30px;
    background: url("../images/faq-arr.png") no-repeat center center #f4f4f4;
    border-radius: 180px;
}
.faq ul li.on > a:after{background-image: url("../images/faq-arr-on.png"); background-color:rgba(71, 169, 152, 0.1);}
.faq ul li > a strong{font-size: 0px; position: absolute; width: 0px; height: 0px; overflow:hidden;}
.faq ul li > div{background-color:rgba(71, 169, 152, 0.03); padding:20px 25px; padding-left:46px; display: none; position: relative; color:#398176;}
.faq ul li > div a{color:#f17600;}
.faq ul li > div ol:nth-child(2){margin-top: 0px;}
.faq ul li > div ol,.faq ul li > div ul{margin-top: 10px;}
.faq ul li > div ol li,.faq ul li > div ul li{margin-bottom: 10px; position: relative; padding-left: 15px;}
.faq ul li > div ol li:before,.faq ul li > div ul li:before{content: ""; display: block; width: 5px; height: 1px; background-color: #398176; position: absolute; left:3px; top:10px;}
.faq ul li > div:before{content: "A."; font-weight: bold; font-size: 18px; font-weight: bold; color:#65b01e; position: absolute; left:18px; top:20px;}
.faq ul li > div strong{font-size: 0px; position: absolute; width: 0px; height: 0px; overflow:hidden;}
.faq-t{font-weight: bold; color:#a07246;}

.su select{border-radius: 40px; display: inline-block; background-color: #f6f7fb; border: 1px solid #dddddd; color:#666666; padding-left: 24px; padding-right: 24px; max-width:80px;}
.list-count{color:#555555;}
.list-count > div:first-child{float: left; width: 50%; font-size: 14px; background: url("../images/count.png") no-repeat left center; padding-left: 23px; position: relative; top:3px;}
.list-count > div em{color:#0069ff;}
.list-count > div strong{color:#eb3237; font-weight: normal;}
.list-count > div:last-child{float: right; width: 50%; text-align: right;}
.list-count:after{content: ""; display: block; clear: both;}
.su *{margin: 0px; padding: 0px;}
.su-list{margin-bottom: 35px; padding: 0px;}
.su-list > li{width: 100%; margin-top: 15px;}
.su-list > li > a{display: table; border: 1px solid #d9d9d9; width: 100%; color:#444444; box-shadow: 0px 1px 2px rgba(0,0,0,0.1);}
.su-list > li > a > div{display: table-cell; vertical-align: middle; border-left:1px solid #d9d9d9; padding: 20px 15px; }
.su-list > li > a > div:last-child{text-align: center; width: 170px; background-color: #fcfcfc;}
.su-list > li > a > div:first-child{text-align: center; border-left:0px; width: 85px; font-size: 14px;}
.su-list > li > a[target="_blank"] .su-title span:after{content:""; display: inline-block; width:16px; height: 16px; position: relative; left:10px; top:2px; background: url("../images/blank.png") no-repeat right center;}

.su-list > li > .table{display: table; border: 1px solid #d9d9d9; width: 100%; color:#444444; box-shadow: 0px 1px 2px rgba(0,0,0,0.1);}
.su-list > li > .table > div{display: table-cell; vertical-align: middle; border-left:1px solid #d9d9d9; padding: 20px; }
.su-list > li > .table > div:last-child{text-align: center; width: 170px; background-color: #fcfcfc;}
.su-list > li > .table > div:first-child{text-align: center; border-left:0px; width: 85px; font-size: 14px;}

.deadline,.applying{background: #536aab; min-width: 54px; color:#fff; padding:4px 10px !important; display: inline-block;}
.deadline{background-color: #666 !important;}
.aca-list{margin-bottom: 35px !important;}
.aca-list > li{width: 100%; margin-top: 15px;}
.aca-list > li{display: table; border: 1px solid #d9d9d9; width: 100%; color:#444444; box-shadow: 0px 1px 2px rgba(0,0,0,0.1); position: relative;}
.aca-list > li > div{display: table-cell; vertical-align: middle; border-left:1px solid #d9d9d9; padding: 20px; position: relative; }
.aca-list > li > div:last-child{text-align: center; width: 100px; background-color: #fcfcfc;}
.aca-list > li > div:nth-of-type(2){padding-left:30px;}
.aca-list > li > div:first-child{text-align: center; border-left:0px; width: 85px; font-size: 14px;}
.aca-list > li > a[target="_blank"] .su-title span:after{content:""; display: inline-block; width:16px; height: 16px; position: relative; left:10px; top:2px; background: url("../images/blank.png") no-repeat right center;}
.aca-list i{border-radius: 180px; display: block; width: 70px; height: 70px; overflow: hidden; position: absolute;     left: 20px;
    top: 22px; box-sizing: border-box; border: 1px solid #ddd;}
.aca-list i img{display: block; width:70px; height: 70px;  }
.aca-list .su-title{margin-bottom: 10px;}
.aca-list a{color:#536aab;}
.aca-list a:hover,.aca-list a:focus,.aca-list a:active{color:#f17600;}
.aca-list .su-title em{display: block; font-size:14px; margin: 0px; padding-bottom:10px; color: #7e6652;}
.aca-list .su-title span{font-size: 17px;}
.aca-list .su-num{text-align: center; margin-left: 0px; color: #666;}
.su-title{font-size: 16px; margin-bottom:18px;}
.su-title strong{font-size: 12px; text-align: center; display: inline-block; padding:2px 0; border-radius: 4px; margin-right:6px; font-weight: normal;}
.su-title strong i{display: inline-block; padding: 0 5px; padding-right: 7px;}
.su-title .C0120002{background: #948164; color:#fff; min-width: 62px; padding:2px 8px; border: 1px solid #948164;  } /* 접수대기 */
.su-title .C0120003{background:#536aab; color:#fff; min-width: 62px; padding:2px 8px; border: 1px solid #536aab; } /* 접수진행 */
.su-title .C0120004{background:#777; color:#fff; min-width: 62px; padding:2px 8px; border: 1px solid #777;} /* 접수마감 */
.su-title .C0120005{background:#3da998; color:#fff; min-width: 62px; padding:2px 8px; border: 1px solid #3da998;} /* 교육중 */
.su-title .C0120006{background:#ef7474; color:#fff; min-width: 62px; padding:2px 8px; border: 1px solid #ef7474;} /* 교육종료 */
.su-title .C0030001{background: #e8f6f3; color:#00977f; border: 1px solid #48ae9e; min-width: 77px;} /* 추첨 */
.su-title .C0030002{background: #ebf1fb; color:#2e71d1; border: 1px solid #5d7dd6; min-width: 77px;} /* 선착순 */
.su-title .C0030003{background: #f3ece4; color: #7e6652; border: 1px solid #948164; min-width: 77px;} /* 관리자선정 */

.main-area .main-list ul li .C0120002{background: #948164; color:#fff; border: 1px solid #948164;  } /* 접수대기 */
.main-area .main-list ul li .C0120003{background:#536aab; color:#fff; border: 1px solid #536aab; } /* 접수진행 */
.main-area .main-list ul li .C0120004{background:#777; color:#fff; border: 1px solid #777;} /* 접수마감 */
.main-area .main-list ul li .C0120005{background:#3da998; color:#fff; border: 1px solid #3da998;} /* 교육중 */
.main-area .main-list ul li .C0120006{background:#ef7474; color:#fff;border: 1px solid #ef7474;} /* 교육종료 */
.main-area .main-list ul li .C0030001{background: #e8f6f3; color:#00977f; border: 1px solid #48ae9e; min-width: 77px;} /* 추첨 */
.main-area .main-list ul li .C0030002{background: #ebf1fb; color:#2e71d1; border: 1px solid #5d7dd6; min-width: 77px;} /* 선착순 */
.main-area .main-list ul li .C0030003{background: #f3ece4; color: #7e6652; border: 1px solid #948164; min-width: 77px;} /* 관리자선정 */



.su-title .psitn{background: #f3ece4; color: #7e6652; border: 1px solid #948164; min-width: 100px !important; padding: 7px 10px !important; padding: 7px 15px !important; font-size: 16px;} /* 평생학습관소속 */
.su-title a{color:#7e6652;}
.su-title a:hover,.su-title a:focus,.su-title a:active{text-decoration: underline;}
.su-view{border-top: 1px solid #998873; border-left: 1px solid #998873;  border-right: 1px solid #998873; border-bottom: 1px solid #998873;padding: 20px; margin-bottom: 0px; box-shadow: 0px 2px 0px rgba(0,0,0,0.1);
    position: relative;
    background-color: #f9f9f9;}
.su-view h3{margin: 0px; color:#7d684e; font-size: 21px; padding-bottom: 5px; padding-right: 160px;}
.su-view  .su-title{position: absolute; right: 20px; top:20px;}
.su-view  .su-title strong{min-width: 70px; border-radius: 40px; padding-top: 5px; padding-bottom: 5px;}
.su-view  .su-num{margin-left: 0px; margin-top: 10px;}
.su-view  .su-num span{display: inline-block; margin-right:10px; margin-left: 0px !important;}
.su-con *{margin: 0px; padding: 0px;}
.su-con {padding: 10px 30px; border: 1px solid #ccc; border-top: 0px; }
.su-con.re-type{padding: 0px; border-color: #998873;}
.record{display: table; width: 100%; border-bottom: 1px dashed #d6b893;}
.record h3{display: table-cell; width:160px; background-color:#fff7ee;  vertical-align: middle; text-align: center; padding:25px 15px; font-size: 17px; color:#f17600; border-right: 1px solid #d6b893;}
.record h3 i{       display: none;
    color: #d6b893;
    text-align: center;
    margin-bottom: 8px;
    font-size: 23px;
}
.record > div{display: table-cell; padding: 15px 20px; }
.record:last-child{border-bottom: 0px;}
.record > div div {padding: 10px; position: relative; padding-left: 15px;}
.record > div div:before{content:""; display: block; width: 4px; height: 4px; border-radius: 180px; background-color: #7ebd25; position: absolute; left:0px; top:19px;}
.record > div div strong{color:#47a998; font-size:16px; font-weight: normal;}
.record > div div > span{ font-size:16px; display: inline-block; padding-left: 10px;}
.dot-table{width: 100%;}
.dot-table th{padding-top: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ccc; font-size: 16px; text-align: left;}
.dot-table th span{color: #948164; font-weight: bold; margin-right:8px; position: relative; display: inline-block; padding-left: 15px;}
.dot-table th span:before{content: ""; display: block; width: 5px; height: 5px; border-radius: 180px; background-color:#7ebd25; position: absolute; left:0px; top:7px;}
.dot-table th span:after{content:""; display: inline-block; font-weight: bold;}
.dot-table td{padding-top: 20px; padding-bottom: 20px; border-bottom: 1px dashed #ccc; font-size: 16px;}

.day-list{}
.day-list > span{display: inline-block; position: relative; font-size: 14px; color:#666; padding-left: 14px; margin-right: 14px;}
.day-list > span:before{content: ""; display: block; width: 4px; height: 4px; border-radius: 180px; background-color:#6294dc; position: absolute; left:0px; top:6px;}
.com-name{color: #666666; font-size: 14px;}
.com-name + .su-num{margin-top:5px;}
.su-num{text-align: left; margin-left:5px; letter-spacing: -1px;}
.su-num span{display: block; padding: 5px; padding-left: 25px; font-size: 14px; color:#555555;position: relative;}
.su-num span:before{color: #fff; font-size: 13px; width: 18px; height: 18px; border-radius: 3px; position: absolute; left:0px; top:4px; display: block; text-align: center; line-height: 18px;}
.su-num .personnel:before{content:"P"; background-color: #2e71d1; }
.su-num .waiting:before{content:"S"; background-color: #3da998;}
.su-num .personnel strong{color:#2e71d1; font-weight: bold;}
.su-num .waiting strong{color:#3da998; font-weight: bold;}

.id-search{margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    max-width: 700px;
    position: relative;
    top: -120px;
}
.id-search .join-btn-group button.full{ width: 100%; max-width: 500px; }
.id-title strong{display:block; font-size:35px !important; font-weight:bold; text-align:center; margin-bottom:10px !important; background:url("../images/join-img2.png") no-repeat center top 25px; padding-top:135px; color:#3da998 !important;}
.normal-member .id-title strong{background:url("../images/join-img1.png") no-repeat center top 40px; color: #745f47 !important;}
.normal-member .sms{border-color:#715e46 !important; }
.normal-member .join-btn-group button{background-color: #9c866a !important;}
.normal-member .join-btn-group button + button, .join-btn-group a + a{background-color:#666 !important;}

.end-pop{margin-top:-40px;}
.end-pop h3{text-align:center; padding:0px 0 20px 0; font-size:27px; position:relative; color:#ff6200; }
.end-pop h3 span{display:block;}
.end-pop h3 i{font-size:50px; margin:15px 0;}
.end-pop h3 button{position:absolute; top:0px; right:0px; background:url("../images/end-x.png") no-repeat center center; width:15px; height:15px; display:block; font-size:0px;}
.end-pop .modal-container{padding-top:0px;}
.end-pop .end-list{border:1px solid #ff6200; box-sizing:border-box; padding:20px; border-radius:5px; background:#fff9f3; margin-bottom:10px;}
.end-pop .end-list li{margin-bottom:5px; position:relative; padding:3px 15px; color:#ff6200;}
.end-pop .end-list li:before{content:""; display:block; width:4px; height:4px; background:#ff6200; position:absolute; left:0px; top:9px; }
.end-pop .end-list li:last-child{margin-bottom:0px !important;}

/*마이페이지*/
.my-type{}
.my-type > div{float: left;}
.my-type > div.right-area{width:calc(100% - 358px); box-sizing: border-box; padding-left: 30px;}
.my-type h3.title-h3{    margin-top: 10px;  margin-bottom: 20px;}
.my-type:after{content:""; display: block; clear: both;}
.calendar-table{border: 0px solid #ddd; border-collapse: collapse; background-color: #f9f9f9;}
.calendar-table thead{background-color: #f9f9f9; box-shadow: 0px 0px 0px rgba(0,0,0,0.3);}
.calendar-table thead th{border-left: 1px solid #666; border-top: 1px solid #666; border-bottom: 1px solid #666; padding: 15px; font-size: 16px; background-color:#777; color:#fff;  }
.calendar-table thead th.sat{ background-color:#5478d4; border: 1px solid #405f99 !important; }
.calendar-table thead th.sun{background-color:#f17600; border-color:#c56300; }
.calendar-table thead th[colspan="7"]{background-color:#fff; border: 0px; border-bottom: 1px solid #555; color:#444; font-size: 18px; padding-top: 0px;}
.calendar-table thead th[colspan="7"] *{vertical-align: middle;}
.calendar-table thead th[colspan="7"] span{display: inline-block; padding: 0 15px;}
.calendar-table thead th[colspan="7"] a.cal-prev,.calendar-table thead th[colspan="7"] a.cal-next{font-size: 0px; display: inline-block; width: 40px; height: 40px; border-radius: 180px; border: 1px solid #ddd; background: url("../images/prev-arr.png") no-repeat center center;}
.calendar-table thead th[colspan="7"] a.cal-next{background-image: url("../images/next-arr.png");}
.calendar-table thead th[colspan="7"] a.cal-prev:hover,.calendar-table thead th[colspan="7"] a.cal-prev:focus,.calendar-table thead th[colspan="7"] a.cal-prev:active,.calendar-table thead th[colspan="7"] a.cal-next:hover,.calendar-table thead th[colspan="7"] a.cal-next:focus,.calendar-table thead th[colspan="7"] a.cal-next:active{background-color: rgba(0,0,0,0.05);}
.calendar-table tbody td{border: 1px solid #ddd; background-color: #fff; padding: 15px; font-size: 16px;}
.calendar-table tbody td.sun {color:#f17600; }
.calendar-table tbody td.sat.sun{color:#f17600;}
.calendar-table tbody td.sat{color:#5478d4; }
.calendar-table tbody td.on{background-color: #7aa939; border-color: #618e37;  }
.calendar-table tbody td.on a{color:#fff}
.su-list.my-type .list-g{display: table; border: 1px solid #d9d9d9; width: 100%; color:#444444; box-shadow: 0px 1px 2px rgba(0,0,0,0.1); min-height: 86px;}

.su-list.my-type > li > .list-g > div{display: table-cell; vertical-align: middle; border-left:1px solid #d9d9d9; padding: 10px; }
.su-list.my-type > li > .list-g > div:last-child{text-align: center; width: 170px; background-color: #fcfcfc;}
.su-list.my-type > li > .list-g > div:first-child{text-align: center; border-left:0px; font-size: 14px; text-align: left; padding: 10px 30px;}
.su-list.my-type .su-title{font-weight: bold; color:#7e6652;}
.su-list.my-type .su-title em{font-size: 13px; color: #007bcf; font-weight: normal; margin-bottom: 4px;}
.su-list.my-type .btn{display:block; margin-bottom: 4px; margin-left: 0px; height: 30px; line-height: 28px; font-size: 12px; border-radius: 40px; color:#fff;}
.su-list.my-type .btn:last-child{margin-bottom: 0px;}
.su-list.my-type .btn.end{background-color: #eee; border-color: #999; color:#666;}
.su-list.my-type .btn.link-1{background-color:#5478d4; border-color:#405f99 ; }
.su-list.my-type .btn.link-2{background-color: #7aa939; border-color: #6f9d38; }
.su-list.my-type .btn.link-3{background-color: #777; border-color: #666;}
.table{display: table;}
.map-con:after{content:""; display: block; clear: both;}
.map-con > div{float: left;}
.map-con .main-map{padding-left: 3vw;}
.map-con > div .title-txt{font-size: 30px; font-weight: bold; line-height: 200%; }
.map-con-t{padding-left:8vw;}
.map-con-t *{margin: 0px; padding: 0px;}
.map-con-t .list{padding-top: 10px !important;}
.su-record{}
.su-record{}
.su-record > span{display: block; background-color: rgba(0, 0, 0, 0); border: 1px solid #666; color:#666;  margin-bottom: 4px;  height: 24px; line-height: 22px; border-radius: 40px; font-size: 12px;}
.su-record > span.complete{ color:#666; background-color: rgba(0, 0, 0, 0.1); border: 1px solid #777; }
.su-record > span.cancel{ color:#ee6b6b; background-color: rgba(238, 107, 107, 0.11); border: 1px solid #ee6b6b; }
.su-record > a{display: block; border: 1px solid #ccc; background-color: red; margin-bottom: 4px; height: 24px; line-height: 22px; border-radius: 40px; font-size: 12px;}
.su-record > a.survey{background-color: #7f7f7f; border:1px solid #7f7f7f; color:#fff;  }
.su-record > a.survey.off{    color: #3da998;
    background-color: rgba(126, 189, 37, 0.11);
    border: 1px solid #7ebd25; cursor: auto;}
.su-record > a.su-print{border: 1px solid #5478d4; background-color: #5478d4; color:#fff;}
.su-record > a:last-child{margin-bottom: 0px;}
.search-input-area select{display: none;}
.mobile-menu-on{display: none;}
.mobile-menu-list{display: none;}
.apply-btn i{font-size:16px; margin-left: 5px;}
.apply-btn{    font-size: 13px !important;
    font-weight: bold !important;
    color: #536aab;
}
.com-name.left{margin-left:5px; color:#8e714d;}
/*설문조사*/
.poll h3{padding:10px 20px; border-bottom:1px solid #ccc;}
.poll .btn-group{padding-bottom:20px;}
.poll .btn-group a,.poll .btn-group button{padding:3px 10px; text-indent:0px; margin-left:0px;}
.poll .btn-group a + a,.poll .btn-group button + button{margin-left:5px;}
.poll .btn-group span{position:relative; top:-2px;}
.poll ul li:after{content:""; display:block; clear:both;}
.poll ul li em{font-style:normal; float:left;}
.s-group{text-align:left; position:relative; top: -4px; min-width:120px;}
.s-check-group{}
.s-check-group input[type="text"],.s-group input[type="text"]{margin-top: 15px; margin-left:15px; width:calc(100% - 30px);}
.s-group input[type="text"]{margin-top: 10px;}
.s-group:after{content:""; display:block; clear:both;}
.s-title{line-height:1.8em;font-weight:bold; padding:15px 20px; color:#3da998; }
.poll .radio{margin-left:8px;}
.poll .s-end{font-weight:bold;}
.poll .radio label{font-size: 13px !important; font-weight: normal;}
.s-check-group .check{top:0px; margin-left:8px;}
.poll textarea{
    margin-top: 10px;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-left: 20px;
    width: calc(100% - 40px) !important;
    padding:5px;
    box-sizing:border-box;
}
.user-name{display:block; text-align:center; color:#fff; font-weight: normal; font-size: 14px; font-style: normal; vertical-align: middle; padding-top:13px; z-index:98; position:relative;}
.user-name strong{display:inline-block; font-weight:normal; margin-right:3px;}
.user-name i{margin-right:7px;}
.user-name span{color:#95ff00;}

.list-camp{padding:5px 20px; border-top:2px solid #eee; margin: 0px; }
.list-camp:after{content: ""; display: block; clear: both;}
.list-camp li{border-bottom: 1px dashed #ddd;}
.list-camp li:after{content: ""; display: block; clear: both;}
.list-camp li:last-child{border-bottom: 0px;}
.list-camp li a{display: block; padding: 10px; padding-left: 15px; position: relative; color:#333; font-size: 14px; float: left; margin-right: 15px;}
.list-camp li a:hover,.list-camp li a:focus,.list-camp li a:active{text-decoration: underline;}
.list-camp li span{color:#333; padding: 10px; position: relative; display:block; float: left;  padding-left: 15px;}
.list-camp li span em{color:#3da998; font-weight: bold;}
.list-camp li a > em{color:#3da998; font-weight: bold;}
.list-camp li a:before{content: ""; display: block; width: 5px; height: 5px; background-color: #7ebd25; border-radius: 180px; position: absolute; left:0px; top:16px;}
.list-camp li span:before{content: ""; display: block; width: 5px; height: 5px; background-color: #7ebd25; border-radius: 180px; position: absolute; left:0px; top:16px;}
.camp-h{border:3px solid #cfcfcf; margin-bottom: 20px;}
.camp-h .info-title{padding: 20px; border-bottom: 1px solid #ccc; margin: 0px;}
.camp-h .info-title em{display: inline-block; color:#f88d27; }

.atend-check-message {color:red;font-weight:bold;margin-left:10px;}

/* 시민대학 */
.citizen-box { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0 40px;  -webkit-box-pack: justify;  -ms-flex-pack: justify; justify-content: space-between; margin: 50px 0 80px;}
.citizen-item {width: 100%; height: 350px; background: #ffffff; border: 1px solid #ccc; border-radius: 20px; padding: 30px 45px; position: relative;}
.citizen-item > p {text-align:center; font-size:20px; line-height:30px; font-weight:700; color:#444; word-break:keep-all;}
.citizen-item .icon {position: absolute; right: 0; bottom: 0;}

.ct-circle{position:relative; display:flex;align-items:center;justify-content:center;width:551px;height:569px;background:url("../images/circle-bg.png") no-repeat center;margin:50px auto;}
.ct-circle .tit{box-sizing:border-box; width:250px; height:250px; background:#3B3A40; border-radius:50%; padding:10px;}
.ct-circle .tit>div{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;height:100%;border:2px dotted #fff;border-radius:50%;color:#fff;font-size:28px;font-weight:700; text-align:center}
.ct-circle .list>div{position:absolute;width:132px;height:132px;box-sizing:border-box; border-radius:50%; text-align:center; color:#fff; line-height:132px; font-size:18px; font-weight:700;}
.ct-circle .list>div:nth-child(1){left:0px;top:150px;background:#683DD5;}
.ct-circle .list>div:nth-child(2){left:50%;top:0;background:#FD5F8F; margin-left:-66px;}
.ct-circle .list>div:nth-child(3){right:0px;top:150px;background:#683DD5;}
.ct-circle .list>div:nth-child(4){left:50px;bottom:60px;background:#683DD5;}
.ct-circle .list>div:nth-child(5){right:50px;bottom:60px;background:#FD5F8F;}
.ct-circle .list>div:nth-child(6){right:0px;bottom:100px;background:#683DD5;}

.process {padding:30px; background: #fafafa;}
.step-list { overflow: hidden; display:flex; justify-content: center; flex-wrap: wrap; margin-left:-35px; width: calc(100% + 35px);}
.step-list .list-item{position: relative; display: block; padding: 20px; margin-left: 35px; background: #fff; border: 1px solid #EAEBEF; border-radius: 15px; text-align: center; width: calc(25% - 35px);}
.step-list .list-item:before {content: ""; display: block; position: absolute; right: -26px; top: 50%; transform: translateY(calc(50% - 24px)); width: 16px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='24' viewBox='0 0 16 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='5.9475' height='17.8425' rx='2.97375' transform='matrix(-0.700809 0.713349 0.700809 0.713349 3.91797 -1)' fill='%23CCCCCC'/%3E%3Crect width='5.9475' height='17.8425' rx='2.97375' transform='matrix(0.700809 0.713349 0.700809 -0.713349 0.0778809 20.146)' fill='%23CCCCCC'/%3E%3C/svg%3E%0A");}
.step-list .list-item:last-child::before {display: none;}
.step-list .list-item .step-title {display: block; color: #444; font-size: 17px; line-height: 1.4; letter-spacing: 0.01em; font-weight: bold; margin:0; padding:0; height:70px}
.step-list .list-item .step-title span{font-size:13px; display:block; font-weight: 400; line-height: 1.2;}
.step-list .circle {display: block; position: relative; margin: 0 auto 14px; padding:10px; width: 100%; border-radius: 13px; color:#fff;}
.step-list .circle p{display:block; line-height:1.4; padding:8px 0; margin:0; font-size:16px;}
.step-list .circle p:first-child{border-bottom:1px solid #fff;}
.step-list .circle.color1 {background: #E35855;}
.step-list .circle.color2 {background: #F2A229;}
.step-list .circle.color3 {background: #A6A91C;}
.step-list .circle.color4 {background: #15769F;}
.step-list .list-item:nth-child(4):before{right: 50%; top: auto; bottom: -38px; transform: rotate(90deg) translateY(calc(50% - 24px));}



@media screen and (min-width:769px){
    .atend-check-message {display:block;margin-left:0;}
}

@media screen and (max-width:1200px){
    .main-gnb > ul > li.go > ul > li > a{background-color:#fff;}
    .main-gnb > ul > li > ul > li{float:none; width:calc(100% - 10px); margin-bottom:3px; }
    .main-gnb > ul > li > ul > li > a{ padding:3px; font-size:14px;}
    .main-gnb > ul > li.hak > ul{margin-top:-10px;}

    /* 시민대학 */
    .citizen-item {width: 100%; height: 350px; padding: 30px;}
    .citizen-item > p {text-align:center; font-size:18px;}
    .citizen-item > p br{display:none;}
}

@media screen and (min-width:1025px){
    .area-double{display: inline-flex; align-items: stretch;}
    .area-double .con-box{align-items: stretch;}
}

@media screen and (max-width: 1024px){
    .main-search .ding-dong{float:none; margin-left:5px;}
    .open-su{    max-width: calc(100% - 50px);     margin-bottom: 30px;}
    .join-btn-group.type-2 button{ width:100%; max-width:300px;}
    .my-type > div{float:none !important; padding-left:0px !important; width:100% !important;}
    .my-type .right-area .title-h3{margin-bottom:0px !important;}
    .my-type .right-area .su{margin-top: -45px;}
    .my-type .right-area{margin-top:30px;}
    .my-type .left-area .calendar-table{margin:0 auto;}
    .line-banner,.banner-close{display:none;}
    .all-menu{display: none;}
    .main-page .mobile-menu-on{display: block; font-size: 0px; background: url("../images/mob-i.png") no-repeat center center; width: 40px; height: 40px;    right: 48px; position: absolute;
        top: 86px; z-index: 999; border: 0px;}
    .seup .mobile-menu-on,.hak .mobile-menu-on,.seub .mobile-menu-on,.dam .mobile-menu-on,.go .mobile-menu-on,.my .mobile-menu-on{display: block; font-size: 0px; background: url("../images/all-menu1.png") no-repeat center center; width: 40px; height: 40px;    right: 16px; position: absolute;
        top: 25px; z-index: 999; border: 0px;}
    .mobile-menu-list{position: fixed; right: 0px; top:0px; left:0px; bottom:0px; background-color: rgba(0,0,0,0.6); z-index: 9999; padding: 0px !important; margin: 0px !important; display: block; }
    .mobile-menu-list ul{float: none; z-index: 999;}
    .mobile-menu-list > ul{height: 100%; background-color:#444; margin: 0px; padding: 0px; width: 300px; position: absolute; right: 0px; top:0px; overflow: auto;}
    .mobile-menu-list ul li{float: none !important;}
    .mobile-menu-list >ul > li{border-bottom: 1px solid rgba(0,0,0,0.1);}
    .mobile-menu-list >ul > li > a{color:#fff; font-size: 0px; display: block; padding: 10px; height: 70px; opacity: 0.5; transition: 1s all; }
    .mobile-menu-list >ul > li.on > a,.mobile-menu-list >ul > li > a:hover,.mobile-menu-list >ul > li > a:focus{height: 100px; opacity:1; transition: 1s all;}
    .mobile-menu-list >ul > li.hak{background-color:#EF8B2C; }
    .mobile-menu-list >ul > li.seub{background-color:#65B01E;}
    .mobile-menu-list >ul > li.dam{background-color:#3DA998;}
    .mobile-menu-list >ul > li.go{background-color:#998873;}
    .mobile-menu-list >ul > li.my{background-color:#5478d4;}
    .mobile-menu-list >ul > li.hak a{background:url("../images/hak-txt.png") no-repeat left 32px top 16px, url("../images/sub-txt1.png") no-repeat left 115px top 14px, url("../images/sub-txt-bg1.png") no-repeat right -22px bottom -14px #ef8b2c;}
    .mobile-menu-list >ul > li.seub a{background:url("../images/seub-txt.png") no-repeat left 32px top 16px, url("../images/sub-txt2.png") no-repeat left 115px top 14px, url("../images/sub-txt-bg2.png") no-repeat right -22px bottom -14px #65b01e;}
    .mobile-menu-list >ul > li.dam a{background: url("../images/dam-txt.png") no-repeat left 32px top 16px, url("../images/sub-txt3.png") no-repeat left 115px top 14px, url("../images/sub-txt-bg3.png") no-repeat right -22px bottom -14px #3da998;}
    .mobile-menu-list >ul > li.go a{background: url("../images/go-txt.png") no-repeat left 32px top 16px, url("../images/sub-txt4.png") no-repeat left 115px top 14px, url("../images/sub-txt-bg4.png") no-repeat right -22px bottom -14px #998873;}
    .mobile-menu-list >ul > li.my a{background: url("../images/my-txt.png") no-repeat left 32px top 16px, url("../images/sub-txt5.png") no-repeat left 115px top 14px, url("../images/sub-txt-bg5.png") no-repeat right -22px bottom -14px #5478d4;}
    .mobile-menu-list >ul > li > ul{background-color: rgba(0,0,0,0.4); margin: 0px; padding:0px; display: none;}
    .mobile-menu-list >ul > li.on > ul{display: block;}
    .mobile-menu-list >ul > li.on > ul >li > a{display: block; border-bottom: 1px solid rgba(0,0,0,0.13); color:rgba(255,255,255,1); padding: 10px; padding-left: 25px;   background: none; position: relative;}
    .mobile-menu-list >ul > li.on > ul >li > a:before{content:""; display: block; width: 20px; height: 20px; position: absolute; right: 12px; top:7px; background:url("../images/mo-plus.png") no-repeat center center rgba(255,255,255,0); opacity: 0.6; border-radius: 180px;}
    .mobile-menu-list >ul > li.on > ul >li.on > a:before,.mobile-menu-list >ul > li.on > ul >li.no-child > a:before{background-image: url("../images/mo-mius.png"); opacity: 1;}
    .mobile-menu-list >ul > li.on > ul >li.no-child > a:before{opacity: 0.6; }
    .mobile-menu-list >ul > li.on > ul >li > ul{display:none;}
    .mobile-menu-list >ul > li.on > ul >li.on > ul{background-color: rgba(0,0,0,0.4); display:block;}
    .mobile-menu-list >ul > li.on > ul >li.on > ul > li > a{  display: block; font-size: 12px; color:#f9d1a5; background: none; padding: 10px 15px; padding-left: 35px; border-bottom: 1px solid rgba(0,0,0,0.1); position: relative;}
    .mobile-menu-list >ul > li.on > ul >li.on > ul > li > a:before{content:""; display: block; width: 3px; height: 2px; background-color: #f9d1a5; position: absolute; left: 25px; top: 17px;}
    .mobile-menu-off{width: 40px; border: 0px; height: 40px; background:url("../images/mo-close.png") no-repeat center center #333; position: absolute; right:300px; top:0px; font-size: 0px; }
    .main-gnb{display: none;}
    .main-all{display: none !important;}
    .main-area .main-list + .main-list .roll{right: 20px; }
    .main-area .main-list + .main-list ul{   padding-right: 80px; }
    .main-area .main-list h2{left:20px !important;}
    .search-input-area .search{width: 205px;}
    .serch-in{padding-left: 20px; padding-right: 20px; margin-bottom: 40px;}
    .s-top{ padding-top: 110px;}
    .login-area .hak-info{position: relative; left:20px;}
    .main-banner{padding:20px;}
    .main-banner .left-link{float: none; width: 100%; margin-bottom: 60px;}
    .main-banner .right-link{float: none; width: 100%; }
    .main-banner .right-link h2{max-width: calc(100% - 200px);}
    .join-group{max-width: 90vw; margin-left: 5vw;}
    .vision{padding-right:25vw; background-size:30% auto;}
    .history{padding-top:0px !important;}
    .title-history strong br{display: none;}
    .title-history{float: none; width: 100%; margin-bottom:40px;    padding-left:30px; padding-right: 30px;}
    .history-list{float: none; width: 100%; padding-left: 10vw;}
    .title-board > strong{padding-top: 30px;}
    .su-con dl{width: 50%;}
    .su-con dl:nth-last-of-type(3){border-bottom: 1px dashed #ccc;}
    .area-double > .left-area, .area-double > .right-area{float: none; width: 100%; padding: 0px; position: relative;}
    .area-double > .right-area{margin-top: 30px;}
    .area-double.fixed-area > .left-area, .area-double.fixed-area > .right-area{float: left; width: 50%; position: relative;}
    .area-double.fixed-area > .left-area{padding-right: 7px;}
    .area-double.fixed-area > .right-area{padding-left: 7px;}
    .area-double.fixed-area > .right-area{margin-top: 0px;}
    .top-header + .content .area-double{display: inline-flex; align-items: stretch;}
    .top-header + .content .area-double .con-box{align-items: stretch; height: calc(100% - 120px);}
    .top-header + .content .area-double > .left-area,.top-header + .content .area-double > .right-area{width: 50%;}
    .top-header + .content .area-double > .left-area{padding-right: 12px; float: left;}
    .top-header + .content .area-double > .right-area{padding-left: 12px; float: left; margin-top: 0px;}
    .area-double.center-arr:before{display: none;}
    .area-double.center-arr > .left-area:before{content:""; display: block; position: absolute; left:50%; bottom:0px; margin-left: -8px; margin-bottom:-34px; background: url("../images/center-arr.png") no-repeat center center; width: 16px; height: 44px; transform: rotate(90deg);}
    .top-header + .content .area-double > .left-area:before{display: none;}
    .top-header + .content .area-double.center-arr:before{display: block;}
    .login-group{left:50%; margin-left:-250px; }
    .v-area{background-size: auto 40vw;}
    .v-area1{background: none}
    .addr{padding-left: 20px; padding-right: 20px; text-align: center;}
    .search-box{padding-right: 180px;}
    address{margin-bottom: 5px;}
    .phone > span{background-position: left top 4px;}
    .all-menu{right:20px;}
    header > div.header-con{height: 95px;}
    header h1{margin-left: 20px;}
    .header-con nav ul{display: none;}
    header{min-width: 10px;}
    .content-header h2:before{
        top: 85px;
        background-size: 80% auto;
    }
    /*.content{padding: 20px;}*/
    .sub-tab ul li a{}
    .sub-tab{padding: 0px;}
    .hak .sub-tab ul li a{font-size: 14px; letter-spacing: -2px;}
    .sub-tab ul li.on a{background-image: none;}
    .vi-list dl{float: none; width: 100%; margin-left: 0px !important; margin-right: 0px;}
    .gallery li{width: calc(25% - 10px);}
    .sub-menu{ left: 20px;top: 75px;width: calc(100% - 40px);}
    .login-group{width: 70vw; margin-left: 15vw; left:0px; max-width: 100%; min-width: 10px;}
    .cj{right: 20px;}
    .stp{max-width:90vw; margin-left: 5vw;}
    .card-group{padding-left: 20px; padding-right: 20px;}
    .hak-logo{display:block; margin-left:25px;}

    /* 시민대학 */
    .citizen-box {gap: 0 10px;}
    .citizen-item .icon{width:60%}
}
@media screen and (max-width: 768px){
    .open-su{padding:0px;}
    .open-su h2{text-align:center; width:100%; left:0px; top:0px; position:relative; border-bottom:1px solid #3da998; padding-bottom:15px;}
    .open-su h2 br{display:none;}
    .open-su li{float:none; padding-left:10px;}
    .s-top a.hak-go{display:block;}
    .hak-pop{width:calc(100vw - 7vw); box-sizing:border-box;  left: auto; right:2vw; top: 220px;}
    .vision{padding-right:0vw; background:none;}
    .su-con dl{width: 100%;}
    .su-con dl:nth-last-of-type(2){border-bottom: 1px dashed #ccc;}
    .paging.large{display: none;}
    .paging.small{display: block !important;}
    .paging.small input{display: inline-block;
        width:60px;
        text-align: center;
        margin-right: 4px;
        height: 30px;
        background-color: rgba(0,0,0,0.04);
        border-radius: 80px;}
    .history-list dd > strong{display: block; float: none;margin-bottom: 20px;}
    .history-list dd em:first-child{margin-left: 0px;}
    .history-list dd em{margin-left: 0px;}
    .history-list dd > strong:before{display: none;}
    .login-group{width: 80vw; margin-left: 10vw; padding: 10vw;}

    .v-area1{background-image: none;}
    .v-area{background-image:none;}

    .footer-list > div:first-child ul li:last-child{display: none;}
    .title-txt{margin-bottom:40px}
    .title-txt div{margin-bottom:30px}
    .title-txt .title-box > p.ttxt{font-size: 25px; font-weight: 700; line-height:25px; margin-bottom:20px;}
    .sub-tab{display: none;}
    .content-header{min-height:170px !important;}

    .search-box{padding-right: 40px;}
    .search-box > dl.all-col{width: calc(100% - 0px) !important;}
    .search-box .btn-group{position: relative; left:0px; right: auto; width: 100%; max-width: 500px; margin: 0 auto; top:10px !important; padding-top: 10px;}
    .search-box .btn-group:after{content:""; display: block; clear: both;}
    .search-box .btn-group button{width:calc(50% - 3px); margin-left: 6px !important; margin-right: 0px !important; float:left; padding-top: 8px !important; padding-bottom: 8px !important;  margin-top:0px !important; }
    .search-box .btn-group button:first-child{margin-left: 0px !important;}
    .su-list > li > a > div{display: block; width: 100%;}
    .su-list > li > a > div:last-child{width: 100%;}
    .com-name{text-align: left; display: block; width: 100%;}
    .com-name br{display: none;}
    .su-num span{display: inline-block; margin-right: 10px;}
    .su-list > li > a > div{padding: 10px 20px;  border:0px;}
    .su-list > li > a > div:first-child{position: absolute; left:0px; top:calc(50% - 44px); width: 70px;}
    .su-list > li > a > div:last-child{border-top: 1px solid rgba(0,0,0,0.1);}
    .su-list > li > a > div:nth-child(2){padding-left: 20px; box-sizing: border-box; border-left:1px solid #ddd; width: calc(100% - 70px); margin-left: 70px;}
    .day-list > span{margin-bottom: 4px;margin-top: 4px;}
    .su-list > li > a{display: block; position: relative;}
    .su-title{margin-bottom: 13px;}
    .su-title span{display: block; margin-top: 5px;}
    .multi-comp > *[class*="wd"],.multi-comp > *:first-child[class*="wd"]{width: 100% !important;}
    .tab{border: 0px; border-top: 1px solid #ccc !important;}
    .tab li{width:50% !important;}
    .tab li a{ border-bottom: 1px solid #ccc !important; padding: 12px 17px !important;}
    .tab ul li.active a{border-color:#f88d27 !important; }
    .tab li:nth-child(odd) a{border-left:1px solid #ccc !important;}
    .tab li:nth-child(even) a{border-right:1px solid #ccc !important; border-left: 0px !important;}
    .tab ul li a{ border-right: 1px solid #ccc !important;}
    .tab ul li.active a:before{display: none;}
    .tab:before{display: none;}
    .seup .tab ul li.active a{border-color:#7ebd25 !important; }
    .dam .tab ul li.active a{border-color: #3da998 !important;}
    .info-box{padding-left: 35px; background-image: none !important;}


    .user-btn a{width: 25px; height: 25px; border-radius: 0px; }
    .user-btn a.logout{background: url("../images/m-logout.png") no-repeat center center;}
    .user-btn a.admin-page{background: url("../images/m-admin.png") no-repeat center top 4px;}
    .user-btn a.my-page{background: url("../images/m-my.png") no-repeat center top 5px;}
    .user-btn a.join{background: url("../images/m-join.png") no-repeat center top 4px;}
    .user-btn a.login{background: url("../images/m-login.png") no-repeat center center;}
    .user-area button, .user-area a{margin-left: 10px;}
    .user-area{top: 33px; right: 64px;}
    .content-header .location{padding-top: 20px;}
    .content-header h3{font-size: 38px;}
    .icon-list li{float: none; width: 100%;    padding: 18px;
        float: none;
        width: 100%;
        color: #fff;
        background-color: #998873;
        text-align: left;
        margin-bottom: 30px;
        min-height: 55px;
        padding-left: 65px;
        border-radius: 80px;
        background-image: none;
    }
    .icon-list li br{display: none;}
    .icon-list li:before{width: 100%; height: 45px; background-size: auto 70%; display: inline-block; position: absolute; width:45px; background-color: rgba(255,255,255,0.2); top:50%; margin-top: -23px; left:5px;}
    .team-group .team:before{width: 100%; height: 50px; background-size: auto 70% !important;}
    .team-group .team{padding:0px; padding-top: 60px;}
    .team-group .team strong{width: auto; padding-left: 25px;}
    .team-group .team span{display:block; width: 100%; text-align: left; float: none !important; top:0px !important; padding: 25px;}
    .team-group .team span *{vertical-align: middle;}
    .team-group .team span:last-child:before{}
    .team-group .team span.phone-num{padding: 15px 25px; padding-top: 5px; border-top:1px dashed #9ca6ca;}
    .search-box.one-line{padding-right: 40px;}
    .search-box.one-line .btn-group{position: relative; right:0px; top:10px !important; max-width: 500px; padding-top: 15px;
        margin: 0 auto;}
    .search-box.one-line > .btn-group .search-btn{top:-2px; height: 35px;}
    .tab ul{}
    .sub-menu{  z-index: 9;  position: relative;     top: 20px; border-top:1px solid #ccc;    margin-top: -51px; width: 100%; left:0px;}
    .phone > span{background-image: none;}
    .gallery li{width: calc(33.333% - 10px);}

    .icon-list li:before{background-size: auto 50%; background-position: center center !important;}
    .icon-list li:after{content:""; display: block; position: absolute; left:50%; bottom:-30px; transform: rotate(90deg); width: 32px; height: 32px;    margin-left: -18px; background: url("../images/arr-icon.png") no-repeat center center;}
    .icon-list li:last-child:after{display: none;}
    .si-list dl{float: none; width: 100%; position: relative; min-height: 153px; border: 1px solid #ddd; padding: 10px; border-radius: 180px; margin-bottom: 20px;}
    .si-list:before,.si-list dt:after,.si-list dt:before{display: none;}
    .si-list dl dt{position: absolute; left:20px; top:20px; width: 110px; height: 110px;    line-height: 160px; font-size: 17px;    background-size: auto 35%;
        background-position: center top 20px;}
    .si-list dd{text-align: left; padding-left: 150px; padding-top: 20px;}
    .login-group{margin-bottom: 50px;}
    .trans-table{display: block; margin: 0px; padding:0px 0px; box-sizing: border-box; border-top: 0px !important;}
    .trans-table tr{border: 1px solid #ddd; margin-bottom: 10px; border-top: 2px solid #777;}
    .trans-table tr,.trans-table td,.trans-table tbody{display: block; height: auto !important;}
    .trans-table td{border: 0px !important; border-bottom: 1px dashed #ccc !important; padding: 20px 10px !important; text-align: left;}
    .trans-table thead,.trans-table th{display: none;}
    .trans-table .td-title{display: block; margin-bottom: 10px;}
    .trans-table td.center{text-align: left !important;}
    .su-con .trans-table{margin-left: 0px !important;}
    .icon-list.seub-list li{width: 100%;}


    .search-input-area{    border-radius: 50px;}
    .key{    width: 100%; display: none;
        float: none;
        position: absolute;
        left: 20px;
        top: 220px;}
    .search-input-area .search{width:95px; font-size: 0px; background-position: center center; height: 64px;}
    .hak-logo{display: none !important;}
    .ding-dong {display: none !important;}
    .ding-dong-2 {display:block !important;text-align: center;margin-bottom: 10px;margin-top:-30px;}
    .search-input-area input[type="text"]{height: 60px;  line-height: 60px; padding-right:110px; padding-left: 25px; max-width: 100%; text-indent: 0px;}
    .search-input-area select{height: 70px; line-height: 70px;}
    .serch-in .apply{float: none; width: 100%; max-width: 100%; margin-top: 15px; height: 54px; line-height: 54px; border-radius: 50px;}

    .search-input-area{float: none; max-width: 100%;}
    .search-con{ padding: 0 20px;}
    .s-top{padding-top: 180px;}
    .hak-info{display: none;}
    .main-area{border-top: 0px; background-color: #fff;}
    .main-area .main-list{ background-color: rgb(249, 249, 249);
        margin-top: 15px;
        float: none !important;
        width: calc(100% - 40px) !important;
        margin-left: 20px !important;
        border-radius: 10px;
        border-width: 1px;
        border-style: solid;
        border-color: rgb(221, 221, 221);
        border-image: initial;
        overflow: hidden;}
    .main-area .main-list + .main-list{border-top: 1px solid #ccc; margin-bottom: 15px;}
    .main-area .main-list .roll{right: 20px;}
    .main-area .main-list h2{left:20px;}
    .main-area .main-list + .main-list ul{padding-left: 160px;}
    .main-gnb{display: none;}
    .main-all{display: none;}
    .main-banner .left-link .menu-list .kang,
    .main-banner .left-link .menu-list .citizen,
    .main-banner .left-link .menu-list .hak-dong{background-size: 150% auto !important;}
    .dot-table *{display: block;}
    .dot-table th{display: none;}
    .dot-table td{display: block; width: 100%; position: relative; padding-left: 110px; box-sizing: border-box; min-height: 60px; }
    .dot-table tr:last-child td:last-child{border-bottom: 0px !important;}
    .dot-table td strong.td-title{display: block; position: absolute; left:0px; padding-left: 15px; top:20px; color:#3da998;}
    .dot-table td strong.td-title:before{content:""; display: block; width: 4px; height: 4px; background-color:#f88d27; position: absolute; left:0px; top:6px; }
    .vision strong{font-size: 17px;}

    /* 시민대학 */
    .citizen-box {flex-direction: column; gap:10px 0; margin: 50px 0;}
    .citizen-item {width: 100%; height: auto; padding:10px 30px;}
    .citizen-item > p{text-align:left; width:80%; font-size: 17px;}
    .citizen-item .icon {width:80px}

    .ct-circle{position:relative; display:block; align-items:flex-start; justify-content:center; width:100%; height:auto; background:none; margin:50px auto;}
    .ct-circle .tit{box-sizing:border-box; width:200px; height:200px; margin:0 auto 30px auto; background:#3B3A40; border-radius:50%; padding:10px;}
    .ct-circle .tit>div{font-size:25px;}
    .ct-circle .list{display:flex; flex-wrap:wrap; gap: 10px; justify-content: center;}
    .ct-circle .list>div{position:relative; font-size:17px; font-weight:400; text-align:center; width: 120px; height: 120px; line-height:120px;}
    .ct-circle .list>div:nth-child(1){right:0; left:0; top:0; bottom:0;}
    .ct-circle .list>div:nth-child(2){right:0; left:0; top:0; bottom:0; background:#683DD5; margin-left:0;}
    .ct-circle .list>div:nth-child(3){right:0; left:0; top:0; bottom:0;}
    .ct-circle .list>div:nth-child(4){right:0; left:0; top:0; bottom:0;}
    .ct-circle .list>div:nth-child(5){right:0; left:0; top:0; bottom:0;background:#683DD5; margin-left:0;}
    .ct-circle .list>div:nth-child(6){right:0;  left:0;top:0;  bottom:0;}

    .step-list .list-item{width: calc(50% - 35px); margin-top:10px; margin-bottom:10px;}
    .step-list .step-title{word-break: keep-all; font-size:16px;}
    .step-list .step-title br{display:none;}
    .step-list .circle p {font-size: 14px;}
}

@media screen and (max-width: 550px){
    .open-su h2{padding:10px; margin:0px; font-size:18px;}
    .hak-pop{top:150px;}
    .su-list.my-type .list-g{display: block;}
    .su-list.my-type > li > .list-g > div:first-child{display: block;}
    .su-list.my-type > li > .list-g > div:last-child{width: 100% ; display: block;}
    .su-list.my-type > li > .list-g > div:last-child .btn{display: inline-block; margin: 0 5px; min-width: 135px;}
    .su-list.my-type .float-right.info{float:none !important;}
    .my-type .right-area .su{margin-top:0px !important;}
    .main-area{}
    .trans-table{padding:0px !important;}
    .trans-table td{padding: 10px !important;}
    .title-txt strong{font-size: 8.2vw;}
    .title-txt span{font-size: 4.3vw;}
    .board-count span{top:0px;}
    .box-table *{display: block;}
    .box-table th{display: block; border-bottom: 0px !important;}
    .box-table td{display: block;}
    .main-banner .left-link .menu-list{margin-bottom: 0px;}
    .main-banner .left-link .menu-list .kang,.main-banner .left-link .menu-list .hak-dong{background-size: 100% auto !important;}
    .main-list{width: 100% !important; float: none; border-bottom: 1px solid #ddd;}
    .main-area .main-list + .main-list{margin-left: 20px !important;}
    .main-area .main-list + .main-list ul{padding-left: 15px;}
    .login-area .hak-info{display: none;}
    .serch-in{ padding:0 20px;margin-bottom: 40px;}
    .main-banner{padding: 0px;}
    .link-list{border-top: 1px solid #ddd;}
    .main-banner .left-link .menu-list a{min-height: 70px; line-height: 70px;}
    .main-banner .left-link{background-color: #fff;}
    .main-banner .left-link .menu-list .citizen{
        width: calc(100% - 40px) !important;
        float: none;
        display: block;
        margin: 10px 0px;
        margin-left: 20px;
        border-radius: 7px;
    }
    .main-banner .left-link .menu-list .hak-dong{
        width: calc(100% - 40px) !important;
        float: none;
        display: block;
        margin: 10px 0px;
        margin-left: 20px;
        border-radius: 7px;
    }
    .main-banner .left-link .menu-list .kang{
        width: calc(100% - 40px) !important;
        float: none;
        display: block;
        margin: 10px 0px;
        margin-left: 20px;
        border-radius: 7px;}
    .main-banner .left-link .link-list li{float: none; width: 100%; border-bottom: 1px dashed #ccc;}
    .main-banner .left-link .link-list li a{padding-top: 0px; padding: 35px 0; padding-left:110px; text-align:left; background-color: #fff;  background-position: left 30px center !important; font-size: 18px;}

    .main-area .main-list h2{position: relative; left:0px; top:0px;  border-bottom: 1px solid #ddd; background-color: #fff !important; background-position: left 15px center !important; padding-left: 55px !important;}
    .main-gnb{display: none;}
    .main-search h1{ top: 50px; left:0px; margin-left: 0px; width: 100%; text-align: center;}
    .main-search h1 a{display: block; text-align: center; width: 100%;}
    .main-search h1 img{max-width: 60vw; display: inline-block;}
    .s-top{padding-top: 150px;}

    .main-area .main-list ul{padding-left: 18px;}
    .main-area .main-list .roll{top:8px; margin-top: 0px; right:15px;}
    .main-banner .right-link .map-search{max-width: 100%;}
    .main-banner .right-link .map-search > span.search-map input{border-radius: 50px;}
    .main-banner .left-link .link-list li a br{display: none;}
    .main-banner .left-link{margin-bottom: 0px;}

    .main-banner .right-link{ padding-bottom: 340px;}
    .main-banner .right-link .main-map{top: 190px;  margin-right: -155px;  right: 50%;}
    .map-search-title{display: none;}
    .main-banner .right-link h2{ max-width: calc(100% - 0px); background-size: 200% auto !important;}
    .su-view h3{padding-right: 10px; padding-bottom: 10px;}
    .su-view .su-title{position: relative; right: auto; left:0px; top:0px;}
    .join-t1{padding-left: 20px; padding-right: 20px;}
    .title-history h2{font-size: 15vw;}
    .title-history strong{    font-size: 6.5vw;}
    .title-txt .title-box > p.ttxt{font-size: 5.5vw;}
    .gallery li{width: calc(50% - 10px);}
    .history-list ol:before{display: none;}
    .history-list{padding-left: 0px;}
    .history-list dd > strong{    margin: 0 auto; margin-bottom: 20px;}
    .history-list dd em,.history-list dd span{float: none; display: inline;}
    .history-list dd {text-align: center; border: 1px solid #ddd; padding: 10px; margin-bottom: 30px; border-radius: 20px; }
    .si-list dl dt{position: relative; left:0px;}
    .si-list dl{border-radius: 10px;}
    .si-list dl dd{padding-left:0px; text-align: center;}
    .img-list li{    width: calc(50% - 20px);}
    .img-list li:first-child, .img-list li:nth-child(3n + 1){margin-left:30px !important;}
    .img-list li:nth-child(odd){margin-left: 0px !important;}
    .sub-img-tab ul li a{ height: 30px;  line-height: 30px;}
    .sub-img-tab ul li.on a:before{display: none;}
    .sub-img-tab ul li{margin-bottom: 2px;}
    .login-group{padding:10vw;}
    .login-group input{height: 10vw; line-height: 10vw;}
    .login-group .join-btn, .login-group button{height: 13vw; line-height: 13vw;}
    .log-btn a{position: relative; right:auto; display: block; margin-top: 10px;}
    .log-btn{margin-bottom: 15px;}
    .cj{display: none;}
    .login-group .join-btn, .login-group button{font-size: 5vw;}
    .login-group input{font-size: 5vw;}
    .card{width: 100%; margin-left: 0px !important; margin-bottom: 20px;}
    .sms{max-width: 90vw;}
    .join-btn-group button, .join-btn-group a{width: 90vw; margin: 0px; margin-bottom: 10px; display: inline-block;}
    .certification > div input{width: 90vw; margin-left: 5vw;}
    .join-form h2{font-size: 13vw;}
    .main-page .mobile-menu-on{right: 38px; top: 73px;}
    .main-search h1 a{    text-align: left;
        text-indent: 40px;}
    .s-top {
        padding-top: 110px;
    }
    .main-search h1{ top: 18px; border-bottom: 1px solid #ddd; padding-bottom: 10px;}
    .main-area .main-list h2{left:0px !important;}
    .txt-small{font-size:15px !important;}
    .aca-list{}
    .aca-list > li{display: block;}
    .aca-list > li > div{display: block; width: 100% !important; border-bottom: 1px solid #ddd; border-left: 0px !important;}
    .ding-dong-2 {margin-top:0px !important;}

    .step-list { display:flex; margin-left: 0; flex-direction: column; width: 100%;}
    .step-list .list-item .step-title {padding: 0 0 10px 0; height: auto;}
    .step-list .list-item{width: 100%; margin:10px 0;}
    .step-list .list-item:before{display:none}
}
@media screen and (max-width: 380px){
    .calendar-table tbody td{padding:13px;}
    .calendar-table thead th{padding:13px;}
    .title-txt strong{font-size: 34px;}
    .title-txt span{font-size: 19px;}
    .main-page .mobile-menu-on{right: 38px; top: 67px;}
    .join-form h2{font-size: 17vw;}

    .login-group h2{top:-210px; font-size: 17vw;}
    .join-form h2 + p{padding: 0 20px;}
    .login-group h2 + p{top: -110px;}
    .gallery li{width: calc(100% - 10px);}
    .search-box > dl > dt{position: relative; text-align: left;}
    .search-box > dl{padding-left: 0px;}
    .footer-list{display: none;}
    .down-btn{font-size: 15px;}
    .paging a{display: none;}
    .su-list > li > a > div:first-child{position: relative; top:0px;}
    .su-list > li > a > div:nth-child(2){width: 100% !important; border-left:0px; margin-left: 0px; }
    .su-list > li > a > div:first-child{width: 100%; border-bottom: 1px solid #ddd;}
    .vi-list dl{padding-left: 27px; border-radius: 30px;}
    .vi-list dl dt{position: relative; left:0px; top:0px;      height: 56px;  line-height: 56px;    width: 100%;}
    .vi-list dl dd ul{margin-top: 20px;}

}
@media screen and (max-width: 360px){
    header h1 a{max-width:150px;}
    header > div.header-con{height:75px;}
    .user-area{top:25px;}
    .seup .mobile-menu-on, .hak .mobile-menu-on, .seub .mobile-menu-on, .dam .mobile-menu-on, .go .mobile-menu-on, .my .mobile-menu-on{top: 18px;}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .search-input-area select{padding-left: 30px;}
    .main-banner .right-link h2 .more{top:-22px;}
}

@media screen and (max-width: 989px) {
    .error-page{left: 0; top: 50%; margin-left: 0; margin-top: -250px; max-width: 100%; padding-top: 35vw;}
}
@media screen and (max-width: 540px) {
    .error-page{background-size: 80% !important; left: 0; top: 50%; margin-left: 0; margin-top: -250px; max-width: 100%; padding-top: 40vw;}
}

.notice {background-color: #3da998; color: #fff; padding: 3px 6px; border-radius: 4px; }

.float-right {float:right !important;}
.float-left {float:left !important;}


/* margin */
.ma0 { margin: 0 !important; }
.mt0 { margin-top: 0 !important; }
.ml0 { margin-left: 0 !important; }
.mr0 { margin-right: 0 !important; }
.mb0 { margin-bottom: 0 !important; }

.ma5 { margin: 5px !important; }
.mt5 { margin-top: 5px !important; }
.ml5 { margin-left: 5px !important; }
.mr5 { margin-right: 5px !important; }
.mb5 { margin-bottom: 5px !important; }

.ma10 { margin: 10px !important; }
.mt10 { margin-top: 10px !important; }
.ml10 { margin-left: 10px !important; }
.mr10 { margin-right: 10px !important; }
.mb10 { margin-bottom: 10px !important; }

.ma15 { margin: 15px !important; }
.mt15 { margin-top: 15px !important; }
.ml15 { margin-left: 15px !important; }
.mr15 { margin-right: 15px !important; }
.mb15 { margin-bottom: 15px !important; }

.ma20 { margin: 20px !important; }
.mt20 { margin-top: 20px !important; }
.ml20 { margin-left: 20px !important; }
.mr20 { margin-right: 20px !important; }
.mb20 { margin-bottom: 20px !important; }

.ma30 { margin: 30px !important; }
.mt30 { margin-top: 30px !important; }
.ml30 { margin-left: 30px !important; }
.mr30 { margin-right: 30px !important; }
.mb30 { margin-bottom: 30px !important; }

/* padding */
.pa0 { padding: 0 !important; }
.pt0 { padding-top: 0 !important; }
.pl0 { padding-left: 0 !important; }
.pr0 { padding-right: 0 !important; }
.pb0 { padding-bottom: 0 !important; }

.pa5 { padding: 5px !important; }
.pt5 { padding-top: 5px !important; }
.pl5 { padding-left: 5px !important; }
.pr5 { padding-right: 5px !important; }
.pb5 { padding-bottom: 5px !important; }

.pa10 { padding: 10px !important; }
.pt10 { padding-top: 10px !important; }
.pl10 { padding-left: 10px !important; }
.pr10 { padding-right: 10px !important; }
.pb10 { padding-bottom: 10px !important; }

.pa15 { padding: 15px !important; }
.pt15 { padding-top: 15px !important; }
.pl15 { padding-left: 15px !important; }
.pr15 { padding-right: 15px !important; }
.pb15 { padding-bottom: 15px !important; }

.pa20 { padding: 20px !important; }
.pt20 { padding-top: 20px !important; }
.pl20 { padding-left: 20px !important; }
.pr20 { padding-right: 20px !important; }
.pb20 { padding-bottom: 20px !important; }

.pa30 { padding: 30px !important; }
.pt30 { padding-top: 30px !important; }
.pl30 { padding-left: 30px !important; }
.pr30 { padding-right: 30px !important; }
.pb30 { padding-bottom: 30px !important; }

/* 강의실관리 > 시간표 조회 > 달력 일정 관련 */
.k-event {background-color:transparent !important; border-width:0px !important; color:black !important; padding-right:0 !important;}
.k-event-actions {margin-top:1px !important;}
.event-item {box-sizing: border-box !important; width: 100%; height: 100%; font-size: 12px; padding: 0px 5px; background: transparent; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; border-radius:3px; border-width:2px; border-color:gray; border-style:none;}
.event-item:hover {background-color: lightgray;}
.event-item .btn {display: inline-block; font-size: 12px; padding: 3px 0px;border:0; border-radius: 3px; width: 49px; height: 15px; line-height: 15px;}
.group-header {width:110px; height:100%; display:flex; align-items:center; justify-content:center; font-family: 'Nanum Gothic', 'Noto Sans KR', sans-serif; font-size:16px;}
.k-scheduler-table th.k-scheduler-group-cell {padding:0;}
.colorBlue {background: #EBF0F9; color: #0e6fb1;}
.colorGreen {background: #dff6ec; color: #02877a;}
.colorSkyBlue {background: #DBF0FC; color: #009ac3;}
.colorGray {background: #F3F5F8; color: #747881;}
.colorRed {background: #FBE9E9; color: #d71d1d;}

/* 학습비면제대상 */
.expt-button-group::after {content: ""; display: block; clear: both;}
.expt-button-group form {float: left; margin-right: 5px;}
.auth-ok {display: block; font-size: 13px; color: #d71d1d;}

.clearfix {content: ""; display: block; clear: both !important;}

.label {
    display: inline-block;
    padding: 4px 10px;
    font-size: 1.5rem;
    font-weight: 600;
    border-radius: 12px;
    color: #fff;
}

/* 상태별 색상 */
.label-cancel {
    background-color: #e74c3c; /* 빨강 - 취소 */
}

.label-success {
    background-color: #27ae60; /* 초록 - 선정완료 */
}

.label-pending {
    background-color: #f39c12; /* 주황 - 신청완료 */
}