@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700);


@font-face {
    font-family: 'Xolonium';
    src: url('fonts/xoloniumregular.eot');
    src: local('xoloniumregular'),
    url('fonts/xoloniumregular.woff') format('woff'),
    url('fonts/xoloniumregular.ttf') format('truetype'),
    url('fonts/xoloniumregular.svg#htc-icon') format('svg');
}



#special-sectionOverview{
    background-color: #000;
    /*min-height: 100px;*/
    font-family: Roboto, arial, serif;
}
#special-sectionOverview #rog-width-full {
    width: 100%;
    background-color: #000;
    position: absolute;
    left: 0px;
    overflow: hidden;
}


#special-sectionOverview .edge-section{
    overflow: hidden;
    margin: 0 auto;
    max-width: 1920px;
}
#special-sectionOverview .area{
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1180px;
    box-sizing: border-box;
    position: relative;
}
#special-sectionOverview .text{
    color: #fff;
    font-size: 18px;
}
#special-sectionOverview .text h2{
    font-size: 36px;
    font-family: "Xolonium";
    line-height: 1.2em;
    margin: 0 0 0.5em 0;
    color: #fff;
}
#special-sectionOverview .edge-section-1 h2{ color: #d90000 !important;}
#special-sectionOverview .edge-section-2 h2{ color: #d90000 !important;}
#special-sectionOverview .edge-section-3 h2{ color: #d90000 !important;}
#special-sectionOverview .edge-section-4 h2{ color: #d90000 !important;}
#special-sectionOverview .edge-section-5 h2{ color: #d90000 !important;}
#special-sectionOverview .edge-section-6 h2{ color: #d90000 !important;}


#special-sectionOverview .text p{
    font-weight: 300;
    line-height: 1.5em;
    margin: 0;
}

#special-sectionOverview .edge-section-1{
    background: url(../img/BP1501G_page_1.png) center top/1920px no-repeat;
    min-height: 797px;
}
#special-sectionOverview .edge-section-1 .text{
    margin: 33% 0 0 56%;
}

#special-sectionOverview .edge-section-2{
    background: url(../img/02.jpg) center top/1920px no-repeat;
    min-height: 757px;
}
#special-sectionOverview .edge-section-2 .text{
    margin: 23% 0 0 56%;
    width: 50%;
}
#special-sectionOverview .edge-section-2 .text img{
    max-width: 100%;
}


#special-sectionOverview .edge-section-3{
    background: url(../img/03.jpg) center top/1920px no-repeat;
    min-height: 765px;
}
#special-sectionOverview .edge-section-3 .text{
    margin: 12% 0 0 56%;
}



#special-sectionOverview .edge-section-4{
    background: url(../img/04.jpg) center top/1920px no-repeat;
    min-height: 631px;
}
#special-sectionOverview .edge-section-4 .text{
    margin: 15% 0 0 56%;
}


#special-sectionOverview .edge-section-5{
    background: url(../img/05.jpg) center top/1920px no-repeat;
    min-height: 892px;
}
#special-sectionOverview .edge-section-5 .text{
    margin: 25% 0 0 0%;
    width: 42%;
}

#special-sectionOverview .edge-section-6{
    background: url(../img/06.jpg) center top/1920px no-repeat;
    min-height: 707px;
}
#special-sectionOverview .edge-section-6 .text{
    margin: 25% 0 0 0;
    width: 53%;
}







@media screen and (max-width: 850px) {
#special-sectionOverview .edge-section{
    background-size: 100%;
    min-height: auto;
}
#special-sectionOverview .edge-section .text{
    margin: 42% 0 5% 0;
    width: 100%;
}
#special-sectionOverview .edge-section-1{
    background-size: 140%;
    background-position: left top;
}
#special-sectionOverview .edge-section-1 .text{
    margin-top: 60%;
}
#special-sectionOverview .edge-section-2{
    background-size: 160%;
    background-position: left top;
}
#special-sectionOverview .edge-section-2 .text{
    margin-top: 65%;
}
#special-sectionOverview .edge-section-3{
    background-size: 150%;
    background-position: left top;
}
#special-sectionOverview .edge-section-3 .text{
    margin-top: 65%;
}
#special-sectionOverview .edge-section-4{
    background-size: 170%;
    background-position: left top;
}
#special-sectionOverview .edge-section-4 .text{
    margin-top: 65%;
}
#special-sectionOverview .edge-section-5{
    background-size: 150%;
    background-position: right top;
}
#special-sectionOverview .edge-section-5 .text{
    margin-top: 65%;
}
}














