/* common */
:root {
  /* Contants */
  --subjectTextColor: #820000;
  --backgroundColor: #ffffff;
  --emphasisBackgroundColor: #fbdcd8;
  --normalTextColor: #ba1c29;
}

@-webkit-keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.5; }
  to { opacity: 1.0; }
}

.text-usable {
  color: limegreen;
  font-weight: bold;
}

.text-unusable {
  color: red;
}

.expFade {
  animation: fade 1000ms infinite;
  -webkit-animation: fade 1000ms infinite;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../../ThirdParty/MaterialIcons/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../../ThirdParty/MaterialIcons/MaterialIcons-Regular.woff2) format('woff2'),
    url(../../ThirdParty/MaterialIcons/MaterialIcons-Regular.woff) format('woff'),
    url(../../ThirdParty/MaterialIcons/MaterialIcons-Regular.ttf) format('truetype');
}

body {
  font-size: 3.4vw;
  overflow-y: auto;
}

.btn {
  font-size: 3.7vw;
  padding: 1.2vw 2.4vw;
  border-radius: 1vw;
  border-width: 0.3vw;
}

.btn-sm {
  font-size: 3.4vw;
  padding: 1vw 2vw;
  border-radius: 1vw;
  border-width: 0.3vw;
}

.form-control {
  font-size: 3.2vw;
  height: 7vw;
}
.display-flex {
  display: flex;
}

.paddingTopBottom {
  padding: 1.2vw 0;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 8vw;  /* Preferred icon size */
  text-align: center;
  color: var(--normalTextColor);
  display: block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

.main-container {
  padding:2.4vw;
}

#modalMainContent, #modal2MainContent {
  display: flex;
  justify-content: center;
}

#modalMainContent > img {
  width:100%;
  height:auto;
}

.modal-dialog {
  max-height: 100%;
  overflow-y: scroll;
}

/*
  header.php
*/
#app {
  width: 100%;
  position: absolute;
  overflow-y: scroll;
}

#app::-webkit-scrollbar{
  display: none;
}

.title-header {
  position: fixed;
  top:0;
  width: 100%;
  border-bottom-width: 0.6vw;
  border-bottom-style: solid;
  border-bottom-color: var(--subjectTextColor);
  z-index: 111;
}

.title-bg {
  height: 15.7vw;

  padding : 2.5vw;
  background-color: var(--backgroundColor);
  
  display: flex;
  flex-direction: row;
  justify-self: start;
  justify-content: space-between;
  align-items: center;
}

.title_logo_img {
  width : 40%;
}

.page-title-span{
  font-size: 6vw;
  color: var(--normalTextColor);
}

.title-icon {
  display: flex;
  font-size: 7vw;
  color: var(--normalTextColor);
}
.flex-start {
  justify-content: flex-start;
}
.flex-end {
  justify-content: flex-end;
}
.row {
  margin :0;
}

/*
  menu.php
*/
#sidebar {
  width: 60%;
  height: 100%;
  position: fixed;
  top: 0;
  left: -100%;
  background-color: var(--emphasisBackgroundColor);
  z-index: 113;
}

#screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url('../../Resource/Image/base_bg.png') repeat;
  z-index: 112;
}

.sidebar-top {
  padding : 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: whitesmoke;
}

.license {
  width: 60%;
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: whitesmoke;
  font-size: 4.3vw;
  font-weight: 700;
  color: var(--normalTextColor);
  padding: 4vw;
  position: fixed;
  bottom: 0;
}

#userNameDiv {
  background-color: var(--subjectTextColor);
  padding : 3.6vw;
}

#userNameDiv > p {
  font-size: 4vw;
  color: var(--backgroundColor);
  margin:0;
}

#userNameDiv > p > span {
  font-weight: bold;
  font-size:5vw;
}

.sidebar-menu {
  display:flex;
  align-items: center;
  padding: 2.4vw;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: whitesmoke;
}

.sidebar-menu > span {
  font-size: 4.8vw;
  font-weight: 700;
  color: var(--normalTextColor);
  padding: 0 1.2vw;
}


/*
  footer.php
*/
.main-footer {
  position: fixed;
  bottom: 0;
  z-index: 111;
  width: 100%;
  text-align: center;
  background-color: var(--backgroundColor);
  border-top-width: 0.6vw;
  border-top-color: var(--subjectTextColor);
  border-top-style: solid;
}

