@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 에 있습니다.

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








/*───────────────────────────────────────────────────────────
	
	common.css 커스텀 css 아래에 작성

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

.page_title { text-align: center; font-size: var(--title-20); margin-bottom: 70px; }
.page_title h2 { color: var(--black-color00); font-weight: 700; font-size: 350%; line-height: 1.14; letter-spacing: 0; }

    label:has([type="checkbox"]){display: flex;width: fit-content;align-items: flex-start;gap: 10px;cursor: pointer;font-size: var(--title-18);font-weight: 500;color: var(--black-color03);font-family: var(--font-type02); letter-spacing: -0.03em;}
    label [type="checkbox"]{display: inline-block; width: 22px; height: 22px; background: url('../images/skin/ico_chk.svg') no-repeat left center / 100% auto; cursor: inherit; flex-shrink: 0;}
    label:has([type="checkbox"]:checked) [type="checkbox"]{background-image: url('../images/skin/ico_chk_on.svg');}
    label:has([type="checkbox"]) em{font-weight: inherit; color: var(--point-color01); display: contents;}

    #wrap input:is([type="text"], [type="number"], [type="password"], [type="datetime-local"], [type="date"]){display: inline-block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height: normal;padding:0 24px;font-size: var(--title-17);font-weight: 400;color: var(--black-color03);height: 60px;border:1px solid var(--border-color01);border-radius: 5px;background: var(--point-white);box-sizing: border-box;letter-spacing: -0.03em;}
    #wrap input:is([type="text"], [type="number"], [type="password"], [type="datetime-local"], [type="date"])::placeholder{color: var(--black-color10); font-weight: 400; font-size: var(--title-17); }
    #wrap input:is([type="text"], [type="number"], [type="password"], [type="datetime-local"], [type="date"]):focus { border: 1px solid var(--black-color01) }
    #wrap .bbs_write textarea{vertical-align: top; resize: none; height: 250px !important; padding: 20px; border-radius: 6px; font-family: var(--font-type01); }
    #wrap .bbs_write textarea::placeholder { color: var(--black-color10); font-weight: 400; font-size: var(--title-17); }
    #wrap .bbs_write textarea:focus { border: 1px solid var(--black-color01); }

    #wrap select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height: normal;padding-block: 0;padding:0 50px 0 24px;font-size: var(--title-17);font-weight: 400;color: var(--black-color03);width: 100%;height: 60px;border:1px solid var(--border-color01);background: var(--point-white) url('../images/sub/sel_arw.svg') no-repeat calc(100% - 20px) 50%;box-sizing: border-box;appearance: none; border-radius: 6px; font-family: var(--font-type01); }
    #wrap select:focus { border: 1px solid var(--black-color01); }

    #wrap .bbs_wrap{position: relative; width: 100%; box-sizing: border-box; border-top: 1px solid var(--black-color00); border-bottom: 1px solid var(--border-color01); padding-block: 40px; }
    #wrap .bbs_write{position: relative; width: 100%; box-sizing: border-box; border:0;}
    #wrap .bbs_write colgroup{display: none;}
    #wrap .bbs_write :is(tbody, tr, th, td){position: relative; display: block; width: 100%; box-sizing: border-box;}
    #wrap .bbs_write tbody{display: flex;flex-wrap: wrap;gap: 20px clamp(20px, 5vw, 96px);}
    #wrap .bbs_write tr{width: 100%;font-size: var(--title-20);display: flex;align-items: baseline;gap: 10px 0;}
    #wrap .bbs_write tr.line2{width: calc(100% / 2 - clamp(20px, 5vw, 96px) / 2); align-items: center; }
    #wrap .bbs_write :is(th, td){padding: 0;border: 0;text-align: left;background: none; }
    #wrap .bbs_write th{width: 140px;flex-shrink: 0;padding-right: 10px; font-size: var(--title-18);font-weight: 500;color: var(--black-color03); line-height: normal;letter-spacing: -0.03em; }
    #wrap .bbs_write td { font-size: var(--title-16); color: var(--black-color03); font-weight: 400; border: none; letter-spacing: -0.03em; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;  }
    #wrap .bbs_write th em{font-weight: inherit; color: var(--point-color01);}
    #wrap .bbs_write tr:has(#contents){align-items: flex-start;}
    #wrap .bbs_write tr:has(#contents) th{padding-top: 14px;}
    #wrap .bbs_write td{width: 100%;}
    #wrap .bbs_write input{min-width: auto;vertical-align: middle; font-family: var(--font-type01); }
    #wrap .bbs_write :is(input:is([type="text"], [type="password"], [type="number"]), textarea){width: 100%; }
    
    #wrap .bbs_write td:has(.code_wrap){display: flex; flex-wrap: wrap; gap: 10px;}
    #wrap .bbs_write .code_wrap{display: inline-flex;align-items: center;gap: 10px;border: 1px solid var(--border-color01);border-radius: var(--radius-06);padding: 0 10px;box-sizing: border-box; border-radius: 5px; }
    #wrap .bbs_write #captcha_box{overflow: hidden;border: 1px solid var(--border-color01);border-radius: inherit;margin: 0;width: 155px;height: 40px;}
    #wrap .bbs_write #captcha_box img{margin: -1px 0 0 -1px;width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height: none;}
    #wrap .bbs_write #refreshCode{position: relative;background:var(--black-color08) url('../images/skin/ico_reset.svg') no-repeat center;font-size: 0;width: 40px;height: 40px;border-radius: inherit;box-sizing: border-box; cursor: pointer; border-radius: 4px; }
    #wrap .bbs_write input#captcha{max-width: 260px;}
    #wrap .bbs_write td label[for="is_secret-y"]{margin-bottom: 15px;}

    #wrap .policy_cont{position: relative;margin-top: 40px;padding-bottom: 20px;}
    #wrap .policy_cont .area_box{padding:0 10px;text-align: inherit;line-height: inherit;height: 114px;border: 1px solid var(--border-color01);border-radius: var(--radius-06);box-sizing: border-box;margin: 21px 0 0;}
    #wrap .policy_cont textarea{width: 100%;height: 100% !important;padding: 30px 25px;line-height: 1.73;margin: 0;resize: none;font-size: var(--title-15);font-weight: 400;color: var(--black-color07);border: 0; font-family: var(--font-type01); }
    
    #wrap .btn_wrap{display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 40px;}
    #wrap .btn_wrap button { display: inline-flex; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; width: 200px; height: 60px; background: var(--black-color00); border-radius: 10px; font-size: var(--title-20); color: var(--point-white); font-weight: 400; letter-spacing: -0.03em; box-shadow: 4px 3px 30px 0px rgba(0, 0, 0, 0.15); font-family: var(--font-type01); }

@media (max-width:1023px){

    .page_title { margin-bottom: clamp(35px, 7vw, 70px); }
    .page_title h2 { font-size: 330%; }

    #wrap .bbs_wrap{padding-block: clamp(25px, 4vw, 40px);}

    #wrap input:is([type="text"], [type="number"], [type="password"], [type="datetime-local"], [type="date"]) { height: clamp(42px, 7vw, 60px); padding-inline: clamp(15px, 2.4vw, 24px);} 
    #wrap select { height: clamp(42px, 7vw, 60px); padding-inline: clamp(15px, 2.4vw, 24px) clamp(30px, 5vw, 50px); }
    #wrap .bbs_write textarea { padding: clamp(15px, 2.4vw, 20px); }

    #wrap .policy_cont{padding-bottom: clamp(0px, 2vw, 20px); margin-top: clamp(25px, 4vw, 40px);}
    #wrap .policy_cont .area_box{height: clamp(90px, 11.4vw, 114px);}
    #wrap .policy_cont textarea{padding: clamp(15px, 3vw, 30px) clamp(10px, 2.5vw, 25px);}

    #wrap .btn_wrap{margin-top: clamp(30px, 4vw, 40px); gap:clamp(15px, 2vw, 20px);}

    #wrap .btn_wrap button { box-shadow: 4px 3px clamp(15px, 3vw, 30px) 0px rgba(0, 0, 0, 0.15); }

}
@media (max-width:860px){

    .page_title h2 { font-size: 300%; }

    #wrap .bbs_write .code_wrap{padding: 10px;}
    #wrap .bbs_write input#captcha{max-width: 100%;}
    #wrap .bbs_write tr.line2{width: 100%; align-items: center; }

    #wrap .btn_wrap button { width: 180px; height: 54px; }
}
@media (max-width:640px){

    .page_title h2 { font-size: 270%; }

    #wrap .bbs_write tr{width: 100%;}
    #wrap .bbs_write textarea{height: clamp(120px, 25vw, 250px) !important;}
    #wrap .bbs_write .code_wrap{padding: 7px;gap: 7px;}

    #wrap .btn_wrap button { width: 162px; height: 49px; }
}
@media (max-width:479px){

    .page_title h2 { font-size: 240%; }

    #wrap .bbs_write tr{flex-wrap: wrap;}
    #wrap .bbs_write :is(th, td){width: 100%; flex-shrink: unset;}
    #wrap .bbs_write tr:has(#contents) th{padding-top:0;}
    #wrap input:is([type="text"], [type="number"], [type="password"], [type="datetime-local"], [type="date"]) { border-radius: 3px; }
    #wrap select { border-radius: 3px; }
    label [type="checkbox"] { width: 20px; height: 20px; }

    #wrap .btn_wrap button { width: 146px; height: 49px; border-radius: 5px; }

    #wrap .bbs_write textarea { border-radius: 3px; }
}