.class-sale-section {padding: 80px 0; font-family: noto sans KR;}
.class-sale-section .con_wrap {position: relative; width: 1100px; margin: 0 auto; text-align: center;}
.class-sale-section ul {overflow: visible;}
.class-sale-section li {border-radius: 20px;}
.class-sale-section li:not(:last-child) {margin-bottom: 90px;}
.class-sale-section li:nth-child(1) { box-shadow: 2px 3px 15px 0px rgb(0 206 170 / 20%);}
.class-sale-section li:nth-child(2) { box-shadow: 2px 3px 15px 0px rgb(7 102 255 / 20%);}
.class-sale-section li:nth-child(3) { box-shadow: 2px 3px 15px 0px rgb(15 24 43 / 20%);}
.class-sale-section li:nth-child(1) .class-info-title {background-color: #00CEAA;}
.class-sale-section li:nth-child(2) .class-info-title {background-color: #0766FF;}
.class-sale-section li:nth-child(3) .class-info-title {background-color: #0F182B;}
.class-sale-section li:nth-child(1) .class-info p::before {background-color: #00CEAA;}
.class-sale-section li:nth-child(2) .class-info p::before {background-color: #0766FF;}
.class-sale-section li:nth-child(3) .class-info p::before {background-color: #0F182B;}
.class-sale-section li:nth-child(1) .class-apply a {color: #00CEAA; border: 1px solid #00CEAA;}
.class-sale-section li:nth-child(2) .class-apply a {color: #0766FF; border: 1px solid #0766FF;}
.class-sale-section li:nth-child(3) .class-apply a {color: #0F182B; border: 1px solid #0F182B;}
.class-sale-section li:nth-child(1) .class-apply a:hover {color: #fff; background: #00CEAA;}
.class-sale-section li:nth-child(2) .class-apply a:hover {color: #fff; background: #0766FF;}
.class-sale-section li:nth-child(3) .class-apply a:hover {color: #fff; background: #0F182B;}
.class-info-title {border-top-left-radius: 20px; border-top-right-radius: 20px;}
.class-info-title h2 {font-size: 32px;}
.class-info-title h2 span {font-size: 24px; opacity: 0.8;}
.class-info-title del {font-size: 18px; opacity: 0.8;}
.class-info-title p {font-size: 16px; }
.class-info-title p strong {font-size:24px;}
.class-info {margin-bottom: 16px;}
.class-info h3 {margin-bottom: 6px; font-size: 18px; font-weight: 500;}
.class-info p {position: relative; margin-bottom: 4px; padding-left: 10px; font-size: 16px;}
.class-info p::before {position: absolute; content: ''; width: 2px; height: 70%; top: 24%; left: 3px;}
.class-info .small-text-gray {font-size: 14px; color: #777;}
.class-info-box > div {flex-basis: 50%;}
.class-date h3 {padding-left: 20px; background: left center / 18px url("/2022/courses/imgs/common/calendar.svg") no-repeat;}
.class-contents h3 {padding-left: 20px; background: left center / 18px url("/2022/courses/imgs/common/widgets.svg") no-repeat;}
.class-refund h3 {padding-left: 20px; background: left center / 18px url("/2022/courses/imgs/common/paid.svg") no-repeat;}
.class-benefit h3 {padding-left: 20px; background: left center / 18px url("/2022/courses/imgs/common/sparkle.svg") no-repeat;}
.class-book h3 {padding-left: 20px; background: left center / 18px url("/2022/courses/imgs/common/book.svg") no-repeat;}
.class-buy-book h3 {padding-left: 20px; background: left center / 18px url("/2022/courses/imgs/common/cart.svg") no-repeat;}
.class-process h3 {padding-left: 20px; background: left center / 20px url("/2022/courses/imgs/common/edit_note.svg") no-repeat;}
.class-notice h3 {padding-left: 20px; background: left 5px / 20px url("/2022/courses/imgs/common/notice.svg") no-repeat;}
.class-contents a, .class-refund a, .class-benefit a {display: inline-block; margin-bottom: 0; padding: 0px 6px 1px; font-size: 14px; color: #fff !important; background: #a2a2a2; border-radius: 5px; transition: 0.3s;}
.class-refund a, .class-benefit a {color: #FF0057!important; border: 1px solid #FF0057!important; background: #fff;}
.class-contents a:hover, .class-refund a:hover {background-color: #777; color: #fff;}
.class-refund a:hover, .class-benefit a:hover { color: #fff!important; border: 1px solid #FF0057; background: #FF0057;}
.class-apply p strong {font-size: 22px;}
.class-apply a {display: flex; justify-content: center; align-items: center; width: 506px; height: 64px; margin-top: 8px; margin-left: auto; font-weight: bold; font-size: 22px; border-radius: 16px; transition: 0.3s;}

.class-sale-section .class-info-space {height: 64px;}
.class-sale-section .class-price-info {width: 506px; height: 64px; margin-left: auto; padding: 0 20px; box-sizing: border-box; background: #f9f9f9;}
.class-sale-section .class-price-info span {font-size: 16px; font-weight: 500;}
.class-sale-section .class-price-info strong {font-size: 24px; font-weight: 700; color: #FF0057; margin-right: 10px;}