@charset "utf-8";
html, div, body, p, li, form, img, dd, h1, h2, h3, h4, input{margin:0 auto;padding:0;font:14px/1.8em "Arial","Helvetica","Verdana","sans-serif";color:#555;font-weight:normal;}
img{border:none;}
a:hover{text-decoration:underline;}
ul, li{margin:0;padding:0;list-style:none;}
.container{max-width:1000px;overflow:hidden;width:100%;}
#header{position:relative;}
#banner{display:block;height:400px;background:url(/images/resource/ipad-pro-topic/banner.jpg) no-repeat 50% 0;}
#banner h1{font-size:46px;color:#FFF;text-align:center;padding-top:60px;}
#banner .description1, #banner .description2{font-size:26px;color:#FFF;text-align:center;width:100%;}
#banner .description1{padding-top:33px;}
.line{background:url(/images/resource/ipad-pro-topic/line.jpg) no-repeat;height:7px;overflow:hidden;}
.review{background:url(/images/resource/ipad-pro-topic/review-bg.jpg) no-repeat 50% 0;min-height:512px;}
h2{background-color:#2dbbf0;width:300px;text-align:center;display:block;color:#ffffff;font-size:34px;border-radius:0 0 5px 5px;}
.review .re-pic{width:50%;float:left;padding-top:15px;max-width:500px;}
.review .re-pic img{width:100%;max-width:500px;}
.review .re-text{width:46%;float:left;padding:25px 2% 5px 2%;overflow:hidden;}
.title{font-size:24px;text-align:center;}
.title a{color:#1e1e1e;}
.arti{text-align:center;font-size:16px;line-height:35px;padding-top:10px;}
.more{font-size:16px;text-align:center;}
.more a{color:#1e1e1e;}
.manage{background:url(/images/resource/ipad-pro-topic/manage.jpg) no-repeat 50% 0;height:126px;overflow:hidden;}
.manage .start-m{color:#ffffff;font-size:36px;text-align:center;padding-top:20px;}
.software1{overflow:hidden;background-color:#f9f9f9;padding-bottom:50px;}
.software1 h2{max-width:250px;float:right;backroud-color:#0db1ee;margin-right:12%;padding:0 20px;}
.soft-pic, .pro-info{width:50%;float:left;max-width:500px;}
.soft-pic img{width:100%;max-width:500px;}
.pro-info ul{width:90%;margin:auto;text-align:left;padding:40px 20px 0 10%;}
.pro-info ul li{font-size:16px;line-height:35px;}
.download{max-width:500px;margin:40px 0 12px 10%;overflow:hidden;display:block;width:100%;}
.down-w{background:url(/images/resource/ipad-pro-topic/down.png) no-repeat;width:181px;height:46px;float:left;}
.down-w:hover{background-position:0 -46px;}
.download .down-m{background:url(/images/resource/ipad-pro-topic/down.png) no-repeat 0 -92px;width:181px;float:left;height:46px;margin-left:5%;}
.download .down-m:hover{background-position:0 -138px;}
.software1 .title{padding:20px 10px 0 10px;}
.software1 .arti{padding:2px 10px 0 10px;line-height:25px;}
.software2{overflow:hidden;background-color:#242424;padding-bottom:50px;}
.software2 .pro-info ul li, .software2 .arti, .software2 .title a, .software2 .more a{color:#FFF;}
.software2 .title{padding-top:30px;}
.software2 h2{margin-left:7%;width:320px;}
.software2 .soft-pic{float:right;}
.more-arti{overflow:hidden;padding-bottom:35px;}
.more-arti .left, .more-arti .right{float:left;width:50%;}
.more-arti h2{color:#2a2a2a;font-size:36px;padding:20px 0;background:none;}
.more-arti .title{text-align:left;padding:0 50px;font-size:20px;}
.more-arti .arti{text-align:left;padding:0 50px;line-height:30px;}
.more-arti .more{text-align:left;padding:0 50px;padding-bottom:20px;}

@media screen and (max-width: 860px) {
#banner{background:url(/images/resource/ipad-pro-topic/mo-banner.jpg) no-repeat 50% 0;height:298px;}
#banner h1{font-size:35px;}
.review{background:url(/images/resource/ipad-pro-topic/mo-review-bg.jpg) no-repeat 50% 0;padding-bottom:30px;}
.review .re-pic{float:none;width:100%;}
.review .re-text{float:none;width:90%;}
#banner .description1, #banner .description2{font-size:24px;}
.download{margin: 40px auto 12px;text-align: center;max-width: 400px;}
.soft-pic, .pro-info, .more-arti .left, .more-arti .right{float:none;width:100%;}
.software1 h2, .software2 h2{float:none;margin:0 auto;}
.pro-info ul{padding-top:15px;}
.software2 .soft-pic{float:none;}
.more-arti .title, .more-arti .arti, .more-arti .more{text-align:center;}
}

@media screen and (max-width: 635px) {
#banner h1{font-size:30px;line-height:30px;}
#banner .description1, #banner .description2{font-size:20px;}
}	

@media screen and (max-width: 480px) {
.manage .start-m{font-size:24px;line-height:32px;}
.more-arti{padding-bottom:40px;}
.more-arti .title, .more-arti .arti, .more-arti .more{padding:0 20px;}
.more-arti .title{padding-top:10px;}
.more-arti h2{padding-bottom:0;}
h2{font-size:30px;}
.software2 h2{width:300px;}
}