@import url(common.css);
@import url(contents.css);
@import url(font.css);
@import url(response.css);

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:300,400,700');
@import url('https://fonts.googleapis.com/earlyaccess/nanumgothic.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap');

/* RESET */
*{-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;}

html,body,dl,dt,dd,div,form,fieldset,legend,h1,h2,h3,h4,h5,h6,input,select,textarea,ul,ol,li,p,pre,table,td,th,caption,a,button,figcaption,figure{margin:0;padding:0;}
html,body{background-color:#ddd;height:100%; }
h1,h2,h3,h4,h5,h6{font-weight:normal;}
body{font-size:16px;color:#666;letter-spacing:-0.5px;font-family:'PAYW Pro', 'Noto Sans', sans-serif, '나눔고딕', Nanum Gothic, '굴림', Gulim;}
input, select{vertical-align:middle;border-radius:0;}
input::placeholder{color:#999} select::placeholder{color:#999} textarea::placeholder{color: #999;}

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;}
textarea{font-family:'Noto Sans', sans-serif;color:#666}
button{box-shadow:none;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{text-decoration:none;color:#333;}
a:link,a:visited,a:active,a:hover{color:inherit;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}
input, select, option, textarea, button{outline:none;transition:0.3s; }
input[type=button]:hover, select:hover, textarea:hover, button:hover{color: #af1f39; border-color:#af1f39 !important; }
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus  { border-color: #ff2139 !important; box-shadow: 0 0 0 3px rgba(255, 33, 57, .3); }






/* layout */
#wrapper{position:relative;width:100%;height:100%;min-width:1320px;}

#leftmenu{position:fixed;width:120px;height:100%;top:0;left:0;background-color:#630f17;background-image:linear-gradient(to right,#89152a,#630f17);z-index:999;min-height:770px;transition:left 0.5s ease;}
#container{padding-left:120px;width:100%;height:100%;transition: 0.5s;}
.leftmenu-hide{left:-120px !important;}
.container-hide{padding-left:0 !important;}
.header-hide{width:100% !important;}
.container-hide + #footer {left:30px; width:calc(100% - 60px)}

/*.btn-menu{position:absolute;top:50%;transform:translateY(-50%);right:-16px;width:16px;height:100px;border-right:1px solid #d7d7d7;background:#630f17 url(../images/ico_arrow.png) no-repeat -1px 50%;border-radius:0 5px 5px 0;cursor:pointer}*/
.btn-menu{position:absolute;top:270px;right:-16px;width:16px;height:100px;border-right:1px solid #d7d7d7;background:#630f17 url(../images/ico_arrow.png) no-repeat -1px 50%;border-radius:0 5px 5px 0;cursor:pointer}
.btn-menu-open{background-position:-20px 50%}
.btn-menu.store{}
#leftmenu span.ft-logo{position:absolute;width:120px;height:120px;height:60px;bottom:34px;left:0;background:url(../images/ft_logo.png)}
#leftmenu p {color: #fff; position: absolute; left: 50%; margin-left: -12.015px; bottom: 15px; font-size: 10px;  }

/* leftmenu */
#leftmenu h1.logo a{
	
	position:relative;
	display:block;
	width:120px;
	height:70px;
	background:url(../images/logo.png) no-repeat 50% 50%;
	transition: all .2s linear;

}
#leftmenu h1.logo a:after{content:'';display:block;position:absolute;bottom:0;left:10px;width:100px;height:1px;background:rgba(255,255,255,0.2)}
#leftmenu h1.logo a:hover{background-color:rgba(255,255,255,0.3)}

#leftmenu ul.nav li a{position:relative;display:block;height:100px;padding-top:65px;color:#fff;font-size:13px;font-weight:700;text-align:center;background:url(../images/ico_nav.png) no-repeat;transition: all .2s linear;}
#leftmenu ul.nav li a:after{content:'';display:block;position:absolute;bottom:0;left:10px;width:100px;height:1px;background:rgba(255,255,255,0.2)}
#leftmenu ul.nav li a.active, #leftmenu ul.nav li a:hover, #leftmenu h1.logo a.active {background-color:rgba(255,255,255,0.3)}
#leftmenu ul.nav li a.ico1{background-position:0 0}
#leftmenu ul.nav li a.ico2{background-position:0 -100px}
#leftmenu ul.nav li a.ico3{background-position:0 -200px}
#leftmenu ul.nav li a.ico4{background-position:0 -300px}
#leftmenu ul.nav li a.ico5{background-position:0 -400px}
#leftmenu ul.nav li a.ico6{background-position:0 -500px}

/* header */ 
#header{position:fixed;width:calc(100% - 120px);height:70px;min-width:1000px;background-color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.15);transition: 0.5s;z-index:9998;}

#header p.user{float:left;padding:22px 0 0 30px;font-size:26px;color:#333;letter-spacing:-1px;font-weight:700;line-height:1}
#header p.user span{display:inline-block;margin-left:10px;color:#999;font-size:14px;letter-spacing:-0.5px;vertical-align:top}

#header .search-group{float:left;width:200px; padding:17px 0; margin-left: 30px;}
#header .search-group2{float:left;width:260px; padding:17px 0; margin-left:3px;}

#header .user-info{float:right;padding:13px 30px 0 0}
#header .user-info p.recent{display:inline-block;font-size:13px;padding:0 15px 0 0;vertical-align:middle}
#header .user-info p.recent strong{display:block;color:#7a1323;font-size:16px;letter-spacing:0}
#header .user-info p.name{display:inline-block;border-left:1px solid #ddd;padding:0 15px 0 20px;font-size:15px;letter-spacing:-1px;}
#header .user-info p.name strong{color:#000}
#header .user-info p.name span.photo img{width:45px;height:45px;border-radius:50%;margin-right:8px;vertical-align:middle;}
#header .user-info a.btn-logout{display:inline-block;background:#7a1323 url(../images/ico_logout.png) no-repeat 8px 50%;padding:0 8px 0 28px;border-radius:5px;height:30px;line-height:28px;color:#fff;font-size:12px;font-weight:700}

/* main */
#contents{padding-top:100px;height:100%;}
#contents h2{position:relative;font-size:18px;color:#333;font-weight:700;letter-spacing:-1px;line-height:1;margin-bottom:15px;}
#contents h2 .btn-more{position:absolute;top:0;right:0;border:1px solid #ccc;padding:3px 6px 4px 5px;border-radius:5px;font-size:11px;line-height:1;color:#7a1323}
#contents h2 .closecar-num{display:inline-block;margin-left:7px;background-color:#ec2339;color:#fff;font-size:12px;letter-spacing:0;line-height:1;padding:1px 4px 2px;border-radius:8px;vertical-align:top}
#contents h2 .ct-toggle-btn {float:right}
#contents h2 .ct-toggle-btn .btn-ct-base {float:left; font-size:14px;cursor:pointer;}
#contents h2 .ct-toggle-btn .btn-allview{background:url(../images/ico_allview.png) no-repeat;padding-left:22px;margin-right:24px;}
#contents h2 .ct-toggle-btn .btn-latest{background:url(../images/ico_latest.png) no-repeat;padding-left:24px;margin-right:24px;}
#contents h2 .ct-toggle-btn .btn-fullview {background:url(../images/cur_zoom.png) left / contain no-repeat; padding-left:18px;}
#contents h2 .ct-toggle-btn .btn-allview:hover,
#contents h2 .ct-toggle-btn .btn-latest:hover,
#contents h2 .ct-toggle-btn .btn-fullview:hover {color:#e11639}

#contents h3{position:relative;font-size:18px;color:#000;font-weight:700;letter-spacing:-1px;line-height:1;margin-bottom:12px;}

#contents .content{z-index:1; position:relative; background-color:#fff;border:1px solid #ccc;border-radius:10px;box-shadow:5px 5px 10px rgba(255,255,255,0.15);padding:20px;min-height:calc(100% - 30px);margin:0 30px 30px; overflow-y: visible;float:left;}

#contents ul.overview{background-color:#fff;border:1px solid #ccc;border-radius:10px;box-shadow:5px 5px 10px rgba(255,255,255,0.15);margin:0 30px 10px 30px;transition: 0.5s;}
#contents ul.overview:after{content:'';display:block;clear:both;}
#contents ul.overview>li{float:left;padding:15px 20px 0;border-left:1px solid #ccc;font-weight:700;height:90px;}
#contents ul.overview>li:nth-child(1){width:27%;border-left:none;}
#contents ul.overview>li:nth-child(2){width:24%}
#contents ul.overview>li:nth-child(3){width:21%}
#contents ul.overview>li:nth-child(4){width:28%}
#contents ul.overview>li>h2{margin-bottom:8px;}
#contents ul.overview>li>ul:after{content:'';display:block;clear:both;}
#contents ul.overview>li>ul>li{float:left;}
#contents ul.overview>li>ul>li:last-child{padding-right:0}

/* main : 1주차장현황 */
#contents ul.overview .ul-overview{padding-top:10px;}
#contents ul.overview .ul-overview>li{padding-right:15px}
#contents ul.overview .ul-overview>li:last-child{padding-right:0}
#contents ul.overview .ul-overview>li{font-size:13px;color:#333}
#contents ul.overview .ul-overview>li>strong{display:inline-block;margin-left:5px;font-size:21px;letter-spacing:-.5px}
#contents ul.overview .ul-overview>li>strong>span{font-size:13px;}
#contents ul.overview .ul-overview>li:nth-child(1)>strong, #contents ul.overview .ul-overview>li:nth-child(2)>strong{color:#999}
#contents ul.overview .ul-overview>li:nth-child(3){color:#ad2e45}
#contents ul.overview .ul-overview>li:nth-child(4){color:#ff737d}

/* main : 2오늘의 매출 통계, 3오늘의 차량 통계 */
#contents ul.overview ul.ul-today>li{padding-right:18px}
#contents ul.overview ul.ul-today>li:last-child{padding-right:0}
#contents ul.overview ul.ul-today>li{font-size:13px;color:#333}
#contents ul.overview ul.ul-today>li>strong{display:block;margin-top:3px;font-size:18px;line-height:1;color:#999}
#contents ul.overview ul.ul-today>li>strong>span{font-size:16px;}

/* main : 4정기권 만기 도래차량 */
#contents ul.overview ul.ul-closecar{padding-top:3px;}
#contents ul.overview ul.ul-closecar>li{padding-right:3px}
#contents ul.overview ul.ul-closecar>li:last-child{padding-right:0}
#contents ul.overview ul.ul-closecar>li button{border:1px solid #aaa;background-color:#eee;border-radius:5px;font-size:13px;color:#999;line-height:1;padding:7px;letter-spacing:-1px;font-weight:700}
#contents ul.overview ul.ul-closecar>li button.active{background-color:#ffe2e7;border:1px solid #ccc;color:#a2253b}
#contents ul.overview ul.ul-closecar>li button.on{color:#ff5063}

.dropbtn:hover, .dropbtn:focus{color:#ff5063 !important}
.dropdown{z-index:2; position:relative;display:inline-block;}
#myDropdown6,#myDropdown7 {transform: translateX(-198px);}

.dropdown-content{display:none;position:absolute;top:42px;border:1px solid #ccc;border-radius:5px;background-color:#fff;width:242px; height: 300px; overflow-y: scroll; box-shadow:0px 8px 16px rgba(0,0,0,0.2);z-index:4;}
.dropdown-content>ul>li{padding:7px 12px;font-size:14px;border-bottom:1px solid #ccc;color:#666}
.dropdown-content>ul>li>span{color:#333;display:inline-block;width:110px;}
.show{display:block;}

/* main : 5장비현황 */
#contents .status-list{display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 12px;}
#contents .status-list:after{content:'';display:block;clear:both;}
#contents .status-list>li{min-height:302px;margin-bottom:12px;}
#contents .status-list>li dt{color:#333;font-weight:700;font-size:18px;line-height:1;margin-bottom:10px;}
#contents .status-list>li dt .label_check {float:left;margin-right:3px} #contents .status-list>li dt .label_check:last-of-type {margin-right:6px;}
#contents .status-list>li dt .btn-eye{float:right;width:18px;height:18px;background:url(../images/ico_eye.png) no-repeat #fff;cursor:pointer}
#contents .status-list>li dt .btn-eye::before {content: ''; width:24px;height:18px;background:linear-gradient(to right,transparent,#fff);}
#contents .status-list>li dd.photo{position:relative;aspect-ratio: 4 / 3;cursor: zoom-in;}
#contents .status-list>li dd.photo img {border-radius:5px 0 0 0;width:100%;height:100%;background:#eee;}
#contents .status-list>li dd.photo p.txt{position:absolute;right:10px;bottom:8px;color:#fff;font-size:15px;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,0.5);z-index:9999}
#contents .status-list>li dd.photo p.txt2,#contents .status-list>li dd.calc 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);z-index:9999;background-color:rgba(0, 0, 0, 0.75);} /*장비현황 입출차시간 추가*/
#contents .status-list>li dd.photo p.txt span{font-size:12px;letter-spacing:-1.5px;}
#contents .status-list>li dd.photo:after{content:'';display:block;position:absolute;left:0;bottom:0;width:100%;height:70px;background-image:linear-gradient(to bottom,transparent,#747474);}
#contents .status-list>li dd.photo.photo1:after{background-image:linear-gradient(to bottom,transparent,#c2aa1c);}
#contents .status-list>li dd.photo.photo2:after{background-image:linear-gradient(to bottom,transparent,#b50f2f);}
#contents .status-list>li dd.photo.photo3:after {background-image: linear-gradient(to bottom,transparent,#06dbdb);} /* 리프레시 테스트용 */
#contents .status-list>li dd.photo.hide{display:none;}
#contents .status-list>li dd.photo:hover .zoomtooltip,#contents .status-list>li dd.calc:hover .zoomtooltip  {opacity: 1;}
#contents .zoomtooltip {opacity: 0; transition: .3s ease; position: absolute; background: rgba(0,0,0,0.75); font-size: 12px; font-weight: 700; color:#fff; padding:8px; border-radius: 5px; width:fit-content; right:10px; top:10px; -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);}



#contents .status-list>li dd.photo p.ico{position:absolute;left:4px;bottom:0;z-index:1999}
#contents .status-list>li dd.photo p.ico span{display:inline-block;width:26px;height:26px;}
#contents .status-list>li dd.photo p.ico span.ico1{background-image:url(../images/ico_warning.png)}
#contents .status-list>li dd.photo p.ico span.ico2{background-image:url(../images/ico_fail.png)}
#contents .status-list > li dd.photo p.ico span.ico3 {background-image: url(../images/ico_sync.png)} /* 리프레시 테스트용 */


#contents .status-list>li dd.calc{position:relative;aspect-ratio: 4 / 3;}
#contents .status-list>li dd.calc img {border-radius: 5px 0 0 0;height:100%;width:100%;background:#eee;cursor: pointer;}
#contents .status-list>li dd.calc p.txt{position:absolute;right:10px;bottom:8px;color:#fff;font-size:15px;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,0.5);z-index:9999}
#contents .status-list>li dd.calc p.txt span{font-size:12px;letter-spacing:-1.5px;}
#contents .status-list>li dd.calc:after{content:'';display:block;position:absolute;left:0;bottom:0;width:100%;height:70px;background-image:linear-gradient(to bottom,transparent,#747474);}
#contents .status-list>li dd.calc.photo1:after{background-image:linear-gradient(to bottom,transparent,#c2aa1c);}
#contents .status-list>li dd.calc.photo2:after{background-image:linear-gradient(to bottom,transparent,#b50f2f);}
#contents .status-list > li dd.calc.photo3:after {background-image: linear-gradient(to bottom,transparent,#06dbdb);} /* 리프레시 테스트용 */
#contents .status-list>li dd.calc.hide{display:none;}
#contents .status-list>li dd.calc img.kps {object-fit:contain;background-color:rgb(120, 120, 120);}

#contents .status-list>li dd.calc p.ico{position:absolute;left:4px;bottom:0;z-index:1999}
#contents .status-list>li dd.calc p.ico span{display:inline-block;width:26px;height:26px;}
#contents .status-list>li dd.calc p.ico span.ico1{background-image:url(../images/ico_warning.png)}
#contents .status-list>li dd.calc p.ico span.ico2{background-image:url(../images/ico_fail.png)}
#contents .status-list > li dd.calc p.ico span.ico3 {background-image: url(../images/ico_sync.png)} /* 리프레시 테스트용 */

#contents .status-list>li dd.kiosk {border-radius: 5px; background:#111; text-align: center;cursor: zoom-in;}
#contents .status-list>li dd.kiosk img {border-radius: 0; height:100%; width:auto; display: inline;cursor:unset;}


#contents .status-list>li dd.control{border:1px solid #ccc;border-radius:0 0 0 5px}
#contents .status-list>li dd.control .control-group{position:relative;padding:7px 0 0 47px;height:45px}
#contents .status-list>li dd.control .control-group.row2{border-top:1px dotted #ccc}
#contents .status-list>li dd.control button {transition: .15s ease;}
#contents .status-list>li dd.control button.blocker{position:absolute;left:14px;bottom:0;width:40px;height:58px;background:url(../images/blocker.png) no-repeat; border:none !important; border-radius: 0px !important;}
#contents .status-list>li dd.control button.blocker.open{background:url(../images/blocker_open.png)}
#contents .status-list>li dd.control button.blocker.lock{background:url(../images/blocker_open_lock.png)}
#contents .status-list>li dd.control button.calculate{position:absolute;left:4px;bottom:0;width:40px;height:50px;background:url(../images/calculate.png) no-repeat; border:none !important; border-radius: 0px !important;}
#contents .status-list>li dd.control button.kiosk{position:absolute;left:4px;bottom:0;width:40px;height:50px;background:url(../images/kiosk.png) no-repeat; border:none !important; border-radius: 0px !important;}
#contents .status-list>li dd.control button.blocker:active,
#contents .status-list>li dd.control button.calculate:active,
#contents .status-list>li dd.control button.kiosk:active {position:absolute; bottom:0; top:inherit; opacity:0.3;}

#contents .status-list>li dd.control ul:after{content:'';display:block;clear:both;}
#contents .status-list>li dd.control ul li{float:left;position:relative}
#contents .status-list>li dd.control ul li>button{width:30px;height:30px;border:none;}
#contents .status-list>li dd.control ul.blocker-control>li>button{background:url(../images/blocker_control.png) no-repeat;}
#contents .status-list>li dd.control ul.blocker-control>li>button:hover{background:url(../images/blocker_control_active.png) no-repeat}
#contents .status-list>li dd.control ul.blocker-control>li>button.active{background:url(../images/blocker_control_active.png) no-repeat}
#contents .status-list>li dd.control ul.blocker-control>li:nth-child(1)>button{background-position:2px 50%}
#contents .status-list>li dd.control ul.blocker-control>li:nth-child(2)>button{background-position:-31px 50%}
#contents .status-list>li dd.control ul.blocker-control>li:nth-child(3)>button{background-position:-64px 50%}
#contents .status-list>li dd.control ul.blocker-control>li:nth-child(4)>button{background-position:-98px 50%}
#contents .status-list>li dd.control ul.blocker-control>li:nth-child(5)>button{width:36px;background-position:-130px 50%}

#contents .status-list>li dd.control ul.blocker-control>li>button.ticket{width:40px !important;background:url(../images/more.png) no-repeat}
#contents .status-list>li dd.control ul.blocker-control>li>button.ticket1{background-position:0 0}
#contents .status-list>li dd.control ul.blocker-control>li>button.ticket2{background-position:0 -30px}
#contents .status-list>li dd.control ul.blocker-control>li>button.ticket3{background-position:0 -60px}

#contents .status-list>li dd.control ul.calculate-control li>button{background:url(../images/calculate_control.png) no-repeat;}
#contents .status-list>li dd.control ul.calculate-control li>button:hover{background:url(../images/calculate_control_active.png) no-repeat}
#contents .status-list>li dd.control ul.calculate-control li>button.active{background:url(../images/calculate_control_active.png) no-repeat}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(1)>button{background-position:2px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(2)>button{background-position:-31px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(3)>button{background-position:-64px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(4)>button{background-position:-98px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(5)>button{background-position:-132px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(5)>button:hover{background:url(../images/calculate_control.png) no-repeat; background-position:-132px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(5)>button.active:hover{background:url(../images/calculate_control_active.png) no-repeat; background-position:-132px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(6)>button{background-position:-166px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(6)>button{background-position:-166px 50%}
#contents .status-list>li dd.control ul.calculate-control li:nth-child(7)>button{background-position:-199px 50%}


/* 최근입출차 목록 */
#contents .status-list>li dl {}
#contents .status-list>li div.stlist-left {position:relative;width:50%;}
#contents .status-list>li div.stlist-left::before,
#contents .status-list>li div.stlist-left::after {content: ""; position: absolute; height: 10px; width: calc(100% - 8px); left:100%; z-index: 2;}
#contents .status-list>li div.stlist-left::before {background-image: linear-gradient(to top,transparent,#e3e3e3); top: 0;}
#contents .status-list>li div.stlist-left::after {background-image: linear-gradient(to bottom,transparent,#e3e3e3); bottom: 0;}
#contents .status-list>li div.stlist-left.origin {width:100%}
#contents .status-list>li div.stlist-left.origin::after,
#contents .status-list>li div.stlist-left.origin::before {display:none;}
#contents .status-list>li div.stlist-left.origin dd.calc img {border-radius:5px 5px 0 0;}
#contents .status-list>li div.stlist-right {position: absolute; left:100%; top:0; width:100%; height:100%; padding: 10px 5px 10px 10px; background: #e3e3e3; border-radius: 0 5px 5px 0; overflow-y: scroll; overflow-x: hidden;}
#contents .status-list>li div.stlist-right table {border-radius:5px; border-collapse:separate; border:1px solid #999; overflow:hidden; font-weight:700; font-size:12px; table-layout:fixed;}
#contents .status-list>li div.stlist-right table th, #contents .status-list>li div.stlist-right table td {border-left:1px solid #ccc; border-top:1px solid #ccc; padding:3px; background:#fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
#contents .status-list>li div.stlist-right table th {background:rgba(211 211 211 / 0.75); color: #333;}
#contents .status-list>li div.stlist-right table thead tr:first-of-type th {border-top:0;}
#contents .status-list>li div.stlist-right table th:first-of-type,
#contents .status-list>li div.stlist-right table td:first-of-type {border-left:0; width:100px;}
/*#contents .status-list>li div.stlist-right table tr#enexsccar:nth-of-type(4n-1) td,
#contents .status-list>li div.stlist-right table tr#enexsccar:nth-of-type(4n) td {background:#fff5f7;}*/
#contents .status-list>li div.stlist-right table tr#enexsccar td {background:#ffeef2;}

.stlist-right::-webkit-scrollbar {width:4px;}
.stlist-right::-webkit-scrollbar-thumb {background-color: rgba(0,0,0,.2);border-radius:2px;}
.stlist-right::-webkit-scrollbar-track {background-color: rgba(0,0,0,0);}
.stlist-right::-webkit-scrollbar-button:start { opacity: 0; height:10px }
.stlist-right::-webkit-scrollbar-button:end { opacity: 0; height:10px }

#contents .status-list.hide-latest {grid-template-columns:repeat(6,1fr)}
#contents .status-list.hide-latest>li dd.photo img {border-radius:5px 5px 0 0;}
#contents .status-list.hide-latest>li dd.control {border-radius:0 0 5px 5px;}





/* tooltip */
.tooltip, .tooltip-calbtn {position: relative;display: inline-block;cursor: pointer;}
.tooltip-shadow{box-shadow: 0 5px 10px rgba(0,0,0,0.3);}
.tooltip-shadow2{box-shadow: 0 25px 128px rgba(0,0,0,0.88);}
.tooltip-text {display:none;width:232px;background-color: #fff;text-align: center;border-radius:5px;border:1px solid #ccc;position: absolute;z-index: 9999;padding:7px;bottom:40px;left:50%;transform: translateX(-50%);}
.tooltip-text::after {content: "";position: absolute;bottom:-11px;left:50%;transform: translateX(-50%);width:15px;height:12px;background:url(../images/tooltip_arrow.png)}
.tooltip-calculator {display:none;width:60vw;transform:translateX(-50%) translateY(-50%);background-color: #fff;border-radius:10px;border:1px solid #ccc;position: absolute;z-index: 9997;padding:20px;left:calc(50% + 60px);top:calc(50% + 35px)}
.tooltip-show-carimg {display:none;width:36vw;transform:translateX(-50%);background-color: #fff;border-radius:10px;border:2px solid #ccc;position: absolute;z-index: 9999;padding:20px;left:calc(50% + 60px);top:100px}
.tooltip-calculator>h1 {font-size:27px; color:#af1f39; font-weight: 700;}
.tooltip-calculator>hr {height:1px; border:0; background:#999; margin:12px 0;}
.tooltip-calculator button {font-weight: 700;}
.tooltip-calculator .tooltip-screen-wrapper {margin-bottom: 12px;}
.tooltip-calculator .tooltip-screen-wrapper>ul {display: flex; flex-direction: row; justify-content: space-between;}
.tooltip-calculator .tooltip-screen-wrapper>ul li h2 {font-size: 16px; color:#111; margin:6px 0 12px 0; font-weight: 700; letter-spacing: -1px;}
.tooltip-calculator .tooltip-screen-wrapper>ul li dl {position:relative}
.tooltip-calculator .tooltip-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);}
.tooltip-calculator .tooltip-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-color: rgba(0, 0, 0, 0.75);}
.tooltip-calculator .tooltip-screen-wrapper>ul li dl dd.photo img, #_imgcam,
.tooltip-calculator .tooltip-screen-wrapper>ul li dl dd.calc img {width:18.9vw !important; min-width:18.9vw !important; max-width:360px !important; height:auto !important; border:1px solid #ccc; aspect-ratio: 4 / 3; border-radius: 5px;}
.tooltip-calculator>.tabmenu2 {width:15.5%; float: left; padding-top: 24px;}
.tooltip-calculator>.tabmenu2 a {display: inline-block; width:100%; padding:12px; font-weight: 700; color:#111; border-width:1px 0 1px 1px; border-style:solid; border-color: #ccc; border-radius: 5px 0 0 5px; margin-bottom: 10px; transition: .3s ease; cursor:pointer}
.tooltip-calculator>.tabmenu2 a.active {width:100%; background:#af1f39; border-radius: 5px 0 0 5px; border:1px solid #af1f39; color:#fff}
.tooltip-calculator>.tabmenu2 a:hover:not(.tooltip-calculator>.tabmenu2 a.active) {border-color:#e11639; border-width: 1px 0 1px 1px; border-style:solid;}
.tooltip-calculator>.tabmenu2 a:active {position: relative; top:1px; left:1px}
.tooltip-calculator .wrapper_inRmt {width:84.5%;float:left;padding:12px; border:1px solid #af1f39; border-radius:5px;position: relative;}

.div_close{position: absolute; left:calc(100% - 34px); top:20px;z-index: 9999;}
.btn_close{width:14px; border:0 !important; background:url(../images/close_x.png) no-repeat 50% 50%;}
#wrapper_rmt1 {display: block; padding:0 !important}
#wrapper_rmt1 #rmt1-left {width:calc(60% - 24px); float: left; padding:12px 12px 16px 12px;}
#wrapper_rmt1 #rmt1-left select {width:120px; height:24px; background-size: 16px auto !important;}
#wrapper_rmt1 #rmt1-right {width:calc(40% + 24px); min-height: 313px; float: right; padding:12px; background:#eee; border-radius:0 5px 5px 0;}
#wrapper_rmt1 #rmt1-right>ul#seldc {width:100%; margin:12px 0; padding:12px 0; display:flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc;}
#wrapper_rmt1 #rmt1-right>ul#seldc button.discount-ticket {width:32%; font-size: 13.5px; margin:0;}
#wrapper_rmt1 #rmt1-right>ul#seldc button.discount-ticket:nth-child(n+4) {margin-top: 6px;}
/*#wrapper_rmt1 #rmt1-right>ul#rmtcal-apply-cancel {display: flex; flex-direction: row; justify-content: space-between;}*/
#wrapper_rmt1 #rmt1-right>ul#rmtcal-apply-cancel>button {margin:0; width:100%}
#wrapper_rmt1 #rmt1-right .btn_remote-calculate {background:url(../images/ico-remote-calculate.png) 12px center; color:#e11639; font-size: 18px; margin-bottom: 12px;}
#wrapper_rmt1 #rmt1-right .btn_remote-discount-apply {background:url(../images/ico-remote-discount-apply.png) 12px center; text-align: right;}
#wrapper_rmt1 #rmt1-right .btn_remote-discount-cancel {background:url(../images/ico-remote-discount-cancel.png) 12px center; text-align: center;}
#wrapper_rmt1 #rmt1-right .btn_rmt_cal {padding:12px; width:100%; height:auto; background-repeat: no-repeat; background-size: 32px 32px; background-color:#fff !important;}
#wrapper_rmt1 #rmt1-bottom {float:left; width:calc(60% - 24px); padding:12px; border-top:1px dashed #999; position: absolute; bottom:0}
#wrapper_rmt1 #rmt1-bottom>h2 {font-size: 16px; color:#111;}
#wrapper_rmt1 #rmt1-bottom>h2>span {font-size: 22px; color:#af1f39; letter-spacing: -.5px;}
#wrapper_rmt1 #rmt1-bottom>button {margin: 0; background:url(../images/ico-warning.png) 6px center / 18px 18px no-repeat; padding:6px 6px 6px 30px;}
#wrapper_rmt1 #rmt1-bottom #mobile {width:28%}
.btn_card-cancel {background:url(../images/ico-card-cancel.png);}
.btn_receipt-reprint {background: url(../images/ico-receipt-reprint.png);}
#wrapper_rmt2 {display: none;}
#wrapper_rmt2>button {float:right; margin:15px 0 0 3px; padding:12px 12px 12px 80px !important; height:48px !important; background-position:6px center; background-repeat: no-repeat; background-size: 64px 32px;}
.tooltip-calculator-title {font-size: 16px; color:#89152a; font-weight: 700;margin-right: 10px;}
.remote_carno{width:180px;}
.btn-search{width:34px;border:none !important;background:#af1f39 url(../images/ico_search_s.png) no-repeat 50% 50% !important;}
.btn_remote-calculate {float:right;}
.table_remote {margin-top:10px;}
.table_remote thead th{font-size: 12px !important;}
.view {display:block;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;}}


/* 방문등록 팝업 */
.tooltip-visitor {position: absolute; width:860px; left:calc(50% - 430px); top:calc(50% - 250px); background: #fff; z-index:10; display: none; overflow: hidden; border-radius:10px;}
.tooltip-visitor .visitor-title {width:calc(100% + 120px); height: 40px; line-height: 40px; text-align: center; background: linear-gradient(to right,#89152a,#630f17); background-color: #58141d; color: #fff; font-size: 16px; font-weight:700; margin:-20px -60px 24px -60px; cursor:move;}
.tooltip-visitor .tab-wrapper {width:100%; border-bottom:1px solid #999; text-align:center; padding:12px 12px 0 12px; position: unset;}
.tooltip-visitor .tab-wrapper .tab {font-size: 13.5px; font-weight:500; color:#999; border:1px solid #999; padding:12px; border-radius: 5px 5px 0 0; display:inline-block; margin:0 -1px -1px 0;width:unset;height:unset;background:unset;opacity:unset;}
.tooltip-visitor .tab-wrapper .swiper-pagination-bullet-active {font-weight:700; border-bottom:1px solid #fff;}
.tooltip-visitor .tab-wrapper .tab:hover, .tooltip-visitor .tab-wrapper .swiper-pagination-bullet-active{color:#ba0022}
.tooltip-visitor .swiper-slide {width:100%; height:100%; padding:20px 60px}
.tooltip-visitor .visitor-carimg, .tooltip-visitor dl {width:50%; display:inline-block; vertical-align:top; height:fit-content;}
.tooltip-visitor .visitor-carimg {width:calc(50% - 20px); margin-right:20px; background: #f5f5f5; border-radius:10px; overflow: hidden;aspect-ratio: 4/3;}
.tooltip-visitor dl {margin-bottom:12px;}
.tooltip-visitor dl dt {float:left; text-align: right; width:20%; font-weight: 700; color:#333; height:40px; padding:0 15px 0 10px; font-size: 14px; line-height: 40px;}
.tooltip-visitor dl dt:nth-of-type(odd),.tooltip-visitor dl dd:nth-of-type(odd) {background: #f5f5f5;}
.tooltip-visitor dl dd {width:80%; height:40px; font-size: 15px; line-height:42px; margin-left:20%; padding-right:6px;}
.tooltip-visitor dl dd input[type="text"] {width:100%}

.tooltip-visitor dl dd input#_vscarno {font-size: 24px; height: 44px; margin: 4px 0 0 0;}
.tooltip-visitor dl dt:nth-of-type(2) {height: 52px;line-height: 52px;}
.tooltip-visitor dl dd:nth-of-type(2) {height: 52px}

.tooltip-visitor dl dd input#part,.tooltip-visitor dl dd input#pos {width:calc(50% - 3px)}
.tooltip-visitor dl dd input#part {margin-right:6px;}
.tooltip-visitor dl dd:first-of-type {color:#af1f39; font-weight:700;}
.tooltip-visitor dl dd #vsbgndt, .tooltip-visitor dl dd #vsenddt {width:calc(100% - 58px) !important; border-radius: 0 5px 5px 0 !important; font-size: 12.5px; letter-spacing: -.3px; border-left:0}
.tooltip-visitor dl dd span {display: inline-block; background: #ddd; width:fit-content; width:58px; height:34px; line-height:34px; padding:0 6px; border-radius: 5px 0 0 5px; border: 1px solid #999; font-size: 13px; font-weight: 700; color:#111; vertical-align: middle;}
.tooltip-visitor dl dd input[type="button"]:nth-child(2n) {margin:0 5px}
.tooltip-visitor dl dd .label_check + p {display:inline-block; margin-left:6px; font-weight:700; font-size:13.5px;}
.tooltip-visitor dl dd:last-of-type {text-align: right;}
.tooltip-visitor .swiper-button-next, .tooltip-visitor .swiper-button-prev {color:#af1f39 !important}
.tooltip-visitor .swiper-button-next {right:2% !important}
.tooltip-visitor .swiper-button-prev {left:2% !important}
.tooltip-visitor .btn_close {position: absolute; top:5px; right:15px; filter: invert(1); background-color: transparent !important;transition: none;}
.tooltip-visitor .btn_close:active {position: absolute; top:6px; left:unset; right:14px;}
.tooltip-visitor .visitor-btm {width:calc(100% + 120px); height:54px; margin:0 0 -21px -60px; text-align: center; padding:0; line-height: 54px; background:#eee;}
.tooltip-visitor .visitor-btm button {padding:0 10px; margin:0 10px}
.tooltip-visitor .visitor-btm button:last-of-type {background: #af1f39 !important; color:#fff; font-weight: 700; border:1px solid #af1f39 !important}
.tooltip-visitor .visitor-btm button:last-of-type:hover {background: #e11639 !important; border-color: #e11639 !important;}
.tooltip-visitor #blcarno {width: calc(43% - 20px);margin: 0;display: inline-block;padding: 20px;font-size: 36px;font-weight: 700;text-align: center;position: absolute;left: 7%;bottom:84px;background: #000;border-radius: 10px;color: #ec2339;animation: blink-effect 1.5s step-end infinite;}
.popup-visitor {display: block; animation: gelatine .5s ease-out, fadeIn .5s;}

.blink {animation: blink-effect 1s step-end infinite;}
@keyframes blink-effect { 50% { opacity: 0; } }
@keyframes gelatine {from, to { transform: scale(1, 1); }25% { transform: scale(0.9, 1.1); }50% { transform: scale(1.1, 0.9); }	75% { transform: scale(0.95, 1.05); } }

/* 방문등록 동/호 자동완성 */
.autoMaker {position: absolute;	width: 150px; height:0px; transition:.3s ease; overflow-y:auto; background:rgba(255,255,255,0.75); backdrop-filter:blur(2px);
	-webkit-backdrop-filter: blur(2px); margin-top:-3px; cursor: pointer; border-radius:5px; border:1px solid #ccc; box-shadow: 0 2px 6px rgba(0,0,0,0.25); opacity:0;}
.autoMaker.show {height:120px; opacity:1;}
.autoMaker>div {padding:0 12px; font-size:13.5px; font-weight:700;line-height: unset;}
.autoMaker>div:hover {background: rgba(0,0,0,0.15); color:#af1f39;}


/* 장비현황 넓게보기 */
#contents .status-list.eqlist-full {display: grid; grid-template-columns: repeat(auto-fill, minmax(16vw, 32.5%)); grid-gap: 15px; justify-content: space-between;}
#contents .status-list.eqlist-full .stlist-left {width:100%}
#contents .status-list.eqlist-full .stlist-right {display: none !important;}
#contents .status-list.eqlist-full .stlist-left::before,#contents .status-list.eqlist-full .stlist-left::after {display:none;}
#contents .status-list.eqlist-full>li {width:unset}
#contents .status-list.eqlist-full>li dd.photo,
#contents .status-list.eqlist-full>li dd.calc {aspect-ratio: unset;height:340px;overflow:hidden;text-align:center;background:#eee; border-radius: 5px 5px 0 0;}
#contents .status-list.eqlist-full>li dd.photo img,
#contents .status-list.eqlist-full>li dd.calc img {height:unset; transform: translateY(-12.5%);}
#contents .status-list.eqlist-full>li dd.control {border-radius:0 0 5px 5px;}
#contents .status-list.eqlist-full>li dd.control .control-group {width:49%; display:inline-block; margin-bottom:-4px;}
#contents .status-list.eqlist-full>li dd.control .control-group.row2 {border-left: 1px dotted #ccc; border-top:0;}
#contents ul.overview.eqlist-full {display: none;}
#header.eqlist-full {top:-70px;}
#contents.eqlist-full {padding-top: 30px;}
#contents .content.eqlist-full {min-height:calc(100% - 30px) !important;}


[tttxt]:hover {position: relative;}
[tttxt]:after{-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;

	background-color: rgba(0, 0, 0, 0.8);

  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
	
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
  color: #FFFFFF;
	font-size: 14px;
	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%);}

#contents .more-list li>button{width:40px !important;background:url(../images/more.png) no-repeat}
#contents .more-list li:nth-child(1)>button{background-position:0 0}
#contents .more-list li:nth-child(2)>button{background-position:0 -30px}
#contents .more-list li:nth-child(3)>button{background-position:0 -60px}
#contents .more-list li:nth-child(4)>button{background-position:-2px -90px;width:32px !important;}
#contents .more-list li:nth-child(5)>button{background-position:-2px -120px;width:32px !important;}
#contents .more-list li:nth-child(6)>button{background-position:-2px -150px;width:32px !important;}

/* store-main */
#contents .store-main{}
#contents .store-main:after{content:'';display:block;clear:both;}
#contents .store-main.store-main2{border-top:1px solid #ccc;padding-top:30px;margin-top:30px;}
#contents .store-main .fl, #contents .store-main2 .fl {float:left;width:45%}
#contents .store-main .fr, #contents .store-main2 .fr2 {float:right;width:50%}
#contents .store-main .fr2{float:right;width:54%}

#contents .store-main .search{height:170px;background:url(../images/car.jpg) no-repeat left top;text-align:right;border-bottom:1px solid #ccc;margin-bottom:20px;}
#contents .store-main .search p{font-weight:700;color:#333;font-size:15px;letter-spacing:-1px;margin-bottom:30px;}
#contents .store-main .search input{width:60px;height:60px;text-align:center;border:1px solid #ccc;border-radius:5px;font-family:'PAYW Pro', 'Roboto', sans-serif;font-size:42px;color:#333;font-weight:700;margin-right:3px; }
#contents .store-main .search .btn-search{width:60px;height:60px;background:#af1f39 url(../images/ico_search.png) no-repeat 50% 50%;border-radius:5px;border:none;}

#contents .store-main .car-photo{position:relative;margin-top:40px;width:45%;float:left;border:1px solid #ccc;background-color:#fff;border-radius:5px;padding:20px 30px;height:340px;}

#contents .store-main .price-list{margin-top:40px;width:50%;float:right;border:1px solid #ccc;background-color:#f5f5f5;border-radius:5px;padding:20px;height:340px;}
#contents .store-main h4{font-size:16px;color:#870a15;font-weight:700;margin-bottom:15px;}
#contents .store-main .price-list li{font-size:14px;letter-spacing:-1px;line-height:24px;}
#contents .store-main .price-list li:after{content:'';display:block;clear:both;margin-bottom:20px;}
#contents .store-main .price-list li strong{font-size:22px;font-weight:700;color:#333;float:right;}
#contents .store-main .price-list li:first-child strong{font-size:16px;}

#contents .store-main .discount{border:1px solid #d50026;border-radius:5px;padding:20px;}
#contents .store-main .discount:after{content:'';display:block;clear:both;}
#contents .store-main .discount li{float:left;width:24%;margin:0.5%;height:40px;}
#contents .store-main .discount input.active, #contents .store-main .discount input:hover{border:1px solid #d50026;background-color:#ffe2e7}
#contents .store-main .discount input{border:1px solid #999;border-radius:5px;background-color:#fff;width:100%;height:40px;text-align:left;font-weight:700;letter-spacing:-1px;font-size:13px;word-break:break-all;white-space:normal;}
#contents .store-main .discount li p {padding: 4px;background: #e11639;color: #fff;font-weight: 700;border-radius:20px;font-size: 10px;letter-spacing: 0;height: 20px;display: block;position: relative;float: right;text-align: center;top: -30px;right: 8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:36px;min-width:20px;}
#contents .store-main .discount input[disabled]{background-color:#eee;border:1px solid #ccc;color:#999;cursor:not-allowed;}
#contents .store-main .discount input[disabled]:hover {border:1px solid #ccc !important}
#contents .store-main .discount input[disabled] + p {background: #ccc; color:#999}
#contents .store-main .precalc input {width: 100%; height: calc(100vh - 643px); font-size: 36px; min-height:118px;}
#contents .store-main .precalc input:hover {background:#af1f39; color:#fff}


#contents .store-main .btn-cancel{background-color:#aa001f;border:1px solid #671019;width:40px;height:20px;border-radius:10px;color:#fff;font-size:11px;}
#contents .store-main .btn-wrap{text-align:right;margin-top:15px;}
#contents .store-main .btn-wrap .btn-ok{background-color:#e11639;background-image:linear-gradient(to bottom,#e11639,#ba202f);border:1px solid #ae0923;width:100px;height:32px;border-radius:16px;color:#fff;font-size:15px;font-weight:700}

/* 소영 추가 chart float 다시 설정 */
.contents-wrap-chart>div:nth-child(1) { float: left; width: 49%; }
.contents-wrap-chart>div:nth-child(2) { float: right; width: 49%; } 

.contents-wrap-chart5-8 { width: 80%; }

input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator {margin:0 !important}


@media only screen and (min-width:1681px) {

	#footer {left:150px; width:calc(100% - 180px);}
	#contents .content{width:calc(100% - 60px);}

}

@media only screen and (min-width:1681px) and (max-width:1880px) {

	#contents .status-list, #contents .status-list.hide-latest {grid-template-columns:repeat(5,1fr);}
	#contents .status-list>li div.stlist-left,
	#contents .status-list.hide-latest>li div.stlist-left {width:100%}
	#contents .status-list>li div.stlist-right,#contents .status-list.hide-latest>li div.stlist-right {border-radius:0 0 5px 5px; top:100%; left:0; position:relative; height:200px}
	#contents .status-list>li dd.photo img,
	#contents .status-list>li dd.calc img {border-radius:5px 5px 0 0;}
	#contents .status-list>li dd.control {border-radius:0;}
	#contents .status-list>li div.stlist-left::before {background-image: linear-gradient(to top,transparent,rgba(0,0,0,0.15)); left:0; top:unset; bottom:190px; width:100%}
	#contents .status-list>li div.stlist-left::after {display: none;}

}

@media only screen and (max-width:1680px) {
	#contents ul.overview>li{width:50% !important;}
	#contents ul.overview>li:nth-child(1), #contents ul.overview>li:nth-child(2){border-bottom:1px solid #ccc}
	#contents ul.overview>li:nth-child(3){border-left:none;}
	
	#contents .status-list, #contents .status-list.hide-latest {grid-template-columns:repeat(4,1fr);}
	#contents .status-list>li div.stlist-left,#contents .status-list>li div.stlist-right,
	#contents .status-list.hide-latest>li div.stlist-left,#contents .status-list.hide-latest>li div.stlist-right {width:100%}
	#contents .status-list>li div.stlist-right,#contents .status-list.hide-latest>li div.stlist-right {border-radius:0 0 5px 5px; top:100%; left:0; position:relative; height:200px}
	#contents .status-list>li dd.photo img,
	#contents .status-list>li dd.calc img {border-radius:5px 5px 0 0;}
	#contents .status-list>li dd.control {border-radius:0;}
	#contents .status-list>li div.stlist-left::before {background-image: linear-gradient(to top,transparent,rgba(0,0,0,0.15)); left:0; top:unset; bottom:190px; width:100%}
	#contents .status-list>li div.stlist-left::after {display: none;}
	
	#contents .store-main .search{background-size:auto 70%;}

	#footer {left:150px; width:calc(100% - 180px);}
	#contents .content{width:calc(100% - 60px);}

    .tooltip-calculator {width:70vw;}
    .tooltip-calculator .tooltip-screen-wrapper>ul li dl dd.photo img, #_imgcam, .tooltip-calculator .tooltip-screen-wrapper>ul li dl dd.calc img
    {width:22vw !important}

}

@media only screen and (max-width:1400px) {
	#contents ul.overview{margin:0 20px 10px 20px;}
	#contents{padding-top:90px;}
	#contents .content{margin:0 20px 20px;min-height:calc(100% - 20px)}
	.container-hide + #footer {left:20px; width:calc(100% - 40px)}
	
	#contents .status-list{grid-template-columns:repeat(3,1fr);}
	
	#contents .store-main .search{background-size:auto 100%;padding-right:40px;}
	#contents .store-main .fl{float:none;width:100%}
	#contents .store-main .fr{float:none;width:100%}
	#contents .store-main2 .fl {float:left;width:45%}
	#contents .store-main2 .fr2 {float:right;width:50%}
	#contents .store-main .fr .car-photo img {height: calc(100% - 43px); position: relative; left: 50%; transform: translate(-50%);}
	#contents .store-main .discount{margin-bottom:20px;}

	/* 소영 추가 chart float 다시 설정 */
	.contents-wrap-chart>div:nth-child(1) { float: none; width: 100%; }
	.contents-wrap-chart>div:nth-child(2) { float: none; width: 100%; }

	#footer {left:140px; width:calc(100% - 160px);}
	#contents .content{width:calc(100% - 40px);}

	.tooltip-calculator {width:82vw;}
	.tooltip-calculator .tooltip-screen-wrapper>ul {justify-content: center;}
	.tooltip-calculator .tooltip-screen-wrapper>ul li:nth-child(2) {margin:0 12px}
    .tooltip-calculator .tooltip-screen-wrapper>ul li dl dd.photo img, #_imgcam, .tooltip-calculator .tooltip-screen-wrapper>ul li dl dd.calc img
    {width:25.7vw !important}

}


/* 크롬을 써주세요.. 제발.. */
#modal {position: absolute; z-index: 9999; left: 0; top: 0;	width: 100vw; height: 100vh; overflow: hidden; transform: scale(0);}
#modal .modal-background { background: rgb(0,0,0,0.7); width:100%; height:100%}
#modal .modal-wrapper {	position:absolute; background: #fff; padding: 20px 40px; box-shadow: 0 8px 20px #000; border-radius: 20px; width:764px; height:640px; left:50%; top:50%; margin-top:-320px; margin-left:-382px; vertical-align: middle; text-align: center;}
#modal .modal-wrapper .modal-title { background: url(../images/your-browser-not-chrome.png) center 20px / 120px no-repeat; padding-top: 164px; font-weight: 700; margin-bottom: 20px;}
#modal .modal-wrapper .modal-title.imcrying { background: url(../images/im-crying-bcuz-ur-browser-still-not-chrome.png) center 20px / 120px no-repeat;}
#modal .modal-wrapper .modal-title p:first-child { font-size: 48px; color:#111; letter-spacing: -2px; margin-bottom: 15px;}
#modal .modal-wrapper .modal-title p:last-child { font-size: 18px; color:#ba202f; letter-spacing: -0.5px;}
#modal .modal-wrapper .modal-content { line-height: 1.35; font-size: 14px;}
#modal .modal-wrapper .modal-downloadchrome { width:300px; margin:20px auto; border:1px solid #999; font-weight: 700; padding:20px 20px 20px 70px; background: url(../images/chrome-icon.png) 20px center / 48px no-repeat; border-radius: 5px; cursor: pointer;}
#modal .modal-wrapper .modal-downloadchrome:hover { border:1px solid dodgerblue}
#modal .modal-wrapper .modal-downloadchrome span { color:dodgerblue; font-size: 13px; font-weight: 500;}
#modal .modal-wrapper .modal-howtodeletechace { font-size: 13px; color:#671019; line-height: 1.35; padding-bottom: 20px; border-bottom:1px solid #ccc }
#modal .modal-wrapper .modal-close { background: #ba202f; border-radius: 5px; padding:10px; width:300px; font-weight: 700; color:#fff; margin:30px auto 15px auto; cursor: pointer;}
#modal .modal-wrapper .modal-close:hover {background: #e71138;}
#modal .modal-wrapper .modal-downloadchrome:active,#modal .modal-wrapper .modal-close:active {transform: translate(1px, 1px);}

/* 크롬을 써주세요.. 애니메니션 */
#modal.plz-use-chrome { transform: scale(1); }
#modal.plz-use-chrome .modal-background {
	animation: MDfadeIn 1s forwards;
	-webkit-animation: MDfadeIn 1s forwards;
	-moz-animation: MDfadeIn 1s forwards;
	-o-animation: MDfadeIn 1s forwards; }
#modal.plz-use-chrome .modal-background .modal-wrapper { /* 콘텐츠를 초기에 보여주지 않음 */ opacity: 0;
	animation: MDscaleUp 1s .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-webkit-animation: MDscaleUp 1s .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-moz-animation: MDscaleUp 1s .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-o-animation: MDscaleUp 1s .5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
#login.plz-use-chrome { /* 콘텐츠 크기를 줄임 */
	animation: MDscaleBack 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-webkit-animation: MDscaleBack 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-moz-animation: MDscaleBack 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-o-animation: MDscaleBack 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;}
#modal.plz-use-chrome.out { /* 전체 모달 컨테이너를 숨김 처리(다른 애니메이션이 모두 끝난 0.5초 후에 처리하기 위해 0.5초 지연시킴 */
	animation: MDquickScaleDown 1s 0s linear forwards;
	-webkit-animation: MDquickScaleDown 1s 0s linear forwards;
	-moz-animation: MDquickScaleDown 1s 0s linear forwards;
	-o-animation: MDquickScaleDown 1s 0s linear forwards; }
#modal.plz-use-chrome.out .modal-background {
	animation: MDfadeOut 1s .5s forwards;
	-webkit-animation: MDfadeOut 1s .5s forwards;
	-moz-animation: MDfadeOut 1s .5s forwards;
	-o-animation: MDfadeOut 1s .5s forwards; }
#modal.plz-use-chrome.out .modal-background .modal-wrapper {
	animation: MDscaleDown 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-webkit-animation: MDscaleDown 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-moz-animation: MDscaleDown 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-o-animation: MDscaleDown 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }
#login.plz-use-chrome.out {
	animation: MDscaleForward 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-webkit-animation: MDscaleForward 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-moz-animation: MDscaleForward 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
	-o-animation: MDscaleForward 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } /* Dimmed showing */

@keyframes MDfadeIn { 0% { background: transparent; } 100% { background: rgba(0,0,0,0.7); } } /* Show modal content from bottom to top */
@-webkit-keyframes MDfadeIn { 0% { background: transparent; } 100% { background: rgba(0,0,0,0.7); } }
@-moz-keyframes MDfadeIn { 0% { background: transparent; } 100% { background: rgba(0,0,0,0.7); } }
@-o-keyframes MDfadeIn { 0% { background: transparent; } 100% { background: rgba(0,0,0,0.7); } }

@keyframes MDscaleUp { 0% { /* 모달이 밑에서 */ transform: scale(.7) translateY(-1000px); opacity: 0; } 100% { /* 가운데로 올라옴 */ transform: scale(1) translateY(0); opacity: 1; } } /* Shrink content */
@-webkit-keyframes MDscaleUp { 0% { transform: scale(.7) translateY(-1000px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@-moz-keyframes MDscaleUp { 0% { transform: scale(.7) translateY(-1000px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@-o-keyframes MDscaleUp { 0% { transform: scale(.7) translateY(-1000px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

@keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(.7); } } /* Hide modal container*/
@-webkit-keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(.7); } }
@-moz-keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(.7); } }
@-o-keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(.7); } }

@keyframes MDquickScaleDown { 0% { transform: scale(1); } 99.9% { transform: scale(1); } 100% { transform: scale(0); } } /* Dimmed hiding */
@-webkit-keyframes MDquickScaleDown { 0% { transform: scale(1); } 99.9% { transform: scale(1); } 100% { transform: scale(0); } }
@-moz-keyframes MDquickScaleDown { 0% { transform: scale(1); } 99.9% { transform: scale(1); } 100% { transform: scale(0); } }
@-o-keyframes MDquickScaleDown { 0% { transform: scale(1); } 99.9% { transform: scale(1); } 100% { transform: scale(0); } }

@keyframes MDfadeOut { 0% { background: rgba(0, 0, 0, .7);  } 100% { background: transparent; } } /* modal content from top to bottom */
@-webkit-keyframes MDfadeOut { 0% { background: rgba(0, 0, 0, .7);  } 100% { background: transparent; } }
@-moz-keyframes MDfadeOut { 0% { background: rgba(0, 0, 0, .7);  } 100% { background: transparent; } }
@-o-keyframes MDfadeOut { 0% { background: rgba(0, 0, 0, .7);  } 100% { background: transparent; } }

@keyframes MDscaleDown { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.7) translateY(1000px); opacity: 0; } }
@-webkit-keyframes MDscaleDown { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.7) translateY(1000px); opacity: 0; } }
@-moz-keyframes MDscaleDown { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.7) translateY(1000px); opacity: 0; } }
@-o-keyframes MDscaleDown { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(0.7) translateY(1000px); opacity: 0; } }

@keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(0.7); } }
@-webkit-keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(0.7); } }
@-moz-keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(0.7); } }
@-o-keyframes MDscaleBack { 0% { transform: scale(1); } 100% { transform: scale(0.7); } }

@keyframes MDscaleForward { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }
@-webkit-keyframes MDscaleForward { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }
@-moz-keyframes MDscaleForward { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }
@-o-keyframes MDscaleForward { 0% { transform: scale(0.7); } 100% { transform: scale(1); } }

html.modal-active, body.modal-active { overflow: hidden; }

#pagingul {margin:15px 0 0 0;text-align:center;}
#pagingul li {display:inline-block;text-align:center;}
#pagingul li a {display: block;font-size: 14px;padding: 7px;border-left:0;border-right:1px dashed #ccc;border-top: solid 1px #ccc;border-bottom:1px solid #ccc;width: 32px;}
#pagingul li a:hover {background:#eee;}
#pagingul li:last-child a {border-radius:0 5px 5px 0;border-right:1px solid #ccc}
#pagingul li:first-child a {border-radius:5px 0 0 5px;border-left:1px solid #ccc}
#pagingul li:first-child:nth-last-child(1) a {border-radius:5px !important;}
#pagingul li.on a {box-shadow: inset 0 -4px #af1f39;font-weight: 700}
#pagingul li a#next,#pagingul li a#prev {font-size: 14px;letter-spacing: -1px;width: 42px;}
ul#displayCount {float:right; margin-top:-30px; font-size:13px;}
select#dataPerPage {float: left;margin: 15px 0 0 0;font-size: 13px;height: 33px;}