@charset "utf-8";


/************** main ****************/

.fixedBtn {    position: fixed;    bottom: 80px;  right: 4dvw; }
.rotate {    background-image: url('/img/bizmo/contact.svg');    background-size: cover;    width: 100%;  height: 100%;   position: absolute;    border-radius: 50%;    animation: rotate 5s linear infinite;}
.text {    position: relative;  z-index: 1; }
@keyframes rotate {
    0% {
        transform: rotate(0deg); 
    }
    100% {
        transform: rotate(360deg);
    }
}

.section_1{background: linear-gradient(to bottom, #FFFFFF, #D6D6D6)}
.Maininner{width: 90dvw; margin: 0 auto;}

.logo{width: 150px; height: 150px; background-color: #F6F7F8; border-radius: 100%;}
.container{margin: 0 auto;}

.subBanner{overflow-y: hidden;}
.subBannerImg{height:auto;}
.benefitBtn{border:1px solid #fff;}
.benefitBox{width: 100%;}
.benefitBox1{background-image: url('/img/bizmo/benefit1Tit1Img.jpg'); background-size:cover; background-position:center; width: 33.3%;}
.benefitBox2{background-image: url('/img/bizmo/benefit1Tit2Img.jpg'); background-size:cover; background-position:center; width: 33.3%;}
.benefitBox3{background-image: url('/img/bizmo/benefit1Tit3Img.jpg'); background-size:cover; background-position:center; width: 33.3%;}


.stepTxt{border:1px solid #5C5D6D;}
.mo_step_border{border: 1px solid #5C5D6D;}
.step_left_img>img{width: 80px;}
.mo_step_text{text-align: left;}

/************** main ****************/
.tab{padding: 10px 126px; cursor: pointer; font-weight: 700; position: relative; font-size: 32px;}
.tab.active {color: #2C85E4;}

.tab.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2C85E4;
}

.sidebar{width: 25%; padding-right: 40px;}

.category {
  font-weight: 700;
  cursor: pointer;
  color: #212126;
  padding: 20px;
  padding-left: 0;
  border-top: 1px solid #B7B7C2;
  font-size: 24px;
}

.category.active {color: #2C85E4;}

.subcategory {display: none; margin-left: 15px; cursor: pointer;}

.subcategory.active {display: block;}

.subcategory div {cursor: pointer; padding: 16px; padding-left: 0;}

.subcategory div:hover,
.subcategory div.selected {color: #2C85E4;font-weight: 700;}

label{text-align: left;}

.options select {
  display: inline-block;
  padding: 10px;
  border: 1px solid #9091A0;
  border-radius: 4px;
  font-size: 16px;
} 

select option {color: #222; /* 모든 옵션의 글자색 */} 

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


/**********************faq**********************/

.faq-item {    border-bottom: 1px solid #222;}
.faq-item1{border-top:1px solid #222;}
.faq-question {    padding: 24px 32px;    cursor: pointer;    display: flex;    justify-content: space-between;    align-items: center;    transition: background-color 0.3s;}
.faq-question:hover {    background-color: #f0f0f0;}
.faq-answer {    padding:  24px 40px;    display: none; }
.toggle-button {    font-weight: bold;}

.introduceImg{bottom:0; left:10dvw}

.procedureCnt {overflow:hidden;}

#onlineBtn{cursor: pointer;}
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:#3d89e1}
.filedset input[type="radio"]:checked + label, .filedset input[type="radio"] + label:hover{background:#3d89e1;opacity: 1; color:#fff}
.filedset textarea{box-sizing: border-box;}

/*************** online ***************/

.onlineImg{bottom:0}
.onlineBtn{ cursor: pointer;}
.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}
#policy:checked + label:before{background:#3994d9; border:1px solid #3994d9}
#policy:checked + label:after{opacity: 1}
#policy{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:#0066FF; color:#fefefe}
#policyAll + label:after{left:26px; width:6px; height:10px; border:2px solid #0066FF;  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:#0066FF; border:1px solid #0066FF}
.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: #0066FF;}

.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}


.bizmobco_7{background:#3d89e1;}
.bizmobco_8{background:#0f4ea7;}
.bizmo input[type="radio"] + label{ background:#fff; cursor: pointer; color:#3d89e1;}
.bizmo input[type="radio"]:checked + label, .filedset input[type="radio"] + label:hover{background:#3d89e1;opacity: 1; color:#fefefe}
.bizmo #policy:checked + label:before{background:#3d89e1; border:1px solid #3d89e1}
.bizmo #policy:checked + label:after{opacity: 1}
.bizmo .policyCheckBox-custom:checked + label:before{background:#3d89e1; border:1px solid #3d89e1}
.bizmo .policyCheckBox input[type="checkbox"]:checked + label:before{background:#3d89e1; border:1px solid #3d89e1}
.bizmo .policyCheckBox input[type="checkbox"] + label:after{left:27px; width:6px; height:10px; border:2px solid #fefefe;  transform: translateY(-55%) rotate(45deg); border-width:0 2px 2px 0; opacity:0}
.bizmo #policyAll:checked + label{background:#3d89e1; color:#fefefe}
.bizmo #policyAll + label:after{left:26px; width:6px; height:10px; border:2px solid #3d89e1;  transform: translateY(-55%) rotate(45deg); border-width:0 2px 2px 0; opacity:0}
.bizmo .policySuccess.active{background-color: #3d89e1; color:#fff;}
.bizmo #policyAll:checked + label:after{   opacity: 1;}
.bizmo .policyCheckBox input[type="checkbox"]:checked + label:after{ opacity: 1;}
.bizmo .inputBox{background-color:#fff !important;}

.bco_7{background:#3d89e1;}

    /* 체크박스 숨기기 */
    .checkpolicy input[type="checkbox"] {      display: none;    }
    /* 체크박스 스타일 */
    .custom-checkbox {      width: 20px;      height: 20px;       border-radius: 4px;      background-color: #fff;      margin-right: 10px;     transition: background-color 0.3s, border 0.3s;      position: relative;    }

    /* 체크박스 선택 상태 스타일 */
   .checkpolicy input[type="checkbox"]:checked + .custom-checkbox {      background-color: #0f4ea7;      border-color: #0f4ea7;    }

   .checkpolicy input[type="checkbox"]:checked + .custom-checkbox::after {      content: '';      position: absolute;      top: 2px;      left: 5px;      width: 5px;      height: 8px;      border: solid white;      border-width: 0 3px 3px 0;      transform: rotate(45deg);    }

    /* 체크박스 hover 효과 */
    .custom-checkbox:hover {      border-color: #0f4ea7;    }
    .moreBtn{border-bottom:1px solid #ccc;}