.close { position: absolute; right: 0; } .img { width: 154px; margin-right: 20px; } .num { font-size: 80px; font-weight: bold; font-family: DINAlternate-Bold, DINAlternate; line-height: 94px; margin-bottom: 16px; color: #4a90e2; } .point { width: 20px; height: 20px; border-radius: 10px; margin-right: 12px; } .onlinePoint { .point; background-color: #12ceb3; } .outlinePoint { .point; background-color: #9b9b9b; } .rightIcon { position: absolute; right: 20px; top: 20px; } .cardItem { display: flex; padding: 40px 44px 32px; align-items: center; .name { font-size: 36px; color: #000000; } } .lTextCon2 { display: flex; align-items: center; } .text { font-size: 28px; color: #4a4a4a; line-height: 38px; } .sparePart { width: 100%; .titleContent { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 48px 212px 28px 104px; .titleLeft { display: flex; .textCon { text-align: center; margin: auto; } } .lTextCon1 { .lTextCon2; margin-bottom: 32px; } } } .doorPart { width: 100%; .titleContent { display: flex; justify-content: space-between; .cardLeft { width: 49%; .up { display: flex; align-items: center; margin-top: 32px; margin-left: 48px; .img { width: 154px; // height: 130px; margin-right: 40px; } .textCon { text-align: center; } } .bottom { display: flex; margin: 28px 0 6px; justify-content: space-around; } } .cardRight { width: 49%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 28px 0 32px 0; .btn { width: 157px; height: 55px; background: rgba(222, 237, 255, 0.91); border-radius: 6px; padding: 8px 26px; font-size: 28px; color: #329bfe; line-height: 38px; } .in { .point; background-color: #4a90e2; } .out { .point; background-color: #f5a623; } .textContent { display: flex; align-items: center; } } } }