/* BASIC css start */
/* BASIC css start */
body{padding-top:137px;}


#mask { display:none; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:200 }
 

.quickBtn{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:1001;
}

.quickBtn li{
    margin-bottom:10px;
    width:48px;
    height:48px;
    border-radius:25px;
    overflow:hidden;
    background:#fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
    
}

.quickBtn li:first-child{
    background:#7650e0;
}

.quickBtn li:last-child{
    margin-bottom:0;
}

.quickBtn li a{
    display:block;
    line-height:48px;
    text-align:center;
    
}  
#srch_box{}

#srch_box .triangle{
    width: 1200px;
    margin: 0 auto;
    position: relative;
    }
    
#srch_box .triangle img{
    position: absolute;
    right: 8px;
    top: -84px;}


#allmenu{}

#allmenu .triangle{
    width: 1750px;
    margin: 0 auto;
    position: relative;
    }
    
#allmenu .triangle img{
    position: absolute;
    left: 1px;
    top: -74px;}


body {overflow-y: scroll;height: 100%;}

#f2s-ranking .keywords li a{
    display: block;
    width: 83%;
    overflow: hidden;
    margin: 0 auto;
    white-space: nowrap;
    padding-left: 0 !important;
    text-overflow: ellipsis}

#f2s-ranking{
    margin-left: 316px;
    float: left;
    width: 327px;
    height: 278px;}
    
#f2s-ranking .keyword-wrap{
    height: 238px;
    border: 0;
    padding-left: 35px;
    padding-top: 0;
    margin-top: -5px;}

#f2s-ranking .title-wrap h3{
    line-height: 26px;
    background: #fff;
    border: 0;
    color: #0b0b0b;
    font-size: 12px;
    font-family: dotum;
    padding-top: 14px;
    padding-left: 35px;
    display: block;
    overflow: visible;
    height: 45px;}

#f2s-ranking .title-wrap h3::after{
    content: "-";
    width: 167px;
    height: 3px;
    position: absolute;
    background: #f3f3f3;
    bottom: 15px;
    left: 116px;
    font-size: 0;}

#f2s-ranking .keywords{height:auto !important;}

#f2s-ranking .keywords li{
    position: relative;
    overflow: hidden;
    margin: 0 5px 2px 0px;
    list-style: none;}

#f2s-ranking .keywords-sub{
    overflow: initial;
    margin-top: -110px;}

/*search toggle*/
/* full search */
.full-search {
    top: 105px;
    /*transition: all 0.2s ease;*/
    display: none;
    position: absolute;
    width: 100%;
    _height: 420px;
    padding: 70px 0;
    background-color: #fff;
    background-color: #f3f3f3;
    border-bottom: solid 1px #dcdcdc;
    z-index: 22222;
}

body.topbnrshow #srch_box{}

body.topbnrhide #srch_box{}

body.topbnrshow .full-search{
    top: 148px;}
body.topbnrshow .full-search.fixed{
    z-index: 1;
    top: 95px;
    position: absolute;}
body.topbnrhide .full-search{
    top: 90px;}
body.topbnrhide .full-search.fixed{
    top: 55px;}

.full-search .search-owl {
    position: absolute;
    top: 0;
    left: 115px;
    width: 200px;
    height: 278px;
    overflow: hidden;
}

.full-search .search-owl .swiper-slide img{width:100%}

.full-search.fixed{
    position: fixed;
    top: 95px;
    }

.search_roll {
    height: 185px;
    margin-top: 25px;
    text-align: center;
    overflow: hidden;
}

.search_roll li {
    margin: 12px 0;
}

.search_roll li a {
    font-size: 15px;
    color: #a0a0a0;
}

.search_roll li.active a {
    padding: 10px 70px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    color: #222 !important;
    background-color: #fff;
    border-radius: 50px;
    transition: all 0.5s ease;
}
  
/* form-search */
.form-search-input {
    display: block;
    position: relative;
    width: 507px;
    height: 66px;
    font-size: 16px;
    border: 3px solid #d7d7d7;
    background: transparent;
    outline: none;
    transition: border-color 0.5s ease;
    text-indent: 15px;
    background: #fff;
}

.form-search-input:focus {
    border: 3px solid rgba(190, 190, 190, 1);
}

