body,html{  height: 100%;  }
.play{background: #000;}
/* Large desktop */
@media (min-width: 1200px) {
    .container {
        width: 1170px;   padding-left: 15px ; padding-right: 15px;

    }
    .banner{height:  982px; width: 100%; background: url(img/banner.jpg) no-repeat  top center; min-width: 1200px; position: relative; }
    #row1{ height:766px;width: 100%; background: url(img/banner1.jpg) no-repeat  top center; min-width: 1200px; }
    #row2{ height: 768px;width: 100%; background: url(img/banner2.jpg) no-repeat  top center; min-width: 1200px; }
    #row3{ height: 768px;width: 100%; background: url(img/banner3.jpg) no-repeat  top center; min-width: 1200px; }
    .play{ border: 10px solid #fff; width: 322px; margin-top: 110px; margin-left: 167px; }
    #row2 .play{ margin-left: -130px;}
    .span4,.span8{ position: relative;}
    .first{  top: 51px; position: absolute; right: 76px;}
    .sec{  top: 98px; position: absolute; right:286px;}
    .third{  top: 88px; position: absolute;right: 76px;}
    .footer{ margin-top: 0;}
    .text a{ font-size: 17px; color: #fff; font-family: "ºÚÌå";writing-mode:vertical-rl; line-height: 36px; width: 48px; height: 543px; }
    #row1 .text{ margin-top: 100px;   margin-left: 283px;}
    #row2 .text{ margin-top: 143px;    margin-left: 88px;}
    #row3 .text{ margin-top: 120px; margin-left: 283px;}
    .up{position: absolute; bottom: 100px; left:50%; margin-left: -25px;}
}
/* desktop */
@media (min-width: 979px) and (max-width: 1199px) {
    .container,#localNav,#channelNav,.footer{ width:1200px;}
    .lm4 ul li {line-height: 20px; }
    .span12 {width: 1170px; }
    .span11 {width: 1070px; }
    .span10 {width: 970px;  }
    .span9 { width: 870px; }
    .span8 { width: 770px; }
    .span7 { width: 670px; }
    .span6 { width: 570px; }
    .span5 { width: 470px; }
    .span4 {width: 370px;  }
    .span3 {width: 270px;  }
    .span2 {width: 170px;  }
    .span1 {width: 70px;  }
    li {line-height: 34px; }

    .list18 li, .list18 li{ height: 160px; width: 285px; }
    .list18 li + li{margin-left: 10px;}
    .banner{height:  982px; width: 100%; background: url(img/banner.jpg) no-repeat  top center; min-width: 1200px;  }
    #row1{ height:766px;width: 100%; background: url(img/banner1.jpg) no-repeat  top center; min-width: 1200px; }
    #row2{ height: 768px;width: 100%; background: url(img/banner2.jpg) no-repeat  top center; min-width: 1200px; }
    #row3{ height: 768px;width: 100%; background: url(img/banner3.jpg) no-repeat  top center; min-width: 1200px; }
    .play{ border: 10px solid #fff; width: 322px; margin-top: 110px; margin-left: 167px; }
    #row2 .play{ margin-left: -130px;}
    .span4,.span8{ position: relative;}
    .first{  top: 51px; position: absolute; right: 76px;}
    .sec{  top: 98px; position: absolute; right:286px;}
    .third{  top: 88px; position: absolute;right: 76px;}
    .footer{ margin-top: 0;}
    .text a{ font-size: 17px; color: #fff; font-family: "ºÚÌå";writing-mode:vertical-rl; line-height: 36px; width: 48px; height: 543px;

    }
    #row1 .text{ margin-top: 100px;   margin-left: 283px;}
    #row2 .text{ margin-top: 143px;    margin-left: 88px;}
    #row3 .text{ margin-top: 120px; margin-left: 283px;}


}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .container,#localNav,#channelNav,.footer{ width:1200px;}
    .lm4 ul li {  line-height: 20px;    }
    .span12 {width: 1170px;    }
    .span11 { width: 1070px;    }
    .span10 {width: 970px;    }
    .span9 {width: 870px;    }
    .span8 { width: 770px;    }
    .span7 { width: 670px;    }
    .span6 { width: 570px;    }
    .span5 {width: 470px;    }
    .span4 {width: 370px;    }
    .span3 { width: 270px;    }
    .span2 {width: 170px;    }
    .span1 {width: 70px;    }
    li { line-height: 34px;    }
    #row1 .span8{ position: relative;}
    .list18 li, .list18 li{ height: 160px; width: 285px; }
    .list18 li + li, .list18 li+li{margin-left: 10px;}
    .banner{height:  982px; width: 100%; background: url(img/banner.jpg) no-repeat  top center; min-width: 1200px;  }
    #row1{ height:766px;width: 100%; background: url(img/banner1.jpg) no-repeat  top center; min-width: 1200px; }
    #row2{ height: 768px;width: 100%; background: url(img/banner2.jpg) no-repeat  top center; min-width: 1200px; }
    #row3{ height: 768px;width: 100%; background: url(img/banner3.jpg) no-repeat  top center; min-width: 1200px; }
    .play{ border: 10px solid #fff; width: 322px; margin-top: 110px; margin-left: 167px; }
    #row2 .play{ margin-left: -130px;}
    .span4,.span8{ position: relative;}
    .first{  top: 51px; position: absolute; right: 76px;}
    .sec{  top: 98px; position: absolute; right:286px;}
    .third{  top: 88px; position: absolute;right: 76px;}
    .footer{ margin-top: 0;}
    .text a{ font-size: 17px; color: #fff; font-family: "ºÚÌå";writing-mode:vertical-rl; line-height: 36px; width: 48px; height: 543px;

    }
    #row1 .text{ margin-top: 100px;   margin-left: 283px;}
    #row2 .text{ margin-top: 143px;    margin-left: 88px;}
    #row3 .text{ margin-top: 120px; margin-left: 283px;}

}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    .banner {
        min-width: 100%;
        height: auto;
        background: none;
    }

    .row {
        margin-left: 2%;
        margin-right: 2%;
    }

    .span4 {
        width: 100%;
    }

    body{ background: #013667;}
    .play{ border: 10px solid #fff; width: 100%; max-width: 322px; margin: 20px auto;}
    .first,.sec,.third{ margin-bottom: 20px; text-align: center;}
    #lm1{text-align: center;}
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .banner{ min-width: 100%; height:auto; background: none;}
    .row{ margin-left: 2%; margin-right: 2%;}
    .span4{ width: 100%;}




}