/* ====================================================================== * Author: www.vokodesign.com ====================================================================== */ /* css reset */ * { margin:0; padding:0;} *, *:before, *:after {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;} p { line-height:1.8;} img {width:100%; max-width:100%; border:none; overflow:hidden;} li{ list-style-type: none;} a { color:#1e1e1e; text-decoration:none; transition:all 0.3s ease-out 0s; -webkit-tap-highlight-color:transparent;} a:link { color:#1e1e1e;} a:visited { color:#1e1e1e;} a:hover { text-decoration:none;} a:active { color:#1e1e1e;} .fl { float:left;} .fr { float:right;} .clearf { zoom:1;} .clearf:after { content:''; display:block; clear:both; height:0; overflow:hidden; visibility:hidden;} /*去掉手机按下时默认的灰色*/ button,input,textarea { border:none; outline:none; box-shadow:none!important; -webkit-appearance:none;/* 去除移动端上控件内阴影 */ resize:none;/* 禁止textarea拖拽放大 */ -webkit-tap-highlight-color:rgba(0,0,0,0);/* 取消input瞬间出现灰色背景 */} /*修改表单元素placeholder默认置灰文字颜色*/ .form-control::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder, input[type="url"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="password"]::-moz-placeholder {color:#8d8d8d;} h1, h2, h3, h4, h5, h6, .about_timeline .community-carousel .swiper-slide .author-wrap .role { text-rendering:optimizelegibility;} html.no-scroll {overflow-y:hidden;} body {-webkit-font-smoothing:antialiased; color:#333333; font-style:normal; background:#ffffff;} html {overflow:scroll; overflow-x:hidden; font-family:"Helvetica Neue",Helvetica,"PingFang SC","Microsoft Yahei","WenQuanYi Micro Hei",Arial,Verdana,sans-serif; -moz-osx-font-smoothing:grayscale; -moz-font-feature-settings:"liga","kern";} /***** 图标字体 *****/ @font-face {font-family: 'iconfont'; src: url('images/fonts/font_946305_loqu66sx20e/iconfont.eot'); src: url('images/fonts/font_946305_loqu66sx20e/iconfont.eot?#iefix') format('embedded-opentype'), url('images/fonts/font_946305_loqu66sx20e/iconfont.woff') format('woff'), url('images/fonts/font_946305_loqu66sx20e/iconfont.ttf') format('truetype'), url('images/fonts/font_946305_loqu66sx20e/iconfont.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont"; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } /***** 英文字体 *****/ @font-face { font-family: "MyriadPro-Black"; src: url("images/fonts/en/MyriadPro-Black/MyriadPro-Black.woff2") format("woff2"), url("images/fonts/en/MyriadPro-Black/MyriadPro-Black.woff") format("woff"), url("images/fonts/en/MyriadPro-Black/MyriadPro-Black.ttf") format("truetype"), url("images/fonts/en/MyriadPro-Black/MyriadPro-Black.eot") format("embedded-opentype"), url("images/fonts/en/MyriadPro-Black/MyriadPro-Black.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "MyriadPro-Bold"; src: url("images/fonts/en/MyriadPro-Bold/MyriadPro-Bold.woff2") format("woff2"), url("images/fonts/en/MyriadPro-Bold/MyriadPro-Bold.woff") format("woff"), url("images/fonts/en/MyriadPro-Bold/MyriadPro-Bold.ttf") format("truetype"), url("images/fonts/en/MyriadPro-Bold/MyriadPro-Bold.eot") format("embedded-opentype"), url("images/fonts/en/MyriadPro-Bold/MyriadPro-Bold.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "MyriadPro-BoldCond"; src: url("images/fonts/en/MyriadPro-BoldCond/MyriadPro-BoldCond.woff2") format("woff2"), url("images/fonts/en/MyriadPro-BoldCond/MyriadPro-BoldCond.woff") format("woff"), url("images/fonts/en/MyriadPro-BoldCond/MyriadPro-BoldCond.ttf") format("truetype"), url("images/fonts/en/MyriadPro-BoldCond/MyriadPro-BoldCond.eot") format("embedded-opentype"), url("images/fonts/en/MyriadPro-BoldCond/MyriadPro-BoldCond.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "MyriadPro-Cond"; src: url("images/fonts/en/MyriadPro-Cond/MyriadPro-Cond.woff2") format("woff2"), url("images/fonts/en/MyriadPro-Cond/MyriadPro-Cond.woff") format("woff"), url("images/fonts/en/MyriadPro-Cond/MyriadPro-Cond.ttf") format("truetype"), url("images/fonts/en/MyriadPro-Cond/MyriadPro-Cond.eot") format("embedded-opentype"), url("images/fonts/en/MyriadPro-Cond/MyriadPro-Cond.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "MyriadPro-Light"; src: url("images/fonts/en/MyriadPro-Light/MyriadPro-Light.woff2") format("woff2"), url("images/fonts/en/MyriadPro-Light/MyriadPro-Light.woff") format("woff"), url("images/fonts/en/MyriadPro-Light/MyriadPro-Light.ttf") format("truetype"), url("images/fonts/en/MyriadPro-Light/MyriadPro-Light.eot") format("embedded-opentype"), url("images/fonts/en/MyriadPro-Light/MyriadPro-Light.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "MyriadPro-Regular"; src: url("images/fonts/en/MyriadPro-Regular/MyriadPro-Regular.woff2") format("woff2"), url("images/fonts/en/MyriadPro-Regular/MyriadPro-Regular.woff") format("woff"), url("images/fonts/en/MyriadPro-Regular/MyriadPro-Regular.ttf") format("truetype"), url("images/fonts/en/MyriadPro-Regular/MyriadPro-Regular.eot") format("embedded-opentype"), url("images/fonts/en/MyriadPro-Regular/MyriadPro-Regular.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "MyriadPro-Semibold"; src: url("images/fonts/en/MyriadPro-Semibold/MyriadPro-Semibold.woff2") format("woff2"), url("images/fonts/en/MyriadPro-Semibold/MyriadPro-Semibold.woff") format("woff"), url("images/fonts/en/MyriadPro-Semibold/MyriadPro-Semibold.ttf") format("truetype"), url("images/fonts/en/MyriadPro-Semibold/MyriadPro-Semibold.eot") format("embedded-opentype"), url("images/fonts/en/MyriadPro-Semibold/MyriadPro-Semibold.svg") format("svg"); font-weight: normal; font-style: normal; } /****************************************/ /************** 公共 **************/ /***************************************/ /*分栏*/ .row {margin:0 auto; padding:0 30px; max-width:1240px; width:100%;} .row2 {max-width:100%; padding:0 5px;} .row_pr0 {padding-right:0;} .page-spiel {margin-bottom:40px; text-align:center;} /*白色文字*/ .text-white{ color:#fff;} .pad-top{ padding-top:60px; } /*模块标题(默认)*/ .title { margin-bottom:40px; position:relative;} .title h2 {font-size:22px;} .title a {position:absolute; right:20px; top:5px;} .title a:hover {opacity:0.5;} /*按钮：白色透明*/ a.btn-trans { display:inline-block; padding:15px 50px; position:relative; font-size:16px; color:#ffffff; border:1px solid #ffffff; overflow:hidden; transition:none;-moz-transition:none;/* Firefox 4 */ -webkit-transition:none;/* Safari 和 Chrome */ -o-transition:none;/* Opera */} a.btn-trans span {position:relative; z-index:1; padding-left:2px; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;/* Firefox 4 */ -webkit-transition:all 0.3s ease 0s;/* Safari 和 Chrome */ -o-transition:all 0.3s ease 0s;/* Opera */} a.btn-trans span em {font-style:normal; padding-left:5px;} a.btn-trans::before {display:block; content:""; position:absolute; top:0; right:0; bottom:0; left:0; transform:translate3d(0px, 100%, 0px); background:#ffffff; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;/* Firefox 4 */ -webkit-transition:all 0.3s ease 0s;/* Safari 和 Chrome */ -o-transition:all 0.3s ease 0s;/* Opera */ } a.btn-trans:hover {color:#111111;} a.btn-trans:hover::before {transform:translateZ(0px);} /*按钮：深色透明 继承自：btn-trans*/ a.btn-trans-black { color:#111111; border:1px solid #333333;} a.btn-trans-black span {} a.btn-trans-black::before {background:#333333;} a.btn-trans-black:hover {color:#ffffff;} a.btn-trans-black:hover::before {} /*按钮：品牌色、填充、有边框 继承自：btn-trans*/ a.btn-trans-brand { color:#ffffff; border:1px solid #009FAB; background:#009FAB;} a.btn-trans-brand span {} a.btn-trans-brand::before {background:#ffffff;} a.btn-trans-brand:hover {color:#009FAB;} a.btn-trans-brand:hover::before {} /*按钮：品牌色、填充、无边框 继承自：btn-trans*/ a.btn-trans-brand-noborder { color:#ffffff; border:none; background:#009FAB;} a.btn-trans-brand-noborder span {} a.btn-trans-brand-noborder::before {background:#ffffff;} a.btn-trans-brand-noborder:hover {color:#009FAB;} a.btn-trans-brand-noborder:hover::before {} /*视频播放*/ .play { display:inline-block; width:60px; height:60px; line-height:60px; font-size:22px; text-align:center; text-indent:5px; color:#ffffff; border:1px solid rgba(255,255,255,1); border-radius:100%; transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s;/* Firefox 4 */ -webkit-transition:all 0.3s ease-out 0s;/* Safari 和 Chrome */ -o-transition:all 0.3s ease-out 0s;/* Opera */} /*搜索框*/ .search {} .search form {} .search input {} .search .text { float:left; padding:16px; width:300px; font-size:14px; background:#f2f2f2;} .search .btn {float:right; padding:16px; width:60px; text-indent:-999999px; background:#f2f2f2 url("images/search.svg") no-repeat scroll center center / 30% auto;} /*** 元素 ***/ .btn{ background-color:#222; color:#fff; padding:8px 28px; display:inline-block; font-size:16px; cursor:pointer;} .page-spiel{ text-align:center; margin-bottom:66px;} .page-spiel p{ margin-bottom:0px; font-size:20px;} i { position:relative; top:4px;/*position、top为解决图标偏高*/ display:inline-block; color:rgba(255,255,255,0); font-size:24px; text-indent:-20px; line-height:1; transition:all 0.3s ease-out 0s;} /* 分栏 */ .inner_section {margin:auto;} .large-6 {position:relative; width:50%;} .small-12 {position:relative; width:100%;} .column , .columns { position:relative; padding-left:20px; padding-right:20px; float:left; width:100%;} .pad-normal{ padding:40px 0;} .pad-large{ padding-top:100px; padding-bottom:100px;} .mag-normal {margin:40px auto;} .left {float:left!important;} .row:before, .row:after {content:" "; display:table;} .row:after {clear:both;} .large-centered { float:none; margin:auto;} .whalf { width:50%;} /* 按钮 */ .btn-area { margin-top:40px; text-align:center;} a.btn { display:inline-block; position:relative; font-size:16px; padding:15px 50px; text-align:center; color:rgba(255,255,255,1); border:1px solid rgba(0,0,0,1); background:rgba(0,0,0,1); text-transform:uppercase;} a.btn_border {border:1px solid rgba(0, 0, 0, 1); background:none;} a.btn_no_border {border:none; border-bottom:1px solid rgba(0, 0, 0, 1); color:#ffffff; border-color:#ffffff; background:none;} a.btn_view_more {color:#1e1e1e; border-color:#ffffff;} a.btn-black { color:rgba(0,0,0,1); background:rgba(255,255,255,1);} /* 下拉框 */ select { cursor:pointer; width:100%; font-size:16px; border-radius:0; outline:none!important; padding:14px; /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: 1px solid rgba(0, 0, 0, 0.1); /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; background:url("images/select_arrow_icon.svg") no-repeat right center; background-size:30px auto; } /*清除ie的默认选择框样式清除，隐藏下拉箭头*/ select::-ms-expand { display:none; } select option {} /* 按钮:查看更多 */ a.more {display:inline-block; width:140px; height:50px; line-height:50px; font-style:14px; text-align:center; border:1px solid rgba(0,0,0,0.1); background:#ffffff;} a.more i { position:relative; top:3px;/*position、top为解决图标偏高*/ display:inline-block; color:rgba(255,255,255,0); font-size:20px; text-indent:-20px; line-height:1; /* Better Font Rendering =========== */-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:all 0.3s ease-out 0s;} a.more i::before {content:"\e900";} a.more:hover { color:#ffffff; border-color:#009FAB; background:#009FAB;} a.more:hover i {text-indent:2px; color:rgba(255,255,255,1);} .arrow {text-indent:-4px; color:rgba(0,0,0,0.2); top:3px;} /**/ a.more_transparent {border:1px solid rgba(255,255,255,0.2); color:#ffffff; background:none;} a.more_transparent:hover { text-indent:10px; border:1px solid rgba(0,0,0,1); background:rgba(0,0,0,1);} a.more_transparent:hover i {text-indent:0px;} /* Swiper2.0 sc-box */ .sc-box {position:relative;} .sc-box .arrow-left {background:red; position:absolute; left:10px; top:50%; margin-top:-15px; width:17px; height:30px; z-index:2;} .sc-box .arrow-right {background:red; position:absolute; right:10px; top:50%; margin-top:-15px; width:17px; height:30px; z-index:2;} /* Swiper2.0 pagination */ .pagination {position:absolute; z-index:20; bottom:10px; width:100%; text-align:center;} .swiper-pagination-switch {display:inline-block; width:8px; height:8px; border-radius:8px; background:#555; margin:0 5px; opacity:0.2; border:1px solid #fff; cursor:pointer;} .swiper-active-switch {opacity:0.5;} /* 返回顶部 */ a.rTop {display:none; width:40px; height:40px; line-height:40px; font-size:28px; color:#ffffff; text-align:center; border-radius:1px; position:fixed; z-index:1; right:20px; bottom:20px; background:rgba(0,0,0,0.5);} a.rTop:hover {background:rgba(0,0,0,1);} /* 分页 */ #pages { margin:60px 0; text-align:center;} #pages a , #pages span {display:inline-block; padding:12px 18px; margin:0 5px; border:1px solid rgba(0,0,0,0.05);} #pages span {background:#2C448C; color:#ffffff;} #pages a:hover {border:1px solid rgba(0,0,0,0.2);} /****************************************/ /************** 首页 **************/ /****************************************/ /* 导航 */ .navigation{ position:fixed; left:0; top:0; z-index:8; width:100%; background:#ffffff; transition:all 0.2s ease-out 0s;} .navigation .row {} .navigation .inner_navigation {position:relative;} .navigation .logo{float:left; display:block; width:121px; height:50px; margin-top:20px; background-image:url('images/logo.svg'); background-repeat:no-repeat; background-size:100% auto; background-position:center right; transition:margin 0.3s ease-out 0s;/* LOGO beta尺寸有变化，防止抖动 */} .navigation .logo_en {background-image:url('images/logo_en.svg');} .navigation .logo img {display:block; width:100%;} .menu{ list-style:none; text-align:right; float:right;} .menu li{ float:left; margin-right:0px; position:relative;} .menu li a{ position:relative; padding:0 30px; font-size:18px; text-align:center; font-weight:500; height:90px; line-height:90px; text-transform:uppercase; font-style:normal; text-rendering:optimizeLegibility; display:block; } .menu li a:hover {opacity:0.5;} .menu li:nth-child(4) a::after{display:none;} .menu li i{position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:14px; background:#000000; opacity:0.05;} .menu li i.arrow {/*display:inline-block;*/ display:none; position:relative; top:1px; margin-right:-16px; margin-left:3px; width:auto; height:auto; text-indent:0; opacity:1; color:rgba(0,0,0,0.3); font-size:18px; line-height:1; background:none; transition:all 0.3s ease-out 0s;} .menu li.language {margin-left:120px;} .menu li.language a { float:left; padding:0 10px; font-size:14px; opacity:0.5;} .menu li.language a.on { opacity:1;} /* 默认二级菜单：白色 */ .menu li .nav_submenu { visibility:hidden; opacity:0; position:absolute; z-index:9; left:0; top:90px; width:100%; background:#ffffff; box-shadow:0 0 50px rgba(0, 0, 0, 0.2); -webkit-transition:all 0.3s; transition:all 0.3s; -moz-transition:all 0.3s;} .menu li .nav_submenu li {float:none; width:auto; transition:all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s;/* Firefox 4 */ -webkit-transition:all 0.3s ease-out 0s;/* Safari 和 Chrome */ -o-transition:all 0.3s ease-out 0s;/* Opera */} .menu li .nav_submenu li a { opacity:0.8; padding:0; height:50px; line-height:50px; font-size:17px; border-bottom:1px solid rgba(0,0,0,0.05);} .menu li .nav_submenu li:last-child a {border:none;} .menu li a.smooth-scroll {cursor:default;} .menu li .nav_submenu li:hover a { opacity:1;} .menu li .nav_submenu:after {position:absolute; top:-20px; left:50%; width:0; height:0; margin-left:-10px; content:''; border:solid transparent; border-width:10px; border-color:rgba(255, 255, 255, 0); border-bottom-color:rgba(255, 255, 255, 1);} /* 导航切换样式:全局; */ .sticky-nav {box-shadow:0 10px 20px rgba(0, 0, 0, 0.05); border:none; background:#FFFFFF;} .sticky-nav .logo {margin-top:10px;} .sticky-nav li a {height:70px; line-height:70px; color:rgba(0,0,0,1);} .sticky-nav li:last-child a {border:none;} .sticky-nav li a i {background:#000000; opacity:0.1;} .sticky-nav li a i.arrow { opacity:1; color:rgba(0,0,0,0.3); background:none;} .sticky-nav .menu li .nav_submenu { top:69px; background:#ffffff; box-shadow:0 0 50px rgba(0,0,0,0.2);} .sticky-nav .menu li .nav_submenu:after {position:absolute; top:-20px; left:50%; width:0; height:0; margin-left:-10px; content:''; border:solid transparent; border-width:10px; border-color:rgba(255, 255, 255, 0); border-bottom-color:rgba(255, 255, 255, 1);} .sticky-nav .menu li .nav_submenu li a {height:50px; line-height:50px; border-bottom:1px solid rgba(0,0,0,0.05);} .sticky-nav .menu li .nav_submenu li a:hover {/*color:#009FAB!important;*/} /**/ /* #home .navigation {background:none;} #home .sticky-nav {background:#ffffff;} */ /* 全屏Banner */ #home .swiper-container {} #home .swiper-slide {cursor:move; cursor:grab; background:#F2F2F2;} #home .swiper-wrapper {} #home .swiper-slide .text {width:100%; position:relative;} #home .cell-1 {background:url("images/banner-bg-1.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} #home .cell-1 .img {background:url("../images/banner-img-1.png") no-repeat scroll center center / 100% auto; background-size:contain;} #home .cell-2 {background:#f8f8f8 url("images/banner-bg-22.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} #home .cell-2 .img {background:url("../images/banner-img-2.png") no-repeat scroll center center / 100% auto; background-size:contain;} /*默认：偏移*/ #home .swiper-slide .it {position:absolute; z-index:2; left:0; top:50%;} #home .swiper-slide .it h1 { font-size:64px; margin-left:40px;/*偏移量*/ opacity:0;} #home .swiper-slide .it h3 { font-size:22px; font-weight:200; margin-left:40px;/*偏移量*/ opacity:0;} #home .swiper-slide .it p {margin:40px 0 0 0; font-size:28px; font-weight:500; line-height:1; margin-left:40px;/*偏移量*/ opacity:0;} #home .swiper-slide .ma {position:absolute; left:0; top:0; z-index:9; width:100%; height:100%;} #home .swiper-slide .btn-area {} #home .swiper-slide .btn-area a { background:url("images/transition_btn_bg.png"); background-repeat:repeat-x; opacity:0.8; transition:all 0.3s ease-out 0s;} #home .swiper-slide .btn-area a:hover { color:#ffffff; opacity:1;} #home .swiper-slide .btn-area a:hover::before {display:none;} #home .swiper-slide .img { position:absolute; right:0; top:0; width:75%; text-align:right; margin-right:-40px;/*偏移量*/ opacity:0;} #home .swiper-slide .img img {display:inline-block; width:auto; height:610px;} #home .swiper-slide .mask {width:auto; height:100%; position:absolute; z-index:1; left:0; top:0; background:#000000; opacity:0;} /* 当前幻灯片设置动画 */ #home .swiper-slide-active .it h1 { opacity:1; margin-left:0;/*默认文字区域偏移量，实现文字动画效果*/ -webkit-transition-delay:0.5s;transition-delay:0.5s;-webkit-transition-duration:0.5s; transition-duration:0.5s;/* Safari 5.1 - 6.0 */} #home .swiper-slide-active .it h3 { opacity:1; margin-left:0;/*默认文字区域偏移量，实现文字动画效果*/ -webkit-transition-delay:0.5s;transition-delay:0.5s;-webkit-transition-duration:0.5s; transition-duration:0.5s;/* Safari 5.1 - 6.0 */} #home .swiper-slide-active .it p {opacity:1; margin-left:0;/*默认文字区域偏移量，实现文字动画效果*/ -webkit-transition-delay:0.6s;transition-delay:0.6s;-webkit-transition-duration:0.5s; transition-duration:0.5s;/* Safari 5.1 - 6.0 */} #home .swiper-slide-active .img {opacity:1; margin-right:0;/*默认文字区域偏移量，实现文字动画效果*/ -webkit-transition-delay:1s;transition-delay:1s;-webkit-transition-duration:0.5s; transition-duration:0.5s;/* Safari 5.1 - 6.0 */} /**/ .opper {} .inner-opper {} .swiper-button-next, .swiper-button-prev {width:50px; height:80px; margin-top:5px;} .swiper-button-next:hover, .swiper-button-prev:hover { opacity:1; background-color:#ffffff; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s;/* Firefox 4 */ -webkit-transition:all 0.3s ease 0s;/* Safari 和 Chrome */ -o-transition:all 0.3s ease 0s;/* Opera */} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:20px; background-image:url("images/prev.svg"); background-size:12px auto; background-repeat:no-repeat; background-position:center;} .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right:20px; background-image:url("images/next.svg"); background-size:12px auto; background-repeat:no-repeat; background-position:center;} /**/ .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom:20px;} .swiper-pagination-bullet {background:#000000; opacity:0.1;} .swiper-pagination-bullet-active { opacity:0.5;} /**/ #loading {position:absolute; left:50%; top:50%; z-index:2; width:60px; height:60px; margin-left:-20px; margin-top:-20px; padding:15px; background:#333333;} #loading img {display:block; width:100%; -webkit-animation:move 1s linear infinite;} @-webkit-keyframes move{ 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);} } /* 首页：产品类型 */ .p-type {border-bottom:1px solid #f2f2f2;} .p-type ul {} .p-type ul li {float:left; width:33.333333%; border-right:1px solid #f2f2f2;} .p-type ul li:nth-child(3) {border:none;} .p-type ul li a { display:block; padding:60px 0; background:#ffffff;} .p-type ul li a .a-inner {transition: all 0.3s ease-out 0s; -moz-transition:all 0.3s ease-out 0s; /* Firefox 4 */ -webkit-transition:all 0.3s ease-out 0s; /* Safari 和 Chrome */ -o-transition:all 0.3s ease-out 0s; /* Opera */} .p-type ul li a img {display:block; margin:auto;} .p-type ul li a h4 {text-align:center; padding:20px 0; font-size:22px;} /**/ .p-type ul li a:hover .a-inner { z-index:2; -webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0); -webkit-transition-delay:0.05s;transition-delay:0.05s;-webkit-transition-duration:0.35s;transition-duration:0.35s;} /* 焦点 */ .p-story {padding:80px 0;} .p-story .row {padding-right:0;} .p-story h2 {font-size:44px;} .p-story .title a {top:30px;} .p-story ul {} .p-story ul li { float:left; width:33.333333%;} .p-story ul li a {display:block; margin-right:30px;} .p-story ul li a .inner {overflow:hidden;} .p-story ul li a img {display:block; width:100%; transition:all 0.3s ease-out 0s;} .p-story ul li a .text { padding:30px 40px 0 0;} .p-story ul li a .text span {font-size:14px;} .p-story ul li a .text h4 {font-size:18px; margin-top:10px;} /*hover*/ .p-story ul li a:hover {} .p-story ul li a:hover img {transform:scale(1.1,1.1);} /* 版权 */ .copyright { border-top:1px solid #f2f2f2; background:#ffffff;} .copyright .inner-copyright {padding:100px 0 30px;} /**/ .copyright .fl {width:65%;} .copyright .fl p { font-size:14px; opacity:0.7; filter:Alpha(opacity=70);/*IE8*/} .copyright .fl .fl {width:65%;} .copyright .fl .fr {width:20%;} .copyright .fl .fr h4 {font-size:14px; margin-bottom:20px;} .copyright .fl .fr ul {} .copyright .fl .fr ul li {margin:0 0 10px 0;} .copyright .fl .fr ul li a {font-size:14px; opacity:0.7; filter:Alpha(opacity=70);/*IE8*/} .copyright .fl .fr ul li a:hover {opacity:0.4; filter:Alpha(opacity=40);/*IE8*/} /**/ .copyright .fr {width:35%;} .copyright .fr .fl {width:45%;} .copyright .fr .fl .cate {} .copyright .fr .fl .cate h4 {} .copyright .fr .fl ul {margin-top:-4px; overflow:hidden;} .copyright .fr .fl ul li {float:left; width:75%; padding-right:50px; text-align:center;} .copyright .fr .fl ul li p { margin-top:3px; line-height:1; opacity:0.5; filter:Alpha(opacity=50);/*IE8*/} .copyright .fr .fl ul li a {} .copyright .fr .fl ul li a:hover {opacity:0.5; filter:Alpha(opacity=50);/*IE8*/} .copyright .fr .fr {width:55%;} .copyright .fr .fr h4 { font-size:12px; font-weight:normal; opacity:0.7; filter:Alpha(opacity=70);/*IE8*/} .copyright .fr .fr p {margin:4px 0 0 0; line-height:1; overflow-wrap:break-word;} .copyright .fr .fr p.phone-number {margin-bottom:20px; font-size:18px; font-weight:500; font-family:MyriadPro-bold;} .copyright .fr .fr p.email {font-family:MyriadPro-bold;} .copyright .fr .fr p a {font-size:18px; font-weight:500;} .copyright .fr .fr p a:hover {text-decoration:underline;} .copyright .fr .fr ul {margin-top:18px;} .copyright .fr .fr ul li { width:30%; text-align:center;} .copyright .fr .fr ul li img {display:block; width:100%; overflow:hidden;} .copyright .fr .fr ul li p { margin-top:4px; font-size:12px; opacity:0.3; text-align:center;} .copyright .beian {margin-top:30px; padding:30px 0 0; border-top:1px solid #f5f5f5;} .copyright .beian p { font-size:12px; opacity:0.5; filter:Alpha(opacity=50);/*IE8*/} .copyright .beian p span {opacity:0.4;filter:Alpha(opacity=40);/*IE8*/} .copyright .beian a { padding:0 2px 0 2px; text-decoration:underline;} .copyright .beian em { font-style:normal; opacity:0.2;} .copyright .beian a:hover {opacity:0.5;} /**/ #home .menu li:nth-child(1) a , #about .menu li:nth-child(2) a , #product .menu li:nth-child(3) a , #news .menu li:nth-child(4) a , #support .menu li:nth-child(5) a {opacity:1;} /****************************************/ /************** 内页 **************/ /****************************************/ /* 侧栏 */ .temp_main .sidebar {width:20%;} .temp_main .sidebar ul {} .temp_main .sidebar ul li {} .temp_main .sidebar ul li a {display:block; padding-left:40px; height:60px; line-height:60px; font-size:16px; border-bottom:1px solid #f2f2f2;} .temp_main .sidebar ul li.current a { color:#ffffff; color:#2C448C;} /* 内页公共：栏目banner */ .temp_banner {position:relative;} .temp_banner:before { position:absolute; left:0; top:0; content:""; width:100%; height:100%; background:#000000; opacity:0;} .temp_banner .inner_section {} .temp_banner .page-title {padding:400px 0 80px; position:relative;} .temp_banner .page-title .t { display:none; margin:0 0 40px 5px; width:60px; height:10px; background:#E50113;} .temp_banner .page-title h3 {font-size:56px;} .temp_banner .page-title .v { display:none; width:1px; height:150px; margin:5px 0 0 35px; background:#000000;} /* 锚点组 */ .anchor-list { width:100%; text-align:center; background:#ffffff;} .anchor-list .row {} .anchor-list .swiper-slide {width:auto!important;} .anchor-list .al { font-size:0;/*解决a标签换行后产生空白问题*/} .anchor-list a {display:inline-block; margin:20px 20px 20px 0; padding:0 30px; width:auto; height:44px; line-height:44px; font-size:16px; background:#f8f8f8; overflow:hidden;} .anchor-list a:hover { color:#ffffff; background:#2C448C;} .anchor-list a.on {color:#ffffff; background:#2C448C;} a.anchor {display:block; height:0; position:relative; top:-70px;/*负值：导航高度*/ overflow:hidden;} /***** 关于我们 *****/ #about {} #about .temp_banner {background:url("images/temp-banner-1.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} #about .temp_banner .page-title h3 {} .about-group {} #anchor-list-about{ display:none; position:fixed; left:0; top:0; z-index:9; background:#f8f8f8;} #anchor-list-about.target-fix {display:block;} /**/ #about .ag-1 {padding:150px 0 0;} #about .ag-1 .text {} #about .ag-1 .text .about-img {float:left; width:40%; display:none;} #about .ag-1 .text p {float:none; padding:0 10%; font-size:28px; text-align:center;} #about .ag-1 .img { margin-top:150px; padding:150px 0; text-align:center; border-top:1px solid #333333;} #about .ag-1 .img h2 { margin-bottom:80px; font-size:64px;} #about .ag-1 .img ul {} #about .ag-1 .img ul li {float:left; width:33.333333%;} #about .ag-1 .img ul li .inner {} #about .ag-1 .img ul li img {display:block; margin:auto; width:150px;} #about .ag-1 .img ul li h3 {margin-top:20px; font-size:22px;} /**/ #about .ag-2 {padding:100px 0; text-align:center; background:#f2f3f5;} #about .ag-2 h2 {font-size:120px;} #about .ag-2 h3 {font-size:64px; margin-bottom:80px;} #about .ag-2 .line {display:none; margin:40px auto; height:40px; width:62%; position:relative; border-bottom:1px solid #ffffff;} #about .ag-2 .line .vline {width:1px; height:40px; position:absolute; left:50%; bottom:0; background:#ffffff;} #about .ag-2 .text {display:none; margin:0 auto 100px; width:75%; overflow:hidden;} #about .ag-2 .text h2 {font-size:72px; line-height:1.2;} #about .ag-2 .text h2 span {font-size:24px; padding:0 10px;} #about .ag-2 .text p {font-size:24px;} #about .ag-2 .l {float:left; width:50%;} #about .ag-2 .r {float:left; width:50%;} #about .ag-2 .desc {width:60%; margin:40px auto 0; font-size:28px;} /**/ #about .ag-3 {padding:100px 0;} #about .ag-3 .inner-ag-3 {max-width:1240px; margin:auto;} #about .ag-3 .timeline {float:left; width:45%;} #about .ag-3 .timeline h4 {font-size:22px; margin-bottom:20px; font-weight:bold;} #about .ag-3 .timeline ul { padding-bottom:40px; border-left:1px solid rgba(0,0,0,0.1);} #about .ag-3 .timeline ul li {float:left; width:100%; margin:60px 0 0;} #about .ag-3 .timeline ul li .fl { float:left; width:8%; height:40px; background:url("images/timeline-dot.svg") no-repeat scroll left center / 100% auto;} #about .ag-3 .timeline ul li .fl img {} #about .ag-3 .timeline ul li .fr {float:left; margin-top:5px; width:90%;} #about .ag-3 .timeline ul li .fr .inner {padding-left:20px;} #about .ag-3 .timeline ul li .fr h3 {font-size:28px; line-height:1; margin-bottom:10px;} #about .ag-3 .timeline ul li .fr p {font-size:16px;} #about .ag-3 .honor {float:right; width:50%;} #about .ag-3 .honor h4 { margin:0 5px 15px 10px;} #about .ag-3 .honor h4 span {font-size:22px;} #about .ag-3 .honor h4 a { float:right; font-size:16px; font-weight:normal;} #about .ag-3 .honor h4 a:hover {opacity:0.5;} #about .ag-3 .honor ul {margin-bottom:40px;} #about .ag-3 .honor ul li {float:left; width:50%;} #about .ag-3 .honor ul li .inner {margin:5px; padding:10px; border:1px solid #f2f2f2;} #about .ag-3 .honor ul li img {display:block;} /***** 新闻中心 *****/ #news .temp_banner {background:url("images/temp-banner-3.jpg") no-repeat scroll center top / cover;} #news .temp_main {padding-top:80px;} .news_list { width:80%; border-right:1px solid #f2f2f2;} .news_list ul {padding-right:40px;} .news_list ul li {margin:0 0 40px 0;} .news_list ul li a {display:block; overflow:hidden;} .news_list ul li a .fl {width:40%; overflow:hidden;} .news_list ul li a .fl img { display:block; transition:all 0.3s ease-out 0s;} .news_list ul li a .fr {width:60%; overflow:hidden;} .news_list ul li a .fr .text {margin-left:30px;} .news_list ul li a .fr h2 {font-size:22px; margin-bottom:10px;} .news_list ul li a .fr span { display:none; font-size:14px; color:#cccccc;} .news_list ul li a .fr .move_line { width:100%; height:1px; position:relative; margin:12px 0 12px;} .news_list ul li a .fr .move_line .ml_d { position:absolute; left:0; top:0; width:100%; height:1px; background:#000000; opacity:0.05;}/*默认线条*/ .news_list ul li a .fr .move_line .ml_c { position:absolute; left:0; top:0; width:0; height:1px; background:#000000; opacity:0.3; transition:all 0.3s ease-out 0s;}/*移动线条*/ .news_list ul li a .fr p { margin-top:20px; height:80px; font-size:16px; color:#4d4d4d;} /*详情*/ .sel-news-detail {} .sel-news-detail .navigation {border-bottom:1px solid #f2f2f2;} .news-detail { margin:auto; padding:100px 0 100px; width:80%; font-size:18px; line-height:2;} .news-detail .title {margin-bottom:60px;} .news-detail .title h1 {text-align:center; font-size:36px;} .news-detail .title p { display:none; margin:0; text-align:center; font-size:14px; color:#b2b2b2;} .news-detail p {margin-bottom:20px; font-size:18px;} .news-detail img {margin:auto; display:block; width:auto!important; height:auto!important;} /***** 产品中心 *****/ #product {background:#f8f8f8;} #product .sticky-nav {} #product .page-title {} #product .temp_banner { background:#f2f2f2 url("images/temp-banner-2.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} #product .temp_main {} #anchor-list-cate{ display:none; position:fixed; left:0; top:0; z-index:9;} #anchor-list-cate.target-fix {display:block;} a.anchor {display:block; height:0; position:relative; top:-70px;/*负值：导航高度*/ overflow:hidden;} /* 临床图共用模块 */ #product-detail .swiper-container {padding:70px 0;} #product-detail .img-box {padding:40px; text-align:center; border:1px solid rgba(255,255,255,0.125);} #product-detail .img-box h4 {margin-top:20px; font-size:16px; color:#FFFFFF;} #product-detail .img-box p { margin:20px auto 0; font-size:14px; color:#ffffff;} /**/ .p-group {padding:30px 0;} .p-group h2 {margin-bottom:30px; font-size:22px;} .p-group ul {} .p-group ul li {float:left; width:25%;} .p-group ul li a {margin:0 20px 20px 0; display:block; /*position:relative; 此处不能设置定位，会造成图片异步加载失效!!*/ background:#ffffff;} .p-group ul li a .tag {display:block; color:#ffffff; font-size:14px; padding:2px 8px; background:#F6AB00; position:absolute; right:10px; top:10px;} .p-group ul li a .cover {margin:auto;} .p-group ul li a .cover img {display:block; width:100%; margin:auto; height:auto;} .p-group ul li a .desc {padding:0 0 30px; text-align:center;} .p-group ul li a .desc h4 {font-size:18px;} .p-group ul li a .desc p {font-size:14px; color:#8d8d8d; word-break:keep-all;/*不换行*/ white-space:nowrap;/*不换行*/ overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/ text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/} .p-group ul li a:hover { z-index:2; box-shadow:0 20px 20px rgba(0,0,0,0.02); -webkit-transform:translate3d(0,-2px,0);transform:translate3d(0,-2px,0); -webkit-transition-delay:0.05s;transition-delay:0.05s;-webkit-transition-duration:0.35s;transition-duration:0.35s;} /**/ .p-g-long {} .p-g-long ul li {width:100%;} .p-g-long ul li a {padding:0;} .p-g-long ul li a img {display:block;} /**/ #product .copyright {padding:0;} /***** 产品详情 *****/ #product-detail .navigation {border-bottom:1px solid #F2F2F2;} .p-detail {} /**/ .p-detail .topic {padding:150px 0 40px;} .p-detail .topic .shead { margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid #333333;} .p-detail .topic .shead h1 { font-size:72px; line-height:1;} .p-detail .topic .shead .info {overflow:hidden;} .p-detail .topic .shead p { float:left; font-size:22px;} .p-detail .topic .shead a { display:none; float:right; font-size:16px; margin-top:10px;} .p-detail .topic .img {width:80%; margin:auto;} .p-detail .topic .img img {display:block;} /* 公共 */ .p-detail .box {} /**/ .p-detail .box .text {margin-bottom:40px;} .p-detail .box .text h2 {font-size:32px;} .p-detail .box .text p {font-size:22px; margin-top:10px;} .p-detail .box img {width:auto!important; height:auto!important;} /**/ .p-detail .box .col-list { margin-top:40px;} .p-detail .box .col-list ul {overflow:hidden;} .p-detail .box .col-list ul li {float:left; width:50%; padding:20px 20px 20px 0;} .p-detail .box .col-list ul li h3 {font-size:22px;} .p-detail .box .col-list ul li p {font-size:18px;} .p-detail .box .col-list ul li:nth-child(3), .p-detail .box .col-list ul li:nth-child(4) {border-bottom:none;} .p-detail .box .col-list ul li:nth-child(2), .p-detail .box .col-list ul li:nth-child(4) { padding-left:40px; border-right:none;} /**/ .p-detail .box .f-list { margin:auto;} .p-detail .box .f-list ul {} .p-detail .box .f-list ul li {padding:10px 0 0 20px; position:relative; font-size:18px;} .p-detail .box .f-list ul li::before {content:""; position:absolute; left:0; top:19px; width:6px; height:6px; border-radius:100%; background:#333333;} /**/ .p-detail .box .lr-list {} .p-detail .box .lr-list ul {overflow:hidden;} .p-detail .box .lr-list ul li {overflow:hidden; float:left; width:50%; padding:0 30px 40px 0;} .p-detail .box .lr-list ul li img { display:block;} .p-detail .box .lr-list ul li p { margin-top:20px; font-size:18px;} /* box-1 */ .p-detail .box-1 {padding:80px 0; background:#f8f8f8;} .p-detail .box-1 .img { margin:auto;} .p-detail .box-1 .img img {display:block;} /* box-2 */ .p-detail .box-2 {padding:80px 0; border-bottom:1px solid #f2f2f2;} .p-detail .box-2 .img {} .p-detail .box-2 .img img {display:block;} .p-detail .box-2 .f-list {margin-top:40px;} /* box-3 */ .p-detail .box-3 {padding:80px 0;} .p-detail .box-3 .row {padding-right:0;} .p-detail .box-3 .f-list {margin-top:30px;} /* box-4 */ .p-detail .box-4 {padding:80px 0; background:#f8f8f8;} .p-detail .box-4 .text {float:left; width:50%;} .p-detail .box-4 .f-list {margin-top:30px;} .p-detail .box-4 .img {float:left; width:50%;} /* box-5 */ .p-detail .box-5 {padding:80px 0;} .p-detail .box-5 .row {padding-right:0;} .p-detail .box-5 .f-list {margin-top:30px;} /***** 服务与支持 *****/ #support {} #support .temp_banner {background:#f2f2f2 url("images/temp-banner-4.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .support-box {} /**/ .sb-1 {} .sb-1 .text {padding:150px 0; text-align:center; background:url("../images/map2.png") no-repeat scroll right center / 50% auto;} .sb-1 .text p {font-size:28px;} /**/ .sb-2 { padding:0 0 150px;} .sb-2 .title {padding:100px 0 200px; background:#000000 url("images/temp-banner-4-mid.jpg") no-repeat scroll center center / 100% auto; background-size:cover;} .sb-2 .title h2 { font-size:44px; text-align:center; color:#ffffff;} .sb-2 ul { position:relative; margin-top:-150px; padding:40px 0; background:#ffffff; box-shadow:0 20px 40px rgba(0,0,0,0.05);} .sb-2 ul li {float:left; width:50%; margin:10px 0; padding:0 50px; overflow:hidden;} .sb-2 ul li a {float:left; width:80%; font-size:16px; word-break:keep-all;/*不换行*/ white-space:nowrap;/*不换行*/ overflow:hidden;/*内容超出宽度时隐藏超出部分的内容*/ text-overflow:ellipsis;/*当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/} .sb-2 ul li span { float:right; width:20%; font-size:14px; color:#b2b2b2; margin-top:3px; text-align:right;} /**/ .sb-3 {padding:0 0 150px; position:relative;} .sb-3::after { display:none; position:absolute; z-index:-1; left:0; top:0; content:""; width:100%; height:400px; background:url("images/bg-dots.svg") no-repeat scroll right 100px / 400px auto;} .sb-3 .inner { position:relative; max-width:1600px; margin:auto; /*background:url("images/bg-co.png") no-repeat scroll 40px 10px / 300px auto;*/} .sb-3 h2 {position:relative; text-align:center; font-size:44px; margin-bottom:40px;} .sb-3 h2::before { display:none; content:""; position:absolute; right:17%; bottom:60px; width:1px; height:152px; background:#333333;} .sb-3 .text {} .sb-3 .text .text-box {float:left; width:50%; padding:0 150px;} .sb-3 .text .text-box:nth-child(1) {border-right:1px solid #f2f2f2;} .sb-3 .text .t {} .sb-3 .text .hide {display:none;} .sb-3 .text h4 {font-size:22px; margin-bottom:10px;} .sb-3 .text .t {font-size:18px; margin-bottom:30px; width:100%; line-height:1.4;} .sb-3 .text .b {} .sb-3 .tabN {display:none; margin-top:80px;} .sb-3 .tabN ul {text-align:center;} .sb-3 .tabN ul li {display:inline-block;} .sb-3 .tabN a { display:inline-block; margin:0 20px; font-size:72px; width:72px; height:72px; line-height:70px; color:#333333; opacity:0.3;} .sb-3 .tabN a.selected { opacity:1;} .sb-3 .map {display:none; margin-top:20px;} .sb-3 .map img {display:block;} /**/ .sb-3 .tabN a:hover {opacity:1;} .sb-3 .tabN a.selected:hover {opacity:1;} /**/ .sb-4 { padding:0 0 200px;} .sb-4 .title {text-align:center;} .sb-4 .title p {font-size:22px;} .sb-4 .form {width:400px; margin:auto;} .sb-4 .form ul {} .sb-4 .form ul li {margin:40px 0;} .sb-4 .form ul li p {font-size:18px;} .sb-4 .form ul li p span { padding-left:5px; color:#FF0000;} .sb-4 .form ul li input { padding:10px 0; width:100%; font-size:18px; font-weight:bold; border-radius:0; border-bottom:1px solid #ccc; transition:all 0.3s ease-out 0s;} .sb-4 .form ul li input:focus {border-bottom:1px solid #333;} .sb-4 .form .conform {display:inline-block; padding:10px 60px; border:1px solid #333333; font-size:18px; font-weight:bold;} .sb-4 .form .conform:hover {border:1px solid #333333; color:#ffffff; background:#333333;} /***** 公司荣誉 *****/ #honor {} #honor .navigation {border-bottom:1px solid rgba(0,0,0,0.05);} #honor .honor-box {padding:150px 0 100px;} #honor .honor-box .row {padding:0 0 0 30px;} #honor .honor-box h4 {font-size:22px; margin-bottom:40px;} #honor .honor-box ul {} #honor .honor-box ul li {float:left; width:33.333333%;} #honor .honor-box ul li .inner {margin:0 20px 20px 0; padding:10px; border:1px solid #f2f2f2;} #honor .honor-box ul li img {display:block;}