@charset "utf-8";

#wrap *::-webkit-scrollbar-track{background-color:#FAFAFA}
#wrap *::-webkit-scrollbar{width:5px;background-color:#FAFAFA}
#wrap *::-webkit-scrollbar-thumb{background-color:#AAAAAA}

*[data-modal]{cursor:pointer}
*[class^=modalOpen]{cursor:pointer}

/**/
#app{width: 500px;max-width:100%;min-height: calc(var(--vh, 1vh) * 100);margin: 0 auto;}

/**/
#app .app{min-height: calc(var(--vh, 1vh) * 100);overflow: hidden;}
#app .h1{margin:0 0 20px 0;line-height:29px;font-size:24px;font-weight:800;color:#222222}
#app .checkbox{cursor:pointer;display:flex;align-items:flex-start;gap:5px;}
#app .checkbox input{display:none;}
#app .checkbox input ~ i{width:24px;height:24px;background:url("../img/checkbox.png") no-repeat 50% 50% / contain}
#app .checkbox input ~ p{padding:4px 0;line-height:16px;font-size:13px;font-weight:600;color:#3e3e3e;}
#app .checkbox input:checked ~ i{background:url("../img/checkbox_on.png") no-repeat 50% 50% / contain}
#app .checkbox.grn input:checked ~ i{background:url("../img/checkbox_on_grn.png") no-repeat 50% 50% / contain}
#app .input{display:flex;padding: 12px 18px;width:100%;height:54px;border-radius:8px;border:1px solid #ECECEC;line-height: 18px;font-size: 15px;color: #3B4652;}
#app .input2{border-color:#20CC8E}
#app .input3{border-color:#E6002D}
#app .date_input{width: 100%;background:url("../img/icon_date.png") no-repeat right 12px center / auto 14px;}
#app .btn_01{border-color:#E6002D !important;background-color:#E6002D !important;color:#FFFFFF !important;}
#app .btn_02{border-color:#E6002D !important;background-color:#FFFFFF !important;color:#E6002D !important;}
#app .btn_03{border-color:#3B4652 !important;background-color:#3B4652 !important;color:#FFFFFF !important;}
#app .btn_04{border-color:#20CC8E !important;background-color:#20CC8E !important;color:#FFFFFF !important;}
#app .btn_05{border-color:#ECECEC !important;background-color:#ffffff !important;color:#222222 !important;}

/**/
#appbar{position:fixed;z-index:100;bottom: 0;left: 0;width: 100%;display: flex;align-items: center;justify-content: center;}
#appbar ul{display:flex;background:#ffffff;border-top: 1px solid #ececec;width: 500px;height: 70px;justify-content: space-between;padding: 0 10px;max-width: 100%;}
#appbar li{position:relative;}
#appbar li a{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;width: 70px;height: 70px;}
#appbar li a i{position: relative;width: 30px;height: 30px;}
#appbar li a p{display:block;line-height:14px;font-size:12px;font-weight:600;color: #3b4652;}
#appbar li a.on p{color:#20CC8E}
#appbar li a.app01 i{background:url("../img/app01.png") no-repeat 50% 50% / contain}
#appbar li a.app02 i{background:url("../img/app02.png") no-repeat 50% 50% / contain}
#appbar li a.app03 i{background:url("../img/app03.png") no-repeat 50% 50% / contain}
#appbar li a.app04 i{background:url("../img/app04.png") no-repeat 50% 50% / contain}
#appbar li a.app01.on i{background:url("../img/app01_on.png") no-repeat 50% 50% / contain}
#appbar li a.app02.on i{background:url("../img/app02_on.png") no-repeat 50% 50% / contain}
#appbar li a.app03.on i{background:url("../img/app03_on.png") no-repeat 50% 50% / contain}
#appbar li a.app04.on i{background:url("../img/app04_on.png") no-repeat 50% 50% / contain}
#appbar li a.new i{}
#appbar li a.new i:before{content:'';position:absolute;top:5px;right:3px;width:6px;height:6px;border-radius:6px;background: #20cc8e;}


/**/
#header{position: fixed;top: 0;left: 50%;display: flex;padding: 20px;width: 500px;max-width: 100%;height: 70px;align-items:center;justify-content: space-between;z-index: 10;background: transparent;transform: translateX(-50%);transition: background 0.35s;}
#header.fixed{background:#ffffff}
#header .logo{}
#header .logo a{display:flex;}
#header .logo img{display: block;width: auto;height: 20px;object-fit: contain;}
#header .menu{}
#header .menu button{background:transparent}
#header .menu button img{height:44px;}

/**/
#heading{position: sticky;top: 0;display: flex;align-items: center;justify-content: center;height: 70px;background: #ffffff;z-index: 100;padding: 0 20px;text-align: center;transition: all 0.35s;}
#heading.fixed{box-shadow:0 4px 14px rgba(0,0,0,0.07)}
#heading .back{position: absolute;top: 50%;left: 20px;width: 30px;height: 30px;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;}
#heading .back a{display:flex;width: 20px;height: 20px;text-indent:-9999em;overflow:hidden;background: url("../img/icon_back.png") no-repeat 50% 50% / contain;}
#heading .title{line-height: 30px;font-size: 17px;font-weight: 700;color: #222222;}
#heading .toggle{position: absolute;top: 50%;right: 20px;width: 30px;height: 30px;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;}
#heading .toggle button{width: 20px;height: 20px;background: transparent;background: url("../img/popdel.png") no-repeat 50% 50% / contain;text-indent: -9999em;overflow: hidden;display: block;}
#heading .toggle button.on{background: url("../img/icon_search_b.png") no-repeat 50% 50% / contain;}

/**/
#global{position:fixed;top:0;left: 50%;max-width: 100%;width: 500px;height:100%;z-index:101;opacity:0;visibility:hidden;transform: translateX(-50%);overflow: hidden;}
#global.active{opacity:1;visibility:visible}
#global.active .global{transform:translateX(0)}
#global .global{position:relative;padding: 0 20px;width:calc(100% - 60px);min-height: calc(var(--vh, 1vh) * 100);position:absolute;top:0;right:0;background:#ffffff;z-index:10;transform:translateX(100%);transition:all 0.35s}
#global .global .head{display: flex;align-items:center;justify-content:flex-end;width: 100%;height: 70px;}
#global .global button{background:transparent}
#global .global button img{height:44px;}
#global .info{padding: 0 0 20px;border-bottom: 1px solid #eceecc;}
#global .info .tit{margin:0 0 12px;line-height:17px;font-size:14px;font-weight:600;color:#636d79}
#global .info .con{display: flex;align-items: center;gap: 12px;padding: 24px;min-height: 108px;border-radius: 8px;background: #20CC8E;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#global .info .con .icon{width: 60px;height: 60px;padding: 1px;display: flex;align-items: center;justify-content: center;}
#global .info .con .icon img{width: 100%;height: 100%;object-fit: contain;border-radius: 100%;overflow: hidden;}
#global .info .con .cont{flex: 1;display: flex;flex-direction: column;align-items: flex-start;gap: 6px;}
#global .info .con .cont .posi{display: flex;align-items: center;justify-content: center;padding: 4px 8px;height: 22px;border-radius: 22px;background: #3B4652;line-height: 1.2;font-size: 10px;font-weight: 700;color: #ffffff;}
#global .info .con .cont .name{display: flex;align-items: center;justify-content: flex-start;gap: 6px;line-height: 20px;font-size: 17px;font-weight: bold;color: #fff;}
#global .info .con .cont .name .group{font-size: 13px;font-weight: 400;color: #fff;}
#global .menu{padding: 20px 0;}
#global .menu .tit{margin:0 0 12px;line-height:17px;font-size:14px;font-weight:600;color:#636d79}
#global .menu .con{}
#global .menu .con ul{display: flex;flex-direction: column;gap: 30px;}
#global .menu .con li{}
#global .menu .con li a{display: flex;align-items: center;gap: 10px;}
#global .menu .con li a img{width: 24px;height: 24px;object-fit: contain;}
#global .menu .con li a p{flex: 1;line-height: 18px;font-size: 15px;font-weight: 600;color: #3b4652;}
#global .menu .con li a i{display: block;width: 5px;height: 10px;background: url("../img/arrow_right.png") no-repeat 50% 50% / contain;}
#global .bg{position:absolute;z-index:9;width:100%;height:100%;background:#000;opacity:0.5}

/**/
#allmenu{background:#ffffff}
#allmenu .info{display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 108px;padding: 46px 24px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);background: linear-gradient(320deg, rgba(0,156,243,1) 0%, rgba(32,204,142,1) 100%);}
#allmenu .info .icon{width: 75px;height: 75px;padding: 1px;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 75px;margin: 0 0 12.5px;}
#allmenu .info .icon img{width: 100%;height: 100%;object-fit: contain;border-radius: 100%;overflow: hidden;}
#allmenu .info .cont{display: flex;flex-direction: column;align-items: center;justify-content: center;gap: 6px;}
#allmenu .info .cont .posi{display: flex;align-items: center;justify-content: center;padding: 5px 8px;height: 22px;border-radius: 22px;background: #20CC8E33;line-height: 1.2;font-size: 10px;font-weight: 700;color: #20CC8E;}
#allmenu .info .cont .name{display: flex;align-items: center;justify-content: flex-start;gap: 9px;line-height: 20px;font-size: 17px;font-weight: bold;color: #fff;}
#allmenu .info .cont .name .group{font-size: 13px;font-weight: 400;color: #fff;}
#allmenu .info .cont .name a{display:flex;align-items:center;gap:6px;line-height: 20px;font-size: 17px;font-weight: bold;color: #fff;}
#allmenu .info .cont .name a:after{content:'';width: 10px;height: 16px;background: url("../img/arrow_right_w.png") no-repeat 50% 50% / contain;flex-shrink: 0;}
#allmenu .menu{padding: 23px 20px;background: #ffffff;}
#allmenu .menu ul{display: flex;flex-direction: column;gap: 10px;}
#allmenu .menu li{}
#allmenu .menu li a{display: flex;align-items: center;gap: 10px;height: 55px;border-radius: 10px;background: #f9f9f9;padding: 10px 20px;}
#allmenu .menu li a img{width: 24px;height: 24px;object-fit: contain;}
#allmenu .menu li a p{flex: 1;line-height: 18px;font-size: 15px;font-weight: 600;color: #3b4652;}
#allmenu .menu li a i{display: block;width: 7px;height: 14px;background: url("../img/arrow_right.png") no-repeat 50% 50% / contain;}

