/* global */
#main {width:96%;max-width:1280px;height:auto;min-height:2020px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis}
#main .banner{width:90%;max-width:1240px;margin-left:30px;height:286px;clear:both;background:#fff url(../images/banner.jpg) no-repeat}

#main h2{font:bold 2.2rem/1.6 "Outfit","Arial Narrow";color:#09C;margin-top:20px;clear:both}

/* Spray Patterns */
#guideline{width:96%;max-width:1260px;margin:0 auto;clear:both}
#guideline #quick-channels {display:block;height:auto;list-style:none}
#quick-channels li{float:left;margin:0 44px 20px 0;-moz-box-shadow:7px 5px 6px #333;-webkit-box-shadow:7px 5px 6px #333;box-shadow:7px 5px 6px #333}
#quick-channels li img{float:left;width:255px;height:300px;padding:0;border:0;}
#quick-channels li a{display:block;overflow:hidden}
#quick-channels li a:hover{transform:scale(1.05)}

#recommended-product{width:96%;max-width:1260px;margin:0 auto;clear:both}



/* Product Industries and Applicaton */
#app-list{width:96%;max-width:1260px;height:auto;margin:10px auto;clear:both}
#app-list .list{float:left;width:255px;height:578px;margin:0 44px 10px 0;-moz-box-shadow:7px 5px 6px #333;-webkit-box-shadow:7px 5px 6px #333;box-shadow:7px 5px 6px #333}
#app-list .list img{width:255px;height:145px;vertical-align:top}
#app-list .list .box{width:255px;height:433px;padding:4px;border:1px solid #CCC;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;clear:both}

.list .box h3{margin:10px 0}
.list .box h3 a{font:bold 24px/1.2 "Arial Narrow";color:#09C1FF;position:relative}
.list .box h3 a::after{-webkit-transition:all .3s;transition:all .3s;content:"";width:60px;height:4px;background:#FF3300;position:absolute;bottom:-2px;left:0}
.list .box h3 a:hover::after{width:100%}

.list .box dl dt a{font:bold 20px/1.2 "Arial Narrow";color:#993}
.list .box dl dd{list-style:disc inside}
.list .box dl dd a{font:normal 17px/1.5 "Arial Narrow";color:#09C;padding:5px 0}
.list .box dl dd a:hover{text-decoration:underline;color:#09C}

.list .box p{font:normal 18px/1.3 "Arial Narrow";color:#555;padding:8px}
.list .box p a{float:right;font:18px/1.3px Arial Narrow;color:#09C}
.list .box p a::before{clear:left}



/* 手机横屏 */
@media (min-width: 640px) and (max-width: 767px) and (orientation: landscape) {

    #main {width:100%;height:auto;margin:0 auto}
    #main h2{font:bold 25px/1.6 "Arial Narrow";color:#09C;margin:10px 0 0 15px;clear:both}

    #guideline{width:100%;margin:0 auto;clear:both}
    #quick-channels li{float:left;width:342px;margin:0 15px 30px 15px;-moz-box-shadow:7px 5px 6px #333;-webkit-box-shadow:7px 5px 6px #333;box-shadow:7px 5px 6px #333}
    #quick-channels li img{float:none;width:342px;height:400px;padding:0;border:0;}


    #app-list{width:100%}
    #app-list .list{float:left;width:342px;height:auto;margin:0 15px 30px 15px}
    #app-list .list img{width:342px;height:225px}


    #app-list .list .box{width:342px;height:455px}
    .list .box h3 a{font:bold 1.5rem/1.5}
    .list .box dl dt a{font:bold 1.4rem/1.5}
    .list .box dl dd a{font:normal 1.3rem/1.8;padding:10px 0}


 }





/* 手机竖屏 */
@media (max-width: 639px) and (orientation: portrait) {

    #main {width:100%;height:auto;margin:0 auto}
    #main h2{font:bold 2.0rem/1.1;margin:1rem 0.7rem 0 0.3rem;text-align:center;padding:0.5rem;background:#CCC;box-shadow:7px 5px 6px #333;border-radius:0.6rem}
    #guideline{width:100%;margin:0 auto;clear:both}
    #quick-channels li{float:none;width:342px;margin:20px 5px;-moz-box-shadow:7px 5px 6px #333;-webkit-box-shadow:7px 5px 6px #333;box-shadow:7px 5px 6px #333}
    #quick-channels li img{float:none;width:342px;height:400px;padding:0;border:0;}


    #app-list{width:100%}
    #app-list .list{float:none;width:345px;max-width:100%;height:auto;margin:20px 5px}
    #app-list .list img{width:345px;height:225px}

    #app-list .list .box{width:345px;height:auto}
    .list .box h3 a{font:bold 1.5rem/1.5}
    .list .box dl dt a{font:bold 1.4rem/1.5}
    .list .box dl dd a{font:normal 1.3rem/1.8;padding:10px 0}

}