.join-us-content { padding: 20px 90px; } .join-us-content .join-us-title { margin-bottom: 40px; margin-top: 30px; display: flex; padding-bottom: 10px; position:relative; } .join-us-content .join-us-title > div.left { width: 196px; margin-right: 20px; } .join-us-content .join-us-title > div.right { overflow: hidden; } .join-us-content .join-us-title > div.right ul { height: 22px; margin-top: 32px; } .join-us-content .join-us-title > div.right ul li.active { color: #BCA377; } .join-us-content .join-us-title > div.right ul li { float: left; padding: 0 20px; border-right: 1px solid black; color: #303539; cursor: pointer; } .join-us-content .join-us-title > div.right ul li:last-child { border: 0; } .join-us-content .join-us-main{ width:100%; height:auto; overflow:hidden; margin-bottom:40px; } .join-us-content .join-us-main .join-us-selected{ width:100%; height:128px; border:1px solid #eaeaea; background:#f5f5f5; margin-bottom:36px; } .join-us-content .join-us-main .join-us-selected .join-us-selected-content{ padding:0 58px; margin-bottom:36px; } .join-us-content .join-us-main .join-us-selected .join-us-selected-content ul{ display:flex; justify-content: space-between; } .join-us-content .join-us-main .join-us-selected .join-us-selected-content ul li{ display:table; height:128px; } .join-us-main .join-us-selected .join-us-selected-content ul li span{ display:table-cell; vertical-align: middle; } .join-us-main .join-us-selected .join-us-selected-content ul li span b{ display:block; margin-bottom:5px; } .join-us-main .join-us-selected .join-us-selected-content ul li span .select{ width:135px; height:35px; border:1px solid #dddddd; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background: -webkit-linear-gradient(#ffffff, #f3f3f3); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(#ffffff, #f3f3f3); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(#ffffff, #f3f3f3); /* Firefox 3.6 - 15 */ background: linear-gradient(#ffffff, #f3f3f3); /* 鏍囧噯鐨勮娉 */ position:relative; } .join-us-main .join-us-selected .join-us-selected-content ul li span .select select{ margin:0; padding:0 14px; display:block; border:0; background:transparent; height:35px; width:130px; background:url('../img/join_us/arrow_button.png') no-repeat center right; appearance:none; -moz-appearance:none; -webkit-appearance:none; font-size:16px; } .join-us-main .join-us-selected .join-us-selected-content ul li span .inputs{ width:294px; height:35px; border: 1px solid #dddddd; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: -webkit-linear-gradient(#ffffff, #f3f3f3); background: -o-linear-gradient(#ffffff, #f3f3f3); background: -moz-linear-gradient(#ffffff, #f3f3f3); background: linear-gradient(#ffffff, #f3f3f3); display:flex; position:relative; } .join-us-selected-content ul li span .inputs .icon{ width:18px; height:18px; background:url('../img/join_us/sousuo.png'); position:absolute; top:50%; left:10px; margin-top:-9px; } .join-us-selected-content ul li span .inputs input{ border:0; background:transparent; width:206px; height:26px; border-right:1px solid #d4d4d4; margin-top:4.5px; margin-left:14px; font-size:16px; } .join-us-selected-content ul li span .inputs .button{ width:78px; text-align:center; line-height:38px; cursor: pointer; } select::-ms-expand { display: none; } /*.join-us-main .join-us-selected .join-us-selected-content ul li span .select:after{ content:'\20'; position:absolute; right: 3px; top: 50%; margin-top: -5px; width:14px; height:8px; background:url('../img/join_us/arrow_button.png') no-repeat center center; }*/ .join-us-main .join-us-selected-info{ margin-bottom:62px; } .join-us-main .join-us-selected-info ul{ width:100%; height:40px; line-height:40px; display:flex; justify-content: space-between; border-bottom:1px solid #4a4a4a; } .join-us-main .join-us-selected-info ul.title{ background:#0d468b; border:0; } .join-us-main .join-us-selected-info ul.title li{ color:white; } .join-us-main .join-us-selected-info ul li{ color:#4a4a4a; text-align:center; overflow:hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin:0 10px; } .join-us-main .join-us-selected-info ul li.zero{ width:20%; } .join-us-main .join-us-selected-info ul li.one{ width:20%; } .join-us-main .join-us-selected-info ul li.two{ width:20%; } .join-us-main .join-us-selected-info ul li.three{ width:20%; } .join-us-main .join-us-selected-info ul li.four{ width:20%; } .join-us-selected-info-mobile{ display:none; } .join-us-content .join-us-title .return-button{ padding-left: 14px; background: url('../img/return_icon.png') no-repeat center left; font-size: 1rem; color: #4a4a4a; float: right; height: 30px; line-height: 33px; background-size: 8px; margin-top: 25px; position: absolute; right: 0; } .join-us-content .join-us-main { padding:0 0 40px 0; margin-top: 10px; } .join-us-content .join-us-main>div{ margin-bottom:30px; } .join-us-main .name{ font-weight:bold; margin-bottom:10px; } .join-us-main .step1 .info>div{ float:left; margin-right:30px; } @media screen and (max-width: 768px) { .join-us-content { padding: 20px; } .join-us-content .join-us-main .join-us-selected .join-us-selected-content { padding: 0 6px; margin-bottom: 36px; } } @media screen and (max-width: 768px) { .join-us-content { padding:0 15px; margin-top:30px; margin-bottom:40px; justify-content: space-between; } .join-us-content .join-us-main .join-us-selected .join-us-selected-content { margin-top:20px; margin-bottom: 20px; } .join-us-content .join-us-title { margin: 0; margin-bottom: 20px; margin-top: 30px; } .join-us-content .join-us-title > div.right ul { height: 22px; margin-top: 8px; } .join-us-content .join-us-main .join-us-selected .join-us-selected-content ul{ display:block; } .join-us-content .join-us-title > div.left { font-size: 22.5px; width: auto; margin: 0; } .join-us-content .join-us-title > div.right { overflow: hidden; } .join-us-content .join-us-main .join-us-selected{ height:auto; } .join-us-content .join-us-main .join-us-selected .join-us-selected-content ul li{ display:block; height:auto; margin-bottom:20px; } .join-us-main .join-us-selected .join-us-selected-content ul li span .inputs{ width:275px; } .join-us-selected-info-mobile{ display:block; } .join-us-selected-info-mobile ul li{ border-bottom:1px solid #4a4a4a; margin-bottom:20px; } .join-us-selected-info-mobile ul li div{ margin-bottom:10px; font-size:1rem; color:#4a4a4a; } .join-us-selected-info-mobile ul li div.more{ width: 150px; height: 44px; position: relative; } .join-us-selected-info-mobile ul li div.more .icon-content { width: 25px; height: 25px; border: 4px solid white; position: absolute; right: 0; bottom: 0; background: #0d468a; margin-bottom:0; } .join-us-selected-info{ display:none; } .join-us-content .join-us-title .return-button{ padding-left: 14px; background: url('../img/return_icon.png') no-repeat center left; font-size: 1.2rem; color: #4a4a4a; float: right; height: 30px; line-height: 31px; background-size: 5px; margin-top: 50px; position: absolute; left: 0; } .join-us-content.info .join-us-main { padding:0; margin-top: 60px; } }