.login {width: 100%; background:#f1f7fc; float:left; position:relative; }
.cmp{color:#fff;font-size: 20px;padding: 8Px;}
.header {width: 100%;background-position: top center; float:left;background: url(/common/img/login_bg.png) repeat;background-size:100%;}
.header__text {position: relative;padding: 80px 0px;width:265px;margin:0 auto;}
.header__text > span {color:#fff; font-size:12px; font-weight:600;}
.header__text > h1 {margin: 0;font-size: 44px;color:#ff7f15;font-weight:lighter;text-shadow: 2px 2px 4px rgba(0,35,77,0.5);}
.header__text > h1 span.b_text {font-weight:800;}
.header__text > p {font-size:16px; margin-top:10px; color:rgba(255,255,255,0.6)}
.loginf {margin: 0 auto;max-width: 17rem;overflow: auto;  padding-top:40px;}
.loginf > * + * {margin-top: 12px;}
.loginf > input {border: 1px solid rgba(98,123,165,0.5);border-radius: 8px;width: 100%;color:#000;padding: 12px;font-size: 1rem;height:42px;}
.loginf > input[type=password]
.loginf > input:focus {outline: none;}
.loginf > input::placeholder {color: rgba(59,64,91,0.5);}
.loginf > button {margin-top:12px;border: 0;border-radius: 8px;width: 100%;padding: 8px 0px 6px 0px;font-size: 1rem;color: #fefefe;background: #1769ce;font-weight:600;height:42px;}
.loginf > button:focus {outline: none;}
.loginf > button .loginbtn {width:75px; margin:0 auto; overflow:hidden; }
.loginf > button .loginbtn span.l_icon {float:left; padding:4px 0px 0px 0px;}
.loginf > button .loginbtn span.l_icon img {width:18px; height:19px;}
.loginf > button .loginbtn span.l_text {float:left; padding:5px 0px 0px 5px; }
.loginf > button .i_loginbtn {width:170px; margin:0 auto; overflow:hidden;}
.loginf > button .i_loginbtn span.l_icon {float:left; padding:2px 0px 0px 0px;}
.loginf > button .i_loginbtn span.l_icon img {width:22px; height:22px;}
.loginf > button .i_loginbtn span.l_text {float:left; padding:5px 0px 0px 5px; }
.loginf > button .a_loginbtn {width:110px; margin:0 auto; overflow:hidden; }
.loginf > button .a_loginbtn span.l_icon {float:left; padding:4px 0px 0px 0px;}
.loginf > button .a_loginbtn span.l_icon img {width:20px; height:20px;}
.loginf > button .a_loginbtn span.l_text {float:left; padding:5px 0px 0px 5px; }

.sign-up {display: none;}
.sign-in {background: linear-gradient(270deg, rgba(229,239,248,1) 0%, rgba(241,247,252,1) 100%); overflow:hidden; float:left; width:100%; height:100%;}
.opposite-btn1, .opposite-btn2 {cursor: pointer;}

.btn_area {max-width: 17rem; margin:30px auto 20px auto; height:55px;}
.btn_area .btn_text {  float:left; color:#3b405e; font-weight:800; margin-top:10px; font-size:14px; padding-left:10px;}
.btn_area .btn_text p.text_s{font-size:11px; margin-top:5px; color:rgba(59, 64, 94, 0.5); line-height:15px; font-weight:600;}

.swich {width:60px; float:left; }
label.on_off {display: block;width: 60px;background: #CCC;height: 32px;border-radius: 30px;
  background: linear-gradient(0deg, rgba(229,239,248,1) 0%, rgba(235,243,250,1) 100%);
  box-shadow: inset 4px 4px 6px 0px rgba(242,238,235,0.7), inset 4px 4px 6px 0px rgba(137,158,184,0.6),10px 10px 20px 0px rgba(137,158,184,0.25);
  position: relative;-webkit-tap-highlight-color: rgba(255, 255, 255, 0);}
label.on_off input {display: none;}
label.on_off div {display: block;width: 0px;height: 50px;position: absolute;left:4px;top:20px;transform: translate(-50%, -50%);background: linear-gradient(to bottom, #8b8c8e 20%, #f4f4f4);border-radius: 20px;}
label.on_off div:after {content: "";position: absolute;display: block;height: 23px;width: 50px;left: 2px;top: 10px;border-radius: 20px;background: #606060;box-shadow: inset 0px 4px 6px 0px #3e3e3e,inset 0px -4px 6px 0px #3e3e3e;transition: 0.2s;}
label.on_off i {display: block;width: 28px;height: 24px;position: absolute;background: linear-gradient(0deg, rgba(225,234,242,1) 0%, rgba(246,250,254,1) 100%);
  border-radius: 22px;box-shadow: 0px 4px 10px 0px rgba(153,172,192,0.65);top: 4px;left: 5px;transition: 0.25s;}
label.on_off i:after {content: "";position: absolute;display: block;width: 19px;height: 16px;left: 4px;top: 4px;border-radius: 22px;background: linear-gradient(0deg, rgba(246,250,254,1) 0%, rgba(204,219,233,1) 100%);z-index: 1;}
label.on_off input:checked ~ i {top: 5px;left: 29px;}
label.on_off input:checked + div:after {background: linear-gradient(0deg, rgba(66,140,231,1) 0%, rgba(23,105,206,1) 100%);box-shadow: inset 0px 4px 6px 0px #2860b1,inset 0px -4px 6px 0px #2860b1;}
label.on_off input:checked + div > .off {color: transparent;text-shadow: 0 1px 0 rgba(255, 255, 255, 0);}
label.on_off input:checked + div > .on {color: #c6631d;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);}
label.on_off:hover {cursor: pointer;}
label.on_off:focus, label.on_off:active {outline: 0;}
.on, .off {
  text-transform: uppercase;position: absolute;left: 17px;top: 50%;transform: translateY(-50%);font-size: 1.2em;font-weight: 600;z-index: 2;-webkit-user-select: none;
  -moz-user-select: none;-ms-user-select: none;letter-spacing: 1px;transition: 0.25s;}
.on {color: transparent;text-shadow: 0 1px 0 rgba(255, 255, 255, 0);}
.off {left: initial;right: 17px;color: #444;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);}


.join_area {position:absolute; Bottom:0; width:100%; border-top:1px solid rgba(0,0,0,0.15); padding:25px 0px; text-align:center; background: linear-gradient(270deg, rgba(214,225,236,1) 0%, rgba(235,242,248,1) 100%); float:left;}
.join_area .join {  float:left; width:36%; padding-left:20px;}
.join_area .join .join_logo {float:left; padding-top:4px;}
.join_area .join .join_logo img {width:17px; height:24px;}
.join_area .join .join_text {color:#ff7f15; font-weight:800;  float:left; text-shadow: 0px 1px 0px #fff; font-size:16px;} 


.join_area .search {float:left; width:64%; border-right:1px solid #c4cbd0; padding-right:20px;  text-align:right; }
.join_area .search .search_text {color:#ff7f15; font-weight:800;  text-shadow: 0px 1px 0px #fff; font-size:16px; }