body {
    background-color: #f3f9f5;
    background-image: url(/images/earlylms/main/line-01.png), url(/images/earlylms/main/main_pic.png), url(/images/earlylms/main/line-02.png);
    background-repeat: no-repeat;
    background-size: 500px;
    background-position: left 37px, right 37px, right 2500px;
    overflow-x: hidden;
}

/*--------------------[ MAIN ]------------------*/
.main {padding-top:30px;}
.main .main_content {max-width: 100%; margin:0 auto;}
.main .main_content div {background: url(/images/earlylms/main/laptop.png) no-repeat center center; width:100%; height:400px; background-size: 700px; margin:0 auto; margin-top:80px;}
.main .main_content h2 {margin-bottom: 10px;}
.main .main_content p {text-align: center; font-weight: 500;}
.main .main_content button {height:65px; width:360px; margin:0 auto; margin-top:30px; display: block; color:#fff;border: none;box-shadow: 0 5px 10px 0 rgba(46, 137, 66, 0.51);border-radius: 50px;font-size: 1.2em;text-align: center;cursor: pointer;letter-spacing: 1px;}

.container {min-width: 1024px; max-width: 1920px; margin:0 auto;}
/*--------------------[ SECTION1 ]------------------*/
.section1 {padding-top:150px; position: relative; }
.index span:first-child {font-size: 10em; font-weight: bold; color:#e7ebe8;}
.index span:last-child {font-size: 3em; font-weight: bold; color:#35a04d; position: absolute;}
.section1 .index span {transform: rotate(-90deg);}
.section1 .index span:first-child {display: inline-block; position: absolute; left:-50px;}
.section1 .index span:last-child {top:230px; left:0px; margin-left:-50px;}
.feature .txt_wrap {display: flex; justify-content: flex-start; padding-top:30px; z-index:50; margin-left:320px;}
.feature .txt_wrap div {border-right: 8px solid #fff; z-index: 99;  padding:0px 20px;}
.feature .txt_wrap div:last-child {border: none;}
.feature .txt_wrap .txt p {text-align: left;}
.feature .txt_wrap .txt p:first-child {font-weight: 700; font-size: 1.2em; padding-bottom:10px;}
.section1 img {width:110%; display: block; margin:0 auto; margin-top:-100px; margin-left:-50px;}

/*--------------------[ SECTION2 ]------------------*/
.section2 {position: relative;}
.section2 .index span {transform: rotate(90deg);}
.section2 .index span:first-child {display: inline-block; position: absolute; right:-55px; top:-200px}
.section2 .index span:last-child {top:-120px; right:-140px;}
.section2 .title {margin-top:-180px; font-size: 0.8em;}
.title img {width:40px; margin:10px auto; display: block; margin-top:50px;}
.title h2 {color:#969a97; margin-top:20px;}
.course_wrap {min-width: 1024px; max-width: 1920px; margin:0 auto; margin-top:100px;}
.course_wrap .course {display: flex; justify-content: space-around; align-items: center;}
.course_wrap .course img {height:450px;}
.course_wrap .course_txt span {display: inline-block; width:10px; height:30px; background: #44af5c; border-radius: 50px; margin-right:10px;}
.course_wrap .course_txt h3 {text-align: left; margin-bottom: 15px; font-weight: 500;}
.course_wrap .course_txt p {width:400px;}

/*--------------------[ SECTION3 ]------------------*/
.section3 {margin-top:120px; position: relative;}
.section3 .index span {transform: rotate(-90deg);}
.section3 .index span:first-child { display: inline-block; position: absolute; left:-50px; top:100px;}
.section3 .index span:last-child {left:-40px; top:170px;}
.section3 .title {padding-top:80px;}
.section3 .map {height:500px; margin:80px auto; display: block;}

/*--------------------[ SECTION4 ]------------------*/
.section4 {margin-top:50px; position: relative;}
.section4 .index span {transform: rotate(90deg); display: inline-block; font-size: 10em; font-weight: bold; color:#e7ebe8; position: absolute; right:-50px; top:190px;}
.section4 .finish {background: url(/images/earlylms/main/final.svg) left center no-repeat; width:100%; height:550px;}
.section4 .section4_txt {position: absolute; top:200px; left:60%; transform: translate(-50%);}
.section4 .section4_txt h3 {font-weight: 500;}
.section4 .section4_txt button {color:#fff; width:300px; height:60px; margin:0 auto; display: block; margin-top:30px;border: none;box-shadow: 0 5px 10px 0 rgba(46, 137, 66, 0.51);border-radius: 50px;font-size: 1.2em;text-align: center;cursor: pointer;letter-spacing: 1px;}


/*--------------------[ MEDIA QUERY ]------------------*/

@media only screen and (min-device-width : 375px) and (max-device-width : 667px) { 
    /*MAIN*/
    .main {padding-top:10px; width:100%;}
    .main .main_content {max-width: 100%; margin:0 auto;}
    .main .main_content div {background-size: 350px; margin-top:100px; height:200px;}
    .main .main_content h2 {margin-bottom: 20px; line-height: 120%; font-size: 1.7em;}
    .main .main_content p {margin-top:-5px;}
    .main .main_content button {margin-top:20px;}

    .container {min-width: 100%; max-width: 100%;}

    /*SECTION1*/
    .section1 {padding-top:60px; overflow-x: hidden;}
    .index span:first-child {font-size: 4em;}
    .index span:last-child {font-size: 2em;}
    .section1 .index span {transform: rotate(0deg);}
    .section1 .index span:first-child {left:50%; transform: translateX(-50%);}
    .section1 .index span:last-child {top:130px; left:50%; transform: translateX(-50%); margin-left: 0;}
    .feature .txt_wrap {flex-flow: column; padding-top:130px; margin-left: 0px;}
    .feature .txt_wrap div {border-right: none; padding:10px 0px;}
    .feature .txt_wrap .txt p {text-align: center;}
    .section1 img {width:200%; margin-top:-50px; margin-left: -200px;}

    /*SECTION2*/
    .section2 {top:280px;}
    .section2 .index span {transform: rotate(0deg);}
    .section2 .index span:first-child {right:50%; transform: translateX(50%);}
    .section2 .index span:last-child {top:-125px; right:50%; transform: translateX(50%); width:100%; text-align: center;} 
    .course_wrap {min-width: 100%; width:100%; margin:0 auto; margin-top:50px; padding:0px;}
    .course_wrap .course {flex-flow: column; margin-top:50px;}
    .course_wrap .course img {height:280px;}
    .course_wrap .course_txt span {display: inline-block; width:10px; height:30px; background: #44af5c; border-radius: 50px; margin-right:10px;}
    .course_wrap .course_txt h3 {text-align: left; margin-bottom: 15px; font-weight: 500;}
    .course_wrap .course_txt p {width:300px;}

    /*SECTION3*/
    .section3 {top:170px;}
    .section3 .index span {transform: rotate(0deg);}
    .section3 .index span:first-child {left:50%; transform: translateX(-50%); top:0px;}
    .section3 .index span:last-child {left:50%; transform: translateX(-50%); margin-left: 0px; margin-top:10px; top:60px;}
    .section3 .map {height:200px; margin:0px auto; margin-top:50px;}

    /*SECTION4*/
    .section4 {margin-top:150px; position: relative;}
    .section4 .index span {transform: rotate(0deg); font-size: 4em; top:30px; right:50%; transform: translateX(50%);}
    .section4 .finish {background: url(/images/earlylms/main/final.svg) left bottom no-repeat;}
    .section4 .section4_txt {top:170px; left:50%; transform: translate(-50%);}
    .section4 .section4_txt h3 {margin-top:-70px;font-size: 1.4em; white-space: nowrap}
}

@media only screen and (min-width : 667px) and (max-height : 414px) {
    .main-menu a {height:56px; line-height: 56px;}
    .section1 img {width:130%; margin-left:-100px;}
    .section3 .map {height:300px;}
    .section4 .finish {background-size: 400px; height:320px;}
}