/***********************반응형***************************************/


@media (max-width:1280px) {

}

@media (max-width:1024px){
.header-top p{
text-align:center;
}	
.va-img{
width:200%;
margin-left:-100%;
}
.va-txt{

}
.va-t1{
font-size:28px;
}
.va-t2{
font-size:40px;
}
.va-t3{
font-size:18px;
margin-top:25px;
}
.va-t3 img{
width:50px;
margin-bottom:10px;
}
.va-link{
bottom:40px;
}

.box{
padding:80px 0;
}
.title span{
font-size:26px;
margin-bottom:15px;
}
.title p img{
width:280px;
}
.title p{
font-size:42px;
padding:0 10px;
word-break: keep-all;
}
.box1-ul li{
font-size:26px;
}
.title em{
font-size:26px;
margin-top:15px;
}
.title2{
font-size:18px;
word-break: keep-all;
}
.title2 br{
display:none;
}

.box2-dl dt{
width:220px;
line-height:60px;
padding-bottom:15px;
font-size:28px;
}

.b2dl-div span{
font-size:26px;
}
.b2dl-div strong{
font-size:22px;
}
.b2dl-div p{
font-size:16px;
}
.box2-dl dd ul{
gap:2%;
}


#box5 .box-area{
display:block;
text-align:center;
}
.ba5-left{
width:100%;
}
#box5 .title{
text-align:center;
}
.ba5-right{
width:100%;
max-width:600px;
margin:30px auto 0;
}
.ba5-left a{
display:inline-block;
line-height:80px;
height:auto;
}
.ul-type1{
flex-wrap: wrap;
gap:2%;
max-width:640px;
}
.ul-type1 li{
flex:1 1 49%;
margin-bottom:2%;
}
}	

@media (max-width:768px){
body, th, td, input, select, textarea, button{
font-size:14px;
}
@keyframes upAndDown {
0% {bottom: 0px;}
50%{bottom: 0px;}
100%{bottom: 0px;}
}
.quick {
width:100%;
right:0;
}
.quick a br{
display:none;
}
.quick a{
height:45px;
width:100%;
border-radius:0;
flex-direction: row;
font-size:20px;
}

.quick a img{
padding-right:0;
width:40px;
}

header{
background:#12203d;
position:unset;
}
.header-top p{
font-size:1.1rem;
}
.header-area{
padding:5px 0;
padding-top:30px;
justify-content: center;
}
.header-logo img{
/*width:160px;*/
top:0;
left:0;
}
.header-tel{
padding:5px 10px;
}
.header-tel span{
display:inline;         /* ✅ 숨기지 않음 */
font-size:18px;         /* ✅ 모바일용 적당한 크기 */
font-weight:700;
color:#0059c9;          /* ✅ 파란색 포인트 유지 */
}
.header-text{
/*position:absolute;
width:100%;
text-align:center;
top:0;
left:0;
background:#ff7200;*/
}

#visual{
background:#12203d;
padding-top:0px;
}
/*.va-txt{
bottom:70px;
}
.va-txt img{
width:95%;
}*/
.va-link{
bottom:30px;
}
.va-link a{
padding:7px 25px;
font-size:15px;
}
.va-link a img{
width:18px;
}
.va-t1{
font-size:16px;
}
.va-t2{
font-size:26px;
}
.va-t3 img{
width:30px;
}
.va-t3{
font-size:12px;
margin-top:20px;
line-height:1.1;
}
.va-t3 br{

}
.va-txt{
top:0;
}


.box{
padding:30px 0;
}
.title{
padding-bottom:5px;
}
.title span {
font-size: 20px;
margin-bottom: 0px;
}
.title p img{
width:160px;
vertical-align: -5px;
}
.title p{
font-size:26px;
}
.title em{
font-size:18px;
word-break: keep-all;
}
.box1-ul li{
width:50%;
}
.box1-ul li{
font-size:18px;
}

.ul-type1{
margin-top:10px;
max-width:320px;
}
.ult1-div span{
font-size:18px;
}
.ult1-div span:after{
width:15px;
margin:5px auto;
display:none;
}
.ult1-div p{
font-size:18px;
line-height:1.2;
}
.ult1-div > div{
border-width:8px;
gap:3px;
}
.ult1-div strong{
padding:0 20px;
word-break: keep-all;
}

#box2 p br{
display:block;
}

