@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	" board｜errors｜goods｜service｜layout/board｜layout/display｜layout/goods "
	" layout/popup.html "

	위 폴더 및 페이지 커스텀 및 layout, navigation, button, company 관련 편집 css 파일 입니다.

	** header, footer, main 관련은 /css/skin.css 에 있습니다.

───────────────────────────────────────────────────────────*/
/*───────────────────────────────────────────────────────────
	button common
───────────────────────────────────────────────────────────*/
    .btn, .btn_lg, .btn_sm, .btn_md {position: relative;display: inline-flex;align-items: center;justify-content: center;border:1px solid;font-weight: 700;box-sizing: border-box;color: var(--point-color06);line-height: 1.2;border-radius: 0;overflow: hidden;} 

    
    #wrap .btn {width: auto; min-width: 200px;height: 64px;padding: 0 20px;font-size: inherit;border-radius: 60px;}
    #wrap .btn.btn_wd {width:100%;}
    #wrap .btn.btn_sm{min-width: auto;width: 140px;height: 52px;text-align: center;padding-inline: 10px;border-radius: var(--radius-06);font-size: max(13px, var(--title-16));font-weight: 400;}
    #wrap .btn.btn_xsm{min-width: auto;width: auto;height: auto;text-align: center;padding-inline: 10px;border-radius: var(--radius-06);font-size: max(13px, var(--title-15));font-weight: 400;padding: 7px 16px 5px;}

    #wrap .btn_point{border-color: var(--point-color06);background: var(--point-color06);color: var(--point-white);font-weight: 500;}
    #wrap .btn_wh{border-color: var(--point-white);background-color: var(--point-white);color: var(--black-color00);}
    #wrap .btn_basic{border-color: var(--point-color06);background-color: var(--point-white);color: var(--point-color06);}
    #wrap .btn_default{border-color:var(--black-color01);background-color:var(--point-white);color:var(--black-color01);}
    #wrap .btn_info{border-color: var(--border-color01);background-color:var(--point-white);color:var(--black-color06);}
    #wrap .btn_read{border-color: var(--border-color03);background-color:var(--border-color03);color:var(--black-color08);}
    #wrap .btn_reset{border-color:#d3d3d3;background:#fff url('../images/common/icon_btn_reset.gif') no-repeat 9px 50%;padding:0 10px 0 30px;color:#555;}

    .btn_wrap {margin: 0;padding: 60px 0 0;display:flex;justify-content: center;flex-wrap: wrap;gap: 10px;font-size: var(--title-20);}

    @media (max-width:1023px) {
        .btn_wrap{padding-top: clamp(30px, 6vw, 60px);}
        #wrap .btn {min-width: clamp(110px, 20vw, 200px);height: clamp(46px, 7vw, 64px);}
        #wrap .btn.btn_sm{width: clamp(120px, 15vw, 140px);height: clamp(44px, 6vw, 52px);}
    }
    @media (max-width:479px) {
		#wrap .btn{font-size: max(15px, 90%);}
    }
	

