/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	공통   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.inputGroup .inputBox { width:100%; height:6.0rem; line-height:6.0rem; padding:0 1.5rem; border:1px solid var(--border-ltgrey); border-radius:4px; font-size:1.6rem; color:var(--text-dkgrey); } 
.inputGroup .inputBox::placeholder { color:var(--text-ltgrey01);  }
.btn-confirm { width:100%; height:6.0rem; line-height:6.0rem; padding:0 15px; border-radius:4px; background:var(--gra-pink); color:#fff; font-size:1.8rem; font-weight:500; border:0; cursor:pointer;} 

/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
    .inputGroup .inputBox { height:5.0rem; line-height:5.0rem }
    .btn-confirm { height:5.0rem; line-height:5.0rem; font-size:1.6rem; }
}

/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	로그인   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.loginPage { width:100%; max-width:800px; margin:40px auto;}
.loginPage .welcomeText { font-size:2.0rem; text-align:center; margin-bottom:20px; }
.loginPage .welcomeText strong { color:var(--text-pink); font-weight:500; }
.loginPage .loginWrap { border-top:2px solid var(--pink); border-bottom:1px solid var(--pink); padding:30px 10px; background:url(images/login/login_img.png) no-repeat right bottom;  }
.loginPage .loginWrap .loginForm { width:100%; max-width:400px; display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}

.loginPage .loginWrap .loginLinks { display:flex; justify-content:center; width:100%; max-width:400px; }
.loginPage .loginWrap .loginLinks a { display:flex; align-items:center;  }
.loginPage .loginWrap .loginLinks a:not(:first-child):before {content:''; width:1px; height:10px; background:#ccc; margin:0 10px; }

/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
    .loginPage { margin:0 auto;}
    .loginPage .welcomeText { display:none; }
    .loginPage .loginWrap { background:none; }
    .loginPage .loginWrap .loginForm  { margin:0 auto 20px; }
    .loginPage .loginWrap .loginLinks { margin:0 auto; }
}


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	아이디/비번찾기   //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.findIdpPage { width:100%; max-width:600px; margin:0 auto; display:flex; gap:50px; flex-direction: column; }
.findIdpPage .findIdWrap { width:100%;}
.findIdpPage h3 { color:var(--text-pink); font-size:2.2rem; font-weight:500;}
.findIdpPage h3 small { font-size:1.4rem; color:var(--text-grey); font-weight:300; }
.findIdpPage .findIdForm { border-top:2px solid var(--pink); padding:20px 0 0; display:flex; flex-direction:column; gap:10px; }
.findIdForm .inputGroup { display:flex; justify-content:space-between; align-items:center;}
.findIdForm .inputGroup label { width:60px; margin-right:10px; flex-shrink:0; text-align:right;}
.findIdForm .inputGroup label + * { flex-grow:1; display:flex; justify-content:space-between; align-items:center; gap:5px;}

.hpInput .inputBox { text-align:center; padding:0 5px; }
.hpInput .dash { color:var(--text-ltgrey); font-weight:bold; }


