/* * Используется, когда устройство = рабочий стол * Настроен в: configuration/brazil-config/global/brand-story.cfg * / / * Поскольку карусель реализована в виде списка ol, все списки в тексте карточки будут иметь стиль вторичного списка (буквы).Это даст неправильный внешний вид зрителей, поэтому мы установили все списки основной стиль списка (номеров). */ .аплюс-бренд-истории-карточки ол ли { список-стиль: десятичная; } /* Top контейнерами уровня */ .аплюс-модуль .АПМ-бренд-сюжет-герой { -МОЗ-бокс-проклейки: граница-коробка; -в WebKit-бокс-проклейки: граница-бокс; коробчатого проклейки: граница-бокс; ширина: 1464px; высота: 625px; фон-цвет: #FFF; } .аплюс-модуль .АПМ-бренд-истории-карточки { -МОЗ-бокс-проклейки: граница-коробка; -в WebKit-бокс-проклейки: граница-бокс; коробчатого проклейки: граница-бокс; ширина: 362px; высота: 453px; фон-цвет: #FFF; } .АПМ-бренд-сюжет-герой .АПМ-бренд-истории-карточки { -МОЗ-бокс-проклейки: граница-коробка; -в WebKit-бокс-проклейки: граница-бокс; коробчатого проклейки: граница-коробка; позиция: относительная; ширина: 100%; высота: 100%; поплавок: нет; } .аплюс-модуль.бренд-истории-карточки-1-четыре-Асин .АПМ-бренд-истории-карточки { /* только 12px к ответственности за изображения границы ячеек */ обивка: 12px; } /* полный фоновое изображение (Герой 1 и карта 2) */ .аплюс-модуль .АПМ-бренд-история-фон-изображения { -МОЗ-бокс-проклейки: граница-коробка; -в WebKit-бокс-проклейки: граница-бокс; коробчатого проклейки: граница-коробка; переполнение: скрытый; позиция: абсолютная; ширина: 100%; высота: 100%; } /* карточка 1 небольшой изображений */ .аплюс-модуль .АПМ-бренд-история-образ-рядка { -МОЗ-бокс-проклейки: граница-коробка; -в WebKit-бокс-проклейки: граница-бокс; коробчатого проклейки: граница-бокс; высота: 185px; обивка: 0px; маржа: авто; дисплей: гибкий; } .аплюс-модуль .АПМ-бренд-история-образ-рядка .АПМ-бренд-история-образ-сотовый { /* использовать содержимое коробки, чтобы обеспечить размер изображения играм редакторе схем */ -МОЗ-коробка-размер: содержимое-Коробка; -в WebKit-коробка-размер: содержимое-Коробка; коробка-размер: содержимое-Коробка; подкладка: 0px; маржа: 0px; ширина: 166px; границы: 1px твердых #ФФФ; } .аплюс-модуль .АПМ-бренд-история-образ-рядка .АПМ-бренд-история-изображения клеток .АПМ-бренд-сюжет-изображение-ссылка { дисплей: блок; ширина: 100%; высота: 100%; } .аплюс-модуль .АПМ-бренд-история-образ-рядка .АПМ-бренд-история-изображения клеток .АПМ-бренд-сюжет-изображение-ссылку .АПМ-бренд-история-образ-в img { дисплей: блок; ширина: 100%; высота: 100%; объект-подходит: чехол; } /* Карта 3 изображение логотипа */ .аплюс-модуль .АПМ-бренд-история-лого-изображения { -МОЗ-коробка-размер: содержимое-Коробка; -в WebKit-коробка-размер: содержимое-Коробка; коробка-размер: содержимое-Коробка; высота: 145px; маржа: 0px в 4px; обивка: в 20px; обивка-дно: 0px; } /* вставка текста */ .аплюс-модуль .АПМ-бренд-рассказ-текст-внизу { -МОЗ-бокс-проклейки: граница-коробка; -в WebKit-бокс-проклейки: граница-бокс; коробчатого проклейки: граница-коробка; позиция: абсолютная; внизу: 13px; кол-во: 13px; } .аплюс-модуль .АПМ-бренд-сюжет-герой .АПМ-бренд-рассказ-текст-снизу { фонового цвета: RGBA(0,0,0,0.6); цвет: #FFF; обивка: 65px 13px 13px 13px; /* счета для перекрытия первая карта */ ширина: 437px; } .аплюс-модуль.бренд-истории-карточки-2-медиа-активов .АПМ-бренд-рассказ-текст-снизу { фонового цвета: RGBA(255,255,255,0.6); цвет: #000; обивка: 13px; ширина: 336px; } .аплюс-модуль.бренд-истории-карточки-1-четыре-Асин .АПМ-бренд-история-текст { маржа-топ: 8 Пикс; } .аплюс-модуль.бренд-истории-карточки-1-четыре-Асин .АПМ-бренд-история-текст.АПМ-бренд-рассказ-текст-один { маржа-топ: в 20px; } .аплюс-модуль.бренд-истории-карточки-1-четыре-Асин .АПМ-бренд-история-текст Н3 { белый-пространство: без переноса; переполнение: скрытый; текст переполнение: многоточие; } .аплюс-модуль .АПМ-бренд-история-слоган-текст { -МОЗ-коробка-размер: содержимое-Коробка; -в WebKit-коробка-размер: содержимое-Коробка; коробка-размер: содержимое-Коробка; маржа: 0px в 4px; обивка: в 20px; } .аплюс-модуль .АПМ-бренд-история-чаво { -МОЗ-коробка-размер: содержимое-Коробка; -в WebKit-коробка-размер: содержимое-Коробка; коробка-размер: содержимое-Коробка; обивка-топ: значение 10px; } .аплюс-модуль .АПМ-бренд-история-чаво-блок { маржа: 0px значение 10px; обивка: значение 10px; } .аплюс-В2 .АПМ-бренд-история-карусель-контейнер { позиция: относительная; } .аплюс-В2 .АПМ-бренд-история-карусель-герой-контейнера .аплюс-В2 .АПМ-бренд-история-карусель-герой-контейнер > див { позицию: абсолютная; ширина: 100%; } /* Обеспечение того, чтобы карусель занимала ровно столько места, сколько ей нужно.Размеры необходимо снова установить для абсолютно расположенных элементов, чтобы они могли занимать место. */ .aplus-v2 .apm-brand-story-carousel-container, .aplus-v2 .apm-brand-story-carousel-hero-container { высота: 625 пикселей; ширина: 100%; максимальная ширина: 1464 пикселей; поле слева: автоматическое; поле справа: автоматическое; переполнение: скрытое; } /* Это центрирует карусель вертикально поверх контейнера с изображением героя и после области логотипа (125 пикселей).Margin-top = (Высота героя - cardHeight - logoAreaHeight) / 2 + logoAreaHeight */ .aplus-v2 .apm-brand-story-carousel .a-carousel-row-inner{ margin-top: 149 пикселей; } /* У карточек должна быть задана ширина, в противном случае по умолчанию она равна 50px или около того.Все карточки должны иметь одинаковую ширину.Карусель изменит размер сама себя, чтобы все карточки имели ширину самой большой карточки.Левое поле предназначено для того, чтобы оставить пробел между каждой карточкой. */ .aplus-v2 .apm-brand-story-carousel .a-carousel-card { ширина: 362px; поле слева: 30px!важно; } /* оформите кнопки навигации так, чтобы они были выше, располагались на одном уровне с боковинами и имели чистый белый фон */ .aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-left, .aplus-v2 .apm-brand -story-carousel .a-carousel-col.a-carousel-right { отступ: 0px; } .aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-left .a-button-image, .aplus-v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-right .a-button-image { граница: отсутствует; поле: 0px; } .aplus -v2 .apm-brand-story-carousel .a-carousel-col.a-carousel-слева .a-button-изображение .a-button-внутренняя, .aplus-v2 .apm-brand-story-carousel .a-carousel-col .a-carousel-справа .a-button-изображение .a-button-внутренняя { фон: #fff; отступ: 20x6 пикселей; } .aplus-v2 .apm-brand-story-carousel .a- carousel-col.a-carousel-слева .a-кнопка-изображение .a-кнопка-внутренняя { радиус границы: 0px 4px 4px 0px; } .aplus-v2 .apm-история бренда-carousel .a-карусель-col.a-карусель-справа .a-кнопка-изображение .a-кнопка-внутренняя { радиус границы: 4px 0px 0px 4px; }