@charset "UTF-8";

:root {
	 --color-point: #81d8d0;
}

.c_r {
  color: #e91a1a !important;
}

.c_s {
  color: #0099c9 !important;
}
.c_s2 {
	color: #81D8D0 !important;
}
.c_s3 {
	color: #81D3F8 !important;
}

.c_p {
  color: #7352ff !important;
}

.c_p2 {
  color: #bf1ae9 !important;
}

.c_o {
  color: #ff6241 !important;
}

.c_o2 {
  color: #f09200 !important;
}

.c_b {
  color: #337ab7 !important;
}

.c_1,
.threads,
.twitter {
  color: #111 !important;
}

.c_4 {
  color: #444 !important;
}

.c_8 {
  color: #888 !important;
}

.c_po {
  color: var(--color-point) !important;
}

.c_pi {
  color: #f28492 !important;
}

.c_g,
.blog {
  color: #03c75a !important;
}

.instagram,
.reels {
  color: #ef317c;
}

.facebook {
  color: #0866ff;
}

.youtube,
.shorts {
  color: #fd0000;
}

.clip {
  color: #adff5f;
}

.tiktok {
  color: #25f4ee;
}

.vip .icon {
  background-image: url(../img/rank_icon1.svg);
}
.vip p {
  color: #f9cb56;
}

.diamond .icon {
  background-image: url(../img/rank_icon2.svg);
}
.diamond p {
  color: #1e7eeb;
}

.gold .icon {
  background-image: url(../img/rank_icon3.svg);
}
.gold p {
  color: #e29d2c;
}

.silver .icon {
  background-image: url(../img/rank_icon4.svg);
}
.silver p {
  color: #91969c;
}

.bronze .icon {
  background-image: url(../img/rank_icon5.svg);
}
.bronze p {
  color: #cc531a;
}

.bad .icon {
  background-image: url(../img/penalty_icon1.png);
}
.bad p {
  color: #f64c1b;
}

.poor .icon {
  background-image: url(../img/penalty_icon2.png);
}
.poor p {
  color: #ff8d0d;
}

.normal .icon {
  background-image: url(../img/penalty_icon3.png);
}
.normal p {
  color: #eece10;
}

.good .icon {
  background-image: url(../img/penalty_icon4.png);
}
.good p {
  color: #92c62e;
}

.excellent .icon {
  background-image: url(../img/penalty_icon5.png);
}
.excellent p {
  color: #41af51;
}
/* display */
.d_b {
    display: block;
}
.d_i {
    display: inline;
}
.d_ib {
    display: inline-block;
}
.d_f {
    display: flex;
}
.d_g {
    display: grid;
}

/* display align */
.j_c {
    justify-content: center;
}
.j_sb {
    justify-content: space-between;
}
.j_fs {
    justify-content: flex-start;
}
.j_fe {
    justify-content: flex-end;
}
.ai_c {
    align-items: center;
}
.ai_fs {
    align-items: flex-start;
}
.ai_fe {
    align-items: flex-end;
}
.ac_c {
    align-content: center;
}
.ac_fs {
    align-content: flex-start;
}
.ac_fe {
    align-content: flex-end;
}
.ac_sb {
    align-content: space-between;
}
.f_w {
    flex-wrap: wrap;
}

/* text- align */
.ta_c {
    text-align: center;
}
.ta_l {
    text-align: left;
}
.ta_r {
    text-align: right;
}
.ta_j {
    text-align: justify;
}

/* margin */
.m_c {
    margin: 0 auto;
}
.m_l_0 {
    margin-right: auto;
    margin-left: 0;
}
.m_r_0 {
    margin-left: auto;
    margin-right: 0;
}
.m_t10 {
  margin-top: clamp(5px, 0.52vw, 10px);
}
.m_r5 {
	margin-right: 5px;
}
.m_r10 {
  margin-right: clamp(5px, 0.52vw, 10px);
}
.m_r20 {
  margin-right: clamp(10px, 1.04vw, 20px);
}
.m_l10 {
  margin-left: clamp(5px, 0.52vw, 10px);
}
.m_b5 {
	margin-bottom: 5px;
}
.m_b10 {
  margin-bottom: clamp(5px, 0.52vw, 10px);
}
.m_0_10 {
  margin: 0 clamp(5px, 0.52vw, 10px);
}

/* 모바일 */
.mo_br,
.mo_img,
.only_mo {
    display: none;
}

