#content {
    overflow: hidden;
}

.font-size-50 {
    font-size: 50px;
}

.font-size-17 {
    font-size: 17px;
}
.font-size-28 {
    font-size: 28px;
}
.font-size-20 {
    font-size: 20px;
    font-family: "Lato Bold";
}
.box{
    width: 1520px;
    margin: auto;
}
/* service */
.service {
    text-align: center;
    padding-top: 71px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 60px;
}
.service-content{
    width: 890px;
    padding: 0px 15px 48px;
}
.service .title {
    font-family: 'Lato Bold';
    display: inline;
    border: 0;
    padding-bottom: 10px;
    border-style: solid;
}
.dash-line-service{
    margin: auto;
    width: 180px;
    border: 0px;
    border-bottom: 2px;
    border-color: #f47936;
    border-style: solid;
    margin-bottom: 25px;
    margin-top: 10px;
}
.service .content {
    margin-top: 30px;
}
/* service item */
.grid-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
.service-item a{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.service-item-web{
    position: absolute;
    top: -36px;
}
.service-item-web a{
    flex-direction: column;
}
.title-app{
    width: 200px;
    margin-right: 10px;
}
.title-edu{
    width: 200px;
    margin-left: 30px;
}
.title-dev{
    width: 185px;
    text-align: end;
    margin-right: 30px;
}
.title-academy{
    width: 198px;
    margin-left: 30px;
}
.title-web{
    width: 265px;
    margin-top: 20px;
    text-align: center;
}
.text-color{
    color: #ff6e2e;
}
/* animation */
.relative{
    position: relative;
}
.circle-image {
    position: absolute;
}
.container-1{
    width: 410px;
    height: 410px;
    top: -30px;
    left: -30px;
}
.container-3{
    width: 380px;
    height: 380px;
    top: -15px;
    left: -15px;
}
.container-2{
    width: 200px;
    height: 200px;
    top: -15px;
    left: -15px;
}

.halfclip {
    width: 50%;
    height: 100%;
    right: 0px;
    position: absolute;
    overflow: hidden;
    transform-origin: left center;
}

.circle-image .halfclip {
    animation: cliprotate 2s 1;
    transform: rotate(180deg);
}
/* .circle-image.container-1 .halfclip {
    animation-delay: 6s;
}
.circle-image.container-2 .halfclip {
    animation-delay: 12s;
} */

@keyframes cliprotate {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(0deg);}
    50.01% {transform: rotate(180deg);}
    100% {transform: rotate(180deg);}
}

.halfcircle {
    box-sizing: border-box;
    height: 100%;
    right: 0px;
    position: absolute;
    border-radius: 50%;
}
.container-2 .halfcircle{
    border: solid 1px transparent;
    border-top-color: #ff783c;
    border-left-color: #ff783c;
}
.container-3 .halfcircle{
    border: dotted 5px transparent;
    border-top-color: #d4dbfa;
    border-left-color: #d4dbfa;
}
.container-1 .halfcircle{
    border: solid 1px transparent;
    border-top-color: #feebdb;
    border-left-color: #feebdb;
}
.clipped {
    width: 200%;
    transform: rotate(-45deg);
}
.circle-image .clipped {
    transform: rotate(135deg);
    animation: rotate 1s linear 2;
}
/* .circle-image.container-2 .clipped {
    animation-delay: 12s;
}
.circle-image.container-1 .clipped {
    animation-delay: 6s;
} */


@keyframes rotate {
    0% {transform: rotate(-45deg);}
    100% {transform: rotate(135deg);}
}

.fix {
    width: 100%;
    transform: rotate(135deg);
    opacity: 0;
}

.circle-image .fix {
    opacity: 1;
    animation: showfixed 2s 1;

}


