body{
 font-family:Arial, "Microsoft Yahei","微软雅黑", STXihei, "华文细黑", sans-serif;
}
.hero-section .slick-dots li button{background:rgba(0, 0, 0);background:rgba(0, 0, 0, 0);color:#fff}
.visual-automation{background-image:url("../../img/products/visual-access-workstationR.jpg")}
.visual-synbio { background-image: url("../../img/main/visual-echo-synthetic-05.jpg"); }
.visual-synbio section, .visual-echo section{margin-top:230px}
.visual-automation section{margin-top:200px}
.hero-section .slick-dots li button{font-size:14px}
#main-nav ul li a{font-size:16px;padding:28px 45px 22px 45px}
#main-nav .sub-menu a, #footer-nav li{display:block;padding-left:20px;background-image:url(../../img/main/us.png);background-repeat:no-repeat;background-position:left center}
#main-nav .sub-menu .red-link{background-image:url("../../img/main/cn.png");background-repeat:no-repeat;background-position:left center}
#main-nav .sub-menu a:hover{background-color:transparent}
#main-nav .sub-menu .gnb_ic{background:none}
#gnb-technology{left:34%}
#gnb-news{left:23.5%}
#gnb-resources{left:34%}
#gnb-support{left:34%}
#gnb-company{left:-160.7%}
#main-nav #gnb-company a{padding-left:0;padding-right:20px;background-position:right center}

#footer-nav .footer-nav-heading{background-image:none;padding-left:0}
#main-nav .sub-menu .red-link, #footer-nav .red-link{background-image:url(../../img/main/cn.png);background-repeat:no-repeat;background-position:left center}

/*---------------------------------------MAIN MEDIA COLUMNS-----------------------------------*/
#main-media { margin: 30px 0 0 0; background: linear-gradient(to top, #e8e9ea 75%, #fff 25%); padding-bottom: 65px; }

#main-media article { position: relative; display: block; float: left; height: auto; width: 32.65%; margin-right: 1%; padding: 0; background: transparent; cursor: pointer; }

#main-media article:last-child { margin-right: 0; }

.avatar-thmb { float: left; width: 35%; }

.avatar-thmb img { width: 100%; }

.media-title span { float: left; }

#main-media h4 { position: absolute; bottom: 25%; left: 6%; padding-right: 1%; color: #fff; font: 17px/1.2 slatemed; }

.media-author { position: relative; clear: left; width: 96.5%; height: 95px; background: #000; padding-left: 3.5%; text-align: left; white-space: nowrap; }

.media-author h5, .media-author p { color: #ccc; padding: 0; margin: 0; }

.media-author h5 { padding-top: 20px; font: 18px slatebold; color: #fff; }

.media-author span { display: block; }

.media-author:before, .media-author:after { position: absolute; content: ""; bottom: 0; height: 15px; }

.media-author:before { width: 20%; left: 68.5%; background: #0b3c61; }

.media-author:after { width: 10%; right: 0; background: #d1d1d1; }

#main-media .btn { position: absolute; left: 3%; bottom: 3%; }

#main-media .btn:link, #main-media .btn:visited { width: 130px; padding: 10px; color: #282828; border: 1px solid #acb4b8; }

#main-media .btn:hover { color: #0b3c61; border: 1px solid #0b3c61; }

.media-author .mobile-break { display: none; padding-right: 3px; }

.shadow-hover:before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; width: 100.2%; height: 100%; z-index: 9; background: #000; background: -moz-linear-gradient(top, #5b5b5b 0%, #000 100%); background: -webkit-linear-gradient(top, #5b5b5b 0%, #000 100%); background: linear-gradient(to bottom, #5b5b5b 0%, #000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b5b5b', endColorstr='#000000',GradientType=0); opacity: 0; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; }

.shadow-hover:hover:before { opacity: .7; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; }

.shadow-hover:hover .download-hover { opacity: 1; transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; }

#main-media .download-hover { z-index: 10; top: 45%; }

#main-media .download-hover em { background: #fff; color: #282828; opacity: .9; }


.media-title{float:left;width:92%;padding:6% 4%;height:200px; background: #000;}
#main-media h3{font:18px/1.1 slatelite;color:#d1d1d1;margin-bottom:0}
.media-title em{display:block;font:15px slatemed}
.media-title p{position:relative;left:0;bottom:0;margin-top:25px;color:#fff;font-size:16px}

.press-row ul{width:72.6%}
#in-the-news .view-all{width:9%;min-width:91px}

#footer-nav .footer-nav-heading{font-family:robotobold}
#footer-blue{height:220px}
#rel_featured_pub_msg{top:120px}

/* //////////////////////////// CN PAGES START HERE ///////////////////////////// */
.bio-assays-content{margin-bottom:28%}
#bio-essays-echo .img-right{margin-top:-60px}
.adme-tox-docs .related-links{height:140px}
.sequencing-content{margin-bottom:10%}
.single-cell-content{margin-bottom:20%}

#news-trending ul{width:75%}

/* /////////////////////////// MEDIA QUERIES /////////////////////////////////////*/
@media all and (max-width: 1380px){
.visual-ade section{margin-top:200px}
.visual-synbio section, .visual-echo section{margin-top:210px}
.visual-automation section{margin-top:180px}
}

@media all and (max-width: 1285px){
.press-row ul{float:left;padding-left:40px}
#in-the-news .view-all{width:9%;min-width:106px}
}

@media all and (max-width: 1195px){
 #gnb-technology, #gnb-news, #gnb-resources, #gnb-support, #gnb-company{left:0}
 #main-nav ul li a{color:#fff;float:none;padding:15px 10px 15px 20px;display:block;font-size:15px}
 #main-nav ul li a:hover{background:none}
.visual-ade section{margin-top:180px}
.visual-synbio section, .visual-echo section{margin-top:170px}
.visual-automation section{margin-top:140px}
#news-trending ul{float:left;padding-left:30px}
}

@media all and (max-width: 1030px){
	#main-media { background: #e8e9ea; padding-top: 30px; padding-bottom: 0; }
  #main-media article { width: 100%; height: auto; margin-bottom: 5%; padding-bottom: 0; background: #000; }
  #main-media article:after { position: absolute; content: ""; bottom: 0; height: 10px; z-index: 3; }
  #main-media article:after { width: 4%; right: 0; background: #d1d1d1; }
  .avatar-thmb { float: left; width: 18%; }
  .media-title { float: none; display: inline-block; width: 82%; height: 40px; }
  .media-title p { font-size: 15px; bottom: 60%; left: 3%; }
  #main-media h4 { font-size: 19px; padding-right: 5%; bottom: 15%; left: 3%; }
  .media-title span { float: none; }
  .media-author { display: inline-block; width: 79.3%; padding-left: 2.7%; height: auto; }
  .media-author h5 { font-size: 16px; padding-top: 0; }
  .media-author:before, .media-author:after { display: none; }
  .media-author span { display: inline-block; }
  .media-desc { clear: both; }
  .media-author .mobile-break { display: inline-block; }
}

@media all and (max-width: 670px){
.visual-ade section{margin-top:140px}
.visual-synbio section, .visual-echo section{margin-top:140px}
.visual-automation section{margin-top:120px}

.visual-echo h1{width:100%}
.visual-echo .btn, .visual-jala .btn{margin-top:170px}
}

@media all and (max-width: 620px){
.visual-ade section{margin-top:30%}
.visual-synbio section, .visual-echo section{margin-top:35%}
.visual-automation section{margin-top:30%}
.visual-echo .btn, .visual-jala .btn{margin-top:8%;margin-bottom:50%}
}

@media all and (max-width: 400px){
 .hero-section h1{font-size:37px}
}
