@charset "utf-8";
*{ margin: 0; padding: 0; list-style: none;
    font-family:"맑은 고딕";
    color:#222; box-sizing: border-box;
}
html{ scroll-behavior: smooth;}
a{text-decoration: none;}
/* menu */
header {  
    width: 100%; height: 80px;
    /* border: 1px solid red; */
    background-color: #D53427;
    position: fixed; z-index: 999;left: 0;top: 0;
}
.topwarp{width: 1600px; margin: 0 auto; height: 80px;
/* border: 1px solid rgb(255, 187, 0); */
}
header h1{float: left;}
header h1 img {border: 0; width: 150px; margin-top: 5px;}
.menu>li img{ width: 20px; height: 20px;}
.menu {  width:600px; height: 80px; float: right;
    /* border: 1px solid rgb(234, 255, 0); */
}

.menu>li{width: 120px;height: 50px;float: left; text-align: center;
    font-size: 20px; line-height: 50px; margin-top: 30px; cursor: pointer;
    border-bottom:4px solid  #222; transition: 0.6s; position: relative;
    /* border: 1px solid rgb(255, 123, 0); */
}
.menu>li:last-child{width: 110px;border-bottom:none}
.menu>li:hover{
    background: linear-gradient(to top, #f7ed58 0%,#D53427 30%,#D53427 100%);
    border-bottom:4px solid  #f7ed58;
}
.menu>li:last-child{opacity: 0.7;}
.menu>li:last-child:hover{background:none; scale: 1.2; border-bottom:none;
    opacity: 1; transform: translateY(-5px);
}
.menu>li:hover > a{color: #fff;}
.menu>li:hover .submenu{transform: scaleY(1);}
.submenu{transform: scaleY(0);} 
.submenu>li{background-color: #222;cursor: pointer; opacity: 0; 
    position: static; float: none; transform: scaleX(0);
    transition: 0.2s; 
}
.submenu>li a{color: #967e66; font-weight: 50; font-size: 16px; }
.menu>li:hover .submenu>li{
    transform: scaleX(1); opacity: 1;}
.submenu>li:hover a{color: #f7ed58; font-weight: bold;}

/* top */
.top{position: fixed;right: 50px;bottom: 50px;width: 60px;height: 60px;
  border-radius: 30px 30px 0 30px; background-color: #25231e;text-align: center;
  line-height: 60px; z-index: 999;
  }
.top a{color:#fff; font-size: 20px; font-weight: 600;}
.top img{color:#fff;position: absolute;left: 17px;top: 50px;transform: rotate(180deg);
opacity: 0;transition: 0.3s ease-out;}
.top:hover a{color: #25231e;}
.top:hover img{opacity: 1;top: 10px;}

/* foot */
footer{width: 100%; height: 40px; overflow: hidden;position: fixed; left: 0;bottom: 0;
  z-index: 998; transition: 0.4s;
}
footer:hover{height: 310px;}
footer:hover .view p img{transform: rotateX(180deg);}
.view{width: 1600px; margin: 0 auto;}
.view p{width: 180px;height: 40px;background-color: #25231e; transition: 0.4s;
    text-indent: 30px; padding-top: 7px;
    border-radius: 50px 50px 0 0; color: #fff;font-size: 18px; font-weight: bold;}
.view p img{ margin-left: 20px; width: auto; height: 15px;}


.hide{width: 100%;position: relative;background-color: #2b221e ; 
}
.hide_in{width: 1600px;margin: 0 auto; position: relative; height: 270px;
   /* border: 1px solid rgb(255, 25, 0); */
  }


/*  */
.box1{  width: 500px; padding: 30px; position: absolute;left: 0;top: 0; }
  /* ai도움 */
  .form{margin-bottom: 15px;}
  .first-line{display: flex; gap: 15px;}
  .input-box{background-color: transparent; border: 1px solid #fff;
    padding: 15px;font-size: 16px; font-family: 'Jua', sans-serif; width: 50%;
  }
  .form .input-box{flex: 1;}
  .full-width{width: 100%;}
  /* ::placeholder: 입력창에 아무것도 입력하지 않았을 때 미리 보여주는 안내 글자
  (예: "아이디를 입력하세요")를 가리키는 특수한 선택자입니다. */
  .input-box::placeholder {  color: #ffffff;}
  /* 3번 줄: 동의 박스와 버튼 나란히 (Flexbox) */
  .third-line {
    display: flex; align-items: center; color: #ffffff; font-size: 18px; gap: 30px;
  }
  .agreement-box span{color: #fff;}
  .agreement-box+.submit-btn{flex: 1;}
  /* 기본 체크박스 숨기고 커스텀하기 */
  .custom-checkbox input {
    display: none; /* 기본 네모 체크박스 숨김 */
  }
  .checkmark-circle {margin: 0 10px; 
    display: inline-block; width: 20px;
    height: 20px; border: 2px solid #ffffff;
    border-radius: 50%; /* 완전한 원으로 만들기 */
    position: relative; 
    cursor: pointer;
  }
  /* 체크되었을 때 V 마크 표시 */
  .custom-checkbox input:checked + .checkmark-circle::after {
    content: '';  position: absolute;  left: 5px;  top: 0px;
    width: 4px;  height: 10px;  border: solid #ffffff;
    border-width: 0 2px 2px 0;  transform: rotate(45deg);
  }
  /* 보내기 버튼 */
  .submit-btn {
    background-color: #ffffff;  color: #000000;  border: none;
    padding: 15px 60px;  font-size: 18px;  font-family: 'Jua', sans-serif;
    cursor: pointer; 
  }
  /* 여기까지 */


/*  */
.box2{ float: left; width: 400px;height: 210px; padding: 0 30px;
  position: absolute; left: 500px; top: 30px;
  border-left: 1px dotted #ddd; border-right: 1px dotted #ddd; 
}
.box2 h5{color: #fff;font-size: 16px;font-weight: bolder;}
.box2 p{color: #888;}
.box2 p:nth-child(2){margin-top: 15px; font-size: 14px;}
.box2 p:nth-child(3){margin-top: 10px; font-size: 14px; font-weight: bold;}
.box2 p:nth-child(4){margin-top: 15px; font-size: 11px;}


/*  */
.box3{width: 700px; position: absolute; left: 900px; top: 0px; padding: 30px;}
.logo{width: 210px; height:auto; margin: 20px 0px;opacity: 0.7;}
.logo img{width: 210px; height:auto;}
.sns{width: 210px; display: flex; justify-content: space-around; align-items: center;
 height: 60px;
  /* border: 1px solid red; */
}
.foot-menu{margin-left: 20px; width: 400px; display: flex; justify-content: space-around; align-items: top;
 height: 150px; position: absolute; left: 250px; top: 80px; 
}
/* .foot-menu a{color: #ddd;} */
.foot-menu > li a{font-size: 16px;font-weight: bold; color: #999;}
.foot-submenu > li a{font-size: 12px; color: #666;}