@charset "utf-8";

.dialog-find-id-area,
.dialog-register-area,
.dialog-history-area {
	margin-top: 25px;
}
.dialog-find-id, 
.dialog-register-time {
	padding: 17px;
	line-height: 18px; 
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	border: 2px solid #111;
	border-radius: 8px;
	box-sizing: border-box;
}
.terms-detail-holder {
	padding: 15px;
	border-radius: 8px;
	background-color: #fff;
	height: 400px;
	overflow: auto;
}
.terms-detail-holder pre {
	line-height: 18px;
	font-size: 12px;
	white-space: break-spaces;
    word-break: break-word;
}
.terms-toggle-btn-holder {
	margin: 0 auto;
	width: 380px;
}
.dialog-register-car {
	position: relative;
	margin-bottom: 30px;
}
.dialog-register-car .dialog-register-item {
    position: relative;
}
.dialog-register-car .thumb-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 210px;
    height: 140px;
}
.dialog-register-car .dialog-register-item span {
	display: block;
}
.dialog-register-car .car-summary-holder {
    margin: 0;
    padding: 12px 0 5px 230px;
}
.dialog-tell-area {
	margin-top: 25px;
}
.dialog-tell-area .ui-holder {
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}
/* 2021.04.26 팝업 추가 */
.dialog-table-basic-holder table {
	width: 100%;
	border-top: 2px solid #000;
}
.dialog-table-basic-holder table tr {
	border-bottom: 1px solid #e5e5e5;
}
.dialog-table-basic-holder table tr td,
.dialog-table-basic-holder table tr th {
	padding: 10px 5px;
	box-sizing: border-box;
	line-height: 34px;
	font-size: 20px;
}
.dialog-table-basic-holder table tr th {
	font-weight: bold;
}
.confirm-btn-holder {
	display: flex;
	justify-content: center;
	margin-left: -10px;
}
.confirm-btn-holder .btn {
	max-width: 160px;
	margin-left: 10px;
}
/* 여기서 부터 추가 */
.dialog-body > p {
	line-height: 26px;
	font-size: 16px;
	text-align: center;
}
@media screen and (max-width: 1024px) {
	.size_large .dialog-holder {
		width: 610px;
	}
	.dialog-title p {
		text-align: center;
		line-height: 42px;
	}
	.dialog-btn-holder .view_flex {
	    justify-content: center;
	}
	.tab-toggle-label{
		height: 48px;
		line-height: 48px;
	}
}
@media screen and (max-width: 768px) {
	.dialog-holder {
		padding: 20px;
		width: 90%;
	}
	.size_large .dialog-holder {
		width: 90%;
	}
	.dialog-header .title {
		font-size: 16px;
	}
	.dialog-body {
		overflow: auto;
		margin-top: 25px;
		max-height: 420px;
	}
	.dialog-checking-summary h4 {
		font-size: 18px;
	}
	.dialog-checking-summary ul {
		padding: 16px;
	}
	.dialog-checking-summary ul li {
		font-size: 14px;
		line-height: 24px;
	}
	.dialog-btn-holder {
		margin-top: 30px;
	}
	.dialog-holder .btn.size_large.type_round {
		padding: 0 10px;
		font-size: 14px;
	}
	.dialog-holder .terms-toggle-btn-holder {
		width: auto;
	}
	.dialog-holder .sub-section-body {
		padding: 15px;
	}
	.dialog-title p {
		font-size: 18px;
		line-height: 30px;
	}
	.dialog-find-id-area,
	.dialog-register-area,
	.dialog-history-area {
		margin-top: 15px;
	}
	#dialog-8-2 .dialog-btn-holder .view_flex{
		margin-left: -10px;
	}
	#dialog-8-2 .dialog-btn-holder .view_flex .view_flex-item{
		margin-left: 10px;
	}
	#dialog-8-2 .btn.size_large.type_round,
	#dialog-8-2 .dialog-btn-holder .view_flex .view_flex-item  {
		max-width: 170px;
	}
	.dialog-register-car .thumb-cover {
		position: relative;
		width: 100%;
		height: 400px;
	}
	.dialog-register-car .thumb-cover .img-holder img {
		height: auto;
	}
	.dialog-register-car .car-summary-holder {
		padding: 12px 0 0 0;
	}
	.dialog-find-id,
	.dialog-register-time {
		padding: 14px;
		font-size: 14px;
	}
	.dialog-tell-area {
		margin-top: 15px;
	}
	.dialog-table-basic-holder table tr td,
	.dialog-table-basic-holder table tr th {
		padding: 10px 4px;
		font-size: 14px;
	}
	.dialog-holder .terms-toggle-btn-holder .tab-toggle-label {
		font-size: 14px;
	}
}

