@charset "utf-8";

.toc-wrap{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.toc-wrap .toc-list-wrap{
width: 450px;
margin-right: 50px;
flex: 0 0 450px;
}
.toc-wrap.no-active .toc-list-wrap{
    width: 90px;
    flex: 0 0 90px;
}
.toc-wrap.no-active .toc-content-wrap{
  width: calc(100% - 120px);
}
.toc-wrap.no-active .toc-menu-btn .tit,.toc-wrap.no-active .toc-menu-btn .data{
  display: none;
}
.toc-wrap.no-active .toc-depth-tit,.toc-wrap.no-active .toc-depth1_ul{
  display: none;
}
.toc-list-wrap .toc-list-haeger{
  width: 100%;
  height: 90px;
  margin-bottom: 30px;
}
.toc-list-haeger .toc-menu-btn{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
 border-radius: 4px;
border: 1px solid  #D9DAE1;
background-color: #F9F9FA;
padding: 0 15px;
background-repeat: no-repeat;
background-position: calc(100% - 15px) center;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.5H20' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 12H20' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 18.5H20' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.8284 14.8283L4 11.9998L6.8284 9.17139' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  
}
.toc-wrap.no-active .toc-menu-btn {
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5.5H4' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 12H4' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 18.5H4' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.1716 14.8283L20 11.9998L17.1716 9.17139' stroke='%23697785' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}
.toc-menu-btn .tit{
   display: block;
  width: 100%;
  color: #303841;
  font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 22px */
letter-spacing: -0.4px;
text-align: left;

}
.toc-menu-btn .data{
  color:  #666;
  width: 100%;
  display: block;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 110%; 
text-align: left
}


.toc-depth-tit{
  display: block;
  width: 100%;
  padding-bottom: 10px;
  
  color: #303841;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 17.6px */
border-bottom: 1px dashed #D9DAE1;
}


.depth-btn{
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content:flex-start ;
  position: relative;
}
.depth-btn > button{
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 7.5L10 12.5L5 7.5' stroke='%23697785' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  font-size: 0;
  margin-right: 4px;
  transition: all .2s;
  position: absolute;
  top:0;
  left:-24px
}
.depth-btn.up > button{
  transform: rotate(-90deg);
}
.depth-btn > a{
  display: block;
color:  #2594CF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 110%; /* 17.6px */
letter-spacing: -0.16px;
text-decoration-line: underline;
width: 100%;
}
.toc-depth1_ul li, .depth-btn{
   color:  #303841;
font-size: 16px;
font-weight: 500;
font-style: normal;
line-height: 110%; /* 17.6px */
}
 .depth-btn{
   color:  #303841;
font-size: 16px;
font-weight: 700;
font-style: normal;
line-height: 110%; /* 17.6px */
}
.depth-btn button + a{
  color:  #303841;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 17.6px */
}
.depth-btn.up button + a{font-weight: 500;}
.toc-list-wrap ul{
  padding-left: 24px;

}
.toc-list-wrap ul.toc-depth1_ul{
  padding-right: 20px;
}

.toc-list-wrap li{
  margin-top: 10px;
  position: relative;
}
.toc-list-wrap .toc-depth1_ul > li{
  padding-bottom: 10px;
}
.toc-wrap .toc-content-wrap{
  width: calc(100% - 500px);
  transition: all .4s ease-out;
}
.toc-content-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90px;
  width: 100%;
  border-bottom: 1px solid #D9DAE1;
  border-top: 1px solid #D9DAE1;
}
.toc-content-header .tit{
  color:  #303841;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 110%; /* 29.7px */
letter-spacing: -0.54px;
}
.cb-btn-wrap button{
  margin: 0;;
  margin-left: 10px;
}
.toc-content{
  padding: 30px 0 ;
}
.toc-content p{
  margin: 0;
  padding:  0 ;
}
.toc-content-footer{
  border-top: 1px solid #D9DAE1;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toc-content-header  .cb-btn-wrap{
  flex : 0 0 200px
}
@media (max-width: 1439.98px){
  .toc-wrap .toc-list-wrap{
        width: 335px;
    margin-right: 40px;
    flex: 0 0 355px;
  }
  .toc-wrap .toc-content-wrap{
    width: calc(100% - 375px);
  }
}
@media (max-width: 1279.98px){
  .toc-wrap .toc-list-wrap{
        width: 320px;
    margin-right: 30px;
    flex: 0 0 320px;
  }
  .toc-wrap .toc-content-wrap{
    width: calc(100% - 350px);
  }
  .toc-menu-btn .tit{
      font-size: 18px;
  }
  
}
@media (max-width: 999.98px){
  .toc-content-header{
    flex-wrap: wrap;
    min-height: 90px;
    height: auto;
    align-content: center;
    justify-content: flex-start;
  }
  .toc-content-header .tit{
    width: 100%;
     margin: 10px 0;
  }
  .toc-content-header  .cb-btn-wrap{
    width: 100%;
    margin: 7px 0;
  }
  .toc-content-header  .cb-btn-wrap button{
   margin-right: 10px;
   margin-left: 0;
  }
}
@media (max-width: 519.98px){
.toc-list-wrap .toc-list-haeger{
  height: 60px;
}
.toc-wrap.no-active .toc-list-wrap {
    width: 60px;
    flex: 0 0 60px;
}
.toc-wrap .toc-content-wrap{
 margin-top: 80px;
  z-index: 1;
  position: relative;
}
.toc-wrap .toc-list-wrap{
   position: absolute;
  top:0;
  left:0;
  z-index: 2;
  border-radius: 5px;
  background: #fff;
  box-shadow: 2px 2px 6px 8px rgba(0,0,0,.043);
}
.toc-wrap.no-active .toc-list-wrap{
  background: transparent;
  box-shadow: 2px 2px 6px 8px rgba(0,0,0,0);
}
.toc-wrap{
  min-height: calc(100vh - 560px);
  overflow: auto;
}
.toc-wrap.no-active .toc-content-wrap,.toc-wrap .toc-content-wrap{
width: 100%;
}
.toc-depth-tit{
padding-left: 10px;  
padding-right: 10px;
}
.toc-list-wrap ul.toc-depth1_ul{
  padding-left: 40px;
  padding-right: 25px;
}
}
@media (max-width: 359.98px){
  .toc-wrap .toc-list-wrap{
    width: 100%;
    margin-right: 0;
  }
}