@import url(../font/pretendard-dynamic-subset.css);

*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;

  font-family:
  Pretendard,
  -apple-system,
  BlinkMacSystemFont,
  system-ui,
  Roboto,
  "Helvetica Neue",
  "Segoe UI",
  "Apple SD Gothic Neo",
  "Noto Sans KR",
  "Malgun Gothic",
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol",
  sans-serif;

  margin:0;
  padding:0;
}

html{height:100%;width:100%;}
body{height:100%;width:100%;background:#ddd;font-size:16px;font-weight:700;animation:fadein 1s;-moz-animation:fadein 1s;-webkit-animation:fadein 1s;-o-animation:fadein 1s;}
h1, h2, h3, h4, h5, h6{font-weight:normal;}
input,
select{vertical-align:middle;}
input::placeholder,
select::placeholder,
textarea::placeholder{color:#999}
textarea{color:#666}

input[type=radio]{margin-top:-3px;}
input[type=text],
input[type=password],
input[type=submit],
input[type=search],
textarea,
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;}
button{border:none;cursor:pointer;vertical-align:middle;}
button:active{position:relative;top:1px;left:1px;}
input[type=button]:active{position:relative;top:1px;left:1px;}
ul{list-style:none}
a,
a:link,
a:visited,
a:active,
a:hover{color:#333;text-decoration:none;}
img{vertical-align:top;border:0;max-width:100%}
table{border-collapse:collapse;border-spacing:0;width:100%;}
legend,
caption{position:absolute;top:-9999px;left:-9999px;z-index:-1}
em{font-style:normal;}
.clearfix:after{content:"";display:table;clear:both}
.fixedclear:after{content:"";clear:both;display:block;}
input,
select,
option,
textarea,
button{outline:none;transition:box-shadow 0.3s;}
input[type=button]:hover,
select:hover,
textarea:hover,
button:hover{color:var(--main-color);border-color:var(--main-color);}
select:focus,
textarea:focus{border-color:var(--main-color-active) !important;box-shadow:0 0 0 3px rgba(255, 33, 57, .3);}

:root{
    --main-color:#af1f39;
    --main-color-light:#ff737d;
    --main-color-light2:#ff5063;
    --main-color-active:#ff2139;
    --main-color-deep:#89152a;
    --main-color-deep2:#b50f2f;
    --main-color-dark:#630f17;
    --sub-color:#f7b000;
    --sub-color-light:#ffecb5;
    --sub-color-light2:#efd792;
    --sub-color-active:#ffd000;
    --sub-color-deep:#c2aa1c;
    --sub-color-dark:#664d03;

	--tr-selected-light:#ffe2e7;
	--tr-selected-dark:#56242e;
}




#xline {width:100%; height:100%; margin:0; padding:0; overflow: hidden; position: fixed;}
#bg-xline {width: 2000px;height: 2000px;position: absolute;left: calc(50% - 1000px);top: calc(50% - 1000px);max-width: unset !important;vertical-align: unset !important;}
@-webkit-keyframes xlineani {0% {transform:rotate(0) scale(1);} 50%{transform:rotate(360deg) scale(1.25);} 100% {transform:rotate(0) scale(1);}}
@keyframes xlineani {0% {transform:rotate(0) scale(1);} 50%{transform:rotate(360deg) scale(1.25);} 100% {transform:rotate(0) scale(1);}}
#splash {
  width:calc(100vw + 100px); height:calc(100vh + 100px); background:#b01239; background:linear-gradient(128deg, #b01239, #630f17); padding: 0; color: #fff;
  position: absolute; top:-50px; left:-50px; z-index: 5; overflow: hidden;
  display: flex; justify-content: flex-start; flex-direction: column; align-items: left;
  -webkit-animation:fadeout .6s ease-out 3.8s forwards;
  animation:fadeout .6s ease-out 3.8s forwards;
  z-index:999;}
#splash > span {margin-top:256px; margin-bottom: 24px; font-size:24px; font-weight: 300; letter-spacing:-1px;}
#splash > span,
#splash > #slogo {position:relative; left:10%;}
#slogo {width:48vw; height:auto;}
@-webkit-keyframes simg-slide {0% {transform:translateX(256px); } 100% {transform:translateX(64px);}}
@keyframes simg-slide {0% {transform:translateX(256px); } 100% {transform:translateX(64px);}}
@-webkit-keyframes fadeout {0% { opacity:1; } 100% { opacity: 0; }}
@keyframes fadeout {0% { opacity:1; } 100% { opacity:0; }}
#simg {height: 80%; bottom: 0; position: absolute; right:0;
  -webkit-animation:simg-slide 4.2s cubic-bezier(.74,.2,.34,.76) forwards;
  animation:simg-slide 4.2s cubic-bezier(.74,.2,.34,.76) forwards;
}

#header{
  position:fixed; left:0; top:0; width: 100%;
  background:var(--main-color); background:linear-gradient(45deg, var(--main-color), var(--main-color-dark));
  padding: 9px; font-weight: 500; color: #fff; font-size: 14px; box-shadow: 0 4px 32px rgb(0 0 0 / 80%); z-index:99;}
#header #hlogo {width:auto;height:24px;margin:3px 0 0 0}

#header .ct-toggle-btn{float:right;}
#header .ct-toggle-btn .btn-ct-base{position:relative;padding:6px;background:transparent;border:1px solid #fff;border-radius:5px;display:inline-block;color:#fff;transition:.3s ease;cursor:pointer;font-size:13px;}
#header .ct-toggle-btn .btn-ct-base:hover{border:1px solid #fff;color:var(--main-color-active);background:#fff;}
#header .ct-toggle-btn .btn-allview{background-image:url(/img/ico_allview2.svg);background-position:10px center;background-size:auto 10px;background-repeat:no-repeat;padding-left:32px;}
#header .ct-toggle-btn .btn-allview:hover{background:url(/img/ico_allview2h.svg) #fff;background-position:10px center;background-size:auto 10px;background-repeat:no-repeat;}
#header .ct-toggle-btn .btn-location{opacity:0.5}
#header .ct-toggle-btn .btn-location:hover{opacity:1}
#header .ct-toggle-btn .btn-location.active{background:#fff;color:var(--main-color);font-weight:700;opacity:1}
#header .ct-toggle-btn .btn-location.active:hover{border-color:var(--main-color-active);color:var(--main-color-active);opacity:1}
#header .ct-toggle-btn .btn-allview{margin-left:20px;}
#header .ct-toggle-btn .btn-allview::before{content:"";position:absolute;width:1px;height:20px;background:rgba(255,255,255,0.35);left:-13px;top:5px}

#wrapper {width:100%;height:100%;overflow-y:auto;overflow-x:hidden;background:url(/img/bg.png) no-repeat;background-size:cover;}

/* site.html 전용 */
#wrapper.site {width:100% !important}
#logo,
#wrapper.site #top {
  position:fixed; left:0; top:0; width: 100%; height: 36px;
  background:var(--main-color); background:linear-gradient(45deg, var(--main-color), var(--main-color-dark));
  padding: 9px; text-align: center; font-weight: 500; color: #fff; font-size: 14px; box-shadow: 0 4px 32px rgb(0 0 0 / 80%); z-index:99;
  padding-top: calc(constant(safe-area-inset-top) + 9px); /* iOS 11.0 */
  padding-top: calc(env(safe-area-inset-top) + 9px); /* iOS 11+ */
}
#wrapper.site #top {height:unset; padding: 16px; padding-top:calc(constant(safe-area-inset-top) + 16px); /* iOS 11.0 */ padding-top:calc(env(safe-area-inset-top) + 16px); /* iOS 11+ */}
#wrapper.site #top #hlogo {width:auto; height:32px;margin:unset}
#wrapper.site + #bottom {
  position: fixed; left: 0; bottom: 0; padding: 20px;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 20px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  background-color: rgba(0,0,0,0.15); color: #aaa; backdrop-filter: blur(8px);-webkit-backdrop-filter:blur(8px);
  width: 100%; text-align: center; line-height: 1.5;}
