@charset "UTF-8";
/* 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;
}

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

/* 기타 */
.bold {
    font-weight: bold;
}
.underline {
    text-decoration: underline;
}

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

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* font family */

/*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_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_1600 {
    max-width: 1600px;
    width: 90%;
}
.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_t10 {
    padding-top: clamp(5px, 0.52vw, 10px);
}
.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_b10 {
    padding-bottom: clamp(5px, 0.52vw, 10px);
}
.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_b200 {
    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);
}

/* 


RWD


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

    .pc_br,
    .pc_img,
    .only_pc {
        display: none;
    }
    .mo_br,
    .mo_img,
    .only_mo {
        display: block;
    }

    /* 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(50px, 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);
    }
}
