#pageContent > div {}

#page {margin-top:0px;overflow:hidden}
#sideBar {overflow: hidden;margin-top:20px}
#sideBar > div,#sideBar > ul {border: solid 1px #DDD;margin-bottom:10px}
#sideBar .image img {width:100%}
#sideBar .name {font-size:20px;line-height:24px;font-weight: 700;padding: 8px 12px 4px;}
#sideBar .jobTitle {font-size: 16px;line-height: 21px;padding: 3px 12px 0px;font-weight: 400;color: #666;}
#sideBar .information {padding: 0px 32px 30px;font-size:14px;}
#sideBar .buttons {    padding: 12px;}
#sideBar .buttons .button {    min-width: 100px;display:block;}
#sideBar .categories {}
#sideBar .categories .category {border-top:solid 1px #CCC;}
#sideBar .categories .category:first-child {border-top:0px}
#sideBar .categories .category a .name {font-size:18px;color:#000}
#sideBar .categories .category.active a .name {color:red;}


#categories {list-style:none;}
#categories li {padding:0px;border-top:solid 1px #DDD}
#categories li:first-child {border-top:0px}
#categories li a {display: block;padding: 5px 12px;border: solid 0px #CCC;background-color:#FFF;margin-bottom: 0px;border-radius: 0px;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-ms-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
#categories li .name {    padding: 0px;font-size: 16px;font-weight: 700;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-ms-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;color:#000}
#categories li .total {    font-size: 12px;color: #888;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-ms-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;}
#categories li:hover a {background: #c61d24;border-color:#c61d24;cursor:pointer;}
#categories li:hover .name,#categories li:hover .total {color:#FFF}


.downloadFile {margin-top:20px}

.postContent img {width: 100%}

#products {}
#products > ul {list-style: none;margin: 0px;}
#products ul li.product > div {border: solid 1px #DDD;margin-top:20px;}
#products ul li.product .info, #products ul li.product .info > div {    height: 100%;}
#products ul li.product .info > div + div{    padding-left: 0px;}

#products ul li.product img {    height: 176px;}
#products ul li.product .name {font-size: 20px;font-weight: 500;color: #333;}
#products ul li.product .name:hover {text-decoration: underline}
#products ul li.product .description {    font-weight: 400;font-size: 14px;padding-bottom: 20px;}
#products ul li.product .links {}
#products ul li.product .links a {font-size: 14px;margin-left: 16px;font-weight: 400;text-decoration: underline;color: #666;}
#products ul li.product .links a:hover {color:#000}
#products ul li.product .specs {    list-style: none;margin: 0px;background: #EEE;padding: 10px;    height: 100%;}
#products ul li.product .specs .spec {    border-top: dashed 1px #999;margin-top: 6px;padding-top: 10px;}
#products ul li.product .specs .spec:first-child {border-top:0px;margin-top:0px}
#products ul li.product .specs .specName {    font-weight: 300;    font-size: 14px;}
#products ul li.product .specs .specValue {font-weight: 600;    font-size: 14px;}
#products .product a.img {display:block;text-align: center;    padding: 24px 24px 0px;}
#products .product a.img img {width:100%;height:auto}
#products .product .info {    padding: 0px 24px;}
#products .product .info path {fill:#000}
#products .product .info svg {    margin: 14px 0px;}

