@charset "UTF-8";

/* **************************************** *
 * LAYOUT
 * **************************************** */
.linkbiz-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    overflow:hidden;
}

.error-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.login-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.email-invite-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}
.winpop-layout {
	position:relative;
	overflow:hidden;
}

.price-layout {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

#ch-plugin-core{display:none}

.tutorial-list-layout .linkbiz-toolbar{display:none;}


/* **************************************** *
 * TOOLBAR
 * **************************************** */
.linkbiz-toolbar {
    display: flex;
    align-items: center;
    position : relative;
    min-height: 65px; 
    background: #f7f6fa;
    min-width:1620px;
}
/* .wms-layout .linkbiz-toolbar {
    display: flex;
    align-items: center;
    position : relative;
    min-height: 50px; 
    background: #f7f6fa;
} */

/* toolbar-search */
.toolbar-search{position:absolute; left:50%; margin-left:-190px}
.toolbar-search .search-area{position:relative; width:380px; border-bottom:1px solid rgba(255,255,255,0.5); box-sizing:border-box}
.toolbar-search .search-input
{
    display:block; width:100%; height:38px; line-height:38px; margin:0; padding:0 40px 0 40px; border:0; background:none; text-align:left; font-size:15px; font-weight:normal; letter-spacing:-0.5px; color:#fff;
    border-radius:0; box-sizing:border-box; outline:none; cursor:pointer;
    font-family:'pps', 'ptd', 'sans-serif' !important;
}
.toolbar-search .search-input::-webkit-input-placeholder{font-family:'pps', 'ptd', 'sans-serif' !important; font-size:15px; color:rgba(255, 255, 255, 0.8); letter-spacing:-0.8px; font-weight:normal}
.toolbar-search .search-input::-moz-placeholder{font-family:'pps', 'ptd', 'sans-serif' !important; font-size:15px; color:rgba(255, 255, 255, 0.8); letter-spacing:-0.8px; font-weight:normal}
.toolbar-search .search-input:-ms-input-placeholder{font-family:'pps', 'ptd', 'sans-serif' !important; font-size:15px; color:rgba(255, 255, 255, 0.8); letter-spacing:-0.8px; font-weight:normal}

.toolbar-search .search-btn.search{position:absolute; bottom:0; left:10px}
.toolbar-search .search-btn.option{position:absolute; bottom:0; right:0}
.toolbar-search .search-btn button{display:block; width:auto; height:38px; line-height:38px; margin:0; padding:0; color:#fff; border:0; cursor:pointer; text-align:center; background:none; border-radius:0; outline:none}
.toolbar-search .search-btn button i{width:auto; height:auto; font-size:18px; vertical-align:middle}

/* .toolbar-search .search-layer{display:none; position:absolute; left:50%; top:-1px; width:600px; height:200px; margin-left:-300px; background:#fff; border:1px solid #606060; border-radius:5px; box-sizing:border-box; box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); z-index:99} */
.toolbar-search .search-layer{position:absolute; left:50%; top:37px; width:420px; height:200px; margin-left:-210px; background:#fff; border:1px solid #0196fa; border-radius:0; box-sizing:border-box; box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); z-index:99}

.autocomplete-layer{display:none; position:absolute; left:50%; top:43px; width:380px; margin-left:-190px; background:#fff; border:1px solid #f5f5f5; border-top:none; border-radius:8px; box-sizing:border-box; box-shadow:20px 20px 40px rgba(0, 0, 0, 0.1); overflow:hidden; z-index:99}
.autocomplete-core .autocomplete-list{padding:13px 0}
.autocomplete-core .autocomplete-list:after{content:''; clear:both; display:block}
.autocomplete-core .autocomplete-list li{margin:2px 0}
.autocomplete-core .autocomplete-box{position:relative; padding:4px 15px; padding-right:90px; background-color:#fff; outline:none; transition: all .30s ease}
.autocomplete-core .autocomplete-box .key{display:flex; align-items:center; cursor:pointer}
.autocomplete-core .autocomplete-box .key i{min-width:20px; min-height:20px; line-height:20px; background-color:#d1d7e5; margin-right:5px; font-size:12px; color:#fff; text-align:center; vertical-align:middle; border-radius:50%}
.autocomplete-core .autocomplete-box .key .key-txt{display:block; margin-top:-2px; font-size:14px; font-weight:normal; color:#202020; letter-spacing:-0.2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.autocomplete-core .autocomplete-box .key .mark{font-weight:normal; color:#157efb}
.autocomplete-core .autocomplete-box .jst{display:block; position:absolute; top:4px; right:45px; font-size:12px; font-weight:normal; color:#808080; letter-spacing:-0.8px}
.autocomplete-core .autocomplete-box .add{display:block; position:absolute; top:4px; right:13px; width:20px; height:20px; line-height:20px; text-align:center; cursor:pointer}
.autocomplete-core .autocomplete-box .add i{font-size:16px; color:#b5b5b5; vertical-align:middle}

.autocomplete-core .autocomplete-nodata{display:flex; align-items:center; justify-content:center; min-height:30px}
.autocomplete-core .autocomplete-nodata .message{font-size:13px; font-weight:normal; color:#808080; line-height:135%; letter-spacing:-0.2px}
.autocomplete-core .autocomplete-nodata .message i{margin-top:-2px; font-size:20px; vertical-align:middle}

.autocomplete-layer .search-category{
    display: flex;
    justify-content: center;
}
.autocomplete-layer .search-category ul{
    padding:8px;
}
.autocomplete-layer .search-category li{
    margin-right: 8px;
    float: left;
    cursor: pointer;
    padding: 2px 8px;
    height: 32px;
    background: #ececec;
    border-radius: 4px;
    display: flex;
    justify-content:center;
    align-items: center;    
    font-size: 12px;  
}
.autocomplete-layer .search-category li:hover,
.autocomplete-layer .search-category li:active
{
    color: #fff; 
    background: #0196fa;
}
.autocomplete-layer .search-category li i{
    margin-right: 4px;
    font-size: 16px;
}



.autocomplete-interest{display:flex; align-items:center; padding:10px 0; background-color:#fff; border-top:1px solid #ebebeb}
.autocomplete-interest .autocomplete-box{position:relative; padding:0 15px; padding-right:70px; flex:auto}
.autocomplete-interest .autocomplete-box .info-txt{font-size:13px; font-weight:normal; color:#707070; letter-spacing:-0.5px}
.autocomplete-interest .autocomplete-box .switch-btn{position:absolute; right:15px; top:0}

.toolbar-search.active .search-area{}
.toolbar-search.active .autocomplete-layer{}


.page-tit-wrap {display:flex; align-items:center; height:70px; width:100%; padding:0px 50px;}
.page-tit-wrap .page-tit{display:flex; width:100%; justify-content:space-between;}
.page-tit-wrap .page-tit .parent-tit{display:block; line-height:125%; color:#5629ee; font-size:16px; font-weight:300; letter-spacing:-0.5px}
.page-tit-wrap .page-tit .current-tit{display:inline-flex; flex-direction:column; line-height:125%; color:#222; font-size:24px; font-weight:600; letter-spacing:-1px}
.page-tit-wrap .page-tit .header-btn-area{display:flex; justify-content:flex-end; align-items:center; gap:8px;}
.page-tit-wrap .page-tit .header-btn{line-height:125%; font-weight:300;}
.page-tit-wrap .page-tit .header-btn i{font-size: 20px; color:#a5a5a5}
.page-tit-wrap .page-tit .header-btn:hover i{color:#5629ee}


.page-tit-wrap .page-tit .icon-tutorial{position:relative; display:block; margin-left:16px; font-size: 23px; margin-bottom:-3px;} 
.page-tit-wrap .page-tit .icon-tutorial:before{content:""; position:absolute; left:3px; top:7px; display:block; width:16px; height:16px; border-radius: 50%; background:#b8a3ff; z-index: 0;}
.page-tit-wrap .page-tit .icon-tutorial i{z-index: 1; position:relative; font-weight:300;}
.page-tit-wrap .page-tit .link-tutorial{/*position:absolute; left:200px;*/ cursor:pointer; color:#555; font-weight:normal; font-size: 14px; display:flex; align-items: center;}
.page-tit-wrap .page-tit .link-tutorial i{font-size: 18px; margin-right:6px;}
.page-tit-wrap .page-tit .link-tutorial i:before{background:#b8a3ff; color:#222; border-radius: 50%; display:flex; justify-content:center; align-items: center; width:14px; height:14px;}
.page-tit-wrap .page-tit .link-tutorial:hover span{text-decoration:underline; text-underline-offset: 4px; color:#5629ee;}
/* .wms-layout .page-tit-wrap{height:40px; padding-left: 30px;}
.wms-layout .page-tit-wrap .page-tit .current-tit{font-size:18px} */


/* toolbar-util */
.toolbar-util{display:flex; align-items:center; margin-left:auto; padding-right:40px}
.toolbar-util .util-nav{position:relative; display:flex; align-items:center}
.toolbar-util .util-nav > .nav-list:after{content:''; clear:both; display:block}
.toolbar-util .util-nav > .nav-list > li{float:left}
.toolbar-util .util-nav > .nav-list > li > .drive-target{display:block}
.toolbar-util .util-nav .nav-push{display:flex; align-items:center; justify-content:center; position:relative; min-width:52px; height:60px; padding:0; line-height:normal; border:0; outline:none; background:none}
.toolbar-util .util-nav .nav-push.af-hover,
.toolbar-util .util-nav .nav-push:focus,
.toolbar-util .util-nav .nav-push:active{padding:0; background:none; border:0}
.toolbar-util .util-nav .nav-push .nav-ico{margin-top:0; line-height:1; font-size:28px; color:rgba(255, 255, 255, 0.8); z-index:1}
.toolbar-util .util-nav .nav-push > .badge{position:absolute; left:25px; top:6px; display:block; max-width:40px; font-family:'ptd', 'roboto', 'sans-serif' !important; font-size:12px; font-weight:300; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; z-index:2}
.toolbar-util .util-nav .nav-push:hover .nav-ico{color:#fff}

.toolbar-util .util-nav .nav-list.core{position:relative}
.toolbar-util .util-nav .nav-list.core:before{content:''; position:absolute; top:6px; bottom:6px; width:-webkit-fill-available; background:#3d3752; border-radius: 200px; left:-6px; right:-6px}
.toolbar-util .util-nav .nav-list.core .nav-push .nav-ico{color:rgba(255, 255, 255, 1)}

.toolbar-util li > .search-form{position:absolute; top:54px; z-index:1000; background:#fff; width:300px;}


/*
.toolbar-util .util-nav .nav-push.core-s:before,
.toolbar-util .util-nav .nav-push.core-c:before,
.toolbar-util .util-nav .nav-push.core-e:before{content:''; position:absolute; top:6px; bottom:6px; width:62px; background:#3d3752; border-radius:200px 0 0 200px}
.toolbar-util .util-nav .nav-push.core-s:before{left:-7px; border-radius:200px 0 0 200px}
.toolbar-util .util-nav .nav-push.core-c:before{left:0; width:100%; border-radius:0}
.toolbar-util .util-nav .nav-push.core-e:before{right:-7px; border-radius:0 200px 200px 0}
*/

.toolbar-util .util-account{display:flex; align-items:center; flex-direction:row-reverse}
.toolbar-util .util-account .account-name{display:inline-block; margin:0px 8px; font-size:14px; font-weight:300; color:#505050; letter-spacing:-0.5px}
.toolbar-util .util-account .account-img{position:relative; width:34px; height:34px; border-radius:8px; background-size:cover; background-repeat:no-repeat; overflow:hidden}
.toolbar-util .util-account .account-img.default{background:linear-gradient(90deg, #008cd3,#68bad3)}
.toolbar-util .util-account .account-img.default:before,
.toolbar-util .util-account .account-img.default:after{content:''; position:absolute; left:50%; background-color:rgba(255, 255, 255, .8); border-radius:50%}
.toolbar-util .util-account .account-img.default:before{width:12px; height:12px; top:9px; margin-left:-6px}
.toolbar-util .util-account .account-img.default:after{width:30px; height:30px; top:23px; margin-left:-15px}
.toolbar-util .util-account .account-img img{display:none}

.toolbar-util .custom-layer{display:none; position:absolute; top:54px; background:#fff; border-radius:20px; box-sizing:border-box; box-shadow:1px 5px 30px rgb(0 0 0 / 10%); z-index:9999; left:-190px; overflow:hidden}
.toolbar-util .custom-layer:before,
.toolbar-util .custom-layer:after{content:''; display:none; position:absolute; z-index:10}
.toolbar-util .custom-layer:before{top:-8px; border-top:0; border-right:8px solid transparent; border-bottom:8px solid #202020; border-left:8px solid transparent}
.toolbar-util .custom-layer:after{top:-7px; border-top:0; border-right:8px solid transparent; border-bottom:8px solid #fff; border-left:8px solid transparent}

.toolbar-util .custom-layer.approval .layer-inner{width:340px; max-height:268px; overflow:hidden; overflow-y:auto; box-sizing:border-box; margin-top:66px;}
.toolbar-util .custom-layer.approval:before,
.toolbar-util .custom-layer.approval:after{right:12px}

.toolbar-util .custom-layer.notify{margin-left:-389px}
.toolbar-util .custom-layer.notify .layer-inner{width:420px; height:271px; overflow:hidden; overflow-y:auto; box-sizing:border-box}
.toolbar-util .custom-layer.notify:before,
.toolbar-util .custom-layer.notify:after{right:12px}


.toolbar-util .custom-top{display:flex; position:absolute; align-items:center; top:0; width:100%; height:65px; padding:0 30px; border-bottom:1px solid #eaeaea; z-index:1; box-sizing:border-box}
.toolbar-util .custom-top .top-tit{display:flex; align-items:center}
.toolbar-util .custom-top .top-tit .tit{display:inline-block; font-size:18px; font-weight:300; color:#111; letter-spacing:-0.5px}
.toolbar-util .custom-top .top-button{display:flex; align-items:center; margin-left:auto}
.toolbar-util .custom-top .top-button .more{position:relative; line-height:110%; font-size:15px; letter-spacing:-0.5px}
.toolbar-util .custom-top .top-button .more:before{content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#5629ee}
.toolbar-util .custom-top .top-button .more span{color:#5629ee; font-size:15px}

.toolbar-util .custom-body > .custom-list{}
.toolbar-util .custom-body > .custom-list > li{border-bottom:1px solid #efefef}
.toolbar-util .custom-body > .custom-list > li:hover{background-color:#f9fafc}
.toolbar-util .custom-body > .custom-list > li:last-child{border-bottom:none}

.toolbar-util .custom-body .custom-box{display:flex; align-items:flex-start; padding:15px 10px}
.toolbar-util .custom-body .custom-cont{width:100%}
.toolbar-util .custom-body .cont-tit{display:flex; align-items:center}
.toolbar-util .custom-body .cont-tit .titL,
.toolbar-util .custom-body .cont-tit .titR{flex:1 auto}
.toolbar-util .custom-body .cont-tit .titL{text-align:left}
.toolbar-util .custom-body .cont-tit .titR{justify-content:flex-end; text-align:right}
.toolbar-util .custom-body .cont-tit .tit{color:#202020; font-weight:300; font-size:14px; letter-spacing:-0.5px}
.toolbar-util .custom-body .cont-tit .date{color:#909090; font-size:12px}
.toolbar-util .custom-body .cont-info{margin-top:5px}
.toolbar-util .custom-body .cont-info p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; max-height:38px; font-size:13px; letter-spacing:-0.2px; color:#909090; text-overflow:ellipsis; overflow:hidden}

.toolbar-util .custom-body .moduleIcon{margin-right:15px; margin-top:3px}
.toolbar-util .custom-body .moduleIcon svg{width:28px; height:28px}
.toolbar-util .custom-body .row-del{margin:auto 0; margin-left:10px}
.toolbar-util .custom-body .row-del .Button{width:34px; height:34px; background:#f4f4f4; border-radius:50%; text-align:center}

.toolbar-util .custom-body .no-data{width:100%; padding:15px 0}
.toolbar-util .custom-body .no-data p{color:#999; font-weight:normal; font-size:14px; letter-spacing:-0.5px; text-align:center}


.toolbar-util .account-layer{display:none; position:absolute; top:42px; right:0px; background:#fff; border-radius:5px; box-sizing:border-box; box-shadow:1px 5px 30px rgb(0 0 0 / 10%); z-index:99}
.toolbar-util .account-layer:before{content:''; display:none; position:absolute; right:12px; top:-9px; border-top:0; border-right:8px solid transparent; border-bottom:8px solid #0196fa; border-left:8px solid transparent; z-index:10}
.toolbar-util .account-layer .layer-inner{width:200px; box-sizing:border-box}
.toolbar-util .account-layer .account-top{display:flex; align-items:center; height:40px; padding:0 10px; box-sizing:border-box}
.toolbar-util .account-layer .control{margin-left:auto}
.toolbar-util .account-layer .control .Button{width:24px; height:24px; color:#5c6072}
.toolbar-util .account-layer .account-profile{display:flex; flex-direction:column; position:relative; margin-top:-15px; padding-bottom:15px; text-align:center}

.toolbar-util .account-layer .account-img{position:relative; width:64px; height:64px; margin:0 auto; border-radius:50%; background-size:cover; background-repeat:no-repeat; overflow:hidden}
.toolbar-util .account-layer .account-img.default{background:#008cd3; background:-webkit-linear-gradient(90deg, #008cd3, #68bad3); background:-moz-linear-gradient(90deg, #008cd3, #68bad3); background:linear-gradient(90deg, #008cd3, #68bad3)}
.toolbar-util .account-layer .account-img.default:before,
.toolbar-util .account-layer .account-img.default:after{content:''; position:absolute; left:50%; background-color:rgba(255, 255, 255, .8); border-radius:50%}
.toolbar-util .account-layer .account-img.default:before{width:20px; height:20px; top:18px; margin-left:-10px}
.toolbar-util .account-layer .account-img.default:after{width:54px; height:54px; top:42px; margin-left:-27px}
.toolbar-util .account-layer .account-img img{display:none}

.toolbar-util .account-layer .account-name{margin-right:0; margin-top:5px; font-size:13px; font-weight:300; color:#202020; letter-spacing:-0.2px}
.toolbar-util .account-layer .account-nav .nav-list{padding:8px 10px; border-top:1px solid #ebebeb; overflow:hidden}
.toolbar-util .account-layer .account-nav .nav-list > li > a{display:block; position:relative; padding:3px 0; line-height:155%; font-weight:normal; font-size:14px; letter-spacing:-0.8px; color:#202020}
.toolbar-util .account-layer .account-nav .nav-list > li > a:hover,
.toolbar-util .account-layer .account-nav .nav-list > li.active > a{color:#157efb}
.toolbar-util .account-layer .account-nav .nav-list > li > a i{display:none; margin-top:-1px; margin-right:2px; font-size:18px; vertical-align:middle}
.toolbar-util .account-layer .account-nav .nav-list > li > a span{vertical-align:middle}

.toolbar-util .account-layer .account-nav .nav-list > li.depth_sub > a:after{content:'\e942'; position:absolute; right:-10px; top:50%; margin-top:-11px; color:#505050; font-family:xeicon; font-size:20px; transform:rotate(0deg); transition:all .30s ease}
.toolbar-util .account-layer .account-nav .nav-list > li.depth_sub.active > a:after{transform:rotate(-180deg)}


.toggle-lnb{position:fixed; left:277px; top:200px; z-index:31}
.toggle-lnb.up-lift{top:134px}
.toggle-lnb .toggle-btn{display:flex; align-items:center; justify-content:center; width:45px; height:45px; background-color:#fff; color:#999; font-size:24px; border:0; border-radius:50%; cursor:pointer; box-shadow:1px 5px 10px rgb(0 0 0 / 10%); transition:all .20s ease}
.toggle-lnb.lnb-collapse{left:-22px}
.toggle-lnb.lnb-collapse .toggle-btn{padding-left:15px; background-color:#5629ee; color:#fff}
.toggle-lnb.lnb-collapse .toggle-btn i{transform:rotate(-180deg)}
.toggle-lnb.lnb-collapse:hover{left:-18px}

.search-layout .toggle-lnb{display:none}

.custom-layer.chat{position:absolute; width:400px; top:0px; right:0px; z-index: 999; background:#fff; height: 100%;}


/* **************************************** *
 * APP
 * **************************************** */
.linkbiz-app {
	display: flex;
	align-items: center;
    position: relative;
    width: 100%;
    height: 65px;
    background-color:#5b5866;
    color: #fff;
    word-break: break-all;
    box-sizing:border-box;
    transition:all .20s;
    min-width:1920px;
}
.linkbiz-app.app-collapse{position:absolute; margin-top:-59px; z-index:9}
.linkbiz-app.app-collapse:hover{margin-top:0}


/* toggle-app */
.linkbiz-app .toggle-app{width:60px; height:60px}
.linkbiz-app .toggle-app .toggle-btn{display:block; position:relative; width:100%; height:60px; background:none; border:0; border-right:1px solid rgba(255,255,255,0.1); border-radius:0; cursor:pointer}
.linkbiz-app .toggle-app .toggle-btn:before,
.linkbiz-app .toggle-app .toggle-btn:after{content:''; position:absolute; left:50%; width:26px; height:2px; background:rgba(255,255,255,0.7); margin-left:-13px; transition:all .20s}
.linkbiz-app .toggle-app .toggle-btn:before{top:22px}
.linkbiz-app .toggle-app .toggle-btn:after{bottom:22px}
.linkbiz-app .toggle-app .toggle-btn strong{display:block; position:absolute; top:29px; left:50%; width:20px; height:2px; margin-left:-13px; background:rgba(255,255,255,0.7); transition:all .20s}
.linkbiz-app .toggle-app .toggle-btn:hover:before,
.linkbiz-app .toggle-app .toggle-btn:hover:after,
.linkbiz-app .toggle-app .toggle-btn:hover strong,
.linkbiz-app .toggle-app .toggle-btn:focus:before,
.linkbiz-app .toggle-app .toggle-btn:focus:after,
.linkbiz-app .toggle-app .toggle-btn:focus strong{background:#fff}
.linkbiz-app .toggle-app .toggle-btn.app-collapse strong{display:none}
.linkbiz-app .toggle-app .toggle-btn.app-collapse:before{transform: translateY(0.9rem) rotate(-45deg); top:13px; background:#fff}
.linkbiz-app .toggle-app .toggle-btn.app-collapse:after{transform: translateY(0.9rem) rotate(45deg); bottom:37px; background:#fff}


/* app-main */
.linkbiz-app .app-main{margin-left:15px; height: 100%;}
.linkbiz-app .app-main .main-list:after{content:''; display:block; clear:both}
.linkbiz-app .app-main .main-list li{float:left}
.linkbiz-app .app-main .main-list li:after{content:''; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:rgba(255, 255, 255, 0)}

.linkbiz-app .app-main .main-list-ty2{display:flex; align-items:center; height: 100%; gap:10px}
.linkbiz-app .app-main .main-list-ty2 > li{/*margin-left:10px - gap으로 변경*/ }
.linkbiz-app .app-main .main-list-ty2 > li:first-child{margin-left:0}
.linkbiz-app .app-main .main-list-ty2 li .app-btn{display:flex; align-items:center; flex-direction:column}
.linkbiz-app .app-main .main-list-ty2 li .app-btn .app{width:48px; height:30px}
.linkbiz-app .app-main .main-list-ty2 li .app-btn .app i{font-size:26px}
.linkbiz-app .app-main .main-list-ty2 li.active .app-btn .app i{color:#fff}
.linkbiz-app .app-main .main-list-ty2 li .app-btn .app-txt{color:rgba(255, 255, 255, 0.8); letter-spacing:-0.6px; font-size:13px; line-height: 1.1; word-break:auto-phrase; text-align: center;}
.linkbiz-app .app-main .main-list-ty2 li .app-btn:hover .app-txt{color:#fff}
.linkbiz-app .app-main .main-list-ty2 li > .depth2-wrap{position:absolute; top:65px; right:0; z-index:1200; background:#fff; box-shadow:2px 4px 12px rgb(0 0 0 / 10%); border-radius:0px 0px 8px 8px; padding:0rem 3rem 5rem 3rem; width:100%; max-height:650px; min-height:200px; overflow-y:auto}
.linkbiz-app .app-main .main-list-ty2 li > .depth2-wrap > ul.depth2-list{display:grid; grid-template-columns: repeat(8, 1fr)}
.linkbiz-app .app-main .main-list-ty2 li > .depth2-wrap > ul.depth2-list > li.depth2-item{display:block; min-width:12rem; margin-left:2rem;}
.linkbiz-app .app-main .main-list-ty2 li > .depth2-wrap > ul.depth2-list > li.depth2-item > a.depth2{position:relative; display:block; font-weight:300; color:#202020; font-size:16px; transition:color 0.3s ease; margin-top:2rem}
.linkbiz-app .app-main .main-list-ty2 li > .depth2-wrap > ul.depth2-list > li.depth2-item > a.depth2:before{content:""; position:absolute; top:50%; left:-1rem; transform:translate(0, -50%); width:0.13rem; height:1.2rem; background-color: #E4E4E7}
.linkbiz-app .app-main .main-list-ty2 li > .depth2-wrap > ul.depth2-list > li.depth2-item > a.depth2:hover,
.linkbiz-app .app-main .main-list-ty2 li > .depth3-wrap > ul.depth3-list > li.depth3-item > a.depth3:hover{color:#5629ee}
.linkbiz-app .app-main .main-list-ty2 li > .depth2-wrap > ul.depth2-list > li.depth2-item > a.depth2:hover:before{background-color:#5629ee}
.linkbiz-app .app-main .main-list-ty2 li > .depth3-wrap > ul.depth3-list > li.depth3-item > a.depth3{display:block; transition:color 0.3s ease; padding-top:0.65rem}


/* 모듈바 검색 추가 */
.toolbar-util li > .search-form.top{width:360px; border:1px solid #f5f5f5; box-shadow:3px 6px 12px rgba(0, 0, 0, 0.1); border-radius:8px; left:-255px}
.search-form.top .serch-form-cont{position:relative}
.search-form.top .search-input{position:relative; display:block; width:100%; height:38px; line-height:38px; margin:0; padding:0 40px 0 40px; border:0; background:none; text-align:left; font-size:15px; font-weight:normal; letter-spacing:-0.5px; color: #303030; border-radius:0; box-sizing:border-box; outline:none; cursor:pointer; font-family:'pps', 'ptd', 'sans-serif' !important;}
.search-form.top .search-btn button,
.search-form.top .search-btn button{display:block; width:auto; height:38px; line-height:38px ;margin:0; padding:0; color: #888; border:0; cursor:pointer; text-align:center; background:none; border-radius:0; outline:none}
.search-form.top .search-btn button i{font-size:18px}
.search-form.top .search-btn.search{position:absolute; top:0; left:10px;}
.search-form.top .search-btn.option{position:absolute; top:0; right:10px;}
.search-form.top .autocomplete-interest{background:none; padding:5px 0}


/* app-util */
.linkbiz-app .app-util{margin-left:auto; display:none !important}
.linkbiz-app .app-util .util-list:after{content:''; display:block; clear:both}
.linkbiz-app .app-util .util-list li{position:relative; float:left}

/* app-btn */
.linkbiz-app .app-btn{display:block}
.linkbiz-app .app-btn .app{display:flex; align-items:center; justify-content:center; width:54px; height:60px; text-align:center; color:#fff; border:0; border-radius:0; z-index:1}
.linkbiz-app .app-btn .app svg{width:28px; height:28px}
.linkbiz-app .app-btn .app i{font-family:'xeicon'; font-size:28px; color:rgba(255, 255, 255, 0.8)}
.linkbiz-app .app-btn .app.email:after{content:"\ea07"; line-height:44px; font-family:'xeicon'; font-size:20px; color:rgba(255, 255, 255, 1)}
.linkbiz-app .app-btn .app.setting:after{content:"\e986"; line-height:44px; font-family:'xeicon'; font-size:20px; color:#7aa4db}
.linkbiz-app .app-btn .app-label{display:none; align-items:center; position:absolute; top:0; left:0; width:160px; height:100%; padding-left:55px; padding-right:15px; background:#027ed1; border-radius:0 3px 3px 0}
.linkbiz-app .app-btn .app-label .label{display:block; font-weight:300; font-size:13px; color:#fff; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.linkbiz-app .app-btn:hover .app-label{display:none}
.linkbiz-app .app-btn:hover .app i{color:#fff}
.bookmark-list .module-tit .mlicon{width: 22px;height: 22px;background:#bab8c1 !important;}

/* linkbiz-app expansion&collapse */
.linkbiz-app.app-expansion{}
.linkbiz-app.app-expansion .app-main .main-list li:after{background-color:rgba(255, 255, 255, 0.1); display:none}
.linkbiz-app.app-expansion .app-btn .app-label{display:none; background:none}

/* app-btn custom */

.app .mlicon.ml-manufacture, .bookmark-list .module-tit .mlicon.ml-manufacture{
	-webkit-mask-image: url("/static/fw/images/common/ml-manufacture.svg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    mask-image: url("/static/fw/images/common/ml-manufacture.svg") no-repeat;
    mask-repeat: no-repeat;
    mask-position: center center;}
    
.linkbiz-app .app-btn:hover .app i.mlicon{background:#fff}
.linkbiz-app .app-btn .app .mlicon{width: 28px; height: 28px; background:rgba(255, 255, 255, 0.8);  }
.linkbiz-app li.active .app-btn .app .mlicon{background: #fff}

.main-lnb .app .app i.mlicon{background:#5629ee}
.main-lnb .app .mlicon{width: 24px; height: 24px; background:#5629ee;}

/* **************************************** *
 * CONTAINER
 * **************************************** */
.linkbiz-container{
    flex: 1;
    height: 100%;
}
.app-container {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 100%;
}
.error-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.login-container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.price-container{
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.price-container .dev-content{
	width:100%;
	padding:0
}
.price-container .dev-content:after{
	display:none
}

.login-container .dev-content{background:transparent}

.email-invite-container{
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 100%;
}
.winpop-container{
	position:relative;
}
.winpop-container .dev-content{height:auto; padding:80px 25px 0; background-color:#fff; box-sizing:border-box}


/* app-lnb */
.app-lnb {
    flex: 1 1 auto;
    position: relative;
    min-width: 300px;
    max-width: 300px;
    background-color: #fff;    
    box-shadow:1px -1px 10px rgb(0 0 0 / 10%);
    z-index: 3;
    transition: all .20s ease;
}

.app-lnb.lnb-collapse {
    display:none
}

.app-lnb:before {
	content: '';
	display:none;
	position: absolute;
	right:0;
	width:1px;
	height:100vh;
	background-color:#dadada;
	top:-11px; 
}
.app-lnb .lnb-wrap {
    display: flex;
    flex-direction: column;
    height: 100%
}

.app-lnb .biz-logo{display:flex; align-items:center; justify-content:center; height:100px; margin:20px 0}
.app-lnb .biz-logo a{display:block; margin:0; padding:0; font-size:0}
.app-lnb .biz-logo img{display:inline-block; max-width:190px; max-height:100px;}
.app-lnb .biz-logo img.basic-logo{width:190px}

.app-lnb .app-tit {
    align-items: center;
    min-height: 60px;
    padding:0 40px;
    height: 60px;
}
.app-lnb .app-tit .moduleIcon{margin-right:3px}
.app-lnb .app-tit .moduleIcon i{font-family:'xeicon'; font-size:28px; color:#0196fa; margin-top:-2px}
.app-lnb .app-tit .moduleIcon svg{width:24px; height:24px}
.app-lnb .app-tit h2{display:block; font-size:18px; font-weight:600; color:#202020; letter-spacing:-1px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}

.app-lnb .app-nav {
    flex: 1;
    padding: 0;
    overflow: auto;
}

.app-lnb .user-account {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40px
}
.app-lnb .user-account .account-box {
	display: flex;
	align-items: center;
	position: relative;
	width: 220px;
	padding-right: 30px;
	box-sizing: border-box;
}

.app-lnb .user-account .account-img{position:relative; min-width:52px; max-width:52px; min-height:52px; max-height:52px; border-radius:50%; background-size:cover; background-repeat:no-repeat; overflow:hidden}
/*.app-lnb .user-account .account-img.default{background:#fafafa url("/static/fw/images/common/lnb_account_default.png") 50% 50% no-repeat; border:1px solid #ddd}*/
.app-lnb .user-account .account-img.default{background:#eaeaea}
.app-lnb .user-account .account-img.default:before,
.app-lnb .user-account .account-img.default:after{content:''; position:absolute; left:50%; background-color:rgba(255, 255, 255, .8); border-radius:50%; z-index:1}
.app-lnb .user-account .account-img.default:before{width:18px; height:18px; top:10px; margin-left:-8px}
.app-lnb .user-account .account-img.default:after{width:43px; height:43px; top:32px; margin-left:-21px}

.app-lnb .user-account .account-img img{display:none}

.app-lnb .user-account .account-info{display:flex; flex-direction:column; margin-left:15px}
.app-lnb .user-account .account-info .name,
.app-lnb .user-account .account-info .sum{display:block; line-height:125%; letter-spacing:-0.8px; overflow:hidden}
.app-lnb .user-account .account-info .name{color:#222; font-size:16px; font-weight:300}
.app-lnb .user-account .account-info .sum{margin-top:5px; color:#999; font-size:14px; font-weight:normal}
.app-lnb .user-account .account-info .sum.memb .rat{display:inline-flex; font-size:13px; color:#5629ee; border:1px solid #5629ee; border-radius:1000px; width:15px; height:15px; text-align:center; line-height:15px; margin-right:3px; align-items:center; justify-content:center;}
.app-lnb .user-account .account-info .sum.count{display:inline-block; font-size:12px; color:#5629ee; background:#f8f6fe; border-radius:1000px; padding:4px 0; width:65px; text-align:center}


.app-lnb .user-account .account-more{position:absolute; right:0; top:50%; margin-top:-11px}
.app-lnb .user-account .account-more .toggle-btn{display:flex; align-items:center; width:22px; height:22px; cursor:pointer}
.app-lnb .user-account .account-more .toggle-btn i{color:#999; font-size:22px}

.app-lnb .user-account .account-layer{display:none; position:absolute; top:15px; left:50%; margin-left:-110px; background:#fff; border-radius:15px; box-shadow:1px 5px 30px rgb(0 0 0 / 10%); z-index:1; box-sizing:border-box; max-height:670px; height:auto;}
.app-lnb .user-account .account-layer .layer-inner{width:220px; max-height:670px; height:auto;}
.app-lnb .user-account .account-layer .account-profile{padding:30px 18px 0}
.app-lnb .user-account .account-layer .account-profile .account-box{flex-direction:column; justify-content:center; width:100%; padding-right:0}

.app-lnb .user-account .account-layer .account-img{min-width:65px; max-width:65px; min-height:65px; max-height:65px}
.app-lnb .user-account .account-layer .account-img.default:before{width: 22px; height: 22px; top:17px; margin-left:-10px}
.app-lnb .user-account .account-layer .account-img.default:after{top:43px;}
.app-lnb .user-account .account-layer .account-profile .account-box .account-info{margin-left:0; margin-top:10px; text-align:center}
.app-lnb .user-account .account-layer .account-profile .account-box .account-info .name{font-size:16px}
.app-lnb .user-account .account-layer .account-profile .account-box .account-info .sum{font-size:14px}
.app-lnb .user-account .account-layer .account-profile .account-box .profile-edit{width:100%; margin-top:10px; font-size:15px; height:auto; word-break:keep-all; padding:12px}

.app-lnb .user-account .account-layer .account-nav{margin-top:5px; /*height:292px; overflow:hidden*/}
.app-lnb .user-account .account-layer .account-nav .nav-list{padding:10px 18px}
.app-lnb .user-account .account-layer .account-nav .nav-list > li > a{display:block; position:relative; padding:6px 0; line-height:1.3; font-size:15px; font-weight:normal; letter-spacing:-0.8px; color:#333}
.app-lnb .user-account .account-layer .account-nav .nav-list > li > a:hover{color:#5629ee}
.app-lnb .user-account .account-layer .account-nav .nav-list > li > a span{font-size:15px; vertical-align:middle}
.app-lnb .user-account .account-layer .account-nav .nav-list > li > a i{margin-top:-1px; margin-right:2px; font-size:18px; vertical-align:middle}
.app-lnb .user-account .account-layer .account-nav .nav-list > li.sector{margin-top:5px; padding-top:5px; border-top:1px solid #eaeaea}

.app-lnb .user-account .account-layer .account-nav .nav-list.top{max-height:170px; overflow:hidden; overflow-y:auto}

.app-lnb .user-account .account-appbar{padding:12px 18px 5px; border-top:1px solid #eaeaea}
.app-lnb .user-account .account-appbar .appbar-tit{display:flex; align-items:center}
.app-lnb .user-account .account-appbar .appbar-tit .tit{line-height:155%; color:#333; font-size:15px; font-weight:normal; letter-spacing:-0.8px}
.app-lnb .user-account .account-appbar .appbar-tit .appbar-controll{margin-left:auto}
.app-lnb .user-account .account-appbar .appbar-tit .appbar-controll .switch .label{font-size:13px}

.app-lnb .user-account .account-theme{padding:5px 18px 20px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end}
.app-lnb .user-account .account-theme .theme-tit{}
.app-lnb .user-account .account-theme .theme-tit .tit{line-height:155%; color:#333; font-size:15px; font-weight:normal; letter-spacing:-0.8px}
.app-lnb .user-account .account-theme .dark-controll{width:100%;}
.app-lnb .user-account .account-theme .dark-controll .switch{display:inline-flex; width:100%; justify-content:space-between}
.app-lnb .user-account .account-theme .dark-controll .switch .label{font-size:13px; font-weight:normal}
.app-lnb .user-account .account-theme .dark-controll .switch .label i{margin-top:-1px; margin-right:2px; color:#808080; font-size:18px; vertical-align:middle}

.app-lnb .user-account .account-theme .theme-setting{display:flex; align-items:center; justify-content:flex-end; padding-top:8px}
.app-lnb .user-account .account-theme .theme-setting:after{content:''; display:block; clear:both}
.theme-dark .app-lnb .user-account .account-theme .theme-setting{display:none}


.theme-setting .theme-label{display:block; margin-right:8px; cursor:pointer}
.theme-setting .theme-label input[type="radio"]{display:none}

.theme-setting .theme-chip{display:flex; align-items:center; justify-content:center; position:relative; width:22px; height:22px; border-radius:50%; border:2px solid #fff; box-sizing:border-box}
.theme-setting .theme-chip > .chip{position:relative; min-width:20px; min-height:20px; max-width:20px; max-height:20px; border-radius:50%; box-sizing:border-box}
.theme-setting .theme-label input[type="radio"]:checked + .theme-chip{border:2px solid #fff; box-shadow:2px 2px 8px rgb(0 0 0 / 25%)}
.theme-setting .theme-label input[type="radio"]:checked + .theme-chip .chip{min-width:18px; min-height:18px}

.theme-setting .theme-default > .chip{background:#202428}
.theme-setting .theme-biz > .chip{background:#164ec0}
.theme-setting .theme-leaf > .chip{background:#b2cf7e}
.theme-setting .theme-dark > .chip{background:#ffa26b}


.app-lnb .app-copyright{position:relative; padding:2px 0; background:#f4f4f4; text-align:center}
.app-lnb .app-copyright .copyright{line-height:135%; font-size:12px; font-weight:normal; color:#aaa}
.app-lnb .app-copyright .Button i{font-size: 14px; color:#aaa}

.app-lnb .app-subscript.demo{display:flex; padding:10px 0px 20px 0px; justify-content:space-evenly;}
.app-lnb .app-subscript.demo .subscript-btn{width:45%;letter-spacing:-1px; }
.app-lnb .app-subscript.demo .subscript-btn.solid{background:#461d84}
.app-lnb .app-subscript{display:flex; justify-content:center; padding:10px 0 20px}
.app-lnb .app-subscript .subscript-btn
{
	display:flex; align-items:center; justify-content:center; width:240px; height:50px;
	color:#fff; font-size:15px; font-weight:normal; letter-spacing:-0.5px;
	background:linear-gradient(45deg, #be52f2, #5629ee); border:0; border-radius:200px; cursor:pointer;
	box-shadow:1px 5px 10px rgb(0 0 0 / 15%)
}
.app-lnb .app-subscript .subscript-btn i{margin-right:5px; font-size:24px}





.app-nav-tit{display:flex; align-items:center; margin-bottom:10px; padding:0 50px; padding-left:35px}
.app-nav-tit i{margin-right:8px; font-size:16px; color:#999}
.app-nav-tit .tit{position:relative; color:#555; font-size:16px; font-weight:300; letter-spacing:-0.8px; cursor:pointer}
.app-nav-tit .tit.parent-tit{padding-left:14px; color:#111}
.app-nav-tit .tit.parent-tit:before{content:''; position:absolute; left:0; top:50%; width:7px; height:15px; margin-top:-7.5px; 
	background:#5629ee;
	-webkit-mask: url("/static/fw/images/common/parent_tit.svg") 50% 50% no-repeat;
	mask:url("/static/fw/images/common/parent_tit.svg") 50% 50% no-repeat;	
	background-size:7px 15px
}


/* lnb main */
.main-lnb .app-btn{display:flex; align-items:center; height:40px; padding:0 35px; transition:all .20s ease}
.main-lnb .app-btn:hover{background:#f4f4f4}
.main-lnb .app{display:flex; align-items:center; min-width:42px; max-width:42px; color:#5629ee; font-size:24px}
.main-lnb .app-label{color:#222; font-size:16px; font-weight:300; letter-spacing:-0.5px}
.main-lnb .app-label span{display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
.main-lnb li:hover .app-label{color:#5629ee}


/* lnb common */
.lnbArea .com-lnb li{position:relative; margin-bottom:1px}
.lnbArea .com-lnb li a{white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.lnbArea .com-lnb li a span{font-weight:normal; color:#222}
.lnbArea .com-lnb li.hasSub > a:after{content:'\e943'; position:absolute; top:50%; margin-top:-11px; font-family:xeicon; font-size:22px; color:#555; transition:all .20s ease}
.lnbArea .com-lnb li.hasSub.active > a:after{transform:rotate(-180deg)}


/* lnb 1depth */
.lnbArea .com-lnb > li > a{display:block; position:relative; padding:10px 15px 10px 50px; background:#fff}
.lnbArea .com-lnb > li > a > span{font-size:16px; letter-spacing:-1px}
.lnbArea .com-lnb > li > a:before{content:''; position:absolute; left:0; top:0; width:5px; height:0; background-color:#5629ee; transition:all .10s ease}
.lnbArea .com-lnb > li:hover > a:before,
.lnbArea .com-lnb > li.active > a:before{height:100%}
.lnbArea .com-lnb > li.active > a > span{color:#5629ee; font-weight:600}
.lnbArea .com-lnb > li:hover > a > span{color:#5629ee}
.lnbArea .com-lnb > li.hasSub > a:after{right:50px}
.lnbArea .com-lnb > li.hasSub.active > a:after{right:50px}

/* lnb 1depth-count  */
.lnbArea .com-lnb > li > a > span.numb{font-size:12px; margin-left:10px; background: #efefef; color:#5629ee; min-width:20px; height:20px; line-height:21px; padding:0px 2px; display:inline-block; text-align:center; border-radius:5px}
.lnbArea .com-lnb > li.active > a > span.numb{color:#5629ee; font-weight:600}
.lnbArea .com-lnb > li:hover > a > span.numb{color:#5629ee}


/* lnb 2depth */
.lnbArea .com-lnb > li > ul{padding:5px 0}
.lnbArea .com-lnb > li > ul > li > a{display:block; position:relative; margin:0 30px}
.lnbArea .com-lnb > li > ul > li > a > span{display:block; padding:10px 30px; padding-right:50px; background:#fff; font-size:16px; letter-spacing:-0.8px; border-radius:8px; font-weight:normal; transition:all .20s ease}
.lnbArea .com-lnb > li > ul > li:hover > a > span,
.lnbArea .com-lnb > li > ul > li.active > a > span{background:#f4f4f4}
.lnbArea .com-lnb > li > ul > li.active > a > span{font-weight:600}
.lnbArea .com-lnb > li > ul > li.hasSub > a:after{right:20px}


/* lnb 3depth */
.lnbArea .com-lnb > li > ul > li > ul{padding:5px 0}
.lnbArea .com-lnb > li > ul > li > ul > li > a{display:block; position:relative; margin:0 30px}
.lnbArea .com-lnb > li > ul > li > ul > li > a > span{display:block; padding:10px 40px; padding-right:50px; background:#fff; font-size:15px; letter-spacing:-0.8px; border-radius:8px; font-weight:normal; transition:all .20s ease}
.lnbArea .com-lnb > li > ul > li > ul > li:hover > a > span{color:#5629ee}
.lnbArea .com-lnb > li > ul > li > ul > li.active > a > span{font-weight:600}
.lnbArea .com-lnb > li > ul > li > ul > li.hasSub > a:after{right:25px}


/* lnb 4depth */
.lnbArea .com-lnb > li > ul > li > ul > li > ul{position:relative; margin:5px 0; padding:10px 0; background:#fafafa}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li{margin-bottom:0}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li > a{display:block; position:relative; margin:0 30px}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li > a > span{display:block; padding:5px 40px; padding-left:55px; color:#222; font-size:15px; letter-spacing:-0.8px; font-weight:normal}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li > a > span:before{content:''; position:absolute; left:40px; top:15px; width:4px; height:4px; background:#5629ee; border-radius:50%}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li:hover > a > span{color:#5629ee}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li.active > a > span{font-weight:600}


/* lnb 5depth */
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li > ul{position:relative; margin:5px 0; padding:0}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li > ul > li > a{display:block; position:relative; padding:2px 15px; padding-left:51px}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li > ul > li > a > span{font-size:13px; letter-spacing:-0.5px}
.lnbArea .com-lnb > li > ul > li > ul > li > ul > li > ul > li > a > span:before{content:''; position:absolute; left:42px; top:11px; width:5px; height:1px; background:#b2b2b2}


/* lnb drive */
.lnbArea .drive-lnb{padding:0 20px 0 16px}
.lnbArea .drive-lnb li{position:relative; margin-bottom:1px; padding-left:24px;}
.lnbArea .drive-lnb li button{display:flex; align-items:center; width:100%; height:36px; background:none; border:0; cursor:pointer; box-sizing:border-box}
.lnbArea .drive-lnb li button i{min-width:20px; font-size:20px; margin-right:5px; color:#4a97dd}
.lnbArea .drive-lnb li button i.drop-btn{color:#aaa; cursor:pointer}
.lnbArea .drive-lnb li button i.folder-blue{color:#4a97dd}
.lnbArea .drive-lnb li button i.folder-blue2{color:#5e88d3}
.lnbArea .drive-lnb li button i.folder-blue3{color:#0096c7}
.lnbArea .drive-lnb li button i.folder-blue4{color:#3e4f9e}
.lnbArea .drive-lnb li button i.folder-yellow{color:#efa53a}
.lnbArea .drive-lnb li button i.folder-yellow2{color:#e5c41f}
.lnbArea .drive-lnb li button i.folder-gray{color:#8d9396}
.lnbArea .drive-lnb li button i.folder-gray2{color:#5c636d}
.lnbArea .drive-lnb li button i.folder-violet{color:#6052af}
.lnbArea .drive-lnb li button i.folder-violet2{color:#9746cc}
.lnbArea .drive-lnb li button i.folder-violet3{color:#847999}
.lnbArea .drive-lnb li button i.folder-coral{color:#d36a6a}
.lnbArea .drive-lnb li button i.folder-red{color:#d34c56}
.lnbArea .drive-lnb li button i.folder-orange{color:#e06f36}
.lnbArea .drive-lnb li button i.folder-orange2{color:#df925a}
.lnbArea .drive-lnb li button i.folder-pink{color:#f5869a}
.lnbArea .drive-lnb li button i.folder-pink2{color:#ba78a8}
.lnbArea .drive-lnb li button i.folder-pink3{color:#cc50cc}
.lnbArea .drive-lnb li button i.folder-brown{color:#692e2a}
.lnbArea .drive-lnb li button i.folder-green{color:#52c8a8}
.lnbArea .drive-lnb li button i.folder-green2{color:#579fa3}
.lnbArea .drive-lnb li button i.folder-green3{color:#adbf41}
.lnbArea .drive-lnb li button i.folder-green4{color:#78a562}
.lnbArea .drive-lnb li button i.folder-green5{color:#149356}
.lnbArea .drive-lnb li button i.folder-green6{color:#6f7a71}
.lnbArea .drive-lnb li button span{display:block; font-family:'ptd', 'sans-serif' !important; font-size:15px; font-weight:300; color:#555; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.lnbArea .drive-lnb li button:hover span{color:#222}
.lnbArea .drive-lnb li button.active span{color:#5629ee; font-weight:300}

/* 드라이브 파일정보 아이콘 */
i.folder-blue{color:#4a97dd}
i.folder-blue2{color:#5e88d3}
i.folder-blue3{color:#0096c7}
i.folder-blue4{color:#3e4f9e}
i.folder-yellow{color:#efa53a}
i.folder-yellow2{color:#e5c41f}
i.folder-gray{color:#8d9396}
i.folder-gray2{color:#5c636d}
i.folder-violet{color:#6052af}
i.folder-violet2{color:#9746cc}
i.folder-violet3{color:#847999}
i.folder-coral{color:#d36a6a}
i.folder-red{color:#d34c56}
i.folder-orange{color:#e06f36}
i.folder-orange2{color:#df925a}
i.folder-pink{color:#f5869a}
i.folder-pink2{color:#ba78a8}
i.folder-pink3{color:#cc50cc}
i.folder-brown{color:#692e2a}
i.folder-green{color:#52c8a8}
i.folder-green2{color:#579fa3}
i.folder-green3{color:#adbf41}
i.folder-green4{color:#78a562}
i.folder-green5{color:#149356}
i.folder-green6{color:#6f7a71}


/* tutorial view lnb */
.tutorial-lnb{padding:6px 20px 20px 40px; padding-right:20px}
.tutorial-view-lnb{position:relative}
.tutorial-view-lnb:before{content:''; position:absolute; left:12px; top:0; width:1px; height:100%; background:#ddd}
.tutorial-view-lnb li{margin-bottom:22px}

.tutorial-view-lnb .lnb-box{display:flex; align-items:center; position:relative; min-height:25px; padding-left:40px; box-sizing:border-box}
.tutorial-view-lnb .lnb-box .num
{
	display:flex; align-items:center; justify-content:center;
	position:absolute; top:0; left:0; width:25px; height:25px;
	font-size:14px; color:#999; font-weight:normal; letter-spacing:-0.5px;
	text-align:center; background:#fff; border:1px solid #ddd; border-radius:50%; box-sizing:border-box
}
.tutorial-view-lnb .lnb-box .num:before{content:''; display:none; position:absolute; left:50%; top:50%; width:35px; height:35px; margin-left:-19px; margin-top:-19px; border:1px solid #dddd; border-radius:50%}
.tutorial-view-lnb li.active .lnb-box .num{background:#5529ec; border:1px solid #5529ec; color:#fff}
.tutorial-view-lnb li.active .lnb-box .num:before{display:block; border:1px solid #cabcf9}
.tutorial-view-lnb li:hover .lnb-box .num:before{display:block}

.tutorial-view-lnb .lnb-box .tit{color:#555; font-size:16px; font-weight:normal; line-height:135%; letter-spacing:-0.5px; transition:all .20s ease}
.tutorial-view-lnb li.active .lnb-box .tit{color:#333; font-weight:300}
.tutorial-view-lnb li:hover .lnb-box .tit{color:#333}

.tutorial-view-lnb li.active .lnb-box .num:after{content:'\ea50'; display:flex; align-items:center; justify-content:center; position:absolute; left:-1px; top:14px; font-family:"remixicon"; color:#5629ee; font-size:26px; border-radius:50%; opacity:0}
.tutorial-view-lnb li.active .lnb-box .num:after{animation: tutorial-lnb-arrow 1.5s cubic-bezier(0.7, 0, 0.3, 1) 1s infinite forwards}
 @keyframes tutorial-lnb-arrow{0%{top:14px; opacity:0;} 100%{top:30px; opacity:1}}



.app-contents {
	display: flex;
	flex-direction: column;
    flex:1 1 auto;
}
.tutorial-layout .app-contents {
	position:relative;
}
.content-wrap {
    display:flex;
    flex-direction:column;
    position:relative;
    height:100%
}
.content-wrap .page-content {
    flex:1;
    overflow:auto;
    background:#fff;
}
.tutorial-layout .content-wrap .page-content:before {
	content:''; position:absolute; top:0; bottom:0; left:0; right:0; z-index:2003; opacity:0
}

.drive-layout .content-wrap .page-content {
    overflow:hidden;
}

.dev-content {
    position:relative;
    height:100%;
    padding:16px 50px 36px 50px;
    /*padding:40px 50px 36px 50px;*/
    background:#fff;
}
.dev-content.chat{padding:0;}
.dev-content.chat:after{height:0; display: none}

.search-layout .dev-content{padding:40px}
.content-wrap .page-content .dev-content{min-width:1600px}

.tutorial-layout .content-wrap .page-content .dev-content{min-width:1600px; max-width:1600px}
.tutorial-layout .dev-content:before {
	content:''; position:fixed; left:300px; top:130px; right:0; bottom:0; height:100%;
	background:rgba(0,0,0,0.5); z-index:2000
}

.dev-content:after {
    content:'';
    display:block;
    height:20px;
}
.dev-content.fit-space{
    padding:0;
}
.dev-content.fit-space:after {
    height:0;
}

.dev-content.header-only {
    padding:0px;
}
.dev-content.header-only:after{
    height: 0px;
}

.dev-content.ps-reset{display:flex; align-items:center; flex-direction:column; justify-content:center}
.dev-content.ps-reset .reset-inner{width:600px}

.wms-layout .dev-content{padding:10px 30px}

.drive-layout .dev-content{padding:0}
.drive-layout .dev-content:after{height:0}

 
.overlay-container
{
    position:relative;
}

.columnBox.layerpop-box{height:inherit;}
.layerpop-box{height:100%; background:#fff; overflow:hidden; overflow-y:auto}


/* **************************************** *
 * FOOTER
 * **************************************** */
.linkbiz-footer {height:48px;}

/* footer BANNER */
 .footer-banner{background:linear-gradient(to right, #ddd3ff30, #ddd3ff80,  #ddd3ff30 ); width:100%; height:47px; padding:12px 0px; border-top:1px solid #947cff30;}
 .footer-banner .txt{font-size: 15px; letter-spacing: -0.8px; line-height:1.5; color:#333; font-weight:normal;  display:flex; justify-content: center; align-items:center; min-width:900px;}
 .footer-banner .txt span{display:flex; align-items:center; cursor:pointer; color:#5629ee; margin:0px 2px 0px 4px; }
 .footer-banner .txt a{text-decoration:underline; text-underline-offset: 2px; font-weight: 300; color:#5629ee;}
 .footer-banner .txt i{font-size: 17px; } 
 
 /* FLOATING BANNER */
 .flo-banner{position:fixed; right:20px; bottom:70px; border-radius: 30px;  display:flex; justify-content:center; align-items:center; flex-direction:column; z-index: 999;}
 .flo-banner .txt{color:#444; font-size: 16px; font-weight: 300; letter-spacing: -1px; margin-top: 4px;}
 .flo-banner i{font-size: 34px; color:#fff; background:#5629ee; border-radius: 50%; width:60px; height:60px; display:flex; justify-content:center; align-items:center; }
 .flo-banner i:hover{background:linear-gradient(45deg, #be52f2, #5629ee);  transform:scale(1.05); transition: 1s; }
 .flo-banner .btn-close{position:absolute; right:-4px; top:-12px;}
 .flo-banner .btn-close i{background:none; font-size: 18px; color:#aaa; width:initial; height:initial;}


/* **************************************** *
 * ERROR
 * **************************************** */
 .error-wrap{width:680px; position:relative}
 .error-wrap:before{content:''; position:absolute; left:50%; top:-140px; width:114px; height:124px; margin-left:-57px; background:url("/static/fw/images/common/error_bot.png") 50% 50% no-repeat; background-size:114px 124px}
 .error-wrap .error-top{position:relative; text-align:center}
 .error-wrap .error-top .objet{display:none; position:absolute; top:-60px; left:50%; width:30px; height:30px; margin-left:-15px; background:#39d183}
 .error-wrap .error-top .objet:before{content:''; position:absolute; left:-32px; bottom:0; width:30px; height:30px; background:#0196fa; border-radius:50%}
 .error-wrap .error-top .objet:after{content:''; position:absolute; right:-23px; bottom:8px; border-top:14px solid #5c6072; border-bottom:none; border-right:14px solid transparent; border-left:14px solid transparent; transform:rotate(90deg)}

 .error-wrap .error-top .error-num,
 .error-wrap .error-top .error-tit{display:block; line-height:155%; color:#202020; letter-spacing:-2.4px}
 .error-wrap .error-top .error-num{font-size:70px; font-weight:600}
 .error-wrap .error-top .error-tit{font-size:28px; font-weight:normal}
 .error-wrap .error-body{margin-top:30px}
 .error-wrap .error-body .error-info{padding:20px; border:1px solid #ebebeb; text-align:center}
 .error-wrap .error-body .error-info p{line-height:165%; font-size:16px; font-weight:normal; color:#707070; letter-spacing:-0.5px}
 .error-wrap .error-btn{margin-top:45px; text-align:center}


 /* **************************************** *
 * EMAIL-INVITE
 * **************************************** */
 .email-invite-wrap{width:660px; position:relative}
 .email-invite-wrap:before{content:''; position:absolute; left:50%; top:-140px; width:114px; height:124px; margin-left:-57px; background:url("/static/fw/images/common/email_bot.png") 50% 50% no-repeat; background-size:114px 124px}
 .email-invite-wrap .email-invite-top{position:relative; text-align:center}

 .email-invite-wrap .email-invite-top .invite-num,
 .email-invite-wrap .email-invite-top .invite-tit{display:block; line-height:155%; color:#202020; letter-spacing:-1.2px}
 .email-invite-wrap .email-invite-top .invite-num{font-size:70px; font-weight:500}
 .email-invite-wrap .email-invite-top .invite-tit{font-size:28px; font-weight:normal}
 .email-invite-wrap .email-invite-body{margin-top:30px}
 .email-invite-wrap .email-invite-body .invite-info{padding:20px; border:1px solid #ebebeb; text-align:center}
 .email-invite-wrap .email-invite-body .invite-info p{line-height:165%; font-size:14px; font-weight:normal; color:#707070; letter-spacing:-0.5px}
 .email-invite-wrap .email-invite-body .newpass-form{width:440px; margin:0 auto}
 .email-invite-wrap .email-invite-btn{margin-top:45px; text-align:center}
 
 
  /* **************************************** *
 * WINDOWS POPUP
 * **************************************** */
 .winpop-layout .page-tit-wrap {
	position:fixed;
	top:0;
	left:0;
	right:0;
    display:flex;
    align-items:center;
    height:60px;
    padding-left:25px;
    padding-top:20px;
    background-color:#fff;
    box-sizing:border-box;
    z-index:1;
}
.winpop-layout .page-tit{display:flex; align-items:center}
.winpop-layout .page-tit .pageIcon{margin-right:5px; padding-top:4px}
.winpop-layout .page-tit .pageIcon svg{width:24px; height:24px}
.winpop-layout .page-tit .pageTitle{display:block; font-size:24px; font-weight:600; color:#202020; letter-spacing:-1.2px}
 
.winpop-container .winpop-btnwrap{padding:32px 0 0; text-align:center; font-size:0}
.winpop-container .winpop-btnwrap button{height:36px; min-width:70px; margin:0 2px; font-weight:normal; font-size:13px; letter-spacing:-0.8px}


/* **************************************** *
 * ALL-APP-NAV
 * **************************************** */
 /* 
.all-app-nav{display:none; position:fixed; top:0; bottom:0; width:100%; background-color:rgba(0,0,0,0.5); z-index:9999; overflow-y:auto}
.all-app-nav.active{display:block}
.all-app-nav .nav-wrap{min-height:800px; padding:120px 80px; background-color:#fff; box-sizing:border-box}
.all-app-nav .nav-wrap:after{content:''; display:block; clear:both}

.all-app-nav .nav_depth{position:relative; min-height:150px; padding-left:240px; border-top:1px solid #eaeaea}
.all-app-nav .nav_depth:after{content:''; display:block; clear:both}
.all-app-nav .depth_tit{position:absolute; top:-2px; left:0; width:220px; height:100%; box-sizing:border-box}
.all-app-nav .depth_tit .tit{display:block; padding-top:28px; font-weight:900; font-size:32px; letter-spacing:-1.2px; line-height:135%; color:#333}
.all-app-nav .depth_tit .tit span{font-size:32px}
.all-app-nav .depth2_list{display:flex; flex-wrap:wrap; align-items:stretch; padding:30px 0; text-align:left; box-sizing:border-box}
.all-app-nav .depth2_list:first-child{margin-top:0}
.all-app-nav .depth2_list > li{position:relative; width:16.6666666%}
.all-app-nav .depth2_box{margin-top:30px}
.all-app-nav .depth2_box .depth2_tit{display:block; transition:all .20s ease}
.all-app-nav .depth2_box .depth2_tit .tit{display:inline-block; position:relative; line-height:150%; font-weight:300; font-size:20px; letter-spacing:-1.2px; color:#999; box-sizing:border-box; transition:all .30s ease}
.all-app-nav .depth2_box .depth2_tit .tit:before{content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:#333; transition:all .10s ease}
.all-app-nav .depth2_box .depth2_tit .tit:hover:before{width:100%}
.all-app-nav .depth2_list > li:nth-child(-n+6) .depth2_box{margin-top:0}

.all-app-nav .depth3_list{padding-right:30px}
.all-app-nav .depth3_list > li:first-child{margin-top:5px}
.all-app-nav .depth3_list > li > a{display:inline-block; position:relative; padding:3px 0; color:#aaa; letter-spacing:-0.8px; font-weight:normal; font-size:16px; line-height:150%; box-sizing:border-box; transition:all .30s ease}
.all-app-nav .depth3_list > li > a:before{content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:#aaa; transition:all .10s ease}
.all-app-nav .depth3_list > li > a:hover:before{width:100%}
.all-app-nav .depth3_list > li:hover > a{color:#5629ee}

.all-app-nav .nav_depth:first-child{border-top:none}
.all-app-nav .nav_depth:hover .depth_tit .tit{color:#5629ee}
.all-app-nav .nav_depth:hover .depth2_box .depth2_tit .tit{color:#333}
.all-app-nav .nav_depth:hover .depth3_list > li > a{color:#555}

.all-app-nav .toggle-app-close{position:fixed; left:22px; top:22px; width:36px; height:36px}
.all-app-nav .toggle-app-close .toggle-btn{display:block; position:relative; width:100%; height:36px; border:0; background:none; border-radius:0; cursor:pointer}
.all-app-nav .toggle-app-close .toggle-btn:before,
.all-app-nav .toggle-app-close .toggle-btn:after{content:''; position:absolute; left:50%; width:30px; height:2px; background:#0f0f0f; margin-left:-15px; transition:all .20s}
.all-app-nav .toggle-app-close .toggle-btn:before{top:6px; transform: translateY(0.9rem) rotate(-45deg);}
.all-app-nav .toggle-app-close .toggle-btn:after{top:6px; transform:translateY(0.9rem) rotate(45deg);}
.all-app-nav .toggle-app-close .toggle-btn:hover:before,
.all-app-nav .toggle-app-close .toggle-btn:hover:after{background:#5629ee}


.account_lang{display:block; position:relative; padding:4px 0; line-height:155%; font-size:15px; font-weight:normal; letter-spacing:-0.8px; color: #333}
.account_lang .lang_tit{position:relative; cursor:pointer}
.account_lang .lang_tit i{margin-top:-1px; margin-right:2px; font-size:18px; vertical-align:middle}
.account_lang .lang_tit span{font-size:15px; vertical-align:middle}
.account_lang .lang_tit:hover{color:#5629ee}
.account_lang .lang_tit:after{content:'\e942'; position:absolute; right:0; top:3px; width:20px; height:20px; font-family:'xeicon'; font-size:18px; color:#aaa}

.account_lang .lang_list{position:absolute; right:-1px; margin-top:5px; width:100%; background:#fff; border-radius:10px; box-sizing:border-box; box-shadow:2px 4px 12px 3px rgba(0, 0, 0, 0.08); box-sizing:content-box; z-index:1000; overflow:hidden}
.account_lang .lang_list li{width: 100%; padding: 8px 12px; list-style: none; cursor: pointer}
.account_lang .lang_list li:hover{background:#f4f4f4}
.account_lang .lang_list li a{display: flex; align-items: center; height: 20px; line-height: 20px; font-size: 14px; color: #555; letter-spacing: -0.2px;}
.account_lang .lang_list li a:hover{color:#5629ee}*/
/* NEW */
.all-app-nav{display:none; position:fixed; top:0; bottom:0; width:100%; background-color:rgba(0,0,0,0.5); z-index:9999; overflow-y:auto}
.all-app-nav.active{display:block}
.all-app-nav .nav-wrap{min-height:800px; padding:120px 80px; background-color:#fff; box-sizing:border-box}
.all-app-nav .nav-wrap:after{content:''; display:block; clear:both}

.all-app-nav .nav_depth{position:relative; min-height:150px; padding-left:240px; border-top:1px solid #eaeaea}
.all-app-nav .nav_depth:after{content:''; display:block; clear:both}
.all-app-nav .depth_tit{position:absolute; top:-2px; left:0; width:220px; height:100%; box-sizing:border-box; word-break:keep-all;}
.all-app-nav .depth_tit .tit{display:block; padding-top:28px; font-weight:900; font-size:32px; letter-spacing:-1.2px; line-height:135%; color:#333}
.all-app-nav .depth_tit .tit span{font-size:32px}
.all-app-nav .depth2_list{display:grid; grid-template-columns:repeat(5, 1fr); gap:32px 14px; padding:30px 0; text-align:left; box-sizing:border-box}
.all-app-nav .depth2_list:first-child{margin-top:0}
.all-app-nav .depth2_list > li{position:relative; width:100%; min-height:42px; word-break:keep-all; padding-right:12px} 
.all-app-nav .depth2_box{margin-top:0px}
.all-app-nav .depth2_box .depth2_tit{display:block; transition:all .20s ease}
.all-app-nav .depth2_box .depth2_tit .tit{display:inline-block; position:relative; line-height:150%; font-weight:300; font-size:20px; letter-spacing:-1.2px; color:#999; box-sizing:border-box; transition:all .30s ease}
.all-app-nav .depth2_box .depth2_tit .tit:before{content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:#333; transition:all .10s ease}
.all-app-nav .depth2_box .depth2_tit .tit:hover:before{width:100%}
.all-app-nav .depth2_list > li:nth-child(-n+6) .depth2_box{margin-top:0}

.all-app-nav .depth3_list > li:first-child{margin-top:5px}
.all-app-nav .depth3_list > li > a{display:inline-block; position:relative; padding:3px 0; color:#aaa; letter-spacing:-0.8px; font-weight:normal; font-size:16px; line-height:150%; box-sizing:border-box; transition:all .30s ease}
.all-app-nav .depth3_list > li > a:before{content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background-color:#aaa; transition:all .10s ease}
.all-app-nav .depth3_list > li > a:hover:before{width:100%}
.all-app-nav .depth3_list > li:hover > a{color:#5629ee}

.all-app-nav .nav_depth:first-child{border-top:none}
.all-app-nav .nav_depth:hover .depth_tit .tit{color:#5629ee}
.all-app-nav .nav_depth:hover .depth2_box .depth2_tit .tit{color:#333}
.all-app-nav .nav_depth:hover .depth3_list > li > a{color:#555}

.all-app-nav .toggle-app-close{position:fixed; left:22px; top:22px; width:36px; height:36px}
.all-app-nav .toggle-app-close .toggle-btn{display:block; position:relative; width:100%; height:36px; border:0; background:none; border-radius:0; cursor:pointer}
.all-app-nav .toggle-app-close .toggle-btn:before,
.all-app-nav .toggle-app-close .toggle-btn:after{content:''; position:absolute; left:50%; width:30px; height:2px; background:#0f0f0f; margin-left:-15px; transition:all .20s}
.all-app-nav .toggle-app-close .toggle-btn:before{top:6px; transform: translateY(0.9rem) rotate(-45deg);}
.all-app-nav .toggle-app-close .toggle-btn:after{top:6px; transform:translateY(0.9rem) rotate(45deg);}
.all-app-nav .toggle-app-close .toggle-btn:hover:before,
.all-app-nav .toggle-app-close .toggle-btn:hover:after{background:#5629ee}


.account_lang{display:block; position:relative; padding:4px 0; line-height:155%; font-size:15px; font-weight:normal; letter-spacing:-0.8px; color: #333}
.account_lang .lang_tit{position:relative; cursor:pointer}
.account_lang .lang_tit i{margin-top:-1px; margin-right:2px; font-size:18px; vertical-align:middle}
.account_lang .lang_tit span{font-size:15px; vertical-align:middle}
.account_lang .lang_tit:hover{color:#5629ee}
.account_lang .lang_tit:after{content:'\e942'; position:absolute; right:0; top:3px; width:20px; height:20px; font-family:'xeicon'; font-size:18px; color:#aaa}

.account_lang .lang_list{position:absolute; right:-1px; margin-top:5px; width:100%; background:#fff; border-radius:10px; box-sizing:border-box; box-shadow:2px 4px 12px 3px rgba(0, 0, 0, 0.08); box-sizing:content-box; z-index:1000; overflow:hidden}
.account_lang .lang_list li{width: 100%; padding: 8px 12px; list-style: none; cursor: pointer}
.account_lang .lang_list li:hover{background:#f4f4f4}
.account_lang .lang_list li a{display: flex; align-items: center; height: 20px; line-height: 20px; font-size: 14px; color: #555; letter-spacing: -0.2px;}
.account_lang .lang_list li a:hover{color:#5629ee}


/* top banner */
.top-banner{position:absolute; width:100%; left:0px; top:0px; z-index: 99}
.top-banner .banner{display:flex; justify-content: space-between; padding: 12px 24px; background: linear-gradient(45deg, #b85eff, #5670a7)}
.top-banner .banner .tit{color:#fff; letter-spacing: -0.6px; }
.top-banner .banner .tit > span{margin:0px 8px}
.top-banner .banner .util a{text-decoration:underline; text-underline-offset:4px; color:#ffffffa3; font-size: 14px; line-height:2; cursor: pointer; transition: all 0.3s}
.top-banner .banner .util a:hover{color:#ffffffe0}
.top-banner .banner .util .ImageCheckbox.ty2.Checked:after{background: transparent; border-color:#fff}
.top-banner .banner .util .ImageCheckbox.ty2 span{color:#ffffffe0; font-size: 14px; line-height:2}
.top-banner .banner .util .Button{margin-left:14px}
.top-banner .banner .util .Button  i{color:#fff; font-size: 22px}

.top-banner .banner.color01{background:linear-gradient(45deg, #b85eff, #5670a7)}
.top-banner .banner.color02{background:linear-gradient(45deg, #5f75fb, #3465cb)}
.top-banner .banner.color03{background:linear-gradient(45deg, #5ad4ba, #809cd6)}
.top-banner .banner.color04{background:linear-gradient(45deg, #ff3e3e, #ff7166)}
.top-banner .banner.color05{background:linear-gradient(45deg, #ffc74f, #ff993b)}
.top-banner .banner.color06{background:linear-gradient(45deg, #ff63a8, #955f9f)}
.top-banner .banner.color07{background:linear-gradient(45deg, #c8d0ff, #edddff)}
.top-banner .banner.color08{background:linear-gradient(45deg, #141414, #342f35)}

.top-banner .banner.color03 .Label-color.line{color:#30afab; border-color:#fff; background:#fff}
.top-banner .banner.color05 .tit{color:#333}
.top-banner .banner.color05 .Label-color.line{color:#fff; border-color:#000; background:#000}
.top-banner .banner.color05 .util a{color:#00000080}
.top-banner .banner.color05 .util a:hover{color:#000}
.top-banner .banner.color05 .util .ImageCheckbox.ty2:after{border-color:#33333370}
.top-banner .banner.color05 .util .ImageCheckbox.ty2.Checked:after{color:#000}
.top-banner .banner.color05 .util .ImageCheckbox.ty2 span{color:#333}
.top-banner .banner.color05 .util .Button i{color:#00000060}
.top-banner .banner.color07 .tit{color:#333}
.top-banner .banner.color07 .Label-color.line{color:#8e91ff; border-color:#8e91ff; background:#fff}
.top-banner .banner.color07 .util a{color:#00000080}
.top-banner .banner.color07 .util a:hover{color:#333}
.top-banner .banner.color07 .util .ImageCheckbox.ty2:after{border-color:#33333370}
.top-banner .banner.color07 .util .ImageCheckbox.ty2.Checked:after{color:#000}
.top-banner .banner.color07 .util .ImageCheckbox.ty2 span{color:#333}
.top-banner .banner.color07 .util .Button i{color:#59438f80}
.top-banner .banner.color08 .Label-color.line{color:#000; border-color:#fff; background:#fff}



/* **************************************** *
 * bookmark
 * **************************************** */
 /*
.bookmark{position: absolute; top:65px; right:-320px; z-index:2; display:flex;}
.bookmark:hover{right: 0}
.bookmark-button{display:flex; gap:6px; align-items:center; justify-content:center; background:#8d8b98; border-radius: 50px 0px 0px 50px; height: 32px; padding:0px 12px; margin-top:16px; cursor: pointer; box-shadow: 0px 2px 4px #0000002e }
.bookmark-button .tit{font-size: 13px;}
.bookmark-cont-wrap{display:flex; flex-direction:column; gap:12px; width: 260px; background: #fff; box-shadow: 3px -1px 18px #0000002e; height: calc(100vh - 65px); padding:16px; overflow-y:auto}
.bookmark-cont-wrap .bookmark-list{border:1px solid #ededed; border-radius: 12px; min-height: 40px; color:red; flex:none}
.bookmark-cont-wrap .bookmark-list li{position:relative; display:inline-flex; align-items:center; width:100%;}
.bookmark-cont-wrap .bookmark-list li a{padding:0px 12px; height: 40px; display:inline-flex; align-items:center; gap:8px; width: 100%; font-size: 15px;  letter-spacing: -0.6px; color:#444}
.bookmark-cont-wrap .bookmark-list li a i{font-size:22px; color:#bab8c1}
.bookmark-cont-wrap .bookmark-list > li{color:blue; cursor: pointer;}
.bookmark-cont-wrap .bookmark-list > li.module-tit a:after{content:"\ea78"; font-family:"remixicon"; position:absolute; right:12px; font-size:20px; color:#a1a1a1 }
.bookmark-cont-wrap .bookmark-list > li.menu-list{display:none; transition:all 0.3s } 
.bookmark-cont-wrap .bookmark-list > li > a{font-weight: 300}
.bookmark-cont-wrap .bookmark-list > li > ul > li{height: 40px; border-top:1px solid #ededed;}
.bookmark-cont-wrap .bookmark-list > li > ul > li > a {font-size: 14px; color:#6c6c6c}
.bookmark-cont-wrap .bookmark-list > li > ul > li:hover > a{color:#333; transition:all 0.3s }
.bookmark-cont-wrap .bookmark-list > li > ul > li > a i{font-size: 16px; color:#5629ee}
.bookmark-cont-wrap .bookmark-list.active > li.module-tit a:after{transform:rotate(180deg)}
.bookmark-cont-wrap .bookmark-list.active > li.menu-list {display:block; transition:all 0.3s }
*/
.bookmark.ty2{position: absolute; top:65px; right:0; z-index:5; display:flex;}
.bookmark.ty2:hover{right: 0}
.bookmark-top{display:flex; justify-content: space-between; gap:4px; margin:4px 0px; padding-left:6px; min-height: 28px;}
.bookmark-top .tit{font-size: 17px; font-weight:300; letter-spacing:-0.6px; color:#333; padding-top:2px}
.bookmark-top .button-area{display:flex; align-items: center; gap:4px}
.bookmark-top .button-area .Button{padding:4px; border-radius: 4px}
.bookmark-top .button-area .Button:active,
.bookmark-top .button-area .Button:focus{background: #ececec; padding:4px; border-radius: 4px}
.bookmark-top .button-area .Button:hover{background: #ececec; padding:4px; border-radius: 4px}
.bookmark-top .button-area .Button i{color:#777; }
.bookmark-cont-wrap{display:flex; flex-direction:column; gap:10px; width: 260px; background: #fff; box-shadow: 3px -1px 18px #0000002e; height: calc(100vh - 65px); padding: 8px 8px 12px; overflow: hidden;}
.bookmark-list-wrap{flex: 1; overflow-y: auto; padding-right: 5px; display: flex; gap: 12px; flex-direction: column;}
.bookmark-cont-wrap .bookmark-list{border:1px solid #ededed; border-radius: 12px; margin:0px 8px; min-height: 40px; color:red; flex:none}
.bookmark-cont-wrap .bookmark-list li{position:relative; display:inline-flex; align-items:center; justify-content:space-between;  width:100%;}
.bookmark-cont-wrap .bookmark-list li a{padding:0px 12px; height: 40px; display:inline-flex; align-items:center; gap:8px; width: 100%; font-size: 15px;  letter-spacing: -0.6px; color:#444}
.bookmark-cont-wrap .bookmark-list li a span{flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bookmark-cont-wrap .bookmark-list li a i{font-size:22px; color:#bab8c1}
.bookmark-cont-wrap .bookmark-list > li{color:#5629ee; cursor: pointer;}
.bookmark-cont-wrap .bookmark-list > li.module-tit a:after{content:"\ea78"; font-family:"remixicon"; position:absolute; right:12px; font-size:20px; color:#a1a1a1; transition:all .20s ease; transform:rotate(180deg); }
.bookmark-cont-wrap .bookmark-list > li.menu-list{display:none; transition:all 0.3s } 
.bookmark-cont-wrap .bookmark-list > li > a{font-weight: 300}
.bookmark-cont-wrap .bookmark-list > li > ul > li{height: 40px; border-top:1px solid #ededed;}
.bookmark-cont-wrap .bookmark-list > li > ul > li > a {font-size: 14px; color:#6c6c6c;}
.bookmark-cont-wrap .bookmark-list > li > ul > li:hover > a{color:#333; transition:all 0.3s }
.bookmark-cont-wrap .bookmark-list > li > ul > li > a i{font-size: 16px; color:#5629ee}
.bookmark-cont-wrap .bookmark-list.active > li.module-tit a{width: 100%;}
.bookmark-cont-wrap .bookmark-list.active > li.module-tit a:after{transform:rotate(0deg); transition:all .20s ease;}
.bookmark-cont-wrap .bookmark-list.active > li.menu-list {display:block; transition:all 0.3s }

.bookmark-cont-wrap .bookmark-list .menu-btn-area{display:flex; justify-content:flex-end; align-items: center; gap:2px; padding-right: 6px; width: 100%;}
.bookmark-cont-wrap .bookmark-list .menu-btn-area .Button{display:inline-flex; align-items:center; justify-content:center;  width: 22px; height: 22px; min-width: 22px; min-height: 22px; padding:0}
.bookmark-cont-wrap .bookmark-list .menu-btn-area .Button.del-btn{border-color:#ff8d8d; background: #fff2f2}
.bookmark-cont-wrap .bookmark-list .menu-btn-area .Button.del-btn i{color:#ff6060}
.bookmark-cont-wrap .bookmark-list .menu-btn-area .Button i[class^="ri-"]{margin-top: 0px; font-size: 15px}
.bookmark-cont-wrap .bookmark-list .menu-btn-area .Button i[class="ri-arrow-down-s-line"]{margin-top: 1px}

.bookmark-list-wrap .infoTxt01{text-align: center; top:10vh} 
.bookmark-list-wrap .infoTxt01 i{color:#5629ee}
.bookmark.ty3{position: absolute; top:65px; left:-274px; z-index:99; display:flex; flex-direction:row-reverse; transition:left 0.1s ease-in-out;}
.bookmark.ty3.bookmark-hover {left:0;}
.bookmark.ty3.bookmark-hover .bookmark-cont-wrap{box-shadow: 3px -1px 18px #0000002e;}

.bookmark.ty3 .bookmark-button{position:absolute; right:-29px; display:flex; gap:6px; align-items:center; justify-content:center; background:#8d8b98; border-radius: 0px 50px 50px 0px; height: 32px; padding:0px 8px 0px 6px; margin-top:16px; cursor: pointer; box-shadow: 0px 2px 4px #0000002e }
.bookmark.ty3 .bookmark-button .tit{font-size: 13px;}
.bookmark.ty3.bookmark-hover .bookmark-button{right: -29px}
.bookmark.ty3 .bookmark-cont-wrap{width: 274px; box-shadow: none}