@charset "utf-8";
/* .mv_wrap *, .inner.ld *{font-size: 1.5rem !important;} */
.mv_wrap{width: 100%; height: 830px; background: linear-gradient(138.63deg, #cda2ff 23.41%, #953AFF 63.59%); display: flex; padding: 8% 12%; position: relative;}
.mv_txt{display: flex; flex-direction: column; gap: 50px; opacity: 0; transition: 1s; z-index: 1;}
.mv_txt.on{opacity: 1;}
.mv_txt *{color: #fff;}
.mv_txt h2{font-size: 6.4rem; line-height: 1.3; font-weight: 900;}
.mv_txt span{font-size: 3.2rem;}
.mv_txt a{font-size: 2.4rem;}
.mv_img{position: absolute; right: 20px; bottom: 120px; width: 50%; height: 680px; background-image: url(/public/images/landing/mv_bg.png); background-size: 95%; background-repeat: no-repeat; background-position: 50% 50%; z-index: 0;}
.mv_btn{display: flex; gap: 10px;}
.mv_btn a{padding: 15px 40px; border-radius: 5px;}
.mv_btn a.sign{background-color: #fff; color: #000;}
.mv_btn a.add_pro{background-color: #222;}

/* 섹션공통 */
.txt_red{color: #FF4E4E;}
.inner.id{max-width: 1400px; margin: 0 auto;}
.ld_sect{margin: 200px 0;}
.sect_txt{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px;}
.sect_txt span{font-size: 3.2rem;}
.sect_txt div{font-size: 4rem; font-weight: 900;}
.sect_subject{font-size: 3.6rem; font-weight: 900; line-height: 1.6;}
.sect_body{font-size: 20px; line-height: 1.5;}
.sect_img{display: flex; justify-content: space-between; margin-top: 50px;}
.sect_img.info img{width: 100%;}
.sect_img img{max-width: 417px;}

/* 섹션1 */

/* 섹션2 */
.ld_sect.chart .sect_img{background-color: #FEDDE2; border-radius: 30px; padding: 50px;}
.sect_img_txt{display: flex; flex-direction: column; gap: 20px; justify-content: center;}
.sect_img_box{width: 62%; display: flex; flex-wrap: wrap; gap: 25px;}
.sect_img_box img{width: 48%; flex-basis: 45%;}

/* 섹션4 */
.ld_sect.move{border-radius: 30px; background-color: #F0DDFE; padding: 50px; text-align: center;} 
.move .sect_subject,.move .sect_body{text-align: center;}
.sect_sign img{margin: 0 auto;}
.move .mv_btn{flex-direction: column; gap: 20px; margin-top: 50px;}
.move .mv_btn a{font-size: 2.4rem; padding: 10px 15px; width: 50%; margin: 0 auto;}

@media (max-width:1850px) {
    .mv_txt span,.mv_txt a{font-size: 2vw;}
    .mv_img{width: 40vw;}
    .mv_txt h2{font-size: 4vw;}
}
@media (max-width:1000px) {
    .mv_img{transform: translate(-50%,-50%); left: 50%; top: 70%; width: 100%; height: 500px; background-size: 80%;}
    .sect_img{margin-top: 30px; flex-direction: column; gap: 20px; align-items: center;}
}
@media (max-width:780px) {
    .mv_img{background-size: 100%;}
    
    .sect_img_box{width: 100%; justify-content: center;}
    .sect_img_box img{width: 100%;}

    .ld_sect.chart .sect_img,.ld_sect.move{padding: 30px; text-align: center;}
    .sect_txt{gap: 10px;}
    .sect_txt span{font-size: 1.6rem;}
    .sect_txt div{font-size: 1.9rem;}
    
    .sect_subject{font-size: 1.9rem;}
    .sect_body{font-size: 1.2rem;}
    .move .mv_btn{margin-top: 20px;}
    .move .mv_btn a{font-size: 1.4rem; width: 100%;}
}

@media (max-width:500px) {
    .mv_wrap{padding: 70px 5%; flex-direction: column; height: 680px;}
    .mv_img{width: 100%;}
    .mv_txt{gap: 30px;}
    .mv_txt span{font-size: 1.4rem;}
    .mv_txt h2{font-size: 2.6rem;}
    .mv_txt a{font-size: 1.6rem; padding: 15px 10px; flex: 1; text-align: center;}

    .txt_wrap{display: flex; flex-direction: column; gap: 5px; align-items: center;}
    .inner.ld{width: 100%; padding: 0 5%;}
    .ld_sect{margin: 100px 0;}
    


}