@charset "utf-8";

/* 일반 게시판 */
    #wrap .no_data{text-align: center;font-size: var(--text-16);color: var(--black-color06);padding-block: 30px;}
    #wrap .bbs_table{position: relative;width: 100%;border-top: 1px solid var(--black-color00);text-align: center;}
    #wrap .bbs_table tr{transition: all 0.4s;}
    #wrap .bbs_table :where(th, td){font-size: var(--text-14);color: var(--black-color03);font-family: var(--font-type04);padding: clamp(15px, 2.6vw, 21px) 5px;line-height: 1.35;border-bottom: 1px solid var(--border-color01);}
    #wrap .bbs_table th{font-size: var(--text-16);color: var(--black-color00);font-weight: 700;}
    #wrap .bbs_table td{d:0;}
    #wrap .bbs_table .left{text-align: left;padding-inline: 0;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
    #wrap .bbs_table .title{font-size: var(--text-16);color: var(--black-color00); overflow: hidden;text-overflow:ellipsis;white-space:nowrap;}
    #wrap .bbs_table :where(.name, .status){font-size: var(--text-15);}
    #wrap .bbs_table a img{margin-right: clamp(4px, 0.6vw, 6px);width: clamp(13px, 1.8vw, 16px);vertical-align: text-bottom; display: inline;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            #wrap .bbs_table tbody tr:hover{background: var(--point-color06);}
        }
    @media (max-width:860px) {
        #wrap .bbs_table{display: block;}
        #wrap .bbs_table :where(tbody, tr, th, td){display: block; width: 100%; border:0;}
        #wrap .bbs_table thead{display: none;}
        #wrap .bbs_table tr{display: flex;flex-wrap: wrap;gap: 12px 20px;border-bottom: 1px solid var(--border-color01);padding: clamp(18px, 2.5vw, 20px) 15px;}
        #wrap .bbs_table td{width: auto;padding: 0;}
        #wrap .bbs_table .title{width: 100%;}
        #wrap .bbs_table .no{display: none;}
    }

/* 레이어 */
    .com-layer{position: fixed;inset: 0;z-index: 200;display: flex;align-items: center;justify-content: center;background: rgb(0 0 0 / 75%); transition: all 0.4s;}
        .com-layer:not(.on){opacity: 0; pointer-events: none;}
    .com-layer .close{position: absolute;top: 5px;left: calc(100% + clamp(10px, 3vw, 30px));width: clamp(20px, 3vw, 30px);aspect-ratio: auto 1;}
        .com-layer .close{&::before, &::after{position: absolute;content:'';width: 100%;height: 2px;background: var(--point-white);rotate: 45deg;top: 50%;left: 50%;translate: -50% -50%;}}
        .com-layer .close::after{rotate: -45deg;}
    .com-layer .cont{max-width: 460px;background: var(--point-white);box-shadow: var(--shadow-02);padding: clamp(25px, 3vw, 30px);}
    .com-layer .layer-title{position: relative;padding-bottom: clamp(12px, 1.6vw, 16px);border-bottom: 1px solid var(--black-color00);margin-bottom: clamp(15px, 2vw, 20px);}
    .com-layer .layer-title h3{font-size: var(--text-24);font-weight: 600;color: var(--black-color00);line-height: 1.25;font-family: var(--font-type03);}
    .com-layer .pw-box{padding: clamp(25px, 3vw, 30px) clamp(25px, 4vw, 40px);background: var(--gray-bg01);}
    .com-layer .pw-box .desc{display: grid;gap: var(--row-gap20);text-align: center;}
    .com-layer .pw-box .desc dt{font-size: var(--text-16);color: var(--black-color00);font-family: var(--font-type04);line-height: 1.5;}
    .com-layer .pw-box [type="password"]{width:100%;}
    .com-layer .btn_wrap{padding-top: clamp(15px, 2vw, 20px);}

    @media (max-width:640px) {
        .com-layer .close{inset: auto;top: 20px;right: 20px;}
        .com-layer .close{&::before, &::after{background:var(--black-color00)};}
        .com-layer .layer-title{padding-right:40px;}
    }

