/* BASIC css start */ h1, .topMenu, #hdSchFrm, .topMenu , .topBanner { position: absolute; } body { min-width: 1265px !important; height: 100%; overflow-y: scroll !important; background: none !important; } @keyframes bounce { 0%,100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } } /* header */ #header { position: relative; /* height: 228px; */ } #header .Wrap { position: relative; width: 1260px !important; margin: 0 auto; padding-left: 0 !important; display:flex; align-items:center; justify-content:center; } #header .Wrap h1{position:relative; top:auto; left:auto;} #header .Wrap .top_menu{position:absolute; top:20px; right:0; z-index: 99999;} #header .Wrap .top_menu ul{display:flex; align-items:center;} #header .Wrap .top_menu li{position:relative; margin:0 10px;} #header .Wrap .top_menu li:nth-child(2):after{content:'';position:absolute; top:4px; left:-10px; width:1px; height:10px; background:#fff; } #header .Wrap .top_menu li a{font-size:14px; color:#333;} #header .Wrap .top_menu li.icon{font-size:25px; color:#333; margin:0 5px;} #header .Wrap .top_menu li.market{position:relative;} #header .Wrap .top_menu li.market img{height:25px;} #header .Wrap .top_menu li.market > span{position:absolute; background:#ffa00a; min-width:15px; height:15px; text-align:center; border-radius:100%; display:flex; align-items:center; justify-content: center; right:-7px; bottom:-2px; } #header .Wrap .top_menu li.market > span > span{color:#fff; font-size:10px; } #header .Wrap .top_menu li.user{padding-bottom:24px; transform: translateY(12px);} #header .Wrap .top_menu li.user:hover .my_page_box{display:block;} #header .Wrap .top_menu li.user .my_page_box{display:none; position:absolute; background:#fff; border:1px solid #ebebeb; width:110px; text-align:center; left:50%; transform: translateX(-50%); z-index: 9999999; top:40px;} #header .Wrap .top_menu li.user .my_page_box ul{display:flex; flex-direction: column; } #header .Wrap .top_menu li.user .my_page_box li a{display:block; font-size:13px; color:#333; font-weight:500; line-height:33px;} #header .Wrap .top_menu li.user .my_page_box li:nth-child(2):after{display:none;} #header .bi, #header #gnb, #header #favLink { position: absolute; } /* bi */ #header .bi { left: 30px; top: 30px; } #topWrap { /* position: fixed; */ width:100%; /*border-bottom: 1px solid #dcdcdc;*/ height: 40px; overflow:hidden; /*background: #fff;*/ text-align:center; } #topWrap .swiper-slide a{display:block; line-height:40px; font-size:14px; font-weight:700; color:#fff;} #topWrap > div { width: 100%; z-index: 40000; background: #f5f6f7; height: 40px; border-bottom: 1px solid #eee; } .pFixed { top:0; position: fixed; z-index: 20000; } /* topMenu */ .topMenu { top: 11px; right: 0; } .topMenu > ul > li {position:relative; float: left; padding-bottom:20px; } .topMenu > ul > li:after { content: "|"; padding: 0 8px; font-size: 10px; color:#afafaf; } .topMenu > ul > li:last-child:after { content: ""; padding: 0; } .topMenu > ul > li a { font-size: 12px; color:#000; display:inline-block; text-transform: uppercase; } .topMenu > ul > li a:hover { color: #000; } .join_point{ position: absolute; display: inline-block; top: -20px; left: 50%; width: 50px; height: 16px; line-height: 17px; font-size: 11px!important; color: #fff!important; margin: 0 0 0 -26px; border: 1px solid #ffa00a; border-radius: 40px; background: #ffa00a; text-align: center; font-weight: 700; animation: bounce 1.6s infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .join_point::before { content: ""; position: absolute; bottom: -5px; left: 50%; margin: 0 0 0 -3px; border-style: solid; border-width: 5px 4px 0; display: block; width: 0; z-index: 1; border-color: #ffa00a transparent; } .join_point::after { content: ""; position: absolute; bottom: -4px; left: 50%; margin: 0 0 0 -2px; border-style: solid; border-width: 5px 3px 0; display: block; width: 0; z-index: 2; border-color: #ffa00a transparent; } #logo-sns-search { height: 110px; } #logo-sns-search > h1 > a { font-size: 30px; letter-spacing: 0.2em; font-weight:bold; } /* 상단 gnb메뉴 */ .top_gnb { position: relative;} .top_gnb > a { background:url(/design/jiwonmall/s026/images/top_gnb_off.gif) no-repeat right center; padding-right:12px;font-size:11px; color:#999; text-transform:uppercase; } .top_gnb:hover > a { background:url(/design/jiwonmall/s026/images/top_gnb_on.gif) no-repeat right center; color:#333; } .top_gnb .top_lnb { display:none; position:absolute; top:23px; background:#fff; border:1px solid #666; padding:11px; z-index:10006; width:100%;} .top_gnb .top_lnb li { padding-left:5px;} .top_gnb .top_lnb li a { display:block; font-size:11px; color:#666; font-family:'Cabin' ,Pretendard, Dotum, AppleGothic, Helvetica, sans-serif; font-weight: 500; line-height:20px;} .top_gnb .top_lnb li a:hover { color:#000; text-decoration:underline;} .tM01 { margin-left:-31px; width:100px !important;} .tM02 { margin-left:-65px; width:100px !important;} /* topBanner */ .topSns { position: absolute; top: 6px; z-index: 10; left: 0; width: 90px; overflow: hidden; display: table; } .topSns > a i { vertical-align: middle; } .topSns > a, .topSns > ul { display: inline-block; vertical-align: middle; } .topSns > a:hover { color: #000; } .topSns > ul { } .topSns > ul li { display: inline-block; } .topSns > ul li a { width: 30px; height: 30px; text-align: center; font-size:20px; line-height: 35px; display: block; } .topSns > ul li a:hover { color:#333; } .topSns > ul li:first-child a { color:#5981cf; } .topSns > span { } .topSns > span > a { font-size: 16px; color: black; line-height:30px;} .topSns > span:after { content: "|"; padding: 0 8px; font-size: 10px; color:#afafaf; } .topSns > span:last-child:after { content: "|"; padding: 0 8px; } .topRolling { position:absolute; left: 0; width:100%; text-align:center; } .topRolling > i {display:none; font-size: 16px; vertical-align: top; padding-top: 12px; padding-right: 10px; } .topRolling > div { display:inline-block; padding-top: 7px; } .topRolling .xi-bell { color: #ffc72b; animation:xi-bell infinite linear 1s; } #MS_scroll_text_container{text-align:center!important;} @keyframes xi-bell { 0% { } 20% { transform: translateY(-2px); } 100% { } } /* h1 */ h1 { z-index:1; top: 30px; left: 525px; } h1 a { text-align: center; display: block; } /* hdSchFrm */ #header #hdSchFrm { right:0px; top:6px; z-index: 20; width:300px; } #header #hdSchFrm i { font-size: 1.5em; line-height: 1.9em; } #header #hdSchFrm form { overflow: hidden; } #header #hdSchFrm fieldset { width: auto; border: 1px solid #555; width: 300px; border-radius: 20px; } #header #hdSchFrm fieldset > div { display: flex; width:100%; align-items:center; } #header #hdSchFrm .MS_search_word { /*display: table-cell;*/ } #header #hdSchFrm .btn-sch { float: left; width: auto; padding-top: 8px; } #header #hdSchFrm .MS_search_word { border: 0px; width: 100%; height: 40px; padding: 0px 0 0 5px; margin-left:20px; } #header #hdSchFrm fieldset a { display: table-cell; text-align: center; color: #555; background: #fff; width: 45px; padding-left: 8px; border-radius: 20px;} #hdSchFrm p { margin-top: 16px; text-align: left; font-size: 12px; font-weight:200; } #hdSchFrm .fa-search { font-size: 1.3em; } #hdSchFrm span a { border : 1px solid #e5e5e5; padding: 5px 10px; border-radius:15px;} #hdSchFrm span a:hover { background: #eaf8f9; border: 1px solid 747474; transition:all 0.5s;} /* favLink */ #header #favLink { right: 30px; top: 44px; } #header #langLink {position: absolute; left:0px; top: 9px} #header #langLink > a { padding-right:2px;} /* 슬라이드 */ #slider1 { width: 240px; height: 101px; } div.example { display: inline-block; position: relative; } div.example code { display: block; } div.example button { position: absolute; bottom: -5px; padding: 10px; z-index: 900; width: 17px; height: 26px; text-indent: -999em; display: block; } div.example button.prev { background: url(/design/jiwonmall/s026/images/btn_a_l.gif) no-repeat; left: 73px } div.example button.last { background: url(/design/jiwonmall/s026/images/btn_a_r.gif) no-repeat; left: 89px; } #slider1 > ul > li { position: relative; width: 240px; height: 101px; float: left; } /* gnbWrap */ #gnbWrap { position: relative; width: 100%; } #gnbWrap .gnb-boardWrap { position: relative; width: 100%; z-index: 10005; color: #121212; height: 52px; background: #fff; border-bottom: 1px solid #f5f6f7; } #gnbWrap .gnb-boardWrap.fixed{top:0;} #gnbWrap .fixed { position: fixed; top: 39px; box-shadow: 0px 0 1px #dcdcdc; } /* gnbWrap */ .gnb {width:1260px; margin: 0 auto; position: relative; height: 48px; } .gnbCate { position: relative; padding-left: 410px; box-sizing: border-box; width: 100%; display: table; } .gnbCate ul { display: table-cell; } .gnbCate ul:nth-of-type(2) { width: 228px; text-align: right; } .gnbCate ul li { display: inline-block; line-height: 50px; position: relative;} .gnbCate ul:nth-of-type(1) { /* padding-left: 15px; */ } .gnbCate ul:nth-of-type(1) li a { padding: 0 12px; } .gnbCate ul:nth-of-type(2) li { box-sizing: border-box; text-align: center; } .gnbCate ul:nth-of-type(1) li a { color: #121212; font-size: 15px; display: inline-block; line-height: 52px; font-weight: bold; } .gnbCate ul:nth-of-type(1) li a:hover { color: #5981cf; } .gnbCate li a span { /* position: absolute; top: -2px; width:100%; height: 3px; background: #ffc451; z-index: 20000; left: 0;*/ } .gnbCate ul:nth-of-type(2) li { /* padding: 0 10px; */ } .gnbCate ul:nth-of-type(2) li a { color: #121212; font-size: 14px; display: inline-block; } .gnbCate ul:nth-of-type(2) li:after { content: "|"; padding: 0 10px; font-size: 18px; vertical-align: middle; color: #ddd; } .gnbCate ul:nth-of-type(2) li:last-child:after { content: ""; padding: 0; } .gnbCate ul:nth-of-type(2) li a span { display: none; } .gnbCate ul p { position:absolute; left:810px; top: 17px; font-size:12px; border-radius:5%; background:orange; padding: 1px 10px; color:white; text-align:center; line-height:18px; animation:move001 infinite linear 1s; } .gnbCate ul li img { padding-bottom: 2.5px; padding-right: 4px; } @keyframes move001 { 0% { } 20% { background: #ffdfa5; } 100% { } } .category_menu { /*width: 208px;*/ /*padding: 10px 0 30px;*/ } .category_menu > li { position:relative; line-height:25px; height: 52px; z-index:9000; /* width: 115px; */ box-sizing: border-box; padding: 0 15px 0 15px; box-sizing: border-box; } .category_menu > li:first-child { /*margin-top: 10px;*/ } .category_menu > li > a { color: #2b2b2b; font-size:1.2em; letter-spacing:-0.3px; display:block; text-align:left; /* text-shadow: 0 0 3px #999; */ /*width: 5ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/ line-height:52px; } .category_menu > li > a > i { /*display: inline-block;*/ display:none; position: absolute; right: 10px; top: 0px; font-size: 1.5em; } .category_menu .twoD > li > a > img { vertical-align: middle !important; padding-right: 10px; } .category_menu li.select { /* background:#437e00; border: 1px solid #ff0000; border-top:1px solid #343434;*/ } .category_menu .on { color: #333; /* border-top:1px solid #343434; */ } /* 마우스오버시 색변화 */ .category_menu .category_menu .on > a { color: #333; } .category_menu > li:nth-child(n+11) { } .category_menu > li{} /*.category_menu li.m9 .deps2 { top: -80px; } .category_menu li.m11 .deps2 { top: -70px; } .category_menu li.m11 .deps2 > li:nth-of-type(4) .deps3 { top: -90px; } .category_menu li.m13 .deps2 { top: -100px; } .category_menu li.m18 .deps2 { top: -200px; width: 250px; }*/ /*.category_menu li.m0 .deps2{display:block!important;}*/ .category_menu .deps2 { display:none; /*width: 100%;*/ position:absolute; min-width: 170px; top: 52px; left: 0px; z-index:9001; border:1px solid #e8e8e8; padding: 10px 0; background: #fff; overflow: visible !important; } /* top추가 */ .category_menu .deps2 ul{display:flex; flex-wrap: wrap; } .category_menu .deps2 > li {position:relative; display:block; /*width:19%;*/ margin:0 0.5%; background:#fff; /*padding-left: 15px;*/ line-height: 30px !important; /*height: 25px !important;*/ position: relative; padding:0 20px; } .category_menu .deps2 > li a{display:block; font-size:14px; color:#555; line-height:30px; } .category_menu .deps2 > li a:hover { color:#333; } .lifloat > li { float: left; width: 45%;} .category_menu .m9 .deps2 { right: 0px !important; } .category_menu .deps2 .deps3 {display:none; min-width: 120px; max-width:100%; position:absolute; top:0; left: 170px; z-index:9002; border:1px solid #e8e8e8; padding:10px 20px; background: #fff; } .category_menu .deps2 .deps3 li { display:block; background:#fff; /*padding-left: 15px;*/ line-height: 20px !important; height: 25px !important; } .category_menu .deps2 .deps3 li a{font-size:13px; color:#555; border:0;} .category_menu .deps2 .deps3 li a:hover{ color:#333; } .category_menu .deps2 li i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } #cateWrap {/* width: 208px; position: absolute; left: 50%; margin-left: -631px; top: 52px;*/ z-index: 10000; /*border:1px solid #eee; /* background: #fff; */ margin-left:52px; height:52px; /*background: rgba(255, 255, 255, 0.8); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3f000000, endColorstr=#3f000000)"; */ } #cateWrap .full_menu_close{display:none; position:absolute; top:18px; left:12px; z-index:10001; } #cateWrap .full_menu_close i{font-size: 1.6em; vertical-align: middle; color:#000;} #cateWrap #category_menuWrap { /*position: relative;*/ word-wrap: break-word; width: 100%!important; } /* overflow: hidden; */ #cateWrap #category_menuWrap.sel { height: 800px !important; } #cateWrap .category_menu { /*height: 500px; box-sizing: border-box;*/ display:flex; align-items:center; } #cateWrap .cate_more { position: absolute; bottom: 0; width:208px; text-align: center; z-index: 10001;height: 40px; /* background: #fff; */ } #cateWrap .cate_more a { position: absolute; bottom: 0; height: 28px; line-height: 28px; background: #fff; color: #000; display: block; font-size: 20px; width:100%; } /* 전체카테고리 */ #fullCate { position: absolute; top: 0; left: -1px; z-index: 10001; } #fullCate > a {width:50px; height: 52px; line-height: 52px; color:#000; box-sizing:border-box; /*border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee;*/ background: #fff; display: block; /*width: 210px;*/ text-align: center; font-size: 1.25em; font-weight: bold;} #fullCate > a > i { font-size: 1.6em; vertical-align: middle; padding-right: 5px; } #fullCate > div { position: absolute; top: 52px; width: 1258px; height: 66.5vh; background: #fff; border: 1px solid #555; background: #fff; overflow: hidden; display: none; overflow-y: scroll; } #fullCate > div > a { position: absolute; bottom: 3px; right: 7px; } #fullCate > div > div { display: table; width: 100%; background:#fff; box-sizing: border-box; vertical-align: top; } #fullCate > div > div > div { display: table-cell; border-right: 1px solid #e1e1e1; padding: 30px 10px 100px 10px; box-sizing: border-box; background: #fff;} #fullCate .c-gnbMenu > div { display: inline-block; vertical-align: top; padding: 0 20px 30px; width: 19%; box-sizing: border-box; } #fullCate .c-community, #fullCate .c-mypage { width: 15%; box-sizing: border-box; padding-left: 20px; background: #fbfbfb; vertical-align: top; } #fullCate .c-deps2 { } #fullCate .c-gnbMenu > div > ul > li { padding: 0 20px 0 0; position: relative; max-width: 200px; } #fullCate .c-deps3 { display: none; position: absolute; top: 0px; width: 200px; left: 100%; background: #fff; z-index: 20000; box-shadow: 3px 3px 3px #e1e1e1; } /* #fullCate > div > div+div+div+div+div{ border-right: none; } */ #fullCate .c-gnbMenu h3 { margin-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .5); line-height: 30px; text-indent: 5px; } #fullCate .c-gnbMenu h3 a, #fullCate .c-community h3, #fullCate .c-mypage h3 { font-size: 16px; color: #777; margin-bottom: 10px; } #fullCate .c-mypage h3:nth-of-type(2) { margin-top: 25px;} #fullCate .c-gnbMenu > div > ul > li > a, #fullCate .c-community > ul > li > a, #fullCate .c-mypage > ul > li > a { line-height: 30px; height: 30px; display: block; font-size:14px; font-weight:300; text-indent: 5px; } #fullCate .c-gnbMenu > div > ul > li > a:hover, #fullCate .c-gnbMenu > div > ul > li li a:hover, #fullCate .c-community li > a:hover, #fullCate .c-mypage li > a:hover{ color: #000; /*background: #f9f9f9; */ } #fullCate .c-gnbMenu > div > ul > li .on { font-size: 1.1em !important; } #fullCate .c-gnbMenu > div > ul > li > ul { /* margin-left: 10px; */ } #fullCate .c-gnbMenu > div > ul > li > ul li:before { content: "-"; padding: 0 4px; vertical-align: middle; color: #666;line-height: 25px; height: 25px; } .page-body { margin-bottom: 150px; } .paging { padding-top: 70px; } #fullCate .c-gnbMenu .c-deps2 > i { position: absolute; right: 2px; top: 6px; /* display: none; */ display: none; } #fullCate .c-gnbMenu > div > ul > li ul { border: 1px solid #e1e1e1; padding: 7px 10px 7px 10px; } #fullCate .c-gnbMenu > div > ul > li li a { line-height: 1.4em; } #fullCate .c-gnbMenu > .cm18 { width: 50%; } #fullCate .c-gnbMenu > .cm18 ul { overflow: scroll; width: 100%; } #fullCate .c-gnbMenu > .cm18 ul li { float: left; width: 49%; padding: 0; } /* 캐릭터별 카테고리 */ #character_Cate { position: absolute; top: 0; left:209px; z-index: 10001; } #character_Cate > ul > li > a { height: 52px; line-height: 52px; color:#0c0b09; background: #fff; display: block; width: 200px; text-align: center; font-size: 1.25em; font-weight: bold;} #character_Cate > ul > li > a > i { font-size: 1.6em; vertical-align: middle; padding-right: 5px; } #character_Cate > ul > li > ul { position:absolute; width:1052px; height:0px; } #character_Cate > ul > li > ul > li { display:none; text-align:left; } #character_Cate > ul > li > ul > li a { width: 100%; } #character_Cate > ul > li > ul > li img { width:120px; border: 0px solid #ddd; opacity:1; } #character_Cate > ul > li > ul > li:hover img { opacity:0.2; transform:scale(1.1); filter: blur(2px); transition: all 0.6s; } #character_Cate > ul > li > ul > li:hover { background:#5c5c5c; transition: all 0.4s; } #character_Cate > ul > li > a img { width:30px; border-radius:50%; position:relative; top:-2px; left:-1px; padding-right:5px; } /* 메인동그라미캐릭터 */ #character_Cate > ul > li:hover > a { background:#ffe7ee; } #character_Cate > ul > li:hover > ul { height: 540px; background: #fff; padding-left:10px; padding-top:10px; border-radius: 0 0 10px 10px; } #character_Cate > ul > li:hover > ul > li { display:inline-block; overflow:hidden; position: relative; border: 1px solid #d5d5d5; border-radius: 10px; box-shadow: 2px 2px 2px #eee; margin-bottom:8px; margin-right: 6px; } #character_Cate > ul > li:hover > ul > li span { display: none; background-color: rgba( 255, 255, 255, 0 ); color:#fff; vertical-align:middle; font-size: 1.2em; letter-spacing: -0.01em; font-weight: bold; text-align:center; padding: 3px 0; } #character_Cate > ul > li:hover > ul > li:hover span { display:inline-block; z-index:10001; position: absolute; width: 120px; left:0px; top: 50px; background: #fff; background-color: rgba( 255, 255, 255, 0 ); vertical-align:middle; font-size: 1.4em; letter-spacing: -0.01em; font-weight: bold; text-align:center; padding: 3px 0; } /* #topBanner */ #topBanner { position: relative; width: 100%; overflow: hidden; height: 100px; background: #555;} #topBanner li { position: absolute; height: 100px; width: 100%; left: 50%; margin-left: -1280px; } #topBanner .tClose { position: absolute; bottom: 7px; right: 20px; } #topBanner .tClose input { border: 1px solid #777; width: 25px; height:25px; display: inline-block; font-size: 13px; } #topBanner .tClose label { display: none; border: 1px solid #ddd; width: 125px; height:23px; line-height: 23px; padding: 0 10px; background: rgba(255,255,255,0.8); position: absolute; top: -4px; right: 25px; } #topBanner .tClose i { font-size: 3.0em; color: #777; cursor:pointer; vertical-align: middle; } #topBanner #check { position: relative; } /* #topBanner */ #top_ombs { position: absolute; right:0; bottom: 0; width: 300px; overflow: hidden; height: 128px; } /** * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.c om * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com */ /** RESET AND LAYOUT ===================================*/ .bx-wrapper { position: relative; padding: 0; *zoom: 1; top: 0; } /** THEME ===================================*/ .topBanner .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0; width: 100%; } .topBanner .bx-pager { width: 229px; left: 50%; z-index: 9999; bottom: 42px; /*top: 58%; */ position: absolute; margin-left: -45px; display:none; } .topBanner .bx-pager-item a { width: 17px; height: 16px; text-indent: -999em; margin-right: 7px; display: inline-block; background: url(../_image/bull_mainImg_off.png) no-repeat; float: left; } .topBanner .bx-pager-item a.active { background: url(../_image/bull_mainImg_on.png) no-repeat; } /* DIRECTION CONTROLS (NEXT / PREV) */ .topBanner .bx-wrapper .bx-prev { left: 0px; background: url(/design/jiwonmall/s026/images/btn_a_l.gif) no-repeat; } .topBanner .bx-wrapper .bx-next { left: 16px; background: url(/design/jiwonmall/s026/images/btn_a_r.gif) no-repeat; } .topBanner .bx-wrapper .bx-controls-direction { margin-left: 97px; position: relative; } .topBanner .bx-wrapper .bx-controls-direction a { position: absolute; bottom: 10px; margin-top: -16px; outline: 0; width: 16px; height: 13px; text-indent: -9999px; z-index: 9999; } .topBanner .bx-wrapper .bx-controls-direction a.disabled { display: none; } .topBanner .bx-wrapper .bx-controls-direction a { text-indent: -999em; } /* .banner01 DIRECTION CONTROLS (NEXT / PREV) */ #topBanner .bx-wrapper .bx-controls-direction { width: 1000px; left: 50%; margin-left: -630px; position: absolute; top: 0px; z-index: 39999; display: none; } #topBanner .bx-wrapper .bx-controls-direction a { position: absolute; top: 0; outline: 0; text-indent: -9999px; z-index: 19999; height: 30px; opacity: 0.3; width: 30px; background: #000; } #topBanner .bx-wrapper .bx-controls-direction a.disabled { display: none; } #topBanner .bx-wrapper .bx-controls-direction a { text-indent: -999em; } #topBanner .bx-wrapper .bx-prev { } #topBanner .bx-wrapper a.bx-next { top:31px; } #topBanner .bx-wrapper .bx-controls-direction a i { text-indent: 0px !important; color: #fff; font-size: 1.5em; width:100%; height:100%; position: absolute; top:5px; left:0; text-align: center; } #topBanner .bx-wrapper .bx-controls-direction a:hover { opacity: 0.5; } #topBanner .bx-wrapper .bx-controls-auto { position: absolute; bottom: 0; width: 100%; } #topBanner .bx-pager { width: 100%; z-index: 9999; bottom: 10px; position: absolute; display: table; text-align: center; display:none; } #topBanner .bx-pager > div { display: inline-block; text-align: center; margin: 0 5px; } #topBanner .bx-pager-item { } #topBanner .bx-pager-item a { text-indent: -999em; width: 9px; height: 9px; border-radius: 50%; background: #fff; display: block; } #topBanner .bx-pager-item a.active { background: #555;} /* #top_ombs */ #top_ombs .bx-pager { display: none; } /* DIRECTION CONTROLS (NEXT / PREV) */ #top_ombs .bx-wrapper .bx-controls-direction { position: absolute; top: 42%; width: 100%; } #top_ombs .bx-wrapper .bx-controls-direction a { position: absolute; top: 0; outline: 0; width: 18px; height: 16px; text-indent: -9999px; z-index: 9999; border: 1px solid #eee; } #top_ombs .bx-wrapper .bx-controls-direction a i { display: inline-block; width:100%; position: absolute; text-align: center; font-size:1.0em; height: 16px; line-height: 16px; text-indent: 0; left:0; top: 0; color: #000; } #top_ombs .bx-wrapper .bx-controls-direction a.disabled { display: none; } #top_ombs .bx-wrapper .bx-controls-direction a { text-indent: -999em; } #top_ombs .bx-wrapper .bx-prev { right: 0px; } #top_ombs .bx-wrapper .bx-next { right: 0px; top: 17px !important; } /* 상품들 */ /* 상품 preview */ .preview { position: absolute; bottom: 10px; left: 0px; background:rgba(0, 0, 0, 0.6); /*background: #000; opacity: 0.6; */ width: 30px; text-align: center; display: none; border-radius: 2px; z-index:9000; } .preview > div:first-child a { padding-top: 8px; } .preview > div:last-child a { padding-bottom: 6px; } .preview > div { position: relative !important; } .preview > div a { display: block; padding: 4px 0 3px; vertical-align: middle; border-radius: 2px; } .preview > div span { position: absolute; display: none; top:0; z-index: 100; left: 30px; width: 50px; font-size: 11px; background:rgba(0, 0, 0, 0.8); color: #fff; padding: 0 7px 0 5px; line-height: 2.5em; display: inline; border-radius: 2px; margin-left: 2px; } .preview a i { color: #dedede; } .preview a:hover { background:rgba(0, 0, 0, 0.7); } .preview a:hover i { background:rgba(0, 0, 0, 0.7); color: #fff; } .preview i { font-size: 1.5em; color: #fff; } .discount { position: absolute; top: -4px; right: 0px; width: 100%; min-width: 200px; text-align: right; } .discount span.sale { background: #000; color: #fff; width: 45px; height: 45px; line-height: 45px; display: inline-block; font-size: 1.05em; text-align: center; font-weight: bold; border-radius: 2px; } .hit { position: absolute; bottom: 10px; right: 3px; background: #fff; box-shadow: 3px 1px 3px #cfcfcf; padding: 3px 10px; border-radius: 2px; display: none !important; font-size:11px; } .hit i { font-size: 1.2em; line-height: 1.2em; vertical-align: middle;} .soldOut { position: absolute; z-index: 9999; display: inline-block; width: 100%; height: 100%; background:rgba(0, 0, 0, 0.5); top: 0; left: 0; color: #fff; text-align: center; padding-top: 40%; font-size: 16px; line-height: 24px; } .font { width: 15px; height: 4px; display: inline-block; } .brand { margin: 3px 0 5px 0; color: #333; } .MK-product-icons { display:block; } .MK-product-icons img { margin: 0px 5px 0 0; } /* 상품 리스트 */ .listPrd { padding: 40px 20px 20px; } .listPrd .list { position: relative; overflow: hidden; box-sizing: border-box; /*height:232px;*/ } .listPrd .list > a { width: 100%; height: 100%; border:1px solid #eee; border-bottom: 1px solid #eee; overflow: hidden; display: block; box-sizing: border-box; } .listPrd .list > a > img { width: 100%; height: 100%; } .listPrd .list_icon { display:inline; float: right; } .listPrd .salelist_icon { display:inline; float: right; padding-top: 8px; padding-right: 4px; } .listPrd { position: relative; } .listPrd .promotion_icon { position:absolute; top: 20px; left: 0px; overflow: visible;} .list_con p.sale { color: #dd0000; font-size: 1.5em; float: right; padding-top: 9px; padding-right: 4px; } /* 상품 정보 */ .suj { word-break:break-all; padding: 0px 0 10px; color: #333; margin-top: 10px; } .suj a { color: #555; font-size: 13px; letter-spacing: -0.05em;} .suj a:hover { color: #000; } .price { display: inline-block; margin-bottom: 5px; color: #333; font-size: 14px; padding-top: 1px; } .price strike { color: #777; } .color_name { margin: 3px 0 0px 0; } .sub_content { word-break:break-all; padding: 0 0 5px 0; } .sub_content a { font-size: 12px; } /* tit */ .hd { display: table; width:100%; margin-bottom: 20px; text-align: center; } .hd > h2 { font-size: 2.5em; font-family:"Open Sans",'sans-serif'; color:#222; line-height:40px; text-transform: uppercase; display: block; } .hd span { color:#999; font-size: 13px; display: inline-block; margin: 8px 0 0 10px; } .hd > a { position: absolute; top: 15px; right: 10px; font-size: 0.85em; text-transform: lowercase; font-family:'Dotum','sans-serif'; } /* total */ .total-sort { padding: 0 10px; } .total-sort .sort li { margin-left: 0; } .total-sort .sort li a:hover { color: #000; } .total-sort .sort li a:after { content: "|"; padding: 0 5px; } .total-sort .sort li:last-child a:after { content: ""; padding: 0; } .total-sort .total dt { padding-right: 5px; } .prd_listWrap { display: table; width:100%; overflow: hidden; } .prd_listWrap > li { display: inline-block; box-sizing: border-box; vertical-align: top; } .prd_listWrap.col3 > li { width: 33%; } .prd_listWrap.col4 > li { width: 25%; } .prd_listWrap.col5 > li { width: 20%; } .prd_listWrap .listPrd { padding: 30px 10px 40px 10px; } .prd_listWrap > li .suj { border-bottom: 1px solid #eee; margin-bottom: 10px; } .prd_listWrap > li .price strike { display: block !important; font-size: 0.9em; margin-bottom: 5px; } .prd_listWrap > li .brand { margin: 7px 0 10px 0; } .prd_listWrap.col3 .list_con p:first-child { height:40px; } .prd_listWrap.col4 .list_con p:first-child { height:40px; } .prd_listWrap.col5 .list_con p:first-child { height:40px; } .prd_listWrap.col6 .list_con p:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 230px; height: 20px; } /* padding */ .pt_5 { padding-top: 5px; } .pt_10 { padding-top: 10px; } /* margin */ .mt_5 { margin-top: 5px; } .mt_10 { margin-top: 10px; } .mb_5 { margin-bottom: 5px; } .mb_10 { margin-bottom: 10px; } .mb_20 { margin-bottom: 20px; } @media screen and (max-width:1200px){ body { overflow-x: visible; } } #category_menuWrap > div { overflow: scroll; height: 500px; } #category_menuWrap > div::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); border-radius: 10px; background-color: none; } #category_menuWrap > div::-webkit-scrollbar { width: 12px; background-color: none; } #category_menuWrap > div::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0); background-color: none; } #category_menuWrap > div::-webkit-scrollbar { display:none; } #category_menuWrap > div { -ms-overflow-style: none; overflow: auto; } /* BASIC css end */