@charset "UTF-8";
/*
	.Final Editor : Y.R Lee
	.Description : 커스텀 스타일 정의
	.Last Edit : 2017-03-15
*/
body {
  font-size: 12px;
  background-color: #efefef;
  color: #4a4a4a; }

input, select {
  border-radius: 2px;
  font-family: "Noto Sans KR", "NanumBarunGothic", NanumGothic, malgun gothic, dotum, AppleGothic, sans-serif;
  font-size: 11px;
  border: 1px solid #d4d4d4;
  color: #4a4a4a; }

a, i {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out; }

header {
  position: fixed;
  width: 100%;
  background-color: #fff;
  z-index: 999; }
  header .header_inner {
    width: 600px;
    height: 50px;
    margin: 0 auto;
    text-align: center; }
  header .logo {
    display: inline-block;
    width: 130px;
    height: 25px;
    margin-top: 12px;
    background: url("../img/wizzpay_logo.png") no-repeat;
    background-size: 100%;
    zoom: 1;
    *display: inline; }
    header .logo span {
      display: none; }
  header .header_line {
    height: 2px;
    margin-top: 2px;
    background: url("../img/top_bg.png") left top;
    background-size: 100% 100%; }

.full_container {
  width: 100%;
  z-index: 900; }

.container {
  width: 600px;
  margin: 0 auto; }

.page_guide_text {
  height: 40px;
  line-height: 40px;
  background: url("../img/top_bg.png") left top;
  background-size: 100% 100%;
  color: #fff;
  font-size: 13px;
  text-align: center; }

.page_guide_text.complete {
  color: #00ff97;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }

.page_guide_text.fail {
  color: #ffb300;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }

.inner {
  margin: 15px; }
  .inner h3 {
    font-size: 14px;
    font-weight: 500;
    margin: 15px 0 7px; }
  .inner ul.payment_info {
    background-color: #fff;
    border-radius: 2px; }
    .inner ul.payment_info li {
      position: relative;
      padding: 12px 15px;
      border-top: 1px solid #efefef;
      border-bottom: 1px solid #d4d4d4; }
      .inner ul.payment_info li:after {
        content: '';
        display: block;
        clear: both; }
      .inner ul.payment_info li label.title {
        float: left;
        font-size: 1em;
        color: #989898; }
      .inner ul.payment_info li span.contents {
        float: right;
        font-size: 1.1em;
        font-weight: normal;
        color: #000;
        text-align: right; }
      .inner ul.payment_info li .input_box {
        text-align: right; }
        .inner ul.payment_info li .input_box input {
          width: 15%;
          padding: 0;
          border: 0;
          text-align: center;
          font-size: 1.2em; }
        .inner ul.payment_info li .input_box .hyphen {
          padding: 0 2px;
          color: #8b8b8b; }
      .inner ul.payment_info li span.pay {
        color: #f53728; }
  .inner ul.check_con li {
    line-height: 22px;
    padding-top: 6px;
    font-size: 1em; }
    .inner ul.check_con li:after {
      content: '';
      display: block;
      clear: both; }
    .inner ul.check_con li label.checkbox_wrap {
      position: relative;
      display: inline-block;
      text-align: left;
      cursor: pointer;
      zoom: 1;
      *display: inline; }
      .inner ul.check_con li label.checkbox_wrap .terms_check {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        overflow: hidden; }
        .inner ul.check_con li label.checkbox_wrap .terms_check .checking_img {
          display: inline-block;
          width: 20px;
          height: 20px;
          background: url("../img/icon_checkbox.png") no-repeat;
          background-position: left bottom;
          vertical-align: middle;
          zoom: 1;
          *display: inline; }
        .inner ul.check_con li label.checkbox_wrap .terms_check .checking_img.active {
          background-position: right bottom; }
        .inner ul.check_con li label.checkbox_wrap .terms_check input[type="checkbox"] {
          position: absolute;
          top: 0;
          left: -999999px; }
      .inner ul.check_con li label.checkbox_wrap .check_text {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        margin-left: 25px;
        vertical-align: middle;
        zoom: 1;
        *display: inline; }
    .inner ul.check_con li .btnM {
      float: right;
      line-height: 23px; }
  .inner .terms_wrap {
    padding: 15px;
    font-size: 13px;
    background: #fff; }
  .inner .notice_wrap {
    width: 100%;
    margin-top: 5px; }
    .inner .notice_wrap .text {
      color: #f53728; }

.layer_popup {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  .layer_popup .layer_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorStr=#b3000000, endColorStr=#b3000000 );
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr=#b3000000, endColorStr=#b3000000 )";
    zoom: 1;
    z-index: 900; }

.keypad {
  display: none;
  position: absolute;
  right: 15px;
  top: 40px;
  z-index: 999; }
  .keypad .in_box {
    width: 400px;
    margin: 0 auto;
    padding: 9px 15px 15px;
    background-color: #181818;
    border-radius: 2px; }
    .keypad .in_box .keypad_title {
      height: 20px;
      line-height: 20px; }
      .keypad .in_box .keypad_title:after {
        content: '';
        display: block;
        clear: both; }
      .keypad .in_box .keypad_title .title_text {
        font-size: 13px;
        color: #989898;
        cursor: default; }
      .keypad .in_box .keypad_title .keypad_close {
        float: right;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        background: url("../img/icon_close.png") no-repeat center;
        background-size: 14px;
        opacity: .5; }
        .keypad .in_box .keypad_title .keypad_close:hover {
          opacity: 1; }
    .keypad .in_box .num,
    .keypad .in_box .function_btn {
      display: table;
      width: 100%; }
      .keypad .in_box .num li,
      .keypad .in_box .function_btn li {
        display: table-cell;
        width: 16.666667%;
        vertical-align: middle;
        border: 0;
        padding: 0; }
        .keypad .in_box .num li a,
        .keypad .in_box .function_btn li a {
          display: block;
          height: 40px;
          line-height: 40px;
          margin: 6px 6px 0 0;
          border-radius: 2px;
          text-align: center;
          font-size: 1.5em;
          background-color: #252525;
          color: #fff; }
          .keypad .in_box .num li a:hover,
          .keypad .in_box .function_btn li a:hover {
            background-color: #3f3f3f; }
        .keypad .in_box .num li a.blank,
        .keypad .in_box .num li a.blank:hover,
        .keypad .in_box .function_btn li a.blank,
        .keypad .in_box .function_btn li a.blank:hover {
          background-color: #252525; }
        .keypad .in_box .num li:nth-child(6) a, .keypad .in_box .num li:nth-child(12) a,
        .keypad .in_box .function_btn li:nth-child(6) a,
        .keypad .in_box .function_btn li:nth-child(12) a {
          margin-right: 0; }
      .keypad .in_box .num li.back a,
      .keypad .in_box .num li.refresh a,
      .keypad .in_box .function_btn li.back a,
      .keypad .in_box .function_btn li.refresh a {
        text-indent: -999px;
        opacity: .5; }
        .keypad .in_box .num li.back a:hover,
        .keypad .in_box .num li.refresh a:hover,
        .keypad .in_box .function_btn li.back a:hover,
        .keypad .in_box .function_btn li.refresh a:hover {
          background-color: #3f3f3f;
          opacity: 1; }
      .keypad .in_box .num li.back a,
      .keypad .in_box .function_btn li.back a {
        background: #252525 url("../img/icon_back.png") no-repeat center;
        background-size: 17px; }
      .keypad .in_box .num li.refresh a,
      .keypad .in_box .function_btn li.refresh a {
        background: #252525 url("../img/icon_refresh.png") no-repeat center;
        background-size: 17px; }
      .keypad .in_box .num li.complete,
      .keypad .in_box .function_btn li.complete {
        width: 66.666668%; }
        .keypad .in_box .num li.complete a,
        .keypad .in_box .function_btn li.complete a {
          background-color: #0185c6;
          font-size: 1.3em;
          margin-right: 0; }
          .keypad .in_box .num li.complete a:hover,
          .keypad .in_box .function_btn li.complete a:hover {
            background-color: #0196df; }

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #b1b1b1; }

:-ms-input-placeholder {
  /* IE 10+ */
  color: #b1b1b1; }

::-moz-placeholder {
  /* Firefox 19+ */
  color: #b1b1b1; }

:-moz-placeholder {
  /* Firefox 18- */
  color: #b1b1b1; }

@media screen and (max-width: 480px) {
  header .header_inner {
    width: 100%; }
    header .header_inner .logo {
      width: 130px;
      background: url("../img/wizzpay_logo_m.png") no-repeat;
      background-size: 100%; }

  .container {
    width: 100%; }

  .inner ul.check_con li label.checkbox_wrap .terms_check .checking_img {
    background: url("../img/icon_checkbox_m.png") no-repeat;
    background-position: left bottom;
    background-size: 40px 20px; }

  .keypad {
    position: fixed;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    width: 100%;
    z-index: 999; }
    .keypad .in_box {
      width: 100%;
      border-radius: 0; }
      .keypad .in_box .keypad_title .keypad_close {
        background: url("../img/icon_close_m.png") no-repeat right center;
        background-size: 15px;
        text-indent: -999px; }
      .keypad .in_box .function_btn li.back a {
        background: #252525 url("../img/icon_back_m.png") no-repeat center;
        background-size: 18px; }
      .keypad .in_box .function_btn li.refresh a {
        background: #252525 url("../img/icon_refresh_m.png") no-repeat center;
        background-size: 18px; }
      .keypad .in_box .num li.complete a,
      .keypad .in_box .function_btn li.complete a {
        font-size: 1.3em; } }