/*======================================== USER-FORM PAGE STYLE =========================================*/ .user-form-part .height_big {height:50px!important;} .user-form-part { padding-bottom:100px; } .user-form-part:before {content:""; display:block; width:100%; height:150px; background: linear-gradient(#2956e5, #383cc2);} .user-form-part .container {padding-top:40px;} .user-form-part input[type=checkbox] {margin-top:2px;} .user-form-part .form-control {width: 100%; height: 45px; border-radius: 6px; padding: 0 10px 2px; color: var(--text); background: var(--chalk); border: 1px solid var(--border);} .user-form-part .btn {max-width:none; border: none; font-size: 15px; font-weight: 500; text-transform: uppercase; padding: 14px 20px; border-radius: 6px; border: 1px solid var(--black);} .user-form-part .certi-btn {height: 100%; line-height: 1; width: 140px; margin:0; border-top-left-radius: 0; border-bottom-left-radius: 0 ; font-weight:500; font-size:14px!important;} .user-form-part .bg-black {background-color: #2a2a2a;} .user-form-part .form-group .btn_wrap {width:auto;} .user-form-logo { text-align: center; margin-bottom: 25px; } .user-form-logo img { width: 200px; } .user-form-card { padding: 30px; border-radius: 8px; margin-bottom: 20px; background: var(--white); /*border: 1px solid var(--border);*/ word-break:keep-all; } .user-form-title { text-align: center; margin-bottom: 40px; } .user-form-title h2 { margin-top:30px; margin-bottom:30px; font-size: var(--h2size); line-height: var(--h1height); /*font-size: 28px; margin-bottom: 5px; */ line-height: 36px; color: var(--black); } .user-form-title p { text-transform: capitalize; } .user-form-title .txt_caution {display:inline-block; margin-top:40px; font-weight:400;} .user-form-title img {margin-top:40px;} .user-form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .user-form-social { width: 100%; } .user-form-social li { margin-bottom: 20px; } .user-form-social li a { display:flex; align-items:center; width: 100%; font-size: 15px; padding: 10px 0px; border-radius: 8px; letter-spacing: 0.3px; text-align: center; text-transform: capitalize; color: var(--black); background: var(--white); border:1px solid #ddd; } .user-form-social li a i { display:flex; justify-content:center; width:50px; border-right:1px solid #ddd; font-size: 16px; margin-right: 20px; } .user-form-social li:last-child { margin-bottom: 0px; } .user-form-social .facebook i { color: var(--facebook); } .user-form-social .twitter i { color: var(--twitter); } .user-form-social .google i { color: var(--google); } .user-form-social .instagram i { color: var(--instagram); } .user-form-divider { width: 1px; height: 240px; margin: 0px 50px; background: var(--border); position: relative; z-index: 1; } .user-form-divider p { width: 40px; height: 40px; font-size: 14px; font-weight: 500; margin: 0 auto; font-style: italic; line-height: 38px; border-radius: 50%; text-align: center; color: var(--gray); background: var(--white); border: 1px solid var(--border); position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .user-form { width: 100%; } .user-form .form-group { margin-bottom: 20px; } .form-button { text-align: center; } .form-button button { width: 100%; height: 45px; font-size: 14px; font-weight: 500; line-height: 45px; border-radius: 8px; letter-spacing: 0.3px; text-align: center; text-transform: uppercase; color: var(--white); background: var(--black); } .form-button p { font-size: 15px; margin-top: 12px; text-transform: capitalize; } .form-button p a { font-weight: 500; margin-left: 5px; color: var(--primary); } .form-button p a:hover { text-decoration: underline; } .user-form-remind { padding: 20px; border-radius: 8px; text-align: center; background: var(--white); border: 1px solid var(--border); } .user-form-remind p { font-size: 15px; text-transform: capitalize; } .user-form-remind p a { font-weight: 500; margin-left: 5px; color: var(--primary); } .user-form-remind p a:hover { text-decoration: underline; } .user-form-footer { text-align: center; margin-top: 25px; margin-bottom: 40px; } .user-form-footer p { font-size: 14px; color: var(--gray); } .user-form-footer p a { color: var(--primary); transition: all linear .3s; -webkit-transition: all linear .3s; -moz-transition: all linear .3s; -ms-transition: all linear .3s; -o-transition: all linear .3s; } .user-form-footer p a:hover { text-decoration: underline; } @media (max-width: 767px) { .user-form-group { display: inherit; } .user-form-divider { width: 100%; height: 1px; margin: 50px 0px; } } .user-form-card button {width:100%;} .mem_veri_resend .user-form-group, .active_failed .form-group, .mt_40 {margin-top:40px;} .mem_veri_resend .user-form-group .mt-5, .active_failed .user-form-card .mt-5, .pw_verify .user-form-group .mt-5 {margin-top:0!important;} .login_sso .user-form-card button, .login .user-form-card button {max-width:none; background:var(--black);} .login .page_link, .login_sso .page_link {display:flex; justify-content:center; align-items:center; margin-bottom:40px;} .login_sso .page_link {margin-bottom:10px} .login .page_link a, .login_sso .page_link a {display:block; color:var(--black);} .login .page_link a:after, .login_sso .page_link a:after {content:""; display:inline-block; width:1px; height:15px; margin:0 15px; background:#111;} .login .page_link a:last-child:after, .login_sso .page_link a:last-child:after {display:none;} .signup button {max-width:none; background:var(--black);} .signup .text-danger {margin: -10px 5px; text-align:left!important;} .signup .text-danger em {font-style:normal; font-size:14px;} .signup .form-check {margin-top:40px; margin-bottom:1.875rem!important;} .signup .form-check-label a {text-decoration:underline;} .signup .user-form-remind, .pw_change .user-form-remind {height:45px; margin:0 30px!important;} .signup .user-form-card, .pw_change .user-form-card {padding-bottom:0;} .agree_form .user-form-title {margin-bottom:80px;} .agree_form .user-form-title h2 {font-size:36px;} .agree_form h3 {font-size: var(--h5size); color:var(--sec);} .agree_form textarea {width:100%; height:200px; padding:10px; border:1px solid #ddd; color:#666; font-size:14px;} .agree_form .form-check {margin-bottom:0; padding:15px 15px 15px 40px; border-bottom:1px solid #ddd; color:var(--black);} .agree_form .all_agree {background:#f6f6f6; font-weight:500; border-top:2px solid var(--black);} .agree_form .ph2 {margin-top:40px;} .find_id .flex-row {width:100%; max-width:500px; margin:0 auto; margin-top:70px; justify-content:space-between;} .find_id .flex-row button {width:49%;} .divide .user-form-group {align-items: inherit;} .divide .user-form-group .user-form-divider {height:auto;} .divide .user-form-group h6 {display:flex; flex-flow:wrap; margin-bottom:10px;} .divide .user-form-group h6 p {margin-left:auto; color:#878787; font-size: var(--bodysize); font-weight:400;} .divide .user-form-group h6 strong {color:#C00;} .divide label {margin-bottom: 2px; color: #7e7e7e; font-size: 14px; font-weight: 500;} .divide .text-danger {font-size:14px;} .divide .re:before {content:"*"; font-size:700; color:#C00; font-size:inherit;} .divide .form-group li {display:flex; margin-top:5px;} .divide .form-group li:first-child {margin-top:0;} .divide .form-group li input {flex:2;} .divide .form-group li select {flex:1; margin-left:5px; font-size:15px;} .divide .form-group li button {flex:1; margin-left:5px; background:gray; border-radius:5px; color:#fff;} .divide .form-group em {display:block; margin-top: 5px; font-style: normal; font-size:14px;} .divide .form-check {text-align:center;} .divide .form-button button {max-width:500px;} .divide .user-form-remind {margin-top:50px;} .signup_sel .user-form-title h2 {font-size: var(--h1size);} .signup_sel .user-form-group {margin-top:80px;} .signup_sel .user-form-group a {display:flex; flex-flow:column wrap; align-items:center;padding:40px; border:1px solid #ddd; border-radius:10px; font-size:var(--h4size); font-weight:500;} .signup_sel .user-form-group a i {margin-bottom:20px; font-size:70px;} .signup_sel .user-form-divider {background:none;} .signup_sel .user-form-remind {border:none;} .password-reset .btn {width:calc(100% - 4px);} .password-reset .user-form-remind, .signup .user-form-remind {padding: 14px 20px; margin: 2px; margin-top:20px; font-size: 15px; font-weight: 500; text-transform: uppercase;} .active_failed .user-form-title {margin-bottom:20px;} .pw_change .user-form-remind {display:flex; align-items:center; justify-content:center; padding:10px;} @media (max-width: 1200px) { .user-form-part:before {height:125px;} } @media (max-width: 768px) { .find_id .flex-row {max-width:none;} .divide .user-form-group {flex-flow:column wrap;} .divide .user-form-group .user-form-divider {height: 1px; width: 100%; margin: 50px 0;} } @media (max-width: 575px) { .user-form-card { padding: 20px; } .pw_change .user-form-remind {margin: 0 20px!important;} } @media (max-width: 480px) { .user-form-part {padding-top:0;} .user-form-part:before {height:72px;} .user-form-title {margin-bottom:20px;} .user-form-title img {margin-top:0;} .user-form .form-group {margin-bottom:15px;} .user-form-part .certi-btn {width:100px!important; font-size:12px!important;} .user-form-card button {max-width:none;} .user-form-title h2 {margin-bottom:10px; font-size:28px;} .signup_agree .user-form-title {margin-bottom:0;} .signup_agree .user-form-title h2 {font-size:28px;} .signup_agree .ph2 {margin-top:20px;} }