._case .casecon{ width: 100%; position: relative; margin-top: 55px; padding-bottom: 150px; }
._case .casecon .caselist{  }
._case .casecon .caselist li{ width: 100%; border-bottom: 1px solid rgba(13, 13, 35, 0.2); }
._case .casecon .caselist li > a{ display: block; padding: 30px 0; box-sizing: border-box; }
._case .casecon .caselist li > a .inn{ display: flex; align-items: center; }
._case .casecon .caselist li > a .inn .thumb{ width: calc(620 / 1520 * 100%); aspect-ratio: 620 / 380; overflow: hidden; border-radius: 10px; }
._case .casecon .caselist li > a .inn .thumb img{ width: 100%; height: 100%; object-fit: cover; }
._case .casecon .caselist li > a .inn .rbx{ width: calc(900 / 1520 * 100%); padding: 0 calc(145 / 1520 * 100%); box-sizing: border-box; }
._case .casecon .caselist li > a .inn .rbx dl{ font-size: 36px; letter-spacing: -0.03em; line-height: 1.4; }
._case .casecon .caselist li > a .inn .rbx dl dt{ font-weight: 600; }
._case .casecon .caselist li > a .inn .rbx dl dd{ font-size: calc(20 / 36 * 1em); letter-spacing: -0.03em; color: #b1b1b1; margin-top: 17px; }
._case .bottom{ display: flex; margin-top: 40px; font-size: 18px; letter-spacing: -0.03em; }
._case .bottom .cate{ display: flex; align-items: center; justify-content: center; text-align: center; width: 63px; height: 35px; color: #fff; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
._case .bottom .cate._1{ background-color: #2d2f80; }
._case .bottom .cate._2{ background-color: #0d55a6; }
._case .bottom .cate._3{ background-color: #12aebb; }
._case .bottom .cate._4{ background-color: #bdfeee; color: #0d0d23; }
._case .bottom .cate._5{ background-color: #f5f7fb; color: #0d0d23; }

._case .bottom span{ margin: 0 14px; display: flex; align-items: center; height: 35px; }
._case .bottom p{ font-weight: 600; line-height: 1.6; padding-top: 0.2em; }

._case .pagination{ margin-top: 45px; }


@media screen and (max-width: 1280px){
    ._case .casecon .caselist li > a .inn .rbx{ padding: 0 30px; }
    ._case .casecon .caselist li > a .inn .rbx dl{ font-size: 24px; }
    ._case .casecon .caselist li > a .inn .rbx dl dd{ margin-top: 10px; }
    ._case .bottom{ margin-top: 20px; font-size: 16px; }
    ._case .bottom .cate{ height: 28px; width: 53px; }
    ._case .bottom span{ height: 28px; }
    ._case .bottom p{ text-align: left; padding-top: 0; }
}

@media screen and (max-width: 820px){
    ._case .casecon{ margin-top: 30px; }
    ._case .casecon .caselist li{ max-width: 500px; margin: 0 auto; }
    ._case .casecon .caselist li > a .inn{ flex-direction: column;  }
    ._case .casecon .caselist li > a .inn .thumb{ width: 100%;  }
    ._case .casecon .caselist li > a .inn .rbx{ width: 100%; margin-top: 20px; padding: 0; }
    ._case .casecon .caselist li > a .inn .rbx dl{ font-size: 20px; }
    ._case .casecon .caselist li > a .inn .rbx dl dd{ margin-top: 5px; }
    ._case .bottom{  font-size: 14px; justify-content: center; max-width: 500px; margin: 0 auto; margin-top: 10px; }
    ._case .bottom .cate{ width: 50px; height: 28px; }
    ._case .bottom p{ padding-top: 0.25em; }
}

@media screen and (max-width: 500px){
    
}


._case .caseview{ width: 100%; position: relative; padding: 200px 0; }
._case .caseview .titlebar .realtitle{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: baseline; margin-top: 20px; }
._case .caseview .titlebar .realtitle h1{ font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.4; }

._case .caseview .titlebar .realtitle > p{ text-align: right; font-size: 20px; letter-spacing: -0.03em; color: #b1b1b1; line-height: 1.4; margin-left: auto; margin-top: 10px; }


._case .gradBtn{ margin-top: 53px; }

@media screen and (max-width: 1280px){
    ._case .caseview{ padding: 150px 0; }
    ._case .caseview .titlebar .realtitle{ margin-top: 15px; }
    ._case .caseview .titlebar .realtitle h1{ font-size: 35px; }
    ._case .caseview .titlebar .realtitle > p{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    ._case .caseview{ padding: 70px 0; }
    
    ._case .caseview .bottom{ justify-content: flex-start; max-width: unset; }
    ._case .caseview .titlebar .realtitle{ margin-top: 10px; }
    ._case .caseview .titlebar .realtitle h1{ font-size: 28px; }
    ._case .caseview .titlebar .realtitle > p{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    ._case .caseview .titlebar .realtitle{ margin-top: 7px; }
    ._case .caseview .titlebar .realtitle h1{ font-size: 24px; }
    ._case .caseview .titlebar .realtitle > p{ font-size: 14px; }
}