@charset "UTF-8";
/* display */
.display-b {
    display: block;
}
.display-i {
    display: inline;
}
.display-ib {
    display: inline-block;
}
.display-f {
    display: flex;
}
.display-g {
    display: grid;
}
.display-n {
    display: none;
}

/* display align */
.justify-c {
    justify-content: center;
}
.justify-sb {
    justify-content: space-between;
}
.justify-fs {
    justify-content: flex-start;
}
.justify-fe {
    justify-content: flex-end;
}
.align-items-c {
    align-items: center;
}
.align-items-fs {
    align-items: flex-start;
}
.align-items-fe {
    align-items: flex-end;
}
.align-content-c {
    align-content: center;
}
.align-content-fs {
    align-content: flex-start;
}
.align-content-fe {
    align-content: flex-end;
}
.align-content-sb {
    align-content: space-between;
}
.flex-wrap {
    flex-wrap: wrap;
}

/* text- align */
.text-align-c {
    text-align: center;
}
.text-align-l {
    text-align: left;
}
.text-align-r {
    text-align: right;
}
.text-align-j {
    text-align: justify;
}

/* margin */
.margin-c {
    margin: 0 auto;
}
.margin-l-0 {
    margin-right: auto;
    margin-left: 0;
}
.margin-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;
}

/* font family */
/*
.font_pretendard {
  font-family: "Pretendard", sans-serif;
}
.font_noto_serif {
  font-family: "Noto Serif KR", "Pretendard", sans-serif;
}
*/

/* width */
.max_460 {
    max-width: 460px;
    width: 92%;
}
.max_750 {
    max-width: 750px;
    width: 92%;
}
.max_780 {
    max-width: 780px;
    width: 92%;
}
.max_800 {
    max-width: 800px;
    width: 92%;
}
.max_850 {
    max-width: 850px;
    width: 92%;
}
.max_1100 {
    max-width: 1100px;
    width: 92%;
}
.max_1400 {
    max-width: 1400px;
    width: 92%;
}

/* color */
.font_point {
    color: #c72a1c;
}
.font_white {
    color: #fff;
}
.bg_point {
    background: #c72a1c;
}
.bg_white {
    background: #fff;
}

/* 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*/
.padding-t10 {
    padding-top: clamp(7.5px, 0.75vw, 10px);
}
.padding-t20 {
    padding-top: clamp(15px, 1.5vw, 20px);
}
.padding-t30 {
    padding-top: clamp(22.5px, 2.25vw, 30px);
}
.padding-t40 {
    padding-top: clamp(30px, 3vw, 40px);
}
.padding-t50 {
    padding-top: clamp(37.5px, 3.75vw, 50px);
}
.padding-t60 {
    padding-top: clamp(45px, 4.5vw, 60px);
}
.padding-t70 {
    padding-top: clamp(52.5px, 5.25vw, 70px);
}
.padding-t80 {
    padding-top: clamp(60px, 6vw, 80px);
}
.padding-t90 {
    padding-top: clamp(67.5px, 6.75vw, 90px);
}
.padding-t100 {
    padding-top: clamp(75px, 7.5vw, 100px);
}
.padding-t110 {
    padding-top: clamp(82.5px, 8.25vw, 110px);
}
.padding-t120 {
    padding-top: clamp(90px, 9vw, 120px);
}
.padding-t130 {
    padding-top: clamp(97.5px, 9.75vw, 130px);
}
.padding-t140 {
    padding-top: clamp(105px, 10.5vw, 140px);
}
.padding-t150 {
    padding-top: clamp(112.5px, 11.25vw, 150px);
}
.padding-t160 {
    padding-top: clamp(120px, 12vw, 160px);
}
.padding-t170 {
    padding-top: clamp(127.5px, 12.75vw, 170px);
}
.padding-t180 {
    padding-top: clamp(135px, 13.5vw, 180px);
}
.padding-t190 {
    padding-top: clamp(142.5px, 14.25vw, 190px);
}
.padding-t200 {
    padding-top: clamp(150px, 15vw, 200px);
}

