@font-face {
  font-family: "Roboto";
  src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff");
  font-weight: 400; }

@font-face {
  font-family: "Roboto-Medium";
  src: local(Roboto Medium), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff");
  font-weight: 500; }

@font-face {
  font-family: "Roboto-Bold";
  src: local(Roboto Bold), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff");
  font-weight: 700; }

/***************************************************/
/*--Hide Text Set--*/
/*--Hide Long Word Set--*/
/*--Pop Up Shadow Set--*/
/*--Horizontal List--*/
.referral-navbox, .rwf-code {
  display: block; }
  .referral-navbox li, .rwf-code li {
    display: block;
    float: left; }

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  position: relative;
  font-family: Helvetica, Arial, sans-serif, "Microsoft Yahei";
  color: #1f1f1f;
  font-size: 100%;
  line-height: 1.15;
  /* 1 */
  height: 100%; }

ul:not(.browser-default) {
  list-style-type: none; }
  ul:not(.browser-default) > li {
    list-style-type: none; }

a {
  text-decoration: none;
  outline: none;
  hlbr: expression(this.onFocus=this.blur()); }
  a:hover {
    text-decoration: none; }

table {
  border-collapse: collapse; }

img {
  border-width: 0; }

input {
  padding: 0 5px;
  background-color: #fff;
  color: #858585;
  line-height: 30px;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -webkit-border-radius: 3px;
  -mos-border-radius: 3px;
  border-radius: 3px;
  font-size: 0.875rem; }

