* {
margin : 0;
padding : 0;
box-sizing : border-box;
}
body {
font-family : "Microsoft yahei", sans-serif;
min-height : 1024px;
}
h1, h2, h3, h4 {
font-weight : normal;
}
img {
vertical-align : super;
border : 0;
}
a {
color: #666;
text-decoration: none;
color : inherit;
}
ul {
list-style : none;
padding-left : 0;
}
.hide {
display : none;
}
.clear-both {
clear : both;
}
.section {
background : url(/public/maxthon/bg-line.png) center repeat-x;
background-size : cover;
}
.section-header {
position : absolute;
top : 0;
left : 0;
width : 100%;
padding-top : 30px;
z-index : 4;
}
.header-wrapper, .footer {
max-width : 1366px;
margin : 0 auto;
}
.section-logo {
margin-left : 60px;
display : inline-block;
height : 22px;
line-height : 22px;
text-decoration : none;
font-size : 24px;
}
.section-logo-img {
vertical-align : top;
margin : 0;
border : none;
padding : 0;
}
.section-menu {
float : right;
padding : 0;
margin : 0 60px 0 0;
font-size : 18px;
font-weight : lighter;
cursor : pointer;
}
.section-menu > li {
position : relative;
display : inline-block;
padding : 0;
margin : 0 1px;
width : 116px;
text-align : center;
}
.section-menu > li a {
padding : 0 10px;
}
.section-menu > li:hover {
color : #878B93;
}
.section-subMenu {
display : none;
width : 120px;
padding : 20px 0;
position : absolute;
top : 32px;
list-style : none;
font-size : 16px;
color : #4A4A4A;
background : #FFFFFF;
box-shadow : 0 6px 12px 0 rgb(0, 0, 0, 0.08);
border-radius : 6px;
}
.arrow {
position : absolute;
width : 14px;
height : 13px;
top : -13px;
left : 48px;
background : url("/public/maxthon/nav-arrow.png") center no-repeat;
}
.section-subMenu:before {
content : '';
position : absolute;
width : 0;
height : 0;
top : -10px;
border-left : 7px solid transparent;
border-right : 7px solid transparent;
border-bottom : 10px solid #fff;
right : 50px;
}
.section-subMenu li {
height : 30px;
line-height : 30px;
}
.section-subMenu li:hover {
background : #ECEFF3;
color : #007AFE;
}
.section-body {
position : relative;
vertical-align : middle;
height : 526px;
width : 100%;
max-width : 1366px;
margin : 0 auto;
padding : 0 94px 0 60px;
z-index : 3;
}
.section-body-left {
position : absolute;
height : 526px;
line-height : 526px;
vertical-align : middle;
z-index : 1;
}
.section-body-left-content, .section-body-right-content, .section-body-right-content2 {
display : inline-block;
vertical-align : middle;
line-height : 0;
}
.phone-img {
display : none;
}
.section-body-right-content {
margin-top : 0;
transform : translate3d(0,60px,0);
transition : all 1s ease-in-out;
}
.section .title {
font-size : 64px;
color : #1E1E1E;
}
.section .subtitle {
margin : 10px auto 10px;
font-size : 21px;
color : #1E1E1E;
line-height : 36px;
}
.section .description {
margin-bottom : 10px;
font-size : 21px;
color : #4A4A4A;
line-height : 36px;
font-weight : lighter;
}
.section-body-right {
display : inline-block;
float : right;
vertical-align : middle;
height : 526px;
line-height : 526px;
}
.section-footer {
position : absolute;
width : 100%;
height : 58px;
bottom : 0;
text-align : center;
cursor : pointer;
}
.next {
animation : next-icon-move 1.5s infinite;
}
@keyframes next-icon-move {
0% {
transform : translateY(0);
}
50% {
transform : translateY(-5px);
}
100% {
transform : translateY(0);
}
}
.next-tip {
display : block;
margin : 0 auto;
width : 120px;
font-size : 14px;
color : #FFFFFF;
letter-spacing : 0.88px;
}
.next-arrow {
display : block;
width : 38px;
height : 38px;
margin : 0 auto;
}
.section-1 {
background-size : contain;
color : #4A4A4A;
}
.section-1 .section-menu > li:hover {
color : #C6DCFF;
}
.section-1 .title {
font-size : 48px;
color : #4A4A4A;
line-height : 2;
text-shadow : 0 2px 6px rgb(74, 144, 226, 0.40);
}
.section-1 .description {
font-size : 21px;
font-weight : lighter;
color : #4A4A4A;
letter-spacing : 0;
line-height : 36px;
}
.download-btn {
display : inline-block;
margin-right : 1px;
}
.download-btn .download-pc, .download-btn .download-onphone {
display : inline-block;
width : 280px;
height : 80px;
line-height : 80px;
font-size : 38px;
color : #FFFFFF;
letter-spacing : 0.9px;
text-shadow : 0 2px 2px rgb(0, 0, 0, 0.08);
text-align : center;
border : none;
border-radius : 6px;
background : #007AFE;
}
.download-onphone-btn {
display : none;
}
.download-btn .download-pc:hover, .download-btn .download-onphone:hover {
background : #007BFE;
}
.download-btn .download-pc:active, .download-btn .download-onphone:active {
background : #13B2FD;
}
.section-1 .download-btn {
vertical-align : middle;
}
.section-1 .download-btn .download-pc {
width: 120px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
.download-btn .download-others {
margin-top : 10px;
text-align : center;
color : #FFFFFF;
font-size : 18px;
}
.download-btn .download-others a {
color : #ffffff;
font-weight : lighter;
}
.download-btn .download-phone {
margin : 0px;
width : 260px;
height : 80px;
font-size : 16px;
background : #89BDFE;
border-radius : 4px;
font-weight : lighter;
}
.download-btn .code {
float : left;
margin : 5px;
width : 70px;
height : 70px;
}
.download-btn .download-link {
float : left;
margin-left : 6px;
margin-top : 18px;
text-align : left;
}
.download-btn .download-link .phone-text {
height : 24px;
line-height : 24px;
color : #fff;
}
.download-btn .download-link .phone-ios-text {
margin-top : 5px;
}
.download-btn .download-tip {
display : block;
margin : 8px auto 0;
width : 253px;
font-size : 14px;
letter-spacing : 0.88px;
}
.download-btn .download-others .download-beta, .download-onphone-item.download-beta {
font-weight : 500;
font-size : 12px;
color : #FE7D5D;
letter-spacing : 0;
}
.download-btn .download-link a:hover, .download-btn .download-others .download-portable:hover, .download-btn .download-others .download-beta:hover {
text-decoration : underline;
color : #007AFE;
}
.download-btn .download-link a:hover .phone-text {
color : #007AFE;
}
.section-1 .section-footer {
height : 77px;
}
.section-2 .download-pc {
width : 280px;
height : 80px;
line-height : 80px;
font-size : 38px;
}
.section-5 .section-body {
}
.section-5 .title {
font-size : 48px;
color : #4A4A4A;
line-height : 2;
text-shadow : 0 2px 6px rgb(74, 144, 226, 0.40);
}
.section-5 .subtitle {
margin : 10px 0 50px;
font-size : 40px;
text-align : center;
transform : translate3d(0,20px,0);
transition : all 1s ease-in-out;
}
.section-5 .download-btn {
margin : 50px auto 40px;
width : 390px;
display : block;
transform : translate3d(0,30px,0);
transition : all 1.5s ease-in-out;
}
.section-5 .download-btn .download-pc {
vertical-align : top;
}
.section-5 .download-btn .download-phone {
background : none;
position : relative;
width : 70px;
margin-left : 24px;
}
.section-5 .download-phone .phone-tip {
color : #8190A6;
position : absolute;
bottom : -8px;
left : -16px;
width : 105px;
font-size : 14px;
letter-spacing : 0.88px;
}
.section-5 .footer-menu:before, .section-5 .footer-menu:after {
display : table;
content : " ";
}
.footer-menu .product, .footer-menu .support, .footer-menu .friends, .footer-menu .about, .footer-menu .contact {
/* width : 10%; */
padding : 0 8px;
float : left;
}
.footer-menu ul + h5 {
margin-top : 20px;
}
.footer-menu a {
/* ÆÁ±Îa±êÇ©»»ÐÐ; */
/* display : block; */
}
.footer-menu a:hover {
color : #007AFE;
text-decoration : underline;
}
.footer-menu .contact {
/* width : 44%; */
}
.section-5 .footer-menu:after {
clear : both;
}
.section-5 .section-footer {
height : 26px;
width : 100%;
max-width : 1366px;
margin : 0 auto;
padding : 0 60px;
}
.footer-wrapper {
position : absolute;
bottom : 10px;
left : 0;
width : 100%;
padding-top : 30px;
z-index : 2;
}
.section-5 .footer-l {
text-align : left;
width : 100%;
display : inline-block;
}
.section-5 .footer-r {
text-align : right;
}
.section-5 .footer-menu .f-title {
margin-bottom : 0;
font-weight : lighter;
font-size : 13px;
color : #8190A6;
line-height : 36px;
}
.section-5 .footer-menu li {
font-size : 12px;
font-weight : lighter;
color : #4A4A4A;
line-height : 18px;
}
.company-name {
font-weight : lighter;
font-size : 18px;
color : #4A4A4A;
letter-spacing : 0;
line-height : 36px;
}
.footer {
font-size : 12px;
color : #ABB4C0;
padding : 0 60px;
letter-spacing : 0.75px;
}
.active .section-body-right-content, .active.section-5 .title, .active.section-5 .subtitle, .active .honors, .active .user-evaluates, .active.section-5 .download-btn {
transform : translate3d(0,0,0);
}
.section-body-right-content2 {
margin-top : 0;
transform : translate3d(0,60px,0);
transition : all 1s ease-in-out;
}
.active2.section-1 .section-body-right-content2 {
transform : translate3d(0,0,0);
}
.footer-code {
margin-top : 10px;
}
.footer-code .wx, .footer-code .wb {
position : relative;
display : inline-block;
margin : 0 12px 0 0;
text-align : center;
vertical-align : top;
}
.code {
width : 86px;
height : 86px;
}
.code-tip {
display : block;
font-weight : lighter;
font-size : 13px;
color : #8190A6;
line-height : 36px;
}
.languages {
display : block;
border : #C7CED8 solid 1px;
border-radius : 2px;
width : 160px;
height : 40px;
line-height : 40px;
font-size : 17px;
color : #8190A6;
text-align : center;
text-decoration : none;
}
.icon-global {
display : inline-block;
height : 20px;
width : 20px;
margin-right : 10px;
vertical-align : middle;
background : url(/public/maxthon/n-global-icon.png) center no-repeat;
}
.down-arrow {
display : inline-block;
width : 10px;
height : 4px;
vertical-align : middle;
background : url(/public/maxthon/arrow-up.png) center no-repeat;
}
.languages-btn {
position : relative;
}
.languages-btn:hover .down-arrow {
background : url(/public/maxthon/arrow-down.png) center no-repeat;
}
.languages-btn .section-subMenu {
margin : 0;
text-align : center;
top : 39px;
}
.languages-btn .section-subMenu:before {
display : none;
}
.languages-btn:hover .all-languages {
display : block;
z-index : 3;
}
.onphone-show {
display : none;
}
.onphone-hide {
display : block;
}
.download-btn .noupdate, .download-btn .noupdate:hover, .download-btn .noupdate:active, .download-btn .noupdate-main, .download-btn .noupdate-main:hover, .download-btn .noupdate-main:active {
background : #D7DEE8;
color : #ABB4C0;
text-shadow : none;
cursor : default;
}
.download-btn .noupdate-main, .download-btn .noupdate-main:hover, .download-btn .noupdate-main:active {
background : #E6ECF4;
}
.section-body-right-content img, .section-body-right-content2 img {
width : 645.41px;
height : 400px;
}
.section-logo-img {
height : 22px;
}
.section-5 .download-phone img {
width : 70px;
height : 70px;
}
#fp-nav.right {
right : 40px;
}
#fp-nav ul li, .fp-slidesNav ul li {
margin : 22px 0 20px 0;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span {
width : 8px;
height : 8px;
margin : -4px 0 0 -4px;
background : url("/public/maxthon/tab-default.png") center no-repeat;
}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
background : url("/public/maxthon/tab-active.png") center no-repeat;
}
@media screen and (max-width: 1366px) {
.section-body-right-content img, .section-body-right-content2 img {
width : 613.14px;
height : 380px;
}
.section-1 .download-btn .download-pc {
width: 120px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
.section .description {
font-size : 21px;
margin-bottom : 42px;
}
}
@media screen and (max-width: 1280px) {
.section-menu > li {
position : relative;
display : inline-block;
padding : 0;
margin : 0 1px;
width : 100px;
text-align : center;
}
.section .title {
font-size : 64px;
}
.section .subtitle {
font-size : 20px;
}
.section .description {
font-size : 18px;
margin-bottom : 42px;
}
.section-body-left {
line-height : 0px;
}
.section-body-right-content img, .section-body-right-content2 img {
width : 516.33px;
height : 320px;
}
.section-footer {
height : 38px;
}
.section-1 .download-btn .download-pc {
width: 110px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
.section-1 .section-footer {
height : 58px;
}
.section-1 .download-btn {
margin-right : 0;
}
.download-btn .download-phone {
width : 190px;
height : 70px;
}
.download-btn .code {
width : 60px;
height : 60px;
}
.download-btn .download-link {
margin-top : 12px;
}
.section-5 .section-body {
height : 376px;
}
.section-5 .download-btn {
margin-top : 46px;
}
.active.section-5 .download-btn {
margin-top : 36px;
}
.section-5 .download-phone .phone-tip {
bottom : -10px;
}
.section-5 .section-footer {
height : 20px;
}
#fp-nav.right {
right : 20px;
}
}
@media screen and (max-width: 1152px) {
.section-body-right-content img, .section-body-right-content2 img {
width : 451.78px;
height : 280px;
}
.section-1 .download-btn .download-pc {
width: 100px;
height: 50px;
line-height: 50px;
font-size: 16px;
}
.section .description {
font-size : 18px;
margin-bottom : 42px;
}
}
@media screen and (max-width: 1080px) {
.section-body-right-content img, .section-body-right-content2 img {
width : 387.25px;
height : 240px;
}
.section-1 .download-btn .download-pc {
width: 100px;
height: 50px;
line-height: 50px;
font-size: 16px;
}
.section .description {
font-size : 18px;
margin-bottom : 42px;
}
}
@media screen and (min-width: 1024px) and (max-height: 768px) {
.next-tip {
display : none;
}
.section-footer, .section-1 .section-footer {
height : 40px;
}
.section-1 .title {
font-size : 40px;
}
.section-1 .description {
margin-bottom : 10px;
}
.section-1 .section-body-left {
line-height : 578px;
}
.section-body-right, .section-body-left {
line-height : 546px;
}
.section-5 .section-body {
height : 479px;
}
.section-5 .download-btn, .active.section-5 .download-btn {
margin-top : 24px;
margin-bottom : 20px;
}
.section-5 .download-btn .download-pc {
height : 60px;
line-height : 60px;
width : 220px;
font-size : 28px;
margin-top : 5px;
}
.section-5 .download-phone .phone-tip {
font-size : 12px;
bottom : -6px;
left : -8px;
}
.section-5 .section-footer {
height : 26px;
}
.footer {
font-size : 12px;
}
.section-5 .title {
font-size : 40px;
}
.section-5 .subtitle {
margin : 0 0 18px;
font-size : 30px;
}
.section-5 .footer-menu .f-title {
line-height : 16px;
}
.section-5 .footer-menu li {
line-height : 22px;
}
.code-tip {
line-height : 20px;
}
.code {
width : 50px;
height : 50px;
}
}
@media screen and (max-width: 1023px) {
.section-header {
padding-top : 15px;
}
.section-logo {
margin-left : 15px;
}
.section-logo-img {
height : 50%;
}
.section-menu {
display : none;
}
.languages-btn {
display : block;
width : 305px;
position : relative;
top : initial;
left : initial;
right : initial;
margin : 25px auto 0;
float : none;
}
.languages {
width : 305px;
height : 50px;
line-height : 48px;
margin : 0 auto;
}
.languages-btn .section-subMenu {
width : 305px;
top : 49px;
left : 0;
}
.section-body {
height : 444px;
padding : 0 15px;
}
.section-1 .section-body {
height : 80%;
}
.section-body-left {
text-align : center;
width : 100%;
height : 100%;
line-height : 1;
position : relative;
}
.phone-img {
display : block;
margin-bottom : 0px;
width : 100%;
}
.phone-img img {
height : 186.03px;
width : 300px;
}
.section-body-left-content {
width : 100%;
}
.section-body-right-content img, .section-body-right-content2 img {
height : 200px;
}
.download {
text-align : center;
}
.download-btn {
display : block;
margin : 0;
}
.download-pc, .download-others, .download-phone, .download-tip {
display : none !important ;
}
.section-body-left-content > .title {
font-size : 29px;
font-weight : lighter;
line-height : 30px;
}
.section-1 .title {
font-size : 29px;
font-weight : normal;
letter-spacing : 1px;
}
.section .subtitle {
font-size : 15px;
font-weight : 500;
line-height : 22px;
margin : 5px 0 5px;
}
.section .description {
font-size : 15px;
font-weight : 500;
line-height : 22px;
margin : 5px 0 20px;
}
.section .description img {
width : 48px;
}
.section-1 .description {
margin : 5px 0 5px;
}
.section-1 .section-footer {
height : 38px;
}
.next-tip {
display : none;
}
.download-btn .download-onphone {
margin : 0 auto;
display : inline-block;
width : 140px;
max-width : 350px;
height : 50px;
line-height : 50px;
font-size : 14px;
letter-spacing : 1.29px;
margin-top : 5px;
}
.download-onphone-item, .download-onphone-others .download-onphone-item {
display : block;
margin-top : 6px;
font-size : 14px;
color : #FFFFFF;
letter-spacing : 1px;
font-weight : lighter;
text-align : center;
}
.download-onphone-item.download-beta {
font-weight : bold;
font-size : 16px;
color : #FE7D5D;
letter-spacing : 0;
}
.download-onphone-others .download-onphone-item {
display : inline-block;
}
.download-onphone-others .download-onphone-item:hover {
text-decoration : underline;
color : #007AFE;
}
.section-body-right {
display : none;
}
.section-5 .download-btn {
width : 270px;
}
.section-5 .title, .section-5 .subtitle, .section-5 .download-btn, .footer-menu .product, .footer-menu .support, .footer-menu .friends, .footer-menu .about, .footer-code .wb {
/*display : none;*/
}
.section-5 .contact {
width : 100%;
text-align : center;
}
.section-5 .footer-menu .contact .f-title {
margin-bottom : 20px;
font-size : 16px;
line-height : 16px;
color : #4A4A4A;
}
.company-name {
margin-bottom : 10px;
font-size : 21px;
font-weight : normal;
color : #1E1E1E;
line-height : 22px;
}
.section-5 .footer-menu li {
font-weight : lighter;
line-height : 18px;
}
.footer {
padding : 0 15px;
}
.footer-code .wx {
margin-right : 0;
}
#fp-nav {
display : none;
}
.section-5 .section-footer {
margin-top : 31px;
position : relative;
top : initial;
bottom : initial;
padding : 0;
}
.section-5 .footer-l, .section-5 .footer-r {
display : block;
width : 100%;
text-align : center;
color : #8190A6;
}
.section-5 .footer-l {
margin-bottom : 10px;
}
.download-onphone-btn {
display : block;
}
.onphone-show {
display : block;
}
.onphone-hide {
display : none;
}
}
@media screen and (max-width: 374px) {
.section-1 .section-body {
height : 80%;
}
.phone-br {
display : none;
}
.section-body-left-content > .title {
font-size : 22px;
}
.section .description {
font-size : 14px;
font-weight : 500;
}
.section .description img {
width : 40px;
}
.phone-img img {
height : 124.02px;
width : 200px;
}
.section .subtitle {
font-size : 14px;
}
.section-5 .section-body {
height : 417px;
}
.languages-btn, .languages, .languages-btn .section-subMenu {
width : 290px;
}
.section-5 .footer-l {
margin-bottom : 0;
}
.languages-btn {
margin-top : 5px;
}
.footer-menu .contact {
padding : 0;
}
}
@media screen and (max-width: 1023px) and (max-height: 480px) {
.phone-img img {
height : 93.02px;
width : 150px;
}
.section-5 .section-body {
height : 200px;
}
.section .subtitle {
font-size : 14px;
font-weight : 500;
line-height : 16px;
margin : 5px 0 5px;
font-weight : lighter;
}
.section .description {
font-size : 12px;
font-weight : 500;
line-height : 20px;
margin : 5px 0 5px;
}
.section .description img {
width : 28px;
}
.download-btn .download-onphone {
margin : 0 auto;
display : inline-block;
width : 140px;
max-width : 350px;
height : 30px;
line-height : 30px;
font-size : 14px;
letter-spacing : 1.29px;
margin-top : 3px;
}
.section-body-left-content > .title {
font-size : 20px;
font-weight : lighter;
line-height : 20px;
}
.section-body-left {
text-align : center;
width : 100%;
height : 100%;
line-height : 0;
position : relative;
}
@media screen and (max-width: 374px) and (max-height: 480px) {
.section-1 .section-body {
height : 414px;
}
.phone-br {
display : none;
}
.section-body-left-content > .title {
font-size : 20px;
line-height : 40px;
}
.section .description {
font-size : 14px;
font-weight : 500;
margin : 10px;
line-height : 20px;
}
.section .description img {
width : 28px;
}
.phone-img img {
width : 190px;
}
.download-btn .download-onphone {
margin : 0 auto;
display : inline-block;
width : 140px;
max-width : 350px;
height : 30px;
line-height : 30px;
font-size : 14px;
letter-spacing : 1.29px;
margin-top : 3px;
}
.section .subtitle {
font-size : 14px;
}
.section-5 .section-body {
height : 300px;
}
.languages-btn, .languages, .languages-btn .section-subMenu {
width : 290px;
}
.section-5 .footer-l {
margin-bottom : 0;
}
.languages-btn {
margin-top : 5px;
}
.footer-menu .contact {
padding : 0;
}
}
@media screen and (min-width: 1160px) and (max-width: 1280px) {
.section-body {
padding : 0 80px 0 46px;
}
}
@media screen and (max-width: 1023px) and (max-height: 604px) {
.section-1 .section-body {
height : 80%;
}
.phone-br {
display : none;
}
}