/* 2018-07-03 HYEJIN */

@import url('font-awesome.min.css');
@import url('font-Notosans.css');

/* RESETS */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,
form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: 'Noto Sans Korean', 'Nanum Gothic', sans-serif;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

body {
    line-height: 1;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    -webkit-text-size-adjust: none;
}

::selection {
    color: #ffffff;
    background: #6a757c;
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input,select,textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

/* BASIC */

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    font-family: 'Noto Sans Korean', 'Nanum Gothic', FontAwesome, sans-serif;
    box-sizing: inherit;
}

@-ms-viewport {
    width: device-width;
}

html,body {
    background: #ffffff;
}

body,input,select,textarea {
    color: #002f45;
    font-family: 'Noto Sans Korean', 'Nanum Gothic', sans-serif;
    font-size: 13pt;
    font-weight: 400;
    line-height: 1.65;
}

a {
    -moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    color: #4b6b7a;
    text-decoration: none;
}

a:hover {
    color: #002f45 !important;
    border-bottom-color: transparent;
}

strong,b {
    color: #002f45;

}

p {
    margin: 0 0 0.5em 0;
}

h1,h2,h3,h4,h5,h6 {
    color: #002f45;
    font-weight: 300;
    line-height: 1em;
    margin: 0 0 1em 0;
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    color: inherit;
    border: 0;
}

h1 {
    font-size: 3em;
    line-height: 2em;
    letter-spacing: -0.025em;
}

h2 {
    font-size: 2em;
    line-height: 1.5em;
    letter-spacing: -0.025em;
}

h3 {
    font-size: 1.35em;
    line-height: 1.5em;
}

h4 {
    font-size: 1.1em;
    line-height: 1.5em;
}

h5 {
    font-size: 0.9em;
    line-height: 1.5em;
}

h6 {
    font-size: 0.7em;
    line-height: 1.5em;
}

sub {
    font-size: 0.8em;
    position: relative;
    top: 0.5em;
}

sup {
    font-size: 0.8em;
    position: relative;
    top: -0.5em;
}

hr {
    border: 0;
    border-bottom: solid 1px rgba(103, 117, 124, 0.2);
}

/* GRID */

