/* BASIC css start */
.df-aside-menu .projectlist > .content > ul > li:nth-child(2n), .df-aside-menu .boardlist > .content > ul > li:nth-child(2n) {border-right: 0; }
    
    
.df-aside-menu,
.df-aside-more { display: none; position: fixed; z-index: 3; top: 0; bottom: 0; padding-bottom: 0; width: 80%; min-width: 240px; max-width: 400px; -webkit-transition: -webkit-transform .4s .0s cubic-bezier(0.590,0.535,0.150,0.860);transition: transform .4s .0s cubic-bezier(0.590,0.535,0.150,0.860); }
.df-aside-menu { left: 0; -webkit-transform: translate(-100%,0); transform: translate(-100%,0); }
.df-aside-more { right: 0; -webkit-transform: translate(100%,0); transform: translate(100%,0); }
.df-aside-menu.active,.df-aside-more.active { -webkit-transform: translate(0,0); transform: translate(0,0); }
.df-aside-menu > .inner,.df-aside-more > .inner { overflow-x: hidden; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch }
.df-aside-dimmed { position: fixed; z-index: 2; top: 0px; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; background: rgba(0,0,0,0.5); -webkit-transition: all .4s .0s; transition: all .4s .0s; }
.df-btn-menu-close,
.df-btn-more-close { display: block; position: absolute; top: 20px; width: 40px;height: 40px; border-radius: 22px; background: #fff; opacity: 0; visibility: hidden }
.df-btn-menu-close { z-index: -1; right: 0 }
.df-btn-more-close { z-index: -1; left: 0 }
.df-aside-menu.active .df-btn-menu-close { right: -52px }
.df-aside-more.active .df-btn-more-close { left: -52px }
.df-aside-menu.active .df-btn-menu-close,
.df-aside-more.active .df-btn-more-close {  opacity: 1; visibility: visible; -webkit-transition: all .25s .0s; transition: all .25s .0s; transition-delay: 0.4s }
.df-btn-menu-close .l1,
.df-btn-menu-close .l2,
.df-btn-more-close .l1,
.df-btn-more-close .l2 { display: block; position: absolute; top: 50%; left: 50%; margin-left: -11px; width: 22px; height: 1px; background: #222; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }
.df-btn-menu-close .l1,
.df-btn-more-close .l1 { -webkit-transform: rotate(135deg); transform: rotate(135deg); }
.df-btn-menu-close .l2,
.df-btn-more-close .l2 { -webkit-transform: rotate(-315deg); transform: rotate(-315deg); }
.df-aside-dimmed.active { opacity: 1; visibility: visible }
.df-aside-menu,.df-aside-more { background: #fff } 
.df-aside-menu > .inner,.df-aside-more > .inner { background: #f4f4f4 } 
.df-aside-menu > .loading,.df-aside-more > .loading { position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px } 
.df-aside-menu.loaded > .loading,.df-aside-more.loaded > .loading { display: none } 
.df-aside-menu > .loading > i,.df-aside-more > .loading > i { color: #dfdfdf; font-size: 30px } 
.df-aside-menu .section,.df-aside-more .section { padding: 0; margin: 5px 0 0 0; background: #fff; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2 } 
.df-aside-menu .title,.df-aside-more .title { position: relative; margin: 0; padding: 0 14px; line-height: 38px; background: #fff; font-size: 13px; color: #222; font-weight: bold; border: 0 } 
.df-aside-menu .content,.df-aside-more .content { border-top: 1px solid #e2e2e2 } 
.df-aside-menu .arrow,.df-aside-more .arrow { display: inline-block; position: absolute; z-index: 10; top: 5px; right: 5px; width: 26px; height: 26px; border: 1px solid #e2e2e2; border-radius: 4px; -webkit-transition: all .3s .0s cubic-bezier(0.86,0,0.07,1); transition: all .3s .0s cubic-bezier(0.86,0,0.07,1); } 
.df-aside-menu .arrow.selected,.df-aside-more .arrow.selected { display: inline-block; position: absolute; z-index: 10; top: 5px; right: 5px; width: 26px; height: 26px; border: 1px solid #555; background: #555 } 
.df-aside-menu .arrow.selected:after,.df-aside-more .arrow.selected:after,.df-aside-menu .arrow.selected:before,.df-aside-more .arrow.selected:before { background: #fff } 
.df-aside-menu .arrow:before,
.df-aside-menu .arrow:after,
.df-aside-more .arrow:before,
.df-aside-more .arrow:after { display: block; content: ''; position: absolute; top: 50%; left: 50%; margin-top: -1px; background: #999; width: 10px; height: 1px; clear: both; content: ''; border-radius: 2px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 
.df-aside-menu .arrow:before,
.df-aside-more .arrow:before { margin-left: -1px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .3s .0s cubic-bezier(0.86,0,0.07,1); transition: all .3s .0s cubic-bezier(0.86,0,0.07,1); } 
.df-aside-menu .arrow:after,
.df-aside-more .arrow:after { margin-left: -8px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all .3s .0s cubic-bezier(0.86,0,0.07,1); transition: all .3s .0s cubic-bezier(0.86,0,0.07,1); } 
.df-aside-menu .arrow.selected:before,
.df-aside-more .arrow.selected:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 
.df-aside-menu .arrow.selected:after,
.df-aside-more .arrow.selected:after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } 
.df-aside-more .more { display: inline-block; position: absolute; z-index: 10; top: 5px; right: 5px; width: 26px; height: 26px; border: 1px solid #e2e2e2; border-radius: 4px } 
.df-aside-more .more:before,
.df-aside-more .more:after { display: block; content: ''; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -5px; background: #999; width: 11px; height: 1px; clear: both; content: ''; border-radius: 2px } 
.df-aside-more .more:before { } 
.df-aside-more .more:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } 
.df-aside-more .more ~ .arrow { right: 37px } 
.df-aside-menu .userinfo { display: table; width: 100%; padding: 8px; box-sizing: border-box; background: #555 } 
.df-aside-menu .userinfo > div { display: table-cell; vertical-align: middle } 
.df-aside-menu .userinfo > .img { width: 35px } 
.df-aside-menu .userinfo > .img > span > img { width: 35px; height: 35px; border-radius: 35px; border: 2px solid #eee } 
.df-aside-menu .userinfo > .img > span > i { font-size: 33px; color: #7b7b7b } 
.df-aside-menu .userinfo > .txt { padding: 0 8px } 
.df-aside-menu .userinfo > .txt > p:first-child { color: #fff } 
.df-aside-menu .userinfo > .txt > p:first-child > span { font-weight: bold } 
.df-aside-menu .userinfo > .txt > p:last-child { padding: 4px 0 0 0; color: #eee; border: 0 } 
.df-aside-menu .userinfo > .btnarea { text-align: right } 
.df-aside-menu .userinfo > .btnarea > a { display: block; width: 29px; height: 29px; margin: 0 0 0 auto; border-radius: 29px; text-align: center; background: #7b7b7b } 
.df-aside-menu .userinfo > .btnarea > a i { font-size: 16px; color: #fff; line-height: 31px; margin-left: 0.5px } 
.df-aside-menu .userbutton { background: #fff; border-bottom: 1px solid #e2e2e2 } 
.df-aside-menu .userbutton > li { height: 35px; text-align: center; border-right: 1px solid #e2e2e2 } 
.df-aside-menu .userbutton > li:last-child { border-right: 0 } 
.df-aside-menu .userbutton > li > a { display: table; width: 100%; height: 100%; padding: 3px; font-size: 11px; color: #444; vertical-align: middle } 
.df-aside-menu .userbutton > li > a > span { display: table-cell; vertical-align: middle } 
.df-aside-menu .state > ul { border: 0 } 
.df-aside-menu .state > ul > li { border-top: 0; border-right: 1px solid #ddd } 
.df-aside-menu .state > ul > li:nth-child(n+4) { border-top: 1px solid #ddd } 
.df-aside-menu .state > ul > li:nth-child(3n) { border-right: 0 } 
.df-aside-menu .state > ul > li > a { padding: 3px; font-size: 11px; color: #444; text-align: center } 
.df-aside-menu .state > ul > li > a:after { display: none } 
.df-aside-menu .state > ul > li > a > span { display: block } 
.df-aside-menu .state > ul > li > a > span:first-child { margin-top: 5px; font-size: 15px; border: 0 } 
.df-aside-menu .state > ul > li > a > span:last-child { display: table; width: 100%; height: 27px; font-size: 11px } 
.df-aside-menu .state > ul > li > a > span:last-child > span { display: table-cell; vertical-align: middle } 
.df-aside-menu .state > ul > li.xans-myshop-orderhistorytab > a > span:first-child:empty:before { display: block; content: '0' } 
.df-aside-menu .attend { padding: 0; border: 1px solid #ddd; margin-left: 5px; margin-right: 5px; border-radius: 5px } 
.df-aside-menu .attend > a { display: block; line-height: 42px; padding: 0 10px; text-align: center } 
.df-aside-menu .attend > a > i { margin-right: 4px; font-size: 19px; vertical-align: middle } 
.df-aside-menu .categorylist ul > li,.df-aside-menu .projectlist ul > li,.df-aside-menu .boardlist ul > li { position: relative; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 0; border-left: 0 } 
.df-aside-menu .categorylist ul > li > a.name,.df-aside-menu .projectlist ul > li > a.name,.df-aside-menu .boardlist ul > li > a.name { display: block; padding: 0 14px; height: 37px; line-height: 37px; overflow: hidden; font-size: 13px } 
.df-aside-menu .categorylist > .content ul > li:nth-child(1n) { border-right: 0 } 
.df-aside-menu .categorylist > .content > ul > li:nth-child(-n+1) { border-top: 0 } 
.df-aside-menu .projectlist > .content > ul > li:nth-child(2n),.df-aside-menu .boardlist > .content > ul > li:nth-child(2n) { border-right: 0 } 
.df-aside-menu .projectlist > .content > ul > li:nth-child(-n+2),.df-aside-menu .boardlist > .content > ul > li:nth-child(-n+2) { border-top: 0 } 
.df-aside-menu .projectlist > .content > ul > li:after,.df-aside-menu .boardlist > .content > ul > li:after { display: block; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: #ddd; content: '' } 
.df-aside-menu .categorylist ul > li > a.btnBookmark ~ a.name { padding-left: 36px } 
.df-aside-menu .categorylist ul > li > a.onoff ~ a.name { padding-right: 36px } 
.df-aside-menu .categorylist ul > li > a.btnBookmark { display: block; position: absolute; left: 0; top: 0; width: 40px; height: 37px; padding: 11px; font-size: 16px; color: #999; text-align: center; box-sizing: border-box } 
.df-aside-menu .categorylist ul > li > a.btnBookmark.selected { color: #f00 } 
.df-aside-menu .categorylist ul > li > a.onoff { display: block; position: absolute; right: 0; top: 0; width: 37px; height: 37px; padding: 11px; box-sizing: border-box } 
.df-aside-menu .categorylist ul > li > a.onoff:before,
.df-aside-menu .categorylist ul > li > a.onoff:after { display: block; content: ''; position: absolute; top: 50%; left: 50%; margin-top: -1px; background: #999; width: 10px; height: 1px; clear: both; content: ''; border-radius: 2px; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } 
.df-aside-menu .categorylist ul > li > a.onoff:before { margin-left: -2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all .2s .0s cubic-bezier(0.86,0,0.07,1); transition: all .2s .0s cubic-bezier(0.86,0,0.07,1); } 
.df-aside-menu .categorylist ul > li > a.onoff:after { margin-left: -9px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .2s .0s cubic-bezier(0.86,0,0.07,1); transition: all .2s .0s cubic-bezier(0.86,0,0.07,1); } 
.df-aside-menu .categorylist ul > li.selected > a.onoff:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } 
.df-aside-menu .categorylist ul > li.selected > a.onoff:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 
.df-aside-menu .categorylist ul > li > div { background: #f2f2f2 } 
.df-aside-menu .categorylist .content > ul > li > div > ul > li > div > ul > li { padding-left: 8px } 
.df-aside-menu .categorylist .content > ul > li > div > ul > li > div > ul > li > .btnBookmark { left: 8px } 
.df-aside-menu .categorylist .content > ul > li > div > ul > li > div > ul > li > div > ul > li { padding-left: 16px } 
.df-aside-menu .categorylist .content > ul > li > div > ul > li > div > ul > li > div > ul > li > .btnBookmark { left: 16px } 
.df-aside-menu #mycategory { display: none } 
.df-aside-menu #mycategory ul > li > a.cate { padding-right: 37px } 
.df-aside-menu #mycategory ul > li > a.btnBookmark { position: absolute; top: 0; left: inherit; right: 0; width: 38px; height: 37px; padding: 9px } 
.df-aside-menu #mycategory ul > li > a.btnBookmark i { font-size: 20px; color: #bbb } 
.df-aside-menu .customer > .content > ul { padding: 10px 0 } 
.df-aside-menu .customer > .content > ul > li { padding: 0 14px; font-size: 13px; line-height: 1.5; letter-spacing: -.25px } 
.df-aside-menu .customer > .content > ul > .tel,.df-aside-menu .customer > .content > ul > .fax { font-size: 18px; font-weight: bold; letter-spacing: 0 } 
.df-aside-menu .customer > .content > ul > .tel > span,.df-aside-menu .customer > .content > ul > .fax > span { font-size: 13px; font-weight: normal } 
.df-aside-menu .customer > .content > ul > .time { margin-top: 4px } 
.df-aside-menu .df-snsicon { padding: 8px 0; font-size: 0; text-align: center } 
.df-aside-menu .df-snsicon-item { margin: 4px } 
.df-aside-more .search { margin: 0; padding: 8px; background: #fff; border-top: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2 } 
.df-aside-more .search #search_box { position: relative; font-size: 0; line-height: 0 } 
.df-aside-more .search #search_box .inputTypeText { width: 100%; height: 40px; padding: 7px 76px 7px 10px; font-size: 14px; line-height: 1.4; color: #fff; border: 0; border-radius: 4px; background: #555 } 
.df-aside-more .search #search_box .inputTypeText::-webkit-input-placeholder { color: #ccc } 
.df-aside-more .search #search_box .searchicon,.df-aside-more .search #search_box .submit { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 0; background: none;font-size: 23px; color: #fff; border-radius: 40px; background: #555 } 
.df-aside-more .search #search_box .submit > i { vertical-align: middle; margin-top: -5px } 
.df-aside-more .search #search_box .btnDelete { position: absolute; z-index: 1; top: 2px; right: 40px; width: 27px; height: 40px; border: 0; background: none; font-size: 27px; color: #bbb } 
.df-aside-more .search .du-tab-title a { display: inline-block; width: 100%; height: 100% } 
.df-aside-more .search .du-tab-title > .displaynone + li:after { height: 1px !important; background: #ddd } 
.df-aside-more .search .du-tab-title > .displaynone + li a { text-align: left; padding: 0 2px } 
.df-aside-more .search .du-tab-content > div { overflow: hidden } 
.df-aside-more .search .du-tab-content > div > ul > li { position: relative; border-bottom: 1px solid #e2e2e2 } 
.df-aside-more .search .du-tab-content > div > ul > li > a { display: block; padding: 12px 10px; font-size: 13px } 
.df-aside-more .search .du-tab-content > div > ul > li > a.btnDelete { position: absolute; top: 50%; right: 0; width: 30px; height: 30px; margin-top: -15px; padding: 6px; text-align: center; cursor: pointer; box-sizing: border-box } 
.df-aside-more .search .du-tab-content > div > ul > li > a.btnDelete ~ a { margin-right: 30px } 
.df-aside-more .search .du-tab-content > div > ul > li > a.btnDelete i { font-size: 20px; color: #aaa } 
.df-aside-more .search .du-tab-content .btnDeleteAll { margin-top: 8px } 
.df-aside-more .search .du-tab-content .btnDeleteAll > button { display: block; width: 100%; padding: 10px 0; color: #777; border: 1px solid #e2e2e2; background: #f1f1f1 } 
.df-aside-more .search .du-tab-content .recentkeyword { display: inline-block !important } 
.df-aside-more .search .du-tab-content .empty { border-top: 0 } 
.df-aside-more .recent,.df-aside-more .wish,.df-aside-more .cart,.df-aside-more .like { } 
.df-aside-more .recent ul,.df-aside-more .wish ul,.df-aside-more .cart ul,.df-aside-more .like ul { padding: 4px 4px } 
.df-aside-more .recent li,.df-aside-more .wish li,.df-aside-more .cart li,.df-aside-more .like li { padding: 4px; margin: 0; border: 0 } 
.df-aside-more .recent img,.df-aside-more .wish img,.df-aside-more .cart img,.df-aside-more .like img { width: 100% } 
.df-aside-more .empty { padding: 25px 0 25px; text-align: center } 
.df-aside-more #searchBarForm .empty { padding: 25px 0 17px; text-align: center }
/* BASIC css end */