.bottom_menu {
  display: flex;
  flex-flow: row;
  justify-content: space-around;

}

.bottom_icon {
  text-align: center;
  width: 25%;
  padding: 3vw 0;
}


.bottom_icon span {
  color: var(--normalTextColor);
  font-weight: 500;
  font-size: 3vw;
}

.bottom_selected {
  background-color: var(--emphasisBackgroundColor);
}

.qr-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4.5vw;
}

.qr-footer > span {
  font-size : 4.8vw;
  padding-left: 2.4vw;
}

/* login.php */
#login_main_div{
  padding: 0 9.6vw;
}

#login_main_div > div > img {
  width:75%;
  margin-bottom: 4.8vw;
}

#loginForm {
  padding: 4.8vw 0;
}

#loginBtnDiv > div {
  padding:1.2vw;
}

#loginBtnDiv > div > button {
  width: 100%;
}



/* signUp.php */
#signUpContainer {
  padding: 2.4vw;
}

#signUpContainer > .panel {
  margin-bottom:0;
}

.agreeDiv {
  padding: 2.4vw 0;
}

.agreeDiv > iframe {
  width: 100%;
}

.iosAgreeDiv {
  width: 100%;
  height: 40vw;
  border-style: solid;
  border-width: thin;
  border-color: var(--subjectTextColor);
  overflow-y: scroll;
  padding: 3vw;
  
}

.agreeDiv > embed {
  width: 100%;
  border-style: solid;
  border-width: thin;
  border-color: var(--subjectTextColor);
}

.agreeDiv > div {
  font-size : 4vw;
}

#memInfoContainer {
  padding: 2.4vw;
}

#memInfoContainer > .row {
  padding: 1.2vw 0;
  display: flex;
  align-items: center;
}

.signUpCol {
  padding: 0 1.2vw;
}

#memInfoContainer > .row > .col-xs-3 > span {
  font-size: 3.6vw;
  color: var(--subjectTextColor);
  font-weight: bold;
}

#memInfoContainer > .row > .signUpCol > .form-control {
  border-radius: unset;
  background-color: aliceblue;
}

#memInfoContainer > .row > .signUpEmailContainer > .form-control {
  width: 50%;
  padding: 0 1.2vw;
}

.signUpEmailContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
}

/* base.php */
.base-search {
  display: flex;
  background-color: var(--emphasisBackgroundColor);
}
.base-search > div {
  padding-top: 3vw;
  padding-bottom: 3vw;
}

#chargerSearchBtn {
  padding-left: 1vw
}

#chargerSearchBtn > div {
  font-size: 4.5vw;
}

#station-range {
  background-color: dimgrey;
  justify-content: center;
}

#station-range > p {
  font-size: 3.6vw;
  color: white;
  margin: 0;
  padding: 2.4vw;
}

.station-div, .notice-div {
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: dimgrey;
  padding: 1vw 0;
  background-color: whitesmoke;
}

.station-div > div > p {
  margin: 0 0 0.4vw 0;
}

.station-div > div > p > span{
  font-size: 4vw;
}

.stationNameRow {
  display: block;
}

.station_name {
  font-size: 4.5vw;
  font-weight: 900;
  color: var(--normalTextColor);
}

.connIcon {
  width: 15vw;
  padding: 0 1vw;
}

.baseStationStatusSpan {
  font-size: 4vw;
}


/* myPage.php cashInfo.php & qr.php(cardRegiDiv 모달 관련부분 공통 사용) */
.cardRegiDiv {
  width: 100%;
}

.cardContainer {
  padding: 2.4vw;
  display: flex;
  justify-content: center;
}

.cardRegiFormRow {
  width: 100%;
  display: flex;
  align-items: center;
  padding : 1.2vw 0;
}

.cardRegiFormRow > .col-xs-3, .cardRegiFormRow > .col-xs-4{
  padding: 0 1vw;
}

.cardNumberDiv {
  display: flex;
  justify-content: space-between;
  padding: 0 1.2vw;
}

.cardNormalDiv {
padding: 0 1.2vw;
}

.card-input {
  width: 14vw;
  display: inline;
  padding: 1vw 2vw;
}

#birth {
  width: 17vw;
}

.card {
  padding : 5vw;
  width: 72vw;
  height: 40vw;
  background-color: aliceblue;
  border-style: solid;
  border-width: thin;
  border-color: var(--subjectTextColor);
  border-radius: 3.5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
}

