@charset"utf-8";
/*!------------------------------------------------------------ *
 * RemoteCall5.x counter common css
 * Last Updated: 2013.03.15
 * Author: Jeong Heeju
 * Copyright© RSUPPORT CO., LTD. ALL RIGHTS RESERVED.
 * http://rsupport.com/Products/RemoteCall
 * ------------------------------------------------------------ */
/* ************************
 * buttons
 ************************* */
/* gray button */
#relay-default-buttons .button,
.counter-step .button,
.counter-wrap .button{
  background-position: 0 -140px;
}
#relay-default-buttons .button span,
.counter-step .button span,
.counter-wrap .button span{
  background-position: right -140px;
}
#relay-default-buttons .button:hover,
.counter-step .button:hover,
.counter-wrap .button:hover{
  background-position: 0 -175px;
}
#relay-default-buttons .button span:hover,
.counter-step .button span:hover,
.counter-wrap .button span:hover{
  background-position: right -175px;
}
/* color button */
.counter-form .form-button .button,
.button-directconnect,
.counter-button .button{
  background-position: 0 -280px;
}
.counter-form .form-button .button span,
.button-directconnect span,
.counter-button .button span{
  background-position: right -280px;
}
.counter-form .form-button .button:hover,
.button-directconnect:hover,
.counter-button .button:hover{
  background-position: 0 -315px;
}
.counter-form .form-button .button:hover span,
.button-directconnect:hover span,
.counter-button .button:hover span{
  background-position: right -315px;
}
.counter-form .form-button .button button, .counter-form .form-button .button a,
.button-directconnect button, .button-directconnect a,
.counter-button .button button, .counter-button .button a{
  color: #FFF !important;
}

/* *************************************
 * counter gate
 * ************************************* */
#relay-header{
  height: 92px;
  padding-top: 31px;
}

#relay-header.is-reservation{
  padding-top: 64px;
}

#direct-connect-wrap{
  width: 100%;
  padding: 3px 0;
  position: absolute;
  top: 30px;
  background-color: #EFE8E2;
  border-width: 1px 0;
  border-style: solid;
  border-color: #EADDD5;
  z-index: 10;
}
#direct-connect-wrap form{
  padding-right: 6px;
}

.color-blue #direct-connect-wrap,
.color-skyblue #direct-connect-wrap{
  background-color: #DBE5EE;
  border-color: #C2D2DF;
}
.color-brown #direct-connect-wrap{
  background-color: #EFE8E2;
  border-bottom-color: #EADDD5;
}
.color-darkred #direct-connect-wrap,
.color-red #direct-connect-wrap{
  background-color: #F8E5E9;
  border-color: #EED1D6;
}
.color-green #direct-connect-wrap,
.color-yellowgreen #direct-connect-wrap{
  background-color: #E2F6DA;
  border-color: #C9E3BE;
}
.color-orange #direct-connect-wrap{
  background-color: #F4E5CE;
  border-color: #EADCC2;
}
.color-orangered #direct-connect-wrap{
  background-color: #F9E6DF;
  border-color: #F3D0BD;
}
.color-blue #direct-connect-wrap h3,
.color-skyblue #direct-connect-wrap h3{
  color: #5794BC;
}
.color-brown #direct-connect-wrap h3{
  color: #B17144;
}
.color-darkred #direct-connect-wrap h3,
.color-red #direct-connect-wrap h3{
  color: #BA4359;
}
.color-green #direct-connect-wrap h3,
.color-yellowgreen #direct-connect-wrap h3{
  color: #499932;
}
.color-orange #direct-connect-wrap h3{
  color: #BE843D;
}
.color-orangered #direct-connect-wrap h3{
  color: #D47309;
}


#direct-connect-wrap .relay-layout{
  background-color: transparent;
}

#direct-connect-wrap form{
  white-space: nowrap;
  text-align: right;
}

