@charset "utf-8";
    #wrap{position: relative; width: 100%; overflow: clip; min-width: 1200px;}
    .w_custom, .inr{position: relative; width: calc(100% - 60px); max-width: 1520px; margin:0 auto; box-sizing: border-box;}
    .inr{max-width: 1400px;}

    @media screen and (max-width:860px){
        .w_custom, .inr{width: calc(100% - 30px);}
    }
    @media screen and (max-width:320px){
        .w_custom, .inr{width: calc(100% - 20px);}
    }

/*───────────────────────────────────────────────────────────
	Header || outline/header
───────────────────────────────────────────────────────────*/
#header{position: sticky; top:0; width: 100%;height: 100px; margin-bottom: -100px; z-index: 99; transition: all 0.4s;}
#header .w_custom{height: 100%;display: flex;align-items: center;justify-content: flex-end;max-width: 1720px;}
#header .logo{font-size: 0; height: 100%;}
#header .logo a{display: flex; align-items: center; height: 100%; padding: 0 15px; box-sizing: border-box; transition: all 0.4s;}
/* (s) 2025.01.08 수정 */
#header .gnb{position: absolute;top:0;left: 50%;display: flex;justify-content: center;margin: 0 auto;width: calc(100% - 200px);height: 100%;transform: translateX(-50%);text-align: center;font-size: var(--title-20);}
#header .gnb li{position: relative;}
#header .gnb > li{height: 100%;}
#header .gnb > li > a{display: flex;align-items: center;height: 100%;font-weight: 600;color: var(--black-color02);padding: 0 clamp(10px, 2.4vw, 45px);letter-spacing: 0; transition: all 0.4s;}
#header .link_list{display: flex; align-items: center;}
#header .gnb .dep02{position: absolute;top:100%;left:50%;transform: translateX(-50%);padding:10px 0;background: var(--point-white);box-shadow: 3px 3px 5px rgba(0,0,0,0.1);width: 150px;opacity: 0;pointer-events: none;transition: all 0.4s;}
#header .gnb .dep02 > li > a{display: block; font-size: 80%; font-weight: 400; color: var(--black-color06); padding:8px 20px; box-sizing: border-box; transition: all 0.4s;}
#header .gnb .dep03{position: absolute;top:0;left:100%;padding:10px 0;background: var(--point-white);box-shadow: 3px 3px 5px rgba(0,0,0,0.1);width: 170px;opacity: 0;pointer-events: none;transition: all 0.4s;border: 1px solid var(--border-color01);}
#header .gnb .dep03 > li > a{display: block; font-size: 80%; font-weight: 400; color: var(--black-color06); padding:8px 14px; box-sizing: border-box; transition: all 0.4s;}
#header .gnb .menu2 {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);padding: 10px 0;background: var(--point-white); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);width: 200px; /* menu2의 너비 */opacity: 0;pointer-events: none;transition: all 0.4s;}
#header .gnb .menu2 > li > a {display: block;font-size: 80%;font-weight: 400;color: var(--black-color06);padding: 8px 20px;box-sizing: border-box;transition: all 0.4s;}
#header .gnb .menu3 {position: absolute;top: 0;left: 100%;  /* menu2의 오른쪽에 배치 */padding: 10px 0;background: var(--point-white);box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);width: 210px; /* menu3의 너비 */opacity: 0;pointer-events: none;transition: all 0.4s;border: 1px solid var(--border-color01);}
#header .gnb .menu3 > li > a {display: block;font-size: 80%;font-weight: 400;color: var(--black-color06);padding: 8px 14px;box-sizing: border-box;transition: all 0.4s;}
#header .gnb > li:hover > .menu2 {opacity: 1;pointer-events: auto;}
#header .gnb > li:hover > .menu2 > li:hover .menu3 {opacity: 1; /* menu2에 마우스를 올린 후 해당 menu3만 보이게 */pointer-events: auto;}
/* z-index로 menu2와 menu3 겹치지 않게 조정 */
#header .gnb .menu2 {z-index: 10;}
#header .gnb .menu3 {z-index: 20;}
/* 각각의 menu3을 처음에는 숨기고, hover 시에만 나타나게 */
#header .gnb > li .menu2 .menu3 {opacity: 0;pointer-events: none;}

#header .link_list > li > a{display: flex;align-items: center;justify-content: center;font-size: var(--title-14);font-weight: 500;color: var(--black-color02);text-align: center;padding:0 24px;border:1px solid var(--black-color02);height: 36px;box-sizing: border-box;transition: all 0.4s;line-height: 1;}

.scr_top{position: fixed; right:50px; bottom:50px; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--point-color01); border-radius: 100%; z-index: 9; box-shadow: 0 0 5px rgba(0,0,0,0.1); opacity: 0; pointer-events: none; transition: all 0.4s;}
#header.on .scr_top{opacity: 1; pointer-events: all;}

    /* color */
        #header :where(.logo a, .gnb > li > a, .link_list > li > a){filter: var(--filter-white);}

    /* over */
        @media screen and (min-width:1024px){
            #header:hover{background: var(--point-white); box-shadow: 3px 3px 5px rgba(0,0,0,0.1);}
            #header:hover :where(.logo a, .gnb > li > a, .link_list > li > a){filter:none;}
            #header .link_list > li > a:hover{background: var(--black-color02); color: var(--point-white);}
            #header .gnb > li:hover > a{color: var(--point-color01);}
            #header .gnb > li:hover .dep02{opacity: 1; pointer-events: all;}
            #header .gnb .dep02 > li:hover > a{color: var(--point-color01);}
            #header .gnb .dep02 > li:hover .dep03{opacity: 1; pointer-events: all;}
            #header .gnb .dep03 > li:hover > a{color: var(--point-color01);}
            #header .gnb .menu2 > li:hover > a{color: var(--point-color01);}
            #header .gnb .menu2 > li:hover .dep03{opacity: 1; pointer-events: all;}
            #header .gnb .menu3 > li:hover > a{color: var(--point-color01);}
        }
/* // (e) 2025.01.08 수정 */

        #header.on{background: var(--point-white); box-shadow: 3px 3px 5px rgba(0,0,0,0.1);}
        #header.on :where(.logo a, .gnb > li > a, .link_list > li > a){filter:none;}


