/* for reset */
div:not(.c-content) > ul,
div:not(.c-content) > ol,
div:not(.c-content) > ul li,
div:not(.c-content) > ol li{list-style: none; margin: 0; padding: 0;}
/* end of reset */

/* for global */
* {font-family: "Roboto"; text-decoration: none;}
a:hover{text-decoration: none;}
.container{max-width: 1000px; margin: 0 auto;}
/* end of global */

:root {
    --br-point-xl: 1600px;
    --br-point-n: 1200px;
    --br-point-l: 1200px;
    --br-point-m: 960px;
    --br-point-s: 640px;
}

.flex {display: flex;}
.flex-wrap {display: flex;flex-wrap: wrap;}
.flex-column {display: flex;flex-flow: column;}
.flex-row {display: flex;flex-direction: row;}
.flex-middle {align-items: center}
.flex-center {justify-content: center}
.flex-center-self {align-self: center}
.flex-middle-self {justify-self: center}
@media (min-width: 1600px){
    .flex\@xl {display: flex;}
    .flex-wrap\@xl {display: flex;flex-wrap: wrap;}
    .flex-column\@xl {display: flex;flex-flow: column;}
    .flex-row\@xl {display: flex;flex-direction: row;}
    .flex-middle\@xl {align-items: center}
    .flex-center\@xl {justify-content: center}
    .flex-center-self\@xl {align-self: center}
    .flex-middle-self\@xl {justify-self: center}
}
@media (min-width: 1440px){
    .flex\@n {display: flex;}
    .flex-wrap\@n {display: flex;flex-wrap: wrap;}
    .flex-column\@n {display: flex;flex-flow: column;}
    .flex-row\@n {display: flex;flex-direction: row;}
    .flex-middle\@n {align-items: center}
    .flex-center\@n {justify-content: center}
    .flex-center-self\@n {align-self: center}
    .flex-middle-self\@n {justify-self: center}
}
@media (min-width: 1200px){
    .flex\@l {display: flex;}
    .flex-wrap\@l {display: flex;flex-wrap: wrap;}
    .flex-column\@l {display: flex;flex-flow: column;}
    .flex-row\@l {display: flex;flex-direction: row;}
    .flex-middle\@l {align-items: center}
    .flex-center\@l {justify-content: center}
    .flex-center-self\@l {align-self: center}
    .flex-middle-self\@l {justify-self: center}
}
@media (min-width: 960px){
    .flex\@m {display: flex;}
    .flex-wrap\@m {display: flex;flex-wrap: wrap;}
    .flex-column\@m {display: flex;flex-flow: column;}
    .flex-row\@m {display: flex;flex-direction: row;}
    .flex-middle\@m {align-items: center}
    .flex-center\@m {justify-content: center}
    .flex-center-self\@m {align-self: center}
    .flex-middle-self\@m {justify-self: center}
}
@media (min-width: 640px){
    .flex\@s {display: flex;}
    .flex-wrap\@s {display: flex;flex-wrap: wrap;}
    .flex-column\@s {display: flex;flex-flow: column;}
    .flex-row\@s {display: flex;flex-direction: row;}
    .flex-middle\@s {align-items: center}
    .flex-center\@s {justify-content: center}
    .flex-center-self\@s {align-self: center}
    .flex-middle-self\@s {justify-self: center}
}

