@charset "utf-8";
/* 서브 비주얼 */
    .sub-visual{position: relative;min-height: clamp(450px, 94vw, 940px);background: url('../images/skin/sv_about.jpg') no-repeat center / cover;display: flex;align-items: center;text-align: center;box-sizing:border-box;}
        body:has(.sub_qi) .sub-visual{background-image: url('../images/skin/sv_qi.jpg');}
        body:has(.sub_board) .sub-visual{background-image: url('../images/skin/sv_board.jpg');}

    .sub-visual .title{display:grid;gap:var(--row-gap30);color: var(--point-white);text-align:left;padding-bottom:clamp(15px, 3.4vw, 34px);}
    .sub-visual .title :where(h2, h3){filter: var(--filter-white);}
    .sub-visual .title h2{font-size: var(--text-80);font-weight:700;text-transform: uppercase;}
    .sub-visual .title p{font-size: var(--text-28);font-weight:300;line-height:1.6;letter-spacing: -0.04em;position: relative;padding-top:clamp(30px, 6vw, 63px);}
    .sub-visual .title p:before{width:clamp(50px, 8vw, 80px);height:clamp(2px, 0.4vw, 4px);content:"";background:var(--point-white);position: absolute;top:0;left:0;}

    @media (max-width:479px){
        .sub-visual .title p br{display: none;}
    }

/*category*/
    .sec-category{position: sticky;top:0;left:0;width:100%;background:var(--point-white);box-sizing: border-box;border-bottom:1px solid var(--border-color01);z-index:10;}
    .sec-category ul{display: flex;flex-wrap: wrap;gap:var(--row-gap60);}
    .sec-category ul li a{display: block;font-size: var(--text-19);color: var(--black-color08);font-weight:500;padding:clamp(12px, 2.2vw, 22px) 0;position: relative;}
    .sec-category ul li a:before{width:0;height:2px;content:"";background:var(--point-color01);position: absolute;bottom:-1px;left:50%;translate:-50%;transition: all 0.4s;}
    .sec-category ul li.on a:before{width:100%;}
    .sec-category ul li.on a{color: var(--point-color01);font-weight: 600;}

        /* over */
        @media (hover:hover) and (pointer:fine) {
            .sec-category ul li:hover a:before{width:100%;}
        }

    @media (max-width:479px){
        .sec-category ul{gap:var(--row-gap30);}
    }

