.btn {
    background: #2879fe;
    font-family: "Hind", sans-serif;
    border: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.03em;
    position: relative;
    outline: none;
    padding: 6px 31px 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s linear, background-color 0.2s linear; }
    @media (max-width: 575px) {
      .btn {
        font-size: 12px;
        padding-left: 25px;
        padding-right: 25px;
        height: auto; } }
  
  @media (min-width: 576px) {
    .btn:not(.tt-icon-right) [class^="icon-"] {
      font-size: 20px;
      margin-right: 10px; } }
  
  @media (max-width: 575px) {
    .btn:not(.tt-icon-right) [class^="icon-"] {
      font-size: 18px;
      margin-right: 10px; } }
  
  @media (min-width: 576px) {
    .btn.tt-icon-right [class^="icon-"] {
      font-size: 20px;
      margin-left: 10px;
      position: relative;
      top: -2px; } }
  
  @media (max-width: 575px) {
    .btn.tt-icon-right [class^="icon-"] {
      font-size: 18px;
      margin-left: 10px; } }
  
  .btn:active,
  .btn:visited,
  .btn:focus,
  button:focus {
    outline: none;
    box-shadow: none; }
  
  .btn:hover {
    background: #2267d8;
    color: #ffffff;
    outline: none; }
  
  .btn-lg {
    height: 50px;
    padding: 5px 31px 4px; }
  
  @media (min-width: 1101px) {
    .btn-xl {
      height: 50px;
      padding: 2px 41px 0px; } }
  
  @media (min-width: 790px) and (max-width: 1100px) {
    .btn-xl {
      height: 40px;
      padding-top: 2px;
      padding-bottom: 0; } }
  
  @media (max-width: 789px) {
    .btn-xl {
      padding-left: 25px;
      padding-right: 25px;
      padding-top: 2px;
      padding-bottom: 0; } }
  
  .btn:focus, .btn.focus {
    box-shadow: none; }
  
  .btn.btn-white {
    background: #ffffff;
    color: #191919; }
  
  .btn.btn-white:hover {
    background: #191919;
    color: #ffffff; }
  
  .btn.btn-dark {
    background: #191919;
    color: #ffffff; }
  
  .btn.btn-dark:hover {
    background: #2879fe;
    color: #ffffff; }
  
  /* btn-type02 */
  .btn-type02 {
    background: linear-gradient(180deg, #7EC0FE 0%, #2879FE 100%);
    border: 2px solid #000000;
    font-family: "Hind", sans-serif;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.03em;
    position: relative;
    outline: none;
    padding: 6px 31px 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 40px;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s linear;
    position: relative;
    overflow: hidden;
    box-shadow: 10px 20px 10px rgba(0, 0, 0, 0.2); }
    .btn-type02:before {
      content: '';
      display: block;
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 0.2s linear;
      background: linear-gradient(180deg, #2879FE 0%, #7EC0FE 100%); }
    @media (max-width: 575px) {
      .btn-type02 {
        font-size: 12px;
        padding-left: 25px;
        padding-right: 25px;
        height: 39px; } }
    .btn-type02:active, .btn-type02:visited, .btn-type02:focus {
      outline: none;
      box-shadow: none; }
    .btn-type02:hover {
      color: #191919;
      outline: none; }
      .btn-type02:hover:before {
        opacity: 1; }
    .btn-type02 .btn-type02_text {
      position: relative;
      z-index: 1; }
    .btn-type02.btn-top {
      margin-top: 61px; }
      @media (max-width: 790px) {
        .btn-type02.btn-top {
          margin-top: 33px; } }
    .btn-type02.btn-top02 {
      margin-top: 49px; }
      @media (max-width: 790px) {
        .btn-type02.btn-top02 {
          margin-top: 33px; } }
    .btn-type02.btn-lg {
      height: 50px;
      padding-left: 56px;
      padding-right: 56px; }
  
  /* /btn-type02 */
  .btn.btn-border {
    background: transparent;
    color: #2879fe;
    border: 2px solid #2879fe;
    height: 40px;
    padding-left: 29px;
    padding-right: 29px; }
  
  .btn.btn-border:hover {
    background: #191919;
    color: #ffffff;
    border-color: #191919; }
  
  .btn.btn-border01 {
    background: transparent;
    color: #999999;
    border: 2px solid #999999;
    height: 36px;
    padding-left: 29px;
    padding-right: 29px;
    pointer-events: none;
    border-radius: 6px; }
  
  .btn.btn-border01:hover {
    background: #191919;
    color: #ffffff;
    outline-color: #191919; }
  
  .btn-link,
  .btn-link:focus {
    display: inline-block;
    font-size: 14px;
    color: #2879fe;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.02em;
    font-family: "Hind", sans-serif;
    transition: all 0.2s linear; }
    .btn-link *[class^="icon-"],
    .btn-link:focus *[class^="icon-"] {
      margin-right: 7px;
      font-size: 20px;
      position: relative;
      top: 3px; }
  
  .btn-link:hover {
    text-decoration: none;
    color: #191919; }
  
  .btn-link-02,
  .btn-link-02:focus {
    display: inline-block;
    font-size: 14px;
    color: #2879fe;
    text-decoration: none;
    transition: all 0.2s linear; }
  
  .btn-link-02:hover {
    text-decoration: none;
    color: #191919; }
  
  .btn-underline {
    display: inline-block;
    font-size: 14px;
    line-height: 16px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.04em;
    font-family: "Hind", sans-serif;
    border-bottom: 1px solid #2879fe;
    transition: all 0.2s linear; }
    .btn-underline:not([class$="color"]) {
      color: #2879fe; }
    .btn-underline:hover {
      text-decoration: none;
      color: #191919;
      border-bottom-color: transparent; }
  
  .btn-underline.tt-white-color {
    color: #ffffff;
    border-color: #ffffff; }
    .btn-underline.tt-white-color:hover {
      color: #191919;
      border-color: transparent; }
  
  .disable {
    opacity: 0.3;
    pointer-events: none; }
  
  @media (min-width: 790px) {
    .btn-top {
      margin-top: 40px; } }
  
  @media (max-width: 789px) and (min-width: 576px) {
    .btn-top {
      margin-top: 30px; } }
  
  @media (max-width: 575px) {
    .btn-top {
      margin-top: 20px; } }
  
  .tt-link {
    color: #2879fe;
    transition: all 0.2s linear; }
    .tt-link:hover {
      color: #191919; }
  
  .btn.btn-small {
    height: 35px;
    padding: 6px 29px 3px; }
    @media (min-width: 418px) {
      .btn.btn-small {
        padding-bottom: 5px; } }
    .btn.btn-small [class^="icon-"] {
      position: relative;
      top: -2px; }
  
  .btn-transparent {
    opacity: 0.9; }