/*───────────────────────────────────────────────────────────
	Main || main/index
───────────────────────────────────────────────────────────*/
    /* 비주얼 */
        .visualSwiper{position: relative; overflow: hidden;}
        .visualSwiper .swiper-slide{position: relative; height: 940px; overflow: hidden;}
        .visualSwiper .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
        .visualSwiper .thumb{position: relative; width: 100%; height: 100%; overflow: hidden;}
        .visualSwiper .thumb img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: all 5s;}
            .visualSwiper .swiper-slide-active .thumb img{transform: scale(1);}
        .visualSwiper .txt_wrap{position: absolute;top: 49%;left:50%;transform: translate(-50%, -50%);z-index: 3;font-size: var(--title-20);color: var(--point-white);}
        .visualSwiper .txt_wrap h2{font-size: 350%;font-weight: 600;line-height: 1.28;letter-spacing: -0.04em;}
        .visualSwiper .txt_wrap h4{font-size: 190%;font-weight: 400;line-height: 1.35;letter-spacing: -0.04em;}
            .visualSwiper .txt_wrap h4 + h2{margin-top: 28px;}
        .visualSwiper .txtAni{opacity: 0; transform: translateX(70px); transition: all 1.2s; transition-delay: 0.2s;}
            .visualSwiper .txtAni:nth-child(2){transition-delay: 0.4s;}
            .visualSwiper .swiper-slide-active .txtAni{opacity: 1; transform: translate(0);}
        .visualSwiper .controller{position: absolute;left:50%;transform: translateX(-50%);bottom: 63px;font-size: 0;display: flex;align-items: center;z-index: 8;gap: 18px;}
        .visualSwiper .swiper_arw{position: relative;top:auto;left:auto;right:auto;margin:0;width: 7px;height: 7px;background: none;}
            .visualSwiper .swiper_arw:before{position: absolute;content:'';width: 100%;height: 100%;border: 3px solid var(--trans-color);border-top-color: var(--point-white);border-left-color: var(--point-white);top:50%;left:50%;transform: translate(-50%, -50%) rotate(-45deg);border-radius: 3px;}
            .visualSwiper .swiper_arw:after{display: none;}
        .visualSwiper .swiper_arw.swiper-button-next{transform: scale(-1,-1);}
        #wrap .visualSwiper .swiper-pagination{display: flex; position: relative; top:auto; left:auto; bottom:auto; width: auto; gap: 10px;}
        #wrap .visualSwiper .swiper-pagination span{position: relative; display: block;width: 70px;height: 4px;background: rgba(255,255,255,0.4);border-radius: 0;opacity: 1;margin: 0; overflow: hidden; transition: all 0.4s;}
            #wrap .visualSwiper .swiper-pagination span:before{position: absolute; content:''; top:0; left:0; width: 100%; height: 100%; background: var(--point-color02); opacity: 0;}
            #wrap .visualSwiper .swiper-pagination .swiper-pagination-bullet-active:before{opacity: 1; animation-name: vsprogress; animation-duration:8s; transition-timing-function:linear;}
        @keyframes vsprogress {0% {width:0;}100% {width: 100%;}}
        .visualSwiper .scr_dwn{position: absolute;right: 65px;bottom: 0;display: flex;flex-direction: column;align-items: center;z-index: 9;gap: 10px; cursor: pointer; font-family: var(--font-type02);}
        .visualSwiper .scr_dwn dt{font-size: 12px;font-weight: 300;color: var(--point-white);writing-mode: vertical-rl;letter-spacing: 0.05em;}
        .visualSwiper .scr_dwn dd{position: relative; width: 2px;height: 90px;background: rgba(255,255,255,0.4); overflow: hidden;}
            .visualSwiper .scr_dwn dd:before{position: absolute; content:''; top:0; left:0; width: 100%; height: 30%; background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
            .visualSwiper .scr_dwn dd:before{animation-name: scrDwn; animation-duration:2s; animation-iteration-count:infinite; transition-timing-function:linear;}
            @keyframes scrDwn {0% {top:-30%;}100% {top:100%;}}

            #wrap .visualSwiper .swiper-pagination span:hover{background: var(--point-white);}

    /* 공통 */
        .main_title{position: relative; box-sizing: border-box; font-size: var(--title-20);}
            .main_title.cen{text-align: center;}
            .main_title.hd{margin-bottom: 40px;}
        .main_title h2{font-size: 300%;font-weight: 700;color: var(--black-color02);line-height: 1.33;}
        .main_title h3{font-size: 250%;font-weight: 700;color: var(--black-color02);line-height: 1.35;}
            .main_title h3 + h6{margin-top: 22px;}
        .main_title h6{font-size: inherit; font-weight: 300; color: var(--black-color02); line-height: 1.4;}
            .main_title h6 + h2{margin-top: 20px;}
            .main_title h6 + h3{margin-top: 24px;}
        .main_title h6 em{font-weight: 600; color: var(--point-color01);}
        .btn_wrap{display: flex;justify-content: center;gap: 15px;margin-top: 60px;}
        .main_view{position: relative; display: inline-block;font-size: var(--title-20);font-family: var(--font-type02);box-sizing: border-box; display: flex;align-items: center;justify-content: space-between;width: 200px;height: 56px;border: 1px solid var(--point-color02);color: var(--point-color02);padding: 0 30px; transition: all 0.4s;}
        .main_view span{position: relative;font-size: 90%;font-weight: 600; box-sizing: border-box;}
            .main_view:after{display: inline-flex;content:'';width: 8px;height: 8px;border: 2px solid var(--trans-color);border-top-color: var(--point-color02);border-right-color: var(--point-color02);transform: rotate(45deg);border-radius: 3px;transition: all 0.4s;}

            /* over */
                @media screen and (min-width:1024px){
                    .main_view:hover{background: var(--point-color02);}
                }


    /* 프로젝트 */
    .main_project{position: relative;padding: 200px 0;background: rgba(17,97,190,0.05);}
    .main_project:before{position: absolute;content:'';width: 39.5%;height: 100%;background: url('../images/da_image/main_project_bg.jpg') no-repeat center / cover;top:0;left:0;}
    .main_project .w_custom{display: flex;}
    .main_project .main_title{width: 27%;padding-top: 70px;}
    .main_project .main_title h2{filter: var(--filter-white);}
    .main_project .info_list{position: relative; width: 73%; box-sizing: border-box; display: flex; gap: 30px;}
    .main_project .info_list li{position: relative;border-radius: 20px;padding: 70px 15px 75px;box-sizing: border-box;text-align: center;width: calc(100% / 2 - 15px);display: flex;flex-direction: column;gap: 42px;transition: all 0.6s;overflow: hidden; cursor: pointer;}
        .main_project .info_list li:before{position: absolute; content:''; width: 100%; height: 100%; background: var(--point-white); top:0; left:0; border-radius: inherit; transition: all 0.2s; opacity: 1;}
        .main_project .info_list li:after{position: absolute; content:''; width: 100%; height: 100%; background: var(--point-color01); left:0; bottom:0; clip-path: circle(0% at 0 100%); transition: all 0.6s;}
        .main_project .info_list li:first-child{border-top-left-radius: 80px;}
        .main_project .info_list li:last-child{border-bottom-right-radius: 80px;}
    /* (s) 250108 수정 */
    .main_project .info_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
    /* // (e) 250108 수정 */
    .main_project .info_list .thumb{position: relative;display:block;width: 180px;height: 180px;margin:0 auto;border-radius: 100%;overflow: hidden;box-sizing: border-box; z-index: 2;}
    .main_project .info_list .thumb img{position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover;}
    .main_project .info_list .desc{position: relative; font-size: var(--title-20); z-index: 3; transition: all 0.4s;}
    .main_project .info_list .desc dt{font-size: 120%;font-weight: 600;color: var(--black-color01);line-height: 1.35;letter-spacing: -0.04em;}
        .main_project .info_list .desc dt + dd{margin-top: 18px;}
    .main_project .info_list .desc dd{font-size: 90%; font-weight: 400; color:var(--black-color06); line-height: 1.44;}

        /* over */
            @media screen and (min-width:1024px){
                .main_project .info_list li:hover{box-shadow: 5px 5px 10px rgba(0,0,0,0.2);}
                .main_project .info_list li:hover:before{opacity: 0; transition-delay:0.6s;}
                .main_project .info_list li:hover:after{clip-path: circle(150% at 0 100%);}
                .main_project .info_list li:hover .desc{filter: var(--filter-white);}
            }
/* 툴팁의 ? 아이콘 스타일 */
.tooltip {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #666;
    color: white;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
    position: relative;
}

/* 각 dt 요소에 relative를 추가하여 툴팁이 그 요소를 기준으로 위치하도록 함 */
.desc dt {
    position: relative;
}

/* 툴팁 텍스트 */
.tooltip-text {
    display: none;
    position: absolute;
    top: 50%;
    left: 120%;
    transform: translateY(-50%);
    background-color: white;
    color: black;
    padding: 10px;
    border-radius: 5px;
    max-width: 700px;
    word-wrap: break-word;
    z-index: 99999; /* 기존 9999 → 99999로 증가 */
    text-align: center;
    max-height: 200px;  
    white-space: normal;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: auto; /* 마우스 이벤트 활성화 */
}

/* 툴팁 활성화 */
.tooltip:hover .tooltip-text,
.tooltip-text:hover {
    display: block;
}
.tooltip-text img {
    max-width: 100%;
    max-height: auto; /* 이미지 높이를 100px로 제한 */
    max-width: 700px;
    margin-bottom: 5px;
}

        
    /* 개발기관 */
    .main_organ{position: relative;padding: 92px 0 96px;background: url('../images/da_image/main_organ_bg.jpg') no-repeat center / cover;}
    .main_organ:before{position: absolute; content:''; width: 100%; height: 100%; background: var(--point-color03); top:0; left:0; opacity: 0.95;} 
    .main_organ .w_custom{max-width: 1700px;}
    .main_organ .main_title :where(h3, h6:not(:has(em))){filter: var(--filter-white);letter-spacing: -0.04em;}
    .main_organ .main_title h6 em{letter-spacing: 0.01em;}
    /* .main_organ .logo_list{display: flex; justify-content: center; flex-wrap: wrap; gap: 0 50px;}
    .main_organ .logo_list > li{display: flex;align-items: center;justify-content: center;box-sizing: border-box;margin-bottom: -4px;} */
    .main_organ .logo_list {
        display: flex;
        justify-content: center; /* 아이템 간격을 조정 */
        flex-wrap: wrap; /* 여전히 줄 바꿈을 허용 */
        gap: 0 50px ; /* 간격을 조정해보기 */
    }
    .main_organ .logo_list > li {
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 20%;  /* 여전히 50%로 설정 */
        margin-bottom: 0;  /* 불필요한 마진 제거 */
    }
    .main_organ .logo_list img {
        max-width: 100%;  /* 이미지를 최대 100%로 설정하여 컨테이너에 맞게 배치 */
        height: auto;     /* 비율을 유지한 상태로 크기 조정 */
    }


    .main_organ .main_view{filter: var(--filter-white);}
    .main_organ .main_view span{filter: var(--filter-white);}
    
         /* over */
            @media screen and (min-width:1024px){
                .main_organ .main_view:hover{filter: none;}
                .main_organ .main_view:hover:after{filter: var(--filter-white);}
            }

/*───────────────────────────────────────────────────────────
	Footer || outline/footer
───────────────────────────────────────────────────────────*/
    #footer{position: relative; background: var(--point-white);}
    #footer .top_sec{padding: 60px 0 45px;border-bottom: 1px solid var(--border-color03);}
    #footer .com_desc{display: flex;align-items: flex-start;font-size: var(--title-20);gap: 30px 100px;}
    #footer .com_desc dt{font-size: 0;}
    #footer .com_desc dd{font-size: 140%;font-weight: 600;color: var(--black-color01);line-height: 1.43;margin-top: -5px;}
    #footer .cont{position: relative;margin-top: 45px;padding: 0 220px 40px 0;box-sizing: border-box;}
    #footer .info_list{display: flex;flex-direction: column;gap: 6px;}
    #footer .info_list > li{display: flex; flex-wrap: wrap; align-items: center; gap: 3px 20px;}
    #footer .info_list .desc{display:inline-flex; font-size: var(--title-20); gap: 0 9px;}
    #footer .info_list .desc :where(dt, dd){font-size: 80%;color: var(--black-color01);letter-spacing: 0;}
    #footer .info_list .desc dt{font-weight: 700; flex-shrink: 0;}
    #footer .info_list .desc dd{font-size: 400; opacity: 0.6;}
    #footer .link_list{position: absolute; top:0; right:0; display: flex; align-items: center; gap: 15px 37px; font-size: var(--title-20);}
    #footer .link_list > li{font-size: 75%; font-weight: 400; color: var(--black-color01); opacity: 0.6;}
        #footer .link_list > li:has(em){opacity: 1;}
    #footer .link_list > li em{font-weight: inherit;}
    #footer .copy{display: flex;flex-wrap: wrap;font-size: var(--title-20);gap: 3px 25px;margin-top: 50px;}
    #footer .copy :where(dt, dd){font-size: 75%;font-weight: 400;color: var(--black-color08);letter-spacing: 0;}

/*───────────────────────────────────────────────────────────
	experiment || experiment
───────────────────────────────────────────────────────────*/
    .sub_visual{position: relative;width: 100%;height: 460px;background: url('../images/da_image/sub_visual.jpg') no-repeat center / cover;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: var(--point-white);padding-bottom: 10px;box-sizing: border-box;}
    .sub_visual h2{font-size: 70px; font-weight: bold; line-height: 1.1;}
        .sub_visual h2 + p{margin-top: 10px;}
    .sub_visual p{font-size: 18px; font-weight: 400; line-height: 1.7;}
    .sub_visual .loca_list{display: flex; flex-wrap: wrap; justify-content: center; margin:14px 0;}
    .sub_visual .loca_list > li{font-size: 16px;font-weight: 400;display: flex;align-items: center;letter-spacing: 0;}
        .sub_visual .loca_list > li.home{font-size: 0;height: 100%;}
        .sub_visual .loca_list > li:not(:last-child):after{display: inline-flex;content:'';width: 1px;height: 10px;background: rgba(255,255,255,0.6);margin: 0 8px;}
    .sub_visual .loca_list > li > a{display: block;}

    .sub_title{position: relative; box-sizing: border-box;}
        .sub_title.cen{text-align: center;}
        .sub_title.hd{padding: 93px 0 52px;}
        .sub_title.hd_m{padding: 116px 0 31px;}
        .sub_title.hd_m + .hd_s{padding-top: 0;}
        .sub_title.hd_s{padding:100px 0 20px;}
    .sub_title h3{font-size: 50px;font-weight: bold;color: var(--black-color01);line-height: 1.2;letter-spacing: -0.04em;}
        .sub_title h3 + p{margin-top: 40px;}
    .sub_title h4{font-size: 42px;font-weight: 600;color: var(--black-color01);line-height: 1.25;letter-spacing: -0.01em;}
    .sub_title h5{font-size: 26px;font-weight: 600;color: var(--black-color01);line-height: 1.3;letter-spacing: -0.01em;}
    .sub_title h6{font-size: 20px; font-weight: 500; color: var(--black-color01); line-height: 1.4;}
        .sub_title h6 + h3{margin-top: 28px;}
    .sub_title h6 em{font-weight: 600;color: var(--point-color01);letter-spacing: 0;}
    .sub_title p{font-size: 18px; font-weight: 400; color: var(--black-color06); line-height: 1.7;}

    .experiment_view .intro{padding-bottom: 120px;}
    .exp_detail{display: flex;}
        .exp_detail + .exp_detail{margin-top: 50px;}
    .exp_detail .title{background: linear-gradient(315deg, rgba(6, 74, 153, 1) 0%, rgba(17, 97, 190, 1) 100%);box-shadow: 5px 5px 10px rgba(0,0,0,0.2);width: 25%;border-radius: 80px 20px 20px 20px;padding: 64px 60px;box-sizing: border-box;}
    .exp_detail .title h4{font-size: 32px; font-weight: 500; color: var(--point-white); line-height: 1.28;}
    .exp_detail .cont_list{width: calc(75% - 40px);padding-top: 10px;box-sizing: border-box;border-top: 1px solid var(--black-color02);margin-left: 40px;}
    .exp_detail .cont_list > li{border-bottom: 1px solid var(--border-color01);}
    .exp_detail .cont_list .desc{display: flex;align-items: center;padding: 20px 0;min-height: 80px;box-sizing: border-box;}
    .exp_detail .cont_list .desc dt{width: 19.8%; padding: 0 20px; box-sizing: border-box; font-size: 22px; font-weight: 600; color: var(--black-color01); line-height: 1.35;}
        .exp_detail .cont_list .desc dt + dd{width: 80.2%;}
        .exp_detail .cont_list .desc dt + dd:before{position: absolute; content:''; width: 1px; height: 20px; background: var(--border-color01); transform: translateY(-50%); top:50%; left:0;}
    .exp_detail .cont_list .desc dd{position: relative; padding:0 49px; box-sizing: border-box; font-size: 20px; font-weight: 400; color: var(--black-color05); line-height: 1.6;}
    .exp_detail .cont_list .desc dd:has(.icon){display: flex; align-items: center; gap: 10px 40px;}
    .exp_detail .cont_list .desc dd :where(input[type="text"], select){max-width: 320px;}

    .exp_detail .cont_list .table_title {
        font-size: 24px; /* 제목의 폰트 크기 */
        font-weight: 700; /* 제목 강조 */
        color: var(--black-color01); /* 제목 색상 */
        margin-bottom: 20px; /* 제목과 표 사이의 간격 */
        text-align: left; /* 제목 정렬 (왼쪽 정렬) */
        border-top: none; /* 위에 라인 제거 */
    }
    .exp_detail .cont_list:first-child {
        border-top: none; /* 리스트의 첫 번째 요소에 라인이 생기지 않도록 */
    }

    .exp_detail .cont_list .desc_sub {
        display: flex;
        align-items: center;
        padding: 15px 0; /* 조금 더 작게 조정 */
        min-height: 55px; /* 높이 축소 */
        box-sizing: border-box;
    }
    
    .exp_detail .cont_list .desc_sub dt {
        width: 30%; /* 왼쪽 셀 길이 증가 */
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 20px;
        font-weight: 600;
        color: var(--black-color01);
        line-height: 1.4;
    }
    
    .exp_detail .cont_list .desc_sub dd {
        width: 70%; /* 오른쪽 셀 길이 감소 */
        padding: 0 40px; /* 여백 조정 */
        box-sizing: border-box;
        font-size: 18px; /* 폰트 크기 약간 감소 */
        font-weight: 400;
        color: var(--black-color05);
        line-height: 1.5;
    }

    .experiment_view .model{background: var(--point-color04); padding-bottom: 100px;}
    .experiment_view .model .cont + .cont{margin-top: 100px;}
    .experiment_view .model .thumb{width: 67.8%;height: 520px;margin:0 auto;box-sizing: border-box;padding:10px;border:1px solid var(--border-color01);border-radius: 20px;overflow: hidden;background: var(--point-white);}
    .experiment_view .model iframe{width: 100%;height: 100%;border-radius: 20px;}

    .comm_btn span{display: flex;padding: 17px 30px;background: var(--point-color01);font-size: 18px;font-weight: 400;color: var(--point-white);line-height: 1.2;}
        .comm_btn.full span{gap: 20px;}
        .comm_btn.full span:after{display: inline-flex; content:''; width: 20px; height: 20px; background: url('../images/da_image/full_icon.png') no-repeat center / cover;}

        .thumbSwiper{position: relative; overflow: hidden;}
        .thumbSwiper + .data_table{margin-top: 70px;}
    .thumbSwiper .swiper-slide{height: 300px; border-radius: 20px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .thumbSwiper .swiper-slide :where(img, video){width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
    .thumbSwiper .controller{position: relative;margin-top: 47px;display: flex;align-items: center;justify-content: space-between;}
    .thumbSwiper .controller:has(.swiper-pagination-lock){display: none;}
    .thumbSwiper .justify{display: flex; align-items: center; justify-content: space-between; width: 110px;}
    .thumbSwiper [class^="swiper-button"]{position: relative;top: auto;left:auto;right:auto;width: 20px;height: 20px;margin: 0;}
        .thumbSwiper [class^="swiper-button-next"]{transform: scale(-1,-1);}
        .thumbSwiper [class^="swiper-button"]:before{position: absolute;content:'';width: 60%;height: 60%;border: 3px solid var(--trans-color);border-top-color: var(--black-color01);border-left-color: var(--black-color01);top:50%;left:50%;transform: translate(-50%, -50%) rotate(-45deg);box-sizing: border-box;border-radius: 3px;}
        .thumbSwiper [class^="swiper-button"]:after{display: none;}
    .thumbSwiper .swiper-pagination-num{position: relative;top: auto;left: auto;bottom: auto;font-size: 16px;font-weight: bold;color: var(--black-color09);width: 62px;display: flex;justify-content: space-between;align-items: center;}
    .thumbSwiper .swiper-pagination-num span{display:flex;align-items: center;}
    .thumbSwiper .swiper-pagination-num .swiper-pagination-current{color: var(--black-color01);}
    .thumbSwiper .swiper-pagination-num:before{position: absolute;content:'';width: 1px;height: 10px;background: var(--border-color01);top:50%;left:50%;transform: translateY(-50%);}
    .thumbSwiper .swiper-pagination{position: relative;top:auto;left:auto;width: calc(100% - 136px);height: 3px;background: var(--border-color01);}
    .thumbSwiper .swiper-pagination .swiper-pagination-progressbar-fill{background: var(--point-color01);}

    .thumb_layer{position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: all 0.4s;}
        .thumb_layer.on{pointer-events: all; opacity: 1;}
        body:has(.thumb_layer.on){overflow: hidden; touch-action: none;}
    .thumb_layer .cont{position: relative; overflow: hidden;text-align: center;display: flex;align-items: center; justify-content: center; max-height: 80vh;}
    .thumb_layer .thumb{position: relative; max-height: inherit;}
    .thumb_layer .paging{position: absolute;top:20px;left:20px;font-size: 15px;font-weight: 400;color: var(--point-white);letter-spacing: 0.04em;text-shadow: 1px 1px 2px rgba(0,0,0,0.8);}
    .thumb_layer .layer_arw{position: absolute;top:50%;left: 0;transform: translateY(-50%);width: 50px;height: 80px;transition: all 0.4s;border-radius: 0 10px 10px 0;}
        .thumb_layer .layer_arw.next{left:auto;right: 0;transform: translateY(-50%) scale(-1, -1);}
        .thumb_layer .layer_arw:before{position: absolute;content:'';top: 50%;left: 60%;width: 20px;height: 20px;border:2px solid var(--point-white);border-width: 2px 2px 0 0;transform: translate(-50%, -50%) rotate(-135deg);border-radius: 2px;text-shadow: 3px 3px 0 rgba(0,0,0,0.5);transition: all 0.4s;}
/* close 버튼 스타일 */
.thumb_layer .layer_arw.close {
    position: absolute;
    top: 20px !important; /* 버튼 위치 살짝 아래 */
    right: 20px !important;
    left: auto !important;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.9); /* 배경 흰색 */
    border: none; /* 테두리 제거 */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%; /* 둥근 모양 */
    box-shadow: none; /* 그림자 제거, 간섭 해결 */
    z-index: 1001;
    transform: none; /* 부모 변형 영향 없도록 */
    outline: none; /* 외곽선 제거 */
    margin: 0; /* 불필요한 margin 제거 */
}

/* X 아이콘 */
.thumb_layer .layer_arw.close::before,
.thumb_layer .layer_arw.close::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: black; /* X 색상 검정 */
    border-radius: 2px;
}

/* 첫 번째 X 선 */
.thumb_layer .layer_arw.close::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg); /* 45도 회전 */
    border: none;
}

