@charset "UTF-8";

/* 메인 공통 */
.main_container {
    width: 1440px;
    margin: 0 auto;
}

/* S: section01.main_banner */
.main_banner {
    width: 100%;
    height: calc(100vh - 170px);
    /* height: 544px; */
    position: relative;
    background: url(../img/main/mainBanner01.jpg) no-repeat center / cover;
}
.main_banner_content {
    width: 1440px;
    height: calc(100vh - 170px);
    /* height: 544px; */
    margin: 0 auto;
    background: url(../img/main/main_banner_content_bg.png) right bottom no-repeat;
}
.main_banner_content h2 {
    font-size: 48px;
    padding-top: 80px;
    font-weight: 400;
}
.main_banner_content h2 strong {
    color: #006d57;
    font-weight: 700;
}
.main_banner_content span {
    display: block;
    margin-top: 24px;
    font-size: 24px;
}
.main_banner_content .apply_btn {
    width: 200px;
    height: 56px;
    border-radius: 200px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    -ms-border-radius: 200px;
    -o-border-radius: 200px;
    border: 1px solid #222;
    font-size: 21px;
    background-color: rgba(255, 255, 255, 0.6);
    margin-top: 40px;
}
.main_banner_content .apply_btn::after {
    content: "";
    display: inline-block;
    width: 16px; /* 화살표 크기 */
    height: 16px; /* 화살표 크기 */
    background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"%3E%3Cpath fill="none" stroke="%23333" stroke-width="2" d="M5 12h20M16 5l7 7-7 7" /%3E%3C/svg%3E') no-repeat center center;
    background-size: contain;
    margin-left: 10px; /* 글자와 화살표 간의 간격 */
    transition: transform 0.3s ease; /* 호버 시 화살표 크기 변화 */
}

.main_banner_content .apply_btn:hover::after {
    transform: translateX(7px);
    /*화살표가우측으로살짝이동*/
    -webkit-transform: translateX(7px);
    -moz-transform: translateX(7px);
    -ms-transform: translateX(7px);
    -o-transform: translateX(7px);
}
/* E: section01.main_banner */

