@charset "utf-8";
/* 기본 헤더 스타일 */
header{background:rgba(255, 255, 255, 0.5);border-bottom: 1px solid #D9E0E1;    backdrop-filter: blur(4px); z-index:999;}

.mainBanner{background: url(/img/donggi/page/bg_sec01.svg); background-size:cover; background-position: center;}
.mainPhoneLeft{margin-right:-70px; margin-top:70px;}
.chatRight{background:url(/img/donggi/page/bg_sec03.svg) 45% 50% no-repeat; background-size:cover;}
.con .bg_ph li img {    width: 345px;    margin-top: -5px;}

.introLeft{    transform: translate(0, -25%);    opacity: 1;    transition-delay: .1s;}
.tag{    border: 2px solid #007AFF;    gap: 10px;}
.tag i svg{    fill: #007AFF;    width: 18px;    height: 15px;}
.shadow{    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.05);}

.service{background:url(/img/donggi/page/benefit_bg.jpg); background-size:cover;}
.flip {width: calc(33.333333% - 2px); height: 20vh; position: relative;   perspective: 1100px; border-bottom:1px solid #fff;}
.card {width: 100%;  height: 100%;  position: relative; transition: .4s; transform-style: preserve-3d;} 
.front, .back { position: absolute;  width: 100%;  height: 100%; padding-left:3vmin;  backface-visibility: hidden;display: flex;flex-direction: column;justify-content: center;}
.back { transform: rotateY(180deg); background:rgb(0 122 255 / 65%);}
.flip:hover .card { transform: rotateY(180deg);}
.service > .flip:nth-child(2), .service > .flip:nth-child(5), .service > .flip:nth-child(8){border-left:1px solid #fff; border-right:1px solid #fff;}

.processBox{    aspect-ratio: 1 / 1;    border-radius: 50%;}

/************ 모달 *************/
.popup_form{display:none; position:fixed; z-index:999; width:100vw; height:100vh; background:rgba(0, 0, 0, 0.6); justify-content:center; align-items:center; left:0; top:0}
.popup_form p, .popup_form span, .popup_form input, .popup_form label, .popup_form button option{font-family:'GmarketSansMedium'; color:#333; line-height:1.5em}
.modal-content{display:block; width:50vw; height:70vh; overflow-y:scroll; overflow-x:hidden;  border-radius:1vmin; box-shadow:9px 8px 20px 1px rgb(0 0 0 / 35%);}
.modal_section{padding-top:3vmin; background:#f4f4f4;}
.modal_inner{display:block; margin:0 auto; width:90%;}
/****************************************** //모달 기본값 ******************************************/
.co_modal{color:#2f457b;}
.co_yellow{color:#fba02d;}
.co_wh{color:#fff !important;}
.co_bk{color:#222;}
.co_gry{color:#d5d5d5}
.co_red{color:#d13131}
.co_point{color:#ff2500 !important; }
/****************************************** 글자 정렬 ******************************************/

.f_r{text-align:right;}
.preLine{white-space: pre-line;}
span{font-size:inherit; line-height:inherit; font-family:inherit; }

/********************************** 모달 헤더 **********************************/
.modal_header{width:100%; background:#007AFF; padding:2vmin 0 1.5vmin;}
.modal_header > .modal_inner {display:flex; justify-content:space-between; align-items:center;}
.modal_header > .modal_inner p, .modal_header > .modal_inner p span{line-height: 0;}

.modal-close{display:block; width:3vmin; height:3vmin; position:relative; }
.modal-close:before, .modal-close:after{content:''; display:block; width:2px; height:3vmin; position:absolute; left:50%; top:50%; background:#fff; border-radius:3px;}
.modal-close:before{transform:translate(-50%, -50%) rotate(45deg);}
.modal-close:after{transform:translate(-50%, -50%) rotate(-45deg);}
/********************************** //모달 헤더 **********************************/

/********************************** 내용 유형  **********************************/
.choice_modal{display:none;}
.choice_modal.on{display:block;}

/* 입력 값 스타일 */
	/* 공통사항 */

	/* select 박스 1 */
	.ui-selectmenu-button-text{display:none;}
	#dengi_option2-2{-webkit-appearance:none; -moz-appearance:none; appearance:none; background:url('/img/donggi/rending/accordien_arrow.svg') #fff no-repeat 97% 50%/15px auto;}
	

    #dengi_option2-4, #dengi_option2-5{ transition: height 0.3s ease;}
	
	.locationResult{ height:8vmin;transition:all 0.2s; background:#bbd4ef; overflow: hidden;}
    .locationResult.active{height:auto;transition:all 0.3s}
	.denggi_locatioin{position:relative; right:3vmin;}
    .denggi_locatioin:after{width:1vmin; height:1vmin; content:''; display:block; position:absolute; transform:translateY(-50%) rotate(45deg); right:-3vmin; top:35%; 
    border-right:2px solid #007aff; border-bottom:2px solid #007aff; transition:all 0.3s}
    .denggi_locatioin.active:after{transform:translateY(-50%) rotate(-135deg); top:70%;}

    .hiddenP{margin-top:4vmin;}
    .hiddenP span{color:color(display-p3 0.9176 0.2 0.1373) !important}


	/* 개인공인인증서 */
    .denggi_end{border-bottom:2px dotted #c6c6c6;}
	.select_btn2 input{position:absolute; left:-999px;}
	.select_btn2 input + label{padding:1.5vmin 3vmin 1.2vmin 6vmin; border:2px solid #fff; margin:1vmin 0 3vmin; border-radius:5vmin;position:relative;
	border:1px solid #999; background:#fff;  display:block;}
	
	.select_btn2 input + label:before, .select_btn2 input + label:after{content:''; display:block; position:absolute; top:50%;}
	.select_btn2 input + label:before{width:2.8vmin; height:2.8vmin; border-radius:2vmin; background:#bdbdbd; left:2vmin; transform:translateY(-50%);}
	.select_btn2 input + label:after{width:1.1vmin; height:1vmin;  border-bottom:2px solid #fff; border-left:2px solid #fff; transform:translateY(-50%) rotate(312deg); left:2.7vmin; top:47%;}
	
	.select_btn2 input[type="radio"]:checked + label{    background:#007aff; border:1px solid #007AFF;}
	.select_btn2 input[type="radio"]:checked + label:before{background:#fff;}
	.select_btn2 input[type="radio"]:checked + label:after{ border-bottom:2px solid #007aff; border-left:2px solid #007aff;}
	.select_btn2 input[type="radio"]:checked + label p{color:#fff;}
	
	/* result_table */
	#result_table{margin-bottom:2vmin; border:1px solid #aaa}
	#result_table thead tr{background:#c2ddfb;}
	#result_table td{ padding:2vmin 0; border:1px solid #aaa;     width: 50%;}
	#result_table thead tr td:nth-child(1){border-right:1px solid #aaa;}
	
	#result_table tbody tr td:nth-child(1){border-left:0;}
	#result_table tbody tr td:nth-child(2){border-right:0;}
	#result_table tbody tr td div{display:flex; justify-content:space-between; align-items:center; padding:1vmin 4vmin;}
    .point{background:#c2ddfb}
	
	
/********************************** //내용 유형  **********************************/

/********************************** 추가 유형  **********************************/
.add_choice{margin-top:5vmin; padding-top:6vmin; border-top:2px dotted #c6c6c7}
.choice_btn1{margin-bottom:1vmin; display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #999; position:relative; padding:1vh 2vmin;}
.choice_btn1 input{position:absolute; left:-999px;}
.choice_btn1 input[type="checkbox"] + label p{margin-left:5vmin; padding-top:0.8vmin}
.choice_btn1 input[type="checkbox"] + label:before, .choice_btn1 input[type="checkbox"] + label:after{content:''; position:absolute; top:50%; display:block}
.choice_btn1 input[type="checkbox"] + label:before{width:3vmin; height:3vmin; border-radius:3vmin; background:#bdbdbd; left:0; transform:translateY(-50%);}
.choice_btn1 input[type="checkbox"] + label:after{width:1.5vmin; height:0.9vmin; border-bottom:2px solid #fff; border-left:2px solid #fff; transform:translateY(-63%) rotate(312deg); left:0.8vmin; }
.choice_btn1 input[type="checkbox"]:checked + label:before{background:#007aff;}

.denggi_accordien_btn{position:relative; width:4vmin; height:4vmin; cursor:pointer}
.denggi_accordien_btn:after, .denggi_accordien_btn:before{content:''; display:block; position:absolute; top:50%; left:50%;width:3vmin; height:2px; background:#333; }
.denggi_accordien_btn:before{transform:translate(-50%, -50%) rotate(90deg); transition:all 0.5s;}
.denggi_accordien_btn:after{transform:translate(-50%, -50%);} 
.denggi_accordien_content{ overflow-y:hidden;  transition: height 0.8s ease; display:none;}
.denggi_accordien_btn.rotate::before {transform: translate(-50%, -50%) rotate(0deg) !important;}
/********************************** //추가 유형  **********************************/





/*************** 로그인 ***************/    
.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}
/*************** //로그인 ***************/


    /* 체크박스 숨기기 */
    .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 #E9E9EC;}