@charset "UTF-8";

/* **************************************** *
 * button align
 * **************************************** */
.button-area{display:flex; align-items:center; width:100%; margin-bottom:5px}
.button-area:after{content:''; display:block; clear:both}
.button-area{margin:0 -1px}
.button-area .button-l,
.button-area .button-c,
.button-area .button-r{display:flex; align-items:center}
.button-area .button-c{margin:0 auto}
.button-area .button-r{margin-left:auto}
.button-area .button-l .button,
.button-area .button-c .button,
.button-area .button-r .button{margin:0 1px}
 

 /* **************************************** *
  * button base
  * **************************************** */
.button{
   display:inline-block;
   flex:none;
   height:30px;
   padding:7px 12px;
   line-height: 1em;
   background:#fff;
   border:1px solid #d8d8d8;
   font-weight:normal;
   font-size:14px;
   letter-spacing:-0.5px;
   color:#505050;
   text-align:center;
   border-radius:4px;
   vertical-align:middle;
   cursor:pointer;
   box-sizing:border-box;
   transition: all 0.3s
 }
.button:active,
.button:hover,
.button:focus{padding:7px 12px; background:#fff; border:1px solid #c5c5c5; color:#202020}
 
.button [class^="ri-"],
.button [class*=" ri-"]{display:inline-block; position:relative; top:-1px; font-size:16px; vertical-align:middle}

.button.disabled{opacity:.3; cursor:no-drop}

 
/* **************************************** *
 * button type
 * **************************************** */
/* trans-btn */
.button.trans-btn{min-width:auto; width:auto; background:none; font-size:12px; border:none; text-align:center; border-radius:0}

/* only-ico */
.button.only-ico{min-width:40px; padding:0; font-size:18px; text-align:center}
.button.only-ico i[class^="ri-"],
.button.only-ico i[class*=" ri-"]{vertical-align:middle}
  
/* clear-ico */
.button.clear-ico{min-width:auto; width:auto; height:auto; padding:0; background:none; font-size:18px; border:none; text-align:center; border-radius:0}
.button.clear-ico [class^="ri-"],
.button.clear-ico [class*=" ri-"]{margin-top:-1px}

/* toggle-arrow */
.button.toggle-arrow:after{content:'\ea4e'; display:inline-block; position:relative; top:-1px; color:#808080; font-family:remixicon; font-size:18px; vertical-align:middle; transition:all .20s ease}
.button.toggle-arrow.active:after{top:-3px; transform:rotate(180deg)}
 

/* **************************************** *
 * button color
 * **************************************** */
/* primary */
.button.primary{background:#3e55e1; border:1px solid #3e55e1; color:rgb(255, 255, 255, 1)}
.button.primary:active,
.button.primary:hover,
.button.primary:focus,
.button.primary.Checked{background:#3e55e1; border:1px solid #3e55e1; color:rgb(255, 255, 255, 1)}
.button.primary.Disabled{background:#3e55e1; border:1px solid #3e55e1; color:rgb(255, 255, 255, .7)}

/* secondary */
.button.secondary{background:#182146; border:1px solid #182146; color:rgb(255, 255, 255, 1)}
.button.secondary:active,
.button.secondary:hover,
.button.secondary:focus,
.button.secondary.Checked{background:#182146; border:1px solid #182146; color:rgb(255, 255, 255, 1)}
.button.secondary.Disabled{background:#182146; border:1px solid #182146; color:rgb(255, 255, 255, .7)}

/* tertiary */
.button.tertiary{background:#5d6063; border:1px solid #5d6063; color:rgb(255, 255, 255, 1)}
.button.tertiary:active,
.button.tertiary:hover,
.button.tertiary:focus,
.button.tertiary.Checked{background:#5d6063; border:1px solid #5d6063; color:rgb(255, 255, 255, 1)}
.button.tertiary.Disabled{background:#5d6063; border:1px solid #5d6063; color:rgb(255, 255, 255, .7)}

.button.info.toggle-arrow:after,
.button.primary.toggle-arrow:after,
.button.success.toggle-arrow:after{color:#fff}
 
 
/* **************************************** *
 * button line
 * **************************************** */
/* info */
.button.info.line{background:#fff; border:1px solid #3382e9; color:rgb(51, 130, 233, 1)}
.button.info.line:active,
.button.info.line:hover,
.button.info.line:focus,
.button.info.line.af-hover,
.button.info.line.Checked{background:#3382e9; border:1px solid #3382e9; color:rgb(255, 255, 255, 1)}
.button.info.line.Disabled{background:#fff; border:1px solid #3382e9; color:rgb(51, 130, 233, 1)}
 
/* primary */
.button.primary.line{background:#fff; border:1px solid #1F375F; color:rgb(31, 55, 95, 1)}
.button.primary.line:active,
.button.primary.line:hover,
.button.primary.line:focus,
.button.primary.line.af-hover,
.button.primary.line.Checked{background:#1F375F; border:1px solid #1F375F; color:rgb(255, 255, 255, 1)}
.button.primary.line.Disabled{background:#fff; border:1px solid #1F375F; color:rgb(31, 55, 95, 1)}
 
/* success */
.button.success.line{background:#fff; border:1px solid #23cf3a; color:rgb(35, 207, 58, 1)}
.button.success.line:active,
.button.success.line:hover,
.button.success.line:focus,
.button.success.line.af-hover,
.button.success.line.Checked{background:#23cf3a; border:1px solid #23cf3a; color:rgb(255, 255, 255, 1)}
.button.success.line.Disabled{background:#fff; border:1px solid #23cf3a; color:rgb(35, 207, 58, .5)}
 
/* warning */
.button.warning.line{background:#fff; border:1px solid #fac60a; color:rgb(250, 198, 10, 1)}
.button.warning.line:active,
.button.warning.line:hover,
.button.warning.line:focus,
.button.warning.line.af-hover,
.button.warning.line.Checked{background:#fac60a; border:1px solid #fac60a; color:rgb(255, 255, 255, 1)}
.button.warning.line.Disabled{background:#fff; border:1px solid #fac60a; color:rgb(250, 198, 10, .5)}
 
/* danger */
.button.danger.line{background:#fff; border:1px solid #ff6a00; color:rgb(255, 106, 0, 1)}
.button.danger.line:active,
.button.danger.line:hover,
.button.danger.line:focus,
.button.danger.line.af-hover,
.button.danger.line.Checked{background:#ff6a00; border:1px solid #ff6a00; color:rgb(255, 255, 255, 1)}
.button.danger.line.Disabled{background:#fff; border:1px solid #ff6a00; color:rgb(255, 106, 0, .5)}

/* light */
.button.light.line{background:#fff; border:1px solid #636c7d; color:rgb(255, 106, 0, 1)}
.button.light.line:active,
.button.light.line:hover,
.button.light.line:focus,
.button.light.line.af-hover,
.button.light.line.Checked{background:#636c7d; border:1px solid #636c7d; color:rgb(255, 255, 255, 1)}
.button.light.line.Disabled{background:#fff; border:1px solid #636c7d; color:rgb(255, 106, 0, .5)}
 
 
/* **************************************** *
 * button size
 * **************************************** */
/* small */
.button.small{height:32px; padding:7px 9px; font-size:14px; letter-spacing:-0.8px; border-radius:4px}
.button.small:active,
.button.small:hover,
.button.small:focus,
.button.small.af-hover,
.button.small.Checked{padding:7px 9px}
.button.small i{font-size:16px}
.button.small.only-ico{min-width:32px; width:auto; padding:0; font-size:18px; text-align:center}
.button.small.trans-ico{min-width:auto; width:auto; height:auto; padding:0; background:none; border:none; text-align:center; border-radius:0}
 
/* large */
.button.large{height:40px; padding:13px 18px; font-size:15px; letter-spacing:-0.5px}
.button.large:active,
.button.large:hover,
.button.large:focus,
.button.large.Checked{padding:13px 18px}
.button.large i{font-size:20px}
.button.large.only-ico{min-width:44px; width:auto; padding:11px 0 11px; font-size:15px; text-align:center}
.button.large.trans-ico{min-width:auto; width:auto; height:auto; padding:0; background:none; border:none; text-align:center; border-radius:0}
 
/* xlarge */
.button.xlarge{height:52px; padding:19px 20px; font-size:15px; letter-spacing:-0.5px}
.button.xlarge:active,
.button.xlarge:hover,
.button.xlarge:focus,
.button.xlarge.af-hover,
.button.xlarge.Checked{padding:19px 20px}
.button.xlarge i{font-size:20px}
.button.xlarge.only-ico{min-width:48px; width:auto; padding:14px 0 14px; font-size:22px; text-align:center}
.button.xlarge.trans-ico{min-width:auto; width:auto; height:auto; padding:0; background:none; border:none; text-align:center; border-radius:0}
 
 /* xxlarge */
.button.xxlarge{height:52px; padding:15px 30px 15px; font-size:18px; letter-spacing:-0.8px}
.button.xxlarge:active,
.button.xxlarge:hover,
.button.xxlarge:focus,
.button.xxlarge.af-hover,
.button.xxlarge.Checked{padding:15px 30px 15px}
.button.xxlarge i{font-size:26px}
.button.xxlarge.only-ico{min-width:52px; width:auto; padding:15px 0 15px; font-size:26px; text-align:center}
.button.xxlarge.trans-ico{min-width:auto; width:auto; height:auto; padding:0; background:none; border:none; text-align:center; border-radius:0}
.button.xxlarge .dfi{width:26px; min-width:26px}
.button.xxlarge.doc-ico img{width:26px}
 
 
/* **************************************** *
 * button group
 * **************************************** */
.button-group{display:inline-block; vertical-align:middle; font-size:0}
.button-group .button{margin-left:2px}
.button-group .button:first-child{margin-left:0}
 
 
/* **************************************** *
 * button round
 * **************************************** */
.button.round-max{border-radius:1000px !important}


/* **************************************** *
 * button single
 * **************************************** */
.scrap{display:flex; align-items:center; justify-content:center; position:relative; width:36px; height:36px; background:#f4f4f4; border:0; border-radius:50%; cursor:pointer; box-sizing:border-box; transition: all 0.3s}
.scrap:after{content:'\ee08'; padding-top:2px; color:#a7bad3; font-family:remixicon; font-size:20px}
.scrap.active:after{color:#e30080}
.scrap:before
{
  content:attr(tip);
  display:none;
  position:absolute;
  top:-35px;
  left:50%;
  width:62px;
  margin-left:-31px;
  padding:7px 0;
  background-color:#fff;
  color:#505050;
  text-align:center;
  font-size:14px;
  font-weight:300;
  letter-spacing:-0.8px;
  white-space:nowrap;
  border:1px solid #dadada;
  border-radius:6px;
  box-shadow:5px 5px 10px rgb(0 0 0 / 5%);
  box-sizing:border-box;
  z-index:1000;
 }
.scrap:hover:before{display:block}


.regist-confirm{display:flex; align-items:center; justify-content:center; margin:0; padding:0; border:0; width:400px; height:60px; background:#3382e9; cursor:pointer; border-radius:8px 8px 22px 8px; box-sizing:border-box}
.regist-confirm span{color:#fff; font-family:tjs; font-size:18px; font-weight:300; letter-spacing:-1px}