/* --------------------------------------------- */
/* value */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* ease */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* color */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* font */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* font icon */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* function */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* mixin */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* keyframes */
/* --------------------------------------------- */
@keyframes fadein {
  0% {
    display: none;
    opacity: 0; }
  1% {
    display: block;
    opacity: 0; }
  100% {
    display: block;
    opacity: 1; } }

@keyframes fadeout {
  0% {
    display: block;
    opacity: 1; }
  99% {
    display: block;
    opacity: 0; }
  100% {
    display: none;
    opacity: 0; } }

/* --------------------------------------------- */
/* container */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* contents */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* multi device background */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* multi device background */
/* --------------------------------------------- */
/* --------------------------------------------- */
/* button */
/* --------------------------------------------- */
/*------------------------------------------------
   Reset
------------------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

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

ul, ol {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

em {
  font-style: normal; }

b {
  font-weight: normal; }

/* ----------------------------------------------------------------------------------------------------

Super Form Reset

A couple of things to watch out for:

- IE8: If a text input doesn't have padding on all sides or none the text won't be centered.
- The default border sizes on text inputs in all UAs seem to be slightly different. You're better off using custom borders.
- You NEED to set the font-size and family on all form elements
- Search inputs need to have their appearance reset and the box-sizing set to content-box to match other UAs
- You can style the upload button in webkit using ::-webkit-file-upload-button
- ::-webkit-file-upload-button selectors can't be used in the same selector as normal ones. FF and IE freak out.
- IE: You don't need to fake inline-block with labels and form controls in IE. They function as inline-block.
- By turning off ::-webkit-search-decoration, it removes the extra whitespace on the left on search inputs

----------------------------------------------------------------------------------------------------*/
input,
label,
select,
button,
textarea {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  /* Browsers have different default form fonts */
  font-size: inherit;
  font-family: inherit; }

/* Remove the stupid outer glow in Webkit */
input:focus {
  outline: 0; }

/* Box Sizing Reset
-----------------------------------------------*/
/* All of our custom controls should be what we expect them to be */
input,
textarea {
  box-sizing: content-box; }

/* These elements are usually rendered a certain way by the browser */
button,
input[type=reset],
input[type=button],
input[type=submit],
input[type=checkbox],
input[type=radio],
select {
  box-sizing: border-box; }

input[type=checkbox],
input[type=radio],
select {
  appearance: none; }

/* Text Inputs
-----------------------------------------------*/
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=range],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week] {
  box-sizing: border-box; }

/* Button Controls
-----------------------------------------------*/
input[type=checkbox],
input[type=radio] {
  width: 13px;
  height: 13px; }

/* File Uploads
-----------------------------------------------*/
/* Search Input
-----------------------------------------------*/
/* Make webkit render the search input like a normal text field */
input[type=search] {
  appearance: textfield;
  box-sizing: content-box; }

/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration {
  display: none; }

/* Buttons
-----------------------------------------------*/
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
  /* Fix IE7 display bug */
  overflow: visible;
  width: auto; }

/* IE8 and FF freak out if this rule is within another selector */
::-webkit-file-upload-button {
  padding: 0;
  border: 0;
  background: none; }

/* Textarea
-----------------------------------------------*/
textarea {
  /* Move the label to the top */
  vertical-align: top;
  /* Turn off scroll bars in IE unless needed */
  overflow: auto; }

/* Selects
-----------------------------------------------*/
select {
  appearance: none;
  outline: none; }

select[multiple] {
  /* Move the label to the top */
  vertical-align: top; }

/* --------------------------------------------- */
/* common style */
/* --------------------------------------------- */
html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 0.05em;
  line-height: 1;
  color: #000;
  background: #fff;
  -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5 {
  font-weight: inherit;
  font-style: normal; }

b {
  font-weight: inherit; }

::selection {
  color: inherit;
  background: transparent; }

input::selection, textarea::selection {
  color: inherit;
  background: rgba(100, 100, 100, 0.3); }

a {
  color: #1f1f1f; }

a:link {
  color: #1f1f1f;
  text-decoration: none; }

a:visited {
  color: #1f1f1f; }

a:hover {
  color: #1f1f1f;
  opacity: 0.7; }

a:active {
  color: #1f1f1f; }

* {
  text-size-adjust: none; }

/* --------------------------------------------- */
/* transition */
/* --------------------------------------------- */
/* fade */
.fade-enter, .fade-enter-active, .fade-enter-to {
  transition: opacity 1200ms ease-in-out 0ms; }

.fade-enter {
  opacity: 0; }

.fade-enter-to {
  opacity: 1; }

.fade-leave, .fade-leave-active, .fade-leave-to {
  transition: opacity 600ms ease-in-out 0ms; }

.fade-leave {
  opacity: 1; }

.fade-leave-to {
  opacity: 0; }

/*------------------------------------------------
   Index
------------------------------------------------*/
.el-header, .el-footer {
  text-align: center;
  line-height: 60px;
  background-color: #fff;
  color: #333;
  border-bottom: #eee solid 1px; }

.el-container {
  margin-bottom: 30px; }

.el-row {
  margin-bottom: 20px; }
  .el-row:last-child {
    margin-bottom: 0; }

.el-main {
  background-color: #fff;
  color: #333; }

.cont {
  margin-bottom: 20px; }
  .cont h3 {
    margin-bottom: 10px; }
  .cont input {
    margin-bottom: 10px; }

.img {
  width: 100%;
  height: auto; }

canvas {
  width: 100%;
  height: auto; }

.el-form-item__content .el-input-number {
  width: auto; }

.el-form-item__content .el-button--primary {
  width: 100%; }

.el-form-item__content .el-button--primary + .el-button--primary {
  margin: 10px 0 0 0; }

.el-form-item__content .el-button--info {
  width: auto; }

table {
  width: 100%; }
  table tr th, table tr td {
    width: 9%; }
    table tr th.hide, table tr td.hide {
      display: none; }
    table tr th img, table tr td img {
      width: 100%;
      height: auto; }