/*───────────────────────────────────────────────────────────

    about

───────────────────────────────────────────────────────────*/
    .sub_about > section{padding-top:clamp(70px, 14vw, 140px);}
    .about_txt{display: flex;flex-wrap:wrap;gap:clamp(30px, 6vw, 80px);align-items: center;}
    .about_mission{flex-direction: row-reverse;}
    .about_txt .img{width:37.2%;border-radius: var(--radius-20);overflow: hidden;aspect-ratio:auto 0.965;}
    .about_txt .img img{width:100%; height:100%; object-fit:cover;}
    .about_txt .txt_box{width:calc(62.8% - clamp(30px, 6vw, 80px));display: flex;flex-direction: column;gap:clamp(20px, 4vw, 44px);align-items: flex-start;}
    .about_title{font-size: var(--text-44);font-weight: 600;color: var(--black-color01);line-height: 1.4;position: relative;}
    .about_title:before{width:100%;height:clamp(2px, 0.4vw, 4px);content:"";background:var(--black-color00);position: absolute;bottom:-4px;left:0;}
    .about_txt .txt{display: flex;flex-direction: column;gap:var(--row-gap20);}
    .about_txt .txt p{font-size: var(--text-20);font-weight: 400;color: var(--black-color03);line-height: 1.6;letter-spacing:-0.03em;}

    @media (max-width:640px){
        #wrap .about_txt{flex-direction: column;}
        .about_txt .img, .about_txt .txt_box{width: 100%;}
    }

    .about_history .history_box{box-sizing:border-box;padding:var(--row-gap140) 0;background:url('../images/skin/history_img.jpg') no-repeat center / cover;}
    .about_history .w_custom{display: flex;align-items: flex-start;flex-wrap:wrap;justify-content: space-between;gap:30px;}
    .about_history .title{display: flex;flex-direction:column;gap:18px;position: sticky;top:100px;left:0;z-index:5;}
        .about_history .title span{font-size: var(--text-22);font-weight:600;color: var(--point-white);line-height: 1.6;font-weight:600;}
        .about_history .title h3{font-size: var(--text-44);font-weight: 600;color: var(--point-white);line-height: 1.4;}
    .about_history .list_box{width:calc(75% - 30px);max-width:760px;position: relative;}
        .about_history .list_box .line{position: absolute;content:'';width: 1px;height: calc(100% - clamp(15px, 3.2vw, 25px));background:rgba(255,255,255,0.2);top:clamp(15px, 3.2vw, 25px);left:0;overflow: hidden;}
        .about_history .list_box .line em{width:100%;height:0;background:var(--point-white);position: absolute;top:0;left:0;}
    .about_history .hisotry_list{display: flex;flex-direction: column;gap:var(--row-gap80);}
        .about_history .hisotry_list > li{box-sizing:border-box;padding-left:clamp(24px, 6.8vw, 68px);position: relative;display: flex;flex-direction: column;gap:clamp(20px, 4vw, 40px);}
        .about_history .hisotry_list > li:before{width:clamp(5px, 0.9vw, 9px);height:clamp(5px, 0.9vw, 9px);content:"";background:var(--point-white);border-radius:100%;position: absolute;top:clamp(12px, 2vw, 18px);left:calc(clamp(5px, 0.9vw, 9px) / 2 * -1);box-shadow:0 0 0 clamp(4px, 0.7vw, 8px) rgba(255,255,255,0.2);opacity:0.4;transition: all 0.4s;}
        .about_history .hisotry_list > li.on:before{opacity:1;}
        .about_history .hisotry_list > li.done:before{opacity:1;box-shadow:none;}
    .about_history .hisotry_list h4{font-size: var(--text-32);font-weight:500;color: var(--point-white);line-height: 1.4;}
    .about_history .history_cont{display: flex;flex-direction: column;gap:var(--col-gap30);}
    .about_history .history_cont dl{display: flex;gap:var(--row-gap30);}
    .about_history .history_cont dl dt{width:clamp(28px, 4vw, 40px);font-size: var(--text-20);font-weight:500;color: var(--point-white);line-height: 1.4;flex-shrink: 0;}
    .about_history .history_cont .bullet-list > li{color:var(--point-white);font-weight:300;}
    .about_history .history_cont .bullet-list > li::before{width:3px;background:var(--point-white);opacity:0.4;}

    @media (max-width:640px){
        .about_history .title{width:100%;position: static;}
        .about_history .list_box{width:100%;max-width:100%;}
    }

    .about_license{display: flex;flex-direction: column;gap:clamp(20px, 4vw, 44px);align-items: flex-start;}
    .about_license .list{display: flex;flex-wrap:wrap;gap:var(--row-gap60);width:100%;}
    .about_license .list > li{width:calc(50% - var(--row-gap60) / 2);box-sizing:border-box;display: flex;align-items: center;justify-content: center;border-radius:var(--radius-30);background:var(--gray-bg01);padding:73px 60px;}
    .about_license .list > li .img{box-shadow:0 0 60px rgba(0, 0, 0, 0.10);}
    .about_license .list > li .img img{width:100%; height:100%; object-fit:cover;}

    @media (max-width:640px){
        .about_license .list > li{width:100%;padding:clamp(30px, 6vw, 60px) 30px;}
        .about_license .list > li .img{max-width:55%;}
    }

