[class*='card-box-']{
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--gray-300);
    box-shadow: var(--dropShadow-elevation-le3);
}
[class*='oneline-list-box-']{}
[class*='oneline-list-box-']>.row{
    margin: 0;
}
[class*='oneline-list-box-']>.row>div{
    border-bottom: 1px solid #ccc;
}
[class*='oneline-list-box-'] .box{
    padding: 16px 0;
}
[class*='oneline-list-box-'] .box:last-child{}
[class*='oneline-list-box-'] .box>.row{
    margin: 0 -8px;
}
[class*='oneline-list-box-'] .box>.row>div{
    padding: 0 8px;
    /* border-bottom: 1px solid #ccc; */
}
[class*='oneline-list-box-'] .box>.row>div.checkbox{
    flex-grow: 0;
    display: flex;
    /* border: 0 !important; */
}
[class*='oneline-list-box-'] .box>.row>div.btnbox{
    flex-grow: 0;
    display: flex;
    white-space: nowrap;
    flex-basis: 120px;
    max-width: 120px;
    justify-content: end;
}
[class*='oneline-list-box-'] .box>.row>div.imgbox{
    flex-grow: 0;
    display: flex;
    white-space: nowrap;
    flex-basis: 154px;
    max-width: 154px;
}
[class*='oneline-list-box-'] .box>.row>div.imgbox .imgs{
    border: 1px solid var(--Elements-Line);
    border-radius:8px;
    position: relative;
    overflow:hidden;
    width: 100%;
    height: 100%;
}
[class*='oneline-list-box-'] .box>.row>div.imgbox .imgs>img{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}
[class*='oneline-list-box-'] .txt1{}
[class*='oneline-list-box-'] .txt1>em{
    font-size: inherit;
    color: var(--blue-500);
    font-weight: 600;
}
[class*='oneline-list-box-'] .txt2{}
[class*='oneline-list-box-'] .txt2>em{
     font-size: inherit;
    color: var(--blue-500);
}
.oneline-list-box-2 {}
.oneline-list-box-2>.row {
    margin: -2px;
}
.oneline-list-box-2>.row>div {
    padding: 2px;
    border: 0;
}
.oneline-list-box-2 .box {
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor:pointer;
}
.oneline-list-box-2 .box .txts {}
.oneline-list-box-2 .box .txts .txt1 {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 125%; /* 17.5px */
    margin-bottom: 4px;
}
.oneline-list-box-2 .box .txts>ul {
    display: flex;
    align-items: center;
}
.oneline-list-box-2 .box .txts>ul>li {
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%; /* 15.6px */
}
.oneline-list-box-2 .box>i{font-size: 18px;}
.oneline-list-box-2 .box:hover{background:var(--blue-5per)}
.oneline-list-box-2 .box.active{background:var(--blue-500)}
.oneline-list-box-2 .box.active .txts .txt1,
.oneline-list-box-2 .box.active .txts>ul>li,
.oneline-list-box-2 .box.active .txts>ul>li>*,
.oneline-list-box-2 .box.active>i{color:#fff}
/*img card box*/

[class*="card-box-img-txt-"]{padding: 0;text-align: center;overflow: visible;position: relative;/* height: 294px; */border: 0;border: 1px solid var(--white-5per);background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
/* 배경블러/연함/sm-LV2 */backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);box-shadow: var(--dropShadow-elevation-le2);}
[class*="card-box-img-txt-"]>.checked-icon{
    position: absolute;
    right: -13px;
    top: -16px;
    z-index: 10;
    background: #fff;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #FEFEFE;
    color: var(--DarkMode04-50);
    font-size: 24px;
}
[class*="card-box-img-txt-"].active>.checked-icon{color: var(--blue-500);}
[class*="card-box-img-txt-"]>div{
    line-height: 1;
    font-size: 0;
    border-radius: 16px;
    overflow: hidden;
}
[class*="card-box-img-txt-"]>div:first-child{
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
    margin-bottom: 8px;
}
[class*="card-box-img-txt-"]>div:last-child{
     border-top-right-radius:0;
    border-top-left-radius:0;
}
[class*="card-box-img-txt-"]:hover{
    box-shadow: var(--dropShadow-elevation-subtle-le5);
}
[class*="card-box-img-txt-"] .img1{
    height: auto;
    margin: auto;
    width: 100%;
    height: 196px;
}
[class*="card-box-img-txt-"] .position-relative>i{
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
    color: #fff;
    font-size: 56px;
}
[class*="card-box-img-txt-"] .imgbox{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid var(--Elements-Line);
    overflow: hidden;
}
[class*="card-box-img-txt-"] .txt-box{padding: 16px 24px;/* height: 294px; */border-top-left-radius: 0;border-top-right-radius: 0;/* border: 1px solid var(--Elements-Line); */border-top: 0;}
[class*="card-box-img-txt-"].active>div{border-color: var(--blue-500);}
[class*="card-box-img-txt-"] .txt1{
    font-weight: 600;
    font-size: 15px;
    line-height: 120%;
    text-align: left;
    /* padding: 16px 0; */
    padding-bottom: 16px;
    font-style: normal;
    font-weight: 600;
}
[class*='card-box-img-txt-'] .txt1>em{
    font-size: inherit;
    color: var(--blue-500);
    font-weight: 600;
}
[class*="card-box-img-txt-"] .info-box-1{
    /* padding: 16px 0; */
    border-top: 1px solid var(--unnamed, rgba(108, 114, 117, 0.25));
    padding-bottom: 8px;
    border: 0;
}
[class*="card-box-img-txt-"] .info-box-1>.row{
    margin: -2px;
    justify-content: space-between;
}
[class*="card-box-img-txt-"] .info-box-1>.row>div{
    padding: 2px;
    white-space: normal;
    text-align: left;
}
[class*="card-box-img-txt-"] .txt2{
    font-weight: 300;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin-bottom: 16px;
    color: var(--DarkMode04);
    
/* 제목-본문/13pt/Light */
    text-align: left;
    height: 160.8px;
}
[class*="card-box-img-txt-"] .imgbox+.txt-box .txt1{
    padding-bottom:16px;
    padding-bottom: 8px;
}
[class*="card-box-img-txt-"] .imgbox+.txt-box .txt2{
      line-height: 1.2;
      height: 3.6em;
      text-align: left;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
}
[class*="card-box-img-txt-"] .txt2>em{
     font-size: inherit;
    color: var(--blue-500);
}
[class*="card-box-img-txt-"] .txt3{
    display: flex;
    align-items: center;
    line-height: 100%;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
}
[class*="card-box-img-txt-"] .txt3>i{margin-right:2px;color: var(--DarkMode01);}
[class*="card-box-img-txt-"] .txt3>span{color: var(--DarkMode04);font-family: Pretendard;font-style: normal;font-weight: 600;font-size: inherit;line-height: 1;margin-right: 2px;}
.card-box-img-txt-2{
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
/* 배경블러/연함/sm-LV2 */
    box-shadow: var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    overflow: hidden;
}
.card-box-img-txt-2 .txt-box{
    padding: 16px;
    margin-bottom: 16px;
}
.card-box-img-txt-2 .txt1{padding-bottom: 4px;}
.card-box-img-txt-2 .txt2{
    display: block;
    height: auto;
    padding-bottom: 16px;
    margin-bottom: 16px;
}
.card-box-img-txt-2 .txt3{
    width: 100%;
    white-space: nowrap;
    align-items: flex-start;
}
.card-box-img-txt-2 .txt3>i,
.card-box-img-txt-2 .txt3>em{margin-right:4px;color: var(--gray-600);}
.card-box-img-txt-2 .txt3>span{white-space: normal;color: var(--gray-600);font-weight: 300;margin: 0;}
.card-box-img-txt-2 .txt3>em{font-weight:600;}
.card-box-img-txt-2 .txt3>span,
.card-box-img-txt-2 .txt3>em{font-size:10px;line-height: 135%; /* 13.5px */}
.card-box-img-txt-2 .info-box-1{padding:0;}
@media (min-width: 1216px) {
    [class*="card-box-img-txt-"] .txt1{font-size: 18px;}
    [class*="card-box-img-txt-"] .txt3{font-size: 14px;}
    .card-box-img-txt-2>div:first-child{}
    .card-box-img-txt-2>div:first-child img{height:240px}
    .card-box-img-txt-2 .txt2{font-size:16px;}
    .card-box-img-txt-2 .txt3>i{font-size:18px;}
    .card-box-img-txt-2 .txt3>span,
    .card-box-img-txt-2 .txt3>em{font-size:14px;line-height: 130%; /* 13.5px */}
    .card-box-img-txt-2 .info-box-1>.row{margin:-4px;}
    .card-box-img-txt-2 .info-box-1>.row>div{padding:4px;}
}
.card-box-img-txt-list-1 {padding: 16px;}
.card-box-img-txt-list-1>.pc-img{display:none}
.card-box-img-txt-list-1>div{display: flex;flex-wrap: wrap;border-radius: 0;}
.card-box-img-txt-list-1>div>.imgbox{
    flex-grow: 0;
    flex-basis: 96px;
    height: 70px;
    border-radius: 16px;
    overflow: hidden;
}
.card-box-img-txt-list-1>div>.imgbox>img{width:100%;height:100%;}
.card-box-img-txt-list-1>div>.txt-box{
    flex-grow: 0;
    padding: 0;
    padding-left: 16px;
    flex-basis: calc(100% - 96px);
    max-width: calc(100% - 96px);
}
.card-box-img-txt-list-1>div>.imgbox+.txt-box .txt1{
    padding-bottom: 4px;
}
.card-box-img-txt-list-1>div>.imgbox+.txt-box .txt2{
    margin: 0;
}
.card-box-img-txt-list-1>div>.info-box-1{
    flex-grow: 1;
    max-width: 100%;
    flex-basis: 100%;
    padding-bottom: 0;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--gray-200);
}
.card-box-img-txt-list-1>div>.info-box-1>.row{
    justify-content: left;
    margin: 0 -4px;
    flex-wrap: nowrap;
    margin-bottom: 8px;
    align-items: start;
}
.card-box-img-txt-list-1>div>.info-box-1>.row:last-child{/* margin: 0; */margin-bottom:0}
.card-box-img-txt-list-1>div>.info-box-1>.row>div{
    flex-grow: 0;
    white-space: nowrap;
    padding: 0 4px;
}
.card-box-img-txt-list-1>div>.info-box-1>.row>div:first-child{
    flex-basis: 48px;
    max-width: 48px;
}
.card-box-img-txt-list-1>div>.info-box-1>.row>div:first-child>[class*="btn-"]{
    width: 100%;
}
.card-box-img-txt-list-1>div>.info-box-1>.row>div:last-child{flex-basis: calc(100% - 48px);max-width: calc(100% - 48px);}
.card-box-img-txt-list-1>div>.info-box-1>.row>div:last-child>.txt3{white-space: normal;}
.card-box-img-txt-list-2{
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
/* 배경블러/연함/sm-LV2 */
    box-shadow: var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--gray-200);
}
.card-box-img-txt-list-2.active{border:2px solid var(--blue-500)}
.card-box-img-txt-list-2>.imgbox{
    height: 195px;
    margin-bottom: 0 !important;
    border: 0;
    border-radius: 0;
}
.card-box-img-txt-list-2>.imgbox>img{
    width: 100%;
    object-fit: none;
    border-radius: 8px 8px 0 0 ;
}
.card-box-img-txt-list-2>.txtbox{}
.card-box-img-txt-list-2>.txtbox .txt1{padding: 16px 24px;}
@media (min-width: 1216px) {
    .card-box-img-txt-list-1 {
    display: flex;
    padding: 24px;
    border-radius: 16px;
    overflow: hidden;
}
    .card-box-img-txt-list-1>.pc-img{
    display: block;
    margin: -24px;
    margin-right: 0;
    height: 170px;
}
    .card-box-img-txt-list-1>div{
    padding-left: 24px;
}
    .card-box-img-txt-list-1>div>.imgbox{
    display: none;
}
    .card-box-img-txt-list-1>div>.imgbox>img{}
    .card-box-img-txt-list-1>div>.txt-box{
    padding: 0;
}
    .card-box-img-txt-list-1>div>.imgbox+.txt-box .txt1{}
    .card-box-img-txt-list-1>div>.imgbox+.txt-box .txt2{
    height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .card-box-img-txt-list-1>div>.info-box-1{}
    .card-box-img-txt-list-1>div>.info-box-1>.row{}
    .card-box-img-txt-list-1>div>.info-box-1>.row:last-child{}
    .card-box-img-txt-list-1>div>.info-box-1>.row>div{}
    .card-box-img-txt-list-1>div>.info-box-1>.row>div:first-child{}
    .card-box-img-txt-list-1>div>.info-box-1>.row>div:first-child>[class*="btn-"]{}
    .card-box-img-txt-list-1>div>.info-box-1>.row>div:last-child{}
    .card-box-img-txt-list-1>div>.info-box-1>.row>div:last-child>.txt3{}
.card-box-img-txt-list-2{}
}
/*//*/
/*listbox-*/
[class*="listbox-"]{}
[class*="listbox-"]>.row{margin: -16px;}
[class*="listbox-"]>.row>div{padding: 16px;}
.listbox-2{}
.listbox-2>.row{margin:-4px;}
.listbox-2>.row>div{padding:4px;}
.listbox-3{}
.listbox-3>.row{margin:-8px;}
.listbox-3>.row>div{padding:8px;}
.listbox-4{}
.listbox-4>.row{margin:-8px;}
.listbox-4>.row>div{padding:8px;}
.listbox-5>.row{margin:-8px;}
.listbox-5>.row>div{padding:8px;}
.listbox-6>.row{margin:-8px -4px;}
.listbox-6>.row>div{padding:8px 4px;}
.listbox-7>.row{margin:-8px;}
.listbox-7>.row>div{padding:8px;}
@media (min-width: 1216px) {
    [class*="listbox-"]{}
    [class*="listbox-"]>.row{margin: -12px;}
    [class*="listbox-"]>.row>div{padding: 12px;}
    .listbox-2{}
    .listbox-2>.row{margin: -8px;}
    .listbox-2>.row>div{padding: 8px;}
    .listbox-4{}
    .listbox-4>.row{margin:-12px;}
    .listbox-4>.row>div{padding:12px;}
    .listbox-5>.row{margin:-16px;}
    .listbox-5>.row>div{padding:16px;}
    .listbox-6>.row{margin:-8px -4px;}
    .listbox-6>.row>div{padding:8px 4px;}
    .listbox-7>.row{margin:-12px;}
    .listbox-7>.row>div{padding:12px;}
}

/*//*/

[class*='info-box-']{}
[class*='info-box-']>.row{
    margin: -8px;
}
[class*='info-box-']>.row>div{
    padding: 8px;
    flex-grow: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}
[class*="card-list-"]{}
[class*="card-list-"]>.row{
    margin: -8px;
}
[class*="card-list-"]>.row>div{
    padding: 8px;
    position: relative;
}
[class*="card-list-"] .box{
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    
/* 배경블러/연함/sm-LV2 */
    box-shadow: var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    padding: 16px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    z-index: 1;
    overflow: hidden;
    transition: all, 0.5s;
    cursor: pointer;
    padding: 16px;
    border-color: #fff;
}
[class*="card-list-"] .bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
    z-index: 0;
    width: calc(100% - 17px);
    height: calc(100% - 17px);
    border-radius: 8px;
    /* transition: top, 0.4s; */
    background:#fff;
    display: none;
}
[class*="card-list-"] .box:after{
    content:'';
    opacity: 0.6;
    background: conic-gradient(from -41deg at 40.63% 50.41%, rgba(242, 98, 181, 0.00) 125.17920970916748deg, rgba(95, 197, 255, 0.30) 193.4119462966919deg, rgba(255, 172, 137, 0.30) 216.0206937789917deg, rgba(129, 85, 255, 0.30) 236.0708713531494deg, rgba(120, 157, 255, 0.30) 259.95326042175293deg, rgba(159, 115, 241, 0.00) 311.0780096054077deg);
    filter: blur(50px);
    position:absolute;
    left: 50%;
    top: 50%;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    width: 100%;
    transform: translate(-50%,-50%);
    z-index: 1;
    height: 100%;
}
[class*="card-list-"] .box .top,
[class*="card-list-"] .box .title,
[class*="card-list-"] .box .info-txt,
[class*="card-list-"] .box .info{position: relative; z-index: 10;}
[class*="card-list-"] .box .top{justify-content: space-between;display: flex;margin-bottom: 8px;}
[class*="card-list-"] .box .title{
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 21.6px */
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 15px;
}
[class*="card-list-"] .box .info-txt{
    /* margin-bottom: 8px; */
    margin-bottom: 16px;
    /* border-bottom: 1px solid var(--gray-200); */
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    font-size: 13px;
    line-height: 120%;
    max-height: 24rem;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
[class*="card-list-"] .box .top>.info{
    display: inline-flex;
    align-items: center;
    font-size: 8px;
    height: 18px;
    padding: 0 6px;
    border: 0;
    margin: 0;
}
[class*="card-list-"] .box .info{border-top: 1px solid var(--gray-200);padding-top: 8px;}
[class*="card-list-"] .box .info>.row,
[class*="card-list-"] .box .info.addbtns-ver .row-1{
    margin: -2px;
}
[class*="card-list-"] .box .info>.row>div,
[class*="card-list-"] .box .info.addbtns-ver .row-1>div{
    padding: 2px;
}
[class*="card-list-"] .box .info.addbtns-ver>.row{
    margin: -4px;
}
[class*="card-list-"] .box .info.addbtns-ver>.row>div{
    padding: 4px;
}
[class*="card-list-"] .box .info .txt1{
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 300;
    color: var(--gray-600);
    font-size: 10px;
}
[class*="card-list-"] .box .info .txt1>span{
    color: inherit;
    font-size: inherit;
    font-weight:inherit;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
[class*="card-list-"] .box .info .txt1 i{
    color: var(--gray-600);
    margin-right: 4px;
    font-size: 14px;
}
[class*="card-list-"] .box .info .txt1 em{
    color: var(--gray-600);
    margin-right: 4px;
    font-size: 10px;
    display: none;
}
[class*="card-list-"] .box:hover{
    
top: -5px;
    
box-shadow: var(--dropShadow-elevation-subtle-le5);
}
[class*="card-list-"] .box:hover+.bg{
    /* box-shadow: var(--dropShadow-elevation-subtle-le5); */
    top: 2px;
    transform: translateX(-50%);
}
.card-list-2 {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.57) 100%);
/* 배경블러/연함/sm-LV2 */
    box-shadow: var(--dropShadow-elevation-le2);
    backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
    padding: 24px;
}

