@charset "UTF-8";

/*
    Document	: Layout.css
    Created on	: 15. 02. 01
    Author		: Nexist
    Description	: 레이아웃을 지정하는 스타일 시트입니다.
*/


#LM { position: fixed; z-index: 20; top: 1px; left: 280px; height: 60px; color: #0a1f37; background-color: rgba(0, 0, 0, 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);  line-height: 60px; width: 40px; text-align: center; cursor: pointer; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }
#LM:hover { background: #daac64; color: #fff; }
#top {
    position: sticky;
    top: 0;
    width: 100%;
    height: 61px;
    background: #3c4a53;
    z-index: 10;
    user-select: none;
    border-top: solid 1px #ddd;
}
#top .search { margin: 0 60px 0 340px; padding: 0 0 0 10px; height: 60px; overflow: hidden; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }
#top .search .shop_title { display: inline-block; font-size: 24px; line-height: 60px; color: #fff; font-weight: 700; vertical-align: middle; word-break: break-all; }
#top .search .searchBox { background: #eeeeee; border-radius: 4px 0 0 4px; padding: 0 10px; line-height: 20px; width: 60%; max-width: 380px; min-width: 150px; height: 40px; border: none; vertical-align: middle; }
#top .search .searchBtn { display: inline-block; background: #2bc5c5; height: 40px; width: 40px; text-align: center; line-height: 40px; color: white; border-radius: 0 4px 4px 0; font-size: 25px; overflow: hidden; vertical-align: middle; }
#top .topMenu { position: absolute; top: 0; right: 0; z-index: 10; font-size: 0; }
#top .topMenu li { display: inline-block; width: 65px; height: 60px; vertical-align: top; border-left: solid 1px rgba(0,0,0,0.1); }
#top .topMenu li a { display: block; color: white; text-align: center; padding-top: 5px; text-shadow: 0 0 5px rgba(255,255,255,0.8);}
#top .topMenu li a i { display: block; font-size: 19px; height: 30px; line-height: 30px; }
#top .topMenu li a span { display: block; text-align: center; font-size: 13px; }
#top .topMenu li.logout { background: #e3624c; color: white; }
#top .topMenu li.logout a { color: white; text-shadow: 0 0 5px rgba(0,0,0,0.3);}

#sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 300px;
    height: 100%;
    background: #3c4a53;
    color: #88aaaa;
    z-index: 999999;
    overflow: hidden;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
#sidebar #logo { position: fixed; top: 0; left: 0; height: 60px; padding: 16px 0 0 0; width: 300px; background: #2bc5c5; z-index: 999; text-align: center; font-family: 'Lato'; font-weight: 900;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
#sidebar #logo .falldown { color: white; display: block; font-size: 27px; }
#sidebar #logo .fold { color: white; display: none; }
#sidebar #header { position: fixed; top: 60px; left: 0; width: 300px; font-family: 'Lato'; font-weight: 400; text-align: center; padding: 0; height: 20px; line-height: 20px; z-index: 999; color: #0a1f37; background: #e1ab55; font-size: 12px;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
#sidebar #header .falldown { display: block; overflow: hidden; height: 14px; }
#sidebar #header .fold { display: none; overflow: hidden; height: 14px; }

#sidebar #logo { padding: 0 0 0 0; background: #0a1f37; }
#sidebar #logo img { max-width: 80%; width: 165px; transition: 0.3s ease-out; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

#sidebar #menu { margin: 0 0 0 0; width: 317px; height: 100%; overflow-x: hidden; overflow-y: scroll; 	-webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}