/**/
#login{display:flex;flex-direction:column;justify-content:center;min-height: calc(var(--vh, 1vh) * 100);padding: 20px;background:url("../img/login_bg.png") no-repeat bottom center / cover}
#login .logo{margin:0 0 75px;text-align:center;display: flex;justify-content: center;align-items: center;flex-direction: column;}
#login .logo p{margin:0 0 11px;line-height:19px;font-size:16px;font-weight:600;color:#3e3e3e;}
#login .logo img{display:block;width:auto;height:30px;object-fit:contain}
#login .form{margin: 0 0 14px;}
#login .form ul{display:flex;flex-direction:column;gap:11px;}
#login .form li{display:flex;flex-direction:column;gap:6px;}
#login .form li.error input{border-color:#e6002d;}
#login .auto{margin:0 0 20px;}
#login .button{display: flex;flex-direction:column;gap:11px;}
#login .button .btn{width:100%;height:54px;border-radius:54px;border:1px solid transparent;font-size:15px;font-weight:700;}
#login .guide{margin:36px 0 0 0;text-align:center;line-height:16px;font-size:13px;font-weight:500;color:#3b4652;}

/**/
#alarm{padding: 90px 20px 20px;background: #ffffff;}
#alarm .h1{margin:0 0 40px 0}
#alarm .content{}
#alarm .title{margin: 0 0 20px;line-height: 20px;font-size: 17px;font-weight: bold;color: #222222;}
#alarm .title span{color:#20CC8E;}
#alarm .list{}
#alarm .list ul{display: flex;flex-direction: column;gap: 20px;}
#alarm .list li{}
#alarm .list li a{display:flex;align-items:center;gap: 13px;}
#alarm .list li a .ico{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 10px;border: 1px solid #ececec;background: #f9f9f9;}
#alarm .list li a .ico img{display: block;width: 20px;height: 20px;object-fit: contain;}
#alarm .list li a .con{flex:1;display:flex;flex-direction:column;gap:2px;align-items:flex-start;}
#alarm .list li a .con .name{line-height: 17px;font-size: 14px;font-weight: 500;color: #222222;}
#alarm .list li a .con .date{line-height: 16px;font-size: 13px;font-weight: 400;color: #636d79;}

/**/
#index{padding: 90px 20px;background: #f9f9f9;}
#index .h2{margin: 0 0 11px;line-height: 20px;font-size: 17px;font-weight: bold;color: #222222;}
#index .h2 a{display:flex;align-items:center;gap:6px}
#index .h2 a:after{content:'';width:7px;height:14px;background:url("../img/arrow_right_b.png") no-repeat 50% 50% / contain}
#index .greeting{display: flex;flex-direction: column;align-items: flex-start;margin: 0 0 40px;}
#index .greeting .posi{display:inline-flex;align-items:center;justify-content:flex-start;height:24px;border-radius:24px;padding:5px 7px;background:rgba(32, 204, 142, 0.2);line-height: 1;font-size: 12px;font-weight: bold;color: #20cc8e;margin: 0 0 7px;}
#index .greeting .name{line-height:28px;font-size:24px;font-weight:400;color:#222222;}
#index .greeting .name strong{font-weight:800;}
#index .record{margin: 0 0 35px;}
#index .record .content{padding:24px;border-radius:20px;background:#ffffff;box-shadow:0 4px 14px rgba(0,0,0,0.07)}
#index .record .figure{display:flex;align-items:center;justify-content:space-between;height: 60px;margin: 0 0 14px;}
#index .record .figure .number{}
#index .record .figure .number span{}
#index .record .figure .number p{}
#index .record .figure .rate{position: relative;width: 60px;height: 60px;display: flex;flex-direction: column;align-items: center;justify-content: center;background: #FFFFFF;border: 2px solid #cecece;border-radius: 50%;padding: 4px 0 0 0;}
#index .record .figure .rate span{position: relative;z-index:2;line-height: 12px;font-size: 10px;font-weight: bold;color: #3b4652;}
#index .record .figure .rate p{position: relative;z-index:2;line-height: 19px;font-size: 14px;font-weight: 800;color: #20cc8e;}
#index .record .figure .rate .round{transition: all 1s ease-in-out;fill: none;stroke: #20CC8E;stroke-width: 4;stroke-linecap: round;stroke-dasharray: 0 999;position: absolute;top: 50%;left: 50%;transform: rotate(-90deg) translate(-50%,-50%);transform-origin: top left;}
#index .record .detail{margin: 0 0 50px;padding: 20px;background: #222222;border-radius: 10px;display: flex;flex-direction: column;align-items: flex-start;gap: 11px;display:none;}
#index .record .detail.on{display: flex;}
#index .record .detail .month{display: inline-flex;align-items: center;justify-content: flex-start;line-height: 17px;font-size: 14px;font-weight: 800;color: #fff;cursor: pointer;gap: 4px;}
#index .record .detail .month i{width: 10px;height: 5px;display: block;background: url("../img/arrow_down_w.png") no-repeat 50% 50% / contain;}
#index .record .detail .cont{display: flex;flex-direction: column;gap: 8px;width: 100%;}
#index .record .detail .cont dl{display:flex;line-height: 18px;font-size: 13px;color: #fff;align-items: center;justify-content: space-between;}
#index .record .detail .cont dt{}
#index .record .detail .cont dt span{color:#20CC8E;}
#index .record .detail .cont dt strong{font-size:15px;font-weight:400}
#index .record .detail .cont dd{font-size: 13px;}
#index .record .detail .cont dd strong{font-size:15px;font-weight:800;}
#index .record .graph{}
#index .record .button{margin-top:14px;}
#index .record .button .btn{display:flex;width:100%;height:54px;border-radius:54px;align-items:center;justify-content:center;gap: 5px;font-size: 15px;font-weight: bold;}
#index .record .button .btn img{height:15px;width:auto;object-fit:contain}
#index .search{margin: 0 0 40px;}
#index .search .form{position: relative;}
#index .search .form input{padding: 12px 48px 12px 18px;width: 100%;height: 54px;}
#index .search .form button{position:absolute;top:50%;right: 18px;width: 18px;height: 18px;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;background:transparent}
#index .search .form button img{display:block;width:100%;height:100%;object-fit:contain}
#index .report{margin:0 0 40px;}
#index .report .list{border-radius:20px;background:#ffffff;box-shadow:0 4px 14px rgba(0,0,0,0.07)}
#index .report .list ul{display:flex;justify-content:space-between;align-items:center;}
#index .report .list li{width: 33.33%;aspect-ratio: 1 / 1;display: flex;align-items: center;justify-content: center;}
#index .report .list li a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;line-height:16px;font-size:13px;font-weight:600;color:#222222}
#index .report .list li a img{width:36px;height:36px;object-fit:contain}
#index .customer{}
#index .customer .list{}
#index .customer .list ul{display: flex;flex-direction: column;flex-direction: column;gap: 10px;}
#index .customer .list li{border-radius: 20px;background: #ffffff;box-shadow: 0 4px 14px rgba(0,0,0,0.07);padding: 20px;position: relative;}
#index .customer .list li .code{display: flex;align-items: center;gap: 4px;line-height: 14px;font-size: 12px;font-weight: 400;margin: 0 0 9px;}
#index .customer .list li .code span{color: #20CC8E;}
#index .customer .list li .code p{color: #222222;}
#index .customer .list li .name{line-height: 18px;font-size: 15px;font-weight: 600;color: #222222;}
#index .customer .list li .date{margin: 3px 0 0;line-height: 14px;font-size: 12px;font-weight: 300;color: #3b4652;}
#index .customer .list li .book{position: absolute;top: 50%;right: 20px;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;text-indent: -9999em;overflow: hidden;background: url("../img/book.png") no-repeat 50% 50% / contain;cursor: pointer;}
#index .customer .list li .book.on{background: url("../img/book_on.png") no-repeat 50% 50% / contain;}
#index .customer .more{margin-top:14px;display:flex;align-items:center;justify-content:Center;}
#index .customer .more .btn{display:flex;padding: 2px 14px 0;height: 38px;border-radius: 38px;align-items:center;justify-content:center;gap: 5px;font-size: 12px;font-weight: 500;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#index .customer .more .btn img{height:15px;width:auto;object-fit:contain}

/**/
#rank{padding: 90px 20px;background: #f9f9f9;}
#rank .h2{margin: 0 0 11px;line-height: 20px;font-size: 17px;font-weight: bold;color: #222222;}
#rank .h2 a{display:flex;align-items:center;gap:6px}
#rank .h2 a:after{content:'';width:7px;height:14px;background:url("../img/arrow_right_b.png") no-repeat 50% 50% / contain}
#rank .greeting{display: flex;flex-direction: column;align-items: flex-start;margin: 0 0 40px;}
#rank .greeting .text{line-height: 29px;font-size: 24px;font-weight: 800;color: #222;}
#rank .desc{margin:0 0 40px}
#rank .desc .content{padding: 24px;border-radius: 20px;background: #fff;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#rank .desc .content .title{line-height: 22px;font-size: 17px;font-weight: bold;color: #222222;margin: 0 0 17px;}
#rank .desc .content .title span{color:#20cc8e}
#rank .desc .content .cont{}
#rank .desc .content .cont ul{}
#rank .desc .content .cont li{display:flex;align-items:center;gap:10px;min-height: 28px;}
#rank .desc .content .cont li + li{margin-top:28px;}
#rank .desc .content .cont li .num{display:flex;align-items:center;justify-content:center;width:24px;height:17px;background:#f0f0f0;border-radius:17px;font-size:9px;font-weight:600;color:#3b4652;}
#rank .desc .content .cont li .con{flex:1;display:flex;flex-direction:column;align-items:flex-start;}
#rank .desc .content .cont li .con .name{line-height:13px;font-size:11px;font-weight:600;color:#222222}
#rank .desc .content .cont li .con .code{margin:3px 0 0;line-height:11px;font-size:9px;font-weight:500;color:#b0b0b0}
#rank .desc .content .cont li .pri{display:flex;flex-direction:column;flex-shrink:0;align-items:flex-end;text-align:right;}
#rank .desc .content .cont li .pri .price{line-height: 13px;font-size: 12px;font-weight: bold;color: #222222;}
#rank .desc .content .cont li .pri .rate{margin: 3px 0 0;line-height: 11px;font-size: 9px;font-weight: 500;color: #b0b0b0;display: flex;align-items: center;gap: 4px;}
#rank .desc .content .cont li .pri .rate.up{color: #20cc8e;}
#rank .desc .content .cont li .pri .rate.up i{width: 6px;height: 5px;box-sizing: border-box;border-top: 0px solid transparent;border-left: 3px solid transparent;border-right: 3px solid transparent;border-bottom: 5px solid #20cc8e;}
#rank .desc .content .cont li .pri .rate.down{color: #636D79;}
#rank .desc .content .cont li .pri .rate.down i{width: 6px;height: 5px;box-sizing: border-box;border-top: 5px solid #636D79;border-left: 3px solid transparent;border-right: 3px solid transparent;border-bottom: 0px solid transparent;}
#rank .desc .content .cont li:nth-child(1) .num,
#rank .desc .content .cont li:nth-child(2) .num,
#rank .desc .content .cont li:nth-child(3) .num{color:#20CC8E;background:#20CC8E33}
#rank .desc:nth-child(odd){}
#rank .desc:nth-child(odd) .content{background:#3B4652}
#rank .desc:nth-child(odd) .content .title{color:#ffffff}
#rank .desc:nth-child(odd) .content .cont{}
#rank .desc:nth-child(odd) .content .cont li{}
#rank .desc:nth-child(odd) .content .cont li .con{}
#rank .desc:nth-child(odd) .content .cont li .con .name{color:#ffffff}
#rank .desc:nth-child(odd) .content .cont li .pri{}
#rank .desc:nth-child(odd) .content .cont li .pri .price{color:#ffffff}
#rank .desc:nth-child(odd) .content .cont li .pri .rate{color:#ffffff}
#rank .desc:nth-child(odd) .content .cont li:nth-child(1) .num,
#rank .desc:nth-child(odd) .content .cont li:nth-child(2) .num,
#rank .desc:nth-child(odd) .content .cont li:nth-child(3) .num{color:#ffffff;background:#20CC8E}

