/* for reset */
ul, ol, li{ margin: 0; padding: 0;}
/* end of reset */

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

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


.display-flex {display: flex}
.display-block {display: block}

/**
TODO хэзээ нэгэн цагт Grid -д зориулсан `class` -ууд оруулж тавих болно
*/
.display-grid {display: grid}


.flex-order-0 {order: 0}
.flex-order-1 {order: 1}
.flex-order-2 {order: 2}
.flex-order-3 {order: 3}
.flex-order-4 {order: 4}
.flex-order-5 {order: 5}
.flex-order-6 {order: 6}
.flex-order-7 {order: 7}
.flex-order-8 {order: 8}
.flex-order-9 {order: 9}
.flex-order-10 {order: 10}
@media (min-width: 1600px){
    .flex-order-0\@xl {order: 0}
    .flex-order-1\@xl {order: 1}
    .flex-order-2\@xl {order: 2}
    .flex-order-3\@xl {order: 3}
    .flex-order-4\@xl {order: 4}
    .flex-order-5\@xl {order: 5}
    .flex-order-6\@xl {order: 6}
    .flex-order-7\@xl {order: 7}
    .flex-order-8\@xl {order: 8}
    .flex-order-9\@xl {order: 9}
    .flex-order-10\@xl {order: 10}
}
@media (min-width: 1440px){
    .flex-order-0\@n {order: 0}
    .flex-order-1\@n {order: 1}
    .flex-order-2\@n {order: 2}
    .flex-order-3\@n {order: 3}
    .flex-order-4\@n {order: 4}
    .flex-order-5\@n {order: 5}
    .flex-order-6\@n {order: 6}
    .flex-order-7\@n {order: 7}
    .flex-order-8\@n {order: 8}
    .flex-order-9\@n {order: 9}
    .flex-order-10\@n {order: 10}
}
@media (min-width: 1200px){
    .flex-order-0\@l {order: 0}
    .flex-order-1\@l {order: 1}
    .flex-order-2\@l {order: 2}
    .flex-order-3\@l {order: 3}
    .flex-order-4\@l {order: 4}
    .flex-order-5\@l {order: 5}
    .flex-order-6\@l {order: 6}
    .flex-order-7\@l {order: 7}
    .flex-order-8\@l {order: 8}
    .flex-order-9\@l {order: 9}
    .flex-order-10\@l {order: 10}
}
@media (min-width: 960px){
    .flex-order-0\@m {order: 0}
    .flex-order-1\@m {order: 1}
    .flex-order-2\@m {order: 2}
    .flex-order-3\@m {order: 3}
    .flex-order-4\@m {order: 4}
    .flex-order-5\@m {order: 5}
    .flex-order-6\@m {order: 6}
    .flex-order-7\@m {order: 7}
    .flex-order-8\@m {order: 8}
    .flex-order-9\@m {order: 9}
    .flex-order-10\@m {order: 10}
}
@media (min-width: 640px){
    .flex-order-0\@s {order: 0}
    .flex-order-1\@s {order: 1}
    .flex-order-2\@s {order: 2}
    .flex-order-3\@s {order: 3}
    .flex-order-4\@s {order: 4}
    .flex-order-5\@s {order: 5}
    .flex-order-6\@s {order: 6}
    .flex-order-7\@s {order: 7}
    .flex-order-8\@s {order: 8}
    .flex-order-9\@s {order: 9}
    .flex-order-10\@s {order: 10}
}


.flex-align-center {align-items: center}
.flex-align-end {align-items: flex-end}
.flex-align-start {align-items: flex-start}
.flex-align-self-start {align-items: self-start}
.flex-align-self-end {align-items: self-end}
@media (min-width: 1600px) {
    .flex-align-center\@xl {align-items: center}
    .flex-align-end\@xl {align-items: flex-end}
    .flex-align-start\@xl {align-items: flex-start}
    .flex-align-self-start\@xl {align-items: self-start}
    .flex-align-self-end\@xl {align-items: self-end}
}
@media (min-width: 1440px) {
    .flex-align-center\@n {align-items: center}
    .flex-align-end\@n {align-items: flex-end}
    .flex-align-start\@n {align-items: flex-start}
    .flex-align-self-start\@n {align-items: self-start}
    .flex-align-self-end\@n {align-items: self-end}
}
@media (min-width: 1200px) {
    .flex-align-center\@l {align-items: center}
    .flex-align-end\@l {align-items: flex-end}
    .flex-align-start\@l {align-items: flex-start}
    .flex-align-self-start\@l {align-items: self-start}
    .flex-align-self-end\@l {align-items: self-end}
}
@media (min-width: 960px) {
    .flex-align-center\@m {align-items: center}
    .flex-align-end\@m {align-items: flex-end}
    .flex-align-start\@m {align-items: flex-start}
    .flex-align-self-start\@m {align-items: self-start}
    .flex-align-self-end\@m {align-items: self-end}
}
@media (min-width: 640px) {
    .flex-align-center\@s {align-items: center}
    .flex-align-end\@s {align-items: flex-end}
    .flex-align-start\@s {align-items: flex-start}
    .flex-align-self-start\@s {align-items: self-start}
    .flex-align-self-end\@s {align-items: self-end}
}