/* 두 번째 X 선 */
.thumb_layer .layer_arw.close::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg); /* -45도 회전 */
    border: none;
}

/* hover 효과 */
.thumb_layer .layer_arw.close:hover {
    background: rgba(255, 255, 255, 1); /* hover 시 배경 밝게 */
}

/* hover 시 X 색상 유지 */
.thumb_layer .layer_arw.close:hover::before,
.thumb_layer .layer_arw.close:hover::after {
    background: black; /* X 색상 그대로 유지 */
}




        /* over */
            .thumbSwiper .swiper-slide:hover img{transform: scale(1.05);}
            .thumb_layer .layer_arw:hover{background: rgba(0,0,0,0.5);}
            .thumb_layer .layer_arw:hover:before{border-color: var(--point-color02);}


        .chart_layer{position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: all 0.4s;}
            .chart_layer.on{pointer-events: all; opacity: 1;}
            body:has(.chart_layer.on){overflow: hidden; touch-action: none;}
            .chart_layer .cont{position: relative; overflow: hidden;text-align: center;display: flex;align-items: center; justify-content: center; max-height: 80vh;}
            .graph{display: none; }
            .chart_layer .close-btn {
                position: absolute;
                top: 20px !important; /* 버튼 위치 살짝 아래 */
                right: 20px !important;
                left: auto !important;
                width: 48px;
                height: 48px;
                background: rgba(255, 255, 255, 0.9); /* 배경 흰색 */
                border: none; /* 테두리 제거 */
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border-radius: 50%; /* 둥근 모양 */
                box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
                z-index: 1001;
            }
            
            /* X 아이콘 스타일 */
            .chart_layer .close-btn::before,
            .chart_layer .close-btn::after {
                content: '';
                position: absolute;
                width: 20px;
                height: 2px;
                background: black; /* X 색상 검정 */
                border-radius: 2px;
            }
            
            .chart_layer .close-btn::before {
                transform: rotate(45deg);
            }
            
            .chart_layer .close-btn::after {
                transform: rotate(-45deg);
            }
            
            /* hover 효과 */
            .chart_layer .close-btn:hover {
                background: rgba(255, 255, 255, 1); /* 호버 시 더 밝게 */
            }
            
            .chart_layer .close-btn:hover::before,
            .chart_layer .close-btn:hover::after {
                background: black; /* X 색상 유지 */
            }
            
            
        
        .loadfont {
            width: 350px;
            height: 80px;
            margin: 200px auto;
            padding: 15px;
            text-align: center;
            font-weight: bold;
            font-size: 25px;
            position: absolute;
            left: 50%;
            top: 250px;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
        }
        .loader {
            position: absolute;
            left: 48%;
            top: 410px;
            width: 80px;
            height: 80px;
            margin: 80px auto;
            display:inline-block;
            padding:0px;
            border-radius:100%;
            border:6px solid;
            border-top-color:rgba(254, 168, 23, 0.65);
            border-bottom-color:rgba(57, 154, 219, 0.65);
            border-left-color:rgba(188, 84, 93, 0.95);
            border-right-color:rgba(137, 188, 79, 0.95);
            -webkit-animation: loader 2s ease-in-out infinite alternate;
            animation: loader 2s ease-in-out infinite alternate;
        }
        @keyframes loader {
            from {transform: rotate(0deg);}
            to {transform: rotate(720deg);}
        }
        @-webkit-keyframes loader {
            from {-webkit-transform: rotate(0deg);}
            to {-webkit-transform: rotate(720deg);}
        }    
    

    .experiment_view .field{padding-bottom: 120px;}

    .table_list{display: flex;gap: 15px;}
        .table_list + .radio_list{margin-top: 20px;}
    .table_list > li{width: calc(100% / 2 - 7.5px);}
    .data_table{position: relative;border-radius: 20px 20px 0 0;overflow: hidden;box-sizing: border-box;}
        .data_table + .data_table{margin-top: 70px;}
        .data_table + .table_list{margin-top: 70px;}
        .data_table + .radio_list{margin-top: 20px;}
    .data_table .sub_title{background: var(--black-color01);padding: 22px 30px;}
    .data_table .sub_title h5{font-weight: 500; color: var(--point-white);}
    .data_table table{width: 100%;}
    .data_table tr{border-bottom: 1px solid var(--border-color01);}
    .data_table :where(th, td){font-size: 20px;font-weight: 500;color: var(--black-color01);text-align: center;vertical-align: middle;transition: all 0.4s;height: 88px;}
        .data_table.sm :where(th, td){font-size: 16px;}
    .data_table :where(th, td):not(:last-child){border-right: 1px solid var(--border-color01);}
    .data_table thead th{background: var(--gray-bg01);}
    .data_table thead th:hover{background: var(--border-color01);}
        .data_table tbody :where(th, td):hover{background: var(--gray-bg01);}
    .data_table :is(thead, tbody) :is(th, td):has(input[type="checkbox"]:checked){background: rgba(17,97,190,0.05);}
    .data_table span + input[type="checkbox"]{margin-top: 7px;}
    .data_table label:has(input[type="checkbox"]){cursor: pointer;display: block;padding: 22px 5px 15px;box-sizing: border-box;}
    .data_table label:has(input[type="checkbox"]) span{display: block;}
    .data_table input[type="checkbox"]{background: url('../images/da_image/chk_box.png') no-repeat center / 100% auto;width: 16px;height: 16px;display: block;margin: 0 auto; transition: all 0.4s; cursor: pointer;}
    .data_table input[type="checkbox"]:disabled{background-image: url('../images/da_image/chk_box_disa.png');}
    .data_table input[type="checkbox"]:checked{background-image: url('../images/da_image/chk_box_on.png');}

    .radio_list{display: flex; flex-wrap: wrap; gap: 40px;}
        .radio_list + .data_table{margin-top: 20px;}
    .radio_list input[type="radio"]{display: none;}
    .radio_list label:has(input[type="radio"]){position: relative;display: inline-flex;gap: 10px;font-size: 20px;font-weight: 500;color: var(--black-color01);cursor: pointer;line-height: 16px;}
    .radio_list label:has(input[type="radio"]):before{display: inline-flex;content: '';width: 16px;height: 16px;background: url('../images/da_image/radio.png') no-repeat center / 100% auto;flex-shrink: 0;transition: all 0.4s;}
    .radio_list label:has(input[type="radio"]:checked):before{background-image: url('../images/da_image/radio_on.png');}

    .data_btn{display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 40px;}
        .data_btn + .data_btn{margin-top: 20px;}
        .data_btn + .bullet_list{margin-top: 50px;}
        .data_btn:has(input[type="text"]){gap: 20px;}
    .data_btn input[type="text"]{font-size: 16px;font-weight: 500;color: var(--black-color01);background: var(--point-white);border: 1px solid var(--border-color01);box-sizing: border-box;width: 360px;padding: 0 20px;height: 55px;}
    .data_btn input[type="text"].short{width: 150px;}
    .data_btn input[type="text"]:focus{outline: none;}
    .data_btn :where(button, a){position: relative;display: flex;padding: 15px 24px;font-size: 18px;font-weight: 600;color: var(--black-color01);box-shadow: inset 0 0 0 1px var(--black-color01);box-sizing: border-box;transition: all 0.4s;}
        .data_btn :where(button, a).long{padding-left: 40px; padding-right: 40px;}
        .data_btn :where(button, a):before{position: absolute; content:''; top:0; left:0; width: 100%; height: 100%; background: linear-gradient(315deg, rgba(6, 74, 153, 1) 0%, rgba(17, 97, 190, 1) 100%); opacity: 0; transition: all 0.4s;}
    .data_btn :where(button, a) span{position: relative; display: flex;align-items: center;gap: 17px; transition: all 0.4s;}
        .data_btn :where(button, a) span:after{display: inline-flex;content:'';width: 10px;height: 10px;border:2px solid var(--trans-color);border-top-color: var(--black-color01);border-right-color: var(--black-color01);transform: rotate(45deg);box-sizing: border-box;border-radius: 2px;}

    /* 테이블을 감싸는 div에 스크롤 추가 */
    #coordinateTable-wrapper {
        width: 100%;  /* 전체 너비 설정 */
        overflow-x: auto;  /* X축 스크롤만 활성화 */
        -webkit-overflow-scrolling: touch;  /* 모바일에서 부드러운 스크롤 지원 */
    }

    /* 테이블 설정 */
    #coordinateTable {
        width: 100%;
        table-layout: fixed;  /* 열 너비를 고정 */
        border-collapse: collapse;
    }

    /* 테이블 헤더 스타일 */
    #coordinateTable th, #coordinateTable td {
        padding: 10px;
        border: 1px solid #ccc;
        text-align: center;
        word-wrap: break-word; /* 긴 텍스트 줄 바꿈 */
        box-sizing: border-box;
        font-weight: bold; /* 진하게 처리 */
    }

    /* 헤더 고정 */
    #coordinateTable thead {
        background-color: #fff;
        position: sticky;
        top: 0;
        z-index: 1;
    }

    /* 열 너비 설정 */
    #coordinateTable th, #coordinateTable td {
        width: 100px;  /* 열 너비를 충분히 넓게 설정 */
    }

        
        
        
        
        
            

        .sensor_btn {
            position: relative;
            display :inline-block;
            padding: 20px 16px; /* 기존보다 작게 */
            font-size: 14px; /* 글자 크기 줄임 */
            font-weight: 600;
            color: var(--black-color01);
            box-shadow: inset 0 0 0 1px var(--black-color01);
            box-sizing: border-box;
            transition: all 0.4s;
            max-width: 160px; /* 버튼의 최대 너비를 설정 */
            width: 100%; /* 버튼이 컨테이너의 가로 크기에 맞게 조정되도록 설정 */
        }

        .sensor_btn:before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(315deg, rgba(6, 74, 153, 1) 0%, rgba(17, 97, 190, 1) 100%);
            opacity: 0;
            transition: all 0.4s;
        }

        .sensor_btn span {
            position: relative;
            display: flex;
            justify-content: center; /* 글자 중앙 정렬 추가 */
            align-items: center;
            gap: 10px;
            transition: all 0.4s;
        }

        .sensor_btn span:after {
            display: inline-flex;
            content: '';
            width: 8px;
            height: 8px;
            border: 2px solid var(--trans-color);
            border-top-color: var(--black-color01);
            border-right-color: var(--black-color01);
            transform: rotate(45deg);
            box-sizing: border-box;
            border-radius: 2px;
        }

        /* hover 효과 */
        .sensor_btn:hover {
            box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2);
        }

        .sensor_btn:hover:before {
            opacity: 1;
        }

        .sensor_btn:hover span {
            filter: var(--filter-white);
        }





        .sensor_longbtn {
            position: relative;
            display :inline-block;
            padding: 20px 16px; /* 기존보다 작게 */
            font-size: 15px; /* 글자 크기 줄임 */
            font-weight: 600;
            color: var(--black-color01);
            box-shadow: inset 0 0 0 1px var(--black-color01);
            box-sizing: border-box;
            transition: all 0.4s;
            max-width: 270px; /* 버튼의 최대 너비를 설정 */
            width: 100%; /* 버튼이 컨테이너의 가로 크기에 맞게 조정되도록 설정 */
        }

        .sensor_longbtn:before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(315deg, rgba(6, 74, 153, 1) 0%, rgba(17, 97, 190, 1) 100%);
            opacity: 0;
            transition: all 0.4s;
        }

        .sensor_longbtn span {position: relative;display: flex;justify-content: center; /* 글자 중앙 정렬 추가 */align-items: center;gap: 10px;transition: all 0.4s;}
        .sensor_longbtn span:after {display: inline-flex; content: ''; width: 8px; height: 8px; border: 2px solid var(--trans-color); border-top-color: var(--black-color01);border-right-color: var(--black-color01);transform: rotate(45deg);box-sizing: border-box;border-radius: 2px;}
        /* hover 효과 */
        .sensor_longbtn:hover {box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.2);}
        .sensor_longbtn:hover:before {opacity: 1;}
        .sensor_longbtn:hover span {filter: var(--filter-white);}


        
    .machine{background: var(--gray-bg01); padding-bottom: 120px;}
        .machine + .machine{background: none;}
    .machine .learning{display: flex; border-radius: 20px; overflow: hidden;}
        .machine .learning + .learning{margin-top: 20px;}
    .machine .learning .title{width: 28.5%;background: var(--black-color01);padding:30px;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;box-sizing: border-box;}
    .machine .learning .title h6{font-size:22px; font-weight: 400; color: var(--point-white);}
    .machine .learning .cont{width: 71.5%;padding:40px 34px;background: var(--point-white);display: flex;flex-direction: column;gap: 10px;box-sizing: border-box;}
        .machine + .machine .learning .cont{background: var(--gray-bg01);}
    .machine .learning .cont .desc{display: flex; align-items: center;}
    .machine .learning .cont .desc dt{font-size: 22px;font-weight: 400;color: var(--black-color01);width: 42%;}
    .machine .learning .cont .desc dd{font-size: 18px;font-weight: 400;color: var(--black-color01);width: 48%;}
    .machine .learning .cont .desc input[type="text"]{max-width: 320px;}

    input[type="text"], input[type="password"], select{width: 100%;border: 1px solid var(--border-color01);border-radius: 5px;padding:0 20px;height: 50px;box-sizing: border-box;color: var(--black-color01);font-weight: 400;font-size: 16px; background: var(--point-white); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    select{background: var(--point-white) url('../images/da_image/select_arw.svg') no-repeat calc(100% - 20px) 50%;appearance: none;padding-right: 50px;cursor: pointer;}
    input[type="text"]:focus, input[type="password"]:focus, select:focus{outline: none; border-color: var(--point-color01);}
    input[type="text"]:disabled{background: var(--border-color03);color: var(--black-color10);}

    .bullet_list {display: flex ; flex-direction: column;}
    .bullet_list + .learning{margin-top: 37px;}
    .bullet_list li{position: relative; display: flex;gap: 9px;font-size: 18px;font-weight: 400;color: var(--black-color05);line-height: 1.5;align-items: baseline; text-align: left;}
        .bullet_list li + li{margin-top: 5px;}
        .bullet_list li:before{display: inline-flex;content:'';width: 4px;height: 4px;border-radius: 100%;background: var(--black-color08);flex-shrink: 0;transform: translateY(-6px);}

    p.noti{font-size: 16px; font-weight: 400; color: var(--black-color01); margin:10px 0;}


    .experiment_list .thumb_list{display: flex;flex-wrap: wrap;gap: 60px 40px; padding-bottom: 100px;}
    .experiment_list .thumb_list > li{position: relative; width: calc(100% / 3 - 26.67px); box-sizing: border-box;}
    .experiment_list .thumb_list .link{position: absolute; top:0; left:0; width: 100%; height: 100%; z-index: 5;}
    .experiment_list .thumb_list .desc{ text-align: center;}
    .experiment_list .thumb_list .desc dt { height: 300px; border-radius: 20px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .experiment_list .thumb_list .desc dt + dd{margin-top: 20px;}
    .experiment_list .thumb_list .desc dt img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
        .experiment_list .thumb_list > li:hover .desc img{transform: scale(1.05);}
    .experiment_list .thumb_list .desc dd{font-size: 20px; font-weight: 500; color: var(--black-color01); line-height: 1.4;}

    .about .sub_title h5{line-height: 1.6;}
    .about .team{background: var(--point-color04); padding-bottom:120px; margin-top: 50px;}
    .about .logo_list{display: flex; flex-wrap: wrap; gap: 20px;}
    .about .logo_list > li{width: calc(100% / 5 - 16px); height: 100px; display: flex; align-items: center; justify-content: center; padding:15px; box-sizing: border-box; background: var(--point-white); border-radius: 10px; border: 1px solid var(--border-color01);}
    .about .bullet_list{align-items: center;}
    .about .bullet_list li{font-size: 22px; color: var(--black-color02);}
    .about .bullet_list li + li{margin-top: 8px;}


/*───────────────────────────────────────────────────────────
	member
───────────────────────────────────────────────────────────*/
	/** 공통 **/
		#wrap.member #header{background: var(--point-white); box-shadow: 3px 3px 5px rgba(0,0,0,0.1);}
		#wrap.member #header :where(.logo a, .gnb > li > a, .link_list > li > a){filter:none;}
		
		/*checkbox*/
			input[type="checkbox"] {display:none;}
				input[type="checkbox"] + label {cursor:pointer;font-size:14px;}
				input[type="checkbox"] + label:before, input[type="checkbox"] + label::before {display:inline-block;content:"";width:24px;height:24px;margin:-2px 10px 0 0;vertical-align:middle;background:url("../images/da_image/chk-off.png") left top no-repeat;cursor:pointer; background-size:100% !important;}
				input[type="checkbox"]:checked + label:before, input[type="checkbox"]:checked + label::before {background:url("../images/da_image/chk-on.png") left top no-repeat;}
			
		/*radio*/
			.radio_box{display:inline-block;}
			input[type="radio"] {display:none;}
				input[type="radio"] + label {cursor:pointer; margin-right:26px;}
				input[type="radio"] + label:before, input[type="radio"] + label::before {display:inline-block;content:"";width: 24px;height: 24px;margin: -2px 10px 0 20px;vertical-align:middle;background:url('../images/da_image/radio-off.png') left top no-repeat;cursor:pointer; background-size:100% !important;}
				input[type="radio"]:checked + label:before, input[type="radio"]:checked + label::before {background:url('../images/da_image/radio-on.png') left top no-repeat;}
				input[type="radio"] + label:first-of-type:before, input[type="radio"] + label:first-of-type::before {margin-left:0;}

		/*textarea*/
			textarea {font-size:12px;color:#666;border:1px solid #ddd;box-sizing:border-box;margin:0;padding:0 10px;vertical-align:middle;text-align:left;border-radius:0;}
			textarea:focus{outline:none;}
		
		/*button*/
			.btn_center {text-align:center;font-size:0;}
				.btn_center a {margin:0;}
				.btn_center input {margin-top:-10px;}
		
			.btn_right a {font-size:15px;font-weight:700;}
			.btn, .btn_sm, .btn_bbs_go {font-weight:700;border-style:solid;border-width:1px;padding:0;margin:0;text-indent:0;vertical-align:top;text-align:center;display:inline-block;box-sizing:border-box;cursor:pointer;box-shadow:none;outline:0 !important;font-family:'Pretendard', 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;}
			.btn_sm{height:50px;line-height:48px;font-size:18px;color:#333;font-weight:400;letter-spacing:-0.54px;padding:0 19px;margin-left:10px;}
				.btn, .btn:hover {width:200px;height:60px;line-height:58px;font-size:20px;color:#fff;font-weight:500;letter-spacing:-0.8px;box-sizing:border-box;}
				.btn_basic, .btn_basic:hover {border-color:#333 !important;background-color:#fff !important;color:#333 !important;}
				.btn_point, .btn_point:hover {border-color:var(--point-color01) !important;background-color:var(--point-color01) !important;}
				.btn_outline, .btn_outline:hover {border-color:var(--point-color01) !important;background-color:#fff !important; color:var(--point-color01) !important;}
				.btn_sm, .btn_sm:hover {border-color:#333 !important;background-color:#fff !important;color:#333 !important;}
				.btn_reset {background:none;line-height:48px;}
				.btn_reset, .btn_reset:hover{background:none;}
				.board_search .btn, .board_search .btn:hover {width:60px;height:34px;color:#fff;line-height:32px;font-size:13px;}
				.btn_wd {width:100%;height:50px;line-height:48px;font-size:17px;}
		
		/*** TABLE write ( board/_form_board_write ｜ board/_form_board_answer_write ｜ member/join ｜ member/mypage ｜ member/withdrawal ｜ member/change_pw ｜ member/periodic_change_pw ) ***/
			table.bbs_write {table-layout:fixed;width:100%;text-align:left;box-sizing:border-box;border-top:2px solid #333;border-bottom:1px solid #ddd;}
			.bbs_tit + table.bbs_write {margin-top: 25px;}
			table.bbs_write th,
			table.bbs_write td {padding-top:15px;padding-bottom:15px;padding-left:20px;padding-right:20px;font-size:16px;font-weight:300;color:#777;letter-spacing:-0.48px;text-align:left;vertical-align:middle;box-sizing:border-box;}
			table.bbs_write tr:first-of-type th, table.bbs_write tr:first-of-type td{padding-top:30px;}
			table.bbs_write tr:last-of-type th, table.bbs_write tr:last-of-type td{padding-bottom:30px;}
			table.bbs_write th {padding-left:16px;padding-right:16px;font-size:20px;font-weight:500;color:#333;line-height:50px;}
			table.bbs_write td {}
			table.bbs_write th,
			table.bbs_write td,
			table.bbs_write tr span,
			table.bbs_write tr input,
			table.bbs_write tr select {vertical-align:top;}
			table.bbs_write tr span,
			table.bbs_write tr input,
			table.bbs_write tr select,
			table.bbs_write tr textarea,
			table.bbs_write tr label {color:#666;font-weight:400;}
			table.bbs_write tr label.ex_radio {width:100%;display:block;}
			table.bbs_write tr input[type="radio"] + label.ex_radio:before, 
			table.bbs_write tr input[type="radio"] + label.ex_radio::before {margin:-2px 5px 0 0;}
			table.bbs_write tr td #captcha_box {display:inline-block;width:auto;vertical-align:middle;margin-right:1px;}
			table.bbs_write tr td input[name="captcha"],
			table.bbs_write tr td .btn_reset,
			table.bbs_write tr td #refreshCode {vertical-align:middle !important;}
			table.bbs_write th .require_dot,
			table.bbs_write th .require_dot:before {line-height:initial;height:inherit;color:#0076bd;font-weight:400;display:inline-block;font-size:inherit;margin-left:1px;}
			table.bbs_write th .require_dot {vertical-align:super;}
			table.bbs_write th .require_dot:before {content:' *';font-size:16px;vertical-align:middle;}
			table.bbs_write td p {line-height:20px;padding:5px 0 0;font-size:inherit;display:inline-block;margin:0;vertical-align:top;}
			table.bbs_write td .td_txt{font-size:16px;color:#777;font-weight:300;letter-spacing:-0.48px;line-height:50px;vertical-align: top;margin-left:18px;word-break:keep-all;}
			table.bbs_write td div.view_cont {padding:8px 10px 50px 10px; line-height:26px; min-height:150px;}
			table.bbs_write td input[type="text"],
			table.bbs_write td input[type="password"],
			table.bbs_write td input[type="number"],
			table.bbs_write td input[type="date"] {min-width:31%; }
			table.bbs_write td input[name="title"] {width:100%;}
			table.bbs_write td input[name="zip"] {width:80px;min-width:70px;}
			table.bbs_write td input[name="address"],
			table.bbs_write td input[name="address2"] {width:55%;min-width:450px;}
			table.bbs_write td input.tel {min-width:50px;}
			table.bbs_write td textarea {box-sizing: border-box; padding: 20px; min-width:100%;height:200px;}
			table.bbs_write td.td_mail select.mail_select {width:23%;margin-left:10px;}
			table.bbs_write td.td_mail .td_txt {font-size: 18px;}
			table.bbs_write td input[name="email_id"] {width:16%;min-width:120px;}
			table.bbs_write td input[name="email_id"] + span{margin:0 10px;}
			table.bbs_write td input[name="email_domain"],
			table.bbs_write td select.mail_select {width:20%;min-width:140px;}
			table.bbs_write td input[name="email_domain"] {display:inline-block !important;}
			table.bbs_write .mail td .changeEmail{margin-top:10px;display:inline-block;font-size: 16px;color: #777;font-weight: 300;letter-spacing: -0.48px;}
			table.bbs_write .input_file {}
			table.bbs_write .input_file td,
			table.bbs_write .input_file td input {vertical-align:middle;}
			table.bbs_write td .file_name {display: inline-block;vertical-align: top;}
			table.bbs_write td .file_name a {display:inline-block;vertical-align:middle;line-height:23px;}
			table.bbs_write td .file_name .file_no {margin-left:5px;}
			table.bbs_write td .at {display:inline-block;vertical-align:middle;margin:0 0 0 3px;}
			table.bbs_write td.join_birth select,
			table.bbs_write td.join_birth input{width:10.5%;min-width:initial;}
			table.bbs_write td.join_birth select{margin:0 10px;}
			table.bbs_write .input_email input {display:inline-block !important;}
			table.bbs_write td #country{width:23%;}
				/* 캡챠 */
			table.bbs_write tr td #captcha_box img{height:50px !important;}
			table.bbs_write.captcha {}
			table.bbs_write.captcha th {text-align:center;}
			table.bbs_write.captcha th #captcha_box {}
			table.bbs_write.captcha th #captcha_box img {width:100% !important;height:auto !important;}
			table.bbs_write.captcha td {line-height:40px;vertical-align:middle;}
			table.bbs_write.captcha td input,
			table.bbs_write.captcha td span,
			table.bbs_write.captcha td button {vertical-align:middle !important;}
			table.bbs_write tr td input[name="captcha"]{margin-left:10px;}

		.member_wrap {width: 100%; background: var(--blue-bg01); box-sizing: border-box; padding: 128px 0 142px;}
		.member_wrap .inr {max-width: 1300px;}
		.member_wrap .sub_title.hd {padding-bottom: 34px;}
		.member_wrap .sub_title h3 {font-size: 40px; letter-spacing: inherit;}
		.member_wrap .bbs_write_title {display: inline-block; font-size: 30px; color: #333; font-weight: 500; letter-spacing: -0.9px; padding-bottom: 24px;}
		.member_wrap .sub_pw_txt{margin-bottom: 24px; font-size:18px;color:#666;font-weight:400;letter-spacing:-0.54px;line-height:30px;word-break:keep-all;}
		.member_wrap .pw_info_txt{font-size:16px;color:#777;font-weight:400;letter-spacing:-0.48px;margin:20px 0 30px;word-break:keep-all;}
		.member_wrap table.bbs_write td input[type="text"],
		.member_wrap table.bbs_write td input[type="password"] {max-width: 300px; border-radius: inherit;}
		.member_wrap table.bbs_write td select {border-radius: inherit; font-size: 18px; color: #333; letter-spacing: -0.03em; background: var(--point-white) url("../images/da_image/select_arw2.png") no-repeat calc(100% - 20px) 50%;}
		.member_wrap table.bbs_write td input[type="text"]:focus,
		.member_wrap table.bbs_write td input[type="password"]:focus,
		.member_wrap table.bbs_write td select:focus,
		.member_wrap table.bbs_write td textarea:focus {border-color: var(--black-color03);}
		.member_wrap .btn_wrap {gap: 20px;}
	
	/*** 회원가입 약관동의 | member/join_agreement ***/
		.member_wrap .sub_agree_box {width: 100%; background:#fff; box-sizing: border-box; padding: 60px 40px; border-radius: 20px; overflow: hidden;}
		.member_wrap .sub_agree_box + .sub_agree_box {margin-top:60px;}
		
		.sub_agree_box .sub_agree{margin-bottom:60px;}
		.sub_agree_box .all_agree{width:100%;box-sizing:border-box;vertical-align: top;margin-bottom:37px;padding-bottom:38px;border-bottom:1px solid #000;}
		.sub_agree_box .all_agree label{font-size:20px;color:#333;font-weight:500;letter-spacing:-0.8px;display: block;box-sizing: border-box;padding-left: 37px;position: relative;}
		.sub_agree_box .all_agree label:before{margin-right:9px;position: absolute;left: 0;top: 4px;}
	
		.sub_agree_box .agree_cont{}
		.sub_agree_box .agree_cont + .agree_cont{margin-top:40px;}
		.sub_agree_box .agree_cont .cont_title{}
		.sub_agree_box .agree_cont .cont_title:after{clear:both;content:"";display: block;}
		.sub_agree_box .agree_cont .cont_title .chk{display: inline-block;vertical-align: top;}
		.sub_agree_box .agree_cont .cont_title label{font-size:20px;color:#333;font-weight:400;letter-spacing:-0.8px;}
		.sub_agree_box .agree_cont .cont_title label strong{font-size:inherit;color:var(--point-color01);font-weight:inherit;}
		.sub_agree_box .agree_cont .view_cont{display:inline-block;float: right;vertical-align: top;font-size:16px;color:#888;font-weight:400;letter-spacing:-0.64px;position: relative;padding-right:20px;margin-top:4px;cursor:pointer;}
		.sub_agree_box .agree_cont .view_cont:before{width:5px;height:5px;content:"";border:1px solid #888;border-width:1px 1px 0 0;position: absolute;right:0;top:6px;transform:rotate(135deg);}
		.sub_agree_box .agree_cont .view_cont.on:before{transform:rotate(-45deg);top:10px;}

		.sub_agree_box .agree_box {margin-top:21px;display: none;}
		.sub_agree_box .agree_box textarea{width:100%;height:160px;background:#f5f5f5;box-sizing:border-box;border:1px solid #f5f5f5;outline:none;font-size:15px;color:#666;line-height: 1.8;font-weight:400;letter-spacing:-0.6px;padding: 24px 30px;}
		.sub_agree_box .agree_box textarea::-webkit-scrollbar{width:4px;border-radius:2px;background:#ccc;}
		.sub_agree_box .agree_box textarea::-webkit-scrollbar-thumb{width:4px;border-radius:2px;background:#999;}
	 
	 /*** 회원가입 작성 | member/join ***/
		.member_wrap .sub_join .sub_agree_box {padding-top: 52px;}
		.sub_join .bbs_tit {position: relative; display: flex;}
		.member_wrap .sub_join .bbs_write_title {padding-bottom: 0;}
		.sub_join .bbs_tit span{display: inline-block;float: right;font-size:16px;color:#777;font-weight:400;letter-spacing:-0.48px;position: absolute;right:0;bottom:3px;}
		.sub_join .bbs_tit span strong{font-size:inherit;color:#0076bd;font-weight:inherit;letter-spacing:inherit;}
		
	/*** 로그인 | member/login.html ***/
		.sub_login .login_box {width:520px; margin:0 auto; padding:0; padding-top: 20px;}
		.sub_login .login_box input[type="text"],
		.sub_login .login_box input[type="password"] {font-size: 18px; border-radius: inherit;}
		.sub_login .login_box input[type="text"]::placeholder,
		.sub_login .login_box input[type="password"]::placeholder,
		.sub_login .login_box input[type="number"]::placeholder,
		.sub_login .login_box input[type="date"]::placeholder {font-weight: 300; color:#999; letter-spacing: -0.03em;}
		.sub_login .login_box input[type="text"]:focus,
		.sub_login .login_box input[type="password"]:focus {border-color: var(--black-color03);}
		.sub_login .login_box ul.form_list {}
		.sub_login .login_box ul.form_list li + li{margin-top:20px;}
		.sub_login .login_box ul.form_list li input {width:100%;height:60px;padding-left:30px;}
		.sub_login .login_box ul.form_list li button[type="submit"] {height:70px;font-size:22px;color:#fff;font-weight:400;letter-spacing:-0.88px;}
		.sub_login .login_box ul.login_link {width:100%;text-align:center;margin-top:28px;}
		.sub_login .login_box ul.login_link li {display:inline-block;box-sizing:border-box;vertical-align: top;position: relative;}
		.sub_login .login_box ul.login_link li + li{margin-left:24px;padding-left:24px;}
		.sub_login .login_box ul.login_link li + li:before {width:1px;height:10px;content:"";background:#ddd;position: absolute;left:0;top:5px;}
		.sub_login .login_box ul.login_link li a {color:#333;font-size:16px; font-weight:400;letter-spacing:-0.48px;}
		.sub_login .login_box ul.login_link li.first {background:none;}
		
	/*** 비밀번호 변경 | member/change_pw.html ***/
		.member_wrap .sub_change_pw .sub_agree_box {padding-top: 52px;}
		.member_wrap .sub_change_pw .bbs_write_title {padding-bottom: 10px;}
		
	/*** 회원탈퇴 | member/withdrawal.html ***/
		.member_wrap .sub_withdrawal .sub_agree_box {padding-top: 52px;}
		.member_wrap .sub_withdrawal table.bbs_write th {line-height:initial;vertical-align: middle;}
		
	/*** 회원가입 완료, 아이디/비밀번호 찾기 완료 | member/join_ok.html, member/find_ok.html ***/
		.sub_ok {max-width:100%; box-sizing:border-box; margin:0 auto;}
		.sub_ok .ok_box {background: #fff; width:100%;box-sizing:border-box; border-radius: 20px; margin:0 auto; padding:6% 0;text-align:center;overflow:hidden;position: relative;}
		.sub_ok .ok_box h3 {font-size:32px; font-weight:700; color:#222;word-break:keep-all;background:url('../images/da_image/icon-join-ok.png')no-repeat center 2px;padding-top:82px;}
		.sub_ok .ok_box h3 strong{font-size:inherit;color:#0076bd;font-weight:inherit;}
		.sub_ok .ok_box h4 {font-size:20px;color:#666;line-height:30px;font-weight:400;word-break:keep-all;margin:16px 0 54px;}
		.sub_ok .ok_box h4 span{font-size:inherit;color:#0076bd;font-weight:400;font-weight:inherit;}

    