@charset "utf-8";
/* Table of Contents
----------------------------------
1.  GENERAL
2.  HEADER
3.  CONTENT - HOMEPAGE
4.  FOOTER

FONTS
----------------------------------*/

/*************************
*
*   1. GENERAL
*
*************************/
body {-webkit-font-smoothing: antialiased;padding: 0;margin: 0;}
.content {width:960px;margin: 0 auto;position: relative;}
.clear {clear: both;}
.w480 {width: 480px;float: left;display: inline-block;}
.w240 {width: 240px; float: left;display: inline-block;}
.box_left {float: left;display: inline-block;position: relative;}
.box_right {float: right;display: inline-block;position: relative;}

/*************************
*
*   2. HEADER
*
*************************/
.box_header {padding: 10px 0;background-color: #2ba6e1; width: 100%;float: left; position: relative; font-family: "Geneva";color: #fff;}

/***** Logo *****/
.logo {display: inline-block;float: left;position: relative;margin-left: 45px;}
.logo a {font-size: 16px;letter-spacing: 0px;color: #fff; text-decoration: none;padding-top: 3px;display: block;}

/***** Menu *****/
.menu {display: inline-block;float: left;position: relative;margin-left: 45px;}
.menu ul {list-style: none; margin: 0px;}
.menu ul li {display: inline-block;float: left; position: relative;}
.menu ul li a {color: #fff; text-decoration: none;font-size: 16px; letter-spacing: 0px;display: block;padding: 2px 46px 0;}
.menu ul li a:first-child {padding-left: 0px;}
.menu ul li  a:hover {color: #143779;}

/*************************
*
*   3. CONTENT
*
*************************/

/***** Slider *****/
.slider {display: inline-block;position: relative;height: 655px; width: 100%;}
.slider ul {list-style: none;}
.bxslider {width: 100%;float: left;display: block;margin: 0px;padding: 0px;z-index: 2;}
.bxslider img {width: 100%;}
.bx-viewport {height: 655px !important;}
.bx-viewport img {height: 655px; width: 960px !important}
.txt_slider {text-align: center; position: absolute;top: 222px; left: 0;  right: 0; margin: auto;z-index: 3; }
.txt_slider h1 {font-size: 74px;font-family: "FuturaMedium"; color: #fff;margin: 0px;letter-spacing: 22px;}
.txt_slider h2 {font-size:17px;font-family: "FuturaMedium"; color: #fff;margin: -14px 0 0 0; letter-spacing: 4px;}

/***** Services - Slider *****/
.box_services {width: 640px; margin: 100px auto 0;position: relative;}
.box_circle {font-weight: 600; letter-spacing: 2px; line-height: 16px;text-transform: uppercase; width: 160px;text-align: center; display: inline-block;float: left;font-family: "FuturaMedium"; color: #fff;font-size: 14px;text-decoration: none;}
.box_circle p {margin: 15px 0}
.circle {display: block; width: 82px; height: 82px; border: 2px solid #fff; border-radius: 50%;position: relative;margin: 0 auto}

/***** Box Services Slider *****/
.box_services #ico_service:after {content: ""; background-image: url('../img/service.svg'); background-repeat: no-repeat; position: absolute;top:0; left: 0; right: 0; bottom: 0; margin: auto;width: 50px; height: 43px;}
.box_services #ico_product:after {content: ""; background-image: url('../img/product.svg'); background-repeat: no-repeat;position: absolute;top:0; left: 0; right: 0; bottom: 0; margin: auto;width: 41px; height: 56px;}
.box_services #ico_research:after {content: ""; background-image: url('../img/research.svg');background-repeat: no-repeat; position: absolute;top:0; left: 0; right: 0; bottom: 0; margin: auto;width: 33px; height: 65px;}
.box_services #ico_company:after {content: ""; background-image: url('../img/company.svg');background-repeat: no-repeat; position: absolute;top:0; left: 0; right: 0; bottom: 0; margin: auto;width: 40px; height: 55px;}

/***** Box Service *****/
#service {margin-bottom: 75px; float: left;}
.txt_service {padding: 54px 0px;margin-bottom: 12px; display: block;}
.txt_service p {text-align: justify !important;}
.w480 h1 {text-align: center;font-size:38px;font-family: "FuturaMedium";color: #595757;text-transform: uppercase;position: relative;font-weight: normal; letter-spacing: 7px;}
.w480 h1:after{display: block; position: absolute; bottom: -17px; /* You should change this value to fit your font */ left: 0; right: 0; opacity: .2; /* This is how the text is flipped vertically */transform: scaleY(-1); -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -o-transform: scaleY(-1);}
.txt_service p {width: 360px;}
#service .w480 h1:after {content: 'SERVICE';}
#product .w480 h1:after {content: 'ANALYSIS';}
#research .w480 h1:after {content: 'PROGRESS';}
#company .w480 h1:after {content: 'PHILOSOPHY';}
.ceo .w480 h1:after {content: 'CEO GREETINGS' !important;}
#service p {color: #595757;text-align: center; letter-spacing: 1.5px;margin: 0 auto;font-size: 10px;font-family: "KozGoPro-Regular"; line-height: 22px;}
.img_service {width: 240px;height: 240px;position: relative;}
.img_service div {text-align: center;width: 100%;position: absolute;top:0; bottom: 0;left: 0; right: 0; margin: auto;display: table;height: 240px;}
.img_service h2 {font-family: "FuturaMedium" ; color: #FFF; display: table-cell; vertical-align: middle; text-align: center; font-size: 16px ; font-weight: 600 ; line-height: 28px ; padding-top: 28px; letter-spacing: 2.5px; }
#service .w240 a {margin: 0;float: left;text-decoration: none;color: #595757;display: block;}
.table td {vertical-align: top;padding-bottom: 20px;}
.table td:hover {background-color: #2ba6e1;color: #fff}
.table td:hover a, .table td:hover p, .table td:hover h3 {color: #fff !important;}
#service h3 {font-family: "FuturaMedium" ;font-size: 8px; color: #595757;text-align: center;margin: 22px 0 0; letter-spacing: 2px; font-weight: normal;}
#service .w240 a p {font-family: 'MSGOTHIC';font-size: 13px;line-height: 24px;letter-spacing: 2.5px;width: 220px;}
#service .w240 a span {margin:5px auto 0;font-size: 12px;letter-spacing: 0;line-height: 18px;font-family: 'MSGOTHIC';width: 220px;text-align: center;display: block;}

/***** Box Product *****/
#product {position: relative;float: left;margin-bottom: 75px;}
#product h1 {margin-bottom: 45px;}
td:first-child .w480 p {line-height: 22px; text-align: justify !important;}
#product p {font-family: 'MSGOTHIC';font-size: 11px; letter-spacing: 0.5px; color: #595757;text-align: center;max-width: 410px; margin: 0 auto}
.bg_product {position: relative;margin-bottom: 70px;float: left;}
.bg_product img {z-index: 1;position: relative;}
.bg_product div{text-align: center;width: 100%; display: table;position: absolute;top:0; left: 0; right: 0; bottom: 0; margin: auto;height: 290px; z-index: 2;}
.bg_product h1 {font-family: "FuturaMedium"; color: #fff; font-size: 45px;font-weight: normal; letter-spacing: 9px;padding-top: 18px; vertical-align: middle;display: table-cell; text-transform: uppercase; /*text-shadow: -1px 0 #726d6a, 0 1px #726d6a, 1px 0 #726d6a, 0 -1px #726d6a;*/}
.box_product {width: 430px;display: block;float: left;}
.box_product .img_product {margin-right: 13px;width: 148px;position: relative;display: inline-block;float: left;}
.box_product .img_product img {width: 100%;}
.box_product p {padding: 6px 0 !important;color: #595757; text-align: left !important;font-size: 14px;font-family: "FuturaMedium"; padding: 0px;margin: 0;}
.box_product a {padding-right: 10px;text-decoration: none;display: inline-block;float: left;}
.box_product a:hover {background-color: #2ba6e1;}
.box_product a:hover p {color: #fff !important;}

/***** Box Research *****/
#research {position: relative;float: left;margin-bottom: 75px;}
#research h1 {margin-bottom: 45px;}
#research p {text-align: justify !important;font-family: 'MSGOTHIC';font-size: 11px; letter-spacing: 0.5px; color: #595757;max-width: 410px; margin: 0 auto}
.img_research img {width: auto;}
.img_research {float: left;display: inline-block;position: relative;margin-right: 15px;}
.box_research p {max-width: 385px; text-align: left !important;}

/***** Box Company *****/
#company p {color: #595757;text-align: center; letter-spacing: 1.5px;margin: 0 auto;font-size: 10px;font-family: "KozGoPro-Regular"; line-height: 22px;}
#company {margin-bottom: 75px; float: left;}
#company .w240 a {margin: 0;float: left;text-decoration: none;color: #595757;display: block;}
#company .w240 a:hover {background-color: #2ba6e1;color: #fff }
#company .w240 a:hover p,#company .w240 a:hover h3 {color: #fff;}
#company h3 {font-family: "FuturaMedium" ;font-size: 8px; color: #595757;text-align: center;margin: 22px 0 0; letter-spacing: 2px; font-weight: normal;}
#company .w240 a p {padding-bottom: 12px;font-family: 'MSGOTHIC';font-size: 13px;line-height: 24px;letter-spacing: 2.5px;width: 220px;}
#company .w240 a span {margin:5px auto 0;font-size: 12px;letter-spacing: 0;line-height: 18px;font-family: 'MSGOTHIC';width: 220px;text-align: center;display: block;}
.img_company {width: 240px;height: 240px;position: relative;}
.img_company div {text-align: center;width: 100%; position: absolute;top:0; bottom: 0;left: 0; right: 0; margin: auto;display: table;height: 240px;}
.img_company h2 {font-family: "FuturaMedium" ; color: #FFF; display: table-cell; vertical-align: middle; text-align: center; font-size: 28px ; font-weight: normal; ; line-height: 28px ; padding-top: 28px; letter-spacing: 5px; }
.txt_company {padding: 75px 0px;margin-bottom: 12px; display: block;float: left;}
.txt_company p {width: 400px;text-align: justify !important;}
#company .bg_product {margin-bottom: 0}
.ceo {float: left;}
.outline {margin-top: 60px; width: 760px; float:left;margin-left: 100px; position: relative; }
.w760 {width: 760px; margin: 0 auto; display: block;position: relative;}
.w400 {width: 400px; float: left;display: inline-block;}
.w360 {width: 360px; float: left;display: inline-block;}
.mt35 {margin-top: 35px;}
.outline h2 {padding-bottom: 3px;margin-bottom: 25px;letter-spacing: 3px;font-family: 'MSGOTHIC';font-size: 13px;border-bottom: 1px solid #2CA6E0;display: inline-block;color: #595757;font-weight: normal;}
.outline p {text-align: left !important;}

/***** Box Contact *****/
#contact {margin-bottom: 52px; float: left;}
#contact .w760 h1 {margin: 0px; letter-spacing: 4px;font-family: "FuturaMedium" ;font-size: 17px;color: #717071}
#contact .w760 h2 {padding-bottom: 3px;margin-bottom: 15px;letter-spacing: 3px;font-family: 'MSGOTHIC';font-size: 13px;border-bottom: 1px solid #2CA6E0;display: inline-block;color: #595757;font-weight: normal;}
#contact iframe {margin-bottom: 20px;}
#contact p {color: #595757; letter-spacing: 1.5px;margin: 0px auto 10px;font-size: 10px;font-family: "KozGoPro-Regular"; line-height: 20px;}

/***** Box Recruit *****/
#recruit {float: left;}
#recruit .bg_product { margin-bottom: 65px;}
#recruit h2 {margin-top: 0px;padding-bottom: 3px;margin-bottom: 10px;letter-spacing: 3px;font-family: 'MSGOTHIC';font-size: 13px;border-bottom: 1px solid #2CA6E0;display: inline-block;color: #595757;font-weight: normal;}
#recruit table {width: 100%;color: #595757; letter-spacing: 1.5px;margin: 0px auto 10px;font-size: 10px;font-family: "KozGoPro-Regular";text-align: left;}
#recruit table:first-of-type tr {border-top: 0px dotted #ccc;border-bottom: 1px dotted #ccc;}
#recruit table tr {border-top: 1px dotted #ccc;}
#recruit table tr td {padding: 12px 0; vertical-align: top}
#recruit table tr td:first-child {min-width:85px;}
.table_job tr {border-top: 0px dotted #ccc !important;}
.table_job tr td:first-child {min-width:140px !important;}
.table_job tr td {padding: 5px 0px 5px 0 !important;position: relative; }

#recruit table ul:after {position: absolute;width:25px; height: 1px; border-top:1px dotted #ccc;content: "";top:6px; left: -20px;}
#recruit table ul {list-style: none;margin: 0 0 0 5px; padding: 0;position: relative;}
#recruit table ul:before {position: absolute;width:1px; height: 100%; content: "";top:6px; left: 0;}
#recruit table ul li {position: relative;padding-left: 35px;border-left:1px dotted #ccc;}
#recruit table ul li:first-child, #recruit table ul li:last-child {border: 0px;}
#recruit table ul li:first-child:after {position: absolute;width:1px; height: 100%; border-left:1px dotted #ccc;content: "";top:6px; left: 0;}
#recruit table ul li:last-child:after {position: absolute;width:1px; height: 6px; border-left:1px dotted #ccc;content: "";top:0px; left: 0;}
#recruit table ul li:before {position: absolute;width:25px; height: 1px; border-top:1px dotted #ccc;content: "";top:6px; left: 0;}

/*************************
*
*   4. FOOTER
*
*************************/

/***** Footer *****/
.menu_footer {padding-top: 22px;background-color: #2ba6e1;float: left;display: block;position: relative;width: 100%;margin-top: 16px;padding-bottom: 16px;}
.menu_footer ul {list-style: none;padding: 0px 0 0 48px;}
.menu_footer ul li {display: inline-block;float: left;position: relative;}
.menu_footer ul li a {letter-spacing: 4px;display: block; font-size: 13px;font-family: "FuturaMedium"; color: #fff; text-decoration: none;font-weight: 500;padding: 5px 57px 5px 0;}
.box_copyright {background-color: #3faee3;width: 100%; float: left;position: relative;}
.box_copyright p {font-size: 13px;font-family: "FuturaMedium"; color: #fff;  float: right;font-weight: 500;padding: 12px 38px 10px;margin: 0; letter-spacing: 2px;}

/***** Go top *****/
#go_top { color: #595757; text-align: center; font-size: 12px;font-weight: 500; font-family: "FuturaMedium";   background-color: #fff;cursor: pointer; position: absolute;width: 48px; height: 48px; border-radius:50%;top:-21px;left: 0; right: 0; margin: auto;}
#go_top span {padding-top: 24px; display: block; letter-spacing: 2px;}
#go_top:after {left: 17px; top: 7px;content: ""; background-image: url('../img/arrow.png'); width: 10px; height: 8px; background-repeat: no-repeat;position: absolute;right: 0px;}

/*************************
*
*   FONTS
*
*************************/
@font-face {
  font-family: 'FuturaMedium';
  src: url('fonts/FuturaMedium.eot'); /* IE9 Compat Modes */
  src: url('fonts/FuturaMedium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/FuturaMedium.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/FuturaMedium.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/FuturaMedium.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/FuturaMedium.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'KozGoPro-Regular';
  src: url('fonts/KozGoPro-Regular.eot'); /* IE9 Compat Modes */
  src: url('fonts/KozGoPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/KozGoPro-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/KozGoPro-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/KozGoPro-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/KozGoPro-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'MSGOTHIC';
  src: url('fonts/MSGOTHIC.eot'); /* IE9 Compat Modes */
  src: url('fonts/MSGOTHIC.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/MSGOTHIC.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/MSGOTHIC.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/MSGOTHIC.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/MSGOTHIC.svg#svgFontName') format('svg'); /* Legacy iOS */
}

@font-face {
  font-family: 'Geneva';
  src: url('fonts/Geneva.eot'); /* IE9 Compat Modes */
  src: url('fonts/Geneva.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/Geneva.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/Geneva.woff') format('woff'), /* Pretty Modern Browsers */
       url('fonts/Geneva.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('fonts/Geneva.svg#svgFontName') format('svg'); /* Legacy iOS */
}