/* button */
.btn{width:150px;height:45px;border:1px solid #c0c0c0;line-height:45px;display:inline-block;text-align:center;font-size:1.125rem;color:#444;transition:all .3s;}
.btn--default:hover{background:#04629a;color:#fff;}

/* badge */
.badge{display:inline-block;text-align:center;line-height:40px;color:#fff;font-size:1.125rem;text-align:center;padding:0 1.125em;background:#04629a;vertical-align:middle;}
@media screen and (max-width:768px) {
    .badge{line-height:30px;padding:0 1em;font-size:1rem;}
}
/* select */
.select{box-sizing:border-box;height:50px;border:1px solid #c0c0c0;position:relative}
.select select{width:100%;height:100%;padding:0 1em;vertical-align:top;}
.select:after{content:'';display:block;width:5px;height:5px;position:absolute;right:1em;top:20px;border:1px solid #666;border-width:0 1px 1px 0;transform:rotate(45deg);}
.select--sort{width:200px;}
.select--search{height:40px;line-height:40px;}
.select--search:after{top:15px;}
@media screen and (max-width:768px) {
    .select--sort{width:100%;height:40px;}
    .select{height:40px;}
    .select:after{top:15px;}

}
/* select-custom */
.select--custom{position:relative;width:200px;}
.select--custom__btn{height:60px;width:100%;padding:0 1em;background:url(../images/sub/select-plus.png) no-repeat calc(100% - 1em) center;text-align:left;outline-width:0;cursor:pointer;border-right:1px solid #e2e2e2;}
.select--custom__btn:hover{background:url(../images/sub/select-plus.png) #f9f9f9 no-repeat calc(100% - 1em) center;height:59px;}
.select--custom__listbox{position:absolute;left:0;top:60px;padding:1em;box-sizing:border-box;border:1px solid #e2e2e2;width:100%;background:#fff;display:none;border-top:0;z-index:200;}
.select--custom__link{font-size:15px;line-height:2em;}
.select--custom__link:hover{color:#04629a;}
@media screen and (max-width:1200px) {
    .select--custom__btn{height:50px;}
    .select--custom__btn:hover{height:49px;}
    .select--custom__listbox{top:50px;}
}
@media screen and (max-width:768px) {
    .select--custom__btn{height:40px;}
    .select--custom__btn:hover{height:39px;}
    .select--custom__listbox{top:40px;}

}
/* pagenation */
.pagination{display:flex; justify-content:end;}
.pagination a{vertical-align:middle;}
.pagination__numberbox{display:inline-block;vertical-align:middle;margin:0 .5em;}
.pagination__arrow{display:inline-block;width:40px;height:40px;text-indent:-9999px;border:1px solid #c0c0c0;box-sizing:border-box;}
.pagination__arrow.pagination__arrow--left{background:url(../images/sub/arrow-left.png) no-repeat center;}
.pagination__arrow.pagination__arrow--right{background:url(../images/sub/arrow-left.png) no-repeat center;transform:rotate(180deg);}
.pagination__arrow.pagination__arrow--first{background:url(../images/sub/arrow-first.png) no-repeat center;}
.pagination__arrow.pagination__arrow--last{background:url(../images/sub/arrow-first.png) no-repeat center;transform:rotate(180deg);}
.pagination__numberbox a{line-height:40px;margin:0 .5em;display:inline-block;}
.pagination__numberbox a.active{color:#04629a;font-weight:600;}
@media screen and (max-width:1200px) {
    .pagination{width:310px;float:none;margin:0 auto;}
}
@media screen and (max-width:640px) {
    .pagination { justify-content: center; }
}


.search__form{width:230px;border:1px solid #c0c0c0;height:40px;box-sizing:border-box;margin-left:1em;}
.search__form input{width:calc(100% - 40px);height:100%;padding:0 1em;box-sizing:border-box;}
.search__form button{width:40px;height:100%;background:url(../images/sub/board-search-icon.png) #f6f6f6 no-repeat center;overflow:hidden;text-indent:-9999px;}
@media screen and (max-width:768px){
    .search__form{width:180px;}
}

.tabbox{height:90px;border-bottom:1px solid #d9d9d9;}
.tabbox:after{clear:both;display:block;content:'';}
.tabbox button{float:left;text-align:center;height:100%;position:relative;outline-width:0;}
.tabbox button:after{content:'';display:block;width:1px;height:1em;position:absolute;right:0;top:50%;transform:translateY(-50%);background:#d9d9d9;}
.tabbox button:last-child:after{display:none;}
.tabbox button.active span{border-bottom:4px solid #1b5eb8;height:90px;display:inline-block;line-height:90px;box-sizing:border-box;width:100%;text-align:center;font-weight:600;color:#1b5eb8;}
.tabbox a{float:left;text-align:center;height:100%;position:relative;outline-width:0;display:block;line-height:90px;}
.tabbox a:after{content:'';display:block;width:1px;height:1em;position:absolute;right:0;top:50%;transform:translateY(-50%);background:#d9d9d9;}
.tabbox a:last-child:after{display:none;}
.tabbox a.active span{border-bottom:4px solid #1b5eb8;height:90px;display:inline-block;line-height:90px;box-sizing:border-box;width:100%;text-align:center;color:#1b5eb8;font-weight:600;}
.tabbox span a{ float:none; width:100%; line-height:90px; color:inherit; }

.tabbox a:not(.active) span:after,
.tabbox button:not(.active) span:after{position:absolute;bottom:0;left:50%;width:0%;height:4px;background:#1b5eb8;top:auto;transform:none;content:'';transition:all .3s;}
.tabbox a:not(.active) span:before,
.tabbox button:not(.active) span:before{position:absolute;bottom:0;right:50%;width:0%;height:4px;background:#1b5eb8;top:auto;transform:none;content:'';transition:all .3s;}

.tabbox a:not(.active):hover span:after,
.tabbox button:not(.active):hover span:after{width:50%}
.tabbox a:not(.active):hover span:before,
.tabbox button:not(.active):hover span:before{width:50%}

.tab-col-4 button{width:25%;}
.tab-col-3 button{width:33.3333%;}
.tab-col-5 button{width:20%;}
.tab-col-10 button{width:10%;}
.tab-col-2 button{width:50%;}
.tab-col-4 a{width:25%;}
.tab-col-3 a{width:33.3333%;}
.tab-col-2 a{width:50%;}
.viewbox{display:none;}
.viewbox.view-1{display:block;}
.main__notice-body .tab-view{display:none;}

@media screen and (max-width:768px) {
    .tabbox { height: auto; border-bottom: 0; }
    .tabbox button { border-bottom: 1px solid #d9d9d9; }
    .tabbox button { height: 50px; }
    .tab-col-10 button { width: 20%; }
    .tab-col-10 button:nth-child(5n+5):after { display:none;}
    .tab-col-5 button { width: 33.333%; }
    .tab-col-4 button { width: 50%; }
    .tabbox.tab-col-4 button:nth-child(2n):after { display: none; }
    .tabbox a.active span { height: 50px; line-height: 50px; }
    .tabbox a span,
    .tabbox button span { height: 50px; line-height: 50px; display: inline-block; width: 100%; text-align: center; position: relative }
    .tabbox button.active span { height: 50px; line-height: 50px; display: inline-block; width: 100%; text-align: center; position: relative }
    .tabbox span a { line-height: 50px; }
}

@media screen and (max-width:550px) {
    .tabbox a.active span ,
    .tabbox a span,
    .tabbox button span ,
    .tabbox button.active span ,
    .tabbox span a { line-height: 17px; display:flex;align-items:center; justify-content:center;}
    .tab-col-10 button { width: 25%; }
    .tab-col-10 button:nth-child(5n+5):after { display: inline-block; }
    .tab-col-10 button:last-child:after { display: none; }
    .tab-col-10 button:nth-child(4n+4):after { display: none; }

}