.form-search-input::placeholder{color:#000; font-size:15px}

.form-search .search-on_me-big {
    position: absolute;
    top:21px;
    right: 19px;
}

.form-search .search-on_me-big span:first-child {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: solid 2px #272727;
    border-radius: 50px;
}

.form-search .search-on_me-big span:last-child {
    position: absolute;
    top: 13px;
    right: 0;
    width: 2px;
    height: 9px;
    background-color: #272727;
    transform: rotate(-45deg);
}  
/* slider */
.owl-theme .list-icon-wrap img,
.owl-theme .prd-ico img {
    display: inline-block;
    width: auto;
}

.owl-theme .owl-nav {
    margin-top: 10px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-nav [class*='owl-'] {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 33%;
    color: #FFF;
    font-size: 14px;
    margin: 5px;
    padding: 4px 7px;
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
    transition: all 500ms ease;
}

.owl-theme .owl-nav [class*='owl-']:hover {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
    text-decoration: none;
}

.owl-theme .owl-nav .disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
    cursor: default;
}

.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 13px;
}

.owl-theme .owl-dots {
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.owl-theme .owl-dots .owl-dot span {
    width: 37px;
    height: 2px;
    margin: 10px 0;
    background: rgba(205, 205, 205, 0.5);
    display: block;
    -webkit-backface-visibility: visible;
    transition: all 500ms ease;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: rgba(190, 190, 190, 1);
}








/* full menu */
.layout-header .full-menu {
    padding-top: 60px;
    padding-bottom: 60px;
    _height: 600px;
    _overflow: auto;
    font-family: 'Lora','Nanum Gothic',serif;
    display: none;
    position: absolute;
    _top: 229px;
    width: 100%;
    _padding: 70px;
    background-color: #f1f1f1;
    border-bottom: solid 1px #dcdcdc;
    z-index: 555;
}

.layout-header .full-menu.fixed{
    z-index: 2222;
    position: fixed;
    top: 95px;
    z-index: 1;

}

.layout-header .full-menu *{
   _font-family: 'Lora','Nanum Gothic',serif;}
    
    
.layout-header .full-menu .cs_info{
    padding-top: 30px;
    display: block;
    clear: both;}

.layout-header .full-menu .cs_info h1{
    font-size: 18px;
    color: #000000;
    letter-spacing: 1px;
    margin-bottom: 9px;}
    
.layout-header .full-menu .cs_info ul{}
.layout-header .full-menu .cs_info ul li{
font-family: "Red Hat Display", 'Pretendard', sans-serif;
 font-size: 12px;
    color: #737373;}
.layout-header .full-menu .cs_info ul li em{}
.layout-header .full-menu .cs_info .icons{
    display: block;
    margin-top: 10px;}
    
.layout-header .full-menu .cs_info .icons img{
    display: inline-block;
    margin-right: 2px;
    cursor:pointer;
    vertical-align: top;}




.layout-header .container .sr-only{font-size: 17px; margin: 20px 0 25px;}


.layout-header .full-menu h2 {
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 35px;
    color: #0b0b0b;
    letter-spacing: -1px;
}

.layout-header .full-menu h3 {
    margin-top: 0;
    font-size: 15px;
    margin-bottom: 9px;
}

.layout-header .full-menu .cscenter-on_me ul {
    line-height: 28px;
}

.layout-header .full-menu .community-on_me ul {
    line-height: 28px;
}

.layout-header .full-menu .mypage-on_me ul li {
    margin-top: 2px;
}

.layout-header .full-menu ul {
    line-height: 30px;
}

.layout-header .full-menu ul li {
    float: left;
    clear: both;
    position: relative;
    font-size: 13px;
    padding-bottom: 2px;
}


.layout-header .full-menu ul li:nth-last-child(1){}

.layout-header .full-menu ul li:nth-last-child(1) a{}

.layout-header .full-menu ul li a {
    color: #737373;
    font-size: 12px;
    height: 23px;
    display: block;
}

.layout-header .full-menu ul li a:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    width: 0;
    height: 7px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.07);
    transition: width 0.4s ease;
}

.layout-header .full-menu .nav-category {
    width: calc(100% - 678px);
    font-size: 0;
    border-right: solid 2px #ffffff;
    display: inline-block;
}

.layout-header .full-menu .nav-category > ul {
    display: inline-block;
    width: 139px;
    margin-bottom: 3%;
    vertical-align: top;}

.layout-header .full-menu .nav-category > ul:nth-child(1){margin-left:0 !important}

.layout-header .full-menu .nav-category > ul.exhibition {
    width: 29%;
}

.layout-header .full-menu .nav-category > ul.exhibition li {
    margin-top: 2px;
}

.layout-header .full-menu .navlist-group {
    float: left;
    width: 16.66%;
}

.layout-header .full-menu .navlist-group ul:nth-child(2) {
    margin-top: 85px;
}

