/* Add here all your CSS customizations */
/* 추가로 필요한 스타일 정의하면 됩니다 - kkm*/

.btns {margin:20px 0; text-align:right;}

/* table */
.table th {background-color:#ecedf0;}
.table tr:last-child {border-bottom:1px solid #ddd;}

/* Form - Bordered */
#searchFrm.form-bordered .form-group {border-bottom: 1px solid #eff2f7;padding-bottom: 7px;margin-bottom: 7px;}

/* validator 추가*/
.form-control.error {border-color: #a94442;}

[class^="hvr-"] {background: #e1e1e1;color: #666;cursor: pointer;line-height: 1.2em;margin: .4em;padding: 1em;text-decoration: none;	-webkit-tap-highlight-color: rgba(0,0,0,0);}

/* panel accordions open or collapse symbol */
.panel-heading .accordion-toggle:after {font-family: 'FontAwesome'; content: "\f0d7";  float: right; color: grey; }
.panel-heading .accordion-toggle.collapsed:after {  content: "\f0d8"; }

/* popup preview */
.popupPreview .pop-layer {display: none;position: absolute;top: 50%;left: 50%;/* width: 410px; */height: auto;background-color: #fff;border: 5px solid #3571B5;}
.popupPreview .pop-layer.top {border: none;border-bottom: 5px solid #3571B5;width: 100%;text-align: center;}
.popupPreview .pop-layer .pop-container {padding: 20px 25px;}


/*********************
* 2020.08.04 경기도 CMS 
*********************/
/* 공통 */
h3{margin-bottom:30px !important;}

html.no-overflowscrolling .nano > .nano-pane > .nano-slider{background:#ccc;}/* 스크롤 */

.sectionHead{overflow:hidden; background-color:#f7f7f7;  padding:15px 10px; box-sizing:border-box; padding-left:15px; border-top:2px solid #33406d; border-bottom:1px solid #cbcbcb;}

.boxHead{overflow:hidden; background-color:#f7f7f7; padding:20px 15px; box-sizing:border-box; border-top:2px solid #33406d; border-bottom:1px solid #cbcbcb; }

.sectionBody{overflow:hidden;}
.sectionBody .con{overflow:hidden; box-sizing:border-box; padding:10px;}
.sectionBody .footBox{overflow:hidden;  background-color:#f7f7f7; height:50px; line-height:50px; box-sizing:border-box; padding-left:15px; border-bottom:1px solid #33406d; border-top:1px solid #cbcbcb; text-align:center;}

/* sectionWrap */
.sectionWrap{overflow:hidden;}
.sectionWrap .sectionHead{overflow:hidden; background-color:#f7f7f7;  padding:15px 10px; box-sizing:border-box; padding-left:15px; border-top:2px solid #33406d; border-bottom:1px solid #cbcbcb;}
.sectionWrap .sectionBody{overflow:hidden; padding:20px; box-sizing:border-box; font-size:15px;}
.sectionWrap .sectionFoot{overflow:hidden; background-color:#f7f7f7;  padding:15px 10px; box-sizing:border-box; padding-left:15px; border-top:1px solid #cbcbcb; border-bottom:1px solid #33406d;}

/*  로고 */
.ggcms .logo-container{overflow:hidden; height:115px; width:100%; background-color:#FD640E; box-sizing:border-box; padding:35px 10px; position:relative;}
.ggcms .logo-container a{display:block;}
.ggcms .logo{padding:0px; margin:0px; box-sizing:border-box; float:initial; overflow:hidden; position:absolute; top:35px; left:35px;}
.ggcms .logo:after{border:initial;}
.ggcms .subLogoTit{color:#fff; display:inline-block; padding-left:15px; margin-left:90px; border-left:1px solid #eeeeee3b;}
.ggcms .subLogoTit .txt1{font-size:14px;font-weight:500; }
.ggcms .subLogoTit .txt2{font-size:20px;font-weight:500;}
/*** // 로고 ***/


/*+++/  leftmenu  /+++*/
.ggcms.fixed .sidebar-left{top:0px;}
html.no-overflowscrolling .sidebar-left .nano{background-color:#f0f0f0; box-shadow:initial; border-right:1px solid #ccc; box-shadow:inherit;}

/* 1단 메뉴 */
.ggcms .sidebar-left nav{padding-bottom:30px;}
.ggcms .sidebar-left nav > ul{margin-right:initial;}
.ggcms .sidebar-left nav ul  li > a:hover, .ggcms .sidebar-left nav ul  li > a:focus{background-color:#fff;}
.ggcms .sidebar-left nav ul  li > a{color:#333; font-size:16px; font-weight:500; height:55px; line-height:55px; padding:0px; padding-left:20px; border-bottom:1px solid #e4e4e4; background-color:#f0f0f0;}
.ggcms .sidebar-left nav ul  li > a span{color:#333; font-size:16px; font-weight:500;}
.ggcms .sidebar-left nav ul  li  a:after{padding:0px 20px;}
.ggcms .sidebar-left nav ul  li.nav-expanded > a{background-color:#fff; color:#FD640E;}
.ggcms .sidebar-left nav ul  li.nav-expanded > a span{background-color:#fff; color:#FD640E;}
.ggcms .sidebar-left nav ul > li span{font-size:15px;}

/* 2단 메뉴 */
.ggcms .sidebar-left nav ul ul{box-shadow:initial; padding:0px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a:hover{background-color:#fff;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a{padding:0px; padding-left:30px; height:45px; line-height:45px; border-bottom:1px solid #e4e4e4; color:#333; background-color:#fff;}
/* .ggcms .sidebar-left nav ul.nav-main li .nav-children li > a::before{content:""; position:relative;left:6px;top:0px;display:inline-block; width:5px; height:5px; background-color:#cecece; position:relative;} */
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a span{font-size:15px; font-weight:400;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li.nav-expanded > a span{background-color:#fff; color:#333;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a{display:block;position:relative;padding-left:40px;font-size:15px}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a::after{content:'';position:absolute;left:30px;top:22px;width:4px;height:4px;z-index:1;background-color:#CECECE;padding:0}

/* 3단 메뉴 */
.ggcms .sidebar-left nav ul ul ul{box-shadow:initial; padding:0px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children .nav-children li a{padding:0px; padding-left:45px; border-bottom:initial; border-bottom:inherit; background-color:#f5f5f5; font-size:13px; height:30px; line-height:30px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children .nav-children li a span{font-size:13px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children .nav-children li > a:hover{background-color:#f5f5f5;}
.ggcms .sidebar-left ul.nav-main ul ul li i{font-size:9px; color:#7f7f7f;}

/*   사이드 메뉴 전체가 닫혔을 경우  */
.ggcms.sidebar-left-collapsed .logo{left:6px}
.ggcms.sidebar-left-collapsed ul.nav-main > li > a{padding-left:25px;}
/*+++ //  leftmenu +++*/


/*+++/  header  /+++*/
.ggcms.fixed .header{border:none; height:70px; position:relative;}
.ggcms.fixed .page-header{top:0px; background-color:#fff;}
.ggcms .header {background: #33406d;border-bottom-color: #161a1e;border-top-color: #1D2127;}

/* 메뉴닫힘 아이콘 */
.ggcms .header .sidebar-header{overflow:hidden;float:left;}
.ggcms .header .sidebar-header .sidebar-title{}
.ggcms .header .sidebar-header .sidebar-toggle{background:#1c2648; height:70px; line-height:70px; width:40px; text-align:center; color:#fff;}
.ggcms .header .sidebar-header .sidebar-toggle:hover{cursor:pointer;}
.ggcms .header .nano{background-color:#fff;}

/* userbox */
.ggcms .header .separator{display:none;}
.ggcms .header-right{ box-sizing:border-box; padding-top:20px;}
.ggcms .userbox .name{color:#fff;}
.ggcms .userbox .custom-caret{color:#fff;}
.ggcms .userbox.open .name{color:#000;}
.ggcms .userbox.open .custom-caret{color:#000;}
/* //userbox */

/* breadcrumbs */
.ggcms .page-header .breadcrumbs{line-height:43px; padding-left:10px;}
.page-header .breadcrumbs a, .page-header .breadcrumbs span{color:#333; font-weight:400;}

.ggcms .page-header{background:initial; border-left:initial; box-shadow:initial; box-shadow:inherit;margin:0px; height:115px; border-bottom:1px solid #ddd; box-sizing:border-box;}
.ggcms .page-header h2{color:#333;}
.ggcms .inner-wrapper{padding-top:initial; }
/*+++ // header +++*/


/*********************
* CONTENT
*********************/
.ggcms .content-body{padding:0px;}
.ggcms .contentSection{overflow:hidden; padding:40px;}

/* locationBox */
.locationBox{margin-bottom:20px;}
.locationBox ul{background-color:#eee; border-radius:5px;}
.locationBox li button{text-align:center; height:35px; line-height:35px; color:#999; font-size:15px; border:1px solid #ddd; border-left:0px; font-weight:500; width:100%; padding:0px;}
.locationBox li:first-child{border-left:1px solid #ddd;}
.locationBox li.locaOk button{background-color:#33406d; color:#ffffff80; border:1px solid #33406d; border-right:1px solid #515f84; border-radius:0px;}
.locationBox li.locaOk button span{color:#ffffff80;}
.locationBox li.on button{background-color:#33406d; color:#fff; border:1px solid #33406d; border-radius:0px;}
.locationBox li span{font-size:10px; display:inline-block; vertical-align:top; color:#00000059; margin-top:-5px; margin-right:5px;}
.locationBox li.on span{color:#ffffff80;}

.locationBox.noBtn li{text-align:center; height:35px; line-height:35px; color:#999; font-size:15px; border:1px solid #ddd; border-left:0px; font-weight:500; padding:0px;}
.locationBox.noBtn li.locaOk{background-color:#33406d; color:#ffffff80; border:1px solid #33406d; border-right:1px solid #515f84; border-radius:0px;}
.locationBox.noBtn li.locaOk span{color:#ffffff80;}
.locationBox.noBtn li.on{background-color:#33406d; color:#fff; border:1px solid #33406d; border-radius:0px;}
/* //locationBox */

/* tabListBox */
.tabListBox{overflow:hidden; margin-bottom:30px;}
.tabListBox li{box-sizing:border-box; padding-right:5px;}
.tabListBox li .btn{width:100%; height:50px; font-weight:300; font-size:15px;}
.tabListBox li.on .btn{border:2px solid #33406d; border-bottom:none; background-color:#fff; font-weight:500; color:#33406d;}
.tabListBox li a{width:100%; height:50px; line-height:50px; font-weight:300; font-size:15px; display:inline-block; background-color:#eee; text-align:center; color:#333; border-radius:5px;}
.tabListBox li.on a{border:2px solid #33406d; border-bottom:none; background-color:#fff; font-weight:500; color:#33406d; display:inline-block;}
/* //tabListBox */

/* imgUpBox */
.imgUpBox #input_imgs{display:none;}
.imgUpBox input[type="file"]{display:none;}
.imgUpBox li{width:140px; float:left; margin-right:10px; overflow:hidden;}
.imgUpBox li .imgBox{height:100px; overflow:hidden;} 
.imgUpBox li .imgName{font-size:12px; font-weight:300;} 
.imgUpBox .upimg{width:140px; height:100px; background:#D8D8D8 url('../images/icon/icon-imgUp.png') no-repeat 50%;}

/* 로그인 */
body.login{background-color:#E5E5E5;}
.loginSection{background:url(../images/bg_login.png) no-repeat center top; position:fixed; width:100%; left:0px; top:0px; height:620px; box-sizing:border-box;}
.loginSection .topTxtBox{width:550px; margin:0px auto; text-align:center; margin-top:110px;}
.loginSection .topTxtBox .txt1{font-size:46px; line-height:46px;color:#fff; font-weight:300; display:inline-block; margin-bottom:20px;}
.loginSection .topTxtBox .txt2{font-size:46px; line-height:46px;color:#fff; font-weight:600; display:inline-block;}
.loginSection .loginBox{width:540px; height:465px; background-color:#fff; border-radius:15px; margin:0px auto; box-sizing:border-box; padding:40px; position:relative; top:90px;}
.loginSection .loginBox input{border-radius:5px; background-color:#eee; border:1px solid #eee; font-size:18px;  height:54px;  width:100%; box-sizing:border-box; padding:10px;}
.loginSection .loginBox input[type=text]::placeholder{color:#999;}
.loginSection .loginBox .labelBox{font-weight:600; color:#333; font-size:24px; margin:20px 0px 10px; letter-spacing:-1px;}
.loginSection .loginBox .btnBox{margin:55px 0px; padding:25px 0px 0px;border-top:1px solid #ddd;}
.loginSection .loginBox .btnBox .login{background-color:#FD640E; color:#fff; font-size:24px; font-weight:600; height:60px; width:260px;}

body.join{background-color:#E5E5E5; min-height:auto !important;}
body.join .inner-wrapper{padding-top:0px !important; overflow:initial;}
body.join .content-body{margin:0px !important;}
body.join .contentSection{padding:0px !important; padding-bottom:300px !important; overflow:inherit !important;}
.joinSection{background-color:#33406d; height:620px; box-sizing:border-box;}
.joinSection .topTxtBox{width:550px; margin:0px auto; text-align:center; padding-top:100px;}
.joinSection .topTxtBox .txt1{font-size:46px; line-height:46px;color:#fff; font-weight:300; display:inline-block; margin-bottom:20px;}
.joinSection .topTxtBox .txt2{font-size:46px; line-height:46px;color:#fff; font-weight:600; display:inline-block;}
.joinSection .joinBox{width:540px; background-color:#fff; border-radius:15px; margin:0px auto; box-sizing:border-box; padding:40px; margin-top:100px; margin-bottom:200px;}
.joinSection .joinBox input{border-radius:5px; background-color:#eee; border:1px solid #eee; font-size:18px;  height:54px;  width:100%; box-sizing:border-box; padding:10px; vertical-align:middle;}
.joinSection .joinBox input[type=text]::placeholder{color:#999;}
.joinSection .joinBox .labelBox{font-weight:600; color:#333; font-size:18px; margin:10px 0px; letter-spacing:-1px;}
.joinSection .joinBox .btnBox{margin:20px 0px; padding:25px 0px 0px;border-top:1px solid #ddd;}
.joinSection .joinBox .btnBox .login{background-color:#30363D; color:#fff; font-size:24px; font-weight:600; height:60px; width:260px;}
.joinSection .joinBox .btn{height:54px; vertical-align:middle;}

/* 기간 */
.termBox{display:inline-block; margin-left:10px;}
.termBox .btn.on{background-color:#1163a6; border:1px solid #1163a6; color:#fff;}
/*********************
* END CONTENT
*********************/

/*+++/  테이블  /+++*/
.ggcms .table{border-top:2px solid #33406d;}
.ggcms .table thead th{background-color:#eee; height:50px; padding:0px 8px; vertical-align:middle; text-align:center; border-bottom:none; font-size:14px; font-weight:500;}
.ggcms .table tbody th{background-color:#eee; padding:0px; vertical-align:middle; text-align:center; height:50px; vertical-align:middle; font-size:14px; font-weight:500;}
.ggcms .table tbody td{box-sizing:border-box; height:50px; vertical-align:middle;}
.ggcms .table tbody td span{position:relative;display:inline-block;margin:0px 10px 0 0;}
.ggcms .table tbody td span + span::after{content:'';position:absolute;left:-12px;top:5px;width:1px;height:14px;background-color:#ddd;}
.ggcms .table tfoot th{background-color:#eee; padding:0px; vertical-align:middle; text-align:center; height:50px; vertical-align:middle; font-size:14px; font-weight:500;}
.ggcms .table tfoot td{box-sizing:border-box; height:50px; vertical-align:middle;}
.ggcms .table tbody th, .ggcms .table tbody td, .ggcms .table tfoot th, .ggcms .table tfoot td{font-size:16px;}
.ggcms .table.table-bordered thead th, .ggcms .table.table-bordered tbody th, .ggcms .table.table-bordered tbody td{border:1px solid #cbcbcb;}
/*+++ // 테이블 +++*/


/*+++/  버튼  /+++*/
.ggcms .btn-darkblue {color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background-color: #33406d;border-color: #33406d;}
.ggcms .btn-darkblue:hover {border-color: #222b48 !important;background-color:#222b48;}
.ggcms .btn-darkblue:active, .ggcms .btn-darkblue:focus {border-color: #222b48 !important;background-color: #222b48;}
.ggcms .btn-darkblue[disabled] {border-color: #7688a7 !important;background-color: #7688a7;}

/* gray */
.ggcms .btn-gray {color: #ffffff; background-color: #b9b9b9;border-color: #b9b9b9;}
.ggcms .btn-gray:hover {border-color: #b9b9b9 !important;background-color:#b9b9b9;}
.ggcms .btn-gray:active, .ggcms .btn-gray:focus {border-color: #fff !important;background-color: #b9b9b9;}
.ggcms .btn-gray[disabled] {border-color: #b9b9b9 !important;background-color: #b9b9b9;}
/*+++ // 버튼 +++*/

/*+++ form +++*/
.radio-custom{margin-bottom:0px;}
.radio-custom:last-child, .radio-custom:last-of-type{margin-bottom:0px;}
.checkbox-custom{margin-bottom:0px;}
.checkbox-custom:last-child, .checkbox-custom:last-of-type{margin-bottom:0px;}
.input-inline + .input-inline{margin-left:10px;}
.input-inline label{margin-right:6px;}

/* 파일업로드 */
.filebox input[type="file"]{display:none;} 
.filebox label{display: inline-block; padding: .5em .75em; color:#fff; background-color:#33406d; cursor: pointer; border-radius:.25em; min-width:100px; text-align:center; vertical-align:middle; margin-left:5px;} 

.filebox .upload-name{display:inline-block; height:37px; padding-left:5px; font-size:12px;  vertical-align: middle; background-color:#f5f5f5; border:1px solid #ebebeb; border-radius:3px; -webkit-appearance:none;  -moz-appearance:none; appearance:none;  min-width:300px;}
/* //파일업로드 */
/*+++ //form 버튼 +++*/

/*+++/  페이징  /+++*/
.paginBox{text-align:center;}
.paginBox .pagination{margin:0px;}
/*+++/  //페이징  /+++*/


.wonDot:before{content: ""; display:inline-block;width:3px;height:3px; border-radius:50%;background:#333; vertical-align:baseline; margin-right:10px;}
.wonDot-tp2:before{content: ""; display:inline-block;border:3px solid #33406d;width:10px;height:10px; border-radius:50%; vertical-align:baseline; margin-right:10px;}

ul.dot{overflow:hidden;}
ul.dot > li{margin-bottom:5px;}
ul.dot > li:before{content: ""; display:inline-block;width:3px;height:3px; border-radius:50%;background:#333; vertical-align:middle; margin-right:6px;}
ul.dot > li:last-child{margin-bottom:0px;}
ul.dot > li em{font-weight:500; color:#333; font-style:normal; margin-right:5px;}
ul.dot.tp2 > li{border-bottom:1px solid #dadada; padding:10px;}
ul.dot.tp2 > li.on{background-color:#f8f8f8;}
ul.dot.tp2 > li em{font-weight:500; color:#333; font-style:normal; margin-right:5px;}

ul.line{overflow:hidden; font-size:0;}
ul.line > li{display:inline-block; font-size:15px;}
ul.line > li:after{content: ""; position:relative;left:0px;top:2px;display:inline-block;width:1px;height:14px;background:#D8D8D8; margin:0px 15px;}
ul.line > li:last-child::after{content:none;}

ul.bline > li{border-bottom:1px solid #dadada; padding:10px; overflow:hidden;}

/* subTit */
.subTit{overflow:hidden; margin-bottom:10px; font-size:16px;}

.subTit2{font-size:20px; font-weight:500; color:#333; overflow:hidden;}
.subTit2:before{content: ""; display:inline-block;border:3px solid #33406d;width:10px;height:10px; border-radius:50%; vertical-align:middle; margin-right:6px;}

.checkbox-custom.noTxt label:before{left:10px;}
.checkbox-custom.noTxt input[type="checkbox"]:checked + label:after{left:14px;}

.datepicker{line-height:initial; z-index:9999;}

/* 판넬 */
.panel{box-shadow:0 1px 1px rgba(0, 0, 0, .05); border:1px solid #ddd;}
.panel .panel-heading{border-top:1px solid #ddd; border-radius:0px;}
.panel dt:nth-child(1){border-top:none;}
/*+++/  END 경기도 CMS  /+++*/


/*********************
* 미디어 쿼리
*********************/
/*+++/  767px  /+++*/
@media (max-width: 768px) {
/* html.mobile-device .sidebar-left{bottom: 0; left: 0%;min-height: 0;min-width:100%;min-width:100vw;left:0;width:250px;position: fixed;overflow: hidden;top: 0;z-index: 98 !important; padding:0px; background-color:#f0f0f0;} */
html.mobile-device .sidebar-left{bottom: 0; left: 0%;min-height: 0;min-width:100%;min-width:100vw;position: fixed;overflow: hidden;top: 0;z-index: 98 !important; padding:0px; background-color:#f0f0f0;}
html.csstransforms .sidebar-left{margin:0px;}
}

/*+++/  END 767px  /+++*/

/*********************
* 달력
*********************/
.datepicker-inline{}
.datepicker-inline .table-condensed{}
.datepicker-inline .table-condensed thead tr th.prev{}

.datepicker-inline thead tr:nth-child(2) th{height:50px; vertical-align:middle; border-radius:0px; font-size:20px;}
.datepicker-inline thead tr:nth-child(3) th{height:50px; vertical-align:middle; border:1px solid #13204B; background-color:#555; color:#fff; border-radius:0px; font-size:15px;}
.datepicker-inline tbody tr td, .datepicker-inline tbody tr th{height:200px; vertical-align:top; text-align:left; border:1px solid #ccc; border-radius:0px; font-size:15px;}
.datepicker-inline tfoot{display:none;}
.datepicker-inline tfoot tr td, .datepicker-inline tfoot tr th{height:100px; vertical-align:middle; border:1px solid #ccc; border-radius:0px;}
.datepicker-inline tr td.today{background-color:#FFF9EB !important; border:none;}
/*+++ END 달력 +++*/

/*********************
* 레이어 팝업
*********************/
/* 공통 */
.popBox{font-size:15px; color:#666;}
.popBox .modal-content{overflow:hidden; box-shadow:none;}
.popBox .modal-header{background-color:#FD640E; position:relative;}
.popBox .modal-header h3{margin-bottom:0px !important; color:#fff; font-weight:400;font-size:20px;}
.popBox .modal-header button{position:absolute;color:#fff; right:25px; top:17px;opacity:1;}

/* 부대시설 선택 */
.popBox.sisulChk .modal-dialog{width:1000px;}
.popBox.sisulChk .modal-body{height:600px; overflow-y:scroll;}

/* 예약승인 */
.popBox.approval .modal-dialog{width:1000px;}

/* 손실/망실 */
.popBox.loss .modal-dialog{width:1000px;}

/* 안전사고 */
.popBox.safety .modal-dialog{width:1000px;}

/* 부적절이용내역 */
.popBox.inappro .modal-dialog{width:1000px;}

/* 무통장입금 */
.popBox.bankBook .modal-dialog{width:1000px;}
/*+++/  END 레이어 팝업  /+++*/

/* 그래프 */
/* .graph-wrap{overflow:hidden;}
.graph-wrap .left-element{float:left;width:400px;height:300px;}
.graph-wrap .right-element{margin-left:440px;} */
.graph-wrap{overflow:hidden;}
.graph-wrap .left-element{float:left;width:340px;height:300px;}
.graph-wrap .right-element{margin-left:340px;}

/*1015 수정*/
.ggcms .table tbody td #dropZone.active{overflow-y: scroll; line-height: 100% !important;}/* Add here all your CSS customizations */
/* 추가로 필요한 스타일 정의하면 됩니다 - kkm*/

.btns {margin:20px 0; text-align:right;}

/* table */
.table th {background-color:#ecedf0;}
.table tr:last-child {border-bottom:1px solid #ddd;}

/* Form - Bordered */
#searchFrm.form-bordered .form-group {border-bottom: 1px solid #eff2f7;padding-bottom: 7px;margin-bottom: 7px;}

/* validator 추가*/
.form-control.error {border-color: #a94442;}

[class^="hvr-"] {background: #e1e1e1;color: #666;cursor: pointer;line-height: 1.2em;margin: .4em;padding: 1em;text-decoration: none;	-webkit-tap-highlight-color: rgba(0,0,0,0);}

/* panel accordions open or collapse symbol */
.panel-heading .accordion-toggle:after {font-family: 'FontAwesome'; content: "\f0d7";  float: right; color: grey; }
.panel-heading .accordion-toggle.collapsed:after {  content: "\f0d8"; }

/* popup preview */
.popupPreview .pop-layer {display: none;position: absolute;top: 50%;left: 50%;/* width: 410px; */height: auto;background-color: #fff;border: 5px solid #3571B5;}
.popupPreview .pop-layer.top {border: none;border-bottom: 5px solid #3571B5;width: 100%;text-align: center;}
.popupPreview .pop-layer .pop-container {padding: 20px 25px;}


/*********************
* 2020.08.04 경기도 CMS 
*********************/
/* 공통 */
h3{margin-bottom:30px !important;}

html.no-overflowscrolling .nano > .nano-pane > .nano-slider{background:#ccc;}/* 스크롤 */

.sectionHead{overflow:hidden; background-color:#f7f7f7;  padding:15px 10px; box-sizing:border-box; padding-left:15px; border-top:2px solid #33406d; border-bottom:1px solid #cbcbcb;}

.boxHead{overflow:hidden; background-color:#f7f7f7; padding:20px 15px; box-sizing:border-box; border-top:2px solid #33406d; border-bottom:1px solid #cbcbcb; }

.sectionBody{overflow:hidden;}
.sectionBody .con{overflow:hidden; box-sizing:border-box; padding:10px;}
.sectionBody .footBox{overflow:hidden;  background-color:#f7f7f7; height:50px; line-height:50px; box-sizing:border-box; padding-left:15px; border-bottom:1px solid #33406d; border-top:1px solid #cbcbcb; text-align:center;}

/* sectionWrap */
.sectionWrap{overflow:hidden;}
.sectionWrap .sectionHead{overflow:hidden; background-color:#f7f7f7;  padding:15px 10px; box-sizing:border-box; padding-left:15px; border-top:2px solid #33406d; border-bottom:1px solid #cbcbcb;}
.sectionWrap .sectionBody{overflow:hidden; padding:20px; box-sizing:border-box; font-size:15px;}
.sectionWrap .sectionFoot{overflow:hidden; background-color:#f7f7f7;  padding:15px 10px; box-sizing:border-box; padding-left:15px; border-top:1px solid #cbcbcb; border-bottom:1px solid #33406d;}

/*  로고 */
.ggcms .logo-container{overflow:hidden; height:115px; width:100%; background-color:#FD640E; box-sizing:border-box; padding:35px 10px; position:relative;}
.ggcms .logo-container a{display:block;}
.ggcms .logo{padding:0px; margin:0px; box-sizing:border-box; float:initial; overflow:hidden; position:absolute; top:35px; left:35px;}
.ggcms .logo:after{border:initial;}
.ggcms .subLogoTit{color:#fff; display:inline-block; padding-left:15px; margin-left:90px; border-left:1px solid #eeeeee3b;}
.ggcms .subLogoTit .txt1{font-size:14px;font-weight:500; }
.ggcms .subLogoTit .txt2{font-size:20px;font-weight:500;}
/*** // 로고 ***/


/*+++/  leftmenu  /+++*/
.ggcms.fixed .sidebar-left{top:0px;}
html.no-overflowscrolling .sidebar-left .nano{background-color:#f0f0f0; box-shadow:initial; border-right:1px solid #ccc; box-shadow:inherit;}

/* 1단 메뉴 */
.ggcms .sidebar-left nav{padding-bottom:30px;}
.ggcms .sidebar-left nav > ul{margin-right:initial;}
.ggcms .sidebar-left nav ul  li > a:hover, .ggcms .sidebar-left nav ul  li > a:focus{background-color:#fff;}
.ggcms .sidebar-left nav ul  li > a{color:#333; font-size:16px; font-weight:500; height:55px; line-height:55px; padding:0px; padding-left:20px; border-bottom:1px solid #e4e4e4; background-color:#f0f0f0;}
.ggcms .sidebar-left nav ul  li > a span{color:#333; font-size:16px; font-weight:500;}
.ggcms .sidebar-left nav ul  li  a:after{padding:0px 20px;}
.ggcms .sidebar-left nav ul  li.nav-expanded > a{background-color:#fff; color:#FD640E;}
.ggcms .sidebar-left nav ul  li.nav-expanded > a span{background-color:#fff; color:#FD640E;}
.ggcms .sidebar-left nav ul > li span{font-size:15px;}

/* 2단 메뉴 */
.ggcms .sidebar-left nav ul ul{box-shadow:initial; padding:0px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a:hover{background-color:#fff;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a{padding:0px; padding-left:30px; height:45px; line-height:45px; border-bottom:1px solid #e4e4e4; color:#333; background-color:#fff;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li.nav-active > a > span{ font-weight:bold;}
/* .ggcms .sidebar-left nav ul.nav-main li .nav-children li > a::before{content:""; position:relative;left:6px;top:0px;display:inline-block; width:5px; height:5px; background-color:#cecece; position:relative;} */
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a span{font-size:15px; font-weight:400;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li.nav-expanded > a span{background-color:#fff; color:#333;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a{display:block;position:relative;padding-left:40px;font-size:15px}
.ggcms .sidebar-left nav ul.nav-main li .nav-children li > a::after{content:'';position:absolute;left:30px;top:22px;width:4px;height:4px;z-index:1;background-color:#CECECE;padding:0}

/* 3단 메뉴 */
.ggcms .sidebar-left nav ul ul ul{box-shadow:initial; padding:0px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children .nav-children li a{padding:0px; padding-left:45px; border-bottom:initial; border-bottom:inherit; background-color:#f5f5f5; font-size:13px; height:30px; line-height:30px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children .nav-children li a span{font-size:13px;}
.ggcms .sidebar-left nav ul.nav-main li .nav-children .nav-children li > a:hover{background-color:#f5f5f5;}
.ggcms .sidebar-left ul.nav-main ul ul li i{font-size:9px; color:#7f7f7f;}

/*   사이드 메뉴 전체가 닫혔을 경우  */
.ggcms.sidebar-left-collapsed .logo{left:6px}
.ggcms.sidebar-left-collapsed ul.nav-main > li > a{padding-left:25px;}
/*+++ //  leftmenu +++*/


/*+++/  header  /+++*/
.ggcms.fixed .header{border:none; height:70px; position:relative;}
.ggcms.fixed .page-header{top:0px; background-color:#fff;}
.ggcms .header {background: #33406d;border-bottom-color: #161a1e;border-top-color: #1D2127;}

/* 메뉴닫힘 아이콘 */
.ggcms .header .sidebar-header{overflow:hidden;float:left;}
.ggcms .header .sidebar-header .sidebar-title{}
.ggcms .header .sidebar-header .sidebar-toggle{background:#1c2648; height:70px; line-height:70px; width:40px; text-align:center; color:#fff;}
.ggcms .header .sidebar-header .sidebar-toggle:hover{cursor:pointer;}
.ggcms .header .nano{background-color:#fff;}

/* userbox */
.ggcms .header .separator{display:none;}
.ggcms .header-right{ box-sizing:border-box; padding-top:20px;}
.ggcms .userbox .name{color:#fff;}
.ggcms .userbox .custom-caret{color:#fff;}
.ggcms .userbox.open .name{color:#000;}
.ggcms .userbox.open .custom-caret{color:#000;}
/* //userbox */

/* breadcrumbs */
.ggcms .page-header .breadcrumbs{line-height:43px; padding-left:10px;}
.page-header .breadcrumbs a, .page-header .breadcrumbs span{color:#333; font-weight:400;}

.ggcms .page-header{background:initial; border-left:initial; box-shadow:initial; box-shadow:inherit;margin:0px; height:115px; border-bottom:1px solid #ddd; box-sizing:border-box;}
.ggcms .page-header h2{color:#333;}
.ggcms .inner-wrapper{padding-top:initial; }
/*+++ // header +++*/


/*********************
* CONTENT
*********************/
.ggcms .content-body{padding:0px;}
.ggcms .contentSection{overflow:hidden; padding:40px;}

/* locationBox */
.locationBox{margin-bottom:20px;}
.locationBox ul{background-color:#eee; border-radius:5px;}
.locationBox li button{text-align:center; height:35px; line-height:35px; color:#999; font-size:15px; border:1px solid #ddd; border-left:0px; font-weight:500; width:100%; padding:0px;}
.locationBox li:first-child{border-left:1px solid #ddd;}
.locationBox li.locaOk button{background-color:#33406d; color:#ffffff80; border:1px solid #33406d; border-right:1px solid #515f84; border-radius:0px;}
.locationBox li.locaOk button span{color:#ffffff80;}
.locationBox li.on button{background-color:#33406d; color:#fff; border:1px solid #33406d; border-radius:0px;}
.locationBox li span{font-size:10px; display:inline-block; vertical-align:top; color:#00000059; margin-top:-5px; margin-right:5px;}
.locationBox li.on span{color:#ffffff80;}

.locationBox.noBtn li{text-align:center; height:35px; line-height:35px; color:#999; font-size:15px; border:1px solid #ddd; border-left:0px; font-weight:500; padding:0px;}
.locationBox.noBtn li.locaOk{background-color:#33406d; color:#ffffff80; border:1px solid #33406d; border-right:1px solid #515f84; border-radius:0px;}
.locationBox.noBtn li.locaOk span{color:#ffffff80;}
.locationBox.noBtn li.on{background-color:#33406d; color:#fff; border:1px solid #33406d; border-radius:0px;}
/* //locationBox */

/* tabListBox */
.tabListBox{overflow:hidden; margin-bottom:30px;}
.tabListBox li{box-sizing:border-box; padding-right:5px;}
.tabListBox li .btn{width:100%; height:50px; font-weight:300; font-size:15px;}
.tabListBox li.on .btn{border:2px solid #33406d; border-bottom:none; background-color:#fff; font-weight:500; color:#33406d;}
.tabListBox li a{width:100%; height:50px; line-height:50px; font-weight:300; font-size:15px; display:inline-block; background-color:#eee; text-align:center; color:#333; border-radius:5px;}
.tabListBox li.on a{border:2px solid #33406d; border-bottom:none; background-color:#fff; font-weight:500; color:#33406d; display:inline-block;}
/* //tabListBox */

/* imgUpBox */
.imgUpBox #input_imgs{display:none;}
.imgUpBox input[type="file"]{display:none;}
.imgUpBox li{width:140px; float:left; margin-right:10px; overflow:hidden;}
.imgUpBox li .imgBox{height:100px; overflow:hidden;} 
.imgUpBox li .imgName{font-size:12px; font-weight:300;} 
.imgUpBox .upimg{width:140px; height:100px; background:#D8D8D8 url('../images/icon/icon-imgUp.png') no-repeat 50%;}

/* 로그인 */
body.login{background-color:#E5E5E5;}
.loginSection{background:url(../images/bg_login.png) no-repeat center top; position:fixed; width:100%; left:0px; top:0px; height:620px; box-sizing:border-box;}
.loginSection .topTxtBox{width:550px; margin:0px auto; text-align:center; margin-top:110px;}
.loginSection .topTxtBox .txt1{font-size:46px; line-height:46px;color:#fff; font-weight:300; display:inline-block; margin-bottom:20px;}
.loginSection .topTxtBox .txt2{font-size:46px; line-height:46px;color:#fff; font-weight:600; display:inline-block;}
.loginSection .loginBox{width:540px; height:465px; background-color:#fff; border-radius:15px; margin:0px auto; box-sizing:border-box; padding:40px; position:relative; top:90px;}
.loginSection .loginBox input{border-radius:5px; background-color:#eee; border:1px solid #eee; font-size:18px;  height:54px;  width:100%; box-sizing:border-box; padding:10px;}
.loginSection .loginBox input[type=text]::placeholder{color:#999;}
.loginSection .loginBox .labelBox{font-weight:600; color:#333; font-size:24px; margin:20px 0px 10px; letter-spacing:-1px;}
.loginSection .loginBox .btnBox{margin:55px 0px; padding:25px 0px 0px;border-top:1px solid #ddd;}
.loginSection .loginBox .btnBox .login{background-color:#FD640E; color:#fff; font-size:24px; font-weight:600; height:60px; width:260px;}

body.join{background-color:#E5E5E5; min-height:auto !important;}
body.join .inner-wrapper{padding-top:0px !important; overflow:initial;}
body.join .content-body{margin:0px !important;}
body.join .contentSection{padding:0px !important; padding-bottom:300px !important; overflow:inherit !important;}
.joinSection{background-color:#33406d; height:620px; box-sizing:border-box;}
.joinSection .topTxtBox{width:550px; margin:0px auto; text-align:center; padding-top:100px;}
.joinSection .topTxtBox .txt1{font-size:46px; line-height:46px;color:#fff; font-weight:300; display:inline-block; margin-bottom:20px;}
.joinSection .topTxtBox .txt2{font-size:46px; line-height:46px;color:#fff; font-weight:600; display:inline-block;}
.joinSection .joinBox{width:540px; background-color:#fff; border-radius:15px; margin:0px auto; box-sizing:border-box; padding:40px; margin-top:100px; margin-bottom:200px;}
.joinSection .joinBox input{border-radius:5px; background-color:#eee; border:1px solid #eee; font-size:18px;  height:54px;  width:100%; box-sizing:border-box; padding:10px; vertical-align:middle;}
.joinSection .joinBox input[type=text]::placeholder{color:#999;}
.joinSection .joinBox .labelBox{font-weight:600; color:#333; font-size:18px; margin:10px 0px; letter-spacing:-1px;}
.joinSection .joinBox .btnBox{margin:20px 0px; padding:25px 0px 0px;border-top:1px solid #ddd;}
.joinSection .joinBox .btnBox .login{background-color:#30363D; color:#fff; font-size:24px; font-weight:600; height:60px; width:260px;}
.joinSection .joinBox .btn{height:54px; vertical-align:middle;}

/* 기간 */
.termBox{display:inline-block; margin-left:10px;}
.termBox .btn.on{background-color:#1163a6; border:1px solid #1163a6; color:#fff;}
/*********************
* END CONTENT
*********************/

/*+++/  테이블  /+++*/
.ggcms .table{border-top:2px solid #33406d;}
.ggcms .table thead th{background-color:#eee; height:50px; padding:0px 8px; vertical-align:middle; text-align:center; border-bottom:none; font-size:14px; font-weight:500;}
.ggcms .table tbody th{background-color:#eee; padding:0px; vertical-align:middle; text-align:center; height:50px; vertical-align:middle; font-size:14px; font-weight:500;}
.ggcms .table tbody td{box-sizing:border-box; height:50px; vertical-align:middle;}
.ggcms .table tbody td span{position:relative;display:inline-block;margin:0px 10px 0 0;}
.ggcms .table tbody td span + span::after{content:'';position:absolute;left:-12px;top:5px;width:1px;height:14px;background-color:#ddd;}
.ggcms .table tfoot th{background-color:#eee; padding:0px; vertical-align:middle; text-align:center; height:50px; vertical-align:middle; font-size:14px; font-weight:500;}
.ggcms .table tfoot td{box-sizing:border-box; height:50px; vertical-align:middle;}
.ggcms .table tbody th, .ggcms .table tbody td, .ggcms .table tfoot th, .ggcms .table tfoot td{font-size:16px;}
.ggcms .table.table-bordered thead th, .ggcms .table.table-bordered tbody th, .ggcms .table.table-bordered tbody td{border:1px solid #cbcbcb;}
/*+++ // 테이블 +++*/


/*+++/  버튼  /+++*/
.ggcms .btn-darkblue {color: #ffffff;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background-color: #33406d;border-color: #33406d;}
.ggcms .btn-darkblue:hover {border-color: #222b48 !important;background-color:#222b48;}
.ggcms .btn-darkblue:active, .ggcms .btn-darkblue:focus {border-color: #222b48 !important;background-color: #222b48;}
.ggcms .btn-darkblue[disabled] {border-color: #7688a7 !important;background-color: #7688a7;}

/* gray */
.ggcms .btn-gray {color: #ffffff; background-color: #b9b9b9;border-color: #b9b9b9;}
.ggcms .btn-gray:hover {border-color: #b9b9b9 !important;background-color:#b9b9b9;}
.ggcms .btn-gray:active, .ggcms .btn-gray:focus {border-color: #fff !important;background-color: #b9b9b9;}
.ggcms .btn-gray[disabled] {border-color: #b9b9b9 !important;background-color: #b9b9b9;}
/*+++ // 버튼 +++*/

/*+++ form +++*/
.radio-custom{margin-bottom:0px;}
.radio-custom:last-child, .radio-custom:last-of-type{margin-bottom:0px;}
.checkbox-custom{margin-bottom:0px;}
.checkbox-custom:last-child, .checkbox-custom:last-of-type{margin-bottom:0px;}
.input-inline + .input-inline{margin-left:10px;}
.input-inline label{margin-right:6px;}

/* 파일업로드 */
.filebox input[type="file"]{display:none;} 
.filebox label{display: inline-block; padding: .5em .75em; color:#fff; background-color:#33406d; cursor: pointer; border-radius:.25em; min-width:100px; text-align:center; vertical-align:middle; margin-left:5px;} 

.filebox .upload-name{display:inline-block; height:37px; padding-left:5px; font-size:12px;  vertical-align: middle; background-color:#f5f5f5; border:1px solid #ebebeb; border-radius:3px; -webkit-appearance:none;  -moz-appearance:none; appearance:none;  min-width:300px;}
/* //파일업로드 */
/*+++ //form 버튼 +++*/

/*+++/  페이징  /+++*/
.paginBox{text-align:center;}
.paginBox .pagination{margin:0px;}
/*+++/  //페이징  /+++*/


.wonDot:before{content: ""; display:inline-block;width:3px;height:3px; border-radius:50%;background:#333; vertical-align:baseline; margin-right:10px;}
.wonDot-tp2:before{content: ""; display:inline-block;border:3px solid #33406d;width:10px;height:10px; border-radius:50%; vertical-align:baseline; margin-right:10px;}

ul.dot{overflow:hidden;}
ul.dot > li{margin-bottom:5px;}
ul.dot > li:before{content: ""; display:inline-block;width:3px;height:3px; border-radius:50%;background:#333; vertical-align:middle; margin-right:6px;}
ul.dot > li:last-child{margin-bottom:0px;}
ul.dot > li em{font-weight:500; color:#333; font-style:normal; margin-right:5px;}
ul.dot.tp2 > li{border-bottom:1px solid #dadada; padding:10px;}
ul.dot.tp2 > li.on{background-color:#f8f8f8;}
ul.dot.tp2 > li em{font-weight:500; color:#333; font-style:normal; margin-right:5px;}

ul.line{overflow:hidden; font-size:0;}
ul.line > li{display:inline-block; font-size:15px;}
ul.line > li:after{content: ""; position:relative;left:0px;top:2px;display:inline-block;width:1px;height:14px;background:#D8D8D8; margin:0px 15px;}
ul.line > li:last-child::after{content:none;}

ul.bline > li{border-bottom:1px solid #dadada; padding:10px; overflow:hidden;}

/* subTit */
.subTit{overflow:hidden; margin-bottom:10px; font-size:16px;}

.subTit2{font-size:20px; font-weight:500; color:#333; overflow:hidden;}
.subTit2:before{content: ""; display:inline-block;border:3px solid #33406d;width:10px;height:10px; border-radius:50%; vertical-align:middle; margin-right:6px;}

.checkbox-custom.noTxt label:before{left:10px;}
.checkbox-custom.noTxt input[type="checkbox"]:checked + label:after{left:14px;}

.datepicker{line-height:initial; z-index:9999;}

/* 판넬 */
.panel{box-shadow:0 1px 1px rgba(0, 0, 0, .05); border:1px solid #ddd;}
.panel .panel-heading{border-top:1px solid #ddd; border-radius:0px;}
.panel dt:nth-child(1){border-top:none;}
/*+++/  END 경기도 CMS  /+++*/


/*********************
* 미디어 쿼리
*********************/
/*+++/  767px  /+++*/
@media (max-width: 768px) {
/* html.mobile-device .sidebar-left{bottom: 0; left: 0%;min-height: 0;min-width:100%;min-width:100vw;left:0;width:250px;position: fixed;overflow: hidden;top: 0;z-index: 98 !important; padding:0px; background-color:#f0f0f0;} */
html.mobile-device .sidebar-left{bottom: 0; left: 0%;min-height: 0;min-width:100%;min-width:100vw;position: fixed;overflow: hidden;top: 0;z-index: 98 !important; padding:0px; background-color:#f0f0f0;}
html.csstransforms .sidebar-left{margin:0px;}
}

/*+++/  END 767px  /+++*/

/*********************
* 달력
*********************/
.datepicker-inline{}
.datepicker-inline .table-condensed{}
.datepicker-inline .table-condensed thead tr th.prev{}

.datepicker-inline thead tr:nth-child(2) th{height:50px; vertical-align:middle; border-radius:0px; font-size:20px;}
.datepicker-inline thead tr:nth-child(3) th{height:50px; vertical-align:middle; border:1px solid #13204B; background-color:#555; color:#fff; border-radius:0px; font-size:15px;}
.datepicker-inline tbody tr td, .datepicker-inline tbody tr th{height:200px; vertical-align:top; text-align:left; border:1px solid #ccc; border-radius:0px; font-size:15px;}
.datepicker-inline tfoot{display:none;}
.datepicker-inline tfoot tr td, .datepicker-inline tfoot tr th{height:100px; vertical-align:middle; border:1px solid #ccc; border-radius:0px;}
.datepicker-inline tr td.today{background-color:#FFF9EB !important; border:none;}
/*+++ END 달력 +++*/

/*********************
* 레이어 팝업
*********************/
/* 공통 */
.popBox{font-size:15px; color:#666;}
.popBox .modal-content{overflow:hidden; box-shadow:none;}
.popBox .modal-header{background-color:#FD640E; position:relative;}
.popBox .modal-header h3{margin-bottom:0px !important; color:#fff; font-weight:400;font-size:20px;}
.popBox .modal-header button{position:absolute;color:#fff; right:25px; top:17px;opacity:1;}

/* 부대시설 선택 */
.popBox.sisulChk .modal-dialog{width:1000px;}
.popBox.sisulChk .modal-body{height:600px; overflow-y:scroll;}

/* 예약승인 */
.popBox.approval .modal-dialog{width:1000px;}

/* 손실/망실 */
.popBox.loss .modal-dialog{width:1000px;}

/* 안전사고 */
.popBox.safety .modal-dialog{width:1000px;}

/* 부적절이용내역 */
.popBox.inappro .modal-dialog{width:1000px;}

/* 무통장입금 */
.popBox.bankBook .modal-dialog{width:1000px;}
/*+++/  END 레이어 팝업  /+++*/

/* 그래프 */
/* .graph-wrap{overflow:hidden;}
.graph-wrap .left-element{float:left;width:400px;height:300px;}
.graph-wrap .right-element{margin-left:440px;} */
.graph-wrap{overflow:hidden;}
.graph-wrap .left-element{float:left;width:340px;height:300px;}
.graph-wrap .right-element{margin-left:340px;}


/* 총계 + table */
.t-table-group-wrap {
    display:block;
    position:relative;
    padding-left:200px;

}
.t-table-sum-wrap {
    display:block;
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:200px;
}
.t-table-sum-wrap .table{
    height:100%;
}
.t-table-wrap{
    position:relative;
}

@media screen and (max-width:1024px){
	.t-table-group-wrap{
	 	padding-left:0;
	}
	.t-table-sum-wrap {
	position:relative;
	width:100%;
	height:auto;
	}
}

/*1015 수정*/
.ggcms .table tbody td #dropZone.active{overflow-y: scroll; line-height: 100% !important;}

/*1220 수정*/
.site-button{position: relative; margin-bottom:30px;}
.site-button ul{overflow: hidden;padding: 0 0 0 23%; }
.site-button ul li{background: #EEEEEE;border-radius: 3px;height: 200px;position: relative;display: inline-block;width: calc(25% - 26px);}
.site-button ul li:first-child{position: absolute; top:50%; left:0; transform: translateY(-50%);}
.site-button ul li + li{margin-left: 23px;}
.site-button ul li a{display: block; height: 100%; color: #333; padding:0 30px;}
.site-button ul li .text{font-size: 18px;line-height: 26px; position: absolute; top:50%; left: 30px; transform: translateY(-50%);}
.site-button ul li .num{font-size: 24px;line-height: 35px; position: absolute; top:50%; right: 30px; transform: translateY(-50%);}
.site-button ul li.active{background-color: #33406D;}
.site-button ul li.active::before{content: '';border-left:10px solid transparent;border-right: 10px solid transparent;border-top:10px solid #33406D;position: absolute;bottom:-10px;left:50%;transform: translateX(-50%);}
.site-button ul li.active a{color:#fff;}