#sidebar #menu li.myinfo { position: relative; padding: 80px 0 0 0; background: #3a444d; width: 300px;}
#sidebar #menu li.myinfo .alram { position: absolute; top: 100px; left: 50%; margin: 0 0 0 40px; background: #e3624c; color: white; font-size: 17px; line-height: 30px; height: 30px; min-width: 20px; padding: 0 5px; text-align: center; border-radius: 20px; z-index: 99; }
#sidebar #menu li.myinfo .img { position: relative; z-index: 1; display: block; width: 140px; height: 140px; margin: 20px auto 0 auto; overflow: hidden !important; border-radius: 50%; }
#sidebar #menu li.myinfo .img.zaksim { background: #0c1a2a; padding: 15px; }
#sidebar #menu li.myinfo .img.hau { background: #323333; padding: 15px; }
#sidebar #menu li.myinfo .img.pickko { background: #0a1f37; padding: 10px; }
#sidebar #menu li.myinfo .img img { position: relative; z-index: 0; -webkit-transition: -webkit-transform 3s ease-out; -moz-transition: -moz-transform 3s ease-out; -o-transition: -o-transform 3s ease-out; -ms-transition: -ms-transform 3s ease-out; transition: transform 3s ease-out; }
/*#sidebar #menu li.myinfo:hover .img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }*/
#sidebar #menu li.myinfo .name { display: block; text-align: center; font-size: 21px; color: white; padding: 10px 0 0 8px; letter-spacing: 4px; font-weight: 700;}
#sidebar #menu li.myinfo .company{ display: block; text-align: center; text-align: center; padding: 0 10px 20px 13px; letter-spacing: 3px; color: white; opacity: 0.7; }

#sidebar #menu li.title { font-size: 11px; color: #fff; padding: 10px 13px 10px; background: #3e5a66; font-family: 'Lato'; }
#sidebar #menu li { position: relative; border-bottom: solid 1px #3a444d; }
#sidebar #menu li .rightArrow { position: absolute; left: 277px; top: 13px; }
#sidebar #menu li a { display: block; color: #a1a9b7; padding: 13px; cursor: pointer; font-size: 17px; }
#sidebar #menu li a.menu.on { background: #2e3841; border-left: solid 4px #2bc5c5; }
#sidebar #menu li a.menu i { display: inline-block; width: 22px; text-align: center; }
#sidebar #menu li a.menu:hover { color: white;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
#sidebar #menu li:hover a.menu { border-left: solid 4px #677185;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
#sidebar #menu li:active a.menu { border-left: solid 4px #e3624c;
    -webkit-transition: 0.1s ease-out;
    -moz-transition: 0.1s ease-out;
    -ms-transition: 0.1s ease-out;
    -o-transition: 0.1s ease-out;
    transition: 0.1s ease-out;
}

#sidebar #menu li .submenu { overflow: hidden; }
#sidebar #menu li .submenu.menuclose { display: none; }
#sidebar #menu li .submenu li { background: #262f36; color: #acb3c0; border-bottom: solid 1px #2e3841; border-top: 0; }
#sidebar #menu li .submenu li a { color: #acb3c0; padding-left: 33px; font-size: 14px; }
#sidebar #menu li .submenu li a.on { color: #acb3c0; font-weight: bold; }
#sidebar #menu li .submenu li:hover a { color: #c9ced6;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}

