@charset "utf-8";
.main-search {padding-block: 20px;}
.main-hero {display: flex; align-items: center; justify-content: center; height: 480px; margin-bottom: 136px; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.main-hero .hero-title,
.main-hero .hero-title strong {font-family: 'YeogiOttaeJalnanGothic'; text-align: center; font-size: 36px; line-height: 52px; color: #fff;}
.main-hero .hero-title strong {color: #FF4D4F;}
.main-hero .hero-filter {display: flex; flex-direction: column; align-items: center; row-gap: 40px; position: absolute; left: 50%; top: 360px; transform: translateX(-50%); width: 100%; max-width: 580px; padding: 30px; border-radius: 30px; background-color: #fff; box-shadow: 0 1px 10px 2px #ADADAD4D;}
.main-hero .hero-filter .filter-label {display: none;}
.main-content {padding-block: 100px;}
.nearby-article .article-head {display: flex; align-items: center; justify-content: space-between;}
.nearby-article .article-head h2 {display: flex; align-items: center; column-gap: 8px; font-size: 17px; font-weight: 500;}
.event-article {margin-block: 100px 60px;}
.event-article .event-card {overflow: hidden; padding: 36px 48px; border-radius: 16px; background-color: #1A1A2E; display: flex; align-items: center; justify-content: center; column-gap: 100px;}
.event-article .event-card .label {background-color: #E5533C; color: #fff; margin-bottom: 16px;}
.event-article .event-card .event-title {font-size: 24px; font-weight: 700; color: #fff;}
.event-article .event-card .event-desc {font-size: 14px; color: rgba(255, 255, 255, 0.65); margin-top: 13px;}
.event-article .event-card .event-button {column-gap: 6px; background-color: #fff; color: #1A1A2E;}
.cs-article {display: flex; align-items: stretch; column-gap: 25px;}
.cs-article > .info-card {flex: 1; padding: 30px 40px; border-radius: 16px; border: 1px solid #F2F2F2;}
.cs-article > .info-card .card-title {font-size: 20px;}
.cs-article > .info-card .square-btn {height: 60px; column-gap: 10px;}
.cs-article .partner-card .card-title {display: flex; align-items: center; column-gap: 10px; margin-bottom: 20px;}
.cs-article .partner-card .card-title img {height: 20px;}
.cs-article .partner-card .txt-wrap {display: flex; flex-direction: column; row-gap: 8px;}
.cs-article .partner-card .txt-wrap .card-label {font-size: 17px; font-weight: 700; color: #1A1A1A;}
.cs-article .partner-card .txt-wrap .card-desc {font-size: 16px; color: #8E8E93;}
.cs-article .partner-card .qa-btn {min-width: 188px; margin-top: 58px; background-color: #FF4D4F; color: #fff;}
.cs-article .customer-card .customer-card-head {display: flex; align-items: center; column-gap: 10px;}
.cs-article .customer-card .customer-card-head .mypage-cs-dot {margin-top: 9px; width: 6px; height: 6px; border-radius: 50%; background-color: #26B24B; flex-shrink: 0;}
.cs-article .customer-card .customer-card-head .mypage-cs-title {display: block; font-size: 16px; font-weight: 700; color: #1A1A1A;}
.cs-article .customer-card .customer-card-head .mypage-cs-desc {margin-top: 2px; font-size: 14px; color: #353535;}
.cs-article .customer-card .customer-box {margin-top: 16px; padding: 8px 10px; border-radius: 6px; background-color: #FAFAFA; display: flex; flex-direction: column; row-gap: 12px;}
.cs-article .customer-card .customer-box .cont-wrap {display: flex; align-items: center; column-gap: 8px;}
.cs-article .customer-card .customer-box .cont-wrap .ico-wrap {width: 26px; height: 26px; border-radius: 5px; background-color: #ccc; display: flex; align-items: center; justify-content: center;}
.cs-article .customer-card .customer-box .cont-wrap p {font-size: 15px; color: #353535;}
.cs-article .customer-card .customer-box .cont-wrap .txt-big {font-size: 20px; font-weight: 600;}
.cs-article .customer-card .btn-wrap {margin-top: 16px; column-gap: 24px; width: 100%;}
.cs-article .customer-card .btn-wrap .square-btn {flex: 1; font-weight: 400;}
.cs-article .customer-card .btn-wrap .call-btn {border: 2px solid #E4E4E4; background-color: #fff;}
.cs-article .customer-card .btn-wrap .call-btn span {color: #000;}
.cs-article .customer-card .btn-wrap .call-btn .mo {display: none;}
.cs-article .customer-card .btn-wrap .kakao-btn {background-color: #FEE500; color: #191919;}


@media (hover: hover) {
    .main-hero .hero-filter .nation-list button:hover .nation-icon {box-shadow: 0 0 0 5px #ADADAD4D;}
    .main-hero .hero-filter .category-list .round-btn:not(.active):hover {border-color: #FF4D4F; color: #FF4D4F;}
}

@media screen and (max-width: 1024px) {
    .cs-article {flex-direction: column; row-gap: 25px;}
    .cs-article .partner-card .qa-btn {margin-top: 16px;}
    .cs-article > .info-card .square-btn,.cs-article .partner-card .qa-btn, .cs-article .customer-card .btn-wrap .square-btn {max-height: 50px; height: 50px;}
}


@media screen and (max-width: 768px) {
    .main-search {border-bottom: 8px solid #F7F7F7;}
    .main-hero {border-bottom: 8px solid #F7F7F7; padding-block: 28px 18px; background-image: unset !important; height: fit-content; margin-bottom: 0;}
    .main-hero .hero-title {display: none;}
    .main-hero .hero-filter {row-gap: 0; padding: 0; position: unset; transform: unset; border-radius: 0; box-shadow: unset;}
    .main-hero .hero-filter .filter-label {text-align: left; width: 100%; display: block; font-size: 13px; color: #888; margin-bottom: 14px;}
    .main-content {padding-block: 30px 130px;}
    .event-article {margin-block: 70px 40px;}
    .event-article .event-card {flex-direction: column; padding: 20px; position: relative; row-gap: 20px;}
    .event-article .event-card::after {z-index: -1; content: ''; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #1A1A2E;}
    .event-article .event-card .event-text {width: 100%;}
    .cs-article > .info-card {padding: 32px 16px;}
    .cs-article > .info-card .square-btn,.cs-article .partner-card .qa-btn, .cs-article .customer-card .btn-wrap .square-btn {max-height: 40px; height: 40px;}
    .cs-article .partner-card .qa-btn,
    .cs-article .customer-card .btn-wrap .square-btn {width: 100%; font-size: 14px;}
    .cs-article .partner-card .qa-btn svg,
    .cs-article .customer-card .btn-wrap .square-btn svg {width: 22px;}
    .cs-article .customer-card .btn-wrap {column-gap: 10px;}
    .cs-article .customer-card .btn-wrap .call-btn .pc {display: none;}
    .cs-article .customer-card .btn-wrap .call-btn .mo {display: inline-block;}
    .event-article .event-card .event-title {font-size: 22px;}
}

@media screen and (max-width: 500px) {
    .main-search {padding-block: 16px;}
    .main-content {padding-block: 16px 100px;}
    .main-hero {padding-block: 20px 16px;}
    .cs-article > .info-card {padding: 24px 14px;}
    .cs-article > .info-card .card-title {font-size: 18px;}
    .cs-article .customer-card .customer-box .cont-wrap p {font-size: 13px;}
    .cs-article .customer-card .customer-box .cont-wrap .txt-big {font-size: 18px; font-weight: 500;}
    .cs-article .partner-card .qa-btn, .cs-article .customer-card .btn-wrap .square-btn {column-gap: 5px; padding-inline: 10px;}
    .event-article .event-card .event-title {font-size: 18px;}
}

@media screen and (max-width: 350px) {
    .cs-article .partner-card .qa-btn, .cs-article .customer-card .btn-wrap .square-btn {font-size: 13px;}
    .cs-article .customer-card .customer-box .cont-wrap .txt-big {font-size: 16px;}
}

@media screen and (max-width: 310px) {
    .cs-article .customer-card .btn-wrap {flex-direction: column; row-gap: 5px;}
    .cs-article .partner-card .qa-btn, .cs-article .customer-card .btn-wrap .square-btn {width: 100%;}
}



/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */