* {font-family: "Pretendard Variable", Pretendard, sans-serif !important;}

:root {
    --color-v: #330F51;
    --color-lv: #9139DA;
    --color-y: #FABF14;
    --color-k900: #111;
    --color-k300: #f0f0f0;
    --color-k200: #f5f5f5;
    --color-k100: #fafafa;
    --color-gra : linear-gradient(90deg, var(--color-v) 0%, var(--color-lv) 100%);
    --p320 : clamp(80px, 50vw - 640px, 320px);
}

body.scroll-lock {overflow: hidden !important; height: 100vh; touch-action: none;}
.wrap {width: 100%; cursor: default;}
.container {width: 100%; padding-top: 80px;}
header,
footer,
section {width: 100%; margin: 0 auto; display: flex; justify-content: center;}
header > div,
footer > div,
section > div {max-width: 1920px; width: 100%; padding: 0 var(--p320);}

h2 {font-size: 72px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.2;}
h2 > b {font-weight: 700;}

button.go {background-image: linear-gradient(90deg, var(--color-v) 0%, var(--color-lv) 50%, var(--color-v) 100%); background-size: 200% 100%; background-position: 0% center; width: max-content; height: 56px; padding: 0 64px; border-radius: 50px; display: flex; justify-content: center; align-items: center;  cursor: pointer; color: #fff; transition: 0.5s ease;}
button.go span {font-size: 18px; color: #fff; font-weight: 700; z-index: 1;}
button.go:hover {background-position: 100% center; translate: 0 -2px; box-shadow: 0 30px 20px -20px #00000055; transition: 0.5s ease;}

.none {display: none;}



i[class^="ico_"] {display: inline-block; background-position: center; background-repeat: no-repeat; background-size: contain;}

header {background-color: #fff; border-bottom: 1px solid #00000011; height: 80px; position: fixed; top: 0; left: 0; transition: transform 0.3s ease-in-out; z-index: 1000;}
header > div {height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 40px;}
header.hide {transform: translateY(-100%);}
header .lang-ru {display: none;}
header h1 {width: max-content; height: 100%; display: flex; justify-content: center; align-items: center;}
header h1 a {width: 320px; height: 100%; display: flex; justify-content: center; align-items: center; background-image: url(../img/logo.svg); background-size: contain; background-repeat: no-repeat; background-position: center left;}
header ul {display: flex; align-items: center;}
header ul li {display: flex; justify-content: center; align-items: center; cursor: pointer;}
header ul.menu {flex: 1; justify-content: end; gap: 24px;}
header ul.menu li {width: 80px; height: 40px; font-size: 18px; font-weight: 500; color: #555;}
header ul.menu li.on {font-weight: 700; color: #000;}
header ul.setLang {font-size: 14px; color: #aaa;}
header ul.setLang li {width: 64px; height: 16px; }
header ul.setLang li:first-child {border-right: 1px solid #00000033;}
header ul.setLang li.on {font-weight: 900; color: #000;}
header .menu_ham {cursor: pointer; display: none; z-index: 1000;}
header .menu_ham a {display: block; width: 32px; height: 32px; position: relative;}
header .menu_ham a div {width: 24px; height: 1px; position: absolute; left: 4px; background-color: #000; transition: 0.2s;}
header .menu_ham a div:first-child {top: 12px;}
header .menu_ham a div:last-child {bottom: 12px;}

header .menu_ham.active a div:first-child {
    top: 15px;
    transform: rotate(45deg);
}

header .menu_ham.active a div:last-child {
    bottom: 16px;
    transform: rotate(-45deg);
}
header .sitemap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: #000000aa; visibility: hidden; }
header .sitemap ul {position: fixed; top: 0; right: -20vw; width: 50vw; height: 100vh; background-color: #fff; opacity: 0; display: flex; flex-direction: column; gap: 8px; padding: 64px 8px; transition: 0.5s ease; }
header .sitemap ul li {width: 100%; height: 48px; font-size: 22px; font-weight: 700;}
header .sitemap.on {visibility: inherit; }
header .sitemap.on ul {right: 0; opacity: 1; }


.ru header ul.menu li {width: max-content;}


footer {background-color: var(--color-k200); border-top: 1px solid #00000011; padding: 40px 0 80px;}
footer button.top {width: 56px; height: 56px; background-color: var(--color-v); border-radius: 50px; position: fixed; bottom: 40px; right:clamp(40px, 50vw - 960px + 40px, 1000px); transition: 0.5s ease; opacity: 0; visibility: hidden; z-index: 1000;}
footer button.top i {display: block; width: 100%; height: 100%; background-image: url(../img/ico_top.svg); background-position: center; background-repeat: no-repeat; background-size: 50%; opacity: 0.5; transition: 0.5s ease;}
footer button.top.on {opacity: 1; visibility: visible;}
footer button.top:hover {translate: 0 -4px; box-shadow: 0 20px 20px -8px #00000055;}
footer button.top:hover i {opacity: 1; translate: 0 -4px;}
footer ul {display: flex; justify-content: center; align-items: center; gap: 40px;}
footer ul li.line {width: 1px; height: 40px; background-color: #00000033;}
footer ul li.logo_gv > object,
footer ul li.logo_em > object {height: 40px;}
footer ul li.logo_at > img {height: 32px;}
footer span {text-align: center; font-size: 14px; }

section:has(.top) {background-color: var(--color-v);}
.top {background-repeat: no-repeat; background-size: cover;  background-position: right bottom;}
.comment {font-size: 14px !important; color: #555;}

.main .top {display: flex; flex-direction: column; position: relative; padding: 0; padding-top: 360px; padding-bottom: 8px;}
.main .top .bg {width: 100%; height: 800px; object-fit: contain;}
.main .top .tit {position: absolute; top: 160px; left: calc(50% - 190px); width: 360px;}
.main .top .info {display: flex; gap: 40px; justify-content: center; height: 80px;}
.main .top .info li {font-size: 26px; color: #fff; display: flex;  gap: 16px; align-items: center;}
.main .top .info li span {display: flex; padding: 4px 16px; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; color: var(--color-v); background-color: #fff; border-radius: 100px; } 

.main .intro {padding-top: 160px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 56px;}
.main .intro h2 {color: var(--color-v);}
.main .intro p { font-size: 32px;}
.main .intro ul {width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 80px;}
.main .intro ul li {width: 100%;}
.main .intro ul li div {width: 100%; height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; background-position: center; background-repeat: no-repeat; background-size: cover;}
.main .intro ul li div span {display: inline-block; filter: drop-shadow(0 0 8px #000); font-size: 32px; font-weight: 700; letter-spacing: 0.02em;}
.main .intro ul li:nth-child(1) div {background-image: url(../img/top_intro_01.jpg);}
.main .intro ul li:nth-child(2) div {background-image: url(../img/top_intro_02.jpg);}
.main .intro ul li:nth-child(3) div {background-image: url(../img/top_intro_03.jpg);}
.main .intro ul li p {font-size: 22px; margin-top: 40px;}

.main .fair {padding: 240px 0 0 var(--p320); position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; row-gap: 80px;}
.main .fair h2 {font-weight: 500; font-size: 64px; line-height: 1.2;}
.main .fair h2 b {color: var(--color-lv);}
.main .fair ul {display: flex; flex-direction: column; gap: 64px; padding-right: 120px;}
.main .fair ul li {font-size: 22px; display: flex; position: relative;}
.main .fair ul li::after {position: absolute; content: ""; left: 0; bottom: -32px; width: 100%; height: 1px; background-image: var(--color-gra);}
.main .fair ul li:last-child::after {display: none;}
.main .fair ul li span {display: inline-block; min-width: 144px; font-weight: 700; color: var(--color-v);}
.main .fair ul li small {display: inline-block; padding-top: 12px;}
.main .fair button.go {margin-bottom: 120px;}
.main .fair .bg {grid-row: span 3; grid-column: 2; height: 100%; background: url(../img/fair_bg.jpg) no-repeat top center; background-size: cover; border-top-left-radius: 240px;}

.main .brands {padding: 160px var(--p320); display: flex; flex-direction: column; gap: 80px;}
.main .brands h2 {text-align: center; font-size: 56px; line-height: 1.4;}
.main .brands .h_line {width: 100%; height: 2px; background-image: linear-gradient(90deg, transparent 0%, var(--color-v) 50%, transparent 100%);}
.main .brands .logos {width: 100%; mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%); display: flex; flex-direction: column; gap: 56px; overflow: hidden; -webkit-transform: translateZ(0);
    transform: translateZ(0);}
.main .brands .logos ul {display: flex; gap: 80px; width: max-content; will-change: transform;}
.main .brands .logos ul li {height: 40px;}
.main .brands .logos ul li img {height: 100%; object-fit: contain;}
.main .brands .logos ul.reverse {flex-direction: row-reverse;}
.main .brands .logos ul:not(.reverse) {animation: slide-left 160s linear infinite;}
.main .brands .logos ul.reverse {animation: slide-right 160s linear infinite;}
@keyframes slide-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}
@keyframes slide-right {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

.main section:has(.schedule) {background-color: var(--color-k100);}
.main .schedule {padding:0 0 160px; display: grid; grid-template-columns: 1fr 2fr; grid-auto-flow: column; row-gap: 40px;}
.main .schedule > div {width: 100%;}
.main .schedule .bg {grid-row: span 2; background: url(../img/schedule_bg.jpg) no-repeat top right; background-size: cover; border-bottom-right-radius: 240px; padding: 160px 80px; text-align: right;}
.main .schedule .bg p {margin-top: 40px; font-size: 24px;}
/* .main .schedule .tables_wrap {display: flex; gap: 16px; padding: 160px 64px 0;}
.main .schedule .tables_wrap ul {width: 100%; background-color: #fff; border-radius: 16px; border: 1px solid #00000011; overflow: hidden;}
.main .schedule .tables_wrap ul li {border-bottom: 1px solid #00000011; width: 100%; height: 80px; display: flex;  flex-direction: column; justify-content: center; align-items: center; font-size: 18px; font-weight: 500; position: relative;}
.main .schedule .tables_wrap ul li::after {content: ""; position: absolute; top: 0; left: calc(50% - 6px); width: 12px; height: 8px; background-color: #aaa; margin-left: 5px; vertical-align: middle; clip-path: polygon(0% 0%, 100% 0%, 50% 100%);}
.main .schedule .tables_wrap ul li.th {color: #fff; padding: 12px 16px; align-items: start; justify-content:end; font-size: 28px; height: 100px; gap: 4px; font-weight: 700;}
.main .schedule .tables_wrap ul li:nth-child(2)::after,
.main .schedule .tables_wrap ul li.th::after {display: none;}
.main .schedule .tables_wrap ul li.th span {font-size: 16px; opacity: 0.5; padding-bottom: 4px;}
.main .schedule .tables_wrap ul:nth-child(1) li.th {background-color: var(--color-lv);}
.main .schedule .tables_wrap ul:nth-child(2) li.th {background-color: #6E1FB1;}
.main .schedule .tables_wrap ul:nth-child(3) li.th {background-color: #461272;}
.main .schedule .tables_wrap ul:nth-child(4) li.th {background-color: var(--color-v);} */

.main .schedule .tables_wrap {display: flex; flex-direction: column; gap: 16px; padding: 160px 64px 0; width: 100%; max-width: 1000px; overflow: hidden; margin: 0 auto;}
.main .schedule .tables_wrap > ul {width: 100%; height: auto; min-height: 100px; background-color: #fff; border-radius: 16px; border: 1px solid #00000011; overflow: hidden; display: flex; justify-content: center;}
.main .schedule .tables_wrap > ul > li {display: flex; justify-content: center; width: 100%; height: 100%;}
.main .schedule .tables_wrap > ul > li.th {flex-direction: column; color: #fff; width: 32%; min-width: 120px; height: 100%; font-size: 24px; gap: 4px; font-weight: 700; padding: 16px 0 16px 16px; }
.main .schedule .tables_wrap > ul > li.th span {font-size: 14px; opacity: 0.5;}
.main .schedule .tables_wrap > ul:nth-child(2) {border-color: var(--color-lv);}
.main .schedule .tables_wrap > ul:nth-child(3) {border-color: var(--color-v);}
.main .schedule .tables_wrap > ul:nth-child(2) > li.th {background-color: var(--color-lv);}
.main .schedule .tables_wrap > ul:nth-child(3) > li.th {background-color: var(--color-v);}
.main .schedule .tables_wrap > ul:nth-child(1) > li.th,
.main .schedule .tables_wrap > ul:nth-child(4) > li.th {background-color: #6E1FB111; color: #000;}
.main .schedule .tables_wrap > ul > li > ul {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0 12px; font-size: 18px; font-weight: 500; padding: 16px 24px;}
.main .schedule .tables_wrap > ul > li > ul > li {white-space: nowrap;}
.main .schedule .tables_wrap > ul > li > ul > li:has(i) {width: 12px !important; height: 12px; opacity: 0.7; }
.main .schedule .tables_wrap > ul > li > ul > li > i {display: flex; width: 100%; height: 100%; background-image: url(../img/ico_arrow.svg); background-position: center; background-repeat: no-repeat; background-size: contain; }
.main .schedule .tables_wrap > ul > li > ul > li.brk {width: 100%; flex-basis: 100%;  height:0; display: none;}
.main .schedule .tables_wrap .comment {text-align: right;}


.main .schedule button.go {grid-row: 2; justify-self: center; margin-bottom: 80px;}

.ex .top {background-image: url(../img/ex_top_bg.jpg); height: 400px; display: flex; align-items: center; font-size: 64px; font-weight: 700; color: var(--color-y);}

.ex section:has(.info) {background-image: linear-gradient(90deg, var(--color-k200) 50%, transparent 50%);}
.ex .info {display: grid; grid-template-columns: 1fr 1fr; padding: 0;}
.ex .info ul {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 80px; width: max-content; height: 100%; justify-self: center; }
.ex .info ul li {font-size: 32px; position: relative;}
.ex .info ul li::after {content: ""; position: absolute; bottom: -40px; left: 0; width: 100%; height: 1px; background-image: linear-gradient(90deg, transparent 0%, var(--color-v) 50%, transparent 100%);}
.ex .info ul li:last-child::after {display: none;}
.ex .info ul li i {width: 32px; height: 32px; margin-right: 16px; translate: 0 4px;}
.ex .info ul li i.ico_ex01 {background-image: url(../img/ico_ex_01.svg);}
.ex .info ul li i.ico_ex02 {background-image: url(../img/ico_ex_02.svg);}
.ex .info ul li i.ico_ex03 {background-image: url(../img/ico_ex_03.svg);}
.ex .info .bg {width: 100%; padding: 40px;}
.ex .info .bg img {border-radius: 40px; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.ex section:has(.list) {background-image: linear-gradient(180deg, var(--color-k300) 0%, #fff 200px); border-top: 1px solid #00000022;}
.ex .list {padding: 160px var(--p320);}
.ex .list h2 {text-align: center; margin-bottom: 80px; font-size: 56px;}
.ex .list .brand_list {display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap: 24px; row-gap: 80px;}
.ex .list .brand_list > li {width: 100%; display: flex; flex-direction: column; justify-content: center; border: 1px solid #00000022; background-color: #fff; border-radius: 16px; overflow: hidden;}
.ex .list .brand_list > li > .logo {width: 100%; min-height: 160px; height: 160px; border-bottom: 1px solid #0000000a; display: flex; justify-content: center; align-items: center;}
.ex .list .brand_list > li > .logo img {height: 56%; width: 56%; object-fit: contain;}
.ex .list .brand_list > li > p {width: 100%; flex: 1; font-size: 16px; line-height: 1.6; padding: 40px;;}
.ex .list .brand_list > li > p span {font-size: 20px; font-weight: 700; display: block;margin-bottom: 16px;}
.ex .list .brand_list > li > .links {width: 100%; height: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); }
.ex .list .brand_list > li > .links li {display: flex; justify-content: center; align-items: center; font-size: 13px; font-weight: 500; letter-spacing: 0; position: relative; cursor: pointer; border:1px solid #00000022; border-width: 1px 0 0 0; opacity: 0.7;}
.ex .list .brand_list > li > .links li:last-child {border-width: 1px 0 0 1px;}
.ex .list .brand_list > li > .links li:hover {background-color: #0000000a; opacity: 1;}
.ex .list .brand_list > li > .links li i {width: 12px; height: 12px; margin-right: 8px; translate: 0 1px;}
.ex .list .brand_list > li > .links li i.ico_web {background-image: url(../img/ico_web.svg);}
.ex .list .brand_list > li > .links li i.ico_bro {background-image: url(../img/ico_bro.svg);}

.att .top {background-image: url(../img/att_top_bg.jpg); height: 400px; display: flex; align-items: center; font-size: 64px; font-weight: 700; color: var(--color-y);}
.att .process {display: grid; grid-template-columns: 1.5fr 1fr; padding: 0 0 160px;}
.att .process ul {padding: 160px 0 160px var(--p320); display: flex; flex-direction: column; gap: 120px; width: max-content;}
.att .process ul li {display: flex; flex-direction: column; gap: 16px; font-size: 24px; position: relative;}
.att .process ul li::after {position: absolute; content: ""; left: 0; bottom: -60px; width: 100%; height: 2px; background-image: var(--color-gra);}
.att .process ul li:last-child::after {display: none;} 
.att .process ul li span {font-weight: 700; font-size: 32px; color: var(--color-v);}
.att .process ul li .email {padding: 16px 24px; background-color: var(--color-k200); display: flex; justify-content: center; align-items: center; gap: 16px; transition: 0.5s ease-in; width: max-content; border-radius: 8px;}
.att .process ul li .email span {font-size: 20px; font-weight: 500; color: #000 !important;}
.att .process ul li .email button.copy {display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; background-color: #fff; padding: 8px 24px; border-radius: 4px; border: 1px solid #00000033;}
.att .process .bg {grid-row: span 2; background: url(../img/att_process_bg.jpg) no-repeat top right; background-size: cover; border-bottom-left-radius: 240px; padding: 160px 80px;}
.att .process .bg p {margin-top: 40px; font-size: 24px; font-weight: 700;}

.att .benefit {padding: 80px var(--p320) 160px;}
.att .benefit h2 {text-align: center; margin-bottom: 80px; font-size: 64px;}
.att .benefit ul {display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 80px;}
.att .benefit ul li img {height: 280px; width: 100%; margin-bottom: 24px; object-fit: cover;}
.att .benefit ul li {width: 100%; text-align: center; font-size: 28px;}



@media (max-width: 1200px) {
    :root {
        --p320: clamp(24px, 5vw, 80px); 
    }
    
    h2,
    .main .fair h2,
    .main .brands h2 {font-size: 48px;}
    .main .top {padding-top: 320px;}
    .main .intro p {font-size: 24px;}
    .main .intro ul li p {font-size: 20px; margin-top: 24px;}
    .main .fair {row-gap: 56px; padding: 160px 0 0 var(--p320);}
    .main .fair ul {padding-right: 64px; gap: 48px}
    .main .fair ul li {font-size: 18px;}
    .main .fair ul li::after {bottom: -24px;}
    .main .fair button.go {margin-bottom: 80px;}
    .main .fair .bg {border-top-left-radius: 120px;}
    .main .brands {gap: 64px;}
    .main .schedule .bg {padding: 120px 40px; border-bottom-right-radius: 120px;}
    .main .schedule .bg p {font-size: 20px; margin-top: 24px;}
    .main .schedule .tables_wrap {padding: 120px 40px 0;}
    /* .main .schedule .tables_wrap ul li.th {flex-direction: column; justify-content: end; align-items: start; gap: 4px; padding: 0 16px 8px; font-size: 24px; height: 88px;}
    .main .schedule .tables_wrap ul li.th span {padding: 0; font-size: 16px;}
    .main .schedule .tables_wrap ul li {height: 64px; font-size: 18px;} */
    .main .schedule .tables_wrap > ul {flex-direction: column; height: initial;}
    .main .schedule .tables_wrap > ul > li {height: 100px;}
    .main .schedule .tables_wrap > ul > li.th {flex-direction: row; align-items: center; width: 100%; height: 56px; gap: 16px;}
    .main .schedule .tables_wrap > ul > li.th span {padding-top: 4px;}

    .main .schedule button.go {margin-bottom: 40px;}

    .ex .info ul {gap: 48px;}
    .ex .info ul li {font-size: 24px;}
    .ex .info ul li::after {bottom: -24px;}
    .ex .info ul li i {width: 24px; height: 24px; margin-right: 8px}
    .ex .info .bg {padding: 16px;}
    .ex .info .bg img {border-radius: 16px;}
    .ex .list .brand_list > li > .logo {height: 120px; min-height: 120px;}
    .ex .list .brand_list > li > p {padding: 16px;}

    .att .process {grid-template-columns: 1.2fr 1fr; padding: 0 0 80px;}
    .att .process ul {padding: 120px 0 80px var(--p320); gap: 80px;}
    .att .process ul li {font-size: 18px; gap: 12px;}
    .att .process ul li::after {bottom: -40px;}
    .att .process ul li span {font-size: 24px;}
    .att .process ul li .email {padding: 8px 16px;}
    .att .process ul li .email span {font-size: 16px;}
    .att .process ul li .email button.copy {font-size: 14px; padding: 4px 16px;}
    .att .process .bg {border-bottom-left-radius: 120px; padding: 120px 40px;}

    .att .benefit h2 {font-size: 48px;}
    .att .benefit ul li {font-size: 20px;}
    .att .benefit ul li img {height: 240px;}
}

@media (max-width: 992px) {
    header > div {gap: 24px}
    header h1 a {width: 160px; height: 64%; background-image: url(../img/logo_v.svg);}
    header ul.menu {gap: 16px;}
    header ul.setLang li {width: 48px;}
    .main .top {padding-top: 240px;}
    .main .top .tit {top: 80px; left: calc(50% - 140px); width: 280px;}
    .main .top .info {height: 56px;}
    .main .top .info li {font-size: 18px; gap: 8px;}
    .main .top .info li span {font-size: 14px;}
    .main .intro {padding-top: 120px;}
    .main .intro ul {flex-direction: column;}
    .main .intro ul li div p.none {display: initial; font-size: 18px; font-weight: 700; filter: drop-shadow(0 0 8px #000);}
    .main .intro ul li p {display: none;}
    .main .fair {grid-template-columns: 1fr; padding:160px 0;}
    .main .fair > div,
    .main .fair ul {padding: 0 var(--p320); }
    .main .fair button.go {margin: 0 auto;}
    .main .fair .bg {grid-row: 4; grid-column: 1; height: 320px; border-radius: 0px; background-position: center; }
    .main .brands .logos ul {gap: 40px;}
    .main .brands .logos ul li {height: 24px;}
    .main .schedule {grid-template-columns: 1fr; padding: 0 0 80px;}
    .main .schedule .bg {grid-row: 1; text-align: center; padding: 120px 0 120px; background-position: center bottom 50%; border-radius: 0;}
    .main .schedule .bg br {display: none;}
    .main .schedule .tables_wrap {padding: 40px var(--p320) 0;}
    .main .schedule button.go {grid-row: 3;}

    .ex .top,
    .ex .list h2 {font-size: 48px;}
    .ex .list {padding: 120px var(--p320);}
    .ex .list .brand_list {grid-template-columns: 1fr 1fr;}

    .att .top {font-size: 48px;}
    .att .process {grid-template-columns: 1fr;}
    .att .process .bg:not(.none) {grid-row: 1; text-align: center; background: none;}
    .att .process .bg h2 br {display: none;}
    .att .process .bg p {margin-top: 16px;}
    .att .process ul {padding: 0px var(--p320); margin: 0 auto; width: 100%;}
    .att .process .bg.none {display: block; width: 100%; height: 240px; padding: 0; margin-top: 40px; border-radius: 0; background-position: center bottom 20%;}
    .att .benefit h2 {font-size: 40px; margin-bottom: 40px;}
    .att .benefit ul {row-gap: 48px;}
}


@media (max-width: 768px) {
    .container {padding-top: 56px;}
    h2 { font-size: 32px; }
    header {height: 56px;}
    header > div {padding: 0 16px;}
    header ul.menu { display: none; }
    header ul.setLang {flex: 1; justify-content: end;}
    header .menu_ham {display: block;}
    footer {padding: 40px 0 80px}
    footer ul { gap: 24px; flex-direction: column;}
    footer ul li.line {display: none;}
    footer ul li.logo_gv > object
    footer ul li.logo_em > object {height: 28px;}
    footer ul li.logo_at > img {height: 24px;}

    .ex .top {padding: 0; justify-content: center; background-position: center right 20%; position: relative;}
    .ex .top::after {content: ""; width: 100%; height: 100%; background-color: #00000033; position: absolute; top: 0; left: 0;}
    .ex .top font {z-index: 1; filter: drop-shadow(0 0 8px #000);}
    .ex section:has(.info) {background-image: none;}
    .ex .info {grid-template-columns: initial; grid-auto-flow: row;}
    .ex .info ul {padding: 120px 16px; gap: 80px;}
    .ex .info ul li { font-size: 28px;}
    .ex .info ul li::after {bottom: -40px;}
    .ex .info .bg {padding: 0; height: 240px;}
    .ex .info .bg img {border-radius: 0;}
    .ex .list .brand_list {column-gap: 16px; row-gap: 48px;}
    .ex .list .brand_list > li > .logo {height: 100px; min-height: 100px;}
    .ex .list .brand_list > li > .links {height: 40px;}
    .ex .list .brand_list > li > p {font-size: 14px;}
    .ex .list .brand_list > li > p span {font-size: 16px; margin-bottom: 8px; line-height: 1.4;}

    .att .top {padding: 0; justify-content: center; background-position: center right 20%; position: relative;}
    .att .top::after {content: ""; width: 100%; height: 100%; background-color: #00000033; position: absolute; top: 0; left: 0;}
    .att .top font {z-index: 1; filter: drop-shadow(0 0 8px #000);}
    .att .benefit {padding: 80px var(--p320) 80px;}
    .att .benefit ul {column-gap: 8px; row-gap: 32px;}
    .att .benefit ul li {font-size: 16px;}
    .att .benefit ul li img {height: 200px; margin-bottom: 16px;}

}

@media (max-width: 576px) {
    h2 {font-size: 32px;}

    button.go {padding: 0 48px; height: 48px;}
    button.go span {font-size: 16px;}

    footer button.top {width: 48px; height: 48px; bottom: 24px; right: 24px;}
    .comment {font-size: 11px !important}

    header ul.setLang {font-size: 12px;}
    .main .top {padding-top: 320px;}
    .main .top img {height: 200px; object-fit: cover;}
    .main .top .tit {width: 280px; left: calc(50% - 140px); top: 120px;}
    .main .top .info {flex-direction: column; height: max-content; gap: 8px; margin: 0 auto; padding: 24px 0 16px;}
    .main .top .info li {font-size: 18px;}
    .main .top .info li span {font-size: 12px; padding: 2px 8px;}
    .main .intro {gap: 40px}
    .main .intro p {font-size: 18px;}
    .main .intro ul li div {height: 200px; gap: 8px;}
    .main .intro ul li div span {font-size: 24px;}
    .main .intro ul li p {margin-top: 0; font-size: 16px;}
    .main .fair {padding-bottom: 120px;}
    .main .fair h2 {font-size: 36px;}
    .main .fair ul li {flex-direction: column; gap: 16px;}
    .main .fair ul li small {padding-top: 8px;}
    .main .brands {padding-top: 0px; gap: 48px;}
    .main .brands h2 {font-size: 36px}
    .main .brands h2 br.none {display: block;}
    .main .brands .logos {gap: 32px; mask-image: none;}

    .main .schedule .bg h2 {font-size: 40px;}
    .main .schedule .bg h2 br,
    .main .schedule .bg p br {display: block;}
    /* .main .schedule .tables_wrap {gap: 4px; padding: 0px 16px; display: grid; grid-template-columns: 1fr 1fr;}
    .main .schedule .tables_wrap ul {border-radius: 12px;}
    .main .schedule .tables_wrap ul li.th {font-size: 18px; height: 68px;}
    .main .schedule .tables_wrap ul li.th span {font-size: 12px;}
    .main .schedule .tables_wrap ul li {font-size: 16px; height: 52px;}
    .main .schedule .tables_wrap ul li::after {width: 10px; height: 6px; left: calc(50% - 10px);} */
    .main .schedule .tables_wrap > ul > li > ul > li.brk {display: block}

    .att .process .bg {padding: 120px 0 80px;}
    .att .process .bg h2 > b {display: block;}
    .att .process ul li {font-size: 16px;}
    .att .process ul li span {font-size: 20px;}
    .att .benefit h2 {font-size: 32px;}
    .att .benefit ul {grid-template-columns: 1fr;}
    .att .benefit ul li img {height: 160px;}

    .ex .info ul {gap: 64px; padding: 80px 0;}
    .ex .info ul li::after {bottom: -32px;}
    .ex .list h2 {font-size: 40px; margin-bottom: 40px;}
    .ex .list .brand_list {gap: 16px;}
    .ex .list .brand_list > li {cursor: pointer; border-radius: 8px;}
    .ex .list .brand_list > li > p,
    .ex .list .brand_list > li > .links {display: none !important; }
    .ex .list .brand_list > li > .logo {height: 80px; border-bottom: none;}
    .ru .ex .list h2 b {display: block;}

    .modal_ex {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000aa; z-index: 2000; display: none; justify-content: center; align-items: center; padding: 16px;}
    .modal_ex.on { display: flex; }
    .modal_content {background: #fff; width: 100%; max-width: 400px; border-radius: 16px; overflow: hidden; position: relative; animation: modalUp 0.3s ease;}
    @keyframes modalUp {
        from { transform: translateY(20px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .modal_content .logo { height: 120px; display: flex; justify-content: center; align-items: center; }
    .modal_content .txt { padding: 30px 20px; }
    .modal_content .txt span { font-size: 20px; font-weight: 700; display: block; margin-bottom: 15px; }
    .modal_content .txt p { font-size: 15px; line-height: 1.6; color: #666; max-height: 250px; overflow-y: auto; }
    .modal_content .links { display: grid; grid-template-columns: repeat(auto-fit, minmax(50%, 1fr)); height: 50px; border-top: 1px solid #eee; }
    .modal_content .links a { display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; text-decoration: none; color: #333; position: relative; }
    .modal_content .links a + a { border-left: 1px solid #eee; }
    .modal_close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; background: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 20px; z-index: 10; border: 1px solid #00000011; }
}