.main.culture { height: 100%; overflow: atuo; position: relative; } .culture-section .section-1{ position: relative; height: 519px; height: 51.9rem; padding: 260px 0 0 0; padding: 26rem 0 0 0; text-align: center; color: white; overflow: hidden; } .culture-section .section-1 .section-1-background{ background-image: url('../images/culture/section-1.png'); background-size: cover; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; animation: slowScale 3s forwards; -webkit-animation: slowScale 3s forwards; } .culture-section .section-5 .section-5-box .box-item-des {display: none;} @keyframes slowScale { 0% {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);} } .culture-section .section-1 h1{font-size: 58px;font-size: 5.8rem;} .culture-section .section-1 h2{font-size: 18px;font-size: 1.8rem;margin-top: 21px;margin-top: 2.1rem} .culture-section .section-2{ height: 330px; height: 33rem; background-color: #2c3035; text-align: center; position: relative; padding-top: 65px; padding-top: 6.5rem; color: white; } .culture-section .section-2 h1{ font-size: 50px; font-size: 5rem; /* margin-bottom: 23px; */ /* line-height: 58px; */ } .culture-section .section-2 span.line{ display: inline-block; width: 40px; height: 5px; margin: 23px 0 30px; background-color: #f08200; } .culture-section .section-2 h2{font-size: 22px;} .culture-section .section-2 .section-2-box{ width: 1110px; width: 111rem; height: 190px; height: 19rem; position: absolute; bottom: -111px; bottom: -11.1rem; left: 50%; margin-left: -555px; margin-left: -55.5rem; background-color: #fff; box-shadow: 0 8px 8px 0 rgba(0,0,0,0.08); } .culture-section .section-2 .section-2-box .box-item{color: #171b25;width: 33.33%;float: left;text-align: center;padding-top: 37px;padding-top: 3.7rem;} .culture-section .section-2 .section-2-box .box-item .row-main {height: 34px;overflow-y: scroll;} .culture-section .section-2 .section-2-box .box-item .row-main::-webkit-scrollbar { width: 2px; } .culture-section .section-2 .section-2-box .box-item .row-main::-webkit-scrollbar-thumb { width: 2px; height: 30px; background: #eee; border-radius: 1px; } .culture-section .section-2 .section-2-box .box-item .row-main::-webkit-scrollbar-track { background: #fff; } .culture-section .section-2 .section-2-box .box-item img{ width: 56px; height: 56px; width: 5.6rem; height: 5.6rem; } .culture-section .section-2 .section-2-box .box-item h1{ font-size: 14px; font-size: 1.4rem; margin: 17px 0 18px; margin: 1.7rem 0 1.8rem; font-weight: bold; } .culture-section .section-2 .section-2-box .box-item p{ color: rgb(43 ,43 ,43 ,.6); font-size: 12px; font-size: 1.2rem; height: 17px; line-height: 17px; } .culture-section .section-3{ /* height: 518px; height: 51.8rem; */ padding-top: 209px; padding-top: 20.9rem; background-image: url('../images/culture/ransparent_image.png'); background-position: center center; background-size: cover; } .culture-section .section-3 .section-3-box{ width: 1110px; width: 111rem; margin: auto; } .culture-section .section-3 .section-3-box .box-item{display: inline-block;float: left;} .culture-section .section-3 .section-3-box .box-img img{ width: 570px; height: 341px; width: 57rem; height: 34.1rem; vertical-align: top; } .culture-section .section-3 .section-3-box .box-text{ padding-left: 30px; padding-left: 3rem; width: 500px; width: 50rem; padding-top: 34px; padding-top: 3.4rem; font-size: 20px; font-size: 2rem; line-height: 34px; line-height: 3.4rem; } .culture-section .section-4{ padding-top: 136px; padding-top: 13.6rem; text-align: center; } .culture-section .section-item h1{ font-size: 50px; font-size: 5rem; color: #171b25; font-weight: bold; } .culture-section .section-item span.line{ display: inline-block; width: 40px; height: 5px; background-color: #f08200; margin: 30px 0 34px; } .culture-section .section-item h2{ font-size: 22px; font-size: 2.2rem; color: #5f6366; margin-bottom: 52px; margin-bottom: 5.2rem; } .culture-section .section-4 .section-4-box{ width: 1110px; width: 111rem; margin: auto; } .culture-section .section-4 .section-4-box .box-item{ float: left; width: 540px; width: 54rem; position: relative; text-align: left; } .culture-section .section-4 .section-4-box + .section-4-box{ margin-top: 36px; margin-top: 3.6rem; } .culture-section .section-4 .section-4-box .box-item + .box-item{ margin-left: 25px; margin-left: 2.5rem; } .culture-section .section-4 .section-4-box .box-item img{ width: 540px ; height: 330px; width: 54rem ; height: 33rem; } .culture-section .section-4 .section-4-box .box-item h3{ margin: 60px 0 39px; font-size: 30px; font-size: 3rem; font-weight: bold; } .culture-section .section-4 .section-4-box .box-item p{ font-size: 14px; font-size: 1.4rem; line-height: 25px; line-height: 2.5rem; color: #626262; } .culture-section .section-4 .section-4-box.second .box-item{ /* padding-left: 30px; padding-left: 3rem; */ } .culture-section .section-5{ padding: 92px 0 0 0; padding: 9.2rem 0 0 0; text-align: center; } .culture-section .section-5 .section-5-box .box-item{ float: left; width: 25%; height: 560px; height: 56rem; position: relative; overflow: hidden; } .culture-section .section-5 .section-5-box .box-item h4{ font-size: 40px; font-size: 4rem; padding-top: 261px; padding-top: 26.1rem; font-weight: bold; color: white; } .culture-section .section-5 .section-5-box .box-item._fi{ background-image: url('../images/culture/1_imageNew.png'); background-size: cover; background-position: center center; } .culture-section .section-5 .section-5-box .box-item._se{ background-image: url('../images/culture/2_imageNew.png'); background-position: center center; background-size: cover; } .culture-section .section-5 .section-5-box .box-item._th{ background-image: url('../images/culture/03_image.png'); background-position: center center; background-size: cover; } .culture-section .section-5 .section-5-box .box-item._fo{ background-image: url('../images/culture/3_imageNew.png'); background-position: center center; background-size: cover; } .culture-section .section-5 .section-5-box .box-item .box-item-mask{ position: absolute; bottom: 0; left: 0; right: 0; top: 0; height: 0; transition: all .5s; background-color: rgb(240,130,0 ,.6); transform: translate(0,100%); overflow: hidden; height: 100%; } .culture-section .section-5 .section-5-box .box-item .box-item-mask p{ padding: 59px 46px; padding: 5.9rem 4.6rem; font-size: 20px; font-size: 2rem; line-height: 34px; line-height: 3.4rem; font-weight: bold; color: white; } .culture-section .section-5 .section-5-box .box-item:hover .box-item-mask{ /* display: block; */ transform: translate(0,0) } @media (max-width:960px){ .culture-section .section-2 .section-2-box{ left:0px; margin-left: 0px; width: 100%; } .culture-section .section-2 .section-2-box .box-item p{ display: none; } .culture-section .section-3 .section-3-box{ width: 100%; text-align: center; } .culture-section .section-3 .section-3-box .box-item{ float: none; display: block; } .culture-section .section-3 .section-3-box .box-text{width: 100%;padding: 0 20px;} .culture-section .section-3 .section-3-box .box-img img{max-width: 100%;height: auto;} .culture-section .section-4 .section-4-box{width: 100%;text-align: center;} .culture-section .section-4 .section-4-box + .section-4-box{margin-top:20px} .culture-section .section-4 .section-4-box.second .box-item{padding-left: 0px;} .culture-section .section-4 .section-4-box .box-item{float: none;width: 100%;text-align:center} .culture-section .section-4 .section-4-box .box-item h3{margin: 20px 0 15px;} .culture-section .section-4 .section-4-box .box-item + .box-item{margin-left:0px;margin-top: 20px;} .culture-section .section-4 .section-4-box .box-item p{padding: 0 15px;} .culture-section .section-5 .section-5-box .box-item{width: 50%;} .culture-section .section-4 .section-4-box .box-item img{max-width: 100%;height: auto;} .culture-section .section-1 h1{font-size: 40px;} .culture-section .section-1{height: auto;padding: 150px 0 50px 0px;} /* .culture-section .section-2{} */ .culture-section .section-2 h1{font-size: 32px;} .culture-section .section-item h1{font-size: 32px;} .culture-section .section-3{padding-top: 150px;} .culture-section .section-4{padding-top: 80px;} .culture-section .section-4 .section-4-box .box-item h3{font-size: 18px;} } @media (max-width:700px){ .culture-section .section-item h2{margin-bottom: 30px;} .culture-section .section-5 .section-5-box .box-item{width: 100%;} .culture-section .section-5 .section-5-box .box-item{ height: 40rem; } .culture-section .section-5 .section-5-box .box-item h4 { padding-top: 18rem; } .culture-section .section-5 .section-5-box .box-item-des { display: inline-block; float: left; margin: 20px 0 20px; } .culture-section .section-5 .section-5-box .box-item-des h3{ font-size: 18px; font-weight: bold; margin-bottom: 15px; } .culture-section .section-5 .section-5-box .box-item-des p { padding: 0 15px; font-size: 1.4rem; line-height: 2.5rem; color: #626262; } }