/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
    .findIdpPage h3 { font-size:1.8rem; }
    .findIdpPage h3 small { display:none; }
    .findIdForm .inputGroup label { width:45px; margin-right:10px; }
}


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////  회원가입  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.termAgreeWrap:not(:first-child) { margin-top: 50px ;}
.termAgreeWrap h3,
.member_join h3  { color:var(--text-pink); font-size:2.2rem; font-weight:500; }
.termAgreeWrap .termContents { padding:20px; border:2px solid var(--border-ltgrey); height:300px; overflow-y:auto; margin-bottom:20px; font-size:1.4rem; line-height:1.6; color:var(--text-ltgrey); font-weight:300;
background:#f9f9f9; }
.termAgreeWrap .agreeWrap label { color:var(--text-pink); cursor:pointer;}
.allAgree { text-align:center;}
.allAgree > p { font-size:1.8rem; margin-bottom:10px; }
.allAgree .agreeBtnWrap { display:flex; justify-content:center; gap:10px; align-items:center; width:100%; }
.allAgree .btn { display:block; width:120px; height:44px; line-height:44px; border-radius:4px; border:0;  }
.allAgree .btn.btn-yes { background:var(--gra-main); color:#fff; }
.allAgree .btn.btn-no { background:#efefef; color:var(--text-ltgrey);}

.member_join .joinTable { border-top:2px solid #555; }
.member_join .joinTable tr { display:flex; }
.member_join .joinTable td { padding:10px 15px; border-bottom:1px solid var(--border-ltgrey);  }
.member_join .joinTable .member_name { color:var(--text-dkgrey); font-weight:300; width:20%; max-width:200px; white-space:nowrap; flex-shrink:0; } 
.member_join .joinTable .input_content { display:flex; gap:5px; align-items:center; flex-wrap:wrap; flex-grow:1; }
.member_join .joinTable .input_short { max-width:200px; }
.member_join .joinTable .tel_number,
.member_join .joinTable .email_box,
.member_join .joinTable .post_num { display:flex; align-items:center; gap:5px; width:100%; }
.member_join .joinTable .captcha_box { display:flex; gap:5px; }
.member_join .joinTable .captcha_box .captchaImg { height:4.0rem; }
.member_join .joinTable input[type="text"], 
.member_join .joinTable input[type="password"],
.member_join .joinTable select { height:4.0rem; line-height:4.0rem; border-radius:4px;  }
.member_join .joinTable .button { height:4.0rem; line-height:4.0rem; border-radius:4px; background:#ccc; color:var(--text-grey); padding:0 20px; }
.member_join .joinTable small { font-size:1.4rem; }
.member_join .btmBtns { margin-top:3.0rem; display:flex; justify-content:center; gap:5px; }
.member_join .btmBtns .buttonBig { width:calc(50% - 5px/2); max-width:200px; text-align:center;}
.member_join .joinTable label { display:flex; align-items:center; gap:5px;}

/* 아이디중복확인 팝업 */
.checkIdPop { width:100%; }
.checkIdPop h3 { height:5.0rem; line-height:5.0rem; background:var(--pink); color:#fff; font-weight:300; font-size:2.2rem; text-align:center; }
.checkIdPop .checkIdWrap { width:100%; max-width:400px; margin:0 auto; padding:3.0rem 2.0rem;}
.checkIdPop .checkIdWrap .checkId { display:flex; justify-content:space-between; gap:5px; align-items:center;}
.checkIdPop .checkIdWrap .checkId input {height:4.0rem; line-height:4.0rem; border-radius:4px; }
.checkIdPop .checkIdWrap .checkId .btn_check { height:4.0rem; line-height:4.0rem; border-radius:4px; background:#ccc; color:var(--text-grey); padding:0 1.0rem; }
.checkIdPop .checkIdWrap .checkResult { margin-top:1.0rem; color:var(--text-pink); display:flex; justify-content:center; margin-bottom:2.0rem; }
.checkIdPop .checkIdWrap .btnWrap { display:flex; justify-content:center; gap:5px; align-items:center; }
.checkIdPop .checkIdWrap .btnWrap .btn { height:4.0rem; line-height:4.0rem; border-radius:2.0rem; background:var(--gra-pink); color:#fff; border:0; padding:0 3.0rem; }


/* ================================== 반응형 ================================== */
@media all and (max-width: 768px) { 
    .termAgreeWrap h3,
    .member_join h3 { font-size:1.8rem; }
    .termAgreeWrap .termContents { height:200px; }
    .allAgree > p { font-size:1.6rem;  }
}

@media all and (max-width: 480px) {  
    .member_join .joinTable tr { flex-wrap:wrap; }
    .member_join .joinTable .member_name { width:100%; max-width:initial; border-bottom:0; background:#f1f1f1; text-align:center; padding:10px; } 
    .member_join .joinTable .member_name label { width:100%; justify-content:center;}
    .member_join .joinTable .input_content { padding:10px 0 15px 0; justify-content:center; width:100%; text-align:center; }
    .member_join .joinTable .input_content.id_box { flex-wrap:nowrap;}
    .member_join .joinTable .input_content.email_send_sel { justify-content:center; gap:10px; }
    .member_join .joinTable .input_short { max-width:initial; }
    .member_join .joinTable .button { padding:0 10px; }
}


/* -----------------------------------------------------------------------------------------------
/////////////////////////////////////////////	사이트맵  //////////////////////////////////////
--------------------------------------------------------------------------------------------------*/
.sitemapPage { display:flex; gap:30px; flex-wrap:wrap; }
.sitemapPage .depth_01 { border:2px solid #efefef; width:calc(25% - 30px*3/4); border-radius:0.8rem; overflow:hidden; padding:1.0rem; }
.sitemapPage .depth_01 h3 { text-align:center; height:4.4rem; padding:0 1rem; background:var(--gra-pink); color:#fff; font-size:1.6rem; font-weight:300; border-radius:1.0rem; margin-bottom:5px;
display:flex; justify-content:center; align-items:center; line-height:1.1; }
.sitemapPage .depth_01:nth-child(odd) h3 { background:var(--gra-blue); }
.sitemapPage .depth_02 > li { padding:1.0rem; border-bottom:1px dotted #efefef; }
.sitemapPage .depth_02 > li:last-child { border-bottom:0; }
.sitemapPage .depth_02 > li > a { color:var(--text-black); display:block;  font-size:1.5rem; }
.sitemapPage .depth_03 > li { margin-top:5px; padding-left:5px; }
.sitemapPage .depth_03 > li > a { font-size:1.4rem; display:block; color:var(--text-ltgrey); display:flex; align-items:center; gap:7px; }
.sitemapPage .depth_03 > li > a:before {width:3px; height:3px; border-radius:50%; content:''; display:block; background:#ccc; }
.sitemapPage a:hover { font-weight:500; }

/* ================================== 반응형 ================================== */
@media all and (max-width: 1279px) { 
    .sitemapPage { gap:15px; }
    .sitemapPage .depth_01 { width:calc(25% - 15px*3/4); }
}

@media all and (max-width: 1024px) { 
    .sitemapPage .depth_01 { width:calc(33.3333% - 15px*2/3); }
}

@media all and (max-width: 768px) { 
    .sitemapPage { gap:10px; }
    .sitemapPage .depth_01 { width:calc(50% - 10px/2); padding:0.7rem; }    
    .sitemapPage .depth_01 h3 { font-size:1.5rem; height:4.0rem; } 
    .sitemapPage .depth_02 > li { padding:0.7rem;}
    .sitemapPage .depth_02 > li > a {font-size:1.4rem; }
    .sitemapPage .depth_03 > li > a { font-size:1.3rem; }
}

@media all and (max-width: 480px) { 
    .sitemapPage { gap:6px; }
    .sitemapPage .depth_01 { width:calc(50% - 6px/2);  }  
}

/* -----------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 서명 등록  //////////////////////////////////////
------------------------------------------------------------------------------------------------------*/
.picLayerWrap { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:9999; display:flex; justify-content:center; align-items:center; }
.picLayerWrap .layerTitle { font-size:2.4rem; color:var(--text-black); font-weight:300; margin-bottom:2.0rem; } 
.picLayerWrap .picLayerBox { max-width:960px; width:90%; background:#fff; padding:25px; border-radius:8px; position:relative; min-height:50vh; max-height:85vh; overflow:hidden; padding-bottom:100px;}
.picLayerWrap .picLayerBox .layerCloseBtn { background:none; border:none; font-size:26px; position:absolute; right:15px; top:10px; cursor:pointer; }
.picLayerWrap .picbtnWrap { display:flex; justify-content:center; position:absolute; bottom:0; left:0; width:100%; background:#fff; padding:20px; }
.picLayerWrap .picLayerBox .canvasBox { padding:20px; }
.picLayerWrap .picLayerBox .canvasBox .canvasBoxText { margin-bottom:10px; color:#666; }
.picLayerWrap .picLayerBox .canvasBox canvas { border:2px solid #333; background:#fff; cursor:crosshair; display:block; margin:0 auto; width: 100%; }
.picLayerWrap .picLayerBox .canvasBox .canvasbtnWrap { margin-top:15px; text-align:center; }

@media all and (max-width:1024px){
}	

@media all and (max-width:768px){
  .picLayerWrap .picLayerBox { max-width:90%; padding:20px; max-height:80vh; padding-bottom:90px; }
  .picLayerWrap .layerTitle { font-size:2.2rem; margin-bottom:1.6rem; }
  .picLayerWrap .picbtnWrap { padding:16px; }
}

@media all and (max-width:480px){
  .picLayerWrap .picLayerBox { width:100%; padding:16px; padding-bottom:80px; height:60vh; }
  .picLayerWrap .layerTitle { font-size:1.9rem; margin-bottom:1.4rem; }
  .picLayerWrap .picbtnWrap { padding:14px; }
}