@charset "UTF-8";

/* KSY 231204 */
:root {
    --color-accent: #00C6BC;
    --color-accent1: #40AAFB;
    --color-accent2: #0b83F1;
    --color-accent3: #0E2D74;
    --color-accent4: #794AFF;
    --color-red: #E73A3A;
    --color-gray-E: #eef8ff;
    --color-gray-F: #f6f7f9;
    --color-gray-D: #dedede;
    --color-gray-B: #bbc1d1;
    --color-gray-9: #99a0b1;
    --color-gray-7: #727272;
    --color-gray-2: #2f2f2f;
    --ff-default: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, helvetica, sans-serif;
}

.color_a0 {
    color: var(--color-accent);
}

.color_a1 {
    color: var(--color-accent1);
}

.color_a2 {
    color: var(--color-accent2);
}

.color_a3 {
    color: var(--color-accent3);
}

.color_a4 {
    color: var(--color-accent4);
}

.color_r {
    color: var(--color-red);
}

.color_Ge {
    color: var(--color-gray-E);
}

.color_Gf {
    color: var(--color-gray-F);
}

.color_Gd {
    color: var(--color-gray-D);
}

.color_Gb {
    color: var(--color-gray-B);
}

.color_G9 {
    color: var(--color-gray-9);
}

.color_G7 {
    color: var(--color-gray-7);
}

.color_G2 {
    color: var(--color-gray-2);
}

@media screen and (min-width: 2560px) {
    /* 2560 이상 부터 일때 적용 */
}

@media screen and (max-width: 992px) {}

html {
    -webkit-text-size-adjust: 100%;
}

body {}

html,
body {
    width: 100%;
    min-width: 340px;
    height: 100%;
    font-family: 'Pretendard', 'Noto Sans KR', system-ui, -apple-system, helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.gnb_st_top {
    margin-top: calc(102px + 80px) !important;
}

.fixed~.gnb_st_top {
    /* 이거 사용할 까 말까.. 고민 */
    margin-top: calc(85px + 80px) !important;
}

.h2_title {
    margin-bottom: 30px;
}

@media (max-width:540px) {
    .h2_title {
        margin-bottom: 15px;
    }
}
@media (max-width:460px) {
    .gnb_st_top {
        margin-top: calc(102px + 30px) !important;
    }
}
.ani-06,
.ani-06 div,
.ani-06 ul,
.ani-06 li,
.ani-06 dl,
.ani-06 dt,
.ani-06 dd,
.ani-06 input,
.ani-06 p,
.ani-06 img,
.ani-06 span,
.ani-06 a,
.ani-06 button,
.ani-06 img {
    transition: all 0.6s;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
}

.ani-03,
.ani-03 div,
.ani-03 ul,
.ani-03 li,
.ani-03 dl,
.ani-03 dt,
.ani-03 dd,
.ani-03 input,
.ani-03 p,
.ani-03 img,
.ani-03 span,
.ani-03 a,
.ani-03 button,
.ani-03 img {
    transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
}

.ani-00,
.ani-00 div,
.ani-00 ul,
.ani-00 li,
.ani-00 dl,
.ani-00 dt,
.ani-00 dd,
.ani-00 input,
.ani-00 p,
.ani-00 img,
.ani-00 span,
.ani-00 a,
.ani-00 button,
.ani-00 img {
    transition: all 0s;
    -moz-transition: all 0s;
    -webkit-transition: all 0s;
    -o-transition: all 0s;
}

.sp_10 {
    display: inline-block;
    width: 100%;
    padding: 5px 0;
}

.sp_15 {
    display: inline-block;
    width: 100%;
    padding: 7.5px 0;
}

.sp_30 {
    display: inline-block;
    width: 100%;
    padding: 15px 0;
}

.sp_40 {
    display: inline-block;
    width: 100%;
    padding: 20px 0;
}

.sp_60 {
    display: inline-block;
    width: 100%;
    padding: 30px 0;
}

.mt05 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mb05 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.h2-title {
    padding-bottom: 35px;
    border-bottom: 1px solid var(--color-gray-D);
}

.h3-title {
    padding-bottom: 20px;
}

.min-Default-title {
    display: flex;
    justify-content: start;
    align-items: center;
}

.min-Default-title>span {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 7px;
    background: var(--color-accent2);
}

.btn-Default-style1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    background: var(--color-accent);
}

.btn-Default-style1>span {
    margin-right: 15px;
}

.btn-Default-style1>span>img {
    width: 18px;
}

.btn-Default-style1>span>img.w1 {
    width: 24px;
}

.btn-Default-style1:hover {
    background: var(--color-accent2);
}

.btn-list {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    height: 50px;
    width: 100%;
    max-width: 160px;
    font-weight: 700;
    color: var(--color-accent2);
    border: 1px solid var(--color-accent2);
}

.btn-list_BG {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    height: 50px;
    width: 100%;
    max-width: 160px;
    font-weight: 700;
    color: #fff;
    background: var(--color-accent2);
    border: 1px solid var(--color-accent2);
}

.btn-list_BG_r5 {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: 50px;
    width: 100%;
    max-width: 160px;
    font-weight: 700;
    color: #fff;
    background: var(--color-accent2);
    border: 1px solid var(--color-accent2);
}

.btn-w100 {
    max-width: 100%;
}

.btn-write {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    height: 50px;
    width: 100%;
    max-width: 160px;
    font-weight: 700;
    color: #fff;
    border: 1px solid var(--color-accent2);
    background: var(--color-accent2);
}