#wrapper.site + #bottom > span {text-align: left; display: block; margin: 0 auto; width: fit-content; padding-left: 42px;}
#wrapper.site + #bottom > span::before {content: ""; width: 32px; height: 48px; position: absolute; background: url(/img/ico_i.png) center / contain no-repeat; transform: translate(-42px);}


#wrapper.site #content.jb-content {flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: center;align-content: center;}
#wrapper.site #content.jb-content>input,
#wrapper.site #content.jb-content>button {width:100%;max-width:400px;padding:10px;border-radius:7px;display:block;z-index:99;}
#wrapper.site #content.jb-content>button {width: 100%;height: 50px;background-color: var(--main-color);color: #fff;font-weight: 700;font-size: 20px;border-radius: 7px;}
#wrapper.site #content.jb-content>input {border:1px solid rgba(0,0,0,0.5);font-size:14.5px;height:42px;}
#wrapper.site #content.jb-content>input:focus {border: 1px solid var(--sub-color) !important;box-shadow: 0 0 10px 5px rgba(255,208,0,0.5) !important;-webkit-box-shadow: 0 0 10px 5px rgba(255,208,0,0.5) !important;}

/* 230825 for SVS, SDS */
@media only screen and (device-width :1280px) and (device-height :800px) and (orientation :landscape){
  #splash > span{position:relative;left:12.5%;}
  #splash > #slogo {position:relative;left:12.5%;width:32vw;}
  #simg{width:auto;height:62.5%;bottom:12.5%;}
  @-webkit-keyframes simg-slide {0% {transform:translateX(256px); } 100% {transform:translateX(-48px);}}
  @keyframes simg-slide {0% {transform:translateX(256px); } 100% {transform:translateX(-48px);}}
  #bg-xline{-webkit-animation:xlineani 69.6s ease-in-out infinite forwards;animation:xlineani 69.6s ease-in-out infinite forwards;}
}
@media only screen and (device-width :800px) and (device-height :1280px) and (orientation :portrait){
  #splash > span,
  #splash > #slogo {position:relative;left:12.5%;top:12.5%;}
  #simg{width:100%;height:auto;bottom:12.5%;}
  #bg-xline{-webkit-animation:xlineani 69.6s ease-in-out infinite forwards;animation:xlineani 69.6s ease-in-out infinite forwards;}
}


