/* CSS Document */ /* MNATION WEB CSS 1. CUSTOM FONTS 2. FONT FORMAT 3. TABLE STYLE (GENERAL) 4. BACKGROUND + LOGO 5. CONTAINERS & TABLES FOR CONTENTS 6. COMPONENTS 7. BUTTONs 8. MAIN NAVIGATION 9. MAIN HERO SLIDER 10. TABS 11. FOOTER */ /* -------------- 1. CUSTOM FONTS --------------------*/ img { image-rendering: crisp-edges; } @font-face { font-family: 'avenirBlack'; src: url('../fonts/Avenir-Black.eot'); src: url('../fonts/Avenir-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/Avenir-Black.woff') format('woff'), url('../fonts/Avenir-Black.ttf') format('truetype'), url('../fonts/Avenir-Black.svg#vagron') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'avenirLight'; src: url('../fonts/Avenir-Light.eot'); src: url('../fonts/Avenir-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Avenir-Light.woff') format('woff'), url('../fonts/Avenir-Light.ttf') format('truetype'), url('../fonts/Avenir-Light.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'lato'; src: url('../fonts/lato-regular-webfont.eot'); src: url('../fonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-regular-webfont.woff') format('woff'), url('../fonts/lato-regular-webfont.ttf') format('truetype'), url('../fonts/lato-regular-webfont.svg#vagron') format('svg'); font-weight: normal; font-style: normal; } html{height:100%} body {margin: 0px; padding:0px; font:16px 'lato', Helvetica, sans-serif; width:100%; height:100%; color:#404041; line-height:22px;} a, div, img{outline:none!important; -webkit-transition:color 0.2s linear;-moz-transition:color 0.2s linear;transition:color 0.2s linear; color:#000;} .txtbox_tp{border:none !important; background-color:transparent!important; width:99%; outline:none!important; color:#fff !important; } /* -------------- CUSTOM FOUNDATION CSS --------------------*/ table {border:none!important; margin:0px!important; background-color:transparent!important; } table tbody, tfoot {background-color:transparent!important;} table tbody tr:nth-child(even) {background-color:transparent; } table tr td{padding:0px!important;} input, select, textarea{border-radius:3px!important; font-size:15px;} select{margin:0px!important;} .noResize {max-width:none;} /* -------------- 2. FONT FORMAT --------------------*/ .font_10px{font-size:10px!important;} .font_11px{font-size:11px!important;} .font_12px{font-size:12px!important;} .font_13px{font-size:13px!important;} .font_14px{font-size:14px!important;} .font_16px{font-size:16px!important;} .font_18px{font-size:18px!important;} .font_20px{font-size:20px!important;} .font_23px{font-size:23px!important;} .font_24px{font-size:24px!important;} .font_26px{font-size:26px!important;} .font_30px{font-size:30px!important;} .font_34px{font-size:34px!important;} .font_40px{font-size:40px!important;} .font_60px{font-size:60px!important;} .font_light{font-family:'avenirLight'} .font_bold{font-family:'avenirBlack'} .txt_red{color:#c72531;} .txt_required{color:#ff0000;} .txt_white{color:#fff;} .txt_black{color:#333;} .txt_yellow{color:#fdb514;} .txt_grey{color:#6a6a6a;} .txt_alignLeft{text-align:left;} .txt_alignCenter{text-align:center;} .txt_up {text-transform:uppercase;} label {color:#333; font-size:12px; font-weight:bold; } .header_txt {font:32px 'avenirLight'; color:#fdb514; text-transform:uppercase; line-height:32px; margin-bottom:10px;} .subheader_black{font:32px 'avenirLight'; text-transform:uppercase; color:#000;} .txt_highlight{font-size:20px; font-weight:bold;} .divider_grey{border-bottom:1px solid #404041; padding-top:10px; margin-bottom:10px;} .number_grey{background:url(../images/icons/numeric_bg.png) no-repeat; width:30px; height:30px;margin-right:5px; display:inline-block; text-align: center} .number_grey span{color:#fff; font-size:13px; font-weight:bold; text-align:center!important;} .link_black {color:#000; text-decoration:underline;} .link_black:hover{text-decoration:none; color:#000;} .link_yellow {color:#fdb514; text-decoration:underline;} .link_yellow:hover{text-decoration:none; color:#000;} /* -------------- BUTTONS --------------------*/ .btn_black{background-color:#333333; padding:10px 20px; margin:5px; border-radius:3px; color:#fff; font-weight:bold; font-size:12px; display:inline-block; text-transform:uppercase; cursor:pointer;} .btn_black:hover{background-color:#000; color:#fdb514;} .btn_black:active{background-color:#fff;} /* -------------- MAIN NAV --------------------*/ #mainNav{padding-top:40px; } .menu a{color:#000!important; text-transform:uppercase; font-family:'avenirLight'; -webkit-transition:color 0.2s linear;} .menu a:hover{color:#000!important; -webkit-transition:color 0.2s linear; font-weight:bold;} .menu .selected a, .menu .selected{font-family:"avenirBlack"!important;} .menu .secondMenu li{border-bottom:1px solid #373737;} .menu .secondMenu li:hover{background-color:#000; -webkit-transition:background-color 0.2s linear;} .menu .secondMenu li a{color:#898989!important; font-size:13px;} .menu .secondMenu li a:hover{color:#fdb514!important;} .menu .secondMenu .selected a{color:#fdb514!important;} .menu .secondMenu .lastNode, .menu .lastNode{border-bottom:none;} .dropdown.menu > li.is-dropdown-submenu-parent > a::after {border-color: #000 transparent transparent;} /*submenu arrow*/ .is-dropdown-submenu {border: 2px solid #000;background: #000;} /*submenu border*/ .title-bar {padding:15px;} /*titlebar padding*/ /*mobile/tablet menu*/ .mainNav_Container{padding:0px;} .is-drilldown {background-color:#000; border-top:1px solid #555;} .is-drilldown li{border-bottom:1px solid #2a2a2a; padding:5px;} .is-drilldown li:active, .is-drilldown .secondMenu li a:active{background-color:#fdb514;} .is-drilldown li a{padding-left:40px;} .is-drilldown a{color:#898989!important;} .is-drilldown a:hover{color:#fff!important;} .is-drilldown-submenu-parent > a::after {border-color: transparent transparent transparent #fdb514;} .js-drilldown-back > a::before {border-color: transparent #fdb514 transparent transparent;} .is-drilldown .secondMenu li{ background-color:#000;} .is-drilldown .secondMenu li:hover{ color:#fff!important;} .is-drilldown .secondMenu li a{font-size:15px;} #backToTop {bottom:10px; right:10px; position:fixed; display:none; width:50px; height:50px; background-color:#404041; z-index:999; } #backToTop:hover {background-color:#fdc74c;} #backToTop:active {background-color:#fdb513;} #backToTop img{margin-top:10px; margin-left:3px; width:90%;} /* -------------- HERO BANNERS --------------------*/ .orbit-bullets {position:absolute; bottom:40px; left:0; right:0; width:auto; margin: auto; z-index:999; background:url(../images/icons/orbit-bg.png) no-repeat center;} .orbit-bullets button {width: 1.2rem; height: 1.2rem; margin: 0.1rem; border-radius: 50%; border:4px solid black; background-color: #fff; cursor:pointer;} .orbit-bullets button:hover {background-color: #fdb514;} .orbit-bullets button.is-active {background-color: #000;} .orbit-previous, .orbit-next { cursor:pointer;} .orbit-previous:hover, .orbit-next:hover {background-color:#000;} .orbit-previous:active, .orbit-next:active{background-color:#fdb514; } .hero_banner div{outline:none!important;} /* -------------- HERO BANNER --------------------*/ .hero_banner .banner1{background:url(../images/contents/mainbanners/banner1_web.jpg) no-repeat center; width:100%; height:708px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .btn{height:708px; display:block;} .hero_banner .banner2{background:url(../images/contents/mainbanners/banner2_web.jpg) no-repeat center; width:100%; height:708px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .banner_bioinfo{background:url(../images/contents/20180612/mainbanners/bioinfo_web.jpg) no-repeat center; width:100%; height:708px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .banner_mobileApp{background:url(../images/contents/20180612/mainbanners/mobileApp_web.jpg) no-repeat center; width:100%; height:708px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .banner_ngs{background:url(../images/contents/20180612/mainbanners/NGS_web.jpg) no-repeat center; width:100%; height:708px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* -------------- CONTENTS HEADER --------------------*/ .content_header_products {background:url(../images/contents/content_header_bg/content_header_products.png) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:150px;} .content_header_products .content_desc_container {margin-top:110px;} .content_header_sdc {background:url(../images/contents/content_header_bg/content_header_sdc.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:150px;} .content_header_sdc .header{font-size:60px; text-transform:uppercase; color:#fdb514; line-height:60px;} .content_header_technical {background:url(../images/contents/content_header_bg/content_header_technical.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:150px;} .content_header_technical .header{font-size:60px; text-transform:uppercase; color:#fdb514; line-height:60px;} .content_header_technical .desc{color:#fff;} .content_header_aboutus {background:url(../images/contents/content_header_bg/content_header_aboutus.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:180px;} .content_header_aboutus .header{font-size:60px; text-transform:uppercase; color:#fdb514;} .content_header_aboutus .desc{color:#fff;} .content_header_management {background:url(../images/contents/content_header_bg/content_header_management.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:280px;} .content_header_management .header{font-size:60px; text-transform:uppercase; color:#fdb514;} .content_header_management .desc{color:#fff;} .content_header_portfolio {background:url(../images/contents/content_header_bg/content_header_portfolio.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:180px;} .content_header_portfolio .header{font-size:60px; text-transform:uppercase; color:#fdb514;} .content_header_portfolio .desc{color:#fff;} .content_header_contactus {background:url(../images/contents/content_header_bg/content_header_contact.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:290px; text-align:right;} .content_header_contactus .header{font-size:60px; text-transform:uppercase; color:#404041;} .content_header_contactus .desc{color:#404041;} .content_desc_container {padding-left:100px;} .content_desc_container .header{font:44px 'avenirLight'; text-transform:uppercase; line-height:45px; margin-bottom:10px;} .content_desc_container .desc{font-size:16px; text-transform:none;} /* -------------- (ADDED: 2018-06-12) --------------------*/ .content_header_prodBio {background:url(../images/contents/20180612/content_header_bg/content_header_prod_bio.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:200px;} .content_header_prodBio .header{font-size:60px; text-transform:uppercase; color:#fdb514; line-height:60px;} .content_header_prodBio .desc{color:#000;} .content_header_prodMob {background:url(../images/contents/20180612/content_header_bg/content_header_prod_mobApp.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:200px;} .content_header_prodMob .header{font-size:60px; text-transform:uppercase; color:#fdb514; line-height:60px;} .content_header_prodMob .desc{color:#fff;} .content_header_servBio {background:url(../images/contents/20180612/content_header_bg/content_header_service_bio.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:200px;} .content_header_servBio .header{font-size:60px; text-transform:uppercase; color:#fdb514; line-height:60px;} .content_header_servBio .desc{color:#fff;} .content_header_servMob {background:url(../images/contents/20180612/content_header_bg/content_header_service_mobApp.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:200px;} .content_header_servMob .header{font-size:60px; text-transform:uppercase; color:#fdb514; line-height:60px;} .content_header_servMob .desc{color:#fff;} .content_header_career {background:url(../images/contents/20180612/content_header_bg/content_header_career.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:230px;} .content_header_career .header{font-size:60px; text-transform:uppercase; color:#fdb514; line-height:60px;} .content_header_career .desc{color:#fff;} #content_job {width:80%; margin-top:50px; text-align:left;} .career_title {border-radius:70px; width:120px; height:120px; background-color:#fdb514; margin-bottom:10px;} .career_title span{display:block; padding-top:50px; color:#fff; font-size:30px;} .career_title img {padding-top: 20px;} #select_job {width:40%;} /* -------------- CONTENTS --------------------*/ .content_container {text-align:center; padding:40px 5px; margin-bottom:20px;} .content_container2 {padding:60px 100px; margin-bottom:20px;} .content_container_white {padding:0px 100px; margin-bottom:30px!important;} .divider_black{border-bottom:1px solid #404041; padding-top:80px; margin-bottom:80px; width:80%; clear:both;} .mainpage_items {padding:0px 10px;} .mainpage_items .columns{padding:0px!important; margin:0px!important; } .mainpage_items a {background-color:#f5f5f5; cursor:pointer; display:block; -webkit-transition:background-color 0.2s linear;-moz-transition:background-color 0.2s linear;transition:background-color 0.2s linear; margin:5px; } .mainpage_items a:hover, .mainpage_items a:active {background-color:#fdb514; } .sdc_item {margin-bottom:10px; text-align:left; font-size:14px; line-height:normal;} .sdc_item img{padding-right:10px;} .tech_item {margin-bottom:10px; text-align:left; font-size:13px; line-height:normal;} .tech_item img{padding-right:10px; height:140px; width:150px; max-width:none;} .contact_align { margin-left:-80px!important;} .portfolio_item {height:50px;} /* -------------- BACKGROUND HIGHLIGHT --------------------*/ .highlight_yellow {width:100%; background-color:#fdb514; color:#404041; clear:both; } .highlight_yellow .header{font:32px 'avenirLight'; color:#fff; text-transform:uppercase; line-height:32px; margin-bottom:10px;} .highlight_grey {width:100%; background-color:#f5f5f5; padding:80px 0px;} .highlight_contactus {width:100%; height:auto; background:#fdb514 url(../images/contents/mainpage/contactus_bg.jpg) no-repeat center; padding:30px;} /* -------------- CONTENTS FORMATING --------------------*/ /* -------------- TABLE --------------------*/ .outline_table_black{border-radius:5px; border:1px solid #000; padding:10px 20px;} .table_black {border-radius:5px; background-color:#000; padding:10px 20px; margin-top:10px; color:#fdb514;} .table_grey {border-radius:10px; background-color:#f5f5f5; padding:30px 20px; margin-top:10px; color:#404041; text-align:center;} .table_outline_grey{border-radius:10px; border:2px solid #404041; padding:30px 20px; margin-top:10px; color:#404041; text-align:center;} /* -------------- FOOTER --------------------*/ .footer {background-color:#000; !important; color:#6a6a6a!important; padding:20px 20px 60px 20px; font-size:11px; z-index:1!important; line-height:normal; } .footer .footerLink a{color:#919191; font-size:13px; webkit-transition:color 0.2s linear;} .footer .footerLink a:hover, .footer .footerLink .header a:hover{color:#fdb514;} .footer .footerLink ul {padding:0px; margin:0px;} .footer .footerLink li {list-style-type:none; font-size:13px; color:#919191;} .footer .footerLink .header, .footer .footerLink .header a{color:#fff; font:17px 'avenirBlack'; text-transform:uppercase; padding-bottom:5px;} .footer .socialLink {text-align:right;} .footer .socialLink .icons {text-align:right;margin-right:4px;} .footer .socialLink a{opacity:0.5; display:inline-block; height:37px; width:37px; -webkit-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;transition:opacity 0.2s linear;} .footer .socialLink a.google{ background:url(../images/icons/icon_google.png) no-repeat;} .footer .socialLink a.facebook{ background:url(../images/icons/icon_facebook.png) no-repeat;} .footer .socialLink a.twitter{ background:url(../images/icons/icon_twitter.png) no-repeat;} .footer .socialLink a.linkedin{ background:url(../images/icons/icon_linkedin.png) no-repeat;} .footer .socialLink a.google:hover, .footer .socialLink a.facebook:hover, .footer .socialLink a.twitter:hover, .footer .socialLink a.linkedin:hover{ opacity:1;} /*MOBILE*/ @media only screen and (max-width: 658px) { body {font-size:15px; line-height:22px;} #mainNav{padding-top:0px} .headerContainer{position:relative;} .txt_alignCenter{text-align:left;} .footer .socialLink {text-align:left;} .footer .socialLink .icons {text-align:left;margin-left:4px;} .menu .selected a, .menu .selected{font-family:"avenirBlack"!important; color:#fdb514!important;} /* -------------- HERO BANNER --------------------*/ .hero_banner .banner1{background:url(../images/contents/mainbanners/banner1_mob.jpg) no-repeat center; width:100%; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .hero_banner .btn{height:589px; display:block;} .hero_banner .banner2{background:url(../images/contents/mainbanners/banner2_mob.jpg) no-repeat center; width:100%; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .hero_banner .banner_bioinfo{background:url(../images/contents/20180612/mainbanners/bioinfo_mob.jpg) no-repeat center; width:100%; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .hero_banner .banner_mobileApp{background:url(../images/contents/20180612/mainbanners/mobileApp_mob.jpg) no-repeat center; width:100%; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .hero_banner .banner_ngs{background:url(../images/contents/20180612/mainbanners/NGS_mob.jpg) no-repeat center; width:100%; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .content_container2 {padding:30px 30px; margin-bottom:20px;} .content_container_white {padding:40px 30px 0px 30px; } .divider_black{border-bottom:1px solid #404041; padding-top:0px; margin-bottom:30px; width:80%; clear:both;} .font_long {font-size:25px!important; line-height:25px!important;} .table_black{margin-bottom:50px;} /* -------------- BACKGROUND HIGHLIGHT --------------------*/ .highlight_yellow { padding:50px 0px!important; margin-bottom:80px; } .highlight_grey {width:100%; background-color:#f5f5f5; padding:50px 0px;} /* -------------- CONTENTS HEADER --------------------*/ .content_header_products {background:url(../images/contents/content_header_bg/content_header_products_mob.png) no-repeat center; height:500px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:80px;} .content_header_products .content_desc_container {margin-top:0px;} .content_desc_container {padding:20px;} .content_desc_container .header{font-size:36px; line-height:36px;} .content_desc_container .desc{font-size:15px;} .content_header_sdc {background:url(../images/contents/content_header_bg/content_header_sdc_mob.png) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-top:400px; margin-bottom:100px;} .content_header_technical{background:url(../images/contents/content_header_bg/content_header_technical_mob.png) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-top:430px; margin-bottom:100px;} .content_header_technical .header{font-size:40px; text-transform:uppercase; color:#fdb514; line-height:40px;} .content_header_technical .desc{color:#404041; font-size:15px;} .content_header_aboutus{background:url(../images/contents/content_header_bg/content_header_aboutus_mob.png) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-top:430px; margin-bottom:180px;} .content_header_aboutus .desc{color:#404041; font-size:15px;} .content_header_management {background:url(../images/contents/content_header_bg/content_header_management_mob.png) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-top:400px;} .content_header_management .desc{color:#404041; font-size:15px;} .content_header_portfolio{background:url(../images/contents/content_header_bg/content_header_portfolio_mob.png) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-top:420px; margin-bottom:100px;} .content_header_portfolio .desc{color:#404041; font-size:15px;} .content_header_contactus {background:url(../images/contents/content_header_bg/content_header_contact_mob.png) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-top:420px; padding-left:10px; text-align:left;} .content_header_contactus .header{font-size:36px; text-transform:uppercase; color:#fdb514;} .content_header_contactus .desc{color:#404041;} /* -------------- CONTENTS HEADER (ADDED:2018-06-12) --------------------*/ .content_header_prodBio {background:url(../images/contents/20180612/content_header_bg/content_header_prod_bio_mob.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:20px; padding-right:20px; padding-top:400px; margin-bottom:-100px;} .content_header_prodBio .desc{color:#404041; font-size:15px;} .content_header_prodMob {background:url(../images/contents/20180612/content_header_bg/content_header_prod_mobApp_mob.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-right:20px; padding-top:400px; margin-bottom:-50px;} .content_header_prodMob .desc{color:#404041; font-size:15px;} .content_header_servBio {background:url(../images/contents/20180612/content_header_bg/content_header_service_bio_mob.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-right:20px; padding-top:400px; margin-bottom:-50px;} .content_header_servBio .desc{color:#404041; font-size:15px;} .content_header_servMob {background:url(../images/contents/20180612/content_header_bg/content_header_service_mobApp_mob.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:20px; padding-right:20px; padding-top:400px; margin-bottom:-50px;} .content_header_servMob .desc{color:#404041; font-size:15px;} .content_header_career {background:url(../images/contents/20180612/content_header_bg/content_header_career_mob.jpg) no-repeat center; height:600px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-left:10px; padding-right:20px; padding-top:400px; margin-bottom:-50px;} .content_header_career .desc{color:#404041; font-size:15px;} #content_job {width:100%;} #select_job {width:100%;} /* -------------- CONTENT --------------------*/ .sdc_item {margin-bottom:30px;} .tech_item {margin-bottom:30px;} .tech_item img{height:120px; width:130px; max-width:none; max-height:none;} .contact_align{margin-left:0px!important;} .contact_item {margin-bottom:10px;} /*.txt_long{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:90%;}*/ } /*TABLET*/ /*TABLET*/ @media only screen and (min-width: 659px) and (max-width: 1024px){ #mainNav{padding-top:0px} .footer .socialLink {text-align:left;} .footer .socialLink .icons {text-align:left;margin-left:4px;} .menu .selected a, .menu .selected{font-family:"avenirBlack"!important; color:#fdb514!important;} /* -------------- HERO BANNER --------------------*/ .hero_banner .banner1{background:url(../images/contents/mainbanners/banner1_tablet.jpg) no-repeat center; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .btn{height:589px; display:block;} .hero_banner .banner2{background:url(../images/contents/mainbanners/banner2_tablet.jpg) no-repeat center; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .banner_bioinfo{background:url(../images/contents/20180612/mainbanners/bioinfo_tab.jpg) no-repeat center; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .banner_mobileApp{background:url(../images/contents/20180612/mainbanners/mobileApp_tab.jpg) no-repeat center; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .hero_banner .banner_ngs{background:url(../images/contents/20180612/mainbanners/NGS_tab.jpg) no-repeat center; height:589px; outline:none; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .content_container2 {padding:20px 50px; margin-bottom:20px;} .content_container_white {padding:20px 50px; margin-bottom:20px;} .divider_black{border-bottom:1px solid #404041; padding-top:0px; margin-bottom:30px; width:90%; clear:both;} /* -------------- CONTENTS HEADER --------------------*/ .content_header_products {background-position:-600px 0px; padding-top:0px;} .content_header_products .content_desc_container {margin-top:0px;} .content_desc_container {padding:50px;} .content_header_sdc { padding-top:80px;} .content_header_aboutus{padding-top:80px;} .content_header_management{padding-top:140px;background:url(../images/contents/content_header_bg/content_header_management_tab.jpg) no-repeat center;} .content_header_portfolio{padding-top:60px;} .contact_align {margin-left:0px!important;} } /*TABLET - LANDSCAPE*/ @media only screen and (min-device-width: 659px) and (max-device-width: 1024px) and (orientation: landscape){ #mainNav{padding-top:50px} .menu .selected a, .menu .selected{font-family:"avenirBlack"!important; color:#000!important;} .content_header_products {background-position:-600px 0px; padding-top:200px;} .footer .socialLink {text-align:right;} .footer .socialLink .icons {text-align:right;margin-left:4px;} .highlight_yellow {padding:40px 0px; margin-bottom:30px;} /* -------------- CONTENTS HEADER --------------------*/ .content_header_aboutus{padding-top:140px; padding-left:40px;} .content_header_technical { padding-top:90px;} .content_header_technical .header{font-size:40px; line-height:40px;} } /*TABLET - PORTRAIT*/ @media only screen and (min-device-width: 659px) and (max-device-width: 1024px) and (orientation: portrait){ #mainNav{padding-top:0px} .headerContainer{position:relative;} .content_header_products {background-position:-820px 0px; padding-top:0px;} .menu .selected a, .menu .selected{font-family:"avenirBlack"!important; color:#fdb514!important;} .footer .socialLink {text-align:left;} .footer .socialLink .icons {text-align:left;margin-left:4px;} .highlight_yellow {padding:40px 0px; margin-bottom:30px;} /* -------------- CONTENTS HEADER --------------------*/ .content_header_aboutus{padding-top:80px; padding-left:20px;} .content_header_technical { padding-top:10px;} }