@charset "utf-8";
.bannerBlk{ display:block;width:100%;}
.bannerBlk .wrapper{ width:100%;}
.bannerBlk ul{ width:100%; overflow: hidden;}
.indexBlk{ display:block;min-height:250px;}

.indexBlk section{ width:100%;}
.productBlk{ margin: 0 0 0.8rem 0; }
.productBlk .wrapper{ width:100%;}
.productBlk ul{ padding: 4px 2px 0 2px;}
.productBlk ul li{ width:25%;text-align: center; float: left;}
.productBlk ul:after, .productBlk ul li:after, .articleBlk ul:after, .articleBlk ul li:after, .visionBlk ul:after{
	content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.productBlk ul li a{
	display:block; 
	padding: 0 2px; 
	position: relative;
}
.productBlk ul li a .img{ 
	position: relative;
    display: block;
	overflow: hidden;
	height: 0;
	padding-bottom: 68.64701%;
}
.productBlk ul li a .img img{
	position: absolute;
	left: 0;
	top: 0;
}
.productBlk ul li a .img img, .articleBlk ul li a .img img{display:block;}
.productBlk ul li a .img:after{
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	content: "";
	width: 100%;
	height: 50%;
	background: rgba(46,46,46,0);
	background: -moz-linear-gradient(top, rgba(46,46,46,0) 0%, rgba(10,10,10,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(46,46,46,0)), color-stop(100%, rgba(10,10,10,1)));
	background: -webkit-linear-gradient(top, rgba(46,46,46,0) 0%, rgba(10,10,10,1) 100%);
	background: -o-linear-gradient(top, rgba(46,46,46,0) 0%, rgba(10,10,10,1) 100%);
	background: -ms-linear-gradient(top, rgba(46,46,46,0) 0%, rgba(10,10,10,1) 100%);
	background: linear-gradient(to bottom, rgba(46,46,46,0) 0%, rgba(10,10,10,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2e2e', endColorstr='#0a0a0a', GradientType=0 );
}
.productBlk ul li a .title{
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
}
.productBlk ul li .title p{
	display:inline-block; 
	text-align: center; 
	color: #ffffff;
	font-size: 1.25rem;
	padding:0 0 1.0rem 0;
	text-shadow: 0px 1px 2px rgba(50, 50, 50, 1);
}
.productBlk ul li a:hover .img:after{
	background: transparent;
	background: -moz-linear-gradient(top, transparent 0%, transparent 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rtransparent), color-stop(100%, transparent));
	background: -webkit-linear-gradient(top, transparent 0%, transparent 100%);
	background: -o-linear-gradient(top, transparent 0%, transparent 100%);
	background: -ms-linear-gradient(top, transparent 0%, transparent 100%);
	background: linear-gradient(to bottom, transparent 0%, transparent 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='transparent', GradientType=0 );
}
.titleBlk{
	width:100%; 
	clear: both;
	padding: 0;/*20171101*/
	margin:0 0 0 0; 
	text-align: center;
}
.index .titleBlk h2{ 
	display:block; 
	width:100%; 
	font-size: 2.125rem; 
	padding: 2rem 0; /*20171101*/
	border-top: 1px solid #e71e0f;
	color: #e71e0f;
	font-weight: normal;
	letter-spacing: 0.0325rem;
}
.index .titleBlk h2:before{ display: none; }
.articleBlk .wrapper{ width:100%;}
.articleBlk ul{ padding: 0 0 35px 0; width: 1500px; margin: 0 auto;}
.articleBlk ul li{ width:33.333%;text-align: center; float: left;}
.articleBlk ul li a{
	display:block;
	position: relative;
	margin: 0 3px;
	border: 1px solid #dddddd;
}
.articleBlk ul li .img{
	display:block;
	position: relative;
	text-align: center;
	height: 0;
	overflow: hidden;
	padding-bottom: 49.09090%;
}
.articleBlk ul li .img img{
	display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
}
.articleBlk ul li .title{
	font-size: 0.875rem;
	line-height: 1.5;
	padding: 8px 8px 0 8px;
	height: 90px;
}
.articleBlk ul li .title p{
	text-align: left;
	margin:0 0 1.0rem 0;
	height: 65px;
	overflow: hidden;
}
.articleBlk ul li a:hover p{ color: #e71e0f; text-decoration: underline;}
.articleBlk ul li a:hover img{ opacity:0.6; }

.visionBlk .wrapper, .videoBlk .wrapper{ width:100%;}
.visionBlk ul{ padding: 0 0 1.25rem 0;}
.visionBlk ul li{ text-align: center;}
.index .visionBlk .titleBlk { padding: 0 0 0 0;background: #f9f9f9;}
.index .visionBlk .titleBlk h2{ border: none;}
.visionBlk ul li { position: relative; }
.visionBlk ul li .img01{
	display: inline-block; 
}
.visionBlk ul li .img01 img{/*20171101 20190918-winbond-mhyin1*/
	max-width: 100%;
	width: 100%;
	/*border: 1px solid #dddddd;*/
}

.visionBlk ul li .img02{ display: none;}
.visionBlk ul li .title{
	position: absolute;
	left: 50%;
	top: 50%;
	color: #ffffff;
	display: block;
	max-width: 768px;
	height: 340px;/*20171101*/
	overflow: hidden;
	margin-left: -384px;
	margin-top: -46px;
	line-height: 1.5;/*20171101*/
}
.visionBlk ul li .title p{ 
	text-shadow: 0px 1px 5px rgba(50, 50, 50, 1);
	letter-spacing: 0.1rem;/*20171101*/
	font-size: 1.1rem;/*20171101*/
}

.index .videoBlk{ background-color: transparent; }
.index .videoBlk ul{ padding: 0 0 2rem 0; }
.index .videoBlk ul li { position: relative; display: block;}
.index .videoBlk .titleBlk { padding: 0 0 0 0;}
.index .videoBlk .titleBlk h2{ border: none;}
.index .videoBlk .blk {
	display: block;
	width: 50%;
	margin: 0 auto;
}
.index .videoBlk .blk .title, 
.index .videoBlk .blk .content{
	display: block;
	clear: both;
	margin: 0 0 1rem 0;/*20171101*/
	text-align: center;
	line-height: 1.8;/*20171101*/
}
.index .videoBlk .blk .content{
    margin-top:1rem;
}
.index .videoBlk .blk .title p, .index .videoBlk .blk .content p{ display: inline-block;max-width: 768px;}
.index .videoBlk .blk .video{ text-align: center; margin-bottom: 0.25rem;}
.index .videoBlk .blk .video img{ display: inline-block;}
.index .videoBlk .blk .modal-title{ text-align: left; }
.index .videoBlk .blk .modal-header, .index .videoBlk .blk .modal-body{ background-color: #1e1e1e;}
.index .videoBlk .blk .modal-header{ border-bottom: 1px solid #1e1e1e; }
.index .videoBlk .blk .modal-body{ max-height: 570px; padding-top: 0;}
.index .videoBlk .blk .modal-dialog .video-container{ padding-top: 0;margin: 0 0 0 0;}
.index .videoBlk .blk .modal-dialog .video-container video{ width: 100%;}

@media (max-width: 1680px){
.articleBlk ul{ width: 1330px;}
}


@media (max-width: 1366px){
.articleBlk ul{ width: 1180px;}
}


@media (max-width: 1200px){
.articleBlk ul{ width:100%; padding:0 0;}
.index .videoBlk .blk{ width: 70%; }
}


@media (max-width: 960px){
.wrapper{ width:100%;}
.indexBlk { width: 100%;}
.indexBlk .wrapper {
    width: auto;
    min-width:inherit;
    padding: 0 10px;
}
.index .titleBlk h2 { font-size: 1.75rem;}
}


@media (max-width: 768px) {
.productBlk ul li a {padding: 0 2px 4px 2px;}
.index .visionBlk .img01{ display: none;}
.index .visionBlk .img02{ display: block; width: 100%;}
.index .visionBlk .img02 img{ width: 100%; min-height: 268px;}
.visionBlk ul li .title {
    width: 90%;
    max-width: inherit;
    height: 190px;
    margin-left: -45%;
    margin-top: -95px;
    display: table;
	line-height: normal;
}
.visionBlk ul li .title p{ 
display: table-cell;
vertical-align: middle;
    letter-spacing: 0rem;
    font-size: 1rem;
}
}


@media (max-width: 600px) {
.productBlk ul li { width: 50%;}
.index .videoBlk .blk{ width: 100%; }
.index .videoBlk .blk .title{ padding: 0 15px; }
}


@media (max-width: 414px) {
.articleBlk ul li { width: 100%; float: none;}
.articleBlk ul li a { margin: 0 3px 3px 3px;}
.visionBlk ul li .title {
    width: 260px;
    /*height: 96px;*/
    margin-left: -130px;
   /* margin-top: -96px;*/
}
}