/* @import url("common.css");  */

/* 브라우저 기본 스타일 초기화 */
 *,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 모바일퍼스트 기본폰트 */
html {
  font-size: 14px;
}
 
ul, ol, li{list-style:none; }
/* Link Style */
a:link		{text-decoration:none; }
a:visited	{text-decoration:none; }
a:active	{text-decoration:none; }
a:hover		{text-decoration:none; }
a{color: #888; /* 기본 회색 */
  text-decoration: none;}
  

/* 노란색테마 색상 */
:root {--color-yellow: #ffd400;
       --color-blue:#023985;}







img {
  max-width: 100%;
  height: auto;
  display: block;
}


body {
  font-family: 'Pretendard', sans-serif !important;
  margin: 0;
  background-color: white !important;
} 



/* 팝업관련 설정.. 차후 다 분리 해야함 */
#layer_area				{width: 864px; margin-left: -432px; position:absolute; left:50%; top:100px; z-index:9000;}


.member1{width: 946px;}
.member1 .layer_menu_hd{height: 49px; position:relative; background:url(../images/layer/menu_bg_top.png) 0 0 no-repeat; }
.member1 .layer_menu_hd .pop_tit{padding-top: 10px; text-align:center;}
.member1 .layer_menu_hd .btn_close{position:absolute; right:20px; top:15px; }

.member1 .layer_menu_center{background:url(../images/layer/menu_bg_center.png) 0 0 repeat-y;}
.member1 .layer_menu_center .pop_member_area{width:843px; padding-bottom:50px; margin:0 auto;}
.member1 .layer_menu_center .pop_member_area .pop_member_tit{padding:20px 0; font-size:13px; font-weight:bold; color:#333;}
.member1 .layer_menu_center .pop_member_area .pop_member_desc{height:400px; padding: 10px 0 10px 10px; overflow-y:scroll; background-color:#f6f6f6; border: solid 1px #cccccc; line-height:24px; }

.member1 .layer_menu_bottom{height: 10px; background:url(../images/layer/menu_bg_bottom.png) 0 0 no-repeat;}

.member2{width: 946px;}
.member2 .layer_menu_hd{height: 49px; position:relative; background:url(../images/layer/menu_bg_top.png) 0 0 no-repeat; }
.member2 .layer_menu_hd .pop_tit{padding-top: 10px; text-align:center;}
.member2 .layer_menu_hd .btn_close{position:absolute; right:20px; top:15px; }

.member2 .layer_menu_center{background:url(../images/layer/menu_bg_center.png) 0 0 repeat-y;}
.member2 .layer_menu_center .pop_member_area{width:843px; padding-bottom:50px; margin:0 auto;}
.member2 .layer_menu_center .pop_member_area .pop_member_tit{padding:20px 0; font-size:13px; font-weight:bold; color:#333;}
.member2 .layer_menu_center .pop_member_area .pop_member_desc{height:400px; padding: 10px 0 10px 10px; overflow-y:scroll; background-color:#f6f6f6; border: solid 1px #cccccc; line-height:24px; }

.member2 .layer_menu_bottom{height: 10px; background:url(../images/layer/menu_bg_bottom.png) 0 0 no-repeat;}

.member3{width: 946px;}
.member3 .layer_menu_hd{height: 49px; position:relative; background:url(../images/layer/menu_bg_top.png) 0 0 no-repeat; }
.member3 .layer_menu_hd .pop_tit{padding-top: 10px; text-align:center;}
.member3 .layer_menu_hd .btn_close{position:absolute; right:20px; top:15px; }

.member3 .layer_menu_center{background:url(../images/layer/menu_bg_center.png) 0 0 repeat-y;}
.member3 .layer_menu_center .pop_member_area{width:843px; padding-bottom:50px; margin:0 auto;}
.member3 .layer_menu_center .pop_member_area .pop_member_tit{padding:20px 0; font-size:13px; font-weight:bold; color:#333;}
.member3 .layer_menu_center .pop_member_area .pop_member_desc{height:400px; padding: 10px 0 10px 10px; overflow-y:scroll; background-color:#f6f6f6; border: solid 1px #cccccc; line-height:24px; }

.member3 .layer_menu_bottom{height: 10px; background:url(../images/layer/menu_bg_bottom.png) 0 0 no-repeat;}


.login{width: 864px;}

.layer_hd{height: 49px; position:relative; background:url(../images/layer/pop_top_bg.png) 0 0 no-repeat;}
.layer_hd .pop_tit{padding-top: 10px; text-align:center;}
.layer_hd .btn_close{position:absolute; right:20px; top:15px; }

.layer_cont{width: 864px; background:url(../images/layer/pop_center_bg.png) 0 0 repeat-y;}
.layer_cont_inner{width:420px; margin:0 auto;}
.layer_cont .layer_cont_inner .login_desc{padding:40px 0 0px;}
.layer_cont .layer_cont_inner .login_desc img{max-width: 370px;height: auto;}/*2025.04.25 박주병 이미지크기 커져도 안넘치도록 수정*/
.layer_cont .layer_cont_inner .login_idpw{padding-bottom:30px; position:relative; }
.layer_cont .layer_cont_inner .login_idpw li{padding-bottom:8px;}
.layer_cont .layer_cont_inner .login_idpw li.btn{position:absolute; right:0px; top:0px; }

.layer_cont .layer_btns{width:420px; padding-bottom: 50px;}
.layer_cont .layer_btns li{padding-bottom: 10px; position:relative; }
.layer_cont .layer_btns li span{position:absolute; right:0px; top:0px; }

.layer_bottom{height: 10px; background:url(../images/layer/pop_bottom_bg.png) 0 bottom no-repeat;}

.join_desc1{padding: 50px 0 ; text-align:center; }
.layer_join_area{padding-bottom: 30px; display:inline-block; }
.layer_join_area .join_step_img{padding-left: 80px; float: left; }
.layer_join_area .layer_agree{padding-left: 30px; float: left; position:relative;}
.layer_join_area .layer_agree .pb5{
    overflow: hidden;       /* 넘치는 부분 잘라냄 */
    display: inline-block;  /* 텍스트 옆에 딱 붙도록 */
}

.layer_join_area .layer_agree .pb5 img{
     width: 390px;
    height:auto; 
    margin-left: -130px;
    margin-top: -90px;
    margin-bottom: -90px;
}
.layer_join_area .layer_agree .agree_box{width: 580px; height:100px; padding: 10px; margin-bottom:10px; overflow-y:scroll; border: solid 1px #cccccc; line-height:24px; }
.layer_join_area .layer_agree .check_agree{padding-bottom: 10px; text-align:right; }

.mail_check{width: 414px; height: 121px; border: solid 1px #e5e5e5; background-color:#fbfbfb; position:absolute; left:100px; top:100px; }
.join_end{position:absolute; left:100px; top:100px; }
.btn_main{padding-top:20px; text-align:center; }
.name_mail_chk{padding: 25px 0 0 35px; }
.name_mail_chk li{padding-bottom: 10px; }
.layer_btns1{text-align:center; padding-bottom: 30px; }

.layer_table{width:90%; border: solid 1px #e8e8e8;}
.layer_table th{padding:4px 0 4px 10px; text-align:left; }
.layer_table td{padding:4px 0 4px 10px; }
.join_table_desc1{padding-left:10px; margin-top:5px; display:block; background:url(../images/layer/layer_bul1.gif) 0 center no-repeat; color:#76a247;}

.inner_layer {position:absolute; left:0px; top:0px; width: 100%; height: 100%; background:url(../images/layer/bg_layer1.png) 0 0 repeat; z-index:100}

.find_address, .find_address2 { width: 424px; margin:50px auto; }
.inner_hd{height: 49px; position:relative; background:url(../images/layer/pop_top_bg2.png) 0 0 no-repeat;}
.inner_hd .pop_tit{padding-top: 10px; text-align:center;}
.inner_hd .btn_close{position:absolute; right:20px; top:15px; }

.pra_area{width: 424px; margin:50px auto;}
.pra_area .pra_desc{padding:20px 0 10px;}
.inner_center .small_pop_inner{width:350px; padding-bottom:30px; margin:0 auto;}
/* 팝업 설정 종료 */


.hidden{display: none !important;}
.block {display: block !important;}
.flex{display: flex !important;}


.pageing{margin-top: 10px;}

.pageing a {
  color: #888; /* 기본 회색 */
  margin: 0 4px;
}

/* 현재 페이지: inline style이 있는 a 태그에 대해 노란색 강제 적용 */
.pageing a[style] {
  color: #ffd400 !important;
  font-weight: bold !important;
}














#giftcon {width: 21px;height: 21px;}

#content{display: flex;justify-content: center;margin: 0px 10px 60px 10px;
    background-image: url('/images/common/content-bg-left.png'), url('/images/common/content-bg-right.png');
    /* background-position: 1% bottom,99% bottom; */
    background-position: left bottom, right bottom;
    background-repeat:  no-repeat;
    background-size: 20% auto,20% auto;  
}
#content > * {max-width: 100%;}

#content .container{max-width: 380px;}

#content .logo{width: 200px; margin: 50px auto;}

/* 모바일은 안보이게 */
#rightBanner{display: none;}



#content .pageing{color: #ffd400; text-align: center;}

.footer {
  background-color: #004398; /* 짙은 파란색 */
  color: white;
  /* height: 600px; */
  font-size: 11px;
}



.footer-top-pattern {
  height: 40px;
  background-color: #fdd100; /* 노란색 바탕 */
  background-image: 
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 1px, transparent 1px, transparent 20px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.7) 1px, transparent 1px, transparent 20px);
}


.decor-box {
  width: 100%;
  height: 20px;
  background-color: #ffc800; /* 진한 노란색 */
}


.footer-content {
  padding: 30px 15px;
  display: flex;
  flex-direction: column;
  gap:30px;
}

.footer-content .footer-left,
.footer-content .footer-right
{display: flex; flex-direction: column;gap :20px;}

.footer-logo {
  width: 50px;
  height: auto;
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  gap: 10px;
  padding: 0;

}

.footer-links a {color: white;text-decoration: none;}




.divider {height: 4px;}
.divider-blue{background-color: #023985;}
.divider-yellow{background-color: #ffd400;}
.divider-glay{background-color: #7d7d7d;}

  

.phone {font-weight: bold;color: #fdd100;}
.phone span {margin-left: 6px;}



.consult-form {
    margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}


.consult-form input,
.consult-form select {
  padding: 6px;
  border: none;
  border-radius: 3px;
  width: 65px;
}


.consult-form select{width: 80px;}
.consult-form .tel input{height: 100%;} 


.consult-form button {
  background-color: #fdd100;
  color: #000;
  font-weight: bold;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 3px;
  min-width: 150px;
} 



.best-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-bottom: 50px;
}

.best-menu > div {
  text-align: center;
}

.best-menu .arrow {
  max-width: 50px;
  max-height: 50px;
  height: auto;
  margin: auto auto;
}

.best-menu img {
  max-width: 200px;
}

.best-menu1,
.best-menu2,
.best-menu3
{display: flex;}


.title-header {
  text-align: center; 
  margin-bottom: 20px;
}

.title {
  font-size: 1.571rem;
  font-weight: 300;
  margin: 10px 0 6px;
  color: #505050;
}
.title-bold{font-weight: 600;}

.subtitle {
  font-size: 	0.857rem;
  font-weight: 500;
  color: #555;
}

/*노란버튼*/
.btn{border: none;border-radius: 4px;cursor: pointer; width: 120px; height: 40px; font-size: 1rem;}
.btn-yellow {background-color: var(--color-yellow);color: white;}
.btn-yellow-outline {background-color: white;color: var(--color-yellow); border: 1px solid var(--color-yellow);}


/* form 내부 노란색테마 start */
.text-yellow{color:var(--color-yellow);}
.text-blue{color:#004d98;}
.text-glay{color:#7d7d7d;}


.form{padding: 1rem;}

.form-flex{display: flex;gap: 0.5rem;}
.form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  margin-top: 0.5rem;
}

.form input[type="text"],
.form input[type="password"],
.form textarea, 
.form select {
  border-radius: 4px;
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.3rem;
}

  .form textarea {
    resize: vertical;
    height: 100px;
    margin-top: 0.5rem;
  }


.form-yellow input[type="text"],
.form-yellow input[type="password"],
.form-yellow textarea, 
.form-yellow select {
  border: 1px solid var(--color-yellow);

}

.form-yellow label{
  display: block;
  margin-top: 1rem;
}


.form-yellow .radio-wrap {
  position: relative;
  padding-left: 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
/* 숨긴 실제 라디오 input */
.form-yellow .radio-wrap input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
}

/* 테두리용 동그라미 */
.form-yellow .radio-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-yellow);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  z-index: 1;
}

/* 체크된 상태일 때 내부 점 */
.form-yellow .radio-wrap input[type="radio"]:checked ~ .text::after {
  content: "●";
  position: absolute;
  left: 2px;
  top: 10%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: transparent;
  color: var(--color-yellow);
  border-radius: 50%;
  z-index: 3;
}


.form-yellow .checkbox-wrap {
  position: relative;
  padding-left: 28px;
  color: #505050;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center; /* 텍스트와 체크박스 수직 정렬 */
}




.form-yellow .checkbox-wrap input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.form-yellow .checkbox-wrap span {
  display: inline-block;
  line-height: 1;
}

.form-yellow .checkbox-wrap span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-yellow);
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}

.form-yellow .checkbox-wrap input[type="checkbox"]:checked + span::before {
  background-color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.form-yellow .checkbox-wrap input[type="checkbox"]:checked + span::after {
  content: '✔';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
}





/* form 내부 노란색테마 end */



 /* 태블릿 (768px ~ */
@media screen and (min-width: 768px) {
html {
  font-size: 16px;
}





#content{min-height: 38vh;}

#content .container{max-width: 768px;}


#rightBanner{display: block;}

.md-hidden{display: none !important;}
.md-block { display: block !important; }
.md-flex { display: flex !important; }

.md-border-bottom-yellow-13{
border-bottom: solid 13px var(--color-yellow);
}


.form{width: 600px;}

.footer {font-size: 16px;}
.footer-content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 30px 60px;
}
.footer-content .logo-links{  font-size:8px ;}
.footer-content .logo-links .footer-logo{width: 100px;height: auto;margin-bottom: 0;}

.consult-form .tel{width: 280px; }
.consult-form input{font-size: 20px;}
.consult-form select{width: 90px;font-size: 15px;}
.consult-form button {font-size: 20px;}  
}




/* PC 반응형 */
@media (min-width: 1024px) 
{




  #content{min-height: 48.7vh;} 
  #content .container{max-width: 1500px; min-width: 600px;}


  .title-header{margin-bottom: 50px;}

    .best-menu {
    flex-direction: row;
    justify-content: center;
    gap: 5px;
  }

  .best-menu .arrow {  max-width: 50px;}

  .best-menu img {
  max-width: 350px;
}

.best-menu1,
.best-menu2,
.best-menu3
{display: block;}



.title {
  font-size: 28px;
}

.subtitle {
  font-size: 14px;
}




 .footer-content .logo-links{display: flex; gap: 10px; align-items: center;font-size:15px ;}
}