.cardRegiCheckBoxConatiner {
  padding: 1.2vw 0 2.4vw 0;
}

.allCheckContainer {
  margin-top: 2.4vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 4.5vw;
}

#allCheck {
  width: 4.5vw;
  height: 4.5vw;
  margin-right: 1.2vw;
}

.mini-card-row {
  margin:0;
  padding: 1.2vw 2.4vw;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mini-card-regi {
  width: 40vw;
  height: 22.2vw;
  border-radius: 4vw;
  border-style: solid;
  border-width: thin;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mini-card {
  background-color: var(--backgroundColor);
  width: 40vw;
  height: 22.2vw;
  padding: 4vw 0;
  border-radius: 3vw;
  border-style: solid;
  border-width: thin;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

}

#rfCardRegBtn {
  width : 150px;
  height: 70px;
  font-size: 17px;
  font-weight: 600;
  color: var(--normalTextColor);
}

.roamCard {
  background-image: url('/Resource/Image/roamCardBackground.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mainRoamCard {
  justify-content: flex-end;
}

#roamCardNumber {
  font-size: 4.5vw;
  font-weight: bold;
  color: var(--normalTextColor);
}

#roamCompanyName {
  font-size: 5vw;
  color: var(--subjectTextColor);
}

.autoPaySelectDiv {
  margin-top: 2vw;
}

.autoPaySelectDiv > .autoAgreeBtnRow {
  padding: 1vw 0;
}

.autoPaySelectDiv > .autoAgreeBtnRow > .col-xs-6 {
  padding: 0 1vw;
}

.myform {
  padding-top: 3vw;
  margin-bottom: 4.8vw;
}

.myform-group {
  margin-bottom: 2vw;
  display: flex;
  justify-content: start;
}

.align-item-center {
  display: flex;
  align-items: center;
}

.myform-group > label {
  text-align: right;
  margin: 0;
  padding: 0 1vw;
  font-size: 3.5vw;
}

.myform-group > div {
  padding-right: 4.5vw;
}

.form-horizontal .form-group {
  margin-left: 0;
  margin-right: 0;
}  

.non-form-group {
  border-style: solid;
  border-width: thin;
}

/* qr.php */
#qr_explain {
  background-color: whitesmoke;
  text-align: center;
  padding: 4.8vw 0 2.4vw 0;
}

#qr_explain > p {
  font-weight: bold;
  font-size: 4vw;
  color: var(--normalTextColor);
}

#qr_form {
  margin-bottom: 0;
}
#store-link {
  padding: 6vw 3.6vw 0 3.6vw;
  text-align: center;
  
}

#store-link > div {
  padding: 4.8vw 2.4vw;
  background-color: whitesmoke;
  text-align: center;
  border-style: solid;
  border-width: thin;
  border-color: var(--normalTextColor);
  border-radius: 1.5vw;
}

#store-link > div > p {
  font-size: 4vw;
  font-weight: 500;
  color: var(--normalTextColor);
  margin: 0 0 1.5vw 0;
}

#store-link > div > div {
  padding-top: 2.4vw;
}

#store-link > div > div > div {
  padding: 1.5vw;
}

#store-link > div > div > div > img {
  width: 100%;
}

/* brokenRegi.php */

#broken_form_container {
  padding: 3.6vw;
}

#broken_form_div {
  background-color: whitesmoke;
  border-style: solid;
  border-width: thin;
  border-color: var(--normalTextColor);
  border-radius: 1.5vw;
  padding: 4.8vw 2.4vw ;
}

.broken_btn_div {
  padding-top : 4.8vw;
}

/* favStatin.php */
.favTitle {
  font-size : 4.5vw;
  font-weight: bold;
  color: var(--subjectTextColor);
}

.favStationContainer {
  padding-left: 2.4vw;
  padding-right: 2.4vw;
  padding-top: 1.2vw;
}

.favStationDiv {
  margin: 1.2vw 0 1.2vw 0;
  padding: 1.2vw;
  border-style: solid;
  border-width: thin;
  border-color: var(--normalTextColor);
  border-radius: 1.2vw;
  background-color: whitesmoke;

}

.favStationDiv > div {
  padding: 1.2vw 0;
}

