.inner-section { padding-top: 70px; } .inner-section .sec-name { font-size: 40px; font-weight: bold; margin-bottom: 13px; } .inner-section .sec-desc { font-size: 24px; color: #666666; font-weight: 300; margin-bottom: 40px; } .inner-section .sec-head.white .sec-name, .inner-section .sec-head.white .sec-desc { color: #fff; } .inner-section .sec-more { display: block; margin: 50px auto; position: relative; z-index: 3; } .right-contact .contact-tel .tel-inf { padding-left: 14px; } .right-contact .contact-tel .tel-inf p { color: #666666; font-size: 16px; line-height: 2; } .right-contact .contact-tel .tel-inf p.tel-num { font-size: 30px; color: #dd3834; line-height: 32px; } .contact-tab-box { margin-bottom: 50px; } .contact-tab-box .tab-left { width: 290px; border: 1px solid #ebebeb; border-bottom: none; } .contact-tab-box .tab-left li { height: 118px; position: relative; width: 100%; text-align: center; line-height: 118px; font-size: 18px; border-bottom: 1px solid #ebebeb; } .contact-tab-box .tab-left li::before { content: ''; position: absolute; width: 7px; height: 50px; background-color: #dd3834; margin: auto; top: 0; bottom: 0; left: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: top; -moz-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; } .contact-tab-box .tab-left li.active::before, .contact-tab-box .tab-left li:hover::before { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: bottom; -moz-transform-origin: bottom; -ms-transform-origin: bottom; -o-transform-origin: bottom; transform-origin: bottom; } .contact-tab-box .tab-con { max-width: calc(100% - 290px); flex: 0 0 calc(100% - 290px); margin-left: -1px; /*border: 1px solid #ebebeb;*/ } .contact-tab-box .tab-con .con { display: none; } .contact-tab-box .tab-con .con.active { display: block; } .contact-tab-box .tab-con .con .contact-item { height: 245px; padding: 30px; position: relative; } .contact-tab-box .tab-con .con .contact-item::before { content: ''; position: absolute; z-index: 0; width: 100%; height: 100%; background: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAD2CAAAAAAFAirpAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQflARoREyG4+yZRAAADCUlEQVR42u3XwW0DQQwEQVI+Of98F9D6ITiKrl8xAA7Q+znvnbtzByp4nZ+d2ZmFDj47MzP3vKGC1//1QAbP3fkuPWSwd+ae+b07UMHeuec9s3ehgufueb4vDxWsTu9Bpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQOj0InR6ETg9Cpxeh03vQ6UHo9CB0ehA6PQidHoROD0KnF6HTe9DpQej0IHR6EDo9CJ0ehE4PQqcXodN70OlB6PQgdHoQf39wn0Wqk7y/AAAAAElFTkSuQmCC"); top: 0; left: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: translateX(-10px); -moz-transform: translateX(-10px); -ms-transform: translateX(-10px); -o-transform: translateX(-10px); transform: translateX(-10px); opacity: 0; } .contact-tab-box .tab-con .con .contact-item::after { content: ''; position: absolute; width: 100%; height: 4px; background-color: #dd3834; bottom: -1px; left: 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; } .contact-tab-box .tab-con .con .contact-item .item-wrap { position: relative; z-index: 2; padding-left: 50px; } .contact-tab-box .tab-con .con .contact-item .item-wrap .item-head { position: relative; line-height: 34px; margin-bottom: 10px; } .contact-tab-box .tab-con .con .contact-item .item-wrap .item-head::before { content: ''; display: block; width: 34px; height: 20px; background: url("../Image/ico.png") center/cover no-repeat; position: absolute; margin: auto; top: 0; bottom: 0; left: -50px; } .contact-tab-box .tab-con .con .contact-item .item-wrap .item-head .head-name { font-size: 18px; font-weight: bold; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .contact-tab-box .tab-con .con .contact-item .item-wrap .item-content { font-size: 16px; line-height: 28px; color: #666666; } .contact-tab-box .tab-con .con .contact-item:hover { -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .contact-tab-box .tab-con .con .contact-item:hover::before { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } .contact-tab-box .tab-con .con .contact-item:hover::after { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; -moz-transform-origin: right; -ms-transform-origin: right; -o-transform-origin: right; transform-origin: right; left: auto; right: 0; } .contact-tab-box .tab-con .con .contact-item:hover .item-wrap .item-head .head-name { color: #dd3834; }