You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
472 lines
13 KiB
472 lines
13 KiB
body .progress_inner #step-5:checked + div + div + div + div > .box_base, body .progress_inner #step-4:checked + input + div + div + div + div > .box_base, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base, body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base {
|
|
top: 50%;
|
|
left: 0px;
|
|
opacity: 1;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item, body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item {
|
|
top: -30px;
|
|
left: 0px;
|
|
opacity: 0;
|
|
}
|
|
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid {
|
|
top: -20px;
|
|
left: 0px;
|
|
opacity: 0;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item {
|
|
top: -10px;
|
|
left: 0px;
|
|
opacity: 1;
|
|
}
|
|
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_item, body .progress_inner #step-4:checked + input + div + div + div + div > .box_item, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item {
|
|
top: 10px;
|
|
left: 0px;
|
|
opacity: 1;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_lid, body .progress_inner #step-4:checked + input + div + div + div + div > .box_lid, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid {
|
|
top: -1px;
|
|
left: 0px;
|
|
opacity: 1;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_ribbon {
|
|
top: 70%;
|
|
left: 0px;
|
|
opacity: 0;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_bow, body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow, body .progress_inner #step-3:checked + input + input + div + div + div + div > .box_bow {
|
|
top: 0px;
|
|
left: 0px;
|
|
opacity: 0;
|
|
}
|
|
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_ribbon, body .progress_inner #step-4:checked + input + div + div + div + div > .box_ribbon {
|
|
top: 50%;
|
|
left: 0px;
|
|
opacity: 1;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_bow, body .progress_inner #step-4:checked + input + div + div + div + div > .box_bow {
|
|
top: -10px;
|
|
left: 0px;
|
|
opacity: 1;
|
|
}
|
|
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_tag {
|
|
top: 10px;
|
|
left: 20px;
|
|
opacity: 1;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div > .box_string {
|
|
top: 10px;
|
|
left: 20px;
|
|
opacity: 1;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body .progress_inner__step:before, body .progress_inner, body .progress_inner__status .box_base, body .progress_inner__status .box_item, body .progress_inner__status .box_ribbon, body .progress_inner__status .box_bow, body .progress_inner__status .box_bow__left, body .progress_inner__status .box_bow__right, body .progress_inner__status .box_tag, body .progress_inner__status .box_string {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 16em;
|
|
-webkit-transform: translateY(-50%);
|
|
transform: translateY(-50%);
|
|
margin: auto;
|
|
}
|
|
|
|
body .progress_inner__bar, body .progress_inner__bar--set {
|
|
height: 6px;
|
|
left: 10%;
|
|
background: -webkit-repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
|
|
background: repeating-linear-gradient(45deg, #1ea4ec, #1ea4ec 4px, #1f8bc5 4px, #1f8bc5 10px);
|
|
-webkit-transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
|
|
transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
|
|
border-radius: 6px;
|
|
width: 0;
|
|
position: relative;
|
|
z-index: -1;
|
|
}
|
|
|
|
body .progress_inner__step:before {
|
|
width: 30px;
|
|
height: 30px;
|
|
color: #70afd0;
|
|
background: white;
|
|
line-height: 26px;
|
|
border: 3px solid #a6cde2;
|
|
font-size: 12px;
|
|
top: 3px;
|
|
border-radius: 100%;
|
|
-webkit-transition: all .4s;
|
|
transition: all .4s;
|
|
cursor: pointer;
|
|
pointer-events: none;
|
|
}
|
|
|
|
body .progress_inner__step {
|
|
width: 20%;
|
|
font-size: 14px;
|
|
padding: 0 10px;
|
|
-webkit-transition: all .4s;
|
|
transition: all .4s;
|
|
float: left;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
body .progress_inner__step label {
|
|
padding-top: 50px;
|
|
top: -20px;
|
|
display: block;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
/*body .progress_inner__step:hover {
|
|
color: white;
|
|
}
|
|
body .progress_inner__step:hover:before {
|
|
color: white;
|
|
background: #1ea4ec;
|
|
}*/
|
|
|
|
body {
|
|
font-family: "Nunito", sans-serif;
|
|
background: #a6cde2;
|
|
color: #2e6c8e;
|
|
text-align: center;
|
|
font-weight: 900;
|
|
}
|
|
body .progress_inner {
|
|
height: 200px;
|
|
width: 1000px;
|
|
}
|
|
body .progress_inner #step-5:checked + div {
|
|
width: 80%;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div > .tab:nth-of-type(5) {
|
|
opacity: 1;
|
|
top: 0;
|
|
}
|
|
body .progress_inner #step-5:checked + div + div + div + div {
|
|
right: 10%;
|
|
}
|
|
body .progress_inner #step-4:checked + input + div {
|
|
width: 60%;
|
|
}
|
|
body .progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
|
|
opacity: 1;
|
|
top: 0;
|
|
}
|
|
body .progress_inner #step-4:checked + input + div + div + div + div {
|
|
right: 30%;
|
|
}
|
|
body .progress_inner #step-3:checked + input + input + div {
|
|
width: 40%;
|
|
}
|
|
body .progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
|
|
opacity: 1;
|
|
top: 0;
|
|
}
|
|
body .progress_inner #step-3:checked + input + input + div + div + div + div {
|
|
right: 50%;
|
|
}
|
|
body .progress_inner #step-2:checked + input + input + input + div {
|
|
width: 20%;
|
|
}
|
|
body .progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
|
|
opacity: 1;
|
|
top: 0;
|
|
}
|
|
body .progress_inner #step-2:checked + input + input + input + div + div + div + div {
|
|
right: 70%;
|
|
}
|
|
body .progress_inner #step-1:checked + input + input + input + input + div {
|
|
width: 0%;
|
|
}
|
|
body .progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
|
|
opacity: 1;
|
|
top: 0;
|
|
}
|
|
body .progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
|
|
right: 90%;
|
|
}
|
|
body .progress_inner__step:nth-of-type(1):before {
|
|
content: "1";
|
|
}
|
|
body .progress_inner__step:nth-of-type(2):before {
|
|
content: "2";
|
|
}
|
|
body .progress_inner__step:nth-of-type(3):before {
|
|
content: "3";
|
|
}
|
|
body .progress_inner__step:nth-of-type(4):before {
|
|
content: "4";
|
|
}
|
|
body .progress_inner__step:nth-of-type(5):before {
|
|
content: "5";
|
|
}
|
|
body .progress_inner__step:nth-of-type(6):before {
|
|
content: "6";
|
|
}
|
|
body .progress_inner__bar--set {
|
|
width: 80%;
|
|
top: -6px;
|
|
background: #70afd0;
|
|
position: relative;
|
|
z-index: -2;
|
|
}
|
|
body .progress_inner__tabs .tab {
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 40px;
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
box-shadow: 0px 2px 1px #80b7d5;
|
|
padding: 30px;
|
|
background: white;
|
|
border-radius: 10px;
|
|
-webkit-transition: all .2s;
|
|
transition: all .2s;
|
|
}
|
|
body .progress_inner__tabs .tab h1 {
|
|
margin: 0;
|
|
}
|
|
body .progress_inner__tabs .tab p {
|
|
font-weight: 400;
|
|
opacity: 0.8;
|
|
}
|
|
body .progress_inner__status {
|
|
width: 40px;
|
|
height: 40px;
|
|
top: -65px;
|
|
-webkit-transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
|
|
transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
|
|
-webkit-transform: translateX(50%);
|
|
transform: translateX(50%);
|
|
position: absolute;
|
|
}
|
|
body .progress_inner__status div {
|
|
opacity: 0;
|
|
-webkit-transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
|
|
transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
|
|
-webkit-transition-delay: 300ms;
|
|
transition-delay: 300ms;
|
|
}
|
|
body .progress_inner__status div {
|
|
position: absolute;
|
|
}
|
|
body .progress_inner__status .box_base {
|
|
background: -webkit-repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
|
|
background: repeating-linear-gradient(45deg, #986c5d, #986c5d 2px, #775144 2px, #775144 4px);
|
|
width: 36px;
|
|
height: 40px;
|
|
z-index: 1;
|
|
border-radius: 1px;
|
|
}
|
|
body .progress_inner__status .box_lid {
|
|
width: 40px;
|
|
height: 13.33333px;
|
|
background: #775144;
|
|
z-index: 2;
|
|
border-radius: 1px;
|
|
top: 0;
|
|
}
|
|
body .progress_inner__status .box_item {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: #be69d2;
|
|
z-index: 0;
|
|
border-radius: 4px;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
body .progress_inner__status .box_ribbon {
|
|
width: 10px;
|
|
height: 42px;
|
|
background: #ee0f29;
|
|
z-index: 4;
|
|
border-radius: 1px;
|
|
}
|
|
body .progress_inner__status .box_bow__left, body .progress_inner__status .box_bow__right {
|
|
width: 6px;
|
|
height: 10px;
|
|
background: #be0c21;
|
|
position: absolute;
|
|
z-index: 3;
|
|
opacity: 1;
|
|
border-radius: 1px;
|
|
}
|
|
body .progress_inner__status .box_bow {
|
|
top: -6px;
|
|
z-index: 1;
|
|
-webkit-transition-delay: 500ms;
|
|
transition-delay: 500ms;
|
|
}
|
|
body .progress_inner__status .box_bow__left {
|
|
left: 6px;
|
|
-webkit-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
body .progress_inner__status .box_bow__right {
|
|
left: -4px;
|
|
-webkit-transform: rotate(-45deg);
|
|
transform: rotate(-45deg);
|
|
}
|
|
body .progress_inner__status .box_tag {
|
|
width: 20px;
|
|
height: 10px;
|
|
background: #487ac7;
|
|
z-index: 4;
|
|
-webkit-transform: rotate(-10deg) translateX(-40px) translateY(0px);
|
|
transform: rotate(-10deg) translateX(-40px) translateY(0px);
|
|
border-radius: 2px;
|
|
-webkit-transition-delay: 500ms;
|
|
transition-delay: 500ms;
|
|
}
|
|
body .progress_inner__status .box_string {
|
|
width: 17px;
|
|
height: 2px;
|
|
background: #343434;
|
|
z-index: 4;
|
|
-webkit-transform: rotate(-39deg) translateX(-22px) translateY(-12px);
|
|
transform: rotate(-39deg) translateX(-22px) translateY(-12px);
|
|
}
|
|
body .progress_inner input[type="radio"] {
|
|
display: none;
|
|
}
|
|
.step_header{
|
|
text-align: left;
|
|
padding-left:7%;
|
|
}
|
|
.step_header img{
|
|
height: 30px;
|
|
width: 30px;
|
|
}
|
|
|
|
.success_wrapper{
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
.success_img{
|
|
display: inline-block;
|
|
}
|
|
.success_img img{
|
|
vertical-align: baseline;
|
|
}
|
|
.success_text{
|
|
text-align: left;
|
|
display: inline-block;
|
|
margin-left: 14px;
|
|
}
|
|
.success_text2{
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 15px;
|
|
color: #8B919D;
|
|
letter-spacing: 0px;
|
|
}
|
|
.success_content{
|
|
margin-top: 50px;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 15px;
|
|
color: #8B919D;
|
|
letter-spacing: 0px;
|
|
}
|
|
.content_align{
|
|
margin:0 auto;
|
|
width:50%;
|
|
text-align:left;
|
|
}
|
|
.margin-bottom2{
|
|
margin-top: 120px;
|
|
}
|
|
.agree-text{
|
|
font-family: SanFranciscoText-Regular;
|
|
font-size: 15px;
|
|
color: #FF6600;
|
|
letter-spacing: 0px;
|
|
}
|
|
.agree-to{
|
|
border: 1px solid #FF6600;
|
|
padding: 6px 8px 6px 8px;
|
|
color: grey;
|
|
cursor: pointer;
|
|
}
|
|
.agree_left{
|
|
text-align: left;
|
|
}
|
|
body .dis_before{
|
|
color: white;
|
|
}
|
|
body .dis_before:nth-child(1):before{
|
|
color: white;
|
|
background: #1ea4ec;
|
|
}
|
|
body .dis_before:nth-child(2):before{
|
|
color: white;
|
|
background: #1ea4ec;
|
|
}
|
|
body .dis_before:nth-child(3):before{
|
|
color: white;
|
|
background: #1ea4ec;
|
|
}
|
|
body .dis_before:nth-child(4):before{
|
|
color: white;
|
|
background: #1ea4ec;
|
|
}
|
|
body .dis_before:nth-child(5):before {
|
|
color: white;
|
|
background: #1ea4ec;
|
|
}
|
|
.dropdown-submenu {
|
|
position: relative;
|
|
}
|
|
.dropdown-submenu > .dropdown-menu {
|
|
top: 0;
|
|
left: 100%;
|
|
margin-top: -6px;
|
|
margin-left: -1px;
|
|
-webkit-border-radius: 0 6px 6px 6px;
|
|
-moz-border-radius: 0 6px 6px;
|
|
border-radius: 0 6px 6px 6px;
|
|
}
|
|
.dropdown-submenu:hover > .dropdown-menu {
|
|
display: block;
|
|
}
|
|
.dropdown-submenu > a:after {
|
|
display: block;
|
|
content: " ";
|
|
float: right;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
border-width: 5px 0 5px 5px;
|
|
border-left-color: #ccc;
|
|
margin-top: 5px;
|
|
margin-right: -10px;
|
|
}
|
|
.dropdown-submenu:hover > a:after {
|
|
border-left-color: #fff;
|
|
}
|
|
.dropdown-submenu.pull-left {
|
|
float: none;
|
|
}
|
|
.dropdown-submenu.pull-left > .dropdown-menu {
|
|
left: -100%;
|
|
margin-left: 10px;
|
|
-webkit-border-radius: 6px 0 6px 6px;
|
|
-moz-border-radius: 6px 0 6px 6px;
|
|
border-radius: 6px 0 6px 6px;
|
|
}
|
|
/*.progress_inner__step:before{
|
|
background: #1ea4ec;
|
|
}
|
|
.step_submit_color{
|
|
color: white;
|
|
|
|
}*/
|
|
|
|
|