* { margin: 0px; padding: 0px; box-sizing: border-box; user-select: none; } body, html { position: relative; height: 100%; width: 100%; font-size: 0.83333vw; overflow: hidden; color: white; } .form { position: relative; display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } span, div:not(.form), img, svg, path, input { transition: all 0.3s ease; } .container { position: absolute; width: 23.5417vw; height: 23.3333vw; border-radius: 0.8333vw; padding: 1.25vw; background-image: url('../images/bg.png'); background-size: 100% 100%; } .min_box { width: 1.3021vw; height: 1.3021vw; border-radius: 0.1563vw; background-image: url('../images/min_box.png'); background-size: 100% 100%; } .min_box svg { width: 0.8333vw; } .name_ui span { font-size: 1.6667vw; font-family: 'Bold'; letter-spacing: -0.06em; text-shadow: 0 0 1.771vw rgba(255, 255, 255, 0.45); } .name_ui { gap: 0.4167vw; } .short_description { font-size: 0.7292vw; font-family: 'REGULAR'; line-height: 107%; width: 8.7771vw; letter-spacing: -0.03em; margin-left: 0.4167vw; color: rgba(255, 255, 255, 0.75); } .left_block { gap: 0; } .esc_btn { height: 1.1979vw; width: 2.5057vw; gap: 0.2083vw; background: rgba(255, 95, 97, 0.1); border-radius: 0.1042vw; font-size: 0.7292vw; font-family: 'Regular'; color: #ff5f61; text-shadow: 0 0 0.381vw rgba(255, 95, 97, 0.75); } .esc_btn svg { width: 0.469vw; height: 0.469vw; } .pannel_r { width: 100%; height: 2.5vw; background-image: url('../images/pannel.png'); background-size: 100% 100%; border-radius: 0.2083vw; padding: 0.625vw } .min_r { width: 1.2964vw; height: 1.2964vw; background-image: url('../images/min_box.png'); background-size: 100% 100%; border-radius: 0.1563vw; box-shadow: 0 0 1.302vw rgba(255, 143, 145, 0.15); } .min_r svg { width: 0.8333vw; height: 0.8333vw; } .row_r { margin-left: 0.4167vw; } .price { height: 1.1979vw; border: 0.052vw solid #d4ff5f; border-radius: 0.104vw; box-shadow: 0 0.208vw 1.146vw rgba(212, 255, 95, 0.35); background: linear-gradient(180deg, #d4ff5f 0%, #7f9939 100%); padding: 0.208vw 0.26vw; font-size: 0.7292vw; font-family: 'SemiBold'; letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.75); } .button { width: 1.1979vw; height: 1.1979vw; border-radius: 0.1563vw; cursor: pointer; transition: all 0.3s ease; border: 0.052vw solid #ff8f91; box-shadow: 0 0.417vw 1.719vw rgba(255, 143, 145, 0.15); background: linear-gradient(180deg, #ff8f91 0%, #c77173 100%); } .button svg { width: 0.8333vw; height: 0.8333vw; } .button:hover { transform: translateY(0.1vw); box-shadow: 0 0.417vw 1.719vw rgba(255, 143, 145, 0.35); } .button:active { opacity: 0.75; } .row_r span:first-child { font-size: 0.7292vw; font-family: 'Regular'; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.5); } .row_r span:last-child { font-size: 0.7292vw; font-family: 'SemiBold'; letter-spacing: -0.04em; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); } .r_bl { gap: 0.4167vw; } @keyframes fadeInOut { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } .animated-element { animation: fadeInOut 2s infinite; } .main_cont { height: 100%; margin-top: 1.6667vw; overflow-y: auto; gap: 0.4167vw; } .main_cont::-webkit-scrollbar { display: none; } .line_rev { width: 5.9375vw; height: 1.4583vw; animation: fadeInOut 1s infinite; } .pannel_r { justify-content: space-between; } @media (min-width: 2560px) { .container { position: absolute; width: 41.8519vh; height: 41.4814vh; border-radius: 1.4814vh; padding: 2.2222vh; background-image: url('../images/bg.png'); background-size: 100% 100%; } .min_box { width: 2.3148vh; height: 2.3148vh; border-radius: 0.2779vh; background-image: url('../images/min_box.png'); background-size: 100% 100%; } .min_box svg { width: 1.4814vh; } .name_ui span { font-size: 2.9631vh; font-family: 'Bold'; letter-spacing: -0.06em; text-shadow: 0 0 3.1484vh rgba(255, 255, 255, 0.45); } .name_ui { gap: 0.7408vh; } .short_description { font-size: 1.2964vh; font-family: 'REGULAR'; line-height: 107%; width: 15.6037vh; letter-spacing: -0.03em; margin-left: 0.7408vh; color: rgba(255, 255, 255, 0.75); } .left_block { gap: 0; } .esc_btn { height: 2.1296vh; width: 4.4545vh; gap: 0.3703vh; background: rgba(255, 95, 97, 0.1); border-radius: 0.1853vh; font-size: 1.2964vh; font-family: 'Regular'; color: #ff5f61; text-shadow: 0 0 0.6773vh rgba(255, 95, 97, 0.75); } .esc_btn svg { width: 0.8338vh; height: 0.8338vh; } .pannel_r { width: 100%; height: 4.4444vh; background-image: url('../images/pannel.png'); background-size: 100% 100%; border-radius: 0.3703vh; padding: 1.1111vh } .min_r { width: 2.3047vh; height: 2.3047vh; background-image: url('../images/min_box.png'); background-size: 100% 100%; border-radius: 0.2779vh; box-shadow: 0 0 2.3146vh rgba(255, 143, 145, 0.15); } .min_r svg { width: 1.4814vh; height: 1.4814vh; } .row_r { margin-left: 0.7408vh; } .price { height: 2.1296vh; border: 0.0924vh solid #d4ff5f; border-radius: 0.1849vh; box-shadow: 0 0.3698vh 2.0373vh rgba(212, 255, 95, 0.35); background: linear-gradient(180deg, #d4ff5f 0%, #7f9939 100%); padding: 0.3698vh 0.4622vh; font-size: 1.2964vh; font-family: 'SemiBold'; letter-spacing: -0.04em; color: rgba(0, 0, 0, 0.75); } .button { width: 2.1296vh; height: 2.1296vh; border-radius: 0.2779vh; cursor: pointer; transition: all 0.3s ease; border: 0.0924vh solid #ff8f91; box-shadow: 0 0.7413vh 3.056vh rgba(255, 143, 145, 0.15); background: linear-gradient(180deg, #ff8f91 0%, #c77173 100%); } .button svg { width: 1.4814vh; height: 1.4814vh; } .button:hover { transform: translateY(0.1778vh); box-shadow: 0 0.7413vh 3.056vh rgba(255, 143, 145, 0.35); } .button:active { opacity: 0.75; } .row_r span:first-child { font-size: 1.2964vh; font-family: 'Regular'; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.5); } .row_r span:last-child { font-size: 1.2964vh; font-family: 'SemiBold'; letter-spacing: -0.04em; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); } .r_bl { gap: 0.7408vh; } .main_cont { height: 100%; margin-top: 2.9631vh; overflow-y: auto; gap: 0.7408vh; } .main_cont::-webkit-scrollbar { display: none; } .line_rev { width: 10.5556vh; height: 2.5925vh; animation: fadeInOut 1s infinite; } } .main_cont { flex-direction: column !important; width: 100% !important; } img { pointer-events: none; } .rev { flex-direction: row-reverse; } .h100 { height: 100%; } .space { display: flex; justify-content: space-between; } .w100 { width: 100%; } .tc { text-align: center; } .clmn { display: flex; flex-direction: column; } .flex { display: flex; } .alcn { display: flex; align-items: center; } .jlcn { display: flex; align-items: center; justify-content: center; }