/* Ƽ½ºÅ丮 ÆÁ¹Ú½º - by Ä£ÀýÇÑÈ¿ÀÚ¼Õ */ /* https://rgy0409.tistory.com */ .rgyInfo { position: relative; border: 3px solid red; border-radius: 10px; box-sizing: border-box; padding: 10px; margin: 0 20px; text-align: justify; } .rgyInfo .rgyInfo-circle { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); width: 50px; height: 50px; line-height: 50px; } .rgyInfo .rgyInfo-circle > div { position: absolute; width: 100%; height: 100%; border-radius: 100%; box-sizing: border-box; text-align: center; } .rgyInfo .rgyInfo-circle .topDiv { font-size: 18px; color: #fff; z-index: 10; background: red; } .rgyInfo .rgyInfo-circle .bottomDiv { z-index: 9; border: 5px solid red; animation: rgyAni01 1s infinite; } .rgyInfo .rgyInfo-circle .bottomDiv2 { z-index: 8; border: 5px solid red; animation: rgyAni01 1s 0.25s infinite; } @keyframes rgyAni01 { 0% { transform: scale(1, 1); opacity: 1; } 100% { border: 0.5px solid white; transform: scale(1.5, 1.5); opacity: 0; } } .rgyInfo .rgyInfo-text { display: table; min-height: 70px; margin-left: 80px; margin-right: 5px; } .rgyInfo .rgyInfo-text p { display: table-cell; vertical-align: middle; } .rgyInfo .rgyInfo-text p::before { font-family: FontAwesome; content:"\f105"; margin-right: 5px; margin-left: 2px; }