@charset "utf-8";

/* 지은 */
.inner {max-width: 1500px; margin: 0 auto;}

.main-color {color: var(--main);}
.green {color: var(--green);}
.gray {color: var(--text3);}
.flex-end {justify-content: flex-end !important;}

.select { position: relative; cursor: pointer;}
.select select {width: 100%; background-color: var(--btn_bg); cursor: pointer; border: 0; color: var(--text3); padding: 12px 40px 12px 12px; font-size: 16px; border-radius: 5px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; outline: none;appearance: none;}
.select svg {position: absolute; top: 50%; right: 12px; transform: translate(0, -50%) rotate(0deg); transition: transform 0.3s ease; pointer-events: none;}
.select:focus-within svg {transform: translate(0, -50%) rotate(180deg);}

.btn-area {display: flex; justify-content: center; column-gap: 10px;}
.more-btn {display: inline-flex; align-items: center; cursor: pointer; column-gap: 10px; padding: 20px 40px; border: 1px solid var(--main); border-radius: 40px; color: var(--main); font-size: 24px; font-weight: 500;}

.btn-default {background-color: #fff; padding: 20px 0; border: 1px solid var(--main); border-radius: 40px; color: var(--main); font-size: 24px; font-weight: 500; text-align: center;}
.btn-default.bg_green {background-color: var(--main); color: #fff;}

.btn-default-l {width: 100%;}
.btn-default-s {padding: 5px 15px; border-radius: 5px; font-size: 16px; border: 1px solid var(--line); color: var(--text3);}
.btn-default-s:hover {background-color: var(--btn_bg);}
.bg_gray {border: 1px solid var(--btn_bg); background-color: var(--btn_bg); color: var(--text2);}
.btn-more {font-size: 24px; padding: 15px 30px; background-color: var(--ft_bg); color: var(--text2); border-radius: 5px;}

#wrapper_title {padding: 20px 30px; border-bottom: 1px solid var(--line); background-color: #fff;}
#wrapper_title a {width: 100%; display: flex; align-items: center; column-gap: 30px;}
#wrapper_title a svg {flex-shrink: 0;}
#wrapper_title a span { font-size: 32px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-word;}

.sub_wrapper {padding-top: 50px; padding-bottom: 150px;}
.sub_bn {max-width: 1500px; margin: 0 auto;}
.sub_bn .sub_image_area .swiper-wrapper .swiper-slide {height: 49vw;}

/* 반응형 */
@media screen and (max-width: 1500px) {
    .inner,
    .inner-s {padding: 0 24px;}
}
@media screen and (max-width: 1024px) {
    #wrapper_title {padding: 16px 20px;}
    #wrapper_title a {column-gap:10px; }
    #wrapper_title a span {font-size: 24px;}
    #wrapper_title a svg {width: 40px; height: 40px;}
    /* .sub_wrapper {padding-top: 0;} */
    .sub_wrapper .sub_bn {margin-top: -50px;}

    .btn-default{padding: 16px 0; font-size: 20px;}
    .more-btn {padding: 16px 32px; font-size: 20px;}
    .btn-more {font-size: 20px;}

}
@media screen and (max-width: 768px) {
    .inner,
    .inner-s {padding: 0 15px;}
    .sub_wrapper {padding-top: 40px; padding-bottom: 120px;}
    .sub_wrapper .sub_bn {margin-top: -40px;}

    .btn-default {padding: 12px 0; font-size: 18px;}
    .btn-more {font-size: 18px;}
}
@media screen and (max-width: 500px) {
    .sub_wrapper {padding-top: 30px; padding-bottom: 100px;}
    .sub_wrapper .sub_bn {margin-top: -30px;}
    #wrapper_title {padding: 10px 15px;}
    #wrapper_title a {column-gap:5px;}
    #wrapper_title a span {font-size: 16px;}
    #wrapper_title a svg {width: 35px; height: 35px;}

    .btn-default {padding: 10px 0; font-size: 16px;}
    .more-btn {padding: 10px 20px; font-size: 16px;}
    .btn-more {font-size: 16px; padding: 10px 20px;}
}

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

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