/* 작성하기 */
    #wrap .bbs_write{position: relative;display: block;width: 100%;text-align: left;border-top: 1px solid var(--black-color00);border-bottom: 1px solid var(--border-color01);padding-block: clamp(20px, 3vw, 30px);}
    #wrap .bbs_write :where(tbody, tr, th, td){display: block;width: 100%;background: none;border: 0;padding: 0;}
    #wrap .bbs_write tbody{display:flex;flex-wrap:wrap;gap: 16px clamp(40px, 3.2vw, 60px);}
    #wrap .bbs_write tr{display: flex;align-items: center;gap: 10px;width: calc(100% / 2 - clamp(40px, 3.2vw, 60px) / 2);}
    #wrap .bbs_write tr :where(th, td){font-size: var(--text-16);font-weight: 400;color: var(--black-color00);font-family: var(--font-type04);line-height: 1.4;}
    #wrap .bbs_write th{width: clamp(90px, 5.3vw, 100px);flex-shrink: 0;}
    #wrap .bbs_write th label{font-size: inherit; font-weight: inherit; color: inherit;}
    #wrap .bbs_write th em{font-weight: inherit; color: var(--point-color10);}
    #wrap .bbs_write :is([type="text"], [type="password"]){width: 100%;height: clamp(40px, 6vw, 50px);padding-inline: clamp(15px, 2vw, 20px);}
    #wrap .bbs_write select{width: 100%; max-width: 200px;}
    #wrap .bbs_write textarea{height:clamp(150px, 25vw, 240px);}
    #wrap .bbs_write td:has(.controller){display:flex;gap: 10px;}
    #wrap .bbs_write .controller{display: flex;flex-shrink: 0;gap: 10px;}
    #wrap .bbs_write #captcha_box{height: clamp(40px, 6vw, 50px);aspect-ratio: 3.71 auto;overflow: hidden;margin: 0;border: 1px solid var(--border-color01);}
    #wrap .bbs_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 4px) !important;max-width: none;max-height: none;margin: -2px 0 0 -1px;object-fit: cover;object-position: center;}
    #wrap .bbs_write #refreshCode{height: clamp(40px, 6vw, 50px);aspect-ratio: 1 auto;font-size: 0;border: 1px solid var(--border-color01);background: url('../images/sub/refreshCode.svg') no-repeat center / clamp(14px, 2.1vw, 16px) auto;cursor: pointer;}

        #wrap .bbs_write tr:has(select, textarea, #title){width: 100%;}
        #wrap .bbs_write tr:has([type="password"]){margin-right: 1px;}

    #wrap .policy-wrap{margin-top: clamp(20px, 4vw, 40px);display: grid;gap: 20px;}
    #wrap .policy-wrap .label-box{display: flex;align-items: center;gap: 10px;flex-wrap: wrap;}
    #wrap .policy-wrap .label-box a{font-size: var(--text-14);font-weight: 700;color: var(--point-color03);font-family: var(--font-type04);text-decoration: underline;text-underline-offset: 3px;}


    @media (max-width:1300px) {
        #wrap .bbs_write tr{width: 100%;}
    }
    @media (max-width:1023px) {
        #wrap .bbs_write th{width: clamp(75px, 9.5vw, 90px);}
    }
    @media (max-width:479px) {
        #wrap .bbs_write td:has(.controller){flex-wrap: wrap;}
    }

