@charset 'UTF-8';

@import url(font.css);
@import url(slick.css);
@import url(common.css);

/********** MAIN **********/
[class*="main-section"] {
    margin-bottom: 60px;
}
[class*="main-section"] .top-area {
    position: relative;
}
[class*="main-section"] .top-area .moreBtn {
    display: block;
    font-size: 17px;
    font-weight: bold;
    position: absolute;
    top: 9px;
    right: 0;
}
[class*="main-section"] .top-area .moreBtn:hover {
    color: #0c3177;
    text-decoration: underline;
}
[class*="main-section"] h3 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 800;
}
.set-template {
    display: flex;
    gap: 0 10px;
}
.left-box {
    width: 270px;
    height: 420px;
    padding: 40px;
    background-color: #0c3177;
    border-radius: 15px 40px 15px 15px;
    box-sizing: border-box;
}
.left-box h3 {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}
.left-box ul {
    margin-bottom: 43px;
}
.left-box ul li + li {
    margin-top: 15px;
}
.left-box ul li a {
    padding: 0 0 1px 0;
    font-size: 17px;
    font-weight: normal;
    color: #99a8c6;
    position: relative;
}
.left-box ul li a:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
    transition: all 0.5s ease;
}
.left-box ul li.active a::after {
    content: "";
    width: 15px;
    height: 10px;
    background: url("../img/img_chk.svg") no-repeat 0 0;
    position: absolute;
    top: 5px;
    right: -20px;
}
.right-box {
    display: flex;
    width: 980px;
    border-radius: 40px 15px 15px 15px;
    background-color: #242424;
    box-sizing: border-box;
}
.right-box h3 {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: bold;
    color: #b2cdff;
}
.right-box ul li a {
    font-size: 17px;
    font-weight: normal;
    color: #a8a8a8;
    position: relative;
}
.right-box ul li a:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
    transition: all 0.5s ease;
}
.right-box ul li.active a::after {
    content: "";
    width: 15px;
    height: 10px;
    background: url("../img/img_chk.svg") no-repeat 0 0;
    position: absolute;
    top: 5px;
    right: -20px;
}
.category-box {
    width: 810px;
    height: 420px;
    padding: 39px 50px;
    border-radius: 40px 0 0 15px;
    background: url("../img/bg_box.png") no-repeat 0 0;
}
.category-box ul {
    display: flex;
    flex-wrap: wrap;
    gap: 25px 60px;
}
#category-list01 ul {
    gap: 25px 50px;
}
#category-list01 ul li {
    width: 77px;
}
#category-list02 ul li {
    width: 123px;
}
/* 내용별 슬라이드 */
#category-list24 .category-top,
#category-list25 .category-top,
#category-popList24 .category-top,
#category-popList25 .category-top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
#category-list24 .category-top h3,
#category-list25 .category-top h3,
#category-popList24 .category-top h3,
#category-popList25 .category-top h3 {
    margin-bottom: 0;
}
#category-list24 .category-top button,
#category-list25 .category-top button,
#category-popList24 .category-top button,
#category-popList25 .category-top button {
    width: 67px;
    height: 25px;
    margin: 0 0 0 17px;
    padding: 3px 9px;
    border-radius: 13px;
    border: solid 1px #b2cdff;
    background-color: #b2cdff;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    color: #040e23;
    position: relative;
}
#category-list24 .category-top button::after,
#category-list25 .category-top button::after,
#category-popList24 .category-top button::after,
#category-popList25 .category-top button::after {
    content: "";
    width: 10px;
    height: 7px;
    background: url("../img/bg_all.svg") no-repeat 0 0;
    position: absolute;
    top: 9px;
    right: 9px;
}
#category-list24 .category-top button.active::after,
#category-list25 .category-top button.active::after,
#category-popList24 .category-top button.active::after,
#category-popList25 .category-top button.active::after {
    transform: rotate(180deg);
}
#category-list24 ul,
#category-list25 ul,
#category-popList24 ul,
#category-popList25 ul {
    gap: 25px 12px;
}
#category-list24 .category-depth01,
#category-list25 .category-depth01,
#category-popList24 .category-depthPop01,
#category-popList25 .category-depthPop01 {
    /* display: none; */
    width: 195px;
    height: 300px;
    overflow-y: auto;
}
#category-popList24 .category-depthPop01,
#category-list25 .category-depth01 {
    height: 265px;
}
#category-list24 .category-depth01 ul li a:hover,
#category-list25 .category-depth01 ul li a:hover,
#category-popList24 .category-depthPop01 ul li a:hover,
#category-popList25 .category-depthPop01 ul li a:hover,
#category-list24 .category-depth02 ul li a:hover,
#category-list25 .category-depth01 ul li a:hover,
#category-popList24 .category-depthPop02 ul li a:hover,
#category-popList25 .category-depthPop02 ul li a:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
    transition: all 0.5s ease;
}
#category-list24 .category-depth01 ul li.active a::after,
#category-list25 .category-depth01 ul li.active a::after,
#category-popList24 .category-depthPop01 ul li.active a::after,
#category-popList25 .category-depthPop01 ul li.active a::after,
#category-list24 .category-depth02 ul li.active a::after,
#category-list25 .category-depth01 ul li.active a::after,
#category-popList24 .category-depthPop02 ul li.active a::after,
#category-popList25 .category-depthPop02 ul li.active a::after {
    content: "";
    width: 15px;
    height: 10px;
    background: url("../img/img_chk.svg") no-repeat 0 0;
    position: absolute;
    top: 5px;
    right: -20px;
}
#category-list24 .category-depth01::-webkit-scrollbar,
#category-list25 .category-depth01::-webkit-scrollbar,
#category-popList24 .category-depthPop01::-webkit-scrollbar,
#category-popList25 .category-depthPop01::-webkit-scrollbar,
#category-list24 .category-depth02::-webkit-scrollbar,
#category-list25 .category-depth01::-webkit-scrollbar,
#category-popList24 .category-depthPop02::-webkit-scrollbar,
#category-popList25 .category-depthPop02::-webkit-scrollbar {
    width: 5px;
}
#category-list24 .category-depth01::-webkit-scrollbar-thumb,
#category-list25 .category-depth01::-webkit-scrollbar-thumb,
#category-popList24 .category-depthPop01::-webkit-scrollbar-thumb,
#category-popList25 .category-depthPop01::-webkit-scrollbar-thumb,
#category-list24 .category-depth02::-webkit-scrollbar-thumb,
#category-list25 .category-depth01::-webkit-scrollbar-thumb,
#category-popList24 .category-depthPop02::-webkit-scrollbar-thumb,
#category-popList25 .category-depthPop02::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 10px;
    background-clip: padding-box;
    border: 1px solid transparent;
}
#category-list24 .category-depth01::-webkit-scrollbar-track,
#category-list25 .category-depth01::-webkit-scrollbar-track,
#category-popList24 .category-depthPop01::-webkit-scrollbar-track,
#category-popList25 .category-depthPop01::-webkit-scrollbar-track,
#category-list24 .category-depth02::-webkit-scrollbar-track,
#category-list25 .category-depth01::-webkit-scrollbar-track,
#category-popList24 .category-depthPop02::-webkit-scrollbar-track,
#category-popList25 .category-depthPop02::-webkit-scrollbar-track {
    background-color: #eee;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}
#category-list24 .category-depth01 ul,
#category-list25 .category-depth01 ul,
#category-popList24 .category-depthPop01 ul,
#category-popList25 .category-depthPop01 ul {
    display: block;
}
#category-list24 .category-depth01 ul li + li,
#category-list25 .category-depth01 ul li + li,
#category-popList24 .category-depthPop01 ul li + li,
#category-popList25 .category-depthPop01 ul li + li {
    margin-top: 15px;
}
#category-list24 .category-depth02,
#category-list25 .category-depth02,
#category-popList24 .category-depthPop02,
#category-popList25 .category-depthPop02 {
    width: 510px;
    padding: 0 0 0 30px;
    height: 300px;
    overflow-y: auto;
    box-sizing: border-box;
}
#category-popList24 .category-depthPop02,
#category-popList25 .category-depthPop02 {
    height: 265px;
}
#category-list24 .category-depth02 ul,
#category-list25 .category-depth02 ul,
#category-popList24 .category-depthPop02 ul,
#category-popList25 .category-depthPop02 ul {
    display: flex;
    flex-wrap: wrap;
    gap: 25px 10px;
}
#category-list24 .category-depth02 ul li,
#category-list25 .category-depth02 ul li,
#category-popList24 .category-depthPop02 ul li,
#category-popList25 .category-depthPop02 ul li {
    width: 225px;
}
.category-box ul.design-category,
.category-box ul.design-categoryPop {
    gap: 0 20px;
    margin-bottom: 30px;
}
.category-box ul.design-category li,
.category-box ul.design-categoryPop li {
    width: auto;
}
.right-box .design-category li.active a,
.right-box .design-categoryPop li.active a {
    color: #fff;
    border-bottom: 1px solid #fff;
}
.right-box ul.design-category li.active a::after {
    background: none;
}

/* .right-box .design-category li.active a::after,
.right-box .design-categoryPop li.active a::after,
.right-box .design-category li a:hover::after,
.right-box .design-categoryPop li a:hover::after {
    display: none;
}
.category-list,
.category-popList,
.category-depth02,
.category-depthPop02,
.design-category-list,
.design-category-popList {
    display: none;
} */
.design-category-list .d-flex div,
.design-category-popList .d-flex div {
    margin-right: 60px;
}
.design-category-list h4,
.modalLayer .modalCont .design-category-popList h4 {
    margin-bottom: 15px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #d5d5d5 !important;
}
.design-category-list ul,
.design-category-popList ul {
    display: block;
}
.design-category-list ul li,
.design-category-popList ul li {
    width: auto;
}
.design-category-list ul li + li,
.design-category-popList ul li + li {
    margin-top: 10px;
}
.design-category-list ul li a,
.design-category-popList ul li a {
    display: block;
    height: 35px;
    line-height: 35px;
    padding-left: 42px;
    font-size: 16px;
    font-weight: normal;
    position: relative;
    transition: all 0.5s ease;
}
.design-category-list ul li a:hover,
.design-category-popList ul li a:hover {
    color: #1eacc9;
    border-bottom: 0;
    transition: all 0.5s ease;
}
.design-category-list ul li.active a,
.design-category-popList ul li.active a {
    color: #1eacc9;
    border-bottom: 0;
}
.design-category-list ul li a::before,
.design-category-popList ul li a::before {
    content: "";
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 65px;
    background-color: #f2f4f9;
    position: absolute;
    top: 0;
    left: 0;
}
.design-category-list ul li a:hover::before,
.design-category-popList ul li a:hover::before {
    background-color: #1eacc9;
}
.design-category-list ul li.active a::before,
.design-category-popList ul li.active a::before {
    background-color: #1eacc9;
}
.design-category-list ul li a:hover::after,
.design-category-popList ul li a:hover::after,
.design-category-list ul li.active a::after,
.design-category-popList ul li.active a::after {
    display: none;
}
.design-category-list .d-flex .table,
.design-category-popList .d-flex .table,
.design-category-list .d-flex .etc,
.design-category-popList .d-flex .etc {
    margin-right: 0;
}
.flow ul li:nth-child(1) a::before {
    background-image: url("../img/icon_diagram01.svg");
}
.flow ul li:nth-child(1).active a::before,
.flow ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_diagram01_on.svg");
}
.flow ul li:nth-child(2) a::before {
    background-image: url("../img/icon_diagram02.svg");
}
.flow ul li:nth-child(2).active a::before,
.flow ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_diagram02_on.svg");
}
.flow ul li:nth-child(3) a::before {
    background-image: url("../img/icon_diagram03.svg");
}
.flow ul li:nth-child(3).active a::before,
.flow ul li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_diagram03_on.svg");
}
.flow ul li:nth-child(4) a::before {
    background-image: url("../img/icon_diagram04.svg");
}
.flow ul li:nth-child(4).active a::before,
.flow ul li:nth-child(4) a:hover::before {
    background-image: url("../img/icon_diagram04_on.svg");
}
.structure ul li:nth-child(1) a::before {
    background-image: url("../img/icon_diagram05.svg");
}
.structure ul li:nth-child(1).active a::before,
.structure ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_diagram05_on.svg");
}
.structure ul li:nth-child(2) a::before {
    background-image: url("../img/icon_diagram06.svg");
}
.structure ul li:nth-child(2).active a::before,
.structure ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_diagram06_on.svg");
}
.cluster ul li:nth-child(1) a::before {
    background-image: url("../img/icon_diagram07.svg");
}
.cluster ul li:nth-child(1).active a::before,
.cluster ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_diagram07_on.svg");
}
.cluster ul li:nth-child(2) a::before {
    background-image: url("../img/icon_diagram08.svg");
}
.cluster ul li:nth-child(2).active a::before,
.cluster ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_diagram08_on.svg");
}
.cluster ul li:nth-child(3) a::before {
    background-image: url("../img/icon_diagram09.svg");
}
.cluster ul li:nth-child(3).active a::before,
.cluster ul li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_diagram09_on.svg");
}
.cluster ul li:nth-child(4) a::before {
    background-image: url("../img/icon_diagram10.svg");
}
.cluster ul li:nth-child(4).active a::before,
.cluster ul li:nth-child(4) a:hover::before {
    background-image: url("../img/icon_diagram10_on.svg");
}
.diffusion ul li:nth-child(1) a::before {
    background-image: url("../img/icon_diagram11.svg");
}
.diffusion ul li:nth-child(1).active a::before,
.diffusion ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_diagram11_on.svg");
}
.diffusion ul li:nth-child(2) a::before {
    background-image: url("../img/icon_diagram12.svg");
}
.diffusion ul li:nth-child(2).active a::before,
.diffusion ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_diagram12_on.svg");
}
.diffusion ul li:nth-child(3) a::before {
    background-image: url("../img/icon_diagram13.svg");
}
.diffusion ul li:nth-child(3).active a::before,
.diffusion ul li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_diagram13_on.svg");
}
.table ul li:nth-child(1) a::before {
    background-image: url("../img/icon_diagram14.svg");
}
.table ul li:nth-child(1).active a::before,
.table ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_diagram14_on.svg");
}
.table ul li:nth-child(2) a::before {
    background-image: url("../img/icon_diagram15.svg");
}
.table ul li:nth-child(2).active a::before,
.table ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_diagram15_on.svg");
}
.table ul li:nth-child(3) a::before {
    background-image: url("../img/icon_diagram16.svg");
}
.table ul li:nth-child(3).active a::before,
.table ul li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_diagram16_on.svg");
}
.bar ul li:nth-child(1) a::before {
    background-image: url("../img/icon_graph01.svg");
}
.bar ul li:nth-child(1).active a::before,
.bar ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_graph01_on.svg");
}
.bar ul li:nth-child(2) a::before {
    background-image: url("../img/icon_graph02.svg");
}
.bar ul li:nth-child(2).active a::before,
.bar ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_graph02_on.svg");
}
.bar ul li:nth-child(3) a::before {
    background-image: url("../img/icon_graph03.svg");
}
.bar ul li:nth-child(3).active a::before,
.bar ul li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_graph03_on.svg");
}
.bar ul li:nth-child(4) a::before {
    background-image: url("../img/icon_graph04.svg");
}
.bar ul li:nth-child(4).active a::before,
.bar ul li:nth-child(4) a:hover::before {
    background-image: url("../img/icon_graph04_on.svg");
}
.vertical-bar ul li:nth-child(1) a::before {
    background-image: url("../img/icon_graph05.svg");
}
.vertical-bar ul li:nth-child(1).active a::before,
.vertical-bar ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_graph05_on.svg");
}
.vertical-bar ul li:nth-child(2) a::before {
    background-image: url("../img/icon_graph06.svg");
}
.vertical-bar ul li:nth-child(2).active a::before,
.vertical-bar ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_graph06_on.svg");
}
.vertical-bar ul li:nth-child(3) a::before {
    background-image: url("../img/icon_graph07.svg");
}
.vertical-bar ul li:nth-child(3).active a::before,
.vertical-bar ul li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_graph07_on.svg");
}
.circle ul li:nth-child(1) a::before {
    background-image: url("../img/icon_graph08.svg");
}
.circle ul li:nth-child(1).active a::before,
.circle ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_graph08_on.svg");
}
.circle ul li:nth-child(2) a::before {
    background-image: url("../img/icon_graph09.svg");
}
.circle ul li:nth-child(2).active a::before,
.circle ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_graph09_on.svg");
}
.broken-line ul li:nth-child(1) a::before {
    background-image: url("../img/icon_graph10.svg");
}
.broken-line ul li:nth-child(1).active a::before,
.broken-line ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_graph10_on.svg");
}
.broken-line ul li:nth-child(2) a::before {
    background-image: url("../img/icon_graph11.svg");
}
.broken-line ul li:nth-child(2).active a::before,
.broken-line ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_graph11_on.svg");
}
.graph-etc ul li:nth-child(1) a::before {
    background-image: url("../img/icon_graph12.svg");
}
.graph-etc ul li:nth-child(1).active a::before,
.graph-etc ul li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_graph12_on.svg");
}
.graph-etc ul li:nth-child(2) a::before {
    background-image: url("../img/icon_graph13.svg");
}
.graph-etc ul li:nth-child(2).active a::before,
.graph-etc ul li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_graph13_on.svg");
}
.graph-etc ul li:nth-child(3) a::before {
    background-image: url("../img/icon_graph14.svg");
}
.graph-etc ul li:nth-child(3).active a::before,
.graph-etc ul li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_graph14_on.svg");
}
.graph-etc ul li:nth-child(4) a::before {
    background-image: url("../img/icon_graph15.svg");
}
.graph-etc ul li:nth-child(4).active a::before,
.graph-etc ul li:nth-child(4) a:hover::before {
    background-image: url("../img/icon_graph15_on.svg");
}
.graph-etc ul li:nth-child(5) a::before {
    background-image: url("../img/icon_graph16.svg");
}
.graph-etc ul li:nth-child(5).active a::before,
.graph-etc ul li:nth-child(5) a:hover::before {
    background-image: url("../img/icon_graph16_on.svg");
}
.design-category-list .text-box,
.design-category-popList .text-box,
.design-category-list .etc,
.design-category-popList .etc {
    display: flex;
    gap: 10px 30px;
}
.design-category-list .text-box li,
.design-category-popList .text-box li,
.design-category-list .etc li,
.design-category-popList .etc li {
    margin: 0;
    width: 150px;
}
.text-box li:nth-child(1) a::before {
    background-image: url("../img/icon_text-box01.svg");
}
.text-box li:nth-child(1).active a::before,
.text-box li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_text-box01_on.svg");
}
.text-box li:nth-child(2) a::before {
    background-image: url("../img/icon_text-box02.svg");
}
.text-box li:nth-child(2).active a::before,
.text-box li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_text-box02_on.svg");
}
.text-box li:nth-child(3) a::before {
    background-image: url("../img/icon_text-box03.svg");
}
.text-box li:nth-child(3).active a::before,
.text-box li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_text-box03_on.svg");
}
.text-box li:nth-child(4) a::before {
    background-image: url("../img/icon_text-box04.svg");
}
.text-box li:nth-child(4).active a::before,
.text-box li:nth-child(4) a:hover::before {
    background-image: url("../img/icon_text-box04_on.svg");
}
.text-box li:nth-child(5) a::before {
    background-image: url("../img/icon_text-box05.svg");
}
.text-box li:nth-child(5).active a::before,
.text-box li:nth-child(5) a:hover::before {
    background-image: url("../img/icon_text-box05_on.svg");
}
.text-box li:nth-child(6) a::before {
    background-image: url("../img/icon_text-box06.svg");
}
.text-box li:nth-child(6).active a::before,
.text-box li:nth-child(6) a:hover::before {
    background-image: url("../img/icon_text-box06_on.svg");
}
.text-box li:nth-child(7) a::before {
    background-image: url("../img/icon_text-box07.svg");
}
.text-box li:nth-child(7).active a::before,
.text-box li:nth-child(7) a:hover::before {
    background-image: url("../img/icon_text-box07_on.svg");
}
.etc li:nth-child(1) a::before {
    background-image: url("../img/icon_etc03.svg");
}
.etc li:nth-child(1).active a::before,
.etc li:nth-child(1) a:hover::before {
    background-image: url("../img/icon_etc03_on.svg");
}
.etc li:nth-child(2) a::before {
    background-image: url("../img/icon_etc02.svg");
}
.etc li:nth-child(2).active a::before,
.etc li:nth-child(2) a:hover::before {
    background-image: url("../img/icon_etc02_on.svg");
}
.etc li:nth-child(3) a::before {
    background-image: url("../img/icon_etc01.svg");
}
.etc li:nth-child(3).active a::before,
.etc li:nth-child(3) a:hover::before {
    background-image: url("../img/icon_etc01_on.svg");
}
.etc li:nth-child(4) a::before {
    background-image: url("../img/icon_etc04.svg");
}
.etc li:nth-child(4).active a::before,
.etc li:nth-child(4) a:hover::before {
    background-image: url("../img/icon_etc04_on.svg");
}
.ratio-box {
    width: 170px;
    height: 420px;
    padding: 40px 39px;
    border-radius: 0 15px 15px 0;
    background-color: #1e243b;
}
.ratio-box ul li + li {
    margin-top: 15px;
}
.keyword {
    display: flex;
    margin: 28px 0 10px;
    padding: 0 60px 0 280px;
    position: relative;
}
.keyword ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    height: 25px;
    overflow-y: auto;
}
.keyword ul li a {
    display: block;
    padding-right: 23px;
    font-size: 17px;
    font-weight: normal;
    position: relative;
}
.keyword ul li a::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url("../img/img_del01.svg") no-repeat 0 0;
    position: absolute;
    top: 0;
    right: 0;
}
.keyword button {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    border: solid 1px #b1b1b1;
    background-color: #fff;
    position: absolute;
    top: -14px;
    right: 0;
}
.keyword button::after {
    content: "";
    width: 21px;
    height: 21px;
    background: url("../img/icon_refresh.svg") no-repeat 0 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
}
.keyword button:hover::after {
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(180deg);
    transition: transform 0.4s ease-in-out;
}
.no-keyword {
    width: 100%;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
}
.searchArea {
    display: flex;
    align-items: end;
}
.searchArea p {
    width: 270px;
    padding: 0 0 23px 102px;
    border-bottom: 1px solid #0c3177;
    background: url("../img/img_person.png") no-repeat 20px 2px;
    font-size: 18px;
    font-weight: normal;
}
.searchArea p strong {
    display: block;
    font-size: 21px;
    font-weight: 800;
    position: relative;
}
.searchArea p strong::after {
    display: inline-block;
    content: "";
    width: 9px;
    height: 15px;
    margin-left: 10px;
    background: url("../img/arrow-right.svg") no-repeat 0 0;
}
.searchArea input[type="text"] {
    width: 836px;
    height: 50px;
    margin: 0 0 0 10px;
    padding: 17px 20px 15px 55px;
    border-radius: 5px;
    border: solid 1px #b1b1b1;
    background: #f5f7fb url("../img/icon_search.svg") no-repeat 20px 15px;
    font-size: 17px;
    font-weight: bold;
}
.searchArea input[type="text"]:hover {
    border-color: #3d3d3d;
}
.searchArea input[type="text"].active,
.searchArea input[type="text"]:focus {
    outline: none;
    border-color: #224b9e;
    background-color: #ebf3f6;
}
.searchArea button {
    width: 139px;
    height: 50px;
    margin: 0 0 0 5px;
    padding: 15px 18px 14px 19px;
    border-radius: 5px;
    background: #0c3177 url("../img/arrow_right_white02.svg") no-repeat 107px
        17px;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    transition: all 0.5s ease;
    font-weight: bold;
    text-transform: uppercase;
}
.searchArea button:hover {
    background-color: #3d3d3d;
}
.searchArea button:disabled,
.searchArea button.loading {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    background-image: none !important;
}
.searchArea button.loading:hover {
    background-color: #0c3177;
}
.searchArea button.loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 20px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
}
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
.img {
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}
.img > img {
    width: 100%;
}
.product-name {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    max-width: 298px;
}
.type {
    font-size: 16px;
    font-weight: normal;
}
.latest-updated-area {
    display: flex;
    border-bottom: 1px solid #dcdcdc;
}
.latest-updated {
    width: 472px;
    height: 380px;
    overflow: hidden;
    position: relative;
}
.latest-updated-slider {
    width: 100%;
    height: 100%;
}
.latest-updated-slider li {
    position: relative;
}
.latest-updated-slider li .img {
    width: 472px;
    height: 266px;
    position: relative;
}
.latest-updated-slider li.slick-slide .cont {
    transform: translateX(0);
    opacity: 0;
}
.latest-updated-slider li.slick-active .cont {
    animation-name: fadeInRight;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}
@keyframes fadeInRight {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.collection {
    background-image: url(../img/icon_collection_white01.svg);
}
.down {
    margin: 0 0 0 5px;
    background-image: url(../img/icon_down_white03.svg);
}
.seeMore {
    margin: 0 0 0 5px;
    background-image: url(../img/icon_more.svg);
}
.collection .tooltiptext {
    visibility: hidden;
    min-width: 120px;
    margin-left: -88px;
}
.collection .tooltiptext::after {
    margin-left: -8px;
    border-width: 10px;
}
.down .tooltiptext {
    visibility: hidden;
    min-width: 78px;
    margin-left: -14px;
}
.down .tooltiptext::after {
    border-width: 10px;
    transform: translateX(-50%);
}
.seeMore .tooltiptext {
    visibility: hidden;
    width: 64px;
    margin-left: -15px;
}
.seeMore .tooltiptext::after {
    border-width: 10px;
    transform: translateX(-50%);
}
.arrow {
    width: 35px;
    height: 35px;
    position: absolute;
    top: 276px;
    z-index: 10;
}
.latest-updated-slider .prev {
    background: url("../img/btn_prev.svg") no-repeat 0 0;
    right: 34px;
}
.latest-updated-slider .next {
    background: url("../img/btn_next.svg") no-repeat 0 0;
    right: 0;
}
.latest-updated-list {
    margin-left: 20px;
    position: relative;
}
.latest-updated-list ul {
    display: flex;
    gap: 0 10px;
}
.latest-updated-list ul li {
    width: 249px;
    position: relative;
}
.latest-updated-list ul li .img {
    width: 249px;
    height: 140px;
}
.latest-updated-list ul li .hidden-icon-area {
    height: 140px;
}
.best-template-list {
    display: flex;
    gap: 0 10px;
    padding-bottom: 60px;
    border-bottom: 1px solid #dcdcdc;
}
.best-template-list li {
    position: relative;
}
.best-template-list li .img {
    width: 244px;
    height: 137px;
    position: relative;
}
.best-template-list li .cont {
    width: 244px;
}
/* 이용요금 */
.usage-fee-guide h4 {
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bold;
}
.usage-fee-guide .txt01 {
    margin-bottom: 30px;
    font-size: 17px;
    line-height: 1.76;
}
.usage-fee-guide .txt01 strong {
    font-weight: bold;
    color: #1d9ccc;
}
[class*="usage-fee-list"] {
    display: flex;
    gap: 0 30px;
    margin-bottom: 60px;
}
[class*="usage-fee-list"] > li {
    width: 100%;
    padding: 30px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
    box-sizing: border-box;
    position: relative;
}
.usage-fee-list01 > li > .cont {
    height: 267px;
}
[class*="usage-fee-list"] > li > .cont h4 {
    margin-bottom: 10px;
    font-size: 27px;
    font-weight: 800;
}
[class*="usage-fee-list"] > li > .cont h5 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
}
[class*="usage-fee-list"] > li > .cont p {
    margin-bottom: 20px;
    font-size: 16px;
}
[class*="usage-fee-list"] > li > .cont > ul > li {
    font-size: 16px;
    line-height: 1.56;
}
[class*="usage-fee-list"] > li > .cont .nice-select {
    display: block;
    width: 125px;
    height: 35px;
    padding: 8px 15px 7px 18px;
    border-radius: 18px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    position: absolute;
    top: 28px;
    right: 30px;
    font-size: 17px;
}
[class*="usage-fee-list"] > li > .cont .nice-select:hover {
    border-color: #3d3d3d;
}
[class*="usage-fee-list"] > li > .cont .nice-select:after {
    margin-top: -3px;
}
[class*="subscribe-box"] {
    width: 100%;
    padding: 25px 20px;
    border-radius: 3px;
    border: solid 1px #bebebe;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.3s ease;
    position: relative;
}
[class*="subscribe-box"] + [class*="subscribe-box"] {
    margin-top: 15px;
}
[class*="subscribe-box"].active {
    border: solid 2px #1d9ccc;
    background-color: #ebf2f5;
}
[class*="subscribe-box"] .top {
    margin-bottom: 10px;
}
[class*="subscribe-box"] .top h5 {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.05;
}
[class*="subscribe-box"] .top h5 strong {
    display: block;
    margin-bottom: 3px;
    color: #1d9ccc;
}
[class*="subscribe-box"] .top .save {
    width: 106px;
    height: 30px;
    padding: 5px 0 10px;
    text-align: center;
    border-radius: 18px;
    background-color: #0066b3;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 20px;
    right: 20px;
}
[class*="subscribe-box"] p {
    font-size: 18px;
}
[class*="subscribe-box"] p.price {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 15px;
}
[class*="subscribe-box"] p.price strong {
    margin-right: 4px;
    font-size: 29px;
    font-weight: 800;
}
[class*="subscribe-box"] p.price span {
    font-size: 24px;
    font-weight: normal;
}
[class*="subscribe-box"] p.price em {
    margin: 0 10px 0 6px;
    font-size: 24px;
    font-weight: 800;
}
[class*="subscribe-box"].general {
    padding: 30px;
}
[class*="subscribe-box"].general p.price {
    margin-bottom: 0;
}
[class*="subscribe-box"].general p.price strong {
    margin-right: 10px;
}
[class*="subscribe-box"] p.annual-bill-amount {
    display: flex;
    align-items: baseline;
    font-size: 15px;
}
[class*="subscribe-box"] p.annual-bill-amount strong {
    margin: 0 10px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: #1d9ccc;
}
[class*="subscribe-box"] p.annual-bill-amount strong em {
    font-weight: 700;
}
.usage-fee-list01 > li:last-child > h5 {
    margin-bottom: 3px;
    font-size: 20px;
    font-weight: bold;
    color: #1d9ccc;
    line-height: 1.05;
}
.usage-fee-list01 > li:last-child > p {
    height: 127px;
    font-size: 18px;
    line-height: 1.39;
    box-sizing: border-box;
}
.usage-fee-list01 > li:last-child > p .separate-inquiry {
    display: block;
    margin-bottom: 10px;
    font-size: 29px;
    font-weight: 800;
}
[class*="usage-fee-list"] li .button-color01 {
    display: block;
    width: 100%;
    margin: 15px 0 0;
    font-weight: bold;
}
.usage-fee-list02 > li > .cont {
    height: 289px;
}
.usage-fee-list02 > li > .cont .nice-select {
    width: 125px;
}
.usage-fee-list02 > li > .cont .nice-select:after {
    margin-top: -2px;
}
.general-payment h5 {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: bold;
}
.general-payment p {
    font-size: 20px;
    font-weight: bold;
}
.general-payment p.price {
    display: flex;
    align-items: baseline;
    margin-bottom: 3px;
    font-size: 15px;
}
.general-payment p.price strong {
    margin-right: 10px;
    font-size: 29px;
    font-weight: 800;
}
.usage-fee-list02 li .button {
    background-color: #0d398e;
    color: #fff;
}
.payment-usage-instructions {
    margin-bottom: 80px;
}
.payment-usage-instructions ul li {
    font-size: 18px;
    line-height: 1.94;
    padding-left: 15px;
    position: relative;
}
.payment-usage-instructions ul li::before {
    content: "•";
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    top: -2px;
    left: 0;
}
.promotion ul li {
    width: 100%;
    height: 110px;
    padding: 28px 115px 28px;
    border-radius: 5px;
    border: solid 1px #bebebe;
    background-color: #fff;
    background-position: 0 0;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
.promotion ul li + li {
    margin-top: 15px;
}
.promotion ul li:nth-child(1) {
    background-image: url("../img/img_usage-fee01.svg");
}
.promotion ul li:nth-child(2) {
    background-image: url("../img/img_usage-fee02.svg");
}
.promotion ul li:nth-child(3) {
    background-image: url("../img/img_usage-fee03.svg");
}
.promotion ul li p {
    font-size: 20px;
}
.promotion ul li p.teamName {
    margin-top: 10px;
    font-size: 17px;
    font-weight: bold;
}
.latest-free {
    width: 753px;
    position: relative;
}
.latest-free-top {
    position: absolute;
    top: 0;
    left: 0;
}
.latest-free-top p {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 22px;
}
.latest-free-top .moreBtn {
    font-size: 17px;
    font-weight: bold;
}
.latest-free-top .moreBtn:hover {
    color: #0c3177;
    text-decoration: underline;
}
.latest-free-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}
.latest-free-list li {
    margin-bottom: 30px;
    position: relative;
}
.latest-free-list li .product-name {
    margin-bottom: 0;
}
.latest-free-list li:first-child {
    margin-left: 254px;
}
.latest-free-list li .img {
    width: 244px;
    height: 137px;
    position: relative;
}
.latest-free-list li .cont {
    width: 244px;
}
.apply-newsletter {
    margin-left: 60px;
    background: url("../img/img_letter.svg") no-repeat right 29px;
    background-size: 139px 106px;
}
.apply-newsletter h3 {
    line-height: 1.21;
}
.apply-newsletter h3 span {
    display: block;
    font-weight: normal;
}
.apply-newsletter p {
    margin-bottom: 15px;
    font-size: 19px;
    font-weight: normal;
    line-height: 1.32;
}
.apply-newsletter p strong {
    font-weight: bold;
}
.apply-newsletter input[type="text"] {
    width: 311px;
    height: 50px;
    padding: 15px 20px;
    border: solid 1px #b1b1b1;
    border-radius: 5px 0 0 5px;
    background-color: #f5f7fb;
    font-size: 17px;
    font-weight: bold;
}
.apply-newsletter input[type="text"].error {
    margin: 0px !important;
}
.apply-newsletter input[type="text"]:hover {
    border-color: #3d3d3d;
}
.apply-newsletter input[type="text"]:focus {
    outline: none;
    border-color: #224b9e;
    background-color: #ebf3f6;
}
.apply-newsletter button {
    width: 137px;
    height: 50px;
    padding: 15px 18px 14px 24px;
    text-align: left;
    background-color: #0c3177;
    border-radius: 0 5px 5px 0;
    transition: background-color 0.5s ease;
}
.apply-newsletter button > span {
    display: inline-block;
    padding-right: 33px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    position: relative;
}
.apply-newsletter button > span::after {
    content: "";
    width: 11px;
    height: 17px;
    background: url(../img/arrow_right_white02.svg) no-repeat 0 0;
    position: absolute;
    top: 2px;
    right: 0;
}
.apply-newsletter button:hover {
    background-color: #3d3d3d;
}
.apply-newsletter .pcView {
    display: inline-block;
}
.view-full-text {
    font-size: 17px;
    font-weight: bold;
}
.main-section05 {
    display: flex;
    width: 100%;
    height: 249px;
    margin-bottom: 50px;
    padding: 54px 0 47px 0;
    background: url("../img/bg_presentation.png") no-repeat 0 0;
}
.main-section05 div {
    width: 50%;
    position: relative;
}
.main-section05 h3 {
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    color: #fff;
}
.main-section05 p {
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.32;
    color: #fff;
}
.main-section05 .training-coaching {
    border-left: 1px solid #737bb8;
}
.main-section05 a {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 111px;
    left: 50%;
    transform: translateX(-50%);
    background: url("../img/img_link.svg") no-repeat 0 0;
    transition: background 0.4s ease-in-out;
}
.main-section05 a:hover {
    background-image: url("../img/img_link_on.svg");
}