.padding-b10 {
    padding-bottom: clamp(7.5px, 0.75vw, 10px);
}
.padding-b20 {
    padding-bottom: clamp(15px, 1.5vw, 20px);
}
.padding-b30 {
    padding-bottom: clamp(22.5px, 2.25vw, 30px);
}
.padding-b40 {
    padding-bottom: clamp(30px, 3vw, 40px);
}
.padding-b50 {
    padding-bottom: clamp(37.5px, 3.75vw, 50px);
}
.padding-b60 {
    padding-bottom: clamp(45px, 4.5vw, 60px);
}
.padding-b70 {
    padding-bottom: clamp(52.5px, 5.25vw, 70px);
}
.padding-b80 {
    padding-bottom: clamp(60px, 6vw, 80px);
}
.padding-b90 {
    padding-bottom: clamp(67.5px, 6.75vw, 90px);
}
.padding-b100 {
    padding-bottom: clamp(75px, 7.5vw, 100px);
}
.padding-b110 {
    padding-bottom: clamp(82.5px, 8.25vw, 110px);
}
.padding-b120 {
    padding-bottom: clamp(90px, 9vw, 120px);
}
.padding-b130 {
    padding-bottom: clamp(97.5px, 9.75vw, 130px);
}
.padding-b140 {
    padding-bottom: clamp(105px, 10.5vw, 140px);
}
.padding-b150 {
    padding-bottom: clamp(112.5px, 11.25vw, 150px);
}
.padding-b160 {
    padding-bottom: clamp(120px, 12vw, 160px);
}
.padding-b170 {
    padding-bottom: clamp(127.5px, 12.75vw, 170px);
}
.padding-b180 {
    padding-bottom: clamp(135px, 13.5vw, 180px);
}
.padding-b190 {
    padding-bottom: clamp(142.5px, 14.25vw, 190px);
}
.padding-b200 {
    padding-bottom: clamp(150px, 15vw, 200px);
}

/* 

RWD

*/
@media (max-width: 720px) {
    /*
    .max_1100,
    .max_1300,
    .max_1500 {
        width: calc(100% - (45px * 2));
    }

    .pc_br,
    .pc_img,
    .only_pc {
        display: none;
    }
    .mo_br,
    .mo_img,
    .only_mo {
        display: block;
    }

    .mo-padding-t10 {
        padding-top: clamp(7.5px, 1.39vw, 10px);
    }
    .mo-padding-t20 {
        padding-top: clamp(15px, 2.78vw, 20px);
    }
    .mo-padding-t30 {
        padding-top: clamp(22.5px, 4.17vw, 30px);
    }
    .mo-padding-t40 {
        padding-top: clamp(30px, 5.56vw, 40px);
    }
    .mo-padding-t50 {
        padding-top: clamp(37.5px, 6.94vw, 50px);
    }
    .mo-padding-t60 {
        padding-top: clamp(45px, 8.33vw, 60px);
    }
    .mo-padding-t70 {
        padding-top: clamp(52.5px, 9.72vw, 70px);
    }
    .mo-padding-t80 {
        padding-top: clamp(60px, 11.11vw, 80px);
    }
    .mo-padding-t90 {
        padding-top: clamp(67.5px, 12.5vw, 90px);
    }
    .mo-padding-t100 {
        padding-top: clamp(75px, 13.89vw, 100px);
    }
    .mo-padding-t110 {
        padding-top: clamp(82.5px, 15.28vw, 110px);
    }
    .mo-padding-t120 {
        padding-top: clamp(90px, 16.67vw, 120px);
    }
    .mo-padding-t130 {
        padding-top: clamp(97.5px, 18.06vw, 130px);
    }
    .mo-padding-t140 {
        padding-top: clamp(105px, 19.44vw, 140px);
    }
    .mo-padding-t150 {
        padding-top: clamp(112.5px, 20.83vw, 150px);
    }
    .mo-padding-t160 {
        padding-top: clamp(120px, 22.22vw, 160px);
    }
    .mo-padding-t170 {
        padding-top: clamp(127.5px, 23.61vw, 170px);
    }
    .mo-padding-t180 {
        padding-top: clamp(135px, 25vw, 180px);
    }
    .mo-padding-t190 {
        padding-top: clamp(142.5px, 26.39vw, 190px);
    }
    .mo-padding-t200 {
        padding-top: clamp(150px, 27.78vw, 200px);
    }

    .mo-padding-b10 {
        padding-bottom: clamp(7.5px, 1.39vw, 10px);
    }
    .mo-padding-b20 {
        padding-bottom: clamp(15px, 2.78vw, 20px);
    }
    .mo-padding-b30 {
        padding-bottom: clamp(22.5px, 4.17vw, 30px);
    }
    .mo-padding-b40 {
        padding-bottom: clamp(30px, 5.56vw, 40px);
    }
    .mo-padding-b50 {
        padding-bottom: clamp(37.5px, 6.94vw, 50px);
    }
    .mo-padding-b60 {
        padding-bottom: clamp(45px, 8.33vw, 60px);
    }
    .mo-padding-b70 {
        padding-bottom: clamp(52.5px, 9.72vw, 70px);
    }
    .mo-padding-b80 {
        padding-bottom: clamp(60px, 11.11vw, 80px);
    }
    .mo-padding-b90 {
        padding-bottom: clamp(67.5px, 12.5vw, 90px);
    }
    .mo-padding-b100 {
        padding-bottom: clamp(75px, 13.89vw, 100px);
    }
    .mo-padding-b110 {
        padding-bottom: clamp(82.5px, 15.28vw, 110px);
    }
    .mo-padding-b120 {
        padding-bottom: clamp(90px, 16.67vw, 120px);
    }
    .mo-padding-b130 {
        padding-bottom: clamp(97.5px, 18.06vw, 130px);
    }
    .mo-padding-b140 {
        padding-bottom: clamp(105px, 19.44vw, 140px);
    }
    .mo-padding-b150 {
        padding-bottom: clamp(112.5px, 20.83vw, 150px);
    }
    .mo-padding-b160 {
        padding-bottom: clamp(120px, 22.22vw, 160px);
    }
    .mo-padding-b170 {
        padding-bottom: clamp(127.5px, 23.61vw, 170px);
    }
    .mo-padding-b180 {
        padding-bottom: clamp(135px, 25vw, 180px);
    }
    .mo-padding-b190 {
        padding-bottom: clamp(142.5px, 26.39vw, 190px);
    }
    .mo-padding-b200 {
        padding-bottom: clamp(150px, 27.78vw, 200px);
    }
	*/
}

