.index{padding-top: 50px;}
.index .title{display: flex;justify-content: center;align-items: center;}
.index .title img{margin-right: 5px;}
.index .brief{text-align: center;font-size: 18px;line-height: 1.8;margin-top: 20px;font-weight: bold;}
.index .btn-box{display: flex;justify-content: center;gap: 20px;margin-top: 20px;}
.index .btn-box .btn{display: flex;gap: 5px;padding: 10px 15px;color: var(--white);font-size: 18px;font-weight: bold;border-radius: 5px;}
.index .btn-box .btn svg{width: 25px;height: auto;fill: var(--white);}
.index .btn-box .btn.blue{background-color: var(--blue);}
.index .btn-box .btn.green{background-color: var(--green);}

.handbook{display: flex;justify-content: space-between;align-items: start;gap: 20px;margin-top: 40px;}
aside{flex: 0 0 auto;width: 200px;padding: 10px;border-radius: 5px;overflow: hidden;}
aside .subject{border-bottom: 1px solid var(--h_ccc);}
aside .subject:last-child{border-bottom: unset;}
aside .tit{display: block;font-weight: bold;padding: 5px 10px;}
aside .nav-list .nav{display: flex;align-items: center;;padding: 5px 10px;border-top: 1px dashed var(--h_ccc);}
aside .nav-list .nav::before{content: '';display: block;width: 6px;height: 1px;margin-right: 5px;;background-color: var(--h_333);}
aside .checked{font-weight: bold;pointer-events: none;}
aside .nav-list .checked.nav::before{height: 2px;}
.handbook main{flex: 1 1 auto;border-radius: 5px;padding: 20px;}
.handbook main h1{font-size: 20px;text-align: center;margin-bottom: 20px;}
.handbook main .content{line-height: 1.8;text-indent: 2em;}

.img{float: left;max-width: 300px;margin-right: 20px;border-radius: 5px;box-shadow: 0 0 5px var(--shadow);}
.clear-float{clear: both;height: 20px;}