/*───────────────────────────────────────────────────────────
	공통
───────────────────────────────────────────────────────────*/
    #wrap input:where([type="text"], [type="password"], [type="number"], [type="date"]){height: 52px;border:1px solid var(--border-color01);line-height: normal;padding: 0 20px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing: border-box;border-radius: var(--radius-06);font-size: max(13px, var(--title-16));font-weight: 400;color: var(--black-color05);letter-spacing: -0.03em;}
    #wrap input:where([type="text"], [type="password"], [type="number"], [type="date"])::placeholder{color: var(--black-color10); font-weight: 300;}

    #wrap label:has([type="checkbox"]){display: inline-flex;gap: 10px;line-height: 25px;cursor: pointer;font-size: var(--title-17);font-weight: 500;color: var(--black-color08);}
    #wrap label:has([type="checkbox"]:checked){color: var(--black-color05);}
    #wrap label [type="checkbox"]{display: inline-block;appearance: none;background: url('../images/skin/chk_box.svg') no-repeat center / 100% auto;width: 24px;height: 24px;cursor: pointer;flex-shrink: 0;box-sizing: border-box; }
    #wrap label [type="checkbox"]:checked{background-image: url('../images/skin/chk_boxOn.svg');}

    #wrap label:has([type="radio"]){display: inline-flex;gap: 10px;line-height: 20px;cursor: pointer;font-size: var(--title-17);font-weight: 500;color: var(--black-color08);transition: all 0.4s;}
    #wrap label:has([type="radio"]:checked){color: var(--black-color05);}
    #wrap label [type="radio"]{display: inline-block;appearance: none;background: url('../images/skin/radio.svg') no-repeat center / 100% auto;width: 20px;height: 20px;cursor: pointer;flex-shrink: 0; }
    #wrap label [type="radio"]:checked{background-image: url('../images/skin/radioOn.svg');}

    #wrap .chk_list{display: flex;flex-wrap: wrap;gap: 14px 30px;}
    #wrap .chk_list > li{display: inline-flex;}
    #wrap .chk_list > li:has(.exp_wrap){width: 100%;}
    #wrap .chk_list .exp_wrap{display: flex; align-items: center; flex-wrap: wrap;}
    #wrap .chk_list .exp_desc{display: flex;align-items: baseline;gap: 4px;}
    #wrap .chk_list .exp_desc:not(:last-child):after{display: inline-flex; content:''; width: 1px; height: 12px; background: var(--border-color01); margin-inline: 20px;}
    #wrap .chk_list .exp_desc > dt{flex-shrink: 0;}

    #wrap textarea{width: 100%;font-size: var(--title-14);font-weight: 400;line-height: 1.6;padding:15px 18px;box-sizing: border-box;resize: none;border:1px solid var(--border-color01);border-radius: var(--radius-06);height: 150px;overflow: hidden;overflow-y: auto;}
    #wrap textarea::-webkit-scrollbar { width: 4px; }
    #wrap textarea::-webkit-scrollbar-track { background: var(--border-color01); border-radius: 10px; margin:10px;}
    #wrap textarea::-webkit-scrollbar-thumb { background-color: var(--black-color10); border-radius: 10px;}

    #wrap .area_wrap{position: relative;width: 100%;height: 150px; padding:0 10px; border: 1px solid var(--border-color01); box-sizing: border-box; border-radius: var(--radius-06);}
    #wrap .area_wrap textarea{height: 100%; border:0; padding-inline: 10px; border-radius: 0;}

    #wrap .sel_custom{position: relative;display: inline-block;width: fit-content;min-width: 160px;box-sizing: border-box;z-index: 9;}
    #wrap .sel_custom select{display: none;}
    #wrap .sel_custom .desc{position: relative; font-size: var(--title-20); width: 100%; box-sizing: border-box;}
    #wrap .sel_custom .desc > :where(dt, dd){width: 100%;font-weight: 400;color: var(--black-color05);box-sizing: border-box;border-radius: var(--radius-06);background: var(--point-white);border: 1px solid var(--border-color01);}
    #wrap .sel_custom .desc > dt{position: relative;display: flex;align-items: center;padding-inline: 20px 40px;height: 52px;box-sizing: border-box;font-size: max(14px, 80%); cursor: pointer;}
        #wrap .sel_custom .desc > dt:before{position: absolute;content:'';width: 7px;height: 7px;border: solid var(--black-color03);border-width: 0 2px 2px 0;top: 45%;right: 20px;transform: translateY(-50%) rotate(45deg);border-radius: 1px;transition: all 0.4s;}
        #wrap .sel_custom .desc > dt.on:before{top: 55%;transform: translateY(-50%) rotate(45deg) scale(-1,-1);}
    #wrap .sel_custom .desc > dd{position: absolute;top: calc(100% - 1px);left:0;padding-block: 12px;font-size: max(13px, 70%);max-height: 170px;overflow: hidden;overflow-y: auto;opacity: 0;pointer-events: none;transition: all 0.4s;}
    #wrap .sel_custom .desc:has(> dt.on) > dd{opacity: 1; pointer-events: all; }
	#wrap .sel_custom .desc > dd a{display:block;padding: 5px 20px;}
    #wrap .sel_custom .desc > dd a.on, #wrap .sel_custom .desc > dd:not(:has(a.on)) a:first-child{color: var(--point-color06);}
    

    .sub_content{font-family: var(--font-type01);}
    .cont_title{position: relative;font-size: var(--title-20);box-sizing: border-box;display: flex;flex-direction: column;gap: 24px;}
    .cont_title h3{font-size: 200%;font-weight: 700;color: var(--black-color02);line-height: 1.3;letter-spacing: -0.03em;}
    .cont_title h4{font-size: 150%;font-weight: 700;color: var(--black-color03);line-height: 1.3;letter-spacing: -0.03em;}
        .cont_title h4:has(small){display: flex;align-items: center;flex-wrap: wrap;gap: 0 14px;}
    .cont_title h4 small{font-size: max(13px, 53%);font-weight: 400;color: var(--black-color08);padding-top: 10px;}
    .cont_title h5{font-size: 120%;font-weight: 400;color: var(--black-color03);line-height: 1.4;letter-spacing: -0.03em;}
    .cont_title h5 strong{font-weight: 700; color: var(--point-color06);}
    .cont_title h5 em{font-weight: inherit;text-decoration: underline;text-decoration-thickness: 12px;text-decoration-color: rgba(234, 73, 36, 0.1);text-underline-offset: -2px;text-decoration-skip-ink: none;}
    .cont_title h5 small{font-size: 91.6%; font-weight: inherit; color:var(--black-color07);}
    .cont_title p{font-size: 90%;font-weight: 400;color: var(--black-color06);line-height: 1.78;letter-spacing: -0.03em;}
    .cont_title p em{font-weight: 700; color: var(--point-color06);}

    .program_list{position: relative;max-width: 1000px;margin-inline: auto;display: flex;flex-direction: column;gap: 40px;}
    .program_list > li{position: relative;display: flex;align-items: center;gap: 25px 0;}
    .program_list .thumb{position: relative;font-size: 0;width: 32%;aspect-ratio: 0.708;overflow: hidden;border-radius: var(--radius-10);}
    .program_list .cont_title{width: 68%;padding-left: clamp(30px, 4.4vw, 80px);}

        .program_list > li:nth-child(2n){flex-direction: row-reverse;}
        .program_list > li:nth-child(2n) .cont_title{padding-inline: 0 clamp(30px, 4.4vw, 80px);text-align: right;}

    .bullet_list{position: relative; font-size: var(--title-20); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; align-items: flex-start;}
    .bullet_list > li{display: flex;align-items: baseline;gap: 8px;font-size: 85%;font-weight: 400;color: var(--black-color07);line-height: 1.59;letter-spacing: -0.03em;}
        .bullet_list > li:before{display: inline-flex;content:'';width: 4px;height: 4px;border-radius: 100%;background: var(--black-color07);flex-shrink: 0;translate: 0 -4px;}
    .bullet_list > li strong{font-weight: 700; color: var(--black-color05);}

    .sec_wrap{display: flex; flex-direction: column; gap: 80px;}
    .sec_wrap > section:not(:first-child){padding-top: 80px; border-top: 1px solid var(--border-color01); box-sizing: border-box;}

    @media (max-width:1023px){
        #wrap input:where([type="text"], [type="password"], [type="number"], [type="date"]){height: clamp(44px, 6vw, 52px);padding-inline: clamp(15px, 2vw, 20px);}

        #wrap label:has([type="checkbox"]){line-height: clamp(19px, 2.5vw, 25px);}
        #wrap label [type="checkbox"]{width: clamp(18px, 2.4vw, 24px);height: clamp(18px, 2.4vw, 24px);}

        #wrap label:has([type="radio"]){line-height: clamp(16px, 20vw, 20px);}
        #wrap label [type="radio"]{width: clamp(16px, 2vw, 20px);height: clamp(16px, 2vw, 20px);}

        #wrap textarea{padding:clamp(12px, 1.5vw, 15px) clamp(15px, 2vw, 20px);}

        #wrap .area_wrap{height: clamp(120px, 15vw, 150px);}

        #wrap .sel_custom .desc > dt{height: clamp(44px, 6vw, 52px);padding-inline: clamp(15px, 2vw, 20px) clamp(35px, 4vw, 40px);}
        #wrap .sel_custom .desc > dt:before{right:clamp(15px, 2vw, 20px);}
        #wrap .sel_custom .desc > dd a{padding-inline: clamp(15px, 2vw, 20px);}

        #wrap .chk_list{gap:clamp(10px, 2vw, 14px) clamp(20px, 3.5vw, 30px);}
        #wrap .chk_list .exp_desc:not(:last-child):after{height: clamp(10px, 2vw, 12px); margin-inline: clamp(15px, 2vw, 20px);}

        .cont_title{gap: clamp(12px, 2.4vw, 24px);text-wrap: balance;}
        .cont_title h3{font-size: 180%;}
        .cont_title h5 em{text-decoration-thickness: clamp(6px, 1.7vw, 12px);text-underline-offset:clamp(-2px, -0.2vw, 0px)}

        .sec_wrap{gap: clamp(40px, 8vw, 80px);}
        .sec_wrap > section:not(:first-child){padding-top: clamp(40px, 8vw, 80px);}
    }
    @media (max-width:860px){
        #wrap .area_wrap textarea{padding-inline:5px;}
        #wrap textarea{padding:12px 15px;}
    }
    @media (max-width:640px){
        .cont_title h3{font-size: 170%;}

        .program_list > li{flex-direction: column;align-items: flex-start;}
        .program_list > li:nth-child(2n){flex-direction: column;align-items: flex-end;}
        .program_list .thumb{width: auto;}
        .program_list .cont_title{width: 100%;padding-inline: 0;}
        .program_list > li:nth-child(2n) .cont_title{padding-inline: 0;}

        .bullet_list > li:before{width: 3px; height: 3px;}
    }
    @media (max-width:479px){
        .cont_title h3{font-size: 160%;}
        .cont_title h5{font-size: 100%;}
		.cont_title p{font-size: max(14px, 80%);}
    }