@media (max-width: 1265px) {
    .main {
        padding: 0 0 62px 0;
    }
    [class*="main-section"] {
        margin-bottom: 50px;
    }
    [class*="main-section"] .top-area .moreBtn {
        top: 46px;
        right: 20px;
        font-size: 15px;
        font-weight: normal;
    }
    [class*="main-section"] h3 {
        margin-bottom: 15px;
        font-size: 20px;
        line-height: 1.1;
    }
    .main-section01 {
        padding: 0 20px;
    }
    .set-template,
    .keyword,
    .searchArea {
        display: none;
    }
    .mob-set-template {
        width: 100%;
        height: 450px;
        padding: 236px 30px 0;
        background: url("../img/bg_mob_template.png") no-repeat center;
        background-size: cover;
    }
    .mob-set-template .txt01 {
        margin-bottom: 15px;
        font-size: 23px;
        font-weight: 800;
        line-height: 1.09;
        color: #fff;
    }
    .mob-set-template .txt02 {
        opacity: 0.41;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        position: relative;
    }
    .mob-set-template .txt02::after {
        content: "";
        width: 8px;
        height: 41px;
        background: url("../img/arrow_down_white01.svg") no-repeat 0 0;
        position: absolute;
        top: 35px;
        left: 1px;
    }
    .smart-search {
        display: block;
        height: 50px;
        padding: 17px 20px 17px 30px;
        background-color: #1e265f;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        position: relative;
    }
    .smart-search::after {
        content: "";
        width: 7px;
        height: 9px;
        background: url("../img/arrow_right_white03.svg") no-repeat 0 0;
        position: absolute;
        top: 20px;
        right: 20px;
    }
    .main-section02 h3 {
        padding: 0 20px;
    }
    .latest-updated-area {
        display: block;
        border-bottom: 0;
    }
    .latest-updated {
        width: 100%;
        height: auto;
        margin-bottom: 17px;
        padding: 0 20px;
    }
    .latest-updated-list ul {
        width: 100%;
        overflow-x: auto;
    }
    .latest-updated-list ul::-webkit-scrollbar {
        display: none;
    }
    .latest-updated-slider li .img {
        width: 100%;
        height: auto;
        margin-bottom: 0;
        border: 0;
    }
    .latest-updated-slider li .cont {
        width: 100%;
        padding: 15px 20px 27px;
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.06);
        border: solid 1px #c4c4c4;
        border-top: 0;
        background-color: #fff;
        box-sizing: border-box;
    }
    .latest-updated-slider li.slick-slide .cont {
        opacity: 1;
    }
    .latest-updated-slider li.slick-active .cont {
        animation-name: none;
    }
    .main-section02 {
        padding-bottom: 45px;
        border-bottom: 1px solid #c8cfd8;
        position: relative;
    }
    .main-section02::after {
        content: "";
        width: 100%;
        height: 461px;
        border-top: 1px solid #c8cfd8;
        background-color: #eef2f7;
        position: absolute;
        top: 27%;
        left: 0;
        z-index: -1;
    }
    .slick-dots {
        display: flex;
        gap: 0 5px;
        justify-content: center;
        margin-top: 17px;
    }
    .slick-dots li button {
        display: block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #3d3d3d;
        text-indent: 100%;
        overflow: hidden;
        cursor: pointer;
    }
    .slick-dots li.slick-active button {
        width: 30px;
        height: 7px;
        border-radius: 5px;
    }
    .main-section03 {
        padding: 0 20px;
    }
    .best-template-list {
        display: block;
        padding-bottom: 50px;
    }
    .best-template-list li + li {
        margin-top: 40px;
    }
    .best-template-list li .img {
        width: 100%;
        height: auto;
    }
    .best-template-list li .img > img {
        position: static;
        transform: translate(0, 0);
        object-fit: fill;
    }
    .usage-fee-list {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }
    .usage-fee-list::-webkit-scrollbar {
        display: none;
    }
    .usage-fee-list ul {
        width: 125%;
        gap: 0 10px;
        margin-bottom: 50px;
        padding: 0;
    }
    .latest-free {
        width: 100%;
    }
    .latest-free-top {
        margin-bottom: 15px;
        padding: 0 20px;
        position: relative;
    }
    .latest-free-list li .img {
        width: 248px;
        height: auto;
    }
    .latest-free-list li .cont {
        width: 248px;
    }
    .latest-free-top .moreBtn {
        position: absolute;
        top: 82px;
        right: 20px;
        font-size: 15px;
        font-weight: normal;
    }
    .latest-free-list {
        width: 100%;
        margin: 0 0 50px 0;
        padding: 0 0 50px 20px;
        border-bottom: 1px solid #a8b1bc;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    .latest-free-list::-webkit-scrollbar {
        display: none;
    }
    .latest-free-list li:first-child {
        margin-left: 0;
    }
    .apply-newsletter {
        margin-left: 0;
        padding: 0 20px;
        background-position: 92% 35px;
        background-size: 114px 87px;
    }
    .apply-newsletter .pcView {
        display: none;
    }
    .apply-newsletter input[type="text"] {
        width: 100%;
    }
    .apply-newsletter button {
        display: block;
        width: 100%;
        margin-top: 10px;
        padding: 15px 0 14px 0;
        text-align: center;
    }
    .apply-newsletter button > span {
        padding-right: 17px;
    }
    .main-section04 .d-flex {
        display: block;
    }
    .apply-newsletter p {
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 1.33;
    }
    .main-section05 {
        display: block;
        width: auto;
        height: auto;
        padding: 30px 10px;
        margin: 0 20px;
        border-radius: 5px;
        background-image: url("../img/bg_presentationM.png");
        background-size: cover;
    }
    .main-section05 div {
        width: 100%;
    }
    .main-section05 .creation {
        padding-bottom: 25px;
        border-bottom: 1px solid #737bb8;
    }
    .main-section05 .training-coaching {
        padding-top: 25px;
        border-left: 0;
    }
    .main-section05 h3 {
        margin-bottom: 10px;
    }
    .main-section05 p {
        margin-bottom: 15px;
    }
    .main-section05 a {
        position: static;
        transform: translateX(0);
        margin: 0 auto;
    }
}

@media (max-width: 800px) {
    .usage-fee-list ul {
        width: 165%;
    }
    .apply-newsletter button {
        background-position-x: 55.6%;
    }
}

@media (max-width: 767px) {
    .mob-set-template {
        background-position: 0 0;
    }
}

@media (max-width: 640px) {
    .usage-fee-list ul {
        width: 305%;
    }
}

@media (max-width: 415px) {
    .usage-fee-list ul {
        width: 317%;
    }
}
@media (max-width: 412px) {
    .usage-fee-list ul {
        width: 320%;
    }
}
@media (max-width: 395px) {
    .usage-fee-list ul {
        width: 338%;
    }
}
@media (max-width: 380px) {
    .usage-fee-list ul {
        width: 352%;
    }
}
@media (max-width: 360px) {
    .usage-fee-list ul {
        width: 368%;
    }
}

/* subPage */
.tit01 {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 800;
}
.tit02 {
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: bold;
}
.tit03 {
    font-size: 23px;
    font-weight: 800;
}
.tit04 {
    margin-bottom: 20px;
    font-size: 19px;
    font-weight: 800;
}
.listWrap {
    position: relative;
}
.topArea {
    display: flex;
    position: relative;
}
.titArea {
    position: relative;
}
.topArea .titArea p {
    font-size: 17px;
}
.topArea .titArea .openFilterBtn {
    width: 129px;
    height: 45px;
    padding: 11px 27px 10px 54px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background: #fff url(../img/icon_filter.svg) no-repeat 25px 13px;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: 30px;
    left: 283px;
}
.topArea .titArea .openFilterBtn:hover {
    border-color: #3d3d3d;
}
.nice-select {
    display: block;
    height: 45px;
    -webkit-tap-highlight-color: transparent;
    background-color: #fff;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    font-size: 17px;
    outline: none;
    padding: 9px 10px 10px;
    color: #3d3d3d;
    position: relative;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
}
.nice-select:hover {
    border-color: #3d3d3d;
}
.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #224b9e;
    background-color: #ebf3f6;
}
.nice-select:after {
    content: "";
    display: block;
    width: 14px;
    height: 9px;
    background: url("../img/select_arrow01.svg") no-repeat 0 0;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.nice-select.open:after {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
.nice-select.open .list {
    gap: 0;
    margin: 1px 0 0 0;
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}
.nice-select .list {
    width: 100%;
    background-color: #ebf3f6;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25),
        opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 10;
}
.nice-select .option {
    width: 100%;
    cursor: pointer;
    font-weight: 400;
    line-height: 45px;
    list-style: none;
    min-height: 45px;
    outline: none;
    margin: 0;
    padding: 0 15px;
    background-color: #ebf3f6;
    text-align: left;
    box-sizing: border-box;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.nice-select .option:hover {
    border-color: #224b9e;
    background-color: #224b9e;
    color: #fff;
}
.filterArea {
    width: 300px;
    position: absolute;
    top: 89px;
    left: 0;
}
.filterArea p {
    font-size: 17px;
    font-weight: normal;
}
[class*="filterBox"] {
    max-height: 2100px;
    padding: 20px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
}
.filterBox::-webkit-scrollbar {
    width: 10px;
}
.filterBox::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 10px;
    background-clip: padding-box; /* thumb와 track 사이에 공간(padding) 을 주고 싶을때 */
    border: 2px solid transparent;
}
.filterBox::-webkit-scrollbar-track {
    background-color: #eee;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}
[class*="filterBox"] h4 {
    margin-bottom: 20px;
    padding-left: 23px;
    font-size: 20px;
    font-weight: bold;
    background: url("../img/icon_filter.svg") no-repeat 0 3px;
    position: relative;
}
.filterBox .clsFilterBtn {
    width: 30px;
    height: 30px;
    border-radius: 2px;
    border: solid 1px #c4c4c4;
    background: #fff url("../img/arrow_left.svg") no-repeat 45% center;
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 10;
}
.filterBox .clsFilterBtn:hover {
    border-color: #3d3d3d;
}
[class*="filterBox"] .tabMenu {
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 0;
    border-top: 1px solid #3d3d3d;
}
[class*="filterBox"] .tabMenu li {
    width: 48%;
}
[class*="filterBox"] .tabMenu li a {
    display: block;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
    font-weight: normal;
}
[class*="filterBox"] .tabMenu li a:hover,
[class*="filterBox"] .tabMenu li.active a {
    background-color: #0d398e;
    color: #fff;
}
[class*="filterBox"] dl {
    margin-bottom: 15px;
    padding-bottom: 0;
}
[class*="filterBox"] dl.active {
    margin-bottom: 0;
}
[class*="filterBox"] dl dt {
    padding: 15px 0;
    border-top: 1px solid #3d3d3d;
    font-size: 17px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
}
[class*="filterBox"] dl dt::after {
    content: "";
    width: 14px;
    height: 9px;
    background: url("../img/arrow_down.svg") no-repeat 0 0;
    position: absolute;
    top: 22px;
    right: 0;
    transform: rotate(-180deg);
    transition: all ease 0.5s;
    transform-origin: center center;
}
[class*="filterBox"] dl.active dt::after {
    transform: rotate(0);
}
[class*="filterBox"] dl dd + dd {
    margin-top: 15px;
}
[class*="filterBox"] dl dd input[type="checkbox"] + label {
    padding-left: 27px;
}
[class*="filterBox"] input[type="checkbox"] + label:before {
    width: 20px;
    height: 20px;
    background: #fff url("../img/bg_chk02.svg") no-repeat center 4px;
    border-radius: 3px;
    top: 0;
}
[class*="filterBox"] input[type="checkbox"]:checked + label:before,
[class*="filterBox"] input[type="checkbox"]:focus + label:before {
    background-color: #1f3faa;
    background-image: url("../img/bg_chk02_on.svg");
    border-color: #1f3faa;
}

.filter-color input[type="checkbox"] + label:before,
.filter-color input[type="checkbox"]:checked + label:before,
.filter-color input[type="checkbox"]:focus + label:before {
    background-color: transparent;
    border-color: transparent;
}

.filter-color input.filter-color-white[type="checkbox"]:checked + label:before {
    background-image: url("../img/bg_chk02.svg") !important;
}

/* 디자인별 슬라이드 목록 */
.filterBox .tabCont dl dt {
    margin-bottom: 5px;
}
.filterBox .tabCont dl.active dt {
    margin-bottom: 0;
}
.filterBox .tabCont dl dd {
    height: 35px;
}
.filterBox .tabCont dl dd + dd {
    margin-top: 10px;
}
.filterBox .tabCont dl dd input[type="checkbox"] + label {
    padding-left: 42px;
    font-size: 16px;
    font-weight: normal;
}
.filterBox .tabCont input[type="checkbox"] + label:before {
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 65px;
    background-color: #f7f8fc;
    border-color: #9e9e9e;
    top: -7px;
}
.filterBox .tabCont input[type="checkbox"] + label:hover::before,
.filterBox .tabCont input[type="checkbox"]:checked + label::before,
.filterBox .tabCont input[type="checkbox"]:focus + label::before {
    background-color: #1eacc9;
    border-color: #1eacc9;
}

/* 디자인별 슬라이드 - 다이어그램 */
.filterBox #filter-flow01 + label::before {
    background-image: url("../img/icon_diagram01.svg");
}
.filterBox #filter-flow01 + label:hover::before,
.filterBox #filter-flow01:checked + label::before,
.filterBox #filter-flow01:focus + label::before {
    background-image: url("../img/icon_diagram01_on.svg");
}
.filterBox #filter-flow02 + label:before {
    background-image: url("../img/icon_diagram02.svg");
}
.filterBox #filter-flow02 + label:hover::before,
.filterBox #filter-flow02:checked + label:before,
.filterBox #filter-flow02:focus + label:before {
    background-image: url("../img/icon_diagram02_on.svg");
}
.filterBox #filter-flow03 + label:before {
    background-image: url("../img/icon_diagram03.svg");
}
.filterBox #filter-flow03 + label:hover::before,
.filterBox #filter-flow03:checked + label:before,
.filterBox #filter-flow03:focus + label:before {
    background-image: url("../img/icon_diagram03_on.svg");
}
.filterBox #filter-flow04 + label:before {
    background-image: url("../img/icon_diagram04.svg");
}
.filterBox #filter-flow04 + label:hover::before,
.filterBox #filter-flow04:checked + label:before,
.filterBox #filter-flow04:focus + label:before {
    background-image: url("../img/icon_diagram04_on.svg");
}
.filterBox #filter-structure01 + label:before {
    background-image: url("../img/icon_diagram05.svg");
}
.filterBox #filter-structure01 + label:hover::before,
.filterBox #filter-structure01:checked + label:before,
.filterBox #filter-structure01:focus + label:before {
    background-image: url("../img/icon_diagram05_on.svg");
}
.filterBox #filter-structure02 + label:before {
    background-image: url("../img/icon_diagram06.svg");
}
.filterBox #filter-structure02 + label:hover::before,
.filterBox #filter-structure02:checked + label:before,
.filterBox #filter-structure02:focus + label:before {
    background-image: url("../img/icon_diagram06_on.svg");
}
.filterBox #filter-cluster01 + label:before {
    background-image: url("../img/icon_diagram07.svg");
}
.filterBox #filter-cluster01 + label:hover::before,
.filterBox #filter-cluster01:checked + label:before,
.filterBox #filter-cluster01:focus + label:before {
    background-image: url("../img/icon_diagram07_on.svg");
}
.filterBox #filter-cluster02 + label:before {
    background-image: url("../img/icon_diagram08.svg");
}
.filterBox #filter-cluster02 + label:hover::before,
.filterBox #filter-cluster02:checked + label:before,
.filterBox #filter-cluster02:focus + label:before {
    background-image: url("../img/icon_diagram08_on.svg");
}
.filterBox #filter-cluster03 + label:before {
    background-image: url("../img/icon_diagram09.svg");
}
.filterBox #filter-cluster03 + label:hover::before,
.filterBox #filter-cluster03:checked + label:before,
.filterBox #filter-cluster03:focus + label:before {
    background-image: url("../img/icon_diagram09_on.svg");
}
.filterBox #filter-cluster04 + label:before {
    background-image: url("../img/icon_diagram10.svg");
}
.filterBox #filter-cluster04 + label:hover::before,
.filterBox #filter-cluster04:checked + label:before,
.filterBox #filter-cluster04:focus + label:before {
    background-image: url("../img/icon_diagram10_on.svg");
}
.filterBox #filter-diffusion01 + label:before {
    background-image: url("../img/icon_diagram11.svg");
}
.filterBox #filter-diffusion01 + label:hover::before,
.filterBox #filter-diffusion01:checked + label:before,
.filterBox #filter-diffusion01:focus + label:before {
    background-image: url("../img/icon_diagram11_on.svg");
}
.filterBox #filter-diffusion02 + label:before {
    background-image: url("../img/icon_diagram12.svg");
}
.filterBox #filter-diffusion02 + label:hover::before,
.filterBox #filter-diffusion02:checked + label:before,
.filterBox #filter-diffusion02:focus + label:before {
    background-image: url("../img/icon_diagram12_on.svg");
}
.filterBox #filter-diffusion03 + label:before {
    background-image: url("../img/icon_diagram13.svg");
}
.filterBox #filter-diffusion03 + label:hover::before,
.filterBox #filter-diffusion03:checked + label:before,
.filterBox #filter-diffusion03:focus + label:before {
    background-image: url("../img/icon_diagram13_on.svg");
}
.filterBox #filter-table01 + label:before {
    background-image: url("../img/icon_diagram14.svg");
}
.filterBox #filter-table01 + label:hover::before,
.filterBox #filter-table01:checked + label:before,
.filterBox #filter-table01:focus + label:before {
    background-image: url("../img/icon_diagram14_on.svg");
}
.filterBox #filter-table02 + label:before {
    background-image: url("../img/icon_diagram15.svg");
}
.filterBox #filter-table02 + label:hover::before,
.filterBox #filter-table02:checked + label:before,
.filterBox #filter-table02:focus + label:before {
    background-image: url("../img/icon_diagram15_on.svg");
}
.filterBox #filter-table03 + label:before {
    background-image: url("../img/icon_diagram16.svg");
}
.filterBox #filter-table03 + label:hover::before,
.filterBox #filter-table03:checked + label:before,
.filterBox #filter-table03:focus + label:before {
    background-image: url("../img/icon_diagram16_on.svg");
}
.filterBox .btnWrap {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #3d3d3d;
}
.filterBox .filter-ratio.active + .btnWrap {
    margin-top: 0;
}

/* 디자인별 슬라이드 - 다이어그램 */
.filterBoxM .tabCont dl dd input[type="checkbox"] + label {
    padding-left: 42px;
    font-size: 15px;
    font-weight: normal;
}
.filterBoxM .tabCont input[type="checkbox"] + label:before {
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 65px;
    background-color: #f7f8fc;
    border-color: #9e9e9e;
    top: -7px;
}
.filterBoxM .tabCont input[type="checkbox"]:checked + label:before,
.filterBoxM .tabCont input[type="checkbox"]:focus + label:before {
    background-color: #1eacc9;
    border-color: #1eacc9;
}
.filterBoxM #filterPop-flow01 + label:before {
    background-image: url("../img/icon_diagram01.svg");
}
.filterBoxM #filterPop-flow01:checked + label:before,
.filterBoxM #filterPop-flow01:focus + label:before {
    background-image: url("../img/icon_diagram01_on.svg");
}
.filterBoxM #filterPop-flow02 + label:before {
    background-image: url("../img/icon_diagram02.svg");
}
.filterBoxM #filterPop-flow02:checked + label:before,
.filterBoxM #filterPop-flow02:focus + label:before {
    background-image: url("../img/icon_diagram02_on.svg");
}
.filterBoxM #filterPop-flow03 + label:before {
    background-image: url("../img/icon_diagram03.svg");
}
.filterBoxM #filterPop-flow03:checked + label:before,
.filterBoxM #filterPop-flow03:focus + label:before {
    background-image: url("../img/icon_diagram03_on.svg");
}
.filterBoxM #filterPop-flow04 + label:before {
    background-image: url("../img/icon_diagram04.svg");
}
.filterBoxM #filterPop-flow04:checked + label:before,
.filterBoxM #filterPop-flow04:focus + label:before {
    background-image: url("../img/icon_diagram04_on.svg");
}
.filterBoxM #filterPop-structure01 + label:before {
    background-image: url("../img/icon_diagram05.svg");
}
.filterBoxM #filterPop-structure01:checked + label:before,
.filterBoxM #filterPop-structure01:focus + label:before {
    background-image: url("../img/icon_diagram05_on.svg");
}
.filterBoxM #filterPop-structure02 + label:before {
    background-image: url("../img/icon_diagram06.svg");
}
.filterBoxM #filterPop-structure02:checked + label:before,
.filterBoxM #filterPop-structure02:focus + label:before {
    background-image: url("../img/icon_diagram06_on.svg");
}
.filterBoxM #filterPop-cluster01 + label:before {
    background-image: url("../img/icon_diagram07.svg");
}
.filterBoxM #filterPop-cluster01:checked + label:before,
.filterBoxM #filterPop-cluster01:focus + label:before {
    background-image: url("../img/icon_diagram07_on.svg");
}
.filterBoxM #filterPop-cluster02 + label:before {
    background-image: url("../img/icon_diagram08.svg");
}
.filterBoxM #filterPop-cluster02:checked + label:before,
.filterBoxM #filterPop-cluster02:focus + label:before {
    background-image: url("../img/icon_diagram08_on.svg");
}
.filterBoxM #filterPop-cluster03 + label:before {
    background-image: url("../img/icon_diagram09.svg");
}
.filterBoxM #filterPop-cluster03:checked + label:before,
.filterBoxM #filterPop-cluster03:focus + label:before {
    background-image: url("../img/icon_diagram09_on.svg");
}
.filterBoxM #filterPop-cluster04 + label:before {
    background-image: url("../img/icon_diagram10.svg");
}
.filterBoxM #filterPop-cluster04:checked + label:before,
.filterBoxM #filterPop-cluster04:focus + label:before {
    background-image: url("../img/icon_diagram10_on.svg");
}
.filterBoxM #filterPop-diffusion01 + label:before {
    background-image: url("../img/icon_diagram11.svg");
}
.filterBoxM #filterPop-diffusion01:checked + label:before,
.filterBoxM #filterPop-diffusion01:focus + label:before {
    background-image: url("../img/icon_diagram11_on.svg");
}
.filterBoxM #filterPop-diffusion02 + label:before {
    background-image: url("../img/icon_diagram12.svg");
}
.filterBoxM #filterPop-diffusion02:checked + label:before,
.filterBoxM #filterPop-diffusion02:focus + label:before {
    background-image: url("../img/icon_diagram12_on.svg");
}
.filterBoxM #filterPop-diffusion03 + label:before {
    background-image: url("../img/icon_diagram13.svg");
}
.filterBoxM #filterPop-diffusion03:checked + label:before,
.filterBoxM #filterPop-diffusion03:focus + label:before {
    background-image: url("../img/icon_diagram13_on.svg");
}
.filterBoxM #filterPop-table01 + label:before {
    background-image: url("../img/icon_diagram14.svg");
}
.filterBoxM #filterPop-table01:checked + label:before,
.filterBoxM #filterPop-table01:focus + label:before {
    background-image: url("../img/icon_diagram14_on.svg");
}
.filterBoxM #filterPop-table02 + label:before {
    background-image: url("../img/icon_diagram15.svg");
}
.filterBoxM #filterPop-table02:checked + label:before,
.filterBoxM #filterPop-table02:focus + label:before {
    background-image: url("../img/icon_diagram15_on.svg");
}
.filterBoxM #filterPop-table03 + label:before {
    background-image: url("../img/icon_diagram16.svg");
}
.filterBoxM #filterPop-table03:checked + label:before,
.filterBoxM #filterPop-table03:focus + label:before {
    background-image: url("../img/icon_diagram16_on.svg");
}

/* 디자인별 슬라이드 - 그래프 */
.filterBox #filter-bar01 + label:before {
    background-image: url("../img/icon_graph01.svg");
}
.filterBox #filter-bar01 + label:hover::before,
.filterBox #filter-bar01:checked + label:before,
.filterBox #filter-bar01:focus + label:before {
    background-image: url("../img/icon_graph01_on.svg");
}
.filterBox #filter-bar02 + label:before {
    background-image: url("../img/icon_graph02.svg");
}
.filterBox #filter-bar02 + label:hover::before,
.filterBox #filter-bar02:checked + label:before,
.filterBox #filter-bar02:focus + label:before {
    background-image: url("../img/icon_graph02_on.svg");
}
.filterBox #filter-bar03 + label:before {
    background-image: url("../img/icon_graph03.svg");
}
.filterBox #filter-bar03 + label:hover::before,
.filterBox #filter-bar03:checked + label:before,
.filterBox #filter-bar03:focus + label:before {
    background-image: url("../img/icon_graph03_on.svg");
}
.filterBox #filter-bar04 + label:before {
    background-image: url("../img/icon_graph04.svg");
}
.filterBox #filter-bar04 + label:hover::before,
.filterBox #filter-bar04:checked + label:before,
.filterBox #filter-bar04:focus + label:before {
    background-image: url("../img/icon_graph04_on.svg");
}
.filterBox #filter-vertical-bar01 + label:before {
    background-image: url("../img/icon_graph05.svg");
}
.filterBox #filter-vertical-bar01 + label:hover::before,
.filterBox #filter-vertical-bar01:checked + label:before,
.filterBox #filter-vertical-bar01:focus + label:before {
    background-image: url("../img/icon_graph05_on.svg");
}
.filterBox #filter-vertical-bar02 + label:before {
    background-image: url("../img/icon_graph06.svg");
}
.filterBox #filter-vertical-bar02 + label:hover::before,
.filterBox #filter-vertical-bar02:checked + label:before,
.filterBox #filter-vertical-bar02:focus + label:before {
    background-image: url("../img/icon_graph06_on.svg");
}
.filterBox #filter-vertical-bar03 + label:before {
    background-image: url("../img/icon_graph07.svg");
}
.filterBox #filter-vertical-bar03 + label:hover::before,
.filterBox #filter-vertical-bar03:checked + label:before,
.filterBox #filter-vertical-bar03:focus + label:before {
    background-image: url("../img/icon_graph07_on.svg");
}
.filterBox #filter-circle01 + label:before {
    background-image: url("../img/icon_graph08.svg");
}
.filterBox #filter-circle01 + label:hover::before,
.filterBox #filter-circle01:checked + label:before,
.filterBox #filter-circle01:focus + label:before {
    background-image: url("../img/icon_graph08_on.svg");
}
.filterBox #filter-circle02 + label:before {
    background-image: url("../img/icon_graph09.svg");
}
.filterBox #filter-circle02 + label:hover::before,
.filterBox #filter-circle02:checked + label:before,
.filterBox #filter-circle02:focus + label:before {
    background-image: url("../img/icon_graph09_on.svg");
}
.filterBox #filter-broken-line01 + label:before {
    background-image: url("../img/icon_graph10.svg");
}
.filterBox #filter-broken-line01 + label:hover::before,
.filterBox #filter-broken-line01:checked + label:before,
.filterBox #filter-broken-line01:focus + label:before {
    background-image: url("../img/icon_graph10_on.svg");
}
.filterBox #filter-broken-line02 + label:before {
    background-image: url("../img/icon_graph11.svg");
}
.filterBox #filter-broken-line02 + label:hover::before,
.filterBox #filter-broken-line02:checked + label:before,
.filterBox #filter-broken-line02:focus + label:before {
    background-image: url("../img/icon_graph11_on.svg");
}
.filterBox #filter-graph-etc01 + label:before {
    background-image: url("../img/icon_graph12.svg");
}
.filterBox #filter-graph-etc01 + label:hover::before,
.filterBox #filter-graph-etc01:checked + label:before,
.filterBox #filter-graph-etc01:focus + label:before {
    background-image: url("../img/icon_graph12_on.svg");
}
.filterBox #filter-graph-etc02 + label:before {
    background-image: url("../img/icon_graph13.svg");
}
.filterBox #filter-graph-etc02 + label:hover::before,
.filterBox #filter-graph-etc02:checked + label:before,
.filterBox #filter-graph-etc02:focus + label:before {
    background-image: url("../img/icon_graph13_on.svg");
}
.filterBox #filter-graph-etc03 + label:before {
    background-image: url("../img/icon_graph14.svg");
}
.filterBox #filter-graph-etc03 + label:hover::before,
.filterBox #filter-graph-etc03:checked + label:before,
.filterBox #filter-graph-etc03:focus + label:before {
    background-image: url("../img/icon_graph14_on.svg");
}
.filterBox #filter-graph-etc04 + label:before {
    background-image: url("../img/icon_graph15.svg");
}
.filterBox #filter-graph-etc04 + label:hover::before,
.filterBox #filter-graph-etc04:checked + label:before,
.filterBox #filter-graph-etc04:focus + label:before {
    background-image: url("../img/icon_graph15_on.svg");
}
.filterBox #filter-graph-etc05 + label:before {
    background-image: url("../img/icon_graph16.svg");
}
.filterBox #filter-graph-etc05 + label:hover::before,
.filterBox #filter-graph-etc05:checked + label:before,
.filterBox #filter-graph-etc05:focus + label:before {
    background-image: url("../img/icon_graph16_on.svg");
}

/* 디자인별 슬라이드 - 그래프 */
.filterBoxM #filterPop-bar01 + label:before {
    background-image: url("../img/icon_graph01.svg");
}
.filterBoxM #filterPop-bar01:checked + label:before,
.filterBoxM #filterPop-bar01:focus + label:before {
    background-image: url("../img/icon_graph01_on.svg");
}
.filterBoxM #filterPop-bar02 + label:before {
    background-image: url("../img/icon_graph02.svg");
}
.filterBoxM #filterPop-bar02:checked + label:before,
.filterBoxM #filterPop-bar02:focus + label:before {
    background-image: url("../img/icon_graph02_on.svg");
}
.filterBoxM #filterPop-bar03 + label:before {
    background-image: url("../img/icon_graph03.svg");
}
.filterBoxM #filterPop-bar03:checked + label:before,
.filterBoxM #filterPop-bar03:focus + label:before {
    background-image: url("../img/icon_graph03_on.svg");
}
.filterBoxM #filterPop-bar04 + label:before {
    background-image: url("../img/icon_graph04.svg");
}
.filterBoxM #filterPop-bar04:checked + label:before,
.filterBoxM #filterPop-bar04:focus + label:before {
    background-image: url("../img/icon_graph04_on.svg");
}
.filterBoxM #filterPop-vertical-bar01 + label:before {
    background-image: url("../img/icon_graph05.svg");
}
.filterBoxM #filterPop-vertical-bar01:checked + label:before,
.filterBoxM #filterPop-vertical-bar01:focus + label:before {
    background-image: url("../img/icon_graph05_on.svg");
}
.filterBoxM #filterPop-vertical-bar02 + label:before {
    background-image: url("../img/icon_graph06.svg");
}
.filterBoxM #filterPop-vertical-bar02:checked + label:before,
.filterBoxM #filterPop-vertical-bar02:focus + label:before {
    background-image: url("../img/icon_graph06_on.svg");
}
.filterBoxM #filterPop-vertical-bar03 + label:before {
    background-image: url("../img/icon_graph07.svg");
}
.filterBoxM #filterPop-vertical-bar03:checked + label:before,
.filterBoxM #filterPop-vertical-bar03:focus + label:before {
    background-image: url("../img/icon_graph07_on.svg");
}
.filterBoxM #filterPop-circle01 + label:before {
    background-image: url("../img/icon_graph08.svg");
}
.filterBoxM #filterPop-circle01:checked + label:before,
.filterBoxM #filterPop-circle01:focus + label:before {
    background-image: url("../img/icon_graph08_on.svg");
}
.filterBoxM #filterPop-circle02 + label:before {
    background-image: url("../img/icon_graph09.svg");
}
.filterBoxM #filterPop-circle02:checked + label:before,
.filterBoxM #filterPop-circle02:focus + label:before {
    background-image: url("../img/icon_graph09_on.svg");
}
.filterBoxM #filterPop-broken-line01 + label:before {
    background-image: url("../img/icon_graph10.svg");
}
.filterBoxM #filterPop-broken-line01:checked + label:before,
.filterBoxM #filterPop-broken-line01:focus + label:before {
    background-image: url("../img/icon_graph10_on.svg");
}
.filterBoxM #filterPop-broken-line02 + label:before {
    background-image: url("../img/icon_graph11.svg");
}
.filterBoxM #filterPop-broken-line02:checked + label:before,
.filterBoxM #filterPop-broken-line02:focus + label:before {
    background-image: url("../img/icon_graph11_on.svg");
}
.filterBoxM #filterPop-graph-etc01 + label:before {
    background-image: url("../img/icon_graph12.svg");
}
.filterBoxM #filterPop-graph-etc01:checked + label:before,
.filterBoxM #filterPop-graph-etc01:focus + label:before {
    background-image: url("../img/icon_graph12_on.svg");
}
.filterBoxM #filterPop-graph-etc02 + label:before {
    background-image: url("../img/icon_graph13.svg");
}
.filterBoxM #filterPop-graph-etc02:checked + label:before,
.filterBoxM #filterPop-graph-etc02:focus + label:before {
    background-image: url("../img/icon_graph13_on.svg");
}
.filterBoxM #filterPop-graph-etc03 + label:before {
    background-image: url("../img/icon_graph14.svg");
}
.filterBoxM #filterPop-graph-etc03:checked + label:before,
.filterBoxM #filterPop-graph-etc03:focus + label:before {
    background-image: url("../img/icon_graph14_on.svg");
}
.filterBoxM #filterPop-graph-etc04 + label:before {
    background-image: url("../img/icon_graph15.svg");
}
.filterBoxM #filterPop-graph-etc04:checked + label:before,
.filterBoxM #filterPop-graph-etc04:focus + label:before {
    background-image: url("../img/icon_graph15_on.svg");
}
.filterBoxM #filterPop-graph-etc05 + label:before {
    background-image: url("../img/icon_graph16.svg");
}
.filterBoxM #filterPop-graph-etc05:checked + label:before,
.filterBoxM #filterPop-graph-etc05:focus + label:before {
    background-image: url("../img/icon_graph16_on.svg");
}

/* 디자인별 슬라이드 - 텍스트 박스 */
.filterBox #filter-text-box01 + label:before {
    background-image: url("../img/icon_text-box01.svg");
}
.filterBox #filter-text-box01 + label:hover::before,
.filterBox #filter-text-box01:checked + label:before,
.filterBox #filter-text-box01:focus + label:before {
    background-image: url("../img/icon_text-box01_on.svg");
}
.filterBox #filter-text-box02 + label:before {
    background-image: url("../img/icon_text-box02.svg");
}
.filterBox #filter-text-box02 + label:hover::before,
.filterBox #filter-text-box02:checked + label:before,
.filterBox #filter-text-box02:focus + label:before {
    background-image: url("../img/icon_text-box02_on.svg");
}
.filterBox #filter-text-box03 + label:before {
    background-image: url("../img/icon_text-box03.svg");
}
.filterBox #filter-text-box03 + label:hover::before,
.filterBox #filter-text-box03:checked + label:before,
.filterBox #filter-text-box03:focus + label:before {
    background-image: url("../img/icon_text-box03_on.svg");
}
.filterBox #filter-text-box04 + label:before {
    background-image: url("../img/icon_text-box04.svg");
}
.filterBox #filter-text-box04 + label:hover::before,
.filterBox #filter-text-box04:checked + label:before,
.filterBox #filter-text-box04:focus + label:before {
    background-image: url("../img/icon_text-box04_on.svg");
}
.filterBox #filter-text-box05 + label:before {
    background-image: url("../img/icon_text-box05.svg");
}
.filterBox #filter-text-box05 + label:hover::before,
.filterBox #filter-text-box05:checked + label:before,
.filterBox #filter-text-box05:focus + label:before {
    background-image: url("../img/icon_text-box05_on.svg");
}
.filterBox #filter-text-box06 + label:before {
    background-image: url("../img/icon_text-box06.svg");
}
.filterBox #filter-text-box06 + label:hover::before,
.filterBox #filter-text-box06:checked + label:before,
.filterBox #filter-text-box06:focus + label:before {
    background-image: url("../img/icon_text-box06_on.svg");
}
.filterBox #filter-text-box07 + label:before {
    background-image: url("../img/icon_text-box07.svg");
}
.filterBox #filter-text-box07 + label:hover::before,
.filterBox #filter-text-box07:checked + label:before,
.filterBox #filter-text-box07:focus + label:before {
    background-image: url("../img/icon_text-box07_on.svg");
}