.flex-justify-center {justify-content: center}
.flex-justify-between {justify-content: space-between}
.flex-justify-around {justify-content: space-around}
.flex-justify-evenly {justify-content: space-evenly}
.flex-justify-start {justify-content: flex-start}
.flex-justify-end {justify-content: flex-end}
.flex-justify-right {justify-content: right}
.flex-justify-left {justify-content: left}
@media (min-width: 1600px) {
    .flex-justify-center\@xl {justify-content: center}
    .flex-justify-between\@xl {justify-content: space-between}
    .flex-justify-around\@xl {justify-content: space-around}
    .flex-justify-evenly\@xl {justify-content: space-evenly}
    .flex-justify-start\@xl {justify-content: flex-start}
    .flex-justify-end\@xl {justify-content: flex-end}
    .flex-justify-right\@xl {justify-content: right}
    .flex-justify-left\@xl {justify-content: left}
}
@media (min-width: 1440px) {
    .flex-justify-center\@n {justify-content: center}
    .flex-justify-between\@n {justify-content: space-between}
    .flex-justify-around\@n {justify-content: space-around}
    .flex-justify-evenly\@n {justify-content: space-evenly}
    .flex-justify-start\@n {justify-content: flex-start}
    .flex-justify-end\@n {justify-content: flex-end}
    .flex-justify-right\@n {justify-content: right}
    .flex-justify-left\@n {justify-content: left}
}
@media (min-width: 1200px) {
    .flex-justify-center\@l {justify-content: center}
    .flex-justify-between\@l {justify-content: space-between}
    .flex-justify-around\@l {justify-content: space-around}
    .flex-justify-evenly\@l {justify-content: space-evenly}
    .flex-justify-start\@l {justify-content: flex-start}
    .flex-justify-end\@l {justify-content: flex-end}
    .flex-justify-right\@l {justify-content: right}
    .flex-justify-left\@l {justify-content: left}
}
@media (min-width: 960px) {
    .flex-justify-center\@m {justify-content: center}
    .flex-justify-between\@m {justify-content: space-between}
    .flex-justify-around\@m {justify-content: space-around}
    .flex-justify-evenly\@m {justify-content: space-evenly}
    .flex-justify-start\@m {justify-content: flex-start}
    .flex-justify-end\@m {justify-content: flex-end}
    .flex-justify-right\@m {justify-content: right}
    .flex-justify-left\@m {justify-content: left}
}
@media (min-width: 640px) {
    .flex-justify-center\@s {justify-content: center}
    .flex-justify-between\@s {justify-content: space-between}
    .flex-justify-around\@s {justify-content: space-around}
    .flex-justify-evenly\@s {justify-content: space-evenly}
    .flex-justify-start\@s {justify-content: flex-start}
    .flex-justify-end\@s {justify-content: flex-end}
    .flex-justify-right\@s {justify-content: right}
    .flex-justify-left\@s {justify-content: left}
}


