* { 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; } .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; } .row_tx { text-align: center; } .flex_tx span:first-child { font-size: 1.25vw; font-family: 'Bold'; text-shadow: 0 0 1.771vw rgba(255, 255, 255, 0.15); letter-spacing: -0.04em; } .flex_tx span:last-child { font-size: 1.6667vw; font-family: 'Bold'; color: #b8e7ff; transform: skew(-10deg); letter-spacing: -0.06em; margin-left: -0.2042vw; text-shadow: 0 0 1.302vw rgba(184, 231, 255, 0.35); } .description_tx { font-size: 0.7292vw; font-family: 'Regular'; max-width: 20.3125vw; text-align: center; color: rgba(255, 255, 255, 0.75); letter-spacing: -0.02em; } .link_box { height: 2.3958vw; background: rgba(0, 0, 0, 0.25); border-radius: 2.396vw; min-width: 10.1563vw; gap: 0.417vw; padding: 0.156vw 0.833vw 0.156vw 0.373vw; } .min_box_l { width: 1.5625vw; height: 1.5625vw; border-radius: 100%; border: 0.052vw solid #b8e7ff; box-shadow: 0 0.417vw 1.719vw rgba(184, 231, 255, 0.35); background: linear-gradient(180deg, #b8e7ff 0%, #6e8b99 100%); } .min_box_l svg { width: 0.8333vw; height: 0.8333vw; } .row_link { text-align: left; } .row_link span:first-child { font-size: 0.7292vw; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .row_link span:last-child { font-size: 0.8333vw; font-family: 'SemiBold'; margin-top: -0.0721vw; letter-spacing: -0.03em; text-shadow: 0 0 1.094vw rgba(255, 255, 255, 0.25); } .row_tx { margin-top: 0.625vw; } .flex_links { gap: 0.625vw; margin-top: 1.25vw; } .main_cont { position: absolute; bottom: 2.5vw; } .form { background-image: url('../images/bg.png'); background-size: 100% 100%; } @media (min-width: 2560px) { .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; } .row_tx { text-align: center; } .flex_tx span:first-child { font-size: 2.2222vh; font-family: 'Bold'; text-shadow: 0 0 3.1484vh rgba(255, 255, 255, 0.15); letter-spacing: -0.04em; } .flex_tx span:last-child { font-size: 2.9631vh; font-family: 'Bold'; color: #b8e7ff; transform: skew(-10deg); letter-spacing: -0.06em; margin-left: -0.3631vh; text-shadow: 0 0 2.3146vh rgba(184, 231, 255, 0.35); } .description_tx { font-size: 1.2964vh; font-family: 'Regular'; max-width: 36.1111vh; text-align: center; color: rgba(255, 255, 255, 0.75); letter-spacing: -0.02em; } .link_box { height: 4.2592vh; background: rgba(0, 0, 0, 0.25); border-radius: 4.2595vh; min-width: 18.0556vh; gap: 0.7413vh; padding: 0.2773vh 1.4809vh 0.2773vh 0.6631vh; } .min_box_l { width: 2.7778vh; height: 2.7778vh; border-radius: 100%; border: 0.0924vh solid #b8e7ff; box-shadow: 0 0.7413vh 3.056vh rgba(184, 231, 255, 0.35); background: linear-gradient(180deg, #b8e7ff 0%, #6e8b99 100%); } .min_box_l svg { width: 1.4814vh; height: 1.4814vh; } .row_link { text-align: left; } .row_link span:first-child { font-size: 1.2964vh; font-family: 'Regular'; color: rgba(255, 255, 255, 0.5); } .row_link span:last-child { font-size: 1.4814vh; font-family: 'SemiBold'; margin-top: -0.1281vh; letter-spacing: -0.03em; text-shadow: 0 0 1.9449vh rgba(255, 255, 255, 0.25); } .row_tx { margin-top: 1.1111vh; } .flex_links { gap: 1.1111vh; margin-top: 2.2222vh; } .main_cont { position: absolute; bottom: 4.4444vh; } .form { background-image: url('../images/bg.png'); background-size: 100% 100%; } } 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; }