@media screen and (max-width: 1360px) { body .area { width: 100%; height: unset; background-color: #ffffff; box-shadow: 0px 4px 48px 2px rgba(8, 100, 178, 0.15); padding: 0 1rem; padding-top: 1rem; padding-bottom: 1.5rem; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; } body .area .title { color: #000000; font-size: 1.2rem; line-height: 3rem; } body .area .content { color: #444444; font-size: 1rem; line-height: 1.8rem; } body .area .button { width: 8rem; height: 3rem; background-color: #ffffff; border-radius: 2rem; border: solid 2px #0084ce; text-align: center; line-height: 3rem; color: #444444; font-size: 1rem; cursor: pointer; transition: all .3s; margin: 1rem auto; } body .area-ul .area-li { margin-top: 1.5rem; width: 100%; /* height: 210px; */ background-color: #ffffff; box-shadow: 0px 4px 24px 1px rgba(8, 100, 178, 0.08); display: flex; flex-direction: column; cursor: pointer; } body .area-ul .area-li .area-li-img{ width: 100%; margin-right: 0; height: unset; } body .area-ul .area-li .area-li-content{ flex: 1; padding: 1rem 0; padding-right: 0; box-sizing: border-box; display: flex; flex-direction: column; } body .area-li-content-title{ color: #000000; font-size: 1.2rem; line-height: 2.5rem; text-indent: .5rem; border-left: 5px solid #0084ce; } body .area-li-content-txt{ margin-top: 1rem; display: flex; flex-direction: column; padding-left: .7rem; } body .area-li-content-txt div{ color: #666666; font-size: 1rem; line-height: 2rem; margin-right: 0; } body .area-li-content-text{ color: #666666; font-size: 1rem; line-height: 2rem; padding-left: .7rem; margin-top: unset; } body .area-paging{ margin-bottom: 3rem; margin-top: 2rem; } } .area { width: 100%; height: 370px; background-color: #ffffff; box-shadow: 0px 4px 48px 2px rgba(8, 100, 178, 0.15); padding: 0 38px; padding-top: 50px; padding-bottom: 70px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; } .area .title { color: #000000; font-size: 30px; } .area .content { color: #444444; font-size: 16px; line-height: 30px; } .area .button { width: 140px; height: 44px; background-color: #ffffff; border-radius: 22px; border: solid 2px #0084ce; text-align: center; line-height: 44px; color: #444444; font-size: 14px; cursor: pointer; transition: all .3s; } .area .button:hover{ background-color: #0084ce; border: solid 2px #0084ce; color: #fff; } .area .button:hover span{ color: #fff; } .area .button span { color: #0084ce; font-size: 14px; } .area-ul { display: flex; flex-direction: column; } .area-ul .area-li { margin-top: 30px; width: 100%; /* height: 210px; */ background-color: #ffffff; box-shadow: 0px 4px 24px 1px rgba(8, 100, 178, 0.08); display: flex; cursor: pointer; } .area-ul .area-li .area-li-img{ width: 330px; height: 210px; margin-right: 30px; overflow: hidden; } .area-ul .area-li .area-li-img img{ width: 100%; display: block; transition: all .3s; } .area-ul .area-li:hover .area-li-img img{ width: 105%; margin-left: -2.5%; } .area-ul .area-li .area-li-content{ flex: 1; padding: 30px 0; padding-right: 46px; box-sizing: border-box; display: flex; flex-direction: column; } .area-li-content-title{ color: #000000; font-size: 22px; line-height: 22px; text-indent: .5rem; border-left: 5px solid #0084ce; } .area-li-content-txt{ margin-top: 20px; display: flex; padding-left: .7rem; } .area-li-content-txt div{ color: #666666; font-size: 14px; margin-right: 14px; } .area-li-content-text{ color: #666666; font-size: 14px; padding-left: .7rem; margin-top: 10px; line-height: 22px; } .area-paging{ margin-bottom: 76px; margin-top: 60px; }