﻿@charset "utf-8";

/* **************************************************

Name: style.css

***************************************************** */


/* ==================================================

[s5] Breadcrumb Trail
[-] Content Area
[-] Branding Image
[cc] Column
[-] section
[-] Category Banner
[-] for - 994px
[-] for - 767px
[-] for print

===================================================== */


/* [s5] Breadcrumb Trail
=========================================================================================== */

#TopicPath ul {
    padding-bottom: 20px;
}


/* [-] Content Area
=========================================================================================== */

#Contents {
	position: relative;
}


/* [-] Branding Image
=========================================================================================== */

.SectionBgImg {
	position: relative;
	top: 0;
	clear: both;
	background-color: #fff;
	background-position: 50% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
.SectionBgImg.posTop {
	background-position: 50% 0;
}
.SectionBgImg.posMid {
	background-position: 50% 50%;
}

.SectionBgImg .PageTitleStyle1 {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0 0 390px;
	background-color: rgba( 0, 0, 0, 0.50 );
}

.SectionBgImg .PageTitleStyle2 {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0 0 390px;
	background-color: rgba( 0, 0, 0, 0 );
}

.SectionBgImg .PageTitleStyle1 h1,
.SectionBgImg .PageTitleStyle2 h1 {
	max-width: 935px;
	margin: 0 auto;
	padding: 125px 15px 0;
	color: #FFF;
	text-align: center;
}

.SectionBgImg .PageTitleStyle2 .ST {
	max-width: 375px;
	margin: 0 auto;
	padding: 50px 15px 50px;
	color: #FFF;
	text-align: center;
	background: #111;
}

.SectionBgImg .PageTitleStyle2 .ST-2019 {
/*	max-width: 375px;*/
	margin: 0 auto;
	padding: 10px 15px 0px;
	color: #FFF;
	text-align: center;
/*	background: #001856;*/
}

.SectionBgImg .PageTitleStyle2 h1 span {
	display: block;
	margin-top: 0.3em;
	font-size: 110%;
	line-height: 120%;
}

.ST-Caption-Bg {
	background: #EEE;
	padding: 10px;
	margin-top: -20px;
}

.CS_ST_Wrap {
	position: relative;
	max-width: 660px;
	margin: 0 auto;
	padding: 30px 0 ;
}

/* [cc] Column - For 2 columns
=========================================================================================== */

.CS_LeftCol {
	margin: 0;
}
.CS_RightCol {
	width: 465px;
	margin-left: 25px;
}

.ImgLeftAdjust.CS_LeftCol {
	margin-right: 25px;
	width: 475px;
}

.topAlignment {
	margin-top: -8.5em !important;
}


/* [c5] Image
=========================================================================================== */
.ImgOnlyStyle { margin-bottom: 15px; }



/* [-] section
=========================================================================================== */

.Grid4 > .CS_Body {
	background-color: #eee;
	padding-bottom: 30px;
	margin-bottom: 15px;
}
.Grid4 > .CS_Body > .Inner {
	position: relative;
	top: -125px;
	max-width: 660px;
	margin: 0 auto -125px auto;
	padding: 30px 30px 0 30px;
	background-color: #fff;
}
.Grid4 > .CS_Body h2.CS_Style {
	background: none;
	padding: 0;
	margin: 0 0 10px;
	font-size: 150%;
	font-weight: bold;
	line-height: 130%;
}

.Grid4 > .CS_Body .Section {
	padding-bottom: 20px;
}
.Grid4 > .CS_Body .TextStyle1  {
	line-height: 180%;
}


/*--- For 2 columns ---*/
.CS_RightCol .CS_Body,
.ImgLeftAdjust.CS_LeftCol + .CS_Body {
}
.CS_RightCol .CS_Body .PageTitleStyle1,
.ImgLeftAdjust.CS_LeftCol + .CS_Body .PageTitleStyle1 {
	border-left: #D40115 solid 9px;
	padding: 12px 0 12px 18px;
}
.ImgLeftAdjust.CS_LeftCol + .CS_Body .PageTitleStyle1 {
	margin-left: 500px;
}

.CS_RightCol .CS_Body h2.CS_Style,
.ImgLeftAdjust.CS_LeftCol + .CS_Body h2.CS_Style {
	background: none;
	padding: 0;
	margin: 0 0 10px;
	font-size: 150%;
	font-weight: bold;
	line-height: 130%;
	color: #D20013;
}

.CS_RightCol .CS_Body .Section,
.ImgLeftAdjust.CS_LeftCol + .CS_Body .Section {
	padding-bottom: 20px;
}

.CS_RightCol .CS_Body .ReadStatement,
.ImgLeftAdjust.CS_LeftCol + .CS_Body .ReadStatement {
	color: #D30014;
	font-weight: bold;
}

.CS_RightCol .CS_Body .TextStyle1,
.ImgLeftAdjust.CS_LeftCol + .CS_Body .TextStyle1 {
	line-height: 180%;
}

.CS_LeftCol .ImgOnlyStyle,
.CS_LeftCol .MovieColumn {
	margin-bottom: 0;
}
.CS_LeftCol .ImgOnlyStyle img {
	margin-bottom: 0;
}


/* [] Link List
=========================================================================================== */

.CS_ContactStyle .TextStyle1 + .LinkListStyle1 {
	margin-top: -15px;
}


/* [-] PlayButton - For 2 columns
=========================================================================================== */
.CS_PlayImg {
	display: block;
	position: relative;
}

#CS_Play {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-73px, -61px);
	-webkit-transform: translate(-73px, -61px);
	-ms-transform: translate(-73px, -61px);
}