@media screen and (max-width: 480px) {
	.dialog-btn-holder .view_flex {
		margin-left: -10px;
	}
	.dialog-btn-holder .view_flex .view_flex-item{
		margin-left: 10px;
	}
	.dialog-register-car .thumb-cover {
		height: 210px;
	}
}


/* 다이얼로그 모바일 css 추가 */
.dialog-body > p {
	line-height: 26px;
	font-size: 16px;
	text-align: center;
}
#dialog-repairComplete .dialog-btn-holder .view_flex-item {
	max-width: 200px;
}
.dialog-btn-holder.n2 {
	display: flex;
	justify-content: center;
	margin-left: -20px;
}
.dialog-btn-holder.n2 .btn {
	margin-left: 20px;
	max-width: 160px;
}
#dialog-8-2 .btn.size_large.type_round,
#dialog-8-2 .dialog-btn-holder .view_flex .view_flex-item  {
	max-width: 170px;
}
#dialog-invoice .dialog-btn-holder {
	display: flex;
	justify-content: center;
	margin-left: -20px;
}
#dialog-invoice .btn.size_large.type_round {
	margin-left: 20px;
}
#dialog-repairComplete .dialog-btn-holder.n2 .btn{
	min-width: 160px;
}
#dialog-video {
	display: none;
}
#dialog-video .dialog-video-holder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);	
	z-index: 1100;
	width: 100%;
	max-width: 1200px;
}
#dialog-video .video-holder {
	position: relative; 
	padding-bottom: 56.25%; 
	padding-top: 30px; 
	height: 0; 
	overflow: hidden;
}
#dialog-video .video-holder iframe,
#dialog-video .video-holder object,
#dialog-video .video-holder embed {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}
#dialog-video .btn-dialog-close {
    display: inline-block;
    position: absolute;
    top: 0;
    right: -45px;
    width: 24px;
    height: 24px;
    background: url(/images/icon-cross-white.png) no-repeat center center;
    background-size: 24px auto;
    border-radius: 50%;
}
@media screen and (max-width: 1024px) {
	.size_large .dialog-holder {
		width: 610px;
	}
	.dialog-title p {
		text-align: center;
		line-height: 42px;
	}
	.dialog-btn-holder.n2 {
		display: flex;
		justify-content: center;
		margin-left: -20px;
	}
	.dialog-btn-holder.n2 .btn {
		margin-left: 20px;
	}
	.dialog-body {
		overflow: auto;
		max-height: 420px;
	}
	.dialog-holder .form-row:first-child {
		margin-top: 0;
	}
	#dialog-select-vehicles .dialog-body {
		white-space: nowrap;		
	}
	.dialog-holder .form-row .ui-holder {
	    min-width: auto;
	}
	.dialog-holder .request-invoice-holder,
	.dialog-holder .review-holder {
		border: 0;
	}
	#dialog-invoice .dialog-body {
		overflow: auto;
		border: 2px solid #111;
		border-radius: 16px;
		height: 320px;
		white-space: nowrap;
	}
	#dialog-video .dialog-video-holder {
		max-width: 90%;
	}
	#dialog-video .btn-dialog-close {
		top: -40px;
    	right: 0;
	}
}

