@font-face { font-weight: 300; src: url(/res/style/fonts/aktivgrotesk-light/AktivGrotesk_W_Lt.eot); src: url(/res/style/fonts/aktivgrotesk-light/AktivGrotesk_W_Lt.eot?#iefix) format('embedded-opentype'), url(/res/style/fonts/aktivgrotesk-light/AktivGrotesk_W_Lt.woff) format('woff'), url(/res/style/fonts/aktivgrotesk-light/AktivGrotesk_W_Lt.ttf) format('truetype'), url(/res/style/fonts/aktivgrotesk-light/AktivGrotesk_W_Lt.svg#AktivGrotesk-Light) format('svg'); font-weight: 300; font-style: normal; } @font-face { font-weight: 300; src: url(/res/style/fonts/aktivgrotesk-regular/AktivGrotesk_W_Rg.eot); src: url(/res/style/fonts/aktivgrotesk-regular/AktivGrotesk_W_Rg.eot?#iefix) format('embedded-opentype'), url(/res/style/fonts/aktivgrotesk-regular/AktivGrotesk_W_Rg.woff) format('woff'), url(/res/style/fonts/aktivgrotesk-regular/AktivGrotesk_W_Rg.ttf) format('truetype'), url(/res/style/fonts/aktivgrotesk-regular/AktivGrotesk_W_Rg.svg#AktivGrotesk-Regular) format('svg'); font-weight: 400; font-style: normal; } @font-face { font-weight: 300; src: url(/res/style/fonts/aktivgrotesk-medium/AktivGrotesk_W_Md.eot); src: url(/res/style/fonts/aktivgrotesk-medium/AktivGrotesk_W_Md.eot?#iefix) format('embedded-opentype'), url(/res/style/fonts/aktivgrotesk-medium/AktivGrotesk_W_Md.woff) format('woff'), url(/res/style/fonts/aktivgrotesk-medium/AktivGrotesk_W_Md.ttf) format('truetype'), url(/res/style/fonts/aktivgrotesk-medium/AktivGrotesk_W_Md.svg#AktivGrotesk-Medium) format('svg'); font-weight: 500; font-style: normal; } @font-face { font-weight: 300; src: url(/res/style/fonts/aktivgrotesk-bold/AktivGrotesk_W_Bd.eot); src: url(/res/style/fonts/aktivgrotesk-bold/AktivGrotesk_W_Bd.eot?#iefix) format('embedded-opentype'), url(/res/style/fonts/aktivgrotesk-bold/AktivGrotesk_W_Bd.woff) format('woff'), url(/res/style/fonts/aktivgrotesk-bold/AktivGrotesk_W_Bd.ttf) format('truetype'), url(/res/style/fonts/aktivgrotesk-bold/AktivGrotesk_W_Bd.svg#AktivGrotesk-Bold) format('svg'); font-weight: 700; font-style: normal; } /* 覆盖main.css种的属性，否则导航栏sticky布局不生效 */ body, body>.page-content-wrapper, html{ overflow: inherit; } #deco { color: #36444B; font-weight: 300; margin: 0 auto; max-width: 1920px; position: relative; } #deco .wrap { margin: 0 auto; position:relative; width: 1366px; } #deco h2 { font-size: 21px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; text-transform: uppercase; } #deco h3 { font-size: 18px; font-weight: 700; line-height: 1.2; } #deco p { font-size: 18px; font-weight: 400; line-height: 1.5; } /***************************************************************************************************************/ #deco-nav { background:#fff; box-sizing:border-box; border-top:1px solid #eee; box-shadow:0 3px 3px rgba(0,0,0,0.1); font-size:0; height:60px; opacity:0.95; position:sticky; text-align:right; top:0; z-index:99; } #deco-nav .checkbox { position:fixed; top:-9999px; } #deco-nav .bg { height:0; } #deco-nav .arrow { display:none; } #deco-nav .left { position:absolute; left:0; top:0; } #deco-nav .left .img-box { display:inline-block; padding-top:11px; vertical-align:top; } #deco-nav .left .img-box img { display:block; } #deco-nav .left .m5 { color:#53C0CD; display:inline-block; font-size:16px; font-weight:700; line-height:59px; margin-left:87px; text-decoration:none; vertical-align:top; } #deco-nav .left .m9 { color:#231F20; display:inline-block; font-size:16px; font-weight:700; line-height:59px; margin-left:10px; text-decoration:none; vertical-align:top; } #deco-nav .nav { display:inline-block; line-height:59px; vertical-align:middle; } #deco-nav .nav .nav-item { color:#231F20; display:inline-block; font-size:16px; font-weight:400; padding:0 30px; text-decoration:none; } #deco-nav .nav .nav-item:hover, #deco-nav .nav .nav-item.active { color:#53C3D0; font-weight:700; } #deco-nav .buy { display:inline-block; line-height:59px; margin-left:20px; vertical-align:middle; } #deco-nav .buy a { background:#FFC605; border-radius:8px; color:#231F20!important; font-size:16px; font-weight:700; padding:8px 20px; text-decoration:none; text-transform:uppercase; } @media screen and (max-width:1440px){ #deco .wrap { width:95%; } #deco-nav .left .m5 { margin-left:30px; } #deco-nav .nav .nav-item { font-size:15px; padding:0 10px; } } @media screen and (max-width:736px){ #deco { min-width: 320px; padding-top: 45px; } #deco .wrap { min-width: 0; width: auto; } #deco-nav { opacity:1; padding:0 20px; } #deco-nav .left .m5 { display:none; } #deco-nav .left .m9 { display:none; } #deco-nav .nav { background:#fff; border-top:1px solid #eee; box-shadow:0 3px 3px rgba(0,0,0,0.1); box-sizing:border-box; height:0; left:-20px; overflow:hidden; position:absolute; right:-20px; top:59px; transition:all .3s cubic-bezier(.86,0,.07,1) } #deco-nav .nav .nav-item { display:block; line-height:48px; text-align:center; } #deco-nav .nav .nav-item:first-child{ margin-top:16px; } #deco-nav .nav .nav-item:last-child{ margin-bottom:16px; } #deco-nav .buy { position:absolute; right:0; top:0; } #deco-nav .buy a { font-size:13px; padding:8px 12px; } #deco-nav .arrow{ cursor:pointer; display:block; margin:0 auto; position:relative;top:15px;width:30px;height:30px;z-index:1;transition:transform 0.5s cubic-bezier(.86,0,.07,1);transform:translateY(16%)} #deco-nav .arrow::after, #deco-nav .arrow::before{content:"";display:block;position:absolute;top:50%;width:12px;height:1px;z-index:1;transition:transform .5s cubic-bezier(.86,0,.07,1),transform-origin .5s cubic-bezier(.86,0,.07,1);} #deco-nav .arrow::before{right:50%} #deco-nav .arrow::after{left:50%} #deco-nav .arrow::after, #deco-nav .arrow::before{background:#333} #deco-nav .arrow::before{transform-origin:100% 100%;transform:rotate(40deg) scaleY(1.5)} #deco-nav .arrow::after{transform-origin:0 100%;transform:rotate(-40deg) scaleY(1.5)} #deco-nav-checkbox:checked ~ .arrow { transform:translateY(-16%); } #deco-nav-checkbox:checked ~ .arrow::before{transform-origin:100% 0;transform:rotate(-40deg) scaleY(1.5)} #deco-nav-checkbox:checked ~ .arrow::after{transform-origin:0 0;transform:rotate(40deg) scaleY(1.5)} #deco-nav-checkbox:checked ~ .nav { height:320px; } #deco-nav-checkbox:checked ~ .bg { background:rgba(0,0,0,0.3); bottom:0; height:100vh; left:0; position:fixed; right:0; top:120px; } }