@font-face { font-family: Didot; src: url('../font/didot-roman.ttf'); } @font-face { font-family: Butler; src: url('../font/Butler-Regular-13.otf'); } @font-face { font-family: Butler-Stencil-light; src: url('../font/Butler-Ultra-Light-Stencil-4.otf'); } body { min-width: 590px; } body, img { -webkit-user-drag: none; } .contain { max-width: 1920px; box-sizing: border-box; padding: 0 8.33333333%; margin: 0 auto; } .full { width: 100%; height: 100%; box-sizing: border-box; } .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; } .header { user-select: none; -webkit-user-drag: none; padding-top: 39px; width: 100%; position: fixed; z-index: 9; top: 0; left: 0; background: rgba(250, 249, 250, 0.8); padding-bottom: 17px; transition: transform 0.6s cubic-bezier(0.14, 0.99, 0.43, 0.99); } .header.static { position: absolute; background: none; } .header.move { transform: translateY(-101%); } .header .wrap { display: flex; } .header .wrap .left, .header .wrap .right { width: 30%; display: flex; align-items: flex-end; padding: 7px 0; } .header .wrap .right { justify-content: flex-end; } .header .wrap .logo-wrap { flex-grow: 1; display: flex; justify-content: center; align-items: center; } .header .wrap .logo-wrap .logo-box { display: block; height: 100%; } .header .wrap .logo-wrap .logo-box .logo { height: 100%; } .headerPage { padding: 38px 0 32px; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 11; width: 100%; } .headerPage .contain { display: flex; justify-content: space-between; align-items: flex-end; } .headerPage .contain .logo { width: 140px; height: 70px; } .headerPage .contain .logo a { width: 100%; height: 100%; display: inline-block; } .headerPage .contain .nav { display: flex; justify-content: space-between; height: 40px; } .headerPage .contain .nav ul { display: flex; position: relative; } .headerPage .contain .nav ul li { margin: 0 30px; } .headerPage .contain .nav ul li a { height: 40px; line-height: 40px; display: inline-block; font-size: 16px; color: #323232; } .headerPage .contain .nav ul li:hover a { color: #94887b; font-weight: bold; } .headerPage .contain .nav ul .on a { color: #94887b; font-weight: bold; } .headerPage .contain .nav ul:after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 18px; background-color: #979797; transform: translateY(-50%); } .headerPage .contain .nav .phone { margin-left: 30px; } .headerPage .contain .nav .phone a { line-height: 40px; display: inline-block; } .headerPage .menu-switch { display: none; } .n-nav { width: 100%; height: 80px; background-color: #f2f2f2; position: fixed; z-index: 9; } .n-nav ul { width: 100%; height: 100%; display: flex; justify-content: center; } .n-nav ul li { height: 100%; width: 156px; text-align: center; } .n-nav ul li a { width: 100%; height: 100%; display: inline-block; line-height: 80px; font-size: 14px; color: #666666; font-weight: 300; } .n-nav ul li a:hover { font-weight: bold; color: #323232; } .n-nav ul .on a { font-weight: bold; color: #323232; } .products-container { position: fixed; width: 100%; height: 100%; top: 0; left: 0; height: 0; overflow: hidden; z-index: 99; background: #232323; transition: height 1s cubic-bezier(0.8, 0, 0, 1); box-sizing: border-box; } .products-container .outer-wrap { transform: translateY(-20%); opacity: 0; transition: 1s cubic-bezier(0.8, 0, 0, 1); overflow: auto; height: 100vh; padding-top: 80px; display: flex; flex-direction: column; box-sizing: border-box; } .products-container .outer-wrap ::-webkit-scrollbar { width: 7px; height: 7px; background: #232323; } .products-container .outer-wrap ::-webkit-scrollbar-thumb { background: #fff; } .products-container .outer-wrap .top { padding-bottom: 20px; } .products-container .outer-wrap .top .contain { display: flex; } .products-container .outer-wrap .top .close { display: flex; align-items: center; cursor: pointer; color: #616161; font-size: 14px; } .products-container .outer-wrap .top .close .ico { margin-right: 24px; } .products-container .outer-wrap .scroll-wrap { flex-grow: 1; height: 100px; overflow: auto; } .products-container .outer-wrap .scroll-wrap .wrap { padding-top: 40px; padding-bottom: 40px; max-width: 1400px; } .products-container .outer-wrap .scroll-wrap .en-title { font-family: Didot; font-size: 30px; line-height: 30px; letter-spacing: 2px; color: #ffffff; margin-bottom: 10px; } .products-container .outer-wrap .scroll-wrap .title { font-size: 30px; line-height: 62px; letter-spacing: 6px; color: #ffffff; } .products-container .outer-wrap .scroll-wrap .info { font-size: 14px; line-height: 18px; letter-spacing: 1px; color: #ffffff; font-weight: lighter; margin-top: 14px; max-width: 1135px; } .products-container .outer-wrap .scroll-wrap .pic { transition: 1s cubic-bezier(0.14, 0.99, 0.43, 0.99); } .products-container .outer-wrap .scroll-wrap .product-section { padding: 90px 0; } .products-container .outer-wrap .scroll-wrap .product-banener { display: block; position: relative; overflow: hidden; } .products-container .outer-wrap .scroll-wrap .product-banener .pic-wrap { height: 220px; position: relative; } .products-container .outer-wrap .scroll-wrap .product-banener .pic-wrap .pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; display: block; } .products-container .outer-wrap .scroll-wrap .product-banener .pic-wrap:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); } .products-container .outer-wrap .scroll-wrap .product-banener:hover .pic { transform: scale(1.1); } .products-container .outer-wrap .scroll-wrap .product-banener .text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 18px; line-height: 50px; letter-spacing: 4px; color: #fefefe; } .products-container .outer-wrap .scroll-wrap .product-banener .text .view { font-size: 16px; font-weight: lighter; padding: 0 4px; line-height: 18px; border-bottom: 1px solid #fff; margin-top: 40px; } .products-container .outer-wrap .scroll-wrap .list { margin-top: 60px; display: grid; grid-column-gap: 4%; grid-row-gap: 54px; grid-template-columns: 1fr 1fr 1fr 1fr; flex-wrap: wrap; } .products-container .outer-wrap .scroll-wrap .list .item { display: block; position: relative; overflow: hidden; } .products-container .outer-wrap .scroll-wrap .list .item .pic-wrap { height: 0; padding-top: 71%; position: relative; } .products-container .outer-wrap .scroll-wrap .list .item .pic-wrap .pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; display: block; } .products-container .outer-wrap .scroll-wrap .list .item:hover .pic { transform: scale(1.1); } .products-container .outer-wrap .scroll-wrap .list .item .name { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; font-size: 18px; line-height: 50px; letter-spacing: 4px; color: #fefefe; } .products-container.open { height: 100vh; } .products-container.open .outer-wrap { transform: none; opacity: 1; } .menu-container { position: fixed; width: 100%; top: 0; left: 0; height: 0; overflow: hidden; z-index: 99; background: #fff; transition: height 1s cubic-bezier(0.8, 0, 0, 1); box-sizing: border-box; } .menu-container .outer-wrap { opacity: 0; transition: 1s cubic-bezier(0.8, 0, 0, 1); overflow: auto; height: 100vh; padding-top: 80px; display: flex; flex-direction: column; box-sizing: border-box; transform: translateY(-20%); } .menu-container .outer-wrap ::-webkit-scrollbar { width: 7px; height: 7px; background: #fff; } .menu-container .outer-wrap ::-webkit-scrollbar-thumb { background: #232323; } .menu-container .outer-wrap .top { padding-bottom: 20px; } .menu-container .outer-wrap .top .contain { display: flex; justify-content: flex-end; } .menu-container .outer-wrap .top .close { display: flex; align-items: center; cursor: pointer; color: #616161; font-size: 14px; } .menu-container .outer-wrap .top .close .ico { margin-left: 24px; } .menu-container .outer-wrap .scroll-wrap { flex-grow: 1; height: 100px; overflow: auto; } .menu-container .outer-wrap .scroll-wrap .wrap { padding-top: 40px; padding-bottom: 40px; font-weight: lighter; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section { display: flex; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section a { display: block; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section a:hover { color: #6e5b46; font-weight: normal; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-group { flex-grow: 1; padding-left: 37px; padding-right: 20px; opacity: 0; transform: translateY(-10%); transition: 0.8s cubic-bezier(0.61, 0.03, 0.32, 0.92); overflow: hidden; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-group:last-child { flex-grow: 0.5; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-group:not(:first-child) { border-left: 1px solid #969696; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-group .active { color: #6e5b46; font-weight: normal; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .en-title { width: 120px; font-size: 18px; line-height: 22px; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .title { font-size: 20px; margin-top: 25px; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-childs { font-size: 16px; line-height: 30px; margin-top: 36px; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-childs .nav-item { margin-bottom: 10px; } .menu-container .outer-wrap .scroll-wrap .wrap .menu-contact { border-top: 1px solid #969696; margin-top: 250px; display: flex; align-items: center; justify-content: space-between; padding: 50px 0; } .menu-container .outer-wrap .scroll-wrap .wrap .menu-contact .contact-list { display: flex; align-items: center; } .menu-container .outer-wrap .scroll-wrap .wrap .menu-contact .contact-list .item { display: block; margin-right: 40px; } .menu-container .outer-wrap .scroll-wrap .wrap .menu-contact .contact-list .item .ico { opacity: 0.7; } .menu-container .outer-wrap .scroll-wrap .wrap .menu-contact .contact-title-wrap { color: #616161; font-size: 16px; line-height: 26px; text-align: right; } .menu-container.open { height: 100vh; } .menu-container.open .outer-wrap { transform: none; opacity: 1; } .menu-container.open .outer-wrap .navs-section .navs-group { opacity: 1 !important; transform: none !important; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(1) { transition-delay: 0.54s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(2) { transition-delay: 0.68s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(3) { transition-delay: 0.82s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(4) { transition-delay: 0.96s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(5) { transition-delay: 1.1s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(6) { transition-delay: 1.24s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(7) { transition-delay: 1.38s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(8) { transition-delay: 1.52s; } .menu-container.open .outer-wrap .navs-section .navs-group:nth-child(9) { transition-delay: 1.66s; } footer { background-color: #151515; } footer .wrap { padding-top: 44px; padding-bottom: 20px; } footer .wrap .footer-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; } footer .wrap .footer-title .logo { display: block; margin-right: 12.0625%; } footer .wrap .footer-title:after { display: block; flex-grow: 1; content: ''; height: 1px; background-color: #ffffff; opacity: 0.2; } footer .wrap .navs { display: flex; align-items: center; flex-wrap: wrap; color: #fff; font-size: 16px; line-height: 30px; } footer .wrap .navs .navitem { margin-right: 56px; position: relative; font-weight: lighter; } footer .wrap .navs .navitem:not(:last-child):after { background: #fff; display: block; content: ''; height: 16px; width: 1px; position: absolute; right: -28px; top: 50%; transform: translateY(-50%); } footer .wrap .footer-sections { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 80px; } footer .wrap .footer-sections .footer-contact { margin-bottom: 40px; display: block; } footer .wrap .footer-sections .footer-contact .title { font-family: Didot; font-size: 18px; line-height: 36px; letter-spacing: 1px; color: #ffffff; opacity: 0.26; margin-bottom: 24px; } footer .wrap .footer-sections .footer-contact .row { display: flex; } footer .wrap .footer-sections .footer-contact .row:not(:last-child) { margin-bottom: 30px; } footer .wrap .footer-sections .footer-contact .row .name { font-size: 16px; line-height: 36px; letter-spacing: 1px; color: #ffffff; margin-right: 24px; } footer .wrap .footer-sections .footer-contact .row .value { font-size: 30px; font-family: Butler-Stencil-light; line-height: 36px; letter-spacing: 2px; color: #ffffff; } footer .wrap .footer-sections .footer-letter { display: block; width: 426px; } footer .wrap .footer-sections .footer-letter .title { font-family: Didot; font-size: 18px; line-height: 36px; letter-spacing: 1px; color: #ffffff; opacity: 0.26; margin-bottom: 24px; } footer .wrap .footer-sections .footer-letter .email-form { box-sizing: border-box; border: 1px solid #fff; height: 60px; display: flex; background: none; } footer .wrap .footer-sections .footer-letter .email-form label { display: block; flex-grow: 1; } footer .wrap .footer-sections .footer-letter .email-form label input { width: 100%; height: 100%; background: none; box-sizing: border-box; padding: 18px 0 18px 18px; color: #fff; } footer .wrap .footer-sections .footer-letter .email-form label input::placeholder { color: #fff; } footer .wrap .footer-sections .footer-letter .email-form .submit { display: block; width: 100px; cursor: pointer; background: url('../images/right.png') no-repeat center; background-size: 60%; } footer .wrap .footer-sections .footer-letter .msg { font-size: 14px; font-weight: lighter; line-height: 24px; letter-spacing: 1px; color: #ffffff; margin-top: 25px; } footer .wrap .websiteInfo { display: flex; justify-content: space-between; font-weight: lighter; font-size: 14px; line-height: 30px; letter-spacing: 1px; color: #ffffff; flex-wrap: wrap; margin-top: 70px; } @media screen and (max-height: 700px) { .header { padding-top: 20px; } } @media screen and (max-width: 1200px) { .menu-container .outer-wrap .scroll-wrap .wrap .navs-section { flex-wrap: wrap; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-group { width: 25%; box-sizing: border-box; flex-grow: 0; padding-left: 10px; padding-right: 10px; margin-bottom: 50px; } .menu-container .outer-wrap .scroll-wrap .wrap .navs-section .navs-group:nth-child(4n-3) { border-left: none; } .menu-container .outer-wrap .scroll-wrap .wrap .menu-contact { justify-content: space-between; margin-top: 50px; } .menu-container .outer-wrap .scroll-wrap .wrap .menu-contact .contact-list .item { margin-right: 20px; } } @media screen and (max-width: 900px) { .header { padding-top: 20px; } .contain { padding: 0 5%; } .products-container .outer-wrap .scroll-wrap .list { grid-template-columns: 1fr 1fr; } .products-container ::-webkit-scrollbar, .menu-container ::-webkit-scrollbar { width: 4px !important; height: 4px !important; } } @media screen and (max-width: 1550px) { .contain { padding: 0 5%; } .headerPage .contain .nav ul li { margin: 0 20px; } } @media screen and (max-height: 700px) { .others-bar .share-list { padding-top: 50px; box-sizing: border-box; } .others-bar .share-list .item:not(:last-child) { margin-bottom: 30px; } } @media screen and (max-width: 1300px) { .headerPage .contain .nav ul li { margin: 0 10px; } .headerPage .contain .nav .phone { margin-left: 15px; } .mains .projects .cont-wrap .list { height: 600px; } .mains .company .content-wrap .pic-wrap { width: 50%; } .mains .company .content-wrap .cont-wrap { padding-top: 260px; } .mains .projects .cont-wrap .bg-wrap { height: 300px; } .mains .about .wrap { padding-left: 5%; } .mains .others-bar, .main .others-bar { width: 40px; display: none; } .mains .follow .contain .wrap .right .rights span, .main .follow .contain .wrap .right .rights span { font-size: 14px; } } @media screen and (max-width: 1200px) { .mains .others-bar, .main .others-bar { width: 40px; display: none; } .mains .follow .contain .wrap .right .rights span, .main .follow .contain .wrap .right .rights span { font-size: 12px; } .mains .follow .contain .wrap .left .btns .btn, .main .follow .contain .wrap .left .btns .btn { margin-right: 20px; } } @media screen and (max-width: 1080px) { .headerPage .contain { align-items: center; } .headerPage .contain .menu-switch { display: block; cursor: pointer; } .headerPage .contain .nav { display: none; } } @media screen and (max-width: 900px) { .mains .projects .cont-wrap .list, .main .projects .cont-wrap .list { display: block; height: auto; } .mains .projects .cont-wrap .list .item, .main .projects .cont-wrap .list .item { padding-right: 0 !important; width: 100% !important; position: relative; height: 370px; margin-bottom: 30px; } .mains .projects .cont-wrap .list .item .info-wrap .box .en-title, .main .projects .cont-wrap .list .item .info-wrap .box .en-title { font-size: 30px; line-height: 40px; } .mains .projects .cont-wrap .list .item .info-wrap .box .title, .main .projects .cont-wrap .list .item .info-wrap .box .title { font-size: 24px; line-height: 40px; } .mains .company .content-wrap .contain, .main .company .content-wrap .contain { display: block !important; } .mains .company .content-wrap .contain .pic-wrap, .main .company .content-wrap .contain .pic-wrap { width: 90%; } .mains .company .content-wrap .contain .cont-wrap, .main .company .content-wrap .contain .cont-wrap { box-sizing: border-box; width: 100%; padding-top: 100px; padding-left: 5%; } .mains .about, .main .about { background-size: 80% auto; background-position: top 30% center; padding-bottom: 100px; } .mains .about .wrap, .main .about .wrap { display: block; } .mains .about .wrap .pic-wrap, .main .about .wrap .pic-wrap { padding-right: 5%; margin-top: 40px; } .mains .follow .bgs, .main .follow .bgs { display: block; } .mains .follow .bgs .bgleft, .main .follow .bgs .bgleft { height: 200px; width: 100%; } .mains .follow .bgs .bgright, .main .follow .bgs .bgright { height: 130px; width: 100%; display: none; } .mains .follow .wrap, .main .follow .wrap { display: block; } .mains .follow .wrap .left, .main .follow .wrap .left { width: 100%; height: 200px; box-sizing: border-box; padding-bottom: 0; } .mains .follow .wrap .left .btns, .main .follow .wrap .left .btns { padding-right: 0; justify-content: space-between; flex-wrap: nowrap; } .mains .follow .wrap .left .btns .btn, .main .follow .wrap .left .btns .btn { margin-right: 0; } .mains .follow .wrap .left .title, .main .follow .wrap .left .title { padding: 0; } .mains .follow .wrap .right, .main .follow .wrap .right { width: 100%; flex-wrap: wrap; height: auto; padding: 30px 0; } .mains .follow .wrap .right form, .main .follow .wrap .right form { padding: 0; } .mains .follow .wrap .right .lefts, .main .follow .wrap .right .lefts, .mains .follow .wrap .right .rights, .main .follow .wrap .right .rights { width: 100%; } .mains .follow .wrap .right .lefts ul, .main .follow .wrap .right .lefts ul, .mains .follow .wrap .right .rights ul, .main .follow .wrap .right .rights ul { width: 70%; margin: 0 auto; } .mains .follow .wrap .right .lefts ul li, .main .follow .wrap .right .lefts ul li, .mains .follow .wrap .right .rights ul li, .main .follow .wrap .right .rights ul li { margin: 0; } .mains .follow .wrap .right .lefts ul, .main .follow .wrap .right .lefts ul { width: 80%; margin: 0 auto; } .mains .follow .wrap .right .lefts ul::after, .main .follow .wrap .right .lefts ul::after { display: none; } .mains .follow .wrap .right .rights, .main .follow .wrap .right .rights { margin-top: 50px; } .mains .news, .main .news { padding-bottom: 100px; } .mains .news .swiper-tabs, .main .news .swiper-tabs { margin-top: 50px; } } .main { position: relative; } .banner img { width: 100%; height: 100%; box-sizing: border-box; object-fit: cover; } .banner video { width: 100%; object-fit: cover; } .txtCon { text-align: center; } .txtCon .tit1 { font-size: 16px; line-height: 36px; opacity: 0.5; letter-spacing: 5px; text-transform: uppercase; } .txtCon .tit2 { font-size: 16px; line-height: 36px; opacity: 0.5; letter-spacing: 10px; margin-bottom: 10px; } .txtCon .tit3 { font-size: 30px; line-height: 36px; } .txtCon .color1 { color: #94887b; } .txtCon .color2 { color: #323232; } .profile .txtCon { padding: 40px 0 77px; } .profile .line { width: 69px; height: 2px; background-color: #666666; margin: 0 auto; } .profile .profile-tit { font-size: 20px; line-height: 36px; color: #050505; padding: 30px 0; text-align: center; } .profile .profile-intro { font-size: 16px; line-height: 36px; color: #323232; text-align: center; padding: 0 10%; box-sizing: border-box; max-width: 1200px; margin: 0 auto; } .profile .pic { max-width: 1200px; margin: 55px auto 0; } .profile .pic img { width: 100%; height: 100%; object-fit: cover; } .profile .numList { max-width: 1200px; margin: 0 auto; padding: 55px 0 105px; display: flex; align-items: center; justify-content: space-between; } .profile .numList li { border-right: 1px solid #bababa; padding: 0 8% 0 6%; } .profile .numList li div { font-family: Butler-Stencil-light; font-size: 40px; line-height: 36px; color: #94887b; font-weight: bold; display: flex; } .profile .numList li p { font-size: 16px; line-height: 36px; color: #323232; } .profile .numList li:first-child { padding-left: 0; } .profile .numList li:last-child { border-right: none; } .story { width: 100%; background: url(../images/aboutUs/storyBg.jpg) no-repeat center center; padding: 50px 0; } .story .pic { max-width: 1200px; height: 100%; box-sizing: border-box; object-fit: cover; padding: 40px 0; margin: 0 auto; } .story .pic img { width: 100%; height: 100%; object-fit: cover; } .story p { padding: 0 10%; font-weight: 300; font-size: 16px; line-height: 36px; color: #323232; text-align: center; box-sizing: border-box; max-width: 1200px; margin: 0 auto; } .story p:last-child { padding: 30px 10% 0; } .chairman { padding: 100px 0 35px; } .chairman .tit1 { letter-spacing: 12px; } .chairman .pic { width: 100%; overflow: hidden; padding: 90px 0 15px; } .chairman .pic img { width: 100%; height: 100%; object-fit: cover; } .chairman .introList { width: 100%; background: url(../images/aboutUs/bg1.png) no-repeat center bottom; padding-bottom: 80px; background-size: 570px 570px; display: flex; justify-content: space-between; box-sizing: border-box; overflow: hidden; } .chairman .introList .left { width: 40%; display: flex; justify-content: flex-end; box-sizing: border-box; position: relative; } .chairman .introList .left .dscIntro { margin: 50px 0 0; } .chairman .introList .left .dscIntro div { padding: 54px 18px 88px 112px; border: solid 1px #94887b; box-sizing: border-box; font-size: 16px; line-height: 36px; color: #323232; } .chairman .introList .left .dscTx { position: absolute; left: 30px; bottom: 0; background: #f4f3f2; padding: 15px 15px 80px; } .chairman .introList .left .dscTx .tx { width: 185px; overflow: hidden; } .chairman .introList .left .dscTx .tx img { width: 100%; height: 100%; object-fit: cover; } .chairman .introList .left .dscTx .zw { position: absolute; width: 206px; height: 60px; background-color: #94887b; font-size: 14px; color: #ffffff; text-align: center; line-height: 24px; margin-left: 50px; } .chairman .introList .left .dscTx .zw p { font-size: 18px; color: #ffffff; } .chairman .introList .right { width: 55%; } .chairman .introList .right .pic1 { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 270px; overflow: hidden; margin-bottom: 20px; box-sizing: border-box; } .chairman .introList .right .pic1 img { width: 100%; height: 100%; object-fit: cover; } .chairman .introList .right .pic1 img:first-child { margin-right: 20px; } .chairman .introList .right .pic2 { width: 100%; } .chairman .introList .right .pic2 img { width: 100%; height: 100%; object-fit: cover; } .history { background: #94887b; padding: 55px 0 47px; } .history .color1 { color: #ffe7cc; opacity: 0.5; } .history .color2 { color: #ffe7cc; } .history .history_swiper { position: relative; } .history .history_swiper .about_left { position: absolute; left: 20px; top: 50%; margin-top: -20px; width: 18px; height: 50px; z-index: 4; } .history .history_swiper .about_right { position: absolute; right: 80px; top: 50%; margin-top: -20px; width: 18px; height: 50px; z-index: 4; } .history .swiper-container { padding: 77px 8.33333333% 60px; } .history .swiper-container .swiper-slide { padding: 30px 35px 60px; background-color: #efedeb; box-sizing: border-box; } .history .swiper-container .swiper-slide .pic { overflow: hidden; } .history .swiper-container .swiper-slide .pic img { width: 100%; height: 100%; object-fit: cover; } .history .swiper-container .swiper-slide .year { font-size: 24px; line-height: 30px; color: #323232; padding: 20px 0 30px; } .history .swiper-container .swiper-slide p { font-size: 16px; line-height: 30px; color: #323232; } .history .contain { display: flex; align-items: center; justify-content: space-between; } .history .contain .yearIco { width: 96px; overflow: hidden; } .history .contain .yearIco img { width: 100%; height: 100%; object-fit: cover; } .history .contain .yearList { width: 80%; position: relative; } .history .contain .yearList ul { width: 100%; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #6e5b46; } .history .contain .yearList ul li { font-size: 14px; line-height: 30px; color: #6e5b46; cursor: pointer; } .history .contain .yearList ul li.on { color: #ffe7cc; } .history .contain .yearList div { position: absolute; top: 0; left: 0; width: 0%; height: 1px; background: #ffe7cc; } .honor { padding: 60px 0 125px; } .honor .wrap { width: 100%; background: url(../images/aboutUs/bg1.png) no-repeat center top; background-size: 570px 570px; } .honor .wrap .txtCon { padding-bottom: 70px; } .honor .wrap p { font-size: 16px; line-height: 36px; color: #323232; margin-bottom: 50px; text-align: center; font-weight: 300; } .honor .wrap .swiper-container { padding-left: 50px; } .honor .wrap .swiper-container .swiper-slide { width: 508px; height: 350px; position: relative; } .honor .wrap .swiper-container .swiper-slide:nth-child(3) { width: 340px; position: relative; } .honor .wrap .swiper-container .pic { width: 355px; height: 240px; background: rgba(148, 136, 123, 0.15); padding: 30px; } .honor .wrap .swiper-container .pic img { width: 100%; height: 100%; object-fit: cover; } .honor .wrap .swiper-container .swiper-slide:nth-child(3) .pic { width: 184px; } .honor .wrap .swiper-container .txt { width: 230px; height: 80px; background-color: #94887b; padding: 0 15px; font-size: 16px; line-height: 36px; color: #ffffff; position: absolute; bottom: 0; right: 0; } .honor .wrap .contain { margin-top: 70px; display: flex; align-items: center; justify-content: flex-end; } .honor .wrap .contain .swiper-tabs { display: flex; align-items: center; user-select: none; } .honor .wrap .contain .swiper-tabs .line { height: 1px; width: 66px; background: #323232; } .honor .wrap .contain .swiper-tabs .prev, .honor .wrap .contain .swiper-tabs .next { display: block; font-weight: normal; font-size: 14px; cursor: pointer; padding: 10px 34px; outline: none; } @media screen and (max-width: 1850px) { .chairman .introList .left { width: 45%; } .chairman .introList .left .dscIntro { margin: 40px 0 0; } .chairman .introList .left .dscIntro div { padding: 30px 18px 70px 70px; } .chairman .introList .left .dscTx { padding: 15px 15px 74px; } .chairman .introList .left .dscTx .tx { width: 170px; } .chairman .introList .right { width: 50%; } } @media screen and (max-width: 1630px) { .chairman .introList .left { width: 45%; } .chairman .introList .left .dscIntro { margin: 25px 0 0; } .chairman .introList .left .dscIntro div { padding: 30px 18px 50px 70px; font-size: 14px; } .chairman .introList .left .dscTx { padding: 15px 15px 74px; } .chairman .introList .left .dscTx .tx { width: 150px; } .chairman .introList .left .dscTx .zw { height: 47px; font-size: 12px; } .chairman .introList .left .dscTx .zw p { font-size: 16px; } } @media screen and (max-width: 1460px) { .profile .numList li p { font-size: 14px; } .chairman .introList .left { width: 45%; } .chairman .introList .left .dscIntro { margin: 25px 0 0; } .chairman .introList .left .dscIntro div { padding: 30px 18px 50px 70px; font-size: 14px; } .chairman .introList .left .dscTx { padding: 15px 15px 48px; left: 0; } .chairman .introList .left .dscTx .tx { width: 120px; } .chairman .introList .left .dscTx .zw { height: 47px; font-size: 12px; } .chairman .introList .left .dscTx .zw p { font-size: 16px; } } @media screen and (max-width: 1550px) { .history .swiper-container { padding: 77px 5% 60px; } } @media screen and (max-width: 1300px) { .profile .numList { flex-wrap: wrap; justify-content: center; margin: 0 auto; padding-bottom: 0; } .profile .numList li { width: 50%; border-right: 0; padding: 0; margin: 0 auto 50px; } .profile .numList li div { text-align: center; } .profile .numList li p { text-align: center; font-size: 14px; } .chairman .pic { display: none; } .chairman .introList { display: block; } .chairman .introList .left { width: 80%; margin: 0 auto 50px; } .chairman .introList .left .dscIntro { margin: 25px 0 0; } .chairman .introList .left .dscIntro div { padding: 30px 50px 70px; font-size: 16px; } .chairman .introList .left .dscTx { padding: 15px 15px 74px; left: 30px; } .chairman .introList .left .dscTx .tx { width: 185px; } .chairman .introList .left .dscTx .zw { height: 60px; font-size: 14px; } .chairman .introList .left .dscTx .zw p { font-size: 18px; } .chairman .introList .right { width: 100%; } } @media screen and (max-width: 1000px) { .chairman .introList { display: block; } .chairman .introList .left { width: 100%; margin: 0 auto 30px; } }