/**/
#status{padding: 0 0 70px 0;background: #f9f9f9;}
#status .search{margin: 0 0 20px;padding: 20px 20px 22px;border-radius:0 0 20px 20px;background:#ffffff;box-shadow:0 4px 14px rgba(0,0,0,0.07);}
#status .search.on{display:none;}
#status .search .tabs{margin:0 0 16px;}
#status .search .tabs ul{display:flex;gap:4px}
#status .search .tabs li{flex:1;}
#status .search .tabs li a{display:flex;align-items:Center;justify-content:Center;height:37px;width:100%;border-radius:4px;border:1px solid #ececec;font-size:14px;color:#3b4652;}
#status .search .tabs li a.on{border-color:#20CC8E;color:#20CC8E;}
#status .search .prod{margin: 0 0 17px;padding: 0 0 17px;border-bottom: 1px solid #ececec;}
#status .search .prod button{width: 100%;height: 42px;border-radius: 8px;border: 1px solid #ececec;text-align: left;background: #f9f9f9;background: #f9f9f9 url("../img/icon_search_g.png") no-repeat right 12px center / auto 16px;font-size: 14px;font-weight: bold;display: flex;align-items: center;justify-content: flex-start;gap: 10px;padding: 6px 54px 6px 12px;}
#status .search .prod button p{min-width: 50px;}
#status .search .prod button strong{font-weight:500;color:#20CC8E;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:85%;}
#status .search .option{margin: 0 0 20px;}
#status .search .option ul{display:flex;flex-direction:column;gap:10px;}
#status .search .option li{display:flex;gap:6px;align-items: center;}
#status .search .option li .desc{flex:1;display: flex;gap:6px;}
#status .search .option li .select{}
#status .search .option li .select button{border-radius: 8px;border: 1px solid #ececec;background: #ffffff;display: flex;align-items: center;padding: 4px 36px 4px 12px;min-width: 88px;height: 42px;background: url(../img/arrow_dropdown.png) no-repeat right 12px center / auto 6px;white-space: nowrap;color: #000;font-size: 15px;}
#status .search .option li .text{position: relative;border-radius: 8px;border: 1px solid #ececec;background: #ffffff;display: flex;align-items: center;padding: 4px 12px;gap: 4px;height: 42px;flex: 1;}
#status .search .option li .text .del{right:12px;}
#status .search .option li .text input{width: 100%;height: 24px;padding: 0 20px 0 0;font-size: 15px;}
#status .search .option li .date_input{width: 100%;height: 24px;padding: 0 20px 0 0;font-size: 15px;}
#status .search .option li dl{border-radius:8px;border:1px solid #ececec;background:#ffffff;display:flex;align-items:center;padding: 4px 12px;gap: 4px;height: 42px;}
#status .search .option li dt{flex-shrink:0;white-space:nowrap;font-size: 14px;font-weight: bold;color: #222;line-height: 24px;min-width: 50px;}
#status .search .option li dd{position: relative;flex:1;}
#status .search .option .inp{width:100%;height: 24px;padding: 0 10px 0 0;font-size: 15px;}
#status .search .option .sel{width:100%;height: 24px;padding: 0 20px 0 0;font-size: 15px;border:0;color: #000;}
#status .search .option .del{position: absolute;top: 50%;right: 0;transform: translateY(-50%);display: none;}
#status .search .option .del.on{display:block;}
#status .search .option .del a{display:flex;align-items:center;justify-content:center;width: 24px;height: 24px;}
#status .search .option .del img{width: 15px;height: 15px;object-fit:contain}
#status .search .option .submit{position: absolute;top: 50%;right: 0;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;}
#status .search .option .submit img{width:15px;height:15px;object-fit:contain}
#status .search .button{margin:10px 0 0 ;display:flex;align-items:center;justify-content:Center;}
#status .search .button .btn{display:flex;width:100%;height:44px;align-items: center;justify-content: center;text-align: center;gap: 6px;font-size: 15px;font-weight: bold;border-radius: 8px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#status .search .button .btn img{height:15px;width:auto;object-fit:contain}
#status .result{margin: 20px;}
#status .result .upper{display: flex;align-items: center;justify-content: space-between;margin: 0 0 14px;}
#status .result .upper .total{display: flex;align-items: center;gap: 6px;font-size: 17px;font-weight: 700;color: #222222;}
#status .result .upper .total strong{color:#20cc8e}
#status .result .upper .sort{position:relative;}
#status .result .upper .sort button{display: flex;align-items: center;justify-content: center;padding: 0 14px;height: 36px;border-radius: 36px;border: 1px solid #ececec;background: #ffffff;font-size: 12px;font-weight: 500;color: #636d79;gap: 5px;}
#status .result .upper .sort button:after{content:'';width: 10px;height: 6px;background:url("../img/arrow_dropdown.png") no-repeat 50% 50% / contain;flex-shrink: 0;}
#status .result .filter{margin:0 0 12px}
#status .result .filter .box{margin-left: 4px;padding:4px 8px;width:auto;display:flex;align-items:center;justify-content:Center;background:#20CC8E33;border-radius:25px;height: 25px;}
#status .result .filter .box p{line-height: 18px;font-size: 12px;font-weight:500;color:#20CC8E;}
#status .result .filter .box .del{width: 18px;height: 18px;display: flex;align-items: center;justify-content: center;background: transparent;flex-shrink:0}
#status .result .filter .box .del img{width:100%;height:100%;object-fit:contain}
#status .result .list{}
#status .result .list{}
#status .result .list ul{}
#status .result .list li{border-radius: 20px;background: #fff;margin: 0 0 20px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#status .result .list .head{padding: 20px;border-bottom: 1px solid #ececec;}
#status .result .list .head .code{line-height: 14px;font-size: 12px;font-weight: 400;color: #20cc8e;margin: 0 0 4px;display: flex;flex-wrap: wrap;gap: 10px;}
#status .result .list .head .code dl{display:flex;gap:4px;color:#222222}
#status .result .list .head .code dt{font-weight:bold;}
#status .result .list .head .name{display: flex;}
#status .result .list .head .name a{display: inline-flex;line-height:18px;font-size:15px;font-weight:bold;color:#222222;padding: 0 14px 0 0;background: url("../img/arrow_right_link.png") no-repeat right center / auto 10px;}
#status .result .list .cont{padding: 20px 20px 24px;}
#status .result .list .cont dl{display:flex;align-items:flex-start;justify-content: space-between;font-size:13px;}
#status .result .list .cont dl + dl{margin-top:14px;}
#status .result .list .cont dt{line-height: 18px;font-size: 13px;font-weight: 600;color: #222;}
#status .result .list .cont dd{flex: 1;display: flex;flex-direction: column;align-items: flex-end;justify-content: flex-start;line-height: 18px;}
#status .result .list .cont dd .text{font-size:13px;}
#status .result .list .cont dd .sales{line-height: 18px;font-size: 15px;font-weight: bold;color: #222;}
#status .result .list .cont dd .rate{margin: 3px 0 0 0;display: flex;align-items: center;gap: 4px;}
#status .result .list .cont dd .rate span{padding: 5px 4px;display: flex;align-items: center;justify-content: center;line-height: 1;font-size: 10px;font-weight: 500;color: #20cc8e;background: #20CC8E33;border-radius: 4px;}
#status .result .list .cont dd .rate p{font-size: 12px;font-weight: bold;color: #20cc8e;}
#status .result .list .cont dl.current{padding: 12px 15px;border-radius:10px;background:#f9f9f9;}
#status .result .list .cont dl.current dt{font-size:13px;font-weight:bold;color:#3b4652;}
#status .result .list .cont dl.current dd{font-size: 16px;font-weight: bold;color: #20cc8e;}
#status .detail{background: #ffffff;padding: 7px 0 0 0;}
#status .detail .upper{padding: 24px;background: #F9F9F9;border-radius: 10px;margin: 0 20px 20px;}
#status .detail .upper .head{display: flex;align-items: center;height: 24px;gap:5px;}
#status .detail .upper .head .book{}
#status .detail .upper .head .book button{width:24px;height:24px;background:url("../img/book.png") no-repeat 50% 50% / contain}
#status .detail .upper .head .book button.on{background:url("../img/book_on.png") no-repeat 50% 50% / contain}
#status .detail .upper .head .name{line-height:24px;font-size:17px;font-weight:bold;color:#222222;}
#status .detail .upper .head .link{flex-shrink:0;}
#status .detail .upper .head .link a{width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
#status .detail .upper .head .link a img{width:14px;height:14px;}
#status .detail .upper .info{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:6px 12px;}
#status .detail .upper .info dl{position:relative;display:flex;align-items:center;gap:4px;font-size:13px;color:#222222;}
#status .detail .upper .info dl:after{content:'';position:absolute;top:50%;right:-6px;width:1px;height:10px;transform:translateY(-50%);background:#ececec;}
#status .detail .upper .info dl:last-child:after{display:none;}
#status .detail .upper .info dt{font-weight:700;}
#status .detail .upper .info dd{font-weight:400;}
#status .detail .content{border-top:1px solid #ececec;padding: 20px 20px 32px;}
#status .detail .desc{padding: 24px 0 0;}
#status .detail .desc.desc01{padding: 0;border-bottom: 1px dashed #ececec;}
#status .detail .desc.desc02{}
#status .detail .desc.desc02 .con{background:#f9f9f9;padding:20px}
#status .detail .desc.desc02 .con dd{}
#status .detail .desc.desc02 .con dd .sales{font-size:17px;font-weight:800;}
#status .detail .desc.desc03{}
#status .detail .desc.desc03 .con{border-top:1px solid #ececec}
#status .detail .desc.desc03 .con:last-child{border-bottom:1px solid #ececec}
#status .detail .desc .tit{line-height: 18px;font-size: 15px;font-weight: 700;color: #222222;margin: 0 0 10px;}
#status .detail .desc .con{padding: 14px 0;}
#status .detail .desc .con dl{display: flex;align-items: flex-start;justify-content: space-between;line-height: 20px;}
#status .detail .desc .con dl + dl{margin-top: 6px;}
#status .detail .desc .con dt{font-size: 14px;color: #636d79;}
#status .detail .desc .con dd{flex: 1;display: flex;flex-direction: column;align-items: flex-end;justify-content: flex-start;}
#status .detail .desc .con dd .sales{line-height: 20px;font-size: 14px;font-weight: bold;color: #222;}
#status .detail .desc .con dd .rate{display: flex;align-items: center;gap: 4px;}
#status .detail .desc .con dd .rate span{padding: 5px 6px;display: flex;align-items: center;justify-content: center;line-height: 1;font-size: 10px;font-weight: bold;color: #20cc8e;background: #20CC8E33;border-radius: 4px;}
#status .detail .desc .con dd .rate p{font-size: 14px;font-weight: bold;color: #20cc8e;}


