@import url('https://fonts.googleapis.com/css?family=Raleway');
section{overflow: hidden;position: relative;max-width: 1600px;margin: 0 auto;}
section img,.mobileSection img{display: block;width: 100%;}
section .group,.mobileSection .group{position: absolute;width: 100%;}
/*#mainWrite ul li{list-style: disc}*/
#mainWrite ul li::before {
    content: "-"; /* Insert content that looks like bullets */
    padding-right: 5px;
}
/*#mainWrite p,#mainWrite h1{margin: 0;font-family: 'Raleway', sans-serif;}*/
@media(max-width:1000px){
    .content .w3-container{padding: 0;}
}
.pchide{display: none}
.mhide{display: block}
@media(max-width:1000px){
    .pchide{display: block}
    .mhide{display: none}
}

#section1 .group{width: 35%;right: 22%;top: 20%;}
#section1 .button{text-align: center;padding: 3% 0}
#section1 .button button{font-size: 25px;padding: 5px 25px!important;}
#section1 .group h1{font-family: 'Roboto','cwTeXHei', sans-serif;;}
@media(max-width:1300px){
    #section1 .group{top: 15%;}
    #section1 .group h1{font-size: 20px;}
    #section1 .group p{font-size: 13px;}
}
@media(max-width:1100px){
    #section1 .group{top: 5%;}
}
@media(max-width:999px){
    #section1 .group{width: 80%;margin: 0 10%; top: 8%;left: 0;}
    #section1 .group h1{text-align: center;font-size: 40px;}
    #section1 .group p{font-size: 15px;}
    #section1 .button{position: absolute;top: 20%;width: 100%;}
}
@media(max-width:700px){
    #section1 .group{width: 90%;margin: 0 5%; top: 8%;}
    #section1 .group h1{font-size: 30px;}
    #section1 .group p{font-size: 13px;}
     #section1 .button{top: 22%;}
}
@media(max-width:500px){
    #section1 .group{width: 95%;margin: 0 2.5%; top: 1%;}
    #section1 .group h1{font-size: 25px;}
    #section1 .group p{font-size: 12px;}
     #section1 .button button{font-size: 15px;}
}

#section2{padding-top: 5%}
#section2 .w3-row {padding: 0 2.5%}
#section2 .w3-row .w3-col{width: 16%;margin: 0 2%; text-align:center}
#section2 .w3-row .w3-col img{width: 100%;max-width:120px;margin: 0 auto;}
#section2 .w3-row .w3-col article{margin-top: 5%}
#section2 .w3-row .w3-col h2{font-size: 18px;margin: 0;}
#section2 .w3-row .w3-col p{font-size: 12px;}
@media(max-width:999px){
    #section2 .w3-row .w3-col{width: 90%;margin: 4% 5%;text-align: left}
    #section2 .w3-row .w3-col img,#section2 .w3-row .w3-col article{display: inline-block;vertical-align: middle;margin: 0 1%}
    #section2 .w3-row .w3-col article{width: 75%;}
    #section2 .w3-row .w3-col img{width: 20%;}
    #section2 .w3-row .w3-col article h2{font-size: 25px;}
    #section2 .w3-row .w3-col article p{font-size: 15px;}
}
@media(max-width:600px){
    #section2 .w3-row .w3-col{width: 95%;margin: 4% 2.5%;text-align: left}
    #section2 .w3-row .w3-col img,#section2 .w3-row .w3-col article{margin: 0 2%}
    #section2 .w3-row .w3-col article{width: 65%;}
    #section2 .w3-row .w3-col img{width: 25%;}
    #section2 .w3-row .w3-col article h2{font-size: 20px;}
    #section2 .w3-row .w3-col article p{font-size: 12px;}
}

