/* BASIC css start */ /* 메인 배너 */ .mainBanner{ visibility: hidden; position:relative;overflow:hidden;} .mainBanner .main_banner img{width:100%;} .mainBanner .bx-pager{position:absolute;bottom:20px;left:0;right:0;z-index:60;text-align:center;} .mainBanner .bx-pager-item{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;display:inline-block;position:relative;} .mainBanner .bx-pager-link{display:inline-block;width: 16px;height: 6px;font-size:0;margin: 0 3px;background-color: rgba(225,225,225,0.8);border-radius: 3px;} .mainBanner .bx-pager-link.active{width: 80px;background-color: rgba(45, 45, 45, 0.8);} .mainBanner .bx-controls-direction {position:absolute;top:50%;z-index:60;text-align:center;/* opacity: 0; */width: 100%;} .mainBanner:hover .bx-controls-direction {opacity:1.0;transition:all 0.3s ease;-webkit-transition:all 0.3s ease;} .mainBanner .bx-prev, .mainBanner .bx-next{position:absolute;top:0;margin-top:-25px;font-size: 28px;display:inline-block;width:50px;height:50px;color: #eaeaea;line-height: 45px;} .mainBanner .bx-prev i, .mainBanner .bx-next i {vertical-align: middle;} .mainBanner .bx-prev{left: 200px;} .mainBanner .bx-next{right: 200px;} .mainBanner .bx-prev:hover, .mainBanner .bx-next:hover{transition:all 0.3s ease;-webkit-transition:all 0.3s ease;background-color: rgba(90, 90, 90, 0.8);color:#fff;border-radius: 100%;} /* 메인 서브 배너 */ .subbnArea {position: relative;margin-top: 0px;} .subbnArea:after { content: ""; display: block; clear: both; } .subbnArea .sub_banner > li {float: left;width: 470px; padding-right:55px } .subbnArea .sub_banner > li > img { width: 100%; max-width: 100%;} .subbnArea .sub_banner li .line {margin-bottom: 50px;} .subbnArea .sub_banner li.last {padding-right:0px} .mainbArea {background-color:#e6e6e6;padding:0 200px;} .mainbArea .mainbItem { width:20%;padding:10px;font-size:15px; text-align:center;height:70px;cursor:pointer; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .mainbArea .mainbItem:hover { background-color:#557eab;color:#fff; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .mainbArea0 {background-color:#2e5f95;padding:0 200px;} .mainbArea0 .mainbItem0 {width:20%;padding:10px;font-size:16px;color:#fff; text-align:center;height:30px;} /* OUR BRAND PRODUCT */ .specialItem { margin: 70px auto 90px; position:relative } .specialItem h3 { padding-bottom:0px; font-size:20px; font-weight:bold; font-family:Arial; text-align:center } .specialItem .slide dl { position:relative } .specialItem .slide dt { width:100%; height:100%; cursor:pointer; overflow:hidden } .specialItem .slide dt img { width:100%; height:100%; transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease } .specialItem .slide dd { display:none; position:absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(225,225,225,0.8); overflow:hidden; z-index:2 } .specialItem .slide dd a { display:block; padding-top:80px; width:100%; color:#fff; text-align:center } .specialItem .slide dd a .prd-name { display: block; margin:0 10px; padding-bottom:5px; font-size:12px; color:#000; border-bottom:none } .specialItem .slide dd a .prd-price { display:block; margin:0 10px !important ;padding-top:3px;font-size:14px; font-weight: bold;color:#000;} .specialItem .slide dd a .prd-price del {color:#000; font-weight: normal; font-size: 12px; margin-right: 5px} .specialItem .slide dd a .prd-subname{padding: 15px 25px;color:#000; } .specialItem .bx-controls { position:absolute; top:90px; left:0; width:100% } .specialItem .bx-controls a { position:absolute; top:0; font-size:24px } .specialItem .bx-controls .bx-prev { left:0 } .specialItem .bx-controls .bx-next { right:0 } /* 이미지 고정 배너 */ .fixed-img-bannerWrap {position:relative; margin: 90px auto 0px;} .fixed-img-bannerWrap .fixed-img-banner {position:relative; padding: 10% 0;background: url(/design/koreafnb/13550/tem150/fix_bg.jpg) center center;background-attachment:fixed;overflow:hidden;} .fixed-img-bannerWrap .fixed-img-banner .t1 {font-size: 48px;color: #000;text-align:center;} .fixed-img-bannerWrap .fixed-img-banner .t2 {font-size: 18px;color: #000;text-align:center;margin: 10px 0px 20px} .fixed-img-bannerWrap .fixed-img-banner .b1{background:#000; width: 180px; margin: 20px auto; text-align: center;border-radius: 6px;} .fixed-img-bannerWrap .fixed-img-banner .b1 a {font-size: 18px; display:block; color:#fff; padding:10px; border-radius: 6px;} .fixed-img-bannerWrap .fixed-img-banner .b1 a:hover{ color:#000; background:#fff} /* WEEKLY BEST // tabProduct */ #tabProduct {visibility:hidden;position:relative;padding:5% 0;} #tabProduct .newCate_prod { position:relative } #tabProduct .newCate_prod .newCateTab {zoom: 1;overflow: hidden;width: 1000px;margin: 0 auto 40px;} #tabProduct .newCate_prod .newCateTab li{float:left;width: 180px;margin: 0 10px;text-align:center;} #tabProduct .newCate_prod .newCateTab li a {display:block;height: 34px;font-size: 14px;line-height: 34px;color:#777;background: #fff;border-radius: 34px;border: 1px solid #ddd;} #tabProduct .newCate_prod .newCateTab li a.active {color:#111;font-weight:bold; background:#444; color:#fff; border: 1px solid #444;} #tabProduct .item-wrap .item-cont .item-list { float:left; width: 356px; padding: 0 12px 40px 12px;} /*mainCont*/ #mainContWrap{ background:#eeeeee; width:100%; height:725px} #mainContWrap .mainCont{width:1200px; margin:0 auto; padding: 120px 0px;} #mainContWrap .mainCont .movieWrap {width:780px; float:left; margin-left:30px} #mainContWrap .mainCont .movieWrap .load{position:relative; padding-bottom:56.25%; height:0;} #mainContWrap .mainCont .movieWrap .load iframe{position:absolute; top:0; left:0; width:780px; height:490px} #mainContWrap .mainCont .textWrap{ float:left; width:380px } #mainContWrap .mainCont .textWrap h4 {font-size:30px; color:#000; } #mainContWrap .mainCont .textWrap .bigTit{padding: 10px 0px; display: block; font-size:40px} #mainContWrap .mainCont .textWrap .bigTit em{font-weight:bold} #mainContWrap .mainCont .textWrap .shopBtn{margin:30px 0px} #mainContWrap .mainCont .textWrap .shopBtn a{ border: 1px solid #c7c7c7; padding: 20px 40px;; } #mainContWrap .mainCont .textWrap .shopBtn a:hover{background:#fff;border: 1px solid #fff;} /* 상품 타이틀 */ .h_title {padding: 70px 0 35px;text-align:center;} .h_title h3 { font-size: 24px; font-weight:bold; color:#292929; } /* 메인 트랜젝션 처리 */ .trsbox > li {float: left;width: 480px; padding-right:40px } .trsbox > li:nth-child(3n) {padding-right:0;} li.trs { width : 480px; height: 480px; margin-bottom:40px; overflow:hidden; float:left; } li.trs div.trs1 { width : 480px; height : 480px; position:absolute; overflow:hidden; } li.trs div.trs2 { width : 100%; position:absolute; overflow:hidden; bottom : 0; cursor:pointer; } li.trs div.trs1 img { width:480px; height:480px; filter: brightness(90%); -webkit-filter: brightness(90%); -moz-filter: brightness(90%); -o-filter: brightness(90%); -ms-filter: brightness(90%); -webkit-transform: scale(1) translate3d(0, 0, 0); -moz-transform: scale(1) translate3d(0, 0, 0); -ms-transform: scale(1) translate3d(0, 0, 0); -o-transform: scale(1) translate3d(0, 0, 0); transform: scale(1) translate3d(0, 0, 0); -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } li.trs:hover div.trs1 img { filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%); -webkit-transform: scale(1.1) translate3d(0, 0, 0); -moz-transform: scale(1.1) translate3d(0, 0, 0); -ms-transform: scale(1.1) translate3d(0, 0, 0); -o-transform: scale(1.1) translate3d(0, 0, 0); transform: scale(1.1) translate3d(0, 0, 0); } li.trs div.trs2 { position: relative; background-color:rgba(0,0,0,.3); height:70px; width: 480px; text-align: center; overflow: hidden; z-index:10; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; color:#fff; } li.trs:hover div.trs2 { height:480px; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } li.trs div.trs2 > div.trst1 { font-size:16px; font-weight: 800; padding:30px 0; position:relative; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } li.trs:hover div.trs2 > div.trst1 { font-size:24px; font-weight: 800; padding:200px 0 20px; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } li.trs div.trs2 > div.trst2 { display:none; font-size:16px; font-weight: 500; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } li.trs:hover div.trs2 > div.trst2 { display:block; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } /* BASIC css end */