#toparea { border-bottom:1px solid #ddd;  }
#toparea .top_area_inner { display:flex; align-items:center; justify-content:space-between; width:calc(100% - 40px); max-width:1500px; margin:0 auto; padding:10px 0 20px; position:relative; }
#toparea .pd0 { padding:0; border:0; }

#toparea .my_menu { flex-shrink:0; display:flex; justify-content:right;  width:100% ; align-items:center; margin-top:10px; }
#toparea .my_menu ul { display:flex; align-items:center; }
#toparea .my_menu ul li { margin-left:15px; color:#222; }
#toparea .my_menu ul li:first-child { margin-left:0px; }
#toparea .my_menu ul li a { color:#222; display:block; font-size:14px; white-space:nowrap; line-height:30px;   }
#toparea .my_menu ul li.cart a { display:flex; align-items:center; display:block; padding:0 2px;  width:35px; flex-shrink:0; }
#toparea .my_menu ul li.cart img { width:35px; margin-bottom:4px; margin-right:3px; }
#toparea .my_menu ul li.user_name { }
#toparea .my_menu ul li.user_name strong { font-size:16px; font-weight:500; }
#toparea .my_menu ul li.user_level { position:relative; padding-left:10px;  }
#toparea .my_menu ul li.user_level::before { content:""; width:1px; height:11px; background:rgba(255,255,255,0.5); position:absolute; left:0; top:5px; }
#toparea .my_menu ul li.kakao_link { width:34px; }
#toparea .my_menu ul li.kakao_link img { width:34px; border-radius:18px; }
#toparea .my_menu ul li a.myoffice_txt { color:#5d2e91;}

#toparea .button_ham { cursor:pointer; display:none; width:50px; flex-shrink:0; }
#toparea .button_ham i { width:20px; height:2px; background:#222; margin:4px auto; display:flex; }



#toparea .logo { width:275px; flex-shrink:0; }
#toparea .logo img { }

#toparea .top_r_menu {  flex-shrink:0; display:flex;  align-items:center; }
#toparea .top_r_menu .cart { margin-bottom:3px; }
#toparea .top_r_menu .cart img { width:25px; }

#toparea .search_box { margin:0 15px 0 10px; }
#toparea .search_box .search_box_inner { display:flex; align-items:center;  background:#fff; border-radius:25px; overflow:hidden; padding:0 15px; border:1px solid #ccc;  height:35px; }
#toparea .search_box .search_box_inner form { width:100%; }
#toparea .search_box fieldset { border:0; padding:0; display:flex; align-items:center; background:#fff; justify-content:space-between; border:0; height:35px; 
padding: 0px; width:calc(100% - 40px) ; flex-grow:1; }
#toparea  .search_box legend { display:none; }
#toparea  .search_box #keyword  { flex-grow:1; height:20px; border:0; line-height:27px; font-size:14px; color:#222; }
#toparea  .search_box input:focus { outline: none; }
#toparea  .search_box input[type="image"] { width:20px; }

#toparea .my_session  { background:#e9e1f2; padding:3px 15px; border-radius:15px; margin-right:15px; line-height:25px; height:25px; }

#toparea .top_menu { background:#fff;  width:100%; }
#toparea .top_menu_list { display:flex; align-items:center; width:calc(100% - 40px); max-width:1250px; margin:0 auto; padding:10px 0; position:relative; height:60px; }
#toparea .top_menu_list > ul { display:flex; align-items:center; margin-left:30px; height:40px;  }
#toparea .top_menu_list > ul > li { margin:0 10px; line-height:40px; position:relative }
#toparea .top_menu_list > ul > li > a { padding:10px; font-size:17px; display:block; font-weight:400; white-space:nowrap ; }
#toparea .top_menu_list > ul > li > a:hover { color:#5d2e91 }
#toparea .top_menu_list > ul > li > ul { display:none; position:absolute; top:60px; left:50%; width:170px; z-index:3; background:#fff; margin-left:-85px; border:2px solid #865bb6; border-radius:10px; padding:5px; }
#toparea .top_menu_list > ul > li:hover > ul { display:block; }
#toparea .top_menu_list > ul > li > ul > li > a { font-size:15px; display:block; text-align:center; padding:5px 0; line-height:25px; border-radius:5px; }
#toparea .top_menu_list > ul > li > ul > li > a:hover { color:#5d2e91; background:rgba(134,91,182,0.1); }


