@charset "utf-8";
/* CSS Document */
/**
 * custom css 입니다. 추가적인 css 는 여기에 작성을 해주세요.
 */


/* 인기상품 노출 설정 */
#wrap .popular-wrap { position:relative; left:0; top:0; width:220px; }
#wrap .popular-line .rank_top_box { width:100px; }
/* 스크롤 게시글 시작 */
#wrap .notice_rolling { position:absolute !important; bottom:10px; left:0; }
/*메인 배너 사이드 버튼 때문에 재정의 */
.main_visual { }


#sidebar .cart_area { position:absolute; top:130px; width:100%; text-align:center; }
#sidebar .cart_area a { position:relative; display:inline-block; width:32px; height:32px; }
#sidebar .cart_area .cart_icon { position:absolute; left:0; top:0; }
#sidebar .cart_area .count { line-height:32px; margin:0; padding:0; padding-top:3px; display:block; font-size:11px; font-weight:bold; }

#btnTop { display:none; position:absolute; bottom:30px; width:100%; text-align:center; }
#btnTop a { display:block; margin:auto; max-width:50px; padding:5px; }
#btnTop img { max-height:30px; }

#rightbar .sns_area { position:absolute; bottom:130px; width:100%; text-align:center; }
#rightbar .sns_area a { display:block; padding:7px; }
#rightbar .sns_area img { max-height:26px; }












