.img-fill{width:100%;} .banner { color: #fff; text-align:center; position:relative; background:#fff } .banner .title{ position: absolute; top: 42%; text-align: center; width:100%; left:0 } .banner .chTitle { font-size: 2.5rem; font-family: PingFang Heavy; } .banner .engTitle{ font-size: 1.25rem; margin: .5rem 0 5rem; } .banner .desc { font-size: 1.35rem; letter-spacing: 5px; margin-top: 3rem; } .desc > p { margin-bottom: .75rem; line-height: 1.75; } .eng-txt{font-size:1rem} .volunteer { padding: 12rem 16.66%; } .volunteer img{margin:5rem 0 6rem} .section-t { position: absolute; top: 17%; text-align: center; width: 100%; left: 0; } .section-t h2,.news-t h2{ font-weight: bold; font-size: 2.75rem; } .section-t p,.news-t p{ text-transform: uppercase; font-size: 1.75rem; margin-top: 0.5rem; } .section-t .desc-sub{margin-top:2rem} .section-t .desc-sub p{font-size:1.25rem} .harvest { padding: 0 16.66%; margin-top: -10rem; position: relative; } .harvest-i { display: flex; background: #f6f6f6; } .harvest-i img{width:50%} .harvest-i .desc { flex: 1; padding: 5rem; display: flex; flex-direction: column; justify-content: space-between; } .gain .harvest-i{align-items:center} .gain .harvest img{width:30rem} .gain .desc{display:block} .harvest-i .num{font-size:2.5rem;font-weight:bold} .harvest-i:nth-child(odd){background:#eee} .desc-str{color:#e70310;margin-bottom:1.5rem;font-weight:bold} .desc-str p{font-size:1.25rem} .program{padding-bottom:15rem} .join{padding-bottom:15rem} .email { width: 66.666%; margin: -10rem auto 0; position: relative; background: #f6f6f6; display: flex; justify-content: center; padding: 3rem 0; align-items: center; } .email img{width:13rem;margin-right:2rem} .email .src { color: #e60000; font-size: 1.5rem; margin-top: 2rem; font-weight: bold; } .news-t{color:#e60000;text-align:center;margin:9rem 0} .news-list { width: 66.666%; margin: auto; } .item { line-height: 0; padding: 3rem 0; border-bottom: 1px solid #f8f8f8; position: relative; display: block; color: #000; } .item .picture { width: 25%; display: inline-block; margin-right: 3rem; height: calc(15vw/2.3); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; } .news-content { position: absolute; right: 0; top: 3rem; height: calc(100% - 6rem); width: calc(75% - 3rem); } .news-text { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .news-title { font-size: 1.5rem; font-family: PingFang Heavy; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-desc { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-date { position: absolute; bottom: 0; right: 0; color: #ccc; } .more { margin-top: 0.75rem; } .arrow-line { height: 2px; width: 0; display: inline-block; background: #ebbd7a; margin-right: -13px; margin-left: 10px; transition: width 0.3s ease-in-out; -webkit-transition: width 0.3s ease-in-out; } .arrow-right { display: inline-block; width: 10px; height: 10px; border-bottom: 2px solid; border-right: 2px solid; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .more>span { vertical-align: middle; color: #ebbd7a; font-weight: bold; } .item:hover .mask { opacity: 0.3; } .news-text:hover .news-title, .news-text:hover .news-desc { text-decoration: underline; } .item:hover .arrow-line { width: 20px; } .mask { position: absolute; opacity: 0; } .video{margin:5rem 0;position:relative} .playBtn { position: absolute; width: 80px; height: 80px; background-image: url(../../Images/home/btn-play.png); background-size: cover; background-position: center; left: 50%; top: 50%; margin-top: -40px; margin-left: -40px; } .playBtn:hover{background-image: url('../../Images/home/btn-play2.png');} .video-box{display:flex;justify-content:space-between} .video-box .video{width:49%;} .desc-title{color:#e70310;margin:3rem 0} .desc-title h2{font-weight:bold;font-size:2rem}