@charset "utf-8";

.inner{width:1160px; margin: 0 auto;}

/* header */
header{position: absolute; top:0; left:0; z-index: 99; display: flex; justify-content: center; align-items: flex-start; width:100%; padding:25px 40px; height:90px; color:#fff; background: #0C0C0D; transition-duration: .3s;}
header.on{background: #15151A; box-shadow: 0 3px 6px 0 rgba(0,0,0,.3);}
header .goWrap{display: flex; align-items: center; margin-top: 6px; margin-right: auto;}
header .goWrap .sgis{font-size: 0;}
header .goWrap .logo{margin-left: 5px; font-size:1.8rem;}
header .userWrap{display: flex; align-items: center;}
header .userWrap .btnSearch{margin-right: 40px;}
/* nav */
header nav{ margin-top: 12px;}
header nav>ul{position: relative; display: flex; justify-content: space-around;opacity: .75;}
header nav>ul>li{width:150px;}
header nav>ul>li>a{position: relative; padding-bottom: 20px;}
header nav>ul>li>a::after{content: ""; position: absolute; bottom: 0; left: 0; display: block; width:0; height:3px; background: #0D45FF; transition-duration: .3s;}
header nav>ul>li:hover>a{font-weight: 600; opacity: 1;}
header nav>ul>li:hover>a::after{width:100%;}
/* depth */
header nav .depth{padding-top: 45px; display: none;}
header nav .depth li~li{margin-top: 18px;}
header nav .depth li a{display: inline-block; width:80%; font-size:1.5rem; word-break: keep-all; opacity: .65;}
header nav .depth li:hover a{opacity: 1; text-decoration: underline 2px #2B54FF;}

/* searchWrap */
header .searchWrap{margin:5px 40px 0 auto;}
header .searchWrap .popSearch{display: none; position: fixed; z-index: 99; top:0; left:0; width:100vw; height:100vh; background: rgba(0,0,0,0.5);}
header .searchWrap .popSearch article{display: flex; justify-content: center; align-items: center; height:90px; background: #1f1f26;}
header .searchWrap .popSearch form{display: flex; justify-content: center; align-items: center; width: 600px;}
header .searchWrap .popSearch fieldset{width: 100%;}
header .searchWrap .popSearch input[type="text"]{width:calc(100% - 30px); height:45px; border-color:transparent; background: transparent; font-size: 1.8rem; color:#fff;}
header .searchWrap .popSearch .rcmdt{position: absolute; top:90px; width:600px; padding: 20px; background: #1f1f26; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
header .searchWrap .popSearch .rcmdt span{font-size:1.4rem; color:rgba(256,256,256,.4);}
header .searchWrap .popSearch .rcmdt ul{margin-top: 20px; max-height:130px; overflow-y: auto; padding-left:10px;}
header .searchWrap .popSearch .rcmdt li~li{margin-top: 15px;}
header .searchWrap .popSearch .rcmdt li a{color:rgba(256,256,256,.6)}
header .searchWrap .popSearch .rcmdt li a:hover{color:#fff; font-weight: 600; text-decoration: underline 2px #0D45FF;}
header .searchWrap .popSearch .btnClose{position: absolute; right:80px;}
header .searchWrap.on .popSearch{display: block;}
header .searchWrap .popSearch ::-webkit-scrollbar-thumb{background-color: #666; border-radius: 13px; background-clip: padding-box; border:3px solid transparent;}
header .searchWrap .popSearch ::-webkit-scrollbar-track{background-color: rgba(256,256,256,.08); border:1px solid rgba(0,0,0,0.07); border-radius: 0;}

/* userWrap */
header .userWrap .user{display: none; align-items: center; height:40px;}
header .userWrap .user.on{display: flex;}
header .userWrap section{position: relative}
header .userWrap .toolBox{display: none; position: absolute; background: #1f1f26; border:1px solid rgba(256,256,256,.1); border-radius: 5px;
box-shadow: 0 3px 10px 2px rgba(0,0,0,.5);}
header .userWrap section.on .toolBox{display: block;}
header .userWrap .toolBox::before{content:""; position: absolute; top:-7px; right:50px; width:14px; height:14px; transform: rotate(45deg);
border-radius: 2px; border-top:1px solid rgba(256,256,256,.1); border-left: 1px solid rgba(256,256,256,.1); background: #1f1f26;}
header .userWrap .btn01:hover{background: #fff; color:#2B54FF; font-weight: 600;}

/* 즐겨찾기 */
header .bookmark .btnBmk{margin-right: 10px; background: url(../images/icon_bookmark02.png)no-repeat 50%;}
header .bookmark .toolBox{right:-32px; top:45px; min-width: 480px; padding: 35px 28px;}
header .bookmark .toolBox ul>li{display: flex;}
header .bookmark .toolBox ul>li~li{margin-top: 22px;}
header .bookmark .toolBox ul>li::before{content:""; display: inline-block; vertical-align: text-top; width:20px; height:20px; margin-right: 5px; background: url(../images/icon_bookmark02.png)no-repeat 50%/100%;}
header .bookmark .toolBox ul>li a em{font-size: 1.8rem; font-weight: 600; margin-right: 15px;}
header .bookmark .toolBox ul>li:hover a em{text-decoration: underline;}
header .bookmark .toolBox ul a span i{color:rgba(256,256,256,.6); line-height: 1.6; word-break: break-all; font-size: 1.4rem;}
header .bookmark .toolBox ul a span i~i::before{content:""; display: inline-block; vertical-align: middle; width:5px; height:8px; margin: -3px 8px 0 5px; opacity: .5; background: url(../images/icon_arrow01.png)no-repeat 50%/100%;}
/* 내정보 */ 
header .myinfo .userName{color:#fff;}
header .myinfo .userName::after{content:""; display: inline-block; width:10px; height:12px; margin-left: 10px; transform: rotate(90deg); background: url(../images/icon_arrow01.png)no-repeat 50%/60%;}
header .myinfo.on .userName::after{transform: rotate(-90deg);}
header .myinfo .toolBox{right:0; top:40px; min-width: 380px;}
header .myinfo .toolBox .my{display: flex; padding: 30px;}
header .myinfo .toolBox .my span{display: block; font-size: 1.8rem; margin-bottom: 10px;}
header .myinfo .toolBox .my i{color:rgba(256,256,256,.5);}
header .myinfo .toolBox .my button{height:35px; line-height: 35px; margin-left: auto;}
header .myinfo .toolBox .link{display: flex; border-top:1px solid rgba(256,256,256,.1);}
header .myinfo .toolBox .link a{display: block; width: 50%; padding:20px 30px; text-align: center; background: transparent; transition-duration: .1s;}
header .myinfo .toolBox .link a~a{border-left:1px solid rgba(256,256,256,.1);}
header .myinfo .toolBox .link a:hover{background: rgba(256,256,256,.07);}

/* 서브 */
.sub{display: flex; padding-top:90px}

/* Left menu */
/*mng_s 20211214 이진호, width 값 변경*/
/* aside{width:280px; height: calc(100vh - 90px); overflow-y: auto; background: #F2F3F7; padding-bottom:40px;} */
aside{width:340px; height: calc(100vh - 90px); overflow-y: auto; background: #F2F3F7; padding-bottom:40px;}
/*mng_e 20211214 이진호*/
aside ul li{position: relative;}
aside ul li.hide{height: 40px; overflow: hidden;}
aside ul li a{display: block; min-height: 40px; word-break: break-all;}
aside .depth01{margin-top: 40px;}
aside>ul>li{margin-bottom: 5px;}
aside>ul>li>a{font-weight: 700; padding:12px 40px 9px 40px;}
aside>ul>li.on>a{background: #E1E3EB;}
/* Fold 버튼 */
aside .btnFold{position: absolute; top:10px; right:15px; width:20px; height:20px;}
aside .btnFold::after{content:""; display: inline-block; text-align: center; vertical-align: middle; width:10px; height:12px; opacity: .5; transform: rotate(180deg); background: url(../images/icon_arrow03.png)no-repeat 50%;}
aside ul li.hide>.btnFold::after{transform: rotate(0);}
/* depth02 */
aside .depth02{padding-left: 50px;}
aside .depth02>li{margin-bottom: 5px;}
aside .depth02>li>strong{display: block; font-weight: 700; font-size: 1.5rem; min-height: 40px; padding: 12px 40px 9px 0; word-break: break-all;}
aside .depth02>li>a{font-weight: 700; font-size: 1.5rem; padding: 12px 40px 9px 0;}
aside .depth02>li.on>a,aside .depth02>li.on>strong{color: #2B54FF;}
/* depth03 */
aside .depth03{padding-left: 5px;}
aside .depth03>li>a{font-size: 1.4rem; border-left: 1px solid rgba(0,0,0,0.2); padding:12px 40px 9px 10px}
aside .depth03>li.on>a{border-left-color: #0D45FF;color: #2B54FF;}
/* tab */
aside .tab{display: flex; height: 50px; background: #E1E3EB;}
aside .tab a{display: flex; justify-content: center; align-items: center; height: 100%; width:50%; font-weight: 600; background: transparent; transition-duration: .2s; color: rgba(24,24,24,0.5);}
aside .tab a:hover{color:#181818;}
aside .tab a.on{background: #0D45FF; color:#fff;}

/* 서브 */
.sub main{position: relative; width:calc(100% - 280px); height:calc(100vh - 90px); overflow-y: auto; padding:40px 40px 100px 40px;}
.sub main .openMark{position: absolute; top:20px; right:20px;}

/* 서브 네비게이션 */
.sub .navigation{display: flex; margin-bottom: 36px;}
.sub .navigation li{font-size: 1.4rem; color: #888;}
.sub .navigation li~li::before{content:""; display: inline-block; vertical-align: middle; transform: rotate(-90deg); width:8px; height:8px; margin: 0 10px; opacity: .5; background: url(../images/icon_arrow03.png)no-repeat 50%/100%;}