body{
 font-family:"SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#util-blog{border-right:1px solid #ccc}
#util a{padding:7px 20px 6px 20px}
.hero-section .slick-dots li button{font-size:14px}
#webinar-abstract{font-size:14px}
#main-nav ul li a{font:14px Meiryo;padding:30px 24px 21px 24px}
.sub-menu ul{padding:0;width:300px}
#main-nav .sub-menu a, #footer-nav li{display:block;padding-left:25px;background-image:url(../../img/common/us1.gif);background-repeat:no-repeat;background-position:left center;background-size:6%}
#main-nav .sub-menu a:hover{background-color:transparent}
#main-nav .sub-menu .gnb_ic{background:none;font-size:15px}
#main-nav #gnb-company a{padding-left:0;padding-right:20px;background-position:right center}
#gnb-products{left:-500%;padding-right:295%}
#gnb-company{left:-210%}

.hero-section h1{font-weight:600;font-size:43px}
.hero-section p{font-size:23px}
.hero-section p:first-child{margin-bottom:15px}
.hero-section .slick-dots li button{background:rgba(0, 0, 0, 0); color: #fff}
.hero-after:after{background:#ededed;opacity:.2}
.hero-655-after:after{background:#3c3c3c;opacity:.3}
.hero-drs-after:after{background:#333;opacity:.3}
.press-row h5{width:20%;font-size:24px}
#press-release h5{width:18%}
.press-row ul{width:68.6%}
#in-the-news .view-all{width:10%;min-width:113px}

.visual-slas2018{background-image:url("../../img/main/visual-drs-main-v3.jpg")}
.visual-genomics{background-image: url(../../img/main/visual-echo-genomics-04.jpg)}
.visual-synbio{background-image:url("../../img/main/visual-echo-synthetic-05.jpg")}

#news-trending h5{width:15%}
#news-trending ul{width:75%}
#news-trending .view-all{min-width:107px;width:9%;margin-top:0}
.hero-section h1, .hero-section p, .left-paragraph p, .data-box p, .data-box h5, .left-paragraph h2, .left-paragraph h3, .left-paragraph h4, .ul-with-circles li, .hero-section li, #footer-nav li, #footer_num li, #footer_num li a,
#footer-copyright em, #key-benefit .ul-with-arrows li, .page-inner h3, #docs h4, .brochure_title, .brochure_desc, .literature a, .literature b, .literature em, .featured-title, #docs .featured-author, #docs .video-speaker, 
.product-arrows .ul-with-arrows li, #request-info h2, #echo-55x-table td:first-child, .data_table th, .data_table td, input, textarea, select, button, table{
 font-family:"SF Pro JP", "SF Pro Display", "SF Pro Icons", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.brochure_title, .literature a, .literature b, .literature em, .featured-title, #docs .featured-author, #docs .video-speaker, .ul-with-circles li, .docs-handlers a, #docs .featured-type{font-size:13px}
.echo-hero h1{font-family:gilroylite}
.product-arrows .ul-with-arrows li{font-size:15px;}
.data_table td{font-size:14px}
.brochure_desc{font-style:normal}
#footer-nav ul{font-size:13px}

#blue-pie-txt{left:50%;top:130px}
#hts-pie-section #blue-pie-txt{left:54%}
#hts-pie-section #showPie p{font-size:12px}
#appGraphics .synbio-circle-3{font-size:11px}
.rectangle h4{font-size:15px}
.synbio-graphics .rectangle li{font-size:12px}

#docs .btn{width:55%;padding-left:10px;padding-right:10px;min-width:90px}

#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/common/jp1.gif);background-repeat:no-repeat;background-position:left center}\

@media all and (max-width: 1285px){
.press-row ul, #news-trending ul{float:left;padding-left:40px}
#news-trending h5{min-width:130px}
.press-row h5{min-width:200px}
#showPie p{font-size:12px}
}

@media all and (max-width: 1230px){
#blue-pie-txt{top:120px}
}

@media all and (max-width: 1160px){
#blue-pie-txt{top:110px}
}

@media all and (max-width: 1024px){
#blue-pie-txt{top:130px;left:52%}
}

@media all and (max-width: 845px){
#blue-pie-txt{top:110px;left:49%}
}

@media all and (max-width: 736px){
#blue-pie-txt{top:230px;left:52%}
#hts-pie-section #blue-pie-txt{top:30%}
 #hts-pie-section{height:860px}
}

@media all and (max-width: 680px){
#blue-pie-txt{top:43%;left:50%}
}

@media all and (max-width: 550px){
 #hts-pie-section{height:900px}
}

@media all and (max-width: 436px){
#blue-pie-txt{top:32%;left:48.5%}
 #hts-pie-section{height:950px}
}

@media all and (max-width: 340px){
 #hts-pie-section{height:1000px}
}