@charset "UTF-8";

.comm-banner .nav ul li a {padding:1.25rem 5rem;}

.reference_company .cont {width:100%;padding-bottom:15rem;}
.reference_company .company {display:flex;flex-direction:column;gap:3rem;}
.reference_company .company a {position:relative;border-radius:2.5rem 0 2.5rem 0;border:1px solid #e8e8e8;overflow:hidden;}
.reference_company .company a .into {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;z-index:1;}
.reference_company .company a .into {position:relative;padding:6rem 5rem;box-sizing:border-box;}
.reference_company .company a .tit {display:flex;flex-direction:column;}
.reference_company .company a .tit strong {display:block;font-size:2.2rem;line-height:3.2rem;font-weight:600;color:#222;transition:color .3s;}
.reference_company .company a .tit span {display:block;margin-top:1rem;font-size:1.6rem;line-height:2.6rem;font-weight:400;color:#999;transition:color .3s;}
.reference_company .company a .btn {display:flex;align-items:center;gap:0 2rem;font-size:1.8rem;line-height:2.8rem;font-weight:600;color:#222;transition:color .3s;}
.reference_company .company a .bg {position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity .3s;}
@media (hover: hover) {
    .reference_company .company a:hover .tit strong {color:#fff;}
    .reference_company .company a:hover .tit span {color:#fff;}
    .reference_company .company a:hover .btn {color:#fff;}
    .reference_company .company a:hover .bg {opacity:1;}
}
@media screen and (max-width:768px) {
    .reference_company .company {display:flex;flex-direction:column;gap:1.5rem;}
    .reference_company .company a {border-radius:1.5rem 0 1.5rem 0;}
    .reference_company .company a .into {padding:3.5rem;display:block;}
    .reference_company .company a .tit {margin-bottom:2.5rem;}
    .reference_company .company a .tit strong {color:#fff;font-size:2.4rem;line-height:3.4rem;}
    .reference_company .company a .tit span {color:#fff;font-size:1.8rem;line-height:2.8rem;}
    .reference_company .company a .btn {color:#fff;font-size:2rem;line-height:3rem;justify-content:right;font-weight:400;}
    .reference_company .company a .bg {opacity:1;}
}

.reference_video .cont {width:100%;padding-bottom:15rem;}
.reference_video .video iframe {width:100%;height:100%;aspect-ratio:16 / 9;display:block;}
@media screen and (max-width:768px) {
}

.reference_customer .cont {width:100%;padding-bottom:15rem;}
.reference_customer .customer {width:100%;display:flex;flex-wrap:wrap;gap:2rem;}
.reference_customer .customer .item {width:calc(20% - 1.80rem);border:1px solid #e8e8e8;box-sizing:border-box;}
.reference_customer .customer .item img {display:block;max-width:100%;margin:auto;}
@media screen and (max-width:1200px) {
    .reference_customer .customer .item {width:calc(25% - 1.5rem);}
}
@media screen and (max-width:992px) {
    .reference_customer .customer .item {width:calc(33.33% - 1.33rem);}
}
@media screen and (max-width:768px) {
    .reference_customer .customer {gap:1rem;}
    .reference_customer .customer .item {width:calc(50% - .5rem);}
}

.reference_patent .cont {width:100%;padding-bottom:15rem;}
.reference_patent .patent {width:100%;display:flex;flex-wrap:wrap;gap:2rem;}
.reference_patent .patent .item {width:calc(33.33% - 1.33rem);text-align:center;}
.reference_patent .patent .item .into {border:1px solid #e8e8e8;box-sizing:border-box;}
.reference_patent .patent .item .into img {display:block;max-width:100%;margin:auto;}
.reference_patent .patent .item p {font-size:1.6rem;line-height:2.6rem;color:#222;font-weight:600;margin-top:1rem;}
@media screen and (max-width:1024px) {
    .reference_patent .patent .item {width:calc(50% - 1rem);}
}
@media screen and (max-width:768px) {
    .reference_patent .patent .item p {font-size:1.8rem;line-height:2.8rem;}
}
@media screen and (max-width:480px) {
    .reference_patent .patent .item {width:100%;}
}