#CS_Play .playText {
	margin-top: .8em;
	color: #fff;
	font-size: 100%;
	text-align: center;
	text-shadow: 0 0 2px #000;
	-moz-text-shadow: 0 0 2px #000;
	-webkit-text-shadow: 0 0 2px #000;
}

#CS_Play .playButton {
	display: block;
	width: 3.5em;
	height: 3em;
	margin: 0 auto;
	padding: 1.5em 1.75em;
	background-color: #e60027;
	text-align: center;
}

#CS_Play img {
	width: 3em;
	height: 3em !important;
}


/* [-] Panel Menu
=========================================================================================== */

#SibCSList {
	margin-bottom: 15px;
}


/* [-] Category Banner
=========================================================================================== */

.current_category a {
	display: block;
	margin: 0 0 10px 0;
	color: #fff;
	box-sizing: border-box;
}
.current_category a.cat_robotics {
	color: #000;
}
.current_category a:hover {
	opacity: 0.8;
}
.current_category img{
	width: 100%;
}

.current_category .category_banner{
	padding: 0;
	position: relative;
	overflow: hidden;
}

.current_category .cat_item {
	position: absolute;
	top: 13%;
	left: 3.9%;
}
.current_category .cat_security .cat_item {}
.current_category .cat_analytics .cat_item {}
.current_category .cat_ai .cat_item {}
.current_category .cat_robotics .cat_item {}

.current_category .cat_item .title {
	display: table;
	margin: 0 0 14px 0;
}
.current_category .cat_item .title img,
.current_category .cat_item .title span {
	display: table-cell;
	vertical-align: bottom;

}
.current_category .cat_item .title img {
	width: 47px !important;
	margin-right: 12px;
}
.current_category .cat_item .title span {
	font-size: 180%;
	line-height: 150%;
}
.current_category .cat_item .text {
	font-size: 100%;
	line-height: 130%;
}


.CS_Banner {
	margin-top: 20px;
}

.CS_Banner02 {
	margin-top: 15px;
}

br.brSP {
	display:none;
}

/* [-] for - 994px
=========================================================================================== */

@media screen and (max-width: 994px) {

.JS .SectionBgImg {
	margin: 0 -15px;
	width: auto;
}
.JS .Grid4 > .CS_Body {
	margin: 0 -15px;
}

.JS .ImgOnlyStyle img {
	width: 100%;
	height: auto;
}

/*--- For 2 columns ---*/

.JS .ImgLeftAdjust.CS_LeftCol {
	width: 48.2%;
}
.JS .ImgLeftAdjust + .CS_Body .PageTitleStyle1 {
	margin-left: 51.8%;
}


/* --- Category Banner --- */

.JS .current_category .cat_item {
	top: 8%;
}
.JS .current_category .cat_item .title {
	margin: 0 0 10px 0;
}
.JS .current_category .cat_item .title img {
	width: 80% !important;
	height: auto;
	margin-right: 10px;
}
.JS .current_category .cat_item .title span {
	font-size: 160%;
}
.JS .current_category .cat_item .text {
	font-size: 90%;
}

}