button {
  height: 32px;
  line-height: 32px;
  background-color: #0C6DB5;
  color: #fff;
  font-family: "Roboto-Medium";
  border-width: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -webkit-border-radius: 3px;
  -mos-border-radius: 3px;
  border-radius: 3px;
  font-size: 0.875rem; }
  button:hover {
    color: #FFF200;
    background-color: #0B4D7D; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-weight: inherit; }

h1 {
  font-size: 2rem;
  line-height: 110%;
  margin: 0; }

h2 {
  font-size: 1.5rem;
  line-height: 110%;
  margin: 0.68182rem 0 0.68182rem 0; }

h3 {
  font-size: 1.5rem;
  line-height: 110%;
  margin: 1rem 0 0.6rem 0; }

h4 {
  font-size: 1.15rem;
  line-height: 110%;
  margin: 0.76667rem 0 0.46rem 0; }

h5 {
  font-size: 1rem;
  line-height: 110%;
  margin: 0.66667rem 0 0.4rem 0; }

h6 {
  font-size: 0.85rem;
  line-height: 110%;
  margin: 0.56667rem 0 0.34rem 0; }

/***************************************************/
/*Clear*/
.clearfix:after, .referral-navbox:after, .rwf-code:after, .step-box:after {
  content: "";
  display: block;
  clear: both; }

.clearfix, .referral-navbox, .rwf-code, .step-box {
  zoom: 1; }

.clear {
  clear: both; }

/*Float Set*/
.float-L, .step-number, .step-content {
  float: left; }

.float-R {
  float: right; }

/*Align Set*/
.align-L {
  text-align: left; }

.align-R {
  text-align: right; }

.align-C {
  text-align: center; }

/*Border Set*/
.borderdot {
  border-top: 1px dotted #bfbfbf; }

.border-R {
  border-right: 1px solid #fff; }

.border-R-dot {
  border-right: 1px dotted #aeaeae; }

/*text-indent Set*/
.fadeout {
  text-indent: -99999px; }

/*img Set*/
.img-responsive, .referral-bn img, .img-wrap img {
  display: block;
  max-width: 100%;
  height: auto; }

/**************************************/
section {
  padding: 24px 0; }
  section h3 {
    color: #096EB4; }
  section p {
    margin: 10px 0;
    font-size: 1rem; }
  section:nth-child(even) {
    background-color: #EDEDED; }

.referral-navbox {
  display: table;
  margin: 0 auto; }
  .referral-navbox li {
    margin: 10px; }
  .referral-navbox a {
    display: block;
    color: #000;
    font-weight: 700;
    font-size: 1.3rem;
    text-decoration: none;
    padding: 20px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
    .referral-navbox a:hover {
      color: #096EB4; }

.referring-box {
  width: 100%;
  position: relative; }
  .referring-box a {
    margin-top: 20px; }

.refer-word {
  margin: 20px 0 60px 0;
  width: 55%; }
  .refer-word p {
    line-height: 1.4; }

.refer-image {
  position: absolute;
  top: -75px;
  right: 0;
  width: 45%; }
  .refer-image img {
    display: block;
    max-width: 100%;
    height: auto; }

.step-box {
  margin: 30px 0;
  width: 100%; }

.step-number span {
  display: block;
  color: #FFA900;
  font-size: 5rem;
  padding: 20px; }

.step-number-detail p {
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 20px 50px; }

.step-content {
  height: 172px; }

.step-box .step-content {
  padding: 20px 0;
  min-width: 180px;
  float: left;
  position: relative; }
  .step-box .step-content::after {
    content: " ";
    position: absolute;
    top: 0;
    right: -49px;
    width: 0;
    height: 0;
    border-top: 86px solid transparent;
    border-bottom: 86px solid transparent;
    z-index: 2; }

.step-box .step-content.step1 {
  width: 24%;
  background-color: #219BD8; }
  .step-box .step-content.step1::after {
    border-left: 49px solid #219BD8; }
  .step-box .step-content.step1 span {
    margin-left: 20px; }

.step-box .step-content.step2 {
  width: 38%;
  background-color: #1988CC; }
  .step-box .step-content.step2::after {
    border-left: 49px solid #1988CC; }
  .step-box .step-content.step2 span {
    margin-left: 60px; }

.step-box .step-content.step3 {
  width: 34%;
  background-color: #096EB5; }
  .step-box .step-content.step3::after {
    border-left: 49px solid #096EB5; }
  .step-box .step-content.step3 span {
    margin-left: 60px; }

.rwd-table {
  width: 100%; }
  .rwd-table th {
    border: 1px solid #545454;
    padding: 10px;
    background-color: #096EB5;
    color: #FFA900;
    font-weight: bold;
    text-align: center; }
  .rwd-table td {
    width: 13.333%;
    padding: 10px;
    border: 1px solid #929292;
    text-align: center; }
    .rwd-table td:first-child {
      width: 20%;
      font-weight: 700;
      text-align: left; }
  .rwd-table tr:nth-child(even) {
    background-color: #e8f1f8; }
    .rwd-table tr:nth-child(even) td:first-child {
      background-color: #bed6ea; }

.img-wrap {
  margin-top: 30px; }

.terms-content {
  margin-top: 30px; }
  .terms-content ol {
    padding: 20px; }
  .terms-content li {
    padding-bottom: 24px;
    line-height: 1.4; }

.faq-wrap {
  background-color: #F0F1F1;
  margin: 24px 0;
  padding: 30px 40px;
  height: 300px;
  overflow-y: scroll; }
  .faq-wrap ul li {
    margin-bottom: 30px; }
    .faq-wrap ul li:last-child {
      margin-bottom: 0px; }
  .faq-wrap a {
    display: block;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 1.2rem; }
    .faq-wrap a:hover {
      color: #096EB5; }
  .faq-wrap::-webkit-scrollbar {
    width: 10px; }
  .faq-wrap::-webkit-scrollbar-track {
    background: #D0D2D3; }
  .faq-wrap::-webkit-scrollbar-thumb {
    background: #ffa902; }

.faq-item {
  padding: 0 20px;
  margin-top: 10px; }
  .faq-item ol li {
    margin-bottom: 10px;
    line-height: 1.4; }
    .faq-item ol li:last-child {
      margin-bottom: 0px; }

.faq-select a {
  color: #096EB5; }

.rwf-code {
  margin: 10px 0; }
  .rwf-code li {
    margin-right: 10px; }
  .rwf-code span {
    display: block;
    padding: 10px; }
  .rwf-code input {
    display: block;
    max-width: 184px;
    background-color: #F0F1F1;
    border-radius: 5px;
    line-height: 38px;
    font-size: 1rem;
    font-weight: 700;
    color: #000;
    text-align: center; }

#faqs strong {
  margin: 20px 0 10px 0;
  display: block;
  font-size: 1.2rem; }

.btn-wrap {
  max-width: 184px;
  min-width: 184px;
  padding: 10px;
  display: block;
  color: #000;
  text-decoration: none;
  background-color: #FFA900;
  text-align: center;
  border-radius: 5px;
  font-weight: bold;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; }
  .btn-wrap:hover {
    background-color: #ffcf00; }

@media (max-width: 1080px) {
  .step-content {
    height: 212px; }
  .step-box .step-content::after {
    content: " ";
    position: absolute;
    top: 0;
    right: -49px;
    width: 0;
    height: 0;
    border-top: 105px solid transparent;
    border-bottom: 105px solid transparent;
    z-index: 2; }
  .step-number-detail p {
    padding: 20px 20px; }
  .refer-image {
    top: -47px;
    width: 60%; } }