/**/
#record{padding: 0 0 70px 0;background: #f9f9f9;}
#record .total{margin: 0 0 14px 0;padding:5px 20px 16px;background: #ffffff;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#record .total .inner{padding:20px;border-radius: 20px;background:#f9f9f9;}
#record .total .date{margin:0 0 14px;line-height:18px;font-size:13px;color:#636d79;}
#record .total .attain{display: flex;flex-direction: column;gap: 16px;}
#record .total .attain dl{display:flex;align-items:center;justify-content:space-between;}
#record .total .attain dt{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px 12px;border-radius:24px;height:24px;background:rgba(32, 204, 142, 0.2);font-size:12px;color:#20CC8E}
#record .total .attain dd{font-size: 17px;font-weight: 800;color: #3b4652;}
#record .total .attain dd strong{font-size: 20px;font-weight: 800;color: #222222;}
#record .total .attain dl:nth-child(1){}
#record .total .attain dl:nth-child(1) dt{background: rgba(32, 204, 142, 1);color: #ffffff;}
#record .tabs{background:#ffffff;border-bottom:1px solid #eeeeee;}
#record .tabs ul{display:flex;align-items:center;justify-content:center;}
#record .tabs li{margin:0 6px;}
#record .tabs li a{position:relative;display:flex;line-height:45px;padding:0 12px;font-size:14px;font-weight:600;color:#222222;}
#record .tabs li.active{}
#record .tabs li.active a{}
#record .tabs li.active a:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:3px;background:#20CC8E}
#record .cons{background:#ffffff;padding: 20px 20px 45px;display:none;}
#record .cons.active{display:block;}
#record .graph{padding: 0 0 20px;border-bottom: 1px solid #f4f4f4;background: #fff;padding: 24px;}
#record .graph .slider{padding: 24px;border-radius: 20px;background: #fff;box-shadow: 0 4px 14px rgba(0,0,0,0.07);overflow: hidden;}
#record .graph .swiper-wrapper{height:auto !important}
#record .graph .swiper-pagination{position: relative;top: 0;left: 0;right: 0;bottom: 0;margin: 20px 0 0 0;display: flex;align-items: center;justify-content: center;}
#record .graph .swiper-pagination span{background:#e6e6e6;opacity:1;margin: 0 2px;}
#record .graph .swiper-pagination span.swiper-pagination-bullet-active{background:#666666}
#record .detail{margin: 0 0 14px;padding: 20px;background: #222222;border-radius: 10px;display: flex;flex-direction: column;align-items: flex-start;gap: 11px;display:none;}
#record .detail.on{display: flex;}
#record .detail .month{display: inline-flex;align-items: center;justify-content: flex-start;line-height: 20px;font-size: 17px;font-weight: 800;color: #fff;cursor: pointer;gap: 4px;}
#record .detail .month i{width: 10px;height: 5px;display: block;background: url("../img/arrow_down_w.png") no-repeat 50% 50% / contain;}
#record .detail .cont{display: flex;flex-direction: column;gap: 8px;width: 100%;}
#record .detail .cont dl{display:flex;line-height: 18px;font-size: 13px;color: #fff;align-items: center;justify-content: space-between;}
#record .detail .cont dt{font-size: 14px;font-weight: 600;}
#record .detail .cont dt span{font-weight: 600;color:#20CC8E;}
#record .detail .cont dt strong{font-size: 14px;font-weight: 600;}
#record .detail .cont dd{font-size: 13px;display: flex;align-items: center;gap: 5px;}
#record .detail .cont dd em{display:inline-flex;align-items:center;justify-content:center;height:20px;border-radius:4px;background:rgba(32, 204, 142, 0.2);padding:4px;font-size:10px;font-weight:500;color:#20cc8e;}
#record .detail .cont dd strong{font-size:15px;font-weight:800;}
#record .chart{ box-shadow: 0 4px 14px rgba(0,0,0,0.07);; border-radius: 20px; padding: 10px;}
#record .percent{margin: 32px 0 20px;border-radius: 20px;background: #f9f9f9;padding: 25px 20px 20px;}
#record .percent .top{display:flex;align-items:center;justify-content:space-between;height:24px;margin:0 0 14px;}
#record .percent .top .tit{display:flex;gap:4px;align-items:center;line-height:24px;font-size:15px;color:#222222}
#record .percent .top .tit strong{font-weight:bold}
#record .percent .top .tit img{height:24px;width:24px;object-fit:contain}
#record .percent .top .num{line-height:24px;font-size:24px;font-weight:800;color:#222222;}
#record .percent .con{position:relative;width:100%;height:4px;border-radius:4px;background:#d9d9d9;margin: 0 0 32px 0;}
#record .percent .con .bar{position: absolute;background: linear-gradient(320deg, rgba(0,156,243,1) 0%, rgba(32,204,142,1) 100%);height: 4px;top: 0;left: 0;border-radius: 4px;}
#record .percent .con .bar span{display: flex;align-items: center;justify-content: center;height: 25px;border-radius: 25px;background: #3b4652;position: absolute;top: 16px;left: 100%;transform: translateX(-50%);white-space:nowrap;padding: 10px;font-size: 12px;color: #fff;}
#record .percent .con .bar span:before{content:'';width: 8px;height: 8px;position: absolute;top: 0;left: 50%;transform: rotate(45deg) translateX(-50%);background: #3b4652;}
#record .goal{margin:20px 0 0}
#record .goal ul{display:flex;flex-wrap:wrap;gap:12px;}
#record .goal li{width:calc(50% - 6px);border: 1px solid #ececec;border-radius: 20px;padding: 25px;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;text-align: center;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#record .goal li .img{margin: 0 0 17px}
#record .goal li .tit{margin:0 0 10px;line-height:16px;font-size:13px;font-weight:700;color:#333}
#record .goal li .txt{line-height:18px;font-szie:15px;font-weight:500;color:#ffffff}
#record .goal li .txt strong{font-weight:800;}
#record .goal li:nth-child(1){background:#3b4652;}
#record .goal li:nth-child(1) .tit{color:#20CC8E;}
#record .goal li:nth-child(2){background:#20CC8E;}
#record .goal li:nth-child(2) .tit{color:#ffffff;}

