/* BASIC css start */ #header{width: 100%;} /* 헤더 공통 */ #header>div{width: 100%;font-family: 'Montserrat', sans-serif;margin:0 auto} #header>div>div{} #header>div li{} #header>div li a{font-family: 'Montserrat', sans-serif;} /* 헤더 탑 */ #header .head_top{height: 140px; background-color: #fff;position:relative; z-index:1000; } #header .head_top_inner{height: 100%; display: flex; justify-content: space-between; align-items: center; max-width: 1650px; /* 1760px */; margin: 0 auto; min-width:1400px;} #header .head_top_inner h1{} #header .head_top_inner h1 a{display: block;} #header .head_top_inner h1 a img{width:300px;} #header .head_top_inner .search{width: 400px;margin-top:-6px } #header .head_top_inner .search fieldset{height: 40px; width:100%; margin:0 auto; border-bottom:3px solid #000; position:relative;} #header .head_top_inner .search input{font-weight:bold; font-family: 'Montserrat', sans-serif;font-size:22px; background:none !important; border:none; width:90%; height:100%; float:left; } #header .head_top_inner .search input::placeholder{color:#FFF} #header .head_top_inner .search .search_icon{position:absolute; top:50%; transform:translateY(-50%); right:0; display:inline-block;text-indent:-9999px; width:25px; height:25px; float:right; background:url(/design/naschenka/modeny/PC_img/b_search.png) no-repeat center center; background-size:contain} #header .head_top_inner .user_m{} #header .head_top_inner .user_m ul{} #header .head_top_inner .user_m ul li{display: inline-block;margin-left: 10px;} #header .head_top_inner .user_m ul li a{display: block;font-size: 13px; color: #878787;font-weight: 500;} #header .head_top_inner .user_m ul li a span{width: 15px; height: 15px; background-color: #000; border-radius: 50%; text-align: center; color: white; line-height: 15px; display: inline-block; font-size: 10px;transform: translateY(-1px);margin-left:2px} /* 헤더 바텀 */ #header .head_bottom{height: 70px; background-color: #5e2775; color: white;transition: position .4s;position: relative;width:100%; z-index:1000} #header .head_bottom.fix{position: fixed; top: 0;z-index:100;left:50%; transform:translateX(-50%)} #header .head_bottom.fix .fix_logo{opacity: 1;} #header .head_bottom.fix .user_icon{opacity: 1;} #header .head_bottom_inner{ height: 100%; display: flex; justify-content: space-between; align-items: center; max-width: 1650px; margin: 0 auto; min-width:1500px;} #header .head_bottom_inner .fix_logo{opacity: 0; transition: opacity .2s;} #header .head_bottom_inner .fix_logo a{} #header .head_bottom_inner .fix_logo a img{width:140px;} #header .head_bottom_inner nav{display: flex;height: 100%;align-items: center;} /* 공통 */ #header .head_bottom_inner nav li{display: inline-block;margin: 0 10px;line-height: 70px;} #header .head_bottom_inner nav li a{font-size: 14px; font-weight: 600; color: white;} #header .head_bottom_inner nav ul.first_m{margin-right: 23px;position: relative;padding-right: 25px; height: 100%;} #header .head_bottom_inner nav ul.first_m::after{content: ""; display: block;position: absolute;width: 1px; height: 14px; background-color: #fff; right: 0; top: 50%; transform: translateY(-50%);} #header .head_bottom_inner nav ul.first_m li{height: 100%;} #header .head_bottom_inner nav ul.first_m li:hover>a{color:#e98847 ;} #header .head_bottom_inner nav ul.first_m li a{transition:color .1s} #header .head_bottom_inner nav ul.second_m{} #header .head_bottom_inner nav ul.second_m li{} #header .head_bottom_inner nav ul.second_m li a{font-weight: 400;} #header .head_bottom_inner .user_icon{height: 100%; display: flex; align-items: center;opacity: 0; transition: opacity .2s;position: relative;} #header .head_bottom_inner .user_icon ul{} #header .head_bottom_inner .user_icon ul li{display: inline-block;margin-left: 30px;} #header .head_bottom_inner .user_icon ul li a{display: block; width: 100%; height: 100%;} #header .head_bottom_inner .user_icon ul li.li_search{width: 26px; height: 26px; background: url(/design/naschenka/modeny/PC_img/w_search.png) no-repeat center center; background-size: contain;transition: background-image .1s;} #header .head_bottom_inner .user_icon ul li.li_mypage{width: 28px; height: 26px; background: url(/design/naschenka/modeny/PC_img/w_my.png) no-repeat center center; background-size: contain;} #header .head_bottom_inner .user_icon ul li.li_cart{width: 23px; height: 30px; background: url(/design/naschenka/modeny/PC_img/w_cart.png) no-repeat center center; background-size: contain;} #header .head_bottom_inner .user_icon ul li.li_cart a{width: 100%; height: 100%; position: relative;} #header .head_bottom_inner .user_icon ul li.li_cart a span{position: absolute;top: 60%; left: 50%; transform: translate(-50%,-50%); font-size: 12px; font-weight: 500;color:#fff} #header .head_bottom_inner .user_icon ul li.li_search.click{background-image: url(/design/naschenka/modeny/PC_img/search_close.png);} .search_area.click{display: block;} .search_area{display: none;width: 500px; height: 255px; position: absolute; top: 69px; background-color: #fff; right: 70px;border: 1px solid #000; padding: 30px 40px;} .search_area .search{width: 100%; height:70px;} .search_area .search fieldset{height: 40px; width:100%; margin:0 auto; border-bottom:3px solid #000; position:relative;} .search_area .search input{ font-weight:bold;font-family: 'Montserrat', sans-serif;font-size:22px; background:none !important; border:none; width:90%; height:100%; float:left} .search_area .search input::placeholder{color:#c3c3c3} .search_area .search .search_icon{position:absolute; top:50%; transform:translateY(-50%); right:0; display:inline-block;text-indent:-9999px; width:25px; height:25px; float:right; background:url(/design/naschenka/modeny/PC_img/b_search.png) no-repeat center center; background-size:contain} .search_area .reset{position:absolute; top:50%; transform:translateY(-50%); right:40px; display:block; width:22px; height:22px} .search_area .reset img{width:100%} .search_area ul{width:90%} .search_area ul li{margin-left: 0 !important; margin-right:15px; margin-bottom:15px} .search_area ul li a{color:#000;font-family: 'Noto Sans KR', sans-serif !important; font-size: 16px; color: #818181; font-weight: 500;} .gnb_area{transition: display .5s; display:none; width: 100%; background-color: rgba(255, 255, 255, 0.911);position: absolute;left: 0;top: 70px; color: #000;height: 420px;z-index:100;max-width:1860px; min-width:1500px;} .gnb_area.show{display: block;transition: display .5s;} .gnb_inner{display: flex; justify-content: center; align-items: flex-start;height:100%} .gnb_inner>div{ display: inline-block;padding-top: 30px;} .gnb_L{/*padding-right: 80px;position: absolute; left: 50%;transform: translateX(-100%);*/} .gnb_L .menu{} .gnb_L .menu ul.main_m{display: flex; align-items: flex-start} .gnb_L .menu ul.main_m>li{display: inline-block;margin-left: 20px;} .gnb_L .menu ul.main_m>li>a{display: block; font-size: 12px; color: #000;font-weight: 800; margin-bottom: 10px;transition:color .12s} .gnb_L .menu ul.sub_m{} .gnb_L .menu ul.sub_m>li{margin: 5px 0;} .gnb_L .menu ul.sub_m>li>a{ font-size: 11px; color: #000; font-weight: 400;font-family: 'Noto Sans KR', sans-serif !important; letter-spacing:-1;} .gnb_L .menu ul.sub_m>li>a:hover{text-decoration:underline} .gnb_L .menu ul.main_m>li:hover>a{color:#e98847 !important } .gnb_R{padding-left: 90px; /*position: absolute; left: 50%;*/ min-width:510px;} .gnb_R>div{float: left;} .gnb_R .gnb_R1{padding-right: 60px;} .gnb_R .gnb_R1 p.tit{ font-size: 15px; color: #000;font-weight: 800; margin-bottom: 10px;} .gnb_R .gnb_R1 ul{margin-bottom: 20px;} .gnb_R .gnb_R1 ul li{margin: 5px 0;} .gnb_R .gnb_R1 ul li a{font-size: 11px; color: #000; font-weight: 600;} .gnb_R .gnb_R2{} .gnb_R .gnb_R2 ul{} .gnb_R .gnb_R2 ul li{width: 130px; height: 275px; float: left; margin-right: 20px;} .gnb_R .gnb_R2 ul li .thumb{width: 100%; height: 175px;} .gnb_R .gnb_R2 ul li .thumb a{display: block; width: 100%; height: 100%;} .gnb_R .gnb_R2 ul li .thumb a img{width: 100%; height: 100%; object-fit: cover;} .gnb_R .gnb_R2 ul li .info{padding-top: 10px; padding-right: 10px;} .gnb_R .gnb_R2 ul li .info p{white-space: wrap;overflow: hidden; text-overflow: ellipsis;} .gnb_R .gnb_R2 ul li .info .p_name{font-size: 13px;color: #000;font-weight: 500;} .gnb_R .gnb_R2 ul li .info .p_etc{font-size: 11px; color: #606060;font-weight: 500; margin: 5px 0; } .gnb_R .gnb_R2 ul li .info .price{} .gnb_R .gnb_R2 ul li .info .price span{font-size: 13px;color: #000;display: inline-block;font-weight: 500;} .gnb_R .gnb_R2 ul li .info .price span.strike{text-decoration: line-through ;font-size: 11px;color: #606060;margin-left: 6px; } /* 다찾다 자동완성*/ .search-auto-complete-list { display:none; z-index:1; position:absolute; top:40px; left:0; border:1px solid #ddd; border-top:1px solid #000; line-height:14px; background:#fff; } .search-auto-complete-list ul { width:202px; padding:4px 0 6px; border-bottom:1px solid #ddd; } .search-auto-complete-list ul li { text-align:left; } .search-auto-complete-list ul li.on { background:#f3f3f3; } .search-auto-complete-list ul li a { display:block; padding:8px 14px 7px; color:#000; background:none; font-family:'dotum'; font-size:12px; letter-spacing:-1px; } .search-auto-complete-list ul li a strong { color:#ab3e41; } .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; } .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; } /* 검색창 */ #allfinder-layer{position:fixed; top:-100%; left:0; background:#fff; z-index:1000; padding:100px 0; width:100%; height:100%; box-sizing:border-box; overflow-y:scroll; transition:all 0.5s; } #allfinder-layer.on{top:0;} #allfinder-layer .close_btn{display:block; position:absolute; top:80px; right:80px; width:30px; height:30px; cursor:pointer; background:url('/design/naschenka/modeny/PC_img/icon_close_big.png')no-repeat 50% 50%;} .finder-body{width:1200px; margin:0 auto;} .finder-search{border-bottom:2px solid #120B19; position:relative; padding-right:30px; padding-bottom:15px; margin-bottom:10px;} .finder-search tr{display:block; width:100%;} .finder-search tr th{display:none;} .finder-search tr td{display:block; width:100%;} .finder-search input[type="text"]{border:none; width:100%; height:29px; font-size:14px;} .finder-search button{font-size:0; position:absolute; top:0; right:0; width:30px; height:30px; background:url('/design/naschenka/modeny/PC_img/icon_search.png')no-repeat right top; background-size:27px;} #allfinder-layer table td{padding:25px 0 15px;; border-bottom:1px solid #EBEBEB;} #allfinder-layer table th{padding:25px 0; border-bottom:1px solid #EBEBEB; text-align:left; font-size:14px; color:#120B19; font-weight:500; letter-spacing:-0.5px;} #allfinder-layer table td div > label{display:inline-block; vertical-align:top; cursor:pointer; margin-right:10px; margin-bottom:10px; box-sizing:border-box;} #allfinder-layer table td label > span{display:block; padding:0 10px; font-size:13px; color:#4C4D4E; letter-spacing:-0.5px; border:1px solid #EBEBEB; background:#F8F8FA; line-height:31px; border-radius:3px;} #allfinder-layer table td label > span.on{border-color:#D35460; background:#D35460; color:#fff;} #allfinder-layer table td .finder-color label{font-size:0; padding:0; width:27px; height:27px; border:none; background:transparent;} #allfinder-layer table td .finder-color label span{display:block; width:100%; height:100%; border-radius:3px; box-sizing:border-box; position:relative; font-size:0;} #allfinder-layer table td .finder-color label span.on{border-color:transparent;} #allfinder-layer table td .finder-color label span.on:after{content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:url('http://sappun.img13.kr/wib/img/icon/icon_option_chk.png')no-repeat 50% 50%;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-black, #allfinder-layer table td .finder-search-data > span.finder-option-color-black em{background-color:#000;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-white, #allfinder-layer table td .finder-search-data > span.finder-option-color-white em{background-color:#FFF; border:1px solid #EBEBEB;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-white.on:after{background-image:url('http://sappun.img13.kr/wib/img/icon/icon_option_chk_b.png');} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-gray, #allfinder-layer table td .finder-search-data > span.finder-option-color-gray em{background-color:#808080;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-beige, #allfinder-layer table td .finder-search-data > span.finder-option-color-beige em{background-color:#e5d0b2;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-brown, #allfinder-layer table td .finder-search-data > span.finder-option-color-brown em{background-color:#aa6810;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-navy, #allfinder-layer table td .finder-search-data > span.finder-option-color-navy em{background-color:#425583;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-blue, #allfinder-layer table td .finder-search-data > span.finder-option-color-blue em{background-color:blue;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-light-blue, #allfinder-layer table td .finder-search-data > span.finder-option-color-light-blue em{background-color:#62acff;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-red, #allfinder-layer table td .finder-search-data > span.finder-option-color-red em{background-color:red;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-orange, #allfinder-layer table td .finder-search-data > span.finder-option-color-orange em{background-color:orange;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-yellow, #allfinder-layer table td .finder-search-data > span.finder-option-color-yellow em{background-color:yellow;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-pink, #allfinder-layer table td .finder-search-data > span.finder-option-color-pink em{background-color:pink;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-purple, #allfinder-layer table td .finder-search-data > span.finder-option-color-purple em{background-color:purple;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-jaju, #allfinder-layer table td .finder-search-data > span.finder-option-color-jaju em{background-color:#a63f7f;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-khaki, #allfinder-layer table td .finder-search-data > span.finder-option-color-khaki em{background-color:#2f5e2f;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-green, #allfinder-layer table td .finder-search-data > span.finder-option-color-green em{background-color:green;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-light-green, #allfinder-layer table td .finder-search-data > span.finder-option-color-light-green em{background-color:#72dd95;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-silver, #allfinder-layer table td .finder-search-data > span.finder-option-color-silver em{background-color:#dfdfdf;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-gold, #allfinder-layer table td .finder-search-data > span.finder-option-color-gold em{background-color:#cfbc4e;} #allfinder-layer table td .finder-color .finder-option-color.finder-option-color-apricot, #allfinder-layer table td .finder-search-data > span.finder-option-color-apricot em{background-color:#fbceb1;} #allfinder-layer table td .finder-price-input{display:inline-block; vertical-align:top; font-size:13px; color:#4C4D4E;} #allfinder-layer table td .finder-price-input label{background:#fff; padding:0 10px; margin:0 10px 0; border:1px solid #EBEBEB; border-radius:3px; vertical-align:middle;} #allfinder-layer table td .finder-price-input label input{width:95px; border:none; height:31px;} #allfinder-layer table td.finder-search-data-wrap{background:#F8F8FA; border:none; padding:25px 25px 15px 25px;} #allfinder-layer table td .finder-search-data{font-size:0;} #allfinder-layer table td .finder-search-data > span{display:inline-block; vertical-align:top; background:#363636; border-radius:3px; line-height:33px; padding:0 10px; font-size:13px; color:#fff; letter-spacing:-0.5px; margin-right:10px; margin-bottom:10px;} #allfinder-layer table td .finder-search-data > span .fa-close{display:inline-block; vertical-align:middle; width:11px; height:11px; background:url('http://sappun.img13.kr/wib/img/icon/icon_del_w.png')no-repeat center center; margin-left:10px; margin-top:-3px; cursor:pointer;} #allfinder-layer table td .finder-search-data > span.finder-option-color{font-size:0;} #allfinder-layer table td .finder-search-data > span.finder-option-color em{display:inline-block; vertical-align:middle; width:20px; height:20px; border-radius:3px;} .finder-btn-c{text-align:center; padding:50px 0 0;} .finder-btn-c > *{display:inline-block; vertical-align:top; width:200px; box-sizing:border-box; height:60px; line-height:58px; border:1px solid #4C4D4E; border-radius:4px; font-size:16px; color:#363636; letter-spacing:-0.5px; font-weight:500; margin-right:10px; font-family:'Inter','Noto Sans KR';} .finder-btn-c > *:last-child{margin:0;} .finder-btn-c button{border-color:#D35460; background:#D35460; color:#fff;} .finder-search .search-auto-complete-list{position:absolute; top:46px; left:0; width:100%; background:#F8F8FA; z-index:9;} .finder-search .search-auto-complete-list ul{padding:10px 15px 0;} .finder-search .search-auto-complete-list ul li a{font-size:13px; color:#120B19; display:block; padding:10px 0;} .finder-search .search-auto-complete-list .search-list-close{display:block; padding:10px 15px 15px; font-size:13px; color:#120B19; font-weight:500;} @media (max-width:1600px){ #header .head_bottom_inner nav li{margin: 0 10px;} } /* BASIC css end */