/*───────────────────────────────────────────────────────────
	member
───────────────────────────────────────────────────────────*/
    /* 로그인 */
        #wrap .sub_login{position: relative;width: 100%;max-width: 400px;margin-inline: auto;}
        #wrap .sub_login .inp_list{display: flex; flex-direction: column; gap: 15px;}
        #wrap .sub_login .inp_list :where(input[type="text"], input[type="password"]){width: 100%;}
        #wrap .sub_login .login_link{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;font-size: var(--title-20);text-align: center;margin-top: 15px;gap: 10px 0;}
        #wrap .sub_login .login_link > li{font-size: max(13px, 75%);font-weight: 400;color: var(--black-color05);}
        #wrap .sub_login .login_link > li:not(:last-child):after{display: inline-block;content:'';width: 1px;height: 10px;background: var(--border-color01);margin-inline:14px;vertical-align: middle;}
        #wrap .sub_findok{position: relative; text-align: center;}
        #wrap .sub_findok .txt_wrap{display: flex;flex-direction: column;gap: clamp(12px, 20px, 1.5vw);font-size: var(--title-20);}
        #wrap .sub_findok .txt_wrap h3{font-size: 120%;font-weight: 500;color: var(--black-color02);}
        #wrap .sub_findok .txt_wrap h4{font-size: 90%;font-weight: 400;color: var(--black-color06); line-height: 1.5;}

        @media (max-width:1023px){
            #wrap .sub_login .inp_list{gap: clamp(10px, 2vw, 15px);}
        }

    /* 약관동의 */
        #wrap .join_step{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;text-align: center;font-size: var(--title-20);counter-reset: joinStep;margin-block: -0.6vw 60px;gap: 15px 0;}
        #wrap .join_step > li{font-size: 90%;font-weight: 400;color: var(--black-color10); display: inline-flex;align-items: center;}
        #wrap .join_step > li:not(:last-child):after{display: inline-flex;content:'';width: 8px;height: 8px;border: solid var(--border-color01);border-width: 0 2px 2px 0;box-sizing: border-box;transform: rotate(-45deg);margin-inline: 28px 30px;}
        #wrap .join_step > li span{display: inline-flex;align-items: center;box-sizing: border-box;}
            #wrap .join_step > li span:before{display: inline-flex;content: counter(joinStep);counter-increment: joinStep;align-items: center;justify-content: center;width: 30px;aspect-ratio: auto 1;background: var(--black-color10);border-radius: 100%;font-size: max(11px, 72.2%);font-family: var(--font-type02);font-weight: 600;color: var(--point-white);margin-right: 10px;flex-shrink: 0;line-height: 1.2;box-sizing: border-box;}
            
            #wrap .join_step > li.on{color: var(--point-color06);}
            #wrap .join_step > li.on span:before{background: var(--point-color06);}

        #wrap .sub_agree .form_box{display: flex; flex-direction: column; gap:60px;}
        #wrap .sub_agree .form_box .item{display: flex; flex-direction: column; gap: 15px;}

        @media (max-width:1023px){
            #wrap .join_step{margin-bottom: clamp(25px, 6vw, 60px);}
            #wrap .join_step > li:not(:last-child):after{margin-inline: clamp(12px, 2.8vw, 28px) clamp(15px, 3vw, 28px);}
            #wrap .join_step > li span:before{width: clamp(27px, 3vw, 30px);}

            #wrap .sub_agree .form_box{ gap:clamp(40px, 6vw, 60px);}
        }
        @media (max-width:479px){
            #wrap .join_step > li{width: 100%;flex-direction: column;justify-content: center;gap: 8px;}
            #wrap .join_step > li:not(:last-child):after{transform: rotate(45deg);margin-inline: 0;}
            #wrap .join_step > li span{width: 100%;flex-direction: column;gap: 8px;border-radius: var(--radius-04);overflow: hidden;box-shadow: inset 0 0 0 1px var(--border-color01);padding-bottom: 8px;}
                #wrap .join_step > li span:before{margin-right: 0;width: 100%;aspect-ratio: unset;border-radius: 0;height: 27px;}
        }

    /* 회원가입 */
        #wrap .bbs_wrap{position: relative;border-top: 1px solid var(--black-color01);border-bottom: 1px solid var(--border-color01);box-sizing: border-box;padding: clamp(30px, 2.5vw, 40px) clamp(15px, 2vw, 30px);}
        #wrap .bbs_wrap :where(table, tbody, tr, th, td){display: block; width: 100%; box-sizing: border-box; background: none;}
        #wrap .bbs_wrap tbody{display: flex;flex-direction: column;gap: clamp(20px, 2vw, 30px);}
        #wrap .bbs_write tr{display: flex;flex-wrap: wrap;font-size: var(--title-20);align-items: baseline;}
        #wrap .bbs_write tr:has([type="password"]){align-items: center;}
        #wrap .bbs_write :where(th, td){line-height: 1.3;border:0;padding: 0;font-size: 85%;font-weight: 400;color: var(--black-color03);letter-spacing: -0.03em;}
        #wrap .bbs_write th{width: clamp(160px, 11vw, 200px);word-break: break-all;padding-right: 15px;}
        #wrap .bbs_write th small{font-size: 90%; font-weight: 400; color: var(--black-color08);}
        #wrap .bbs_write .require_dot{color: var(--point-color06);font-weight: inherit;padding: 0 0 0 4px;}
        #wrap .bbs_write .require_dot:before{font-size: inherit;content:'*';color: inherit;font-weight: inherit;}
        #wrap .bbs_write td{width: calc(100% - clamp(160px, 11vw, 200px));display: flex;align-items: center;gap: 10px;min-height: 52px;}
        #wrap .bbs_write input:where([type="text"], [type="password"], [type="number"], [type="date"]){min-width: auto;width: 100%;max-width: 480px;margin: 0; vertical-align: inherit;}
        #wrap .bbs_write input[name*="email"]{max-width: 138px;}
        #wrap .bbs_write .at{display: inline-block;margin:0;flex-shrink: 0;width: auto;}
        #wrap .bbs_write .btn{flex-shrink: 0;}
        #wrap .bbs_write .addr .at{margin-right: 10px;}
        #wrap .bbs_write .addr .sel_custom{width: 366px;}
        #wrap .bbs_write .split{width: 100%;}
        #wrap .bbs_write .split .item{width: 100%; display: flex; align-items: center; gap: 10px; box-sizing: border-box;}
        #wrap .bbs_write .split .item + .item{border-top: 1px dashed var(--border-color01); padding-top: clamp(20px, 2vw, 30px); margin-top: clamp(20px, 2vw, 30px);}

        @media (max-width:1023px){
            #wrap .bbs_write tr{flex-direction: column; gap: 10px;}
            #wrap .bbs_write :is(th, td){width: 100%;}
            #wrap .bbs_write td{min-height:auto;}
        }
        @media (max-width:767px){
            #wrap .bbs_write td{flex-wrap: wrap;}
            #wrap .bbs_write .sel_custom{width: 100%;}
            #wrap .bbs_write input:where([type="text"], [type="password"], [type="number"], [type="date"]){max-width: none;}
            #wrap .bbs_write input[name*="email"]{max-width: none;width: calc(100% / 2 - 17px);}
            #wrap .bbs_write .addr .sel_custom{width: 100%;}
            #wrap .bbs_write .btn{width: 100%;}
            #wrap .bbs_write .split .item{flex-wrap: wrap;}
        }
        @media (max-width:479px){
            #wrap .bbs_write input[name*="email"]{max-width: none;width: calc(100% / 2 - 16px);}
        }