/* 디자인별 슬라이드 - 텍스트 박스 */
.filterBoxM #filterPop-text-box01 + label:before {
    background-image: url("../img/icon_text-box01.svg");
}
.filterBoxM #filterPop-text-box01:checked + label:before,
.filterBoxM #filterPop-text-box01:focus + label:before {
    background-image: url("../img/icon_text-box01_on.svg");
}
.filterBoxM #filterPop-text-box02 + label:before {
    background-image: url("../img/icon_text-box02.svg");
}
.filterBoxM #filterPop-text-box02:checked + label:before,
.filterBoxM #filterPop-text-box02:focus + label:before {
    background-image: url("../img/icon_text-box02_on.svg");
}
.filterBoxM #filterPop-text-box03 + label:before {
    background-image: url("../img/icon_text-box03.svg");
}
.filterBoxM #filterPop-text-box03:checked + label:before,
.filterBoxM #filterPop-text-box03:focus + label:before {
    background-image: url("../img/icon_text-box03_on.svg");
}
.filterBoxM #filterPop-text-box04 + label:before {
    background-image: url("../img/icon_text-box04.svg");
}
.filterBoxM #filterPop-text-box04:checked + label:before,
.filterBoxM #filterPop-text-box04:focus + label:before {
    background-image: url("../img/icon_text-box04_on.svg");
}
.filterBoxM #filterPop-text-box05 + label:before {
    background-image: url("../img/icon_text-box05.svg");
}
.filterBoxM #filterPop-text-box05:checked + label:before,
.filterBoxM #filterPop-text-box05:focus + label:before {
    background-image: url("../img/icon_text-box05_on.svg");
}
.filterBoxM #filterPop-text-box06 + label:before {
    background-image: url("../img/icon_text-box06.svg");
}
.filterBoxM #filterPop-text-box06:checked + label:before,
.filterBoxM #filterPop-text-box06:focus + label:before {
    background-image: url("../img/icon_text-box06_on.svg");
}
.filterBoxM #filterPop-text-box07 + label:before {
    background-image: url("../img/icon_text-box07.svg");
}
.filterBoxM #filterPop-text-box07:checked + label:before,
.filterBoxM #filterPop-text-box07:focus + label:before {
    background-image: url("../img/icon_text-box07_on.svg");
}

/* 디자인별 슬라이드 - 기타 */
.filterBox #filter-etc01 + label:before {
    background-image: url("../img/icon_etc01.svg");
}
.filterBox #filter-etc01 + label:hover::before,
.filterBox #filter-etc01:checked + label:before,
.filterBox #filter-etc01:focus + label:before {
    background-image: url("../img/icon_etc01_on.svg");
}
.filterBox #filter-etc02 + label:before {
    background-image: url("../img/icon_etc02.svg");
}
.filterBox #filter-etc02 + label:hover::before,
.filterBox #filter-etc02:checked + label:before,
.filterBox #filter-etc02:focus + label:before {
    background-image: url("../img/icon_etc02_on.svg");
}
.filterBox #filter-etc03 + label:before {
    background-image: url("../img/icon_etc03.svg");
}
.filterBox #filter-etc03 + label:hover::before,
.filterBox #filter-etc03:checked + label:before,
.filterBox #filter-etc03:focus + label:before {
    background-image: url("../img/icon_etc03_on.svg");
}
.filterBox #filter-etc04 + label:before {
    background-image: url("../img/icon_etc04.svg");
}
.filterBox #filter-etc04 + label:hover::before,
.filterBox #filter-etc04:checked + label:before,
.filterBox #filter-etc04:focus + label:before {
    background-image: url("../img/icon_etc04_on.svg");
}

/* 디자인별 슬라이드 - 기타 */
.filterBoxM #filterPop-etc01 + label:before {
    background-image: url("../img/icon_etc01.svg");
}
.filterBoxM #filterPop-etc01:checked + label:before,
.filterBoxM #filterPop-etc01:focus + label:before {
    background-image: url("../img/icon_etc01_on.svg");
}
.filterBoxM #filterPop-etc02 + label:before {
    background-image: url("../img/icon_etc02.svg");
}
.filterBoxM #filterPop-etc02:checked + label:before,
.filterBoxM #filterPop-etc02:focus + label:before {
    background-image: url("../img/icon_etc02_on.svg");
}
.filterBoxM #filterPop-etc03 + label:before {
    background-image: url("../img/icon_etc03.svg");
}
.filterBoxM #filterPop-etc03:checked + label:before,
.filterBoxM #filterPop-etc03:focus + label:before {
    background-image: url("../img/icon_etc03_on.svg");
}
.filterBoxM #filterPop-etc04 + label:before {
    background-image: url("../img/icon_etc04.svg");
}
.filterBoxM #filterPop-etc04:checked + label:before,
.filterBoxM #filterPop-etc04:focus + label:before {
    background-image: url("../img/icon_etc04_on.svg");
}
.filterBoxM .tabCont .filter-color dd input[type="checkbox"] + label {
    padding-left: 30px;
}
.filterBoxM .tabCont .filter-color dd input[type="checkbox"] + label:before {
    width: 30px;
    height: 30px;
    border-radius: 19px;
}
/* 컬러 */
.filter-color dd .d-flex {
    flex-wrap: wrap;
    gap: 14px;
}
.filter-color dd input[type="checkbox"] + label {
    height: 30px;
    font-size: 0;
}
.filter-color dd input[type="checkbox"] + label:before {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-image: none;
    border: 0;
}
.filter-color dd input[type="checkbox"]:checked + label:before,
.filter-color dd input[type="checkbox"]:focus + label:before {
    background-image: url("../img/bg_chk02_on.svg");
    background-position-y: 9px;
}
#filter-color01 + label:before,
#filterPop-color01 + label:before,
#filterPop-color1-1 + label:before,
#filterPop-color2-1 + label:before,
#filterPop-color3-1 + label:before,
#filterPop-color4-1 + label:before {
    background-color: #019dea;
}
#filter-color02 + label:before,
#filterPop-color02 + label:before,
#filterPop-color1-2 + label:before,
#filterPop-color2-2 + label:before,
#filterPop-color3-2 + label:before,
#filterPop-color4-2 + label:before {
    background-color: #21409a;
}
#filter-color03 + label:before,
#filterPop-color03 + label:before,
#filterPop-color1-3 + label:before,
#filterPop-color2-3 + label:before,
#filterPop-color3-3 + label:before,
#filterPop-color4-3 + label:before {
    background-color: #00aaad;
}
#filter-color04 + label:before,
#filterPop-color04 + label:before,
#filterPop-color1-4 + label:before,
#filterPop-color2-4 + label:before,
#filterPop-color3-4 + label:before,
#filterPop-color4-4 + label:before {
    background-color: #00a65d;
}
#filter-color05 + label:before,
#filterPop-color05 + label:before,
#filterPop-color1-5 + label:before,
#filterPop-color2-5 + label:before,
#filterPop-color3-5 + label:before,
#filterPop-color4-5 + label:before {
    background-color: #ffdd01;
}
#filter-color06 + label:before,
#filterPop-color06 + label:before,
#filterPop-color1-6 + label:before,
#filterPop-color2-6 + label:before,
#filterPop-color3-6 + label:before,
#filterPop-color4-6 + label:before {
    background-color: #963;
}
#filter-color07 + label:before,
#filterPop-color07 + label:before,
#filterPop-color1-7 + label:before,
#filterPop-color2-7 + label:before,
#filterPop-color3-7 + label:before,
#filterPop-color4-7 + label:before {
    background-color: #ed1c24;
}
#filter-color08 + label:before,
#filterPop-color08 + label:before,
#filterPop-color1-8 + label:before,
#filterPop-color2-8 + label:before,
#filterPop-color3-8 + label:before,
#filterPop-color4-8 + label:before {
    background-color: #f58220;
}
#filter-color09 + label:before,
#filterPop-color09 + label:before,
#filterPop-color1-9 + label:before,
#filterPop-color2-9 + label:before,
#filterPop-color3-9 + label:before,
#filterPop-color4-9 + label:before {
    background-color: #5c2d91;
}
#filter-color10 + label:before,
#filterPop-color10 + label:before,
#filterPop-color1-10 + label:before,
#filterPop-color2-10 + label:before,
#filterPop-color3-10 + label:before,
#filterPop-color4-10 + label:before {
    background-color: #000;
}
#filter-color11 + label:before,
#filterPop-color11 + label:before,
#filterPop-color1-11 + label:before,
#filterPop-color2-11 + label:before,
#filterPop-color3-11 + label:before,
#filterPop-color4-11 + label:before {
    border: solid 1px #cecece;
    background-color: #fff;
}
.filter-color dd #filter-color11:checked + label:before,
.filterPop-color dd #filter-color11:checked + label:before,
.filter-color dd #filter-color11:focus + label:before,
.filterPop-color dd #filter-color11:focus + label:before {
    background-image: url("../img/bg_chk02.svg");
}
#filter-color12 + label:before,
#filterPop-color12 + label:before,
#filterPop-color1-12 + label:before,
#filterPop-color2-12 + label:before,
#filterPop-color3-12 + label:before,
#filterPop-color4-12 + label:before {
    background-color: #7f7f7f;
}
.filterBoxM
    .tabCont
    .filter-ratio
    input[type="checkbox"]:checked
    + label:before,
.filterBoxM .tabCont .filter-ratio input[type="checkbox"]:focus + label:before {
    background-color: #1f3faa;
    background-image: url(../img/bg_chk02_on.svg);
    border-color: #1f3faa;
}
.filterBoxM .tabCont .filter-ratio input[type="checkbox"] + label:before {
    width: 20px;
    height: 20px;
    background: #fff url(../img/bg_chk02.svg) no-repeat center 4px;
    border-radius: 3px;
    top: 0;
}
.mob-filter {
    display: none;
}

/* 신규 업데이트 */
.recent-update p {
    font-size: 17px;
    font-weight: normal;
}
.recent-update h4 {
    padding: 0 0 20px 0;
    background: none;
    border-bottom: 1px solid #3d3d3d;
}
.new-updateArea .list {
    gap: 40px 20px;
}
.updateList {
    margin-top: 20px;
}
.updateList li + li {
    margin-top: 15px;
}
.updateList li a {
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 17px;
    font-weight: normal;
}
.listArea {
    padding: 0 0 0 330px;
}
.listWrap.has-filter .listArea {
    min-height: 1400px;
}
.listWrap.has-filter .listArea.design-slide {
    min-height: 1770px !important;
}
@media (max-width: 1265px) {
    .listWrap.has-filter .listArea {
        min-height: auto;
    }
}
.listTop {
    padding-top: 60px;
    position: relative;
}
.listTop h4 {
    margin-bottom: 9px;
    font-size: 26px;
    font-weight: bold;
}
.listTop p strong {
    font-weight: bold;
}
.select-area {
    display: flex;
    gap: 0 10px;
    position: absolute;
    right: 0;
}
.select-area select,
.select-area .nice-select {
    width: 150px;
    padding: 11px 15px 12px;
}
.select-area input {
    width: 160px;
}
.listTop .select-area {
    position: absolute;
    top: 90px;
}
.listWrap .topArea .select-area {
    position: absolute;
    top: 29px;
    right: 0;
}
.list {
    display: flex;
    flex-wrap: wrap;
}
.listArea .list {
    gap: 40px 15px;
    margin: 20px 0 80px;
}
.list li {
    position: relative;
}
.list li .img {
    width: 300px;
    height: 336px;
    border: solid 1px #c4c4c4;
}
.list li .cont {
    position: relative;
}
.list li .cont .type {
    width: 300px;
}
.list li .hidden-icon-area {
    height: 336px;
}
.listBottom {
    text-align: center;
    position: relative;
}
.list-count {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
}
.list-count .paging {
    margin-right: 15px;
}
.list-count .sum {
    margin-left: 15px;
    font-size: 20px;
    font-weight: bold;
}
.list-count span {
    font-size: 17px;
    font-weight: normal;
}
.new-updateArea {
    margin-bottom: 100px;
}
.new-updateArea .listTop {
    margin-bottom: 50px;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #3d3d3d;
    position: relative;
}
.new-updateArea .listTop p {
    font-size: 17px;
}
.new-updateArea .listTop .select-area {
    top: 25px;
}
.new-update-list {
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid #acacac;
    position: relative;
}
.new-update-list h4 {
    display: flex;
    margin-bottom: 20px;
    padding: 0 0 0 38px;
    font-size: 25px;
    font-weight: bold;
    background: url("../img/icon_clock.svg") no-repeat 0 0;
}
.new-update-list h4 a {
    display: block;
    margin-left: 25px;
    padding-left: 25px;
    font-size: 25px;
    font-weight: 500;
    position: relative;
}
.new-update-list h4 a::before {
    content: "";
    width: 1px;
    height: 30px;
    background-color: #c4c4c4;
    position: absolute;
    top: 0;
    left: 0;
}
.new-update-list h4 a:hover,
.new-update-list h4 a:active {
    text-decoration: underline;
    color: #0d398e;
}
.new-update-list.end {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.new-update-list .more {
    position: absolute;
    top: 7px;
    right: 0;
    font-size: 17px;
    font-weight: bold;
    color: #3d3d3d;
}
.new-update-view .top {
    position: relative;
}
.new-update-view h4 {
    margin-bottom: 15px;
    padding: 0 0 0 38px;
    font-size: 25px;
    font-weight: bold;
    background: url("../img/icon_clock.svg") no-repeat 0 0;
}
.new-update-view .txt {
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: bold;
}
.new-update-view .top .listBtn {
    width: 130px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 1px solid #3d3d3d;
    font-weight: 500;
    position: absolute;
    top: 42px;
    right: 0;
    transition: all 0.3s ease;
}
.new-update-view .top .listBtn:hover {
    background-color: #3d3d3d;
    color: #fff;
}
.listBtn::before {
    content: "";
    display: block;
    width: 18px;
    height: 10px;
    background: url("../img/ico-list.png") center center no-repeat;
    margin-right: 10px;
    background-size: 100%;
}
.new-update-view .top .listBtn:hover::before {
    background-image: url("../img/ico-list_on.png");
}

/* 상세페이지 */
.detailWrap {
    padding: 40px 0 0 0;
    position: relative;
}
.detailArea {
    width: 817px;
}
.detailArea.type .product-service-intro .bottom {
    padding-top: 0;
}
.detailArea.type .product-service-intro .bottom::before {
    display: none;
}
.detailTit {
    margin: 50px 0 15px 0;
    padding-top: 15px;
    font-size: 23px;
    font-weight: bold;
    position: relative;
}
.detailTit::before {
    content: "";
    width: 29px;
    height: 3px;
    background-color: #3d3d3d;
    position: absolute;
    top: 0;
    left: 0;
}
.preViewImg {
    width: 817px;
    height: auto;
    border: solid 1px #c4c4c4;
}
.preViewImg > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.preViewImg + .preViewImg {
    margin-top: 30px;
}
.reviewList ul {
    gap: 10px;
}
.reviewList ul li {
    width: 32.5%;
    min-height: 152px;
    border: solid 1px #c4c4c4;
    box-sizing: border-box;
}
.reviewList ul li a {
    display: block;
    width: 100%;
    height: 100%;
}
.reviewList ul li a > img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.detail-right {
    width: 388px;
    position: relative;
}
.product-service-intro {
    width: 388px;
    position: absolute;
    top: 40px;
    right: 0;
}
.product-service-intro.no-fixed {
    position: absolute;
    right: 0;
}
.product-service-intro .top {
    display: flex;
    margin-bottom: 30px;
    position: relative;
}
.product-service-intro .top button {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 65px;
    border: solid 1px #9e9e9e;
    background-color: #fff;
    transition: all 0.5s ease;
}
.product-service-intro .top .steamed {
    margin: 0 5px 0 0;
    background-image: url("../img/icon_steamed.svg");
}
.product-service-intro .top .share {
    background-image: url("../img/icon_share.svg");
}
.product-service-intro .top .steamed:hover,
.product-service-intro .top .steamed.active {
    background-color: #e32517;
    border-color: #e32517;
    background-image: url("../img/icon_steamed_on.svg");
}
.product-service-intro .top .share:hover,
.product-service-intro .top .share.active {
    background-color: #3d3d3d;
    border-color: #3d3d3d;
    background-image: url("../img/icon_share_on.svg");
}
.product-service-intro h3 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: normal;
}
.product-service-intro .prodName {
    margin-bottom: 5px;
    font-size: 26px;
    font-weight: bold;
}
.product-service-intro .prodNum {
    margin-bottom: 35px;
    font-size: 21px;
    font-weight: 500;
}
.product-service-intro .prodIntro li {
    display: flex;
}
.product-service-intro .prodIntro li + li {
    margin-top: 10px;
}
.product-service-intro .prodIntro li span:first-child {
    width: 92px;
}
.product-service-intro .prodIntro li span + span {
    margin-left: 30px;
}
.product-service-intro .prodIntro li span em {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 10px 0 0;
    border-radius: 15px;
}
.product-service-intro .prodIntro li span .bgColor01 {
    background-color: #0066b3;
}
.product-service-intro .prodIntro li span .bgColor02 {
    background-color: #21409a;
}
.product-service-intro .prodIntro li span .bgColor03 {
    background-color: #00aaad;
}
.product-service-intro .prodIntro li span .bgColor04 {
    background-color: #00a65d;
}
.product-service-intro .bottom {
    margin-top: 30px;
    font-size: 0;
    position: relative;
}
.product-service-intro .bottom p {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.65;
}
.product-service-intro .bottom p a {
    display: block;
    font-weight: bold;
}
.product-service-intro .bottom p a:hover {
    color: #0c3177;
}
.basketBtn {
    display: inline-block;
    width: 145px;
    height: 55px;
    margin: 0 10px 0 0;
    padding: 16px 10px 15px;
    text-align: center;
    border-radius: 3px;
    border: solid 1px #3d3d3d;
    background-color: #fff;
    font-size: 20px;
    font-weight: normal;
    transition: all 0.5s ease;
}
.basketBtn:hover {
    background-color: #3d3d3d;
    color: #fff;
}
.grayDownBtn {
    display: block;
    width: 100%;
    height: 55px;
    margin: 0 0 15px 0;
    padding: 14px 100px 13px 176px;
    text-align: left;
    border-radius: 3px;
    border: solid 1px #bebebe;
    background-color: #eaeaea;
    font-size: 20px;
    font-weight: bold;
    color: #b2b2b2;
    position: relative;
    transition: all 0.5s ease;
}
.grayDownBtn::before {
    content: "";
    width: 28px;
    height: 28px;
    background: #eaeaea url("../img/icon_down_gray.svg") no-repeat 0 0;
    position: absolute;
    top: 13px;
    left: 144px;
}
.downBtn {
    display: inline-block;
    width: 233px;
    height: 55px;
    padding: 16px 10px 43px;
    text-align: center;
    border-radius: 3px;
    background-color: #0d398e;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    transition: all 0.5s ease;
}
.downBtn:hover {
    background-color: #3d3d3d;
}
.detail-keyword ul {
    gap: 5px;
}
.detail-keyword ul li a {
    display: block;
    height: 32px;
    line-height: 30.5px;
    padding: 0 15px;
    border-radius: 18px;
    border: solid 1px #9e9e9e;
    background-color: #fff;
    color: #3d3d3d;
    transition: all 0.5s ease;
}
.detail-keyword ul li.active a,
.detail-keyword ul li a:hover {
    border-color: #fe7337;
    color: #fe7337;
}
.prod-Infor p {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.88;
}
.prod-Infor ul {
    gap: 0 6px;
}
.prod-Infor ul li {
    flex-grow: 1;
}
.prod-Infor ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 45px;
    border-radius: 5px;
    border: solid 1px #ccc;
    background-color: #fff;
    font-size: 17px;
    color: #3d3d3d;
    transition: all 0.3s ease;
}
.prod-Infor ul li a:hover {
    border-color: #3d3d3d;
}
.relative-prod .list,
.featured-prod .list {
    gap: 0 20px;
}
.relative-prod .list li,
.featured-prod .list li {
    position: relative;
}
.shareList {
    display: none;
    width: 330px;
    vertical-align: middle;
    font-size: 0;
    position: absolute;
    top: 0;
    left: 110px;
}
.shareList li {
    display: inline-block;
    margin-right: 5px;
}
.shareList li:last-child {
    margin-right: 0;
}
.shareList li a {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 65px;
    background-color: #3d3d3d;
    background-repeat: no-repeat;
    background-position: center;
}
.shareList li a:hover {
    background-color: #fff;
    border: solid 1px #bbb;
    transition: all 0.3s ease-in;
}
.shareList li.facebook a {
    background-image: url("../img/icon_facebook_on.svg");
}
.shareList li.facebook a:hover {
    background-image: url("../img/icon_facebook.svg");
}
.shareList li.pinterest a {
    background-image: url("../img//icon_pinterest_on.svg");
}
.shareList li.pinterest a:hover {
    background-image: url("../img//icon_pinterest.svg");
}
.shareList li.youtube a {
    background-image: url("../img/icon_youtube_on.svg");
}
.shareList li.youtube a:hover {
    background-image: url("../img/icon_youtube.svg");
}
.shareList li.instagram a {
    background-image: url("../img/icon_instagram_on.svg");
}
.shareList li.instagram a:hover {
    background-image: url("../img/icon_instagram.svg");
}
.shareList li.blog a {
    background-image: url("../img/icon_blog_on.svg");
}
.shareList li.blog a:hover {
    background-image: url("../img/icon_blog.svg");
}
.shareList li.twiter a {
    background-image: url("../img/icon_twiter_on.svg");
}
.shareList li.twiter a:hover {
    background-image: url("../img/icon_twiter.svg");
}

/* 웹사이트 이용약관/개인정보취급방침 */
.policy-page h3 {
    margin-bottom: 40px;
    font-size: 24px;
    font-weight: bold;
}
.policy-page h4,
.policy-page h5 {
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: bold;
}
.policy-page h6 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
}
.policy-page p {
    margin-bottom: 35px;
    font-size: 17px;
    line-height: 1.5;
}
.policy-page .ordered-list {
    margin-bottom: 35px;
}
.policy-page .ordered-list li {
    display: flex;
    font-size: 17px;
    line-height: 1.5;
}
.policy-page .ordered-list li + li {
    margin-top: 15px;
}
.policy-page .ordered-list li .num {
    margin-right: 5px;
}
.policy-page .ordered-list li .sub-list,
.policy-page .ordered-list li .bul-dot {
    margin: 5px 0 0 0;
}
.policy-page .ordered-list li .sub-list li + li,
.policy-page .ordered-list li .bul-dot li + li {
    margin-top: 5px;
}
.policy-page .ordered-list li .sub-list .bul-dot {
    margin: 5px 0 0 0;
}
.policy-page .ordered-list li .sub-list .bul-dot li + li {
    margin-top: 5px;
}
.policy-page .bul-dot li {
    padding-left: 15px;
    position: relative;
    line-height: 1.76;
}
.policy-page .bul-dot li::before {
    content: "•";
    font-size: 17px;
    color: #3d3d3d;
    position: absolute;
    top: -2px;
    left: 0;
}
.policy-page ul {
    margin: 0 0 30px 0;
}
.policy-page ul li {
    font-size: 17px;
    line-height: 30px;
}
.policy-page .email {
    border-bottom: 1px solid transparent;
    transition: all 0.1s ease-out;
}
.policy-page .email:hover {
    border-bottom: 1px solid #1ebef0;
    color: #1ebef0;
}
.policy-page sup {
    vertical-align: super;
}
.policy-page table {
    border-top: 2px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
}
.policy-page table .first-col {
    width: 45%;
}
.policy-page table .second-col {
    width: auto;
}
.policy-page table .third-col {
    width: 45%;
}
.policy-page table thead th {
    height: 40px;
    padding: 11px 0 9px;
    background-color: #f3f3f3;
    border: 1px solid #cecece;
    border-top: 0 none;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #3d3d3d;
    vertical-align: middle;
}
.policy-page table tbody td {
    height: 40px;
    padding: 11px 15px 9px;
    border: 1px solid #cecece;
    font-size: 16px;
    color: #3d3d3d;
    vertical-align: middle;
}
.policy-page table tbody tr:last-child td {
    border-bottom: 0 none;
}
.policy-page table thead th:first-child,
.policy-page table tbody td:first-child {
    border-left: 0;
}
.policy-page table thead th:last-child,
.policy-page table tbody td:last-child {
    border-right: 0;
}

/* 라이선스 */
.license h3 {
    margin-bottom: 15px;
    font-size: 30px;
    font-weight: 800;
}
.license h3 strong {
    display: block;
    margin-bottom: 20px;
}
.license > p {
    margin-bottom: 30px;
    font-size: 22px;
    line-height: 1.36;
}
.license-guide {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 65px;
    padding: 50px 0;
    border-top: 1px solid #acacac;
    border-bottom: 1px solid #acacac;
}
.license-guide li {
    width: 50%;
    padding: 120px 0 0 0;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.license-guide li:nth-child(1) {
    background-image: url("../img/img_license01.svg");
}
.license-guide li:nth-child(2) {
    background-image: url("../img/img_license02.svg");
}
.license-guide li:nth-child(3) {
    background-image: url("../img/img_license03.svg");
}
.license-guide li:nth-child(4) {
    background-image: url("../img/img_license04.svg");
}
.license-guide li:nth-child(n + 3):nth-child(-n + 4) {
    margin-top: 50px;
}
.license-guide li h4 {
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bold;
}
.license-guide li p {
    font-size: 20px;
    line-height: 1.5;
}
.license .button {
    width: 340px;
    background-color: #0d398e;
    font-weight: bold;
    color: #fff;
}
.license .button:hover {
    background-color: #3d3d3d;
}
.license .policy-page {
    margin-top: 140px;
}

/* 마이페이지 */
.mypageWrap .tabMenu02 {
    margin-bottom: 50px;
}
.mypage-result-row .top {
    display: flex;
    margin-bottom: 20px;
}
.mypage-result-row .top .allChk {
    margin-right: 30px;
}
.mypage-result-row .total {
    font-size: 17px;
    font-weight: normal;
}
.mypage-result-row .periodConsole {
    margin-bottom: 20px;
    overflow: hidden;
}
.mypage-result-row .periodConsole .period-search {
    float: left;
    display: flex;
}
.periodConsole .period-search .useDatepicker {
    width: 163px;
    height: 45px;
    padding: 13px 15px 12px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
}
.periodConsole .period-search .useDatepicker:hover {
    border-color: #3d3d3d;
}
.periodConsole .period-search .useDatepicker:focus {
    border-color: #224b9e;
    background-color: #ebf3f6;
}
.periodConsole .period-search .useDatepicker + .useDatepicker {
    margin-left: 5px;
}
.periodConsole .period-search .searchBtn {
    width: 69px;
    height: 45px;
    margin-left: 5px;
    padding: 13px 0 12px;
    text-align: center;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
}
.periodConsole .period-search .searchBtn:hover {
    border-color: #3d3d3d;
    background-color: #3d3d3d;
    color: #fff;
}
.periodConsole .buttonWrap {
    float: left;
    display: flex;
    margin-left: 65px;
    padding: 0;
}
.periodConsole .buttonWrap button {
    height: 45px;
    padding: 13px 20px 12px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
    font-weight: normal;
}
.periodConsole .buttonWrap button:hover {
    border-color: #3d3d3d;
    background-color: #3d3d3d;
    color: #fff;
}
.periodConsole .buttonWrap button + button {
    margin-left: 5px;
}
.chkBox {
    margin: 0 50px;
}
.chkBox input[type="checkbox"] + label {
    width: 27px;
    height: 27px;
    padding-left: 0;
}
.mypageList {
    margin-bottom: 40px;
}
.mypageList ul {
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
}
.mypageList ul li {
    display: flex;
    align-items: center;
    padding: 30px 50px 30px 0;
    border-bottom: 1px solid #acacac;
    box-sizing: border-box;
    position: relative;
    transition: all 0.3s;
}
.mypageList ul li:last-child {
    border-bottom: 0;
}
.mypageList ul li .prod-img {
    margin-right: 30px;
}
.mypageList ul li .cont {
    padding: 20px 0;
    position: relative;
}
.mypageList ul li .prod-name {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
}
.mypageList ul li p {
    font-size: 18px;
    font-weight: normal;
}
.mypageList ul li p + p {
    margin-top: 10px;
}
.mypageList ul li .btns {
    width: 227px;
    margin-left: auto;
    font-size: 0;
}
.mypageList ul li .btns button {
    display: inline-block;
    height: 45px;
    padding: 13px 20px 12px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
    font-weight: normal;
    transition: all 0.3s ease;
}
.mypageList ul li .btns button:hover {
    border-color: #3d3d3d;
    background-color: #3d3d3d;
    color: #fff;
}
.mypageList ul li .btns button + button {
    margin-left: 10px;
}
.mypageList ul li .btns .downloadBtn {
    border-color: #3d3d3d;
    font-weight: bold;
    transition: all 0.3s ease;
}
.mypageList ul li .btns .expiredBtn:hover,
.mypageList ul li .btns .downloadBtn:hover,
.mypageList ul li .btns .cartBtn:hover {
    border-color: #0d398e;
    background-color: #0d398e;
    color: #fff;
}
.mypage-result-row .listBottom .float-right {
    padding-top: 2px;
}
.mypage-result-row .listBottom .list-count.static {
    position: static;
}
.mypage-result-row .listBottom .list-count {
    margin-left: 45px;
}
.mypageList .purchase-detailsList li {
    display: block;
    overflow: hidden;
}
.purchase-detailsList li .purchase-details {
    float: left;
    min-height: 83px;
    margin-right: 40px;
    padding-right: 40px;
    border-right: 1px solid #bbb;
    box-sizing: border-box;
}
.purchase-detailsList li .purchase-details:nth-child(2) {
    padding: 15px 40px 13px 0;
}
.purchase-detailsList li .purchase-details:last-child {
    margin-right: 0;
    padding: 30px 0;
    border-right: 0;
}
.mypageList .modify-member-infor {
    padding: 40px 0;
}
.mypageList .modify-member-infor li {
    margin-bottom: 10px;
    padding: 0;
    border-bottom: 0;
    position: relative;
}
.mypageList .modify-member-infor li:last-child {
    margin: 20px 0 0;
}
.mypageList .modify-member-infor li label,
.mypageList .modify-member-infor li span {
    width: 126px;
    margin-right: 20px;
    font-size: 17px;
}
.mypageList .modify-member-infor li input[type="radio"] + label {
    width: auto;
    margin-right: 25px;
}
.withdrawal {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 17px;
    text-decoration: underline;
}

/* 제휴 및 광고문의 */
.inquiry .txt01 {
    margin-bottom: 20px;
    font-size: 18px;
}
.inquiry-cont {
    padding: 30px 0;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
}
.inquiry-cont dl {
    display: flex;
    align-items: center;
}
.inquiry-cont dl + dl {
    margin-top: 20px;
}
.inquiry-cont dl dt {
    width: 90px;
    margin-right: 45px;
    font-size: 17px;
    font-weight: bold;
}
.inquiry-cont dl dd select,
.inquiry-cont dl dd .nice-select,
.inquiry-cont dl dd input[type="text"] {
    width: 300px;
}
.inquiry-cont dl dd .nice-select {
    padding: 12px 15px;
}
.inquiry-cont dl dd input.inp-width01 {
    width: 800px;
}
.inquiry-cont dl dd .textBox {
    width: 800px;
    height: 300px;
}
.inquiry-cont dl.spam-prevention-check {
    padding-top: 30px;
    border-top: 1px solid #3d3d3d;
}
.inquiry-cont dl.spam-prevention-check .spam-prevention {
    margin-bottom: 30px;
}

/* 공지사항 */
.noticeList .list {
    width: 100%;
    gap: 15px;
    margin-bottom: 80px;
}
.noticeList .list li {
    width: 32.5%;
}
.noticeList .list li a {
    display: block;
    min-height: 286px;
    padding: 35px 29px 35px 35px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    box-sizing: border-box;
    transition: all 0.3s ease-out;
}
.noticeList .list li a:hover {
    box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.15);
    border-color: #3d3d3d;
}
.noticeList .list li a h4 {
    margin-bottom: 40px;
    font-size: 19px;
    font-weight: bold;
}
.noticeList .list li a p {
    font-size: 17px;
}
.noticeList .list li a .cont {
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.67;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.views {
    margin-left: auto;
    padding-left: 23px;
    background: url("../img/icon_view.svg") no-repeat 0 4px;
}
.noticeView .view .top {
    padding: 30px 0;
    border-top: 1px solid #3d3d3d;
}
.noticeView .view .top h4 {
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: bold;
}
.noticeView .view .top p {
    font-size: 17px;
}
.noticeView .view .top .views {
    margin-left: 30px;
}
.noticeView .view .cont {
    padding: 40px 0;
    border-top: 1px solid#acacac;
    border-bottom: 1px solid#acacac;
}
.noticeView .view .cont ul {
    padding: 0.5rem 1rem;
}
.noticeView .view .cont ul li {
    list-style-type: disc;
}
.noticeView .view .cont p {
    font-size: 17px;
    line-height: 1.76;
}
.noticeView .view .cont p + p {
    margin-top: 40px;
}
.noticeView .view .bottom {
    margin-top: 30px;
    text-align: center;
    position: relative;
}
.noticeView .view .bottom .prev {
    position: absolute;
    left: 0;
    text-align: left;
}
.noticeView .view .bottom .next {
    position: absolute;
    right: 0;
    text-align: right;
}
.noticeView .view .bottom .prev em,
.noticeView .view .bottom .next em {
    display: block;
    margin-top: 20px;
    font-size: 17px;
    font-weight: normal;
    color: #3d3d3d;

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 300px;
}
.hidden-icon-area {
    display: none;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
}
.hidden-icon01 {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 60;
}
.hidden-icon01 button {
    width: 43px;
    height: 43px;
    opacity: 0.85;
    border-radius: 5px;
    background-color: #3d3d3d;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
}
.hidden-icon01 button:hover {
    background-color: #0b0b07;
    opacity: 1;
}
.hidden-icon01 button .tooltiptext {
    height: 36px;
    padding: 8px 10px;
    border-radius: 3px;
    background-color: #0b0b07;
    font-size: 17px;
    color: #fff;
    position: absolute;
    bottom: 135%;
    left: 50%;
    opacity: 0;
    transition: opacity 1s;
    z-index: 1;
}
.hidden-icon01 button .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border-style: solid;
    border-color: #0b0b07 transparent transparent transparent;
}
.hidden-icon01 button:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
.hidden-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}
.hidden-icon button {
    width: 50px;
    height: 50px;
    padding: 15px 15px 16px 18px;
    border-radius: 65px;
    background-color: #fff;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
}
.cart {
    background-image: url("../img/icon_shopping_basket.svg");
    background-position: center;
}
.cart:hover {
    background-color: #43aeb4;
    background-image: url("../img/icon_shopping_basket_on.svg");
}
.good {
    margin-left: 10px;
    background-image: url("../img/icon_good.svg");
    background-position: center 55%;
}
.good:hover {
    background-color: #e32517;
    background-image: url("../img/icon_good_on.svg");
}

/* FAQ */
.faq-search {
    margin: 40px 0 20px;
}
.faq-search input[type="text"] {
    width: 330px;
}
.faq-search .searchBtn {
    width: 69px;
    height: 45px;
    margin-left: 5px;
    padding: 13px 0 12px;
    text-align: center;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
}
.faqList {
    margin-bottom: 50px;
}
.faqList ul li {
    padding: 20px;
    border-bottom: 1px solid #acacac;
}
.faqList ul li:first-child {
    border-top: 1px solid #3d3d3d;
}
.faqList ul li:last-child {
    border-bottom-color: #3d3d3d;
}
.faqList ul li.active {
    margin-top: -1px;
    border: solid 1px #0d398e;
    background-color: #f5f7fb;
}
.faqList ul li .question {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 18px;
    font-weight: normal;
}
.faqList ul li.active .question {
    font-weight: bold;
}
.faqList ul li span {
    width: 30px;
    height: 30px;
    margin: 0 15px 0 0;
    padding: 3px 0;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #3d3d3d;
}
.faqList ul li .question span {
    display: block;
}
.faqList ul li .answer {
    display: none;
    margin-top: 20px;
    padding: 20px 0 0 0;
    border-top: 1px solid #0d398e;
}
.faqList ul li .answer span {
    display: inline-block;
    margin-right: 12px;
    vertical-align: top;
}
.faqList ul li .answer .txt {
    display: inline-block;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.39;
}

/*  회원탈퇴 */
.inquiry-cont .note {
    margin-top: 20px;
    padding-top: 30px;
    border-top: 1px solid #3d3d3d;
}
.inquiry-cont .note h4 {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: bold;
}
.inquiry-cont .note p {
    font-size: 17px;
}
.inquiry-cont .note p + p {
    margin-top: 5px;
}

/* Check out */
.checkOut .total {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: normal;
}
.order-details-top {
    display: flex;
    padding: 28px 50px 29px;
    background-color: #f6f6f4;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid#acacac;
}
.order-details-top p {
    font-size: 20px;
    font-weight: bold;
}
.order-details-top .price {
    margin-left: 15px;
    padding-left: 15px;
    position: relative;
}
.order-details-top .price::before {
    content: "";
    width: 1px;
    height: 19px;
    background-color: #acacac;
    position: absolute;
    top: 3px;
    left: 0;
}
.order-details {
    margin-bottom: 30px;
    padding: 30px 50px;
    border-bottom: 1px solid #3d3d3d;
}
.order-details dl {
    display: flex;
    align-items: center;
}
.order-details dl dt {
    margin-right: 20px;
    font-size: 18px;
    font-weight: bold;
}
.final-payment-amount {
    margin-bottom: 15px;
}
.final-payment-amount dd {
    font-size: 27px;
    font-weight: bold;
}
.payment-method dd {
    display: flex;
}
.payment-method select,
.payment-method .nice-select {
    width: 235px;
    margin-right: 10px;
    padding: 13px 15px 12px;
}
.checkOut .txt01 {
    font-size: 17px;
    font-weight: normal;
}
.checkOut .txt01 + .txt01 {
    margin-top: 15px;
}

