/*====================================================* HOME NOTICE ====================================================*/ .home-notice { width: 100%; padding: 10px 0 85px; background: #ffffff; box-sizing: border-box; } /*====================================================* NOTICE CONTAINER ====================================================*/ .home-notice-container { width: 100%; max-width: 1140px; margin: 0 auto; box-sizing: border-box; transform: translateY(-80px); } /*====================================================* NOTICE HEADING ====================================================*/ .home-notice-heading { margin-bottom: 50px; } .home-notice-heading h2 { margin: 0; color: #1f2d3a; font-family: "Poppins", sans-serif; font-size: 25px; font-weight: 400; line-height: 1.2; } /*====================================================* NOTICE SLIDER ====================================================*/ .home-notice-slider { width: 100%; overflow: hidden; box-sizing: border-box; } /*====================================================* NOTICE TRACK ====================================================*/ .home-notice-track { display: flex; width: 100%; transition: transform 0.6s ease; will-change: transform; } /*====================================================* NOTICE CARD ====================================================*/ .home-notice-card { flex: 0 0 calc((100% - 64px) / 3); min-width: 0; height: 347px; margin-right: 32px; padding: 55px 22px 35px; display: flex; box-sizing: border-box; background: #eeeeee; border: 1px solid transparent; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /*====================================================* LAST CARD ====================================================*/ .home-notice-card:last-child { margin-right: 0; } /*====================================================* CARD HOVER ====================================================*/ .home-notice-card:hover { border-color: #e12626; box-shadow: 0 15px 12px rgba(0, 0, 0, 0.18); } /*====================================================* DATE ====================================================*/ .home-notice-date { width: 65px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; } /*====================================================* DAY ====================================================*/ .home-notice-day { display: block; color: #df2929; font-family: "Poppins", sans-serif; font-size: 43px; font-weight: 300; line-height: 0.95; } /*====================================================* MONTH ====================================================*/ .home-notice-month { display: block; margin-top: 6px; color: #df2929; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; } /*====================================================* DIVIDER ====================================================*/ .home-notice-divider { width: 1px; height: 62px; margin: 0 20px; background: #999999; flex-shrink: 0; } /*====================================================* NOTICE CONTENT ====================================================*/ .home-notice-content { flex: 1; min-width: 0; } /*====================================================* NOTICE TITLE ====================================================*/ .home-notice-content h3 { margin: 2px 0 20px; color: #182b3a; font-family: "Poppins", sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; white-space: nowrap; } /*====================================================* NOTICE DESCRIPTION ====================================================*/ .home-notice-content p { margin: 0; color: #687581; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.65; } /*====================================================* NOTICE INFORMATION ====================================================*/ .home-notice-info { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; } /*====================================================* NOTICE INFO ITEM ====================================================*/ .home-notice-info span { display: flex; align-items: center; gap: 10px; color: #a7a7a7; font-family: "Poppins", sans-serif; font-size: 13px; font-weight: 400; } /*====================================================* NOTICE ICON ====================================================*/ .home-notice-info i { width: 16px; color: #aaaaaa; font-size: 15px; text-align: center; } /*====================================================* NOTICE DOTS ====================================================*/ .home-notice-dots { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; } /*====================================================* DOT ====================================================*/ .home-notice-dot { width: 17px; height: 17px; padding: 0; border: none; border-radius: 50%; background: #f5caca; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } /*====================================================* ACTIVE DOT ====================================================*/ .home-notice-dot.active { background: #d92828; transform: scale(1.05); } /*====================================================* DOT HOVER ====================================================*/ .home-notice-dot:hover { background: #d92828; } /*====================================================* TABLET ====================================================*/ @media (max-width: 1100px) { .home-notice { padding: 70px 30px 75px; } .home-notice-container { max-width: 100%; } .home-notice-card { flex: 0 0 calc((100% - 40px) / 3); margin-right: 20px; padding: 45px 18px 30px; } .home-notice-date { width: 55px; } .home-notice-divider { margin: 0 15px; } .home-notice-content h3 { font-size: 14px; } .home-notice-content p { font-size: 13px; } .home-notice-info span { font-size: 12px; } } /*====================================================* TABLET / MOBILE ====================================================*/ @media (max-width: 768px) { .home-notice { padding: 55px 20px 65px; } .home-notice-heading { margin-bottom: 35px; } .home-notice-heading h2 { font-size: 23px; } /*---------------------------------------------- SLIDER ----------------------------------------------*/ .home-notice-slider { width: 100%; overflow: hidden; } /*---------------------------------------------- TRACK 6 cards exist. 1 card is visible. ----------------------------------------------*/ .home-notice-track { display: flex; width: 600%; transition: transform 0.6s ease; } /*---------------------------------------------- CARD One card = 1/6 of track. ----------------------------------------------*/ .home-notice-card { flex: 0 0 calc(100% / 6); width: calc(100% / 6); height: auto; min-height: 330px; margin-right: 0; padding: 40px 18px 30px; box-sizing: border-box; } /*---------------------------------------------- DATE ----------------------------------------------*/ .home-notice-date { width: 55px; } .home-notice-day { font-size: 38px; } .home-notice-month { font-size: 13px; } /*---------------------------------------------- DIVIDER ----------------------------------------------*/ .home-notice-divider { margin: 0 15px; } /*---------------------------------------------- CONTENT ----------------------------------------------*/ .home-notice-content h3 { font-size: 14px; white-space: normal; } .home-notice-content p { font-size: 12px; line-height: 1.7; } /*---------------------------------------------- INFORMATION ----------------------------------------------*/ .home-notice-info { margin-top: 20px; gap: 12px; } .home-notice-info span { font-size: 12px; } .home-notice-info i { font-size: 14px; } /*---------------------------------------------- DOTS ----------------------------------------------*/ .home-notice-dots { margin-top: 30px; } /*---------------------------------------------- HOVER ----------------------------------------------*/ .home-notice-card:hover { border-color: #e12626; box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15); } } /*====================================================* SMALL MOBILE ====================================================*/ @media (max-width: 480px) { .home-notice { padding: 45px 16px 55px; } .home-notice-heading { margin-bottom: 30px; } .home-notice-heading h2 { font-size: 21px; } /*---------------------------------------------- TRACK ----------------------------------------------*/ .home-notice-track { width: 600%; } /*---------------------------------------------- CARD ----------------------------------------------*/ .home-notice-card { flex: 0 0 calc(100% / 6); width: calc(100% / 6); min-height: 310px; padding: 35px 16px 25px; } /*---------------------------------------------- DATE ----------------------------------------------*/ .home-notice-date { width: 48px; } .home-notice-day { font-size: 34px; } .home-notice-month { font-size: 12px; } /*---------------------------------------------- DIVIDER ----------------------------------------------*/ .home-notice-divider { margin: 0 12px; } /*---------------------------------------------- TITLE ----------------------------------------------*/ .home-notice-content h3 { font-size: 13px; } /*---------------------------------------------- DESCRIPTION ----------------------------------------------*/ .home-notice-content p { font-size: 11px; line-height: 1.7; } /*---------------------------------------------- INFORMATION ----------------------------------------------*/ .home-notice-info { margin-top: 18px; gap: 10px; } .home-notice-info span { font-size: 11px; } .home-notice-info i { font-size: 13px; } /*---------------------------------------------- DOT ----------------------------------------------*/ .home-notice-dot { width: 15px; height: 15px; } } /*====================================================* VERY SMALL MOBILE ====================================================*/ @media (max-width: 360px) { .home-notice { padding: 40px 14px 50px; } .home-notice-heading { margin-bottom: 25px; } .home-notice-heading h2 { font-size: 20px; } /*---------------------------------------------- CARD ----------------------------------------------*/ .home-notice-card { min-height: 300px; padding: 30px 14px 25px; } /*---------------------------------------------- DATE ----------------------------------------------*/ .home-notice-date { width: 44px; } .home-notice-day { font-size: 30px; } .home-notice-month { font-size: 11px; } /*---------------------------------------------- DIVIDER ----------------------------------------------*/ .home-notice-divider { margin: 0 10px; height: 58px; } /*---------------------------------------------- TITLE ----------------------------------------------*/ .home-notice-content h3 { font-size: 12px; line-height: 1.35; } /*---------------------------------------------- DESCRIPTION ----------------------------------------------*/ .home-notice-content p { font-size: 10px; line-height: 1.7; } /*---------------------------------------------- INFORMATION ----------------------------------------------*/ .home-notice-info { margin-top: 16px; gap: 9px; } .home-notice-info span { font-size: 10px; } .home-notice-info i { font-size: 12px; } /*---------------------------------------------- DOTS ----------------------------------------------*/ .home-notice-dots { margin-top: 25px; } .home-notice-dot { width: 14px; height: 14px; } }