/* --- back --- */
.train_back{ height: 100px;}



/* --- class --- */
.train_column{padding: 20px 0; margin-bottom: 10px;}
.train_column h3{font-size: 25px;}
.train_column .more{margin-left: auto;}



/* --- class --- */
.train_class {margin-bottom: 20px;}
.train_class .list{display: flex; flex-wrap: wrap;}
.train_class .item{width: 24.23%; background: #fff; border-radius: 8px; overflow: hidden; margin-left: 12px; transition: all .3s; margin-bottom: 16px;}
.train_class .item:nth-child(4n+1){margin-left: 0;}
.train_class .item .pic {height: 200px; background: #fff; }
.train_class .item .pic img{width: 100%; height: 100%;}
.train_class .item .info{padding: 16px;}
.train_class .item .info_name{margin-bottom: 4px; font-size: 16px; font-weight: bolder; height: 50px; line-height: 25px;}
.train_class .item .info_dep{color: #999; margin-bottom: 8px; height: 40px; line-height: 20px;}
.train_class .item .info_price{ color: #FF6A6A; font-size: 22px;}
.train_class .item .info_user{margin-left: auto; color: #999;}
.train_class .item:hover{  box-shadow: 0px 0px 20px #ececec;}



/* --- mechanism --- */
.train_mechanism {margin-bottom: 20px;}
.train_mechanism .item{background: #fff; width: 19%; margin-left: 12px; border-radius: 8px; overflow: hidden; transition: all .3s; margin-bottom: 12px;}
.train_mechanism .item:nth-child(5n+1){margin-left: 0;}
.train_mechanism .item .pic {overflow: hidden;}
.train_mechanism .item .pic a{display: block; height: 135px; display: flex; align-items: center; justify-content: center; padding: 16px;}
.train_mechanism .item .pic img{max-height: 100%; max-width: 100%;}
.train_mechanism .item .name{line-height: 40px; text-align: center; height: 40px; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 12px;}
.train_mechanism .item:hover{  box-shadow: 0px 0px 20px #ececec;}
.class_mechanism .logo img{width:100%;}


/* --- teacher --- */
.train_teacher  {margin-bottom: 20px;}
.train_teacher .list{display: flex; flex-wrap: wrap;}
.train_teacher .item{width: 24.23%; margin-left: 12px; background: #fff; border-radius: 8px; overflow: hidden; transition: all .3s; text-align: center; padding-bottom: 16px;}
.train_teacher .item:nth-child(4n+1){margin-left: 0;}
.train_teacher .item .pic {padding: 25px 0; padding-bottom: 12px;}
.train_teacher .item .pic img{width:120px; height: 120px; border-radius: 100px; overflow: hidden;}
.train_teacher .item .name{margin-bottom: 3px; font-size: 16px; font-weight: bolder;}
.train_teacher .item .text{color: #999;}
.train_teacher .item:hover{  box-shadow: 0px 0px 20px #ececec;}



/* --- news --- */
.train_news .list{background: #fff; padding: 15px 25px; padding-bottom: 0;}
.train_news .item {width: 50%; padding: 20px 0; border-bottom: 1px dashed #f5f5f5; transition: all .3s;}
.train_news .item h3{ padding-left: 32px; margin-bottom: 4px; font-size: 16px; background: url(/jinhon/images/arrow-right-filling.svg) no-repeat 0 center; background-size: 12px 12px}
.train_news .item .date{color: #999; padding-left: 32px;}


/* --- list --- */
.class_list .item{ padding: 30px 25px; border-bottom: 1px solid #efefef; transition: all .3s; }
.class_list .item .pic{width: 250px; height: 186px; border-radius: 8px; overflow: hidden; margin-right: 25px; border: 1px solid #efefef; display: flex; align-items: center; justify-content: center; padding: 8px;}
.class_list .item .pic img{max-width: 100%; max-width: 100%; border-radius: 8px;}
.class_list .item .name{font-size: 18px; font-weight: bolder; margin-bottom: 5px;}
.class_list .item .price{color: #FF6A6A; font-size: 18px; margin-bottom: 5px; font-weight: bolder;}
.class_list .item .type dl{display: flex;}
.class_list .item .type dt{margin-right: 12px; color: #ccc;}
.class_list .item .right{margin-left: auto; text-align: center; color: #999;}
.class_list .item .right .sign{margin-top: 8px;}
.class_list .item:hover{box-shadow: 0px 0px 20px #efefef;}





/* --- list --- */
.agency_list {min-height: 50vh;}
.agency_list .item{ padding: 30px 25px; border-bottom: 1px solid #efefef; transition: all .3s;}
.agency_list .item .pic{width: 200px; height: 160px; border-radius: 8px; overflow: hidden; margin-right: 25px; padding: 0 16px; border: 1px solid #efefef; transition: all .3s;}
.agency_list .item .pic a{display: block; height: 100%; display: flex; justify-content: center; align-items: center; }
.agency_list .item .pic img{max-width: 100%; max-height: 120px;}
.agency_list .item .pic:hover{ border: 1px solid #FF6A6A;}
.agency_list .item .box{width: 60%;}
.agency_list .item .name{font-size: 18px; font-weight: bolder; margin-bottom: 5px;}
.agency_list .item .name em{color: #FF6A6A; margin-left: 8px; font-size: 14px;}
.agency_list .item .dep{margin-bottom: 5px; color: #999;}
.agency_list .item .type {display: flex; flex-wrap: wrap;}
.agency_list .item .type dl{display: flex; width: 50%; line-height: 180%;}
.agency_list .item .type dt{margin-right: 12px; color: #999;}
.agency_list .item .right{margin-left: auto; text-align: center; color: #999;}
.agency_list .item .right .sign{margin-top: 8px;}
.agency_list .item:hover{box-shadow: 0px 0px 20px #efefef;}





/* --- Show --- */

/* top */
.show_top{background: #fff; padding: 32px 25px;}
.show_top .right{margin-left: auto; text-align: center; color: #999;}
.show_top .right .btn {margin-bottom: 16px; }
.show_top .right .btn a{margin: 0 8px;} 
.show_logo{margin-right: 25px; border: 1px solid #efefef; width: 250px; height: 250px; justify-content: center; padding: 0 16px;}
.show_logo img{max-width: 100%; max-height: 100%;}
.show_info{width: 45%;}
.show_name h1{font-size: 25px; font-weight: bolder; margin-bottom: 16px;}
.show_attr dl{width: 50%; display: flex; align-items: center; margin-bottom: 8px;}
.show_attr dt{color: #999; margin-right: 8px;}

/* nav */
.show_nav{background: #333; position: relative;}
.show_nav li{height: 45px; line-height: 45px; font-size: 16px;}
.show_nav li.active{background: #4576FB;}
.show_nav li a{color: #fff; padding: 0 20px; display: block;}
.show_nav li a:hover{background: #4576FB;}

/* banner */
.show_banner{border-radius: 8px 8px 0 0; overflow: hidden;}

/* box */
.show_box{margin: 12px auto; display: flex;}
.show_box .box_left{width: 73%;}
.show_box .box_right{width: 26.1666%; margin-left: auto;}

/* dep */
.show_dep{ padding: 25px; margin-bottom: 12px;}
.show_dep .content{color: #666;}

/* environment */
.show_environment{ padding: 25px; margin-bottom: 12px;}
.show_environment .content{padding-top: 16px;}
.show_environment .item{width: 32%; margin-left: 1.8%; text-align: center;}
.show_environment .item .pic{ border: 1px solid #e6e6e6; height: 160px; display: flex; align-items: center; justify-content: center; border-radius: 4px; padding: 16px; background: #fff; transition: all .3s;}
.show_environment .item .pic:hover{border: 1px solid #4576FB; box-shadow: 0px 0px 20px #ececec;}
.show_environment .item .pic a{display: block; width: 100%; height: 100%;}
.show_environment .item .pic img{max-height: 100%; max-width: 100%;}
.show_environment .item .text{padding: 16px 0; color: #999;}
.show_environment .item:nth-child(3n+1){margin-left: 0;}
.show_environment .list .item{width: 50%;}
.show_environment .cell{margin-bottom: 20px; text-align: center;}
.show_environment .cell .pic{margin-bottom: 8px;}


/* class */
.show_class{ margin-bottom: 12px; padding: 25px;}
.show_class .item{border-bottom: 1px dashed #efefef; padding: 16px 0; }
.show_class .item .pic {width: 200px; margin-right: 20px; height: 120px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.show_class .item .pic img{width: 100%; border-radius: 4px;}
.show_class .item .name{font-size: 18px; font-weight: bolder; margin-bottom: 5px;}
.show_class .item .box{width: 50%;}
.show_class .item .info dl{width: 50%; display: flex; align-items: center;}
.show_class .item .info dt{color: #999; margin-right: 8px;}
.show_class .item .price{margin-left: auto; font-size: 18px; color: #FF6A6A; text-align: center;}
.show_class .item .price .btn{margin-top: 16px; font-size: 14px;}
.show_class .item .price .btn a{width: 100px;}


/* hot */
.show_hot{ margin-bottom: 12px; padding: 25px; padding-bottom: 5px;}
.show_hot .content{margin-top: 16px;}
.show_hot .item {margin-bottom: 20px;}
.show_hot .item .pic {margin-bottom: 8px;}
.show_hot .item .pic img{width: 100%;  border-radius: 4px;}
.show_hot .item .title{margin-bottom: 8px; font-weight: bolder;}
.show_hot .item .price{color: #FF6A6A; font-weight: bolder; font-size: 16px;} 

/* message */
.show_message{ margin-bottom: 12px; padding: 25px; padding-bottom: 10px;}
.show_message .content{margin-top: 16px;}
.show_message .item{border-bottom: 1px dashed #efefef; padding-bottom: 16px; margin-bottom: 16px;}
.show_message .item .pic {margin-right: 12px; width: 51px; height: 51px;}
.show_message .item .pic img{ border-radius: 4px;}
.show_message .item .name{color: #4576FB; width: calc(100% - 64px); box-sizing: border-box;}
.show_message .item .name a{color: #4576FB; line-height: 125%;}
.show_message .item .date{color: #999;}
.show_message .item .content{margin-top: 16px;}
.show_message .btn{text-align: center;}
.show_message .btn a{margin-bottom: 12px;}

/* team */
.show_team{padding: 25px;}
.show_team .item{border-bottom: 1px solid #efefef; transition: all .3s; padding: 25px 0;}
.show_team .item .pic{width: 200px; height: 220px; border-radius: 8px; overflow: hidden; margin-right: 25px; padding: 0 16px; border: 1px solid #efefef; transition: all .3s;}
.show_team .item .pic a{display: block; height: 100%; display: flex; justify-content: center; align-items: center; }
.show_team .item .pic img{max-width: 100%; max-height: 180px;}
.show_team .item .pic:hover{ border: 1px solid #FF6A6A;}
.show_team .item .box{width: 72%;}
.show_team .item .name{font-size: 18px; font-weight: bolder; margin-bottom: 8px;}
.show_team .item .name em{color: #FF6A6A; margin-left: 8px; font-size: 14px;}
.show_team .item .dep{margin-bottom: 8px; color: #999;}
.show_team .item .info {display: flex; flex-wrap: wrap;}
.show_team .item .info dl{display: flex; width: 50%; line-height: 200%;}
.show_team .item .info dt{margin-right: 12px; color: #999;}
.show_team .item .more{color: #999; margin-top: 16px;}
.show_team .item .more a{width: 160px;}
.show_team .item .more .sign{margin-top: 8px;}

/* news */
.show_news{padding: 25px; margin-bottom: 20px;}
.show_news .content{margin-bottom: 32px;}
.show_news .item{border-bottom: 1px dashed #efefef; height: 50px; line-height: 50px; background: url(/jinhon/images/arrow-right-grey.svg) no-repeat 0 center; background-size: 12px 12px; padding-left: 20px;}
.show_news .item em{margin-left: auto; color: #999;}

/* contact */
.show_contact{padding: 25px;}
.show_contact li{line-height: 250%;}
.show_contact li em{color: #999; margin-right: 16px;}

/* ask */
.show_ask{margin-bottom: 12px; padding: 25px;}
.show_ask .ask_form dl{margin-bottom: 10px; display: flex;}
.show_ask .ask_form dt{color: #666; width: 10%; line-height: 40px;}
.show_ask .ask_form dd{color: #999; width: 90%;}
.show_ask .ask_form dd .text{ line-height: 40px; height: 40px;}
.show_ask .ask_form dd input{border: 1px solid #e6e6e6; height: 40px; width: 300px; padding-left: 10px; margin-bottom: 8px; margin-right: 16px;}
.show_ask .ask_form dd textarea{border: 1px solid #e6e6e6; height: 200px; width: 100%; padding: 10px;}
.show_ask .ask_form dd .fill{width: 100px; border: none; padding: 8px 0;}

.show_ask .ask_list{margin-top: 32px;}
.show_ask .ask_list .item{border-bottom: 1px dashed #efefef; padding-bottom: 16px; margin-bottom: 16px; display: flex;}
.show_ask .ask_list .item .pic {margin-right: 12px; width: 64px; height: 64px; overflow: hidden;}
.show_ask .ask_list .item .pic img{ border-radius: 4px; width: 100%;}
.show_ask .ask_list .item .right{width: 90%; margin-left: auto;}
.show_ask .ask_list .item .info{ margin-bottom: 4px;}
.show_ask .ask_list .item .name{color: #4576FB; margin-right: auto;}
.show_ask .ask_list .item .name a{color: #4576FB;}
.show_ask .ask_list .item .date{color: #999;}
.show_ask .ask_list .item .content{margin-top: 16px;}
.show_ask .ask_list .item .reply{color: #FF6A6A; margin-top: 16px;}


/* article */
.show_article{padding: 25px;}
.show_article h1{text-align: center; font-size: 22px; font-weight: bolder; padding: 20px 0}
.show_article .date{text-align: center; color: #999;}


/* teacher */
.show_teacher{margin-bottom: 12px; padding: 25px;}
.show_teacher .teacher_show{display: flex; align-items: center;}
.show_teacher .teacher_show .pic{width: 200px; padding: 12px; border: 1px solid #e6e6e6; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-right: 25px;}
.show_teacher .teacher_show .pic img{max-width: 90%;}
.show_teacher .teacher_show .info h3{font-size: 25px; font-weight: bolder; margin-bottom: 16px;} 
.show_teacher .teacher_show .type dl{display: flex; align-items: center; line-height: 200%;}
.show_teacher .teacher_show .type dt{color: #999; margin-right: 8px;}
.show_teacher .teacher_content{font-size: 16px; line-height: 200%; color: #333;}




/* --- class --- */

/* info */
.class_info{padding: 25px; margin-bottom: 12px;}
.class_info .pic{width: 400px; border-radius: 8px; overflow: hidden; height: 300px; padding: 8px; display: flex; align-items: center; justify-content: center; border: 1px solid #efefef; margin-right: 25px;}
.class_info .pic img{ width: 100%; height: 100%; border-radius: 8px; }
.class_info .info{width: calc(100% - 430px); margin-left: auto;}
.class_info .info .name{font-size: 25px; margin-bottom: 16px;}
.class_info .info .name h1{ font-weight: bolder;}
.class_info .info .price{font-size: 25px; color: #FF6A6A; margin-bottom: 16px;}
.class_info .info .attr {margin-bottom: 16px;}
.class_info .info .attr dl{display: flex; align-items: center;}
.class_info .info .attr dt{color: #999; margin-right: 8px;}
.class_info .info .contact{ margin-left: 20px;}
.class_info .info .contact dt{color: #999; margin-right: 8px;}
.class_info .info .contact dd{font-size: 20px; color: #FF6A6A;}
.class_info .info .button .item{margin-right: 16px;}
.class_info .info .button .item a{padding: 8px 32px;}
.class_info .info .button .item:last-child{margin-left: auto;}
.class_info .info .button .item:last-child em{color: #4576FB;}

/* box */
.class_box{display: flex;}
.class_box .box_left{width: 73%;}
.class_box .box_right{width: 26.1666%; margin-left: auto;}

/* text */
.class_text{padding: 25px; margin-bottom: 12px; font-size: 16px; color: #666;}

/* basic */
.class_basic{padding: 25px; margin-bottom: 12px;}
.class_basic dl{ margin-bottom: 8px; display: flex;}
.class_basic dt{color: #999; margin-right: 8px; width: 80px;}
.class_basic dd{width: 85%;  color: #666;}

/* other */
.class_other .inner_title{ padding: 25px;}
.class_other .show_class{padding: 0 25px; margin-top: -40px;}

/* mechanism */
.class_mechanism{padding: 0 16px; padding-bottom: 10px;}
.class_mechanism .logo{text-align: center; padding: 16px 0;}
.class_mechanism .name{text-align: center; margin-bottom: 16px; color: #999;}
.class_mechanism .btn{margin-bottom: 16px;}
.class_mechanism .info dl{display: flex; margin-bottom: 8px;}
.class_mechanism .info dt{width: 64px; color: #999; margin-right: 16px;}



/* --- wrap --- */
.class_wrap .hd{margin-bottom: 12px; padding: 16px;}
.class_wrap .hd ul{display: flex; align-items: center;}
.class_wrap .hd li{padding: 8px 20px; border-radius: 4px; margin-right: 16px; cursor: pointer; font-size: 14px; color: #666;}
.class_wrap .hd li.on{background: #4576FB; color: #fff;}



/* --- 课程列表 --- */
.class_cell{padding: 25px;}
.class_cell .item{display: flex; border-bottom: 1px dashed #f5f5f5; height: 60px; line-height: 60px;}
.class_cell .item .name{font-size: 16px;}
.class_cell .item .state{margin-left: auto; color: #999;}
.class_cell .item .state a{color: #1CB177;}
.class_cell .item .order{margin-right: 16px; color: #999;}