.content{ padding-top: 70px; padding-bottom: 100px; &.gray{ background: #F1F3F5; } } .contentInfo{ margin-top: 30px; .infoList{ border-bottom: 1px solid rgba(0, 0, 0, 0.08); .listTitleBox{ position: relative; display: flex; align-items: center; justify-content: space-between; height: 60px; .title{ font-size: 18px; line-height: 24px; color: #333436; font-weight: bold; } .icon{ width: 20px; height: 20px; } .off{ display: none; } } .listBox{ display: flex; justify-content: space-between; flex-wrap: wrap; height: 0; overflow: hidden; .listItem{ position: relative; display: flex; align-items: center; justify-content: space-between; width: 49%; background: rgba(138, 141, 146, 0.06); padding: 13px 15px; margin-bottom: 8px; text-decoration: none; .txt{ font-size: 14px; line-height: 22px; color: #333436; font-weight: 300; padding-right: 20px; text-decoration: none; } .arrow{ width: 14px; height: 14px; opacity: 0.5; } } } &.active{ border-bottom: 0; .on{ display: none; } .off{ display: block; } .listBox{ height: auto; } } } } @media (max-width: 767px) { .content{ padding-top: 40px; padding-bottom: 50px; } // .contentInfo .infoList .listTitleBox .title .contentInfo{ margin-top: 10px; .infoList{ .listTitleBox{ height: 48px; .title{ font-size: 15px; line-height: 20px; } } .listBox{ .listItem{ width: 100%; align-items: flex-start; padding: 12px 15px; .txt{ font-size: 13px; line-height: 20px; } .arrow{ margin-top: 3px; } } } } } }