@charset "utf-8";

.header{left:12.5dvw; top:3dvh}
/*.mainBanner{background-image: url(/img/mainBannerBg.png); background-size:cover;}*/


.slider-container { overflow: hidden;  position: relative;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}

.slider {display:flex;  transition: transform 0.5s ease-in-out;height:100%;}
.slide{min-width: 100%;}
.slide1{background:url('/img/new/mainBanner1Img.jpg'); background-size:cover; background-position:bottom left;}
.slide2{background:url('/img/new/mainBanner2Img.jpg'); background-size:cover; background-position:top left;}


.bor_r{border-right:1px solid #D1D1D1;}

.service2Box01{background-image: url(/img/service1.jpg); background-size:cover; background-position: 0 60%;}
.service2Box02{background-image: url(/img/service2.jpg); background-size:cover; background-position: 0 44%;}
.service2Box03{background-image: url(/img/service3.jpg); background-size:cover; background-position: 0 60%;}
.icon{margin: 0 auto;}


.stepBox .con{	position:relative;	display:flex;	margin:85px 0 0;}
.stepBox .con:after{	display:block;content:"";	width:200%;height:1px;	background:#7b7b7b;	position:absolute;left:-50%;top:0;}
.stepBox .con dl{		position:relative;	width:25%;	text-align:center;}
.stepBox .con dl:before{	display:block;content:"";	width:6px;height:6px;	background:#333;	border-radius:50%;	border:2px solid #333;	position:absolute;left:50%;top:-5px;z-index:10;	transform:translateX(-50%);}
.stepBox .con dl dt .icon{	display:flex;align-items:center;justify-content:center;	}

.subBannerBg{background: linear-gradient(to right, #CC3333, #ED7C7C);}
.subBannerImg{position:absolute; right:80px; bottom:-30px;}

.subBanner2{background:url('/img/new/subBanner2Bg.jpg'); background-size:cover;}

.review{background-image: url(/img/reviewbg.png); background-size:cover;}
.review_img > img{border-radius: 50%;}

.footLink{border-bottom:1px solid #394353;}


.iongTxt{white-space: nowrap; /* 텍스트를 한 줄로 제한 */
    overflow: hidden;    /* 넘치는 텍스트를 숨김 */
    text-overflow: ellipsis; /* 넘치는 텍스트를 ...으로 표시 */}
/************ faq ****************/

.faq-question {    padding: 40px 0px;  cursor: pointer; border-top:1px solid #222;  display: flex;  justify-content: space-between;    align-items: center;    transition: background-color 0.3s;}
.faq-question:hover {    background-color: #f0f0f0;}
.faq-answer {     margin: 24px 0;   display: none; }

.toggle-button {    font-weight: bold;}


.online{background-image: url(/img/sec7bg.jpg);     background-size: cover;    background-position:-130px ; }

.introduceImg{bottom:0; left:10dvw}
.procedureCnt {overflow:hidden;}
#onlineBtn{cursor: pointer;;}
.policy{background:url('/img/page/formBg.jpg'); background-size:cover;}
.filedset input[type="radio"]{left:-9999px;}
.filedset input[type="radio"] + label{background:rgba(255, 255, 255, 0.0); border:1px solid #D7DCE0; cursor: pointer; color:#D7DCE0}
.filedset input[type="radio"]:checked + label, .filedset input[type="radio"] + label:hover{background:#3381FF; border:1px solid #fefefe; opacity: 1; color:#fefefe}
.filedset textarea{box-sizing: border-box;}


.inputBox{background-color:#4F4F4F ; border:1px solid #888;}
.inputBox::placeholder{color:#222;}
select{color:#222;}

select:invalid {    color: #222; }
.inputBox option {    color: #222; /* 기본 옵션 텍스트 컬러 */}
input[type="number"] {
    -moz-appearance: textfield; /* Firefox */
    -webkit-appearance: none; /* Chrome, Safari, Edge */
    appearance: none; /* 최신 브라우저 표준 */
  }

  /* 추가: 크롬에서 화살표 여백 제거 */
  input[type="number"]::-webkit-inner-spin-button, 
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* 여백 제거 */
  }

.filedset input[type="radio"]{left:-9999px;}
.filedset input[type="radio"] + label{ background:#fff; cursor: pointer; color:#e15252}
.filedset input[type="radio"]:checked + label, .filedset input[type="radio"] + label:hover{background:#e15252;opacity: 1; color:#fff}
.filedset textarea{box-sizing: border-box;}

/*************** online ***************/
.onlineImg{bottom:0}
.onlineBtn{ cursor: pointer; background-color: #e15252; color: #fefefe;}
.policyBox{border-top:2px solid #3994d9; }
.policyCheck{cursor: pointer;}
.policyCheck:before,.policyCheck:after{content:''; display:block; position:absolute; top:50%;}
.policyCheck:before{left:0; width:20px; height:20px; border:1px solid #eee; background:#fefefe; transform: translateY(-50%); border-radius:2px}
.policyCheck:after{left:7px; width:6px; height:12px; border:2px solid #fefefe;  transform: translateY(-55%) rotate(45deg); border-width:0 2px 2px 0; opacity:0}
#policyCheckbox:checked + label:before{background:#e15252; border:1px solid #e15252}
#policyCheckbox:checked + label:after{opacity: 1}
#policyCheckbox{left:-9999px}
.modalClose{cursor: pointer;}
.modalClose:before, .modalClose:after{content:''; display:block; position: absolute; top:50%; left:50%; width:2px; height:40px; background:#fefefe;}
.modalClose:before{transform:translate(-50%, -50%) rotate(45deg)}
.modalClose:after{transform:translate(-50%, -50%) rotate(-45deg)}
.policyModal{left:0; top:0; background:rgba(0, 0, 0, 0.6)}
.policyModalCnt input[type="checkbox"]{left:-9999px}
#policyAll + label{background:#eee;  transition: ease-in 0.2s;}
#policyAll + label:before, #policyAll + label:after{ content:''; display:block; position:absolute; top:50%; }
#policyAll + label:before{left:20px; width:20px; height:20px; border-radius:20px; background:#fefefe; transform:translateY(-50%)}
#policyAll:checked + label{background:#e15252; color:#fefefe}
#policyAll + label:after{left:26px; width:6px; height:10px; border:2px solid #e15252;  transform: translateY(-55%) rotate(45deg); border-width:0 2px 2px 0; opacity:0}
#policyAll:checked + label:after{opacity: 1;}
.policyCheckBox input[type="checkbox"] + label:before, .policyCheckBox input[type="checkbox"] + label:after{content:''; display:block; position:absolute; top:45%;}
.policyCheckBox input[type="checkbox"] + label:before{left:20px; width:20px; height:20px; border-radius:20px; border:1px solid #d5d5d5; background:#fefefe; transform:translateY(-50%); transition: ease-in 0.2s;}
.policyCheckBox input[type="checkbox"]:checked + label:before{background:#e15252; border:1px solid #e15252}
.policyCheckBox input[type="checkbox"] + label:after{left:26px; width:6px; height:10px; border:2px solid #fefefe;  transform: translateY(-55%) rotate(45deg); border-width:0 2px 2px 0; opacity:0}
.policyCheckBox input[type="checkbox"]:checked + label:after{opacity: 1;}
.policySuccess{background:#eee; cursor: pointer;}
.policySuccess.active{background-color: #e15252;}
.success{background:#222}

/*************** 로그인 ***************/
.loginBox, .loginBtn{background:#005290}
.loginForm{background:#fefefe}
.loginFieldset input{border: 1px solid #eee}
.loginFieldset button{border:0; cursor: pointer; }
.snsLoginIcon{background:#eee}
.socialLoginBox input, #chk_all{left:-99999px}
.socialLoginBox input + label{box-sizing: border-box; cursor: pointer;}
.socialLoginBox input + label:before, .socialLoginBox input + label:after{content:''; display:block; position: absolute;}
.socialLoginBox input + label:before{right:20px; width:20px; height:20px; background:#fefefe; border:1px solid #999; border-radius: 4px;}
.socialLoginBox input + label:after{right:28px; top:48%; transform: translateY(-50%) rotate(45deg); width:4px; height:10px; }
.socialLoginBox input:checked + label:after{ border:2px solid #999; border-width:0 2px 2px 0}
.socialLoginBox textarea{min-width:100%; max-width: 100%; box-sizing: border-box; border:0; min-height:200px}
.socialLoginBox table td, .socialLoginBox table th{border:1px solid #d5d5d5}
.chk_allLabel input + label{background:#0068C9; cursor: pointer;}
.chk_allLabel input + label:before, .chk_allLabel input + label:after{content:''; display:block; position: absolute;}
.chk_allLabel input + label:before{width:20px; height:20px; background:#fefefe; border-radius:2px; right:20px}
.chk_allLabel input + label:after{right:28px; top:48%; transform: translateY(-50%) rotate(45deg); width:4px; height:10px; }
.chk_allLabel input:checked + label:after{ border:2px solid #0068C9; border-width:0 2px 2px 0}
#register_form input{border:1px solid #999}
.btn_confirm a, .btn_confirm button{border:0; cursor: pointer;}
.btn_confirm a{background:#eee;}
.btn_confirm button{background:#0066FF}
/*************** //로그인 ***************/

.board_list{overflow-x:scroll}
.board_list table{min-width:500px}
.board_list table tbody tr{border-bottom: 1px solid #aaa;}
.pg_wrap{display:flex; justify-content: center; width:100%}
.viewBox{border-top:1px solid #222}
.viewBox td{border:1px solid #222}
.viewBox tr td:nth-child(1){border-bottom:1px solid #fefefe}
.viewBox tr:nth-last-child(1) td:nth-child(1){border-bottom:1px solid #222}


.productItem{border:1px solid #ddd}
.productItem a{cursor: pointer;}
.productBtn{transition: ease-in-out 0.3s; cursor: pointer;}
.productBtn.active{color:#222}
.productBtn.active:nth-child(1) {background-color: #BDCCDE;}
.productBtn.active:nth-child(2) {background-color: #688294;}
.productBtn.active:nth-child(3) {background-color: #F3DF8E;}
.productBtn.active:nth-child(4) {background-color: #ccb6b2;}
.productBtn.active:nth-child(5) {background-color: #E77676;}
.productBtn.active:nth-child(6) {background-color: #63aed6;}
.productBtn.active:nth-child(7) {background-color: #ccc;}
.productBtn.active:nth-child(8) {background-color: #afc7ce;}
.productBtn.active:nth-child(9) {background-color: #9fa4e0;}
.productBtn.active:nth-child(10) {background-color: #f1f1d0;}
.productBtn.active:nth-child(11) {background-color: #a4b1ee;}
.productBtn.active:nth-child(12) {background-color: #dfe6da;}
.productBtn.active:nth-child(13) {background-color: #c5e1ee;}
.productBtn.active:nth-child(14) {background-color: #bbc0d6;}
.productBtn.active:nth-child(15) {background-color: #b7cfa5;}
.productBtn.active:nth-child(16) {background-color: #ebbcbc;}
.productBtn.active:nth-child(17) {background-color: #b6c7da;}
.productBtn.active:nth-child(18) {background-color: #ccc;}
.productBtn.active:nth-child(19) {background-color: #e9f0c2;}
.productBtn.active:nth-child(20) {background-color: #dfc99a;}
.productBtn.active:nth-child(21) {background-color: #ba9adf;}
.productBtn.active:nth-child(22) {background-color: #9adfa0;}


select:invalid { color: #222; }
.inputBox option { color: #222; }
.policySuccess.active { color:#fff; }
.inputBox{background:#fff !important;}
.inputBox::placeholder{color:#222;}
select{color:#222;}



.progressBarWrap { width:100%; background:#eee; height:4px; }
#progressBar { width:0%; background:#e15252; height:20px; transition:width 0.3s; }
.step {
  height: calc(100vh - 120px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  display: none;
}
.step.show { display: block; }
.step-inner {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 100%; box-sizing: border-box;
}
.cardBtn {
  border:2px solid #ccc; box-sizing:border-box; cursor:pointer;
}
.cardBtn:hover { border-color:#999; }
.cardBtn.selected { border-color:red; }
.hidden { display:none !important; }

.btnArea {
  position:fixed; bottom:0; left:0; right:0;
  background:#f8f8f8; padding:10px;
  box-shadow:0 -2px 5px rgba(0,0,0,0.1); text-align:center;
}
/* 버튼 50:50 비율 적용 */
.btnArea .inner {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.btn50 {
  flex: 1;
}
#nextBtn, #restartBtn { border:none; cursor:pointer; }
.moreBtn{border-bottom:1px solid #E9E9EC;}