.p-login, .p-register { background: $primary-color; overflow: hidden; .logo { display: block; margin: 120px auto 60px; @include icon('@img/logo2.png', 236px, 110px); } .container { margin: auto; padding: 48px 36px 54px; width: 670px; border-radius: 8px; background: #fff; } .ptc-form { .title { line-height: 44px; font-size: 32px; font-weight: 600; color: #333; } .tip { font-size: 32px; color: #bebebe; text-align: center; } } .alternative { margin-top: 60px; text-align: center; font-size: 0; } .delimiter { position: relative; display: inline-block; padding: 0 20px; font-size: 32px; color: #bebebe; &::before, &::after { content: ''; position: absolute; top: 50%; width: 170px; height: 2px; background: #e5e5e5; } &::before { left: 0; transform: translate(-100%, -50%); } &::after { right: 0; transform: translate(100%, -50%); } } .list { margin: 40px 0; display: inline-flex; } .item { width: 80px; height: 80px; background-size: 100% 100%; &:nth-child(1) { background-image: url(@img/google.png); } &:nth-child(2) { background-image: url(@img/facebook.png); } &:nth-child(3) { background-image: url(@img/apple.png); } + .item { margin-left: 60px; } } .policy { font-size: 28px; line-height: 40px; color: #bebebe; } } .p-register { .policy { margin-top: 128px; padding-top: 60px; border-top: 2px solid #E5E5E5; } }