@CHARSET "UTF-8";

.retention .sec-index{max-width:1000px; margin-top:30px;}
.retention .login-form{margin:30px 0;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}
.retention .login-form .modalHeader{color:#fff; text-align:center;}
.retention .login-form .modalHeader h1{font-size:1.571em; margin:0; font-weight:normal; padding:7px 0;}
.retention .login-form .modalHeader i{margin-right:5px;}
.retention .login-form .modalContent{background:#fff; padding:40px 0;} 
.retention .login-form .modalContent .content-wrapper{max-width:860px; margin:0 auto;}
.retention .login-form .modalContent h5{font-size:1.143em; color:#1d1d1d;}
.retention .login-form .modalContent .aLink{margin-top:10px; display:block;}
.retention .login-form .modalContent .button-wrapper{margin-top:20px;}
.retention .login-form .modalContent .button-wrapper .button{min-width:120px; padding: 8px 16px;}

.alertPop .modalHeader{color:#fff; text-align:center; padding:12px 0; position:relative; font-size:1.429em;}
.alertPop .modalHeader .btn{position:absolute; right:10px; top:7px; border-width:1px; }
.alertPop .modalContent{padding:20px 40px; font-size:1.071em;}
.alertPop .modalContent h5{font-size:1.071em; margin-bottom:3px;}
.alertPop .modalContent .error {font-size:0.857em; height:20px;}
.alertPop .modalContent label{margin:0; font-weight:normal;}
.alertPop .modalContent .form-control{margin-top:8px;}
.alertPop .modalContent .form-group {margin-bottom: 8px;}
.alertPop .modalContent .form-control.size1{width:36%; margin-right:3%;}
.alertPop .modalContent .form-control.size2{width:60%;}
.alertPop .modalContent .captcha{margin-top:8px; padding:6px; text-align:center; float:left; width:30%;background:#00508c;color:#fff; margin-right:3%;}
.alertPop .modalContent .form-control.size3{width:66%;}
.alertPop .modalContent .btn-wrapper{border-top:1px solid #e7ecf1; margin-top:15px; padding-top:15px;}
.alertPop .modalContent .button{margin:0; padding:7px 10px; display:block; font-size:1.071em; border:none; width:100%;}
.alertPop .modalContent.alert .btn-wrapper{border:none;}
.alertPop .modalContent.alert{ padding:20px 40px 0px;text-align:center;}

.planContract .modal-header{padding:8px 10px;}
.planContract .modal-header .header-title,.planContract .modal-header .header-close{padding:0;}
.planContract .modal-header .header-title h1{color:#fff; font-size: 1.33em;margin: 0; line-height: 2;}
.contractPeriod{padding:20px;}
.contractPeriod .planOption{margin-bottom:20px;}

.sec-exist .exist-wrapper{padding:40px 15px; margin:30px auto; background:#fff; border:5px solid #e7ecf1;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}
.sec-exist .existPlanlist{ margin:30px 0 0 0;}
.sec-exist .existPlanlist h2{font-size: 1.286em;  text-align:center; margin:0 0 20px 0; font-weight:normal;}
.sec-exist .existPlanlist .currentItem{background:#f5f5f5; border:1px solid #c2cad8; margin:0 0 35px 0;}
.sec-exist .existPlanlist .currentItem .address{color:#fff; padding:10px 15px; font-size: 1.286em;}
.sec-exist .existPlanlist .currentItem .address .addressTxt{margin-left:10px;}
.sec-exist .existPlanlist .currentItem .currentdetail{color:#666666; line-height:30px; font-size:1.143em;padding:20px 0px;}
.sec-exist .existPlanlist .currentItem .currentdetail .csslabel{color:#444444; margin-right:20px;}
.sec-exist .existPlanlist .currentItem .currentdetail .button{margin-top: -5px;font-size:1.143em; padding:8px 15px;}
.sec-exist .existPlanlist .currentItem .currentdetail .button i{font-size:0.857em;}
.sec-exist .existPlanlist .currentItem .currentdetail .grid:first-child{border-right:1px solid #c2cad8;}
.sec-exist .existPlanlist .currentItem .currentdetail .button-wrapper{text-align:right;}

.sec-plan .progress-wrapper{padding:20px 15px; margin:30px auto; background:#fff; border:5px solid #e7ecf1;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}

.planDue > li {color: #BCC2CB;  font-weight: normal;line-height: 1.42857143;}
.planDue > li.planOpt{ color:#fff;}
.planDue > li.planOpt i{ color:#fff !important; margin:0 4px;}
.planDue > li.planOpt i.hkbnwifi{display:inline-block; width: 35px; height: 14px;  margin:0 5px 0 0; background:url("../images/icon/hkbnwifi.png") left center no-repeat;}
.planDue > li.planOpt i.tvsuper{display:inline-block; width: 22px; height: 17px;  margin:0 3px 0 0; background:url("../images/icon/tvb.png") left center no-repeat;}
.planDue > li.planOpt i.leeco{display:inline-block; width: 14px; height: 17px;  margin:0 3px 0 0; background:url("../images/icon/letv.png") left center no-repeat;}
.planDue > li.planOpt i.musicone{display:inline-block; width: 22px; height: 13px;  margin:0 3px 0 0; background:url("../images/icon/musicone.png") left center no-repeat;}
.planDue > li.planOpt i.lesports{display:inline-block; width: 14px; height: 13px;  margin:0 3px 0 0; background:url("../images/icon/letv2.png") left center no-repeat;}
.planDue > li.planOpt i.mplan{display:inline-block; width: 12px; height: 16px;  margin:0 5px 0 0; background:url("../images/icon/mobile.png") left center no-repeat;}

.donePage h1{font-size:1.429em; margin:20px 0;}
.donePage .record{margin:30px 0;}

.sec-other{min-height:494px;margin:30px auto; background:#fff url("../images/other/bg.jpg") right top no-repeat; text-align:center; padding:10%;border:5px solid #e7ecf1;-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);}
.sec-other h1{font-size:1.429em; font-weight:bold; display:inline-block; padding-left: 40px; margin:0 0 20px 0; line-height:2;}
.sec-other h1.title1{background:url("../images/other/icon.png") left center no-repeat;}
.sec-other h1.title2{background:url("../images/other/icon2.png") left center no-repeat; font-weight:normal;}
.sec-other h1.title3{background:url("../images/other/icon3.png") top center no-repeat; padding:60px 0 0 0; font-weight:normal; font-size:1.286em;}
.sec-other .paragh{font-size:1.143em; color:#444; margin:0 0 20px 0;}
.sec-other .sec{color:#00508d; font-size:1.429em; padding:0 5px;}

@media only screen and (max-width: 767px) {
  .retention .sec-index{margin-top:15px;}
  .alertPop .modalHeader{font-size:1.286em;}
  .retention .login-form{margin:15px 0;}
	.retention .login-form .modalContent{padding:20px 15px;}
  .retention .login-form .modalContent .button-wrapper .button{display:block; margin:0;}
  .retention .login-form .modalContent .button-wrapper{margin:0 0 10px 0;}
  .retention .login-form .modalContent .aLink { margin-top: 5px;}
  .alertPop .modalContent {padding: 20px 15px; font-size: 1em;}
  .alertPop .modalContent h5{font-size:1em;}
	
	.option1 .container{padding:0;}

	.planDue{display:block !important;}
  .planDue.nav > li{text-align:left; border:none; color:#005288;}
	.planDue > li{padding: 3px 0px;} 
	.planDue > li.planOpt, .planDue > li.planOpt i{color:#005288 !important;}

  .sec-exist .exist-wrapper{padding:15px;}
  .sec-exist .existPlanlist .currentItem .address .addressTxt{margin-left:0px;}
  .sec-exist .existPlanlist h2{font-size:1.143em;}
  .sec-exist .existPlanlist .currentItem .address{font-size:1.143em;}
  .sec-exist .existPlanlist .currentItem .currentdetail .grid{margin-bottom:10px; padding: 0 5px;}
  .sec-exist .existPlanlist .currentItem .currentdetail .grid span{display:block;}
  .sec-exist .existPlanlist .currentItem .currentdetail .grid:first-child{border-right:none;}
  .sec-exist .existPlanlist .currentItem .currentdetail {line-height: 1.5; padding: 20px 10px 5px 10px;}
  .sec-exist .existPlanlist .currentItem .currentdetail .button-wrapper{border-top:1px solid #d6dbe4;text-align:center;}
  .sec-exist .existPlanlist .currentItem .currentdetail .button{margin-top:10px;}
  
  .retention .sec-form, .sec-other{margin:30px 15px;}
  .sec-other{padding: 10% 5%; min-height: 400px; background:#fff;}
  .sec-other h1.title1{background:url("../images/other/icon.png") top center no-repeat; padding:50px 0 0 0;font-size:1.143em;}
  .sec-other h1.title2{background:url("../images/other/icon2.png") top center no-repeat;  padding:50px 0 0 0;font-size:1.143em;}


}

@media(min-width: 768px) and (max-width: 980px) {
  .progress-wrapper .nav > li > a{padding:0;}
  .steps>li>a.step>.number {margin-right: 0px; }
}