.blind {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: polygon(0 0, 0 0, 0 0);
}

/* 기타 */
.bold {
    font-weight: bold;
}
.underline {
    text-decoration: underline;
}
.blog::before {
    background-image: url(../img/blog_icon.svg);
}
.instagram::before {
    background-image: url(../img/instagram_icon.svg);
}
.youtube::before {
    height: clamp(13px, 0.68vw, 13px) !important;
    background-image: url(../img/youtube_icon.svg);
}
.threads::before {
    background-image: url(../img/threads_icon.svg);
}
.reels::before {
    background-image: url(../img/reels_icon.svg);
}
.shorts::before {
    width: clamp(13px, 0.68vw, 13px) !important;
    background-image: url(../img/shorts_icon.svg);
}
.clip::before {
    background-image: url(../img/clip_icon.svg);
}
.facebook::before {
    background-image: url(../img/facebook_icon.svg);
}
.tiktok::before {
    background-image: url(../img/tiktok_icon.svg);
}
.twitter::before {
    background-image: url(../img/twitter_icon.svg);
}

/* 팝업띄웠을 때 html,body 스크롤 방지용 */
.scroll_lock {
    overflow: hidden;
}

/* font family */

/* 넓이 */
.w_40 {
    width: clamp(40px, 2.08vw, 40px) !important;
}
.w_60 {
    width: clamp(42px, 3.13vw, 60px) !important;
}
.w_65 {
    width: clamp(65px, 3.39vw, 65px) !important;
}
.w_74 {
    width: clamp(74px, 3.85vw, 74px) !important;
}
.w_80 {
    width: clamp(75px, 4.17vw, 80px) !important;
}
.w_100 {
    width: clamp(80px, 5.21vw, 100px) !important;
}
.w_110 {
    width: clamp(110px, 5.73vw, 110px) !important;
}
.w_120 {
    width: clamp(107.5px, 6.25vw, 120px) !important;
}
.w_140 {
    width: clamp(115px, 7.29vw, 140px) !important;
}
.w_160 {
    width: clamp(145px, 8.33vw, 160px) !important;
}
.w_180 {
    width: clamp(180px, 9.38vw, 180px) !important;
}
.w_200 {
    width: clamp(140px, 10.42vw, 200px) !important;
}
.w_220 {
    width: clamp(175px, 11.46vw, 220px) !important;
}
.w_230 {
    width: clamp(230px, 11.98vw, 230px) !important;
}
.w_240 {
    width: clamp(225px, 12.5vw, 240px) !important;
}
.w_250 {
    width: clamp(227px, 13.02vw, 250px) !important;
}
.w_265 {
    width: clamp(265px, 13.8vw, 265px) !important;
}
.w_300 {
    width: clamp(275px, 15.63vw, 300px) !important;
}
.w_420 {
    width: clamp(357px, 21.88vw, 420px) !important;
}
.w_510 {
    width: clamp(357px, 26.56vw, 510px) !important;
}
.w_520 {
    width: clamp(520px, 27.08vw, 520px) !important;
}
.w_540 {
    width: clamp(460px, 28.13vw, 540px) !important;
}
.w_540_2 {
    width: clamp(380px, 28.13vw, 540px) !important;
}
.w_620 {
    width: clamp(620px, 32.29vw, 620px) !important;
}
.w_640 {
    width: clamp(460px, 33.33vw, 640px) !important;
}
.w_750 {
    width: clamp(460px, 39.06vw, 750px) !important;
}
.w_860 {
    width: clamp(460px, 44.79vw, 860px) !important;
}
.w_a {
    width: auto !important;
}

