@charset "utf-8";

#header .header_title { display:none;}

.used_wrap {padding:20px;}

.progress_wrap {width:100%; float:left; margin-bottom:30px; position:relative;}

.progress {
    width: 100%;
    height: 10px;
    background-color: #f3f3f3;
    border: 0;
    border-radius: 18px;
	position:relative; z-index:1;
}

.progress::-webkit-progress-bar {
    background-color: #f3f3f3;
}

.progress_now {
	z-index:2;
	position:absolute; top:0; left:0;
	height:10px;
	border-radius: 18px;
    background-image: linear-gradient(60deg, #13E2DA, #655bcb);	
}

.used_title {width:100%; float:left; text-align:left; font-size:28px; font-weight:600; border-bottom:1px solid #eee; padding-bottom:40px; margin-bottom:40px;}

.used_step {width:100%; float:left; text-align:left; font-size:20px; font-weight:600; margin-bottom:20px; display: flex; align-items: flex-start;}
.used_step .stpe_icon { display:inline-block; margin-right:6px; width:24px; height:24px; border-radius:50%; text-align:center; font-size: 16px; line-height: 24px;}

.used_con { width:100%; float:left; display:flex;flex-wrap: wrap; justify-content:flex-start; margin-bottom:30px;}
.used_con .used_con_item { width:calc(33% - 5px); margin-right:7px; padding:14px 10px; text-align:center; font-size:16px; border:1px solid #ccc; border-radius:6px; margin-bottom:8px; display: flex; align-items: center; justify-content: center;}
.used_con .used_con_item:nth-child(3n+3) { margin-right:0;}
.used_con .used_con_item img { width:100%; max-width: 120px; display:block; margin: 0 auto 14px;}

.used_con.maker { width:100%; float:left; display:flex;flex-wrap: wrap; justify-content: space-between; margin-bottom:30px;}
.used_con.maker .used_con_item { width:100%; padding:10px 10px; text-align:center; font-size:18px; border:1px solid #ccc; border-radius:6px; margin-bottom:10px; display: flex; align-items: center; justify-content: center;}
.used_con.maker .used_con_item img { height:34px; width:auto; display:inline-block; margin: 0 5px 0 0;}
.used_con.maker .maker_name { width:80px; margin-left:5px; text-align:left; font-weight:600;}

.used_con.maker .used_con_item.grade { font-size: 16px; text-align: left; display: block; margin-right: 0;}
.used_con.maker .used_con_item.grade .grade_noti { display:inline-block; font-size:14px; color:#999; margin-left:6px;}

details,
summary { width:100%; float:left; }

summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
    display: none;
}
summary {
	position:relative;
	margin-bottom:10px;
    list-style-type: none; /* 그 외의 브라우저용 사용자 정의 스타일 */ 
}

summary span {
	display:inline-block; margin-left:10px;
	color:#999;
    transition: .25s transform;
}

summary span i {vertical-align: -4px;}

details[open] summary span {
    transform: rotateZ(180deg);
}


.used_grade_icon {display:inline-block; padding:2px 6px; color:#fff;border-top-right-radius: 50px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; line-height: 30px; font-size:18px; margin-right:4px; font-weight:800; }

.used_grade_icon.grade_s { background-color:#cb9b1f;}
.used_grade_icon.grade_a { background-color:#4bd691;}
.used_grade_icon.grade_b { background-color:#37a9ff;}
.used_grade_icon.grade_c { background-color:#5a6ef5;}
.used_grade_icon.grade_f { background-color:#666;}


.used_grade_wrap {}

.used_grade { width:100%; padding:10px; border:1px solid #000; border-radius:10px; margin-bottom:10px;}

.used_grade.grade_s { border-color:rgba(203,155,31,.5);}
.used_grade.grade_s .used_grade_info_title {color:#cb9b1f;}

.used_grade.grade_a { border-color:rgba(75,214,145,.5);}
.used_grade.grade_a .used_grade_info_title {color:#4bd691;}

.used_grade.grade_b { border-color:rgba(55,169,255,.5);}
.used_grade.grade_b .used_grade_info_title {color:#37a9ff;}

.used_grade.grade_c { border-color:rgba(90,110,245,.5);}
.used_grade.grade_c .used_grade_info_title {color:#5a6ef5;}

.used_grade.grade_f { border-color:rgba(102, 102, 102, .5);}
.used_grade.grade_f .used_grade_info_title {color:#666;}


.used_grade .used_grade_info {display:flex; display: flex; justify-content: space-between; align-items: center;}
.used_grade .used_grade_info .used_grade_info_title {font-size:16px; font-weight:700;}
.used_grade .used_grade_info .used_grade_info_title .grade_guide { display: inline-block; font-size: 20px; color:#b9b9b9; margin-left: 2px; font-weight: 400; vertical-align: -3px;}

.used_grade .used_grade_info .used_grade_info_price {font-size:20px; font-weight:800;}


.used_grade .used_device { padding-left:30px; font-size:13px; color:#999; font-weight:500;}
.used_grade .used_grade_state { padding-left:30px; padding-top:15px; font-size:14px; color:#000; font-weight:600;}