.flex-justify-self-center {justify-self: center}
.flex-justify-self-start {justify-self: flex-start}
.flex-justify-self-end {justify-self: flex-end}
.flex-justify-self-sStart {justify-self: self-start}
.flex-justify-self-sEnd {justify-self: self-end}
.flex-justify-self-right {justify-self: right}
.flex-justify-self-left {justify-self: left}
@media (min-width: 1600px) {
    .flex-justify-self-center\@xl {justify-self: center}
    .flex-justify-self-start\@xl {justify-self: flex-start}
    .flex-justify-self-end\@xl {justify-self: flex-end}
    .flex-justify-self-sStart\@xl {justify-self: self-start}
    .flex-justify-self-sEnd\@xl {justify-self: self-end}
    .flex-justify-self-right\@xl {justify-self: right}
    .flex-justify-self-left\@xl {justify-self: left}
}
@media (min-width: 1440px) {
    .flex-justify-self-center\@n {justify-self: center}
    .flex-justify-self-start\@n {justify-self: flex-start}
    .flex-justify-self-end\@n {justify-self: flex-end}
    .flex-justify-self-sStart\@n {justify-self: self-start}
    .flex-justify-self-sEnd\@n {justify-self: self-end}
    .flex-justify-self-right\@n {justify-self: right}
    .flex-justify-self-left\@n {justify-self: left}
}
@media (min-width: 1200px) {
    .flex-justify-self-center\@l {justify-self: center}
    .flex-justify-self-start\@l {justify-self: flex-start}
    .flex-justify-self-end\@l {justify-self: flex-end}
    .flex-justify-self-sStart\@l {justify-self: self-start}
    .flex-justify-self-sEnd\@l {justify-self: self-end}
    .flex-justify-self-right\@l {justify-self: right}
    .flex-justify-self-left\@l {justify-self: left}
}
@media (min-width: 960px) {
    .flex-justify-self-center\@m {justify-self: center}
    .flex-justify-self-start\@m {justify-self: flex-start}
    .flex-justify-self-end\@m {justify-self: flex-end}
    .flex-justify-self-sStart\@m {justify-self: self-start}
    .flex-justify-self-sEnd\@m {justify-self: self-end}
    .flex-justify-self-right\@m {justify-self: right}
    .flex-justify-self-left\@m {justify-self: left}
}
@media (min-width: 640px) {
    .flex-justify-self-center\@s {justify-self: center}
    .flex-justify-self-start\@s {justify-self: flex-start}
    .flex-justify-self-end\@s {justify-self: flex-end}
    .flex-justify-self-sStart\@s {justify-self: self-start}
    .flex-justify-self-sEnd\@s {justify-self: self-end}
    .flex-justify-self-right\@s {justify-self: right}
    .flex-justify-self-left\@s {justify-self: left}
}




*[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}
.ml-auto{margin-left: auto}
.mr-auto{margin-right: auto}


[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;}


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;}

.bg-white {background-color: #fff}
.bg-grey {background-color: grey}
.bg-gray {background-color: gray}
.bg-dark {background-color: #363636}
.bg-smoke {background-color: whitesmoke}
.bg-darkgray {background-color: darkgray}

.article-video {width: 100%;height: 100%;object-fit: cover;}

/* end of components */

/* emoji for ui */
.emoji-poll-title{margin-bottom: 10px;padding-bottom: 10px;color: #363636;font-size: 18px;line-height: 25px;font-weight: 600}
.article-reaction-item{margin-left: 3px;margin-right: 3px;text-align: center;padding: 10px;border-radius: 20px;background-color: #fff;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.article-reaction-item .article-reaction-emoji, .article-reaction-item:hover .article-reaction-emoji {-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
.article-reaction-item .article-reaction-emoji img, .article-reaction-item:hover .article-reaction-emoji img {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.article-reaction-number {font-size: 18px;font-weight: 700;color: #363636;line-height: 25px;}
.article-reaction-item.active, .article-reaction-item:hover {background-color: #f2f2f2;cursor: pointer;transition: all .3s ease-in-out;}
.article-reaction-item:hover .article-reaction-emoji {transform: scale(1.1) rotate(10deg);}
.article-reaction-item:hover .article-reaction-emoji img {filter: grayscale(0);opacity: 1;}

@media (max-width: 700px) {
    .article-reaction-item{
        padding: 2px;
    }
}

/* emoji end ui */

/* for show slide */
.image-slide-wrapper{position: relative; overflow: hidden; margin: 10px 0;}
.image-slide-wrapper__text{  background-color: #dbe1ea;font-size: 11px;color: #454d62;text-align: center;font-style: italic;line-height: 1.6;padding: 4px;position: absolute; bottom: 0; left: 0; right: 0; width: 100%;}

.show_slide{display: flex; flex-wrap: wrap;}
.show_slide-item{padding: 1%; box-sizing: border-box; position: relative; overflow: hidden;}
.show-slide-item{width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative;}
.show_slide-2 .show_slide-item{flex: 0 0 50%;}
.show_slide-3 .show_slide-item{flex: 0 0 33.33%;}
.show_slide-4 .show_slide-item{flex: 0 0 20%;}

.show_slide-2 .show_slide-item:nth-child(2n){padding-right: 0;}
.show_slide-3 .show_slide-item:nth-child(3n){padding-right: 0;}
.show_slide-4 .show_slide-item:nth-child(4n){padding-right: 0;}

.photos-slide > .gallery-top { width: 100%; height: auto; margin-left: auto; margin-right: auto; }
.photos-slide > .gallery-top > .swiper-wrapper > .gallery-top-image{text-align: center;}
.photos-slide > .gallery-thumbs > .swiper-wrapper > .gallery-thumbs-image{text-align: center;}
.gallery-thumbs { display: block; height: 20%; box-sizing: border-box; padding: 10px 0; margin-bottom: 20px; }
.gallery-thumbs .swiper-slide { width: 25%; height: 80px; opacity: 0.4; }
.gallery-thumbs .swiper-slide-active { opacity: 1; }

/* end show slide */