/*
.fold #sidebar #menu li a { width: 34px; font-size: 0 }
.fold #sidebar #menu li a.menu i { width: 34px; font-size: 22px }
.fold #sidebar #menu li a.menu i.fa-lg { font-size: 28px }
.fold #sidebar #menu li .rightArrow { display: none; }
.fold #sidebar #menu li .submenu { display: none !important; }
.fold #top #LM { left: 60px; }
.fold #top .search { margin: 0 120px 0 90px; }
.fold #sidebar { width: 60px; }
.fold #sidebar #logo { width: 60px; }
.fold #sidebar #logo a { width: 53px; padding: 0 0 0 7px; display: block; overflow: hidden; }
.fold #sidebar #logo .falldown { color: white; display: none; }
.fold #sidebar #logo .fold { color: white; display: block; }
.fold #sidebar #header { width: 60px; }
.fold #sidebar #header .fold { display: block; }
.fold #sidebar #header .falldown { display: none; }
.fold #sidebar #menu { padding: 80px 0 0 0; overflow: hidden; width: 60px; }
.fold #sidebar #menu .myinfo { display: none; }
.fold #sidebar #menu .title { display: none; }
.fold #sidebar #menu li a { width: 34px; font-size: 0 }
.fold #sidebar #menu li a.menu i { width: 34px; font-size: 22px }
.fold #sidebar #menu li a.menu i.fa-lg { font-size: 28px }
.fold #sidebar #menu li .rightArrow { display: none; }
.fold #sidebar #menu li .submenu { display: none !important; }
.fold #contents { margin: 0 0 0 60px; }
.fold #submenu { position: fixed; opacity: 0; }
.fold #submenu li { background: #262f36; color: #acb3c0; border-bottom: solid 1px #2e3841; border-top: 0; }
.fold #submenu li a { display: block; color: #acb3c0; padding: 13px 18px 13px 13px; cursor: pointer; font-size: 14px; overflow: hidden; }
.fold #submenu li a.on { color: #acb3c0; font-weight: bold; }
.fold #submenu li:hover a { color: #c9ced6;
    -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;
    -ms-transition: 0.3s ease-out;
    -o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
*/
#contents {
    position: relative;
    background: #eaeaea;
    min-height: 620px;
    padding: 20px;
    margin: 0 0 0 300px;
    z-index: 9;
    -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}

#bottom { margin: 0 0 0 280px; height: 54px; line-height: 54px; padding: 0 20px; border-top: solid 1px #ddd; }

.memberMenu { cursor: pointer; }
.managerMenu { cursor: pointer; }
#memberMenu { position: absolute; background: white; z-index: 999999; display: none; }
#memberMenu h4 { font-size: 11px; padding: 5px 13px; font-weight: 400; background: #eee; font-family: "Lato";}
#memberMenu ul { }
#memberMenu ul li { text-align: left; border-top: dotted 1px #eee; }
#memberMenu ul li a { display: block; color: #666; padding: 7px 20px 7px 10px; font-size: 12px; cursor: pointer; }
#memberMenu ul li a:hover { color: #1e1d1e; background: #fcfcfc; }
#memberMenu ul li a i { display: inline-block; width: 14px; text-align: center; }

.fold #LM { left: 60px; }
.fold #top .search { width: calc(100% - 100px - 180px); margin: 0 180px 0 100px; }
.fold #sidebar { width: 60px; }
.fold #sidebar #logo { width: 60px; }
.fold #sidebar #logo a { width: 100%; padding: 0; display: block; overflow: hidden; }
.fold #sidebar #header { width: 60px; }
.fold #sidebar #header .fold { display: block; }
.fold #sidebar #header .falldown { display: none; }
.fold #sidebar #menu { padding: 80px 0 0 0; overflow: hidden; width: 60px; }
.fold #sidebar #menu .myinfo { display: none; }
.fold #sidebar #menu .title { height: 17px; line-height: 17px; top: 0; overflow: hidden; padding: 0 0 0 4px; font-size: 10px; }
.fold #sidebar #menu li a { width: 60px; font-size: 0 }
.fold #sidebar #menu li a.menu i { width: 34px; font-size: 22px }
.fold #sidebar #menu li a.menu i.fa-lg { font-size: 28px }
.fold #sidebar #menu li .rightArrow { display: none; }
.fold #sidebar #menu li .submenu { display: none !important; }
.fold #contents { margin: 0 0 0 60px; }
.fold #submenu { position: fixed; z-index: 9; opacity: 0; }
.fold #submenu li { background: #262f36; color: #acb3c0; border-bottom: solid 1px #2e3841; border-top: 0; }
.fold #submenu li a { display: block; color: #acb3c0; padding: 13px 18px 13px 13px; cursor: pointer; font-size: 14px; overflow: hidden; }
.fold #submenu li a.on { color: #acb3c0; font-weight: bold; }
.fold #submenu li:hover a { color: #c9ced6; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }
.fold #bottom { margin: 0 0 0 60px;  }






#top .search { margin: 0 60px 0 320px; }