/* 주문완료 */
.completeBox {
    width: 100%;
    height: 259px;
    margin: 0 0 45px;
    padding: 50px 0 45px;
    border-radius: 5px;
    border: solid 1px #bfbfbf;
    background: #f6f6f4 url(../img/bg_order_complete.svg) no-repeat center 140px;
}
.completeBox .alarmTxt01 {
    margin-bottom: 10px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
.completeBox .alarmTxt02 {
    text-align: center;
    font-size: 17px;
    font-weight: 500;
}
.order-complete-details {
    display: flex;
    padding: 0 50px;
}
.order-complete-details ul li {
    font-size: 18px;
    font-weight: normal;
    color: #3d3d3d;
}
.order-complete-details ul li + li {
    margin-top: 15px;
}
.ticket-infor {
    margin-left: 50px;
    padding-left: 50px;
    position: relative;
}
.ticket-infor::before {
    content: "";
    width: 1px;
    height: 128px;
    background-color: #acacac;
    position: absolute;
    top: 0;
    left: 0;
}
.ticket-infor h4 {
    margin-bottom: 20px;
    padding-left: 26px;
    font-size: 19px;
    font-weight: bold;
    background: url("../img/img_bul.svg") no-repeat 0 4px;
}
.ticket-infor p {
    font-size: 17px;
    font-weight: normal;
    line-height: 1.47;
}
.ticket-infor p + p {
    margin-top: 15px;
}

/* 제작가이드북 */
.guideBook {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.guideBook.bg01 {
    padding: 123px 0 179px 330px;
    background: #040407 url("../img/bg_guideBook01.png") no-repeat center 398px;
}
.guideBook.bg02 {
    padding: 123px 0 214px 330px;
    background: #070710 url("../img/bg_guideBook02.png") no-repeat center 305px;
}
.guideBook .inner {
    width: 871px;
    margin: 0;
}
.guideBook h1 {
    font-size: 37px;
    font-weight: 800;
    line-height: 1.19;
    color: #fff;
}
.guideBook.bg01 h1 {
    margin-bottom: 5px;
}
.guideBook.bg02 h1 {
    margin-bottom: 35px;
}
.guideBook.bg02 h1 span {
    font-size: 25px;
    font-weight: normal;
    color: #96b8f9;
}
.guideBook h2 {
    margin-bottom: 45px;
    font-size: 25px;
    font-weight: normal;
    line-height: 1.2;
    color: #96b8f9;
}
.guide-book-top {
    margin-bottom: 45px;
    padding-bottom: 45px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.guideBook .guide-book-top .txt01 {
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
    color: #a4a4a4;
}
.guideBook .guide-book-top .txt01 + .txt01 {
    margin-top: 25px;
}
.guideBook .guide-book-top .txt02 {
    margin-top: 30px;
    font-size: 19px;
    line-height: 35px;
    color: #fff;
}
.guideBook .guide-book-top .txt02 strong {
    font-weight: bold;
    color: #fc4848;
}
.guideBook.bg01 .guide-book-top .txt02 {
    font-weight: normal;
}
.guideBook.bg02 .guide-book-top .txt02 {
    font-weight: bold;
}
.agree-area {
    margin-bottom: 25px;
}
.agree-area label {
    margin-right: 54px;
    font-size: 17px;
    font-weight: normal;
    color: #fff;
}
.agree-area .view-full-text {
    font-size: 17px;
    font-weight: normal;
    color: #fff;
}
.application-area {
    align-items: center;
    margin-bottom: 93px;
    position: relative;
}
.application-area input[type="text"] {
    width: 414px;
    height: 60px;
    padding: 8px 120px 8px 15px;
    border-radius: 3px;
    background-color: #fff;
    font-size: 17px;
    font-weight: bold;
    color: #3d3d3d;
}
.application-area button {
    width: 107px;
    height: 44px;
    line-height: 44px;
    border-radius: 3px;
    background-color: #0d398e;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 8px;
    left: 299px;
}
.application-area button:hover {
    background-color: #3d3d3d;
}
.application-area span {
    margin-left: 37px;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.47;
    color: #fff;
}
.application-area span a {
    font-weight: bold;
    color: #fc4848;
}
.guide-book-bottom dl dt {
    margin-bottom: 25px;
}
.guide-book-bottom dl dd {
    font-size: 17px;
    font-weight: normal;
    color: #fff;
}
.cls {
    display: block;
    position: absolute;
    top: 130px;
    left: 1562px;
}

/* GoodPello 소개 */
.presentation {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgb(30, 41, 59) 34%,
        rgb(219, 225, 233) 66%
    );
    position: relative;
}
.presentation .inner {
    box-sizing: border-box;
}
.intro-cont {
    padding: 77px 0 102px 396px;
    background-color: #dbe1e9;
}
.intro-cont h1 {
    margin-bottom: 30px;
    font-size: 49px;
    font-weight: 800;
    line-height: 1.02;
    color: #3d3d3d;
}
.intro-cont h2 {
    margin-bottom: 20px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.33;
}
.intro-cont .txt01 {
    margin-bottom: 50px;
    font-size: 21px;
    line-height: 1.57;
}
.intro-cont .txt02 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.33;
}
.intro-list {
    margin-bottom: 80px;
}
.intro-list li {
    padding: 15px 0 5px 150px;
    background-position: 0 0;
    background-repeat: no-repeat;
}
.intro-list li + li {
    margin-top: 35px;
}
.intro-list li:nth-child(1) {
    background-image: url("../img/img_intro01.svg");
}
.intro-list li:nth-child(2) {
    background-image: url("../img/img_intro02.svg");
}
.intro-list li:nth-child(3) {
    background-image: url("../img/img_intro03.svg");
}
.intro-list li:nth-child(4) {
    background-image: url("../img/img_intro04.svg");
}
.intro-list li h3 {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: bold;
}
.intro-list li p {
    font-size: 18px;
    line-height: 1.67;
}
.intro-etc {
    width: 320px;
    height: 100%;
    padding: 97px 98px 0 0;
    background-color: #1e293b;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
.intro-etc h2 {
    margin-bottom: 60px;
}
.intro-etc dl + dl {
    margin-top: 30px;
}
.intro-etc dl dt {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
}
.intro-etc dl dd {
    font-size: 18px;
    font-weight: normal;
    line-height: 1.39;
    color: #939dae;
}
.intro-etc dl.map dt {
    margin-bottom: 20px;
}
.intro-etc dl.map dd a {
    display: block;
    padding: 10px 0 10px 55px;
    font-size: 18px;
    color: #939dae;
    background: url("../img/icon_map.svg") no-repeat 0 0;
}
.intro-etc dl.map dd a:hover {
    color: #5ec2c5;
    background-image: url("../img/icon_map_on.svg");
}
.presentation .cls {
    top: 78px;
    left: auto;
    right: 0;
}
.presentation .left-bg {
    width: 28%;
    height: 100%;
    background-color: #1e293b;
    position: absolute;
    top: 0;
    left: 0;
}

/*  이용요금 */
.usage-fee-guide .top p {
    margin-bottom: 50px;
    font-size: 17px;
    line-height: 1.76;
}
.service-guide .top p > strong {
    font-weight: bold;
    color: #1d9ccc;
}
.service-guide h4 {
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: bold;
}
.service-guide .usage-fee-list {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #acacac;
}
.service-guide .bul-dot li {
    padding-left: 15px;
    position: relative;
    font-size: 17px;
    color: #3d3d3d;
    line-height: 1.76;
}
.service-guide .bul-dot li::before {
    content: "•";
    font-size: 17px;
    color: #3d3d3d;
    position: absolute;
    top: -2px;
    left: 0;
}

/* 검색결과 */
.searchWrap .topArea .select-area {
    position: absolute;
    top: 29px;
    right: 0;
}
.searchWrap .topArea {
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid #3d3d3d;
}
.searchWrap .topArea .select-area select:first-child + .nice-select {
    width: 170px;
}
.search-result {
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid#acacac;
}
.search-result.end {
    margin-bottom: 100px;
    padding-bottom: 0;
    border-bottom: 0;
}
.search-result h4 {
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: bold;
}
.search-result .list {
    gap: 40px 20px;
}
.search-result .list .product-name {
    max-width: 300px;
}
.no-result {
    margin: 100px 0 40px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.43;
    text-align: center;
}

/* 장바구니에서 다운로드 */
.download {
    position: relative;
}
.download .tit02 {
    margin-bottom: 30px;
}
.download .txt01 {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: normal;
}
.download-cont {
    display: flex;
    gap: 0 50px;
    margin-bottom: 50px;
}
.download-list {
    width: 864px;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
}
.download-list dl {
    display: flex;
    padding: 30px 0;
    border-bottom: 1px solid #acacac;
}
.download-list dl:last-child {
    border-bottom: 0;
}
.download-list dl dt {
    width: 252px;
    height: 142px;
    margin: 0 30px 0 0;
    background-color: #f5f7fb;
}
.download-list dl dd {
    padding: 20px 0 0 0;
    font-size: 18px;
    font-weight: bold;
    color: #3d3d3d;
    line-height: 1.39;
}
.use-rights-infor {
    width: 346px;
    height: 608px;
    padding: 30px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fbfbfb;
    box-sizing: border-box;
}
.use-rights-infor h4 {
    margin-bottom: 25px;
    font-size: 18px;
    font-weight: bold;
}
.use-rights-infor p {
    padding-left: 13px;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.67;
    position: relative;
}
.use-rights-infor p + p {
    margin-top: 20px;
}
.use-rights-infor p::before {
    content: "•";
    font-size: 17px;
    color: #3d3d3d;
    position: absolute;
    top: -1px;
    left: 0;
}
.download .btnLeft {
    display: flex;
    gap: 0 10px;
    margin: 0;
    position: absolute;
    left: 0;
    z-index: 10;
}
.download .btnLeft button {
    display: block;
    height: 50px;
    padding: 13px 20px;
    border-radius: 3px;
    border: solid 1px #b1b1b1;
    background-color: #fff;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s ease;
}
.download .btnLeft button:hover {
    border-color: #0d398e;
    background-color: #0d398e;
    color: #fff;
}
.download .listBottom {
    width: 864px;
}

/* 장바구니에서 다운로드 주문완료 */
.download-order .order-complete-details {
    padding: 0 0 0 50px;
}
.download-order .ticket-infor {
    margin-left: 0;
    padding-left: 0;
}
.download-order .ticket-infor::before {
    display: none;
}
.download-order .btnRight {
    margin-left: auto;
}
.download-order .btnRight .button {
    padding: 0 39px 0 40px;
    border: solid 1px #3d3d3d;
    background-color: #fff;
    font-weight: bold;
    transition: all 0.3s ease;
}
.download-order .btnRight .button:hover {
    border-color: #0d398e;
    background-color: #0d398e;
    color: #fff;
}
.bul-dash {
    padding-left: 12px;
    font-size: 17px;
    position: relative;
}
.bul-dash::before {
    content: "-";
    font-size: 17px;
    font-weight: normal;
    color: #3d3d3d;
    position: absolute;
    top: 0;
    left: 0;
}

/* 25년 추가 */
.checkOut .d-flex {
    gap: 56px;
}
.infor-input-box {
    width: 597px;
    padding: 35px 30px 28px 28px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
}
.infor-input-box h4,
.summary-infor h4 {
    margin-bottom: 25px;
    font-size: 19px;
    font-weight: 800;
}
.checkOut .infor-input-list {
    margin-bottom: 40px;
}
.infor-input-list li.d-flex {
    flex-wrap: wrap;
    gap: 0 17px;
}
.infor-input-list li + li {
    margin-top: 20px;
}
.infor-input-list li span {
    width: 48.4%;
}
.infor-input-list li input[type="text"],
.infor-input-list li input[type="email"],
.infor-input-list li .nice-select {
    width: 100%;
}
.infor-input-list li input[type="text"].w-auto {
    width: auto;
}
.infor-input-list li label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
    position: relative;
}
.infor-input-list li label.required::after {
    content: "*";
    font-size: 17px;
    font-weight: bold;
    color: #3d3d3d;
}
.select-payment-method {
    margin: 0 0 40px 0;
    padding: 40px 0 30px;
    border-top: 1px solid#acacac;
    border-bottom: 1px solid#acacac;
}
.select-payment-method > ul {
    display: flex;
    gap: 0 30px;
}
.infor-input-box .checkTxt {
    margin: 0 0 15px 0;
    font-size: 16px;
    line-height: 1.56;
    color: #333;
}
.infor-input-box p strong {
    border-bottom: 1px solid #333;
}
.summary-infor {
    padding: 34px 0 0 0;
    border-top: 1px solid #3d3d3d;
}
.summary-infor h5 {
    margin: 0 0 15px 0;
    font-size: 17px;
    font-weight: bold;
}
.summary-infor .txt01 {
    margin: 0 0 35px 0;
    font-size: 16px;
    line-height: 1.56;
    color: #333;
}
.summary-infor .txt01 strong {
    border-bottom: 1px solid #333;
}
.summary-infor button {
    width: 100%;
}
.payment-cycle {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid#acacac;
}
.payment-cycle ul li {
    display: flex;
}
.payment-cycle ul li + li {
    margin-top: 15px;
}
.payment-cycle ul li input[type="radio"]:checked + label {
    color: #043dc1;
}
.payment-cycle ul li span,
.annual-subscription p span {
    margin-left: auto;
    font-size: 17px;
}
.payment-cycle ul li span em,
.annual-subscription p span em {
    display: inline-block;
    margin: 0 3px 0 2px;
}
.annual-subscription {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid#acacac;
}
.annual-subscription p {
    display: flex;
}
.annual-subscription p + p {
    margin-top: 15px;
}
.summary-infor .total {
    display: flex;
    margin-bottom: 35px;
}
.summary-infor .total dt {
    font-size: 17px;
    font-weight: bold;
}
.summary-infor .total dd {
    display: flex;
    margin-left: auto;
    font-size: 24px;
    font-weight: 800;
}
.summary-infor .total dd em {
    padding: 0 5px 0 6px;
    font-size: 24px;
    font-weight: normal;
}
.team-plan {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #acacac;
}
.team-plan .txt01 {
    margin-bottom: 25px;
    font-size: 22px;
    font-weight: 800;
    color: #3d3d3d;
}
.team-plan .txt02 {
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.6;
    color: #3d3d3d;
}
.team-plan label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.team-plan .nice-select {
    margin-bottom: 15px;
    padding: 12px 10px 10px;
}
.infor-input-box .team-plan h4 {
    margin-bottom: 15px;
    font-size: 17px;
    font-weight: 800;
}
.team-plan ul {
    display: flex;
    gap: 0 30px;
}
.credit-card,
.paypal {
    display: none;
    margin-top: 30px;
}
.card-list {
    display: flex;
    gap: 0 5px;
    margin-bottom: 25px;
}
.card-list li {
    width: 100%;
}
.card-list li a {
    display: block;
    width: 100%;
    height: 55px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
}
.card-list li:nth-child(1) a {
    background-image: url(../img/img_card01.svg);
}
.card-list li:nth-child(2) a {
    background-image: url(../img/img_card02.svg);
}
.card-list li:nth-child(3) a {
    background-image: url(../img/img_card03.svg);
}
.card-list li:nth-child(4) a {
    background-image: url(../img/img_card04.svg);
}
.credit-card label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.card-num-input {
    margin-bottom: 25px;
}
.card-num-input input {
    width: 100%;
}
.card-etc-input {
    display: flex;
    gap: 0 13px;
    width: 100%;
}
.card-etc-input span {
    display: block;
    width: 100%;
}
.card-etc-input span input {
    width: 100%;
}
.paypal a {
    display: block;
    width: 130px;
    height: 55px;
    margin: 0 0 25px 0;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background: #fff url(../img/img_paypal.svg) no-repeat center;
}

/* 내계정 */
.myAccount h4 {
    margin-bottom: 15px;
}
.both-sides {
    display: flex;
    gap: 0 30px;
    margin-bottom: 50px;
    position: relative;
}
.gray-box {
    width: 620px;
    padding: 30px;
    border-radius: 3px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
    box-sizing: border-box;
}
.gray-box h5 {
    margin-bottom: 15px;
    font-size: 19px;
    font-weight: 800;
}
.gray-box p {
    font-size: 17px;
}
.gray-box p + p {
    margin-top: 10px;
}
.gray-box .first-block {
    margin: 0 0 30px 0;
    padding: 0 0 30px 0;
    border-bottom: 1px solid #b4b4b4;
}
.gray-box .button-line {
    display: block;
    margin-top: 15px;
}
.flex-left .payment-method-card {
    display: flex;
    align-items: center;
    gap: 0 15px;
}
.service-usage-infor {
    width: 390px;
    position: absolute;
    top: 0;
    left: 651px;
}
.service-usage-infor .tit03 {
    padding-bottom: 15px;
    border-bottom: 1px solid #3d3d3d;
    font-weight: 700;
}
.service-usage-infor dl dt {
    margin-bottom: 10px;
    font-size: 17px;
}
.service-usage-infor dl dd {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
}
.service-usage-infor dl dd a {
    display: block;
    font-size: 15px;
    border-bottom: 1px solid #3d3d3d;
    position: absolute;
    top: 2px;
    right: 0;
}
.service-usage-infor dl dd a:hover {
    color: #0d398e;
    border-bottom-color: #0d398e;
}
.both-sides .flex-right {
    width: 390px;
}
.both-sides .flex-right > h5 {
    margin-bottom: 20px;
    font-size: 19px;
    font-weight: 800;
}
.both-sides .flex-right .first-block {
    margin-bottom: 20px;
    padding: 20px 0;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid#acacac;
}
.flex-right .first-block dl dt {
    margin-bottom: 10px;
    font-size: 17px;
}
.flex-right .first-block dl dd {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
}
.flex-right .first-block dl dd span {
    display: inline-block;
    font-size: 15px;
    margin-left: 3px;
}
.flex-right .first-block dl dd span em {
    font-size: 17px;
}
.flex-right .first-block dl dd a {
    display: block;
    font-size: 15px;
    border-bottom: 1px solid #3d3d3d;
    position: absolute;
    top: 2px;
    right: 0;
}
.flex-right .first-block dl dd a:hover {
    color: #0d398e;
    border-color: #0d398e;
}
.subscription-details .both-sides .flex-right {
    padding: 250px 0 0 0;
}
.subscription-details.subscription-details01 .both-sides .flex-right {
    padding: 195px 0 0 0;
}
.subscription-details .flex-right .first-block {
    background: url(../img/bg_account01.png) no-repeat 0 90px;
    margin-bottom: 0;
    border-bottom: 0;
    border-top: 1px solid #acacac;
}
.warningTxt {
    padding: 20px 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.6;
    color: #d81b1b;
}
.flex-right .second-block {
    background: url(../img/bg_account01.png) no-repeat 0 70px;
}
.myAccount .flex-right .first-block .txt01,
.flex-right .second-block .txt01 {
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
}
.myAccount .flex-right .first-block .txt02,
.flex-right .second-block .txt02 {
    margin-bottom: 115px;
    font-size: 17px;
}
.myAccount .button-color01 {
    width: 262px;
    font-weight: bold;
}
.receipt .tit03 {
    margin-bottom: 30px;
}
.vertival-list-box {
    width: 1040px;
}
.vertival-list-box > li {
    display: flex;
    align-items: center;
    width: 100%;
    height: 55px;
    padding: 13px 13px 12px 20px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    position: relative;
}
.vertival-list-box > li:hover {
    background-color: #f8f8f8;
}
.vertival-list-box > li + li {
    margin-top: 10px;
}
.vertival-list-box > li p {
    font-size: 17px;
    font-weight: normal;
}
.vertival-list-box > li p + p {
    margin-left: 45px;
}
.vertival-list-box .btnWrap {
    position: absolute;
    top: 11px;
    right: 13px;
}
.vertival-list-box .btnWrap button {
    display: block;
    width: 30px;
    height: 30px;
    padding: 3px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #f8f8f8;
    background-position: center;
    background-repeat: no-repeat;
}
.vertival-list-box .btnWrap button:hover {
    border-color: #3d3d3d;
}
.vertival-list-box .btnWrap .printBtn {
    background-image: url(../img/icon_print.svg);
}
.vertival-list-box .btnWrap .downloadBtn {
    background-image: url(../img/icon_download.svg);
}

/* 결제방법업데이트 */
.update-payment-method {
    width: 596px;
}
.update-payment-method .vertival-list-box {
    width: 100%;
    margin-bottom: 20px;
}
.update-payment-method .vertival-list-box > li {
    width: 100%;
    height: auto;
    padding: 27px 30px;
    flex-wrap: wrap;
}
.update-payment-method .vertival-list-box > li + li {
    margin-top: 15px;
}
.update-payment-method .vertival-list-box > li span,
.update-payment-method .vertival-list-box > li ul {
    margin-left: auto;
}
.update-payment-method .vertival-list-box > li ul {
    gap: 0 15px;
}
.update-payment-method .txt01 {
    margin-bottom: 50px;
    font-size: 17px;
    line-height: 1.76;
}
.update-payment-method .vertival-list-box > li .hide-cont {
    flex-basis: 100% !important;
    margin-top: 40px;
}

/* 결제정보업데이트 */
.update-payment-infor {
    background: url(../img/bg_account02.png) no-repeat 639px 81%;
}
.update-payment-infor h4 {
    margin-bottom: 20px;
}
.update-payment-infor .infor-input-list {
    width: 539px;
}
.update-payment-infor .infor-input-list li .guideTxt {
    display: block;
    margin: 12px 0 0 0;
    font-size: 15px;
}
.update-payment-infor .btnWrap {
    margin: 50px 0 0 0;
    padding: 20px 0 0 0;
    border-top: 1px solid #acacac;
}

/* 계정상세정보 */
.account-details {
    background-image: url(../img/bg_account03.png);
    background-repeat: no-repeat;
}
.account-details.bg01 {
    background-position: 100% 50%;
}
.account-details.bg02 {
    background-position: 637px 63%;
}
.account-details .sub-area {
    margin-bottom: 70px;
}
.account-details .sub-area h4 {
    margin-bottom: 20px;
}
.account-details .sub-area01 .infor-input-list {
    width: 537px;
}
.account-details .sub-area02 .infor-input-list {
    width: 814px;
    margin-bottom: 15px;
}
.account-details .sub-area02 .infor-input-list.error-group {
    margin-bottom: 0px;
}
.account-details .sub-area02 .infor-input-list .error {
    margin: 0px;
}
.account-details .sub-area02 .infor-input-list li span {
    width: 31.9%;
}
.account-details .sub-area02 .infor-input-list li span input {
    width: 100%;
}
.account-details .sub-area02 .button-line {
    padding: 0 36px;
    font-weight: bold;
}
.bul-txt {
    padding: 2px 0 1px 29px;
    font-size: 16px;
    background: url(../img/img_bul01.svg) no-repeat 0 4px;
}
.bul-txt-color01 {
    color: #279da5;
    font-weight: bold;
    background-image: url(../img/img_bul02.svg);
}
.bul-txt01 {
    padding: 0 0 0 13px;
    line-height: 1.44;
    font-size: 16px;
    color: #333;
    position: relative;
}
.bul-txt01::before {
    content: "•";
    font-size: 16px;
    position: absolute;
    top: -2px;
    left: 0;
}
.account-details.bg01 .bul-txt {
    background-position: 0 -1px;
}
.subscribe-newsletter {
    position: relative;
}
.subscribe-newsletter .d-flex {
    gap: 0 25px;
}
.subscribe-newsletter a {
    display: block;
    margin-top: 30px;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 17px;
}
.subscribe-newsletter a:hover {
    color: #0d398e;
}
.account-details .btnWrap {
    margin: 60px 0 0 0;
    padding: 20px 0 0 0;
    border-top: 1px solid #acacac;
}

/* 구독취소 */
.unsubscribe .both-sides {
    gap: 0 70px;
}
.unsubscribe .both-sides .flex-left {
    width: 800px;
}
.unsubscribe .flex-left .tit03 {
    margin-bottom: 35px;
}
.unsubscribe .flex-left .tit04 {
    margin-bottom: 15px;
}
.unsubscribe .flex-left h6 {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: bold;
}
.unsubscribe .flex-left .sub-area01 {
    margin-bottom: 70px;
}
.unsubscribe .flex-left .txt01 {
    margin-bottom: 40px;
    font-size: 17px;
    line-height: 1.47;
}
.unsubscribe .flex-left .txt01.lh30 {
    line-height: 30px;
}
.unsubscribe .flex-left .txt02 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
}
.unsubscribe .flex-left ul li {
    margin-bottom: 20px;
    font-size: 17px;
}
.unsubscribe .flex-left ul.user-guide {
    margin-bottom: 15px;
}
.unsubscribe .flex-left ul.user-guide li {
    margin-bottom: 0;
    padding: 0 0 0 10px;
    line-height: 1.47;
    position: relative;
}
.unsubscribe .flex-left ul.user-guide li::before {
    content: "-";
    font-size: 17px;
    position: absolute;
    top: -1px;
    left: 0;
}
.notice-box {
    width: 100%;
    height: 85px;
    margin: 0 0 30px 0;
    padding: 17px 20px 18px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.47;
}
.unsubscribe .flex-left .sub-area02 .txt02 {
    margin-bottom: 20px;
}
.unsubscribe .flex-left .sub-area02 textarea {
    width: 100%;
    height: 111px;
    margin: 0 0 40px 0;
    padding: 20px;
}
.btnWrap.bottom {
    margin: 50px 0 0 0;
    padding: 20px 0 0 0;
    border-top: 1px solid #acacac;
}

/* 팀업그레이드 */
.backward {
    display: block;
    margin-bottom: 20px;
    padding: 0 0 0 17px;
    font-size: 15px;
    font-weight: bold;
    background: url(../img/arrow_left.svg) no-repeat 0 2px;
}
.team .flex-left {
    width: 620px;
}
.team .flex-right {
    width: 320px;
}
.notice-box-white {
    width: 100%;
    margin: 0 0 25px;
    padding: 15px;
    border-radius: 5px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 15px;
    line-height: 1.47;
    box-sizing: border-box;
}
.notice-box-white strong {
    display: block;
}
.team .flex-left .txt01 {
    margin: 0 0 25px;
    font-size: 22px;
    font-weight: 800;
}
.team .flex-left .txt02 {
    margin: 0 0 20px;
    font-size: 17px;
}
.team .flex-left .txt02 a {
    display: inline-block;
    font-weight: bold;
    border-bottom: 1px solid #3d3d3d;
}
.team .flex-left .txt02 a:hover {
    color: #0d398e;
    border-color: #0d398e;
}
.team .flex-left .txt03 {
    margin: 0 0 20px;
    font-size: 15px;
}
.team .flex-left label {
    display: block;
    margin: 0 0 5px;
    font-size: 17px;
    font-weight: bold;
}
.team .flex-left .nice-select {
    margin-bottom: 15px;
    padding: 12px 10px 9px;
}
.team .flex-left .select-license {
    margin-bottom: 25px;
}
.team .flex-left .select-license dt {
    margin: 0 0 15px;
    font-size: 17px;
    font-weight: 800;
}
.team .flex-left .select-license dd.d-flex {
    gap: 0 35px;
}
.team .flex-left .scond-block {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid#acacac;
}
.team .flex-left .scond-block p {
    display: flex;
}
.team .flex-left .scond-block p + p {
    margin-top: 15px;
}
.team .flex-left .scond-block p span {
    margin-left: auto;
    font-size: 17px;
}
.team .flex-left .scond-block p span em {
    display: inline-block;
    margin: 0 3px 0 2px;
}
.team .total {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}
.team .total dt {
    padding: 3px 0 0 0;
    font-size: 17px;
    font-weight: bold;
}
.team .total dd {
    display: flex;
    margin-left: auto;
    font-size: 24px;
    font-weight: 800;
}
.team .total dd em {
    padding: 0 5px 0 6px;
    font-size: 24px;
    font-weight: normal;
}
.team .gray-box .button-line {
    margin: 0;
}
.team .gray-box .btnWrap.bottom {
    margin: 0;
}
.flex-right .first-block dl dd.downloadable-count {
    margin-bottom: 0;
}
.flex-right .first-block dl dd.downloadable-count span {
    font-size: 18px;
    margin: 0 3px 0 0;
}
.flex-right .first-block dl dd.downloadable-count .slash {
    margin: 0 3px;
}

/* 팀 구독상세 정보 */
.subscription-details-team {
    margin-bottom: 50px;
    position: relative;
}
.subscription-details-team .service-usage-infor .inforCont {
    padding-bottom: 20px;
    border-bottom: 1px solid #acacac;
}
.subscription-details-team .service-usage-infor button {
    display: block;
    margin-top: 20px;
}

/* 팀 멤버 변경 */
.notice-box-red {
    width: 100%;
    margin: 0 0 25px;
    padding: 13px 15px 14px;
    border-radius: 5px;
    border: solid 1px #e81212;
    background-color: #fff;
    font-size: 15px;
    color: #e81212;
    line-height: 1.47;
}
.team-members-change .gray-box .first-block {
    padding: 0 0 25px 0;
}
.team.team-members-change .flex-left .scond-block {
    margin-bottom: 20px;
    padding-bottom: 30px;
}
.team-members-change .gray-box .third-block {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #acacac;
}
.team-members-change .gray-box .third-block p {
    display: flex;
}
.team-members-change .gray-box .third-block p span {
    margin-left: auto;
}

/* 팀관리 */
.team.team-member-list .flex-left {
    width: 700px;
}
.team.team-member-list .vertival-list-box {
    width: 100%;
}
.team.team-member-list .flex-right {
    width: 390px;
}
.team-member-list .d-flex {
    gap: 0 29px;
    margin-bottom: 20px;
    position: relative;
}
.team-member-list .d-flex p {
    font-size: 17px;
}
.team-member-list .d-flex .question-mark {
    display: block;
    width: 25px;
    height: 25px;
    margin-left: auto;
    background: url(../img/icon_question.svg) no-repeat 0 0;
    position: relative;
}
.question-mark .tooltiptext {
    visibility: hidden;
    width: 268px;
    height: 248px;
    padding: 20px 20px 33px 20px;
    background-color: #3d3d3d;
    border-radius: 3px;
    position: absolute;
    z-index: 1;
    bottom: 188%;
    left: 50%;
    margin-left: -36px;
    opacity: 0;
    transition: opacity 1s;
}
.question-mark .tooltiptext h5 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}
.question-mark .tooltiptext ul li {
    font-size: 17px;
    line-height: 1.47;
    color: #fff;
}
.question-mark .tooltiptext ul + h5 {
    margin-top: 20px;
}
.question-mark .tooltiptext::after {
    content: "";
    width: 17px;
    height: 13px;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -105px;
    background: url(../img/img_tooltip.png) no-repeat 0 0;
}
@media (hover: hover) {
    .question-mark:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }
}
.team-member-list .vertival-list-box > li {
    padding: 15px;
    position: relative;
}
.team-member-list .vertival-list-box > li span {
    font-size: 17px;
}
.team-member-list .vertival-list-box > li .situation {
    width: 55px;
    height: 25px;
    margin: 0 20px 0 0;
    padding: 3px 0 2px;
    text-align: center;
    border-radius: 3px;
    border: solid 1px #828282;
    background-color: #fff;
    font-size: 15px;
    font-weight: bold;
    color: #828282;
}
.team-member-list .vertival-list-box > li .situation.owner {
    background-color: #18b4a9;
    border-color: #18b4a9;
    color: #fff;
}
.team-member-list .vertival-list-box > li .situation.teamMem {
    border-color: #18b4a9;
    color: #18b4a9;
}
.team-member-list .vertival-list-box > li .situation.time {
    padding: 3px 5px 2px;
    text-align: left;
    background: url(../img/img_small_clock.svg) no-repeat 90% center;
}
.team-member-list .vertival-list-box > li .member-name {
    width: 217px;
}
.team-member-list .vertival-list-box > li button {
    display: block;
    margin-left: auto;
}
.team-member-list .vertival-list-box > li .delBtn {
    width: 20px;
    height: 23px;
    background: url(../img/icon_del.svg) no-repeat 0 0;
}
.team-member-list .vertival-list-box > li .threePointBtn {
    width: 25px;
    height: 25px;
    background: url(../img/icon_threePoints.svg) no-repeat 0 0;
}
.hidden-box {
    display: none;
    width: 158px;
    /* height: 77px; */
    border-radius: 3px;
    border: solid 1px #979797;
    background-color: #fff;
    position: absolute;
    top: -73px;
    right: -49px;
    z-index: 10;
}
.hidden-box a {
    display: block;
    padding: 10px 15px;
    font-size: 15px;
    transition: all 0.3s ease;
}
.hidden-box a:first-child {
    border-bottom: 1px solid #979797;
}
.hidden-box a:hover {
    background-color: #3d3d3d;
    color: #fff;
}
.team.team-member-list .flex-right dl dd strong {
    margin-left: auto;
}
.team.team-member-list .flex-right label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.team.team-member-list .flex-right input[type="text"],
.team.team-member-list .flex-right input[type="email"] {
    display: block;
    margin-bottom: 10px;
}
.team.team-member-list .notify {
    margin-bottom: 20px;
    padding: 0 0 0 53px;
    font-size: 17px;
    line-height: 23px;
    background: url(../img/img_clock.svg) no-repeat 0 0;
    position: relative;
}
.team.team-member-list .notify a {
    display: block;
    font-size: 17px;
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.team.team-member-list .notify a:hover {
    color: #0d398e;
}
.team.team-member-list .flex-right .txt01 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
}
.team.team-member-list .flex-right .txt02 {
    margin-bottom: 20px;
    font-size: 17px;
}
.button-change-owner {
    height: 28px;
    line-height: 28px;
    margin: 0 0 0 20px;
    padding: 0 17px 0 18px;
    border-radius: 23px;
    border: solid 1px #3d3d3d;
    background-color: #fff;
    font-size: 15px;
    position: absolute;
    top: 0;
    left: 82px;
}
.button-change-owner:hover {
    background-color: #3d3d3d;
    color: #fff;
}

/* 내 프로젝트 */
.titArea01 {
    margin: 0 0 30px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #acacac;
}
.titArea01 p {
    font-size: 20px;
}
.titArea01 .right-side {
    position: absolute;
    top: 58px;
    right: 0;
}
.titArea01 .right-side.d-flex {
    align-items: end;
    top: 32px;
}
.titArea01 .right-side .helpTxt {
    display: block;
    margin-right: 40px;
    padding-left: 26px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
}
.titArea01 .right-side .helpTxt::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 17px;
    background: url(../img/img_bul.svg) no-repeat 0 0;
    position: absolute;
    top: 1px;
    left: 0;
}
.titArea01 .right-side .button-line {
    width: 220px;
    padding: 0 19px 0 39px;
    text-align: left;
    border: solid 1px #979797;
    font-size: 18px;
    font-weight: bold;
    position: relative;
}
.titArea01 .right-side .button-line:hover {
    border-color: #3d3d3d;
}
.titArea01 .right-side .button-line::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    background: url(../img/img_plus.svg) no-repeat 0 0;
    position: absolute;
    top: 17px;
    left: 18px;
}
.topArea .search-area input[type="text"] {
    width: 327px;
}
.topArea .search-area .searchBtn {
    width: 69px;
    height: 45px;
    margin-left: 5px;
    padding: 13px 0 12px;
    text-align: center;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
}
.topArea .search-area .searchBtn:hover {
    border-color: #3d3d3d;
    background-color: #3d3d3d;
    color: #fff;
}
.topArea .period-area {
    margin-left: 70px;
}
.topArea .nice-select {
    width: 140px;
    margin-left: auto;
    padding: 12px 10px 10px;
}
.topArea .period-area button {
    height: 45px;
    padding: 13px 20px 12px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
    font-weight: normal;
}
.topArea .period-area button:hover {
    border-color: #3d3d3d;
    background-color: #3d3d3d;
    color: #fff;
}
.topArea .period-area button + button {
    margin-left: 5px;
}
.listArea01 {
    margin: 30px 0 80px;
}
.listArea01 .list {
    gap: 50px 28px;
}
.listArea01 .list li a {
    display: block;
}
.listArea01 .list li .imgArea {
    width: 401px;
    height: 227px;
    margin-bottom: 15px;
    position: relative;
}
.listArea01 .list.detailed-list li .imgArea {
    width: 300px;
    height: 336px;
}
.listArea01 .list.detailed-list li .img {
    overflow: visible;
}
.listArea01 .list li .imgArea .img {
    margin: 0;
}
.listArea01 .list li .img img {
    transition: all ease 0.3s;
}
@media (hover: hover) {
    .listArea01 .list li .img:hover img {
        transform: scale(1.05, 1.05);
    }
}