/* [-] for - 767px
=========================================================================================== */

@media screen and (max-width: 768px) {

.JS .SectionBgImg .PageTitleStyle1 {
	padding-bottom: 280px;
}
	
.JS .SectionBgImg .PageTitleStyle2 {
	padding-bottom: 0px;
	padding-top: 250px;
	margin-bottom:  0px;
}
	
.JS .SectionBgImg .PageTitleStyle1 h1 {
	padding-top: 0;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
	
.JS .SectionBgImg .PageTitleStyle2 h1 {
	max-width: none;
	bottom: 0px;
}
    
.JS .SectionBgImg .PageTitleStyle2 h1.ST-2019 {
	/*	max-width: none;
	bottom: 10px;
	padding: 20px 0;*/
	padding-top: 0;
	position: relative;
	top: -120px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

	
.SectionBgImg .PageTitleStyle2 .ST {
	padding: 10px 0;
	font-size: 140%;
}

.SectionBgImg .PageTitleStyle2 .ST-2019 {
	padding: 10px 0;
	font-size: 140%;
}

.SectionBgImg .PageTitleStyle2 .ST-2019 img {
    width: 30%;;
}

    
.SectionBgImg .PageTitleStyle2 span {
	margin-top: 100px;
}

.JS .Grid4 > .CS_Body {
	position: relative;
	margin: 0;
	padding: 0;
	background-color: #fff;
}
.JS .Grid4 > .CS_Body > .Inner {
	top: 0;
	max-width: none;
	width: auto;
	margin: 0;
	padding: 30px 0 0;
}

/*--- For 2 columns ---*/

.JS .CS_LeftCol .ImgOnlyStyle,
.JS .CS_LeftCol .MovieColumn {
	margin-bottom: 15px;
}
.JS .ImgLeftAdjust.CS_LeftCol {
	width: 100%;
}
.JS .ImgLeftAdjust.CS_LeftCol + .CS_Body .PageTitleStyle1 {
	margin-left: 0;
}

.JS .topAlignment {
	margin-top: 0 !important;
}

/* --- Category Banner --- */

.JS .current_category .cat_item {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.JS .current_category .cat_item .text {
	display: none;
}
	
.JS .SectionBgImg .PageTitleStyle1 h1 {
		max-width: auto;
		width: 100%;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
	}

	/*br*/
br.brPC {
	display:none;
}
br.brSP {
	display:block;
}

}

/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {

.JS .SectionBgImg .PageTitleStyle2 {
	padding-bottom: 0px;
	padding-top: 164px;
	margin-bottom: 0px;
}

.SectionBgImg .PageTitleStyle2 .ST {
	font-size: 110%;
}
    
.JS .SectionBgImg .PageTitleStyle2 h1.ST-2019 {
	/*	max-width: none;
	bottom: 10px;
	padding: 20px 0;*/
	padding-top: 0;
	position: relative;
	top: -70px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
    font-size: 86%;
}
	
}


/* for - 399px
=========================================================================================== */

@media screen and (max-width: 399px) {

/*--- For 2 columns ---*/

.JS .CS_RightCol .CS_Body h1 br,
.JS .CS_RightCol .CS_Body h2 br,
.JS .ImgLeftAdjust.CS_LeftCol + .CS_Body h1 br
.JS .ImgLeftAdjust.CS_LeftCol + .CS_Body h2 br {
	display: none;
}
	
.JS .SectionBgImg .PageTitleStyle2 {
	padding-bottom: 0px;
	padding-top: 130px;
	margin-bottom: 0px;
}
	
.SectionBgImg .PageTitleStyle2 .ST {
	padding: 7px;
	font-size: 110%;
	font-weight: normal;
}

/* --- Category Banner --- */

.JS .current_category .cat_item {
	-webkit-transform: translateY(-40%);
	-ms-transform: translateY(-40%);
	transform: translateY(-40%);
}
.JS .current_category .cat_item .title img {
	width: 70% !important;
	margin-right: -5px;
}
.JS .current_category .cat_item .title span {
	font-size: 120%;
}


}

/* for - 320px
=========================================================================================== */

@media screen and (max-width: 320px) {
	
	.JS .SectionBgImg .PageTitleStyle2 {
	padding-bottom: 0px;
/*	padding-top: 114px;*/
	margin-bottom: 0px;
}

}

/* [-] for print
=========================================================================================== */

@media print {

}