@charset "UTF-8";

@charset "UTF-8";

/* 필수요소 */
em.special-dot { background-color: #e62a05; vertical-align: top; margin-right: 5px; font-size: 0; width: 5px; height: 5px; position: relative; display: inline-block; border-radius: 5px; top: 5px; }
.btn-primary { background-color: var(--green-500); color: #fff; }
input[type="checkbox"] { accent-color: var(--green-500); }

/* 로그인모달 */
.custum-modal .cutum-modal-dialog .modal-header .close-btn{ border: 0; padding: 0; font-size: 24px; line-height: 1; background-color: #fff0; }
.custum-modal .cutum-modal-dialog .modal-header .close-btn i { font-size: 24px;}
.app-blind		{ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}

.custum-modal.popup-modal .body-contentbox .btnOauth { width : 280px; height: 45px; border: 0; border-radius: 25px; font-size: 16px; font-weight: 600;}
.custum-modal.popup-modal .body-contentbox .btnOauth#kBtnLogin { background: #fae100; }  
.custum-modal.popup-modal .body-contentbox .btnOauth#nBtnLogin { background: #01c13a; }  

/* 회원가입 모달 */
#join-modal .contentbox { margin-bottom: 36px; }
#join-modal .body-contentbox [class*='form-area-box'] .ele-icon-box { border-radius: 999px; }
#join-modal .scrollable-content { width: 100%; height: 180px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; box-sizing: border-box; text-align: center; }
#join-modal .textarea-title { font-size: 15px; font-weight: 600; margin: 5px 0; }
#join-modal .table-box-1 { border-top: 1px solid var(--green-500);}
#join-modal table { position: relative; color: #fff; line-height: 1.5; }
#join-modal table th { vertical-align: middle; font-weight: 600; text-align: center; }
#join-modal table td { padding: 11px 10px 10px; color: #353535; vertical-align: middle; word-break: break-all; word-wrap: break-word; text-align: left; }
#join-modal .agreeBox { display: flex; align-items: center; float: right; margin-top: 5px; }
#join-modal .agreeBox radio { margin: 0 8px; }
#join-modal .agreeBox label { font-size: 14px; margin: 0 4px; }
#join-modal .bottom-btn { text-align: center; margin-top: 30px; }
#join-modal .bottom-btn button { border-radius: 8px; }

/* GIS - 배경지도 선택  */
.card-box-img-txt-list-2.basemap-card>.imgbox>img{ height: 135px; }

/* GIS - 로그인 버튼  */
.map-box .leftbox1 .contentbox .left .box> .bottom-btn {position: absolute; bottom: 20px; left: 0; width: 80px; padding: 8px; text-align: center;}
.map-box .leftbox1 .contentbox .left .box> .bottom-btn a {justify-content: center; align-items: center; display: flex; height: 30px; width: 30px; border-radius: 100%; margin: 0 auto;}
.map-box .leftbox1 .contentbox .left .box> .bottom-btn a#login-btn {background: #fff;}
.map-box .leftbox1 .contentbox .left .box> .bottom-btn a#logout-btn {background: var(--green-15per);}
.map-box .leftbox1 .contentbox .left .box> .bottom-btn div {word-break: break-word; font-size: 12px; margin-top: 10px; line-height:normal; color: var(--gray-500);}

/* GIS - 화면 버튼 */
.separate-button.active {background-color: var(--forest-500); color:#fff;}
.separate-button.active:hover, .separate-button.active.hover {background-color:var(--forest-600);}
.separate-button.active:disabled {background-color:var(--forest-30per);color:rgba(255, 255, 255, 0.60)}

/* GIS > 데이터 다운로드 */
.download-popup {width: 100vw; height: 100vh; background: rgba(0, 0, 0, .3); display: none; position: absolute; z-index: 15000;}
.download-popup.trans {display: block !important;}
.download-popup .step-div { display: none; }
.download-popup .step-div.on { display: block !important; }
.download-popup .step-div h4 { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.download-popup .step-div .downLoadUl { border-bottom: 1px solid #222; border-top: 1px solid #222; }
.download-popup .step-div .downLoadUl li { display: flex; align-items: center; padding: 10px; }
.download-popup .step-div .downLoadUl li+li { border-top: 1px solid #222; }
.download-popup .step-div .downLoadUl li input[type=checkbox] { margin-right: 5px; }
.download-popup .step-div .downLoadUl li label { display: inline-flex; white-space: nowrap;}
.download-popup .step-div .downLoadUl li label:first-child { justify-content: center; }

.download-popup .step-div .capsule-box.progress-box { display: block; }
.download-popup .step-div .capsule-box.progress-box > h3 { margin-bottom: 10px; font-size: medium; }
.download-popup .step-div .capsule-box .progress-container { position: relative; min-height: 30px; }
.download-popup .step-div .capsule-box .progress-container .progress-bar { position: absolute; width: 100%; min-height: 30px; background: var(--green-400); }
.download-popup .step-div .capsule-box .progress-container .progress-text { font-weight: 600; position: absolute; min-height: 30px; display: flex; align-items: center; width: 100%; justify-content: center; }

.modal-wrap .table td, .modal-wrap .table th {white-space: nowrap; text-align: center; font-weight: 400; vertical-align: middle; border: 0; padding: 0.7rem .5rem;}
.modal-wrap .table td .highlight {color: #178EDE;}
.modal-wrap .table thead th {background-color: #000; color: #FFF; font-weight: 600;}
.modal-wrap .table thead th.gray {background-color: #1F1F1F;}
.modal-wrap .table tbody th {font-weight: 600;}
.modal-wrap .table tbody tr:nth-child(odd)  th {background-color: #E5F3FB;}
.modal-wrap .table tbody tr:nth-child(even) th {background-color: #C9E3F5;}
.modal-wrap .table tbody tr:not(:first-child) {border-top: 1px solid #000;}

.privacy.table {  }
.privacy.table>thead>tr>th {font-weight: normal; border: 0; font-size: 16px; text-align: center; color: #fff; background-color: #003964;}
.privacy.table>tbody>tr>td {padding: 15px 5px; text-align: center; border: 0; border-bottom: 1px solid #eee; vertical-align: middle;}

.custom-i-screen-left,
.custom-i-screen-right { width: 21px; height: 21px; }
.custom-i-screen-left { background-image: url(/images/icon/i-screen-left.svg); }
.custom-i-screen-right{ background-image: url(/images/icon/i-screen-right.svg); }
.active .custom-i-screen-left { background-image: url(/images/icon/i-screen-left-on.svg); }
.active .custom-i-screen-right{ background-image: url(/images/icon/i-screen-right-on.svg); }

.view-select-div {display: none;}
.view-select-div.on {display: flex !important;}