@media(max-width:1000px){
#toparea { }
#toparea .top_area_inner { padding:5px 10px 5px 0; width:calc(100% - 10px); }
#toparea .ham { width:30px; flex-shrink:0; }
#toparea .button_ham { display:block; }
#toparea .logo {  flex-grow:1;  width:auto; flex-shrink:1; height:45px;  display:flex; align-items:center;  }
#toparea .logo img { max-height:26px; }
#toparea .m_cart { display:block; width:30px; flex-shrink:0; }
#toparea .pd0 { display:none; }
#toparea .top_menu_list { display:none; }
#toparea .search_box { display:none; }
}




@media(max-width:800px){
#toparea .my_menu { flex-grow:0;  flex-shrink:0; width:50px; }
#toparea .my_menu ul li { display:none; }
#toparea .my_menu ul li.kakao_link { display:block; }
/*
#toparea .my_menu ul li.cart { display:block; }
*/
#toparea .search_box {  flex-grow:1;  width:calc(100% - 150px); position:relative; }
#toparea .search_box .search_box_inner { display:flex; align-items:center;  background:#fff; border-radius:25px; padding:0 15px; width:100%; }
#toparea .search_box .form_search { }
#toparea .search_box fieldset { padding:0; display:flex; align-items:center; justify-content:space-between; border:0; height:35px; padding:5px 0px 5px 0px; flex-grow:0; }
#toparea  .search_box legend { display:none; }
#toparea  .search_box #keyword  { flex-grow:0; height:20px; border:0; line-height:22px; font-size:13px; color:#222;  }
#toparea  .search_box input:focus { outline: none; }
#toparea  .search_box input[type="image"] { width:25px; position:absolute; right:10px;  }

}







#footer { background:#fff; padding:70px 50px; border-top:1px solid #ddd; width:100%; }
#footer .footer-wrap { position:relative; width:100%; margin:0 auto; /* padding-left:220px; */ }
#footer .footer-wrap .bottom_logo { position:absolute; left:0; top:0; width:170px; }
#footer .footer-wrap .bottom_logo img { max-width:100%; }
#footer .footer-wrap ul { display:flex; line-height:170%; width:95%; margin:0 auto; max-width:1250px; }
#footer .footer-wrap li { font-size:14px; margin-left:20px; color:#777; position:relative;  }
#footer .footer-wrap ul li:first-child { margin:0; }
#footer .footer-wrap ul.bottom_menu { border-bottom:1px solid #ddd; padding-bottom:15px; margin-bottom:15px; }
#footer .footer-wrap ul.bottom_menu li { font-size:18px; margin-left:30px; }
#footer .footer-wrap ul.bottom_menu li:first-child { margin:0; }
#footer .footer-wrap ul.copyright { padding-top:10px; font-size:14px; }
.contents01 { padding-top:0px; width:calc(100% - 30px); max-width:1250px; margin:0 auto; }







.btn_close_wing { display:none; }
.folding_menu_btn { display:none; }


.wing_menu { color:#333; padding:0px 0 20px 0; width:300px; min-height:100%; position:relative; background:#fff; 
min-width:300px; overflow-y:scroll; height:100vh;}




