@charset "utf-8";
.priva-form{padding-left:10px !important;padding-right:10px !important}
.priva-form ul li{padding:8px 0}
.priva-box{border: #ddd 1px solid;padding: 35px;border-radius: 15px;margin-top: 40px;}
.priva-box h3{margin:0 0 10px}
#step1RegForm .page-title{margin-top:0px}
#step2RegForm .page-title{margin-top:0px}
.civil_edu{padding:10px;margin-bottom:20px}
.civil_edu02{padding:25px 10px;border-top:#ddd 1px solid;font-size:19px;text-decoration:underline}
.civil_edu03 ul li{padding:15px 10px;border-bottom:#ddd 1px solid}
.civil_edu03 ul li:last-child{border:#aaa 1px solis}
.body-bg {background-color: #EBF0E9;}
#codemap .st2{display:none}
.gutter{line-height:40px;padding-left:2px}
#cmmn-pos-modal{margin-top:0px !important;margin-left:0px !important;top:100px !important;transform: translate(-50%, 0%); z-index:90;}
#cmmn-pos-modal .pop-titlearea h2{font-size:19px;line-height:30px}
#cmmn-pos-modal .pop-titlearea{padding:13px 30px}
#cmmn-pos-modal .pop-conts.scroll{margin:15px 0px;padding:15px 30px 0px 30px;height:auto}
.pop-btnbottom{width:100%;text-align:center;height:70px}
.pop-btnbottom a{margin:15px 0;padding:8px 25px;background:#333;color:#fff;border-radius:5px}
.btn-rightsearch {line-height:40px}
#forestCntList li img{width:5%;vertical-align:middle}
#forestCntList li span{margin:0 10px;padding:4px 15px;border-radius:15px;color:#fff;text-align:center}
#forestCntList li span.fire_red{background:red}
#forestCntList li span.fire_gray{background:#555}
#forestCntList li span.fire_green{background:green}
#chart span.none-chart{display:block;width:100%;text-align:center;padding-top:350px;font-size:1.25rem;
background: url('../images/sub/people-img.png') no-repeat center 100px;}


/*피해자정보폼*/
.security-number-form {display: flex;width: 100;}
.security-number-info {display: flex;width: 100%;}
.info-formareal-group .input-box-group {display: flex;width: 100%;margin-top: 5px;flex-wrap: wrap;gap: 10px;}
.info-formareal-group .input-box-group .input-box-group-cnt1 input{flex: 1;}
.info-formareal-group .input-box-group .input-box-group-cnt2 {display:flex;width: 100%;gap:10px;}
.info-formareal-group .input-box-group .input-box-group-cnt3 {display:flex;width: 100%;gap:10px;}
.info-formareal-group .input-box-group .input-box-group-cnt3 {display:flex;width: 100%; flex-direction: column;}
.info-formareal-group .input-box-group .exInfo {display: b;display:flex;width: 100%;} 
.info-formarea1.info-formareal-group {flex-direction: column;}
.bbs-view li .input-box-group .list-txt {padding-left: 0px;width: 100;}
.input-box-group-cnt1 {display:flex;gap: 10px;flex-wrap: wrap;}


.info-address.info-address-custom .info-formarea {flex-wrap: nowrap}
.info-address.info-address-custom .info-formarea input {width: 100%;}
.info-address.info-address-custom .info-formarea .btn-address {width: 16%;}
.info-address.info-address-custom .info-formarea input:last-of-type {width: 87%;}
.info-address.info-address-custom .info-formarea input{ width: auto;}
.info-address.info-address-custom .info-formarea .btn-address {width:auto;}
.security-number-info input {width: 100%;}

@media (max-width: 640px) {
		.form-custom2 .bbs-view li{flex-direction: column;  align-items: flex-start; text-align:left;gap:10px;}
		 .info-titarea1{width: 100% !important;}
	 .info-formarea .dropdown-section {flex-basis: 25%;}
		#sferCryalTelno1 {flex-basis:25%;}
	}
/* 일반게시판 - 목록 */
.board-toparea {
	background-color: #f7fbff;
	border:1px #f1f7fc solid;
	border-radius: 15px;
	padding:20px 30px 10px 30px;
}
.board-toplist li{
    display: flex;
    padding-bottom:10px;
    position: relative;
    line-height:2;
}
.board-toplist li .tit {
    font-size: 18px;
    color:#222;
    font-weight: 600;
    flex-basis: 140px;
    padding-right:0px;
}
.form-field {
    display: flex;
    vertical-align: top;
    width:100%
}

.board-toplist li input, .board-toplist li select {
    margin:0 2px;
    border-radius: 8px; 
}
.board-toplist li input {
	margin-right:10px;
}
 .board-toplist li select {
    margin:0 2px;
    border-radius: 8px;
    width:33.333333%;  
    min-width:140px;
}

.form-field select, .form-field input {
    display: inline-block;
    border:1px #acacac solid;
    border-radius: 10px;
    height:38px;
    line-height:38px;
    padding: 0 13px;
    font-size:16px;
    color:#666;
}
.form-field .dropdown-section {
    flex-basis:175px;
    background-color:#fff;
    flex-shrink: 1;
    border-radius: 8px;
    /*padding:0 2px*/ /*자료실 셀렉트 박스 패딩 사이즈 조정*/
    padding:0;
}
.form-field input {
    height:40px;
    line-height:40px;
    flex-grow: 1;
}
.board-topbtn {
    width:100%;
    border-top:1px #e4e4e4 dashed;
    display: flex;
    justify-content: space-between;
    padding-top:20px;
    margin-top:10px;
}


.btn { 
    display: inline-block; 
    padding: 10px 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #d5d5d5; 
    background-color: #fff; 
    color: #666; 
    line-height: 1; 
    text-decoration: none; 
    cursor: pointer; 
    border-radius: 10px; 
    font-weight: bold; 
    letter-spacing:normal; 
    transition:color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in; -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in;}

.btn:focus {/*border-color: #1f1f1f;*/ box-shadow: 0 2px 4px -2px rgba(0,0,0,.2);} 
.btn:hover {
    border-color: #959595; 
    color:#222
}
.btn-blue {
    border-style: solid; 
    border-width: 1px; 
    border-color: #1764c4; 
    background-color: #1764c4; 
    color: #fff; 
}
.btn-blue:hover {
    border-style: solid; 
    border-width: 1px; 
    border-color: #19539c; 
    background-color: #19539c; 
    color: #fff; 
}
/* btn area*/
.button-area {
    width:100%;
    margin-top:0px;
    display: flex;
    justify-content: space-between;
}
.button-rightarea {
    width:100%;
    text-align: right;
}

.board-total {
    display: flex;
    justify-content: space-between;
    margin-top:30px;
    margin-bottom:15px;
}
.board-count {
    font-size: 18px;
    color:#666;
    padding-bottom:0px;
    padding-top:12px;
    height: 32px;
}
.board-count span {
    color:#1764c4;
    font-weight: 600;
}
.board-searcharea {
    text-align: right;
}

.board-search {
    border-radius: 0 5px 5px 0;
    height:40px;
    width:40px;
    font-size: 0;
    background: #222 url('../images/sub/board-reset.png') no-repeat 50% 50%;
}
.board-searcharea {font-size: 0; display: flex;}
.board-searcharea input[type=text] {
    border-radius: 5px 0 0 5px;
    border-right:0px
}


.board-searcharea input[type=text] {
    height:40px;
    line-height:40px;
    font-size: 16px;
    color:#666;
    border:1px #acacac solid;
    border-right:0px;
    margin-left:3px;
    padding-left : 10px;
}
.board-searcharea input[type=text]::placeholder {
    color:#666
}
.board-list {
    width:100%;
    margin-top:10px;   
}
.board-list table {
    width:100%;
    border-top:2px #222 solid;
    
}
.board-list .tableTopFixed {
	border-top:none;
}
.board-list .tableTopFixed thead {
	position:sticky;
	top:2px;
}
.board-list .tableTopFixed thead:after {
	display:block;
	content:"";
	position:absolute;
	top:-1px;
	left:0;
	width:100%;
	height:2px;
	background:#222;
}
.board-list table thead th{
    font-size:20px;
    color:#222;
    text-align: center;
    font-weight: 600;
    padding:20px 0;
    border-bottom:1px #ddd solid;
    background-color: #f9f9f9;    
}
.board-list table tbody td {
    border-bottom: 1px solid #EAEEEF; 
    color: #666;
    background-color: #fff;
    text-align: center;
    padding:18px;
    font-size: 18px;
}
.board-list table tbody td span {
    display: inline-block;
    width: 30px;
    height: 30px;
    padding-top:4px;
    border-radius: 50%;    
    background-color: #e8eaef;
}
.board-list table tbody td.tit {
    text-align:left;
    color:#000;
    font-weight: 600;
}
.board-list table tbody td.tit a{
    text-align:left;
    color:#000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.board-list table tbody td.tit:hover {
    text-decoration: underline;
}
.board-list table tbody td.tal {
    text-align: left;
}
.board-list table tbody td label {
    font-size: 0;
}
#baseTbl1 tbody td{padding:10px;font-size:14px}
#baseTbl1 thead th{padding:15px;font-size:16px}
.board-view {
    width:100%; 
}
.board-view ul {
    width:100%;
    border-top:2px #222 solid;
    
}
.board-view .title {
    font-size:22px;
    color:#222;
    font-weight: 600;
    padding:20px 0 0 10px;
}
.view-info {
    font-size: 16px;
    color:#666;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    padding:15px 0px;
    width: 100%;
    border-bottom:1px dashed #ddd
}
.view-info div {
    display: inline-block;
    padding-right:40px
}
.view-info div span {
    color:#222
}
#crit-view .view-info{font-size:18px;font-weight:600}
.add-filearea {
    padding:10px;
    flex-wrap: wrap;
    border:0px;
    background: #f9f9f9
}

.add-filelist a {
    display:block;
    padding:5px 40px 5px 25px;
    font-size: 16px;
    color:#222;
    vertical-align: top;
}
.add-filelist {
    flex-wrap: wrap;
}

/* 문서 확장자별 아이콘 */
.icon-hwp {
    background: url('../images/sub/hwp-icon.png') no-repeat 0% 0%;
}
.icon-pdf {
    background: url('../images/sub/pdf-icon.png') no-repeat 0% 0%;
}
.icon-xlx {
    background: url('../images/sub/xlx-icon.png') no-repeat 0% 00%;
}
.icon-ppt {
    background: url('../images/sub/ppt-icon.png') no-repeat 0% 00%;
}
.icon-word {
    background: url('../images/sub/word-icon.png') no-repeat 0%050%;
}
.icon-zip {
    background: url('../images/sub/zip-icon.png') no-repeat 0% 00%;
}
/* 문서 확장자별 아이콘 */
.notice-datailarea {
	line-height:26px;
    padding:35px 10px;
    border-top:1px #ddd solid;
    border-bottom:1px #ddd solid;
}

.detail-imgarea img {
    max-width: 100%;
    height:auto;
    object-fit: contain;
}
.pre-list {
    height: 50px;
    line-height: 50px;
    border-bottom:1px solid #eee;
    font-size: 16px;
    color:#666;
    transition:  0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    padding-left:10px
} 
.pre-list a{
    font-size: 16px;
    color:#666;
    display:unset
} 
.pre-list a:hover {
    color:#222;
    text-decoration: underline;
} 
.pre-list span {
    display: inline-block;
    color:#888;
    background: url('../images/sub/pre-list.png') no-repeat 100% 50%;
    padding-right:25px;
    margin-right:30px;
} 
.pre-list a span:hover {
    color:#0056aa;
    background: url('../images/sub/pre-list1.png') no-repeat 100% 50%;
}  
.next-list {
    height: 50px;
    line-height: 50px;
    border-bottom:1px solid #ddd;
    font-size: 16px;
    color:#666;
    transition:  0.2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    padding-left:10px
}  
.next-list a{
    font-size: 16px;
    color:#666;
    display:unset
}  
.next-list a:hover{
    color:#222;
    text-decoration: underline;
}  
.next-list span {
    display: inline-block;
    color:#666;
    background: url('../images/sub/next-list.png') no-repeat 100% 50%;
    padding-right:25px;
    margin-right:30px;
}
.next-list a span:hover {
    color:#0056aa;
    background: url('../images/sub/next-list1.png') no-repeat 100% 50%;
}   

/* gallery list */
.gallery-list {
    width:100%;
    margin-top:10px;   
    border-top:2px #222 solid;
}
.gallery-list ul {
    width:100%;
    border-bottom:1px #eee solid;
    padding:30px 0; 
    display: flex;
    flex-wrap: wrap;
    /*justify-content : space-between;*/
    gap: 30px 30px
}
.gallery-list ul:last-child {
    border-bottom:1px #d5d5d5 solid;
}
.gallery-list ul li{
    box-sizing: border-box;   
    width: calc(20% - 30px); 
}
.gallery-imgarea {
    margin-right:0px;
}
.gallery-imgarea>a {
	width:100%;
}

.gallery-list ul li:nth-child(4) .gallery-imgarea,
.gallery-list ul li:nth-child(8) .gallery-imgarea {
    margin-right:0;
}

.gallery-list ul li img {
 width: 100% !important;
 height: auto !important;
 object-fit: contain;
 border-radius: 10px;
 overflow: hidden;
}

.gallery-info {
    padding-top:15px;
}
.gallery-info a {
    font-size: 18px;
    color:#222;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.gal-infolist {
    padding-top:5px
}
.gal-infolist span {
    display: inline-block;
    font-size: 16px;
    color:#666;
    background: url('../images/sub/gallery-bar.png') no-repeat 12px 45%;
    padding-left:25px;
}
.gal-infolist span:first-child {
    padding-left:0;
    background-image: none;
}


/* 소관부서 */
.department-charge {
    background:#f8f9fb;
        border:1px #ddd solid;
    border-radius:10px;
    padding:20px 20px 15px 20px;    
    display: flex;
    margin-top:30px
}
.d-name {
    font-weight: 700;
    font-size: 20px;
    color:#484e66;
    background: url('../images/sub/depart.png') no-repeat 0 0;
    padding-left:35px;
}
.d-list {
    padding-left:20px;
    font-size: 18px;
    color:#666;
    margin-bottom:5px;
    line-height: 1.6;
}


/* form layout */
.text-field-label {
    padding: 5px 0; 
    color: #222; 
    font-size: 16px; 
    font-weight: 700;
}
.form-input {
    display: block; 
    width: 100%; 
    min-height: 40px; 
    padding: 10px 12px; 
    border: 1px solid #bbb; 
    border-radius: 6px; 
    background-color: #fff; 
    font-size: 14px; color: #2B2A29; 
    line-height: 20px;
}
.form-input::-webkit-input-placeholder {font-size: 16px;}
.form-input-text {border-color: #bbb; background-color: #FAFAFA;}

.text-field-row {display: flex; align-items:normal;}
.text-field-row.w-auto {flex-wrap: wrap;}
.text-field-row.w-auto > .text-field {flex: 0 0 auto;}
.text-field-row > .text-field-label {
    padding: 11px 11px 5px; 
    color: #2B2A29; 
    font-size: 16px; 
    font-weight: 700;
}
.text-field-row > .text-field {flex: 1;}
.text-field-row > .text-field ~ .text-field {margin-left: 40px;}

.text-field-input {display: flex; align-items: center;}
.text-field-input > :first-child {flex: 1;}
/* .text-field-input > div:not(:first-child),
.text-field-input > span:not(:first-child), */
.text-field-input > .field:not(:first-child),
.text-field-input > .nf-btn:not(:first-child) {margin-left: 12px;}
/* .text-field-input .flex-w-full {flex: 1;} */
.text-field-input .gutter {padding: 0 5px; font-size: 14px;}
.text-field-input :first-child ~ .form-input {margin-left: 6px;}
/* .text-field-input .form-input ~ .form-input {margin-left: 6px;} */

.putin-trailing-icon {position: relative;}
.putin-trailing-icon > .nf-btn-icon {
    position: absolute; 
    right: 0; top: 0; 
    border-color: transparent; 
    background-color: transparent;
}
.putin-trailing-icon > .form-input {padding-right: 42px;}

.section-search .putin-trailing-text {position: relative;}
.section-search .putin-trailing-text > .trailing-text {
    display: block; 
    position: absolute; 
    right: 0; top: 0; 
    min-height: 42px; 
    padding: 11px 14px 11px 0; font-size: 16px; color: #000; line-height: 20px;}
.section-search .putin-trailing-text > .form-input {padding-right: 34px; text-align: right;}


.mode-info .putin-trailing-text {position: relative;}
.mode-info .putin-trailing-text > .trailing-text {display: block; position: absolute; right: 0; top: 0; min-height: 42px; padding: 11px 14px 11px 0; font-size: 14px; color: #000; line-height: 20px;}
.mode-info .putin-trailing-text > .form-input {padding-right: 34px; text-align: right;}

.mode-info .text-field-label {
    padding: 5px 0 8px; 
    color: #2B2A29; 
    font-size: 14px; 
    font-weight: 600;
}

textarea.form-input, 
textarea.form-textarea {height: auto;}
.text-field-helper {padding: 6px 0 5px; font-size: 14px; color: #757575; line-height: 1.2;}
.text-field-helper.text-field-helper-w-200p {width: 200%;}
.text-field-error {padding: 6px 0 5px; font-size: 14px; color: #FF6868; line-height: 1.2;}
.form-input-error {border-color: #FF6868 !important;}

/* input */
input[type=text].form-input:read-only,
input[type=text].form-input.readonly,
input[type=password].form-input:read-only,
input[type=password].form-input.readonly,
input[type=tel].form-input:read-only,
input[type=tel].form-input.readonly,
input[type=email].form-input:read-only,
input[type=email].form-input.readonly,
input[type=number].form-input:read-only,
input[type=number].form-input.readonly,
textarea.form-input:read-only,
textarea.form-input.readonly {cursor: default;}

input[type=text].form-input:disabled,
input[type=text].form-input.disabled,
input[type=password].form-input:disabled,
input[type=password].form-input.disabled,
input[type=tel].form-input:disabled,
input[type=tel].form-input.disabled,
input[type=email].form-input:disabled,
input[type=email].form-input.disabled,
input[type=number].form-input:disabled,
input[type=number].form-input.disabled,
textarea.form-input:disabled,
textarea.form-input.disabled {background-color: #FAFAFA; color: #B6B6B6;}

input[type=text].form-input,
textarea.form-input {transition:border-color 0.1s ease-in;}
input[type=text].form-input:not(:disabled):not(.disabled):not(.readonly):not(:read-only):focus,
textarea.form-input:not(:disabled):not(.disabled):not(.readonly):not(:read-only):focus {border-color: #1764c4;}

/* DROPDOWN
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* .dropdown-section.align-end .dropdown-content {left: auto; right: 0;} */
/*콤보박스 디자인*/
select.toggle-icon2 {
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
    background:#fff url("../images/sub/select-arrow.png")no-repeat 90% center / 12px auto;
	padding:0px 40px 0px 12px;
}
/*끝*/
.dropdown-section {
    display: inline-block; 
    position: relative; 
    text-align: left; 
    color:#1f1f1f; 
    text-transform: capitalize;
}
.dropdown-section > .dropdown-label {
    z-index: 1; 
    transform: translateY(50%); 
    transition: all 0.2s ease-in-out; 
    position: absolute; 
    top: -35%; left: 10px; 
    padding: 0 10px; 
    background:#fff; 
    color: #666; 
    font-weight: 300; 
    font-size: 13px; 
    cursor: text; 
    pointer-events: none;
}
.dropdown-section .dropdown-button { 
    position: relative; 
    display: block; 
    width: 100%; 
    min-width: 100px; 
    height: 38px; 
    padding: 9px 40px 9px 12px; 
    border: 1px solid #acacac; 
    border-radius: 8px; 
    font-size: 16px; 
    line-height: 20px; 
    text-align: left; 
    color:#222; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}
.dropdown-section .dropdown-button > span {
    display: block; 
    height: 20px; 
    line-height:20px;
    overflow: hidden; 
    white-space: normal; 
    word-break: keep-all;
 }
.dropdown-section > input {
    position: absolute; 
    top:0; width: 100%; 
    min-height: 42px; 
    padding: 10px 12px 10px; 
    border: 1px solid #ddd; 
    border-radius: 6px; 
    font-size: 14px; 
    line-height: 20px; 
    opacity: 0; 
    transition: none; 
    pointer-events: none;
    
}
.dropdown-section.disabled .dropdown-button {
    background-color: #FAFAFA; 
    color: #B6B6B6; 
    cursor: default;
}
.dropdown-section.readonly .dropdown-button {
    cursor: default;
}

.dropdown-section.dropdown-selected .dropdown-button{
    color:#1f1f1f;
}
.dropdown-section.dropdown-active .dropdown-button {
    color:#1f1f1f;
}
.dropdown-section .dropdown-button .toggle-icon {
    display: inline-block; 
    position: absolute; 
    top:50%; right: 0; 
    z-index: 1; 
    background-color: transparent; 
    width:30px; height:30px; 
    border-right: 10px solid transparent; 
    transform: translateY(-50%); 
    transition: all 300ms;
    
}
.dropdown-section .dropdown-button .toggle-icon::before,
.dropdown-section .dropdown-button .toggle-icon::after {
    display: block; 
    content: ''; 
    position: absolute; 
    top: 15px; 
    left: 6px; 
    right: 6px; 
    height: 1px; 
    background-color: #6F6F6F; 
    border-radius: 4px; 
    font-size: 0; 
    transition: all 300ms;
}

.dropdown-section .dropdown-button .toggle-icon::before {
    transform: translateX(-31%) rotate(45deg);
}
.dropdown-section .dropdown-button .toggle-icon::after {
    transform: translateX(31%) rotate(-45deg);
}
/*
.dropdown-section.dropdown-active .dropdown-button .toggle-icon::before {
    background-color: #1764c4; 
    transform: translateX(-31%) rotate(-45deg);
}
.dropdown-section.dropdown-active .dropdown-button .toggle-icon::after {
    background-color: #1764c4;
    transform: translateX(31%) rotate(45deg);
}*/
.dropdown-section > button:focus {
    border-color:#bbb;
}
.dropdown-content {
    display: none; 
    overflow: hidden; 
    position: absolute; 
    top: 100%; 
    width: 100%; 
    min-width: 100px; 
    left: 0; 
    margin-top: 3px; 
    padding:0px 0; 
    background: #fff; 
    z-index: 999; /*z-index 조정*/ 
    border: 1px solid #1764c4; 
    border-radius: 5px; 
    font-size: 16px; 
    box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1);
     /*box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 2px 6px 16px 0 rgba(0,0,0,0.1);*/
}
.dropdown-section .dropdown-list {
    width:100%;
    padding:0;
    margin:0;
}
.dropdown-section .dropdown-list > li {
    padding:0;
}
.dropdown-section .dropdown-list > li > .dropdown-list-item {
    display: block; 
    width: 100%; 
    padding:8px 11px;
    background: #fff; 
    color:#000; 
    text-align: left; 
    line-height: 1.3; 
    margin:0;
    cursor: pointer;
}
.dropdown-section .dropdown-list > li > .dropdown-list-item:hover {
    background: #f4f4f4
}
.dropdown-section .dropdown-list > li > .dropdown-list-item:focus {
    background: #f4f4f4
}
.dropdown-section .dropdown-list > li > .dropdown-list-item.item-active {
    display: block; 
    color:#1764c4; 
    background: #f3f5f9; 
    width:100%;
    font-weight: 600;
}
.board-step{line-height:40px}
.step-box{border:#ddd 1px solid;border-radius:7px;padding:5px 8px;background:#f9f9f9}
/* BUTTONS
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
.nf-btn { 
    display: inline-block; 
    padding: 10px 20px; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #acacac; 
    background-color: #fff; 
    color: #555; 
    line-height: 1; 
    text-decoration: none; 
    cursor: pointer; 
    border-radius: 8px; 
    font-weight: 500; 
    font-family: 'PretendardGOV', sans-serif;
    letter-spacing:normal; 
    transition:color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in; -webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in, border-color 0.1s ease-in, box-shadow 0.1s ease-in;}
.nf-btn:focus {/*border-color: #1f1f1f;*/ 
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.2);
} 
.nf-btn-primary { 
    display: inline-block; 
    border-color: #1764c4; 
    background-color: #1764c4; 
    color: #fff; 
    font-size: 16px; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
    width:100%
}
.nf-btn-primary:hover {
    border-color: #0056aa; 
    background-color: #053d73; 
    color: #fff;
}
/* .nf-btn-primary:focus {background-color: #359c6d; color: #fff;} */

.nf-btn-primary-soft { 
    display: inline-block; 
    border-color: #ebf5ff; 
    background-color: #ebf5ff; 
    color: #1764c4; 
    font-size: 16px; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
}
.nf-btn-primary-soft:hover {
    border-color: #c7e3ff; 
    background-color: #c7e3ff;
     color: #1764c4;
    }
/* .nf-btn-primary-soft:focus {background-color: #583dc8; color: #fff;} */



.nf-btn-exel { 
    display: inline-block; 
    border-color: #167c22; 
    background-color: #167c22; 
    color: #fff; 
    font-size: 16px; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
}
.nf-btn-exel:hover {
    border-color: #116f1c; 
    background-color: #116f1c; 
    color: #fff;
}

.nf-btn-second { 
    display: inline-block; 
    border-color: #e1e1e1; 
    background-color: #f1f1f1; 
    color: #555; 
    font-size: 16px; 
    font-weight: 600; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
}
.nf-btn-second:hover {
    border-color: #d3d3d3; 
    background-color: #e1e1e1; 
    color: #333;
}
/* .nf-btn-second:focus {border-color: #ffe7e7; background-color: #ffe7e7; color: #50B587;} */
.nf-btn-gray {
    display: inline-block; 
    border-color: #666; 
    background-color: #666; 
    color: #fff; 
    font-size: 16px; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
}
.nf-btn-gray:hover {
    display: inline-block; 
    border-color: #555; 
    background-color: #555; 
    color: #fff; 
    font-size: 16px; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
}


.nf-btn-warning {
    background:#666 url('../images/sub/btn-pop-arrow.png') no-repeat 90% 50%;
    padding-right:30px
}
.nf-btn-warning:hover {
    background:#555 url('../images/sub/btn-pop-arrow.png') no-repeat 90% 50%;
    padding-right:30px
}
.nf-btn-gray:hover {
    display: inline-block; 
    border-color: #555; 
    background-color: #555; 
    color: #fff; 
    font-size: 16px; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
}

.nf-btn-lightgray { 
    display: inline-block; 
    border-color: #F8F6F3; 
    background-color: #F8F6F3; 
    color: #0d0c22; 
    font-size: 16px; 
    text-align: center; 
    text-transform: uppercase; 
    transition: all 300ms ease; 
    white-space: nowrap;
}
.nf-btn-lightgray:hover {
    border-color: #e3e3e5; 
    background-color: #e7e7e9; 
    color: #0d0c22;
}
/* .nf-btn-lightgray:focus {background-color: #e3e3e5; color: #0d0c22;} */

/* .nf-btn-black { display: inline-block; border-color: #0d0c22; background-color: #0d0c22; color: #fff; font-size: 16px; text-align: center; text-transform: uppercase; transition: all 300ms ease;}
.nf-btn-black:hover {border-color: #000; background-color: #000; color: #fff;} */
/* .nf-btn-black:focus {background-color: #000; color: #fff;} */

/* outline */
.nf-btn-outline {
    border-width: 1px; 
    background-color: #fff; 
    color: #717881; 
    border-color: #9E9E9E;
}
.nf-btn-outline:hover {
    border-color: #808080; 
    background-color: #fff; 
    color: #111;
}
.nf-btn-primary.nf-btn-outline {
    border-width: 1px; 
    background-color: #fff; 
    color: #1764c4; 
    border-color: #1764c4; 
    font-weight: 600;
}
.nf-btn-primary.nf-btn-outline:hover {
    border-color: #1764c4; 
    background-color: #ebf5ff; 
    color: #1764c4;}
/* .nf-btn-outline:focus {border-color: #bdb5bb; background-color: #fff; color: #111;} */

/* .nf-btn-black.nf-btn-outline {border-width: 1px; background-color: #fff; color: #111; border-color: #111;}
.nf-btn-black.nf-btn-outline:hover {border-color: #111; background-color: #fafafa; color: #111;} */
/* .nf-btn-black.nf-btn-outline:focus {border-color: #111; background-color: #fafafa; color: #111;} */

.nf-btn-round {border-radius: 50px;}
.nf-btn-round-edge {border-radius: 5px;}

/* text styley */
.nf-btn-text {
    padding-left: 0; 
    padding-right: 0; 
    background-color: transparent; 
    color: inherit; 
    border-color: transparent; 
    font-weight: 600;
}
.nf-btn-text:hover {
    border-color: transparent; 
    background-color: transparent;
     color: #1764c4;
    }
.nf-btn-text:focus {box-shadow: none;}

.nf-btn-text.nf-btn-text-block {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%;
}
.nf-btn-text.nf-btn-text-block.putin-icon {
    padding-top: 11px; 
    padding-bottom: 11px; 
    display: flex;
    align-items: center;
}
.nf-btn-text.nf-btn-text-block.putin-icon .svg-icon {
    width: 20px; 
    height: 20px; 
    margin-top: -2px; 
    margin-left: 5px;
}

.nf-btn-sm {
    padding: 8px 14px 8px; 
    font-size: 14px; 
    border-radius: 4px;
}
.nf-btn-lg {
    padding: 16px 24px; 
    font-size: 20px;
}

.nf-btn-primary.nf-btn-sm {
    font-weight: 600;
}

/* .nf-btn-sm.nf-btn-round-edge,
.nf-btn-m.nf-btn-round-edge {border-radius: 4px;} */

.nf-btn .svg-icon {
    vertical-align: top;
}

/* 아이콘만 있는 경우 */
.nf-btn-icon {
    padding: 10px 10px;
}
.nf-btn-icon .svg-icon {
    width: 20px; 
    height: 20px;
}
.nf-btn-icon.nf-btn-sm {
    padding: 7px 7px 7px 7px;
}
.nf-btn-icon.nf-btn-sm .svg-icon {
    width: 16px; 
    height: 16px;
}

/* 버튼 선행 아이콘 */
.nf-btn-icon-leading {
    position: relative; 
    padding: 12px 20px 12px 44px;
}
.nf-btn-icon-leading .svg-icon {
    position: absolute; 
    top:9px; left: 18px; 
    width: 20px; 
    height: 20px; 
    vertical-align: middle;
}
.nf-btn-icon-leading.svg-icon-sm .svg-icon {
    top:11px; left: 18px; 
    width: 16px; 
    height: 16px;
}

.nf-btn-icon-leading.nf-btn-text {
    padding: 12px 0 12px 24px;
}
.nf-btn-icon-leading.nf-btn-text .svg-icon {left: 0;}

/* 버튼 후행 아이콘 */
.nf-btn-icon-trailing {
    position: relative; 
    padding: 12px 44px 12px 20px;
}
.nf-btn-icon-trailing .svg-icon {
    position: absolute; 
    top:9px; right: 18px; 
    width: 20px; height: 20px; 
    vertical-align: middle;
}
.nf-btn-icon-trailing.svg-icon-sm .svg-icon {
    top:11px; right: 18px; 
    width: 16px; height: 16px;
}

.nf-btn-icon-trailing.nf-btn-text {
    padding: 12px 24px 12px 0;
}
.nf-btn-icon-trailing.nf-btn-text .svg-icon {right: 0;}


.nf-btn:disabled,.nf-btn.disabled {
    cursor:default; 
    border-color: #D3D3D3 !important; 
    background-color: #E9E9E9 !important; 
    color: #B6B6B6 !important;
}




/* FORM
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
.form-input-check {display: flex; flex-wrap: wrap;}
.checkbox,
.radio {
    position: relative; 
    display: inline-block; 
    margin:8px 0 8px; 
    text-align: left; 
    color:#2B2A29; 
    font-size: 16px; 
    line-height: 1.3; 
    cursor: pointer
}
.checkbox input[type="checkbox"],
.radio input[type="radio"] {
    display: inline-block; 
    vertical-align: middle; 
    opacity: 0;
}
.checkbox input[type="checkbox"],
.radio input[type="radio"],
.checkbox label::before,
.radio label::before {
    width: 18px; 
    height: 18px; 
    position: absolute; 
    left: 0; top: 50%; 
    transform: translateY(-50%);
}
.checkbox label {
    display: flex;
    position: relative; 
    min-height: 18px; 
    padding: 3px 0 0 24px; 
    cursor: pointer; 
    margin-bottom: 0;
}
.checkbox label::before {
    content: ''; 
    border: 1px solid #D3D3D3;
    background:#fff; 
    border-radius: 3px; 
    transition: all 0.1s; 
    width: 18px; 
    height: 18px; 
    
}
.checkbox svg {
    position: absolute; 
    top: 50%; left: 4px; 
    width: 10px; 
    height: 12px; 
    margin-top:-6px; 
    pointer-events: none;
}
.checkbox svg path {
    stroke: #fff; 
    stroke-width: 14px; 
    fill: none; 
    stroke-dasharray: 240; 
    stroke-dashoffset: 240; 
    transition: stroke-dashoffset 0.2s 0s ease-in;
}

.checkbox input[type="checkbox"]:checked + label::before {
    border-color: #1764c4; 
    background:#1764c4;
}
.checkbox input[type="checkbox"]:checked ~ svg path { 
    stroke-dashoffset: 0;
 }


.radio label {
    display: flex; 
    position: relative; 
    min-height: 20px; 
    padding: 3px 0 0 22px; 
    cursor: pointer; 
    margin-bottom: 0;
}
.radio label::before {
    content: ''; 
    border: 1px solid #D3D3D3; 
    border-radius: 50%; 
    transition: all 0.3s; 
    width: 18px; 
    height: 18px;
}
.radio svg {
    position: absolute; 
    top: 50%; left: 4px;
     width: 10px; 
     height: 10px; 
     margin-top: -5px; 
     pointer-events: none;
    }
.radio svg circle {
    fill: #fff; 
    transition: all 0.2s; 
    opacity: 0;
}

.radio input[type="radio"]:checked + label::before {
    border-color: #1764c4;
    background:#1764c4;
}
.radio input[type="radio"]:checked ~ svg circle {
    opacity: 1;
}

.checkbox ~ .checkbox,
.radio ~ .radio {margin-left: 12px;}

.switch {
    position:relative; 
    display:inline-block; 
    width:52px; 
    height:28px;
}
.switch input {
    opacity:0; 
    width:0; 
    height:0;
}
.switch-ctl {
    position:absolute; 
    cursor:pointer; 
    top:0; left:0; right:0; bottom:0; 
    background-color:#d0d0d0; 
    -webkit-transition:.4s; 
    transition:.4s; 
    border-radius:18px;
}
.switch-ctl:after {
    position:absolute; 
    content:""; 
    height:26px; 
    width:26px; 
    left:1.4px;
    bottom:1px; 
    background-color:white; 
    -webkit-transition:.4s; 
    transition:.4s; 
    border-radius:50%;
}
.switch input:checked + .switch-ctl {
    background-color:#1764c4;
}
.switch input:focus + .switch-ctl {
    -webkit-box-shadow:2px 3px 5px 0 rgba(0,0,0,0.1); 
    box-shadow:2px 3px 5px 0 rgba(0,0,0,0.1);
}
.switch input:checked + .switch-ctl:after {
    -webkit-transform:translateX(23.6px); 
    transform:translateX(23.6px);
}
.buttons-group-radio {
    position: relative; 
    display: flex;
}
.buttons-group-radio .radio-button ~ .radio-button {
    margin-left: -1px;
}
.buttons-group-radio .radio-button:first-child label {
    border-radius: 6px 0 0 6px;
}
.buttons-group-radio .radio-button:last-child label {
    border-radius: 0 6px 6px 0;
}
.buttons-group-radio .radio-button {
    position: relative; 
    display: inline-block; 
    background: #fff; 
    text-align: left; 
    color:#2B2A29; 
    font-size: 16px; 
    line-height: 1.3; 
    cursor: pointer;
}
.buttons-group-radio .radio-button input[type="radio"] {
    display: inline-block; 
    vertical-align: middle; 
    opacity: 0;
}
.buttons-group-radio .radio-button input[type="radio"] {
    width: 24px; 
    height: 24px; 
    position: absolute; 
    left: 0; top: 50%; 
    transform: translateY(-50%);
}
.buttons-group-radio .radio-button label {
    display: flex; 
    position: relative; 
    padding: 11px 19px; 
    border: 1px solid #E6E3E1; 
    line-height: 20px; 
    cursor: pointer;
}
.buttons-group-radio .radio-button input[type="radio"]:checked + label {
    z-index: 1; 
    border-color: #1764c4; 
    color: #1764c4; 
    font-weight: 600;
}
/* .radio input[type="radio"]:checked + label::before {border-color: #50B587; background:#50B587;} */

.select {
    position: relative; 
    display: flex; 
    width: 100%; 
    min-width: 120px; 
    height: 42px; 
    line-height: 20px; 
    background: #fff; 
    overflow: hidden;
}
.select select {
    appearance:none; 
    box-shadow:none; 
    border: none; 
    background: #fff; 
    background-image: none; 
    flex: 1; 
    padding: 10px 40px 10px 12px; 
    border: 1px solid #E6E3E1; 
    border-radius: 6px; 
    color:#2B2A29; 
    cursor:pointer; 
    font-size: 14px;
}
.select select:disabled {
    background-color: #FAFAFA; 
    color: #B6B6B6; 
    cursor: default;
}
.select select::-ms-expand {display: none;}
.select::after {
    content: '';
     position: absolute; 
     top:50%; right: 12px; 
     width: 16px; 
     height: 16px; 
     padding: 0; 
     background: no-repeat 0 0 / 16px 16px; 
     background-image: url("data:image/svg+xml,%3Csvg fill='%236F6F6F' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8,11.8c-0.2,0-0.4-0.1-0.5-0.2l-5.3-5c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0L8,9.9l4.8-4.5 c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1l-5.3,5C8.4,11.7,8.2,11.8,8,11.8z'/%3E%3C/svg%3E%0A"); 
     cursor:pointer; 
     pointer-events:none; 
     transition:background-image 0.2s; 
     transform: translateY(-50%);
}
/* .select:hover::after {background-image: url("data:image/svg+xml,%3Csvg fill='%236F6F6F' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8,11.8c-0.2,0-0.4-0.1-0.5-0.2l-5.3-5c-0.3-0.3-0.3-0.8,0-1.1c0.3-0.3,0.8-0.3,1.1,0L8,9.9l4.8-4.5 c0.3-0.3,0.8-0.3,1.1,0c0.3,0.3,0.3,0.8,0,1.1l-5.3,5C8.4,11.7,8.2,11.8,8,11.8z'/%3E%3C/svg%3E%0A"); transform: translateY(-50%) rotate(180deg);} */







.buttonlist {
    width: 100%;
    margin:20px 0;
    border:0px
}
.buttonlist input {
    display: inline-block;
}

.buttonlist input[type=button] {
    width: 80px;
    font-size: 18px;
    color:#555;
    height:40px;
    line-height:40px;
    border:0px;
    color:#fff;
    border-radius: 10px;
    transition: 0.3s;
    cursor: pointer;
}
.blue {
    background: #1e90ff;
}
.dBlue {
    background: #4169e1;
}
.green {
    background: #2e8b57;
}
.gray {
    background: #808080;
}

.buttonlist li input.blue:hover {
    background: #1b7cda;
}
.buttonlist li input.dBlue:hover {
    background: #274ec2;
}
.buttonlist li input.green:hover {
    background: #226f44;
}
.buttonlist li input.gray:hover {
    background: #636363;
}

.buttonlist li input:checked {
    background: #000;
}


.buttonlist li input[type=checkbox]:checked {
    background-color: #000;
}






/* pagination
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
.pagination {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-top: 40px; 
    color:#666;
    font-size: 18px;
}
.pagination a,
.pagination button {
    width: 36px; 
    height: 36px; 
    text-align:center; 
    border-style: solid; 
    border-width: 1px; 
    border-color: transparent; 
    line-height: 1; 
    text-decoration: none; 
    cursor: pointer;
    border-radius: 50%; 
    letter-spacing:normal; 
    transition:all 0.1s ease-in;
}
.pagination > a:hover, .pagination > button:hover {
    border-color: #1764c4; 
    background-color: #1764c4; 
    color: #fff;
}
.pagination a + a,
.pagination button + button {
    margin-left: 7px;
}
.pagination .btn-page-start {
    background: no-repeat center center / 16px 15px; 
    background-image: url("../images/sub/first.png");
    border:0px
}
.pagination .btn-page-prev {
    background: no-repeat center center / 10px 15px; 
    background-image: url("../images/sub/pre.png");
    border:0px
}
.pagination .btn-page-next {
    background: no-repeat center center / 10px 15px; 
    background-image: url("../images/sub/next.png");
    border:0px
}
.pagination .btn-page-end {
    background: no-repeat center center / 16px 15px; 
    background-image: url("../images/sub/end.png");
    border:0px
}
.pagination .btn-page-start:hover {
    background: no-repeat center center / 16px 15px; 
    background-image: url("../images/sub/first.png");
    
}
.pagination .btn-page-prev:hover {
    background: no-repeat center center / 10px 15px; 
    background-image: url("../images/sub/pre.png");
}
.pagination .btn-page-next:hover {
    background: no-repeat center center / 10px 15px; 
    background-image: url("../images/sub/next.png");
}
.pagination .btn-page-end:hover {
    background: no-repeat center center / 16px 15px; 
    background-image: url("../images/sub/end.png");
}

.pagination a.disabled,
.pagination button:disabled {cursor:default; opacity: 0.5;}
.pagination a.disabled:hover, .pagination > button:disabled:hover {
    border-color: transparent; 
    background-color: transparent; 
    color: transparent;
}

.nf-btn:disabled,.nf-btn.disabled {
    cursor:default; 
    border-color: #fff !important; 
    background-color: #fff !important; 
    color: #fff !important;
}

.pagination .nav {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin: auto 7px
}

.pagination .nav > a:hover, .pagination .nav > button:hover {
    border-color: #1764c4; 
    background-color: #1764c4; 
    color: #fff;
}
.pagination .nav > a.active, .pagination .nav > button.active {
    border-color: #1764c4; 
    background-color: #1764c4; 
    color: #fff; 
    font-weight: bold
}
.pagination .nav > a.active:hover, .pagination .nav > button.active:hover {
    border-color: #1764c4; 
    background-color: #1764c4; 
    color: #fff;
}


/* 사유재산 피해신고 */ 
.sns-listarea {
    height: 40px;
    font-size: 0;
    display: flex;
    flex-direction: row-reverse;
}
.sns-listarea a {
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-left:5px;
    cursor: pointer;
    display: block;
}

.facebook {
    background: #304e97 url('../images/sub/icon-facebook.png') no-repeat 50% 50%;
}
.sns-x {
    background: #000 url('../images/sub/icon-x.png') no-repeat 50% 50%;
}

.page-comm {
    border-radius:10px;
    background-color:#f5f5f5;
    padding:20px 20px
}

.priv-text {
    border-radius: 20px;
    background-color: #f5f5f5;
    padding:20px 20px 15px 20px;
    font-size:17px;
    line-height:1.4;
}
.priv-stext {
	border-top:1px #ddd solid;
	border-bottom:1px #ddd dashed;
    padding:15px 20px 12px 20px
}
.page-commlist li {
    font-size: 16px;
    background: url('../images/sub/comm-dot.png') no-repeat 0 7px;
    padding-left:10px;
    color:#666;
    padding-bottom:10px; 
}
.page-commlist li span {
    color: #000;
}
.page-commbtn {
    margin-top:15px;
    color:#0056aa;
    font-weight: 500;
}
.pop-block {
    padding:5px 30px 5px 20px;
    border-radius: 50px;
    color:#fff;
    background: #0056aa url('../images/sub/btn-pop-arrow.png') no-repeat 92% 50%;
    margin-left:10px;
}
.comm-imgarea {
    padding:20px 0;
}
.comm-imgarea img {
    width: 100%;
    max-width: 1089px;
}

/* tooltip css */
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltip-container .tooltip-text {
    visibility: hidden;
    width: max-content;
    width:400px;
    background-color: #333;
    color:#fff;
    text-align: center;
    padding:8px;
    border-radius: 6px;
    position: absolute;
    bottom: 100%;
    left:50%;
    transform: translateX(-50%);
    margin-bottom:8px;
    white-space: normal;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.tooltip-container.tooltip-container:hover .tooltip-text {
    visibility: visible;
}
/* tooltip css */


/* page style */
.page-titarea {
    display: flex;
    justify-content: space-between;
    height: 30px;
    margin-bottom:20px;
}
.page-title {
    font-size: 28px;
    color:#222;
    font-weight: 800;
    margin:30px 0 10px
}
.page-titarea .essen-area {
    font-size: 16px;
    color:#666;
    font-weight: 500;
    display: inline-block;
}
.page-stitle {
    background: url('../images/sub/p-tit.png') no-repeat 0 7px;
    padding-left:20px;
    font-size: 22px;
    font-weight: 700;
    color:#222;
    margin-bottom:10px
}
.page-stit {
    background: url('../images/sub/sstit.png') no-repeat 5px 8px;
    padding-left:20px;
    font-size: 18px;
    font-weight: 800;
    color:#222;
}
.comm-list {
    padding:5px 0 0px 7px;
}
.comm-list li {
    background: url('../images/sub/p-stit.png') no-repeat 0 11px;
    padding-left:10px;
    font-size: 18px;
    font-weight: 500;
    color:#222;
    padding-bottom:10px;
    line-height: 1.5;
}
.comm-list li:last-child {
	padding-bottom:0
}
.comm-list li .bold {
    font-weight: 800;
}
.comm-list li .s-list {color:#666;font-size: 16px;}
.comm-slist {
    padding:5px 0 0px 0;
}
.comm-slist li {
    background: url('../images/sub/p-slist.png') no-repeat 0 10px;
    font-size: 16px;
    color:#666;
    padding:0px 0 0px 10px
}

.page-scomment {
	border:1px #eee solid;
	background:#fff;
	border-radius:5px;
	padding:10px 10px 10px 10px;
	color:#555;
	font-weight:500;
	font-size:14px;
	margin:5px 0 10px 0;
}
.page-scomment p {
	color:#888;
	padding-top:5px;
	font-size:13px;
}
.page-scomment ul li{
	background:none;
	padding-bottom:10px;
}
.page-scomment ul li:last-child {
	padding-bottom:0
}
.degree-area {
    border:1px #ececec solid;
    background-color: #fafafa;
    margin-bottom:10px;
    padding:20px;
    text-align: right;
    border-radius: 10px;
}

.degree-area label {
    font-size: 16px;
    color:#666;
    padding-left:10px;
    font-weight: 500;
}
.comm-box-text {
    border:1px #ececec solid;
    background-color: #fafafa;
    margin-bottom:10px;
    padding:20px;
    border-radius: 10px;
    font-size: 15px;
    color:#666;
    font-weight: 500;
}
.comm-text {
    font-size: 16px;
    color:#666;
    line-height: 1.5;
}
.comm-text01 {
    font-size: 18px;
    color:#222;
    line-height: 1.5;
}
.page-warning {
    font-size: 15px;
    border-top:1px #ececec dashed;
    margin-top:50px;
    padding-top:20px;  
}
.page-warning ul {
    padding-bottom:20px
}

.page-warning ul li {
    padding-bottom:5px
}

.essen-icon {
    color:#cd0404;
    font-size: 18px;
    font-weight: 600;
}

.bbs-view {
    width: 100%;
    border-top:2px #222 solid;
    border-bottom:1px #ddd solid;
    padding:25px 0
}
.bbs-view li {
    display: flex;
    flex-wrap: wrap;
    padding:15px 0;
    /* border-bottom:1px #ccc solid */
}

.info-titarea {
    font-size: 18px;
    font-weight: 600;
    color:#222;
}
.info-titarea1 {
    font-size: 18px;
    font-weight: 600;
    color:#222;
}
.info-titarea1.lh {
    font-size: 18px;
    font-weight: 600;
    color:#222;
    padding-top:4px
}
.info-formarea {
    display: flex;
    flex-wrap: wrap;
}
.info-formarea1 {
    display: flex;
    flex-wrap: wrap;
}
.form-radioarea {
    padding-top:0px;
}
.form-radioarea1 {
    padding-top:9px;
}
.info-formarea.ta-c {
    justify-content: center;
}

.hyphen {
    padding: 8px  8px 0 8px;
}
.info-formarea input, .info-formarea select .info-formarea button{
    height:40px;
    border-radius: 5px;
}
.info-formarea input, .info-formarea select {
    border:1px #bbb solid;
    font-size: 16px;
    color:#555;
    font-weight: 500;
    padding-left:10px;
    border-radius:8px
}
#sferCryalTelno1{width:150px}
.info-formarea input::placeholder, 
.info-formarea textarea::placeholder,
.info-formarea1 textarea::placeholder {
    color:#666
}
.info-formarea input:disabled {
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    color:#555
}

.info-formarea1 input, .info-formarea1 select .info-formarea1 button{
    height:40px;
    border-radius: 5px;
}
.info-formarea1 input, .info-formarea1 select {
    border:1px #bbb solid;
    font-size: 16px;
    color:#6666;
    font-weight: 500;
    padding-left:10px
}
.info-formarea1 input::placeholder {
    color:#666
}
.info-formarea1 input:disabled {
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    color:#999
}
.info-address .info-formarea input {
    width:87%;
    margin-bottom:5px
}
.info-address .info-formarea input:last-of-type {
    width:87%;
    margin-bottom:0px
}
/* btn 주소찾기 */
.info-address .info-formarea .btn-address {
    height: 40px;
    width:11%;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
    color:#fff;
    font-weight: 500;
    padding:0 5px;
    border-radius: 5px;
    background-color: #0056aa;
    border: 1px #0056aa solid;
    transition: 0.2s;
    margin:0 5px;
}
.info-address .info-formarea .btn-address:hover {
    background-color: #054788;
    border: 1px #054788 solid;
}

/* btn 실명인증 */
.btn-cirtif {
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color:#fff;
    font-weight: 500;
    padding:0 15px;
    border-radius: 5px;
    background-color: #222;
    border: 1px #222 solid;
    transition: 0.2s;
}
.btn-cirtif:hover {
    color:#222;
    background-color: #fff;
    border: 1px #bbb solid;
}
.robot-area {
    background: #f4f4f4;
    padding:15px;
    font-size: 14px;
    color:#666;
    border-radius: 5px;
    margin-top:10px;
    
    /*피해자정보 > 로봇여부 크기 조정*/
    /*width: 65%;*/
    width: auto;
}

.robot-area .robot-list {
    width: 100%;
    display: flex;
    
}
.robot-area .robot-list li{
    margin:0 15px 0 0 !important;
    display: inline-block;
    height:18px !important;
    line-height:18px !important;
    vertical-align: middle !important;
    padding:0;
    font-weight: 600;
}
.robot-area .robot-list li.dot {
    background: url('../images/sub/dot.png') no-repeat 0 50%;
    padding-left:8px
}
.robot-list li input[type=checkbox] {
   margin:0 !important;
   height:20px !important;
   vertical-align: bottom !important;
}
.robot-area .robot-list li.robot-img {
    background: url('../images/sub/robot.png') no-repeat 0 50%;
    padding-left:23px;
}

.info-formarea .dropdown-section {
    flex-basis: 150px;
    flex-shrink: 1;
}
.bbs-view li  .list-txt {
    display: inline-block;
    padding-left:10px;
    line-height:40px
}
.info-formarea input.inp-num {
    text-align:right;
    padding-right:10px
}

/* 풍수해 설명글 - 파란색 배경박스 */
.pungbox-text {
    padding:20px;
    line-height: 1.4;
    font-size: 18px;
    font-weight: 500;
    background-color: #f3f5f9;
    color:#20589e;
    border-radius: 20px;
    border:1px #e2e6ed solid
}


/* radio button css */
.radio_box { 
    display: inline-block; 
    position: relative; 
    padding-left: 25px; 
    margin-right: 15px; 
    cursor: pointer; 
    font-size: 16px; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

/* 기본 라디오 버튼 숨기기 */
/*.radio_box input[type="radio"] { 
    display: none;
}*/
#contents input[type="radio"] { 
    width:20px;height:20px;vertical-align:middle;margin-top:-1px
}
#contents input[type="checkbox"] { 
    width:20px;height:20px;vertical-align:middle;margin-top:-1px
}
/* 선택되지 않은 라디오 버튼 스타일 꾸미기 */
.on { 
    width: 20px; 
    height: 20px; 
    background: #fff;
    border:1px #ddd solid; 
    border-radius: 50%; 
    position: absolute; 
    top: 0px; 
    left: 0; 
}
.on.top5 { 
    top: 5px;
}
/* 선택된 라디오 버튼 스타일 꾸미기 */

.radio_box input[type="radio"]:checked + .on { 
    background: #1764c4;
    border:1px #1764c4 solid
 }
.on:after { 
    content: ""; 
    position: absolute; 
    display: none; 
}
.radio_box input[type="radio"]:checked + .on:after { 
    display: block; 
}
.on:after { 
    width: 8px; 
    height: 8px; 
    background: #fff; 
    border-radius: 50%; 
    position: absolute; 
    left: 5px; 
    top: 5px; 
}
.textAreaSpace textarea {
    width:100%;
    display: block;
    border: 1px solid #E0E0E0;
    border-radius: 5px;
    padding: 15px;
    margin-top: 10px;
    resize: none;
    /* ie의 scrollbar를 위해 overflow auto */
    overflow: auto;
}
.textAreaSpace textarea:focus {
    border: 1px solid #1764c4;
}

/* 공통 tab스타일 */
.tab-area {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width:100%;
    gap: 2px;
}
.tab-area .tab-list {
    background: #fff;     
    border:1px #ccc solid;
    color:#555;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 0;
    cursor: pointer;
    z-index: 1;
    margin-left: -1px;
    flex-grow:1;
    flex-shrink: 1;
    flex-basis: auto;
    text-align: center;
    border-radius: 10px 10px 0 0;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);

}
.tab-area .tab-list:first-of-type {
    margin-left: 0;
}

.tab-content {
    width: 100%;
    margin-top: -1px;
    -webkit-order: 1;
    order: 1;
    /*padding-top:20px;*/
}
/*.tab-area input[type=radio], .tab-content {
    display: none;
}*/
.tab-area input[type=radio]:checked + label {
    background: #1764c4;
    border:1px #1764c4 solid;
    color:#fff;
}
.tab-area input[type=radio]:checked + label + .tab-content {
    display: block;
}


/* popup */
.btn-poparea {
    display: block;
}
.pop-layer {min-width:600px;width: 100%;}
.pop-layer .pop-container {
    z-index:9999;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background-color: #fff;
    width: 100%;
    height: 100%;
    max-height: 100%;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
}
.pop-titlearea {
    background-color: #0056aa;
    padding:20px 30px;
    display: flex;
    justify-content: space-between;
}
.pop-titlearea h2 {
    color:#fff;
    font-size: 24px;
    font-weight: 700;
}
.pop-conts {
    background-color: #fff;
    padding:20px 20px;
    text-align: left;
}
/* scroll 있을시 */
.pop-conts.scroll {
    background-color: #fff;
    padding:20px 30px;
    text-align: left;
    overflow-y: scroll;
    margin:20px 20px 20px 0;
    height: 300px;
}
.pop-conts.scroll::-webkit-scrollbar {
    width: 7px; 
  }
.pop-conts.scroll::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 50px;
}
.pop-conts.scroll::-webkit-scrollbar-track {
    background-color: #f6f6f6;
    border:1px #dedede solid;
    border-radius: 50px;
}
.pop-comment {
    font-size: 18px;
    color:#666;
    padding-bottom:20px;
    padding-left:0;}
.pop-stit {
    background-color: #222;
    border-radius: 50px;
    padding:5px 15px;
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
}
.pop-slist {
    width: 100%;
    margin-top:10px;
    padding:10px;
    box-sizing: border-box;
}
.pop-slist li {
    font-size: 16px;
    color:#666;
    padding-bottom:10px
}
.pop-slist li span {
    display: inline-block;
    margin-right:10px;
    color:#555;
    font-weight: 600;
}

.pop-layer p.ctxt {
    color: #666;
    line-height: 25px;
}

.pop-layer .btn-r {
    width: 100%;
    margin: 10px 0 20px;
    padding-top: 10px;
    border-top: 1px solid #DDD;
    text-align: right;
}

.pop-layer {
    display: none;
    position: fixed;
    _position: absolute;
    top: 50%;
    left: 50%;
    transform:translate(-50%,-50%);
    width: 410px;
    height: auto;
    z-index: 10;
}
#translate_popup{top:110px !important;left:auto !important;right:3%;width:400px;min-width:auto !important;transform:translate(0%, 0%);}
#translate_popup .pop-conts.scroll{height:auto !important;margin:0px !important}
#translate_popup .pop-titlearea{padding: 5px 20px !important}
#translate_popup .pop-btnarea{padding: 13px 5px 0 5px !important}
#translate_popup .board-topbtn1{border:none !important;padding:0px !important}
#translate_popup  .pop-titlearea h2{font-size:20px}
.dim-layer {
    display: none;
    position: fixed;
    _position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.dim-layer .dimBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    filter: opacity(0.5);
}
.dim-layer .pop-layer {
    display: block;
}
.pop-btnarea {
        padding:5px 5px 0 5px;
        display: block;
}

/* 재난현황 */
.content-situation {
    width: 100%;
}
.situation-catearea{
    width: 100%;
    padding:20px 0 10px 0;
    background: #eaf3fb url('../images/sub/situation-bg.png') no-repeat right bottom;
}
.situation-cateinner {
    width: 1400px;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.situation-cate li {
    display: inline-block;
    border:1px #c7cddc solid;
    background-color: #fff;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
    text-align: center;
    margin:0 10px;
    width: 90px;
    height: 90px;
    border-radius: 20px;
    transition: 0.3s;
    font-size: 18px;
    color:#36435e;
    font-weight: 500;
}
.situation-cate li.spec-report {
    border:1px #d61313 dashed;
    background-color:#fff;
    color:#d61313
}
.situation-cate li.spec-report:hover {
    border:1px #d61313 dashed;
    background-color:#fcf3f2;
    color:#d61313
}
.situation-cateinner .situ-btn {
    background-color: #fff;
    border:1px #c7ccd6 solid;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
    width: 46px;
    height: 46px;
    text-align: center;
    line-height: 48px;
    border-radius: 50%;
    transition: 0.3s;
}
.situation-cateinner .situ-btn img {
    transition: 0.3s;
}
.situation-cate li:first-child {
    margin-left:30px
}
.situation-cate li:last-child {
    margin-right:30px
}
.situation-cate li:hover {
    background-color: #b1d4f5;
    border:1px #91bce5 solid;
}
.situation-cateinner .situ-btn:hover {
    border: 1px transparent solid;
    background-color: #36435e;
}
.situation-cateinner .situ-btn:hover .img-pre {
    filter: brightness(0) invert(1);
    transform: translateX(-20%);
}
.situation-cateinner .situ-btn:hover .img-next {
    filter: brightness(0) invert(1);
    transform: translateX(20%);
}

.situation-cate li a{
    display: block;
}
.situation-cate li span{
    display: block;
}


/* 재난현황 슬라이딩 카테고리 */
.slider1 {
    width: 1400px;
    max-width: 100%;
    height: 130px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.slider-wrapper {
    width: 85%;
    height: 130px;
    overflow: hidden;
    text-align: center;
    text-align: center;
}
.slider-slide {
    width: 300%;
    display: flex;
    flex-direction: row;
    transition: all 0.5s;
}
.slider-page {
    width: 100%;
    height: 150px;
}
.slider-page>img {
    width:100%;
    height: 150px;
}
.slider-arrow {
    margin: 0 0px;
    display: inline-block;
    cursor: pointer;
}
.situation-content {
    width: 1400px;
    margin:40px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.situation-leftarea {
    width: 49%;
}
.current-content {
    border:1px #d0d0d0 solid;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    margin-bottom:40px;
    height: 310px;
    box-sizing: border-box;
    padding:30px;
}
.situation-titarea {
    border-bottom:1px #ddd solid;
    padding-bottom:20px;
    margin-bottom:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.situation-titarea h3 {
    font-size: 24px;
    color:#222;
    font-weight: 600;
    display: inline-block;
    text-align: left;   
    height: 28px;
    line-height: 28px;
    
}
.basetime-area {display: inline-block;}
.situation-titarea .basetime {
    display: inline-block;
    padding:0px 10px;
    height: 24px;
    line-height: 26px;
    border-radius: 50px;
    font-size: 13px;
    color:#fff;
    font-weight: 500;
    background-color: #1764c4;
    margin-top:2px;
    vertical-align: top;
}
.situation-titarea .basetext {
    font-size: 18px;
    color:#666;
    font-weight: 400;
}

.situation-titarea .more {
    font-size: 14px;
    font-weight: 500;
    margin-top:2px;
    color:#666;
}
.situation-titarea .more:hover {
    color:#222;
}

/* 재난특보 타이틀 */
.current-titarea {
    border-bottom:1px #ddd solid;
    padding-bottom:20px;
    margin-bottom:20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.current-titarea h3 {
    font-size: 24px;
    color:#222;
    font-weight: 600;
    display: inline-block;
    text-align: left;   
    height: 28px;
    line-height: 28px;
    
}
.basetime-area {display: inline-block;}
.current-titarea .basetime {
    display: inline-block;
    padding:0px 10px;
    height: 24px;
    line-height: 26px;
    border-radius: 50px;
    font-size: 13px;
    color:#fff;
    font-weight: 500;
    background-color: #1764c4;
    margin-top:2px;
    vertical-align: top;
}
.current-titarea .basetext {
    font-size: 18px;
    color:#666;
    font-weight: 400;
}

.current-titarea .more {
    font-size: 14px;
    font-weight: 500;
    margin-top:2px;
    color:#666;
}
.current-titarea .more:hover {
    color:#222;
}

.current-titlearea {
    padding-bottom:10px;
}


.current-listarea {
    overflow-y: scroll;
    height: 140px;
    padding-right:20px
}

.current-listarea::-webkit-scrollbar {
    width: 7px;
    
  }
.current-listarea::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 50px;
}
.current-listarea::-webkit-scrollbar-track {
    background-color: #f6f6f6;
    border:1px #dedede solid;
    border-radius: 50px;
}
.current-list li {
    display: block;
    padding-bottom:7px;
    margin-bottom:12px;
    border-bottom:1px #dcdcdc dotted
}
.current-list li:last-child {
    border-bottom:0px;
    padding-bottom:0px;
    margin-bottom:0px;
}
.cur-text {
    font-size: 16px;
    color:#222;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin-bottom:10px
}
.cur-text a {
    color:#222
}
.cur-text a:hover {
    text-decoration: underline;
}
.cur-info {
    display: inline-block;
    margin-right:10px;
    padding-right:10px;
    font-size: 14px;
    color:#555;
    background: url('../images/sub/cur-infobar.png') no-repeat 100% 50%;
}
.cur-info:last-child {
    background: none;
    margin-right:0;
    padding-right:0;
}
.cur-info span{
    display: inline-block;
    padding-right:5px;
    color:#888
}
.textmessage-list li {
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:1px #dcdcdc dotted
}
.textmessage-list li:last-child {
    border-bottom:0;
    padding-bottom:0px;
    margin-bottom:0px;
}
.text-message span {
    display: inline-block;
    padding:0px 5px;
    height: 19px;
    line-height: 19px;
    border-radius: 3px;
    margin-right:5px;
    font-size: 13px;color:#fff
}
.sreport-cate12 {
    background-color: #e04545;
}
.sreport-cate04 {
    background-color: #4b80c3;
}
.text-message {
    font-size: 16px;
    color:#222;
    margin-bottom:5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    height: 22px;
    -webkit-box-orient: vertical;
    font-weight: 500;
}
.text-message a {
    color:#222
}
.text-message a:hover {
    text-decoration: underline;
}
.textmessage-info {
    font-size: 16px;
    color:#888
}
.textmessage-content {
    border:1px #d0d0d0 solid;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    height: 310px;
    box-sizing: border-box;
    padding:30px;
}
.situation-maparea {
    border:1px #d0d0d0 solid;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    width: 48%;
    height: 660px;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.situation-maparea .maparea-tit {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    color:#fff;
    font-size: 16px;
    font-weight: 600;
    padding:15px 20px;
    text-align-last: right;
}
.situation-infoarea {
    margin-top:40px;
    width: 100%;    
}
.situation-infoarea {
    display: flex;
    box-sizing: border-box;    
}

.guideline-left {
    width: 100%;
    display: inline-block;
    border:1px #d0d0d0 solid;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding:30px;
    margin-right:40px;
    height: 250px;
}
.guideline-titarea {
    border-bottom:1px #ddd solid;
    padding-bottom:20px;
    margin-bottom:15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.guideline-titarea h3 {
    font-size: 24px;
    color:#222;
    font-weight: 600;
    display: inline-block;
    text-align: left;   
    height: 28px;
    line-height: 28px; 
}
.guideline-titarea .more {
    font-size: 14px;
    font-weight: 500;
    margin-top:2px;
    color:#666;
}
.situation-guidelist {
    display: flex;
    justify-content: center;
}
.situation-guidelist li {
    display: inline-block;
    margin:0 15px
}
.situation-guidelist li:first-child {
    margin-left:0;
}
.situation-guidelist li:last-child {
    margin-right:0;
}
.situation-guidelist li img {
    padding-bottom: 5px;
}
.situation-guidelist li span {
    display: block;
    margin-bottom:5px;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color:#222;
    font-weight: 600;
    background-color: #e2e2e2;
    border-radius: 50px;
    padding:0 10px;
    text-align: center;
    text-transform: uppercase;
}
.situation-guidelist li p {
    font-size: 14px;
    color:#222;
    font-weight: 500;
    text-align: center;
    white-space: pre;
}
.around-facilities {
    display: flex;
}
.around-faclist {
    border:1px #d0d0d0 solid;
    border-right:0px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
    width: 290px;
    height: 250px;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}
.around-tit {
    background: #eee url('../images/sub/situation_info1.png') no-repeat 90% 50%;
    font-size: 24px;
    color:#222;
    font-weight: 600;
    padding:25px;
    border-bottom:1px #e8e8e8 dashed
}
.safe-tit {
    background: #e5f0fb url('../images/sub/situation_info2.png') no-repeat 90% 50%;
    font-size: 24px;
    color:#326ea9;
    font-weight: 600;
    padding:25px;
    border-bottom:1px #dbe7f0 dashed

}
.around-safelist {
    border:1px #bdcfe1 solid;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
    border-radius: 0 20px 20px 0;
    width: 290px;
    height: 250px;
    overflow: hidden;
}
.around-list {
    padding:15px 25px 0 25px
}
.around-list li {
    font-size: 20px;
    color:#666;
    background: url('../images/sub/situation-arr.png') no-repeat 100% 50%;
    padding-bottom:10px;
    margin-bottom:10px;
    border-bottom:1px #f0f0f0 solid;
    transition: 0.3s;
}
.around-list li:hover {
    background: url('../images/sub/situation-arr-on.png') no-repeat 100% 50%;
    color:#222;
    cursor: pointer;
}
.around-list li:last-child {
    border-bottom:0;
}



/* 기상정보 - 내지역 날씨정보 */
.disaster-weatherinfoarea {
    width: 100%;
    border-radius: 20px;
    background-color: #eaf3fb;
    padding:30px;
}
.dis-weathertitarea {
    display: flex;
    justify-content: space-between;
}
.dis-weathertitarea h2 {
    font-size: 36px;
    font-weight: 600;
    color:#222
}
.weather-setting {text-align: right;
padding-top:20px}
.weather-setting li {
    display: inline-block;
    font-size: 18px;
    color:#222;
    font-weight: 500;
}
.weather-setting li img {
    vertical-align: middle;
}
.weather-setting li:first-child {
    background: url('../images/sub/setting-bar.png') no-repeat 100% 50%;
    padding-right:20px;
    margin-right:20px;
}

.disaster-winfoarea {
    padding-top:20px;
    display: flex;
    justify-content: space-between;
}
.disas-weatherinfo {
    display:flex;
    align-items:end;
    padding-bottom:10px;
    padding-left:0px;
    border-bottom:1px #c7c7c7 dashed;
    min-height:80px;
}
.disas-weatherinfo span {
    display: inline-block;
    font-size: 24px;
    font-weight: 500;
    color:#222;
    padding:0 20px 0 0;
    vertical-align:bottom;    
}
.disas-weatherinfo .d-temp {
    font-size: 50px;
    font-weight: 600;
    color:#222;
    height:54px;
    vertical-align:bottom;
}

.dis-winfoleft {
    width: 55%;
    margin-right:3%;
    background-color: #fff;
    border:1px #d3e4f3 solid;
    border-radius: 10px;
    padding:30px;
    box-sizing: border-box;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
    position: relative;
}
.dis-winfoleft .today {
    background-color: #f0f5fa;
    height: 35px;
    line-height: 35px;
    border-radius: 50px;
    padding:0 15px;
    font-size: 18px;
    font-weight: 500;
    color:#1764c4;
    position: absolute;
    top:30px;
    right:30px;
}

.weather-list {
    text-align: center;
    padding-top:20px
}
.weather-list li {
    display: inline-block;
    padding:5px 10px;
    font-size: 18px;
    font-weight: 500;
    color:#666;
}
.weather-list li span {
    display: inline-block;
    padding-left:5px;
    color:#222
}
.weather-list li span.fdust-type1 {
    color:#1764c4
}

.weather-list li span.fdust-type2 {
    color:#1f8f51
}

.dis-winforight {
    width: 42%;
    background-color: #fff;
    border:1px #d3e4f3 solid;
    border-radius: 10px;
    padding:30px;
    box-sizing: border-box;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
    position: relative;
}
.dis-winforight .tomorrow {
    background-color: #ededed;
    height: 35px;
    line-height: 35px;
    border-radius: 50px;
    padding:0 15px;
    font-size: 18px;
    font-weight: 500;
    color:#666;
    position: absolute;
    top:30px;
    right:30px;
}
.dis-winfoleft .today {
    background-color: #f0f5fa;
    height: 35px;
    line-height: 35px;
    border-radius: 50px;
    padding:0 15px;
    font-size: 18px;
    font-weight: 500;
    color:#1764c4

}
.disas-weatherinfo01 {
    display:flex;
    align-items:end;
    padding-bottom:10px;
    padding-left:0px;
    min-height:80px;
    border-bottom:1px #c7c7c7 dashed
}
.disas-weatherinfo01 span {
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    color:#222;
    padding:0 20px 0 0;
    vertical-align:bottom;    
}
.disas-weatherinfo01 span img {
    padding:0;
}
.disas-weatherinfo01 span.d-prec {
    display: inline-block;
    font-size: 16px;
   padding: 0 0 0 0px;
   font-weight: 500; 
}

.temperature-list {
    display: flex;
    padding-top:10px;
    justify-content: center;
}
.temperature-list li:first-child {
    padding-right:35px;
}
.temperature-list li:last-child {
    padding-left:35px;
}
.temperature-list li span {
    display: block;
    text-align: center;
    border-radius: 50px;
    padding:5px 15px;
    font-size: 16px;
    font-weight: 500;
    margin-bottom:15px;
}
.temperature-list li.low span {
    color:#1764c4;
    background-color: #f0f5fa;
}
.temperature-list li.low p {
    color:#1764c4;
    font-weight: 600;
    font-size: 32px;
}
.temperature-list li.high span {
    color:#d61313;
    background-color: #fcf3f2;
}
.temperature-list li.high p {
    color:#d61313;
    font-weight: 600;
    font-size: 32px;
}



/* base table - 가로스크롤 있는 테이블*/
.bsTable {
    width: 100%;
    overflow-x: scroll;
    padding-bottom:5px;
}
.bsTable::-webkit-scrollbar {
    height: 8px;
    
  }
.bsTable::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 50px;
}
.bsTable::-webkit-scrollbar-track {
    background-color: #f6f6f6;
    border:1px #dedede solid;
    border-radius: 50px;
}
.bsTable table {
    width: 1500px;
    border-collapse: separate;
    border-spacing: 0;
}
.bsTable table thead tr th {
   border-top:1px #ddd solid;
   border-bottom:1px #ddd solid;
   border-right:1px #ddd solid;
   background-color:#f9f9f9;
   font-size: 18px;
   font-weight: 600;
   color:#222;
   text-align: center;
   padding:15px 0;
}
.bsTable table thead tr th:last-child {
    border-right:0px
}
.bsTable table th:first-child {
    position: -webkit-sticky; 
    position: sticky; 
    left: 0; 
    border-right:1px #ddd solid;
    background-color: #f9f9f9;
}

.bsTable table tbody tr th {
    border-right:1px #ddd solid;
}
.bsTable table tbody th:first-child {
    background-color: #fff;
    position: -webkit-sticky; 
    position: sticky; 
    left: 0; 
}
.bsTable table tbody tr th,
.bsTable table tbody tr td {
    font-size: 16px;
    padding:15px 10px;
    text-align: center;
    border-bottom:1px #ddd solid;
    background-color: #fff;
}

.bsTable table tbody tr td.tb-bd {
    border-right:1px #ddd solid;
}




/* base table - 가로스크롤 없는 테이블*/
.bsTable1 {
    width:calc(100% - 54%)
}

.bsTable1 table {
    width: 100%;
}
.bsTable1 table thead tr th {
   border-top:1px #ddd solid;
   border-bottom:1px #ddd solid;
   border-right:1px #ddd solid;
   background-color:#f9f9f9;
   font-size: 18px;
   font-weight: 600;
   color:#222;
   text-align: center;
   padding:15px 0;
}
.bsTable1 table thead tr th:last-child {
    border-right:0px
}

.bsTable1 table tbody tr th {
    border-right:1px #ddd solid;
}

.bsTable1 table tbody tr th,
.bsTable1 table tbody tr td {
    font-size: 16px;
    padding:15px 10px;
    text-align: center;
    border-bottom:1px #ddd solid;
    background-color: #fff;
}

.bsTable1 table tbody tr td.tb-bd {
    border-right:1px #ddd solid;
}



.weekley-inner {
    width: 100%;
    border:1px #bbb solid;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
}

.weekley-weather {
    width: 100%;
    overflow-x: scroll;   
    padding-bottom:5px; 
}
.weekley-weather::-webkit-scrollbar {
    height: 8px;    
  }
.weekley-weather::-webkit-scrollbar-thumb {
    background-color: #dedede;
    border-radius: 50px;
}
.weekley-weather::-webkit-scrollbar-track {
    background-color: #f6f6f6;
    border:1px #dedede solid;
    border-radius: 50px;
}
.weekley-weather table {
    width: 1500px;
    border-collapse: separate;
    border-spacing: 0;
}
.weekley-weather table {
    width: 1300px;
}

.weather-detailbox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top:60px;
    justify-content: space-between;
}
.weather-detailbox p{
    padding-top:15px;
}
.weekley-weather table thead tr th {
    background-color: #f9f9f9;
    padding:15px 0;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border-right:1px #f1f1f1 solid;
    border-bottom:1px #c7c7c7 dashed
}
.weekley-weather table thead tr th .sat-day {
    color:#1764c4
}
.weekley-weather table thead tr th .sun-day {
    color:#d61313
}
.weekley-weather table tbody tr td {
    padding:20px;
    text-align: center;
    border-right:1px #f1f1f1 solid;
    
}
.weekley-weather table tbody tr td img {
	width:30px;
	height:30px;
}
.weekley-weather table tbody tr td:last-child {
    border-right:0px;
}
.weekley-weather table tbody tr td span {
    display: block;
    font-size: 16px;
    color:#666;
    font-weight: 500;
    padding-bottom:10px;
}
.weekley-data {
    display: flex;
    justify-content: space-between;
}
.weekley-weather table tbody tr td span.lower {
    background-color: #f0f5fa;
    border-radius: 50px;
    padding:2px 10px;
    font-size: 13px;
    font-weight: 600;
    color:#1764c4;
    margin-bottom:5px;
}
.weekley-weather table tbody tr td span.lower-temp {
    font-size: 18px;
    font-weight: 600;
    color:#1764c4
}
.weekley-weather table tbody tr td span.higher {
    background-color: #fcf3f2;
    border-radius: 50px;
    padding:2px 10px;
    font-size: 13px;
    font-weight: 600;
    color:#d61313;
    margin-bottom:5px;
}
.weekley-weather table tbody tr td span.higher-temp {
    font-size: 18px;
    font-weight: 600;
    color:#d61313
}


.bsTable tbody tr td span.ball {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin:3px auto;
}
.bsTable tbody tr td span.step-low {
    background-color: #1764c4;
}
.bsTable tbody tr td span.step-medium {
    background-color: #1f8f51;
}
.bsTable tbody tr td span.step-high {
    background-color: #e5830e;
}
.bsTable tbody tr td span.step-veryhigh {
    background-color: #d61313;
}




/* 범례 */
.table-legend {
    width: 100%;
    text-align: right;
    padding-top:10px
}
.tb-legendlist li {
    display: inline-block;
    color:#666;
    font-size: 14px;
    font-weight: 500;
    margin-left:20px; 
}

.tb-legendlist li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right:3px
}
.tb-legendlist li p {
    display: inline-block;
    height: 20px;
}
.step-low {
    background-color: #1764c4;
}
.step-medium {
    background-color: #1f8f51;
}
.step-high {
    background-color: #e5830e;
}
.step-veryhigh {
    background-color: #d61313;
}

.food-poisarea {
    background: #eaf3fb url('../images/sub/icon-foodpois.png') no-repeat 90% 50%;
    border:1px #d3e4f3 solid;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
    border-radius:20px;
    padding:20px 30px 30px 30px;
    box-sizing: border-box;
    width: 50%;
}
.food-poisarea h3{
    font-size: 40px;
    font-weight: 600;
    color:#222;
    padding-bottom:0px;
    height: 40px;
}
.food-poisarea p {
    font-size: 15px;
    color:#666;
    font-weight: 500;
    padding-bottom:10px;
}

.food-poisarea button {
    background: #1764c4 url('../images/sub/go-guide1.png') no-repeat 93% 50%;
    border:1px #1764c4 solid;
    font-size: 14px;
    color:#fff;
    font-weight: 500;
    padding:5px 35px 5px 10px;
    border-radius: 50px;
    transition: 0.3s;
}
.food-poisarea button:hover {
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.12);
    color:#fff;
}

.step-attention {
    background-color: #00a5b3;
}
.step-caution {
    background-color: #64a702;
}
.step-warning {
    background-color: #ff9802;
}
.step-serious {
    background-color: #ed3300;
}
.table-legend.ds-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.go-guideline {
    background: #fff url('../images/sub/go-guide.png') no-repeat 93% 50%;
    border:1px #666 solid;
    font-size: 14px;
    color:#666;
    font-weight: 500;padding:5px 35px 5px 10px;
    border-radius: 50px;
    transition: 0.3s;
}
.go-guideline {
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
    color:#222;
}

.weather-boxtitle {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.pollen-pconcentarea {
    width: 50%;
}
.pollen-list li {
    display: inline-block;
    padding: 20px;
    text-align: center;
}
.pollen-list li span{
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
}
.pollen-list li:nth-child(1) span {
    background: url('../images/sub/tree01.png') no-repeat 50% 50%;
}
.pollen-list li:nth-child(2) span {
    background: url('../images/sub/tree02.png') no-repeat 50% 50%;
}
.pollen-list li:nth-child(3) span {
    background: url('../images/sub/tree03.png') no-repeat 50% 50%;
}


/* 복구진도 등록 - 로그인 */
.loginarea {
    width: 100%;
}
.loginarea h4 {
    text-align:right;
    font-size: 26px;
    font-weight: 600;
    color:#222;
    padding:0 15px 15px 0;
}
.login-conarea {
    display: flex;
    flex-wrap: wrap;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    overflow: hidden;
}
.login-left {
    background: #1764c4 url('../images/sub/login-bg.png') no-repeat 50% 50%;
    width: 50%;
    padding:0;
}
.login-right {
    padding:60px;
    box-sizing: border-box;
    width: 50%;
}
.login-radiolist {
    width: 100%;
    padding-bottom:15px;
}

.login-inputlist {
    width: 100%;
}

.login-inputlist input {
    width: 100%;
    border:1px #c4c4c4 solid;
    border-radius: 10px;
    height: 55px;
    line-height: 55px;
    font-size: 18px;  
    color:#666;
    font-weight: 500;
    padding:0 15px;
    margin-bottom:5px;
}
.login-inputlist input::placeholder {
    font-size: 18px;  
    color:#666;
    font-weight: 500;
}
.login-right p {
    color:#777;
    font-size: 15px;
    padding:5px 0 35px 0
}
.login-right button {
    text-align: center;
    background-color: #1764c4;
    border-radius: 10px;
    height: 60px;
    line-height: 60px;
    width: 100%;
    transition: 0.3s;
}
.login-right button span {
    display: inline-block;
    color:#fff;
    font-weight: 600;
    font-size: 22px;
    background: url('../images/sub/icon-login.png') no-repeat 0 50%;
    padding-left:25px;
}
.login-right button:hover {
    background-color: #074898;
}

/* 재난대비안전점검 */
.btn-down {
    height: 50px;
    line-height: 50px;
    background: #1764c4 url('../images/sub/btn-down1.png') no-repeat 93% 50%;
    border-radius: 80px;
    color:#fff;
    font-weight: 500;
    font-size: 18px;
    padding: 0 50px 0 30px;
    margin-top:15px;
    transition: 0.3s;
}
.btn-down:hover {
    height: 50px;
    line-height: 50px;
    background: #074898 url('../images/sub/btn-down1.png') no-repeat 93% 60%;
    border-radius: 80px;
    color:#fff;
    font-weight: 500;
    font-size: 18px;
    padding: 0 50px 0 30px;
    margin-top:15px
}

.check-listarea {
    width: 100%;
    background-color: #f8f8f8;
    border:1px #f0f0f0 solid;
    padding:30px;
    border-radius: 20px;

}
.check-list li {
    display: inline-block;
    padding:20px
}
.check-list li label {
    font-size: 18px;
    font-weight: 500;
}
.check-list li label span{
    margin-right:3px
}
.btn-golist {
    height: 50px;
    line-height: 50px;
    background: #222 url('../images/sub/btn-arrow1.png') no-repeat 93% 50%;
    border-radius: 80px;
    color:#fff;
    font-weight: 500;
    font-size: 18px;
    padding: 0 50px 0 30px;
    margin-top:15px;
    transition: 0.3s;
}
.btn-golist:hover {
    height: 50px;
    line-height: 50px;
    background: #222 url('../images/sub/btn-arrow1.png') no-repeat 95% 50%;
    border-radius: 80px;
    color:#fff;
    font-weight: 500;
    font-size: 18px;
    padding: 0 50px 0 30px;
    margin-top:15px
}

/* 안전감찰 익명제보센터 */
.commlist li {
    font-size: 18px;
    color:#222;
    padding-bottom:10px; 
}
.commlist li .txt-bold{
    font-weight: 600;
}
.commlist-s li {
    font-size: 16px;
    color:#666;
    background: url('../images/sub/commlist-s.png') no-repeat 0 13px;
    padding:5px 10px; 
}
.comm-link {
    background: #fff url('../images/sub/instit-link.png') no-repeat 95% 50%;
    padding:3px 30px 3px 10px;
    border-radius: 50px;
    border:1px #ddd solid;
    transition: 0.3s;
}
.commlist-s li a.comm-link:hover {
    border:1px #cbcbcb solid;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.08);    
}



/* 웹접근성 */
.webaccess-box {
    background: #f5f5f5 url('../images/sub/webaccess-bg.png') no-repeat 100% 100%;
    border-radius: 20px;
    border:1px #dedede solid;
    box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
    padding:35px 550px 35px 35px
}
.webaccess-box h3 {
    font-size: 30px;
    color:#222;
    font-weight: 700;
    margin-bottom:20px;
}

.webaccess-box p {
    font-size: 16px;
    color:#666;
}
.webaccess-box p span {
    font-weight: 600;
}
.web-accesslist {
    background-color: #f8f8f8;
    border:1px #f0f0f0 solid;
    border-radius: 10px;
    padding:30px;
    margin-bottom:5px;
    display: flex;
    flex-wrap: wrap;
}
.web-accesslist span {
    display: block;
    background-color: #1764c4;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    margin-right:35px
}
.web-text h4 {
    color:#1764c4;
    font-size: 20px;
    font-weight: 600;
    padding-bottom:5px
}
.web-textlist li {
    background: url('../images/sub/p-slist.png') no-repeat 0 13px;
    padding: 5px 10px;
}

.web-linklist li {
    display: inline-block;
    background-color: #fff;
    border:1px #c8c8c8 solid;
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    height: 46px;
    line-height: 46px;
    padding:0 20px;
    font-size: 18px;
    font-weight: 600;
    color:#222;
    text-align: center;
    margin-right:5px
}
.web-linklist li span {
    color:#1764c4
}



/* 민방위 */
.civil-boxarea {
   border:1px #dedede solid;
   box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
   border-radius: 20px;
   background: #f5f5f5 url('../images/temp/civil-img.png') no-repeat 100% 100%;
   padding:40px; 
}

.civil-boxarea h3 {
    font-size: 30px;
    font-weight: 600;
    color:#222;
    padding-bottom:15px;
}
.civil-boxarea p {
    font-size: 16px;
    color:#555;
     white-space: pre;
    line-height: 1.4;
}
.civil-boxarea p span {
    font-weight: 600;
}
/* 3단 */
.civil-listarea {
    width: 100%;
    padding-top:80px
}
.civil-list1 {
    display: flex;
}
.civil-list1 li {
   text-align: center;
   background: url('../images/temp/civil-bar.png')no-repeat 100% 50%;
}
.civil-list1 li:last-child {
    margin-right:0;
    padding-right:0;
    background: none;
}
.civil-list1 li h4 {
    background-color: #1764c4;
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    padding:10px 25px;
    border-radius: 50px;
    text-align: center;
    margin-bottom:20px
}
.civil-list1 li p {
    font-size: 16px;
    color:#555;
    line-height: 1.3;
    padding-bottom:10px
}

/* 2단 */
.civil-listarea {
    width: 100%;
    padding-top:80px
}
.civil-list {
    display: flex;
}
.civil-list li {
   width: 27%;
   margin-right:5%;
   padding-right:5%;
   text-align: center;
   background: url('../images/temp/civil-bar.png')no-repeat 100% 50%;
}
.civil-list li:last-child {
    margin-right:0;
    padding-right:0;
    background: none;
}
.civil-list li h4 {
    background-color: #1764c4;
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    padding:10px 25px;
    border-radius: 50px;
    text-align: center;
    margin-bottom:20px
}
.civil-list li p {
    font-size: 16px;
    color:#555;
    line-height: 1.3;
    padding-bottom:10px
}




.downloard-list {
    width: 100%;
    display: flex;
    
}
.downloard-list li {
    width: 32%;
    padding:15px 30px 15px 15px;
    border:1px #dfdfdf solid;
    margin-right:2%;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
    color:#666;
    background: #fff url('../images/temp/btn-down2.png') no-repeat 93% 20px;
    transition: 0.3s;
}
.downloard-list li a {
    color:#666
}
.downloard-list li:hover {
    border:1px #222 solid;
    background: #222 url('../images/temp/btn-down02.png') no-repeat 93% 22px;
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
}
.downloard-list li:hover a {
    color:#fff
}
.downloard-list li:last-child {
    margin-right:0
}

/* 민방위 임무 */
.civil-list1 {
    display: flex;
}
.civil-list1 li {
   width: 45%;
   margin-right:5%;
   padding-right:5%;
   text-align: center;
   background: url('../images/temp/civil-bar.png')no-repeat 100% 50%;
}
.civil-list1 li:last-child {
    margin-right:0;
    padding-right:0;
    background: none;
}
.civil-list1 li h4 {
    display: inline-block;
    background-color: #1764c4;
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    padding:10px 25px;
    border-radius: 50px;
    text-align: center;
    margin-bottom:20px
}
.civil-list1 li p {
    font-size: 16px;
    color:#555;
    line-height: 1.3;
    padding-bottom:10px
}


/* 복구진도등록 */
.business-volumelist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.business-volumelist li {
    display: inline-block;
    width: 33%;
    padding:5px 0
}
.business-volumelist li input {
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}
.b-titlist {
    display: inline-block;
    width: 120px;    
    font-size: 15px;
    font-weight: 600;
}
.b-unit {
    display: inline-block;
    padding-left:5px;
    font-size: 15px;
}



/* 민방위 > 관련사이트 */
.board-linksite {
    width:100%; 
}
.board-linksite ul {
    width:100%;
    border-top:2px #222 solid;
    border-bottom:1px #eee solid;
    display: flex;
    flex-wrap: wrap;
    padding:10px 0;
}

.board-linksite li {
    padding:20px 0 20px 0;
    width: 50%;
    display: flex;
}
.link-imgarea {
    padding:3px;
    border:1px #c8c8c8 solid;
    border-radius:7px;
    overflow: hidden;
    box-shadow:2px 0px 2px rgba(0, 0, 0, 0.12);
    width: 210px;
    margin-right:20px;
}
.link-textarea {
    width: calc(100% - 230px);
    padding-top:10px;
}
.link-textarea h3 {
    font-size: 18px;
    color:#222;
    font-weight: 600;
}
.link-textarea a {
    font-size: 16px;
    color:#666;
    font-weight:400;
}
.link-textarea a:hover {
    font-size: 16px;
    color:#222;
}
.min-imgarea {
    display: inline-block;
    width: 100%;    
    margin-top:20px;    
    
}
.min-imgarea img {
    width: 300px;
    border-radius: 20px;
    border:1px #c8c8c8 solid;
    overflow: hidden;
    margin-right:20px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12); 
}

.min-imgarea1 {
    display: inline-block;
    width: 100%;    
    margin-top:20px;
    
}
.min-imgarea1 img {
    width: 270px;
    padding:20px 30px;
    border-radius: 20px;
    border:1px #c8c8c8 solid;
    overflow: hidden;
    margin-right:20px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12); 
}


/* 법령정보 */
.statute-box {
    background: #f5f5f5 url('../images/sub/row-img.png') no-repeat 100% 100%;
    border-radius: 20px;
    border:1px #dedede solid;
    box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
    padding:35px 250px 35px 35px
}
.statute-box h3 {
    font-size: 30px;
    color:#222;
    font-weight: 700;
    margin-bottom:20px;
}

.statute-box p {
    font-size: 16px;
    color:#666;
}
.statute-box p span {
    font-weight: 600;
}
.btn-statute {
    background: #222 url('../images/sub/btn-linkicon.png') no-repeat 92% 50%;
    font-size: 18px;
    color:#fff;
    font-weight: 600;
    padding:10px 60px 10px 30px;
    border-radius: 80px;
    transition: 0.3s;
}

.btn-statute:hover {
    background: #222 url('../images/sub/btn-linkicon.png') no-repeat 92% 50%;
    font-size: 18px;
    color:#fff;
    font-weight: 600;
    padding:10px 60px 10px 30px;
    border-radius: 80px;
    box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.12);
}
.btn-statute1 {
    background: #fff url('../images/sub/btn-arr.png') no-repeat 92% 47%;
    border:1px #c1c1c1 solid;
    font-size: 15px;
    color:#666;
    font-weight: 600;
    padding:8px 50px 7px 15px;
    border-radius: 10px;
    transition: 0.3s;
}

.btn-statute1:hover {
    background: #fff url('../images/sub/btn-arr.png') no-repeat 92% 47%;
    border:1px #888 solid;
    font-size: 15px;
    color:#222;
    font-weight: 600;
    padding:8px 50px 7px 15px;
    border-radius: 10px;
    transition: 0.3s;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
}


/* 웹접근성 */
.webaccess-box {
    background: #f5f5f5 url('../images/sub/webaccess-bg.png') no-repeat 100% 100%;
    border-radius: 20px;
    border:1px #dedede solid;
    box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
    padding:35px 550px 35px 35px
}
.webaccess-box h3 {
    font-size: 30px;
    color:#222;
    font-weight: 700;
    margin-bottom:20px;
}

.webaccess-box p {
    font-size: 16px;
    color:#666;
}
.webaccess-box p span {
    font-weight: 600;
}
.web-accesslist {
    background-color: #f8f8f8;
    border:1px #f0f0f0 solid;
    border-radius: 10px;
    padding:30px;
    margin-bottom:5px;
    display: flex;
    flex-wrap: wrap;
}
.web-accesslist span {
    display: block;
    background-color: #1764c4;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 50%;
    margin-right:35px
}
.web-text h4 {
    color:#1764c4;
    font-size: 20px;
    font-weight: 600;
    padding-bottom:5px
}
.web-textlist li {
    background: url('../images/sub/p-slist.png') no-repeat 0 13px;
    padding: 5px 10px;
}

.web-linklist li {
    display: inline-block;
    background-color: #fff;
    border:1px #c8c8c8 solid;
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    height: 46px;
    line-height: 46px;
    padding:0 20px;
    font-size: 18px;
    font-weight: 600;
    color:#222;
    text-align: center;
    margin-right:5px
}
.web-linklist li span {
    color:#1764c4
}

/* 자치단체 */
.local-govermtit {
    display: flex;
    justify-content: space-between;    

}
.local-govermtit a {
    background: #1f76a9 url('../images/sub/btn-linkicon.png') no-repeat 90% 50%;
    color:#fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 80px;
    padding:8px 50px 0px 20px;
    height: 35px;
    margin-top: 30px;

}
.loc-govermentlist {
    display: flex;
    flex-wrap: wrap;
    gap:1%;
    padding-top:15px;
    margin-top:15px;
    border-top:1px #ddd dashed
}
.loc-govermentlist li {
    width: 15.8%;
    background-color: #f1f5f9;
    border:1px #d1dde7 solid;    
    border-radius: 10px;
    padding:10px 20px;
    transition: 0.3s;
    margin-bottom:1%;
    box-sizing:border-box
}
.loc-govermentlist li:hover {
    border:1px #b1cae0 solid;
    box-shadow: 5px 0 7px rgba(0, 0, 0, 0.08);
}
.loc-govermentlist li a {
    background: url('../images/sub/goverm-dot.png') no-repeat 0 8px;
    padding-left:10px;
    font-weight: 500;
    cursor: pointer;
}
.loc-govermentlist li:hover a {
    background: url('../images/sub/goverm-dot1.png') no-repeat 0 8px;
    padding-left:10px;
    font-weight: 500;
    color:#1764c4;
    cursor: pointer;  
}

/* Q&A */
.qna-boxarea {
    background: url('../images/temp/qna-img.png') no-repeat 50% 0%;
    width: 100%;
    height: 460px;
    margin-top:40px;
    padding:0px 0 0 60px
}
.qna-boxarea h4 {
    padding-top:50px;
    color:#495e71;
    font-size: 28px;
    font-weight: 600;
    padding-bottom:20px;
    width: 25%;
}
.qna-boxarea p {
    color:#4a5d6d;
    font-size: 14px;
    font-weight: 500;
    width: 25%;
}

/* 국민성금내역공개 table css*/

.baseTable {
    width: 100%;
    padding-bottom:5px;
}

.baseTable table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border-top:1px #ddd solid;    
}
.baseTable table thead tr th {
   border-bottom:1px #ddd solid;
   border-right:1px #ddd solid;
   background-color:#f9f9f9;
   font-size: 18px;
   font-weight: 600;
   color:#222;
   text-align: center;
   padding:10px 0;
}
.baseTable table thead tr th:first-child {
    border-left:1px #ddd solid;
}

.baseTable table tbody tr th {
    border-right:1px #ddd solid;
}
.baseTable table tbody tr th,
.baseTable table tbody tr td {
    font-size: 16px;
    padding:10px 10px;
    text-align: center;
    border-bottom:1px #ddd solid;
    border-right:1px #ddd solid;
    background-color: #fff;
}
.baseTable table tbody tr th:first-child,
.baseTable table tbody tr td:first-child {
    border-left:1px #ddd solid;
}

.baseTable table tbody tr td.tb-bd {
    border-right:1px #ddd solid;
}
/*민방위 테이블*/
.baseTable2 {
    width: 100%;
    padding-bottom:5px;
}

.baseTable2 table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0; 
}
.baseTable2 table tr th {
   background-color:#f9f9f9;
}

.baseTable2 table tr th,
.baseTable2 table tr td {
    padding:10px 10px;
    text-align: center;
    border:1px #ddd solid;
}
/* 풍수해지진재해보험 */
.comm-box-text p {
    font-size: 20px;
}
.insurance-iconlist {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    margin-top:20px
}
.insurance-iconlist li {
    text-align: center;
}
.insurance-iconlist li span {
    display: block;
    background-color: #fff;
    border-radius: 20px;
    border:1px #c8c8c8 solid;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.12);
    margin-bottom:5px;
}
.insurance-iconlist li p {
    font-size: 16px;
}

.insurance-chart {
    background-color: #f8f8f8;
    border:1px #f0f0f0 solid;
    border-radius: 10px;
    text-align: center;
}
.insurance-chart h4 {
    font-size: 24px;
    color:#222;
    font-weight: 600;
    padding:45px 0 35px 0;
}
.insur-chart01 {
    display: flex;
    justify-content: center;    
    width: 70%;
    gap: 20px;
    margin:0 auto;
    
}
.insur-chart01 span{
    border:2px #1764c4 solid;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    padding:25px;
    text-align: center;
    color:#0c52a9;
    font-size: 18px;
    width: 32%;
    font-weight: 600;
}
.insur-chart02 {
    margin-top:50px;
    background: url('../images/temp/chart-arrow1.png') no-repeat 50% 100%;
    padding-bottom:85px
}
.insur-chart02 .chart-tit {
    background-color: #1b3e72;
    padding:10px 30px;
    border-radius: 80px;
    font-size: 18px;
    color:#fff;
    font-weight: 600;
    text-align: center;
}
.insur-chart03 ul{
    background-color: #1764c4;
    border-radius: 10px;
    padding:20px 20px 10px 20px;
    box-sizing: border-box;
    text-align: left;
    width: 70%;
    margin:0 auto;
}
.insur-chart03 li {
    font-size: 17px;
    color:#fff;
    padding-bottom:10px;
    padding-left:30px
}
.insur-chart03 li.num1 {
    background: url('../images/temp/num1.png') no-repeat 0 0;
}
.insur-chart03 li.num2 {
    background: url('../images/temp/num2.png') no-repeat 0 0;
}
.chart-comm {
    font-size: 16px;
    color:#666;
    padding:10px 20px 20px 0px;
    text-align: left;
    width: 70%;
    box-sizing: border-box;
    margin:10px auto;
}


.linksite-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap:15px
    
}
.linksite-list li {
    width: 32%;
    box-sizing: border-box;
    padding:18px 30px 18px 15px;
    border:1px #dfdfdf solid;
    font-weight: 600;
    border-radius: 10px;
    color:#555;
    background: #fff url('../images/sub/l-link.png') no-repeat 93% 20px;
    transition: 0.3s;
}
.linksite-list li a {
    color:#555
}
.linksite-list li:hover {
    border:1px #dedede solid;
    background: #f6f6f6 url('../images/sub/l-link.png') no-repeat 93% 20px;
    box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
}
.linksite-list li:hover a {
    color:#222
}
.linksite-list li:last-child {
    margin-right:0
}


.insurance-listarea {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.insurance-list {
    width: 49.5%;
    vertical-align: top;
    display: flex;
    margin-bottom:20px
}
.insurance-list span {
    display: inline-block;
    border-radius: 10px;
    box-sizing: border-box;
    padding:0 10px;
    border:1px #c8c8c8 solid;
    overflow: hidden;
    width: 200px;
    height: 68px;
    margin-right:20px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12); 
}
.insurance-list ul {
    width: calc(100% - 240px);
}
.insurance-list ul li{
    text-align: left;
    margin-bottom:5px;    
}
.ins-title {
    font-size: 20px;
    color:#222;
    font-weight: 600;
}
.insurance-list ul li .icon-tel {
    display: inline-block;
    background: #ebebeb url('../images/temp/icon-telephone.png') no-repeat 15px 50%;
    padding:5px 15px 5px 40px;
    border-radius: 80px;
    margin-bottom:10px
}
.insurance-list ul li .insur-button {
    background: url('../images/sub/dot.png') no-repeat 0% 50%; 
    padding:5px 0px 5px 10px;
    font-size: 15px;
    display: block;
}
.insurance-list ul li .qr-img {
    width: 130px;
    padding-top:10px
}
.insurance-list ul li .qr-text {
    font-size: 14px;
}

.comment-justify {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.comment-justify .comment-leftarea{
    width: 49.5%;    
}
.comment-justify .comment-rightarea{
    width: 49.5%;
}
.comment-imgarea1 {
    background: #ebebeb url('../images/temp/chart-img001.png') no-repeat 50% 100%;
    border-radius: 20px;
    box-sizing: border-box;
    padding:20px;
    font-size: 18px;
    font-weight: 500;
    height: 253px;
}
.comment-imgarea2 {
    background: #ebebeb url('../images/temp/chart-img002.png') no-repeat 50% 100%;
    border-radius: 20px;
    box-sizing: border-box;
    padding:20px;
    font-size: 18px;
    font-weight: 500;
    height: 253px;
}
.comment-imgareatext {
    display: block;
    font-size: 14px;
    color:#666;
    margin-top:10px
}


/* 교육훈련 > 민방위 > 교육자료 */
.curriculum-area {
    background-color: #f1f1f1;
    border-top:1px #b1b1b1 solid;
    border-bottom:1px #ddd dashed;
    padding:15px;
    display: flex;
    height: 65px;
    justify-content: space-between;
}
.curriculum-area h3 {
    font-size: 20px;
    line-height: 1.8;
}
.curriculum-buttonlist {
    padding:7px 0
}
.curriculum-buttonlist a {
    background: #fff url('../images/sub/btn-down3.png') no-repeat 93% 50%;
    border:1px #ddd solid;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    padding:8px 35px 8px 15px;
    margin-left:10px;
    color:#666;
}
.curriculum-buttonlist a:hover {
    background-color: #f7f7f7;
    border:1px #979797 solid;
    color:#222
}
.tb-downlist {
    padding:25px 15px 15px 15px;
    border-bottom:1px #ddd solid;
    display: flex;
    flex-wrap: wrap;
}
.tb-downlist li {
    width: 24%;
    padding-bottom:10px;
    background: url('../images/sub/dot.png') no-repeat 0 8px;
    padding-left:10px;
}
.tb-downlist li a {
    color:#666;
    font-size: 16px;
}
.tb-downlist li a:hover {
    text-decoration: underline;
    color:#222
}

.recognition-area {
    margin:10px 0 30px 0
}
.recognition-list {
    display: flex;
}

.recognition-list li h3 {
    text-align: center;
    color:#fff;
    font-size: 18px;
    font-weight: 600;
    background-color: #1764c4;    
    padding:10px 20px;
    border-bottom:1px #d4e4f8 solid;
    border-radius: 80px;

}
.recognition-list li.w20 {
    width: 23%;
    border-bottom:1px #ddd solid
    /* border:1px #1764c4 solid; 
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.12);*/
    

}
.recognition-list li.w30 {
    width: 30%;
    border-bottom:1px #ddd solid

}
.recognition-list li.w40 {
    width: 37%;
    border-bottom:1px #ddd solid
}
.recognition-list li.recog-arrow {
    background: url('../images/sub/step-arrow.png') no-repeat 50% 50%;
    width: 5%;
    font-size: 0;
}
.recognit-slist {
    padding:20px;
    width: 100%;
    box-sizing: border-box;
    /* border:3px #1764c4 solid;
    border-top:0px; */
}
.recognit-slist li {
    font-size: 16px;
    font-weight: 500;
    color:#666;
    padding-bottom:10px;
    background: url('../images/sub/comm-dot.png') no-repeat 0 8px;
    padding-left:10px
}



/* 어린이 교육관리 */
.link-boxarea {
    margin:50px 0 0 0;
}
.link-boxarea.bg-childeducation {
    background: url('../images/sub/education-img.png') no-repeat 100% 100%;
    height: 300px;
}
.link-boxarea button {margin-bottom:30px}
.link-boxarea h4 {
    font-size: 30px;
    color:#222;
    font-weight: 700;
    padding-bottom:10px;
}
.link-boxarea p {
    white-space: pre;
    font-size: 18px;
    color:#666;
    line-height: 1.3;
    margin-bottom:15px;
}

.link-boxarea .btn-statute1 {
    margin-top:15px;
}

/* 국민신문고 */
.link-boxarea.bg-people {
    background: url('../images/sub/people-img.png') no-repeat 100% 100%;
    height: 300px;
}

/* 생활안전지도 */
.link-boxarea.bg-livingmap {
    background: url('../images/sub/living-img.png') no-repeat 100% 100%;
    height: 300px;
}

/* 어린이놀이시설안전관리 */
.link-boxarea.bg-children {
    background: url('../images/sub/children-img.png') no-repeat 100% 100%;
    height: 350px;
}
/* 시민안전보험 */
.link-boxarea.bg-insurance {
    background: url('../images/sub/insurance-img.png') no-repeat 100% 100%;
    height: 280px;
}
/* 국민안전교육플랫폼 */
.link-boxarea.bg-platform {
    background: url('../images/sub/platform-img.png') no-repeat 100% 100%;
    height: 290px;
}
/*  Q&A */
.link-boxarea.bg-qna {
    background: url('../images/sub/qna-img.png') no-repeat 100% 100%;
    height: 305px;
}
/*자연재해통계지도 */
.link-boxarea.bg-statistmap {
    background: url('../images/sub/statistmap-img.png') no-repeat 100% 100%;
    height: 305px;
}

/* 통합검색 */
/* search-form */
.tot-searcharea {
    margin:80px 0 40px 0;
    display: flex;
    justify-content: center;
}

.tot-search {
    background-color: #222;
    border:3px #222 solid;
    height: 60px;
    line-height: 60px;
    border-radius:10px;
    overflow: hidden;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.22);
    width: 50%;
    padding:0;
    font-size: 0;
    vertical-align: top;
}
.tot-search input[type="text"]{
    height: 100%;
    border:0px;
    font-size: 20px;
    color:#666;
    padding:0 15px;
    width: calc(100% - 60px);
}

.tot-search input::placeholder {
    color:#9a9a9a;
}
.tot-search .btn-totsearch {
    background: #222 url('../images/sub/cate-searchicon.png') no-repeat 55% 30%;
    height: 60px;
    width: 60px;
    border-radius: 0;
}
/* search-form */
/* 통합검색 체크박스 */
.custom-checkbox {
    display:inline-flex;
    align-items:center;
    font-size:18px;
    cursor:pointer
}
.custom-checkbox input[type="checkbox"]{
    display:none
}
.custom-checkbox .checkmark{
    width:20px;
    height:20px;
    background-color:#ccc;
    border:2px solid #ccc;
    border-radius:4px;
    position:relative;
    margin-right:10px;
    transition:background-color 0.2s ease, border-color 0.2s ease;
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark{
    background-color:#0770d7;
    border-color:#0770d7;
}
.custom-checkbox .checkmark:after{
    content:"";
    position:absolute;
    display:none;
    left:5px;
    top:1px;
    width:6px;
    height:11px;
    border:solid white;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}
.custom-checkbox input[type="checkbox"]:checked + .checkmark:after{
    display:block
}

/* search-tab */
.tot-searchtab {
    display: flex;
    justify-content: center;
    padding:40px 0 40px 0;
}
.tot-searchtab li {
    border:1px #ddd solid;
    background-color: #fff;
    border-right:0px;
    text-align: center;
    font-size: 20px;
    color:#666;
    font-weight: 500;
    padding:12px;
    transition: 0.3s;
    width: 16%
}
.tot-searchtab li:last-child {
    border-right:1px #ddd solid;
}
.tot-searchtab li.active {
    border:1px #222 solid;
    background-color: #222;
    border-right:0px;
    text-align: center;
    font-size: 20px;
    color:#fff;
    font-weight: 500;
    padding:12px;
}
.tot-searchtab li:hover {
    border:1px #222 solid;
    background-color: #222;
    border-right:0px;
    text-align: center;
    font-size: 20px;
    color:#fff;
    font-weight: 500;
    padding:12px;
}
.tot-searchtab li:hover:last-child {
    border-right:1px #222 solid;
}
/* search-tab */

/* 검색결과 갯수 */
.tot-resultarea {
    width: 100%;    
}
.tot-resultarea h3 {
    font-size: 30px;
    color:#000;
    font-weight: 300;
    width: 100%;
    text-align: center;
    padding:70px 0 50px 0;
}
.tot-resultarea h3 span {
    color:#0770d7;
    font-weight: 600;
}
/* 검색결과 갯수 */

/* 실시간 검색어 */
.realtime-searcharea {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fbfbfb;
    padding:40px 20px;
    border-bottom:1px #ddd dashed;
}
.realtime-searcharea h3 {
    font-size: 18px;
    font-weight: 500;
    padding-right:20px;
}
.real-list li {
    display: inline-block;
}
.real-list li a{
    font-size: 16px;
    background-color: #fff;
    border:1px #ddd solid;
    padding:5px 10px 3px 10px;
    border-radius: 50px;
    font-size: 16px;
    transition: 0.3s;
    color:#666
}
.real-list li:hover a{
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
    border:1px #bbb solid;
    color:#222
}
  

/* 실시간 검색어 */
.search-category {    
    padding-bottom:7px;
    display: flex;
    justify-content: space-between;
}
.cateTitle {
    font-size: 20px;
    font-weight: 500;
    color:#666
}
.cateTitle span {
    color:#1764c4
}
.search-category .tot-resultmore {
    font-size: 15px;
    font-weight: 500;
    padding-top:5px;
    color:#666;
    padding-right:20px;
    background: url('../images/sub/search-catearr1.png') no-repeat 100% 50%;
    transition: 0.2s;
}
.search-category .tot-resultmore:hover {
    font-size: 15px;
    font-weight: 500;
    color:#222;
    background: url('../images/sub/search-catearr1.png') no-repeat 101% 50%;
    
}
.tot-resultlist {
    border-top:2px #000 solid;
    padding:20px 0;
    border-bottom:1px #dfdfdf solid;
}

.tot-resultlist li {
    border-bottom:1px #ddd dotted;
    margin-bottom:0px;
    padding:20px 0 0px 0 ;
}
.tot-resultlist li:last-child {
    padding-bottom:0;
    border-bottom:0px
}
.total-resultcate {
    font-size: 24px;
    color:#222;
    font-weight: 600;
    padding-bottom:20px;
    display: flex;
    justify-content: space-between;
}
.tot-resultcate a:hover {
    text-decoration: underline;
}

.tot-resultcate span {
    color:#0770d7
}
.tot-resTitle {
    font-size: 20px;
    color:#222;
    font-weight: 600;
    padding-bottom:20px;
}
.search-home {
    font-size: 0;
    background: url('../images/sub/search-home.png') no-repeat 0 0;
    width: 17px;
    height: 17px;
    vertical-align: top;
    margin:5px 10px 0 0;
}
.tot-resTitle span {
    display: inline-block;
    padding: 0 10px;
    color:#b8b8b8;
    font-weight: 400;
}
.tot-resText {
    font-size: 16px;
    color:#666;
    line-height: 1.4;
    padding-bottom:20px
}

.tot-detail {
    padding:20px 0 0 0 ;    
}
.tot-detail li {
    border-bottom:1px #e2e2e2 dashed;
    padding:20px 0
}
.tot-detail li h3 {
    font-size: 24px;
    color: #222;
    font-weight: 600;
    margin-bottom:20px;
}
.tot-cate1 {
    font-size: 20px;
    color:#222;
    font-weight: 500;
}

.tot-cate1 span {
    display: inline-block;
    padding: 0 10px;
    color:#b8b8b8;
    font-weight: 400;
}

.tot-detailTitle {
    font-size: 18px;
    color:#222;
    font-weight: 500;
    padding-bottom:20px
}
.tot-resTitle .tot-date {
    display: inline-block;
    background-color: #f3f5f9;
    color:#6786ac;
    font-size: 15px;
    border-radius: 80px;
    margin-left:5px;
    padding:2px 10px;
    font-weight: 600;
    vertical-align: top;
    margin-top:3px;
}
.tot-detailText {
    font-size: 15px;
    color:#666;
    line-height: 1.4;
    padding-top:20px
}
.search-word {
    color:#1764c4;
    font-weight: 600;
    background-color: #e9eef7;
    padding:1px 3px;
    border-radius: 3px;
}
/* 통합검색 상세검색 영역 */
.search-toparea {
    background-color: #f8f8f8;
    border-radius: 20px;
    padding:30px 40px 20px 40px;
}

.search-toplist li{
    display:flex;
    flex-wrap:wrap;
    padding-bottom:10px;
    position: relative;
    line-height:2;   
}
.search-toplist li .tit {
    font-size: 18px;
    color:#222;
    font-weight: 600;
    width: 150px;
    padding-right:0px;
    display:inline-block
}
.search-field {
    display:inline-block;
    vertical-align: top;
}
.search-field select, .search-field input {
    display: inline-block;
    border:1px #acacac solid;
    border-radius: 5px;
    height:38px;
    line-height:38px;
    padding: 0 10px;
    font-size:16px;
    color:#666;
}
.search-field .dropdown-section {
    display: inline-block;
    width:150px;
}
.search-field input {
    height:40px;
    line-height:40px;
}


.brd-listarea {
    width: 100%;
    border-top:2px #222 solid;    
}
.brd-list li {
    padding:25px 0;
    width: 100%;
    box-sizing: border-box;    
    border-bottom:1px #eee solid;    
}
.brd-list li:hover {
    background-color: #f3f5f9;
}
.brd-list li .brd-num {
	width:80px;
	text-align:center;
	display:inline-block;
	vertical-align:top
}
.brd-list li .brd-context {
	width:calc(100% - 105px);
	display:inline-block;	
}
.brd-list li .brd-context h3 {
	font-size:18px;
}
.brd-infolist{
	width:100%;
	padding-top:10px;
}
.brd-infolist p {
	display:inline-block;
	font-size:16px;
	color:#666;
	border-bottom:0px;
	padding-right:30px;
}
.brd-infolist p span{
	color:#222;
	font-weight:500;
}
.brd-infolist p img {width:15px;}

/*
.list-context {
    display: inline-block;
    margin-left:20px;
}

.list-context h3 {
    font-size: 22px;
    color:#222;
    font-weight: 600;
    padding-bottom:15px;
}
.brd-list li:hover h3 a{
    font-size: 22px;
    color:#1764c4;
    font-weight: 600;
    padding-bottom:15px;
}*/
.c-informationlist {
    display: inline-block;
    font-size: 16px;
    color:#222;
    padding-bottom:5px;
    padding-right:25px;
    margin-right:25px;
    background:url('../../images/eng/sub/notice-bar.png') no-repeat 100% 50%
}
.c-informationlist span {
    display: inline-block;
    padding-right:5px;
    color:#666
}
.addfile-list {
    border:0px green
}
.addfile-list {
    display: flex;
    flex-wrap: wrap;
}

/* 빠른메뉴서비스 설정 */
.quickmenulist-settingarea {
    width: 1400px;
    margin:40px auto;
    display: flex;
    flex-wrap: wrap;
}
.quickmenulist-settingarea h3 {
    font-size:36px;
    width:100%;
    text-align: center;
    padding-bottom:40px;
}
/* 빠른메뉴서비스 */
.setting-cate01 {
    border:1px #0074e5 solid;
    width:100%;
    padding:35px 35px 5px 35px;
    border-radius: 20px;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.12);
}

/*.setting-cate01 {
    border:1px #0074e5 solid;
    width:100%;
    padding:35px 35px 5px 35px;
    border-radius:50px;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.12);
}*/
.title01 {
    color:#36435e;
    font-size: 30px;
    font-weight: 700;
    background:url('../images/main/setting-title1.png') no-repeat 0 50%;
    padding-left:40px;
    margin-bottom:10px;
}
.title02 {
    color:#36435e;
    font-size: 30px;
    font-weight: 700;
    background:url('../images/main/setting-title2.png') no-repeat 0 50%;
    padding-left:40px;
    margin-bottom:10px;
}
.title03 {
    color:#36435e;
    font-size: 30px;
    font-weight: 700;
    background:url('../images/main/setting-title3.png') no-repeat 0 50%;
    padding-left:40px;
    margin-bottom:10px;
}
.title04 {
    color:#36435e;
    font-size: 30px;
    font-weight: 700;
    background:url('../images/main/setting-title4.png') no-repeat 0 50%;
    padding-left:40px;
    margin-bottom:10px;
}

.quick-list1 {
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
}
.quick-list1 li {
    width: 13%;
    margin-bottom:30px;
    text-align: center;
}
/*.quick-list1 li {
    width: 14%;
    margin-bottom:30px;
    text-align: center;
}*/
.quick-list1 li a {
    font-size: 20px;
    color:#222;
    font-weight: 600;
    white-space: pre;
}

.quick-list1 li span {
    display:block;
    font-size: 0;
    width: 100px;
    height: 100px;
    padding-top:20px;
    border-radius: 50%;
    margin:0 auto 10px auto;
    transition: 0.3s;
    background:#ebf5ff;
    border:1px #ebf5ff solid
}

.quick-list1 li:hover span {
	background:#fff;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}

.quick-list1 li.active span {
    background:#fff;
    border:2px #1764c4 dashed;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}

.quick-list1 li.active:hovor span {
 	background:#fff;
    border:2px #1764c4 dashed;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
/*.quick-list1 li.bg07 span {
    background:#ebf5ff url('../images/sub/quick-menu7.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg08 span {
    background:#ebf5ff url('../images/sub/quick-menu8.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg09 span {
    background:#ebf5ff url('../images/sub/quick-menu9.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg10 span {
    background:#ebf5ff url('../images/sub/quick-menu10.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg11 span {
    background:#ebf5ff url('../images/sub/quick-menu11.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg12 span {
    background:#ebf5ff url('../images/sub/quick-menu12.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg07:hover span {
    background:#fff url('../images/sub/quick-menu7.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg08:hover span {
    background:#fff url('../images/sub/quick-menu8.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg09:hover span {
    background:#fff url('../images/sub/quick-menu9.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg10:hover span {
    background:#fff url('../images/sub/quick-menu10.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg11:hover span {
    background:#fff url('../images/sub/quick-menu11.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg12:hover span {
    background:#fff url('../images/sub/quick-menu12.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg13 span {
    background:#ebf5ff url('../images/sub/quick-menu13.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg13:hover span {
    background:#fff url('../images/sub/quick-menu13.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg14 span {
    background:#ebf5ff url('../images/sub/quick-menu14.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg14:hover span {
    background:#fff url('../images/sub/quick-menu14.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg15 span {
    background:#ebf5ff url('../images/sub/quick-menu15.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg15:hover span {
    background:#fff url('../images/sub/quick-menu15.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg16 span {
    background:#ebf5ff url('../images/sub/quick-menu16.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg16:hover span {
    background:#fff url('../images/sub/quick-menu16.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg17 span {
    background:#ebf5ff url('../images/sub/quick-menu17.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg17:hover span {
    background:#fff url('../images/sub/quick-menu17.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg18 span {
    background:#ebf5ff url('../images/sub/quick-menu18.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg18:hover span {
    background:#fff url('../images/sub/quick-menu18.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg19 span {
    background:#ebf5ff url('../images/sub/quick-menu19.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg19:hover span {
    background:#fff url('../images/sub/quick-menu19.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg20 span {
    background:#ebf5ff url('../images/sub/quick-menu20.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg20:hover span {
    background:#fff url('../images/sub/quick-menu20.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg21 span {
    background:#ebf5ff url('../images/sub/quick-menu21.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg21:hover span {
    background:#fff url('../images/sub/quick-menu21.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg22 span {
    background:#ebf5ff url('../images/sub/quick-menu22.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg22:hover span {
    background:#fff url('../images/sub/quick-menu22.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg23 span {
    background:#ebf5ff url('../images/sub/quick-menu23.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg23:hover span {
    background:#fff url('../images/sub/quick-menu23.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg24 span {
    background:#ebf5ff url('../images/sub/quick-menu24.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg24:hover span {
    background:#fff url('../images/sub/quick-menu24.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg25 span {
    background:#ebf5ff url('../images/sub/quick-menu25.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg25:hover span {
    background:#fff url('../images/sub/quick-menu25.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}
.quick-list1 li.bg26 span {
    background:#ebf5ff url('../images/sub/quick-menu26.png') no-repeat 50% 50%;
    border:1px #ebf5ff solid
}
.quick-list1 li.bg26:hover span {
    background:#fff url('../images/sub/quick-menu26.png') no-repeat 50% 50%;
    border:1px #b8b8b8 solid;
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.15);
}


*/




.setting-btnarea {
    width:100%;
    border-top:1px #e4e4e4 dashed;
    display: flex;
    justify-content: center;
    padding-top:20px;
    margin-top:10px
}


/* 생활안전점검 리스트 하단 버튼 */
.survey-btnarea {
	text-align:center;
	width:100%;
}
.survey-btnarea a {
	margin:0 2px;
}

/* 개인정보처리방침 */
.priv-link {
	margin-top:20px;
}
.priv-link li {
    box-sizing: border-box;
    padding: 15px 30px 15px 15px;
    border: 1px #dfdfdf solid;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    margin-bottom:10px;
    color: #555;
    background: #fff url(../images/sub/l-link.png) no-repeat 96% 20px;
    transition: 0.3s;
}
.priv-link li a{
	display:block
}
.priv-link li:hover {
	background:#f9f9f9 url(../images/sub/l-link.png) no-repeat 96% 20px;;
	box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
}


.privacy-list {
	margin-top:20px;
}
.privacy-list li {
    box-sizing: border-box;
    padding: 15px 30px 15px 15px;
    border: 1px #dfdfdf solid;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    margin-bottom:10px;
    color: #555;
    background:#fff;
    transition: 0.3s;
}
.privacy-list li a{
	display:block
}
.privacy-list li:hover {
	background:#f9f9f9;
	box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
}

.privacy-btn {
    padding:7px 12px;
    font-size: 14px;
    color:#666;
    font-weight: 500;
    border:1px #ddd solid;
    border-radius:5px;
    transition:0.3s
}
.privacy-btn:hover {
    border:1px #bbb solid;
    color:#555;
    border-radius:5px;
    margin-top:3px;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
}
.btn-pdown {
    height: 30px;
    line-height: 30px;
    background: #fff url('../images/sub/btn-down.png') no-repeat 95% 8px;
    background-size:10px;
    border-radius: 10px;
    color:#666;
    font-weight: 500;
    font-size: 14px;
    padding: 0 30px 0 10px;
    margin-top:2px;
    transition: 0.3s;
}
.btn-pdown:hover {
    background: #fff url('../images/sub/btn-down.png') no-repeat 95% 10px;
    background-size:10px;
    color:#222;
}

.priv-dot {
	background: url('../images/sub/btn-arr.png') no-repeat 0 7px;
	padding-left:13px;
}

.priv-list {
	padding-left:0px;
}
.priv-list li{
	font-size:18px;
	padding-bottom:10px;
	color:#222;
}
.priv-list li:last-child {
	padding-bottom:0;
}
.priv-slist {
	padding:0px 0 0px 15px;
}
.priv-slist li{
	font-size:16px;
	color:#222;
	padding:3px 0 10px 3px
}
.priv-slist li:last-child {
	padding-bottom:0;
}


@media all and (max-width:1500px) { 
    
    /* 재난현황 */
    .situation-cateinner {
        width: 100%;
        margin:0 auto;
        padding:0 2%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider1 {
        width: 100%;
        max-width: 100%;
        height: 130px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

    }
    .slider-wrapper {
        width: 90%;
        height: 130px;
        overflow: hidden;
        text-align: center;
    }
    .situation-content {
        width: 100%;
        margin:2% auto;
        padding:0 2%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .situation-leftarea {
        width: 53%;
        margin-right:2%;        
    }
    .current-content {
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        margin-bottom:0px;
        height: 330px;
        box-sizing: border-box;
        padding:30px;
        
    }
    .textmessage-content {
        margin-top:4%;
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        height: 310px;
        box-sizing: border-box;
        padding:30px;
    }
    .situation-maparea {
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        width: 45%;
        height: 660px;
        text-align: center;
        overflow: hidden;
    }
    .situation-infoarea {
        width: 100%;
        margin-top:2%;
        
    }
    
    .guideline-left {
        width: 53%;
        display: inline-block;
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding:30px;
        margin-right:2%;
        height: 250px;
    }
    .around-facilities {
        width: 45%;
    }
    .around-faclist {
        border:1px #d0d0d0 solid;
        border-right:0px;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        width: 50%;
        height: 250px;
        border-radius: 20px 0 0 20px;
        overflow: hidden;
    }
    .around-safelist {
        border:1px #bdcfe1 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 0 20px 20px 0;
        width: 50%;
        height: 250px;
        overflow: hidden;
    }


    /* 웹접근성 */
    .webaccess-box {
        background: #f5f5f5 url('../images/sub/webaccess-bg.png') no-repeat 100% 100%;
        border-radius: 20px;
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        padding:35px 450px 35px 35px
    }
    .webaccess-box h3 {
        font-size: 30px;
        color:#222;
        font-weight: 700;
        margin-bottom:20px;
    }

    .webaccess-box p {
        font-size: 16px;
        color:#666;
    }
    .webaccess-box p span {
        font-weight: 600;
    }
    .web-accesslist {
        background-color: #f8f8f8;
        border:1px #f0f0f0 solid;
        border-radius: 10px;
        padding:30px;
        margin-bottom:5px;
        display: flex;
        flex-wrap: wrap;
    }
    .web-accesslist span {
        display: block;
        background-color: #1764c4;
        width: 70px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        border-radius: 50%;
        margin-right:35px
    }
    .web-text h4 {
        color:#1764c4;
        font-size: 20px;
        font-weight: 600;
        padding-bottom:5px
    }
    .web-textlist li {
        background: url('../images/sub/p-slist.png') no-repeat 0 13px;
        padding: 5px 10px;
    }

    .web-linklist li {
        display: inline-block;
        background-color: #fff;
        border:1px #c8c8c8 solid;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
        border-radius: 50px;
        height: 46px;
        line-height: 46px;
        padding:0 20px;
        font-size: 18px;
        font-weight: 600;
        color:#222;
        text-align: center;
        margin-right:5px;
        margin-bottom:10px
    }

    /* Q&A */
    .qna-boxarea {
        background: url('../images/temp/qna-img.png') no-repeat 50% 0%;
        width: 100%;
        background-size: contain;
        height: 460px;
        margin-top:40px;
        padding:0px 0 0 30px
    }
    .qna-boxarea h4 {
        padding-top:30px;
        color:#495e71;
        font-size: 28px;
        font-weight: 600;
        padding-bottom:20px;
        width: 35%;
    }
    .qna-boxarea p {
        color:#4a5d6d;
        font-size: 14px;
        font-weight: 500;
        width: 35%;
    }
    /* 빠른메뉴서비스 설정 */
	.quickmenulist-settingarea {
	    width:100%;
        padding:0 2%;
	    margin:40px auto;
	    display: flex;
	    flex-wrap: wrap;
	}
   
    
    
}


@media all and (max-width:1450px) {
    .linksite-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap:10px
    }
    .linksite-list li {
        width: 32.5%;
        box-sizing: border-box;
        padding:15px 30px 15px 15px;
        border:1px #dfdfdf solid;
        font-size: 17px;
        font-weight: 600;
        border-radius: 10px;
        color:#555;
        background: #fff url('../images/sub/l-link.png') no-repeat 94% 20px;
        transition: 0.3s;
    }
    .linksite-list li:hover {
        border:1px #dedede solid;
        background: #f6f6f6 url('../images/sub/l-link.png') no-repeat 94% 20px;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
    }

    
    .insurance-listarea {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .insurance-list {
        display: flex;
        margin-bottom:20px
    }
    .insurance-list span {
        display: inline-block;
        border-radius: 20px;
        box-sizing: border-box;
        padding:0 10px;
        border:1px #c8c8c8 solid;
        overflow: hidden;
        width: 200px;
        height: 55px;
        line-height: 55px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12); 
    }
    .insurance-list span img {
        width: 170px;
    }
    .insurance-list ul li{
        text-align: left;
        margin-bottom:5px;    
    }
    .ins-title {
        font-size: 20px;
        color:#222;
        font-weight: 600;
    }
    .insurance-list ul li .icon-tel {
        display: inline-block;
        background: #ebebeb url('../images/temp/icon-telephone.png') no-repeat 15px 50%;
        padding:5px 15px 5px 40px;
        border-radius: 80px;
        margin-bottom:10px
    }
    .insurance-list ul li .insur-button {
        background: url('../images/sub/dot.png') no-repeat 0% 50%; 
        padding:5px 0px 5px 10px;
        font-size: 15px;
        display: block;
    }
    .insurance-list ul li .qr-img {
        width: 100px;
    }
    .insurance-list ul li .qr-text {
        font-size: 14px;
    }
}
@media all and (max-width:1400px) {
	.insurance-listarea {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items:flex-start; 
        justify-content: space-between;
    }
    .insurance-list {
        display: flex;
        flex-wrap: wrap;  
        margin-bottom:30px
    }
    .insurance-list span {
        display: inline-block;
        border-radius: 20px;
        box-sizing: border-box;
        padding:0 10px;
        border:1px #c8c8c8 solid;
        overflow: hidden;
        height: 55px;
        line-height: 55px;
        margin-bottom:10px;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12); 
    }
    .insurance-list span img {
        width: 170px;
    }
    .insurance-list ul {
    	width:100%;
    }
    .insurance-list ul li{
        text-align: left;
        margin-bottom:5px;    
    }
    .ins-title {
        font-size: 20px;
        color:#222;
        font-weight: 600;
    }
    .insurance-list ul li .icon-tel {
        display: inline-block;
        background: #ebebeb url('../images/temp/icon-telephone.png') no-repeat 15px 50%;
        padding:5px 15px 5px 40px;
        border-radius: 80px;
        margin-bottom:10px
    }
    .insurance-list ul li .insur-button {
        background: url('../images/sub/dot.png') no-repeat 0% 50%; 
        padding:5px 0px 5px 10px;
        font-size: 15px;
        display: block;
    }
    .insurance-list ul li .qr-img {
        width: 100px;
    }
    .insurance-list ul li .qr-text {
        font-size: 14px;
    }
    
    /* 빠른메뉴서비스 설정 */
	.quickmenulist-settingarea {
	    width: 1400px;
	    margin:40px auto;
	    display: flex;
	    flex-wrap: wrap;
	}
	
	/* 기상정보 */
	.disaster-winfoarea {
	    padding-top:20px;
	    display: flex;
	    justify-content: space-between;
	}
	.disas-weatherinfo {
	    display:flex;
	    align-items:end;
	    padding-bottom:10px;
	    padding-left:0px;
	    border-bottom:1px #c7c7c7 dashed;
	    min-height:80px;
	}
	.disas-weatherinfo span {
	    display: inline-block;
	    font-size: 20px;
	    font-weight: 500;
	    color:#222;
	    padding:0 20px 0 0;
	    vertical-align:bottom;    
	}
	.disas-weatherinfo .d-temp {
	    font-size: 42px;
	    font-weight: 600;
	    color:#222;
	    height:50px;
	    vertical-align:bottom;
	}
}
@media all and (max-width:1300px) { 
    
    /* 재난현황 */
    .situation-cateinner {
        width: 100%;
        margin:0 auto;
        padding:0 2%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider1 {
        width: 100%;
        max-width: 100%;
        height: 130px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

    }
    .slider-wrapper {
        width: 90%;
        height: 130px;
        overflow: hidden;
        text-align: center;
    }
    .situation-content {
        width: 100%;
        margin:2% auto;
        padding:0 2%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .situation-leftarea {
        width: 53%;
        margin-right:2%
    }
    .current-content {
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        margin-bottom:0px;
        height: 330px;
        box-sizing: border-box;
        padding:30px;
    }
    .textmessage-content {
        margin-top:4%;
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        height: 310px;
        box-sizing: border-box;
        padding:30px;
    }
    .situation-maparea {
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        width: 45%;
        height: 660px;
        text-align: center;
        overflow: hidden;
    }
    .situation-infoarea {
        width: 100%;
        margin-top:2%;
    }
    
    .guideline-left {
        width: 53%;
        display: inline-block;
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding:30px;
        margin-right:2%;
        height: 250px;
    }
    .around-facilities {
        width: 45%;
    }
    .around-faclist {
        border:1px #d0d0d0 solid;
        border-right:0px;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        width: 50%;
        height: 250px;
        border-radius: 20px 0 0 20px;
        overflow: hidden;
    }
    .around-safelist {
        border:1px #bdcfe1 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 0 20px 20px 0;
        width: 50%;
        height: 250px;
        overflow: hidden;
    }


    /* 웹접근성 */
    .webaccess-box {
        background: #f5f5f5 url('../images/sub/webaccess-bg.png') no-repeat 100% 100%;
        border-radius: 20px;
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        padding:35px 450px 35px 35px
    }
    .webaccess-box h3 {
        font-size: 30px;
        color:#222;
        font-weight: 700;
        margin-bottom:20px;
    }

    .webaccess-box p {
        font-size: 16px;
        color:#666;
    }
    .webaccess-box p span {
        font-weight: 600;
    }
    .web-accesslist {
        background-color: #f8f8f8;
        border:1px #f0f0f0 solid;
        border-radius: 10px;
        padding:30px;
        margin-bottom:5px;
        display: flex;
        flex-wrap: wrap;
    }
    .web-accesslist span {
        display: block;
        background-color: #1764c4;
        width: 70px;
        height: 70px;
        line-height: 70px;
        text-align: center;
        border-radius: 50%;
        margin-right:35px
    }
    .web-text h4 {
        color:#1764c4;
        font-size: 20px;
        font-weight: 600;
        padding-bottom:5px
    }
    .web-textlist li {
        background: url('../images/sub/p-slist.png') no-repeat 0 13px;
        padding: 5px 10px;
    }

    .web-linklist li {
        display: inline-block;
        background-color: #fff;
        border:1px #c8c8c8 solid;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
        border-radius: 50px;
        height: 46px;
        line-height: 46px;
        padding:0 20px;
        font-size: 18px;
        font-weight: 600;
        color:#222;
        text-align: center;
        margin-right:5px;
        margin-bottom:10px
    }
    
    /* Q&A */
    .qna-boxarea {
        background: url('../images/temp/qna-img1.png') no-repeat 50% 50px;
        background-size: contain;
        width: 100%;
        height: 460px;
        margin-top:20px;
        padding:0px 0 0 40px
    }
    .qna-boxarea h4 {
        padding-top:50px;
        color:#495e71;
        font-size: 24px;
        font-weight: 600;
        padding-bottom:10px;
        width: 50%;
    }
    .qna-boxarea p {
        color:#4a5d6d;
        font-size: 14px;
        font-weight: 500;
        width: 50%;
    }


    .link-boxarea p {
        white-space: pre;
        font-size: 16px;
        color:#666;
        line-height: 1.3;
    }

    /* 국민신문고 */
    .link-boxarea.bg-people {
        background: url('../images/sub/people-img.png') no-repeat 100% 100%;
        height: 270px;
        background-size: 450px;
    }    
}

/* pad area */
@media all and (max-width:1280px) { 

    .board-toparea {
        /*background-color: #f8f8f8;*/
        border:1px #f1f7fc solid;
        border-radius: 10px;
        padding:3%
    }
    .board-toplist li{
        display: flex;
        padding-bottom:10px;
        position: relative;

    }
    .board-toplist li {
        flex-wrap: wrap;
    }
    .board-toplist li .tit {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        flex-basis: 100%;
        padding-right:20px
    }
    .board-toplist li .tit:nth-child(3) {
    	margin-top:	10px;
    }

    /* .board-topbtn {
        position: absolute;
        bottom:10px;
        right:0px;
    } */
    .btn { border-radius: 8px; }

    .btn:focus {/*border-color: #1f1f1f;*/ box-shadow: 0 2px 4px -2px rgba(0,0,0,.2);} 
    .btn:hover {
        border-color: #959595; 
        color:#222
    }
    .btn-blue {
        border-style: solid; 
        border-width: 1px; 
        border-color: #1764c4; 
        background-color: #1764c4; 
        color: #fff; 
    }
    .btn-blue:hover {
        border-style: solid; 
        border-width: 1px; 
        border-color: #19539c; 
        background-color: #19539c; 
        color: #fff; 
    }
    .board-total {
        display: flex;
        justify-content: space-between;
        margin-top:20px
    }
    .board-count {
        font-size: 16px;
        color:#666;
        padding-bottom:14px;
    }
    .board-count span {
        color:#1764c4;
        font-weight: 600;
    }

    /* 일반게시판-목록 */
    .board-list {
        width:100%;
        margin-top:10px;   
    }
    .board-list table {
        width:100%;
        border-top:2px #222 solid;
        
    }
    .board-list table thead th{
        font-size:17px;
        color:#222;
        text-align: center;
        font-weight: 600;
        padding:15px 0;
        border-bottom:1px #ddd solid;
        background-color: #f9f9f9;    
    }
    .board-list table tbody td {
        border-bottom: 1px solid #EAEEEF; 
        color: #666;
        background-color: #fff;
        text-align: center;
        padding:13px;
        font-size: 16px;
    }
    .board-list table tbody td span {
        display: inline-block;
        width: 26px;
        height: 26px;
        padding-top:4px;
        border-radius: 50%;    
        background-color: #e8eaef;
    }
    .board-list table tbody td img {
        width:19px
    }

    /* form layout */
    

    /* input */
    input[type=text].form-input:read-only,
    input[type=text].form-input.readonly,
    input[type=password].form-input:read-only,
    input[type=password].form-input.readonly,
    input[type=tel].form-input:read-only,
    input[type=tel].form-input.readonly,
    input[type=email].form-input:read-only,
    input[type=email].form-input.readonly,
    input[type=number].form-input:read-only,
    input[type=number].form-input.readonly,
    textarea.form-input:read-only,
    textarea.form-input.readonly {cursor: default;}

    input[type=text].form-input:disabled,
    input[type=text].form-input.disabled,
    input[type=password].form-input:disabled,
    input[type=password].form-input.disabled,
    input[type=tel].form-input:disabled,
    input[type=tel].form-input.disabled,
    input[type=email].form-input:disabled,
    input[type=email].form-input.disabled,
    input[type=number].form-input:disabled,
    input[type=number].form-input.disabled,
    textarea.form-input:disabled,
    textarea.form-input.disabled {
        background-color: #FAFAFA; 
        color: #B6B6B6;
    }

    input[type=text].form-input,
    textarea.form-input {transition:border-color 0.1s ease-in;}
    input[type=text].form-input:not(:disabled):not(.disabled):not(.readonly):not(:read-only):focus,
    textarea.form-input:not(:disabled):not(.disabled):not(.readonly):not(:read-only):focus {
        border-color: #0074e5;
    }
    /* 재난현황 */
    .slider1 {
        width: 100%;
        max-width: 100%;
        height: 115px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 85%;
        height: 115px;
        overflow: hidden;
        text-align: center;
    }
    .situation-cate li {
        display: inline-block;
        border:1px #c7cddc solid;
        background-color: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin:0 9px;
        width: 85px;
        height: 85px;
        border-radius: 20px;
        transition: 0.3s;
        font-size: 18px;
        color:#36435e;
        font-weight: 500;
    }
    .situation-cateinner .situ-btn {
        background-color: #fff;
        border:1px #c7ccd6 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        width: 46px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        border-radius: 50%;
        transition: 0.3s;
    }
    .situation-cateinner .situ-btn img {
        transition: 0.3s;
    }
    .situation-cate li:first-child {
        margin-left:30px
    }
    .situation-cate li:last-child {
        margin-right:30px
    }
    .situation-cate li:hover {
        background-color: #b1d4f5;
        border:1px #91bce5 solid;
    }
    .situation-cateinner .situ-btn:hover {
        border: 1px transparent solid;
        background-color: #36435e;
    }
    .situation-cateinner .situ-btn:hover .img-pre {
        filter: brightness(0) invert(1);
        transform: translateX(-20%);
    }
    .situation-cateinner .situ-btn:hover .img-next {
        filter: brightness(0) invert(1);
        transform: translateX(20%);
    }
    /* 산사태 발생시 */
    .situation-guidelist li {
        display: inline-block;
        margin:0 7px
    }
    .situation-guidelist li img {
        padding-bottom: 5px;
    }
    .situation-guidelist li span {
        display: block;
        margin-bottom:5px;
        font-size: 13px;

    }
    .situation-guidelist li p {
        font-size: 13px;
        color:#222;
        font-weight: 500;
        text-align: center;
    }
    
    /* 복구진도등록 */
    .business-volumelist {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .business-volumelist li {
        display: inline-block;
        width: 48%;
        padding:5px 0
    }
    .business-volumelist li input {
        width: 50px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
    }
    .b-titlist {
        display: inline-block;
        width: 130px;    
        font-size: 15px;
        font-weight: 600;
    }
    .b-unit {
        display: inline-block;
        padding-left:5px;
        font-size: 15px;
    }


    /* 민방위 > 관련사이트 */
    /* .board-linksite {
        width:100%; 
    }
    .board-linksite ul {
        width:100%;
        border-top:2px #222 solid;
        border-bottom:1px #eee solid;
        display: flex;
        flex-wrap: wrap;
        padding:10px 0;
    } */

    .board-linksite li {
        padding:20px 0 20px 0;
        width: 50%;
        display: flex;
    }
    .link-imgarea {
        padding:3px;
        border:1px #c8c8c8 solid;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.12);
        width: 210px;
        margin-right:20px;
    }
    .link-imgarea img {
        width: 100%;
        max-width: 218px;
    }
    .link-textarea {
        width: calc(100% - 230px);
        padding-top:10px;
    }
    .link-textarea h3 {
        font-size: 17px;
        color:#222;
        font-weight: 600;
    }
    .link-textarea a {
        font-size: 15px;
        color:#666;
        font-weight:400;
    }
    .link-textarea a:hover {
        font-size: 15px;
        color:#222;
    }

    /* 풍수해지진재해보험 */
    .comm-box-text p {
        font-size: 18px;
    }
    .insurance-iconlist {
        gap:15px;
    }
    .insurance-iconlist li span img {
        width: 65px;
    }
    .insurance-iconlist li p {
        font-size: 16px;
    }
    .insurance-chart h4 {
        font-size: 24px;
        color:#222;
        font-weight: 600;
        padding:35px 0;
    }
    .insur-chart01 {
        width: 80%;        
    }
    .insur-chart01 span{
        border:2px #1764c4 solid;
        box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        padding:25px;
        text-align: center;
        color:#0c52a9;
        font-size: 17px;
        width: 32%;
        font-weight: 600;
    }
    .insur-chart02 {
        margin-top:50px;
        background: url('../images/temp/chart-arrow1.png') no-repeat 50% 100%;
        padding-bottom:85px
    }
    .insur-chart02 .chart-tit {
        background-color: #1b3e72;
        padding:10px 30px;
        border-radius: 80px;
        font-size: 17px;
        color:#fff;
        font-weight: 600;
        text-align: center;
    }
    .insur-chart03 ul{
        background-color: #1764c4;
        border-radius: 10px;
        padding:20px 20px 10px 20px;
        box-sizing: border-box;
        text-align: left;
        width: 80%;
        margin:0 auto;
    }
    .insur-chart03 li {
        font-size: 17px;
        color:#fff;
        padding-bottom:10px;
        padding-left:30px
    }
    .insur-chart03 li.num1 {
        background: url('../images/temp/num1.png') no-repeat 0 0;
    }
    .insur-chart03 li.num2 {
        background: url('../images/temp/num2.png') no-repeat 0 0;
    }
    .chart-comm {
        font-size: 16px;
        color:#666;
        padding:10px 20px 20px 0px;
        text-align: left;
        width: 80%;
        box-sizing: border-box;
        margin:10px auto;
    }

    .linksite-list li {
        width: 49%;
    }

    
    /* 어린이 교육관리 */
    .link-boxarea {
        margin:50px 0;
    }
    .link-boxarea.bg-childeducation {
        background: url('../images/sub/education-img.png') no-repeat 100% 100%;
        height: 300px;
    }
    .link-boxarea button {margin-bottom:30px}
    .link-boxarea h4 {
        font-size: 30px;
        color:#222;
        font-weight: 700;
        padding-bottom:10px;
    }

    /* 생활안전지도 */
    .link-boxarea.bg-livingmap {
        background: url('../images/sub/living-img.png') no-repeat 100% 100%;
        height: 300px;     
        background-size: 360px;   
    }
    /* Q&A */
    .link-boxarea.bg-qna {
        background: url('../images/sub/qna-img.png') no-repeat 100% 100%;
        background-size: 360px;
        height: 305px;
    }
    
    /* 빠른메뉴서비스 설정 */
    .quick-list1 li {
        width: 18%;
        text-align: center;
    }
    
    /* 기상정보 */
	.disaster-winfoarea {
	    padding-top:20px;
	    display: flex;
	    justify-content: space-between;
	}
	.disas-weatherinfo {
	    display:flex;
	    align-items:end;
	    justify-content:center;
	    padding-bottom:10px;
	    padding-left:0px;
	    border-bottom:1px #c7c7c7 dashed;
	    min-height:100px;
	}
	.dis-winfoleft {
		padding:20px;
	}
	.dis-winfoleft .today {
	    position: absolute;
	    top: 20px;
	    right: 20px;
	}
	.disas-weatherinfo span {
	    display: inline-block;
	    font-size: 20px;
	    font-weight: 500;
	    color:#222;
	    padding:0 10px;
	    vertical-align:bottom;    
	}
	.disas-weatherinfo span img,
	.disas-weatherinfo01 span img {
		width:50px
	}
	.disas-weatherinfo .d-temp {
	    font-size: 42px;
	    font-weight: 600;
	    color:#222;
	    height:50px;
	    vertical-align:bottom;
	}
	.disas-weatherinfo01 {
		min-height:100px;
		justify-content:center;
	}
	.disas-weatherinfo01 span {
		padding:0 10px;
	}
	.temperature-list li:first-child {
	    padding-right:20px;
	}
	.temperature-list li:last-child {
	    padding-left:20px;
	}
	
	/* 개인정보처리방침 */
	.privacy-btn {
		height: 28px;
	    line-height: 28px;
	    font-size: 14px;
	    font-weight: 500;
	}

.priv-dot {
	background: url('../images/sub/btn-arr.png') no-repeat 0 7px;
	padding-left:13px;
}
}

@media all and (max-width:1150px) { 

    /* 재난현황 */
    .slider1 {
        width: 100%;
        max-width: 100%;
        height: 110px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 85%;
        height: 110px;
        overflow: hidden;
        text-align: center;
    }
    .situation-cate li {
        display: inline-block;
        border:1px #c7cddc solid;
        background-color: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin:0 8px;
        width: 80px;
        height: 80px;
        border-radius: 20px;
        transition: 0.3s;
        font-size: 16px;
        color:#36435e;
        font-weight: 500;
    }
    .situation-cateinner .situ-btn {
        background-color: #fff;
        border:1px #c7ccd6 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 50%;
        transition: 0.3s;
    }
    .situation-cateinner .situ-btn img {
        transition: 0.3s;
    }
    .situation-cate li:first-child {
        margin-left:10px
    }
    .situation-cate li:last-child {
        margin-right:10px
    }

    .situation-titarea {
        padding-bottom:15px;
        margin-bottom:15px;
    }
    .situation-titarea h3 {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        display: inline-block;
        text-align: left;   
        height: 28px;
        line-height: 28px;
        
    }
    .situation-titarea .basetime {
        display: inline-block;
        padding:0px 8px;
        height: 22px;
        line-height: 23px;
        font-size: 13px;
    }
    .situation-titarea .basetext {
        font-size: 15px;
    }
    
    .situation-titarea .more {
        font-size: 14px;
        font-weight: 500;
        margin-top:2px;
        color:#666;
    }
    .situation-titarea .more:hover {
        color:#222;
    }

    /* 재난특보 타이틀 */
    .current-titarea {
        padding-bottom:15px;
        margin-bottom:15px;
    }
    .current-titarea h3 {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        display: inline-block;
        text-align: left;   
        height: 28px;
        line-height: 28px;
        
    }
    .current-titarea .basetime {
        display: inline-block;
        padding:0px 8px;
        height: 22px;
        line-height: 23px;
        font-size: 13px;
    }
    .current-titarea .basetext {
        font-size: 15px;
    }
    
    .current-titarea .more {
        font-size: 14px;
        font-weight: 500;
        margin-top:2px;
        color:#666;
    }
    .current-titarea .more:hover {
        color:#222;
    }


    .current-list li {
        display: block;
        padding-bottom:15px;
        margin-bottom:15px;
        border-bottom:1px #dcdcdc dotted
    }
    .current-list li:last-child {
        border-bottom:0px;
        padding-bottom:0px;
        margin-bottom:0px;
    }
    .cur-text {
        font-size: 16px;
        color:#222;
        font-weight: 500;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom:10px
    }
    .cur-info {
        display: block;
        margin-right:0px;
        padding-right:0px;
        font-size: 14px;
        color:#555;
        background: none;
    }
    .cur-info:last-child {
        background-image: none;
        margin-right:0;
        padding-right:0;
    }


    .guideline-titarea {
        border-bottom:1px #ddd solid;
        padding-bottom:15px;
        margin-bottom:10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .guideline-titarea h3 {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        display: inline-block;
        text-align: left;   
        height: 28px;
        line-height: 28px; 
    }
    .situation-guidelist li {
        display: inline-block;
        margin:0 5px;
        text-align: center;
    }
    .situation-guidelist li img {
        width: 60px;
        margin-top:5px
    }
    .situation-guidelist li p {
        padding-top:10px
    }
    .around-tit {
        background: #eee url('../images/sub/situation_info1.png') no-repeat 90% 50%;
        font-size: 22px;
        color:#222;
        font-weight: 600;
        padding:25px;
        border-bottom:1px #e8e8e8 dashed
    }
    .safe-tit {
        background: #e5f0fb url('../images/sub/situation_info2.png') no-repeat 90% 50%;
        font-size: 22px;
        color:#326ea9;
        font-weight: 600;
        padding:25px;
        border-bottom:1px #dbe7f0 dashed
    
    }
    /* 기상정보 */
    .pollen-pconcentarea {
        width: 50%;
    }
    .pollen-list li {
        display: inline-block;
        padding: 20px 10px;
        text-align: center;
    }
    .pollen-list li span{
        display: block;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        overflow: hidden;
    }

    /* 어린이놀이시설안전관리 */
    .link-boxarea.bg-children {
        background: url('../images/sub/children-img.png') no-repeat 100% 100%;
        background-size: 350px;
        height: 285px;

    }
    /* 시민안전보험 */
    .link-boxarea.bg-insurance {
        background: url('../images/sub/insurance-img.png') no-repeat 100% 100%;
        background-size: 350px;
        height: 280px;
    }
    /* 국민안전교육플랫폼 */
    .link-boxarea.bg-platform {
        background: url('../images/sub/platform-img.png') no-repeat 100% 100%;
        height: 270px;
        background-size: 400px;
    }
    /* Q&A */
    .link-boxarea.bg-qna {
        background: url('../images/sub/qna-img.png') no-repeat 100% 100%;
        background-size: 330px;
        height: 280px;
    }
    /*자연재해통계지도 */
    .link-boxarea.bg-statistmap {
        background: url('../images/sub/statistmap-img.png') no-repeat 100% 100%;
        background-size: 400px;
        height: 305px;
    }


}
@media all and (max-width:1024px) { 
#translate_popup{top:50px !important;left:50% !important;width: 90%;min-width:auto !important;position:absolute;transform:translate(-50%, 0%);}
#translate_popup .pop-conts.scroll{height:auto !important;margin:0px !important}
#translate_popup .pop-titlearea{padding: 3px 15px !important}
#translate_popup .pop-btnarea{padding: 13px 5px 0 5px !important}
    /* 재난현황 */
    .situation-leftarea {
        width: 100%;
        margin-right:0%;
    }
    .textmessage-content {
        margin-top:2%;
    }
    .situation-maparea {
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        width: 100%;
        height: 660px;
        text-align: center;
        overflow: hidden;
        margin-top:2%
    }
    .situation-infoarea {
        width: 100%;
        flex-wrap: wrap;
    }
    .guideline-left {
        width: 100%;
        display: inline-block;
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding:30px;
        margin-right:0%;
        margin-bottom:2%;
        height: 250px;
    }
    .situation-guidelist li {
        display: inline-block;
        margin:0 10px;
        width: 16%;
    }
    .situation-guidelist li:first-child {
        margin-left:0;
    }
    .situation-guidelist li:last-child {
        margin-right:0;
    }
    .situation-guidelist li img {
        padding-bottom: 5px;
    }
    .situation-guidelist li span {
        display: block;
        margin-bottom:5px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        color:#222;
        font-weight: 600;
        background-color: #e2e2e2;
        border-radius: 50px;
        padding:0 10px;
        text-align: center;
        text-transform: uppercase;
    }
    .situation-guidelist li p {
        font-size: 16px;
        color:#222;
        font-weight: 500;
        text-align: center;
        white-space: pre;
    }
    .around-facilities {
        width: 100%;
    }

    .situation-catearea{
        width: 100%;
        padding:30px 0 50px 0;
        background: #eaf3fb url('../images/sub/situation-bg.png') no-repeat right bottom;
    }
    .slider1 {
        width: 100%;
        max-width: 100%;
        height: 128px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 90%;
        height: 128px;
        overflow: hidden;
        text-align: center;
    }
    .situation-cate li {
        display: inline-block;
        border:1px #c7cddc solid;
        background-color: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin:20px 6px 20px 6px;
        width: 80px;
        height: 80px;
        border-radius: 20px;
        transition: 0.3s;
        font-size: 18px;
        color:#36435e;
        font-weight: 500;
    }
    .situation-cate li:first-child {
        margin-left:15px;
    }
    .situation-cate li:last-child {
        margin-right:15px
    }
    .current-content {
        height: 310px;
        box-sizing: border-box;
        padding:30px;
    }

    /* base table - 가로스크롤 있는 테이블*/
    .bsTable {
        width: 100%;
        overflow-x: scroll;
        padding-bottom:5px;
    }
    .bsTable::-webkit-scrollbar {
        height: 8px;
        
    }
    .bsTable::-webkit-scrollbar-thumb {
        background-color: #dedede;
        border-radius: 50px;
    }
    .bsTable::-webkit-scrollbar-track {
        
        background-color: #f6f6f6;
        border:1px #dedede solid;
        border-radius: 50px;
    }
    .bsTable table {
        width: 1300px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .bsTable table thead tr th {
        border-top:1px #ddd solid;
        border-bottom:1px #ddd solid;
        border-right:1px #ddd solid;
        background-color:#f9f9f9;
        font-size: 16px;
        font-weight: 700;
        color:#222;
        text-align: center;
        padding:10px 0;
    }

    .bsTable table tbody tr th,
    .bsTable table tbody tr td {
        font-size: 15px;
        padding:10px;
        text-align: center;
        border-bottom:1px #ddd solid;
        background-color: #fff;
    }
    .bsTable table tbody tr th {
        font-weight: 600;
    }
    .bsTable table tbody tr td.tb-bd {
        border-right:1px #ddd solid;
    }




    /* base table - 가로스크롤 없는 테이블*/

    .bsTable1 table {
        width: 100%;
    }
    .bsTable1 table thead tr th {
        border-top:1px #ddd solid;
        border-bottom:1px #ddd solid;
        border-right:1px #ddd solid;
        background-color:#f9f9f9;
        font-size: 16px;
        font-weight: 700;
        color:#222;
        text-align: center;
        padding:10px 0;
    }

    .bsTable1 table tbody tr th,
    .bsTable1 table tbody tr td {
        font-size: 15px;
        padding:10px;
        text-align: center;
        border-bottom:1px #ddd solid;
        background-color: #fff;
    }
    .bsTable1 table tbody tr th {
        font-weight: 600;
    }
    
    /* 빠른메뉴서비스 설정 */
 	.quick-list1 {
        display: flex;
    }
    .quick-list1 li {
        width: 20%;
        text-align: center;
    }
    .quick-list1 li a {
        font-size: 18px;
        color:#222;
        font-weight: 600;
        white-space: pre;
    }


}

@media all and (max-width:969px) {

    /* 재난현황 카테고리 */
    .situation-catearea{
        width: 100%;
        padding:10px 0 30px 0;
        background: #eaf3fb url('../images/sub/situation-bg.png') no-repeat right bottom;
    }
    .slider1 {
        width: 100%;
        max-width: 100%;
        height:260px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 90%;
        height: 260px;
        overflow: hidden;
        text-align: center;
    }
    .situation-cate li {
        display: inline-block;
        border:1px #c7cddc solid;
        background-color: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin:20px 6px 20px 6px;
        width: 80px;
        height: 80px;
        border-radius: 20px;
        transition: 0.3s;
        font-size: 18px;
        color:#36435e;
        font-weight: 500;
    }

    .situation-cate li:first-child {
        margin-left:15px;
    }
    .situation-cate li:last-child {
        margin-right:15px
    }

    /* 웹접근성 */
    .webaccess-box {
        background: #f5f5f5 url('../images/sub/webaccess-bg.png') no-repeat 100% 100%;
        background-size: 350px;
        border-radius: 20px;
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        padding:35px 400px 35px 35px
    }

    /* 로봇이 아닙니다. */
    .robot-area {
        background: #f4f4f4;
        padding:15px;
        font-size: 14px;
        color:#666;
        border-radius: 5px;
        margin-top:10px;
        width: 100%;
    }

    .robot-area .robot-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
    }
    .robot-area .robot-list li{
        margin:0 15px 0 0 !important;
        display: inline-block;
        height:18px !important;
        line-height:18px !important;
        vertical-align: middle !important;
        padding:0 0 5px 0;
        font-weight: 600; 
    }
  
}


@media all and (max-width:870px) {

/* 민방위 > 관련사이트 */
     .board-linksite {
        width:100%; 
    }
    .board-linksite ul {
        width:100%;
        border-top:2px #222 solid;
        border-bottom:0px #eee solid;
        display: flex;
        flex-wrap: wrap;
        padding:0px 0;
    } 

    .board-linksite li {
        padding:30px 0 30px 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-bottom:1px #eee solid;
    }

    .comment-imgarea1 {
        background: #ebebeb url('../images/temp/chart-img001.png') no-repeat 50% 100%;
        background-size: 330px;
        border-radius: 20px;
        box-sizing: border-box;
        padding:20px;
        font-size: 18px;
        font-weight: 500;
        height: 253px;
    }
    .comment-imgarea2 {
        background: #ebebeb url('../images/temp/chart-img002.png') no-repeat 50% 100%;
        background-size: 330px;
        border-radius: 20px;
        box-sizing: border-box;
        padding:20px;
        font-size: 18px;
        font-weight: 500;
        height: 253px;
    }
    .comment-imgareatext {
        display: block;
        font-size: 14px;
        color:#666;
        margin-top:10px
    }

    /* 국민신문고 */
    .link-boxarea.bg-people {
        background: url('../images/sub/people-img.png') no-repeat 100% 100%;
        height: 270px;
        background-size: 380px;
    }
    /* 생활안전지도 */
    .link-boxarea.bg-livingmap {
        background: url('../images/sub/living-img.png') no-repeat 100% 100%;
        height: 300px;     
        background-size: 340px;   
    }
    /* 통합검색 상세검색 영역 */
    .search-toparea {
        background-color: #f8f8f8;
        border-radius: 20px;
        padding:30px 40px 20px 40px;
    }

    .search-toplist li{
        display:flex;
        flex-wrap:wrap;
        padding-bottom:10px;
        position: relative;
        line-height:2;   
    }
    .search-toplist li .tit {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        width: 100%;
        padding-right:0px;
        display:block;
    }
    .search-toplist li .search-field {
        display:flex;
        flex-wrap:wrap;
        vertical-align: top;
        width:100%;
    }
     .search-field .input-group {
        width:100%;
    }
    .search-field select, .search-field input {
        display: block;
        border:1px #acacac solid;
        border-radius: 5px;
        height:38px;
        line-height:38px;
        padding: 0 10px;
        font-size:16px;
        color:#666;
    }
    .search-field .dropdown-section {
        display: block;
        width:100%;
    }
    .search-field input {
        height:40px;
        line-height:40px;
    }
    
    .baseTable table thead tr th {
	   font-size: 15px;
	   padding:7px 0;
	}

	.baseTable table tbody tr th,
	.baseTable table tbody tr td {
	    font-size: 15px;
	    padding:7px;
	}
	
	/* 자치단체 */
	.local-govermtit {
	    display: flex;
	    justify-content: space-between;   
	
	}
	.local-govermtit a {
	    min-width:170px;
	    background: #222 url('../images/sub/btn-linkicon.png') no-repeat 90% 50%;
	    background-size:13px;
	    color:#fff;
	    font-size: 15px;
	    font-weight: 600;
	    border-radius: 80px;
	    padding:8px 35px 6px 20px;
	}

	.loc-govermentlist li {
	    width: 19.2%;
	}
	.loc-govermentlist li:hover {
	    border:1px #b1cae0 solid;
	    box-shadow: 5px 0 7px rgba(0, 0, 0, 0.08);
	}
	.loc-govermentlist li a {
	    background: url('../images/sub/goverm-dot.png') no-repeat 0 8px;
	    padding-left:10px;
	    font-weight: 500;
	    cursor: pointer;
	}
	.loc-govermentlist li:hover a {
	    background: url('../images/sub/goverm-dot1.png') no-repeat 0 8px;
	    padding-left:10px;
	    font-weight: 500;
	    color:#1764c4;
	    cursor: pointer;  
	}
	
	
	.quickmenulist-settingarea h3 {
        font-size:30px;
        width:100%;
        text-align: center;
        padding-bottom:20px;
    }
    /* 빠른메뉴서비스 */
    .setting-cate01 {
        padding:30px 20px 10px 20px;
        border-radius:30px;
    }
    .title01 {
        font-size: 26px;
    }
    .title02 {
        font-size: 26px;
    }
    .title03 {
        font-size: 26px;
    }
    .title04 {
        font-size: 26px;
    }
    .quick-list1 {
        display: flex;
        flex-wrap: wrap;
        justify-content:start;
        width:100%;
    }
    .quick-list1 li {
        width: 33%;
        text-align: center;
        box-sizing:border-box;
        margin-bottom:20px;
    }
    .quick-list1 li a {
        font-size: 18px;
        color:#222;
        font-weight: 600;
        line-height: 1.2;
        white-space:normal;
    }

    .quick-list1 li span {
        display:block;
        font-size: 0;
        width: 84px;
        height: 84px;
        padding-top:15px;
        text-align:center;
        border-radius: 50%;
        margin:0 auto 10px auto;
        transition: 0.3s;
    }


}




/* mobile area */
@media all and (max-width:780px) {
    
    .gallery-list ul {
        width:100%;
        border-bottom:1px #eee solid;
        padding:20px 0; 
        display: flex;
        flex-wrap: wrap;
        justify-content : space-between;
        gap: 20px 0
    }
    .gallery-list ul:last-child {
        border-bottom:1px #d5d5d5 solid;
    }
    .gallery-list ul li{
        box-sizing: border-box;   
        width: calc(50% - 20px); 
    }
    .gallery-info {
        padding-top:8px;
    }
    .gallery-info a {
        font-size: 15px;
        color:#222;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    /* .footer-leftarea {border:1px green solid}
    .footer-rightarea {border:1px blue solid} */

    .board-list {
        width:100%;
        margin-top:10px;  
        overflow-x:auto; 
    }
    .board-list table {
        width:100%;
        border-top:2px #222 solid;
        
    }
    .board-list table.min_w450 {
    	min-width:450px;
    }
    .board-list table thead th{
        font-size:16px;
        color:#222;
        text-align: center;
        font-weight: 600;
        padding:10px 0;
        border-bottom:1px #ddd solid;
        background-color: #f9f9f9;    
    }
    .board-list table tbody td {
        border-bottom: 1px solid #EAEEEF; 
        color: #666;
        background-color: #fff;
        text-align: center;
        padding:12px;
        font-size: 15px;
        line-height: 1.4;
    }
    .board-list table tbody td span {
        display: inline-block;
        width: 30px;
        height: 30px;
        padding-top:4px;
        border-radius: 50%;    
        background-color: #e8eaef;
    }
    .board-list table tbody td.tit {
        text-align:left;
        color:#000;
        font-weight: 600;
    }
    .board-list table tbody td.tit a{
        text-align:left;
        color:#000;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .board-list table tbody td.tit:hover {
        text-decoration: underline;
    }
    .board-list table tbody td.tal {
        text-align: left;
    }
    .board-list table tbody td label {
        font-size: 0;
    }

    .pagination {
        display: flex; 
        flex-wrap: wrap;
        align-items: center; 
        justify-content: center; 
        margin-top: 30px; 
        color:#666;
        font-size: 14px;
    }
    .pagination a,
    .pagination button {
        width: 30px; 
        height: 30px; 
        text-align:center; 
        border-style: solid; 
        border-width: 1px; 
        border-color: transparent; 
        line-height: 0.8; 
        text-decoration: none; 
        cursor: pointer;
        border-radius: 50%; 
        letter-spacing:normal; 
        transition:all 0.1s ease-in;
    }
    .pagination > a:hover, .pagination > button:hover {
        border-color: #1764c4; 
        background-color: #1764c4; 
        color: #fff;
    }
    .pagination a + a,
    .pagination button + button {
        margin-left: 1px;
    }
    .pagination .btn-page-start {
        background: no-repeat center center / 13px; 
        background-image: url("../images/sub/first.png");
        border:0px
    }
    .pagination .btn-page-prev {
        background: no-repeat center center / 8px; 
        background-image: url("../images/sub/pre.png");
        border:0px
    }
    .pagination .btn-page-next {
        background: no-repeat center center / 8px; 
        background-image: url("../images/sub/next.png");
        border:0px
    }
    .pagination .btn-page-end {
        background: no-repeat center center / 13px; 
        background-image: url("../images/sub/end.png");
        border:0px
    }
    .pagination .btn-page-start:hover {
        background: no-repeat center center / 13px; 
        background-image: url("../images/sub/first.png");
        border:0px
    }
    .pagination .btn-page-prev:hover {
        background: no-repeat center center / 8px; 
        background-image: url("../images/sub/pre.png");
        border:0px
    }
    .pagination .btn-page-next:hover {
        background: no-repeat center center / 8px; 
        background-image: url("../images/sub/next.png");
        border:0px
    }
    .pagination .btn-page-end:hover {
        background: no-repeat center center / 13px; 
        background-image: url("../images/sub/end.png");
        border:0px
    }
    .pagination .nav {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        margin: auto 0px
    }
    
    .pagination .nav > a:hover, .pagination .nav > button:hover {
        border-color: #1764c4; 
        background-color: #1764c4; 
        color: #fff;
    }
    .pagination .nav > a.active, .pagination .nav > button.active {
        border-color: #1764c4; 
        background-color: #1764c4; 
        color: #fff; 
        font-weight: bold
    }
    .pagination .nav > a.active:hover, .pagination .nav > button.active:hover {
        border-color: #1764c4; 
        background-color: #1764c4; 
        color: #fff;
    }

    .form-field .datepicker-area .input-group {
    	margin:0;
    	padding:0;
    	width:48%;
    	box-sizing:border-box;
    }
    .form-field .datepicker-area .gutter {
    	width:4%;
    	box-sizing:border-box;
    	text-align:center
    }
    .input-group input {
        cursor: pointer;
        font-size:16px;
        font-family: 'PretendardOGV', sans-serif;
        color:#555;
        width:100%;
        background-color: #fff;
    }
    /* .radio svg {
        position: absolute; 
        top: 25%; left: 4px;
         width: 10px; 
         height: 10px; 
         margin-top: -5px; 
         pointer-events: none;
        } */

    .board-total {
        flex-wrap: wrap;
    }

    /* board-view */
    
    .board-view {
        width:100%; 
    }
    .board-view ul {
        width:100%;
        border-top:2px #222 solid;
        
    }
    .board-view .title {
        font-size:18px;
        color:#222;
        font-weight: 600;
        padding:25px 0 0 0 ;
    }
    .view-info {
        font-size: 14px;
    }
    .view-info div {
        display: inline-block;
        padding-right:25px;
    }
    .view-info div span {
        color:#222
    }
    .add-filearea {
        padding:25px  0;
        display: flex;
        flex-wrap: wrap;
        border:0px;
    }

    .add-filelist a {
        display: block;
        padding:5px 0px 5px 23px;
        font-size: 14px;
        width:100%;
    }
    /* 문서 확장자별 아이콘 */
    .icon-hwp {
        background-size: 18px auto;
    }
    .icon-pdf {
        background-size: 18px auto;
    }
    .icon-xlx {
        background-size: 18px auto;
    }
    .icon-ppt {
        background-size: 18px auto;
    }
    .icon-word {
        background-size: 18px auto;
    }
    .icon-zip {
        background-size: 18px auto;
    }
    /* 문서 확장자별 아이콘 */
    .notice-datailarea {
        padding:25px 0;
        border-top:1px #ddd solid;
        border-bottom:1px #ddd solid;
    }
    .pre-list {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    } 
    .pre-list a{
        font-size: 14px;
        color:#666;
    } 
    .pre-list a:hover {
        color:#222;
        text-decoration: underline;
    } 
    .pre-list span {
        display: inline-block;
        color:#888;
        background: url('../images/sub/pre-list.png') no-repeat 100% 18px;
        padding-right:15px;
        margin-right:15px;
    } 
    .pre-list a span:hover {
        color:#0056aa;
        background: url('../images/sub/pre-list1.png') no-repeat 100% 18px;
    }  
    .next-list {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }  
    .next-list a{
        font-size: 14px;
        color:#666;
    }  
    .next-list a:hover{
        color:#222;
        text-decoration: underline;
    }  
    .next-list span {
        display: inline-block;
        color:#666;
        background: url('../images/sub/next-list.png') no-repeat 100% 18px;
        padding-right:15px;
        margin-right:15px;
    }
    .next-list a span:hover {
        color:#0056aa;
        background: url('../images/sub/next-list1.png') no-repeat 100% 18px;
    }   

	.page-titarea {
		width:100%;
		flex-wrap:wrap;
		height:100%;
	}
    .page-title {
        font-size: 22px;
        color:#222;
        font-weight: 800;
        width:100%;
        margin:20px 0 10px
    }
    .page-title.mb10 {
    	margin-bottom:5px;
    }
    .essen-area {
    	width:100%;
    }
    .page-titarea .essen-area {
        font-size: 16px;
        color:#666;
        font-weight: 500;
        display: inline-block;
    }
    .page-stitle {
        background: url('../images/sub/p-tit.png') no-repeat 0 4px;
        padding-left:17px;
        font-size: 18px;
        font-weight: 700;
        color:#222;
        margin-top:10px
    }
    .comm-list {
        padding:10px 0 10px 7px;
        margin-top:0
    }
    .comm-list li {
        background: url('../images/sub/p-stit.png') no-repeat 0 8px;
        padding-left:10px;
        font-size: 16px;
        font-weight: 500;
        color:#222;
        padding-bottom:15px;
        line-height: 1.4
    }
    .comm-list li .bold {
        font-weight: 800;
    }
    .comm-list li .s-list {color:#666;font-size: 16px;}
    .comm-slist {
        padding:5px 0 10px 0;
    }
    .comm-slist li {
        background: url('../images/sub/p-slist.png') no-repeat 0 10px;
        font-size: 14px;
        color:#666;
        padding:0px 0 0px 10px
    }

    .degree-area {
        border:1px #ececec solid;
        background-color: #fafafa;
        margin-bottom:10px;
        padding:15px;
        text-align: right;
        border-radius: 10px;
    }

    .degree-area label {
        font-size: 15px;
        color:#666;
        padding-left:5px;
        font-weight: 500;
    }
    .comm-text {
        font-size: 14px;
        color:#666;
        line-height: 1.5;
    }
    .page-comm {
        border-radius: 10px;
        background-color: #f5f5f5;
        padding:20px 20px 10px 20px
    }
    .page-commlist li {
        font-size: 14px;
        background: url('../images/sub/comm-dot.png') no-repeat 0 7px;
        padding-left:10px;
        color:#666;
        padding-bottom:10px;
        
    }
    .page-commlist li span {
        color: #000;
    }
    .page-commbtn {
        margin-top:15px;
        color:#0056aa;
        font-weight: 500;
        font-size: 14px;
    }
    .pop-block {
        padding:5px 30px 5px 20px;
        border-radius: 50px;
        color:#fff;
        background: #0056aa url('../images/sub/btn-pop-arrow.png') no-repeat 92% 50%;
        margin-left:10px;
        font-size: 14px;
    }

    
    /* 소관부서 */
    .department-charge {
        background:#f8f9fb;
        border:1px #ddd solid;
        border-radius:10px;
        padding:15px;    
        display: flex;
        margin-top:20px
    }
    .d-name {
        font-weight: 600;
        font-size: 16px;
        color:#222;
        background:url('../images/sub/depart.png') no-repeat 0 3px;
        background-size: 22px;
        padding-left:30px;
        line-height: 1.6;
    }
    .d-list {
        padding-left:20px;
        font-size: 16px;
        color:#666;
        line-height: 1.6;
    }

    /* 재난현황 */
    .situation-guidelist li {
        display: inline-block;
        margin:0 10px;
        width: 17%;
    }
    .situation-guidelist li:first-child {
        margin-left:0;
    }
    .situation-guidelist li:last-child {
        margin-right:0;
    }
    .situation-guidelist li img {
        padding-bottom: 5px;
    }
    .situation-guidelist li span {
        display: block;
        margin-bottom:5px;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color:#222;
        font-weight: 600;
        background-color: #e2e2e2;
        border-radius: 50px;
        padding:0 10px;
        text-align: center;
        text-transform: uppercase;
    }
    .situation-guidelist li p {
        font-size: 13px;
        color:#222;
        font-weight: 500;
        text-align: center;
        white-space: pre;
    }

    /* 재난현황 카테고리 */
    .situation-catearea{
        width: 100%;
        padding:0px 0 30px 0;
        background: #eaf3fb url('../images/sub/situation-bg.png') no-repeat right bottom;
    }
    .slider1 {
        width: 100%;
        max-width: 100%;
        height:220px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 85%;
        height: 220px;
        overflow: hidden;
        text-align: center;
    }
    .situation-cate li {
        display: inline-block;
        border:1px #c7cddc solid;
        background-color: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin:0px 6px 40px 6px;
        width: 75px;
        height: 75px;
        border-radius: 20px;
        transition: 0.3s;
        font-size: 18px;
        color:#36435e;
        font-weight: 500;
    }
    .situation-cateinner .situ-btn {
        background-color: #fff;
        border:1px #c7ccd6 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        width: 36px !important;
        height: 36px !important;
        text-align: center;
        line-height: 36px;
        border-radius: 50%;
        transition: 0.3s;
    }
    .situation-cate li span {
        font-size: 16px;
    }
    .situation-cate li:first-child {
        margin-left:6px;
    }
    .situation-cate li:last-child {
        margin-right:6px
    }
    


    /* 기상정보 - 내지역 날씨정보 */

    .weather-detailbox p{
        padding-top:5px;
        width: 100%;
    }
    .weather-boxtitle {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .weather-boxtitle p {
        width: 100%;
    }
    .disaster-weatherinfoarea {
        width: 100%;
        border-radius: 20px;
        background-color: #eaf3fb;
        padding:20px;
    }
    .dis-weathertitarea {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .dis-weathertitarea h2 {
        font-size: 27px;
        font-weight: 600;
        color:#222;
    }
    .weather-setting {
        text-align: right;
        padding-top:7px
    }
    .weather-setting li {
        display: inline-block;
        font-size: 18px;
        color:#222;
        font-weight: 500;
    }
    .weather-setting li img {
        vertical-align: middle;
    }
    .weather-setting li:first-child {
        background: url('../images/sub/setting-bar.png') no-repeat 100% 50%;
        padding-right:10px;
        margin-right:7px;
    }

    .disaster-winfoarea {
        padding-top:10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .disas-weatherinfo {
        padding-bottom:10px;
        padding-left:0px;
        border-bottom:1px #c7c7c7 dashed
    }
    .disas-weatherinfo span {
        display: inline-block;
        font-size: 20px;
        font-weight: 500;
        color:#222;
        padding:0 10px;
    }
    .disas-weatherinfo span img{
        width: 50px;
    }
    .disas-weatherinfo .d-temp {
        font-size: 42px;
        font-weight: 600;
        color:#222
    }

    .dis-winfoleft {
        width: 100%;
        margin-right:0%;
        margin-bottom:3%;
        background-color: #fff;
        border:1px #d3e4f3 solid;
        border-radius: 10px;
        padding:20px;
        box-sizing: border-box;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        position: relative;
    }
    .dis-winfoleft .today {
        background-color: #f0f5fa;
        height: 30px;
        line-height: 30px;
        border-radius: 50px;
        padding:0 15px;
        font-size: 16px;
        font-weight: 600;
        color:#1764c4;
        position: absolute;
        top:40px;
        right:20px;
    }
    .dis-winforight {
        width: 100%;
        background-color: #fff;
        border:1px #d3e4f3 solid;
        border-radius: 10px;
        padding:15px 30px;
        box-sizing: border-box;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        position: relative;
    }
    .dis-winforight .tomorrow {
        background-color: #ededed;
        height: 30px;
        line-height: 30px;
        border-radius: 50px;
        padding:0 15px;
        font-size: 16px;
        font-weight: 600;
        color:#666;
        position: absolute;
        top:40px;
        right:20px;
    }

    .weather-list {
        text-align: center;
        padding-top:15px
    }
    .weather-list li {
        display: inline-block;
        padding:5px 15px;
        font-size: 16px;
        font-weight: 500;
        color:#666
    }
    .weather-list li span {
        display: inline-block;
        padding-left:5px;
        color:#222
    }
    .weather-list li span.fdust-type1 {
        color:#1764c4
    }

    .weather-list li span.fdust-type2 {
        color:#1f8f51
    }
    .disas-weatherinfo01 {
        padding:5px 0 15px 0px;
        margin-bottom:10px;
        border-bottom:1px #c7c7c7 dashed;
        font-size: 0;
    }
    .disas-weatherinfo01 span {
        display: inline-block;
        font-size: 24px;
        font-weight: 500;
        color:#222;
        padding:0 10px;
        vertical-align: middle;
    }
    .disas-weatherinfo01 span img {
        width: 50px;

    }
    .disas-weatherinfo01 span.d-prec {
        display: inline-block;
        font-size: 18px;
       padding: 0 0 0 10px;
       font-weight: 500; 
    }

    .temperature-list {
        display: flex;
        padding-top:10px;
        justify-content: center;
    }
    .temperature-list li {
        display: flex;
    }
    .temperature-list li:first-child {
        padding-right:30px;
    }
    .temperature-list li:last-child {
        padding-left:30px;
    }
    .temperature-list li span {
        display: inline-block;
        text-align: center;
        border-radius: 50px;
        padding:0px 15px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        font-weight: 500;
        margin:6px 10px 6px 0;
    }

    .temperature-list li.low p {
        display: inline-block;
        color:#1764c4;
        font-weight: 600;
        font-size: 30px;
        height: 20px;
    }
    .temperature-list li.high p {
        display: inline-block;
        color:#d61313;
        font-weight: 600;
        font-size: 30px;
    }
    .bsTable1 {
        width: 100%;
    }
    /* 식중독 지수 */
    .food-poisarea {
        background: #eaf3fb url('../images/sub/icon-foodpois.png') no-repeat 90% 50%;
        background-size: 97px;
        border:1px #d3e4f3 solid;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        border-radius:20px;
        padding:20px 30px 30px 30px;
        box-sizing: border-box;
        width: 100%;
    }
    .food-poisarea h3{
        font-size: 40px;
        font-weight: 600;
        color:#222;
        padding-bottom:0px;
        height: 40px;
    }
    .food-poisarea p {
        font-size: 15px;
        color:#666;
        font-weight: 500;
        padding-bottom:10px;
    }
    
    .food-poisarea button {
        background: #1764c4 url('../images/sub/go-guide1.png') no-repeat 93% 50%;
        border:1px #1764c4 solid;
        font-size: 14px;
        color:#fff;
        font-weight: 500;
        padding:5px 35px 5px 10px;
        border-radius: 50px;
        transition: 0.3s;
    }

    /* 꽃가루농도 */
    .pollen-pconcentarea {
        width: 100%;
        text-align: center;
    }
    .pollen-pconcentarea.w50p {
    width:100%}
    .pollen-list {
        display: flex;
        width:100%;
        justify-content: center;

    }
    .pollen-list li {
        padding: 30px 20px 10px 20px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    .pollen-list li span{
        display: block;
        width: 90px;
        height: 90px;
        margin-bottom:5px;
        border-radius: 50%;
        overflow: hidden;
    }
    .bsTable table {
        width: 900px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .bsTable table thead tr th {
        border-top:1px #ddd solid;
        border-bottom:1px #ddd solid;
        border-right:1px #ddd solid;
        background-color:#f9f9f9;
        font-size: 15px;
        font-weight: 700;
        color:#222;
        text-align: center;
        padding:8px 0;
    }

    .bsTable table tbody tr th,
    .bsTable table tbody tr td {
        font-size: 14px;
        padding:8px;
        text-align: center;
        border-bottom:1px #ddd solid;
        background-color: #fff;
    }
    .bsTable table tbody tr th {
        font-weight: 600;
    }
    .bsTable table tbody tr td.tb-bd {
        border-right:1px #ddd solid;
    }

    /* base table - 가로스크롤 없는 테이블*/

    .bsTable1 table {
        width: 100%;
    }
    .bsTable1 table thead tr th {
        border-top:1px #ddd solid;
        border-bottom:1px #ddd solid;
        border-right:1px #ddd solid;
        background-color:#f9f9f9;
        font-size: 15px;
        font-weight: 700;
        color:#222;
        text-align: center;
        padding:8px 0;
    }

    .bsTable1 table tbody tr th,
    .bsTable1 table tbody tr td {
        font-size: 14px;
        padding:8px;
        text-align: center;
        border-bottom:1px #ddd solid;
        background-color: #fff;
    }
    .bsTable1 table tbody tr th {
        font-weight: 600;
    }
    .bsTable tbody tr td span.ball {
        display: block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        margin:3px auto;
    }

    /* 복구진도 등록 - 로그인 */
    .login-left {
        background: #1764c4 url('../images/sub/login-bg.png') no-repeat 50% 50%;
        background-size: 200px;
        width:100%;
        height: 250px;
        padding:0;
    }
    .login-right {
        width: 100%;
        padding:30px 60px 40px 60px;
        text-align: center;
    }

    /* 재난대비안전점검 */
    .btn-down {
        height: 42px;
        line-height: 42px;
        background: #1764c4 url('../images/sub/btn-down1.png') no-repeat 93% 50%;
        border-radius: 80px;
        color:#fff;
        font-weight: 500;
        font-size: 16px;
        padding: 0 50px 0 30px;
        margin-top:15px;
        transition: 0.3s;
    }
    .btn-down:hover {
        height: 42px;
        line-height: 42px;
        background: #074898 url('../images/sub/btn-down1.png') no-repeat 93% 60%;
        border-radius: 80px;
        color:#fff;
        font-weight: 500;
        font-size: 16px;
        padding: 0 50px 0 20px;
        margin-top:15px
    }
    .comm-text01 {
        font-size: 16px;
        color:#222;
        line-height: 1.5;
    }
    .check-listarea {
        width: 100%;
        background-color: #f8f8f8;
        border:1px #f0f0f0 solid;
        padding:20px;
        border-radius: 20px;

    }
    .check-list li {
        display: inline-block;
        padding:15px
    }
    .check-list li label {
        font-size: 16px;
        font-weight: 500;
    }
    .check-list li label span{
        margin-right:3px
    }
    .btn-golist {
        height: 42px;
        line-height: 42px;
        background: #222 url('../images/sub/btn-arrow1.png') no-repeat 93% 50%;
        border-radius: 80px;
        color:#fff;
        font-weight: 500;
        font-size: 16px;
        padding: 0 50px 0 30px;
        margin-top:15px;
        transition: 0.3s;
    }
    .btn-golist:hover {
        height: 42px;
        line-height: 42px;
        background: #222 url('../images/sub/btn-arrow1.png') no-repeat 95% 50%;
        border-radius: 80px;
        color:#fff;
        font-weight: 500;
        font-size: 16px;
        padding: 0 50px 0 30px;
        margin-top:15px
    }

    /* 웹접근성 */
    .webaccess-box {
        background: #f5f5f5 url('../images/sub/webaccess-bg.png') no-repeat 100% 100%;
        background-size: 300px;
        border-radius: 20px;
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        padding:35px 40px 35px 35px
    }
    .webaccess-box h3 {
        font-size: 30px;
        color:#222;
        font-weight: 700;
        margin-bottom:10px;
    }
    
    .webaccess-box p {
        font-size: 16px;
        color:#666;
        padding-bottom:80px
    }

    .web-accesslist {
        background-color: #f8f8f8;
        border:1px #f0f0f0 solid;
        border-radius: 10px;
        padding:20px;
        margin-bottom:5px;
        display:block;
        text-align: center;
    }
    .web-accesslist span {
        display: block;
        background-color: #1764c4;
        width: 60px;
        height: 60px;
        line-height: 40px;
        text-align: center;
        border-radius: 50%;
        margin:0 auto 5px auto;
    }
    .web-text h4 {
        color:#1764c4;
        font-size: 18px;
        font-weight: 600;
        padding-bottom:5px;
        width: 100%;
    }
    .web-textlist  {
        width: 100%;
        margin-top:10px;
    }
    .web-textlist li {
        background: url('../images/sub/p-slist1.png') no-repeat 0 13px;
        padding: 2px 0px 10px 0px;
        font-size: 15px;
        line-height: 1.3;
    }
    

    /* 민방위 */
    .civil-boxarea {
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        background: #f5f5f5 url('../images/temp/civil-img.png') no-repeat 100% 100%;
        background-size: 160px;
        padding:30px 180px 30px 30px; 
    }

    .civil-boxarea h3 {
        font-size: 28px;
        font-weight: 600;
        color:#222;
        padding-bottom:10px;
    }
    .civil-boxarea p {
        font-size: 16px;
        color:#555;
        white-space:normal;
        line-height: 1.4;
    }

    .downloard-list {
        width: 100%;
        display: flex;
    }

    /* 복구진도등록 */
    .business-volumelist {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .business-volumelist li {
        display: inline-block;
        width: 100%;
        padding:5px 0
    }
    .business-volumelist li input {
        width: 50px;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
    }
    .b-titlist {
        display: inline-block;
        width: 40%;    
        font-size: 15px;
        font-weight: 600;
    }
    .b-unit {
        display: inline-block;
        padding-left:5px;
        font-size: 15px;
    }

    /* 법령정보 */
    .statute-box {
        background: #f5f5f5 url('../images/sub/row-img.png') no-repeat 100% 90%;
        background-size: 200px;
        border-radius: 20px;
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        padding:35px 50px 80px 35px
    }
    .statute-box h3 {
        font-size: 30px;
        color:#222;
        font-weight: 600;
        margin-bottom:20px;
    }

    .statute-box p {
        font-size: 16px;
        color:#666;
    }
    .statute-box p span {
        font-weight: 600;
    }
    .btn-statute {
        background: #222 url('../images/sub/btn-linkicon.png') no-repeat 92% 50%;
        font-size: 18px;
        color:#fff;
        font-weight: 600;
        padding:10px 60px 10px 30px;
        border-radius: 80px;
        transition: 0.3s;
    }

    .btn-statute:hover {
        background: #222 url('../images/sub/btn-linkicon.png') no-repeat 92% 50%;
        font-size: 18px;
        color:#fff;
        font-weight: 600;
        padding:10px 60px 10px 30px;
        border-radius: 80px;
        box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.12);
    } 

    /* Q&A */
    .qna-boxarea {
        background:#f1f5f9 url('../images/temp/qna-img2.png') no-repeat 50% 100%;
        background-size: 415px;
        border:1px #dbe4ec solid;
        box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        width: 100%;
        height: 100%;
        margin-top:20px;
        padding:20px 20px 300px 20px
    }
    .qna-boxarea h4 {
        padding-top:20px;
        color:#495e71;
        font-size: 24px;
        font-weight: 600;
        padding-bottom:10px;
        width: 100%;
    }
    .qna-boxarea p {
        color:#4a5d6d;
        font-size: 14px;
        font-weight: 500;
        width: 100%;
    }

    /* 풍수해지진재해보험 */
    .comm-box-text p {
        font-size: 18px;
        text-align: center;
    }
    .insurance-iconlist {
        gap:10px;
        justify-content: center;
    }
    .insurance-iconlist li span img {
        width: 60px;
    }
    .insurance-iconlist li p {
        font-size: 15px;
    }
    .insurance-chart h4 {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        padding:25px;
    }
    .insur-chart01 {
        width: 100%; 
        padding:0 30px;
        box-sizing: border-box;       
    }
    .insur-chart01 span{
        border:2px #1764c4 solid;
        box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        padding:20px;
        text-align: center;
        color:#0c52a9;
        font-size: 17px;
        width: 33%;
        font-weight: 600;
    }
    .insur-chart02 {
        margin-top:50px;
        background: url('../images/temp/chart-arrow1.png') no-repeat 50% 100%;
        padding-bottom:85px
    }
    .insur-chart02 .chart-tit {
        background-color: #1b3e72;
        padding:10px 30px;
        border-radius: 80px;
        font-size: 17px;
        color:#fff;
        font-weight: 600;
        text-align: center;
    }
    .insur-chart03 ul{
        width: calc(100% - 60px);
        box-sizing: border-box;
    }
    .insur-chart03 li {
        font-size: 16px;
        color:#fff;
        padding-bottom:10px;
        padding-left:30px
    }
    .insur-chart03 li.num1 {
        background: url('../images/temp/num1.png') no-repeat 0 0;
    }
    .insur-chart03 li.num2 {
        background: url('../images/temp/num2.png') no-repeat 0 0;
    }
    .chart-comm {
        font-size: 15px;
        color:#666;
        padding:10px 20px 20px 0px;
        text-align: left;
        width: calc(100% - 60px);
        box-sizing: border-box;
        margin:0px auto;
    }

    
    .linksite-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap:10px
    }
    .linksite-list li {
        width: 49%;
        padding:10px 20px 10px 10px;
        font-size: 16px;
        background: #fff url('../images/sub/l-link.png') no-repeat 95% 50%;
        background-size: 13px;
    }
    .linksite-list li a {
        color:#555
    }
    .linksite-list li:hover {
        border:1px #dedede solid;
        background: #f6f6f6 url('../images/sub/l-link.png') no-repeat 95% 50%;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
        background-size: 13px;
    }


    /* 풍수해지진 보험 */
    .comment-justify {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .comment-justify .comment-leftarea {
        width: 100%;
    }
    .comment-justify .comment-rightarea {
        width: 100%;
    }
    .comment-imgarea1 {
        background: #ebebeb url('../images/temp/chart-img001.png') no-repeat 50% 100%;
        background-size: 330px;
        border-radius: 20px;
        box-sizing: border-box;
        padding:20px;
        font-size: 18px;
        font-weight: 500;
        height: 253px;
    }
    .comment-imgarea2 {
        background: #ebebeb url('../images/temp/chart-img002.png') no-repeat 50% 100%;
        background-size: 330px;
        border-radius: 20px;
        box-sizing: border-box;
        padding:20px;
        font-size: 18px;
        font-weight: 500;
        height: 253px;
    }
    .comment-imgareatext {
        display: block;
        font-size: 14px;
        color:#666;
        padding-bottom:20px;
        margin-top:10px
    }

    
    /* 교육훈련 > 민방위 > 교육자료 */
    /* .curriculum-area {
        background-color: #f1f1f1;
        border-top:1px #b1b1b1 solid;
        border-bottom:1px #ddd dashed;
        padding:15px;
        display: flex;
        height: 65px;
        justify-content: space-between;
    } */
    .curriculum-area h3 {
        font-size: 18px;
        line-height: 1.8;
    }
    .curriculum-buttonlist {
        padding:5px 0
    }
    .curriculum-buttonlist a {
        background: #fff url('../images/sub/btn-down3.png') no-repeat 93% 50%;
        border:1px #ddd solid;
        border-radius: 5px;
        font-size: 15px;
        font-weight: 500;
        padding:6px 35px 6px 15px;
        margin-left:10px;
        color:#666;
    }
    .curriculum-buttonlist a:hover {
        background-color: #f7f7f7;
        border:1px #979797 solid;
        color:#222
    }
    .tb-downlist {
        padding:20px 15px 15px 15px;
        border-bottom:1px #ddd solid;
        display: flex;
        flex-wrap: wrap;
    }
    .tb-downlist li {
        width: 48%;
        padding-bottom:10px;
        background: url('../images/sub/dot.png') no-repeat 0 8px;
        padding-left:10px;
    }
    .tb-downlist li a {
        color:#666;
        font-size: 16px;
    }
    .tb-downlist li a:hover {
        text-decoration: underline;
        color:#222
    }

    .recognition-area {
        margin:10px 0 30px 0
    }
    .recognition-list {
        display: flex;
        flex-wrap: wrap;
    }

    .recognition-list li h3 {
        text-align: center;
        color:#fff;
        font-size: 16px;
        font-weight: 600;
        background-color: #1764c4;    
        padding:7px 20px;
        border-bottom:1px #d4e4f8 solid;
        border-radius: 80px;

    }
    .recognition-list li.w20 {
        width: 100%;
        border-bottom:1px #ddd solid
        /* border:1px #1764c4 solid; 
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.12);*/
        

    }
    .recognition-list li.w30 {
        width: 100%;
        border-bottom:1px #ddd solid

    }
    .recognition-list li.w40 {
        width: 100%;
        border-bottom:1px #ddd solid
    }
    .recognition-list li.recog-arrow {
        background: url('../images/sub/step-arrow1.png') no-repeat 50% 50%;
        width: 100%;
        height: 40px;
        font-size: 0;
    }
    .recognit-slist {
        padding:20px;
        width: 100%;
        box-sizing: border-box;
        /* border:3px #1764c4 solid;
        border-top:0px; */
    }
    .recognit-slist li {
        font-size: 16px;
        font-weight: 500;
        color:#666;
        padding-bottom:10px;
        background: url('../images/sub/comm-dot.png') no-repeat 0 8px;
        padding-left:10px
    }


    /* 어린이 교육관리 */
    .link-boxarea {
        margin:50px 0;
    }
    .link-boxarea.bg-childeducation {
        background: url('../images/sub/education-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:450px;
        height: 100%;
    }
    .link-boxarea button {margin-bottom:30px}
    .link-boxarea h4 {
        font-size: 30px;
        color:#222;
        font-weight: 700;
        padding-bottom:10px;
    }
    .link-boxarea p {
        white-space: normal;
        font-size: 16px;
        color:#666;
        line-height: 1.3;
        padding-bottom:0px;
    }

    /* 국민신문고 */
    .link-boxarea.bg-people {
        background: url('../images/sub/people-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:450px;
        height: 100%;
    }
    /* 생활안전지도 */
    .link-boxarea.bg-livingmap {
        background: url('../images/sub/living-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:450px;
        height: 100%;   
    }
    /* 어린이놀이시설안전관리 */
    .link-boxarea.bg-children {
        background: url('../images/sub/children-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:530px;
        height: 100%;   
    }
    /* 시민안전보험 */
    .link-boxarea.bg-insurance {
        background: url('../images/sub/insurance-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:500px;
        height: 100%;   
    }

    /* 국민안전교육플랫폼 */
    .link-boxarea.bg-platform {
        background: url('../images/sub/platform-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:470px;
        height: 100%;   
    }
    /* Q&A */
    .link-boxarea.bg-qna {
        background: url('../images/sub/qna-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:500px;
        height: 100%;   
    }
    /*자연재해통계지도 */
    .link-boxarea.bg-statistmap {
        background: url('../images/sub/statistmap-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:500px;
        height: 100%;  
    }
    
    /* 통합검색 */
    /* search-form */
    .tot-searcharea {
        margin-top:60px;
        flex-wrap: wrap;
    }
    .tot-search {
        width: 80%;
    }
    .search-check {
        width: 80%;
    }
    .search-check.ml20 {
        margin-left:0
    }
    .search-check.mt20 {
        margin-top:10px
    }
    /* search-form */

    /* search-tab */
    .tot-searchtab {
        display: flex;
        flex-wrap: wrap;
        justify-content:left;
        padding:40px 0 0px 0;
        width: 100%;
        gap:3px
    }
    .tot-searchtab li {
        border:1px #ddd solid;
        background-color: #fff;
        border-right:1px #ddd solid;
        text-align: center;
        font-size: 18px;
        color:#666;
        font-weight: 500;
        padding:12px;
        width: 20%;
        transition: 0.3s;
        border-radius:5px;
    }
    .tot-searchtab li:last-child {
        border-right:1px #ddd solid;
    }
    .tot-searchtab li.active {
        border:1px #222 solid;
        background-color: #222;
        border-right:1px #222 solid;
        text-align: center;
        font-size: 18px;
        color:#fff;
        font-weight: 500;
        padding:12px;
    }
    .tot-searchtab li:hover {
        border:1px #222 solid;
        background-color: #222;
        border-right:1px #222 solid;
        text-align: center;
        font-size: 18px;
        color:#fff;
        font-weight: 500;
        padding:12px;
    }
    .tot-searchtab li:hover:last-child {
        border-right:1px #222 solid;
    }
    /* search-tab */

    /* 검색결과 갯수 */
    .tot-resultarea {
        width: 100%;    
    }
    .tot-resultarea h3 {
        font-size: 28px;
        color:#000;
        font-weight: 300;
        width: 100%;
        text-align: center;
        padding:70px 0 50px 0;
    }
    /* 검색결과 갯수 */

    /* 실시간 검색어 */
    .realtime-searcharea {
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: #fbfbfb;
        padding:40px 20px;
        border-bottom:1px #ddd dashed;
    }
    .realtime-searcharea h3 {
        font-size: 18px;
        font-weight: 500;
        padding-right:20px;
    }
    .real-list li {
        display: inline-block;
    }
    .real-list li a{
        font-size: 16px;
        background-color: #fff;
        border:1px #ddd solid;
        padding:5px 10px 3px 10px;
        border-radius: 50px;
        font-size: 16px;
        transition: 0.3s;
        color:#666
    }
    .real-list li:hover a{
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        border:1px #bbb solid;
        color:#222
    }
    

    /* 실시간 검색어 */
    .search-category {    
        padding-bottom:7px;
        display: flex;
        justify-content: space-between;
    }
    .cateTitle {
        font-size: 20px;
        font-weight: 500;
        color:#666
    }
    .cateTitle span {
        color:#1764c4
    }
    .search-category .tot-resultmore {
        font-size: 15px;
        font-weight: 500;
        padding-top:5px;
        color:#666;
        padding-right:20px;
        background: url('../images/sub/search-catearr1.png') no-repeat 100% 50%;
        transition: 0.2s;
    }
    .search-category .tot-resultmore:hover {
        font-size: 15px;
        font-weight: 500;
        color:#222;
        background: url('../images/sub/search-catearr1.png') no-repeat 101% 50%;
        
    }
    .tot-resultlist {
        border-top:2px #000 solid;
        padding:10px 0;
        border-bottom:1px #dfdfdf solid;
    }

    .tot-resultlist li {
        border-bottom:1px #ddd dotted;
        margin-bottom:10px;
        padding:10px 0 0px 0 ;
    }
    .tot-resultlist li:last-child {
        padding-bottom:0;
        border-bottom:0px
    }
    .tot-resultcate {
        font-size: 24px;
        color:#222;
        font-weight: 600;
        padding-bottom:20px;
        display: flex;
        justify-content: space-between;
    }
    .tot-resultcate a:hover {
        text-decoration: underline;
    }

    .tot-resultcate span {
        color:#0770d7
    }
    .tot-resTitle {
        font-size: 20px;
        color:#222;
        font-weight: 600;
        padding-bottom:20px;
    }
    .search-home {
        font-size: 0;
        background: url('../images/sub/search-home.png') no-repeat 0 0;
        width: 17px;
        height: 17px;
        vertical-align: top;
        margin:5px 10px 0 0;
    }
    .tot-resTitle span {
        display: inline-block;
        padding: 0 10px;
        color:#b8b8b8;
        font-weight: 400;
    }
    .tot-resText {
        font-size: 16px;
        color:#666;
        line-height: 1.4;
        padding-bottom:20px
    }

    .tot-detail {
        padding:10px 0 0 0 ;    
    }
    .tot-detail li {
        border-bottom:1px #e2e2e2 dashed;
        padding:20px 0
    }
    .tot-detail li h3 {
        font-size: 24px;
        color: #222;
        font-weight: 600;
        margin-bottom:20px;
    }
    .tot-cate1 {
        font-size: 20px;
        color:#222;
        font-weight: 500;
    }

    .tot-cate1 span {
        display: inline-block;
        padding: 0 10px;
        color:#b8b8b8;
        font-weight: 400;
    }

    .tot-detailTitle {
        font-size: 18px;
        color:#222;
        font-weight: 500;
        padding-bottom:20px;
    }
    .tot-resTitle .tot-date {
        display: block;
        background-color: transparent;
        color:#6786ac;
        font-size: 15px;
        border-radius: 80px;
        margin-left:0px;
        padding:0;
        font-weight: 600;
        margin-top:5px;
    }
    .tot-detailText {
        font-size: 15px;
        color:#666;
        line-height: 1.5;
        padding-top:10px
    }
    .search-word {
        color:#1764c4;
        font-weight: 600;
        background-color: #e9eef7;
        padding:1px 3px;
        border-radius: 3px;
    }
    
    
    /* 게시판 목록 css변경 */
	.brd-listarea {
	    width: 100%;
	    border-top:2px #222 solid;    
	}
	.brd-list li {
	    padding:25px 0;
	    width: 100%;
	    box-sizing: border-box;    
	    border-bottom:1px #eee solid;    
	}
	.brd-list li:hover {
	    background-color: #f3f5f9;
	}
	.brd-list li .brd-num {
		width:100%;
		padding-bottom:5px;
		text-align:left;
		display:block;
	}
	.brd-list li .brd-context {
		width:100%;
		display:inline-block;	
	}
	.brd-list li .brd-context h3 {
		font-size:16px;
	}
	.brd-infolist{
		width:100%;
		padding-top:10px;
	}
	.brd-infolist p {
		display:inline-block;
		font-size:15px;
		color:#666;
		border-bottom:0px;
		padding-right:20px;
	}
	.brd-infolist p span{
		color:#222;
		font-weight:500;
	}
	.brd-infolist p img {width:14px;}
	
	/* 빠른메뉴서비스 설정 */
	.quickmenulist-settingarea {
	    width:100%;
        padding:0 3%;
	    margin:40px auto;
	    display: flex;
	    flex-wrap: wrap;
	}
	
	/* 개인정보처리방침 */
	.priv-link {
		margin-top:20px;
	}
	.priv-link li {
	    box-sizing: border-box;
	    padding: 15px 30px 15px 15px;
	    border: 1px #dfdfdf solid;
	    font-size: 16px;
	    font-weight: 600;
	    border-radius: 10px;
	    margin-bottom:10px;
	    color: #555;
	    background: #fff url(../images/sub/l-link.png) no-repeat 96% 20px;
	    transition: 0.3s;
	}
	.priv-link li a{
		display:block
	}
	.priv-link li:hover {
		background:#f9f9f9 url(../images/sub/l-link.png) no-repeat 96% 20px;;
		box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
	}
	
	
	.privacy-list {
		margin-top:20px;
	}
	.privacy-list li {
	    box-sizing: border-box;
	    padding: 15px 30px 15px 15px;
	    border: 1px #dfdfdf solid;
	    font-size: 16px;
	    font-weight: 600;
	    border-radius: 10px;
	    margin-bottom:10px;
	    color: #555;
	    background:#fff;
	    transition: 0.3s;
	}
	.privacy-list li a{
		display:block
	}
	.privacy-list li:hover {
		background:#f9f9f9;
		box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
	}
	
	.privacy-btn {
	    padding:7px 12px;
	    font-size: 14px;
	    color:#666;
	    font-weight: 500;
	    border:1px #ddd solid;
	    border-radius:5px;
	    transition:0.3s
	}
	.privacy-btn:hover {
	    border:1px #bbb solid;
	    color:#555;
	    border-radius:5px;
	    margin-top:3px;
	    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
	}
	.btn-pdown {
	    height: 30px;
	    line-height: 30px;
	    background: #fff url('../images/sub/btn-down.png') no-repeat 95% 8px;
	    background-size:10px;
	    border-radius: 10px;
	    color:#666;
	    font-weight: 500;
	    font-size: 14px;
	    padding: 0 30px 0 10px;
	    margin-top:2px;
	    transition: 0.3s;
	}
	.btn-pdown:hover {
	    background: #fff url('../images/sub/btn-down.png') no-repeat 95% 10px;
	    background-size:10px;
	    color:#222;
	}
	
	.priv-dot {
		background: url('../images/sub/btn-arr.png') no-repeat 0 4px;
		background-size:6px;
		padding-left:13px;
	}
	.baseTable.mt10 {
		margin-bottom:20px
	}
	/* 개인정보처리방침 */
	.priv-list {
		padding-left:0px;
	}
	.priv-list li{
		font-size:16px;
		padding-bottom:10px;
		color:#222;
	}
	.priv-list li:last-child {
		padding-bottom:0;
	}
	.priv-slist {
		padding:0px 0 0px 0px;
	}
	.priv-slist li{
		font-size:14px;
		color:#222;
		padding:3px 0 10px 3px
	}
	.priv-slist li:last-child {
		padding-bottom:0;
	}
	.priv-text {
	    border-radius: 20px;
	    background-color: #f5f5f5;
	    padding:20px 20px 15px 20px;
	    font-size:16px;
	    line-height:1.4;
	}
	.priv-stext {
		border-top:1px #ddd solid;
		border-bottom:1px #ddd dashed;
	    padding:10px 10px 8px 10px;
	    font-size:14px;
	}
	.page-stitle.mt40 {
		margin-top:20px
	}
	.page-title.mt40 {
		margin-top:20px
	}
	.page-scomment {
		border:1px #eee solid;
		background:#fff;
		border-radius:5px;
		padding:10px 10px 10px 10px;
		color:#555;
		font-weight:500;
		font-size:14px;
		margin:5px 0 10px 0;
	}
	.page-scomment p {
		color:#888;
		padding-top:5px;
		font-size:13px;
	}
	.page-scomment ul li{
		background:none;
		padding-bottom:10px;
		font-size:14px;
	}
	.page-scomment ul li:last-child {
		padding-bottom:0
	}

}

@media all and (max-width:730px) {
	.security-number-form {display: flex; flex-direction: column; gap: 10px;}
	.step-reg-from .info-address .info-formarea .btn-address {width: 75px;}
	.step-reg-from .info-address .info-formarea input:last-of-type {width: 73%;}
}
@media all and (max-width:700px) {section.map-nav{top:-57px !important} }
@media all and (max-width:640px) {
    .ctimpop{margin-top:0px !important;margin-left:0px !important;top:100px !important;transform: translate(-50%, 0%);min-width:auto;width:90%; z-index:1000;}
    .tab-area {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        width:100%;
        gap: 0px;
    }
    .tab-area .tab-list {
        background: #fff;     
        border:1px #ccc solid;
        color:#555;
        font-size: 16px;
        font-weight: 500;
        padding: 10px 0;
        cursor: pointer;
        z-index: 1;
        margin-left: 0px;
        flex-grow:0;
        flex-shrink: 1;
        flex-basis: 100%;
        text-align: center;
        border-radius: 5px ;
        margin-bottom:5px;
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.1);
    
    }
    .tab-area .tab-list:first-of-type {
        margin-left: 0;
        border-radius: 5px ;
    }
    .tab-area .tab-list:last-of-type {
        border-radius: 5px;
        margin-bottom:12px;
    }
    .tab-content {
        width: 100%;
        margin-top: -1px;
        padding: 0;
        -webkit-order: 1;
        order: 1;
    }
   /* .tab-area input[type=radio], .tab-content {
        display: none;
    }*/
    .tab-area input[type=radio]:checked + label {
        background: #1764c4;
        border:1px #1764c4 solid;
        color:#fff;
    }
    .tab-area input[type=radio]:checked + label + .tab-content {
        display: block;
    }

    /* 재난현황 */
    .situation-guidelist li {
        display: inline-block;
        margin:0 10px;
        width: 17%;
    }
    .situation-guidelist li:first-child {
        margin-left:0;
    }
    .situation-guidelist li:last-child {
        margin-right:0;
    }
    .situation-guidelist li img {
        padding-bottom: 5px;
    }
    .situation-guidelist li span {
        display: block;
        margin-bottom:5px;
        height: 24px;
        line-height: 24px;
        font-size: 13px;
        color:#222;
        font-weight: 600;
        background-color: #e2e2e2;
        border-radius: 50px;
        padding:0 10px;
        text-align: center;
        text-transform: uppercase;
    }
    .situation-guidelist li p {
        font-size: 13px;
        color:#222;
        font-weight: 500;
        text-align: center;
        white-space: pre;
    }

    .current-content {
        height: 300px;
        box-sizing: border-box;
        padding:30px;
    }
    .cur-text {
        font-size: 15px;
    }
    .current-listarea {
        overflow-y: scroll;
        height: 120px;
        padding-right:20px
    }
    
    /* 기상정보 */
    .pollen-list li {
        padding: 30px 15px 10px 15px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    .pollen-list li span{
        display: block;
        width: 75px;
        height: 75px;
        margin-bottom:5px;
        border-radius: 50%;
        overflow: hidden;
    }
    .bsTable table {
        width: 800px;
        border-collapse: separate;
        border-spacing: 0;
    }
    .web-linklist li {
        display: inline-block;
        background-color: #fff;
        border:1px #c8c8c8 solid;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
        border-radius: 50px;
        height: 100%;
        line-height: 1.4;
        padding:5px 20px;
        font-size: 16px;
        font-weight: 600;
        color:#222;
        text-align: center;
        margin-right:5px;
        margin-bottom:10px
    }

    /* 민방위 */
    .civil-listarea {
        width: 100%;
        padding-top:40px;
    }
    .civil-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .civil-list li {
        width: 80%;
        margin-right:0%;
        margin-bottom:3%;
        padding-right:0%;
        text-align: center;
        border-bottom:2px #d9d9d9 dashed;
        background: none;
    }
    .civil-list li:last-child {
        margin-right:0;
        padding-right:0;
        background: none;
        border-bottom:0
    }
    .civil-list li h4 {
        display: inline-block;
        background-color: #1764c4;
        color:#fff;
        font-size: 16px;
        font-weight: 600;
        padding:10px 25px;
        border-radius: 50px;
        text-align: center;
        margin-bottom:20px
    }
    .civil-list li p {
        font-size: 15px;
        color:#555;
        line-height: 1.3;
        padding-bottom:10px
    }

    .civil-list1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .civil-list1 li {
        width: 80%;
        margin-right:0%;
        padding-right:0%;
        margin-bottom:3%;
        text-align: center;
        border-bottom:2px #d9d9d9 dashed;
        background: none;
    }
    .civil-list1 li:last-child {
        margin-right:0;
        margin-bottom:0;
        padding-right:0;
        background: none;
        border-bottom:0
    }
    .civil-list1 li h4 {
        display: inline-block;
        background-color: #1764c4;
        color:#fff;
        font-size: 18px;
        font-weight: 600;
        padding:10px 25px;
        border-radius: 50px;
        text-align: center;
        margin-bottom:20px
    }
    .civil-list1 li p {
        font-size: 16px;
        color:#555;
        line-height: 1.3;
        padding-bottom:10px
    }

    .downloard-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
    }
    .downloard-list li {
        width: 48%;
        box-sizing: border-box;
        padding:15px 30px 15px 15px;
        border:1px #dfdfdf solid;
        margin-right:2%;
        margin-bottom:2%;
        font-size: 16px;
        font-weight: 600;
        border-radius: 10px;
        color:#666;
        background: #fff url('../images/temp/btn-down2.png') no-repeat 93% 18px;
        transition: 0.3s;
    }
    .downloard-list li a {
        color:#666
    }
    .downloard-list li:hover {
        border:1px #222 solid;
        background: #222 url('../images/temp/btn-down02.png') no-repeat 93% 20px;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
    }
    .downloard-list li:hover a {
        color:#fff
    }
    .downloard-list li:last-child {
        margin-right:0
    }
    .downloard-list li:nth-child(2) {
        margin-right:0
    }

    /* 입력폼 TABLE */
    .bbs-view {
        width: 100%;
        border-top:2px #222 solid;
        border-bottom:0px #ddd solid;
        padding:0px;        
    }
    .bbs-view li {
        display: flex;
        flex-wrap: wrap;
        align-items:center;
        padding:20px 0 25px 0;
        border-bottom:1px #ddd solid
        /* border-bottom:1px #ccc solid */
    }

    .info-titarea {
        font-size: 16px;
        font-weight: 600;
        color:#222;
        width: 100%;
    }
    .info-titarea1 {
        font-size: 16px;
        font-weight: 600;
        color:#222;
        width: 100%;
    }
    .info-titarea.w20p, .info-titarea1.w20p {
    	width:100%;}
    	
    .info-titarea1.lh {
        font-size: 16px;
        font-weight: 600;
        color:#222;
        padding-top:4px
    }
    .info-formarea {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding-top:5px;        
    }
    .info-formarea1 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .info-formarea.w80p, .info-formarea1.w80p {
    	width:100%
    }
    .info-formarea input, .info-formarea select .info-formarea button{
        height:40px;
        border-radius: 5px;
        margin-bottom:5px;
    }
    .form-radioarea {
        padding-top:10px;
    }
    .form-radioarea1 {
        padding-top:10px;
    }
    .info-formarea.ta-c {
        justify-content: center;
    }
    .info-address .info-formarea input {
        width:77%;
        margin-bottom:5px;
        font-size: 14px;
        color:#666
    }
    .info-address .info-formarea input:last-of-type {
        width:77%;
        margin-bottom:0px
    }
    .info-address .info-formarea .btn-address {
        height: 40px;
        width:20%;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
    }
    .info-address .info-formarea .btn-address:hover {
        background-color: #054788;
        border: 1px #054788 solid;
    }

    .robot-area .robot-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        
    }
    .robot-area .robot-list li{
        margin:0 15px 0 0 !important;
        display: inline-block;
        height:18px !important;
        line-height:18px !important;
        vertical-align: middle !important;
        padding:0 0 5px 0;
        font-weight: 600; border-bottom:0px
    }

    .slide-comment {
        position: absolute;width: 100%;font-size: 16px;
        bottom:0;
        left:0;
        color:#fff;
        text-align: left;
        padding:10px;
        background-color: rgba(0, 0, 0, 0.65);
        border-radius: 0 0 10px 10px;
    }
    .slide-comment h3{
        font-size: 15px;
        font-weight: 600;
        padding-bottom:0cm
    }
    .slide-comment p {
        padding-top:7px;
        font-size: 12px;
        font-weight: 400;
    }

    /* 풍수해지진재해보험 */
    .comm-box-text p {
        font-size: 17px;
        text-align: center;
    }
    .insurance-iconlist {
        gap:10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .insurance-iconlist li p {
        font-size: 15px;
    }
    .insurance-chart h4 {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        padding:25px;
    }
    .insur-chart01 {
        width: 100%; 
        padding:0 20px;
        box-sizing: border-box;  
        flex-wrap: wrap;     
        gap: 5px;
    }
    .insur-chart01 span{
        border:2px #1764c4 solid;
        box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        padding:10px;
        text-align: center;
        color:#0c52a9;
        font-size: 17px;
        width: 100%;
        font-weight: 600;
    }
    .insur-chart02 {
        margin-top:30px;
        background: url('../images/temp/chart-arrow1.png') no-repeat 50% 100%;
        padding-bottom:85px
    }
    .insur-chart02 .chart-tit {
        background-color: #1b3e72;
        padding:10px 30px;
        border-radius: 80px;
        font-size: 16px;
        color:#fff;
        font-weight: 600;
        text-align: center;
    }
    .insur-chart03 ul{
        width: calc(100% - 40px);
        box-sizing: border-box;
    }
    .insur-chart03 li {
        font-size: 16px;
        color:#fff;
        padding-bottom:10px;
        padding-left:25px
    }
    .insur-chart03 li.num1 {
        background: url('../images/temp/num1.png') no-repeat 0 0;
        background-size: 17px;
    }
    .insur-chart03 li.num2 {
        background: url('../images/temp/num2.png') no-repeat 0 0;
        background-size: 17px;
    }
    .chart-comm {
        font-size: 14px;
        color:#666;
        padding:10px 20px 20px 0px;
        text-align: left;
        width: calc(100% - 60px);
        box-sizing: border-box;
        margin:0px auto;
    }

    /* 풍수해 기본 table */
    .baseTable {
        width: 100%;
        padding-bottom:5px;
        overflow-x: scroll;
    }
    .baseTable table {
        width: 700px;
     }
    .baseTable::-webkit-scrollbar {
        height: 8px;
        
    }
    .baseTable::-webkit-scrollbar-thumb {
        background-color: #dedede;
        border-radius: 50px;
    }
    .baseTable::-webkit-scrollbar-track {
        
        background-color: #f6f6f6;
        border:1px #dedede solid;
        border-radius: 50px;
    }
    .link-boxarea button {
    	margin-bottom:30px
    }
    .insurance-list {
        border-bottom:1px #ddd dotted;
        padding-bottom:5px;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .insurance-list ul {
        width: 100%;
        margin-top:20px
    }
    /* 자치단체 */
    .loc-govermentlist li {
	    width: 24.2%;
	}

}
@media all and (max-width:600px) {
    .linksite-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap:0px
    }
    .linksite-list li {
        width: 100%;
        padding:10px 20px 10px 10px;
        font-size: 15px;
        margin-bottom:3px;
        background: #fff url('../images/sub/l-link.png') no-repeat 97% 50%;
        background-size: 13px;
    }
    .linksite-list li a {
        color:#555
    }
    .linksite-list li:hover {
        border:1px #dedede solid;
        background: #f6f6f6 url('../images/sub/l-link.png') no-repeat 97% 50%;
        box-shadow: 3px 0 5px rgba(0, 0, 0, 0.12);
        background-size: 13px;
    }


    /* 교육훈련 > 민방위 > 교육자료 */
   .curriculum-area {
        background-color: #f1f1f1;
        border-top:1px #b1b1b1 solid;
        border-bottom:1px #ddd dashed;
        padding:15px;
        display: flex;
        flex-wrap: wrap;
        height: 155px;
        justify-content: space-between;
    } 
    .curriculum-area h3 {
        font-size: 18px;
        line-height: 1.8;
        width: 100%;
    }
    .curriculum-buttonlist {
        padding:5px 0;
        width: 100%;
    }
    .curriculum-buttonlist a {
        background: #fff url('../images/sub/btn-down3.png') no-repeat 93% 50%;
        border:1px #ddd solid;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 500;
        padding:6px 30px 6px 10px;
       margin:10px 5px 0 0;
        color:#666;
    }
    .curriculum-buttonlist a:hover {
        background-color: #f7f7f7;
        border:1px #979797 solid;
        color:#222
    }
    .tb-downlist {
        padding:20px 15px 15px 15px;
        border-bottom:1px #ddd solid;
        display: flex;
        flex-wrap: wrap;
    }
    .tb-downlist li {
        width: 100%;
        padding-bottom:10px;
        background: url('../images/sub/dot.png') no-repeat 0 8px;
        padding-left:10px;
    }
    .tb-downlist li a {
        color:#666;
        font-size: 15px;
    }
    .tb-downlist li a:hover {
        text-decoration: underline;
        color:#222
    }
    .btn-rightarea {width:auto !important;}

}


@media all and (max-width:540px) {
	.security-number-info input::placeholder{font-size:13px;}
    /* 게시판 상단 검색영역 */
    #eduSch .dropdown-selected{width:100% !important}
    #eduSch .tit{text-align:left !important}
    #eduSch .edu01{display:block}
    .btn-rightarea{width:100%}
    .board-toparea {
        border-radius: 15px;
        padding:15px;
    }
    .board-toplist li{
        display: flex;
        flex-wrap:wrap;
        padding-bottom:5px;
        position: relative;
        line-height:2;
        padding:0;
        margin:0 0 10px;
    }
    .board-toplist li:last-child {
    	margin-bottom:0;
    }
    .board-toplist li .form-field.safety-sh01 {
    	margin-bottom:10px;
    }
    .board-toplist li .tit {
        width:100%;
        font-size: 16px;
        color:#222;
        font-weight: 600;
        flex-basis: 150px;
        padding-right:0px;
        vertical-align:top;
        height:25px;
        margin-bottom:5px;
    }
    .form-field {
        display: flex;
        flex-wrap:wrap;
        vertical-align: top;
        width:100%;
        margin:0;
        padding:0;
    }
    .form-field .datepicker-area {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        z-index: 0;
    }
   	.form-field .dropdown-section {
        display:block;
        font-size:14px;
        flex-basis: 48%;
        margin:0 0 3px 0;
    }
    .dropdown-section .dropdown-button {
    	min-width:100%;
    	width:48%
    }

    .board-toplist li select {
        margin:0;  
        width:100%; 
        margin-bottom:8px;
    }
    .board-toplist li select:last-child {
    	margin-bottom:0;
    }
    .board-toplist li input {
    	margin:0 0 0 1%;  
        width:48%; 
        margin-bottom:5px;
    }
    .datepicker-area .input-group input {
    	width:98%;
    }   
    
    
    /* 소관부서 */
    .department-charge {
        border-radius:10px;
        padding:15px;    
        display: flex;
        flex-wrap: wrap;
    }
    .d-name {
        font-weight: 600;
        font-size: 14px;
        color:#222;
        width:100%;
        padding-bottom:5px;
    }
    .d-list {
        padding-left:0px;
        font-size: 14px;
        color:#666;
        line-height: 1.6;
    }

    /* 재난현황 */
    
    .situation-titarea {
        padding-bottom:15px;
        margin-bottom:15px;
    }
    .situation-titarea h3 {
        font-size: 20px;
        color:#222;
        font-weight: 600;
        display: inline-block;
        text-align: left;   
        height: 28px;
        line-height: 28px; 
    }
    .situation-titarea .basetime {
        display: inline-block;
        padding:0px 6px;
        height: 22px;
        line-height: 23px;
        font-size: 11px;
    }
    .situation-titarea .basetext {
        font-size: 13px;
    }
    
    .situation-titarea .more {
        font-size: 14px;
        font-weight: 500;
        margin-top:2px;
        color:#666;
    }
    .situation-titarea .more:hover {
        color:#222;
    }

    /* 재난특보 타이틀 */
    .current-titarea {
        padding-bottom:15px;
        margin-bottom:15px;
    }
    .current-titarea h3 {
        font-size: 20px;
        color:#222;
        font-weight: 600;
        display: inline-block;
        text-align: left;   
        height: 28px;
        line-height: 28px;
        
    }
    .current-titarea .basetime {
        display: inline-block;
        padding:0px 6px;
        height: 22px;
        line-height: 23px;
        font-size: 11px;
    }
    .current-titarea .basetext {
        font-size: 13px;
    }
    
    .current-titarea .more {
        font-size: 14px;
        font-weight: 500;
        margin-top:2px;
        color:#666;
    }
    .current-titarea .more:hover {
        color:#222;
    }

    .guideline-titarea h3 {
        font-size: 20px;
    }
    .guideline-left {
        width: 100%;
        display: inline-block;
        border:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius: 20px;
        padding:30px;
        margin-right:0%;
        margin-bottom:2%;
        height: 390px;
    }
    .situation-guidelist {
        flex-wrap: wrap;
    }
    .situation-guidelist li {
        display: inline-block;
        margin:0 3% 2% 0;
        width: 28%;
    }
    .situation-guidelist li:first-child {
        margin-left:0;
    }
    .situation-guidelist li:last-child {
        margin-right:0;
    }
    .situation-guidelist li img {
        padding-bottom: 5px;
    }
    .situation-guidelist li span {
        display: block;
        margin-bottom:5px;
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        color:#222;
        font-weight: 600;
        background-color: #e2e2e2;
        border-radius: 50px;
        padding:0 10px;
        text-align: center;
        text-transform: uppercase;
    }
    .situation-guidelist li p {
        font-size: 14px;
        color:#222;
        font-weight: 500;
        text-align: center;
        white-space: pre;
    }
    .around-facilities {
        flex-wrap: wrap;
    }
    .around-faclist {
        border:1px #d0d0d0 solid;
        border-right:1px #d0d0d0 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        width: 100%;
        height: 150px;
        border-radius: 20px;
        overflow: hidden;
        margin-bottom:2%
    }
    .around-safelist {
        border:1px #bdcfe1 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        border-radius:20px ;
        width: 100%;
        height: 150px;
        overflow: hidden;
    }
    .around-tit {
        font-size: 20px;
        padding:15px 20px
    }
    .safe-tit {
        font-size: 20px;
        padding:15px 20px
    }
    .around-list {
        padding:15px 20px 0 20px
    }
    .around-list li {
        font-size: 16px;
        display: inline-block;
        color:#666;
        background: url('../images/sub/dot.png') no-repeat 0% 7px;
        padding-bottom:0px;
        padding-left:10px;
        margin-bottom:10px;
        border-bottom:0px #f0f0f0 solid;
        transition: 0.3s;
        margin-right:25px
    }
    .around-list li:hover {
        background: url('../images/sub/dot.png') no-repeat 0% 7px;
        color:#222;
        cursor: pointer;
        text-decoration: underline;
    }
    .around-list li:last-child {
        border-bottom:0;
    }
    .slider1 {
        width: 100%;
        max-width: 100%;
        height:200px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 85%;
        height: 200px;
        overflow: hidden;
        text-align: center;
        margin-top: 35px;
    }
    .situation-cate li {
        display: inline-block;
        border:1px #c7cddc solid;
        background-color: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin:0px 2px 10px 1px;
        width: 60px;
        height: 65px;
        border-radius: 10px;
        transition: 0.3s;
        font-size: 18px;
        color:#36435e;
        font-weight: 500;
    }
    .situation-cate li a img{max-width:80%}
    .situation-cateinner .situ-btn {
        background-color: #fff;
        border:1px #c7ccd6 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        width: 30px !important;
        height: 30px !important;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        transition: 0.3s;
    }
    .situation-cateinner .situ-btn img {
        width: 13px;
    }
    .situation-cate li span {
        font-size: 12px;margin-top:-15px
    }
    .situation-cate li:first-child {
        margin-left:5px;
    }
    .situation-cate li:last-child {
        margin-right:5px
    }
    .situation-catearea{padding-bottom:0px}

    /* 기상정보 - 내지역 날씨정보 */
    .disaster-weatherinfoarea {
        width: 100%;
        border-radius: 20px;
        background-color: #eaf3fb;
        padding:20px;
    }
    .dis-weathertitarea {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .dis-weathertitarea h2 {
        font-size: 26px;
        font-weight: 600;
        color:#222;
        width: 100%;
        text-align: center;

    }
    .weather-setting {
        text-align: center;
        padding-top:0px;
        width: 100%;
        height:1px
    }
    .weather-setting li {
        display: inline-block;
        font-size: 16px;
        color:#222;
        font-weight: 500;
    }
    .weather-setting li img {
        vertical-align: middle;
    }
    .weather-setting li:first-child {
        background: url('../images/sub/setting-bar.png') no-repeat 100% 50%;
        padding-right:20px;
        margin-right:20px;
    }

    .disaster-winfoarea {
        padding-top:10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .disas-weatherinfo {
        padding-bottom:10px;
        padding-left:0px;
        border-bottom:1px #c7c7c7 dashed;
        min-height:50px;
    }
    .disas-weatherinfo span {
        display: inline-block;
        font-size: 20px;
        font-weight: 500;
        color:#222;
        padding:0 5px;
    }
    .disas-weatherinfo span img{
        width: 55px;
    }
    .disas-weatherinfo .d-temp {
        font-size: 42px;
        font-weight: 600;
        color:#222
    }

    .dis-winfoleft {
        width: 100%;
        margin-right:0%;
        margin-bottom:20px;
        background-color: #fff;
        border:1px #d3e4f3 solid;
        border-radius: 10px;
        padding:70px 30px 20px 30px;
        box-sizing: border-box;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        position: relative;
        text-align: center;
    }
    .dis-winfoleft .today {
        background-color: #f0f5fa;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 50px;
        padding:0px;
        width: 110px;
        font-size: 18px;
        font-weight: 600;
        top:20px;
        left:50%;
        transform: translateX(-50%);
    }
    .dis-winforight {
        width: 100%;
        background-color: #fff;
        border:1px #d3e4f3 solid;
        border-radius: 10px;
        padding:60px 30px 20px 30px;
        box-sizing: border-box;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        position: relative;
        text-align: center;
    }
    .dis-winforight .tomorrow {
        background-color: #ededed;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 50px;
        padding:0px;
        width: 110px;
        font-size: 18px;
        font-weight: 600;
        color:#666;
        position: absolute;
        top:20px;
        left:50%;
        transform: translateX(-50%);
    }

    .weather-list {
        text-align: center;
        padding-top:10px
    }
    .weather-list li {
        display: inline-block;
        padding:5px 15px;
        font-size: 16px;
        font-weight: 500;
        color:#666
    }
    .weather-list li span {
        display: inline-block;
        padding-left:5px;
        color:#222
    }
    .weather-list li span.fdust-type1 {
        color:#1764c4
    }

    .weather-list li span.fdust-type2 {
        color:#1f8f51
    }
    .disas-weatherinfo01 {
        padding:5px 0 10px 0px;
        margin-bottom:10px;
        border-bottom:1px #c7c7c7 dashed;
        font-size: 0;
        min-height:50px;
    }
    .disas-weatherinfo01 span {
        display: inline-block;
        font-size: 22px;
        font-weight: 500;
        color:#222;
        padding-right:20px;
        vertical-align: middle;
    }
    .disas-weatherinfo01 span img {
        width: 46px;

    }
    .disas-weatherinfo01 span.d-prec {
        display: inline-block;
        font-size: 18px;
       padding: 0 0 0 10px;
       font-weight: 500; 
    }

    .temperature-list {
        display: flex;
        padding-top:10px;
        justify-content: center;
    }
    .temperature-list li {
        display: flex;
    }
    .temperature-list li:first-child {
        padding-right:20px;
    }
    .temperature-list li:last-child {
        padding-left:20px;
    }
    .temperature-list li span {
        display: inline-block;
        text-align: center;
        border-radius: 50px;
        padding:0px 15px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        font-weight: 500;
        margin:6px 10px 6px 0;
    }

    .temperature-list li.low p {
        display: inline-block;
        color:#1764c4;
        font-weight: 600;
        font-size: 26px;
        height: 20px;
    }
    .temperature-list li.high p {
        display: inline-block;
        color:#d61313;
        font-weight: 600;
        font-size: 26px;
    }
    .tb-legendlist li {
        display: inline-block;
        color:#666;
        font-size: 13px;
        font-weight: 500;
        margin-left:10px; 
    }
    .tb-legendlist li span {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right:3px
    }
    .bsTable table {
        width: 700px;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* 민방위 */
    .civil-boxarea {
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        background: #f5f5f5 url('../images/temp/civil-img.png') no-repeat 50% 100%;
        background-size: 150px;
        padding:30px 30px 150px 30px; 
    }
    .civil-boxarea h3,
    .civil-boxarea p {
        text-align: center;
    }
    .downloard-list li {
        width: 100%;
        margin-right:0;
        color:#666;
        background: #fff url('../images/temp/btn-down2.png') no-repeat 93% 18px;
        transition: 0.3s;
    }

    /* 민방위 > 관련사이트 */
     /* .board-linksite {
        width:100%; 
    }
    .board-linksite ul {
        width:100%;
        border-top:2px #222 solid;
        border-bottom:0px #eee solid;
        display: flex;
        flex-wrap: wrap;
        padding:0px 0;
    } 

    .board-linksite li {
        padding:30px 0 30px 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-bottom:1px #eee solid;
    } */
    .link-imgarea {
        padding:3px;
        border:1px #c8c8c8 solid;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.12);
        width:230px;
        text-align: center;
        margin:0px auto;
    }
    .link-imgarea img {
        width: 100%;
        max-width: 218px;
    }
    .link-textarea {
        width: 100%;
        padding-top:20px;
        text-align: center;
    }
    .link-textarea h3 {
        font-size: 18px;
        color:#222;
        font-weight: 600;
    }
    .link-textarea a {
        font-size: 16px;
        color:#666;
        font-weight:400;
    }
    .link-textarea a:hover {
        font-size: 16px;
        color:#222;
    }

    /* 웹접근성 */
    .webaccess-box {
        background: #f5f5f5 url('../images/sub/webaccess-bg.png') no-repeat 50% 100%;
        background-size: 250px;
        border-radius: 20px;
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        padding:20px;
        text-align: center;
    }
    .webaccess-box h3 {
        font-size: 26px;
        color:#222;
        font-weight: 600;
        margin-bottom:10px;
    }
    
    .webaccess-box p {
        font-size: 16px;
        color:#666;
        padding-bottom:80px
    }

    /* 법령정보 */
    .statute-box {
        background: #f5f5f5 url('../images/sub/row-img.png') no-repeat 50% 95%;
        background-size: 200px;
        border-radius: 20px;
        border:1px #dedede solid;
        box-shadow: 3px 0 7px rgba(0, 0, 0, 0.08);
        padding:20px 20px 180px 20px;
        text-align: center;
    }
    .statute-box h3 {
        font-size: 26px;
    }
    .btn-statute {
        background: #222 url('../images/sub/btn-linkicon.png') no-repeat 92% 50%;
        font-size: 16px;
        color:#fff;
        font-weight: 600;
        padding:7px 50px 7px 20px;
        border-radius: 80px;
        transition: 0.3s;
    }

    .btn-statute:hover {
        background: #222 url('../images/sub/btn-linkicon.png') no-repeat 92% 50%;
        font-size: 16px;
        color:#fff;
        font-weight: 600;
        padding:7px 50px 7px 20px;
        border-radius: 80px;
        box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.12);
    }
     .qna-boxarea {
        background:#f1f5f9 url('../images/temp/qna-img2.png') no-repeat 50% 100%;
        background-size: 350px;
        border:1px #dbe4ec solid;
        box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        width: 100%;
        height: 100%;
        margin-top:20px;
        padding:20px 20px 280px 20px
    }

    /* 풍수해지진재해보험 */
    .insurance-iconlist {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap:5px;
        margin-top:10px
    }
    .insurance-iconlist li {
        text-align: center;
    }
    .insurance-iconlist li span {
        display: block;
        background-color: #fff;
        border-radius: 20px;
        border:1px #c8c8c8 solid;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.12);
        margin-bottom:5px;
    }
     .insurance-iconlist li span img {
        width: 60px;
     }
    .insurance-iconlist li p {
        font-size: 14px;
    }
    
    .curriculum-buttonlist {
        display: flex;
        flex-wrap: wrap;
    }
    .curriculum-buttonlist a {
        background: #fff url('../images/sub/btn-down3.png') no-repeat 93% 50%;
        border:1px #ddd solid;
        border-radius: 5px;
        font-size: 14px;
        font-weight: 500;
        padding:6px 30px 6px 10px;
       margin:5px 0px 0 0;
        color:#666;
        width: 100%;
    }
    .link-boxarea p {
        white-space: normal;
        font-size: 15px;
        color:#666;
        line-height: 1.3;
    }
    /* 국민신문고 */
    .link-boxarea.bg-people {
        background: url('../images/sub/people-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:400px;
        height: 100%;
        background-size: 380px;
    }

    /* 생활안전지도 */
    .link-boxarea.bg-livingmap {
        background: url('../images/sub/living-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:480px;
        height: 100%;   
        background-size: 350px;
    }
    /* 어린이놀이시설안전관리 */
    .link-boxarea.bg-children {
        background: url('../images/sub/children-img.png') no-repeat 50% 100%;
        background-size: 350px;
        padding-bottom:100px;
        min-height:480px;
        height: 100%;   
    }
    /* 국민안전교육플랫폼 */
    .link-boxarea.bg-platform {
        background: url('../images/sub/platform-img.png') no-repeat 50% 100%;
        background-size: 380px;
        min-height:440px;
        height: 100%;   
    }
    /* Q&A */
    .link-boxarea.bg-qna {
        background: url('../images/sub/qna-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:450px;
        height: 100%;   
        background-size: 330px;
    } 
    /*자연재해통계지도 */
    .link-boxarea.bg-statistmap {
        background: url('../images/sub/statistmap-img.png') no-repeat 50% 100%;
        background-size:400px;
        min-height:450px;
        height: 100%;  
    }
    
     /* 통합검색 */
    /* search-form */
    .tot-searcharea {
        margin-top:30px;
        flex-wrap: wrap;
    }
    .tot-search {
        width: 90%;
    }
    .search-check {
        width: 90%;
    }
    .search-check.ml20 {
        margin-left:0
    }
    .search-check.mt20 {
        margin-top:10px
    }
    .tot-search {
        background-color: #222;
        border:3px #222 solid;
        height: 50px;
        line-height: 50px;
        border-radius:10px;
        overflow: hidden;
        box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.22);
        width: 90%;
        padding:0;
        font-size: 0;
        vertical-align: top;
    }
    .tot-search input[type="text"]{
        height: 100%;
        border:0px;
        font-size:18px;
        color:#666;
        padding:0 10px;
        width: calc(100% - 46px);
        
    }

    .tot-search input::placeholder {
        color:#9a9a9a;
    }
    .tot-search .btn-totsearch {
        background: #222 url('../images/sub/cate-searchicon.png') no-repeat 55% 35%;
        background-size: 20px;
        height: 44px;
        width: 44px;
        border-radius: 0;
    }
    /* search-form */
    
    /* search-tab */
    .tot-searchtab {
        display: flex;
        flex-wrap: wrap;
        justify-content:left;
        padding:40px 0 0px 0;
        width: 100%;
        gap:3px
    }
    .tot-searchtab li {
        border:1px #ddd solid;
        background-color: #fff;
        border-right:1px #ddd solid;
        text-align: center;
        font-size: 16px;
        color:#666;
        font-weight: 500;
        padding:10px;
        width: 44%;
        transition: 0.3s;
        border-radius:3px;
    }
    .tot-searchtab li:last-child {
        border-right:1px #ddd solid;
    }
    .tot-searchtab li.active {
        border:1px #222 solid;
        background-color: #222;
        border-right:1px #222 solid;
        text-align: center;
        font-size: 16px;
        color:#fff;
        font-weight: 500;
        padding:10px;
    }
    .tot-searchtab li:hover {
        border:1px #222 solid;
        background-color: #222;
        border-right:1px #222 solid;
        text-align: center;
        font-size: 16px;
        color:#fff;
        font-weight: 500;
        padding:10px;
    }
    /* search-tab */

    /* 검색결과 갯수 */
    .total-resultarea {
        width: 100%;    
    }
    .tot-resultarea h3 {
        font-size: 24px;
        color:#000;
        font-weight: 300;
        width: 100%;
        text-align: center;
        padding:50px 0 50px 0;
    }
    /* 검색결과 갯수 */

    /* 실시간 검색어 */
    .realtime-searcharea {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: #fbfbfb;
        padding:20px;
        margin-top:10px;
        border-top:1px #ddd solid;
        border-bottom:1px #ddd dashed;
    }
    .realtime-searcharea h3 {
        font-size: 16px;
        font-weight: 500;
        padding-right:0px;
        padding-bottom:20px;
    }
    .real-list li {
        display: inline-block;
    }
    .real-list li a{
        font-size: 15px;
        background-color: #fff;
        border:1px #ddd solid;
        padding:5px 10px 3px 10px;
        border-radius: 50px;
        font-size: 16px;
        transition: 0.3s;
        color:#666
    }
    .real-list li:hover a{
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        border:1px #bbb solid;
        color:#222
    }
    /* 실시간 검색어 */

    .search-category {    
        padding-bottom:7px;
        display: flex;
        justify-content: space-between;
    }
    .cateTitle {
        font-size: 18px;
        font-weight: 500;
        color:#666
    }
    .cateTitle span {
        color:#1764c4
    }
    .search-category .total-resultmore {
        font-size: 15px;
        font-weight: 500;
        padding-top:3px;
        color:#666;
        padding-right:20px;
        background: url('../images/sub/search-catearr1.png') no-repeat 100% 50%;
        transition: 0.2s;
    }
    .search-category .tot-resultmore:hover {
        font-size: 15px;
        font-weight: 500;
        color:#222;
        background: url('../images/sub/search-catearr1.png') no-repeat 101% 50%;
        
    }
    .tot-resultlist {
        border-top:2px #000 solid;
        padding:10px 0;
        border-bottom:1px #dfdfdf solid;
    }

    .tot-resultlist li {
        border-bottom:1px #ddd dotted;
        margin-bottom:10px;
        padding:10px 0 0px 0 ;
    }
    .tot-resultlist li:last-child {
        padding-bottom:0;
        border-bottom:0px
    }
    .tot-resultcate {
        font-size: 22px;
        color:#222;
        font-weight: 600;
        padding-bottom:20px;
        display: flex;
        justify-content: space-between;
    }
    .tot-resultcate a:hover {
        text-decoration: underline;
    }

    .tot-resultcate span {
        color:#0770d7
    }
    .tot-resTitle {
        font-size: 20px;
        color:#222;
        font-weight: 600;
        padding-bottom:20px;
    }
    .search-home {
        font-size: 0;
        background: url('../images/sub/search-home.png') no-repeat 0 0;
        width: 17px;
        height: 17px;
        vertical-align: top;
        margin:5px 10px 0 0;
    }
    .tot-resTitle span {
        display: inline-block;
        padding: 0 5px;
        color:#b8b8b8;
        font-weight: 400;
    }
    .tot-resText {
        font-size: 16px;
        color:#666;
        line-height: 1.4;
        padding-bottom:20px
    }

    .tot-detail {
        padding:10px 0 0 0 ;    
    }
    .tot-detail li {
        border-bottom:1px #e2e2e2 dashed;
        padding:20px 0
    }
    .tot-detail li h3 {
        font-size: 24px;
        color: #222;
        font-weight: 600;
        margin-bottom:20px;
    }
    .tot-cate1 {
        font-size: 20px;
        color:#222;
        font-weight: 500;
    }

    .tot-cate1 span {
        display: inline-block;
        padding: 0 10px;
        color:#b8b8b8;
        font-weight: 400;
    }

    .tot-detailTitle {
        font-size: 18px;
        color:#222;
        font-weight: 500;
        padding-bottom:10px;
    }
    .tot-resTitle .total-date {
        display: block;
        background-color: transparent;
        color:#6786ac;
        font-size: 15px;
        border-radius: 80px;
        margin-left:0px;
        padding:0;
        font-weight: 600;
        margin-top:5px;
    }
    .tot-detailText {
        font-size: 15px;
        color:#666;
        line-height: 1.5;
        padding-top:10px
    }
    .search-word {
        color:#1764c4;
        font-weight: 600;
        background-color: #e9eef7;
        padding:1px 3px;
        border-radius: 3px;
    }
    
    /* 기본 baseTable css */
    .baseTable {
        width: 100%;
        padding-bottom:5px;
        overflow-x: scroll;
    }
    .baseTable table {
        width: 600px;
     }
    .baseTable::-webkit-scrollbar {
        height: 8px;
        
    }
    .baseTable::-webkit-scrollbar-thumb {
        background-color: #dedede;
        border-radius: 50px;
    }
    .baseTable::-webkit-scrollbar-track {
        
        background-color: #f6f6f6;
        border:1px #dedede solid;
        border-radius: 50px;
    }
    /*.baseTable table {
	    width: 100%;
	    border-collapse: collapse;
	    border-spacing: 0;
	    border-top:1px #ddd solid;    
	}*/
	.baseTable table thead tr th {
	   font-size: 14px;
	   padding:5px 0;
	}

	.baseTable table tbody tr th,
	.baseTable table tbody tr td {
	    font-size: 14px;
	    padding:5px;
	}
	
	/* 게시판 목록 css변경 */
	.brd-listarea {
	    width: 100%;
	    border-top:2px #222 solid;    
	}
	.brd-list li {
	    padding:20px 0;
	    width: 100%;
	    box-sizing: border-box;    
	    border-bottom:1px #eee solid;    
	}
	.brd-list li:hover {
	    background-color: #f3f5f9;
	}
	.brd-list li .brd-num {
		width:100%;
		padding-bottom:5px;
		text-align:left;
		display:block;
	}
	.brd-list li .brd-context {
		width:100%;
		display:inline-block;	
	}
	.brd-infolist{
		width:100%;
		padding-top:5px;
	}
	.brd-infolist p {
		display:inline-block;
		font-size:15px;
		color:#666;
		border-bottom:0px;
		padding-right:20px;
	}
	.brd-infolist p span{
		color:#222;
		font-weight:500;
	}
	.brd-infolist p img {
		width:14px;
	}
	
	/* 자치단체 */
    .loc-govermentlist li {
	    width: 32.6%;
	}
	
	.board-toplist li.mobile-disnone {
		display:none
	}
	
	/* 빠른메뉴서비스 */
    .quickmenulist-settingarea h3 {
        font-size: 26px
    }
    .setting-cate01 {
        padding:20px 20px 10px 20px;
        border-radius:30px;
    }
    .title01 {
        font-size: 22px;
    }
    .title02 {
        font-size: 22px;
    }
    .title03 {
        font-size: 22px;
    }
    .title04 {
        font-size: 22px;
    }

    .quick-list1 li a {
        font-size: 17px;
        color:#222;
        font-weight: 600;
        line-height: 1.2;
        white-space:normal;
    }
	
}

@media all and (max-width:480px) {
    #translate_popup .pop-titlearea h2{font-size:18px;line-height:35px}
    #translate_popup .pop-container {border-radius:7px}
    #translate_popup img{max-width:80%}
    #translate_popup .pop-btnarea {padding: 10px 0 0 5px !important}
    #translate_popup .pop-conts{padding:15px}
    .board-toplist li{
        display: flex;
        flex-wrap: wrap;
        padding-bottom:5px;
        position: relative;
    
    }
    .board-toplist li .tit {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        flex-basis: 100%;
        margin-bottom:5px;
        padding-right:20px
    }
    /*.board-toplist li select {
        width:95%;
        margin-bottom:4px
    }
    .board-toplist li input {
        width:95%;
        margin-bottom:4px
    }
    .board-searcharea {
        text-align: right;
    }
    .board-searcharea .dropdown-button {
        width:80px
    }
    .board-searcharea input[type=text] {
        width:170px
    }
    .board-topbtn {
        text-align: center;
    }
    .dropdown-section .dropdown-button { 
        position: relative; 
        display: block; 
        width: 100%; 
        min-width: 80px; 
        height: 40px; 
        padding: 10px 40px 10px 12px; 
        border: 1px solid #bbb; 
        border-radius: 6px; 
        font-size: 16px; 
        line-height: 20px; 
        text-align: left; 
        color:#222; 
        text-overflow: ellipsis; 
        overflow: hidden; 
        white-space: nowrap;
    }
    .dropdown-content {
        display: none; 
        overflow: hidden; 
        position: absolute; 
        top: 100%; 
        width: 100%; 
        min-width: 80px; 
        left: 0; 
        margin-top: 3px; 
        padding:8px 0; 
        background: #fff; 
        z-index: 71; 
        border: 1px solid #1764c4; 
        border-radius: 5px; 
        font-size: 16px; 
        box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1);
         
    }*/
    

    .gallery-list ul {
        width:100%;
        border-bottom:1px #eee solid;
        padding:20px 0; 
        display: flex;
        flex-wrap: wrap;
        justify-content : space-between;
        gap: 0px 0
    }
    .gallery-list ul:last-child {
        border-bottom:1px #d5d5d5 solid;
    }
    .gallery-list ul li{
        box-sizing: border-box;   
        width: 100%; 
        padding-bottom:30px;
    }
    .gallery-info {
        padding-top:7px;
    }
    .gallery-info a {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        overflow:auto;
        text-overflow: ellipsis;
        display: block;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* 재난현황 */
    .current-content {
        height: 290px;
    }
    .current-titarea {
        padding-bottom:10px;
        margin-bottom:15px;
    }
    .current-titarea h3 {
        font-size: 20px;
        color:#222;
        font-weight: 600;
        display: inline-block;
        text-align: left;   
        height: 28px;
        line-height: 28px;
        
    }
    .basetime-area {display: block;}
    .current-titarea .basetime {
        display: inline-block;
        padding:0px 6px;
        height: 22px;
        line-height: 23px;
        font-size: 11px;
    }
    .current-titarea .basetext {
        font-size: 13px;
    }
    
    .current-titarea .more {
        font-size: 14px;
        font-weight: 500;
        margin-top:2px;
        color:#666;
    }
    .current-titarea .more:hover {
        color:#222;
    }

    /* 기상정보 */
    .table-legend.ds-flex button{
        margin-bottom:10px
    }
    .bsTable table {
        width: 600px;
        border-collapse: separate;
        border-spacing: 0;
    }

    /* 복구진도 등록 - 로그인 */
    .login-left {
        background: #1764c4 url('../images/sub/login-bg.png') no-repeat 50% 50%;
        background-size: 150px;
        width:100%;
        height: 200px;
        padding:0;
    }
    .login-right {
        width: 100%;
        padding:30px;
        text-align: center;
    }
    .login-right input {
        height: 42px;
        line-height: 42px;
        font-size: 16px;
    }
    .login-right button {
        height: 50px;
        line-height: 50px;
    }
    .login-right button span {
        font-size: 16px;
    }
    /* 민방위 */
     .civil-list li {
        width: 100%;
        margin-right:0%;
        margin-bottom:3%;
        padding-right:0%;
        text-align: center;
        border-bottom:2px #d9d9d9 dashed;
        background: url('../images/temp/civil-bar1.png')no-repeat 100% 50%;
    }
      .civil-list1 li {
        width: 100%;
        margin-right:0%;
        padding-right:0%;
        margin-bottom:3%;
        text-align: center;
        border-bottom:2px #d9d9d9 dashed;
        background: none;
    }

    .b-titlist {
        display: inline-block;
        width: 50%;    
        font-size: 15px;
        font-weight: 600;
    }

    
    /* 어린이 교육관리 */
    .link-boxarea {
        margin:30px 0;
    }
    .link-boxarea.bg-childeducation {
        background: url('../images/sub/education-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:400px;
        height: 100%;
        background-size: 330px;
    }
    .link-boxarea button {margin-bottom:30px;font-size: 14px;}
    .link-boxarea button:hover {font-size: 14px;}
    .link-boxarea h4 {
        font-size: 26px;
        color:#222;
        font-weight: 700;
        padding-bottom:10px;
    }
    .link-boxarea p {
        white-space: normal;
        font-size: 15px;
        color:#666;
        line-height: 1.3;
    }
    /* 시민안전보험 */
    .link-boxarea.bg-insurance {
        background: url('../images/sub/insurance-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:460px;
        height: 100%;   
        background-size: 350px;
    }
    /* 통합검색 상세검색 영역 */
    .search-toparea {
        background-color: #f8f8f8;
        border-radius: 20px;
        padding:30px 40px 20px 40px;
    }

    .search-toplist li{
        display:flex;
        flex-wrap:wrap;
        padding-bottom:10px;
        position: relative;
        line-height:2;   
    }
    .search-toplist li .tit {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        padding-right:0px;
    }
    .search-toplist li .search-field {
        vertical-align: top;
        width:100%;
    }
     .search-field .input-group {
        width:46%;
        display:inline-block;
    }
     .search-field  .gutter {
        display:inline-block;
        width:5%;
        text-align:center;
    }
    .search-field select, .search-field input {
        display:inline-block;
        border:1px #acacac solid;
        border-radius: 5px;
        height:38px;
        line-height:38px;
        padding: 0 10px;
        font-size:16px;
        color:#666;
    }
    .search-field .dropdown-section {
        display: block;
        width:100%;
        margin-left:0;
        margin-top:5px;
    }
    .search-field .datepicker-area {
        display: inline-block;
        width:100%;
        z-index: 0;
    }
    .search-field .dropdown-section .dropdown-button { 
        position: relative; 
        display: block; 
        width: 98%; 
        min-width: 80px; 
        height: 40px; 
        padding: 10px 40px 10px 12px; 
        border: 1px solid #bbb; 
        border-radius: 6px; 
        font-size: 16px; 
        line-height: 20px; 
        text-align: left; 
        color:#222; 
        text-overflow: ellipsis; 
        overflow: hidden; 
        white-space: nowrap;
    }
    .search-field .dropdown-content {
        display: none; 
        overflow: hidden; 
        position: absolute; 
        top: 100%; 
        width: 100%; 
        min-width: 80px; 
        left: 0; 
        margin-top: 3px; 
        padding:8px 0; 
        background: #fff; 
        z-index: 71; 
        border: 1px solid #1764c4; 
        border-radius: 5px; 
        font-size: 16px; 
        box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1);
         /*box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 2px 6px 16px 0 rgba(0,0,0,0.1);*/
    }
    .brd-list li.datanone {
    	width:100%;
    	text-align:center;
    }
    .pagination .nav {
        display: flex; 
        flex-wrap:wrap;
        align-items: center; 
        justify-content: center; 
        margin: auto 0px
    }
}

@media all and (max-width:440px) {
	.board-topbtn1 {flex-direction: column;}
	.board-topbtn2 {flex-direction: column;gap:6px; padding:0}
    /* 기상정보 */
    .disaster-weatherinfoarea {
        width: 100%;
        border-radius: 20px;
        background-color: #eaf3fb;
        padding:15px;
    }
    .dis-weathertitarea {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .dis-weathertitarea h2 {
        font-size: 22px;
        font-weight: 600;
        color:#222;
        width: 100%;
        text-align: center;

    }
    .weather-setting {
        margin:0;
        text-align: center;
        padding:0px;
        width: 100%;
        height:1px;
    }
    .weather-setting li {
        display: inline-block;
        font-size: 16px;
        color:#222;
        font-weight: 500;
    }
    .weather-setting li img {
        vertical-align: middle;
    }
    .weather-setting li:first-child {
        background: url('../images/sub/setting-bar.png') no-repeat 100% 50%;
        padding-right:20px;
        margin-right:20px;
    }

    .disaster-winfoarea {
        padding-top:10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .disas-weatherinfo {
        padding-bottom:10px;
        padding-left:0px;
        border-bottom:1px #c7c7c7 dashed;
        min-height:50px;
    }
    .disas-weatherinfo span {
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        color:#222;
        padding:0 10px;
    }
    .disas-weatherinfo span img{
        width: 45px;
    }
    .disas-weatherinfo .d-temp {
        font-size: 32px;
        font-weight: 600;
        height:36px;
        color:#222
    }

    .dis-winfoleft {
        width: 100%;
        margin-right:0%;
        margin-bottom:20px;
        background-color: #fff;
        border:1px #d3e4f3 solid;
        border-radius: 10px;
        padding:60px 20px 10px 20px;
        box-sizing: border-box;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        position: relative;
        text-align: center;
    }
    .dis-winfoleft .today {
        background-color: #f0f5fa;
        height: 32px;
        text-align: center;
        line-height: 32px;
        border-radius: 50px;
        padding:0px;
        width: 110px;
        font-size: 16px;
        font-weight: 600;
        top:20px;
        left:50%;
        transform: translateX(-50%);
    }
    .dis-winforight {
        width: 100%;
        background-color: #fff;
        border:1px #d3e4f3 solid;
        border-radius: 10px;
        padding:60px 30px 20px 30px;
        box-sizing: border-box;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        position: relative;
        text-align: center;
    }
    .dis-winforight .tomorrow {
        background-color: #ededed;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 50px;
        padding:0px;
        width: 110px;
        font-size: 16px;
        font-weight: 600;
        color:#666;
        position: absolute;
        top:20px;
        left:50%;
        transform: translateX(-50%);
    }

    .weather-list {
        text-align: center;
        padding-top:10px
    }
    .weather-list li {
        display: inline-block;
        padding:5px 10px;
        font-size: 15px;
        font-weight: 500;
        color:#666
    }
    .weather-list li span {
        display: inline-block;
        padding-left:5px;
        color:#222
    }
    .weather-list li span.fdust-type1 {
        color:#1764c4
    }

    .weather-list li span.fdust-type2 {
        color:#1f8f51
    }
    .disas-weatherinfo01 {
        padding:5px 0 10px 0px;
        margin-bottom:10px;
        border-bottom:1px #c7c7c7 dashed;
        font-size: 0;
        min-height:50px;
    }
    .disas-weatherinfo01 span {
        display: inline-block;
        font-size: 22px;
        font-weight: 500;
        color:#222;
        padding:0 10px;
        vertical-align: middle;
    }
    .disas-weatherinfo01 span img {
        width: 45px;

    }
    .disas-weatherinfo01 span.d-prec {
        display: inline-block;
        font-size: 16px;
       padding: 0 0 0 10px;
       font-weight: 500; 
    }

    .temperature-list {
        display: flex;
        padding-top:10px;
        justify-content: center;
    }
    .temperature-list li {
        display: flex;
    }
    .temperature-list li:first-child {
        padding-right:15px;
    }
    .temperature-list li:last-child {
        padding-left:15px;
    }
    .temperature-list li span {
        display: inline-block;
        text-align: center;
        border-radius: 50px;
        padding:0px 15px;
        height: 28px;
        line-height: 28px;
        font-size: 16px;
        font-weight: 500;
        margin:6px 10px 6px 0;
    }

    .temperature-list li.low p {
        display: inline-block;
        color:#1764c4;
        font-weight: 600;
        font-size: 22px;
        height: 20px;
    }
    .temperature-list li.high p {
        display: inline-block;
        color:#d61313;
        font-weight: 600;
        font-size: 26px;
    }
    
    .food-poisarea {
        background: #eaf3fb url('../images/sub/icon-foodpois.png') no-repeat 90% 70%;
        background-size: 70px;
        border:1px #d3e4f3 solid;
        box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.08);
        border-radius:20px;
        padding:20px 30px 30px 30px;
        box-sizing: border-box;
        width: 100%;
    }
    .food-poisarea h3{
        font-size: 32px;
        font-weight: 600;
        color:#222;
        padding-bottom:0px;
        height: 40px;
    }
    .food-poisarea p {
        font-size: 14px;
        color:#666;
        font-weight: 500;
        padding-bottom:10px;
    }
    .food-poisarea button {
        background: #1764c4 url('../images/sub/go-guide1.png') no-repeat 93% 50%;
        border:1px #1764c4 solid;
        font-size: 13px;
        color:#fff;
        font-weight: 600;
        padding:5px 35px 5px 10px;
        border-radius: 50px;
        transition: 0.3s;
    }

    
    .info-address .info-formarea input {
        width:73%;
        margin-bottom:5px;
        font-size: 14px;
        color:#666
    }
    .info-address .info-formarea input:last-of-type {
        width:73%;
        margin-bottom:0px
    }
    .info-address .info-formarea .btn-address {
        height: 40px;
        width:22%;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
    }
    .info-address .info-formarea .btn-address:hover {
        background-color: #054788;
        border: 1px #054788 solid;
    }
    /* 국민안전교육플랫폼 */
    .link-boxarea.bg-platform {
        background: url('../images/sub/platform-img.png') no-repeat 50% 100%;
        background-size: 330px;
        min-height:400px;
        height: 100%;   
    }
    /* Q&A */
    .link-boxarea.bg-qna {
        background: url('../images/sub/qna-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:460px;
        height: 100%;   
        background-size: 300px;
    }
    
    /* search-tab */
    .tot-searchtab {
        display: flex;
        flex-wrap: wrap;
        justify-content:left;
        padding:40px 0 0px 0;
        width: 100%;
        gap:0px;
    }
    .tot-searchtab li {
        border:1px #ddd solid;
        background-color: #fff;
        border-right:1px #ddd solid;
        text-align: center;
        font-size: 16px;
        color:#666;
        font-weight: 500;
        padding:10px;
        width: 100%;
        transition: 0.3s;
        border-radius:3px;
        margin-bottom:3px
    }
    .tot-searchtab li:last-child {
        border-right:1px #ddd solid;
    }
    .tot-searchtab li.active {
        border:1px #222 solid;
        background-color: #222;
        border-right:1px #222 solid;
        text-align: center;
        font-size: 16px;
        color:#fff;
        font-weight: 500;
        padding:10px;
    }
    .tot-searchtab li:hover {
        border:1px #222 solid;
        background-color: #222;
        border-right:1px #222 solid;
        text-align: center;
        font-size: 16px;
        color:#fff;
        font-weight: 500;
        padding:10px;
    }
    /* search-tab */

    /* 실시간 검색어 */
    .realtime-searcharea {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        background-color: #fbfbfb;
        padding:20px 10px;
        margin-top:10px;
        border-top:1px #ddd solid;
        border-bottom:1px #ddd dashed;
    }
    .realtime-searcharea h3 {
        font-size: 16px;
        font-weight: 500;
        padding-right:0px;
        padding-bottom:20px;
    }
    .real-list {
        text-align: center;
    }
    .real-list li {
        display: inline-block;
        padding:5px 0;
    }
    .real-list li a{
        font-size: 14px;
        background-color: #fff;
        border:1px #ddd solid;
        padding:5px 10px 3px 10px;
        border-radius: 50px;
        transition: 0.3s;
        color:#666;
    }
    .real-list li:hover a{
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        border:1px #bbb solid;
        color:#222
    }
    /* 실시간 검색어 */
    
    /* 빠른메뉴 서비스 설정 */
    .quick-list1 li span {
        display:block;
        font-size: 0;
        width: 85px;
        height: 85px;
        padding-top:15px;
        border-radius: 50%;
        text-align:center;
        margin:0 auto 10px auto;
        transition: 0.3s;
    }
    .quick-list1 li span img {
    	width:45px
    }
    .quick-list1 li a {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        white-space: pre;
    }
    .quick-list1 li:nth-child(1) span {
        background-size:50px
    }
    .quick-list1 li:nth-child(2) span {
        background-size:50px
    }
    .quick-list1 li:nth-child(3) span {
        background-size:50px
    }
    .quick-list1 li:nth-child(4) span {
        background-size:50px
    }
    .quick-list1 li:nth-child(5) span {
        background-size:50px
    }
    .quick-list1 li:nth-child(6) span {
        background-size:50px
    }
    .quick-list1 li:nth-child(1):hover span {
        background-size:50px
    
    }
    .quick-list1 li:nth-child(2):hover span {
        background-size:50px
    }
    .quick-list1 li:nth-child(3):hover span {
        background-size:50px
    }
    .quick-list1 li:nth-child(4):hover span {
        background-size:50px
    }
    .quick-list1 li:nth-child(5):hover span {
        background-size:50px
    }
    .quick-list1 li:nth-child(6):hover span {
        background-size:50px
    }
    .quick-list1 li.bg07 span,
    .quick-list1 li.bg08 span,
    .quick-list1 li.bg09 span,
    .quick-list1 li.bg10 span,
    .quick-list1 li.bg11 span,
    .quick-list1 li.bg12 span,
    .quick-list1 li.bg13 span,
    .quick-list1 li.bg14 span,
    .quick-list1 li.bg15 span,
    .quick-list1 li.bg16 span,
    .quick-list1 li.bg17 span,
    .quick-list1 li.bg18 span,
    .quick-list1 li.bg19 span,
    .quick-list1 li.bg20 span,
    .quick-list1 li.bg21 span,
    .quick-list1 li.bg22 span,
    .quick-list1 li.bg23 span,
    .quick-list1 li.bg24 span,
    .quick-list1 li.bg25 span,
    .quick-list1 li.bg26 span {
        background-size:50px
    }
    .quick-list1 li.bg07:hover span,
    .quick-list1 li.bg08:hover span,
    .quick-list1 li.bg09:hover span,
    .quick-list1 li.bg10:hover span,
    .quick-list1 li.bg11:hover span,
    .quick-list1 li.bg12:hover span,
    .quick-list1 li.bg13:hover span,
    .quick-list1 li.bg14:hover span,
    .quick-list1 li.bg15:hover span,
    .quick-list1 li.bg16:hover span,
    .quick-list1 li.bg17:hover span,
    .quick-list1 li.bg18:hover span,
    .quick-list1 li.bg19:hover span,
    .quick-list1 li.bg20:hover span,
    .quick-list1 li.bg21:hover span,
    .quick-list1 li.bg22:hover span,
    .quick-list1 li.bg23:hover span,
    .quick-list1 li.bg24:hover span,
    .quick-list1 li.bg25:hover span,
    .quick-list1 li.bg26:hover span
     {
        background-size:50px
    }
    
    .priv-link {
		margin-top:20px;
	}
	.priv-link li {
	    box-sizing: border-box;
	    padding: 15px 40px 15px 15px;
	    border: 1px #dfdfdf solid;
	    font-size: 14px;
	    font-weight: 600;
	    border-radius: 10px;
	    margin-bottom:10px;
	    color: #555;
	    background: #fff url(../images/sub/l-link.png) no-repeat 93% 20px;
	    transition: 0.3s;
	}
	.priv-link li a{
		display:block
	}
	.priv-link li:hover {
		background:#f9f9f9 url(../images/sub/l-link.png) no-repeat 93% 20px;;
		box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.08);
	}
	.board-list table thead th {
		font-size:14px;
		padding:10px 5px;
	}
	.board-list table tbody td {
		font-size:13px;
		padding:10px 5px;
	}
    
    
    
    
    
    
    

}

@media all and (max-width:415px) {
    /* 게시판 상단 검색영역 */
    .board-toparea {
        border-radius: 20px;
        padding:10px 20px;
    }
    .board-toplist li{
        display: flex;
        flex-wrap:wrap;
        position: relative;
        line-height:2;
    }
    .board-toplist li .tit {
        width:100%;
        font-size: 16px;
        color:#222;
        font-weight: 600;
        flex-basis: 100%;
        padding-right:0px;
    }
    .form-field {
        display: flex;
        flex-wrap:wrap;
        vertical-align: top;
        width:100%;
        
    }
    .form-field .datepicker-area {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        z-index: 0;
    }
    .form-field .dropdown-section {
        display:block;
        font-size:14px;
        flex-basis: 40%;
        margin:0 2px 3px 0;
    }
    .dropdown-section .dropdown-button {
    	min-width:100%;
    	width:48%
    }
    .form-field .datepicker-area .input-group {
        width:46%;
        margin-bottom:3px;
        font-size:14px;
    }
    .form-field .datepicker-area .gutter {
        width:7%;
        margin-bottom:3px;
        text-align:center
    }
    .board-toplist li select {
        width:100%; 
        margin:0 0 5px; 
        height:40px;
        font-size:14px;
        line-height:40px;
        
    }
     .board-toplist li input {
     	margin:0 0 5px; 
        height:40px;
        font-size:14px;
        line-height:40px;
        width:59%;
     }
    .board-toplist li input:last-child, .board-toplist li select:last-child {
    	margin-bottom:0;
    }
    .form-field input {
        width:47%;
        font-size:14px;
        margin:0;
    }
    .input-group {
        border: 1px #acacac solid;
        border-radius:10px;
        padding:0 10px 0 0;
        background:#fff;
        overflow: hidden;
        height:40px;
        margin-bottom:5px;
    }
    .input-group input {
        cursor: pointer;
        font-family: 'PretendardOGV', sans-serif;
        color: #555;
        width: 100%;
        padding:0 0 0 5px;
        font-size:14px;
        background-color: none;
    }
    .current-content {
        padding:15px;
        height: 280px;
    }
    .current-titarea h3 {
        font-size: 18px;        
    }
    .situation-titarea h3 {
        font-size: 18px;
    }
    .guideline-titarea h3 {
        font-size: 18px;
    }
    .textmessage-content{
        padding:15px
    }
    .section{margin-top:0px}
    .slider1 {
        width: 100%;
        max-width: 100%;
        height:260px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 85%;
        height: 250px;
        overflow: hidden;
        text-align: center;
        margin-top:20px
    }
    .situation-cate li {
        display: inline-block;
        border:1px #c7cddc solid;
        background-color: #fff;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.05);
        text-align: center;
        margin:0px 2px 10px 2px;
        width: 76px;
        height: 70px;
        border-radius: 10px;
        transition: 0.3s;
        font-size: 18px;
        color:#36435e;
        font-weight: 500;
    }
    .situation-cateinner .situ-btn {
        background-color: #fff;
        border:1px #c7ccd6 solid;
        box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.08);
        width: 30px !important;
        height: 30px !important;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        transition: 0.3s;
    }
    .situation-cateinner .situ-btn img {
        width: 13px;
    }
    .situation-cate li span {
        font-size: 13px;
    }
    .situation-cate li:first-child {
        margin-left:0px;
    }
    .situation-cate li:last-child {
        margin-right:0px
    }
    
    .guideline-left {
        padding:15px;
        height:520px
    }
    .situation-guidelist li {
        width: 40%;
    }
    .around-tit {
        padding: 15px;
        background-size: 25px;
        font-size: 18px;
    }
    .safe-tit {
        padding: 15px;
        font-size: 18px;
        background-size: 25px;
    }

    
    /* 기상정보 */
    .temperature-list {
        display: flex;
        padding-top:0px;
        justify-content: center;
    }
    .temperature-list li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .temperature-list li:first-child {
        padding-right:15px;
    }
    .temperature-list li:last-child {
        padding-left:15px;
    }
    .temperature-list li span {
        display: block;
        text-align: center;
        border-radius: 50px;
        padding:0px 15px;
        height: 24px;
        line-height: 24px;
        font-size: 15px;
        font-weight: 500;
        margin:6px 10px 6px 0;
    }
    .temperature-list li.low p {
        display: inline-block;
        color:#1764c4;
        font-weight: 600;
        font-size: 22px;
        height: 20px;
    }
    .temperature-list li.high p {
        display: inline-block;
        color:#d61313;
        font-weight: 600;
        font-size: 22px;
        height: 20px;
    }

    /* 풍수해지진재해보험 */
    .comm-box-text p {
        font-size: 16px;
        text-align: center;
    }
    .insurance-chart h4 {
        font-size: 20px;
        color:#222;
        font-weight: 600;
        padding:25px 20px;
    }
    .insur-chart01 {
        width: 100%; 
        padding:0 20px;
        box-sizing: border-box;  
        flex-wrap: wrap;     
        gap: 5px;
    }
    .insur-chart01 span{
        border:2px #1764c4 solid;
        box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        padding:10px;
        text-align: center;
        color:#0c52a9;
        font-size: 16px;
        width: 100%;
        font-weight: 600;
    }
    .insur-chart02 {
        margin-top:30px;
        background: url('../images/temp/chart-arrow1.png') no-repeat 50% 100%;
        background-size: 65px;
        padding-bottom:65px
    }
    .insur-chart02 .chart-tit {
        background-color: #1b3e72;
        padding:10px 30px;
        border-radius: 80px;
        font-size: 15px;
        color:#fff;
        font-weight: 600;
        text-align: center;
    }
    .insur-chart03 ul{
        width: calc(100% - 40px);
        box-sizing: border-box;
    }
    .insur-chart03 li {
        font-size: 15px;
        color:#fff;
        padding-bottom:10px;
        padding-left:25px
    }
    .insur-chart03 li.num1 {
        background: url('../images/temp/num1.png') no-repeat 0 0;
        background-size: 17px;
    }
    .insur-chart03 li.num2 {
        background: url('../images/temp/num2.png') no-repeat 0 0;
        background-size: 17px;
    }
    .chart-comm {
        font-size: 14px;
        color:#666;
        padding:10px 20px 20px 0px;
        text-align: left;
        width: calc(100% - 60px);
        box-sizing: border-box;
        margin:0px auto;
    }
    /* 어린이교육관리 */
    .link-boxarea.bg-childeducation {
        background: url('../images/sub/education-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:400px;
        height: 100%;
        background-size: 300px;
    }
    /* 국민신문고 */
    .link-boxarea.bg-people {
        background: url('../images/sub/people-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:400px;
        height: 100%;
        background-size: 330px;
    }

     /* 생활안전지도 */
    .link-boxarea.bg-livingmap {
        background: url('../images/sub/living-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:480px;
        height: 100%;   
        background-size: 300px;
    }

    /* 어린이놀이시설안전관리 */
    .link-boxarea.bg-children {
        background: url('../images/sub/children-img.png') no-repeat 50% 100%;
        background-size: 300px;
        padding-bottom:100px;
        min-height:450px;
        height: 100%;   
    }
    /* 시민안전보험 */
    .link-boxarea.bg-insurance {
        background: url('../images/sub/insurance-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:440px;
        height: 100%;   
        background-size: 290px;
    }
    /* 국민안전교육플랫폼 */
    .link-boxarea.bg-platform {
        background: url('../images/sub/platform-img.png') no-repeat 50% 100%;
        background-size: 290px;
        min-height:400px;
        height: 100%;   
    }
    /*자연재해통계지도 */
    .link-boxarea.bg-statistmap {
        background: url('../images/sub/statistmap-img.png') no-repeat 50% 100%;
        background-size:330px;
        min-height:420px;
        height: 100%;  
    }
    /* 자치단체 */
    .loc-govermentlist li {
	    width: 49.3%;
	}
	
	/* 빠른서비스 메뉴 설정 */
	.title01 {
        font-size: 20px;
        background-size:26px;
        padding-left:32px;
    }
    .title02 {
        font-size: 20px;
        background-size:26px;
        padding-left:32px;
    }
    .title03 {
        font-size: 20px;
        background-size:26px;
        padding-left:32px;
    }
    .title04 {
        font-size: 20px;
        background-size:26px;
        padding-left:32px;
    }
    .quick-list1 li {
        width:50%;
    }
    .quick-list1 li a {
        font-size: 16px;
        color:#222;
        font-weight: 600;
        line-height: 1.2;
        white-space:normal;
    }
    .quick-list1 li span {
        display:block;
        font-size: 0;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        margin:0 auto 10px auto;
        transition: 0.3s;
    }
}

@media all and (max-width:500px){
	/*제보내용 대상 input 크기 수정*/
	.report-targer-form li {align-items: flex-start;flex-direction: column;align-content: flex-start;}
	.report-targer-form li .w85p {width: 100%;}
	.report-targer-form li .w15p { width: 100%; }
}

@media all and (max-width:360px){
	.local-govermtit {
	    display: flex;
	    flex-wrap:wrap;
	    justify-content: center;   
	
	}
	.local-govermtit .page-title {
		width:100%;
		text-align:center;
		margin-bottom:5px;
	}
	.local-govermtit a {
	    min-width:170px;
	    width:60%;
	    background: #222 url('../images/sub/btn-linkicon.png') no-repeat 90% 50%;
	    background-size:13px;
	    color:#fff;
	    font-size: 15px;
	    font-weight: 600;
	    border-radius: 80px;
	    padding:8px 35px 6px 20px;
	}
	.page-title {
        font-size: 20px;
        color:#222;
        font-weight: 800;
        width:100%;
    }
	
	
	
	
}


@media all and (max-width:344px) {
    .slider1 {
        width: 100%;
        max-width: 100%;
        height:280px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .slider-wrapper {
        width: 85%;
        height: 280px;
        overflow: hidden;
        text-align: center;
    }

    .qna-boxarea {
        background-size: 250px;
        border:1px #dbe4ec solid;
        box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.08);
        border-radius: 20px;
        width: 100%;
        height: 100%;
        margin-top:20px;
        padding:20px 20px 220px 20px
    }

    .link-boxarea.bg-childeducation {
        background: url('../images/sub/education-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:400px;
        height: 100%;
        background-size: 300px;
    }
    /* 어린이교육관리 */
    .link-boxarea.bg-childeducation {
        background: url('../images/sub/education-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:370px;
        height: 100%;
        background-size: 270px;
    }
    /* 생활안전지도 */
    .link-boxarea.bg-livingmap {
        background: url('../images/sub/living-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:480px;
        height: 100%;   
        background-size: 270px;
    }
    /* 어린이놀이시설안전관리 */
    .link-boxarea.bg-children {
        background: url('../images/sub/children-img.png') no-repeat 50% 100%;
        background-size: 250px;
        padding-bottom:100px;
        min-height:460px;
        height: 100%;   
    }
    /* 국민안전교육플랫폼 */
    .link-boxarea.bg-platform {
        background: url('../images/sub/platform-img.png') no-repeat 50% 100%;
        background-size: 250px;
        min-height:400px;
        height: 100%;   
    }
    /* Q&A */
    .link-boxarea.bg-qna {
        background: url('../images/sub/qna-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:460px;
        height: 100%;   
        background-size: 270px;
    }
    /*자연재해통계지도 */
    .link-boxarea.bg-statistmap {
        background: url('../images/sub/statistmap-img.png') no-repeat 50% 100%;
        background-size:290px;
        min-height:390px;
        height: 100%;  
    }
    /* 게시판 상단 검색영역 */
    .board-toparea {
        border-radius: 20px;
        padding:10px 20px;
    }
    .board-toplist li{
        display: flex;
        flex-wrap:wrap;
        padding-bottom:10px;
        position: relative;
        line-height:2;
    }
    .board-toplist li .tit {
        width:100%;
        font-size: 16px;
        color:#222;
        font-weight: 600;
        flex-basis: 100%;
        padding-right:0px;
    }
    .form-field {
        display: flex;
        flex-wrap:wrap;
        vertical-align: top;
        width:100%;
        
    }
    .form-field .datepicker-area {
        width:100%;
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        z-index: 0;
    }
    .form-field .dropdown-section {
        display:block;
        font-size:14px;
        flex-basis: 100%;
        margin:0 0 3px 0;
    }
    .dropdown-section .dropdown-button {
    	min-width:100%;
    	width:100%
    }
    .form-field .datepicker-area .input-group {
        width:93%;
        margin-bottom:3px;
        font-size:14px;
    }
    .form-field .datepicker-area .gutter {
        width:7%;
        margin-bottom:3px;
        text-align:center
    }
    .board-toplist li input, .board-toplist li select {
        margin:0;  
        width:100%; 
        margin-bottom:5px;
        height:34px;
        font-size:14px;
        line-height:34px;
    }
    .form-field input {
        width:100%;
        font-size:14px;
        margin:0;
    }
    .input-group {
        border: 1px #acacac solid;
        border-radius:4px;
        padding:0 10px 0 0;
        background:#fff;
        overflow: hidden;
        height:40px;
        margin-bottom:5px;
    }
    .input-group input {
        cursor: pointer;
        font-family: 'PretendardOGV', sans-serif;
        color: #555;
        width: 70%;
        padding:0 0 0 5px;
        font-size:14px;
        background: none;
    }
}

@media all and (max-width:320px) {
    .link-boxarea p {
        white-space: normal;
        font-size: 14px;
        color:#666;
        line-height: 1.3;
    }
    .link-boxarea.bg-childeducation {
        background: url('../images/sub/education-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:400px;
        height: 100%;
        background-size: 250px;
    }

    /* 국민신문고 */
    .link-boxarea.bg-people {
        background: url('../images/sub/people-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:400px;
        height: 100%;
        background-size: 270px;
    }
     /* 생활안전지도 */
    .link-boxarea.bg-livingmap {
        background: url('../images/sub/living-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:480px;
        height: 100%;   
        background-size: 250px;
    }
    /* 시민안전보험 */
    .link-boxarea.bg-insurance {
        background: url('../images/sub/insurance-img.png') no-repeat 50% 100%;
        padding-bottom:100px;
        min-height:430px;
        height: 100%;   
        background-size: 230px;
    }
    /*자연재해통계지도 */
    .link-boxarea.bg-statistmap {
        background: url('../images/sub/statistmap-img.png') no-repeat 50% 100%;
        background-size:270px;
        min-height:370px;
        height: 100%;  
    }
    
    /* 자치단체 */
    .local-govermtit .page-title {
		width:100%;
		text-align:center;
		margin-bottom:5px;
	}
	.local-govermtit a {
	    min-width:170px;
	    width:80%;
	    background: #222 url('../images/sub/btn-linkicon.png') no-repeat 93% 50%;
	    background-size:13px;
	    color:#fff;
	    font-size: 15px;
	    font-weight: 600;
	    border-radius: 80px;
	    padding:10px 35px 8px 20px;
	}
    
    .loc-govermentlist li {
	    width: 100%;
	}
}
@media all and (max-width:300px) {
    /*자연재해통계지도 */
    .link-boxarea.bg-statistmap {
        background: url('../images/sub/statistmap-img.png') no-repeat 50% 100%;
        background-size:240px;
        min-height:400px;
        height: 100%;  
    }
}


.tab-area .tab-list.active {
    background: #1764c4;
    border:1px #1764c4 solid;
    color:#fff;
}

.guideline-tabarea .gtab-list.active {
    background: #1764c4;
    border:1px #1764c4 solid;
    color:#fff;
}


@media all and (max-width:1280px) {
    .board-toplist {
        display: flex;
        flex-wrap: wrap;
    }
    .board-toplist > li {
        width: 100%;
        margin-bottom: 10px;
        overflow: visible;
    }
    .board-toplist .tit {
        width: 100%;
        margin-bottom: 5px;
    }
    .board-toplist .form-field {
        display: flex;
        gap: 8px;
        align-items: center;
        float: left;
        z-index: 0;
    }
    .board-toplist .form-field select {
        min-width: 0;
        flex: 1 1 0;
        margin: 0;
        background-position: calc(100% - 15px) 50% !important;
    }
    .board-toplist .form-field .dropdown-section {
        flex: 1 0 0;
        min-width: 0;
        width: 100%;
    }
    .board-toplist .form-field input.form-input {
        flex: 5 1 0;
        min-width: 0;
        margin: 0;
    }
    .board-toplist .form-field .datepicker-area {
        width: 100%;
        display: flex;
        align-items: center;
        z-index: 0;
    }
    .board-toplist .form-field .datepicker-area .input-group {
        flex: 1;
    }
    .board-toplist .form-field .datepicker-area .input-group input {
        width: 100%;
    }
    .board-toplist .btn-rightarea {
        float: right;
        width: auto !important;;
        margin-top: 15px;
        text-align: center;
        display: flex;
        /*width: 100% !important;*/
    }
    .button-area {align-items: center;}
    
    .board-toplist .btn-rightarea .nf-btn {
        width: 100%;
    }
	#sfTechTy {width:100%;}

	.board-toplist:has(#sfTechTy ) > li {
		display: flex;
		flex-wrap: nowrap;
	}
	.board-toplist:has(#sfTechTy ) > li .form-field {
		display: block;
	}
	.form-field #sbLawArea1, .form-field #sbLawArea2, .form-field #sbLawArea3 {flex:1; width: 100% !important;}
	
}
@media all and (max-width:870px) {
    .board-toplist .form-field {
        flex-wrap: wrap;
        float: none;
        width: 100%;
    }
    .board-toplist .form-field select,
    .board-toplist .form-field .dropdown-section {
        flex: 0 0 30%;
        min-width: 0;
        margin: 0;
        
        /*20260311 자료실 select 박스 크기 조정*/
        width: 100%;
    }
    .board-toplist .form-field input.form-input {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }
    .board-toplist .btn-rightarea {
        float: none;
        width: 100%;
        margin-top: 15px;
        margin-left: 0;
    }
    .board-toplist .btn-rightarea .nf-btn {
        width: 100%;
        display: block;
    }
	.board-toplist:has(#sfTechTy ) > li {
		flex-wrap: wrap;
	}
}
@media all and (max-width:540px) {
    .board-toplist > li {
        margin-bottom: 8px;
    }
    .board-toplist .form-field {
        float: none;
        width: 100%;
        /*flex-direction: column;*/
        flex-direction: unset;
        flex-wrap: nowrap;
    }
    .board-toplist .form-field select,
    .board-toplist .form-field .dropdown-section,
    .board-toplist .form-field input {
        /*width: 100%;*/
        width: 30%;
        flex: 0 0 auto;
        font-size: 14px;
        /*margin: 0 0 8px 0;*/
    }
    .board-toplist .form-field .datepicker-area {
        flex-wrap: wrap;
        z-index: 0;
    }
    .board-toplist .form-field .datepicker-area .input-group {
        /*flex: 1 1 calc(50% - 10px);*/ /* 재난문자 등록일 사이즈 수정*/
       	flex: 1;
    }
    .board-toplist .btn-rightarea {
        float: none;
        width: 100%;
        margin-top: 10px;
    }
    .board-toplist .btn-rightarea .nf-btn {
        width: 100%;
        display: block;
    }
    
    #cocrcType, #dsstrSe, #sbLawArea1, #sbLawArea2 {
    	width: 100% !important;
    }
}

@media all and (max-width:870px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    .pagination .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3px;
    }
    .pagination .nav button {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }
}
@media all and (max-width:540px) {
    .pagination .nav button {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
        padding: 0 4px;
    }
}

@media all and (max-width:1024px) {
    .side-toparea {
        position: relative;
        z-index: 100;
    }
    .sub_menu_list {
        overflow-y: auto;
        max-height: calc(100vh - 200px);
    }
    .sub_menu_list li {
        white-space: nowrap;
    }
    .sub_menu_list li a {
        padding: 12px 15px;
        display: block;
    }
}
@media all and (max-width:780px) {
    .side-toparea {
        width: 100%;
        margin-bottom: 20px;
    }
    .sub_menu_list {
        display: flex;
        flex-wrap: wrap;
        max-height: none;
        overflow: visible;
    }
    .sub_menu_list li {
        flex: 0 0 auto;
    }
}

@media all and (max-width:1420px) {
	.board-toplist:has(#stdrYear):has(.ta-c) li:nth-child(1) {
		display: grid;
		grid-template-columns: 100px 1fr;
	}
	.board-toplist:has(#stdrYear):has(.ta-c) li:nth-child(2) {
		display: grid;
		grid-template-columns: 100px 1fr 150px 1fr;
		justify-content: start;
	}
	.ta-c {text-align: left;}
}
@media all and (max-width:870px) {
    .board-toplist:has(#stdrYear):has(.ta-c)  li .tit {
        width: auto !important;
        text-align: center;
        white-space: nowrap;
    }

    .board-toplist:has(#stdrYear):has(.ta-c)  li .form-field {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 5px;
        width: 100% !important;
        align-items: flex-start;
    }

    .board-toplist:has(#stdrYear):has(.ta-c)  li .form-field select {
        width: 100% !important;
        flex: 1 1 auto;
        min-width: 0;
    }
	
    .board-toplist:has(#stdrYear):has(.ta-c)  li:nth-child(1) {
        display: grid !important;
        grid-template-columns: 100px 1fr !important; 
        row-gap: 10px;     
        column-gap: 10px;  
        align-items: center; 
    }
    .board-toplist:has(#stdrYear):has(.ta-c)  li:nth-child(2) {
        display: grid !important;
        grid-template-columns: 100px 1fr auto 1fr !important;
        row-gap: 10px;
        column-gap: 15px;
        align-items: center;
    }
}

@media all and (max-width: 640px) {
    .board-toplist:has(#stdrYear):has(.ta-c)  li:nth-child(2) {
        display: grid !important;
        grid-template-columns: 140px 1fr !important;
        row-gap: 10px;
        column-gap: 10px;
    }

    .board-toplist:has(#stdrYear):has(.ta-c)  li:nth-child(1) {
        grid-template-columns: 100px 1fr !important;
        row-gap: 10px;
    }
	.btn-rightarea {
        display: flex !important;
        /*width: 100% !important;*/
        width: auto !important; 
        gap: 5px;                 
        justify-content: center;
        margin-top: 15px;       
    }
	.btn-leftarea {margin-top: 15px;}
    .btn-rightarea button {
        width: auto !important;      
        flex: 1 1 0 !important;
    }
    
    /*20260311 개인정보 체크 버튼 수정*/
    .degree-check-btn .btn-rightarea {width: auto !important; margin-top: 15px;;}
}
@media all and (max-width:600px){
	 .board-toplist > li:has(.form-field.edu01) {grid-template-columns: 68px 1fr 80px 1fr !important; gap: 10px 5px !important;}
}
@media all and (max-width: 540px) {
    .board-toplist:has(#stdrYear):has(.ta-c) li:nth-child(1),
    .board-toplist:has(#stdrYear):has(.ta-c) li:nth-child(2) {
        grid-template-columns: 1fr !important;
        
        height: auto !important;
        padding: 10px 0;  
        row-gap: 5px;  
    }

    .board-toplist li .tit {
        text-align: left !important;  
        width: 100% !important;    
        min-width: 0 !important;
        margin-top: 15px;          
        padding-left: 0 !important; 
    }

    .board-toplist li .tit:first-child {
        margin-top: 0 !important;
    }
    .board-toplist > li:has(.form-field.edu01){display:flex !important;}
    .btn-leftarea {margin-top:15px; gap: 2px;}
    .btn-rightarea {width: auto !important;}
}


@media all and (max-width:1400px) {
    .board-toplist .form-field select,
    .board-toplist .form-field input {
        margin-bottom: 8px;
    }
}

.board-step li.mb10 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    font-size: 14px;
}
.board-step li.mb10 span {
    display: inline-block;
    white-space: nowrap;
}
@media all and (max-width:870px) {
    .board-toplist > li {
        overflow: visible;
    }
    .board-toplist .form-field select,
    .board-toplist .form-field input {
        flex: 0 0 auto;
        width: 100%;
        height: 40px;
        margin: 0 0 8px 0;
    }
    .board-toplist .form-field {
        float: none;
        width: 100%;
    }
    .board-toplist .btn-rightarea {
        float: none;
        width: 100%;
        margin-top: 15px;
    }
    .board-toplist .btn-rightarea .nf-btn {
        width: 100%;
        display: block;
    }
	#cocrcType, #dsstrSe, #sbLawArea1, #sbLawArea2 {
		width: 48% !important;
	}
}
@media all and (max-width:540px) {
	.board-toplist .form-field:has(#cocrcType, #dsstrSe),
	.board-toplist .form-field:has(#sbLawArea1, #sbLawArea2)  {
		flex-direction: column;
		align-items: flex-start;
	}
	
	#cocrcType, #dsstrSe, #sbLawArea1, #sbLawArea2 {
		width: 100% !important;
	}
	
	.dropdown-section .dropdown-button {
	    min-width: 100%;
        width: 48%;
        height: auto;
	}
}
@media all and (max-width:344px) {
    .board-toplist .form-field select,
    .board-toplist .form-field input {
        font-size: 13px;
        /*padding: 8px;*/
    }
    .board-step li.mb10 span {
        font-size: 13px;
        padding: 5px 10px;
    }
}

@media all and (max-width:540px) {
    .button-area {
        display: flex;
        gap: 10px;
    }
    .button-area .btn-leftarea,
    .button-area .btn-rightarea {
        flex: 1 1 0;
    }
    .button-area .btn-leftarea .nf-btn,
    .button-area .btn-rightarea .nf-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
        font-size: 14px;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 10px 8px;
    }
}

@media (max-width: 1280px) {
    .board-toplist li .tit:nth-child(3) {
        text-align: left !important;
    }
}

@media all and (max-width:1400px) {
    .board-toplist > li:has(.form-field.edu01) {
		display: grid;
        grid-template-columns: 75px 1fr 66px 1fr;
        gap: 10px 6px;
        align-items: center;
    }
    .board-toplist > li:has(.form-field.edu01) > *:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        white-space: nowrap;
    }
    .board-toplist > li:has(.form-field.edu01) > *:nth-child(2) {
        grid-column: 2 / 5;
        grid-row: 1;
        display: flex;
        gap: 8px;
        align-items: center;
    }
    .board-toplist > li:has(.form-field.edu01) > *:nth-child(2) select {
        flex: 1 1 0;
        min-width: 80px;
    }
    .board-toplist > li:has(.form-field.edu01) > *:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
        white-space: nowrap;
    }
    .board-toplist > li:has(.form-field.edu01) > *:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
    }
    .board-toplist > li:has(.form-field.edu01) > *:nth-child(5) {
        grid-column: 3;
        grid-row: 2;
        white-space: nowrap;
        text-align: center;
    }
    .board-toplist > li:has(.form-field.edu01) > *:nth-child(6) {
        grid-column: 4;
        grid-row: 2;
    }
    .board-toplist .form-field.edu01 {
        display: flex;
        align-items: center;
    }
    .board-toplist .form-field.edu01 .dropdown-section {
        flex: 1 1 0;
        min-width: 80px;
    }
    .tit {text-align: left !important;}
    .board-toplist .tit {text-align: left !important; margin-bottom: 0px;}
}

.board-linksite li {
    width: 48%;
}
.link-textarea a {
    font-size:  14px;
}
.board-linksite ul {
    width: 100%;
    border-top: 2px #222 solid;
    border-bottom: 1px #eee solid;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    justify-content: space-between;
}
@media (max-width: 1280px) {
    .link-textarea {
        display: flex;
        flex-direction: column;
    }
}
@media all and (max-width:406px){
	.step-arrow {display:none !important;}
	.board-step li.mb10 {flex-wrap: wrap;}
	.board-step li.mb10 span {width: 100%;}
	.step-box {padding: 2px 5px;}
}

@media (max-width: 400px){
	.degree-area {padding: 15px 8px;}
	.degree-area label {font-size:13px;}
}

@media (max-width: 380px){
	.board-toplist .form-field {
		flex-direction: column;
	}
	
	.board-toplist .form-field select, .board-toplist .form-field .dropdown-section, .board-toplist .form-field input{
		width: 100%;
	}
}
/***** 변경 내용 끝 *****/
#privacy-modal{height:600px !important; left:50%;margin-left:auto !important}
#privacy-modal .pop-conts{height:400px !important;padding:0px !important}
.ctimpop ul li{border-bottom:#ddd 1px dashed;padding:15px 10px}
.ctimpop ul li:last-child{border-bottom:none}
.ctimpop div.bbs-view{padding:10px}
.ctimpop ul.modal-content p{width:100%;margin-top:10px}
.ctimpop ul.modal-content a{margin-left:10px}
.ctimpop select.select_basic{margin-bottom:5px}
.stf-info{padding:20px 10px}
.stf-info span{padding-left:20px;display:block}