:root {
    --depth3_height: 60px;
}

.sv {position: relative; z-index: 10;}
.sv .banner {height: 350px; position: relative; overflow: hidden;}
.sv .banner .sv_bg {height: 100%; overflow: hidden; position: relative; filter: brightness(0.7);}
.sv .banner .sv_bg img {max-width: none; position: absolute; left: 50%; top: 0%; transform: translateX(-50%);}

.sv .banner .onTxt {position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sv .banner .onTxt .wrap {display: flex; align-items: center; height: 100%;}
.sv .banner .onTxt .wrap .p_title {position: relative; color: #fff; font-size: 80px; letter-spacing: -0.025em; font-weight: bold; padding-right: calc(20/80*1em);}
.sv .banner .onTxt .wrap .p_title span {font-family: 'Noto Sans SC';}
.sv .banner .onTxt .wrap .p_title::after {content: attr(dscrp); white-space: nowrap; position: absolute; left: 100%; bottom: 0; font-size: 20px; letter-spacing: -0.025em; font-weight: bold; color: #fff;}

.sv .banner .blendTxt {position: absolute; left: 50%; bottom: -6%; font-size: 136px; /*bottom: -15%;*/ /*font-size: 150px;*/ letter-spacing: -0.05em; font-weight: 500; font-family: 'Geologica'; white-space: nowrap; transform:  translateX(-50%); color: #fff; mix-blend-mode: soft-light;}

.sv .depth03 { background: #fff; width: 100%; height: var(--depth3_height); border-bottom: 1px solid #eee;}
.sv .curntPage {display: none; align-items: center; justify-content: center; width: 100%; height: var(--depth3_height); cursor: pointer; font-size: 18px; color: #ff4393; font-weight: 500; letter-spacing: -0.025em;}
.sv .depth03 ul {display: flex; justify-content: center; height: 100%;}
.sv .depth03 ul li {position: relative;}
.sv .depth03 ul li.act::after {content: ''; display: block; width: 100%; height: 3px; background: #fe6600; /*background: #9920F6;;*/ position: absolute; left: 50%; top: 100%; transform: translate(-50%, -50%);}
.sv .depth03 ul li a {display: flex; align-items: center; justify-content: center; padding: 0 calc(35/18*1em); height: 100%; font-size: 18px; letter-spacing: -0.025em; color: #000; transition: color .4s; white-space: nowrap;}
.sv .depth03 ul li a span {font-family: "굴림", Gulim, Arial, sans-serif;}
.sv .depth03 ul li.act a,
/* .sv .depth03 ul li:hover a{color: #9920F6;} */
.sv .depth03 ul li:hover a{color: #fe6600;}

@media screen and (max-width: 1280px) {
    .sv .depth03 ul li a {padding: 0 calc(30/18*1em);}
}
@media screen and (max-width: 1024px) {
    .sv .depth03 ul li a {font-size: 16px;padding: 0 calc(25/18*1em);}
}
@media screen and (max-width: 820px) {
    :root {
        --depth3_height: 40px;
        --depth3_gap: 15px;
    }

    .sv .banner .onTxt .wrap .p_title {font-size: 65px;}
    .sv .banner .onTxt .wrap .p_title::after {font-size: 18px;}

    .sv .depth03 {width: 95%; max-width: 400px; border-radius: 15px; border: 1px solid #ff4393; margin: 0 auto; margin-top: var(--depth3_gap); height: auto; overflow: hidden; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); background: #ffffffcc;}
    .sv .curntPage {display: flex;}
    .sv .depth03 ul {display: none;  border-top: 1px solid #eee; background: #ffffff7e;}
    .sv .depth03 ul li {height: var(--depth3_height);}
    .sv .depth03 ul li+li {border-top: 1px solid #eeeeee6b;}

    .sv {margin-bottom: calc(var(--depth3_height) + var(--depth3_gap) * 2);}
}
@media screen and (max-width: 500px) {
    :root {
        --depth3_height: 35px;
        --depth3_gap: 10px;
    }
    .sv .banner {height: 250px;;}
    .sv .banner .sv_bg img {width: 1024px;}
    .sv .banner .onTxt .wrap .p_title {font-size: 38px;}
    .sv .banner .onTxt .wrap .p_title::after {font-size: 14px; top: 100%; bottom: auto; left: 0; margin-top: 10px;}
    .sv .banner .blendTxt {font-size: 100px; bottom: -10%;}
}