/*───────────────────────────────────────────────────────────

    게시판

───────────────────────────────────────────────────────────*/
    /*체크박스*/
        #wrap label:has([type="checkbox"]){display: flex;align-items: flex-start;line-height: 26px;gap: 10px;cursor: pointer;font-size: var(--text-18);font-weight: 400;color: var(--black-color00);}
        #wrap label:has([type="checkbox"]) em{font-weight: inherit;color: var(--point-color02);display: contents;}
        #wrap label [type="checkbox"]{position: relative;display: block;width: 24px;height: 24px;border: 1px solid var(--border-color01);background: var(--point-white);flex-shrink: 0;cursor: pointer;transition: all 0.4s;}
        #wrap label [type="checkbox"]:before{position: absolute;content:'';inset: 0;background: url('../images/skin/chk_icon.png') no-repeat center / 14px auto; transition: all 0.4s;}
            #wrap label [type="checkbox"]:checked{background: var(--point-color01); border-color: var(--point-color01);}
            #wrap label [type="checkbox"]:checked:before{filter: var(--filter-white);}
            
        @media (max-width:1023px) {
            #wrap label:has([type="checkbox"]){line-height: clamp(20px, 3.1vw, 24px);}
            #wrap label [type="checkbox"]{width: clamp(20px, 3.1vw, 24px);height: clamp(20px, 3.1vw, 24px);}
            #wrap label [type="checkbox"]:before{background-size: clamp(10px, 1.9vw, 14px);}
        }

    /*버튼*/
        #wrap .btn_wrap{padding-top:60px;}
        #wrap .btn_wrap .btn{display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;border-radius:4px;width:200px;height:70px;font-size:var(--text-20);font-weight:500;transition:all 0.3s;}
        #wrap .btn_wrap .btn_point{background:var(--point-white);border:1px solid var(--black-color03);color:var(--black-color03);}
        #wrap .btn_wrap .btn_basic{background:var(--point-color01);border:1px solid var(--point-color01);color:var(--point-white);}
        #wrap .btn_wrap .btn span{font-size:inherit;color:inherit;font-weight:inherit;}
            
        /* over */
        @media (hover:hover) and (pointer:fine) {
            #wrap .btn_wrap .btn_point:hover{color:var(--point-white);border-color:var(--point-color01);background:var(--point-color01);;}
            #wrap .btn_wrap .btn_basic:hover{background:var(--point-white);color:var(--point-color01);}
        }

        @media (max-width:1023px) {
            #wrap .btn_wrap{padding-top:clamp(40px, 6vw, 60px);}
            #wrap .btn_wrap .btn{width:clamp(140px, 2vw, 200px);height:clamp(50px, 7vw, 70px);}
        }

    /* 인풋 */
        #wrap :where([type="text"], select){border:1px solid var(--border-color01);background: var(--point-white);font-size: var(--text-19);font-weight: 400;color: var(--black-color03);line-height: normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:60px;padding: 0 20px;letter-spacing: -0.03em; transition: all 0.4s;}
        #wrap :where([type="text"], select)::placeholder{color: var(--black-color10);}
        #wrap :where([type="text"], select):focus{border-color: var(--black-color00);}
        #wrap select{width: 100%;max-width: 160px;padding-right:30px;appearance: none;background:var(--point-white) url('../images/skin/sel_arw.svg') no-repeat calc(100% - 20px) / 11px auto;}

        #wrap input[type="text"]::-webkit-input-placeholder {color:var(--black-color10);}
        #wrap input[type="password"]::-webkit-input-placeholder {color:var(--black-color10);}
        #wrap input[type="text"]::-moz-placeholder {color:var(--black-color10);}
        #wrap input[type="password"]::-moz-placeholder {color:var(--black-color10);}
        #wrap input[type="text"]:-ms-input-placeholder {color:var(--black-color10);}
        #wrap input[type="password"]:-ms-input-placeholder {color:var(--black-color10);}
        #wrap input[type="text"]:-moz-placeholder {color:var(--black-color10);}
        #wrap input[type="password"]:-moz-placeholder {color:var(--black-color10);}
        #wrap input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0) inset;-webkit-text-fill-color:var(--black-color08);font-size:inherit;}

        @media (max-width:1023px) {
        #wrap :where([type="text"], [type="password"], [type="number"], [type="date"], select){padding-inline: clamp(15px, 2.3vw, 20px);height: clamp(45px, 6.1vw, 60px);}
        #wrap select{max-width: clamp(110px, 18vw, 160px);padding-right: clamp(24px, 5.5px, 30px);background-position: calc(100% - clamp(15px, 2.3vw, 20px)) 50%;background-size: clamp(8px, 1.9vw, 11px);}
        }

    /*write*/
        #wrap .board_write{position: relative; display: block; width: 100%; text-align: left; font-size: var(--text-20);box-sizing:border-box;border-top:1px solid var(--black-color01);border-bottom:1px solid var(--border-color01);padding:40px 0;}
        #wrap .board_write :where{display: block; width: 100%;}
        #wrap .board_write tbody{display: flex; gap:30px 60px; flex-wrap: wrap;}
        #wrap .board_write tr{display: flex;align-items: center;width: calc(100% / 2 - 30px);background: var(--point-white);}
        #wrap .board_write th{width: 180px;flex-shrink: 0;font-size: 100%;font-weight: 500;color: var(--black-color01);padding-right: 15px;box-sizing:border-box;}
        #wrap .board_write th label{display: block; width: 100%;}
        #wrap .board_write th em{font-weight: inherit; color: var(--point-color01);}
        #wrap .board_write td{width: 100%; font-size: 90%; font-weight: 400; color: var(--black-color00);}
        #wrap .board_write input:where([type="text"], [type="password"]){width: 100%;font-size: inherit;font-weight: inherit;color: inherit;}
        #wrap .board_write tr.line1,
        #wrap .board_write tr.title,
        #wrap .board_write tr.contents,
        #wrap .board_write tr.file,
        #wrap .board_write tr.captcha{width:100%;}
        #wrap .board_write .inp_list{display: flex;flex-wrap:wrap;gap:10px 20px;}
        #wrap .bbs_write_box select{max-width:100%;}
        #wrap .board_write tr textarea{width:100%;height:300px;resize:none;box-sizing:border-box;background:var(--point-white);border:none;outline:none;color: var(--black-color00);font-size: var(--text-18);font-weight:400;padding:20px 20px;border:1px solid var(--border-color01);}
        #wrap .bbs_write_box .file_box{display: flex;gap:10px;width:610px;}
        #wrap .bbs_write_box .file_box .file_txt{width:calc(100% - 150px);height:60px;box-sizing:border-box;padding-inline:15px;display: inline-flex;align-items: center;background:var(--point-white);border:1px solid var(--border-color01);}
        #wrap .bbs_write_box .file_box label{cursor:pointer;display: inline-flex;box-sizing:border-box;align-items: center;justify-content: center;text-align: center;width:140px;height:60px;border:1px solid var(--black-color00);font-size:var(--text-18);color:var(--black-color00);font-weight:500;}
        #wrap .bbs_write_box .captcha_td{display: flex;gap:10px;}
        #wrap .bbs_write_box .captcha_wrap {display: flex;gap: 10px;padding:10px;width: 250px;box-shadow: inset 0 0 0 1px var(--border-color01);}
        #wrap .board_write #captcha_box{width: 180px;height: 40px;overflow: hidden;box-sizing:border-box;}
        #wrap .board_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height:none;margin: -1px 0 0 -1px;}
        #wrap .board_write #refreshCode{width: 40px;height: 40px;font-size: 0;background: var(--black-color06) url('../images/skin/refreshCode.svg') no-repeat center; cursor: pointer;}
        #wrap .bbs_write_box .captcha_wrap + input{width:350px;}
        #wrap .bbs_write_box .chk_list{display: flex;flex-wrap:wrap;gap:10px 40px;}

        #wrap .policy_wrap {margin-top:40px; box-sizing: border-box;padding:40px 40px;border:1px solid var(--border-color01);}
        #wrap .policy_wrap label:has([type="checkbox"]){font-size:var(--text-20);color:var(--black-color03);font-weight:500;}
        #wrap .policy_wrap label:has([type="checkbox"]) strong{color:var(--point-color01);font-weight:500;}
        #wrap .policy_wrap .area_box {width: 100%;margin-top: 20px;padding-inline: 9px; box-sizing: border-box;background:var(--gray-bg01);}
        #wrap .policy_wrap .area_box textarea {width: 100%;height:150px;padding-block: 20px 16px; padding-inline: 10px; box-sizing: border-box;color: var(--black-color08);font-size: var(--text-16);line-height: 1.6;letter-spacing: 0;border: none;resize: none;background: var(--trans-color);outline: none;}
        #wrap .policy_wrap .area_box textarea::-webkit-scrollbar {width: 4px;}
        #wrap .policy_wrap .area_box textarea::-webkit-scrollbar-thumb {background: var(--black-color02); border-radius: 2px;}
        #wrap .policy_wrap .area_box textarea::-webkit-scrollbar-track {border-radius: 10px;background: var(--border-color01);margin-block: 10px; }

        @media (max-width:1200px) {
            #wrap .board_write tr:has(.chk_list, #captcha){width: 100%;}
        }
        @media (max-width:1023px) {
            .inq_bnr{margin-bottom:clamp(40px, 7vw, 80px);}
            
            #wrap .board_write tbody{gap:20px 60px;}
            #wrap .board_write tr{width: 100%; padding-inline:clamp(20px, 3vw, 30px);}
            #wrap .bbs_write_box .file_box{width:100%;}
            #wrap .bbs_write_box .file_box .file_txt,
            #wrap .bbs_write_box .file_box label{height:clamp(40px, 6.1vw, 60px);}
            #wrap .board_write tr textarea{padding:clamp(15px, 2.3vw, 20px);}
            #wrap .bbs_write_box .captcha_wrap + input{width:calc(100% - 260px);height:60px;}
            #wrap .policy_cont{margin-top: clamp(20px, 3vw, 30px);}
            
            #wrap .bbs_write_box .chk_list{gap:10px 20px;}
        }
        @media (max-width:860px) {
            #wrap .policy_wrap{padding:25px 20px;margin-top:30px;}
        }
        @media (max-width:640px) {
            #wrap .board_write th{width: 140px;}
            #wrap .board_write td:has(.cap_wrap){flex-wrap: wrap;}
            #wrap .bbs_write_box .captcha_td{flex-direction: column;align-items: flex-start;}
            #wrap .bbs_write_box .captcha_wrap{width:auto;}
            #wrap .board_write #captcha_box{width: 160px;height: 35px;}
            #wrap .board_write #refreshCode{width: 35px;height: 35px;background-size: 13px auto;}
            #wrap .board_write tr textarea{height:200px;}
            #wrap .bbs_write_box .captcha_wrap + input{width:100%;height:clamp(40px, 6.1vw, 60px)}
        }
        @media (max-width:479px) {
            #wrap .board_write{padding:25px 0;}
                    
            #wrap .board_write tr{flex-wrap: wrap;min-height: auto;padding:0;gap:10px;}
            #wrap .board_write th{width: 100%; padding-right: 0; flex-shrink: unset; font-size: 100%;}
            #wrap .bbs_write_box .file_box label{width:90px;}
            #wrap .bbs_write_box .file_box .file_txt{width:calc(100% - 100px);}	
            #wrap .board_write tr textarea{height:150px;}
        }