.chargeSec1Row { margin: 24px -12px 0; overflow: hidden; } .chargeSec1Col5 { width: 20%; float: left; padding: 0 12px; margin-top: 24px; min-height: 172px; } .chargeSec1Box { border-radius: 4px; overflow: hidden; background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; padding: 10px; } .chargeSec1Row1 .chargeSec1Box { background-image: url('../../images/receiveSendFeeManagement/charge1-1.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-1.jpg', sizingMethod='scale'); } .chargeSec1Row2 .chargeSec1Box { background-image: url('../../images/receiveSendFeeManagement/charge1-3.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-3.jpg', sizingMethod='scale'); } .chargeSec1Row3 .chargeSec1Box { background-image: url('../../images/receiveSendFeeManagement/charge1-5.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-5.jpg', sizingMethod='scale'); } .chargeSec1Row4 .chargeSec1Box { background-image: url('../../images/receiveSendFeeManagement/charge1-7.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-7.jpg', sizingMethod='scale'); } .chargeSec1Row6 .chargeSec1Box { background-image: url('../../images/receiveSendFeeManagement/charge1-9.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-9.jpg', sizingMethod='scale'); } .chargeSec1Btn { line-height: 0; padding-right: 8px; text-align: right; overflow: hidden; } .chargeSec1Btn img { width: 16px; margin-left: 18px; } .chargeSec1Btn span { float: left; line-height: 20px; font-size: 13px; color: #fff; } .chargeSec1T { padding: 0 25px; font-size: 20px; color: #fff; height: 72px; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } .chargeSec1Row1 .chargeSec1T { border-bottom: 1px solid #7FADF5; } .chargeSec1Row2 .chargeSec1T { border-bottom: 1px solid #47E1E4; } .chargeSec1Row3 .chargeSec1T { border-bottom: 1px solid #FCB938; padding-top: 10px; } .chargeSec1Row4 .chargeSec1T { border-bottom: 1px solid #B787F2; } .chargeSec1Row6 .chargeSec1T { border-bottom: 1px solid #FB9180; } .chargeSec1Con { padding: 0 25px; margin-top: 15px; } .chargeSec1Txt { font-size: 14px; color: #fff; line-height: 26px; height: 52px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .chargeSec1Txt span { float: right; font-size: 30px; margin-top: 10px; } .chargeSec1Txt b { font-weight: normal; } .chargeSec1Time { text-align: right; font-size: 12px; margin-top: 20px; height: 17px; } .chargeSec1Row1 .chargeSec1Time { color: #CADFFF; } .chargeSec1Row2 .chargeSec1Time { color: #8FFDFF; } .chargeSec1Row3 .chargeSec1Time { color: #FFE08E; } .chargeSec1Row4 .chargeSec1Time { color: #E1CAFF; } .chargeSec1Row6 .chargeSec1Time { color: #FFC7BE; } .chargeSec1Text { color: #A6A6A6; font-size: 14px; margin-top: 30px; padding-bottom: 20px; } .layerChage { padding-bottom: 50px } .layerChageT { height: 80px; line-height: 80px; text-align: center; font-size: 26px; color: #fff; background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; margin-bottom: 40px; } .layerChage1 .layerChageT { background-image: url('../../images/receiveSendFeeManagement/charge1-2.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-2.jpg', sizingMethod='scale'); } .layerChage2 .layerChageT { background-image: url('../../images/receiveSendFeeManagement/charge1-4.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-4.jpg', sizingMethod='scale'); } .layerChage3 .layerChageT { background-image: url('../../images/receiveSendFeeManagement/charge1-6.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-6.jpg', sizingMethod='scale'); } .layerChage4 .layerChageT { background-image: url('../../images/receiveSendFeeManagement/charge1-8.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-8.jpg', sizingMethod='scale'); } .layerChage6 .layerChageT { background-image: url('../../images/receiveSendFeeManagement/charge1-10.jpg'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../../images/receiveSendFeeManagement/charge1-10.jpg', sizingMethod='scale'); } .chargeInput { padding: 0 90px; margin-top: 25px; overflow: hidden; } .chargeInput span { float: left; color: #8F8F8F; font-size: 15px; line-height: 44px; width: 100px; text-align: right; } .chargeInput input, .chargeInput textarea { display: block; margin-left: 120px; padding: 12px; line-height: 24px; border: 1px solid #E1E1E1; color: #313131; font-size: 15px; width: 608px; } .chargeInput input { height: 44px; } .chargeInput textarea { height: 80px; padding-top: 8px; resize: none; } .chargeBtn { margin-top: 45px; text-align: center; line-height: 0; } .chargeBtn span { display: inline-block; margin: 0 55px; color: #fff; font-size: 18px; width: 253px; height: 50px; border-radius: 4px; line-height: 50px; cursor: pointer; } .chargeBtn span:first-child { background: #F9A90F !important; } .layerChage1 .chargeBtn span { background: #6D9CE6; } .layerChage2 .chargeBtn span { background: #48D4D7; } .layerChage3 .chargeBtn span { background: #6D9CE6; } .layerChage4 .chargeBtn span { background: #AB78EA; } .layerChage6 .chargeBtn span { background: #F28371; } .layerChageTop, .layerChageBox { padding: 0 50px; } .layerChageTop > div { float: left; width: 33.333333%; font-size: 15px; color: #8F8F8F } .layerChageTop > div span { color: #313131 } .layerChage3 .chargeInput { padding: 0 50px; } .layerChageBox { overflow: hidden; margin-top: 30px; } .layerChageBox > div { height: 305px; float: left; } .layerChageIn { width: 8%; text-align: center; font-size: 0; } .layerChageIn img { margin-top: 130px; height: 40px; } .layerChageR, .layerChageL { width: 46%; overflow: auto; border: 1px solid #E1E1E1; } .layerChageL::-webkit-scrollbar-track-piece { width: 16px; background-color: #EBEBEB; } .layerChageL::-webkit-scrollbar { width: 16px; height: 6px; } .layerChageL::-webkit-scrollbar-thumb { height: 50px; background-color: #F9A90F; border-radius: 8px; } .layerChageL::-webkit-scrollbar-thumb:hover { background: #F9A90F; } .layerChageR::-webkit-scrollbar-track-piece { width: 16px; background-color: #EBEBEB; } .layerChageR::-webkit-scrollbar { width: 16px; height: 6px; } .layerChageR::-webkit-scrollbar-thumb { height: 50px; background-color: #F9A90F; border-radius: 8px; } .layerChageR::-webkit-scrollbar-thumb:hover { background: #F9A90F; } .layerChageL li { font-size: 13px; cursor: pointer; color: #313131; padding: 0 15px; line-height: 30px; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .layerChageL li:hover { background: #F7F7F7; } .layerChageR li { font-size: 13px; color: #313131; overflow: hidden; line-height: 30px; color: #313131; position: relative; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; background: #fff; } .layerChageR li:first-child { background: #fff !important; color: #8F8F8F; } .layerChageR li:hover { background: #F7F7F7; } .layerChageR li > span { position: relative; width: 50%; float: left; padding: 0 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .layerChageinput { position: absolute; width: 100%; height: 100%; z-index: -1; border: 0; left: 0; top: 0; border-bottom: 1px solid #eee; padding: 0 15px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .layerChageMoney.active .layerChageinput { z-index: 99 } .layerChageR li div { width: 30px; height: 30px; font-size: 0; text-align: center; position: absolute; top: 0; right: 0; background: #EBEBEB; cursor: pointer; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; z-index: -1; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .layerChageR li img { height: 14px; margin-top: 0; } .layerChageR li:hover div { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; z-index: 2 } .chargeSecAdd { float: right; width: 21px; height: 21px; border-radius: 2px; cursor: pointer; border: 1px solid #fff; overflow: hidden; text-align: center; line-height: 0; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .chargeSecAdd div { display: inline-block; width: 11px; height: 1px; background: #fff; /*transition:all 0.3s; -moz-transition:all 0.3s; -ms-transition:all 0.3s; -o-transition:all 0.3s; -webkit-transition:all 0.3s;*/ } .chargeSecAdd div:first-child { margin-top: 8px; transform: rotate(90deg) translate(1px,0px); -webkit-transform: rotate(90deg) translate(1px,0px); -moz-transform: rotate(90deg) translate(1px,0px); -o-transform: rotate(90deg) translate(1px,0px); -ms-transform: rotate(90deg) translate(1px,0px); } .chargeSecAdd:hover { background: #fff; } .chargeSecAdd:hover div { background: #F9A90F; } .layerChageTop { position: relative; } .layerChageTop .layerChageBtn { width: 115px; height: 30px; line-height: 30px; position: absolute; top: -5px; right: 50px; background: #F9A90F; color: #fff; text-align: center; border-radius: 2px; cursor: pointer; } .layerChageBtn i { display: inline-block; } .layerChageBtn > i { margin-right: 5px; width: 11px; position: relative; top: -5px; } .layerChageBtn > i i { width: 100%; height: 1px; background: #fff; } .layerChageBtn > i i:first-child { transform: rotate(90deg) translate(1px,0px); -webkit-transform: rotate(90deg) translate(1px,0px); -moz-transform: rotate(90deg) translate(1px,0px); -o-transform: rotate(90deg) translate(1px,0px); -ms-transform: rotate(90deg) translate(1px,0px); } .layerChageR:first-child li:first-child span { background: #fff !important; color: #8F8F8F; text-align: center !important; } .layerChageR:first-child li span:last-child { text-align: right; } .layerChageR:first-child li:nth-child(2n) { background: #F7F7F7; } .layerChageR:first-child { position: relative; } .layerChageR:first-child:after { content: ''; width: 1px; height: 100%; position: absolute; left: 0; right: 0; top: 0; margin: auto; background: #E1E1E1; } .chargeSec1Select { margin-top: 30px; } .chargeSec1Select:before { content: ''; width: 100%; display: block; clear: both; height: 1px; } .chargeSec1Select > div { float: left; height: 42px; border-radius: 4px; font-size: 14px; } .chargeSelect { width: 15%; margin-right: 2%; border: 1px solid #CDCDCD; cursor: pointer; position: relative; } .chargeSelect > div { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #8F8F8F; line-height: 40px; padding: 0 10px; } .chargeSelect > div span { color: #313131; } .chargeSelect ul { width: 100%; max-height: 240px; overflow: auto; position: absolute; left: 0; top: 60px; z-index: -1; background: #fff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .chargeSelect:hover ul { top: 41px; z-index: 2; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .chargeSelect li { height: 30px; line-height: 30px; padding: 0 10px; transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; } .chargeSelect li:hover { background: #F7F7F7; } .chargeSelectBtn { color: #fff; width: 10%; line-height: 42px; cursor: pointer; background: #F9A90F; text-align: center; } @media(max-width:1500px) { .chargeSec1T { padding: 0 10px; height: 48px; -webkit-line-clamp: 2; } .chargeSec1Con { margin-top: 7px; padding: 0 10px; } .chargeSec1Time { margin-top: 10px; } }