@charset "utf-8";
/* button */
button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius:0;
    padding: 0px;
    border: 0px;
    font-weight: normal;
    background-color: transparent;
    cursor: pointer;
    box-sizing:border-box;
}
.btn {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border-radius:0;
    text-align: center;
    word-wrap: break-word;
    word-break:break-all;
    cursor: pointer;
    box-sizing:border-box;
    /* btn-basic style merge */
    background-color: #787777;
    color:#fff;
    padding:0 10px; /* 0 20 삭제 -> 특정그룹내의 버튼은 pc에서만 min-width로 대체 */
    font-family: "Noto Sans";
    font-size: 15px;
    font-weight: 400;
    height:36px;
    line-height:36px;
}
/*
.btn:hover { background-color: #ccc;}*/
.btn:focus,
.btn:hover {
	background-color:#666;
	color:#fff;
    -webkit-transition-property: background-color, color, opacity;
    -o-transition-property: background-color, color, opacity;
    transition-property: background-color, color, opacity;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.btn > span {
    display: inline-block;
    position:relative;
    height: auto;
    line-height:1.2;
    z-index:2;
    vertical-align:middle;
}
.search-form-cols .btn:focus > span,
.btn:focus > span{ color:#000; } 

.btn:hover span, .btn:focus span { color:#fff;}
.btn.btn-primary {    background-color: #1e9fd5;color: #fff;}
.btn.btn-primary:hover,
.btn.btn-primary:focus{    background-color: #0b68b1;}
.btn.btn-primary1 {    background-color: #0067b6;color: #fff;}
.btn.btn-primary1:hover,
.btn.btn-primary1:focus{    background-color: #00489c;}
.btn.btn-primary2 {    background-color: #1c236c;color: #fff;}
.btn.btn-primary2:hover,
.btn.btn-primary2:focus{    background-color: #273198;}
.btn.btn-secondary {    background-color: #555;    color: #fff; border:2px solid transparent;}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus{ background:#fff; border-color: #383838; color:#383838; }
.btn.btn-secondary2 {    background-color: #222;    color: #fff;}
.btn.btn-secondary2:hover,
.btn.btn-secondary2:focus{    background-color: #131313;}
.btn-basic[disabled],
.btn[disabled] {    background-color: #aeaeae;color: #555;}

.btn-float {    overflow:hidden;}
.btn-float:after {    content: "";    display: block;    clear: both;}
.btn-float .col {    float: left;}
.btn-float .col.right {    float: right;}

/* btn-flex :pc에서 full width일 경우에만 사용중 */
.btn-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width:100%;
}
.btn-flex .btn { display: block;width: 100%;}
.btn-fluid .btn {  width: 100%;}

/* 게시판/DEV 하단 버튼 그룹*/
.board-btn-wrap { display:block;overflow:hidden;position:relative;margin:30px auto;text-align:center;}
/*.board-btn-wrap [class^="btn"],*/
.board-btn-wrap .btn {display:inline-block;min-width:150px;height:44px;line-height:42px;text-align:center;vertical-align:middle;}
.board-btn-wrap .btn:focus{ color:#000; background:#fff; border:2px solid #000; }

.application-write .board-btn-wrap .btn:focus{ background:#fff !important; }
.application-write .board-btn-wrap .btn:focus span{ color:#000 !important;  }
/*게시판/DEV 큰버튼그룹 */
.board-btn-wrap .btn.btn-large {
	min-width:200px;
    height: 60px;
    line-height: 58px;
    font-size: 18px;
    font-weight:400;
}



/* 컨텐츠나 범용 그룹 */
.btn-wrap {display:block;position:relative;overflow:hidden;margin:30px auto;text-align:center;}
.btn-wrap .btn { min-width:200px;height:44px;line-height:42px;text-align:center;margin:0 auto;padding:0 20px;vertical-align:middle;box-sizing:border-box;}
/*
.btn-wrap [class^="btn"] ,
.btn-wrap .btn{display:inline-block;position:relative;} /* /* form-input, form-select 등 height 삭제하면서 함께 삭제 min-width:150px;height:44px;line-height:44px;*/

@media all and (min-width:769px){
    .board-btn-wrap .btn + .btn { margin-left:4px;}
    .btn-wrap .btn + .btn { margin-left:4px;}
}
/* btn-flex : pc에서 100%영역 활용시에 사용 mobile에서는 btn3까지만 flex */
.btn-flex.btn-wrap
.btn-flex.btn-group,
.btn-flex.board-btn-wrap{ overflow:visible;width:100%;display: -webkit-box;
    display: -ms-flexbox;
    display: flex;box-sizing:border-box;}

.btn-flex.btns2 .btn{ float:left;width:calc(50% - 2px);margin:0 4px 0 0;}
.btn-flex.btns2 .btn:nth-child(2n){ margin-right:0;}
.btn-flex.btns3 .btn{float:left;width:calc(33.333% - 2.6666px);margin:0 4px 0 0;}
.btn-flex.btns3 .btn:nth-child(3n){ margin-right:0;}
.btn-flex.btns4 .btn{ float:left;width:calc(25% - 3px);margin:0 4px 0 0;}
.btn-flex.btns4 .btn:nth-child(4n){ margin-right:0;}

@media all and (max-width:1024px) {
    .btn-wrap {display:block;overflow:hidden;}
    .btn-wrap .btn,
    .board-btn-wrap .btn,
    .board-btn-wrap .btn.btn-large{ height:auto;padding:10px 16px;line-height:1;vertical-align:middle;}
    .btn-wrap .btn,
    .board-btn-wrap .btn,
    .board-btn-wrap .btn.btn-large {min-width:140px;}
    .btn-float .col,
    .btn-float .col.right { display:block;float:none;width:100%;text-align:center;}
    .btn-float .col + .col {margin-top:10px;}
    .content-body .btn-wrap { width:100%;}
}
@media all and (max-width:1024px) {
    /* btn-group 1024부터 영역100%기준 버튼width **/
    .btn-group{ /*display:block;overflow:hidden;*/width:100%;}

    .btn-group{ display:block;overflow:hidden;width:100%;}
    .btn-group.btns2 .btn,
    .btn-group.btns3 .btn,
    .btn-group.btns4 .btn { float:left;min-width:0;margin-right:4px;margin-left:0;}
    .btn-group.btns3 .btn{ width:calc(33.333% - 4px);}
    .btn-group.btns4 .btn{width:calc(25% - 3px);}
    .btn-group.btns2 .btn { width:calc(50% - 2px);}
    .btn-group.btns2 .btn:nth-child(2n),
    .btn-group.btns3 .btn:nth-child(3n),
    .btn-group.btns4 .btn:nth-child(4n){ margin-right:0;}

   /* .btn-wrap .btn,
    .board-btn-wrap .btn {padding:12px 16px;}*/
    .btn-group .fl,
    .btn-group .fr {display:block;width:100%;}

    /* btn-group btns3개까지는 flex */
    .btn-group,
    .btn-wrap,
    .btn-flex,
    .btn-flex.btn-wrap,
    .btn-flex.btn-group,
    .btn-flex.board-btn-wrap {
        overflow:visible;width:100%;display:flex;display: -webkit-box;
        display: -ms-flexbox;
        display: flex;}
    .btn-flex .btn { float:none;}
}
@media all and (max-width:768px) {
    .btn-wrap.btns4,
    .btn-flex.btns4,
    .btn-group.btn-flex.btns4,
    .btn-group.btns4 { display:block;overflow:hidden;width:100%;}
    .btn-group.btn-flex.btns4 { display:block;}
    .btn-group.btns4 .btn,
    .btn-flex.btns4 .btn { display:block;float:left;min-width:0;margin-right:4px;margin-left:0;width:49%;margin-bottom:4px;}
    .btn-group.btns4 .btn:nth-child(4n),
    .btn-flex.btns4 .btn:nth-child(2n){ margin-right:0;}
}
@media all and (max-width:480px) {
    .btn-flex,
    .board-btn-wrap.btn-group,
    .btn-wrap.btn-group,
    .btn-wrap.btn-flex,
    .board-btn-wrap.btn-flex{ display:block;overflow:hidden;}
    .btn-flex.btns2 .btn,
    .btn-flex.btns3 .btn,
    .btn-flex.btns2 .btn,
    .btn-flex.btns3 .btn,
    .btn-flex.btns4 .btn,
    .btn-group.btns2 .btn,
    .btn-group.btns3 .btn,
    .btn-group.btns4 .btn,
    .board-btn-wrap .btn,
    .btn-wrap .btn,
    .btn-flex .btn,
    .btn-group.btns4 .btn{width: 100%;margin-right:0;margin-bottom:4px;}
    /*.btn-group .btn:last-child {margin-bottom:0;}*/
}
@media all and (max-width:320px) {
    /*.btn-group.btn-flex .btn:last-child {margin-bottom: 4px;}*/
}

/* 이동버튼 */
.link-http > span {
    display: inline-block;
    position:relative;
    height: auto;
    padding-right: 19px;
    background-image:url("../image/layout/icon-linkHttp.png");background-size:10px 10px;background-repeat:no-repeat;background-position:100% 50%;
}
.btn.link-http span { height: auto;}
.btn.btn-primary.link-http > span,
.btn.btn-primary1.link-http > span,
.btn.btn-primary2.link-http > span,
.btn.btn-secondary.link-http > span,
.btn.btn-primary2.link-http > span {
    background-image:url(../image/common/icon-linkHttp-white.png);
}
.btn-go span:after {
    content:">";
    margin-left:10px;
    font-weight:300;
    font-size:10px;
}
.btn > span {display:inline-block;position:relative;height:auto;}
.btn.btn-download > span { display:inline-block;position:relative;height:auto;padding-right:18px;color:#fff;}
.btn.btn-download > span:after {
    content:"";
    display:block;
    overflow:hidden;
    position:absolute;right:0;top:50%;margin-top:-6px;
    width:11px;height:12px;
    background-image:url(../image/common/icon_file_down.png);
    background-repeat:no-repeat;
    background-position:0 50%;
}
.btn.btn-small.btn-download { height:auto;background-color:#888888;color:#fff;padding:2px 6px 1px 6px;line-height:1;}
.btn.btn-small.btn-download > span { line-height:1.2;}
.btn.btn-small.btn-download > span:after,
.btn.btn-download.btn-primary > span:after,
.btn.btn-download.btn-primary1 > span:after,
.btn.btn-download.btn-primary2 > span:after,
.btn.btn-download.btn-secondary > span:after,
.btn.btn-download.btn-secondary2 > span:after {
    background-image:url(../image/common/icon_file_down_white.png);
}

.btn.btn-view > span { display:inline-block;position:relative;height:auto;padding-right:22px;}
.btn.btn-view > span:after {
    content:"";
    display:block;
    overflow:hidden;
    position:absolute;right:0;top:50%;margin-top:-6.5px;
    width:13px;height:13px;
    background-image:url(../image/common/icon_file_view.png);
    background-repeat:no-repeat;
    background-position:0 50%;
}
.btn.btn-view.btn-primary > span:after,
.btn.btn-view.btn-primary1 > span:after,
.btn.btn-view.btn-primary2 > span:after,
.btn.btn-view.btn-secondary > span:after,
.btn.btn-view.btn-secondary2 > span:after {
    background-image:url(../image/common/icon_file_view_white.png);
}




/*
.gnb .linkHttp:after { content:"";display:block;overflow:hidden;position:absolute;top:50%;right:20px;margin-top:-5px;width:10px;height:10px;background-image:url("../image/layout/icon-linkHttp.png");background-repeat:no-repeat;background-position:0 0;background-size:100% auto;}
*/
.snb .linkHttp > span { display:inline-block;background-image:url("../image/layout/icon-linkHttp.png");background-repeat:no-repeat;background-position:right center;background-size:10px 10px;padding-right:22px;}
.gnb .link-http > span { height:auto;}
/*.gnb .link-http:after { content:"";display:block;overflow:hidden;position:absolute;top:50%;right:20px;margin-top:-5px;width:10px;height:10px;background-image:url("../image/layout/icon-linkHttp.png");background-repeat:no-repeat;background-position:0 0;background-size:100% auto;}
*/
.snb .link-http > span { display:inline-block;background-image:url("../image/layout/icon-linkHttp.png");background-repeat:no-repeat;background-position:right center;background-size:10px 10px;padding-right:22px;}


.board-data-list td .btn { height:26px;line-height:24px;background-color:#fff;border:1px solid #aeaeae;font-family:"malgun-gothic";font-size:14px;}