input.input-file {
    max-height: 43px;
}

/* 체크 박스 디자인  [ 카테고리 체크 박스 ]  */
.sub_container-checkbox {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
}
@media (max-width:460px ) {
    .sub_container-checkbox {
    gap: 3px;
    }
}
.category-Default_CSS {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.category-Default_CSS input[type="checkbox"] {
    display: none;
    appearance: none;
    -webkit-appearance: none;
}

.category-Default_CSS input[type="checkbox"]:checked {}

.category-Default_CSS input[type="checkbox"]:checked::after {}

.category-Default_CSS span {
    position: relative;
    padding: 10px 30px 10px 30px;
    border-radius: 35px;
    color: var(--color-gray-9);
    border: 1px solid var(--color-gray-B);
}

.category-Default_CSS input[type="checkbox"]:checked~span,
.category-Default_CSS.index:hover span {
    padding: 10px 20px 10px 40px;
    color: #fff;
    background: var(--color-accent2) url('../images/category-checkbox-icon.svg') no-repeat 15px 50%;
    background-size: auto 11px;
    border: 1px solid var(--color-accent2);
}

.sub_container-tap {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
}

.sub_container-tap>a {
    position: relative;
    padding: 10px 30px 10px 30px;
    border-radius: 35px;
    color: var(--color-gray-9);
    border: 1px solid var(--color-gray-B);
}

.sub_container-tap>a:hover {
    padding: 10px 20px 10px 40px;
    color: #fff;
    background: var(--color-accent) url(../images/category-checkbox-icon.svg) no-repeat 15px 50%;
    background-size: auto 11px;
    border: 1px solid var(--color-accent);
}

.sub_container-tap>a.on {
    padding: 10px 20px 10px 40px;
    color: #fff;
    background: var(--color-accent2) url(../images/category-checkbox-icon.svg) no-repeat 15px 50%;
    background-size: auto 11px;
    border: 1px solid var(--color-accent2);
}

/* 체크 박스 디자인  [ 키워드 체크 박스 ]  */
.key-Default_CSS {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.key-Default_CSS input[type="checkbox"] {
    display: none;
    appearance: none;
    -webkit-appearance: none;
}

.key-Default_CSS input[type="checkbox"]:checked {}

.key-Default_CSS input[type="checkbox"]:checked::after {}

.key-Default_CSS span {
    position: relative;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 300;
    color: var(--color-accent1);
    border: 1px solid var(--color-accent1);
    background: #fff;
}

.key-Default_CSS input[type="checkbox"]:checked~span {
    color: #fff;
    background: var(--color-accent1);
    border: 1px solid var(--color-accent1);
}

/* input 디자인 작업  [  ]  */
input.icon-search {
    background-image: url('../images/icon_003.svg');
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: auto 20px;
}

/*
input.icon-map {
    background-image: url('../images/icon_002.svg.svg');
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: auto 20px;
}
*/

.icon-map {
    background-image: url('../images/icon_002.svg');
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: auto 20px;
}

.input-Default_CSS {
    width: 100%;
    height: 42px;
    border-radius: 4px;
    text-indent: 38px;
    background: #fff;
    border: 1px solid var(--color-gray-B);
}

.select-Default_CSS {
    position: relative;
    width: 100%;
    height: 42px;
    border-radius: 4px;
    text-indent: 38px;

    border: 1px solid var(--color-gray-B);

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input::placeholder {
    color: var(--color-gray-9);
}

select {
    color: var(--color-gray-9);
}

select option {
    color: #000
}

select:invalid {
    color: #000
}

/* 안내문구 placeholder처럼 흐릿하게 */
select:valid {
    color: #000
}

/* 실제 선택했을 때 텍스트 진하게 */
/*

    background-image: url('../images/icon_002.svg.svg');
    background-position: 10px 50%;
    background-repeat: no-repeat;
    background-size: auto 20px;
*/

.text-min-he160 {
    min-height: 160px;
}

/* 텝 디자인 구조 */
.tab-container {}

.tabs {
    position: relative;
    display: flex;
    border-bottom: 1px solid var(--color-gray-B);
}

.tab {
    flex: 1;
    padding: 15px 0px;
    text-align: center;
    cursor: pointer;
    color: var(--color-gray-B);
    transition: background 0.3s;
}

.tab.active {
    color: var(--color-accent3);
    border-bottom: 1px solid var(--color-accent3);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}



@media screen and (max-width: 720px) {

    .category-Default_CSS span,
    .sub_container-tap>a {
        padding: 3px 20px 3px 20px;
    }

    .category-Default_CSS input[type="checkbox"]:checked~span,
    .sub_container-tap>a:hover,
    .sub_container-tap>a.on {
        padding: 3px 10px 3px 30px;
    }

    .category-Default_CSS input[type="checkbox"]:checked~span,
    .sub_container-tap>a:hover,
    .sub_container-tap>a.on {
        background-position: 9px 50%;
    }

    .sp_10 {
        display: inline-block;
        width: 100%;
        padding: 4px 0;
    }

    .sp_15 {
        display: inline-block;
        width: 100%;
        padding: 5px 0;
    }

    .sp_30 {
        display: inline-block;
        width: 100%;
        padding: 10px 0;
    }

    .sp_40 {
        display: inline-block;
        width: 100%;
        padding: 14px 0;
    }

    .sp_60 {
        display: inline-block;
        width: 100%;
        padding: 20px 0;
    }
}