.iboxs-box8 { border: 1px solid #d6d6d6; border-top: none; overflow: hidden; -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -moz-transition: border-color ease-in-out .15s, -moz-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .iboxs-1:hover .iboxs-box8 { border-color: #e82121; } .index_title span { color: #444444; font-size: 16px; font-weight: bold; float: left; border-bottom: 2px solid #cc0000; padding-bottom: 13px; margin-right: 40px; position: relative; border: 0; cursor: pointer; } .index_title span.active { border-bottom: 2px solid #cc0000; } .index_title span::after { content: ""; position: absolute; right: -21px; top: 0; width: 2px; height: 16px; background: #8b8b8b; } .index_title span:last-child::after { display: none; } .container-fluid .iboxs_company { width: 1200px; } .iboxs-box8 { padding: 20px 25.6px; } .iboxs-box8 ul li { float: left; width: 268px; margin-right: 24.9333px; } .iboxs-box8 ul li:last-child { margin-right: 0; } .iboxs-box8 #marquee2 ul li { width: auto; margin: 0; padding: 0 12.46665px; } .iboxs-box8 ul li h3 { font-size: 16px; color: #666666; text-align: center; margin-top: 15px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .iboxs-box8 ul li .img { position: relative; width: 268px; height: 166px; overflow: hidden; } .iboxs-box8 ul li .img img { width: 100%; height: 100%; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .iboxs-box8 ul li:hover .img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .iboxs-box8 ul li:hover h3 { color: #cc0000; } .iboxs-box8 ul li:last-child { margin-left: 0; } .iboxs-box8 .iboxs-box8-item {width: 100%;overflow: hidden; display: none;} .iboxs-box8 .iboxs-box8-item:first-child {display: block;} /* .iboxs-box8 .iboxs-box8-item:last-child {display: block;} */ .branchOffice-list { margin-top: 16px; overflow: hidden; } .branchOffice-list .item { overflow: hidden; border: 1px solid #d2d2d2; padding: 20px; border-radius: 3px; margin-top: 14px; cursor: pointer; } .branchOffice-list .item .img { float: left; margin-right: 30px; width: 200px; overflow: hidden; border-radius: 3px; } .branchOffice-list .item .img img { width: 100%; } .branchOffice-list .item .title { color: #535353; font-weight: bold; font-size: 18px; line-height: 1.2; } .branchOffice-list .item .desc { color: #444444; font-size: 14px; line-height: 30px; margin-top: 10px; } .branchOffice-list .item .info { margin-top: 10px; color: #444444; font-size: 14px; line-height: 30px; text-align: justify; display: none; } .branchOffice-list .item.active .title { color: #cc0000; } .branchOffice-list .item .desc { display: none !important; } .branchOffice-list .item .info { display: block !important; } .subsidiary-list { overflow: hidden; } .subsidiary-list .item { float: left; width: 291px; margin-right: 30px; margin-top: 30px; padding: 22px; border: 1px solid #ebebeb; border-radius: 3px; } .subsidiary-list .item:nth-child(3n){ margin-right: 0; } .subsidiary-list .item .img { overflow: hidden; border-radius: 3px; width: 245px; height: 152px; } .subsidiary-list .item .img img { width: 100%; height: 100%; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .subsidiary-list .item:hover .img img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .subsidiary-list .item .title { color: #333333; font-size: 16px; font-weight: bold; height: 50px; margin-top: 20px; } .subsidiary-list .item:hover .title { color: #cc0000; } @media only screen and (max-width: 768px){ .container-fluid .iboxs_company { width: 100%; } .branchOffice-list { margin-top: 16px; } .branchOffice-list .item { padding: 1rem; border-radius: 3px; margin-top: 14px; } .branchOffice-list .item .img { float: none; margin-right: 0; border-radius: 3px; width: 100%; } .branchOffice-list .item .title { font-size: 16px; margin-top: 15px; } .branchOffice-list .item .info { margin-top: 10px; font-size: 14px; line-height: 30px; } .subsidiary-list .item { float: none; width: 100%; margin-right: 0; margin-top: 1rem; padding: 1rem; } .subsidiary-list .item .img { width: 100%; height: 11.5rem; } .subsidiary-list .item .title { font-size: 16px; height: auto; margin-top: 1rem; } .iboxs-box8 { padding: 1rem 4%; } .iboxs-box8 ul li { float: left; width: 48%; margin-right: 4%; margin-bottom: 4%; } .iboxs-box8 ul li:nth-child(2n) { margin-right: 0; } .iboxs-box8 #marquee2 ul li { width: auto; margin: 0; padding: 0 0.4rem; width: 10rem; } .iboxs-box8 ul li h3 { font-size: 16px; color: #666666; text-align: center; margin-top: 0.8rem; } .iboxs-box8 ul li .img { width: 100%; height: 5.7rem; } .iboxs-box8 ul li:last-child { margin-left: 0; } }