/*───────────────────────────────────────────────────────────
	mypage
───────────────────────────────────────────────────────────*/
     /* 검색 */
        #wrap .search_wrap{position: relative;background: var(--gray-bg03);padding:35px;box-sizing: border-box;font-size: var(--title-20);margin-bottom: 60px;}
        #wrap .search_wrap fieldset{display: flex; justify-content: center;}
        #wrap .search_wrap .inp_box{position: relative;width: 100%;max-width: 400px;}
        #wrap .search_wrap [type="text"]{width: 100%;padding-right: 50px;}
        #wrap .search_wrap [type="submit"]{position: absolute;top: 0;right: 0;width: 50px;height: 100%;font-size: 0;background: url('../images/sub/search_icon.svg') no-repeat center;}

        @media (max-width:1023px){
            #wrap .search_wrap{padding:clamp(20px, 3.5vw, 35px); margin-bottom: clamp(30px, 6vw, 60px);}
        }

    /* 나의 수강 내역 */
        .my_info{border:2px solid var(--border-color01);border-radius: var(--radius-15);box-sizing: border-box;padding: 23px 30px; margin-bottom: 40px;}
        .my_info .desc{display: flex;flex-wrap: wrap;gap: 5px;font-size: var(--title-20);width: fit-content;margin-inline: auto;align-items: center;}
        .my_info .desc > :where(dt, dd){font-size: 90%;font-weight: 400;letter-spacing: -0.03em;}
        .my_info .desc > dt{display: inline-flex;gap: 16px;flex-shrink: 0;color: var(--black-color02);align-items: center;}
            .my_info .desc > dt:before{display: inline-flex;content:'';width: 30px;height: 30px;background: url('../images/skin/chk_boxOn02.svg') no-repeat center / 100% auto;flex-shrink: 0;border-radius: 100%;}
        .my_info .desc > dd{color: var(--point-color06);}

        .scr_noti{font-size:max(13px, var(--title-16)); font-weight: 400; color: var(--black-color05); letter-spacing: -0.03em; margin-bottom: 10px; display: none;}
        .scr_wrap{position: relative; overflow: hidden; overflow-x: auto;}
        .scr_wrap .bbs_table{min-width: 1200px;}
        .bbs_table{position: relative;width: 100%;table-layout: fixed;box-sizing: border-box;font-size: var(--title-20);border-radius: var(--radius-15);overflow: clip;}
        .bbs_table thead{background: var(--gray-bg03);}
        .bbs_table thead th{font-size: 90%;color: var(--black-color02);padding-block: 23px;}
        .bbs_table :where(th, td){text-align: center;box-sizing: border-box;padding-inline: 10px;vertical-align: middle;font-weight: 400;letter-spacing: -0.03em;}
        .bbs_table tbody tr{border-bottom: 1px solid var(--border-color03);}
        .bbs_table tbody :where(th, td){font-size: 85%;padding-block: 18px;}
        .bbs_table tbody th{color: var(--black-color02);}
        .bbs_table tbody td{color: var(--black-color06);}
        .bbs_table tbody td.left{text-align: left; color: var(--black-color03); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

        @media (max-width:1200px){
            .scr_noti{display: block;}
        }
        @media (max-width:1023px){
            .my_info{padding: clamp(15px, 2.3vw, 23px) clamp(20px, 3vw, 30px);}
            .my_info .desc > dt{gap: clamp(8px, 1.6vw, 16px);}
            .my_info .desc > dt:before{width: clamp(18px, 3vw, 30px);height: clamp(18px, 3vw, 30px);}

            .bbs_table thead th{padding-block:clamp(18px, 2.3vw, 23px);}
            .bbs_table tbody :where(th, td){padding-block:clamp(15px, 2vw, 18px);}
        }
        @media (max-width:860px){
            .scr_wrap .bbs_table{min-width: 860px;}
        }

     /* 페이징 */
        #wrap .view_btn {text-align:center;line-height: inherit;position:relative;min-height: auto;}
        #wrap .paging {text-align:center;padding: 0;line-height:inherit;margin: 60px 0 0;box-sizing:border-box;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;font-size: var(--title-20);font-family: var(--font-type02);gap: 6px;min-height: auto;width: 100%;}
        #wrap .paging span {display: inline-flex;}
        #wrap .paging a {display: inline-flex;align-items: center;justify-content: center;font-size: max(12px, 80%);font-weight: 400;color: var(--black-color08);padding: 0 5px;border: 0;box-sizing:border-box;height: 40px;line-height: 1.2;width: auto;min-width: 40px;text-align: inherit;border-radius: 100%;margin: 0;}
        #wrap .paging :is(.page_num.on a, .page_num a.on){color: var(--point-white);background: var(--point-color01);}
        #wrap .paging .arrow a {font-size:0;background:url('../images/sub/paging_first.svg') no-repeat center;margin: 0;border: 1px solid var(--border-color01);}
        #wrap .paging .arrow:is(.prev, .next) a{background-image: url('../images/sub/paging_prev.svg');}
        #wrap .paging .arrow:is(.next, .last) a{transform: scale(-1,-1);}
        #wrap .paging .arrow.prev a{margin-right: 6px;}
        #wrap .paging .arrow.next a{margin-left: 6px;}

        @media (max-width:1023px){
            #wrap .paging{margin-top: clamp(30px, 6vw, 60px); gap: clamp(5px, 1vw, 6px);}
            #wrap .paging a{min-width: clamp(26px, 4.5vw, 40px); height: clamp(26px, 4.5vw, 40px);}
            #wrap .paging .arrow a{background-size:auto clamp(7px, 1.5vw, 10px);}
            #wrap .paging .arrow.prev a{margin-right: clamp(0px, 1vw, 6px);}
            #wrap .paging .arrow.next a{margin-left: clamp(0px, 1vw, 6px);}
        }

/*───────────────────────────────────────────────────────────
	company
───────────────────────────────────────────────────────────*/
    
/*───────────────────────────────────────────────────────────
	dataroom
───────────────────────────────────────────────────────────*/
    .guide_map{text-align: center;}
    .guide_map img{width: auto; height: auto;}

    .materials_step{display: flex;align-items: center;flex-wrap: wrap;gap: 30px 0;}
    .materials_step .cont_title{width: 40.8%;gap: 7px;padding: 0 50px 8px 0;}
    .materials_step .cont_title h3 + h5{margin-top: 19px;}
    .materials_step .cont_title .bullet_list{margin-top: 22px;}
    .materials_step .step_list{width: 59.2%;background: var(--gray-bg03);border-radius: var(--radius-15);box-sizing: border-box;display: flex;justify-content: center;gap: 60px 30px;padding: 46px clamp(20px, 2.2vw, 40px) 0;counter-reset: materials_step;}
    .materials_step .step_list > li{position: relative;width: calc(100% / 3 - 20px);text-align: center;box-sizing: border-box;}
        .materials_step .step_list > li:not(:last-child):after{position: absolute;content:'';width: 13px;height: 13px;border:2px solid var(--black-color08);box-sizing: border-box;clip-path: polygon(100% 0, 0% 100%, 100% 100%);border-radius: 2px;top: 50%;left: calc(100% + 6px);translate: 0 -50%;transform: rotate(-45deg);}
    .materials_step .step_list .desc{font-size: var(--title-20);display: flex;justify-content: flex-end;flex-direction: column;gap: 13px;height: 100%;}
        .materials_step .step_list .desc:before{content:'Step ' counter(materials_step);counter-increment: materials_step;font-size: max(13px, 75%);font-weight: 700;color: var(--point-color06);font-family: var(--font-type02);}
    .materials_step .step_list .desc dt{font-size: 90%;font-weight: 400;color: var(--black-color03);line-height: 1.44;letter-spacing: -0.03em;text-wrap: balance;}
        .materials_step .step_list .desc dt + dd{margin-top: 6px;}
    .materials_step .step_list .desc dt strong{font-weight: 700;}
    .materials_step .step_list .desc dd{font-size: 0;}

    .materials_list{display: flex; flex-direction: column; gap: 40px; box-sizing: border-box;}
    .materials_list > li{position: relative;display: flex;align-items: center;flex-wrap: wrap;gap: 30px 0;}
    .materials_list .thumb{position: relative;width: 36.1%;height: 450px;display: flex;align-items: center;justify-content: center;background: var(--gray-bg03);padding: 30px;box-sizing: border-box;border-radius: var(--radius-15);overflow: hidden;}
    .materials_list .cont_title{width: 63.9%;padding-left: clamp(30px, 3.2vw, 60px);gap: 5px;}
    .materials_list .cont_title h4{font-family: var(--font-type02);}
	.materials_list .cont_title h4 small{font-family: var(--font-type01);}
    .materials_list .bullet_list{padding-top: 30px;margin-top: 29px;border-top: 1px dashed var(--border-color01);}
    .materials_list .btn_wrap{justify-content: flex-start;padding-top: 35px;}

    @media (max-width:1200px){
        .materials_step .cont_title{width: 100%;padding: 0;}
        .materials_step .step_list{width: 100%;}
    }
    @media (max-width:1023px){
        .materials_step .cont_title h3 + h5{margin-top: clamp(8px, 1.9vw, 19px);}
        .materials_step .cont_title .bullet_list{margin-top: clamp(15px, 2.2vw, 22px);}
        .materials_step .step_list{padding-top: clamp(30px, 4.6vw, 46px);}
        .materials_step .step_list .desc{gap: clamp(10px, 1.3vw, 13px);}

        .materials_list .thumb{width: 100%;height: clamp(250px, 45vw, 450px);}
        .materials_list .cont_title{width: 100%; padding-left: 0;}
        .materials_list .bullet_list{padding-top: clamp(20px, 3vw, 30px);margin-top: clamp(15px, 3vw, 29px);}
        .materials_list .btn_wrap{padding-top: clamp(25px, 3.5vw, 35px);}
    }
    @media (max-width:860px){
        .guide_map{width: calc(100% + 40px); margin-left: -20px;}
    }
    @media (max-width:640px){
        .materials_step .step_list{flex-wrap: wrap;}
        .materials_step .step_list > li{width: 100%;}
        .materials_step .step_list > li:not(:last-child):after{top: calc(100% + 23px);left: 50%;translate: -50% 0;transform: rotate(45deg);}
    }