/** * Created by Noisky on 17/05/13. * Revised by Noisky on 19/08/29. */ @import url(animate.css); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; font: inherit; font-size: 100%; } tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } body:before, body:after { display: table; content: ""; } body:after { clear: both; } html, body { height: 100%; } html { height: 100%; max-height: 100%; } body { color: #333333; font-size: 1em; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; -webkit-font-smoothing: antialiased; } ::selection { background: rgba(255, 255, 255, 0.3); } ::-moz-selection { background: rgba(255, 255, 255, 0.3); } a { color: #DF9C81; text-decoration: none; } a:hover { color: #d06c44; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; } h1, h2, h3, h4, h5, h5 { margin-top: 1.0em; margin-bottom: .5em; color: #333333; font-weight: lighter; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; -webkit-font-smoothing: antialiased; } h1 { margin-top: 0; letter-spacing: .05em; font-size: 1.8em; line-height: 1.2em; } h2 { font-size: 1.6em; } h3 { font-size: 1.4em; } h4 { font-size: 1.2em; } h4 { font-size: 1.1em; } h5 { font-size: 1em; } p { margin-bottom: 1.3em; line-height: 1.7em; } em { font-style: italic; } ol, ul { margin: 0 0 .3em 1em; } ol li, ul li { margin: 0 0 .2em 0; line-height: 1.6em; } ol ol, ol ul, ul ol, ul ul { margin: .1em 0 .2em 2em; } ol { list-style-type: decimal; } ul { list-style-type: disc; } .date a, .time a, .author a, .tags a { color: #666666; } .date a:hover, .time a:hover, .author a:hover, .tags a:hover { color: #d06c44; } .logo { width: 25%; border: 3px solid #FFF; border-radius: 50%; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); transition: all .5s; } .logo:hover { border: 3px solid #5ba4e5; transition: all .5s; -webkit-transform: rotate(360deg); /* Safari 和 Chrome */ -moz-transform: rotate(360deg); /* Firefox */ -o-transform: rotate(350deg); /* Opera */ transform: rotate(360deg); -ms-transform: rotate(360deg); /* IE 9 */ } /* 微博图标 .Weibo_icon_logo { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); vertical-align: -2px; } .Weibo_icon { display: inline-block; background-image: url(//cdn.jsdelivr.net/gh/ldxw/CDN@v2.0.1/Noisky_files/img/V_icon_lite.png); background-repeat: no-repeat; } .Weibo_icon_position { position: relative; top: -12px; right: 42px; }*/ /* 国旗 */ .Weibo_icon_position { position: relative; right: 42px; top: -5px; } .Weibo_icon { display: inline-block; background-image: url(//cdn.jsdelivr.net/gh/ldxw/CDN@v2.0.1/Noisky_files/img/feed_icon_32x28.png); background-repeat: no-repeat; } .Weibo_icon_logo { width: 40px; height: 35px; vertical-align: -2px; } hr { border: none; } .hidden { display: none !important; } .panel-title { margin: 0 0 15px 0; color: #FFF; letter-spacing: 4px; font-size: 2.5em; } .panel-subtitle { color: #CCCCCC; letter-spacing: 3px; font-weight: lighter; font-size: 1.2em; font-family: "ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; -webkit-font-smoothing: antialiased; } .panel-cover { position: fixed; z-index: -1; display: block; width: 100%; height: 100%; max-width: none; background: url(//cdn.jsdelivr.net/gh/ldxw/CDN@v2.0.1/Noisky_files/img/background-image/bg-1.jpg) top left no-repeat #666666; background-size: cover; } .panel-cover--overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; display: block; background-color: rgba(68, 68, 68, 0.6); background-image: -webkit-linear-gradient(-410deg, rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); background-image: linear-gradient(140deg, rgba(68, 68, 68, 0.6) 20%, rgba(0, 0, 0, 0.9)); } .panel-cover_logo { margin: 0 0 .2em 40px; } .panel-cover_description { margin: 0 30px; font-weight: 400; } .panel-cover_divider { margin: 20px auto; width: 50%; border-top: 1px solid rgba(255, 255, 255, 0.14); } .panel-cover_divider-secondary { width: 15%; } .panel-main { display: table; width: 100%; height: 100%; } .panel-main_inner { position: relative; z-index: 800; display: table-cell; padding: 0 60px; vertical-align: middle; } .panel-main_content { margin: 0 auto; max-width: 620px; } .panel-inverted { color: #FFF; text-align: center; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); font-weight: 100; } .panel-inverted a { color: #FFF; } .footer { position: absolute; bottom: 0; left: 0; width: 100%; color: #d2d2d2; font-size: .7em; } .footer a { color: #d2d2d2; } .footer p { font-size: 12px; } .footer img { vertical-align: bottom; } .cover-navigation { margin-top: 42px; } /*背景覆盖层*/ .cover-blue { background-color: rgba(37, 104, 163, 0.6); background-image: -webkit-linear-gradient(-410deg, rgba(37, 104, 163, 0.6) 20%, rgba(18, 51, 80, 0.8)); background-image: linear-gradient(140deg, rgba(37, 104, 163, 0.6) 20%, rgba(18, 51, 80, 0.8)); } .cover-green { background-color: rgba(21, 111, 120, 0.6); background-image: -webkit-linear-gradient(-410deg, rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8)); background-image: linear-gradient(140deg, rgba(21, 111, 120, 0.6) 20%, rgba(6, 31, 33, 0.8)); } .cover-purple { background-color: rgba(73, 50, 82, 0.6); background-image: -webkit-linear-gradient(-410deg, rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8)); background-image: linear-gradient(140deg, rgba(73, 50, 82, 0.6) 20%, rgba(17, 11, 19, 0.8)); } .cover-red { background-color: rgba(119, 31, 18, 0.6); background-image: -webkit-linear-gradient(-410deg, rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8)); background-image: linear-gradient(140deg, rgba(119, 31, 18, 0.6) 20%, rgba(30, 8, 5, 0.8)); } .cover-orange { background-color: rgba(174, 80, 4, 0.6); background-image: -webkit-linear-gradient(-410deg, rgba(174, 80, 4, 0.6) 20%, rgba(74, 34, 2, 0.8)); background-image: linear-gradient(140deg, rgba(174, 80, 4, 0.6) 20%, rgba(74, 34, 2, 0.8)); } .cover-slate { background-color: rgba(60, 91, 147, 0.6); background-image: -webkit-linear-gradient(-410deg, rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8)); background-image: linear-gradient(140deg, rgba(61, 66, 96, 0.6) 20%, rgba(21, 23, 34, 0.8)); } .navigation_item a { padding: 10px 20px; border: 1px solid #DF9C81; border-radius: 20px; color: #DF9C81; text-shadow: none; letter-spacing: 1px; font-weight: bold; font-size: .9em; -webkit-font-smoothing: antialiased; } .navigation_item a:hover { border-color: #d06c44; color: #d06c44; } .btn-mobile-menu { position: fixed; top: 0; right: 0; left: 0; z-index: 9999; display: none; width: 100%; height: 35px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(51, 51, 51, 0.98); text-align: center; } .btn-mobile-menu_icon, .btn-mobile-close_icon { position: relative; top: 10px; color: #FFF; } nav { position: relative; display: inline-block; } .navigation { position: relative; float: left; display: inline-block; margin: 0; list-style-type: none; } .navigation_item { display: inline-block; margin: 5px 1px 0 0; line-height: 1em; } .navigation_item a { position: relative; display: block; border-color: #FFF; color: #FFF; opacity: .8; } .navigation_item a:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3); color: #FFF; opacity: 1; transition: all .3s; } .navigation--social a { padding: 6px 8px 6px 9px; border: 0; } .navigation--social a .label { display: none; } .navigation--social a .icon { display: block; font-size: 1.7em; } .social { font-size: 22px; } *:focus { outline: none; } .wechat[data-v] { position: relative; } .qrCode[data-v] { position: absolute; bottom: 43px; left: -29px; display: none; width: 100px; height: 100px; background-color: #fff; text-align: center; } .wechat .qrCode .triangle-down[data-v] { position: absolute; bottom: -8px; left: 50%; margin-left: -6px; width: 0; height: 0; border-top: 10px solid #fff; border-right: 6px solid transparent; border-left: 6px solid transparent; } .wechat:hover .qrCode[data-v] { display: inline; } @media all and (max-width: 1100px) { .panel-title { font-size: 2em; } .panel-subtitle { font-size: 1em; } .panel-cover_description { margin: 0 10px; font-size: .9em; } .navigation--social { margin-top: 5px; margin-left: 0; } } @media all and (max-width: 960px) { .btn-mobile-menu { display: block; } .qrCode[data-v] { Margin: 0 41%; } .panel-main { position: relative; display: table; } .panel-main_inner { display: table-cell; padding: 60px 10%; } .panel-cover_description { display: block; margin: 0 auto; max-width: 600px; } .panel-cover { width: 100%; height: 100%; background-position: center center; } .panel-cover.panel-cover--collapsed { position: relative; display: block; padding: 0; height: auto; background-position: center center; } .panel-cover.panel-cover--collapsed .panel-main_inner { display: block; padding: 70px 0 30px 0; } .panel-cover.panel-cover--collapsed .panel-cover_logo { width: 60px; border-width: 2px; } .panel-cover.panel-cover--collapsed .panel-cover_description { display: none; } .panel-cover.panel-cover--collapsed .panel-cover_divider { display: none; margin: 1em auto; } .navigation-wrapper { position: fixed; top: 0; right: 0; left: 0; display: none; padding: 20px 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.15); background: rgba(51, 51, 51, 0.98); } .navigation-wrapper.visible { display: block; } .cover-navigation { position: relative; float: left; clear: left; display: block; width: 100%; } .cover-navigation .navigation { display: block; width: 100%; } .cover-navigation .navigation li { margin-bottom: .4em; width: 80%; } .cover-navigation.navigation--social { padding-top: 5px; } .cover-navigation.navigation--social .navigation li { display: inline-block; width: 25.8%; } .navigation_item { margin: 0 0 .4em 0; width: 100%; } } @media all and (max-width: 767px) { .panel-cover_logo { width: 100px; } .Weibo_icon_position { top: -6px; right: 35px; } .qrCode[data-v] { Margin: 0 38%; } } @media all and (max-width: 480px) { .qrCode[data-v] { Margin: 0 30%; } } @media all and (max-width: 340px) { .panel-main_inner { padding: 0 5%; } .panel-title { margin-bottom: .1em; font-size: 1.5em; } .panel-subtitle { font-size: .9em; } .btn, .navigation_item a { margin-bottom: .4em; } }