/********* * 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; } .string-banner-wrap{z-index: 110 !important;} .cod05-app-banner{background: #fff; z-index: 100;} .m-only {display: none;} /* wrap */ #header__navi{position: relative; width: 100%; height: 106px; z-index: 111;} #header__navi .header__navi__inner{position: relative; width: 100%; border-bottom: 1px solid #ddd; padding-top: 48px; background: #fff; transition: background-color .2s linear, transform .5s cubic-bezier(0.35,0,0.36,1);} #header__navi .header__bg{display: none; transition: height 0.2s cubic-bezier(0.35, 0, 0.36, 1); position: absolute; left: 0; top: 106px; width: 100%; height: 0; background: #fff;} #header__navi.close-gnb .header__bg{transition: height 0.3s cubic-bezier(0.35, 0, 0.36, 1);} #header__navi .header__inner{max-width: 1440px; margin: 0 auto; display: flex; padding: 0 24px;} /* logo */ #header__navi .logo{height: 57px; padding: 12px 52px 12px 0;} #header__navi .logo a{display: inline-block;} #header__navi .logo a > img{width: 100%;} #header__navi .logo a > svg{vertical-align: top;} /* search */ #header__navi .header__inner .search__btn{width: 176px; height: 42px; background: #F7F7F7; display: flex; align-items: center; padding: 11px 17px 10px; box-sizing: border-box; border-radius: 40px; box-sizing: border-box; border: 1px solid #f7f7f7; cursor: pointer; text-align: left;} #header__navi .header__inner .search__btn:hover{border-color: rgba(0, 0, 0, 0.2);} #header__navi .header__inner .search__btn > p{order: 2; padding-left: 8px; font-size: 16px; color: #757575;} #header__navi .header__inner .search__btn > svg{order: 1; margin-top: -1px;} /* uitlity */ #header__navi .utility__wrap{position: absolute; left: 0; bottom: 0; width: 100%; height: 0px;} #header__navi .utility__wrap .utility__wrap_inner{display: flex; justify-content: end; width: 100%; max-width: 1440px; margin: 0 auto 0; text-align: right; position: relative; top: -57px; height: 100%; padding-right: 24px;} #header__navi .utility__wrap .utility__wrap_inner > div{display: flex; height: 42px; margin-left: 12px;} #header__navi .utility__wrap > div button > svg{vertical-align: middle;} #header__navi .utility__wrap > div button > img {vertical-align: middle; width: 32px; height: 32px; border-radius: 32px;} #header__navi .utility__wrap .utility__wrap_inner .utility__button__back__m, #header__navi .utility__wrap .utility__wrap_inner .utility__button__home__m, #header__navi .utility__wrap .utility__wrap_inner .utility__button__noti__m, #header__navi .utility__wrap .utility__wrap_inner .utility__button__search__m, #header__navi .utility__wrap .utility__wrap_inner .utility__button__barcode__m, #header__navi .utility__wrap .utility__wrap_inner .utility__button__menu__m {display: none;} #header__navi .utility__button__search{padding-right: 12px;} #header__navi .utility__button__cart{position: relative;} #header__navi .utility__button__cart > button .cart__count{display: flex; justify-content: center; align-items: center; width:16px; height: 16px; position:absolute; top: 3px; right: -8px; background:#EF3434;border-radius: 50%;color:#fff; font-size: 12px; font-weight: 700;} #header__navi .utility__button__cart .cart__list{visibility: hidden; position: absolute; top: 52px; 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__navi .utility__button__cart .cart__noitem{display: block; font-size: 12px; padding: 40px 0;} #header__navi .utility__button__cart .cart__list > button {margin-top: 20px; display: inline-block;} #header__navi .utility__button__cart .cart__list ul{max-height: 500px; overflow-y: auto; -webkit-overflow-scrolling: touch;} #header__navi .utility__button__cart .cart__list ul li{padding-right: 20px; padding: 10px 0;} #header__navi .utility__button__cart .cart__list ul li a{display: flex;} #header__navi .utility__button__cart .cart__list ul li a > img{display: block; width: 70px;} #header__navi .utility__button__cart .cart__list ul::-webkit-scrollbar {width: 6px;} #header__navi .utility__button__cart .cart__list ul::-webkit-scrollbar-thumb {height: 30%; background: #999; border-radius: 10px;} #header__navi .utility__button__cart .cart__list ul::-webkit-scrollbar-track {background: #eee;} #header__navi .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__navi .utility__button__cart .cart__list .cart__prod__info .cart__name{font-weight: 700; font-size: 14px; text-align: left; word-break: break-all;} #header__navi .utility__button__cart .cart__list .cart__prod__info .cart__price{padding-top: 10px; font-size: 14px;} #header__navi .utility__button__cart .cart__list .cart__prod__info .cart__price span{font-size: 14px;} #header__navi .utility__button__user{position: relative; min-width: 32px; justify-content: flex-end;} #header__navi .utility__button__location > button, #header__navi .utility__button__cart > button, #header__navi .utility__button__user > button{position: relative; height: 100%;} #header__navi .utility__button__user .user__list{display: none; position: absolute; top: 52px; 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__navi .utility__button__user .user__list ul{display: flex; flex-direction: column; justify-content: start;} #header__navi .utility__button__user .user__list ul li{display: flex; align-items: center; padding: 10px 0; font-size: 14px; } #header__navi .utility__button__user .user__list ul li:first-child{padding-top: 0;} #header__navi .utility__button__user .user__list ul li:last-child{padding-bottom: 0;} #header__navi .utility__button__user .user__list ul li a{display: inline-block;} #header__navi .utility__button__user .user__list ul li a > img{margin-right: 6px;} #header__navi .utility__button__user .user__list ul li a span{font-size: 14px; color: #2188FF;} #header__navi .utility__button__user .user__list ul li.variety{border-bottom: 1px solid #ddd; padding: 10px 0 18px; margin-bottom: 10px;} #header__navi .utility__button__user .user__list ul li.variety a{display: flex; width: 100%; align-items: center; font-size: 12px;} #header__navi .utility__button__user .user__list ul li.variety a svg:last-of-type{width: 14px; height: 14px; margin-right: 0; margin-left: auto;} #header__navi .user__list .login__user__wrap{display: block;border-bottom: 1px solid #ddd;padding-bottom: 15px; margin-bottom: 15px;} #header__navi .user__list .login__user__wrap a{display: flex; font-size: 14px;align-items: center; font-weight: 700;} #header__navi .user__list .login__user__wrap a > span{font-size: inherit; padding-left: 8px; font-weight: 700;} #header__navi .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;} #header__navi .user__list .login__user__wrap a.variety {padding-top: 14px;} #header__navi .user__list .login__user__wrap a.variety {display: flex; width: 100%; align-items: center; font-size: 12px; font-weight: normal;} #header__navi .user__list .login__user__wrap a.variety svg:last-of-type{width: 14px; height: 14px; margin-right: 0; margin-left: auto;} /* KDP-87891 [퍼블] 루비콘 챗봇 반영 및 ID 기반 노출 제어 & KDP-88347 [퍼블] 루비콘 챗봇 반영 및 ID 기반 노출 제어 */ body[data-pagename="b2c"] #header__navi .utility__wrap .utility__wrap_inner .button__chatbot {min-width:24px} /* menu */ #header__navi .menu__wrap{flex: 1; height: 57px; padding-top: 7px;} #header__navi.transition__none .menu__wrap, #header__navi.transition__none .menu__wrap .menu__wrap__inner, #header__navi.transition__none .menu__wrap .menuitem__l0 .menuitem__l1__container, #header__navi.transition__none .search__area, #header__navi.transition__none .search__area *{transition: none !important;} #header__navi .menu__wrap .menu__wrap__inner{display: flex; justify-content: space-between; height: 100%;} #header__navi ul.menu__list{display: flex; gap: 0 16px; height: 100%;} #header__navi .menu__wrap .menu__wrap__inner > ul.menu__list{float: left; gap: 0 24px; flex-shrink: 0;} #header__navi .sub_menu__list{float: right; height: 48px; margin-top: -55px; flex-shrink: 0;} #header__navi ul.menu__list li.menuitem__l0{color: #000; box-sizing:border-box; } #header__navi ul.menu__list li.menuitem__l0 .item__button{position: relative; display: flex; height: 100%; font-size: 16px; font-weight: 700; cursor: pointer; color: inherit;} #header__navi .menu__wrap .menu__wrap__inner > ul.menu__list li.menuitem__l0 .item__button{line-height: 22px; padding-top: 5px;} #header__navi .sub_menu__list ul.menu__list li.menuitem__l0 .item__button{align-items: center; font-size: 14px;} #header__navi ul.menu__list li.menuitem__l0 .item__button::before{content: ""; z-index: 1; position: absolute; bottom: -1px; width: 100%; height: 2px; background: #000; opacity: 0; transition: opacity 0.2s cubic-bezier(0.35, 0, 0.36, 1);} #header__navi .sub_menu__list ul.menu__list li.menuitem__l0 .item__button::before{bottom: 7px; height: 1px;} #header__navi 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__navi .menuitem__l1__container{ width: 100%; position: absolute; top: 106px; left: 0;} #header__navi .menuitem__l1__container .menuitem__l1__container__inner{max-width: 1440px; margin: 0 auto;} #header__navi .sub_menu__list .menuitem__l1__container .menuitem__l1__container__inner{position: relative; max-width: 1440px; margin: 0 auto;} #header__navi .menuitem__l1__container .menuitem__l2__head{display: none;} #header__navi .menuitem__l1__container .menuitem__l2__wrap{display: flex; padding: 29px 21px 61px;} #header__navi .menuitem__l2__wrap .menuitem__l2__left{flex: 1; display: flex; overflow-x: auto; border-right: 1px solid #ddd; padding: 3px 0 3px 3px;} #header__navi .menuitem__l2__wrap .menuitem__l2__col{flex-shrink: 0;} #header__navi .menuitem__l2__wrap .menuitem__l2__row{font-size: 14px; font-weight: 400; color: #000; line-height: 19px;} #header__navi .menuitem__l2__wrap .menuitem__l2__row + .menuitem__l2__row{margin-top: 48px;} #header__navi .menuitem__l2__wrap .menuitem__l2__row a{display: inline-block; line-height: 19px; font-size: 14px; position: relative;} #header__navi .menuitem__l2__wrap .menuitem__l2__row > a{margin-bottom: 8px; font-weight: 700;} #header__navi .menuitem__l2__wrap .menuitem__l2__row > a[tabindex="-1"]{visibility: hidden; cursor: default; pointer-events: none;} #header__navi .menuitem__l2__wrap .menuitem__l2__row ul.menuitem__l2__list{width: 236px; padding-right: 10px;} #header__navi .menuitem__l2__wrap .menuitem__l2__row:not(.list__thumbnail) ul > li > a{padding: 6px 0;} #header__navi .menuitem__l2__wrap .menuitem__l2__right{position: relative; display: flex; padding: 3px 3px 3px 86px;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list{margin-top: 8px;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul{display: grid; gap: 16px 8px; grid-template-columns: repeat(2, minmax(auto, 168px));} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul[data-repeat="2"]{grid-template-columns: repeat(2, minmax(auto, 168px));} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul[data-repeat="3"]{grid-template-columns: repeat(3, minmax(auto, 168px));} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul[data-repeat="4"]{grid-template-columns: repeat(4, minmax(auto, 168px));} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul[data-repeat="5"]{grid-template-columns: repeat(5, minmax(auto, 168px));} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li {position: relative;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a{overflow: hidden; vertical-align: top;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a .img-box{overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; width: 168px; height: 126px; border-radius: 8px; background: #F7F7F7;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a .img-box img{max-height: 100%; transition: transform 0.5s cubic-bezier(0, 0.18, 0.07, 1);} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a .img-box img.mo{display: none;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a:hover > .img-box img{transform: scale(1.12);} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a > p{margin-top: 8px; font-size: 14px; color: #000; word-break: break-all;} #header__navi .menu__wrap .user__mypage__list{display: none;} /* badge */ #header__navi .menuitem__l2__wrap .menuitem__l2__list li .badge{display: inline-block; position: absolute; top: 6px; left: 6px; font-size: 12px; font-weight: 700; line-height: 16px;} #header__navi .menuitem__l2__wrap .menuitem__l2__list li .badge._blue{color: #006BEA;} #header__navi .menuitem__l2__wrap .menuitem__l2__list li .badge._org{color: #f66700;} #header__navi .menuitem__l2__wrap .menuitem__l2__list li .badge._red{color: #ef3434;} #header__navi .menuitem__l2__wrap .menuitem__l2__list li .badge._green{color: #00838f;} #header__navi .menuitem__l2__wrap .menuitem__l2__list li .badge._sblu{color: #00b3e3;} #header__navi .menuitem__l2__wrap .menuitem__l2__list li .badge._ygrn{color: #97d653;} /* header theme style */ #header__navi.fix .header__navi__inner{position: fixed; top: 0;} #header__navi[data-theme="dark"] .header__navi__inner, #header__navi[data-theme="light"] .header__navi__inner{border-color: transparent; background: transparent;} #header__navi.down .header__navi__inner{transform: translateY(-100%);} #header__navi[data-theme="dark"]:not(.open__gnb) .logo a, #header__navi[data-theme="dark"]:not(.open__gnb) .utility__wrap button > svg{filter: invert(1)} #header__navi[data-theme="dark"]:not(.open__gnb) ul.menu__list li.menuitem__l0 .item__button::before{background: #fff;} #header__navi[data-theme="dark"]:not(.open__gnb) .utility__wrap button{outline-color: #fff !important;} /* 검색창 */ .search__area{position: fixed; right: 0; top: 0; width: 100%; background: #fff; z-index: 55; overflow: hidden; visibility: hidden; transition: opacity 0.4s cubic-bezier(0.35, 0, 0.36, 1), visibility 0.4s cubic-bezier(0.35, 0, 0.36, 1); opacity: 0;} .open__search .search__area{visibility: visible; opacity: 1;} .close__search .search__area{transition: opacity .2s linear .2s, visibility .2s linear .2s, right 0s linear .3s;} .search__area .search__area__inner{max-width: 1440px; width: 100%; margin: 0 auto; padding: 32px 24px 64px;} .search__area .search__input__box{display: flex; align-items: center; position: relative; padding-bottom: 32px; border-bottom: 1px solid #ddd;} .search__area .search__input__box .search__find__btn{order: 1; position: relative; left: 25px; display: flex; align-items: center; height: 42px; justify-content: center; margin-right: 8px; opacity: 0; transition: left .5s cubic-bezier(0.35,0,0.36,1), opacity .2s linear;} .search__area .search__input__box .search__find__btn img{width: 24px;} .search__area .search__input__box .search__input{position: relative; order: 2; flex: 1;} .search__area .search__input__box .search__input::before{content: ""; position: absolute; top: 2px; left: 1px; bottom: 2px; width: 70px; z-index: 1; opacity: 0; pointer-events: none; -webkit-transition: opacity .2s; transition: opacity .2s; background: -webkit-gradient(linear,left top,right top,from(#fff),to(rgba(255,255,255,0))); background: linear-gradient(90deg,#fff 0,rgba(255,255,255,0) 100%);} .search__area .search__input__box.input__overflow .search__input::before{opacity: 1;} .search__area .search__input__box .search__input input{position: relative; left: 25px; text-indent: 0; border: 0; height: 47px; font-size: 36px; font-weight: 700; opacity: 0; transition: left .5s cubic-bezier(0.35,0,0.36,1), opacity .2s linear;} .open__search .search__area .search__input__box .search__find__btn, .open__search .search__area .search__input__box .search__input input, .open__search .search__area .search__input__box.typing button.search__reset__btn{opacity: 1; left: 0;} .search__area .search__input__box .search__input input::placeholder{color: #909090; font-size: 36px; font-weight: 700;} /* KDP-99400 [퍼블] [B2C] 25년 웹접근성 심사 - 색상 변경 */ .search__area .search__input__box button.search__close__btn{order: 4; margin-left: 20px;} .search__area .search__input__box button.search__close__btn img{width: 24px;} .search__area .search__input__box button.search__reset__btn{order: 3; position: relative; left: 25px; font-size: 14px; font-weight: 700; line-height: 19px; margin-left: 20px; padding-bottom: 3px; text-align: left; color: #000; display: none; opacity: 0; transition: left .5s cubic-bezier(0.35,0,0.36,1), opacity .2s linear;} .search__area .search__input__box.typing button.search__reset__btn{display: block;} .search__area .search__input__box button.search__reset__btn::before{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #000;} .search__area .search__inner__content{position: relative; top: -25px; opacity: 0; padding: 0; transition: top .5s cubic-bezier(0.35,0,0.36,1), opacity .2s linear .2s;} .open__search .search__area .search__inner__content{top: 0; opacity: 1;} .close__search .search__area .search__inner__content{top: -100px; transition: top .5s cubic-bezier(0.35,0,0.36,1),opacity .2s linear;} .search__area .search__content__view{margin-top: 32px; display: flex; align-items: flex-start; justify-content: space-between; left: -200vw; top: 0; width: 100%;} .search__area .search__content__view.content__result, .search__area .result .search__inner__content .search__content__view.content__basic, .search__area .no__result .search__inner__content .search__content__view.content__basic, .search__area .no__result .search__inner__content .search__content__view.content__result, .open__search .search__area .no__result .search__inner__content .search__content__view.content__result .content__view__right{position: absolute; visibility: hidden;} .search__area .result .search__inner__content .search__content__view.content__result, .search__area .no__result .search__inner__content .search__content__view.content__result{position: static; left: 0; visibility: visible;} .search__area .none__text{display: none;} .search__area .no__result .none__text{display: block;} .search__area .none__text p{font-size: 16px; font-weight: bold; line-height: 1.33; text-align: left; color: #000; padding: 32px 0 27px;} .search__area .search__content__view .content__view__left{width: 388px; padding-right: 76px; flex-shrink: 0;} .search__area .search__content__view .content__view__inner + .content__view__inner{margin-top: 40px;} .search__area .search__content__view .view__tit__wrap{margin-bottom: 16px;} .search__area .search__content__view .content__view__delete .view__tit__wrap{display: flex; align-items: center;} .search__area .search__content__view .view__tit{display: block; color: #757575; font-size: 14px; font-weight: 700; line-height: 19px;} .search__area .search__content__view .content__view__delete .view__tit__wrap .view__tit{flex: 1;} .search__area .search__content__view .content__view__delete .view__tit__wrap .search__all__delete__btn{flex-shrink: 0; position: relative; font-size: 12px; font-weight: 400; line-height: 16px; margin-left: 16px; color: #757575;} .search__area .search__content__view .content__view__delete .view__tit__wrap .search__all__delete__btn::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #707070;} .search__area .search__content__view .view__txt li{padding: 4px 0;} .search__area .search__content__view .content__view__delete .view__txt li{display: flex; align-items: center;} .search__area .search__content__view .view__txt li a{color: #000; font-size: 16px; font-weight: 700; line-height: 22px; word-break: break-word; display: inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;} .search__area .search__area__inner:not(.no__result) .search__content__view.content__result .view__txt li a{font-weight: 400;} .search__area .search__content__view.content__result .view__txt li a > strong{font-weight: 700; font-size: inherit; vertical-align: unset;} .search__area .search__content__view.content__result .view__txt li a > span{display: inline-block; color: #757575; font-size: inherit; vertical-align: unset;} .search__area .search__content__view .content__view__delete .view__txt li .search__delete__btn{flex-shrink: 0; margin-left: 8px; width: 16px; height: 16px; background: url("/sec/static/_images/gnb/icon-search-delete.svg") center center no-repeat; text-indent: -99999px;} .search__area .search__content__view .content__view__right{flex: 1;} .search__area .result .search__content__view.content__basic .content__view__right{visibility: hidden;} .search__area .search__content__view .view__thumbnail{display: grid; gap: 0 12px; grid-template-columns: repeat(4, 1fr);} .search__area .search__area__inner .view__thumbnail li > a{display: block; width: 100%; height: 100%; font-weight: 700; color: #000;} .search__area .search__content__view .view__thumbnail li > a:hover .img-box img{transform: scale(1.05);} .search__area .search__content__view .view__thumbnail li > a .img-box{position: relative; border-radius: 8px; overflow: hidden; background: #f7f7f7; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;} .search__area .search__content__view .view__thumbnail li > a .img-box img{transition: transform 0.4s cubic-bezier(0.35, 0, 0.36, 1);} .search__area .search__content__view .view__thumbnail li > a > p{margin-top: 16px; font-size: 22px; line-height: 29px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;} .search__area .search__content__view .view__thumbnail li > a > span{display: block; margin-top: 8px; font-size: 16px; font-weight: 400; line-height: 19px;} .search__area .search__content__view .view__thumbnail li > a > strong{display: block; margin-top: 4px; font-size: 20px; line-height: 27px;} @media all and (max-width: 1440px) and (min-width: 1280px) { #header__navi .logo{padding: 12px 3.611111111vw 12px 0;} #header__navi .menu__wrap > ul.menu__list{gap: 0 1.597222222vw;} #header__navi ul.menu__list li.menuitem__l0 .item__button{font-size: 1.111111111vw;} } @media screen and (min-width: 1280px) { #header__navi[data-theme="dark"].open__gnb .header__navi__inner, #header__navi[data-theme="light"].open__gnb .header__navi__inner{background: #fff; border-color: #ddd;} #header__navi[data-theme="dark"]:not(.open__gnb) ul.menu__list li.menuitem__l0 .newtab::after{filter: invert(1)} #header__navi[data-theme="dark"]:not(.open__gnb) ul.menu__list li.menuitem__l0 .item__button{outline-color: #fff !important;} #header__navi[data-theme="dark"]:not(.open__gnb) ul.menu__list li.menuitem__l0, #header__navi[data-theme="dark"]:not(.open__gnb) .header__inner .search__btn > p{color: #fff;} #header__navi[data-theme="dark"]:not(.open__gnb) .header__inner .search__btn{background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2);} #header__navi[data-theme="dark"]:not(.open__gnb) .header__inner .search__btn:hover{border-color: rgba(255, 255, 255, 0.3);} #header__navi[data-theme="light"]:not(.open__gnb) .header__inner .search__btn{background: rgba(247, 247, 247, 0.3); border-color: rgba(0, 0, 0, 0.2);} #header__navi[data-theme="light"]:not(.open__gnb) .header__inner .search__btn:hover{border-color: rgba(0, 0, 0, 0.3);} #header__navi[data-theme="light"]:not(.open__gnb) .header__inner .search__btn > p{color: #000;} #header__navi .menuitem__l2__wrap .menuitem__l2__left::-webkit-scrollbar {width: 6px; height: 6px;} #header__navi .menuitem__l2__wrap .menuitem__l2__left::-webkit-scrollbar-thumb {background: #999; border-radius: 6px;} #header__navi .menuitem__l2__wrap .menuitem__l2__left::-webkit-scrollbar-track {background: #ddd;} #header__navi ul.menu__list li.menuitem__l0.active .item__button::before{opacity: 1;} #header__navi .menuitem__l2__wrap ul:not(.list__thumbnail) li > a:hover{color: #707070;} #header__navi .menuitem__l1__container{overflow: hidden; top: 106px; width: 100%; transition: opacity .2s linear .1s, visibility .2s linear .1s; opacity: 0; visibility: hidden; background: #fff;} #header__navi:not(.transition-none) ul.menu__list li.menuitem__l0.active .menuitem__l1__container{opacity: 1; transition: opacity .2s linear, visibility .2s linear; visibility: visible;} #header__navi .menuitem__l1__container .menuitem__l1__container__inner .menuitem__l2__wrap{opacity: 0; margin-top: -90px; transition: opacity .2s linear, margin-top .2s cubic-bezier(0.35,0,0.36,1);} #header__navi ul.menu__list li.menuitem__l0.active .menuitem__l1__container .menuitem__l1__container__inner .menuitem__l2__wrap{opacity: 1; margin-top: 0;} #header__navi .menuitem__l2__wrap .menuitem__l2__row > a{cursor: default; pointer-events: none;} #header__navi .menuitem__l2__wrap .menuitem__l2__row .menuitem__l2__list{display: block !important;} #header__navi .utility__button__cart.active .cart__list{visibility: visible;} #header__navi .utility__button__user.active .user__list{display: block;} } /*** * 이 위로는 Pc * * * * * * * * * * * * * * * * * * 여기부터 태블릿 ***/ @media all and (max-width:1279px) { /* wrap */ #header__navi, #header__navi .header__navi__inner{height: 64px; padding-top: 0;} #header__navi.down .header__navi__inner{overflow: hidden;} #header__navi .header__inner{width: 100%; height: 100%; align-items: center; justify-content: space-between; padding: 0 16px;} #header__navi .header__bg{display: none;} /* logo */ #header__navi .logo{display: flex;align-items: center;} #header__navi .logo a{padding: 0;} /* uitlity */ #header__navi .utility__wrap{position: static; width: auto; height: auto; padding-right: 0;} #header__navi .utility__wrap .utility__wrap_inner{top: 0; padding-right: 0;} #header__navi .utility__wrap .utility__wrap_inner .utility__button__search__m, #header__navi .utility__wrap .utility__wrap_inner .utility__button__menu__m {display: flex;} #header__navi .utility__wrap .utility__wrap_inner .utility__button__search{display: none;} #header__navi .utility__button__user{justify-content: center; min-width: auto;} #header__navi .utility__button__user .user__button{margin-left: 8px;} #header__navi .utility__button__user .user__button > svg{margin-right: 8px;} #header__navi .utility__wrap .utility__wrap_inner .utility__button__cart{margin-left: 20px;} #header__navi .utility__button__cart .cart__list{display: none;} #header__navi .utility__button__cart .cart__list > *{opacity: 0; transform: translateY(-10%);} #header__navi .utility__button__cart.active .cart__list{max-height: 100vh; transition: .5s cubic-bezier(0.6,0,0.4,1); } #header__navi .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__navi .utility__button__cart .cart__list ul {display: grid; grid-template-columns: 1fr 1fr;} /* KDP-87891 [퍼블] 루비콘 챗봇 반영 및 ID 기반 노출 제어 & KDP-88347 [퍼블] 루비콘 챗봇 반영 및 ID 기반 노출 제어 */ body[data-pagename="b2c"] #header__navi .utility__wrap .utility__wrap_inner .button__chatbot {display:none} /* menu */ #header__navi .menu__wrap{right: -100%; transition: right 0.5s cubic-bezier(0.35,0,0.36,1), visibility 0.5s cubic-bezier(0.35,0,0.36,1);} #header__navi .menu__wrap{visibility: hidden; overflow: hidden; position: fixed; top: 0; width: 360px; height: 100%; padding: 0; background: #fff; z-index: 2;} #header__navi .menu__wrap.active{visibility: visible;} #header__navi .menu__wrap .menu__wrap__inner{position: relative; right: 0; display: block; height: calc(100% - 64px); overflow-x: hidden; overflow-y: auto; transition: right 0.3s cubic-bezier(0.6,0,0.4,1); overscroll-behavior: contain;} #header__navi .menu__wrap.scroll-none .menu__wrap__inner{overflow-y: hidden;} #header__navi .menu__wrap.scroll-none .menu__wrap__inner::-webkit-scrollbar{background: transparent;} #header__navi .menu__wrap.step2 .menu__wrap__inner{right: 100%;} #header__navi .menuitem__l1__container{right: -100%; transition: right 0.3s cubic-bezier(0.6,0,0.4,1), visibility 0.3s cubic-bezier(0.6,0,0.4,1);} #header__navi .sub_menu__list .menuitem__l1__container .menuitem__l1__container__inner{height: 100%;} #header__navi .menu__head .head__top {display: flex; justify-content: center; align-items: center; width: 100%; height: 64px; padding: 0 16px; background: #fff;} #header__navi .menu__head .search__btn{width: 100%; padding: 7px 17px;} #header__navi .menu__head .search__btn ul li a{font-size: 16px;} #header__navi .menu__head .search__btn button > svg{vertical-align: middle;} #header__navi .menu__head .head__button__wrap > button{flex: 0 0 auto; width: 24px; height: 42px; position: relative; margin-left: 14px;} #header__navi .menu__head {display: block;} #header__navi .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__navi .menu__head .menu__back__button.active{visibility: visible; margin-left: 0; } #header__navi .head__bottom{padding: 0 24px;} #header__navi .head__bottom a{padding: 8px 0; font-size: 16px; line-height: 21px;} #header__navi .login__user__wrap, #header__navi .login__user__wrap > a{padding: 0;} #header__navi .login__user__wrap a{display: flex;font-size: 16px;align-items: center; font-weight: 700;} #header__navi .login__user__wrap a span{font-size: inherit; padding-left: 5px; font-weight: 700;} #header__navi .login__join__wrap{margin: 0; padding: 0;} #header__navi .login__join__wrap a{display: flex; font-weight: 700; align-items: center;} #header__navi .login__join__wrap a .user_icon{width: 32px; height: 32px; border-radius: 32px; margin-right: 8px;} #header__navi .login__join__wrap a span{font-size: inherit; font-weight: 700;} #header__navi .menu__wrap .menu__wrap__inner > ul.menu__list {float: none; flex-direction: column; gap: 0; height: auto; margin: 8px 24px 0; padding: 8px 0 0; border-top: 1px solid #ddd;} #header__navi .menu__wrap .sub_menu__list{float: none; display: block; height: auto; margin-top: 0; padding-right: 0;} #header__navi .menu__wrap .sub_menu__list .menu__list{flex-direction: column; margin: 16px 24px 0; padding: 16px 0 0; border-top: 1px solid #ddd;} #header__navi .menu__wrap ul.menu__list li.menuitem__l0{padding: 0;} #header__navi ul.menu__list li.menuitem__l0 .item__button{align-items: center; padding: 8px 0;} #header__navi .menu__wrap .menu__wrap__inner > ul.menu__list li.menuitem__l0 .item__button{font-size: 24px; font-weight: 700; line-height: 32px;} #header__navi .sub_menu__list ul.menu__list li.menuitem__l0 .item__button{font-size: 16px; font-weight: 400; line-height: 21px;} #header__navi ul.menu__list li.menuitem__l0 .item__button:hover{background: inherit; color: inherit} #header__navi ul.menu__list li.menuitem__l0 .newtab:hover::after {filter: invert(0) !important;} #header__navi .menu__wrap .arrow_right:not(.newtab)::after{ content:''; width: 20px; height: 20px; background: url('/sec/static/_images/gnb/icon-gnb-arrow-right.svg') center center no-repeat; margin-left: auto;} #header__navi .menuitem__l1__container{visibility: hidden; position: fixed; top: 0; left: auto; display: block; width: 360px; height: 100%; padding: 0; background: #fff; z-index: 1;} #header__navi .menu__wrap .menuitem__l0.active .menuitem__l1__container{visibility: visible;} #header__navi .menuitem__l1__container .menuitem__l1__container__inner{height: 100%;} #header__navi .menuitem__l1__container .menuitem__l2__wrap{display: block; margin: 0; padding: 0 24px 16px; height: calc(100% - 64px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;} #header__navi .menuitem__l1__container .menuitem__l2__head{display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 10px; line-height: 1; background: #fff;} #header__navi .menuitem__l1__container .menuitem__l2__head > button{width: 36px; height: 36px;} #header__navi .menuitem__l1__container .menuitem__l2__head > button > svg{vertical-align: middle;} #header__navi .menuitem__l1__container .l1__title{display: block; font-size: 14px; font-weight: 700; line-height: 18px; padding: 8px 0; margin: 8px 0 4px;} #header__navi .menuitem__l2__wrap .menuitem__l2__row + .menuitem__l2__row{margin-top: 0;} #header__navi .menuitem__l2__wrap .menuitem__l2__row .menuitem__l2__list{padding: 0 8px 24px;} #header__navi .menuitem__l2__wrap .menuitem__l2__row ul.menuitem__l2__list{width: auto;} #header__navi .menuitem__l2__wrap .menuitem__l2__left, #header__navi .menuitem__l2__wrap .menuitem__l2__right{display: block; padding: 0; border-right: 0; overflow: unset;} #header__navi .menuitem__l2__wrap .menuitem__l2__row > a{display: block; font-size: 24px; line-height: 32px; color: #000; padding: 8px 0; margin-bottom: 0;} #header__navi .menuitem__l2__wrap .menuitem__l2__row.collapse > a{display: flex; align-items: center;} #header__navi .menuitem__l2__wrap .menuitem__l2__row > a[tabindex="-1"]{display: none;} #header__navi .menuitem__l2__wrap .menuitem__l2__row.collapse > a::after{content: '';width: 20px; height: 20px; background: url('/sec/static/_images/gnb/icon-open-down.svg') center center no-repeat; margin-left: auto; transition: transform 0.5s cubic-bezier(0, 0.18, 0.07, 1);} #header__navi .menuitem__l2__wrap .menuitem__l2__row.collapse.active > a::after{transform: rotate(-180deg);} #header__navi .menuitem__l2__wrap .menuitem__l2__row:not(.list__thumbnail) ul > li > a{display: block; line-height: 21px; padding: 8px 0; font-size: 16px;} #header__navi .menuitem__l2__wrap .menuitem__l2__row.collapse > a:not([tabindex="-1"]) + .menuitem__l2__list{display: none;} #header__navi .menuitem__l2__wrap .menuitem__l2__row.collapse > a[tabindex="-1"] + .menuitem__l2__list{display: block !important;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list{margin-top: 16px;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .menuitem__l2__col:has(.menuitem__l2__row.collapse.active:last-child) + .menuitem__l2__col a[tabindex="-1"] + .menuitem__l2__list, #header__navi .menuitem__l2__wrap .menuitem__l2__left:has(.menuitem__l2__col:last-child .menuitem__l2__row.collapse.active:last-child) + .menuitem__l2__right .menuitem__l2__col a[tabindex="-1"] + .menuitem__l2__list{margin-top: 0;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a{display: block;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a .img-box{width: 100%; height: auto; aspect-ratio: 1;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a .img-box img.pc{display: none;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a .img-box img.mo{display: block;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul > li > a > p{font-size: 16px;} #header__navi .menu__wrap .user__mypage__list{display: block; margin: 8px 24px 0; padding: 16px 0 40px; border-top: 1px solid #ddd;} #header__navi .menu__wrap .user__mypage__list ul{display: flex; flex-direction: column; justify-content: center; width: 100%;} #header__navi .menu__wrap .user__mypage__list ul li a{display: flex; padding: 8px 0; font-size: 16px; align-items: center; line-height: 21px;} #header__navi .menu__wrap .user__mypage__list ul li a > span{font-size: inherit; margin-left: 3px; font-weight: 700;} /* KDP-87891 [퍼블] 루비콘 챗봇 반영 및 ID 기반 노출 제어 & KDP-88347 [퍼블] 루비콘 챗봇 반영 및 ID 기반 노출 제어 */ body[data-pagename="b2c"] #header__navi .menu__head .head__button__wrap:has(.menu__chatbot__button) {display:flex} /* header noBnb version */ #header__navi.no__bnb .logo{display: none;} #header__navi.no__bnb .utility__wrap{width: 100%;} #header__navi.no__bnb .utility__wrap .utility__wrap_inner .utility__button__back__m{display: flex; margin-left: 0;} #header__navi.no__bnb .utility__wrap .utility__wrap_inner .utility__button__home__m{display: flex; margin-right: auto;} #header__navi.no__bnb .utility__wrap .utility__wrap_inner .utility__button__noti__m{display: flex; margin-left: 20px;} /* 검색창 */ .search__area{width: 360px; height: 100vh; padding: 0; background: #fff; overflow-y: auto; overscroll-behavior: contain;} .search__area .search__area__inner{overflow: hidden; padding: 18px 24px 36px;} .search__area .search__input__box{padding-bottom: 17px;} .search__area .search__input__box > span{padding-right: 4px;} .search__area .search__input__box button.search__close__btn, .search__area .search__input__box button.search__reset__btn{margin-left: 16px;} .search__area .search__input__box .search__input input{height: 32px; font-size: 24px;} .search__area .search__input__box .search__input input::placeholder{font-size: 24px; letter-spacing: -0.5px;} .search__area .search__content__view{display: block; margin-top: 24px;} .search__area .search__content__view .content__view__left{width: auto; padding-right: 0;} .search__area .search__content__view .view__txt li{padding: 6px 0;} .search__area .search__content__view .content__view__right{margin-top: 24px;} .search__area .search__content__view .content__view__inner + .content__view__inner{margin-top: 24px;} .search__area .search__content__view .view__thumbnail{margin: 0 -24px; gap: 24px 8px; grid-template-columns: repeat(2, 1fr);} .search__area .search__area__inner .view__thumbnail li > a{padding: 0 24px;} .search__area .search__content__view .view__thumbnail li > a .img-box{margin: 0 -24px;} .search__area .search__content__view .view__thumbnail li > a > p{font-size: 18px; line-height: 24px; height: 48px;} .search__area .search__content__view .view__thumbnail li > a > span{font-size: 14px;} .search__area .search__content__view .view__thumbnail li > a > strong{margin-top: 2px; font-size: 14px; line-height: 19px;} } @media all and (max-width:1279px) and (min-width: 768px) { #header__navi .menu__wrap.active, #header__navi .menu__wrap .menuitem__l0.active .menuitem__l1__container{right: 0;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul[data-repeat]{grid-template-columns: repeat(2, 1fr);} } @media all and (max-width:1099px) { .search__area .search__input__box .search__input input:focus{outline: -webkit-focus-ring-color auto 1px;} } /*** * 이 위로는 태블릿 * * * * * * * * * * * * * * * * * * 여기부터 모바일 ***/ @media all and (max-width: 767px) { /* logo */ #header__navi .logo a svg{width: 105px; height: 16px;} /* utility */ #header__navi .utility__button__cart .cart__list ul {grid-template-columns: 1fr;} #header__navi .utility__wrap .utility__button__search__m{margin-left: 0 !important;} /* menu */ #header__navi .menu__wrap, #header__navi .menu__wrap .menuitem__l0 .menuitem__l1__container, #header__navi .search__area{width: 100%;} #header__navi .menu__wrap.active, #header__navi .menu__wrap .menuitem__l0.active .menuitem__l1__container{right: 0;} #header__navi .menu__head .head__top{width: 100%;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul[data-repeat]{grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));} } @media all and (max-width: 360px) { #header__navi .logo { padding: 12px 0px 12px 0; } /* utility */ #header__navi .utility__wrap .utility__wrap_inner > div{margin-left: 3.333333333vw;} #header__navi.no__bnb .utility__wrap .utility__wrap_inner .utility__button__noti__m, #header__navi .utility__wrap .utility__wrap_inner .utility__button__cart{margin-left: 5.555555556vw;} #header__navi .utility__button__user .user__button{margin-left: 2.222222222vw;} #header__navi .utility__button__user .user__button > svg{margin-right: 2.222222222vw;} #header__navi .menuitem__l2__wrap .menuitem__l2__right .list__thumbnail .menuitem__l2__list > ul[data-repeat]{grid-template-columns: repeat(2, 1fr);} } /* 갤럭시 폴드 */ @media screen and (max-width:300px) { } /*** * * * * * * * * * * * * * * * * * * ***/ /* 통합검색 결과 */ /* 해당 내용 중복 으로 삭제 */