/* BASIC css start */ /* BASIC css start */ body {font-family: 'SUIT','sofia-pro' ;} @import url("https://use.typekit.net/nbj7gpw.css"); @font-face { font-family:"sofia-pro"; src:url("/design/fordi/font/SofiaProRegularAz.otf"); font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; /*unicode-range: U+0041-005A, U+0061-007A, U+0030-0039;*/ } @font-face { font-family:'SUIT', sans-serif; src:url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css") format("woff2"), url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css") format("woff"), url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css") format("opentype"); font-display:auto;font-style:normal;font-weight:700;font-stretch:normal; /*unicode-range: U+AC00-U+D7A3;*/ } #header{ -webkit-transition: all 0.3s ease; -khtml-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;background-color: transparent; width: 100%; position: fixed; z-index: 10; min-width: 320px;left: 50%; transform: translateX(-50%); max-width: 850px; margin: 0 auto; top: 0;} #header.bg{background-color: rgba(255,255,255,.8); border-bottom: 1px solid #eee;top: -46px;} #header .head_inner{width: 100%; display: flex; align-items: center; justify-content: space-between ; padding: 10px 5%;} #header .head_inner>div{} #header .head_inner .left{display: flex; align-content: center;} #header .head_inner .left .ham{margin-right: 16px;} #header .head_inner .left .ham a{display: block;} #header .head_inner .left .ham a img{transform: scale(.66); transform-origin: left center;} #header .head_inner .left h1.logo{width: 100px;display: flex;} #header .head_inner .left h1.logo a{width: 100%; display: flex; align-items: center;} #header .head_inner .left h1.logo a img{width: 85px;} #header .head_inner .right{} #header .head_inner .right ul{display: flex; align-items: center;} #header .head_inner .right ul li{white-space: nowrap;margin-left: 10px;} #header .head_inner .right ul li a{display: block;} #header .head_inner .right ul li a img{transform: scale(.66); transform-origin: right center;} #header .head_inner .right ul li.li_cart{} #header .head_inner .right ul li.li_cart a{position: relative;} #header .head_inner .right ul li.li_cart a span{background-color: #000; color: #fff; font-size: 10px; width: 18px; height: 13px; border-radius: 8px; text-align: center; line-height: 13px; display: inline-block;position: absolute; bottom: 10px; right: -5px;} #asi{ width: 100%;min-width: 320px; max-width: 850px;opacity: 0; transition: opacity .6s, left .5s; height: 100%; overflow-y: auto; background-color: #fff; position: fixed; left: -100%; top:0; z-index: 50;} #asi.show{opacity: 1; left: 0;} #asi .asi_inner{width: 100%; height: 100%;padding: 5% 0;} #asi .asi_inner>div{padding: 0 6%; margin-bottom: 30px;} #asi .asi_inner .as1{display: flex; justify-content: space-between; align-items: center;} #asi .asi_inner .as1 p.ment{color: #696969; font-size: 15px; font-family:'SUIT';font-weight: 400;} #asi .asi_inner .as1 .asi_close{} #asi .asi_inner .as1 .asi_close a{display: block;} #asi .asi_inner .as1 .asi_close a img{transform: scale(.66); transform-origin: right center;} #asi .asi_inner .as2{margin-bottom: 20px;} #asi .asi_inner .as2 ul{display: flex; justify-content: space-between;} #asi .asi_inner .as2 ul li{width: 49%;} #asi .asi_inner .as2 ul li:first-child a{background-color: #333; color: #fff;} #asi .asi_inner .as2 ul li:last-child a{border: 1px solid #000;color: #000; } #asi .asi_inner .as2 ul li a{font-weight: 600; display: block; text-align: center; padding: 11px 0;font-family:'sofia-pro';font-size: 11.5px;} #asi .asi_inner .as2 ul li.li_join{position: relative;} #asi .asi_inner .as2 ul li.li_join span{left: 50%; transform: translateX(-50%);font-family:'SUIT'; bottom: -11px; background-color: #333; color: #fff; font-size: 10.5px; border-radius: 10px; padding: 1px 10px;} #asi .asi_inner .as3{border-bottom: 1px solid #e2e2e2; padding-bottom: 40px;} #asi .asi_inner .as3 ul{display: flex;} #asi .asi_inner .as3 ul li{width: 20%;} #asi .asi_inner .as3 ul li a{display: flex;height: 60px; flex-direction: column; align-items: center; justify-content: space-between;} #asi .asi_inner .as3 ul li a img{transform: scale(.66); transform-origin: center top;} #asi .asi_inner .as3 ul li a span{font-family:'SUIT';color: #626262; font-size: 12px; font-size: 400;} #asi .asi_inner .as4{padding-bottom:50px} #asi .asi_inner .as4 ul.main_m{} #asi .asi_inner .as4 ul.main_m>li{} #asi .asi_inner .as4 ul.main_m>li>a{ font-family:'SUIT';display: block; color: #333; font-size: 21px; font-weight: 600; padding: 11px 0;} #asi .asi_inner .as4 ul.main_m>li>a span{display: inline-block; float: right; transition: transform .3s;} #asi .asi_inner .as4 ul.main_m>li>a span img{display: inline-block;transform: scale(.66); transform-origin: center center; transition: transform .3s; } #asi .asi_inner .as4 ul.main_m>li>a.clicked span img{transform:scale(.66) rotate(-180deg);} #asi .asi_inner .as4 ul.sub_m{display: none;} #asi .asi_inner .as4 ul.sub_m>li{} #asi .asi_inner .as4 ul.sub_m>li>a{transition: color .2s;font-family:'sofia-pro';display: block; color: #696969; font-size: 18px; font-weight: 400; padding: 11px 0 11px 10px;} #asi .asi_inner .as4 ul.sub_m>li:last-child>a{padding-bottom: 20px;} #fix_area{position: fixed; right: -1%; bottom: 12%; opacity: 0; z-index: 20; transition: right .4s, opacity .6s; } #fix_area.show{opacity: 1; right: 5%;} #fix_area ul{} #fix_area ul li{width: 44px;margin-top: 6px;} #fix_area ul li a{display: block; width: 100%;} #fix_area ul li a img{width: 100%;} .search {height:42px;position:relative;text-align:center;border-bottom: 1px solid #000;margin: 0 6%;padding: 0 45px 0 0 !important;} .search .searchBox {width:100%;} .search .searchBox input {width: 100%;height:30px;border:0px none;margin-top: 6px;padding: 0 5px;} .search .btn_search {width:45px;height:42px;line-height:50px;position:absolute;top:0;right:0;color: #000;text-align:center;} /* 다찾다 - 레이어 */ .all-finder-close {position: absolute; top:19px; left:15px;z-index: 2;display: block;width:13px;height:22px;} .all-finder-close img{width:13px;} .all-finder-layer { z-index:1006; position:fixed; top:0; right:0; width:100%; height:100%; overflow-y:auto; } .all-finder-layer .finder-hd { z-index: -1; position: fixed; top: 0; right: 0; width: 100%; height: 60px;line-height: 60px;border-bottom: 1px solid #D4D4D4; background: #fff;} .all-finder-layer #allfinder-ctr { position: fixed;top:19px;right: 15px;z-index: 2; display: inline-block; width: 22px; height:22px; text-align: center;border:0;background:#fff } .all-finder-layer #allfinder-ctr img {display:block;width: 100%;vertical-align: middle;} .all-finder-layer .finder-opt > dl:nth-child(1) input.txt-input.keyword.smart_finder_auto_completion {height: 45px;margin: 0;border:0;font-size:15px;color:#120B19} .all-finder-layer .finder-btn-c { line-height:1;z-index:1; position: fixed; bottom:0; right:0;left:0; padding: 10px 15px; text-align: center; font-size:0;background: #fff; } .all-finder-layer .finder-btn-c a.reset {display: inline-block; width: 33%; height: 45px;line-height: 45px; background: #fff; color: #4C4D4E; font-size: 13px; font-weight: 400; border:0;text-align:left; } .all-finder-layer .finder-btn-c a.reset img{width:19px;margin-right:7px;vertical-align: middle;} .all-finder-layer .finder-btn-c button {display: inline-block; width: 67%; height: 45px;line-height: 45px; background: #d35460; color: #fff; font-size: 14px; font-weight: 400; border: 1px solid #d35460;border-radius:3px;} /*다찾다 옵션*/ .all-finder-layer .finder-opt { padding: 0 15px 67px; color: #120B19; left:0;right: 0; top: 60px; height: 100%; background: #fff; overflow-y: auto; position: absolute;} .all-finder-layer .finder-opt > dl{width:100%;padding:25px 0;border-bottom:1px solid #EBEBEB} .all-finder-layer .finder-opt > dl:last-child{border-bottom:0} .all-finder-layer .finder-opt > dl:nth-child(1){z-index: 2; position: fixed; top: 7px;left: 38px; width: 77%; height: 46px; display: block; line-height: 60px; padding: 0;border-bottom: 0;} .all-finder-layer .finder-opt > dl:nth-child(1) dt{font-size:0;} .all-finder-layer .finder-opt > dl:nth-child(1) dd{margin:0;} .all-finder-layer .finder-opt > dl:nth-child(1) dd .fa-search{display:none;} .all-finder-layer .finder-opt > dl dt{font-size:15px;color:#120B19;font-weight:500;line-height:1;} .all-finder-layer .finder-opt > dl dt.on{background:none !important;} .all-finder-layer .finder-opt > dl dd{width:100%;margin-top:20px;display: none ; line-height: 1;} .all-finder-layer .finder-opt > dl dd.on{display:block;} .all-finder-layer .finder-opt > dl:nth-child(6) dt, .all-finder-layer .finder-opt > dl:nth-child(7) dt, .all-finder-layer .finder-opt > dl:nth-child(8) dt, .all-finder-layer .finder-opt > dl:nth-child(9) dt, .all-finder-layer .finder-opt > dl:nth-child(10) dt{background:url('/design/fordi/img/icon_arrow_down_12.png')no-repeat center right / 12px;} .all-finder-layer .finder-opt > dl:nth-child(1) dd, .all-finder-layer .finder-opt > dl:nth-child(2) dd, .all-finder-layer .finder-opt > dl:nth-child(3) dd, .all-finder-layer .finder-opt > dl:nth-child(4) dd, .all-finder-layer .finder-opt > dl:nth-child(5) dd{display:block !important;} .all-finder-layer .finder-opt > dl > dd > label,.all-finder-layer .finder-opt > dl > dd > div >label {display:inline-block;width:auto;margin-right:6px;} .all-finder-layer .finder-opt .finder-options {display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border:1px solid #EBEBEB;line-height: 1; padding:12px 18px; word-break: break-all; border-radius: 60px;background: #F8F8FA; color: #120B19; text-align: center;font-size: 13px; } .all-finder-layer .finder-opt .finder-options.on {border: 1px solid #363636; background: #363636; color: #fff; border-radius: 60px;} .all-finder-layer .finder-opt > dl > dd label{margin-top:10px;} .all-finder-layer .finder-opt > dl > dd label:nth-child(1), .all-finder-layer .finder-opt > dl > dd label:nth-child(2), .all-finder-layer .finder-opt > dl > dd label:nth-child(3){margin-top:0;} /*다찾다 - 색상*/ .all-finder-layer .finder-opt > dl:nth-child(3){padding: 25px 0; } .all-finder-layer .finder-opt .finder-color{width:100%; /*width: calc(100% + 14px); margin-left: -7px;*/} .all-finder-layer .finder-opt .finder-color label { display:inline-block; text-align:center; line-height:10px;width:13.58%;margin-right:0 !important; } .all-finder-layer .finder-opt .finder-option-color em { display: inline-block; width: 37px; height: 37px; border-radius:50%; font-size:0; vertical-align:middle; } .all-finder-layer .finder-opt .finder-option-color.color-picker { width:37px; height:37px; padding: 0; border: none; } .all-finder-layer .finder-opt .finder-option-color.color-picker .fa-check {position: relative; display:none; width:37px; height:37px; margin-top:-37px; color:#fff; text-align:center; font-size:16px; } .all-finder-layer .finder-opt .finder-option-color.color-picker .fa-check:before{position: absolute;top:0;width: 37px;height:37px;content:"";display:block;background:url('/design/fordi/img/icon_color_check.png')no-repeat center center / 14px;} .all-finder-layer .finder-opt .finder-option-color.color-picker.finder-option-color-white .fa-check:before{background:url('/design/fordi/img/icon_color_check_b.png')no-repeat center center / 14px;} .all-finder-layer .finder-opt .finder-option-color.color-picker.on{background:none;} .all-finder-layer .finder-opt .finder-option-color.color-picker.on .fa-check { display:block; } .all-finder-layer .finder-opt .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; } /*다찾다 - 자동완성*/ .all-finder-layer .search-auto-complete-list { display:none; z-index:1; position:absolute; top:52px; left: -38px; width: calc(100% + 86px); border:1px solid #ddd; line-height:14px; background:#fff; } .all-finder-layer .search-auto-complete-list ul { width:100%; padding:4px 0 6px; border-bottom:1px solid #ddd; } .all-finder-layer .search-auto-complete-list ul li { text-align:left; } .all-finder-layer .search-auto-complete-list ul li.on { background:#f3f3f3; } .all-finder-layer .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; } .all-finder-layer .search-auto-complete-list ul li a strong { color:#ab3e41; } .all-finder-layer .search-auto-complete-list ul li a:hover { background:#f2f2f2; } .all-finder-layer .search-auto-complete-list ul li a:hover span { border-bottom:1px solid #000; } .all-finder-layer .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#999; font-size:11px; } .finder-option-color.finder-option-color-black em { background-color: #000; } .finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; } .finder-option-color.finder-option-color-gray em { background-color: #808080; } .finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; } .finder-option-color.finder-option-color-brown em { background-color: #aa6810; } .finder-option-color.finder-option-color-navy em { background-color: #425583; } .finder-option-color.finder-option-color-blue em { background-color: blue; } .finder-option-color.finder-option-color-light-blue em { background-color: #62acff; } .finder-option-color.finder-option-color-red em { background-color: red; } .finder-option-color.finder-option-color-orange em { background-color: orange; } .finder-option-color.finder-option-color-yellow em { background-color: yellow; } .finder-option-color.finder-option-color-pink em { background-color: pink; } .finder-option-color.finder-option-color-purple em { background-color: purple; } .finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; } .finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; } .finder-option-color.finder-option-color-green em { background-color: green; } .finder-option-color.finder-option-color-light-green em { background-color: #72dd95; } .finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; } .finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; } .finder-option-color.finder-option-color-apricot em { background-color: #fbceb1; } /*다찾다 가격대*/ .all-finder-layer .finder-opt > dl:last-child > dd > div{line-height:1;} .all-finder-layer .finder-opt > dl:last-child > dd > div label{display: inline-block;margin-right:6px;margin-bottom:10px;} .all-finder-layer .finder-opt > dl:last-child > dd > div .finder-price-input{font-size:13px;color:#282828;margin-top:20px;} .all-finder-layer .finder-opt > dl:last-child > dd > div .finder-price-input span:nth-of-type(1){display:block;margin-bottom:10px;} .all-finder-layer .finder-opt > dl:last-child > dd > div .finder-price-input label{display: inline-block;width:calc(50% - 11px);} .all-finder-layer .finder-opt > dl:last-child > dd > div .finder-price-input label:last-child{margin-right:0 !important;} .all-finder-layer .finder-opt > dl:last-child > dd > div .finder-price-input label input{width: calc(100% - 20px);border-radius:3px;border:1px solid #e1e1e1} #header .search .searchBox { position:relative; width:100%; } .dn{display:none !important;} .sec1_bar { border-bottom: 1px solid #eee; width:100%; background-color: rgba(255, 255, 255, .8); transition: background-color .3s, border-bottom .3s;} .sec1_bar a {color: #3b3b3b;} #header.bg .sec1_bar { background: transparent; } .sec1_bar .swiper { margin:0 auto; height: 45px; } .sec1_bar .swiper ul { width: 100%; } .sec1_bar .swiper ul li.swiper-slide { } .sec1_bar .swiper ul li.swiper-slide p { display: flex; align-items: center; justify-content: center; font-family:'SUIT'; font-size: 15px; color: #333333; padding: 15px 0; } .sec1_bar p span { display: flex; margin-right: 10px; } .sec1_bar p span img { transform:scale(.66); transform-origin:center center; } /* BASIC css end */