:root {
--mypage-ico-url: url('../images/ico_mypage.png') no-repeat 50%; /* CSS �꾩뿭 蹂��� �좎뼵 */
}
body { height: 100vh;}
*{padding: 0; margin: 0; box-sizing: border-box;}
ul, li {list-style: none;}
.sub_wrapper {position: relative; display: block; height: 100%; margin-bottom: 120px;}
.inner { position: relative; width: 1000px; margin: 0 auto; height: 100%;}
.gnb {position: absolute; left: 0; top: 0; display: block; width: 200px; height: 100%;}
.container {position: relative; display: block;}
.page_tit {position: relative; display: block; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #202020;}
.page_tit:first-child {padding-top: 20px;}
.page_tit h2,.page_tit h3 { font-size: 26px; font-weight: 600; text-align: left;}
.area-box + .area-box { margin-top: 32px; }
.tit_wrap { margin-bottom: 12px; color: #0e0790; font-size: 20px; font-weight: 600;}
.user_wrap { position: relative; display: block;}
.user_wrap ul { position: relative; display: flex; flex-direction: row; width: 100%; border:1px solid #084093; border-radius: 8px; overflow: hidden;}
.user_wrap ul li { flex: 1; border-left: 1px solid #DDDDDD;}
.user_wrap ul li:first-child { border-left: none;}
.user_wrap ul li:nth-child(even){ background: #F8F9FD;}
.user_wrap ul li .box_item{ position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 100%; padding: 20px 30px; color: #666666; font-size: 16px; text-align: center; line-height: 1.6;}
.user_wrap ul li .box_item::before{ content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 60%; background: #fff;}
.user_wrap ul li:last-child .box_item::before{ display: none;}
.user_wrap ul li .box_item .item-ico {width: 40px; height: 40px; margin: 0 auto; background: var(--mypage-ico-url); background-size: auto; background-position: 0 0;}
.user_wrap ul li .box_item .item-ico.type_user {background-position-x: 0; background-size: cover;}
.user_wrap ul li .box_item .item-ico.type_api {background-position-x: -40px; background-size: cover;}
.user_wrap ul li .box_item .item-ico.type_park {background-position-x: -80px; background-size: cover;}
.user_wrap ul li .box_item .item-ico.type_sign {background-position-x: -120px; background-size: cover;}
.user_wrap ul li .box_item .tit { color: #084093; font-size: 18px; font-weight: 600;}
.user_wrap ul li .box_item .tit:not(.user_name) { border-bottom: 1px solid #ddd;}
.user_wrap ul li .box_item .tit.user_name { font-size: 24px; }
.user_wrap ul li .box_item span.count { margin-right: 6px; color: #FF7700; font-size: 32px; font-weight: 600;}
.area-edit {position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 15px; background: #F8F9FD; border-radius: 8px;}
.area-edit legend {position: absolute; display: block; top: -1px; left: -1px; width: 1px; height: 1px; font-size: 1px; opacity: 0.01; text-indent: -999px; overflow: hidden; }
.area-edit .tbl-edit {display: inline-block; width: 100%;}
.area-edit .tbl-edit .row { display: flex; flex-direction: row; }
.area-edit .tbl-edit .row .box { position: relative; display: block; float: left; width: 100%;}
.area-edit .tbl-edit .row .box .title { position: relative; display: inline-block; min-width: 70px; margin-right: 20px; color: #1D4290; font-size: 18px; font-family: "default-B"; font-weight: 600; text-align: center; box-sizing: border-box; vertical-align: middle;}
.area-edit .tbl-edit .row .box .td { display: inline-block; width: calc(100% - 8px - 70px - 20px); color: #333; font-size: 16px; font-family: "default"; font-weight: 400; text-align: left; vertical-align: middle;}
input,
select { appearance: none; height: 36px; padding: 0 6px; font-size: 16px; box-sizing: border-box; vertical-align: middle; border: 1px solid #999; border-radius: 4px; background: #fff; outline: 2px solid transparent; transition: outline 0.4s, background 0.4s; background-color: #fff;}
.area-edit .tbl-edit .row .box.col_2_box { width: calc(50% - 20px) !important; }
.area-edit .tbl-edit .row + .row { margin-top: 20px;}
.area-edit .area-btn {display: flex; gap: 6px; }
.area-edit .area-btn a,
.area-edit .area-btn button {position: relative; width: auto; min-width: 120px; height: 36px; padding: 10px 12px; color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: 4px; background-color: #1E54A2;}
.area-edit + .tbl-list {margin-top: 12px;}
.area-edit .tbl-edit .row .box .td .wrap-input {
font-size: 0;
box-sizing: border-box;
}
.area-edit .tbl-edit .row .box .td .wrap-input > input:only-child,
.area-edit .tbl-edit .row .box .td .wrap-input > select:only-child,
.area-edit .tbl-edit .row .box .td .wrap-input > textarea:only-child {
width: 100%;
min-width: 0;
}
.area-edit .tbl-edit .row .box .td .wrap-input > input:not(:only-child),
.area-edit .tbl-edit .row .box .td .wrap-input > select:not(:only-child),
.area-edit .tbl-edit .row .box .td .wrap-input > textarea:not(:only-child) {
width: calc(50% - 2px);
min-width: 0;
}
.area-edit .tbl-edit .row .box .td .wrap-input > input.w-33p,
.area-edit .tbl-edit .row .box .td .wrap-input > select.w-33p,
.area-edit .tbl-edit .row .box .td .wrap-input > textarea.w-33p {
width: calc(33.3% - 2px) !important;
}
.area-edit .tbl-edit .row .box .td .wrap-input label.title {
font-size: calc(1.6rem + 2px);
margin-right: 4px;
}
.area-edit .tbl-edit .row .box .td .wrap-input .unit,
.area-edit .tbl-edit .row .box .td .wrap-input .hyphen {
display: inline-block;
padding: 0 4px 0 4px;
font-size: calc(1.6rem - 2px);
vertical-align: top;
}
.area-edit .tbl-edit .row .box .td .wrap-input .txt {
margin: 0 4px;
font-size: calc(1.6rem - 2px);
}
.area-edit .tbl-edit .row .box .td .wrap-input span {
font-size: 1.6rem;
}
.area-edit .tbl-edit .row .box .td .wrap-input.address input:first-child {
max-width: 100px;
}
.area-edit .tbl-edit .row .box .td .wrap-input.address input:not(:first-child) {
width: calc(100% - 180px - 4px);
}
.area-edit .tbl-edit .row .box .td .wrap-input.tel select,
.area-edit .tbl-edit .row .box .td .wrap-input.tel input {
width: calc((100% - 40px - 38px) / 2);
margin-left: 0;
}
.area-edit .tbl-edit .row .box .td .wrap-input.tel select:first-child,
.area-edit .tbl-edit .row .box .td .wrap-input.tel input:first-child {
width: 40px;
}
table th {height: 30px; padding: 10px; }
table th, table td {word-break: break-all;}
#opn_req_list_tb .opn_req_result {display: none;}
.show_opn_req_result {
background: #1E54A2;
color: #fff;
font-weight: bold;
border: none;
height: 30px;
padding: 0 10px;
border-radius: 5px;
cursor: pointer;
}
/* �섑룊,�섏쭅 �뚯씠釉� */
table {border-collapse: collapse;}
table caption {line-height: 35px; font-weight: bold; color: #094093;}
.horizontal-table {width: 100%; border-top: 2px solid #23458F;}
.horizontal-table tr {border-bottom: 1px solid #ccc;}
.horizontal-table th {min-width: 50px; background: #F8F9FD; vertical-align: middle; font-weight: bold; border-right: 1px solid #ccc;}
.horizontal-table th:last-child {border-right: 0;}
.horizontal-table td {height: 30px; padding: 10px; text-align: center; vertical-align: middle; border-right: 1px solid #ccc;
font-size: 13px; line-height: 25px;
}
.horizontal-table td:last-child {border-right: 0; border-left: 1px solid #ccc;}
.vertical-table {border-top: 2px solid #23458F;}
.vertical-table tr {border-bottom: 1px solid #ccc;}
.vertical-table th {height: 30px; padding: 10px; text-align: center; background: #F8F9FD; vertical-align: middle; font-weight: bold; border-right: 1px solid #ccc;}
.vertical-table th:last-child {border-right: 0;}
.vertical-table td {height: 30px; padding: 10px; text-align: center; vertical-align: middle; border-right: 1px solid #ccc; line-height: 25px;}
.vertical-table td:last-child {border-right: 0; border-left: 1px solid #ccc;}
/* Mobile - Landscape */
@media (min-width: 330px) and (max-width: 500px) {
.inner {position: relative; width: 100%; padding: 10px;}
.page_tit h2,.page_tit h3 {font-size: 20px; font-weight: 900; text-align: left;}
.tit_wrap {margin-bottom: 10px; color: #0e0790; font-size: 17px; font-weight: 900;}
.area-edit {font-size: 13px; gap: 12px; padding: 10px;
position: relative; display: flex; justify-content: space-between; background: #F8F9FD; border-radius: 10px;
}
.area-edit .tbl-edit .row { display: flex; flex-direction: column; }
.area-edit .tbl-edit .row .box { position: relative; display: block; float: left; width: 100%; margin-bottom: 10px;}
.area-edit .tbl-edit .row .box .title {
position: relative; display: inline-block; min-width: 70px; margin-right: 15px;
color: #1D4290; font-size: 15px; font-family: "default-B"; font-weight: 600;
text-align: center; box-sizing: border-box; vertical-align: middle;
}
.area-edit .tbl-edit .row .box .td {
display: inline-block; width: 100%; color: #333; font-size: 15px; font-family: "default"; font-weight: 400;
text-align: left; vertical-align: middle;
}
input,
select { height: 30px; padding: 5px 10px; appearance: none; font-size: 13px; box-sizing: border-box; vertical-align: middle;
border: 1px solid #999; border-radius: 4px; background: #fff; outline: 2px solid transparent;
transition: outline 0.4s, background 0.4s; background-color: #fff;
}
.area-box + .area-box { margin-top: 20px; }
.user_wrap { position: relative; display: block;}
.user_wrap ul {
width: 100%; position: relative; display: flex; flex-direction: row; flex-wrap: wrap;
border:1px solid #084093; border-radius: 8px; overflow: hidden;
}
.user_wrap ul li { flex: none; width: 50%; border-left: 1px solid #DDDDDD;}
.user_wrap ul li:first-child { border-left: none; border-bottom: 1px solid #DDDDDD;}
.user_wrap ul li:nth-child(2), .user_wrap ul li:nth-child(3) { background: #F8F9FD;}
.user_wrap ul li:nth-child(4) {background: none; border-top: 1px solid #DDDDDD;}
.user_wrap ul li .box_item {
width: 100%; height: 100%; padding: 15px;
position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: #666666; font-size: 16px; text-align: center; line-height: 1.6;
}
/* �뚯씠釉� 怨듯넻 */
table th, table td {word-break: keep-all;}
/* �섑룊 �뚯씠釉� */
.horizontal-table {width: 100%; border-top: 2px solid #23458F;}
.horizontal-table tr {border-bottom: 1px solid #ccc;}
.horizontal-table th {background: #F8F9FD; vertical-align: middle; font-size: 12px; font-weight: bold; border-right: 1px solid #ccc;}
.horizontal-table th:last-child {border-right: 0;}
.horizontal-table td {height: 30px; line-height: 25px; padding: 10px; text-align: center;
vertical-align: middle; font-size: 12px; border-right: 1px solid #ccc;
}
.horizontal-table td:last-child {border-right: 0; border-left: 1px solid #ccc;}
.horizontal-table th.date,
.horizontal-table td.date {width: 120px;}
.show_opn_req_result {min-width: 80px; font-size: 13px;}
}
/* Mobile - Portrait & Tablet */
@media (min-width: 501px) and (max-width: 991px) {
.inner {position: relative; width: 100%; padding: 10px;}
.page_tit h2,.page_tit h3 {font-size: 20px; font-weight: 900; text-align: left;}
.tit_wrap {margin-bottom: 10px; color: #0e0790; font-size: 17px; font-weight: 900;}
.area-edit {font-size: 13px; gap: 12px; padding: 10px;
position: relative; display: flex; justify-content: space-between; background: #F8F9FD; border-radius: 10px;
}
.area-edit .tbl-edit .row { display: flex; flex-direction: column; }
.area-edit .tbl-edit .row .box { position: relative; display: block; float: left; width: 100%; margin-bottom: 10px;}
.area-edit .tbl-edit .row .box .title {
position: relative; display: inline-block; min-width: 70px; margin-right: 15px;
color: #1D4290; font-size: 15px; font-family: "default-B"; font-weight: 600;
text-align: center; box-sizing: border-box; vertical-align: middle;
}
.area-edit .tbl-edit .row .box .td {
display: inline-block; width: 100%; color: #333; font-size: 15px; font-family: "default"; font-weight: 400;
text-align: left; vertical-align: middle;
}
input,
select { height: 30px; padding: 5px 10px; appearance: none; font-size: 13px; box-sizing: border-box; vertical-align: middle;
border: 1px solid #999; border-radius: 4px; background: #fff; outline: 2px solid transparent;
transition: outline 0.4s, background 0.4s; background-color: #fff;
}
.area-box + .area-box { margin-top: 20px; }
.user_wrap { position: relative; display: block;}
.user_wrap ul {
width: 100%; position: relative; display: flex; flex-direction: row; flex-wrap: wrap;
border:1px solid #084093; border-radius: 8px; overflow: hidden;
}
.user_wrap ul li { flex: none; width: 50%; border-left: 1px solid #DDDDDD;}
.user_wrap ul li:first-child { border-left: none; border-bottom: 1px solid #DDDDDD;}
.user_wrap ul li:nth-child(2), .user_wrap ul li:nth-child(3) { background: #F8F9FD;}
.user_wrap ul li:nth-child(4) {background: none; border-top: 1px solid #DDDDDD;}
.user_wrap ul li .box_item {
width: 100%; height: 100%; padding: 15px;
position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; color: #666666; font-size: 16px; text-align: center; line-height: 1.6;
}
/* �뚯씠釉� 怨듯넻 */
table th, table td {word-break: keep-all;}
/* �섑룊 �뚯씠釉� */
.horizontal-table {width: 100%; border-top: 2px solid #23458F;}
.horizontal-table tr {border-bottom: 1px solid #ccc;}
.horizontal-table th {background: #F8F9FD; vertical-align: middle; font-size: 12px; font-weight: bold; border-right: 1px solid #ccc;}
.horizontal-table th:last-child {border-right: 0;}
.horizontal-table td {height: 30px; line-height: 25px; padding: 10px; text-align: center;
vertical-align: middle; font-size: 12px; border-right: 1px solid #ccc;
}
.horizontal-table td:last-child {border-right: 0; border-left: 1px solid #ccc;}
.horizontal-table th.date,
.horizontal-table td.date {width: 120px;}
.show_opn_req_result {min-width: 80px; font-size: 13px;}
}