@charset "utf-8";
/* 토큰 발행 페이지 */
#tokenInfoWrap{width: 100%;max-width: 600px;height: 100%;margin: 0 auto;padding: 48px 0;}
#tokenInfoWrap .token_info_inner{width: 100%;}

#tokenInfoWrap .token_info_hd{}
#tokenInfoWrap .token_info_hd .page_tit_box{}
#tokenInfoWrap .token_info_hd .page_tit{font-size: 24px;font-weight: 700;color: #333;line-height: 32px;letter-spacing: -0.54px;text-align: center;}

#tokenInfoWrap .token_info_bd{}
#tokenInfoWrap .token_info_hd + .token_info_bd{margin-top: 48px;}

#tokenInfoWrap .frm_wrap{}
#tokenInfoWrap .frm_box{}
#tokenInfoWrap .frm_box + .frm_box{margin-top: 32px;}

#tokenInfoWrap .frm_box .frm_label_box{}
#tokenInfoWrap .frm_box .frm_label_box .frm_label{display: inline-block;font-size: 16px;font-weight: 500;line-height: 24px;color: #333;}
#tokenInfoWrap .frm_box .frm_label_box .frm_label_txt{display: inline-block;font-size: 16px;font-weight: 500;line-height: 24px;color: #333;}

#tokenInfoWrap .frm_box .frm_inp_box{width: 100%;}
#tokenInfoWrap .frm_box .frm_label_box + .frm_inp_box{margin-top: 8px;}
#tokenInfoWrap .frm_box .frm_inp_box .frm_inp{width: 100%;height: 40px;padding: 0;font-size: 16px;font-weight: 400;line-height: 24px;color: #333;border: 0;border-bottom: 1px solid #333;border-radius: 0;box-shadow: none;transition: border-color .15s;outline: 0;}
#tokenInfoWrap .frm_box .frm_inp_box .frm_inp::placeholder{color: #999;}
#tokenInfoWrap .frm_box .frm_inp_box .frm_inp:focus{border: 0 !important;border-bottom: 1px solid #333 !important;border-color: #ed6726 !important;}


#tokenInfoWrap .frm_box .frm_select_box{position: relative;}
#tokenInfoWrap .frm_box .frm_select_box select{color: #333;appearance: none;background-color: #fff;}
#tokenInfoWrap .frm_box .frm_select_box select.default-option{color: #999;}
#tokenInfoWrap .frm_box .frm_select_box .select_arr{position: absolute;right: 8px;top: 50%;transform: translateY(-50%);width: 24px;height: 24px;pointer-events: none;}
#tokenInfoWrap .frm_box .frm_select_box .select_arr svg{width: 100%;height: 100%;pointer-events: none;}


#tokenInfoWrap .frm_btns_box{padding: 48px 0;display: flex;align-items: center;justify-content: center;column-gap: 8px;flex-wrap: nowrap;}
#tokenInfoWrap .frm_btns_box .btns{flex: 1;height: 50px;padding: 0 16px;background-color: #fff;border: 1px solid #333;border-radius: 0;display: flex;align-items: center;justify-content: center;transition: background-color .15s, border-color .15s;}
#tokenInfoWrap .frm_btns_box .btns .btns_name{display: inline-block;font-size: 16px;font-weight: 500;line-height: 20px;color: #333;letter-spacing: -0.54px;transition: color .15s;}

#tokenInfoWrap .frm_btns_box .btns.btns_frm_submit{background-color: #333;border-color: #333;}
#tokenInfoWrap .frm_btns_box .btns.btns_frm_submit .btns_name{color: #fff;}

#tokenInfoWrap .frm_btns_box .btns:hover{background-color: #ed6726;border-color: #ed6726;}
#tokenInfoWrap .frm_btns_box .btns:hover .btns_name{color: #fff;}

@media (max-width: 600px){
    #tokenInfoWrap{padding: 16px 0 0;}
    #tokenInfoWrap .token_info_hd .page_tit{font-size: 20px;line-height: 28px;}

    #tokenInfoWrap .token_info_hd + .token_info_bd{margin-top: 32px;}
    #tokenInfoWrap .frm_box + .frm_box{margin-top: 24px;}
    #tokenInfoWrap .frm_box .frm_label_box .frm_label{font-size: 14px;line-height: 20px;}
    #tokenInfoWrap .frm_box .frm_label_box .frm_label_txt{font-size: 14px;line-height: 20px;}
    #tokenInfoWrap .frm_box .frm_inp_box .frm_inp{font-size: 14px;line-height: 20px;}

    #tokenInfoWrap .frm_btns_box .btns{height: 40px;}
    #tokenInfoWrap .frm_btns_box .btns .btns_name{font-size: 14px;line-height: 20px;}

}


/* 로그인 */
#wrap:has(#loginWrap){background-color: #f7f7f7;box-shadow: none;}
#loginWrap{width: 100%;max-width: 600px;height: var(--wh);margin: 0 auto;padding: 48px 16px;display: flex;align-items: center;justify-content: center;}
#loginWrap .login_inner{width: 100%;padding: 48px 24px;background-color: #fff;box-shadow: 2px 2px 15px 0px rgba(0, 0, 0, 0.1);}


