/* BASIC css start */
#orderSt {margin:220px auto 50px;}

#container { padding-top: 126px; }

body header .gnbwrap {height:auto; padding:0 100px; background: rgba(255,255,255,1); box-sizing:border-box; margin:0; }
body header .gnbwrap:after {content:''; display:block; clear:both;}
body header .gnbwrap .searchArea { display: flex; justify-content: center; align-items: center; right:130px; bottom:-120px; width: 360px; height: 120px; margin: 0; border: 1px solid #eee; box-shadow: 0 3px 3px rgba(0,0,0,0.35); box-sizing: border-box; background: #fff; transition: .3s; visibility: hidden; opacity: 0; }
body header .gnbwrap .searchArea .closefade { top: 5px; right: 5px; bottom: auto; left: auto; width: 30px; color: #222; text-align: center; cursor: pointer; opacity: 1; }
body header .gnbwrap .searchArea .inputTypeText { background: none; }
body header.open_search .gnbwrap .searchArea { visibility: visible; opacity: 1; }
body header .gnbwrap:hover .gnb > ul { background: none; }

body header .gnb > h1 {float:left; height:auto; margin-right: 110px; line-height: 88px; transition:.3s;}
body header .gnb > h1 img { margin-top: 0; transition:.3s;}

body header .gnb > ul {float:left; position:static;}
body header .gnb > ul > li {float:left; height:auto; margin:0 21px;}
body header .gnb > ul > li > a {position:relative; color: #222; font-size:22px; line-height: 88px; font-weight:500; transition:.3s;}
body header .gnb > ul > li > a:hover {color:#ff7133;}
body header .gnb > ul > li > a.on:after { content: ""; position:absolute; top:30%; right:-11px; width: 7px; height: 7px; background:#f96512; border-radius: 50%; }
body header .gnb > ul > li > a.on:hover .line {background:#ff7133;}


/*여름이벤트 종료 후 삭제*/
body header .gnb > ul > li > a.ons:after { content: ""; position:absolute; top:30%; right:-11px; width: 7px; height: 7px; background:#fa6e39; border-radius: 50%; }
body header .gnb > ul > li > a.ons:hover .line {background:#fa6e39;}

body header .gnb > ul > li > a.liveEvent{color:#fa6e39; }
body header .gnb > ul > li > a.liveEvent:hover {color:#fa6e39; }
body header .gnb > ul > li > a.liveEvent:hover .line{background:#fa6e39;}


/*가을이벤트*/
body header .gnb > ul > li > a.on_evt { color: #c97444; }
body header .gnb > ul > li > a.on_evt:after { content: ""; position:absolute; top:30%; right:-11px; width: 7px; height: 7px; background:#c97444; border-radius: 50%; }
body header .gnb > ul > li > a.on_evt:hover { color: #c97444; }
body header .gnb > ul > li > a.on_evt:hover .line {background:#c97444;}


body header .top-menu > li {float:left; height: 88px; line-height:88px; transition:.3s;}
body header .top-menu > li.myhoverwrap { margin-left: 10px; }

body header .top-menu li:hover .submenu, body header .top-menu li:hover .sub_bg {display:block;}
body header .top-menu li a { color: #222; font-size: 16px; }
body header .top-menu li a:hover {color:#f96512; }
body header .top-menu li:first-child > a.on {color:#f96512;}
body header .top-menu li > span {transition:.3s; background: #f96512; }


body header.on .top_join { margin-top: 0; }

body header.on .gnbwrap { background: rgba(255,255,255,0.35); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }

body header.on .gnb > ul {background: none; box-shadow: none; }

body header.open_search .gnbwrap { background: rgba(255,255,255,1); }


/* scroll 높이줄임 스타일
body header.on .gnb > h1 {line-height:60px;}
body header.on .gnb > h1 img {height:37px;}
body header.on .gnb > ul > li > a { font-size: 18px; line-height:60px;}
body header.on .gnb > ul > li > a > .line {bottom:15px;}

body header.on .top-menu > li {height:60px; line-height:60px;}
body header.on .top-menu li > span {top:20px;}
body header.on .top-menu .submenu {bottom:auto; top:100%; box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%);}

body header.on .mypageHover {top:45px; } 
*/


header .top-menu .submenu {
	position: absolute;
	width:460px;
	z-index:1;
    display: none;
    bottom: 0;
    text-align: center;
    background: rgba(255,255,255,1);
    left: 50%;
	margin:0 0 0 -206px;
    color: #fff;
    height: 40px;}
 
 header .top-menu .submenu > li {
    display: inline-block;
    margin: 0 10px;
    height:35px; 
	line-height:35px; 
	vertical-align:top;
}
body header .top-menu > li .closefade {color:#222;}

header .top-menu .submenu > li:last-child {margin:0 10px;}
header .top-menu .submenu a {
    text-transform: uppercase;
    font-size: 15px;
    color: #acacac;
    line-height: 40px;
    display: block;
    margin: 0;
}

header .top-menu > ul > li .submenu { position: absolute;
    display: none;
    top: 75px;
    text-align: center;
    background: rgba(255,255,255,1);
    width: 100%;
    left: 0;
    color: #fff;
    height: 60px;
    line-height: 60px;}
 
 header .top-menu > ul > li .submenu > li {
    display: inline-block;
    margin: 0 15px;
}
header .top-menu > ul > li .submenu a {
    text-transform: uppercase;
    font-size: 14.5px;
    color: #333;
    line-height: 1.5em;
    display: block;
    margin: 0 0 10px;
}
header .top-menu > ul > li .submenu a:first-child {
    margin-top: 8px;
}

body header .top-menu > li.all_menu {margin-left:-10px;}

/* icon hamberg */
header .menu-trigger, .menu-trigger span {display:inline-block;transition:rotate .4s;box-sizing:border-box;}
header .menu-trigger {position:relative; width:30px; height:19px;}
header .menu-trigger span {position:absolute;left:5px;width:20px; height:2px;background-color:#000;}
header .menu-trigger span:nth-of-type(1) {top:0px;}
header .menu-trigger span:nth-of-type(2) {top:8px;}
header .menu-trigger span:nth-of-type(3) {bottom:1px;}
/* icon hamberg animation */
.menu-trigger span:nth-of-type(1) {animation : menu-trigger-01 .75s forwards;}
@keyframes menu-trigger-01 {
	0% {transform : translateY(8px) rotate(45deg);}
	50% {transform : translateY(8px) rotate(0);}
	100% {transform : translateY(0) rotate(0);}
}
.menu-trigger span:nth-of-type(2) {transition : all .25s .25s;opacity : 1;filter:alpha(opacity=100);}
.menu-trigger span:nth-of-type(3) {animation : menu-trigger-02 .75s forwards;}

@keyframes menu-trigger-02 {
	0% {transform : translateY(-8px) rotate(-45deg);}
	50% {transform : translateY(-8px) rotate(0);}
	100% {transform : translateY(0) rotate(0);}
}
.menu-trigger.active span:nth-of-type(1) {animation : active-menu-trigger-01 .75s forwards;}

@keyframes active-menu-trigger-01 {
	0% {transform : translateY(0) rotate(0);}
	50% {transform : translateY(8px) rotate(0);}
	100% {transform : translateY(8px) rotate(45deg);}
}
.menu-trigger.active span:nth-of-type(2) {opacity : 0;filter:alpha(opacity=100);}
.menu-trigger.active span:nth-of-type(3) {animation : active-menu-trigger-02 .75s forwards;}

@keyframes active-menu-trigger-02 {
	0% {transform : translateY(0) rotate(0);}
	50% {transform : translateY(-8px) rotate(0);}
	100% {transform : translateY(-8px) rotate(-45deg);}
}


.mypageHover {position: absolute; display:none;
    top: 70px;
    left: -43px;
    right: 0;
    background: #fff;
    width: 100px;
    margin: 0 auto;
    padding: 5px 10px;
    box-sizing: border-box;
    border: solid 1px #dfdfdf;
	z-index:10;}
.mypageHover > a {    display: block;
    text-align: center;
    padding: 5px 0;
    font-size: 12px!important;}
    .mypageHover > a:hover {color:#f96512;}
#lnb #cnb .m1>ul>li>a:hover{color:#999;}
.m2:before {
    content: '';
    display: block;
    position: absolute;
    top: -6px;
    left: 50%;
    z-index: 99;
    margin-left: -6px;
    width: 11px;
    height: 6px;
    background: url(/design/sleepgongg/img/web/upload/dfloor_base/web/bullet/bul_submenu.png) no-repeat center top;
}
.m2 a:hover{background:rgba(100,100,100,0.4); color:#fff !important;}
.m2{line-height:28px !important;}

#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.search > a:after {
	content:'검색'
}
#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.order>a:after {
	content:'주문·배송조회'
}
#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.login>a:after {
	content:'주문·배송조회'
}
#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.cart>a:after {
	content:'장바구니'
}
#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.wish>a:after {
	content:'관심상품'
}
#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.like>a:after {
	content:'좋아요'
}
#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.recent>a:after {
	content:'최근본상품'
}
/*#df-fixbanner > div.quickbtn > ul > li.tooltip.kakaoplus.use-yellowid-p > a:after {
	content:'카카오톡 상담'
}*/
#df-fixbanner > div.quickbtn > ul > li.tooltip.navertalk > a:after {
	content:'체험센터 방문예약'
}
#df-fixbanner > div.quickbtn > ul > li.tooltip.ajax.navertalk>a:after {
	content:'네이버톡톡'
}
.sns li .youtube i { font-size: 13px; line-height: 27px;
}
.sns li .kakaotalk i { font-size: 13px; line-height: 27px;
}
.sns .use-kakaotalk a:hover {background: #f9e000;}


.top-ban div{ background-color : #f96512;}

/*
.top-ban div:nth-child(1) { background-color : #b49976;}
.top-ban div:nth-child(2) { background-color : #2b6c51;}
.top-ban div:nth-child(3) { background-color : #c97444;}

.top-ban div:nth-child(4) { background-color : #61928c;}
.top-ban div:nth-child(5) { background-color : #2a6837;}
.top-ban div:nth-child(6) { background-color : #ff5b5b;}
.top-ban div:nth-child(7) { background-color : #5bc8d4;}
.top-ban div:nth-child(8) { background-color : #3c50b5;}  
*/


/* 전체메뉴영역 */
body header { transition: background .3s .3s; }
body header.open_allmenu {background:#fff; transition: background 0s;}
body header.open_allmenu .gnbwrap .searchArea {z-index:5;}

.allmenu_wrap {display:none; position:absolute; top:100%; right:0; left:0; background:#fff; box-shadow:0 3px 3px 0 rgba(0, 0, 0, 0.16);}
.allmenu_center {min-width:1430px; padding:50px 100px 90px; margin:0 auto;}
.allmenu_center:after {content:''; display:block; clear:both;}

.allmenu_center .allmenu_info {float:left; position:relative; width:290px; margin-left:0px; padding-right:40px; border-right:1px solid #dedede;}

.dm_user_login {height:125px;}
.dm_user_login .dm_login_msg {color:#222; font-size:14px; line-height:20px;}
.dm_user_login .btn_login {display:inline-block; margin-top:10px; padding-right:26px; background:url('/design/sleepgongg/img/web/img/dm_ico_login_arrow.svg') no-repeat right center; color:#f96512; font-size:20px; line-height:29px; vertical-align:top;}

.dm_user_info {height:125px;}
.dm_user_info .dm_user_name {color:#000; font-size:15px; line-height:29px; font-weight:400;  }
.dm_user_info .dm_user_name strong {font-weight:700;}
.dm_user_info .dm_user_name img  { width:20px; padding-top:5px; padding-right:2px;}
.dm_user_info .dm_user_desc {margin-top:7px; font-size:14px; line-height:20px; font-weight:400;}
.dm_user_info .btn_logout {position:absolute; top:38px; left:221px; padding-right:28px; background:url('/design/sleepgongg/img/web/img/dm_ico_logout.svg') no-repeat right center; background-size:22px; color:#a7a7a7; font-size:11px; line-height:16px; font-weight:400;}
.dm_user_info .dm_cp_cs {display:flex; margin-top:20px; padding:13px 0; border-radius:10px; background:#fafafa;}
.dm_user_info .dm_cp_cs dl {position:relative; width:50%; padding:0 14px; overflow:hidden;}
.dm_user_info .dm_cp_cs dl + dl:before {content:''; position:absolute; top:50%; left:0; width:1px; height:14px; margin-top:-7px; background:#eee;}
.dm_user_info .dm_cp_cs dl dt {float:left; color:#222; font-size:12px; line-height:19px; font-weight:400;}
.dm_user_info .dm_cp_cs dl dd {float:right; color:#222; font-size:12px; line-height:19px; font-weight:400;}
.dm_user_info .dm_cp_cs dl dd .cnt {color:#f96512; font-size:13px; line-height:19px; font-weight:700;}

.dm_cate_links {margin-top:25px; text-align:center;}
.dm_cate_links ul {display:flex; justify-content:left;flex-wrap: nowrap;     align-items: stretch;}
.dm_cate_links ul li {margin: 0 35px 0 0; }
.dm_cate_links ul li a {display:block;}
.dm_cate_links ul li a .ico {display:block; width:34px; height:25px; margin:0 auto; background-repeat:no-repeat; background-position:center center;}
.dm_cate_links ul li a .ico01 {background-image:url('/design/sleepgongg/img/web/img/dm_ico_catelinks01.svg'); background-size:20px;}
.dm_cate_links ul li a .ico02 {background-image:url('/design/sleepgongg/img/web/img/dm_ico_catelinks02.svg'); background-size:34px;}
.dm_cate_links ul li a .ico03 {background-image:url('/design/sleepgongg/img/web/img/dm_ico_catelinks03.svg'); background-size:22px;}
.dm_cate_links ul li a .ico04 {background-image:url('/design/sleepgongg/img/web/img/dm_ico_catelinks04.svg'); background-size:24px;}
.dm_cate_links ul li a .txt {display:block; margin-top:4px; color:#000; font-size:11px; line-height:16px; font-weight:400; letter-spacing:-0.28px;}

.allmenu_cate_box {float:left; padding-left:30px; }
.allmenu_cate_box .allmenu_cate:after {content:''; display:block; clear:both;}
.allmenu_cate_box .allmenu_cate > li {position:relative; float:left; min-width:50px; margin:0 18px;}
.allmenu_cate_box .allmenu_cate > li > a {display:inline-block; color:#222; font-size:20px; line-height:29px; font-weight:500;}
.allmenu_cate_box .allmenu_cate > li > a.on:after {position:absolute; right:0px; width: 7px; height: 7px; background:#f96512; border-radius: 50%;  top:0%; content: "" }
.allmenu_cate_box .allmenu_cate > li > a.on_green:after {position:absolute; right:0px; width: 7px; height: 7px; background:#2d7a3e; border-radius: 50%;  top:0%; content: "" }

/*지영수정*/
.allmenu_cate_box .allmenu_cate > li > a.on_new{position: relative;}
.allmenu_cate_box .allmenu_cate > li > a.on_new:after{position: absolute;right: -12px;width: 7px;height: 7px;background: #f96512;border-radius: 50%;top: -1%;content: "";}


.allmenu_cate_box .allmenu_cate > li.shop_all > a {color:#f96512; font-weight:600; font-family:'Montserrat';}
.allmenu_cate_box .allmenu_cate > li > .depth {position:absolute; top:100%; left:0; padding:10px 0; margin-top:10px;}
.allmenu_cate_box .allmenu_cate > li > .depth:before {content:''; position:absolute; top:0; left:0; width:24px; height:1px; background:#dedede;}
.allmenu_cate_box .allmenu_cate > li > .depth > li {padding:4px 0;}
.allmenu_cate_box .allmenu_cate > li > .depth > li > a {position:relative; color:#666; font-size:14px; line-height:20px; font-weight:400; letter-spacing:-0.35px; white-space:nowrap;}
.allmenu_cate_box .allmenu_cate > li > .depth > li > a .ico_txt {position:absolute; top:2px; left:100%; margin-left:6px; color:#f96512; font-size:9px; line-height:11px; font-weight:600; font-family:'Montserrat';}

/*지영수정*/
.allmenu_cate_box .allmenu_cate > li > .depth > li > a.new_txt{position: relative;}
.allmenu_cate_box .allmenu_cate > li > .depth > li > a.new_txt:after{position: absolute; content: 'new'; font-size: 13px; top: 0; left: 107%; color: #f96512; font-weight: 500;}

.dm_util_box {float:right; padding-right:70px;}
.dm_util_box .util_list:after {content:''; display:block; clear:both;}
.dm_util_box .util_list > li {position:relative; float:left;}
.dm_util_box .util_list > li + li {margin-left:80px;}
.dm_util_box .util_list > li > a {display:block; position:relative; color:#666; font-size:16px; line-height:24px; font-weight:400; letter-spacing:-0.4px;}
.dm_util_box .util_list > li > a .ico_txt {position:absolute; top:2px; left:100%; margin-left:6px; color:#f96512; font-size:9px; line-height:11px; font-weight:600; font-family:'Montserrat';}
.dm_util_box .util_list > li > .depth {position:absolute; top:100%; left:0; padding:10px 0; margin-top:14px;}
.dm_util_box .util_list > li > .depth:before {content:''; position:absolute; top:0; left:0; width:24px; height:1px; background:#dedede;}
.dm_util_box .util_list > li > .depth > li {padding:4px 0 5px;}
.dm_util_box .util_list > li > .depth > li > a {position:relative; color:#777; font-size:13px; line-height:19px; font-weight:400; letter-spacing:-0.13px; white-space:nowrap;}
.dm_util_box .util_list > li > .depth > li.color > a {color:#ff7427; font-weight:500;}


@media (max-width: 1879px) {
	.allmenu_center .allmenu_info {padding-right:30px;}
	.allmenu_cate_box .allmenu_cate > li {margin:0 12px;}
	.dm_util_box .util_list > li + li {margin-left:40px;}
}

@media (max-width: 1750px) {
	body header .gnbwrap {padding:0 20px;}
  body header .gnb > h1 { margin-right: 50px !important; } 
  body header .gnb > ul > li {margin:0 25px !important;}

	.allmenu_center {padding-left:20px; padding-right:20px;}
	.allmenu_center .allmenu_info {margin-left:0;}

	/* scroll 높이줄임 스타일

	body header .gnb > ul > li > a {font-size:18px;}

  */

  body header .gnbwrap .searchArea { right: 50px; }

}
@media (max-width: 1600px) {
	body header .top-menu li {margin-right:15px;}
	body header .top-menu li a {font-size:14px;}
	body header .top-menu .submenu a {font-size:13px;}
}

/* Uneedcomms Keepgrow CSS */
#keepgrowLogin #memberJoin .joinBtn, #keepgrowLogin #formWrap .nomemberBuyBtn { background:#fff; }


/*2024 icon*/
	.iconBox{display: inline-block; width: 42%; margin: 0 0.5%;}
	.iconBox:last-child{margin-left: -5px;}
	.iconBox a img{width: 70% !important;}


/* BASIC css end */