@charset "UTF-8";


/*--------------------------------------------

recommend - common

----------------------------------------------*/

section.rcm-visual,
section.rcm-benefit,
section.rcm-cardBenefit,
section.rcm-progress,
section.rcm-intro,
section.rcm-result {
	width:100%;
	font-family:var(--font);
}

section.rcm-intro,
section.rcm-progress {
	background:var(--color-gray);
}

.rcm-title {
	display:flex;
	flex-direction:column;
	width:100%;
	justify-content:center;
}

.rcm-title .txt {
	font-size:var(--font-mid);
	text-align:center;
}

.rcm-title .tit {
	font-size:40px;
	text-align:center;
}

.rcm-btn {
	min-width:200px;
	font-size:var(--font-normal);
	border-radius:var(--radius-big);
	padding:15px 30px;
	text-align:center;
	margin:0 10px;
	cursor:pointer;
}

.rcm-btn:disabled {
	background:#dadada;
	color:#fff;
	pointer-events: none;
}

.btn-b {
	background:var(--color-black);
	color:#fff !important;
}

.btn-w {
	background:transparent;
	color:var(--color-txt) !important;
	border:1px solid var(--color-black);
}

.rcm-subtit {
	width:100%;
	padding-bottom:50px;
}

.rcm-subtit .tit {
	font-size:var(--font-big);
	text-align:center;
}

/*--------------------------------------------

recommend - main

----------------------------------------------*/


/* 렌탈 키비주얼 */

section.rcm-visual .inner {
	padding:120px 0px 20px;
}

.rcm-visual .rcm-title .tit {
	padding-bottom:20px;
}

.rcm-visual .rcm-title .txt {
	padding-bottom:40px;
}

.rcm-visual .rcm-title .rcm-btn {
	align-self:center;
}

.rcm-visual-wrap {
	position:relative;
	display:flex;
	flex-direction:column;
	width:800px;
	margin:100px auto;
	gap:30px;
	overflow:hidden;
}