.layout-header .full-menu .navlist-group ul:nth-child(3) {
    margin-top: 10px;
}

.layout-header .full-menu .nav-option {
    display: inline-block;
    width: 485px;
    margin-left: 0;
    vertical-align: top;
    float: right;
    text-align: right;
}

.layout-header .full-menu .nav-option .community-on_me {
    float: left;
    width: 50%;
    margin-top: 20px;
}

.layout-header .full-menu .nav-option .cscenter-on_me {width: 156px;
    display: inline-block;
    vertical-align: top;
    text-align: left;
}

/*.layout-header .full-menu .nav-option .cscenter-on_me li:first-child {font-size:15px;} 고객센터 번호제거*/
.layout-header .full-menu .nav-option .mypage-on_me {

    width: 160px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

.layout-header .full-menu .fullmenu-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 240px;
    height: 310px;
    overflow: hidden;
}

.layout-header .full-menu .nav-category h3 a {
    position: relative;
}

.layout-header .full-menu .nav-category h3 a span{
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 12px !important;
    color: #0b0b0b !important;}

.layout-header .full-menu .nav-category h3 span.text-en {
    display: inline-block;
    opacity: 1;
    position: relative;
    width: 100%;
    transition: all 0.3s ease;
}

.layout-header .full-menu .nav-category h3 span.text-kr {
    display: inline-block;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 2px;
    width: 100%;
    transition: all 0.3s ease;
    _font-family: 'Lora','Nanum Gothic',serif !important;
}

.layout-header .full-menu .nav-category h3:hover span.text-en {
    opacity: 0;
}

.layout-header .full-menu .nav-category h3:hover span.text-kr {
    opacity: 1;
    font-size: 14px;
}

.layout-header .full-menu .nav-category .titleopen:hover span.text-en {
    opacity: 0;
}

.layout-header .full-menu .nav-category .titleopen:hover span.text-kr {
    opacity: 1;
}

.layout-header .full-menu .nav-category .tinytitle {
    font-size: 15px;
    font-weight: 400;
}

.layout-header .container {
    position: relative;
    width: 1750px;
    margin: 0 auto;
    display: table;
}

.snb nav .nav-sub-pop ul li.active a:after, .snb nav .nav-sub-pop ul li:hover a:after, .full-menu ul li:hover a:after {
    width: 100%;
}






#srch_ico {
    padding-right: 5px;
}
#srch_ico a{background:url('/design/theonme/img/srch_ico.png') no-repeat; background-size:contain;background-position:center;display:block; width:27px;height:20px;}
#srch_ico.on a{background:url('/design/theonme/img/x_ico.png') no-repeat; background-size:15px;background-position:center;display:block; width:27px;height:20px;}
#srch_ico a img{opacity:0}
 

/***********************************************************************
                        *메인 페이지 영역*
************************************************************************/
/********* layout-header 영역 *********/
.max-width-1400 {
    min-width: 1280px !important;
    max-width: 1750px !important;
}
.layout-header {
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    width: 100%;
    height: 160px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
    background: #fff;
}
.layout-header .header-frame {
  width: 100%;
}
.layout-header.fixed .header-frame {
  position: fixed;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid #EFEFEF;
  background-color: #FFFFFF;
}
.layout-header .original-header {
  width: 100%;
  position: relative;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-color: #ffffff;
  margin-bottom: 20px;
}
.layout-header.fixed .original-header {
  width: 100%;
  z-index: 1001;
}

.kakao_6000{
margin-left: 82.5%;
    position: relative;
    top: 45%;
    z-index: 999;
}

.kakao_6000 img{
height:22px;
}



.top-menu {
  width: 100%;
  height: 26px;
  padding-top: 38px;
  padding-bottom: 42px;
  font-size: 0;
}
.layout-header.fixed .original-header .top-menu {
  height: 17px;
  padding-top: 16px;
  padding-bottom: 19px;
}
.top-menu-group {
  position: relative;
  display: inline-block;
  width: 33.3%;
  height: 100%;
}
.top-menu-group.left {
}
.top-menu-group.left ul {
  display: table;
  height: 100%;
}
.top-menu-group.left ul li {
  display: table-cell;
  height: 100%;
  vertical-align: bottom;
  padding-left: 12px;
}
.top-menu-group.left ul li > a {
  text-decoration: none;
  font-family: Arial;
  font-size: 11px;
  color: #0B0B0B !important;
}
.top-menu-group.left ul li > a:hover {
  color: #FF95A9 !important;
}
.top-menu-group.left ul li.other-lang {
  margin: 0;
  padding-left: 4px;
}
.top-menu-group.left ul li.other-lang:first-child {
  padding-left: 0;
}