#loginWrap .login_hd{}
#loginWrap .login_hd .login_tit_box{}
#loginWrap .login_hd .login_tit{font-size: 24px;font-weight: 700;color: #333;line-height: 32px;letter-spacing: -0.54px;text-align: center;}

#loginWrap .login_bd{}
#loginWrap .login_hd + .login_bd{margin-top: 48px;}


#loginWrap .frm_wrap{}
#loginWrap .frm_box{}
#loginWrap .frm_box + .frm_box{margin-top: 32px;}

#loginWrap .frm_box .frm_label_box{}
#loginWrap .frm_box .frm_label_box .frm_label{display: inline-block;font-size: 16px;font-weight: 500;line-height: 24px;color: #333;}
#loginWrap .frm_box .frm_label_box .frm_label_txt{display: inline-block;font-size: 16px;font-weight: 500;line-height: 24px;color: #333;}

#loginWrap .frm_box .frm_inp_box{width: 100%;}
#loginWrap .frm_box .frm_label_box + .frm_inp_box{margin-top: 8px;}
#loginWrap .frm_box .frm_inp_box .frm_inp{width: 100%;height: 40px;padding: 0;font-size: 16px;font-weight: 400;line-height: 24px;color: #333;border: 0;border-bottom: 1px solid #333;border-radius: 0;box-shadow: none;transition: border-color .15s;outline: 0;}
#loginWrap .frm_box .frm_inp_box .frm_inp::placeholder{color: #999;}
#loginWrap .frm_box .frm_inp_box .frm_inp:focus{border: 0 !important;border-bottom: 1px solid #333 !important;border-color: #ed6726 !important;}

#loginWrap .frm_btns_box{padding: 48px 0;display: flex;align-items: center;justify-content: center;column-gap: 8px;flex-wrap: nowrap;}
#loginWrap .frm_btns_box .btns{flex: 1;height: 50px;padding: 0 16px;background-color: #fff;border: 1px solid #333;border-radius: 0;display: flex;align-items: center;justify-content: center;transition: background-color .15s, border-color .15s;}
#loginWrap .frm_btns_box .btns .btns_name{display: inline-block;font-size: 16px;font-weight: 500;line-height: 20px;color: #333;letter-spacing: -0.54px;transition: color .15s;}

#loginWrap .frm_btns_box .btns.btns_frm_login{background-color: #333;border-color: #333;}
#loginWrap .frm_btns_box .btns.btns_frm_login .btns_name{color: #fff;}

#loginWrap .frm_btns_box .btns:hover{background-color: #ed6726;border-color: #ed6726;}
#loginWrap .frm_btns_box .btns:hover .btns_name{color: #fff;}

@media (max-width: 600px){
    #loginWrap .login_hd .login_tit{font-size: 20px;line-height: 28px;}

    #loginWrap .login_hd + .login_bd{margin-top: 32px;}
    #loginWrap .frm_box + .frm_box{margin-top: 24px;}
    #loginWrap .frm_box .frm_label_box .frm_label{font-size: 14px;line-height: 20px;}
    #loginWrap .frm_box .frm_label_box .frm_label_txt{font-size: 14px;line-height: 20px;}
    #loginWrap .frm_box .frm_inp_box .frm_inp{font-size: 14px;line-height: 20px;}

    #loginWrap .frm_btns_box .btns{height: 40px;}
    #loginWrap .frm_btns_box .btns .btns_name{font-size: 14px;line-height: 20px;}

}

.background {
    width: 800px;
    margin: 30px auto;
  }
  
  svg .cls-21, svg .cls-20, svg .cls-19, 
  svg .cls-22, svg .cls-14, svg .cls-23
  {  
    animation-name: ship-move, ship-move1;
    animation-duration: 6s, 15s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
  }
  
  @keyframes ship-move {
      0% {
          transform: translate(0px);
      }
      50% {
          transform: translate(6px);
      }
  }
  
  @keyframes ship-move1 {
     0% {
          transform: rotate(2deg);
      }
      50% {
          transform: rotate(-0.5deg);
      }
      100% {
          transform: rotate(2deg);
      }
  }
  
  svg .cls-4:first-child, svg .cls-5 {
    animation-name: back-cloud-move;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translate(240px);  
  }
  
  @keyframes back-cloud-move {
      0% {
          transform: translate(240px);
      }
      100% {
          transform: translate(-240px);
      }
  }
  
  svg .cls-4:not(:first-child), svg .cls-13 {
    animation-name: cloud-move;
    animation-duration: 70s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;  
    transform: translate(-240px);
  }
  
  @keyframes cloud-move {
      0% {
          transform: translate(-240px);
      }
      100% {
          transform: translate(240px);
      }
  }
  
  svg .cls-24 {
    animation-name: wave1-move;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translateY(1px);
  }
  
  @keyframes wave1-move {
      0% {
          transform: translateY(1px);
      }
      50% {
          transform: translateY(-1px);
      }
  }
  
  svg .cls-25 {
    animation-name: wave2-move;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform: translateY(0px);
  }
  
  @keyframes wave2-move {
      0% {
          transform: translateY(0px);
      }
      50% {
          transform: translateY(1px);
      }
  }