@font-face{font-family:'NotoSans';font-style:normal;font-weight:normal;src:url('/font/notokr-regular.eot');src:local(※),url('/font/notokr-regular.eot?#iefix') format('embedded-opentype'),url('/font/notokr-regular.woff') format('woff'),url('/font/notokr-regular.ttf') format('truetype');}
/* demilight */
@font-face {font-family:'NotoSans';font-style:normal;font-weight:100;src:url('/font/notokr-demilight.eot');src:local(※),url('/font/notokr-demilight.eot?#iefix') format('embedded-opentype'),url('../font/notokr-demilight.woff') format('woff'),url('/font/notokr-demilight.ttf') format('truetype');}
/* medium */
@font-face {font-family:'NotoSans';font-style:normal;font-weight:500;src:url('/font/notokr-medium.eot');src:local(※),url('/font/notokr-medium.eot?#iefix') format('embedded-opentype'),url('/font/notokr-medium.woff') format('woff'),url('/font/notokr-medium.ttf') format('truetype');}
/* bold */
@font-face {font-family:'NotoSans';font-style:normal;font-weight:bold;src:url('/font/notokr-bold.eot');src:local(※),url('/font/notokr-bold.eot?#iefix') format('embedded-opentype'),url('/font/notokr-bold.woff') format('woff'),url('/font/notokr-bold.ttf') format('truetype');}
/* black */
@font-face {font-family:'NotoSans';font-style:normal;font-weight:800;src:url('/font/notokr-black.eot');src:local(※),url('/font/notokr-black.eot?#iefix') format('embedded-opentype'),url('/font/notokr-black.woff') format('woff'),url('/font/notokr-black.ttf') format('truetype');}
@font-face {font-family:'OpenSans-Regular';font-style:normal;src:url('/font/OpenSans-Regular.eot');src:local(※),url('/font/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),url('/font/OpenSans-Regular.woff') format('woff'),url('/font/OpenSans-Regular.ttf') format('truetype');}
@font-face {font-family:'OpenSans-Semibold';font-style:normal;src:url('/font/OpenSans-Semibold');src:local(※),url('/font/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),url('/font/OpenSans-Semibold.woff') format('woff'),url('/font/OpenSans-Semibold.ttf') format('truetype');}
@font-face {font-family:'OpenSans-Bold';font-style:normal;src:url('/font/OpenSans-Bold');src:local(※),url('/font/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),url('/font/OpenSans-Bold.woff') format('woff'),url('/font/OpenSans-Bold.ttf') format('truetype');}


/*-------------------------------------------------------------------*/
.page-body-wrapper {  min-height: calc(100vh - 2.8125rem);  display: -webkit-flex;  display: flex;  -webkit-flex-direction: row;  flex-direction: row;   
  padding-left: 0;  padding-right: 0;  padding-top: 2.8125rem;
}
.page-body-wrapper.full-page-wrapper {  width: 100%;  min-height: 100vh;  padding-top: 0;}
.main { }
.main .navbar-menu-wrapper .current-state {display:block;}
.main .rout {display:none;}


/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                        sidebar
///////////////////////////////////////////////////////////////////////////////////////////*/
.sidebar {
  min-height: calc(100vh - 2.8125rem);  background: #ffffff;  font-weight: 300;  padding:0;  width: 13.125rem;  z-index: 11;
  transition: width 0.25s ease, background 0.25s ease;
  -webkit-transition: width 0.25s ease, background 0.25s ease;
  -moz-transition: width 0.25s ease, background 0.25s ease;
  -ms-transition: width 0.25s ease, background 0.25s ease;
  box-shadow: 6px 16px 31px -18px #b7bcd1;
  -webkit-box-shadow: 6px 16px 31px -18px #b7bcd1;
  -moz-box-shadow: 6px 16px 31px -18px #b7bcd1;
  -ms-box-shadow: 6px 16px 31px -18px #b7bcd1;
}

.sidebar .profile-box {display:block; position:relative;  text-align:center;  padding:30px 0 0px}
.sidebar .profile-box:before {content:''; position:absolute; left:0; top:0; width:100%; height:70px; background:#6178eb; z-index:-1;}
.sidebar .profile-box .profile-img {display:block; margin:0; padding:0; position:relative; }
.sidebar .profile-box .profile-img img {width:80px; border:5px solid rgba(68,94,222,0.3); border-radius:80px;}
.sidebar .profile-box  .edit {position:absolute; right:40px; top:76px; z-index:55}
.sidebar .profile-box  .edit a { display:block; }
.sidebar .profile-box  .edit i { font-size:20px; color:#40424d; font-family:'xeicon'; }
.sidebar .profile-box h1 { font-size:16px; color:#505158; padding: 10px 0; }
.sidebar .profile-box h1 span { display:inline-block; clear:both;margin:8px 0 0; padding:3px 15px; border-radius:50px; border:1px solid #adb5ed; color:#3652db; font-size:15px; line-height:20px;  letter-spacing:0;}

.sidebar .nav {  overflow: hidden;  flex-wrap: nowrap;  flex-direction: column;  margin-bottom: 60px;}
.sidebar .nav .nav-item {margin:3px 0;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  transition-duration: 0.1s;
  transition-property: background;  -webkit-transition-property: background;
}

.sidebar .nav .nav-item .collapse {  z-index: 999;}
.sidebar .nav .nav-item.nav-profile .profile-image img {  width: 37px;  height: 37px;}
.sidebar .nav .nav-item.nav-profile .profile-name {  margin-left: .75rem;}
.sidebar .nav .nav-item.nav-profile .profile-name .name {  font-size: 13px;  color: #ffffff;  font-weight: 500;  margin-bottom: 0;}
.sidebar .nav .nav-item.nav-profile .profile-name .designation {  font-size: 11px;  margin-bottom: 0;}
.sidebar .nav .nav-item .nav-link {  display: -webkit-flex;  display: flex;  -webkit-align-items: center;  align-items: center;  white-space: nowrap;  padding: 0.625rem 0.85rem 0.625rem 0.85rem;  color: #34374d;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  transition-duration: 0.1s;
  transition-property: color;
  -webkit-transition-property: color;
  font-weight: 400;
}       
           
.sidebar .nav .nav-item .nav-link i {  color: inherit; }
.sidebar .nav .nav-item .nav-link i.menu-icon {  font-size: 1.325rem;  line-height: 1.3;  margin-top:1px; margin-right: 0.325rem;  color: #81879f; transition: all 0.2s ease-in;}
.sidebar .nav .nav-item .nav-link i.menu-icon:before {  vertical-align: middle;}
.sidebar .nav .nav-item .nav-link i.menu-arrow {  display: inline-block; float:right; vertical-align:middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-left: auto;  margin-right: 0;  color: #81879f;transition: all 0.2s ease-in;
}
.sidebar .nav .nav-item:hover .nav-link i.menu-icon, .sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-icon  { color:#fff;}
.sidebar .nav .nav-item:hover .nav-link i.menu-arrow, .sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow  { color:#fff; }

.sidebar .nav .nav-item .nav-link i.menu-arrow:before {
  content: "\F142";  font-family: "Material Design Icons";  font-style: normal;  display: block;  font-size: 1.125rem; line-height: 1.5em;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  -ms-transition: all 0.1s ease-in;
  -o-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.sidebar .nav .nav-item .nav-link .menu-title {  color: inherit;  display: inline-block;  font-size: 0.95rem; font-weight:bold;   line-height: 1;  vertical-align: middle;transition: all 0.2s ease-in; }
.sidebar .nav .nav-item .nav-link:hover .menu-title { padding-left:8px; color:#fff; }
.sidebar .nav .nav-item .nav-link .badge {  font-size: 9px;  margin-left: 10px;  margin-bottom: 0;}
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] {  border-radius: 0.405rem;  background: #304aca;color:#fff;}
.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow:before { -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);}
.sidebar .nav .nav-item .nav-link[data-toggle="collapse"] i.menu-arrow:before  {  -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.sidebar .nav .nav-item .nav-link[data-toggle="collapse"][aria-expanded="true"] i.menu-arrow:before, .sidebar .nav .nav-item.active .nav-link[data-toggle="collapse"] i.menu-arrow:before {  -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }

.sidebar .nav .nav-item.active {  border:0px solid #f00}
.sidebar .nav .nav-item.active > .nav-link {  position: relative;border:0px solid #f00; background: #304aca;border-radius: 0.405rem; overflow:hidden;  }
.sidebar .nav .nav-item.active > .nav-link i,
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link .menu-arrow {  color: #fff;  font-weight: 500;}


.sidebar .nav:not(.sub-menu) {  margin-top: .3rem; overflow-x:hidden !important;}
.sidebar .nav:not(.sub-menu) > .nav-item {  margin-top: 0;  margin-left: 5px; margin-right:10px; border-radius: 0.405rem; }
.sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {  margin: 0;}
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link {  color: #fff;  background: #304aca;  border-radius: 0.405rem; }
.sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link[aria-expanded="true"] { border-radius: 0.405rem; color:#fff;  }

.sidebar .nav:not(.sub-menu) > .nav-item:active > .nav-link {  border-radius: 0.405rem;  color:#fff;  background: #304aca; }
.sidebar .nav:not(.sub-menu) > .nav-item:focus > .nav-link {  border-radius: 0.405rem;  background: #304aca;  }

.sidebar .nav.sub-menu {  margin-bottom: 0;  margin-top: 0;  list-style: none;  background: #fff;  padding: 0.25rem 0  0.25rem 1.2rem;  border-radius: 0.405rem;  }
.sidebar .nav.sub-menu .nav-item {  padding: 0;  position: relative; overflow-x:hidden;}
.sidebar .nav.sub-menu .nav-item:before {  content: '';  width: 4px;  height: 4px;  border-radius:50%; background:#a8abbb; position: absolute; left:2px; top: 11px;   }
.sidebar .nav.sub-menu .nav-item .nav-link {  color:#666;  padding: 0.425rem 0.725rem;  position: relative;  font-size: 14px; font-weight:500; letter-spacing:-.04em; line-height: 1;  height: auto;  border-top: 0;  }
.sidebar .nav.sub-menu .nav-item .nav-link:hover {  color: #333 !important; }
.sidebar .nav.sub-menu .nav-item .nav-link.active {  color: #1c37bb !important; font-weight:bold;}
.sidebar .nav.sub-menu .nav-item:hover {  background: transparent;}



/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                         Layouts - shrink
///////////////////////////////////////////////////////////////////////////////////////////*/
.sidebar-icon-only .navbar .navbar-brand-wrapper {   width: 55px;  }
.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo { display: none;  }
.sidebar-icon-only .navbar .navbar-brand-wrapper .mdi-backburger{  display: none;  }
.sidebar-icon-only .navbar .navbar-brand-wrapper .mdi-forwardburger {display:block; margin-left:-3px;}
.sidebar-icon-only .navbar .navbar-menu-wrapper {    width: calc(100% - 55px);  }
.sidebar-icon-only .sidebar { width: 55px;  }
.sidebar-icon-only .sidebar .profile-box {display:none;}
.sidebar-icon-only .sidebar .nav {    overflow: visible;  padding-top:20px; }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item { margin-left: 7px; position: relative;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link { display: block; padding-left: .5rem; padding-right: .5rem; padding-top: .35rem; padding-bottom: .35rem;  text-align: center;  position: static;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .menu-title,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .badge, .sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .menu-sub-title {    display: none;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .menu-title { border-radius: 0 0px 0px 0px;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link i.menu-icon { margin-right: 0; margin-left: 0; margin-bottom: 0;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link i.menu-arrow { display: none;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link[aria-expanded] { border-radius: 0.405rem;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link[aria-expanded] .menu-title { border-radius: 0 0px 0 0px;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .profile-name,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .designation { display: none;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .nav-link .profile-image { width: 100%; }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item .collapse { display: none; }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.hover-open .nav-link .menu-title {display: -webkit-flex; display: flex;-webkit-align-items: center; align-items: center;
                                                                                                                            background: #304aca;  padding: 0.5rem 1.4rem;    left: 55px; position: absolute; text-align: left;  top: 0; bottom: 0; width: 190px;
                                                                                                                            z-index: 1;  line-height: 1.8;    box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25);
}
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.hover-open .nav-link .menu-title:after {    display: none;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.hover-open .nav-link:hover .menu-title {    background: #304aca;  }
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.hover-open .collapse,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.hover-open .collapsing {
display: block;    padding: 0 0 0rem 0;    background: #cdcfd5;    border-radius: 0 0 0px 0px;
position: absolute;    left: 55px;    width: 190px;    box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25);
}

.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.hover-open .collapse .submenu,
.sidebar-icon-only .sidebar .nav:not(.sub-menu) .nav-item.hover-open .collapsing .submenu {    border-radius: 0;  }
.sidebar-icon-only .sidebar .nav.sub-menu {    padding: 0 0 0 1.5rem;    border-radius: 0px 0px 0px 0px;  }
.sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link {    text-align: left;    padding-left: 20px;  }
.sidebar-icon-only .main-panel {    width: calc(100% - 55px);  }

.sidebar-fixed .sidebar { position: fixed; max-height: auto;  }
.sidebar-fixed .sidebar .nav { max-height: calc(100vh - 55x);  overflow: auto; position: relative;  }
.sidebar-fixed .sidebar .nav.sub-menu {  max-height: none;  }
.sidebar-fixed .main-panel {  margin-left: 13.125rem;  }
.sidebar-fixed.sidebar-icon-only .main-panel {    margin-left: 55px;  }




/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                         Navbar
///////////////////////////////////////////////////////////////////////////////////////////*/
.navbar {  font-weight: 400;padding: 0 !important; min-width:1700px;  display:block;
   transition: background 0.25s ease;
  -webkit-transition: background 0.25s ease;
  -moz-transition: background 0.25s ease;
  -ms-transition: background 0.25s ease;
  /* Navbar color variations */
}

.navbar .navbar-brand-wrapper {  background: #3650d0;  padding: 0.625rem 0.85rem 0.625rem 1.25rem;display: flex; z-index:333;
  transition: width 0.25s ease, background 0.25s ease;
  -webkit-transition: width 0.25s ease, background 0.25s ease;
  -moz-transition: width 0.25s ease, background 0.25s ease; 
  -ms-transition: width 0.25s ease, background 0.25s ease;
   width: 13.125rem;  height: 2.8125rem;
}

.navbar .navbar-brand-wrapper .navbar-brand {  color: #fff;  font-size: 1.2rem; font-family:'GmarketSans'; font-weight:500;  margin-right: 0;  padding-left: 5px;}
.navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {  display: none;}
.navbar .navbar-brand-wrapper .navbar-brand:active, .navbar .navbar-brand-wrapper .navbar-brand:focus, .navbar .navbar-brand-wrapper .navbar-brand:hover {  color: #1b2658;}
.navbar .navbar-brand-wrapper .navbar-brand img {  /*width: calc(95px - 26px);*/   max-width: 100%;  height: 21px;  margin:  0 auto;  vertical-align: middle;}
.navbar .navbar-brand-wrapper  .mdi-forwardburger {display:none;} 
.navbar .navbar-brand-wrapper .navbar-toggler { 
  border: 0;  color: #fff;  font-size: 1.375rem;  padding: 0;border:0px solid #f00; display:inline-block; float:right; 
}


.navbar .navbar-menu-wrapper {position:absolute; top:0; right:0px; z-index:1;
  background: #445ede;
  transition: width 0.25s ease;
  -webkit-transition: width 0.25s ease;
  -moz-transition: width 0.25s ease;
  -ms-transition: width 0.25s ease;
  color: #707889;  padding-left: 0.85rem;  padding-right: 0;  width: calc(100% - 13.125rem);  height: 2.8125rem;
  -webkit-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.07);
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.07);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-user-icon img {  width: 35px;  height: 35px;}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu {  border: none;
  -webkit-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
}
.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown { 
position: absolute;  font-size: 0.9rem;  margin-top: 0;  right: 0;  left: auto;  padding: 0;  top: 2.8125rem;  border-radius: 4px;
}

/*  head  */
.go-homepage { position:absolute; right:0; top:0;  width:2.8125rem; height:2.8125rem; vertical-align:top;}
.go-homepage a { display:block;background:#394daf;color:#fff; font-size:1.05rem; text-align:center;line-height:2.8125rem;}
.go-homepage a:hover { background:#394daf}

/*  */
.member-state {position:relative; display:inline-block; float:right; margin-right:2.8125rem; margin-top:0;  }
.member-state div {display:inline-block; margin:0; font-size:0.85rem;}
.member-state div i {font-size:1.135rem; color:#fff }
.member-state a {display:block;padding:0 7px;color:#fff;line-height:42px;}

@media screen and (max-width:1680px){
	.member-state div { margin:0 5px; font-size:0.75rem;}
}



/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                       Footer
///////////////////////////////////////////////////////////////////////////////////////////*/
.footer-wrapper {    width: 100%; padding:0 17px 12px; }
.footer-wrapper .footer {  background: #ffffff; border:1px solid #e7eaef; color:#666; text-align:center; padding: 15px 0;  transition: all 0.25s ease;  -moz-transition: all 0.25s ease;  -webkit-transition: all 0.25s ease; 
                                   -ms-transition: all 0.25s ease;  font-size: 0.775rem; letter-spacing:0;  font-weight: 400;  /*border-top: 1px solid rgba(0, 0, 0, 0.06); */ border-radius: 5px;}
.footer-wrapper .footer a {  color: #25378b;  font-size: inherit;}



/* pagination */
.pagination { display:inline-block; width:100%; margin:8px 0 5px; padding:0; height:30px;}
.pagination:after {content:''; clear:both; }
.pagination ul {font-size:0;text-align:center;   }
.pagination li { display:inline-block;}
.pagination li a { display:inline-block; font-size:14px; border:1px solid #dcdde0;  border-left:0; padding:5px 12px;color:#333;background:#fff; vertical-align:middle; transition:300ms ease-out 0ms;}
.pagination li a:hover {background:#016cf6; border:1px solid #016cf6; border-left:0; color:#fff; }
.pagination li a.on { background:#016cf6; border:1px solid #016cf6;border-left:0; color:#fff; }
.pagination li a.off { color:#bfc2ca; }
.pagination li a.on,
.pagination li a.off:hover {color:#fff;}
.pagination li:first-child a{ border-top-left-radius:4px; border-bottom-left-radius:4px; overflow:hidden; margin-left:0;border-left:1px solid #dcdde0; }
.pagination li:last-child a { border-top-right-radius:4px; border-bottom-right-radius:4px; overflow:hidden;  }


/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                       달력
///////////////////////////////////////////////////////////////////////////////////////////*/
/*
.trans {position:absolute; left:0; top:0;background:transparent !important;}
.trans:focus {background:#fff !important;}
*/
.calendar {width:200px; display:inline-block;margin:0 2px; vertical-align:middle; position:relative; border-radius:4px; }
.calendar:before {content:'\FDFA'; position:absolute; top:7px; right:8px; font-family: 'Material Design Icons'; font-size:22px;  color:rgba(0,0,0,0.7); z-index:5}
.calendar input {width:100%; height:38px; background:transparent; font-size:0.875rem; }
.calendar:first-child {margin-left:0}
.inp-time {width:100px; display:inline-block; height:38px; margin:0 2px; vertical-align:middle; position:relative; border-radius:4px; }
.inp-time:before {content:'\F150'; position:absolute; top:5px; right:8px; font-family: 'Material Design Icons'; font-size:18px;  color:rgba(0,0,0,0.8); z-index:5}
.inp-time input {width:100%;  height:38px; background:transparent;}



.helloCalenderDiv {padding:10px 20px 15px;margin-top:30px; background:#fff;border:1px solid #1e295b; border-radius:7px;box-shadow:3px 3px 5px rgba(0,0,0,.10);-webkit-box-shadow:3px 3px 10px rgba(0,0,0,.10);z-index:1000;}
.hcTable {width:230px;border-collapse:collapse;}
.hcTitle {padding:0 2.8125rem;}
.hcControlBar {padding:12px 0 !important;}
.hcTable th {padding:2px 0;color:#999;font-weight:normal; font-weight:bold; font-size:14px; font-family:  'NotoSans' ; }
.hcTable td { padding:8px; font-size:13px; text-align:center;font-weight:bold; }
.hcTable tr:hover td {background:none;}
.hcTable tr:hover td.hcControlBar {background:none !important;}
.hcTable .Year    {min-width:65px;width:35%;margin-right:2px;height:30px;background-color:#fff; border:1px solid #999; line-height:30px;font-size:13px;font-weight:bold; border-radius:4px; padding:0 8px; }
.hcTable .Month {min-width:50px;width:30%;margin-right:2px;height:30px;background-color:#fff; border:1px solid #999; line-height:30px;font-size:13px;font-weight:bold;border-radius:4px; padding:0 8px; }
.hcTable .mouseOver { background-color:#eaedf0 !important;  border-radius:5px; cursor:pointer; }
.hcTable .hcSun { color:#FF0000; }
.hcTable .hcSat { color:#1c4fb9; }
.hcTable .selectDay { background-color:#fd4867 !important;color:#fff;overflow:hidden; border-radius:100%;}
.hcTable .selectDay:hover {color:#fff !important}
.hcTable select:focus { border:1px solid #25378b !important;}

.hcPrev {display:inline-block;width:30px;height:30px; position:relative; border-radius:4px; line-height:30px;margin-right:5px;padding:0 6px;border-width:0; color:transparent; font-size:18px; border:1px solid #f0f0f0; background:#fff url(/images/arrow_left.png) no-repeat center ; background-size:15px 15px; 
                -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;}
.hcPrev:hover { border:1px solid #999}
.hcNext {display:inline-block;width:30px;height:30px; border-radius:4px; line-height:30px;margin-left:5px;padding:0 6px;border-width:0;background:#aaa;font-weight:bold;color:transparent;border:1px solid #f0f0f0;  background:#fff url(/images/arrow_right.png) no-repeat center ; background-size:15px 15px; 
           -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;cursor:pointer;}
.hcNext:hover { border:1px solid #999}
.hcToday { border: 1px; border-color: #C8C8C8; border-style: solid; background-color: white;color: #6C6C6C;padding-top:4px; }
.hcToday { margin-right:25px; }
.hcTable .noSelect { background-color:#fff; }

.date-picker-wrapper .drp_top-bar .apply-btn:after {content:'저장';position:absolute;right:0;top:0;font-size:14px;font-weight:bold;background-image:none;z-index:1;}



/*이용약관 레이어팝업*/
.container .row .column{display: flex; flex-direction: column; gap: .625rem; padding:0 1.25rem;}
.rule .titlebar-center a{text-align: center; display: block; height: 3.35rem; line-height: 3.35rem; font-size: .875rem; color: #2C2C2C;}
/* 이용약관 */
.joinrule {padding-bottom:3rem; line-height: 1.4;}
.joinrule h3 {padding:1rem 0 1rem;font-weight:bold;font-size:1rem;}
.joinrule p {padding-bottom:1rem;font-size:.9rem;color:#777;}
.joinrule li {position:relative;padding-bottom:.5rem;font-size:.9rem;color:#777;}
.joinrule ul, .joinrule ol {padding-bottom:.5rem;}
.joinrule ul li {padding-left:1rem;}
.joinrule ul li:before {content:'';position:absolute;left:.3rem;top:.6rem;width:5px;height:1px;background:#555;}
.joinrule th, .joinrule td{font-size: .8rem;}
.joinrule th {line-height:1.2rem; background-color:#f1f1f1; color:#212121; font-weight: 500;}
.joinrule td {line-height:1.1rem; border-top:1px solid #ededed; border-right:1px solid #ededed; color: #555555;}
.joinrule td:nth-of-type(4){border-right:0px;}
.joinrule table tbody tr:nth-child(even){background-color:#ffffff;}
.joinrule table tbody td, table tbody th{padding:.5em .4rem .625rem}
.joinrule .agree2_table1 td{width:20%;}
.joinrule .agree2_table1 td:nth-of-type(2){width:30%;}
.joinrule .agree2_table1 td:nth-of-type(3){width:30%;}
.joinrule .agree2_table2 td:nth-of-type(1){width:13%;}
.joinrule .agree2_table2 td:nth-of-type(3){width:16%;}
.joinrule ol{margin-left: 1.25rem;}
.joinrule ul, .joinrule ol, .joinrule ol li{list-style: auto;}
.joinrule ul, .joinrule ol{padding-bottom: .5rem; line-height: 1.6; margin-bottom: 1rem; list-style-position: outside;}
.joinrule li{position: relative; padding-bottom: .5rem; font-size: .9rem;}
.joinrule table tbody, .joinrule table tfoot, .joinrule table thead{border: 1px solid #f1f1f1; background-color: #fefefe;}

::-webkit-scrollbar{opacity: 1 !important; border-radius: 9px;}
::-webkit-scrollbar-thumb{background:#333 !important;}
::-webkit-scrollbar-track {background:transparent;}



/*/////////////////////////////////////////////////////////////////////////////////////////*/
/*                                   내차팔기 추가
///////////////////////////////////////////////////////////////////////////////////////////*/
:root{
  --font-12:.75rem;
  --font-13:.8125rem;
  --font-14:.875rem;
  --font-15:.9375rem;
  --font-16:1rem;
  --font-18:1.125rem;
  --font-20:1.25rem;
  --font-22:1.375rem;
  --font-24:1.5rem;
  --font-26:1.625rem;
  --font-30:1.875rem;
  --font-32:2rem;
  --font-34:2.125rem;
  --font-36:2.25rem;
  --bg-color:#F5F7FA;
  --main-color:#015EF9;
}


.copyright{border-top:1px solid #EEEEEE; margin-top: 5rem;}
.main_index .copyright{display: none;}
.flex{display: flex;}
.car_wrap .column{width:auto; max-width:none; margin:0;}
.title_wrap{display: flex; justify-content: space-between; align-items: center; padding-bottom: 1.875rem;}
.title_wrap h2{font-size: 3.125rem; color:#2C2C2C; font-weight: 700; opacity: .25;}
.title_wrap .car_num{border-radius: 0.625rem; border:3px solid #949494; padding:0.2rem;}
.title_wrap .car_num > div{border-radius: 0.4375rem; border:1px solid #282828; padding: .2rem 3.15rem;} 
.title_wrap .car_num > div p{font-size: var(--font-32); font-weight: 700; color:#2B3537; line-height: 1;}
.ex{display: inline-block; position: relative; top:.2rem; margin-left:.3rem; width:1.25rem; height:1.25rem; background:url('/images/inc/ex.svg') center / cover no-repeat;}
.ex_tx{display: block !important; position: absolute; height:0; opacity: 0; padding:0; transition: opacity .3s, padding .3s; border-radius: .5rem;  background-color:#ffffff; overflow: hidden; z-index: 33; letter-spacing: 0;
font-weight: 400 !important; font-size: var(--font-14) !important; color:#222222 !important; box-shadow: 0 0 .75rem rgba(0,0,0,.05);}
.ex:hover + .ex_tx{display: block; padding:1rem; border:1px solid #dddddd; opacity: 1; height: auto;}
.btn_wrap{display: flex; justify-content: space-between; margin-top: 3.5rem; z-index: 197;}
.btn_wrap.btn1{justify-content: flex-end;}
.btn_wrap.fix{width:100%; position: fixed; bottom:0; left:0; z-index: 500; background-color:#ffffff; padding:2rem 0;}
.btn_wrap.fix > div{display: flex; justify-content: flex-end; width:68.75rem; margin-left:auto; margin-right:max(0px, calc((100vw - 1605px) / 2));}
.apply-info .btn_wrap.fix > div{justify-content: space-between;}
.btn_wrap .button{width:20.625rem; height:3.75rem; background:linear-gradient(120deg, #0158FC, #01E6B5); border-radius:.88rem; font-size: var(--font-18); font-weight:700;}
.btn_wrap .button_next{background:#1C1C1C;}
.btn_wrap .button_next::after{content: ""; position: absolute; right:2rem; top:36%; width:1rem; height:1rem; background:url('/images/arrow_right_w.png') center / cover no-repeat;}
.btn_wrap .button_prev{background:#ffffff; border:1px solid #5E5E5E; color:#373737}
.btn_wrap .button_prev::after{content: ""; position: absolute; left:2rem; top:38%; width:1rem; height:1rem; background:url('/images/arrow_left.png') center / cover no-repeat;}
.carinfo{display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 0;}
.container{max-width:1600px; margin:0 auto;}
.container.pb8{padding-bottom: 10rem;}
.carinfo h4{font-size: var(--font-24); font-weight: 700; color:#000000; margin-bottom: 1.25rem; line-height: 150%;}
.carinfo .column{display: flex; flex-direction: column; gap:3.125rem; width:25.625rem; margin:0; max-width: none;}
.carinfo .car_img{display: flex; align-items: flex-start; justify-content: space-between; padding: 1.5rem 0 5.625rem;}
.carinfo .car_name h2{font-size: var(--font-36); font-weight: 700; line-height: 170%;}
.carinfo .car_name p{font-size: var(--font-22); font-weight: 700;}
.carinfo .car_img .ico_logo{max-height:3.75rem;}
.carinfo .car_img .ico_car{max-height:6.875rem;}
.carinfo .column.graph{width:37.5rem;}
.carinfo .column.graph .cont .price_wrap{background-color:#F5F7FA; padding:2.5rem 1.875rem; margin-top: 2.5rem;}
.carinfo .column.graph .detailCon{display: flex; flex-direction: column; gap:3.125rem;}
.carinfo .ul_list * {letter-spacing: 0;}
.carinfo .ul_list.sc{max-height:320px; overflow-y: scroll;}
.carinfo .ul_list > li{display: flex; position: relative; padding:.23rem 0;}
.carinfo .ul_list > li:first-of-type{padding-top: 0;}
.carinfo .ul_list > li:last-of-type{padding-bottom: 0;}
.carinfo .ul_list li.col{flex-direction: column; gap:0;}
.carinfo .ul_list > li > span{display: inline-block; width:6.875rem; font-size: var(--font-15); color:#6C6C6C;}
.carinfo .ul_list > li > span .ex{top:.3rem;}
.carinfo .ul_list li > div{max-width:11.25rem; font-size: var(--font-16); color:#000000;}
.carinfo .info .ul_list li > div{max-width:none; flex:1;}
.carinfo .ul_list li > div b{font-weight: 800; font-size: var(--font-18);}
.carinfo .ul_list > li ul{height:7.7rem; overflow-y: scroll; margin-top: .5rem;}
.carinfo .ul_list > li ul li{display: flex; justify-content: space-between; gap:0; padding:1rem .625rem; border-top: 1px solid #E9ECEE;}
.carinfo .ul_list > li ul li p{max-width:18.4375rem; font-size:var(--font-15);}
.carinfo .ul_list > li ul li span{font-size: var(--font-14); color:#727272;}
.carinfo .ul_list > li ul li:last-of-type{border-bottom:1px solid #E9ECEE;}

.carinfo .history::before{content: ""; position: absolute; top:0; left:-10.5%; width:1px; height:100%; background-color:#e9e9e9;}
.carinfo .history::after{content: ""; position: absolute; top:0; right:-10.5%; width:1px; height:100%; background-color:#e9e9e9;}
.carinfo .history_list{position: relative; max-height:16.5625rem; overflow-y: scroll;}
.carinfo .history_list *{letter-spacing: 0;}
.carinfo .history_list .h_date{position: relative; display:flex; align-items: center; gap:.5rem; z-index: 1; padding-left: 1.625rem;}
.carinfo .history_list .h_date p{font-size: var(--font-18); color:#212121; font-weight: 700;}
.carinfo .history_list .h_date::before{content: ""; position: absolute; left: 0; width:5px; height: 5px; border-radius: 100px; background-color:#2c2c2c;}
.carinfo .history_list .h_tx{display:flex; gap:.9rem; position: relative; padding:.1rem;}
.carinfo .history_list .h_tx::before{content: ""; position:absolute; left:2px; top:-20%; width:1px; height:145%; background-color:#BBBBBB;}
.carinfo .history_list .h_tx > div{padding:0.3rem 1.7rem 1rem;}
.carinfo .history_list .h_tx p{color:#686868; font-size: var(--font-15); word-break: keep-all;}
.carinfo .history_list .h_km{padding:0 .8rem 0 .8rem; border-radius: 100px; font-size: var(--font-14); line-height: 1.2rem;
background:#212121; color:#ffffff;}
.carinfo .history_list li:last-of-type .h_tx::before{height: 120%;}

.carinfo .level-price{position: relative; display: inline-block; width: 100%; padding: .25rem 0 1.2rem; font-size: 0; text-align: center;}
.carinfo .bar{display: inline-block; width: 100%; height: .35rem; border-radius: 20rem; background: #DFE5E9;}
.carinfo .level-price .price{position: absolute; top: 1.25rem; font-size: var(--font-16); color: #212121; letter-spacing: 0;}
.carinfo .level-price .price1{left:0;}
.carinfo .level-price .price2{left: auto; right: 0;}
.carinfo .level-price .bar_pregress{width:1px; height: 100%; background: #212121; border-radius: 20rem;}
.carinfo .level-price .auto-price{position: relative; z-index: 1; padding:.625rem 1.25rem; border-radius: 50%; font-size: 0; background-color:#212121; border-radius: 0.75rem;}
.carinfo .level-price .auto-price p{font-size: var(--font-14); color:#D3D3D3; white-space: nowrap;}
.carinfo .level-price .auto-price b{font-size: var(--font-18); color:#ffffff; white-space: nowrap;}
.carinfo .level-price .auto-price-wrap{position: absolute; margin-top: -5rem; transform: translateX(-50%);}
.carinfo .level-price .auto-price-wrap::before{content: ''; position: absolute; bottom: -10px; left:50%; transform: translateX(-50%); width: 2rem; height: 2.5rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='37' viewBox='0 0 32 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0C7.16344 0 0 7.16345 0 16C0 20.7416 3 24.5919 6.33947 27.9314L15.9463 36.5382L24.9686 28.5159C28.9844 24.5 32 21.0672 32 16C32 7.16345 24.8366 0 16 0Z' fill='%23212121'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.34424 11.1909C8.84186 11.3574 8.56692 11.908 8.73014 12.4207L9.81448 15.826H8.9586C8.34072 15.826 7.83984 16.3371 7.83984 16.9676C7.83984 17.5981 8.34072 18.1092 8.9586 18.1092H10.0774C10.2319 18.1092 10.379 18.0772 10.5129 18.0194L11.8501 22.2188C11.9822 22.6338 12.361 22.8967 12.7671 22.8934C13.1731 22.8967 13.5517 22.6338 13.6839 22.2188L16.0123 14.9063L18.3408 22.2188C18.4729 22.6338 18.8517 22.8967 19.2577 22.8934C19.6637 22.8967 20.0424 22.6338 20.1746 22.2188L21.5199 17.9938C21.6681 18.0677 21.8347 18.1092 22.0107 18.1092H23.1295C23.7473 18.1092 24.2482 17.5981 24.2482 16.9676C24.2482 16.3371 23.7473 15.826 23.1295 15.826H22.2102L23.2945 12.4207C23.4578 11.908 23.1828 11.3574 22.6804 11.1909C22.1781 11.0243 21.6385 11.3048 21.4752 11.8175L19.2577 18.7817L17.0401 11.8175C16.896 11.3649 16.4585 11.0932 16.0123 11.1504C15.5661 11.0932 15.1287 11.3649 14.9845 11.8175L12.767 18.7817L10.5494 11.8175C10.3862 11.3048 9.84662 11.0243 9.34424 11.1909Z' fill='white'/%3E%3C/svg%3E")}
.carinfo .level-price .auto-price-wrap.right-edge .auto-price{transform: translateX(-20%);}
.carinfo .proper_price{margin-bottom: 5.2rem;}
.carinfo .proper_price p{font-size: var(--font-15); color:#566067; letter-spacing: -.02rem;}
.carinfo .proper_price b{font-size: var(--font-20); display: block; font-weight: 700; color:#212121; line-height: 1; margin: .8rem 0;}
.carinfo .proper_price ul{display: flex; align-items: center; justify-content: space-between; padding:0 1rem;}
.carinfo .proper_price ul li{text-align: center;}

.carinfo .column.graph .tx_box{font-size: var(--font-20); color:#5C5C5C; line-height: 150%; letter-spacing: 0;}
.carinfo .column.graph .tx_box b{color:#000000; font-weight: 700; font-size: var(--font-20);}
.chart{position:relative; width:100%; max-width:800px; height:220px;}
.chart #chart{width:100%; height:100%; background-color:#ffffff; border-radius: 10px; overflow: hidden; padding:.9rem 0;}
.chart .y-price, .chart .x-km{position: absolute;z-index: 99; font-size: var(--font-14); color:#8E8E8E; letter-spacing: 0;}
.chart .y-price{left: .3%; top:0;}
.chart .x-km{right: 0%; bottom: 7%;}

.legend{display:flex; align-items:center; justify-content: flex-end; gap:1rem; position: relative; z-index: 99; color:#444;}
.legend li{display: flex; align-items: center;}
.legend li p{font-size: var(--font-14); color:#5B5B5B; letter-spacing: 0;}
.legend span{display:inline-block; margin-right:4px;}
.legend .area1{width:9px; height:9px; border-radius:50%; background:#AAD1FE;}
.legend .area2{width:9px; height:9px; border-radius:50%; background:#212121;}
.legend .area3{width:18px; height:10px; border-radius:2px; background:rgba(21,113,255,0.12); border:1px solid rgba(21,113,255,0.18);}

.chart svg circle:last-of-type {fill: #212121 !important; opacity: 1;}
.chart svg g circle,
.chart svg g[clip-path] + g circle {
    r: 4.5 !important;
    fill: #AAD1FE !important;
    opacity: .6 !important;
    stroke-width: 0 !important;
    stroke: transparent !important;pointer-events: visiblePainted !important; stroke: transparent !important; stroke-width: 0 !important;
  }
.chart svg g[clip-path] + g circle:last-of-type {fill: #212121 !important; opacity: 1 !important; r:6 !important}
.chart svg g {pointer-events: none !important;}
  
.chart svg circle,
.chart svg g circle {pointer-events: visiblePainted !important;}

.chart svg circle:last-of-type:hover,
.chart svg g:last-of-type circle {fill: #cecece !important; opacity: 1 !important; }

.chart .bg-normal-range {fill: #CDDCEE !important; opacity: 0.2 !important;}

.chart svg g[clip-path] {clip-path: none !important;}
.chart svg g[clip-path] g:nth-of-type(1) rect {width: 88.6% !important; }

.chart svg text {
    fill: #444444 !important;
    font-size: .9rem !important;
    font-family: 'Pretendard', sans-serif !important;
    font-weight: 700 !important;
  }
  svg text[text-anchor="end"] {
    fill: #444444 !important;
    font-size: .9rem !important;
    transform: translateX(-15px) !important; 
  }
  svg text[text-anchor="middle"] {
    fill: #444444 !important;
    font-size: .9rem !important;
  }
.google-visualization-tooltip{padding:.5rem 0 0 .5rem!important; box-sizing: content-box;}
.google-visualization-tooltip .graph_tooltip{font-size: .7rem !important; letter-spacing: 0; color:#9f9f9f; font-weight: 300;}
.google-visualization-tooltip .graph_tooltip span{font-size: .9rem !important; display: block !important; margin-bottom: 2px;}
.google-visualization-tooltip .graph_tooltip b{font-size: .9rem !important;}

.carinfo ::-webkit-scrollbar{width:6px;}
.carinfo ::-webkit-scrollbar-thumb{background:#AFAFAF !important;}



/*내차팔기신청*/
.apply{overflow:hidden;}
.apply .container{display: flex; flex-wrap: wrap; gap:0 5.625rem; justify-content: space-between;}
.car_info{position: relative; width:100%;margin: 1.5rem 0rem; z-index: 198;}
.car_info_btn{display: flex; justify-content: space-between; align-items: center; background-color:var(--bg-color); border-radius: 10px; padding:1.2rem 2.5rem; cursor: pointer;}
.car_info_btn p{font-size: var(--font-26); font-weight: 700; color:#000000;}
.car_info_btn span{display: block; width:1.25rem; height:0.6875rem; background:url('/images/arrow_down.svg') center / cover no-repeat; transition: transform .1s;}
.car_info_btn > div{display: flex; align-items: center; gap:1rem;}
.car_info_btn > div img{max-height:3.75rem;}
.car_info_pop{position: absolute; top:0; left:0; width:100%; height:0; background-color:#ffffff; border-radius: 10px; transition: height .5s ease; overflow: hidden; padding:0;}
.car_info.on .car_info_btn span{transform: rotate(180deg);}
.car_info.on .car_info_pop{height:50rem; padding:4rem 2.5rem 2.5rem 2.5rem; border:1px solid #000000;}
.car_info.on .car_info_pop .btn_wrap{display: none;}
.car_info.on .car_info_pop .carinfo{margin: 0 auto; zoom:.95;}
.car_info_close .close{display: none;}
.car_info.on .car_info_close .close{display: block; width:50px; height:50px; position:absolute; top:6px; right:6px; cursor: pointer; z-index: 99;}

.column.step_nav{width:13.75rem; padding-top: 1.625rem; flex:none;}
.column.step_nav ul li{display: flex; align-items: center; height:3.25rem; gap:2.5rem; padding:0 0.625rem; cursor: default;}
.column.step_nav ul li p{color:#CCCCCC; font-size: var(--font-18); font-weight: 500;}
.column.step_nav ul li::before{content: ""; display: block; width:.25rem; height:100%; background-color:transparent; border-left:1px solid #CCCCCC;}
.column.step_nav ul li.on p{color:#000000; font-weight: 700;}
.column.step_nav ul li.on::before{background-color:#000000; border:0;}
.column.step_nav ul li:first-child{padding-top: 0;}

.column.step_cont{width:calc(100% - 18rem); padding-top: 1.625rem; flex:1;}
.step_cont h4{font-size: var(--font-24); font-weight: 700; margin-bottom: 1.25rem;}
.step_cont .title-wrap{margin-bottom: 1rem;}
.step_cont .title-wrap p{font-size: var(--font-16); display: inline-block; margin-right:2px; color:#656565; letter-spacing: -.01rem; margin-top: -.3rem;}
.step_cont > div{display: none; flex-direction: column; justify-content: space-between;}
.step_cont > div:first-child {display: flex;}
.cont_wrap{display: flex; flex-direction: column; gap:3.2rem; height:54.6vh; height:calc(100vh - 180px - 226px); padding-right:1rem; margin-right:-1rem; overflow-y: scroll; opacity: 0; transform: translateX(20px); transition: opacity .3s, transform .3s;}
.step_cont > div.on .cont_wrap{opacity: 1; transform: translateX(0);}
.color_select {display: flex; flex-wrap: wrap; gap: 1.5625rem;}

.step_cont1 .flex{flex-wrap: wrap; gap:3.5rem;}
.step_cont1 h4{display: inline-block;}
.step_cont1 .option_all{position: relative; top:-0.1875rem; display: inline-block; border:1px solid #DEDEDE; border-radius: .625rem; padding:.5rem .8rem; margin-left: .3rem; font-size: var(--font-13); color: #3a3a3a; cursor: pointer;}
.step_cont1 .option_all.on{color:#000000; font-weight: 600;}
.step_cont1 .option_all.on:after{content: ""; position: absolute; inset:-1px; border-radius: inherit; border: 2px solid #000000;}
.step_cont1 .cont_km{flex:1; max-width:25rem;}
.step_cont1 .car_color1{display:none;}
.step_cont1:has(.car_color) .car_color2{display:none;}
.step_cont1:has(.car_color) .car_color1{display:block;}
.step_cont1 .car_color_btn{position: relative; display: flex; align-items: center; justify-content: space-between; width:20rem; border:1px solid #DEDEDE; border-radius: 10px; padding:0 1.5rem; cursor: pointer;}
.step_cont1 .car_color_btn p{font-size: var(--font-18); color:#7E7E7E;}
.step_cont1 .car_color_btn span{display: block; width: 5.2rem; height: 4.6rem; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url(/images/nophoto/nophoto_car.png);}
.step_cont1 .car_color_btn div{width: 0.75rem; height: 4.6rem;}
.step_cont1 .car_color_btn div::before{content: ""; display: block; width: 100%; height: 100%; background: url(/images/more.svg) center / 0.75rem no-repeat; opacity: .3;}
.step_cont1 .car_color_btn.btn_border::before{content: ""; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:calc(100% - 0.625rem); height:calc(100% - 0.625rem); border-radius: 7px; border:1px solid #EEEEEE;}

.outer_color_select{display: flex; flex-wrap: wrap; gap:1rem;}
.outer_color_modal .modal-popup.ty02{width:47.2rem;}
.outer_color_select input[type=radio]:checked + label{position: relative; border:1px solid #000000;}
.outer_color_select input[type=radio]:checked + label::before{content: ""; position: absolute; inset:-1px; border-radius: inherit; border:2px solid #000000;}
.outer_color_select input[type=radio]:checked + label p{font-weight: 700; color:#000000;}

.car_wrap input[type=radio] + label:after{display: none;}
.color_select input[type=radio] + label {display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; padding:0;}
.color_select input[type=radio] + label > div{display: flex; align-items: center; justify-content: center; width:3.125rem; height:3.125rem; border:1px solid #DFDFDF; border-radius: 50%;}
.color_select input[type=radio] + label > div > div{position:relative; width:1.25rem; height:2.5rem; overflow:hidden;}
.color_select input[type=radio] + label > div > div span{position: absolute; width: 2.5rem; height: 100%; border-radius: 50%;}
.color_select input[type=radio] + label > div > div.color_right{width: calc(1.3125rem - 1px);}
.color_select input[type=radio] + label > div > div.color_right span{right:0;}
.color_select input[type=radio] + label span {display: block; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #EEEEEE; box-sizing: border-box;}
.color_select input[type=radio] + label i {font-style: normal; font-size: var(--font-16); color: #7E7E7E;}
.color_select input[type=radio]:checked + label > div {border: 2px solid #111;}
.color_select input[type=radio]:checked + label span{border: 1px solid #bebebe;}
.color_select input[type=radio]:checked + label i {color: #000000; font-weight: 700;}
.unit.km{display: flex; align-items: center; gap:.5rem; width:100%; height:auto; border-radius: 10px; border:1px solid #DEDEDE; padding:0 1.5rem;}
.unit.km span{color:#CACCCE; font-size: 1.25rem; font-weight: 700;}
.unit.km input{text-align: right; border:0; height:auto; line-height: normal; padding:1rem 0; font-size: 1.25rem; font-weight: 700; color:#2f2f2f;}



.option{display: flex; flex-wrap: wrap; gap:.6rem 1.25%;}
.option input[type=checkbox] + label:before{position: relative; border:0; width:2.5rem;height:2.5rem; background-size: cover; background-position: center; background-repeat: no-repeat; top:0; left:0; border-radius: 0; transform: translateY(0); transition: none;}

.option input[type=checkbox] + label {display: flex; flex-direction: column; justify-content: center; align-items: center; gap:.3rem; width:15.62%; padding: 1rem .8rem; border: 1px solid #DEDEDE; border-radius: 10px; cursor: pointer; color: #A7A7A7; text-align: center;
  font-size: var(--font-18); font-weight: 400; letter-spacing: 0; box-sizing: border-box; line-height: 1.3;}
.option input:checked + label {color: #000000; font-weight: 700;}
.option input:checked + label::after{content: ""; display: block; position: absolute; inset:-1px; border-radius: inherit; border:2px solid #000000; width: auto; height: auto; margin: 0; border-width: 2px !important; transform: rotate(0deg);}

.option input[type=checkbox]#opt1 + label:before{background-image: url('/images/icon/sub_icon1.png');}
.option input[type=checkbox]#opt2 + label:before{background-image: url('/images/icon/sub_icon2.png');}
.option input[type=checkbox]#opt3 + label:before{background-image: url('/images/icon/sub_icon3.png');}
.option input[type=checkbox]#opt4 + label:before{background-image: url('/images/icon/sub_icon4.png');}
.option input[type=checkbox]#opt5 + label:before{background-image: url('/images/icon/sub_icon5.png');}
.option input[type=checkbox]#opt6 + label:before{background-image: url('/images/icon/sub_icon6.png');}
.option input[type=checkbox]#opt7 + label:before{background-image: url('/images/icon/sub_icon7.png');}
.option input[type=checkbox]#opt8 + label:before{background-image: url('/images/icon/sub_icon8.png');}
.option input[type=checkbox]#opt9 + label:before{background-image: url('/images/icon/sub_icon9.png');}
.option input[type=checkbox]#opt10 + label:before{background-image: url('/images/icon/sub_icon10.png');}
.option input[type=checkbox]#opt11 + label:before{background-image: url('/images/icon/sub_icon11.png');}
.option input[type=checkbox]#opt12 + label:before{background-image: url('/images/icon/sub_icon12.png');}
.option input[type=checkbox]#opt13 + label:before{background-image: url('/images/icon/sub_icon13.svg');}
.option input[type=checkbox]#opt14 + label:before{background-image: url('/images/icon/sub_icon14.svg');}
.option input[type=checkbox]#opt15 + label:before{background-image: url('/images/icon/sub_icon15.svg');}
.option input[type=checkbox]#opt16 + label:before{background-image: url('/images/icon/sub_icon16.svg');}
.option input#opt1:checked + label::before{background-image: url('/images/icon/sub_icon1_on.png');}
.option input#opt2:checked + label::before{background-image: url('/images/icon/sub_icon2_on.png');}
.option input#opt3:checked + label::before{background-image: url('/images/icon/sub_icon3_on.png');}
.option input#opt4:checked + label::before{background-image: url('/images/icon/sub_icon4_on.png');}
.option input#opt5:checked + label::before{background-image: url('/images/icon/sub_icon5_on.png');}
.option input#opt6:checked + label::before{background-image: url('/images/icon/sub_icon6_on.png');}
.option input#opt7:checked + label::before{background-image: url('/images/icon/sub_icon7_on.png');}
.option input#opt8:checked + label::before{background-image: url('/images/icon/sub_icon8_on.png');}
.option input#opt9:checked + label::before{background-image: url('/images/icon/sub_icon9_on.png');}
.option input#opt10:checked + label::before{background-image: url('/images/icon/sub_icon10_on.png');}
.option input#opt11:checked + label::before{background-image: url('/images/icon/sub_icon11_on.png');}
.option input#opt12:checked + label::before{background-image: url('/images/icon/sub_icon12_on.png');}
.option input#opt13:checked + label::before{background-image: url('/images/icon/sub_icon13_on.svg');}
.option input#opt14:checked + label::before{background-image: url('/images/icon/sub_icon14_on.svg');}
.option input#opt15:checked + label::before{background-image: url('/images/icon/sub_icon15_on.svg');}
.option input#opt16:checked + label::before{background-image: url('/images/icon/sub_icon16_on.svg');}

.color_select .color_etc{display: flex; flex-direction: column; align-items: center; gap: 0.5rem; cursor: pointer; padding:0;}
.color_select .color_etc div{display: flex; align-items: center; justify-content: center; width:3.125rem; height:3.125rem; border:1px solid #DFDFDF; border-radius: 50%;}
.color_select .color_etc i {font-style: normal; font-size: var(--font-16); color: #7E7E7E;}
.color_select .color_etc button{width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid #EEEEEE;}
.color_select .color_etc button::before{content: ""; display: block; width:100%; height:100%; background:url('/images/more.svg') center / 0.75rem no-repeat; opacity: .3;}
.color_select .color_etc.on div{border: 2px solid #111;}
.color_select .color_etc.on i{color: #000000; font-weight: 700;}
.color_select .color_etc.on button{border: 1px solid #bebebe;}
.color_select .color_etc.on button::before{opacity: 1;}

/*사진등록*/
.file-list{position: relative; display: flex; flex-wrap: wrap; gap:1.2rem 1.3%; margin:1rem 0;}
.file-list .img-list{position: relative; width:24%; cursor: pointer;}
.file-list .img-list p{margin-top:.3rem; font-size: var(--font-16); color:#515151; text-align: center;}
.file-list .img-list > button{position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1.9/1; border-radius: .5rem; border: 1px solid #dedede; background: #fbfbfc; color: #999; z-index: 1; overflow: hidden;}
.file-list .img-list > .btn-img:before{content: ''; position: relative; display: block; height: 2rem; background: url(/images/inc/icon_add.png) no-repeat center; background-size: auto 2rem; opacity: .5; z-index: 9;}
.file-list .img-list .photo{position: relative; height: auto; aspect-ratio: 1.9/1; border-radius: .5rem; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: 9;}
.file-list .img-list > .btn-img::after{content: ""; position: absolute; top:0; left:0; width:100%; height:100%;}
.file-list .img-list:nth-of-type(1) > .btn-img::after{background:url('/images/img-list1.jpg') center / cover no-repeat;}
.file-list .img-list:nth-of-type(2) > .btn-img::after{background:url('/images/img-list2.jpg') center / cover no-repeat;}
.file-list .img-list:nth-of-type(3) > .btn-img::after{background:url('/images/img-list3.jpg') center / cover no-repeat;}
.file-list .img-list:nth-of-type(4) > .btn-img::after{background:url('/images/img-list4.jpg') center / cover no-repeat;}
.file-list .img-list:nth-of-type(5) > .btn-img::after{background:url('/images/img-list5.jpg') center / cover no-repeat;}
.file-list .img-list:nth-of-type(6) > .btn-img::after{background:url('/images/img-list6.jpg') center / cover no-repeat;}
.file-list .img-list.on > .btn-img::after{display: none;}
.file-list .btn-del{position: absolute; top: .3rem; right: .3rem; width: 1.5rem; height: 1.5rem; text-align: center; background: rgba(0, 0, 0, 0.6); border-radius: 50%; font-size: 0; z-index: 3; display: none;}
.file-list .btn-del::before, .file-list .btn-del::after{content: ''; position: absolute; left: 50%; top: .25rem; width: .09rem; height: 1rem; background: #fff;}
.file-list .btn-del::before{transform: rotate(45deg) translate(0, 0);}
.file-list .btn-del::after{transform: rotate(-45deg) translate(0, 0); box-shadow: unset;}
.file-list .img-list.on .btn-del{display: block;}
.step_cont2 .title-wrap{margin-bottom: 0;}
.step_cont2 .flex{justify-content: space-between;}
.step_cont2 .flex .auth-box button{width:100%; height: fit-content; padding:1rem 2rem;}
.sortable-placeholder {border: 1px dashed #dbdbdb; background: #f5f5f5; visibility: visible !important;}
.step_cont2 .cont{position: relative;}
.step_cont2 .cont::before{content: ""; position: absolute; top:0; left:0; width:100%; height:0; background-color:#ffffffe0; z-index: 10; opacity: 0; transition: opacity .2s;}
.step_cont2 .cont.on::before{opacity: 1; height:100%;}
.step_cont2 .cont.on::after{content: ""; width:6.25rem; height:2.8125rem; background: url('/images/loading.svg') center / cover no-repeat; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index: 11;}



/*차량상태체크*/
.condition-mark{display: block !important;}
.check-car-info {padding-bottom:1rem;text-align:center;font-size:0.9rem;color:#555;letter-spacing:-1px;line-height:1.5;}
.check-car-info > span {vertical-align:middle;}
.check-car-info > strong {display:inline-block;padding:0 1rem 0 0.2rem;font-size:1.1rem;color:#ff6c00;vertical-align:middle;transform:translateY(-2px);}
.check-car-info .i-mark {width: 17px;height: 17px;font-size: 12px;line-height: 17px;}
.check-car-info .button-group .button {height:3.1rem;line-height:3.1rem;font-size:1rem;}
.check-car-wrap {padding:2rem 0;overflow:auto;}
.check-car-wrap.disable {position:relative;}
.check-car-wrap.disable img {opacity:0.3}
.check-car-wrap.disable button:disabled {background-color:#999 !important; border:0 !important; color:#fff;}
.check-car-wrap.disable .alert {position:absolute; left:10%;top:50%; width:80%; height:2rem;margin-top:-1.5rem;line-height:2rem;text-align:center; background-color:#fff; color:#999; font-size:.875rem; z-index:11 }
.step_cont3 .container{padding:0;}

.code-wrap{display:flex; flex-wrap: wrap; justify-content: flex-start; width:100%; gap:.5rem 0; position:relative; padding:1rem 0; margin:0 auto;}
.code-wrap .i-mark {width: 1rem;height: 1rem;font-size:.75rem;line-height:1rem;font-weight:normal;}
.code-wrap li {display:inline-block; vertical-align:top; margin:0 .25rem; font-size:var(--font-14);color:#888; letter-spacing: 0;}
.apply .code-wrap{justify-content: center;}
.ex-box{display: flex; gap:.2rem; margin: 0 auto;}
.ex-box span{width:calc(100% - 1.2rem); font-size: 0.6875rem; color:#999999; font-size: var(--font-14); letter-spacing: 0px; word-break: keep-all;}
.ex-box::before{content: ""; display: block; width:1rem; height:1rem; background:url('/images/inc/ex2.svg') center / cover no-repeat;}


.modal-popup.ty02 .pop-content{padding: 2rem 1.875rem 2.5rem; max-height: 27rem !important; background: #fff; overflow-y: auto; font-size: 1rem;}
.modal-popup .pop_top h3{padding-bottom: .7rem; font-weight: bold; font-size: 1.2rem;}
.modal-popup .pop_top p{position: absolute; top: 0; right: 0; left: inherit; width: 3rem; height: 3rem; border: 0;
    background: url(/api/images/pop_close.png) center center no-repeat; background-size: auto 1rem; font-size: 0; cursor: pointer;}
.modal-popup.ty02{position: fixed; left: 50%; top: 50%; width: 40%; padding-top: 1rem; height: auto; transform: translate(-50%, -50%);
    border-radius: 1.875rem; background: #fff; overflow: hidden; font-size: 0; z-index: 999;}
.modal-popup .content-cont{padding: 1rem; text-align: center; word-break: keep-all;}
.square, .inputround{display: flex; flex-wrap: wrap; justify-content: space-between; gap: .7rem; position: relative;}
.modal-popup input[type=checkbox] + label:before, .modal-popup input[type=checkbox]:checked + label:after{display: none;}
.square input[type=checkbox] + label, .square input[type=radio] + label{display: flex; gap:.2rem; width:31%; min-height: 3.5rem; margin: 0; border-width: 1px; border-style: solid;
    border-radius: .375rem; border-color: #dedede; padding: .625rem; text-align: center; line-height: 1.1; color: #53535C; align-items: center; justify-content: center; overflow: hidden;}
.square input[type=checkbox]:checked + label, .square input[type=radio]:checked + label{background-color: #0065D9; border-color: #0065D9; color: #fff;}
#layerback{background-color: rgba(0,0,0,.5) !important; z-index: 199 !important;}
.modal-popup .button-group{display: flex; align-items: center; padding: 0;}
.modal-popup .button-group button{width: 100%; height: 3.75rem; border: 0; padding: 0; margin: 0; font-size: 1rem; font-weight: normal; background:#1C1C1C; color:#fff; text-align: center; cursor: pointer;}

.modal-wrap{position:fixed; top:0; left:0; opacity: 0; visibility: hidden; z-index: 99999;}
.modal-wrap .modal-popup{opacity: 0; transition: opacity .3s ease;}
.modal-wrap.on .modal-popup{opacity: 1;}
.modal-pop-bg{position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0, 0, 0, 0.5);}
.modal-wrap.on{opacity: 1; visibility: visible;}



/*차량설명*/
.radio-type{display: flex; flex-wrap: wrap; gap:.8rem 1.25%;}
.radio-type input[type=radio] + label:before{display: none;}
.radio-type input[type=radio]:checked + label:after{display: none;}
.radio-type input[type=radio] + label{display: flex; justify-content: center; align-items: center; width:32.5%; padding: 1rem; border: 1px solid #DEDEDE; border-radius: 10px; cursor: pointer; color: #A7A7A7; text-align: center;
  font-size: var(--font-18); font-weight: 500; letter-spacing: 0; box-sizing: border-box; line-height: 1.2;}
.radio-type input:checked + label {color: #000000; font-weight: 700;}
.radio-type input:checked + label::before{content: ""; display: block; position: absolute; inset:-1px; border-radius: inherit; border:2px solid #000000;}

.auction-type.radio-type input[type=radio] + label{font-size: var(--font-20);}
.car-condition textarea{width:100%; min-height:18rem; padding:1rem; border: 1px solid #DEDEDE; border-radius: 10px;}
.car-condition textarea::placeholder{color:#d6d6d6; font-size: var(--font-16);}
.memo-counter{text-align: right; font-size: .8rem; color:#999999; margin-top: .3rem;}
.memo-counter span{font-size: .8rem; color:#999999;}


/*지역 및 경매방식*/
.region-select.radio-type{gap:.6rem 1.25%;}
.region-select.radio-type input[type=radio] + label{width:19%; padding:.8rem 1rem;}
.auction-type.radio-type input[type=radio] + label{width:49.36%; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap:.5rem; padding: 1.5rem;}
.auction-type.radio-type input[type=radio] + label span{font-size: var(--font-16); color:#999; text-align: left; letter-spacing: -.01px; word-break: keep-all;}
.auction-type.radio-type input[type=radio] + label::after{position: absolute; display: block; content: ""; right:.9rem; top:.9rem; width:1.375rem; height:1.375rem; background:url('/images/check_icon.svg') center / cover no-repeat;
left: auto; transform: translateY(0); transition: none; border: none;}
.auction-type.radio-type input:checked + label::after{background:url('/images/check_icon_on.svg') center / cover no-repeat;}
.auth-wrap{display: flex; justify-content: space-between; flex-direction: column; align-items: flex-end; gap:1rem 0; width:fit-content;}
.auth-box{position: relative; display: flex; gap:1rem;}
.auth-box input{width: 22rem; height:auto; border-radius: 10px; border: 1px solid #DEDEDE; padding:1.2rem 1.5rem; line-height: normal; font-size: 1.25rem; font-weight: 700; color:#2f2f2f;}
.auth-box input::placeholder{color:#CACCCE; font-size: 1.25rem; font-weight: 700;}
.auth-box .remain{position: absolute; bottom:-1.25rem; left:0.625rem; font-size: var(--font-14); color:#7f7f7f;}
.auth-box button{width: 10rem; background: #292929; color:#ffffff; padding:1rem 0; font-size: var(--font-16); border-radius: .88rem; font-weight: 600; letter-spacing: -.05px;}
.step_cont5 .district{display: none;}
.step_cont5 .district.on{display: block;}
.step_cont5 .cont_wrap{flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-content: flex-start; gap:3.2rem 0;}
.step_cont5 .cont_wrap .cont:nth-of-type(1), .step_cont5 .cont_wrap .cont:nth-of-type(2){width:48%; order: 2;}
.step_cont5 .cont_wrap .cont:nth-of-type(2){padding-top:.8rem; order: 3;}
.step_cont5 .cont_wrap .cont:nth-of-type(3){width:100%; order: 1;}

.step_cont5 .title-wrap p{margin-top: 0;}

/*신청정보 확인*/
.carinfo.carcheck h4{margin-bottom: 0;}
.carinfo.carcheck .ul_list.sc{max-height:none; overflow-y: visible;}
.carinfo.carcheck .ul_list > li ul{max-height:10rem; height:auto;}
.carinfo.carcheck .history_list{max-height:33.75rem; padding:1.5rem .5rem;}
.carinfo.carcheck .cont{padding:0 .5rem;}
.carinfo.carcheck .cont2 > div:first-of-type .accor{border-bottom: 0;}
.carinfo.carcheck .cont2 .detailCon{padding:1.5rem .5rem;}
.carinfo.carcheck .cont2 .detailCon, .carinfo.carcheck .cont3 .history_list{display: none;}
.carinfo.carcheck .accor{position: relative; display: flex; justify-content: space-between; align-items: center; padding:1.25rem 1rem; border-block:1px solid #000000; cursor: pointer;}
.carinfo.carcheck .accor span{display: block; width: 0.75rem; height: 0.375rem; background: url(/images/arrow_down.svg) center / cover no-repeat; transition: transform .1s;}
.carinfo.carcheck .accor.on span{transform: rotate(180deg);}
.carinfo.carcheck .accor.on{border-bottom: 0;}
.carinfo.carcheck .cont3:has(.accor.on){border-bottom:1px solid #000000; padding-bottom: 1rem;}
.carinfo.carcheck .accor.on::after{content: ""; position: absolute; left:0; bottom:0; width:100%; height:1px; background-color:#000000; opacity: .1;}
.carinfo .apply-info{width:68.75rem; display: flex; flex-direction: column; gap:2.5rem;}
.carinfo .apply-info .cont{margin-bottom: 0;}
.carinfo .apply-info h4{margin-bottom: 1.25rem;}
.carinfo .apply-info h4::after{display: none;}
.carcheck .option-box{display: flex; flex-wrap: wrap; gap:0.875rem 0.75rem;}
.carcheck .option-box > div{display: flex; justify-content: center; align-items: center; padding: 1rem 1.625rem; border-radius: .625rem;
    background-color:#F5F7FA; color: #000000; text-align: center; font-size: var(--font-16); letter-spacing: 0; line-height: 1.3;}
.photo-box{display: flex; justify-content: space-between;}
.photo-box > div{width:12%; height:4.25rem; border-radius: .625rem; overflow: hidden; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;}

.photo-box.swiper-wrapper > div{height:auto; aspect-ratio:1.7/1; overflow: hidden; border-radius: 0; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;}
.modal-popup .content-cont.swiper{padding:0; border-radius: .625rem;}
.photo_modal .modal-popup.ty02{width:65%;}
.photo_modal .modal-popup .button-group{position: absolute; left:0; bottom:0; width:100%;}
.photo_modal .modal-popup.ty02 .pop-content{max-height: none !important; overflow: hidden; padding:2rem 1.875rem 5.6rem;}
.photo_modal .photo-next, .photo_modal .photo-prev{position: absolute; top:50%; transform: translateY(-50%); width:1rem; height:1.875rem;; z-index: 9; cursor:pointer;}
.photo_modal .photo-next{background: url('/images/swiper_arrow_right.svg') center / cover no-repeat; right:1rem;}
.photo_modal .photo-prev{background: url('/images/swiper_arrow_left.svg') center / cover no-repeat; left:1rem;}
.photo_modal .swiper-pagination{position: relative; font-size: var(--font-14); color:#818181; bottom:auto; margin-left: .5rem;}
.photo_modal .swiper-pagination span{font-size: var(--font-14); color:#818181;}

.more-btn{display: flex; justify-content: space-between;}
.more-btn span{display: flex; align-items: center; margin-bottom: .7rem; font-size: var(--font-12); color:#3d3d3d; letter-spacing: 0; cursor: pointer;}
.more-btn span::after{content: ""; display: block; width:.9rem; height:.9rem; background:url('/images/arrow_right.png') center / cover no-repeat;}
.carcheck .cont-box *{letter-spacing: 0;}
.carcheck .cont-box{padding:2.5rem; border-radius: 10px; border:1px solid #E9E9E9; word-break: keep-all;}
.carcheck .cont3 .cont-box{padding:2.8125rem 1.875rem;}
.carcheck .cont-box p{font-size: var(--font-16); color:#212121; line-height: 1.8; letter-spacing: 0;}
.carcheck .cont3 .cont-box{display: flex; justify-content: center; align-items: center; gap:3rem;}
.carcheck .cont3 .cont-box > img{width:31.25rem;}
.carcheck .cont3 .cont-box > div{width:21rem;}
.carcheck .cont3 .container{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; gap:0 3rem; height:420px; padding:2.8125rem 1.875rem; border-radius: 10px; border: 1px solid #E9E9E9;}
.carcheck .cont3 .check-car-wrap{zoom:.65; max-width: fit-content; padding:0;}
.carcheck .cont3 .code-wrap{margin: 0; width:21rem;}
.carcheck .cont3 .ex-box{margin: 0; width:21rem;}
.carcheck .cont4 .cont-box p{white-space: pre-wrap;}
.carcheck .cont5 .cont-box ul{display: flex;}
.carcheck .cont5 .cont-box ul li{display: flex; gap:1rem; justify-content: center; align-items: center; width:calc(100% / 3);}
.carcheck .cont5 .cont-box ul li p{font-size: var(--font-18); color:#6C6C6C;}
.carcheck .cont5 .cont-box ul li div{font-size: var(--font-18); color:#000000; font-weight: 700;}
.bg-w, .bg-x{background: #f64747;}
.bg-a, .bg-b, .bg-u, .bg-t, .bg-c, .bg-o, .bg-u, .bg-p, .bg-f{background-color: #6b727d;}
.i-mark{position: relative; display: inline-block; padding:0; margin-right:2px; color:#fff; text-align: center; overflow: hidden; border-radius: 50%; vertical-align: middle;}
.data-empty {display: flex; justify-content: center !important; align-items: center; width: 100% !important; height:100% !important; word-break: break-all;
    letter-spacing: -1px; border-top:0 !important; border-bottom:0 !important; background-color:#f8f8f8 !important; color:#b4b4b4; font-size: .9rem; letter-spacing: 0;}
.data-empty span{font-size: .9rem !important;color: #b4b4b4 !important; width:auto !important;}
.carinfo .column.graph .cont .detailCon:has(.data-empty) > div:first-of-type{height:24rem;}
.chart_wrap:has(.data-empty){height:13.2rem;}
.carinfo .history_list:has(.data-empty){height:17rem;}
.carinfo .ul_list:has(.data-empty){height:17rem;}

/*완료페이지*/
.complet .container{max-width: none; padding: 0 !important;}
.complet_tit_wrap{padding-top: 6.25rem;}
.complete_tit{text-align: center;}
.complete_tit h2{font-size: 2.5rem; color:#000000; margin-bottom: 1.875rem; line-height: 1.4;}
.complete_tit h2 strong{font-size: 2.5rem; color:var(--main-color);}
.complete_tit p{font-size: var(--font-18); color:#595959; letter-spacing: 0; line-height: 1.5;}
.complete_tit p strong{font-weight: 700; color:#000000; font-size: var(--font-18);}
.app_tit h2, .app_tit p::before{color:#ffffff;}
.app_tit p::before{content: "실시간으로 내차팔기 진행상황을 확인하세요.\AQR코드를 찍어 앱을 다운로드하세요"; display: block; font-size: var(--font-18); letter-spacing: 0; line-height: 1.5; word-break: keep-all; white-space: pre-line;}
.step_check{display: flex; align-items: center; justify-content: center; gap:2rem; margin-top: 3.125rem;}
.step_check>div:not(.step_line){display: flex; flex-direction: column; align-items: center;}
.step_check>div:not(.step_line)::before{content: ""; display: flex; align-items: center; justify-content: center; width:2.75rem; height:2.75rem; border-radius: 50%; background:#F5F7FA url(/images/step_check.svg) center / 50% no-repeat;}
.step_check>div.step_check3::before{content:"3"; background:var(--main-color); color:#ffffff; font-weight: 700; font-size: var(--font-22);}
.step_check>div p{font-weight: 700; color:#797979; font-size: var(--font-18); text-align: center; letter-spacing: 0; margin-top: .625rem;}
.step_check>div.step_check3 p{color:#000000;}
.step_check .step_line{width:4.8rem; height:1px; background-color:#C3C3C3;}

.complete_ex{display: flex; justify-content: center; gap:1.875rem; background-color:var(--bg-color); padding:5rem 0; margin-top: 5rem;}
.complete_ex > div{width:21.875rem; text-align: center;}
.complete_ex h4{font-size: var(--font-24); color:#000000;}
.complete_ex p{font-size: var(--font-16); color:#595959; margin:.8rem 0 1.875rem; letter-spacing: 0;}
.naepal_app{background: url(/images/app_bg.jpg) center / cover no-repeat;}
.naepal_app .app_cont{display: flex; align-items: center; justify-content: center; gap:5.625rem; padding:5rem 0;}
.naepal_app .app_cont .appimg1{display: flex; gap:1.875rem;}
.naepal_app .app_cont .appimg1 > div{background-color:#ffffff; border-radius:1.25rem; padding:1.25rem 1.5rem;}
.naepal_app .app_cont .appimg1 > div p{font-size: var(--font-22); text-align: center; color:#000000; font-weight: 700;}
.naepal_app .app_cont .appimg1 img{width:10.625rem;}
.naepal_app .app_cont .appimg2{display: none; flex-direction: column; gap:1rem;}
.naepal_app .app_cont .appimg2 > div{display: flex; align-items: center; justify-content: center; background-color:#000000; border-radius: 100px; width:22.5rem; height:5.3125rem;}


@media(max-width:1600px){
.container{padding:0 2rem;}
html.info_html{font-size: 15px;}
.carinfo .column.graph{width:38%;}
.carinfo .column{width:26%;}
.carinfo .apply-info{width:67%;}
.carinfo .car_img{padding-top: 1.5vw;}
.btn_wrap.fix > div{width:64.5%; margin-right: max(2rem, calc((100vw - 1605px) / 2));}
.radio-type input[type=radio] + label{font-size: var(--font-16);}
.carinfo .history::before{left:-10%;}
.carinfo .history::after{right:-10%;}
.carcheck .cont3 .check-car-wrap{zoom:.6;}

}
@media(max-width:1500px){
  .step_cont1 .cont_km{flex:auto; max-width: none;}
  
}

@media(max-width:1400px){
  html.info_html{font-size: 14px;}
  html.apply_html{font-size: 15px;}
  .color_select input[type=radio] + label div, .color_select .color_etc div{width:3.1rem; height:3.1rem;}
  .color_select input[type=radio] + label span{width:2.4rem; height:2.4rem;}
  .carcheck .cont3 .container{height:380px; gap:1rem;}
  .carcheck .cont3 .check-car-wrap{zoom:.55;}
}
@media(max-width:1300px){
  .carinfo .ul_list li{gap:.5rem;}
  .carinfo .column.graph .detailCon{gap:2rem;}
  .carinfo .column.graph .cont .price_wrap{margin-top: 2rem;}
  .step_cont .title-wrap p, .step_cont .title-wrap span{font-size: var(--font-14);}

  .btn_wrap .button{width:17rem;}
  .option input[type=checkbox] + label, .region-select.radio-type input[type=radio] + label{width:24.05%;}
  .modal-popup.ty02{width:70%}
  
  .auth-box .remain{bottom:-1.5625rem; left:0.3125rem;}

  .carcheck .cont3 .cont-box{flex-direction: column;}
  .carcheck .cont3 .cont-box > div{width:30rem;}
  .carcheck .photo-box{justify-content: flex-start; flex-wrap: wrap; gap:.85rem 2%;}
  .carcheck .photo-box > div{width:15%; height:auto; aspect-ratio: 3/2;}

  .btn_wrap.fix > div{width:64%;}
  .auth-wrap{flex-direction: column; gap:1rem 0; width:auto;}
  .auth-wrap .auth-box:first-child, .auth-wrap .auth-box:last-child{width:100%}
  .auth-box input{width:39%;}
  .auth-box input#hpcheck{width:79.8%;}

  .carcheck .cont3 .container{height:auto; gap:0;}
  .carcheck .cont3 .code-wrap{width:30rem; margin:2rem auto 0;}
  .carcheck .cont3 .ex-box{width:30rem;}

}
@media(max-width:1200px){
.step_cont1 .flex{gap:3.2rem;}
.step_cont2 .flex{flex-direction: column;}
.car_info.on .car_info_pop{padding:4rem 1.5rem 2rem 1.5rem;}
.car_info.on .car_info_pop .carinfo{zoom:.8;}
.carinfo .ul_list li > div{max-width:9.25rem}
.car_info.on .car_info_pop{height:42rem;}
.apply .container{gap:0 3rem}
.check-car-wrap{zoom:.8;}
.file-list{padding:1.5rem 0;}
.step_cont5 .cont_wrap .cont:nth-of-type(1), .step_cont5 .cont_wrap .cont:nth-of-type(2){width:100%;}
.step_cont5 .cont_wrap .cont:nth-of-type(2){padding-top: 0;}

.photo_modal .modal-popup.ty02{width:90%;}
}
@media(max-width:1100px){
html.info_html{font-size: 13px;}
.btn_wrap.fix > div{width:63.5%;}
.step_cont1 .flex > div{width:100%;}
.step_cont1 .car_color_btn{width:100%;}
.option input[type=checkbox] + label, .radio-type input[type=radio] + label{font-size: var(--font-16);}
}
@media(max-width:1050px){
  .carinfo .ul_list.sc{max-height:303px;}
  .carinfo .ul_list > li > span{width:5.875rem}
  .carinfo .column.graph .cont .price_wrap{margin-top: 2rem;}
  .carinfo .level-price{padding-bottom:.6rem;}
  .carinfo .column.graph .tx_box, .carinfo .column.graph .tx_box b{font-size: var(--font-18);}
  .carinfo .proper_price ul{padding:0;}
  .check-car-wrap{zoom:.7;}

  .naepal_app .app_cont{padding:6rem 0;}
}

@media(max-width:900px){
  html.info_html{font-size: 15px;}
  .container{overflow: hidden;}
  .container.pb8{padding-bottom: 8rem;}
  .title_wrap h2{font-size: 2.5rem; display: none;}
  .carinfo{gap:3.125rem; gap:2.5rem;}
  .carinfo .column{width:100%;}
  .carinfo .column.graph{width:100%;}
  .carinfo .column{gap:2rem;}
  .carinfo h4{margin-bottom: 1rem;}
  .carinfo .car_img{padding-bottom: 3rem;}
  .carinfo .ul_list.sc, .carinfo .history_list{max-height: none; overflow: visible;}
  .carinfo .ul_list > li ul li{gap:.5rem;}
  .carinfo .ul_list > li ul li p{max-width:none;}
  .carinfo .ul_list > li ul{height:auto;}
  .carinfo .ul_list li > div{max-width:none;}
  .carinfo .column.info .cont{padding:0;}
  .carinfo .history::before, .carinfo .history::after{display: none;}
  .apply .copyright{display: none;}
  .apply .container{padding-bottom: 8rem;}
  .step_cont3 .container{padding-bottom: 0;}
  .carinfo.carcheck .history_list{max-height:none;}
  .carinfo.carcheck .ul_list > li ul{max-height:none;}
  .btn_wrap{position: fixed; left:0; bottom:0; width:100%; z-index: 9; padding: 1rem 2rem; background-color:#ffffff; font-size: 0;}
  .btn_wrap.btn1 .button{width:100%;}
  .btn_wrap.fix{padding:1rem 2rem;}
  .btn_wrap.fix > div{width:100%; margin-right:0;}
  .br_pc{display: none;}
  .code-wrap{justify-content: center;}

  .step_cont6 .cont_wrap{padding-bottom: 2rem;}
  .auth-box .remain{font-size: var(--font-16); bottom:-1.875rem;}
  
  .car_info{display: none;}
  .column.step_nav{width:100%; padding-top: 0;}
  .column.step_nav::before{content:"";  height:100%; background:#f5f5f5;}
  .column.step_nav ul{position: relative; display: flex; z-index: 1; left: -2rem; width:calc(100% + 4rem);}
  .column.step_nav ul li{width:calc(100% / 6); height:auto; padding:0; gap:0; pointer-events: none;}
  .column.step_nav ul li p{position: absolute; left:50%; transform: translateX(-50%); top:-1.8rem; font-size: 0;}
  .column.step_nav ul li::before{width:100%; height:.3rem; border:0; background-color:#efefef}

  .column.step_cont{width:100%;}
  .cont_wrap{height:auto;}
  .color_select input[type=radio] + label div, .color_select .color_etc div{width:2.9rem; height:2.9rem;}
  .color_select input[type=radio] + label span, .color_select .color_etc button{width:30px; height:30px;}
  .color_select input[type=radio] + label > div > div{width: 1.1rem; height:2.25rem}

  .step_cont h4{font-size: var(--font-22);}
  .step_cont2 .ex-box{display: none;}

  .carinfo.carcheck .column{width:100%;}
  .carinfo.carcheck .apply-info{width:100%;}
  .carcheck .option-box{gap:.7rem;}
  .carcheck .option-box > div{padding:.8rem 1rem;}
  .check-car-wrap{zoom:.7;}
  .carcheck .cont-box{padding:2rem;}

  .modal-popup.ty02, .outer_color_modal .modal-popup.ty02{width:85%;}
  
  .option, .region-select.radio-type{gap:1vw 1.25%;}

  .naepal_app .app_cont{flex-direction: column; gap:2.5rem;}
  .naepal_app .app_cont .appimg1{display: none;}
  .naepal_app .app_cont .appimg2{display: flex;}
  .app_tit p::before{content: "내팔 APP을 설치하여\A실시간으로 내차팔기 진행상황을 확인하세요.\A아래 버튼을 눌러 앱을 다운로드하세요";}
  .complete_ex{gap:3.5rem;}
  .complete_ex > div{width:auto;}


  .carinfo .column.graph .cont .detailCon:has(.data-empty) > div:first-of-type{height:15rem;}
  .chart_wrap:has(.data-empty){height:10rem;}
  .carinfo .history_list:has(.data-empty){height:12rem;}
  .carinfo .ul_list:has(.data-empty){height:12rem;}
  
  
}
@media(max-width:700px){
.title_wrap h2{font-size: var(--font-36);}
.title_wrap .car_num > div p{font-size: var(--font-24);}
.file-list .img-list > button, .file-list .img-list .photo{aspect-ratio: 1.5/1;}
  .auth-box{flex-direction: column; gap:1rem;}
  .auth-box input, .auth-box input#hpcheck{width:100%;}
  .auth-box button{width:100%;}
  .auth-wrap{gap:3rem 0;}
}
@media(max-width:600px){
  html.info_html, html.apply_html{font-size: 14px;}
  .container{padding:0 1rem; overflow: hidden;}
  .container.pb8{padding-bottom: 7rem;}
  .carinfo .car_img{padding-bottom: 2rem;}
  .carinfo .car_name h2{font-size: var(--font-32);}
  .title_wrap{padding-bottom: 1rem;}
  .title_wrap h2{font-size: var(--font-30);}
  .title_wrap .car_num > div p{font-size: var(--font-22);}
  .carinfo .ul_list > li > span, .carinfo .ul_list li > div, .carinfo .ul_list li > div b{ font-size: var(--font-18);}
  .carinfo .ul_list > li > span{width:6.7rem;}
  .carinfo .ul_list li{gap:0; margin:.3rem 0;}
  .carinfo .ul_list > li ul li *{font-size: var(--font-16);}
  .carinfo .history_list .h_date p{font-size: var(--font-18);}
  .carinfo .history_list .h_tx p{font-size: var(--font-16);}
  .carinfo .column.graph .cont .price_wrap{padding:2rem 1.5rem;}
  .carinfo .level-price{padding-bottom: 1.2rem;}

  .column.step_nav ul{left: -1rem; width:calc(100% + 2rem);}
  .br_pc{display: block;}
  .btn_wrap{padding:1rem;}
  .btn_wrap .button{width:48%;}
  .btn_wrap .button_prev::after{left: .7rem;}
  .btn_wrap .button_next::after{right: .7rem;}
  .btn_wrap.fix{padding:1rem;}
  .option, .region-select.radio-type{gap:1.5vw 2.25%;}
  .option input[type=checkbox] + label, .region-select.radio-type input[type=radio] + label{width:31.8%;}
  .auction-type.radio-type input[type=radio] + label{font-size: var(--font-18);}

  .auction-type.radio-type{gap:.8rem 2.25%}
  .auction-type.radio-type input[type=radio] + label{width:48.8%;}
  
  .unit.km{width:100%;}
  .square input[type=checkbox] + label, .square input[type=radio] + label{width:100%;}


  .carcheck .photo-box > div{width:23.5%;}
  .carcheck .cont3 .cont-box > div{width:100%;}
  .carcheck .cont3 .code-wrap{width:100%; margin:2rem auto 0;}
  .carcheck .cont3 .ex-box{width:100%;}
  .carcheck .cont5 .cont-box ul{flex-direction: column; gap:1rem;}
  .carcheck .cont5 .cont-box ul li{justify-content: flex-start; align-items: center; width:100%;}
  .copyright{padding: 3.125rem 1rem 7.5rem;}
  .modal-popup .content-cont{padding:1rem 0 0;}


  .complet_tit_wrap{padding-top: 5rem;}
  .complete_ex{gap:2.5rem;}
  .complete_tit h2, .complete_tit h2 strong{font-size: 2rem;}
  .naepal_app .app_cont .appimg2 img{max-width:9rem;}
  .naepal_app .app_cont .appimg2 div:nth-of-type(2) img{max-width:10.5rem;}
  .complete_ex{flex-direction: column; gap:4rem;}


}
@media(max-width:500px){
.title_wrap h2{font-size: var(--font-22);}
.title_wrap .car_num > div{padding:.2rem 2.2rem;}
.carinfo .car_img{padding-bottom: 1.5rem;}
.carinfo .ul_list li > div{max-width:18rem;}
.carinfo .level-price .auto-price{padding:.625rem 1rem;}
.file-list{gap:1.2rem 6%;}
.file-list .img-list{width:47%;}
.file-list .img-list > button, .file-list .img-list .photo{aspect-ratio: 1.8/1;}

.step_check{gap:1rem;}
.step_check .step_line{width:9vw;}
.step_check>div:not(.step_line)::before{width:2rem; height:2rem;}
.step_check>div.step_check3::before{font-size: var(--font-18);}

.step_cont2 .cont.on .file-list li{display: none;}
.step_cont2 .cont.on{height:77vh;}

}
@media(max-width:400px){
  html.info_html, html.apply_html{font-size: 13px;}
  .title_wrap{gap:1rem;}
  .title_wrap h2, .title_wrap .car_num > div p{font-size: var(--font-20);}
  .option input[type=checkbox] + label{padding:.6rem .4rem;}
  .carinfo .level-price .auto-price b{font-size: var(--font-16);}
}

@media (min-width: 900px) and (max-height: 1080px) {
  .apply{overflow: visible;}
  .check-car-wrap{zoom:.8;}
  .option input[type=checkbox] + label{padding:.8rem; font-size: var(--font-16);}
  .btn_wrap.fix{padding:1rem 0;}
}
@media (min-width: 900px) and (max-height: 935px) {
  html.apply_html{font-size: 15px;}
  .check-car-wrap{zoom:.7;}
  .car-condition textarea{min-height:16rem;}
  .option input[type=checkbox] + label{width:11.4%;}
}
@media (min-width: 900px) and (max-height: 700px) {
  .header{height:4rem;}
  .apply .car_info{display: none;}
  .apply .container{padding-top: 1rem;} 
  .cont_wrap{height:calc(100vh - 180px - 71px);}
}
@media (min-width: 900px) and (max-height: 580px) {
  
  .column.step_nav ul li{padding:1rem .625rem;}
  .column.step_nav ul li p{font-size: var(--font-18);}
}
@media (min-width: 900px) and (max-height: 400px) {
  .column.step_nav{display: none;}
  .column.step_cont{width:100%; max-width:none;}
}
@media (min-width: 900px) and (min-height: 1200px) {
  .cont_wrap{height:calc(100vh - 180px - 236px);}

}