/* BASIC css start */ #mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 } #wrap{position: relative; min-width:1240px; width:100%; } #topBanner { width: 100%; height: 50px; /* 세로 50 고정 */ background: #85258B; /* 브라우저 하위 호환용 기본색 */ background: linear-gradient(to right, #85258B, #3B1253); /* 왼쪽 보라 -> 오른쪽 진보라 */ position: relative; display: flex; justify-content: center; overflow: visible; /* PNG가 50px보다 커도 위로 튀어나오게 허용 */ } /* 2. 컨텐츠 영역 (중앙 정렬용 박스) */ #topBanner .topCon { position: relative; width: 100%; max-width: 1240px; /* 형네 사이트 기준 폭 */ height: 100%; margin: 0 auto; } /* 3. PNG 이미지 (늘리지 않고 하단 밀착) */ #topBanner img { position: absolute; bottom: 0; /* 띠의 제일 하단 바닥에 딱 붙임 */ left: 50%; transform: translateX(-50%); /* 정확히 화면 가로 중앙 */ width: auto !important; /* 강제로 늘리는 거 해제 */ height: auto !important; max-width: none !important; display: block !important; } /* header */ #header { position:relative; width:100%; background:#fff; z-index:100 } #header .headerTnb { margin:20px auto 14px; position:relative; width: 100%; max-width: 1240px; display:grid; *zoom:1 } #header .headerTnb:after { } #header .headerTnb .tnbLeft { display:flex; justify-content: flex-start; grid-column: 1 / span 1; } #header .headerTnb .tnbLeft .logo { margin-right:30px; } #header .headerBottom.header-scroll .headerGnb { line-height:52px; } #header .headerBottom.header-scroll .headerGnb .gnbInner .gnbBox .gnbCate > a {line-height:52px;} #header .headerBottom.header-scroll .headerGnb .all-menu { padding-top:14px; } /* 검색창 */ #header .headerTnb .searchArea { } #header .headerTnb .searchArea .search { position:relative; } #header .headerTnb .searchArea .search input { width:500px; height:47px; padding-left:19px; line-height:47px; border:2px solid #92479d; border-radius:5px; box-sizing:border-box; } #header .headerTnb .searchArea .search a.submit { display:block; position:absolute; top: 11px; right:20px; width:25px; height:25px; text-indent:-9999em; background:url(/design/mpmall2025/Img/search.png) 0 0 no-repeat; } .search-layer { position: absolute; top: 47px; left: 0; width: 100%; height:326px; border-radius:6px; background: #fff; padding: 30px; box-sizing:border-box; box-shadow: 0 3px 8px rgba(0,0,0,0.15); border-radius: 6px; z-index: 101; opacity: 0; visibility: hidden; transition: opacity 0.1s ease, visibility 0.1s ease; } .keyword-list { width:auto; } .keyword-list p { font-size:15px; font-weight:500; margin-bottom:16px; } .keyword-list ul {} .keyword-list ul li { display:block; font-size:13px; font-weight:400; color:#333d4b; margin-top:8px; } .search-layer .search_banner { width:180px; margin-left:auto; } input::-webkit-contacts-auto-fill-button, input::-webkit-credentials-auto-fill-button { visibility: hidden; display: none !important; } .search-layer.active { opacity: 1; visibility: visible; } #header .headerTnb .tnbRight { display:flex; align-items: flex-start; justify-content: flex-end; grid-column: 2 / span 1; } #header .headerTnb .tnbRight ul { display:flex; justify-content: flex-end; } #header .headerTnb .tnbRight li { padding:0 10px; position:relative; height: 19px; line-height: 17px; } #header .headerTnb .tnbRight li:after { content:''; display:block; width:1px; height:10px; background:#d9d9d9; position:absolute; right:0; top:5px; } #header .headerTnb .tnbRight li:last-child:after { display:none; } #header .headerTnb .tnbRight li.cart { padding-right:40px; } #header .headerTnb .tnbRight li a { color: #333; font-size: 13px; line-height:16px; } #header .headerTnb .tnbRight li a span.basket { position: absolute; top:0; right:10px; } #header .headerTnb .tnbRight li a .basket { display:inline-block; min-width:25px; margin-left:5px; height:19px; line-height:19px; width:25px; text-align:center; background:#92479d; color:#fff; font-weight:600; border-radius: 15px; } #header .headerTop { margin:0 auto; position:relative; width: 95%; max-width:1280px; *zoom:1 } #header .headerTop:after { display:block; clear:both; content:'' } #header .headerTop .tlogo { margin:15px auto; text-align:center } #header .headerBottom { position:relative; z-index:100; } #header .headerBottom.header-scroll{ position:fixed; top:0; width: 100%; background: #fff; z-index:100; } #header .headerGnb {position: relative; width: 1240px; min-width:1240px; height:52px; margin: 0 auto; display:flex; z-index:100; } #header .headerGnb:after { display:block; clear:both; content:'' } #header .headerGnb > div{} #header .headerGnb .gnbInner { position:relative; margin-left:44px; z-index:100; } #header .headerGnb .gnbInner .gnbBox { *zoom:1; display:flex; position:relative; z-index:100; } #header .headerGnb .gnbInner .gnbBox:after { display:block; clear:both; content:'' } #header .headerGnb .gnbInner .gnbBox .gnbCate { position:relative; z-index:100; } #header .headerGnb .gnbInner .gnbBox .gnbCate > a { display:block; font-size:18px; color:#1c1c1c; font-weight:600; white-space:nowrap; line-height: 43px; height: 52px; padding-right:60px; } #header .headerGnb .gnbInner .gnbBox .gnbCate.first { padding-left:0 }s #header .headerGnb .gnbInner .gnbBox .gnbCate.last { padding:0 0 0 40px } #header .headerGnb .all-menu { padding-top:10px; cursor:pointer; } #header .headerGnb .all-menu a { transition: color 0.3s ease; } #header .dropMenu { position: absolute; z-index:50; width: 100%; height:0; border-bottom:1px solid #e5e8eb; overflow: hidden; box-sizing:border-box; background:#fff; transition: height 0.3s ease; font-size: 14px; } #header .dropMenu .drop-inner { width:1240px; margin:0 auto; display:flex; height:100%; } #header .dropMenu .drop-inner .drop-banner { margin-left:auto; padding:20px 0; border-radius:10px; overflow: hidden; } #header .dropMenu .drop-inner .drop-banner img { border-radius: 10px; display: block; } #header .dropMenu.active { height:340px; border-top:1px solid #e5e8eb; border-bottom:1px solid #e5e8eb; } #header .headerGnb .all-menu svg rect { transition: all 0.3s ease; } #header .headerGnb .all-menu.on > svg rect:nth-child(1) { transform: rotate(45deg) translate(4px,-3px) ; } #header .headerGnb .all-menu.on > svg rect:nth-child(2) { opacity: 0; transform: translateX(-100%); } #header .headerGnb .all-menu.on > svg rect:nth-child(3) { transform: rotate(-45deg) translate(-11px,-4px); } #header .headerGnb .all-menu.on > svg rect { fill:#8b95a1; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu { min-height:260px; text-align: left; visibility: hidden; opacity: 1; z-index: 10; background: rgba(255, 255, 255, 1); pointer-events: none; position: absolute; top: 47px; left: -19px; transform: translate(0%, 0%); border-radius: 10px; line-height: 200%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius:10px; z-index:100; overflow: hidden; } #header .headerGnb .gnbInner .gnbBox .gnbCate:hover .sub-menu { visibility: visible; opacity: 1; pointer-events: all; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-box .category { flex: 0 0 150px; width: 150px; height:260px; padding:10px 0; box-sizing:border-box; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu.cate15 .cate-box .category { flex: 0 0 170px; width: 170px; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-menu .menu-dp { display:none; width:300px; height:260px; border-left:1px solid #e5e8eb; box-sizing:border-box; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-menu .menu-dp:first-child { display:flex; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-menu .menu-dp > ul { width:150px; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-menu .menu-dp > ul { padding:10px 0; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-box .category a, #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-menu .menu-dp > ul li a { display:block; line-height:40px; padding-left:20px; box-sizing:border-box;font-size:14px; font-weight:400; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-box .category .on a, #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-menu .menu-dp > ul li.on a, #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-menu .menu-dp > ul a:hover { color:#9b40a9; font-weight:500; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-box .category a { position:relative; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-box .category a .xi { display:none; position:absolute; top:14px; right:14px; font-size:12px; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu .cate-box .category .on a .xi { display:inline-block; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu02 { width:480px; } #header .headerGnb .gnbInner .gnbBox .gnbCate .sub-menu02 .cate-box .category01 { width:180px; } #header .dropMenu .drop-inner .drop-cate-box { overflow-y: auto; overflow-x: hidden; width:830px; height:100%; border-left:1px solid #e5e8eb; } #header .dropMenu .drop-inner .drop-cate-box.depth2 { background-image: linear-gradient(#efefef,#efefef); background-size: 1px 100%; background-repeat: no-repeat; background-position: 150px 0; } #header .dropMenu .drop-inner .drop-cate-box.depth3 { background-image: linear-gradient(#efefef,#efefef), linear-gradient(#efefef,#efefef); background-size: 1px 100%, 1px 100%; background-repeat: no-repeat; background-position: 150px 0, 350px 0; } #header .dropMenu .drop-inner .drop-cate-box.depth4 { background-image: linear-gradient(#efefef,#efefef), linear-gradient(#efefef,#efefef), linear-gradient(#efefef,#efefef); background-size: 1px 100%, 1px 100%, 1px 100%; background-repeat: no-repeat; background-position: 150px 0, 350px 0, 580px 0; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul { width:150px; height:100%; padding:10px 0; box-sizing:border-box; position:relative; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate1-li.on > a, #header .dropMenu .drop-inner .drop-cate-box .cate2-ul .cate2-li.on > a, #header .dropMenu .drop-inner .drop-cate-box .cate2-ul .cate3-li.on > a, #header .dropMenu .drop-inner .drop-cate-box a:hover { color:#9b40a9; font-weight:500; } #header .dropMenu .drop-inner .drop-cate-box .xi { position:absolute; right:14px; top:12px; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate1-li > a i, #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-li > a i, #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate3-li > a i { position:absolute; right:14px; top:12px; display:none; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate1-li.on > a > i, #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-li.on > a > i, #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate3-li.on > a > i { display:inline-block; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box { position:absolute; top:0; left:150px; width:680px; height: 100%; display:none; padding:10px 0; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box .cate2-ul { width:200px; display:inline-block; box-sizing:border-box; min-height:340px; margin-top:-10px; padding-top:10px; padding-bottom:20px; vertical-align:top; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate1-li02 .cate2-box .cate2-ul { width:200px;} #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate1-li02 .cate2-box .cate2-ul .cate3-box { left:400px;} #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box .cate2-ul li { position:relative; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate1-li a, #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box .cate2-ul li a { position:relative; font-size:14px; font-weight:500; display: block; line-height: 40px; padding-left: 20px; box-sizing: border-box; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box .cate2-ul li .cate3-box { display:none; position:absolute; top:0; left:201px; z-index:99; background:#fff; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box .cate2-ul li .cate3-box > ul { width:220px; margin-top:-10px; padding-top:10px; padding-bottom:20px; box-sizing:border-box; display:inline-block; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box .cate2-ul li .cate3-box .cate4-box { display:none; position:absolute; top:0; left:231px; z-index:99; background:#fff; } #header .dropMenu .drop-inner .drop-cate-box .cate1-ul .cate2-box .cate2-ul li .cate3-box > ul .cate4-box > ul { width:230px; margin-top:-10px; padding-top:10px; padding-bottom:20px; box-sizing:border-box; display:inline-block; } /* 햄버거메뉴 */ #header .headerGnb .hammenu{ display: none; float: unset; padding: 0; position: absolute; top: 55px; left: 0; height: 435px; background: #fff; border: 1px solid #e5e5e5; box-sizing: border-box;} .hammenu .depth1{ width: 194px; height: 424px; padding: 10px 0 0; overflow-y: auto; direction: rtl; -ms-overflow-style: none;} .hammenu .depth1::-webkit-scrollbar{ display:none; } .hammenu .depth1 li{margin: 4px 0; text-align: left;} .hammenu .depth1 li a{display: block; padding: 10px 25px; color: #424242; font-size: 16px; font-family: 'Noto Sans KR', sans-serif;} .hammenu .depth1 > li.depopen > a{ color:#f15657;} .hammenu .depth2{ display: none; position: absolute; top: 0; left: 195px; background: #fff; width: 100%; height: 423px; padding: 10px 0 0; border: 1px solid #e5e5e5; border-top: 0; border-left: 0; } .hammenu .depth2 > div{ height: 423px; line-height: 20px; overflow-y: auto; -ms-overflow-style: none;} .hammenu .depth2 > div::-webkit-scrollbar{ display:none; } .hammenu .depth2 li{padding: 0 25px; margin: 0;} .hammenu .depth2 li a{ display: inline-block; padding: 0; margin: 12px 0; color: #424242; font-size: 16px; font-family: 'Noto Sans KR', sans-serif;} .hammenu .depth2 li.depopen > a{border-bottom:1px solid #f15657; color:#f15657} .hammenu .depth3{display: none; position: absolute; top: 0; left: 195px; background: #fff; width: 100%; height: 423px; padding: 10px 0 0; border: 1px solid #e5e5e5; border-top: 0; border-left: 0; overflow-y: auto; -ms-overflow-style: none;} .hammenu .depth3::-webkit-scrollbar{ display:none; } .hammenu .depth3 li a:hover{border-bottom:1px solid #f15657; color:#f15657} #blk_scroll_wings .swiper-button-next:after, #blk_scroll_wings .swiper-button-prev:after { content: unset !important; } #blk_scroll_wings .swiper-button-next, #blk_scroll_wings .swiper-button-prev { margin-top:0 !important; } input[type="text"], input[type="search"] { caret-color: transparent !important; /* 깜빡이는 세로선(|)을 투명하게 만듦 */ cursor: auto !important; /* 마우스 커서 모양은 정상적으로 나오게 함 */ } /* BASIC css end */