@charset "utf-8";

.intro-title { transition: all 0.7s; display: inline-block; position: relative; margin-bottom: 90px; transform: scale(0.7); font-size: 50px; font-weight: bold; opacity: 0; } 
.intro-title:after { content: ""; background: var(--page-theme-color); position: absolute; bottom: -57px; width: 50%; height: 5px; left: 50%; transform: translateX(-50%); } 
#success-case { text-align: center; padding: 200px 0 100px; } 
#success-case .case-wrapper { margin: 50px 0; } 
#success-case .case-wrapper .case-list { float: left; width: 23%; margin: 0 1%; } 
#success-case .case-wrapper .case-list > img { border: 1px solid #eee; object-fit: cover; width: 100%; height: 222px; cursor: pointer; } 
#success-case .case-wrapper .case-list .cont { text-align: left; padding: 20px 0; line-height: 1.3; color: #757575; } 
#success-case .case-wrapper .case-list .cont .list-title { margin-bottom: 10px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
#success-case .case-wrapper .case-list .cont .heart-ico { cursor: pointer; } 
#success-case .case-wrapper .case-list .cont .heart-ico.active { color: var(--page-theme-color); } 
#success-case .case-wrapper .case-list .cont .etc { font-size: 13px; margin-top: 10px; } 
#success-case form { display: inline-block; vertical-align: middle; } 
#success-case form .input-wrapper { display: inline-block; border: 1px solid #e5e5e5; position: relative; width: 220px; height: 34px; } 
#success-case form .input-wrapper input { border: 0 none; position: absolute; left: 0; top: 0; width: calc(100% - 30px); height: 100%; padding-left: 5px; } 
#success-case form .input-wrapper button { position: absolute; right: 0; top: 0; width: 30px; height: 100%; cursor: pointer; background: none; } 
#success-case form .input-wrapper button i { font-size: 17px; color: #828282; } 

#success-case .success-case-content { transition: all 0.5s; opacity: 0; transform: translateY(70px); } 
#success-case.active .intro-title { opacity: 1; transform: scale(1); } 
#success-case.active .success-case-content { opacity: 1; transform: translateY(0); } 

.category-and-search .category-wrap { display: inline-block; margin-right: 20px; } 
.category-and-search .category-wrap li { display: inline-block; cursor: pointer; font-size: 16px; position: relative; padding: 0 10px; } 
.category-and-search .category-wrap li.active a{ color: var(--page-theme-color); font-weight: bold; } 
.category-and-search .category-wrap li:after { content: ""; position: absolute; width: 1px; height: 100%; background: #363636; right: 0; top: 50%; transform: translateY(-50%); } 
.category-and-search .category-wrap li:last-child:after {width:0;} 

/* 미디어 쿼리 */
@media (max-width: 1200px) { /* 태블릿,모바일 레이아웃 변경 */
 #success-case .case-wrapper { padding-top: 150px; } 
 #success-case .case-wrapper .case-list { width: 48%; } 
 #success-case .case-wrapper .case-list > img { height: 40vw; min-height: 200px; } 
 #success-case .success-case-content { position: relative; } 
 #success-case .category-and-search { position: absolute; top: 0; right: 1%; width:100%;} 
 .category-and-search .category-wrap {
	position:absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;}
 .category-and-search .category-wrap li{margin-bottom:10px;}
 #success-case form .input-wrapper {margin-top:50px;}
}
@media (max-width: 840px) {
 .category-and-search .category-wrap li:after{width:0;}
 #success-case form .input-wrapper{margin-top:85px;}

}
@media (max-width: 500px){
 .intro-title { font-size: 40px; } 
}