/**/
#search{padding: 0 0 70px 0;background: #f9f9f9;}
#search .search{margin: 0 0 20px;padding: 20px 20px 22px;border-radius:0 0 20px 20px;background:#ffffff;box-shadow:0 4px 14px rgba(0,0,0,0.07);}
#search .search .tabs{margin:0 0 16px;}
#search .search .tabs ul{display:flex;gap:4px}
#search .search .tabs li{flex:1;}
#search .search .tabs li a{display:flex;align-items:Center;justify-content:Center;height:37px;width:100%;border-radius:4px;border:1px solid #ececec;font-size:14px;color:#3b4652;}
#search .search .tabs li a.on{border-color:#20CC8E;color:#20CC8E;}
#search .search .form{padding: 0 13px;position: relative;border-radius: 8px;border: 1px solid #ECECEC;display: flex;align-items: center;justify-content: flex-start;}
#search .search .form .tit{position: relative;flex-shrink: 0;margin: 0 10px 0 0;line-height: 18px;font-size: 14px;font-weight: 700;color: #636d79;}
#search .search .form .txt{display: flex;flex: 1;}
#search .search .form .txt input[type="text"]{color: #222222;border: 0;padding: 0;}
#search .search .form .del{position: absolute;top: 50%;right: 20px;transform: translateY(-50%);display: none;}
#search .search .form .del.on{display:block;}
#search .search .form .del a{display:flex;align-items:center;justify-content:center;width: 24px;height: 24px;}
#search .search .form .del img{width: 15px;height: 15px;object-fit:contain}
#search .search .option{margin: 0 0 20px;}
#search .search .option ul{display:flex;flex-direction:column;gap:10px;}
#search .search .option li{display:flex;gap:6px;}
#search .search .option li .desc{flex:1;display: flex;gap:6px;}
#search .search .option li .select{}
#search .search .option li .select button{border-radius: 8px;border: 1px solid #ececec;background: #ffffff;display: flex;align-items: center;padding: 4px 36px 4px 12px;min-width: 88px;height: 42px;background: url(../img/arrow_dropdown.png) no-repeat right 12px center / auto 6px;white-space: nowrap;}
#search .search .option li .text{position: relative;border-radius: 8px;border: 1px solid #ececec;background: #ffffff;display: flex;align-items: center;padding: 4px 12px;gap: 4px;height: 42px;flex: 1;}
#search .search .option li .text .del{right:12px;}
#search .search .option li .text input{width: 100%;height: 24px;padding: 0 20px 0 0;font-size: 15px;}
#search .search .option li dl{border-radius:8px;border:1px solid #ececec;background:#ffffff;display:flex;align-items:center;padding: 4px 12px;gap: 4px;height: 42px;}
#search .search .option li dt{flex-shrink:0;white-space:nowrap;font-size: 14px;font-weight: bold;color: #222;line-height: 24px;}
#search .search .option li dd{position: relative;flex:1;}
#search .search .option .inp{width:100%;height: 24px;padding: 0 20px 0 0;font-size: 15px;}
#search .search .option .del{position: absolute;top: 50%;right: 0;transform: translateY(-50%);display: none;}
#search .search .option .del.on{display:block;}
#search .search .option .del a{display:flex;align-items:center;justify-content:center;width: 24px;height: 24px;}
#search .search .option .del img{width: 15px;height: 15px;object-fit:contain}
#search .search .option .submit{position: absolute;top: 50%;right: 0;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;}
#search .search .option .submit img{width:15px;height:15px;object-fit:contain}
#search .search .button{margin:10px 0 0 ;display:flex;align-items:center;justify-content:Center;}
#search .search .button .btn{display:flex;width:100%;height:44px;align-items: center;justify-content: center;text-align: center;gap: 6px;font-size: 15px;font-weight: bold;border-radius: 8px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#search .search .button .btn img{height:15px;width:auto;object-fit:contain}
#search .result{margin: 20px;}
#search .result .list{}
#search .result .list ul{}
#search .result .list li{border-radius: 20px;background: #fff;margin: 0 0 20px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#search .result.stock li .head{padding: 20px 20px 15px;border-bottom:1px solid #ececec}
#search .result.stock li .cont{padding: 25px 20px;}
#search .result.stock li .code{line-height: 17px;font-size: 14px;font-weight: bold;color: #20cc8e;margin: 0 0 4px;}
#search .result.stock li .name{line-height: 18px;font-size: 15px;font-weight: bold;color: #222;}
#search .result.stock li .info{display: flex;flex-direction: column;gap: 12px;padding: 0 0 24px 0;border-bottom: 1px solid #ececec;}
#search .result.stock li .info dl{display: flex;align-items: center;justify-content: space-between;line-height: 16px;font-size: 13px;}
#search .result.stock li .info dt{font-weight: bold;color: #3b4652;}
#search .result.stock li .info dd{font-weight: 400;color: #222222;}
#search .result.stock li .stat{padding: 16px 0 0 0;}
#search .result.stock li .stat .tit{line-height:14px;font-size:12px;font-weight:bold;color:#222222;margin: 0 0 12px;}
#search .result.stock li .stat .tbl{}
#search .result.stock li .stat .tbl table{width: 100%;border-collapse:collapse;table-layout: fixed;}
#search .result.stock li .stat .tbl table tr{height:36px;border-bottom:1px solid #ececec;}
#search .result.stock li .stat .tbl table th{text-align:center;font-size:13px;color:#ffffff;background:#636D79;border-right:1px solid #ececec}
#search .result.stock li .stat .tbl table th:last-child{border-right:0;}
#search .result.stock li .stat .tbl table td{text-align:center;font-size:13px;color:#3b4652;background:#ffffff;border-right:1px solid #ececec}
#search .result.stock li .stat .tbl table td:last-child{border-right:0;}
#search .result.member .upper{display: flex;align-items: center;justify-content: space-between;margin: 0 0 14px;}
#search .result.member .upper .total{display: flex;align-items: center;gap: 6px;font-size: 17px;font-weight: 700;color: #222222;}
#search .result.member .upper .total strong{color:#20cc8e}
#search .result.member .upper .sort{position:relative;}
#search .result.member .upper .sort button{display: flex;align-items: center;justify-content: center;padding: 0 14px;height: 36px;border-radius: 36px;border: 1px solid #ececec;background: #ffffff;font-size: 12px;font-weight: 500;color: #636d79;gap: 5px;}
#search .result.member .upper .sort button:after{content:'';width: 10px;height: 6px;background:url("../img/arrow_dropdown.png") no-repeat 50% 50% / contain;flex-shrink: 0;}
#search .result.member .list{}
#search .result.member .list li.empty{padding:140px 0;background:none;box-shadow:none;text-align:center;font-size:14px;color:#b0b0b0;}
#search .result.member .list li{}
#search .result.member .list li .head{display:flex;align-items: center;justify-content:space-between;height: 58px;padding: 20px 20px 15px;border-bottom:1px solid #ececec}
#search .result.member .list li .cont{padding: 25px 20px;}
#search .result.member .list li .book{margin: 0 4px 0 0;}
#search .result.member .list li .book button{display: flex;width: 20px;height: 20px;background:url("../img/book.png") no-repeat 50% 50% / contain}
#search .result.member .list li .book button.on{background:url("../img/book_on.png") no-repeat 50% 50% / contain}
#search .result.member .list li .name{flex:1;}
#search .result.member .list li .name a{display: inline-flex;line-height:18px;font-size:15px;font-weight:bold;color:#222222;padding: 0 14px 0 0;background: url("../img/arrow_right_link.png") no-repeat right center / auto 10px;}
#search .result.member .list li .link{flex-shrink:0;}
#search .result.member .list li .link a{display: flex;align-items: center;justify-content: center;width: 14px;height: 14px;}
#search .result.member .list li .link a img{display: block;width: 100%;height: 100%;object-fit: contain;}
#search .result.member .list li .info{display: flex;flex-direction: column;gap: 12px;}
#search .result.member .list li .info dl{display: flex;align-items: center;justify-content: space-between;line-height: 16px;font-size: 13px;}
#search .result.member .list li .info dt{font-weight: bold;color: #3b4652;display: flex;align-items: center;}
#search .result.member .list li .info dt:before{content:'';margin:0 6px 0 0;display: inline-flex;width:4px;height:4px;border-radius:4px;background:#b0b0b0}
#search .result.member .list li .info dd{}
#search .detail{background: #ffffff;padding: 7px 0 0 0;}
#search .detail .upper{padding: 24px;background: #F9F9F9;border-radius: 10px;margin: 0 20px 10px;}
#search .detail .upper .head{display: flex;align-items: center;height: 24px;gap:5px;}
#search .detail .upper .head .book{}
#search .detail .upper .head .book button{width:24px;height:24px;background:url("../img/book.png") no-repeat 50% 50% / contain}
#search .detail .upper .head .book button.on{background:url("../img/book_on.png") no-repeat 50% 50% / contain}
#search .detail .upper .head .name{line-height:24px;font-size:17px;font-weight:bold;color:#222222;}
#search .detail .upper .head .link{flex-shrink:0;}
#search .detail .upper .head .link a{width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
#search .detail .upper .head .link a img{width:14px;height:14px;}
#search .detail .upper .info{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:6px 12px;}
#search .detail .upper .info dl{position:relative;display:flex;align-items:center;gap:4px;font-size:13px;color:#222222;}
#search .detail .upper .info dl:after{content:'';position:absolute;top:50%;right:-6px;width:1px;height:10px;transform:translateY(-50%);background:#ececec;}
#search .detail .upper .info dl:last-child:after{display:none;}
#search .detail .upper .info dt{font-weight:700;}
#search .detail .upper .info dd{font-weight:400;}
#search .detail .details{padding:20px 20px 40px;border-bottom:14px solid #f9f9f9}
#search .detail .details .tit{margin:0 0 12px;line-height:20px;font-size:17px;font-weight:bold;color:#222222;}
#search .detail .details .con{gap:11px;display:flex;flex-direction:column;}
#search .detail .details .con + .con{border-top:1px solid #ececec;margin-top:12px;padding-top:12px;}
#search .detail .details .con dl{display:flex;align-items:center;justify-content:flex-start;line-height:17px;font-size:14px;}
#search .detail .details .con dt{min-width:90px;flex-shrink:0;color:#636d79}
#search .detail .details .con dd{color:#222222;}
#search .detail .price{padding: 20px 20px 32px;}
#search .detail .price .tit{margin:0 0 12px;line-height:20px;font-size:17px;font-weight:bold;color:#222222;}
#search .detail .price .con{gap:11px;display:flex;flex-direction:column;border-bottom: 1px solid #ececec;margin-bottom: 12px;padding-bottom: 12px;}
#search .detail .price .con + .con{}
#search .detail .price .con dl{display:flex;align-items:center;justify-content: space-between;line-height:17px;font-size:14px;}
#search .detail .price .con dt{min-width:90px;flex-shrink:0;color:#636d79}
#search .detail .price .con dd{color:#222222;}
#search .detail .price .con.total{}
#search .detail .price .con.total dt{font-size: 14px;font-weight: bold;color: #3b4652;}
#search .detail .price .con.total dd{font-size: 15px;font-weight: 800;color: #222222;}
#search .detail .price .con.total dd span{color:#20CC8E}
#search .detail .price .memo{margin-top:22px}
#search .detail .price .memo dl{display: flex;align-items: center;justify-content: flex-start;width: 100%;height: 54px;border-radius: 10px;border: 2px solid #20CC8E;background: #ffffff;}
#search .detail .price .memo dt{margin: 0 24px 0 17px;font-size: 14px;font-weight: 600;color: #222222;flex-shrink: 0;}
#search .detail .price .memo dd{flex: 1;display: flex;align-items: center;justify-content: flex-start;gap: 4px;}
#search .detail .price .memo dd p{line-height: 20px;font-size: 14px;color: #222;}
#search .detail .price .memo dd a{line-height: 20px;font-size: 14px;color: #20cc8e;text-decoration: underline;}