.top-menu-group.middle {
}
.top-menu-group.middle>h1 {
  font-size: 0;
  text-align: center;
}

.top-menu-group.right {
  text-align: right;
}
.top-menu-group.right .top-menu-list {
  display: table;
  height: 11px;
  float: right;
  margin-top: 15px;
}
.layout-header.fixed .top-menu-group.right .top-menu-list {
  margin-top: 6px;
}
.top-menu-group.right .top-menu-list>li {
    position: relative;
  display: table-cell;
  height: 100%;
  vertical-align: bottom;
  padding-left: 10px;
}
.top-menu-group.left .top-menu-list>li:first-child {
  padding-left: 0;
}
.top-menu-group.right .top-menu-list>li > a {
  text-decoration: none;
  font-family: dotum, Arial;
  font-size: 11px;
  color: #222222 !important;
}
.top-menu-group.right .top-menu-list>li > a:hover {
  color: #FF95A9 !important;
}
.top-menu-group.right .drop-menu {
  display: none;
  position: absolute;
  left: 0;
  z-index: 550000;
  _width: max-content;
}

.top-menu-group.right .drop-menu>ul {
  background-color: #edece7;
  padding: 10px 15px;
}
.top-menu-group.right .drop-menu>ul>li {
  background-color: #edece7;
  text-align: left;
  padding: 5px 0;
}
.top-menu-group.right .drop-menu>ul>li a {
    width: 100%;
  color:#000000;
  font-size: 11px; 
    white-space: pre;
    text-overflow: ellipsis;
}
.top-menu-group.right .drop-menu>ul>li a:hover {
  color:#000000;
  text-decoration: underline;
}

.main-menu {
  height: 41px;
  width: 100%;
  margin: 0 auto;
  *width: 1280px;
  height: 22px;
}
.main-menu ul {
  width: 100%;
  height: 22px;
  display: table;
}
.main-menu ul li {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
    margin-right: 35px;
}
.main-menu ul li a.c_red{
  color:#CB4B4B !important;
}
.main-menu ul li:hover a.c_red{
  color:#CB4B4B !important;
}



.main-menu ul li:hover a.c_blue{
  color:#72bee1 !important;
}



.main-menu ul li:hover a.c_beige{
  color:#000000 !important;
}

.main-menu ul li a.c_purple{
  color:#d37be9 !important;
}

.main-menu ul li:hover a.c_purple{
  color:#d37be9 !important;
}



.main-menu ul li ul.depth-2{
    display:none;
    position: absolute;
    top:42px;
    left: 50%;
    margin-left:-60px;
    padding: 10px 15px;
    background-color: rgba(237, 236, 231, 0.85);
    
    z-index: 550000;
}

.main-menu ul li ul.depth-2.last{
    left: auto;
    right:0;
    margin-left:0;
}

.main-menu ul li:hover ul.depth-2{
    display:table;
    width:100px;
}

.main-menu ul li ul.depth-2 li{
    display:block;
    padding: 5px 0;
}

.main-menu ul li ul.depth-2 li a{
    font-weight:normal;
    font-size:11px;
    font-family: dotum, Arial;
}

.main-menu ul li ul.depth-2 li:hover a{
    text-decoration:underline;
    color:#222 !important;
}

#all_ico{}
#all_ico a{display:block; width:20px; height:16px; padding-bottom:0; background:url('/design/theonme/img/ham_ico.png') no-repeat; background-position:center; background-size:contain;}
#all_ico a img{opacity:0}
#all_ico.on{}
#all_ico.on a{background:url('/design/theonme/img/x_ico.png') no-repeat; background-position:center; background-size:contain;}

.main-menu ul li > a {
  padding-bottom:28px;
  font-family: Arial, "Nanum Barun Gothic";
  font-size: 12px;
  color: #222222 !important;
  white-space: nowrap;
}
.main-menu ul li > a.reverse {
  color: #FF6666 !important;
}
.main-menu ul li > a.block {
  color: #FFFFFF !important;
  background-color: #0B0B0B;
  padding: 0px 6px;
}
.main-menu ul li:hover > a {
  color: #FF95A9 !important;
}
.main-menu ul li > a.reverse:hover {
  color: #222222 !important;
}
.main-menu ul li > a.block:hover {
  color: #FF95A9 !important;
}


