@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 .PageTitleStyle1 h1 {
	max-width: 935px;
	margin: 0 auto;
	padding: 125px 15px 0;
	color: #FFF;
	text-align: center;
}


/* [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; }

.imgList {
	margin: 0 0 15px -15px;
}

.imgList li {
	float: left;
	padding: 0 0 0 15px;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

.imgList li {
	width: 50%;
}
.imgList li img {
	max-width: 100%;
	height: auto;
}

.imgBorder {
	border: 1px solid #000;
}

.imgList li.three {
		width: 33.3%;
	
}

	/* ------ Base Settings ------ */

.section_content img {
		max-width: 100%;
		height: auto;
	}


/* [-] 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%;

	text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
}
.current_category .cat_security .text { max-width: 440px; }
.current_category .cat_analytics .text { max-width: 520px; }
.current_category .cat_ai .text {}
.current_category .cat_robotics .text { text-shadow: none; }

/*CN only*/

.section_content{
	width:100%;
	height:auto;
	margin-top:10px;
	color:#191919;
	overflow:hidden;	
	}

.LastItems{
	float:left !important;
	margin:0px 15px 0px 0px;	
	}

.portrait_introduce{
	color:#3E3A39;
	font-family:"方正兰亭粗黑_GB";
/*	font-style:oblique;*/
	letter-spacing:1px;
	font-size: 90%;
	}

.portrait_title{
	width:80%;
	height:auto;
	border-top:1px solid #AEAEAF;
	margin:20px auto 10px auto;
	overflow:hidden;
	}

.people_name{
	display:block;
	width:100%;
	height:auto;
	font-size:90%;
	color:#000000;
	text-align:center;
	font-family:"微软雅黑";
	margin-top:20px;
	overflow:hidden;
	}

.people_company{
	display:block;
	width:100%;
	height:auto;
	font-size:90%;
	color:#000000;
	text-align:center;
	font-family:"微软雅黑";
	overflow:hidden;	
	}

.video_box{
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;	
	}
.video_1{
	width:100%;
    height:auto;
	font-size:0px;
	overflow:hidden;
	}
#video_1 img{
	width:100%;
	height:auto;
	border:0px;	
	}
.ModaCover{
	display:none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 100;	
	opacity: 0.8;
	}
#ModalAboutYouKu{
	display:none;
	position: absolute;
    padding: 50px;
    z-index: 1102;
	}
.ModalInner {
    position: relative;
    background-color: #000;
    box-shadow: 0 0 35px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
    -o-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
    -ms-box-shadow: 0 0 35px rgba(0, 0, 0, .4);
}
#ModalAboutYouKu iframe{
	width:100%;	
	}
.Title {
    height: 50px;
    background-color: #f2f2f2;
    overflow: hidden;
}
.Title p {
    display: table-cell;
    height: 50px;
    padding: 0 80px 0 20px;
    vertical-align: middle;
    font-size: 90%;
    font-weight: bold;
    line-height: 130%;
    color: #575757;
}
.BtnClose {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 130%;
}
.BtnClose a{
    color: #fff;
    background-color: #e60027;
    text-decoration: none;
	display: table-cell;
    min-width: 50px;
    height: 30px;
    padding: 20px 5px 0;
    font-size: 76%;
    text-align: center;
    background-image: url(/-/media/project/hitachi/sib/image/cn/r1/icon/icon_close_hd.gif);
    background-image/*\**/: url(/-/media/project/hitachi/sib/image/cn/r1/icon/icon_close.gif)\9;
    background-position: center 7px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    -moz-background-size: 16px 16px;
    -webkit-background-size: 16px 16px;
    -o-background-size: 16px 16px;
    -ms-background-size: 16px 16px;
    vertical-align: middle;
	}

.BtnClose a:hover{
	background-color: #b1000e;
	}

.video_play_bn{
	display:block;
	width:10%;
	height:auto;
	position:absolute;
	top:45%;
	left:45%;
	font-size:0px;
	z-index:10;
	overflow:hidden;
	}