/**/
#report{padding: 0 0 70px 0;background: #f9f9f9;}
#report .search{margin: 0 0 20px;padding: 20px 20px 22px;border-radius:0 0 20px 20px;background:#ffffff;box-shadow:0 4px 14px rgba(0,0,0,0.07);}
#report .search .form{padding: 0 13px;position: relative;border-radius: 8px;border: 1px solid #ECECEC;display: flex;align-items: center;justify-content: flex-start;}
#report .search .option{margin: 0 0 20px;}
#search .search .option ul{display:flex;flex-direction:column;gap:10px;}
#report .search .option li{display:flex;gap:6px;}
#report .search .option li dl{border-radius:8px;border:1px solid #ececec;background:#ffffff;display:flex;align-items:center;padding: 4px 12px;gap: 4px;height: 42px;}
#report .search .option li dt{flex-shrink:0;white-space:nowrap;font-size: 14px;font-weight: bold;color: #222;line-height: 24px;}
#report .search .option li dd{position: relative;flex:1;}
#report .search .option .inp{width:100%;height: 24px;padding: 0 20px 0 0;font-size: 15px;}
#report .search .option .del{position: absolute;top: 50%;right: 0;transform: translateY(-50%);display: none;}
#report .search .option .del.on{display:block;}
#report .search .option .del a{display:flex;align-items:center;justify-content:center;width: 24px;height: 24px;}
#report .search .option .del img{width: 15px;height: 15px;object-fit:contain}
#report .search .option .submit{position: absolute;top: 50%;right: 0;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;}
#report .search .option .submit img{width:15px;height:15px;object-fit:contain}
#report .search .button{margin:10px 0 0 ;display:flex;align-items:center;justify-content:Center;}
#report .search .button .btn{display:flex;width:100%;height:44px;align-items: center;justify-content: center;text-align: center;gap: 6px;font-size: 15px;font-weight: bold;border-radius: 8px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#report .search .button .btn img{height:15px;width:auto;object-fit:contain}
#report .result{margin: 20px;}
#report .result .list{}
#report .result .list ul{}
#report .result .upper{display: flex;align-items: center;justify-content: space-between;margin: 0 0 14px;}
#report .result .upper .total{display: flex;align-items: center;gap: 6px;font-size: 17px;font-weight: 700;color: #222222;}
#report .result .upper .total strong{color:#20cc8e}
#report .result .upper .sort{position:relative;}
#report .result .upper .sort button{display: flex;align-items: center;justify-content: center;padding: 0 14px;height: 36px;border-radius: 36px;border: 1px solid #ececec;background: #ffffff;font-size: 12px;font-weight: 500;color: #636d79;gap: 5px;}
#report .result .upper .sort button:after{content:'';width: 10px;height: 6px;background:url("../img/arrow_dropdown.png") no-repeat 50% 50% / contain;flex-shrink: 0;}
#report .result .list{}
#report .result .list li.empty{padding:140px 0;background:none;box-shadow:none;text-align:center;font-size:14px;color:#b0b0b0;}
#report .result .list li{border-radius: 10px;background: #fff;margin: 0 0 14px;padding: 20px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#report .result .list li .head{display:flex;align-items: center;justify-content:space-between;margin: 0 0 20px;}
#report .result .list li .icon{margin: 0 4px 0 0;width:30px;height:30px;border-radius:30px;overflow:hidden;}
#report .result .list li .icon img{width:100%;height:100%;object-fit:cover;}
#report .result .list li .name{flex:1;}
#report .result .list li .name a{display: flex;line-height:18px;font-size:15px;font-weight:bold;color:#222222;padding: 0 14px 0 0;background: url("../img/arrow_right_link2.png") no-repeat right center / auto 14px;gap:4px;}
#report .result .list li .name a strong{}
#report .result .list li .name a span{font-size: 13px;font-weight:400;color:#b0b0b0;}
#report .result .list li .cont{display: flex;flex-direction: column;gap: 14px;}
#report .result .list li .cont dl{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;gap: 3px;}
#report .result .list li .cont dt{display: flex;align-items: center;gap: 3px;line-height: 17px;font-size: 14px;font-weight: 700;color: #222222;}
#report .result .list li .cont dt img{height:15px;width:auto;object-fit:contain}
#report .result .list li .cont dd{line-height: 16px;font-size: 13px;color: #b0b0b0;}
#report .detail{}
#report .detail .info{padding: 20px;background: #ffffff;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#report .detail .info .title{line-height: 18px;font-size: 15px;font-weight: 700;color: #222222;margin: 0 0 14px;}
#report .detail .info .text{display: flex;align-items: center;gap: 4px;margin: 0 0 14px 0;}
#report .detail .info .posi{display: flex;align-items: center;justify-content: center;padding: 2px 6px;border-radius: 22px;height: 22px;background: rgba(32, 204, 142, 0.2);color: #20cc8e;font-size: 10px;font-weight: 700;}
#report .detail .info .name{line-height: 22px;font-size: 13px;font-weight: bold;color: #222222;}
#report .detail .info .group{line-height: 22px;font-size: 13px;color: #b0b0b0;}
#report .detail .info .cont{padding:20px;border-radius:10px;background:#f9f9f9}
#report .detail .info .cont dl{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;gap: 3px;}
#report .detail .info .cont dl + dl{margin-top:14px;padding-top:14px;border-top:1px solid #ececec}
#report .detail .info .cont dt{display: flex;align-items: center;gap: 3px;line-height: 17px;font-size: 14px;font-weight: 700;color: #222222;}
#report .detail .info .cont dt img{height:15px;width:auto;object-fit:contain}
#report .detail .info .cont dd{line-height: 16px;font-size: 13px;color: #b0b0b0;}
#report .detail .amount{padding:30px 20px;}
#report .detail .amount .title{margin:0 0 14px 0;line-height:20px;font-size:17px;font-weight:bold;color:#222222;}
#report .detail .amount .inner{padding: 20px 25px 23px;border-radius:20px;background:#ffffff;box-shadow: 0 4px 14px rgba(0,0,0,0.07);}
#report .detail .amount .total{display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;padding: 0 0 22px;border-bottom: 1px solid #ececec;}
#report .detail .amount .total .date{display: flex;align-items: center;justify-content: center;line-height: 19px;font-size: 14px;font-weight: 600;color: #222222;gap: 6px;margin: 0 0 4px;}
#report .detail .amount .total .date i{width:15px;height:15px;background:url("../img/arrow_circle_down.png") no-repeat 50% 50% / contain}
#report .detail .amount .total .price{display: flex;align-items: center;justify-content: center;height: 36px;}
#report .detail .amount .total .price strong{font-size:24px;font-weight:800;color:#222222}
#report .detail .amount .total .price span{margin: 6px 0 0 2px;font-size:14px;font-weight:800;color:#222222}
#report .detail .purchase{padding:27px 0;border-bottom: 1px solid #ececec;}
#report .detail .purchase .tit{margin:0 0 4px 0;line-height:17px;font-size:14px;font-weight:bold;color:#222222}
#report .detail .purchase .txt{margin:0 0 4px 0;line-height:14px;font-size:12px;font-weight:500; color:#b0b0b0}
#report .detail .purchase .con{padding: 17px 0 0;}
#report .detail .purchase .con .chart{width:100%;height:100%;}
#report .detail .purchase .con .chart canvas{max-width:100%;max-height:100%;}
#report .detail .purchase .con .list{margin-top:24px;}
#report .detail .purchase .con .list dl{display:flex;align-items:center;justify-content:space-between}
#report .detail .purchase .con .list dl + dl{margin-top:14px;}
#report .detail .purchase .con .list dt{display: flex;align-items: center;gap: 4px;}
#report .detail .purchase .con .list dt i{width: 6px;height: 6px;border-radius: 6px;display: block;}
#report .detail .purchase .con .list dt p{line-height: 14px;font-size: 11px;color: #222;}
#report .detail .purchase .con .list dt span{margin: 0 0 0 3px;font-size: 11px;color: #b0b0b0;}
#report .detail .purchase .con .list dd{font-size: 12px;font-weight: bold;color: #222;}
#report .detail .rank{padding:27px 0;border-bottom: 1px solid #ececec;}
#report .detail .rank .tit{margin:0 0 4px 0;line-height:17px;font-size:14px;font-weight:bold;color:#222222}
#report .detail .rank .txt{margin:0 0 4px 0;line-height:14px;font-size:12px;font-weight:500; color:#b0b0b0}
#report .detail .rank .con{padding: 20px 0 0;}
#report .detail .rank .con ul{}
#report .detail .rank .con li{display:none;}
#report .detail .rank .con li:nth-child(1),
#report .detail .rank .con li:nth-child(2),
#report .detail .rank .con li:nth-child(3),
#report .detail .rank .con li:nth-child(4),
#report .detail .rank .con li:nth-child(5),
#report .detail .rank .con li:nth-child(6){display:block;}
#report .detail .rank .con li + li{margin-top:14px;}
#report .detail .rank .con li .head{display: flex;align-items: center;justify-content: flex-start;gap: 4px;}
#report .detail .rank .con li .head .number{min-width: 28px;height: 17px;border-radius: 17px;background: #ECECEC;font-size: 9px;font-weight: 600;color: #3b4652;display: flex;align-items: center;justify-content: center;padding: 0 5px;}
#report .detail .rank .con li .head .name{line-height: 17px;font-size: 11px;font-weight: 600;color: #222222; width: 70%;}
#report .detail .rank .con li .head .price{margin: 0 0 0 auto;display: flex;align-items: center;justify-content: center;line-height: 17px;font-size: 12px;font-weight: bold;color: #222222;}
#report .detail .rank .con li .cont{position:relative;margin: 7px 0 0 0;display: flex;align-items: center;justify-content: center;width: 100%;height: 4px;background: #d4d4d4;border-radius: 4px;}
#report .detail .rank .con li .cont .bars{position:absolute;top:0;left:0;width:auto;height:100%;border-radius:4px;background:#3B4652;}

#report .detail .rank .con li:nth-child(1) .number{background:#FCC8C8;color:#F64646}
#report .detail .rank .con li:nth-child(1) .cont .bars{background:#F64646}
#report .detail .rank .con li:nth-child(2) .number{background:#FFE1CD;color:#FF9955}
#report .detail .rank .con li:nth-child(2) .cont .bars{background:#FF9955}
#report .detail .rank .con li:nth-child(3) .number{background:#FFF7D5;color:#FFD322}
#report .detail .rank .con li:nth-child(3) .cont .bars{background:#FFD322}

#report .detail .rank .con li:nth-child(4) .number{background:#E5F2D2;color:#94C943}
#report .detail .rank .con li:nth-child(4) .cont .bars{background:#94C943}
#report .detail .rank .con li:nth-child(5) .number{background:#CEF2DF;color:#31B06D}
#report .detail .rank .con li:nth-child(5) .cont .bars{background:#31B06D}
#report .detail .rank .con li:nth-child(6) .number{background:#DAF6EF;color:#79DFC7}
#report .detail .rank .con li:nth-child(6) .cont .bars{background:#79DFC7}

#report .detail .rank .con li:nth-child(7) .number{background:#DDE8F7;color:#89AEE2}
#report .detail .rank .con li:nth-child(7) .cont .bars{background:#89AEE2}
#report .detail .rank .con li:nth-child(8) .number{background:#DEDFF2;color:#747BC9}
#report .detail .rank .con li:nth-child(8) .cont .bars{background:#747BC9}
#report .detail .rank .con li:nth-child(9) .number{background:#FFE7ED;color:#FF94AE}
#report .detail .rank .con li:nth-child(9) .cont .bars{background:#FF94AE}
#report .detail .rank .con li:nth-child(10) .number{background:#EEE8F4;color:#8964B2}
#report .detail .rank .con li:nth-child(10) .cont .bars{background:#8964B2}

#report .detail .rank .more{display: flex;align-items: center;justify-content: center;margin: 20px 0 0 0;}
#report .detail .rank .more a{display: flex;align-items: center;justify-content: center;margin: 0 auto;padding: 0 18px;border-radius: 36px;height: 36px;border: 1px solid #ececec;font-size: 12px;font-weight: 500;color: #636d79;gap: 10px;}
#report .detail .rank .more a i{width: 12px;height: 6px;display: block;background: url("../img/arrow_dropdown.png") no-repeat 50% 50% / contain;}
#report .detail .rank.expend .con ul li{display:block}
#report .detail .rank.cost{}
#report .detail .rank.quantity{}
#report .detail .usage{padding:27px 0;border-bottom: 1px solid #ececec;}
#report .detail .usage .tit{margin:0 0 4px 0;line-height:17px;font-size:14px;font-weight:bold;color:#222222}
#report .detail .usage .txt{margin:0 0 4px 0;line-height:14px;font-size:12px;font-weight:500; color:#b0b0b0}
#report .detail .usage .con{padding: 20px 0 0;}
#report .detail .usage .con .chart{}
#report .detail .usage .con .view{margin: 20px 0 0;padding: 20px;background: #F9F9F9;border-radius: 10px;display: flex;flex-direction: column;align-items: flex-start;gap: 11px;display:none;}
#report .detail .usage .con .view.on{display: flex;}
#report .detail .usage .con .view .area{display: inline-flex;align-items: center;justify-content: flex-start;line-height: 17px;font-size: 14px;font-weight: 800;color: #222;cursor: pointer;gap: 4px;}
#report .detail .usage .con .view .area i{width: 10px;height: 5px;display: block;background: url("../img/arrow_down_b.png") no-repeat 50% 50% / contain;}
#report .detail .usage .con .view .cont{display: flex;flex-direction: column;gap: 8px;width: 100%;}
#report .detail .usage .con .view .cont dl{display:flex;line-height: 18px;font-size: 13px;color: #636D79;align-items: center;justify-content: space-between;}
#report .detail .usage .con .view .cont dt{color: #636D79;}
#report .detail .usage .con .view .cont dt span{color:#20CC8E;}
#report .detail .usage .con .view .cont dt strong{font-size:15px;font-weight:400}
#report .detail .usage .con .view .cont dd{font-size: 13px;font-weight: 600;color: #222222;}
#report .detail .usage .con .view .cont dd strong{font-size:15px;font-weight:800;}
#report .detail .usage .con .view .cont dl.summary{border-top: 1px solid #ececec;margin-top: 10px;padding-top: 10px;}
#report .detail .month{padding:27px 0;border-bottom: 1px solid #ececec;}
#report .detail .month .tit{margin:0 0 4px 0;line-height:17px;font-size:14px;font-weight:bold;color:#222222}
#report .detail .month .txt{margin:0 0 4px 0;line-height:14px;font-size:12px;font-weight:500; color:#b0b0b0}
#report .detail .month .con{padding: 20px 0 0;}
#report .detail .month .con .chart{}
#report .detail .month .con .view{margin: 20px 0 0;padding: 20px;background: #F9F9F9;border-radius: 10px;display: flex;flex-direction: column;align-items: center;display:none;}
#report .detail .month .con .view.on{display: flex;}
#report .detail .month .con .view .tit{display: inline-flex;align-items: center;justify-content: flex-start;line-height: 17px;font-size: 14px;font-weight: 600;color: #222;cursor: pointer;gap: 4px;}
#report .detail .month .con .view .tit strong{font-weight:800;}
#report .detail .month .con .view .tit i{width: 10px;height: 5px;display: block;background: url("../img/arrow_down_b.png") no-repeat 50% 50% / contain;}
#report .detail .month .con .view .num{line-height:27px;font-size:20px;font-weight:800;color:#222222}
#report .detail .button{padding:14px 0 0 0;display:flex;gap:8px;}
#report .detail .button .btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,0.07);font-size: 14px;font-weight: bold;}