@media (max-width: 750px) {
    .max_460,
    .max_750,
    .max_780,
    .max_800,
    .max_850,
    .max_1100,
    .max_1300,
    .max_1400,
    .max_1500 {
        max-width: unset;
        width: calc(100% - (5.33vw * 2)); /* 45px * 2 */
    }

    .pc_br,
    .pc_img,
    .only_pc {
        display: none;
    }
    .mo_br,
    .mo_img,
    .only_mo {
        display: block;
    }

    /* mo padding */
    .mo-padding-t10 {
        padding-top: clamp(7.5px, 1.33vw, 10px);
    }
    .mo-padding-t20 {
        padding-top: clamp(15px, 2.67vw, 20px);
    }
    .mo-padding-t30 {
        padding-top: clamp(22.5px, 4vw, 30px);
    }
    .mo-padding-t40 {
        padding-top: clamp(30px, 5.33vw, 40px);
    }
    .mo-padding-t50 {
        padding-top: clamp(37.5px, 6.67vw, 50px);
    }
    .mo-padding-t60 {
        padding-top: clamp(45px, 8vw, 60px);
    }
    .mo-padding-t70 {
        padding-top: clamp(52.5px, 9.33vw, 70px);
    }
    .mo-padding-t80 {
        padding-top: clamp(60px, 10.67vw, 80px);
    }
    .mo-padding-t90 {
        padding-top: clamp(67.5px, 12vw, 90px);
    }
    .mo-padding-t100 {
        padding-top: clamp(75px, 13.33vw, 100px);
    }
    .mo-padding-t110 {
        padding-top: clamp(82.5px, 14.67vw, 110px);
    }
    .mo-padding-t120 {
        padding-top: clamp(90px, 16vw, 120px);
    }
    .mo-padding-t130 {
        padding-top: clamp(97.5px, 17.33vw, 130px);
    }
    .mo-padding-t140 {
        padding-top: clamp(105px, 18.67vw, 140px);
    }
    .mo-padding-t150 {
        padding-top: clamp(112.5px, 20vw, 150px);
    }
    .mo-padding-t160 {
        padding-top: clamp(120px, 21.33vw, 160px);
    }
    .mo-padding-t170 {
        padding-top: clamp(127.5px, 22.67vw, 170px);
    }
    .mo-padding-t180 {
        padding-top: clamp(135px, 24vw, 180px);
    }
    .mo-padding-t190 {
        padding-top: clamp(142.5px, 25.33vw, 190px);
    }
    .mo-padding-t200 {
        padding-top: clamp(150px, 26.67vw, 200px);
    }

    .mo-padding-b10 {
        padding-bottom: clamp(7.5px, 1.33vw, 10px);
    }
    .mo-padding-b20 {
        padding-bottom: clamp(15px, 2.67vw, 20px);
    }
    .mo-padding-b30 {
        padding-bottom: clamp(22.5px, 4vw, 30px);
    }
    .mo-padding-b40 {
        padding-bottom: clamp(30px, 5.33vw, 40px);
    }
    .mo-padding-b50 {
        padding-bottom: clamp(37.5px, 6.67vw, 50px);
    }
    .mo-padding-b60 {
        padding-bottom: clamp(45px, 8vw, 60px);
    }
    .mo-padding-b70 {
        padding-bottom: clamp(52.5px, 9.33vw, 70px);
    }
    .mo-padding-b80 {
        padding-bottom: clamp(60px, 10.67vw, 80px);
    }
    .mo-padding-b90 {
        padding-bottom: clamp(67.5px, 12vw, 90px);
    }
    .mo-padding-b100 {
        padding-bottom: clamp(75px, 13.33vw, 100px);
    }
    .mo-padding-b110 {
        padding-bottom: clamp(82.5px, 14.67vw, 110px);
    }
    .mo-padding-b120 {
        padding-bottom: clamp(90px, 16vw, 120px);
    }
    .mo-padding-b130 {
        padding-bottom: clamp(97.5px, 17.33vw, 130px);
    }
    .mo-padding-b140 {
        padding-bottom: clamp(105px, 18.67vw, 140px);
    }
    .mo-padding-b150 {
        padding-bottom: clamp(112.5px, 20vw, 150px);
    }
    .mo-padding-b160 {
        padding-bottom: clamp(120px, 21.33vw, 160px);
    }
    .mo-padding-b170 {
        padding-bottom: clamp(127.5px, 22.67vw, 170px);
    }
    .mo-padding-b180 {
        padding-bottom: clamp(135px, 24vw, 180px);
    }
    .mo-padding-b190 {
        padding-bottom: clamp(142.5px, 25.33vw, 190px);
    }
    .mo-padding-b200 {
        padding-bottom: clamp(150px, 26.67vw, 200px);
    }
}

