.familyMembers h2{ margin-top: 50px; margin-bottom: 64px; text-align: center; font-weight: bold; font-size: 34px; color: #05a; } .companysRow { text-align: center; position: relative; height: 0; margin-bottom: -10px; } .companys img { width: 100%; -webkit-transition: -webkit-transform 2s ease-out; -moz-transition: -moz-transform 2s ease-out; -o-transition: -o-transform 2s ease-out; -ms-transition: -ms-transform 2s ease-out; } .companys .rotate { width: 18%; cursor: pointer; /*position: absolute;*/ /*float: left;*/ -webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); -o-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); -ms-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); -moz-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); z-index: 100; } .companys .rotate img { z-index: 10; -webkit-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); -o-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); -ms-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); -moz-clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); clip-path:polygon(0px 50%,50% 0px,100% 50%,50% 100%,0px 50%); } @keyframes rotate { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } .companys .rotate:hover img{ animation: rotate 3s 1; /* transform: rotateY(360deg); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); -o-transform: rotateY(360deg); -ms-transform: rotateY(360deg);*/ } .familyList { margin-top: 100px; } .modaulTitle { margin-bottom: 20px; } .modaulTitle img { width: 5px; height: 28px; } .familyPanel h4 { color: #05a; margin-bottom: 20px; line-height: 1.8; } .familyPanel .circle { content: ''; width: 5px; height: 5px; background: #05a; border-radius: 50%; display: inline-block; position: relative; top: -4px; margin-right: 4px; margin-left: -2px; } .familyPanel h4 img { position: relative; top: -2px; } .familyPanel h4 a { color: #fff; background: #05a; font-size: 12px; margin-left: 10px; padding: 2px 6px; position: relative; top: -1px; letter-spacing: 4px; display: inline-block; } .familyPanel { color: #3c3c3c; margin-bottom: 60px; } .familyPanel h5 { font-weight: bold; margin-bottom: 16px; } .familyPanel p { margin-bottom: 0; line-height: 2; text-align: justify; text-indent: 22px; } .familyContent { margin-bottom: 8px; } .familyInfo { padding-right: 30px; } .detail { display: none; } .showDetail { background: #eeeeee; height: 15px; text-align: center; cursor: pointer; width: 100%; } .showDetail img { height: 80%; position: relative; top: 3px; } .hideDetail img { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); } .familyContact { padding-left: 30px; border-left: 1px solid #ddd; position: relative; margin-top:10px; } .familyContact dt, .familyContact dd{ display: inline-block; float: left; } .familyContact dl{ overflow: auto; margin-bottom: 2px; display: inline-block; width: 82%; } .familyContact dl:nth-child(1) dt { width: 16%; } .familyContact dl:nth-child(1) dd { width: 68%; } .familyContact .code { position: absolute; right: 0; width: 25%; top: -4px; } .slideToTop{ position: fixed; right: 14%; bottom: 20px; opacity: 0; z-index: 1; width: 49px; border-radius: 6px; background: #ddd; -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; -ms-transition: opacity .5s ease-out; } .slideToTop:hover{ background-color: #c1c1c1; cursor:pointer; } .slideToTop img{ width:100%; } .maincontent { margin-top: 0 !important; } .rotate { display: inline-block; } @media screen and (max-width: 1000px){ .familyContact dl:nth-child(1) dt { width: 30% } .familyMembers h2 { margin-top: 25px; margin-bottom: 32px; } } @media screen and (max-width: 767px){ .mobileBanner { width: 100%; } .companysRow img { width: 49%; } .modaulTitle { margin-top: 25px; } .modaulTitle img{ width: 5px; height: 24px; } /*.familyList { margin-top: -200%; }*/ .familyPanel h4 a { margin-left: 0; } .familyList { margin-top: 0; } .familyPanel { margin-bottom: 15px; } .showDetail { height: 12px; } .showDetail img { top: 0; } .familyPanel h5 { margin-bottom: 13px; } .slideToTop { right: 5%; } .familyInfo { padding-right: 15px; } .familyPanel h5 { font-size: 16px; } .familyPanel { font-size: 16px; } .familyContent p:nth-child(2) { letter-spacing: -1px; text-indent: 0; } }