@charset "UTF-8";
/*20160302  liboyuan*/

html, body {
    height: 100%;
    background: #f1f1f1;
}
a {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.bg_home_box {
    width: 100%;
    height: 100%;
}
.m_main_inner320 {
    margin: 0 auto;
    width: 320px;
    height: 100%;
    position: relative;
}
.red_btn {
    background: #f51e55;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    border: 0;
}
.m_bg_white {
    background: #fff;
}
.pt30 {
    padding-top: 30px;
}
/* top */

.m_top_box {
    width: 100%;
    height: 500px;
    background: url(/dev/product/www_v3/imgs/index/index_mobile/m_top_bg.jpg) center center no-repeat;
}
.m_top_box p {
    text-align: center;
    color: #000;
}
.m_top_btn {
    display: block;
    width: 260px;
    height: 50px;
    line-height: 50px;
    color: #fff !important;
    font-size: 18px;
    text-align: center;
    position: absolute;
    bottom: 16px;
    left: 30px;
    opacity: 0;
    -webkit-transition: 1.5s 2s all;
    transition: 1.5s 2s all;
}
.m_title_text1 {
    font-size: 18px;
    padding-top: 65px;
    line-height: 40px;
    opacity: 0;
    -webkit-transition: 1.5s 1s all;
    transition: 1.5s 1s all;
}
.m_title_text2 {
    font-size: 30px;
    line-height: 60px;
    opacity: 0;
    -webkit-transition: 1.5s 1.5s all;
    transition: 1.5s 1.5s all;
}
.m_add_ainimeat {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
    opacity: 0.9;
}
/* 热门职业 */

.m_zhiye_com {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}
.m_main_title_all {
    font-size: 18px;
    color: #000;
    text-align: center;
    line-height: 58px;
    max-width: 720px;
    margin: 0 auto;
    opacity: 0;
}
.m_zhiye_bg {
    width: 100%;
    height: 197px;
    background: url(/dev/product/www_v3/imgs/index/index_mobile/m_zhiye_bg.jpg) center center no-repeat;
}
/* 课程 + 小试牛刀 */

.swiper-container {
    width: 100%;
    max-width: 720px;
    overflow: hidden;
    margin: 0 auto;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.swiper-slide {
    background: #fff;
    border-radius: 3px;
    width: 178px;
    float: left;
    background: #fff;
    box-shadow: 0 0 20px #ddd;
}
.swiper-wrapper {
    width: 840px;
    height: 240px;
}
.m_sx_box .swiper-wrapper {
    height: 160px;
}
.swiper-slide a {
    display: block;
    height: 240px;
}
.m_sx_box .swiper-slide a {
    height: 160px;
}
.m_class_list_img {
    margin: 2px 2px 5px;
    border-radius: 3px;
    width: 174px;
    height: 180px;
}
.m_sx_list_img {
    width: 70px;
    height: 70px;
    margin: 18px 54px 8px;
}
.m_classes_text {
    padding: 0 12px;
    color: #333;
    font-size: 14px;
    line-height: 22px;
}
.m_more_btn {
    width: 160px;
    height: 40px;
    color: #fff !important;
    font-size: 14px;
    line-height: 40px;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.m_line {
    margin: 36px auto 10px;
    font-size: 1px;
    line-height: 1px;
    height: 1px;
    background: #d0d0d0;
    display: block;
    width: 280px;
}
/* latiao */

.m_lt_box {
    height: 179px;
    width: 100%;
    background: url(/dev/product/www_v3/imgs/index/index_mobile/m_lt_bg.jpg) center center no-repeat;
}
.m_lt_box a:not(.m_more_btn) {
    text-align: center;
    font-size: 14px;
    color: #000;
    line-height: 26px;
    display: block;
    opacity: 0;
}
.m_lt_box .m_more_btn {
    margin-top: 16px;
}
/* 切换 */

.m_pic_box {
    height: 280px;
    width: 100%;
    background: url(/dev/product/www_v3/imgs/index/index_mobile/m_pic_bg.jpg) center center no-repeat;
}
.m_relative {
    position: relative;
}
.m_pic_list1 {
    position: absolute;
    left: 74px;
    top: 39px;
    z-index: 100;
}
.m_pic_list2 {
    position: absolute;
    left: 4px;
    top: 85px;
    z-index: 60;
    opacity: 0;
}
.m_pic_list3 {
    position: absolute;
    right: 6px;
    top: 63px;
    z-index: 40;
    opacity: 0
}
/* 教师 */

.m_teac_box {
    height: 269px;
    width: 100%;
    padding-top: 23px;
    background: url(/dev/product/www_v3/imgs/index/index_mobile/m_teac_bg.jpg) center center no-repeat;
}
.m_teac_box li {
    float: left;
    width: 80px;
    height: 80px;
    margin: 0 18px 20px 11px;
    opacity: 0;
}
.m_teac_box li:nth-of-type(3), .m_teac_box li:nth-of-type(6) {
    margin-right: 11px;
}
.m_teac_box li a {
    display: block;
}
.m_teac_box li img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
/* footer */

.m_footer_box {
    width: 100%;
    height: 285px;
    background: url(/dev/product/www_v3/imgs/index/index_mobile/m_footer_bg.jpg) center center no-repeat;
}
.m_footer_box .m_main_title_all {
    color: #fff;
}
.m_footer_box .m_line {
    color: #a0a0a0;
    margin-top: 50px;
    margin-bottom: 0;
}
.m_friend_link, .m_friend_link a {
    color: #b0b0b0 !important;
    font-size: 12px;
    text-align: center;
    line-height: 24px;
}
.m_friend_link a:not(:last-child) {
    margin-right: 8px;
}
/* icp */

.m_icp {
    position: absolute;
    bottom: 20px;
    right: 32px;
    text-align: right;
}
.m_icp_num {
    color: #707070;
    line-height: 20px;
}
.m_icp_en {
    color: #b0b0b0;
    line-height: 20px;
}
/* 动画 */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg);
        -ms-transform: perspective(400px) rotateY(-10deg);
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg);
        -ms-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        -ms-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}
.flipInY {
    -webkit-backface-visibility: visible!important;
    -ms-backface-visibility: visible!important;
    backface-visibility: visible!important;
    -webkit-animation-name: flipInY;
    animation-name: flipInY;
}
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
    70% {
        -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
        transform: scale(.9);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}
.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}
@keyframes wobble {
    0% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }
    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        -ms-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        -ms-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        -ms-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        -ms-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        -ms-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        -webkit-transform: translateX(0%);
        -ms-transform: translateX(0%);
        transform: translateX(0%);
    }
}
.wobble {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}
@-webkit-keyframes rotateY2D {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
        opacity: 1;
    }
}
@keyframes rotateY2D {
    0% {
        -webkit-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateY(360deg);
        -ms-transform: rotateY(360deg);
        transform: rotateY(360deg);
        opacity: 1;
    }
}
.rotateY2D {
    -webkit-animation-name: rotateY2D;
    animation-name: rotateY2D;
    -webkit-animation-timing-function: cubic-bezier(0.380, 0.545, 0.435, 1.650);
    animation-timing-function: cubic-bezier(0.380, 0.545, 0.435, 1.650);
}