.specGroups {list-style:none;margin:0px;margin-top:25px !important}
.specGroups h4 {font-size: 20px;border-bottom: solid 2px #000;padding-bottom: 5px;    background: #FFF;}
.specGroups .specs {list-style:none;margin:0px;    }
.specGroups .specs .spec > div {border-top:dashed 1px #CCC;}
.specGroups .specs .spec:first-child > div {border-top:0px}
.specGroups .specs .spec .key {font-weight:300;    padding: 10px 0px;}
.specGroups .specs .spec .value {font-weight:700;    padding: 10px 0px;}
.specGroup {padding: 20px;border: solid 1px #DDD;border-radius: 10px;}
.specGroups:first-child {margin-top:0px}


#threeD {    margin-top: -230px;margin-bottom:50px}
#threeD > div {position:relative;overflow:hidden;}
#threeD .info {height:700px;}
#threeD .info > div {height:100%}
#threeD .title {    font-size: 46px;font-weight: 400;color: #000;    line-height: 50px;margin-bottom:20px}
#threeD .description {    font-size: 20px;font-weight: 300;color: #000;margin-bottom:20px}
#threeDViewPort {position:relative;background-size: contain;background-position: center;background-repeat: no-repeat;width: 100% !important;height:100% !important;right:0%;top:0px;z-index:1;border-radius: 10px;overflow: hidden;}
#turnIcon {position: absolute;z-index: 2;right: 0%;top: 40%;width:100%;height:200px;text-align: center;}
img.hero {margin-bottom:80px;width:100%}


#product {    margin-top: -28px;}
#product ul {list-style:none;margin:0px;}
#product ul li {}
#product ul li .header {    background: #FFF;padding-top:38px;z-index:3}
#product ul li .header h3 {    font-size: 30px;}
#product ul li .header .action {    font-size: 24px;margin: 4px 16px;cursor:pointer;color:#999}
#product ul li .header .action:hover {color:#000;}
#product ul li .header .action span {display:none;}
#product ul li .header .action span.on {display:block;}
#product ul li.active .header .action span.off {display:block;}
#product ul li.active .header .action span.on {display:none;}
#product ul li .content {    padding: 0px 0px 30px;}
#product ul li .content .detail {font-family: 'Open Sans', arial, sans-serif !important;}
#product ul li .content .detail b {}
#product ul li .content .detail p {font-weight:400}


#news {margin-top:10px}
#news .swiper-slide {    width: 350px;margin-right: 20px;background: #f6f6f6;border: solid 1px #EEE;border-radius: 6px;    box-shadow: 0 0 0 rgb(0 0 0 / 0);}
#news .swiper-slide:hover {    box-shadow: 1px 1px 16px rgb(0 0 0 / 16%)!important;}
#news .image {height:193px;background: #FFF}
#news .description p {    font-weight: 500;color: #000;padding: 0px 20px;height:90px}
#news .swiper-slide .description p {    font-weight: 500;color: #000;padding: 0px 20px;}
#news .category {    margin: 10px 20px 0px;}
#news .buttons {margin:0px 20px 17px}



.items {margin-left:-18px;margin-top:20px}
.items .item {}
.items .item > div {border:solid 1px #DDD;background: #EEE;padding:15px 17px;    border-radius: 8px;margin-bottom:20px}
.items .item .name {    font-size: 18px;font-weight: 700;}
.items .item .description {    font-size: 12px;font-weight: 400;}

.awards {margin-left:-18px;margin-top:20px}
.awards .award {text-align: center}
.awards .award .logo {padding:50px 0px;}
.awards .award > div {border:solid 1px #DDD;background: #FFF;padding:15px 17px;    border-radius: 8px;margin-bottom:20px}
.awards .award .name {    font-size: 18px;font-weight: 700;margin-bottom:10px}
.awards .award .description {    font-size: 12px;font-weight: 400;    height: 190px;}

.labels {}
.labels .label {margin-left:16px;margin-bottom:13px;margin-top:0px}
.labels .label.category {background-color: #1d87c6}
.labels .label.issue {background-color: #c61d24}

.posts {}
.posts ul {list-style:none;margin:0px;}
.posts li > div {background: #f6f6f6;border: solid 1px #EEE;border-radius: 6px;    box-shadow: 0 0 0 rgb(0 0 0 / 0);display:block;margin-bottom:20px;margin-right:10px}
.posts li:hover > div {    box-shadow: 1px 1px 16px rgb(0 0 0 / 16%)!important;}
.posts li .image.cover {height:193px}
.posts li .image.fit {padding: 20px;margin-top: 30px;}
.posts li .description p {    font-weight: 500;color: #000;padding: 0px 20px;height:102px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis;cursor:default}
.posts .category {    margin: 10px 20px 0px;}
.posts .category .id {    color: #9d0006;display: inline-block;padding: 0px 10px;position: relative;top: 2px;}
.posts .buttons {margin:0px 20px 17px}
.posts .buttons .button {width: 100%;}

#ai {position:relative;    top: -16px;}
#ai .avatar {    width: 64px;height:70px;cursor:pointer;overflow:hidden;}
#ai .avatar img {margin-top:6px;transform: rotateY(-180deg);}
#ai.done .avatar img {transform: translateX(58px);}
#ai .pop {position:absolute;right: 5px;width: 390px;bottom: -152px;}
#ai .pop .name {    text-align: right;font-size: 16px;font-weight: 700;}
#ai .pop .message {    font-size: 14px;}
#ai .pop .message .text {    margin-top: -15px;height:68px}
#ai .pop .buttons {    margin: 8px 10px 0px;}
#ai .pop .buttons .button {    font-size: 14px;min-width: 144px;margin-right: 12px;}
#ai .pop .buttons .button.yes {background-color:#068a3e}
#ai .pop .buttons .button.yes:hover {background-color:#055c2a !important;}
#ai .pop .buttons .button.no {    background: transparent;color: #000;font-weight: 500;text-decoration: underline;text-align: left;font-size: 16px;margin-top: -2px;color: red;}
#ai .pop .buttons .button.no:hover {}
#ai .pop .arrow_box > div {    border-radius: 10px;overflow: hidden;background: #EEE;padding: 10px 16px;;box-shadow: -1px 4px 12px rgb(0 0 0 / 41%)}
#ai .pop .arrow_box {

    position: relative;
}
#ai .pop .arrow_box:after,#ai .pop  .arrow_box:before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

#ai .pop .arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #EEE;
    border-width: 15px;
    margin-left: 145px;
}
#ai .pop .arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-bottom-color: #EEE;
    border-width: 15px;
    margin-left: 145px;
}

#aiSummary {display:none}
#aiSummary.active {display:block;}
#aiSummary > div {    border: dashed 2px #ffad36;padding: 14px 20px;margin: 10px 0px;border-radius:6px;background: #f9f9f9}
#aiSummary .heading{    font-weight: 700;display: block;margin-bottom:3px;}
#aiSummary .text {font-weight:300;}
#aiSummary .avatar img {    width: 60px;}
#aiSummary .textToSpeech {color:#AAA;font-weight: 500;text-align: center;    width: 60px;background: #ddd;border-radius: 6px;    font-size: 14px;line-height: 16px;    padding: 8px 0px;cursor:default;}
#aiSummary .textToSpeech.active {color:#555;cursor:pointer;}
#aiSummary .textToSpeech span {font-size:26px;    margin-bottom: 6px;display: block;}
#aiSummary .textToSpeech.active:hover {color:#FFF;background: #666}


@media only screen and (max-width: 40.063em) {
    #sideBar .image img {display: none}
    #aiSummary {position:relative;}
    #ai .pop {    width: 300px;bottom: -188px;}
    #ai .pop .arrow_box:before {    margin-left: 94px;}
    #ai .pop .arrow_box:after {    margin-left: 95px;}
    #ai .pop .buttons .button {min-width:100px}
    #sideBar > div, #sideBar > ul {border:0px;}
    #sideBar .buttons .button {    padding: 7px 20px 14px;}
    #aiSummary .textToSpeech {position: absolute;    left: 21px;top: 94px;}
    #product {margin-top:10px}

}