/* kernel-list */
    .kernel-list{display: flex;gap: var(--row-gap60) var(--col-gap30);}
    .kernel-list > li{position: relative; width: 100%;}
    .kernel-list .desc{display: grid;gap: 10px;}
    .kernel-list .desc dt{position: relative;font-size: var(--text-28);font-weight: 700;color: var(--point-color01);line-height: 1.2;box-shadow: inset 0 -1px 0 var(--point-color01);font-family: var(--font-type03);padding-bottom: 10px;}
    .kernel-list .desc dt::before{position: absolute;content:'';width: 100px;height: clamp(2px, 0.5vw, 3px);background: var(--point-color01);left: 0;bottom: 0;}
    .kernel-list .desc dd{font-size: var(--text-16);color: var(--black-color00);font-weight: 400;line-height: 1.5;font-family: var(--font-type04); text-wrap: auto;}

    @media (max-width:1023px) {
        .kernel-list{display: grid; grid: auto / repeat(3, 1fr);}
        .kernel-list:not(:has(> li:nth-child(3))){grid: auto / repeat(2, 1fr);}
    }
    @media (max-width:640px) {
        .kernel-list{grid: auto / repeat(2, 1fr);}
    }
    @media (max-width:360px) {
        .kernel-list{grid: auto / repeat(1, 1fr);}
    }

/* scale-perfo */
    .scale-perfo{display: flex;justify-content: center;gap: clamp(40px, 6vw, 60px);}
    .scale-perfo > li{position: relative;width: auto;font-size: var(--text-16);font-weight: 400;color: var(--black-color03);line-height: 1.6;font-family: var(--font-type04);display: flex;flex-direction: column;gap: 8px;}
    .scale-perfo > li::after{position: absolute;content:'';width: 1px;height: 100%;background: var(--border-color01);top: 0;left: calc(100% + 30px);}
        .scale-perfo > li:last-child::after{display: none;}
    .scale-perfo .desc{display: flex;align-items: center;gap: clamp(15px, 1.6vw, 16px);}
    .scale-perfo .desc dt{display: flex;align-items: center;justify-content: center;width: clamp(50px, 7.9vw, 74px);height: clamp(50px, 7.9vw, 74px);background: var(--border-color03);border-radius: var(--radius-05);padding: 5px;}
    .scale-perfo .desc dd{font-size: var(--text-30);font-weight: 400;color: var(--point-color03);font-family: var(--font-type03);}
    .scale-perfo .desc dd strong{font-size: var(--text-60);font-weight: 700;font-family: var(--font-type01);line-height: 1.2;}
    .scale-perfo span strong{font-weight: 900;}

        .scale-perfo.type02 > li{min-width:185px}
        .scale-perfo.type02 .desc{flex-direction: column;gap: 6px;}
        .scale-perfo.type02 .desc dt{width: clamp(50px, 9.5vw, 90px);height: clamp(50px, 9.5vw, 90px);}
        .scale-perfo.type02 .desc dd{font-size: var(--text-20);font-weight: 800;font-family: var(--font-type04);line-height: 1.6;}

    @media (max-width:1023px) {
        .scale-perfo{flex-wrap: wrap;}
        .scale-perfo > li{width: 100%;}
        .scale-perfo > li::after{top: calc(100% + clamp(40px, 6vw, 60px) / 2);left: 0;width: 100%;height: 1px;}
    }

/* analysisSwiper */
    .analysisSwiper .swiper-slide{opacity: 0 !important; pointer-events: none; transition: all 0.6s ease;}
    .analysisSwiper .swiper-slide.swiper-slide-active{opacity: 1 !important; pointer-events: auto;}
    .analysisSwiper .swiper-pagination{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(6px, 1vw, 8px);margin-top: var(--row-gap30);width: 100%;position: relative;inset: auto;}
    .analysisSwiper .swiper-pagination span{display: flex;width: clamp(6px, 1vw, 8px);height: auto;aspect-ratio: auto 1;border-radius: 100%;opacity: 1;background: var(--black-color08);}
    .analysisSwiper .swiper-pagination .swiper-pagination-bullet-active{background: var(--point-color01);}