/* S: section02.main_board */
.section02 {
    margin: 60px 0;
}
.section02 .container {
    display: flex;
    justify-content: space-between;
    width: 1440px;
    margin: 0 auto;
}
.section02 .leftbox,
.section02 .rightbox {
    width: calc(50% - 50px);
}
.section02 .container .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px var(--btnBlack);
    padding-bottom: 20px;
}
.section02 .container .title h3 {
    font-size: 24px;
    display: flex;
    align-items: center;
}
.section02 .container .title h3 .ico_notice {
    width: 30px;
    height: 27px;
    margin-right: 10px;
    display: inline-block;
    background: no-repeat url(../img/icon/ico_notice.svg) center / contain;
}
.ico_whitePlus {
    width: 12px;
    height: 12px;
    margin-left: 5px;
    display: inline-block;
    background: no-repeat url(../img/icon/ico_whitePlus.svg) center / contain;
}
.boardlist01 {
    min-height: 212px;
}
.boardlist01 li a {
    padding: 20px 15px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.boardlist01 li + li {
    border-top: solid 1px #f4f4f4;
}
.boardlist01 li:last-child {
    border-bottom: solid 1px #ddd;
}
.boardTit.txt_ellipsis.new {
    padding-right: 35px;
}
.boardTit.txt_ellipsis .ico_new {
    position: absolute;
    bottom: 0;
    right: 0;
}
.ico_new {
    width: 30px;
    height: 30px;
    margin-left: 5px;
    display: inline-block;
    background: no-repeat url(../img/icon/ico_new.svg) center / contain;
}
.boardTit {
    position: relative;
    font-weight: 500;
    min-height: 30px;
    line-height: 30px;
}
.txt_ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.boardlist01 li a .date {
    margin-left: 40px;
    flex-shrink: 0;
}
.section02 .container .title h3 .ico_garbageBag {
    width: 30px;
    height: 40px;
    margin-right: 10px;
    display: inline-block;
    background: no-repeat url(../img/icon/ico_garbageBag.svg) center / contain;
}

.info_container {
    font-family: Arial, sans-serif;
    padding: 20px;
}
.info_container h3 {
    font-size: 21px;
    font-weight: bold;
    margin-bottom: 10px;
}

.phone {
    font-size: 21px;
    color: #222;
    font-weight: 700;
}
.phone::before {
    content: "";
    width: 30px;
    height: 27px;
    margin-left: 8px;
    margin-right: 8px;
    display: inline-block;
    position: relative;
    top: 5px;
    background: no-repeat url(../img/icon/ico_phone.svg) center / contain;
}

.purchase_method {
    font-size: 16px;
    font-weight: 700;
}

.delivery_table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.delivery_table th,
.delivery_table td {
    padding: 8px 15px;
    text-align: center;
    border: 1px solid #ddd;
}

.delivery_table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

.delivery_table td {
    font-size: 16px;
}

.delivery_table td[colspan="5"] {
    text-align: left;
    padding-left: 20px;
}

.delivery_table td:nth-child(1) {
    font-weight: bold;
}
.info_list_wrap {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #f4f4f4;
    margin-top: 10px;
}
.info_container {
    border-bottom: 1px solid #ddd;
}
.info_list {
    list-style-type: none; /* 기본 점 스타일 제거 */
    padding-left: 0; /* 왼쪽 여백 제거 */
    margin: 0; /* 기본 여백 제거 */
}

.info_list_item {
    font-size: 16px;
    line-height: 1.6;
}

.info_title {
    font-weight: bold;
    font-size: 16px; /* 제목 크기 설정 */
    margin-top: 10px; /* 항목과의 간격을 위해 위 여백 추가 */
}
/* E: section02.main_board */

/* S: section03.main_mdBannerSlide */
.mainCol_50 {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}
.mainCol_50 .left,
.mainCol_50 .right {
    flex: 1;
    max-width: calc(50% - 16px);
}
.main_boardTab_wrap {
    width: calc(50% - 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
#mainBoardTab.swiper {
    margin: 0;
}
#mainBoardTab.swiper .swiper-slide {
    width: fit-content;
}
.main_board_more i {
    display: block;
    width: 22px;
    height: 22px;
    background: url(../img/icon/ico_plus_black.svg) no-repeat center/contain;
}
.main_boardTab {
    display: flex;
    gap: 0;
}
.main_boardTab button {
    font-size: 24px;
    font-weight: 700;
    color: #888;
    position: relative;
}
.main_boardTab button.active {
    color: var(--black);
}
.main_boardTab li:not(:first-child) button:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #d9d9d9;
    top: 50%;
    left: -18px;
    transform: translateY(-50%);
    position: absolute;
}
.main_boardList {
    padding: 0 32px;
    border-radius: 24px 0 24px 24px;
    overflow: hidden;
    border: solid 1px #dfe0e2;
    position: relative;
    min-height: 346px;
}
.main_boardList li a {
    padding: 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.main_boardList li a .title {
    font-size: 18px;
    font-weight: 500;
}
.main_boardList li a:hover .title {
    font-weight: 700;
    text-decoration: underline;
}
.main_boardList li a .date {
    font-size: 16px;
    font-weight: 400;
    color: var(--dgray);
    flex-shrink: 0;
}
.main_boardList li a:hover .date {
    font-weight: 600;
}
.main_boardList li:not(:first-child) a {
    border-top: solid 1px var(--bg01);
}
.main_board .mainCol_50 .right {
    display: flex;
}
.main_mdList {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}
.main_mdList li {
    width: 100%;
}
.main_boardList li .no_data {
    min-height: 340px;
    line-height: 340px;
}
.main_mdList li a {
    height: 100%;
    padding: 32px;
    border: solid 1px #fff;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    transition: 0.2s;
}
.main_mdList li:first-child a {
    background-color: #f3f9ff;
}
.main_mdList li:first-child a:hover {
    border-color: #b1d6ff;
}
.main_mdList li:last-child a {
    background-color: #f9f6ff;
}
.main_mdList li:last-child a:hover {
    border-color: #dad4e7;
}
.main_mdList li a .txtbox .title {
    font-size: 24px;
    font-weight: 600;
}
.main_mdList li a .txtbox .txt {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.5;
}
.main_mdList li a .imgbox {
    width: 66px;
    flex-shrink: 0;
    display: flex;
    height: 100%;
    align-items: flex-end;
}
.main_mdList li:nth-child(2) a .imgbox {
    width: 85px;
}
/* E: section03.main_board */

/* S: section04.main_partnerSlide */
.main_partnerSlide {
    padding: 32px 0;
    border-top: solid 1px var(--bg01);
}
.mainPartnerWrap {
    padding-left: 160px;
    position: relative;
}
.mainPartnerLogo .mainPartnerLogoList {
    height: 60px;
}
.mainPartnerLogoList li {
    width: fit-content;
}
.mainPartnerLogo li a,
.mainPartnerLogo li img {
    height: 100%;
}
.mainPartnerLogo {
    flex: 1;
}
.mainPartnerLogo .logoNm {
    font-size: 0;
    display: none;
}
.mainPartnerWrap .swiperCtrlbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.mainPartnerWrap .swiperCtrlbox button {
    margin: 0;
    left: 0;
    font-size: 0;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: solid 1px #e4e4e4;
    background-color: #fff;
    position: relative;
    transition: 0.2s;
}
.mainPartnerWrap .swiperCtrlbox > button:hover {
    background-color: var(--main01);
    border-color: var(--main01);
}
.mainPartnerWrap .swiperCtrlbox > button:after {
    content: "";
    display: block;
    width: 10px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-mask: url(../img/icon/ico_slideArr.svg) no-repeat center / contain;
    mask: url(../img/icon/ico_slideArr.svg) no-repeat center / contain;
    background-color: #2d2d2d;
    transition: 0.2s;
}
.mainPartnerWrap .swiperCtrlbox button:hover:after {
    background-color: #fff;
}
.mainPartnerWrap .swiper-button-next:after,
.mainPartnerWrap .swiper-rtl .swiper-button-prev:after {
    transform: rotate(180deg);
}
.mainPartnerWrap .swiperCtrlbox {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.mainPartnerWrap .swiper_ctrl button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
}
.mainPartnerWrap .swiper_ctrl button:after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #2d2d2d;
    transition: 0.2s;
}
.mainPartnerWrap .swiper_ctrl .start:after {
    -webkit-mask: url(../img/main/ico_mbStart.svg) no-repeat center / contain;
    mask: url(../img/main/ico_mbStart.svg) no-repeat center / contain;
}
.mainPartnerWrap .swiper_ctrl .stop:after {
    -webkit-mask: url(../img/main/ico_mbStop.svg) no-repeat center / contain;
    mask: url(../img/main/ico_mbStop.svg) no-repeat center / contain;
}
.mainPartnerWrap .swiper_ctrl button:hover {
    border-color: var(--main02);
    background-color: var(--main02);
}
.mainPartnerWrap .swiper_ctrl .start:hover:after,
.mainPartnerWrap .swiper_ctrl .stop:hover:after {
    background-color: #fff;
}
/* E: section04.main_partnerSlide */

