.contact{ width: 80%; padding: 0px 10%; padding-bottom: 80px; } .conttactTop{ width: 100%; display: flex; justify-content: space-between; } .contactTLeft{ width: 30%; } .contactTRight{ width: 65%; } .contactTLeft>.fontS30,.conttactBot>.fontS30{ color: #0079af; text-transform: uppercase; font-family: 700; } .contactTLeft>.fontS20,.conttactBot>.fontS20{ margin-top: 10px; } .contactTLeft>ul{ margin-top: 80px; } .contactTLeft>ul>li{ width: 60%; color: #0079af; display: flex; align-items: center; padding: 10px 5%; font-size: 16px; height: 40px; background: #0078af2f; margin-top: 30px; } .contactTLeft>ul>li:hover{ background: #0079af; color: white; } .conttactBot{ width: 100%; } .conttactBot>ul{ width: 100%; display: flex; justify-content: space-between; margin-top: 80px; } .conttactBot>ul>li{ width: 30%; transition: all 1s; } .conttactBot>ul>li:hover{ -moz-box-shadow: 5px 5px 10px #ddd; -webkit-box-shadow: 5px 5px 10px #ddd; box-shadow: 5px 5px 10px #ddd; transform: translate3d(0,-2px,0); transform: scale(1.05); } .conttactBot>ul>li>div, .conttactBot>ul>li>div>img{ width: 100%; } .texttre{ width: 90% !important; padding: 50px 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .texttre>.fontS25{ color: #0079af; } .texttre>.fontS15{ margin-top: 10px; } .conTitleColor{ background: #0079af !important; color: white; } .cleColor{ background: #f8f8f8; } .neironga{ width: 100%; } .neironga>li{ width: 100%; display: flex; flex-wrap: wrap; font-size: 15px; cursor: pointer; } .divBackio a{ color: #0015ff; } .showMobilecccc{ background: url(../images/icon/csha.png) no-repeat center center !important; background-size: 100%; } .showMobilebbbb{ color: #ffffff; background: #0015ff; } .showMobileaaaa{ display: block !important; } .neironga>li>div{ width: 88%; padding:0 6%; padding-bottom: 30px; background: white; font-size: 14px; border-top: 1px solid rgba(194, 194, 194, 0.329); display: none; color: #555555; } .neironga>li>div>div{ margin-top: 30px; } .neironga>li>div>p{ margin-top: 10px; } .neironga>li>span{ width: 20%; padding-left: 2%; height: 70px; display: flex; align-items: center; /* justify-content: center; */ position: relative; } .yyyttrr{ width: 10% !important; position: absolute; right: 20px; display: flex; background: url(../images/icon/cxia.png) no-repeat center center; background-size: 30px; } .cooooonta{ width: 100%; display: flex; justify-content: space-between; } .cooooonta>li{ width: 23%; padding: 30px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; } .cooooonta>li>p{ font-size: 17px; color: #0079af; margin-top: 10px; } .cooooonta>li>div>img{ width: 124px; height: 133px; transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; } .cooooonta>li>div>img:hover{ transform: rotate(360deg); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); } .cooooonta>li>div{ width: 95%; padding: 0 2.5%; text-align: center; font-size: 14px; margin-top: 10px; } .coooomap{ width: 100%; margin-top: 50px; } @media (max-width: 1100px){ .conttactTop{ flex-wrap: wrap; } .contactTLeft,.contactTRight{ width: 100%; } .contactTLeft>ul>li { width: 90%; } .texttre>.fontS15{ text-align: center; } .joinUsTop{ flex-wrap: wrap; } .joinRenCai{ width: 100%; } } @media (max-width: 1000px){ .cooooonta{ flex-wrap: wrap; } .cooooonta>li{ width: 48%; margin-top: 20px; } .neironga>li>span{ font-size: 12px; } .conttactBot>ul{ flex-wrap: wrap; } .conttactBot>ul>li{ width: 45%; margin-top: 30px; } } @media (max-width: 800px){ .cooooonta>li>div>img{ width: 75px; height: auto !important; } .yyyttrr{ /*display: none !important;*/ background: url(../images/icon/cxia.png) no-repeat center center; background-size: 20px; } .showMobilecccc{ background-size: 20px !important; } .neironga>li{ justify-content: space-between; margin-top: 30px; } .neironga>li>span{ height: 50px; width: 41%; white-space: nowrap; text-overflow:ellipsis; overflow: hidden; } .contJoin{ flex-wrap: wrap; } .contJoiLetf,.contJoRight{ width: 100%; }.contJoRight{ margin-top: 30px; } .contJoin{ padding-bottom: 0 !important; } } @media (max-width: 500px){ .conttactBot>ul>li{ width: 100%; } }