@charset "utf-8";

/* RESET */
html,body,button,dl,dt,dd,div,form,fieldset,legend,h1,h2,h3,h4,h5,h6,input,select,textarea,ul,ol,li,p,pre,table,td,th,caption,a {margin:0;padding:0;line-height:1.2}
html{font-size:10px; font-size-adjust: none; -ms-text-size-adjust: none; -webkit-text-size-adjust:none;}
body{letter-spacing: -0.025em; color:#000; font-family:'NotoSans', AppleSDGothicNeo-Light, AppleGothic, 'Malgun Gothic', '맑은 고딕', sans-serif; font-weight: 400; margin:0; padding:0;font-size:12px;}
h1,h2,h3,h4,h5{font-weight: 300;}
legend {font-size:0;}
input[type="text"],input[type="email"],input[type="tel"],textarea,select,fieldset{border:0; background:transparent; -webkit-appearance:none; -moz-appearance:none; appearance:none; box-sizing: border-box;}
input,textarea,select{color:#000; font-family:'NotoSans', AppleSDGothicNeo-Light, AppleGothic, 'Malgun Gothic', '맑은 고딕', sans-serif;  border-radius:0; vertical-align:top;}
textarea:focus{outline: 2px solid #373737; color:#000000; border:2px solid #373737;}
textarea:focus::-webkit-textarea-placeholder {outline: 2px solid #373737; color:#767676;}
button {border: 0;}
button::-moz-focus-inner, input::-moz-focus-inner {padding: 0;}
button:disabled, input:disabled, option:disabled, select:disabled,
textarea:disabled {cursor: default !important; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color:    #767676;
  opacity:  1;
}
::-webkit-input-placeholder, :-ms-input-placeholder, ::-ms-input-placeholder {
  color:    #767676;
}
input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
input[type=checkbox], 
input[type=radio]
select:focus,
textarea {padding: 0; border:0; font-size: 12px; box-sizing: border-box;}

select{cursor:pointer;}
select::-ms-expand{display: none;}
ol,ul{list-style:none}
a{text-decoration:none; color:#000; vertical-align: top;}
a:focus {outline:none;}
img{width:100%; border:0; vertical-align:top;}
table{border-collapse:collapse;border-spacing:0; width:100%;}
caption{visibility:hidden; overflow:hidden; height:0px; font-size:0px; line-height:0px;}
th,th{text-align:left; vertical-align:top;}
em{font-style:normal;}
figure, figcaption {position:relative; margin:0; padding:0;}
div,ul,li {-webkit-overflow-scrolling: touch;}
*,*:after,*:before{box-sizing:border-box;}

/*focus > 라인변경*/
/* *:focus {outline:dotted 1px #bfbfbf;} */
input:disabled {opacity: 1; -webkit-text-fill-color: #a2a2a2;}

/*숨김 텍스트*/
.blind {display: block; position: absolute!important; overflow: hidden; clip: rect(0 0 0 0); width: 1px; height: 1px;}

/*영문 텍스트*/
.en {font-family:'Roboto', AppleSDGothicNeo-Light, AppleGothic, 'Malgun Gothic', '맑은 고딕', sans-serif; letter-spacing: -0.05em; color: #333;}

/*색상*/
.col-red {color:#ff4800;}


/*******************************
*	swiper slider
********************************/
.swiper-basic {overflow: hidden;}
.swiper-progress {overflow: hidden;}
.swiper-pagination-bullet {width: 5px; height: 5px; background: #e5e5e5; opacity: 1;}
.swiper-pagination-bullet-active {background: #333; opacity: 1;}


/*******************************
*	공통
********************************/
section {position: relative; padding: 0 15px;}
body.fixed {overflow: hidden;}
.oMenu_gnb.oGnb .subTitUtil {display:none}

/*******************************
*	헤더
********************************/
#wrap {position: relative;}
#wrap.scroll header {position: fixed; top: 0; left: 0; z-index: 999;}
.mainWrap.scroll {padding-top: 45px;}
.brandMainWrap.scroll {padding-top: 90px;}
.detailWrap.scroll {padding-top: 50px;}
.detailSubWrap.scroll {padding-top: 54px;}

header {position: relative; width: 100%; background: #fff; transition: all .2s ease-out; z-index: 14;}
header::after {content: ''; display: inline-block; position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #ededed; z-index: -1;}
.headerTop h1 {position: absolute; top: 15px; left: 0; right: 0; width: 235px; margin: 0 auto; text-align: center;}
.headerTop h1 > a {display: inline-block; width: 96px; height: 19px; margin-top: 4px; background: url('../img/common/logo_oasis.png') no-repeat; background-size: 96px 19px;}
.headerTop h1 .goOasis { display: inline-block; background-color:#fff; border: 1px solid #cccccc; border-radius:45px; text-align: center; height:28px; line-height:26px; font-size:0px; vertical-align:top; position:relative; }
.headerTop h1 .goOasis a {display: inline-block; padding:0px 7px; font-size:1.3rem; color:#494949; border-radius:45px; vertical-align: top; font-family:"Montserrat", sans-serif; height:26px; line-height:26px; position:relative; z-index:10; overflow:hidden; }
.headerTop h1 .goOasis a.active { color:#fff; }
.headerTop h1 .goOasis a.oMarket { width:62px; border:0px solid #fff; }
.headerTop h1 .goOasis a.oBrand { width:86px; border:0px solid #fff; }
/* .headerTop h1 .goOasis a.oBrand:before { content:"market"; display:inline-block; width:54px; height:22px; border-radius:5px; overflow:hidden; background:#000; color:#fff; position:absolute; left:00px; top:0px; z-index:3; transition:all 0.3s; } */
/* .headerTop h1 .goOasis a.oBrand:hover:before { content:"Brandmall"; display:inline-block; width:75px; height:22px; background:#000; color:#fff; position:absolute; left:54px; top:0px; z-index:3; transition:all 0.3s; pointer-events:auto; } */
.headerTop h1 .goOasis .swich_dummy { display:inline-block; height:26px; line-height:26px; background-color:#000; color:#fff; position:absolute; left:0px; top:0px; z-index:2; border-radius:45px;}
.headerTop {position: relative; width: 100%; height: 50px}
#wrap:not(.brandShopMainWrap) .headerTop h1 a.oasisLogo {width:184px;margin-top:0;padding-left:96px;background-position-x:left;animation:logoAni 10s 5s forwards infinite}
#wrap:not(.brandShopMainWrap) .headerTop h1 a.oasisLogo::after {content:'';opacity:1;visibility:visible;transform:translate3d(0,0,0);display:inline-block;width:90px;height:18px;background: url(https://oasisprodcom.edge.naverncp.com/mobile/img/img_logo_route_2.png) no-repeat top left/100% auto;vertical-align:top;animation:logoAfterAni 10s 5s forwards infinite}
@keyframes logoAni {0% {width:184px}8% {width:96px}50% {width:96px}58% {width:184px}100% {width:184px}}
@keyframes logoAfterAni {0% {opacity:1;visibility:visible;transform:translate3d(0,0,0)}8% {opacity:0;visibility:hidden;transform:translate3d(20%,0,0)}50% {opacity:0;visibility:hidden;transform:translate3d(20%,0,0)}58% {opacity:1;visibility:visible;transform:translate3d(0,0,0)}100% {opacity:1;visibility:visible;transform:translate3d(0,0,0)}}

/* .new_brandMainWrap:not(.scroll) .headerTop h1 a.oasisLogo {background: url(../img/common/logo_brandmall_new_wh.png) no-repeat 0 0  / auto 17px} */


.headerTop .pageBack {display: none;}
.headerTop .headerBtn {position: absolute; top: 14px; right: 15px;}
.headerTop .headerBtn a {display: inline-block; width: 20px; height: 21px; margin-left: 8px; background: url('../img/common/icon_header.png') -40px -21px no-repeat; background-size: 80px 42px;}
.headerTop .headerBtn a.btn_cart {background-position: -60px -21px;}
.headerTop .headerBtn a.btn_cart em {display: inline-block; width: 100%; padding-top: 3px; color: #030304; text-align: center; line-height: 20px;}
.headerNav {overflow-x: auto; display: flex; white-space: nowrap;font-family: 'Montserrat'}
.headerNav a {flex:1 1 auto; display: inline-block; padding: 9px 8px 11px 8px; font-weight: 500; font-size: 1.4rem; text-align: center}
.headerNav a span {position: relative;}
.headerNav a.on span::after {content: ''; display: inline-block; position: absolute; bottom: -9px; left: 0; right: 0; width: 100%; height: 3px; margin: 0 auto; background: #000;}
.headerNav::-webkit-scrollbar { display:none; }

.headerTop .gnb {position: relative;}
.headerTop .gnb .menuHbg {position: absolute; top: 18px; left: 15px;}
.headerTop .gnb .menuHbg .line {display: block; width: 16px; height: 2px; margin-top: 4px; background: #333;/*  -moz-transition: all .3s ease; -ms-transition: all .3s ease; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; */}
.headerTop .gnb .menuHbg .line:first-child {margin-top: 0;}
.headerTop .gnb .gnbMenu {overflow-y: auto; position: absolute; top: 0; left: -100%; width: 100%; height: 100vh; padding-bottom: 78px; background: #fff; transition: all .3s ease-out; z-index: 14;}
.headerTop .gnb .gnbMenu.on {left: 0;}
.headerTop .gnb .gnbMenu .gnbHeader {border-bottom: 6px solid #efefef;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbAccount {position: relative; padding: 16px 15px 9px 15px; border-bottom: 1px solid #dadada;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbAccount .gnbLogin {display: inline-block; padding: 5px 9px 0 0; font-size: 1.4rem;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbAccount .btnLogin {display: inline-block; vertical-align: top;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbAccount .btnLogin a {display: inline-block; margin-right: 5px; padding: 6px 11px; border-radius: 26px; background: #999; font-size: 1.2rem; color: #fff;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbAccount .btnClose {position: absolute; top: 0; right: 0; width: 46px; height: 100%;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbAccount .btnClose a {display: inline-block; width: 100%; height: 100%;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbAccount .btnClose a::before {content: '\2573'; display: inline-block; width: 100%; height: 100%; padding: 19px 17px 0 0; color: #000; font-size: 1.5rem; text-align: center; font-weight: 600;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo {display: table; table-layout: fixed; width: 100%;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a {display: table-cell; padding: 20px 0; font-size: 1.2rem; color: #545454; text-align: center;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a span {display: inline-block; position: relative; width: 100%; padding-top: 4px;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a span::before {content: ''; display: inline-block; position: absolute; bottom: 0; left: 0; width: 1px; height: 40px; background: #eee;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a:first-child span::before {display: none;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a::before {content: ''; display: inline-block; width: 27px; height: 19px; background: url('../img/common/icon_gnb.png') no-repeat; background-size: 108px 19px;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a.gnbOrder::before {background-position: -27px 0;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a.gnbZzim::before {background-position: -55px 0;}
.headerTop .gnb .gnbMenu .gnbHeader .gnbUserInfo a.gnbHelp::before {background-position: -81px 0;}
.headerTop .gnb .gnbMenu .gnbBody {padding-top: 31px;}
.headerTop .gnb .gnbMenu .gnbBody .categoryArea {padding: 0 16px 6px 16px; border-bottom: 1px solid #eee; font-size: 1.6rem;}
.headerTop .gnb .gnbMenu .gnbBody ul li a {display: inline-block; width: 100%; font-size: 1.4rem; color: #333;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth1 .categoryTit a {position: relative; border-bottom: 1px solid #eee;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth1 .categoryTit a::after {content: ''; display: inline-block; position: absolute; top: 16px; right: 16px; width: 9px; height: 6px;background: url('../img/common/icon_arrow.png') no-repeat; background-size: 19px 6px;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth1 li.depthOnly .categoryTit a::after {display: none;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth1 li a {padding: 13px 16px 14px 16px;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth2 {display: none; padding: 8px 0; background: #eee;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth1 > li.on .categoryTit a::after {background-position: -10px 0;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth1 > li.on .categoryTit + ul.depth2 {display: block;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth2::after {content: ''; display: block; clear: both;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth2 li {float: left; width: 50%;}
.headerTop .gnb .gnbMenu .gnbBody ul.depth2 li a {padding: 7px 20px 8px 20px;}


/*******************************
*	찜 아이콘
********************************/
figure .favorit {position: absolute; bottom: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.3) url('../img/common/icon_favorit.png') 55% 60% no-repeat; background-size: 20px 18px; z-index: 3;}
figure .favorit.on {background-color: #ff4800;}


/*******************************
*	마감특가
********************************/
.finSale{ display:inline-block; height: 18px; margin-right: 3px; padding: 0px 8px; border-radius:10px; background-color:#f2644f; font-weight:500; font-size: 1.2rem; color:#fff; line-height: 18px; vertical-align: top;}


/*******************************
*	탭
********************************/
.tabCont {display: none;}
.tabCont.on {display: block;}


/*******************************
*	상품 리스트
********************************/
.imgInfo {width: 100%;}
.imgInfo > p {overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis;}
.imgInfo .companyName {padding-top: 9px; font-size: 1.2rem; color: #767676;}
.imgInfo .productName {height: 50px; padding-top: 10px; font-size: 1.4rem; color: #545454;display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 20px;}
.imgInfo .companyName + .productName {height: 40px; padding-top: 0;}
.imgInfo .totalPrice {padding-top: 8px; font-weight: 600; font-size: 1.5rem;}
.imgInfo .totalPrice em {padding-left: 2px; font-weight: 300; font-size: 1.1rem; color: #333; font-family: 'NotoSans';}
.imgInfo .totalPrice .discount {padding-right: 2px;}


/*******************************
*	탭바
********************************/
.tabbarArea {position: fixed; bottom: 0; left: 0; width: 100%; height: 74px; transition: all .3s ease-out; z-index:13; }
.tabbarArea .tabbarItem {display: flex; margin-top: 20px; box-shadow: 0px 0px 5px 0px #e5e5e5; background: rgba(255,255,255,.95);}
/* .tabbarArea.on {height: 74px;} */
.tabbarArea .tabbarItem a {flex-grow: 1; display: inline-block; padding: 13px 5px 19px 5px; text-align: center;}
.tabbarArea .tabbarItem a::before {content: ''; display: inline-block; width: 22px; height: 21px; background: url('../img/common/icon_tabbar.png') no-repeat; background-size: 115px 21px;}
.tabbarArea .tabbarItem a.mypage::before {background-position: -21px 0;}
/* .tabbarArea .tabbarItem a.center::before {background-position: -44px 0;} */
.tabbarArea .tabbarItem a.delivery::before {width: 26px; background-position: -89px 0;}
.tabbarArea .tabbarItem a.recommend::before {background-position: -66px 0;}
.tabbarArea .tabbarItem a.oasisLink {flex-shrink: 0; flex-grow: 0; width: 63px; margin: -20px 15px 0 0; padding: 0;}
.tabbarArea .tabbarItem a.oasisLink::before {width: 63px; height: 63px; border: 4px solid rgba(255,255,255,.95); border-radius: 50%; background: url('../img/common/icon_oasis.png') 0 -1px no-repeat; background-size: 110px 55px; box-shadow: 0px -4px 9px -5px #cdcdcd;}
.kimsOasis .tabbarArea .tabbarItem a.oasisLink::before {background-image: url(../../../mobile/img/kimsoasis/icon_oasis.png);}

/*******************************
*	푸터
********************************/
footer {padding-bottom:100px; background: #f6f6f6;}
.ftNotice {display: flex; padding: 12px 20px; font-size: 1.2rem; border-top: 1px solid #e1e1e1; background: #fff;}
.ftNotice::after {content: ''; display: block; clear: both;}
.ftNotice p.noticeTit {flex-shrink: 0; margin-right: 3px;}
.ftNotice p.noticeTxt {overflow: hidden; width: 100%; white-space: nowrap; text-overflow: ellipsis; word-break: keep-all;}
.ftNotice p.noticeTxt a {color: #333;}

.ftMenu {padding: 0 15px; border-top: 1px solid #e1e1e1;}
.ftMenu ul {display: table; table-layout: fixed; width: 100%;}
.ftMenu ul li {display: table-cell; text-align: center;}
.ftMenu ul li a {display: inline-block; padding: 15px 2px; font-size: 1.2rem; color: #545454;}

.ftCop {padding: 20px 15px 0 15px; border-top: 1px solid #e1e1e1; font-weight: 300; text-align: center;}
.ftCop .copyright {color: #767676;}
.ftCop .ftCompanyInfo {padding-top: 8px; color: #545454;}
.ftCop .ftCompanyInfo .ftInfoTit a {color: #333;padding:10px 0}
.ftCop .ftCompanyInfo .ftInfoTit::after {content: ''; display: inline-block; width: 10px; height: 6px; margin-left: 4px; background: url('../img/common/icon_arrow.png') no-repeat; background-size: 19px 6px;}
.ftCop .ftCompanyInfo .ftInfoTxt {display: none; padding-top: 5px; text-align: left;}

.ftCop .ftCompanyInfo.on .ftInfoTit::after {background-position: -9px 0;}
.ftCop .ftCompanyInfo.on .ftInfoTxt {display: block;}
.ftCop .ftCompanyInfo .ftInfoTxt .item {padding-top: 4px; }
.ftCop .ftCompanyInfo .ftInfoTxt dl dt {margin-right: 8px; color: #828282;}
.ftCop .ftCompanyInfo .ftInfoTxt dl dt,
.ftCop .ftCompanyInfo .ftInfoTxt dl dd {display: inline-block;}
.ftCop .ftCompanyInfo .ftInfoTxt dl dd a {color: #545454;}

.btn_top {display: none; position: fixed; bottom: 100px; right: 10px; width: 34px; height: 34px; padding: 8px 10px; border-radius: 50%; background: #000; z-index: 10;}
.btn_top::after {content: ''; display: inline-block; width: 14px; height: 19px; background: url('../img/common/icon_top.png') -14px 0 no-repeat; background-size: 28px 19px;}


/*해상도_350*/
@media screen and (max-width: 350px) {
  /*헤더*/
  /* .headerTop {height: 60px;} */
  /* .headerTop h1 {top: 10px;} */
  /* .headerTop h1 > a {display: block; margin: 0 auto 4px;} */
  /* .headerTop .gnb .menuHbg {top: 38px;} */
  /* .headerTop .headerBtn {top: 33px;} */
}

/* 킴스용 css */
.kimsCont_block {display:none !important;}
body:not(.kimsOasis) .kimsCont_block {display:none !important;}
.kimsOasis .kimsCont_block {display:inline-block !important}
.kimsOasis .kimsCont_none {display:none !important}

.oNumCountBox { display:inline-block; width:auto; height:32px; position:relative;  }
.oNumCountBox span.numInput { display:block; width:96px;height:32px; line-height:30px; padding:0px 30px; border:1px solid #e0e0e0; border-radius:5px; color:#333; text-align:center; font-size:14px;background-color:#fff;} 
.oNumCountBox a.numDown,.oNumCountBox a.numUp {width:32px; height:32px; line-height:30px; font-size:0; position:absolute; left:0;top:0;border:0;overflow:hidden; text-align:center; vertical-align:top; }
.oNumCountBox a.numUp {left:inherit;right:0;}
.oNumCountBox a.numDown:before,.oNumCountBox a.numUp:before { content:"\002D";color: #333;font-size: 18px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%)}
.oNumCountBox a.numUp:before {content:"\002B";}