*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
 line-height: 1.5;
  text-align: center;
}

[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}
/*
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
*/

/* clearfix */
.clr {clear: both; height: 0; line-height: 0; display: block; float: none}
.cb {clear: both}
.cf:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0}
.container,
.clearfix {*zoom: 1}
.container:before,
.container:after,
.clearfix:before,
.clearfix:after {display: table; line-height: 0; content: ""}
.container:after,
.clearfix:after {clear: both}
/* grid */
.wrapper {margin: 0px auto; position: relative}

.wr {}
.inside .wr {}

.fix {position: fixed; width: 100%; z-index: 10000} 
.container {margin: 0 auto; text-align: left; position: relative}
.center {text-align: center}
.fl {float: left; width: auto}
.fr {float: right; width: auto}

.span {width: 1200px}
.auto {width: auto}
.full {width: 100%}

.col-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-8,
.col-10,
.col-12 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /*margin-right: -15px;
  margin-left: -15px;*/
}

.col-8 .span-1 {
  -ms-flex: 0 0 12.5%;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
.col-8 .span-2 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
.col-8 .span-3 {
  -ms-flex: 0 0 37.5%;
  flex: 0 0 37.5%;
  max-width: 37.5%;
}
.col-8 .span-4 .col-8 .span-2 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
.col-8 .span-5 {
  -ms-flex: 0 0 32.5%;
  flex: 0 0 32.5%;
  max-width: 32.5%;
}
.col-8 .span-6 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}
.col-8 .span-7 {
  -ms-flex: 0 0 87.5%;
  flex: 0 0 87.5%;
  max-width: 87.5%;
}
.col-8 .span-8 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.col-10 .span-1 {
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%;
}

.col-10 .span-2 {
  -ms-flex: 0 0 20%;
  flex: 0 0 20%;
  max-width: 20%;
}

.col-10 .span-3 {
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
  max-width: 30%;
}

.col-10 .span-4 {
  -ms-flex: 0 0 40%;
  flex: 0 0 40%;
  max-width: 40%;
}

.col-10 .span-5 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-10 .span-6 {
  -ms-flex: 0 0 60%;
  flex: 0 0 60%;
  max-width: 60%;
}

.col-10 .span-7 {
  -ms-flex: 0 0 70%;
  flex: 0 0 70%;
  max-width: 70%;
}

.col-10 .span-8 {
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  max-width: 80%;
}

.col-10 .span-9 {
  -ms-flex: 0 0 90%;
  flex: 0 0 90%;
  max-width: 90%;
}

.col-10 .span-10 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.col-12 .span-1 {
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-12 .span-2 {
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-12 .span-3 {
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-12 .span-4 {
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-12 .span-5 {
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-12 .span-6 {
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-12 .span-7 {
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-12 .span-8 {
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-12 .span-9 {
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-12 .span-10 {
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-12 .span-11 {
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 .span-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.content {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
/*
576px -sm
768px -md 
992px -lg
1200px -xl
*/
.y {width: 100%}
.x {width: 100%}
.container-xl.x {max-width: 1200px}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
.y {width: 1208px}
.x {width: 1200px}
  
.col-8 .span-1 {width: 150px} .col-8 .span-2 {width: 300px} .col-8 .span-3 {width: 450px} .col-8 .span-4 {width: 600px}
.col-8 .span-5 {width: 750px} .col-8 .span-6 {width: 900px} .col-8 .span-7 {width: 1050px} .col-8 .span-8 {width: 1200px} 
}

.col-xs.y {width: 970px}
.col-xs.x {width: 960px}

.col-xs.col-1 .span-1 {width: 960px}

.col-xs.col-2 .span-1 {width: 480px}

.col-xs.col-3 .span-1 {width: 320px}
.col-xs.col-3 .span-2 {width: 640px}
.col-xs.col-3 .span-3 {width: 960px}

.col-xs.col-4 .span-1 {width: 240px}
.col-xs.col-4 .span-2 {width: 480px}
.col-xs.col-4 .span-3 {width: 720px}
.col-xs.col-4 .span-4 {width: 960px}

.col-xs.col-5 .span-1 {width: 192px}
.col-xs.col-5 .span-2 {width: 384px}
.col-xs.col-5 .span-3 {width: 576px}
.col-xs.col-5 .span-4 {width: 768px}
.col-xs.col-5 .span-5 {width: 960px}

.col-xs.col-6 .span-1 {width: 160px}
.col-xs.col-6 .span-2 {width: 320px}
.col-xs.col-6 .span-3 {width: 480px}
.col-xs.col-6 .span-4 {width: 640px}
.col-xs.col-6 .span-5 {width: 800px}
.col-xs.col-6 .span-6 {width: 960px}

.col-xs.col-8 .span-1 {width: 120px}
.col-xs.col-8 .span-2 {width: 240px}
.col-xs.col-8 .span-3 {width: 360px}
.col-xs.col-8 .span-4 {width: 480px}
.col-xs.col-8 .span-5 {width: 600px}
.col-xs.col-8 .span-6 {width: 720px}
.col-xs.col-8 .span-7 {width: 840px}
.col-xs.col-8 .span-8 {width: 960px}

.col-xs.col-3 .col-8 .span {width: 200px}
.col-xs.col-3 .span-2 .col-8 .span {width: 520px}
.col-xs.col-4 .span-2 .col-8 .span {width: 360px}
.col-xs.col-4 .span-3 .col-8 .span {width: 600px}

.fld {position: relative}

li.fl {float: left; display: inline}

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}