.dropdown-container { list-style-type:none; margin:0; padding:0; position:relative; text-align:center; }
.dropdown-container > li { display:inline-block; height:60px; line-height:60px; padding:0 10px; }
.dropdown-container > li a { display: block; padding:0 10px; position: relative; color:#fff; font-size:14px; font-weight:500; }
.dropdown-container > li a:visited { display: block; padding:0 10px; position: relative; color:#fff; font-size:14px; font-weight:500; }
.dropdown-container > li a:hover { color:#fffc00; }
.dropdown-container > li a:focus { color:#fffc00; }
.dropdown-container > li a:active { color:#fffc00; }

.dropdown-container > li a:after { content:'＋'; font-size:12px; text-align:center; padding-left:10px; }
.dropdown-container > li.active a:after { content:'－'; font-size:12px; text-align:center; padding-left:10px; }
.dropdown-container > li.active a { color:#fffc00; }
.dropdown-container > li.active .dropdown a { color:#fff; }

.dropdown { display:none; width:100%; height:auto; position:absolute; left:0; top:60px;  background:rgba(0,0,0,0.6); }
.dropdown:hover { transition-duration:.4s; -webkit-transition-duration:.4s; -moz-transition-duration:.4s; -o-transition-duration:.4s;  }
.dropdown > ul { text-align:center; line-height:60px; }
.dropdown > ul li { display:inline-block; padding:0 10px; }
.dropdown > ul li a { font-size:12px; font-weight:400; color:#fff; }
.dropdown > ul li a:hover { color:#fffc00; }
.dropdown > ul li a:after { display:none; font-size:0; }

.clearfix:before,
.clearfix:after {
    display: block;
    content: "";
    height: 0;
    overflow: hidden;
}

.clearfix:after {
    clear: both;
}











.overlay_navbar_header { 
    position: fixed; 
    width:12%; 
    right:0; 
    top:125px; 
    text-align:center;
    z-index:333;
}

.overlay_toggle_button {
    position: reiative;
    height: 32px;
    width: 32px;
    margin:auto;
    cursor: pointer;
}

.bar {
    background-color: #000;
    display: block;
    width: 100%;
    height: 3px;
    border: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
}
.bar + .bar {
    margin-top: 6px;
}
.middle {
    top: 11px;
}
.bottom {
    top: 22px;
}
.overlay_toggle_button:hover {
    opacity: .7;
}
.overlay_toggle_active .bar {
    background-color: #000;
}
.overlay_toggle_active .top {
    -webkit-transform: translateY(6px) translateX(0) rotate(45deg);
}
.overlay_toggle_active .middle {
   opacity: 0;
}
.overlay_toggle_active .bottom {
    -webkit-transform: translateY(-12px) translateX(0) rotate(-45deg);
}

.menu_icon {
    display:block;
    background:url('../img/common/menu_icon.png') no-repeat;
	background-size:32px auto;
    height:32px;
    width:32px;
}

.overlay_toggle_active .menu_icon {
    background:url('https://www.bodyx.co.kr/data/skin/front/hazel_93/img/common/close_icon.png') no-repeat;
}

.overlay {
    position:fixed;
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    background:rgba(255,255,255,0.9);
    background:url(../img/codi/default_outbg.jpg) repeat;
    
    top: 0;
    left:0;
    width:100%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    z-index:222;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    
}
.overlay_nav_active {
    opacity:0.9;
    visibility: visible;
    height: 100%;
/*    max-height: 340px;*/
}


.overlay .overlay_in { position:absolute; top:40%; left:50%; transform: translate(-50%, -40%); -ms-transform: translate(-50%, -40%); width:100%; }
.overlay .overlay_center { max-width:1000px; margin:auto; line-height:2em; font-size:14px; text-align:left; }

.overlay .overlay_logo { width:100%; text-align:left; margin:0 0 80px; font-family: 'DM Serif Display', serif; line-height:1em; }
.overlay .overlay_logo a { width:100%; font-size:320%; }

.overlay .overlay_menu { display:inline-block; width:24%; text-align:left; vertical-align:top; font-weight:500; }
.overlay .overlay_menu h2 { font-size:1.1em;  font-weight:bold; margin:0 0 10px; }














.search_navbar_header { 
    position: fixed; 
    width:12%; 
    right:0; 
    top:175px; 
    text-align:center;
    z-index:333;
}

.search_toggle_button {
    position: reiative;
    height: 32px;
    width: 32px;
    margin:auto;
    cursor: pointer;
}


.search_toggle_button:hover {
    opacity: .7;
}

.search_icon {
    display:block;
    background:url('../img/common/search_icon.png') no-repeat;
    background-position:center;
	background-size:26px auto;
    height:32px;
    width:32px;
}

.search_toggle_active .search_icon {
    background:url('https://www.bodyx.co.kr/data/skin/front/hazel_93/img/common/close_icon.png') no-repeat;
}

.search_overlay {
    position:fixed;
    background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
    background:rgba(255,255,255,0.9);
    background:url(../img/codi/default_outbg.jpg) repeat;
    
    top: 0;
    left:0;
    width:100%;
    height: 0;
    visibility: hidden;
    opacity: 0;
    z-index:222;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    
}
.search_nav_active {
    opacity:0.9;
    visibility: visible;
    height: 100%;
/*    max-height: 340px;*/
}


.search_overlay .search_overlay_in { position:absolute; top:40%; left:50%; transform: translate(-50%, -40%); -ms-transform: translate(-50%, -40%); width:100%; }
.search_overlay .search_overlay_center { max-width:1000px; margin:auto; line-height:2em; font-size:15px; text-align:center; }










.side_search { position:relative; max-width:400px; margin:auto; }

.side_search_cont { }
.side_search_cont:after {display:block; clear:both; content:"";}
/* 검색창 */
.side_search_form { position:relative; max-width:400px; border-bottom:2px solid #000; background:none; z-index:110; }
.side_search_form legend { display:none; }
.side_search_form .side_search_cont { }
.side_search_form .side_text_cont { width:400px; background:none; }
.side_search_form .side_text_cont input{border:none 0; vertical-align:top;}
.side_search_form .side_text_cont input::-webkit-input-placeholder {}
.side_search_form .side_text_cont input::-moz-placeholder { }
.side_search_form .side_text_cont input:-ms-input-placeholder {line-height:10px;}
.side_search_form .side_text_cont .side_srarch_text { width:100%; height:40px; line-height:40px; padding:0 0 0 40px; box-sizing:border-box; background:none; }
.side_search_form .side_text_cont .btn_side_srarch { position:absolute; top:8px; left:0px; max-height:25px; }
.side_search_form .side_text_cont .btn_side_srarch img { max-height:25px; }
.side_search_form .search_cont { display:block; margin:0; font-size:0; border-top:1px solid #cccccc; background:none;}