@charset "UTF-8";
.area02 { width: 1200px; margin:0 auto; padding:200px 0;margin-bottom:80px; display: table; text-align:center}
.area02 > ul {display: inline-block; position: relative;}
.area02 > ul:after {content:''; display:block; clear:both;}
.area02 > ul > li div.circle {display: table; width: 150px; height: 165px; background-image: url(../img/about/item.png);background-size: cover; text-align:center;}
.area02 > ul > li li {width:auto;}
.area02 > ul > li.item {position:absolute;}
.area02 > ul > li.item1 {top:-68px;left:calc(52%);}
.area02 > ul > li.item2 {top:250px;left:calc(52%);}
.area02 > ul > li.item3 {top:95px;left:calc(6%);}
.area02 > ul > li p { display: table-cell; vertical-align: middle; color:#fff; font-size:32px; line-height:44px;font-weight:bold; }
.area02 > ul > li p span {font-weight:normal;}
.area02 > ul > li.logo {margin:0px 120px;width:350px;height:350px;background-image: url(../img/about/Logo.png);background-size: cover;padding:20px;text-align:center;}
.area02 > ul > li.logo div.circle { position:relative;border:60px solid #FFF;width:100%;height:100%;}
.area02 > ul > li div.desc {position:absolute;width:450px;text-align:left;top:20px;left:160px;}
.area02 > ul > li div.desc h4 {margin:1em;font-size:26px;}
.area02 > ul > li div.desc ul {margin-left:10px;}
.area02 > ul > li div.desc li {text-indent:-7px;margin-left:7px;color:#999;margin-bottom:.2em;}
.area02 > ul > li div.desc li:before {content:' - ';display:inline-block;}
.area02 > ul > li.item3 div.desc {left:-450px;text-align:left;}
 
@media only screen and (max-width:1366px) {
	.area02 {zoom:.8;}
}

@media only screen and (max-width:1200px) {
	.area02 {zoom:.7;}
}

@media only screen and (max-width:980px) {
	.area02 { width: 100%; padding:0;margin:0;}
	.area02 > ul > li.logo {margin:0px 280px;width:300px;height:300px;padding:10px;background-size: 300px 300px;text-align:center;}
	.area02 > ul > li.logo div.circle {border-width:20px;}
	.area02 > ul > li p { font-size:1.8em;}
	.area02 > ul > li.item {position:relative;top:auto;left:auto;right:auto;bottom:auto;margin-top:20px;}
	.area02 > ul > li.item div.circle {float:left;width:140px;height:153px;background-size: 140px 153px;}
	.area02 > ul > li.item div.desc {float:left;margin-left:20px;margin-top:24px;position:relative;text-align:left;top:auto;left:auto;right:auto;width:calc(100% - 200px);}
	.area02 > ul > li.item:after {content:'';display:table;clear:both;}
	.area02 > ul > li.item div.desc h4 {font-size:1.8em;}
}

@media only screen and (max-width:480px) {
	.area02 { width: 100%; padding:0;margin:0;}
	.area02 > ul > li.logo {margin:0px 120px;width:240px;height:240px;padding:10px;background-size: 240px 240px;}
	.area02 > ul > li.logo div.circle {border-width:20px;}
	.area02 > ul > li.item div.circle {float:none;margin:0 auto;}
	.area02 > ul > li.item div.desc {float:none;width:auto;margin-bottom:40px;text-align:center;margin-left:0;}
}

.ProductsItem {
  width: 100%;
  border: 1px solid;
  border-color:#bebebe;
  margin:10px;
  padding:10px;
  background-color:#fff;
}

.TopSpace {
  width: 100%;
  margin:50px;
  padding:0px;
  background-color:#fff;
}

.ProductsMenu {
    display: none;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: 0 0;
	margin-bottom: -95px;
}

.indexMenu {
  display: none;
}

@media only screen and (max-width: 991px) {
  .ProductsMenu {
    display: block;
  }
  .DivisionPic {
    display: none;
  }
  .indexMenu {
    display: block;
  }
}

.ProductsMenu ul {
    position: relative;
/*    float: left;
    top: -20px;    */
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
	width: 50%;
    min-width: 420px;
}

.ProductsMenu ul li {
    display: inline-block;
	width: 30%;
}

.ProductsMenu ul li a:hover {
    background-image: none;
    background-color: transparent;
}

.ProductsMenu ul li a {
    padding: 0;
    height: auto;
    display: block;
	width: 100%;
    max-width: 165px;
}

.ProductsMenu ul li a .right {
    width: auto;
    float: none!important;
}

.ProductsMenu ul li a .group {
    position: relative;
    height: 100%;
}

.ProductsMenu ul li a span {
    display: block;
}

.ProductsMenu ul li a .right .info {
    left: 0;
    right: -105px;
}

.ProductsMenu ul li a .right .info {
    position: relative;
    top: auto;
    transform: none;
/*    width: 165px;    */
    height: 165px;
    padding: 10px;
    border-radius: 5px;
/*    border-radius: 50%;    */
    overflow: hidden;
    z-index: 2;
/*    background-color: #FFFFFF;    */
}

.ProductsMenu ul li a .right .info:hover {
    background-color: #C1EBFD;
}

.ProductsMenu .info .icon {
    width: 100%;
    height: 100%;
    border-radius: 5px;
/*    border-radius: 50%;    */
    animation-name: rotateIn;
}

.ProductsMenu .info .icon .icon-group {
    position: relative;
}

.ProductsMenu .info .icon .icon-group .title h3 {
    color: #fff;
    text-align: center;
    font-size: 12px;
	padding-top: 10px;
    padding-bottom: 0px;
}

.vcenter {
    top: 50%;
    -webkit-transform: translateY(-50%);
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.ProductsMenu dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.ProductsMenu list-unstyled {
    padding-left: 0;
    list-style: none;
}

.ANameP {
    position: relative;
    top: -150px;
    display: block;
    visibility: hidden;
}