/*width*/
.max_400 {
    max-width: 400px;
}
.max_800 {
    max-width: 800px;
    width: 90%;
}
.max_1000 {
    max-width: 1000px;
    width: 90%;
}
.max_1080 {
    max-width: 1080px;
    width: 96%;
}
.max_1100 {
    max-width: 1100px;
    width: 96%;
}
.max_1155 {
    max-width: 1155px;
    width: 90%;
}
.max_1200 {
    max-width: 1200px;
    width: 96%;
}
.max_1300 {
    max-width: 1300px;
    width: 96%;
}
.max_1330 {
    max-width: 1330px;
    width: 96%;
}
.max_1340 {
    max-width: 1340px;
    width: 96%;
}
.max_1360 {
    max-width: 1360px;
    width: 96%;
}
.max_1400 {
    max-width: 1400px;
    width: 96%;
}
.max_1480 {
    max-width: 1480px;
    width: 96%;
}
.max_1500 {
    max-width: 1500px;
    width: 94%;
}
.max_1545 {
    max-width: 1545px;
    width: 96%;
}
.max_1560 {
    max-width: 1560px;
    width: 96%;
}
.max_1570 {
    max-width: 1570px;
    width: 96%;
}
.max_1600 {
    max-width: 1600px;
    width: 90%;
}
.max_1640 {
    max-width: 1640px;
    width: 96%;
}
.max_1650 {
    max-width: 1650px;
    width: 96%;
}
.max_1660 {
    max-width: 1660px;
    width: 96%;
}
.max_1680 {
    max-width: 1680px;
    width: 96%;
}
.max_1700 {
    max-width: 1700px;
    width: 96%;
}
.max_1740 {
    max-width: 1740px;
    width: 96%;
}
.max_1810 {
    max-width: 1810px;
    width: 96%;
}
.max_1850 {
    max-width: 1850px;
    width: 89%;
}

/* animation */
.ani_load {
    transition: transform 0.7s ease, opacity 0.7s ease, filter 0.7s ease;
    opacity: 0;
}
.ani_load_up {
    transition: transform 0.7s ease, opacity 0.7s ease, filter 0.7s ease;
    transform: translate(0, 40px);
    opacity: 0;
}
.ani_load_down {
    transition: transform 0.7s ease, opacity 0.7s ease, filter 0.7s ease;
    transform: translate(0, -40px);
    opacity: 0;
}
.ani_load_to_left {
    transition: transform 0.7s ease, opacity 0.7s ease, filter 0.7s ease;
    transform: translate(40px, 0);
    opacity: 0;
}
.ani_load_to_right {
    transition: transform 0.7s ease, opacity 0.7s ease, filter 0.7s ease;
    transform: translate(-40px, 0);
    opacity: 0;
}

.ani_load.ani_view,
.ani_load_up.ani_view,
.ani_load_down.ani_view,
.ani_load_to_left.ani_view,
.ani_load_to_right.ani_view {
    transform: translate(0, 0);
    opacity: 1;
}

/*pc padding*/
.p_t5 {
    padding-top: 5px;
}
.p_t10 {
    padding-top: clamp(5px, 0.52vw, 10px);
}
.p_t12 {
    padding-top: clamp(6px, 0.63vw, 12px);
}
.p_t13 {
    padding-top: clamp(7px, 0.68vw, 13px);
}
.p_t15 {
    padding-top: clamp(8px, 0.78vw, 15px);
}
.p_t20 {
    padding-top: clamp(10px, 1.04vw, 20px);
}
.p_t30 {
    padding-top: clamp(15px, 1.56vw, 30px);
}
.p_t40 {
    padding-top: clamp(20px, 2.08vw, 40px);
}
.p_t50 {
    padding-top: clamp(35px, 2.6vw, 50px);
}
.p_t60 {
    padding-top: clamp(30px, 3.13vw, 60px);
}
.p_t70 {
    padding-top: clamp(35px, 3.65vw, 70px);
}
.p_t80 {
    padding-top: clamp(40px, 4.17vw, 80px);
}
.p_t90 {
    padding-top: clamp(45px, 4.69vw, 90px);
}
.p_t100 {
    padding-top: clamp(70px, 5.21vw, 100px);
}
.p_t110 {
    padding-top: clamp(75px, 5.73vw, 110px);
}
.p_t120 {
    padding-top: clamp(60px, 6.25vw, 120px);
}
.p_t128 {
    padding-top: clamp(83px, 6.67vw, 128px);
}
.p_t130 {
    padding-top: clamp(85px, 15.29vw, 130px);
}
.p_t140 {
    padding-top: clamp(80px, 7.29vw, 140px);
}
.p_t150 {
    padding-top: clamp(110px, 7.81vw, 150px);
}
.p_t160 {
    padding-top: clamp(115px, 8.33vw, 160px);
}
.p_t170 {
    padding-top: clamp(120px, 8.85vw, 170px);
}
.p_t200 {
    padding-top: clamp(150px, 10.42vw, 200px);
}
.p_t210 {
    padding-top: clamp(160px, 10.94vw, 210px);
}
.p_t220 {
    padding-top: clamp(170px, 11.46vw, 220px);
}
.p_t230 {
    padding-top: clamp(170px, 11.98vw, 230px);
}
.p_t250 {
    padding-top: clamp(180px, 13.02vw, 250px);
}

