@charset "utf-8";
/*
* get课程
* author 胖胖吉
*
*/
.p-banner {
    background: url("https://imgs.sfkedu.com/yiyiarts/pc/home/img/v2/get/banner.jpg") center 0 no-repeat;
    height: 444px;
}

.p-desc-wrap {
    height: 514px;
    width: 100%;
}

.p-desc {
    margin-top: 50px;
    width: 420px;
}

.p-desc dt {
    color: #333333;
    font-size: 24px;
}

.p-desc dd {
    line-height: 26px;
    font-size: 14px;
    color: #666666;
    padding-top: 30px;
}

.p-desc-pic {
    width: 438px;
    margin-top: 90px;
    position: relative;
}

.p-desc-pic__list {
    width: 438px;
    height: 295px;
    background-color: #fff;
    -webkit-box-shadow:  0 5px 9px 0 rgba(86, 116, 104, 0.28);
    box-shadow: 0 5px 9px 0 rgba(86, 116, 104, 0.28);
    position: relative;
}

.p-desc-pic__list li {
    position: absolute;
    left: 0;
    top:0;
    width: 438px;
    height: 295px;
    overflow: hidden;
    display: none;
}

.p-desc-pic__list li span {
    position: absolute;
    z-index: 1;
    background-color: #000;
    opacity: 0.5;
    display: block;
    left: 0;
    bottom: 0;
    height: 78px;
    width: 100%;
}

.p-desc-pic__list li div {
    color: #ffffff;
    height: 63px;
    width: 408px;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    padding-left: 30px;
    padding-top: 15px;
    font-size: 14px;
    line-height: 24px;
}

.p-desc-pic__list li img {
    width: 438px;
    height: 295px;
}

.p-desc-pic__tip {
    text-align: center;
    width: 438px;
    color: #aaaaaa;
    font-size: 14px;
    padding-top: 20px;
}

.p-desc-pic__prev,
.p-desc-pic__next {
    background: url("https://imgs.sfkedu.com/yiyiarts/pc/home/img/v2/get/btn.png") 0 0 no-repeat;
    width: 16px;
    height: 28px;
    position: absolute;
    top:120px;
    display: block;
    cursor: pointer;
}

.p-desc-pic__prev {
    left: -56px;
}

.p-desc-pic__next {
    right: -56px;
    background-position:  -23px 0;
}

.p-desc-pic__prev:hover {
    background-position:  0 -31px;
}

.p-desc-pic__next:hover {
    background-position:  -23px -31px;
}

.p-title-wrap {
    position: relative;
    height: 103px;
    margin-top: 60px;
}

.p-title-wrap em {
    position: absolute;
    width: 100%;
    height: 1px;
    border-bottom: 1px solid #9f9fa0;
    top:50%;
    left: 0;
    display: block;
}

.p-title-left {
    float: left;
    display:inline;
    height: 53px;
    border: 1px solid #a6a6a6;
    background-color: #fff;
    padding: 25px 30px;
    position: relative;
    z-index: 2;
}

.p-title-left dt {
    float: left;
    display: inline;
    font-size: 28px;
    color: #333333;
    font-weight: bold;
    font-family: "Helvetica";
}

.p-title-left dd {
    float: left;
    display: inline;
    border-left: 1px solid #bcbcbd;
    padding-left: 15px;
    margin-left: 15px;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
}

.p-title-right  {
    float: right;
    display: inline;
    position: relative;
    z-index: 2;
}

.p-title-right span {
    position: absolute;
    background-color: #f1f0f5;
    width: 175px;
    height: 46px;
    bottom: 0;
    left: 75px;
}

.p-title-right p {
    font-size: 14px;
    color: #666666;
    width: 242px;
    line-height: 22px;
    margin-top: -10px;
    text-align: right;
}

.p-title-right a {
    display: block;
    width: 158px;
    height: 46px;
    background-color: #28de93;
    line-height: 46px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    float: right;
    margin-top: 10px;
    position: relative;
    z-index: 2;
}

.p-title-right a:hover {
    background-color: #fd6e4d;
    color: #fff;
}

.p-step1 {
    background-color: #f1f0f5;
}

.p-step1 h3 {
    font-size: 28px;
    color: #333333;
    padding-top: 60px;
    width: 1000px;
    margin: 0 auto;
    font-weight: normal;
}

.p-step1__list {
    clear: both;
    padding-top: 70px;
    padding-bottom: 50px;
}