#special-sectionOverview .upd-content{
    margin: 0 auto;
    height: 100%;
    color: #000;
    max-width: 900px;
    box-sizing: border-box;
    padding: 0 20px;
}

#special-sectionOverview .upd-section{
    margin-bottom: 30px;
}
#special-sectionOverview .upd-section h2{
    color: #000;
    font-size: 1.8em;
    font-weight: normal;
}
#special-sectionOverview .upd-section  > p{
    line-height: 1.5em;
    padding: 0 12px;
}
#special-sectionOverview .upd-section a:hover{
    color: #0a8dd1;
}

#special-sectionOverview .upd-section .two-column > div{
    width: 50%;
    float: left;
}
@media screen and (max-width: 768px) {
#special-sectionOverview .upd-section .two-column > div{
    width: 100%;
}
}
#special-sectionOverview .upd-section .two-column:after{
    clear: both;
    display: block;
    content: '';
}

#special-sectionOverview .upd-section small{
    font-size: 0.9em;
    color: #666;
    display: block;
    width: 350px;
    margin: 0 auto;
}

#special-sectionOverview .upd-section .two-column .port{
    max-width: 450px;
    margin: 0 auto;
}
#special-sectionOverview .upd-section .two-column .port-1{
    float: left;
    max-width: 220px;
}
#special-sectionOverview .upd-section .two-column .port-2{
    float: right;
    margin-right: 30px;
}










#special-sectionOverview .upd-section .three-column > div{
    width: 33.3%;
    float: left;
}
#special-sectionOverview .upd-section .three-column:after{
    clear: both;
    display: block;
    content: '';
}

#special-sectionOverview .upd-section .three-column img{
    display: block;
    margin: 0 auto 15px auto;
    border: 1px solid #02b1e4;
}

#special-sectionOverview .upd-section .three-column p{
    margin: 0 3%;
}

#special-sectionOverview .upd-section .three-column i{
    display: block;
    float: left;
    background: #02b1e4;
    color: #fff;
    font-style: normal;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 30px;
    margin: 0 6px 120px 0;
}



@media screen and (max-width: 768px) {
#special-sectionOverview .upd-section .three-column > div{
    width: 100%;
}
#special-sectionOverview .upd-section .three-column img{
    margin: 0 0 15px 0;
}
}











#special-sectionOverview .upd-section-1 h2{
    margin-top: 25%;
}
#special-sectionOverview .upd-section-1 img{
    max-width: 100%;
}
@media screen and (max-width: 768px) {
#special-sectionOverview .upd-section-1 h2{
    margin-top: 20px;
}
}




#special-sectionOverview .upd-section-2{
    background-color: #eaeaea;
    padding-top: 30px;
}
#special-sectionOverview .upd-section-2 h2{
    margin-bottom: 30px;
}
#special-sectionOverview .upd-section-2 .two-column > div:first-child img{
    float: left;
}
#special-sectionOverview .upd-section-2 .two-column > div:first-child p{
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 0 20px;
    margin-top: 25%;
    line-height: 1.6em;
}

#special-sectionOverview .upd-section-2 .two-column > div:last-child p{
    margin-top: 20px;
}



@media screen and (max-width: 500px) {
#special-sectionOverview .upd-section-2 .two-column > div:first-child p{
    width: 100%;
    padding: 0;
    margin-top: 10px;
}
}













#special-sectionOverview .upd-section-3 .upd-content{
    background: #fff url(../img/mast.png) left top no-repeat;
    padding-top: 100px;
}
#special-sectionOverview .upd-section-3 h2{
    text-align: center;
}
#special-sectionOverview .upd-section-3 .three-column{
    margin-left: 10%;
    margin-top: 30px;
}




@media screen and (max-width: 768px) {
#special-sectionOverview .upd-section-3 .upd-content{
    padding-top: 60px;
}
#special-sectionOverview .upd-section-3 h2{
    text-align: left;
    margin-left: 200px;
}
}


@media screen and (max-width: 480px) {
#special-sectionOverview .upd-section-3 .upd-content{
    background-position: 0 80px;
    padding-top: 0;
}
#special-sectionOverview .upd-section-3 h2{
    margin-left: 0;
}
#special-sectionOverview .upd-section-3 .three-column{
    margin-top: 180px;
}
}










#special-sectionOverview .back-to-top{
    height: 50px;
    width: 50px;
    display: block;
    position: fixed;
    right: 0;
    bottom: 50px;
    text-indent: -9999px;
    background: #fff url(../img/arrow.png) center center no-repeat;
    display: none;
}