/********* * header * **********/ /* common */ .mask{ position:fixed; display:none; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.5); z-index: 99; } .outer__mask{ position:fixed; display:none; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.5); z-index: 99; } .inner__mask{ position:fixed; display:none; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.5); z-index: -1; } .page-dimmed { position: fixed; display: none; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 244; } .m-only {display: none;} .gnb3depth_m { display: none;} /* 2023.12.01 */ /* 헤더 */ #header { position:relative; width:100%; z-index:210; border-bottom:1px solid #ebebeb; background:#fff;} #header .s-inner {max-width:1440px; height: auto; margin:0 auto; padding:16px 24px 0;display: flex; align-items: center; flex-wrap: wrap;} /* 2022-05-17 */ #header .s-inner:after { display:block; content:""; clear:both; } /* 2021-10-22 KDP-7066 */ #header .logo { position:relative; height: 100%; margin-right:50px;align-items: center; padding-left: 7px;} /* 2022-05-17 */ #header .logo img { height: 16px; vertical-align: middle;} #header .logo:after { content: ""; display: inline-block; height: 100%; vertical-align: middle;} #header .logo.wht {display: none;} #header .logo.familyLogo img { height: 22px; } /* 20201024 패밀리넷 로고 */ #header .logoCollabo span {display:inline-block; vertical-align: middle;} #header .logoCollabo .firstLogo img {height: auto; max-height: 30px; } #header .logoCollabo .crossIcon {width:1px;height:28px;margin:0 15px;background-color:#000;} #header .logoCollabo.wht .crossIcon {background-color:#fff;} #header .logoCollabo.blk .crossIcon {background-color:#000;} #header .gnb > .gnb1depth{display: flex; align-items: center;} /* 2022-05-17 */ #header .link-dpz{position:relative;margin-right:20px;z-index:1;} #header .icon-dpz{position: relative; display: inline-block; z-index:2; vertical-align: middle;}/*211025*/ #header .gnb > ul > li.active > a .icon-dpz, #header .gnb > ul > li > a:hover > .icon-dpz, .gnbOpen #header.type-wht .gnb > ul > li.active > a .icon-dpz,/* 2021-11-02 KDP-7328 */ .gnbOpen #header.type-wht .gnb > ul > li > a:hover > .icon-dpz /* 2021-11-01 KDP-7328 */ {background-image:url("/sec/static/_images/common/icon-16-midium-location-white.svg")}/*211025*/ #header .new-gnb {float: left; height: 100%; width: 100%;} /* 2022-05-17 */ #header .gnb > ul.mob-onlyMenu > li { padding-left: 3%;} #header .gnb > ul { height:100%; } /* 2021-10-22 KDP-7066 */ #header .gnb > ul > li { display: flex; align-items: center; height:100%; min-height:50px; padding: 0; line-height: 30px;white-space: nowrap;} /* 2022-06-02 */ #header .gnb > ul > li.list_right { margin-left: auto; } #header .gnb > ul > li.blank{ display: block; width: 100%; padding: 0;} /* 2022-05-17 */ #header .gnb > ul > li.blank a{display: none;} /* 2022-05-17 */ .new-gnb .gnb2depth li.arrowBlind:after{display: none;} /* 2022-05-20 */ #header .gnb > ul > li > a {position:relative; display:block; font-size:14px; color:#000; font-weight:bold; padding: 0px 9px; border-radius: 20px;}/* 2022-05-17 */ #header .gnb > ul > li.active > a, #header .gnb > ul > li > a:hover {background-color: #000; color: #fff !important;} /* 2021-10-28 KDP-7283 */ #header .gnb > ul > li.active > a > .icon-dpz, #header .gnb > ul > li.active > a.outlink:after, #header .gnb > ul > li > a:hover > .icon-dpz, #header .header-right.gnbMenu ul {font-size: 0px;} #header .header-right.gnbMenu > ul {height: 100%;} /* 2021-11-08 KDP-7511 */ #header .header-right.gnbMenu .ico-large {width: 23px; height: 23px;} /* #header .gnb > ul > li > a:before {content:'';position:absolute;bottom:-5px;width:0;left:50%;transform:translateX(-50%);height:2px;background-color:#000;-webkit-transition:width 0.3s; -moz-transition:width 0.3s; -o-transition:width 0.3s; transition:width 0.3s;} #header .gnb > ul > li.active > a:before {width:100%;} #header .gnb > ul > li > a:hover:before {width:100%;} */ #header .gnb a.outlink:after { display:inline-block; width:13px; height:12px; margin-top:-3px; margin-left:7px; vertical-align:middle; background:url("/sec/static/_images/common/icon-outlink.svg"), url("/sec/static/_images/common/icon-16-midium-link-white.svg") no-repeat center center; content:""; }/* 211025 */ #header .gnb .gnb2depth a.outlink:after {background-size: 12px;}/* 211025 */ #header .gnb > ul > li > a.outlink:hover:after {background-image: url("/sec/static/_images/common/icon-16-midium-link-white.svg");} #header .gnb .gnb2depth .gnbBanner a.outlink{position:relative;padding-right:18px} #header .gnb .gnb2depth .gnbBanner a.outlink:after {position: absolute;top: 50%;right: -4px;width:10px;height:11px;margin-top:0;background-position:-1px 0px;background-size: 12px;transform: translate(-52.1%, -50.1%)} #header .header-right { position: relative; display:block; float:none; height:100%; margin-right:-12px; white-space: nowrap; margin-left:auto; display: flex; align-items: center;} /* 2022-05-17 */ #header .header-right > ul > li {display:inline-block; height:100%;padding:0 12px 0 13px;vertical-align:middle; padding: 13px; } /* 2021-10-22 KDP-7066 */ #header .header-right > ul > li > a{ display:flex; align-items: center; height:100%; line-height:80px;font-size:16px; color:#000; font-weight:bold; vertical-align:middle; } /* 2021-11-08 KDP-7511 */ #header .header-right > ul > li > a.link-cart{position:relative;} .cart-inner-count{position:absolute;right:-5px;top:-5px;display:none;width:15px;height:15px;border-radius:50%;background-color:#2189FF;color:#fff;font-size:10px;line-height:16px;text-align:center;}/* 211101 */ /*3*/ #header .header-right > a:nth-last-child(4) { margin-left:28px; padding-right:7px; } #header .header-right > ul > li:last-child{display:none;} #header .header-right > ul > li.user_login { padding: 13px;} #header .header-right > .link { padding:0 19px; } #header .header-right .link-search { display: none;} #header .header-right > .link-m-nav { display:none; } #header .header-right > .link-location:after { display:inline-block; width:16px; height:16px; margin-top:-3px; margin-left:6px; vertical-align:middle; background:url("/sec/static/_images/common/icon-location.svg") no-repeat center center; content:""; } #header .header-right > ul > li .link-outlink { position:relative; padding-right:24px; } #header .header-right > ul > li .link-outlink:after { content:""; position:absolute; top:50%; right:0; width:16px; height:16px; margin-top:-8px; vertical-align:middle; background:url("/sec/static/_images/common/icon-outlink.svg") no-repeat center center;} /*#header .header-right > ul > li .link-m-nav { display:none; }*/ .member-head { max-width:1440px; } .lnb-back, .mob-onlyMenu{display:none;} .font-color-white{color:#fff !important;} .font-color-black{color:#000 !important;} .font-bold{font-weight:bold !important;} .strong-skyblue{color:#2189FF !important;} .bold, .fontBold{font-weight:bold;} .new-gnb .gnb2depth { position: absolute; top: 117px; right: 0; left: 0; height: 0; opacity: 0; overflow: hidden; background: #fff; transition: all .3s; } .gnbOpen .new-gnb .gnb2depth { opacity: 1; } /* 20201022 gnb2depth height 수정 */ .new-gnb .gnb2depth .inner { position: relative; width: 1390px; /* 2021-11-09 KDP-7553 gnb 높이 조정 */ /* height: calc(100% - 100px); */ height: 100%; margin: 36px auto 0; opacity: 0; transition: opacity .3s; } .new-gnb .gnb2depth .inner:after {content: ""; display: block; clear: both;} .new-gnb .active .gnb2depth {z-index: 10;} .new-gnb .active .gnb2depth > .inner {opacity: 1;} .new-gnb .gnb2depth a { position: relative; display: inline-block; max-width: calc(100% - 40px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 18px; line-height: 1.4; } .new-gnb .gnb2depth a:after { content: ''; display: block; } .new-gnb .gnb2depth a.special { color:#2189ff; } /* 201101 특별기획전 텍스트 수정 */ .new-gnb .gnb2depth a:not(.rec-link):before { /* 201005 */ content:""; position: absolute; bottom: 0; left: 50%; width: 0; transition: left .3s, width .3s; border-bottom: 1px solid #000; } .new-gnb .gnb2depth .active > a {font-weight: bold;} .new-gnb .gnb2depth a:not(.rec-link):hover {/* 201005 */ font-weight: bold; } .new-gnb .gnb2depth a:hover:before { left: 0; width: 100%; } .new-gnb .gnb2depth a[href="#"]:hover:before {display: none;} .new-gnb .gnb2depth li {padding: 9px 0; line-height: 1;} .new-gnb .gnb2depth li:after { content: ""; float: right; position: relative; top: 0; left: -20px; width: 25px; height: 25px; /* background: url('/sec/static/_images/common/icon-gnb-arrow.svg') no-repeat 50% 50%; */ background-size: 10px; opacity: 0; transition: left .5s, opacity .2s; } .new-gnb .gnb2depth li.active:after { left: 0; opacity: 1; } .new-gnb .gnb2depth li.direct:after { opacity: 0; } /* 22-08-15 GNB direct case */ .new-gnb .gnb2depth li {width: calc(100% - 472px); } .new-gnb .gnb2depth .inner > .list {margin-top: 16px;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth .inner > .list.onDepth > li {width: 209px;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth li.border-bottom {padding-bottom: 25px;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth li.border-bottom span.border {display: block;background-color: #bbb;height: 1px;width: 187px;position: relative;top: 43px;} /* 2022-05-17 -3*/ .new-gnb .gnb3depth, .new-gnb .gnb4depth { position: absolute; top: 0; right: 0; bottom: 0; left: 209px; margin-left: -20px; opacity: 0; transition: margin .5s; overflow: hidden; } .new-gnb .gnb3depth > ul > li { padding-left: 50px; padding-right: 50px; } .new-gnb .gnb3depth ul > li.border-bottom { padding-bottom:25px; } /* 2022-05-17 -2*/ .new-gnb .gnb3depth > ul > li.border-bottom span.border{display: block;background-color: #bbb;height: 1px;width: 187px;position: relative;top: 43px;} /* 2022-05-17 -2*/ .new-gnb .gnb3depth > ul.onDepth > li {width: 348px;} .new-gnb .gnb4depth {width: 360px; left: 348px;} .new-gnb .gnb4depth ul {transform: translateY(0);} .new-gnb .gnb4depth li {width: 100%;} .new-gnb .gnb4depth li.border-bottom {padding-bottom: 25px;} /* 2022-05-17 -2*/ .new-gnb .gnb4depth li.border-bottom span.border {display: block;background-color: #bbb;height: 1px;width: 187px;position: relative;top: 43px;} /* 2022-05-17 -2*/ .new-gnb li.active > .gnb4depth ul {transition: transform .5s;} .new-gnb li.active > .gnb3depth, .new-gnb li.active > .gnb4depth { margin-left: 0; opacity: 1; z-index: 2; transition: margin .5s, opacity .5s; } .new-gnb .btnListControl { position: absolute; top: 50%; right: 18px; transform: translateY(-50%); } .new-gnb .btnListControl button { display: block; width: 25px; height: 25px; background: url('/sec/static/_images/common/icon-gnb-arrow.svg') no-repeat 50% 50%; font-size: 0; } .new-gnb .btnListControl button:disabled {opacity: .2;} .new-gnb .btnListControl .btnUp {transform: rotate(-90deg);} .new-gnb .btnListControl .btnDown { margin-top: 24px; transform: rotate(90deg); } .new-gnb .gnbBanner { position: absolute; top: 0; right: 0; bottom: 0; width: 500px; padding: 0 0 0 38px; /* border-left: 1px solid #ddd; */ border-left: 1px solid #ddd; font-weight: bold; opacity: 0; z-index: 2; transition: opacity .5s; } .new-gnb .active > .gnb2depth > .inner > .gnbBanner, .new-gnb .active > .gnb3depth > .gnbBanner { opacity: 1; z-index: 3; } .new-gnb .gnbBanner a:before {display: none;} .new-gnb .gnbBanner .img { width: 330px; height: 330px; margin: 0 0 24px; overflow: hidden; border-radius: 20px; } .new-gnb .gnbBanner .img img { width: 100%; transition: transform .5s; } .new-gnb .gnbBanner .img:hover img {transform: scale(1.05);} .new-gnb .gnbBanner .txt { margin: 0 0 18px; font-size: 18px; } .new-gnb .gnbBanner .link {font-size: 14px; text-decoration: underline;} /* 210616 */ .new-gnb .gnbBanner.type2 .link-box a +a{margin-left:20px} .new-gnb .gnbBanner.type2 .link-box .btn{padding:0 14px} .new-gnb .gnbBanner.type2 .link-box a span{font-size: 14px} .textSubWrap{top:50px;right:0;border-radius:0 0 30px 30px;text-align:center;border:1px solid #d9d9d9;} .textSubWrap .gnbSubRound{display:flex;} .textSubWrap .gnbSubRound > div{min-width:180px;padding:30px 24px 30px;text-align:left;vertical-align:top;border-left:1px solid #d9d9d9;box-sizing:border-box;} .textSubWrap .gnbSubRound > div:first-child{border-left:0;} .textSubWrap .gnbSubRound > div dl{margin-top:48px;} .textSubWrap .gnbSubRound > div dl:first-child{margin-top:0;} .textSubWrap .gnbSubRound > div dl dt{margin-bottom:18px;line-height:18px;} .textSubWrap .gnbSubRound > div dl dt:nth-last-child(1){margin-bottom:0;} .textSubWrap .gnbSubRound > div dl dt a{font-size:14px;color:#000;/*font-weight:bold;*/display:inline-block;} /* 2023 접근성 b2c - 11p */ .textSubWrap .gnbSubRound > div dl dt a.subLink{padding-right:22px;background:url("/sec/static/_images/common/icon-small-right.svg") center right no-repeat;} .textSubWrap .gnbSubRound > div dl dt .greet-txt {display:block;padding-bottom:18px;font-size:16px;font-weight:bold;border-bottom:1px solid #ddd;font-weight:bold;white-space:nowrap;} /* 211025 KDP-7173 */ .textSubWrap .gnbSubRound > div dl dd{margin-bottom:18px;line-height:18px;} .textSubWrap .gnbSubRound > div dl dd:nth-last-child(1){margin-bottom:0;} .textSubWrap .gnbSubRound > div dl dd a{font-size:14px;color:#000;} .new-gnb .gnb-close { display: none; position: absolute; top: 80px; right: 50%; margin: 36px -700px 0 0; width: 20px; height: 20px; background: url('/sec/static/_images/common/icon-close-large.svg') no-repeat; background-size: cover; font-size: 0; z-index: 10; } .new-gnb .gnb-back {display: none;} .gnbOpen .new-gnb .gnb-close {display: block;} /* gnb 추천 상품 (공통) - 201005 추가 */ .new-gnb .gnb2depth li.new:after { background-image:none; } .new-gnb .prd-list-wrap img {} .new-gnb .prd-list-wrap .pc-pic { display:block; } .new-gnb .prd-list-wrap .mo-pic { display:none; } .new-gnb .prd-list-wrap a { display:inline-block; width:100%; max-width:100%; height:100%; } .new-gnb .prd-list-wrap a .pic-wrap { position:absolute; display:inline-block; width:100%; max-width:100%; border-radius:20px; overflow:hidden; } .new-gnb .prd-list-wrap a .pic-wrap span { width:100%; height:100%; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; } .new-gnb .prd-list-wrap .tit, .new-gnb .prd-list-wrap .desc { display:inline-block; width:100%; display: -webkit-box; text-align:center; overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; } .new-gnb .prd-list-wrap .tit { font-weight:bold; /* height:74px; */ max-height:74px; } /* .new-gnb .prd-list-wrap .desc { height:40px; max-height:40px; } */ .new-gnb .tit.theme-wht { color:#fff; } .new-gnb .desc.theme-wht { color:rgba(255,255,255,0.8); } .new-gnb .tit.theme-blk { color:#000; } .new-gnb .desc.theme-blk { color:#707070; } /* gnb 추천 상품 */ .new-gnb .new-prd-list.gnb3depth { height:560px; } .new-gnb .prd-list-wrap { position:relative; display:flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; width:100%; height:auto; /*padding: 0px 0px 80px 0px;*/} .new-gnb .prd-list-wrap .main-prd { position:absolute; top:0; left:0; width:428px; height:560px; } .new-gnb .prd-list-wrap .main-prd a { position:relative; padding:0; } .new-gnb .prd-list-wrap .main-prd a .pic-wrap { display:inline-block; width:100%; height:100%; background-color:#f7f7f7; border-radius:20px; overflow:hidden; z-index: -1; } .new-gnb .prd-list-wrap .main-prd .txt-grp { position:absolute; top:400px; left:0; right:0; padding:0 30px; } .new-gnb .prd-list-wrap .main-prd .tit { font-size:30px; line-height:37px; } .new-gnb .prd-list-wrap .main-prd .tit.mo-color { color:#000 !important; } .new-gnb .prd-list-wrap .main-prd .desc { display:block; margin-top:18px; font-size:14px; line-height:20px; } .new-gnb .prd-list-wrap .main-prd .desc.mo-color { color:#707070 !important;} .new-gnb .prd-list-wrap .sub-prd { /*position:absolute;*/ border-radius:20px; background-color:#f7f7f7; line-height: 0; margin: 0 15px 15px 0; } .new-gnb .prd-list-wrap .sub-prd a { width: 128px; height: 144px; padding: 0; overflow: hidden;} .new-gnb .prd-list-wrap .num-1 { top:0; left:0 } .new-gnb .prd-list-wrap .num-2 { top:192px; left:0 } .new-gnb .prd-list-wrap .num-3 { top:384px; left:0 } .new-gnb .prd-list-wrap .num-4 { top:0; left:calc(28px + 184px); } .new-gnb .prd-list-wrap .num-5 { top:192px; left:calc(28px + 184px); } .new-gnb .prd-list-wrap .num-6 { top:384px; left:calc(28px + 184px); } .new-gnb .prd-list-wrap .num-7 { top:0px; left:calc(28px + 400px); } .new-gnb .prd-list-wrap .num-8 { top:192px; left:calc(28px + 400px); } .new-gnb .prd-list-wrap .num-9 { top:384px; left:calc(28px + 400px); } .new-gnb .prd-list-wrap .sub-prd a .pic-wrap { display:inline-block; width:100%; height:100%; border-radius:20px; overflow:hidden; } .new-gnb .prd-list-wrap .sub-prd a .pic-wrap img { z-index:0; } .new-gnb .prd-list-wrap .sub-prd .txt-grp { display: inline-block; width: 100%; text-align: center; white-space:normal; position:absolute; bottom: 5px; font-size: 14px; word-break: normal;} .new-gnb .prd-list-wrap .sub-prd .txt-grp.wt { color:#fff;} .new-gnb .prd-list-wrap .sub-prd .tit { display:flex; flex-direction:column; align-items:center; justify-content:center; height:45px; font-size:18px; line-height:23px; } .new-gnb .prd-list-wrap .sub-prd .tit span { display:inline-block; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; width:100%; max-height:inherit;} .new-gnb .prd-list-wrap .sub-prd .desc { margin-top:8px; max-height:33px; font-size:12px; line-height:16px; } .new-gnb .prd-list-wrap .sub-prd .badge {position: absolute; top: 12px; left: 8px;} /* GNB Samsung Sharp Sans */ .new-gnb .gnb a.font-sans {font-family: 'Samsung Sharp Sans'; font-size: 16px;} .new-gnb .gnb a.font-sans:hover {font-family: 'Samsung Sharp Sans'; font-size: 18px;} .new-gnb .gnb .gnb2depth a.font-sans {height: 25px; padding-top: 3px;} .new-gnb .gnb .gnb2depth a.font-sans:hover {height: 25px; padding-top: 0px;} .new-gnb .gnb .gnb2depth .active a.font-sans {padding-top: 0px; font-size: 18px;} .new-gnb .gnb .gnb2depth .active a.font-sans:hover {padding-top: 0;} .new-gnb .gnb .gnb3depth li:not(.active) a.font-sans {font-size: 16px;} .new-gnb .gnb .gnb3depth li:not(.active) a.font-sans:hover {padding-top: 0px; font-size: 18px;} .new-gnb .gnb .gnb3depth li:not(.active) a.font-sans {padding-top: 3px;} .new-gnb .gnb a.font-mix {font-family: 'SamsungOneKorean', '돋움', sans-serif; font-size: 18px; padding-top: 0;} .new-gnb .gnb a.font-mix:hover {font-weight: bold; font-family: 'SamsungOneKorean'; padding-top: 0;} /* GNB icon */ .new-gnb .gnb .gnb2depth li.list-icon {padding-top: 7px; padding-bottom: 6px;} .new-gnb .gnb .gnb2depth li.list-icon > a {height: 30px; line-height: 30px;} .new-gnb .gnb .gnb2depth li.list-icon > a:hover {height: 30px;} .new-gnb .gnb .gnb2depth li.list-icon span.icon-before, .new-gnb .gnb .gnb2depth li.list-icon span.icon-after {display: inline-block; position: relative; width: 30px; height: 30px; margin-right: 6px; vertical-align: top;} .new-gnb .gnb .gnb2depth li.list-icon span.icon-after {margin-right: 0; margin-left: 6px;} .new-gnb .gnb .gnb2depth li.list-icon .font-sans span.icon-before, .new-gnb .gnb .gnb2depth li.list-icon .font-sans span.icon-after {top: -3px;} .new-gnb .gnb .gnb2depth li.list-icon.active .font-sans span.icon-before, .new-gnb .gnb .gnb2depth li.list-icon.active .font-sans span.icon-after {top: 0;} .new-gnb .gnb .gnb2depth li.list-icon .font-sans:hover span.icon-before, .new-gnb .gnb .gnb2depth li.list-icon .font-sans:hover span.icon-after {top: 0;} /* 22-09-07 GNB bedge + color */ .new-gnb .gnb2depth li > a, .new-gnb .badge { align-items: center; } .new-gnb .gnb2depth li > a { display: inline-flex; } .new-gnb .badge { display: inline-flex; margin-left: 8px; padding: 0 5px; line-height: 21px; height: 21px; font-size: .688rem; background-color: #000; border-radius: 10px; color: #fff; } .new-gnb .badge._red { background-color: #ef3434; } .new-gnb .badge._org { background-color: #f66700; } .new-gnb .badge._blue { background-color: #2189ff; } .new-gnb .badge._green { background-color: #00838f; } .new-gnb .badge._sblu { background-color: #00b3e3; } .new-gnb .badge._ygrn { background-color: #97d653; } @media (max-width: 1280px){ /* 2022-05-20 */ #header .s-inner {max-width:1440px; height: auto; margin:0 auto; padding:0px 24px 0;display: flex; align-items: center; flex-wrap: wrap;} /* 2022-05-17 */ #header .header-right > ul > li { padding: 0; } #header .header-right .link-search { display: block;} .new-gnb .gnbBanner.type2 .link-box a{width:auto} #header .gnb > .gnb1depth { position: relative; background: #f3f3f3;} .gnbOpen .new-gnb .gnb2depth { width: 63%; position: absolute; top:0;} #header .gnb > ul > li { width: 35%;} #header .gnb > ul > li.active { background: #fff; border-radius: 32px 0 0 32px;} #header .gnb > ul > li.active > a { font-weight: bold;} #header .gnb > ul > li.list_right { margin-left: 2%; } #header .header-right > ul > li.user_login { display: none; } .new-gnb .gnb2depth li > a { font-size: 16px; } .new-gnb .gnb3depth li > a { font-size: 14px;} .gnb3depth_m { display: block; } #header .menuitem__l2__wrap { opacity: 1 !important;} #header .gnb ul.mob-onlyMenu li { width: 100%; } .new-gnb .gnbBanner { overflow-x: scroll;} .new-gnb .prd-list-wrap { width: 480px; padding: 0; gap:12px; flex-direction: row;} .new-gnb .prd-list-wrap .sub-prd { flex: 0 0 auto; width: 107px;} .new-gnb .prd-list-wrap .sub-prd a { width: 107px; height: 120px;} .gnbOpen .new-gnb .gnb-close2 { display: none; } } @media all and (min-width:1280px) and (max-width:1440px) { /* 2022-05-20 */ .gnbOpen .new-gnb .gnb2depth {height: 44.055556vw;} /* 20201022 gnb2depth height 수정 */ .new-gnb .gnb2depth .inner {width: auto; /* height: calc(100% - 8.3333vw); */ height: 100%; margin: 2.5vw 1.66667vw 0;} /* 2021-11-09 KDP-7553 gnb 높이 조정 */ .new-gnb .gnb2depth .inner > .list {margin-top: 1.111111vw;} .new-gnb .gnb2depth .inner > .list.onDepth > li {width: 14.513889vw;} .new-gnb .gnb2depth .inner > .list.onDepth > li.border-bottom{padding-bottom: 1.8vw;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth .inner > .list.onDepth > li.border-bottom span.border {width: 13.5139vw;top: 3.1vw;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth a {max-width: calc(100% - 2.77778vw); font-size: 1.25vw;} .new-gnb .gnb2depth li {width: calc(100% - 32.77778vw); padding: 0.625vw 0;} .new-gnb .gnb2depth li:after {width: 1.736111vw; height: 1.736111vw; background-size: 0.69444vw;} .new-gnb .gnb3depth, .new-gnb .gnb4depth {left: 14.5138889vw;} .new-gnb .gnb3depth > ul > li {padding-right:3.47222vw; padding-left: 4.166667vw;} .new-gnb .gnb3depth > ul.onDepth > li {width: 24.1666667vw;} .new-gnb .gnb4depth {width: 24vw; left: 24.166667vw;} .new-gnb .gnb4depth li {width: 100%;} .new-gnb .btnListControl {right: 1.25vw;} .new-gnb .btnListControl button {width: 1.7361111vw; height: 1.7361111vw; background-size: 0.694444vw; ;} .new-gnb .btnListControl .btnDown {margin-top: 1.6667vw;} .new-gnb .flag-new {width: 3.33333vw; height: 1.388889vw; margin-left: 0.69444vw; line-height:1.388889vw; font-size: 0.97222vw; border-radius:2.083333vw;} .new-gnb .gnbBanner {width: 54.77778vw; padding: 0 0 0 1.99444vw;} .new-gnb .gnbBanner .img {width: 22.916667vw; height: 22.916667vw; margin: 0 0 1.666667vw; border-radius: 1.388889vw;} .new-gnb .gnb-close {right: 1.66667vw; margin: 2.5vw 0 0; width: 1.944444vw; height: 1.944444vw;} .new-gnb .gnbBanner .txt {margin: 0 0 1.25vw; font-size: 1.25vw; } .new-gnb .gnbBanner .link {font-size: 0.97222vw;} /* gnb 추천 상품 (공통) - 201005 추가 */ .new-gnb .prd-list-wrap img {} .new-gnb .prd-list-wrap a { width:100%; max-width:100%; height:100%; } .new-gnb .prd-list-wrap a .pic-wrap { width:100%; max-width:100%; border-radius:1.3889vw; } .new-gnb .prd-list-wrap a .pic-wrap img { top:0; left:0; right:0; bottom:0; max-height:100%; } .new-gnb .prd-list-wrap .tit, .new-gnb .prd-list-wrap .desc { width:100%; -webkit-line-clamp:2; -webkit-box-orient:vertical; white-space:normal; } .new-gnb .prd-list-wrap .tit { max-height:5.1389vw; } .new-gnb .prd-list-wrap .desc { max-height:2.7778vw; } /* gnb 추천 상품 */ .new-gnb .gnbBanner { width: 500px;} .new-gnb .new-prd-list.gnb3depth { height:38.8889vw; } .new-gnb .prd-list-wrap { width:100%; height:100%; } .new-gnb .prd-list-wrap > .main-prd { top:0; left:0; width:29.7222vw; height:38.8889vw; } .new-gnb .prd-list-wrap > .main-prd a .pic-wrap { width:100%; height:100%; border-radius:1.3889vw; } .new-gnb .prd-list-wrap > .main-prd .txt-grp { top:27.7778vw; left:0; right:0; padding:0 2.0833vw; } .new-gnb .prd-list-wrap > .main-prd .tit { font-size:2.0833vw; line-height:2.5694vw; } .new-gnb .prd-list-wrap > .main-prd .desc { margin-top:1.2500vw; font-size:0.9722vw; line-height:1.3889vw; } /* .new-gnb .prd-list-wrap .sub-prd { width:11.0278vw; height:11.6111vw; border-radius:1.3889vw; } */ .new-gnb .prd-list-wrap .num-1 { top:0; left:calc(29.7222vw + 1.6667vw); } .new-gnb .prd-list-wrap .num-2 { top:20.2778vw; left:calc(29.7222vw + 1.6667vw); } .new-gnb .prd-list-wrap .num-3 { top:0; left:calc(29.7222vw + 17.3611vw); } .new-gnb .prd-list-wrap .num-4 { top:20.2778vw; left:calc(29.7222vw + 17.3611vw); } .new-gnb .prd-list-wrap .num-5 { top:0; left:calc(29.7222vw + 33.0556vw); } .new-gnb .prd-list-wrap .num-6 { top:20.2778vw; left:calc(29.7222vw + 33.0556vw); } .new-gnb .prd-list-wrap .sub-prd a { padding:/*1.6667vw 1.3889vw 0*/0;} .new-gnb .prd-list-wrap .sub-prd a .pic-wrap { width:100%; height:100%; border-radius:1.3889vw; overflow:hidden; } /* .new-gnb .prd-list-wrap .sub-prd a .pic-wrap img { } */ .new-gnb .prd-list-wrap .sub-prd .txt-grp { flex-direction:column; align-items:center; justify-content:center; white-space:normal; } .new-gnb .prd-list-wrap .sub-prd .tit { max-height:3.1250vw; font-size:1.2500vw; line-height:1.5972vw; } .new-gnb .prd-list-wrap .sub-prd .desc { margin-top:0.5556vw; max-height:2.2917vw; font-size:0.8333vw; line-height:1.1111vw; } .new-gnb .prd-list-wrap .sub-prd .txt-grp { display: inline-block; width: 100%; text-align: center; white-space:normal; position:absolute; bottom: 5px; font-size: 14px; word-break: normal;} .new-gnb .prd-list-wrap .sub-prd .txt-grp.wt { color:#fff;} /* GNB Samsung Sharp Sans */ .new-gnb .gnb a.font-sans {font-size: 1.11vw;} .new-gnb .gnb a.font-sans:hover {font-size: 1.25vw;} .new-gnb .gnb .gnb2depth a.font-sans {height: 1.74vw; padding-top: 0.21vw;} .new-gnb .gnb .gnb2depth a.font-sans:hover {height: 1.74vw;} .new-gnb .gnb .gnb2depth .active a.font-sans {font-size: 1.25vw;} .new-gnb .gnb .gnb3depth li:not(.active) a.font-sans {font-size: 1.11vw;} .new-gnb .gnb .gnb3depth li:not(.active) a.font-sans:hover {padding-top: 0.00vw; font-size: 1.25vw;} .new-gnb .gnb .gnb3depth li:not(.active) a.font-sans {padding-top: 0.21vw;} .new-gnb .gnb a.font-mix {font-size: 1.25vw;} /* GNB icon */ .new-gnb .gnb .gnb2depth li.list-icon {padding-top: 0.49vw; padding-bottom: 0.42vw;} .new-gnb .gnb .gnb2depth li.list-icon > a {height: 2.08vw; line-height: 2.08vw;} .new-gnb .gnb .gnb2depth li.list-icon > a:hover {height: 2.08vw;} .new-gnb .gnb .gnb2depth li.list-icon span.icon-before, .new-gnb .gnb .gnb2depth li.list-icon span.icon-after {width: 2.08vw; height: 2.08vw; margin-right: 0.42vw;} .new-gnb .gnb .gnb2depth li.list-icon span.icon-after {margin-right: 0; margin-left: 0.42vw;} .new-gnb .gnb .gnb2depth li.list-icon .font-sans span.icon-before, .new-gnb .gnb .gnb2depth li.list-icon .font-sans span.icon-after {top: -0.21vw;} } /* // 2023.12.01 e */ /* search */ #header .s-inner .search__box{width: 330px;height: auto; background: #F5F5F5; display: flex; justify-content: space-between; align-items: center; padding: 7px 14px; box-sizing: border-box; border-radius: 40px; box-sizing: border-box; cursor: pointer;} #header .s-inner .search__box ul{width: 70%;} #header .s-inner .search__box ul li{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;} #header .s-inner .search__box ul li a{font-size: 14px; } #header .s-inner .search__box > button{width: 26px; height: 26px;} /* uitlity */ #header .utility__wrap{display: flex; justify-content: end; align-items: center; width: auto; height: 50px; margin-right: 10px;} #header .utility__wrap > div{ display: flex; height: 100%; margin-left: 18px;} #header .utility__button__search {height: auto !important;} #header .utility__button__search .search__box{height: 40px;} #header .utility__button__search .search__box ul{width: 70%; } #header .utility__button__search .search__box ul li{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; font-size: 16px; } /* KDP-93703 20250725 */ #header .utility__button__search .search__box ul li a{ width: 100%; display: inline-block; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } #header .utility__button__search .search__box > button{width: 26px; height: 26px;} #header .utility__wrap .utility__button__back__m, #header .utility__wrap .utility__button__home__m, #header .utility__wrap .utility__button__search__m, #header .utility__wrap .utility__button__barcode__m, #header .utility__wrap .utility__button__menu__m {display: none;} #header .utility__button__location{} #header .utility__button__cart{position: relative;} #header .utility__button__cart > button .cart__count{display: flex; justify-content: center; align-items: center; width:16px; height: 16px; position:absolute; top: 9px; right: -5px; background:#2188FF;border-radius: 50%;color:#fff; font-size: 11px; } #header .utility__button__cart .cart__list{visibility: hidden; position: absolute; top: 60px; right: -20px; width: 360px; height: auto; border-radius: 10px; background: #fff; z-index: 101; padding: 20px 4px 20px 20px; text-align: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4)} #header .utility__button__cart .cart__noitem{display: block; font-size: 12px; padding: 40px 0;} #header .utility__button__cart.active .cart__list{visibility: visible;} #header .utility__button__cart .cart__list > button {margin-top: 20px; display: inline-block;} #header .utility__button__cart .cart__list ul{max-height: 500px; overflow-y: scroll; -webkit-overflow-scrolling: touch;} #header .utility__button__cart .cart__list ul li{padding-right: 20px; padding: 10px 0;} #header .utility__button__cart .cart__list ul li a{display: flex;} #header .utility__button__cart .cart__list ul li a > img{display: block; width: 70px;} #header .utility__button__cart .cart__list ul::-webkit-scrollbar {width: 6px; /* 스크롤바의 너비 */} #header .utility__button__cart .cart__list ul::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: #999; border-radius: 10px;} #header .utility__button__cart .cart__list ul::-webkit-scrollbar-track {background: #eee; /*스크롤바 뒷 배경 색상*/} #header .utility__button__cart .cart__list .cart__prod__info{display: flex; flex-direction: column; justify-content: center; align-items: start; font-size: 14px; margin-left: 15px;} #header .utility__button__cart .cart__list .cart__prod__info .cart__name{font-weight: 700; font-size: 14px; text-align: left; word-break: break-all;} #header .utility__button__cart .cart__list .cart__prod__info .cart__price{padding-top: 10px; font-size: 14px;} #header .utility__button__cart .cart__list .cart__prod__info .cart__price span{font-size: 14px;} #header .utility__button__user{position: relative;} #header .utility__button__location > button, #header .utility__button__cart > button, #header .utility__button__user > button{position: relative;} #header .utility__button__user .user__list{display: none; position: absolute; top: 60px; right: 0; width: 224px; height: auto; border-radius: 10px; background: #fff; z-index: 101; padding: 24px 20px; text-align: left; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);} #header .utility__button__user.active .user__list{display: block; } #header .utility__button__user .user__list ul{display: flex; flex-direction: column; justify-content: start;} #header .utility__button__user .user__list ul li{display: flex; align-items: center; padding: 10px 0; font-size: 14px; } #header .utility__button__user .user__list ul li:first-child{padding-top: 0;} #header .utility__button__user .user__list ul li:last-child{padding-bottom: 0;} #header .utility__button__user .user__list ul li a{display: inline-block;} #header .utility__button__user .user__list ul li a > img{margin-right: 6px;} #header .utility__button__user .user__list ul li a span{font-size: 14px; color: #2188FF;} #header .user__list .login__user__wrap{display: block;border-bottom: 1px solid #ddd;padding-bottom: 15px; margin-bottom: 15px;} #header .user__list .login__user__wrap a{display: flex; font-size: 14px;align-items: center; font-weight: 700;} #header .user__list .login__user__wrap a > span{font-size: inherit; padding-left: 8px; font-weight: 700;} #header .user__list .login__user__wrap a > span.icon-user{display: inline-block; width: 32px; height: 32px; background: url('/sec/static/_images/gnb/icon-user.svg') center center no-repeat; margin-right: 8px;} /* menu */ #header .menu__wrap{ width: 100%; height: 50px; display: flex; justify-content: space-between;} #header ul.menu__list{display: flex; width: 100%;} #header ul.menu__list li.menuitem__l0{display: flex; flex: 0 0 auto; align-items: center; position: relative; padding: 0 2px; font-size: 14px; line-height: 30px; font-weight: bold; color: #000; box-sizing:border-box; } #header ul.menu__list li.menuitem__l0 .item__button{border-radius: 32px; padding: 0 9px; display: flex; align-items: center; font-weight: 700; cursor: pointer; color: inherit;} #header ul.menu__list li.menuitem__l0 .newtab::after{display: inline-block; margin-left: 4px; content:'';width: 16px;height: 16px;background:url('/sec/static/_images/common/icon-16-midium-link.svg') center center no-repeat;} #header ul.menu__list li.menuitem__l0 .item__button:hover{background: #000; color: #fff; } #header ul.menu__list li.menuitem__l0 .newtab:hover::after{filter: invert(1) !important;} #header ul.menu__list li.menuitem__l0.active .menuitem__l1__container{ visibility:visible; max-height: 100vh; /* transition: .5s cubic-bezier(0.6,0,0.4,1); */ } #header ul.menu__list li.menuitem__l0.list__divide > a{margin-left: 14px; position: relative;} #header ul.menu__list li.menuitem__l0.list__divide > a::before{display: inline-block; content:""; width: 1px; height: 18px; background: #707070; position: absolute; top: 50%; left: -10px; transform: translateY(-50%);} #header ul.menu__list li.menuitem__l0.list__right{margin-left: auto;} #header ul.menu__list li.menuitem__l0.right__menu .menuitem__l1__container{left: auto; right: -130px;} #header .menuitem__l1__container{ display: flex; width: auto; position: absolute; top: 50px; left: 0; padding: 20px 24px 4px; background: #fff; border-top: 1px solid #eee; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; visibility: hidden; /* transition: all 0s; max-height: 0; */ } #header .menuitem__l2__wrap{margin-bottom: 20px; width: 200px; padding-right: 10px; opacity: 0; /*transform: translateY(-10%);*/} #header ul.menu__list li.menuitem__l0.active .menuitem__l2__wrap {opacity: 1; /* transition-delay: 1s;transition: .8s cubic-bezier(0.6,0,0.4,1); transform: translateY(0);*/} #header .menuitem__l2__wrap ul.menuitem__l2__list{display: flex; flex-direction: column;} #header .menuitem__l2__wrap ul.menuitem__l2__list li{position: relative; display: flex; align-items: center; padding: 8px 0;} #header .menuitem__l2__wrap ul.menuitem__l2__list li > a{display: inline-block; font-weight: 700; font-size: 14px; line-height: 14px; color: #000; position: relative;} #header .menuitem__l2__wrap ul.menuitem__l2__list li > a::after{display:block; padding-top: 2px; content: ''; border-bottom: solid 1px #000; transform: scaleX(0); transition: transform 250ms ease-in-out; } #header .menuitem__l2__wrap ul.menuitem__l2__list li:hover > a::after{transform: scaleX(1);} #header .menuitem__l2__wrap.type__table {border-left: 1px solid #ddd; padding-left: 30px; width: max-content;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li {position: relative; padding: 0;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li.new::after {display: flex; justify-content: center; align-items: center; content: 'New'; width: 34px; height: 18px; background:#2188FF; border-radius: 18px; position: absolute; top: 16px; left: 16px; color: #fff; font-size: 14px;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li a{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 128px; height: 144px; font-weight: 700; font-size: 12px; border-radius: 20px; overflow: hidden;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li a > img{transition: transform 250ms ease-in-out;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li:hover a > img{transform: scale(1.1);} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li a > p{position: absolute; bottom: 8px; text-align: center; line-height: 1rem; width: 85%; font-size: 12px;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li a > p.wt{color: #fff;} #header .menuitem__l2__wrap.type__table .slider__button__wrap{display: none;} #header .menu__wrap .user__mypage__list{display: none;} /* badge */ #header .menuitem__l2__wrap ul.menuitem__l2__list li .badge{display: inline-flex; padding: 2px 6px; margin-left: 6px; justify-content: center; align-items: center; content: ''; width: auto; height: 18px; background:#2188FF; border-radius: 14px; color: #fff; font-size: 11px;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li .badge{position: absolute; top: 12px; left: 8px;} #header .menuitem__l2__wrap ul.menuitem__l2__list li .badge._blue{background: #2189FF;} #header .menuitem__l2__wrap ul.menuitem__l2__list li .badge._org{background: #f66700;} #header .menuitem__l2__wrap ul.menuitem__l2__list li .badge._red{background: #ef3434;} #header .menuitem__l2__wrap ul.menuitem__l2__list li .badge._green{background: #00838f;} #header .menuitem__l2__wrap ul.menuitem__l2__list li .badge._sblu{background: #00b3e3;} #header .menuitem__l2__wrap ul.menuitem__l2__list li .badge._ygrn{background: #97d653;} /* menu icon-before / after */ #header .new-gnb li .icon-before, #header .new-gnb li .icon-after{display: inline-block; position: relative; width: auto; height: 23px; vertical-align: top;} #header .new-gnb li .icon-before img, #header .new-gnb li .icon-after img{display: block; height: 23px;} #header .new-gnb li .icon-before {margin-right: 6px;} #header .new-gnb li .icon-after {margin-left: 6px;} @keyframes heightAni { from {height:0;} to {height:100%;} } @media (min-width: 1281px){ .mob-onlyMenu { display: none !important; } } /* responsive */ @media (max-width: 1520px) { .pit_bar_main .customer-service { margin-right: -5px; } } @media (max-width: 1440px) { .pit_bar_main .customer-service { margin-right: -15px; } .pit_bar_main ._dtl { padding: 0 20px; } } @media (min-width: 1025px) { .pit_bar_main ._dtl { display: flex !important; } } @media (max-width: 1024px) { .pit_bar_main .bg_grdt{background: linear-gradient(90deg, #6E6CF8 0%, #2189FF 80%);} .pit_bar_main { position: relative; height: 46px; } .pit_bar_main._open ._innr { border-radius: 0 0 20px 20px; } .pit_bar_main .customer-service { display: none; } .pit_bar_main .cta_alrt { position: relative; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 3px 5px rgba(0,0,0,.15); } .pit_bar_main .cta_alrt ._alrt { position: absolute; top: 7px; right: 7px; width: 3px; height: 3px; background: #F66700; border-radius: 50%; z-index: 1; } .pit_bar_main .cta_alrt:after { content: ""; position: absolute; top: 7px; right: 7px; width: 3px; height: 3px; background: #c1c1c1; border-radius: 50%; } .pit_bar_main ._innr ._prv { display: flex; position: relative; justify-content: space-between; align-items: center; padding: 0 30px 0 19px; height: 46px; } .pit_bar_main ._prv dl { display: flex; flex: 1; justify-content: right; align-items: center; margin: 0 10px; font-size: 14px; } .pit_bar_main ._prv dt { margin-right: 10px; } .pit_bar_main ._prv dd { font-weight: 700; } .pit_bar_main ._prv dd > a { font-size: 14px; color: #fff; } .pit_bar_main .open_dtl { position: absolute; top: 0; right: 10px; width: 30px; height: 46px; background: url(https://images.samsung.com/kdp/_pub/fnet/new/icon-pit-bar-cta.svg) center no-repeat; } .pit_bar_main .open_dtl img { display: none; margin: 0 auto; width: 16px; height: auto; transition: transform .5s; } .pit_bar_main._open .open_dtl img { transform: rotate(180deg); } .pit_bar_main._open .open_dtl { transform: rotate(180deg); } .pit_bar_main dl{ min-width: 70px; font-size: 14px; color: #fff; } .pit_bar_main .svc_nv p { min-width: 70px; font-size: 14px; color: #000; } .pit_bar_main ._dtl { display: none;} .pit_bar_main ._dtl > dl { display: block; padding-top: 10px;} .pit_bar_main ._dtl dt { float: left; font-size: 14px; } .pit_bar_main ._dtl dt > b { font-size: inherit; } .pit_bar_main ._dtl dd { margin: 0 0 10px; text-align: right; font-weight: 700; } .pit_bar_main .svc_nv { display: flex; flex-wrap: wrap; } .pit_bar_main .svc_nv { border-top: solid 1px#000; } .pit_bar_main .svc_nv li { position: relative; width: 50%; height: 50px; } .pit_bar_main .svc_nv li a { display: block; height: 100%; padding-left: 5px; } .pit_bar_main .svc_nv li:nth-child(odd)::after { content: ""; position: absolute; top: 14px; right: 0; bottom: 13px; width: 1px; background-color: #000; } .pit_bar_main .svc_nv li:before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: rgba(0, 0, 0, 0.2); } .pit_bar_main .svc_nv li:last-child:before { display: none; } .pit_bar_main .svc_nv div { display: flex; align-items: center; justify-content: center; height: 100%; } .pit_bar_main .svc_nv i { margin: 0 10px; width: 20px; height: 20px; } .pit_bar_main ._dtl > dl { color: #000; } .pit_bar_main ._dtl dd > a { color: #000;} .pit_bar_main._open ._innr { overflow: hidden; box-shadow: 0 3px 5px rgba(0,0,0,.15);} .pit_bar_main ._dtl{background: #fff;box-shadow: 0 3px 5px rgba(0,0,0,.15);} } @media screen and (max-width: 480px) { .pit_bar_main ._innr ._prv { padding: 0 25px 0 12px; } .pit_bar_main .open_dtl { right: 5px; } .pit_bar_main ._prv dl { font-size: 13px; } .pit_bar_main ._prv dd > a { font-size: 13px; } .pit_bar_main ._dtl { padding: 0 15px; padding-bottom: 6px;} } @media screen and (max-width: 350px) { .pit_bar_main ._prv dl { margin: 0 5px; font-size: 12px; } .pit_bar_main ._dtl dt { font-size: 12px; } .pit_bar_main ._prv dt { margin-right: 5px; } .pit_bar_main ._prv dd > a { font-size: 12px; } .pit_bar_main .open_dtl { right: 1px; } } /* s : 2022-05-17 */ @media all and (max-width:1400px) { #header .logo img{height: 14px;} #header .gnb > ul > li > a { font-size: 12px; } } /* e : 2022-05-17 */ @media all and (max-width:1280px) { /* 2022-05-20 */ #gnbmask { z-index: 20;} #header .s-inner { height:56px; display: block;} /* 2022-05-17 */ /* #header .header-right > ul > li:first-child {display:none;} 211025*/ #header .header-right #useLogin +a{display:none} #header .header-right > ul > li:last-child{display:inline-block; margin-left: 5px;} /* 2021-11-08 KDP-7511 */ #header .header-right > ul > li > a{line-height:56px;} .cart-inner-count{top:12px;right:3px} .gnbOpen, .gnbOpen body {overflow: hidden;} html.gnbOpen #wrap:before {display: none;} #header:before { content: ""; position: fixed; background: rgba(0,0,0,.7); opacity: 0; transition: opacity .3s; z-index: -1; } #header .gnb > ul > li.border-bottom{border-bottom: 1px solid #bbb;padding-bottom: 0px;margin-bottom: 15px;} /* 2022-05-17 */ .new-gnb .gnb2depth .inner > .list.onDepth > li.border-bottom {padding-bottom: 25px;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth .inner > .list.onDepth > li.border-bottom span.border {display: none;} /* 2022-05-17 -3*/ .new-gnb .gnb3depth:not(.new-prd-list) > ul > li.border-bottom { padding-bottom: 15px; margin-bottom: 15px; } /* 2022-05-17 */ .new-gnb .gnb3depth:not(.new-prd-list) > ul > li.border-bottom .border{ top: 67px; display: none; } /* 2022-05-17 */ .gnbOpen #header:before { top: 0; right: 0; bottom: 0; left: 0; opacity: 1; z-index: 1; } .gnbOpen #header {z-index: 211;} #header .new-gnb { position: fixed; float: none; top: 0; bottom: 0; right: -100%; width: 375px; background: #fff; transition: right .5s; z-index: 100; } .gnbOpen #header .new-gnb { right: 0; } #header .gnb { position: absolute; top: 5px; right: 0; bottom: 0; left: 0; padding: 0px; overflow-y: auto; overflow-x: hidden; } #header .gnb > ul {height: auto;} #header .gnb > .gnb1depth{display: block;} /* 2022-05-17 */ #header .gnb > ul > li.blank{display: none;} /* 2022-05-17 */ #header .gnb > ul > li { float: none; height: auto; padding-left: 0; display: block; margin-left: 2%; } /* 2022-05-17 */ #header .gnb > ul > li.mob-onlyMenu-logout { margin-top: 10px; padding-top: 10px; border-top: solid 1px #bbb; }/* 22-08-04 KDP-15480 */ #header .gnb > ul > li > a { height: auto; line-height: 1.3; font-weight: normal; font-size: 16px; padding: 15px 15px; } /* 2021-10-22 KDP-7066 */ #header .gnb > ul > li.active > a, #header .gnb > ul > li > a:hover { background-color: transparent; color: #000 !important;/* 21-11-02 Mobile 1Depth black */ } /* #header .gnb > ul > li.active > a > .icon-dpz, #header .gnb > ul > li.active > a.outlink:after, #header .gnb > ul > li > a:hover > .icon-dpz, #header .gnb > ul > li > a.outlink:hover:after { filter: none; } */ /* 21-11-02 Mobile 1Depth black */ #header .gnb > ul > li.active > a .icon-dpz, #header .gnb > ul > li > a:hover > .icon-dpz, .gnbOpen #header.type-wht .gnb > ul > li.active > a .icon-dpz, .gnbOpen #header.type-wht .gnb > ul > li > a:hover > .icon-dpz { background-image: url("/sec/static/_images/common/icon-locationinfo.svg"); } #header .gnb > ul > li > a.outlink:hover:after { background-image: url("/sec/static/_images/common/icon-outlink.svg"); } #header .gnb > ul > li > a:before {display: none;} .new-gnb .gnb > ul > li > a[href="#"]:after { content: ""; position: absolute; top: 50%; right: 0; width: 25px; height: 25px; /* background: url('/sec/static/_images/common/icon-gnb-arrow.svg') no-repeat 50% 50%; */ background: none; background-size: 10px; transform: translateY(-50%); } .new-gnb .gnb-close {top: 80px;} .new-gnb .gnb-back { display: none; position: absolute; top: 15px; left: 12px; width: 26px; height: 26px; background: url('/sec/static/_images/common/icon-gnb-prev.svg') no-repeat 50% 50%; font-size: 0; } .new-gnb .gnb-back.show {display: block; opacity: 0;} /* t, m lnb 뒤로가기 버튼 숨김 */ .new-gnb .gnb-close { top: 0; right: 0; margin: 0; width: 26px; height: 26px; background-size: cover; } .new-gnb .gnb2depth, .new-gnb .gnb3depth, .new-gnb .gnb4depth { position: absolute; height: auto; top: 0; bottom: auto; right: 0; left: auto; width: 100%; height: calc(100vh - 56px); margin: 0; background: #fff; overflow-y: auto; overflow-x: hidden; opacity: 1; transition: right .5s; } /* s: ios 크래쉬 수정 */ .new-gnb .gnb2depth { right: -100%; } .new-gnb .gnb3depth, .new-gnb .gnb4depth{ display:none; } /* s : 2022-05-20 -2*/ /* .new-gnb .gnb3depth.gnb_banner_view{ display: block; opacity: 1; position: relative; z-index: 1; height: auto !important; } .new-gnb .gnb3depth.gnb_banner_view .gnbBanner { display: block; opacity: 1; z-index: 1; } */ /* e : 2022-05-20 -2*/ /* e: ios 크래쉬 수정 */ .new-gnb .rel > ul {overflow: hidden;} .new-gnb .rel .gnb3depth, .new-gnb .rel .gnb4depth {position: absolute; top: 0; height: auto;} .new-gnb .gnb2depth {bottom: 0; z-index: 2; overflow: hidden;} .new-gnb .gnb3depth {z-index: 3;} .new-gnb .gnb4depth {z-index: 4;} .new-gnb .active .gnb2depth {right: 0;} .new-gnb .gnb2depth .inner {height: auto;} .new-gnb .gnb2depth ul { padding: 0 12px; transition: height .5s; } .new-gnb .gnb2depth li {width: auto; padding: 0;} .new-gnb .gnb2depth li:after {display: none;} .new-gnb .gnb2depth a { position: relative; display: block; max-width: 100%; width: 100%;/* 22-08-15 GNB direct case */ padding: 15px 25px 15px 0; font-size: 19px; line-height: 1.3; font-weight: normal; } .new-gnb .gnb2depth a:before {display: none;} .new-gnb .gnb2depth a[href="#"]:after { content: ""; position: absolute; top: 50%; right: 0; width: 25px; height: 25px; background: url('/sec/static/_images/common/icon-drop-down-pd.svg') no-repeat 50% 50%; background-size: 15px; transform: translateY(-50%); } .new-gnb .gnb2depth .active > a[href="#"]:after { content: ""; position: absolute; top: 50%; right: 0; width: 25px; height: 25px; background: url('/sec/static/_images/common/icon-drop-up-pd.svg') no-repeat 50% 50%; background-size: 15px; transform: translateY(-50%); } .new-gnb .gnb2depth .inner { width: auto; margin: 0; } .new-gnb .gnb2depth .inner > .list { margin: 0; height: 100% !important; } .new-gnb .gnb2depth .inner > .list.onDepth > li {width: auto;} .new-gnb .gnb3depth > ul > li { width: auto; padding: 0; } .new-gnb .gnb2depth li.border-bottom {padding-bottom: 15px;margin-bottom: 15px;border-bottom: 1px solid #bbb;} .new-gnb .gnb2depth .inner > .list.onDepth > li.border-bottom{margin-bottom: 15px;padding-bottom: 15px;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth .inner > .list.onDepth > li.border-bottom span.border {display: none;} /* 2022-05-17 -3*/ .new-gnb .gnb2depth li.border-bottom span.border {display: none;} /* 2022-05-17 -3*/ .gnbOpen .new-gnb .gnb2depth { height: 100%; max-height: fit-content; transition: none; }/* 22-10-27 KDP-19323 */ .new-gnb li.active > .gnb3depth, .new-gnb li.active > .gnb4depth { /* s: ios 크래쉬 수정 */ display:block; height: 100%; /* e: ios 크래쉬 수정 */ /* right: 0; transition: right .5s; */ } .new-gnb .gnb3depth { position: static !important; background: #f9f9f9; border-radius: 5px;} .new-gnb .gnb3depth_m { background: #f9f9f9; border-radius: 5px;} .new-gnb .gnb3depth > ul.onDepth > li {width: auto;} .new-gnb .gnb3depth:not(.new-prd-list) > ul > li { padding-left: 0; padding-right: 0px; } .new-gnb .gnbBanner { position: static; width: auto; padding: 36px 0px 60px; border: 0; margin-left:5% } .new-gnb .gnbBanner a { width: 100%; max-width: 100%; padding: 0; font-weight: bold; } .new-gnb .gnbBanner .img {width: 100%; height: 100%;} .new-gnb .mob-onlyMenu { display: block !important; /* margin-top: 36px; 220729 수정 */ padding: 36px 0; /* 210625 */ /* border-top: 1px solid #ddd; 220729 수정 */ position: relative; /* 220729 추가 */ } .new-gnb .mob-onlyMenu .welcomeMsg { padding-bottom: 10px; font-size: 20px; font-weight: bold; line-height: 40px; } .new-gnb .mob-onlyMenu .welcomeMsg span { font-size: inherit; font-weight: inherit; vertical-align: baseline; }/* 22-08-04 KDP-15480 */ #header .header-right { position: absolute; top: 0; right: 12px; } /* 220729 추가 */ #header .new-gnb .mob-onlyMenu::before {content: '';display: block;position: absolute;width: 100vw;top: 0;bottom: 0;left: 0px;background: #f3f3f3;z-index: -1;} #header .new-gnb .mob-onlyMenu > li > a {display: inline-block;vertical-align: middle;} .new-gnb .mob-onlyMenu.loginBefore li::before, .new-gnb .mob-onlyMenu.loginAfter li::before {content: '';display: inline-block;vertical-align: middle;width: 33px;height: 33px;margin-right: 22px;background-position: center center;} .new-gnb .mob-onlyMenu.loginBefore li.mob-onlyMenu-login::before {background-image: url("/sec/static/_images/common/icon-gnb-user.svg");} .new-gnb .mob-onlyMenu.loginBefore li.mob-onlyMenu-find::before {background: url("/sec/static/_images/common/icon-gnb-find-ac.svg") center center no-repeat; background-size: 31px 31px;} .new-gnb .mob-onlyMenu.loginBefore li.mob-onlyMenu-join::before {background-image: url("/sec/static/_images/common/icon-gnb-joinMembership.svg");} .new-gnb .mob-onlyMenu.loginBefore li.mob-onlyMenu-tracking::before {background-image: url("/sec/static/_images/common/icon-gnb-shipping.svg");} .new-gnb .mob-onlyMenu.loginBefore li.mob-onlyMenu-stoConsult::before {background-image: url("/sec/static/_images/common/icon-gnb-customerService.svg");} .new-gnb .mob-onlyMenu.loginBefore li.mob-onlyMenu-cpnZone::before {background-image: url("/sec/static/_images/common/icon-gnb-coupon.svg");} .new-gnb .mob-onlyMenu.loginBefore li.mob-onlyMenu-benefit::before {background-image: url("/sec/static/_images/common/icon-gnb-benefitZone.svg");} .new-gnb .mob-onlyMenu.loginAfter li.welcomeMsg::before {background-image: url("/sec/static/_images/common/icon-gnb-user.svg");} #header .new-gnb .mob-onlyMenu.loginAfter li.welcomeMsg a {font-weight: bold;font-size: 20px;} .new-gnb .mob-onlyMenu.loginAfter li.mob-onlyMenu-myinfo::before {background-image: url("/sec/static/_images/common/icon-gnb-myInfo.svg");} .new-gnb .mob-onlyMenu.loginAfter li.mob-onlyMenu-myDeviceList::before { background-image: url(/sec/static/_images/common/icon-gnb-myDvce.svg); } .new-gnb .mob-onlyMenu.loginAfter li.mob-onlyMenu-prdctRvw::before {background-image: url("/sec/static/_images/common/icon-gnb-productReviews.svg");} .new-gnb .mob-onlyMenu.loginAfter li.mob-onlyMenu-tracking::before {background-image: url("/sec/static/_images/common/icon-gnb-shipping.svg");} .new-gnb .mob-onlyMenu.loginAfter li.mob-onlyMenu-cpnZone::before {background-image: url("/sec/static/_images/common/icon-gnb-coupon.svg");} .new-gnb .mob-onlyMenu.loginAfter li.mob-onlyMenu-benefit::before {background-image: url("/sec/static/_images/common/icon-gnb-benefitZone.svg");} .new-gnb .mob-onlyMenu.loginAfter li.mob-onlyMenu-logout::before {background-image: url("/sec/static/_images/common/icon-gnb-logout.svg");} /*** * 이 위로는 Pc * ** * * * * 여기부터 태블릿 ***/ @media all and (max-width:1280px) and (min-width: 768px) { /* wrap */ #header{position: relative; width: 100%;height: 56px; z-index: 100; border-bottom: 1px solid #eee; background: #fff;} #header .header__inner{width: 100%; height: 100%; display: flex; align-items: center; padding-top: 0; justify-content: space-between; padding: 0 2vw;} .topbanner .family-point-wrap {z-index: 100;}/* b2b2c 231107 추가 */ .topbanner .family-point-wrap.only-show {z-index: 100;}/* b2b2c 231107 추가 */ /* logo */ #header .logo{display: flex;align-items: center;} #header .logo a{display: inline-block; padding-left: 0;} #header .logo a img{width: 80%;} /* search */ #header .s-inner .search__box{display: none;} /* uitlity */ #header .utility__wrap{ width: auto; margin-right: 1vw;} #header .utility__wrap > div{ display: flex; height: 100%; margin-left: 3vw;} #header .utility__wrap > div > button {width: auto; height: auto;} #header .utility__wrap > div > button img {width:26px;} #header .utility__wrap .utility__button__search {display: none;} #header .utility__wrap .utility__button__user{display: none;} #header .utility__wrap .utility__button__search__m, #header .utility__wrap .utility__button__barcode__m, #header .utility__wrap .utility__button__menu__m {display: flex;} #header .utility__button__cart .cart__list{position: fixed; top: 56px; left: 0; right: 0; width: 100%; max-height: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; transition: all 0s;} #header .utility__button__cart .cart__list > *{opacity: 0; transform: translateY(-10%);} #header .utility__button__cart.active .cart__list{max-height: 100vh; transition: .5s cubic-bezier(0.6,0,0.4,1); } #header .utility__button__cart.active .cart__list > *{opacity: 1; transition-delay: 1s; transition: .8s cubic-bezier(0.6,0,0.4,1); transform: translateY(0);} #header .utility__button__cart.active .cart__list ul {display: grid; grid-template-columns: 1fr 1fr;} /* menu */ #header .menu__wrap {position: fixed; top: 0; right: -100%; width: 360px; height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #fff; display: flex; flex-direction: column; justify-content: start; transition: 0.3s cubic-bezier(0.6,0,0.4,1); z-index: 1;} #header .menu__head {display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 0; background: #fff; z-index: 1;} #header .menu__head .menu__back__button{visibility: hidden; transition: 0.3s cubic-bezier(0.6,0,0.4,1); margin-right: 14px; margin-left: -40px;} #header .menu__head .menu__back__button.active{visibility: visible; margin-left: 0; } #header .menu__head .search__box{width: 100%;height: auto; background: #F5F5F5; display: flex; justify-content: space-between; align-items: center; padding: 3px 15px; box-sizing: border-box; border-radius: 10.2564vw; box-sizing: border-box;} #header .menu__head .search__box ul{width: 70%;} #header .menu__head .search__box ul li{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;} #header .menu__head .search__box ul li a{font-size: 16px;} #header .menu__head .search__box > button{width: 30px; height: 30px;} #header .menu__head .menu__close__button {margin-left: 14px;} #header .menu__head .head__top {display: flex; justify-content: center; align-items: center; height: 55px; padding: 0 12px;} #header .menu__head .head__bottom span.icon-user{display: inline-block; width: 30px; height: 30px; background: url('/sec/static/_images/gnb/icon-user.svg') center center no-repeat; margin-right: 16px;} #header .menu__head .head__button__wrap{display: flex; justify-content: center; align-items: center;} #header .menu__head .head__button__wrap > button{flex: 0 0 auto; width: 24px; height: 24px; position: relative; margin-left: 14px;} #header .menu__cart__button .cart__count{display: flex; justify-content: center; align-items: center; width:16px; height: 16px; position:absolute; top: -4px; right: -5px; background: #2188FF;border-radius: 50%;color:#fff; font-size: 11px; } #header .login__join__wrap{display: block; margin: 0 12px;} #header .login__join__wrap a{display: flex; padding: 20px 0; font-size: 20px; font-weight: 700; align-items: center;} #header .menu__wrap ul.menu__list { flex-direction: column; } #header ul.menu__list {background: #f3f3f3;} #header ul.menu__list li.menuitem__l0{position: initial; padding-left: 8px;} #header ul.menu__list li.menuitem__l0 .item__button{padding: 18px 12px; font-size: 14px; font-weight: 700; color: #999; width: 40%; font-size: 16px; line-height: 16px;} #header ul.menu__list li.menuitem__l0 .item__button::after{display: none; content:''; width: 4.1026vw; height: 4.1026vw; background: url('/sec/static/_images/gnb/icon-gnb-arrow.svg') center center no-repeat; margin-left: auto;} #header ul.menu__list li.menuitem__l0 .item__button:hover{background: inherit; color: inherit} #header ul.menu__list li.menuitem__l0 .menuitem__l1__container {position: absolute; top:0; width: 60%; padding-bottom: 0;} #header ul.menu__list li.menuitem__l0.active .menuitem__l1__container { right: 0; height: 100%; z-index: 0; visibility: visible; max-height: fit-content;} #header ul.menu__list li.menuitem__l0.active .item__button{background: #fff; color: #000; border-top-right-radius: 0; border-bottom-right-radius: 0; font-weight: 700;} #header ul.menu__list li.menuitem__l0.list__right{margin-left: 0;} #header ul.menu__list li.menuitem__l0.list__divide > a{margin-left: 0;} #header ul.menu__list li.menuitem__l0.list__divide > a::before{display: none;} #header .menuitem__l1__container {display: block; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-x: hidden; position: fixed; left: auto; right: -100%; width: 360px; background: #fff; z-index: 0; border-radius: 0; flex-direction: column; padding: 0; /*transition: 0.3s cubic-bezier(0.6,0,0.4,1);*/ padding-bottom: 56px;} #header .menuitem__l1__container.active { right: 0; height: 100%; z-index: 1; visibility: visible;} #header .menuitem__l1__container .l1__title.m-only{display: none; width: auto; padding: 24px 0; font-size: 22px; border-bottom: 1px solid #ddd; margin: 0 12px; box-sizing: border-box;} #header .menuitem__l2__wrap {width: 100%; padding-right: 0; padding-top: 6px; margin-bottom: 10px;} #header .menuitem__l2__wrap ul.menuitem__l2__list {width: 100%; } #header .menuitem__l2__wrap ul.menuitem__l2__list li {width: 100%; padding: 12px 16px; background: #fff;} #header .menuitem__l2__wrap ul.menuitem__l2__list li > a {font-size: 16px; line-height: 16px; font-weight: 700;} #header .menuitem__l2__wrap ul.menuitem__l2__list li > a > b{font-size: 14px;} #header .menuitem__l2__wrap.type__table{position: relative; width: auto; padding: 0 0 20px 0; border-left: 0 none; padding-top: 0; display: flex; overflow-x: scroll; flex-wrap: nowrap; width: 100%;} #header .menuitem__l2__wrap.type__table p::after{display: none;} #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li .badge {padding: 1px 6px; font-size: 11px; top: 10px; left: 10px; margin-left: 0;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider{display: flex; flex: 0 0 auto; width: calc(535px + 72px); flex-wrap: wrap; margin-left: 16px; flex-direction: row; justify-content: start;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider li{width: 107px; background: none;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider li > a { width: 107px; height: 120px; text-align: center;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider li > a > img { width: 100%; } #header .menuitem__l2__wrap.type__table ul.menuitem__slider li > a > p {font-size: 12px; line-height: 1rem; } #header .menuitem__l2__wrap.type__table .slider__button__wrap{display: none; position: absolute; top:0; left:0; width: 100%;} #header .menuitem__l2__wrap.type__table .slider__button__wrap .slider__button{position: absolute; top: 0; display: flex; justify-content: center; align-items: center; width: 30px; height: 250px; background: red; z-index: 1;} #header .menuitem__l2__wrap.type__table .slider__button__wrap .prev__button{left: 0; transform: rotate(180deg); background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 100%);} #header .menuitem__l2__wrap.type__table .slider__button__wrap .next__button{right: 0; background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 100%);} #header .menuitem__l2__wrap.type__table .slider__bar {display: none; margin: 9px 0 9px 16px; background-color: #F0F0F0; overflow: hidden; } #header .menuitem__l2__wrap.type__table .slider__bar, #header .menuitem__l2__wrap.type__table .slider__bar .gauge{ height: 6px; } #header .menuitem__l2__wrap.type__table .slider__bar .gauge { background: #2189FF; } #header .menu__wrap .user__mypage__list{display: flex; /*display: none;*/ flex-direction: column; padding: 34px 12px 10px; background: #F3F3F3; padding: 19px 25px; border-top: 1px solid rgba(0, 0, 0, 0.2);} #header .menu__wrap .user__mypage__list p{display: block; font-size: 22px; font-weight: 700; margin-bottom: 10px;} #header .menu__wrap .user__mypage__list p > span{ display: inline-block; font-size: 22px; font-weight: 700; vertical-align: baseline;} #header .menu__wrap .user__mypage__list ul{display: flex; flex-direction: column; justify-content: center; width: 100%;} #header .menu__wrap .user__mypage__list ul li.logout{border-top: 1px solid #ddd; padding-top: 10px;} #header .menu__wrap .user__mypage__list ul li a{display: flex; padding: 10px 0; font-size: 16px; align-items: center;} #header .menu__wrap .user__mypage__list ul li a > img{width: 24px; margin-right: 12px;} #header .menu__wrap .user__mypage__list ul li a > span{font-size: inherit; padding-left: 1.2vw; color: #2188FF;} #header .menu__wrap ul.menu__list {position: relative;} #header .add__contents__wrap{display: block; background: #F7F7F7;} #header #addContents__slider{display: flex; width: 100%; overflow-x: scroll; padding: 14px 0 8px 14px;} #header #addContents__slider li{width: 22%; flex: 0 0 auto; padding: 0 6px;} #header #addContents__slider li a{display: inline-block; display: flex; flex-direction: column; align-items: center;} #header #addContents__slider .imgform{display: inline-block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden;} #header #addContents__slider p{ padding-top: 12px; text-align: center; font-size: 12px; font-weight: bold; line-height: 16px;} #header #addContents__slider::-webkit-scrollbar {height: 4px; /* 스크롤바의 너비 */} #header #addContents__slider::-webkit-scrollbar-thumb {height: 30%; /* 스크롤바의 길이 */ background: #999; border-radius: 10px;} #header #addContents__slider::-webkit-scrollbar-track {background: #eee; /*스크롤바 뒷 배경 색상*/} #header .login__join__wrap, #header .login__user__wrap{display: block; margin: 0 20px; padding: 9px 0 18px;} #header .login__join__wrap > a{padding: 0;} #header .login__user__wrap a{display: flex;font-size: 16px;align-items: center; font-weight: 700;} #header .login__user__wrap a > span{font-size: inherit; padding-left: 5px; font-weight: 700;} #header .new-gnb .prd-list-wrap { width:calc(535px + 72px); justify-content:flex-start } #header .new-gnb .prd-list-wrap .sub-prd a .pic-wrap img { width: 100%; } #header .new-gnb .prd-list-wrap .sub-prd .txt-grp { font-size: 12px;} } /*** * 이 위로는 태블릿 * * * * * 여기부터 모바일 ***/ @media all and (max-width: 767px) { /* wrap */ #header{position: relative; width: 100%;height: 56px; z-index: 100; border-bottom: 1px solid #eee; background: #fff;} #header .s-inner{width: 100%; height: 100%; display: flex; align-items: center; padding-top: 0; justify-content: space-between; padding: 0 4.1026vw;} #header .new-gnb { width: 100%;} /* KDP-41767 닷컴향 신 GNB 도입 */ #header.open_mo{z-index: 235;} .family-point-wrapper + #header .utility__button__cart.active .cart__list {top: 85px;} .family-point-wrapper ~ #header .utility__button__cart.active .cart__list{top: 85px;} .family-point-wrapper + .string-banner-wrap ~ #header .utility__button__cart.active .cart__list {top: 128px;} /* logo */ #header .logo{display: flex;align-items: center;} #header .logo a{display: inline-block; padding-left: 0;} #header .logo a img{width:93%;} /* b2b2c logo 231107 추가 */ #header .logoCollabo .firstLogo img {max-height: 20px;} #header .logoCollabo .crossIcon {height: 20px;margin: 0 5px;} /* search */ #header .s-inner .search__box{display: none;} /* uitlity */ #header .utility__wrap { width: auto; margin-right: 1.5vw; } #header .utility__wrap > div{ display: flex; height: 100%; align-items: center;} #header .utility__wrap > div > button{ width: 6.1538vw; height: 6.1538vw; } #header .utility__wrap .utility__button__search {display: none;} #header .utility__wrap .utility__button__user{display: none;} #header .utility__wrap .utility__button__search__m, #header .utility__wrap .utility__button__barcode__m, #header .utility__wrap .utility__button__menu__m {display: flex;} #header .utility__button__cart .cart__list{position: fixed; top: 56px; left: 0; right: 0; width: 100%; max-height: 0; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; transition: all 0s;} #header .utility__button__cart .cart__list > *{opacity: 0; transform: translateY(-10%);} #header .utility__button__cart.active .cart__list{max-height: 100vh; transition: .5s cubic-bezier(0.6,0,0.4,1); } #header .utility__button__cart.active .cart__list ul{height: 40vh; overflow-y: scroll; -webkit-overflow-scrolling: touch;} #header .utility__button__cart.active .cart__list > *{opacity: 1; transition-delay: 1s; transition: .8s cubic-bezier(0.6,0,0.4,1); transform: translateY(0);} #header .utility__button__cart > button .cart__count{top: -0.5128vw; right: -1.2821vw;} #header .utility__wrap .utility__button__barcode__m > button {width: 7vw; height: 7vw;} /* menu */ .new-gnb .prd-list-wrap div { width: 29vw;} #header .menu__wrap {position: fixed; top: 0; right: -100%; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; background: #fff; display: flex; flex-direction: column; justify-content: start; transition: 0.3s cubic-bezier(0.6,0,0.4,1); z-index: 1;} #header .menu__head {display: flex; flex-direction: column; justify-content: space-between; width: 100%; padding: 0; background: #fff; z-index: 1;} #header .menu__head .head__top {display: flex; justify-content: center; align-items: center; padding: 2.0513vw 3.5897vw;} #header .menu__head .head__bottom span.icon-user{display: inline-block; width: 35px; height: 35px; background: url('/sec/static/_images/gnb/icon-user.svg') center center no-repeat; background-size: cover; margin-right: 16px;} #header .menu__head .head__button__wrap{display: flex; justify-content: center; align-items: center;} #header .menu__head .head__button__wrap > button {flex: 0 0 auto; width: 6.6667vw; height: 6.6667vw; position: relative; margin-left: 3.5897vw;} #header .menu__head .head__button__wrap > button img {width: 26px;} #header .menu__head .menu__back__button{visibility: hidden; transition: 0.3s cubic-bezier(0.6,0,0.4,1); margin-right: 3.5897vw; margin-left: -10.2564vw;} #header .menu__head .menu__back__button.active{visibility: visible; margin-left: 0; } #header .menu__head .search__box{width: 100%;height: auto; background: #F5F5F5; display: flex; justify-content: space-between; align-items: center; padding: 1.7949vw 3.5897vw; box-sizing: border-box; border-radius: 10.2564vw; box-sizing: border-box;} #header .menu__head .search__box ul{width: 70%;} #header .menu__head .search__box ul li{overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;} #header .menu__head .search__box ul li a{font-size: 3.5897vw;} #header .menu__head .search__box ul li a > b{font-size: inherit;} #header .menu__head .search__box > button{width: 6.6667vw; height: 6.6667vw;} #header .menu__head .menu__close__button {margin-left: 3.5897vw;} #header .login__join__wrap{display: block; border-bottom: 1px solid #ddd; margin: 0 3.0769vw;} #header .login__join__wrap a{display: flex; padding: 7.1795vw 0; font-size: 5.1282vw; align-items: center; font-weight: 700; min-height: 7.6923vw;} #header .menu__wrap ul.menu__list { flex-direction: column; position: relative;} #header ul.menu__list {background: #eee;} #header ul.menu__list li.menuitem__l0{position: initial; padding-left: 2.0513vw;} #header ul.menu__list li.menuitem__l0 .item__button{width: 40%; padding: 4.3590vw 3.0769vw 4.3590vw 3.0769vw; font-size: 4.1026vw; font-weight: 700; color: #999; line-height: 1rem;} #header ul.menu__list li.menuitem__l0 .item__button::after{display: none; content:''; width: 4.1026vw; height: 4.1026vw; background: url('/sec/static/_images/gnb/icon-gnb-arrow.svg') center center no-repeat; margin-left: auto;} #header ul.menu__list li.menuitem__l0 .item__button:hover{background: inherit; color: inherit} #header ul.menu__list li.menuitem__l0.list__divide a{margin-left: 0;} #header ul.menu__list li.menuitem__l0.list__divide a::before{display: none;} #header ul.menu__list li.menuitem__l0.list__right{margin-left: 0;} #header ul.menu__list li.menuitem__l0 .menuitem__l1__container {position: absolute; top:0; width: 60%; padding-bottom: 0;} #header ul.menu__list li.menuitem__l0.active .menuitem__l1__container { right: 0; height: 100%; z-index: 0; visibility: visible; max-height: fit-content; border: 0 none;} #header ul.menu__list li.menuitem__l0.active .item__button{background: #fff; color: #000; border-top-right-radius: 0; border-bottom-right-radius: 0; font-weight: 700; padding: 4.3590vw 3.0769vw;} #header .menuitem__l1__container {display: block; overflow-y: scroll; -webkit-overflow-scrolling: touch; overflow-x: hidden; position: fixed; left: auto; right: -100%; width: 100%; background: #fff; z-index: 0; border-radius: 0; flex-direction: column; padding: 0; /*transition: 0.3s cubic-bezier(0.6,0,0.4,1);*/ padding-bottom: 14.3590vw;} #header .menuitem__l2__wrap {width: 100%; padding: 1.5385vw 0 0;} #header .menuitem__l2__wrap ul.menuitem__l2__list {overflow: hidden; } #header .menuitem__l2__wrap ul.menuitem__l2__list.open {display: none; width: 100%;} #header .menuitem__l2__wrap ul.menuitem__l2__list li {width: 100%; padding: 3.5897vw 3.8462vw;} #header .menuitem__l2__wrap ul.menuitem__l2__list li > a {font-size: 4.1026vw;} #header .menuitem__l2__wrap ul.menuitem__l2__list li > a > b{font-size: 3.8462vw;} #header .menuitem__l2__wrap.type__table{position: relative; padding: 0 0 5.1282vw 0; width: auto; border-left: 0 none; display: flex; overflow-x: scroll; flex-wrap: nowrap; width: 100%; } #header .menuitem__l2__wrap.type__table ul.menuitem__l2__list li .badge {margin-left: 0; top: 2.5641vw; left: 3.0769vw; padding: 0.5128vw 2.0513vw; font-size: 2.8205vw;} #header .menuitem__l2__wrap.type__table > p {padding: 3.8462vw; font-size: 3.8462vw; line-height: 3.8462vw; box-shadow: 0 0.5128vw 2.5641vw rgba(0, 0, 0, 0.1)} #header .menuitem__l2__wrap.type__table p::after{display: none;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider{display: flex; flex: 0 0 auto; width: calc(147.79vw + 72px); flex-wrap: wrap; margin-left: 16px; flex-direction: row; justify-content: start;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider .slick-list{overflow: visible;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider .slick-slide{margin: 0 3.0256vw;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider li{width: 29.5580vw; background: none;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider li > a { width: 29.5580vw; height: 33.1492vw; text-align: center;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider li > a > img { width: 100%;} #header .menuitem__l2__wrap.type__table ul.menuitem__slider li > a > p {font-size: 3.0769vw;} #header .menuitem__l2__wrap.type__table .slider__button__wrap{display: none; position: absolute; top:0; left:0; width: 100%;} #header .menuitem__l2__wrap.type__table .slider__button__wrap .slider__button{position: absolute; top: 0; display: flex; justify-content: center; align-items: center; width: 30px; height: 69vw; background: red; z-index: 1;} #header .menuitem__l2__wrap.type__table .slider__button__wrap .prev__button{left: 0; transform: rotate(180deg); background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 100%);} #header .menuitem__l2__wrap.type__table .slider__button__wrap .next__button{right: 0; background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,1) 100%);} #header .menuitem__l2__wrap.type__table .slider__bar {display: none; margin: 2.7778vw 0 2.7778vw 3.0769vw; background-color: #F0F0F0; overflow: hidden; } #header .menuitem__l2__wrap.type__table .slider__bar, #header .menuitem__l2__wrap.type__table .slider__bar .gauge{ height: 1.5385vw; } #header .menuitem__l2__wrap.type__table .slider__bar .gauge { background: #2189FF; } #header .menu__wrap .user__mypage__list{display: flex; /*display: none;*/ flex-direction: column; background: #f5f5f5; position: relative; padding: 4.8718vw 6.4103vw; border-top: 1px solid rgba(0, 0, 0, 0.2);} #header .menu__wrap .user__mypage__list p{display: block; font-size: 5.6410vw; font-weight: 700; margin-bottom: 2.5641vw;} #header .menu__wrap .user__mypage__list p > span{ display: inline-block; font-size: 5.6410vw; font-weight: 700; vertical-align: baseline;} #header .menu__wrap .user__mypage__list ul{display: flex; flex-direction: column; justify-content: center; width: 100%;} #header .menu__wrap .user__mypage__list ul li.logout{border-top: 1px solid #ddd; padding-top: 2.5641vw;} #header .menu__wrap .user__mypage__list ul li a{display: flex; padding: 2.5641vw 0; font-size: 4.1026vw; align-items: center;} #header .menu__wrap .user__mypage__list ul li a > img{width: 6.6923vw; margin-right: 3.0769vw;} #header .menu__wrap .user__mypage__list ul li a > span{font-size: inherit; padding-left: 1.2vw; color: #2188FF;} #header .menuitem__l1__container .l1__title.m-only{display: none; width: auto; padding: 6.1538vw 0; font-size: 5.6410vw; border-bottom: 1px solid #ddd; margin: 0 3.0769vw; box-sizing: border-box;} #header .add__contents__wrap{display: block; background: #F7F7F7;} #header #addContents__slider{display: flex; width: 100%; overflow-x: scroll; padding: 3.5897vw 2.5641vw;} #header #addContents__slider li{width: 22%; flex: 0 0 auto; padding: 0 1.5385vw;} #header #addContents__slider li a{display: inline-block; display: flex; flex-direction: column; align-items: center;} #header #addContents__slider .imgform{display: inline-block; width: 16.4103vw; height: 16.4103vw; border-radius: 50%; overflow: hidden;} #header #addContents__slider p{ padding-top: 3.0769vw; text-align: center; font-size: 3.0769vw; font-weight: bold; line-height: 4.1026vw;} #header .login__join__wrap, #header .login__user__wrap{display: block; margin: 0 5.1282vw; border: 0 none; padding: 4.0256vw 0 2.5641vw;} #header .login__join__wrap > a{padding: 0;} #header .login__user__wrap a{display: flex; font-size: 4.1026vw;align-items: center; font-weight: 700;} #header .login__user__wrap a > span{font-size: inherit; padding-left: 1.2821vw; font-weight: 700;} #header .menu__cart__button .cart__count{display: flex; justify-content: center; align-items: center; width:4.1026vw; height: 4.1026vw; position:absolute; top: -1.0256vw; right: -1.2821vw; background:#2188FF;border-radius: 50%;color:#fff; font-size: 2.5641vw; } #header .gnb > ul > li > a, #header .new-gnb .gnb1depth li > a, #header .gnb > ul > li > a, #header .new-gnb .gnb2depth li > a { font-size: 4.1026vw;} #header .gnb > ul > li > a, #header .new-gnb .gnb3depth li > a { font-size: 3.58vw;} #header .new-gnb .prd-list-wrap { width:calc(147.79vw + 72px); justify-content:flex-start } #header .new-gnb .prd-list-wrap .sub-prd { width: 29.558vw;} #header .new-gnb .prd-list-wrap .sub-prd a { width: 29.558vw; height: 33.1492vw; } #header .new-gnb .prd-list-wrap .sub-prd a .pic-wrap img { width: 100%; } #header .new-gnb .prd-list-wrap .sub-prd .txt-grp { font-size: 3.0769vw;} } @media all and (max-width: 530px) { /*#header .logo img { height: 18px; } 20201022 20 > 18 로고 사이즈 수정 */ #header .logo.familyLogo img { height: 23px; } /* 201026 패밀리넷 로고 */ #header .logoCollabo .firstLogo img {max-height: 20px; } #header .logoCollabo .crossIcon {height: 20px; margin:0 5px;} #header .new-gnb {width: 100%;} .new-gnb .gnb2depth, .new-gnb .gnb3depth, .new-gnb .rel .gnb4depth { position: fixed; width: 100%; top: 56px; } } @media (max-width: 414px) { .new-gnb .mob-onlyMenu {padding: 8.8889vw 0 4.1667vw 0;} .new-gnb .mob-onlyMenu.loginBefore li::before, .new-gnb .mob-onlyMenu.loginAfter li::before {margin-right: 5vw;} } /* 갤럭시 폴드 */ @media screen and (max-width:300px) { #header .gnb{width:100%;} #header .menu__head .search__box ul li a {font-size: 4vw;} #header .menu__head .head__top{padding: 4.6429vw 3.5897vw;} #header .menu__head .head__bottom span.icon-user {width: 10.7143vw; height: 10.7143vw; margin-right: 3.5714vw;} #header .menuitem__l2__wrap > p.l2__title::after{width: 6vw; height: 6vw; background-size:contain;} #header .utility__wrap > div {margin-left: 4.6429vw;} #header .utility__wrap > div > button{width: 6.6667vw; height: 6.6667vw;} #header .utility__button__cart .cart__list {padding: 5.0000vw 1.4286vw 5.0000vw 5.0000vw;} #header .utility__button__cart .cart__list ul li a > img {width: 30vw;} #header .utility__button__cart .cart__list .cart__prod__info .cart__name {font-size: 1rem;} #header .utility__button__cart .cart__list .cart__prod__info .cart__price {font-size: 0.9rem; padding-top: 1.7857vw;} #header .utility__wrap .utility__button__barcode__m > button {width: 7.4vw; height: 7.4vw;} #header .menu__cart__button .cart__count, #header .utility__button__cart > button .cart__count {width: 5.0000vw; height: 5.0000vw; font-size: 3.5714vw; top: -1.4286vw; right: -1.4286vw;} #header .menuitem__l2__wrap ul.menuitem__l2__list li > a {font-size: 4vw;} #header ul.menu__list li.menuitem__l0 .item__button, #header ul.menu__list li.menuitem__l0.active .item__button, .new-gnb .prd-list-wrap .sub-prd {} #header .menu__wrap .user__mypage__list ul li a {font-size: 4vw;} #header .new-gnb .prd-list-wrap { width:calc(157.79vw + 72px);} } /*** * * * * * * * * * * * * * * * * * * ***/ /* 통합검색 결과 */ /* 해당 내용 중복 으로 삭제 */