/**/
#alert{position:fixed;bottom:0;left: 50%;width: 500px;max-width: 100%;z-index:101;padding:20px;transition: all 0.35s;opacity:0;visibility:hidden;transform: translateX(-50%);}
#alert.on{opacity:1;visibility:visible;}
#alert.on .alert{transform:translateY(0)}
#alert .alert{display:flex;padding:18px;align-items:center;justify-content:center;min-height:54px;line-height:17px;font-size:14px;font-weight:500;color:#ffffff;background:rgba(0,0,0,0.7);border-radius:8px;transform: translateY(100%);transition: all 0.35s;}

/**/
#app .modal-container{position:fixed;width: 500px;max-width: 100%;height:100%;top:0;left: 50%;z-index:99999;overflow:hidden;display: flex;flex-direction: column;align-items:center;justify-content: flex-end;background:rgba(0,0,0,0.4);transform: translateX(-50%);opacity: 0;visibility: hidden;transition: all 0.35s;padding: 70px 0 0;}
#app .modal-container.on{opacity: 1;visibility: visible;}
#app .modal-container.on .modal-wrapper{transform:translateY(0)}
#app .modal-container .modal-wrapper{width: 100%;max-width:100%;max-height: calc(100vh - 70px);box-shadow:0 3px 6px rgb(0 0 0 / 16%);background:#fff;position:relative;display:flex;flex-direction:column;overflow-y: auto;border-radius: 20px 20px 0 0;transform: translateY(100%);transition: transform 0.35s;}
#app .modal-container .modal-wrapper::-webkit-scrollbar {display:none}
#app .modal-container .modal-wrapper .h2{height:60px;display:flex;padding:20px;border-bottom:1px solid #eeeeee;line-height: 20px;font-size: 17px;font-weight: 800;color: #222222;}
#app .modal-container .modal-wrapper .close{position:absolute;top:20px;right:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;cursor: pointer;}
#app .modal-container .modal-wrapper .close img{width:15px;height:15px;}
#app .modal-container .modal-wrapper .cont{padding: 20px 20px 33px;max-height: calc(100% - 60px);}
#app .modal-container .modal-wrapper .button{margin:14px 0 0 0;display:flex;align-items:center;}
#app .modal-container .modal-wrapper .button .btn{width:100%;height:44px;border-radius:8px;display:flex;align-items:Center;justify-content:center;font-size:15px;font-weight:700;gap:6px;box-shadow: 0 4px 14px rgba(0,0,0,0.07);border: 1px solid transparent;}
#app .modal-container .modal-wrapper .button .btn img{height:15px;width:auto;object-fit:contain}

#app [id^="popup-month"]{}
#app [id^="popup-month"] ul{display:flex;flex-direction:column;gap:20px;}
#app [id^="popup-month"] li{}
#app [id^="popup-month"] li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app [id^="popup-month"] li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app [id^="popup-month"] li button p{line-height:24px;font-size:15px;color:#222222;}
#app [id^="popup-month"] li button.on i{border:5px solid #20CC8E}

#app [id^="popup-sort"]{}
#app [id^="popup-sort"] ul{display:flex;flex-direction:column;gap:20px;}
#app [id^="popup-sort"] li{}
#app [id^="popup-sort"] li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app [id^="popup-sort"] li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app [id^="popup-sort"] li button p{line-height:24px;font-size:15px;color:#222222;}
#app [id^="popup-sort"] li button.on i{border:5px solid #20CC8E}

#app #popup-cate{}
#app #popup-cate ul{display:flex;flex-direction:column;gap:20px;}
#app #popup-cate li{}
#app #popup-cate li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app #popup-cate li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app #popup-cate li button p{line-height:24px;font-size:15px;color:#222222;}
#app #popup-cate li button.on i{border:5px solid #20CC8E}

#app #popup-year{}
#app #popup-year ul{display:flex;flex-direction:column;gap:20px;}
#app #popup-year li{}
#app #popup-year li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app #popup-year li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app #popup-year li button p{line-height:24px;font-size:15px;color:#222222;}
#app #popup-year li button.on i{border:5px solid #20CC8E}

#app #popup-month{}
#app #popup-month ul{display:flex;flex-direction:column;gap:20px;}
#app #popup-month li{}
#app #popup-month li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app #popup-month li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app #popup-month li button p{line-height:24px;font-size:15px;color:#222222;}
#app #popup-month li button.on i{border:5px solid #20CC8E}

#app #popup-usage{}
#app #popup-usage ul{display:flex;flex-direction:column;gap:20px;}
#app #popup-usage li{}
#app #popup-usage li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app #popup-usage li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app #popup-usage li button p{line-height:24px;font-size:15px;color:#222222;}
#app #popup-usage li button.on i{border:5px solid #20CC8E}

#app #popup-thisMonthDate{}
#app #popup-thisMonthDate ul{display:flex;flex-direction:column;gap:20px;}
#app #popup-thisMonthDate li{}
#app #popup-thisMonthDate li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app #popup-thisMonthDate li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app #popup-thisMonthDate li button p{line-height:24px;font-size:15px;color:#222222;}
#app #popup-thisMonthDate li button.on i{border:5px solid #20CC8E}

#app #popup-month-purchase{}
#app #popup-month-purchase ul{display:flex;flex-direction:column;gap:20px;}
#app #popup-month-purchase li{}
#app #popup-month-purchase li button{display:flex;width:100%;height:24px;align-items:Center;background:transparent;gap:9px;}
#app #popup-month-purchase li button i{width:24px;height:24px;border-radius:24px;border:1px solid #ececec;background:#fff;}
#app #popup-month-purchase li button p{line-height:24px;font-size:15px;color:#222222;}
#app #popup-month-purchase li button.on i{border:5px solid #20CC8E}

#app #popup-search{}
#app #popup-search .form{}
#app #popup-search .button{margin:14px 0 0 0;}

#app [id^="popup-member"]{}
#app [id^="popup-member"] .modal-wrapper{min-height:80vh;}
#app [id^="popup-member"] .upper{padding: 24px 20px;border-bottom: 1px dashed #ececec;}
#app [id^="popup-member"] .upper .head{display: flex;align-items: center;height: 24px;gap:5px;}
#app [id^="popup-member"] .upper .head .book{}
#app [id^="popup-member"] .upper .head .book button{width:24px;height:24px;background:url("../img/book.png") no-repeat 50% 50% / contain;display: block;}
#app [id^="popup-member"] .upper .head .book button.on{background:url("../img/book_on.png") no-repeat 50% 50% / contain}
#app [id^="popup-member"] .upper .head .name{line-height:24px;font-size:17px;font-weight:bold;color:#222222;}
#app [id^="popup-member"] .upper .head .link{flex-shrink:0;}
#app [id^="popup-member"] .upper .head .link a{width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
#app [id^="popup-member"] .upper .head .link a img{width:14px;height:14px;}
#app [id^="popup-member"] .upper .info{margin:7px 0 0;display:flex;flex-wrap:wrap;gap:6px 12px;line-height: 19px;}
#app [id^="popup-member"] .upper .info dl{position:relative;display:flex;align-items:center;gap:4px;font-size:13px;color:#222222;}
#app [id^="popup-member"] .upper .info dl:after{content:'';position:absolute;top:50%;right:-6px;width:1px;height:10px;transform:translateY(-50%);background:#ececec;}
#app [id^="popup-member"] .upper .info dl:last-child:after{display:none;}
#app [id^="popup-member"] .upper .info dt{font-weight:700;}
#app [id^="popup-member"] .upper .info dd{font-weight:400;}
#app [id^="popup-member"] .cont{padding: 24px 20px;flex: 1;}
#app [id^="popup-member"] .cont .tit{line-height: 18px;font-size: 15px;font-weight: bold;color: #20cc8e;margin: 0 0 10px;}
#app [id^="popup-member"] .cont .con{}
#app [id^="popup-member"] .cont .con + .tit{padding-top: 20px;border-top: 1px solid #ececec;}
#app [id^="popup-member"] .cont .con dl{display: flex;align-items: center;justify-content: flex-start;gap: 15px;padding: 12px 0;line-height: 17px;font-size: 14px;font-weight: 400;}
#app [id^="popup-member"] .cont .con dl.bd{border-top:1px solid #ececec;padding-top: 10px;}
#app [id^="popup-member"] .cont .con dl + dl{border-top:1px solid #ececec;}
#app [id^="popup-member"] .cont .con dl:nth-child(1){}
#app [id^="popup-member"] .cont .con dt{width: 62px;flex-shrink: 0;color: #636D79;}
#app [id^="popup-member"] .cont .con dd{flex: 1;color: #222222;}
#app [id^="popup-member"] .cont .con2{padding:10px 0;}
#app [id^="popup-member"] .cont .con2 dl{justify-content:space-between;padding: 0;}
#app [id^="popup-member"] .cont .con2 dl + dl{border:0;margin-top: 10px;}
#app [id^="popup-member"] .cont .con2 dt{width: 82px;}
#app [id^="popup-member"] .cont .con2 dd{text-align: right;}
#app [id^="popup-member"] .total{border-top:1px solid #ececec;padding: 10px 0;}
#app [id^="popup-member"] .total dl{display:flex;align-items:flex-start;justify-content: space-between;}
#app [id^="popup-member"] .total dl + dl{margin-top:14px;}
#app [id^="popup-member"] .total dt{line-height: 18px;font-size: 13px;color: #222;}
#app [id^="popup-member"] .total dd{flex: 1;display: flex;flex-direction: column;align-items: flex-end;justify-content: flex-start;line-height: 18px;}
#app [id^="popup-member"] .total dd .sales{line-height: 18px;font-size: 15px;font-weight: bold;color: #222;}
#app [id^="popup-member"] .total dd .rate{margin: 3px 0 0 0;display: flex;align-items: center;gap: 4px;}
#app [id^="popup-member"] .total dd .rate span{padding: 5px 4px;display: flex;align-items: center;justify-content: center;line-height: 1;font-size: 10px;font-weight: 500;color: #20cc8e;background: #20CC8E33;border-radius: 4px;}
#app [id^="popup-member"] .total dd .rate p{font-size: 12px;font-weight: bold;color: #20cc8e;}
#app [id^="popup-member"] .total dd .text{font-size:13px;font-weight:bold;color:#636d79}
#app [id^="popup-member"] .current{border-top: 1px solid #ececec;padding: 10px 0;}
#app [id^="popup-member"] .current dl{padding: 12px 15px;border-radius:10px;background:#f9f9f9;display: flex;align-items: center;justify-content: space-between;}
#app [id^="popup-member"] .current dl dt{font-size:13px;font-weight:bold;color:#3b4652;}
#app [id^="popup-member"] .current dl dd{font-size: 16px;font-weight: bold;color: #20cc8e;}
#app [id^="popup-member"] .button{margin: 20px 0 0 0;padding: 0 20px 30px;}
#app [id^="popup-member"] .button .btn{box-shadow: none !important;}

