@charset "utf-8";

/*-------------------------------------------------------------------
    파일정의 : 레이아웃
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
    @header
-------------------------------------------------------------------*/
#header {background: linear-gradient(90.19deg, #7950F2 77.91%, #462E8C 100%); position: relative; z-index: 999; min-width: 1600px;}
#header.on {}

#header .container {display: flex; align-items: center; height: 50px;}


.logo {width: 120px; height: 24px; background: url('../img/common/logo_1.png') no-repeat center; background-size: 100%;}
.logo.seecargo{background: url('../img/common/logo_1.png') no-repeat center; background-size: 100%;}
.logo.vansales{background: url('../img/common/logo_1_van.png') no-repeat center; background-size: 100%;}
.logo a { display: block; width: 100%; height: 100%; text-indent: -9999px; }

.gnb {flex: 1 0; padding-left: 80px;}
.gnb .depth01 {display: flex; gap: 0 20px; align-items: center;}
.gnb .depth01 > li {flex: none; width: 80px; position: relative; height: 50px; z-index: 1;}
.gnb .depth01 > li > a {display: block; font-size: 14px; font-weight: 700; line-height: 1.286; padding: 16px 0; text-align: left; letter-spacing: 0; color: #FFFFFF; text-align: center; opacity: 0.6; position: relative;}
.gnb .depth02 {display: none; position: absolute; top: 44px; left: 50%; transform: translateX(-50%); box-shadow: 0px 10px 10px 0px #0000001A; padding: 12px 0; background-color: #ffffff; border-radius: 10px; border: 1px solid #CED4DA; width: max-content;}
.gnb .depth02::before,
.gnb .depth02::after {content: ""; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; top: 0; left: 50%; transform: translate(-50%, -100%); width: 0; height: 0;}
.gnb .depth02::before {border-bottom: 6px solid #CED4DA; margin-top: -1px;}
.gnb .depth02::after {border-bottom: 6px solid #ffffff;}
.gnb .depth02 > li > a {font-size: 13px; font-weight: 600; line-height: 1.231; text-align: center; padding: 8px 25px; display: block; color: #343A40;}

.gnb .depth01 > li.on {box-shadow: inset 0px -4px 0px 0px rgba(255,255,255,1);}
.gnb .depth01 > li.on > a {opacity: 1;}

.gnb .depth01 > li:hover > a {opacity: 1;}
.gnb .depth01 > li:hover > .depth02 {display: block;}
.gnb .depth02 > li:hover > a {color: #7950F2;}

/* 헤더 - 권한에 따라 활성화,비활성홤 목적*/
.gnb .depth01 .hidden-by-auth {display: none !important;}

.sitemap {position: absolute; top: 100%; background-color: #ffffff; width: 100%; box-shadow: 0px 4px 10px 0px #0000001A; display: none;}
.sitemap .menu {display: flex; align-content: center; align-items: center; padding: 40px 55px; position: relative;}
.sitemap .menu .btn-sitemap-close {position: absolute; right: 20px; top: 10px;}
.sitemap .menu .depth01 {display: flex; align-items: flex-start; justify-content: center; gap: 0 20px; width: 100%;}
.sitemap .menu .depth01 > li {flex: 1 0; max-width: 150px; padding-left: 10px;}
.sitemap .menu .depth01 > li > a {display: block; font-size: 16px; line-height: 1.25; padding-bottom: 8px; border-bottom: 1px solid #9775FA; color: #6741D9; font-weight: 600;}
.sitemap .menu .depth02 {margin-top: 20px;}
.sitemap .menu .depth02 > li + li {margin-top: 20px;}
.sitemap .menu .depth02 > li > a,
.sitemap .menu .depth02 > li > p {font-size: 13px; font-weight: 600; line-height: 1.231; color: #343A40;}
.sitemap .menu .depth03 {margin-top: 10px;}
.sitemap .menu .depth03 > li > a {font-size: 11px; line-height: 1.637; color: #343A40; position: relative; padding-left: 15px; display: block;}
.sitemap .menu .depth03 > li > a::before {content: ""; width: 2px; height: 2px; border-radius: 50%; background-color: #343A40; position: absolute; left: 5px; top: 8px;}

.sitemap .menu .depth02 > li > a:hover {color: #7950F2;}
.sitemap .menu .depth03 > li > a:hover {color: #7950F2;}
.sitemap .menu .depth03 > li > a:hover::before {background-color: #7950F2;}

.etc {}

.shortcut {}

.util {display: flex; align-items: center; gap: 0 20px;}
.util .support {position: relative; z-index: 9; display: flex; align-items: center; justify-content: center; height: 50px;}
.util .support .support-menu {position: absolute; top: 100%; transform: translate(-50%, -8px); left: 50%; box-shadow: 0px 10px 10px 0px #0000001A; background-color: #ffffff; border-radius: 10px; border: 1px solid #CED4DA; display: none;}
.util .support .support-menu::before,
.util .support .support-menu::after {content: ""; position: absolute; border-left: 8px solid transparent; border-right: 8px solid transparent; top: 0; left: 50%; transform: translate(-50%, -100%); width: 0; height: 0;}
.util .support .support-menu::before {border-bottom: 6px solid #CED4DA; margin-top: -1px;}
.util .support .support-menu::after {border-bottom: 6px solid #ffffff;}
.util .support .support-menu ul {width: 100px; padding: 12px 0;}
.util .support .support-menu ul li a {font-size: 13px; font-weight: 600; line-height: 1.231; text-align: center; padding: 8px 0; display: block; color: #343A40;}
.util .support:hover > * + .support-menu {display: block;}
.util .support .support-menu .user-info {width: 220px;}
.util .support .support-menu .user-info .account {padding: 20px 0;}
.util .support .support-menu .user-info .account .name {text-align: center; font-weight: 600; font-size: 13px; line-height: 1.231;}
.util .support .support-menu .user-info .account .name strong {display: inline-block; font-weight: 600; color: #6741D9; line-height: 1.231;}
.util .support .support-menu .user-info .account .name + .id {margin-top: 4px;}
.util .support .support-menu .user-info .account .id {text-align: center; font-size: 11px; color: #868e86; line-height: 1.182;}
.util .support .support-menu .user-info .account .id + .belong {margin-top: 4px;}
.util .support .support-menu .user-info .account .belong {display: flex; align-items: center; justify-content: center; gap: 0 4px;}
.util .support .support-menu .user-info .account .belong span {display: block; flex: none; line-height: 17px; padding: 0 8px; background-color: #f1f3f5; border-radius: 20px; font-size: 11px; font-weight: 500; color: #868e86;}
.util .support .support-menu .user-info .account .belong select {width: 90px;}
.util .support .support-menu .user-info .account + .user-link {border-top: 1px solid #E9ECEF; height: 36px; line-height: 36px; padding: 0 52px 0 20px; background-position: right 20px center;}
.util .support .support-menu .user-info .user-link {display: block; font-size: 12px; line-height: 1.334; color: #343A40; background-image: url('../img/icon/ic_arr_link.png'); background-size: 12px; background-repeat: no-repeat; background-position: right center;}
.util .support .support-menu .user-info .user-link + .plan-state {border-top: 1px solid #E9ECEF;}
.util .support .support-menu .user-info .plan-state {padding: 10px 20px;}
.util .support .support-menu .user-info .plan-state .plan {display: flex; align-items: center; gap: 0 4px;}
.util .support .support-menu .user-info .plan-state .plan .label {flex: none;}
.util .support .support-menu .user-info .plan-state .plan .user-link {flex: 1 0;}
.util .support .support-menu .user-info .plan-state .plan + .state {margin-top: 10px;}
.util .support .support-menu .user-info .plan-state .state {display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 20px;}
.util .support .support-menu .user-info .plan-state .state dl {flex: none; text-align: center;}
.util .support .support-menu .user-info .plan-state .state dl dd {font-size: 14px; font-weight: 600; color: #6741D9; line-height: 1.215;}
.util .support .support-menu .user-info .plan-state .state dl dt {font-size: 11px; font-weight: 600; color: #868e86; line-height: 1.182; margin-top: 2px;}
.util .support .support-menu .user-info .plan-state .state .now {font-size: 11px; line-height: 1.182; color: #868E96;}
.util .support .support-menu .user-info .plan-state + .mate {border-top: 1px solid #E9ECEF;}
.util .support .support-menu .user-info .mate {padding: 10px 20px 20px;}
.util .support .support-menu .user-info .mate .title {font-size: 12px; line-height: 1.3334;}
.util .support .support-menu .user-info .mate .title + p {margin-top: 10px;}
.util .support .support-menu .user-info .mate .txt-phone + .txt-email {margin-top: 5px;}
.util .support .support-menu .user-info .mate .btn {width: 100%; margin-top: 20px;}

.util .support .support-menu ul li:hover a {color: #7950F2;}

.support {}

.assistant {}

.branding {}
 
/*-------------------------------------------------------------------
    @footer
-------------------------------------------------------------------*/
#footer{}

.link{}

.family{}

.sns{}

.address{}

.logo-f{}

.copyright{}

.fnb {}
 
/*-------------------------------------------------------------------
    @content
-------------------------------------------------------------------*/
#content {display: flex; align-items: stretch; justify-content: flex-start; min-width: 1600px; height: 100vh;}
#header + #content {height: calc(100vh - 50px);}

.contents {background-color: #F1F3F5; width: 100%; height: 100%;}
.lnb + .contents {width: calc(100% - 210px)}
.container {padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; position: relative; }
.container::after { display: block; clear: both; content: ""; }

.lnb {flex: none; width: 210px; padding: 20px 20px; background-color: #ffffff;}
.lnb .depth01 {display: flex; align-items: center; justify-content: flex-start; font-size: 20px; font-weight: 500; line-height: 1; color: #6741D9; gap: 0 4px;}
.lnb .depth02 {margin-top: 20px;}
.lnb .depth02 > ul > li + li {margin-top: 4px;}
.lnb .depth02 > ul > li > a {display: flex; align-items: center; justify-content: flex-start; gap: 0 4px; font-size: 12px; line-height: 1.3334; font-weight: 600; background-color: #E9ECEF; border-radius: 10px; padding: 10px 20px; color: #343A40;}
.lnb .depth02 > ul > li.on > a,
.lnb .depth02 > ul > li:hover > a {background-color: #7950F2; color: #ffffff;}

/*-------------------------------------------------------------------
    @floating
-------------------------------------------------------------------*/
 
/*-------------------------------------------------------------------
    @popup
-------------------------------------------------------------------*/
.popup {display: none;}
.popup {position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 99; background-color: #ffffff; flex-wrap: wrap;}
.popup.on {display: flex;}

.popup .pop-head .tit {text-align: center; font-size: 14px; line-height: 1.286; font-weight: 700; padding: 15px 0;}

.popup.layer {flex-direction: column; max-height: calc(100vh - 90px); border-radius: 20px; min-height: 0;}
.popup.layer > div + div {border-top: 1px solid #CED4DA;}
.popup.layer .pop-head {position: relative; width: 100%; flex: none;}
.popup.layer .pop-head .btn-pop-close {position: absolute; right: 24px; top: 16px;}
.popup.layer .pop-head .tit-area {display: flex; align-items: center; justify-content: center; gap: 0 20px; padding: 15px 0;}
.popup.layer .pop-head .tit-area dl {display: flex; align-items: center; justify-self: center; gap: 0 4px;}
.popup.layer .pop-head .tit-area dl dt {font-size: 14px; color: #868E96; font-weight: 700; line-height: 1.215;}
.popup.layer .pop-head .tit-area dl dd {font-size: 14px; color: #343A40; font-weight: 700; line-height: 1.215;}
.popup.layer .pop-body {overflow: auto; width: 100%; flex: 1 0; min-height: 0; max-height: calc(100vh - 350px);}
.popup.layer .pop-body .list-wrap.v1:not(.fixed-table) table {width: 100%; min-width: 0;}
.popup.layer .pop-txt {font-size: 12px; line-height: 1.3334; text-align: center; color: #868e86;}

.popup.alert {width: 400px; flex-direction: column; max-height: calc(100vh - 90px); border-radius: 20px;}
.popup.alert .pop-head {background-color: #CED4DA; border-top-right-radius: 20px; border-top-left-radius: 20px;}

.popup.alert .pop-body {min-height: 160px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.popup.alert .txt-alert {font-size: 12px; font-weight: 600; line-height: 1.167; text-align: center;}
.popup.alert .txt-alert strong {display: inline-block; font-size: 14px; line-height: 1.215;}

.popup.full {width: 100%; min-width: 1600px; height: calc(100% - 50px); top: 50px; transform: translate(0, 0); left: 0; z-index: 1;}

.popup.full .pop-head {width: 100%; display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 20px; box-shadow: 0px 1px 1px 0px #0000000D; border-bottom: 1px solid #E9ECEF; background-color: #ffffff;}
.popup.full .pop-head .tit-area {display: flex; align-items: center; justify-content: flex-start; gap: 0 10px;}
.popup.full .pop-head .tit-area .tit {padding: 0;}
.popup.full .pop-head .tit-area .txt {padding-left: 10px; font-size: 12px; line-height: 1.3334; color: #868E96;}
.popup.full .pop-head .area-search {display: flex; align-items: center;}

.popup .pop-foot {display: flex; flex: none; justify-content: space-between; align-items: center; padding: 15px 20px; width: 100%; min-height: 0;}
.popup .pop-foot .btn-wrap {flex: 1 0;}
.popup .pop-foot * + .btn-wrap {flex: none;}

.popup.alert .pop-foot {border-top: 1px solid #CED4DA;}

.popup.full .area-search .form.col .form-cont {display: flex; align-items: center; justify-content: flex-start;}
.popup.full .area-search .form.col .form-cont .dropdown.v2 {flex: none; min-width: 100px;}
.popup.full .area-search .form.col .form-cont .dropdown.v2:first-of-type .drop-list {left: -105px}
.popup.full .area-search .form.col .form-cont .dropdown.v2:last-of-type .drop-list {left: -35px}

.popup.full .pop-body {display: flex; height: calc(100% - 50px); justify-content: flex-start; align-items: stretch; width: 100%; position: relative; flex-wrap: wrap; background-color: #F1F3F5;}
.popup.full .pop-body > .container {width: 100%; padding-top: 10px; padding-bottom: 20px; display: flex; min-height: 0; min-width: 0; flex-direction: column; flex: 1 0; flex-direction: column;}
.popup.full .pop-body .bx-area {width: 100%;}

.popup.full .datum {flex: none; height: 100%; border-left: 360px; border-right: 1px solid #E9ECEF; display: flex; flex-direction: column; position: relative; background-color: #ffffff;}
.popup.full .btn-fold {position: absolute; top: 50%; right: -20px; transform: translateY(-50%); z-index: 1;}
.popup.full .datum .datum-head {flex: none; padding: 20px 20px 0; border-bottom: 1px solid #CED4DA;}
.popup.full .datum .datum-cont {flex: 1 0; min-height: 0; display: flex; flex-direction: column;}

.popup.full .datum .tab-wrap.v1 {height: 100%; display: flex; flex-direction: column;}
.popup.full .datum .tab-wrap.v1 .tab-btn-wrap {flex: none;}
.popup.full .datum .tab-wrap.v1 .tab-cont-wrap {flex: 1 0; width: 100%; min-height: 0;}
.popup.full .datum .tab-wrap.v1 .tab-cont-wrap .tab-cont {height: 100%; display: flex; flex-direction: column;}
.popup.full .datum .tab-wrap.v1 .tab-cont-wrap .tab-cont > * {flex: none; min-height: 0;}

.popup.full .datum .list-top {padding: 20px 20px 10px;}
.popup.full .datum .list-bottom {border-top: 1px solid #CED4DA; padding: 15px 0;}

.popup.full .datum .detail-title {background-color: #F1F3F5; padding: 15px 20px;}
.popup.full .datum .detail-title p {font-size: 13px; font-weight: 600; line-height: 1.231; text-align: left;}

.popup.full .datum .datum-foot {flex: none; border-top: 1px solid #CED4DA; padding: 15px 0;}

.popup.full .datum-detail {position: absolute; top: 0; height: 100%; background-color: #ffffff; border-right: 1px solid #CED4DA; display: none; flex-direction: column; z-index: 10; background-color: #ffffff;}
.popup.full .datum-detail .btn-close-detail {position: absolute; right: 0; top: 0; transform: translateX(100%)}
.popup.full .datum-detail .detail-head {flex: none; padding: 20px 20px 0; border-bottom: 1px solid #CED4DA;}
.popup.full .datum-detail .detail-cont {flex: 1 0; min-height: 0; display: flex; flex-direction: column; min-height: 0;}
.popup.full .datum-detail .detail-foot {flex: none; border-top: 1px solid #CED4DA; padding: 15px 0;}

.popup.full .datum-result {position: absolute; top: 0; height: 100%; background-color: #ffffff; border-right: 1px solid #CED4DA; display: none; flex-direction: column; z-index: 10; background-color: #ffffff;}

.popup.full .datum-result .btn-close-detail {position: absolute; right: 0; top: 0; transform: translateX(100%)}
.popup.full .datum-result .result-head {flex: none; padding: 20px 20px 0; border-bottom: 1px solid #CED4DA;}
.popup.full .datum-result .result-cont {flex: 1 0; min-height: 0; display: flex; flex-direction: column; min-height: 0;}
.popup.full .datum-result .result-foot {flex: none; border-top: 1px solid #CED4DA; padding: 15px 0;}

.popup.full .map .map-category {position: absolute; left: 30px; top: 15px; z-index: 5;}
.popup.full .map .map-category ul {display: flex; gap: 0 4px;}
.popup.full .map .map-category ul li {border: 1px solid #CED4DA; background-color: #ffffff; border-radius: 20px; padding: 0 15px; display: flex; align-items: center; height: 36px; font-size: 12px; color: #868E96; font-weight: 600; gap: 0 2px; cursor: pointer;}
.popup.full .map .map-category ul li::before {content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; }
.popup.full .map .map-category ul li.purple::before {background-color: #BE4BDB;}
.popup.full .map .map-category ul li.blue::before {background-color: #7950F2;}
.popup.full .map .map-category ul li.lime::before {background-color: #40C057;}
.popup.full .map .map-category ul li.pink::before {background-color: #FA5252;}
.popup.full .map .map-category ul li.dark::before {background-color: #343A40;}
.popup.full .map .map-category ul li.on {color: #ffffff;}
.popup.full .map .map-category ul li.on::before {background-color: #ffffff;}
.popup.full .map .map-category ul li.on.purple {background-color: #BE4BDB; border-color: #BE4BDB;}
.popup.full .map .map-category ul li.on.blue {background-color: #7950F2; border-color: #7950F2;}
.popup.full .map .map-category ul li.on.lime {background-color: #40C057; border-color: #40C057;}
.popup.full .map .map-category ul li.on.pink {background-color: #FA5252; border-color: #FA5252;}
.popup.full .map .map-category ul li.on.dark {background-color: #343A40; border-color: #343A40;}

.popup.full .map .line-legend {position: absolute; right: 30px; bottom: 20px; border: 1px solid #CED4DA; background-color: #ffffff; border-radius: 20px; padding: 8px 20px;}
.popup.full .map .line-legend ul {display: flex; align-items: center; gap: 0 20px;}
.popup.full .map .line-legend ul li {display: flex; align-items: center; justify-content: flex-start; color: #868E96; font-size: 12px; font-weight: 600; line-height: 1.3334; gap: 0 4px;}

.dim {background-color: #000000; opacity: 0.5; display: flex; width: 100%; height: 100%; position: fixed; z-index: 97; top: 0; left: 0;}
.filebox { display: flex; align-items: center;}