.swiper-container { --swiper-pagination-color: #911119; /* 涓ょ閮藉彲浠 */ } .swiper-pagination-bullet { width: 16px; height: 16px; display: inline-block; border-radius: 100%; background: #000; opacity: .8; background: #3a3a3a; } .swiper-pagination-bullet-active { background: #911119; opacity: 1; } .indexSwiper .swiper-button-prev, .indexSwiper .swiper-button-next { width: 38px; height: 82px; } .indexSwiper .swiper-button-prev{ left: 65px; } .indexSwiper .swiper-button-next{ right: 65px; } .indexSwiper .swiper-button-prev:after{ content: ""; display: block; width: 100%; height: 100%; background: url(../images/swiper-prev.png) center center no-repeat; background-size: 100% 100%; opacity: .7; } .indexSwiper .swiper-button-next:after{ content: ""; display: block; width: 100%; height: 100%; background: url(../images/swiper-next.png) center center no-repeat; background-size: 100% 100%; opacity: .7; } /* banner鍔ㄧ敾鏁堟灉 */ @-webkit-keyframes animations { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1); } 100% { -webkit-transform: translate3d(-5.166%, 0, 0px) scale(1.15); } } @keyframes animations { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-5.166%, 0, 0px) scale(1.15); } } .swiper-slide-active .banner-wp-ani { opacity: 1; transform: scale(1.2); -webkit-animation: scaleDownFadeIn 1.4s forwards ease; animation: scaleDownFadeIn 1.4s forwards ease; -webkit-filter: blur(12px); filter: blur(12px); } @-webkit-keyframes scaleDownFadeIn { 50% { opacity: 0; -webkit-transform: translate(-45.45%, -45.45%) scale(1.1); } 100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); -webkit-transform: translate(-50%, -50%) scale(1); } } @keyframes scaleDownFadeIn { 0% { opacity: 0; transform: translate(-41.7%, -41.7%) scale(1.2); } 100% { opacity: 1; -webkit-filter: blur(0px); filter: blur(0px); transform: translate(-50%, -50%) scale(1); } } .slide3 { background: #f2f2f2; } .slide3 ul { overflow: hidden; padding-top: 20px; } .slide3 ul li { float: left; width: 32%; margin-right: 2%; overflow: hidden; background: #fff; padding: 30px; margin-bottom: 20px; } /*------------------------------------------------------------------------ // Modify: Atlas 2020-07-10 rev1 // +------------------------------------------------------------------------*/ .slide3 ul li span { height: 50px; display: block; font-size: 18px; overflow: hidden; padding-bottom: 10px; } .slide3 ul li .con { height: 110px; color: #808080; line-height: 28px; overflow: hidden; text-align: justify; text-justify: inter-ideograph; } .slide3 ul li img { height:174px; } @media screen and (max-width:960px){ .slide3 ul li img { height:auto; } } /*------------------------------------------------------------------------ // Modify: Atlas 2020-07-10 rev1 // +------------------------------------------------------------------------*/ .slide3 ul li p { overflow: hidden; padding-top: 10px; } .slide3 ul li p font { color: #808080; float: left; display: block; margin-top: 5px; } .slide3 ul li p label { float: right; } .slide3 ul li .more-2 { margin-top: 3px; } .slide3 ul li { width: 24%; padding: 20px; } .slide3 ul li img { margin-bottom: 15px; } .slide3 li:hover { box-shadow: 0 0 15px #ddd; transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .slide3 li:hover img { transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .slide3 li:hover span, .slide3 li:hover p, .slide3 li:hover .con { transform: translateX(10px); transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .slide2 { background: url(../images/home-img-2.jpg) no-repeat center center; background-size: 100% 100%; } .slide2 ul li { float: left; width: 31.33%; margin-right: 3%; border: 1px #fff solid; border-radius: 10px; margin-top: 35px; padding: 10px; overflow: hidden; } .slide2 ul li:nth-child(3n) { margin-right: 0; } .slide2 ul li a { display: block; background: #fff; padding: 40px 50px; text-align: center; border-radius: 10px; } /*------------------------------------------------------------------------ // Modify: Atlas 2020-07-07 rev1 // +------------------------------------------------------------------------*/ .slide2 ul li span { height: 50px; overflow: hidden; font-size: 22px; font-weight: bold; display: block; padding: 20px 0 10px 0; } /*------------------------------------------------------------------------ // Modify: Atlas 2020-07-07 rev1 // +------------------------------------------------------------------------*/ .slide2 ul li div { color: #666; line-height: 24px; } .slide2 ul li .more-3 { margin-top: 30px; position: relative; left: 50%; margin-left: -60px; } .slide2 ul li img { /*display: block; width: 40px; position: relative; text-align: center; left: 50%; margin-left: -20px;*/ } .slide2 ul li:hover { transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .slide1 ul { overflow: hidden; padding-top: 20px; } .slide1 ul li { float: left; text-align: center; width: 25%; overflow: hidden; } .slide1 ul li:nth-child(2) { width: 50%; border-left: 1px #ccc solid; border-right: 1px #ccc solid; } .slide1 ul li font { display: block; font-size: 64px; font-family: Arial; font-weight: bold; color: #911119; } .slide1 ul li span { display: block; color: #666; font-size: 16px; } .slide-solution { padding: 80px 0 20px 0; } .slide-solution2 { padding: 20px 0 80px 0; } .solutionlist ul li { float: left; width: 30%; margin-right: 5%; overflow: hidden; margin-bottom: 35px; } .solutionlist ul li:nth-child(3n) { margin-right: 0; } .solutionlist span { display: block; font-size: 18px; font-weight: bold; overflow: hidden; padding: 20px 0; } .solutionlist ul li div { line-height: 24px; height: 70px; } .solutionlist label { color: #911119; display: block; padding-top: 20px; } .solutionlist ul li:hover img { transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .topH { height: 130px; } .container { overflow: hidden; padding-bottom: 40px; } .container2 { overflow: hidden; } .classify { overflow: hidden; padding: 35px 0; } .class1 { overflow: hidden; padding-bottom: 25px; } .class1:last-child { padding-bottom: 0; } .class1 span { float: left; display: block; background: #e9e9e9; width: 114px; height: 40px; line-height: 40px; text-align: center; } .class1 div { float: right; width: calc(100% - 114px); } .class1 div a { display: block; float: left; padding: 0 15px; height: 40px; line-height: 40px; text-align: center; border-bottom: 1px #e9e9e9 solid; } .class1 div a:hover, .class1 div a.on { color: #fff; background: #911119; } .classifyphone { display: none; } .tbl-link:hover { color: #911119; } .tbltitle { background: #911119; font-size: 16px; color: #fff; height: 45px; line-height: 45px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .tbltitle li { text-align: center; float: left; width: 14.285% !important; border-right: 1px #fff solid; } .tbltitle li:last-child { border-right: 0; } .tbltitle2 { background: #911119; font-size: 14px; color: #fff; height: 45px; line-height: 45px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .tbltitle2 li { text-align: center; float: left; width: 20%; border-right: 1px #fff solid; } .tbltitle2 li:last-child { border-right: 0; } .tblcon li { float: left; width: 14.285%; background: #fff; border-right: 1px #f2f2f2 solid; text-align: center; float: left; height: 130px; padding: 0 10px; 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; } .tblcon li:first-child { border-left: 1px #f2f2f2 solid; } .tblcon2 li { float: left; width: 20%; background: #fff; border-right: 1px #f2f2f2 solid; text-align: center; float: left; height: 60px; padding: 0 10px; 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; } .tblcon2 li:first-child { border-left: 1px #f2f2f2 solid; } .bg-gray li { background: #f2f2f2; border-right: 1px #fff solid; } .bg-gray li:last-child { border-right: 0; } .tbllast li { border-bottom: 1px #f2f2f2 solid; } .classname { display: none; } .subtitle { font-size: 18px; width: 250px; overflow: hidden; padding: 30px 0 10px 0; } .subtitle font { font-size: 18px; } .subtitle label { overflow: hidden; } .subtitle label a { float: left; display: block; width: 120px; text-align: center; height: 40px; line-height: 40px; margin: 0 ; font-size: 15px; border-radius: 15px 0 15px 0; border:1px solid #ddd; } .subtitle label a.btn-r { background: url(../images/btn-1.png) no-repeat center center; background-size: 114px 34px; } .proclass-l { width: 250px; overflow: hidden; background: #f2f2f2; border-top: 2px #dcdcdc solid; padding: 10px 0; } .proclass-l a { display: block; padding-left: 35px; padding-right: 10px; font-size: 16px; height: 42px; line-height: 42px; border-left: 2px #f2f2f2 solid; } .proclass-l a:hover, .proclass-l a.on { display: block; padding-left: 35px; padding-right: 10px; font-size: 16px; height: 42px; line-height: 42px; border-left: 2px #911119 solid; background: #fff; } .proclass-r { width: calc(100% - 280px); } .prolist li { float: left; width: 30%; margin-right: 5%; overflow: hidden; border: 2px #d5d5d5 solid; margin-bottom: 35px; padding: 10px 20px; text-align: center; } .prolist li:nth-child(3n) { margin-right: 0; } .prolist span { display: block; font-size: 18px; font-weight: bold; overflow: hidden; padding: 10px 0; } .prolist li div { line-height: 24px; } .prolist label { color: #911119; display: block; color: #fff; position: relative; left: 50%; margin-left: -60px; margin-top: 20px; } .prolist li:hover img { transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .desctitle { font-weight: bold; font-size: 18px; overflow: hidden; padding: 40px 0 20px 0; } .desc { overflow: hidden; } .desctop img { float: left; width: 40%; } .desctop .con { float: right; width: 55%; } .desctop .con span { display: block; font-size: 26px; font-weight: bold; overflow: hidden; padding: 20px 0 10px 0; } .desctop .con p { font-size: 16px; line-height: 26px; } .bg-about { background: url(../images/bg-about.jpg) no-repeat center bottom; background-size: 100% auto; } .abouttab { overflow: hidden; padding: 20px 0; } .abouttab a { float: left; display: block; width: 125px; height: 120px; box-shadow: 0 0 5px #ccc; margin: 10px; border-bottom: 5px #911119 solid; } .abouttab a.about1 { background: url(../images/about-1-b.png) no-repeat center center; background-size: 83px 83px; } .abouttab a.about2 { background: url(../images/about-2-b.png) no-repeat center center; background-size: 83px 83px; } .abouttab a.about3 { background: url(../images/about-3-b.png) no-repeat center center; background-size: 83px 83px; } .abouttab a.about4 { background: url(../images/about-4-b.png) no-repeat center center; background-size: 83px 83px; } .abouttab a.mobile-tab-close { display: none; } .abouttab a:hover.about1, .abouttab a.about1.on { background: url(../images/about-1.png) #911119 no-repeat center center; background-size: 83px 83px; } .abouttab a:hover.about2, .abouttab a.about2.on { background: url(../images/about-2.png) #911119 no-repeat center center; background-size: 83px 83px; } .abouttab a:hover.about3, .abouttab a.about3.on { background: url(../images/about-3.png) #911119 no-repeat center center; background-size: 83px 83px; } .abouttab a:hover.about4, .abouttab a.about4.on { background: url(../images/about-4.png) #911119 no-repeat center center; background-size: 83px 83px; } .content { padding: 50px; overflow: hidden; } .content .con { font-size: 16px; line-height: 27px; text-align: justify; text-justify: inter-ideograph; overflow: hidden; padding: 30px 0; } .content .con p { overflow: hidden; padding-bottom: 10px; text-indent: 30px; } .aboutback { display: none; } .border-b { border-bottom: 4px #911119 solid; } .border-t { border-top: 4px #911119 solid; } .arrowup { background: url(../images/arrow-up.png) no-repeat center center; background-size: 23px 19px; width: 23px; height: 19px; } .arrowdown { background: url(../images/arrow-down.png) no-repeat center center; background-size: 23px 19px; width: 23px; height: 19px; } .cultrue1 { overflow: hidden; padding: 40px 0 80px 0; } .cultrue1 li { float: left; width: 25%; } .cultrue1 .desc { background: #f2f2f2; position: relative; text-align: center; } .cultrue1 .img { overflow: hidden; } .cultrue1 .img img { display: block; font-size: 0; } .cultrue1 .desc span { display: block; font-size: 40px; font-weight: bold; } .cultrue1 .desc font { display: block; font-size: 20px; padding-top: 10px; } .cultrue1 .desc font.other { font-size: 14px; } .cultrue1 .arrowup { position: absolute; z-index: 20; } .cultrue1 .arrowdown { position: absolute; z-index: 20; } .cultrue1 .border-b .arrowup { bottom: 0; left: 50%; margin-left: -11.5px; } .cultrue1 .border-t .arrowdown { top: 0; left: 50%; margin-left: -11.5px; } .cultrue1 li:hover img { transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .cultrue2 li { float: left; width: 23.5%; margin-right: 2%; position: relative; padding-top: 60px; } .cultrue2 li:last-child { margin-right: 0; } .cultrue2 li>img { height: 200px; width: 100%; } .cultrue2 .con { width: 100%; background: #E9E9E9; padding: 30px 20px; color: #333; height: 300px; } .cultrue2 .con span { display: block; width: 100%; font-size: 40px; font-weight: bold; text-align: center; padding-top: 10px; } .cultrue2 .con p { font-size: 16px; line-height: 20px; text-align: justify; text-justify: inter-ideograph; overflow: hidden; padding-top: 20px; padding-bottom: 0; } .cultrue2 .sign img { width: 120px; height: 120px; } .cultrue2 .sign { position: absolute; z-index: 5; top: 0; left: 50%; margin-left: -60px; } .honer { overflow: hidden; padding-bottom: 50px; } .honer .swiper-container { padding: 0 150px; } .honer .swiper-button-prev:after, .honer .swiper-container-rtl .swiper-button-next:after { content: ''; } .honer .swiper-button-next:after, .honer .swiper-container-rtl .swiper-button-prev:after { content: ''; } .honer .swiper-button-prev { background-image: url(../images/arrowleft.png); background-repeat: no-repeat; background-size: 120px 120px; left: 0; right: auto; width: 120px; height: 120px; margin-top: -60px; } .honer .swiper-button-next { background-image: url(../images/arrowright.png); background-repeat: no-repeat; background-size: 120px 120px; right: 0; left: auto; width: 120px; height: 120px; margin-top: -60px; } .honer .swiper-slide div p { font-size: 16px; overflow: hidden; padding: 15px 0; } .honer .swiper-slide { width: 30%; margin-right: 5%; } .honer .swiper-slide div { padding-top: 10px; } .honer .swiper-slide:hover div { transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transition: 0.5s all ease-in-out; -o-transition: 0.5s all ease-in-out; -webkit-transition: 0.5s all ease-in-out; } .history { background: url(../images/bg-about2.jpg) no-repeat center bottom; background-size: 100% auto; overflow: hidden; } .history-line { background: url(../images/line-history.png) no-repeat center top 230px; overflow: hidden; } .his { margin-top: 50px; margin-bottom: 80px; } .his .swiper-wrapper { padding-top: 10px; } .his .swiper-slide { float: left; width: 25%; cursor: pointer; } .his .sub { background: #fff; display: block; font-size: 24px; font-weight: bold; width: 180px; text-align: center; margin: 0 28px 20px 28px; box-shadow: 0 0 5px #ccc; padding: 20px; } .his .year { display: block; text-align: center; height: 124px; line-height: 124px; width: 124px; background: url(../images/circle.png) no-repeat center center; background-size: 124px 124px; font-size: 28px; font-weight: bold; position: relative; left: 50%; margin-left: -62px; margin-top: 50px; } .his .con { overflow: hidden; padding-top: 30px; } .his .con div { background: #fffcfc; box-shadow: 0 0 5px #ccc; margin: 5px; } .his .con div p { font-size: 16px; line-height: 24px; text-indent: 30px; text-align: justify; text-justify: inter-ideograph; padding: 20px; } .his .con div img { width: 100%; } .dotted { background: url(../images/line-dotted.png) repeat-y center center; background-size: 2px auto; } .bt-about { background: url(../images/bg-logo.jpg) no-repeat center center; background-size: 100% auto; overflow: hidden; padding: 60px 0; } .desc-gray { color: #ececec; font-size: 64px; font-weight: bold; text-align: center; padding-top: 40px; } #video1 { width: 100%; height: 663.75px; } a.mobile-tab-close { display: none; } @media (min-width: 751px) and (max-width: 1179px) {} @media screen and (max-width: 750px) { .indexSwiper .swiper-button-prev, .indexSwiper .swiper-button-next { width: 0.26666666rem; height: 0.54666666rem; } .indexSwiper .swiper-button-prev{ left: 0.4rem; } .indexSwiper .swiper-button-next{ right: 0.4rem; } .indexSwiper .swiper-pagination-bullet{ width: 0.21333333rem; height: 0.21333333rem; } .slide3 ul { padding-top: 5px; -moz-box-lines: multiple; /*Firefox*/ -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/ box-lines: multiple; flex-wrap: wrap; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; } .slide3 ul li { width: 48.5%; padding: 13px; margin-bottom: 20px; flex: none; margin-right: 0; } .slide3 ul li img{ height: auto; } .slide3 ul li span { font-size: 14px; margin-bottom: 5px; line-height: 25px; } .slide3 ul li .con { line-height: 22px; font-size: 12px; } .slide3 ul li p { font-size: 12px; padding-top: 5px; } .slide3 ul li p font { margin-top: 8px; } .slide3 ul li .more-2 { margin-top: 3px; } .slide2 { background: url(../images/home-img-2.jpg) no-repeat center center; background-size: auto 100%; } .slide2 ul li { width: 48.5%; margin-right: 3%; border-radius: 7px; margin-top: 15px; padding: 5px; } .slide2 ul li:nth-child(3n) { margin-right: 3%; } .slide2 ul li:nth-child(2n) { margin-right: 0; } .slide2 ul li a { padding: 20px 15px; border-radius: 7px; } .slide2 ul li span { font-size: 14px; padding: 10px 0 10px 0; height: auto; } .slide2 ul li div { line-height: 22px; font-size: 12px; height:44px; } .slide2 ul li .more-3 { margin-top: 15px; position: relative; left: 50%; margin-left: -41.5px; } .slide2 ul li img { width: 2.4rem; position: relative; left: 0; margin-left: 0; } .slide1 ul { padding-top: 5px; } .slide1 ul li { width: 30%; padding: 0 5px; } .slide1 ul li:nth-child(2) { width: 40%; } .slide1 ul li font { font-size: 24px; } .slide1 ul li span { font-size: 12px; } .slide-solution { padding: 20px 0 5px 0; } .slide-solution2 { padding: 5px 0 20px 0; } .solutionlist ul li { width: 47.5%; margin-right: 5%; padding-bottom: 20px; } .solutionlist ul li:nth-child(even) { margin-right: 0; } .solutionlist ul li:nth-child(odd) { margin-right: 5%; } .solutionlist span { font-size: 14px; padding: 10px 0; } .solutionlist ul li div { line-height: 22px; font-size: 12px; } .solutionlist label { font-size: 12px; padding-top: 10px; } .topH { height: 45px; } .container { padding-bottom: 20px; } .classify { display: none; } .classifyphone { display: block; overflow: hidden; padding: 10px 0; } .class2 { overflow: hidden; padding-bottom: 10px; } .class2:last-child { padding-bottom: 0; } .class2 span { float: left; display: block; background: #e9e9e9; width: 114px; height: 30px; line-height: 30px; text-align: center; } .class2 div { float: right; width: calc(100% - 114px); } .class2 div a { display: block; float: left; padding: 0 15px; height: 30px; line-height: 30px; text-align: center; border-bottom: 1px #e9e9e9 solid; } .class2 div a:hover, .class1 div a.on { color: #911119; } .class2 select { appearance: none; -moz-appearance: none; -webkit-appearance: none; height: 30px; line-height: 30px; border: 1px #000 solid; background: url(../images/sel.png) no-repeat center right 5px #fff; background-size: 20px 20px; float: right; width: calc(100% - 124px); padding: 0 5px; } .tbltitle { font-size: 12px; height: 30px; line-height: 30px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .tbltitle li { text-align: center; float: left; width: 20% !important; border-right: 1px #fff solid; } .tbltitle li:nth-child(4) { display: none; } .tbltitle li:nth-child(5) { display: none; } .tbltitle li:nth-child(6) { border-right: 0; } .tbltitle2 { overflow: hidden; font-size: 12px; height: 48px; line-height: 20px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .tbltitle2 li { text-align: center; float: left; width: 20%; border-right: 1px #fff solid; padding: 5px; } .tbltitle2 li:first-child { line-height: 48px; } .tbltitle2 li:last-child { line-height: 48px; } .tblcon li { width: 20%; font-size: 12px; height: 80px; padding: 0 5px; } .tblcon li:nth-child(4) { display: none; } .tblcon li:nth-child(5) { display: none; } .tblcon2 li { width: 20%; font-size: 12px; height: 40px; padding: 0 5px; } .classname { display: block; font-size: 12px; overflow: hidden; padding: 10px 0; line-height: 20px; } .classname img { width: 20px; margin-right: 5px; } .subtitle { width: 50%; overflow: hidden; padding: 0.4rem 0 0.13333333rem 0; margin: 0 auto; } .subtitle label a { float: left; display: block; width: 2rem; text-align: center; height: 0.66666666rem; line-height:0.66666666rem; margin: 0 ; font-size: 0.26666666rem; border-radius: 10px 0 10px 0; } .subtitle label a.btn-r { background: url(../images/btn-1.png) no-repeat center center; background-size: 1.8rem 0.46666666rem; } .proclass-l { display: none; } .proclass-r { width: 100%; } .prolist li { width: 47.5%; margin-right: 5%; border: 2px #d5d5d5 solid; margin-bottom: 20px; padding: 10px; } .prolist li:nth-child(even) { margin-right: 0; } .prolist li:nth-child(odd) { margin-right: 5%; } .prolist span { font-size: 14px; padding: 5px 0; } .prolist li div { line-height: 22px; font-size: 12px; } .prolist label { margin-left: -41px; margin-top: 10px; } .desctitle { font-size: 14px; padding: 20px 0 10px 0; } .desctop img { width: 100%; } .desctop .con { width: 100%; } .desctop .con span { font-size: 18px; padding: 10px 0 5px 0; } .desctop .con p { font-size: 12px; line-height: 22px; } .bg-about { background: url(../images/bg-about.jpg) no-repeat left bottom; background-size: auto auto; padding-bottom: 0; } .abouttab { display: none; } .content { padding: 20px 10px; overflow: hidden; } .content .con { font-size: 12px; line-height: 22px; padding: 5px 0 15px 0; } .content .con p { padding-bottom: 5px; text-indent: 30px; } .aboutback { display: block; overflow: hidden; padding: 10px 0; } .aboutback img { width: 20px; margin-right: 5px; } .arrowup { background-size: 18px 15px; width: 18px; height: 15px; } .arrowdown { background-size: 18px 15px; width: 18px; height: 15px; } .cultrue1 { padding: 20px 0 40px 0; } .cultrue1 li { width: 50%; } .cultrue1 li:nth-child(3) { padding-top: 20px; } .cultrue1 li:nth-child(4) { padding-top: 20px; } .cultrue1 .desc span { font-size: 20px; } .cultrue1 .desc font { font-size: 14px; padding-top: 10px; } .cultrue1 .desc font.other { font-size: 12px; } .cultrue1 .border-b .arrowup { margin-left: -9px; } .cultrue1 .border-t .arrowdown { margin-left: -9px; } .cultrue2 li { width: 49%; margin-right: 2%; padding-top: 30px; } .cultrue2 li:last-child { margin-right: 0; } .cultrue2 li:nth-child(2n) { margin-right: 0; } .cultrue2 li>img { height: 3.2rem; width: 100%; } .cultrue2 .con { padding: 10px; height: 7rem; margin-bottom: .3rem; } .cultrue2 .con span { font-size: 18px; padding-top: 5px; } .cultrue2 .con p { font-size: 12px; line-height: 20px; padding-top: 10px; } .cultrue2 .sign img { width: 60px; height: 60px; } .cultrue2 .sign { margin-left: -30px; } .honer { padding-bottom: 20px; } .honer .swiper-container { padding: 0 50px; } .honer .swiper-button-prev { background-image: url(../images/arrowleft.png); background-repeat: no-repeat; background-size: 40px 40px; left: 0; right: auto; width: 40px; height: 40px; margin-top: -20px; } .honer .swiper-button-next { background-image: url(../images/arrowright.png); background-repeat: no-repeat; background-size: 40px 40px; right: 0; left: auto; width: 40px; height: 40px; margin-top: -20px; } .honer .swiper-slide div p { font-size: 12px; padding: 10px 0; } .honer .swiper-slide { width: 45%; margin-right: 10%; } .honerother .swiper-slide { width: 100%; } .honer .swiper-slide div { padding-top: 0; } .history-line { background: url(../images/line-history.png) no-repeat center top 150px; overflow: hidden; } .his { margin-top: 20px; margin-bottom: 30px; } .his .swiper-wrapper { padding-top: 10px; } .his .swiper-slide { width: 50%; } .his .sub { font-size: 18px; width: 130px; margin: 0 28px 20px 28px; padding: 10px; } .his .year { height: 80px; line-height: 80px; width: 80px; background-size: 80px 80px; font-size: 20px; margin-left: -40px; margin-top: 50px; } .his .con { padding-top: 10px; } .his .con div { margin: 5px; } .his .con div p { font-size: 12px; line-height: 22px; text-indent: 30px; padding: 10px; } .bt-about { padding: 10px 0 20px 0; } .desc-gray { font-size: 24px; padding-top: 10px; } #video1 { width: 100%; height: 5.335rem; } .mobile-tab { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, .9); z-index: 999999; webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; display: none; } .mobile-tab.show { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .abouttab.mobile-tab a { float: none; width: 1.66666666rem; height: 1.66666666rem; box-shadow: none; margin: 0.26666666rem; border: none; } .abouttab.mobile-tab a.about1.on, .abouttab.mobile-tab a.about1 { background: url(../images/about-1.png) no-repeat center center; background-size: 100% auto; } .abouttab.mobile-tab a.about2.on, .abouttab.mobile-tab a.about2 { background: url(../images/about-2.png) no-repeat center center; background-size: 100% auto; } .abouttab.mobile-tab a.about3.on, .abouttab.mobile-tab a.about3 { background: url(../images/about-3.png) no-repeat center center; background-size: 100% auto; } .abouttab.mobile-tab a.about4.on, .abouttab.mobile-tab a.about4 { background: url(../images/about-4.png) no-repeat center center; background-size: 100% auto; } .abouttab.mobile-tab a.mobile-tab-close.on, .abouttab.mobile-tab a.mobile-tab-close, .proclass-l.mobile-tab a.mobile-tab-close { display: block; background: url(../images/close.png) no-repeat center center; background-size: 0.85333333rem auto; position: absolute; bottom: 10vh; width: 1.2rem; height: 1.2rem; } .proclass-l.mobile-tab a:hover, .proclass-l.mobile-tab a.on, .proclass-l.mobile-tab a { display: block; padding-left: 0.48rem; padding-right: 0.48rem; width: 100%; font-size: .32rem; height: 1.28rem; line-height: 0.64rem; border-left: none; background: transparent; text-align: left; color: #fff; padding-top: .32rem; padding-bottom: .32rem; } } .description { padding: 15px 0; text-align: center; font-size: 16px; color: #333; } .description p { display: block; word-break: break-all; text-align: justify; font-size: inherit; line-height: 1.5; } @media screen and (max-width:768px) { .description { padding: 0.2rem 0; font-size: 0.24rem; } }