@import url('animate.css'); @import url('hover.css'); @font-face { font-family: 'montserratlight'; src: url('../fonts/Montserrat-Light.ttf'),url('../fonts/Montserrat-Light.woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'montserratsemibold'; src: url('../fonts/Montserrat-SemiBold.ttf'),url('../fonts/Montserrat-SemiBold.woff'); font-weight: normal; font-style: normal; } /*** ==================================================================== Reset ==================================================================== ***/ @font-face { font-family: 'optimaRegular'; src: url('../fonts/optimaRegular.ttf'); font-weight: normal; font-style: normal; } * { margin: 0px; padding: 0px; border: none; outline: none; } /*** ==================================================================== Global Settings ==================================================================== ***/ .preloader { background-color: #fff; width: 100%; height: 100%; position: fixed; z-index: 10000; } .preloader .lds-roller { display: inline-block; position: absolute; width: 64px; height: 64px; left: calc(50% - 32px); top: calc(50% - 32px); } .preloader .lds-roller span { -webkit-animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; -webkit-transform-origin: 32px 32px; -ms-transform-origin: 32px 32px; transform-origin: 32px 32px; display: block; } .preloader .lds-roller span:after { content: " "; display: block; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #baa795; margin: -3px 0 0 -3px; } .preloader .lds-roller span:nth-child(1) { -webkit-animation-delay: -0.036s; animation-delay: -0.036s; } .preloader .lds-roller span:nth-child(1):after { top: 50px; left: 50px; } .preloader .lds-roller span:nth-child(2) { -webkit-animation-delay: -0.072s; animation-delay: -0.072s; } .preloader .lds-roller span:nth-child(2):after { top: 54px; left: 45px; } .preloader .lds-roller span:nth-child(3) { -webkit-animation-delay: -0.108s; animation-delay: -0.108s; } .preloader .lds-roller span:nth-child(3):after { top: 57px; left: 39px; } .preloader .lds-roller span:nth-child(4) { -webkit-animation-delay: -0.144s; animation-delay: -0.144s; } .preloader .lds-roller span:nth-child(4):after { top: 58px; left: 32px; } .preloader .lds-roller span:nth-child(5) { -webkit-animation-delay: -0.18s; animation-delay: -0.18s; } .preloader .lds-roller span:nth-child(5):after { top: 57px; left: 25px; } .preloader .lds-roller span:nth-child(6) { -webkit-animation-delay: -0.216s; animation-delay: -0.216s; } .preloader .lds-roller span:nth-child(6):after { top: 54px; left: 19px; } .preloader .lds-roller span:nth-child(7) { -webkit-animation-delay: -0.252s; animation-delay: -0.252s; } .preloader .lds-roller span:nth-child(7):after { top: 50px; left: 14px; } .preloader .lds-roller span:nth-child(8) { -webkit-animation-delay: -0.288s; animation-delay: -0.288s; } .preloader .lds-roller span:nth-child(8):after { top: 45px; left: 10px; } @-webkit-keyframes lds-roller { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes lds-roller { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 54px; color: #000; } body, html { width: 100%; height: 100%; overflow: hidden; } a { text-decoration: none; cursor: pointer; color: #bca996; } a:hover, a:focus, a:visited { text-decoration: none; outline: none; } h1, h2, h3, h4, h5, h6 { position: relative; font-family: 'Raleway', sans-serif; font-weight: normal; margin: 0px; background: none; line-height: 1.4em; } input, button, select, textarea { font-family: 'Roboto', sans-serif; } p { position: relative; line-height: 1.8em; } ul, li { list-style: none; padding: 0px; margin: 0px; } .pageMain { width: 100%; height: 100%; } .font01 { font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .pageMain .swiper-slide { text-align: center; font-size: 18px; box-sizing: border-box; overflow: hidden; /* Center slide text vertically */ } .cnBox { max-width: 1260px; margin: 0 auto; } .cnBox1 { width: 1000px; margin: 0 auto; } .flexBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .displayFlexBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .spaceBetween { -webkit-justify-content: space-between; justify-content: space-between; } /* 头部 */ .head { background: rgba(40, 37, 35, 95); height: 70px; position: fixed; width: 100%; left: 0; top: 0; z-index: 10; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; -webkit-align-items: center; box-sizing: border-box; padding: 0 50px } .leftmenu { font-size: 16px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; color: #bca996; -webkit-justify-content: center; justify-content: center; cursor: pointer; align-items: center; -webkit-align-items: center; } .leftmenu img { margin-right: 15px; } .leftmenu span { font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .head .head_nav { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; height: 100%; -webkit-align-items: center; } .head .head_nav ul{ height: 100%; } .head .head_nav .nav-ul li { display: inline-block; font-size: 14px; text-align: center; padding: 0 10px; font-weight: 200; } .head .head_nav .nav-ul li p { font-size: 11px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .head .head_nav .logo { margin-left: 75px; } .head .head_nav .logo img { max-width: 164px; height: auto; } .menuContainer { position: fixed; z-index: 10000; color: #333; width: 100%; height: 100%; will-change: transform; -webkit-transition: all 0.6s cubic-bezier(0.79, 0, 0.55, 0.83); -o-transition: all 0.6s cubic-bezier(0.79, 0, 0.55, 0.83); transition: all 0.6s cubic-bezier(0.79, 0, 0.55, 0.83); -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); opacity: 0; left: -100%; } .menuContainer.showMenu { -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); opacity: 1; left: 0; top: 0; } .menuContainer .list { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .menuContainer .list .item { position: relative; display: block; width: 20%; height: 100%; overflow: hidden; cursor: pointer; } .menuContainer .list .item .bg { position: absolute; left: -1%; top: 0; width: 130%; height: 100%; z-index: 1; -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } .menuContainer .list .item .bg-1 { background: url(../images/bg-1.b8b793da.jpg) center/cover no-repeat; } .menuContainer .list .item .bg-2 { background: url(../images/bg-2.eacd2927.png) center/cover no-repeat; } .menuContainer .list .item .bg-3 { background: url(../images/bg-3.76b238a8.png) center/cover no-repeat; } .menuContainer .list .item .bg-4 { background: url(../images/bg-4.2dc896fb.png) center/cover no-repeat; } .menuContainer .list .item .bg-5 { background: url(../images/bg-5.d44f8746.png) center/cover no-repeat; } .menuContainer .list .item:last-child .mask { border: none; } .menuContainer .list .item .mask { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; left: 0; top: 0; right: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(185, 170, 154, 0.94); border-right: 0.125rem solid #a69889; -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } .menuContainer .list .item .content { position: absolute; left: 0; top: 50%; right: 0; z-index: 20; width: 100%; margin-top: -3.3rem; text-align: center; color: #fff4e5; } .menuContainer .list .item .content .name { font-size: 1rem; line-height: 1rem; letter-spacing: 0.1rem; } .menuContainer .list .item .content .subName { margin-top: 0.3rem; font-size: 1rem; line-height: 1rem; letter-spacing: 0.125rem; } .menuContainer .list .item:hover .bg, .menuContainer .list .item.hover .bg { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } .menuContainer .list .item:hover .mask, .menuContainer .list .item.hover .mask { background-color: rgba(185, 170, 154, 0.1); } .headerWrap .left { position: fixed; top: 1.25rem; left: 4.8vw; z-index: 9000; cursor: pointer; } .headerWrap .left:hover .iconWrap .name { color: #caac8e; } .headerWrap .left .iconWrap { letter-spacing: 0.0625rem; } .headerWrap .left .iconWrap.close { margin-top: 0.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .headerWrap .left .iconWrap.close img { width: 0.8rem; height: 0.8rem; margin-bottom: 0.3rem; } .headerWrap .left .iconWrap.menu { padding: 1em 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .headerWrap .left .iconWrap.menu img { width: 1.2rem; height: 1.2rem; margin-right: 0.8rem; } .headerWrap .left .iconWrap .name { padding-top: 0.135rem; font-size: 0.875rem; line-height: 0.875rem; letter-spacing: 0.1875rem; color: #fff; -webkit-transition: 0.3s color ease-in-out; -o-transition: 0.3s color ease-in-out; transition: 0.3s color ease-in-out; } .pagebox { position: relative; padding-top: 70px; } .imgbg { width: 100%; height: 100%; } .divbox {} .bg01 { background: url(../images/bg01.jpg) no-repeat left top; background-size: cover; } .index .page1 .text { width: 80%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff; animation-duration: '.3s'; animation-delay: '3s' } .index .page1 .text p { font-size: 15px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ letter-spacing: 10px; } .index .page1 .text h2 { font-size: 100px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ letter-spacing: 10px; } .index .page1 .text .jt { margin-top: 20px; } .index .page1.swiper-slide-active .text p { -webkit-animation: fadeInUp 1s 0.5s both; animation: fadeInUp 1s 0.5s both; } .index .page1.swiper-slide-active .text h2 { -webkit-animation: fadeInUp 1s 0.8s both; animation: fadeInUp 1s 0.8s both; } .index .page1.swiper-slide-active .text .jt { -webkit-animation: fadeInUp 1s 1s both; animation: fadeInUp 1s 1s both; } .title { font-size: 30px; color: #eae6e4; letter-spacing: 10px; padding-bottom: 50px; } .black.title { color: #282523; } .titleleft.title { text-align: left } .title p { font-size: 24px; letter-spacing: 0px; } .title.colco1 { color: #bca996; letter-spacing: 0px; } .title.colco1 p { color: #bca996; letter-spacing: 0px; } .swiper-slide-active .title { /* -webkit-animation: bounceInDown 1s .5s both; animation: bounceInDown 1s .5s both; */ } .swiper-slide-active .title p { /* -webkit-animation: fadeInDown 1s 1s both; animation: fadeInDown 1s 1s both; */ } .index .page2 { background: url(../images/bg02.jpg) no-repeat left top /cover; } .index .page2 .content { color: #eae6e4; font-size: 14px; text-align: left; margin: 0 80px; font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .index .page2 .content .cn { margin-bottom: 50px; } .index .page2.swiper-slide-active .content .cn { -webkit-animation: fadeInUp 1s .8s both; animation: fadeInUp 1s .8s both; } .index .page2 .content p { padding-bottom: 30px; } .index .page2.swiper-slide-active .content .en { -webkit-animation: fadeInUp 1s 1s both; animation: fadeInUp 1s 1s both; } .index .page3 { background: #eae6e4; } .index .page3 .title p { letter-spacing: 0px; } .index .page3 .layoutBox .left { width: 535px; margin-right: 50px; } .index .page3 .layoutBox .right { flex: 1; } .index .page3.swiper-slide-active .layoutBox .left { -webkit-animation: fadeInLeft 1s .8s both; animation: fadeInLeft 1s .8s both; } .index .page3.swiper-slide-active .layoutBox .right { -webkit-animation: fadeInRight 1s .8s both; animation: fadeInRight 1s .8s both; } .index .page3 .layoutBox .right .tabBarTop { font-size: 0; text-align: center; margin-bottom: 30px; } .index .page3 .layoutBox .right .tabBarTop li { display: inline-block; border-bottom: 2px solid #e4deda; position: relative; padding: 0 20px; font-size: 18px; padding-bottom: 20px; cursor: pointer; } .index .page3 .layoutBox .right .tabBarTop li p { font-size: 14px; color: #bca996 } .index .page3 .layoutBox .right .tabBarTop li.active::after { content: ''; width: 100%; position: absolute; height: 4px; background: #bca996; bottom: 0; left: 0; } .index .page3 .layoutBox .right .tabBarCn { font-size: 14px; color: #282523; text-align: left; height: 405px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .index .page3 .layoutBox .right .tabBarCn li { display: none } .index .page3 .layoutBox .right .tabBarCn p { padding-bottom: 20px; } .index .page3 .layoutBox { width: 1100px; margin: 0 auto } #certify { position: relative; width: 100%; margin: 0 auto; height: 506px; overflow: hidden;; } #certify .swiper-container { padding-bottom: 6px; } #certify .swiper-slide { width: 350px; height: 500px; box-sizing: border-box } #certify .swiper-slide img { display: block; } #certify .swiper-slide p { line-height: 98px; padding-top: 0; text-align: center; color: #636363; font-size: 1.1em; margin: 0; } #certify .swiper-pagination { width: 100%; bottom: 20px; text-align: right } #certify .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 1px solid #000; width: 6px; height: 6px; opacity: 1; background: none } #certify .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 1px solid #000; background: #000; } #certify .swiper-button-prev { left: -30px; width: 45px; height: 45px; background-position: 0 0; background-size: 100%; } #certify .swiper-button-prev:hover { background-position: 0 -46px; background-size: 100% } #certify .swiper-button-next { right: -30px; width: 45px; height: 45px; background-position: 0 -93px; background-size: 100%; } #certify .swiper-button-next:hover { background-position: 0 -139px; background-size: 100% 0 } .index .page4 { background: url(../images/bg03.jpg) no-repeat left top /cover; } .index .page4 .OurCulture { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fcfafa; overflow: hidden; } .index .page4 .OurCulture .line { position: absolute; top: 12rem; left: 50%; z-index: 1; width: 0.0625rem; height: 12.4rem; background-color: #b3b1b1; } .index .page4 .OurCulture>.title { font-size: 1.875rem; line-height: 1.4; letter-spacing: 0.3125rem; } .index .page4 .OurCulture>.subTitle { margin-bottom: -1.25rem; font-size: 1.125rem; line-height: 1.4; letter-spacing: 0.125rem; } .index .page4 .OurCulture .innerWrap { position: relative; z-index: 1000; display: -webkit-box; display: -ms-flexbox; display: flex; color: #282523; width: 100%; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .index .page4 .OurCulture .innerWrap a { color: #282523; } .index .page4 .OurCulture .innerWrap .content { text-align: center; position: relative; z-index: 20; padding-top: 50px; padding-bottom: 50px } /* .index .page4 .OurCulture .innerWrap .content .downbtn { -webkit-transition: -webkit-transform 0.3s linear; transition: -webkit-transform 0.3s linear; -o-transition: transform 0.3s linear; transition: transform 0.3s linear; transition: transform 0.3s linear, -webkit-transform 0.3s linear; margin-top: 2.1rem; } */ /* .index .page4 .OurCulture .innerWrap .content .downbtn span { display: inline-block; width: 31px; height: 32px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAZCAYAAADNAiUZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAASZJREFUeNq01j0PATEYB/C73GSTY7tFIhI2k91mtNqYfR4z28XGJ7BbGAxEjDbBxiDhX9HES1+ep1dP8k+r1+anRSOsVsqdIAgayB4ZrLe7S+C5YOTQ9JEEmUeH42lVLMQxXtTEc/QXGLv9C8Sm0kg8+BesAsV4JCf4hnXgB+oTNoE/qA/YBirRLDAF1KIuMBU0ohyYA1pRCswFSagJdgFFhVg4RNtFlkgTC8+Gz+39ypwgbQqIdXk0M6SOjMLXoAssiwVibk9eg1McWQndlgj6Y4xdLUeduIDP4/2aRN4x4TerBH9QX7AJVKJZYRuoRV1hCmhEHb7VJNCKUmEOSEJtMBckozrYBSTfvZoLZIM25YKsnSp2LIsFZvmXN0TurzfArocAAwCgmzPIEjTv7wAAAABJRU5ErkJggg==) center/cover no-repeat; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } */ /* .index .page4 .OurCulture .innerWrap .content .downbtn span.current { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } */ .index .page4 .OurCulture .innerWrap a:hover .mask { background-color: rgba(255, 255, 255, 0.64) !important; } /* .index .page4.swiper-slide-active .OurCulture .innerWrap .item:nth-child(1) { -webkit-animation: fadeIn 1s 1.5s both; animation: fadeIn 1s 1.5s both; } .index .page4.swiper-slide-active .OurCulture .innerWrap .item:nth-child(2) { -webkit-animation: fadeIn 1s 1.8s both; animation: fadeIn 1s 1.8s both; } .index .page4.swiper-slide-active .OurCulture .innerWrap .item:nth-child(3) { -webkit-animation: fadeIn 1s 2.1s both; animation: fadeIn 1s2.1ss both; } .index .page4.swiper-slide-active .OurCulture .innerWrap .item:nth-child(4) { -webkit-animation: fadeIn 1s 2.4s both; animation: fadeIn 1s 2.4s both; } */ .index .page4 .OurCulture .innerWrap .item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; overflow: hidden; cursor: pointer; margin-right: 1vw; } .index .page4 .OurCulture .innerWrap .item:last-child { margin-right: 0; } .index .page4 .OurCulture .innerWrap .item .bg { position: absolute; top: 0; width: 130%; height: 100%; z-index: 1; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .index .page4 .OurCulture .innerWrap .item:hover .bg { background-position: right center; } .index .page4 .OurCulture .innerWrap .item:hover .mask { background-color: rgba(255 , 255, 255, 0.5) !important; } .index .page4 .OurCulture .innerWrap .item .bg-1 { background: url(../images/bg-1.16ae6bce.png) center/cover no-repeat; } .index .page4 .OurCulture .innerWrap .item .bg-2 { background: url(../images/bg-2.7ae54491.png) center/cover no-repeat; } .index .page4 .OurCulture .innerWrap .item .bg-3 { background: url(../images/bg-3.4b15d3b6.png) center/cover no-repeat; } .index .page4 .OurCulture .innerWrap .item .bg-4 { background: url(../images/bg-4.743de22e.png) center/cover no-repeat; } .index .page4 .OurCulture .innerWrap .item .title { font-size: 1.375rem; line-height: 1.5; letter-spacing: 0.1875rem; padding-bottom: 0px; color: #000; } .index .page4 .OurCulture .innerWrap .item .subTitle { font-size: 1.125rem; line-height: 1.5; letter-spacing: 0.125rem; } .index .page4 .OurCulture .innerWrap .item .descList { margin-top: 50px; letter-spacing: 0.1875rem; text-align: center; font-size: 12px; font-family: 'Hiragino Sans GB'; min-height: 70px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .index .page4 .OurCulture .innerWrap .item .subDescList { font-family: 'Butler'; font-size: 12px; margin-top: 3rem; text-align: center; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; -o-transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .index .page4.swiper-slide-active .OurCulture .innerWrap .item .title { -webkit-animation: fadeInUp 0.5s 0.5s both; animation: fadeInUp 0.5s 0.5s both; } .index .page4.swiper-slide-active .OurCulture .innerWrap .item .subTitle { -webkit-animation: fadeInUp 0.5s 0.8s both; animation: fadeInUp 0.5s 0.8s both; } .index .page4.swiper-slide-active .OurCulture .innerWrap .item .descList { -webkit-animation: fadeInUp 0.5s 1.1s both; animation: fadeInUp 0.5s 1.1s both; } .index .page4.swiper-slide-active .OurCulture .innerWrap .item .subDescList { -webkit-animation: fadeInUp 0.5s 1.5s both; animation: fadeInUp 0.5s 1.5s both; } .index .page4 .OurCulture .innerWrap .item .hasmore { height: 7.1rem; overflow: hidden; } .index .page4 .OurCulture .innerWrap .item .mask { -webkit-box-sizing: border-box; box-sizing: border-box; position: absolute; z-index: 2; left: 0; top: 0; right: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(185, 170, 154, 0.99); -webkit-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); -o-transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1s cubic-bezier(0.19, 1, 0.22, 1); } /* .index .page4 .OurCulture .innerWrap .item.hover .bg { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } */ .index .page4 .OurCulture .innerWrap .item.hover .content { color: #fff; } .index .page4 .OurCulture .innerWrap .item.hover .mask { background-color: rgba(185, 170, 154, 0); } .index .page4 .OurCulture .bottomBg { width: 100vw; background-color: #d2d0cb; } .index .page4 .OurCulture .bottomBg .videCon { width: 90%; background: #000; height: 60.5rem; margin: 0 auto; margin-top: 20rem; margin-bottom: 10rem; text-align: center; background: url(../images/vide.0cffde23.jpg) center/contain no-repeat; line-height: 60.5rem; font-size: 10rem; } .footer { height: 250px !important; background: #282523; -webkit-justify-content: space-between; justify-content: space-between; font-size: 12px !important; color: #bca996; } .footer.pagebox { padding: 0; } .footer .left { margin-left: 50px; text-align: left; font-weight: 200; } .footer .left img { margin-bottom: 15px; width: 164px; height: auto; } .footer .cn { text-align: center } .footer .right { margin-right: 50px; text-align: right; width: 310px; font-weight: 200; } /* 正大宝库 */ .treasury-container { width: 100%; height: 100%; } .treasury-container.swiper-pagination { left: 30px; bottom: 80px; width: auto; } .treasury-container .swiper-slide { position: relative; overflow: hidden; } .swiper-pagination-bullet { width: 10px; height: 10px; background: none; border: 1px solid #fff; opacity: 1; } .treasury-container .swiper-pagination-bullet-active { background: #000 } .treasury .treasury-container.swiper-container-horizontal>.swiper-pagination-bullets { bottom: 35px } .swiper-pagination-bullet-active { background: #fff; } .full { position: absolute; } .full img { width: 100%; } .slide-1 .preload { background: url(../images/my03.jpg) no-repeat center center/auto 100% ; width: 100%; height: 100%; } /* .slide-2 .preload { background: url(../images/my03.jpg) no-repeat center center/100% auto; } .slide-3 .preload { background: url(../images/my03.jpg) no-repeat center center/100% auto; } .slide-4 .preload { background: url(../images/my03.jpg) no-repeat center center/100% auto; } */ .homepage-left100 { width: 100%; position: absolute; left: 100%; top: 44%; z-index: 10; transform: translate(-50%, -50%); } .homepage-left100 .txt { text-transform: uppercase; font-size: 48px; letter-spacing: 16px; line-height: 72px; } .txtCenter { position: absolute; top: 45%; left: 50%; z-index: 10; transform: translate(-50%, -50%); text-align: center; width: 100%; padding: 15px; } .txtCenter .txt { font-size: 125px; letter-spacing: -2px; line-height: 115px; color: #121212; text-align: center; text-transform: uppercase; font-family: "Arial Black", Gadget, sans-serif; } .whiteTxt { position: absolute; top: 45%; left: 50%; z-index: 10; transform: translate(-50%, -50%); text-align: center; width: 100%; } .whiteTxt .txt { font-size: 65px; letter-spacing: -2px; line-height: 82px; color: #ffffff; text-align: center; font-family: "Arial Black", Gadget, sans-serif; } footer { width: 100%; height: 70px; position: absolute; bottom: 0; background: #fff; z-index: 30; line-height: 70px; text-indent: 30px; } @media only screen and (max-width:768px) { header, footer { position: static; } .swiper-container { height: auto; } .swiper-button-prev, .swiper-button-next, header ul li:not(:first-child) { display: none; } .homepage-left100 .txt { font-size: 24px; letter-spacing: 8px; line-height: 36px; } .txtCenter .txt { font-size: 60px; letter-spacing: 0; line-height: 55px; } .whiteTxt .txt { font-size: 30px; letter-spacing: 0; line-height: 40px; } .swiper-container .swiper-pagination { bottom: 10px; } .pcHidden { display: block; } } .pagefootermenu { position: absolute; width: 100%; height: 70px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; -webkit-align-items: center; z-index: 20; background: rgba(40, 37, 35, 95); text-align: center; bottom: 0; -webkit-justify-content: center; justify-content: center; display:none; } .pagefootermenu.active { position: fixed; top: 0; display:flex; } .pagefootermenu li { display: inline-block; font-size: 14px; text-align: center; padding: 0 10px; font-weight: 200; } .pagefootermenu p { font-size: 11px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .pagefootermenu .leftmenu { position: absolute; left: 50px; display: none } .pagefootermenu.active .leftmenu { display: flex; } .hide { display: none } .treasury .page2 { background: url(../images/bg04.jpg) no-repeat left top /cover; } .treasury .page2 .content { display: flex; text-align: left; color: #fff; font-size: 12px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page2 .content p { padding-bottom: 20px } .treasury .page2 .content .cn { width: 400px; display: inline-block; margin-right: 120px; } .treasury .page2 .content .en { width: 300px; display: inline-block; margin-right: 200px; height: 350px; } .treasury .page2 .content.flexBox { justify-content: flex-start; } .treasury .page2 .text-container { height: 350px; font-size: 12px; } .treasury .page2 .titleleft.title p{ letter-spacing: 2px; } .text-container { height: 100%; } .text-container.swiper-container-vertical>.swiper-scrollbar { left: 0; right: auto; } .text-container.swiper-container-vertical>.swiper-wrapper { padding-left: 25px; box-sizing: border-box; } .text-container.swiper-container-vertical .swiper-scrollbar { width: 4px; background: none; } .text-container.swiper-container-vertical .swiper-scrollbar::after { position: absolute; width: 1px; height: 100%; left: 0; top: 0; background: #a09e9d; content: ''; } .text-container.swiper-container-vertical .swiper-scrollbar-drag { background: #565656; border-radius: 0; } .treasury .page2 .text-container .swiper-slide { height: auto; font-size: 12px; text-align: left; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page2 .text-container .swiper-wrapper { padding-left: 20px; } .treasury .page2 .content .en .swiper-container-vertical>.swiper-scrollbar { left: 0px } .treasury .page2 .content .en .swiper-scrollbar-drag { background: #bca996; } .treasury .page3{ background: #1f150c } .treasury .page3 .leftNav { width: 20%; height: 100%; background: #eae6e4; box-sizing: border-box; padding: 20px; } .treasury .page3 .leftNav .navlist { font-size: 12px; text-align: left; } .treasury .page3 .leftNav .navlist li { display: flex; cursor: pointer; margin-bottom: 25px; font-size: 14px; } .treasury .page3 .leftNav .navlist li>div:first-child { width: 20px; } .treasury .page3 .leftNav .navlist li p { white-space: nowrap; font-size: 12px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page3 .leftNav .title { font-size: 26px; text-align: left; margin-top: 50px; } .treasury .page3 .leftNav .title p { letter-spacing: 0px; } .treasury .page3 .rightList { width: 100%; height: 100%; position: relative; } .treasury .page3 .rightList .boxlist{ position: absolute; width: 66.6666%; height: 83%; background: #b7a491; left: 0; right: 0; top: 0; bottom: 0; margin: auto; z-index: 999; box-sizing: border-box; overflow: hidden; } .treasury .page3 .rightList .boxlist .icon_close{ position: absolute; width: 30px; height: 30px; right: 30px; top: 30px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .treasury .page3 .rightList .boxlist .icon_close img{ width: 20px; height: 20px; } .treasury .page3 .rightList .cnbox_l{ text-align: left; font-size: 14px; } .treasury .page3 .rightList .cnbox_l p{ padding-bottom: 5px; } .treasury .page3 .rightList .iconlist { font-size: 0px; padding: 60px 0 50px 0; } .treasury .page3 .rightList .iconlist p{ display: inline-block; width: 20%; text-align: center; font-size: 14px; } .treasury .page3 .rightList .iconlist p span{ display: block; text-align: center; } .treasury .page3 .rightList .iconlist p img{ width: 50px; height: auto; } .treasury .page3 .rightList .boxlist li{ padding: 50px 50px 50px 50px ; color: #fff; } .treasury .page3 .rightList .boxlist li .tab{ text-align: left; font-size: 14px; } .treasury .page3 .rightList .boxlist li .tab span{ cursor: pointer; } .treasury .page3 .rightList .boxlist li .titleleft{ padding-bottom: 0px; color: #fff !important; letter-spacing: 0px; } .treasury .page3 .rightList .boxlist li .hidden{ display: none } .treasury .page3 .rightList .boxlist li .box { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .treasury .page3 .rightList .boxlist li .box .item{ text-align: left; font-size: 14px; padding-right: 50px; flex: 0 0 1; width: 25%; box-sizing: border-box; } .treasury .page3 .rightList .boxlist li .box .item .icon img{ width: 30px; height: auto; margin-left: 15px; margin-bottom: 10px; } .treasury .page3 .rightList .boxlist li .box .item .title{ font-size: 14px; color: #fff; letter-spacing: 0px; padding-bottom: 20px; } .treasury .page3 .rightList .boxlist li .box .item:last-child{ padding-right: 0px; } .treasury .page3 .rightList .boxlist li .en .box .cntext p{ line-height: 24px; } /* .boxlist li>h3{ font-size: 16px; } .boxlist li>p{ font-size: 16px; } */ .swiperList-container { height: 100%; ; } .listpage { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; } .listpage .item-slide { text-align: center; font-size: 18px; background: #fff; position: relative; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; width: 16.6666666666%; -webkit-transition: all .6s cubic-bezier(0.61, -0.19, 0.7, -0.11); -o-transition: all .6s cubic-bezier(0.61, -0.19, 0.7, -0.11); transition: all .6s cubic-bezier(0.61, -0.19, 0.7, -0.11); overflow: hidden; } .listpage .item-slide:nth-child(1) { -webkit-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); -o-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); background: url(../images/bg-chara-1.7590a7b6.jpg) no-repeat right top / cover; } .listpage .item-slide:nth-child(2) { -webkit-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); -o-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); background: url(../images/bg-chara-2.5104364b.jpg) no-repeat right top / cover; } .listpage .item-slide:nth-child(3) { -webkit-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); -o-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); background: url(../images/img.jpg) no-repeat right top / cover; } .listpage .item-slide:nth-child(4) { -webkit-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); -o-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); background: url(../images/bg-chara-4.a92c9251.jpg) no-repeat right top / cover; } .listpage .item-slide:nth-child(5) { -webkit-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); -o-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); background: url(../images/img.21763693.jpg) no-repeat right top / cover; } .listpage .item-slide:nth-child(6) { -webkit-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); -o-transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); transition: all .6s cubic-bezier(.1, 0.9, 0, 1.01); background: url(../images/img.65e90bf1.jpg) no-repeat right top / cover; } .listpage .bg { position: absolute; width: 100%; height: 100%; background: rgba(110, 56, 3, 0.24); } .listpage .item-slide:hover { background-position: center; } .listpage .item-slide .cn { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .listpage .item-slide .cn h2 { color: #fff; font-size: 16px; } .listpage .item-slide .cn p { font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ font-size: 12px; color: #fff; } .addicon { position: absolute; bottom: 50px; right: 20px; cursor: pointer; z-index: 30; } .listpage .item-slide { cursor: pointer; } .listpage .item-slide.active { width: 500px; } .listpage .item-slide.active:hover { background-position: right top; /*-webkit-transition: none; -o-transition: none; transition: none;*/ } .listpage .item-slide .activeCn .text { font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .listpage .item-slide .activeCn .text p{ line-height: 20px; } .listpage .item-slide.active .activeCn { transition: all .5s cubic-bezier(.1, 0.9, 0, 1.01); /* display: block; */ opacity: 1; } .listpage .item-slide.active .cn { display: none } .listpage .item-slide.active .addicon { display: none; } .activeCn { background: rgba(84, 22, 24, 0.6); -webkit-transition: all 1s cubic-bezier(.1, 0.9, 0, 1.01); -o-transition: all 1s cubic-bezier(.1, 0.9, 0, 1.01); transition: all 1s cubic-bezier(.1, 0.9, 0, 1.01); font-size: 12px; color: #fff; text-align: left; padding: 55px 20px; margin-right: 100px; width: 400px; flex: 0 0 auto; box-sizing: border-box; position: relative; opacity: 0; z-index: 3; } .activeCn h3 { font-size: 30px; } .activeCn>p { font-size: 20px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ line-height: 24px; padding-bottom: 15px; } .activeCn .tab{ padding-top: 15px; padding-bottom: 0px; font-size: 12px; color: #fff; border-bottom: 2px solid #fff; display: inline-block; } .activeCn .tab span{ font-size: 12px; display: inline-block; padding: 3px 0px; } .activeCn .tab span:nth-child(1){ padding-right: 5px; } .activeCn .tab span:nth-child(2){ padding-left: 5px; } .activeCn .tab span.active{ /*background: rgba(255, 255, 255, .2);*/ } .activeCn .text>p:nth-child(3) { /* padding-top: 20px; */ } .swiper-button-next { top: auto; bottom: 50px; background: url(../images/jt02.png) no-repeat center center / 100% auto; } .swiper-button-prev { top: auto; background: url(../images/jt01.png) no-repeat center center / 100% auto; bottom: 50px; } .treasury .page4 .content .cn { font-size: 14px; text-align: left; font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page4 .content .en { padding-top: 30px; font-size: 14px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ text-align: left } .treasury .page4 .cntab { padding-top: 30px; } .treasury .page4 .cntab .tabBarTop { text-align: center; margin-bottom: 30px; display: flex } .treasury .page4 .cntab .tabBarTop li { border-bottom: 2px solid #e4deda; position: relative; font-size: 14px; padding-bottom: 10px; cursor: pointer; width: 25%; font-weight: bold } .treasury .page4 .cntab .tabBarTop li p { font-size: 12px; font-weight: normal } .treasury .page4 .cntab .tabBarTop li.active::after { content: ''; width: 100%; position: absolute; height: 4px; background: #bca996; bottom: -2px; left: 0; } .treasury .page4 .tabBarCn { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .treasury .page4 .tabBarCn li { margin-right: 3px; cursor: pointer; -webkit-transition: all .3s cubic-bezier(0.4, 0, 1, 1); -o-transition: all .3s cubic-bezier(0.4, 0, 1, 1); transition: all .3s cubic-bezier(0.4, 0, 1, 1); width: 25%; height: 330px; position: relative; overflow: hidden; } .treasury .page4 .tabBarCn li.active { width: 120%; background: #f2eeeb; -webkit-transition: all .3s cubic-bezier(0.4, 0, 1, 1); -o-transition: all .3s cubic-bezier(0.4, 0, 1, 1); transition: all .3s cubic-bezier(0.4, 0, 1, 1); flex: 0 0 auto; } .treasury .page4 .tabBarCn li .img { /*object-fit: contain;*/ margin-top: -25%; display: block; } .treasury .page4 .tabBarCn li.active .img { display: none; } .treasury .page4 .tabBarCn li .cn_box { height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; visibility: hidden; position: absolute; width: 100%; left: 0; top: 0; transition: all 1s; opacity: 0; -webkit-justify-content: space-between; justify-content: space-between; } .treasury .page4 .tabBarCn li .cn_box img { height: auto; width: 610px; border-right: 3px solid #fff; } .treasury .page4 .tabBarCn li .cn_box .text { font-size: 14px; flex: 0 0 auto; width: 580px; text-align: left; padding: 25px; box-sizing: border-box; height: 240px; font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ position: relative; } .treasury .page4 .tabBarCn li .cn_box .text .linknet { background: #baa896; color: #fff; font-size: 14px; text-align: center; left: 25px; right: 25px; position: absolute; bottom: -37px; height: 37px; line-height: 37px; } .treasury .page4 .tabBarCn li .cn_box .text .text-container { height: 100%; } .text-container { height: 100%; } .text-container .swiper-slide { height: auto; font-size: 14px; text-align: left;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page4 .tabBarCn li .cn_box .text p.botp { margin-bottom: 15px; } .treasury .page4 .tabBarCn li.active .cn_box { visibility: visible; opacity: 1; } .treasury .page5 { background: #eae6e4; } .treasury .page5 .box .li { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding-bottom: 40px; } .treasury .page5 .box li.active {} .treasury .page5 .box .left { flex: 1; padding-top: 70px; position: relative; } .treasury .page5 .box .left li { display: none; height: 100%; } .treasury .page5 .box .left li.active { /* -webkit-animation: fadeInUp .5s both; animation: fadeInUp .5s both; */ display: block } .treasury .page5 .box .right li { display: none } .treasury .page5 .box .right li.active { display: block; /* -webkit-animation: fadeInRight 1s 0.5s both; animation: fadeInRight 1s 0.5s both; */ } .treasury .page5 .box .right { width: 420px; font-size: 0; } .treasury .page5 .box .left .name { font-size: 24px; text-align: left; padding-bottom: 40px; letter-spacing: 5px; } .treasury .page5 .box .left .name p { letter-spacing: 0px; } .treasury .page5 .box .left .text { font-size: 14px; text-align: left; padding-bottom: 40px; width: 400px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page5 .box .left .scrollText { height: 130px; width: 300px; } .treasury .page5 .box .left .scrollText .swiper-slide p { font-size: 12px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page5 .box .left .name p { font-size: 18px; line-height: normal; } .treasury .page5 .box .right .name { font-size: 30px; text-align: left; padding-bottom: 20px; letter-spacing: 5px; white-space: nowrap; } .treasury .page5 .box .left .scrollText .text-container .swiper-slide { padding-bottom: 50px; } .treasury .page5 .box .right .img { height: 510px; overflow: hidden; } .treasury .page5 .box .right span { font-size: 24px; padding-left: 15px; letter-spacing: 0px; } .treasury .page5 .box .right .img img { width: 100%; } .treasury .page5 .boxfooter li { border: 1px solid #baa795; text-align: center; font-size: 16px; flex: 1; margin-right: 40px; cursor: pointer; padding: 3px 0; } .treasury .page5 .boxfooter li.active { background: #baa795; color: #fff; } .treasury .page5 .boxfooter li:nth-child(4) { margin-right: 0px; } .treasury .page5 .boxfooter li p { font-size: 12px; } .treasury .page5 .boxfooter { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .treasury .page5 .box .left .footerTitle { position: absolute; left: 0; bottom: 0; padding-bottom: 10px; text-align: left; } .treasury .page5 .box .left .footerTitle p { position: relative; text-align: left; display: inline-block; margin-top: 10px; /* border-bottom: 2px solid #282523; */ cursor: pointer; } .treasury .page5 .box .left .footerTitle .divbox p::before { position: absolute; width: 0%; height: 2px; background:#282523 ; content: ''; left: 0; bottom: 0; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; /* border-bottom: 2px solid #282523; */ } .treasury .page5 .box .left .footerTitle .divbox.active p::before,.treasury .page5 .box .left .footerTitle .divbox:hover p::before { width: 100%; /* border-bottom: 2px solid #282523; */ } .treasury .page6 { background: #eae6e4; } .treasury .page6 .title p { letter-spacing: 0px; } .treasury .page6 .layoutBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; height: 550px; -webkit-justify-content: space-between; justify-content: space-between; } .treasury .page6 .layoutBox .box1 { background: #fff; width: 48%; height: 47%; position: relative; /* margin-right: 25px; */ /* margin-bottom: 25px; */ } .treasury .page6 .layoutBox .box1 .cn { overflow: hidden; height: 100%; } .treasury .page6 .layoutBox .box1 .en { overflow: hidden; height: 100%; } .treasury .page6 .layoutBox .box1 .text-container .swiper-slide { padding: 0 38px; border-right: 6px solid #b7a491; margin-bottom: 10px; } .treasury .page6 .layoutBox .box1 .mouseOUT { height: 65%; } /* .treasury .page6 .layoutBox .box1:nth-child(2) .mouseOUT { height: 45%; } */ .treasury .page6 .title { padding-bottom: 20px } .treasury .page6 .layoutBox .box1:nth-child(3) { align-self: flex-end; } .treasury .page6 .layoutBox .box1:nth-child(4) { align-self: flex-end; } .treasury .page6 .layoutBox .text-container.swiper-container-vertical>.swiper-wrapper { padding-left: 0 } .treasury .page6 .layoutBox .text-container.swiper-container-vertical .swiper-scrollbar { display: none } .treasury .page6 .title_01 { font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ font-size: 24px; text-align: left; padding: 25px 38px 15px 38px; } .treasury .page6 .cntext li { padding: 4px 0; cursor: pointer; } .treasury .page6 .cntext li h3 { font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .treasury .page6 .cntext li h3 span:first-child { margin-right: 20px; width: 80%; } .treasury .page6 .cntext li .text { font-size: 12px; padding: 10px 0; color: #666; width: 100%;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .treasury .page6 .cntext li .text p { padding-bottom: 5px; line-height: 1.5em; } .treasury .page6 .cntext li h3 .more { width: 11px; height: 11px; margin-right: 10px; position: relative; } .treasury .page6 .cntext li h3 .more::after { content: ''; width: 1px; height: 100%; position: absolute; left: 0; right: 0; margin: auto; background: #000; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .treasury .page6 .cntext li.active h3 .more::after { transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } .treasury .page6 .cntext li h3 .more::before { content: ''; width: 100%; height: 1px; background: #000; top: 0; bottom: 0; margin: auto; position: absolute; } .treasury .page7 { background: url(../images/my12.jpg) no-repeat center center /cover; } .treasury .page7 .black.title{ position: absolute; text-align: center; width: 100%; top: 100px; left: 0; } .hidden { display: none } .language { position: absolute; top: -25px; right: 0; background: #282523; color: #fff; font-size: 12px; height: 25px; line-height: 25px; text-align: center; } .language span { display: inline-block; padding: 0 12px; cursor: pointer; } /* 艺享 */ .nesting_swipercontainer, .nesting_swipercontainer_2 { width: 100%; height: 100%; } .nesting_swipercontainer .swiper-slide, .nesting_swipercontainer_2 .swiper-slide { font-size: 18px; height: auto; -webkit-box-sizing: border-box; box-sizing: border-box; /* padding: 30px; */ } .joyofart .page1 { background: #282523; flex-flow: wrap; } .joyofart .page1 .cnPages_footer{ width: 100%;height:40% } .joyofart .page1.swiper-slide-active .cnPages_footer{ -webkit-animation: fadeInUp 1s .8s both; animation: fadeInUp 1s .8s both; } .joyofart .page1 .cnPages_footer .title{ padding-bottom: 0px; } .joyofart .page2 { background: #282523; } .contentText { color: #b7a491; font-size: 14px; text-align: left; padding-top: 35px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } /* .cnPages2title { margin-top: 50px; } */ .joyofart .page2 .CPARTSPACE_swiper .swiper-slide .img { font-size: 0; position: relative; width: 100%; height: 450px; overflow: hidden; } .joyofart .page2 .CPARTSPACE_swiper .swiper-slide .img .til { position: absolute; width: 100%; left: 0; bottom: 0; box-sizing: border-box; padding: 15px; text-align: center; color: #bca996; font-size: 16px; background: rgba(40, 37, 35, .9) } .joyofart .page2 .CPARTSPACE_swiper .swiper-slide .img .til p { font-size: 12px; } .joyofart .page2 .cnPages2 .contentText { padding: 80px 0; } .joyofart .page2 .CPARTSPACE_swiper .swiper-slide img { width: 100%; height: auto; } .joyofart .page3 { background: #eae6e4; } .joyofart .page3 .box { position: relative; margin-top: 200px } .joyofart .page3 .box .navigationLeft { position: absolute; width: 50px; height: 50px; left: -110px; top: 0; bottom: 0; cursor: pointer; margin: auto; } .joyofart .page3 .box .navigationRight { position: absolute; width: 50px; height: 50px; right: -110px; cursor: pointer; top: 0; bottom: 0; margin: auto } .joyofart .page3 .box .li { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding-bottom: 40px; } .joyofart .page3 .box li.active {} .joyofart .page3 .box .left { flex: 1; position: relative; } .joyofart .page3 .box .left li { display: none; height: 100%; } .joyofart .page3 .box .left li.active { /* -webkit-animation: fadeInUp .5s both; animation: fadeInUp .5s both; */ display: block } .joyofart .page3 .box .right li { display: none } .joyofart .page3 .box .right li.active { display: block; /* -webkit-animation: fadeInRight .5s both; animation: fadeInRight .5s both; */ } .joyofart .page3 .box .right { width: 320px; font-size: 0; } .joyofart .page3 .box .left .name { font-size: 24px; text-align: left; padding-bottom: 40px; letter-spacing: 5px; } .joyofart .page3 .box .left .text { font-size: 14px; text-align: left; padding-bottom: 40px; width: 450px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .joyofart .page3 .box .left .scrollText { height: 130px; width: 450px; text-align: left; font-size: 12px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; } .joyofart .page3 .box .left .scrollText .swiper-slide p { font-size: 12px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .joyofart .page3 .box .left .name p { font-size: 18px; line-height: normal; letter-spacing: 0px; } .joyofart .page3 .box .left .name p.miaoshu { font-size: 12px; line-height: normal; color: #282523; letter-spacing: 0px; padding-left: 35px; } .joyofart .page3 .box .right .name { font-size: 30px; text-align: left; padding-bottom: 20px; letter-spacing: 5px; } .joyofart .page3 .box .left .scrollText .text-container .swiper-slide { padding-bottom: 50px; } .joyofart .page3 .box .right .img { /* height: 510px; */ overflow: hidden; } .joyofart .page3 .box .right span { font-size: 24px; padding-left: 15px; letter-spacing: 0px; } .joyofart .page3 .box .right .img img { width: 100%; } .joyofart .page3 .boxfooter li { border: 1px solid #baa795; text-align: center; font-size: 16px; width: 22%; margin-bottom: 20px; cursor: pointer; padding: 3px 0; } .joyofart .page3 .boxfooter li.active { background: #baa795; color: #fff; } .joyofart .page3 .boxfooter li:nth-child(4n) { margin-right: 0px; } .joyofart .page3 .boxfooter li p { font-size: 12px; } .joyofart .page3 .boxfooter { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-flow: row wrap; margin-bottom: 120px; } .joyofart .page3 .box .left .footerTitle { position: absolute; left: 0; bottom: 0; border-bottom: 2px solid #282523; cursor: pointer; padding-bottom: 10px; } .joyofart .page3 .rightBlock { position: absolute; right: 0; top: 0; width: 26.5vw; height: 440px; background-color: #272523; } .joyofart .page3.pagebox { padding-top: 0; } .news .page2 { background: #eae6e4; } .news .page2 .listWrap { -webkit-box-sizing: border-box; box-sizing: border-box; min-height: 100vh; width: 100%; overflow: hidden; } .news .page2 .listWrap .tabList { margin-top: 40px; width: 100%; height: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; overflow: hidden; } .news .page2 .listWrap .tabList .tabItem { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; border: 1px solid #baa795; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; padding: 0 50px; justify-content: center; -webkit-transition: 0.3s all ease-in-out; -o-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; box-sizing: border-box; cursor: pointer; } .news .page2 .listWrap .tabList .tabItem.current { background-color: #baa795; color: #fff; } .news .page2 .listWrap .tabList .tabItem .name { font-size: 1rem; line-height: 1.4; letter-spacing: 0.125rem; } .news .page2 .listWrap .tabList .tabItem .subName { font-size: 0.8125rem; line-height: 1.2; letter-spacing: 0.0625rem; } .news .page2 .listWrap .infoList { color: #605f5f; } .news .page2 .listWrap .infoList .infoItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 70px 200px; margin-bottom: 110px; background-color: #fff; box-sizing: border-box } .news .page2 .listWrap .infoList .infoItem .title { font-size: 24px; max-width: 90%; letter-spacing: 0rem; color: #000; padding-bottom: 0px; } .news .page2 .listWrap .infoList .infoItem .desc { margin: 30px 0 10px; font-size: 0.875rem; line-height: 1.6; max-width: 90%; letter-spacing: 0.0625rem; color: #605f5f; } .news .page2 .listWrap .infoList .infoItem .btn { margin: 1.25rem 0; font-size: 0.875rem; line-height: 1.6; cursor: pointer; } .news .page2 .listWrap .infoList .infoItem .imgWrap { width: 100%; height: 460px; background-size: cover; background-repeat: no-repeat; background-position: center; cursor: pointer; } .news .page2 .listWrap .infoList .more { height: 6.25rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 1.125rem; line-height: 1.6; } .contentText_show { font-size: 14px; padding-top: 50px; color: #000; text-align: left; line-height: 30px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .contentText_show img { max-width: 100%; height: auto !important } .contact .page1 { background: #282523; } .contact .tabtoplist { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; color: #b7a491; margin-bottom: 50px; } .contact .tabtoplist .item { font-size: 30px; border-bottom: 1px solid #4d4640; padding: 25px 100px; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; box-sizing: border-box; position: relative; font-weight: 200; } .contact .tabtoplist .item.active { /* border-bottom: 5px solid #bca996; */ } .contact .tabtoplist .item.active::after { height: 5px; width: 100%; position: absolute; content: ""; background: #bca996; left: 0; bottom: 0px; } .contact .tabtoplist .item p { font-size: 24px; line-height: normal } .contact .content { height: 400px; } .contact .content .cntext { font-size: 14px; text-align: left; color: #b7a491;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .contact .message p { font-size: 24px; color: #b7a491; } .contact .message p:nth-child(2) { font-size: 14px; color: #b7a491; } .contact .message .formBox { padding-top: 55px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .contact .message .formBox .item { font-size: 0; flex: 1; margin-right: 20px; } .contact .message .formBox .item:last-child { margin-right: 0; } .contact .message .formBox .item .li { margin-bottom: 20px; } .contact .message .formBox .item input, .contact .message .formBox .item textarea { color: #9b7e67; font-size: 18px; border: 0; border-radius: 10px; background: #dfdfdf; width: 100%; padding: 25px 25px; box-sizing: border-box; font-weight: 200; } .contact .message .formBox .item textarea { height: 170px; } .contact .message .submitBnt { text-align: right; padding-top: 15px; } .contact .message .formBox .item input::-webkit-input-placeholder, .contact .message .formBox .item textarea::-webkit-input-placeholder { /* WebKit browsers */ color: #9b7e67; } .contact .message .formBox .item input ::-moz-placeholder, .contact .message .formBox .item textarea::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #9b7e67; } .contact .message .formBox .item input :-ms-input-placeholder, .contact .message .formBox .item textarea:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #9b7e67; } .contact .page2 { background: #eae6e4 } .contact .page2 .cnBox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .contact .page2 .left { background: #fff; height: 580px; width: 380px; margin-right: 80px; } .contact .page2 .right { width: 800px; height: 580px; flex: 1; position: relative; } .contact .page2 .right .cntext { height: 400px; box-sizing: border-box; padding: 50px 30px 50px 30px; background: #fff; } .contact .page2 .right .emailbox { position: absolute; width: 100%; bottom: 0; left: 0; height: 100px; line-height: 100px; background: #fff; font-size: 16px; } .recruit_swiper { width: 100%; height: 415px } .recruit_swiper .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; border: 1px solid #000; width: 6px; height: 6px; opacity: 1; background: none } .recruit_swiper .swiper-pagination-bullets .swiper-pagination-bullet-active { border: 1px solid #000; background: #000; } .recruit_swiper .swiper-pagination { text-align: right; padding-right: 50px; box-sizing: border-box; } .recruit_swiper .swiper-slide { box-sizing: border-box; padding: 0 50px 0px 50px; } .recruit_swiper.swiper-container-horizontal>.swiper-pagination-bullets { bottom: 30px } .contact .page2 .left .title { color: #000; font-size: 24px; text-align: left; padding: 65px 50px 35px 50px } .contact .page2 .left .title p { color: #000; font-size: 18px; letter-spacing: 0px; } .contact .page2 .left .navlist li { display: flex; cursor: pointer; margin-bottom: 25px; font-size: 14px; text-align: left } .contact .page2 .left .navlist li>div:first-child { width: 20px; } .contact .page2 .left .navlist li p { font-size: 12px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .contact .page2 .right .jobbox { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; height: 100%; width: 100% } .contact .page2 .right .jobbox .le { width: 250px; border-right: 1px solid #000; height: 100%; } .contact .page2 .right .jobbox .le .titlenox { font-size: 18px; } .contact .page2 .right .jobbox .le .titlenox p { font-size: 14px; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .contact .page2 .right .jobbox .le .cnt { font-size: 14px; padding-top: 20px; line-height: 30px; } .contact .page2 .right .jobbox .ri { margin-left: 30px; flex: 1; text-align: left; height: 100%; overflow:hidden; font-size: 14px !important; line-height: 25px !important; } .contact .page2 .right .jobbox .ri .bttitle { font-size: 14px; } .contact .page2 .right .jobbox .ri .cnte { font-size: 14px; padding-top: 25px;font-weight: 200; font-family: montserratlight, optimaRegular, Helvetica, Tahoma, Arial; /* font-family: Optima, optimaRegular, Helvetica, Tahoma, Arial; */ } .gotop{ position: fixed; width: 40px; height: 40px; right: 20px; bottom: 150px; cursor: pointer; z-index: 99; } @media (max-width: 1380px) { .contact .cnBox1{ padding-top: 70px; } .pageMain>div> .swiper-slide{ min-height:850px; } .pageMain .swiper-slide.footer{ min-height: 250px !important; } .pageMain .swiper-slide.page1{ min-height: 100%; } .pageMain.contact .swiper-slide.page1{ padding-top: 120px; padding-bottom: 80px; box-sizing: initial; } .treasury .page3 .rightList .boxlist{ width: 95%; } /* #certify .swiper-slide{ height: 400px; width: 310px; } .index .page3 .layoutBox .right .tabBarCn{ height: 310px; overflow: hidden; } .index .page3 .layoutBox .left{ width: 360px; } */ .pagebox{ padding-top: 0; } .news .pagebox { padding-top: 70px; } /* .index .page3 .cnBox,.index .page2 .cnBox{ transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } */ .title{ padding-bottom: 15px; font-size: 22px; } .index .page2 .content p{ padding-bottom: 15px; } .contentText{ padding-top: 10px; line-height:6px; } .index .page4 .OurCulture .innerWrap .item .subDescList{ margin-top: 10px; } .index .page4 .OurCulture .innerWrap .item .descList{ margin-top: 10px; } .treasury .page3 .leftNav .title{ margin-top: 0; } .treasury .page3 .leftNav .navlist{ } .treasury .page3 .leftNav .navlist li p{ font-size: 10px; } .treasury .page3 .leftNav .navlist li>div:first-child{ flex: 0 0 auto; } .treasury .page3 .leftNav .title{ font-size: 22px; } /* .treasury .page4 .tabBarCn li{ height: 160px; } .treasury .page4 .tabBarCn li .cn_box .text{ height: 100px; } .treasury .page4 .content .en{ padding-top: 0px; } */ /* .treasury .page4 .cnBox1{ transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } .treasury .page5 .cnBox1{ transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } .treasury .page6 .cnBox1{ transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } */ .treasury .page6 .cntext li h3{ font-size: 16px; } .treasury .page6 .cntext li .text{ font-size: 16px; } /* .joyofart .page2 .cnBox1 { transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } .contact .page1 .cnBox1 { transform:scale(.8); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); } .contact .page2 .cnBox { transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } .joyofart .page3.pagebox .cnBox1{ transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } */ .title p{ font-size: 18px; } .treasury .page4 .cnBox1 .title,.treasury .page5 .cnBox1 .title, .treasury .page6 .cnBox1 .title, .joyofart .page2 .cnBox1 .title, .contact .page1 .cnBox1 .title, .contact .page2 .cnBox .title, .index .page3 .title,.index .page2 .cnBox .title,.joyofart .page1 .cnBox1 .title,.treasury .page2 .title{ font-size: 30px; } .treasury .page3 .leftNav{ width: 25%; } /* .treasury .page3 .rightList{ width: 75% } */ /* .joyofart .page1 .cnBox1,.treasury .page2 .cnBox{ transform:scale(.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); } */ .activeCn h3{ font-size: 22px; } .activeCn>p{ font-size: 15px; } .index .page4 .title p{ font-size: 15px; } } @media (min-width: 1920px) { .index .page4 .OurCulture .innerWrap .content{ padding-top: 120px; padding-bottom: 120px; } .treasury .page4 .tabBarCn li{ height: 380px; } .treasury .page4 .tabBarCn li .cn_box .text{ height: 300px; } }