.p_b5 {
    padding-bottom: 5px;
}
.p_b10 {
    padding-bottom: clamp(5px, 0.52vw, 10px);
}
.p_b15 {
    padding-bottom: clamp(8px, 0.78vw, 15px);
}
.p_b20 {
    padding-bottom: clamp(10px, 1.04vw, 20px);
}
.p_b30 {
    padding-bottom: clamp(15px, 1.56vw, 30px);
}
.p_b40 {
    padding-bottom: clamp(20px, 2.08vw, 40px);
}
.p_b50 {
    padding-bottom: clamp(35px, 2.6vw, 50px);
}
.p_b60 {
    padding-bottom: clamp(30px, 3.13vw, 60px);
}
.p_b70 {
    padding-bottom: clamp(35px, 3.65vw, 70px);
}
.p_b80 {
    padding-bottom: clamp(40px, 4.17vw, 80px);
}
.p_b90 {
    padding-bottom: clamp(45px, 4.69vw, 90px);
}
.p_b100 {
    padding-bottom: clamp(70px, 5.21vw, 100px);
}
.p_b110 {
    padding-bottom: clamp(75px, 5.73vw, 110px);
}
.p_b120 {
    padding-bottom: clamp(60px, 6.25vw, 120px);
}
.p_b130 {
    padding-bottom: clamp(95px, 15.29vw, 130px);
}
.p_b140 {
    padding-bottom: clamp(80px, 7.29vw, 140px);
}
.p_b150 {
    padding-bottom: clamp(105px, 7.81vw, 150px);
}
.p_b160 {
    padding-bottom: clamp(110px, 8.33vw, 160px);
}
.p_b170 {
    padding-bottom: clamp(120px, 8.85vw, 170px);
}
.p_b200 {
    padding-bottom: clamp(150px, 10.42vw, 200px);
}
.p_b210 {
    padding-bottom: clamp(160px, 10.94vw, 210px);
}
.p_b230 {
    padding-bottom: clamp(170px, 11.98vw, 230px);
}
.p_b250 {
    padding-bottom: clamp(180px, 13.02vw, 250px);
}

body.modal-open {
    padding-right: 0 !important;
}

