/* Basic setting START */
/* Basic setting END */
/* Typography Setting START */
/* Typography Setting END */
/* Input_text Setting START */
/* Input_text Setting END */
/* Input_text 변형 모음 START */
/* Input_text Clear 버튼 기능 추가 START */
/* Input_text Clear 버튼 기능 추가 END */
/* Input_text Search 버튼 스타일 START */
/* Input_text Search 버튼 스타일 END */
/* Input_text 변형 모음 END */
/* Input_Date Setting START */
/* Input_Date Setting END */
/* Textarea Setting START */
/* Textarea Setting END */
/* Select Setting START */
/* Select Setting END */
/* Redefining Select2 Styles START */
/* Redefining Select2 Styles END */
/* Input_checkbox Setting START */
/* Input_checkbox Setting END */
/* DataTables style START */
/* DataTables style END */
/* Button & START */
/* Button & END */
/* RankingStar style START */
/* RankingStar style END */
/* @media all and (max-width:1400px) padding: 50px; */
/* @media all and (max-width:1200px) padding: 50px; */
/* @media all and (max-width:1024px) padding: 45px; */
/* @media all and (max-width:768px) padding: 35px; */
/* @media all and (max-width:480px) padding: 25px; */
/* Basic setting START */
@font-face {
font-family: 'NanumSquare';
font-weight: 300;
src: url('../font/NanumSquareL.eot'),
url('../font/NanumSquareL.eot?#iefix') format('embedded-opentype'),
url('../font/NanumSquareL.woff2') format('woff2'),
url('../font/NanumSquareL.woff') format('woff'),
url('../font/NanumSquareL.ttf') format('truetype');
}
@font-face {
font-family: 'NanumSquare';
font-weight: 400;
src: url('../font/NanumSquareR.eot'),
url('../font/NanumSquareR.eot?#iefix') format('embedded-opentype'),
url('../font/NanumSquareR.woff2') format('woff2'),
url('../font/NanumSquareR.woff') format('woff'),
url('../font/NanumSquareR.ttf') format('truetype');
}
@font-face {
font-family: 'NanumSquare';
font-weight: 700;
src: url('../font/NanumSquareB.eot'),
url('../font/NanumSquareB.eot?#iefix') format('embedded-opentype'),
url('../font/NanumSquareB.woff2') format('woff2'),
url('../font/NanumSquareB.woff') format('woff'),
url('../font/NanumSquareB.ttf') format('truetype');
}
@font-face {
font-family: 'NanumSquare';
font-weight: 800;
src: url('../font/NanumSquareEB.eot'),
url('../font/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
url('../font/NanumSquareEB.woff2') format('woff2'),
url('../font/NanumSquareEB.woff') format('woff'),
url('../font/NanumSquareEB.ttf') format('truetype');
}
:root {
--color_black: #000000;
--color_white: #FFFFFF;
--color_transparent: rgba(255, 255, 255, 0.0);
--color_red: #F02F28;
--color_yellow: #F9B310;
--color_main: #FE1682;
--color_sub_01: #E733C8;
--color_sub_02: #E84375;
--color_sub_03: #E0BC49;
--color_sub_04: #7B73EF;
--color_sub_05: #F89064;
--color_bg_main: #FFE9F5;
--color_bg_gray: #F9F9F9;
--color_bg_dark: #2C2C2C;
--color_bg_disabled: #F5F5F5;
--color_bg_bt_disabled: #C0C0C0;
--color_bg_disabled_dark: #C1C0C0;
--color_bg_table_header: #F7F7F7;
--color_bg_table_seleced: #EEF0FC;
--color_bg_barchart: #E6E6E6;
--color_bg_toggle: #EAEAEA;
--color_bg_toggle_active: #FFE6FA;
/* 타이틀 서브타이틀 본문 */
--color_text_basic: #222222;
/* 서브본문 */
--color_text_sub: #878787;
--color_text_sub_02: #FF94ED;
/* 테이블 타이틀 */
--color_text_table_title: #616161;
/* 비활성화(버튼, 체크박스/라디오 등) */
--color_text_disabled: #959595;
/* 비활성화(버튼, 체크박스/라디오 등) */
--color_text_placeholder: #B7B7B7;
--color_line_normal: #EAECF1;
--color_line_light: #F5F5F5;
--color_line_bt: #A8B2C8;
--color_line_bt_disabled: #DEE2EA;
--color_line_table_normal: #EAECF1;
--color_line_table_dark: #CACFDC;
--color_line_hover: #E7A7BD;
--color_line_active: #E733C8;
--color_line_b_light: #E373C3;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
font-family: 'Pretendard', Arial, sans-serif;
color: var(--color_text_basic);
-webkit-font-smoothing: antialiased; /* Webkit 기반 브라우저 (Chrome, Safari) */
-moz-osx-font-smoothing: grayscale; /* Firefox용 */
word-break: keep-all;
}
/* 스크롤바 커스텀 */
@media screen and (min-width: 1024px) {
*::-webkit-scrollbar {
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-thumb {
background-color: #CCCCCC;
border-radius: 4px;
/* border-radius: 10px; */
background-clip: padding-box;
border: 2px solid transparent;
}
*::-webkit-scrollbar-track {
background-color: #F4F4F4;
border-radius: 10px;
box-shadow: inset 0px 0px 5px white;
}
}
/* Basic setting END */
/* Typography Setting START */
h1, h2, h3{
font-weight: 800;
line-height: 1.3em;
color: var(--color_text_basic);
}
h4, h5, h6 {
font-weight: 700;
line-height: 1.3em;
color: var(--color_text_basic);
}
h1 {
font-size: 50px;
}
h2 {
font-size: 46px;
}
h3 {
font-size: 34px;
}
h4 {
font-size: 25px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
p {
font-size: 15px;
font-weight: 400;
line-height: 1.3em;
color: var(--color_text_basic);
}
/* Typography Setting END */
/* Input_text Setting START */
input[type="text"],
input[type="password"] {
padding: 2px 8px;
height: 28px;
border: 1px solid var(--color_line_normal);
border-radius: 4px;
font-size: 14px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_basic);
transition: all 0.3s ease-in-out;
}
input[type="text"]::placeholder,
input[type="password"]::placeholder {
color: var(--color_text_placeholder);
}
input[type="text"]:-moz-placeholder,
input[type="password"]:-moz-placeholder {
color: var(--color_text_placeholder);
}
input[type="text"]::-ms-input-placeholder,
input[type="password"]::-ms-input-placeholder {
color: var(--color_text_placeholder);
}
input[type="text"]:hover:not([disabled]):not([readonly]):not(:focus):not(:active),
input[type="password"]:hover:not([disabled]):not([readonly]):not(:focus):not(:active) {
border-color: var(--color_line_hover);
outline: none;
}
input[type="text"]:focus:not([disabled]):not([readonly]),
input[type="password"]:focus:not([disabled]):not([readonly]),
input[type="text"]:focus-visible:not([disabled]):not([readonly]),
input[type="password"]:focus-visible:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
input[type="text"]:active:not([disabled]):not([readonly]),
input[type="password"]:active:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="text"][readonly],
input[type="password"][readonly] {
cursor: default;
background-color: var(--color_bg_disabled);
}
input[type="text"][readonly],
input[type="password"][readonly],
input[type="text"][readonly],
input[type="password"][readonly] {
border-color: var(--color_line_normal);
background-color: var(--color_white);
outline: none;
}
/* Input_text Setting END */
/* Input_text 변형 모음 START */
/* Input_text Clear 버튼 기능 추가 START */
.bs_input_clear {
position: relative;
height: auto;
}
.bs_input_clear input[type="text"],
.bs_input_clear input[type="password"] {
padding-right: 30px;
width: 100%;
}
.bs_input_clear::after {
content: "";
width: 28px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
z-index: -1;
background: center center / 0px 0px url(../img/icon_02_cancel.svg) no-repeat;
opacity: 0.7;
transition: all 0.2s ease-in-out;
}
.bs_input_clear.has_text::after {
z-index: 2;
background: center center / 10px 10px url(../img/icon_02_cancel.svg) no-repeat;
opacity: 0.7;
}
/* Input_text Clear 버튼 기능 추가 END */
/* Input_text Search 버튼 스타일 START */
.bs_input_search {
position: relative;
height: auto;
}
.bs_input_search input[type="text"],
.bs_input_search input[type="password"] {
padding-right: 30px;
}
.bs_input_search_bt {
border: none;
background-color: var(--color_transparent);
width: 28px;
height: 100%;
position: absolute;
right: 0px;
top: 0px;
cursor: pointer;
z-index: 2;
background: center center / 14px 14px url(../img/icon_03_search.svg) no-repeat;
opacity: 0.7;
}
/* Input_text Search 버튼 스타일 END */
/* Input_text 변형 모음 END */
/* Input_Date Setting START */
input[type="date"] {
-webkit-appearance: none; /* 기본 스타일 제거 (웹킷 브라우저) */
-moz-appearance: none; /* 기본 스타일 제거 (파이어폭스) */
appearance: none; /* 기본 스타일 제거 */
position: relative;
padding: 2px 8px; /* 클릭 영역 확장 */
padding-right: 40px;
height: 28px;
border: 1px solid var(--color_line_normal);
border-radius: 4px;
font-size: 12px;
font-weight: 500;
line-height: 1em;
color: #000000;
transition: all 0.3s ease-in-out;
/* background: url('../img/icon_04_calendar.svg') no-repeat right 10px center;
background-size: 16px; */
cursor: pointer;
}
input[type="date"]::after {
content: '';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 28px;
background: center center / contain url(../img/icon_04_calendar.svg) no-repeat;
opacity: 0.7; /* 투명도 설정 */
pointer-events: none; /* 클릭 방지 */
}
/* 기본 달력 아이콘 제거 */
input[type="date"]::-webkit-calendar-picker-indicator {
position: relative;
z-index: 2;
opacity: 0; /* 투명하게 처리 */
width: calc(100% + 16px); /* 전체 영역 클릭 가능하게 확장 */
height: 28px;
flex: calc(100% + 16px) 0 0;
transform: translate(calc(-100% + 8px), 0);
cursor: pointer;
}
input[type="date"]::-webkit-datetime-edit {
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 100%;
height: auto;
flex: 100% 0 0;
}
input[type="date"]::placeholder-shown {
color: var(--color_text_placeholder); /* 원하는 색상으로 변경 */
}
input[type="date"]::-moz-placeholder-shown { /* Firefox 18- */
color: var(--color_text_placeholder); /* 원하는 색상으로 변경 */
}
input[type="date"]::-moz-placeholder-shown { /* Firefox 19+ */
color: var(--color_text_placeholder); /* 원하는 색상으로 변경 */
}
input[type="date"]::-ms-input-placeholder-shown { /* Internet Explorer 10-11 */
color: var(--color_text_placeholder); /* 원하는 색상으로 변경 */
}
input[type="date"]::-ms-input-placeholder-shown { /* Microsoft Edge */
color: var(--color_text_placeholder); /* 원하는 색상으로 변경 */
}
input[type="date"]:hover:not([disabled]):not([readonly]):not(:focus):not(:active) {
border-color: var(--color_line_hover);
outline: none;
}
input[type="date"]:focus:not([disabled]):not([readonly]),
input[type="date"]:focus-visible:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
input[type="date"]:active:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
input[type="date"][disabled],
input[type="date"][readonly] {
cursor: default;
background-color: var(--color_bg_disabled);
}
input[type="date"][readonly],
input[type="date"][readonly] {
border-color: var(--color_line_normal);
background-color: var(--color_white);
outline: none;
}
/* Input_Date Setting END */
/* Textarea Setting START */
textarea {
padding: 6px 8px;
min-height: 28px;
max-width: 100%;
min-width: 30px;
border: 1px solid var(--color_line_normal);
border-radius: 4px;
font-size: 14px;
font-weight: 400;
line-height: 1.3em;
color: var(--color_text_basic);
transition: border 0.3s ease-in-out;
}
textarea::placeholder {
color: var(--color_text_placeholder);
}
textarea:-moz-placeholder {
color: var(--color_text_placeholder);
}
textarea::-ms-input-placeholder {
color: var(--color_text_placeholder);
}
textarea:hover:not([disabled]):not([readonly]):not(:focus):not(:active) {
border-color: var(--color_line_hover);
outline: none;
}
textarea:focus-visible:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
textarea:active:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
textarea[readonly] {
cursor: default;
background-color: var(--color_white);
}
textarea[readonly]:focus-visible {
border-color: var(--color_line_normal);
background-color: var(--color_white);
outline: none;
}
.bs_tcount {
height: auto;
}
.bs_tcount textarea {
padding-bottom: 40px;
resize: none;
}
.bs_tcount_count {
padding: 3px;
font-size: 11px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_sub);
text-align: right;
}
/* Textarea Setting END */
/* Select Setting START */
select {
padding: 2px 8px;
padding-right: 30px;
height: 28px;
border: 1px solid var(--color_line_normal);
border-radius: 4px;
font-size: 12px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_basic);
transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
/* 화살표 없애기 */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* 화살표 아이콘 추가 */
background-image: url('../img/icon_06_arrow_down.svg');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px;
padding-right: 30px;
}
select.select_open {
background-image: url('../img/icon_05_arrow_up.svg');
}
select::placeholder {
color: var(--color_text_placeholder);
}
select[type="text"]:-moz-placeholder {
color: var(--color_text_placeholder);
}
select::-ms-input-placeholder {
color: var(--color_text_placeholder);
}
select:hover:not([disabled]):not([readonly]):not(:focus):not(:active) {
border-color: var(--color_line_hover);
outline: none;
}
select:focus:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
select:active:not([disabled]):not([readonly]) {
border-color: var(--color_line_active);
outline: none;
}
select[disabled] {
cursor: default;
background-color: var(--color_bg_disabled);
}
select[readonly] {
border-color: var(--color_line_normal);
background-color: var(--color_white);
outline: none;
}
option {
color: var(--color_text_basic);
}
/* Select Setting END */
/* Redefining Select2 Styles START */
.bs_select2_ver01 {
width: auto;
height: 28px;
overflow: hidden;
}
.bs_select2_ver01 select {
top: 0px;
}
.bs_select2_ver01
.select2-container--default
.select2-selection--single {
background-color: var(--color_white);
border: 1px solid var(--color_line_normal);
border-radius: 4px;
}
.bs_select2_ver01:hover
.select2-container--default
.select2-selection--single {
border: 1px solid var(--color_line_hover);
}
.bs_select2_ver01
.select2-container--default.select2-container--open
.select2-selection--single,
.bs_select2_ver01:hover
.select2-container--default.select2-container--open
.select2-selection--single {
border: 1px solid var(--color_line_active);
}
.bs_select2_ver01
.select2-container--default
.select2-selection--single
.select2-selection__rendered {
height: 100%;
padding-left: 8px;
padding-right: 30px;
font-size: 12px;
font-weight: 400;
color: var(--color_text_basic);
}
.bs_select2_ver01
.select2-container--default
.select2-selection--single
.select2-selection__arrow {
right: 15px;
width: 15px;
}
.bs_select2_ver01
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b {
border: none;
width: 100%;
height: 100%;
position: absolute;
margin: 0;
top: 0;
left: auto;
box-sizing: border-box;
background-image: url('../img/icon_06_arrow_down.svg');
background-repeat: no-repeat;
background-position: center center;
background-size: 10px;
transform: rotate(0deg);
transition: transform 0.3s ease-in-out;
}
.bs_select2_ver01
.select2-container--default.select2-container--open
.select2-selection--single
.select2-selection__arrow
b {
transform: rotate(180deg);
}
.bs_select2_ver01
.select2-container {
width: 100% !important;
height: 100% !important;
}
.bs_select2_ver01
.select2-container
.selection {
display: inline-block;
width: 100% !important;
height: 100% !important;
}
.bs_select2_ver01
.select2-container
.selection {
display: inline-block;
width: 100% !important;
height: 100% !important;
}
.bs_select2_ver01 select:disabled +
.select2-container .select2-selection--single {
background-color: var(--color_bg_disabled);
}
.bs_select2_ver01
.select2-container--default
.select2-selection--multiple {
padding-left: 8px;
padding-right: 30px;
background-color: var(--color_white);
border: 1px solid var(--color_line_normal);
border-radius: 4px;
height: 100%;
max-height: 100%;
min-height: auto;
/* cursor: pointer; */
}
.bs_select2_ver01:hover
.select2-container--default
.select2-selection--multiple {
border: 1px solid var(--color_line_hover);
}
.bs_select2_ver01
.select2-container--default.select2-container--open
.select2-selection--multiple,
.bs_select2_ver01:hover
.select2-container--default.select2-container--open
.select2-selection--multiple {
border: 1px solid var(--color_line_active);
}
.bs_select2_ver01
.select2-container--default
.select2-selection--multiple::after {
content: '';
width: 28px;
height: 100%;
position: absolute;
right: 10px;
top: 0;
background: center center / 10px 10px url(../img/icon_06_arrow_down.svg) no-repeat;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.bs_select2_ver01
.select2-container--default.select2-container--open
.select2-selection--multiple::after {
transform: rotate(180deg);
}
.select2-container--default
.select2-selection--multiple
.select2-selection__rendered {
width: calc(100% - 5px);
height: 100%;
margin: 0;
padding: 3px 0;
display: inline-flex;
flex-wrap: nowrap;
gap: 5px;
justify-content: flex-start;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__rendered
.select2-selection__choice {
width: auto;
height: 100%;
margin: 0;
padding: 0px 5px;
background-color: var(--color_bg_gray);
border: none;
border-radius: 3px;
cursor: default;
float: none;
font-size: 12px;
font-weight: 400;
color: var(--color_text_basic);
line-height: 1em;
display: inline-flex;
justify-content: flex-start;
align-items: center;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__rendered
.select2-search {
flex: 1 0 0;
font-size: 12px;
font-weight: 400;
color: var(--color_text_placeholder);
}
.bs_select2_ver01
.select2-container--default
.select2-search--inline
.select2-search__field {
width: 100% !important;
margin: 0;
}
.select2-container--default
.select2-selection--multiple
.select2-selection__rendered
.select2-selection__clear {
margin: 0;
padding: 0;
width: auto;
height: 100%;
flex: 10px 0 0;
cursor: pointer;
float: none;
font-weight: bold;
color: var(--color_transparent);
background: center center / 8px 8px url(../img/icon_02_cancel.svg) no-repeat;
}
/* .bs_select2_ver01
.select2-container--default.select2-container--open {} */
/* 기존 스타일 변경 */
.select2-container--default
.select2-search--dropdown
.select2-search__field {
padding: 2px 8px !important;
width: 100% !important;
height: 28px !important;
border: 1px solid var(--color_line_normal) !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 400 !important;
line-height: 1em !important;
color: var(--color_text_basic) !important;
transition: all 0.3s ease-in-out !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field::placeholder {
color: var(--color_text_placeholder) !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field:-moz-placeholder {
color: var(--color_text_placeholder) !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field::-ms-input-placeholder {
color: var(--color_text_placeholder) !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field:not([readonly]):not(:focus):not(:active) {
border-color: var(--color_line_hover) !important;
outline: none !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field:focus:not([disabled]):not([readonly]) {
border-color: var(--color_line_active) !important;
outline: none !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field:active:not([disabled]):not([readonly]) {
border-color: var(--color_line_active) !important;
outline: none !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field[disabled] {
cursor: default !important;
background-color: var(--color_bg_disabled) !important;
}
.select2-container--default
.select2-search--dropdown
.select2-search__field[readonly] {
border-color: var(--color_line_normal) !important;
background-color: var(--color_white) !important;
outline: none !important;
}
.select2-container--default
.select2-results__option {
padding: 6px 8px;
font-size: 12px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_basic);
transition: all 0.3s ease-in-out;
}
.select2-container--default
.select2-results__option--highlighted[aria-selected] {
background-color: var(--color_bg_gray);
color: var(--color_text_basic);
}
.select2-container--default
.select2-results__option[aria-selected=true] {
background-color: var(--color_bg_main);
color: var(--color_text_basic);
font-weight: 600;
}
/* Redefining Select2 Styles END */
/* Input_checkbox Setting START */
input[type="checkbox"] {
position: relative;
appearance: none;
/* 기본 브라우저 스타일 제거 */
-webkit-appearance: none;
-moz-appearance: none;
width: 16px;
height: 16px;
overflow: hidden;
border: 1px solid var(--color_line_normal);
border-radius: 4px;
outline: none;
cursor: pointer;
transition: all 0.1s ease-in-out;
background-color: var(--color_white);
}
input[type="checkbox"]::before {
content: '';
display: inline-block;
width: 0%;
height: 0%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: center center / 8px 8px url(../img/icon_27_checked_white.svg) no-repeat;
background-color: rgba(255, 255, 255, 0.0);
transition: all 0.3s ease-in-out;
}
input[type="checkbox"]:checked {
border: 1px solid var(--color_line_active);
background-color: var(--color_main);
}
input[type="checkbox"]:checked::before {
width: 100%;
height: 100%;
}
input[type="checkbox"]:hover:not([disabled]):not([readonly]):not(:checked) {
border-color: var(--color_line_hover);
}
/* Input_checkbox Setting END */
/* DataTables style START */
.dt_style {
width: 100%;
height: 100%;
}
.dt_style
.dataTables_filter {
padding-bottom: 15px;
}
.dt_style
.dataTables_filter
input[type="search"] {
margin-left: 10px;
}
.dt_style
thead
tr
th {
padding: 4px 6px;
border-right: 1px solid var(--color_line_table_normal);
border-bottom: none;
background-color: var(--color_bg_normal);
font-size: 16px;
font-weight: 500;
line-height: 1.3em;
color: var(--color_text_table_title);
text-align: left;
height: 37px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dt_style
thead
th:last-of-type {
border-right: none;
}
.dt_style
thead
tr:first-of-type
th {
border-top: 1px solid var(--color_line_table_dark);
}
.dt_style
thead
tr
th:after {
font-size: 9px !important;
}
.dt_style
thead
tr
th:before {
font-size: 9px !important;
}
.dt_style
tbody
tr
td {
padding: 4px 6px;
border: 1px solid rgba(255, 255, 255, 0.0);
border-right: 1px solid var(--color_line_table_normal);
border-bottom: 1px solid var(--color_line_table_normal);
outline: 1px solid rgba(255, 255, 255, 0.0);
width: auto;
white-space: nowrap;
font-size: 15px;
color: var(--color_text_basic);
font-weight: 400;
text-align: left;
background-color: var(--color_white);
position: relative;
z-index: 1;
}
.dt_style
tbody
tr
td:last-of-type {
border-right: none;
}
.dt_style
tbody
tr:first-of-type
td {
border-top: 1px solid var(--color_line_table_dark);
}
.dt_style
tbody
tr:last-of-type
td {
border-bottom: 1px solid var(--color_line_table_dark);
}
.dt_style
.dataTables_wrapper.no-footer
.dataTables_scrollBody {
border-bottom: none;
}
.dt_style
table.dataTable {
border-bottom: none;
}
/* DataTables style END */
/* Button & START */
button, a {
-webkit-tap-highlight-color: transparent; /* 모바일 터치 하이라이트 제거 */
}
.bs_bt {
height: auto;
position: relative;
overflow: hidden;
padding: 10px 15px;
border: none;
border-radius: 5px;
background-color: var(--color_main);
color: var(--color_white);
cursor: pointer;
font-size: 16px;
font-weight: 700;
line-height: 1em;
display: inline-flex;
justify-content: center;
align-items: center;
}
.bs_bt.gradient_ver01 {
background: linear-gradient(to right, var(--color_gra_01_01), var(--color_gra_01_02));
}
.bs_bt.white_ver {
border: 1px solid var(--color_line_normal);
background: var(--color_white);
color: var(--color_text_basic);
}
.bs_bt_icon {
margin-right: 10px;
width: 26px;
height: 26px;
}
.bt_ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
background-color: rgba(255, 255, 255, 0.5);
opacity: 1;
transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
.white_ver .bt_ripple {
background-color: rgba(0, 0, 0, 0.1);
}
.bt_ripple.active {
transform: scale(2); /* Ripple 효과 크기 조절 */
opacity: 0;
}
/* Button & END */
/* RankingStar style START */
.rk_login {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
background-color: var(--color_white);
overflow: auto;
}
@supports (height: 100dvh) {
.rk_login {
height: 100dvh;
}
}
.rk_login_logo {
padding: 25px;
padding-top: 50px;
width: 100%;
height: auto;
flex: 1 0 0;
display: flex;
justify-content: center;
align-items: center;
}
.rk_login_logo_img {
width: auto;
max-width: 80px;
height: auto;
flex: auto 0 0;
}
.rk_login_logo_img
img {
width: 100%;
height: auto;
}
.rk_login_con {
padding: 0 15px;
padding-bottom: 0px;
width: 100%;
height: auto;
flex: auto 0 0;
}
.rk_login_con_title {
padding-bottom: 50px;
font-weight: 300;
line-height: 1em;
color: var(--color_main);
text-align: left;
}
.rk_login_con_li {
padding-bottom: 25px;
}
.rk_login_con_li_title {
padding-bottom: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.rk_login_con_li_title_icon {
flex: 16px 0 0;
height: auto;
}
.rk_login_con_li_title_icon svg {
width: 100%;
height: auto;
fill: var(--color_sub_04);
}
.rk_login_con_li_title_text {
flex: 1 0 0;
font-size: 16px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_basic);
}
.rk_login_con_li_title_text
sup {
color: var(--color_red);
line-height: 0;
}
.rk_login_con_li
.bs_input_clear {
padding-bottom: 10px;
}
.rk_login_con_li
.bs_input_clear:last-child {
padding-bottom: 0px;
}
.rk_login_con_li
.bs_input_clear
input {
height: 45px;
}
.rk_login_con_setting {
padding-bottom: 25px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
gap: 10px;
}
.rk_login_con_setting_password {
flex: auto 0 0;
font-size: 14px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_disabled);
}
.rk_login_con_setting_auto {
flex: 1 0 0;
display: inline-flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
}
.rk_login_con_setting_auto_text {
font-size: 14px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_basic);
}
.rk_login_con_button {
background-image: linear-gradient(to right bottom, var(--color_sub_01), var(--color_sub_02), var(--color_sub_03));
width: 100%;
min-height: 50px;
}
.rk_login_con_button.disabled {
cursor: not-allowed;
pointer-events: none;
background-image: var(--color_bg_bt_disabled);
background-color: var(--color_bg_bt_disabled);
font-weight: 400;
}
.rk_login_con_join {
padding-top: 20px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.rk_login_con_join_link {
width: auto;
height: auto;
flex: auto 0 0;
font-size: 14px;
font-weight: 700;
line-height: 1em;
color: var(--color_text_basic);
}
.rk_login_social {
padding: 25px;
padding-top: 25px;
padding-bottom: 50px;
width: 100%;
height: auto;
flex: auto 0 0;
}
.rk_login_social_boundary {
display: flex;
justify-content: flex-start;
align-items: center;
}
.rk_login_social_boundary_line {
width: auto;
height: 1px;
background-color: var(--color_line_normal);
flex: 1 0 0;
}
.rk_login_social_boundary_text {
padding: 0 10px;
font-size: 14px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_basic);
}
.rk_login_social_group {
padding-top: 50px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 25px;
}
.rk_login_social_group_button {
border-radius: 50%;
width: 50px;
height: 50px;
flex: auto 0 0;
}
@media all and (max-width: 400px) {
.rk_login_social_group {
padding-top: 25px;
gap: 20px;
}
.rk_login_social_group_button {
width: 44px;
height: 44px;
}
}
.rk_login_social_group_button.google {
background: center center / cover url(../img/social_google.svg) no-repeat;
}
.rk_login_social_group_button.facebook {
background: center center / cover url(../img/social_facebook.svg) no-repeat;
}
.rk_login_social_group_button.instagram {
background: center center / cover url(../img/social_insta.svg) no-repeat;
}
.rk_login_social_group_button.naver {
background: center center / cover url(../img/social_naver.svg) no-repeat;
}
.rk_login_social_group_button.kakao {
background: center center / cover url(../img/social_kakao.svg) no-repeat;
}
.rk_login_social_group_button.share_link {
background: center center / cover url(../img/social_share_link.svg) no-repeat;
}
.rk_register {
width: 100%;
height: 100vh;
background-color: var(--color_white);
overflow: auto;
padding-bottom: 25px;
}
@supports (height: 100dvh) {
.rk_register {
height: 100dvh;
}
}
.rk_header {
padding: 5px 15px;
width: 100%;
height: 55px;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.rk_header_back {
width: auto;
height: 20px;
flex: 20px 0 0;
display: inline-flex;
justify-content: center;
align-items: center;
border: none;
background-color: rgba(255, 255, 255, 0.0);
}
.rk_header_back:active {
animation: linear rk_ani_click_01 0.3s 1;
-webkit-animation: linear rk_ani_click_01 0.3s 1;
}
.rk_header_back
svg {
width: auto;
height: 100%;
flex: 100% 0 0;
}
.rk_header_title {
padding-right: 30px;
flex: 1 0 0;
line-height: 1em;
font-size: 20px;
color: var(--color_text_basic);
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rk_register_logo {
padding: 30px 0;
display: flex;
justify-content: center;
align-items: center;
}
.rk_register_logo
img {
width: 80px;
height: auto;
flex: auto 0 0;
}
.rk_main {
width: 100%;
height: 100vh;
overflow: auto;
position: relative;
z-index: 1;
background-color: var(--color_white);
}
@supports (height: 100dvh) {
.rk_main {
height: 100dvh;
}
}
.rk_main.gray_bg {
background-color: var(--color_bg_gray);
}
.rk_nav {
padding: 0;
width: 100%;
height: calc(65px + 0px);
height: calc(65px + constant(safe-area-inset-bottom)); /* iOS 구버전 */
height: calc(65px + env(safe-area-inset-bottom)); /* iOS 최신 및 다른 브라우저 */
overflow: visible;
position: fixed;
left: 0;
bottom: 0;
z-index: 10;
}
.rk_nav_bottom {
padding-bottom: 5px;
padding-bottom:calc(5px + constant(safe-area-inset-bottom)); /* iOS 11 이전 */
padding-bottom: calc(5px + env(safe-area-inset-bottom)); /* iOS 11+ 및 최신 브라우저 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
background-color: var(--color_white);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.rk_nav_bottom_menu_bt {
border: none;
background-color: rgba(0, 0, 0, 0.0);
background-image: linear-gradient(to right bottom, var(--color_sub_01), var(--color_sub_05));
width: auto;
height: 46px;
flex: 46px 0 0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.rk_nav_bottom_menu_bt svg {
width: 22px;
height: auto;
flex: auto 0 0;
fill: var(--color_white);
}
.rk_nav_bottom_menu_bt:active {
animation: linear rk_ani_click_01 0.3s 1;
-webkit-animation: linear rk_ani_click_01 0.3s 1;
}
.rk_nav_bottom_side {
padding: 0 15px;
flex: 1 0 0;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.rk_nav_bottom_side_li {
flex: auto 0 0;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
background-color: var(--color_transparent);
border: none;
}
.rk_nav_bottom_side_li
svg {
width: 16px;
height: auto;
fill: var(--color_text_basic);
}
.rk_nav_bottom_side_li_text {
font-size: 11px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_disabled);
}
.rk_nav_bottom_side_li:active
svg {
animation: linear rk_ani_click_02 0.3s 1;
-webkit-animation: linear rk_ani_click_02 0.3s 1;
}
.rk_nav_bottom.ver02 {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.rk_nav_bottom.ver02
.rk_nav_bottom_side {
padding: 0;
}
.rk_nav_bottom.ver02
.rk_nav_bottom_side
.rk_nav_bottom_side_li {
gap: 7px;
}
.rk_nav_bottom.ver02
.rk_nav_bottom_side
.rk_nav_bottom_side_li
svg {
width: 20px;
height: auto;
}
.rk_nav_bottom.ver02
.rk_nav_bottom_side
.rk_nav_bottom_side_li
svg,
.rk_nav_bottom.ver02
.rk_nav_bottom_side
.rk_nav_bottom_side_li
svg
path {
fill: var(--color_main);
}
.rk_nav_bottom.ver02
.rk_nav_bottom_side_li_text {
color: var(--color_text_basic);
}
.rk_nav_side {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
transform: translate(-110%, 0);
z-index: 10;
transition: all 0.3s ease-in-out;
background-color: var(--color_white);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
overflow: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.rk_nav_side.active {
transform: translate(0%, 0);
}
.rk_nav_side_top {
width: 100%;
height: auto;
flex: auto 0 0;
background-image: linear-gradient(to right bottom, var(--color_sub_01), var(--color_sub_02), var(--color_sub_03));
}
.rk_nav_side_top_close {
padding: 25px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.rk_nav_side_top_close_bt {
width: 20px;
height: 20px;
border: none;
background-color: rgba(255, 255, 255, 0.0);
}
.rk_nav_side_top_close_bt:active {
animation: linear rk_ani_click_01 0.3s 1;
-webkit-animation: linear rk_ani_click_01 0.3s 1;
}
.rk_nav_side_top_close_bt svg {
width: 100%;
height: auto;
fill: var(--color_white);
}
.rk_nav_side_top_info {
padding: 25px;
padding-top: 0;
display: flex;
justify-content: flex-start;
align-items: stretch;
gap: 25px;
}
.rk_nav_side_top_info_l {
flex: 1 0 0;
display: inline-flex;
justify-content: center;
align-items: center;
}
.rk_nav_side_top_info_l_group {
width: auto;
height: auto;
}
.rk_nav_side_top_info_l_name {
color: var(--color_white);
padding-bottom: 5px;
}
.rk_nav_side_top_info_l_email {
word-break: break-all;
font-size: 12px;
color: var(--color_white);
opacity: 0.8;
}
.rk_nav_side_top_info_line {
width: 1px;
height: auto;
background-color: var(--color_white);
opacity: 0.3;
}
.rk_nav_side_top_info_r {
flex: 1 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
}
.rk_nav_side_top_info_r_chip {
background-color: var(--color_white);
width: auto;
height: auto;
padding: 5px 10px;
border-radius: 50px;
}
.rk_nav_side_top_info_r_chip_text {
color: var(--color_main);
font-size: 14px;
font-weight: 400;
}
.rk_nav_side_top_info_r_con {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.rk_nav_side_top_info_r_con svg {
width: 20px;
height: 20px;
fill: var(--color_white);
}
.rk_nav_side_top_info_r_con_text {
font-size: 14px;
color: var(--color_white);
}
.rk_nav_side_top_button {
padding: 25px;
padding-top: 0px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 20px;
}
.rk_nav_side_top_button
button {
flex: 1 0 0;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 5px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
font-size: 14px;
font-weight: 400;
}
.rk_nav_side_top_button
button
svg {
width: 14px;
height: auto;
fill: var(--color_white);
}
.rk_nav_side_top_button_info {
background-color: var(--color_sub_04);
}
.rk_nav_side_top_button_logout.bs_bt.white_ver {
color: var(--color_sub_04);
}
.rk_nav_side_top_button_logout.bs_bt.white_ver
svg {
fill: var(--color_sub_04);
}
.rk_nav_side_body {
padding: 25px;
width: 100%;
height: auto;
flex: 1 0 0;
overflow: auto;
}
.rk_nav_side_body_title {
padding-bottom: 20px;
text-align: center;
}
.rk_nav_side_body
.bs_input_search {
margin-bottom: 20px;
width: 100%;
height: 40px;
}
.rk_nav_side_body
.bs_input_search
input[type="text"] {
width: 100%;
height: 100%;
}
.rk_nav_side_body_menu_li {
padding: 15px 0;
border-bottom: 1px solid var(--color_line_normal);
}
.rk_nav_side_body_menu_li:first-child {
padding-top: 0px;
}
.rk_nav_side_body_menu_li:last-child {
padding-bottom: 0px;
border-bottom: none;
}
.rk_nav_side_body_menu_li_link {
padding: 15px 0;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.rk_nav_side_body_menu_li_link_mic {
width: 16px;
height: auto;
flex: 16px 0 0;
}
.rk_nav_side_body_menu_li_link_mic
path {
transition: all 0.2s ease-in-out;
fill: var(--color_text_disabled);
}
.rk_nav_side_body_menu_li_link_text {
flex: 1 0 0;
font-size: 15px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_disabled);
text-align: left;
transition: all 0.2s ease-in-out;
}
.rk_nav_side_body_menu_li_link_icon {
width: 16px;
height: auto;
flex: 16px 0 0;
display: inline-flex;
justify-content: flex-start;
align-items: center;
}
.rk_nav_side_body_menu_li_link_icon
svg {
width: auto;
height: auto;
flex: 100% 0 0;
transition: all 0.2s ease-in-out;
}
.rk_nav_side_body_menu_li_link_icon
svg:first-child {
opacity: 0;
}
.rk_nav_side_body_menu_li_link_icon
svg:last-child {
transform: translate(-100%, 0);
opacity: 1;
}
.rk_nav_side_body_menu_li_link.active
.rk_nav_side_body_menu_li_link_mic path {
fill: var(--color_text_basic);
}
.rk_nav_side_body_menu_li_link.active
.rk_nav_side_body_menu_li_link_text {
color: var(--color_text_basic);
}
.rk_nav_side_body_menu_li_link.active
.rk_nav_side_body_menu_li_link_icon svg:first-child {
opacity: 1;
}
.rk_nav_side_body_menu_li_link.active
.rk_nav_side_body_menu_li_link_icon svg:last-child {
opacity: 0;
}
.rk_main_banner {
width: 100%;
height: 310px;
padding-bottom: 10px;
overflow: hidden;
}
.rk_main_banner
.swiper {
width: 100%;
height: 100%;
overflow: visible;
}
.rk_main_banner
.swiper-slide {
background-image: url(../img/m_banner_01_00.svg);
border-radius: 0 0 35px 35px;
background-color: var(--color_bg_gray);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
overflow: hidden;
display: inline-flex;
justify-content: center;
align-items: center;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rk_main_banner
.swiper-pagination-bullet.swiper-pagination-bullet-active {
background: var(--color_main);
opacity: 1.0;
}
.rk_main_banner
.swiper-pagination-bullet {
background: var(--color_bg_dark);
opacity: 0.3;
}
.rk_main_list {
padding: 0 15px;
padding-top: 15px;
}
.rk_main_list_card {
padding: 20px;
padding-bottom: 0;
margin-bottom: 25px;
width: 100%;
height: auto;
border-radius: 15px;
background-color: var(--color_white);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.rk_main_list_card:last-child {
margin-bottom: 0px;
}
.rk_main_list_card_title {
padding-bottom: 10px;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
gap: 5px;
}
.rk_main_list_card_title_chip {
padding: 0 12px;
width: auto;
min-width: 57px;
height: 20px;
border-radius: 50px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--color_main);
}
.rk_main_list_card_title_chip.done_ver {
background-color: var(--color_sub_04);
}
.rk_main_list_card_title_chip.prepare_ver {
background-color: var(--color_bg_disabled_dark);
}
.rk_main_list_card_title_chip_text {
font-size: 12px;
font-weight: 400;
line-height: 1em;
color: var(--color_white);
flex: auto 0 0;
}
.rk_main_list_card_title_text {
text-align: left;
}
.rk_main_list_card_image {
width: calc(100% + 40px);
height: 200px;
transform: translate(-20px, 0);
border-radius: 10px;
background-image: url(../img/m_card_01_00.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rk_main_list_card_info {
padding: 15px 0;
padding-bottom: 10px;
font-size: 14px;
}
.rk_main_list_card_moveto {
display: flex;
justify-content: flex-end;
align-items: center;
}
.rk_main_list_card_moveto_link {
flex: auto 0 0;
display: inline-flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
cursor: pointer;
}
.rk_main_list_card_moveto_link_text {
font-size: 14px;
font-weight: 400;
color: var(--color_sub_04);
}
.rk_main_list_card_moveto_link
svg {
width: 16px;
height: 16px;
fill: var(--color_sub_04);
}
.rk_main_title {
padding: 25px;
}
.rk_main_ssbanner{
padding: 25px 15px;
padding-top: 0;
height: 200px;
overflow: hidden;
}
.rk_main_ssbanner_slide {
width: 100%;
height: 100%;
overflow: visible;
}
.rk_main_ssbanner
.swiper {
height: 100%;
overflow: visible;
}
.rk_main_ssbanner
.swiper-slide {
height: 100%;
border-radius: 20px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--color_bg_disabled_dark);
overflow: hidden;
}
.rk_main_ssbanner_slide_inner {
width: 100%;
height: 100%;
flex: 100% 0 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rk_main_ssbanner_slide_inner.first_con_ver {
padding: 20px;
background-image: url(../img/sample_04.png);
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.rk_main_ssbanner_slide_inner
.rb_side_ver_con_title {
color: var(--color_white);
font-weight: 700;
}
.rk_main_ssbanner_slide_inner
.rb_side_ver_con_subtitle {
color: var(--color_white);
font-weight: 700;
padding-bottom: 10px;
}
.rk_main_ssbanner_slide_inner
.rb_side_ver_con_bt.bs_bt {
background-image: linear-gradient(to right bottom, var(--color_sub_01), var(--color_sub_02), var(--color_sub_03));
}
.rk_main_chipslide {
overflow: hidden;
}
.rk_main_chipslide.ver02 {
height: 75px;
padding-top: 20px;
}
.rk_main_chipslide
.swiper {
padding: 0 15px;
height: auto;
}
.rk_main_chipslide
.swiper-wrapper {
height: auto;
}
.rk_main_chipslide
.swiper-slide {
height: auto;
}
.rk_main_chipslide_bt {
border-radius: 50px;
border: 1px solid var(--color_bg_disabled);
background-color: var(--color_bg_disabled);
width: 100%;
min-height: 30px;
padding: 5px 10px;
font-size: 16px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_disabled);
transition: all 0.3s ease-in-out;
}
.rk_main_chipslide_bt.active {
border: 1px solid var(--color_main);
background-color: var(--color_white);
font-weight: 700;
color: var(--color_main);
}
.rk_main_player {
padding: 25px 15px;
}
.rk_main_player_li {
padding-top: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--color_line_normal);
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 15px;
}
.rk_main_player_li:first-child {
padding-top: 0px;
}
.rk_main_player_li:last-child {
padding-bottom: 0px;
border-bottom: none;
}
.rk_main_player_li_photo {
background-image: url(../img/no_profile.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 150px;
height: 150px;
flex: 150px 0 0;
border-radius: 10px;
}
.rk_main_player_li_profile {
flex: 1 0 0;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.rk_main_player_li_profile_info {
flex: 1 0 0;
}
.rk_main_player_li_profile_info_ranking {
padding-bottom: 15px;
}
.rk_main_player_li_profile_info_ranking.number_one {
color: var(--color_main);
}
.rk_main_player_li_profile_info_kname {
font-size: 15px;
}
.rk_main_player_li_profile_info_ename {
padding-top: 5px;
font-size: 13px;
}
.rk_main_player_li_profile_info_star {
padding-top: 15px;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.rk_main_player_li_profile_info_star
svg {
width: 20px;
height: auto;
fill: var(--color_main);
}
.rk_main_player_li_profile_info_star_name {
flex: 1 0 0;
}
.rk_main_player_li_profile_vote {
flex: auto 0 0;
}
.rk_main_player_li_profile_vote
.bs_bt {
width: 45px;
height: 45px;
border-radius: 50%;
background-color: var(--color_sub_04);
}
.rk_main_player_li_profile_vote
.bs_bt
svg {
width: auto;
height: 20px;
}
.rk_main_player_li_profile_vote_text {
padding-top: 10px;
font-size: 12px;
font-weight: 400;
line-height: 1em;
text-align: center;
}
.rk_main_profile_banner {
position: relative;
}
.rk_main_profile_banner_image {
background-image: url(../img/m_contest_list_banner_01_00.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 300px;
border-radius: 0 0 35px 35px;
}
.rk_main_profile_banner_image.large_ver {
height: 350px;
}
.rk_main_profile_banner_content {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
.rk_main_profile_banner_content_wrapper {
padding-top: 40px;
transform: translate(calc(-50vw - 0px), 0);
max-width: calc(50vw - 25px);
flex: auto 0 0;
}
.rk_main_profile_banner_content_title {
color: var(--color_white);
white-space: nowrap;
font-weight: 400;
}
.rk_main_profile_banner_content_title
span {
font-weight: 700;
}
.rk_main_profile_banner_content_deco {
padding: 15px 0;
}
.rk_main_profile_banner_content_deco_line {
width: 50px;
height: 2px;
background-color: var(--color_main);
}
.rk_main_profile_banner_content_text {
padding-bottom: 20px;
font-size: 15px;
font-weight: 400;
line-height: 1.5em;
color: var(--color_white);
white-space: nowrap;
}
.rk_main_profile_banner_content
.bs_bt {
min-width: 175px;
background-image: linear-gradient(to right bottom, var(--color_sub_01), var(--color_sub_05));
font-size: 15px;
}
.rk_main_profile_banner_content_wrapper.ver02 {
padding: 0 15px;
transform: translate(0, 0);
max-width: 100%;
flex: 100% 0 0;
}
.rk_main_profile_banner_content_text.ver02 {
white-space: normal;
line-height: 1.5em;
}
.rk_main_profile_banner_thumb {
margin-top: -70px;
padding: 0 25px;
padding-left: 35px;
padding-bottom: 25px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
gap: 20px;
}
.rk_main_profile_banner_thumb_image {
background-image: url(../img/no_profile.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 120px;
height: 120px;
flex: 120px 0 0;
border-radius: 15px;
border: 1px solid var(--color_line_normal);
}
.rk_main_profile_banner_thumb_name {
flex: 1 0 0;
}
.rk_main_profile_banner_thumb_name_kr {
font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1em;
}
.rk_main_profile_banner_thumb_name_en {
padding-top: 5px;
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--color_text_disabled);
line-height: 1em;
}
.rk_main_profile_banner_edit{
width: 90px;
height: 30px;
padding: 0;
position: absolute;
right: 20px;
top: 20px;
font-size: 14px;
}
.rk_main_profile_banner_takept {
position: absolute;
top: 15px;
right: 15px;
}
.rk_main_profile_banner_takept
input[type="checkbox"] {
position: absolute;
top: 0px;
right: 0;
z-index: 2;
width: 45px;
height: 45px;
border-radius: 50%;
opacity: 0;
-webkit-tap-highlight-color: transparent; /* iOS 및 일부 Android 브라우저 */
outline: none; /* 클릭 시 나타나는 포커스 테두리 제거 */
background-color: transparent; /* 간혹 파란색 배경이 남아있을 경우 */
}
.rk_main_profile_banner_takept
input[type="checkbox"]:active {
background-color: transparent;
}
.rk_main_profile_banner_takept_button {
position: absolute;
top: 0px;
right: 0;
z-index: 1;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: var(--color_sub_04);
transition: all 0.1s ease-in-out;
}
.rk_main_profile_banner_takept_button
svg {
width: 16px;
height: auto;
flex: 16px 0 0;
transition: all 0.1s ease-in-out;
opacity: 1;
fill: var(--color_white);
}
.rk_main_profile_banner_takept_button
svg:first-child {
transform: translateX(50%);
opacity: 0;
}
.rk_main_profile_banner_takept_button
svg:last-child {
transform: translateX(-50%);
}
.rk_main_profile_banner_takept_card {
width: auto;
height: auto;
max-width: 45px;
max-height: 45px;
padding: 15px;
padding-top: 45px;
padding-bottom: 0;
border-radius: 30px;
background-color: var(--color_white);
opacity: 0.8;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.rk_main_profile_banner_takept_card_link {
display: block;
padding: 15px 0;
border-bottom: 1px dashed var(--color_line_normal);
opacity: 0;
transition: all 0.3s ease-in-out;
}
.rk_main_profile_banner_takept_card_link_text {
padding: 0 10px;
font-size: 0px;
line-height: 1em;
color: var(--color_text_basic);
text-align: center;
transition: all 0.3s ease-in-out;
}
.rk_main_profile_banner_takept
input[type="checkbox"]:checked ~
.rk_main_profile_banner_takept_button {
background-color: var(--color_white);
}
.rk_main_profile_banner_takept
input[type="checkbox"]:checked ~
.rk_main_profile_banner_takept_button
svg {
fill: var(--color_text_basic);
}
.rk_main_profile_banner_takept
input[type="checkbox"]:checked ~
.rk_main_profile_banner_takept_button
svg:first-child {
opacity: 1;
}
.rk_main_profile_banner_takept
input[type="checkbox"]:checked ~
.rk_main_profile_banner_takept_button
svg:last-child {
opacity: 0;
}
.rk_main_profile_banner_takept
input[type="checkbox"]:checked ~
.rk_main_profile_banner_takept_card {
width: auto;
height: auto;
max-width: 250px;
max-height: 250px;
border-radius: 10px;
opacity: 1;
}
.rk_main_profile_banner_takept
input[type="checkbox"]:checked ~
.rk_main_profile_banner_takept_card
.rk_main_profile_banner_takept_card_link {
opacity: 1;
}
.rk_main_profile_banner_takept
input[type="checkbox"]:checked ~
.rk_main_profile_banner_takept_card
.rk_main_profile_banner_takept_card_link_text {
font-size: 16px;
}
.rk_main_profile_summmary {
padding: 25px 15px;
padding-top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.rk_main_profile_summmary_li {
padding: 0 5px;
border-right: 1px solid var(--color_line_normal);
flex: 1 0 0;
}
.rk_main_profile_summmary_li:last-child {
border-right: none;
}
.rk_main_profile_summmary_li_title {
padding-bottom: 10px;
font-size: 13px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_disabled);
text-align: center;
}
.rk_main_profile_summmary_li_info {
font-size: 18px;
font-weight: 700;
line-height: 1em;
color: var(--color_text_basic);
text-align: center;
}
.rk_main_profile_button {
padding: 25px 15px;
padding-top: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: center;
gap: 20px;
}
.rk_main_profile_button
.bs_bt {
flex: 1 0 0;
}
.rk_main_profile_button
.bs_bt.vote {
background-color: var(--color_sub_01);
}
.rk_main_profile_button
.bs_bt.share {
background-color: var(--color_sub_05);
}
.rk_main_profile_info {
padding: 25px 15px;
padding-top: 0;
overflow: visible;
}
.rk_main_profile_info_card {
padding: 20px;
border-radius: 15px;
background-color: var(--color_white);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.rk_main_profile_info_card_li {
padding: 15px 0;
border-bottom: 1px solid var(--color_line_light);
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.rk_main_profile_info_card_li:first-child {
padding-top: 0;
}
.rk_main_profile_info_card_li:last-child {
padding-bottom: 0px;
border-bottom: none;
}
.rk_main_profile_info_card_li_title {
font-size: 16px;
line-height: 1.3em;
color: var(--color_text_basic);
flex: 70px 0 0;
}
.rk_main_profile_info_card_li_text {
font-size: 14px;
flex: 1 0 0;
line-height: 1.5em;
}
.rk_main_profile_info_card.ver02
.rk_main_profile_info_card_li_title {
flex: 110px 0 0;
}
.rk_main_profile_message {
padding: 25px 15px;
padding-top: 0;
}
.rk_main_profile_message_card {
padding: 10px;
border-radius: 10px;
background-color: var(--color_bg_gray);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.rk_main_profile_message_card_photo {
width: 46px;
height: 46px;
flex: 46px 0 0;
border-radius: 50%;
background-image: url(../img/no_profile.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rk_main_profile_message_card_text {
font-size: 14px;
line-height: 1.3em;
}
.rk_main_profile_photo {
padding: 25px 15PX;
padding-top: 0;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
gap: 10px;
}
.rk_main_profile_photo_li {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: auto;
height: calc((100vw - 70px) / 3);
flex: calc((100% - 20px) / 3) 0 0;
border-radius: 10px;
}
.rk_main_profile_photo_li:active {
animation: linear rk_ani_click_03 0.3s 1;
-webkit-animation: linear rk_ani_click_03 0.3s 1;
}
.rk_main_profile_photo.edit_ver {
margin-top: -25px;
padding-bottom: 15px;
}
.rk_main_profile_photo.edit_ver
.rk_main_profile_photo_li:active {
animation: linear rk_ani_click_00 0.3s 1;
-webkit-animation: linear rk_ani_click_00 0.3s 1;
}
.rk_main_profile_photo_li_remove {
width: 24px;
height: 24px;
border-radius: 50%;
padding: 0;
position: absolute;
top: 5px;
right: 5px;
background-color: var(--color_text_basic);
}
.rk_main_profile_photo_li_remove
svg {
width: 14px;
height: 14px;
fill: var(--color_white);
}
.rk_main_profile_photo_add.bs_bt.white_ver {
border: 1px dashed var(--color_line_normal);
position: relative;
width: auto;
/* height: calc((100vw - 70px) / 3);
flex: calc((100% - 20px) / 3) 0 0; */
height: 140px;
flex: 140px 0 0;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
}
.rk_main_profile_photo_add
svg {
width: auto;
height: 20px;
flex: 20px 0 0;
fill: var(--color_text_sub);
}
.rk_main_profile_photo_add_text {
font-size: 11px;
line-height: 1em;
color: var(--color_text_sub);
}
.rk_main_profile_gallery {
padding: 25px 5px;
padding-top: 0;
}
.rk_main_profile_gallery_wrapper
a {
border-radius: 10px;
}
.rk_main_profile_gallery
.rk_main_basic_title {
padding: 0 10px;
padding-bottom: 0px;
}
.rk_popup {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
@supports (height: 100dvh) {
.rk_popup {
height: 100dvh;
}
}
.rk_popup_wrapper {
position: relative;
background-color: rgba(0, 0, 0, 0.8);
width: 0vh;
height: 0vh;
flex: auto 0 0;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.rk_popup_close {
width: 100%;
height: auto;
padding: 25px;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: flex-end;
align-items: center;
z-index: 2;
opacity: 0;
}
.rk_popup_close_bt {
padding: 0;
width: 25px;
height: 25px;
flex: auto 0 0;
border: none;
overflow: visible;
background-color: rgba(255, 255, 255, 0.0);
}
.rk_popup_close_bt
svg {
width: 100%;
height: auto;
fill: var(--color_white);
}
.rk_popup_close_bt:active {
animation: linear rk_ani_click_02 0.3s 1;
-webkit-animation: linear rk_ani_click_02 0.3s 1;
}
.rk_popup_slide {
padding-top: 75px;
padding-bottom: 45px;
width: 100vw;
height: 100vh;
opacity: 0;
}
@supports (height: 100dvh) {
.rk_popup_slide {
height: 100dvh;
}
}
.rk_popup_swiper_01 {
padding: 0;
height: calc(100%);
overflow: visible;
}
.rk_popup_slide
.swiper-slide {
border-radius: 0px;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.rk_popup_slide
.swiper-button-next,
.rk_popup_slide
.swiper-button-prev {
display: none;
}
.rk_popup_slide
.swiper-pagination {
font-size: 13px;
font-weight: 300;
color: var(--color_white);
position: absolute;
bottom: -30px;
}
.rk_popup_card {
opacity: 0;
padding: 20px;
border-radius: 15px;
background-color: var(--color_white);
flex: calc(100% - 50px) 0 0;
max-height: calc(100vh - 150px);
overflow: auto;
}
@supports (height: 100dvh) {
.rk_popup_card {
max-height: calc(100dvh - 150px);
}
}
.rk_popup_card_title {
padding-bottom: 50px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 15px;
}
.rk_popup_card_title_circle {
width: 70px;
height: 70px;
flex: 70px 0 0;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #F5F5FF;
}
.rk_popup_card_title_circle
svg {
width: auto;
height: 44px;
flex: 44px 0 0;
fill: var(--color_sub_04);
}
.rk_popup_card_title_circle.ver02 {
width: 70px;
height: 70px;
flex: 70px 0 0;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #fff5fa;
}
.rk_popup_card_title_circle.ver02
svg {
fill: var(--color_sub_01);
}
.rk_popup_card_star {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 15px;
}
.rk_popup_card_star_chip {
padding: 0 10px;
width: auto;
height: 25px;
flex: auto 0 0;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--color_bg_dark);
border-radius: 25px;
}
.rk_popup_card_star_chip_text {
font-size: 14px;
font-weight: 400;
line-height: 1em;
color: var(--color_white);
}
.rk_popup_card_star_con {
flex: auto 0 0;
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.rk_popup_card_star_con_icon {
width: auto;
height: auto;
flex: 20px 0 0;
}
.rk_popup_card_star_con_icon
svg {
width: 100%;
height: auto;
fill: var(--color_main);
}
.rk_popup_card_star_con_result {
display: inline-flex;
justify-content: flex-start;
align-items: center;
gap: 3px;
}
.rk_popup_card_star_con_result_number {
font-size: 14px;
font-weight: 700;
line-height: 1em;
color: var(--color_text_basic);
}
.rk_popup_card_star_con_result_text {
font-size: 14px;
font-weight: 300;
line-height: 1em;
color: var(--color_text_sub);
}
.rk_popup_card_star.ver02 {
flex: 100% 0 0;
}
.rk_popup_card_input {
padding-top: 25px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.rk_popup_card_input
.bs_input_clear {
flex: 1 0 0;
}
.rk_popup_card_input
.bs_input_clear
input {
height: 45px;
}
.rk_popup_card_input_bt {
flex: auto 0 0;
height: 45px;
background-color: var(--color_sub_04);
}
.rk_popup_card_box {
margin-top: 25px;
padding: 10px;
border-radius: 5px;
background-color: var(--color_bg_gray);
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.rk_popup_card_box_li {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 5px;
}
.rk_popup_card_box_li_icon {
width: auto;
height: auto;
flex: 14px 0 0;
}
.rk_popup_card_box_li_icon
svg {
width: 100%;
height: auto;
}
.rk_popup_card_box_li_text {
font-size: 13px;
font-weight: 400;
line-height: 1.5em;
color: var(--color_text_sub);
}
.rk_popup_card_box_bt {
margin-top: 50px;
width: 100%;
height: 50px;
background-image: linear-gradient(to right bottom, var(--color_sub_01), var(--color_sub_05));
}
.rk_popup_card_box.ver02 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
}
.rk_popup_card_box.ver02
.rk_popup_card_box_li_con {
color: var(--color_text_disabled);
font-weight: 400;
}
.rk_popup_card_box.ver02
.rk_popup_card_box_li_con
span {
color: var(--color_text_basic);
font-weight: 700;
}
.rk_popup_card_btgroup {
padding-top: 50px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
.rk_popup_card_btgroup
.rk_popup_card_box_bt {
flex: 1 0 0;
margin-top: 0;
}
.rk_popup_card_btgroup
.rk_popup_card_box_bt.gray_ver {
background-color: var(--color_bg_disabled_dark);
background-image: var(--color_bg_disabled_dark);
}
.rk_popup_card_message {
padding-top: 25px;
}
.rk_popup_card_message.ver_02 {
padding-top: 0px;
}
.rk_popup_card_message_text {
text-align: center;
font-size: 14px;
font-weight: 400;
line-height: 1.5em;
}
.rk_popup_card_message_text.ver_02 {
text-align: left;
}
.rk_popup_card_message_text.ver_02
figure
img {
width: 100%;
height: auto;
}
.rk_popup_card_message_text
span {
font-weight: 700;
}
.rk_popup_share {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 35px;
opacity: 0;
}
.rk_popup_share
.rk_login_social_group_button {
width: 70px;
height: 70px;
flex: 70px 0 0;
}
.rk_popup_card_sname {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 5px;
}
.rk_popup_card_sname_text {
font-size: 14px;
font-weight: 700;
line-height: 1em;
color: var(--color_main);
flex: auto 0 0;
}
.rk_popup_card_sname
svg {
width: 20px;
height: auto;
flex: 20px 0 0;
fill: var(--color_main);
}
.rk_popup_card
.rk_login_con_li {
padding-bottom: 0;
padding-top: 25px;
}
.rk_popup.active {
z-index: 20;
}
.rk_popup.active
.rk_popup_wrapper {
background-color: rgba(0, 0, 0, 0.8);
animation: ease-in-out rk_ani_pu_01_01 0.2s forwards;
-webkit-animation: ease-out rk_ani_pu_01_01 0.2s forwards;
}
.rk_popup.ver_02.active
.rk_popup_wrapper {
background-color: rgba(0, 0, 0, 1.0);
}
.rk_popup.active
.rk_popup_close {
animation: ease-in-out rk_ani_pu_01_02 0.2s forwards;
-webkit-animation: ease-out rk_ani_pu_01_02 0.2s forwards;
animation-delay: 0.2s;
}
.rk_popup.active
.rk_popup_slide {
animation: ease-in-out rk_ani_pu_01_02 0.2s forwards;
-webkit-animation: ease-out rk_ani_pu_01_02 0.2s forwards;
animation-delay: 0.3s;
}
.rk_popup.active
.rk_popup_card {
animation: ease-in-out rk_ani_pu_01_02 0.2s forwards;
-webkit-animation: ease-out rk_ani_pu_01_02 0.2s forwards;
animation-delay: 0.3s;
}
.rk_popup.active
.rk_popup_share {
animation: ease-in-out rk_ani_pu_01_02 0.2s forwards;
-webkit-animation: ease-out rk_ani_pu_01_02 0.2s forwards;
animation-delay: 0.3s;
}
.rk_popupver02 {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 10;
background-color: var(--color_white);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
overflow: hidden;
transform: translate(110%, 0);
transition: transform 0.3s ease-in-out;
}
@supports (height: 100dvh) {
.rk_popupver02 {
height: 100dvh;
}
}
.rk_popupver02.active {
transform: translate(0%, 0);
}
.rk_popupver02_close {
padding: 0 15px;
padding-top: 15px;
width: 100%;
height: 35px;
flex: 35px 0 0;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.rk_popupver02_close_bt {
width: 20px;
height: 20px;
border: none;
background-color: var(--color_transparent);
}
.rk_popupver02_close_bt:active {
animation: linear rk_ani_click_02 0.3s 1;
-webkit-animation: linear rk_ani_click_02 0.3s 1;
}
.rk_popupver02_body {
padding: 15px;
width: 100%;
height: auto;
flex: 1 0 0;
overflow: auto;
}
.rk_popupver02_body_banner {
width: 100%;
height: 200px;
background: center center / cover url(../img/contest_info_banner_01_01.jpg) no-repeat;
border-radius: 20px;
}
.rk_popupver02_body
.rk_main_bslist {
padding: 0;
padding-top: 20px;
}
.rk_popupver02_body
.rk_main_profile_info_card {
padding: 20px;
}
.rk_main_back {
position: fixed;
top: 20px;
left: 20px;
z-index: 5;
width: auto;
height: auto;
}
.rk_main_back_bt {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color_white);
border: none;
border-radius: 50%;
/* background: center center / cover url(../img/icon_00_shadow.png) no-repeat; */
}
.rk_main_back_bt:active {
animation: ease-in-out rk_ani_click_01 0.2s forwards;
-webkit-animation: ease-out rk_ani_click_01 0.2s forwards;
}
.rk_main_back_bt
svg {
width: 20px;
height: auto;
flex: 20px 0 0;
fill: var(--color_black);
}
.rk_login_con_li_check {
display: flex;
justify-content: flex-start;
align-items: center;
}
.rk_login_con_li_check_group {
flex: auto 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.rk_login_con_li_check_group_text {
font-size: 14px;
line-height: 1em;
}
.rk_login_con_li_box {
padding: 15px;
margin-top: 10px;
border-radius: 10px;
background-color: var(--color_bg_gray);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
gap: 15px;
}
.rk_login_con_li_box_group {
width: 100%;
height: auto;
flex: 100% 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
.rk_login_con_li_box_group
.rk_login_con_li_check_group {
display: inline-flex;
}
.rk_login_con_li_box_group_right {
flex: 1 0 0;
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.rk_login_con_li_box_group_right_link {
display: inline-block;
}
.rk_login_con_li_box_group_right_text {
font-size: 14px;
line-height: 1em;
text-decoration: underline;
}
.rk_main_textedit {
padding: 25px 15px;
}
.rk_main_basic_title {
padding-bottom: 10px;
text-align: left;
}
.rk_main_textedit
.bs_tcount {
width: 100%;
}
.rk_main_textedit
.bs_tcount
textarea {
width: 100%;
}
.rk_main_profile_photo
.rk_main_basic_title {
flex: 100% 0 0;
padding-bottom: 0;
}
.rk_main_btarea {
padding: 25px 15px;
padding-top: 10px;
}
.rk_main_bslist {
padding: 25px 15px;
}
.rk_graybg {
background-color: var(--color_bg_gray);
height: calc(100vh - 55px - 75px);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
overflow: auto;
}
@supports (height: 100dvh) {
.rk_graybg {
height: calc(100vh - 55px - 75px);
}
}
.rk_graybg_body {
padding: 25px 15px;
width: 100%;
height: auto;
flex: 1 0 0;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
gap: 25px;
}
.rk_graybg_body.ver02 {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
}
.rk_graybg_bottom {
padding: 25px 15px;
padding-top: 0;
width: 100%;
height: auto;
flex: auto 0 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 25px;
}
.rk_graybg_body_card {
position: relative;
width: 100%;
padding: 20px;
border-radius: 15px;
background-color: var(--color_white);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 15px;
transition: all 0.2s ease-in-out;
}
.rk_graybg_body_card_radio {
display: none;
}
.rk_graybg_body_card_con {
flex: 1 0 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 10px;
/* opacity: 1; */
opacity: 0.77;
}
.rk_graybg_body_card_con_title {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 5px;
}
.rk_graybg_body_card_con_title_text {
text-align: left;
font-size: 14px;
font-weight: 400;
line-height: 1em;
/* color: var(--color_main); */
color: var(--color_text_disabled);
flex: auto 0 0;
transition: all 0.2s ease-in-out;
}
.rk_graybg_body_card_con_title svg {
width: 20px;
height: auto;
flex: 20px 0 0;
/* fill: var(--color_main); */
fill: var(--color_text_disabled);
transition: all 0.2s ease-in-out;
}
.rk_graybg_body_card_con_box {
padding: 10px;
background-color: var(--color_bg_gray);
flex: 1 0 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 5px;
}
.rk_graybg_body_card_con_box_text {
font-size: 14px;
font-weight: 300;
line-height: 1em;
color: var(--color_text_disabled);
}
.rk_graybg_body_card_con_box_text
span {
font-size: 14px;
font-weight: 700;
/* color: var(--color_text_basic); */
color: var(--color_text_disabled);
transition: all 0.2s ease-in-out;
}
.rk_graybg_body_card_chip {
border-radius: 15px;
width: auto;
height: 26px;
flex: 100px 0 0;
display: inline-flex;
justify-content: center;
align-items: center;
/* background-color: var(--color_sub_04); */
/* opacity: 1; */
background-color: var(--color_bg_disabled);
opacity: 0.77;
transition: all 0.2s ease-in-out;
}
.rk_graybg_body_card_chip_price {
font-size: 16px;
line-height: 1em;
/* font-weight: 700;
color: var(--color_white); */
font-weight: 400;
color: var(--color_text_disabled);
transition: all 0.2s ease-in-out;
}
.rk_graybg_body_card_mark {
position: absolute;
top: 0px;
right: 0px;
width: 26px;
height: 26px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--color_sub_05);
/* transform: translate(40%, -40%) scale(1.0);
opacity: 1.0; */
transform: translate(40%, -40%) scale(0.0);
opacity: 0.5;
transition: all 0.2s ease-in-out;
}
.rk_graybg_body_card_mark
svg {
width: auto;
height: auto;
flex: 53% 0 0;
fill: var(--color_white);
}
.rk_graybg_body_list {
position: relative;
width: 100%;
border-radius: 15px;
background-color: var(--color_white);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.rk_graybg_body_list_banner {
background-image: url(../img/m_card_01_00_01.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 150px;
}
.rk_graybg_body_list_con {
padding: 20px;
}
.rk_graybg_body_list_con.ver02 {
border-bottom: 1px dashed var(--color_line_normal);
}
.rk_graybg_body_list_con_title {
padding-bottom: 10px;
}
.rk_graybg_body_list_con_badge {
width: 50px;
height: 50px;
position: absolute;
top: 10px;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
background: center center / contain url(../img/icon_30.svg) no-repeat;
}
.rk_graybg_body_list_con_badge_text {
position: relative;
top: 3px;
font-size: 11px;
font-weight: 700;
line-height: 1em;
color: var(--color_white);
}
.rk_graybg_body_list_coupon {
padding: 25px;
}
.rk_graybg_body_list_coupon
.bs_input_clear {
margin-bottom: 25px;
}
.rk_graybg_body_list_coupon
.bs_input_clear
input {
height: 50px;
}
.rk_graybg_body_list.ver02
.rk_graybg_body_list_con_title {
text-align: center;
color: var(--color_main);
padding-bottom: 20px;
}
.rk_graybg_body_list.ver02
.rk_graybg_body_list_con_text {
text-align: center;
}
.rk_graybg_body_card_radio:checked ~
.rk_graybg_body_card_con {
opacity: 1;
}
.rk_graybg_body_card_radio:checked ~
.rk_graybg_body_card_con
.rk_graybg_body_card_con_title_text {
color: var(--color_main);
}
.rk_graybg_body_card_radio:checked ~
.rk_graybg_body_card_con
.rk_graybg_body_card_con_title svg {
fill: var(--color_main);
}
.rk_graybg_body_card_radio:checked ~
.rk_graybg_body_card_con
.rk_graybg_body_card_con_box_text
span {
color: var(--color_text_basic);
}
.rk_graybg_body_card_radio:checked ~
.rk_graybg_body_card_chip {
background-color: var(--color_sub_04);
opacity: 1;
}
.rk_graybg_body_card_radio:checked ~
.rk_graybg_body_card_chip
.rk_graybg_body_card_chip_price {
color: var(--color_white);
}
.rk_graybg_body_card_radio:checked ~
.rk_graybg_body_card_mark {
transform: translate(40%, -40%) scale(1.0);
opacity: 1;
}
.rk_main_history_banner {
padding: 0 15px;
}
.rk_main_history_banner_image {
border-radius: 20px;
width: 100%;
height: 200px;
background-image: url(../img/m_card_01_00.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.rk_history_table_wrapper {
width: 100%;
height: calc(100vh - 55px - 200px - 65px - 25px);
overflow: auto;
margin-top: 25px;
padding-bottom: 25px;
}
.rk_history_table {
padding: 0 15px;
width: 100%;
overflow: hidden;
position: relative;
}
.rk_history_table
thead {
background-color: var(--color_bg_table_header);
position: sticky;
top: 0;
}
.rk_history_table
thead
th {
padding: 10px 5px;
font-size: 12px;
font-weight: 700;
line-height: 1em;
color: var(--color_text_table_title);
border-right: 1px solid var(--color_line_table_normal);
}
.rk_history_table
thead
th:last-child {
border-right: 0px solid var(--color_line_table_normal);
}
.rk_history_table
tbody
td {
padding: 10px 5px;
border-right: 1px solid var(--color_line_table_normal);
border-bottom: 1px solid var(--color_line_table_normal);
font-size: 14px;
font-weight: 400;
line-height: 1.3em;
text-align: center;
}
.rk_history_table
tbody
td:last-child {
border-right: 0px solid var(--color_line_table_normal);
}
.rk_history_table
tbody
td.ranking {
font-size: 16px;
font-weight: 700;
color: var(--color_text_basic);
}
.rk_history_table
tbody
td.ranking.top {
font-size: 20px;
color: var(--color_main);
}
.rk_history_table
tbody
td
.star_number {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 5px;
font-size: 16px;;
font-weight: 700;
line-height: 1em;
color: var(--color_text_basic);
}
.rk_history_table
tbody
td
.star_number
svg {
width: 20px;
height: auto;
fill: var(--color_main);
}
.rk_star_info {
padding: 25px 15px;
}
.rk_star_tab {
padding: 25px 15px;
padding-top: 0;
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
.rk_star_tab_chip {
flex: 1 0 0;
}
.rk_star_tab_chip
input {
display: none;
}
.rk_star_tab_chip_text {
border-radius: 15px;
padding: 0 15px;
width: 100%;
height: 30px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_disabled);
background-color: var(--color_bg_disabled);
border: 1px solid var(--color_bg_disabled);
transition: all 0.3s ease-in-out;
}
.rk_star_tab_chip
input:checked ~
.rk_star_tab_chip_text {
background-color: var(--color_white);
border: 1px solid var(--color_main);
color: var(--color_main);
}
.rk_star_history {
padding: 5px 15px;
padding-top: 0;
width: 100%;
height: calc(100vh - 55px - 75px - 55px);
overflow: auto;
}
@supports (height: 100dvh) {
.rk_star_history {
height: calc(100vh - 55px - 75px - 55px);
}
}
.rk_star_history
table {
width: 100%;
}
.rk_star_history
tbody
td {
padding: 20px 0;
border-bottom: 1px solid var(--color_line_normal);
}
.rk_star_history
tbody
tr:last-of-type
td {
border-bottom: none;
}
.rk_star_history
tbody
td.name {
padding-right: 5px;
text-align: left;
font-size: 16px;
font-weight: 400;
color: var(--color_text_basic);
}
.rk_star_history
tbody
td.number {
padding-left: 5px;
text-align: right;
font-size: 16px;
font-weight: 400;
color: var(--color_sub_04);
}
.rk_shopping {
position: relative;
height: calc(100vh - 55px);
padding-bottom: 65px;
padding-bottom: calc(65px + constant(safe-area-inset-bottom)); /* iOS 구버전 */
padding-bottom: calc(65px + env(safe-area-inset-bottom)); /* iOS 최신 및 다른 브라우저 */
overflow: auto;
}
@supports (height: 100dvh) {
.rk_shopping {
min-height: calc(100dvh - 55px);
}
}
.rk_icontop {
width: 100%;
height: calc(100vh - 55px);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
@supports (height: 100dvh) {
.rk_icontop {
height: calc(100dvh - 55px);
}
}
.rk_icontop_header {
padding: 0 15px;
width: 100%;
height: 130px;
flex: 130px 0 0;
display: flex;
justify-content: center;
align-items: center;
}
.rk_icontop_header_circle {
width:80px;
height: 80px;
flex: 80px 0 0;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: #ECFBF8;
}
.rk_icontop_header_circle.ver02 {
background-color: #FFF8E6;
}
.rk_icontop_header_circle.ver03 {
background-color: #E6F5FF;
}
.rk_icontop_header_circle
img {
width: 40px;
height: auto;
}
.rk_icontop_body {
background-color: var(--color_bg_gray);
padding: 0 15px;
padding-bottom: calc(65px + 25px);
padding-bottom: calc(65px + constant(safe-area-inset-bottom) + 25px); /* iOS 구버전 */
padding-bottom: calc(65px + env(safe-area-inset-bottom) + 25px); /* iOS 최신 및 다른 브라우저 */
width: 100%;
height: auto;
flex: 1 0 0;
overflow: auto;
}
.rk_icontop_body.ver02 {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.rk_icontop_body_wrapper {
width: 100%;
height: auto;
flex: 100% 0 0;
}
.rk_icontop_body_li {
width: 100%;
height: auto;
margin: 25px 0;
padding-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 15px;
border-bottom: 1px solid var(--color_line_normal);
}
.rk_icontop_body_li:last-child {
padding-bottom: 0px;
border-bottom: none;
}
.rk_icontop_body_li_con {
flex: 1 0 0;
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
}
.rk_icontop_body_li_con_title {
width: 100%;
font-size: 16px;
font-weight: 700;
line-height: 1em;
color: var(--color_text_basic);
}
.rk_icontop_body_li_con_date {
width: 100%;
font-size: 13px;
font-weight: 400;
line-height: 1em;
color: var(--color_text_sub);
}
.rk_icontop_body_li_bt {
width: auto;
height: 100%;
flex: auto 0 0;
}
.rk_icontop_body_li_bt_button {
width: 26px;
height: 26px;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--color_white);
border-radius: 50%;
border: none;
}
.rk_icontop_body_li_bt_button
svg {
width: 14px;
height: auto;
fill: var(--color_sub_04);
}
.rk_icontop_body_setting {
padding: 20px 0;
width: 100%;
height: auto;
flex: 100% 0 0;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
border-bottom: 1px solid var(--color_line_normal);
}
.rk_icontop_body_setting:last-child {
border-bottom: none;
}
.rk_icontop_body_setting_title {
flex: 1 0 0;
line-height: 1em;
}
.rk_icontop_body_setting_toggle {
width: auto;
height: auto;
}
.rk_icontop_body_setting_checkbox {
display: none;
}
.rk_icontop_body_setting_toggle_show {
width: 52px;
height: 26px;
background-color: var(--color_bg_toggle);
border-radius: 13px;
flex: auto 0 0;
display: inline-flex;
justify-content: flex-start;
align-items: center;
transition: all 0.3s ease-in-out;
}
.rk_icontop_body_setting_toggle_show:after {
content: '';
width: 26px;
height: 26px;
background-image: linear-gradient(to right bottom, var(--color_white), var(--color_white));
border-radius: 50%;
transform: translate(0, 0);
transition: all 0.3s ease-in-out;
}
.rk_icontop_body_setting_checkbox:checked ~
.rk_icontop_body_setting_toggle_show {
background-color: var(--color_bg_toggle_active);
}
.rk_icontop_body_setting_checkbox:checked ~
.rk_icontop_body_setting_toggle_show:after {
transform: translate(100%, 0);
background-image: linear-gradient(to right bottom, var(--color_sub_01), var(--color_sub_05));
}
.last_bottom_ver {
padding-bottom: calc(65px + 25px) !important;
padding-bottom: calc(65px + constant(safe-area-inset-bottom) + 25px) !important; /* iOS 구버전 */
padding-bottom: calc(65px + env(safe-area-inset-bottom) + 25px) !important; /* iOS 최신 및 다른 브라우저 */
}
.rk_main_howto {
padding: 0 15px;
padding-top: 25px;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
gap: 15px;
}
.rk_main_howto_title {
flex: 100% 0 0;
text-align: center;
color: var(--color_main);
}
.rk_main_howto_li {
flex: 1 0 0;
}
.rk_main_howto_li_box {
margin-top: 15px;
padding: 25px 15px;
padding-top: 30px;
border: 1px solid var(--color_sub_01);
border-radius: 10px;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
width: 100%;
}
.rk_main_howto_li_box svg,
.rk_main_howto_li_box img {
width: 100%;
height: auto;
}
.rk_main_howto_li_box_number {
position: absolute;
top: -15px;
left: calc(50% - 15px);
width: 30px;
height: 30px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
background-color: var(--color_sub_01);
}
.rk_main_howto_li_box_number_text {
color: var(--color_white);
font-size: 16px;
font-weight: 700;
}
.rk_main_howto_li_title {
text-align: center;
padding-top: 15px;
}
.rk_main_howto_li_text {
text-align: center;
padding-top: 5px;
}
/* loading */
.rk_popup_spinner_wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
z-index: -10;
transition: all 0.3s ease-in-out;
}
.rk_popup_spinner_wrapper.active {
opacity: 1;
z-index: 20;
}
.rk_popup_spinner {
animation: rk_popup_rotator 1.4s linear infinite;
width: 50px;
height: 50px;
}
@keyframes rk_popup_rotator {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(270deg);
}
}
.rk_popup_path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
transform-origin: center;
animation: rk_popup_dash 1.4s ease-in-out infinite, rk_popup_colors 5.6s ease-in-out infinite;
}
@keyframes rk_popup_colors {
0% {
stroke: #ffb4f3;
}
25% {
stroke: #fae399;
}
50% {
stroke: #fab7cb;
}
75% {
stroke: #c0bbff;
}
100% {
stroke: #fdc3aa;
}
}
@keyframes rk_popup_dash {
0% {
stroke-dashoffset: 187;
}
50% {
stroke-dashoffset: 46.75;
transform: rotate(135deg);
}
100% {
stroke-dashoffset: 187;
transform: rotate(450deg);
}
}
.rk_gotop {
position: fixed;
bottom: 75px;
right: 10px;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color_white);
border-radius: 50%;
border: none;
box-shadow: 0 3px 6px rgba(50, 50, 50, 0.1);
transition: all 0.3s ease-in-out;
transform: translateY(50px) scale(0.3);
z-index: -1;
}
.rk_gotop.active {
transform: translateY(0) scale(1.0);
z-index: 5;
}
.rk_gotop:active {
animation: ease-in-out rk_ani_click_01 0.2s forwards;
-webkit-animation: ease-out rk_ani_click_01 0.2s forwards;
}
.rk_gotop
svg {
width: 24px;
height: auto;
flex: 24px 0 0;
fill: var(--color_main);
transform: translateY(-1px);
}
@media all and (min-width:600px) {
.rk_login {
padding: 0 calc((100% - 550px) / 2);
}
.rk_header {
padding: 5px calc((100% - 550px) / 2);
}
.rk_login_con {
padding: 0 calc((100% - 550px) / 2);
padding-bottom: 0px;
}
.rk_main_list {
padding: 0 calc((100% - 550px) / 2);
padding-top: 15px;
}
.rk_main_ssbanner {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_main_chipslide .swiper {
padding: 0 calc((100% - 550px) / 2);
}
.rk_main_player {
padding: 25px calc((100% - 550px) / 2);
}
.rk_nav_side_top_close {
padding: 25px calc((100% - 550px) / 2);
}
.rk_nav_side_top_info {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_nav_side_top_button {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_nav_side_body {
padding: 25px calc((100% - 550px) / 2);
}
.rk_main_profile_banner_thumb {
padding: 0 calc((100% - 550px) / 2);
padding-bottom: 25px;
}
.rk_main_profile_summmary {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_main_profile_button {
padding: 25px calc((100% - 550px) / 2);
}
.rk_main_profile_info {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_main_profile_message {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_main_profile_gallery {
padding: 25px calc((100% - 550px - 20PX) / 2);
padding-top: 0;
}
.rk_main_textedit {
padding: 25px calc((100% - 550px) / 2);
}
.rk_main_profile_photo {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_main_btarea {
padding: 25px calc((100% - 550px) / 2);
padding-top: 10px;
}
.rk_main_chipslide
.swiper {
padding: 0 calc((100% - 550px) / 2);
}
.rk_graybg_body {
padding: 25px calc((100% - 550px) / 2);
}
.rk_graybg_bottom {
padding: 25px calc((100% - 550px) / 2);
}
.rk_main_history_banner {
padding: 0 calc((100% - 550px) / 2);
}
.rk_history_table {
padding: 0 calc((100% - 550px) / 2);
}
.rk_star_info {
padding: 25px calc((100% - 550px) / 2);
}
.rk_star_tab {
padding: 25px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_star_history {
padding: 5px calc((100% - 550px) / 2);
padding-top: 0;
}
.rk_icontop_body {
padding: 0 calc((100% - 550px) / 2);
padding-bottom: calc(65px + 25px);
padding-bottom: calc(65px + constant(safe-area-inset-bottom) + 25px);
padding-bottom: calc(65px + env(safe-area-inset-bottom) + 25px);
}
.rk_main_bslist {
padding: 25px calc((100% - 550px) / 2);
}
.rk_popup_card {
flex: 550px 0 0;
}
.rk_main_howto {
padding: 0 calc((100% - 550px) / 2);
padding-top: 25px;
}
}
@media all and (max-width:400px) {
.rk_popup_card_input
.bs_input_clear {
flex: 100% 0 0;
}
.rk_popup_card_input_bt {
flex: 100% 0 0;
}
.rk_graybg_body_card_con {
padding-right: 15px;
border-right: 1px dashed var(--color_line_normal);
}
.rk_graybg_body_card_con_title {
flex: 100% 0 0;
display: flex;
justify-content: center;
align-items: center;
}
.rk_graybg_body_card_con_box {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
}
/* RankingStar style END */
@keyframes rk_ani_click_00 {
0% {
transform: scale(1.0);
}
100% {
transform: scale(1.0);
}
}
@keyframes rk_ani_click_01 {
0% {
transform: scale(1.0);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1.0);
}
}
@keyframes rk_ani_click_02 {
0% {
transform: scale(1.0);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1.0);
}
}
@keyframes rk_ani_click_03 {
0% {
transform: scale(1.0);
}
50% {
transform: scale(0.95);
}
100% {
transform: scale(1.0);
}
}
@keyframes rk_ani_pu_01_01 {
0% {
width: 0vh;
height: 0vh;
border-radius: 50%;
opacity: 0;
}
99% {
width: 150vh;
height: 150vh;
border-radius: 50%;
}
100% {
width: 100%;
height: 100%;
border-radius: 0;
opacity: 1;
}
}
@keyframes rk_ani_pu_01_02 {
0% {
transform: translate(0, -20px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}