#direct-connect-wrap h3{
  width: auto; max-width:658px;
  display: inline-block;
  *margin-right: 4px;
  line-height: 13px;
  position: relative; top:3px;
  overflow: hidden; text-overflow:ellipsis;
  *vertical-align: middle;
}

#direct-connect-wrap input{
  width: 64px;
  height: 24px;
  padding: 0 10px;
  display: inline-block;
  line-height: 24px;
  background-color: #FFFFFA;
  *vertical-align: middle;
  border-width: 1px;
  border-style: solid;
}

.color-blue #direct-connect-wrap input,
.color-skyblue #direct-connect-wrap input{
  border-color: #bed4e0;
}
.color-brown #direct-connect-wrap input{
  border-color: #eaded6;
}
.color-red #direct-connect-wrap input,
.color-darkred #direct-connect-wrap input{
  border-color: #eed2d8;
}
.color-green #direct-connect-wrap input{
  border-color: #c9e4bf;
}
.color-yellowgreen #direct-connect-wrap input{
  border-color: #d6dcb4;
}
.color-orange #direct-connect-wrap input{
  border-color: #e5d6b9;
}
.color-orangered #direct-connect-wrap input{
  border-color: #e8c5b2;
}

.color-blue #direct-connect-wrap .placeholder,
.color-skyblue #direct-connect-wrap .placeholder{
  color: #94acbe !important;
}
.color-brown #direct-connect-wrap .placeholder{
  color: #d7bdab !important;
}
.color-red #direct-connect-wrap .placeholder,
.color-darkred #direct-connect-wrap .placeholder{
  color: #be919a !important;
}
.color-green #direct-connect-wrap .placeholder{
  color: #73a262 !important;
}
.color-yellowgreen #direct-connect-wrap .placeholder{
  color: #73a262 !important;
}
.color-orange #direct-connect-wrap .placeholder{
  color: #d9b471 !important;
}
.color-orangered #direct-connect-wrap .placeholder{
  color: #d4a690 !important;
}

#direct-connect-wrap #access-code{
  *margin-right: 4px !important;
}

#direct-connect-wrap .button{
  *vertical-align: middle;
}

#relay-default-buttons{
  min-height: 4px;
  _height: 4px;
  padding-bottom: 4px;
}
#relay-default-buttons ul{
  padding-right: 6px;
  text-align: right;
  display: block;
}
#relay-default-buttons li{
   display: inline;
}
#relay-default-buttons li .button{
   margin-left: 6px;
}

#counters-wrap .section-container{
  min-height: 184px;
  height: auto !important;
  height: 184px;
  position: relative;
  background-color: #fff;
}

#counters-wrap .section-container .inner-wrap{
  /* width: 822px; */
}

#counters-wrap section .section-container{
  min-height: 0;
  height: auto !important;
  height: 0;
}

#counters{
  padding-bottom: 60px;
  text-align: left;
  overflow: visible; position: relative;
}

#counters li{
  width: 274px;
  float: left;
  display: inline;
  position: relative;
  overflow: hidden;
}

#counters li.half{
/*  width: 411px;*/
}

#counters li.full{
/*  width: 822px;*/
}
#counters li.empty-counter{
  opacity: 0.66; filter: alpha(opacity=66);
}
#counter-template, #empty-counter{
  display: none !important;
}
#counters .section-container .inner-wrap{
  height: 262px;
}

.counter-wrap{
  height: 288px;
  margin-bottom: 4px;
  position: relative;
  color: #616161;
}
.counter-wrap .section-roof,
.counter-wrap .section-roof .inner-wrap,
.counter-wrap .section-floor,
.counter-wrap .section-floor .inner-wrap{
  height: 14px;
  display: block;
  background-color: #fff;
  background-image: url(../images/relay/box-white-gradation-round-corner.png);
  background-repeat: no-repeat;
}
.counter-wrap .section-container,
.counter-wrap .section-container .inner-wrap{
  background-color: #fff;
  background-image: url(../images/relay/box-white-gradation-side-border.png);
  background-repeat: repeat-y;
  text-align: left !important;
  position: relative;
}