*[class^='grid'], *[class*=' grid-'] {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.grid-collapse {}
.grid-collapse > * {box-sizing: border-box}
.grid-5 {margin-top: -5px;margin-left: -5px}
.grid-5 > * {padding-top: 5px;padding-left: 5px}
.grid-5_10 {margin-top: -5px;margin-left: -10px}
.grid-5_10 > * {padding-top: 5px;padding-left: 10px}
.grid-10 {margin-top: -10px;margin-left: -10px}
.grid-10 > * {padding-top: 10px;padding-left: 10px}
.grid-15 {margin-top: -15px;margin-left: -15px}
.grid-15 > * {padding-top: 15px;padding-left: 15px}
.grid-10_20 {margin-top: -10px;margin-left: -20px}
.grid-10_20 > * {padding-top: 10px;padding-left: 20px}
.grid-20 {margin-top: -20px;margin-left: -20px}
.grid-20 > * {padding-top: 20px;padding-left: 20px}
.grid-20_10 {margin-top: -20px;margin-left: -10px}
.grid-20_10 > * {padding-top: 20px;padding-left: 10px}
.grid-30 {margin-top: -30px;margin-left: -30px}
.grid-30 > * {padding-top: 30px;padding-left: 30px}
@media (min-width: var(--br-point-l)) {
    .grid-5\@s {margin-top: -5px;margin-left: -5px;}
    .grid-5\@s > * {padding-top: 5px;padding-left: 5px}
    .grid-5_10\@s {margin-top: -5px;margin-left: -10px}
    .grid-5_10\@s > * {padding-top: 5px;padding-left: 10px}
    .grid-10\@s {margin-top: -10px;margin-left: -10px}
    .grid-10\@s > * {padding-top: 10px;padding-left: 10px}
    .grid-15\@s {margin-top: -15px;margin-left: -15px}
    .grid-15\@s > * {padding-top: 15px;padding-left: 15px}
    .grid-10_20\@s {margin-top: -10px;margin-left: -20px}
    .grid-10_20\@s > * {padding-top: 10px;padding-left: 20px}
    .grid-20\@s {margin-top: -20px;margin-left: -20px}
    .grid-20\@s > * {padding-top: 20px;padding-left: 20px}
    .grid-20_10\@s {margin-top: -20px;margin-left: -10px}
    .grid-20_10\@s > * {padding-top: 20px;padding-left: 10px}
    .grid-30\@s {margin-top: -30px;margin-left: -30px}
    .grid-30\@s > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 960px) {
    .grid-5\@m {margin-top: -5px;margin-left: -5px}
    .grid-5\@m > * {padding-top: 5px;padding-left: 5px}
    .grid-5_10\@m {margin-top: -5px;margin-left: -10px}
    .grid-5_10\@m > * {padding-top: 5px;padding-left: 10px}
    .grid-10\@m {margin-top: -10px;margin-left: -10px}
    .grid-10\@m > * {padding-top: 10px;padding-left: 10px}
    .grid-15\@m {margin-top: -15px;margin-left: -15px}
    .grid-15\@m > * {padding-top: 15px;padding-left: 15px}
    .grid-10_20\@m {margin-top: -10px;margin-left: -20px}
    .grid-10_20\@m > * {padding-top: 10px;padding-left: 20px}
    .grid-20\@m {margin-top: -20px;margin-left: -20px}
    .grid-20\@m > * {padding-top: 20px;padding-left: 20px}
    .grid-20_10\@m {margin-top: -20px;margin-left: -10px}
    .grid-20_10\@m > * {padding-top: 20px;padding-left: 10px}
    .grid-30\@m {margin-top: -30px;margin-left: -30px}
    .grid-30\@m > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 1200px) {
    .grid-5\@l {margin-top: -5px;margin-left: -5px}
    .grid-5\@l > * {padding-top: 5px;padding-left: 5px}
    .grid-5_10\@l {margin-top: -5px;margin-left: -10px}
    .grid-5_10\@l > * {padding-top: 5px;padding-left: 10px}
    .grid-10\@l {margin-top: -10px;margin-left: -10px}
    .grid-10\@l > * {padding-top: 10px;padding-left: 10px}
    .grid-15\@l {margin-top: -15px;margin-left: -15px}
    .grid-15\@l > * {padding-top: 15px;padding-left: 15px}
    .grid-10_20\@l {margin-top: -10px;margin-left: -20px}
    .grid-10_20\@l > * {padding-top: 10px;padding-left: 20px}
    .grid-20\@l {margin-top: -20px;margin-left: -20px}
    .grid-20\@l > * {padding-top: 20px;padding-left: 20px}
    .grid-20_10\@l {display: flex;flex-wrap: wrap;box-sizing: border-box;margin-top: -20px;margin-left: -10px}
    .grid-20_10\@l > * {padding-top: 20px;padding-left: 10px}
    .grid-30\@l {margin-top: -30px;margin-left: -30px}
    .grid-30\@l > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 1440px) {
    .grid-5\@n {margin-top: -5px;margin-left: -5px}
    .grid-5\@n > * {padding-top: 5px;padding-left: 5px}
    .grid-5_10\@n {margin-top: -5px;margin-left: -10px}
    .grid-5_10\@n > * {padding-top: 5px;padding-left: 10px}
    .grid-10\@n {margin-top: -10px;margin-left: -10px}
    .grid-10\@n > * {padding-top: 10px;padding-left: 10px}
    .grid-15\@n {margin-top: -15px;margin-left: -15px}
    .grid-15\@n > * {padding-top: 15px;padding-left: 15px}
    .grid-10_20\@n {margin-top: -10px;margin-left: -20px}
    .grid-10_20\@n > * {padding-top: 10px;padding-left: 20px}
    .grid-20\@n {margin-top: -20px;margin-left: -20px}
    .grid-20\@n > * {padding-top: 20px;padding-left: 20px}
    .grid-20_10\@n {margin-top: -20px;margin-left: -10px}
    .grid-20_10\@n > * {padding-top: 20px;padding-left: 10px}
    .grid-30\@n {margin-top: -30px;margin-left: -30px}
    .grid-30\@n > * {padding-top: 30px;padding-left: 30px}
}
@media (min-width: 1600px) {
    .grid-5\@xl {margin-top: -5px;margin-left: -5px}
    .grid-5\@xl > * {padding-top: 5px;padding-left: 5px}
    .grid-5_10\@xl {margin-top: -5px;margin-left: -10px}
    .grid-5_10\@xl > * {padding-top: 5px;padding-left: 10px}
    .grid-10\@xl {margin-top: -10px;margin-left: -10px}
    .grid-10\@xl > * {padding-top: 10px;padding-left: 10px}
    .grid-15\@xl {margin-top: -15px;margin-left: -15px}
    .grid-15\@xl > * {padding-top: 15px;padding-left: 15px}
    .grid-10_20\@xl {margin-top: -10px;margin-left: -20px}
    .grid-10_20\@xl > * {padding-top: 10px;padding-left: 20px}
    .grid-20\@xl {margin-top: -20px;margin-left: -20px}
    .grid-20\@xl > * {padding-top: 20px;padding-left: 20px}
    .grid-20_10\@xl {margin-top: -20px;margin-left: -10px}
    .grid-20_10\@xl > * {padding-top: 20px;padding-left: 10px}
    .grid-30\@xl {margin-top: -30px;margin-left: -30px}
    grid-30\@xl > * {padding-top: 30px;padding-left: 30px}
}

.p-5 {padding: 5px}  .p-10 {padding: 10px}  .p-15 {padding: 15px}  .p-20 {padding: 20px}  .p-25 {padding: 25px}  .p-30 {padding: 30px}  .p-35 {padding: 35px}  .p-40 {padding: 40px}  .p-45 {padding: 45px}  .pt-5 {padding-top: 5px}  .pt-10 {padding-top: 10px}  .pt-15 {padding-top: 15px}  .pt-20 {padding-top: 20px}  .pt-25 {padding-top: 25px}  .pt-30 {padding-top: 30px}  .pt-35 {padding-top: 35px}  .pt-40 {padding-top: 40px}  .pt-45 {padding-top: 45px}  .pr-5 {padding-right: 5px}  .pr-10 {padding-right: 10px}  .pr-15 {padding-right: 15px}  .pr-20 {padding-right: 20px}  .pr-25 {padding-right: 25px}  .pr-30 {padding-right: 30px}  .pr-35 {padding-right: 35px}  .pr-40 {padding-right: 40px}  .pr-45 {padding-right: 45px}  .pl-5 {padding-left: 5px}  .pl-10 {padding-left: 10px}  .pl-15 {padding-left: 15px}  .pl-20 {padding-left: 20px}  .pl-25 {padding-left: 25px}  .pl-30 {padding-left: 30px}  .pl-35 {padding-left: 35px}  .pl-40 {padding-left: 40px}  .pl-45 {padding-left: 45px}  .pb-5 {padding-bottom: 5px}  .pb-10 {padding-bottom: 10px}  .pb-15 {padding-bottom: 15px}  .pb-20 {padding-bottom: 20px}  .pb-25 {padding-bottom: 25px}  .pb-30 {padding-bottom: 30px}  .pb-35 {padding-bottom: 35px}  .pb-40 {padding-bottom: 40px}  .pb-45 {padding-bottom: 45px}  .p-5-10 {padding: 5px 10px}  .p-10-15 {padding: 10px 15px}  .p-7-14 {padding: 10px 15px}  .p-15-10 {padding: 15px 10px}  .p-20-30 {padding: 20px 30px}  .p-15-30 {padding: 15px 30px}  .p-10-30 {padding: 10px 30px}  .p-10-20 {padding: 10px 20px}

@media (min-width: 1600px) {
    .p-5\@xl {padding: 5px}
    .p-10\@xl {padding: 10px}
    .p-15\@xl {padding: 15px}
    .p-20\@xl {padding: 20px}
    .p-25\@xl {padding: 25px}
    .p-30\@xl {padding: 30px}
    .p-35\@xl {padding: 35px}
    .p-40\@xl {padding: 40px}
    .p-45\@xl {padding: 45px}
    .pt-5\@xl {padding-top: 5px}
    .pt-10\@xl {padding-top: 10px}
    .pt-15\@xl {padding-top: 15px}
    .pt-20\@xl {padding-top: 20px}
    .pt-25\@xl {padding-top: 25px}
    .pt-30\@xl {padding-top: 30px}
    .pt-35\@xl {padding-top: 35px}
    .pt-40\@xl {padding-top: 40px}
    .pt-45\@xl {padding-top: 45px}
    .pr-5\@xl {padding-right: 5px}
    .pr-10\@xl {padding-right: 10px}
    .pr-15\@xl {padding-right: 15px}
    .pr-20\@xl {padding-right: 20px}
    .pr-25\@xl {padding-right: 25px}
    .pr-30\@xl {padding-right: 30px}
    .pr-35\@xl {padding-right: 35px}
    .pr-40\@xl {padding-right: 40px}
    .pr-45\@xl {padding-right: 45px}
    .pl-5\@xl {padding-left: 5px}
    .pl-10\@xl {padding-left: 10px}
    .pl-15\@xl {padding-left: 15px}
    .pl-20\@xl {padding-left: 20px}
    .pl-25\@xl {padding-left: 25px}
    .pl-30\@xl {padding-left: 30px}
    .pl-35\@xl {padding-left: 35px}
    .pl-40\@xl {padding-left: 40px}
    .pl-45\@xl {padding-left: 45px}
    .pb-5\@xl {padding-bottom: 5px}
    .pb-10\@xl {padding-bottom: 10px}
    .pb-15\@xl {padding-bottom: 15px}
    .pb-20\@xl {padding-bottom: 20px}
    .pb-25\@xl {padding-bottom: 25px}
    .pb-30\@xl {padding-bottom: 30px}
    .pb-35\@xl {padding-bottom: 35px}
    .pb-40\@xl {padding-bottom: 40px}
    .pb-45\@xl {padding-bottom: 45px}
    .p-5-10\@xl {padding: 5px 10px}
    .p-10-15\@xl {padding: 10px 15px}
    .p-7-14\@xl {padding: 10px 15px}
    .p-15-10\@xl {padding: 15px 10px}
    .p-20-30\@xl {padding: 20px 30px}
    .p-15-30\@xl {padding: 15px 30px}
    .p-10-30\@xl {padding: 10px 30px}
    .p-10-20\@xl {padding: 10px 20px}
}

@media (min-width: 1440px) {
    .p-5\@n {padding: 5px}
    .p-10\@n {padding: 10px}
    .p-15\@n {padding: 15px}
    .p-20\@n {padding: 20px}
    .p-25\@n {padding: 25px}
    .p-30\@n {padding: 30px}
    .p-35\@n {padding: 35px}
    .p-40\@n {padding: 40px}
    .p-45\@n {padding: 45px}
    .pt-5\@n {padding-top: 5px}
    .pt-10\@n {padding-top: 10px}
    .pt-15\@n {padding-top: 15px}
    .pt-20\@n {padding-top: 20px}
    .pt-25\@n {padding-top: 25px}
    .pt-30\@n {padding-top: 30px}
    .pt-35\@n {padding-top: 35px}
    .pt-40\@n {padding-top: 40px}
    .pt-45\@n {padding-top: 45px}
    .pr-5\@n {padding-right: 5px}
    .pr-10\@n {padding-right: 10px}
    .pr-15\@n {padding-right: 15px}
    .pr-20\@n {padding-right: 20px}
    .pr-25\@n {padding-right: 25px}
    .pr-30\@n {padding-right: 30px}
    .pr-35\@n {padding-right: 35px}
    .pr-40\@n {padding-right: 40px}
    .pr-45\@n {padding-right: 45px}
    .pl-5\@n {padding-left: 5px}
    .pl-10\@n {padding-left: 10px}
    .pl-15\@n {padding-left: 15px}
    .pl-20\@n {padding-left: 20px}
    .pl-25\@n {padding-left: 25px}
    .pl-30\@n {padding-left: 30px}
    .pl-35\@n {padding-left: 35px}
    .pl-40\@n {padding-left: 40px}
    .pl-45\@n {padding-left: 45px}
    .pb-5\@n {padding-bottom: 5px}
    .pb-10\@n {padding-bottom: 10px}
    .pb-15\@n {padding-bottom: 15px}
    .pb-20\@n {padding-bottom: 20px}
    .pb-25\@n {padding-bottom: 25px}
    .pb-30\@n {padding-bottom: 30px}
    .pb-35\@n {padding-bottom: 35px}
    .pb-40\@n {padding-bottom: 40px}
    .pb-45\@n {padding-bottom: 45px}
    .p-5-10\@n {padding: 5px 10px}
    .p-10-15\@n {padding: 10px 15px}
    .p-7-14\@n {padding: 10px 15px}
    .p-15-10\@n {padding: 15px 10px}
    .p-20-30\@n {padding: 20px 30px}
    .p-15-30\@n {padding: 15px 30px}
    .p-10-30\@n {padding: 10px 30px}
    .p-10-20\@n {padding: 10px 20px}
}

@media (min-width: 1200px) {
    .p-5\@l {padding: 5px}
    .p-10\@l {padding: 10px}
    .p-15\@l {padding: 15px}
    .p-20\@l {padding: 20px}
    .p-25\@l {padding: 25px}
    .p-30\@l {padding: 30px}
    .p-35\@l {padding: 35px}
    .p-40\@l {padding: 40px}
    .p-45\@l {padding: 45px}
    .pt-5\@l {padding-top: 5px}
    .pt-10\@l {padding-top: 10px}
    .pt-15\@l {padding-top: 15px}
    .pt-20\@l {padding-top: 20px}
    .pt-25\@l {padding-top: 25px}
    .pt-30\@l {padding-top: 30px}
    .pt-35\@l {padding-top: 35px}
    .pt-40\@l {padding-top: 40px}
    .pt-45\@l {padding-top: 45px}
    .pr-5\@l {padding-right: 5px}
    .pr-10\@l {padding-right: 10px}
    .pr-15\@l {padding-right: 15px}
    .pr-20\@l {padding-right: 20px}
    .pr-25\@l {padding-right: 25px}
    .pr-30\@l {padding-right: 30px}
    .pr-35\@l {padding-right: 35px}
    .pr-40\@l {padding-right: 40px}
    .pr-45\@l {padding-right: 45px}
    .pl-5\@l {padding-left: 5px}
    .pl-10\@l {padding-left: 10px}
    .pl-15\@l {padding-left: 15px}
    .pl-20\@l {padding-left: 20px}
    .pl-25\@l {padding-left: 25px}
    .pl-30\@l {padding-left: 30px}
    .pl-35\@l {padding-left: 35px}
    .pl-40\@l {padding-left: 40px}
    .pl-45\@l {padding-left: 45px}
    .pb-5\@l {padding-bottom: 5px}
    .pb-10\@l {padding-bottom: 10px}
    .pb-15\@l {padding-bottom: 15px}
    .pb-20\@l {padding-bottom: 20px}
    .pb-25\@l {padding-bottom: 25px}
    .pb-30\@l {padding-bottom: 30px}
    .pb-35\@l {padding-bottom: 35px}
    .pb-40\@l {padding-bottom: 40px}
    .pb-45\@l {padding-bottom: 45px}
    .p-5-10\@l {padding: 5px 10px}
    .p-10-15\@l {padding: 10px 15px}
    .p-7-14\@l {padding: 10px 15px}
    .p-15-10\@l {padding: 15px 10px}
    .p-20-30\@l {padding: 20px 30px}
    .p-15-30\@l {padding: 15px 30px}
    .p-10-30\@l {padding: 10px 30px}
    .p-10-20\@l {padding: 10px 20px}
}

@media (min-width: 960px) {

    .p-5\@m {padding: 5px}
    .p-10\@m {padding: 10px}
    .p-15\@m {padding: 15px}
    .p-20\@m {padding: 20px}
    .p-25\@m {padding: 25px}
    .p-30\@m {padding: 30px}
    .p-35\@m {padding: 35px}
    .p-40\@m {
        padding: 40px
    }

    .p-45\@m {padding: 45px}
    .pt-5\@m {padding-top: 5px}
    .pt-10\@m {padding-top: 10px}
    .pt-15\@m {padding-top: 15px}
    .pt-20\@m {padding-top: 20px}
    .pt-25\@m {padding-top: 25px}
    .pt-30\@m {padding-top: 30px}
    .pt-35\@m {padding-top: 35px}
    .pt-40\@m {padding-top: 40px}
    .pt-45\@m {padding-top: 45px}
    .pr-5\@m {padding-right: 5px}
    .pr-10\@m {padding-right: 10px}
    .pr-15\@m {padding-right: 15px}
    .pr-20\@m {padding-right: 20px}
    .pr-25\@m {padding-right: 25px}
    .pr-30\@m {padding-right: 30px}
    .pr-35\@m {padding-right: 35px}
    .pr-40\@m {padding-right: 40px}
    .pr-45\@m {padding-right: 45px}
    .pl-5\@m {padding-left: 5px}
    .pl-10\@m {padding-left: 10px}
    .pl-15\@m {padding-left: 15px}
    .pl-20\@m {padding-left: 20px}
    .pl-25\@m {padding-left: 25px}
    .pl-30\@m {padding-left: 30px}
    .pl-35\@m {padding-left: 35px}
    .pl-40\@m {padding-left: 40px}
    .pl-45\@m {padding-left: 45px}
    .pb-5\@m {padding-bottom: 5px}
    .pb-10\@m {padding-bottom: 10px}
    .pb-15\@m {padding-bottom: 15px}
    .pb-20\@m {padding-bottom: 20px}
    .pb-25\@m {padding-bottom: 25px}
    .pb-30\@m {padding-bottom: 30px}
    .pb-35\@m {padding-bottom: 35px}
    .pb-40\@m {padding-bottom: 40px}
    .pb-45\@m {padding-bottom: 45px}
    .p-5-10\@m {padding: 5px 10px}
    .p-10-15\@m {padding: 10px 15px}
    .p-7-14\@m {padding: 10px 15px}
    .p-15-10\@m {padding: 15px 10px}
    .p-20-30\@m {padding: 20px 30px}
    .p-15-30\@m {padding: 15px 30px}
    .p-10-30\@m {padding: 10px 30px}
    .p-10-20\@m {padding: 10px 20px}
}
@media (min-width: 640px)
{
    .p-5\@s {padding: 5px}  .p-10\@s {padding: 10px}
    .p-15\@s {padding: 15px}  .p-20\@s {padding: 20px}
    .p-25\@s {padding: 25px}  .p-30\@s {padding: 30px}
    .p-35\@s {padding: 35px}  .p-40\@s {padding: 40px}
    .p-45\@s {padding: 45px}  .pt-5\@s {padding-top: 5px}
    .pt-10\@s {padding-top: 10px}  .pt-15\@s {padding-top: 15px}
    .pt-20\@s {padding-top: 20px}  .pt-25\@s {padding-top: 25px}
    .pt-30\@s {padding-top: 30px}  .pt-35\@s {padding-top: 35px}
    .pt-40\@s {padding-top: 40px}  .pt-45\@s {padding-top: 45px}
    .pr-5\@s {padding-right: 5px}  .pr-10\@s {padding-right: 10px}
    .pr-15\@s {padding-right: 15px}  .pr-20\@s {padding-right: 20px}
    .pr-25\@s {padding-right: 25px}  .pr-30\@s {padding-right: 30px}
    .pr-35\@s {padding-right: 35px}  .pr-40\@s {padding-right: 40px}
    .pr-45\@s {padding-right: 45px}  .pl-5\@s {padding-left: 5px}
    .pl-10\@s {padding-left: 10px}  .pl-15\@s {padding-left: 15px}
    .pl-20\@s {padding-left: 20px}
    .pl-25\@s {padding-left: 25px}
    .pl-30\@s {padding-left: 30px}
    .pl-35\@s {padding-left: 35px}
    .pl-40\@s {padding-left: 40px}
    .pl-45\@s {padding-left: 45px}
    .pb-5\@s {padding-bottom: 5px}
    .pb-10\@s {padding-bottom: 10px}
    .pb-15\@s {padding-bottom: 15px}
    .pb-20\@s {padding-bottom: 20px}
    .pb-25\@s {padding-bottom: 25px}
    .pb-30\@s {padding-bottom: 30px}
    .pb-35\@s {padding-bottom: 35px}
    .pb-40\@s {padding-bottom: 40px}
    .pb-45\@s {padding-bottom: 45px}
    .p-5-10\@s {padding: 5px 10px}
    .p-10-15\@s {padding: 10px 15px}
    .p-7-14\@s {padding: 10px 15px}
    .p-15-10\@s {padding: 15px 10px}
    .p-20-30\@s {padding: 20px 30px}
    .p-15-30\@s {padding: 15px 30px}
    .p-10-30\@s {padding: 10px 30px}
    .p-10-20\@s {padding: 10px 20px}  }
.m-5 {margin: 5px}
.m-10 {margin: 10px}
.m-15 {margin: 15px}
.m-20 {margin: 20px}
.m-25 {margin: 25px}
.m-30 {margin: 30px}
.m-35 {margin: 35px}
.m-40 {margin: 40px}
.m-45 {margin: 45px}
.mt-5 {margin-top: 5px}
.mt-10 {margin-top: 10px}
.mt-15 {margin-top: 15px}
.mt-20 {margin-top: 20px}
.mt-25 {margin-top: 25px}
.mt-30 {margin-top: 30px}
.mt-35 {margin-top: 35px}
.mt-40 {margin-top: 40px}
.mt-45 {margin-top: 45px}
.mr-5 {margin-right: 5px}
.mr-10 {margin-right: 10px}
.mr-15 {margin-right: 15px}
.mr-20 {margin-right: 20px}
.mr-25 {margin-right: 25px}
.mr-30 {margin-right: 30px}
.mr-35 {margin-right: 35px}
.mr-40 {margin-right: 40px}
.mr-45 {margin-right: 45px}
.ml-5 {margin-left: 5px}
.ml-10 {margin-left: 10px}
.ml-15 {margin-left: 15px}
.ml-20 {margin-left: 20px}
.ml-25 {margin-left: 25px}
.ml-30 {margin-left: 30px}
.ml-35 {margin-left: 35px}
.ml-40 {margin-left: 40px}
.ml-45 {margin-left: 45px}
.mb-5 {margin-bottom: 5px}
.mb-10 {margin-bottom: 10px}
.mb-15 {margin-bottom: 15px}
.mb-20 {margin-bottom: 20px}
.mb-25 {margin-bottom: 25px}
.mb-30 {margin-bottom: 30px}
.mb-35 {margin-bottom: 35px}
.mb-40 {margin-bottom: 40px}
.mb-45 {margin-bottom: 45px}


[class^="width"] {box-sizing: border-box;width: 100%;max-width: 100%;}
[class*=child-width] > * {box-sizing: border-box;}
.child-width-expand > * {min-width: 1px;flex: 1;}
.child-width-1-1 > * {width: 100%;}
.child-width-1-12 > * {width: 8.333%;}
.child-width-2-12 > * {width: 16.666%;}
.child-width-3-12 > * {width: 25%;}
.child-width-4-12 > * {width: 33.333%;}
.child-width-5-12 > * {width: 41.666%;}
.child-width-6-12 > * {width: 50%;}
.child-width-7-12 > * {width: 58.333%;}
.child-width-8-12 > * {width: 66.666%;}
.child-width-9-12 > * {width: 75%;}
.child-width-10-12 > * {width: 83.333%;}
.child-width-11-12 > * {width: 91.666%;}

@media (min-width: 1600px) {
    .child-width-expand\@xl > * {min-width: 1px;flex: 1;}
    .child-width-1-1\@xl > * {width: 100%;}
    .child-width-1-12\@xl > * {width: 8.333%;}
    .child-width-2-12\@xl > * {width: 16.666%;}
    .child-width-3-12\@xl > * {width: 25%;}
    .child-width-4-12\@xl > * {width: 33.333%;}
    .child-width-5-12\@xl > * {width: 41.666%;}
    .child-width-6-12 > * {width: 50%;}
    .child-width-7-12\@xl > * {width: 58.333%;}
    .child-width-8-12\@xl > * {width: 66.666%;}
    .child-width-9-12\@xl > * {width: 75%;}
    .child-width-10-12\@xl > * {width: 83.333%;}
    .child-width-11-12\@xl > * {width: 91.666%;}
}
@media (min-width: 1440px) {
    .child-width-expand\@n > * {min-width: 1px;flex: 1;}
    .child-width-1-1\@n > * {width: 100%;}
    .child-width-1-12\@n > * {width: 8.333%;}
    .child-width-2-12\@n > * {width: 16.666%;}
    .child-width-3-12\@n > * {width: 25%;}
    .child-width-4-12\@n > * {width: 33.333%;}
    .child-width-5-12\@n > * {width: 41.666%;}
    .child-width-6-12 > * {width: 50%;}
    .child-width-7-12\@n > * {width: 58.333%;}
    .child-width-8-12\@n > * {width: 66.666%;}
    .child-width-9-12\@n > * {width: 75%;}
    .child-width-10-12\@n > * {width: 83.333%;}
    .child-width-11-12\@n > * {width: 91.666%;}
}
@media (min-width: 1200px) {
    .child-width-expand\@l > * {min-width: 1px;flex: 1;}
    .child-width-1-1\@l > * {width: 100%;}
    .child-width-1-12\@l > * {width: 8.333%;}
    .child-width-2-12\@l > * {width: 16.666%;}
    .child-width-3-12\@l > * {width: 25%;}
    .child-width-4-12\@l > * {width: 33.333%;}
    .child-width-5-12\@l > * {width: 41.666%;}
    .child-width-6-12 > * {width: 50%;}
    .child-width-7-12\@l > * {width: 58.333%;}
    .child-width-8-12\@l > * {width: 66.666%;}
    .child-width-9-12\@l > * {width: 75%;}
    .child-width-10-12\@l > * {width: 83.333%;}
    .child-width-11-12\@l > * {width: 91.666%;}
}
@media (min-width: 960px) {
    .child-width-expand\@m > * {min-width: 1px;flex: 1;}
    .child-width-1-1\@m > * {width: 100%;}
    .child-width-1-12\@m > * {width: 8.333%;}
    .child-width-2-12\@m > * {width: 16.666%;}
    .child-width-3-12\@m > * {width: 25%;}
    .child-width-4-12\@m > * {width: 33.333%;}
    .child-width-5-12\@m > * {width: 41.666%;}
    .child-width-6-12 > * {width: 50%;}
    .child-width-7-12\@m > * {width: 58.333%;}
    .child-width-8-12\@m > * {width: 66.666%;}
    .child-width-9-12\@m > * {width: 75%;}
    .child-width-10-12\@m > * {width: 83.333%;}
    .child-width-11-12\@m > * {width: 91.666%;}
}
@media (min-width: 640px) {
    .child-width-expand\@s > * {min-width: 1px;flex: 1;}
    .child-width-1-1\@s > * {width: 100%;}
    .child-width-1-12\@s > * {width: 8.333%;}
    .child-width-2-12\@s > * {width: 16.666%;}
    .child-width-3-12\@s > * {width: 25%;}
    .child-width-4-12\@s > * {width: 33.333%;}
    .child-width-5-12\@s > * {width: 41.666%;}
    .child-width-6-12 > * {width: 50%;}
    .child-width-7-12\@s > * {width: 58.333%;}
    .child-width-8-12\@s > * {width: 66.666%;}
    .child-width-9-12\@s > * {width: 75%;}
    .child-width-10-12\@s > * {width: 83.333%;}
    .child-width-11-12\@s > * {width: 91.666%;}
}

.width-expand {min-width: 1px;flex: 1;}
.width-1-1 {width: 100%;}
.width-1-12 {width: 8.333%;}
.width-2-12 {width: 16.666%;}
.width-3-12 {width: 25%;}
.width-4-12 {width: 33.333%;}
.width-5-12 {width: 41.666%;}
.width-6-12 {width: 50%;}
.width-7-12 {width: 58.333%;}
.width-8-12 {width: 66.666%;}
.width-9-12 {width: 75%;}
.width-10-12 {width: 83.333%;}
.width-11-12 {width: 91.666%;}

@media (min-width: 1600px){
    .width-expand\@xl {min-width: 1px;flex: 1;}
    .width-1-1\@xl {width: 100%;}
    .width-1-12\@xl {width: 8.333%;}
    .width-2-12\@xl {width: 16.666%;}
    .width-3-12\@xl {width: 25%;}
    .width-4-12\@xl {width: 33.333%;}
    .width-5-12\@xl {width: 41.666%;}
    .width-6-12\@xl {width: 50%;}
    .width-7-12\@xl {width: 58.333%;}
    .width-8-12\@xl {width: 66.666%;}
    .width-9-12\@xl {width: 75%;}
    .width-10-12\@xl {width: 83.333%;}
    .width-11-12\@xl {width: 91.666%;}
}

@media (min-width: 1440px){
    .width-expand\@n {min-width: 1px;flex: 1;}
    .width-1-1\@n {width: 100%;}
    .width-1-12\@n {width: 8.333%;}
    .width-2-12\@n {width: 16.666%;}
    .width-3-12\@n {width: 25%;}
    .width-4-12\@n {width: 33.333%;}
    .width-5-12\@n {width: 41.666%;}
    .width-6-12\@n {width: 50%;}
    .width-7-12\@n {width: 58.333%;}
    .width-8-12\@n {width: 66.666%;}
    .width-9-12\@n {width: 75%;}
    .width-10-12\@n {width: 83.333%;}
    .width-11-12\@n {width: 91.666%;}
}
@media (min-width: 1200px){
    .width-expand\@l {min-width: 1px;flex: 1;}
    .width-1-1\@l {width: 100%;}
    .width-1-12\@l {width: 8.333%;}
    .width-2-12\@l {width: 16.666%;}
    .width-3-12\@l {width: 25%;}
    .width-4-12\@l {width: 33.333%;}
    .width-5-12\@l {width: 41.666%;}
    .width-6-12\@l {width: 50%;}
    .width-7-12\@l {width: 58.333%;}
    .width-8-12\@l {width: 66.666%;}
    .width-9-12\@l {width: 75%;}
    .width-10-12\@l {width: 83.333%;}
    .width-11-12\@l {width: 91.666%;}
}
@media (min-width: 960px){
    .width-expand\@m {min-width: 1px;flex: 1;}
    .width-1-1\@m {width: 100%;}
    .width-1-12\@m {width: 8.333%;}
    .width-2-12\@m {width: 16.666%;}
    .width-3-12\@m {width: 25%;}
    .width-4-12\@m {width: 33.333%;}
    .width-5-12\@m {width: 41.666%;}
    .width-6-12\@m {width: 50%;}
    .width-7-12\@m {width: 58.333%;}
    .width-8-12\@m {width: 66.666%;}
    .width-9-12\@m {width: 75%;}
    .width-10-12\@m {width: 83.333%;}
    .width-11-12\@m {width: 91.666%;}
}
@media (min-width: 640px){
    .width-expand\@s {min-width: 1px;flex: 1;}
    .width-1-1\@s {width: 100%;}
    .width-1-12\@s {width: 8.333%;}
    .width-2-12\@s {width: 16.666%;}
    .width-3-12\@s {width: 25%;}
    .width-4-12\@s {width: 33.333%;}
    .width-5-12\@s {width: 41.666%;}
    .width-6-12\@s {width: 50%;}
    .width-7-12\@s {width: 58.333%;}
    .width-8-12\@s {width: 66.666%;}
    .width-9-12\@s {width: 75%;}
    .width-10-12\@s {width: 83.333%;}
    .width-11-12\@s {width: 91.666%;}
}
.lineClamp12 {display: -webkit-box !important;-webkit-line-clamp: 12;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp11 {display: -webkit-box !important;-webkit-line-clamp: 11;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp10 {display: -webkit-box !important;-webkit-line-clamp: 10;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp9 {display: -webkit-box !important;-webkit-line-clamp: 9;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp8 {display: -webkit-box !important;-webkit-line-clamp: 8;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp7 {display: -webkit-box !important;-webkit-line-clamp: 7;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp6 {display: -webkit-box !important;-webkit-line-clamp: 6;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp5 {display: -webkit-box !important;-webkit-line-clamp: 5;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp4 {display: -webkit-box !important;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp3 {display: -webkit-box !important;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp2 {display: -webkit-box !important;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.lineClamp1 {display: -webkit-box !important;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}

* {font-family: "Roboto";text-decoration: none}

a:hover {text-decoration: none}
.container-padding__remove {padding: 0;}
.transition-fade {transition: opacity 1s, visibility .4s;}
.hidden {opacity: 0;}
.fadeOut {opacity: 0 !important;}
.fadeIn {opacity: 1 !important;}
/*.button {display: flex;align-items: center;border-style: none;border-radius: 10px;box-sizing: border-box;padding: 13px 10px;font-size: 16px;font-weight: 500;color: #fff;line-height: 150%;height: 40px;transition: box-shadow .3s, border .3s, color .3s, background-color .3s;}*/
/*.button-medium {padding: 15px;height: 50px;}*/
/*button:not(:disabled), .button:not(:disabled) {cursor: pointer;}*/
/*.button:disabled {border: 2px solid #999;background-color: #999;color: #666;}*/
/*.button-transparent {background-color: transparent;}*/

.max-height {
    height: max-content;
}
ul.menu{display: flex;}
ul.menu li{padding: 5px;}

.slide{position: relative;}
.slide img{width: 100%;}
.slide .title{position: absolute; z-index: 1;}
.slide .more{position: absolute; z-index: 1;}

/* end of components */



.button {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #E7E7E7;
    border-radius: 3px;
    padding: 5px 7px;
    min-height: 34px;
    background-color: #f8f8f8;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    transition: border .5s, color .5s, background-color .5s;
}
.button svg path {
    fill: #666;
}
.button__small {
    display: flex;
    align-items: center;
    border: 1px solid #E7E7E7;
    border-radius: 3px;
    padding: 5px 7px;
    min-height: 34px;
    background-color: #f8f8f8;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: border .5s, color .5s, background-color .5s;
}
.button__medium {
    display: flex;
    align-items: center;
    border: 1px solid #E7E7E7;
    border-radius: 3px;
    padding: 5px 15px;
    min-width: 42px;
    min-height: 42px;
    text-align: center;
    background-color: #f8f8f8;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    transition: border .5s, color .5s, background-color .5s;
}
.button:hover {
    border: 1px solid #666;
    color: #333;
}
.button svg{
    /*padding: 1px;*/
    margin: 0 3px;
    box-sizing: border-box;
}
.button-primary {
    border: 1px solid rgb(31 60 146);
    color: rgb(31 60 146);
    background-color: rgb(255 255 255);
}
.button-primary:hover {
    border: 1px solid rgb(31 60 146);
    color: rgb(255 255 255);
    background-color: rgb(31 60 146);
}
.button-warning {
    border: 1px solid #CC9A06;
    color: #5A4914;
    background-color: #FFC107;
}
.button-warning:hover {
    color: #5A4914;
    background-color: #cf9b00;
}
.button-success svg path{
    fill: #5A4914;
}
.button-success {
    border: 1px solid #609952;
    color: #fff;
    background-color: #78BF67;
}
.button-success:hover {
    border-color: #78BF67;
    color: #fff;
    background-color: #578f4a;
}
.button-success svg path {
    fill: #fff;
}
.button-danger {
    border: 1px solid #B02A37;
    color: #FFFFFF;
    background-color: #DC3545;
}
.button-danger:hover {
    border-color: #DC3545;
    color: #FFFFFF;
    background-color: #b32735;
}
.button-danger svg path{
    fill: #fff;
}
.button-dark {
    border-color: #333;
    color: #FFFFFF;
    background-color: #363636;
}
.button-dark:hover {
    color: #FFFFFF;
}
.button-dark svg path {
    fill: #fff
}
.button-secondary {
    border-color: #9e9e9e;
    color: #FFFFFF;
    background-color: #9e9e9e;
}
.button-secondary svg path {
    fill: #fff
}
.button-secondary:hover {
    border-color: #6e6e6e;
    color: #FFFFFF;
    background-color: #6e6e6e;
}



.input__default {
    box-sizing: border-box;
    border: 1px solid #dedede;
    border-radius: 3px;
    padding: 10px 15px;
    font-size: 16px;
    color: #363636;
    width: 100%;
    max-width: 100%;
}
.input__default::placeholder {
    font-size: 16px;
    color: #999;
}
.textarea__default {
    box-sizing: border-box;
    border: 1px solid #dedede;
    border-radius: 3px;
    padding: 10px 15px;
    font-size: 16px;
    color: #363636;
    width: 100%;
    max-width: 100%;
}
.textarea__default::placeholder {
    font-size: 16px;
    color: #999;
}
.radio__default {

}
.checkbox__default {

}
.select__default {
    box-sizing: border-box;
    border: 1px solid #dedede;
    border-radius: 3px;
    background-color: #fff;
    padding: 10px 15px;
}
.form__invalid {
    box-sizing: border-box;
    border: 1px solid #dc3545;
    border-radius: 3px;
    padding: 10px 15px;
    font-size: 16px;
    color: #363636;
    width: 100%;
    max-width: 100%;
}
.form__invalid::placeholder {
    color: rgb(220 53 69 / 70%);
}
.form-error {
    color: rgb(220 53 69 / 70%);
}