@charset "utf-8";

* {transition: all 0.3s; box-sizing: border-box;}
body {font-family: "Pretendard", sans-serif; font-weight: 400; overflow-x: hidden; color: #000;}
a:active, a:hover, a:focus {text-decoration: none;}

/* swiper 초기화 */
.swiper-button-prev, .swiper-button-next {position: static; margin-top: 0; color: transparent; width: auto; height: auto;}
.swiper-button-next:after,.swiper-button-prev:after {display: none;}

/* header */
header .header_mo, header .nav_wrap_mo {display: none;}

header {position: absolute; top: 0; left: 0; width: 100%; padding-top: 2rem; z-index: 1;}
header .in_header {display: flex; justify-content: space-between; padding: 0 2.4rem;}

.nav_wrap {position: absolute; top: 10rem; left: 2.7rem;}
.nav_wrap nav>ul>li:not(:last-child) {margin-bottom: 1.3rem;}
.nav_wrap nav>ul>li>a {font-size: 2rem; font-weight: 400; color: #fff; letter-spacing: -0.025rem;}
.nav_wrap.tab {display: none;}

header .header_mo {width: 100%;}
header .header_mo .logo {display: block; width: 10.3rem; height: 2.8rem; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/logo_mo.png'); background-repeat: no-repeat; background-size: 100%;}
header .header_mo button {font-size: 0;}
header .header_mo .right_btn {display: flex; align-items: center; gap: 2rem;}
header .header_mo .srch_btn {font-size: 0; width: 2.1rem; height: 2.1rem; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/mo_srch_btn.png'); background-repeat: no-repeat; background-size: 100%;}
header .header_mo .mo_menu {width: 2.2rem; height: 1.8rem; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/mo_menu_btn.png'); background-repeat: no-repeat; background-size: 100%;}
header .header_mo .right_btn .mo_menu_close {display: none; width: 1.8rem; height: 1.8rem; background: url('/humanframe/theme/digitalgoods/assets/img/main/mo_menu_close.png') no-repeat; background-size: 100%;}

header .hd_logo {display: block; font-family: "Busan", sans-serif; font-weight: 700; font-size: 3.7rem; color: #fff; margin-top: 1rem;}
header .logo_pc {width: 13.8rem;}

header.on .header_mo .logo,
header.active .header_mo .logo {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/logo_mo_on.png');}
header.on .header_mo .right_btn .srch_btn,
header.on .header_mo .right_btn .mo_menu {display: none;}
header.on .header_mo .right_btn .mo_menu_close {display: block;}
/* header.on .hd_logo {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/hd_logo_on.png');} */

header.active .header_mo .right_btn .srch_btn {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/mo_srch_btn_on.png');}
header.active .header_mo .right_btn .mo_menu {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/mo_menu_btn_on.png');}


/* ------------------------------ */
/* 서브페이지 헤더 */
/* ------------------------------ */
#subHd {background: #fff; height: 10rem; padding: 0; border-bottom: 1px solid #dddddd;}
#subHd .in_header {width: 160rem; height: 100%; padding: 0; margin: 0 auto;}
#subHd .nav_wrap_mo {display: block; position: absolute; left: 50%; transform: translateX(-50%);}
#subHd .header_mo {display: flex; align-items: center; justify-content: space-between;}
#subHd .header_mo .logo {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/sub_logo.png'); width: 12.8rem; height: 3.7rem;}
#subHd .nav_wrap_mo .mo_nav>ul {display: flex; gap: 6rem;}
#subHd .nav_wrap_mo .mo_nav>ul>li>a {font-family: "Busan", sans-serif; font-weight: 500; font-size: 2.2rem; font-weight: 500; color: #222222;}
#subHd .nav_wrap_mo .mo_nav>ul>li.on>a,
#subHd .nav_wrap_mo .mo_nav>ul>li>a:hover {text-decoration: underline;}
#subHd .nav_wrap_mo .mo_nav>ul .depth2 {opacity: 0; visibility: hidden; height: 0;}
#subHd .header_mo .srch_btn {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/mo_srch_btn_on.png');}
#subHd .header_mo .mo_menu {display: none; background-image: url('/humanframe/theme/digitalgoods/assets/img/main/mo_menu_btn_on.png');}

/* ------------------------------ */
/* 상세검색 레이아웃 */
/* ------------------------------ */
#mainHd #srchWrap {margin-top: 4rem;}
.srch_box {position: relative;}
.input_wrap {display: flex; gap: 1rem;}
.input_box {position: relative;}
.input_box input {width: 48rem; height: 5.6rem; border: none; border-radius: 2.8rem; background: #fff; font-size: 2rem; color: #222; padding: 0 0 0 2.5rem;}
.input_box input::placeholder {color: #888888;}
.input_box .src_btn {position: absolute; top: 0; right: -1px; width: 5.6rem; height: 5.6rem; border-radius: 50%; background: url('/humanframe/theme/digitalgoods/assets/img/main/main_srch_icon.png') no-repeat; background-size: 100%; font-size: 0;}
.detail_btn {width: 12rem; height: 5.6rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(to right, #00c0fa, #015eea); font-size: 1.8rem; color: #fff; font-weight: 500; border-radius: 2.8rem;}
.detail_btn:hover {opacity: 0.9;}

.detail_wrap {opacity: 0; visibility: hidden; position: absolute; top: calc(100% + 1.4rem); left: 50%; transform: translateX(-50%); width: 109rem; padding: 4rem 3.4rem 2.5rem 4rem; border-radius: 2rem; background: #fff; box-shadow: 0.3rem 0 1.2rem rgba(0,0,0,0.25); z-index: 1;}
.detail_wrap.on {opacity: 1; visibility: visible;}
.detail_close {position: absolute; top: 2rem; right: 2rem; width: 2rem; height: 2rem; background: url('/humanframe/theme/digitalgoods/assets/img/main/detail_close.png') no-repeat; background-size: 100%; font-size: 0;}
.detail_box {margin-bottom: 2.5rem;}
.detail_srch {display: flex; align-items: center; gap: 6.4rem; padding-bottom: 1.7rem; margin-bottom: 1.7rem; border-bottom: 1px solid #e5e5e5;}
#digitalgoodForm .detail_srch{
    gap:0;
}
.detail_srch .category {flex-shrink: 0; font-size: 2.2rem; font-weight: 700; color: #222222; min-width: 9.6rem;}
.detail_srch .filter {display: flex; flex-wrap: wrap; gap: 1rem; flex:1 1 0; width:100%;}
#digitalgoodForm .detail_srch .category{
    width:20rem; min-width: inherit;
}
.detail_srch .filter label {display: flex; align-items: center; padding: 0 1.4rem; height: 4rem; border-radius: 2rem; border: 1px solid #dddddd; background: #fff; font-size: 2rem; color: #222222;}
.detail_srch .filter input:checked + label {border-color: #016fed; color: #016fed;}
.filter input[type="checkbox"]:focus-visible + label {outline: 1px solid #000;}

.detail_srch .filter li button {padding: 0 1.4rem; height: 4rem; border-radius: 2rem; border: 1px solid #dddddd; font-size: 1.8rem; color: #222222;}
.detail_srch .filter li.on button,
.detail_srch .filter li button:hover {border-color: #016fed; color: #016fed;}
.reset_btn {display: block; margin: 0 auto; width: 12.6rem; height: 5rem; padding: 0 5.2rem 0 2.7rem; text-align: center; border-radius: 2.5rem; border: 1px solid #dddddd; background: #fff;}
.reset_btn span {display: block; width: max-content; font-size: 2rem; color: #222222; padding-right: 2.1rem; box-sizing: border-box; background: url('/humanframe/theme/digitalgoods/assets/img/main/reset_icon.png') top 0.7rem right no-repeat;}

@media screen and (max-width: 1600px) {
    #subHd .in_header {width: 100%; padding: 0 5rem;}
}

@media screen and (max-width: 1280px) {
    .detail_wrap {width: 80rem;}
}

@media screen and (max-width: 1026px) {
    .nav_wrap.tab {position: absolute; top: 10rem; display: block; left: 4rem;}
    header .nav_wrap.pc, header .logo_pc, header .hd_logo {display: none;}
    header .nav_wrap_mo {display: block;}
    header .header_mo {display: flex; justify-content: space-between; align-items: center;}

    header {position: fixed; padding: 2.1rem 0; border-bottom: 1px solid rgba(221,221,221,0.2); z-index: 99;}
    header.on, header.active {background: #fff; border-color: #dddddd;}
    header .in_header {padding: 0 4rem;}

    header .nav_wrap_mo {display: none; position: absolute; top: calc(100% + 0.1rem); left: 0; width: 100%; height: calc(100vh - 7.1rem); overflow-y: auto; background: #fff; padding: 0 4rem 4rem 4rem;}
    header .nav_wrap_mo .mo_nav a,
    #subHd .nav_wrap_mo .mo_nav > ul > li > a {display: block; padding: 3.8rem 0; border-bottom: 1px solid #dddddd; font-size: 2.8rem; font-weight: 700; color: #222222; letter-spacing: -0.025rem;}
    header .nav_wrap_mo .mo_nav .depth1 {position: relative;}
    header .nav_wrap_mo .mo_nav > ul > li.depth1 > a {position: relative; padding-right: 40px;}
    header .nav_wrap_mo .mo_nav > ul > li.depth1.active > a {border-bottom: none;}
    /* + / - 아이콘 */
    header .nav_wrap_mo .mo_nav > ul > li.depth1 > a::before,
    header .nav_wrap_mo .mo_nav > ul > li.depth1 > a::after {content: ""; position: absolute; top: 50%; right: 0; width: 2.3rem; height: 0.3rem; background: #0f0f0f; transform: translateY(-50%); transition: transform 0.3s ease;}
    /* 세로선 */
    header .nav_wrap_mo .mo_nav > ul > li.depth1 > a::after {transform: translateY(-50%) rotate(90deg);}
    /* 2뎁스가 열렸을 때 → */
    header .nav_wrap_mo .mo_nav > ul > li.depth1.active > a::after {transform: translateY(-50%) rotate(0deg);}

    header .nav_wrap_mo .mo_nav .depth2 {display: none; padding: 0 4rem; background: #ebf6fb;}
    header .nav_wrap_mo .mo_nav .depth2.on {display: block;}
    header .nav_wrap_mo .mo_nav .depth2 li:not(:last-child) {margin-bottom: 3.1rem;}
    header .nav_wrap_mo .mo_nav .depth2 a {font-size: 2.2rem; font-weight: 600; padding: 0; border-bottom: none;}
    header .nav_wrap_mo .mo_nav .depth2 li:first-child {padding-top: 4rem;}
    header .nav_wrap_mo .mo_nav .depth2 li:last-child {padding-bottom: 4rem;}

    header .nav_wrap_mo.on {display: block;}

    /* ------------------------------ */
    /* 서브페이지 헤더 */
    /* ------------------------------ */
    #subHd {height: auto; padding: 2.1rem 0;}
    #subHd .in_header {padding: 0 4rem;}
    #subHd .header_mo .logo {background-image: url('/humanframe/theme/digitalgoods/assets/img/main/logo_mo_on.png'); width: 10.3rem; height: 2.8rem;}
    #subHd .nav_wrap_mo {display: none;}
    #subHd .nav_wrap_mo.on {display: block;}
    #subHd .nav_wrap_mo .mo_nav>ul {display: block;}
    #subHd .nav_wrap_mo .mo_nav>ul>li.on>a, 
    #subHd .nav_wrap_mo .mo_nav>ul>li>a:hover {text-decoration: none;}
    #subHd .nav_wrap_mo .mo_nav>ul .depth2 {opacity: 1; visibility: visible; height: auto;}
    #subHd .header_mo .mo_menu {display: block;}
    #subHd.on .header_mo .mo_menu {display: none;}


    /* ------------------------------ */
    /* 상세검색 레이아웃 */
    /* ------------------------------ */
    #mainHd {margin-top: 0;}
    #srchWrap{display: none; position: absolute; top: calc(100% + 0.1rem); left: 0; height: calc(100vh - 7.1rem); overflow-y: auto; padding: 4rem; background: #fff;}
    #srchWrap.on {display: block;}
    #srchWrap.on::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3rem; background: rgba(0, 0, 0, 0.15); filter: blur(1.5rem); transform: translateY(50%); z-index: -1;}
    .detail_btn,
    .detail_close {display: none;}
    .input_wrap {justify-content: center; margin-bottom: 4rem;}
    .input_box input {border: 1px solid #dddddd;}
    .detail_wrap {position: static; width: 100%; opacity: 1; visibility: visible; transform: translateX(0); border-radius: 1.5rem; box-shadow: none; padding: 3rem; background: #f8f8f8;}
}

@media screen and (max-width: 768px) {
    .nav_wrap.tab {left: 2rem; display: none;}
    .nav_wrap nav>ul>li:not(:last-child) {margin-bottom: 2rem;}
    .nav_wrap nav>ul>li>a {font-size: 2rem;}

    header {padding: 1.8rem 0;}
    header .in_header,
    #subHd .in_header {padding: 0 2rem;}

    header .nav_wrap_mo {height: calc(100vh - 6rem); padding: 0 2rem 2rem 2rem;}
    header .nav_wrap_mo .mo_nav a,
    #subHd .nav_wrap_mo .mo_nav>ul>li>a {font-size: 2.4rem; padding: 3rem 0;}
    header .nav_wrap_mo .mo_nav > ul > li.depth1 > a::before, 
    header .nav_wrap_mo .mo_nav > ul > li.depth1 > a::after {width: 1.8rem; height: 0.2rem;}
    header .nav_wrap_mo .mo_nav .depth2 {padding: 0 3rem;}
    header .nav_wrap_mo .mo_nav .depth2 li:first-child {padding-top: 3rem;}
    header .nav_wrap_mo .mo_nav .depth2 li:last-child {padding-bottom: 3rem;}
    header .nav_wrap_mo .mo_nav .depth2 a {font-size: 1.8rem;}

    /* ------------------------------ */
    /* 상세검색 레이아웃 */
    /* ------------------------------ */
    {height: calc(100vh - 6rem); padding: 3rem 2rem;}
    .input_box {width: 100%;}
    .input_box input {width: 100%;}
    .detail_srch {flex-direction: column; align-items: flex-start; gap: 1.9rem; margin-bottom: 2rem; padding-bottom: 2rem;}
    .detail_srch .category {font-size: 2rem;}
    .detail_srch .filter {gap: 0.8rem;}
    .detail_srch .filter label {font-size: 1.8rem;}
    #digitalgoodForm .detail_srch{
        gap:1.9rem 0;
    }

    .reset_btn {width: 11.2rem; height: 4.4rem; padding: 0 4.6rem 0 2.3rem;}
    .reset_btn span {font-size: 1.8rem; background-position: top 0.6rem right;}
}

@media screen and (max-width: 480px) {
    header .header_mo .logo {width: 8rem; height: 2.3rem;}
}
/* header */

/* ------------------------------ */
/* 서브페이지 레이아웃 */
/* ------------------------------ */
.subContWrap {padding-top: 20rem;}
.subContWrap .container {width: 160rem; margin: 0 auto; padding-bottom: 8rem; overflow: hidden;}
.subContWrap .subTitle {text-align: center; margin-bottom: 4rem;}
.subContWrap .menuTitle {font-family: "Busan", sans-serif; font-size: 5rem; font-weight: 700; color: #222222; line-height: normal;}
.subContWrap .menuList {display: flex; gap: 1rem; margin: 4rem 0 5rem 0;}
.subContWrap .menuList li {width: calc(50% - 0.5rem);}
.subContWrap .menuList li a {display: block; width: 100%; height: 100%; padding: 1.5rem 0; text-align: center; font-size: 2.2rem; color: #666666; border-bottom: 2px solid #cccccc;}
.subContWrap .menuList li a.active {color: #016fed; font-weight: 700; border-color: #016fed;}

/* 서브페이지 검색 */
#contents .input_wrap {justify-content: center; margin-bottom: 4rem;}
#contents .input_box input {position: relative; border: 2px solid transparent; background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #00c0fa, #015eea); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 3.2rem; width: 60rem; height: 6.4rem;}
#contents .input_box .src_btn {width: 6.4rem; height: 6.4rem; right: 0;}
.tableWriteForm,
#contents .detail_wrap {opacity: 1; visibility: visible; position: static; transform: translateX(0); width: 100%; padding: 3rem 4rem; background: #f8f8f8; border-radius: 1.5rem; box-shadow: none; margin-bottom: 4rem;}

/*컨텐츠 등록 폼 리셋*/
.detail_srch .filter input[type="radio"],
.detail_srch .filter input[type="checkbox"]{
    position: absolute !important; left:-99999px !important;
}
.detail_srch .filter select,
.detail_srch .filter input[type="text"],
.tagify{
    border-radius: 10px; width:50%; background:#fff; font-size: 2rem; border:1px solid #ddd;
}

.detail_srch .filter select{
    width:300px; background-image: url(/humanframe/theme/digitalgoods/assets/img/sub/iconSelect.png); background-repeat: no-repeat; background-position: right 1.7rem center; background-size: auto;
}
.detail_srch .filter > div{
    display:block; width:100%;
}
.tagify{
    width:100%;
}
.tagify__tag>div{
    border-radius: 8px !important;
}
.file-item{
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 1rem; padding:1rem 0; width:100%;
}
.tableWriteForm tbody td select{
    min-width: 300px; border-right:1px solid #ddd;
}
@media screen and (max-width: 1600px) {
    .subContWrap .container {width: 100%; padding: 0 5rem 8rem 5rem;}
}

@media screen and (max-width: 1120px) {
    .detail_srch .filter input[type="text"],
    .tagify{
        width:100% !important;
    }
}
@media screen and (max-width: 1026px) {
    .subContWrap {padding-top: 15rem;}
    .subContWrap .container {padding: 0 4rem 8rem 4rem;}
    .subContWrap .menuTitle {font-size: 4rem;}
    .subContWrap .menuList {gap: 1rem; margin: 3rem 0 4rem 0;}
    .subContWrap .menuList li a {font-size: 2rem;}

    /* 서브페이지 상세검색 */
    #contents #srchWrap {display: block; position: static; height: auto; padding: 0;}
    #contents .input_wrap {margin-bottom: 3rem;}
    #contents .input_box input {width: 48rem; height: 5.6rem; font-size: 1.8rem;}
    #contents .input_box .src_btn {width: 5.6rem; height: 5.6rem;}
    #contents .detail_wrap {padding: 3rem;}
}

@media screen and (max-width: 768px) {
    .subContWrap {padding-top: 13rem;}
    .subContWrap .container {padding: 0 2rem 5rem 2rem;}
    .subContWrap .subTitle {margin-bottom: 3rem;}
    .subContWrap .menuTitle {font-size: 3.6rem;}
    .subContWrap .menuList li a {font-size: 1.8rem; padding: 1.2rem 0;}
    
    /* 서브페이지 상세검색 */
    #contents .input_wrap {margin-bottom: 2rem;}
    #contents .input_box input {width: 100%;}
    .detail_srch .filter select{
        width:50%;
    }
}
@media screen and (max-width: 480px) {
    .detail_srch .filter select{
        width:100%;
    }
    .file-item{
        flex-direction: column; align-items: flex-start;
    }
}
/* footer */
footer {padding: 4.2rem 0; background: #353b45; text-align: center;}
footer .text {margin-top: 2rem; font-size: 1.6rem; line-height: 2.6rem; color: #ffffff; opacity: 0.7; word-break: keep-all;}

@media screen and (max-width: 1026px) {
    footer {padding: 3.2rem 0;}
}

@media screen and (max-width: 768px) {
    footer {padding: 2.5rem 2rem 3rem 2rem;}
    footer .text {font-size: 1.4rem; line-height: 2.2rem;}
}
/* footer */