@charset "utf-8";

*{box-sizing: border-box;}
body{font-family:Arial, Helvetica, sans-serif;margin:0;padding:0;font-size:15px;color:#333;}
div, form, img, dl, dt, dd,figure{margin:0;padding:0;border:0;}
h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
a{color:#222;text-decoration:none;}
a:hover{opacity: 0.8;transition: all 0.5s}
.red{color:red}
.container{width:1165px;margin:0 auto;position:relative;padding: 0 10px;}

.bg {

    background-size: auto 100%;
    /*background-attachment: fixed;*/
    background-position: center 0;
    background-repeat: repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    background-color: #fff;
    background-repeat: no-repeat;

}
.bgBox{position: absolute;left:0;top:0;width: 100%;background-color: #888;height: 632px;}

.bgCon{
    height: 632px;
    position: relative;
    background-color: transparent!important;
    z-index: 100;
}

.bg1 {
    background-image: url(../images/header-1.jpg)!important;

}
.bg2 {
    background-image: url(../images/header-2.jpg)!important;
    display: none;
}
.bg3 {
    background-image: url(../images/header-3.jpg)!important;
    display: none;
}

header {background: #444}
header .logo img{width: 160px;margin: 10px 0 0 50px}
header .main{margin: 0 0 20px 18%;font-size: 25px}
header .main .top .line:first-child{color: white}
header .main .top h1{margin: 6px 0;color: white;font-size: 50px}
header .main .top .line:last-child{color: #5ed5d9;text-shadow: 1px 0 0 #333}
header .main .top .line:last-child a{color: #5ed5d9;}

header .main .bottom {margin-top: 5px}
header .main .bottom .left{color: #5ed5d9;width: 29%;margin: 18px 40px 0 0;float: left}
header .main .bottom input{width: 100%;font-size: 18px;margin: 0 0 13px;height: 40px;padding: 10px}
header .main .bottom .captchaBox:after{content: '';clear: both;display: block}
header .main .bottom button{font-size: 18px;margin: 10px 0;height: 40px;padding:  0 40px;background: #ffee51;border: none;cursor: pointer}
header .main .bottom .contact img{width: 100%;position: relative;left:-10%;margin-top: 10px}
header .main .bottom .right{background: rgba(0,0,0,0.4);color: #fff;float: left;margin-top: 10px}
header .main .bottom .right ul {margin: 0;padding: 2px 25px 5px 40px}
header .main .bottom .right ul li{margin: 10px 0}
header .main .bottom .messageBox{font-size: 17px;margin-left: 10px;color:#fff}

main{font-size: 28px;}
main .container{background: #285ca3;overflow: hidden;color: #fff;text-align: center}
main h2{font-size: 49px;}
main .topCon h2{margin:25px 0 0;font-size:53px;}
main .topCon p{font-size: 25px;margin: 10px 0 20px}
main .topCon .picBox{margin: 0 5%}
main .topCon .pic{display: flex}
main .topCon .pic>div>img{width: 94%}
main .topCon .pic .icon {height: 90px;}
main .topCon .pic .icon img{width: 30%;position: relative;top:-55px;}

main .bottomCon .topConBox{margin: 0 30%}
main .bottomCon .topCon{display: flex}
main .bottomCon .topCon img{width: 100%}
main .bottomCon .topCon .middle{width: 4px;background: #fff;margin: 30px 30px}
main .bottomCon .main p{margin: 0 6%;line-height: 1.6}
main .bottomCon .main ul{margin: 28px 22% 23px;text-align: left;color: #5ce1e6;}
main .bottomCon .main .learnMore img{width: 370px}
main .bottomCon .main .contact img{width: 460px}

main .gallery h2{font-size: 80px;font-style: italic;margin:10px 0}
main .gallery .lineBox{margin: 0 8%}
main .gallery .lineBox .line{display:flex;text-transform: uppercase;}
main .gallery .lineBox .line h3{font-weight: normal;margin-bottom: 10px;font-size: 29px;}
main .gallery .lineBox .line img{width: 80%}

main .video h2{font-size: 51px;}
main .video .con {margin: 10px 16%}

footer .container{background: url("../images/Bottom-Picture.jpg");background-size: cover;overflow: hidden}
footer .container h2{font-size: 120px;color:#fff;text-align: center;margin: 50px 0 20px;}
footer .container p{background: rgba(0,0,0,0.4);margin: 0 3% 20px;padding: 25px;font-size: 35px;color: #fff;line-height: 1.7;text-align: center}
footer .container .contact{text-align: center;margin-bottom: 10px}

@media (max-width:1182px) {
    .container{width:100%;}
}

@media (min-width:768px) and (max-width:1182px) {
    header .logo img{margin-left:5%;}
    header .main{margin: 0 0 20px 5%;}
    header .main .top h1{font-size: 40px;}
    header .main .bottom .left{width: 35%;}
    main .bottomCon .main ul{margin: 28px 10% 23px;}
    main .topCon h2{font-size: 43px;}
    main .gallery h2{font-size: 50px;}
    main .gallery .lineBox{    margin: 0 3%;}
    main .video h2{    font-size:35px;}
    main .video .con{margin: 10px 8%;}
    footer .container h2{font-size: 70px;}
}

@media (max-width:767px){
    .bgBox{height: 862px;}
    .bgCon{height: 862px;}
    .contactBtn img{max-width: 240px}
    .learnMore img{max-width: 240px}
    header .logo {text-align: center}
    header .logo img{margin-left:5%;}
    header .main{margin: 0 1.5% 20px 1.5%;}
    header .main .top h1{font-size: 36px;}
    header .main .top .line{font-size: 20px;}
    header .main .bottom .left{width:100%;}
    header .main .bottom input{margin: 0 0 12px;}
    header .main .bottom img{    left: 0;width: inherit}
    header .main .bottom .contact{  text-align: center}
    header .main .bottom .right{width: 100%}
    header .main .bottom .right ul{padding: 2px 0 5px 40px;font-size: 18px;}

    main {font-size: 18px}
    main .topCon .picBox{    margin: 0 ;}
    main .topCon .pic .icon{height: 55px;}
    main .topCon .pic .icon img{top:-25%;}
    main .topCon p{    font-size: 22px;}
    main .bottomCon .main ul{margin: 28px 0 23px;}
    main .bottomCon .main p{    margin: 0; }
    main .bottomCon .topConBox{    margin: 0 10%;}

    main .topCon h2{font-size: 30px;}
    main .gallery h2{font-size:30px;}
    main .gallery .lineBox{    margin: 0;}
    main .gallery .lineBox .line img{width: 90%;}
    main .gallery .lineBox .line h3{font-size: 22px}

    main .video h2{    font-size:30px;}
    main .video .con{margin: 10px 0;}
    main .video .con iframe{height: 250px;}
    footer .container h2{font-size: 30px;}
    footer .container p{    font-size:18px;padding: 12px;    margin: 0 1% 20px;}
}