@media screen and (max-width: 768px) {
	.dialog-holder {
		padding: 20px;
		width: 90%;
	}
	.size_large .dialog-holder,
	.size_middle .dialog-holder {
		width: 90%;
	}
	.dialog-header {
		padding-bottom: 20px;
	}
	.dialog-header .title {
		font-size: 16px;
	}
	.dialog-header .title {
		padding-right: 30px;
	}
	.dialog-body .section-body {
		overflow: unset;
	}
	.dialog-holder .view_flex-item {
		margin-left: 0;
	}
	.dialog-btn-holder {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	.dialog-btn-holder .view_flex{
		margin-left: -10px;
	}
	.dialog-btn-holder .view_flex-item{
		margin-left: 10px;
		max-width: initial;
	}
	.dialog-holder .btn.size_large {
		height: auto;
		padding: 0 10px;
	}
	.dialog-btn-holder{
		margin-left: -10px;
	}
	.dialog-btn-holder .btn{
		margin-left: 10px;
	}
	.dialog-holder .btn.size_large.type_round {
		padding: 0 10px;
		font-size: 14px;
	}
	#dialog-invoice .btn.size_large.type_round {
		width: 180px;
	}
	#dialog-invoice .btn.size_large.type_round {
		max-width: 160px;
	}
	#dialog-invoice .dialog-btn-holder {
		margin-left: -10px;
	}
	#dialog-invoice .btn.size_large.type_round {
		margin-left: 10px;
	}
	.dialog-holder .terms-toggle-btn-holder {
		width: auto;
	}
	.dialog-holder .terms-toggle-btn-holder .tab-toggle-label{
		font-size: 14px;
	}
	.dialog-holder .sub-section-body {
		padding: 15px;
	}
	.dialog-title p {
		font-size: 24px;
		line-height: 30px;
	}
	.dialog-holder .form-row {
		margin-top: 20px;
	}
	.request-invoice-form-holder .view_flex{
		margin-top: -20px;
		flex-wrap: wrap;
	}
	.request-invoice-form-holder .view_flex-item {
		margin-top: 20px;
		margin-left: 20px;
	}
	.request-invoice-form-holder .border-btm-line {
		padding-bottom: 40px;
	}
	.dialog-holder .ui-holder .val {
		font-size: 14px;
	}
	.dialog-checking-summary h4 {
		font-size: 18px;
	}
	.dialog-checking-summary ul {
		padding: 16px;
	}
	.dialog-checking-summary ul li {
		font-size: 14px;
		line-height: 24px;
	}
	.dialog-table-black-holder table tr td,
	.dialog-table-black-holder table tr th {
		font-size: 14px;
	}
	.dialog-holder .dialog-info-holder li dl dt {
		width: 35%;
		font-size:  14px;
	}
	.dialog-holder .dialog-info-holder li dl dd {
		width: 65%;
		font-size: 14px;
	}
	#dialog-repairComplete .dialog-btn-holder.n2 .btn{
		min-width: auto;
		max-width: auto;
	}
}