#app #popup-memo{}
#app #popup-memo .text{}
#app #popup-memo .text input{}
#app #popup-memo .button{margin:14px 0 0 0;}
#app #popup-memo .button .btn{}

#app #popup-date{}
#app #popup-date .text{display:flex;gap:10px;}
#app #popup-date .text input{height:54px;font-size:14px;font-weight:600;color:#222222;background:#fafafa url("../img/icon_date.png") no-repeat right 12px center / auto 14px;}
#app #popup-date .text input.on{border-color:#20CC8E;color:#20CC8E;background:#20CC8E08 url("../img/icon_date_on.png") no-repeat right 12px center / auto 14px;}
#app #popup-date .calendar{padding: 20px;}
#app #popup-date .calendar .head{display: flex;align-items: center;justify-content: space-between;height: 24px;font-size: 16px;font-weight: 600;color: #4a5660;margin: 0 0 12px;}
#app #popup-date .calendar .head .prev{flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;background: url("../img/date_prev.png") no-repeat 50% 50% / contain;text-indent: -9999em;}
#app #popup-date .calendar .head .next{flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;background: url("../img/date_next.png") no-repeat 50% 50% / contain;text-indent: -9999em;}
#app #popup-date .calendar .head .month{}
#app #popup-date .calendar .select{}
#app #popup-date .calendar .select .week{display: flex;}
#app #popup-date .calendar .select .week span{width: 14.28%;height: 30px;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 11px;font-weight: 600;color: #b5b3c6;}
#app #popup-date .calendar .select .days{display: flex;}
#app #popup-date .calendar .select .days span{width: 14.28%;aspect-ratio: 1/1;text-align: center;display: flex;align-items: center;justify-content: center;}
#app #popup-date .calendar .select .days button{width: 40px;height: 40px;border-radius: 40px;background:#fff;font-size:16px;font-weight: 700;color:#4a5660;}
#app #popup-date .calendar .select .days button.on{color:#fff;background:#3B4652}
#app #popup-date .button{}
#app #popup-date .button .btn{height:54px;}

#app #popup-start-date .calendar{padding: 20px;}
#app #popup-start-date .calendar .head{display: flex;align-items: center;justify-content: space-between;height: 24px;font-size: 16px;font-weight: 600;color: #4a5660;margin: 0 0 12px;}
#app #popup-start-date .calendar .head .prev{flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;background: url("../img/date_prev.png") no-repeat 50% 50% / contain;text-indent: -9999em;}
#app #popup-start-date .calendar .head .next{flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;background: url("../img/date_next.png") no-repeat 50% 50% / contain;text-indent: -9999em;}
#app #popup-start-date .calendar .head .month{}
#app #popup-start-date .calendar .select{}
#app #popup-start-date .calendar .select .week{display: flex;}
#app #popup-start-date .calendar .select .week span{width: 14.28%;height: 30px;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 11px;font-weight: 600;color: #b5b3c6;}
#app #popup-start-date .calendar .select .days{display: flex;}
#app #popup-start-date .calendar .select .days span{width: 14.28%;aspect-ratio: 1/1;text-align: center;display: flex;align-items: center;justify-content: center;}
#app #popup-start-date .calendar .select .days button{width: 40px;height: 40px;border-radius: 40px;background:#fff;font-size:16px;font-weight: 700;color:#4a5660;}
#app #popup-start-date .calendar .select .days button.on{color:#fff;background:#3B4652}

#app #popup-end-date .calendar{padding: 20px;}
#app #popup-end-date .calendar .head{display: flex;align-items: center;justify-content: space-between;height: 24px;font-size: 16px;font-weight: 600;color: #4a5660;margin: 0 0 12px;}
#app #popup-end-date .calendar .head .prev{flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;background: url("../img/date_prev.png") no-repeat 50% 50% / contain;text-indent: -9999em;}
#app #popup-end-date .calendar .head .next{flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;background: url("../img/date_next.png") no-repeat 50% 50% / contain;text-indent: -9999em;}
#app #popup-end-date .calendar .head .month{}
#app #popup-end-date .calendar .select{}
#app #popup-end-date .calendar .select .week{display: flex;}
#app #popup-end-date .calendar .select .week span{width: 14.28%;height: 30px;text-align: center;display: flex;align-items: center;justify-content: center;font-size: 11px;font-weight: 600;color: #b5b3c6;}
#app #popup-end-date .calendar .select .days{display: flex;}
#app #popup-end-date .calendar .select .days span{width: 14.28%;aspect-ratio: 1/1;text-align: center;display: flex;align-items: center;justify-content: center;}
#app #popup-end-date .calendar .select .days button{width:40px;height:40px;border-radius:40px;background:#fff;font-size:16px;font-weight: 700;color:#4a5660;}
#app #popup-end-date .calendar .select .days button.on{color:#fff;background:#3B4652}

#app #popup-product-group{}
#app #popup-product-group .cont{padding-bottom:24px;}
#app #popup-product-group .text{position:relative}
#app #popup-product-group .text input{height: 40px;padding: 8px 12px;padding-right: 48px;}
#app #popup-product-group .text button{position:absolute;top:50%;right: 12px;transform:translateY(-50%);background:transparent;width:24px;height:24px;display:flex;justify-content: center;align-items: center;}
#app #popup-product-group .text button img{width:15px;height:15px;object-fit:contain}
#app #popup-product-group .list{margin: 20px 0;}
#app #popup-product-group .list.singleList{}
#app #popup-product-group .list.singleList ul{gap:0;}
#app #popup-product-group .list.singleList li{padding: 14px 0;border-bottom:1px solid #ececec}
#app #popup-product-group .list ul{display: flex;flex-direction: column;gap: 14px;max-height: calc(100vh - 70px - 50px - 60px - 40px - 60px - 20px - 30px - 40px);overflow: hidden;overflow-y: auto;}
#app #popup-product-group .list ul::-webkit-scrollbar-track{background-color:#e7e7e7;border-radius:8px;}
#app #popup-product-group .list ul::-webkit-scrollbar{width:4px;background-color:#e7e7e7;border-radius:8px;}
#app #popup-product-group .list ul::-webkit-scrollbar-thumb{background-color:#626262;border-radius:8px;}
#app #popup-product-group .list li{}
#app #popup-product-group .list li.empty{flex:1;display:flex;align-items:center;justify-content:center;font-size:13px;color:#b0b0b0;min-height: calc(100vh - 70px - 60px - 20px - 33px - 40px - 108px);}
#app #popup-product-group .list li label{display:flex;align-items:center;justify-content:flex-start;gap: 6px;}
#app #popup-product-group .list li label input{display: none;}
#app #popup-product-group .list li label input ~ p{line-height:16px;font-size: 13px;color:#222222;word-break: keep-all;}
#app #popup-product-group .list li label input ~ p span{color:#20cc8e}
#app #popup-product-group .list li label input[type='radio'] ~ i{flex-shrink:0;width:20px;height:20px;background: url("../img/icon_radio.png") no-repeat 50% 50% / contain;}
#app #popup-product-group .list li label input[type='radio']:checked ~ i{background: url("../img/icon_radio_on.png") no-repeat 50% 50% / contain;}
#app #popup-product-group .list li label input[type='checkbox'] ~ i{flex-shrink:0;width:20px;height:20px;background: url("../img/icon_checkbox.png") no-repeat 50% 50% / contain;}
#app #popup-product-group .list li label input[type='checkbox']:checked ~ i{background: url(../img/icon_checkbox_on.png) no-repeat 50% 50% / contain;}
#app #popup-product-group .history{margin: 0 -20px;border-top: 1px solid #ececec;padding: 14px 20px;overflow: hidden;}
#app #popup-product-group .history .box{margin-left: 4px;padding:4px 8px;width:auto;display:flex;align-items:center;justify-content:Center;background:#20CC8E33;border-radius:25px;height: 25px;}
#app #popup-product-group .history .box.none{background:#ececec;}
#app #popup-product-group .history .box.none p{color:#b0b0b0}
#app #popup-product-group .history .box p{line-height: 18px;font-size: 12px;font-weight:500;color:#20CC8E;}
#app #popup-product-group .history .box .del{width: 18px;height: 18px;display: flex;align-items: center;justify-content: center;background: transparent;flex-shrink:0}
#app #popup-product-group .history .box .del img{width:100%;height:100%;object-fit:contain}
#app #popup-product-group .button{margin: 0;}
#app #popup-product-group .button .btn{height:50px;}

#app .search .option ul li dl.desc dd select.sel {width: 100%; height: 24px; padding: 0 20px 0 0; font-size: 15px; border: 0; color: #000;}
#app .search .option ul li .desc { flex: 1; display: flex; gap: 6px; }

#report .search .option li .select button {
    border-radius: 8px;
    border: 1px solid #ececec;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 4px 36px 4px 12px;
    min-width: 88px;
    height: 42px;
    background: url(../img/arrow_dropdown.png) no-repeat right 12px center / auto 6px;
    white-space: nowrap;
}

#report .search .option li .text {
    position: relative;
    border-radius: 8px;
    border: 1px solid #ececec;
    background: #ffffff;
    display: flex;
    align-items: center;
    padding: 4px 12px;
    gap: 4px;
    height: 42px;
    flex: 1;
}

#report .search ul li:not(:first-child) {
  margin-top: 5px;
}









/* 20231213 */
#clipboardAlert {
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 500px;
    max-width: 100%;
    z-index: 100000;
    padding: 20px;
    transition: all 0.35s;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
}

#clipboardAlert.on {
    opacity: 1;
    visibility: visible;
    z-index: 100000;
}

#clipboardAlert.on .alert {
    transform: translateY(0)
}

#clipboardAlert .alert {
    display: flex;
    padding: 18px;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    line-height: 17px;
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    background: #20CC8E;
    border-radius: 8px;
    transform: translateY(100%);
    transition: all 0.35s;
}

#status.app .result .list li.empty {
    padding: 140px 0;
    background: none;
    box-shadow: none;
    text-align: center;
    font-size: 14px;
    color: #b0b0b0;
}