@keyframes showfixed {
    0% {opacity: 0;}
    49.99% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 1;}
}
.dot-line{
    position: relative;
}
.dot {
    height: 15px;
    width: 15px;
    background-color: #ff8500;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
}
.dot-app{
    top: -9px;
    left: 56px;
    z-index: 1;
}
.dot-edu{
    top: -9px;
    left: -35px;
}
.line{
    height:0px;
    width:1px;
    border-bottom:1px solid #f36f28;
    animation: increase 2s;
    animation-fill-mode: forwards;
}

@keyframes increase {
    100% {
        width: 40px;
    }
}
.line-web{
    position: absolute;
    transform: rotate(-90deg);
    top: -13px;
    left: -15px;
}
.dot-web{
    top: -66px;
    left: -3px;
}
.line-dev{
    position: absolute;
    transform: rotate(-45deg);
    left: -93px;
    top: -97px;
}
.dot-dev{
    top: -134px;
    left: -47px;
}
.line-aca{
    position: absolute;
    transform: rotate(45deg);
    right: -98px;
    top: -108px;
}
.dot-aca{
    right: -45px;
    top: -157px;
}
.grid-item-web{
    position: relative;
}
/*  */
/* enviroment */
.environment-beetech{
    background-image: url("/assets/images/homePage/environment-and-slide.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 60px;
    padding-bottom: 100px;
    position: relative;
    margin-top: 277px;
}

.environment {
    text-align: center;
    margin-bottom: 45px;
    margin-top: 30px;
}

.environment .title {
    font-family: 'Lato Light';
    margin-bottom: -5px;
}

.environment .font-weight-bold {
    font-family: 'Lato';
}

.environment .content {
    font-family: 'Lato';
    margin: 25px 0px 35px;
}

.environment .dash-line {
    display: inline-block;
    width: 170px;
    border: 0px;
    border-bottom: 2px;
    border-style: solid;
}
.environment-slide{
    display: flex;
    flex-direction: column;
}
.environment-item{
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
}
.environment-left, .environment-right{
    display: flex;
    width: 50%;
}
.environment-left{
    margin-right: 20px;
}
.environment-right{
    margin-left: 20px;
}
.environment-slide .title {
    font-family: 'Lato Light';
}

.environment-slide .content {
    font-family: 'Lato';
}

.environment-slide .font-weight-bold {
    font-family: 'Lato Bold';
}

.environment-slide .dash-line {
    display: inline-block;
    border: 0px;
    border-bottom: 2px;
    border-style: solid;
    margin-bottom: 15px;
}
.chourei, .people-are-the-focus, .tea-break, .event-club, .idea, .rocket{
    opacity: 86%;
    padding: 40px 20px 0px;
}
.chourei{
    background-color: #f68394;
}
.chourei .dash-line{
    width: 145px;

}
.people-are-the-focus .title, .idea .title, .rocket .title{
    margin-bottom: 15px;
}
.people-are-the-focus{
    background-color: #f8de76;
}
.people-are-the-focus .dash-line{
    width: 50px;
    margin-bottom: 0px;
}
.tea-break{
    background-color: #6dd0d5;
}
.tea-break .dash-line{
    width: 50px;
}
.event-club{
    background-color: #fc976f;
}
.event-club .dash-line{
    width: 90px;
}
.idea{
    background-color: #cce4c0;
}
.idea .dash-line{
    width: 90px;
    margin-bottom: 0px;
}
.rocket{
    background-color: #e6cab3;
}
.rocket .dash-line{
    width: 65px;
    margin-bottom: 0px;
}
.environment-mb{
    display: none;
    text-align: center;
    margin-bottom: 45px;
    margin-top: 30px;
}
.environment-mb .dash-line{
    display: inline-block;
    width: 170px;
    border: 0px;
    border-bottom: 2px solid #f8b1a1;
}
.environment-mb .title {
    font-family: 'Lato Light';
    margin-bottom: -5px;
}

.environment-mb .font-weight-bold {
    font-family: 'Lato';
}

.environment-mb .content {
    font-family: 'Lato';
    margin: 25px 0px 35px;
}
.environment-slide-content-mb{
    display: none!important;
    background-image: url("/assets/images/homePage/environment-and-slide.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 26px;
}
.environment-slide-item-mb{
    padding: 30px 15px 150px;
    text-align: center;
}
.chourei-mb{
    background-color: #f6a4ad8c;
}
.people-are-the-focus-mb{
    background-color: #fde99b8c;
}
.idea-mb{
    background-color: #d9e3c48c;
}
.tea-break-mb{
    background-color: #91dadc8c;
}
.event-club-mb{
    background-color: #d9a2948c;
}
.rocket-mb{
    background-color: #c6b1aa8c;
}
.environment-slide-item-mb .dash-line{
    display: inline-block;
    width: 170px;
    border: 0px;
    border-bottom: 2px;
    border-style: solid;
}
.environment-slide-item-mb .content {
    font-family: 'Lato';
    margin-top: 15px;
    text-align: justify;
}
.environment-slide-item-mb .title{
    font-family: 'Lato Light';
    margin-top: 25px;
}
.environment-slide-item-mb p{
    margin-bottom: 0px;
}
.owl-theme .owl-dots .owl-dot span{
    width: 14px !important;
    height: 14px !important;
    background: white !important;
    margin-left: 3px;
    margin-right: 3px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
    background-color: rgb(255, 110, 46) !important;
}
.owl-theme .owl-dots, .owl-theme .owl-nav{
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.card-body{
    height: 120px;
    padding: 0px;
}
.job {
    background-image: url("/assets/images/homePage/job.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    padding: 85px 0px 0px;
    text-align: center;
}

.job .title {
    font-family: 'Lato Light';
}

.job .font-weight-bold {
    font-family: 'Lato Bold';
}

.job .content {
    font-family: 'Lato';
    margin-bottom: 50px;
}

.job .dash-line {
    display: inline-block;
    width: 265px;
    border: 0px;
    border-bottom: 2px;
    border-color: rgb(243, 72, 45);
    border-style: solid;
    margin-bottom: 30px;
}

.job .view-job {
    font-family: 'Lato Light';
    padding: 15px 50px;
    border-radius: 30px;
    border: 1px solid rgb(255, 110, 46);
    background-color: rgb(204, 226, 240);
}
.job .view-job:hover {
    color: white;
    background-color: #ff6e2e;
}
.news {
    padding: 50px 0px 85px;
}

.news .title {
    font-family: 'Lato Bold';
}

.news .view-news {
    font-family: 'Lato Light';
    padding: 15px 50px;
    border-radius: 30px;
    border: 1px solid rgb(255, 110, 46);
}
.news .view-news:hover {
    color: white;
    background-color: #ff6e2e;
}

.news .list-news {
    border: 0;
    border-bottom: 1px solid rgba(148, 148, 148, 0.685);
    padding: 17px 0px;
}

.news .time {
    font-family: 'Lato Bold';
    color: rgb(148, 148, 148);
}

.news .content {
    font-family: 'Lato';
    padding-left: 75px;
}
@media screen and (max-width: 1550px) {
    .box{
        max-width: 1200px;
    }
    .font-size-28 {
        font-size: 23px;
    }
    .chourei, .people-are-the-focus, .tea-break, .event-club, .idea, .rocket {
        padding: 15px 10px 5px
    }
    .chourei .dash-line, .tea-break .dash-line, .event-club .dash-line, .people-are-the-focus .title, .idea .title, .rocket .title {
        margin-bottom: 5px;
    }
    .font-size-17 {
        font-size: 16px;
    }
    .environment-slide img {
        width: 275px;
        height: 220px;
    }
    .title-app{
        width: 122px;
    }
    .title-edu{
        width: 130px;
        margin-left:0px;
    }
    .title-dev{
        width: 140px;
    }
    .title-academy {
        width: 140px;
        margin-left:0px;
    }
    .service-item img{
        width: 85%;
    }
    .dot-line1{
        margin-right: 45px;
    }
    .dot-line2{
        margin-left: -11px;
    }
    .container-2 {
        width: 175px;
        height: 175px;
    }
    .container-1 {
        width: 380px;
        height: 380px;
        top: -41px;
        left: -41px;
    }
    .container-3 {
        width: 350px;
        height: 350px;
        top: -24px;
        left: -24px;
    }
    .dot-app {
        left: 52px;
    }
    .line-dev {
        left: -114px;
        top: -80px;
    }
    .dot-dev {
        top: -115px;
        left: -78px;
    }
    .line-web {
        top: -9px;
        left: -39px;
    }
    .dot-web {
        top: -44px;
        left: -32px;
    }
    .line-aca {
        right: -86px;
        top: -81px;
    }
    .dot-aca {
        right: -50px;
        top: -115px;
    }
    @keyframes increase {
        100% {
            width: 30px;
        }
    }
}

@media screen and (max-width: 1450px) {
    .environment-slide{
        padding: 0px;
    }
}
@media screen and (max-width: 1200px) {
    .font-size-50 {
        font-size: 40px;
    }
    .font-size-20 {
        font-size: 18px;
    }
    .box{
        max-width: 100%;
    }
    .row{
        margin: 0px;
    }
    .service-item img {
        width: 75%;
    }
    .container-2 {
        width: 150px;
        height: 150px;
        top: -12px;
        left: -12px;
    }
    .container-1 {
        width: 350px;
        height: 350px;
    }
    .container-3 {
        width: 316px;
        height: 316px;
    }
    .dot-line2 {
        margin-left: -44px;
    }
    .line-web {
        top: -4px;
        left: -48px;
    }
    .dot-web {
        top: -28px;
        left: -40px;
    }
    .dot-aca {
        right: -57px;
        top: -110px;
    }
    .dot-edu {
        top: -8px;
        left: -32px;
    }
    .dot-dev {
        top: -109px;
        left: -83px;
    }
}

@media only screen and (max-width: 1100px){
    .font-size-50 {
        font-size: 35px;
    }
    .font-size-17 {
        font-size: 15px;
    }
    .font-size-16 {
        font-size: 18px;
    }
    .container-3 {
        width: 300px;
        height: 300px;
        top: -19px;
        left: -19px;
    }
    .container-1 {
        width: 325px;
        height: 325px;
        top: -30px;
        left: -30px;
    }
    @keyframes increase {
        100% {
            width: 20px;
        }
    }
    .dot-app {
        left: 36px;
    }
    .line-web {
        top: -7px;
        left: -41px;
    }
    .dot-web {
        top: -40px;
        left: -37px;
    }
    .dot-dev {
        top: -106px;
        left: -91px;
    }
    .dot-aca {
        right: -54px;
        top: -115px;
    }
    .service-item-edu{
        margin-left: 15px;
    }
}
@media screen and (max-width: 1024px) {
    .service{
        padding-top: 40px;
    }
}
@media screen and (max-width: 990px) {
    .environment-beetech{
        display: none;
    }
    .environment-mb{
        display: block;
    }
    .environment-slide-content-mb{
        display: block!important;
    }
    .service{
        height: 100%;
        padding-bottom: 0px;
    }
    .service-item{
        margin-top: 0px;
    }
    .grid-item {
        flex-direction: column;
    }
    .service-main{
        display: none;
    }
    .dot-line{
        display: none;
    }
    .service-item a{
        flex-direction: column;
    }
    .service-item-app a{
        flex-direction: column-reverse;
    }
    .title-app,.title-dev,.title-edu,.title-web,.title-academy{
        width: 300px;
        margin: auto;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 32px;
    }
    .relative {
        display: flex;
        justify-content: center;
    }
    .container-2 {
        top: -12px;
        left: 9px;
    }
    .service-item-web {
        position: unset;
    }
    .grid-item-web {
        position: unset;
    }

}
@media(max-width: 640px) {
    .service-item  .relative {
        display: block;
        text-align: center;
    }
}
@media screen and (max-width: 576px) {
    .card-body{
        height: 140px;
        padding: 0px;
    }
}
@media screen and (max-width: 480px) {
    .font-size-50 {
        font-size: 24px;
    }
    .card-body{
        height: 160px;
        padding: 0px;
    }
    .owl-theme .owl-dots .owl-dot span {
        width: 12px !important;
        height: 12px !important;
    }
    .environment-left, .environment-right {
        flex-direction: column;
    }
    .news .content{
        padding-left: 95px;
    }
    .news .view-news{
        padding: 15px 24px;
    }

}
@media screen and (max-width: 375px) {
    .card-body{
        height: 185px;
        padding: 0px;
    }
    .title-app,.title-dev,.title-edu,.title-web,.title-academy{
        width: 200px;
    }
}

.main-key {
    display: inline;
}

.bg-banner {
    background-image: url('../images/homePage/banner.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.bg-banner-2 {
    background-image: url('../images/homePage/banner2.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.bg-banner-3 {
    background-image: url('../images/homePage/banner3.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.bg-container {
    width: 57%;
    color: white;
    padding-top: 170px;
    padding-bottom: 150px;
}

.bg-title img {
    width: 700px !important;
    display: block;
    margin: auto;
    margin-right: 100px;
}

.bg-title .slogan {
    margin-top: 40px;
    display: flex;
    justify-content: end;
}

.bg-title .slogan p {
    font-size: 38px;
    width: 586px;
}

.btn-hotl {
    position: relative;
}

.btn-hotl img {
    width: 220px !important;
}

.btn-hotl p {
    position: absolute;
    font-size: 25px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
}
.banner-sp,
.banner-tablet {
    display: none;
}
.homePage-mobile{
    min-height: calc(100vw * 320 / 375);
}
.homePage-table{
    min-height: calc(100vw * 321 / 768);
}
.homePage-desktop{
    min-height: calc(100vw * 1031 / 2880);
}
@media screen and (max-width: 1920px) {
    .bg-banner {
        background-position: 50% 130%;
    }

    .bg-banner-2 {
        background-position: 50% 130%;
    }

    .bg-banner-3 {
        background-position: 50% 130%;
    }
}

@media screen and (max-width: 1440px) {
    .hotline {
        margin-top: 70px;
        justify-content: center;
    }
    .bg-container {
        max-width: 1025px;
        width: auto;
        padding: 170px 0 120px 0;
        margin-right: auto;
        margin-left: 30px;
    }
    .bg-title img {
        margin-right: auto;
        margin-left: 0;
    }
    .bg-title .slogan {
        justify-content: center;
    }
}

@media screen and (max-width: 1310px) {
    .bg-title img {
        width: 600px !important;
    }

    .bg-container {
        max-width: 60%;
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 1180px) {
    .bg-banner {
        background-size: initial;
        background-position: 30% 50%;
    }
    .bg-banner-2 {
        background-size: initial;
        background-position: 30% 50%;
    }
    .bg-banner-3 {
        background-size: initial;
        background-position: 30% 50%;
    }

    .bg-title img {
        margin-left: auto;
    }
    .bg-container {
        max-width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .banner-pc,
    .banner-sp {
        display: none;
    }
    .banner-tablet {
        display: block;
    }
}
@media screen and (max-width: 1024px) {
    .bg-container {
        width: 100%;
        padding-top: 100px;
        padding-left: 0;
        margin-left: 0;
    }
}

@media screen and (max-width: 600px) {
    .bg-title img {
        width: 100% !important;
    }
    .bg-container {
        padding-left: 20px;
        padding-right: 25px;
    }
    .bg-title .slogan p {
        font-size: 25px;
    }

    .hotline {
        margin-top: 40px;
        display: block;
    }

    .hotline div {
        width: fit-content;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 585px) {
    .banner-pc,
    .banner-tablet {
        display: none;
    }
    .banner-sp {
        display: block;
    }
}
@media screen and (max-width: 480px) {
    .bg-title .slogan p {
        font-size: 17px;
    }

    .hotline .phone a {
        font-size: 30px;
    }
}