.counter-wrap .section-roof,
.counter-wrap .section-container,
.counter-wrap .section-floor{
  padding-left: 13px;
  background-position: 0 0;
}

.counter-wrap .inner-wrap{
  width: auto !important;
  padding-right: 13px;
  background-position: right 0;
  position: relative;
}
.counter-wrap .section-floor{
  background-position: 0 bottom;
}
.counter-wrap .section-floor .inner-wrap{
  background-position: right bottom;
}

.counter-wrap .image-wrap{
  min-height: 20px; _height: 20px;
}
.counter-wrap .image-wrap .image{
  width: 240px;
  height: 107px;
  overflow: hidden;
}
.counter-wrap .image-wrap .image img{
  width: 100%;
}
.counter-wrap .image-wrap{
  padding: 3px 3px 0 !important; position: relative; background-color: #FFF;
}
.counter-wrap .image-wrap .image-corner-left-top,
.counter-wrap .image-wrap .image-corner-right-top,
.counter-wrap .image-wrap .image-corner-left-bottom,
.counter-wrap .image-wrap .image-corner-right-bottom{
  width: 10px; height: 10px; position: absolute; overflow: hidden; z-index: 2;
  background-repeat: no-repeat; background-image: url(../images/relay/image-corner.png); _background-image: url(../images/relay/image-corner.gif);
}
.image-wrap .image-corner-left-top{
  top: 0; left:0;
  background-position: 0 0;
}
.image-wrap .image-corner-right-top{
  top: 0; right:0;
  background-position: -10px 0;
}
.image-wrap .image-corner-left-bottom,
.image-wrap .image-corner-right-bottom{
  position: relative !important; display: inline; margin-top: -7px;
}
.image-wrap .image-corner-left-bottom{
  float: left; margin-left: -3px;
  background-position: 0 -10px;
}
.image-wrap .image-corner-right-bottom{
  float: right; margin-right: -3px;
  background-position: -10px -10px;
}
.image-wrap .image{
  padding: 0; border: 1px solid #E5E5E5;
  overflow: hidden; position: relative; z-index: 1;
  background-color: #fff;
}
.image-wrap .image img{
  margin: 0; padding: 0; border: 0; display: block;
}
.counter-infomation, .counter-button{
  position: relative;
  height: 26px;
  padding: 7px 6px 5px;
}
.counter-infomation{
  height: 100px;
  overflow: hidden;
}
.counter-infomation h3{
  height: 16px;
  padding-bottom: 6px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.counter-infomation .counter-status{
  height: 15px;
  line-height: 15px;
  padding-bottom: 4px;
  display: block;
}
.counter-infomation p{
  padding-left: 1px;
  line-height: 19px;
  overflow: hidden;
}
.counter-infomation .counter-detail{
  height: 38px;
  padding-bottom: 7px;
}
.counter-infomation .counter-time{
  height: 19px;
}


/* ***************************
 * layout
 * *************************** */
/* floating wraps */
#relay-default-buttons, #counters, .image-wrap, #relay-footer .relay-layout, .counter-form .form-container .inner-wrap
/*, .section-container .inner-wrap*/{
  position:relative; float:none; overflow:visible; *zoom:1;
}
#relay-default-buttons:after, #counters:after, .image-wrap:after, #relay-footer .relay-layout:after, .counter-form .form-container .inner-wrap:after
/*, .section-container .inner-wrap:after*/{
  content:"";display:block; clear:both; height:0; visibility:hidden;
}

/* layout wrap */
.relay-layout{
  width: 822px;
  margin: 0 auto;
  position: relative;
  background-color: #fff;
}

.section-roof, .section-floor{
  overflow: hidden; position: relative; display: none;
}

/* header */
#relay-header{
  padding-top: 31px; position: relative;
  background-color: #fff;
  overflow: hidden;
}
#relay-logo{
  height: 46px;
  padding: 3px 0 0 15px;
  position: absolute;
  top: 0;
  left: 0;
}
#relay-logo img {
  max-height: 46px;
}
#relay-title{
  height: 46px;
  padding-top: 20px;
  text-align: center;
  overflow: hidden;
}

