@media only screen and (min-width:1920px) { .top-banner-container img { margin-left:calc(50% - 960px); } } .top-banner-container { position: relative; overflow: hidden; height: 300px; width: 100%; max-width:1920px; margin:0 auto; } .top-banner-container img { max-width: 1920px; } .top-banner-shade { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0; z-index: 2; } .top-banner-text { width: 100%; vertical-align: middle; display: table-cell; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; z-index: 3; color: #fff; } .top-banner-text-left { max-width: 1024px; text-align: left; position: absolute; top: 50%; transform: translateX(-36%) translateY(-50%); left: 36%; } .top-banner-text .h-style-1 { font-size: 42px; margin: 0; padding: 20px; margin-bottom: 10px; line-height: 1.4em; } .top-banner-text p { font-size: 20px; color:#ffffff; } .text-white { color: #fff; } #ge-tophead { display: block; height: auto; width: 100%; padding: 0; box-sizing: border-box; background-color: #ffffff; /*border-bottom:.1rem solid #e3e3e3;*/ top: 0; left: 0; z-index: 10000; } .warp { background:#ffffff; } .warp-main { width: 1024px; margin: 0 auto; margin-top: 0px; } div { box-sizing: border-box; } p a:link, p a:hover, p a:visited { color: #0066cc; } p a:hover { color: #0066cc; text-decoration: underline; } .container { max-width: 1010px; } .nav.navbar-nav { width: auto; } .inside-nav .nav>li { padding-right: 20px; } .inside-nav .nav>li>a { padding: 20px 0px; font-size: 18px; } .navbar-default { background-color: #fff; border: none; } .inside-nav .navbar>.container .navbar-brand, .inside-nav .navbar>.container-fluid .navbar-brand { margin-left: 0px; } .inside-nav .navbar-default .navbar-nav>.active>a, .inside-nav .navbar-default .navbar-nav>.active>a:focus, .inside-nav .navbar-default .navbar-nav>.active>a:hover { box-shadow: 0px 2px 0px #58585b; background: none; color: #58585b; font-size: 18px; } .inside-nav .navbar-default .navbar-nav a:focus, .inside-nav .navbar-default .navbar-nav a:hover { box-shadow: 0px 2px 0px #58585b; background: none; color: #58585b !important; font-size: 18px; } .top-banner-container { position: relative; overflow: hidden; height: 300px; width:100%; max-width:1920px; margin:0 auto; } .top-banner-container img { width: 1920px; } .top-banner-shade { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0; z-index: 2; } .top-banner-text .h-style-1 { font-size: 42px; margin: 0; padding: 20px; margin-bottom: 10px; } .top-banner-text p { font-size: 20px; } .text-white { color: #fff; } .inside-nav { border-bottom: 1px solid #ccc; background: #fff; } .inside-nav.active-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 100000; box-shadow: 0 2px 5px #ccc; display: none; } .inside-nav.active-fixed.show-on { display: block; } h1, h2, h3, h4 { font-weight: 200; } .inside-nav-container { width: 100%; max-width: 1024px; position: relative; margin: 0 auto; } .inside-nav-container .navbar-brand { padding: 20px 0; font-size: 16px; color: #58585b; display: none; } .nav-btn { margin-top: 10px; } .type-button-blue { background: #0c4b95; border-radius: 3px; /**border:2px solid #0c4b95;**/ } .type-button-blue:hover { /**background:#005bb6; border:2px solid #005bb6; background:none; color:#004b95; border:2px solid #126db3;**/ background: #126db3; } .content-container { margin-top: 20px; } .content-container.active { margin-top: 55px; } .container-text { width: 100%; max-width: 1024px; position: relative; margin: 0 auto; } .container-text h1 { text-align: center; font-size: 30px; color: #333333; margin: 37px auto 28px auto; padding: 0px; line-height: 30px; padding-bottom: 5px; box-shadow: 0 0px; display: inline-block; } .section { position: relative; width: 100%; padding-top:30px; overflow: hidden; } .section h2 { font-size: 28px; margin: 0; margin: 18px 0 20px; text-align: center; color: #333333; line-height: 28px; box-shadow: 0 0px; /*display: inline-block;*/ padding-bottom: 5px; } .container-text h1.syn-bio-color { color: #381d6e; } .section h2.syn-bio-color { color: #381d6e; } .h44 { width: 100%; height: 44px; } .section-title { display: block; text-align: center; } .content-container p { font-size: 14px; line-height: 22px; margin-bottom: 10px; } .customer-testimonicals { width: 100%; max-width: 1024px; position: relative; margin: 0 auto; overflow: hidden; } .customer-testimonicals-container { width: 100%; max-width: 1024px; } .customer-testimonicals-container-item { position: relative; display: inline-block; float: left; width: 100%; } p { font-size: 14px; line-height: 1.6em; margin-bottom: 12px; } .flex-container-1, .flex-container-2, .flex-container-3, .flex-container-4, .flex-container-5, .flex-container-6, .flex-container-7, .flex-container-8, .technology-content { width: 100%; max-width: 1024px; position: relative; display: flex; margin: 0 auto; display: -webkit-flex; flex-flow: wrap; -webkit-flex-flow: wrap; -moz-flex-flow: wrap; vertical-align: top !important; } .flex-container-5 { width: 100%; max-width: 1024px; margin: 0 auto; } .flex-1-item { width: 25%; position: relative; } .flex-1-item .icon-line { float: left; width: 6px; margin-right: 10px; border-radius: 3px; background: #c0c0c0; height: 60px; } .flex-1-item div { float: left; width: 75%; } .flex-1-item div h3 { margin: 0; font-size: 24px; line-height: 24px; color: #4f4f4f; font-weight: bold; margin-bottom: 14px; } .flex-2-item { width: 48%; padding: 20px 10px; box-sizing: border-box; background: #f1f1f1; margin-right: 4%; border-radius: 5px; position: relative; padding-bottom: 30px; } .flex-2-item:nth-child(2) { margin-right: 0; } .flex-3-item { width: 31%; position: relative; margin-right: 3.5%; } .flex-3-item.active { box-shadow: 0 0 10px #999; } .flex-3-item h4 { font-weight: bold; font-size: 16px; line-height: 25px; margin: 0; padding: 0 10px 10px; } .flex-3-item a { display: block; margin: 10px 0; padding: 0; } .flex-3-item:hover a { color: #007492; } .flex-3-item .font0 { font-size: 0; line-height: 0; } .flex-3-item:nth-child(3n) { margin-right: 0; } .flex-4-item { width: 220px; position: relative; margin-right: 40px; vertical-align: top !important; margin-top: 20px; } .flex-4-item p { font-size: 14px; } .flex-4-item img { width: 220px; height: 150px; } .flex-4-item:nth-child(4n) { margin-right: 0; } .flex-5-item { width: 250px; height: 50px; line-height: 50px; position: relative; text-align: center; padding: 0 10px; font-size: 14px; margin-right: 125px; vertical-align: top !important; background: #fff; margin-bottom: 34px; } .flex-5-item:hover { background: #0dbeea; } .flex-5-item:hover a { color: #fff; } .flex-5-item a { display: block; font-size: 18px; } .line-height-20 { line-height: 20px; padding-top: 5px; } .flex-5-item:nth-child(3n) { margin-right: 0; } .flex-container-6 img { width: 100%; } .flex-6-item { width: 200px; height: auto; /* border:1px solid #ccc;*/ margin: 0 auto; margin-bottom: 10px; } .flex-6-item-border { border: 1px solid #ccc; } .flex-6-item a.img-color { display: none; } .flex-6-item a.img-color.active { display: block; } .flex-6-item.active { box-shadow: 0 0 10px #999; } .flex-6-item .style-h4 { margin: 0; padding: 0 10px; font-size: 16px; font-weight: normal; line-height: 1.4em; color: #333; } .flex-6-item .style-h4 a.syn-bio-color { color: #333333; font-weight:normal; } .flex-7-item { width: 250px; position: relative; margin-right: 125px; text-align: center; } .flex-7-item:nth-child(3n) { margin-right: 0; } .flex-7-item img { margin-bottom: 18px; box-shadow: 0 0 2px #ccc; } .flex-7-item p a { color: #58585b; } .flex-7-item:hover p a { color: #381d6e; font-weight: normal; text-decoration: none; } .flex-7-item:hover img { box-shadow: 0 0 10px #ccc; } .resource-category-title { background: #fff; font-size: 18px; width: 250px; height: 40px; line-height: 40px; text-align: center; margin: 30px auto; } .resource-category-title a { display: inline-block; } .flex-8-item { width: 268px; position: relative; margin-right: 98px; background: #fff; } .flex-8-item:nth-child(3) { margin-right: 0; } .hover-img-text { position: relative; padding: 10px 15px; font-size: 14px; } .hover-img-text p { font-size: 14px; } .hover-img-btn { position: absolute; font-size: 16px; line-height: 16px; bottom: -15px; left: 57px; } .hover-img-btn button { padding: 10px 20px; color: #0c4b95; border-radius: 2px; border: 1px solid #0c4b95; background: #fff; font-weight: bold; } .flex-8-item:hover { box-shadow: 0 0 20px #767677; } .flex-8-item:hover .hover-img-btn button { background: #0c4b95; border: 1px solid #fff; color: #fff; } .flex-8-item:hover .hover-img-btn button { color: #fff; } .more-btn { text-align: center; width: 100%; margin: 20px auto; } .overview-content-text { width: 100%; max-width: 1024px; margin: 0 auto; } .align-center { text-align: center; } .align-left { text-align: left; } .align-right { text-align: right; } .mBottom-zero { margin-bottom: 0px; } .style-speaker { position: absolute; top: 0; left: 0; width: 100%; height: 40px; line-height: 40px; background: #017493; color: #fff; padding: 0 10px; } .style-speaker.syn-bio-color { background: #381d6e; } .style-speaker-text { padding-top: 30px; } .vision-container, .next-step-container { width: 100%; max-width: 1024px; margin: 0 auto; position: relative; } .next-step-container { margin-top: 50px; } .next-step-container h2 { font-size: 32px; margin: 0; display: block; box-shadow: 0 0; color: #333; } .next-step-container h2 a { color: #007492; text-decoration: underline; } .next-step-container { margin-bottom: 50px; } .next-step-container ul { width: 100%; text-align: center; } .next-step-container ul li { display: inline; margin: 0 10px; } .next-step-container ul li span { display: inline-block; width: 40px; height: 40px; vertical-align: middle !important; } .next-step-container ul li span.icon-shubiao { background: url(/gsimages/chinese/phone.png) center -28px no-repeat transparent; } .next-step-container ul li span.icon-phone { background: url(/gsimages/chinese/phone.png) center -62px no-repeat transparent; } .next-step-container ul li span.icon-online { background: url(/gsimages/chinese/phone.png) center 8px no-repeat transparent; } .next-step-container ul li span.icon-fax { background: url(/gsimages/chinese/phone.png) center -92px no-repeat transparent; } .next-step-container ul li a { vertical-align: middle !important; } .banner-btn { background: none; color: #fff; border: 1px solid #fff; font-size: 22px; border-radius: 3px; padding: 3px 35px; } .banner-btn:hover { background: #076281; color: #fff; border: 1px solid #076281; } .get-quote-btn { font-size: 22px; line-height: 26px; } .get-quote-btn-bottom { margin-bottom: 30px; padding: 6px 30px; } .flex-container-3 .get-quote-btn { font-size: 14px; } .technology-content-item { width: 200px; position: relative; text-align: center; margin: 0px auto; padding-top: 10px; } .technology-content-item img { margin-bottom: 18px; } .technology-content-item .img-color { display: none; } .technology-content-item p a { color: #58585b; font-size: 16px; } .technology-content-item:hover p a { color: #007492; } .flex-3-item a.img-color { display: none; } .flex-3-item img { height: 90px; } .flex-3-item a.img-color.active { display: block; } /*-----add 2018-10-23--------*/ .flex-add-item { padding:15px; position: relative; flex-direction: column; width:24%; margin-right:12px; } .flex-add-item:nth-child(4){ margin-right:0 } .flex-add-item .add-icon { display: block; padding: 20px 0 20px 0; } .flex-container-3 .addbg1 { background-color: #2199af; } .flex-container-3 .addbg2 { background-color: #93c078; } .flex-container-3 .addbg3 { background-color: #d6a921; } .flex-container-3 .addbg4 { background-color: #5986b5; } .flex-add-item h4 { font-size: 20px; color: #fff; font-weight: bold; margin-top:0; line-height:1.2em; } .flex-add-item h4 a, .flex-add-item .text p a { color:#ffffff; } .flex-add-item h4 a:hover { text-decoration:underline } .flex-add-item .text { padding: 10px 0; } .flex-add-item .text p { line-height: 1.6em; color: #fff; font-size: 15px; margin-bottom:0 } .flex-add-item .text p a:link, .flex-add-item .text p a:visited { color:#ffffff; text-decoration: none; } .flex-add-item .text p a:hover { color:#ffffff; text-decoration:underline } .flex-add-item:hover { background: #107486; } .flex-container-3 .addbg2:hover { background: #68a941; } .flex-container-3 .addbg3:hover { background: #c09515; } .flex-container-3 .addbg4:hover { background: #4175ab; } .add-icon h4 { margin-bottom:0; font-size:18px; text-align:left; font-weight:normal; } .flex-add-item .add-icon-sub { padding: 8px 10px; min-height:58px; /*background: #bfbfbf ; background: -webkit-linear-gradient(left, #bfbfbf -23%, #ededed 85%); background: -o-linear-gradient(left, #bfbfbf -23%, #ededed 85%); background: -ms-linear-gradient(left, #bfbfbf -23%, #ededed 85%); background: linear-gradient(left, #bfbfbf -23%, #ededed 85%); filter: progid: DXImageTransform.Microsoft.Gradient(startColorStr='#bfbfbf', endColorStr='#ededed', gradientType='0');*/ } .flex-add-item .add-icon-sub h4 a { color:#0066cc; } .flex-add-item-sub .flex-add-item { padding:15px 0 } .flex-add-item-sub .flex-add-item:hover { background: transparent; } .text .tableul { padding-left:22px; } .text .tableul li a:hover { text-decoration:underline; } .flex-4-item a { display:inline-block; overflow:hidden; margin-bottom:10px; } .flex-4-item a >img { transition: all .5s ease-out; vertical-align: bottom; } .flex-4-item a:hover >img { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1) } .casestudy-box p a:link, .casestudy-box p a:visited { color:#333333; text-decoration:none; } .casestudy-box p a:hover, .casestudy-box p a:active { color:#0066cc; text-decoration:underline } .flex-add-item .add-icon-resource { padding: 30px 24px; border-bottom: 3px solid; border-color:#2199af; border-image: -webkit-linear-gradient(left, white, #2199af, white, white) 4 80 80 4; border-image: -moz-linear-gradient(left, white, #2199af, white, white) 4 80 80 4; border-image: linear-gradient(left, white, #2199af, white, white) 4 80 80 4; background: rgb(239, 248, 249); } .flex-add-item .resourceborder1 { border-color:#93c078; border-image: -webkit-linear-gradient(left, white, #93c078, white, white) 4 80 80 4; border-image: -moz-linear-gradient(left, white, #93c078, white, white) 4 80 80 4; border-image: linear-gradient(left, white, #93c078, white, white) 4 80 80 4; background:rgb(242, 247, 239); } .flex-add-item .resourceborder2 { border-color:#d6a921; border-image: -webkit-linear-gradient(left, white, #d6a921, white, white) 4 80 80 4; border-image: -moz-linear-gradient(left, white, #d6a921, white, white) 4 80 80 4; border-image: linear-gradient(left, white, #d6a921, white, white) 4 80 80 4; background:rgb(251, 247, 235); } .flex-add-item .resourceborder3 { border-color:#5986b5; border-image: -webkit-linear-gradient(left, white, #5986b5, white, white) 4 80 80 4; border-image: -moz-linear-gradient(left, white, #5986b5, white, white) 4 80 80 4; border-image: linear-gradient(left, white, #5986b5, white, white) 4 80 80 4; background:rgb(235, 240, 246); } .add-icon-resource h4 { text-align: center; font-size: 16px; color: #333333; } .add-icon-resource:hover { background:rgb(219, 238, 240); } .resourceborder1:hover { background:rgb(230, 240, 224); } .resourceborder2:hover { background:rgb(240, 234, 216); } .resourceborder3:hover { background:rgb(216, 228, 242); } h4.font18em { font-size: 20px; font-style: italic; color:#ffffff; font-weight: bold; } .melecular-border { display: inline-block; padding: 5px 20px; position: absolute; background: #0c468b; width: 44%; height: 100%; left: 32%; transform: skew(-40deg); } .font16 { font-size:16px!important; line-height:1.4em; } ul.researchul { list-style-type: none; margin-left: 0px; padding: 0 25px; margin: 0; } ul.researchul li { font-size:16px; line-height:1.8em; } ul.researchul .lileftimg { width:120px; height:100px; float: left; margin-right:35px; /**background-image: url(/gsimages/genscript/gencrispr_grna_constructs.jpg);*/ background-size: auto; overflow:hidden; background-repeat:no-repeat; } ul.researchul .lileftimgbg1 { /*background-image: url(/gsimages/genscript/gencrispr_grna_constructs.jpg);*/ } .module-center .module-center { text-align: center!important; }