.banner {
    position: relative
  }
  
  .banner img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 25vw
  }
  
  .banner .text {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
    color: white
  }
  
  .banner .text .t {
    line-height: 1.1;
    font-weight: 400;
    text-transform: uppercase;
    font-family: var(--main-font)
  }
  
  .container {
    background: #EBF5FF;
    padding: 5.41667vw 9.53125vw 6.25vw 8.33333vw
  }
  
  .container .wrap {
    display: flex;
    justify-content: space-between;
    gap: 4.16667vw
  }
  
  .container .wrap .lbox {
    width: 16.97917vw
  }
  
  .container .wrap .lbox .pbox {
    position: sticky;
    left: 0;
    top: 5.20833vw
  }
  
  .container .wrap .lbox .t {
    font-family: var(--main-font);
    color: #003460;
    text-transform: uppercase;
    line-height: 1.5;
    padding-bottom: .52083vw;
    border-bottom: 1px solid rgba(0, 52, 96, 0.679)
  }
  
  .container .wrap .lbox .type_wrap {
    margin-top: 2.08333vw
  }
  
  .container .wrap .lbox .type_wrap .item:not(:last-child) {
    margin-bottom: 2.08333vw
  }
  
  .container .wrap .lbox .type_wrap .item .d1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    opacity: .6;
    transition: all 600ms
  }
  
  .container .wrap .lbox .type_wrap .item .d1 .lt {
    display: flex;
    align-items: center;
    gap: .78125vw;
    color: #003460
  }
  
  .container .wrap .lbox .type_wrap .item .d1 .lt p {
    font-family: var(--main-font);
    text-transform: capitalize;
    line-height: 1.875
  }
  
  .container .wrap .lbox .type_wrap .item .d1 .lt span {
    width: .3125vw;
    height: .3125vw;
    border-radius: 50%;
    background: #003460;
    display: block;
    margin-top: .10417vw
  }
  
  .container .wrap .lbox .type_wrap .item .d1 .icon img {
    display: block;
    width: 1.25vw;
    transition: all 600ms
  }
  
  .container .wrap .lbox .type_wrap .item .d1.active,
  .container .wrap .lbox .type_wrap .item .d1:hover {
    opacity: 1
  }
  
  .container .wrap .lbox .type_wrap .item .d1.active .icon img,
  .container .wrap .lbox .type_wrap .item .d1:hover .icon img {
    transform: rotate(90deg)
  }
  
  .container .wrap .lbox .type_wrap .item .d2 {
    margin: .26042vw 0 0 1.04167vw;
    display: none
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list:not(:last-child) {
    margin-bottom: .26042vw
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem {
    position: relative
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem .icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: .6
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem .icon img {
    display: block;
    width: 1.25vw;
    transition: all 600ms
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem p {
    color: #003460;
    opacity: .6;
    transition: all 600ms;
    line-height: 1.5;
    text-transform: capitalize;
    position: relative;
    font-weight: 500;
    cursor: pointer
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem p::before {
    content: '';
    display: block;
    position: absolute;
    background: linear-gradient(90deg, rgba(0, 108, 200, 0.6) 0%, rgba(20, 19, 19, 0) 100%);
    inset: 0;
    transition: all 600ms;
    width: 0;
    z-index: -1
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem p:not(:last-child) {
    margin-bottom: .15625vw
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem:hover p,
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem.on p {
    color: #fff
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem:hover p::before,
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem.on p::before {
    width: 100%
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem:hover .icon,
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem.on .icon {
    opacity: 1
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem:hover .icon img,
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem.on .icon img {
    transform: rotate(90deg)
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third {
    margin: .26042vw 0 0 2.08333vw;
    display: none
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third p {
    width: fit-content;
    color: #62819C;
    font-weight: 500;
    transition: color 600ms, border-color 600ms;
    text-transform: capitalize;
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third p::after {
    display: none !important
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third p:not(:last-child) {
    margin-bottom: .41667vw
  }
  
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third p:hover,
  .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third p.on {
    color: #003460;
    border-bottom-color: #003460
  }
  
  .container .wrap .rbox {
    flex: 1;
    padding-top: .3125vw
  }
  
  .container .wrap .rbox .tags {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #003460;
    padding-bottom: .9375vw;
    gap: 1.25vw;
    margin-bottom: 2.08333vw;
    overflow: visible
  }
  
  .container .wrap .rbox .tags .sort {
    display: flex;
    align-items: center;
    gap: 1.25vw
  }
  
  .container .wrap .rbox .tags p {
    color: rgba(0, 52, 96, 0.5);
    font-weight: 500
  }
  
  .container .wrap .rbox .tags .items {
    display: flex;
    gap: 1.25vw
  }
  
  .container .wrap .rbox .tags .gender_filter {
    position: relative;
    width: 15vw;
    flex-shrink: 0;
    z-index: 30;
    margin-left: auto
  }
  
  .container .wrap .rbox .tags .gender_filter .cur {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    padding: .52083vw 1.25vw;
    border: 1px solid #003460;
    border-radius: 1.25vw;
    background: #fff;
    cursor: pointer;
    color: #7694AF;
    font-weight: 500;
    font-size: .83333vw;
    line-height: normal
  }
  
  .container .wrap .rbox .tags .gender_filter .cur .arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25vw;
    height: 1.25vw;
    flex-shrink: 0;
    transform: rotate(-90deg);
    transition: transform 300ms
  }
  
  .container .wrap .rbox .tags .gender_filter .cur .arrow svg {
    display: block;
    width: 1.25vw;
    height: 1.25vw
  }
  
  .container .wrap .rbox .tags .gender_filter.open .cur .arrow {
    transform: rotate(0deg)
  }
  
  .container .wrap .rbox .tags .gender_filter .drop {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + .83333vw);
    width: 100%;
    box-sizing: border-box;
    padding: 1.04167vw 1.25vw;
    border: 1px solid #003460;
    border-radius: .625vw;
    background: #fff;
    z-index: 40
  }
  
  .container .wrap .rbox .tags .gender_filter.open .drop {
    display: flex;
    flex-direction: column;
    gap: 1.25vw
  }
  
  .container .wrap .rbox .tags .gender_filter .drop .opt {
    display: flex;
    align-items: center;
    gap: 1.25vw;
    cursor: pointer;
    color: #7694AF;
    font-weight: 500;
    font-size: .83333vw;
    line-height: 1;
    text-transform: none
  }
  
  .container .wrap .rbox .tags .gender_filter .drop .opt span {
    text-transform: capitalize
  }
  
  .container .wrap .rbox .tags .gender_filter .drop .opt .box {
    position: relative;
    display: block;
    width: 1.25vw;
    height: 1.25vw;
    flex-shrink: 0;
    box-sizing: border-box;
    border: .05vw solid #003460;
    border-radius: .25vw
  }
  
  .container .wrap .rbox .tags .gender_filter .drop .opt .box .check {
    position: absolute;
    left: .075vw;
    top: .075vw;
    display: flex;
    width: 1vw;
    height: 1vw;
    opacity: 0
  }
  
  .container .wrap .rbox .tags .gender_filter .drop .opt .box .check svg {
    display: block;
    width: 1vw;
    height: 1vw
  }
  
  .container .wrap .rbox .tags .gender_filter .drop .opt.on .box .check {
    opacity: 1
  }
  
  .container .wrap .rbox .tags .items span {
    cursor: pointer;
    color: rgba(0, 52, 96, 0.5);
    font-weight: 500;
    text-transform: capitalize;
    border-bottom: 2px solid transparent;
    padding: 0 .41667vw;
    height: 1.66667vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 600ms
  }
  
  .container .wrap .rbox .tags .items span:hover,
  .container .wrap .rbox .tags .items span.on {
    border-color: #003460;
    color: #003460
  }
  
  .container .wrap .rbox .list {
    position: relative;
    z-index: 1
  }
  
  .container .wrap .rbox .list .box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.08333vw 3.54167vw
  }
  
  .container .wrap .rbox .list .box:not(:last-child) {
    margin-bottom: 2.08333vw
  }
  
  .container .wrap .rbox .list .box a {
    display: block;
    width: 100%
  }
  
  .container .wrap .rbox .list .box a.row-2 {
    grid-column: 1 / span 2;
    grid-row: span 1;
    align-self: start;
    position: relative
  }
  
  .container .wrap .rbox .list .box a.row-2 .pic2 {
    height: 17.70833vw;
    border-radius: 1.04167vw;
    overflow: hidden
  }
  
  .container .wrap .rbox .list .box a.row-2 .pic2 img {
    width: 100%;
    object-fit: cover;
    display: block;
    height: 100%;
    transition: all 600ms
  }
  
  .container .wrap .rbox .list .box a.row-2 .st {
    position: absolute;
    left: 1.875vw;
    bottom: 1.14583vw
  }
  
  .container .wrap .rbox .list .box a.row-2 .st p {
    font-family: var(--main-font);
    line-height: 1.5;
    text-transform: capitalize;
    color: #fff
  }
  
  .container .wrap .rbox .list .box a.row-2:hover .pic2 img {
    transform: scale(1.05)
  }
  
  .container .wrap .rbox .list .box a .pic {
    position: relative;
    border-radius: .625vw;
    overflow: hidden
  }
  
  .container .wrap .rbox .list .box a .pic::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 11.7px;
    background: linear-gradient(0deg, rgba(0, 52, 96, 0.35) 0%, rgba(0, 52, 96, 0) 100%);
    opacity: 0;
    transition: all 600ms
  }
  
  .container .wrap .rbox .list .box a .pic img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 17.70833vw
  }
  
  .container .wrap .rbox .list .box a .text {
    margin-top: 1.25vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.04167vw
  }
  
  .container .wrap .rbox .list .box a .text .lt {
    flex: 1;
    color: #003460;
    line-height: 1;
    text-transform: capitalize
  }
  
  .container .wrap .rbox .list .box a .text .lt .pt {
    font-family: var(--main-font);
    letter-spacing: 0.72px;
    margin-bottom: .375vw
  }
  
  .container .wrap .rbox .list .box a .text .lt .des {
    width: 5.98958vw;
    font-size: .57292vw;
    line-height: 1.1
  }
  
  .container .wrap .rbox .list .box a .text .rc {
    display: flex;
    gap: .15625vw
  }
  
  .container .wrap .rbox .list .box a .text .rc span {
    display: block;
    border: 1px solid #fff;
    width: .57292vw;
    height: .57292vw;
    border-radius: 2.60417vw;
    background: var(--color)
  }
  
  .container .wrap .rbox .list .box a:hover .pic::before {
    opacity: 1
  }
  
  .container .wrap .rbox .more {
    display: none
  }
  
  .container .wrap .rbox .more .load {
    display: flex;
    width: 11.14583vw;
    height: 3.64583vw;
    padding-bottom: .10417vw;
    justify-content: center;
    align-items: center;
    border-radius: 2.08333vw;
    border: 1px solid #003460;
    background: #003460;
    cursor: pointer;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin: 3.38542vw 0 0 14.89583vw;
    transition: all 600ms
  }
  
  .container .wrap .rbox .more .load:hover {
    background: #fff;
    color: #003460;
    border-color: #fff
  }
  
  .container .wrap .rbox .pages .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.04167vw;
    margin-top: 3.38542vw
  }
  
  .container .wrap .rbox .pages .pagination .prev,
  .container .wrap .rbox .pages .pagination .next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.60417vw;
    height: 2.60417vw;
    border-radius: 50%;
    border: 1px solid #003460;
    cursor: pointer;
    transition: all 600ms
  }
  
  .container .wrap .rbox .pages .pagination .prev img,
  .container .wrap .rbox .pages .pagination .next img {
    display: block;
    width: 1.25vw;
    transition: all 600ms
  }
  
  .container .wrap .rbox .pages .pagination .prev img {
    transform: rotate(180deg)
  }
  
  .container .wrap .rbox .pages .pagination .prev:hover,
  .container .wrap .rbox .pages .pagination .next:hover {
    background: #003460
  }
  
  .container .wrap .rbox .pages .pagination .prev:hover img,
  .container .wrap .rbox .pages .pagination .next:hover img {
    filter: brightness(0) invert(1)
  }
  
  .container .wrap .rbox .pages .pagination .prev.disabled,
  .container .wrap .rbox .pages .pagination .next.disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none
  }
  
  .container .wrap .rbox .pages .pagination .nums {
    display: flex;
    align-items: center;
    gap: .52083vw
  }
  
  .container .wrap .rbox .pages .pagination .nums span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.08333vw;
    height: 2.08333vw;
    padding: 0 .41667vw;
    color: rgba(0, 52, 96, 0.5);
    font-weight: 500;
    cursor: pointer;
    border-radius: 2.08333vw;
    transition: all 600ms
  }
  
  .container .wrap .rbox .pages .pagination .nums span.on {
    background: #003460;
    color: #fff
  }
  
  .container .wrap .rbox .pages .pagination .nums span:not(.dot):not(.on):hover {
    color: #003460
  }
  
  .container .wrap .rbox .pages .pagination .nums span.dot {
    min-width: auto;
    padding: 0;
    cursor: default;
    color: rgba(0, 52, 96, 0.5)
  }
  
  @media screen and (max-width: 768px) {
    .banner {
      margin-top: 60px
    }
  
    .banner img {
      height: 200px
    }
  
    .banner .text {
      top: 50%;
      transform: translateY(-50%);
      padding: 0 5%
    }
  
    .banner .text .t {
      font-size: 24px;
      line-height: 1.5;
      margin-bottom: 10px
    }
  
    .container {
      padding: 30px 5%
    }
  
    .container .wrap {
      flex-direction: column;
      gap: 40px
    }
  
    .container .wrap .lbox {
      width: 100%
    }
  
    .container .wrap .lbox .pbox {
      position: static
    }
  
    .container .wrap .lbox .t {
      padding-bottom: 10px;
      font-size: 18px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center
    }
  
    .container .wrap .lbox .t::after {
      content: '';
      display: block;
      width: 20px;
      height: 20px;
      background: url('../images/r.svg') no-repeat center / contain;
      transition: all 600ms;
      flex-shrink: 0
    }
  
    .container .wrap .lbox .t.on::after {
      transform: rotate(90deg)
    }
  
    .container .wrap .lbox .type_wrap {
      display: none;
      margin-top: 20px
    }
  
    .container .wrap .lbox .type_wrap .item:not(:last-child) {
      margin-bottom: 20px
    }
  
    .container .wrap .lbox .type_wrap .item .d1 .lt {
      gap: 10px
    }
  
    .container .wrap .lbox .type_wrap .item .d1 .lt p {
      font-size: 16px
    }
  
    .container .wrap .lbox .type_wrap .item .d1 .lt span {
      width: 6px;
      height: 6px;
      margin-top: 2px
    }
  
    .container .wrap .lbox .type_wrap .item .d1 .icon img {
      width: 20px
    }
  
    .container .wrap .lbox .type_wrap .item .d2 {
      margin: 5px 0 0 15px
    }
  
    .container .wrap .lbox .type_wrap .item .d2 .nr .second_list:not(:last-child) {
      margin-bottom: 5px
    }
  
    .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem .icon img {
      width: 20px
    }
  
    .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem p {
      font-size: 14px;
      line-height: 1.5
    }
  
    .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .oItem p:not(:last-child) {
      margin-bottom: 5px
    }
  
    .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third {
      margin: 5px 0 0 30px
    }
  
    .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third p {
      font-size: 14px
    }
  
    .container .wrap .lbox .type_wrap .item .d2 .nr .second_list .third p:not(:last-child) {
      margin-bottom: 4px
    }
  
    .container .wrap .rbox {
      flex: 1;
      padding-top: 0
    }
  
    .container .wrap .rbox .tags {
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
      padding-bottom: 15px;
      margin-bottom: 20px
    }
  
    .container .wrap .rbox .tags .sort {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 12px;
      width: 100%;
      flex: none;
      min-width: 0
    }
  
    .container .wrap .rbox .tags .items {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      min-width: 0
    }
  
    .container .wrap .rbox .tags .gender_filter {
      width: 100%;
      max-width: 100%;
      margin-left: 0
    }
  
    .container .wrap .rbox .tags .gender_filter .cur {
      padding: 8px 16px;
      border-radius: 24px;
      font-size: 14px
    }
  
    .container .wrap .rbox .tags .gender_filter .cur .arrow,
    .container .wrap .rbox .tags .gender_filter .cur .arrow svg {
      width: 20px;
      height: 20px
    }
  
    .container .wrap .rbox .tags .gender_filter .drop {
      left: 0;
      right: 0;
      width: 100%;
      top: calc(100% + 12px);
      padding: 16px;
      border-radius: 12px;
      gap: 16px
    }
  
    .container .wrap .rbox .tags .gender_filter .drop .opt {
      gap: 16px;
      font-size: 14px
    }
  
    .container .wrap .rbox .tags .gender_filter .drop .opt .box {
      width: 20px;
      height: 20px;
      border-width: 1px;
      border-radius: 4px
    }
  
    .container .wrap .rbox .tags .gender_filter .drop .opt .box .check {
      left: 1px;
      top: 1px;
      width: 16px;
      height: 16px
    }
  
    .container .wrap .rbox .tags .gender_filter .drop .opt .box .check svg {
      width: 16px;
      height: 16px
    }
  
    .container .wrap .rbox .tags .items span {
      padding: 0 6px;
      height: 28px;
      font-size: 13px;
      flex-shrink: 0
    }
  
    .container .wrap .rbox .list .box {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px
    }
  
    .container .wrap .rbox .list .box:not(:last-child) {
      margin-bottom: 20px
    }
  
    .container .wrap .rbox .list .box a.row-2 {
      grid-column: 2 span
    }
  
    .container .wrap .rbox .list .box a.row-2 .pic2 {
      border-radius: 10px
    }
  
    .container .wrap .rbox .list .box a.row-2 .pic2 img {
      height: auto
    }
  
    .container .wrap .rbox .list .box a.row-2 .st {
      left: 20px;
      bottom: 15px
    }
  
    .container .wrap .rbox .list .box a.row-2 .st p {
      font-size: 16px
    }
  
    .container .wrap .rbox .list .box a .pic {
      border-radius: 10px
    }
  
    .container .wrap .rbox .list .box a .pic img {
      height: auto
    }
  
    .container .wrap .rbox .list .box a .text {
      margin-top: 15px;
      gap: 15px
    }
  
    .container .wrap .rbox .list .box a .text .lt .pt {
      font-size: 16px;
      margin-bottom: 5px
    }
  
    .container .wrap .rbox .list .box a .text .lt .des {
      width: 100%;
      font-size: 12px
    }
  
    .container .wrap .rbox .list .box a .text .rc {
      gap: 3px
    }
  
    .container .wrap .rbox .list .box a .text .rc span {
      width: 10px;
      height: 10px
    }
  
    .container .wrap .rbox .more .load {
      width: 160px;
      height: 50px;
      border-radius: 25px;
      margin: 40px auto 0 auto;
      font-size: 14px
    }
  
    .container .wrap .rbox .pages .pagination {
      gap: 12px;
      margin-top: 40px
    }
  
    .container .wrap .rbox .pages .pagination .prev,
    .container .wrap .rbox .pages .pagination .next {
      width: 36px;
      height: 36px
    }
  
    .container .wrap .rbox .pages .pagination .prev img,
    .container .wrap .rbox .pages .pagination .next img {
      width: 16px
    }
  
    .container .wrap .rbox .pages .pagination .nums {
      gap: 8px
    }
  
    .container .wrap .rbox .pages .pagination .nums span {
      min-width: 32px;
      height: 32px;
      padding: 0 8px;
      font-size: 14px;
      border-radius: 16px
    }
  }