/*******************************/
/* Author: BQool */
/* for login */
/*******************************/
html, body {margin: 0px; padding: 0px; color:#616161; background:#ffffff; font: 14px/22px 'Roboto', Arial, Tahoma, 'PingFangSC-Light', 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', '微軟正黑體', sans-serif; height: 100%;}
h1, h2, h3, h4, h5, h6, div, span, form, img {margin: 0px; padding: 0px;}
img {border: 0px; vertical-align: bottom;}
ul, li, p, ol {margin: 0px; padding: 0px; list-style: none;}
a {color:#357cba; text-decoration: none; outline:0; }
a:link, a:visited, a:active, select:focus, input:focus, button {outline: none;}
a:hover {color:#3ebfff;}
input {width: 100%; border: 0px; border-bottom: 1px solid #3d566e; padding: 17px; box-sizing: border-box; background: transparent; line-height: 21px; z-index:1; font-size: 1.071rem; line-height: 1.8rem;}
input:focus {box-shadow: 0 7px 15px -3px rgba(0,0,0,.1), inset 0px -2px 0px 0px #3d566e; z-index: 2;}
input, option, textarea, button, select {font-family: 'Roboto', Arial, Tahoma, 'PingFangSC-Light', 'hiragino sans gb', 'microsoft yahei ui', 'microsoft yahei', '微軟正黑體', sans-serif; color: #3d566e;}
input[type="checkbox"] {display:none;}
input[type="checkbox"] + label span {display:inline-block; width:25px; height:25px; vertical-align: middle; border-radius:5px; cursor:pointer; background: #efefef url(images/login.png) no-repeat -63px -103px; box-sizing: border-box; margin: 0px 10px 0px 5px;}
input[type="checkbox"]:hover + label span {background-color: #dddddd; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
input[type="checkbox"]:checked + label span {background-color: #3d566e;}



.clear:before, .clear:after {clear: both; content: ''; display: block; line-height: 0px; font-size: 0px; height: 0px;}
.transition {-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.disable {pointer-events: none; cursor: default; opacity: 0.5;}

/* scrollbar for chrome and safari */
::-webkit-scrollbar {width:12px; height: 12px; background-color:#fff}
::-webkit-scrollbar-thumb {width:6px; background-color:#d7d7d7; border:3px solid #fff; -webkit-border-radius:6px; border-radius:6px}
::-webkit-scrollbar-thumb:hover {background-color:#a6a6a6}
::-webkit-scrollbar-button {/* display:none; */}

/* placeholder */
::-webkit-input-placeholder { /* WebKit browsers */ color: #acacac;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #acacac;}
::-moz-placeholder { /* Mozilla Firefox 19+ */color: #acacac; opacity: 1;}
:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #acacac !important;}

body.layout {display: table; width: 100%;}
body.layout .leftside {display: table-cell; height: 100%; vertical-align:middle; position: relative;}
body.layout .leftside.type1 {vertical-align: top;}
body.layout .rightside {display: table-cell; width: 50%; height: 100%; position: relative;  background-color: #243d5b;}
body.layout .rightside.type2 {width: 15%;}

.layout .leftside .content {width: 420px; margin: 0 auto;}
.layout .leftside.type2 .content {width: 1100px; margin: 15px auto 15px auto;}
.twoline > div:nth-child(1) {width: 38%; margin-right: 10%;}
.twoline > div:nth-child(2) {width: 52%;}

.align_l {text-align: left !important;}
.align_r {text-align: right !important;}
.align_c {text-align: center !important;}
.r_float {float: right;}
.l_float {float: left;}
.box01 {margin: 20px 0px;}
.box01_m {margin: 30px 0px;}
.box01_s {margin: 10px 0px;}
.box02_m {padding: 20px 0px;}
.box03 {padding: 3px 8px; color: #ffffff; border-radius: 100px;}
.flex {display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify;  justify-content: space-between;}
.fontsize1 {font-size: 1.8571rem; line-height: 2rem;} /* 26px */
.fontsize2 {font-size: 2.1428rem; line-height: 2rem;} /* 34px */
.fontsize3 {font-size: 1.1428rem; line-height: 2rem;} /* 16px */
.color1 {color: #3d566e;}
.color2 {color: #0e64ad;}
.bg1 {background: #3d566e;}

.button01 {background: #3d566e; border-radius: 5px; display:inline-block; width: 100%; text-align: center; padding: 12px 0px; font-size: 1.071rem; line-height: 1.8rem; color: #ffffff; text-transform:uppercase;}
.button01:hover {background: #0e64ad; color: #ffffff;}

footer {font-size: 0.8571rem; color: #818181; width: 100%; position: absolute; bottom: 0px; color: #aaaaaa;}
body.layout .leftside.type2 footer {position: relative;}

.step {position: relative; margin-top: 20px; padding-top: 45px;}
.step .bg_line {width: 100%; border-bottom: 1px solid #e2e8ee; position: absolute; top: 76px;}
.step > ul > li { text-align: center; width: 33.3%; position: relative;}
.step.type2 > ul > li {width: 50%;}
.step > ul > li > div {position: absolute; width: 100%; bottom: 45px;}
.step > ul > li.select {color: #3d566e; font-weight: bold; font-size: 1.1428rem; line-height: 1.5rem;}
.step > ul > li:after {content: ''; display: inline-block; border-radius: 50px; background: #e2e8ee; width: 12px; height: 12px; margin: 25px 0px 0px 0px;}
.step > ul > li.select:after {background: #3d566e; box-shadow: 0px 0px 0px 3px #3d566e, 0px 0px 0px 10px #edf1f5; animation: stress 2s infinite ease-in-out;}
@keyframes stress {
  0% {box-shadow: 0px 0px 0px 3px #3d566e, 0px 0px 0px 10px #edf1f5;}
  55% {box-shadow: 0px 0px 0px 3px #3d566e, 0px 0px 0px 23px #edf1f5;}
}

/* icon */
.icon {display: inline-block; background: url(images/login.png) no-repeat; vertical-align:middle;}
.logo.icon {width:160px; height: 70px; background-position: 0px 0px;}


@media screen and (max-width: 1200px) {
body.layout .rightside.type2 {display:none;}
.layout .leftside.type2 .content {width: 90%; margin-top: 3%;}
}
@media screen and (max-width: 750px) {
.twoline > div {width: 100% !important;}
.layout .leftside.type2 footer {position: relative;}
body.layout .leftside.type2 { background: none;}
.signupbg, .step {display: none;}
}
@media screen and (max-width: 550px) {
body.layout .leftside {vertical-align:top !important;}
.layout .leftside .content {width: 90% !important; margin-top: 5%;}
footer {position: relative;}
}