#section3{margin-top: 5%}
#section3 .group{width: auto;top: 25%;left: 7%;color: #fff}
#section3 .group h1{font-size: 45px;}
#section3 .group p{font-size: 15px;text-align: center}
@media(max-width:1300px){
    #section3 .group{left: 5%;}
    #section3 .group h1{font-size: 36px;}
    #section3 .group p{font-size: 13px;}
}
@media(max-width:999px){
    #section3 .group{left: 0;top: 10%;width: 100%;}
    #section3 .group h1{font-size: 45px;text-align: center}
    #section3 .group p{font-size: 17px;}
}
@media(max-width:600px){
    #section3 .group{top: 7%;}
    #section3 .group h1{font-size: 25px;}
    #section3 .group p{font-size: 13px;}
}
#section4{margin: 5% 0}
#section4>img.mhide{max-width: 877px;margin: 0 auto}
#section4>img.pchide{width: 90%;margin: 0 auto}
#section4 .group {position: static;margin: 3% 0}
#section4 .group h1,#section4 .group p{text-align: center}

@media(max-width:999px){
    #section4 .group {width: 80%;margin: 3% 10%}
}
@media(max-width:750px){
    #section4 .group h1{font-size: 25px;}
    #section4 .group p{font-size: 15px;}
}
@media(max-width:750px){
    #section4 .group {width: 95%;margin: 3% 1.5%}
    #section4 .group h1{font-size: 20px;}
    #section4 .group p{font-size: 12px;}
}
#section5,#section6,#section7{max-width: 1300px;background-size: cover;background-repeat: no-repeat}
#section5 .w3-row,#section6 .w3-row,#section7 .w3-row{padding: 2% 5%}
#section5 .w3-row .s8,#section6 .w3-row .s8,#section7 .w3-row .s8{padding-top: 8%}
#section5 .w3-row .s8 ul,#section6 .w3-row .s8 ul,#section7 .w3-row .s8 ul{padding-left: 5px}
#section5 .w3-row .s8 li,#section6 .w3-row .s8 li,#section7 .w3-row .s8 li{margin: 1% 0}
#section5 {background-image: url(../myImages/bankingindustrykioskbg.jpg);}
#section6 {background-image: url(../myImages/telecomindustrykioskbg.jpg);}
#section7 {background-image: url(../myImages/educationindustry_scan_scantronsbg.jpg);}
@media(max-width:1200px){
    #section5 .w3-row .s8 h1,#section6 .w3-row .s8 h1,#section7 .w3-row .s8 h1{font-size: 30px;}
}
.mobileSection .mobileGroup{border-bottom: 1px solid #fff}
.mobileSection .mobileGroup button{background-color: #333333;color: #fff;position: relative;padding: 2%;font-size: 20px;}
.mobileSection .mobileGroup button span{position: absolute;right: 5%;}
.mobileSection .mobileGroup button:hover{background-color: #333333!important;color: #fff!important}
.mobileSection #select1{background-color: #e6f0f6;padding: 2% 0}
.mobileSection #select2{background-color: #eff6ef;padding: 2% 0}
.mobileSection #select3{background-color: #e8ebf6;padding: 2% 0}
.mobileSection .select .w3-row{margin-top: 5%}
#mainWrite .mobileSection .select .w3-row h1{font-size: 28px;width: 80%;margin: 0 auto}
.mobileSection .select .w3-row h1{text-align: center}
.mobileSection .select .w3-row ul{padding: 0;width: 80%;margin: 0 auto}
.mobileSection .select .w3-row ul li{font-size: 25px;margin: 1% 0;font-family: 'Raleway', sans-serif;}
.mobileSection .select .w3-row .imgBox img{width: 70%;margin: 0 auto}
@media(max-width:999px){
    #mainWrite .mobileSection .select .w3-row h1{font-size: 36px;}
}
@media(max-width:700px){
    #mainWrite .mobileSection .select .w3-row h1{font-size: 28px;width: 80%;margin: 0 auto}
    .mobileSection .select .w3-row ul li{font-size: 20px;}
}
@media(max-width:500px){
     #mainWrite .mobileSection .select .w3-row h1{font-size: 23px;width: 100%;margin: 0 auto}
    .mobileSection .select .w3-row ul li{font-size: 13px;}
}