/* CSS Document */ .mc{ margin: 0 auto !important;} .wow { transition-delay: 0.3s; } .pc { display: block; } .mob { display: none; } .wrap{ width: 90%; max-width: 1550px; padding: 0 15px; margin:0 auto; } .header { position: fixed; left: 0; top: 0; width: 100%; min-width: 320px; z-index: 10; transition: all .3s; background-color: #FFFFFF; box-shadow: 0px 0px 6px 0px rgba(63, 66, 78, 0.15); transition: all .3s; } .header.no-show{ transform: translateY(-100%); } .header .wrap { width: 95%; max-width: 1800px; } .logo { float: left; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; transition: all .3s; height: 106px; } .logo a { display: block; transition: all .3s; } .logo img { height: 34px; transition: all .3s; } .nav { float: right; } .navBox { margin: 0 auto; text-align: right; } .navList { list-style: none; margin: 0; font-size: 0; text-align: center; display: inline-block; vertical-align: top; transition: all .3s; } .navList > li { position: relative; display: inline-block; vertical-align: top; } .navList > li > a { display: block; line-height: 106px; font-size: 18px; color: #1A1A1A; position: relative; padding: 0 1vw; font-weight: bold; transition: all .3s; } .navList > li > a:hover, .navList > li.cur > a, .navList > li.active > a{ color: #E60113; } .navSecond{ list-style: none; position: absolute; left: 50%; top: auto; width: 100%; min-width: 150px; z-index: 2; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); border-radius: 0 0 5px 5px; padding: 15px 0; line-height: 40px; display: none; text-align: center; transform: translateX(-50%); } /* .navList > li:nth-child(3) .navSecond{ padding-right: 550px; } .navList > li:nth-child(4) .navSecond{ padding-right: 480px; } */ .navSecond li{ font-size: 16px; } .navSecond a { display: block; color: #333333; transition: all .3s; } .navSecond a:hover{ color: #E60113; } .navTit{ font-weight: normal; } .navTit a{ display: block; font-size: 14px; line-height: 2; padding: 5px 10px; } .navCon{ position: absolute; left: 100%; top: 0; width: 100%; min-height: 100%; line-height: 1.8; background-color: rgba(0, 0, 0, 0.4); padding: .2rem 0; display: none; margin-left: 1px; } .navCon a{ display: block; line-height: 2; } .navSecond li.cur .navTit a { opacity: 1; } .navRig { position: relative; float: right; line-height: 106px; text-align: right; font-size: 0; margin-left: 30px; transition: all .3s; } .navRig::before{ display: block; content: ""; width: 1px; height: 20px; background-color: #cccccc; position: absolute; left: 0; top: 50%; margin-top: -10px; } .navRig li { display: inline-block; vertical-align: middle; font-size: 18px; position: relative; } .navRig li + li{ margin-left: 20px; } .navRig a, .navRig i, .navRig span { display: inline-block; vertical-align: middle; color: #000000; line-height: 38px; } .navRigCon{ position: absolute; left: 50%; top: auto; background-color: rgba(0, 0, 0, 0.75); color: #FFFFFF; transform: translateX(-50%); white-space: nowrap; line-height: 30px; margin-top: -20px; border-radius: 0 0 5px 5px; display: none; } .navRigCon::before{ display: block; content: ""; width: 0; height: 0; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; border: 6px solid rgba(0, 0, 0, 0.75); border-top: none; border-left-color: transparent; border-right-color: transparent; } .navRigCon a{ display: block; font-size: 14px; color: #FFFFFF; padding: 0 20px; } .navRig li.navSearch span { width: 50px; height: 50px; background: url(../images/icon_search.png) right 45% no-repeat; background-size: 22px auto; cursor: pointer; } .navRig li.navLang a i{ width: 12px; height: 7px; background: url(../images/icon_arrow.png) center top no-repeat; background-size: contain; margin-left: 5px; } .navRig li.navBtn { cursor: pointer; display: none; } .navRig li.navBtn::before{ display: none; } .navBtn span { width: 22px; height: 30px; position: relative; } .navBtn span b { display: block; width: 100%; height: 2px; background: #333333; position: absolute; left: 0; top: calc((100% - 4px) / 2); transition: all .3s; } .navBtn span b:nth-child(1) { transform: translateY(6px) rotate(0deg); } .navBtn span b:nth-child(3) { transform: translateY(-6px) rotate(0deg); } .navBtn.active b:nth-child(1) { transform: translateY(0) rotate(45deg); } .navBtn.active b:nth-child(3) { transform: translateY(0) rotate(-45deg); } .navBtn.active b:nth-child(2) { opacity: 0; } .searchCon { position: absolute; right: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; height: 100%; opacity: 0; visibility: hidden; background-color: #FFFFFF; transition: all .3s; } .searchWrap{ width: 100%; max-width: 1550px; position: relative; height: 100%; } .searchWrap form{ height: 100%; } .searchInput { display: block; width: 100%; height: 100%; line-height: 100%; padding: 0 15px; padding-right: 50px; padding-left: 40px; border: none; font-size: 16px; color: #4D4D4D; } .searchBtn { display: block; position: absolute; left: 0; top: 50%; margin-top: -20px; width: 40px; height: 40px; background: url(../images/icon_search.png) center center no-repeat; border: none; cursor: pointer; } .searchBtn:focus { border: none; outline: none; } .searchClose { display: block; width: 40px; height: 40px; background: url(../images/close.png) center center no-repeat; background-size: 20px auto; position: absolute; right: 0; top: 50%; margin-top: -20px; cursor: pointer; transition: all .3s ease; } .searchClose:hover { transform: rotate(90deg); } .opened .searchCon { opacity: 1; visibility: visible; } .mainBg{ position: relative; overflow: hidden; font-size: 14px; color: #000000; line-height: 30px; background-color: #FFFFFF; z-index: 1; min-height: 50vh; } .grayBg{ background-color: #fafafa; } .whiteBg{ background-color: #FFFFFF; } .gradualBg{ background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 100%); } .footBg{ position: relative; overflow: hidden; background-color: #f0f1f3; } .ftTop{ padding: 60px 0; font-size: 16px; color: #808080; line-height: 36px; } .ftLef{ float: left; width: 38%; } .ftLx{ margin-bottom: 20px; } .ftLx p{ padding-left: 40px; background-position: left 5px; background-repeat: no-repeat; background-size: 24px; } .ftLx a{ color: #808080; } .ft400{ font-size: 22px; font-size: 18px; color: #1a1a1a; background-image: url(../images/ft400.png); } .ftLx .ft400 a { color: #1a1a1a; } .ftTel{ background-image: url(../images/ftTel.png); } .ftEmail{ background-image: url(../images/ftEmail.png); } .ftAddress{ background-image: url(../images/ftAddress.png); } .ftShare{ list-style: none; font-size: 0; min-height: 80px; } .ftShare li { position: relative; display: inline-block; vertical-align: top; } .ftShare li + li{ margin-left: 30px; } .ftIco{ display: block; width: 48px; height: 48px; background-position: center center; background-size: cover; background-repeat: no-repeat; transition: all .3s ease; } .ftIco1{ background-image: url(../images/ftIco1.png); } .ftIco2 { background-image: url(../images/ftIco2.png); } .ftIco1:hover { background-image: url(../images/ftIco1_a.png); } .ftIco2:hover { background-image: url(../images/ftIco2_a.png); } .ftWx{ position: absolute; left: 100%; top: 0; margin-left: 24px; width: 112px; height: auto; padding: 1px; border-radius: 10px; background-color: #FFFFFF; opacity: 0; visibility: hidden; transform: translateX(5px); transition: all .3s ease; z-index: 2; } .ftWx::before{ display: block; content: ""; width: 0; height: 0; position: absolute; right: 100%; top: 18px; border-right: 12px solid #FFFFFF; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } .ftWx img{ display: block; width: 100%; height: auto; } .ftIco:hover + .ftWx{ opacity: 1; visibility: visible; transform: translateX(0); } .ftRig{ float: right; width: 60%; } .ftNav{ list-style: none; display: flex; justify-content: space-between; margin: 0 -10px; } .ftNav li{ padding: 0 10px; } .ftNav li h3{ margin-bottom: 10px; } .ftTit{ font-size: 18px; color: #ef0000; line-height: 2; } .ftCon p a{ color: #808080; transition: all .3s; } .ftCon p a:hover { color: #ef0000; } .copyright{ font-size: 14px; color: #b2b2b2; line-height: 2; padding: 10px 0; border-top: 1px solid #cccccc; text-align: center; } .copyright a{ color: #b2b2b2; } /* 椤电爜 */ .page{ margin: 70px 0; text-align: center; } .page a, .page span{ display: inline-block; vertical-align: middle; width: 40px; height: 40px; text-align: center; line-height: 38px; font-size: 14px; color: #666666; border-radius: 6px; border: 1px solid #DDDDDD; } .page a:hover, .page a.active{ color: #FFFFFF; background-color: #E60012; border-color: #E60012; } .page a.prev{ font-size: 18px; } .page a.next{ font-size: 18px; } .banMore { position: relative; display: block; width: 180px; height: 45px; border: 2px solid #FFFFFF; border-radius: 30px; font-size: 18px; color: #FFFFFF; line-height: 41px; text-align: center; letter-spacing: 4px; overflow: hidden; font-weight: 600; transition: all .3s; } .banMore:hover { color: #FFFFFF; border-color: #EF0000; background-color: #EF0000; } .redMore{ color: #EF0000; border-color: #EF0000; } /* 鍐呴〉banner */ .banIn{ position: relative; height: 490px; margin-top: 106px; overflow: hidden; } .banIn .img{ width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } .banIn .banText { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #FFFFFF; justify-content: center; } .inTit{ font-size: 48px; line-height: 1.4; margin: .1rem 0; font-weight: normal; } .inDes{ font-size: 16px; line-height: 1.4; max-width: 600px; } /* 鍦ㄧ嚎瀹㈡湇 */ .onLine { list-style: none; position: fixed; right: 1%; bottom: 0%; transform: translateY(-50%); z-index: 1; } .onLine li{ position: relative; } .onLine li:nth-child(1){ display: none; } .onLine li.onMob{ display: none; } .onLine li a{ display: block; } .onIco{ display: block; width: 50px; height: 50px; background-color: #e60012; cursor: pointer; } .onIco img{ width: 100%; } .onCon{ position: absolute; right: 100%; top: 0; transform: translateX(3px); width: auto; white-space: nowrap; line-height: 30px; padding: 10px 15px; text-align: center; font-size: .12rem; color: #FFFFFF; background-color: #e60012; opacity: 0; visibility: hidden; margin-right: 10px; transition: all .3s linear 0s; } .onLine li:nth-child(2) .onIco{ border-radius: 5px 5px 0 0; } .onLine li:last-child .onIco{ border-radius: 0 0 5px 5px; } #msg{ position: static; } .onMsg { position: absolute; right: 100%; bottom: 0; width: auto; white-space: nowrap; line-height: 30px; padding-right: 10px; font-size: .12rem; color: #FFFFFF; opacity: 0; visibility: hidden; transform: translateX(10px); transition: all .3s linear 0s; } .onMsg::after{ display: block; content: ""; border-left: 10px solid #FFFFFF; border-top: 8px solid transparent; border-bottom: 8px solid transparent; position: absolute; right: 0; bottom: 65px; } .onMsgCon{ width: 380px; padding: 20px 20px; background-color: #FFFFFF; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); } .onMsgClose{ position: absolute; right: 30px; top: 26px; width: 32px; height: 32px; background: url(../images/close.png) center center no-repeat; background-size: 16px auto; cursor: pointer; } .onMsgTit{ font-size: 16px; color: #333333; line-height: 1.8; margin: 10px 0; } .onMsgList{ list-style: none; } .onMsgList li{ margin-top: 15px; } .onMsgList .word { position: absolute; bottom: 1px; right: 15px; color: #666666; background-color: #FFFFFF; padding: 5px; } .onInput{ display: block; width: 100%; height: 40px; border: 1px solid #cccccc; line-height: 28px; border-radius: 4px; padding: 5px 10px; } .onInput:focus{ border-color: #e60012; } textarea.onInput{ height: 120px; resize: none; } .onBtn{ display: block; width: 120px; height: 40px; line-height: 40px; border-radius: 4px; text-align: center; color: #FFFFFF; background-color: #e60012; border: none; cursor: pointer; } .onBtn:focus{ border: none; } #msg.active .onMsg{ opacity: 1; visibility: visible; transform: translateX(0); } .onLine li a:hover .onIco img{ animation: swing 1s linear infinite; } .onLine li a:hover .onCon{ opacity: 1; visibility: visible; margin: 0; } .hmTit{ position: relative; padding-right: 110px; border-left: 6px solid #ef0000; padding-left: 25px; margin-bottom: .4rem; margin-bottom: .8rem; z-index: 2; } .hmTitCn{ font-size: 38px; font-size: 30px; color: #404040; line-height: 1.1; margin-bottom: 5px; } .hmTitEn{ font-size: 24px; font-size: 20px; color: #4c4c4c; line-height: 1.1; opacity: .5; } .hmMore{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; font-size: 20px; color: #848484; line-height: 2; padding-right: 28px; background: url(../images/icon_arrow2.png) right center no-repeat; background-size: 9px auto; transition: all .3s; } .hmMore:hover{ text-decoration: underline; } .whiteTit{ border-left-color: #FFFFFF; } .whiteTit .hmTitCn, .whiteTit .hmTitEn, .whiteTit .hmMore{ color: #FFFFFF; } .whiteTit .hmMore{ background-image: url(../images/icon_arrow3.png); } /* 闈㈠寘灞戝鑸?鍒嗙被 */ .topBg{ height: auto; line-height: 64px; background-color: #FFFFFF; border-bottom: 1px solid #DDDDDD; } .breadNav{ float: right; font-size: 0; list-style: none; background: url(../images/breadBg.png) left 24px no-repeat; background-size: 16px auto; padding-left: 25px; } .breadNav li{ position: relative; display: inline-block; vertical-align: middle; font-size: 16px; color: #666666; } .breadNav li a{ color: #666666; } .breadNav li a:hover{ color: #E60012; } .breadNav li + li{ padding-left: 18px; margin-left: 16px; white-space: nowrap; max-width: 400px; text-overflow: ellipsis; overflow: hidden; } .breadNav li + li::before{ display: block; content: "\f105"; font-family: FontAwesome; position: absolute; left: 0; top: 0; font-size: 130%; } .sort{ float: left; font-size: 0; list-style: none; } .sort li{ position: relative; display: inline-block; vertical-align: middle; font-size: 16px; } .sort li + li{ margin-left: 64px; } .sort li::after{ display: block; content: ""; width: 0%; height: 2px; background-color: #E60012; position: absolute; left: 0; bottom: -1px; } .sort li a{ display: block; color: #666666; font-weight: bold; } .sort li a:hover{ color: #E60012; } .sort li.active a{ color: #E60012; } .sort li.active::after{ width: 100%; } .maskBg{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 10; display: none; } .mask{ display: block; width: 96%; max-width: 1200px; background: #FFFFFF; border: 1px solid #DDDDDD; margin: 0 auto; padding: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .close{ text-align: right; } .close span{ display: inline-block; vertical-align: middle; width: 24px; height: 24px; background: url(../images/close2.png) center center no-repeat; background-size: contain; margin-bottom: 20px; cursor: pointer; transition: all .3s; } .close span:hover{ transform: rotate(90deg); } .anchor{ display: block; padding-top: 106px; margin-top: -106px; } .videoBg { position: fixed; left: 0; top: 0; right: 0; bottom: 0; height: 100%; overflow: hidden; overflow-y: auto; background: rgba(0, 0, 0, 0.73); z-index: 10; } .videoBox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52%; max-width: 1000px; height: 80%; } .videoBox video { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; } .videoClose { display: block; width: 44px; height: 44px; background: url(../images/close3.png) center center no-repeat; background-size: 24px auto; position: absolute; left: 100%; bottom: 98%; margin: 0 0 0 .1rem; cursor: pointer; } .videoClose:hover { transform: rotate(90deg); transition: all .3s; } /* 楠岃瘉鐮佸脊绐 */ .popYzm{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; display: none; } .yzmBox{ width: 300px; max-width: 96%; height: auto; margin: 0 auto; top: 50%; transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1920px) { .wrap{ width: 90%; max-width: 80.72vw; padding: 0 0.781vw; margin:0 auto; } .header { position: fixed; left: 0; top: 0; width: 100%; min-width: 16.66vw; z-index: 10; transition: all .3s; background-color: #FFFFFF; box-shadow: 0vw 0vw 0.312vw 0vw rgba(63, 66, 78, 0.15); transition: all .3s; } .header.no-show{ transform: translateY(-100%); } .header .wrap { width: 95%; max-width: 93.75vw; } .logo { float: left; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; transition: all .3s; height: 5.520vw; } .logo a { display: block; transition: all .3s; } .logo img { height: 1.770vw; transition: all .3s; } .nav { float: right; } .navBox { margin: 0 auto; text-align: right; } .navList { list-style: none; margin: 0; font-size: 0; text-align: center; display: inline-block; vertical-align: top; transition: all .3s; } .navList > li { display: inline-block; vertical-align: top; } .navList > li > a { display: block; line-height: 5.520vw; font-size: 0.937vw; color: #1A1A1A; position: relative; padding: 0 1vw; font-weight: bold; transition: all .3s; } .navList > li > a:hover, .navList > li.active > a{ color: #E60113; } .navSecond { list-style: none; position: absolute; left: 50%; top: auto; width: 100%; min-width: 7.812vw; z-index: 2; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 0.260vw 0.260vw rgba(0, 0, 0, 0.1); border-radius: 0 0 0.260vw 0.260vw; padding: 0.781vw 0; line-height: 2.083vw; display: none; text-align: center; transform: translateX(-50%); } .navSecond li{ font-size: 0.833vw; } .navSecond a { color: #333333; transition: all .3s; } .navSecond a:hover{ color: #E60113; } .navTit{ font-weight: normal; } .navTit a{ display: block; font-size: 0.729vw; line-height: 2; padding: 0.260vw 0.520vw; } .navCon{ position: absolute; left: 100%; top: 0; width: 100%; min-height: 100%; line-height: 1.8; background-color: rgba(0, 0, 0, 0.4); padding: .2rem 0; display: none; margin-left: 0.052vw; } .navCon a{ display: block; line-height: 2; } .navSecond li.cur .navTit a { opacity: 1; } .navRig { position: relative; float: right; line-height: 5.520vw; text-align: right; font-size: 0; margin-left: 1.562vw; transition: all .3s; } .navRig::before{ display: block; content: ""; width: 0.052vw; height: 1.041vw; background-color: #cccccc; position: absolute; left: 0; top: 50%; margin-top: -0.520vw; } .navRig li { display: inline-block; vertical-align: middle; font-size: 0.937vw; position: relative; } .navRig li + li{ margin-left: 1.041vw; } .navRig a, .navRig i, .navRig span { display: inline-block; vertical-align: middle; color: #000000; line-height: 1.979vw; } .navRigCon{ position: absolute; left: 50%; top: auto; background-color: rgba(0, 0, 0, 0.75); color: #FFFFFF; transform: translateX(-50%); white-space: nowrap; line-height: 1.562vw; margin-top: -1.041vw; border-radius: 0 0 0.260vw 0.260vw; display: none; } .navRigCon::before{ display: block; content: ""; width: 0; height: 0; position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; border: 0.312vw solid rgba(0, 0, 0, 0.75); border-top: none; border-left-color: transparent; border-right-color: transparent; } .navRigCon a{ display: block; font-size: 0.729vw; color: #FFFFFF; padding: 0 1.041vw; } .navRig li.navSearch span { width: 2.604vw; height: 2.604vw; background: url(../images/icon_search.png) right 45% no-repeat; background-size: 1.145vw auto; cursor: pointer; } .navRig li.navLang a i{ width: 0.625vw; height: 0.364vw; background: url(../images/icon_arrow.png) center top no-repeat; background-size: contain; margin-left: 0.260vw; } .navRig li.navBtn { cursor: pointer; display: none; } .navRig li.navBtn::before{ display: none; } .searchCon { position: absolute; right: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; height: 100%; opacity: 0; visibility: hidden; background-color: #FFFFFF; transition: all .3s; } .searchWrap{ width: 100%; max-width: 80.72vw; position: relative; height: 100%; } .searchInput { display: block; width: 100%; height: 100%; line-height: 100%; padding: 0 0.781vw; padding-right: 2.604vw; padding-left: 2.083vw; border: none; font-size: 0.833vw; color: #4D4D4D; } .searchBtn { display: block; position: absolute; left: 0; top: 50%; margin-top: -1.041vw; width: 2.083vw; height: 2.083vw; background: url(../images/icon_search.png) center center no-repeat; border: none; cursor: pointer; } .searchBtn:focus { border: none; outline: none; } .searchClose { display: block; width: 2.083vw; height: 2.083vw; background: url(../images/close.png) center center no-repeat; background-size: 1.041vw auto; position: absolute; right: 0; top: 50%; margin-top: -1.041vw; cursor: pointer; transition: all .3s ease; } .searchClose:hover { transform: rotate(90deg); } .opened .searchCon { opacity: 1; visibility: visible; } .mainBg{ position: relative; overflow: hidden; font-size: 0.729vw; color: #000000; line-height: 1.562vw; background-color: #FFFFFF; z-index: 1; min-height: 50vh; } .grayBg{ background-color: #fafafa; } .whiteBg{ background-color: #FFFFFF; } .footBg{ position: relative; overflow: hidden; background-color: #f0f1f3; } .ftTop{ padding: 3.125vw 0; font-size: 0.833vw; color: #808080; line-height: 1.875vw; } .ftLef{ float: left; width: 38%; } .ftLx{ margin-bottom: 1.041vw; } .ftLx p{ padding-left: 2.083vw; background-position: left 0.260vw; background-repeat: no-repeat; background-size: 1.25vw; } .ft400 { font-size: 1.145vw; font-size: 0.937vw; color: #1a1a1a; background-image: url(../images/ft400.png); } .ftTel{ background-image: url(../images/ftTel.png); } .ftEmail{ background-image: url(../images/ftEmail.png); } .ftAddress{ background-image: url(../images/ftAddress.png); } .ftShare{ list-style: none; font-size: 0; min-height: 4.166vw; } .ftShare li { position: relative; display: inline-block; vertical-align: top; } .ftShare li + li{ margin-left: 1.562vw; } .ftIco{ display: block; width: 2.5vw; height: 2.5vw; background-position: center center; background-size: cover; background-repeat: no-repeat; transition: all .3s ease; } .ftIco1{ background-image: url(../images/ftIco1.png); } .ftIco2 { background-image: url(../images/ftIco2.png); } .ftIco1:hover { background-image: url(../images/ftIco1_a.png); } .ftIco2:hover { background-image: url(../images/ftIco2_a.png); } .ftWx{ position: absolute; left: 100%; top: 0; margin-left: 1.25vw; width: 5.833vw; height: auto; padding: 0.052vw; border-radius: 0.520vw; background-color: #FFFFFF; opacity: 0; visibility: hidden; transform: translateX(0.260vw); transition: all .3s ease; } .ftWx::before{ display: block; content: ""; width: 0; height: 0; position: absolute; right: 100%; top: 0.937vw; border-right: 0.625vw solid #FFFFFF; border-top: 0.364vw solid transparent; border-bottom: 0.364vw solid transparent; } .ftWx img{ display: block; width: 100%; height: auto; } .ftIco:hover + .ftWx{ opacity: 1; visibility: visible; transform: translateX(0); } .ftRig{ float: right; width: 60%; } .ftNav{ list-style: none; display: flex; justify-content: space-between; margin: 0 -0.520vw; } .ftNav li{ padding: 0 0.520vw; } .ftNav li h3{ margin-bottom: 0.520vw; } .ftTit{ font-size: 0.937vw; color: #ef0000; line-height: 2; } .ftCon p a{ color: #808080; transition: all .3s; } .ftCon p a:hover { color: #ef0000; } .copyright{ font-size: 0.729vw; color: #b2b2b2; line-height: 2; padding: 0.520vw 0; border-top: 0.052vw solid #cccccc; text-align: center; } .copyright a{ color: #b2b2b2; } .banMore { position: relative; display: block; width: 9.375vw; height: 2.343vw; border: 0.104vw solid #FFFFFF; border-radius: 1.562vw; font-size: 0.937vw; color: #FFFFFF; line-height: 2.135vw; text-align: center; letter-spacing: 0.208vw; overflow: hidden; font-weight: 600; transition: all .3s; } .banMore:hover { color: #FFFFFF; border-color: #EF0000; background-color: #EF0000; } .redMore{ color: #EF0000; border-color: #EF0000; } .hmTit{ position: relative; padding-right: 5.729vw; border-left: 0.312vw solid #ef0000; padding-left: 1.302vw; margin-bottom: 2.083vw; z-index: 2; } .hmTitCn{ font-size: 1.979vw; font-size: 1.562vw; color: #404040; line-height: 1.1; margin-bottom: 0.260vw; } .hmTitEn{ font-size: 1.458vw; font-size: 1.041vw; color: #4c4c4c; line-height: 1.1; } .hmMore{ position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; font-size: 1.041vw; color: #848484; line-height: 2; padding-right: 1.458vw; background: url(../images/icon_arrow2.png) right center no-repeat; background-size: 0.468vw auto; transition: all .3s; } .whiteTit{ border-left-color: #FFFFFF; } .whiteTit .hmTitCn, .whiteTit .hmTitEn, .whiteTit .hmMore{ color: #FFFFFF; } .whiteTit .hmMore{ background-image: url(../images/icon_arrow3.png); } .banIn{ position: relative; height: 25.52vw; overflow: hidden; margin-top: 5.520vw; } .banIn .img{ width: 100%; height: 100%; } .banIn .banText { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #FFFFFF; justify-content: center; } .inTit{ font-size: 2.5vw; line-height: 1.4; margin: .1rem 0; font-weight: normal; } .inDes{ font-size: 0.833vw; line-height: 1.4; max-width: 31.25vw; } .topBg{ height: auto; line-height: 3.333vw; background-color: #FFFFFF; border-bottom: 0.052vw solid #DDDDDD; } .breadNav{ float: right; font-size: 0; list-style: none; background: url(../images/breadBg.png) left 1.16vw no-repeat; background-size: 0.833vw auto; padding-left: 1.302vw; } .breadNav li{ position: relative; display: inline-block; vertical-align: middle; font-size: 0.833vw; color: #666666; } .breadNav li a{ color: #666666; } .breadNav li + li{ padding-left: 0.937vw; margin-left: 0.833vw; max-width: 20.83vw; } .breadNav li + li::before{ display: block; content: "\f105"; font-family: FontAwesome; position: absolute; left: 0; top: 0; } .sort{ float: left; font-size: 0; list-style: none; } .sort li{ position: relative; display: inline-block; vertical-align: middle; font-size: 0.833vw; } .sort li + li{ margin-left: 3.333vw; } .sort li::after{ display: block; content: ""; width: 0%; height: 0.104vw; background-color: #E60012; position: absolute; left: 0; bottom: -0.052vw; } .sort li a{ display: block; color: #666666; font-weight: bold; } .sort li a:hover{ color: #E60012; } .sort li.active a{ color: #E60012; } .sort li.active::after{ width: 100%; } /* 寮圭獥 */ .mask{ display: block; width: 96%; max-width: 62.5vw; background: #FFFFFF; border: 0.052vw solid #DDDDDD; margin: 0 auto; padding: 2.604vw; } .close{ text-align: right; } .close span{ display: inline-block; vertical-align: middle; width: 1.25vw; height: 1.25vw; background: url(../images/close2.png) center center no-repeat; background-size: contain; margin-bottom: 1.041vw; cursor: pointer; transition: all .3s; } .anchor { display: block; padding-top: 5.520vw; margin-top: -5.520vw; } } @media (max-width:1600px) { .videoClose { width: 38px; height: 38px; } } @media (max-width:1400px) { } @media (max-width:1200px) { .wrap { width: 100%; max-width: 970px; } .header .wrap{ width: 100%; } .logo { float: left; height: 60px; } .logo a{ height: 30px; } .logo img { height: 100%; } .navRig { float: right; line-height: 60px; margin: 0; } .navRig::before{ display: none; } .navRig li { margin-left: 0; font-size: 14px; } .navRig li + li{ margin-left: 10px; } .navRigCon{ margin-top: -10px; } .navRig li.navLang a i{ margin-top: -2px; } .navRig li.navSearch span { width: 30px; height: 30px; background-size: 18px auto; } .navRig li.navBtn { display: inline-block; } .navBox { position: fixed; left: 0; right: 0; top: 60px; bottom: 0; width: 100%; overflow: hidden; z-index: 2; border-top: 1px solid rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: none; } .mini .navBox{ top: 60px; } .navList { text-align: left; height: 100%; overflow-y: auto; display: block; padding: 0 .3rem; margin: 0 auto; } .navList>li { display: block; margin: 0; text-align: left; } .navList>li>a { height: auto; line-height: 46px; padding: 0 !important; padding-right: 46px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .navList>li>a::before { display: none; } .navSecond .dropdown .navTit a::after, .navList>li.dropdown>a::after { display: block; width: 46px; content: "\f107"; position: absolute; right: 0; top: 0; font-family: FontAwesome; text-align: center; transition: all .3s; font-size: 22px; } .navList>li.cur>a::after { transform: rotate(180deg); } .opened .navList{ transform: scale(1); } .navSecond{ position: static; padding: .2rem 0 !important; transform: translateX(0); text-align: left; box-shadow: none; } .navSecond li{ position: relative; width: 100%; font-size: 14px; padding: 0 .3rem; } .navSecond li .navTit{ position: relative; display: block; padding: 0 30px; } .navCon{ position: static; font-size: 13px; padding-left: 50px; margin: 0; } .ftLx p{ padding-left: 30px; background-size: 20px auto; } .ft400{ font-size: 16px; } .ftIco{ width: 38px; height: 38px; } .ftShare li + li{ margin-left: .2rem; } .ftWx{ margin-left: 12px; } .ftWx::before { top: 10px; } .ftTop{ font-size: 14px; line-height: 28px; padding: .4rem 0; } .ftNav li h3{ margin-bottom: 5px; } .ftTit{ font-size: 16px; } .page{ margin: .5rem 0; } .page a, .page span{ width: 32px; height: 32px; line-height: 30px; } .banMore{ width: 120px; height: 36px; border-width: 1px; border-radius: 36px; font-size: 14px; line-height: 34px; letter-spacing: 2px; } .hmTit{ animation: none !important;} .hmTit{ padding-right: 80px; } .hmTitCn{ font-size: 24px; } .hmTitEn{ font-size: 16px; } .hmMore{ font-size: 14px; padding-right: 15px; background-size: 6px auto; } .banIn{ height: 3.8rem; margin-top: 60px; } .banIn .banText{ text-align: center; } .inTit{ font-size: .32rem; } .inDes{ font-size: 14px; margin: 0 auto; } .topBg{ height: auto; line-height: 50px; } .breadNav{ background-position: left center; } .breadNav li{ font-size: 14px; } .sort li{ font-size: 14px; } .sort li + li{ margin-left: .2rem; } .mask{ padding: .3rem; } .close span{ width: 20px; height: 20px; margin-bottom: .2rem; background-size: 16px auto; } .anchor { display: block; padding-top: 60px; margin-top: -60px; } .hmTit{ margin-bottom: .3rem; } .onLine li#msg{ display: none; } .onLine li.onMob{ display: block; } } @media (max-width:991px) { .ftLef, .ftRig{ float: none; width: 100%; } .ftLx{ margin-bottom: .2rem; } .ftShare{ min-height: 0; margin: .2rem 0; } .breadNav li + li{ max-width: 3rem; } .videoBox { width: 90%; } .videoClose { width: 32px; height: 32px; left: auto; right: 0; bottom: 100%; margin: 0 0 10px 0; } } @media (max-width:767px) { } @media (max-width:640px) { .logo{ padding: 21px 0; display: block; } .logo a{ height: 18px; } .navList > li > a{ font-size: 14px; } .searchInput { font-size: 14px; } .searchBtn{ background-size: 18px auto; } .searchClose{ background-size: 16px auto; } .ftRig{ display: none; } .ftNav{ flex-wrap: wrap; } .ftNav li{ width: 100%; } .ftNav li h3{ margin: 10px 0 0; } .ftTit{ line-height: 1.2; } .ftCon{ display: flex; flex-wrap: wrap; margin: 0 -5px; } .ftCon p{ padding: 0 5px; } .copyright{ font-size: 12px; padding: 10px 15px; } .hmTit{ padding-left: 10px; border-left-width: 3px; } .hmTitCn{ font-size: 20px; } .hmTitEn{ font-size: 12px; } .hmMore{ font-size: 12px; } /* 椤电爜 */ .page{ margin: .3rem 0; } .topBg{ height: auto; line-height: 36px; /* padding: .3rem 0 0; */ } .breadNav{ float: none; width: 100%; /* display: none; */ line-height: 30px; background-size: 12px auto; background-position: left 9px; padding-left: 15px; display: none; } .breadNav li + li{ padding-left: 10px; margin-left: 6px; max-width: 2.8rem; } .sort{ float: none; width: 100%; text-align: center; line-height: 36px; } .sort li{ margin: 0 .1rem; } } @media (max-width:460px) { .hmTitCn{ font-size: 16px; } /* 椤电爜 */ /* .page a{ display: none; } .page a.first, .page a.prev, .page a.next, .page a.last{ display: inline-block; } */ .page{ font-size: 0; } .page a, .page span{ width: 26px; height: 26px; line-height: 24px; font-size: 12px; margin: 1px; border-radius: 2px; } .banMore{ width: 100px; height: 32px; line-height: 30px; font-size: 12px; } .inTit{ font-size: .34rem; font-weight: bold; } .inDes{ line-height: 1.6; display: none; } .onIco{ width: 40px; height: 40px; } .onCon{ padding: 5px 15px; } .videoClose { width: 28px; height: 28px; background-size: 18px auto; } }