@import url(fonts.css);
/*-------------------------------------------------
Author : jwshin
Create date : 2024-05-08
Version : v1.0
-------------------------------------------------*/

/* 濡쒓렇�씤 �럹�씠吏� */
.login-bg {width: 100%; height: 100vh; background: url(../images/main/bg_login.png) no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center;}
.login-wrap {width: 480px; padding: 60px; background: #fff; border-radius: 12px; box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.08);}
.login-wrap.noutil {height: 480px;}
.login-wrap .login-logo {display: block; width: 100%; text-align: center; margin-bottom: 60px;}
.login-wrap>label {display: flex; flex-direction: column; color: #333; font-weight: 500; font-size: 14px;}
.login-wrap>label>input {height: 46px; font-size: 15px; margin-top: 8px; border: 1px solid #c5cbda; border-radius: 4px; padding: 10px 18px; color: #343a40;}
.login-wrap>label>input:focus {outline: #4763c2 2px solid;}
.login-wrap>label>input:focus + label {color: #4763c2;}
.login-ut {color: #818997; display: flex; justify-content: space-between; align-items: center; font-size: 13px;}
.login-ut .rm-id {margin-right: 8px;}
.find-pw {text-decoration: underline;}
.find-pw:hover {color: #333;}
.login-button {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 4px; background: linear-gradient(90deg, rgba(55,111,220,1) 0%, rgba(85,110,230,1) 100%); background-position: 0%; color: #fff; font-weight: 600; margin-top: 54px; transition: all .5s;}
.login-button::after {position: absolute; opacity: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; content: '로그인'; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, rgb(92, 118, 248) 0%, rgb(62, 123, 246) 100%); transition: all .3s;}
.login-button:hover::after {opacity: 1;}




/**************** 최성윤 추가 ****************/

/* 가운데 정렬 */
.center {text-align: center;}

/* 회원가입; 최성윤 추가; */
.signup-wrap {width: 640px; padding: 60px; background: #fff; border-radius: 12px; box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.08);}
.signup-wrap.noutil {height: 480px;}
.signup-wrap .login-logo {display: block; width: 100%; text-align: center; margin-bottom: 60px;}
.signup-wrap>label {display: flex; flex-direction: column; color: #333; font-weight: 500; font-size: 14px; margin-bottom: 16px;} /* 마진 추가 */
.signup-wrap>label>input {height: 46px; font-size: 15px; margin-top: 8px; border: 1px solid #c5cbda; border-radius: 4px; padding: 10px 18px; color: #343a40; width: 100%;} /* width 추가 */
.signup-wrap>label>input:focus {outline: #4763c2 2px solid;}
.signup-wrap>label>input:focus + label {color: #4763c2;}

/* 입력 관련 최성윤 추가 */
.tel-input-group, .email-input-group {display: flex; align-items: center; margin-top: 8px;}
.tel-select, .domain-select {height: 40px; width: 70px; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; background-color: white;}
.tel-dash, .at-symbol {margin: 0 8px; font-weight: bold;}
.tel-input {width: 70px; height: 40px; border: 1px solid #ddd; border-radius: 4px; padding: 0 10px; text-align: center;}
.domain-select {height: 40px; width: 100px; border: 1px solid #ddd; border-radius: 4px; padding: 0 8px; background-color: white;}
.email-id, .email-domain {height: 40px;}
/* 숨김 필드 */
input[name="tel"], input[name="hp"], input[name="email"] {display: none;}

/* page/list: 삭제 버튼 비활성화 */
.btn-redline:disabled {background-color: #d9d9d9; color: #a6a6a6; border: 1px solid #d9d9d9; cursor: default;}

.btn-del-sm {font-size: 0.8em; padding: 2px 6px; margin-left: 5px; height: 22px; line-height: 18px; background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 3px; color: #666;}

.btn-del-sm:hover {background-color: #e0e0e0; color: #111;}


.att-file li {display: flex; align-items: center; margin-bottom: 5px;}

.att-file .file-link {flex: 1;}

/* 첨부파일 없음 메시지 스타일 */
.no-file-item {
	color: #888;
}

.file-name {
	padding: 2px 0;
	display: inline-block;
}

/* 회원가입 활비활 표시용 (회원가입 클래스: 로그인 버튼)*/
.login-button:disabled {background-color: #cccccc; color: #ffffff; opacity: 0.7;}

/**************** 최성윤 추가 ****************/






.signup-button {border: 1px solid #466fe1; display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 4px; color: #466fe1; font-weight: 600; margin-top: 14px; transition: all .3s;}
.signup-button:hover {background: #466fe1; color: #fff; transition: all .3s;}

/* �젅�봽�듃 硫붾돱 */
#left-menu {position: relative; width: 28rem; padding: 4rem 1.6rem; display: flex; flex-direction: column; background: #2a3042; min-height: 100vh;}
#logo {padding: 0 2.4rem;}
#gnb {margin: 4rem 0;}
#setmenu {position: absolute; left: 3.4rem; bottom: 4rem; color: #6A7187; font-weight: 500; font-size: 13px; display: flex;}
#setmenu .logout {display: flex; align-items: center;}
#setmenu>a:hover {color: #BCC4DD;}
#setmenu>a>img {margin-right: 10px;}
#setmenu .setting {position: relative; padding-left: 42px; display: flex; align-items: center;}
#setmenu .setting:before {position: absolute; left: 21px; top: 2px; display: block; height: 16px; width: 1px; background: #6a7187; content: '';}
.one-depth .d1 {padding: 2px 0;}
.one-depth .d1>a {color: #BCC4DD; position: relative; width: 248px; height: 52px; padding: 0 20px 0 54px; font-size: 1.6rem; font-weight: 500; display: flex; align-items: center;}
.one-depth .d1>a:before {position: absolute; left: 20px; top: 16px; content: ''; display: block; width: 20px; height: 20px;}
.one-depth .d1:first-child>a:before {background: url(../images/nav/side01-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(2)>a:before {background: url(../images/nav/side02-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(3)>a:before {background: url(../images/nav/side03-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(4)>a:before {background: url(../images/nav/side04-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(5)>a:before {background: url(../images/nav/side05-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(6)>a:before {background: url(../images/nav/side06-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(7)>a:before {background: url(../images/nav/side07-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(8)>a:before {background: url(../images/nav/side08-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1:nth-child(9)>a:before {background: url(../images/nav/side09-normal.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:first-child>a:before {background: url(../images/nav/side01-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(2)>a:before {background: url(../images/nav/side02-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(3)>a:before {background: url(../images/nav/side03-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(4)>a:before {background: url(../images/nav/side04-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(5)>a:before {background: url(../images/nav/side05-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(6)>a:before {background: url(../images/nav/side06-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(7)>a:before {background: url(../images/nav/side07-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(8)>a:before {background: url(../images/nav/side08-active.svg) no-repeat; background-size: contain;}
.one-depth .d1.active:nth-child(9)>a:before {background: url(../images/nav/side09-active.svg) no-repeat; background-size: contain;}
.one-depth .d1>a:after {position: absolute; right: 20px; top: 16px; content: ''; display: block; width: 20px; height: 20px; background: url(../images/main/ic_arrowdown.svg) no-repeat;}
.one-depth .d1.active>a {color: #fff; padding: 0 14px 0 54px; border-radius: 8px; background: linear-gradient(90deg, rgba(85,110,230,1) 0%, rgba(55,171,236,1) 100%);}
.one-depth .d1.active>a:after {position: absolute; right: 20px; top: 16px; content: ''; display: block; width: 20px; height: 20px; background: url(../images/main/ic_arrowup.svg) no-repeat;}
.two-depth {padding: 11px 0 16px 0;}
.two-depth li {padding: 1px 0;}
.two-depth li a {color: #BCC4DD; width: 100%; display: block; height: 35px; line-height: 35px; padding: 0 20px 0 56px; border-radius: 6px;}
.two-depth li a:hover {background: #242a3a; color: #fff;}
.two-depth li.focus a {color: #fff; background: #242a3a;}

/* 硫붿씤 而⑦뀗痢� */
#main-wrap {background: #f0f2f8; padding: 4rem; flex: 1;}
.main-title {font-weight: 600; color: #79829C; font-size: 15px;}
.main-sub-title {font-weight: 600; color: #343A40; font-size: 18px; line-height: 18px; padding-top: 2px; font-family: 'GmarketSans', 'Pretendard','Noto Sans KR','Apple SD Gothic Neo','留묒� 怨좊뵓','Malgun Gothic','�룍��','Dotum','援대┝','Gulim','AppleGothic','Sans-serif';}
.main-content-wrap {width: 100%; min-width: 1240px; min-height: 960px; height: calc(100vh - 228px); margin-top: 24px; display: flex;}
.main-content-left {display: flex; flex-direction: column; margin-right: 24px; width: 60%;}
.main-content-right {display: flex; flex-direction: column; width: 40%;}
.main-content-left>div, .main-content-right>div {position: relative;}
.left-cont-01 {display: flex; gap: 15px;}
.left-cont-01>a {position: relative; flex: 1; padding: 27px 24px; background: #4876EB url(../images/main/bg_stat.svg) no-repeat right 50% bottom; border-radius: 8px;}
.left-cont-01>a span {font-size: 13px; font-weight: 600; color: #B6C8F7;}
.left-cont-01>a p {font-size: 21px; font-weight: 600; color: #fff; margin-top: 6px;}
.left-cont-01>a:after {position: absolute; display: block; content: ''; right: 38px; top: 26.5px; width: 50px; height: 50px;}
.left-cont-01>a.stat-01:after {background: url(../images/main/st01.svg) no-repeat; background-size: contain;}
.left-cont-01>a.stat-02:after {background: url(../images/main/st02.svg) no-repeat; background-size: contain;}
.left-cont-01>a.stat-03:after {background: url(../images/main/st03.svg) no-repeat; background-size: contain;}
.left-cont-02 {background: #fff; color: #343a40; border-radius: 8px; display: flex; flex-direction: column; flex: 1;}
.left-cont-02 .map-header {display: flex; align-items: center; justify-content: space-between; padding: 15px 24px;}
.left-cont-02 .map-select {display: flex;}
.left-cont-02 .map-select label {display: flex; align-items: center; justify-content: center; cursor: pointer;}
.left-cont-02 .map-select label input[type="radio"] {display: none;}
.left-cont-02 .map-select input[type=radio] + span {position: relative; background: #fff; padding: 9px 12px 9px 40px; border-radius: 4px; font-weight: 500; font-size: 14px; color: #525B89;}
.left-cont-02 .map-select input[type=radio]:checked + span {background: #EDEFF5; color: #466FE1; font-weight: 600;}
.left-cont-02 .map-select #mapOt1 + span {padding: 9px 24px;}
.left-cont-02 .map-select #mapOt1:checked + span {background: #5E667E; color: #fff;}
.left-cont-02 .map-select #mapOt2 + span:after {position: absolute; display: block; content: ''; background: url(../images/main/marker01-s.svg) no-repeat; background-size: cover; width: 24px; height: 24px; left: 12px; top: 5px;}
.left-cont-02 .map-select #mapOt3 + span:after {position: absolute; display: block; content: ''; background: url(../images/main/marker02-s.svg) no-repeat; background-size: cover; width: 24px; height: 24px; left: 12px; top: 5px;}
.left-cont-02 .map-select #mapOt4 + span:after {position: absolute; display: block; content: ''; background: url(../images/main/marker03-s.svg) no-repeat; background-size: cover; width: 24px; height: 24px; left: 12px; top: 5px;}
.map-body {position: relative; margin: 0 10px 10px; background: #f8f8f8; height: 100%; /* overflow-y: auto; */}
.map-body iframe {width:100% !important; height:100% !important; border: 1px solid transparent;}
.map-info {z-index: 10; width: 334px; position: absolute; display: flex; flex-direction: column; bottom: 0; right: 0; margin: 20px; background: #fff; border-radius: 8px; padding: 30px; filter: drop-shadow(0 4px 20px rgba(62, 64, 72, 15%));}
.map-info>span {color: #51C59A; font-size: 13px; font-weight: 500;}
.map-info-title {display: flex; justify-content: space-between; align-items: center;}
.map-info-title strong {font-size: 16px; font-weight: 600;}
.map-info-title span {display: inline-block; color: #466FE1; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 4px; background: #EDEFF5;}
.map-info-text {display: flex; flex-direction: column; gap: 16px; margin: 18px 0 26px;}
.map-info-text li {display: flex; align-items: center; justify-content: space-between;}
.map-info-text li span {font-size: 14px;}
.map-info-text li em {font-size: 14px; font-weight: 500; color: #74788D;}
.map-info .detail-link {height: 44px; align-items: center; display: flex; justify-content: center; padding: 14px 28px; color: #466FE1; font-size: 14px; font-weight: 600; border-radius: 4px; border: 1px solid #466FE1; background: #fff; transition: all .3s;}
.map-info .detail-link:hover {background: #466FE1; color: #fff;}
.left-cont-03 {display: flex; align-items: center; gap: 50px; background: #fff; border-radius: 8px; min-height: 151px; padding: 30px;}
.left-cont-03 .main-notice {display: flex; flex-direction: column;}
.left-cont-03 .main-notice-title {font-size: 16px; font-weight: bold; color: #1C1D1F;}
.left-cont-03 .main-notice-text {font-size: 15px; font-weight: 400; color: #666; margin-top: 10px; line-height: 20px; flex: 1;}
.left-cont-03 .main-notice-date {font-size: 13px; font-weight: 400; color: #A5ACB7; margin-top: 15px;}
.left-cont-03 .main-notice:hover .main-notice-text, .left-cont-03 .main-notice:hover .main-notice-title {text-decoration: underline;}
.left-cont-03 .more-view {position: absolute; width: 28px; height: 28px; display: block; background: url(../images/main/ic_moreview.svg) no-repeat; right: 28px; top: 20px;}
.right-cont {background: #fff; color: #343a40; border-radius: 8px; padding: 24px; height: calc((100% - 24px) / 2); display: flex; flex-direction: column; flex: 1; gap: 15px;}
.right-cont .rc-header {display: flex; align-items: center; justify-content: space-between; padding-right: 42px;}
.right-cont .month-select {position: relative; height: 36px; display: flex; align-items: center;}
.right-cont .month-select select {cursor: pointer; padding: 4px 20px 4px 8px; font-size: 14px; background: none; border-radius: 4px; width: 8rem; border: 1px solid #E2E6EB; height: 26px;}
.right-cont .ic_arrow {position: absolute; right: 8px; top: 12px; display: block; width: 14px; height: 14px; background: url(../images/main/ic_select-s.svg) no-repeat; background-size: contain;}
.right-cont .month-select select:focus + .ic_arrow {transform: rotate(-180deg);}
.right-cont .rc-body {flex: 1; align-self: stretch; display: flex; align-items: center;}
.right-cont {background: #fff; color: #343a40; border-radius: 8px; align-self: stretch; display: flex; flex-direction: column;}
.prd-select {display: flex; height: 36px; align-items: center; justify-content: flex-start;}
.prd-select label {cursor: pointer;}
.prd-select label input[type=radio] {display: none;}
.prd-select input[type=radio] + span {position: relative; background: #fff; padding: 9px 20px; border-radius: 4px; font-weight: 500; font-size: 15px; color: #525B89;}
.prd-select input[type=radio]:checked + span {background: #5E667E; color: #fff;}
.right-cont .more-view {position: absolute; width: 28px; height: 28px; display: block; background: url(../images/main/ic_moreview.svg) no-repeat; right: 28px; top: 28px;}

/* 지도 정보 팝업 닫기 버튼 */
.map-info-close {position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background: #f5f5f5; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; color: #666; transition: all 0.2s ease;}
.map-info-close:hover {background: #e8e8e8; color: #333;}