:root{
    --color-bk-l: linear-gradient(to left, #070b10 40%, #070b1055 90%);
    --color-bk02: linear-gradient(to left, #070b10 20%, #070b1000 70%);
    --color-bk-d: linear-gradient(to top, #070b10 90%, #070b1055 100%);
    --main-shadow: #070b10;
    --base-color-l: #f7f2ed;
    --base-color-d: #080d12;
    --menu-color-l: #fff;
    --menu-color-active-l: #ebb;
    --dark-icon: url("../icon/dark.svg");
    --sea-icon-l: url("../icon/sea-light.svg");
    --logo-shadow: rgba(255,255,255,0.4);
    --color: #fff;
    --bor-color: #fff5;
    --titr-color: #dd0949;
    --icon-go: url("../icon/go-light.svg");
    --line: url("../img/line01.png");
    --text-color: #000;
    --ease-shadow: #0005;
    --ease-01: #e9e9e0;
    --ease-span-01: #dbdfd2;
    --ease-02: #f8e8dc;
    --ease-span-02: #f5ddca;
    --ease-03: #ede8e6;
    --ease-span-03: #e5dde0;
    --ease-04: #eaebe7;
    --ease-span-04: #dbe2e1;
    --ease-05: #f2eae1;
    --ease-span-05: #eadfd2;
    --ease-06: #e8e9df;
    --ease-span-06: #dbded2;
    --icon-ease-01: url("../icon/ease/light/01.svg");
    --icon-ease-02: url("../icon/ease/light/02.svg");
    --icon-ease-03: url("../icon/ease/light/03.svg");
    --icon-ease-04: url("../icon/ease/light/04.svg");
    --icon-ease-05: url("../icon/ease/light/05.svg");
    --icon-ease-06: url("../icon/ease/light/06.svg");
    --ease-color-01: #486d4b;
    --ease-color-02: #bb6a30;
    --ease-color-03: #6c679e;
    --ease-color-04: #448596;
    --ease-color-05: #976a3a;
    --ease-color-06: #416744;
    --ease-link-back: #fff7;
    --ease-link-back-nega: #0003;
    --bac-link: #4b6848;
    --more-color: #7b4e27;
    --more-color02: #d39e6b;
    --bk-join: #1c1c21;
    --footer-bk: #131921;
    --color01: #151515;
    --color02: #000c;
    --color03: linear-gradient(to left, #7775 10%, #fff5 50%, #7775 90%);
    --color06: linear-gradient(to left, #7775 10%, #8885 50%, #7775 90%);
    --color04: linear-gradient(to left, #ffff 0%, #ffffff05 50%, #ffff 100%);
    --color05: #d62137;
    --open: url("../menu/li/normal/open.svg");
    --opena: url("../menu/li/active/open.svg");
    --home: url("../menu/li/normal/home.svg");
    --archive: url("../menu/li/normal/archive.svg");
    --event: url("../menu/li/normal/event.svg");
    --live: url("../menu/li/normal/live.svg");
    --videos: url("../menu/li/normal/videos.svg");
    --join: url("../menu/li/normal/join.svg");
    --cal: url("../menu/li/normal/call.svg");
    --homeh: url("../menu/li/hover/home.svg");
    --archiveh: url("../menu/li/hover/archive.svg");
    --eventh: url("../menu/li/hover/event.svg");
    --liveh: url("../menu/li/hover/live.svg");
    --videosh: url("../menu/li/hover/videos.svg");
    --joinh: url("../menu/li/hover/join.svg");
    --calh: url("../menu/li/hover/call.svg");
    --homea: url("../menu/li/active/home.svg");
    --archivea: url("../menu/li/active/archive.svg");
    --eventa: url("../menu/li/active/event.svg");
    --livea: url("../menu/li/active/live.svg");
    --videosa: url("../menu/li/active/videos.svg");
    --joina: url("../menu/li/active/join.svg");
    --cala: url("../menu/li/active/call.svg");
    --ammc: #d62137;
    --ammb: linear-gradient(to left, rgb(243 109 123 / 0.33) 10%, rgb(214 103 103 / 0.33) 50%, rgb(243 109 123 / 0.33) 90%);
    --po: 0.2;
}

:root.dark {
    --color-bk-l: linear-gradient(to left, #b4b0ab 20%, #fff5 90%);
    --color-bk02: linear-gradient(to left, #b4b0ab 20%, #fff0 70%);
    --color-bk-d: linear-gradient(to top, #b4b0ab 90%, #fff1 100%);
    --main-shadow: #b4b0ab;
    --base-color-l: #080d12;
    --base-color-d: #f7f2ed;
    --menu-color-l: #000;
    --menu-color-active-l: #811;
    --dark-icon: url("../icon/light.svg");
    --sea-icon-l: url("../icon/sea-dark.svg");
    --logo-shadow: rgba(0,0,0,0.8);
    --color: #000;
    --bor-color: #fff;
    --titr-color: #5e2934;
    --icon-go: url("../icon/go-dark.svg");
    --line: url("../img/line02.png");
    --text-color: #fff;
    --ease-shadow: #fff2;
    --ease-01: #132b03;
    --ease-span-01: #2f4204;
    --ease-02: #3e2006;
    --ease-span-02: #492405;
    --ease-03: #150017;
    --ease-span-03: #2e0213;
    --ease-04: #121b00;
    --ease-span-04: #042c26;
    --ease-05: #2c1c04;
    --ease-span-05: #3a2502;
    --ease-06: #222703;
    --ease-span-06: #344201;
    --icon-ease-01: url("../icon/ease/dark/01.svg");
    --icon-ease-02: url("../icon/ease/dark/02.svg");
    --icon-ease-03: url("../icon/ease/dark/03.svg");
    --icon-ease-04: url("../icon/ease/dark/04.svg");
    --icon-ease-05: url("../icon/ease/dark/05.svg");
    --icon-ease-06: url("../icon/ease/dark/06.svg");
    --ease-color-01: #23a400;
    --ease-color-02: #dc5a00;
    --ease-color-03: #8d4cc3;
    --ease-color-04: #008dd5;
    --ease-color-05: #cb8c00;
    --ease-color-06: #53cd00;
    --ease-link-back: #0003;
    --ease-link-back-nega: #fff7;
    --bac-link: #3cca1b;
    --more-color: #d39e6b;
    --more-color02: #7b4e27;
    --bk-join: #c1c1c6;
    --footer-bk: #a1a9ac;
    --color01: #999;
    --color02: #fffa;
    --color03: linear-gradient(to left, #7775 10%, #1115 50%, #7775 90%);
    --color06: linear-gradient(to left, #7775 10%, #5555 50%, #7775 90%);
    --color04: linear-gradient(to left, #000f 0%, #00000005 50%, #000f 100%);
    --color05: #320e0e;
    --po: 0.5;
}

*
{
    transition: all 0.3s;
    font-family: cms, irsdn !important;
}

html
{
    background: var(--text-color);
}

.header .top .tecno .l-d span i {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--dark-icon) center/contain no-repeat;
    font-size: 25px !important;
}

.header .top .tecno .sea span i {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--sea-icon-l) center/contain no-repeat;
    font-size: 25px !important;
}

.header .top .tecno .fa span i
{
    font-size: 25px;
}

.mim
{
    display: none;
}

.main .ease .flex .link.num01 {
    background: var(--ease-01);
    color: var(--ease-color-01);
    border: 1px solid var(--ease-color-01);
}

.main .ease .flex .link.num01 span {
    background: var(--ease-span-01);
}

.main .ease .flex .link.num01 span i {
    background: var(--icon-ease-01) center/contain no-repeat;
}

.main .ease .flex .link.num02 {
    background: var(--ease-02);
    color: var(--ease-color-02);
    border: 1px solid var(--ease-color-02);
}

.main .ease .flex .link.num02 span {
    background: var(--ease-span-02);
}

.main .ease .flex .link.num02 span i {
    background: var(--icon-ease-03) center/contain no-repeat;
}

.main .ease .flex .link.num03 {
    background: var(--ease-03);
    color: var(--ease-color-03);
    border: 1px solid var(--ease-color-03);
}

.main .ease .flex .link.num03 span {
    background: var(--ease-span-03);
}

.main .ease .flex .link.num03 span i {
    background: var(--icon-ease-03) center/contain no-repeat;
}

.main .ease .flex .link.num04 {
    background: var(--ease-04);
    color: var(--ease-color-04);
    border: 1px solid var(--ease-color-04);
}

.main .ease .flex .link.num04 span {
    background: var(--ease-span-04);
}

.main .ease .flex .link.num04 span i {
    background: var(--icon-ease-04) center/contain no-repeat;
}

.main .ease .flex .link.num05 {
    background: var(--ease-05);
    color: var(--ease-color-05);
    border: 1px solid var(--ease-color-05);
}

.main .ease .flex .link.num05 span {
    background: var(--ease-span-05);
}

.main .ease .flex .link.num05 span i {
    background: var(--icon-ease-05) center/contain no-repeat;
}

.main .ease .flex .link.num06 {
    background: var(--ease-06);
    color: var(--ease-color-06);
    border: 1px solid var(--ease-color-06);
}

.main .ease .flex .link.num06 span {
    background: var(--ease-span-06);
}

.main .ease .flex .link.num06 span i {
    background: var(--icon-ease-06) center/contain no-repeat;
}

.main .ease .flex .link span {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.main .ease .flex .link span i {
    display: inline-block;
    position: absolute;
    width: 80%;
    height: 80%;
}

.nava-d #nava .leaflet-control-attribution {
    display: none;
}

.nava-d #nava * {
    transition: transform 0.1s;
}

/*=== Computer ===*/
@media (min-width: 950px) {
    html, body {
        background-color: var(--text-color);
        width: 100%;
        height: 100%;
    }

    body {
        margin: 0;
        direction: rtl;
        position: relative;
    }

    .body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .body .bk01 {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .color {
        background: var(--color-bk-l);
        width: 100%;
        height: 200%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .header {
        /*background: var(--color-bk-l);*/
        position: relative;
    }

    .header .top {
        display: flex;
        flex-direction: row;
        align-content: space-around;
        position: relative;
    }

    .header .top .logo {
        margin: 30px 100px;
        margin-left: 60px;
        display: inline-block;
        align-content: space-around;
        position: relative;
    }

    .header .top .logo .par {
        width: 100px;
        position: absolute;
        left: -21px;
        bottom: -26px;
        filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.5));
    }

    .header .top .logo .logo-i {
        width: 150px;
        filter: drop-shadow(0 4px 10px var(--logo-shadow));
    }

    .header .top .menu {
        display: inline-block;
        align-content: end;
        padding-bottom: 30px;
    }

    .header .top .menu li {
        font: 18px irs !important;
        margin-left: 0px;
        display: inline-block;
        text-align: center;
        position: relative;
        float: right;
        transition: all 0.3s;
    }

    .header .top .menu li a {
        color: var(--menu-color-l);
        display: block;
        text-decoration: none;
        transition: color 0.5s;
        margin-bottom: 5px;
    }

    .header .top .menu li img,
    .header .top .menu li .img01 {
        height: 10px;
        width: 0px;
        object-fit: cover;
        transition: width 0.5s;
    }

    .header .top .menu li .img01,
    .header .top .menu li[active] img,
    .header .top .menu li:hover img {
        width: 130px;
    }

    .header .top .menu li[active] a,
    .header .top .menu li:hover a {
        /*color: var(--menu-color-active-l);*/
    }

    .header .top .menu li:hover {
        translate: 0 -5px;
    }

    .header .top .tecno {
        position: absolute;
        left: 100px;
        bottom: 50px;
        display: flex;
        flex-direction: row;
    }

    .header .top .tecno span {
        cursor: pointer;
        width: 50px;
        height: 50px;
        margin-left: 20px;
    }

    .header .top .tecno span i {
        transition: all 0.3s;
    }

    .header .top .tecno span:hover i {
        scale: 1.02;
        translate: 0 -5px;
    }

    .header .top .tecno .l-d span i {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: var(--dark-icon) center/contain no-repeat;
    }

    .header .top .tecno .sea span i {
        display: inline-block;
        width: 40px;
        height: 40px;
        background: var(--sea-icon-l) center/contain no-repeat;
    }

    .info {
        width: 100%;
        height: 50vh;
    }

    .info .element {
        width: 50%;
        margin: 180px 0;
        padding: 0 150px 0 0;
        text-align: center;
        color: var(--color);
        align-content: space-around;
    }

    .info .element h1 {
        margin: 0;
        color: var(--titr-color);
        font-size: 70px;
    }

    .info .element p {
        margin: 10px 0;
        opacity: 0.6;
        font-size: 18px;
    }

    .info .element a {
        display: inline-block;
        color: var(--color);
        text-decoration: none;
        font-size: 19px;
        margin-top: 20px;
        border: 1px solid var(--bor-color);
        padding: 15px 20px;
        align-content: space-around;
        position: relative;
        border-radius: 10px;
    }

    .info .element .gap {
        width: 5px;
        display: inline-block;
    }

    .info .element a .icon {
        display: inline-block;
        width: 30px;
        height: 20px;
        rotate: 180deg;
        position: relative;
        top: 4px;
        right: 1px;
        background: var(--icon-go) center/contain no-repeat;
    }

    .info .element a:hover {
        border-color: var(--color);
        translate: 0 -3px;
    }

    .info .element a:active {
        border-color: var(--color);
    }

    .info .element a:hover .icon,
    .info .element a:active .icon {
        scale: 1.3;
        translate: -5px 0;
    }

    .header .line {
        height: 50px;
        width: 100%;
        background-image: var(--line);
        background-size: 20%;
        background-repeat: repeat;
        background-position-inline: start;
        background-position: right;
        opacity: 0.3;
        -webkit-mask-image: linear-gradient(to left, transparent 5%, #000 25%, #000 75%, transparent 95%);
        mask-image: linear-gradient(to left, transparent 5%, #000 25%, #000 75%, transparent 95%);
    }

    [btn]:hover {
        translate: 0 -5px !important;
    }

    [btn]:active {
        translate: 0 5px !important;
        opacity: 0.5;
    }

    .header .top .flex02 {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

    .header .top .flex02 .menu {
        float: right;
    }

    .header .top .flex02 .tecno {
        float: left;
    }

    .clear {
        clear: both;
    }

    .main {
        margin-top: 30px;
        box-shadow: 0 -30px 60px 35px var(--main-shadow);
        width: calc(100% - 160px);
        background: var(--base-color-l);
        border-radius: 50px 50px 0 0;
        text-align: center;
        padding: 50px 80px 20px;
    }

    .main .ease {

    }

    .main .ease p.titr {
        font-size: 40px;
        margin: 0 0 8px;
        color: var(--text-color);
    }

    .main .ease .gol[num01] {
        width: 200px;
        rotate: 180deg;
    }

    .main .ease .flex {
        justify-content: center;
        text-align: center;
    }

    .main .ease .flex .gap {
        width: 50px;
        display: inline-block;
        float: right;
    }

    .main .ease .flex .link {
        display: inline-flex;
        margin: 20px 20px;
        flex-direction: column;
        text-align: center;
        align-items: center;
        width: 190px;
        height: 380px;
        padding: 30px 20px;
        border-radius: 20px;
        box-shadow: 0 3px 10px 0 var(--ease-shadow);
        position: relative;
    }

    .main .ease .flex .link:hover {
        translate: 0 -15px;
        box-shadow: 0 18px 10px 0 var(--ease-shadow);
    }

    .main .ease .flex .link h1 {
        font-size: 30px;
    }

    .main .ease .flex .link p {
        font-size: 20px;
        color: var(--text-color);
        opacity: 0.5;
    }

    .main .ease .flex .link a {
        position: absolute;
        bottom: 30px;
        padding: 10px 40px;
        background: var(--ease-link-back);
        color: var(--text-color);
        text-decoration: none;
        border: 1px solid var(--ease-link-back-nega);
        border-radius: 10px;
        box-shadow: 0 0 0 var(--ease-link-back-nega);
    }

    .main .ease .flex .link a:hover,
    .main .ease .flex .link a:active {
        box-shadow: 0 0 0 var(--ease-link-back-nega) !important;
        scale: 1 !important;
    }

    .main .last-blog {
        width: calc(100% - 50px);
        min-height: 200px;
        border-radius: 30px;
        margin-top: 50px;
        border: 1px solid var(--ease-link-back-nega);
        padding: 0 25px 50px;
        position: relative;
        text-align: center;
    }

    .main .last-blog p.titr {
        font-size: 30px;
        margin: 8px 0 -5px;
        color: var(--text-color);
    }

    .main .last-blog .gol[num01] {
        width: 150px;
        rotate: 180deg;
    }

    .main .list {
        width: 100%;
        justify-content: center;
        align-content: space-around;
    }

    .main .list .last {
        width: calc(100% / 3 - 66.666px);
        height: 500px;
        border-radius: 30px;
        border: 1px solid var(--ease-link-back-nega);
        display: inline-block;
        margin: 50px 25px;
        color: var(--text-color);
        background: var(--color);
        position: relative;
        text-align: right;
        box-shadow: 0 5px 10px var(--ease-link-back-nega);
    }

    .main .last-blog a.link {
        padding: 15px 30px;
        border-radius: 10px;
        bottom: 50px;
        display: inline-block;
        width: 150px;
        border: 1px solid var(--color);
        outline: 1px solid var(--text-color);
        color: var(--color);
        text-decoration: none !important;
        background: var(--bac-link);
    }

    .main .last-blog a.link:active {
        scale: 0.9;
        border: 1px solid var(--text-color);
        outline: 1px solid var(--color);
    }

    .main .list .last img {
        width: 100%;
        height: 55%;
        object-fit: cover;
        border-top-right-radius: 29px;
        border-top-left-radius: 29px;
    }

    .main .list .last h1 {
        font-size: 25px;
        margin: 15px 35px 0;
        color: var(--text-color);
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .main .list .last p {
        font-size: 18px;
        margin: 15px 35px 0;
        opacity: 0.4;
        color: var(--text-color);
        text-decoration: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .main .list .last a {
        text-decoration: none;
    }

    .main .list .last a.link02 {
        position: absolute;
        color: var(--more-color);
        text-decoration: none;
        bottom: 20px;
        left: 30px;
    }

    .header .top .tecno .fa span i {
        display: inline-block;
        width: 40px;
        height: 40px;
        font-style: normal;
        align-content: space-around;
        text-align: center;
        margin-left: 10px;
        color: var(--color);
    }

    .main .list .last .date {
        width: 60px;
        height: 80px;
        position: absolute;
        top: 20px;
        right: 25px;
        display: block;
        padding: 5px;
        background: var(--base-color-l);
        box-shadow: 0 2px 10px 0px var(--text-color);
        border-radius: 15px;
        text-align: center;
    }

    .main .list .last .date h1 {
        margin: 0;
        font-size: 20px;
    }

    .main .list .last .date h1.day {
        color: var(--text-color);
    }

    .main .list .last .date h1.mounth {
        color: var(--more-color);
    }

    .main .list .last .date hr.line {
        -webkit-mask-image: linear-gradient(to left, transparent 5%, #000 45%, #000 55%, transparent 95%);
        mask-image: linear-gradient(to left, transparent 5%, #000 45%, #000 55%, transparent 95%);
        opacity: 0.4;
    }

    .main .join {
        border: 1px solid var(--ease-link-back-nega);
        width: 100%;
        height: 200px;
        margin: 30px 0 0;
        border-radius: 30px;
        background: var(--bk-join);
        position: relative;
    }

    .main .join .part {
        width: calc(49.757154464% - 60px);
        display: inline-block;
        height: calc(100% - 60px);
        position: absolute;
        text-align: center;
        color: var(--color);
        align-content: space-around;
        padding: 30px;
    }

    .main .join .part.n1 {
        right: 0;
        font-size: 15px;
    }

    .main .join .part.n1 p {
        margin-top: 10px;
        opacity: 0.5;
    }

    .main .join .part.n1 h1 {
        margin: 0;
    }

    .main .join .part.n2 {
        left: 0;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .main .join .part.n2 form {
        width: 100%;
        max-width: 475px;
        height: 50px;
        background: var(--color);
        border-radius: 10px;
        border: 1px solid var(--color);
        position: relative;
    }

    .main .join .part.n2 form input {
        display: inline;
        padding-right: 15px;
        width: calc(100% - 19px);
        height: 48px;
        border: none;
        background: transparent;
        border-radius: 10px;
        color: var(--text-color);
    }

    .main .join .part.n2 form input:focus {
        border: none;
    }

    .main .join .part.n2 form button {
        position: absolute;
        left: 0;
        border: none;
        color: var(--color);
        width: 100px;
        height: 100%;
        border-radius: 9px;
        background: var(--bac-link);
    }

    .main .join .part.n2 form button:hover {
        font-size: 18px;
        opacity: 0.8;
    }

    .main .join .part.n2 form button:active {
        opacity: 1;
        font-size: 16px;
        scale: 0.8;
        translate: -6px 0px;
    }

    .main .join .part.n2 p {
        opacity: 0.5;
    }

    .footer {
        justify-content: center;
        background: var(--footer-bk);
        min-height: 200px;
        width: 100%;
        padding: 50px 0;
        display: flex;
        flex-direction: row;
        position: relative;
    }

    .footer div[pad-r] {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 50px;
        border-left: 1px solid var(--bor-color);
        color: var(--color);
        text-align: right;
    }

    .footer div[left] {
        border-left: none;
        padding-left: 10px;
    }

    .footer div[right] {
        padding-right: 10px;
    }

    .footer .name {
        text-align: center;
        align-items: center;
    }

    .footer .name img {
        width: 120px;
        margin-bottom: 8px;
    }

    .footer .useful .titr,
    .footer .ease .titr,
    .footer .we .titr {
        color: var(--titr-color);
    }

    .footer .useful {
        color: var(--color);
    }

    .footer .useful ul {
        list-style-type: none;
        padding: 0;
        margin-bottom: 0;
    }

    .footer .useful ul li {
        margin-bottom: 5px;
    }

    .footer .useful ul li a {
        color: var(--color);
        text-decoration: none;
    }

    .footer .we {
        width: 300px;
    }

    .footer .we p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
    }

    .footer .we p:hover {
        display: -webkit-box;
        -webkit-line-clamp: 1000000000;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 0;
    }

    .footer .ease {
        color: var(--color);
    }

    .footer .ease ul {
        list-style-type: none;
        padding: 0;
        margin-bottom: 0;
    }

    .footer .ease ul li {
        margin-bottom: 5px;
    }

    .footer .ease ul li a {
        color: var(--color);
        text-decoration: none;
    }
    
    @media (max-width: 1590px)
    {
        .header .top
        {
            flex-direction: column;
        }

        .header .logo
        {
            display: inline-flex !important;
            margin-left: 0!important;
            margin-right: 0!important;
            flex-direction: column;
            align-items: center;
        }

        .header .logo .par
        {
            right: 50%;
            top: 40px;
        }

        .info .element
        {
            margin: 130px 0 !important;
        }

        .main
        {
            margin-top: -10px;
        }
    }

    @media (max-width: 1270px)
    {
        .header .top .flex02 .tecno
        {
            position: relative !important;
            left: 0 !important;
            bottom: 0 !important;
        }

        .header .top .flex02
        {
            flex-direction: column-reverse;
            align-items: center;
        }

        .header .top .flex02 .menu
        {
            padding-right: 0;
        }

        .header .top .flex02 .tecno div
        {
            width: 45px;
            font-size: 10px;
        }

        .info .element
        {
            margin: 120px 0 !important;
            width: 100%;
            padding: 0;
        }

        .main
        {
            margin-top: -20px;
        }

        .main .list .last
        {
            width: calc(100% - 50px);
            margin-bottom: 0;
        }

        .main .last-blog a.link
        {
            margin-top: 30px;
        }

        .footer .name
        {
            display: none !important;
        }
    }
    .nava-d
    {
        width: 100%;
        height: 250px;
        margin-top: 25px;
        background: var(--base-color-l);
        border: 1px solid var(--text-color);
        border-radius: 15px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .nava-d #nava
    {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: var(--color);
        top: 0;
    }
    .nava-d h1.nava-tit
    {
        position: absolute;
        top: 20px;
        right: 20%;
        display: inline;
        left: 20%;
        /*width: 100%;*/
        text-align: center;
        z-index: 3;
        color: var(--text-color);;
        font-size: 20px;
        margin: 0;
    }
}

/*=== Opacity ===*/
[opa-01] {
    opacity: 0.1;
}
[opa-02] {
    opacity: 0.2;
}
[opa-03] {
    opacity: 0.3;
}
[opa-04] {
    opacity: 0.4;
}
[opa-05] {
    opacity: 0.5;
}
[opa-06] {
    opacity: 0.6;
}
[opa-07] {
    opacity: 0.7;
}
[opa-08] {
    opacity: 0.8;
}
[opa-09] {
    opacity: 0.9;
}
[opa--1] {
    opacity: 1;
}

/*=== Mobile ===*/
@media (max-width: 950px)
{
    body, html
    {
        direction: rtl;
        margin: 0;
        background: var(--color);
        color: var(--color);
    }
    html
    {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    body
    {
        width: 90%;
        margin: 5% 0 0;
        position: relative;
        /*display: flex;*/
        align-items: center;
        justify-content: center;
    }
    img[background]
    {
        width: 100%;
        height: 200vh;
        object-fit: cover;
    }
    .body
    {
        border-radius: 50px;
        overflow: hidden;

    }
    .color
    {
        z-index: 1;
        position: absolute;
        background: var(--color-bk-d);
        border-radius: 50px 50px 0 0;
        border: 10px solid var(--color01);
        outline: 5px solid var(--color);
        box-shadow: 0 0 10px 10px var(--color02);
        margin-bottom: 5%;
    }
    img.par
    {
        display: none;
    }
    ul.menu
    {
        display: none;
    }
    .header
    {
        position: relative;
    }
    .header .space
    {
        width: calc(100% - 50px);
        height: 70.5px;
        margin: 15px 10px;
        padding: 0 15px;
    }
    .header .toper
    {
        position: absolute;
        z-index: 20;
        width: 100%;
        top: 0;
        transition: width 0s !important;
    }
    .header .toper.scrolled
    {
        position: fixed !important;
        width: calc(90% - 20px) !important;
        top: 0 !important;
        right: calc(5Vw + 10px);
    }
    .header .top
    {
        align-content: space-around;
        display: flex;
        width: calc(100% - 50px);
        height: 70.5px;
        border-radius: 19px;
        margin: 15px 10px;
        padding: 0 15px;
        background: var(--color03);
        backdrop-filter: blur(5px) saturate(1.7);
        position: relative;
        justify-content: space-between;
        color: #fff !important;
    }
    .header .top .border
    {
        position: absolute;
        width: 100%;
        height: calc(100% - 0.5px);
        border: 1px solid #fff;
        border-radius: 20px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        mask-image: linear-gradient(to left, #000 0%, transparent 50%, #000 100%);
        z-index: -1;
    }
    .header .top .logo
    {
        align-content: space-around;
        display: flex;
    }
    .header .top img
    {
        width: 80px;
    }
    img
    {
        max-width: 100%;
    }
    .tecno,
    .tecno div span,
    .tecno div span i,
    .flex02
    {
        display: inline-flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
    }
    .tecno div span i,
    .tecno div span,
    .tecno div
    {
        width: 50px;
        height: 50px;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-size: 25px;
        font-style: normal;
        color: var(--color);
    }
    .tecno div span i
    {
        cursor: pointer;
    }
    [btn]:active
    {
        translate: 0 5px;
        scale: 0.98;
        opacity: 0.5;
    }
    [btn02]:active
    {
        scale: 0.8;
        opacity: 0.6!important;
    }
    .header .info .element
    {
        margin-top: 70px;
        text-align: center;
    }
    .header .info .element h1
    {
        text-align: center;
        color: var(--color05);
        font-size: 40px;
        margin-bottom: 0;
    }
    .header .info .element p
    {
        text-align: center;
        font-size: 15px;
        opacity: var(--po);
        margin: 10px 0 0;
    }
    .header .info .element a
    {
        display: inline-block;
        margin: 25px 10px 0;
        width: 170px;
        padding: 20px 0;
        text-align: center;
        border: 1px solid var(--color);
        color: var(--color);
        text-decoration: none;
        border-radius: 10px;

    }
    .header .info .element .gap
    {
        display: none;
    }
    .mim
    {
        display: flex;
        position: fixed;
        flex-direction: row;
        width: 90%;
        height: 100px;
        bottom: 5px;
        right: 0;
        left: 0;
        z-index: 10;
        align-content: center;
        justify-content: center;
        align-items: center;
        border-radius: 19px;
        padding: 0 5%;
        /*background: var(--color06);*/
        /*backdrop-filter: blur(5px) saturate(1.9);*/
        color: #fff !important;
        /*gap: 15px;*/
    }
    .mim .border
    {
    /*    position: absolute;*/
    /*    width: 100%;*/
    /*    height: calc(100% - 0.5px);*/
    /*    border: 1px solid #fff;*/
    /*    border-radius: 20px;*/
    /*    top: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    bottom: 0;*/
    /*    mask-image: linear-gradient(to left, #000 0%, transparent 50%, #000 100%);*/
    /*    z-index: -1;*/
    }
    .mim div.m
    {
        border-radius: 0;
        border: 2px solid var(--bor-color);
        background: var(--color06);
        width: 65px;
        height: 65px;
        border-left: none;
        border-right: none;
        backdrop-filter: blur(5px) saturate(1.9);
        padding: 5px;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        position: relative;
    }
    @media (max-width: 655px)
    {
        .mim div.m
        {
            width: 60px;
            height: 60px;
        }
    }
    @media (max-width: 620px)
    {
        .mim div.m
        {
            width: 55px;
            height: 55px;
        }
    }
    @media (max-width: 570px)
    {
        .mim div.m
        {
            width: 50px;
            height: 50px;
        }
    }
    @media (max-width: 540px)
    {
        .mim div.m
        {
            width: 45px;
            height: 45px;
        }
    }
    @media (max-width: 510px)
    {
        .mim
        {
            flex-direction: column-reverse;
            bottom: 250px;
            right: 0;
            height: 0;
            padding-right: 10%;
            align-items: flex-start;
            transition: bottom 0.3s;
        }
        .mim div.m
        {
            width: 45px;
            height: 45px;
        }
        .shadow
        {
            background: linear-gradient(to top, #000 0%, #0000 100%);
            width: 90%;
            height: 100px;
            position: fixed;
            z-index: -1;
            bottom: 0;
            right: 5%;
            left: 5%;
        }
        .mim div.m
        {
            border: 2px solid var(--bor-color);
            border-top: none;
            border-bottom: none;
            translate: 0 480px;
            opacity: 0;
        }
        .mim div.m[active]
        {
            border: 2px solid var(--bor-color);
            border-top: none;
            /*border-bottom: none;*/
            border-radius: 0 0 100% 100%;
        }
        .mim div.m[last]
        {
            border: 2px solid var(--bor-color);
            /*border-top: none;*/
            border-bottom: none;
            border-radius: 100% 100% 0 0;
        }
        .mim div.m[o-menu]
        {
            margin-top: 15px;
            border: 2px solid var(--bor-color);
            /*border-top: none;*/
            /*border-bottom: none;*/
            border-radius: 100%;
            background: var(--color03);
            translate: 0;
            z-index: 1;
            opacity: 1;
        }
        .mim.opened div.m
        {
            translate: 0;
            opacity: 1;
        }
    }
    @media (min-width: 510px)
    {
        .mim
        {
            transition: bottom 0s;
        }
        .mim div.m[o-menu]
        {
            display: none;
        }
        .mim div.m[active]
        {
            border: 2px solid var(--ammc);
            background: var(--ammb);
            border-radius: 100%;
            margin-left: 20px;
        }
        .mim div.m[first]
        {
            border: 2px solid var(--bor-color);
            border-left: none;
            border-radius: 0 100% 100% 0;
        }
        .mim div.m[last]
        {
            border: 2px solid var(--bor-color);
            border-right: none;
            border-radius: 100% 0 0 100%;
        }
        .shadow
        {
            background: linear-gradient(to top, #000 0%, #0000 100%);
            width: 90%;
            height: 100px;
            position: fixed;
            z-index: 5;
            bottom: 0;
            right: 5%;
            left: 5%;
        }
    }
    .mim div.m i
    {
        display: inline-block;
        width: 70%;
        height: 70%;
        opacity: 0.8;
    }
    .mim div.m:active i
    {
        opacity: 1;
    }
    .mim div.m i.ico01
    {
        background: var(--homeh) center/contain no-repeat;
    }
    .mim div.m i.ico02
    {
        background: var(--archive) center/contain no-repeat;
    }
    .mim div.m i.ico03
    {
        background: var(--videos) center/contain no-repeat;
    }
    .mim div.m i.ico04
    {
        background: var(--live) center/contain no-repeat;
    }
    .mim div.m i.ico05
    {
        background: var(--event) center/contain no-repeat;
    }
    .mim div.m i.ico06
    {
        background: var(--join) center/contain no-repeat;
    }
    .mim div.m i.ico07
    {
        background: var(--cal) center/contain no-repeat;
    }
    .mim .m:hover .ico01
    {
        background: var(--homeh) center/contain no-repeat !important;
    }
    .mim .m:hover .ico02
    {
        background: var(--archiveh) center/contain no-repeat !important;
    }
    .mim .m:hover .ico03
    {
        background: var(--videosh) center/contain no-repeat !important;
    }
    .mim .m:hover .ico04
    {
        background: var(--liveh) center/contain no-repeat !important;
    }
    .mim .m:hover .ico05
    {
        background: var(--eventh) center/contain no-repeat !important;
    }
    .mim .m:hover .ico06
    {
        background: var(--joinh) center/contain no-repeat !important;
    }
    .mim .m:hover .ico07
    {
        background: var(--calh) center/contain no-repeat !important;
    }
    .mim .m:active .ico01
    {
        background: var(--homea) center/contain no-repeat !important;
    }
    .mim .m:active .ico02
    {
        background: var(--archivea) center/contain no-repeat !important;
    }
    .mim .m:active .ico03
    {
        background: var(--videosa) center/contain no-repeat !important;
    }
    .mim .m:active .ico04
    {
        background: var(--livea) center/contain no-repeat !important;
    }
    .mim .m:active .ico05
    {
        background: var(--eventa) center/contain no-repeat !important;
    }
    .mim .m:active .ico06
    {
        background: var(--joina) center/contain no-repeat !important;
    }
    .mim .m:active .ico07
    {
        background: var(--cala) center/contain no-repeat !important;
    }
    .mim .m.opener .ico01
    {
        background: var(--open) center/contain no-repeat !important;
    }
    .mim.opened .m.opener .ico01
    {
        background: var(--opena) center/contain no-repeat !important;
    }
    .main .ease
    {
        background: var(--color);
        color: var(--text-color);
        margin: 50px 5px 5px;
        padding: 15px 20px;
        text-align: center;
        border-radius: 15px;
    }
    .main p.titr
    {
        margin: 0 0 5px;
        font-size: 22px;
    }
    .main .ease .link
    {
        display: inline-flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 140px;
        height: 140px;
        border-radius: 10px;
        background: var(--ease-01);
        margin: 10px;
        padding: 10px;
        cursor: pointer;
    }
    .main .ease .link a[data-lang="show"]
    {
        display: none;
    }
    .main .ease .link h1
    {
        font-size: 25px;
        margin: 0;
    }
    .main .ease .link p
    {
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 12px;
    }
    .main .ease .flex .link span
    {
        width: 50px;
        height: 50px;
    }
    img[num01]
    {
        transition: rotate 0s;
        width: 250px;
    }
    .main .last-blog
    {
        background: var(--color);
        color: var(--text-color);
        margin: 10px 5px 5px;
        padding: 15px 20px;
        text-align: center;
        border-radius: 15px;
    }
    .main .last-blog .last a
    {
        color: var(--color);
        text-decoration: none;
    }
    .main .last-blog .last
    {
        width: 100%;
        height: 200px;
        margin: 20px 0;
        overflow: hidden;
        border-radius: 25px;
        position: relative;
    }
    .main .last-blog .last img
    {
        width: 100%;
        height: 200%;
        object-fit: cover;
    }
    .main .last-blog .last .ab
    {
        position: absolute;
        width: calc(100% - 150px);
        top: 0;
        right: 0;
        z-index: 4;
        background: var(--color-bk02);
        height: calc(100% - 70px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 50px 30px 20px 120px;
        text-align: right;
    }
    .main .last-blog .last .ab h1
    {
        margin: 0;
        font-size: 18px;
        width: 80%;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .main .last-blog .last .ab p
    {
        font-size: 12px;
        width: 80%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .main .last-blog .last .date
    {
        width: 50px;
        rotate: 90deg;
        height: 80px;
        position: absolute;
        top: 0;
        right: 50px;
        z-index: 4;
        padding: 5px;
        background: var(--color);
        color: var(--text-color);
        border-radius: 10px;
    }
    .main .last-blog .last .date h1
    {
        margin: 0;
        font-size: 18px;
        rotate: -90deg;
    }
    .main .last-blog .last .date h1.mounth
    {
        color: var(--more-color);
    }
    .main .last-blog .last a.link02
    {
        position: absolute;
        z-index: 4;
        bottom: 10px;
        color: var(--more-color02);
        left: 30px;
        font-size: 12px;
    }
    .main .last-blog a.link
    {
        color: var(--text-color);
        text-decoration: none;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--more-color);
    }
    .nava-d
    {
        width: 99%;
        height: 250px;
        margin-top: 10px;
        background: var(--base-color-l);
        border: 1px solid var(--text-color);
        border-radius: 15px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .nava-d #nava
    {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: var(--color);
        top: 0;
    }
    .nava-d h1.nava-tit
    {
        position: absolute;
        top: 20px;
        right: 20%;
        left: 20%;
        display: inline;
        /*width: 100%;*/
        text-align: center;
        z-index: 3;
        color: var(--text-color);;
        font-size: 20px;
        margin: 0;
        /*display: none;*/
    }
    @media (max-width: 600px)
    {
        .nava-d h1.nava-tit
        {
            font-size: 15px;
        }
    }
    @media (max-width: 460px)
    {
        .nava-d h1.nava-tit
        {
            font-size: 12px;
        }
    }
    .join
    {
        background: #141111;
        border: 1px solid var(--bor-color);
        color: #fff;
        width: calc(99% - 60px);
        margin-top: 10px;
        border-radius: 15px;
        overflow: hidden;
        padding: 30px;
    }
    .join .part
    {
        display: inline-block;
        width: 80%;
        text-align: center;
    }
    .join .part.n2
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .join .part p
    {
        opacity: 0.5;
    }
    .join .part form
    {
        width: 80%;
        border: 1px solid var(--bor-color);
        height: 60px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
    .join .part form input
    {
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border: none;
        padding: 20px;
        background: none;
        color: var(--color);
    }
    .join .part form button
    {
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        border: none;
        width: 100px;
        border-radius: 8px;
        background: var(--bac-link);
        font-size: 18px;
        color: var(--color);
    }
    .we
    {
        display: none;
    }
    .footer
    {
        padding: 60px 0 100px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        background: linear-gradient(to top, #151122 90%, #15112200 100%);
        color: #fff;
    }
    .footer .iol
    {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 50px;
    }
    .footer .iol .useful,
    .footer .iol .ease
    {
        /*width: 35%;*/
    }
    .footer .iol ul
    {
        padding: 0;
        text-align: right;
        list-style-type: none;
    }
    .footer .iol ul li a
    {
        color: #fff;
        text-decoration: none;
    }
    .footer .name
    {
        width: 100%;
        margin-top: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex-direction: column;
    }
    .footer .name img
    {
        width: 150px;
        float: right !important;
    }
    .hr-footer
    {
        display: block !important;
    }
}

.nava-d h1.nava-tit
{
    /*display: none;*/
    text-shadow: 0 5px 10px var(--ease-shadow);
}