@font-face{ font-family: "syr"; src: url('../fonts/SOURCEHANSANSCN-REGULAR.OTF'); } @font-face{ font-family: "ManropeRegular"; src: url('../fonts/manrope-regular-6.otf'); } .conwidth{ max-width: 1600px; width: 90%; margin: auto; } .owidth{ max-width: 1920px; width: 100%; margin: auto; padding: 0 5.2%; box-sizing: border-box; } /*footer*/ .addfooter{ padding-top: 55px; background: #2d2d2d; } .addfooter .foot_top{ position: relative; display: flex; justify-content: space-between; } .addfooter .foot_top:before{ content: ''; position: absolute; left: 0; top: 70px; width: 100%; height: 1px; background: rgba(255,255,255,0.1); } .addfooter .foot_infor{ max-width: 700px; width: 44%; } .addfooter .foot_infor .foot_logo{ margin-bottom: 50px; } .addfooter .foot_infor ul li{ /*display: inline-block;*/ margin-right: 110px; margin-bottom: 35px; } .addfooter .foot_infor ul li:nth-child(2n){ margin-right: 0; } .addfooter .foot_infor .h4{ color: #999999; font-size: 14px; margin-bottom: 15px; } .addfooter .foot_infor .h5{ font-size: 18px; color: #eef2f5; } .addfooter .foot_infor .h3{ /* font-family: "ManropeRegular"; */ color: #eef2f5; font-size: 24px; } .addfooter .subscribe .form{ max-width: 325px; width: 100%; overflow: hidden; } .addfooter .subscribe .text{ float: left; width: 70%; height: 52px; line-height: 50px; padding: 0px 15px; background: none; border: rgba(238,242,245,0.2) solid 1px; box-sizing: border-box; color: #eef2f5; font-size: 16px; } .addfooter .subscribe .btn{ float: right; width: 24.6%; height: 52px; background: #00a19b; border: none; box-sizing: border-box; font-family: 'syr'; color: #ffffff; font-size: 16px; } .addfooter .foot_nav{ max-width: 750px; width: 55%; padding-top: 20px; } .addfooter .foot_nav>ul>li{ float: left; margin-right: 60px; } .addfooter .foot_nav>ul>li:last-child{ margin-right: 0; } .addfooter .foot_nav ul li .tit a{ color: #FFFFFF; font-size: 18px; } .addfooter .foot_nav ul li ul{ margin-top: 55px; } .addfooter .foot_nav ul li ul li a{ color: #999999; font-size: 16px; line-height: 1.7; transition: all 0.4s ease; } .addfooter .foot_nav ul li ul li a:hover{ color: #FFFFFF; } .addfooter .foot_bot{ padding-top: 60px; padding-bottom: 20px; /*overflow: hidden;*/ display: flex; align-items: center; justify-content: space-between; } .addfooter .foot_bot .text{ float: left; flex: 1; color: rgba(224,224,224,0.4); font-size: 14px; line-height: 1.7; } .addfooter .foot_bot .text a{ margin: 0 5px; color: rgba(224,224,224,0.4); transition: all 0.4s ease; } .addfooter .foot_bot .text .oth{ position: relative; padding-left: 8px; margin-left: 5px; display: inline-block; } .addfooter .foot_bot .text .oth:before{ content: ''; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; width: 1px; height: 14px; background: rgba(224,224,224,0.4); } .addfooter .foot_bot .foot-share{ float: right; padding-left: 20px; } .addfooter .foot_bot .foot-share ul li{ position: relative; float: left; margin-left: 15px; } .addfooter .foot_bot .foot-share ul li a{ display: block; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 50%; background: rgba(255,255,255,0.1); transition: all 0.4s ease; } .addfooter .foot_bot .foot-share ul li:hover a, .addfooter .foot_bot .foot-share ul li.on a{ background: #00a19b; } .addfooter .foot_bot .foot-share ul li .popup{ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; position: absolute; bottom: 50px; left: 50%; margin-left: -50px; width: 100px; height: 100px; padding-bottom: 12px; z-index: 10; -moz-transition: all .36s ease; -o-transition: all .36s ease; -webkit-transition: all .36s ease; transition: all .36s ease; -moz-transform: translate(0, -20px); -ms-transform: translate(0, -20px); -webkit-transform: translate(0, -20px); transform: translate(0, -20px); visibility: hidden; } .addfooter .foot_bot .foot-share ul li.on .popup{ filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -webkit-transform: translate(0, 0); transform: translate(0, 0); visibility: visible; } .addfooter .foot_bot .foot-share ul li .er-code{ background: #FFFFFF; } .addfooter .foot_bot .foot-share ul li .er-code img { width: 100px; height: 100px; } .addfooter .foot_bot .foot-share ul li .triangle{ position: absolute; left: 50%; bottom: -9px; -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 9px 6px 0px; border-color: #FFFFFF transparent transparent transparent; } @media only screen and (max-width: 1536px){ /*footer*/ .addfooter .foot_infor ul li{ margin-right: 80px; } .addfooter .foot_infor .h3{ font-size: 21px; } .addfooter .foot_nav>ul>li{ margin-right: 40px; } } @media only screen and (max-width: 1440px){ .addfooter .foot_infor ul li{ margin-right: 60px; } .addfooter .foot_nav>ul>li{ margin-right: 30px; } } @media only screen and (max-width: 1280px){ /**/ .addfooter .foot_infor ul li{ margin-right: 40px; } .addfooter .foot_infor .h3{ font-size: 19px; } .addfooter .foot_infor .h5 { font-size: 16px; } .addfooter .foot_nav ul li ul li a{ font-size: 15px; } } @media only screen and (max-width: 1199px){ /**/ .addfooter .foot_infor{ max-width: 100%; width: 100%; } .addfooter .foot_infor ul li:nth-child(2n){ margin-right: 40px; } .addfooter .subscribe .text{ height: 48px; line-height: 46px; font-size: 15px; } .addfooter .subscribe .btn{ height: 48px; font-size: 15px; } .addfooter .foot_nav{ display: none; } .addfooter .foot_bot{ padding-top: 40px; } } @media only screen and (max-width: 1024px){ /**/ .addfooter .foot_bot{ display: block; } .addfooter .foot_bot .text{ float: none; } .addfooter .foot_bot .foot-share{ display: none; } } @media only screen and (max-width: 768px){ .addfooter{ padding-top: 50px; } .addfooter .foot_bot .text{ text-align: center; } .addfooter .foot_bot .text .oth{ display: block; } .addfooter .foot_bot .text .oth:before{ display: none; } } @media only screen and (max-width: 540px){ .addfooter .foot_infor ul li{ margin-bottom: 30px; } .addfooter .foot_infor .h3{ font-size: 17px; } .addfooter .foot_infor .h4{ margin-bottom: 12px; } .addfooter .foot_infor .h5{ font-size: 15px; } .addfooter .subscribe form{ max-width: 100%; } .addfooter .subscribe .text { width: calc(100% - 100px); height: 44px; line-height: 42px; } .addfooter .subscribe .btn { width: 80px; height: 44px; } .addfooter .foot_bot{ padding-top: 30px; } } @media only screen and (max-width: 480px){ /**/ .addfooter .foot_infor ul li{ display: block; } .addfooter .foot_infor .h3, .addfooter .foot_infor .h5{ font-size: 14px; } }