@charset "utf-8";

/* 1200px 이하일 때 적용*/
@media (max-width: 1200px) {
    .pc {
        display: none !important;
    }
    .w505 {
        width: 100%;
    }
    /* div:empty {
        padding: 8px 0;
    } */

    .pd-layout100 {
        padding: 10px 8px !important;
    }

    .pd-layout120 {
        padding: 10px 8px !important;
    }

    input::placeholder {
        font-size:var(--f14)
    }

    /* 모바일 일때 스크롤 */
    .mobile-scroll {
        white-space: nowrap;
        border-collapse: collapse;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch !important;
    }
    .mobile-scroll > *{
        width: 1200px;
    }
    .mobile-guide-text {
        display: block;
        color: #231815;
        letter-spacing: -0.64px;
        margin-top: 10px;
        font-size: var(--f16);
    }
    /* 스크롤시 코스소개 테이블 넓이 */
    .mobile-scroll .tbl-course {
        width: 720px;
    }
    .mobile-scroll .privacy-table {
        width: auto;
    }

    /* 공통 레이아웃 */
    .container {
        width: 100%;
        min-width: 320px;
        padding: 75px 16px 110px;
    }

    .common-tab-wrap {
        line-height: 60px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 56px;
    }

    .common-tab-wrap a {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: var(--f16);
        padding: 0 8px;
    }

    .common-tab-wrap a::before {
        bottom: -1px;
    }

    .common-tab-wrap::-webkit-scrollbar {
        height: 0;
    }

    .common-tit {
        margin: 50px 0 40px;
    }

    .common-tit h4 {
        font-size: var(--f14);
    }

    .common-tit h2 {
        font-size: var(--f24);
    }

    .normal-pop {
    }
    .normal-pop-contents {
        max-height: 400px;
        overflow-y: auto;
    }
    .pop-title {
        font-size: var(--f20);
    }
    .pop-guide-layout {
        padding: 30px 16px;
    }
    .pop-table {
        font-size: var(--f14);
    }
    .pop-table th {
        padding: 10px 0;
    }
    .pop-table td {
        padding: 8px 0;
    }

    .title-bar {
        font-size: var(--f20);
        letter-spacing: -1px;
    }
    .title-bar::before {
        width: 20px;
    }

    .btn-pop-wrap {
        gap: 0 10px;
        margin: 16px 0 0;
    }
    .btn-pop-wrap a {
        font-size: var(--f18);
        flex: 1;
    }

    .btn-basic-wrap {
        margin-top: 40px;
    }

    .btn-basic-wrap a {
        font-size: var(--f18);
        line-height: 50px;
    }

    .btn-border a {
        font-size: var(--f18);
    }

    .breadcrumb {
        padding-top: 35px;
    }

    .breadcrumb .dropdown-btn {
        width: 130px;
        font-size: var(--f15);
    }

    /*reservation*/
    .width860 {
        width: 100%;
        padding: 0 16px;
    }

    .reservation-wrap {
        width: 100%;
        background: #fff;
        padding-top: 0;
    }
    .common-area {
        width: 100%;
        padding: 0 16px;
        margin-bottom: 40px;
    }
    .common-area.pd56{
        padding: 0 !important;
    }

    .wait-txt {
        padding: 50px 16px;
    }

    .table-title {
        font-size: var(--f18);
        padding-left: 28px;
        margin-bottom: 8px;
        margin-top: 40px;
    }
    .table-title:before {
        background-size: 24px 24px;
        width: 24px;
        height: 24px;
    }

    .cal-wrap {
        gap: 4px;
        font-size: var(--f20);
    }
    .cal-icon {
        width: 24px;
    }

    .reserv-guide-btn {
        font-size: var(--f14);
        padding: 8px;
    }

    .reservation-swiper-inner {
        margin: 14px 0 16px;
        padding: 16px 0;
    }

    .reservation-swiper .swiper-wrapper button {
        font-size: var(--f12);
        padding: 12px 0;
    }

    .reservation-swiper .swiper-wrapper button span {
        font-size: var(--f18);
        margin: 4px 0;
    }

    .reserv-tab {
        flex-direction: column;
        padding: 24px 16px;
        align-items: flex-start;
    }
    .rsv-time {
        flex: 0 0 auto;
        max-width: 100%;
        margin-top: 16px;
    }

    .rsv-course button {
        font-size: var(--f14);
    }

    .rsv-btn {
        display: none;
    }

    .common-txt {
        font-size: var(--f20);
        margin-bottom: 16px;
    }

    .time-list {
        margin-bottom: 40px;
    }
    .time-list li {
        flex: 0 0 calc(50% - 8px);
        padding: 16px 8px;
    }
    .time-list li p {
        font-size: var(--f13);
    }
    .time-list li h1 {
        font-size: var(--f20);
    }
    .time-list li h2 {
        font-size: var(--f14);
    }
    .time-list li h3 {
        font-size: var(--f13);
    }

    .border-box {
        padding: 16px 8px;
        font-size: var(--f14);
    }
    .border-box.none {
        border: none;
        padding: 0;
    }

    .resev-info-tbl {
        margin-top: 0;
    }
    .border-box .gray {
        display: block;
    }

    .border-box p {
        font-size: var(--f16);
    }

    .wait-btn {
        min-width: 100%;
    }

    .resev-info-tbl select {
        width: 100%;
    }

    .tbl-sty01 {
        font-size: var(--f14);
    }

    .pop-reser-text {
        background-color: #fafafa;
        padding: 20px 16px;
        line-height: 1.5em;
        margin: 16px 0;
    }

    .btn-tbl {
        width: 80%;
    }

    .table-scroll {
        white-space: nowrap;
        border-collapse: collapse;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch !important;
    }
    .table-scroll .tbl-sty01 {
        min-width: 800px;
        table-layout: auto;
    }

    /* 회원가입 - 로그인 */
    .login-wrap {
        padding: 50px 20px;
    }

    .input-login-wrap {
        gap: 20px;
    }

    .check-wrap {
        margin: 20px 0 30px;
    }

    .btn-login {
        margin-bottom: 40px;
        line-height: 50px;
        font-size: var(--f18);
    }

    .result-text span {
        font-size: var(--f28);
    }

    /* 회원가입 - 회원가입*/
    .terms-list li {
        gap: 0 10px;
    }

    .terms-list li h2 {
        width: 55%;
        font-size: var(--f16);
    }

    .terms-list-right a {
        font-size: var(--f14);
    }

    .terms-list li .terms-list-right .check-select .custom-checkbox {
        width: 27px;
        height: 27px;
        background-size: 27px 27px;
    }

    .terms-text {
        padding-top: 30px;
        text-align: center;
    }

    .agree-box {
        font-size: var(--f14);
    }

    .ct-box {
        font-size: var(--f14);
    }

    .member-info-box li .flex-layout .btn{
        font-size: var(--f14);
        padding: 15px 8px;
    }

    /*회원실명확인*/
    .identify-box {
        max-width: 400px;
        flex-direction: column;
        gap: 32px;
        padding: 32px 20px;
    }
    .login-wrap.identify {
        padding: 0;
    }
    .identify-text {
        margin-top: 10px;
    }
    .identify-text p {
        width: 100%;
        margin-bottom: 0;
    }
    .identify-box h1 {
        width: 80px;
        height: 80px;
    }
    .identify-box h1 img {
        width: 50%;
    }

    /* 마이페이지 - 쿠폰 */
    .coupon-summary h1 {
        width: 100px;
        height: 56px;
        background-size: 100px 56px;
        margin-bottom: 15px;
    }

    .nav-buttons .swiper-button-prev {
        left: 6px;
    }

    .nav-buttons .swiper-button-next {
        right: 6px;
    }

    /* 마이페이지 - 회원탈퇴 */
    .border-wrap {
        padding: 40px 18px;
    }
    .withdraw-text {
        margin-top: 32px;
    }
    .withdraw-text li {
        padding-left: 20px;
        font-size: var(--f16);
    }
    .withdraw-text li:before {
        top: 10px;
    }
    .withdraw-input {
        max-width: 100%;
        margin: 0 auto;
    }

    /* 클럽소식 - list */
    .board-list li {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 20px;
    }

    .board-list .date {
        flex-basis: auto;
    }

    /* 클럽소식 - view */
    .board-view-top .title-area {
        flex-direction: column;
    }

    .board-view-top .title-area .title,
    .board-view-top .title-area .date {
        flex-basis: auto;
    }

    .board-view-top .title-area .date {
        text-align: left;
        font-size: var(--f14);
    }

    .board-view-top ul li {
        font-size: var(--f14);
    }

    .board-view-top ul.title-area {
        align-items: stretch;
        gap: 10px;
    }

    .board-view-top ul.file-area li.file::before {
        content: '·';
    }

    /* 클럽소식 - event */
    .event-list-wrap {
        gap: 24px 3.5%;
    }
    .event-list-wrap ul{
        flex-basis: 31%;
    }

    .event-list-wrap h3,
    .event-list-wrap p {
        font-size: var(--f15);
    }

    /* 클럽소식 - 명예의 전당 */
    .honor-list-wrap {
        gap: 24px 2%;
    }
    .honor-list-wrap ul {
        flex-basis: 49%;
    }

    /* 클럽소식 - 고객의소리 */
    .tbl-write th {
        padding: 20px 0;
        text-align: center;
        vertical-align: middle;
        word-break: keep-all;
    }

    .tbl-write td {
        padding: 8px;
    }

    .tbl-write td textarea {
        height: 280px;
    }

    .tbl-write .file-area .file-btn {
        width: 90px;
    }

    .voc-radio-box span {
        flex: 0 0 30%;
    }

    .flex-layout2 .btn {
        padding: 11px 0;
    }

    /* 공통 라운드 탭 */
    .common-round-tab {
        gap: 4px;
        margin-bottom: 40px;
    }
    .common-round-tab li {
        font-size: var(--f16);
        padding: 10px 16px;
    }
    .common-round-tab li .mobile {
        display: none;
    }

    /* 예약안내 */
    .text-list {
        padding: 24px 8px;
    }

    .tbl-sty03 {
        font-size: var(--f14);
    }
    .tbl-sty03.font12 {
        font-size: var(--f12);
    }
    .tbl-sty03 td {
        padding: 10px 2px;
    }
    /* .tbl-sty03 td span {
        display: block;
    } */

    .pd-layout {
        padding: 10px 8px !important;
    }

    .table-text {
        margin-top: 8px;
        font-size: var(--f14);
    }
    .table-text li {
        font-size: var(--f14);
    }
    .table-text li span {
        font-weight: 600;
    }

    .text-list .title {
        font-size: var(--f16);
    }
    .text-list .title:before {
        top: 6px;
    }

    .box-number-list {
        gap: 7px;
    }
    .box-number-list li {
        font-size: var(--f14);
        padding: 11px 17px 11px 48px;
        flex: 1 1 calc(100% / 2 - 7px);
        min-height: 64px;
    }
    .box-number-list li::before {
        width: 32px;
        height: 32px;
        font-size: var(--f16);
        left: 8px;
    }

    .contact-info .img {
        width: 40px;
        height: 40px;
    }

    .contact-info {
        flex-direction: column;
        font-size: var(--f16);
        align-items: flex-start;
        gap: 16px;
    }

    /* 구독형단체팀예약신청 */
    .text-list-wrap {
        flex-direction: column;
    }
    .text-list-wrap .text-list {
        width: 100%;
        font-size: var(--f16);
    }

    .sub-list li {
        padding-left: 20px;
    }
    .sub-list li:before {
        left: 10px;
        top: 10px;
        width: 3px;
        height: 3px;
    }

    .common-sub  {
        font-size: var(--f16);
        margin: 8px 0;
    }

    .download-btn {
        flex-direction: column;
        width: 100%;
    }
    .download-btn a {
        font-size: var(--f16);
        padding: 16px 0;
        margin: 0 15px;
        min-width: auto;
    }

    /* 공통 넘버 리스트 */
    .common-number-list li{
        font-size: var(--f14);
    }

    /* 잔여시간단체팀예약신청 */
    .text-list p {
        font-size: var(--f16);
    }
    .box-number-list-direction {
        width: 100%;
    }
    .box-number-list-direction li {
        padding: 16px 8px 16px 48px;
        font-size: var(--f14);
    }
    .box-number-list-direction h1 {
        font-size: var(--f14);
    }
    .box-number-list-direction li::before {
        width: 32px;
        height: 32px;
        left: 8px;
        font-size: var(--f16);
    }

    /* 코스안내 - 코스소개*/
    .bg-gray.course {
        padding: 32px 8px;
        margin-bottom: 64px;
    }
    .bg-gray.course img {
        width: 100%;
    }
    .c-info {
        align-items: center;
    }
    .c-info li {
        min-width: 280px;
        text-align: center;
        font-size: var(--f16);
        padding: 6px 0;
    }

    .c-title {
        font-size: var(--f16);
        margin: 48px 0 8px;
    }
    .tbl-course {
        font-size: var(--f16);
    }
    .tbl-course td {
        padding: 10px 2px;
    }

    /* 코스안내 - 세종코스 */
    .hole-info-wrap {
        padding: 44px 8px 59px;
    }
    .hole-wrap ul {
        width: 640px;
    }
    .hole-wrap ul li span {
        font-size: var(--f14);
    }

    .hole-info-wrap .text {
        margin-bottom: 32px;
    }
    .hole-info-wrap .info h1 {
        font-size: var(--f14);
    }
    .hole-info-wrap .hole-number {
        margin: 12px 0 16px;
        font-size: var(--f32);
    }
    .hole-info-wrap .hole-number span {
        font-size: var(--f24);
    }
    .hole-info-wrap .text p {
        width: 60%;
        font-size: var(--f13);
    }

    .mobile-scroll > .m-box {
        min-width: 450px;
        width: 450px;
    }
    .hole-info-wrap .text > img {
        width: 100%;
        max-width: 500px;
    }
    .hole-info-wrap .text .side {
        width: 30%;
        top: 50%;
        min-width: 96px;
        max-width: 150px;
    }
    .course-img .swiper-slide img {
        width: 100%;
    }



    /* 클럽정보 - 식음료메뉴안내 */
    .menu-swiper .swiper-wrapper {
        transition: 0.6s !important;
    }
    .menu-swiper .swiper-wrapper .swiper-slide {
        flex-direction: column;
        gap: 16px;
        min-height: 0;
    }
    .menu-swiper .swiper-wrapper .swiper-slide img {
        width: 100%;
    }
    .menu-swiper-nav {
        position: static;
        display: flex;
        justify-content: center;
        margin-top: 24px;
        transform: none;
    }
    .menu-btn-prev,
    .menu-btn-next {
        position: static;
        margin: 0 8px;
    }

    /* 클럽소개 - 클럽개요 */
    .container.wide {
        padding: 75px 0 110px;
    }

    .sub-layout {
        width: calc(100% - 32px);
    }

    .container.wide .common-tab-wrap {
        width: calc(100% - 32px);
        margin: 0 auto 56px;
    }

    .club-title {
        margin-top: 40px;
        padding-bottom: 56px;
    }
    .club-title h1 {
        font-size: var(--f24);
    }
    .club-title h2 {
        margin: 24px 0;
        font-size: var(--f18);
    }
    .club-title p {
        font-size: var(--f14);
        line-height: 1.5em;
    }

    .intro-bg {
        padding-top: 40px;
    }
    .intro-text {
        margin: 37px 0 40px;
    }
    .intro-text h1 {
        font-size: var(--f24);
    }
    .intro-text p {
        font-size: var(--f14);
        margin-top: 32px;
    }

    .tbl-sty04 {
        font-size: var(--f14);
    }
    .tbl-sty04 th {
        color: #666;
    }
    .tbl-sty04 td {
        padding: 10px 8px;
    }
    .tbl-sty04 td span {
        display: block;
    }

    .intro-course-guide {
        margin-top: 64px;
    }
    .intro-course-guide a .text h1 {
        font-size: var(--f32);
    }
    .intro-course-guide a .text p {
        font-size: var(--f16);
    }
    .intro-course-guide a .text p span {
        display: block;
    }

    /* 클럽소개 - ci */
    .ci-layout {
        padding: 40px 16px;
    }
    .ci-text img {
        width: 80%;
        max-height: 150px;
    }
    .ci-title {
        font-size: var(--f18);
    }
    .ci-text h4 {
        margin: 40px 0 32px;
        font-size: var(--f20);
    }
    .ci-text p {
        font-size: var(--f14);
    }
    .ci-text {
        padding: 56px 15px 74px;
    }
    .ci-flex .ci-text {
        padding: 32px 0 59px;
    }

    .ci-flex {
        flex-direction: column;
        gap: 24px;
    }
    .ci-flex .ci-wrap {
        width: 100%;
    }
    .ci-text h5 {
        font-size: var(--f20);
        margin-bottom: 24px;
    }
    .ci-text h5.mb75 {
        margin-bottom: 57px;
    }

    /* 클럽소개 - 이용안내 */
    .guide-list li .img {
        width: 64px;
        height: 64px;
    }
    .guide-list li {
        padding: 32px 8px;
        gap: 16px;
    }
    .guide-list li .text h3 {
        margin-bottom: 8px;
        font-size: var(--f18);
    }
    .guide-list li .text p {
        font-size: var(--f14);
    }

    /* 클럽소개 - 프런트 패스 */
    .box-list {
        flex-direction: column;
        padding: 0;
        gap: 16px;
    }
    .box-list > li {
        width: 100%;
        min-height: 188px;
    }
    .box-list > li p {
        font-size: var(--f16);
    }
    .normal {
        font-size: var(--f14) !important;
    }
    .complete-add {
        gap: 8px;
        flex-wrap: wrap;
        padding: 0 3px;
        justify-content: center;
    }
    .complete-add > li {
        flex: 0 0 calc(50% - 12px);
        padding: 16px 0;
    }
    .complete-add .text {
        letter-spacing: -1.8px;
    }
    .complete-add .complete {
        margin-left: 16px;
        padding: 16px 0;
    }
    .complete-add .text span {
        font-size: var(--f16);
    }
    .complete-add .complete:before {
        left: -18px;
    }
    .seq-sub-list {
        padding: 0 8px;
        margin-top: 8px;
    }
    .seq-sub-list li {
        font-size: var(--f16);
    }

    .text-list .title-big {
        font-size: var(--f18);
        padding: 0 30px 16px;
    }
    .text-list .title-big:before {
        top: 12px;
    }

    /* 클럽소개 - 이용요금 */
    .table-title span {
        font-size: var(--f14);
    }
    .quick-fee span {
        display: inline-block !important;
    }
    .box-list-gray {
        padding: 24px 8px;
        margin: 40px 0;
    }
    .box-list-gray h1 {
        font-size: var(--f16);
    }
    .box-list-gray p {
        font-size: var(--f14);
        margin-top: 16px;
    }
    .line-list li {
        padding: 16px 4px 16px 26px;
        font-size: var(--f14);
    }
    .line-list li:before {
        left: 15px;
        width: 3px;
        height: 3px;
    }

    .club-visual-scroll {
        gap: 8px;
    }

    .club-slider-wrap {
        height: 650px;
    }

    .club-slider-text {
        width: 80%;
        right: 50%;
        top: 50px;
        transform: translateX(50%);
    }

    .club-slider-text h2 {
        font-size: var(--f18);
        letter-spacing: -0.5px;
    }

    .club-slider-text p {
        font-size: var(--f14);
        padding: 15px 0;
    }

    .club-about-wrap {
        position: relative;
        padding: 38px 16px 0;
    }

    .club-about-wrap ul {
        flex-direction: column;
    }

    .club-about-wrap ul li {
        flex: auto;
    }

    .club-about-wrap h2 {
        font-size: var(--f24);
        color: #515151;
        line-height: 1.5em;
    }

    .club-about-wrap p {
        font-size: var(--f16);
        padding: 20px 0 45px;
    }

    .club-about-wrap a {
        font-size: var(--f16);
        width: 190px;
        line-height: 45px;
    }

    .video-club-about {
        min-width: 100%;
        height: 464px;
    }

    .facil-swiper-wrap {
        height: 556px;
        padding-top: 88px;
    }

    .facil-text-box {
        padding: 24px 12px 16px;
        min-height: 103px;
    }

    .facil-text-box h2 {
        font-size: var(--f18);
    }

    .facil-text-box p {
        padding-top: 12px;
        font-size: var(--f14);
    }

    /* 부대시설 - 메뉴 */
    .food-menu-wrap {
        max-width: 100%;
        padding: 0 16px;
    }

    .food-menu-wrap p {
        text-align: center;
        padding-bottom: 15px;
    }

    .tbl-sty02 th {
        font-weight: 600;
        font-size: var(--f16);
        word-break: keep-all;
    }

    .tbl-sty02 td span {
        display: block;
    }

    /* 오시는 길 */
    .sub-map-area {
        margin-bottom: 0;
    }
    .root_daum_roughmap {
        height: 368px;
        margin-top: 40px !important;
    }

    .map-info-wrap {
       padding-top: 0;
    }
    .map-info-wrap h2 {
        font-size: var(--f18);
        padding: 12px 0;
        margin: 32px 0 16px;
    }

    .map-guide {
        flex-wrap: wrap;
        padding: 16px 0;
        flex-direction: column;
        align-items: flex-start;
    }
    .map-guide .info {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        margin-bottom: 8px;
    }

    .map-guide .info li {
        gap: 8px;
        font-size: var(--f14);
    }
    .map-guide .info li p span {
        font-size: var(--f12);
    }

    .map-guide .quick {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: var(--f14);
    }
    .map-guide .quick a {
        gap: 8px;
    }

    .map-list li {
        font-size: var(--f16);
        padding-left: 22px;
    }
    .map-list li:before {
        top: 10px;
        left: 10px;
        width: 3px;
        height: 3px;
    }

    .side-box {
        margin-top: 8px;
    }
    .side-box h3 {
        font-size: var(--f16);
        padding-top: 16px;
    }

    /* 약관 */
    .privacy-guide {
        font-size: var(--f16);
        margin-bottom: 40px;
        padding: 24px 16px;
    }
    .privacy-label {
        width: 100%;
        gap: 2px 16px;
        margin: 24px 0;
    }
    .privacy-label li {
        word-break: keep-all;
    }
    .privacy-label li h3 {
        font-size: var(--f14);
        margin-top: 16px;
    }
    .privacy-label li img {
        width: 48px;
    }

    .list-title {
        margin: 24px 0;
    }

    .privacy-list {
        height: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
        font-size: var(--f14);
        margin: 0;
        max-width: 100%;
    }
    .privacy-list li {
        width: 100%;
        padding-left: 40px;
    }

    .num-list {
        height: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        max-width: 100%;
        font-size: var(--f14);
        padding-bottom: 20px;
    }
    .num-list li {
        width: 100%;
        padding-left: 20px;
    }

    .policy-wrap {
        font-size: var(--f14);
        padding-top: 0;
    }
    .anchor-offset {
        top: -70px;
    }
    .policy-wrap h2 {
        font-size: var(--f16);
        margin: 40px 0 16px;
    }
    .policy-wrap .mt80 {
        margin-top: 40px !important;
    }
    .policy-wrap .box {
        padding: 24px 16px;
    }

    .privacy-table {
        word-break: keep-all;
        font-size: var(--f14);
    }
    .privacy-table td {
        padding: 10px 6px;
    }

    /* 약관 - 영상정보 */
    .privacy-list.line4 {
        height: 100%;
    }

    /* 약관 - 이용약관 */
    .terms-wrap {
        font-size: var(--f14);
    }
    .terms-wrap h1 {
        font-size: var(--f16);
    }
    .terms-wrap h2 {
        margin-top: 25px;
    }
    .inside {
        padding: 0 20px;
    }
}

@media (max-width: 860px) {
    .hole-wrap {
        margin-bottom: 50px;
    }

    .hole-info-wrap {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 600px) {
    /* 클럽소식 - 이벤트*/
    .event-list-wrap {
        gap: 48px;
        padding: 0 32px;
    }
    .event-list-wrap ul{
        flex-basis: 100%;
    }

    /* 클럽소식 - honor */
    .honor-list-wrap {
        gap: 16px;
    }
    .honor-list-wrap ul {
        flex-basis: 100%;
    }
}