@charset "UTF-8";


/* 베이저 프레임 */

.bezier_frame      { --bezier-frame-size:48px; display:inline-block; width:calc(var(--bezier-frame-size) + 2px); height:calc(var(--bezier-frame-size) + 2px); line-height:0px; font-size:0px; overflow:hidden; font-size:0px; border:0px !important; text-align:left; }
.bezier_frame::before { content:''; position:relative; display:block; width:calc(var(--bezier-frame-size) + 2px); height:calc(var(--bezier-frame-size) + 2px); z-index:2; background-image:url('bezier/bezier_frame_white.svg'); background-size:calc(var(--bezier-frame-size) * 1.2); background-position: center; background-origin: border-box; }
.bezier_frame img  { display:inline-block; width:var(--bezier-frame-size); height:var(--bezier-frame-size); margin:1px; z-index:1; transform:translate(0, calc(-100% - 2px)); }
.bezier_frame .ci  { display:inline-block; width:var(--bezier-frame-size); height:var(--bezier-frame-size); margin:1px; z-index:1; transform:translate(0, calc(-100% - 2px)); line-height:var(--bezier-frame-size); text-align:center; font-size:calc( var(--bezier-frame-size) * 0.5 ); font-weight:bold; }

.bezier_frame.border::before { background-image:url('bezier/bezier_frame_border.svg'); background-size:calc(var(--bezier-frame-size) * 1.2); background-position: center; }
.bezier_frame.gray::before   { background-image:url('bezier/bezier_frame_gray.svg');   background-size:calc(var(--bezier-frame-size) * 1.2); background-position: center; }
.bezier_frame.gray2::before  { background-image:url('bezier/bezier_frame_gray2.svg');  background-size:calc(var(--bezier-frame-size) * 1.2); background-position: center; }

.bezier_frame.s16 { --bezier-frame-size:16px; }
.bezier_frame.s20 { --bezier-frame-size:20px; }
.bezier_frame.s24 { --bezier-frame-size:24px; }
.bezier_frame.s32 { --bezier-frame-size:32px; }
.bezier_frame.s36 { --bezier-frame-size:36px; }
.bezier_frame.s40 { --bezier-frame-size:40px; }
.bezier_frame.s44 { --bezier-frame-size:44px; }
.bezier_frame.s48 { --bezier-frame-size:48px; }
.bezier_frame.s66 { --bezier-frame-size:66px; }
.bezier_frame.s72 { --bezier-frame-size:72px; }


/**/
.ci.ci_0 { background-color:#DD6359; color:#fff; font-size: 12px; }
.ci.ci_1 { background-color:#FFA055; color:#fff; font-size: 12px; }
.ci.ci_2 { background-color:#FFDC67; color:#fff; font-size: 12px; }
.ci.ci_3 { background-color:#D6A688; color:#fff; font-size: 12px; }
.ci.ci_4 { background-color:#CCDBAB; color:#fff; font-size: 12px; }
.ci.ci_5 { background-color:#59897B; color:#fff; font-size: 12px; }
.ci.ci_6 { background-color:#B4D7FF; color:#fff; font-size: 12px; }
.ci.ci_7 { background-color:#3E3380; color:#fff; font-size: 12px; }
.ci.ci_8 { background-color:#CFC5EF; color:#fff; font-size: 12px; }
.ci.ci_9 { background-color:#E4E4E4; color:#fff; font-size: 12px; }
.ci.ci_99 { background-color:#FAFAFA; color:#BFBFBF; font-size: 12px; }