.favStationDiv > div > .col-xs-3 {
  padding: 0 1.2vw;
  
}

.favStationDiv > div > .col-xs-12 {
  padding: 0 1.2vw;
}

.favStationDiv > div > div > span {
  font-size: 4vw;
}

.subjectSpan {
  color: var(--subjectTextColor);
  font-weight: bold;
}

#detailLink {
  border-style: hidden;
  border-radius: 0.8vw;
  background-color: var(--emphasisBackgroundColor);
  padding: 0.5vw 0;
  margin: 0.8vw 0;
}

#detailLink > span {
  font-size: 4vw;
  font-weight: 600;
}

/* searchStation.php */
.searchFormDiv {
  padding-top: 2.4vw;
}

.searchFormDiv > .row {
  padding: 0.5vw 0;
  display: flex;
  align-items: center;
}

.searchFormDiv > .row > .col-xs-3 > span {
  font-size: 4vw;
  color: var(--subjectTextColor);
  font-weight: bold;
}

.searchFormDiv > .row > .col-xs-9 > .form-control {
  border-radius: unset;
  background-color: aliceblue;
  height: 7vw;
}

.searchBtn {
  width: 100%;
  background-color: var(--emphasisBackgroundColor);
  padding:1.2vw;
}

.searchBtn > span {
  color: var(--normalTextColor);
  font-size: 3.9vw;
  font-weight: 600;
}

.searchBtnLeft {
  padding-top: 1.2vw;
  padding-right: 0.5vw;
}

.searchBtnRight {
  padding-top: 1.2vw;
  padding-left: 0.5vw;
}

#resultTextDiv {
  border-top-style: solid;
  border-top-width: thin;
  border-top-color: var(--emphasisBackgroundColor);
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: var(--emphasisBackgroundColor);
  justify-content: center;
  background-color: aliceblue;
  margin-top: 1.2vw;
}

.searchListDiv {
  padding: 1.2vw 0;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: var(--emphasisBackgroundColor);
}

.searchListDiv {
  padding: 2.4vw 0;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: var(--emphasisBackgroundColor);
  display: flex;
  align-items: center;
  background-color: aliceblue;
}

.searchListDiv > .col-xs-10 {
  padding: 0 2.4vw;
}

.searchListDiv > .col-xs-10 > .row {
  margin-bottom: 1.2vw;

}

.searchListDiv > .col-xs-2 {
  padding: 0 1.2vw;
}

.searchListSName {
  font-size : 4.8vw;
  font-weight: 700;
  color: var(--subjectTextColor);
}

.searchListNText {
  font-size: 4vw;
  color: var(--normalTextColor);
}

.listBtnSqure {
  position: relative;
  width:100%;
  padding-bottom:100%;
}

.listBtnSqure > div {
  position: absolute;
  padding: 1.7vw 0.8vw 0.8vw 0.8vw;
  width: 100%;
  height: 100%;
  background-color: var(--backgroundColor);
  text-align: center;
  border-right-style: solid;
  border-right-width: medium;
  border-right-color: white;
  border-bottom-style: solid;
  border-bottom-width: medium;
  border-bottom-color: white;
  display:flex;
  justify-content:center;
  flex-direction: column;
  align-items:center;
}

.listBtnSqure > div > span {
  display:block;
  color: var(--normalTextColor);
  font-weight: 500;
}

.listBtnSqure > div > .glyphicon {
  font-size:4.8vw;
  margin-bottom: 0.8vw;
}

#daumMapBlock {
  width: 100%;
}

#daumMapBlock *{
  box-sizing:initial;
}

.markerInfo {
  width: 42vw;
  padding : 3vw;
}

.markerInfo > div {
  display:block;
}

.markerInfo > .markerName {
  color: var(--subjectTextColor);
  font-weight: 700;
}

.markerInfo > .markerUsable {
  color: green;
  font-weight: 600;
}

.markerInfo > .markerUsableZero {
  color: red;
  font-weight: 600;
}


/* cashInfo.php cashBuy.php useHistory.php*/
.cashInfoDiv {
  padding: 2vw;
  background-color: whitesmoke;
  border-style: solid;
  border-width: thin;
  border-color: var(--subjectTextColor);
  border-radius: 1.5vw;
}

