@charset "utf-8";

.webzine-subscribe {width: 100%; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.webzine-subscribe li {padding: 30px; border: 1px solid #f2f2f2; background-color: #fafafa; text-align: center;}
.webzine-subscribe li i {display: block; width: 110px; height: 110px; margin: 0 auto; border: 1px solid #ececec; border-radius: 100%; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 64px;}
.webzine-subscribe li p {font-weight: 700; font-size: 21px; color: #666; margin-top: 10px;}
.webzine-subscribe li span {display: block; font-size: 16px; padding: 12px 0 16px;}
.webzine-subscribe li a {display: inline-block; width: 100%; max-width: 219px; padding: 10px 0; border: 1px solid #dfdfdf; background-color: #fff; font-weight: 400; font-size: 18px; text-align: center;}

.webzine-subscribe li .icon1 {background-image: url("/resources/homepage/korad/img/icon_webzine1.png");}
.webzine-subscribe li .icon2 {background-image: url("/resources/homepage/korad/img/icon_webzine2.png");}
.webzine-subscribe li .icon3 {background-image: url("/resources/homepage/korad/img/icon_webzine3.png");}

@media screen and (max-width: 1024px) {
    .webzine-subscribe li {padding: 20px;}
}
@media screen and (max-width: 780px) {
    .webzine-subscribe {grid-template-columns: 1fr;}
    .webzine-subscribe li {display: flex; align-items: center; text-align: left; gap: 20px;}
    .webzine-subscribe li > i {flex-shrink: 0; width: 100px; height: 100px;}
    .webzine-subscribe li > div {width: 100%;}
    .webzine-subscribe li span br {display: none;}
    .webzine-subscribe li a {font-size: 16px;}
}
@media screen and (max-width: 480px) {
    .webzine-subscribe li {padding: 30px 20px; flex-direction: column; text-align: center; gap: 0;}
    .webzine-subscribe li > i {width: 72px; height: 72px; background-size: 48px;}
}