.wm_title { background:#193b56;  padding:15px; color:#fff; }
.wm_title h1 { font-size:22px; font-weight:400; display:flex; align-items:center; }
.wm_btn_logout { font-size:11px; color:#fff; background:rgba(0,0,0,.6); border-radius:5px; margin:3px 0 0 10px; 
height:16px; line-height:14px; padding:0px 4px; font-weight:100; display:inline-block; }



.accordion {  width: 100%;   margin: 0px auto 20px; }

.accordion .link { cursor: pointer;  display: block;  padding: 15px 15px 15px 25px; 
font-size: 14px;  border-bottom: 1px solid #ddd;  position: relative;  
-webkit-transition: all 0.4s ease;  -o-transition: all 0.4s ease;  transition: all 0.4s ease; }

.accordion li:last-child .link { border-bottom: 0; }
.accordion li i {  position: absolute;  top: 16px;  left: 12px;  font-size: 18px;  
color: #aaa;  -webkit-transition: all 0.4s ease;  -o-transition: all 0.4s ease;  transition: all 0.4s ease;}
.accordion li i.fa-chevron-down {  right: 20px;  left: auto;  font-size: 16px;}
.accordion li.open .link { color: #333; }
.accordion li.open i { color: #aaa; }
.accordion li.open i.fa-chevron-down {  -webkit-transform: rotate(180deg);  -ms-transform: rotate(180deg);
-o-transform: rotate(180deg);  transform: rotate(180deg);}

.submenu {  display: none;  background: #f5f5f5;  font-size: 14px;}
.submenu li { border-bottom: 1px solid #eee; }
.submenu a {  display: block;  text-decoration: none;  color: #555;  padding: 12px;  padding-left: 42px;  -webkit-transition: all 0.25s ease;  -o-transition: all 0.25s ease;  transition: all 0.25s ease;}
.submenu a:hover {  background: #fff;  color: #333;}





.my_office_layout_left { display:none; min-width:100%; }
.header-wrap-mo { display:none; }



.dashboard { background:#fff; margin:0 auto;display:flex; justify-content:space-between; min-height:700px; }
.dashboard * { box-sizing:border-box; }
.db01  { width:300px;  background:#e4e9f4; padding:40px 30px 0 50px; margin-right:50px;flex-shrink:0  }
.dashboard_inner { flex-grow:1; margin:0 auto; }

.dashboard h2 { font-size:27px; font-weight:500; padding-bottom:10px; border-bottom:2px solid #9ba8c6; color:#2f416b; }
.db01 li { font-size:18px;  border-top:1px solid #cad2e3; padding:5px 0; }
.db01 a { display:block; padding:5px 0; font-size:18px; color:#222; width:100%; }
.db01 a:hover { color:#2f416b; }
.dashboard_contents { background:#fff; border-radius:10px; padding:30px; margin:30px 10px; border:2px solid #fff; 
max-width:1200px; width:100%; margin:0 auto; }



@media(max-width:1000px){
#header { min-width:100%; }
.db01 {display:none; }


.contents01 { padding-top:60px; width:100%; margin:0 auto; }
.btn_close_wing { display:block; position:absolute; top:20px; right:20px; }
.btn_close_wing span { color:#fff; font-size:30px; font-weight:500; display:block; cursor:pointer; }
.folding_menu_btn { z-index:2; display:flex; align-items:center; position:absolute; top:10px; left:5px;
width:45px; height:45px; /*background:rgba(0,0,0,.6); */ background:#fff; }
.folding_menu_btn ul { width:25px; margin:0 auto; }
.folding_menu_btn ul li { height:2px; width:25px; background:#aaa; margin-top:6px; }
.folding_menu_btn ul li:first-child { margin:0; }
.my_office_layout_left { /* flex-shrink:0; */ width:300px; height:100%; 
position:fixed; top:0; left:0px; z-index:9999999999999999999; }

.header-wrap { display:none; }
.header-wrap-mo { display:block; background:#fff; padding-left:50px; height:65px; position:relative; }
.header-wrap-mo h1.logo_m img { max-height:35px; margin-top:15px; }
.header-wrap-mo .myoffice {  position:absolute; top:16px; right:10px; }
.header-wrap-mo .myoffice a { display:inline-block; font-size:12px; line-height:14px; padding:8px 7px; background:#999; 
color:#fff; border-radius:7px; }

.dashboard_contents { width:100%; margin:0 auto;; padding:0; }


.layout_body { width:100%; min-height:100%; display:flex;}
.btn_close_wing_2 { flex-grow:1; background:rgba(0,0,0,0.5); }


#footer { background:#f5f5f5; padding:20px 10px 30px 10px;  }
#footer .footer-wrap { position:relative; width:100%; margin:0 auto; padding:0; }
#footer .footer-wrap .bottom_logo { position:relative; width:150px; }
#footer .footer-wrap .bottom_logo img { max-width:100%; }
#footer .footer-wrap ul { display:flex; flex-wrap:wrap; line-height:120%; padding:0 8px; }
#footer .footer-wrap li { font-size:10px; margin:0 10px 0 0; color:#777; position:relative;  }
#footer .footer-wrap ul.bottom_menu { border-bottom:1px solid #ddd; padding-bottom:15px; margin-bottom:15px; }
#footer .footer-wrap ul.bottom_menu li { font-size:13px; margin-left:10px; white-space:nowrap; }
#footer .footer-wrap ul.bottom_menu li:first-child { margin:0; }
#footer .footer-wrap ul.copyright { padding-top:10px; font-size:14px; }
}


@media(min-width:800px){
.my_office_layout_left { display:none !important; }
.overflow_hidden { overflow:auto; }

}




@media(max-width:1000px){
.lay_pop { left:5% !important; top:10px !important; max-width:90% !important; }
}



/* 모바일 하단 픽스 배너 */
.bottom_fixed_menu { width:100%; height:50px; position:fixed; left:0; bottom:0;   z-index:999; border-top:1px solid #eee; background:#865bb6; }
.bottom_fixed_menu ul { display:flex; width:90%; margin:0 auto; }
.bottom_fixed_menu ul li { height:45px; text-align:center; width:20%; flex-shrink:0;     -webkit-filter: brightness(0) invert(1); 
filter: brightness(0) invert(1); }
.bottom_fixed_menu ul li button { border:0; background: transparent; }
.bottom_fixed_menu ul li a { margin:0 auto; display:block; width:100%; height:50px; color:#fff; text-align:center;
background-size:auto 37%; background-position:center 8px; padding:32px 0 0 0; font-size:9px; background-repeat:no-repeat; white-space:nowrap; }

.bottom_fixed_menu .home { background-image:url('../image/m_bottom_btn_home.png') ;  }
.bottom_fixed_menu .category { background-image:url('../image/m_bottom_btn_category.png') ; }
.bottom_fixed_menu .search { background-image:url('../image/m_bottom_btn_search.png') ;  }
.bottom_fixed_menu .myshopping { background-image:url('../image/m_bottom_btn_myshopping.png') ; }
.bottom_fixed_menu .cart { background-image:url('../image/m_bottom_btn_cart.png') ; }
.bottom_fixed_menu .myoffice { background-image:url('../image/m_icon_myoffice.png') ; }



html.slide-out-top {  bottom: initial !important;  top: 0;}
html.slide-out-right {  left: 0;  right: initial !important;}
html.slide-out-bottom {  bottom: 0;  top: initial !important;}
html.slide-out-left {  left: initial !important;  right: 0;}
html.slide-out-panel-static {  position: static !important;  transition: none !important;  width: 100% !important;}
.slide-out-panel-container {  background-color: #fff;  bottom: 0;  box-shadow: -3px 3px 9px rgba(0, 0, 0, 0.3);  height: auto;  max-width: 100vw;  -webkit-overflow-scrolling: touch;  overflow-y: auto;  position: fixed;  top: 0;  transition: top ease, right ease, bottom ease, left ease;  z-index: 9999;}
.slide-out-panel-container * {  box-sizing: border-box; }
.slide-out-panel-container .close-slide-out-panel {  color: #000;  cursor: pointer;  font-size: 12px;  font-weight: bold;  height: auto;  line-height: 12px;  min-height: 12px;  min-width: 12px;  opacity: 0.5;  position: absolute;  right: 10px;  top: 50%;  transform: translateY(-50%);  transition: opacity 0.35s ease;  width: auto;  z-index: 9999;}
.slide-out-panel-container .close-slide-out-panel:hover {  font-weight: bold;  opacity: 1;}
.slide-out-panel-container .slide-out-header,
.slide-out-panel-container .slide-out-content,
.slide-out-panel-container .slide-out-footer {  position: relative;  width: 100%;}
.slide-out-panel-container .slide-out-header {  align-items: center;  background-color: #fff;  border: 1px solid #e5e5e5;  display: flex;  justify-content: center;  text-align: center;}
.slide-out-panel-container .slide-out-header h4 {  margin: 0;  padding: 0;}
.slide-out-panel-container .slide-out-content {  background-color: #fff;}
.slide-out-panel-container .slide-out-content.no-header {  padding-top: 30px;}
.slide-out-panel-container .slide-out-content.no-header .close-slide-out-panel {  display: block;}
.slide-out-panel-container .slide-out-content .close-slide-out-panel {  display: none;  position: absolute;  top: 15px;}
.slide-out-panel-container .slide-out-footer {  background-color: #fff;}

.slide-out-panel {  display: none;}
.slide-out-panel-screen {  height: 100vh;  left: 0;  opacity: 0;  position: fixed;  top: 0;  transition: opacity ease;  width: 100vw;}




/* 좌측 슬라이드 메뉴 */
.left_area { padding:15px 0px; }
.left_area .btnClose { position:absolute; right:15px; top:15px; z-index:10; }
.left_area .btnClose img {  height:22px; }
.left_area .logo_area { padding:0 10px 15px 15px; border-bottom:1px solid #eee; display:flex; align-items:center; }
.left_area .logo_area .logo img { max-height:30px; max-width:200px; }
.left_area .myinfo_logout { padding:15px; }
.left_area .myinfo_logout .user_name { color:#888; text-decoration:underline; }
.left_area .myinfo_logout .btn_logout { background:#777; color:#fff; border-radius:5px; padding:0 5px; }

.left_area .login_out { padding:20px 15px ; }
.left_area .login_out ul { display:flex; }
.left_area .login_out li { margin: 0 5px; flex-grow:1; }
.left_area .login_out a { display:block; background:#eee; border:1px solid #aaa; font-size:14px; text-align:center; width:100%; padding:3px 0 4px; border-radius:4px; }

.left_area .quick_menu { width:100%; padding:10px 0 7px;  }
.left_area .quick_menu ul { display:flex; }
.left_area .quick_menu ul li { width:25%; text-align:center; }
.left_area .quick_menu ul li a { display:block; height:50px; width:100%; padding-top:30px; font-size:13px; }
.left_area .quick_menu .quick_mypage a { background:url('../image/left_icon_mypage.png') no-repeat center top; background-size:30px; }
.left_area .quick_menu .quick_delivery a { background:url('../image/left_icon_delivery.png') no-repeat center top; background-size:30px; }
.left_area .quick_menu .quick_cart a { background:url('../image/left_icon_cart.png') no-repeat center top; background-size:30px; }
.left_area .quick_menu .quick_wishlist a { background:url('../image/left_icon_wishlist.png') no-repeat center top; background-size:30px; }




.cate_area { padding:0px 0; border-top:10px solid #f5f5f5; }
.cate_area h2 { padding:0px 20px 10px; color:#d93838; }
.cate_area .cate_main { position:relative; background:#fff; position:relative; border-top:1px solid #ddd; }
.cate_area .cate_main:first-child { border-top:0; }
.cate_area .cate_main a { padding:14px 10px 14px 20px;  color:#373537; font-size:16px; line-height:1.25; display:block; }
.cate_area .mcate { border-top:0; }
.cate_area .mcate a {  padding:8px 10px 8px 25px;  font-size:14px; }
.cate_area .cate_sub {display: none; }
.cate_area .cate_sub li { background:#f2f2f2; }
.cate_area .cate_sub li:first-child { border-top:10px solid #f2f2f2; }
.cate_area .cate_sub li:last-child { border-bottom:10px solid #f2f2f2; }
.cate_area .cate_sub li a { padding:5px 0 5px 25px; font-size:13px; }
.cate_area .cate_main a.btn_cate_go { position:absolute; top:10px; right:15px; display:block; font-size:11px; 
background:#f5f5f5; border:1px solid #ddd; border-radius:10px; height:18px; line-height:17px; padding:0 5px; z-index:999; }


.board_area { padding:0px 0; border-top:10px solid #f5f5f5; }
.board_area li { position:relative; background:#fff; position:relative; border-bottom:1px solid #eee; }
.board_area li a { padding:10px 10px 10px 20px;  color:#373537; font-size:14px; line-height:1.25; display:block; }


.btn_quick { position:fixed; right:10px; bottom:10px; width:58px;opacity:0; transition:opacity ease 0.3s; z-index:9999999 }
.btn_quick a { display:block; margin:10px auto; }

@media(max-width:900px){
.btn_quick { position:fixed; right:10px; bottom:60px; width:46px;opacity:0; transition:opacity ease 0.3s; z-index:9999999 }
.btn_quick a { display:block; margin:10px auto; }
}