@charset "utf-8";
.trainbox {background-color:#ffffff;padding: 3rem;border-radius: 1rem;border: 1px solid #ddd;}
.trainbox ul {}
.trainbox li {}
.trainbox li span {}
.bg_libox {background-color:#EFF5EF;padding: 2rem;border-radius: 1rem;display: flex;margin-bottom: 2rem;position: relative;gap: 2rem;align-items: center;}
.bg_libox span {width:60px;height:60px;background-color:#ffffff;border-radius: 10px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);margin-left: 2rem;font-size: 40px;display: inline-flex;justify-content: center;align-items: center;color: var(--color-main);}
.bg_libox p {font-size:20px;font-weight:500;}
.bg_libox p:first-of-type {margin-left:6rem}

/* PC */ 
@media only screen and (min-width:1025px) and (max-width: 1500px)  {

}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .trainbox {padding:2rem}
    .bg_libox {flex-wrap:wrap; gap:.5rem}
    .bg_libox p {margin-left:6rem;width: 90%;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .trainbox {padding:1rem}
    .bg_libox {padding:1.5rem;flex-wrap: wrap;}
    .bg_libox span {width:50px;height:50px;margin-left: 1.5rem;transform: unset;top: 0;margin-top: 1.5rem;}
    .bg_libox p {font-size:16px;margin-left: 70px;}
    .bg_libox p:first-of-type {margin-left:70px}
}