html { background-color: #f8f8f8; } nav { margin-bottom: 0px; } .itemsb { display: none; } .slidera { width: 1300px; height: 450px; margin-bottom: 20px; } .sliderb { width: 100%; height: 300px; margin: 10px 0; } .sliderb .describe { position: absolute; left: 0; bottom: 0; display: grid; grid-template-columns: 1fr 100px; width: 100%; height: 56px; background-color: rgba(176, 238, 197, 0.6); } .sliderb .describe .texts { overflow: hidden; } .sliderb .describe .texts p { font-size: 22px; line-height: 56px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 5px 20px; } .sliderb .describe .dots { left: unset; bottom: unset; top: 50%; right: 0; transform: translate(0, -50%); } .container { display: flex; justify-content: space-between; } .container .left { width: 325px; } .container .center { width: 440px; } .container .right { width: 325px; } .container .content { margin: 10px 0; } .container .title { position: relative; } .container .title > .main-title { font-size: 22px; font-weight: bold; color: white; width: 125px; background: linear-gradient(290deg, transparent 20px, #2daf3e 0) top right; padding: 2px 30px 2px 5px; } .container .title > .sub-title { position: absolute; right: 0; bottom: 0; display: flex; width: 225px; height: 26px; background: linear-gradient(110deg, transparent 20px, #b0eec5 0) top right; } .container .title > .sub-title a { font-size: 18px; color: white; text-align: center; font-weight: bold; cursor: pointer; } .container .title > .sub-title a:first-child { width: 125px; padding-left: 20px; } .container .title > .sub-title a:first-child.active { background: linear-gradient(110deg, transparent 20px, #97dc89 0) top right; } .container .title > .sub-title a:last-child { width: 100px; text-align: center; } .container .title > .sub-title a:last-child.active { background-color: #97dc89; } .container .center-title { display: flex; justify-content: space-between; align-items: end; } .container .center-title .describe { width: 145px; height: 36px; background-color: #b0eec5; } .container .center-title .main-title { width: 130px; height: 45px; background-color: #2daf3e; color: white; font-size: 22px; font-weight: bold; text-align: center; line-height: 45px; } .container .items { background-color: white; clip-path: inset(0 0 2px 0); } .container .items .item { position: relative; height: 70px; width: 100%; padding: 25px 10px; display: grid; grid-template-columns: auto 100px; align-items: center; } .container .items .item::after { content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 1.5px; background-color: #dfdfdf; } .container .items .item:hover p { color: #2daf3e; } .container .items .item-title { display: grid; grid-template-columns: 17px auto; align-items: center; } .container .items .item-title .item-icon { width: 17px; height: 17px; } .container .items .item-title p { margin: 0 4px 0 8px; color: #686868; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .container .items .item-date { font-size: 16px; color: #b4b4b4; } .container .items-notice { background-color: white; clip-path: inset(0 0 2px 0); } .container .items-notice .item { position: relative; width: 100%; padding: 11.5px 10px; display: grid; grid-template-columns: 56px auto; align-items: center; } .container .items-notice .item::after { content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 1.5px; background-color: #dfdfdf; } .container .items-notice .item:hover p { color: #2daf3e; } .container .items-notice .item-title { margin: 0 10px; color: #686868; font-size: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .container .items-notice .item-date { width: 50px; height: 50px; box-sizing: content-box; border: 1px solid #b0eec5; } .container .items-notice .item-date .top { width: 50px; height: 34px; background-color: #2daf3e; text-align: center; } .container .items-notice .item-date .top span { color: white; line-height: 36px; } .container .items-notice .item-date .bottom { width: 50px; height: 16px; background-color: white; text-align: center; display: flex; justify-content: center; align-items: center; } .container .items-notice .item-date .bottom span { color: #6a6a6a; font-size: 10px; }