#sidebar { width: 280px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); user-select: none; }
#top {  background-color: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 8px rgba(80,80,80,0.3); }
#top .search .shop_title { color: #0a1f37; font-weight: 900; font-family: 'NanumSquare', Nanum Square; }
#top .topMenu li { transition: 0.3s ease-out; }
#top .topMenu li a { color: #616571; width: 100%; height: 100%; transition: 0.3s ease-out; }
#top .topMenu li:hover { background: #f0f0f0; }
#top .topMenu li:hover a { color: #0a1f37; }
#sidebar #logo { position: absolute; top: 0; left: 0; height: 100px; width: 280px; background: #0a1f37; background-color: rgba(0, 10, 33, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 8px rgba(0,0,0,0.3); }
#sidebar #logo a { display: block; padding: 10px; height: 100%; width: 100%; }
#sidebar #logo a img { width: 100%; max-width: 147px; }
/*#sidebar #menu li.myinfo .img { position: relative; z-index: 1; display: block; width: 140px; height: 140px; margin: 20px auto 0 auto; overflow: hidden !important; }*/

#sidebar #header { display: none; }
#sidebar #menu { width: 297px; }
#sidebar #menu li .rightArrow { top: 14px; left: 254px; }
#sidebar #menu li.myinfo { width: 280px; padding: 100px 0 0 0; height: 230px; text-align: center; overflow: hidden; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; }
#sidebar #menu li.myinfo .myinfo_inner_wrap { position: relative; display: inline-block; margin: 0 auto; height: 130px; max-width: 90%; padding: 28px 0 0 113px; }
#sidebar #menu li.myinfo .img { position: absolute; top: 15px; left: 0; width: 100px; height: 100px; margin: 0; padding: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
#sidebar #menu li.myinfo .img.zaksim { background: transparent; padding: 0; box-shadow: none; }
#sidebar #menu li.myinfo .img.hau { background: #323333; padding: 10px; }
#sidebar #menu li.myinfo .img.pickko { background: #0a1f37; padding: 10px; }

#sidebar #menu li.myinfo .img img { width: 100%; object-fit: contain; min-height: 100%; }
#sidebar #menu li.myinfo .name { text-align: left; margin-top: 2px; padding: 0 0 0 0; line-height: 24px; height: 24px; overflow: hidden; font-size: 21px; letter-spacing: 1.5px; font-weight: 700; font-family: 'NanumSquare', Nanum Square; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
#sidebar #menu li.myinfo .company { text-align: left; padding: 0 0 0 2px; line-height: 15px; height: 15px; overflow: hidden; opacity: 0.5; letter-spacing: 4px; font-family: 'Lato'; text-shadow: 0 1.5px 4px rgba(0,0,0,1); }
#sidebar #menu li.myinfo .logout { display: block; margin: 10px 0 0 1px; width: 78px; font-weight: 400; height: 20px; overflow: hidden; line-height:22px; padding: 0; font-size: 12px; color: white; background: #e3624c; text-shadow: 0 0 3px rgba(0,0,0,0.5); border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.3); font-family: "NanumBarunGothic", "Nanum Barun Gothic"; font-weight: 100; }
#sidebar #menu li.myinfo .logout i { margin-right: 3px; }

.fold #sidebar #logo { height: 60px; }
.fold #sidebar #logo a img { width: 80%; max-width: 147px; }
.fold #sidebar #menu { padding: 60px 0 0 0; }
.fold #sidebar #menu .myinfo { display: block; height: 0; padding: 0; }
#contents { margin: 0 0 0 280px; }

#sidebar #menu li.title { position: sticky; top: 100px; z-index: 10; }
#sidebar #menu li a { font-family: 'NanumSquare', 'Nanum Square'; font-weight: 700; padding: 14px 0 14px 12px; }
#sidebar #menu li a.on { color: #d5d6d9; }
#sidebar #menu li .submenu li a { font-family: "NanumBarunGothic", "Nanum Barun Gothic"; font-weight: 400; font-size: 14px; padding: 11px 0 11px 30px; letter-spacing: -0.5px; }
#sidebar #menu li .submenu li a.on { color: #d4d5d7; font-weight: 400; }