.main-menu ul li .search-area {
  position: absolute;
  width: 230px;
  border-bottom: 1px solid black;
  bottom: 0;
  right: 0;
  font-size: 0;
}
.main-menu ul li .search-area form {
  padding:0;
  margin:0;
  font-size: 0;
}
.main-menu ul li .search-area input {
  margin-top: 4px;
  text-align: center;
  width: 210px;
  font-size: 12px;
}
.main-menu ul li .search-area input.admode {
  color: #555555;
}
 
.keywordlist{}
.keywordlist .swiper-wrapper{
    transform: translate3d(0,0,0) !important;
    text-align: left;
    display: block;}
    
    
.keywordlist .swiper-slide{
    margin-bottom: 30px;
    transition: all 0.5s ease;}
    
.keywordlist .swiper-slide a{
    transition: all 0.5s ease;
    font-size: 13px;
    color: #5e5e5e;
    font-family: dotum;
    display: block;
    text-indent: 5px;}


.keywordlist .swiper-slide.swiper-slide-active{ background:#fff; border-radius:100px}
.keywordlist .swiper-slide.swiper-slide-active a{color:#0b0b0b; font-size:14px;  padding: 7px 0;font-weight:bold;}
    
/* 검색창 리뉴얼 */
#srch_box .container {
    display: flex;
}



#srch_box .container h3 {
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 400;
}

#srch_box .container .hot_keword {
    width: 60%;
    padding-right: 5%;
    box-sizing: border-box;
}
#srch_box .container .hot_keword .hot_keword_box {
    background: #efefee;
    /* display: flex; */
}

#srch_box .container .hot_keword .hot_keword_box ul {
    width: 50%;
    padding: 30px 30px 14px 30px;
}

#srch_box .container .hot_keword .hot_keword_box ul li {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#srch_box .container .hot_keword .hot_keword_box ul li a {
    font-size: 13px;
    font-weight: 400;
}
#srch_box .container .hot_keword .hot_keword_box ul li a:hover{font-weight:700;}

#srch_box .container .hot_keword .hot_keword_box ul li a .sort {
    font-weight: 700;
    margin-right: 7px;
}
 

#srch_box .container .hot_keword .hot_keword_box ul li .rank {
    position: relative;
    font-weight: 700;
}
#srch_box .container .hot_keword .hot_keword_box ul li .rank.same::before {
    content: "";
    background: #000;
    width: 8px;
    height: 1px;
    position: absolute;
    top: 0;
    left: -8px;
}

#srch_box .container .hot_keword .hot_keword_box ul li .rank.up::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 7px solid red;
    top: -1px;
    left: -3px;
    position: relative;
}
#srch_box .container .searchArea {
    width: 40%;
    position: relative;
    box-sizing: border-box;
}

#srch_box .container .searchArea .search {
    width: 100%;
    height: 66px;
    font-size: 16px;
    border: 3px solid #d7d7d7;
    background: #fff;
    position: relative;
}

#srch_box .container .searchArea .search input {
    padding: 0 15px;
    width: 92%;
    height: 66px;
    box-sizing: border-box;
    outline: none;
    border:0;
    font-size: 16px;
    color:#000;
    }

#srch_box .container .searchArea .search a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
}

#srch_box .container .searchArea .hot_product {
    margin-top: 30px;
}

#srch_box .container .searchArea .hot_product ul {
    display: flex;
    gap: 8px;
}

#srch_box .container .searchArea .hot_product ul li {}

#srch_box .container .searchArea .hot_product ul li .imgBox {}

#srch_box .container .searchArea .hot_product ul li .imgBox img {
    width: 100%;
}

#srch_box .container .searchArea .hot_product ul li .textBox {
    margin-top: 8px;
}

#srch_box .container .searchArea .hot_product ul li .textBox .g_name {
    font-size: 11px;
}


#srch_box .container .searchArea .hot_product ul li .textBox .g_dc_per {
    font-size: 11px; 
    font-color: #d91414;
}


#srch_box .container .searchArea .hot_product ul li .textBox .g_normal {
    font-size: 11px;
    font-color: #d5d5d5;
}


#srch_box .container .searchArea .hot_product ul li .textBox .g_consumer {
    font-size: 11px;
}



#srch_box .container .searchArea .hot_product ul li .textBox .g_price {
    margin: 5px 0;
    font-size: 11px;
}

#srch_box .container .searchArea .hot_product ul li .textBox .g_icon {}

#srch_box .container .searchArea .hot_product ul li .textBox .g_icon img {
} 
#srch_box .container .hot_keword .mk_new_ranking {
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
}

#srch_box .container .hot_keword .mk_new_ranking .mk_title_wrap {
    display: none;
}

#srch_box .container .hot_keword .mk_new_ranking .mk_keyword_wrap {
    display: flex;
}


/* BASIC css end */