body {max-width: 450px;background: #fff; margin: 0 auto; overflow-x: hidden; position: relative; min-height: 100vh}

@media screen and (min-width: 450px) {
    body {
        box-shadow: 0 0 1000px 20px #51525420;
    }
}
:hover {transition: all 0.2s ease}
* {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.draggable {
-webkit-user-select:all;
-moz-user-select:all;
-ms-user-select:all;
user-select:all
}


/**/
header {  max-width: 450px; position: fixed;left: 50%; transform: translateX(-50%);top: 0;width: 100%;background: #F8F9FB;z-index: 990; padding: 20px 15px;  padding-top:  calc(env(safe-area-inset-top) + 20px );display: flex}
header.banner {box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1); padding: 0px;  padding-top:  calc(env(safe-area-inset-top) + 0px )}
header > div {   width: 50%}
header > div:nth-child(2) { justify-content: flex-end}
header .logo img{height: 20px; margin-right: 10px}
header .icon {  display: flex; align-items: center}
header .icon  {font-size: 18px; color: #000;}
header .icon *:not(:last-child) {margin-right: 15px}
header .bell {position: relative}
header .bell.on:after{   content:'';display:inline-block;width:10px;height:10px; background: #fd7317;   border: 2px solid #fff; border-radius:50px; margin:0px;vertical-align:middle;transform:rotate(45deg);position: absolute;right: -1px;top: -3px;}

.side-menu {position: absolute; top: 0;right: -100%;width: 100%;max-width: 600px;height: 100%;background-color: #444;color: white;padding: 20px;transition: right 0.3s ease;z-index: 1000;}
.side-menu.active {opacity:1;box-shadow: -2px 0 25px rgba(0, 0, 0, 0.15);right: 0;}
.side-menu #closeMenu {background: #fff0; padding: 0; color: #fff; font-size: 25px; width: 100%; text-align: right}
.side-menu #gnb ul {color: #fff;font-size: 1.3em;line-height: 2em;display: grid;grid-template-columns: repeat(1, 1fr);}
.side-menu #gnb h6 {color: #fff;font-size: 1em;line-height: 2em;font-weight: 800;opacity: 0.75;}
.side-menu #gnb  hr {display: block !important;border: 0;border-top: 1px solid #ffffff80;}
.side-menu #gnb .box-white { border-radius: 10px; padding: 15px; box-shadow: 0 3px 6px #FFFFFF16;  margin-bottom: 10px; color: #000; margin-top: 25px}
.side-menu #gnb .box-white { font-weight: 800;}
.side-menu #gnb .box-white p span { font-size:0.8em;font-weight: 400; margin-left: 5px }
.side-menu #gnb .box-line { border-radius: 10px; padding: 15px; box-shadow: 0 3px 6px #FFFFFF16;  margin-bottom: 10px; color: #fff; background: #fff0 }
.side-menu #gnb .box-line { font-weight: 800;}
.side-menu #gnb .box-line p span { font-size:0.8em;font-weight: 400; margin-left: 5px }
.side-menu #gnb .profile {width: 25px; height: 25px; border-radius: 50px; object-fit: cover}
.side-menu #gnb ul li a {font-size: 0.9em;  color: #fff;  padding: 5px 0;    display: flex;    align-items: center;    grid-gap: 10px; position: relative}
.side-menu #gnb ul li a:after {    content:'';    display:inline-block;    width:6px;    height:6px;    margin:0px 12px auto auto;    vertical-align:middle;
    border-right:1px solid #fff;    border-top:1px solid #fff;    transform:rotate(45deg);    position: absolute;    right: 5px;    top: 25px;}
.side-menu #gnb ul li a > i{ font-size: 0.8em ; opacity: 0.7;   margin: 0;    width: 20px;    height: 20px;    display: flex;    justify-content: center;    align-items: center;}
.side-menu #copy{text-align: center;opacity: 0.7;position: absolute;width: 100%;right: 0;bottom: 20px;}
.side-menu #copy a { font-size: 10px;color: #fff;}
.side-menu #copy a:not(:last-child):after{content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background-color: rgba(239, 239, 239, 0.13); margin: 0 6px 1px}


.overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: none;z-index: 999;}
.overlay.active {display: block;}

footer {max-width: 450px;position: fixed;bottom: 0;left: 50%; transform: translateX(-50%);width: 100%;z-index: 990;padding: 0px 0 calc(env(safe-area-inset-bottom) + 0px);
    background: linear-gradient(to bottom, #fff0 35px, #fff 35px);background-position: top center;background-size: cover;height: calc(env(safe-area-inset-bottom) + 100px);   }
footer > ul {padding: 0px 0 calc(env(safe-area-inset-bottom) + 0px);  height: calc( 100% - 25px ); display: flex;bottom: 0;position: absolute;width: 100%; }
footer > ul > li { width: 20%; text-align: center }
footer > ul > li:not(.home) {display: flex;align-items: center;justify-content: center; padding-top: 15px}
footer > ul > li i{font-size: 18px; color: #6E6E6E}
footer > ul > li.on i{color: #000}
footer > ul > li p { font-size: 10px;color: #898989}
footer > ul > li.on p { color: #000}
footer > ul > li p span{ display: inline}
footer .home i {padding: 17px;border-radius: 50px;background: #fff; color:#fd7317; box-shadow: 0 0 15px #00000015 }
footer .home.on i {background: #fd7317;color: #fff}


#ft{background:#f9f9f9;padding:30px 20px;font-size:10px;color:#555;text-align:center;line-height:1.6;}
#ft .ft_wrap{max-width:800px;margin:0 auto;}
#ft .company{font-size:12px;font-weight:700;color:#222;margin-bottom:5px;}
#ft .info{font-size:10px;margin-bottom:4px;}
#ft .addr{font-size:10px;margin-bottom:8px;}
#ft .copy{font-size:10px;color:#888;}


#wrapper {max-width: 600px; padding-top: calc(env(safe-area-inset-top) + 68px ); padding-bottom:  calc(env(safe-area-inset-bottom) + 80px);margin: 0 auto; background: #F8F9FB; min-height: 100vh}
body:has(.mb-wrap .login) #wrapper {background: #fff;padding-top: calc(env(safe-area-inset-top) + 0px );}
body:has(.mb-wrap .signup) #wrapper {background: #fff;padding-top: calc(env(safe-area-inset-top) + 0px );}
.read-status .dot {display: inline-block;width: 4px;height: 4px;margin-bottom: 4px;border-radius: 50%;background: #fd7317;vertical-align: top;}
.read-dot {display: inline-block;width: 4px;height: 4px;margin-bottom: 4px;border-radius: 50%;background: #fd7317;vertical-align: top; margin-right: 1px}


main > .login {padding: 50px 15px; line-height: 1.5em}
main > .login h2 {line-height: 1.5em; font-size: 25px; font-weight: 600}
main > .system {display: grid; grid-template-columns: repeat(2, 1fr)}
main > .system:not(:has(a:nth-of-type(3))) a {height: 35vh}
main > .system:has(a:nth-of-type(3)) a {height: 180px}
main > .system:has(a:nth-of-type(3)) a img{height: 60px; margin-top: auto; margin-right: 0px; margin-bottom: 0px;}
main > .system a{position: relative; padding: 20px;display: flex; align-items: flex-end; justify-content: center; gap: 10px; flex-direction: column; width: 100%}
main > .system a img { margin-right: -10px; margin-bottom: -10px; margin-top: auto}
main > .system a p { font-size: 20px; font-weight: 600; line-height: 30px; width: 100%; text-align: left; letter-spacing: -1px}
main > .system a p i { font-size: 15px; position: relative; bottom: 2px}
main > .system a.orange { background: #fd7317}
main > .system a.orange p{ color: #fff}
main > .system a.white { background: #fff}
main > .system a.white p{ color: #000}
main > .system a.black { background: #000}
main > .system a.black p{ color: #fff}
main > .system a:nth-of-type(3) {grid-column: 1 / 3}
main > .system a b{;display: inline-flex;color: #fff;position: absolute; font-size: 10px; font-weight: 800;background: #fd7317; padding: 5px 7px; border-radius: 50px; right: 8px; top: 8px; height: fit-content; line-height: 10px }
main > .system a.orange b{background: #fff;color: #fd7317;}
main > .system a.black b{background: #fff;color: #fd7317;}
main > .system:has(a:nth-of-type(4)) a:nth-of-type(3) {grid-column: 1 / 2}
main > .menu {padding: 15px; display: flex; align-items: center; justify-content: center; gap: 10px}
main > .menu a {position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column;background: #ffffff;border-radius: 20px;border-style: solid;border-color: #e5e5e5;border-width: 1px;padding: 15px 10px 15px 10px;flex: 1;height: 118px;position: relative;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);overflow: hidden;}
main > .menu a p{ font-size: 15px; font-weight: 800 }
main > .menu a b{display: inline-flex;color: #fff;position: absolute; font-size: 10px; font-weight: 800;background: #fd7317; padding: 5px 7px; border-radius: 50px; right: 5px; top: 5px; height: fit-content; line-height: 10px }
main .swiper {width: 100%;height: 140px; padding: 0 15px}
main .swiper-slide {background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 20px; overflow: hidden}
main .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;object-position: left;}
main .swiper .swiper-pagination-fraction {width: fit-content; left: 40px; bottom: 20px;background: #f8f8f8; border-radius: 50px; padding: 0px 10px;font-size: 10px; font-weight: 800}



@media screen and (max-width: 360px) {

    main > .system:has(a:nth-of-type(3)) a {height: 100%}
}
#work.list form {padding: 15px}
#work.list form .flex {margin-top: 10px; color: #6E6E6E}
#work.list form .flex input:not(:checked) {background: #fff0!important;border: 1px solid #6e6e6e}
#work.list form .flex input:not(:checked):after {border-color: #6e6e6e}
#work.list ul.list {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column;margin-bottom: 90px}
#work.list ul.list li {width: 100%}
#work.list ul.list li a {width: 100%;display: flex; align-items: flex-start; justify-content: center; gap: 5px; flex-direction: column; background: #fff; position: relative; padding: 20px}
#work.list ul.list li a h6 {font-size: 15px;font-weight: 400;}
#work.list ul.list li a h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#work.list ul.list li a p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#work.list ul.list li a p:not(:first-of-type) {margin-top: -8px;}
#work.list ul.list li a p span {color: #ff7417;}
#work.list ul.list li .done {position: absolute; bottom:20px; right:20px;background: #f0f2f4;border-radius: 100px;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 68px;height: 68px;overflow: hidden;aspect-ratio: 1;color: #000000;text-align: center;font-size: 15px;font-weight: 700;}
#work.list ul.list li a > span.count {transition: all .3s ease;position: absolute; bottom:20px; right:20px;background: #ff7417;border-radius: 100px;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 68px;height: 68px;overflow: hidden;aspect-ratio: 1;color: #ffffff;text-align: center;font-size: 18px;font-weight: 700;}
#work.list ul.list li a > span.count.done {background: #006FFD;color: #fff;}
#work.list ul.list li a > span.count.end {background: #F8F9FB;color: #6E6E6E;}
#work.list ul.list li a > span.count:hover  {background: #d95f0e;color: #fff;}
#work.list ul.list li a > span.count.done:hover {background: #0059c9;color: #fff;}
#work.list ul.list li a > span.count.end:hover {background: #e5e3e3;color: #6E6E6E;}
#work.list .btn-large2 {max-width: 420px;position: fixed;left: 50%;transform: translateX(-50%);width: calc( 100% - 30px );z-index: 990;bottom: calc(env(safe-area-inset-bottom) + 90px);}

body:has(#work.view) header {background: #fff; }
#work.view {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#work.view > div {width: 100%;background: #fff; padding: 20px 15px}
#work.view div.info-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#work.view div.info-box h6 {font-size: 15px;font-weight: 400;}
#work.view div.info-box h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#work.view div.info-box p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#work.view div.info-box p span {color: #ff7417;}
#work.view div.detail-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#work.view div.detail-box h6 {font-size: 15px;font-weight: 700;}
#work.view div.detail-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#work.view div.detail-box p span {color: #00000050;min-width: 65px}
#work.view div.map-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#work.view div.map-box h6 {font-size: 15px;font-weight: 700;}
#work.view div.map-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#work.view div.map-box p span {color: #00000050;min-width: 65px}
#work.view div.map-box .map {width: 100%; border-radius: 20px; overflow: hidden}
#work.view div.map-box .root_daum_roughmap .cont {display: none}


body:has(#work.preview) header {background: #fff; }
#work.preview {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column; padding-bottom: 120px}
#work.preview > div {width: 100%;background: #fff; padding: 20px 15px}
#work.preview div.info-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#work.preview div.info-box h6 {font-size: 15px;font-weight: 400;}
#work.preview div.info-box h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#work.preview div.info-box p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#work.preview div.info-box p span {color: #ff7417;}
#work.preview div.detail-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#work.preview div.detail-box h6 {font-size: 15px;font-weight: 700;}
#work.preview div.detail-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#work.preview div.detail-box p span {color: #00000050;min-width: 65px}
#work.preview div.map-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#work.preview div.map-box h6 {font-size: 15px;font-weight: 700;}
#work.preview div.map-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#work.preview div.map-box p span {color: #00000050;min-width: 65px}
#work.preview div.map-box .map {width: 100%; border-radius: 20px; overflow: hidden}
#work.preview div.map-box .root_daum_roughmap .cont {display: none}
#work.preview div.button-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column;max-width: 450px;position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;z-index: 990;padding: 0px 15px calc(env(safe-area-inset-bottom) + 15px);background-position: top center;background-size: cover;height: fit-content;}


#work .form {padding:0 15px 25px;}
#work .form h1{padding: 15px 0;font-size: 30px;color: #000;line-height: 1.2em;}
#work .form .box10{border-radius: 5px;}
#work .form .box10 .input-wrap{background: #fff;}
#work .form .input-wrap{background: #fff;}
#work .form .flex button{align-self: stretch;flex: 1;height: auto;}
#work .form div.form-wrap{display: flex;flex-direction: column;gap: 10px;}


#vehicle.list form {padding: 15px}
#vehicle.list form .flex {margin-top: 10px; color: #6E6E6E}
#vehicle.list form .flex input:not(:checked) {background: #fff0!important;border: 1px solid #6e6e6e}
#vehicle.list form .flex input:not(:checked):after {border-color: #6e6e6e}
#vehicle.list ul.list {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column; margin-bottom: 90px}
#vehicle.list ul.list li {width: 100%}
#vehicle.list ul.list li a {width: 100%;display: flex; align-items: flex-start; justify-content: center; gap: 5px; flex-direction: column; background: #fff; position: relative; padding: 20px}
#vehicle.list ul.list li a h6 {font-size: 15px;font-weight: 400;}
#vehicle.list ul.list li a h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#vehicle.list ul.list li a p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#vehicle.list ul.list li a p:not(:first-of-type) {margin-top: -8px;}
#vehicle.list ul.list li a p span {color: #ff7417;}
#vehicle.list ul.list li .done {position: absolute; bottom:20px; right:20px;background: #f0f2f4;border-radius: 100px;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 68px;height: 68px;overflow: hidden;aspect-ratio: 1;color: #000000;text-align: center;font-size: 15px;font-weight: 700;}
#vehicle.list ul.list li a > span.count {transition: all .3s ease;position: absolute; bottom:20px; right:20px;background: #ff7417;border-radius: 100px;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 68px;height: 68px;overflow: hidden;aspect-ratio: 1;color: #ffffff;text-align: center;font-size: 18px;font-weight: 700;}
#vehicle.list ul.list li a > span.count.done {background: #006FFD;color: #fff;}
#vehicle.list ul.list li a > span.count.end {background: #F8F9FB;color: #6E6E6E;}
#vehicle.list ul.list li a > span.count:hover  {background: #d95f0e;color: #fff;}
#vehicle.list ul.list li a > span.count.done:hover {background: #0059c9;color: #fff;}
#vehicle.list ul.list li a > span.count.end:hover {background: #e5e3e3;color: #6E6E6E;}
#vehicle.list .btn-large2 {max-width: 420px;position: fixed;left: 50%;transform: translateX(-50%);width: calc( 100% - 30px );z-index: 990;bottom: calc(env(safe-area-inset-bottom) + 90px);}

body:has(#vehicle.view) header {background: #fff; }
#vehicle.view {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#vehicle.view > div {width: 100%;background: #fff; padding: 20px 15px}
#vehicle.view div.info-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.view div.info-box h6 {font-size: 15px;font-weight: 400;}
#vehicle.view div.info-box h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#vehicle.view div.info-box p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#vehicle.view div.info-box p span {color: #ff7417;}
#vehicle.view div.vehicle-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.view div.vehicle-box h6 {font-size: 15px;font-weight: 700;}
#vehicle.view div.vehicle-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#vehicle.view div.vehicle-box p span {color: #00000050;min-width: 65px}
#vehicle.view div.detail-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.view div.detail-box h6 {font-size: 15px;font-weight: 700;}
#vehicle.view div.detail-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#vehicle.view div.detail-box p span {color: #00000050;min-width: 65px}
#vehicle.view div.map-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.view div.map-box h6 {font-size: 15px;font-weight: 700;}
#vehicle.view div.map-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#vehicle.view div.map-box p span {color: #00000050;min-width: 65px}
#vehicle.view div.map-box .map {width: 100%; border-radius: 20px; overflow: hidden}
#vehicle.view div.map-box .root_daum_roughmap .cont {display: none}

body:has(#vehicle.preview) header {background: #fff; }
#vehicle.preview {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column; padding-bottom: 120px}
#vehicle.preview > div {width: 100%;background: #fff; padding: 20px 15px}
#vehicle.preview div.info-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.preview div.info-box h6 {font-size: 15px;font-weight: 400;}
#vehicle.preview div.info-box h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#vehicle.preview div.info-box p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#vehicle.preview div.info-box p span {color: #ff7417;}
#vehicle.preview div.vehicle-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.preview div.vehicle-box h6 {font-size: 15px;font-weight: 700;}
#vehicle.preview div.vehicle-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#vehicle.preview div.vehicle-box p span {color: #00000050;min-width: 65px}
#vehicle.preview div.detail-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.preview div.detail-box h6 {font-size: 15px;font-weight: 700;}
#vehicle.preview div.detail-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#vehicle.preview div.detail-box p span {color: #00000050;min-width: 65px}
#vehicle.preview div.map-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#vehicle.preview div.map-box h6 {font-size: 15px;font-weight: 700;}
#vehicle.preview div.map-box p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
#vehicle.preview div.map-box p span {color: #00000050;min-width: 65px}
#vehicle.preview div.map-box .map {width: 100%; border-radius: 20px; overflow: hidden}
#vehicle.preview div.map-box .root_daum_roughmap .cont {display: none}
#vehicle.preview div.button-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column;max-width: 450px;position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;z-index: 990;padding: 0px 15px calc(env(safe-area-inset-bottom) + 15px);background-position: top center;background-size: cover;height: fit-content;}


#apply form {padding: 15px}
#apply form .flex {margin-top: 10px; color: #6E6E6E}
#apply form .flex input:not(:checked) {background: #fff0!important;border: 1px solid #6e6e6e}
#apply form .flex input:not(:checked):after {border-color: #6e6e6e}
#apply ul.list {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#apply ul.list li {width: 100%}
#apply ul.list li a {width: 100%;display: flex; align-items: flex-start; justify-content: center; gap: 5px; flex-direction: column; background: #fff; position: relative; padding: 20px}
#apply ul.list li a h6 {font-size: 15px;font-weight: 400;}
#apply ul.list li a h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#apply ul.list li a p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#apply ul.list li a p:not(:first-of-type) {margin-top: -8px;}
#apply ul.list li a p span {color: #ff7417;}
#apply ul.list li a > span {position: absolute; bottom:20px; right:20px;background: #f0f2f4;border-radius: 100px;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 68px;height: 68px;overflow: hidden;aspect-ratio: 1;color: #000000;text-align: center;font-size: 18px;font-weight: 700;}
#apply ul.list li a > span.cancel {background: #f0f2f4;color: #797979;}
#apply ul.list li a > span.stay {background: #ff7417;color: #fff;}
#apply ul.list li a > span.confirm {background: #006FFD;color: #fff;}
#apply ul.list li a > span.stay:hover  {background: #d95f0e;color: #fff;}
#apply ul.list li a > span.confirm:hover {background: #0059c9;color: #fff;}
#apply ul.list li a > span.cancel:hover {background: #e5e3e3;color: #6E6E6E;}
#apply ul.list li a.confirm h5 {color: #006FFD;}


body:has(#recruit.view) header {background: #fff; }
#recruit.view {display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#recruit.view > div {width: 100%;background: #fff; padding: 20px 15px}
#recruit.view div.info-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
#recruit.view div.info-box h6 {font-size: 15px;font-weight: 400;}
#recruit.view div.info-box h5 {font-size: 18px;letter-spacing: -0.02em;font-weight: 600;}
#recruit.view div.info-box p {font-size: 12px;letter-spacing: -0.02em;font-weight: 600;}
#recruit.view div.info-box p span {color: #ff7417;}
#recruit.view form {width: 100%; padding: 15px}
#recruit.view form .flex {color: #6E6E6E; width: 100%}
#recruit.view form .flex input:not(:checked) {background: #fff0!important;border: 1px solid #6e6e6e}
#recruit.view form .flex input:not(:checked):after {border-color: #6e6e6e}
#recruit.view ul.list {width: 100%;display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#recruit.view ul.list li {width: 100%;display: flex; align-items: flex-start; justify-content: center; gap: 0px; flex-direction: column; background: #fff; position: relative}
#recruit.view ul.list li .profile {display: flex;width: 100%;align-items: center; justify-content: space-between; padding: 15px; gap:5px}
#recruit.view ul.list li .profile button:first-of-type {margin-left: auto;}
#recruit.view ul.list li .profile button {border-radius: 100px!important;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 48px;height: 48px;overflow: hidden;aspect-ratio: 1;text-align: center;font-size: 18px;font-weight: 700;}
#recruit.view ul.list li .profile a {border-radius: 100px!important;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 48px;height: 48px;overflow: hidden;aspect-ratio: 1;text-align: center;font-size: 18px;font-weight: 700;}
#recruit.view ul.list li .profile h6 {font-weight: 600; font-size: 18px}
#recruit.view ul.list li.confirm .profile h6 {color: #006FFD}
#recruit.view ul.list li.failed .profile h6 {color: #6E6E6E}
#recruit.view ul.list li .profile p {font-weight: 600; font-size: 13px}
#recruit.view ul.list li .flex {width: 100%;border-radius: 0}
#recruit.view ul.list li .flex button {width: 100%;border-radius: 0}
#recruit.view ul.list li.failed .flex button {color: #6E6E6E}


.modal.bottom-sheet .modal-dialog {width: 100%;position: fixed;bottom: 0!important;top:unset!important;transform: translate(-50%,100%) !important;transition: transform .25s ease-out;}
.modal.bottom-sheet.in .modal-dialog { transform: translate(-50%,0) !important; }
.modal.bottom-sheet.in .modal-dialog .modal-body{  max-height: calc(80vh); background: #F8F9FB; border-radius: 15px 15px 0 0; padding: 0}
.modal.bottom-sheet.in .modal-dialog .btn-close{  color: #fff; border: 0; background: #fff0; width: 100%; text-align: right; padding: 15px}
.modal.bottom-sheet.in .modal-dialog .modal-body .flex {width: 100%;border-radius: 0}
.modal.bottom-sheet.in .modal-dialog .modal-body .flex button {width: 100%;border-radius: 0}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info {width: 100%;display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li {width: 100%;background: #fff;padding: 15px}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.profile h6 {font-weight: 600; font-size: 18px}
.modal.bottom-sheet.in .modal-dialog .modal-body.confirm ul.info li.profile h6 {color: #006FFD}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.detail-box {display: flex; align-items: flex-start; justify-content: center; gap: 10px; flex-direction: column}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.detail-box h6 {font-size: 15px;font-weight: 700;}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.detail-box p {gap: 10px;font-size: 13px;letter-spacing: -0.02em;font-weight: 600;display: flex; align-items: start; justify-content: flex-start}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.detail-box p span {color: #00000050;min-width: 65px}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.file-box {max-height: 35vh;overflow: auto;display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; flex-direction: column}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.file-box h6 {font-size: 15px;font-weight: 700;}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.file-box a {background: #f8f9fb;border-style: solid;border-color: #e5e5e5;border-width: 1px;padding: 15px;display: flex;flex-direction: row;gap: 10px;align-items: center;justify-content: space-between;align-self: stretch;flex-shrink: 0;position: relative; font-weight: 700; font-size: 15px; letter-spacing: -.5px;}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.file-box a:after {content: "\f358"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: 0.8em; opacity: 0.8;}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.file-box a.request:after {opacity: 1;color: #fff;font-size: 10px;background: #ff7417;content: "요청"; font-family: 'SUIT'; border-radius: 100px!important;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 30px;height: 30px;overflow: hidden;aspect-ratio: 1;text-align: center;font-weight: 700;}
.modal.bottom-sheet.in .modal-dialog .modal-body ul.info li.file-box a.request {background: #ff741710; color: #ff7417; border-color:#ff7417; padding: 10px 15px }

.root_daum_roughmap {width: 100%!important;}

body:has(#company.map){max-height: 100vh; height: 100vh; overflow: hidden}
body:has(#company.map) #wrapper {padding-top: min(env(safe-area-inset-top) + calc(100vw * (28 / 125)), 94px)}
#company.map {position: relative}
#company.map .search {background: #ffffff;border-radius: 50px;border-style: solid;border-color: #ff7417;border-width: 1px;padding: 0px 5px 0 15px;display: flex;flex-direction: row;gap: 5px;align-items: center;justify-content: center;position: absolute;z-index: 9;top: 40px;left: 50%;transform: translateX(-50%);width: calc(100% - 30px)}
#company.map .search > i {color: #ff7417;font-size: 14px;}
#company.map .search > input {font-size: 14px;font-weight: 600;background: #fff}
#company.map .search > button{background: #ff7417;border-radius: 20px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;flex-shrink: 0;width: 30px;height: 30px;color: #ffffff;font-size: 14px;border: 0}
#company.map .btn-search {max-width: 420px;color: #fff;font-size: 14px;font-weight: 600;z-index: 9;position: fixed;bottom:calc(env(safe-area-inset-top) + 100px );left: 50%;transform: translateX(-50%);width: calc(100% - 30px);background: #000000;border-radius: 500px;padding: 12px 15px 12px 15px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;height: 40px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05), 0px 4px 20px 0px rgba(0, 0, 0, 0.1);overflow: hidden;}
#company.map .map {position: relative}
#company.map .map {position: relative}
#company.map .map button {z-index: 999;color: #fff;font-size: 20px;font-weight: 600;opacity: 0.8;position: absolute;border-radius: 100px!important;padding: 10px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;line-height: 15px;flex-shrink: 0;width: 60px;height: 60px;overflow: hidden;aspect-ratio: 1;text-align: center;}
#company.map .map button.orange {background: #ff7417}
#company.map .map button.blue {background: #006FFD}
#company.map .map button.green {background: #28BE3A}

#company.list {padding-top:40px}
#company.list .search {padding:  0px 5px 0 15px;background: #fff0;border-radius: 50px;border-style: solid;border-color: #ff7417;border-width: 1px;margin: 15px;display: flex;flex-direction: row;gap: 5px;align-items: center;justify-content: center;width: calc(100% - 30px)}
#company.list .search > i {color: #ff7417;font-size: 14px;}
#company.list .search > input {font-size: 14px;font-weight: 600;background: #fff0}
#company.list .search > button{background: #ff7417;border-radius: 20px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;flex-shrink: 0;width: 30px;height: 30px;color: #ffffff;font-size: 14px;border: 0}
#company.list .btn-search {max-width: 420px;color: #fff;font-size: 14px;font-weight: 600;z-index: 9;position: fixed;bottom:calc(env(safe-area-inset-top) + 100px );left: 50%;transform: translateX(-50%);width: calc(100% - 30px);background: #000000;border-radius: 500px;padding: 12px 15px 12px 15px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;height: 40px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05), 0px 4px 20px 0px rgba(0, 0, 0, 0.1);overflow: hidden;}
#company.list .filter-bar {padding: 0 15px 15px}
#company.list button.orange {color: #ff7417}
#company.list button.blue {color: #006FFD}
#company.list button.green {color: #28BE3A}
#company.list ul.list {width: 100%;display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#company.list ul.list li {padding: 0px;width: 100%;display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; background: #fff; position: relative}
#company.list ul.list li .text {padding: 20px;width: 100%;display: flex; align-items: flex-start; justify-content: center; gap: 5px; flex-direction: column; background: #fff; position: relative}
#company.list ul.list li .text > div {display: flex; align-items: center; justify-content: flex-start; gap: 5px; }
#company.list ul.list li .line {height: 16px;width: 2px;}
#company.list ul.list li h5{font-size: 18px;letter-spacing: -0.02em;font-weight: 600;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;width:100%;word-break: break-all;}
#company.list ul.list li h6{color: #696969;font-size: 14px;letter-spacing: -0.02em;font-weight: 400;}
#company.list ul.list li p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;}
#company.list ul.list li p span{color: #c5c6cc;font-weight: 400; margin-right: 5px}
#company.list ul.list li p span:not(:first-of-type){ margin-left: 5px}
#company.list ul.list li .line.orange {background: #ff7417}
#company.list ul.list li .line.blue {background: #006FFD}
#company.list ul.list li .line.green {background: #28BE3A}
#company.list ul.list li .img {max-width: 120px;min-width: 120px; align-self: normal;}


body:has(#ground.main) header {background: #fff; }
body:has(#ground.main) #wrapper {background: #fff; }
#ground.main .inner {padding: 0 20px 50px }
#ground.main .inner > a {display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 18px; margin-bottom: 10px }
#ground.main p.txt-org { margin-bottom: 10px }
#ground.main .box10 { margin-bottom: 20px; border-radius: 10px }
#ground.main .box10 ul  {width: 100%;display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#ground.main .box10 ul li{ width: 100%;}
#ground.main .box10 ul li a{ width: 100%;display: flex; align-items: center; justify-content: space-between}
#ground.main .box10 ul li a p {color: #000000; font-size: 13px; font-weight: 600}
#ground.main .box10 ul li a span {color: #00000040; font-size: 12px}
#ground.main .grid { gap: 10px ;}
#ground.main .grid a { font-weight: 600;padding: 10px 0; margin-bottom: 0px; border-radius: 10px;background-color: #fafafa; display: flex; align-items: center; justify-content: center;}


#board.list {padding: 20px 20px 50px}
#board.list h6{font-weight: 700; font-size: 18px; margin-bottom: 10px }
#board.list p.txt-org { margin-bottom: 10px }
#board.list select.txt-right {color: #00000060; font-size: 13px; font-weight: 700;background: #fff0}
#board.list .list ul {width: 100%;display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column}
#board.list .list ul li{ width: 100%; background-color: #fff; padding: 10px; border-radius: 5px; border: 1px solid #eee}
#board.list .list ul li a { display: block}
#board.list .list ul li .p-title  {color: #000000; font-size: 16px; font-weight: 600; margin-bottom: 10px}
#board.list .list ul li .p-date {margin-top: 10px;color: #00000040; font-size: 12px}
#board.list .btn-black {max-width: 420px;color: #fff;font-size: 14px;font-weight: 600;z-index: 9;position: fixed;bottom:calc(env(safe-area-inset-top) + 100px );left: 50%;transform: translateX(-50%);width: calc(100% - 30px);background: #000000;border-radius: 500px;padding: 12px 15px 12px 15px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;height: 40px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05), 0px 4px 20px 0px rgba(0, 0, 0, 0.1);overflow: hidden;}

#board.view  {padding: 20px 20px 80px; position: relative}
#board.view .answer { margin-top: 10px}
#board.view .comment {width: 100%;display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column; margin-top: 10px}
#board.view .comment dt { width: 100%; background-color: #fff; border-radius: 5px; border: 1px solid #eee; padding: 15px}
#board.view .cont > .box20 { width: 100%; background-color: #fff; border-radius: 5px; border: 1px solid #eee; margin-top: 20px; min-height: 50vh}
#board.view .cont  .title strong  {color: #000000; font-size: 18px; font-weight: 400; margin: 10px 0; display: block}
#board.view .cont  .title .info  {color: #00000060; font-size: 13px; font-weight: 400;display: flex; align-items: center;  gap: 5px;}
#board.view .comment-box{max-width: 450px;z-index: 9;position: fixed;bottom:calc(env(safe-area-inset-top) + 0px );left: 50%;transform: translateX(-50%);width: calc(100% - 0px);display: flex;gap: 0px;align-items: center;justify-content: center;height:calc(env(safe-area-inset-top) + 50px );box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05), 0px 4px 20px 0px rgba(0, 0, 0, 0.1);overflow: hidden;}
#board.view .comment-box button {border-radius: 0;height:calc(env(safe-area-inset-top) + 50px ); }
#board.view .comment-box textarea {border: 0; height:calc(env(safe-area-inset-top) + 50px ); padding: 15px; font-size: 15px!important;}
#board.view .comment-box textarea:hover {border: 0!important;}
#board.view .comment-box textarea:focus {border: 0!important;}
#board.view .comment-box textarea:focus-visible {border: 0!important;}


#board.form {padding: 20px 20px 50px}
#board.form .box-line {border-radius: 5px;}
#board.form .btn-black {margin-top: 10px; max-width: 420px;color: #fff;font-size: 14px;font-weight: 600;width: 100%;background: #000000;border-radius: 500px;padding: 12px 15px 12px 15px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;height: 40px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05), 0px 4px 20px 0px rgba(0, 0, 0, 0.1);overflow: hidden;}


.mypage .form-wrap {width: 100%;display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column; margin-top: 10px}
.mypage .form-wrap > div {width: 100%}

#myinfo {padding: 20px 20px 50px}
#myinfo > h6 {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
#myinfo > h6 b{font-size: 18px;}
#myinfo > h6 a{font-size: 12px;}
#myinfo > p {margin: 5px 0 15px}
#myinfo .box-gray {border-radius: 5px; margin-bottom: 10px}
#myinfo .box-white {border-radius: 5px; margin-bottom: 25px}
#myinfo .grid3 {}
#myinfo .grid3 li {display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column}
#myinfo .grid3 p {font-size: 12px; text-align: center;opacity: .4; line-height: 15px}
#myinfo .grid3 h6 {font-size: 20px;font-weight: 600}
#myinfo .list {width:100%;display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column}
#myinfo .list li {width:100%;}
#myinfo .list li {width:100%;padding: 10px;display: flex; gap: 10px; align-items: center; justify-content: space-between; background: #F8F9FB; border: 1px solid #e5e5e5; border-radius: 5px}
#myinfo .list li a {width:100%;display: flex; align-items: center; justify-content: space-between;}
#myinfo .list li button{background: #fff0; border: 0;}
#myinfo .list li:has(.upload) {background: #FF741705; border: 1px solid #FF7417}


#alert {padding: 20px 20px 50px}
#alert > h6 {font-size: 18px; font-weight: 800}
#alert > p {margin: 5px 0 15px}
#alert .list {width:100%;display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column}
#alert .list li {width:100%;}
#alert .list li a {width:100%;padding: 10px;display: flex; align-items: flex-start; justify-content: flex-start; gap: 0px; flex-direction: column; background: #fff; border: 1px solid #e5e5e5; border-radius: 5px}
#alert .list li a h5 {font-size: 16px; font-weight: 800}
#alert .list li a h6 {font-size: 13px;}
#alert .list li a p {font-size: 12px;opacity: 0.4}
#alert .list li a.unread {border: 1px solid #FF7417}
#alert .list li a.unread h5 {color: #FF7417}
#alert .btn-black {max-width: 420px;color: #fff;font-size: 14px;font-weight: 600;z-index: 9;position: fixed;bottom:calc(env(safe-area-inset-top) + 100px );left: 50%;transform: translateX(-50%);width: calc(100% - 30px);background: #000000;border-radius: 500px;padding: 12px 15px 12px 15px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;height: 40px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05), 0px 4px 20px 0px rgba(0, 0, 0, 0.1);overflow: hidden;}

#pravicy h2 {font-size: 16px; font-weight: 800; margin-bottom: 20px}
#pravicy ul {width:100%;display: flex; align-items: center; justify-content: center; gap: 10px; flex-direction: column}
#pravicy ul li {width:100%;}


#trade.list {padding-bottom: 50px}
#trade.list form select {background: #fff0}
#trade.list .nav-tabs {gap: 0}
#trade.list .nav-tabs>li {width: 100%}
#trade.list .nav-tabs>li.active>a {background: #fff0}
#trade.list .search {margin: 15px;padding:  0px 5px 0 15px;background: #fff0;border-radius: 50px;border-style: solid;border-color: #ff7417;border-width: 1px;display: flex;flex-direction: row;gap: 5px;align-items: center;justify-content: center;width: calc(100% - 30px)}
#trade.list .search > i {color: #ff7417;font-size: 14px;}
#trade.list .search > input {font-size: 14px;font-weight: 600;background: #fff0}
#trade.list .search > button{background: #ff7417;border-radius: 20px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;flex-shrink: 0;width: 30px;height: 30px;color: #ffffff;font-size: 14px;border: 0}
#trade.list ul.list {width: 100%;display: flex; align-items: center; justify-content: center; gap: 5px; flex-direction: column}
#trade.list ul.list li {cursor: pointer;padding: 0px;width: 100%;display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; background: #fff; position: relative}
#trade.list ul.list li .text {padding: 20px;width: 100%;display: flex; align-items: flex-start; justify-content: center; gap: 5px; flex-direction: column; background: #fff; position: relative}
#trade.list ul.list li .text > div {display: flex; align-items: center; justify-content: flex-start; gap: 5px; }
#trade.list ul.list li .line {height: 16px;width: 2px;}
#trade.list ul.list li h5{font-size: 18px;letter-spacing: -0.02em;font-weight: 600;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;width:100%;word-break: break-all;}
#trade.list ul.list li h6{color: #696969;font-size: 14px;letter-spacing: -0.02em;font-weight: 400;}
#trade.list ul.list li p {font-size: 13px;letter-spacing: -0.02em;font-weight: 600;}
#trade.list ul.list li p span{color: #c5c6cc;font-weight: 400; margin-right: 5px}
#trade.list ul.list li p span:not(:first-of-type){ margin-left: 5px}
#trade.list ul.list li .img {max-width: 120px;min-width: 120px; align-self: normal;}
#trade.list .btn-large2 {max-width: 420px;position: fixed;left: 50%;transform: translateX(-50%);width: calc( 100% - 30px );z-index: 990;bottom: calc(env(safe-area-inset-bottom) + 90px);}

#trade.view  {padding: 20px 20px 80px; position: relative}
#trade.view img {max-width: 100%;}
#trade.view .cont > .box20 { width: 100%; background-color: #fff; border-radius: 5px; border: 1px solid #eee; margin-top: 20px; min-height: 50vh}
#trade.view .cont  .title strong  {color: #000000; font-size: 18px; font-weight: 400; margin: 10px 0; display: block}
#trade.view .cont  .title .info  {color: #00000060; font-size: 13px; font-weight: 400;display: flex; align-items: center;  gap: 5px;}
#trade.view .btn-wrap {margin-bottom: 10px;justify-content: right;text-align: right;display: flex;gap: 5px;}
#trade.view .btn-large2 {max-width: 420px;position: fixed;left: 50%;transform: translateX(-50%);width: calc( 100% - 30px );z-index: 990;bottom: calc(env(safe-area-inset-bottom) + 20px);}
#trade.view table {border-left: 0; border-right: 0}
#trade.view table td {background: #fff0; padding: 4px 10px}
#trade.view table th {background: #fff0; padding: 4px 10px; border-right-style: dashed}


#trade.form {padding: 20px 20px 50px}
#trade.form .box-line {border-radius: 5px;}
#trade.form .btn-black {margin-top: 10px; max-width: 420px;color: #fff;font-size: 14px;font-weight: 600;width: 100%;background: #000000;border-radius: 500px;padding: 12px 15px 12px 15px;display: flex;flex-direction: column;gap: 10px;align-items: center;justify-content: center;height: 40px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05), 0px 4px 20px 0px rgba(0, 0, 0, 0.1);overflow: hidden;}