/*  */
/*  */
/*  */
/*  */
/*  */
main {
    background: #fafafa;
}

.red_btn {
    background: #c72a1c;
    color: #fff;
    padding: 13px;
    border-radius: 5px;
    text-align: center;
    display: block;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s;
}
.red_btn:hover {
    background: #c72a1c;
    color: #fff;
}
.white_btn {
    background: #fff;
    color: #c72a1c;
    border: 2px solid #c72a1c;
    padding: 13px;
    border-radius: 5px;
    text-align: center;
    display: block;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s;
}
.white_btn:hover {
    background: #c72a1c;
    color: #fff;
}

.link_ico {
    vertical-align: top;
    margin-top: 3px;
    margin-left: 5px;
    width: 8px;
    height: 8px;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/link_ico.png);
}

@media (max-width: 750px) {
    .red_btn {
        font-size: clamp(14px, 4.27vw, 32px);
        height: clamp(45px, 14.67vw, 110px);
        line-height: clamp(45px, 14.67vw, 110px);
        padding: 0;
    }
    .white_btn {
        font-size: clamp(14px, 4.27vw, 32px);
        height: clamp(45px, 14.67vw, 110px);
        line-height: clamp(45px, 14.67vw, 110px);
        padding: 0;
    }
    .link_ico {
        width: clamp(7px, 1.87vw, 14px);
        height: clamp(7px, 1.87vw, 14px);
        margin-left: clamp(5px, 1.33vw, 10px);
    }
}
