@charset "utf-8";

.con_wrap { display: flex; justify-content: flex-start; align-items: flex-start; }
.con_wrap > .img_wrap { margin-right: 60px; width: 210px; height: 290px; flex-shrink: 0; }
.con_wrap > .img_wrap > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; }
.con_wrap > .img_wrap > p { margin-top: 5px; text-align: left; font-size: 15px; font-weight: 700; color: var(--gray-61); }
.con_wrap > p { font-size: 18px; font-weight: 400; color: var(--gray-33); }

.sec02 { padding: 80px 0; background: var(--gray-f5); }
.sec02 ul { margin: 0 -15px; display: flex; justify-content: space-between; align-items: center; }
.sec02 ul > li { margin: 0 15px; width: 25%; }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    .con_wrap { align-items: flex-start; }
    .con_wrap > .img_wrap { margin-right: 40px; width: 180px; }
    .con_wrap > p { font-size: 15px; }
    
    .sec02 { padding: 40px 0; }
    .sec02 ul { margin: 0 -5px; }
    .sec02 ul > li { margin: 0 5px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    .con_wrap { display: block; }
    .con_wrap > .img_wrap { margin-right: 0px; margin-bottom: 20px; width: 210px; height: auto; }
    .con_wrap > p { font-size: 14px; }
    
    .sec02 { padding: 30px 0; }
    .sec02 ul { margin: 0 -2%; flex-wrap: wrap; }
    .sec02 ul > li { margin: 2%; width: 46%; }
}

/* 450px or less */
@media all and (max-width : 450px){
    .con_wrap > .img_wrap { width: 150px; height: auto; }
}