@charset "utf-8";
/* CSS Document */
.class-date{display: flex;justify-content: space-between; align-items: center;}
.class-date .date-list li {display: inline-block;width: 52px; padding: 8px; background: blue; margin-left: 5px; border-radius: 5px;}
.class-date .date-list li p{text-align: center; font-size: 14px; color: #fff; font-weight: bold; line-height: 1.5;}
.class-type,.class-time{background: blue;border-radius: 5px;font-size: 14px; color: #fff; font-weight: bold; text-align: center;}
.class-type{padding:13px 10px;}
.class-time{padding:15px 1px; margin-left: 5px;}
.class-time select{width: 160px; padding: 5px 0;background: blue;color: #fff; border: 1px solid #fff;}
.class-time select option{padding: 10px 0; color: #fff;}
.class-list{display: flex; justify-content: space-between;}
.class-list .class-left{width: 310px;}
.class-list .class-left li{display: flex; justify-content: space-between; margin-top: 10px;}
.class-list .class-left .class-img{width: 120px;}
.class-list .class-left .class-img img{width: 120px;border-radius: 5px;}
.class-list .class-left .class-desc{flex: 1; padding: 5px;}
.class-list .class-left .class-desc h2{margin-bottom: 5px;font-size:14px;}
.class-list .class-left .class-desc p{margin-top:7px;}
.class-list .class-left .class-desc p .bookBtn:hover{box-shadow: rgba(1, 1, 1, 0.05) 2px 4px 8px 0px;}
.class-list .class-left .class-desc p .bookBtn{background: #ccc; cursor: pointer; border: 0 none; color: #222; width: 100%; padding: 8px 0; font-weight: bold; border-radius: 5px;}
.class-right{flex: 1; margin-left: 20px;}
.class-right dl ul{display: flex; justify-content: space-between;}
.class-right dt li{width: 59px; height: 120px; padding: 5px 5px 0 5px;margin-top: 10px;box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;border-radius: 4px;}
.class-right dt li:not(.none){border: 1px solid #fff;}
.class-right dt li:not(.none):hover{border: 1px solid blue; cursor: pointer;}
.class-right dt li.none{background-color: rgb(234, 234, 235)}
.class-right dt li p{margin-bottom: 5px;}
.class-right dt li p.timeZone{text-align: center; font-weight: bold;}
.price{padding: 5px 0;}
.class-right dt li p button{font-size: 12px; cursor: pointer; width: 100%; line-height: 32px;border-radius: 2px;
  color: rgb(255, 255, 255);padding: 0; border: 0 none;background: linear-gradient(to right top, rgb(93, 184, 124), rgb(138, 204, 122));}
.class-info,.class-btn{
  display: flex;
  justify-content: flex-end;
  width: 650px;
}
.timeZoneSelect{display: none;}
.buttnP{display: flex; justify-content: space-between; align-items: center;}
.buttnP span{padding: 0 5px;}
#classSupplies p a{color: #409EFF; text-decoration: underline;}
.class-info li{margin-bottom: 20px;}
.class-info li h3{margin-bottom: 10px;}
.class-info li p.tag{color: rgb(138, 204, 122);}
.class-info .info-left{width: 160px;}
.class-info .info-right{flex: 1; padding-left: 20px;}
.class-btn button{width: 150px; height: 45px; line-height: 45px;text-align: center; border: 0 none; border-radius: 4px;cursor: pointer; font-size: 14px; font-weight: bold;}
.class-btn button.book-btn,.class-list .class-left .class-desc p.buttnP button.book-btn{background: linear-gradient(to right top, rgb(93, 184, 124), rgb(138, 204, 122));color: #fff;}
#classSignup h2{background: linear-gradient(to right top, rgb(93, 184, 124), rgb(138, 204, 122)); text-align: center;}
.classSignup{width: 400px;}
.classSignup p {margin-bottom: 10px;}
.classSignup p label{font-weight: bold; font-size: 14px;}
.classSignup p span input,.classSignup p span select{height: 28px; padding: 2px 4px;}
.classSignup p.btn{margin-top: 35px; text-align: right;}
.classSignup p.btn button{width: 100px;text-align: center;height: 30px;line-height: 30px; margin-left: 20px; border: 0 none; border-radius: 10px;cursor: pointer;}
.classSignup p.btn button.addCart{background-color: #ffc439; display: none;}
#createBox .classSignup p a{color: rgb(93, 184, 124); font-size: 14px;}
#loginBox .classSignup p input#loginBtn,#createBox .classSignup p a#createBtn{display: inline-block; padding:8px 15px; cursor: pointer; border: 0 none;background: linear-gradient(to right top, rgb(93, 184, 124), rgb(138, 204, 122)); border-radius: 2px;color: rgb(255, 255, 255);}
.classSignup p.tips{color: red; text-align: center; font-size: 14px; display: none;}
.classSignup p.btn button.signupBtn{background: linear-gradient(to right top, rgb(93, 184, 124), rgb(138, 204, 122)); color: #fff;}
.classSignup p.btn a.addChild{background: linear-gradient(to right top, rgb(93, 184, 124), rgb(138, 204, 122)); color: #fff;display: inline-block; padding: 8px 15px;border-radius: 8px;}
.iAppend{display: none;}
@media only screen and (max-width: 1029px){
  .iAppend{display: block;}
  .class-date,#classIdList{display: none;}
  .class-list .class-left{width: 100%;}
  .class-list .class-left .class-img{width:32em;}
  .class-list .class-left .class-img img{width: 100%;}
  .class-list .class-left .class-desc h2{font-size: 2.6em;}
  .class-list .class-left .class-desc p{font-size: 2.4em; margin-top: 5px;}
  .class-list .class-left .class-desc p .bookBtn{padding: 0.8em 0;font-size: 1em;border-radius: 0.5em;}
  .class-list .class-left .class-desc{padding-left: 1.5em;}
  .timeZoneSelect{display: block; background: #fff; text-align: left; padding-left: 3em;}
  .timeZoneSelect select{appearance:none;-moz-appearance:none;-webkit-appearance:none;font-size: 2.8em; width: 70%; color: blue; border:2px solid blue; padding:0.5em;background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;background-size: 1.2em; }
  .timeZoneSelect select::-ms-expand { display: none; } 
  .timeZoneSelect select option{width: 100%; font-size: 0.5em;color: blue;}
}