/* 기본 텍스트 스타일 */
.bold-500 { display: inline-block; font-weight: 500; }
.bold-700 { display: inline-block; font-weight: 700; }
.bold-900 { display: inline-block; font-weight: 900; }

.style-wrap{margin:20px}
[ite]{margin:30px}
.stylegude-heading{padding:30px;font-weight:300;font-size:33px;color:#e67704;background-color:#3e4046}
.stylegude-heading i{color:#959aa8}
.stylegude-heading small{display:inline-block;margin-left:20px;font-size:15px;color:#787b84}
h3.heading{margin-bottom:10px;font-weight:600;font-size:30px;color:#000}
/************************************
*   
*   스타일 가이드 시작 2021-10-05
*
*************************************/

.left{text-align:left}
.right{text-align:right}
.center{text-align:center}

.hide,.blind{position:absolute;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px}

.color-default{color: #ff8625} 
.color-red{color:#a61e30}
.color-gold{color:#886618}

.tip-message{flex:0 0 100%;padding-left:23px;margin:10px 0;line-height:145%;background:url(../../../../images/name/user/styleguide/tip.png) no-repeat 0 2px}

.error-message{flex:0 0 100%;padding-left:23px;margin:10px 0;line-height:145%;background:url(../../../../images/name/user/styleguide/warning.png) no-repeat 0 5px; color:#ff5050 }
.error-message img{vertical-align:-1px}

/* 로딩바 */
.common-loadingbar{ z-index:10000;position:fixed;top:50%;left:0;width:44px;height:44px;transform:translate(-50%, -50%)}
.common-loadingbar circle{ width:100%;height:100%;fill:none;stroke:rgba(0, 0, 0, 0.25);stroke-width:4px;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:100;transform-origin:calc(50% - 2px) calc(50% - 2px);transform:translate(2px, 2px) rotate(0deg);animation:playCircle 1000ms infinite linear}
@keyframes playCircle{
	0%{ stroke-dashoffset:200;transform:translate(2px, 2px) rotate(-90deg)}
	40%{ stroke-dashoffset:90;transform:translate(2px, 2px) rotate(90deg)}
	60%{ stroke-dashoffset:90;transform:translate(2px, 2px) rotate(210deg)}
	100%{ stroke-dashoffset:200;transform:translate(2px, 2px) rotate(630deg)}
} 
/*버튼*/
.button-container{margin-top:20px}
.button-container.center{text-align:center}
.button-container.right{text-align:right}

.btn-def{display:inline-block;text-align:left;padding:13px 20px;background-color:#515251;border:1px solid #515251}
.btn-def span{display:block;line-height:110%;font-weight:300;color:#fff;}
.btn-def:hover{background-color:#fff}
.btn-def:hover span{color:#000;}

.btn-fn{display:inline-block;text-align:left;min-width:145px;padding:13px 20px;background-color: #e47e20;border: 1px solid #e47e20}
.btn-fn span{display:block;line-height:110%;font-weight: 500;padding-right:25px;color:#fff;background:url(../../../../images/name/user/styleguide/btn-fn-arr.png) no-repeat 100% 50%}
.btn-fn:hover{background-color:#fff}
.btn-fn:hover span{color:#000;background:url(../../../../images/name/user/styleguide/btn-fn-arr-hover.png) no-repeat 100% 50%}

.btn-gray{display:inline-block;text-align:left;min-width:145px;padding:13px 20px;background-color: #515251;border: 1px solid #515251}
.btn-gray span{display:block;line-height:110%;font-weight: 500;padding-right:25px;color:#fff;background:url(../../../../images/name/user/styleguide/btn-fn-arr.png) no-repeat 100% 50%}
.btn-gray:hover{background-color:#fff}
.btn-gray:hover span{color:#000;background:url(../../../../images/name/user/styleguide/btn-fn-arr-hover.png) no-repeat 100% 50%}

.btn-cancel{display:inline-block;text-align:left;min-width:145px;padding:13px 20px;background-color: #ee1212;border: 1px solid #ee1212}
.btn-cancel span{display:block;line-height:110%;font-weight: 500;padding-right:25px;color:#fff;background:url(../../../../images/name/user/styleguide/btn-cancel-arr.png) no-repeat 100% 50%}
.btn-cancel:hover{background-color:#fff}
.btn-cancel:hover span{color:#000;background:url(../../../../images/name/user/styleguide/btn-cancel-arr-hover.png) no-repeat 100% 50%}

.btn-bbs-def{padding:13px 20px;background-color:#515251;border:1px solid #515251}
.btn-bbs-def span{display:block;line-height:110%;color:#fff}
.btn-bbs-def:hover, .btn-bbs-def.is-selected{background-color:#fff}
.btn-bbs-def.is-selected span, .btn-bbs-def:hover span{color:#000}

.btn-bbs-fn{padding:13px 20px;background-color:#e47e20;border:1px solid #e47e20}
.btn-bbs-fn span{display:block;line-height:110%;color:#fff}
.btn-bbs-fn.is-selected, .btn-bbs-fn:hover{background-color:#fff}
.btn-bbs-fn.is-selected span, .btn-bbs-fn:hover span{color:#e47e20}

.btn-down{padding:13px 20px;background-color:#e47e20;border:1px solid #e47e20}
.btn-down span{display:block;line-height:110%;color:#fff}
.btn-down span i::before{color:#fff}
.btn-down.is-selected, .btn-down:hover{background-color:#fff}
.btn-down.is-selected span, .btn-down:hover span{color:#e47e20}
.btn-down.is-selected span i::before, .btn-down:hover span i::before{color:#e47e20}

.btn-next{display:inline-block;text-align:left;min-width:145px;padding:13px 20px;background-color:#515251;border:1px solid #515251}
.btn-next span{display:block;line-height:110%;font-weight:300;padding-right: 25px;color:#fff;background: url(../../../../images/name/user/styleguide/btn-def-arr.png) no-repeat 100% 50%}
.btn-next:hover{background-color:#fff}
.btn-next:hover span{color:#000;background:url(../../../../images/name/user/styleguide/btn-def-arr-hover.png) no-repeat 100% 50%}


/*만족도?*/
.sub-contents-manager{position:relative;padding:20px;border:1px solid #ddd}
.sub-contents-manager .manager-list:after{content:'';display:block;clear:both}
.sub-contents-manager .manager-list li{float:left}
.sub-contents-manager .manager-list li b{color:#000}
.sub-contents-manager .manager-list li ~ li{margin-left:20px}
.sub-contents-manager .manager-modified{position:absolute;top:21px;right:20px;font-size:0.8571rem}
div+.sub-contents-manager{border-top-width:0}
.sub-contents-ratings{padding:20px;border:1px solid #ddd}
.sub-contents-ratings .ratings-title{display:block;padding-left:20px;margin-bottom:10px;font-weight:500;background:url(../../../../images/name/user/styleguide/icon-message.png) no-repeat 0 5px;line-height:140%;color:#000}
.sub-contents-ratings .ratings-items{float:left;margin-right:20px}
.sub-contents-ratings .ratings-items:after{content:'';display:block;clear:both}
.sub-contents-ratings .ratings-items label{display:block;float:left;line-height:32px}
.sub-contents-ratings .ratings-items label ~ label{margin-left:15px}
.sub-contents-ratings .ratings-input{position:relative;overflow:hidden;padding-right:50px}
.sub-contents-ratings .ratings-input button{position:absolute;top:0;right:0;width:50px;height:100%;padding:0}
div+.sub-contents-ratings{border-top-width:0}
@media screen and (max-width:767px){
	.sub-contents-manager{padding:10px}
	.sub-contents-manager:after{content:'';display:block;clear:both}
	.sub-contents-manager .manager-list li{position:relative;width:50%;padding:5px 10px 5px 20px}
	.sub-contents-manager .manager-list li:before{content:'';position:absolute;top:11px;left:10px;width:4px;height:1px;background-color:#999}
	.sub-contents-manager .manager-list li ~ li{margin-left:0}
	.sub-contents-manager .manager-modified{font-size:1rem;top:0px;left:0}
	.sub-contents-ratings .ratings-items{float:none}
}
@media screen and (max-width:500px){
	.sub-contents-manager .manager-list li{position:relative;width:100%}
}
@media screen and (max-width:430px){
	.sub-contents-ratings .ratings-items label{width:33.33%;line-height:110%;margin-bottom:10px}
	.sub-contents-ratings .ratings-items label ~ label{margin-left:0}
}
/********************************************************** 

	온라인서식 박스 정렬 (2021 정진환)

***********************************************************/
.formbox{display:flex;flex-wrap:nowrap;min-width:100%;border-bottom:1px solid #dcdcdc}
.formbox>div{flex: 0 1 auto;}
.formbox .form-label{display: flex;justify-content: flex-end;align-items: center;flex: 0 0 200px;padding:15px;text-align:right;background-color:#fafbfc}
.formbox .form-label .label{font-size: 17px;color:#000;line-height: 110%;display: flex;font-weight: 500;text-align: right;} 
.formbox .form-label .label i{margin-left:5px;vertical-align:-4px;color:#e98031}
.formbox .form-normal{display: flex;flex-wrap:wrap;align-items: center;max-width:calc(100% - 195px);padding: 7px 15px;border-left: 1px dashed #ddd;}
.formbox .form-normal.width-max{flex:1 0 auto;}
.formbox .form-normal .bbs-contents{flex:1 1 100%;margin:0} 
.formbox .form-normal .button-container{flex:1 1 100%;margin-top:15px;padding-top:15px;border-top:1px dashed #ddd } 

.formbox button{height: 40px;padding:0 15px;background-color:#515251;color:#fff}
 
.formbox .form-col + .form-col{display: flex;flex-wrap:wrap;align-items: center;max-width:calc(100% - 195px);padding: 7px 15px;border-left: 1px dashed #ddd;}

@media screen and (max-width:1000px) {
	.formbox{display:block;padding:15px 0;border-bottom-style:dashed}
	.formbox .form-label{display: flex;justify-content: flex-start;min-width:100%;width:100%;padding:0;margin-bottom:10px;text-align:left;background-color:transparent}
	.formbox .form-label .label{justify-content:flex-start}
	.formbox .form-label .label br{display:none}
	.formbox .form-normal{padding:0;max-width:100%;border-left: 0;}
	
	.formbox .form-col + .form-col{padding:0;max-width:100%;border-left: 0;}
}

/**********************************************************

	온라인서식 (2021 정진환)

**********************************************************/
/*일반 텍스트*/
.form-text{padding:15px 0;margin:-7px 0;line-height:135%}
/* 아이디 입력상자 */
.form-id *{vertical-align:top}
.form-id input{display:inline-block;width:auto;margin-right:5px}
/* 주소입력상자 */
.form-address-post{position:relative;padding-right:43px;margin-bottom:5px}
.form-address-post *{vertical-align:top} 
.form-address-post input{display:inline-block;width:120px;margin-right:5px}
.form-address-post+input~input{margin-top:5px}
/* 선택상자 */
.form-selectbox{display:block;position:relative;width:100%;max-width:200px;background-color:#fff}
.form-selectbox select{z-index:1;position:relative;padding-right: 35px;background-color:transparent}
.form-selectbox:before{content:'';width:15px;height:8px;background:url(../../../../images/name/user/styleguide/selectbox-arrow.png) no-repeat 0 0;position:absolute;top:22px;right:10px;-ms-transform:translateY(-50%);transform:translateY(-50%)}
/* 기간 */
.form-daterange{display:flex;max-width:283px;}
.form-daterange .fn-datepicker{flex:1 1 auto;min-width:0}
.form-daterange .fn-datepicker + .mid{display:flex;align-items:center;justify-content:center;flex:0 0 20px;background-color:transparent}

/* 전화번호 */
.form-telephone{display:flex;flex-wrap: nowrap;min-width: 100%;border:1px solid #d5d5d5;background-color:#fff;max-width: 500px}
.form-telephone[tabindex="0"]:focus{outline:2px solid #dd791d}
.form-telephone select{text-align-last:center;border:0}
.form-telephone input[type=number]{text-align:center;border:0}
.form-telephone span{line-height:33px;min-width: 20px;text-align:center;color: #8d8d8d}
/* e메일 */
.form-email{display:flex;flex: 1 1 auto;border:1px solid #d5d5d5;background-color:#fff;max-width: 500px}
.form-email[tabindex="0"]:focus{outline:2px solid #dd791d}
.form-email select, .form-email input{border:0;height:38px}
.form-email span{line-height: 38px;min-width: 25px;text-align:center;color: #8d8d8d}
/* 체크박스 리스트  */
.form-checkbox{display:flex;flex-wrap:wrap;flex:0 0 100%}
.form-checkbox ~ .form-checkbox{margin-top:10px;padding-top:10px;border-top:1px dashed #ddd}
.form-checkbox label{margin:10px 10px 10px 0}
.form-checkbox .form-etc{display:flex;align-items: center}
.form-checkbox .form-etc label{flex:0 0 auto}

/* 파일 업로드 */	
.form-file-upload{position:relative;width:100%;padding-right:122px;display:block;margin:0 !important}
.form-file-upload[tabindex="0"]:focus{outline:2px solid #dd791d}
.form-file-upload input[type=file]{display:none}
.form-file-upload .file-text{display:block;height:37px;padding:0 10px;line-height:35px;font-size:0.9286rem;border:1px solid #d5d5d5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-file-upload .file-button{position:absolute;top:0;right:0;width:120px;height:37px;line-height:34px;text-align:center;background-color:#4f4f4f;border:1px solid #4f4f4f;color:#fff;transition:all 100ms ease-out}
.form-file-upload .file-button ::before{color:inherit}
.form-file-upload .file-button:hover{border:1px solid #e47e20;background-color:#fff;color:#4f4f4f}
/* 이미지 파일 업로드 */
.form-file-img{position: relative;border:1px solid #ddd;text-align:center;min-width: 200px;margin-right:10px}
.form-file-img[tabindex="0"]:focus{outline:2px solid #dd791d}
.form-file-img .cms-img{display:block;overflow:hidden;position: relative;width:100%;height:100%;background-color:#dadada}
.form-file-img .cms-img img{display:block;position: absolute;left: 50%;top:50%;transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%)}
/* 첨부 파일 목록 */
.form-file-download{position:relative;width:100%;height:37px;padding-right:30px;border:1px solid #d5d5d5}
.form-file-download .file-text{display: block;padding:0 10px;line-height:35px;font-size:0.9286rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.form-file-download .file-icon{display:inline-block;vertical-align:-1px;margin-right:2px}
.form-file-download .file-category{display:inline-block;vertical-align: -5px;margin-right:2px}
.form-file-download .file-button{position:absolute;top:0;right:0;width:30px;height:37px;line-height:100%;text-align:center}
.form-file-download:hover{border-color: #e47e20}
.form-file-download .file-text:hover .file-icon:before{color: #e47e20}
.form-file-download .file-button:hover :before{color: #e47e20}
.form-file-upload + .form-file-upload,
.form-file-upload + .form-file-download,
.form-file-download + .form-file-download{margin-top: 5px !important}
.form-file-summary{margin-top:5px}
.form-file-summary textarea{height:90px}
/* 검색 가능한 선택 상자 */
.form-select-searchbox{z-index:10;position:relative;height:36px;flex:1 0 auto}
.form-select-searchbox-toggle{z-index:10;position:relative;height:inherit;padding:0 30px 0 10px;line-height:37px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;border:1px solid #d5d5d5;background-color:#fff;cursor:pointer}
.form-select-searchbox-toggle[tabindex="0"]:focus{border-color:#dd791d !important; outline:1px solid #dd791d !important}
.form-select-searchbox-toggle:before{content:'\e9a6';height:auto;font-family:'essentials';font-size:10px;background-color:transparent;color:#666;position:absolute;top:50%;right:10px;-ms-transform:translateY(-50%);transform:translateY(-50%)}
.form-select-searchbox-toggle:hover:before{color:#e47e20}
.form-select-searchbox-toggle:after{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px)}
.form-select-searchbox-container{display:none;position:absolute;top:-5px;left:-5px;width:calc(100% + 10px);padding:47px 5px 5px 5px;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0, 0, 0, 0.5)}
.form-select-searchbox-options{margin-top:5px;max-height:200px;overflow-y:auto}
.form-select-searchbox-option{padding: 5px 10px;line-height: 110%;cursor:pointer}
.form-select-searchbox-option.is-selected{background-color:#e47e20;color:#fff}
.form-select-searchbox-option:hover{background-color:#efefef;color:#000}
.form-select-searchbox-not{padding:10px 0;text-align:center}

.form-select-searchbox.opened{z-index:200000}
.form-select-searchbox.opened .form-select-searchbox-container{display:block}
.form-select-searchbox.opened .form-select-searchbox-toggle{border-color:transparent}
.form-select-searchbox.opened .form-select-searchbox-toggle:after{border:2px solid #00a3ff;border-radius:4px}

/* 입력 후 버튼 클릭하는 경우 */
.form-button{display:flex}
.form-button button{flex:0 0 auto;margin-left:5px}

/* 수직 정렬 */
.form-align-vertical{display:flex;flex-wrap:wrap;}
.form-align-vertical .formbox{display:block;border:0}
.form-align-vertical .formbox ~ .formbox{border:0}
.form-align-vertical .form-label{justify-content:flex-start}
.form-align-vertical .form-label .label{font-size:1rem}
.form-align-vertical .form-normal{border:0 !important}

.formbox .form-align-vertical{flex:1 1 auto;border-left:1px dashed #ddd}
.formbox .form-align-vertical .error-message{margin-left:15px}
.formbox .form-align-vertical .formbox .error-message{margin-left:0}

@media screen and (max-width:1000px) {
	.formbox .form-align-vertical{padding:15px;border-left:0;background-color: #f9f9f9}
}


 

 

.basis-50px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:50px !important}
.basis-60px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:60px !important} 
.basis-70px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:70px !important}
.basis-80px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:80px !important}
.basis-90px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:90px !important}
.basis-100px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:100px !important}
.basis-150px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:150px !important}
.basis-200px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:200px !important}
.basis-300px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:300px !important}
.basis-400px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:400px !important}
.basis-500px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:500px !important}
.basis-600px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:600px !important}
.basis-700px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:700px !important}
.basis-800px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:800px !important}
.basis-900px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:900px !important}
.basis-1000px{flex-shrink:0 !important;flex-grow:0 !important;flex-basis:1000px !important}
.flex-auto{flex:0 0 auto !important}




.mt10{margin-top:10px !important}
.mt20{margin-top:20px !important}
.mt30{margin-top:30px !important}
.mt40{margin-top:40px !important}
.mt50{margin-top:50px !important}



/**********************************************************
	
	공통 tooltip (2021 정진환)

**********************************************************/
.common-tooltip{display:none;min-width:300px;padding:20px;text-align:left;border-radius:20px;border:1px solid #e47e20;box-shadow:2px 0 10px 0 rgba(0, 0, 0, 0.25);background-color:#fff}
.common-tooltip .common-tooltip-field{display:flex;min-width:100%;color:#5d5a61}
.common-tooltip .common-tooltip-field ~ .common-tooltip-field{border-top:1px dashed #dcdcdc;padding-top:10px;margin-top:10px}
.common-tooltip .common-tooltip-field:nth-child(1){margin-bottom:10px;font-weight:600;font-size:17px;color:#363636}
.common-tooltip .common-tooltip-field:nth-child(1) .common-tooltip-label{display:none}
.common-tooltip .common-tooltip-label{min-width:65px;margin-right:5px}
.common-tooltip .common-tooltip-pt{flex:1 auto;line-height:135%}
.common-tooltip .common-tooltip-close{position:absolute;top: 22px;right: 15px;width:15px;height:15px;background:url(../../../../images/name/user/styleguide/tooltip-close.png) no-repeat 0 0}

/**********************************************************
	
	공통 Datepicker (2021 정진환)

**********************************************************/
input[type=text].fn-datepicker{display:inline-block;width:200px;padding-left:30px;text-align:center;background:url(../../../../images/name/user/styleguide/fn-datepicker.png) 10px 50% no-repeat}

.cms-datepicker{display:none;z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5)}

.cms-datepicker-wrap{width: 360px;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:#fff;box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.3);padding: 10px;border-radius: 5px}

.cms-datepicker-head{position:relative;height:50px;padding:0 100px 0 50px;background-color:#e47e20;color:#fff;border-radius: 5px}
.cms-datepicker-head>button,
.cms-datepicker-head>button :before{color:inherit}
.cms-datepicker-head>button{position:absolute;top:0;width: 50px;height: inherit;opacity: 0.8}
.cms-datepicker-head>button:hover{opacity:1}
.cms-datepicker-head .cms-datepicker-button-prev{left:0}
.cms-datepicker-head .cms-datepicker-button-next{right:0}
.cms-datepicker-head .cms-datepicker-date{height:inherit;line-height:50px;text-align:center;color:inherit}
.cms-datepicker-head .cms-datepicker-date>button{flex: 0 0 auto;font-size: 18px;font-family:'Roboto', sans-serif;color:inherit}
.cms-datepicker-head .cms-datepicker-date>button>span{display:block;padding:0 3px 3px;border-bottom:1px solid transparent}
.cms-datepicker-head .cms-datepicker-date>button:hover>span{border-color:#fff}
.cms-datepicker-head .cms-datepicker-button-today{right:50px;font-weight:300}

.cms-datepicker-calendar table{table-layout:fixed;width:100%;border-spacing:0;border-collapse:collapse;text-align:center}
.cms-datepicker-calendar table th, .cms-datepicker-calendar table td{height:40px}
.cms-datepicker-calendar table th{font-weight:400;border-bottom:1px solid #ddd}
.cms-datepicker-calendar .sun{color:red}
.cms-datepicker-calendar .sat{color:blue}

.cms-datepicker-list{display:flex;flex-wrap:wrap;margin:10px 0}
.cms-datepicker-list .body-item{flex:0 1 25%;padding:3px}
.cms-datepicker-list .body-item span{display:block;padding:10px;border-radius:3px;border:1px solid #ddd;font-size: 13px;line-height:110%;font-family:'Roboto', sans-serif;color:inherit}
.cms-datepicker-list .body-item.is-selected span{border-color:#e47e20;color: #e47e20}
.cms-datepicker-list .body-item.is-selected.___year{flex-basis:100%}


.cms-datepicker-time{border: 1px solid #adadad;border-radius: 5px;overflow: hidden}
.cms-datepicker-time:after{content:'';display:block;clear:both}
.cms-datepicker-time .form-selectbox{float:left;min-width:auto;width:33.33%}
.cms-datepicker-time .form-selectbox select{border-width:0;min-width: 0}

.cms-datepicker-button{z-index:1;position:relative;display:flex;margin-top: 5px}
.cms-datepicker-button>div{flex: 1 1 50%;}
.cms-datepicker-button>div ~ div{margin-left:5px}
.cms-datepicker-button button{width:100%;}

.cms-datepicker-calendar-day{position:relative;width:28px;height:28px;margin:0 auto;line-height:28px;border-radius:100%;outline:0;font-weight: 500;cursor:pointer;font-family:'Roboto', sans-serif}
.cms-datepicker-calendar-day.is-today{
    color: #fff;
    background-color: #333;
}
.cms-datepicker-calendar-day.is-selected{background-color:#e47e20;color:#fff}

/**********************************************************
	
	공공누리 라이센스 (2021 정진환)

**********************************************************/
.cms-license{margin-top:40px;padding:20px;border:1px solid #ddd}
.cms-license:after{content:'';display:block;clear:both}
.cms-license .cms-license-img{float:left;margin-right:20px}
.cms-license .cms-license-type{overflow:hidden}
.cms-license .cms-license-type .cms-license-type-title{display:block;line-height:140%;font-weight:500;font-size:1.143rem;color:#000}
.cms-license .cms-license-type .cms-license-type-title span{display:inline-block;vertical-align:bottom;margin-bottom:-3px;padding:7px 10px;line-height:100%;font-size:0.8571rem;background-color:#e0eaff;color:#000}
.cms-license .cms-license-type .cms-license-type-list{margin-top:10px}
.cms-license .cms-license-type .cms-license-type-list li{position:relative;padding-left:8px;line-height:135%}
.cms-license .cms-license-type .cms-license-type-list li ~ li{margin-top:5px}
.cms-license .cms-license-type .cms-license-type-list li:before{content:'';position:absolute;top:8px;left:0;width:3px;height:3px;border-radius:100%;background-color:#ccc}
@media screen and (max-width:767px){
	.cms-license .cms-license-img{float:none}
	.cms-license .cms-license-type{margin-top:10px}
}

/* 탭 버튼 */
.tab-list{position:relative;margin:20px 0;border:solid #dcdcdc;border-width:1px 0 0 1px}
.tab-list:after{content:'';display:block;clear:both}
.tab-list .tab-item{position:relative;float:left;display:table;min-height:56px}
.tab-list .tab-item a{display:table-cell;padding:0 20px;vertical-align:middle;border:solid #dcdcdc;border-width:0 1px 1px 0}
.tab-list .tab-item a span{z-index:1;position:relative;display:block;line-height:145%;font-size:15px;color:#666;background:url(../../../../images/name/user/styleguide/tab-list-bullet-normal.png) no-repeat 100% 50%}
.tab-list .tab-item a:hover{color:#e47e20}
.tab-list .tab-item a.is-selected::before{content:'';position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border:2px solid #e47e20}
.tab-list .tab-item a.is-selected{ position:relative}
.tab-list .tab-item a.is-selected span, 
.tab-list .tab-item a.is-selected:hover span{background:url(../../../../images/name/user/styleguide/tab-list-bullet-selected.png) no-repeat 100% 50%;color:#e47e20}
.tab-list.col-2 .tab-item{width:50%}
.tab-list.col-3 .tab-item{width:33.33%}
.tab-list.col-4 .tab-item{width:25%}
.tab-list.col-5 .tab-item{width:20%}
.tab-list.col-6 .tab-item{width:16.66%}

/* 헤딩 */
h4.heading{margin-bottom:20px;font-weight:500;font-size:24px;color:#121212}
*+h4.heading{margin-top:40px}
script+h4.heading{margin-top:0}
input[type="hidden"]+h4.heading{margin-top:0}
h5.heading{margin-bottom:10px;font-weight:500;font-size:21px;color:#cd7420}
*+h5.heading{margin-top:30px}
h6.heading{margin-bottom:10px;padding-left:18px;font-weight:400;font-size:20px;color:#121212;background:url(../../../../images/name/user/styleguide/heading-bullet-level-3.png) no-repeat 0 5px}
*+h6.heading{margin-top:25px}
strong.heading{display:block;margin:20px 0 10px;padding-left:15px;font-weight:400;font-size:18px;color:#cd7420;background:url(../../../../images/name/user/styleguide/heading-bullet-level-4.png) no-repeat 0 11px}

/* 들여쓰기 */
.indent{margin-left:18px}
.indent .indent{margin-left:15px}

/* 문단형 텍스트 */
p.text{line-height:150%}
* ~ p.text{margin-top:10px;}

/* 목록형 텍스트 */
ul.list, ol.list{margin-top:10px}
ul.list li, ol.list li{position:relative;margin-top:5px;line-height:150%}
ul.list>li{padding-left:12px;background:url(../../../../images/name/user/styleguide/list-bullet-large.png) no-repeat 0 9px}
ol.list>li{padding-left:12px}
ul .list>li, ol .list>li{padding-left:13px;background:url(../../../../images/name/user/styleguide/list-bullet-small.png) no-repeat 0 11px}
ol.list{counter-reset:item}
ol.list>li{padding-left: 21px}
ol.list>li::before{content:counters(item, ".");counter-increment:item;position:absolute;top: 3px;left:0;display:inline-block;width: 16px;height: 16px;line-height: 14px;font-size: 10px;text-align:center;border-radius:100%;border:1px solid #454545}


/* 바둑판 정렬 이미지 */
.images-grid{display:flex;flex-wrap:wrap;margin:20px 0}
.images-grid .images-grid-item{flex:0 1 auto;width:100%;text-align:center}
.images-grid .images-grid-item ~ .images-grid-item{margin-left:16px}
.images-grid .images-grid-item .images-grid-summary{margin-top:10px}

.images-grid[class*="col-"] .images-grid-item .images-grid-thumbnail{position:relative;overflow:hidden;padding-top: 75%}
.images-grid[class*="col-"] .images-grid-item .images-grid-thumbnail img{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%, -50%)}

.images-grid.col-2 .images-grid-item{width:calc(50% - 8px)}
.images-grid.col-2 .images-grid-item:nth-child(2n+1){margin-left:0}

.images-grid.col-3 .images-grid-item{width: calc(33.33% - 11px);}
.images-grid.col-3 .images-grid-item:nth-child(3n+1){margin-left:0}

.images-grid.col-4 .images-grid-item{width: calc(25% - 12px);}
.images-grid.col-4 .images-grid-item:nth-child(4n+1){margin-left:0}

.images-grid ~ .images-grid{padding-top:20px;border-top:1px dashed #ddd}


/* 표 */
.table-def{table-layout:fixed;border-collapse:collapse;border-spacing:0;width:100%;text-align:center;border-top:2px solid #adadad}
.table-def th, .table-def td{line-height:150%;padding:0.625rem;vertical-align:middle;border:solid #d5d5d5;border-width:0 1px 1px 0}
.table-def th{background-color:#eee;color:#000}
.table-def th:first-child, w.table-def td:first-child{border-left-width:0}
.table-def th:last-child, .table-def td:last-child{border-right-width:0}
.table-def thead th{height:55px;font-weight:500}
.table-def tbody th{font-weight:400}
.table-def tfoot th{font-weight:500}
.table-def tfoot td{border-width:0 0 1px;color:#000}
.table-def td[rowspan]{border-left-width:1px}
.table-def td[rowspan]:nth-child(1){border-left:0}

/* 오류 화면 */
.alert-error{display:flex;align-items:center;justify-content:center;height:100vh;overflow:auto;padding:50px 20px;background-color:#f2f3f0}
.alert-error .error-wrapper{max-width:650px;text-align:center}
.alert-error .error-logo{padding-bottom:40px;margin-bottom:40px;border-bottom:2px solid #000}
.alert-error .error-img{margin-bottom:40px}
.alert-error .error-title{font-family:'S-Core Dream WF', sans-serif;font-weight:400;font-size:28px;color:#000}
.alert-error .error-title span{color:#f1781a}
.alert-error .error-text{margin:40px 0 60px;line-height:180%;font-size:16px}
.alert-error .error-buttons{padding-top:30px;border-top:1px solid #555}
.alert-error .error-buttons button{margin-right:10px}
@media (max-width:700px) {
.alert-error{padding:20px}
.alert-error .error-logo{padding-bottom:30px;margin-bottom:30px}
.alert-error .error-img{margin-bottom:30px}
.alert-error .error-img img{max-width:25%}
.alert-error .error-title{font-size:20px}
.alert-error .error-text{margin:30px 0 40px;padding:0 20px;font-size:15px;text-align:left}
.alert-error .error-text br{display:none}
.alert-error .error-buttons{padding-top:20px}
}

/* 페이지 준비중 */
.alert-ready{padding:50px 0 100px;text-align:center}
.alert-ready p{margin-top:30px;font-weight:500;font-size:18px;line-height:180%;color:#000}

/* 개편 준비중 */
.site-ready{position:relative;min-height: 100vh;padding: 50px 20px;text-align:center;background-color:#ededed}
.site-ready::before{content:'';position:absolute;top:0;left:0;width:100%;height:500px;background:url(../../../../images/name/user/styleguide/ready-bg.png) no-repeat 50% 100% / cover}
.site-ready .site-ready-wrapper{position:relative;}
.site-ready .site-ready-title{margin-top: 50px;font-family:'S-Core Dream WF', sans-serif;}
.site-ready .site-ready-title p{font-size:28px;color:#fff}
.site-ready .site-ready-title p b{font-size:42px}
.site-ready .site-ready-title p ~ p{margin-top:30px}
.site-ready .site-ready-monitor{margin-top: 50px;}
.site-ready .site-ready-descript{position:relative;margin:50px auto 0;padding: 50px 50px 50px 180px;background-color:#fff;border-radius:30px;max-width:880px;text-align:left;font-size:18px;color:#000;line-height:150%;}
.site-ready .site-ready-descript .break{display:none}
.site-ready .site-ready-wraning{width:100px;position:absolute;top: 26px;left:50px;}

@media screen and (max-width:1400px) {
	.site-ready{padding:30px}
	.site-ready::before{height:255px}
	.site-ready .site-ready-logo{width:70px;margin:0 auto;}
	.site-ready .site-ready-title{margin-top:20px}
	.site-ready .site-ready-title p{font-size:18px}
	.site-ready .site-ready-title p b{font-size:22px}
	.site-ready .site-ready-title p ~ p{margin-top:10px}
	.site-ready .site-ready-monitor{width:200px;margin-top:30px}
	.site-ready .site-ready-descript{max-width: 475px;margin-top:10px;border-radius:20px;padding:30px;font-size:15px;text-align:center}
	.site-ready .site-ready-descript .break{display:block}
	.site-ready .site-ready-wraning{position:static;display:block;width:50px;margin:0 auto 20px;}
}


/* Datepicker */
input[type=text].fn-datepicker{display:inline-block;width: 233px;padding-left:30px;text-align:center;background:url(../../../../images/name/user/styleguide/fn-datepicker.png) 10px 50% no-repeat}
.cms-datepicker{display:none;z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5)}
.cms-datepicker-wrap{width:300px;position:absolute;top:50%;left:50%;-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:#fff;box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.3)}
.cms-datepicker-head{position:relative;height:50px;padding:0 100px 0 50px;background-color: #3e4550;color:#fff;}
.cms-datepicker-head button,
.cms-datepicker-head button :before{color:inherit}
.cms-datepicker-head button{opacity: 0.7;}
.cms-datepicker-head button:hover{opacity:1}
.cms-datepicker-head .cms-datepicker-button-prev{left:0}
.cms-datepicker-head .cms-datepicker-button-next{right:0}
.cms-datepicker-head .cms-datepicker-date{display: flex;justify-content: center;height:inherit;line-height: 50px;text-align:center;color:inherit}
.cms-datepicker-head .cms-datepicker-date span{position:static;font-family:'Roboto', sans-serif;color:inherit}
.cms-datepicker-head .cms-datepicker-date span{display:inline-block;font-size:1.286rem}
.cms-datepicker-head .cms-datepicker-button-today{right:50px;font-weight:300}

.cms-datepicker-calendar table{table-layout:fixed;width:100%;border-spacing:0;border-collapse:collapse;text-align:center}
.cms-datepicker-calendar table th, .cms-datepicker-calendar table td{height:40px}
.cms-datepicker-calendar table th{font-weight:400;border-bottom:1px solid #ddd}
.cms-datepicker-calendar .sun{color:red}
.cms-datepicker-calendar .sat{color:blue}

.cms-datepicker-time{}
.cms-datepicker-time:after{content:'';display:block;clear:both}
.cms-datepicker-time .form-selectbox{float:left;min-width:auto;width:33.33%}
.cms-datepicker-time .form-selectbox select{border-width:0}

.cms-datepicker-button{z-index:1;position:relative}
.cms-datepicker-button:after{content:'';display:block;clear:both}
.cms-datepicker-button button{height:40px}

.cms-datepicker-calendar-day{position:relative;width: 28px;height: 28px;margin: 0 auto;line-height: 28px;border-radius:100%;outline:0;cursor:pointer}
.cms-datepicker-calendar-day.is-today{/* background-color:#ddd; */}
.cms-datepicker-calendar-day.is-selected{background-color:#e47e20;color:#fff}


/* 반응형 표 */
.response-table{overflow:auto}
.response-table table{min-width:820px}

.direct-connection{text-decoration:underline;color:#f37a1a !important}


/* 탑 박스 */
.topbox{display:flex;position:relative;padding-top:4px;margin-bottom:30px;border:solid #d1d1d1;border-width:0 1px 1px;background:url(../../../../images/name/user/styleguide/topbox-border.png) repeat-x 100% 0}
.topbox::before{content:'';position:absolute;top:0;left:0;width:186px;height:4px;background-color:#ff8625}
.topbox .topbox-icon{width:186px;padding:30px 0;}
.topbox .topbox-icon .topbox-icon-def{display:block;width:110px;height:110px;margin:0 auto;border-radius:100%;background:#eae4df url(../../../../images/name/user/styleguide/topbox-icon.png) no-repeat 50% 50%}
.topbox .topbox-descript{width:calc(100% - 186px);padding:30px}
.topbox .topbox-descript .topbox-descript-title{display:block;margin-bottom:15px;line-height:135%;font-weight:500;font-size:24px;color:#000} 
.topbox .topbox-descript p{line-height:145%;}
.topbox .topbox-descript p ~ p{margin-top:10px}
@media screen and (max-width:670px) {
	.topbox .topbox-icon{display:none}
	.topbox .topbox-descript{width:100%;padding:20px;}
}


/* 강조형 */
.text-highlight{font-weight:700;text-decoration:underline;}
.text-bold{font-weight:700}


.borderbox{border:1px solid #ddd;border-radius:5px; padding:25px;}