@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; }
h1,h2,h3,h4,h5,h6 {}
a {color:#111;}
a:hover {color:#000; text-decoration: none;}
p{word-wrap: break-word;}
.navbar hr{position: absolute; top: 40px; color: #111; left: 0; width:100%; border-color:#333;}

/*Header*/
html{height:100%;}
body {height:100%; color:#FFF; background: #000 url(../img/blackorchid.png) repeat; font-family: Arial, Helvetica, 'Microsoft Yahei', SimHei, san-serif; font-size: 16px;}
.canon_logo img{width:81px; padding:15px 0px;}
.canon_sub_logo{padding:18px 0; height:20px;}
.canon_sub_logo img{height: 20px;}
.navbar-trans {background-color:#000;color:#cdcdcd;border-width:0;}
#section1 .top_banner{padding-bottom: 50%; position: relative;}
.top_banner_description{position: absolute; top: 130px; width: 100%; padding: 0 20px; color: #111;}
.top_banner{background: url(../img/chapter1-1.jpg) no-repeat center bottom; background-size: cover;}
.top_banner_img{position: absolute; top: 80px; max-width: 600px; left: 0; right: 0; margin: auto; text-align: center;}
.guanggao{position: absolute; right: 30px; top: 70px; z-index: 5;}

/*Content*/
.chap-box{border: 2px solid #CCC; border-radius: 8px;}
.chap-top{border-radius: 8px 8px 0 0; background-color: #CCC; height: 120px; padding: 34px 0; color: #111;}
.chap-bottom, .chap-bottom-l{border-radius: 0 0 8px 8px; background-color: #000; height: 120px; padding: 24px 0;}
.chap-bottom p{color: #FFF;}
.chap-bottom-l{height: auto;}
.chap-bottom-l a{color: #FFF;}
.chap-bottom-l a:hover{color: rgba(255,255,255, 0.8)}
.interview-title{padding-top: 120px; color: #111;}
.product-name-l, .product-name-r{float: left; width:30%; margin-right: 2%;}
.product-name-r{margin-right:0; width:68%;}
.product-name{height: 160px;}
.new-icon{background: #CC0000; font-size: 12px; padding:3px;}
.control-handle{text-align: center;}
span.fa-angle-right{ border:2px solid #FFF; border-radius:50%; width:50px; height: 50px; text-align: center;}
.fa-angle-right:before{position:relative; top:-4px; left:3px;}
.control-handle a{font-size:50px;margin:10px; color: #FFF;}
.interview-title p{text-shadow: 0 1px 2px rgba(255,255,255, 0.6)}
.sp-w-7{max-width: 70%;}
.slider-top #example1{margin: 0 auto!important;}
#example1.sp-horizontal .sp-next-arrow, #example1.sp-horizontal.sp-rtl .sp-previous-arrow{right: -30px;}
#example1.sp-horizontal .sp-previous-arrow{left: -30px;}
#example1 .sp-next-arrow:after, #example1 .sp-next-arrow:before,  #example1 .sp-previous-arrow:after,  #example1 .sp-previous-arrow:before{background-color: #FFF!important;}
.sp-title{position: absolute; z-index: 2; bottom: 0; padding: 5px 10px; width: 100%; background: rgba(0,0,0, .5); color: #FFF;}
.sp-link{position: absolute!important; z-index: 30; width: 100%; height: 100%; top: 0}
.sp-button{border-color: #CC0000!important;}
.sp-selected-button{background-color: #CC0000!important;}


.title_img{position: relative; height: 205px; border-top: 2px solid #CC0000; border-bottom: 2px solid #CC0000;}
.title_img h3{position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 24px; height: 45px; padding: 0 20px;}
.container{padding-top: 80px; padding-bottom: 80px;}
.container b{display: block;}
.chapter1 #interview1{background: url(../img/chapter1-2.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter1 #interview2{background: url(../img/chapter1-3.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter2 #interview1{background: url(../img/chapter2-1.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter2 #interview2{background: url(../img/chapter2-2.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter2 #interview3{background: url(../img/chapter2-3.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter2 #interview4{background: url(../img/chapter2-4.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter2 #interview5{background: url(../img/chapter2-5.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter2 #interview6{background: url(../img/chapter2-6.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter3 #interview1{background: url(../img/chapter3-1.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter3 #interview2{background: url(../img/chapter3-2.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter3 #interview3{background: url(../img/chapter3-3.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}
.chapter3 #interview4{background: url(../img/chapter3-4.jpg) no-repeat center; background-size: cover; height: 380px; background-attachment: fixed;}

/*COMMON*/
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb80{padding-bottom:80px;}
.prl10{padding-left: 10px; padding-right: 10px;}
.mr10{margin-right:10px;}
.size14{font-size:12px;}
.size16{font-size:16px;}
.size20{font-size:20px;}
.size30{font-size: 30px;}
.size33{font-size:33px;}
.size40{font-size:40px;}
.size60{font-size:60px;}
.red{color:#FF0000;}
.pink{width:14px; height:14px; display:inline-block; background:#ffcccc;}
.blue{width:14px; height:14px; display:inline-block; background:#99ccff;}
.p2{font-size:11px; line-height: 16px;}
.redwb{background: #FF0000; padding:5px 10px; color: #FFF;  border-radius:5px;}
.bluewb{background: #0052CC; padding:5px 10px; color: #FFF;  border-radius:5px;}
.ff0000{background:#FF0000; color:#FFF;}
.icon10{width:10px; height: 10px; display:inline-block; margin-right: 5px;}
.black{color:#111;}
.size18{font-size: 18px;}
.size24{font-size: 24px;}
.size28{font-size: 28px;}
.size36{font-size: 36px;}
.size48{font-size: 48px;}
.color-red{color: #CC0000;}
.color-white{color: #FFF;}
.color-black{color: #111;}
.bg-red{background-color: #CC0000;}
.bg-white{background: #FFF;}
.bg-black{background: #000;}
.button{padding: 10px 50px; border-radius: 8px;}
.button-1{padding: 5px 10px; display: inline-block;}
.italic{font-style: italic;}
.boldfont{font-weight: bold;}
.w-15-b{display: block; margin: 0 15px;}
.m-center{margin-left: auto; margin-right: auto;}

/*FOOTER*/
#footer{padding-bottom: 70px;}
#footer a, #footer #share_button a.addthis_button{color: #FFF;}
#footer #at15s{left: -85px!important;}
#footer .copyright{font-size:1.1rem; line-height: 2.3rem;}
#footer .copyright a:hover{color: #cc0000;}
#footer a:hover, #footer a:focus{text-decoration:none;}
.global{margin:18px 0;}
.global span{display: table-cell;}
.global .globe-icon{width: 12px; height: 12px; display: inline-block; background: url(../img/globe_m.png) no-repeat center center; background-size: 100% auto; padding: 0;}
.dropdown-menu .divider{background-color: #cdcdcd;}
.footer-social{background: #EFECDD;}
.relation img{border:1px solid #333; border-radius: 10px; margin-bottom:20px;}
.s_link{color: #333;}
ol.shop_link{list-style: none;}
.shop_link li a{color: #333!important;}
.shop_link li img{margin:0 auto;}
.share_info{text-align: center; width: 100%;  margin-bottom: 20px;}
#share_button{position:relative;width:88px; display:inline-block; }
#share_button a.addthis_button{ list-style:none; text-decoration:none; color:#333; font-size:14px;}
#share_button a,.share_parent a{text-indent:0; width:auto; height:auto;}
#share_button img, .share_parent img{width:auto;}
.container-fluid{position:relative;}
.control-page{height: 60px; position: fixed; bottom: 0; width: 100%; display: none;}
.control-page .control-handle{width: 50%; float: left; line-height: 60px;}
.control-page span{cursor: pointer; border: 2px solid #FFF; border-radius: 50%; height: 40px; width: 40px; line-height: 36px;}
.control-handle.left{background:#333;}
.control-handle.right{background: #CC0000;}

@media only screen and (min-width:1200px) and (max-width:1300px){
    .top_banner{background: url(../img/chapter1-1.jpg) no-repeat center top; background-size: 100%;}
}

@media only screen and (min-width:992px) and (max-width:1199px){
    .chap-box .size24{font-size: 20px;}
    .chap-box .size36{font-size: 30px;}
    .product-name-l .size60{font-size: 50px; }
    .top_banner{background-position: center top; background-size: 100%;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .chap-box .size24{font-size: 16px;}
    .chap-box .size36{font-size: 24px; line-height: 40px;}
    .chap-top, .chap-bottom{padding: 20px 0; height: 80px;}
    .product-name-l .size60{font-size: 36px; }
    #section1 .top_banner{background-position: center top; background-size: 100%; padding-bottom: calc(50% + 220px)}
    .top_banner_description{top: auto; bottom: 0; color: #FFF;}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .top_banner_img{left: 0; right: 0; margin: auto; max-width: 320px}
    .img-responsive{margin-left: auto; margin-right: auto;}
}
@media only screen and (min-width: 412px) and (max-width: 599px) {
    .top-b .chap-box{margin: 15px; width: 350px; margin-left: auto; margin-right: auto;}
}
@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;}
    .top_banner_description .size36{font-size: 20px;}
    .top_banner_description .size48{font-size: 24px;}
    .chap-box{margin: 15px 0;}
    .chap-top{padding: 20px 0; height: 80px;}
    .chap-bottom{height: 80px; padding: 12px 0;}
    .chap-box .size24{font-size: 20px;}
    .chap-box .size36{font-size: 28px;}
    .product-name-l, .product-name-r{width: 100%;}
    .p_list .col-xs-6{height: 850px;}
    .chapter1 #interview1, .chapter1 #interview2, .chapter2 #interview1, .chapter2 #interview2, .chapter2 #interview3, .chapter2 #interview4, .chapter2 #interview5, .chapter2 #interview6, .chapter3 #interview1, .chapter3 #interview2, .chapter3 #interview3, .chapter3 #interview4{height: 150px; margin-bottom: 130px;}
    .interview-title{padding-top:160px!important;}
    .interview-title p{text-shadow: none; color: #FFF; font-size: 20px; padding: 0 15px;}
    .interview-title .size28{font-size: 18px;}
    .img-responsive{margin-left: auto; margin-right: auto;}
    .sp-w-7{max-width: 100%;}
    .chapter1 #interview1, .chapter1 #interview2, .chapter2 #interview1, .chapter2 #interview2, .chapter2 #interview3, .chapter2 #interview4, .chapter2 #interview5, .chapter2 #interview6, .chapter3 #interview1, .chapter3 #interview2, .chapter3 #interview3, .chapter3 #interview4{background-attachment: initial;}
    .size24{font-size: 16px;}
    #section1 .top_banner{background-position: center top; background-size: 100%; padding-bottom: calc(50% + 140px)}
    .top_banner_description{top: auto; bottom: 0; color: #FFF;}
}
@media only screen and (min-width: 320px) and (max-width: 991px) {
    .top_banner_description .bg-black{background-color: #CCC;}
    .top_banner_description .color-white{color: #111;}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .chap-box{margin: 15px;}
    .top-b .chap-box{margin: 15px; width: 350px; margin-left: auto; margin-right: auto;}
    .interview-title .size28{font-size: 20px;}
    .interview-title .size36{font-size: 24px;}
    .p_list .col-xs-6{height: 990px;}
    .sp-w-7{max-width: 100%;}
    #section1 .top_banner{background-position: center top; background-size: 100%; padding-bottom: calc(50% + 220px)}
    .top_banner_description{top: auto; bottom: 0; color: #FFF;}
}

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

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

}
/*retina*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
    body{background:url(../img/blackorchid_@2X.jpg) repeat;}
}