.box2-dl dt {
width: 170px;
line-height: 47px;
padding-bottom: 12px;
font-size: 22px;
}
.box2-dl dd ul{
flex-wrap:wrap;
}
.box2-dl dd{
margin-top:20px;
}
.box2-dl dd ul li{
flex:1 1 40%;
margin:0 auto;
margin-bottom:2%;
max-width:160px;
}
.b2dl-div > div{
border-width:5px;
gap:0px;

}
.b2dl-div span{
font-size:20px;
}
.b2dl-div strong{
font-size:18px;
}
.b2dl-div p{
font-size:14px;
letter-spacing: -0.15em;
line-height:1.25em;
}
.b3l-top{
font-size:16px;
height:45px;
border-radius:10px;
}
.b3l-ul li{
font-size:13px;
height:45px;
border-radius:10px;
overflow:hidden;
padding:0 10px;
}
.b3l-ul li p span{
padding:5px 0px;
width:100%;
box-sizing:border-box;
display:block;
text-align:center;
}
.b3l-top p:nth-child(1), .b3l-top p:nth-child(3),
.b3l-ul li p:nth-child(1), .b3l-ul li p:nth-child(3){
width:25%;
}
.box-counter{
margin-top:15px;
}
.box-counter span{
font-size:13px;
}
.box-counter em{
font-size:17px;
}


.box4-ul li{
width:100%;
border-radius:9999px !important;
height:60px;
font-size:20px;
}
.box4-ul li img{
height:30px;
bottom:-8px;
}

.ba5-left a{
background-size:50px 44px;
padding-left:60px;
line-height:44px;
font-size:22px;
}
.ba5-right{
margin-top:10px;
padding:15px;
}
.ba5-right li{
padding:0 10px;
gap:0;
height:55px;
margin-bottom:5px;
}
.ba5-right li p{
font-size:16px;
width:70px;
}

.ba5-check{
font-size:15px;
}
.ba5-btn {
margin-top: 15px;
}
.ba5-btn a{
height:55px;
font-size:18px;
}
.ba5-btn a i{
font-size:20px;
}

.b5r-tit{
font-size:15px;
}


.ul-type2{
display:block;
}
.ul-type2 li{
width:100%;
font-size:18px;
gap:5px;
padding:15px;
}
.ul-type2 li strong{
flex-shrink: 0;
}
.ul-type2 li img{
flex-shrink: 0;
width:30px;
}



.flex-box{
margin-top:15px;
display:block;
}
.flex-box div{
width:85%;
margin:10px auto 0;
}

footer{
padding:30px 0;
}
.foot-info p{
margin:0 5px;
}

.foot-text{
padding-top:20px;
font-size:13px;
word-break: keep-all;
line-height:1.6;
}
.foot-text br{
display:none;
}
}

@media (max-width:350px){

}

/* ✅ 모바일 헤더 최적화 */
@media screen and (max-width: 767px) {
  .header-area {
    display: flex;
    flex-direction: column; /* ← 세로로 두 줄 쌓기 */
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 0 10px;
    background: #e4eef4; /* 연한 하늘색 배경 */
    text-align: center;
  }

  .ha-info {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
  }

  .header-logo { font-size: 18px; font-weight: 700; line-height: 1; }
  .header-text { font-size: 18px; font-weight: 600; line-height: 1; }

  .header-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .header-tel p { font-size: 13px; line-height: 1; color: #ffffff; }
  .header-tel span { font-size: 18px; font-weight: 800; color: #ffffff; }
}

/* === 모바일 헤더: 색/정렬/두 줄 고정 === */
@media (max-width: 767px) {
  /* 1) 남색 배경 덮어쓰기 → 예시처럼 연한 배경 */
  .header{ background:#e4eef4 !important; }

  /* 2) 헤더 2줄 구조 */
  .header-area{
    display:flex !important;
    flex-direction:column !important;   /* 한 줄 + 한 줄로 쌓기 */
    align-items:center !important;
    justify-content:center !important;
    gap:6px;
    text-align:center;
    padding:14px 12px 10px !important;
  }

  /* 3) 첫 줄: 회사명 + 등록번호를 '한 줄'로 고정 */
  .ha-info{
    display:flex !important;
    flex-direction:row !important;
    align-items:baseline;
    gap:10px;
    flex-wrap:nowrap !important;        /* 줄바꿈 금지 */
    white-space:nowrap !important;      /* 줄바꿈 금지 */
  }

  .header-logo,
  .header-text{
    font-size:18px !important;
    line-height:1 !important;
    color:#222 !important;              /* 검정에 가깝게 */
  }
  .header-logo{ font-weight:700 !important; }
  .header-text{ font-weight:600 !important; }

  /* 4) 둘째 줄: 상담전화 중앙 정렬 */
  .header-tel{
    margin-left:0 !important;           /* 기존 auto 해제 */
    width:auto;
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-decoration:none;
  }
  .header-tel p{
    margin:0;
    font-size:13px !important;
    line-height:1;
    color:#333 !important;
    display:flex; align-items:center; gap:4px;
  }
  .header-tel i{ font-size:16px; color:#495a6a; }
  .header-tel span{
    font-size:18px !important;
    font-weight:800 !important;
    line-height:1;
    color:#1e5de8 !important;           /* 파란 번호 */
  }
}