.cashInfoDiv > .row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.subInfoDiv {
  padding: 0 2.4vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sendCashModalRow {
  padding: 2vw 0;
  display: flex;
  align-items: center;
}

.sendCashModalRow > .col-xs-8 {
  padding : 0 2vw;
}

.amountForm {
  padding: 2.4vw 0;
}

.refundForm {
  padding-top: 1.2vw;
}

.cashTitle {
  font-size: 5vw;
  color: var(--subjectTextColor);
  font-weight: bold;
  margin-bottom: 0.5vh;
}

.cashTitle > span {
  font-size: 4vw;
  color: var(--subjectTextColor);
  font-weight: bold;
  margin-bottom: 0.5vh;
}

.cashAmt {
  font-size: 5vw;
  color: var(--normalTextColor);
  font-weight: 600;
  margin-bottom: 0.5vh;
}

.cashAmt > span{
  font-size: 5vw;
  color: var(--normalTextColor);
  font-weight: 600;
  margin-bottom: 0.5vh;
}

.historyInfo > span {
  font-size : 3.5vw;
}

.panelDiv {
  margin: 1.2vw 0;
  border-style: solid;
  border-width: thin;
  border-color: var(--subjectTextColor);
  border-radius: 1.2vw;
}

.panelDiv > .panel-heading {
  padding: 2vw 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panelDiv > .panel-heading > div {
  margin: 0;
  font-size: 4vw;
}

.panelDiv > .panel-body {
  padding: 2vw;
  display: none;
}

.myPagePanel > .panel-body > .row { /* for myPage.php*/
  padding : 1.2vw 0;
  display: flex;
  align-items: center;
}

.myPagePanel > .panel-body > .row > .col-xs-4 { /* for myPage.php*/
  font-weight: bold;
  color: var(--subjectTextColor);
}

.myPagePanel > .panel-body > .row > .text-left { /* for myPage.php*/
  padding : 0 2vw;
}

.pwChangeLabel > span {
  font-size: 4.2vw;
  font-weight: bold;
  color: var(--subjectTextColor);
}

.myPagePanel > .panel-body > .row > .text-left > span{ /* for myPage.php*/
  font-size: 4.2vw;
}

.cashSearchDiv {
  display: flex;
  align-items: center;
  padding-bottom: 2.4vw;
}

.cashSearchDiv > div {
  padding:0;
  text-align: center;
}

.cashSearchDiv > .col-xs-5 {
  padding-right: 1.2vw;
  
}

.cashSearchDiv > .col-xs-5 > .form-control {
  line-height: unset;
}

.cashSearchResultTable {
  margin-bottom: 0;
}

.cashSearchResultTable > tbody > tr > th {
  padding: 1.2vw;
  background-color: var(--subjectTextColor);
  color: white;
  text-align: center;
  vertical-align: middle;
  font-size: 3.4vw;
}

.cashSearchResultTable > tbody > tr > td {
  padding: 1.2vw;
  background-color: white;
  color: #000000;
  text-align: center;
  vertical-align: middle;
  font-size: 3.4vw;
}

.cashBtn {
  border-color: var(--normalTextColor);
  border-width: thin;
  background-color: var(--backgroundColor);
  font-size: 3.7vw;
}

#cashBuyExplain {
  justify-content: start;
}

#cashBuyExplain > ul {
  padding-inline-start: 7vw;
  margin-bottom: 0;
}

#cashBuyExplain > ul > li {
  font-size: 4vw;
  padding: 1.2vw 0;
}

/* stationInfo.php chargerInfo.php */
.csInfoDiv > table > tbody > tr > th{
  background-color: var(--backgroundColor);
  text-align: center;
  font-size: 3.7vw;
  vertical-align: middle;
}

.csInfoDiv > table > tbody > tr >  td{
  background-color: aliceblue;
  text-align: center;
  font-size: 3.7vw;
  vertical-align: middle;
}

.csInfoDiv > .row {
  padding: 2.4vw 0;
  display: flex;
  align-items: center;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: var(--emphasisBackgroundColor);
}

.csInfoDiv > .row > .col-xs-4 > span {
  font-size: 4vw;
  color: var(--subjectTextColor);
  font-weight: bold;
}

.csInfoDiv > .row > .col-xs-8 > span {
  font-size: 4vw;
}

/* chargerInfo.php */
.thumbnailRow {
  padding :0;
  display: flex;
  align-items: center;
}

.thumbnail-wrapper {
  width: 25%;
}