.latest-updated-list ul li .img,
.list li .img {
    overflow-x: visible;
    overflow-y: clip;
}

.listArea01 .list li .img:hover img + .hidden-icon-area,
.listArea .list li .img:hover img + .hidden-icon-area,
.latest-updated-list li .img:hover img + .hidden-icon-area,
.best-template-list li .img:hover img + .hidden-icon-area,
.latest-free-list li .img:hover img + .hidden-icon-area,
.new-update-list li .img:hover img + .hidden-icon-area,
.slick-track
    li.slick-slide.slick-current.slick-active
    .img:hover
    img
    + .hidden-icon-area {
    display: block;
}
.listArea01 .list li .hidden-icon-area {
    height: 100%;
    background-color: rgba(120, 120, 120, 0.5);
    cursor: pointer;
}
.listArea01 .list li .hidden-icon-area .hidden-Txt {
    padding: 80px 0 0 0;
    text-align: center;
    font-size: 57px;
    font-weight: bold;
}
.listArea01 .list li .hidden-icon-area .hidden-num {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 23px;
    font-weight: bold;
    color: #fff;
}
.list li .imgArea.d-flex-wrap {
    gap: 5px;
    border: 0;
}
.list li .imgArea.d-flex-wrap > div {
    width: 198px;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #f5f7fb;
    border: solid 1px #c4c4c4;
    position: relative;
}
.list li .imgArea > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.list li .imgArea.d-flex-wrap > div > img {
    display: block;
    height: 100%;
    object-fit: cover;
}
.list li .imgArea.three-img > div:last-child {
    border: 0;
    background-color: #fff;
}
.list li .imgArea.three-img > div:last-child > div {
    width: 100%;
    height: 111px;
    border: solid 1px #c4c4c4;
    background-color: #f5f7fb;
}
.list li .imgArea.three-img > div:last-child > div + div {
    margin-top: 5px;
}
.list li .imgArea.four-img > div {
    height: 111px;
}
.listArea01 ul li .product-name {
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.listArea01 ul li .type {
    font-size: 17px;
}
.listArea01 .detailed-list li .hidden-icon-area {
    background-color: transparent;
    opacity: 1;
}
.listArea01 .detailed-list li .hidden-icon01 .collection .tooltiptext {
    margin-left: -110px;
}
.listArea01 .detailed-list li .hidden-icon01 .down .tooltiptext {
    margin-left: -40px;
}
.listArea01 .detailed-list li .hidden-icon-area .seeMore .tooltiptext {
    margin-left: 19px;
}
.moreBox {
    display: none;
    width: 165px;
    height: 73px;
    padding: 5px;
    border-radius: 3px;
    background-color: #0b0b07;
    position: absolute;
    bottom: -83px;
    right: 0;
    box-sizing: border-box;
    z-index: 50;
}
.moreBox a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    background-position: 5px 3px;
    background-repeat: no-repeat;
    font-size: 15px;
    color: #fff;
}
.moreBox a:hover {
    border-radius: 3px;
    background-color: #383838;
}

/* 상세페이지 */
.shareBox {
    display: none;
    width: 158px;
    border-radius: 3px;
    border: solid 1px #979797;
    background-color: #fff;
    position: absolute;
    top: 70px;
    left: -42px;
    z-index: 100;
}
.shareBox ul {
    padding: 15px 15px 16px 15px;
}
.shareBox ul li + li {
    margin-top: 10px;
}
.shareBox ul li a {
    display: block;
    width: 100%;
    height: 34px;
    padding: 8px 0 0 44px;
    border-radius: 0;
    background: none;
    font-size: 15px;
    font-weight: normal;
    box-sizing: border-box;
    position: relative;
}
.shareBox ul li a:hover {
    background-color: transparent;
    border: 0;
}
.shareBox ul li a::before {
    content: "";
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: solid 1px #bbb;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in;
}
.shareBox ul li a:hover::before {
    background-color: #3d3d3d;
    border-color: #3d3d3d;
}
.shareBox ul li.pinterest a::before {
    background-image: url("../img/icon_pinterest.svg");
}
.shareBox ul li.pinterest a:hover::before {
    background-image: url("../img/icon_pinterest_on.svg");
}
.shareBox ul li.instagram a::before {
    background-image: url("../img/icon_instagram.png");
}
.shareBox ul li.instagram a:hover::before {
    background-image: url("../img/icon_instagram_on.svg");
}
.shareBox ul li.facebook a::before {
    background-image: url("../img/icon_facebook.svg");
    background-size: 10px 18px;
}
.shareBox ul li.facebook a:hover::before {
    background-image: url("../img/icon_facebook_on.svg");
    background-size: 10px 18px;
}
.shareBox ul li.x a::before {
    background-image: url("../img/icon_twiter.svg");
    background-size: 12px 12px;
}
.shareBox ul li.x a:hover::before {
    background-image: url("../img/icon_twiter_on.svg");
    background-size: 12px 12px;
}
.shareBox ul li.blog a::before {
    background-image: url("../img/icon_blog.svg");
    background-position: 54% center;
}
.shareBox ul li.blog a:hover::before {
    background-image: url("../img/icon_blog_on.svg");
}
.shareBox ul li.kakao a::before {
    background-image: url("../img/icon_kakao.svg");
}
.shareBox ul li.kakao a:hover::before {
    background-image: url("../img/icon_kakao_on.svg");
}
.shareBox ul li.copy-link a::before {
    background-image: url("../img/icon_link.svg");
}
.shareBox ul li.copy-link a:hover::before {
    background-image: url("../img/icon_link_on.svg");
}
.myProject .product-service-intro .shareBox {
    top: 70px;
    left: -45px;
}
.product-service-intro .bottom button {
    display: block;
    width: 100%;
    height: 55px;
    text-align: left;
    border-radius: 3px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    transition: all 0.5s ease;
}
.product-service-intro .bottom button::before {
    content: "";
    width: 28px;
    height: 28px;
    background-repeat: no-repeat;
    background-position: 0 0;
    position: absolute;
    top: 13px;
}
.downBtn {
    margin-bottom: 10px;
    padding: 14px 100px 13px 176px;
    background-color: #0d398e;
    color: #fff;
}
.downBtn::before {
    background-image: url("../img/icon_down_white.svg");
    left: 144px;
}
.collectionAddBtn {
    padding: 14px 100px 13px 154px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    color: #3d3d3d;
}
.collectionAddBtn:hover {
    border-color: #3d3d3d;
}
.collectionAddBtn::before {
    background-image: url("../img/icon_collection.svg");
    left: 121px;
}
.myProject .relative-prod .list li .img,
.myProject .featured-prod .list li .img {
    width: 300px;
    height: 336px;
}
.myProject .noContent {
    padding: 70px 0 0 0;
}
.myProject .noContent p {
    text-align: center;
}
.myProject .noContent .txt01 {
    margin: 0 0 20px 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 35px;
}
.myProject .noContent .txt02 {
    margin: 0 0 30px 0;
    font-size: 18px;
    line-height: 25px;
}
.myProject .noContent button {
    width: 250px;
    height: 50px;
    font-weight: bold;
}

/* 커스텀 페이지 */
.myAccount .noContent,
.customContent .noContent {
    padding: 70px 0 0 0;
}
.myAccount .noContent p,
.customContent .noContent p {
    text-align: center;
}

.myAccount .noContent .txt01,
.customContent .noContent .txt01 {
    margin: 0 0 20px 0;
    font-size: 28px;
    font-weight: 800;
    line-height: 35px;
}

.myAccount .noContent .txt02,
.customContent .noContent .txt02 {
    margin: 0 0 30px 0;
    font-size: 18px;
    line-height: 25px;
}

.myAccount .noContent button,
.customContent .noContent button {
    width: 250px;
    height: 50px;
    font-weight: bold;
}

/* 내 다운로드 */
.myDownload .both-sides {
    gap: 0;
    margin: 30px 0 50px;
    padding-top: 30px;
    border-top: 1px solid #3d3d3d;
}
.myDownload .filterBox {
    width: 300px;
    height: auto;
    padding: 0 30px 0 0;
    box-sizing: border-box;
    border: 0;
}
.myDownload .filterBox h4 {
    margin-bottom: 15px;
    padding: 0 0 20px 23px;
    border-bottom: 1px solid #3d3d3d;
}
.myDownload .filterBox h5 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
}
.myDownload .filterBox .deselect {
    padding: 0 0 0 16px;
    font-size: 15px;
    font-weight: bold;
    background: url(../img/img_del02.svg) no-repeat 0 5px;
    position: absolute;
    top: 61px;
    right: 30px;
}
.myDownload .filterBox .deselect:hover {
    color: #0d398e;
    background-image: url(../img/img_del02_on.svg);
}
.myDownload .filter-category {
    margin-bottom: 10px;
}
.myDownload .filter-category li {
    width: 100%;
    position: relative;
}
.myDownload .filter-category li + li {
    margin-top: 10px;
}
.myDownload .filter-category li input[type="checkbox"] {
    top: 24px;
    right: 16px;
}
.myDownload .filter-category li input[type="checkbox"] + label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 15px 10px;
    border: solid 1px #c4c4c4;
    border-radius: 3px;
    background-color: #fff;
    font-size: 16px;
    line-height: 1.44;
    box-sizing: border-box;
    position: relative;
}
.myDownload .filter-category li input[type="checkbox"] + label::before {
    display: none;
}
.myDownload .filter-category li input[type="checkbox"] + label::after {
    display: block;
    content: "";
    width: 13px;
    height: 14px;
    margin-left: auto;
    background: #fff url(../img/bg_chk01.svg) no-repeat 0 0;
}
.myDownload .filter-category li input[type="checkbox"]:checked + label {
    border-color: #0d398e;
    background-color: #f5f7fb;
}
.myDownload .filter-category li input[type="checkbox"]:checked + label::after,
.myDownload .filter-category li input[type="checkbox"]:focus + label::after {
    background-image: url("../img/bg_chk01_on.svg");
}
.more {
    padding: 0 0 0 17px;
    font-size: 15px;
    font-weight: bold;
    background: #fff url(../img/img_plus.svg) no-repeat 0 3px;
}
.more:hover {
    color: #0d398e;
    background-image: url(../img/img_plus_blue_on.svg);
}
.create-new-license {
    padding: 0 0 0 17px;
    font-size: 17px;
    font-weight: bold;
    background: #fff url(../img/img_plus.svg) no-repeat 0 4px;
}
.create-new-license:hover {
    color: #0d398e;
    background-image: url(../img/img_plus_blue_on.svg);
}
.myDownload .listArea {
    width: 959px;
    padding: 0 0 0 30px;
    border-left: 1px solid #c4c4c4;
    box-sizing: border-box;
}
.list-vertical > li {
    padding: 30px 0;
    border-bottom: 1px solid #c4c4c4;
}
.list-vertical > li:first-child {
    padding: 0 0 30px 0;
}
.list-vertical > li .d-flex {
    align-items: center;
}
.list-vertical > li .img {
    width: 177px;
    height: 100px;
    margin: 0 22px 0 0;
    border: solid 1px #c4c4c4;
    background-color: #f5f7fb;
}
.list-vertical > li .product-name {
    margin-bottom: 5px;
    font-weight: bold;
}
.list-vertical > li .date {
    margin-bottom: 30px;
    font-size: 17px;
}
.view-full-license {
    font-size: 17px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
}
.view-full-license:hover {
    color: #0d398e;
}
.button-line-down {
    width: 174px;
    padding: 0 20px 0 50px;
    font-weight: bold;
    background: url("../img/icon_download.svg") no-repeat 43px 9px;
}
.list-vertical > li .button-line-down {
    margin-left: auto;
}
.list-vertical > li .full-license {
    display: none;
    margin: 30px 0 0 200px;
    padding: 30px 0 0 0;
    border-top: 1px solid #c4c4c4;
}
.list-vertical > li .full-license h5 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}
.list-vertical > li .full-license ul {
    margin-bottom: 30px;
}
.list-vertical > li .full-license ul li {
    position: relative;
}
.list-vertical > li .full-license ul li + li {
    margin-top: 20px;
}
.list-vertical > li .full-license ul li .txt01 {
    margin-bottom: 5px;
    font-size: 18px;
}
.list-vertical > li .full-license ul li .txt02 {
    font-size: 17px;
}
.list-vertical01 {
    margin-bottom: 20px;
}
.list-vertical01 li {
    padding: 8px 8px 8px 10px;
    border: solid 1px #c4c4c4;
    border-radius: 2px;
    background-color: #fff;
    position: relative;
}
.list-vertical01 li + li {
    margin-top: 7px;
}
.download-license {
    display: block;
    font-size: 17px;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    position: absolute;
    top: 0;
    right: 0;
}
.download-license:hover {
    color: #0d398e;
}

/* 내 컬렉션 */
.share01 {
    width: 40px;
    height: 40px;
    border: solid 1px #bbb;
    border-radius: 50%;
    background-color: #fff;
    background: #fff url("../img/img_three_points.svg") no-repeat center;
    position: absolute;
    top: 0;
    right: 0;
}
.share01:hover {
    border-color: #686868;
}
.share01.active {
    background-color: #3d3d3d;
    background-image: url("../img/img_three_points_white.svg");
}
.myCollection .shareBox {
    top: 90px;
    right: 55px;
    left: auto;
}
.myCollection .shareBox button {
    display: block;
    width: 100%;
    padding: 10px 15px 10px;
    border-top: 1px solid #979797;
    text-align: left;
    font-size: 15px;
    color: #3d3d3d;
    transition: all 0.3s ease-in-out;
}
.myCollection .shareBox button:hover {
    background-color: #3d3d3d;
    color: #fff;
}
.myCollection .button-wrap {
    display: flex;
    gap: 0 5px;
    margin-left: auto;
}
.collectionAdd,
.collectionDown {
    width: 34px;
    height: 34px;
    border: solid 1px #0d398e;
    border-radius: 50%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}
.collectionAdd {
    background-image: url("../img/icon_collection_blue.svg");
}
.collectionDown {
    background-image: url("../img/icon_down_blue.svg");
}
.collectionAdd:hover {
    background-color: #0d398e;
    background-image: url("../img/icon_collection_white.svg");
}
.collectionDown:hover {
    background-color: #0d398e;
    background-image: url("../img/icon_down_white01.svg");
}

/* 팀정기구독 */
.team-subscription h3 {
    font-size: 40px;
}
.team-subscription .both-sides {
    gap: 0 165px;
    margin: 0 0 80px 0;
}
.team-subscription .flex-left {
    padding-bottom: 229px;
    background: url("../img/bg_team.png") no-repeat 0 bottom;
}
.team-subscription .flex-left h4 {
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 800;
}
.team-subscription .flex-left p {
    margin-bottom: 30px;
    font-size: 23px;
}
.tabLink01 {
    display: flex;
    margin: 0 0 25px 0;
}
.tabLink01 li a {
    display: block;
    width: 102px;
    height: 40px;
    padding: 10px 0;
    text-align: center;
    border: solid 1px #0d398e;
    background-color: #fff;
    font-size: 17px;
    font-weight: bold;
    box-sizing: border-box;
}
.tabLink01 li:first-child a {
    border-radius: 20px 0 0 20px;
}
.tabLink01 li:last-child a {
    border-radius: 0 20px 20px 0;
}
.tabLink01 li.active a {
    background-color: #0d398e;
    color: #fff;
}
.txt-list li {
    font-size: 19px;
    font-weight: 500;
    line-height: 1.84;
}
.team-subscription .flex-right {
    width: 400px;
}
.team-subscription.general .flex-right {
    width: 465px;
}
.team-subscription .flex-right .d-flex {
    margin-bottom: 15px;
}
.team-subscription .flex-right .d-flex h4 {
    font-size: 27px;
    font-weight: 800;
}
.team-subscription .flex-right .d-flex p {
    margin: 11px 0 0 20px;
    font-size: 16px;
}
.team-subscription.general .flex-right .d-flex p {
    margin: 11px 0 0 10px;
}
.team-subscription .flex-right .nice-select {
    display: block;
    width: 80px;
    height: 35px;
    margin-left: auto;
    padding: 8px 15px 7px 18px;
    border-radius: 18px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    font-size: 17px;
}
.team-subscription .flex-right .button-color01 {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    margin: 15px 0 0 0;
    font-size: 20px;
    font-weight: bold;
}
.user-reviews h4 {
    margin: 0 0 40px 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.35;
}
.user-reviews ul {
    margin: 0 0 90px 0;
}
.user-reviews ul li {
    padding: 0 0 0 150px;
    background-position: 0 6px;
    background-repeat: no-repeat;
}
.user-reviews ul li:nth-child(1) {
    background-image: url(../img/img_person01.svg);
}
.user-reviews ul li:nth-child(2) {
    background-image: url(../img/img_person02.svg);
}
.user-reviews ul li:nth-child(3) {
    background-image: url(../img/img_person03.svg);
}
.user-reviews ul li + li {
    margin-top: 50px;
}
.user-reviews ul li p {
    font-size: 17px;
    line-height: 1.59;
}
.user-reviews ul li .team {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.75;
}
.reason-selection h4 {
    margin-bottom: 30px;
    font-size: 26px;
    font-weight: 800;
}
.reason-selection ul {
    display: flex;
    gap: 0 15px;
    align-items: center;
    margin: 0 0 50px 0;
}
.reason-selection ul li {
    width: 240px;
    height: 282px;
    padding: 30px 35px;
    border-radius: 3px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
    background-repeat: no-repeat;
    background-position-x: center;
}
.reason-selection ul li:nth-child(1) {
    background-image: url("../img/img_reason01.svg");
    background-position-y: 101px;
}
.reason-selection ul li:nth-child(2) {
    background-image: url("../img/img_reason02.svg");
    background-position-y: 104px;
}
.reason-selection ul li:nth-child(3) {
    background-image: url("../img/img_reason03.svg");
    background-position-y: 104px;
}
.reason-selection ul li:nth-child(4) {
    background-image: url("../img/img_reason04.svg");
    background-position-y: 102px;
}
.reason-selection ul li:nth-child(5) {
    background-image: url("../img/img_reason05.svg");
    background-position-y: 111px;
}
.reason-selection ul li h5 {
    margin: 0 0 129px 0;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.2;
}
.reason-selection ul li > p {
    text-align: center;
    font-size: 17px;
    line-height: 1.47;
}
.reason-selection > p {
    margin: 0 0 25px 0;
    text-align: center;
    font-size: 34px;
    font-weight: 800;
}
.reason-selection .button-color01 {
    display: block;
    width: 400px;
    height: 70px;
    line-height: 70px;
    margin: 0 auto;
    border-radius: 5px;
    font-size: 24px;
    font-weight: bold;
}
.subscribe-news .detailTit {
    margin: 50px 0 20px 0;
}
.subscribe-news .d-flex {
    margin-bottom: 20px;
}
.subscribe-news input {
    display: block;
    width: 659px;
    height: 45px;
    padding: 13px 531px 12px 20px;
    border-radius: 3px;
    border: solid 1px #0d398e;
    background-color: #ebf2f5;
    font-size: 17px;
    color: #1d9ccc;
}
.subscribe-news input::placeholder {
    color: #0d398e;
}
.subscribe-news button {
    width: 150px;
    height: 45px;
    margin: 0 0 0 8px;
    padding: 13px 0 12px;
    text-align: center;
    border-radius: 3px;
    background-color: #0d398e;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}
.subscribe-news button:hover {
    background-color: #3d3d3d;
}
.subscribe-news .recommendation {
    clear: both;
}
.subscribe-news .recommendation .float-left {
    width: 120px;
    height: 120px;
    margin: 0 20px 0 0;
    padding: 27px 27px 27px 27px;
    border-radius: 5px;
    border: solid 1px #ccc;
    background-color: #fff;
}
.subscribe-news .recommendation .txt01 {
    margin: 0 0 35px 0;
    font-size: 19px;
    line-height: 1.68;
}
.subscribe-news .recommendation .txt02 {
    font-size: 17px;
}
.subscribe-news .recommendation .txt02 strong {
    text-decoration: underline;
}

/* 새비번 설정 */
.set-new-password {
    width: 640px;
    margin: 164px auto;
}
.set-new-password h3 {
    margin: 0 0 28px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #3d3d3d;
}
.set-new-password h3 > img {
    width: 168px;
}
.set-new-password h4 {
    margin: 0 0 23px 0;
    font-size: 25px;
    font-weight: bold;
}
.set-new-password .txt01 {
    margin: 0 0 40px 0;
    font-size: 18px;
    line-height: 1.39;
}
.set-new-password label {
    display: block;
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: bold;
}
.set-new-password input[type="text"] {
    width: 295px;
}
.set-new-password .txt02 {
    margin: 10px 0 45px;
    font-size: 16px;
    line-height: 1.44;
}
.set-new-password .button-color01 {
    display: block;
    width: 295px;
    margin: 0 0 35px 0;
    font-size: 18px;
    font-weight: 500;
}
.set-new-password .foot-menu {
    margin: 0 0 20px 0;
    padding: 20px 0;
    border-top: 1px solid #c1c1c1;
    border-bottom: 1px solid #3d3d3d;
}

/* 세금계산서 */
.tax-invoice {
    width: 880px;
    height: 1245px;
    margin: 0 auto;
    padding: 90px 100px 64px 100px;
    background-color: #fff;
    box-sizing: border-box;
}
.tax-invoice h3 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #3d3d3d;
}
.tax-invoice .tax-head {
    padding: 0 0 70px 0;
    border-bottom: 1px solid #3d3d3d;
    position: relative;
}
.tax-invoice .tax-head h1 {
    position: absolute;
    top: -8px;
    left: 0;
}
.tax-invoice .tax-head h2 {
    margin-bottom: 20px;
    text-align: right;
    font-size: 16px;
    font-weight: 800;
    color: #3d3d3d;
}
.tax-invoice .tax-head p {
    text-align: right;
    font-size: 15px;
    color: #3d3d3d;
}
.tax-invoice .tax-head p + p {
    margin-top: 5px;
}
.tax-invoice .tax-cont {
    display: flex;
    gap: 0 89px;
    padding: 25px 0;
    border-bottom: 1px solid #3d3d3d;
}
.tax-invoice .tax-cont h3 {
    margin-bottom: 15px;
}
.tax-invoice .tax-cont dl {
    display: flex;
}
.tax-invoice .tax-cont dl + dl {
    margin-top: 10px;
}
.tax-invoice .tax-cont dl dt {
    font-size: 16px;
    color: #3d3d3d;
}
.tax-invoice .tax-cont dl dd {
    font-size: 16px;
    line-height: 1.25;
    color: #3d3d3d;
}
.tax-invoice .tax-cont .flex-left dl dt {
    width: 112px;
}
.tax-invoice .tax-cont .flex-right dl dt {
    width: 93px;
}
.tax-invoice .tax-details {
    padding: 49px 0 44px;
}
.tax-invoice .tax-details p {
    margin-bottom: 10px;
    font-size: 16px;
}
.tax-invoice .tax-details .tableCol + .tableCol {
    margin-top: 20px;
}
.tax-invoice .tax-details .tableCol table thead th {
    height: 34px;
    background-color: #f2f2f2;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #3d3d3d;
    border-left: 1px solid #acacac;
    font-size: 16px;
    font-weight: bold;
    color: #3d3d3d;
    vertical-align: middle;
}
.tax-invoice .tax-details .tableCol table tbody td {
    padding: 7px 14px;
    border: 1px solid #acacac;
    font-size: 16px;
}
.tax-invoice .tax-details .tableCol table thead th:first-child,
.tax-invoice .tax-details .tableCol table tbody td:first-child {
    border-left: 0;
}
.tax-invoice .tax-details .tableCol table thead th:last-child,
.tax-invoice .tax-details .tableCol table tbody td:last-child {
    border-right: 0;
}
.tax-payment-details div {
    padding: 10px 0 10px 447px;
}
.tax-payment-details .first-block {
    border-top: 1px solid#3d3d3d;
    border-bottom: 1px solid #acacac;
}
.tax-payment-details .second-block {
    border-bottom: 1px solid #3d3d3d;
}
.tax-payment-details div p {
    display: flex;
    font-size: 16px;
}
.tax-payment-details div p + p {
    margin-top: 10px;
}
.tax-payment-details div p span,
.tax-payment-details div p strong {
    margin-left: auto;
}
.tax-payment-details div p strong {
    font-weight: 600;
}
.tax-invoice .tax-footer {
    display: flex;
    padding: 30px 0 0 0;
}
.tax-invoice .tax-footer .flex-left .txt01 {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.19;
}
.tax-invoice .tax-footer .flex-left .txt02 {
    font-size: 30px;
    font-weight: bold;
    color: #000;
}
.tax-invoice .tax-footer .flex-right {
    margin-left: auto;
}
.tax-invoice .tax-footer .flex-right p {
    text-align: right;
}
.tax-invoice .tax-footer .flex-right .txt01 {
    margin-bottom: 24px;
    font-size: 16px;
}
.tax-invoice .tax-footer .flex-right .txt01 strong {
    display: inline-block;
    margin-left: 5px;
    font-size: 30px;
    font-weight: bold;
    color: #000;
}
.tax-invoice .tax-footer .flex-right .txt02 {
    margin-bottom: 5px;
    font-size: 16px;
    color: #000;
}
.tax-invoice .tax-footer .flex-right .txt03 {
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

/* 헬프센터 */
.helpCenter01 {
    margin: -50px 0 0 0;
}
.helpCenter01 .top {
    width: 100%;
    margin: 0 0 100px 0;
    padding: 80px 0 50px;
    background-color: #f5f7fb;
    border-bottom: 1px solid #acacac;
}
.helpCenter01 .top h3 {
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 35px;
    font-weight: 800;
}
.help-search {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.helpCenter01 .help-search {
    margin-bottom: 45px;
}
.help-search input[type="text"] {
    width: 357px;
    height: 50px;
    margin: 0 5px 0 0;
    padding: 15px 25px;
    border-radius: 30px;
    border: solid 1px #0d398e;
    background-color: #fff;
    font-size: 17px;
    color: #3d3d3d;
}
.help-search input[type="text"]:hover {
    border-color: #3d3d3d;
}
.help-search input[type="text"]:focus {
    outline: none;
    border-color: #224b9e;
    background-color: #ebf3f6;
}
.help-search button {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: #0d398e url("../img/icon_search_white.svg") no-repeat center;
}
.help-search button:hover {
    background-color: #3d3d3d;
}
.search-type {
    display: flex;
    justify-content: center;
    align-items: center;
}
.search-type dt {
    margin: 0 15px 0 0;
    font-size: 15px;
    font-weight: bold;
}
.search-type dd a {
    display: inline-block;
    height: 32px;
    padding: 7px 15px;
    border-radius: 18px;
    border: solid 1px #9e9e9e;
    background-color: #fff;
    font-size: 15px;
    box-sizing: border-box;
}
.search-type dd a + a {
    margin-left: 3px;
}
.search-type dd a:hover {
    border-color: #fe7337;
    color: #fe7337;
}
.helpListGroup {
    gap: 100px 75px;
    margin-bottom: 100px;
}
.helpListGroup > div {
    width: 370px;
}
.helpListGroup h4 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: bold;
    position: relative;
}
.helpListGroup ul {
    width: 100%;
    min-height: 352px;
    margin: 0 0 20px 0;
    padding: 20px 0;
    border-top: 1px solid #3d3d3d;
    border-bottom: 1px solid #acacac;
}
.helpListGroup ul li {
    width: 100%;
    padding: 0 15px;
    background-color: #ffff;
    position: relative;
}
.helpListGroup ul li a {
    display: block;
    width: 92%;
    height: 62px;
    padding: 21px 0;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.helpListGroup ul li:hover {
    background-color: #f5f7fb;
}
.helpListGroup ul li::after {
    content: "";
    width: 9px;
    height: 14px;
    background: url("../img/arrow_right_gray.svg") no-repeat 0 0;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}
.helpListGroup .viewAll {
    display: inline-block;
    padding: 0 26px 0 0;
    font-size: 17px;
    font-weight: bold;
    position: relative;
}
.helpListGroup .viewAll::after {
    content: "";
    width: 16px;
    height: 11px;
    background: url("../img/img_move.svg") no-repeat 0 0;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.helpListGroup .viewAll:hover {
    color: #0d398e;
}
.helpListGroup .viewAll:hover::after {
    background-image: url("../img/img_move_on.svg");
}
.helpCenter01 .bottomBox {
    width: 100%;
    padding: 70px 0 60px;
    border-radius: 2px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
    background: url("../img/img_help01.png") no-repeat center 155px;
}
.helpCenter01 .bottomBox p {
    text-align: center;
}
.helpCenter01 .bottomBox p.txt01 {
    margin: 0 0 15px 0;
    font-size: 25px;
    font-weight: 800;
}
.helpCenter01 .bottomBox p.txt02 {
    margin: 0 0 104px 0;
    font-size: 20px;
}
.helpCenter01 .bottomBox .button-color01 {
    display: block;
    width: 250px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    text-align: center;
    font-weight: bold;
}
.breadcrumb {
    padding-bottom: 25px;
    border-bottom: 1px solid #3d3d3d;
}
.breadcrumb a {
    display: inline-block;
    font-size: 17px;
    color: #3d3d3d;
    position: relative;
}
.breadcrumb a:first-child::before {
    display: none;
}
.breadcrumb a::before {
    display: inline-block;
    content: ">";
    font-size: 17px;
    color: #3d3d3d;
    margin: 0 6px 0 2px;
}
.breadcrumb a.underline {
    text-underline-offset: 2px;
}
.breadcrumb a:hover {
    color: #0d398e;
}
.helpCenter02 .helpList li {
    width: 100%;
    padding: 0 15px;
    background-color: #ffff;
    position: relative;
}
.helpCenter02 .helpList li a {
    display: block;
    width: 92%;
    height: 62px;
    padding: 21px 0;
    font-size: 17px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.helpCenter02 .helpList li:hover {
    background-color: #f5f7fb;
}
.helpCenter02 .helpList li::after {
    content: "";
    width: 9px;
    height: 14px;
    background: url("../img/arrow_right_gray.svg") no-repeat 0 0;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}
.helpCenter03 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 40px;
    position: relative;
}
.help-left {
    width: 950px;
}
.help-right {
    width: 270px;
    height: auto;
}
.help-editor {
    padding: 45px 0 0 0;
}
.help-editor p {
    margin: 0 0 40px 0;
    font-size: 17px;
    line-height: 1.76;
}
.help-editor h4 {
    margin-bottom: 25px;
    font-size: 25px;
    font-weight: bold;
}
.help-editor ol {
    margin: 0 0 40px 0;
}
.help-editor ol li {
    padding: 0 0 0 33px;
    font-size: 17px;
    line-height: 1.76;
    position: relative;
}
.help-editor ol li + li {
    margin-top: 20px;
}
.help-editor ol li::before {
    content: "";
    font-size: 17px;
    position: absolute;
    top: 0;
    left: 0;
}
.help-editor ol li:nth-child(1)::before {
    content: "01";
}
.help-editor ol li:nth-child(2)::before {
    content: "02";
}
.help-editor ol li:nth-child(3)::before {
    content: "03";
}
.help-editor ol li span {
    display: block;
    margin-top: 20px;
}
.helpCenter03 .help-search input[type="text"] {
    width: 100%;
    margin: 0 0 25px 0;
    padding: 15px 45px 15px 25px;
}
.helpCenter03 .help-category {
    position: sticky;
    top: 25px;
    overflow: hidden;
}
.helpCenter03 .help-search button {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 7px;
    right: 7px;
}

.help-category li {
    width: 100%;
    position: relative;
}
.help-category li + li {
    margin-top: 10px;
}
.help-category li a {
    display: block;
    width: 100%;
    padding: 11px 15px 10px 15px;
    border: solid 1px #c4c4c4;
    border-radius: 3px;
    background-color: #fff;
    font-size: 16px;
    line-height: 1.44;
    box-sizing: border-box;
    position: relative;
}
.help-category li.active a,
.help-category li a:hover {
    border-color: #0d398e;
    background-color: #f5f7fb;
}

/*  layerPopup */
.modalPop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 500;
}
.modalPop .modalLayer {
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    z-index: 500;
}
.modalPop .modalLayer.type {
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.modalPop .modalLayer.type .modalHead {
    margin-bottom: 30px;
}
.modalPop .modalLayer.type h3 {
    width: 165px;
}
.modalPop .modalLayer.modal-hs01 {
    width: 435px;
}
.modalPop .modalLayer.modal-hs02 {
    width: 600px;
}
#member-downPop01 .modalLayer .modalCont,
#member-downPop02 .modalLayer .modalCont {
    padding: 20px;
}
.modalLayer .modalCont h4 {
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.modalPop .modalLayer.type .modalCont h4 {
    margin: 0 0 20px 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.29;
}
.modalPop .modalLayer.type .modalCont h5 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
}
.modalLayer .modalCont > p {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: normal;
    line-height: 1.76;
    color: #3d3d3d;
}
.indentTxt {
    padding-left: 11px;
}
.modalClose {
    display: block;
    position: absolute;
    top: 38px;
    right: 20px;
}
.modalClose::after {
    display: block;
    content: "";
    width: 15px;
    height: 15px;
    background: url("../img/img_popCls.svg") no-repeat 0 0;
    transition: transform 0.4s ease-in-out;
}
.modalClose:hover::after {
    transform-origin: center;
    transform: rotate(90deg);
}
.modalPop .modalLayer.type .modalClose {
    top: 40px;
    right: 30px;
}

/* 글로벌 검색 팝업  */
#globalSearchPop .modalLayer {
    width: 1260px;
    box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.11);
    border: solid 1px #3d3d3d;
}
#globalSearchPop .modalLayer .modalCont {
    padding: 40px;
}
#globalSearchPop .modalClose {
    width: 40px;
    height: 40px;
    top: -40px;
    right: -1px;
    background-color: #fff;
    background-image: none;
    border: solid 1px #3d3d3d;
    border-bottom: 0;
    z-index: 800;
}
#globalSearchPop .modalClose::after {
    position: absolute;
    top: 13px;
    left: 13px;
}
.modalPop .left-box {
    width: 223px;
    padding: 40px 35px 40px 30px;
}
.modalPop .left-box h3 {
    margin-bottom: 20px;
}
.modalPop .keyword {
    padding: 0 60px 0 0;
}
.modalPop .searchArea {
    margin-top: 30px;
}
.modalPop .searchArea input[type="text"] {
    width: 1036px;
    margin: 0;
    padding: 15px 20px 15px 55px;
}

/* 회원가입 팝업 */
.memberPop .modalLayer {
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.memberPop .modalLayer .modalHead {
    padding: 0 0 25px 0;
    border-bottom: 1px solid #3d3d3d;
}
.memberPop .modalLayer h3 {
    width: 165px;
}
.memberPop .modalCont {
    padding: 25px 0 0 0;
}
.memberPop .modalCont h4 {
    margin-bottom: 5px;
    padding: 0;
    border-bottom: 0;
    font-size: 21px;
    font-weight: 800;
}
.memberPop .modalCont > p {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: normal;
    line-height: 25px;
}
.memberPop .modalCont input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}
/* .memberPop .modalCont input.error {
    border-color: #d81b1b;
}
.memberPop .modalCont input.error:focus {
    background-color: #fff;
} */
.memberPop .modalCont h5 {
    margin: 25px 0 10px 0;
    font-size: 18px;
    font-weight: 800;
}
.memberPop .modalCont .link:hover {
    color: #0d398e;
}
.memberPop .modalCont .snsList {
    display: flex;
    gap: 0 8px;
    margin-bottom: 25px;
}
.memberPop .modalCont .snsList li a {
    display: block;
    width: 40px;
    height: 40px;
    border-color: #686868;
}
.memberPop .modalCont .snsList li.sns01 a {
    background-image: url("../img/icon_sns01.svg");
}
.memberPop .modalCont .snsList li.sns02 a {
    background-image: url("../img/icon_sns02.svg");
}
.memberPop .modalCont .snsList li.sns03 a {
    background-image: url("../img/icon_sns03.svg");
}
.memberPop .modalCont .snsList li.sns04 a {
    background-image: url("../img/icon_sns04.svg");
}
.memberPop .modalCont .snsList li.sns05 a {
    background-image: url("../img/icon_sns05.svg");
}
.memberPop .modalCont .snsList li.sns06 a {
    background-image: url("../img/icon_sns06.svg");
}
.memberPop .modalCont .snsList li.sns01 a:hover {
    background-image: url("../img/icon_sns01_on.svg");
}
.memberPop .modalCont .snsList li.sns02 a:hover {
    background-image: url("../img/icon_sns02_on.svg");
}
.memberPop .modalCont .snsList li.sns03 a:hover {
    background-image: url("../img/icon_sns03_on.svg");
}
.memberPop .modalCont .snsList li.sns04 a:hover {
    background-image: url("../img/icon_sns04_on.svg");
}
.memberPop .modalCont .snsList li.sns05 a:hover {
    background-image: url("../img/icon_sns05_on.svg");
}
.memberPop .modalCont .snsList li.sns06 a:hover {
    background-image: url("../img/icon_sns06_on.svg");
}
.memberPop .modalCont .button {
    display: block;
    width: 100%;
    margin: 0 0 20px 0;
    background-color: #0d398e;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-transform: uppercase;
}
.memberPop .modalCont .button:hover {
    background-color: #3d3d3d;
}
.memberPop .modalClose {
    top: 40px;
    right: 30px;
}

/* 로그인 팝업 */
#loginPop .modalCont a {
    display: inline-block;
    font-size: 16px;
    font-weight: normal;
}
#loginPop .modalCont a:hover {
    color: #0d398e;
}
.modalCont .id-find,
.modalCont .pw-find {
    margin-right: 5px;
    padding-right: 10px;
    position: relative;
}
.modalCont .id-find:hover,
.modalCont .pw-find:hover {
    color: #0d398e;
}
.modalCont .id-find::after,
#loginPop .modalCont .pw-find::after {
    content: "";
    width: 1px;
    height: 15px;
    background-color: #bbb;
    position: absolute;
    top: 2px;
    right: 0;
}

/* 회원가입 팝업 */
.memberPop .modalCont .warning {
    display: block;
    margin: 10px 0 20px;
    text-align: right;
    font-size: 15px;
    font-weight: normal;
    color: #d81b1b;
}
.memberPop .modalCont .success {
    display: block;
    margin: 10px 0 20px;
    text-align: right;
    font-size: 15px;
    font-weight: normal;
    color: #28a745;
}
.memberPop .modalCont .agreeTxt {
    font-size: 16px;
    font-weight: normal;
    line-height: 25px;
}
.memberPop .modalCont .agreeTxt a {
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}
.memberPop .modalCont .agreeTxt a:hover {
    color: #0d398e;
}
.o-hidden {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    touch-action: none;
}

/* 저작권 침해 신고 팝업 */
#reportPop .modalLayer,
#licensePop .modalLayer {
    height: 450px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
#reportPop .modalLayer .modalCont,
#licensePop .modalLayer .modalCont {
    padding: 19px 20px 20px;
}
#reportPop .modalLayer .modalCont h4 {
    margin-bottom: 10px;
}

#reportPop .modalLayer .modalCont .textBox {
    width: 560px;
    height: 245px;
    margin: 0 0 10px 0;
    padding: 17px 20px;
    box-sizing: border-box;
}
#reportPop .modalLayer .modalClose,
#licensePop .modalLayer .modalClose {
    top: 24px;
}

/* 라이센스 팝업  */
#licensePop .modalLayer .modalCont .textBox {
    width: 560px;
    height: 369px;
    padding: 20px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
}
#licensePop .modalLayer .modalCont .textBox h5 {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
}
#licensePop .modalLayer .modalCont .textBox p {
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.5;
}
#licensePop .modalLayer .modalCont .textBox p + h5,
#licensePop .modalLayer .modalCont .textBox > ol + h5 {
    margin-top: 30px;
}
#licensePop .modalLayer .modalCont .textBox > ol > li {
    padding-left: 15px;
    font-size: 17px;
    line-height: 1.5;
    color: #3d3d3d;
    position: relative;
}
#licensePop .modalLayer .modalCont .textBox > ol > li > span {
    display: block;
    position: absolute;
    left: 0;
}
#licensePop .modalLayer .modalCont .textBox > ol > li + li {
    margin-top: 10px;
}
#licensePop .modalLayer .modalCont .textBox > ol > li > ol {
    margin: 5px 0 0 0;
}

/* 정액 회원 다운로드 팝업 */
[id*="member-downPop"] .modalLayer .modalClose {
    top: 26px;
}
.usage-status {
    width: 100%;
    overflow-y: auto;
    margin-bottom: 15px;
    padding: 20px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    box-sizing: border-box;
}
.select-ticket {
    margin-bottom: 50px;
}
.select-ticket li {
    width: 100%;
    height: 60px;
    padding: 20px;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
}
.select-ticket li.active {
    border-color: #0d398e;
}
.select-ticket li + li {
    margin-top: 10px;
}
.select-ticket li input[type="radio"] + label:before {
    width: 20px;
    height: 20px;
    background: #fff url("../img/bg_radio.svg") no-repeat center;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}
.select-ticket li input[type="radio"]:checked + label:before {
    background-color: #043dc1;
    background-image: url("../img/bg_radio_on.svg");
}

/* 팝업존 */
#mainModalPopup .modalLayer {
    width: 642px;
    height: 436px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.16);
    box-sizing: border-box;
    z-index: 500;
}
#mainModalPopup .rel {
    width: 100%;
    background-color: #fff;
    border: 3px solid #0d398e;
    padding: 24px 7px 17px 17px;
    overflow-y: auto;
    flex: 1;
    box-sizing: border-box;
}
#mainModalPopup .top {
    margin-bottom: 12px;
}
#mainModalPopup .top h3 {
    display: flex;
    align-items: center;
    font-size: 25px;
    font-weight: bold;
}
#mainModalPopup .top h3::after {
    content: "";
    width: 1px;
    height: 21px;
    margin: 5px 0 0 20px;
    background-color: #989898;
}
#mainModalPopup .item .slick-slide {
    border: solid 1px #bebebe;
    background-color: #f6f6f6;
    margin-right: 10px;
}
#mainModalPopup .img {
    height: 100%;
    width: 100%;
}
#mainModalPopup .item .slick-slide a {
    display: block;
    width: 300px;
    height: 350px;
    padding: 24px 40px 21px;
    text-align: center;
    position: relative;
}
#mainModalPopup .ms-controls {
    display: flex;
    align-items: center;
    position: absolute;
    top: 23px;
    right: 20px;
}
#mainModalPopup img {
    display: inline-block;
}
#mainModalPopup .ms-controls .prev01 {
    width: 35px;
    height: 35px;
    background: url("../img/btn_prev.svg") no-repeat 0 0;
    font-size: 0;
}
#mainModalPopup .ms-controls .next01 {
    width: 35px;
    height: 35px;
    margin-left: -1px;
    background: url("../img/btn_next.svg") no-repeat 0 0;
    font-size: 0;
}
#mainModalPopup .ms-controls .count {
    margin-right: 15px;
    font-size: 18px;
    font-weight: normal;
    color: #3d3d3d;
}
#mainModalPopup .close {
    width: 30px;
    height: 30px;
    box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.16);
    background-color: #0d398e;
    position: absolute;
    top: 0;
    right: -28px;
    font-size: 0;
}
#mainModalPopup .close:before,
#mainModalPopup .close:after {
    width: 3px;
    height: 18px;
    content: "";
    position: absolute;
    top: 6px;
    left: 14px;
    background-image: none;
    background-color: #fff;
}
#mainModalPopup .close:before {
    transform: rotate(-45deg);
}
#mainModalPopup .close:after {
    transform: rotate(45deg);
}

/* 기업문의하기 팝업 */
.modalLayer.type01 {
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
}
.modalLayer.type02 {
    padding: 50px 30px 30px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.modalLayer.type01 .modalHead h3 {
    padding: 4px 0 5px 44px;
    font-size: 21px;
    font-weight: 800;
    background: url("../img/short_logo.svg") no-repeat 0 0;
    color: #333;
}
.modalLayer.type01 .modalCont {
    margin: 25px 0 0 0;
    padding: 25px 0 0 0;
    border-top: 1px solid #3d3d3d;
}
.modalLayer.type01 .modalClose {
    top: 40px;
    right: 30px;
}
.modalLayer.type01 button {
    font-size: 16px;
    font-weight: 500;
}
.inquiryPop .modalLayer {
    width: 550px;
    height: 697px;
}
.inquiryPop .inquiry-list {
    margin-bottom: 20px;
}
.inquiryPop .inquiry-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 0 30px;
}
.inquiryPop .inquiry-list li + li {
    margin-top: 20px;
}
.inquiryPop .inquiry-list li span {
    display: block;
    width: 46.9%;
}
.inquiryPop .inquiry-list li label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.inquiryPop .inquiry-list li input[type="text"],
.inquiryPop .inquiry-list li .nice-select {
    width: 100%;
}
.inquiryPop .inquiry-list li .nice-select {
    padding: 11px 10px 10px;
}
.inquiryPop .inquiry-list li .nice-select span {
    width: 95%;
}
.inquiryPop .modalLayer .modalCont p {
    font-size: 16px;
}
.inquiryPop p strong {
    border-bottom: 1px solid #3d3d3d;
}
.inquiryPop .button-color01 {
    width: 100%;
}

/* 소셜 계정 연결 해제 팝업 */
.unlink-social-accountsPop .modalLayer .modalCont p.txt01 {
    margin-bottom: 10px;
    font-weight: bold;
}
.unlink-social-accountsPop .modalLayer .modalCont p.txt02 {
    margin-bottom: 20px;
    line-height: 1.35;
}
.unlink-social-accountsPop .button-color01 {
    width: 293px;
}
.unlink-social-accountsPop .button-line {
    width: 118px;
}

#socialSuccessModal .button-color01 {
    width: 293px;
}

/* 새로운 라이선스 만들기 팝업 */
.modalLayer.type01 .modalCont h4 {
    margin-bottom: 15px;
    font-size: 18px;
    color: #3d3d3d;
}
.newLicensePop label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.newLicensePop .modalCont .txt01 {
    margin: 0 0 25px 0;
    padding: 0 0 25px 0;
    border-bottom: 1px solid #c4c4c4;
    font-size: 15px;
    line-height: 1.47;
}
.modalLayer.type01 .modalCont .noteTxt {
    margin: 20px 0 35px 0;
    font-size: 16px;
    line-height: 1.56;
    color: #333;
}
.modalLayer.type01 .modalCont .noteTxt a.underline {
    font-weight: bold;
}
.modalLayer.type01 .modalCont .noteTxt a:hover {
    color: #0d398e;
}
.additionPop .modalLayer.type01 .create-new-license {
    font-size: 17px;
    font-weight: bold;
}
.additionPop .modalLayer.type01 .create-new-license:hover {
    color: #0d398e;
}
.chk-type01 {
    margin-bottom: 15px;
}
.chk-type01 li + li {
    margin-top: 7px;
}
.chk-type01 li input[type="checkbox"],
.chk-type01 li input[type="radio"] {
    top: 24px;
    right: 16px;
}
.chk-type01 li input[type="checkbox"] + label,
.chk-type01 li input[type="radio"] + label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 15px 10px;
    border: solid 1px #c4c4c4;
    border-radius: 3px;
    background-color: #fff;
    font-size: 16px;
    line-height: 1.44;
    box-sizing: border-box;
    position: relative;
}
.chk-type01 li input[type="checkbox"] + label::before,
.chk-type01 li input[type="radio"] + label::before {
    display: none;
}
.chk-type01 li input[type="checkbox"] + label::after,
.chk-type01 li input[type="radio"] + label::after {
    display: block;
    content: "";
    width: 13px;
    height: 14px;
    margin-left: auto;
    background: #fff url(../img/bg_chk01.svg) no-repeat 0 0;
}
.chk-type01 li input[type="checkbox"]:checked + label,
.chk-type01 li input[type="radio"]:checked + label {
    border-color: #0d398e;
    background-color: #f5f7fb;
}
.chk-type01 li input[type="checkbox"]:checked + label::after,
.chk-type01 li input[type="checkbox"]:focus + label::after,
.chk-type01 li input[type="radio"]:checked + label::after,
.chk-type01 li input[type="radio"]:focus + label::after {
    background-image: url("../img/bg_chk01_on.svg");
}
.chk-type01 li input[type="checkbox"] + label:hover,
.chk-type01 li input[type="radio"] + label:hover {
    border-color: #3d3d3d;
}

/* 새 컬렉션 추가 팝업 */
.add-collectionPop .modalLayer.type01 .modalCont {
    padding: 0;
    border-top: 0;
}
.add-collectionPop .list-vertical01 {
    width: 415px;
    height: 293px;
    overflow-y: auto;
    overflow-x: hidden;
}
.add-collectionPop .list-vertical01 li {
    padding: 11px 8px 11px 10px;
    transition: all 0.3s ease-in-out;
}
.add-collectionPop .list-vertical01 li:hover {
    border-color: #3d3d3d;
    cursor: pointer;
}
.add-collectionPop .list-vertical01 li.active {
    border-color: #0d398e;
    background-color: #f5f7fb;
}
.add-collectionPop .list-vertical01 li p {
    width: 80%;
    margin: 0;
    font-size: 16px;
    line-height: 1.19;
}
.add-collectionPop .list-vertical01 li .button-line {
    height: 25px;
    line-height: 25px;
    padding: 0 10px 0 11px;
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 15px;
    font-weight: 500;
}
.collectionPop label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.collectionPop input {
    display: block;
    width: 415px;
    margin-bottom: 15px;
}
.collectionPop .button-line {
    width: 93px;
}
.collectionPop .button-color01 {
    width: 312px;
}

/* 팀초대 팝업 */
.inviteTeamPop.existingUers .modalLayer {
    width: 520px;
}
.inviteTeamPop .modalLayer.type01 .modalCont {
    padding: 0;
    border-top: 0;
}
.noticeBox {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 15px;
    border: solid 1px #c4c4c4;
    background-color: #fff;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.56;
}
.inviteTeamPop .both-sides {
    gap: 0 10px;
    margin: 0;
}
.inviteTeamPop .both-sides > div {
    width: 345px;
    padding: 24px 25px 25px;
    border-radius: 3px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
    position: relative;
}
.inviteTeamPop.newUser .both-sides > div:hover {
    border-color: #1d9ccc;
    background-color: #ebf2f5;
    cursor: pointer;
}
.inviteTeamPop .join-team {
    width: 100%;
    padding: 24px 25px 25px;
    border-radius: 3px;
    border: solid 1px #b4b4b4;
    background-color: #fafafa;
    position: relative;
}
.inviteTeamPop h4 {
    padding-bottom: 15px;
    border-bottom: 1px solid #dbdbdb;
    font-size: 18px;
    font-weight: bold;
}
.inviteTeamPop .both-sides > div dl {
    margin: 0 0 15px 0;
    border-bottom: 1px solid #dbdbdb;
}
.inviteTeamPop .both-sides > div dl dt {
    margin: 0 0 5px 0;
    font-size: 16px;
}
.inviteTeamPop .both-sides > div dl dd {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease-in-out;
}
.inviteTeamPop .both-sides > div dl dd.userName:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    cursor: default;
}
.inviteTeamPop p {
    font-size: 16px;
    line-height: 1.25;
}
.inviteTeamPop .txt01 {
    margin: 0 0 10px 0;
    font-weight: 500;
}
.inviteTeamPop .txt02 {
    padding: 0 0 0 13px;
    position: relative;
}
.inviteTeamPop .txt02::before {
    content: "•";
    font-size: 16px;
    position: absolute;
    top: -2px;
    left: 0;
}
.inviteTeamPop .txt02 + .txt02 {
    margin: 5px 0 0 0;
}
.inviteTeamPop .button-color01 {
    display: block;
    width: 295px;
    height: 50px;
    line-height: 50px;
    margin-top: 15px;
    font-size: 19px;
    font-weight: bold;
}
.inviteTeamPop .join-team .button-color01 {
    width: 100%;
}
.inviteTeamPop.newUser .both-sides > .flex-right .button-color01 {
    margin-top: 147px;
}
.memberPop .modalCont .noticeTxt {
    margin-bottom: 30px;
}
.memberPop .modalCont .noticeTxt .txt01 {
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: bold;
    color: #333;
}

/* 팀초대 시작하기팝업 */
.team-invitationPop .modalLayer.type .modalCont h4 {
    margin-bottom: 15px;
}
.team-invitationPop .modalLayer .modalCont p {
    margin-bottom: 30px;
    line-height: 1.47;
}
.team-invitationPop a {
    display: block;
    margin-bottom: 15px;
    font-size: 15px;
    text-decoration: underline;
}
.team-invitationPop a:hover {
    color: #0d398e;
}
.team-invitationPop .button-color01 {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
}

/* 멤버수 변경후 확인 */
.updatePop .modalLayer {
    width: 550px;
}
.updatePop .modalCont p {
    padding: 0 0 126px 0;
    text-align: center;
    font-size: 18px;
    line-height: 1.39;
    background: url("../img/img_mailB.svg") no-repeat center 83px;
}

/* 멤버 변경 */
.changeMembePop .modalLayer .modalCont .txt01 {
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: bold;
}
.changeMembePop .modalLayer .modalCont .txt01 {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.56;
    color: #333;
}
.changeMembePop .modalLayer .modalCont .rdo-list {
    margin: 0 0 20px 0;
    padding: 20px 0 0 0;
    border-top: 1px solid #c4c4c4;
}
.changeMembePop .modalLayer .modalCont .rdo-list li + li {
    margin-top: 16px;
}

/* 초대 다시 보내기 팝업 */
.resend-invitationPop .modalLayer {
    width: 550px;
}
.resend-invitationPop .first-block {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #c4c4c4;
}
.resend-invitationPop label {
    display: block;
    margin-bottom: 5px;
    font-size: 17px;
    font-weight: bold;
}
.resend-invitationPop input {
    display: block;
    margin-bottom: 10px;
}
.resend-invitationPop .second-block p {
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.56;
}

/* 초대 취소 팝업 */
.cancel-invitationPop p {
    text-align: center;
}
.cancel-invitationPop .modalLayer .modalCont .txt01 {
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: bold;
}
.cancel-invitationPop .modalLayer .modalCont .txt02 {
    margin-bottom: 40px;
    font-size: 17px;
}
.cancel-invitationPop .button-color01 {
    width: 362px;
}
.cancel-invitationPop .button-line {
    width: 118px;
}

/* 새비번설정완료 팝업 */
.set-new-pwPop .modalLayer {
    width: 480px;
}
.set-new-pwPop .modalLayer .modalCont p {
    padding-bottom: 107px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    background: url("../img/img_pwB.svg") no-repeat center 56px;
}

/* 공유하기 팝업 */
.sharePop .modalLayer {
    width: 520px;
}
.sharePopList {
    display: flex;
    gap: 0 20px;
    margin-bottom: 25px;
}
.sharePopList li a {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: solid 1px #bbb;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
}
.sharePopList li a:hover {
    background-color: #3d3d3d;
    border-color: #3d3d3d;
}
.sharePopList li.pinterest a {
    background-image: url("../img/icon_pinterest01.svg");
}
.sharePopList li.instagram a {
    background-image: url("../img/icon_instagram01.svg");
}
.sharePopList li.facebook a {
    background-image: url("../img/icon_facebook01.svg");
}
.sharePopList li.ex a {
    background-image: url("../img/icon_ex.svg");
}
.sharePopList li.blog a {
    background-image: url("../img/icon_blog01.svg");
}
.sharePopList li.kakao a {
    background-image: url("../img/icon_kakao01.svg");
}
.sharePopList li.pinterest a:hover {
    background-image: url("../img/icon_pinterest01_on.svg");
}
.sharePopList li.instagram a:hover {
    background-image: url("../img/icon_instagram01_on.svg");
}
.sharePopList li.facebook a:hover {
    background-image: url("../img/icon_facebook01_on.svg");
}
.sharePopList li.ex a:hover {
    background-image: url("../img/icon_ex_on.svg");
}
.sharePopList li.blog a:hover {
    background-image: url("../img/icon_blog01_on.svg");
}
.sharePopList li.kakao a:hover {
    background-image: url("../img/icon_kakao01_on.svg");
}
.snsCopy {
    position: relative;
}
.snsCopy input[type="text"] {
    width: 100%;
    padding: 8px 80px 7px 15px;
    font-size: 15px;
}
.snsCopy .button-color01 {
    display: block;
    width: 73px;
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 8px;
    right: 8px;
}

/* 소유자 변경 팝업 */
.change-ownerPop .modalLayer .modalCont > p {
    padding: 0 0 20px 0;
    border-bottom: 1px solid #c4c4c4;
    font-weight: bold;
}
.change-ownerPop .rdo-list {
    margin-bottom: 20px;
}
.change-ownerPop .rdo-list li + li {
    margin-top: 16px;
}
.change-ownerPop .button-color01 {
    width: 294px;
}
.change-ownerPop .button-line {
    width: 118px;
}

/* 쿠키 */
.cookie .modalLayer {
    width: 910px;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.cookie .modalLayer h3 {
    margin-bottom: 30px;
    font-size: 24px;
    font-weight: bold;
}
.cookie .modalLayer p {
    font-size: 17px;
    line-height: 30px;
}
.cookie .modalLayer .txt01 {
    margin-bottom: 30px;
}
.cookie .modalLayer .txt01 > strong {
    display: block;
}
.cookie .modalLayer .txt02 {
    margin-bottom: 40px;
}
.cookie .modalLayer .txt01 a:hover strong,
.cookie .modalLayer .txt02 a:hover strong {
    color: #0d398e;
}
.cookie .btnWrap {
    gap: 0 10px;
}
.cookie .btnWrap .button-line {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    color: #3d3d3d;
}
/* 쿠키환경 */
#cookie-preferences.cookie .modalLayer h3 {
    margin-bottom: 20px;
}
.cookie .modalLayer ul {
    margin-bottom: 30px;
}
.cookie .modalLayer ul li:first-child {
    border-top: 1px solid #3d3d3d;
}
.cookie .modalLayer ul li {
    padding: 20px 0;
    border-bottom: 1px solid #3d3d3d;
    position: relative;
}
#cookie-preferences.cookie .modalLayer .txt01 {
    padding: 0 73px 0 0;
}
.alarm-settings {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
#switch {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.alarm-settings .switch-label {
    position: relative;
    cursor: pointer;
    display: inline-block;
    width: 63px;
    height: 35px;
    background-color: #eaeaea;
    border: 1px solid #bebebe;
    border-radius: 20px;
    transition: 0.2s;
}
.alarm-settings [id*="switch"]:checked + .switch-label {
    background-color: #fff;
    border-color: #c4c4c4;
}
.alarm-settings .switch-label.disable {
    border-color: #bebebe;
    background-color: #eaeaea;
}
.switch-label.disable:hover {
    background-color: #fff;
}
.onf-btn {
    display: inline-block;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 4px;
    left: 5px;
    border-radius: 25px;
    background-color: #b2b2b2;
    transition: 0.2s;
}
.switch-label.disable .onf-btn {
    background-color: #b2b2b2;
    left: 3px;
    right: auto;
}
[id*="switch"] + .switch-label::before,
[id*="switch"]:checked + .switch-label::before {
    display: none;
}
@media (hover: hover) {
    .switch-label:hover {
        background-color: #fff;
    }
    [id*="switch"]:checked + .switch-label:hover {
        background-color: #eaeaea;
    }
}
[id*="switch"]:checked + .switch-label .onf-btn {
    right: 5px;
    left: auto;
    background-color: #0d398e;
}

/*  responsity */
@media (min-width: 2560px), (min-height: 1440px) {
    .guideBook {
        height: 100vh;
    }
    .guideBook.bg01 {
        padding: 123px 0 179px 0;
        background: #040407 url(../img/bg_guideBook01.png) no-repeat 74% 398px;
    }
    .guideBook.bg02 {
        padding: 123px 0 214px 0;
    }
    .guideBook .inner {
        width: 871px;
        margin: 0 auto;
    }
    .cls {
        left: 1860px;
    }
}

@media (min-width: 1266px) {
    #smartSearchPop {
        display: none !important;
    }
}

@media (max-width: 1540px) {
    .guideBook.bg01 {
        padding: 123px 0 179px 193px;
    }
    .cls {
        left: 1342px;
    }
}

@media (max-width: 1265px) {
    .tit01 {
        margin-bottom: 25px;
        padding: 0 20px;
        font-size: 23px;
    }
    .tit02 {
        margin-bottom: 30px;
        font-size: 23px;
    }
    .tit03 {
        font-size: 19px;
    }
    .tit04 {
        font-size: 17px;
    }
    .listWrap {
        padding: 0;
    }
    .filterArea {
        display: none;
    }
    .topArea {
        display: block;
        width: 100%;
        padding: 25px 20px;
    }
    .recent-update {
        width: 100%;
        padding: 25px 20px 20px;
    }
    .topArea h3 {
        margin-bottom: 5px;
        padding: 0;
        font-size: 23px;
    }
    .topArea .titArea p {
        margin-bottom: 15px;
        font-size: 15px;
    }
    .listWrap .topArea .select-area {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        position: absolute;
        top: 168px;
        right: auto;
        left: 0;
    }
    .topArea .titArea .openFilterBtn {
        display: none !important;
    }
    .mob-filter {
        display: block;
    }
    .mob-filter a {
        display: block;
        width: 100%;
        height: 35px;
        padding: 9px 15px 7px 35px;
        border-radius: 3px;
        background: #1e265f url("../img/icon_filter_white.svg") no-repeat 15px
            10px;
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        position: relative;
    }
    .mob-filter a::after {
        content: "";
        width: 14px;
        height: 13px;
        background: url("../img/arrow_right_white01.svg") no-repeat 0 0;
        position: absolute;
        top: 12px;
        right: 15px;
    }
    .listArea {
        padding: 60px 20px 30px;
        background-color: #eef2f7;
        border-top: 1px solid #cecece;
    }
    .listArea .list {
        gap: 40px 0;
        justify-content: space-between;
    }
    .listArea ul li .product-name {
        margin-bottom: 5px;
        font-size: 17px;
        font-weight: bold;
    }
    .type {
        font-size: 15px;
    }
    .listTop {
        padding-top: 0;
    }
    .listTop h4 {
        font-size: 18px;
    }
    .listTop p {
        font-size: 15px;
    }
    .nice-select {
        width: 100%;
        height: 40px;
        padding: 10px 15px 9px;
        font-size: 15px;
    }
    .nice-select .option {
        width: 100%;
        line-height: 40px;
        min-height: 40px;
    }
    .inquiry-cont dl dd select,
    .inquiry-cont dl dd .nice-select,
    .inquiry-cont dl dd input[type="text"] {
        width: 100%;
    }
    .listTop .select-area,
    .select-area {
        position: static;
    }
    .select-area select,
    .select-area .nice-select {
        width: 100%;
        height: 40px;
        padding: 12px 30px 11px 15px;
        font-size: 15px;
        font-weight: normal;
    }
    .select-area select + select,
    .topArea .nice-select {
        margin-left: 0;
    }
    .list li .img {
        width: 100%;
        height: auto;
        margin-bottom: 0;
    }
    .list li .cont {
        width: 100%;
        height: 93px;
        padding: 20px 20px 30px;
        box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.06);
        border: solid 1px #c4c4c4;
        border-top: 0;
        background-color: #fff;
        box-sizing: border-box;
    }
    .nextBtn {
        display: none;
    }
    .list-count {
        position: relative;
    }
    .list-count .paging {
        width: 100%;
        margin-right: 0;
    }
    .list-count .paging li.num {
        display: none;
    }
    .list-count .paging li.next {
        margin-left: auto;
    }
    .list-count .paging li a {
        display: block;
        width: 132px;
        height: 40px;
        line-height: 40px;
        padding: 0;
        border-radius: 25px;
        border: solid 1px #3d3d3d;
        background-color: #fff;
        font-size: 15px;
        font-weight: bold;
        color: #3d3d3d;
    }
    .list-count .paging .prev a,
    .list-count .paging .prev a:focus,
    .list-count .paging .next a,
    .list-count .paging .next a:focus {
        background-image: none;
    }
    .list-count .paging .prev a:focus,
    .list-count .paging .next a:focus {
        border-color: #0d398e;
        background-color: #0d398e;
    }
    .list-count .paging .prev.off a,
    .list-count .paging .next.off a {
        color: #b2b2b2;
    }
    .list-count .paging .prev.off a:focus,
    .list-count .paging .next.off a:focus {
        background-color: #eaeaea;
        border-color: #bebebe;
    }
    .list-count span {
        font-size: 15px;
        font-weight: bold;
    }
    .list-count .paging .prev a:focus span,
    .list-count .paging .next a:focus span {
        color: #fff;
    }
    .list-count .paging .prev.off a:focus span,
    .list-count .paging .next.off a:focus span {
        color: #b2b2b2;
    }
    .list-count .sum {
        display: none;
    }
    .listWrap .listBottom {
        padding: 0 20px 50px;
        background-color: #eef2f7;
    }
    .new-updateArea {
        margin-bottom: 0;
        padding: 25px 20px 30px;
        background-color: #eef2f7;
        border-top: 1px solid #cecece;
    }
    .new-updateArea .tit01 {
        margin-bottom: 5px;
        padding: 0;
        font-size: 23px;
    }
    .new-updateArea .listTop {
        margin-bottom: 20px;
        padding: 0 0 20px 0;
    }
    .new-updateArea .listTop p {
        margin-bottom: 15px;
        font-size: 15px;
    }
    .new-updateArea .listTop .select-area {
        gap: 0 5px;
        position: static;
        flex-wrap: wrap;
    }
    .select-area input {
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }
    .new-updateArea .listTop .select-area select,
    .new-updateArea .listTop .select-area .nice-select {
        width: 49.2%;
    }
    .new-updateArea .listTop .select-area select.yearMonthSel,
    .new-updateArea .listTop .select-area .nice-select.yearMonthSel {
        width: 100%;
        margin-bottom: 5px;
    }
    .new-updateArea .nice-select .list .option {
        margin-top: 0;
    }
    .new-updateArea .list {
        gap: 40px 18px;
        margin: 15px 0 0;
    }
    .new-updateArea .list li {
        width: 48.8%;
    }
    .new-update-list {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }
    .new-update-list h4 {
        display: block;
        padding: 2px 0 0 38px;
        font-size: 20px;
    }
    .new-update-list h4 a {
        margin: 10px 0 0 0;
        padding-left: 0;
        font-size: 17px;
    }
    .new-update-list h4 a::before {
        display: none;
    }
    .new-update-list .more {
        top: 5px;
        font-size: 15px;
        background-color: transparent;
    }
    .new-update-view h4 {
        font-size: 20px;
        padding: 3px 0 3px 38px;
    }
    .new-update-view .txt {
        margin-bottom: 20px;
        font-size: 18px;
    }
    .new-update-view .top .listBtn {
        position: static;
    }

    /* 상세페이지 */
    .detailWrap {
        padding: 0;
    }
    .detailArea {
        width: 100%;
    }
    .product-service-intro {
        width: 100%;
        position: static !important;
        padding: 30px 20px;
        border-bottom: 1px solid #cecece;
    }
    .preViewImg {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        min-height: 192px;
    }
    .preViewImg > img {
        display: block;
        height: 100%;
        object-fit: cover; /* 이미지 비율 유지하며 채우기 */
    }
    .preViewImg + .preViewImg {
        margin-top: 20px;
    }
    .product-service-intro .top button {
        width: 35px;
        height: 35px;
    }
    .product-service-intro .top {
        margin-bottom: 15px;
    }
    .product-service-intro .top .steamed {
        background-size: 15px 14px;
    }
    .product-service-intro .top .share {
        background-size: 15px 15px;
    }
    .product-service-intro .bottom button {
        padding: 0;
        line-height: 56px;
        text-align: center;
    }
    .product-service-intro .bottom button::before {
        display: inline-block;
        position: static;
        vertical-align: top;
        margin: 12px 5px 0 0;
    }
    .collectionAddBtn {
        padding: 0;
    }
    .collectionAddBtn::before {
        margin: 13px 5px 0 0;
    }
    .shareBox {
        top: 9px;
        left: 41px;
    }
    .shareList {
        left: 80px;
    }
    .shareList li {
        margin-right: 5px;
    }
    .shareList li a {
        width: 35px;
        height: 35px;
    }
    .product-service-intro .prodName {
        margin-bottom: 15px;
        font-size: 22px;
    }
    .product-service-intro .prodNum {
        margin-bottom: 20px;
        font-size: 17px;
    }
    .product-service-intro .bottom {
        margin-top: 20px;
        padding-top: 20px;
    }
    .product-service-intro .bottom p {
        font-size: 15px;
        line-height: 1.87;
    }
    .basketBtn {
        width: 35%;
        height: 45px;
        margin: 0 6px 0 0;
        padding: 12px 20px;
        font-size: 18px;
    }
    .downBtn {
        width: 63%;
        height: 45px;
        padding: 12px 34px 12px 35px;
        font-size: 18px;
    }
    .reviewList {
        padding: 0 20px;
    }
    .reviewList ul {
        gap: 20px 1%;
    }
    .reviewList ul li {
        width: 49.5%;
        height: auto;
    }
    .detailTit {
        margin: 50px 0 10px;
        font-size: 19px;
    }
    .detail-keyword {
        padding: 0 20px;
    }
    .detail-keyword .detailTit {
        margin: 60px 0 10px;
    }
    .prod-Infor {
        padding: 0 20px 50px;
    }
    .prod-Infor p {
        font-size: 15px;
        line-height: 1.67;
    }
    .prod-Infor ul {
        gap: 10px;
    }
    .relative-prod {
        padding: 50px 20px;
        background-color: #eef2f7;
        border-bottom: 1px solid #cecece;
    }
    .relative-prod .detailTit,
    .featured-prod .detailTit {
        margin: 0 0 20px;
    }
    .featured-prod {
        padding: 50px 20px;
        background-color: #eef2f7;
    }
    .featured-prod .d-flex-wrap {
        display: flex;
        gap: 20px 1%;
    }
    .featured-prod .d-flex-wrap li {
        width: 49.5%;
    }
    .featured-prod .list li + li {
        margin-top: 0;
    }
    .product-name {
        margin-bottom: 5px;
        font-size: 17px;
        font-weight: bold;
    }
    .reviewList ul li a {
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    .reviewList ul li a > img {
        display: block;
        object-fit: cover;
    }
    .relative-prod .d-flex-wrap {
        display: flex;
        gap: 20px 1%;
    }
    .relative-prod .list li {
        width: 49.5%;
    }
    .relative-prod .list li + li {
        margin-top: 0;
    }

    /* 검색영역 */
    .searchArea [class*="searchBox"] {
        display: block;
    }
    .search-item {
        display: none;
    }
    .searchPop .closeBtn {
        display: block;
        position: absolute;
        top: 35px;
        right: 20px;
        background: none;
    }

    /* 마이페이지 */
    .mypageWrap {
        padding: 25px 20px 50px;
    }
    .tabMenu,
    .mypageWrap .tabMenu02 {
        margin-bottom: 30px;
    }
    .mypageWrap .tabMenu02 {
        display: block;
    }
    .faqWrap .tabMenu {
        display: block;
    }
    [class*="filterBox"] .tabMenu {
        display: flex;
        margin-bottom: 0;
    }
    .tabMenu li,
    .mypageWrap .tabMenu02 li {
        margin-bottom: -1px;
    }
    .tabMenu li a,
    .mypageWrap .tabMenu02 li a {
        border-left: 1px solid #0d398e;
        font-size: 15px;
    }
    .mypage-result-row .top .allChk,
    .mypage-result-row .total {
        font-size: 15px;
    }
    .mypage-result-row .periodConsole .period-search {
        flex-wrap: wrap;
        float: none;
    }
    .periodConsole .period-search .useDatepicker {
        width: 49.3%;
        height: 40px;
        font-size: 15px;
    }
    .periodConsole .period-search .searchBtn {
        display: block;
        width: 100%;
        height: 40px;
        padding: 11px 20px 12px;
        margin: 5px 0 0 0;
        font-size: 15px;
    }
    .periodConsole .buttonWrap {
        float: none;
        margin: 10px 0 0 0;
    }
    .periodConsole .buttonWrap button {
        width: 100%;
        height: 40px;
        padding: 11px 20px 12px;
        font-size: 15px;
    }
    .mypageList {
        margin-bottom: 30px;
    }
    .mypageList ul li {
        display: block;
        padding: 20px 0;
    }
    .chkBox {
        display: block;
        margin: 0 0 10px 0;
    }
    .mypageList ul li .prod-img {
        width: 100%;
        margin: 0;
    }
    .mypageList ul li .prod-img > img {
        width: 100%;
    }
    .mypageList ul li p {
        font-size: 15px;
    }
    .mypageList ul li .btns {
        display: flex;
        width: 100%;
    }
    .mypageList ul li .btns button {
        width: 100%;
        height: 40px;
        padding: 11px 20px 12px;
        font-size: 15px;
    }
    .mypage-result-row .listBottom .float-left,
    .mypage-result-row .listBottom .float-right {
        display: block;
        float: none;
    }
    .mypage-result-row .listBottom .float-left .button-type01 {
        width: 100%;
        text-align: center;
        font-size: 15px;
    }
    .mypage-result-row .listBottom .float-left .button-type01 + .button-type01 {
        margin: 10px 0 0 0;
    }
    .mypage-result-row .listBottom .list-count {
        margin: 20px 0 0 0;
    }
    .purchase-detailsList li .purchase-details {
        float: none;
        min-height: auto;
        margin: 0;
        padding: 0;
        border-right: 0;
    }
    .purchase-detailsList li .purchase-details + .purchase-details {
        margin-top: 20px;
    }
    .purchase-detailsList li .purchase-details:nth-child(2),
    .purchase-detailsList li .purchase-details:last-child {
        padding: 0;
    }
    .mypageList .modify-member-infor {
        padding: 20px 0;
    }
    .mypageList .modify-member-infor li {
        margin-bottom: 20px;
    }
    .mypageList .modify-member-infor li label,
    .mypageList .modify-member-infor li span {
        display: block;
        width: 100%;
        margin: 0 0 10px 0;
        font-size: 15px;
    }
    .mypageList .modify-member-infor li:last-child span {
        margin-bottom: 20px;
    }
    .mypageList .modify-member-infor li input[type="radio"] + label {
        display: inline-block;
    }
    .withdrawal {
        font-size: 15px;
    }
    .mypageList .modify-member-infor li input[type="text"],
    .mypageList .modify-member-infor li input[type="password"] {
        display: block;
        width: 100%;
    }
    .policy-page {
        padding: 25px 20px 60px;
    }
    .policy-page .ordered-list li {
        display: block;
    }
    .inquiry {
        padding: 25px 20px 50px;
    }
    .inquiry-cont dl {
        display: block;
    }
    .inquiry-cont dl dt {
        width: 100%;
        margin-bottom: 10px;
    }
    .inquiry-cont dl dd select,
    .inquiry-cont dl dd input[type="text"] {
        width: 100%;
    }
    .inquiry-cont dl dd .textBox {
        width: 100%;
        height: 200px;
    }

    /* 공지사항목록,상세 */
    .noticeList,
    .noticeView {
        padding: 25px 20px 50px;
    }
    .noticeList .list {
        display: block;
        margin-bottom: 30px;
    }
    .noticeList .list li {
        width: 100%;
    }
    .noticeList .list li + li {
        margin-top: 10px;
    }
    .noticeList .list li a {
        min-height: 235px;
        padding: 20px;
    }
    .noticeList .list li a h4 {
        margin-bottom: 20px;
        font-size: 16px;
    }
    .noticeList .list li a .cont {
        height: auto;
        padding: 0;
        border: 0;
        box-shadow: none;
        font-size: 15px;
    }
    .noticeView .view .cont {
        padding: 20px 0;
    }
    .noticeView .view .cont p {
        font-size: 15px;
    }
    .noticeView .view .cont p + p {
        margin-top: 20px;
    }
    .noticeView .view .bottom {
        margin-top: 20px;
        padding-top: 65px;
    }
    .noticeView .view .bottom .prev,
    .noticeView .view .bottom .next {
        top: 0;
    }
    .noticeView .view .bottom .prev em,
    .noticeView .view .bottom .next em {
        display: none;
    }
    .button-round-list {
        display: block;
        width: 100%;
    }

    /* FAQ */
    .faqWrap {
        padding: 25px 20px 50px;
    }
    .faq-search input[type="text"] {
        width: 80%;
    }
    .faqList ul li {
        padding: 20px 15px;
    }
    .faqList ul li .question {
        display: block;
        font-size: 16px;
    }
    .faqList ul li .answer .txt {
        font-size: 16px;
    }
    .faqList ul li span {
        margin: 0 0 10px 0;
    }

    /* checkOut */
    .checkOut {
        padding: 25px 0 60px;
    }
    .checkOut .tit01 {
        margin-bottom: 15px;
        padding: 0 20px;
    }
    .checkOut .total {
        font-size: 15px;
    }
    .checkOut .infor-input-box {
        padding: 20px 20px 30px;
        border-right: 0;
        border-left: 0;
    }
    .checkOut .summary-infor {
        padding: 30px 20px 0;
        border-top: 0;
    }
    .order-details-top {
        display: block;
        padding: 21px 20px 20px;
    }
    .order-details-top p {
        font-size: 17px;
    }
    .order-details-top .price {
        margin: 15px 0 0 0;
        padding: 0;
    }
    .order-details-top .price::before {
        display: none;
    }
    .order-details {
        padding: 20px;
    }
    .order-details dl dt {
        font-size: 16px;
    }
    .final-payment-amount dd {
        font-size: 23px;
    }
    .order-details dl.payment-method {
        display: block;
    }
    .order-details dl.payment-method dt {
        margin-bottom: 10px;
    }
    .payment-method dd {
        display: block;
    }
    .payment-method select,
    .payment-method .nice-select,
    .payment-method .button-confirmation {
        width: 100%;
    }
    .payment-method select,
    .payment-method .nice-select {
        margin: 0 0 10px 0;
        padding: 9px 15px 8px;
    }
    .checkOut .txt01 {
        font-size: 15px;
    }
    .completeBox {
        height: 232px;
        margin: 0 0 30px;
        padding: 30px 0;
        background-position-y: 125px;
    }
    .completeBox .alarmTxt01 {
        font-size: 25px;
    }
    .completeBox .alarmTxt02 {
        font-size: 15px;
    }
    .order-complete-details {
        display: block;
        padding: 0;
    }
    .order-complete-details ul li {
        font-size: 16px;
    }
    .ticket-infor {
        margin: 30px 0 0 0;
        padding: 0;
    }
    .ticket-infor::before {
        display: none;
    }
    .ticket-infor p {
        font-size: 15px;
    }
    .select-payment-method {
        margin: 0 0 30px 0;
        padding: 30px 0 25px;
    }
    .select-payment-method > ul {
        display: block;
    }
    .select-payment-method > ul li + li {
        margin-top: 16px;
    }
    .card-list {
        flex-wrap: wrap;
        gap: 0 10px;
    }
    .card-list li {
        width: 48.4%;
    }
    .card-list li:nth-child(n + 3):nth-child(-n + 4) {
        margin-top: 10px;
    }

    /* 제작가이드북 */
    .guideBook.bg01 {
        padding: 25px 20px 269px;
        background-image: url("../img/bg_guideBookM01.png");
        background-position: 68% 110%;
    }
    .guideBook.bg02 {
        padding: 25px 20px 270px;
        background-image: url("../img/bg_guideBookM02.png");
        background-position: 69.5% 100%;
    }
    .guideBook .inner {
        width: 100%;
    }
    .guideBook h1 {
        font-size: 22px;
        line-height: 1.18;
    }
    .guideBook.bg02 h1 span {
        display: block;
        font-size: 15px;
        margin-top: 5px;
    }
    .guideBook h2 {
        margin-bottom: 35px;
        font-size: 15px;
    }
    .guide-book-top {
        margin-bottom: 25px;
        padding-bottom: 25px;
    }
    .guideBook .guide-book-top .txt01 {
        font-size: 15px;
        line-height: 1.67;
    }
    .guideBook .guide-book-top .txt01 + .txt01 {
        margin-top: 20px;
    }
    .guideBook .guide-book-top .txt02 {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.67;
    }
    .d-flex.agree-area {
        display: block;
        margin-bottom: 15px;
    }
    .agree-area input[type="checkbox"] + label {
        font-size: 15px;
    }
    .agree-area .view-full-text {
        display: block;
        margin: 5px 0 0 34px;
        font-size: 15px;
    }
    .d-flex.application-area {
        display: block;
        margin-bottom: 30px;
    }
    .application-area input[type="text"] {
        width: 100%;
        height: 45px;
        margin: 0 0 17px 0;
        padding: 4px 4px 4px 15px;
    }
    .application-area button {
        width: 59px;
        height: 37px;
        line-height: 39px;
        font-size: 15px;
        top: 4px;
        left: auto;
        right: 10px;
    }
    .application-area span {
        margin: 0;
        font-size: 15px;
    }
    .guide-book-bottom dl dt {
        margin-bottom: 20px;
    }
    .guide-book-bottom dl dd {
        font-size: 15px;
        line-height: 1.4;
    }
    .cls {
        width: 15px;
        height: 15px;
        top: 30px;
        left: auto;
        right: 20px;
    }

    /* 정액제 이용요금 */
    .service-guide {
        padding: 25px 0 50px;
    }
    .service-guide .top,
    .service-guide-list {
        padding: 0 20px;
    }
    .service-guide .m-overflow-x {
        width: 100%;
        padding-left: 20px;
        overflow-x: auto;
    }
    .service-guide .usage-fee-list {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    /* 검색결과 */
    .searchWrap .topArea .select-area {
        gap: 0;
        position: static;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .searchWrap .topArea .select-area select:first-child + .nice-select {
        width: 100%;
        margin-bottom: 5px;
    }
    .searchWrap .topArea .select-area .nice-select {
        width: 49.5%;
    }
    .search-result {
        margin-bottom: 30px;
        padding: 0 20px 30px 20px;
    }
    .search-result.end {
        margin-bottom: 50px;
    }
    .search-result h4 {
        font-size: 23px;
    }
    .no-result {
        margin: 60px 0 40px;
        font-size: 18px;
    }
    .searchWrap .listBottom {
        padding: 0 20px 50px;
        background-color: #fff;
    }

    /* 장바구니에서 다운로드 */
    .download,
    .download-order {
        padding: 25px 20px 50px;
    }
    .download-cont {
        display: block;
        margin-bottom: 30px;
    }
    .download-list {
        width: 100%;
    }
    .download-list dl {
        display: block;
    }
    .download-list dl dt {
        width: 100%;
        height: auto;
        margin: 0 0 0 0;
    }
    .download-list dl dt img {
        width: 100%;
    }
    .use-rights-infor {
        width: 100%;
        height: auto;
        margin-top: 30px;
        padding: 20px;
    }
    .download .btnLeft {
        width: 100%;
        margin-bottom: 30px;
        position: static;
    }
    .download .btnLeft button {
        width: 100%;
    }
    .download .listBottom {
        width: 100%;
        padding: 0;
        background-color: #fff;
    }
    .download-order .order-complete-details {
        padding: 0;
    }
    .download-order .ticket-infor {
        margin: 30px 0;
    }
    .download-order .btnRight {
        display: flex;
        margin-left: 0;
    }
    .download-order .btnRight .button {
        width: 100%;
    }

    /* 소개 */
    .presentation {
        background: none;
    }
    .presentation .inner {
        padding-left: 0;
    }
    .presentation .left-bg {
        display: none;
    }
    .intro-cont {
        padding: 50px 20px;
    }
    .intro-cont h1 {
        margin-bottom: 30px;
        font-size: 35px;
    }
    .intro-letter {
        display: block;
        margin-bottom: 50px;
    }
    .intro-letter h2 {
        margin-bottom: 20px;
        font-size: 25px;
    }
    .intro-list li {
        padding: 130px 0 0 0;
    }
    .intro-list li + li {
        margin-top: 50px;
    }
    .intro-list li h3 {
        margin-bottom: 20px;
        font-size: 20px;
    }
    .intro-list li p {
        font-size: 17px;
    }
    .intro-etc {
        width: 100%;
        height: 100%;
        padding: 50px 20px;
        position: static;
    }
    .presentation .cls {
        width: 20px;
        height: 20px;
        top: 50px;
        right: 20px;
    }

    /* 라이선스 요약 - 국문라이선스 */
    .license {
        padding: 25px 20px 60px;
    }
    .license h3 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    .license h3 strong {
        display: none;
    }
    .license > p {
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 1.47;
    }
    .license > p.mTxt01 {
        margin-bottom: 10px;
        font-size: 17px;
        line-height: 1.29;
    }
    .license-guide {
        display: block;
        margin-bottom: 30px;
        padding: 30px 0;
    }
    .license-guide li {
        width: 100%;
        padding: 90px 0 0 0;
        background-size: 77px;
    }
    .license-guide li + li,
    .license-guide li:nth-child(n + 3):nth-child(-n + 4) {
        margin-top: 30px;
    }
    .license-guide li h4 {
        margin-bottom: 10px;
        font-size: 18px;
    }
    .license-guide li p {
        font-size: 15px;
        line-height: 1.47;
    }
    .license .button {
        width: 100%;
        height: 45px;
        line-height: 45px;
    }
    .license .policy-page {
        margin-top: 50px;
        padding: 0;
    }
    .policy-page table .first-col {
        width: 40%;
    }
    .policy-page table .second-col {
        width: auto;
    }
    .policy-page table .third-col {
        width: 40%;
    }
    .policy-page table thead th {
        font-size: 15px;
    }
    .policy-page table tbody td {
        padding: 11px 10px 9px;
        font-size: 15px;
    }

    /*  이용요금_정기구독 */
    .usage-fee-guide {
        padding: 25px 0 60px;
    }
    .usage-fee-guide .tit01 {
        margin-bottom: 30px;
        padding: 0 20px;
        font-size: 23px;
    }
    .tabLink {
        gap: 0 30px;
        margin-bottom: 25px;
        padding: 0 20px;
    }
    [class*="usage-fee-list"] {
        display: block;
        margin-bottom: 30px;
        padding: 0 20px;
    }
    [class*="usage-fee-list"] > li {
        width: 100%;
    }
    [class*="usage-fee-list"] > li > .cont h4 {
        font-size: 23px;
    }
    .usage-fee-list01 > li > .cont p {
        margin-bottom: 10px;
        padding: 0 10px;
    }
    .usage-fee-list01 > li {
        padding: 20px 10px;
    }
    .usage-fee-list01 > li + li,
    .usage-fee-list02 > li + li {
        margin-top: 20px;
    }
    .usage-fee-list01 > li > .cont,
    .usage-fee-list02 > li > .cont {
        height: auto;
        margin-bottom: 20px;
    }
    .usage-fee-list01 > li > .cont h4 {
        padding: 0 10px;
    }
    .usage-fee-guide .txt01 {
        margin-bottom: 20px;
        padding: 0 20px;
        font-size: 15px;
        line-height: 1.47;
    }
    .usage-fee-list02 > li {
        padding: 20px;
    }
    [class*="subscribe-box"] {
        padding: 20px 15px;
    }
    [class*="subscribe-box"] .top {
        margin-bottom: 15px;
    }
    [class*="subscribe-box"] .top h5 {
        font-size: 18px;
        line-height: 1.17;
    }
    [class*="subscribe-box"] .top h5 strong {
        margin-bottom: 5px;
    }
    [class*="subscribe-box"] p.price {
        flex-wrap: wrap;
    }
    [class*="subscribe-box"] p.price strong {
        margin-right: 5px;
        font-size: 26px;
    }
    [class*="subscribe-box"] p.price em {
        font-size: 21px;
    }
    [class*="subscribe-box"] p.price i {
        flex-basis: 100%;
        margin: 5px 0 0 0;
    }
    [class*="subscribe-box"] p.annual-bill-amount strong {
        margin: 0 5px 0 0;
        font-size: 18px;
    }
    [class*="subscribe-box"] p {
        font-size: 16px;
    }
    [class*="subscribe-box"] .top .save {
        width: 96px;
        height: 25px;
        padding: 4px 0 3px;
        font-size: 15px;
        top: 15px;
        right: 10px;
    }
    [class*="usage-fee-list"] li .button {
        height: 45px;
        line-height: 45px;
        margin: 10px 0 0;
    }
    .usage-fee-list01 > li:last-child > p .separate-inquiry {
        margin-bottom: 5px;
        font-size: 26px;
    }
    .usage-fee-list02 li .button {
        margin: 25px 0 0;
    }
    [class*="usage-fee-list"] > li > .cont .nice-select {
        width: 115px;
        height: 30px;
        padding: 6px 14px 5px 15px;
        top: 17px;
        right: 10px;
        font-size: 15px;
    }
    [class*="usage-fee-list"] > li > .cont h5 {
        padding: 0 10px;
        font-size: 18px;
    }
    [class*="usage-fee-list"] > li > .cont > ul {
        padding: 0 10px;
    }
    [class*="usage-fee-list"] > li > .cont > ul > li {
        font-size: 15px;
        line-height: 1.67;
    }
    .usage-fee-list01 > li:last-child > p {
        height: auto;
        padding-top: 20px;
        font-size: 16px;
        line-height: 1.44;
    }
    .usage-fee-list02 > li > .cont .nice-select {
        width: 115px;
        padding: 6px 14px 5px 15px;
    }
    .usage-fee-list02 > li > .cont > ul {
        padding: 0;
    }
    .usage-fee-list02 > li > .cont .nice-select:after {
        margin-top: -4px;
    }
    .usage-fee-guide h4 {
        font-size: 18px;
        line-height: 1.28;
    }
    .payment-usage-instructions {
        margin-bottom: 30px;
        padding: 0 20px;
    }
    .payment-usage-instructions ul {
        margin-top: -10px;
    }
    .payment-usage-instructions ul li {
        font-size: 15px;
        line-height: 1.53;
    }
    .payment-usage-instructions ul li::before {
        font-size: 15px;
    }
    .promotion {
        padding: 0 20px;
    }
    .promotion ul li {
        height: auto;
        padding: 120px 23px 18px;
        background-position: center 0;
    }
    .promotion ul li p {
        font-size: 16px;
        line-height: 1.38;
        text-align: center;
    }
    .promotion ul li p.teamName {
        font-size: 14px;
        line-height: 1.29;
    }
    .general-payment h5 {
        margin-bottom: 15px;
        font-size: 18px;
    }
    .usage-fee-list02 > li .general-payment h5 {
        margin-bottom: 5px;
    }
    .general-payment p.price strong {
        font-size: 26px;
    }
    .general-payment p {
        font-size: 17px;
    }

    /* 내 계정 */
    .tabLink li a {
        font-size: 18px;
    }
    .both-sides {
        display: block;
        margin-bottom: 0;
    }
    .both-sides .flex-right {
        width: 100%;
    }
    .flex-left,
    .flex-right {
        margin: 0 0 30px 0;
        padding: 0 20px;
    }
    .both-sides .flex-right .first-block {
        margin-bottom: 0;
    }
    .flex-right .first-block dl dt {
        margin-bottom: 5px;
        font-size: 16px;
    }
    .flex-right .first-block dl dd {
        margin-bottom: 15px;
        font-size: 17px;
    }
    .flex-right .first-block dl dd span {
        font-size: 14px;
    }
    .gray-box {
        width: 100%;
        padding: 20px;
    }
    .gray-box .first-block {
        margin: 0 0 15px 0;
        padding: 0 0 15px 0;
    }
    .gray-box h5 {
        font-size: 18px;
        font-weight: bold;
    }
    .gray-box .button-line {
        width: 100%;
        margin-top: 10px;
    }
    .gray-box p {
        font-size: 16px;
    }
    .receipt {
        padding: 0 20px;
    }
    .receipt .tit03 {
        margin-bottom: 10px;
        font-size: 21px;
    }
    .myAccount {
        padding: 25px 0 60px;
    }
    .service-usage-infor {
        width: 100%;
        margin: 0 0 32px 0;
        padding: 0 0 15px 0;
        border-bottom: 1px solid #acacac;
        position: static;
    }
    .service-usage-infor .tit03 {
        padding-bottom: 10px;
        font-size: 20px;
    }
    .service-usage-infor .tit04 {
        margin-bottom: 15px;
        font-size: 18px;
    }
    .service-usage-infor dl dt {
        margin-bottom: 5px;
        font-size: 16px;
    }
    .service-usage-infor dl dd {
        margin-bottom: 15px;
        font-size: 17px;
    }
    .service-usage-infor dl dd span {
        font-size: 14px;
    }
    .service-usage-infor dl dd a {
        font-size: 14px;
    }
    .subscription-details .both-sides {
        margin-bottom: 30px;
    }
    .myAccount .both-sides .flex-left {
        margin: 0 0 50px 0;
    }
    .subscription-details .both-sides .flex-right,
    .subscription-details.subscription-details01 .both-sides .flex-right {
        padding: 0 20px;
    }
    .subscription-details .flex-right .first-block {
        border-top: 0;
        padding: 0;
        background-size: 277px auto;
        background-position: center 65px;
    }
    .myAccount .flex-right .first-block .txt01 {
        font-size: 20px;
    }
    .myAccount .flex-right .first-block .txt02 {
        margin-bottom: 132px;
    }
    .infor-input-list li.d-flex {
        display: block;
    }
    .infor-input-list li span {
        display: block;
        width: 100%;
    }
    .infor-input-list li span + span {
        margin-top: 20px;
    }
    .infor-input-list li label {
        font-size: 16px;
    }
    .infor-input-list li input[type="text"].w-auto {
        width: 100%;
    }
    .vertival-list-box > li {
        display: block;
        width: 100%;
        height: auto;
    }
    .team-member-list .vertival-list-box > li .situation {
        display: block;
        margin: 0 0 10px 0;
    }
    .team-member-list .vertival-list-box > li .member-name {
        display: block;
        width: 100%;
        margin: 0 0 5px 0;
    }
    .vertival-list-box {
        width: 100%;
    }
    .vertival-list-box > li p + p {
        margin: 5px 0 0 0;
    }
    .vertival-list-box .btnWrap {
        top: 34px;
        right: 15px;
    }
    .myAccount .btnWrap .button-color01 {
        width: 61.6%;
    }
    .myAccount .btnWrap .button-line {
        width: 37%;
    }
    .backward {
        margin: 0 0 20px 20px;
    }
    .listArea01 {
        padding: 0 20px;
    }
    .listArea01 .list {
        gap: 30px 1%;
    }
    .list li {
        width: 49.5%;
    }
    .search-result .list {
        gap: 20px 0;
        justify-content: space-between;
    }
    .checkOut .d-flex {
        display: block;
    }
    .infor-input-box {
        width: 100%;
        padding: 15px;
    }

    /* 결제방법 업데이트 */
    .update-payment-method {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .update-payment-method .backward {
        margin: 0 0 20px 0;
    }
    .update-payment-method .vertival-list-box > li {
        padding: 15px;
    }
    .update-payment-method .vertival-list-box > li ul {
        margin: 15px 0 0 0;
    }
    .update-payment-method .vertival-list-box > li .hide-cont {
        margin-top: 30px;
    }
    .update-payment-method .vertival-list-box > li span {
        display: block;
        margin: 15px 0 0 0;
    }
    .update-payment-method .vertival-list-box > li .card-etc-input span {
        margin: 0;
    }
    .update-payment-method .txt01 {
        margin-bottom: 30px;
        font-size: 16px;
    }
    .update-payment-infor {
        padding: 0 20px;
        background: none;
    }
    .update-payment-infor .backward {
        margin: 0 0 20px 0;
    }
    .update-payment-infor .infor-input-list,
    .account-details .sub-area02 .infor-input-list {
        width: 100%;
    }

    /* 계정상세정보 */
    .account-details.bg01 {
        background: none;
    }
    .account-details .sub-area02 .infor-input-list li span {
        width: 100%;
    }
    .account-details .btnWrap {
        margin: 30px 0 0 0;
        padding: 20px 20px 0;
    }
    .account-details .sub-area {
        margin-bottom: 50px;
        padding: 0 20px;
    }
    .account-details .sub-area01 .infor-input-list {
        width: 100%;
    }

    /* 새비번 설정 */
    .set-new-password {
        width: 100%;
        margin: 0;
        padding: 30px 20px;
    }
    .set-new-password h4 {
        margin: 0 0 20px 0;
        font-size: 23px;
    }
    .set-new-password input[type="text"],
    .set-new-password .button-color01 {
        width: 100%;
    }
    .set-new-password .txt01 {
        font-size: 16px;
    }

    .subscribe-newsletter {
        padding: 0 20px;
    }

    /* 구독취소 */
    .unsubscribe .both-sides .flex-left {
        width: 100%;
    }
    .unsubscribe .flex-left .sub-area01 {
        margin-bottom: 50px;
    }
    .unsubscribe .flex-left .txt01,
    .unsubscribe .flex-left ul li {
        font-size: 16px;
    }
    .unsubscribe .flex-left ul.user-guide li {
        line-height: 1.3;
    }
    .unsubscribe .flex-left ul.user-guide li + li {
        margin-top: 15px;
    }
    .unsubscribe .flex-left ul.user-guide li::before {
        top: -3px;
    }
    .notice-box {
        height: auto;
        font-size: 16px;
    }
    .btnWrap.bottom {
        margin: 0;
        padding: 20px 20px 0;
    }
    .account-details {
        background-image: none;
    }

    /* 팀 */
    .team .flex-left {
        width: 100%;
    }
    .team .flex-right {
        margin-bottom: 0;
    }
    .team .gray-box {
        padding: 20px 10px;
    }
    .team .gray-box .btnWrap.bottom {
        padding: 20px 0 0;
    }
    .team .flex-left .txt01 {
        font-size: 18px;
    }
    .team .flex-left label,
    .team .flex-left .txt02 {
        font-size: 16px;
    }
    .team .total {
        display: block;
    }
    .team .total dt {
        margin-bottom: 5px;
        font-size: 16px;
    }
    .team .total dd {
        margin-left: 0;
        font-size: 20px;
    }

    /* 팀 구독상세 */
    .subscription-details-team {
        padding: 0 20px;
    }
    .subscription-details-team .service-usage-infor {
        margin: 0 0 35px 0;
        padding: 0;
        border-bottom: 0;
    }

    /* 팀 관리 */
    .team.team-member-list .flex-left,
    .team.team-member-list .flex-right {
        width: 100%;
    }
    .team-member-list .d-flex {
        flex-wrap: wrap;
        gap: 0 20px;
    }
    .team-member-list .d-flex p {
        width: 46%;
        font-size: 16px;
    }
    .team-member-list .d-flex p:nth-child(n + 3):nth-child(-n + 4) {
        margin-top: 5px;
    }
    .team-member-list .d-flex .question-mark {
        margin-left: 0;
        position: absolute;
        right: 0;
        top: 20px;
    }
    .question-mark .tooltiptext {
        display: none;
        width: 210px;
        height: 210px;
        padding: 15px;
        visibility: visible;
        opacity: 1;
        bottom: 172%;
        margin-left: -190px;
    }
    .question-mark .tooltiptext::after {
        margin-left: 72px;
    }
    .question-mark .tooltiptext h5 {
        font-size: 15px;
    }
    .question-mark .tooltiptext ul li {
        font-size: 14px;
    }
    .question-mark .tooltiptext.active {
        visibility: visible;
        opacity: 1;
    }
    .team-member-list .vertival-list-box > li button {
        margin: 5px 0 0 auto;
    }
    .team-member-list .hidden-box {
        top: 8px;
        right: 24px;
    }
    .team.team-member-list .notify {
        padding: 50px 0 0 0px;
        font-size: 16px;
    }
    .team.team-member-list .notify a {
        margin-top: 5px;
        position: static;
    }

    /* 내 프로젝트 */
    .myProject {
        padding: 25px 0 60px;
    }
    .titArea01 {
        padding: 0 20px;
    }
    .myProject .titArea01 {
        margin: 0;
        padding: 0 20px 20px;
    }
    .myProject .titArea01 .tit01 {
        padding: 0;
    }
    .titArea01 p {
        margin-bottom: 15px;
        font-size: 18px;
    }
    .titArea01 .right-side.d-flex {
        display: block;
        position: static;
    }
    .titArea01 .right-side .helpTxt {
        margin: 0 0 10px 0;
        padding-left: 0;
        text-align: right;
    }
    .titArea01 .right-side .helpTxt::before {
        position: static;
        margin-right: 10px;
        vertical-align: middle;
    }
    .titArea01 .right-side .button-line {
        width: 100%;
        padding: 0;
        text-align: center;
        font-size: 17px;
        color: #3d3d3d;
    }
    .titArea01 .right-side .button-line::before {
        margin-right: 10px;
        position: static;
    }
    .topArea .period-area {
        display: flex;
        gap: 0 5px;
        margin: 10px 0;
    }
    .topArea .search-area input[type="text"] {
        width: 80.6%;
    }
    .topArea .search-area .searchBtn {
        width: 18.5%;
        height: 40px;
        margin-left: 3px;
        padding: 11px 0 12px;
        font-size: 16px;
    }
    .topArea .period-area button {
        width: 100%;
        height: 40px;
        padding: 11px 15px 12px;
        font-size: 16px;
    }
    .topArea .period-area button + button {
        margin-left: 0;
    }
    .myProject .listArea01 {
        margin: 20px 0 50px;
    }
    .listArea01 .list li .imgArea {
        width: 100%;
        margin-bottom: 0;
    }
    .listArea01 .list li .img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        overflow: hidden;
    }
    .list li .imgArea.d-flex-wrap {
        gap: 5px 0;
        justify-content: space-between;
    }
    .list li .imgArea.d-flex-wrap > div {
        width: 49.43%;
        aspect-ratio: auto;
    }
    .list li .imgArea.three-img > div:last-child > div {
        height: 49.54%;
    }
    .listBottom {
        padding: 0 20px;
    }
    .myProject .relative-prod .list li .img,
    .myProject .featured-prod .list li .img {
        width: 100%;
        height: auto;
    }
    .license.myProject {
        padding: 25px 20px 60px;
    }
    .license.myProject .policy-page {
        margin-top: 50px;
        padding: 0;
    }
    .policy-page h4,
    .policy-page h5 {
        margin-bottom: 10px;
        font-size: 16px;
    }
    .policy-page p {
        margin-bottom: 20px;
        font-size: 15px;
        line-height: 1.47;
    }
    .policy-page .ordered-list li,
    .policy-page ul li {
        font-size: 15px;
        line-height: 1.47;
    }
    .policy-page .ordered-list li + li {
        margin-top: 10px;
    }
    .titArea01 .right-side {
        top: 78px;
        right: 20px;
    }
    .myProject .product-service-intro .shareBox {
        top: 9px;
        left: 41px;
    }
    .myProject .noContent {
        padding: 50px 20px 0;
    }
    .myProject .noContent .txt01 {
        font-size: 23px;
        line-height: 30px;
    }
    .myProject .noContent .txt02 {
        font-size: 16px;
        line-height: 23px;
    }
    .myProject .noContent button {
        width: 100%;
        height: 40px;
        font-size: 16px;
    }
    .hidden-icon01 .seeMore:hover .tooltiptext {
        visibility: hidden;
    }

    /* 내 다운로드 */
    .myDownload {
        padding: 25px 0 60px;
    }
    .myDownload .titArea01 {
        margin: 0;
    }
    .myDownload .tit01 {
        padding: 0;
    }
    .myDownload .both-sides {
        margin: 0 0 50px;
    }
    .myDownload .filterBox {
        width: 100%;
        padding: 0 20px 20px;
    }
    .myDownload .listArea {
        width: 100%;
        padding: 30px 20px 0;
        background-color: transparent;
        border-left: 0;
    }
    .list-vertical li .d-flex {
        display: block;
    }
    .list-vertical > li .full-license {
        margin: 30px 0 0 0;
    }
    .list-vertical > li .img {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
        margin: 0 0 10px 0;
    }
    .list-vertical > li .img > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover; /* 이미지 비율 유지하며 채우기 */
    }
    .list-vertical > li .button-line-down {
        display: block;
        margin: 20px 0 0 0;
        background-position: 43px 6px;
    }
    .download-license {
        margin: 10px 0 0 0;
        position: static;
    }

    /* 내 컬렉션 */
    .myCollection {
        padding: 25px 0 60px;
    }
    .myCollection .titArea01 {
        margin: 0;
        padding: 0 20px 25px;
    }
    .myCollection .tit01 {
        padding: 0;
    }
    .myCollection .list li .cont {
        height: auto;
        padding: 20px 10px 30px;
    }
    .myCollection .listArea01 {
        margin: 30px 0 50px;
    }
    .myCollection .detail .listArea01 {
        margin: 0 0 50px;
    }
    .myCollection .detail .listArea01 ul li .product-name {
        margin-bottom: 10px;
    }
    .share01 {
        width: 35px;
        height: 35px;
        top: 45px;
        right: 10px;
    }
    .myCollection .button-wrap {
        display: block;
        height: auto;
        margin: 0;
        padding: 0;
    }
    .myCollection .button-wrap button {
        display: block;
        width: 100%;
    }
    .myCollection .button-wrap button + button {
        margin-top: 5px;
    }

    /* 팀시작  */
    .team-subscription {
        padding: 25px 0 60px;
    }
    .team-subscription h3 {
        font-size: 30px;
    }
    .team-subscription .both-sides {
        margin: 0 0 50px 0;
    }
    .team-subscription .flex-left {
        padding-bottom: 150px;
        background-position: center bottom;
        background-size: 320px;
    }
    .team-subscription .flex-left h4 {
        font-size: 23px;
    }
    .team-subscription .flex-left p {
        font-size: 20px;
    }
    .team-subscription .flex-right .d-flex h4 {
        font-size: 24px;
    }
    .team-subscription.general .flex-right {
        width: 100%;
    }
    .team-subscription .flex-right .d-flex p {
        margin: 11px 0 0 10px;
        font-size: 15px;
    }
    .team-subscription.general .flex-right .d-flex {
        display: block;
    }
    .team-subscription.general .flex-right .d-flex p {
        margin: 10px 0 0 0;
    }
    .team-subscription .flex-right .button-color01 {
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }
    .txt-list li {
        font-size: 17px;
    }
    .user-reviews,
    .reason-selection {
        padding: 0 20px;
    }
    .user-reviews h4 {
        margin: 0 0 30px 0;
        font-size: 23px;
        line-height: 1.35;
    }
    .user-reviews ul {
        margin: 0 0 50px 0;
    }
    .user-reviews ul li {
        padding: 108px 0 0 0;
        background-position: 0 0;
        background-size: 100px;
    }
    .user-reviews ul li + li {
        margin-top: 20px;
    }
    .user-reviews ul li p {
        font-size: 16px;
    }
    .user-reviews ul li .team {
        font-size: 18px;
    }
    .reason-selection h4 {
        font-size: 23px;
    }
    .reason-selection ul {
        display: block;
        margin: 0 0 30px 0;
    }
    .reason-selection ul li {
        width: 100%;
        height: auto;
        padding: 25px 20px;
    }
    .reason-selection ul li + li {
        margin-top: 10px;
    }
    .reason-selection .button-color01 {
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin: 0;
        font-size: 18px;
    }
    .reason-selection > p {
        font-size: 24px;
    }
    .subscribe-news {
        padding: 0 20px;
    }
    .subscribe-news .detailTit {
        margin: 0 0 20px 0;
    }
    .subscribe-news .recommendation {
        padding: 0 0 50px 0;
    }
    .subscribe-news .d-flex {
        display: block;
    }
    .subscribe-news input {
        width: 100%;
        height: 40px;
        padding: 11px 20px 12px;
        font-size: 16px;
    }
    .subscribe-news button {
        width: 100%;
        height: 40px;
        margin: 5px 0 0 0;
        padding: 11px 0 12px;
        font-size: 16px;
    }
    .recommendation .float-left {
        float: none;
    }
    .subscribe-news .recommendation .float-left {
        width: 100px;
        height: 100px;
        margin: 0 0 10px 0;
        padding: 25px;
    }
    .subscribe-news .recommendation .txt01 {
        margin: 0 0 25px 0;
        font-size: 17px;
        line-height: 1.5;
    }
    .subscribe-news .recommendation .txt02 {
        font-size: 16px;
    }
    .grayDownBtn {
        line-height: 55px;
        padding: 0;
        text-align: center;
    }
    .grayDownBtn::before {
        display: inline-block;
        margin: -5px 5px 0 0;
        vertical-align: middle;
        position: static;
    }
    .myProject .product-service-intro .bottom button {
        line-height: 55px;
        padding: 0;
        text-align: center;
    }
    .myProject .product-service-intro .bottom button::before {
        display: inline-block;
        margin: -5px 5px 0 0;
        vertical-align: middle;
        position: static;
    }

    /* 세금계산서 */
    .tax-invoice {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 30px 20px 50px;
    }
    .tax-invoice .tax-head {
        padding: 0 0 25px 0;
    }
    .tax-invoice .tax-head h1 {
        width: 220px;
        margin-bottom: 30px;
        position: static;
    }
    .tax-invoice .tax-head h1 > img {
        width: 100%;
    }
    .tax-invoice .tax-head h2,
    .tax-invoice .tax-head p {
        text-align: left;
    }
    .tax-invoice .tax-details .tableCol table thead th {
        font-size: 15px;
    }
    .tax-invoice .tax-details .tableCol table tbody td {
        padding: 7px 10px;
        border: 1px solid #acacac;
        font-size: 15px;
        vertical-align: middle;
    }
    .tax-invoice .tax-cont {
        display: block;
    }
    .tax-invoice .tax-cont .flex-left,
    .tax-invoice .tax-cont .flex-right {
        margin: 0;
        padding: 0;
    }
    .tax-invoice .tax-cont .flex-left {
        margin: 0 0 30px 0;
    }
    .tax-invoice .tax-cont .flex-left dl dt,
    .tax-invoice .tax-cont .flex-right dl dt {
        width: 30%;
    }
    .tax-invoice .tax-cont dl dd {
        width: 70%;
        padding-left: 15px;
        box-sizing: border-box;
    }
    .tax-invoice .tax-details {
        padding: 25px 0;
    }
    .tax-payment-details div {
        padding: 10px 0;
    }
    .tax-invoice .tax-footer {
        display: block;
        min-height: 205px;
        position: relative;
    }
    .tax-invoice .tax-footer .flex-left {
        margin: 20px 0 0 0;
        padding: 0;
        position: absolute;
        top: 127px;
        left: 0;
    }
    .tax-invoice .tax-footer .flex-right {
        margin: 0;
        padding: 0;
        position: absolute;
        top: 30px;
        right: 0;
    }

    /* 헬프센터 */
    .helpCenter01 {
        margin: 0;
        padding: 0 0 50px 0;
    }
    .helpCenter01 .top {
        margin: 0 0 50px 0;
        padding: 40px 20px 25px;
    }
    .helpCenter01 .top h3 {
        font-size: 25px;
    }
    .help-search input[type="text"] {
        width: 83%;
    }
    .helpCenter01 .help-search {
        justify-content: left;
        margin-bottom: 30px;
    }
    .search-type {
        display: block;
    }
    .search-type dt {
        margin: 0 0 10px 0;
    }
    .search-type dd {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .search-type dd a + a {
        margin-left: 0;
    }
    .helpListGroup.d-flex-wrap {
        display: block;
        margin-bottom: 50px;
        padding: 0 20px;
    }
    .helpListGroup > div {
        width: 100%;
    }
    .helpListGroup > div + div {
        margin-top: 50px;
    }
    .helpListGroup ul {
        min-height: auto;
    }
    .helpListGroup ul li {
        padding: 0 10px;
    }
    .helpCenter01 .bottomBox {
        width: auto;
        margin: 0 20px;
        padding: 45px 0 30px;
        background-position: center 123px;
    }
    .helpCenter01 .bottomBox p.txt01 {
        font-size: 20px;
    }
    .helpCenter01 .bottomBox p.txt02 {
        font-size: 16px;
    }
    .helpCenter02,
    .helpCenter03 {
        padding: 25px 20px 50px;
    }
    .helpCenter02 .tit01 {
        padding: 0;
    }
    .helpCenter02 .helpList li {
        padding: 0 10px;
    }
    .help-right {
        display: none;
        width: 100%;
    }
    .help-left {
        width: 100%;
    }
    .help-left .tit01 {
        padding: 0;
    }
    .help-editor h4 {
        font-size: 20px;
    }
    .help-editor p {
        margin: 0 0 25px 0;
        font-size: 16px;
    }
    .help-editor ol li {
        font-size: 16px;
    }
    .switch-label:hover {
        background-color: #eaeaea;
    }
    [id*="switch"]:checked + .switch-label:hover {
        background-color: #fff;
    }

    /* layerPopup */
    .modalPop .modalLayer.long,
    .modalPop .modalLayer.modal-hs01.long,
    .modalPop .modalLayer.modal-hs02.long,
    .modalPop .modalLayer.type01.long {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: translate(0, 0);
    }
    .modalPop .modalLayer.type,
    .modalPop .modalLayer.type01 {
        padding: 0;
    }
    .modalPop .modalLayer.type01 {
        top: 0;
        transform: translate(-50%, 0);
    }
    .modalLayer.type02 {
        padding: 20px;
    }
    .modalLayer .modalHead {
        padding: 30px 20px 20px;
        border-bottom: 1px solid #cacdd5;
    }
    .modalLayer.type01 .modalHead {
        padding: 30px 20px 15px;
        border-bottom: 0;
    }
    .modalLayer .modalHead h3 {
        font-size: 20px;
        font-weight: bold;
        color: #1e265f;
    }
    .modalLayer .modalCont {
        height: 100%;
        overflow-y: auto;
    }
    .modalLayer.type .modalCont {
        padding: 0 20px;
    }
    .modalLayer.type01 .modalCont {
        margin: 0;
        padding: 20px;
        overflow-y: auto;
    }
    .modalLayer .modalCont h4 {
        padding: 20px 20px 15px;
        border-bottom: 1px solid #cacdd5;
        font-size: 18px;
        font-weight: bold;
    }
    .modalPop .modalLayer.type .modalCont h4 {
        padding: 0;
        font-size: 19px;
        border-bottom: 0;
    }
    .modalLayer.type01 .modalCont h4 {
        padding: 0 0 15px 0;
    }
    .modalLayer .modalCont > p {
        font-size: 16px;
    }
    .modalLayer.type01 .modalClose {
        top: 38px;
    }
    #smartSearchPop .modalLayer .modalHead {
        padding: 30px 20px 15px;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu01 {
        padding: 20px;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu01 li {
        width: 50%;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu01 li a {
        display: block;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border: solid 1px #0d398e;
        background-color: #fff;
        font-size: 15px;
        font-weight: 500;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu01 li.active a {
        background-color: #0d398e;
        color: #fff;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu2-1,
    #smartSearchPop .modalLayer .modalCont .tabMenu2-2 {
        padding: 0 20px;
        gap: 0 20px;
        border-bottom: 1px solid #cacdd5;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu2-1 li,
    #smartSearchPop .modalLayer .modalCont .tabMenu2-2 li {
        width: auto;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu2-1 li a,
    #smartSearchPop .modalLayer .modalCont .tabMenu2-2 li a {
        display: block;
        height: auto;
        line-height: normal;
        padding-bottom: 5px;
        font-size: 15px;
        border: 0;
    }
    #smartSearchPop .modalLayer .modalCont .tabMenu2-1 li.active a,
    #smartSearchPop .modalLayer .modalCont .tabMenu2-2 li.active a {
        font-weight: bold;
        border-bottom: 2px solid #3d3d3d;
        background-color: transparent;
        color: #3d3d3d;
    }
    #smartSearchPop [class*="filterBox"] .tabMenu {
        gap: 5px;
        padding: 0 0 20px 0;
        border-top: 0;
    }
    #smartSearchPop [class*="filterBox"] .tabMenu li a {
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        font-weight: 500;
    }
    #m-color1-1 + label:before,
    #m-color2-1 + label:before,
    #m-color3-1 + label:before,
    #m-color4-1 + label:before,
    #m-color5-1 + label:before,
    #m-color6-1 + label:before,
    #m-color7-1 + label:before,
    #m-color8-1 + label:before {
        background-color: #0066b3;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-2 + label:before,
    #m-color2-2 + label:before,
    #m-color3-2 + label:before,
    #m-color4-2 + label:before,
    #m-color5-2 + label:before,
    #m-color6-2 + label:before,
    #m-color7-2 + label:before,
    #m-color8-2 + label:before {
        background-color: #21409a;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-3 + label:before,
    #m-color2-3 + label:before,
    #m-color3-3 + label:before,
    #m-color4-3 + label:before,
    #m-color5-3 + label:before,
    #m-color6-3 + label:before,
    #m-color7-3 + label:before,
    #m-color8-3 + label:before {
        background-color: #00aaad;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-4 + label:before,
    #m-color2-4 + label:before,
    #m-color3-4 + label:before,
    #m-color4-4 + label:before,
    #m-color5-4 + label:before,
    #m-color6-4 + label:before,
    #m-color7-4 + label:before,
    #m-color8-4 + label:before {
        background-color: #00a65d;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-5 + label:before,
    #m-color2-5 + label:before,
    #m-color3-5 + label:before,
    #m-color4-5 + label:before,
    #m-color5-5 + label:before,
    #m-color6-5 + label:before,
    #m-color7-5 + label:before,
    #m-color8-5 + label:before {
        background-color: #ffdd01;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-6 + label:before,
    #m-color2-6 + label:before,
    #m-color3-6 + label:before,
    #m-color4-6 + label:before,
    #m-color5-6 + label:before,
    #m-color6-6 + label:before,
    #m-color7-6 + label:before,
    #m-color8-6 + label:before {
        background-color: #963;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-7 + label:before,
    #m-color2-7 + label:before,
    #m-color3-7 + label:before,
    #m-color4-7 + label:before,
    #m-color5-7 + label:before,
    #m-color6-7 + label:before,
    #m-color7-7 + label:before,
    #m-color8-7 + label:before {
        background-color: #ed1c24;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-8 + label:before,
    #m-color2-8 + label:before,
    #m-color3-8 + label:before,
    #m-color4-8 + label:before,
    #m-color5-8 + label:before,
    #m-color6-8 + label:before,
    #m-color7-8 + label:before,
    #m-color8-8 + label:before {
        background-color: #f58220;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-9 + label:before,
    #m-color2-9 + label:before,
    #m-color3-9 + label:before,
    #m-color4-9 + label:before,
    #m-color5-9 + label:before,
    #m-color6-9 + label:before,
    #m-color7-9 + label:before,
    #m-color8-9 + label:before {
        background-color: #5c2d91;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-10 + label:before,
    #m-color2-10 + label:before,
    #m-color3-10 + label:before,
    #m-color4-10 + label:before,
    #m-color5-10 + label:before,
    #m-color6-10 + label:before,
    #m-color7-10 + label:before,
    #m-color8-10 + label:before {
        background-color: #000;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-11 + label:before,
    #m-color2-11 + label:before,
    #m-color3-11 + label:before,
    #m-color4-11 + label:before,
    #m-color5-11 + label:before,
    #m-color6-11 + label:before,
    #m-color7-11 + label:before,
    #m-color8-11 + label:before {
        border: solid 1px #cecece;
        background-color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #m-color1-11:checked + label:before,
    #m-color2-11:checked + label:before,
    #m-color3-11:checked + label:before,
    #m-color4-11:checked + label:before,
    #m-color5-11:checked + label:before,
    #m-color6-11:checked + label:before,
    #m-color7-11:checked + label:before,
    #m-color8-11:checked + label:before {
        background-image: url("../img/bg_chk02.svg");
    }
    #m-color1-12 + label:before,
    #m-color2-12 + label:before,
    #m-color3-12 + label:before,
    #m-color4-12 + label:before,
    #m-color5-12 + label:before,
    #m-color6-12 + label:before,
    #m-color7-12 + label:before,
    #m-color8-12 + label:before {
        background-color: #7f7f7f;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }
    #filterPop .modalLayer .modalCont h4 {
        margin-bottom: 0;
    }
    #filterPop .modalLayer .modalHead h3 {
        padding-left: 23px;
        background: url(../img/icon_filter.svg) no-repeat 0 3px;
    }
    #filter-color11:checked + label:before,
    #filterPop-color11:checked + label:before {
        background-image: url("../img/bg_chk02.svg");
    }
    .modalLayer .modalCont .filterBoxM {
        display: block;
        margin-top: 0;
        background-color: #eef2f7;
        border: 0;
        overflow-y: auto;
    }
    .modalLayer .modalCont .filterBoxM dl {
        width: 100%;
        margin-bottom: 10px;
    }
    .modalLayer .modalCont .filterBoxM dl.active {
        height: auto;
        padding: 0;
        background-color: transparent;
    }
    .modalLayer .modalCont .filterBoxM dl dt {
        padding: 20px;
        border-radius: 2px;
        border: solid 1px #c4c4c4;
        background-color: #fff;
        font-size: 16px;
    }
    .modalLayer .modalCont .filterBoxM dl.filter-color dt,
    .modalLayer .modalCont .filterBoxM dl.filter-ratio dt {
        border-bottom: 0;
    }
    .modalLayer .modalCont .filterBoxM dl.filter-color.active dt,
    .modalLayer .modalCont .filterBoxM dl.filter-ratio.active dt {
        border-bottom: solid 1px #c4c4c4;
    }
    .modalLayer .modalCont .filterBoxM dl.filter-color dd,
    .modalLayer .modalCont .filterBoxM dl.filter-ratio dd {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }
    .modalLayer .modalCont .filterBoxM dl dt::after {
        top: 24px;
        right: 20px;
    }
    .modalLayer .modalCont .filterBoxM dl dd {
        margin-top: 10px;
        border-radius: 2px;
        border: solid 1px #c4c4c4;
        background-color: #fff;
        padding: 20px;
    }
    .modalLayer .modalCont .filterBoxM dl dd ul li + li {
        margin-top: 20px;
    }
    .modalLayer
        .modalCont
        #small-classification05
        .filterBoxM
        dl
        dd
        ul
        li
        + li {
        margin-top: 25px;
    }
    .modalLayer .modalCont .filterBoxM dl.filter-flow dd ul li + li,
    .modalLayer .modalCont .filterBoxM dl.filter-structure dd ul li + li,
    .modalLayer .modalCont .filterBoxM dl.filter-cluster dd ul li + li,
    .modalLayer .modalCont .filterBoxM dl.filter-diffusion dd ul li + li,
    .modalLayer .modalCont .filterBoxM dl.filter-table dd ul li + li {
        margin-top: 30px;
    }
    .modalLayer.long .modalCont .btnWrap {
        width: 100%;
        padding: 15px 20px;
        background-color: #fff;
        border-top: 1px solid #3d3d3d;
        position: fixed;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
    }
    .modalLayer.type02 .modalCont .btnWrap,
    .modalLayer .modalCont .btnWrap.type01 {
        padding: 15px 0 0 0;
        position: static;
    }
    .modalLayer .modalCont .button-reset,
    .modalLayer .modalCont .button-search {
        width: 100%;
    }
    .modalLayer .modalCont .button-reset {
        color: #3d3d3d;
    }
    .modalClose {
        width: 15px;
        height: 15px;
        top: 38px;
        right: 20px;
    }
    .modalPop .modalLayer.modal-hs01,
    .modalPop .modalLayer.modal-hs02 {
        top: 0;
        transform: translate(-50%, 0);
    }
    #reportPop .modalLayer,
    #licensePop .modalLayer {
        width: 100%;
        height: auto;
    }
    #licensePop .modalLayer .modalCont .textBox {
        width: 100%;
        height: 485px;
    }
    #reportPop .modalLayer .modalCont .textBox {
        width: 100%;
    }
    .memberPop .modalLayer {
        padding: 20px;
    }
    .memberPop .modalLayer .modalCont {
        overflow-y: auto;
    }
    .memberPop .modalCont h4 {
        margin-bottom: 10px;
        padding: 0 0 10px 0;
    }
    .indent:not(:first-child) {
        padding-left: 0px;
    }
    #member-downPop01 .modalLayer .modalCont {
        padding: 0;
    }
    #member-downPop01 .modalLayer .modalCont p {
        padding: 0 20px;
    }
    .select-ticket {
        margin: 0 20px;
    }
    #member-downPop02 .modalLayer .modalCont h4 {
        padding: 0 0 15px;
    }
    #member-downPop01 .modalLayer .modalClose,
    #member-downPop02 .modalLayer .modalClose {
        top: 23px;
    }
    .player-infor h5 {
        margin-top: 50px;
        padding: 0 20px;
    }
    .player-infor .boardTable01 {
        width: 100%;
        margin-left: 0;
    }
    .player-infor .boardTable01 + .boardTable01 {
        margin-top: 0;
    }
    .player-infor .boardTable01 table {
        width: 100%;
    }
    .playerInforList {
        display: block;
        padding: 20px;
        border-width: 1px;
    }
    .playerInforList li + li {
        margin-left: 0;
    }
    .player-infor .noteTxt {
        margin-right: 20px;
    }
    #mainModalPopup .modalLayer {
        width: 95%;
    }

    /* 기업 문의하기 팝업 */
    .inquiryPop .modalLayer {
        width: 100%;
        height: 100%;
    }
    .inquiryPop .modalLayer.type01 .modalCont {
        height: 86%;
        padding: 30px 20px 0;
    }
    .inquiryPop .inquiry-list li {
        display: block;
    }
    .inquiryPop .inquiry-list li span {
        width: 100%;
    }
    .inquiryPop .inquiry-list li + li,
    .inquiryPop .inquiry-list li span + span {
        margin-top: 25px;
    }
    .set-new-pwPop .modalLayer .modalCont p {
        font-size: 18px;
    }

    /* 컬렉션 추가 팝업 */
    .add-collectionPop .modalLayer.type01 .modalCont {
        padding: 0 20px 20px;
    }
    .add-collectionPop .list-vertical01 {
        width: 100%;
    }
    .collectionPop input {
        width: 100%;
    }
    .collectionPop .button-color01 {
        width: 61.6%;
    }
    .collectionPop .button-line {
        width: 37%;
    }
    .inviteTeamPop .modalLayer.type01 .modalCont {
        padding: 20px;
    }
    .inviteTeamPop .both-sides > div {
        width: 100%;
        padding: 20px 15px;
    }
    .inviteTeamPop .join-team {
        padding: 20px 15px;
    }
    .inviteTeamPop .both-sides > div .button-color01 {
        width: 100%;
    }
    .inviteTeamPop .both-sides > .flex-right .button-color01,
    .inviteTeamPop.newUser .both-sides > .flex-right .button-color01 {
        margin-top: 15px;
    }

    .snsCopy input[type="text"] {
        padding: 5px 90px 6px 15px;
    }
    .snsCopy .button-color01 {
        top: 5px;
    }
    #newJoinPop.memberPop .modalLayer {
        padding: 20px 10px 20px 20px;
    }
    #newJoinPop.memberPop .modalLayer .modalCont {
        padding-right: 10px;
    }
    .helpPop .modalLayer.type {
        top: 0;
        transform: translate(-50%, 0);
    }
    .team-invitationPop .modalLayer.type .modalCont,
    .helpPop .modalLayer.type .modalCont {
        padding: 0 20px 20px;
    }
    .unlink-social-accountsPop .modalLayer.type01,
    .sharePop .modalLayer.type01,
    .collectionPop .modalLayer.type01,
    .cancel-invitationPop .modalLayer.type01,
    .updatePop .modalLayer.type01 {
        top: 50%;
        transform: translate(-50%, -50%);
    }
    /* 쿠키 */
    .cookie .modalLayer {
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
    }
}

@media (max-width: 835px) {
    .list li .imgArea.d-flex-wrap > div {
        width: 49.67%;
    }
    .list li .img.three-img > div:last-child > div {
        height: 49.41%;
    }
}
@media (max-width: 769px) {
    .list li .imgArea.d-flex-wrap > div {
        width: 49.27%;
    }
}
@media (max-width: 740px) {
    .topArea .search-area input[type="text"] {
        width: 80.5%;
    }
    .new-updateArea .list li {
        width: 48.5%;
    }
}
@media (max-width: 668px) {
    .topArea .search-area input[type="text"] {
        width: 80.4%;
    }
    .new-updateArea .list li {
        width: 48.4%;
    }
}
@media (max-width: 485px) {
    .reviewList ul {
        gap: 20px 0;
    }
    .reviewList ul li {
        width: 100%;
        height: auto;
    }
    .relative-prod .d-flex-wrap {
        display: block;
    }
    .relative-prod .list li {
        width: 100%;
    }
    .relative-prod .list li + li {
        margin-top: 20px;
    }
    .featured-prod .d-flex-wrap {
        display: block;
    }
    .featured-prod .d-flex-wrap li {
        width: 100%;
    }
    .featured-prod .list li + li {
        margin-top: 20px;
    }
    .topArea .search-area input[type="text"] {
        width: 80%;
    }
    .listArea .list {
        display: block;
        margin: 15px 0 0 0;
    }
    .listArea .list li + li {
        margin-top: 20px;
    }
    .list {
        display: block;
    }
    .list li {
        width: 100%;
    }
    .list li + li {
        margin-top: 20px;
    }
    .list li .imgArea.d-flex-wrap > div {
        width: 49.4%;
    }
    .list li .imgArea.three-img > div:last-child > div {
        height: 49.1%;
    }
    .list li .hidden-icon-area {
        height: calc(100% - 93px);
    }
    .listArea01 .list li .imgArea {
        height: auto;
    }
    .new-updateArea .list {
        display: block;
        margin: 15px 0 0;
    }
    .new-updateArea .list li {
        width: 100%;
    }
    .new-updateArea .list li + li {
        margin-top: 20px;
    }
    .modalPop .modalLayer,
    .modalPop .modalLayer.type01 {
        width: 95%;
        left: 10px;
        transform: translate(0, -50%);
    }
    .modalPop .modalLayer.type01 {
        top: 50%;
    }
    .modalPop .modalLayer.modal-hs01,
    .modalPop .modalLayer.modal-hs02,
    .inviteTeamPop.existingUers .modalLayer {
        width: 95%;
        top: 50%;
        transform: translate(0, -60%);
    }

    /* 공유팝업 */
    .sharePopList {
        flex-wrap: wrap;
        gap: 20px 28px;
    }
    .sharePopList li a {
        width: 50px;
        height: 50px;
    }

    /* 소셜 계정 연결해제 */
    .unlink-social-accountsPop .button-color01 {
        width: 61.6%;
    }
    .unlink-social-accountsPop .button-line {
        width: 37%;
    }

    /* 프로젝트 도움말 */
    .helpPop .modalLayer.type {
        top: 50%;
        transform: translate(0, -50%);
    }

    /* 멤버변경 */
    .changeMembePop .modalLayer {
        width: 95%;
        height: auto;
        top: 50%;
        left: 10px;
        transform: translate(0, -60%);
    }
    .changeMembePop .modalCont {
        height: auto;
    }

    .collectionPop .modalLayer.type01 {
        top: 50%;
    }

    #cookie-preferences.cookie .modalLayer .txt01 {
        padding: 0;
    }
    .cookie .btnWrap {
        display: block;
    }
    .cookie .btnWrap .button-line + .button-line {
        margin-top: 10px;
    }
    .alarm-settings {
        display: flex;
        justify-content: right;
        margin-top: 10px;
        position: static;
        transform: translateY(0);
    }
}

@media (max-width: 475px) {
    .topArea .search-area input[type="text"] {
        width: 79.5%;
    }
    .list li .imgArea.d-flex-wrap > div {
        width: 49.3%;
    }
    .list li .imgArea.three-img > div:last-child > div {
        height: 48.9%;
    }

    .searchPop .layerCont ul {
        gap: 0 40px;
    }
    .sharePopList {
        gap: 20px 18px;
    }
}

@media (max-width: 415px) {
    .faq-search input[type="text"] {
        width: 79%;
    }
    /* 공유하기 팝업 */
    .sharePopList {
        gap: 20px 14px;
    }
}

@media (max-width: 400px) {
    .list li .img.three-img > div:last-child > div {
        height: 48.8%;
    }
    /* 공유하기 팝업 */
    .sharePopList {
        gap: 20px 12px;
    }
}

@media (max-width: 395px) {
    .periodConsole .period-search .useDatepicker {
        width: 49.1%;
    }
    .faq-search input[type="text"] {
        width: 77%;
    }
    .list li .imgArea.d-flex-wrap > div {
        width: 49.25%;
    }

    /* 공유하기 팝업 */
    .sharePopList {
        gap: 20px 10px;
    }
}

@media (max-width: 380px) {
    .faq-search input[type="text"] {
        width: 76%;
    }
    .select-area select,
    .select-area .nice-select {
        font-size: 14px;
    }
    [class*="usage-fee-list"] > li > .cont h4 {
        font-size: 22px;
    }
    .usage-fee-list02 > li {
        padding: 20px 15px;
    }
    .list li .img.three-img > div:last-child > div {
        height: 48.78%;
    }

    /* 공유하기 팝업 */
    .sharePopList {
        gap: 20px 20px;
    }
}

@media (max-width: 365px) {
    .faq-search input[type="text"] {
        width: 75%;
    }
    .topArea .search-area input[type="text"] {
        width: 79.4%;
    }

    .list li .imgArea.three-img > div:last-child > div {
        height: 48.66%;
    }

    /* 공유하기 팝업 */
    .sharePopList {
        gap: 20px 17px;
    }
}

@media (max-width: 345px) {
    .topArea {
        padding: 25px 15px 20px;
    }
    .new-updateArea {
        padding: 25px 15px 30px;
    }
    .listArea {
        padding: 60px 15px 30px;
    }
    .listWrap .topArea .select-area {
        padding: 0 15px;
    }
    .list li .imgArea.d-flex-wrap > div {
        width: 49.18%;
    }
    .list li .imgArea.three-img > div:last-child > div {
        height: 48.59%;
    }
    .card-list li {
        width: 48.3%;
    }
    .modalPop .modalLayer,
    .modalPop .modalLayer.type01,
    .modalPop .modalLayer.modal-hs01,
    .modalPop .modalLayer.modal-hs02 {
        width: 94%;
    }
    .changeMembePop .modalLayer,
    .inviteTeamPop.existingUers .modalLayer {
        width: 94%;
    }
    .set-new-pwPop .modalLayer .modalCont p {
        font-size: 17px;
    }
}

/* 높이값 */
@media (max-height: 1366px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 85%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 1115px;
    }
}

@media (max-height: 1285px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 900px;
    }
}

@media (max-height: 935px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 78%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 685px;
    }
}

@media (max-height: 895px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 75%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 630px;
    }
    /* 기업 문의하기 */
    .inquiryPop .modalLayer.type01 .modalCont {
        height: 89%;
    }
}
@media (max-height: 885px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 636px;
    }
}

@media (max-height: 870px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 598px;
    }
}

@media (max-height: 813px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 565px;
    }
}

@media (max-height: 745px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 74%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 493px;
    }
    .memberPop .modalLayer .modalCont {
        height: 95%;
    }
}

@media (max-height: 701px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 470px;
    }
    .memberPop .modalLayer .modalCont {
        height: 92%;
    }
}

@media (max-height: 670px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 70%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 420px;
    }
    .memberPop .modalCont {
        height: 88%;
        overflow-y: auto;
    }
}

@media (max-height: 435px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 53%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 190px;
    }
    /* 기업 문의하기 */
    .inquiryPop .modalLayer.type01 .modalCont {
        height: 79%;
    }
    /* 멤버변경 */
    .changeMembePop .modalCont {
        height: 352px;
    }
    /* 초대 다시 보내기 */
    .resend-invitationPop .modalCont {
        height: 352px;
    }
    /* 팀 초대 로그인 */
    .memberPop .modalLayer .modalCont {
        height: 330px;
    }
    /* 새로운 라이선스 만들기 팝업 */
    .newLicensePop .modalLayer.type01 .modalCont {
        height: 350px;
    }
    /* 프로젝트 등록 */
    .additionPop .modalLayer.type01 .modalCont {
        height: 355px;
    }
}

@media (max-height: 415px) {
    .list li .imgArea.d-flex-wrap > div {
        width: 49.27%;
    }
    /* 멤버변경 */
    .changeMembePop .modalCont {
        height: 336px;
    }
    /* 초대 다시 보내기 */
    .resend-invitationPop .modalCont {
        height: 332px;
    }
    /* 팀 초대 로그인 */
    .memberPop .modalLayer .modalCont {
        height: 320px;
    }
    /* 컬렉션 추가 */
    .add-collectionPop .modalLayer.type01 .modalCont {
        height: 332px;
    }
    /* 기업 문의하기 */
    .inquiryPop .modalLayer.type01 .modalCont {
        height: 78%;
    }
    /* 기존 사용자 팀 초대 */
    .inviteTeamPop .modalLayer.type01 .modalCont {
        height: 333px;
    }
    /* 새로운 라이선스 만들기 팝업 */
    .newLicensePop .modalLayer.type01 .modalCont {
        height: 327px;
    }
    /* 프로젝트 도움말 */
    .helpPop .modalLayer.type .modalCont {
        height: 298px;
    }
    /* 프로젝트 등록 */
    .additionPop .modalLayer.type01 .modalCont {
        height: 345px;
    }
}

@media (max-height: 400px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 175px;
    }
    .list li .imgArea.d-flex-wrap > div {
        width: 49.23%;
    }
    /* 팀 초대 로그인 */
    .memberPop .modalLayer .modalCont {
        height: 310px;
    }
    /* 컬렉션 추가 */
    .add-collectionPop .modalLayer.type01 .modalCont {
        height: 326px;
    }
    /* 기존 사용자 팀 초대 */
    .inviteTeamPop .modalLayer.type01 .modalCont {
        height: 319px;
    }
    /* 프로젝트 등록 */
    .additionPop .modalLayer.type01 .modalCont {
        height: 330px;
    }
}

@media (max-height: 395px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 160px;
    }
    /* 멤버변경 */
    .changeMembePop .modalCont {
        height: 312px;
    }
    /* 초대 다시 보내기 */
    .resend-invitationPop .modalCont {
        height: 310px;
    }
    /* 팀 초대 로그인 */
    .memberPop .modalLayer .modalCont {
        height: 300px;
    }
    /* 컬렉션 추가 */
    .add-collectionPop .modalLayer.type01 .modalCont {
        height: 313px;
    }
    /* 기존 사용자 팀 초대 */
    .inviteTeamPop .modalLayer.type01 .modalCont {
        height: 310px;
    }
    /* 프로젝트 등록 */
    .additionPop .modalLayer.type01 .modalCont {
        height: 320px;
    }
}

@media (max-height: 380px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 50%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 150px;
    }
    /* 멤버변경 */
    .changeMembePop .modalCont {
        height: 293px;
    }
    /* 초대 다시 보내기 */
    .resend-invitationPop .modalCont {
        height: 300px;
    }
    /* 팀 초대 로그인 */
    .memberPop .modalLayer .modalCont {
        height: 285px;
    }
    /* 기존사용자 팀초대 */
    .inviteTeamPop .modalLayer.type01 .modalCont {
        height: 296px;
    }
    /* 컬렉션 추가 */
    .add-collectionPop .modalLayer.type01 .modalCont {
        height: 300px;
    }
    /* 기업 문의하기 */
    .inquiryPop .modalLayer.type01 .modalCont {
        height: 75%;
    }
    /* 새로운 라이선스 만들기 팝업 */
    .newLicensePop .modalLayer.type01 .modalCont {
        height: 305px;
    }
    /* 프로젝트 도움말 */
    .helpPop .modalLayer.type .modalCont {
        height: 260px;
    }
    /* 프로젝트 등록 */
    .additionPop .modalLayer.type01 .modalCont {
        height: 305px;
    }
}

@media (max-height: 365px) {
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 135px;
    }
    /* 멤버변경 */
    .changeMembePop .modalCont {
        height: 280px;
    }
    /* 초대 다시 보내기 */
    .resend-invitationPop .modalCont {
        height: 280px;
    }
    /* 팀 초대 로그인 */
    .memberPop .modalLayer .modalCont {
        height: 270px;
    }
    /* 기존사용자 팀초대 */
    .inviteTeamPop .modalLayer.type01 .modalCont {
        height: 279px;
    }
    /* 컬렉션 추가 */
    .add-collectionPop .modalLayer.type01 .modalCont {
        height: 285px;
    }
    /* 새로운 라이선스 만들기 팝업 */
    .newLicensePop .modalLayer.type01 .modalCont {
        height: 290px;
    }
    /* 프로젝트 도움말 */
    .helpPop .modalLayer.type .modalCont {
        height: 244px;
    }
    /* 프로젝트 등록 */
    .additionPop .modalLayer.type01 .modalCont {
        height: 290px;
    }
}

@media (max-height: 345px) {
    #filterPop .modalLayer .modalCont .filterBoxM {
        height: 47%;
    }
    #smartSearchPop .modalLayer .modalCont .filterBoxM {
        height: 115px;
    }
    /* 멤버변경 */
    .changeMembePop .modalCont {
        height: 264px;
    }
    /* 초대 다시 보내기 */
    .resend-invitationPop .modalCont {
        height: 264px;
    }
    /* 팀 초대 로그인 */
    .memberPop .modalLayer .modalCont {
        height: 255px;
    }
    /* 기존사용자 팀초대 */
    .inviteTeamPop .modalLayer.type01 .modalCont {
        height: 263px;
    }
    /* 컬렉션 추가 */
    .add-collectionPop .modalLayer.type01 .modalCont {
        height: 270px;
    }
    /* 새로운 라이선스 만들기 팝업 */
    .newLicensePop .modalLayer.type01 .modalCont {
        height: 275px;
    }
    /* 프로젝트 도움말 */
    .helpPop .modalLayer.type .modalCont {
        height: 228px;
    }
    /* 프로젝트 등록 */
    .additionPop .modalLayer.type01 .modalCont {
        height: 275px;
    }
}

/* Utility classes */
.mb20 {
    margin-bottom: 20px;
}
.mb10 {
    margin-bottom: 10px;
}
.tac {
    text-align: center;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* error */
input.error,
textarea.error,
select.error {
    border-color: #d81b1b !important;
}
input.error:focus,
textarea.error:focus,
select.error:focus {
    background-color: #fff;
}

.warning {
    display: block;
    margin: 10px 0 10px;
    font-weight: normal;
    color: #d81b1b;
}

.error {
    display: block;
    margin: 10px 0 10px;
    font-weight: normal;
    color: #d81b1b;
}

.success {
    display: block;
    margin: 10px 0 10px;
    font-weight: normal;
    color: #28a745;
}

.mt-2 {
    margin-top: 10px;
}

.w-100 {
    width: 100%;
}
.w-50 {
    width: 50%;
}

.nice-select .list {
    max-height: 300px;
    overflow-y: scroll;
}

/* alert-modal */
.alert-modal .modalCont .btnWrap {
    margin-top: 40px;
}

.alert-modal .modalCont .btnWrap.two-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.alert-modal .modalCont .btnWrap.single-button {
    text-align: center;
}

.alert-modal .modalCont .btnWrap button {
    min-width: 100px;
}

.alert-modal .modalCont .btnWrap.two-buttons button {
    flex: 1;
    max-width: 120px;
}

.alert-modal .modalLayer.type .modalCont {
    overflow-y: visible;
    min-width: 200px;
}

@media (max-width: 1265px) {
    .alert-modal .modalLayer.type .modalCont {
        padding: 0 20px 20px 20px;
    }
}

/* custom select */
.custom-select-container {
    position: relative;
}

.nice-select {
    height: 45px;
    -webkit-tap-highlight-color: transparent;
    border-radius: 3px;
    border: solid 1px #c4c4c4;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-weight: normal;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    transition: all 0.2s ease-in-out;
    user-select: none;
    white-space: nowrap;
    width: 100%;
}

.nice-select.error {
    margin: 10px 0 10px;
    color: #3d3d3d;
    border: solid 1px #d81b1b;
}

.nice-select:active,
.nice-select.open,
.nice-select:focus {
    border-color: #224b9e;
}

.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    overflow-y: auto;
}

.nice-select .option:hover .list li {
    color: #fff !important;
}

.nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}

.nice-select.disabled:after {
    border-color: #cccccc;
}

.nice-select.wide {
    width: 100%;
}

.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}

.nice-select.right {
    float: right;
}

.nice-select.right .list {
    left: auto;
    right: 0;
}

.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}

.nice-select.small:after {
    height: 4px;
    width: 4px;
}

.nice-select.small .option {
    line-height: 34px;
    min-height: 34px;
}

.nice-select .list {
    border-radius: 0px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform-origin: 50% 0;
    transform: scale(0.75) translateY(-21px);
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    width: 100%;
    z-index: 100;
}

.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    transition: all 0.2s;
}

.nice-select .option:hover {
    background-color: #224b9e;
    color: #fff;
}

.nice-select .option.disabled {
    color: #999;
    cursor: default;
}

.no-csspointerevents .nice-select .list {
    display: none;
}

.no-csspointerevents .nice-select.open .list {
    display: block;
}

/* 날짜 범위 하이라이트 스타일 */
input#updateStartDatePicker:read-only,
input#updateEndDatePicker:read-only {
    background-color: #ffffff;
}

.ui-datepicker-calendar .ui-datepicker-range-start {
    background: #007cba !important;
    color: white !important;
    border-radius: 4px 0 0 4px !important;
}

.ui-datepicker-calendar .ui-datepicker-range-end {
    background: #007cba !important;
    color: white !important;
    border-radius: 0 4px 4px 0 !important;
}

.ui-datepicker-calendar .ui-datepicker-range-middle a {
    background: #b3d9f2 !important;
    color: #333 !important;
}

/* 시작일과 종료일이 같은 경우 */
.ui-datepicker-calendar .ui-datepicker-range-start.ui-datepicker-range-end {
    border-radius: 4px !important;
}

/* 오늘 날짜와 겹치는 경우 처리 */
.ui-datepicker-calendar .ui-datepicker-today.ui-datepicker-range-start,
.ui-datepicker-calendar .ui-datepicker-today.ui-datepicker-range-end,
.ui-datepicker-calendar .ui-datepicker-today.ui-datepicker-range-middle {
    border: 2px solid #ffd700 !important;
}

/* 필터 상태에 따른 레이아웃 조정 (데스크톱만) */
@media (min-width: 1024px) {
    .listArea.filter-open {
        padding-left: 330px;
    }

    .listArea.filter-close {
        padding-left: 0px;
    }

    .list.filter-gap-narrow {
        gap: 40px 15px;
    }

    .list.filter-gap-wide {
        gap: 40px 20px;
    }
}