.video_play_bn img{
	width:100%;
	height:auto;
	border:0px;	
	}

.video_fx{
	display: block;
    width: 3%;
    height: auto;
    position: absolute;
    top: 3%;
    right: 3%;
    font-size: 0px;
	z-index:10;
    overflow: hidden;
	}

.video_fx img{
	width:100%;
	height:auto;
	border:0px;	
	}

.video_introduce{
	width:100%;
	font-size:90%;
	height:auto;
/*	font-style:oblique;*/
	color:#000000;
	font-family:"微软雅黑";
	margin-bottom:10px;
	overflow:hidden;
	}

.JS .Grid4 .Column2,
.JS .Grid4 .Column3{
	overflow:hidden;	
	width: 47.5%;
	}

.session_2_tit{
	width:100%;
	height:auto;
	padding: 15px 0px 0px 0px !important;
	overflow:hidden;	
	}
.case_font_content{
	float:left;
	width:300px;
	height:auto;
	margin-right:15px;
	overflow:hidden;	
	}
.case_font_content p{
	line-height:20px;
	color:#000000;
	}
.case_video_box{
	width:650px;
	height:auto;
	overflow:hidden;	
	}
.case_video{
	width:100%;
	height:auto;
	position:relative;
	overflow:hidden;	
	}
	
.case_video img{
	width:100%;
	height:auto;
	}

.JS .Grid4 .Column2{
	float: left !important;
	margin: 0px 0px 10px 0px !important;
	overflow:hidden;
	padding: 0 0 0 15px;
	}

.JS .Grid4 .Column3{
	float: right !important;
	margin: 0px 0px 10px 0px !important;
	overflow:hidden;
	padding: 0 0px 0 0px;
	}

.JS .Grid4 .Column3.FirstItem{
	float: left !important;
	}	


.LastItems{
	padding: 0px 15px 0px 0px !important;
	margin:0px 15px 0px 0px !important;;	
	}

.LastItems2{
	padding: 0px 0px 0px 15px !important;
	margin:0px 0px 0px 15px !important;;	
	}

.case_font_content{
	float:left;
	width:100%;
	height:auto;
	margin-right:0px;
	margin-bottom:10px;
	overflow:hidden;	
	}

/* [-] 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%;
}
	
#ModalAboutYouKu{
    padding:50px 0px;
	}
.case_video_box{
	width:100%;
	height:auto;
	overflow:hidden;	
	}

}



/* [-] for - 767px
=========================================================================================== */

@media screen and (max-width: 768px) {

.JS .SectionBgImg .PageTitleStyle1 {
	padding-bottom: 280px;
}
.JS .SectionBgImg .PageTitleStyle1 h1 {
	padding-top: 0;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.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 .Grid4 .Column2,
.JS .Grid4 .Column3{
	width:100%;
	float: none;
	}

	.video_play_bn{
	display:block;
	width:12%;
	height:auto;
	position:absolute;
	top:44%;
	left:44%;
	font-size:0px;
	z-index:10;
	overflow:hidden;
	}
.video_fx{
	display: block;
    width: 5%;
    height: auto;
    position: absolute;
    top: 3%;
    right: 3%;
    font-size: 0px;
	z-index:10;
    overflow: hidden;
	}
.LastItems{
	padding:0px !important;
	margin:0px !important;;	
	}
#ModalAboutYouKu{
    padding:50px 0px;
	}

}

/* for - 579px
=========================================================================================== */

@media screen and (max-width: 579px) {
	
.JS .imgList {
	margin-left: 0;
}
.JS .imgList li {
	float: none;
	padding: 0;
	text-align: center;
}
.JS .imgList li {
	width: 100% !important;
}

.video_play_bn{
	display:block;
	width:16%;
	height:auto;
	position:absolute;
	top:42%;
	left:42%;
	font-size:0px;
	z-index:10;
	overflow:hidden;
	}
#ModalAboutYouKu{
    padding:50px 0px;
	}

}


/* 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;
}

/* --- 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 print
=========================================================================================== */

@media print {

}