#relay-privacy-policy{
  padding-bottom:12px; text-align:center;
}
#relay-privacy-policy #privacy-policy{
  margin:0; color:#3d6e8e;
}

/* footer */
#relay-footer{
  padding-top: 12px;
  padding-bottom: 20px;
  border-top: 1px solid #E5E5E5;
  font-weight: bold;
  color: #C0C0C0;
}
#relay-footer p{
  line-height: 1.5;
}
#relay-footer p.footer-announce{
  width: 642px;
  float: left;
  display: inline;
}
#relay-footer .footer-powered{
  float: right;
  display: inline;
}


/* ***************************
 * direct input popup
 * *************************** */
 .direct-step{
   display: none;
 }

.direct-step .step-contents-wrap{
  height: 150px;
  padding: 10px 0;
  color: #414141;
  position:relative;
  float:none;
  overflow:visible;
 *zoom:1;
}
.direct-step .step-contents-wrap:after{
  content: "";
  display:block;
  clear:both;
  height:0;
  visibility:hidden;
}

#relay-step-agreement .button-agree,
#relay-step-password .button-submit-password,
#relay-step-pending .button-direct-download,
#relay-step-reconnect .button-reconnect-download{
  background-position: 0 -280px;
}
#relay-step-agreement .button-agree span,
#relay-step-password .button-submit-password span,
#relay-step-pending .button-direct-download span,
#relay-step-reconnect .button-reconnect-download span{
  background-position: right -280px;
}
#relay-step-agreement .button-agree:hover,
#relay-step-password .button-submit-password:hover,
#relay-step-pending .button-direct-download:hover,
#relay-step-reconnect .button-reconnect-download:hover{
  background-position: 0 -315px;
}
#relay-step-agreement .button-agree:hover span,
#relay-step-password .button-submit-password:hover span,
#relay-step-pending .button-direct-download:hover span,
#relay-step-reconnect .button-reconnect-download:hover span{
  background-position: right -315px;
}
#relay-step-agreement .button-agree *,
#relay-step-password .button-submit-password *,
#relay-step-pending .button-direct-download *,
#relay-step-reconnect .button-reconnect-download *{
  color: #FFF !important;
}

.direct-step .step-contents-buttons{
  height: 26px;
  border-top: 1px solid #e3e3e3;
  padding-top: 10px;
  text-align: center;
  clear: both;
  position: relative;
}

.direct-step .step-contents-buttons .button{
  margin: 0 20px 0 3px;
}


/* agreement */
.direct-step .agreement-wrap{
  width: 310px;
  margin-right: 20px;
  float: left;
  display: inline;
}

.direct-step .agreement-wrap.alone{
  width: 660px;
  __float: none;
  margin-top: 10px;
  display: block;
}

#control-agreement-wrap{
  display: block !important;
}

#record-agreement-wrap{
  margin-right: 0;
  /*display: none;*/
}
#record-notice{
  padding-left: 340px;
  clear: both;
  display: none;
}

#record-notice.alone{
  padding-left: 0;
}

.direct-step .agreement-wrap .check-wrap{
  font-weight: bold;
}


/* pincode */
.direct-step .input-accesspassword{
  padding-top: 30px;
  display: block;
  text-align: center;
}

.direct-step .input-accesspassword .text{
  width: 140px;
  border: 2px solid #454545;
  font-weight: bold;
  text-align: center;
}

/* download */
.download-description{
  padding: 10px 0;
}

.program-information{
  padding: 13px;
  margin-top: 10px;
  border: 1px solid #DDD;
  border-radius: 5px;
  background: #F9FAF2;
  color: #535353;
}