@charset "UTF-8";

/* Reset */
*, *::after, *::before {box-sizing:border-box;}

/* Reset Default Margin */
a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl,dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, section, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-family:inherit; font-size:100%;}

/* Set html5 elements to block */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,main,nav,section,summary{display:block;}
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,font,img,ins,q,s,samp,strike,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{border:0 none;line-height:1.5;}
caption,legend{position:absolute;top:-9999px;left:-9999px;visibility:hidden;width:0;height:0;font-size:0;overflow:hidden;}
caption{display:none;}
img {border:0 none;max-width:100%;height:auto;vertical-align:top;}
select,input{vertical-align:top;border:0px;border-radius:0;background-color:transparent;outline: none;}
dl,ul,ol,menu,li {list-style:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal;display:inline;}
button{cursor:pointer;border:0 none;border-radius:0;background-color:transparent;appearance:none;outline: none;}
th,td,input,textarea,keygen,select,button{font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕","Nanum Gothic","나눔 고딕","돋움",dotum,sans-serif;font-size:100%;vertical-align:middle;color:#666;margin: 0;}
dfn{font-style:normal;}

input:focus,button:focus,textarea:focus, button:focus {outline: none;}

/* Link Style */
a {color:#666;text-decoration:none;background-color:transparent;}
a:hover,a:link,a:visited,a:active,a:focus{text-decoration:none;outline-width:0;}

body {font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕","Nanum Gothic","나눔 고딕","돋움",dotum,sans-serif; font-size:14px; line-height:1.5; letter-spacing:-1px; color:#666; overflow-x:hidden; -webkit-font-smoothing:antialiased;  font-smoothing:antialiased;}

/* heading */
h1,h2,h3,h4,h5,h6 {margin:0; font-weight:500; color: #333; font-family:"Noto Sans KR","Malgun Gothic","맑은 고딕","Nanum Gothic","나눔 고딕","돋움",dotum,sans-serif; letter-spacing: -1px;}
h1 {font-size: 30px;}


/* helper */
.blind {position:absolute;display:inline-block;width:0;height:0;font-size:0;color:rgba(0,0,0,0);overflow:hidden;}
.f-l {float: left !important;}
.f-r {float: right !important;}
.row {position: relative; width: 100%; margin: 0; padding: 0;}
.row:after {content: ""; display: table; clear: both;}

/* check box */
.check-wrap {display: inline-block; position: relative; padding-left: 25px; cursor: pointer; font-size: 14px; line-height: 18px; text-align: left;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.check-wrap input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.checkmark {position: absolute; top: 0; left: 0; height: 18px; width: 18px; text-align: left; background-color: #fff; border: 2px solid #ccc; border-radius: 2px;}
.check-wrap:hover input ~ .checkmark {border:2px solid #2fcac6; transition:all 0.3s ease 0s;}
.check-wrap input:checked ~ .checkmark {background-color: #2fcac6; border: none; transition:all 0.3s ease 0s;}
.checkmark:after {content: ""; position: absolute; display: none;}
.check-wrap input:checked ~ .checkmark:after {display: block; transition:all 0.3s ease 0s;}
.check-wrap .checkmark:after {left: 5px; top: 1px; width: 7px; height: 12px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}


/* login */
.wrapper {position: relative; width: 100vw; height: 100vh; background-image: linear-gradient(45deg, #27aae2 0%, #84c44c 100%); background-size: 100%; background-position: right center; transition: all 600ms ease;}
#hero-background {position:absolute; display:block; width:100%; height:100% !important; min-height:100%; background: url('/images/login_bg.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position:center center; -ms-background-size:cover; background-size:cover;}
.form-section {position:relative; display:table; width:100%; height:100%; max-height:100%;}
.form-section .contain-wrapper {display:table-cell; vertical-align:middle; text-align:center;}
.form-section .form {position:relative; display:block; width:72%; height:74%; background:#fff; margin:0 auto; border-radius: 25px; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; opacity:0; -webkit-transform:translate(0,-100px); transform:translate(0,-100px); overflow: hidden;}
.save-id {float: left; height: 60px;}
/* Animation */
.form-section .form.isActive {opacity:1; -webkit-transform:translate(0,0); transform:translate(0,0); transition:all 1s ease 0s;}
.left-area {float: left; width: 40%; height: 100%;}
.right-area {float: left; width: 60%; height: 100%; background: url('../images/login_visual.jpg') no-repeat 50% 50%; background-size: cover;}
.left-area .login-wrap {position: absolute; width: 40%; top:50%; margin-top: -21%;}
.login-wrap .form-header {margin-top: 30px;}
.login-wrap .form-header h1 {margin-top: 20px;}
.form-section .form-header img.logo {width: 140px; height: 96px; margin: 0 auto 5%;}
.form-section .form-contain {padding:5% 7%;}
/* Input Setup */
.form-section .form-contain .form-control {display:block; width:100%; height:auto; font-weight:400; font-size:14px; line-height:15px; color:#666; padding:15px 15px 15px 60px; border:1px solid #d3dae1; border-radius:4px; outline:none; box-shadow:none; margin-bottom: 20px; transition:all 0.3s ease 0s;}
.form-section .form-contain .form-control:focus {color:#2fcac6; border:2px solid #2fcac6; outline:0; box-shadow:none;}
.form-section .form-contain .form-control.username {background: #fff url('../images/icon_id.png') no-repeat 15px 50%;}
.form-section .form-contain .form-control.password {background: #fff url('../images/icon_password.png') no-repeat 15px 50%;}
.form-section .form-contain .username:focus {background: #fff url('../images/icon_id_ov.png') no-repeat 15px 50%;}
.form-section .form-contain .password:focus {background: #fff url('../images/icon_password_ov.png') no-repeat 15px 50%;}
.form-section .form-contain .btn-login {display: block; font-weight: 500; color: #fff; font-size: 24px; line-height: 48px; letter-spacing: 0; background: #2fcac6; padding: 0 45px; border-radius: 4px; width: 100%; margin-top: 7%; vertical-align: middle;}
.form-section .info {display: block; width: 100%; color: #666; font-size: 14px; padding: 2% 7%;}
.form-section .form-contain .form-control::-webkit-input-placeholder {color:#a5aeb8;}
.form-section .form-contain .form-control:-moz-placeholder {color:#a5aeb8;}
.form-section .form-contain .form-control::-moz-placeholder {color:#a5aeb8;}
.form-section .form-contain .form-control:-ms-input-placeholder {color:#a5aeb8;}


/* sidenav */
.sidenav {height: 100%; width: 100px; position: fixed; z-index: 1000; top: 0; left: 0; background-color: #142e4a; overflow-x: hidden; box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);}
.sidenav a {padding: 20px 0; text-decoration: none; font-size: 14px; text-align: center; line-height: 1.3; color: rgba(255,255,255,0.7); display: block; border-bottom: 1px solid rgba(255,255,255,.1); will-change: opacity, transform;
    transition: all .3s ease-out;}
.sidenav a .side-icon {display: block; margin: 0 auto 10px; background: url(../images/icon_sideNav.png) no-repeat; background-size: 100px 132px;}
.sidenav a:hover, .sidenav a.active {color: rgba(255,255,255,1); background-image: linear-gradient(45deg, #27aae2 0%, #84c44c 100%); background-size: 100%; background-position: right center; position: relative; transition: all 600ms ease;}
.sidenav a .si-1 {width: 25px; height: 17px; background-position: 0 0;}
.sidenav a .si-2 {width: 40px; height: 17px; background-position: 0 -27px;}
.sidenav a .si-3 {width: 34px; height: 34px; background-position: 0 -54px;}
.sidenav a .si-4 {width: 30px; height: 34px; background-position: 0 -98px;}
.sidenav a:hover .si-1 {width: 25px; height: 17px; background-position: -50px 0;}
.sidenav a:hover .si-2 {width: 40px; height: 17px; background-position: -50px -27px;}
.sidenav a:hover .si-3 {width: 34px; height: 34px; background-position: -50px -54px;}
.sidenav a:hover .si-4 {width: 30px; height: 34px; background-position: -50px -98px;}
.sidenav a.active .si-1 {width: 25px; height: 17px; background-position: -50px 0;}
.sidenav a.active .si-2 {width: 40px; height: 17px; background-position: -50px -27px;}
.sidenav a.active .si-3 {width: 34px; height: 34px; background-position: -50px -54px;}
.sidenav a.active .si-4 {width: 30px; height: 34px; background-position: -50px -98px;}
.sidenav ul {position: absolute; bottom: 20px;}
.sidenav ul .last a {border-bottom: none;}
.sidenav ul .last a:hover, .sidenav ul .last a.active {background: none;}
.sidenav ul .last a .ion {display: block; font-size: 30px; margin-bottom: 10px;}



/* sound */
.sound {width: 50px; height: 50px; position: relative; cursor: pointer; display: block; background: rgba(255,255,255,.6); border-radius: 50px; margin: 20px 20px; text-align: center;}
.sound--icon {color: #142e4a; width: 20%; height: 100%; line-height: 100%; font-size: 46px; display: block; position: absolute; top: 0; left: 8px;}
.sound--wave {
  position: absolute;
  border: 2px solid transparent;
  border-right: 2px solid #142e4a;
  border-radius: 50%;
  transition: all 200ms;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 8px;}
.sound--wave_one {
  width: 50%;
  height: 50%;
}
.sound--wave_two {
  width: 75%;
  height: 75%;
}
.sound-mute .sound--wave {
  border-radius: 0;
  width: 40%;
  height: 40%;
  border-width: 0 2px 0 0;
}
.sound-mute .sound--wave_one {
  -webkit-transform: rotate(45deg) translate3d(0, -45%, 0);
          transform: rotate(45deg) translate3d(0, -45%, 0);
}
.sound-mute .sound--wave_two {
  -webkit-transform: rotate(-45deg) translate3d(0, 45%, 0);
          transform: rotate(-45deg) translate3d(0, 45%, 0);
}



/* 전체 개폐기록 */
.right-sticky {height: 100%; width: 0; position: fixed; top: 0; right: 0; background-color: #fff; transition:all 0.5s ease 0s; z-index: 10000; box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);}
.right-sticky .sticky-head {position: relative; padding: 20px; background-color: #2fcac6; border-bottom: 1px solid #118e8b; z-index: 100;}
.right-sticky .sticky-head .closebtn {float: right; top: 15px; right: 15px; color: #fff; font-size: 30px;}
.right-sticky .sticky-head h2 {color: #fff; font-size: 24px; font-weight: 400; margin-top: 20px;}
.right-sticky .sticky-body {width: 100%; height: calc(100% - 100px); overflow-y: auto; overflow-x: hidden;}
/*table {border-collapse: collapse; border-spacing: 0; width: 100%; margin: 20px;}*/
th {border-bottom: 1px solid #ddd; color:#333; font-size: 15px;}
th, td {text-align: left; padding: 8px 15px 8px 0;}
td {color: #666;}


/* 상태확인 버튼 */
.button {padding: 4px 30px 0 45px; position: absolute; right: 20px; top: 10px; color: #999; transition:  all 0.5s linear; -o-transition:  all 0.5s linear; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s ease; overflow: hidden;}
.button .btn__icon {width: 30px; height: 30px; display: inline-block; position: absolute; top: 0; left: 0;}
.button .btn__icon:before {content: ''; left:0; top:0; position: absolute; transition:  all 0.3s linear; -o-transition:  all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease;}
.button .btn__icon:after {content: ''; top: 0; left: 0; position: absolute; transition:  all 0.3s linear; -o-transition:  all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear;}
.btn-waiting {background-color: none;}
.btn-waiting .btn__icon {background-color: transparent;}
.btn-waiting .btn__icon:after {width:30px; height:30px; top: 0; left: 0; border-radius:50%; animation:rotation infinite linear 0.5s; transition:none; border-top: 2px solid transparent; border-left: 2px solid #999; border-right: 2px solid transparent; border-bottom: 2px solid transparent; z-index: 0;}
.btn__text {display: block; position: relative; width: 70px; height: 26px; text-align: center; line-height: 26px; background-color: #ebefef; border-radius: 26px;}
.btn__text:before {content: attr(data-after); position: absolute; top: -27px; color: transparent; z-index: -1; color: #fff; transition:  all 0.2s linear; -o-transition:  all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;}
.btn__text:after {content: attr(data-wait); position: absolute; color: transparent; top: 2px; left: 0; z-index: -1; color: #fff; transition:  all 0.2s linear; -o-transition:  all 0.2s linear; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear;}
.btn-waiting .btn__text {color: transparent;}
.btn-waiting .btn__text:after {top: 0; right:0; width:70px; height:26px; border-radius:26px; z-index: 1; background: #999;}
.btn-open .btn__icon:after {background: url('../images/icon_open.png') no-repeat 0 center; width: 30px; height: 30px; background-size: cover; animation: activated 0.3s linear 1;}
.btn-opening .btn__icon:after {background: url('../images/icon_opening.png') no-repeat 0 center; width: 30px; height: 30px; background-size: cover; animation: activated 0.3s linear 1;}
.btn-closed .btn__icon:after {background: url('../images/icon_closed.png') no-repeat 0 center; width: 30px; height: 30px; background-size: cover; animation: activated 0.3s linear 1;}
.btn-closing .btn__icon:after {background: url('../images/icon_closing.png') no-repeat 0 center; width: 30px; height: 30px; background-size: cover; animation: activated 0.3s linear 1;}
.btn-failure .btn__icon:after {background: url('../images/icon_failure.png') no-repeat 0 center; width: 30px; height: 30px; background-size: cover; animation: activated 0.3s linear 1;}
.btn-open .btn__text:before,
.btn-opening .btn__text:before,
.btn-closed .btn__text:before,
.btn-closing .btn__text:before,
.btn-failure .btn__text:before {top: 0; right:0; width:70px; height:26px; border-radius:26px; z-index: 1; background: #999;}
.btn-open .btn__text,
.btn-opening .btn__text,
.btn-closed .btn__text,
.btn-closing .btn__text,
.btn-failure .btn__text {color: transparent;}
@keyframes rotation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes activated {
  0% {
    background-position-y: 34px;
  }
  100% {
    background-position-y: center;
  }
}


/* header */
header {background-color: #fff; position: fixed; top: 0; left: 100px; width: 100%; box-shadow: 0 2px 4px 0 rgba(0,0,0,.06); transition: 0.2s; z-index: 100;}
.topnav  {position: relative; width: 100%; height: 95px; padding-right: 30px;}
.topnav:after {content: ""; display: table; clear: both;}
.topnav h1 {display: inline-block; padding:25px 0 25px 30px;}
.status-list {padding: 10px 0; position: absolute; top: 0; right: 100px;}
.status-list dl {height: 100%; float: left; padding: 0 30px; border-left: 1px solid #e9e9e9;}
.status-list dt, .status-list dd {display: inline-block; vertical-align: middle; text-align: center;}
.status-list dt {position: relative; margin-right: 10px; width: 70px; height: 70px; border-radius: 100%; background: #ebefef; text-align: center;}
.status-list dt span {position: absolute; width: 100%; margin: 0; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);color: #666; font-size: 16px; line-height: 1.2;}
.status-list dt span .ion {font-size: 40px;}
.status-list dd {margin-left: 20px;}
.status-list dd .number {display: block; font-size: 30px; font-weight: 500; color: #333; line-height: 30px;}
.status-list dd .s-txt {display: block; font-size: 13px; color: #999; margin-top: 10px;}
/*.green {color: #83c450 !important;}*/
/*.blueGreen {color: #2fcac6 !important;}*/
/*.red {color: #f44336 !important;}*/
/*.orange {color: #f7aa05 !important;}*/
/*.blue {color: #27aae2 !important;}*/
.status-list dd .gate-icon {display: block; width: 30px; height: 30px; background-position: 0 0; background-repeat: no-repeat; margin: 0 auto;}
.ico-gate .open {background: url(../images/icon_open.png); background-size: cover;}
.ico-gate .opening {background: url(../images/icon_opening.png); background-size: cover;}
.ico-gate .closed {background: url(../images/icon_closed.png); background-size: cover;}
.ico-gate .closing {background: url(../images/icon_closing.png); background-size: cover;}
.ico-gate .failure {background: url(../images/icon_failure.png); background-size: cover;}
.ico-gate .stop {background: url(../images/icon_stop.png); background-size: cover;}



/*!* modal *!*/
/*.modal {*/
/*  display: none; position: fixed; z-index: 10000; padding-top: 100px; left: 0; top: 20%; width: 100%; height: 100%; overflow: auto; background-color:transparent;}*/
/*.modal-content {position: relative; background-color: #fff; overflow: hidden; margin: auto; text-align: center; padding: 0; width: 20%; border-radius: 10px; box-shadow: 0 8px 10px -5px rgba(0,0,0,.14), 0 16px 24px 2px rgba(0,0,0,.098), 0 6px 30px 5px rgba(0,0,0,.084); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s;}*/
/*.modal-body {padding: 40px; font-size: 16px;}*/
/*.modal-footer {width: 100%;}*/
/*.modal-footer:after {display: table; content: ""; clear: both;}*/
/*.modal-footer .md-btn {display: inline-block; float:left; width: 50%; padding: 15px 0; font-size: 14px; background: #ebefef; color: #999;}*/
/*.modal-footer .md-primary {background: #2fcac6; color: #fff;}*/
/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}


/* progress */
.progress {display: none; position: absolute; left: 50%; top: 50%;background-color: #fff; overflow: hidden; margin: 0 0 0 -252px; text-align: center; padding: 30px; width: 30%; height:220px; border-radius: 10px; box-shadow: 0 8px 10px -5px rgba(0,0,0,.14), 0 16px 24px 2px rgba(0,0,0,.098), 0 6px 30px 5px rgba(0,0,0,.084); z-index: 10000;}
#holder {width: calc(100% - 120px); text-align: center; position: absolute; bottom: 50px; left: 50px;}
#loading {width:100%; height:6px; background-color:#ebefef; display:block; border-radius:3px;}
#loaded {height:100%; width:0; background:#2fcac6; border-radius:3px; -webkit-transition:width .5s linear; -moz-transition:width .5s linear; -o-transition:width .5s linear; transition:width .5s linear; visibility:hidden;}
#realloaded {height:100%; width:0; background:#2fcac6; border-radius:3px; margin-top:-6px; -webkit-transition:width .5s linear; -moz-transition:width .5s linear; -o-transition:width .5s linear; transition:width .5s linear;}
#progress {width:80px; height:40px; position:absolute; top:-50px; color:#fff; font-size:20px; line-height:200%; border-radius:3px; background:#2fcac6; -webkit-transition:all .1s linear; -moz-transition:all .1s linear; -o-transition:all .1s linear;
  transition:all .1s linear;}
#arrow {border-style:solid; border-color:#2fcac6 transparent transparent transparent; border-width:8px 7px 0 7px; width:0; height:0; display:block; position:absolute; top:-11px; -webkit-transition:right .1s linear; -moz-transition:right .1s linear; -o-transition:right .1s linear; transition:right .1s linear;}
p {color:#666; font-size:16px;}


/* 상세 설정 바 */
#detailSetting {width:0;}
#detailSetting .info-wrap {padding: 20px;  background: #fafafa; border-bottom: 1px solid #ddd;}
#detailSetting .info-wrap:after {content: ""; display: table;clear: both;}
#detailSetting .viewGate-wrap {padding: 20px 20px 0;}
#detailSetting .viewGate-wrap:after {content: ""; display: table;clear: both;}
#detailSetting .viewGate-wrap .btn-wrap {padding-bottom: 20px; border-bottom: 1px solid #e9e9e9;}
#detailSetting .viewGate-wrap .btn-wrap button {padding: 3px 15px; border-radius: 24px;}
#detailSetting .viewGate-wrap .btn-wrap .gate-state {color: #fff; background: #666; border: 1px solid #666; -webkit-transition: all 0.35s 0.2s ease-in;
  transition: all 0.35s 0.2s ease-in;}
#detailSetting .viewGate-wrap .btn-open, .btn-close {color: #2fcac6; background: #fff; border: 1px solid #2fcac6; margin-left: 4px; -webkit-transition: all 0.35s 0.2s ease-in; transition: all 0.35s 0.2s ease-in;}
#detailSetting .viewGate-wrap .btn-open:hover, .btn-close:hover, .btn-open.active, .btn-close.active {background: #2fcac6; color: #fff; border: 1px solid #2fcac6; -webkit-transition: all 0.35s 0.2s ease-in; transition: all 0.35s 0.2s ease-in;}
#detailSetting .viewGate-wrap .gate-area {margin-top:30px; text-align: center; position: relative;}
#detailSetting .viewGate-wrap .gate-area .ico-gate {width:50px; height: 50px; margin: 0 auto; -webkit-transition: all 0.35s 0.2s ease-in; transition: all 0.35s 0.2s ease-in;}
#detailSetting .viewGate-wrap .gate-area .btn-reload {position: absolute; right: 0; top: 0; width: 70px; height: 26px; text-align: center; line-height: 24px; background-color: #ebefef; border-radius: 26px; color: #999;}
#detailSetting .viewGate-wrap .gate-area .btn-reload:hover {background: #ddd;}
#detailSetting .viewGate-wrap .gate-wapper {position: relative; margin: 50px auto 30px; width: 182px; height: 120px; background: url(../images/door_bg.png) no-repeat 0 0;}

#detailSetting .viewGate-wrap .door {width: 81px; height: 85px; display: inline-block; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
#detailSetting .viewGate-wrap .door.left {position: absolute; left: 5px; top: 0; background: url(../images/left_door.png) no-repeat 0 0;}
#detailSetting .viewGate-wrap .door.left:before {}
#detailSetting .viewGate-wrap .door.left:after {}
#detailSetting .viewGate-wrap .door.right {position: absolute; top: 0; right: 5px; background: url(../images/right_door.png) no-repeat 0 0;}
#detailSetting .viewGate-wrap .door.right:before {}
#detailSetting .viewGate-wrap .door.right:after {}
#detailSetting .viewGate-wrap .gate-wapper:hover > .left, .gate-wapper.active > .left {
    -webkit-transform: rotateY(70deg);
    -webkit-transform-origin: 0;
    -webkit-transition: 2s;
    -moz-transform: rotateY(70deg);
    -moz-transform-origin: 0;
    -moz-transition: 2s;
    transform: rotateY(70deg);
    transform-origin: 0;
    transition: 2s;
}
#detailSetting .viewGate-wrap .gate-wapper:hover > .right, .gate-wapper.active > .right {
    -webkit-transform: rotateY(70deg);
    -webkit-transform-origin: 80px;
    -webkit-transition: 2s;
    -moz-transform: rotateY(70deg);
    -moz-transform-origin: 80px;
    -moz-transition: 2s;
    transform: rotateY(70deg);
    transform-origin: 80px;
    transition: 2s;
}


/* 상세 설정 탭 */
#detailSetting #container {position: relative; width: 100%; margin: 0 auto;}
#detailSetting ul.tabs {margin: 0; padding: 15px 5px; background: #f5f5f5; height: 95px; font-size:14px;}
#detailSetting ul.tabs li {position: relative; float: left; width: calc(33.3333% - 10px); text-align:center; cursor: pointer; height: 80px; color: #888; margin: 0 5px; padding-top:50px; overflow: hidden;}
#detailSetting ul.tabs li.active {background: #fff; border-radius: 5px 5px 0 0; color: #2fcac6;}
#detailSetting ul.tabs li:before {content: ""; display: block; position: absolute; top: 10px; left:50%; margin-left:-15px; width: 40px; height:40px; background: url(../images/icon_tab.png); background-size: 80px 120px; background-repeat: no-repeat;}
#detailSetting ul.tabs li.tab1:before {background-position: -40px 0;}
#detailSetting ul.tabs .active.tab1:before {background-position: 0 0;}
#detailSetting ul.tabs li.tab2:before {background-position: -40px -40px;}
#detailSetting ul.tabs .active.tab2:before {background-position: 0 -40px;}
#detailSetting ul.tabs li.tab3:before {background-position: -40px -80px;}
#detailSetting ul.tabs .active.tab3:before {background-position: 0 -80px;}
#detailSetting .tab_container {clear: both; float: left; width: 100%; background: #fff;}
#detailSetting .tab_content {font-size: 14px; display: none;}
#detailSetting .tab_container .tab_content .setting {position: relative; width:100%; margin:0; padding:20px;}
#detailSetting .tab_container .tab_content .setting label {display: block; color: #333; font-weight: 500;}
#detailSetting .tab_container .tab_content .setting input[type=text], select, textarea {display: inline-block; width: 100%; padding: 9px 12px; border: 1px solid #e9e9e9; border-radius: 4px; box-sizing: border-box; margin-top: 5px; margin-bottom: 16px; resize: vertical; height: 38px; vertical-align: middle;}
#detailSetting .tab_container .tab_content .setting textarea {height: auto; min-height:100px; line-height: 1.5;}
#detailSetting .tab_container .tab_content .setting .interlock {width: 50%; float: left;}
#detailSetting .tab_container .tab_content .setting .waterlevel {position: relative; width: calc(50% - 8px) !important; float: right;}
#detailSetting .unit {position: absolute; right: 35px; margin-top: 12px;}
#detailSetting .btn-save {float: right; width: 80px; height: 36px; background:#2fcac6; border-radius: 3px; color: #fff; line-height: 36px; text-align: center; margin-bottom: 20px;}


/* canvas  background*/
.canvas {height: 100vh; width: 100vw; background: url('../images/canvas_bg.jpg') no-repeat 0 0; position: relative; overflow: hidden; background-size: cover;}


/* River */
.river {position: absolute; width: calc(100% - 100px); top: 95px; left: 100px; height: calc(100vh - 95px); background: url('../images/compass.png') no-repeat 98% 97%;}
.river:after {content: ""; display: table; clear: both;}
.river .column {position: relative; float: left; width: 50%; height: calc(100vh - 95px); text-align: center;}
.river .col1 {background: url('../images/river.png') no-repeat center top; overflow: hidden;}
.river .col2 {padding-left: 50px;}
.river .col3 {padding-left: 90px;}
.river .col4 {padding-top: 30px; padding-left: 0;}
.river .col5 {padding-top: 30px; padding-left: 90px;}
.river h2 {display: inline-block; width: 100px; height: 30px; background: #142e4a; color: #fff; line-height: 30px; font-weight: normal;}
.river h2.down {position: absolute; bottom: 0; left:50%; margin-left: -50px;}
.river li {position: relative; display: block; width: 300px; height: 50px; margin:8px; padding: 0 15px; text-align: left; line-height: 46px; background: #fff; border-radius: 10px;  box-shadow: 0 5px 15px #9cbfdb; transition: opacity 0.3s ease-in-out; cursor: pointer;}
.river li:first-child {margin-top: -14px;}
.river li span {display: inline-block; vertical-align: middle;}
.river li .g-state {width: 33px; height: 33px;}
.river li .g-name {margin-left: 10px; color: #000; font-size: 17px; letter-spacing: -1px;}
.river li .g-type {position: absolute; right: 15px; top: 3px; color: rgba(20,46,74,.5); font-size: 28px;}
.river li.mt1 {margin-top:62px;}
.river li.mt2 {margin-top:124px;}
.station {position: absolute; left: 40%; width: 40px; height: 100%;}
.station2 {left:38%;}
.station .subway {width: 100%; color: #666; padding-top: 50px; position: relative; text-align: center; line-height: 1.3;}
.station .subway:before {content: ""; position: absolute; width: 40px; height: 50px; background: url('../images/icon_subway.png') no-repeat 50% 0; margin-top: -50px;}
.station .subway.saejil {position: absolute; bottom: 150px;}
.station .subway.jeungSan {position: absolute; top:48%;}
.station .subway.digital {position: absolute; bottom: 30px;}
.bridge {position: absolute; left: 50%; width: 100px; height: 100%; margin-left: -50px;}
.bridge > div {color: #142e4a; font-size: 15px; text-align: center; letter-spacing: -1px; background: linear-gradient(#adc5d8, #74a7d0); box-shadow: 0 -15px 15px -20px rgba(0, 0, 0, 0.9), 0 15px 15px -20px rgba(0, 0, 0, 0.9);}
.bridge .r-bridge {width: 100%; height: 36px; line-height: 36px; border-radius: 36px;}
.bridge .s-bridge {width: 100%; height: 75px; border-radius: 5px; padding-top: 8px;}
.bridge .s-bridge .w-height {display: block; width: 80px; height: 26px; background: #5d92c3; border-radius: 26px; color: #fff; font-size: 20px; font-weight: 500; line-height: 25px; margin: 5px auto;}
.bridge .s-bridge .w-height:after {content: "m"; display: inline-block; font-size: 13px; font-weight: normal; margin-left: 3px;}
.bridge .sh-sangga {position: absolute; top: 29%;}
.bridge .rainbow {position: absolute; top: 42%;}
.bridge .shinheung {position: absolute; bottom: 260px}
.bridge .wassan {position: absolute; top: 80px;}
.bridge .jeungsan2 {position: absolute; top:40%;}
.bridge .sun {position: absolute; bottom: 330px;}
.bridge .jeungsan3 {position: absolute; bottom: 180px;}
.bridge .jeungsan {position: absolute; bottom: 60px;}


/* Responsive */
@media screen and (max-width: 1680px) {
    .login-wrap .form-header {margin-top: 0;}
    header {left: 90px;}
    .sidenav {width: 90px;}
    .map {left: 90px; width: calc(100vw - 90px);}
    .sound {width: 50px; height: 50px;}
    .sound--icon {font-size: 45px;}
    .status-list dl {padding: 0 20px;}
    .status-list dd {margin-left: 10px;}
    .river .col2 {padding-left: 30px;}
    .river li {width:260px;}
}

@media screen and (max-width: 1600px) {
    .login-wrap .form-header h1 {font-size: 26px;}
    .form-section .form-contain .form-control {margin-bottom: 15px;}
    .form-section .info {font-size: 12px;}
    .topnav h1 {font-size: 26px;}
    .river li {margin: 15px 8px;}
    .river li.mt1 {margin-top: 80px;}
    .river li.mt2 {margin-top: 144px;}
}

@media screen and (max-width: 1440px) {
  .topnav {height: 80px;}
  .topnav h1 {font-size: 24px; padding: 20px 0 20px 20px; letter-spacing: -2px;}
  .status-list {right: 90px;}
  .status-list dt {width: 60px; height: 60px;}
  .status-list dt span {font-size: 14px;}
  .status-list dd .number {font-size: 24px;}
  .status-list dd .s-txt {margin-top: 6px;}
  .river {width: calc(100% - 90px); top: 80px; left: 90px; height: calc(100vh - 80px);}
  .river .column {height: calc(100vh - 80px);}
  .sidenav a:first-child {padding: 12px 0;}
  .river .col3 {padding-left: 60px;}
  .river .col5 {padding-top: 30px; padding-left: 60px;}
  .river li {width:220px; padding: 0 10px; margin:7px;}
  .river li.mt1 {margin-top: 65px;}
  .river li.mt2 {margin-top: 120px;}
  .river li .g-state {width: 30px; height: 30px;}
  .river li .g-name {margin-left: 5px; font-size: 14px; letter-spacing: -2px;}
  .river li .g-type {right: 10px; top: 6px; font-size: 24px;}
  .station2 {left: 35%;}
  .bridge {width: 80px; margin-left: -40px;}
  .bridge > div {font-size: 14px;}
  .bridge .r-bridge {height: 30px; line-height: 30px; border-radius: 30px;}
  .bridge .s-bridge {height: 70px;}
  .bridge .s-bridge .w-height {width: 64px; height: 24px; border-radius: 24px; font-size: 17px; line-height: 23px;}
}

@media screen and (max-width: 1280px) {
  .sidenav ul {bottom: 10px;}
  .status-list dl {padding: 0 15px;}
  .status-list dd {margin-left: 5px;}
  .station {left: 43%;}
  .station2 {left: 38%;}
}