.thumbnailCustom {
  display: flex;
  justify-content: center;
  height: 25vw;
  object-fit: contain;
  margin-bottom: 0;
  padding: 0.6vw;
  border-radius: 0;
  
  border-style: solid;
  border-width: thin;
  border-color: var(--emphasisBackgroundColor);
}

.thumbnailCustom > img{
  max-width: 95%;
  max-height: 95%;
  width:auto;
  height:auto;
}

#chargerEmphasis {
  font-size:5vw; 
  font-weight: bold; 
  padding: 2.4vw 0; 
  background-color: var(--backgroundColor);
  border-bottom-style: solid;
  border-bottom-width: 0.5vw;
  border-bottom-color: var(--subjectTextColor);
  border-top-style: solid;
  border-top-width: 0.5vw;
  border-top-color: var(--subjectTextColor);
}

.btnGoCharge {
  background-color: var(--emphasisBackgroundColor);
  font-size: 5vw;
  font-weight: bold;
  justify-content: center;
  border-top-style: solid;
  border-top-width: 0.5vw;
  border-top-color: var(--subjectTextColor);
  border-bottom-style: solid;
  border-bottom-width: 0.5vw;
  border-bottom-color: var(--subjectTextColor);
}

.btnCantCharge {
  background-color: #D8D8D8;
  font-size: 5vw;
  font-weight: bold;
  justify-content: center;
  border-top-style: solid;
  border-top-width: 0.5vw;
  border-top-color: var(--subjectTextColor);
  border-bottom-style: solid;
  border-bottom-width: 0.5vw;
  border-bottom-color: var(--subjectTextColor);
}

.btn-padding {
  padding: 2vw;
}
/* chargerStep2.php */

.priceTable{
  width:100%;
  border:0;
  font-size:2.7vw;
  text-align:center;
  border-left:0.25vw solid #aaa;
  border-right:0.25vw solid #aaa;
}
.priceTable td{
  width:10%;
  border-left:0.25vw solid #aaa;
  border-right:0.25vw solid #aaa;
  font-size:2.5vw;
  vertical-align: middle;
}
.priceRender{
  width:100%;
  border:0;
  position:relative;
  z-index:2;
  border-collapse:collapse;
}
.priceRender td{
  text-align:center;
  width:10vw;
  height:1.5em;
  border:1px solid black;
}
.priceRender2{
  border:1px solid #448;
  position:relative;
  z-index:2;
  box-sizing:border-box;
  height:5.5vw;
}
.priceRender2 > div{
  height:5.5vw;
  width:10%;
  box-shadow:0 0 0 1px #448 inset;
  float:left;
}

.payAmtSelectDiv {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ingChargingInfo.php */
#processMsg {
  font-size: 5.5vw;
  font-weight: 600;
}

/* receiptList.php */
.td_medium {
  font-size: 12px;
  color: #444444;
  line-height: 1.5;
}

.td_large {
  font-size: 12px;
  color: #444444;
  line-height: 1.5;
}

/* notice.php */
.noticeTitle {
  font-size: 4.5vw;
  font-weight: 600;
  color: var(--subjectTextColor);
}

.noticeMain {
  padding: 2vw;
  border-style: solid;
  border-width: medium;
  border-color: var(--subjectTextColor);
}

.noticeMain > p > img, .noticeMain > img {
  width: 100%;
}

/* license.php */
.marginBottom {
  margin-bottom: 2vh;
}

/* 게시별 요금표 */
.tariffContainer{
  padding: 4vw;
}

.zoneTable{
  width: 92vw;
}

.unitText{
  padding: 2vw;
  text-align: right;
  font-size: 4vw;
  font-weight: bold;
}
.tariffTable{
  width: 92vw;
}.tariffTable *{
  text-align: center;
  padding: 1.5vw 0;
  -webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;
}
.zoneTable{
  width: 100%;
  display: table;
  table-layout: fixed
}
.zoneTable *{
  display: table-cell;
  text-align: center;
  padding: 1vw 0;
  -webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;
}

.skyblue{
  background-color: lightskyblue;
}
.oldlace{
  background-color: oldlace;
}
.lightgreen{
  background-color: lightgreen;
}
.palegoldenrod{
  background-color: palegoldenrod;
}
.pink{
  background-color: pink;
}
.lightgray{
  background-color: #ddd;
}
.gray{
  background-color: #aaa;
}