body{ background: #E9E9E9; } .main-body{ padding: 0px; } .home-intro{ background: url('../imgs/home-background-01.jpg'); padding: 0px 15px; } .home-intro-cover{ max-width: 1140px; margin: auto; } .home-intro-left{ width: 50%; float: left; text-align: center; padding-top: 40px; } .home-intro-right{ width: 50%; text-align: center; float: left; display: flex; min-height: 600px; } .home-intro-right-cover{ display: inline-block; margin: auto; text-align: center; padding-bottom: 50px; } .home-intro-name{ font-family: opensansbold; font-size: 50px; line-height: 60px; color: #fff; margin-bottom: 20px; } .home-intro-line{ display: block; width: 85px; height: 2px; background: #fff; margin: auto; } .powerful-method{ min-height: 50px; float: left; width: 100%; margin-top: -50px; background: #000; opacity: 0.7; text-align: center; padding-top: 10px; } .powerful-method p{ color: #fff; font-size: 20px; font-family: opensanssemibold; } .home-intro-detail{ font-family: opensansregular; font-size: 25px; color: #fff; line-height: 32px; margin: auto; margin-top: 20px; max-width: 270px; } .home-teacher-container .home-intro-button{ font-family: opensanssemibold; font-size: 18px; color: #fff; text-align: center; text-decoration: none; outline: 0px; border: 0px; text-transform: uppercase; display: block; width: 230px; height: 50px; line-height: 50px; background: #7AC60C; border-radius: 30px; margin: auto; margin-top: 20px; border-bottom: 2px solid #4c7b09; } .home-teacher-container .home-intro-try-free{ font-family: opensanslight; font-size: 18px; color: #fff; display: block; margin: auto; text-decoration: none; margin-top: 15px; } .home-intro-2{ width: 100%; margin: auto; background: #E9E9E9; padding: 30px 0px; } .home-intro-title{ line-height: 20px; font-size: 18px; font-family: opensansregular; color: #414042; margin: 0px; text-align: justify; } .home-intro-line-2{ display: inline-block; width: 80px; height: 5px; background: #231F20; margin: 15px 0px 20px; } .home-intro-detail-small{ font-family: opensanslight; font-size: 15px; line-height: 20px; color: #939598; text-align: justify; margin-bottom: 15px; margin-top: 10px; } .home-intro-2-left{ padding: 0px 15px; } .home-intro-2-left .left-cover{ width: 100%; margin: auto; } .home-intro-2 .home-intro-link-video{ font-family: opensanssemibold; font-size: 15px; color: var(--color-text-main); outline: 0px; } .home-intro-link-video::before{ content: ""; display: inline-block; background: url('../imgs/icon-home.svg') 0px 0px; text-align: center; width: 20px; height: 20px; cursor: pointer; vertical-align: text-bottom; margin-right: 10px; } .home-intro-link-video:hover::before{ background: url('../imgs/icon-home.svg') -25px 0px; } .home-img-cover{ text-align: center; } .home-img-cover img{ max-width: 100%; } .home-step-container{ padding: 30px 15px 5px; background: #fff; text-align: center; } .home-step-cover{ max-width: 1140px; margin: auto; } .home-step-title{ font-family: opensansregular; font-size: 20px; color: #231F20; margin: 0px; } .home-step-intro{ font-family: opensanslight; font-size: 15px; line-height: 24px; color: #231F20; margin: 0px; margin-bottom: 20px; } .home-step-item{ padding-left: 30px; margin-bottom: 15px; } .home-step-item .item-image{ width: 25px; height: 30px; display: flex; position: absolute; left: 15px; top: 0px; } .home-step-item .item-image span{ display: inline-block; margin: auto; background: url('../imgs/icon-home.svg'); } .home-step-item .item-image span.image-1{ width: 21px; height: 25px; background-position: 0px -1410px; } .home-step-item .item-image span.image-2{ width: 18px; height: 17px; background-position: 0px -1440px; } .home-step-item .item-image span.image-3{ width: 11px; height: 20px; background-position: 0px -1460px; } .home-step-item .item-name{ font-family: opensansregular; font-size: 17px; color: #58595B; margin: 0px; text-align: left; } .home-step-item .item-description{ font-family: opensanslight; font-size: 15px; color: #939598; margin: auto; line-height: 21px; text-align: justify; } .home-step-image{ text-align: center; padding: 0px 15px; } .home-step-image img{ max-width: 100%; margin-bottom: 15px; } .home-step-container .home-step-button{ font-family: opensanssemibold; font-size: 14px; color: #fff; display: block; height: 48px; width: 170px; background: #7AC30C; border-bottom: 2px solid #6EA50E; border-radius: 30px; line-height: 48px; text-shadow: 0px -2px #6EA50E; margin: auto; margin-top: 50px; text-decoration: none; } .home-product-container{ padding: 30px 15px 55px; text-align: center; } .home-product-cover{ max-width: 1140px; margin: auto; } .home-product-title{ font-family: opensansregular; font-size: 20px; line-height: 22px; color: #414042; margin: 0px; margin-bottom: 5px; } .home-product-intro{ font-family: opensanslight; font-size: 15px; line-height: 20px; color: #414042; margin: 0px; } #home-product-slider{ position: relative; top: 0px; left: 0px; height: 375px; margin: auto; } #home-product-slider .slider-container-cover{ cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; height: 360px; } .home-product-item{ display: inline-block; width: 259px; height: 340px; border: 1px solid #E3E4E5; border-radius: 7px; box-shadow: 0 0 10px rgba(0,0,0,.1); margin: 0px 15px; margin-top: 30px; cursor: pointer; background: #fff; } .home-product-item .product-image{ display: inline-block; width: 293px; height: 135px; border-radius: 0px; border-top-left-radius: inherit; border-top-right-radius: inherit; overflow: hidden; } .home-product-item .product-image img{ width: 100%; height: 100%; } .home-product-item .product-infor{ display: inline-block; width: 100%; height: 115px; overflow: hidden; padding: 15px; text-align: left; } .home-product-item .product-name{ font-family: opensanssemibold; font-size: 16px; line-height: 20px; color: var(--color-main-text); margin-bottom: 0px; margin-top: 0px; text-align: left; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } .home-product-item .product-level{ font-family: opensansregular; font-size: 13px; line-height: 18px; color: var(--color-text-main); margin-bottom: 0px; margin-top: 8px; text-align: left; } .home-product-item .product-info{ font-family: opensansregular; font-size: 13px; line-height: 18px; color: var(--color-gray); margin-bottom: 0px; margin-top: 3px; text-align: left; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; } .home-product-item .product-button{ width: calc(100% - 30px); height: 45px; position: absolute; bottom: 15px; left: 15px; text-align: center; line-height: 45px; border-radius: 25px; background: var(--color-blue); } .home-product-item .product-button .button-learn-now{ font-family: opensanssemibold; font-size: 15px; color: #fff; margin: auto; } .home-teacher-container{ padding: 20px 15px; background: #fff; } .home-teacher-cover{ max-width: 1140px; margin: auto; } .home-teacher-container .teacher-name{ font-family: opensansregular; font-size: 20px; color: var(--color-text-main); text-align: center; line-height: 22px; margin: 0px; text-transform: uppercase; } .home-teacher-container .teacher-pos{ font-family: opensanslight; font-size: 15px; color: #414042; text-align: center; line-height: 20px; margin: 0px; margin-bottom: 15px; } .home-teacher-container .teacher-info{ font-family: opensansregular; font-size: 15px; color: #414042; text-align: center; line-height: 21px; margin: 0px; margin-bottom: 21px; text-align: justify; } .home-teacher-container .teacher-info span{ font-family: opensanssemibold; } .home-teacher-container .button-more{ text-decoration: none; outline: 0px; color: var(--color-text-main); font-family: opensanslight; font-size: 15px; cursor: pointer; text-align: center; display: block; } .home-teacher-container .button-more i{ font-size: 30px; display: block; transition: 0.4s all ease; margin-bottom: -5px; } .home-teacher-info-cover{ overflow: hidden; } .home-teacher-container-top{ background: radial-gradient(circle at center 150px, rgba(255, 255, 255, .3) 0px, rgba(255, 255, 255, 0) 200px), radial-gradient(circle at center 150px, #B7EB2B 0px, #80C200 250px); padding: 40px 15px 50px; } .home-teacher-cover-top{ max-width: 1140px; margin: auto; } .home-teacher-container-top .home-teacher-left{ text-align: center; } .home-teacher-container-top .home-teacher-left .teacher-image{ max-width: 100%; border-radius: 50%; } .home-teacher-container-top .home-teacher-left .teacher-name{ font-family: opensanssemibold; font-size: 35px; color: #fff; margin: 0px; margin-bottom: 10px; } .home-teacher-container-top .home-teacher-left .teacher-pos{ font-family: opensanslight; font-size: 20px; color: #fff; margin: 0px; } .home-teacher-container-top .home-teacher-right{ padding-left: 60px; } .home-teacher-container-top .home-teacher-right .teacher-info{ font-family: opensansregular; font-size: 15px; color: #fff; margin-bottom: 10px; line-height: 21px; text-align: justify; } .home-teacher-container-top .home-teacher-right .teacher-info span{ color: var(--color-text-main); } .home-teacher-container-top .home-teacher-right .teacher-info span.tbold{ font-family: opensanssemibold; } .home-teacher-container-top .home-intro-button{ font-family: opensanssemibold; font-size: 18px; color: #fff; text-align: center; text-decoration: none; outline: 0px; border: 0px; display: block; width: 230px; height: 50px; line-height: 50px; background: #FEBF10; border-radius: 30px; margin: auto; margin-top: 20px; border-bottom: 2px solid #FFB020; } .home-teacher-container-top .home-intro-try-free{ font-family: opensanslight; font-size: 18px; color: #fff; display: block; margin: auto; text-decoration: none; margin-top: 15px; } #home-video iframe{ height: 300px; } .home-student-container{ padding: 20px 15px; text-align: center; background: #F2F2F2; } .home-student-cover{ max-width: 1140px; margin: auto; } .home-student-title{ font-family: opensansregular; font-size: 20px; line-height: 25px; color: var(--color-default-text); margin: 0px; margin-bottom: 0px; } .home-student-intro{ font-family: opensanslight; font-size: 15px; line-height: 20px; color: var(--color-default-text); margin: 0px; margin-bottom: 20px; } .home-student-text-bottom{ font-family: opensanslight; font-size: 25px; color: #231F20; max-width: 430px; margin: auto; } .home-student-cover .home-student-button{ font-family: opensanssemibold; font-size: 14px; color: #fff; display: block; margin: auto; width: 230px; height: 50px; border-bottom: 2px solid #FF9D00; border-radius: 30px; text-shadow: 0px -1px #FF9D00; background: #FFB020; line-height: 48px; text-decoration: none; margin-top: 30px; } .home-student-list{ padding-bottom: 5px; } #home-student-slider{ position: relative; top: 0px; left: 0px; height: 350px; margin: auto; } #home-student-slider .slider-container-cover{ cursor: pointer; position: absolute; overflow: hidden; left: 0px; top: 0px; height: 350px; } .home-student-item{ display: flex; text-align: center; } .home-student-item>a{ width: 100%; } .home-student-item .item-cover{ margin: auto; padding: 20px; } .home-student-item.item-active .item-cover{ height: 340px; width: 260px; padding-top: 25px; } .home-student-item .item-image{ width: 80px; height: 80px; border: 2px solid #F2F2F2; box-shadow: 0px 0px 0px 1px var(--color-blue-bg); border-radius: 50%; margin-bottom: 15px; transition: inherit; } .home-student-item .item-name{ color: var(--color-text-main); font-family: opensansregular; font-size: 20px; margin-bottom: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: inherit; } .home-student-item .item-detail{ color: var(--color-text-main); font-family: opensanslight; font-size: 15px; line-height: 22px; margin: auto; max-width: 350px; padding: 0px 20px; position: relative; overflow: hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; } .home-student-item .item-detail::before, .home-student-item .item-detail::after{ content: ""; display: inline-block; width: 53px; height: 42px; background: url('../imgs/icon-home.svg'); position: absolute; z-index: -1; } .home-student-item .item-detail::before{ background-position: 0px -1490px; left: 0px; top: 0px; } .home-student-item .item-detail::after{ background-position: 0px -1550px; right: 0px; bottom: 0px; } .home-student-item .item-button{ font-family: opensanssemibold; font-size: 16px; color: #fff; background-color: #7AC60C; display: block; width: 130px; height: 40px; line-height: 40px; border: 0px; outline: 0px; text-align: center; text-decoration: none; text-transform: uppercase; margin: auto; border-radius: 30px; margin-top: 15px; transition: inherit; } .home-student-item.item-active .item-name{ font-size: 16px; } .home-student-item.item-active .item-image{ width: 85px; height: 85px; } .home-student-item.item-active .item-button{ font-size: 17px; width: 140px; height: 46px; line-height: 46px; } .home-student-item.item-active .item-detail{ font-size: 15px; line-height: 20px; height: 100px; } .home-bullet-navigator-cover{ position: absolute; bottom: -30px; display: none; } .home-student-container .home-bullet-navigator-cover{ display: none; } .home-bullet-navigator{ width: 9px; height: 9px; background: transparent; border: 1px solid var(--color-blue-bg); border-radius: 50%; transition: 0.2s all linear; } .home-bullet-navigator.home-bullet-navigatorav{ opacity: 1; width: 11px; height: 11px; background: var(--color-blue-bg); transform: translate(-1px, -1px); }