/* dialog terms CSS */
#dialog-terms .terms-content {
    position: relative;
    padding: 20px;
    margin: 0 auto 100px auto;
    box-sizing: border-box;
	font-size: 15px;
	line-height: 20px;
}
#dialog-terms .terms-title {
    margin-top: 50px;
    padding-bottom: 30px;
    line-height: 27px;
    font-size: 22px;
    font-weight: bold;
	text-align: center;
}
#dialog-terms .terms-title:first-child {
    margin-top: 0;
}
#dialog-terms .agreement-holder > dl > dt {
    padding-bottom: 10px;
    line-height: 20px;
    font-size: 15px;
    font-weight: bold;
}
#dialog-terms .agreement-holder > dl > dd {
    padding-bottom: 15px;
    line-height: 18px;
    font-size: 13px;
    font-weight: 400;
}
#dialog-terms .agreement-holder > dl > dd > ol {
    list-style-type: decimal;
}
#dialog-terms .agreement-holder > dl > dd > ol > li {
    margin-left: 13px;
    padding: 0 0 5px 0;
    font-weight: 400;
}
#dialog-terms .agreement-holder > dl > dd > ol > li > ol {
    padding: 5px 0 5px 12px;
    font-weight: 400;
    list-style: lower-roman;
}
#dialog-terms .agreement-holder > dl > dd > ol > li > ol > li {
    padding: 0 0 5px 0;
    font-weight: 400;
}
#dialog-terms .agreement-holder > dl dd ul {
    padding: 5px 0 5px 18px;
    font-weight: 400;
    list-style: disc;
}
#dialog-terms .agreement-holder > dl dd ul li {
    padding: 0 0 0 0;
    font-weight: 400;
}


/* 임시 적용 */
#dialog-terms .terms-content {
	/*width: 580px;*/
/*     width: 760px; */
	font-size: 12px;
}

/* 20220805 kms */
#dialog-terms .agreement-summary-holder {
	padding : 5px 0 5px 0;
	font-weight :bold;
}
#dialog-terms h6 {
	font-weight :bold;
	padding :3px 0 1px 0;
}
#dialog-terms li {
	font-weight :bold;
	padding :5px 0 5px 0px;
}
#dialog-terms .agreement-list {
	padding-bottom :5px;
}
#dialog-terms p{
	padding : 5px 0 5px 0px;
	font-weight :normal!important;
	font-size :13px;
}
#dialog-terms dt{
	padding: 5px 0 5px 0;
	font-weight : bold;
}
#dialog-terms .agreement-holder table {
	border: 0;
}
#dialog-terms .agreement-holder table th{
   text-align: left;
}
#dialog-terms body {
  counter-reset: section;  
 }
#dialog-terms ul li:before {
    content: "-";
	padding-right: 5px;
}
#dialog-terms .agreement-holder-bis li {
	font-weight: normal;
	padding: 0 0 5px 0;
}
#dialog-terms .font-weight-normal {
	font-weight: normal;
}
#dialog-terms .agreement-seller-table {
    width: 100%;
    border: 1px solid #ddd;
	margin-top: 15px;
	margin-bottom: 15px;
	border-collapse: collapse;
	border-spacing: 0;
}
#dialog-terms .agreement-seller-table tr td,
#dialog-terms .agreement-seller-table tr th {
    padding: 5px 8px;
	border: 1px solid #ddd;
	vertical-align: middle;
	text-align: center;
}
#dialog-terms .agreement-seller-table tr th {
    background-color: #f9f9f9;
    text-align: center;
	font-weight: bold;
}
#dialog-terms .li-marker-bold > li::marker {
	font-weight: bold;
}
#dialog-terms ul {
	list-style: none;
}
#dialog-terms dd {
	margin-left: 13px;
}
#dialog-terms .agreement-list-holder dd {
	margin-left: 0;
}
#dialog-terms .agreement-summary li{
	padding: 0 0 5px 0;
}
#dialog-terms .agreement-summary ol{
	margin-left: 13px;
}
#dialog-terms .agreement-list-details	ol{
	margin-left: 13px;
}
#dialog-terms .agreement-list-holder li {
	font-weight: normal;
	padding: 0 0 5px 0;
}
#dialog-terms .list-style-roman {
	list-style: upper-roman;
}
#dialog-terms .dialog-holder {
    width: 50%;
    background-color: #fafafa;
}
#dialog-terms .dialog-body {
    height: 500px;
    overflow: auto;
    border: 1px solid #ddd;
    background-color: #fff;
}

@media screen and (max-width: 1024px) {
	#dialog-terms .dialog-holder {
	    width: 70%;
	}
}
@media screen and (max-width: 768px) {
	#dialog-terms .dialog-holder {
	    width: 90%;
	}
}