.row {
    border-bottom: solid 1px transparent;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row > * {
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row:after,
.row:before {
    content: '';
    display: block;
    clear: both;
    height: 0;
}

.row.uniform > * > :last-child {
    margin-bottom: 0;
}

.row.\30 \25 > * {
    padding: 0 0 0 0em;
}

.row.\30 \25 {
    margin: 0 0 -1px 0em;
}

.row.uniform.\30 \25 > * {
    padding: 0em 0 0 0em;
}

.row.uniform.\30 \25 {
    margin: 0em 0 -1px 0em;
}

.row > * {
    padding: 0 0 0 1.5em;
}

.row {
    margin: 0 0 -1px -1.5em;
}

.row.uniform > * {
    padding: 1em 0 0 1em;
}

.row.uniform {
    margin: -1.5em 0 -1px -1.5em;
}

.row.\32 00\25 > * {
               padding: 0 0 0 3em;
           }

.row.\32 00\25 {
               margin: 0 0 -1px -3em;
           }

.row.uniform.\32 00\25 > * {
                       padding: 3em 0 0 3em;
                   }

.row.uniform.\32 00\25 {
                       margin: -3em 0 -1px -3em;
                   }

.row.\31 50\25 > * {
               padding: 0 0 0 2.25em;
           }

.row.\31 50\25 {
               margin: 0 0 -1px -2.25em;
           }

.row.uniform.\31 50\25 > * {
                       padding: 2.25em 0 0 2.25em;
                   }

.row.uniform.\31 50\25 {
                       margin: -2.25em 0 -1px -2.25em;
                   }

.row.\35 0\25 > * {
              padding: 0 0 0 0.75em;
          }

.row.\35 0\25 {
              margin: 0 0 -1px -0.75em;
          }

.row.uniform.\35 0\25 > * {
                      padding: 0.75em 0 0 0.75em;
                  }

.row.uniform.\35 0\25 {
                      margin: -0.75em 0 -1px -0.75em;
                  }

.row.\32 5\25 > * {
              padding: 0 0 0 0.375em;
          }

.row.\32 5\25 {
              margin: 0 0 -1px -0.375em;
          }

.row.uniform.\32 5\25 > * {
                      padding: 0.375em 0 0 0.375em;
                  }

.row.uniform.\32 5\25 {
                      margin: -0.375em 0 -1px -0.375em;
                  }

.\31 2u,
      .\31 2u\24 {
                width: 100%;
                clear: none;
                margin-left: 0;
            }

.\31 1u,
      .\31 1u\24 {
                width: 91.6666666667%;
                clear: none;
                margin-left: 0;
            }

.\31 0u,
      .\31 0u\24 {
                width: 83.3333333333%;
                clear: none;
                margin-left: 0;
            }

.\39 u,
.\39 u\24 {
    width: 75%;
    clear: none;
    margin-left: 0;
}

.\38 u,
.\38 u\24 {
    width: 66.6666666667%;
    clear: none;
    margin-left: 0;
}

.\37 u,
.\37 u\24 {
    width: 58.3333333333%;
    clear: none;
    margin-left: 0;
}

.\36 u,
.\36 u\24 {
    width: 50%;
    clear: none;
    margin-left: 0;
}

.\35 u,
.\35 u\24 {
    width: 41.6666666667%;
    clear: none;
    margin-left: 0;
}

.\34 u,
.\34 u\24 {
    width: 33.3333333333%;
    clear: none;
    margin-left: 0;
}

.\33 u,
.\33 u\24 {
    width: 25%;
    clear: none;
    margin-left: 0;
}

.\32 u,
.\32 u\24 {
    width: 16.6666666667%;
    clear: none;
    margin-left: 0;
}

.\31 u,
.\31 u\24 {
    width: 8.3333333333%;
    clear: none;
    margin-left: 0;
}

.\31 2u\24 + *,
      .\31 1u\24 + *,
            .\31 0u\24 + *,
                  .\39 u\24 + *,
                  .\38 u\24 + *,
                  .\37 u\24 + *,
                  .\36 u\24 + *,
                  .\35 u\24 + *,
                  .\34 u\24 + *,
                  .\33 u\24 + *,
                  .\32 u\24 + *,
                  .\31 u\24 + * {
                      clear: left;
                  }

.\-11u {
    margin-left: 91.66667%;
}

.\-10u {
    margin-left: 83.33333%;
}

.\-9u {
    margin-left: 75%;
}

.\-8u {
    margin-left: 66.66667%;
}

.\-7u {
    margin-left: 58.33333%;
}

.\-6u {
    margin-left: 50%;
}

.\-5u {
    margin-left: 41.66667%;
}

.\-4u {
    margin-left: 33.33333%;
}

.\-3u {
    margin-left: 25%;
}

.\-2u {
    margin-left: 16.66667%;
}

.\-1u {
    margin-left: 8.33333%;
}

@media screen and (max-width: 1680px) {

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1em 0 0 1em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
                   padding: 0 0 0 3em;
               }

    .row.\32 00\25 {
                   margin: 0 0 -1px -3em;
               }

    .row.uniform.\32 00\25 > * {
                           padding: 3em 0 0 3em;
                       }

    .row.uniform.\32 00\25 {
                           margin: -3em 0 -1px -3em;
                       }

    .row.\31 50\25 > * {
                   padding: 0 0 0 2.25em;
               }

    .row.\31 50\25 {
                   margin: 0 0 -1px -2.25em;
               }

    .row.uniform.\31 50\25 > * {
                           padding: 2.25em 0 0 2.25em;
                       }

    .row.uniform.\31 50\25 {
                           margin: -2.25em 0 -1px -2.25em;
                       }

    .row.\35 0\25 > * {
                  padding: 0 0 0 0.75em;
              }

    .row.\35 0\25 {
                  margin: 0 0 -1px -0.75em;
              }

    .row.uniform.\35 0\25 > * {
                          padding: 0.75em 0 0 0.75em;
                      }

    .row.uniform.\35 0\25 {
                          margin: -0.75em 0 -1px -0.75em;
                      }

    .row.\32 5\25 > * {
                  padding: 0 0 0 0.375em;
              }

    .row.\32 5\25 {
                  margin: 0 0 -1px -0.375em;
              }

    .row.uniform.\32 5\25 > * {
                          padding: 0.375em 0 0 0.375em;
                      }

    .row.uniform.\32 5\25 {
                          margin: -0.375em 0 -1px -0.375em;
                      }

    .\31 2u\28xlarge\29,
          .\31 2u\24\28xlarge\29 {
                    width: 100%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 1u\28xlarge\29,
          .\31 1u\24\28xlarge\29 {
                    width: 91.6666666667%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 0u\28xlarge\29,
          .\31 0u\24\28xlarge\29 {
                    width: 83.3333333333%;
                    clear: none;
                    margin-left: 0;
                }

    .\39 u\28xlarge\29,
    .\39 u\24\28xlarge\29 {
        width: 75%;
        clear: none;
        margin-left: 0;
    }

    .\38 u\28xlarge\29,
    .\38 u\24\28xlarge\29 {
        width: 66.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\37 u\28xlarge\29,
    .\37 u\24\28xlarge\29 {
        width: 58.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\36 u\28xlarge\29,
    .\36 u\24\28xlarge\29 {
        width: 50%;
        clear: none;
        margin-left: 0;
    }

    .\35 u\28xlarge\29,
    .\35 u\24\28xlarge\29 {
        width: 41.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\34 u\28xlarge\29,
    .\34 u\24\28xlarge\29 {
        width: 33.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\33 u\28xlarge\29,
    .\33 u\24\28xlarge\29 {
        width: 25%;
        clear: none;
        margin-left: 0;
    }

    .\32 u\28xlarge\29,
    .\32 u\24\28xlarge\29 {
        width: 16.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\31 u\28xlarge\29,
    .\31 u\24\28xlarge\29 {
        width: 8.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\31 2u\24\28xlarge\29 + *,
          .\31 1u\24\28xlarge\29 + *,
                .\31 0u\24\28xlarge\29 + *,
                      .\39 u\24\28xlarge\29 + *,
                      .\38 u\24\28xlarge\29 + *,
                      .\37 u\24\28xlarge\29 + *,
                      .\36 u\24\28xlarge\29 + *,
                      .\35 u\24\28xlarge\29 + *,
                      .\34 u\24\28xlarge\29 + *,
                      .\33 u\24\28xlarge\29 + *,
                      .\32 u\24\28xlarge\29 + *,
                      .\31 u\24\28xlarge\29 + * {
                          clear: left;
                      }

    .\-11u\28xlarge\29 {
        margin-left: 91.66667%;
    }

    .\-10u\28xlarge\29 {
        margin-left: 83.33333%;
    }

    .\-9u\28xlarge\29 {
        margin-left: 75%;
    }

    .\-8u\28xlarge\29 {
        margin-left: 66.66667%;
    }

    .\-7u\28xlarge\29 {
        margin-left: 58.33333%;
    }

    .\-6u\28xlarge\29 {
        margin-left: 50%;
    }

    .\-5u\28xlarge\29 {
        margin-left: 41.66667%;
    }

    .\-4u\28xlarge\29 {
        margin-left: 33.33333%;
    }

    .\-3u\28xlarge\29 {
        margin-left: 25%;
    }

    .\-2u\28xlarge\29 {
        margin-left: 16.66667%;
    }

    .\-1u\28xlarge\29 {
        margin-left: 8.33333%;
    }

}

@media screen and (max-width: 1280px) {

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1em 0 0 1em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
                   padding: 0 0 0 3em;
               }

    .row.\32 00\25 {
                   margin: 0 0 -1px -3em;
               }

    .row.uniform.\32 00\25 > * {
                           padding: 3em 0 0 3em;
                       }

    .row.uniform.\32 00\25 {
                           margin: -3em 0 -1px -3em;
                       }

    .row.\31 50\25 > * {
                   padding: 0 0 0 2.25em;
               }

    .row.\31 50\25 {
                   margin: 0 0 -1px -2.25em;
               }

    .row.uniform.\31 50\25 > * {
                           padding: 2.25em 0 0 2.25em;
                       }

    .row.uniform.\31 50\25 {
                           margin: -2.25em 0 -1px -2.25em;
                       }

    .row.\35 0\25 > * {
                  padding: 0 0 0 0.75em;
              }

    .row.\35 0\25 {
                  margin: 0 0 -1px -0.75em;
              }

    .row.uniform.\35 0\25 > * {
                          padding: 0.75em 0 0 0.75em;
                      }

    .row.uniform.\35 0\25 {
                          margin: -0.75em 0 -1px -0.75em;
                      }

    .row.\32 5\25 > * {
                  padding: 0 0 0 0.375em;
              }

    .row.\32 5\25 {
                  margin: 0 0 -1px -0.375em;
              }

    .row.uniform.\32 5\25 > * {
                          padding: 0.375em 0 0 0.375em;
                      }

    .row.uniform.\32 5\25 {
                          margin: -0.375em 0 -1px -0.375em;
                      }

    .\31 2u\28large\29,
          .\31 2u\24\28large\29 {
                    width: 100%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 1u\28large\29,
          .\31 1u\24\28large\29 {
                    width: 91.6666666667%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 0u\28large\29,
          .\31 0u\24\28large\29 {
                    width: 83.3333333333%;
                    clear: none;
                    margin-left: 0;
                }

    .\39 u\28large\29,
    .\39 u\24\28large\29 {
        width: 75%;
        clear: none;
        margin-left: 0;
    }

    .\38 u\28large\29,
    .\38 u\24\28large\29 {
        width: 66.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\37 u\28large\29,
    .\37 u\24\28large\29 {
        width: 58.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\36 u\28large\29,
    .\36 u\24\28large\29 {
        width: 50%;
        clear: none;
        margin-left: 0;
    }

    .\35 u\28large\29,
    .\35 u\24\28large\29 {
        width: 41.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\34 u\28large\29,
    .\34 u\24\28large\29 {
        width: 33.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\33 u\28large\29,
    .\33 u\24\28large\29 {
        width: 25%;
        clear: none;
        margin-left: 0;
    }

    .\32 u\28large\29,
    .\32 u\24\28large\29 {
        width: 16.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\31 u\28large\29,
    .\31 u\24\28large\29 {
        width: 8.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\31 2u\24\28large\29 + *,
          .\31 1u\24\28large\29 + *,
                .\31 0u\24\28large\29 + *,
                      .\39 u\24\28large\29 + *,
                      .\38 u\24\28large\29 + *,
                      .\37 u\24\28large\29 + *,
                      .\36 u\24\28large\29 + *,
                      .\35 u\24\28large\29 + *,
                      .\34 u\24\28large\29 + *,
                      .\33 u\24\28large\29 + *,
                      .\32 u\24\28large\29 + *,
                      .\31 u\24\28large\29 + * {
                          clear: left;
                      }

    .\-11u\28large\29 {
        margin-left: 91.66667%;
    }

    .\-10u\28large\29 {
        margin-left: 83.33333%;
    }

    .\-9u\28large\29 {
        margin-left: 75%;
    }

    .\-8u\28large\29 {
        margin-left: 66.66667%;
    }

    .\-7u\28large\29 {
        margin-left: 58.33333%;
    }

    .\-6u\28large\29 {
        margin-left: 50%;
    }

    .\-5u\28large\29 {
        margin-left: 41.66667%;
    }

    .\-4u\28large\29 {
        margin-left: 33.33333%;
    }

    .\-3u\28large\29 {
        margin-left: 25%;
    }

    .\-2u\28large\29 {
        margin-left: 16.66667%;
    }

    .\-1u\28large\29 {
        margin-left: 8.33333%;
    }

}

@media screen and (max-width: 980px) {

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1em 0 0 1em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
                   padding: 0 0 0 3em;
               }

    .row.\32 00\25 {
                   margin: 0 0 -1px -3em;
               }

    .row.uniform.\32 00\25 > * {
                           padding: 3em 0 0 3em;
                       }

    .row.uniform.\32 00\25 {
                           margin: -3em 0 -1px -3em;
                       }

    .row.\31 50\25 > * {
                   padding: 0 0 0 2.25em;
               }

    .row.\31 50\25 {
                   margin: 0 0 -1px -2.25em;
               }

    .row.uniform.\31 50\25 > * {
                           padding: 2.25em 0 0 2.25em;
                       }

    .row.uniform.\31 50\25 {
                           margin: -2.25em 0 -1px -2.25em;
                       }

    .row.\35 0\25 > * {
                  padding: 0 0 0 0.75em;
              }

    .row.\35 0\25 {
                  margin: 0 0 -1px -0.75em;
              }

    .row.uniform.\35 0\25 > * {
                          padding: 0.75em 0 0 0.75em;
                      }

    .row.uniform.\35 0\25 {
                          margin: -0.75em 0 -1px -0.75em;
                      }

    .row.\32 5\25 > * {
                  padding: 0 0 0 0.375em;
              }

    .row.\32 5\25 {
                  margin: 0 0 -1px -0.375em;
              }

    .row.uniform.\32 5\25 > * {
                          padding: 0.375em 0 0 0.375em;
                      }

    .row.uniform.\32 5\25 {
                          margin: -0.375em 0 -1px -0.375em;
                      }

    .\31 2u\28medium\29,
          .\31 2u\24\28medium\29 {
                    width: 100%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 1u\28medium\29,
          .\31 1u\24\28medium\29 {
                    width: 91.6666666667%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 0u\28medium\29,
          .\31 0u\24\28medium\29 {
                    width: 83.3333333333%;
                    clear: none;
                    margin-left: 0;
                }

    .\39 u\28medium\29,
    .\39 u\24\28medium\29 {
        width: 75%;
        clear: none;
        margin-left: 0;
    }

    .\38 u\28medium\29,
    .\38 u\24\28medium\29 {
        width: 66.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\37 u\28medium\29,
    .\37 u\24\28medium\29 {
        width: 58.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\36 u\28medium\29,
    .\36 u\24\28medium\29 {
        width: 50%;
        clear: none;
        margin-left: 0;
    }

    .\35 u\28medium\29,
    .\35 u\24\28medium\29 {
        width: 41.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\34 u\28medium\29,
    .\34 u\24\28medium\29 {
        width: 33.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\33 u\28medium\29,
    .\33 u\24\28medium\29 {
        width: 25%;
        clear: none;
        margin-left: 0;
    }

    .\32 u\28medium\29,
    .\32 u\24\28medium\29 {
        width: 16.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\31 u\28medium\29,
    .\31 u\24\28medium\29 {
        width: 8.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\31 2u\24\28medium\29 + *,
          .\31 1u\24\28medium\29 + *,
                .\31 0u\24\28medium\29 + *,
                      .\39 u\24\28medium\29 + *,
                      .\38 u\24\28medium\29 + *,
                      .\37 u\24\28medium\29 + *,
                      .\36 u\24\28medium\29 + *,
                      .\35 u\24\28medium\29 + *,
                      .\34 u\24\28medium\29 + *,
                      .\33 u\24\28medium\29 + *,
                      .\32 u\24\28medium\29 + *,
                      .\31 u\24\28medium\29 + * {
                          clear: left;
                      }

    .\-11u\28medium\29 {
        margin-left: 91.66667%;
    }

    .\-10u\28medium\29 {
        margin-left: 83.33333%;
    }

    .\-9u\28medium\29 {
        margin-left: 75%;
    }

    .\-8u\28medium\29 {
        margin-left: 66.66667%;
    }

    .\-7u\28medium\29 {
        margin-left: 58.33333%;
    }

    .\-6u\28medium\29 {
        margin-left: 50%;
    }

    .\-5u\28medium\29 {
        margin-left: 41.66667%;
    }

    .\-4u\28medium\29 {
        margin-left: 33.33333%;
    }

    .\-3u\28medium\29 {
        margin-left: 25%;
    }

    .\-2u\28medium\29 {
        margin-left: 16.66667%;
    }

    .\-1u\28medium\29 {
        margin-left: 8.33333%;
    }

}

@media screen and (max-width: 736px) {

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1em 0 0 1em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
                   padding: 0 0 0 3em;
               }

    .row.\32 00\25 {
                   margin: 0 0 -1px -3em;
               }

    .row.uniform.\32 00\25 > * {
                           padding: 3em 0 0 3em;
                       }

    .row.uniform.\32 00\25 {
                           margin: -3em 0 -1px -3em;
                       }

    .row.\31 50\25 > * {
                   padding: 0 0 0 2.25em;
               }

    .row.\31 50\25 {
                   margin: 0 0 -1px -2.25em;
               }

    .row.uniform.\31 50\25 > * {
                           padding: 2.25em 0 0 2.25em;
                       }

    .row.uniform.\31 50\25 {
                           margin: -2.25em 0 -1px -2.25em;
                       }

    .row.\35 0\25 > * {
                  padding: 0 0 0 0.75em;
              }

    .row.\35 0\25 {
                  margin: 0 0 -1px -0.75em;
              }

    .row.uniform.\35 0\25 > * {
                          padding: 0.75em 0 0 0.75em;
                      }

    .row.uniform.\35 0\25 {
                          margin: -0.75em 0 -1px -0.75em;
                      }

    .row.\32 5\25 > * {
                  padding: 0 0 0 0.375em;
              }

    .row.\32 5\25 {
                  margin: 0 0 -1px -0.375em;
              }

    .row.uniform.\32 5\25 > * {
                          padding: 0.375em 0 0 0.375em;
                      }

    .row.uniform.\32 5\25 {
                          margin: -0.375em 0 -1px -0.375em;
                      }

    .\31 2u\28xsmall\29,
          .\31 2u\24\28xsmall\29 {
                    width: 100%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 1u\28xsmall\29,
          .\31 1u\24\28xsmall\29 {
                    width: 91.6666666667%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 0u\28xsmall\29,
          .\31 0u\24\28xsmall\29 {
                    width: 83.3333333333%;
                    clear: none;
                    margin-left: 0;
                }

    .\39 u\28xsmall\29,
    .\39 u\24\28xsmall\29 {
        width: 75%;
        clear: none;
        margin-left: 0;
    }

    .\38 u\28xsmall\29,
    .\38 u\24\28xsmall\29 {
        width: 66.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\37 u\28xsmall\29,
    .\37 u\24\28xsmall\29 {
        width: 58.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\36 u\28xsmall\29,
    .\36 u\24\28xsmall\29 {
        width: 50%;
        clear: none;
        margin-left: 0;
    }

    .\35 u\28xsmall\29,
    .\35 u\24\28xsmall\29 {
        width: 41.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\34 u\28xsmall\29,
    .\34 u\24\28xsmall\29 {
        width: 33.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\33 u\28xsmall\29,
    .\33 u\24\28xsmall\29 {
        width: 25%;
        clear: none;
        margin-left: 0;
    }

    .\32 u\28xsmall\29,
    .\32 u\24\28xsmall\29 {
        width: 16.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\31 u\28xsmall\29,
    .\31 u\24\28xsmall\29 {
        width: 8.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\31 2u\24\28xsmall\29 + *,
          .\31 1u\24\28xsmall\29 + *,
                .\31 0u\24\28xsmall\29 + *,
                      .\39 u\24\28xsmall\29 + *,
                      .\38 u\24\28xsmall\29 + *,
                      .\37 u\24\28xsmall\29 + *,
                      .\36 u\24\28xsmall\29 + *,
                      .\35 u\24\28xsmall\29 + *,
                      .\34 u\24\28xsmall\29 + *,
                      .\33 u\24\28xsmall\29 + *,
                      .\32 u\24\28xsmall\29 + *,
                      .\31 u\24\28xsmall\29 + * {
                          clear: left;
                      }

    .\-11u\28xsmall\29 {
        margin-left: 91.66667%;
    }

    .\-10u\28xsmall\29 {
        margin-left: 83.33333%;
    }

    .\-9u\28xsmall\29 {
        margin-left: 75%;
    }

    .\-8u\28xsmall\29 {
        margin-left: 66.66667%;
    }

    .\-7u\28xsmall\29 {
        margin-left: 58.33333%;
    }

    .\-6u\28xsmall\29 {
        margin-left: 50%;
    }

    .\-5u\28xsmall\29 {
        margin-left: 41.66667%;
    }

    .\-4u\28xsmall\29 {
        margin-left: 33.33333%;
    }

    .\-3u\28xsmall\29 {
        margin-left: 25%;
    }

    .\-2u\28xsmall\29 {
        margin-left: 16.66667%;
    }

    .\-1u\28xsmall\29 {
        margin-left: 8.33333%;
    }

}

@media screen and (max-width: 360px) {

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1em 0 0 1em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
                   padding: 0 0 0 3em;
               }

    .row.\32 00\25 {
                   margin: 0 0 -1px -3em;
               }

    .row.uniform.\32 00\25 > * {
                           padding: 3em 0 0 3em;
                       }

    .row.uniform.\32 00\25 {
                           margin: -3em 0 -1px -3em;
                       }

    .row.\31 50\25 > * {
                   padding: 0 0 0 2.25em;
               }

    .row.\31 50\25 {
                   margin: 0 0 -1px -2.25em;
               }

    .row.uniform.\31 50\25 > * {
                           padding: 2.25em 0 0 2.25em;
                       }

    .row.uniform.\31 50\25 {
                           margin: -2.25em 0 -1px -2.25em;
                       }

    .row.\35 0\25 > * {
                  padding: 0 0 0 0.75em;
              }

    .row.\35 0\25 {
                  margin: 0 0 -1px -0.75em;
              }

    .row.uniform.\35 0\25 > * {
                          padding: 0.75em 0 0 0.75em;
                      }

    .row.uniform.\35 0\25 {
                          margin: -0.75em 0 -1px -0.75em;
                      }

    .row.\32 5\25 > * {
                  padding: 0 0 0 0.375em;
              }

    .row.\32 5\25 {
                  margin: 0 0 -1px -0.375em;
              }

    .row.uniform.\32 5\25 > * {
                          padding: 0.375em 0 0 0.375em;
                      }

    .row.uniform.\32 5\25 {
                          margin: -0.375em 0 -1px -0.375em;
                      }

    .\31 2u\28xxsmall\29,
          .\31 2u\24\28xxsmall\29 {
                    width: 100%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 1u\28xxsmall\29,
          .\31 1u\24\28xxsmall\29 {
                    width: 91.6666666667%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 0u\28xxsmall\29,
          .\31 0u\24\28xxsmall\29 {
                    width: 83.3333333333%;
                    clear: none;
                    margin-left: 0;
                }

    .\39 u\28xxsmall\29,
    .\39 u\24\28xxsmall\29 {
        width: 75%;
        clear: none;
        margin-left: 0;
    }

    .\38 u\28xxsmall\29,
    .\38 u\24\28xxsmall\29 {
        width: 66.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\37 u\28xxsmall\29,
    .\37 u\24\28xxsmall\29 {
        width: 58.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\36 u\28xxsmall\29,
    .\36 u\24\28xxsmall\29 {
        width: 50%;
        clear: none;
        margin-left: 0;
    }

    .\35 u\28xxsmall\29,
    .\35 u\24\28xxsmall\29 {
        width: 41.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\34 u\28xxsmall\29,
    .\34 u\24\28xxsmall\29 {
        width: 33.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\33 u\28xxsmall\29,
    .\33 u\24\28xxsmall\29 {
        width: 25%;
        clear: none;
        margin-left: 0;
    }

    .\32 u\28xxsmall\29,
    .\32 u\24\28xxsmall\29 {
        width: 16.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\31 u\28xxsmall\29,
    .\31 u\24\28xxsmall\29 {
        width: 8.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\31 2u\24\28xxsmall\29 + *,
          .\31 1u\24\28xxsmall\29 + *,
                .\31 0u\24\28xxsmall\29 + *,
                      .\39 u\24\28xxsmall\29 + *,
                      .\38 u\24\28xxsmall\29 + *,
                      .\37 u\24\28xxsmall\29 + *,
                      .\36 u\24\28xxsmall\29 + *,
                      .\35 u\24\28xxsmall\29 + *,
                      .\34 u\24\28xxsmall\29 + *,
                      .\33 u\24\28xxsmall\29 + *,
                      .\32 u\24\28xxsmall\29 + *,
                      .\31 u\24\28xxsmall\29 + * {
                          clear: left;
                      }

    .\-11u\28xxsmall\29 {
        margin-left: 91.66667%;
    }

    .\-10u\28xxsmall\29 {
        margin-left: 83.33333%;
    }

    .\-9u\28xxsmall\29 {
        margin-left: 75%;
    }

    .\-8u\28xxsmall\29 {
        margin-left: 66.66667%;
    }

    .\-7u\28xxsmall\29 {
        margin-left: 58.33333%;
    }

    .\-6u\28xxsmall\29 {
        margin-left: 50%;
    }

    .\-5u\28xxsmall\29 {
        margin-left: 41.66667%;
    }

    .\-4u\28xxsmall\29 {
        margin-left: 33.33333%;
    }

    .\-3u\28xxsmall\29 {
        margin-left: 25%;
    }

    .\-2u\28xxsmall\29 {
        margin-left: 16.66667%;
    }

    .\-1u\28xxsmall\29 {
        margin-left: 8.33333%;
    }

}

@media screen and (min-width: 1681px) {

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1em 0 0 1em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
                   padding: 0 0 0 3em;
               }

    .row.\32 00\25 {
                   margin: 0 0 -1px -3em;
               }

    .row.uniform.\32 00\25 > * {
                           padding: 3em 0 0 3em;
                       }

    .row.uniform.\32 00\25 {
                           margin: -3em 0 -1px -3em;
                       }

    .row.\31 50\25 > * {
                   padding: 0 0 0 2.25em;
               }

    .row.\31 50\25 {
                   margin: 0 0 -1px -2.25em;
               }

    .row.uniform.\31 50\25 > * {
                           padding: 2.25em 0 0 2.25em;
                       }

    .row.uniform.\31 50\25 {
                           margin: -2.25em 0 -1px -2.25em;
                       }

    .row.\35 0\25 > * {
                  padding: 0 0 0 0.75em;
              }

    .row.\35 0\25 {
                  margin: 0 0 -1px -0.75em;
              }

    .row.uniform.\35 0\25 > * {
                          padding: 0.75em 0 0 0.75em;
                      }

    .row.uniform.\35 0\25 {
                          margin: -0.75em 0 -1px -0.75em;
                      }

    .row.\32 5\25 > * {
                  padding: 0 0 0 0.375em;
              }

    .row.\32 5\25 {
                  margin: 0 0 -1px -0.375em;
              }

    .row.uniform.\32 5\25 > * {
                          padding: 0.375em 0 0 0.375em;
                      }

    .row.uniform.\32 5\25 {
                          margin: -0.375em 0 -1px -0.375em;
                      }

    .\31 2u\28xlarge-to-max\29,
          .\31 2u\24\28xlarge-to-max\29 {
                    width: 100%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 1u\28xlarge-to-max\29,
          .\31 1u\24\28xlarge-to-max\29 {
                    width: 91.6666666667%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 0u\28xlarge-to-max\29,
          .\31 0u\24\28xlarge-to-max\29 {
                    width: 83.3333333333%;
                    clear: none;
                    margin-left: 0;
                }

    .\39 u\28xlarge-to-max\29,
    .\39 u\24\28xlarge-to-max\29 {
        width: 75%;
        clear: none;
        margin-left: 0;
    }

    .\38 u\28xlarge-to-max\29,
    .\38 u\24\28xlarge-to-max\29 {
        width: 66.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\37 u\28xlarge-to-max\29,
    .\37 u\24\28xlarge-to-max\29 {
        width: 58.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\36 u\28xlarge-to-max\29,
    .\36 u\24\28xlarge-to-max\29 {
        width: 50%;
        clear: none;
        margin-left: 0;
    }

    .\35 u\28xlarge-to-max\29,
    .\35 u\24\28xlarge-to-max\29 {
        width: 41.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\34 u\28xlarge-to-max\29,
    .\34 u\24\28xlarge-to-max\29 {
        width: 33.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\33 u\28xlarge-to-max\29,
    .\33 u\24\28xlarge-to-max\29 {
        width: 25%;
        clear: none;
        margin-left: 0;
    }

    .\32 u\28xlarge-to-max\29,
    .\32 u\24\28xlarge-to-max\29 {
        width: 16.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\31 u\28xlarge-to-max\29,
    .\31 u\24\28xlarge-to-max\29 {
        width: 8.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\31 2u\24\28xlarge-to-max\29 + *,
          .\31 1u\24\28xlarge-to-max\29 + *,
                .\31 0u\24\28xlarge-to-max\29 + *,
                      .\39 u\24\28xlarge-to-max\29 + *,
                      .\38 u\24\28xlarge-to-max\29 + *,
                      .\37 u\24\28xlarge-to-max\29 + *,
                      .\36 u\24\28xlarge-to-max\29 + *,
                      .\35 u\24\28xlarge-to-max\29 + *,
                      .\34 u\24\28xlarge-to-max\29 + *,
                      .\33 u\24\28xlarge-to-max\29 + *,
                      .\32 u\24\28xlarge-to-max\29 + *,
                      .\31 u\24\28xlarge-to-max\29 + * {
                          clear: left;
                      }

    .\-11u\28xlarge-to-max\29 {
        margin-left: 91.66667%;
    }

    .\-10u\28xlarge-to-max\29 {
        margin-left: 83.33333%;
    }

    .\-9u\28xlarge-to-max\29 {
        margin-left: 75%;
    }

    .\-8u\28xlarge-to-max\29 {
        margin-left: 66.66667%;
    }

    .\-7u\28xlarge-to-max\29 {
        margin-left: 58.33333%;
    }

    .\-6u\28xlarge-to-max\29 {
        margin-left: 50%;
    }

    .\-5u\28xlarge-to-max\29 {
        margin-left: 41.66667%;
    }

    .\-4u\28xlarge-to-max\29 {
        margin-left: 33.33333%;
    }

    .\-3u\28xlarge-to-max\29 {
        margin-left: 25%;
    }

    .\-2u\28xlarge-to-max\29 {
        margin-left: 16.66667%;
    }

    .\-1u\28xlarge-to-max\29 {
        margin-left: 8.33333%;
    }

}

@media screen and (min-width: 481px) and (max-width: 1680px) {

    .row > * {
        padding: 0 0 0 1.5em;
    }

    .row {
        margin: 0 0 -1px -1.5em;
    }

    .row.uniform > * {
        padding: 1em 0 0 1em;
    }

    .row.uniform {
        margin: -1.5em 0 -1px -1.5em;
    }

    .row.\32 00\25 > * {
                   padding: 0 0 0 3em;
               }

    .row.\32 00\25 {
                   margin: 0 0 -1px -3em;
               }

    .row.uniform.\32 00\25 > * {
                           padding: 3em 0 0 3em;
                       }

    .row.uniform.\32 00\25 {
                           margin: -3em 0 -1px -3em;
                       }

    .row.\31 50\25 > * {
                   padding: 0 0 0 2.25em;
               }

    .row.\31 50\25 {
                   margin: 0 0 -1px -2.25em;
               }

    .row.uniform.\31 50\25 > * {
                           padding: 2.25em 0 0 2.25em;
                       }

    .row.uniform.\31 50\25 {
                           margin: -2.25em 0 -1px -2.25em;
                       }

    .row.\35 0\25 > * {
                  padding: 0 0 0 0.75em;
              }

    .row.\35 0\25 {
                  margin: 0 0 -1px -0.75em;
              }

    .row.uniform.\35 0\25 > * {
                          padding: 0.75em 0 0 0.75em;
                      }

    .row.uniform.\35 0\25 {
                          margin: -0.75em 0 -1px -0.75em;
                      }

    .row.\32 5\25 > * {
                  padding: 0 0 0 0.375em;
              }

    .row.\32 5\25 {
                  margin: 0 0 -1px -0.375em;
              }

    .row.uniform.\32 5\25 > * {
                          padding: 0.375em 0 0 0.375em;
                      }

    .row.uniform.\32 5\25 {
                          margin: -0.375em 0 -1px -0.375em;
                      }

    .\31 2u\28small-to-xlarge\29,
          .\31 2u\24\28small-to-xlarge\29 {
                    width: 100%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 1u\28small-to-xlarge\29,
          .\31 1u\24\28small-to-xlarge\29 {
                    width: 91.6666666667%;
                    clear: none;
                    margin-left: 0;
                }

    .\31 0u\28small-to-xlarge\29,
          .\31 0u\24\28small-to-xlarge\29 {
                    width: 83.3333333333%;
                    clear: none;
                    margin-left: 0;
                }

    .\39 u\28small-to-xlarge\29,
    .\39 u\24\28small-to-xlarge\29 {
        width: 75%;
        clear: none;
        margin-left: 0;
    }

    .\38 u\28small-to-xlarge\29,
    .\38 u\24\28small-to-xlarge\29 {
        width: 66.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\37 u\28small-to-xlarge\29,
    .\37 u\24\28small-to-xlarge\29 {
        width: 58.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\36 u\28small-to-xlarge\29,
    .\36 u\24\28small-to-xlarge\29 {
        width: 50%;
        clear: none;
        margin-left: 0;
    }

    .\35 u\28small-to-xlarge\29,
    .\35 u\24\28small-to-xlarge\29 {
        width: 41.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\34 u\28small-to-xlarge\29,
    .\34 u\24\28small-to-xlarge\29 {
        width: 33.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\33 u\28small-to-xlarge\29,
    .\33 u\24\28small-to-xlarge\29 {
        width: 25%;
        clear: none;
        margin-left: 0;
    }

    .\32 u\28small-to-xlarge\29,
    .\32 u\24\28small-to-xlarge\29 {
        width: 16.6666666667%;
        clear: none;
        margin-left: 0;
    }

    .\31 u\28small-to-xlarge\29,
    .\31 u\24\28small-to-xlarge\29 {
        width: 8.3333333333%;
        clear: none;
        margin-left: 0;
    }

    .\31 2u\24\28small-to-xlarge\29 + *,
          .\31 1u\24\28small-to-xlarge\29 + *,
                .\31 0u\24\28small-to-xlarge\29 + *,
                      .\39 u\24\28small-to-xlarge\29 + *,
                      .\38 u\24\28small-to-xlarge\29 + *,
                      .\37 u\24\28small-to-xlarge\29 + *,
                      .\36 u\24\28small-to-xlarge\29 + *,
                      .\35 u\24\28small-to-xlarge\29 + *,
                      .\34 u\24\28small-to-xlarge\29 + *,
                      .\33 u\24\28small-to-xlarge\29 + *,
                      .\32 u\24\28small-to-xlarge\29 + *,
                      .\31 u\24\28small-to-xlarge\29 + * {
                          clear: left;
                      }

    .\-11u\28small-to-xlarge\29 {
        margin-left: 91.66667%;
    }

    .\-10u\28small-to-xlarge\29 {
        margin-left: 83.33333%;
    }

    .\-9u\28small-to-xlarge\29 {
        margin-left: 75%;
    }

    .\-8u\28small-to-xlarge\29 {
        margin-left: 66.66667%;
    }

    .\-7u\28small-to-xlarge\29 {
        margin-left: 58.33333%;
    }

    .\-6u\28small-to-xlarge\29 {
        margin-left: 50%;
    }

    .\-5u\28small-to-xlarge\29 {
        margin-left: 41.66667%;
    }

    .\-4u\28small-to-xlarge\29 {
        margin-left: 33.33333%;
    }

    .\-3u\28small-to-xlarge\29 {
        margin-left: 25%;
    }

    .\-2u\28small-to-xlarge\29 {
        margin-left: 16.66667%;
    }

    .\-1u\28small-to-xlarge\29 {
        margin-left: 8.33333%;
    }

}

/* ALIGN */

.alignLeft {
    text-align: left;
}

.alignCenter {
    text-align: center;
}

.alignRight {
    text-align: right;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

/* TRIANGLE */

.backgroundTriangle {
    position: relative;
    background: #1c81d9;
    top: -38.9em;
    z-index: 1;
}

.backgroundFirst,
.backgroundSecond,
.backgroundThird,
.backgroundFourth,
.backgroundFifth {
    display: flex;
}

.backgroundFirst > div,
.backgroundSecond > div,
.backgroundThird > div,
.backgroundFourth > div,
.backgroundFifth > div {
    opacity: 0.2;
}

/* ANIMATION */

.backgroundTriangle > .backgroundFirst > div:nth-child(1),
.backgroundTriangle > .backgroundFirst > div:nth-child(18),
.backgroundTriangle > .backgroundFirst > div:nth-child(21),
.backgroundTriangle > .backgroundSecond > div:nth-child(4),
.backgroundTriangle > .backgroundSecond > div:nth-child(9),
.backgroundTriangle > .backgroundSecond > div:nth-child(23),
.backgroundTriangle > .backgroundFourth > div:nth-child(22) {
    border-top-color: #39abec;
    border-bottom-color: #39abec;
    opacity: 0.6;
    animation: fadeIn 2s linear infinite;
}

.backgroundTriangle > .backgroundThird > div:nth-child(2),
.backgroundTriangle > .backgroundThird > div:nth-child(6),
.backgroundTriangle > .backgroundThird > div:nth-child(20),
.backgroundTriangle > .backgroundFourth > div:nth-child(10),
.backgroundTriangle > .backgroundFifth > div:nth-child(3),
.backgroundTriangle > .backgroundFifth > div:nth-child(8),
.backgroundTriangle > .backgroundFifth > div:nth-child(14),
.backgroundTriangle > .backgroundFifth > div:nth-child(21) {
    border-top-color: #39abec;
    border-bottom-color: #39abec;
    opacity: 0.6;
    animation: fadeOut 2s linear infinite;
}

@keyframes fadeIn {
    0% {
        opacity: 0.5;
    }
    33% {
        opacity: 1;
    }
    66% {
        opacity: 1;
    }
    100% {
        opacity: 0.5;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    33% {
        opacity: 0.5;
    }
    66% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.downTriangle {
    margin-left: -80px;
    margin-right: -80px;
    width: 0;
    height: 0;
    border-top: 135px solid #ffffff;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
}

.downTriangle:first-child {
    margin-left: 0;
}

.upTriangle {
    width: 0;
    height: 0;
    border-bottom: 135px solid #ffffff;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
}

.downTriangle:last-child,
.upTriangle:last-child {
    margin-right: 0;
}

.triangleC3272cc {
    border-top-color: #3272cc;
    border-bottom-color: #3272cc;
}

.triangleC58477e {
    border-top-color: #58477e;
    border-bottom-color: #58477e;
}

.triangleCd6c3cb {
    border-top-color: #d6c3cb;
    border-bottom-color: #d6c3cb;
}

.triangleC005074 {
    border-top-color: #005074;
    border-bottom-color: #005074;
}

.triangleC007aa6 {
    border-top-color: #007aa6;
    border-bottom-color: #007aa6;
}

.triangleC688a9c {
    border-top-color: #688a9c;
    border-bottom-color: #688a9c;
}

.triangleCaccbcc {
    border-top-color: #accbcc;
    border-bottom-color: #accbcc;
}

.triangleC9ab4c2 {
    border-top-color: #9ab4c2;
    border-bottom-color: #9ab4c2;
}

.triangleCd8d7da {
    border-top-color: #d8d7da;
    border-bottom-color: #d8d7da;
}

.triangleC4a9dd7 {
    border-top-color: #4a9dd7;
    border-bottom-color: #4a9dd7;
}

.triangleC0091b4 {
    border-top-color: #0091b4;
    border-bottom-color: #0091b4;
}

.triangleC9ab4c2 {
    border-top-color: #9ab4c2;
    border-bottom-color: #9ab4c2;
}

.triangleC3272cc {
    border-top-color: #3272cc;
    border-bottom-color: #3272cc;
}

/* TRIANGLE IN TEXT */

.upTriangleText {
    position: relative;
    top: -30px;
    width: 160px;
    color: #ffffff;
    margin: 0;
}

.downTriangleText {
    position: relative;
    width: 160px;
    color: #ffffff;
    margin: 0;
    padding-top: 15px;
}

/* APPEAR */

.appearFrame {
    position: relative;
    top: 0;
    left: 50%;
    height: 38.9em;
    z-index: 10;
}

.appearFirst,
.appearSecond,
.appearThird,
.appearFourth,
.appearFifth {
    display: flex;
}

.appearSecond,
.appearFourth {
    margin-left: 80px;
}

.appearFirst > div,
.appearSecond > div,
.appearThird > div,
.appearFourth > div,
.appearFifth > div {
    opacity: 0;
}

.appearSecond > div:nth-child(2),
.appearSecond > div:nth-child(3),
.appearSecond > div:nth-child(4) {
    opacity: 1;
}

.appearThird > div:nth-child(1),
.appearThird > div:nth-child(2),
.appearThird > div:nth-child(3),
.appearThird > div:nth-child(4),
.appearThird > div:nth-child(5),
.appearThird > div:nth-child(6),
.appearThird > div:nth-child(7) {
    opacity: 1;
}

.appearFourth > div:nth-child(1),
.appearFourth > div:nth-child(3),
.appearFourth > div:nth-child(4),
.appearFourth > div:nth-child(5) {
    opacity: 1;
}

.appearFifth > div:nth-child(6),
.appearFifth > div:nth-child(7) {
    opacity: 1;
}

/* MODAL IN IMAGE UPLOAD */

.modalBody.medium .content {
    padding: 1rem 1rem 0 1rem;
    margin-bottom: 1.5rem;
}

.modalBody.medium .imgBox {
    width: 100%;
    height: calc(18em - 3rem);
    line-height: calc(18em - 3rem);
    background: #ffffff;
    text-align: center;
    margin-bottom: 1.5rem;
}

.modalBody.medium .imgBox.onMost {
    position: relative;
    z-index: 9;
}

.modalBody.medium .imgBox img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    vertical-align: top;
    border: 1px solid #ced4da;
}

.modalBody.medium .imgUpload {
    position: relative;
    height: 0;
    margin: 0;
}

.modalBody.medium .imgUpload input[type="file"] {
    display: none;
}

.modalBody.medium .imgUpload label {
    position: relative;
    z-index: 3;
    top: 12em;
    width: 10rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background: #26c6da;
    color: #ffffff;
    border-radius: 0.375em;
    text-align: center;
    font-size: 12pt;

    letter-spacing: -1px;
}

.modalBody.medium .imgUpload label:hover {
    cursor: pointer;
    background: #10b7cc;
}

.modalBody.medium .photograph {
    position: relative;
    height: 0;
    margin: 0;
}

.modalBody.medium .photograph input[type="file"] {
    display: none;
}

.modalBody.medium .photograph label {
    position: relative;
    z-index: 3;
    top: 12em;
    width: 10rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background: #26c6da;
    color: #ffffff;
    border-radius: 0.375em;
    text-align: center;
    font-size: 12pt;

    letter-spacing: -1px;
}

.modalBody.medium .photograph label:hover {
    cursor: pointer;
    background: #10b7cc;
}

.modalBody.medium .fileFrame {
    display: flex;
    justify-content: center;
}

.modalBody.medium .fileFrame div + div {
    margin-left: 1em;
}

/* FORM */

form {
    margin: 0;
}

label {
    color: #002f45;
    display: block;
    font-size: 0.9em;
    font-weight: 300;
    margin: 0 0 0.3em 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
select,
textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: border-color 0.2s ease-in-out;
    -webkit-transition: border-color 0.2s ease-in-out;
    -ms-transition: border-color 0.2s ease-in-out;
    transition: border-color 0.2s ease-in-out;
    background: #ffffff;
    border-radius: 4px;
    border: solid 1px #ced4da;
    color: inherit;
    display: block;
    outline: 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="tel"]:invalid,
input[type="search"]:invalid,
select:invalid,
textarea:invalid {
    box-shadow: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: #26c6da;
    box-shadow: 0 0 0 1px #26c6da;
}

select {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(206, 212, 218, 1)' /%3E%3C/svg%3E");
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    height: 2em;
    padding-right: 2em;
    text-overflow: ellipsis;
}

select option {
    color: #1c1d26;
}

select:focus::-ms-value {
    background-color: transparent;
}

select::-ms-expand {
    display: none;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
select {
    height: 2em;
}

textarea {
    padding: 0.75em 1em;
}

input[type="checkbox"],
input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    /*float: left;*/
    margin-right: -2em;
    opacity: 0;
    width: 1em;
    z-index: -1;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    text-decoration: none;
    color: #002f45;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: 400;
    padding-left: 2.4em;
    padding-right: 0.75em;
    position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    border-radius: 0.375em;
    border: solid 1px #ced4da;
    content: '\f00c';
    color: #ced4da;
    display: inline-block;
    height: 1.65em;
    left: 0;
    line-height: 1.58125em;
    position: absolute;
    text-align: center;
    top: 0;
    width: 1.65em;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
    background: #67757c;
    border-color: #67757c;
    color: #ffffff;
    content: '\f00c';
}

input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
    border: solid 1px #26c6da;
}

input[type="checkbox"] + label:before {
    border-radius: 0.375em;
}

input[type="radio"] + label:before {
    border-radius: 100%;
}

::-webkit-input-placeholder {
    color: #002f45 !important;
    opacity: 1.0;
}

:-moz-placeholder {
    color: #002f45 !important;
    opacity: 1.0;
}

::-moz-placeholder {
    color: #002f45 !important;
    opacity: 1.0;
}

:-ms-input-placeholder {
    color: #002f45 !important;
    opacity: 1.0;
}

/* ON/OFF CHECKBOX */

.toggleBox {
    display: inline-block;
    vertical-align: middle;
    height: 1.8rem;
}

.toggleBox input[type="checkbox"] {
    width: 0;
    height: 0;
}

.toggleBox input[type="checkbox"] + label:before,
.toggleBox input[type="checkbox"]:checked + label:before {
    display: none;
}

.toggleBox input[type="checkbox"] + label {
    padding: 0 !important;
    margin: 0 !important;
}

.toggleCheckbox + label {
    display: block;
    padding: 0.8em;
    text-align: left !important;
}

.toggleCheckbox + label span.toggle {
    display: inline-block;
    width: 3.5rem;
    height: 1.8rem;
    float: right;
    border-radius: 1em;
    margin: 0;
    border: 1px solid #b9b9b9;
    background: #ffffff;
    transition: all ease 300ms;
}

.toggleCheckbox + label span.toggle:before {
    content: '';
    position: absolute;
    background: #ffffff;
    height: 1.55rem;
    width: 1.55rem;
    border-radius: 1em;
    transition: all ease 300ms;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
}

.toggleCheckbox:checked + label span.toggle {
    background-color: #26c6da;
    border: 2px solid #26c6da;
}

.toggleCheckbox:checked + label span:before {
    margin-left: 1.67rem;
    background: #ffffff;
}

/* IMAGE */

.image {
    border: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.image:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.image img {
    display: block;
}

/* LIST */

ol {
    list-style: decimal;
    margin: 0 0 2em 0;
    padding-left: 1.25em;
}

ol li {
    padding-left: 0.25em;
}

ul {
    list-style: disc;
    margin: 0 0 2em 0;
    padding-left: 1em;
}

ul li {
    padding-left: 0.5em;
}

dl {
    margin: 0 0 2em 0;
}

ul.passwordCondition {
    list-style: none;
    margin: 0;
    padding: 1em 0 1em 1em;
    text-align: left;
}

ul.passwordCondition li {
    font-size: 0.8em;

}

ul.passwordCondition li:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f111';
    color: #26c6da;
    padding-right: 0.5em;
}

ul.termsList {
    list-style: none;
    margin: 0;
    padding: 0.9em 0 0 0.9em;
    text-align: left;
}

ul.termsList li {
    font-size: 0.9em;
    padding-bottom: 1em;
}

ul.termsList li:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f068';
    font-size: 0.5em;
    color: #43565f;
    padding-right: 1em;
}

/* TABLE */

.table-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}

table {
    margin: 0 0 2em 0;
    width: 100%;
}

table tbody tr {
    border-left: 0;
    border-right: 0;
}

table td {
    padding: 0.75em 0.75em;
}

table th {
    color: #002f45;
    font-size: 0.9em;
    font-weight: 300;
    padding: 0 0.75em 0.75em 0.75em;
    text-align: left;
}

table thead {
    border-bottom: solid 1px rgba(0, 0, 0, 0.3);
}

table tfoot {
    border-top: solid 1px rgba(0, 0, 0, 0.3);
}

table.column {
    margin: 0 0 2em 0;
    width: 100%;
}

table.column td {
    padding: 0.75em 0.75em;

    vertical-align: top;
}

table.column td > .markText {
    cursor: default;
}

table.column td > .markText:hover {
    background: rgba(196, 226, 255, 0.3);
}

table.column th {
    color: #002f45;
    font-size: 0.9em;
    font-weight: 300;
    padding: 0 0.75em 0.75em 0.75em;
    text-align: left;
}

/* COLUMN BORDER */

table.columnBorder {
    text-align: center;

}

table.columnBorder tbody tr:nth-child(2n + 1) {
    background: rgba(206, 212, 218, 0.3);
    border-top: 1px solid #ced4da;
}

table.columnBorder tbody tr:nth-child(2n) {
    border-bottom: 1px solid #ced4da;
}

table.columnBorder td.error {
    color: #7460ee;
}

table.columnBorder td.deposit {
    color: #0062cc;
}

table.columnBorder td.withdraw {
    color: #ce2c4b;
}

/* COLUMN SIMULATOR */

table.columnSimulator {

    margin: 0;
}

table.columnSimulator tbody {
    border: 1px solid #ced4da;
}

table.columnSimulator tr td {
    padding: 1em 1.5em;
}

/* 송금액 */

table.columnSimulator tr td.sum {
    text-align: right;
}

table.columnSimulator tr td.sum > input[type="text"] {
    display: inline-block;
    width: 8em;
    max-width: 10em;
    text-align: right;
    font-size: 2em;
    font-weight: 500;
    letter-spacing: -1px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #ced4da;
    padding: 0 0.5em 0 0;
}

table.columnSimulator tr td.sum > input[type="text"]:focus {
    border: 0;
    border-bottom: 1px solid #26c6da;
    box-shadow: none;
}

/* 수수료 */

table.columnSimulator tr td.commission {
    text-align: right;
    color: #ce2c4b;
    padding: 0 1.5em 0.5em 1.5em;
}

table.columnSimulator tr td.commission > input[type="text"] {
    display: inline-block;
    width: 8em;
    max-width: 10em;
    text-align: right;
    font-size: 2em;
    font-weight: 500;
    letter-spacing: -1px;
    border: 0;
    border-radius: 0;
    padding: 0 0.5em 0 0;
}

/* 수령 예샹 금액 */

table.columnSimulator tr td.receiveSum {
    text-align: right;
}

table.columnSimulator tr td.receiveSum > input[type="text"] {
    display: inline-block;
    width: 8em;
    max-width: 10em;
    text-align: right;
    font-size: 2em;
    font-weight: 500;
    letter-spacing: -1px;
    border: 0;
    border-radius: 0;
    padding: 0 0.5em 0 0;
}

/* COLUMN LIST */

table.columnList {
    border-collapse: separate;
}

table.columnList tbody tr:hover {
    background: #e6f3ff;
    cursor: pointer;
}

table.columnList tbody.notHover tr:hover {
    background: none;
    cursor: default;
}

table.columnList tbody td {
    text-align: right;
    padding: 0.8em 0.5em;
    vertical-align: text-top;
    word-break: keep-all;
}

table.columnList tbody td:first-child {
    text-align: left;
}

table.columnList thead {
    background: rgba(206, 212, 218, 1);
}

table.columnList thead th {
    font-size: 1em;
    font-weight: 500;
    color: #43565f;
    text-align: center;
    padding: 0.5em 0.5em;
}

table.columnList tbody td.important {
    background: rgba(237, 238, 239, 0.5);
}

table.columnList tbody tr td input[type="checkbox"] + label {
    padding-left: 1em;
    margin: 0 0 1.2rem 0;
}

table.columnList tfoot {
    border-top: 0;
}

/* COLUMN HALF LIST */

table.columnHalfList {
    border-collapse: collapse;
}

table.columnHalfList tbody tr:hover {
    background: #e6f3ff;
    cursor: pointer;
}

table.columnHalfList tbody.notHover tr:hover {
    background: none;
    cursor: default;
}

table.columnHalfList tbody td {
    text-align: center;
    padding: 0.8em 0.5em;
    vertical-align: middle;
}

table.columnHalfList tbody td span.smallTitle {
    display: none;
}

table.columnHalfList thead {
    background: rgba(206, 212, 218, 0.2);
}

table.columnHalfList thead th {
    font-size: 1em;
    font-weight: 500;
    color: #67757c;
    text-align: center;
    padding: 0.5em 0.5em;
    border-bottom: 1px solid #e9e9e9;
}

table.table.columnHalfList tbody tr td input[type="checkbox"] + label {
    padding-left: 1em;
    margin: 0 0 1.2rem 0;
}

table.table.columnHalfList tfoot {
    border-top: 0;
}

/* COLUMN LIST DATA */

table.columnListData {
    border-collapse: separate;
}

table.columnListData tbody tr {
    border-bottom: 1px solid #e9e9e9;
}

table.columnListData tbody td {
    text-align: center;
    padding: 0.8em 0.5em;
    vertical-align: middle;
}

table.columnListData tbody td .flag {
    display: inline-block;
    width: 1.2em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    vertical-align: text-top;
    margin-right: 0.5em;
}

table.columnListData thead {
    background: rgba(206, 212, 218, 0.2);
}

table.columnListData thead th {
    font-size: 13pt;
    font-weight: 500;
    color: #67757c;
    text-align: center;
    padding: 0.5em 0.5em;
    border-bottom: 1px solid #e9e9e9;
}

table.columnListData tbody td.important {

    background: rgba(237, 238, 239, 0.5);
}

table.columnListData tbody tr td input[type="checkbox"] + label {
    padding-left: 1em;
    margin: 0 0 1.2rem 0;
}

table.columnListData tfoot {
    border-top: 0;
}

/* ROW LIST */

table.rowList {
    margin: 0 0 2em 0;
    width: 100%;
}

table.rowList thead th {
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: #002f45;
    background: rgba(196, 226, 255, 0.5);
    padding: 0.4em 0 0.4em 0.8em;
}

table.rowList tbody tr {
    border-bottom: 1px solid rgba(206, 212, 218, 0.6);
}

table.rowList tr td:first-child {
    border-bottom: 1px solid #e9e9e9;
    background: #eef5f9;
    font-size: 13pt;
    font-weight: 500;
    color: #67757c;
    text-align: center;
    padding: 0.5em 0.5em;
}

table.rowList td {
    padding: 0.75em 0.75em;

    vertical-align: middle;
}

table.rowList td > span + span {
    padding-left: 1em;
}

table.rowList td > .markText {
    cursor: default;
}

table.rowList td > .markText:hover {
    background: rgba(196, 226, 255, 0.3);
}

table.rowList th {
    color: #002f45;
    font-size: 0.9em;
    font-weight: 300;
    padding: 0 0.75em 0.75em 0.75em;
    text-align: left;
}

/* TABLE BORAD */

table.board {
    border-collapse: separate;
    border-bottom: 1px solid #dadada;
}

table.board thead th {
    font-size: 13pt;
    font-weight: 500;
    color: #67757c;
    text-align: center;
    padding: 0.5em 0.5em;
    border-top: 2px solid #ced4da;
}

table.board tbody tr:hover {

    background: rgba(196, 226, 255, 0.5);
    cursor: pointer;
}

table.board tbody td {
    text-align: center;
    padding: 0.8em 0.5em;
    vertical-align: middle;
    border-top: 1px solid #dadada;
}

/* INPUT // BUTTON */

input[type="button"],
button,
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: transparent;
    border-radius: 0.375em;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    letter-spacing: 0.075em;
    padding: 0 2.25em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    outline: 0;
}

input[type="button"].disabled,
input[type="button"]:disabled,
button.disabled,
button:disabled,
.button.disabled,
.button:disabled {
    -moz-pointer-events: none;
    -webkit-pointer-events: none;
    -ms-pointer-events: none;
    pointer-events: none;
    opacity: 0.5;
}

/* BUTTON */

input[type="button"].yellowButton,
button.yellowButton,
.button.yellowButton {
    width: auto;
    min-width: 10rem;
    height: 2.5em;
    line-height: 2.5em;
    background: #ea9f1e;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;

    letter-spacing: -1px;
}

input[type="button"].yellowButton:hover,
button.yellowButton:hover,
.button.yellowButton:hover {
    background: #ffb22b;
    box-shadow: 0 14px 26px -12px rgba(222, 150, 24, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(222, 150, 24, 0.2);
}

input[type="button"].blueButton,
button.blueButton,
.button.blueButton {
    width: auto;
    min-width: 10rem;
    height: 2.5em;
    line-height: 2.5em;
    background: #1c81d9;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

input[type="button"].blueButton:hover,
button.blueButton:hover,
.button.blueButton:hover {
    background: #106bbb;
    box-shadow: 0 14px 26px -12px rgba(0, 47, 69, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 47, 69, 0.2);
}

input[type="button"].purpleButton,
button.purpleButton,
.button.purpleButton {
    width: auto;
    min-width: 10rem;
    height: 2.5em;
    line-height: 2.5em;
    background: #7460ee;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

input[type="button"].purpleButton:hover,
button.purpleButton:hover,
.button.purpleButton:hover {
    background: #5a45db;
    box-shadow: 0 14px 26px -12px rgba(90, 69, 219, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(90, 69, 219, 0.2);
}

input[type="button"].pinkButton,
button.pinkButton,
.button.pinkButton {
    width: auto;
    min-width: 10rem;
    height: 2.5em;
    line-height: 2.5em;
    background: #fc4b6c;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

input[type="button"].pinkButton:hover,
button.pinkButton:hover,
.button.pinkButton:hover {
    background: #e73557;
    box-shadow: 0 14px 26px -12px rgba(219, 43, 76, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(219, 43, 76, 0.2);
}

input[type="button"].greenButton,
button.greenButton,
.button.greenButton {
    width: auto;
    min-width: 10rem;
    height: 2.5em;
    line-height: 2.5em;
    background: #117a8b;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

input[type="button"].greenButton:hover,
button.greenButton:hover,
.button.greenButton:hover {
    background: #0e5d6a;
    box-shadow: 0 14px 26px -12px rgba(0, 47, 69, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 47, 69, 0.2);
}

input[type="button"].grayButton,
button.grayButton,
.button.grayButton {
    width: auto;
    min-width: 10rem;
    max-width: auto;
    height: 2.5em;
    line-height: 2.5em;
    background: #67757c;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

input[type="button"].grayButton:hover,
button.grayButton:hover,
.button.grayButton:hover {
    background: #4c575c;
    box-shadow: 0 14px 26px -12px rgba(76, 87, 92, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(76, 87, 92, 0.2);
}

input[type="button"].lightGrayButton,
button.lightGrayButton,
.button.lightGrayButton {
    width: auto;
    min-width: 10rem;
    height: 2.5em;
    line-height: 2.5em;
    background: #9ba6b1;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

input[type="button"].lightGrayButton:hover,
button.lightGrayButton:hover,
.button.lightGrayButton:hover {
    background: #7b858f;
    box-shadow: 0 14px 26px -12px rgba(155, 166, 177, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(155, 166, 177, 0.2);
}

input[type="button"].small,
button.small,
.button.small {
    width: auto;
    min-width: 4rem;
    font-size: 10pt;
    padding: 0 1rem;
}

input[type="button"].normal,
button.normal,
.button.normal {
    width: 100%;
    min-width: auto;
    height: 2.1em;
    line-height: 2.1em;
    font-size: 12pt;
    padding: 0 1em;
}

input[type="button"].normal:hover,
button.normal:hover,
.button.normal:hover {
    box-shadow: none;
}

input[type="button"].big,
button.big,
.button.big {
    height: 3em;
    line-height: 3em;
}

.textHighlight.textNbutton > button {
    height: 2em;
    line-height: 2em;
}

.buttonFrame {
    text-align: center;
    padding: 1em 0;
    margin: 2em 0;
}

.buttonFrame > button + button {
    margin-top: 1em;
}

/* DROPDOWN */

.selectLanguage {
    list-style: none;
    display: inline-flex;
    align-items: center;
    float: right;
    margin-right: 2em;
}

.selectLanguage li {
    display: block;
    font-size: 10pt;
    color: #ffffff;
    cursor: pointer;
}

.selectLanguage > li.signupLogin:after {
    content: '|';
    padding: 0 0.5em 0 1em;
}

.selectLanguage > li.languageList {
    cursor: pointer;
    margin: 0 0 0 1em;
}

.selectLanguage > li.loginIcon {
    font-size: 12pt;
    cursor: default;
}

.selectLanguage > li.loginIcon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f2be';
    color: #ffffff;
    font-weight: normal;
    padding-right: 0.5em;
}

.selectLanguage > li.logout {
    padding-left: 3em;
}

.selectLanguage > li.logout button {
    min-width: 5em;
    font-size: 11pt;
}

.selectLanguage > li > ul.languageOption {
    list-style: none;
    margin: 2em 0 0 -1em;
    padding: 0.8em 0;
    position: absolute;
    z-index: 100;
    transition: 0.5s padding, 0.5s background;
}

.selectLanguage > li > ul.languageOption li:after {
    content: '' !important;
    padding: 0;
}

.languageList:hover > ul.languageOption {
    background: #1c81d9;
}

.languageList li {
    line-height: 2rem;
    text-align: left;
    padding: 0 0.5em;
}

.languageList.flag {
    display: inline-block;
    width: 1.5rem;
    height: 1.4rem;
    line-height: 1.5rem;
    background-size: cover;
    background-position: 60%;
    border-radius: 1em;
}

.languageList li span.flag {
    display: inline-block;
    width: 1.5rem;
    height: 1.4rem;
    line-height: 1.5rem;
    background-size: cover;
    background-position: 60%;
    border-radius: 1em;
}

.languageList li span.lang {
    display: inline-block;
    line-height: 1.5rem;
    white-space: nowrap;
    vertical-align: bottom;
}

.languageList:not(:hover) > ul.languageOption {
    padding: 0;
    padding-top: 0.03em;
    z-index: 99;
}

.languageList:not(:hover) > ul.languageOption > * {
    visibility: hidden;
    height: 0;
    color: rgba(25, 25, 25, 0);
    transition: 0.5s 0.1s height, 0.5s 0.1s padding, 0.5s 0.1s margin, 0.3s color, 0.1s visibility;
    z-index: 99;
}

/* HEADER */

#pageWrapper {
    min-height: 70vh;
}

body.landing #pageWrapper {
    padding-top: 0;
}

#header {
    position: relative;
    background: #1c81d9;
    cursor: default;
    width: 100%;
    height: 9em;
    line-height: 4.5em;
    top: 0;
    z-index: 100;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.5);
}

#header .menu {
    margin: 0 auto;
    max-width: calc(100% - 4em);
    width: 75em;
    text-align: center;
}

#header .navigation {
    position: absolute;
    top: 4.5em;
    width: 100%;
    height: 4.5em;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    background: #1c81d9;
    padding: 0 1.7em;
    overflow: hidden;
}

#header h1 {
    height: inherit;
    line-height: inherit;
    margin: 0;
}

#header h1.logo {
    font-family: 'Days One', 'Noto Sans Korean', 'Nanum Gothic', sans-serif;
    width: 7em;
    height: 3em;
    background: url(../../images/logo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    font-size: 1.5em;
    float: left;
    color: transparent;
    cursor: pointer;
}

#header nav {
    text-align: center;
    height: inherit;
}

#header nav ul {
    margin: 0;
}

#header nav ul li {
    display: inline-block;
    margin-left: 1em;
    color: #ffffff;
    font-size: 1em;
    letter-spacing: -0.05em;
    cursor: pointer;
}

/* INDEX HEADER */

#header.transparent {
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: none;
    background: none;
    -moz-transition: -moz-0.2s background;
    -webkit-transition: -webkit-0.2s background;
    -ms-transition: -ms-0.2s background;
    transition: 0.2s background;
}

#header.transparent > .navigation > nav ul li {
    text-shadow: 0px 1px 5px rgba(0, 98, 204, 1);
}

#header.transparent > .navigation {
    top: 3.5em;
    border-top: 0;
    background: rgba(28, 129, 217, 0);
}

#header.transparent > .navigation.fixed {
    background: #1c81d9;
    top: 0;
}

/* COMMON MENU */

#nav ul.navWrapper li {
    display: inline-block;
    margin: 0 0.7em;
}

#nav > .navWrapper {
    position: relative;
    width: 100%;
    max-width: 42em;
    list-style: none;
    white-space: nowrap;
    margin: 0 auto;
    padding: 0;
    z-index: 10;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#nav > .navWrapper > .scrollHide {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
}

.chevronFrame {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 48em;
    height: 4em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.chevronFrame > .chevronPositionLeft,
.chevronFrame > .chevronPositionRight {
    cursor: pointer;
    border: none;
    position: absolute;
    outline: none;
}

.chevronFrame > .chevronPositionLeft {
    left: 0;
}

.chevronFrame > .chevronLeft:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f053';
    color: #ffffff;
    font-size: 1.5em;
    line-height: 82px;
}

.chevronFrame > .chevronPositionRight {
    right: 0;
}

.chevronFrame > .chevronRight:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f054';
    color: #ffffff;
    font-size: 1.5em;
    line-height: 82px;
}

/* LANGUAGE SELECT */

ul.languageSelect {
    list-style: none;
    width: 100%;
    height: 2em;
    line-height: 2em;
    padding: 0;
    margin: 0;
    border-radius: 0.375em;
    border: solid 1px #ced4da;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(206, 212, 218, 1)' /%3E%3C/svg%3E");
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: calc(100% - 1rem) center;
    text-overflow: ellipsis;
}

ul.languageSelect li {
    height: 2em;
    line-height: 2em;
    z-index: 2;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    padding-left: 0.5em;
    cursor: pointer;
}

ul.languageSelect li:last-child {
    border-bottom: 1px solid #ced4da;
    padding-bottom: 0.3em;
    margin-bottom: 1em;
}

ul.languageSelect li:not(.basic) {
    width: 100%;
    background: #ffffff;
    position: relative;
    z-index: 10001;
    display: none;
}

ul.languageSelect li:not(.basic):hover,
ul.languageSelect li.selected:not(.basic) {
    background: #ffffff;
}

ul.languageSelect li.basic {
    height: 2em;
    line-height: 2em;
    border: 0;
    cursor: pointer;
}

ul.languageSelect li p.flag {
    display: inline-block;
    width: 1.2em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    vertical-align: initial;
    margin: 0;
}

ul.languageSelect li span {
    padding-left: 0.4em;
    vertical-align: top;

}

ul.languageSelect.big,
ul.languageSelect.big li {
    height: 3em;
    line-height: 3em;
}

/* PUSH TOGGLE */

ul.pushToggle {
    list-style: none;
    padding: 0;
    margin: 2em 0;
}

ul.pushToggle li {
    position: relative;
    margin: 0;
    padding: 0;
    border-top: 1px solid #ced4da;
}

ul.pushToggle li:last-child {
    border-bottom: 1px solid #ced4da;
}

ul.pushToggle li div.strapline {
    display: none;
    padding: 0.9em 1em 1em;
    color: #525252;
    font-size: 11pt;
    word-break: break-all;
}

ul.pushToggle span.subject {
    display: block;
    width: 100%;
    background: rgba(206, 212, 218, 0.3);
    cursor: pointer;
    font-size: 12pt;

    line-height: 2em;
    padding: 0.75em 0.75em;
    word-break: break-all;
}

ul.pushToggle span.subject > span {
    font-weight: normal;
    padding-right: 2em;
}

ul.pushToggle li > div.button {
    float: none;
}

ul.pushToggle span.subject:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f078';
    float: right;
    padding-right: 1em;
}

/* ETC */

.buttonHeight {
    height: 2.5em;
}

.inputSmall input[type="checkbox"] {
    width: 0;
    height: 0;
}

.buttonColumn {
    display: flex;
    justify-content: center;
}

.marginTop {
    margin: 1em 0 0 0;
}

.radiusNone {
    border-radius: 0 !important;
}

.displayNone {
    display: none;
}

.pcNone {
    display: none;
}

.mobileNone {
    display: block;
}

.scrollContainer {
    width: 100%;
    height: 20vh;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 1.5em;
}

/* TEXT */

.caption {
    font-size: 2em;
    font-weight: 500;
    line-height: 2.5em;
    letter-spacing: -0.02em;
    color: #002f45;
    padding: 0.02em 0;
    border-bottom: 1px solid #ced4da;
}

.noBorderCaption {
    font-size: 2em;
    font-weight: 500;
    line-height: 2.5em;
    letter-spacing: -0.02em;
    color: #002f45;
    padding: 0.02em 0;
}

.subcaption {
    font-size: 1.2em;
    font-weight: 500;
    line-height: 2em;
    letter-spacing: -0.02em;
    color: #002f45;
    padding: 0.02em 0;
}

.strapline {
    font-size: 1em;
    color: #002f45;
    letter-spacing: -0.02em;
}

.textGreenSmall {
    color: #117a8b;
    font-size: 0.8em;
}

.textBold {
    font-weight: bold !important;
}

.sumOfName {
    color: #67757c;
}

.textRed {
    color: #ce2c4b !important;
}

.textRedSmall {
    padding: 1em 0 0 1.5em;
    color: #ce2c4b !important;
    font-size: 0.8em;
}

.textHighlight {
    background: rgba(196, 226, 255, 0.5);
    border-bottom: 2px solid #c4e2ff;
    padding: 0.5em 0.5em 0.5em 1em;
    font-size: 1.2em;
    font-weight: 500;
}

.skyblueBox {
    width: 10em;
    height: 2.5rem;
    line-height: 2.5rem;
    background: #26c6da;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    text-align: center;
    letter-spacing: -1px;
}

.textHighlight.textNspan > .skyblueBox {
    width: 7em;
    height: 2em;
    line-height: 2em;
}

.need:before {
    content: '*';
    color: #ce2c4b;
    padding-right: 0.3em;
}

.hyphen:after {
    content: '-';
    vertical-align: middle;
}

.markText {
    background: rgba(196, 226, 255, 0.3);
    padding: 0.4em 1em;
    border-radius: 0.375em;
    cursor: pointer;
    word-break: break-word;
}

.markText:hover {
    background: rgba(196, 226, 255, 0.7);
}

/* COMPANY STYLE */

.companyCaption {
    font-size: 3em;
    font-weight: 500;
    line-height: 2.5em;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
}

.subtitle {
    font-size: 18pt;
    font-weight: 500;
    color: #002f45;
    letter-spacing: -1px;
    text-align: center;
    padding: 0 !important;
}

.subtitle:after {
    content: '';
    display: block;
    width: 1.8em;
    height: 0.1em;
    background: #1e88e5;
    margin: 0.5em 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.iconCaption {
    font-size: 16pt;
    font-weight: 500;
    color: #222222;
    text-align: center;
    padding: 0 !important;
    margin: 0;
}

.iconSubCaption {
    font-size: 12pt;

    color: #0062cc;
}

/* ICON */

.iconCircle {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: #ced4da;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 0.3em;
}

.iconCircle.fa {
    font-size: 60pt;
}

.joinIcon:after,
.checkOff:after,
.checkOn:after,
.arrowUp:after,
.arrowDown:after,
.searchIcon .icon:after,
.closeButton:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
}

.closeButton {
    float: right;
    cursor: pointer;
}

.closeButton:before {
    content: '×';
    color: #ffffff;
    font-size: 1.2em;
    font-weight: 500;
    padding: 0 0.2em;
    background: #002f45;
}

.searchIcon {
    padding: 0;
    height: 2em;
    line-height: 2em;
    font-size: 13pt;
    text-align: center;
    border-radius: 0 0.375em 0.375em 0;
    background: #1e88e5;
    clear: none;
}

.searchIcon .icon:after {
    content: '\f002';
    color: #ffffff;
    outline: 0;
}

.flag {
    display: inline-block;
    width: 1.2em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    vertical-align: text-top;
    margin-right: 0.5em;
}

.joinIcon:after {
    content: '\f2c3';
    font-size: 8em;
    color: #67757c;
    display: flex;
    justify-content: center;
}

.checkOff:after {
    content: '\f00d';
    color: #67757c;
    font-size: 2em;
}

.checkOn:after {
    content: '\f00c';
    color: #26c6da;
    font-size: 2em;
}

.arrowUp,
.arrowDown {
    cursor: pointer;
}

.arrowUp:after {
    content: '\f062';
    font-size: 4em;
    color: #0062cc;
    padding-left: 0.2em;
}

.arrowDown:after {
    content: '\f063';
    font-size: 4em;
    color: #ce2c4b;
}

/* BORDER BOX */

.borderAll {
    border-radius: 0.375em;
    border: 1px solid #ced4da;
    overflow: hidden;
}

.borderAll > div > .row > div:nth-child(2) {
    padding: 0;
}

.borderBottom {
    width: 100%;
    border-radius: 0.375em;
    padding: 1em 1em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.borderRight {
    border-right: 1px solid #ced4da;
}

.markTitle {
    background: rgba(196, 226, 255, 0.5);
    font-size: 1.2em;
    font-weight: 500;
    line-height: 2em;
    letter-spacing: -0.02em;
    color: #002f45;
    padding: 0.02em 0 0.02em 0.5em;
}

/* DISPLAY FLEX & CENTER */

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

.flexCenter .textRedSmall {
    display: block;
    padding: 0;
}

.arrowCenter {
    display: flex;
    justify-content: center;
}

/* NOTICE & FAQ */

.boardView {
    width: 100%;
    padding: 1em 0;
    border-top: 2px solid #ced4da;
}

.boardView span.subject {
    padding: 0 1em;
}

.boardView .details {
    display: block;
    padding: 1em 1em;
    border-bottom: 1px solid #dadada;
}

.boardView span.name {
    color: #67757c;
    font-size: 0.9em;
}

.boardView span.name:after {
    content: '|';
    padding: 0 0.8em;
}

.boardView span.date {
    color: #67757c;
    font-size: 0.9em;
}

.boardView .contents {
    padding: 1em 1em;
    border-bottom: 1px solid #dadada;
}

.boardView .attachedFile {
    border-bottom: 1px solid #dadada;
    padding: 0.5em 0;
}

.boardView .attachedFile:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f0c6';
    padding: 0 1em;
    font-weight: normal;
}

.boardView .attachedFile:hover {
    background: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.boardView .backList {
    text-align: right;
    padding: 0.75em 0;
}

/* COLUMN MAP */

.columnMap {
    margin: 2em 0;
    padding: 0.5em 1.5em;
    text-align: left;
    border-radius: 0.375em;
    background: rgba(196, 226, 255, 0.2);
}

.columnMap > .row > .brand {
    font-size: 1.2em;

}

.columnMap > .row > .copyIcon,
.columnMap > .row > .mapMarkerIcon {
    cursor: pointer;
}

.columnMap > .row > .copyIcon:after {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f0c5';
    color: #67757c;
    font-size: 1.5em;
}

.columnMap > .row > .mapMarkerIcon:after {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    content: '\f041';
    font-size: 2em;
    color: #fc4b6c;
    padding-left: 0.5em;
    cursor: pointer;
}

.columnMap > .row > .copyIcon,
.columnMap > .row > .mapMarkerIcon {
    text-align: right;
    clear: none;
}

/* DIV BUTTON */

.countdownTimer {
    width: 100%;
    min-width: auto;
    height: 2.5rem;
    line-height: 2.5rem;
    background: #eef5f9;
    color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

.countdownTimer.small {
    height: 2em;
    line-height: 2em;
}

/* POSTION FIXED */

.positionFixed > .row > div.fixed {
    position: fixed;
    width: 100%;
    max-width: 22em;
}

.positionFixed > .row > div.right {
    float: right;
    text-align: right;
}

/* PADDING / MARGIN */

.paddingTB {
    padding: 2em 0;
    margin: 0;
}

.paddingZero {
    padding: 0 !important;
}

.paddingBottom {
    padding-bottom: 1em;
}

.marginBottom {
    margin-bottom: 1em;
}

/* PHONE / EMAIL CERTIFICATION */

.certification {
    padding: 1em 0;
}

.certification > .row {
    padding-bottom: 1em;
}

.certification > .row > div.inlineText {
    text-align: left;
}

.certification > .row > * > input[type="radio"] {
    display: none;
}

/* ACCOUNT CERTIFICATION */

.accountCertification {
    padding: 1em 0 2em 0;
}

.accountCertification > .row > div {
    padding-bottom: 1em;
}

/* INTRO */

.intro {
    max-height: 38.9em;
    text-align: center;
    background: #1c81d9;
    overflow: hidden;
}

/* INTRO LOGO */

.introLogo {
    background: url('../../images/logo.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    position: absolute;
    width: 20em;
    height: 6.8em;
    left: 35%;
    top: 30%;
    z-index: 11;
}

/* SECTION */

.wrapper {
    padding-top: 1em;
}

.wrapper.companyWrapper {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.wrapper.serviceWrapper {
    padding: 0;
    height: 100%;
    overflow: hidden;
}

/* INDEX SECTION */

/* 송금시뮬레이터 */

.simulator {
    padding-top: 1em;
}

.simulator > * > h2.caption {
    text-align: center;
    line-height: 1.8em;
    border-bottom: 0;
}

.simulator > * > h2.caption:after {
    display: block;
    content: '';
    width: 30%;
    margin: 0 auto;
    border-bottom: 1px solid #002f45;
}

.simulator > * > div > table.columnSimulator {
    margin-bottom: 1em;
}

.simulator > * > .buttonFrame {
    margin: 0;
}

/* 송금 서비스 가능 국가 */

.country {
    background: linear-gradient(225deg, #f5f6f8 , #e6e9ec 88%);
}

.country > .container {
    height: 38.125rem;
}

.country > * > h2.caption {
    text-align: center;
    line-height: 1.8em;
    border-bottom: 0;
}

.country > * > h2.caption:after {
    display: block;
    content: '';
    width: 35%;
    margin: 0 auto;
    border-bottom: 1px solid #002f45;
}

.country > .container.mapSvg {
    background: url('../../images/map.svg');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.country > * > .locationContainer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 송금 서비스 가능 국가 // 국가 & 표시 */

.location {
    position: absolute;
    z-index: 999;
    height: 0.75rem;
    width: 0.75rem;
}

.locationName {
    position: absolute;
    z-index: 999;
    display: block;
    height: 1.75rem;
}

.locationName span {
    display: block;
    height: 1.75rem;
    padding: 0 0.625rem;
    background-color: #acb1b6;
    color: #ffffff;
    font-size: 0.875rem;
    line-height: 1.75rem;
    white-space: nowrap;
    -webkit-border-radius: 0.1875rem;
    -moz-border-radius: 0.1875rem;
    border-radius: 0.1875rem;
    -webkit-box-shadow: 0 5px 20px -5px rgba(11,27,38, 0.2);
    box-shadow: 0 5px 20px -5px rgba(11,27,38, 0.2);
}

.locationName:after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
    height: 1px;
    width: 1.25rem;
    background-color: #545a5e;
}

.locationPin,
.locationPin:after {
    background-color: #acb1b6;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

.locationPin {
    position: relative;
    z-index: 999;
    display: block;
    height: 0.75rem;
    width: 0.75rem;
}

.locationPin:after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    content: '';
    height: 1.375rem;
    width: 1.375rem;
    margin: -11px 0 0 -11px;
    -webkit-animation: pulsate 2s linear;
    animation: pulsate 2s linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/* 사용 설정된 국가는 active 클래스 추가 */

.locationName span.active {
    background-color: #1e88e5;
}

.locationPin.active ,
.locationPin.active:after {
    background-color: #1e88e5;
}

/* 한국 */

.location-ko {
    top: 135px;
    left: 200px;
}
.location-ko .locationName {
    bottom: 70px;
    left: 70px;
}
.location-ko .locationName:after {
    bottom: -31px;
    left: -75px;
    width: 90px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 일본 */

.location-jp {
    top: 145px;
    left: 213px;
}
.location-jp .locationName {
    bottom: 10px;
    left: 60px;
}
.location-jp .locationName:after {
    bottom: 3px;
    left: -55px;
    width: 60px;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}

/* 베트남 */

.location-vt {
    top: 218px;
    left: 155px;
}
.location-vt .locationName {
    bottom: 71px;
    left: -105px;
}
.location-vt .locationName:after {
    bottom: -24px;
    left: 23px;
    width: 100px;
    -webkit-transform: rotate(227deg);
    transform: rotate(227deg);
}

/* 중국 */

.location-cn {
    top: 100px;
    left: 65px;
}
.location-cn .locationName {
    bottom: 20px;
    left: 30px;
}
.location-cn .locationName:after {
    bottom: -1px;
    left: -28px;
    width: 50px;
    -webkit-transform: rotate(-32deg);
    transform: rotate(-32deg);
}

/* 필리핀 */

.location-ph {
    top: 240px;
    left: 205px;
}
.location-ph .locationName {
    bottom: -46px;
    left: 30px;
}
.location-ph .locationName:after {
    bottom: 32px;
    left: -33px;
    width: 50px;
    -webkit-transform: rotate(52deg);
    transform: rotate(52deg);
}


/* 홍콩 */

.location-hk {
    top: 175px;
    left: 173px;
}
.location-hk .locationName {
    bottom: -13px;
    left: 60px;
}
.location-hk .locationName:after {
    bottom: 20px;
    left: -54px;
    width: 70px;
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}


/* 마카오 */

.location-mo {
    top: 185px;
    left: 166px;
}
.location-mo .locationName {
    bottom: 78px;
    left: -10px;
}
.location-mo .locationName:after {
    bottom: -36px;
    left: -24px;
    width: 80px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

/* 인도네시아 */

.location-id {
    top: 277px;
    left: 200px;
}
.location-id .locationName {
    bottom: -46px;
    left: 30px;
}
.location-id .locationName:after {
    bottom: 32px;
    left: -33px;
    width: 50px;
    -webkit-transform: rotate(52deg);
    transform: rotate(52deg);
}

/* 캄보디아 */

.location-kh {
    top: 225px;
    left: 138px;
}
.location-kh .locationName {
    bottom: -83px;
    left: -46px;
}
.location-kh .locationName:after {
    bottom: 46px;
    left: 8px;
    width: 80px;
    -webkit-transform: rotate(94deg);
    transform: rotate(94deg);
}

/* 스리랑카 */

.location-lk {
    top: 240px;
    left: 66px;
}
.location-lk .locationName {
    bottom: -46px;
    left: -105px;
}
.location-lk .locationName:after {
    bottom: 32px;
    left: 40px;
    width: 80px;
    -webkit-transform: rotate(148deg);
    transform: rotate(148deg);
}

/* 네팔 */

.location-np {
    top: 178px;
    left: 67px;
}
.location-np .locationName {
    bottom: -46px;
    left: -105px;
}
.location-np .locationName:after {
    bottom: 32px;
    left: 40px;
    width: 80px;
    -webkit-transform: rotate(148deg);
    transform: rotate(148deg);
}

/* 송금 서비스 가능 국가 // 애니메이션 효과  */

@-webkit-keyframes pulsate{
    0% {
        -webkit-transform: scale(0);
        opacity: 0.05;
    }
    20% {
        -webkit-transform: scale(0.7);
        opacity: 0.1;
    }
    40% {
        -webkit-transform: scale(0.9);
        opacity: 0.2;
    }
    60% {
        -webkit-transform: scale(1.1);
        opacity: 0.3;
    }
    100% {
        -webkit-transform: scale(1.4);
        opacity: 0;
    }
}
@keyframes pulsate{
    0% {
        transform: scale(0);
        opacity: 0.05;
    }
    20% {
        transform: scale(0.7);
        opacity: 0.1;
    }
    40% {
        transform: scale(0.9);
        opacity: 0.2;
    }
    60% {
        transform: scale(1.1);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

/* 송금 보내는 방법 / 송금 받는 방법 */

.method {
    padding-top: 1em;
    text-align: center;
}

.method > div * > h2.caption {
    text-align: center;
    line-height: 1.8em;
    border-bottom: 0;
}

.method > div * > h2.caption:after {
    display: block;
    content: '';
    width: 55%;
    margin: 0 auto;
    border-bottom: 1px solid #002f45;
}

.method > div * > .moneySend:before,
.method > div * > .moneySend:after,
.method > div * > .moneyReceive:before,
.method > div * > .moneyReceive:after {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    color: #ffffff;
    font-size: 5em;
}

.method > div * > .moneySend,
.method > div * > .moneyReceive {
    display: inline-block;
    width: 12em;
    height: 12em;
    line-height: 12em;
    text-align: center;
    background: #0062cc;
    border-radius: 100%;
    margin-bottom: 1em;
}

.method > div * > .moneySend:before {
    content: '\f1c0';
}

.method > div * > .moneySend:after {
    content: '\f176';
}

.method > div * > .moneyReceive:before {
    content: '\f1c0';
}

.method > div * > .moneyReceive:after {
    content: '\f175';
}

.method > div * > p.ex {
    letter-spacing: -1px;
    color: #67757c;
    margin-bottom: 1em;
}

/* 공지사항 / FAQ */

.blackBoard {
    padding-top: 1em;
    background: #e6f3ff;
}

.blackBoard > div * > h2.caption {
    line-height: 1.8em;
    border-bottom: 0;
    margin: 0 0 0.3em 0;
}

.blackBoard > div * > h2.caption:after {
    display: block;
    content: '';
    width: 90%;
    border-bottom: 1px solid #002f45;
}

.blackBoard > div * > h2.caption > .more {
    float: right;
    font-size: 0.5em;
    padding-right: 3em;
    cursor: pointer;
}

.blackBoard > div * > table.boardList {
    margin: 0;
}

.blackBoard > div * > table.boardList td {
    padding: 0.2em;
    cursor: pointer;
}

.blackBoard > div * > table.boardList td:before {
    content: '·';
    font-weight: 500;
    padding-right: 0.4em;
}

/* 회사소개 */

.companyTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23em;
    background: url('../../images/company.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.companyContent {
    position: relative;
    width: 52.5em;
    max-width: calc(100% - 4em);
    top: -3.9em;
    margin: 0 auto;
}

.companyTabContent p {
    padding-bottom: 2.5em;
    text-align: center;
}

.companyTabContent .mapFrame {
    width: 100%;
    height: 100%;
    min-height: 25em;
    margin-bottom: 1em;
    overflow: hidden;
}

.companyTabContent .mapFrame iframe {
    width: 100%;
    height: 100%;
    min-height: 25em;
    margin-bottom: 1em;
    overflow: hidden;
}

/* COMPANY TABS */

.companyTabs {
    width: 100%;
    margin: 1em 0;
}

.companyTabsNav {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background: rgba(103, 117, 124, 0.9);
}

.companyTabsNav li {
    display: inline-block;
    float: left;
    width: 25%;
    font-size: 14pt;
    text-align: center;
    padding: 0.5em 1em;
    border: 1px solid transparent;
    cursor: pointer;
    word-break: keep-all;
}

.companyTabsNav li a {
    color: #ffffff;
}

.companyTabsNav li:hover,
.companyTabsNav li:active {
    background: #0062cc;
    color: #ffffff;
}

.companyTabsNav li a:hover,
.companyTabsNav li a:active {
    color: #ffffff !important;
}

.companyTabsNav li.active {
    background: #ffffff;
}

.companyTabsNav li.active a,
.companyTabsNav li.active a:hover {
    color: #002f45 !important;
}

.companyTabContent {
    padding: 4em 1em;
    background: transparent;
}

/* 서비스 소개 */

.serviceTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 23em;
    background: url('../../images/service.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.methodList {
    list-style: none;
    margin: 3em 0 0 3em;
}

.methodList li {
    padding: 0.5em 0;
    text-indent: -3rem;
}

.methodList li:before {
    display: inline-block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.1875rem;
    color: #002f45;
    font-size: 1.125rem;
    text-align: center;
    background: #ced4da;
    border: 1px solid #ced4da;
    border-radius: 2.1875rem;
    margin-right: 0.5em;
    text-indent: 0;
}

.methodList li:nth-child(1):before {
    content: '1';
}

.methodList li:nth-child(2):before {
    content: '2';
}

.methodList li:nth-child(3):before {
    content: '3';
}

.methodList li:nth-child(4):before {
    content: '4';
}

.methodList li:nth-child(5):before {
    content: '5';
}

.methodList li:nth-child(6):before {
    content: '6';
}

.methodList li:nth-child(7):before {
    content: '7';
}

.methodList li:nth-child(8):before {
    content: '8';
}

.methodList li:nth-child(9):before {
    content: '9';
}

.methodList li:nth-child(10):before {
    content: '10';
}

/* FAQ TABS */

.faqTabs {
    width: 100%;
    margin: 1em 0;
}

.faqTabsNav {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.faqTabsNav li {
    display: inline-block;
    float: left;
    width: 20%;
    font-size: 14pt;
    color: #002f45;
    text-align: center;
    padding: 0.5em 1em;
    border: 1px solid transparent;
    border-bottom: 1px solid #ced4da;
    cursor: pointer;
}

.faqTabsNav li.active {
    border: 1px solid #ced4da;
    border-top: 1px solid #002f45;
    border-bottom: 0;
}

.faqTabsNav li.active a {
    color: #002f45;
}

.faqTabContent {
    padding: 0.5em 0;
    background: transparent;
}

.faqTabContent > ul.pushToggle li {
    margin: 0.7em 0;
}

.faqTabContent > ul.pushToggle li,
.faqTabContent > ul.pushToggle li:last-child {
    border-top: 0;
    border-bottom: 0;
}

/* 거래관리 TABS */

.menuBox {
    width: 100%;
    height: 3em;
    text-align: center;
    padding: 0;
}

.tabsMenu {
    display: inline-block;
    float: left;
    width: 25%;
    font-size: 1em;
    color: #002f45;
    background: #e3e8ee;
    text-align: center;
    padding: 0.7em 1em;
    cursor: pointer;
    border-bottom: 3px solid #43565f;
}

.tabsMenu.active {
    color: #ffffff;
    background: #43565f;
}

/* FOOTER */

#footer {
    background: #e6e6e6;
    background: url('../../images/footer.png');
    background-size: cover;
    background-position: 30%;
    text-align: left;
    box-shadow: 0 -2px 8px 1px rgba(0, 0, 0, 0.10);
}

#footer h1 {
    height: inherit;
    line-height: inherit;
    left: 1.25em;
    margin: 0;
}

#footer h1.logo {
    font-family: 'Days One', 'Noto Sans Korean', 'Nanum Gothic', sans-serif;
    width: 7em;
    height: 3em;
    background: url(../../images/footerlogo.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    font-size: 20pt;
    color: #262d30;
    color: transparent;
    opacity: 0.7;
}

#footer span {
    color: #262d30;
    font-size: 0.8em;
    line-height: 1em;
    text-align: left;
}

#footer .sitemap {
    list-style: none;
    margin: 0;
    padding: 0 0 2em 0;
}

#footer .sitemap li {
    display: inline-block;
    color: #262d30;
    font-size: 0.9em;
    padding-left: 1em;
    cursor: pointer;
}

#footer .sitemap li:after {
    content: '|';
    padding-left: 1.5em;
}

#footer .sitemap li:first-child {
    padding-left: 0;
}

#footer .sitemap li:last-child:after {
    content: '';
}

#footer .copyright {
    color: #262d30;
    font-size: 0.8em;
    line-height: 1em;
    padding: 0;
}

#footer .copyright li {
    display: block;
    list-style: none;
    line-height: 2em;
    padding-left: 0;
}


/* 2019-01-23 HYEJIN - 404 / 500 ERROR PAGE */

.errorPage {
    background: #e6f3ff;
    height: 100vh;
    text-align: center;
}

.errorPage .monitorImg {
    display: flex;
    justify-content: center;
    align-items: center;
}

.errorPage .monitorImg img {
    position: relative;
    user-select: none;
    z-index: 1;
}

.errorPage .monitorText {
    position: absolute;
    font-size: 5em;
    font-weight: bold;
    z-index: 9;
}

.errorPage p {
    margin: 0 0 1.5em 0;
}

/* MEDIA QUERY */

@media screen and (max-width: 2560px) {

    body,
    input,
    select,
    textarea {
        font-size: 13pt;
    }

    /* INDEX */
    .appearFrame {
        left: 50.33%;
    }

}

@media screen and (max-width: 1680px) {

    body,
    input,
    select,
    textarea {
        font-size: 13pt;
    }

    /* INDEX */
    .appearFrame {
        left: 47.7%;
    }

    /* DROPDOWN */

    .languageList li span.lang {
        display: none;
    }

}

@media screen and (max-width: 1440px) {

    /* INDEX */
    .appearFrame {
        left: 44.5%;
    }

    .introLogo {
        left: 24%;
    }

}

@media screen and (max-width: 1280px) {

    body,input,select,textarea {
        font-size: 12pt;
    }

    /* WRAPPER */
    .wrapper {
        padding: 4.5em 0 2.5em 0;
    }

    /* NAV */
    .chevronFrame > .chevronPositionLeft,
    .chevronFrame > .chevronPositionRight {
        line-height: 5.5em;
    }

    .chevronFrame > .chevronLeft:before,
    .chevronFrame > .chevronRight:before {
        font-size: 1em;
    }

    /* INDEX */
    .appearFrame {
        left: 37.7%;
    }

    .introLogo {
        left: 19%;
    }

    /* ON TEXT */
    .appearThird > div:nth-child(4):after {
        top: 85px;
        font-size: 0.8em;
    }

    .appearThird > div:nth-child(5):after {
        top: -110px;
        font-size: 0.8em;
    }

    .appearThird > div:nth-child(6):after {
        top: 85px;
        font-size: 0.8em;
    }

    .appearFourth > div:nth-child(3):after {
        top: -110px;
        font-size: 0.8em;
    }

    .appearFourth > div:nth-child(4):after {
        top: 85px;
        font-size: 0.8em;
    }

    .appearFourth > div:nth-child(5):after {
        top: -110px;
        font-size: 0.8em;
    }

    /* 송금 서비스 가능 국가 // 국가&표시 */

    /* 한국 */

    .location-ko {
        top: 142px;
        left: 196px;
    }

    /* 일본 */

    .location-jp {
        top: 152px;
        left: 217px;
    }

    /* 베트남 */

    .location-vt {
        top: 225px;
        left: 151px;
    }

    /* 중국 */

    .location-cn {
        top: 107px;
        left: 61px;
    }

    /* 홍콩 */

    .location-hk {
        top: 182px;
        left: 176px;
    }

    /* 마카오 */

    .location-mo {
        top: 192px;
        left: 162px;
    }

    /* 인도네시아 */

    .location-id {
        top: 284px;
        left: 196px;
    }

    /* 캄보디아 */

    .location-kh {
        top: 232px;
        left: 134px;
    }

    /* 스리랑카 */

    .location-lk {
        top: 247px;
        left: 62px;
    }

    /* 네팔 */

    .location-np {
        top: 185px;
        left: 63px;
    }

    /* ETC */

    .companyContent {
        top: -4.16em;
    }

    .companyTitle {
        min-height: 20.85em;
    }

    .searchIcon {
        font-size: 12pt;
    }

    /* FOOTER */
    #footer {
        padding: 0;
    }

}

@media screen and (max-width: 1024px) {

    /* INDEX */
    .appearFrame {
        left: 31.3%;
    }

}

@media screen and (max-width: 980px) {

    body,input,select,textarea {
        font-size: 12pt;
    }

    /* INDEX SECTION */

    .method > div *,
    .blackBoard > div * {
        clear: none;
    }

    /* WRAPPER */

    .wrapper {
        padding: 4.5em 2.5em 2.5em 2.5em;
    }

    .phoneNumber {
        padding: 0 !important;
    }

    .certification > .row > div > .countdownTimer {
        margin-top: 1em;
    }

    /* TABS */

    .tabsMenu {
        font-size: 0.9em;
        height: inherit;
        word-break: normal;
        padding: 0.7em 0.7em;
    }

    /* INDEX */

    .appearFrame {
        left: 32.7%;
    }

    /* INDEX // 송금 서비스 가능 국가 */

    .country > * > .backgroundMap {
        min-height: 30em;
        background: url(../../images/map.png);
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: 15%;
    }

    .country > * > .backgroundMap > .roundFlag {
        position: absolute;
        width: 7em;
        height: 7em;
        text-align: center;
        border-radius: 100%;
        border: 1px solid #d3d3d3;
        background: radial-gradient(ellipse at top, rgba(241, 241, 241, 1), rgba(218, 218, 218, 1));
    }

    .country > * > .backgroundMap > .roundFlag:nth-child(1) {
        left: 60%;
        margin-top: 5em;
    }

    .country > * > .backgroundMap > .roundFlag:nth-child(2) {
        left: 75%;
        margin-top: 9em;
    }

    .country > * > .backgroundMap > .roundFlag:nth-child(3) {
        left: 58%;
        margin-top: 15em;
    }

    .country > * > .backgroundMap > .roundFlag:nth-child(4) {
        left: 74%;
        margin-top: 20em;
    }

    /* ETC */

    .companyContent {
        top: -3.53em;
    }

    .certification > .row > div.inlineText {
        text-align: center;
    }

    .borderAll > div > .row > div:nth-child(2) {
        padding: 0 0 0 1.5em;
    }

    .borderRight {
        border-right: 0;
    }

    .paddingAuto > .row > div {
        padding-bottom: 1em;
    }

    .largePaddingTop {
        padding-top: 1em;
    }

    .buttonColumn {
        display: block;
    }

    .buttonColumn > div {
        padding-bottom: 1em;
    }

    .rowCenter > div {
        text-align: center;
    }

    .companyTitle {
        min-height: 21.45em;
    }

    .faqTabsNav li,
    .companyTabsNav li {
        font-size: 11pt;
        padding: 0.5em 0.5em;
    }

    /* ID / PASSWROD FIND */

    .userInfoFind > div * > .caption {
        font-size: 1.2em;
        padding-bottom: 0.5em;
    }

    .userInfoFind > div > .row {
        margin: 0;
    }

    .userInfoFind > .inputInfo {
        padding: 1.5em 0;
    }

    .userInfoFind > .inputInfo > hr {
        display: block;
    }

    .userInfoFind > .inputInfo > .row > div {
        padding-bottom: 1em;
    }

    /* FOOTER */

    #footer {
        padding: 0 1.25em;
    }

}

#navPanel,
#titleBar {
    display: none;
}

@media screen and (max-width: 736px) {

    html,body {
        overflow-x: hidden;
    }

    body,input,select,textarea {
        font-size: 12pt;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.2em;
    }

    h4 {
        font-size: 1em;
    }

    /* WRAPPER */
    .wrapper {
        padding: 3.25em 1.5em 1.25em 1.5em;
    }

    /* HEADER */
    #header {
        display: none;
    }

    .selectLanguage {
        float: left;
        margin: 1.5em 0 0 0;
        padding: 0;
    }

    .selectLanguage > li > ul.languageOption {
        position: absolute;
        height: auto;
        left: 0.5em;
        top: 3.5em;
        padding: 1em 0;
        margin: 0;
        z-index: 100;
        -moz-transition: -mos-0.5s padding, 0.5s background;
        -webkit-transition: -webkit-0.5s padding, 0.5s background;
        -ms-transition: -ms-0.5s padding, 0.5s background;
        transition: 0.5s padding, 0.5s background;
    }

    .selectLanguage > li {
        display: none;
    }

    .selectLanguage > .languageList {
        display: block;
    }

    .selectLanguage > .languageList:hover > ul.languageOption {
        background: #1c81d9;
    }

    /* MODAL */
    .modalBody.small {
        margin: 0 2em;
    }

    .modalBody.medium .fileFrame {
        display: block;
        justify-content: none;
    }

    .modalBody.medium .fileFrame div + div {
        margin: 0;
    }

    .modalBody.medium .photograph label {
        display: inline-block;
        top: 2.5em;
    }

    .modalBody.medium .imgUpload label {
        display: inline-block;
        top: 5.5em;
    }

    .modalBody.medium .imgBox {
        height: calc(14em - 3rem);
        line-height: calc(14em - 3rem);
    }

    .modalBody.medium .imgBox.onMost {
        height: calc(14em - 6rem);
        line-height: calc(14em - 6rem);
    }

    .modalBody.medium .imgBox > .noImage {
        opacity: 0;
    }

    /* 송금 서비스 가능 국가 // 국가&표시 */

    .country > .container {
        height: 28.125rem;
    }

    .country > .container.mapSvg {
        background: none;
        padding: 3em 3em;
    }

    .country > * > .locationContainer {
        position: relative;
        margin-top: 3rem;
    }

    .locationName {
        height: 36px;
        font-size: 20px;
        line-height: 36px;
    }

    .location {
        position: inherit;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        float: left;
        height: auto;
        width: 50%;
        text-align: center;
        margin-bottom: 8px;
        padding-left: 30px;
    }

    .location:after,
    .location:before {
        display: block;
        content: '';
        clear: both;
    }

    .locationPin {
        position: absolute;
        left: 0;
        top: 4px;
        margin: 5px 10px 5px;
    }

    .location .locationName {
        position: inherit;
        display: inline-block;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }

    .location .locationName > span {
        background: transparent;
        color: #43565f;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .locationName:after {
        display: none;
    }

    /* TABLE */
    table.column td:first-child {
        width: 100%;
        color: #002f45;
        text-align: left;
        padding: 0.45em 0.75em;
        background: rgba(237, 238, 239, 0.4);
        border-radius: 0.375em;
    }

    table.column td {
        display: block;
        width: 100%;
        padding: 0.45em;
    }

    table.column tr.exception td:first-child {
        display: block;
        width: 100%;
        padding: 0.45em 0.75em;
    }

    table.column tr.exception td {
        display: inline-block;
        width: 5%;
        padding: 0.45em 0.3em;
    }

    table.column tr.exception td:nth-child(2),
    table.column tr.exception td:nth-child(4) {
        width: 45%;
    }

    /* COLUMN HALFLIST */

    TABLE.columnHalfList thead {
        display: none;
    }

    table.columnHalfList tbody tr {
        display: table;
        border-top: 2px solid #e9e9e9;
        border-bottom: 2px solid #e9e9e9;
        margin-bottom: 1em;
    }

    table.columnHalfList tbody td {
        display: inline-block;
        width: 50%;
        float: left;
        text-align: left;
        padding: 0.8em 0.5em;
        vertical-align: text-top;
        word-break: break-all;
    }

    table.columnHalfList tbody td span.smallTitle {
        display: block;
        font-size: 9pt;
        color: #67757c;
        padding-right: 0.5em;
    }

    /* COLUMN SIUMLATOR */

    table.columnSimulator tr td:first-child {
        padding: 1em 0.5em;
    }

    table.columnSimulator tr td,
    table.columnSimulator tr td.commission {
        display: block;
        padding: 1em 1em 1em 0;
    }

    table.columnSimulator tr td.receiveSum:before {
        display: block;
        text-align: right;
        padding-right: 1em;
    }

    table.columnSimulator tr td.sum > input[type="text"],
    table.columnSimulator tr td.commission > input[type="text"] {
        min-width: 6em;
        font-size: 1.3em;
        text-align: center;
        padding: 0;
    }

    table.columnSimulator tr td.receiveSum > input[type="text"] {
        min-width: 6em;
        font-size: 1.3em;
        text-align: right;
        padding: 0;
        letter-spacing: normal;
    }

    /* ROWLIST */
    table.rowList tbody tr {
        border-bottom: 0;
    }

    table.rowList tr td:first-child {
        width: 100%;
        color: #002f45;
        text-align: left;
        padding: 0.45em 0.75em;
        background: rgba(237, 238, 239, 0.4);
        border-bottom: 0;
        border-radius: 0.375em;
    }

    table.rowList td {
        display: inline-block;
        float: left;
        width: 50%;
        padding: 0.45em 0.75em;
    }

    table.rowList td > button {
        float: right;
        min-width: 9em;
        height: 2em;
        line-height: 2em;
        font-size: 11pt;
        padding: 0 1em;
    }

    /* TABLE BOARD */

    table.board thead th,
    table.board tbody td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 8em;
        font-size: 11pt;
    }

    /* TABS */
    .menuBox {
        height: 4em;
    }

    .tabsMenu {
        padding: 0.7em 0.69em;
    }

    .tabsMenu:nth-child(1) {
        clip: rect(0, 30px, 0, 0);
    }

    .tabsMenu:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        display: block;
    }

    .tabsMenu:nth-child(1):before {
        content: '\f06a';
    }

    .tabsMenu:nth-child(2):before {
        content: '\f064';
    }

    .tabsMenu:nth-child(3):before {
        content: '\f112';
    }

    .tabsMenu:nth-child(4):before {
        content: '\f02d';
    }

    .tabsMenu:nth-child(5):before {
        content: '\f073';
    }

    /* TABS */

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

    /* PUSH TOGGLE */

    ul.pushToggle span.subject {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 1em;
        font-size: 11pt;
    }

    ul.pushToggle span.subject > span {
        display: block;
    }

    /* POSTION FIXED */
    .positionFixed > .row > div.fixed {
        position: fixed;
        width: 78%;
        left: 47%;
        transform: translateX(-50%);
    }

    .positionFixed > .row > div.right {
        float: none;
        text-align: center;
        padding-top: 3em;
    }

    /* INDEX */
    .intro {
        max-height: 33em;
    }

    .appearFrame {
        left: 0;
    }

    .introLogo,
    .appearFirst,
    .backgroundFirst {
        display: none;
    }

    /* ETC */
    .noBorderCaption,
    .caption {
        font-size: 1.5em;
    }

    .companyCaption {
        font-size: 2em;
    }

    .flexCenter {
        flex-direction: column;
        text-align: center;
    }

    .flexCenter > div {
        padding-bottom: 1em;
    }

    .arrowUp,
    .arrowDown {
        font-size: 1em;
    }

    .pcNone {
        display: block;
    }

    .mobileNone {
        display: none;
    }

    /* COMPANY & SERVICE */

    .companyContent {
        width: 100%;
        max-width: none;
        margin: 0;
        background: #ffffff;
    }

    /* NAV */

    #pageWrapper {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        padding-bottom: 0.03em;
        padding-top: 2.75em !important;
    }

    #titleBar {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        display: block;
        height: 4.2em;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1001;
        background: #1c81d9;
    }

    #titleBar .title {
        background: #1c81d9;
        color: #ffffff;
        display: block;
        width: 100%;
        height: inherit;
        font-family: 'Days One', 'Noto Sans Korean', sans-serif;
        background: url(../../images/logo.png);
        background-repeat: no-repeat;
        background-size: 7em 1.2em;
        background-position: center center;
        font-size: 1.2em;
        line-height: 3.5em;
        text-align: center;
        box-shadow: 0 0px 10px rgba(0, 0, 0, 0.5);
    }

    #titleBar .title a {
        color: inherit;
        border: 0;
    }

    #titleBar .toggle {
        text-decoration: none;
        height: 4.1875rem;
        right: 0;
        position: absolute;
        top: 0;
        width: 2.875rem;
        outline: 0;
        border: 0;
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
    }

    #titleBar .toggle:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-transform: none !important;
    }

    #titleBar .toggle:before {
        background: #0062cc;
        color: rgba(255, 255, 255, 0.5);
        content: '\f0c9';
        display: block;
        font-size: 1.2em;
        right: 0;
        line-height: 3.5em;
        position: absolute;
        text-align: center;
        top: 0;
        width: 2.375em;
    }

    #navPanel {
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform: translateX(224px);
        -webkit-transform: translateX(224px);
        -ms-transform: translateX(224px);
        transform: translateX(224px);
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
        display: block;
        height: 100%;
        right: 0;
        overflow-y: auto;
        position: fixed;
        top: 0;
        width: 224px;
        z-index: 10002;
        background: #ffffff;
        padding: 0;
        box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.10);
    }

    #navPanel .link {
        border: 0;
        color: #4b6b7a;
        letter-spacing: -0.03em;
        display: block;
        height: 3.3em;
        line-height: 3.3em;
        padding: 0 1.25em;
        text-decoration: none;
        cursor: pointer;
    }

    #navPanel .link:hover,
    #navPanel .link:focus {
        color: #002f45 !important;
        background: #eef5f9;
    }

    #navPanel .link:first-child {
        margin-top: 1.5em;
    }

    #navPanel .link.active {
        background: #c4e2ff;
    }

    /* MODIFY */

    .loginActivity {
        background: #1c81d9;
        height: 4.2em;
        box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.5);
        font-size: 1em;
        line-height: 4.2em;
        color: #ffffff;
        padding-left: 1em;
    }

    .loginActivity:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-family: FontAwesome;
        content: '\f2bd';
        color: #ffffff;
        font-weight: 100;
        padding: 0 0.6em 0 0.3em;
    }

    .signupActivity {
        background: #1c81d9;
        height: 4.2em;
        box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.5);
        font-size: 1em;
        line-height: 4.2em;
        color: #ffffff;
        padding-left: 1em;
    }

    .signupActivity > .signupLogin,
    .signupActivity > .signupJoin {
        padding: 0 0.8em;
        cursor: pointer;
    }

    body.navPanel-visible .toggle {
        -moz-transform: translateX(-224px);
        -webkit-transform: translateX(-224px);
        -ms-transform: translateX(-224px);
        transform: translateX(-224px);
        -moz-transition: -moz-transform 0.5s ease;
        -webkit-transition: -webkit-transform 0.5s ease;
        -ms-transition: -ms-transform 0.5s ease;
        transition: transform 0.5s ease;
    }

    body.navPanel-visible #navPanel {
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    /* FOOTER */
    #footer {
        padding: 0 1.5em;
    }

}

@media screen and (max-width: 520px) {

    table.columnListData {
        border: 0;
    }

    table.columnListData thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.columnListData tbody tr {
        display: block;
        margin-bottom: 0.625em;
        border: 1px solid #b9b9b9;
    }

    table.columnListData tbody td {
        display: block;
        padding: 0.8em 1.5em 0.8em 0.5em;
        background: #f9f9f9;
        text-align: right;
        word-break: break-word;
    }

    table.columnListData tbody td:last-child {
        margin-bottom: 0.3em;
    }

    table.columnListData tbody td:before {
        content: attr(data-label);
        width: 8em;
        float: left;
        text-align: left;
        margin-left: 1em;
    }

    table.columnListData tbody td:nth-child(2n + 1) {
        background: #ffffff;
    }

}

@media screen and (max-width: 480px) {

    html,body {
        min-width: 320px;
    }

    body,input,select,textarea {
        font-size: 11pt;
    }

    /* BUTTON */
    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    button,
    .button {
        padding: 0;
        font-size: 11pt !important;
    }

    /* INDEX SECTION */

    .method,
    .blackBoard {
        padding-top: 0;
    }

    .method > div * > .row,
    .blackBoard > div * > .row {
        margin: 0;
    }

    .method > div * > div {
        padding: 0;
    }

    .method > div * > div,
    .blackBoard > div * > div {
        clear: left;
        width: 100%;
        margin-bottom: 2em;
    }

    /* WRAPPER */
    .simulator,
    .wrapper {
        padding: 3em 1.25em 1em 1.25em;
    }

    /* INPUT // SELECT */
    .inputSmall input[type="checkbox"] + label,
    .inputSmall input[type="radio"] + label {
        font-size: 0.8em;
    }

    /* TABLE */

    table.columnBorder {
        font-size: 0.8em;
    }

    table.rowList td.w100 {
        display: block;
        width: 100%;
    }

    table.rowList td > button {
        font-size: 11pt;
    }

    table.rowList td.w100 > button {
        float: none;
    }

    /* MODAL */
    .modalHead {
        font-size: 1em;
    }

    /* SERVICE TABS */

    .methodList {
        list-style: none;
        padding: 0;
        margin: 3em 0 0 0;
    }

    .methodList li {
        padding: 0.5em 0;
        text-align: center;
    }

    .methodList li:before {
        display: block;
        margin: 0.5em auto;
    }

    /* ETC */

    .noBorderCaption, .caption {
        font-size: 1.3em;
    }

    .companyCaption {
        word-break: break-word;
        font-size: 1.5em;
        line-height: 1.5em;
    }

    .textHighlight.textNbutton {
        height: 5em;
    }

    .textHighlight.textNbutton > button {
        display: block;
        margin-top: 1em;
        font-size: 11pt;
        float: none;
    }

    .loginForm > .findInfo > .row > div:first-child {
        text-align: right;
    }

    .loginForm > .findInfo > .row > div:first-child:after,
    .loginForm > .findInfo > .row > div:last-child {
        padding-left: 0.5em;
    }

    .loginForm > .findInfo > .row > div {
        padding: 0;
    }

    /* FOOTER */
    #footer {
        padding: 0 1.25em;
    }

    #footer .sitemap li {
        display: inline-block;
        font-size: 0.9em;
        padding-left: 0.5em;
        cursor: pointer;
    }

    #footer .sitemap li:after {
        content: '|';
        padding-left: 0.5em;
    }

    #footer .copyright {
        line-height: inherit;
    }

    #footer .copyright li {
        border-left: 0;
        display: block;
        margin: 0;
        padding: 0;
    }

    #footer .copyright li:after {
        content: '';
    }

    /* ERROR PAGE */

    .errorPage .monitorImg {
        padding-top: 40%;
    }

    .errorPage .monitorImg img {
        width: 50%;
        height: auto;
    }

    .errorPage .monitorText {
        font-size: 3em;
    }

}

@media screen and (max-width: 410px) {

    .tabsMenu {
        min-width: 25%;
    }

    .appearFrame {
        left: -55%;
    }

}

@media screen and (max-width: 370px) {

    .tabsMenu {
        min-width: 19.5%;
    }

    table.board thead th, table.board tbody td {
        max-width: 6em;
    }

}

/* 2019-01-21 HYEJIN */

@media screen and (max-width: 320px) {

    .accountCertification > .row > div {
        width: 100%;
    }

    .errorPage .monitorText {
        font-size: 2em;
    }
}

/* 2018-07-09 HYEJIN // JUQERY DIALOG UI */

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 47, 69, 0.3) !important;
    z-index: 9999;
}

.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    outline: 0;
    z-index: 99999;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 1rem 1rem;
    position: relative;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #0062cc;
}

.ui-dialog .ui-dialog-title {
    margin: 0.1rem 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
    margin: -1rem 0 0 0;
    height: 1.5rem;
}

.ui-dialog .ui-dialog-titlebar-close:after {
    content: '×';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    text-indent: 0;
    color: #ffffff;
    font-size: 24pt;
    font-weight: 500;
    width: 3rem;
    height: 3.8rem;
    line-height: 3.8rem;
    outline: 0;
}

.ui-button-icon-only {
    text-indent: -999rem;
    white-space: nowrap;
}

.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: 1.5rem 1rem;
}

.ui-dialog input[type="text"],
.ui-dialog input[type="password"],
.ui-dialog input[type="email"],
.ui-dialog input[type="tel"],
.ui-dialog input[type="submit"],
.ui-dialog select,
.ui-dialog textarea {
    margin-bottom: 1rem;
}

.ui-dialog-titlebar > .ui-button {
    display: none;
}

.ui-button {
    width: auto;
    min-width: 5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    background: #67757c;
    color: #ffffff;
    border-radius: 0.375em;
    font-size: 12pt;
    letter-spacing: -1px;
}

.ui-button:hover {
    background: #7b858f;
    box-shadow: 0 14px 26px -12px rgba(155, 166, 177, 0.42), 0 4px 23px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(155, 166, 177, 0.2);
}

.point {
    background: #1e88e5;
}

.point:hover {
    background: #0062cc;
}

/* 2018-07-09 HYEJIN // JQUERY DATEPICKER UI */

.ui-datepicker {
    border-radius: 0.375em;
    padding: 0;
    width: 19rem !important;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    width: 1.8rem;
    height: 1.8rem;
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 2.3rem;
    line-height: 1.8rem;
    font-weight: 500;
    text-align: center;
}

.ui-state-default,
.ui-widget-header .ui-icon,
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    display: none;
    background-image: none;
    transition: none;
    border-radius: 0;
}

.ui-corner-all {
    border-radius: 0.375em;
}

.ui-datepicker .ui-datepicker-header {
    padding: 0.8rem 0;
}

.ui-widget-header {
    background: #26c6da;
    color: #ffffff;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.ui-widget.ui-widget-content {
    background: #ffffff;
    box-shadow: 5px 2px 15px 5px rgba(103, 117, 124, 0.2);
}

.ui-state-hover,
.ui-widget-header .ui-state-hover {
    background: none;
    border: 0;
    opacity: 0.5;
}

.ui-widget-content .ui-state-hover {
    opacity: 1;
    color: #002f45 !important;
    background: #b3f7ff !important;
    border-radius: 0.375em;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    top: auto;
    background: none !important;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev {
    left: 1rem;
}

.ui-datepicker .ui-datepicker-next {
    right: 1rem;
}

.ui-datepicker .ui-datepicker-prev:before {
    font-family: inherit;
    content: '\f053';
    color: #ffffff;
    float: left;
}

.ui-datepicker .ui-datepicker-next:before {
    font-family: inherit;
    content: '\f054';
    color: #ffffff;
    float: right;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    border: 0;
    background: none;
    text-align: center;
    padding: 0.6rem 0.8rem;
    color: #002f45;
}

.ui-datepicker table {
    width: 19rem;
    font-size: 10pt;
    border-collapse: collapse;
    margin: 0 0 0.4rem;
}

.ui-datepicker thead,
.ui-datepicker tbody {
    background: #ffffff;
}

.ui-datepicker th {
    padding: 0.7rem 0.3rem;
    text-align: center;
    border: 0;
}

.ui-datepicker td {
    border: 0;
    padding: 0.02rem;
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: 0.2rem;
    text-align: right;
    text-decoration: none;
}

/* Dialog 버튼 CSS추가. 2018.07.09 startchb. */

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-width: 1px 0 0 0;
    background-image: none;
    margin: .5em 0 0 0;
    padding: .3em 1em .5em .4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
    padding: 0 0.2rem 0.5rem 1rem;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset > button {
    min-width: 7em !important;
}

.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}



/* PAGINATION BUTTON */

.paginationButton {
    padding: 0 0.3rem;
    color: #727b84;
    font-size: 14pt;
    font-weight: 800;
}

ul.pagination {
    width: 100%;
    cursor: pointer;
    list-style: none;
    margin: 1em 0 0 0;
    padding: 0;
    text-align: center;
}

ul.pagination li {
    display: inline-block;
    padding: 0 0.5rem 0 0;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 14pt;
    color: #8e9fa7;
    vertical-align: middle;
}

ul.pagination li.active,
ul.pagination li:hover,
ul.pagination li:active {
    color: #294a5a;
}

ul.pagination li:nth-child(3) {
    padding-left: 1.5rem;
}

ul.pagination li:nth-child(1):before {
    content: '《';
}

ul.pagination li:nth-child(2):before {
    content: '〈';
}

ul.pagination li:nth-last-child(1):before {
    content: '》';
}

ul.pagination li:nth-last-child(2):before {
    content: '〉';
}

ul.pagination li:nth-last-child(3) {
    padding-right: 1.5rem;
}

ul.pagination li:nth-child(1),
ul.pagination li:nth-child(2),
ul.pagination li:nth-last-child(1),
ul.pagination li:nth-last-child(2) {
    background: #eef5f9;
    padding: 0 0.5rem;
    border-radius: 0.375em;
}









/* LOGIN BOX */

.login_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: url(/resource/images/login.jpg) 0 50% repeat-x;
    background-size: auto 100%;
}

.login_container {
    position: relative;
    z-index: 1;
    display: table;
    float: right;
    width: 35%;
    height: 100%;
    min-height: 180px;
    background-color: #fff;
    padding: 3em;
}

/* CONTAINER */

.container {
    margin: 0 auto;
    max-width: calc(100% - 4em);
    width: 75em;
    padding: 3em 0;
}

.container.xsmall {
    width: 17.5em;
}

.container.small {
    width: 35em;
}

.container.medium {
    width: 52.5em;
}

.container.large {
    width: 87.5em;
}

.container.xlarge {
    width: 105em;
}

.container.max {
    width: 100%;
}

@media screen and (max-width: 1280px) {

    .container {
        width: 90%;
        max-width: 100%;
    }

}

@media screen and (max-width: 980px) {

    .container {
        width: 90%;
        max-width: 100%;
        padding: 3em 1em;
    }

}

@media screen and (max-width: 480px) {

    .container {
        padding: 3em 0;
    }
}

/* LOGIN FORM */

.loginForm {
    text-align: center;
}

.loginForm > div * > input[type="text"],
.loginForm > div * > input[type="password"] {
    height: 3em;
    line-height: 3em;
    margin-bottom: 1em;
}

.loginForm > * > .buttonFrame {
    margin: 0 0 1em 0;
}

.loginForm > * > .buttonFrame > button {
    width: 100%;
}

.loginForm > .findInfo > .row > div:after {
    float: right;
    content: '|';
    font-weight: normal;
    color: #ced4da;
}

.loginForm > .findInfo > .row > div > span.join,
.loginForm > .findInfo > .row > div > span.idFind,
.loginForm > .findInfo > .row > div > span.passwordFind {
    cursor: pointer;
}

.loginForm > .findInfo > .row > div:last-child:after {
    content: '';
}



/* ID/PASSWORD FIND MODAL */

.blurOverlay {
    -webkit-filter: blur(0.3125em);
    -moz-filter: blur(0.3125em);
    -o-filter: blur(0.3125em);
    -ms-filter: blur(0.3125em);
    filter: blur(0.3125em);
}

.modalWrapper {
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    visibility: hidden;
    opacity: 0;
    z-index: 9998;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.modalWrapper.modalShow {
    opacity: 1;
    visibility: visible;
}

.modalBody {
    width: 100%;
    height: auto;
    position: relative;
    background: #ffffff;
    opacity: 0;
    border-radius: 0.375em;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.modalBody.xsmall {
    width: 17.5em;
    max-height: 80vh;
    overflow-y: auto;
}

.modalBody.small {
    width: 35em;
    max-height: 80vh;
    overflow-y: auto;
}

.modalBody.medium {
    width: 52.5em;
    max-height: 80vh;
    overflow-y: auto;
}

.modalBody.large {
    width: 87.5em;
    max-height: 80vh;
    overflow-y: auto;
}

.modalWrapper.modalShow .modalBody {
    opacity: 1;
}

.modalHead {
    width: 100%;
    border-top-left-radius: 0.375em;
    border-top-right-radius: 0.375em;
    padding: 0.7em 1em;
    overflow: hidden;
    background: #0062cc;

    font-size: 1.2em;
    color: #ffffff;
}

.modalClose {
    display: block;
    float: right;
    padding-top: 0.3em;
}

.modalClose:before,
.modalClose:after {
    content: '';
    width: 1.5em;
    height: 0.1875em;
    display: block;
    background: rgba(255, 255, 255, 1);
}

.modalClose:before {
    margin-top: 0.375em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.modalClose:after {
    margin-top: -0.1875em;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.modalContent {
    padding: 1em;
    text-align: center;
}