.p-step1__list li {
    float: left;
    display: inline;
    width: 316px;
    height: 476px;
    margin-left: 26px;
    background-color: #fff;
    border-bottom: 5px solid #fff;
    -webkit-transition:box-shadow 0.2s linear, transform 0.2s linear;
    transition: box-shadow 0.2s linear, transform 0.2s linear;
}

.p-step1__list li img {
    width: 316px;
    height: auto;
    vertical-align: top;
}


.p-step1__list li.first {
    margin-left: 0;
}

.p-step1__list li dt {
    width: 214px;
    height: 84px;
    border-bottom: 1px solid #d3d1d1;
    margin: 0 auto;
    padding-top: 40px;
    font-size: 16px;
    color: #333333;
    text-align: center;
}

.p-step1__list li dt strong {
    display: block;
    font-size: 22px;
    font-weight: normal;
    padding-bottom: 10px;
}

.p-step1__list li dd {
    width: 214px;
    margin: 0 auto;
    padding-top: 20px;
    font-size: 14px;
    line-height: 24px;
    color: #999999;
    text-align: justify;
}

.p-step1__list li:hover {
    border-bottom: 5px solid #2cde98;
    -webkit-box-shadow:  0 5px 9px 0 rgba(86, 116, 104, 0.28);
    box-shadow: 0 5px 32px 0 rgba(51, 65, 70, 0.26);
    transform: translateY(-10px);
}

.p-step2__list {
    clear: both;
    padding-top: 70px;
    padding-bottom: 50px;
}

.p-step2__list li {
    float: left;
    display: inline;
    width: 467px;
    margin-left: 66px;
    -webkit-box-shadow:  0 2px 24px 0 rgba(54, 58, 56, 0.21);
    box-shadow: 0 2px 24px 0 rgba(54, 58, 56, 0.21);
    -webkit-transition:box-shadow 0.2s linear, transform 0.2s linear;
    transition: box-shadow 0.2s linear, transform 0.2s linear;
}

.p-step2__list li:hover {
    -webkit-box-shadow:none;
    box-shadow:none;
    transform: translateY(-10px);
}

.p-step2__list li.first {
    margin-left: 0;
}

.p-step2__list li img {
    vertical-align: top;
}

.p-step2__list li dl {
    height: 200px;
    padding-top: 36px;
    background-color: #fff;
}

.p-step2__list li dt {
    text-align: center;
    color: #333333;
    font-weight: normal;
    font-size: 22px;
}

.p-step2__list li dt em {
    display: block;
    margin: 0 auto;
    height: 2px;
    width: 33px;
    background-color: #333333;
    margin-top: 15px;
}

.p-step2__list li dd {
    padding: 25px 60px;
    font-size: 14px;
    line-height: 24px;
    color: #999999;
    text-align: center;
}

.p-step2__list li:hover  dl {
    background-color: #33dfa2;
    color: #fff;
    background-image:-webkit-linear-gradient(53deg, #23de8d, #3cdfae);
    background-image:linear-gradient(53deg,#23de8d, #3cdfae);
}

.p-step2__list li:hover dt em {
    background-color: #fff;
}

.p-step2__list li:hover dd,
.p-step2__list li:hover dt {
   color: #fff;
}

.p-step3__list {
    clear: both;
    padding-top: 40px;
    padding-bottom: 50px;
}

.p-step3__list li {
    margin-left: 66px;
    float: left;
    display: inline;
}

.p-step3__list li.first {
    margin-left: 0;
}

.p-step3__list li img {
    vertical-align: top;
}

.p-person__title {
    font-size: 28px;
    color: #333333;
    font-weight: normal;
    padding: 80px 0;
}

.p-person__list {
    margin-left: -90px;
    padding-bottom: 100px;
}

.p-person__list li {
    float: left;
    display: inline;
    width: 182px;
    margin-left: 90px;
}

.p-person__thumb {
    width: 160px;
    height: 160px;
    margin: 0 auto;
    display: block;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    background-color: #ccc;
}

.p-person__thumb img {
    width: 160px;
    height: 160px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    vertical-align: top;
}

.p-person__attr {
    font-size: 14px;
    color: #333333;
    text-align: center;
    line-height: 24px;
    padding-top: 40px;
}

.p-person__txt {
    color: #aeadad;
    font-size: 14px;
    padding-top: 30px;
    line-height: 24px;
}