/* 


RWD


*/
@media (max-width: 750px) {
    .max_1100,
    .max_1300,
    .max_1500,
    .max_1850,
    .max_1400,
    .max_1200,
    .max_1330,
    .max_1360,
    .max_1545,
	.max_1600 {
        width: calc(100% - (6.13vw * 2));
    }

    .pc_br,
    .pc_img,
    .only_pc {
        display: none;
    }
    .mo_br,
    .mo_img,
    .only_mo {
        display: block;
    }
	
	.youtube::before {
		height: clamp(13px, 3.47vw, 26px) !important;
	}
	.shorts::before {
		width: clamp(13px, 3.47vw, 26px) !important;
	}
	
	.mo_m_t20 {
		margin-top: clamp(10px, 2.67vw, 20px);
	}
	.mo_m_t30 {
		margin-top: clamp(15px, 4.00vw, 30px);
	}
	.mo_m_b20 {
		margin-bottom: clamp(10px, 2.67vw, 20px);
	}
	.mo_m_r0 {
		margin-right: 0;
	}
	.mo_m_r10 {
		margin-right: clamp(5px, 1.33vw, 10px);
	} 
	.mo_m_r20 {
		margin-right: clamp(8px, 2.67vw, 20px);
	}
	.mo_m_r40 {
		margin-right: clamp(20px, 5.33vw, 40px);
	}
	.mo_m_l0 {
		margin-left: 0;
	}
	.mo_m_l10 {
		margin-left: clamp(5px, 1.33vw, 10px);
	}
	.mo_m_l20 {
		margin-left: clamp(8px, 2.67vw, 20px);
	}
	.mo_m_0_10 {
		margin: 0 clamp(5px, 1.33vw, 10px);
	}
	.mo_m_0_20 {
		margin: 0 clamp(10px, 2.67vw, 20px);
	}

    /* mo padding */
    .mo_p_t10 {
        padding-top: clamp(5px, 1.33vw, 10px);
    }
    .mo_p_t20 {
        padding-top: clamp(10px, 2.67vw, 20px);
    }
    .mo_p_t30 {
        padding-top: clamp(15px, 4vw, 30px);
    }
    .mo_p_t40 {
        padding-top: clamp(20px, 5.33vw, 40px);
    }
    .mo_p_t50 {
        padding-top: clamp(25px, 6.67vw, 50px);
    }
    .mo_p_t60 {
        padding-top: clamp(30px, 8vw, 60px);
    }
    .mo_p_t70 {
        padding-top: clamp(35px, 9.33vw, 70px);
    }
    .mo_p_t80 {
        padding-top: clamp(40px, 10.67vw, 80px);
    }
    .mo_p_t90 {
        padding-top: clamp(50px, 12vw, 90px);
    }
    .mo_p_t100 {
        padding-top: clamp(50px, 13.33vw, 100px);
    }
    .mo_p_t110 {
        padding-top: clamp(55px, 14.67vw, 110px);
    }
    .mo_p_t120 {
        padding-top: clamp(70px, 16vw, 120px);
    }
    .mo_p_t140 {
        padding-top: clamp(80px, 18.67vw, 140px);
    }
    .mo_p_t150 {
        padding-top: clamp(125px, 20vw, 150px);
    }
    .mo_p_t200 {
        padding-top: clamp(100px, 26.67vw, 200px);
    }
    .mo_p_t230 {
        padding-top: clamp(110px, 30.67vw, 230px);
    }
    .mo_p_t250 {
        padding-top: clamp(125px, 33.33vw, 250px);
    }

    .mo_p_b10 {
        padding-bottom: clamp(5px, 1.33vw, 10px);
    }
    .mo_p_b20 {
        padding-bottom: clamp(10px, 2.67vw, 20px);
    }
    .mo_p_b30 {
        padding-bottom: clamp(15px, 4vw, 30px);
    }
    .mo_p_b40 {
        padding-bottom: clamp(20px, 5.33vw, 40px);
    }
    .mo_p_b50 {
        padding-bottom: clamp(25px, 6.67vw, 50px);
    }
    .mo_p_b60 {
        padding-bottom: clamp(30px, 8vw, 60px);
    }
    .mo_p_b70 {
        padding-bottom: clamp(35px, 9.33vw, 70px);
    }
    .mo_p_b80 {
        padding-bottom: clamp(40px, 10.67vw, 80px);
    }
    .mo_p_b90 {
        padding-bottom: clamp(45px, 12vw, 90px);
    }
    .mo_p_b100 {
        padding-bottom: clamp(50px, 13.33vw, 100px);
    }
    .mo_p_b110 {
        padding-bottom: clamp(55px, 14.67vw, 110px);
    }
    .mo_p_b120 {
        padding-bottom: clamp(70px, 16vw, 120px);
    }
    .mo_p_b140 {
        padding-bottom: clamp(80px, 18.67vw, 140px);
    }
    .mo_p_b150 {
        padding-bottom: clamp(125px, 20vw, 150px);
    }
    .mo_p_b200 {
        padding-bottom: clamp(100px, 26.67vw, 200px);
    }
	
	.mo_w_100p {
		width: 100% !important;
	}
	.mo_w_100 {
		width: clamp(50px, 13.33vw, 100px) !important;
	}
	.mo_w_110 {
		width: clamp(55px, 14.67vw, 110px) !important;
	}
	.mo_w_115 {
		width: clamp(58px, 15.33vw, 115px) !important;
	}
	.mo_w_120 {
		width:clamp(60px, 16.00vw, 120px) !important;
	}
	.mo_w_130 {
		width: clamp(65px, 17.33vw, 130px) !important;
	}
	.mo_w_140 {
		width: clamp(62px, 18.67vw, 140px) !important;
	}
	.mo_w_150 {
		width: clamp(75px, 20.00vw, 150px) !important;
	}
	.mo_w_180 {
		width: clamp(90px, 24.00vw, 180px) !important;
	}
	.mo_w_200 {
		width: clamp(100px, 26.67vw, 200px) !important;
	}
	.mo_w_230 {
		width: clamp(115px, 30.67vw, 230px) !important;
	}
	.mo_w_270 {
		width: clamp(135px, 36.00vw, 270px) !important;
	}
	.mo_w_300 {
		width: clamp(150px, 40.00vw, 300px) !important;
	}
	.mo_w_330 {
		width: clamp(165px, 44.00vw, 330px) !important;
	}
	.mo_w_360 {
		width: clamp(180px, 48.00vw, 360px) !important;
	}
}