@charset "utf-8";
/* CSS Document */

/*Reset your Style File*/
body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input, textarea,p,blockquote,th,td { margin:0; padding:0;}
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
ol,ul,li{ margin-top:0; margin-bottom: 0; padding-top:0; padding-bottom:0;}
ol,ul{padding-left:15px;}
caption,th { text-align:left; }
a {color:#333; display: inline-block;}
a:hover{text-decoration: none; opacity: 0.5;}
p{word-wrap: break-word;}
.navbar hr{position: absolute; top: 40px; color: #333; left: 0; width:100%; border-color:#333;}

/*Header*/
html{height:100%;}
body {height:100%; color:#333; background: #F2F2F2; font-family: Arial, Helvetica, 'Microsoft Yahei', SimHei, san-serif; font-size: 18px;}
.canon_logo img{width:81px; padding:15px 0px;}
.canon_sub_logo{padding-top:18px; height:20px;}
.canon_sub_logo img{height: 20px;}
.guanggao{position: absolute; right: 15px; top: 70px; z-index: 5;}

/*Nav*/
.header-nav{background: #000; padding: 20px 15px; }
.header-nav-box{float: left; padding: 5px; border: 1px solid #FFF; margin: 0 5px; width: calc(10% - 10px);}
.header-nav-box:hover{border-color: rgba(255,255,255, .5);}
.header-nav-box:hover.color-red{border-color: rgba(255,0,0, .5);}
.header-nav-box a{width: 100%;}
.bdsharebuttonbox{width: 76px; margin-bottom: 20px;}

/*Content*/
.chapter{height: 320px; overflow: hidden;}
.章节 .row{height: 100%;}
.chapter-bg{background: rgba(0,0,0,.5); padding: 5% 50px;}
.bg-01{background: url(../img/chapter1-1.jpg) center no-repeat; background-size: cover;}
.bg-02{background: url(../img/chapter2-1.jpg) center no-repeat; background-size: cover;}
.bg-03{background: url(../img/chapter2-9.jpg) center no-repeat; background-size: cover;}
.bg-04{background: url(../img/chapter3-1.jpg) center no-repeat; background-size: cover;}
.bg-05{background: url(../img/chapter3-6.jpg) center no-repeat; background-size: cover;}
.bg-06{background: url(../img/chapter4-1.jpg) center no-repeat; background-size: cover;}
.bg-07{background: url(../img/chapter4-5.jpg) center no-repeat; background-size: cover;}
.bg-08{background: url(../img/chapter5-1.jpg) center no-repeat; background-size: cover;}
.bg-09{background: url(../img/chapter5-14.jpg) center no-repeat; background-size: cover;}
.bg-10{background: url(../img/chapter6-1.jpg) center no-repeat; background-size: cover;}
.bg-11{background: url(../img/chapter6-5.jpg) center no-repeat; background-size: cover;}
.bg-12{background: url(../img/chapter7-1.jpg) center no-repeat; background-size: cover;}
.bg-13{background: url(../img/chapter8-1.jpg) center no-repeat; background-size: cover;}
.bg-14{background: url(../img/chapter9-1.jpg) center no-repeat; background-size: cover;}
.bg-15{background: url(../img/chapter10-1.jpg) center no-repeat; background-size: cover;}
.small-title{border-left: 4px solid #CC0000; padding-left: 15px;}
.under-line{border-bottom: 1px solid #FFF; padding-bottom: 5px; margin-bottom: 5px;}
.underline-red{border-bottom: 2px solid #CC0000;}
.panel-box{display: table; margin: 20px auto;}
.panel-box a{margin: 10px; width: 60px; height: 60px; display: inline-block; position: relative;}
.control-page {position: relative;}
.carousel-control span, span.fa-angle-left, span.fa-angle-right, span.fa-angle-down, span.fa-angle-up{border: 4px solid #4b4b4b; border-radius: 50%; width: 60px; height: 60px; font-size: 50px; position: absolute; left: 50%; margin-left: -30px;}
.state-off{opacity: 0.4; cursor: auto;}
.reverse{flex-wrap: wrap-reverse;}
.copyright a:hover{color: #CC0000; opacity: 1;}

/*COMMON*/
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb60{padding-bottom:60px;}
.pb80{padding-bottom:80px;}
.prl0{padding-right: 10px;}
.ptb40{padding-top: 40px; padding-bottom: 40px;}
.mr10{margin-right:10px;}
.size14{font-size:12px;}
.size16{font-size:16px;}
.size20{font-size:20px;}
.size24{font-size:24px;}
.size30{font-size: 30px;}
.size33{font-size:33px;}
.size36{font-size:36px;}
.size40{font-size:40px;}
.bg-red{background: #CC0000;}
.bg-black{background: #000;}
.bg-white{background: #FFF;}
.color-white, a:hover.color-white{color: #FFF;}
.color-red, a:hover.color-red{color: #CC0000; border-color: #CC0000;}
.color-4b4b4b, a:hover.color-4b4b4b{color: #4b4b4b;}
.w-40{width: 40px;}
.h-40{height: 40px;}
.w-60{width: 60px;}
.h-60{height: 60px;}
.m-center{margin-left: auto; margin-right: auto; display: block;}
.strong{font-weight: bold;}

.button-style1{border-radius: 8px; padding: 10px 40px; display: inline-block;}

/*FOOTER*/
#footer{padding-bottom: 70px;}
#footer .copyright{font-size:1.1rem; line-height: 2.3rem;}
#footer a:hover, #footer a:focus{text-decoration:none;}


@media only screen and (min-width:1200px) and (max-width:1390px){
    .header-nav-box{width: calc(20% - 10px); margin-bottom: 10px;}
}

@media only screen and (min-width:992px) and (max-width:1199px){
    .header-nav-box{width: calc(20% - 10px); margin-bottom: 10px;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    #section1 .top_banner{height: 500px; position: relative;}
    .header-nav-box{width: calc(50% - 10px); margin-bottom: 10px;}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .top_banner_img{left: 0; right: 0; margin: auto; max-width: 320px}
    .header-nav-box{width: calc(50% - 10px); margin-bottom: 10px;}
}
@media only screen and (min-width: 412px) and (max-width: 599px) {
}
@media only screen and (min-width: 360px) and (max-width: 411px) {
}
@media only screen and (min-width:320px) and (max-width:359px){
}
@media only screen and (min-width: 320px) and (max-width: 599px) {
    .top_banner_img{max-width: 320px;}
    .control-page{display: block;}
    .header-nav-box{width: calc(50% - 10px); margin-bottom: 10px;}
}
@media only screen and (min-width: 320px) and (max-width: 1023px) {
    #section1 .top_banner{height:600px;}
}
@media only screen and (min-width: 768px) and (max-width: 1295px) {
    .col-md-5.col-sm-7{max-width: 70%; flex: 0 0 70%; -ms-flex: 0 0 70%;}
    .chapter-bg{max-width: 50%; flex: 0 0 50%;}
}

/*IE8 9*/
@media \0screen {

}
@media screen and (min-width:0\0) {

}