.brand-list {
  position: relative; }
  .brand-list .tab-content {
    margin-top: 3.90244rem;
    margin-bottom: 7.80488rem; }

.grid .wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -0.97561rem;
  margin-right: -0.97561rem; }

.grid .inner {
  position: relative; }

.grid .brand-item {
  width: 33.3%;
  padding: 0.97561rem;
  margin-bottom: 1.46341rem; }
  .grid .brand-item .brand-link {
    padding-bottom: 100%;
    position: relative;
    display: block;
    background: #2f2f2f; }
    .grid .brand-item .brand-link:hover .img1 {
      opacity: 0; }
    .grid .brand-item .brand-link:hover .img2 {
      opacity: 1; }
  .grid .brand-item .img1 {
    position: absolute;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity;
    mix-blend-mode: exclusion;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 50%;
    left: 50%; }
  .grid .brand-item .img2 {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
    will-change: opacity transform;
    top: 0;
    left: 0; }

.grid .btn-exclusive {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0.58537rem; }

@media (max-width: 1024px) {
  .grid .brand-item {
    width: 100%; } }

.btn-exclusive {
  display: block;
  margin-bottom: 2.34146rem;
  font-size: 1.17073rem;
  padding: 0;
  position: relative; }
  .btn-exclusive:hover {
    color: #767676; }

.infinitive-rotation {
  font-size: 1.95122rem;
  -webkit-animation: rotate 1.5s linear infinite;
          animation: rotate 1.5s linear infinite;
  position: absolute;
  right: -1.95122rem;
  top: -0.97561rem;
  width: 1.95122rem;
  height: 1.95122rem;
  padding-top: 0.4878rem;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; }

.brand-with-thumb {
  margin-bottom: 15vh; }
  .brand-with-thumb .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding-left: 9%; }
  .brand-with-thumb .logo-brand {
    margin-bottom: 5.85366rem;
    display: inline-block; }
  .brand-with-thumb .content {
    border-bottom: 1px solid #767676;
    padding-bottom: 7.80488rem;
    padding-left: 7.5%;
    padding-right: 3.90244rem;
    margin-bottom: 9.7561rem;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
  @media (min-width: 1025px) {
    .brand-with-thumb:nth-child(odd) .inner {
      padding-left: 0;
      padding-right: 9vw; }
    .brand-with-thumb:nth-child(odd) .thumb {
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2; }
    .brand-with-thumb:nth-child(odd) .content {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
      padding-right: 7.5%;
      padding-left: 9vw;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end; }
    .brand-with-thumb:nth-child(odd) .logo-brand {
      width: 80%; } }
  @media (max-width: 1024px) {
    .brand-with-thumb {
      margin-bottom: 0; }
      .brand-with-thumb .inner {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 0;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch; }
        .brand-with-thumb .inner img {
          width: 100%; }
      .brand-with-thumb .content {
        margin-left: 7%;
        width: 93%;
        padding: 6.82927rem 0 0 1.95122rem;
        border-bottom: 0;
        border-left: 1px solid rgba(251, 251, 251, 0.6);
        margin-bottom: 5.85366rem; }
      .brand-with-thumb .logo-brand {
        margin-bottom: 3.70732rem; } }

.modal-dialog {
  max-width: 97.17073rem;
  height: 48.97561rem;
  top: calc(50% - 206px);
  margin: auto; }
  .modal-dialog .modal-header {
    border-bottom: 0; }
  .modal-dialog .btn-close {
    width: 1.95122rem;
    height: 1.95122rem; }
  .modal-dialog .modal-content {
    background-color: #A79589;
    color: #030303;
    border-radius: 0;
    height: 100%;
    overflow: hidden;
    padding-bottom: 2.92683rem; }
  .modal-dialog .modal-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: hidden; }
  .modal-dialog .thumb {
    width: 45%;
    overflow: hidden; }
  .modal-dialog .img-modal {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain; }
  .modal-dialog .content {
    width: 55%;
    height: 100%;
    overflow: hidden; }
  .modal-dialog .inner {
    height: 100%;
    overflow: auto;
    padding-left: 2.92683rem;
    padding-right: 1.95122rem; }
    .modal-dialog .inner::-webkit-scrollbar-track {
      background-color: #F5F5F5; }
    .modal-dialog .inner::-webkit-scrollbar {
      width: 0.29268rem;
      background-color: #F5F5F5; }
    .modal-dialog .inner::-webkit-scrollbar-thumb {
      background-color: #555; }

@media (max-width: 1024px) {
  .display-mode {
    display: none; }
  .modal-dialog {
    height: 70vh;
    top: calc(50% - 35vh); }
    .modal-dialog .modal-body {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow: auto; }
    .modal-dialog .thumb {
      width: 100%;
      overflow: unset;
      max-width: 29.26829rem;
      margin: 0 auto; }
    .modal-dialog .content {
      width: 100%;
      padding-left: 0;
      padding-top: 1.95122rem;
      height: auto;
      overflow: unset; }
    .modal-dialog .inner {
      padding-left: 0; } }

@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }