/*
.DefaultForm{
	color: #000;
	padding-top: 60px;
	min-height: 80vh;
	background-color: #ececec;
}

.RecomLabelImg{
	width: 15px;
	top:0;
	left: 10px;
}


.pagination li .btn{
	color: #000000;
    text-decoration: none;
    background-color: #337ab705;
    border-color: #d9d9d9;
}

.pagination li .btn.active{
	background-color: #d9d9d9;
}



.MonitorFillterMenuArea .btn:hover,
.SideMenuArea .btn:hover{
	background-color: #ffffff;
	color:#000;
}

.MonitorFillterMenuArea .btn.active:hover,
.SideMenuArea .btn.active:hover{
	background-color: #a6a6a6;
	color:#ffffff;
}

.card-img-top{
	aspect-ratio: 1/1;
}

.searchBtn {
    font-size: unset;
}

.UserControll{	
	padding-top: 60px;
}



.MonitorRow{
	transition: all 0.3s;
}
.MonitorRow:hover{
	filter: drop-shadow(6px 8px 7px #696969);
}


.FillterSectionRow {
    max-height: var(--maxh);
    overflow-y: clip;
    transition: all 1s;
}

.FillterSectionRow.open {
    max-height: unset;
    transition: all 1s;
}

.StuffPerfor{
	font-size: 13px;
}


@media (min-width: 1024px){	
	.RecomLabelImg{
		width: 20px;
		top:0;
		left: 10px;
	}
}
*/



/*새 스타일 시작*/
.DefaultForm{
    position:relative;

    color:#000;

    padding-top:60px;

    min-height:80vh;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(99,102,241,.06),
            transparent 30%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(139,92,246,.05),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #f8fafc 0%,
            #f1f5f9 50%,
            #ececec 100%
        );
}


/* 모니터 카테고리 메뉴 */
.MonitorCategoryArea{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px;

    padding:10px 0 20px;
}

.MonitorCategoryArea .btn{
    min-height:44px;

    padding:10px 18px;

    border-radius:14px !important;

    background:#fff;

    border:1px solid #e5e7eb;

    color:#475569;

    font-size:.92rem;
    font-weight:600;

    transition:.2s;

    box-shadow:
        0 2px 6px rgba(15,23,42,.04);
}

.MonitorCategoryArea .btn:hover{
    transform:translateY(-2px);

    border-color:#93c5fd;

    color:#2563eb;

    box-shadow:
        0 8px 20px rgba(59,130,246,.10);
}

.MonitorCategoryArea .btn.active{
    color:#fff !important;

    border-color:#6366f1;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    box-shadow:
        0 10px 24px rgba(99,102,241,.20);
}

@media(max-width:768px){

    .MonitorCategoryArea{
        justify-content:flex-start;

        flex-wrap:nowrap;

        overflow-x:auto;

        padding-bottom:10px;

        scrollbar-width:none;
    }

    .MonitorCategoryArea::-webkit-scrollbar{
        display:none;
    }

    .MonitorCategoryArea .btn{
        flex-shrink:0;
    }
}

/* 모니터 리스트 */

.MonitorRow{
    transition:.25s ease;
}

.MonitorRow .card{
    position:relative;

    overflow:hidden;

    border:none !important;

    border-radius:22px !important;

    background:#fff;

    box-shadow:
        0 4px 14px rgba(15,23,42,.05),
        0 1px 3px rgba(15,23,42,.04);

    transition:.25s ease;
}

.MonitorRow .card::before{
    content:'';

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #6366f1,
        #8b5cf6,
        #3b82f6
    );

    opacity:0;
    transition:.25s;
}

.MonitorRow:hover .card{
    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(15,23,42,.10),
        0 6px 15px rgba(99,102,241,.08);
}

.MonitorRow:hover .card::before{
    opacity:1;
}

.MonitorRow .card-img-top{
    border-radius:14px;
    transition:.3s ease;
}

.MonitorRow:hover img{
    transform:scale(1.04);
}

/* 인기 태그 */

.StuffHit{
    padding:6px 10px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(99,102,241,.08),
            rgba(139,92,246,.08)
        );

    color:#6366f1;
}

/* 상품명 */

.MonitorRow .fw-bold{
    color:#111827;

    line-height:1.45;
}

/* 스펙 */

.StuffPerfor{
    color:#64748b !important;
    font-size:.9rem;
    line-height:1.5;
}

.stuff_card_pay{
    color:#2563eb;
    font-weight:600;
}

.stuff_pay{
    color:#dc2626;
    font-weight:600;
}

/* 품절 */

.badge.bg-danger{
    background:#ef4444 !important;
}

/* 행사 */

.badge.bg-success{
    background:#10b981 !important;
}

/* 장바구니 버튼 */

.CardAddStuffBtn{
    border:none !important;

    color:#fff !important;

    background:linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    ) !important;

    box-shadow:
        0 8px 20px rgba(99,102,241,.18);

    transition:.2s ease;
}

.CardAddStuffBtn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 14px 28px rgba(99,102,241,.28);
}

/* 상품보기 버튼 */

.MonitorRow .btn-outline-primary{
    border-color:#6366f1;

    color:#6366f1;
}

.MonitorRow .btn-outline-primary:hover{
    color:#fff;

    background:#6366f1;

    border-color:#6366f1;
}


.RecomLabelImg{
    top:10px;
    left:4px;
    z-index:5;
    width:25px;
    transition:.25s ease;
    filter:
        drop-shadow(0 6px 12px rgba(99,102,241,.18))
        drop-shadow(0 2px 4px rgba(0,0,0,.10));
}

.MonitorRow:hover .RecomLabelImg{
    transform:
        translateY(-2px)
        scale(1.04);

    filter:
        drop-shadow(0 10px 18px rgba(99,102,241,.25))
        drop-shadow(0 4px 8px rgba(0,0,0,.12));
}

.MonitorGuideBox{
    height:100%;

    padding:20px 15px !important;

    border:1px solid rgba(99,102,241,.10) !important;

    border-radius:20px !important;

    background:
        linear-gradient(
            135deg,
            rgba(99,102,241,.04),
            rgba(139,92,246,.03)
        );

    box-shadow:
        0 8px 24px rgba(15,23,42,.04);

    transition:.2s ease;
}

.MonitorGuideBox:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(99,102,241,.08);
}

.MonitorGuideBox .btn{
    border:none;

    border-radius:12px;

    color:#fff;

    font-weight:600;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    box-shadow:
        0 8px 18px rgba(99,102,241,.15);
}

.MonitorGuideBox .btn:hover{
    color:#fff;

    transform:translateY(-1px);
}

.MonitorGuideBox p{
    margin:12px 0 0;

    color:#64748b;

    font-size:.9rem;

    line-height:1.6;
}

/* 검색 */

.SearchKeywordArea{
    margin-top:8px;
}

.SearchKeywordArea .input-group{
    overflow:hidden;
    background:#fff;
    border:1px solid #e5e7eb;
    box-shadow:
        0 8px 24px rgba(15,23,42,.05);
}

.SearchKeywordArea .form-control{
    /*height:58px;*/

    border:none;

    font-size:.95rem;

    box-shadow:none !important;
}

.SearchKeywordArea .form-control::placeholder{
    color:#94a3b8;
}


.SearchKeywordArea .resetBtn,
.SearchKeywordArea .searchBtn{
	font-size: 18px;
}


.SearchKeywordArea .resetBtn{
    width:58px;
    border:none;
    background:#f8fafc;
    color:#64748b;
}

.SearchKeywordArea .resetBtn:hover{
    background:#f1f5f9;
}

.SearchKeywordArea .searchBtn{
    width:68px;
    border:none;
    color:#fff;
    background:#6366f1;
}

.SearchKeywordArea .searchBtn:hover{
    opacity:.95;
}

.MonitorPageNationArea{
    margin-top:20px;

    padding:12px !important;

    border:none !important;

    border-radius:18px !important;

    background:#f8fafc;

    box-shadow:
        0 4px 12px rgba(15,23,42,.04);
}

.MonitorPageNationArea .btn{
    min-width:42px;
    height:42px;

    border:1px solid #e2e8f0 !important;

    background:#f8fafc;

    color:#64748b;

    font-weight:600;

    box-shadow:
        0 1px 3px rgba(15,23,42,.04);

    transition:.15s ease;
}

.MonitorPageNationArea .btn:hover{
    color:#111827;

    background:#f8fafc;
}

.MonitorPageNationArea .btn.active{
    color:#fff !important;

    border:none !important;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #7c3aed
        ) !important;

    box-shadow:
        0 4px 12px rgba(99,102,241,.22);
}
.MonitorPageNationArea .pagination{
    gap:8px;

    margin-bottom:0;
}



.MonitorPageNationArea .btn.active:hover{
    color:#fff;
}

.MonitorPageNationArea .btn[data-currentpage="1"],
.MonitorPageNationArea li:first-child .btn,
.MonitorPageNationArea li:last-child .btn{
    background:#f8fafc;

    color:#64748b;
}

@media(max-width:768px){

    .MonitorPageNationArea{
        padding:12px !important;
    }

    .MonitorPageNationArea .pagination{
        gap:5px;
    }

    .MonitorPageNationArea .btn{
        min-width:40px;
        height:40px;

        padding:0 12px;

        font-size:.9rem;
    }
}

.NanoIndex .btn{
    height:30px;

    border-radius:10px !important;

    border:1px solid #d7dce3 !important;

    background:#fff !important;

    color:#475569 !important;

    font-size:.82rem;

    font-weight:500;

    transition:.15s ease;
}

.NanoIndex .btn:hover{
    border-color:#6366f1 !important;

    color:#6366f1 !important;

    background:#f8faff !important;

    transform:translateY(-1px);
}

.NanoIndex .btn.active,
.NanoIndex .btn[data-select="1"]{
    color:#fff !important;

    border-color:#6366f1 !important;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        ) !important;

    box-shadow:
        0 6px 16px rgba(99,102,241,.18);
}

.FName{
    position:relative;

    color:#1e293b;

    font-size:1rem;

    font-weight:700 !important;

    letter-spacing:-0.3px;
}

.FName::before{
    content:'';

    display:inline-block;

    width:4px;
    height:16px;

    margin-right:8px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #6366f1,
            #8b5cf6
        );

    vertical-align:-2px;
}


.MonitorRow .btn-outline-danger{
    border:none !important;

    color:#64748b !important;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #e2e8f0
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 2px 8px rgba(15,23,42,.05);

    cursor:not-allowed;

    opacity:.9;
}

.MonitorRow .btn-outline-danger:hover{
    color:#64748b !important;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #e2e8f0
        ) !important;

    transform:none !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8),
        0 2px 8px rgba(15,23,42,.05);
}

.MonitorRow .btn-outline-danger i{
    opacity:.7;
}


.OrderByBtnArea{
    margin-bottom:15px;
}

.OrderByBtnArea .btn-toolbar{
    display:inline-flex;

    padding:8px;

    border-radius:18px;

    background:
        rgba(255,255,255,.75);

    border:
        1px solid rgba(226,232,240,.8);

    box-shadow:
        0 4px 12px rgba(15,23,42,.04);
}

.OrderByBtnArea .btn-group{
    gap:4px;
}

.OrderByBtnArea .btn{
    border:none !important;

    border-radius:12px !important;

    background:transparent;

    color:#64748b;

    font-weight:600;

    transition:.15s ease;
}

.OrderByBtnArea .btn:hover{
    background:#f8fafc;

    color:#111827;
}

.OrderByBtnArea .OderBy.active{
    color:#fff !important;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        ) !important;

    box-shadow:
        0 4px 12px rgba(99,102,241,.18);
}

.OrderByBtnArea .GridType.active{
    color:#fff !important;

    background:#111827 !important;

    box-shadow:
        0 4px 10px rgba(17,24,39,.18);
}

.OrderByBtnArea .GridType{
    min-width:38px;
}

.OrderByBtnArea i{
    font-size:.9rem;
}

.OrderByBtnArea .btn-group + .btn-group{
    margin-left:10px;
    padding-left:10px;

    border-left:
        1px solid rgba(226,232,240,.8);
}

.UserControll{	
	margin-top: 56px;
}

.FillterSectionRow{
    max-height:var(--maxh);
    overflow:hidden;
    transition:max-height .35s ease;
}

.FillterSectionRow.open{
    max-height:3000px;
}
/*새 스타일 끝*/