.card-list-2 .box {
    padding: 0;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--gray-200);
    border-radius: 0;
    padding-bottom: 16px;
}
.card-list-2 .box:hover{
    top: 0;
    background: none;
    box-shadow: none;
}

.card-list-2 .box:hover+.bg {
    box-shadow: none;
    top: 0;
    transform: translateX(-50%);
}
.card-list-2 .box .title {border: 0;display: flex;margin: 0;align-items: center;}
.card-list-2 .box .title:hover{color:var(--blue-500)}
.card-list-2 .box .title>em{color:inherit;font-size:inherit;font-weight:inherit;flex-grow: 1;}
.card-list-2 .box .info-txt {padding-bottom: 0;border-bottom: 0;margin-bottom: 4px;}
.card-list-2 .box .info{
    padding-top: 6px;
    border-top: 0;
}
.card-list-2 .box .title .info{
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 6px;
    font-size: 8px;
}
.card-list-2  .box .info>.row{margin:-8px;justify-content: space-between;}
.card-list-2  .box .info>.row>div{padding:8px;}
.card-list-2  .box .info .txt1 em{display:block}
.more-animation{
    animation: fadein 1.5s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
.card-list-3 {
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}
.card-list-3 .box {
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
background: #fff0;
padding-bottom: 16px;
border-bottom: 1px solid var(--gray-200);
}
.card-list-3 .box>.title {
font-size: 15px;
font-style: normal;
font-weight: 600;
padding: 0;
border-bottom: 0;
}
.card-list-3 .box .info{
border: 0;
padding: 0;
}
.card-list-3 .box .info .txt1{
color: var(--gray-600);
font-size: 10px;
font-style: normal;
font-weight: 300;
}
.card-list-3 .box .info .txt1>i {color: var(--gray-600);}
.card-list-3 .box .info .txt1>span {}
.card-list-3 .box .info>.row{margin: -4px;}
.card-list-3 .box .info>.row>div{padding: 4px;}
.card-list-4 {}
.card-list-4 .box {}
.card-list-4 .box>.top {
    width: 100%;
    display: block;
}
.card-list-4 .box>.top>.row{margin:0 -2px}
.card-list-4 .box>.top>.row>div{padding:0 2px;}
.card-list-4 .box>.top .icons {
    font-size: 18px;
    color: var(--gray-500);
}
.card-list-4 .box .txts .txt1{
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 4px;
}
.card-list-4 .box .txts ul {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.card-list-4 .box .txts ul li {
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%; /* 15.6px */
}
.card-list-4 .box .txts ul li .icons{font-size: 16px;}
.card-list-4 .box:hover{top:0}
.card-list-4 .box:hover+.bg{
    top: 50%;
    transform: translate(-50%,-50%);
    left: 50%;
}
.card-list-4 .box:hover{box-shadow: var(--dropShadow-elevation-le3);}
.card-list-4 .box>.top .icons:hover,
.card-list-4 .box>.top .icons.active{color:var(--blue-500)}
.card-list-4 .box>.top .icons.icon-star:hover,
.card-list-4 .box>.top .icons.icon-star.active{color: var(--orange-500);}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (min-width: 1216px) {/*pc size*/
[class*="card-list-"]{}
[class*="card-list-"]>.row{}
[class*="card-list-"]>.row>div{}
[class*="card-list-"] .box{}
[class*="card-list-"] .bg{
   
}
[class*="card-list-"] .box:after{}
[class*="card-list-"] .box .top,
[class*="card-list-"] .box .title,
[class*="card-list-"] .box .info-txt,
[class*="card-list-"] .box .info{}
[class*="card-list-"] .box .top{}
[class*="card-list-"] .box .title{
    font-size: 18px;
}
[class*="card-list-"] .box .info-txt{
    font-size: 14px;
    display: block;
    white-space: nowrap;
}
[class*="card-list-"] .box .top>.info{
    height: 20px;
    font-size: 9px;
    padding: 0 8px;
}
[class*="card-list-"] .box .info>.row{}
[class*="card-list-"] .box .info>.row>div{}
[class*="card-list-"] .box .info.addbtns-ver>.row{
    align-items: self-end;
}
[class*="card-list-"] .box .info.addbtns-ver>.row>div{}
    
[class*="card-list-"] .box .info .txt1{
    font-size: 12px;
}
[class*="card-list-"] .box .info .txt1 i{
    font-size: 16px;
}
[class*="card-list-"] .box .info .txt1 em{
    display: block;
    font-size: 12px;
}
[class*="card-list-"] .box .info .txt1>span{
    max-width: inherit;
}
[class*="card-list-"] .box:hover{}
[class*="card-list-"] .box:hover+.bg{}
.card-list-2 {}
.card-list-2 .box {}
.card-list-2 .box:hover{}
.card-list-2 .box:hover+.bg {}
.card-list-2 .box .title {margin-bottom: 8px;}
.card-list-2 .box .title>em{flex-grow:0;}
.card-list-2 .box .info-txt {margin-bottom: 8px;}
.card-list-2 .box .info{
    padding-top: 0;
}
.card-list-2 .box .title .info{
    height: 20px;
    font-size: 9px;
    padding: 0 8px;
}
.card-list-2  .box .info>.row{justify-content: flex-start;}
.card-list-2  .box .info>.row>div{}

.card-list-3 {}
.card-list-3 .box {}
.card-list-3 .box>.title {}
.card-list-3 .box .info{}
.card-list-3 .box .info .txt1{}
.card-list-3 .box .info .txt1>i {}
.card-list-3 .box .info .txt1>span {}
.card-list-3 .box .info>.row{}
.card-list-3 .box .info>.row>div{}
}