._certi{ width: 100%; position: relative; }
._certi .certicon{ padding-bottom: 150px; }


._certi .certicon .counts{ border-radius: 10px; overflow: hidden; box-sizing: border-box; color: #0d0d23; display: flex; margin-bottom: 120px; }
._certi .certicon .counts .bx{ width: 25%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; padding: 0 10px; box-sizing: border-box; }
._certi .certicon .counts .bx .flx{ display: flex; align-items: center; font-size: 80px; font-weight: 500; letter-spacing: -0.03em; }
._certi .certicon .counts .bx dl{ margin-top: 40px; font-size: 20px; letter-spacing: -0.03em; line-height: 1.4; }
._certi .certicon .counts .bx dl dt{ font-weight: 700; }
._certi .certicon .counts .bx dl dd{ font-weight: 300; font-size: calc(16 / 20 * 1em); opacity: 0.3; margin-top: 13px; }
._certi .certicon .counts .bx::after{ content: ''; display: block; width: 1px; height: calc(120 / 255 * 100%); position: absolute; top: 50%; transform: translateY(-50%); right: -1px; background-color: rgba(13,13,35,0.2); }

._certi .certicon .certilist{ margin-top: 25px; display: flex; gap: 30px; flex-wrap: wrap; }
._certi .certicon .certilist li{ width: calc((100% - 120px) / 5); position: relative; cursor: pointer; }
._certi .certicon .certilist li .inn{ box-sizing: border-box; width: 100%; height: 100%; }
._certi .certicon .certilist li .inn .thumb{ width: 100%; overflow: hidden; aspect-ratio: 277 / 440; position: relative; border: 1px solid rgba(13, 13, 35, 0.2); box-sizing: border-box; }
._certi .certicon .certilist li .inn .thumb img{ width: 100%; height: 100%; object-fit: cover; }
._certi .certicon .certilist li .over{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(13, 13, 35, 0.28); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 24px; color: #fff; transform: translateY(20%); opacity: 0; transition-duration: 0.4s; }
._certi .certicon .certilist li .inn dl{ font-size: 18px; letter-spacing: -0.03em; text-align: center; margin-top: 17px; }
._certi .certicon .certilist li .inn dl dt{ font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
._certi .certicon .certilist li .inn dl dd{ font-size: calc(16 / 18 * 1em); letter-spacing: -0.03em; color: rgba(13, 13, 35, 0.5); margin-top: 15px; font-weight: 300; }

@media screen and (min-width: 821px){
    ._certi .certicon .tabs > li:hover > a{ background-color: #0d0d23; color: #fff; }
    ._certi .certicon .certilist li:hover .over{ opacity: 1; transform: translateY(0); }
}


._certi .certicon .ipr_list{ display: flex; align-items: flex-start; margin-top: 120px; }


._certi .certicon .ipr_list .rightbx{ width: calc(1235 / 1520 * 100%); }
._certi .certicon .ipr_list .rightbx .certilist{ gap: 20px; }
._certi .certicon .ipr_list .rightbx .certilist li{ width: calc((100% - 80px) / 5); }

._certi .certicon .ipr_list .rightbx .iprbx{ margin-bottom: 70px; }
._certi .certicon .ipr_list .rightbx .iprbx strong{ font-size: 24px; letter-spacing: -0.02em; font-weight: 600; display: block; border-bottom: 1px solid rgba(13, 13, 35, 0.2); padding-bottom: 30px; }

@media screen and (max-width: 1280px){
    ._certi .certicon{ margin-top: 30px; }
    ._certi .certicon .counts{ padding: 35px 0; }
    ._certi .certicon .counts .bx .flx{ font-size: 60px; }
    ._certi .certicon .counts .bx dl{ margin-top: 25px; font-size: 18px; }
    ._certi .certicon .counts .bx dl dd{ margin-top: 8px; }
    ._certi .certicon .certilist{ gap: 20px; }
    ._certi .certicon .certilist li{ width: calc((100% - 60px) / 4); }
    ._certi .certicon .certilist li .inn dl{ margin-top: 10px; font-size: 16px; }
    ._certi .certicon .certilist li .inn dl dd{ margin-top: 10px; }

    
    ._certi .certicon .ipr_list .rightbx .certilist li{ width: calc((100% - 40px) / 3); }
}

@media screen and (max-width: 820px){
    ._certi .certicon{ margin-top: 20px; padding-bottom: 100px; }
    ._certi .certicon .counts{ padding: 25px 0; flex-wrap: wrap; gap: 20px 0; }
    ._certi .certicon .counts .bx{ width: 50%; }
    ._certi .certicon .counts .bx .flx{ font-size: 40px; }
    ._certi .certicon .counts .bx dl{ margin-top: 15px; font-size: 16px; }
    ._certi .certicon .counts .bx dl dd{ margin-top: 5px; }
    ._certi .certicon .certilist{ gap: 10px; }
    ._certi .certicon .certilist li{ width: calc((100% - 10px) / 2); }
    ._certi .certicon .certilist li .inn dl{ margin-top: 7px; font-size: 14px; }
    ._certi .certicon .certilist li .inn dl dd{ margin-top: 5px; font-size: 13px; }

    ._certi .certicon .ipr_list{ margin-top: 40px; }
    ._certi .certicon .ipr_list .rightbx .iprbx strong{ font-size: 20px; padding-bottom: 15px; }
    ._certi .certicon .ipr_list .rightbx .certilist li{ width: calc((100% - 20px) / 2); }
    
}

@media screen and (max-width: 500px){
    ._certi .certicon{ margin-top: 15px; }
    ._certi .certicon .counts{ padding: 20px 0; }
    ._certi .certicon .counts .bx .flx{ font-size: 30px; }
    ._certi .certicon .counts .bx dl{ margin-top: 10px; font-size: 14px; }
    ._certi .certicon .certilist{ margin-top: 10px; }

    ._certi .certicon .ipr_list .rightbx{ width: 100%; }
}





.layerview{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 999999; display: none; }
.layerview .bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 0; background-color: rgba(13, 13, 35, 0.9); }
.layerview .inn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; text-align: center; color: #fff; }
.layerview .inn .img{ width: 95%; max-width: 478px; margin: 0 auto; aspect-ratio: 478 / 675; overflow: hidden; }
.layerview .inn .img img{ width: 100%; height: 100%; object-fit: cover; }
.layerview .inn dl dt{ font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.3; margin-top: 25px; }
.layerview .inn dl dd{ font-size: 16px; letter-spacing: -0.03em; color: #b1b1b1; margin-top: 10px; }
.layerview .inn .close{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto; margin-top: 15px; cursor: pointer; transition-duration: 0.2s; }

@media screen and (min-width: 821px){
    .layerview .inn .close:hover{ background-color: rgba(255,255,255,0.2); }
}

@media screen and (max-width: 1280px){
    .layerview .inn dl dt{ font-size: 20px; }
}

@media screen and (max-width: 820px){
    .layerview .inn{ width: 90%; }
    .layerview .inn dl dt{ font-size: 16px; }
    .layerview .inn dl dd{ font-size: 14px; margin-top: 7px; }
}