.mainp-container { display: flex; margin-top: 2%; width: 100%; height: 80vh; box-sizing: border-box; } .mainp-left-wrap { margin-right: 30px; margin-left: 30px; } .mainp-left { /* width: 20%; */ width: 340px; margin-left: 1%; margin-right: 1%; border-radius: 20px; background-color: white; height: 45vh; margin-top: 12%; } .mainp-left-img { width: 200px; height: 250px; } .mainp-right { width: 70%; } .mainp-menu ul { padding: 0; list-style-type: none; display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; } .mainp-menu li { padding: 8px; width: calc(10% - 16px); text-align: center; color: white; background-color: #903ff8; border-top-left-radius: 15px; border-top-right-radius: 15px; } .mainp-menu li.active { background-color: white; color: black; /* 글자색은 배경과 대비되게 조정 */ font-weight: bold; /* 선택된 항목에 강조를 주기 위해 */ } .mainp-menu li:hover { cursor: pointer; opacity: 0.7; } .mainp-menu li:first-child { margin-left: 10px; } .mainp-menu li:last-child { margin-right: 10px; } .mainp-left-top { display: flex; } .mainp-left-top-div { width: 175px; height: 150px; background-color: white; border-radius: 20px; display: flex; justify-content: center; align-items: center; position: relative; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); padding: 0px 10px 0px 15px; } .bubble-tail { position: absolute; bottom: -20px; /* Adjust this value based on your exact needs */ /* left: 50%; */ right: 80%; width: 0; height: 0; border-style: solid; border-width: 20px 20px 0 0px; border-color: white transparent transparent transparent; }