﻿.groupcontent { width: 988px;  font-weight: 600; margin: 0px auto; margin-top: 113px; }
.groupcontent_title { font-size: 24px; text-align: center; /* color: #009999; */
padding: 0px 40px 0px 40px; font-weight: 600; }
.groupcontent_line { width: 54px; margin: 0px auto; margin-top: 55px; border: 1px solid #00c7c5; }
.group1, .group2 { margin-top: 190px; overflow: hidden; padding: 0px 40px 0px 40px; }
.group1_left { width: 50%; float: left; text-align: left; padding-right: 56px; }
.group1_right { color: #666666; text-align: left; padding-top: 173px; font-size: 16px; }
.group1_img1 { box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group1_img2 { position: relative; z-index: 9; border-radius: 360px; margin-left: 135px; margin-top: -80%; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group2 { margin-top: 150px; text-align: center; width: 100%;}
.group2_left { float: left; width: 40%; }
.group2_right { float: right; width: 60%; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group2_text { font-size: 24px; color: #000; padding-bottom: 10px; text-align: left; }
.group2_text span { font-size: 16px; color: #666; }
.group3 { margin-top: 270px; overflow: hidden; }
.group3_left { float: left; width: 50%; }
.group3_img { box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group3_img1 { border-radius: 5px; position: absolute; z-index: 99; margin-top: -313px; margin-left: -44px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group3_img2 { border-radius: 5px; position: relative; z-index: 99; margin-top: -251px; margin-left: 310px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group3_img3 { border-radius: 5px; position: relative; z-index: 99; margin-top: -168px; margin-left: 80px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group3_right { float: right; width: 50%; font-size: 24px; color: #000; padding-top: 118px; padding-left: 55px; }
.group3_right span { font-size: 12pt; color: #666; line-height: 24px; display: inline-block; }
.group4 { height: 335px; position: relative; margin-top: 178px; overflow: hidden; margin-bottom: 75px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group4_left { float: left; }
.group4_right { float: left; }
#group4_img1, #group4_img3 { }
#group4_img2, #group4_img4 { display: none; }
.group4_text { position: relative; z-index: 99; color: #fff; margin-top: -40%; text-align: center; font-size: 15pt; }
.group4_btn { margin-top: 20px; }
.group4_btn a { color: #fff; font-size: 7pt; padding: 7px 15px; border-radius: 5px; border: 1px solid #fff; }
.group4_btn a:hover { color: #fff; background: #009999; border: 1px solid #009999; }
/*makar for school*/
.groupcontent2 { width: 980px; overflow: hidden; font-weight: 600; margin: 0px auto; margin-top: 113px; }
.group1_school { overflow: hidden; margin-top: 80px; }
.group1_school_img, .group2_school_img { width: 50%; float: left;}
.group1_school_img img { width: 100%; max-width: 320px; }
.group1_school_text, .group2_school_text, .group3_school_text { width: 50%; float: left; font-size: 22pt; color: #000; padding-top: 10%; }
.group1_school_text { padding-top: 2%; padding-right: 10px; margin-top:8px}
.group1_school_text span, .group2_school_text span, .group3_school_text span { font-size: 12pt; color: #666; }
.group2-school { overflow: hidden; margin-top: 150px; }
.group2_school_img { width: 50%; float: left;text-align: right; }
.group2_school_img img { width: 100%; max-width: 320px;  }
.group3-school { overflow: hidden; margin-top: 150px; }
.group3_school_img { float: left; width: 50%;}
.group3_school_img1 { width: 320px; }
.group3_school_img2 { width: 127px; position: relative; z-index: 99; margin-top: -251px; margin-left: 116px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group3_school_img3 { width: 127px; position: relative; z-index: 99; margin-top: -360px; margin-left: 312px; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
/*.group3_school_text { padding-left: 55px; }*/
.banner_dowload { width: 100%; overflow: hidden; margin-top: 150px; background:#f1f1f1; padding:70px 0;}
.banner_dowload_img { border-top: 3px solid #00ccc3; }
.banner_dowload_img img { width: 100%; }
.banner_btn { width: 465px; margin: 0 auto; }
.banner_dowload_txt {
    font-size: 12px;
    color: #000;
    margin: 30px auto;
    display: table;
}
.bnt_dowload { /* width: 173px; */ margin: 0px auto; background: #3973ed; color: #fff; padding: 15px 42px; text-align: center; font-size: 10pt; cursor: pointer; margin-top: 30px; border-radius: 5px; }
.bnt_dowload a { color: #fff }
.bnt_dowload:hover { color: #fff; background-color: #2755cc; border-color: #2755cc; }
/*makar for school*/

/*makar editor*/
.container2 { margin-top: -50px; }
.container_box p { font-size: 18pt; font-weight: 600; }
.dropdown2 { width: 174px; margin: 0px auto; }
.groupcontent3 { width: 100%; overflow: hidden; margin-top: 130px; }
.margin-line { margin-top: 28px; margin-bottom: 5px; }
.groupcontent2_txt { width: 90%; margin: 0px auto; color: #666; text-align: center; font-weight: 600; line-height: 30px; font-size: 16px; }
.group1_editor { margin-top: 250px; overflow: hidden; }
.group1_editor_left { width: 45%; float: left; position: relative; margin-left: 10px; overflow: hidden; text-align: center; }
.group1_editor_left img, .group2_editor_right img, .group3_editor_left img { max-width: 350px; }
.group1_editor_img1 { position: absolute; z-index: 1; left: 10%; top: 0px; width: 30%; }
.group1_editor_img2 { position: relative; z-index: 2; margin: 0px auto; margin-top: 30px; width: 60%; }
.group1_editor_img3 { position: absolute; z-index: 3; right: 15%; bottom: 0px; width: 30%; }
.group1_editor_right, .group2_editor_left, .group3_editor_right { width: 40%; float: left; font-size: 22pt; color: #000; font-weight: 600; padding-top: 160px; }
.group1_editor_right span, .group2_editor_left span, .group3_editor_right span { font-size: 18pt; color: #666; }
.group2_editor { overflow: hidden; margin-top: 104px; padding: 50px 0px; }
.group2_editor_left { padding-left: 10%; }
.group2_editor_right { width: 50%; float: right; right: 10%; text-align: right; position: relative; }
.group2_editor_img1 { width: 25%; max-width: 205px; position: absolute; z-index: 99; -ms-transform: skew(20deg, 10deg); -webkit-transform: skew(20deg, 10deg); transform: skew(-20deg, 10deg); }
.group2_editor_img2 { width: 42%; max-width: 384px; position: relative; z-index: 9; -ms-transform: skew(20deg, 10deg); -webkit-transform: skew(20deg, 10deg); transform: skew(-20deg, 10deg); }
.group3_editor { overflow: hidden; margin-top: 90px; }
.group3_editor_left { width: 50%; float: left; }
.group3_editor_right { width: 40%; float: left; padding-left: 70px; padding-top: 220px; }
.groupcontent_title2 { color: #000; }
.group4_editor { overflow: hidden; margin-top: 125px; margin-bottom: 0; background: #fafafa; padding: 65px 0px 35px 0; }
.group4_editor_text { width: 900px; margin: 0px auto; position: relative; color: #999999; font-size: 12pt; text-align: left; border: 1px solid #eaeaea; height: 44px; line-height: 44px; }
.group4_editor_text2 { background: #f2f2f2; }
.group4_editor_1, .group4_editor_2 { color: #000; font-size: 16px; font-weight: 600; }
.group4_editor_1 { position: absolute; left: 45%; z-index: 99; }
.group4_editor_2 { position: absolute; right: 13%; z-index: 99; }
.group4_editor_left { width: 33%; float: left; text-align: left; font-size: 14px; }
.group4_editor_left2 { text-align: left; padding-left: 24px; color: #666; }
.group4_editor_text span { padding-left: 46%; }
.group4_editor_text span span { position: absolute; z-index: 99; right: 0px; }
.w3_line { border: 2px solid #16b0b0; }
.dropdown_box { margin-bottom: -50px; }
.dropdown_box span { font-size: 26pt; font-weight: 600; }
.dropdown_box span span { font-size: 18pt; font-weight: 600; }
/*-----------------------------------------------------------------------------------------ML---------------------------------------------------------------------------*/
.bottom-banner-title {
font-size: 24px;

margin-bottom: 40px;
    font-weight: bold;
    text-align: center;

}.dev-tool-sub-banner {
    width: 400px;
    margin: 0 auto;
    text-align: center;
}
.dev-tool-sub-banner p {

    margin-top: 30px;
    font-size: 14px;

}.dev-tool-inner-box {
text-align: center;
    width: 25%;
float: left;
}
.tools-last-bg-img {

    background-image: url(../images/bg.png);

}
.dev-tools-icon-main-section {
display: table;
width: 100%;
    clear: both;
    margin-top: 150px;

}
.dev-tool-inner-box p {
    margin-top: 15px;
}
.sectin3-dev-tool-text p {

    width: 370px;
    text-align: center;
    margin: 0 auto;

}
/*makar editor*/

@media screen and (max-width: 1024px) {
/*makar for school*/
.banner_btn { margin-top: -20%; margin-left: 34%; }
/*makar for school*/


    /*makar editor*/
.group1_editor { margin-top: 150px; }
.group2_editor_left { width: 50%; }
/*makar editor*/
}

@media screen and (max-width: 990px) {
/*makar dev tools*/
.groupcontent { width: 100%; margin-top: 75px; }
.group1, .group2 { width: 75%; margin: 0px auto; margin-top: 120px; }
.group1_right { padding-top: 80px; }
.group1_img1 { width: 184px; }
.group1_img2 { width: 185px; margin-left: 90px; margin-top: -215px; }
.group2 { margin-top: 120px; }
.group2_left { float: left; width: 30%; }
.group2_right { float: right; width: 60%; box-shadow: 0 0 20px 0 rgba(0,0,0,0.3); }
.group2_right img { width: 386px; }
.group2_text { padding-bottom: 20px; }
.group3 { width: 80%; margin: 0px auto; margin-top: 120px; }
.group3_left { width: 60%; }
.group3_right { width: 40%; }
.group4 { width: 80%; height: 260px; margin: 0px auto; margin-top: 120px; margin-bottom: 75px; box-shadow: none; }
.group4_left { width: 50%; }
.group4_right { width: 50%; }
.group4_text { font-size: 12pt; }
/*makar dev tools*/

    /*makar for school*/
.groupcontent2 { width: 90%; margin: 0px auto; margin-top: 80px; }
.group1_school { overflow: hidden; margin-top: 120px; }
/*makar for school*/
.group1_school_img, .group2_school_img{width: 100%;}
.group1_school_text, .group2_school_text, .group3_school_text {
    width: 100%;
}

@media screen and (max-width: 900px) {
/*makar dev tools*/
.groupcontent { margin-top: 30px; }
.group1, .group2 { width: 83%; margin: 0px auto; margin-top: 120px; }
.group2 { margin-top: 120px; }
.group3 { width: 80%; margin: 0px auto; margin-top: 120px; }
.group3_left { width: 50%; }
.group3_img { width: 338px; }
.group3_img1 { width: 200px; margin-top: -212px; }
.group3_img2 { width: 86px; margin-top: -171px; margin-left: 216px; }
.group3_img3 { width: 116px; margin-top: -112px; margin-left: 55px; }
.group3_right { width: 50%; padding-top: 85px; padding-left: 25px; }
/*makar dev tools*/

    /*makar for school*/
.group1_school, .group2_school, .group3_school { margin-top: 100px; }
.group1_school_img img { width: 90%; }
.group1_school_text { padding-top: 8%; }
.group3_school_img1 { width: 350px; }
.group3_school_img2 { width: 100px; margin-top: -188px; margin-left: 68px; }
.group3_school_img3 { width: 100px; margin-top: -282px; margin-left: 215px; }
.group3_school_text { padding-left: 0px; }
.banner_btn { margin-top: -22%; margin-left: 31%; }
/*makar for school*/

    /*makar editor*/
.group4_editor_text { width: 95%; margin: 0px auto; }
.group1_editor_right, .group2_editor_left { padding-top: 7%; }
.group3_editor_right { margin-top: -10%; }
/*makar editor*/

}
@media screen and (max-width: 768px) table th, table td {
 min-width: 0!important;
} {
    /*makar dev tools*/
    .group1, .group2 {
 margin: 0px auto;
 margin-top: 120px;
}
 .group1_right {
 padding-top: 93px;
 font-size: 11pt;
}
 .group1_img1 {
 width: 144px;
}
 .group1_img2 {
 width: 145px;
 margin-left: 70px;
 margin-top: -172px;
}
 .group2 {
 margin-top: 120px;
}
 .group2_text {
 padding-bottom: 12pt;
}
 .group3 {
 width: 80%;
 margin: 0px auto;
 margin-top: 120px;
}
 .group3_left {
 width: 50%;
}
 .group3_img1 {
 width: 200px;
 margin-top: -195px;
}
 .group3_img2 {
 width: 86px;
 margin-top: -155px;
 margin-left: 185px;
}
 .group3_img3 {
 width: 116px;
 margin-top: -112px;
 margin-left: 40px;
}
 .group3_right {
 font-size: 17pt;
}
 .group3_right span {
 font-size: 9pt;
}
 .group4_text {
 font-size: 11pt;
}
    /*makar dev tools*/

    /*makar for school*/
    .groupcontent2 {
 margin-top: 50px;
}
 .groupcontent_title {
 font-size: 26pt;
}
 .groupcontent_line {
 margin-top: 20px;
}
 .group1_school_img, .group2_school_img {
 width: 100%;
 float: none;
}
 .group1_school_text, .group2_school_text, .group3_school_text {
 width: 100%;
 float: none;
 text-align: center;
}
 .group2-school {
 margin-top: 100px;
}
 .group2_school_img {
 margin-top: 30px;
}
 .group3-school {
 margin-top: 150px;
}
 .group3_school_img {
 float: none;
 width: 492px;
 margin: 0px auto;
}
 .group3_school_img1 {
 width: 492px;
}
 .group3_school_img2 {
 width: 127px;
 position: relative;
 z-index: 99;
 margin-top: -251px;
 margin-left: 116px;
}
 .group3_school_img3 {
 width: 127px;
 position: relative;
 z-index: 99;
 margin-top: -360px;
 margin-left: 312px;
}
 .banner_dowload_img img {
 width: 100%;
 height: 296px;
}
 .banner_btn {
 margin-top: -30%;
 margin-left: 29%;
}
    /*makar for school*/

    /*makar editor*/
    .group1_editor {
 margin-top: 100px;
}
 .group1_editor_left, .group1_editor_right, .group2_editor_left, .group2_editor_right {
 width: 90%;
 float: none;
 margin: 0px auto;
}
 .group1_editor_right, .group2_editor_left {
 text-align: center;
}
 .group2_editor {
 margin-top: 50px;
}
 .group2_editor_left {
 padding-left: 0px;
}
 .group2_editor_right {
 margin-top: 70px;
 right: 25%;
}
 .group3_editor_left, .group3_editor_right {
 width: 90%;
 float: none;
 margin: 0px auto;
}
 .group3_editor_right {
 padding-left: 0px;
 padding-top: 40px;
 text-align: center;
}
 .group4_editor_text {
 font-size: 11pt;
}
/*makar editor*/
}

@media screen and (max-width: 650px) {
/*makar dev tools*/
.group1, .group2 { width: 90%; margin: 0px auto; margin-top: 100px; }
.group1_left { width: 50%; margin: 0px auto; float: none; padding-top: 0px; }
.group1_img1, .group1_img2 { width: 144px; }
.group1_right { width: 100%; padding-top: 20px; text-align: center; }
.group1_img1 { width: 144px; }
.group1_img2 { width: 145px; margin-left: 70px; margin-top: -172px; }
.group2_left { float: none; width: 70%; }
.group2_text { text-align: center; }
.group2_right { float: none; width: 80%; margin: 0px auto; }
.group3_left { width: 100%; margin: 0px auto; padding-left: 20%; }
.group3_right { width: 100%; text-align: center; padding-top: 40px; }
.group3_img1 { margin-top: -212px; }
.group3_img2 { margin-left: 211px; margin-top: -174px; }
.group4 { height: 700px; }
.group4_left, .group4_right { width: 100%; float: none; height: 335px; }
.group4_text { position: relative; z-index: 99; color: #fff; margin-top: -35%; text-align: center; font-size: 15pt; }
.group4_btn { margin-top: 20px; }
.group4_btn a { color: #fff; font-size: 7pt; padding: 7px 15px; border-radius: 5px; border: 1px solid #fff; }
.group4_btn a:hover { color: #fff; background: #009999; border: 1px solid #009999; }
/*makar dev tools*/

    /*makar for school*/
.banner_dowload_img img { height: 270px; }
.banner_btn { margin-top: -33%; margin-left: 23%; }
/*makar for school*/

    /*makar editor*/
.groupcontent3 { margin-top: 50px; }
.group4_editor_text { font-size: 9pt; }
.group4_editor_1, .group4_editor_2 { font-size: 13pt; }
/*makar editor*/
}

@media screen and (max-width: 500px) {
/*makar dev tools*/
.group3_left { padding-left: 10%; }
.group4 { height: 600px; }
.group4_left, .group4_right { height: 300px; }
.group4_text { margin-top: -40%; font-size: 14pt; }
/*makar dev tools*/

    /*makar for school*/
.group3_school_img { width: 416px; }
.group3_school_img2 { width: 110px; margin-top: -215px; margin-left: 100px; }
.group3_school_img3 { width: 110px; margin-top: -313px; margin-left: 268px; }
.banner_btn { margin-top: -41%; margin-left: 13%; }
/*makar for school*/

    /*makar editor*/
.group1_editor_right, .group2_editor_left, .group3_editor_right { font-size: 18pt; }
.group1_editor_right span, .group2_editor_left span, .group3_editor_right span { font-size: 14pt; }
.group4_editor_text { font-size: 6.9pt; }
.group4_editor_1, .group4_editor_2 { font-size: 11pt; }
.groupcontent_title { font-size: 20pt; font-weight: 600; }
.group4_editor_1 { left: 43%; }
.group4_editor_2 { right: 10%; }
/*makar editor*/
}

@media screen and (max-width: 450px) {
/*makar dev tools*/
.groupcontent_title { font-size: 18pt; }
.group1_left { width: 68%; }
.group3_img1 { margin-top: -197px; }
.group3_img2 { width: 110px; }
.group3_img2 { width: 80px; margin-left: 188px; margin-top: -156px; }
.group4 { height: 500px; }
.group4_left, .group4_right { height: 250px; }
.group4_text { margin-top: -45%; }
/*makar dev tools*/


/*makar for school*/
.group3_school_img { width: 305px; }
.group3_school_img2 { width: 81px; margin-top: -155px; margin-left: 75px; }
.group3_school_img3 { width: 81px; margin-top: -231px; margin-left: 198px; }
.banner_dowload { margin-top: 150px; }
.banner_dowload_txt { font-size: 17pt; }
.banner_btn { margin-top: -47%; margin-left: 7%; }
/*makar for school*/

/*makar editor*/
.group2_editor { margin-top: 0px; }
.group3_editor { margin-top: 50px; }
.group4_editor { margin-top: 70px; padding: 30px 0px; }
.group4_editor_text { font-size: 6.2pt; }
/*makar editor*/
}

@media screen and (max-width: 400px) {
.group1_left { width: 80%; }
.group3_img1 { width: 194px; margin-top: -180px; }
.group3_img3 { width: 105px; margin-top: -104px; margin-left: 34px; }
.group3_img2 { width: 75px; margin-left: 168px; margin-top: -140px; }
/*makar editor*/
.group4_editor_text { font-size: 5.9pt; }
/*makar editor*/
}
