@charset 'utf-8';

/*
 * Copyright    :    ONEDAYNET.CO.KR
 * SOLUTION     :    HYSSENCE 3.0
 * Directory    :    pages/css/
 * File         :    hyssence.css
 * SUMMARY      :    (스킨별) 헤더/푸터/메인페이지 영역
 */



/* ********************************************** *
 * 헤더
 * ********************************************** */
.header {background:#fff; display:flex; justify-content: center; align-items: flex-start; flex-direction:column; height:70px; padding:0 15px;}
.header li {list-style:none;}

.header .logo {font-size:0px;}
.header .logo img {height:30px;}
.header .logo a {font-size:0px;}





/* ********************************************** *
   1차 카테고리
 * ********************************************** */
.nav {background:#222;}
.nav li {list-style:none;}
.nav .scroll_box {overflow-y:hidden; overflow-x:auto;}
.nav .scroll_box::-webkit-scrollbar { display: none;}
.nav .scroll_box ul {display:flex; justify-content: flex-start; align-items: center; flex-direction:row; width:max-content; padding:0 10px;}
.nav .scroll_box li {}
.nav .scroll_box .ctg1 {padding:0 5px; font-size:15px; white-space:nowrap}
.nav .scroll_box .ctg1 .tx {color:#a9a9a9; font-weight:500; position:relative; padding:0 10px; display:flex; justify-content: center; align-items: center; flex-direction:column; height:55px; position:relative;}
.nav .scroll_box .ctg1 .tx:before {content:""; height:5px; background:#fafafa; border-radius:100px; position:absolute; left:0; bottom:0;}
.nav .scroll_box .ctg1 .tx:before {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; width:0px;}
.nav .scroll_box .hit .ctg1 .tx {color:#fff;}
.nav .scroll_box .hit .ctg1 .tx:before {width:100%;}






/* **************************************** *
   메인 문구
 * **************************************** */
.ma_who {padding:20px 0; background:#fafafa;}
.ma_who .name {color:#000; font-size:19px; font-weight:500; letter-spacing:-0.5px; line-height:1.5;}
.ma_who .name strong {display:block;}





/* **************************************** *
   2차 카테고리
 * **************************************** */
.nav_next {padding:15px; padding-top:0px; background:#fafafa;}
.nav_next li {list-style:none;}
.nav_next .rolling_wrap {background:#fff; border-radius:10px; border:1px solid #f2f2f2; box-shadow:0px 0px 3px rgba(0,0,0,0.02); padding-bottom:20px; overflow:hidden;}
.nav_next .rolling_box {}
.nav_next .rolling_box ul {display:flex; justify-content: flex-start; align-items: flex-start; flex-direction:row; flex-wrap:wrap}
.nav_next .rolling_box li {width:25%; text-align:center; margin-top:20px;}
.nav_next .ctg2 {display:block;}
.nav_next .ctg2 .pic {width:52px; height:52px; border-radius:100px; overflow:hidden; background:#f5f5f5;}
.nav_next .ctg2 .pic img {width:100%; height:100%; border-radius:100px; }
.nav_next .ctg2 .tx {display:block; color:#333; line-height:1.2; word-wrap:break-word; word-break:keep-all; white-space:normal; margin-top:5px; font-size:12px; padding:0 5px;}
.nav_next .rolling_icon {display:flex; justify-content: center; align-items: center; flex-direction:row; margin:20px 0 10px;}
.nav_next .rolling_icon .icon {background:#eee; border-radius:100px; width:6px; height:6px; margin:0 3px;}
.nav_next .rolling_icon .icon.active {background:#000;}






/* **************************************** *
   1차 카테고리별 배너 2종
 * **************************************** */
.ma_bn_dp1 {}
.ma_bn_dp1 li {list-style:none;}

.ma_bn_dp1 .bn_full {position:relative; overflow:hidden;}
.ma_bn_dp1 .bn_full .rolling_box {overflow:hidden;}
.ma_bn_dp1 .bn_full .bn_box {position:relative; overflow:hidden; font-size:0px;}
.ma_bn_dp1 .bn_full .bn_box img {width:100%;}
.ma_bn_dp1 .bn_full .pagi {position:absolute; right:8px; bottom:6px; background:rgba(0,0,0,0.5); border-radius:100px; width:30px; height:18px; z-index:3}
.ma_bn_dp1 .bn_full .pagi {display:flex; justify-content: center; align-items: center; flex-direction:row; color:rgba(255,255,255,0.8); letter-spacing:0px; font-size:10px;}
.ma_bn_dp1 .bn_full .pagi strong {color:#fff; line-height:1;}

.ma_bn_dp1 .bn_rank {margin-top:30px;}
.ma_bn_dp1 .bn_rank .tit {color:#000; font-size:19px; font-weight:500; letter-spacing:-0.5px; line-height:1.5; padding:0 20px;}
.ma_bn_dp1 .bn_rank .scroll_box {overflow-X:hidden; overflow-X:auto; padding-left:15px; margin-top:15px; box-sizing:border-box; padding-bottom:5px;}
.ma_bn_dp1 .bn_rank .scroll_box::-webkit-scrollbar {height: 4px; }
.ma_bn_dp1 .bn_rank .scroll_box::-webkit-scrollbar-thumb { background-color: #ccc; border-radius:100px; }
.ma_bn_dp1 .bn_rank .scroll_box::-webkit-scrollbar-track {background-color: #fff;}

.ma_bn_dp1 .bn_rank .scroll_box ul {display:flex; justify-content: flex-start; align-items: center; flex-direction:row; width:max-content; padding-right:15px;}
.ma_bn_dp1 .bn_rank .scroll_box li {background:#f6f9fe; border-radius:5px; width:95px;}
.ma_bn_dp1 .bn_rank .scroll_box li+ li {margin-left:5px;}
.ma_bn_dp1 .bn_rank .bn_box {display:flex; justify-content: stretch; align-items: center; flex-direction:column; padding:10px; padding-bottom:15px;}
.ma_bn_dp1 .bn_rank .bn_box .rank {color:#333; font-weight:500; text-align:left; width:100%; font-style:italic; font-size:14px; line-height:1;}
.ma_bn_dp1 .bn_rank .bn_box .tx {color:#333; line-height:1.2; margin-top:10px; font-size:11px; text-align:center;}
.ma_bn_dp1 .bn_rank .bn_box .pic {width:55px; height:55px; border-radius:100px; overflow:hidden; background:#f5f5f5; position:relative;}
.ma_bn_dp1 .bn_rank .bn_box .pic img {width:100%; height:100%; border-radius:100px; }
.ma_bn_dp1 .bn_rank .bn_box.hit .pic:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; box-sizing:border-box; border:1px solid #ff0000; border-radius:100px; z-index:2}
.ma_bn_dp1 .bn_rank .bn_box.hit .pic:after {content:""; width:100%; height:100%; position:absolute; left:0; top:0; box-sizing:border-box; border:4px solid #fff; border-radius:100px; z-index:1}
.ma_bn_dp1 .bn_rank .scroll_box li:nth-child(n+4) .bn_box .rank {color:#ccc;}

.ma_bn_dp1 .bn_rank .goods_list {position:relative; overflow:hidden; margin-top:15px; padding:0 15px;}
.ma_bn_dp1 .bn_rank .goods_list li+ li {margin-top:20px;}
.ma_bn_dp1 .bn_rank .goods_box {position:relative; overflow:hidden; border-radius:10px;}
.ma_bn_dp1 .bn_rank .goods_box .thumb {overflow:hidden; position:relative; font-size:0px;}
.ma_bn_dp1 .bn_rank .goods_box .thumb img {width:100%;}
.ma_bn_dp1 .bn_rank .goods_box dl {background:#333; padding:20px 15px;}
.ma_bn_dp1 .bn_rank .goods_box dt {color:#fff; line-height:1.4; font-size:15px;}
.ma_bn_dp1 .bn_rank .goods_box dd {display:flex; justify-content: flex-start; align-items: center; flex-direction:row; color:#fff; line-height:1; margin-top:10px; font-size:17px;}
.ma_bn_dp1 .bn_rank .goods_box dd span {display:flex; justify-content: flex-start; align-items: center; flex-direction:row}
.ma_bn_dp1 .bn_rank .goods_box .per {font-size:21px; margin-right:10px; font-weight:600;}
.ma_bn_dp1 .bn_rank .goods_box .after {font-size:21px; font-weight:600; margin-right:5px;}
.ma_bn_dp1 .bn_rank .goods_box .before {font-size:0.9em; opacity: 0.5; filter: alpha(opacity=50); -ms-filter:alpha(opacity=50); margin-top:auto; padding-bottom:2px; position:relative;}
.ma_bn_dp1 .bn_rank .goods_box .before:before {content:""; width:100%; height:1px; position:absolute; left:0; top:50%; background:rgba(255,255,255,0.9); margin-top:-1px;}
.ma_bn_dp1 .bn_rank .goods_box .before
.ma_bn_dp1 .bn_rank .goods_box dd em {font-size:0.8em;}



@media screen and (max-width:480px) {
	.ma_bn_dp1 .bn_rank .scroll_box::-webkit-scrollbar {display:none;}
}





/* **************************************** *
   하단고정메뉴
 * **************************************** */
.fix_bottom {background:#fff; position:fixed; left:0; bottom:0; z-index:100; border-top:1px solid #f2f2f2; width:100%; box-sizing:border-box; padding:0 5px;}
.fix_bottom ul {display:flex; justify-content: center; align-items: center; flex-direction:row;}
.fix_bottom li {flex:1; list-style:none;}
.fix_bottom .btn {display:block; display:flex; justify-content: center; align-items: center; flex-direction:column; height:70px; box-sizing:border-box; position:relative;}
.fix_bottom .btn svg {width:21px; height:21px;}
.fix_bottom .btn img {width:21px; height:21px;}
.fix_bottom .btn svg.off {}
.fix_bottom .btn svg.on {display:none;}
.fix_bottom .btn svg {fill:#333 }
.fix_bottom .tx {color:#aaa; font-size:10px; margin-top:10px; line-height:1; font-weight:500; letter-spacing:-0.5px;}
.fix_bottom .tx.off {}
.fix_bottom .tx.on {display:none; font-weight:600;}
.fix_bottom .hit .tx.off {display:none;}
.fix_bottom .hit .tx.on {display:block;}
.fix_bottom .hit .btn svg.off {display:none;}
.fix_bottom .hit .btn svg.on {display:inline-block;}
.fix_bottom .cart_num {background:#000; color:#fff; width:15px; height:15px; display:flex; justify-content: center; align-items: center; flex-direction:column; border-radius:100px;}
.fix_bottom .cart_num {position:absolute; left:50%; top:10px; margin-left:2px; font-size:10px; font-weight:600;}

/* 하단 고정메뉴에 알림함 추가 : KHY : 2022-12-15 */
.fix_bottom .btn .dot {position: absolute; left: 50%; top: 12px; width: 5px; height: 5px; background: #e60213; border-radius: 100px; margin-left: 8px;}

/* @media screen and (min-width:900px) {
	.fix_bottom {display:none;}
}
 */





/* ******************************************
    오른쪽 fix
  -- ****************************************** */
.scroll_fix {position:fixed; right:0; bottom:75px; z-index:999; overflow:hidden; margin:10px; font-size:0px; }
.scroll_fix {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); transform:scale(0.5); -webkit-transform:scale(0.5);}
.scroll_fix .btn_gotop {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; font-size:0px;}
.scroll_fix .btn_gotop img {width:40px;}
.scroll_fix.if_scroll {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); transform:scale(1.0); -webkit-transform:scale(1.0);}
.scroll_fix.if_view {bottom:75px}
.fly_right {position:fixed; right:0; bottom:70px; padding:10px; display:flex; justify-content: center; align-items: center; flex-direction:column; z-indeX:11}
.fly_right {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;}
.fly_right .btn {width:40px; height:40px; background:#fff;  border-radius:100px; overflow:hidden; /* display:flex; justify-content: center; align-items: center; flex-direction:column;  */ margin-top:5px;}
.fly_right .btn img {width:40px;}
.fly_right.if_scroll {bottom:120px}




/* ******************************************
    하단 검색열기
  -- ****************************************** */
.rm_search {position:fixed; left:0; bottom:61px; width:100%; z-index:99; background:#fff; border-radius:50px 50px 0 0; box-sizing:border-box; padding:35px; padding-bottom:120px;}
.rm_search {transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out; transform:translateY(100%); bottom:0}
.rm_search .form_box {position:relative; z-index:10000; overflow:hidden; transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;}
.rm_search .design {background:#fff; height:55px; width:100%; box-sizing:border-box; border-radius:100px; font-size:17px; }
.rm_search .design {padding:0 30px; padding-right:70px; border:1px solid #f2f2f2;}
.rm_search .design:focus {border-color:#333;}
.rm_search .btn_search {background:transparent url('../images/renew/top_search.svg') left center no-repeat; width:50px; height:100%; position:absolute; right:0; top:0;}
.rm_search .btn_search {background-size:22px;}
.rm_search .open_keyowrd {}
.rm_search .open_keyowrd {box-sizing:border-box; padding-top:20px;}
.rm_search .open_keyowrd .word {display:flex; justify-content: center; align-items: center; flex-direction:row; flex-wrap:wrap; max-height:400px; overflow-y:auto;}
.rm_search .open_keyowrd .link {display:inline-block; padding:0 12px; height:30px; border-radius:100px; margin:3px; background:#f9f9f9; font-size:12px; color:#999;}
.rm_search .open_keyowrd .link {display:inline-flex; justify-content: center; align-items: center; flex-direction:column;}
.rm_search .open_keyowrd .close_box {border-top:1px solid #eee; text-align:center; display:none; }
.rm_search .open_keyowrd .close_box .btn_close {color:#aaa; font-size:14px; padding:10px; display:block; box-sizing:border-box;}

.rm_search_bg {position:fixed; left:0; bottom:0; width:100%; height:100%; z-index:-1; background:rgba(0,0,0,0.7); opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); visibility:hidden}
.rm_search_bg {transition: all 0.4s ease-out; -webkit-transition: all 0.4s ease-out;}

.rm_search.if_open_topsearch2 { bottom:0; transform:translateY(0);}
.rm_search_bg.if_open_topsearch2 {z-index:98; opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100); visibility:visible}






/* ********************************************** *
   FOOTER
 * ********************************************** */
.footer {text-align:center; padding:40px 10px 110px; border-top:1px solid #f2f2f2; margin-top:150px; display:flex; justify-content: center; align-items: center; flex-direction:column;}
.footer li {list-style:none;}
.footer .shop_name {color:#333; font-size:21px; font-weight:600;}
.footer .menu {margin-top:10px; display:flex; justify-content: center; align-items: center; flex-direction:row; margin-bottom:10px;}
.footer .menu .btn {color:#888; font-size:12px; padding:5px 10px;}
.footer .info_box {font-size:0px; display:flex; justify-content: center; align-items: center; flex-direction:row; flex-wrap:wrap; max-width:600px}
.footer .info_box .txt {display:inline-block; margin:2px 7px; font-size:11px; color:#aaa; line-height:1.3; word-wrap:break-word; word-break:keep-all; white-space:normal;}
.footer .bottom {margin-top:15px; color:#bbb;}
.footer .bottom div {line-height:1; font-size:11px;}
.footer .bottom .copy {margin-top:10px;}
.footer.if_hide {padding-bottom:120px;}
.footer.if_nomargin {margin-top:0px !important;}
















/* **************************************** *
   PC에서 크기 고정
 * ****************************************
@media screen and (min-width:480px) {

	body {overflow-y:scroll}
	.fix_bottom {width:480px; left:50%; margin-left:-240px;}
	.rm_search {width:480px; left:50%; margin-left:-240px;}



}

*/












/* 리뉴얼 이전 --------------------------------------------------------------------------------------------------------------------- */

























/* ********************************************** *
 * 메인(NEW) : 상품목록
 * ********************************************** */
.main_prod {}
.main_prod li {list-style:none;}

.main_prod .scroll_box {}
.main_prod .scroll_box ul {display:flex; justify-content: center; align-items: center; flex-direction:row; flex-wrap:wrap; }
.main_prod .scroll_box li {text-align:center;}

.main_prod .ctg1_box {margin-top:30px; }
.main_prod .ctg1_box .color_box {background:#fff !important; padding:0 30px; }
.main_prod .ctg1_box .rm_layout_fix {padding:0px !important;}
.main_prod .ctg1_box .ctg1 {display:inline-flex; justify-content: center; align-items: center; flex-direction:column; padding:10px 15px; position:relative;}
.main_prod .ctg1_box .ctg1 .picto {width:90px; border-radius:30px; overflow:hidden; font-size:0px; position:relative; box-sizing:border-box; background:#eee;}
.main_prod .ctg1_box .ctg1 .picto img {width:100%;}
.main_prod .ctg1_box .ctg1 .img {overflow:hidden; border-radius:30px; box-sizing:border-box; position:relative;}
.main_prod .ctg1_box .ctg1 .img:before {content:""; width:100%; height:100%; position:absolute; left:0; top:0; border:0px solid #fff; z-index:1; border-radius:30px; box-sizing:border-box;}
.main_prod .ctg1_box .ctg1 .img:before {transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;}
.main_prod .ctg1_box .ctg1 .tx {line-height:1; font-size:15px; margin-top:8px; letter-spacing:-1px; color:#333; font-weight:500;}
.main_prod .ctg1_box .ctg1 .ring {border:3px solid #000; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; z-index:10; border-radius:30px;}
.main_prod .ctg1_box .ctg1 .ring {opacity: 0; filter: alpha(opacity=0); -ms-filter:alpha(opacity=0); transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out;}
.main_prod .ctg1_box .hit .ctg1 .ring {opacity: 1; filter: alpha(opacity=100); -ms-filter:alpha(opacity=100);}
.main_prod .ctg1_box .hit .ctg1 .img:before {border:8px solid #fff;}


.main_prod .ctg2_box {margin-top:30px; background:#f9f9f9; padding:0 30px;}
.main_prod .ctg2_box .scroll_box {padding-top:20px; padding-bottom:20px;}
.main_prod .ctg2_box .rm_layout_fix {padding:0px !important;}
.main_prod .ctg2_box .ctg2 {}
.main_prod .ctg2_box .ctg2 .tx.off {}
.main_prod .ctg2_box .ctg2 .tx.on {display:none; color:#fff; font-weight:500;}
.main_prod .ctg2_box .ctg2 .tx {display:flex; justify-content: center; align-items: center; flex-direction:column; height:36px; font-size:14px; border-radius:100px; padding:0 20px; color:#333; line-height:1;}
.main_prod .ctg2_box .hit .ctg2 .tx.off {display:none;}
.main_prod .ctg2_box .hit .ctg2 .tx.on {display:flex; text-decoration:none !important}


.main_prod .more {margin-top:40px; text-align:center;}
.main_prod .more .btn {display:block; max-width:400px; margin:0 auto; border:1px solid #333; height:50px; border-radius:5px; font-size:15px;}
.main_prod .more .btn {display:flex; justify-content: center; align-items: center; flex-direction:column; color:#333; box-sizing:border-box;}




.prod_box {padding:0 15px;}