.jb-content {width:100%;height:100%;min-height:100vh;padding:60px 10px 10px 10px;position:relative;overflow: hidden;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;align-content: flex-start;}

.jb-container {display: grid;grid-template-columns: repeat(5,1fr);grid-gap: 5px;width: calc(50% - 20px);padding: 0px;margin-bottom: 20px;}
.jb-container:nth-child(odd) .jb-sidebar:first-child,
.jb-container:nth-child(odd) .jb-sidebar:nth-child(5n+2) {transform-origin:left center;}
.jb-container:nth-child(even) .jb-sidebar:nth-child(5n+1) {transform-origin:right center;}
.jb-container-name {grid-column: 1/6;padding-bottom: 10px;width: 100%;border-bottom: 2px solid #b01239;color:#fff;font-weight: 500;text-shadow: 0 2px 4px #000;margin: 0 0 10px 0;}
.jb-header {padding: 0px;border: 1px solid #bcbcbc;}

.jb-sidebar {width: 100%;min-height:70px;padding: 10px;border-radius: 10px 0;font-size: 20.2px;background-color: rgba(0,0,0,0.25);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);margin: 0 2px 2px 0;color: #ccc;cursor: pointer;transition: .3s ease;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;}
/*.jb-sidebar:hover {background-color: #fff !important;color:#111 !important;box-shadow: 0 2px 8px rgba(0,0,0,0.3);transform: scale(1.5);z-index: 2;overflow:unset;}*/
/*.jb-sidebar:hover>span {transform: scale(0.75);width: 125%;margin-left: -15%;margin-top: -5px;}*/
/*.jb-sidebar:hover>ul>li {background:#ccc; color:#111}*/
/*.jb-sidebar:hover .eq_wrapper>ul::after {border:1px solid #444; color:#444}*/
.jb-sidebar:hover {background-color:rgba(0,0,0,0.5); color:var(--sub-color);}
.jb-sidebar .eq_wrapper>ul::after {display:block;position: absolute;font-size: 10px !important;color: #aaa;border: 1px solid #aaa;border-radius: 3px;padding: 1.25px 3px;transform: translate(-38px);}
.jb-sidebar .eq_wrapper>ul:first-of-type::after {content: "차단기";}
.jb-sidebar .eq_wrapper>ul:nth-of-type(2)::after {content: "정산기";}

.jb-sidebar>span .btn-eye,
.jb-container .btn-eye{display: inline-block;vertical-align: middle;margin: -3px 7px 0 0;width:18px;height:18px;background:url(/img/ico_eye.svg) no-repeat;cursor:pointer}
.btn-eye-location{display: inline-block;vertical-align: middle;margin: -3px 7px 0 0;width:18px;height:18px;background:url(/img/ico_eye2.svg) no-repeat;cursor:pointer}
.btn-eye-location:hover{background:url(/img/ico_eye2h.svg) no-repeat;}




  .eq_wrapper>ul {margin: 15px 0 0 0; padding:0 0 0 38px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start;}
  .eq_wrapper>ul:last-child {margin:5px 0 0 0;}
  .eq_wrapper>ul>li {position:relative;display:inline-block;font-size:8px !important;background:#111;color:#777;border-radius:4px;padding:1.5px;width:17px;height:17px;text-align:center; margin:0 3px 3px 0;transition:.15s;}
  .eq_wrapper>ul>li:hover{border:1px solid #333}
  .eq_wrapper>ul::after{display:none;}

  .eq_wrapper>ul>li>div>ul{display:none;flex-direction:row;position:absolute;left:calc(50% + 15px);bottom:-7px;background:#fff;border-radius:5px;z-index:999;padding:7px;transform:translate(-50%,-20px) scale(0.65);border:1px solid #333;box-shadow:0 5px 10px rgba(0,0,0,0.3);}
  .jb-sidebar:hover .eq_wrapper>ul>li:hover ul{display:flex;}
  .eq_wrapper>ul>li>div>ul::after{content:"";position:absolute;bottom:-11px;left:50%;transform:translateX(calc(-50% - 25px));width:15px;height:12px;background:url(/img/tooltip_arrow.png);}
  .eq_wrapper>ul>li>div>ul li{}
  .eq_wrapper>ul>li>div>ul li>button{width:30px;height:30px;border:none;}

  .eq_wrapper>ul li div ul>li>button{background-color:#fff}
  .eq_wrapper>ul.lpr li ul.blocker-control>li>button{background-image:url(/img/blocker_control.png);background-repeat:no-repeat;}
  .eq_wrapper>ul.lpr li ul.blocker-control>li>button:hover,
  .eq_wrapper>ul.lpr li ul.blocker-control>li>button.active{background:url(/img/blocker_control_active.png) no-repeat}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(1)>button{background-position:2px 50%}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(2)>button{background-position:-31px 50%}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(3)>button{background-position:-64px 50%}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(4)>button{background-position:-98px 50%}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(5)>button{width:40px !important;background-position:0 0}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(6)>button{width:40px !important;background-position:0 -30px}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(7)>button{width:40px !important;background-position:0 -60px}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(8)>button{background-position:-2px -90px;width:32px !important;}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(9)>button{background-position:-2px -120px;width:32px !important;}
  .eq_wrapper>ul.lpr li ul.blocker-control>li:nth-child(10)>button{background-position:-2px -150px;width:32px !important;}

  .eq_wrapper>ul.lpr li ul.blocker-control>li.more-list>button{background-image:url(/img/blocker_control_more.png)}
  .eq_wrapper>ul.lpr li ul.blocker-control>li.more-list>button:hover,
  .eq_wrapper>ul.lpr li ul.blocker-control>li.more-list>button.active{background-image:url(/img/blocker_control_more_active.png)}

  .eq_wrapper>ul.calc li ul.calculate-control>li>button{background-image:url(/img/calculate_control.png);background-repeat:no-repeat;}
  .eq_wrapper>ul.calc li ul.calculate-control>li>button:hover,
  .eq_wrapper>ul.calc li ul.calculate-control>li>button.active{background-image:url(/img/calculate_control_active.png)}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(1)>button{background-position:2px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(2)>button{background-position:-31px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(3)>button{background-position:-64px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(4)>button{background-position:-98px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(5)>button{background-position:-132px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(5)>button:hover{background-image:url(/img/calculate_control.png);background-position:-132px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(5)>button.active:hover{background-image:url(/img/calculate_control_active.png);background-position:-132px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(6)>button{background-position:-166px 50%}
  .eq_wrapper>ul.calc li ul.calculate-control>li:nth-child(7)>button{background-position:-199px 50%}

  .eq_wrapper>ul>li.open {background:#88ff00; color:#111}
  .eq_wrapper>ul>li.close {background:#ff0040; color:#fff}
  .eq_wrapper>ul>li.wait {background:#5f5f5f; color:#fff}

  [tttxt]:hover{position:relative;}
  [tttxt]:after{
    -webkit-box-shadow:0px 2px 3px 1px rgba(0, 0, 0, 0.8);
    -moz-box-shadow:0px 2px 3px 1px rgba(0, 0, 0, 0.8);
    box-shadow:0px 2px 3px 1px rgba(0, 0, 0, 0.8);
    
    background-color:rgba(0, 0, 0, 0.75);
    border:1px solid #555;
    color:#fff;

    -webkit-transition:bottom .3s ease-in-out, opacity .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out, opacity .3s ease-in-out;
    transition:bottom .3s ease-in-out, opacity .3s ease-in-out;
    
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;

    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
    padding:7px;
    position:absolute;
    width:auto;
    max-width:300px;
    white-space:nowrap;

    z-index:10000;

    opacity:0;
    left:-9999px;
    bottom:30%;

    content:attr(tttxt);}
  [tttxt]:hover:after{bottom:60%;left:50%;opacity:1;transform:translate(-50%);}


#light .jb-sidebar-name {height:40px; width:calc(90% - 2px); background:rgba(0,0,0,0.5); position: fixed; border-radius:9px 9px 0 0; transition: .3s ease; cursor: pointer;}
#light .jb-sidebar-name:hover {background-color: rgba(0,0,0,0.88);}
#light .jb-sidebar-name::after {content: "여기를 클릭하면 새창으로 열립니다"; font-size:14px; font-weight:700; color:#fff; position: absolute; top:12px; width:100%; text-align: center;}
#light iframe {border:0}

.jb-sidebar-pop {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

.jb-footer {
  clear: both;
  padding: 0px;
  border: 0px solid #bcbcbc;
}

.black_overlay {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1001;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.white_content {
  display: none;
  position: fixed;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  padding: 0;
  background-color: white;
  z-index: 1002;
  overflow: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.88);
  border:1px solid #666;
  border-radius: 10px;
}

.blinking-red{
  -webkit-animation:blink-red .5s ease-out infinite alternate;
  -moz-animation:blink-red .5s ease-out infinite alternate;
  animation:blink-red .5s ease-out infinite alternate;
}

@-webkit-keyframes blink-red{ 0% {background-color: rgba(0,0,0,0.25); color: #ccc} 100% {background-color:var(--main-color-active); color:#fff;} }
@-moz-keyframes blink-red{ 0% {background-color: rgba(0,0,0,0.25); color: #ccc} 100% {background-color:var(--main-color-active); color:#fff;} }
@keyframes blink-red{ 0% {background-color: rgba(0,0,0,0.25); color: #ccc} 100% {background-color:var(--main-color-active); color:#fff;} }

.blinking-yellow{
  -webkit-animation:blink-yellow .8s ease-out infinite alternate;
  -moz-animation:blink-yellow .8s ease-out infinite alternate;
  animation:blink-yellow .8s ease-out infinite alternate;
}

@-webkit-keyframes blink-yellow{ 0% {background-color: rgba(0,0,0,0.25); color: #ccc} 100% {background-color:var(--sub-color-active); color:#111;} }
@-moz-keyframes blink-yellow{ 0% {background-color: rgba(0,0,0,0.25); color: #ccc} 100% {background-color:var(--sub-color-active); color:#111;} }
@keyframes blink-yellow{ 0% {background-color: rgba(0,0,0,0.25); color: #ccc} 100% {background-color:var(--sub-color-active); color:#111;} }








/* 정산기 팝업 */
.popup{display:none;border-radius:10px;position:fixed;z-index:997;padding:20px;background:rgba(51,51,51,0.75);border:1px solid #444;}
.popup.shadow{box-shadow:0 25px 128px rgba(0,0,0,0.88);}
.popup.glass{backdrop-filter:blur(16px);}
.popup input,
.popup button{border-radius:5px;height:34px;padding:0 8px;font-size:14px;cursor: pointer;border:1px solid #999;color:#fff;font-weight:500;}

.popup.calculator{width:1200px;left:calc(50% - 600px);top:100px}
.popup.calculator h1{color:var(--main-color);}
.popup.calculator hr{height:1px;border:0;background:#555;margin:12px 0;}
.popup.calculator button{font-weight:600;}
.popup.calculator .calculator-title{width:calc(100% + 40px);height:40px;line-height:40px;text-align:center;background-image:linear-gradient(to right,var(--main-color-deep),var(--main-color-dark));background-color:var(--main-color-dark);color:#fff;font-size:16px;font-weight:700;margin:-20px;border-radius:9px 9px 0 0;}
.popup.calculator .screen-wrapper{margin:32px 0 12px 0;}
.popup.calculator .screen-wrapper>ul{display:flex;flex-direction:row;justify-content:center;}
.popup.calculator .screen-wrapper>ul li{margin:0 10px}
.popup.calculator .screen-wrapper>ul li h2{font-size:16px;margin:6px 0 12px 0;color:#fff;font-weight:700;}
.popup.calculator .screen-wrapper>ul li dl{position:relative}
.popup.calculator .screen-wrapper>ul li dl dd p.txt{position:absolute;right:10px;bottom:8px;color:#fff;font-size:15px;font-weight:700;text-shadow:1px 1px 3px rgb(0,0,0,0.5);}
.popup.calculator .screen-wrapper>ul li dl dd p.txt2{position:absolute;left:10px;top:10px;color:#fff;font-size:15px;font-weight:700;text-shadow:1px 1px 3px rgb(0,0,0,0.5);background:rgba(0, 0, 0, 0.75);}
.popup.calculator .screen-wrapper>ul li dl dd.photo img, #_imgcam,
.popup.calculator .screen-wrapper>ul li dl dd.calc img{width:18.9vw !important;min-width:18.9vw !important;max-width:360px !important;height:auto !important;aspect-ratio:4 / 3;border-radius:5px;background:rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.15);}
.popup.calculator .screen-wrapper a.btn-camera{position:relative;width:74px;height:26px;display:inline-block;margin:-7px 0 -7px 10px;cursor:pointer;padding:5px;border-radius:5px;background:url(../img/camera_dark.png) #222 no-repeat calc(100% - 7px) center / auto 14px;border:1px solid #555;}
.popup.calculator .screen-wrapper a.btn-camera::after{content:"수동촬영";font-size:12px;position:absolute;top:5px;left:5px;color:var(--main-color-light);}
.popup.calculator .screen-wrapper a.btn-camera:active{border-color:#ff2139}
.popup.calculator .tabmenu2{width:15.5%;float:left;padding-top:24px;}
.popup.calculator .tabmenu2 a{display:inline-block;width:100%;font-size:14.5px;padding:12px;border-width:1px 0 1px 1px;border-style:solid;border-radius:5px 0 0 5px;margin-bottom:10px;transition:.3s ease;cursor:pointer;font-weight:600;color:#fff;border-color:#555;}
.popup.calculator .tabmenu2 a.active{width:100%;color:#fff;background: var(--main-color);border: 1px solid var(--main-color);}
.popup.calculator .tabmenu2 a:hover:not(.popup.calculator>.tabmenu2 a.active){border-width:1px 0 1px 1px;border-style:solid;border-color:var(--main-color-active);}
.popup.calculator .tabmenu2 a:active{position:relative;top:1px;left:1px;background:var(--main-color);border:1px solid var(--main-color);}
.popup.calculator .wrapper_inRmt{width:84.5%;float:left;padding:12px;border-radius:5px;position:relative;border:1px solid var(--main-color);}
.popup.calculator #wrapper_rmt1{display:block;padding:0 !important}
.popup.calculator #wrapper_rmt1 #rmt1-left{width:calc(60% - 24px);float:left;padding:12px 12px 16px 12px;}
.popup.calculator #wrapper_rmt1 #rmt1-left .table-wrap4{overflow:auto;max-height:205px;margin:10px -12px 0 -12px;padding:0 12px 16px}
.popup.calculator #wrapper_rmt1 #rmt1-left input,
.popup.calculator #wrapper_rmt1 #rmt1-right input{background:transparent !important;}
.popup.calculator #wrapper_rmt1 #rmt1-left select{width:88px;height:24px;padding:0 25px 0 8px;background:transparent url(../img/ico_select.png) no-repeat right 50%;border-radius: 4px;font-weight: 700;color: #777;}
.popup.calculator #wrapper_rmt1 #rmt1-right {width: calc(40% + 24px);min-height: 357px;float: right;padding: 12px;border-radius: 0 5px 5px 0;background:#444;display: flex;flex-direction: column;justify-content: space-between;}
.popup.calculator #wrapper_rmt1 #rmt1-right>#seldc{width:100%;margin:12px 0;padding:12px 0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;max-height:220px;overflow-y:auto;border-top:1px dashed #777;border-bottom:1px dashed #777;}
.popup.calculator #wrapper_rmt1 #rmt1-right>#seldc button.discount-ticket{width:32%;font-size:13.5px;margin:0;color:#eee;background:#333;}
.popup.calculator #wrapper_rmt1 #rmt1-right>#seldc button.discount-ticket:nth-child(n+4){margin-top:6px;}
.popup.calculator #wrapper_rmt1 #rmt1-right>#seldc button.discount-ticket:hover{color:var(--main-color-light)}
.popup.calculator #wrapper_rmt1 #rmt1-right .btn_remote-calculate{background:url(../img/ico-remote-calculate.png) 12px center no-repeat #333 !important;color:var(--main-color-light);font-size:18px;margin-bottom:12px;}
.popup.calculator #wrapper_rmt1 #rmt1-right .btn_remote-discount-apply{background:url(../img/ico-remote-discount-apply.png) 12px center no-repeat #333 !important;color:#fff}
.popup.calculator #wrapper_rmt1 #rmt1-right .btn_remote-discount-cancel{background:url(../img/ico-remote-discount-cancel.png) 12px center no-repeat #333 !important;color:#fff;}
.popup.calculator #wrapper_rmt1 #rmt1-right .btn_rmt_cal{padding:12px;width:100%;height:auto;}
.popup.calculator #wrapper_rmt1 #rmt1-bottom{border-top:1px dashed #777;float: left;width: calc(60% - 24px);padding: 12px;position: absolute;bottom: 0;}
.popup.calculator #wrapper_rmt1 #rmt1-bottom>button{color:#eee;margin:0;background: url(../img/ico-warning.png) 6px center / 18px 18px no-repeat;padding: 6px 6px 6px 30px;}
.popup.calculator #wrapper_rmt1 #rmt1-bottom>h2{color:#eee;font-size:16px;line-height:1;margin-bottom:15px;}
.popup.calculator #wrapper_rmt1 #rmt1-bottom>h2>span{color:var(--main-color-light);font-size:22px;}
/* .popup.calculator #trcar0.selected{background:rgb(86,36,46);} */
.popup.calculator .inner-title{color:var(--main-color-light);}
.popup.calculator #wrapper_rmt2{display:none;}
.popup.calculator #wrapper_rmt2>button{float:right;margin:15px 0 0 3px;padding:12px 12px 12px 80px !important;height:48px !important;}
.btn_card-cancel{background:url(../img/ico-card-cancel.png) 6px center / 64px 32px no-repeat #333;color:#eee}
.btn_receipt-reprint{background:url(../img/ico-receipt-reprint.png) 6px center / 64px 32px no-repeat #333;color:#eee}

#seldc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);border:3px solid #444}
#rmt1-left .table-wrap4::-webkit-scrollbar-thumb{background:rgba(255,255,255,.5);border:3px solid #303030}
#seldc::-webkit-scrollbar,#seldc::-webkit-scrollbar-corner,#rmt1-left .table-wrap4::-webkit-scrollbar,#rmt1-left .table-wrap4::-webkit-scrollbar-corner{background:transparent;}
#seldc::-webkit-scrollbar,#rmt1-left .table-wrap4::-webkit-scrollbar{width:12px;height:12px}
#seldc::-webkit-scrollbar-thumb,#rmt1-left .table-wrap4::-webkit-scrollbar-thumb{border-radius:6px;}
#seldc::-webkit-scrollbar-track,#rmt1-left .table-wrap4::-webkit-scrollbar-track{background:transparent;}
#seldc::-webkit-scrollbar-button:end{opacity:0;height:6px}
#seldc::-webkit-scrollbar-button:start{opacity:0;height:6px}

.remote_carno{width:180px;background:transparent;}
.btn-search{width:34px;border:none !important;background:url(../img/ico_search_s.png) no-repeat 50% 50% var(--main-color) !important;}
.btn-reset{padding:0 7px 0 32px !important;background:url(../img/ico_reset_dark.png) no-repeat 7px 50%;}
.btn_remote-calculate{float:right;}
.div_close{position:absolute;right:0;top:0;z-index:998;}
.btn_close{width:40px;height:40px !important;background:url(../img/close_x_w.png) transparent no-repeat 50% 50% !important;border:0 !important;}

/* 테이블 */
.table-basic{width:100%;font-size:14px;text-align:left;border-collapse:inherit;white-space:nowrap;color:#ccc;font-weight:600;}
.table-basic thead{position:sticky;top:0}
.table-basic thead th{font-size:14px;padding:6px 10px;background:#2c2c2c;border-top:1px solid #444;border-bottom:1px solid #444;border-right:1px solid #444;color:#fff;}
.table-basic thead th:first-child{border-radius:7px 0 0 0;border-left:1px solid #444;}
.table-basic thead th:last-child{border-radius:0 7px 0 0;}
.table-basic tbody tr:nth-child(odd){background:#1e1e1e}
.table-basic tbody tr:nth-child(even){background:#222}
.table-basic thead tr:nth-child(2) th{border-radius:0;border-top:none;}
.table-basic thead tr:nth-child(2) th:first-child{border-left:none;}
.table-basic tbody tr:hover,
.table-basic tbody tr.active{background:var(--tr-selected-dark)}
.table-basic tbody th{text-align:center;}
.table-basic tbody td{padding:6px 10px;min-height:28px;}
.table-basic tfoot td{font-size:14px;padding:6px 10px;background:#2c2c2c;border-bottom:1px solid #444;border-top:1px solid #444;color:#fff;}
.table-basic tfoot td:first-child{border-bottom-left-radius:7px;border-left:1px solid #444;}
.table-basic tfoot td:last-child{border-bottom-right-radius:7px;border-right:1px solid #444;}
.table-basic tfoot{position:sticky;bottom:0;}
p.total,p.total2{border-radius:0 0 7px 7px;font-size:14px;padding:6px 10px;position:sticky;bottom:0}
p.total{background:#eee;border:1px solid #ccc;color:#333;}
.table-basic tbody tr.sum td{background:#eee3e5;border-bottom:1px dotted #999;}
.subtotal{background:#eee3e5;}
.table_remote:not(.table-wrap4>.table_remote) {margin-top:15px;}
.table_remote thead th{font-size:12px !important;}

.view{display:block !important;animation:fadein .3s;-moz-animation:fadein .3s;-webkit-animation:fadein .3s;-o-animation:fadein .3s;}
@keyframes fadein{from{opacity:0;} to{opacity:1;}}
@-moz-keyframes fadein{from{opacity:0;} to{opacity:1;}}
@-webkit-keyframes fadein{from{opacity:0;} to{opacity:1;}}
@-o-keyframes fadein{from{opacity:0;} to{opacity:1;}}




/*  RESPONSIVE */

@media (max-width: 1440px) {
  .jb-container {width: calc(50% - 15px); grid-template-columns: repeat(4,1fr);}
  .jb-container-name {grid-column:1/5}
}

@media (max-width: 1280px) {
  .jb-container {width: calc(50% - 10px); grid-template-columns: repeat(3,1fr);}
  .jb-container-name {grid-column:1/4}
}

@media (max-width: 1024px) {
  .jb-container {width: calc(50% - 10px); grid-template-columns: repeat(2,1fr);}
  .jb-container-name {grid-column:1/3}
}

@media (max-width: 480px) {
  #splash {align-items: center;}
  #splash > span {margin-top:56%; margin-bottom: 24px;}
  #splash > span, #splash > #slogo {left: unset;}
  #slogo {width:24%;}

  @-webkit-keyframes zoom-mc {0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3) rotate(360deg); opacity: 1; }}
  @keyframes zoom-mc {0% { transform: scale(1); opacity: .5; } 100% { transform: scale(3) rotate(360deg); opacity: 1; }}

  #slogo {width:64%;}
  #simg {width:640px; height:auto; max-width:unset; bottom:12%}
  #location {padding:29px 9px 9px 9px}
  #hlogo {display: inline-block; margin: 0 0 20px 0; position:unset; right:unset;}
  #hlogo + br {display:block;}

  #bg-xline {width:auto; height:100%; aspect-ratio: 1 / 1; background-size:100%; transform: scale(2.5);}

  .jb-container {width: 100%; grid-template-columns:1fr}
  .jb-container-name {grid-column:1}
  .jb-content {width: auto; padding: 70px 40px 40px; height:100%;}
  .jb-sidebar {width: 100%; margin: 6px 0; min-width: unset; min-height: unset; padding: 12px;}

}