/******************************* res *****************************/

@media screen and (max-width: 1280px) {
    .mainBanner .swiperCtrlbox {
        bottom: 20px;
    }
    .mainDrctList {
        padding: 20px 40px;
        justify-content: initial;
        flex-wrap: wrap;
        gap: 40px 0;
    }
    .mainDrctList li {
        width: 25%;
        text-align: center;
    }
    .mainDrctList .inbox .tit {
        margin-top: 16px;
        font-size: 16px;
    }
}
@media screen and (max-width: 1024px) {
    .mainBanner .swiperArr button {
        width: 44px;
        height: 44px;
        top: 56%;
    }
    .mainBanner .swiperArr button:after {
        width: 10px;
        height: 16px;
    }
    .mainBanner .swiper-button-prev {
        left: 20px;
    }
    .mainBanner .swiper-button-next {
        right: 20px;
    }
    .mainBanner .swiper-pagination-bullets.swiper-pagination-horizontal {
        padding: 12px;
    }
    .mainBanner .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }
    .mainBanner .swiper-pagination-bullet-active {
        width: 16px;
    }
    .mainBanner .swiper_ctrl button {
        width: 32px;
        height: 32px;
    }
    .mainBanner .swiper_ctrl button:after {
        width: 20px;
        height: 20px;
    }
    .mainCol_50 {
        gap: 16px;
    }
    .mainCol_50 .left,
    .mainCol_50 .right {
        max-width: calc(50% - 10px);
    }
    .main_boardTab button {
        font-size: 20px;
    }
    .main_boardList {
        padding: 0 20px;
        min-height: auto;
    }
    .main_boardList li a {
        padding: 20px 0;
        gap: 16px;
    }
    .main_boardList li a .title {
        font-size: 16px;
    }
    .main_boardList li a .date {
        font-size: 14px;
    }
    .main_mdList {
        gap: 16px;
    }
    .main_mdList li a {
        padding: 20px;
        gap: 20px;
    }
    .main_mdList li a .txtbox .title {
        font-size: 18px;
        font-weight: 600;
    }
    .main_mdList li a .txtbox .txt {
        margin-top: 10px;
        font-size: 16px;
    }
    .main_mdList li a .imgbox {
        width: 40px;
    }
    .main_mdList li:nth-child(2) a .imgbox {
        width: 54px;
    }
}
@media screen and (max-width: 900px) {
    .main_boardTab_wrap {
        width: 100%;
    }
    .mainCol_50 {
        flex-wrap: wrap;
    }
    .mainCol_50 .left,
    .mainCol_50 .right {
        width: 100%;
        max-width: 100%;
        flex: none;
    }
    .main_mdList li {
        width: calc(50% - 10px);
    }
}
@media screen and (max-width: 768px) {
    .main_partnerSlide {
        padding: 0;
    }
}
@media screen and (max-width: 600px) {
    .main_boardTab li:not(:first-child) button:before {
        left: -13px;
    }
    .mainBannerList li .ratioWrap {
        padding-bottom: 122.09%;
    }
    .main_mdList li {
        width: 100%;
    }
    .main_boardTab button {
        font-size: 18px;
    }
    .main_boardList li a {
        flex-wrap: wrap;
        gap: 8px;
    }
    .main_boardList li a .title {
        width: 100%;
    }
    .mainDrctList {
        padding: 0;
        background-color: transparent;
        gap: 16px;
        align-items: normal;
    }
    .mainDrctList li {
        padding: 20px;
        width: calc(50% - 8px);
        background-color: #fef9ec;
        border-radius: 16px;
    }
    .mainDrctList .inbox {
        max-width: 100px;
        text-align: center;
    }
    .mainDrctList .inbox .imgbox {
        width: 54px;
        margin: 0 auto;
    }
    .mainDrctList .inbox .tit {
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.3;
    }
    .mainPartnerWrap {
        padding-left: 0;
        padding-bottom: 60px;
    }
    .mainPartnerLogo .mainPartnerLogoList {
        height: 40px;
    }
    .mainPartnerWrap .swiperCtrlbox {
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
    }
}
@media screen and (max-width: 430px) {
    .mainBanner .swiper-button-prev {
        left: 10px;
    }
    .mainBanner .swiper-button-next {
        right: 10px;
    }
}
@media screen and (max-width: 359px) {
}