/* banner */
.skill_banner{text-align: center;}


/* column */
.skill_column{padding: 30px 0; margin-bottom: 10px;}
.skill_column h3{font-size: 25px; font-weight: bolder;}


/* detail */
.skill_detail.wrap{ margin-top: 10px; margin-bottom: 10px; padding: 25px; display: flex; align-items: center;}
.skill_detail .detail_pic{width: 30%; }
.skill_detail .detail_pic img{width: 100%; border-radius: 8px; overflow: hidden;}
.skill_detail .detail_content{width: 70%; padding-left: 25px; box-sizing: border-box;}
.skill_detail .detail_name{font-size: 32px; font-weight: bolder; margin-bottom: 16px; line-height: 1;}
.skill_detail .detail_info{color: #999; margin-bottom: 12px; font-size: 16px;}
.skill_detail .detail_bottom{display: flex; align-items: center; height: 45px;}
.skill_detail .detail_sign{background: #4576FB; color: #fff; width: 200px; border-radius: 100px; text-align: center; font-size: 18px; height: 56px; line-height: 56px; margin-left: auto; font-weight: bolder; cursor: pointer; transition: all .3s;}
.skill_detail .detail_price{font-size: 32px; font-weight: bolder; font-family: din; color: #FF6A6A;}	
.skill_detail .detail_sign:hover{ background: #FF6A6A; color: #fff;}


/* content */
.skill_content{padding: 25px; min-height: 70vh;}
.skill_content .content {font-size: 16px;}


/* class */
.skill_class{min-height: 70vh;}
.skill_class .list{display: flex; flex-wrap: wrap;}
.skill_class .item{width: 24.23%; background: #fff; border-radius: 8px; overflow: hidden; margin-left: 12px; transition: all .3s;}
.skill_class .item:nth-child(4n+1) {margin-left: 0;}
.skill_class .item_pic{height: 212px; overflow: hidden;}
.skill_class .item_pic img{width: 100%;}
.skill_class .item_box{padding: 0 12px;}
.skill_class .item_tag {display: flex; flex-wrap: wrap;}
.skill_class .item_tag em{margin-right: 6px; margin-bottom: 6px; background: #F4F8FF; border-radius: 2px; color: #75A2FF; border: 1px solid #D9E6FF; height: 25px; line-height: 23px; display: block; padding: 0 6px;}
.skill_class .item_title{font-size: 18px; font-weight: bolder; margin-bottom: 4px; font-weight: bolder; height: 25px; line-height: 25px;  overflow:hidden;  white-space: nowrap;  text-overflow: ellipsis;}
.skill_class .item_info{color: #999; height: 50px; line-height: 25px; overflow: hidden;}
.skill_class .item_price{font-size: 20px; font-weight: bolder; color: #f60;}
.skill_class .item_bottom{height: 40px; margin-top: 16px;}
.skill_class .item_btn a{background: #4576FB; border-radius: 100px; color: #fff; height: 40px; line-height: 40px; display: block; width: 100px; text-align: center;}
.skill_class .item_btn a:hover{background: #FF6A6A; color: #fff;}


/* pop */
.skill_pop{position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #000; background-color:rgba(0,0,0,0.5); z-index: 999; display: none;}
.skill_flex{display: flex; align-items: center; justify-content: center; height: 100%; }
.skill_box{background: #fff; border-radius: 8px; width: 700px; display: flex; position: relative; box-shadow: 0 2px 3px rgba(0,0,0,0.2);}
.skill_box__left{width: 300px; background: #4576FB; display: flex; flex-flow: column; justify-content: center; padding: 50px 0; border-radius: 8px 0 0 8px;}
.skill_box__code{width: 200px; text-align: center; background: #fff; padding: 5px; border-radius: 8px; margin: 0 auto; margin-bottom: 16px;}
.skill_box__title{text-align: center; color: #fff;}
.skill_box__phone{border-radius: 100px; margin: 0 auto; width: 200px; text-align: center; height: 50px; line-height: 50px; font-family: din; font-size: 32px; color: #fff;}
.skill_box__right{padding: 50px 64px; width: calc(100% - 300px); box-sizing: border-box;}
.skill_box__column{font-size: 22px; font-weight: bolder; margin-bottom: 16px;}
.skill_box__item{margin-bottom: 16px;}
.skill_box__input{width: 100%; background: #f9f9f9; height: 50px; line-height: 50px; border-radius: 100px; border: none; padding-left: 16px; transition: all .3s;}
.skill_box__button{width: 100%; background: #FF6A6A;  height: 50px; line-height: 50px; border-radius: 100px; border: none; color: #fff; font-size: 18px; font-weight: bolder; margin-top: 16px; cursor: pointer;}
.skill_box__input:hover{background: #f5f5f5;}
.skill_box__close{position: absolute; right: 20px; top: 20px; cursor: pointer;}
.skill_box__close img{width: 30px;}