@font-face { font-family: MiSans-Normal; src: url(../font/MiSans-Normal.ttf); } @font-face { font-family: MiSans-Medium; src: url(../font/MiSans-Medium.ttf); } @font-face { font-family: MiSans-Demibold; src: url(../font/MiSans-Demibold.ttf); } @font-face { font-family: MiSans-Regular; src: url(../font/MiSans-Regular.ttf); } .topTitle { display: flex; width: 100%; height: 40px; line-height: 40px; /* padding: 20px 0; */ margin-bottom: 10px; color: #a9834f; background-color: rgba(255, 255, 255, 0.5) } .topTitle div { width: calc(50% - 30px); } .title-left { text-align: left; margin-left: 30px; font-family: "MiSans-Demibold"; } .title-right { text-align: right; font-family: "MiSans-Normal"; margin-right: 30px; } .passCheck { font-family: "MiSans-Normal"; margin-left: 28px; } .list { width: calc(100% - 120px); margin: 25px 0; margin-left: 55px; /* display: flex; */ border-radius: 20px; background-color: rgba(169, 131, 75, 0.1); padding-bottom: 30px; } .list-title { font-family: "MiSans-Demibold"; text-align: center; background-color: #a9834f; color: #fff; width: 120px; border-radius: 20px 0; height: 40px; line-height: 40px; font-size: 24px; font-family: ''; } .list-div { width: calc(100% - 60px); margin: 20px 30px 0; height: 40px; line-height: 40px; width: 420px; background-color: rgba(255, 255, 255, 0.8); border-radius: 20px; display: flex; } .list-div div { width: calc(50% - 30px); } .list-div div:nth-child(1) { font-family: "MiSans-Medium"; margin-left: 30px; text-align: left; color: #a9834f; font-size: 22px; } .list-div div:nth-child(2) { font-family: "MiSans-Normal"; margin-right: 30px; text-align: right; color: #20a162; } .false-color { color: #fff !important; position: relative; width: 60%; height: 100%; background-color: #ef3644 !important; display: inline-block; text-align: center; right: -30px; border-radius: 0px 20px 20px 0; }