html, body {
background-color: #f1f3f5; }
html.bg-white, body.bg-white {
background-color: #fff; }
html, body {
margin: 0;
padding: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
user-select: none;
}
.container {
height: 100vh;
max-width: 750px;
position: relative;
margin: 0 auto;
padding: 60px 0 0px;
overflow: hidden; }
.container.main {
padding: 0; }
.container.map {
padding-bottom: 0; }
.container.login {
padding: 0px 0 0px;
}
.wrapper {
height: 100%;
overflow-y: auto;
position: relative;
padding-bottom : 20px; }
.wrapper .logo_box{
height: 200px;
width: 100%;
position: absolute; }
.topInfo{
height: 40px;
display: flex;
align-items: center;
padding-left: 15px;
background-color: #16165C;}
.topInfo img{
height: 28px;
width: 28px;
border-radius: 20px;}
.topInfo .txt{
color: #fff;
margin-left: 10px;
font-size: 18px;
font-weight: bold;}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
max-width: 750px;
z-index: 100;
margin: 0 auto; }
header .headerWrap {
width: 100%;
max-width: 750px;
margin: 0 auto;
height: 60px;
position: relative;
text-align: center;
border-bottom: 1px solid #16165C;
background-color: #16165C; }
header .titBox .titTxt {
display: inline-block;
vertical-align: middle;
font-size: 20px;
line-height: 60px;
color: #fff;
font-weight: bold;}
header .leftBox {
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%); }
header .leftBox .backBtn {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background: url("../img/ic_back_whi.png") no-repeat center/cover; }
header .leftBox .closeBtn {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
background: url("../img/close_whi.png") no-repeat center/cover; }
header .rightBox {
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%); }
header .rightBox .profileBox {
width: 40px;
height: 40px;
background: url("../img/profile_48.png") no-repeat center/cover;
overflow: hidden;
border-radius: 18px; }
header .rightBox .profileBox img {
width: 100%; }
header .rightBox .writeBox {
width: 24px;
height: 24px;
background: url("../img/write@3x.png") no-repeat center/cover; }
header .rightBox .searchBox {
width: 24px;
height: 24px;
background: url("../img/search_icon_g.png") no-repeat center/cover; }
footer.footerNav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 100;
font-size: 0;
background-color: #16165C;
border-top: 3px solid #0F2A4F;}
footer.footerNav .footerWrap {
position: relative;
width: 100%;
max-width: 750px;
margin: 0 auto;
overflow: hidden;
background-color: #16165C;
box-shadow: 0 -2px 16px 0 rgba(0, 0, 0, 0.05); }
footer.footerNav .footerWrap .footerCon {
height: 75px;
padding: 0;
position: relative; }
footer.footerNav .footerWrap .footerCon ul {
height: 100%;
text-align: center; }
footer.footerNav .footerWrap .footerCon ul li {
display: inline-block;
vertical-align: middle;
width: 20%;
height: 100%; }
footer.footerNav .footerWrap .footerCon ul li.on {
background-color: #fff;
}
footer.footerNav .footerWrap .footerCon ul li.on:nth-of-type(1) {
background: url("../img/ic_delivery-truck_on.png") no-repeat center top 12px/40px 40px;
background-color: #fff;}
footer.footerNav .footerWrap .footerCon ul li.on:nth-of-type(2) {
background: url("../img/ic_checklist_on.png") no-repeat center top 12px/32px 32px;
background-color: #fff;}
footer.footerNav .footerWrap .footerCon ul li.on:nth-of-type(3) {
background: url("../img/ic_receipt_on.png") no-repeat center top 12px/35px 35px;
background-color: #fff;}
footer.footerNav .footerWrap .footerCon ul li.on:nth-of-type(4) {
background: url("../img/ic_messenger_on.png") no-repeat center top 12px/32px 32px;
background-color: #fff;}
footer.footerNav .footerWrap .footerCon ul li.on:nth-of-type(5) {
background: url("../img/ic_user_on.png") no-repeat center top 12px/32px 32px;
background-color: #fff;}
footer.footerNav .footerWrap .footerCon ul li.on a .txt {
color: #16165C;
font-weight: bold;
margin-top:8px; }
footer.footerNav .footerWrap .footerCon ul li:nth-of-type(1) {
background: url("../img/ic_delivery-truck.png") no-repeat center top 12px/40px 40px; }
footer.footerNav .footerWrap .footerCon ul li:nth-of-type(2) {
background: url("../img/ic_checklist.png") no-repeat center top 12px/32px 32px; }
footer.footerNav .footerWrap .footerCon ul li:nth-of-type(3) {
background: url("../img/ic_receipt.png") no-repeat center top 12px/35px 35px; }
footer.footerNav .footerWrap .footerCon ul li:nth-of-type(4) {
background: url("../img/ic_messenger.png") no-repeat center top 12px/32px 32px; }
footer.footerNav .footerWrap .footerCon ul li:nth-of-type(5) {
background: url("../img/ic_user.png") no-repeat center top 12px/32px 32px; }
footer.footerNav .footerWrap .footerCon ul li a {
display: block;
height: 100%;
padding: 44px 0 8px; }
footer.footerNav .footerWrap .footerCon ul li a .txt {
display: inline-block;
vertical-align: middle;
color: #fff;
font-size: 16px;
font-weight: 500;
margin-top: 5px; }
section.mainTop {
padding-top: 20px; }
section.mainTop .topTxt {
font-size: 28px;
letter-spacing: -0.4px;
line-height: 42px;
font-weight: 700; }
section.mainTop .bottomTxt {
padding-top: 2px;
font-size: 16px;
line-height: 24px;
color: #8f959c; }
section.mainTop .profileBox {
position: absolute;
right: 24px;
top: 0;
width: 48px;
height: 48px;
overflow: hidden;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.1);
border-radius: 20px; }
section.mainTop .profileBox img {
width: 100%; }
section.mainMenu {
padding-top: 55px; }
section.mainMenu .mainMenuWrap .imgBox img {
width: 100%; }
section.mainMenu .mainMenuWrap ul li + li {
margin-top: 12px; }
section.mainMenu .mainMenuWrap ul li a {
height: 98px;
display: flex;
padding-left: 72px;
box-shadow: 0 8px 24px 0 rgba(73, 80, 87, 0.08);
border-radius: 16px;
position: relative;
flex-direction: column;
justify-content: center; }
section.mainMenu .mainMenuWrap ul li a .topTxt {
font-size: 18px;
line-height: 28px;
color: #121517; }
section.mainMenu .mainMenuWrap ul li a .bottomTxt {
font-size: 14px;
line-height: 22px;
color: #8f959c; }
section.mainMenu .mainMenuWrap ul li a:after {
content: '';
position: absolute;
right: 24px;
top: 50%;
width: 20px;
height: 20px;
transform: translateY(-50%);
background: url("../img/ic_link.png") no-repeat center/cover; }
section.mainMenu .mainMenuWrap ul li a.bus {
background: #fff url("../img/ic_reservation.png") no-repeat center left 24px/32px 32px; }
section.mainMenu .mainMenuWrap ul li a.location {
background: #fff url("../img/ic_location.png") no-repeat center left 24px/32px 32px; }
section.mainMenu .mainMenuWrap ul li a.way {
background: #fff url("../img/ic_find.png") no-repeat center left 24px/32px 32px; }
section.busSelect {
padding: 32px 0; }
article.setForm .formGroup .formBox {
font-size: 0; }
article.setForm .formGroup .formBox + .formBox {
margin-top: 24px; }
article.setForm .formGroup .formBox .subject {
padding-bottom: 4px; }
article.setForm .formGroup .formBox .subject .txt {
position: relative;
font-size: 14px;
line-height: 20px; }
article.setForm .formGroup .formBox .subject .txt.ess:after {
content: '';
position: absolute;
border-radius: 50%;
right: -8px;
top: 0;
width: 4px;
height: 4px;
background-color: #f03d3e; }
article.setForm .formGroup .formBox .con .sbox {
width: 100%;
height: 56px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #dee2e6; }
article.setForm .formGroup .formBox .con .sbox.noSelect select {
color: #adb5bd; }
section.busBooking {
padding: 32px 0; }
article.mapMarker .marker {
position: absolute;
width: 64px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
line-height: 22px;
font-weight: 500;
padding-bottom: 5px;
z-index: 10; }
article.mapMarker .marker.location {
background: url("../img/location.svg") no-repeat center/cover;
width: 48px;
height: 49px; }
article.mapMarker .marker.pin {
width: 24px;
height: 30px; }
article.mapMarker .marker.pin.red {
background: url("../img/red@3x.png") no-repeat center/cover; }
article.mapMarker .marker.pin.blue {
background: url("../img/blue@3x.png") no-repeat center/cover; }
article.mapMarker .marker.pin.green {
background: url("../img/green@3x.png") no-repeat center/cover; }
article.mapMarker .marker.mini {
width: 24px;
height: 27px; }
article.mapMarker .marker.mini.departure {
background: url("../img/pin_rd_24.png") no-repeat center/cover; }
article.mapMarker .marker.mini.arrive {
background: url("../img/pin_bl_24.png") no-repeat center/cover; }
article.mapMarker .marker.departure {
background: url("../img/pin_rd_64.png") no-repeat center/cover; }
article.mapMarker .marker.arrive {
background: url("../img/pin_bl_64.png") no-repeat center/cover; }
section.map {
position: relative;
height: 100%; }
article.bookingList .bookingGroup .bookingBox {
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 16px;
background-color: #fff;
position: relative;
padding-left: 72px;
height: 112px; }
article.bookingList .bookingGroup .bookingBox + .bookingBox {
margin-top: 12px; }
article.bookingList .bookingGroup .bookingBox .topTxt {
color: #8f959c;
font-size: 14px;
line-height: 22px; }
article.bookingList .bookingGroup .bookingBox .midTxt {
font-size: 18px;
line-height: 28px;
padding-left: 28px;
margin: 4px 0 8px;
background: url("../img/ic_watch.png") no-repeat left center/20px 20px; }
article.bookingList .bookingGroup .bookingBox .bottomTxt {
font-size: 14px;
line-height: 22px;
color: #8f959c; }
article.bookingList .bookingGroup .bookingBox .num {
border-radius: 50%;
position: absolute;
left: 25px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
font-weight: 500;
border: 1.5px solid #1e6cdb;
background-color: #3182f6; }
article.menuGroup {
position: absolute;
bottom: 48px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center; }
article.menuGroup .menuBtn {
width: 140px;
height: 54px;
border-radius: 40px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #fff; }
article.menuGroup .menuBtn.shadow.type1 {
box-shadow: 0 16px 24px 0 rgba(49, 130, 246, 0.3); }
article.menuGroup .menuBtn.shadow.type2 {
box-shadow: 0 16px 24px 0 rgba(255, 107, 95, 0.3); }
article.menuGroup .menuBtn.type1 {
background-color: #3182f6;
border: 1.5px solid #1e6cdb;
box-shadow: 0 16px 24px 0 rgba(49, 130, 246, 0.3); }
article.menuGroup .menuBtn.type2 {
background-color: #ff6b5f;
border: 1.5px solid #ed5f54; }
section.findFastWay {
padding: 32px 0; }
.rangeSelectFormBox {
position: relative;
padding: 0 22px 0 44px;
background-color: #fff;
border-radius: 12px; }
.rangeSelectFormBox:after {
content: '';
position: absolute;
top: 30px;
bottom: 30px;
width: 1px;
left: 23px;
border-left: 2px dotted #ced4da;
z-index: 1; }
.rangeSelectFormBox .row {
height: 56px;
display: flex;
align-items: center;
position: relative; }
.rangeSelectFormBox .row:after {
content: '';
position: absolute;
left: -26px;
top: 50%;
transform: translateY(-50%);
background: url("../img/ic_start.png") no-repeat center/cover;
width: 12px;
height: 12px;
z-index: 2; }
.rangeSelectFormBox .row + .row {
border-top: 1px solid #f1f3f5; }
.rangeSelectFormBox .row + .row:after {
background: url("../img/ic_arrive.png") no-repeat center/cover; }
.rangeSelectFormBox .row .sbox {
width: 100%;
height: 24px; }
article.rangeSelectFormMenu {
display: flex;
justify-content: center;
padding: 20px 0 32px; }
article.rangeSelectFormMenu .menuBtn {
width: 140px;
height: 54px;
border-radius: 40px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #fff; }
article.rangeSelectFormMenu .menuBtn.shadow.type1 {
box-shadow: 0 16px 24px 0 rgba(49, 130, 246, 0.3); }
article.rangeSelectFormMenu .menuBtn.shadow.type2 {
box-shadow: 0 16px 24px 0 rgba(255, 107, 95, 0.3); }
article.rangeSelectFormMenu .menuBtn.type1 {
background-color: #3182f6;
border: 1.5px solid #1e6cdb;
box-shadow: 0 16px 24px 0 rgba(49, 130, 246, 0.3); }
article.rangeSelectFormMenu .menuBtn.type2 {
background-color: #ff6b5f;
border: 1.5px solid #ed5f54; }
section.bookingList {
/* height: 100%;*/
padding: 10px 0;
margin-bottom: 50px;}
/*
section.bookingList .inner{
height: 100%;}
article.recommendedWay{
height: 100%; }*/
article.recommendedWay .wayTit {
font-size: 20px;
line-height: 30px;
padding-bottom: 8px;
font-weight: 500; }
/*article.recommendedWay .recommendedListBox{
height: 100%; }
article.recommendedWay .recommendedListBox ul{
height: 100%;
overflow-y: auto; }*/
article.recommendedWay .recommendedListBox ul.padb10{
padding-bottom: 0px;}
article.recommendedWay .recommendedListBox ul li {
/*border: 1px solid #b3b3b3;*/
box-shadow: 2px 2px 10px 5px #b3b3b3;
border-radius: 5px; }
article.recommendedWay .recommendedListBox ul li.on{
box-shadow: 2px 2px 10px 5px #3182f6;
}
article.recommendedWay .recommendedListBox ul li + li {
margin-top: 12px; }
article.recommendedWay .recommendedListBox ul li.none {
border: none;
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow:none;}
article.recommendedWay .recommendedListBox ul li.none span{
display: block;
margin-top:10px;
font-size:25px;
color : #b3b3b3}
article.recommendedWay .recommendedListBox ul li a {
display: block;
border-radius: 10px;
background: #fff;
position: relative;
padding: 0px 0px; }
article.recommendedWay .recommendedListBox ul li a .bookingBtn {
position: absolute;
right: 20px;
top: 20px;
font-size: 16px;
color: #fff;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 32px;
background-color: #3182f6;
border: 1.5px solid #1e6cdb; }
article.recommendedWay .recommendedListBox ul li a .topTxt {
color: #fff;
font-size: 15px;
line-height: 20px;
font-weight: 500;
height: 30px;
display: flex;
align-items: center;
padding: 5px;
border-bottom: 1px solid #b3b3b3;
border-radius: 10px 10px 0px 0px;
}
article.recommendedWay .recommendedListBox ul li a .topTxt.green {
background-color: #08EB08;}
article.recommendedWay .recommendedListBox ul li a .topTxt.sky {
background-color: #61C1F1;}
article.recommendedWay .recommendedListBox ul li a .topTxt.blue {
background-color: #16165C;}
article.recommendedWay .recommendedListBox ul li a .topTxt .txt {
color: #fff;}
article.recommendedWay .recommendedListBox ul li a .topTxt .btn {
margin-left: auto;
background-color: #f1f3f5;
padding: 0 10px;
display: flex;
height: 25px;
align-items: center;
font-weight: 500;}
article.recommendedWay .recommendedListBox ul li a .bottomTxt {
font-size: 15px;
line-height: 34px;
font-weight: 500;
height: 40px;
padding-top: 3px;}
article.recommendedWay .recommendedListBox ul li a .bottomTxt .left{
position: absolute;
left: 10px;
margin-top:-1px;
padding-top: 3px;
padding-left: 24px;
background: url(../img/ic_watch.png) no-repeat left center/20px 20px;}
article.recommendedWay .recommendedListBox ul li a .bottomTxt .right{
position: absolute;
right: 10px;
padding:0px 10px;
background: #161693;
color: #fff;
border-radius: 10px;
margin-top: 2px;
height: 32px;}
article.recommendedWay .recommendedListBox ul li a .timeBox {
margin-top: 9px;
color: #16165C;
padding: 10px;
padding-left: 24px;
font-weight: bold;
font-size: 30px;
border-top:1.5px solid #D8D8D8;
text-align: center;}
article.recommendedWay .recommendedListBox ul li a .timeBox .tit{
position: absolute;
left:16px;
font-weight: 500;
font-size:17px}
article.recommendedWay .recommendedListBox ul li a .rowBox {
position: relative;
padding: 0 16px;
display: flex;
border-top: 1.5px solid #D8D8D8;}
/*article.recommendedWay .recommendedListBox ul li a .rowBox:after {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
width: 1px;
left: 3px;
border-left: 2px dotted #ced4da;
z-index: 1; }*/
article.recommendedWay .recommendedListBox ul li a .rowBox .row {
display: flex;
align-items: center;
position: relative;
flex-direction: column;
flex: 1;
margin-top: 10px;
width: 50%;}
article.recommendedWay .recommendedListBox ul li a .rowBox .row.start {
border-right :1.5px solid #D8D8D8;
min-width: 50%;
}
article.recommendedWay .recommendedListBox ul li a .rowBox .row.end {
margin-left:10px
}
article.recommendedWay .recommendedListBox ul li a .rowBox .row.end .subject {
font-size: 17px;
margin-left: 10px;
color: #000;
padding-right: 8px;
padding: 10px;
margin-right: auto;}
article.recommendedWay .recommendedListBox ul li a .rowBox .row .subject {
font-size: 17px;
color: #000;
padding-right: 8px;
padding: 10px;
margin-right: auto;}
article.recommendedWay .recommendedListBox ul li a .rowBox .row .con {
font-size: 20px;
font-weight: bold;
line-height: 20px;
margin-right: auto;
padding-left: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-wrap: break-word;
line-height: 1.1em;
width: 100%;}
article.recommendedWay .recommendedListBox ul li a .rowBox .row:after {
content: '';
position: absolute;
left: 0px;
top: 30%;
transform: translateY(-50%);
width: 5px;
height: 5px;
z-index: 2;
background-color: #3182f6;
border: 1.5px solid #1e6cdb;
border-radius: 50%; }
/*article.recommendedWay .recommendedListBox ul li a .rowBox .row + .row {
margin-top: 6px; }*/
article.recommendedWay .recommendedListBox ul li a .rowBox .row.end:after {
background-color: #ff6b5f;
border: 1.5px solid #ed5f54;}
article.recommendedWay .recommendedListBox ul li a .rowBox .row .sbox {
width: 100%;
height: 24px; }
section.first-section {
padding-top: 32px; }
article.input__form .top-info-txt {
font-size: 16px;
line-height: 24px;
padding-bottom: 32px; }
article.input__form .form__info__box {
background: #fff url("../img/admin-img@3x.png") no-repeat top 24px left 24px/40px 40px;
padding: 24px 27px 24px 88px;
font-size: 14px;
line-height: 22px;
margin-bottom: 47px;
border-radius: 12px;
word-break: keep-all; }
article.input__form .input__form__menu {
text-align: center;
padding: 47px 0 56px; }
article.input__form .input__form__menu a {
display: inline-flex;
width: 140px;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: #0493FC;
border: 1.5px solid #0493FC;
box-shadow: 0 16px 24px 0 rgba(49, 130, 246, 0.3);
color: #fff;
line-height: 24px;
font-size: 20px;
font-weight: bold;
width: 100%;}
article.input__form .input__form__list.agree{
margin-top:30px;
}
article.input__form .input__form__list.agree .row .cbox .txt{
font-weight: bold;
}
article.input__form .input__form__list.agree.sub{
margin-top:10px;
font-size: 10px;
}
article.input__form .input__form__list.agree .row{
padding-bottom: 10px;}
article.input__form .input__form__list.agree.sub .row{
border:none;
}
article.input__form .input__form__list.agree.sub .row .cbox{
width: 100%;
}
article.input__form .input__form__list.agree.sub .row .cbox .txt{
font-weight: bold;
}
article.input__form .input__form__list.agree.sub .row span.icon{
width: 15px;
height: 15px;
background: url(../img/ic_link.png) no-repeat;
background-size: contain;
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
}
article.input__form .input__form__list .row{
display: flex;
width: 100%;
border-bottom: 1px solid #e9ecef;}
article.input__form .input__form__list .row{
display: flex;
width: 100%;
border-bottom: 1px solid #e9ecef;}
article.input__form .input__form__list .row_sub{
margin-top:5px;
width: 100%;
color : red;
text-align: right;
margin-bottom: 24px;}
article.input__form .input__form__list .row + .row {
margin-top: 24px;
}
article.input__form .input__form__list .row .subject {
padding-bottom: 4px;
display: flex;
width:90px;
align-items: center;
position: relative;}
article.input__form .input__form__list .row .subject .txt {
display: inline-block;
vertical-align: middle;
position: relative;
font-size: 20px;
line-height: 20px;
font-weight: bold;
height: 40px;
display: flex;
align-items: center;}
article.input__form .input__form__list .row .subject .txt.ess:after {
content: '';
position: absolute;
right: -6px;
top: -6px;
width: 4px;
height: 4px;
background-color: #f03d3e; }
article.input__form .input__form__list .row .subject .sub-txt{
font-size:11px;
color:#A6A6A6;
padding-top: 5px;
position: absolute;
top: -10px;
right: 0;
}
article.input__form .input__form__list .row .subject .sub-txt.ess{
color:#f03d3e;
}
article.input__form .input__form__list .row .subject .sub-txt.more-top{
top:-20px;
}
article.input__form .input__form__list .row .con{
flex: 1;
margin-bottom: 5px;
}
article.input__form .input__form__list .row .con .img-upload-list {
overflow-x: auto;
padding-bottom: 8px;
font-size: 0; }
article.input__form .input__form__list .row .con .img-upload-list ul {
white-space: nowrap; }
article.input__form .input__form__list .row .con .img-upload-list ul li {
display: inline-block;
vertical-align: middle;
width: 88px;
height: 88px;
position: relative; }
article.input__form .input__form__list .row .con .img-upload-list ul li + li {
margin-left: 8px; }
article.input__form .input__form__list .row .con .img-upload-list ul li .del-btn {
width: 16px;
height: 16px;
position: absolute;
right: 4px;
top: 4px;
background: url("../img/upload_del@3x.png") no-repeat center/cover; }
article.input__form .input__form__list .row .con .img-upload-list ul li a.img-upload-btn {
display: block;
height: 100%;
position: relative;
border: 1px solid #e9ecef;
border-radius: 4px;
background: #fff url("../img/upload_camera@3x.png") no-repeat center/32px 32px; }
article.input__form .input__form__list .row .con .img-upload-list ul li a.img-upload-btn .current-state {
position: absolute;
right: 8px;
text-align: right;
bottom: 8px; }
article.input__form .input__form__list .row .con .img-upload-list ul li a.img-upload-btn .current-state .now {
display: inline-block;
vertical-align: middle;
color: #3182f6;
font-size: 12px;
line-height: 16px; }
article.input__form .input__form__list .row .con .img-upload-list ul li a.img-upload-btn .current-state .max {
display: inline-block;
vertical-align: middle;
font-size: 12px;
color: #8f959c;
line-height: 16px; }
article.input__form .input__form__list .row .con .img-upload-list ul li .img-box {
height: 100%;
border-radius: 4px; }
article.input__form .input__form__list .row .con .img-upload-list ul li .img-box img {
max-width: 100%;
max-height: 100%; }
article.input__form .input__form__list .row .con .img-upload-txt {
line-height: 20px;
font-size: 13px;
color: #999; }
article.input__form .input__form__list .row .btn {
margin-left: auto;
}
article.input__form .input__form__list .row .btn .check-btn{
border: 2px solid #dee2e6;
border-radius: 10px;
padding: 5px;
height: 40px;
display: flex;
align-items: center;
text-align: center;
color: #0493FC;
font-weight: bold;}
article.board__list .list__wrap {
font-size: 0; }
article.board__list .list__wrap ul li {
border-bottom: 1px solid #8C8C8C; }
article.board__list .list__wrap ul li.none{
border: none;
height: calc(100vh - 150px);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; }
article.board__list .list__wrap ul li.none span{
display: block;
margin-top: 10px;
font-size: 25px;
color: #b3b3b3;}
article.board__list .list__wrap ul li.line-none{
border-bottom: none }
article.board__list .list__wrap ul li a.top-box {
width: 100%;
position: relative;
padding: 14px 24px; }
article.board__list .list__wrap ul li a.top-box.on ~ .bottom-box {
display: block; }
article.board__list .list__wrap ul li a.top-box .info-box {
padding-bottom: 4px;
height: 30px;
font-size: 22px;
font-weight: bold;
display: flex;
}
article.board__list .list__wrap ul li a.top-box .info-box.simple {
margin-top:10px;
}
article.board__list .list__wrap ul li a.top-box .info-box .txt {
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px; }
article.board__list .list__wrap ul li a.top-box .info-box .txt.type-1 {
color: #175fec;
font-weight: bold;}
article.board__list .list__wrap ul li a.top-box .info-box .btn{
margin-left: auto;
font-size: 18px;
border: 1px solid;
padding: 5px 12px;
font-weight: bold;
height: 30px;
margin-top: -3px;
}
article.board__list .list__wrap ul li a.top-box .subject-box {
font-size: 18px;
line-height: 24px;
padding-right: 10px;
display: inline-flex;
align-items: center;}
article.board__list .list__wrap ul li a.top-box .subject-box .chat_text{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-wrap: break-word;
width: 100%;}
article.board__list .list__wrap ul li a.top-box .subject-box .label-txt {
display: inline-block;
vertical-align: middle;
border-radius: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
height: 16px;
padding: 0 4px;
margin-left: 8px;
font-size: 10px; }
article.board__list .list__wrap ul li a.top-box .subject-box .label-txt.type-1 {
background-color: #f03d3e;
color: #fff; }
article.board__list .list__wrap ul li a.top-box .sub-box {
font-size: 14px;
line-height: 20px;
color: #8f959c;
padding-top: 4px;
margin-left: auto;}
article.board__list .list__wrap ul li .bottom-box {
background-color: #f8f9fa;
padding: 24px;
display: none; }
article.board__list .list__wrap ul li .bottom-box .con-box {
font-size: 14px;
line-height: 20px; }
article.board__list .list__wrap ul li .bottom-box .con-box img {
max-width: 100%; }
article.board__list .list__wrap ul li .bottom-box .answer-box {
padding-top: 24px;
margin-top: 24px;
font-size: 0;
border-top: 1px solid #e9ecef; }
article.board__list .list__wrap ul li .bottom-box .answer-box .profile-box {
width: 40px;
height: 40px;
display: inline-block;
vertical-align: top; }
article.board__list .list__wrap ul li .bottom-box .answer-box .profile-box img {
width: 40px;
height: 40px; }
article.board__list .list__wrap ul li .bottom-box .answer-box .profile-con-box {
display: inline-block;
vertical-align: top;
padding-left: 16px;
width: calc(100% - 40px); }
article.board__list .list__wrap ul li .bottom-box .answer-box .profile-con-box .top-info-box .txt {
display: inline-block;
vertical-align: middle;
font-size: 14px;
font-weight: 500;
line-height: 20px; }
article.board__list .list__wrap ul li .bottom-box .answer-box .profile-con-box .top-info-box .sub-txt {
padding-left: 8px;
display: inline-block;
vertical-align: middle;
font-size: 14px;
line-height: 20px;
color: #8f959c; }
article.board__list .list__wrap ul li .bottom-box .answer-box .profile-con-box .bottom-info-box {
padding: 8px 0;
font-size: 14px;
line-height: 20px; }
article.basic__list__form {
font-size: 0;
padding-bottom: 40px; }
article.basic__list__form.paddingb20 {
font-size: 0;
padding-bottom: 20px; }
article.basic__list__form .setting-box .setting-tit {
background-color: #f8f9fa;
padding: 8px 24px;
line-height: 20px;
font-size: 13px;
color: #6d747a; }
article.basic__list__form .setting-box .setting-list .profileBox {
margin: 24px;
margin-bottom: 0px;
padding-bottom: 24px;
display: flex;
border-bottom: 1px solid #8C8C8C;
font-family: GmarketSans;
}
article.basic__list__form .setting-box .setting-list .profileBox .img_box{
width: 65px;
height: 65px;
border-radius: 50%;
overflow: hidden;
margin-right: 5px;
display: inline-block;
border :1px solid #8C8C8C;
}
article.basic__list__form .setting-box .setting-list .profileBox .img_box img{
width: 65px;
height: 65px;
}
article.basic__list__form .setting-box .setting-list .profileBox .infoBox{
display: flex;
padding: 10px 20px;
flex-direction: column;
}
article.basic__list__form .setting-box .setting-list .profileBox .btn{
font-size: 12px;
margin-top:3px;
font-weight: bold;
text-align: center;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
padding: 15px 15px;
height: 25px;
border: 1px solid #7D7D7D;
}
article.basic__list__form .setting-box .setting-list .profileBox .infoBox .name{
font-size: 20px;
font-weight: bold;
}
article.basic__list__form .setting-box .setting-list .profileBox .infoBox .info{
font-size: 16px;
margin-top:3px;
font-weight: 500;
color: #7D7D7D;
}
article.basic__list__form .setting-box .setting-list ul li {
font-size: 0;
border-bottom: 1px solid #f1f3f5;
background-color: #fff;
position: relative; }
article.basic__list__form .setting-box .setting-list ul li > a {
display: flex;
align-items: center;
width: 100%;
position: relative;
z-index: 1;
padding: 0 24px;
line-height: 26px;
font-size: 17px;
height: 74px;
background: url("../img/ic_link.png") no-repeat center left 24px/20px 20px; }
article.basic__list__form .setting-box .setting-list ul li > a.company {
background: url("../img/ic_company_mgt.png") no-repeat center left 24px/22px 22px; }
article.basic__list__form .setting-box .setting-list ul li > a.notice {
background: url("../img/ic_notice.png") no-repeat center left 24px/22px 22px; }
article.basic__list__form .setting-box .setting-list ul li > a.terminal {
background: url("../img/post.png") no-repeat center left 24px/20px 20px; }
article.basic__list__form .setting-box .setting-list ul li > a.customer-center {
background: url("../img/ic_operator.png") no-repeat center left 19px/28px 28px; }
article.basic__list__form .setting-box .setting-list ul li > a.term1 {
background: url("../img/post.png") no-repeat center left 24px/20px 20px; }
article.basic__list__form .setting-box .setting-list ul li > a.term2 {
background: url("../img/post.png") no-repeat center left 24px/20px 20px; }
article.basic__list__form .setting-box .setting-list ul li > a.userexit {
background: url("../img/post.png") no-repeat center left 24px/20px 20px; }
article.basic__list__form .setting-box .setting-list ul li > a.logout {
background: url("../img/logout.png") no-repeat center left 24px/20px 20px; }
article.basic__list__form .setting-box .setting-list ul li > a.toggle {
background: none; }
article.basic__list__form .setting-box .setting-list ul li > a span {
margin-left: 30px; }
article.basic__list__form .setting-box .setting-list ul li .text-box {
z-index: 10;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%); }
article.basic__list__form .setting-box .setting-list ul li .text-box .txt {
font-size: 14px;
line-height: 20px;
letter-spacing: 0;
color: #8f959c; }
article.basic__list__form .setting-box .setting-list ul li .toggle-box {
z-index: 10;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%); }
article.basic__list__form .setting-box .setting-list ul li .toggle-box .toggle-btn {
display: inline-block;
vertical-align: middle;
position: relative;
width: 40px;
height: 24px;
line-height: 24px;
border-radius: 100px;
color: #fff;
font-weight: 500;
font-size: 10px;
background-color: #CED4DA; }
article.basic__list__form .setting-box .setting-list ul li .toggle-box .toggle-btn.off:before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 7px; }
article.basic__list__form .setting-box .setting-list ul li .toggle-box .toggle-btn.off:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 2px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
transition: left 0.3s ease-out; }
article.basic__list__form .setting-box .setting-list ul li .toggle-box .toggle-btn.on {
background-color: #3182f6; }
article.basic__list__form .setting-box .setting-list ul li .toggle-box .toggle-btn.on:before {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px; }
article.basic__list__form .setting-box .setting-list ul li .toggle-box .toggle-btn.on:after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 18px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
transition: left 0.3s ease-out; }
article.login__form .logo_box {
width: 191px;
height: 39px;}
article.login__form .logo {
background: url("../img/logo@3x.png") no-repeat center/cover;
width: 191px;
height: 39px;
margin: 150px auto 0; }
article.login__form .login__form__box {
padding: 32px 24px 28px; }
article.login__form .login__form__box .row {
border-bottom: 1px solid #e9ecef; }
article.login__form .login__form__box .row.none {
border-bottom: 0px solid #fff; }
article.login__form .login__form__box .row + .row {
margin-top: 12px; }
article.login__form .login__form__menu {
text-align: center;
padding: 0px 24px 0px;}
article.login__form .login__form__menu .ok-btn {
display: inline-flex;
width: 100%;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 10px;
background-color: #16165C;
border: 1.5px solid #16165C;
box-shadow: 0 16px 24px 0 rgba(22, 22, 92, 0.3);
color: #fff;
line-height: 24px;
font-size: 16px;
font-weight: 700; }
article.login__form .login__form__menu .img {
display: inline-flex;
height: auto;
margin-left: 10px;}
article.login__form .login__form__menu .kakao-btn {
display: inline-flex;
width: 100%;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid #fee500;
background: #fee500 20% center no-repeat;
color: #191919;
line-height: 24px;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;}
article.login__form .login__form__menu .naver-btn {
display: inline-flex;
width: 100%;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #03c75a 20% center no-repeat;
border: 1px solid #03c75a;
color: #ffffff;
line-height: 24px;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;}
article.login__form .login__form__menu .google-btn {
display: inline-flex;
width: 100%;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #ffffff 20% center no-repeat;
color: #666;
border: 1px solid #cccccc;
line-height: 24px;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;}
article.login__form .login__form__menu .apple-btn {
display: inline-flex;
width: 100%;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #000 20% center no-repeat;
color: #fff;
border: 1px solid #000;
line-height: 24px;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;}
article.login__form .login__form__sub__menu {
font-size: 0;
text-align: center;
padding: 20px 0 32px; }
article.login__form .login__form__sub__menu a {
display: inline-block;
vertical-align: middle;
position: relative;
line-height: 22px;
font-size: 13px;
color: #8f959c; }
article.login__form .login__form__sub__menu a + a {
margin-left: 17px; }
article.login__form .login__form__sub__menu a.find_pw-btn {
display: inline-block;
vertical-align: middle;
position: relative;
line-height: 22px;
font-size: 13px;
color: #8f959c;
position: absolute;
left: 24px;}
article.login__form .login__form__sub__menu a.join-btn {
display: inline-block;
vertical-align: middle;
position: relative;
line-height: 22px;
font-size: 13px;
color: #8f959c;
position: absolute;
right: 24px;}
/*article.login__form .login__form__sub__menu a + a:after {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 11px;
background-color: #dee2e6; }*/
.tableBox{
width: 100%;
padding: 10px;
margin-top: 10px;
}
.tableBox.white{
width: 100%;
padding: 0px 10px;
margin-top: 0px;
}
.tableBox .subject{
font-size: 18px;
font-weight: bold;
}
.tableBox table{
border-top: 1px solid #000;
border-bottom: 1px solid #000;
margin-top: 10px;
}
.tableBox.white table{
border:none;
width: 100%;
padding: 10px;
margin-top: 10px;
background: white;
table-layout: fixed;
}
.tableBox table tr{
border-bottom: 1px solid #D5D5D5;
}
.tableBox.white table tr.titBox{
height: 35px;
text-align: center;
background: #C1E0FF;
font-weight: bold;
border: 1px solid #C1E0FF;
}
.tableBox table tr:last-child{
border-bottom: 1px solid #000;
}
.tableBox.white table tr:last-child{
border-bottom: none;
}
.tableBox table td.tit{
margin-top: 10px;
width: 20%;
height: 35px;
text-align: center;
font-weight: bold;
background-color: #f8f9fa;
line-height: 20px;
}
.tableBox table td.tit.f15{
font-size: 15px;
}
.tableBox table td.tit.more{
font-size: 12px;
}
.tableBox.white table td.tit{
margin-top: 10px;
width: 25%;
height: 35px;
text-align: center;
font-weight: bold;
background-color: #fff;
border-right: 1px solid #D5D5D5;
}
.tableBox table td.tit-s{
margin-top: 10px;
width: 15%;
height: 35px;
text-align: center;
font-weight: bold;
background-color: #f8f9fa;
}
.tableBox table td.tit-s.f15{
font-size: 15px;
}
.tableBox.white table td.tit-s{
margin-top: 10px;
width: 15%;
height: 35px;
text-align: center;
font-weight: bold;
background-color: #fff;
}
.tableBox.white table td.tit.bgorange{
background-color: #FFA15D;
color:#fff;
}
.tableBox table td.con{
}
.tableBox table td.con.flex{
display:flex;
}
.tableBox table td.con.flex .txt-box{
flex:1;
display:flex;
align-items: center;
}
.tableBox table td.con.flex .txt-box span{
padding:6px 10px 3px 10px;
font-weight: bold;
margin-top:3px;
margin-left:10px;
border-radius: 5px;
}
.tableBox table td.con.flex .txt-box span.blue{
color: #23427b;
background-color: rgba(202, 238, 251, 0.5);
}
.tableBox table td.con.flex .txt-box span.green{
color: #35CEA0;
background-color: rgba(53, 206, 160, 0.2);
}
.tableBox table td.con.flex .txt-box span.orange{
color: #e9660d;
background-color: #fbe5d6;
}
.tableBox table td.con .scroll-box{
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
display: block;
margin: 0 10px;
}
.tableBox table td.con .scroll-box::-webkit-scrollbar {
width: 8px; /* 스크롤바의 너비 */
height: 4px;
}
.tableBox table td.con .scroll-box::-webkit-scrollbar-thumb {
height: 30%; /* 스크롤바의 길이 */
background: #6D87B9; /* 스크롤바의 색상 */
border-radius: 10px;
}
.tableBox table td.con .scroll-box::-webkit-scrollbar-track {
background: rgba(109, 135, 185, .1); /*스크롤바 뒷 배경 색상*/
}
.tableBox table td.con .scroll-box span{
display: flex;
height: 20px;
align-items: center;
}
.tableBox table td.con input[type=text]{
width: 100%;
padding-left: 10px;
height: 35px;
}
.btnBox{
padding: 20px;
text-align: center;
margin-top: 30px;
}
.btnBox .btn{
border: 1px solid #D5D5D5;
padding: 10px 50px;
background: #fff;
font-weight: bold;
border-radius: 10px;
font-size: 20px;
}
.ruleBox{
width: 100%;
padding: 10px;
margin-top: 10px;
}
.ruleBox .subject{
font-size: 18px;
font-weight: bold;
}
.ruleBox .txt{
font-size: 12px;
font-weight: bold;
color : #D5D5D5;
padding: 3px 5px;
line-height: 16px;
word-break: keep-all;
}
.checkText{
width: 100%;
height: 50px;
margin-top:30px;
text-align: center;
font-weight : bold;
}
.signLine{
width: 100%;
height: 50px;
margin-top:5px;
text-align: center;
font-weight : bold;
display: flex;
align-items: center;
padding:10px;
justify-content: end;
}
.signLine .signBox{
width: 100px;
height: 50px;
border: 1px solid;
margin-left:20px;
}
.signLine .signBox img{
width: 100px;
height: 50px;
}
.footer-companyInfo{
width: 100%;
height: 50px;
margin-top:30px;
font-weight : bold;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.footer-companyInfo img.logo{
width: 30px;
height: 30px;
margin-left:10px;
}
.footer-companyInfo .txt{
margin-left:10px
}
article.login__form .login__form__corp {
text-align: center; }
article.login__form .login__form__corp a {
display: inline-block;
vertical-align: middle;
text-decoration: underline;
text-underline-position: under;
text-underline-color: #3182f6;
color: #3182f6;
line-height: 22px;
font-size: 13px; }
article.popup {
position: fixed;
z-index: 501;
top : 0;
width: 100%;
height: 100%;
background-color:rgba(0, 0, 0, 0.2);
display: none;}
article.popup.full {
position: absolute;
margin-left: 100%; }
article.popup .popup-wrap {
margin: auto;
max-width: 620px;
width: calc(100% - 48px);
background-color: #fff;
margin-top:50%;
z-index: 505;}
article.popup.full .popup-wrap {
max-width: 100%;
width: 100%;
height: 100%;
margin-top:0px;}
article.popup .popup-wrap .popup-body {
padding: 24px; }
article.popup.full .popup-wrap .popup-body {
max-width: 750px;
margin: 0 auto; }
article.popup .popup-wrap .popup-body .popup-tit {
line-height: 30px;
font-size: 20px;
padding-bottom: 24px; }
article.popup .popup-wrap .popup-body .popup-con .find__result {
height: 112px;
font-size: 16px;
line-height: 24px;
display: flex;
background-color: #f1f3f5;
align-items: center;
justify-content: center;
margin-bottom: 8px; }
article.popup .popup-wrap .popup-body .popup__form .row .select_radio_menu .tabs {
position: relative;
padding: 0;
display: flex;}
article.popup .popup-wrap .popup-body .popup__form .row .select_radio_menu .tab {
float: left;
padding: 10px 0;
flex: 1 }
article.popup .popup-wrap .popup-body .popup__form .row .select_radio_menu .tab label {
position: relative;
background: #eee;
padding: 8px 20px;
border: 1px solid #ccc;
width: 100%;
text-align: center;
height: 44px;
padding: 13px;}
article.popup .popup-wrap .popup-body .popup__form .row .select_radio_menu .tab [type="radio"] {
display: none;}
article.popup .popup-wrap .popup-body .popup__form .row .select_radio_menu .tab [type="radio"]:checked ~ label {
background: #3182f6;
color : white;
z-index: 2;}
article.popup .popup-wrap .popup-body .popup__form .row + .row {
margin-top: 16px; }
article.popup .popup-wrap .popup-body .popup__form .row .subject {
padding-bottom: 4px; }
article.popup .popup-wrap .popup-body .popup__form .row .subject .txt {
display: inline-block;
vertical-align: middle;
position: relative;
font-size: 14px;
line-height: 20px; }
article.popup .popup-wrap .popup-body .popup__form .row .subject .txt.ess:after {
content: '';
position: absolute;
right: -6px;
top: -2px;
width: 4px;
height: 4px;
background-color: #f03d3e; }
article.popup .popup-wrap .popup-body .popup__form .row .con .input-box input {
height: 48px;
border: 1px solid #dee2e6; }
article.popup .popup-wrap .popup-menu {
font-size: 0; }
article.popup.full .popup-wrap .popup-menu {
font-size: 0;
position: absolute;
width: 100%;
bottom: 20px;}
article.popup .popup-wrap .popup-menu a {
display: inline-flex;
width: 50%;
height: 56px;
align-items: center;
justify-content: center;
color: #fff;
line-height: 24px;
font-size: 16px;
font-weight: 700; }
article.popup .popup-wrap .popup-menu a.full {
width: 100%; }
article.popup .popup-wrap .popup-menu a.cancel-btn {
background-color: #8f959c; }
article.popup .popup-wrap .popup-menu a.ok-btn {
background-color: #3182f6; }
/* chat 챗방 */
div.chat_page {
width: 100%;
}
div.chat_page ul {
padding: 0px 15px 12px;
overflow-y: auto;
height: calc(100vh - 110px);
}
div.chat_page ul li {
position: relative;
}
div.chat_page ul li.date_txt > p {
font-size: 1.2rem;
margin: 10px 0 22px;
text-align: center;
}
div.chat_page div.left_box div.img_box {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 5px;
display: inline-block;
position: absolute;
}
div.chat_page div.left_box div.img_box img {
width: 100%;
height: 100%;
}
div.chat_page div.left_box div.name{
margin-left: 45px;
font-size: 15px;
margin-top: 5px;
}
div.chat_page div.text_box {
font-size: 0.8rem;
display: inline-block;
border-radius: 8px;
padding: 8px 10px;
vertical-align: bottom;
margin-bottom: 12px;
text-align: left;
min-height: 35px;
min-width: 10%;
}
div.chat_page div.text_box > p.txt {
overflow-wrap: break-word;
}
div.chat_page div.left_box div.text_box {
color: #1a1a1a;
background-color: #e6e6e6;
max-width: 45%;
font-size: 20px;;
line-height: 20px;
word-break: keep-all;
margin-left: 45px;
margin-top: 2px;
}
div.chat_page div.left_box div.text_box img{
max-width: 100%;
}
div.chat_page div.left_box span.time {
color: #9c9c9c;
font-size: 0.8rem;
position: absolute;
bottom: 11px;
padding-left: 5px;
}
div.chat_page div.right_box {
text-align: right;
}
div.chat_page div.right_box div.text_box {
color: #fff;
background-color: #FDE500;
max-width: 45%;
font-size: 20px;
/* min-width: 45%; */
line-height: 20px;
word-break: keep-all;
}
div.chat_page div.right_box div.text_box img{
max-width: 100%;
}
div.chat_page div.right_box span.time {
color: #9c9c9c;
font-size: 0.8rem;
position: absolute;
bottom: 10px;
transform: translateX(-42px);
}
div.writing_box {
width: 100%;
background-color: #ededed;
text-align: center;
padding: 15px;
padding-left: 12px;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-between;
/* align-items: flex-end;
height: 60px; */
max-width: 750px;
left: 50%;
transform: translateX(-50%);
}
div.writing_box > div {
vertical-align: bottom;
}
div.writing_box > div.btn {
margin-top: 8px;
}
div.writing_box > div.text {
width: 100%;
background-color: #fff;
border-radius: 25px;
padding: 0px 20px;
}
div.writing_box textarea {
background-color: transparent;
margin: 5px 0;
width: 100%;
line-height: 20px;
min-height: 20px;
max-height: 60px;
font-family: 'NanumSquareR';
transform: skew(-0.1deg);
height: 20px;
resize: none;
}
div.writing_box textarea.chating {
height: 60px;
}
div.writing_box span.icon.plus {
display: inline-block;
z-index: 10;
width: 23px;
height: 16px;
background: url(../img/plus_dg.png) no-repeat;
background-size: contain;
margin-bottom: 4px;
margin-right: 4px;
}
div.writing_box span.icon.send {
display: inline-block;
z-index: 10;
width: 23px;
height: 20px;
background: url(../img/send_dg.png) no-repeat;
background-size: contain;
margin-bottom: 3px;
margin-left: 10px;
}
/* 이용정보 */
header div.header_line {
width: 100%;
border-bottom: 1px solid #ddd;
}
div.f_info_page {
width: 100%;
padding: 15px;
padding-bottom: 35px;
background: #fff;
}
div.f_info_page div.top_conts {
font-size: 15px;
line-height: 22px;
font-family: 'NanumSquareR';
word-break: keep-all;
}
div.f_info_page div.top_conts .b {
font-family: 'NanumSquareB';
}
div.f_info_page div.top_conts p.tit {
font-family: 'NanumSquareB';
margin-bottom: 10px;
margin-top: 35px;
font-size: 16px;
}
div.f_info_page div.top_conts p.txt {
margin-bottom: 10px;
}
div.f_info_page div.top_conts div.cont0 ul li {
margin-bottom: 5px;
list-style: disc;
line-height: 26px;
}
div.f_info_page div.top_conts div.cont3 > ul > li {
margin-bottom: 5px;
line-height: 22px;
text-indent: -18px;
padding-left: 18px;
/* padding-left: 15px; */
}
div.f_info_page div.top_conts div.cont5 > ul > li {
margin-bottom: 5px;
line-height: 22px;
text-indent: -18px;
padding-left: 18px;
}
div.f_info_page div.top_conts div.cont3 > ul > li ul li {
text-indent: -0px;
}
div.f_info_page div.top_conts div.cont3 > ul {
margin-left: 10px;
}
div.f_info_page div.top_conts div.cont4 > ul {
margin-left: 15px;
}
div.f_info_page div.top_conts div.cont1 ul {
margin-bottom: 10px;
}
div.f_info_page div.top_conts div.cont0 ul {
margin-left: 20px;
}
/* div.f_info_page div.top_conts ul li.flex {
display: flex;
} */
div.f_info_page div.top_conts div.cont0.fr ul li ul {
padding-left: 50px;
transform: translateY(-26px);
}
div.f_info_page div.top_conts div.cont0 ul li ul li {
margin-bottom: 5px;
list-style: none;
line-height: 22px;
}
div.f_info_page div.top_conts div.cont1 p.txt {
margin-bottom: 10px;
}
div.f_info_page div.top_conts div.cont1 table {
margin-bottom: 15px;
}
div.f_info_page div.top_conts div.cont1 table th,
div.f_info_page div.top_conts div.cont1 table td {
border: 1px solid #888;
text-align: left;
font-size: 14px;
padding: 5px;
line-height: 20px;
}
div.f_info_page div.top_conts div.cont1 table thead tr {
background-color: #d1d1d1;
}
div.f_info_page div.top_conts div.cont1.ttable table thead tr {
background-color: transparent;
}
div.f_info_page div.top_conts div.cont1 table tbody tr:nth-child(2n) {
background-color: #f7f7f7;
}
div.f_info_page div.top_conts div.cont1 table tbody td {
width: 25%;
vertical-align: inherit;
}
div.f_info_page div.top_conts div.cont1.ttable table thead tr th {
font-weight: 400;
}
div.f_info_page div.top_conts div.cont1.ttable table tbody tr td:nth-child(2) {
width: 50%;
}
div.f_info_page div.top_conts div.cont1.ttable table tbody tr td:nth-child(2) ol li {
text-indent: -10px;
padding-left: 10px;
font-weight: 700;
}
div.f_info_page div.top_conts div.cont1.ttable table tbody tr td:nth-child(2) ol li::before {
content: '-\a0';
}
div.f_info_page div.top_conts div.cont6 ul {
padding-left: 15px;
}
div.f_info_page div.top_conts div.cont6 ul li {
margin-bottom: 5px;
margin-top: 5px;
line-height: 22px;
text-indent: -10px;
padding-left: 10px;
}
div.f_info_page div.top_conts div.cont6 {
max-width: 651px;
}
div.f_info_page div.top_conts div.cont6 p.tit {
margin-top: 20px;
}
div.f_info_page div.top_conts > p.tit {
margin-top: 50px;
}
/* withdraw 회원탈퇴 */
div.depl_withdraw {
min-height: calc(100vh - 200px);
/* padding-bottom: 64px; */
}
div.depl_withdraw h5 {
font-size: 18px;
/* font-size: 16px; */
padding: 25px 10px;
font-weight: 400;
line-height: 23px;
text-align: center;
/* text-indent: -10px;
padding-left: 20px; */
word-break: keep-all;
}
div.depl_withdraw > p {
font-size: 15px;
padding: 0px 10px 40px;
font-weight: 400;
line-height: 22px;
word-break: keep-all;
color: #666;
}
/* div.depl_withdraw h5::before {
content: '*\a0';
} */
div.depl_withdraw ul li {
width: 100%;
border-radius: 0;
padding: 25px;
box-shadow: none;
background-color: #fff;
border-bottom: 1px solid #e8e8e8;
margin-bottom: 15px;
padding-bottom: 0;
height: auto;
}
div.depl_withdraw ul li p.tit {
font-size: 18px;
margin-bottom: 15px;
word-break: keep-all;
}
div.depl_withdraw ul li p.txt {
font-size: 15px;
line-height: 20px;
font-family: 'NanumSquareR';
color: #666;
margin-bottom: 5px;
word-break: keep-all;
}
div.depl_withdraw ul li p.txt span {
/* font-family: 'NanumSquareB'; */
/* color: #333; */
}
div.depl_withdraw ul li div.btn_box {
width: 100%;
text-align: right;
margin-bottom: 20px;
}
div.depl_withdraw ul li div.btn_box a.btn {
background-color: #666666;
background-color: #959595;
color: #fff;
border-radius: 5px;
padding: 8px 20px;
font-weight: 400;
font-family: 'NanumSquareR';
}
div.depl_withdraw ul li div.btn_box a.btn.on {
background-color: #3182f6;
color: #fff;
}
div.depl_withdraw.depl_withdraw_detail {
text-align: center;
}
div.depl_withdraw.depl_withdraw_detail div.btn_box {
width: 100%;
text-align: center;
margin-bottom: 20px;
margin-top: 60px;
}
div.depl_withdraw.depl_withdraw_detail div.btn_box a.btn {
/* background-color: #666666; */
background-color: #3182f6;
color: #fff;
border-radius: 5px;
padding: 8px 35px;
font-weight: 400;
font-family: 'NanumSquareR';
margin: 0 8px;
}
div.depl_withdraw.depl_withdraw_detail div.btn_box a.btn:first-child {
border: 1px solid #e8e8e8;
background-color: #fff;
color: #333;
/* background-color: #666666; */
/* color: #fff; */
padding: 8px 20px;
}
div.depl_withdraw.depl_withdraw_detail ul li {
width: 100%;
border-radius: 0;
padding: 25px;
background-color: #fff;
border-bottom: 0;
margin-bottom: 0px;
height: auto;
padding-bottom: 0;
display: flex;
align-items: center;
max-width: 400px;
margin: auto;
}
div.depl_withdraw.depl_withdraw_detail ul {
/* width: 100%; */
width: 80%;
min-width: 340px;
margin: auto;
border-radius: 0;
box-shadow: none;
background-color: #fff;
border-bottom: 1px solid #e8e8e8;
padding-bottom: 25px;
height: auto;
}
div.depl_withdraw.depl_withdraw_detail ul li p.tit {
margin-right: 10px;
min-width: 120px;
text-align: left;
margin-bottom: 0;
}
div.depl_withdraw.depl_withdraw_detail ul input[type="password"] {
width: 100%;
border-radius: 5px;
background-color: #fff;
border: 1px solid #e8e8e8;
padding: 10px;
}
/* withdraw_clear 회원탈퇴 완료 */
div.depl_withdraw_end {
width: 100%;
margin: 80px auto;
text-align: center;
background-color: #fff;
padding-bottom: 60px;
}
div.depl_withdraw_end p:first-of-type {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
color: #333;
}
div.depl_withdraw_end p {
font-size: 14px;
line-height: 20px;
font-family: 'NanumSquareR';
color: #666;
margin-bottom: 5px;
word-break: keep-all;
}
div.depl_withdraw_end div.btn_box {
width: 100%;
text-align: center;
margin-bottom: 20px;
/* margin-top: 60px; */
}
div.depl_withdraw_end div.btn_box a.btn {
/* background-color: #666666; */
/* background-color: #8E14B8; */
background-color: #3182f6;
color: #fff;
border-radius: 5px;
padding: 8px 22px;
font-weight: 400;
font-family: 'NanumSquareR';
margin: 0 8px;
}
div.depl_withdraw_end h3.main_logo {
width: 200px;
height: 116px;
display: inline-block;
margin-bottom: 20px;
margin-top : 20px;
background: url(../img/logo.png) center center / contain no-repeat;
filter: hue-rotate(349deg);
}
/*
신규 UI 시작 배차, 업무, 인수증 목록
*/
section.bookingList ul#itemList li a{
padding:10px;
}
section.bookingList ul#itemList li .info-list{
display:flex;
flex-direction: column;
}
section.bookingList ul#itemList li .info-list .row{
height:35px;
display:flex;
}
section.bookingList ul#itemList li .info-list .row.big{
height:45px;
}
section.bookingList ul#itemList li .info-list .row.auto{
height:auto;
}
section.bookingList ul#itemList li .info-list .row + .row{
margin-top:5px;
}
section.bookingList ul#itemList li .info-list .row .item{
width:100%;
height:100%;
border-radius:5px;
display: flex;
}
section.bookingList ul#itemList li .info-list .row .item.loc:active .bg-w{
background-color: rgba(49,130,246,0.2);
}
section.bookingList ul#itemList li .info-list .row .item .color-box{
display: flex;
justify-content: center;
align-items: center;
width: 52px;
font-size:13px;
border-radius:5px;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.borrgt-none{
border-end-end-radius: 0px;
border-start-end-radius: 0px;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.w100{
width:100%;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.gray{
background-color:#F4F6F9;
color:#000;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.purple{
background-color:#ECD9FF;
color:#9326FF;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.orange{
background-color:#FFF1E7;
color:#FFA05B;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.red{
background-color:#FFEDED;
color:#FF6060;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.blue{
background-color:#DCEAF7;
color:#072665;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.blue2{
background-color:#E7ECFF;
color:#4442FF;
}
section.bookingList ul#itemList li .info-list .row .item .color-box.green{
background-color:#E1F8F1;
color:#3FD1A5;
}
section.bookingList ul#itemList li .info-list .row .item .info-box{
width:100%;
height:100%;
display: flex;
align-items: center;
background-color:#F4F6F9;
padding:10px;
border-radius:5px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.red{
background-color: #FFEDED;
color: #FF6060;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.green{
background-color: #E1F8F1;
color: #3FD1A5;
}
section.bookingList ul#itemList li .info-list .row .item .color-box + .info-box{
width:calc(100% - 40px);
}
section.bookingList ul#itemList li .info-list .row .item .sel-list{
width:100%;
background-color:#F4F6F9;
display: flex;
flex-direction: column;
padding:15px 10px 10px 10px;
height:auto;
}
section.bookingList ul#itemList li .info-list .row .item .sel-list li{
box-shadow: none;
font-size:13px;
font-weight:500;
height:25px;
padding-top:7px;
border-radius: 2px;
}
section.bookingList ul#itemList li .info-list .row .item .sel-list li:active{
background-color: #DCEAF7;
}
section.bookingList ul#itemList li .info-list .row .item .sel-list li + li{
margin-top:8px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.bg-w{
background-color:#fff;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.spa{
justify-content: space-around;
padding: 0;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.center{
justify-content: center;
padding: 0;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.borlf-none{
border-start-start-radius: 0px;
border-end-start-radius: 0px;
}
section.bookingList ul#itemList li .info-list .row .item + .item{
margin-left:5px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box span{
font-size:12px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box span.h25{
height:25px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.bg-w span{
font-size:16px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box span.tit{
min-width:40px;
width:auto;
}
section.bookingList ul#itemList li .info-list .row .item .info-box span.ellip{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
section.bookingList ul#itemList li .info-list .row .item .info-box i.icon-arrow{
width:30px;
height:20px;
background: url(/img/arrow_double.png) no-repeat center/30px 20px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box i.icon-calender{
width:25px;
height:25px;
background: url(/img/ic_calendar.png) no-repeat center/25px 25px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box i.icon-time{
width:25px;
height:25px;
background: url(/img/ic_time.png) no-repeat center/25px 25px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box i + span{
margin-left:10px;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.dropdown span.placeholder{
color:#A2A6B0;
width:calc(100% - 30px);
}
section.bookingList ul#itemList li .info-list .row .item .info-box.dropdown span.placeholder.black{
color:#000;
}
section.bookingList ul#itemList li .info-list .row .item .info-box.dropdown i.icon{
width:20px;
height:20px;
background: url(/img/ic_back.png) no-repeat center/20px 20px;
transform: rotate(-90deg);
}
section.bookingList ul#itemList li .info-list .row .item .info-box.dropdown i.icon.reverse{
width:20px;
height:20px;
background: url(/img/ic_back.png) no-repeat center/20px 20px;
transform: rotate(90deg);
}
section.bookingList ul#itemList li .info-list .row .item.bl{
width: 42%;
}
section.bookingList ul#itemList li .info-list .row .item.bl-color{
width:15%;
border-radius:10px;
}
section.bookingList ul#itemList li .info-list .row .item.bl .info-box span.tit{
font-size:11px;
width:40px;
}
section.bookingList ul#itemList li .info-list .row .item.bl .info-box span.tit.imp{
font-size:12px;
width:25px;
}
section.bookingList ul#itemList li .info-list .row .item.bl .info-box span.txt{
width:calc(100% - 40px);
}
section.bookingList ul#itemList li .info-list .row .item.w58per{
width: 58%;
}
section.bookingList ul#itemList li .info-list .row .item span + span{
margin-left:5px;
}
section.bookingList ul#itemList li .info-list .row.big .item .info-box span{
}
/*
신규 UI 끝
*/
/*
상, 하차 상태 및 연락UI 추가 시작
*/
section.bookingList ul#itemList li.none-shadow{
box-shadow : none;
}
section.bookingList ul#itemList li a.shadow{
box-shadow: 2px 2px 10px 5px #b3b3b3;
}
section.bookingList ul#itemList li .state-con-box{
display:flex;
height:45px;
width:100%;
}
section.bookingList ul#itemList li .state-con-box.top{
margin-bottom:5px;
}
section.bookingList ul#itemList li .state-con-box.bottom{
margin-top:5px;
}
section.bookingList ul#itemList li .state-con-box .state-box{
display: flex;
flex:0.63;
background-color: #D5D5D5;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 5px;
margin-right: 5px;
}
section.bookingList ul#itemList li .state-con-box .state-box.green{
background-color: rgba(53, 206, 160, 0.2);
}
section.bookingList ul#itemList li .state-con-box .state-box.green span{
color: #35CEA0;
}
section.bookingList ul#itemList li .state-con-box .state-box.blue{
background-color: rgba(202, 238, 251, 0.5);
}
section.bookingList ul#itemList li .state-con-box .state-box.blue span{
color: #23427b;
}
section.bookingList ul#itemList li .state-con-box .state-box.orange{
background-color: #fbe5d6;
}
section.bookingList ul#itemList li .state-con-box .state-box.orange span{
color: #e9660d;
}
section.bookingList ul#itemList li .state-con-box .state-box span{
color:#fff;
}
section.bookingList ul#itemList li .state-con-box .state-box .state{
font-size:16px;
}
section.bookingList ul#itemList li .state-con-box .state-box .sub{
font-size:11px;
}
section.bookingList ul#itemList li .state-con-box .state-box span + span{
margin-top:3px;
}
section.bookingList ul#itemList li .state-con-box .con-box{
flex:0.37;
display: flex;
flex-direction: column;
background-color: #D5D5D5;
border-radius: 5px;;
}
section.bookingList ul#itemList li .state-con-box .con-box.orange{
background-color: #FFE6DC;
}
section.bookingList ul#itemList li .state-con-box .con-box.blue{
background-color: #D6EBF9;
}
section.bookingList ul#itemList li .state-con-box .con-box .con-top{
display:flex;
justify-content: center;
align-items: center;
height:25px;
}
section.bookingList ul#itemList li .state-con-box .con-box .con-top i.icon.call{
width:15px;
height:15px;
margin-right:5px;
background: url(/img/icon_call.png) no-repeat center;
background-size:100% 100%;
}
section.bookingList ul#itemList li .state-con-box .con-box .con-top span{
font-size:14px;
padding-top: 4px;
}
section.bookingList ul#itemList li .state-con-box .con-box .con-date{
height: 14px;
display: flex;
justify-content: center;
border-top:1px solid #fff;
padding-top:4px;
}
section.bookingList ul#itemList li .state-con-box .con-box .con-date span{
font-size:10px;
}
section.bookingList ul#itemList li .state-con-box .con-box div + div{
margin-top:3px;
}
/*
상, 하차 상태 및 연락UI 추가 끝
*/
/*
기타 추가 UI 시작
*/
.tableBox table td.con i.icon-imp{
width:30px;
height:28px;
margin-right:10px;
margin-top:3px;
background: url(/img/icon_imp.png) no-repeat center;
background-size:100% 100%;
}
.tableBox.white table td.tit.bgblue{
background-color: #DCEAF7;
color: #072665;
}
/*
기타 추가 UI 끝
*/
/*
신규 상세페이지 UI 배차 상세 및 인수증 상세 시작 2025-06-25
*/
.wrapper .data-box{
padding:0px 10px;
}
.wrapper .data-box .info-list{
display: flex;
flex-direction: column;
margin-top:20px;
}
.wrapper .data-box .info-list h1{
font-weight: 500;
margin-bottom:10px;
}
.wrapper .data-box .info-list .row{
height: 40px;
display: flex;
}
.wrapper .data-box .info-list .row.big{
height:80px;
}
.wrapper .data-box .info-list .row + .row{
margin-top: 5px;
}
.wrapper .data-box .info-list .row .item{
width: 100%;
height: 100%;
border-radius: 5px;
display: flex;
}
.wrapper .data-box .info-list .row .item + .item{
margin-left:5px;
}
.wrapper .data-box .info-list .row .item .tit{
width:100px;
height:100%;
font-size:13px;
display: flex;
align-items: center;
justify-content: center;
background-color: #001E5E;
border-start-start-radius: 7px;
border-end-start-radius: 7px;
text-align: center;
font-family: 'GmarketSans', 'AppleSDGothicNeo'
}
.wrapper .data-box .info-list .row .item .tit span{
color:#fff;
font-weight: bold;
}
.wrapper .data-box .info-list .row .item .tit span.small{
font-size:12px;
line-height: 14px;
}
.wrapper .data-box .info-list .row .item .tit.bgsky{
background-color: #DCEAF7;
}
.wrapper .data-box .info-list .row .item .tit.bgsky span{
color:#000;
}
.wrapper .data-box .info-list .row .item .tit.bggreen{
background-color: #38CFA2;
}
.wrapper .data-box .info-list .row .item .tit.bggray{
background-color: #5D6069;
}
.wrapper .data-box .info-list .row .item .tit.bgorange{
background-color: #FFA15D;
}
.wrapper .data-box .info-list .row .item .tit.bgsal{
background-color: #fbe5d6;
}
.wrapper .data-box .info-list .row .item .tit.bgsal span{
color:#000;
}
.wrapper .data-box .info-list .row .item .tit.full{
flex:1;
border-radius: 7px;
font-size:14px;
}
.wrapper .data-box .info-list .row .item .tit.small{
width:65px;
}
.wrapper .data-box .info-list .row .item .tit span.ess::after{
content: "";
display: inline-block;
vertical-align: super;
margin-left: 5px;
margin-bottom: 2px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #fe4040;
}
.wrapper .data-box .info-list .row .item .tit span.bold{
font-size:17px;
font-weight: bold;
}
.wrapper .data-box .info-list .row .item .input-box{
height:100%;
display:flex;
justify-content: center;
align-items: center;
flex:1;
border-start-end-radius: 7px;
border-end-end-radius: 7px;
border: 1px solid #D5D5D5;
background-color: #fbfcfc;
}
.wrapper .data-box .info-list .row .item .input-box + .input-box{
margin-left:5px;
}
.wrapper .data-box .info-list .row .item .input-box.borfull{
border-radius: 7px;
}
.wrapper .data-box .info-list .row .item .input-box input{
height:100%;
border:none;
font-size:13px;
font-weight: 500;
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: 7px;
border-end-end-radius: 7px;
}
.wrapper .data-box .info-list .row .item .input-box textarea{
height:100%;
border:none;
font-size:13px;
border-start-start-radius: 0;
border-end-start-radius: 0;
border-start-end-radius: 7px;
border-end-end-radius: 7px;
resize: none;
padding:10px;
}
.wrapper .data-box .info-list .row .item .input-box label{
border: 1px solid #BABABA;
border-radius: 20px;
padding: 5px 10px;
height:30px;
min-width: 85px;
margin-top:5px;
text-align: center;
}
.wrapper .data-box .info-list .row .item .input-box label + label{
margin-left: 20px;
}
.wrapper .data-box .info-list .row .item .input-box input[type="checkbox"]{
width:32px;
height:28px;
border-radius: 5px;
border:1px solid #D5D5D5;
margin-top:6px;
margin-left:5px;
}
.wrapper .data-box .info-list .row .item .input-box input[type="radio"]{
width: 0px;
border:none;
margin: 0;
background-color: transparent;
}
.wrapper .data-box .info-list .row .item .input-box input[type="radio"]:active{
background-color: transparent;
}
.wrapper .data-box .info-list .row .item .input-box label:has(input[type="radio"]:checked){
border: 1px solid #394E93;
border-radius: 20px;
padding: 5px 0px;
background-color: rgba(189, 204, 247, 1);
color: #394E93;
}
.wrapper .data-box .info-list .row .item .input-box input[type="radio"]:checked{
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
margin-top: -2px;
background: url(/images/icon_mark_color.png) no-repeat center;
background-size: 60% 60%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
--pico-primary-focus: none;
--pico-background-color : transparent;
}
.wrapper .data-box .info-list .row .item .input-box select{
height: 100%;
border: none;
background-color: #fff;
font-size: 13px;
border-radius: 7px;
background-color: transparent;
}
.wrapper .data-box .info-list .row .item .input-box select.small{
width: 150px;
}
.wrapper .data-box .info-list .row .item .input-box select.red{
color:red;
}
.wrapper .data-box .info-list .row .item .input-box select.green{
color:green;
}
.wrapper .data-box .info-list .row .item .input-box.flex-center{
display:flex;
align-items: center;
}
.wrapper .data-box .info-list .row .item .input-box.flex-center input{
border-radius: 7px;
}
.wrapper .data-box .info-list .row .item .input-box.flex-center span{
color:#D5D5D5;
}
.wrapper .data-box .info-list .row .item .input-box .txt-span{
width:auto;
height:100%;
padding: 10px 15px;
font-size:13px;
}
.wrapper .data-box .info-list .row .item .input-box .txt{
flex:1;
height:100%;
padding-left:5px;
display: flex;
align-items: center;
}
.wrapper .data-box .info-list .row .item .input-box .txt span{
font-size: 13px;
padding: 7px 10px 5px 10px;
border-radius: 5px;
text-align: left;
display: block;
width: auto;
height: 23px;
display: flex;
align-items: center;
text-align: center;
font-weight: bold;
font-family: 'AppleSDGothicNeo', 'GmarketSans'
}
.wrapper .data-box .info-list .row .item .input-box .txt span.w50{
width:50px;
}
.wrapper .data-box .info-list .row .item .input-box .txt span.red{
background-color: rgba(255, 65, 65, 0.2);
color: #FF4141;
}
.wrapper .data-box .info-list .row .item .input-box .txt span.green{
color: #38CFA2;
background-color: rgba(56,207,162,0.2);
}
.wrapper .data-box .info-list .row .item .input-box .txt span.orange{
color: #e9660d;
background-color: #fbe5d6;
}
.wrapper .data-box .info-list .row .item .input-box .txt span.blue{
background-color: rgba(202, 238, 251, 1);
color: #375286;
}
.wrapper .data-box .info-list .row .item .input-box button{
font-size: 13px;
padding: 4px;
width:90px;
height:30px;
background-color: #fff;
color:#001E5E;
border-radius:20px;
margin-left: 5px;
margin-right:3px;
margin-top:4px;
}
.wrapper .data-box .info-list .row .item .input-box button:active{
background-color: #001E5E;
color:#fff;
}
.wrapper .data-box .info-list .row .item .input-box button.green{
color: #38CFA2;
border-color: #38CFA2;
}
.wrapper .data-box .info-list .row .item .input-box button.green:active{
background-color: #38CFA2;
color:#fff;
}
.wrapper .data-box .info-list .row .item .item-btn-box{
flex:1;
display:flex;
justify-content: end;
}
.wrapper .data-box .info-list .row .item .item-btn-box .btn{
width: auto;
height:30px;
padding:5px 15px;
border:1px solid #001E5E;
border-radius: 15px;
text-align: center;
color:#001E5E;
font-size: 13px;
}
.wrapper .data-box .info-list .row .imp-txt{
color:red;
font-size:13px;
display: block;
width: 100%;
text-align: end;
}
.wrapper .data-box .info-list .row .item .btn-box .btn:active{
background-color: #DCEAF7;
}
.wrapper .btn-box{
display:flex;
justify-content: center;
padding-top:10px;
}
.wrapper .btn-box button + button{
margin-left:10px;
}
.wrapper .data-box .info-list .sign-box{
width:100%;
display:flex;
justify-content: end;
}
.wrapper .data-box .info-list .sign-box .item{
width:100px;
}
.wrapper .data-box .info-list .sign-box .item + .item{
margin-left:10px;
}
.wrapper .data-box .info-list .sign-box .item .tit{
width:100%;
height: 30px;
font-size: 15px;
padding: 5px 5px;
background-color: #001E5E;
color: #fff;
text-align: center;
border-start-start-radius: 5px;
border-start-end-radius: 5px;
}
.wrapper .data-box .info-list .sign-box .item .tit span{
color: #fff;
font-size: 14px;
}
.wrapper .data-box .info-list .sign-box .item .sign{
width: 100px;
height: 70px;
border: 1px solid #DCEAF7;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper .data-box .info-list .sign-box .item .sign img{
width:100%;
height:100%;
}
.wrapper .btn-box{
width:100%;
height:70px;
display:flex;
background-color: #fff;
padding:0 10px;
padding-top:10px;
margin-top:15px;
}
.wrapper .btn-box button{
background: #001E5E;
color: #fff;
border-color: #001E5E;
width: 100%;
max-width: 150px;
height: 45px;
padding: 6px;
padding-top: 8px;
border-radius:5px;
font-size: 15px;
font-family: 'AppleSDGothicNeo', 'GmarketSans'
}
.wrapper .btn-box button.check{
background-color: #fff;
color: #001E5E;
}
.wrapper .btn-box button.check:active{
background-color: #001E5E;
color: #fff;
}
.wrapper .info-list .txt-box {
width:100%;
}
.wrapper .info-list .txt-box ul li{
box-shadow:none;
border-radius: 0;
font-size: 13px;
margin-top:0px;
}
.wrapper .info-list .txt-box ul li + li{
margin-left:0px;
margin-top:10px;
}
.wrapper .info-list .txt-box ul{
flex-direction: column;
}
.wrapper .info-list .txt-box ul li{
width:100%;
}
/*
신규 상세페이지 UI 배차 상세 및 인수증 상세 끝 2025-06-25
*/