.rcm-visual-wrap:before {
	content:"";
	position:absolute;
	width:30%;
	height:100%;
	left:0px;
	top:0px;
	background:linear-gradient(to right, #fff, transparent);
	z-index:1;
}

.rcm-visual-wrap:after {
	content:"";
	position:absolute;
	width:30%;
	height:100%;
	right:0px;
	top:0px;
	background:linear-gradient(to left, #fff, transparent);
	z-index:1;
}

.rcm-visual-wrap .rcm-visual-top,
.rcm-visual-wrap .rcm-visual-bottom {
	width:100%;
}

.rcm-visual-wrap .rcm-visual-top .rcm-visual-track,
.rcm-visual-wrap .rcm-visual-bottom .rcm-visual-track {
	display:flex;
	gap:30px;
}

.rcm-visual-wrap .rcm-visual-top .rcm-visual-track li,
.rcm-visual-wrap .rcm-visual-bottom .rcm-visual-track li {
	display:flex;
	width:150px;
	height:150px;
	border-radius:var(--radius-mid);
	justify-content:center;
	flex-shrink:0;
	margin:0 15px;
}

.rcm-visual-wrap .rcm-visual-top .rcm-visual-track li img,
.rcm-visual-wrap .rcm-visual-bottom .rcm-visual-track li img {
	width:100px;
	height:auto;
	align-self:center;
}


/* color */

.visual01 {
	background-color:#fad5d5;
}

.visual02 {
	background-color:#FEF5C9;
}

.visual03 {
	background-color:#C3FBF7;
}

.visual04 {
	background-color:#84C7DF;
}

.visual05 {
	background-color:#EADFEB;
}

.visual06 {
	background-color:#EED6C8;
}

.visual07 {
	background-color:#A8B1AF;
}

.visual08 {
	background-color:#DAF7E1;
}

.visual09 {
	background-color:#AFC5F0;
}

.visual10 {
	background-color:#F5DEF8;
}


/* 렌탈혜택 */

section.rcm-benefit .inner {
	padding:0px 0px 80px;
}

.rcm-benefit-wrap {
	position:relative;
	width:100%;
}

.rcm-benefit-track {
	width:100%;
	display:flex;
	gap:30px;
	overflow:hidden;
}

.rcm-benefit-track li {
	width:calc(278px - 60px);
	background:linear-gradient(to left bottom, #fbfbfb, #f7f7f7);
	border-radius:var(--radius-mid);
	padding:30px;
	flex-shrink:0;
	margin:0 15px;
	height: 163px;
}

.rcm-benefit-track li .benefit-icon {
	display:flex;
	width:50px;
	height:50px;
	background:#fff;
	color:var(--color-primary);
	justify-content:center;
	border-radius:50px;
}

.rcm-benefit-track li .benefit-icon svg.icon {
	width:auto;
	height:24px;
	align-self:center;
}

.rcm-benefit-track li .benefit-ctn {
	display:flex;
	flex-direction:column;
	gap:15px;
	margin-top:20px;
}

.rcm-benefit-track li .benefit-ctn .subtit {
	font-size:var(--font-mid);
}


.benefit-pager {
    width:500px;
    margin:40px auto 0px;
}

.benefit-pager .benefit-progress {
    width:100%;
    height:3px;
    margin-right:20px;
    align-self:center;
    background-color:rgba(0,0,0,0.2);
    background-image:linear-gradient(to right, #555, #555);
    background-size:0 100%;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}



/* 렌탈 카드혜택 */

section.rcm-cardBenefit .inner {
	padding:0px 0px 80px;
}

.rcm-cardBenefit-track {
	display:flex;
	gap:30px;
}

.rcm-cardBenefit-track li {
	width:calc(100% / 5);
	padding:30px 20px;
	border-radius:var(--radius-small);
	border:1px solid var(--color-line);
	box-sizing:border-box;
}

.rcm-cardBenefit-track li .benefit-img {
	width:40px;
	height:40px;
	background-size: 35px auto;
	background-position:center center;
	background-repeat:no-repeat;
}

.benefit-img.woori {
	background-image:url(/pc/images/recommend/woori.png);
}

.benefit-img.ss {
	background-image:url(/pc/images/recommend/samsung.png);
	background-size: 40px auto !important;
}

.benefit-img.lotte {
	background-image:url(/pc/images/recommend/lotte.png);
	background-size: 30px auto !important;
} 

.benefit-img.kb {
	background-image:url(/pc/images/recommend/kb.png);
	background-size: 35px auto !important;
} 

.benefit-img.hana {
	background-image:url(/pc/images/recommend/hana.png);
	background-size: 35px auto !important;
} 

.rcm-cardBenefit-track li .benefit-info {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-top:20px;
}

.rcm-cardBenefit-track li .benefit-info .subtit {
	font-size:var(--font-mid);
	font-weight:500;
}

.rcm-cardBenefit-track li .benefit-info .txt {
	font-size:var(--font-small);
	color:var(--color-mid-gray);
}

.rcm-cardBenefit-track li .benefit-info a {
	display:flex;
	font-size:var(--font-small);
	color:var(--color-mid-gray);
	gap:5px;
}

.rcm-cardBenefit-track li .benefit-info a span {
	align-self:center;
}

.rcm-cardBenefit-track li .benefit-info a svg.icon {
	width:12px;
	height:12px;
	align-self:center;
}



/*--------------------------------------------

 recommend - intro
 
 ---------------------------------------------*/

.rcm-intro .inner {
	min-height:700px;
	padding:100px 0px;
}

.rcm-intro-track {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	width:530px;
	gap:40px;
	flex-wrap:wrap;
	margin:80px auto 0px;
}

.rcm-intro-track li a {
	background:#fff;
	display:flex;
	flex-direction:column;
	width:150px;
	height:150px;
	border-radius:var(--radius-small);
	box-sizing:border-box;
}

.rcm-intro-track li a:hover {
	border:2px solid var(--color-txt);
}

.rcm-intro-track li a .intro-icon {
	width:100px;
	height:60px;
	margin:20px auto;
	text-align:center;
	filter: grayscale(100%) opacity(40%);
}

.rcm-intro-track li a:hover .intro-icon {
	filter:none;
}

.rcm-intro-track li a .intro-icon img {
	width:60px;
}

.rcm-intro-track li a .intro-name {
	color:var(--color-darkgray);
	text-align:center;
}

.rcm-intro-track li a:hover .intro-name {
	color:var(--color-txt);
	font-weight:700;
}

/*--------------------------------------------

 recommend - progress
 
 ---------------------------------------------*/

.rcm-progress .inner {
	padding:100px 0px;
}

/* progress bar */

.progressbar-area {
	width:100%;
	padding:20px 0px 50px;
}

.progress-track {
	background:#fff;
	width:400px;
	height:8px;
	margin:0 auto;
	border-radius:var(--radius-small);
	overflow:hidden;
}

.progress-fill {
	width:100%;
	height:8px;
	background:var(--color-primary);
	border-radius:var(--radius-small);
}

.rcm-question-title {
	display:flex;
	flex-direction:column;
	width:100%;
	gap:20px;
}

.rcm-question-title .category {
	align-self:center;
}

.rcm-question-title .question {
	font-size:28px;
	align-self:center;
}

.rcm-question-title .desc {
	font-size:var(--font-small);
	color:var(--color-mid-gray);
	align-self:center;
}

.rcm-question-track {
	width:520px;
	display:flex;
	flex-direction:column;
	gap:20px;
	margin:50px auto;
}

.rcm-question-track .rcm-question-item {
	width:100%;
}

.rcm-question-item label.select-option {
	display:flex;
	background:#fff;
	color:var(--color-mid-gray);
	border-radius:var(--radius-small);
	border:2px solid #fff;
	padding:20px;
	cursor:pointer;
	box-sizing:border-box;
} 

.rcm-question-item label.select-option.on {
	color:var(--color-txt);
	border:2px solid var(--color-black);
}


.rcm-question-item label.select-option.on .main-text {
	font-weight:500;
}

label.select-option .card-content {
	display:flex;
	gap:15px;
}

label.select-option .card-content .check-icon {
	display:flex;
	justify-content:center;
	color:#dadada;
}

.rcm-question-item label.select-option.on .check-icon {
	color:var(--color-txt);
	font-weight:900;
}

.check-icon svg.icon {
	width:14px;
	align-self:center;
	stroke:#dadada;
	stroke-width: 1;
}

.rcm-question-item label.select-option.on .check-icon svg.icon {
	stroke:var(--color-txt);
}

label.select-option .card-content .text-group {
	display:flex;
	flex-wrap:wrap;
	align-self:center;
	gap:5px;
}

label.select-option .card-content .text-group .sub-text {
	color:var(--color-darkgray);
	align-self:center;
}

.rcm-btn-wrap {
	display:flex;
	margin:0 auto;
	justify-content:center;
}

.rcm-btn-wrap .rcm-prev-btn {
	max-width:120px;
}


/*--------------------------------------------

 recommend - result
 
 ---------------------------------------------*/

.rcm-result .inner {
	padding:100px 0px;
}

.rcm-result .inner .rcm-title {
	gap:20px;
}

.rcm-result-wrap {
	margin-top:80px;
}

.rcm-result-track {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	margin-bottom:80px;
}

.rcm-result-track .rental-product-item {
	width:calc(100% / 4 - 20px);
	margin:0 10px;
}

.rcm-result-track .rental-product-item a {
	display:flex;
	flex-direction:column;
	gap: 15px;
}

.rental-product-item .rental-product-thum {
	display:flex;
	width:100%;
	padding:20px;
	box-sizing:border-box;
	border-radius:var(--radius-small);
	border:1px solid var(--color-line);
}

.rental-product-item .rental-product-thum img {
	width:100%;
}

.rental-product-item .rental-product-info {
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:0 10px;
}

.rental-product-item .rental-product-info p.product-name {
	display: -webkit-box;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -box-orient: vertical;
    font-weight: 500;
    font-family: var(--font);
}

.rental-product-item .rental-product-info .product-code {
	font-size:var(--font-small);
	color:var(--color-darkgray);
}

.rental-product-item .rental-product-price {
	display:flex;
	flex-direction:column;
	gap:10px;
	padding:0 10px 10px;
}

.rental-product-item .rental-product-price .rental-price {
	display:flex;
	gap:10px;
}

.rental-product-price .rental-price .price {
	display:flex;
	margin-left:auto;
	gap:10px;
}

.rental-product-price .rental-price .price li {
	display:flex;
	gap:5px;
	align-self:center;
}

.rental-product-price .rental-price .price li .rg {
	color:var(--color-mid-gray);
	font-size:var(--font-small);
	text-decoration:line-through;
	align-self:center;
}

.rental-product-price .rental-price .price li b.num {
	font-size:var(--font-mid);
	font-weight:900;
    margin-top: -4px;
}

.rental-product-item .rental-product-price .full-price {
	display:flex;
	justify-content:space-between;
}

.rental-product-price .full-price .price b.num {
	font-size:var(--font-mid);
	font-weight:900;
    margin-top: -4px;
}

.rcm-result .rcm-btn-wrap .btn-cs {
	background:transparent;
	color:var(--color-primary);
	min-width:140px;
	border:1px solid var(--color-primary);
}

.rcm-result .rcm-btn-wrap .btn-w {
	min-width:140px;
}

button.btn.black {
    background: #312f2d;
    color: #fff;
    border: none;
    border-radius: 30px;
    width: 48%; 
    padding: 0px; 
    min-width: unset !important;
    height: 58px;
    line-height: 56px;
    cursor: pointer;
}

.btn_typeC {
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    -webkit-transtion: .3s ease;
    -moz-transtion: .3s ease;
    transition: .3s ease;
    font-weight: 300;
    letter-spacing: -1px;
    vertical-align: middle;
    background: #fff;
    padding: 0 40px;
    height: 58px;
    line-height: 56px;
    border: 1px solid #c7c8c4;
    font-size: 17px;
    border-radius: 30px;
    width: 48%;
    padding: 0px;
    min-width: unset !important;
    cursor: pointer;
}

.recommend_tit {
	display: inline-block;
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
}