/* BASIC css start */ #header {z-index:100;min-width:1200px; position:relative; letter-spacing: 1px; background-color: #fbfbfb;} #header .headerGnb {position:relative; width:100%; min-width:1200px;margin:0 auto;border-bottom:none} #header .headerBtm { position:relative;background: #1B2230; z-index:95; min-width:1200px;margin:0 auto;} #header.headerFix .headerBtm { position:fixed; top:0; left:0; right:0; background:#ffffff; box-shadow:0 6px 16px -6px rgba(0,0,0,0.28); border-bottom:1px solid #E6DFD1; min-width:1200px;} #header.headerFix .headerGnb .cateWrap .tmenu a{color:#4c5c70} #header.headerFix .headerGnb .rtOpenBtn.catBox{color:#4c5c70} #header.headerFix .headerGnb .ca {display:inline-block; color:#4c5c70;} #header.headerFix .headerGnb .basketBtn i{color:#152f4e} #header.headerFix .headerGnb .searchOpen i{color:#152f4e} #header.headerFix .headerGnb .searchOpen .gutLabel, #header.headerFix .headerGnb .basketBtn .gutLabel { color:#4c5c70; } #header.headerFix .headerBtm .headerGnb .cateWrap .tmenu a div{color:#f4f4f4} #header.headerFix .cateWrap .bar1 {display:inline-block;font-size: 10px;color:#c3c3c3;height:18px;position: relative; top:2px; } #header.headerFix .headerGnb .cateWrap .tmenu .depth2 li a {font-size: 13px;color:#2d2d2d; } #header.headerFix .headerGnb .cateWrap a:hover { border-bottom:1px solid #d89f60; } #header .cateWrap .bar1 {display:inline-block;font-size: 10px;color:#5c6874;height:18px;position: relative; top:2px; } #header .headerTop {position:relative; min-width:1200px; margin:0 auto;height:59px; border-bottom:1px solid #E6DFD1;background:transparent;} /*컬러 */ #header .headerTop .menuRight li i {vertical-align:top; font-size:19px;height:30px;line-height:30px;color:#7c8a9b} #header .headerGnb li a.basketBtn span.user_basket_quantity { font-family:'Inter', 'Pretendard', sans-serif; background-color:#F85A81; color:#F6F2EA; font-size:12px; font-weight:600; min-width:13px; padding:4px 6px; border-radius:32px; line-height:1; display:inline-block; text-align:center; box-sizing:content-box; } #header .headerTop .menuRight .off{ position: absolute; top:78px; left:-40px; z-index: 0;cursor:pointer;} #header .headerTop .menuLeft1 { position: absolute; top:12px; left:40px;} #header .headerTop .menuLeft1 > li {float:left; position: relative;display: inline-block; padding:0 17px 0 0;} #header .headerTop .menuLeft1 > li a { font-size:14px; height:35px; line-height:35px; color:#5C6373; letter-spacing:0.02em; display:inline-flex; align-items:center; gap:5px;} #header .headerTop .menuLeft1 > li a i {position: relative; top:0;} #header .headerTop .menuLeft1 > li a svg { transform: translateY(-1.5px); } #header .headerTop .menuLeft { position: absolute; top:94px; left:40px; z-index: 0;cursor:pointer;} #header .headerTop .menuLeft img{ animation: wiggle 2s linear infinite; } /* Keyframes */ @keyframes wiggle { 0%, 7% { transform: rotateZ(0); } 15% { transform: rotateZ(-15deg); } 20% { transform: rotateZ(10deg); } 25% { transform: rotateZ(-10deg); } 30% { transform: rotateZ(6deg); } 35% { transform: rotateZ(-4deg); } 40%, 100% { transform: rotateZ(0); } } #header .headerTop .menuLeft img{width:31%; position: absolute; top:5px; left:10px; z-index:1; transform-origin: 50% 5em; } #header .headerTop .menuLeft > li {float:left; position:relative; top:0px; left:0px;padding:20px 40px 20px 105px;cursor:pointer;} #header .headerTop .menuLeft > li span:hover{color:#e87c95;} #header .headerTop .menuLeft > li p { font-size:16px; height:22px; line-height:22px; color:#2e4052;font-weight:500;letter-spacing: -0.5px;} #header .headerTop .menuLeft > li span{ font-size:18px;height:22px; line-height:22px;font-weight:600;color:#e87c95;} #header .headerTop .menuLeft > li i{display: block; font-size:70px;height:70px;line-height:70px;color:#7e8ea0} #header .headerTop .menuLeft > li .more{ display: block; position: absolute; top:0px; left:80px;font-size:13px; font-weight:500;height:22px; line-height:22px; color:#ccc;letter-spacing: -0.5px; padding:70px 10px 0 20px;z-index:3} #header .headerTop .menuRight { position: absolute; top:12px; right:40px;} #header .headerTop .menuRight li { float:left; margin:0 20px 0 0; } #header .headerGnb .joinArea {display:none; position:fixed; left:0; right: 0;top: 0px;bottom: 0;background:rgba(21, 47, 78, 0.9);width: 100%; min-width:700px;height: 100%;z-index:202;overflow: hidden;overflow-y:auto;overflow-x:auto; z-index:500} #header .headerGnb .join { width:75%; margin:0px auto;color:#fff; } #header .headerGnb .join fieldset { width:64%; margin:10% auto 0; text-align:center; color:#fff;} #header .headerGnb .join input { width:84%; height:40px; border:none; background:none; font-size:20px; color:#000;border-bottom:2px solid #fff;color:#fff; } #header .headerGnb .join .btn_search { font-size:40px; color:#fff;} #header .headerGnb .join .joinClose { display: block;margin:2% auto 1% auto;text-align:center;font-size: 50px; cursor:pointer;color:#fff; } #header .headerTop .menuRight li a { font-size:13px; height:29px; line-height:29px;color:#2e4052; } #header .headerTop .menuRight li a:hover {text-decoration:underline; } #header .headerTop .menuRight li a.basketBtn { padding: 0 0 0 26px; } #header .headerMid {height:196px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center;} #header .headerMid .logo {margin:0; padding:0; line-height:0;} #header .headerMid .logo a img{height:96px; width:auto; display:block;} #header .headerMid .logo_text {margin:0; padding:0; font-family:'Noto Serif KR', serif; font-weight:400; font-size:12px; letter-spacing:0.04em; color:#bababa;} /* 등급노출 */ /* 카테고리 */ #header .headerGnb .cateWrap {text-align:center;position: relative; height:52px; display:flex; justify-content:center; align-items:center; gap:52px; } #header .headerGnb .cateWrap:after {content:"";display:block;clear:both;} #header .headerGnb .cateWrap a:hover { border-bottom:1px solid #4c5c70; } #header .headerGnb .cateWrap .tmenu .bgg{padding:5px 15px 5px 15px;border: 1px solid #152f4e;} #header .headerGnb .cateWrap .tmenu {position: relative;display: inline-block; padding:0;} #header .headerGnb .cateWrap .tmenu a { font-size:16px; font-weight:400; color: #ffffff;padding-bottom:3px;} #header .headerGnb .cateWrap .tmenu > a { line-height:52px; } #header .headerGnb .cateWrap .tmenu .depth2 { display:none; position: absolute;top:49px;left: 50%;width: 120px;margin-left: -60px;padding: 10px 0; z-index: 97; background: #ffffff;border: 1px solid #b9bcbd;} #header .headerGnb .cateWrap .tmenu .depth2 li { line-height: 24px;} #header .headerGnb .cateWrap .tmenu .depth2 li a {font-size: 13px;color: #4c5c70 } #header .headerGnb .cateWrap .tmenu .depth2 li a:hover { color:#2d2d2d;border-bottom:1px solid #2d2d2d; } #header .headerGnb .rtOpenBtn { position:absolute; top:-3px; left:50px; width:26px; height:26px; font-size:48px; text-align:center; cursor:pointer; z-index:10; color:#f2f2f2;} #header .headerGnb p.rtOpenBtn { top:0; height:52px; display:flex; align-items:center; justify-content:center; font-size:0; } #header .headerGnb div.rtOpenBtn { top:0; left:82px; height:52px; width:auto; display:flex; align-items:center; } .arrow_box { } .arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 7px; margin-left: -7px; } .arrow_box:before { border-color: rgba(185, 188, 189, 0); border-bottom-color: #b9bcbd; border-width: 8px; margin-left: -8px; } #header .headerGnb .ca {position:static; display:inline-block;} #header .headerGnb .ca {display:inline-block; padding:0px 0 0 0px; color:#d9e0e9; width: 70px;font-size:15px; font-weight:400;background:transparent;line-height:1;} #header .headerGnb .ca.box_1:after {border-width:5px 10px; top:50%; margin-top:-1px;} #header .headerGnb .ca.box_1:after {border-color:transparent #fff transparent transparent; left:-17px;} #header .headerGnb .ca.box_1{animation: none; margin-top: 0; animation-iteration-count: 4;} .triangle {position:absolute; top:-6px; left:35px; display:inline-block;} .triangle span {display:inline-block; padding:3px; color:#fff; background:#152f4e; border-radius:3px;width: 70px;font-size:14px;font-style:nomal;} .triangle:after {content:''; position:absolute; width:0; height:0; border-style:solid;} .triangle.box_1:after {border-width:5px 10px; top:50%; margin-top:-1px;} .triangle.box_1:after {border-color:transparent #152f4e transparent transparent; left:-17px;} .triangle.box_1{animation: motion 0.5s linear 0s infinite alternate; margin-top: 0;} @keyframes motion { 0% {margin-left: 0px;} 100% {margin-left: 15px; } } #header .headerGnb .searchOpen{ position:absolute; top:0; right:202px; height:52px; display:flex; align-items:center; gap:10px; cursor:pointer; z-index:10; color:#C6A35A; } #header .headerGnb .basketBtn { position:absolute; top:0; right:40px; height:52px; display:flex; align-items:center; gap:10px; cursor:pointer; z-index:10; color:#C6A35A; } #header .headerGnb .basketBtn span { position:static; } #header .headerGnb li a.basketBtn i { } #header .headerGnb .searchOpen .gutLabel, #header .headerGnb .basketBtn .gutLabel { position:static; font-size:15px; font-weight:500; color:#B6BBC8; letter-spacing:0.02em; } /* 검색창 */ #header .headerGnb .srchArea {display:none; position:fixed; left:0; right: 0;top: 0px;bottom: 0;background:rgba(21, 47, 78, 0.9);width: 100%;height: 100%;z-index: 201; } #header .headerGnb .search { width:1200px; margin:0px auto;color:#fff; } #header .headerGnb .search fieldset { width:1000px; margin:10% auto 0; text-align:center; color:#fff;} #header .headerGnb .search input { width:800px; height:40px; border:none; background:none; font-size:20px; color:#000;border-bottom:2px solid #fff;color:#fff; } #header .headerGnb .search .btn_search { font-size:40px; color:#fff;} #header .headerGnb .search .searchClose { display: block;margin: 4% 0 3%;font-size: 40px; text-align:center;cursor:pointer;color:#fff; } /* 전체메뉴 레이어 */ .allMenu {display:none;background:#fff;position: fixed;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 201;} .allMenu .allMenuWrap {width: 75%;margin: 0 auto;} .allMenu .allMenuWrap a:hover {text-decoration: underline; } .allMenu .allMenuWrap h3 {font-size: 16px;font-weight: bold;padding: 1% 0 0.5% 1%;} .allMenu .allMenuWrap .allMenuList { *zoom:1;} .allMenu .allMenuWrap .allMenuList:after { display:block; clear:both; content:'' } .allMenu .allMenuWrap .allMenuList dl {padding: 0 1% 3%;float:left;width: 14.6%;} .allMenu .allMenuWrap .allMenuList dl dt {border-bottom: 1px solid #ddd;margin-bottom: 4px;} .allMenu .allMenuWrap .allMenuList dl dt a {padding-left:5px;font-size:14px;height:30px;line-height:30px;} .allMenu .allMenuWrap .allMenuList dl dd a {display: block;padding: 3px 0 3px 5px;color: #777;} .allMenu .allMenuWrap .allMenuList dl dd a:hover {color:#111;} .allMenu .allMenuWrap .boardList:after { display:block; clear:both; content:''} .allMenu .allMenuWrap .boardList li { float: left; padding: 0 1%; } .allMenu .allMenuWrap .csInfo {padding: 2% 0 0 1%; text-align:center} .allMenu .allMenuWrap .csInfo span { padding: 0 0.5% } /* 우측메뉴 */ #asideMenu { position:absolute; left:-240px; top:0; height:auto; width:240px; z-index:100; background:#fbfbfb; box-shadow:2px 0 28px -8px rgba(21,32,48,.18); } /* 닫기 바 */ #asideMenu .cat-close { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:52px; background:#1B2230; color:#fff; cursor:pointer; box-sizing:border-box; } #asideMenu .cat-close svg { width:18px; height:18px; } #asideMenu .cat-close span { font-size:15px; font-weight:400; } /* 1뎁스 14행 */ #asideMenu .cat-list { list-style:none; margin:0; padding:0; font-family:'Pretendard','Apple SD Gothic Neo',sans-serif; } #asideMenu .cat-row { display:flex; align-items:center; gap:14px; height:54px; padding:0 16px 0 20px; color:#2e4052; text-decoration:none; border-bottom:1px solid #E6DFD1; box-sizing:border-box; letter-spacing:0; } #asideMenu .cat-row:hover { background:#fff; } #asideMenu .cat-ico { flex:0 0 22px; width:22px; height:20px; display:flex; } #asideMenu .cat-ico svg { width:22px; height:22px; } #asideMenu .cat-label { flex:1; font-size:15px; font-weight:500; white-space:nowrap; } #asideMenu .cat-plus { color:#B6BBC8; font-size:18px; line-height:1; } #asideMenu .cat-row.em { color:#16315e; } #asideMenu .cat-row.em .cat-label { font-weight:700; } #asideMenu .cat-row.ico-gold .cat-ico svg { stroke:#C6A35A; } #asideMenu .cat-row.ico-pink .cat-ico svg { stroke:#F85A81; } /* ===== 2뎁스 + 3뎁스 통합 flyout ===== */ #asideMenu .cat-fly { display:none; position:absolute; left:240px; top:0; width:472px; background:#fff; border:1px solid #E6DFD1; box-shadow:6px 3px 28px rgba(26,33,48,.12); box-sizing:border-box; overflow:hidden; z-index:5; font-family:'Pretendard','Apple SD Gothic Neo',sans-serif; } #asideMenu .cat-item:hover > .cat-fly { display:block; } #asideMenu .cat-list > .cat-item:last-child > .cat-fly { top:auto; bottom:0; } #asideMenu .cat-item:hover > .cat-row { background:#fff; } /* 헤더 */ #asideMenu .cat-fly-head { display:flex; align-items:center; gap:12px; height:52px; padding:0 24px; background:#fbfbfb; border-bottom:1px solid #E6DFD1; color:#16315e; box-sizing:border-box; } #asideMenu .cat-fly-head .t { font-size:15px; font-weight:500; } /* 본문(2뎁스 216 + 3뎁스 232) */ #asideMenu .cat-fly-body { position:relative; width:472px; min-height:416px; box-sizing:border-box; } #asideMenu .cat-fly:not(.cat-fly-brand) .cat-fly-body::before { content:""; position:absolute; left:240px; top:0; bottom:0; width:1px; background:#E6DFD1; } #asideMenu .cat-sub { list-style:none; margin:0; padding:0; width:240px; box-sizing:border-box; } #asideMenu .cat-sub > li > a { display:flex; align-items:center; gap:8px; height:52px; padding:0 22px 0 28px; color:#2e4052; text-decoration:none; box-sizing:border-box; } #asideMenu .cat-sub > li > a > span { flex:1; font-size:15px; font-weight:500; } #asideMenu .cat-sub .chev { flex:0 0 16px; width:16px; height:16px; color:#B6BBC8; } #asideMenu .cat-sub > li:not(:has(.cat-three)) .chev { display:none; } /* 2뎁스 선택/호버 = 네이비 */ #asideMenu .cat-sub > li.is-active > a { background:#1B2230; } #asideMenu .cat-sub > li.is-active > a > span, #asideMenu .cat-sub > li.is-active .chev { color:#fff; } #asideMenu .cat-sub:hover > li.is-active:not(:hover) > a { background:transparent; } #asideMenu .cat-sub:hover > li.is-active:not(:hover) > a > span { color:#2e4052; } #asideMenu .cat-sub:hover > li.is-active:not(:hover) .chev { color:#B6BBC8; } #asideMenu .cat-sub > li:hover > a { background:#1B2230; } #asideMenu .cat-sub > li:hover > a > span, #asideMenu .cat-sub > li:hover .chev { color:#fff; } /* 3뎁스 오른쪽 칼럼 (호버한 항목 것만 표시, 기본=만년필) */ #asideMenu .cat-three { display:none; position:absolute; left:240px; top:0; bottom:0; width:232px; box-sizing:border-box; } #asideMenu .cat-three.is-default { display:block; } #asideMenu .cat-sub:hover .cat-three.is-default { display:none; } #asideMenu .cat-sub > li:hover .cat-three { display:block; } #asideMenu .cat-sub > li:hover .cat-three.is-default { display:block; } #asideMenu .cat-three ul { list-style:none; margin:0; padding:0; } #asideMenu .cat-three li > a { display:flex; align-items:center; height:52px; padding:0 0 0 24px; color:#2e4052; text-decoration:none; font-size:15px; font-weight:400; white-space:nowrap; box-sizing:border-box; } #asideMenu .cat-three li > a:hover { background:#F7F4EC; } /* 추천 키워드 */ #asideMenu .cat-curation { border-top:1px solid #E6DFD1; padding:32px 24px 44px; } #asideMenu .cat-cur-title { margin:0 0 16px; font-size:13px; font-weight:500; color:#B6BBC8; } #asideMenu .cat-chips { display:flex; flex-wrap:wrap; gap:10px; } #asideMenu .cat-chips .chip { display:inline-flex; align-items:center; padding:9px 14px; border-radius:100px; font-size:13px; font-weight:400; background:#F4F1EA; color:#2e4052; } #asideMenu .cat-chips .chip.pink { background:#FDECF1; color:#F85A81; } /* 위로가기 버튼 */ @media screen and (min-width: 1400px) { .topBtn{ display:none; position:fixed;bottom: 10px;right:23px; z-index:1; } .topBtn_l { display:block;width:48px; height:48px; text-align:center; margin-bottom:10px;} .topBtn_l img {width:48px; height:48px;} .topBtn_s { display:block;width:48px; height:48px; border:1px solid #eee; background-color:#2e4052; text-align:center;margin-bottom:3px; transition:all .4s ease-out} .topBtn_s i { vertical-align:top; margin-top:10px;color:#fff; font-size:28px; } .topBtn_s:hover {border:1px solid #2e2e2e;background-color:#f7f7f7;} .topBtn_s:hover i{color:#2e4052;} .topBtn1{ display:none;} .topBtn1_s{ display:none;} .topBtn1_l{ display:none;} } /* 위로가기 버튼 */ @media screen and (max-width: 1400px) { .topBtn{ display:none;} .topBtn_s{ display:none;} .topBtn_l{ display:none;} .topBtn1{ display:none; position:fixed;bottom: 28px;right:23px; z-index:1; } .topBtn1_l { display:block;width:48px; height:48px; text-align:center; margin-bottom:10px;} .topBtn1_l img {width:48px; height:48px;} .topBtn1_s { display:block;width:48px; height:48px; border:1px solid #eee; background-color:#2e4052; text-align:center;margin-bottom:3px; transition:all .4s ease-out} .topBtn1_s i { vertical-align:top; margin-top:10px;color:#fff; font-size:28px; } .topBtn1_s:hover {border:1px solid #2e2e2e;background-color:#f7f7f7;} .topBtn1_s:hover i{color:#2e4052;} } /* 다찾다 자동완성*/ .search-auto-complete-list { display:none; z-index:1; position:absolute; top:300px; left:490px; border:1px solid #ddd; line-height:14px; background:#fff;padding:10px 0 20px 0} .search-auto-complete-list ul { width:900px; padding:4px 0 26px 0; } .search-auto-complete-list ul li { text-align:left; float: left;} .search-auto-complete-list ul li a { display:block;margin:10px 20px 0px 20px;padding:8px 14px 8px 14; color:#000; background:none; font-family:'dotum'; font-size:14px; letter-spacing:-1px; } .search-auto-complete-list ul li a strong { color:#ab3e41; } .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; } .search-auto-complete-list .search-list-close { display:block; margin-top:30px;padding:0px 11px 0px 0; text-align:right; color:#999; font-size:13px; } .search-auto-complete-list ul li.on { background:#f3f3f3; } #header .headerGnb .joinArea .join_banner { margin: 30px auto; width:100%; min-width:700px; height: 100%; display: -ms-grid; display: grid; /* display: inline-grid; */ -ms-grid-columns: 20% 10px 20% 10px 20% 10px 7% 10px 28%; grid-template-columns: 20% 20% 20% 7% 28% ; -ms-grid-rows: 40% 10px 40% 10px 20%; grid-template-rows: 32% 32% 15%; gap: 30px 10px; } #header .headerGnb .joinArea .join_banner li{overflow:hidden;} #header .headerGnb .joinArea .join_banner img{margin:15px auto;width:50%; border-bottom:1px solid #f0f0f0;} #header .headerGnb .joinArea .join_banner img:hover { } #header .headerGnb .joinArea .box1{text-align:center;position:relative;width:100%;height: 100%;-ms-grid-row: 1;-ms-grid-column: 1;background-color: #fff; -webkit-padding-after:20px; } #header .headerGnb .joinArea .box1:hover{box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 0.2); } #header .headerGnb .joinArea .box2{text-align:center;position:relative;width:100%;height: 100%;-ms-grid-row: 1;-ms-grid-column: 3;background-color: #fff; -webkit-padding-after:20px;} #header .headerGnb .joinArea .box2:hover{box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 0.2); } #header .headerGnb .joinArea .box3{text-align:center;position:relative;width:100%;height: 100%;-ms-grid-row: 1;-ms-grid-column: 5;background-color: #fff; -webkit-padding-after:20px;} #header .headerGnb .joinArea .box3:hover{box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 0.2); } #header .headerGnb .joinArea .box4{text-align:center;position:relative;width:100%;height: 100%;-ms-grid-row: 3;-ms-grid-column: 1;background-color: #fff; -webkit-padding-after:20px;} #header .headerGnb .joinArea .box4:hover{box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 0.2); } #header .headerGnb .joinArea .box5{text-align:center;position:relative;width:100%;height: 100%;-ms-grid-row: 3;-ms-grid-column: 3;background-color: #fff; -webkit-padding-after:20px;} #header .headerGnb .joinArea .box5:hover{box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 0.2); } #header .headerGnb .joinArea .box6{text-align:center;position:relative;width:100%;height: 100%;-ms-grid-row: 3;-ms-grid-column: 5;background-color: #fff; -webkit-padding-after:20px;} #header .headerGnb .joinArea .box6:hover{box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 0.2); } #header .headerGnb .joinArea .box7{text-align:center;position:relative;width:100%;height: 100%;grid-column: 4; grid-row: 1 / 4;-ms-grid-row: 1;-ms-grid-row-span: 5;-ms-grid-column: 7; -webkit-padding-after:20px;} #header .headerGnb .joinArea .box7 li{} #header .headerGnb .joinArea .box7 li i{display:block;font-size: 50px; font-weight:600; vertical-align:middle; line-height:600px;} #header .headerGnb .joinArea .box7:hover{box-shadow: 0 17px 20px -18px rgba(0, 0, 0, 0.2); } #header .headerGnb .joinArea .box8{text-align:center;position:relative;width:100%;height: 100%; margin grid-column: 5; grid-row: 1 / 4; -ms-grid-row: 1;-ms-grid-row-span: 5;-ms-grid-column: 9;background-image: url("/design/munku/be_new/rm372112.png");background-size:100%;background-repeat: no-repeat; -webkit-padding-after:100px; -webkit-padding-start:100px;padding:100px;} #header .headerGnb .joinArea .box8 p {text-align:center; font-size: 18px; font-weight:600; color:#2e2e2e; letter-spacing:-0.5px;} #header .headerGnb .joinArea .box8 h5 {text-align:center;font-size: 14px; font-weight:500; color:#5d5d5d; letter-spacing:0px;padding:30px;} #header .headerGnb .joinArea .box9{text-align:center;position:relative;width:100%;height: 100%; grid-column: 1 / 4; grid-row: 3; -ms-grid-row: 5;-ms-grid-column: 1 ;-ms-grid-column-span: 5; -webkit-padding-after:20px; -webkit-padding-start:20px;padding:40px 0 20px 0 } #header .headerGnb .joinArea .box9 a {font-size: 22px; font-weight:600; color:#fff; letter-spacing:-0.5px;padding:20px 150px 20px 150px;border:1px solid #fff} #header .headerGnb .joinArea .box9 a:hover{color:#e87c95;border:1px solid #e87c95 } #header .headerGnb .joinArea h4 {text-align:center; font-size: 18px; font-weight:600; color:#2e2e2e; letter-spacing:-0.5px;padding:5px 16px 5px 16px;} #header .headerGnb .joinArea h5 {text-align:center;font-size: 14px; font-weight:500; color:#5d5d5d; letter-spacing:0px;padding:5px 20px 20px 20px;} #header .headerGnb .joinArea span .strong{font-family: 'Lato', sans-serif;} #header .headerGnb .joinArea .pink{color:#e87c95;font-size: 24px;} #header .headerGnb .joinArea .see {position:absolute; bottom:15px; right:15px;font-size: 15px; font-weight:300; color:#e0e0e0;letter-spacing:-0.5px;} #header .headerGnb .joinArea .see:hover {color:#e56b87;} .s1Area {display:none; position:fixed; left:0; right: 0;top: 0px;bottom: 0;background:rgba(21, 47, 78, 0.9);width: 100%; height: 100%;overflow: hidden;overflow-y:auto;overflow-x:visible; z-index:600} .s1_b { width:1200px;min-width:1200px; margin:0px auto; } .s1_b .s1Close { display: block;position:fixed;top:10px; right:30px;font-size: 50px; cursor:pointer;color:#333;background:#fff;padding:5px 15px 5px 15px;border:1px solid #f0f0f0; } .s1_b .s1Close:hover { color:#fff;background:#e17690; } .tmenu button{display:inline-block;position:relative; top:0px;background:#e3d4c3; } .tmenu .s1{ font-size:14px; font-weight:600; color: #2e4052;padding:3px 9px 3px 9px;border-radius:4px;border:1px solid #f0f0f0;} .tmenu .s1:hover{background:#f0f0f0;} #header.headerFix .headerGnb .cateWrap .tmenu button{background:#2e4052; } #header.headerFix .headerGnb .cateWrap .tmenu .s1{ color: #fff;border:none;} #header.headerFix .headerGnb .cateWrap .tmenu .s1:hover{color: #fff;background:#e87c95;} /* 사은품 공통 */ .cate-wrap.gift-title{padding:20px 0 20px 40px;border-bottom:1px solid #e3e3e3;border-top:1px solid #e3e3e3;margin-top:-1px} .cate-wrap.gift-title .title{display:inline-block;color:#202020;font-size:28px;font-weight:bold;line-height:1;letter-spacing:-0.5px;margin-right:20px;vertical-align:top;} .cate-wrap.gift-title .title1{width:1080px;display:inline-block;margin:0 auto;color:#fff;font-size:18px;font-weight:bold;line-height:1;letter-spacing:-0.5px;vertical-align:top;background:#2e4052;padding:10px 20px 10px 20px} .cate-wrap.gift-title .sub-title{display:inline-block;vertical-align:-2px;font-size:13px;color:#959595;letter-spacing:-1px;vertical-align:bottom; } #giftList {width:1200px; height:100%;background-color: #fbfbfb; padding:20px 0 20px 0} .gift-info-msg{width:588px;display:block;margin:50px auto 0;font-size:17px;color:#555;line-height:58px;height:58px;border:1px solid #ddd;text-align:center;letter-spacing:-0.5px;} .gift-info-msg .remainGiftVal{color:#ff3875;} .gift-info-msg .inputWrap input{display:none;} .table-gift-list{padding-top:40px;padding-bottom:20px;} .gift-list-wrap { *zoom:1 } .gift-list-wrap:after{content:"";display:block;clear:both;} .gift-list-wrap .gift-list{float:left;width:22%;height:360px;padding:30px 16px 20px 20px;text-align:center; border-right:1px dashed #e3e3e3;border-bottom:1px dashed #e3e3e3} .gift-list-wrap .gift-list:last-child{padding-right:0; border-right:none;} .gift-list-wrap .thumb{width:100%;overflow:hidden;margin-bottom:17px;} .gift-list-wrap .giftImg{ width:200px; height:200px } .gift-list-wrap .requiredPoint{color:#ff3875;padding-top:5px;display:block;font-size:14px;} .gift-list-wrap .title{display:block;font-size:18px;color:#1c1c1c;line-height:22px;padding:5px 10px 10px 10px} .gift-list-wrap .cond{font-size:14px;color:#878787;line-height:22px;} .gift-list-wrap label{cursor:pointer;} .gift-list-wrap .opt-area{padding-top:13px;color:#777;} .gift-list-wrap .opt-area li{padding:2px 0;} .gift-list-wrap .opt-title, .gift-list-wrap .opt-select{vertical-align:middle;line-height:22px;height:22px;display:inline-block;font-size:13px;} .gift-list-wrap .opt-title{padding-right:3px;} .gift-list-wrap .opt-select{padding-left:3px;} .gift-list-wrap .opt-select select{vertical-align:top;} /* 멀티옵션에 따른 분류 처리 */ .table-gift-list .stt-point{display:none;} .table-gift-list.use-point .stt-point{display:block;} .gift-footer{text-align:center;padding-top:30px;} .gift-footer .select-gift-btn{width:248px;height:58px;line-height:58px;display:inline-block;font-size:16px;color:#fff;vertical-align:top;background-color:#000;border:1px solid #000;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;} .gift-footer .select-gift-btn:hover{background-color:#fff;color:#000;} #header .headerTop .menuLeft3 { position: absolute; top: 94px; left: 40px; list-style: none; margin: 0; padding: 0; z-index: 0; cursor: pointer; } #header .headerTop .menuLeft3 > li { float: left; position: relative; height: 105px; padding-left: 160px; padding-right: 40px; display: flex; flex-direction: column; justify-content: center; } #header .headerTop .menuLeft3 > li p { font-size: 16px; line-height: 22px; color: #2e4052; font-weight: 500; letter-spacing: -0.5px; margin: 0; } #header .headerTop .menuLeft3 > li span { font-size: 18px; font-weight: 600; color: #e87c95; } /* more */ #header .headerTop .menuLeft3 > li .more { display: block; position: relative; font-size: 13px; font-weight: 500; color: #ccc; margin-top: 6px; } #header .headerTop .menuLeft3 > li .more:hover { color: #e87c95; } #header .headerTop .menuLeft3 .msg-wrap { position: absolute; top: 5px; left: 10px; width: 140px; height: 105px; z-index: 2; } /* p2 (배경) */ #header .headerTop .menuLeft3 .msg-bg { position: absolute; left: 60px; top: 0; height: 105px; z-index: 1; } /* p1 (메인 이미지) */ #header .headerTop .menuLeft3 .msg-item { position: absolute; left: 20px; top: 10px; height: 72px; z-index: 2; animation: msg-arrive 0.8s ease-out forwards, msg-shake 1.8s ease-in-out 0.8s infinite; } @keyframes msg-arrive { 0% { transform: translateY(-40px) scale(0.95); opacity: 0; } 60% { transform: translateY(5px) scale(1.02); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes msg-shake { 0% { transform: translate(0,0) rotate(0deg); } 10% { transform: translate(3px,-2px) rotate(2deg); } 20% { transform: translate(-3px,2px) rotate(-2deg); } 30% { transform: translate(2px,0) rotate(1deg); } 50% { transform: translate(0,0) rotate(0deg); } 70% { transform: translate(2px,1px) rotate(1deg); } 85% { transform: translate(-1px,-1px) rotate(-1deg); } 100% { transform: translate(0,0) rotate(0deg); } } #header .headerGnb .rtOpenBtn.catBox{ position:absolute; top:0; left:0; width:240px; height:52px; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:0 22px 0 50px; box-sizing:border-box; background-color:transparent; color:#ffffff; font-size:0; cursor:pointer; z-index:10; } #header .headerTop .menuRight li{ float:left; margin:0 0 0 8px; list-style:none; } #header .headerTop .menuRight li:first-child{ margin-left:0; } #header .headerTop .menuRight li a{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 16px; background:#2C3F50; border-radius:17px; color:#ffffff; letter-spacing:0.02em; line-height:1; box-sizing:border-box; text-decoration:none; } /* ===== 전체/나라별 브랜드 패널 (새 톤) ===== */ #asideMenu .cat-fly-brand .cat-fly-head{ display:flex; align-items:center; gap:10px; } #asideMenu .cat-fly-brand .cat-fly-head .bp-ic{ width:22px; height:22px; color:#16315e; display:inline-flex; } #asideMenu .cat-fly-brand .cat-fly-head .bp-ic svg{ width:22px; height:22px; } #asideMenu .cat-fly-brand .bk-r{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; } #asideMenu .cat-fly-brand{ width:1064px; position:fixed; top:50%; transform:translateY(-50%); max-height:90vh; overflow-y:auto; } #asideMenu .cat-fly-brand.cat-fly-nara{ width:1212px; } /* 나라별 블록 순서 (이미지2 기준) */ #asideMenu .cat-fly-nara #tab-n-2{order:1;} /* 대한민국 */ #asideMenu .cat-fly-nara #tab-n-3{order:2;} /* 독일 */ #asideMenu .cat-fly-nara #tab-n-14{order:3;} /* 프랑스 */ #asideMenu .cat-fly-nara #tab-n-9{order:4;} /* 이탈리아 */ #asideMenu .cat-fly-nara #tab-n-7{order:5;} /* 영국 */ #asideMenu .cat-fly-nara #tab-n-10{order:6;} /* 일본 */ #asideMenu .cat-fly-nara #tab-n-1{order:7;} /* 대만 */ #asideMenu .cat-fly-nara #tab-n-11{order:8;} /* 중국 */ #asideMenu .cat-fly-nara #tab-n-4{order:9;} /* 미국 */ #asideMenu .cat-fly-nara #tab-n-5{order:10;} /* 스위스 */ #asideMenu .cat-fly-nara #tab-n-6{order:11;} /* 아일랜드 */ #asideMenu .cat-fly-nara #tab-n-8{order:12;} /* 오스트리아 */ #asideMenu .cat-fly-nara #tab-n-16{order:13;} /* 호주 */ #asideMenu .cat-fly-nara #tab-n-15{order:14;} /* 필리핀 */ #asideMenu .cat-fly-nara #tab-n-13{order:15;} /* 터키 */ #asideMenu .cat-fly-nara #tab-n-12{order:16;} /* 캐나다 */ /* 칩 */ #asideMenu .cat-fly-brand .active-tabs{ display:flex; flex-wrap:wrap; gap:7px; padding:18px 24px 6px; margin:0; border:0; background:none; } #asideMenu .cat-fly-brand .active-tabs .btn{ display:inline-flex; align-items:center; padding:8px 13px; border-radius:100px; background:#F4F1EA; color:#2e4052; font-size:13px; font-weight:500; line-height:1; cursor:pointer; border:0; } #asideMenu .cat-fly-brand #bkc-all:checked ~ .active-tabs label[for="bkc-all"], #asideMenu .cat-fly-brand #bkc-1:checked ~ .active-tabs label[for="bkc-1"], #asideMenu .cat-fly-brand #bkc-2:checked ~ .active-tabs label[for="bkc-2"], #asideMenu .cat-fly-brand #bkc-3:checked ~ .active-tabs label[for="bkc-3"], #asideMenu .cat-fly-brand #bkc-4:checked ~ .active-tabs label[for="bkc-4"], #asideMenu .cat-fly-brand #bkc-5:checked ~ .active-tabs label[for="bkc-5"], #asideMenu .cat-fly-brand #bkc-6:checked ~ .active-tabs label[for="bkc-6"], #asideMenu .cat-fly-brand #bkc-7:checked ~ .active-tabs label[for="bkc-7"], #asideMenu .cat-fly-brand #bkc-8:checked ~ .active-tabs label[for="bkc-8"], #asideMenu .cat-fly-brand #bkc-9:checked ~ .active-tabs label[for="bkc-9"], #asideMenu .cat-fly-brand #bkc-10:checked ~ .active-tabs label[for="bkc-10"], #asideMenu .cat-fly-brand #bkc-11:checked ~ .active-tabs label[for="bkc-11"], #asideMenu .cat-fly-brand #bkc-12:checked ~ .active-tabs label[for="bkc-12"], #asideMenu .cat-fly-brand #bkc-13:checked ~ .active-tabs label[for="bkc-13"], #asideMenu .cat-fly-brand #bkc-14:checked ~ .active-tabs label[for="bkc-14"], #asideMenu .cat-fly-brand #bkc-15:checked ~ .active-tabs label[for="bkc-15"]{ background:#1B2230; color:#fff; } /* 본문 7칼럼 그리드 */ #asideMenu .cat-fly-brand .tabs-container{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 16px; padding: 28px 32px 48px 36px; background:transparent; box-shadow:none; height:auto; overflow:visible; } #asideMenu .cat-fly-brand .tab-c{ width:128px; margin:0; } #asideMenu .cat-fly-brand .tab-c{ display:none; } #asideMenu .cat-fly-brand #bkc-all:checked ~ .tabs-container .tab-c{ display:block; } #asideMenu .cat-fly-brand #bkc-1:checked ~ .tabs-container #tab-c1, #asideMenu .cat-fly-brand #bkc-2:checked ~ .tabs-container #tab-c2, #asideMenu .cat-fly-brand #bkc-3:checked ~ .tabs-container #tab-c3, #asideMenu .cat-fly-brand #bkc-4:checked ~ .tabs-container #tab-c4, #asideMenu .cat-fly-brand #bkc-5:checked ~ .tabs-container #tab-c5, #asideMenu .cat-fly-brand #bkc-6:checked ~ .tabs-container #tab-c6, #asideMenu .cat-fly-brand #bkc-7:checked ~ .tabs-container #tab-c7, #asideMenu .cat-fly-brand #bkc-8:checked ~ .tabs-container #tab-c8, #asideMenu .cat-fly-brand #bkc-9:checked ~ .tabs-container #tab-c9, #asideMenu .cat-fly-brand #bkc-10:checked ~ .tabs-container #tab-c10, #asideMenu .cat-fly-brand #bkc-11:checked ~ .tabs-container #tab-c11, #asideMenu .cat-fly-brand #bkc-12:checked ~ .tabs-container #tab-c12, #asideMenu .cat-fly-brand #bkc-13:checked ~ .tabs-container #tab-c13, #asideMenu .cat-fly-brand #bkc-14:checked ~ .tabs-container #tab-c14, #asideMenu .cat-fly-brand #bkc-15:checked ~ .tabs-container #tab-c15{ display:block; } /* 초성 헤더 + 브랜드 */ #asideMenu .cat-fly-brand .tabs-container table{ border-collapse:collapse; width:auto; margin:0; } #asideMenu .cat-fly-brand .tabs-container thead, #asideMenu .cat-fly-brand .tabs-container tbody, #asideMenu .cat-fly-brand .tabs-container tr{ display:block; } #asideMenu .cat-fly-brand .tabs-container th{ display:block; text-align:left; font-size:14px; font-weight:600; color:#B6BBC8; padding:0 0 10px; border-bottom:1px solid #E6DFD1; margin-bottom:14px; width:128px; } #asideMenu .cat-fly-brand .tabs-container td{ display:block; padding:3px 0; border:0; } #asideMenu .cat-fly-brand .tabs-container td a, #asideMenu .cat-fly-brand .tabs-container span{ font-size:14px; color:#2e4052; text-decoration:none; line-height:1.3; } #asideMenu .cat-fly-brand .tabs-container i, #asideMenu .cat-fly-brand .tabs-container .xi-check, #asideMenu .cat-fly-brand .tabs-container .xi-hlz{ display:none!important; } #asideMenu .cat-fly-brand .tabs-container span::before{ display:none!important; } /* ===== personal 자동 헤더 중복 숨김 (전체·나라별 공통) ===== */ #asideMenu .cat-fly-brand .tab-c table + table thead, #asideMenu .cat-fly-brand .tab-n table + table thead{ display:none!important; } #asideMenu .cat-fly-brand .tab-c table, #asideMenu .cat-fly-brand .tab-n table{ margin:0; } /* ===== 나라별 전용 (레이아웃 + 헤더/국기) ===== */ #asideMenu .cat-fly-brand.cat-fly-nara .tabs-container{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:24px 16px; padding: 28px 32px 52px 36px; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n{ margin:0; width:auto; max-width:560px; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n table{ width:auto; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n table + table tbody{ display:flex; flex-flow:column wrap; max-height:250px; align-content:flex-start; gap:0 16px; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n table + table tr{ display:block; width:128px; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n table + table td{ display:block; width:128px; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n th{ display:flex; align-items:center; gap:7px; font-size:14px; font-weight:400; color:#D0C1A4; padding:0 0 10px; border-bottom:1px solid #E6DFD1; text-align:left; width:auto; margin-bottom:14px; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n .flag{ display:inline-flex; width:22px; height:22px; color:#2e4052; flex:0 0 auto; } #asideMenu .cat-fly-brand.cat-fly-nara .tab-n .flag svg{ width:22px; height:22px; display:block; } /* 나라별 칩 필터 */ #asideMenu .cat-fly-nara .tab-n{ display:none; } #asideMenu .cat-fly-nara #bkn-all:checked ~ .tabs-container .tab-n{ display:flex; flex-direction:column; } #asideMenu .cat-fly-nara #bkn-1:checked ~ .tabs-container #tab-n-1, #asideMenu .cat-fly-nara #bkn-2:checked ~ .tabs-container #tab-n-2, #asideMenu .cat-fly-nara #bkn-3:checked ~ .tabs-container #tab-n-3, #asideMenu .cat-fly-nara #bkn-4:checked ~ .tabs-container #tab-n-4, #asideMenu .cat-fly-nara #bkn-5:checked ~ .tabs-container #tab-n-5, #asideMenu .cat-fly-nara #bkn-6:checked ~ .tabs-container #tab-n-6, #asideMenu .cat-fly-nara #bkn-7:checked ~ .tabs-container #tab-n-7, #asideMenu .cat-fly-nara #bkn-8:checked ~ .tabs-container #tab-n-8, #asideMenu .cat-fly-nara #bkn-9:checked ~ .tabs-container #tab-n-9, #asideMenu .cat-fly-nara #bkn-10:checked ~ .tabs-container #tab-n-10, #asideMenu .cat-fly-nara #bkn-11:checked ~ .tabs-container #tab-n-11, #asideMenu .cat-fly-nara #bkn-12:checked ~ .tabs-container #tab-n-12, #asideMenu .cat-fly-nara #bkn-13:checked ~ .tabs-container #tab-n-13, #asideMenu .cat-fly-nara #bkn-14:checked ~ .tabs-container #tab-n-14, #asideMenu .cat-fly-nara #bkn-15:checked ~ .tabs-container #tab-n-15, #asideMenu .cat-fly-nara #bkn-16:checked ~ .tabs-container #tab-n-16{ display:flex; flex-direction:column; } #asideMenu .cat-fly-nara #bkn-all:checked ~ .active-tabs label[for="bkn-all"], #asideMenu .cat-fly-nara #bkn-1:checked ~ .active-tabs label[for="bkn-1"], #asideMenu .cat-fly-nara #bkn-2:checked ~ .active-tabs label[for="bkn-2"], #asideMenu .cat-fly-nara #bkn-3:checked ~ .active-tabs label[for="bkn-3"], #asideMenu .cat-fly-nara #bkn-4:checked ~ .active-tabs label[for="bkn-4"], #asideMenu .cat-fly-nara #bkn-5:checked ~ .active-tabs label[for="bkn-5"], #asideMenu .cat-fly-nara #bkn-6:checked ~ .active-tabs label[for="bkn-6"], #asideMenu .cat-fly-nara #bkn-7:checked ~ .active-tabs label[for="bkn-7"], #asideMenu .cat-fly-nara #bkn-8:checked ~ .active-tabs label[for="bkn-8"], #asideMenu .cat-fly-nara #bkn-9:checked ~ .active-tabs label[for="bkn-9"], #asideMenu .cat-fly-nara #bkn-10:checked ~ .active-tabs label[for="bkn-10"], #asideMenu .cat-fly-nara #bkn-11:checked ~ .active-tabs label[for="bkn-11"], #asideMenu .cat-fly-nara #bkn-12:checked ~ .active-tabs label[for="bkn-12"], #asideMenu .cat-fly-nara #bkn-13:checked ~ .active-tabs label[for="bkn-13"], #asideMenu .cat-fly-nara #bkn-14:checked ~ .active-tabs label[for="bkn-14"], #asideMenu .cat-fly-nara #bkn-15:checked ~ .active-tabs label[for="bkn-15"], #asideMenu .cat-fly-nara #bkn-16:checked ~ .active-tabs label[for="bkn-16"]{ background:#1B2230; color:#fff; } /* ===== 패널 공통 보정 (폭 통일 · 칩 hug · 세로줄 제거) ===== */ /* 본문을 패널 폭에 꽉 채워 칩과 그리드 폭을 맞춤 (→ 한 덩어리로 보임) */ #asideMenu .cat-fly-brand .cat-fly-body, #asideMenu .cat-fly-brand .bk, #asideMenu .cat-fly-brand .tabs-container{ width:100%!important; box-sizing:border-box; } /* 칩: 줄바꿈 금지 + 내용 폭으로 hug */ #asideMenu .cat-fly-brand .active-tabs .btn{ white-space:nowrap!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; height:auto!important; } /* BASIC css end */