@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 { font-weight:normal; }
a {color:#333;}
a:hover {color:#000; text-decoration: none;}
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:#444;font-family: Arial, Helvetica, 'Microsoft Yahei', SimHei, san-serif; }
.canon_logo img{width:81px; padding:15px 0px;}
.canon_sub_logo{padding:18px 0;}
.navbar-nav>li>a{line-height:30px; padding-top:16px; padding-bottom:16px; font-size: 1.6rem;}
.btn,.well,.panel {border-radius:0;}
.icon-bar, .navbar-default .navbar-toggle .icon-bar {background-color:#FFF;}
.navbar{min-height:;}
.navbar-trans {background-color:#000;color:#cdcdcd;border-width:0;}
.navbar-trans .navbar-trans >.container-fluid {padding: 14px;color:#CC0000;}
.navbar-trans li>a:focus,.navbar-trans li.active {color:#333; background:#222;}
.navbar-trans a, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>.active>a{color:#FFF;letter-spacing:1px;}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .dropdown-menu>li>a{color: #eee;}
.navbar-trans .form-control:focus {border-color: #eee;outline: 0;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);}
.scroll-down {border: 2px solid #fff;border-radius: 50%;height: 50px;width: 50px;display: inline-block;padding: 7px;text-align: center;z-index:3;}
.top_banner_handle a:first-child{margin-right: 20px;}
.scroll-down i{margin-left:2px;}
.scroll-up {position: fixed;display: none;z-index: 999;bottom: 2em;right: 2em;}
.scroll-up a {background-color: rgba(135, 135, 135, 0.5);display: block;width: 35px;height: 35px;text-align: center;color: #fff;font-size: 15px;line-height: 30px;}
section {padding-top:40px;padding-bottom:40px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;}
.dropdown-menu>li>a[href='#']:hover{color:#cdcdcd; background-color:#222;}
.produts_logo{float: left; width:218px; padding-top:19px;}
.navbar-fixed-top{position: absolute;}
.fixed_nav{position: fixed; width:100%; padding:0 15px!important; left: 0; background:#000;}
.guanggao{position:absolute; top: 150px; right: 30px; z-index: 4;}

/*20161129*/
.nav>li>a:focus, .nav>li>a:hover,.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{background-color:transparent; color:#CC0000;}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover,.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{background: none;}
.scroll-down i.fa:hover{color:#FFF;}
.navbar-default .navbar-toggle, .navbar .navbar-toggle{border:none; top:60px; right: -122px; z-index: 999;}
/*.dropdown-menu>li>a{color:#FFF; padding:5px;}*/
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{background-color:#222;}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{border:none; box-shadow: none;}
.dropdown-menu{background-color:#222; border-top-color: #222;}


/*INDEX*/
.top_text h1, .top_text h2{text-shadow: 3px 3px 2px rgba(255,255,255,0.7);}
.carousel-control.right, .carousel-control.left{font-size:50px;}
.carousel-control span, span.fa-angle-left, span.fa-angle-right{ border:2px solid #FFF; border-radius:50%; width:50px; height: 50px;}
span.fa-angle-left, span.fa-angle-right{border-color:#999;}
span.fa-angle-left:hover, span.fa-angle-right:hover{border-color:#111;}
.carousel-control.right span{right:10px; left:auto;}
.fa-angle-left:before{position:relative; top:-4px; left:-2px}
.fa-angle-right:before{position:relative; top:-4px; left:3px}
.scroll-down i.fa{margin-top:2px;}
.top_index #section1{padding-top:60px; min-height:100%; overflow:hidden; width: 100%; transition: all 2s ease-out; background-color:#000;}
.pat_bg{position:absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-color: rgba(0,0,0,0); background: url(../img/pat.png) repeat;}
.v-center{color: #333;}
.wlink a{float: left; margin-right:10px;}
.bg_video{position: absolute; top: 0; left: 0; width:100%; height: 100%; object-fit: cover; z-index: -1;}
.video-js{width: 100%; padding-bottom:56%;}
#video{background: #222328; color: #FFF;}
#interview{background: #BCC6C9; padding: 15px 15px 0;}
#section4 {background-color: #f6f6f6;color:#444;}
#tips, #author {background-color: #fff;}
#section3 {background-color: rgba(0,0,0,0.9);}
#section5 {background-color: #fff;}
#section6 {background-color: #eee;min-height:130px;padding-top:40px;padding-bottom:40px;}
#section7 {background-color: #CC0000;color: #f6f6f6;min-height:130px;padding-top:40px;padding-bottom:40px;}
footer {background-color:#2b2b2b;color:#ddd;min-height:100px;padding-top:20px;padding-bottom:40px;}
footer .nav>li>a {padding: 3px;color: #CC0000;}
footer .nav>li>a:hover {background-color:transparent;color:#fff;}
#goto .scroll-down i{margin-left:-2px; color: #FFF}
.navbar-brand {width:120px;}
.top_spec .carousel-caption{left:0; right:auto; text-align:left; color:#FFF;text-shadow:none; padding:0; top:auto; background: none; bottom:-25px; z-index: 211;}
.carousel-caption{left:0px; right:auto; text-align:left; color:#111;text-shadow:none; padding:10px 20px; bottom:auto; top:0; background:#CC0000;}
.carousel-caption h2{margin:0;}
.carousel-control.left, .carousel-control.right{height:50px; top:40%; left:10px; background-image:none; width:50px;}
.carousel-control.right{right:10px; left:auto;}
#sdown{color:#FFF;}
.video-js .vjs-big-play-button{top: 50%; margin-top: -0.75em; left: 50%; margin-left: -1.5em; background-color: #cc0000;}
.gallery_caption_l, .interview_caption{position: absolute; top: 0; bottom: 0; left: 0; right: 50%; margin: auto; height: 50%;}
.gallery_caption_r{position: absolute; top: 0; bottom: 0; left: 50%; right: 0; margin: auto; height: 50%;}
#gallery{padding:0; color: #FFF;}
.gallery_index1,.gallery_index2,.gallery_index3{position: relative;}
.mark_black{background: rgba(0,0,0, 0); position: absolute; width: 50%; height: 100%; top: 0; left: 0;}
.gallery_slider ul li{display: none; list-style: none;}
.gallery_slider ul{padding-left: 0;}
.gallery_slider ul li img{width: 100%;}
#myCarouse2{display:none;}
.top_banner_handle{position: absolute; left: 50%; bottom:40px; display:block; width: 62px; margin-left:-31px; z-index: 3;}
.slider_bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.animate-bg {opacity:0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform:scale(1.5,1.5); -moz-transform:scale(1.5,1.5); transform:scale(1.5,1.5);
    -webkit-transition: opacity 1s linear, transform 10s linear; -moz-transition: opacity 1s linear, transform 10s linear; -o-transition: opacity 1s linear, transform 10s linear;  transition: opacity 1s linear, transform 10s linear;}
#slider1, #slider2, #slider3{background: url(../img/top1.jpg) no-repeat center 62px; background-size:cover; }
#slider2{background-image:url(../img/top2.jpg);}
#slider3{background-image:url(../img/top3.jpg);}
.fadein {opacity: 100; filter: alpha(opacity=100); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); transform:scale(1,1);}
.topin{  -webkit-transform: translateY(200px); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%);  transform: translateY(-100%);}
.pcTop{margin-top: 90px;}
.col-md-12 .video-js{width: 100%; height: auto;}
.h1img{margin:0 auto;}
.carousel-caption p{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}

/*INTERVIEW*/
.b_title{position: relative;}
.b_title_t{position: absolute; top: 40px; left: 40px; color: #FFF;}
.middle_title{position:absolute; top:0; bottom:0; left: 0; right: 0; height: 50px; margin: auto auto 10%; text-align: center; color: #FFF;}

/*GALLERY*/
.img-banner{padding-top:124px; position:relative;}
.banner_title{position:absolute; left:20px; right:auto; top:100px;}
.gallery_page .container-fluid#gallery, .shooting_page .container-fluid#gallery, .tips_page .container-fluid#gallery{padding-top:40px;}
.gallery_page{background:#000; color:#FFF;}
.gallery_page a.redLink, .interview_page a.redLink{color: #CC0000;}
.control-page{margin-top:40px;}
html .control-page a{font-size:50px;margin:10px; color:#333;}
.carousel-control .fa:hover{border-color:#FFF;}
.banner_title h3{font-size:18px; margin:5px 0;}
.banner_title h2{font-size:27px; margin:5px 0;}
.gallery2_tab1{background: url(../img/landscape4.jpg) no-repeat;}
.gallery_page a{color: #FFF;}
.gallery_page a:hover, .top_index a:hover{text-decoration: underline;}

/*SEC_PAL*/
.sec_pal{width:100px; position:fixed; right: 0; top:50%; margin-top:-70px;}
.sec_pal ul{list-style:none;}
.sec_pal ul li{width:100%; margin-bottom:20px;}
.sec_pal ul li span{width:20px; height:20px; display:block; border-radius: 20px; background:#CC0000;}
.sec_pal ul li.active span{background:#111;}

/*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;}
.mr10{margin-right:10px;}
.hspace{height:210px; background-color: rgba(0,0,0,0.7);}
.fomore{background:#000; display:inline-block; color:#CC0000; border-radius:4px; padding: 14px 25px; font-size:18px; text-shadow: none;}
a.fomore:hover{color:#CC0000; text-decoration:none;}
.break_line{border-top: 0; height: 1px; background-color: #ccc; width: 100%; margin: 0;}
.size12{font-size:12px;}
.size16{font-size:16px;}
.size20{font-size:20px;}
.size30{font-size: 30px;}
.size33{font-size:33px;}
.size40{font-size:40px;}
.width320{width: 320px;}
.red{color:#FF0000;}
.video_box{position:relative; padding-bottom: 56.25%; padding-top:30px; height:0; width:100%; margin-bottom: 10px;}
.video_box iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.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;}
.lens-blue{background: #7dccf3;}
.lens-yellow{background: #fff000;}
.lens-orange{background: #f29600;}
.lens-purple{background: #910782;}
.black{color:#111;}
.position_r{right:40px; left:auto;}
.comment{color:#999;}
.border_CCC{padding: 10px; border:1px solid #CCC;}

/*FOOTER*/
#footer{background: #FFF;}
#footer .copyright{color:#666; font-size:1.1rem; line-height: 2.3rem;}
#footer a{color: #666;}
#footer a:hover, #footer a:focus{text-decoration:none; color: #CC0000;}
.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; display: table; margin: 0 auto;}
.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;}

/*20190528*/
.carousel-inner .item{padding-bottom:56.25%; margin-bottom: 30px;}
.top_spec .ccH5playerBox, .CCH5playerContainer{width: 100%!important; height: 100%!important; position: absolute;}
.top_spec object, .top_spec embed{width: 100%!important; height: 100%!important; position: absolute;}


@media only screen and (min-width:1200px) and (max-width:1300px){
    .sec_pal{width:50px;}
}

@media only screen and (min-width:992px) and (max-width:1199px){
    .carousel-control.left, .carousel-control.right{height:627px;}
    .sec_pal{width:50px;}
}
@media (min-width:768px) {h1 {font-size:68px;} .navbar-right .dropdown-menu{right:-1px;}}
@media (min-width:768px) {.v-center {height: 50%;overflow: visible;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;}}
@media (min-width:768px) and (max-width:773px){
    .container-fluid .container{margin-left: -7.5px;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .v-center{height:60%;}
    .top_img img{width:540px; margin: 5% auto}
    .carousel-control span{top:20%}
    .banner_title{top:90px;}
    .gallery_caption_l, .gallery_caption_r{height: auto; top:40px;}
    .sec_pal{width:50px;}
    .pcTop{margin-top:0;}
}
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .top_img img{width:470px; margin: 5% auto}
    .top_text{margin-top:30px;}
    .top_text h1, .top_text h2{text-shadow: 0 0 1px rgba(255,255,255,0.8);}
    .top_text h1 img{margin:20px 0;}
    .carousel-control span{top:15%}
    .banner_title{top:105px; left:25px;}
    .banner_title h1 img{width: 160px;}
    .nav>li>a{padding:5px; line-height: 20px;}
    .carousel-inner h2{font-size:24px; margin:10px 0;}
    .carousel-inner h3{font-size:20px; margin:10px 0;}
    .footer-social ol li > a > span {width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute; }
    .footer-social ol li {display: inline-block; padding: 13px 6px 0; }
    .v-center{padding-top:40px;}
    .top_spec .carousel-inner h2{margin:10px 0 0;}
    .gallery_caption_r, .gallery_caption_l{left:0; right:0;}
    .mark_black{width: 100%;}
    .gallery_caption_l, .gallery_caption_r{height: auto; top:40px;}
    .produts_logo{display:none;}
    .navbar hr{display: none;}
    .b_title_t h3{font-size:20px;}
    .b_title_t h2.size33{font-size:26px;}
    .gallery_page .b_title_t{position: relative; padding: 0 15px 20px; left: 0; top: 0;}
    .bg_img{height: 600px; overflow: hidden;}
    .bg_img img{height: 100%; max-width: none;}
    .gallery_caption_r, .gallery_caption_l{margin-top: 20px; width: 505px;}
    #interview{padding: 0;}
    .interview_caption{width:410px;}
    .top_text h1 img{margin:15px 0;}
    .guanggao{top:120px; right: 5px;}
    .pcTop{margin-top:0;}
}
@media only screen and (min-width: 412px) and (max-width: 599px) {
    .carousel-caption{position:relative; left: 0;}
    .carousel-inner h2{font-size:24px; margin:10px 0;}
    .carousel-inner h3{font-size:20px; margin:10px 0;}
    .banner_title h1 img{width:70px;}
    .banner_title h1{margin:0px 0 5px; line-height: 1}
    .banner_title h3{font-size:13px; line-height: 1}
    .banner_title h2{font-size:20px;  line-height: 1}
    .v-center{padding-top:30px;}
    .b_title_t h3{font-size:18px;}
    .b_title_t h2.size33{font-size:22px;}
    .top_text h1 img{margin:15px 0; width:280px; }
    .top_text{margin-top:30px;}
}
@media only screen and (min-width: 360px) and (max-width: 411px) {
    .carousel-inner h2{font-size:24px; margin:10px 0;}
    .carousel-inner h3{font-size:20px; margin:10px 0;}
    .banner_title h1{margin:10px 0 5px; font-size:10px;}
    .banner_title h3{font-size:13px; }
    .banner_title h2{font-size:20px; }
    .v-center{padding-top:30px;}
    .top_text h1 img{margin:15px 0; width:240px; }
    .top_text{margin-top:60px;}
}
@media only screen and (min-width:320px) and (max-width:359px){
    .carousel-caption{position:relative; left:0;}
    .carousel-inner h2{font-size:24px; margin:10px 0;}
    .carousel-inner h3{font-size:20px; margin:10px 0;}
    .banner_title h1{margin:7px 0 2px; font-size:10px;}
    .banner_title h3{font-size:12px; }
    .banner_title h2{font-size:16px; margin-top:0;}
    .top_text h1 img{margin:15px 0; width:240px; }
    .top_text{margin-top:60px;}
}
@media only screen and (min-width: 320px) and (max-width: 599px) {
    .top_spec .carousel-control.left, .top_spec .carousel-control.right{top:35%; margin-top: 0; z-index: 111;}
    .carousel-control.left, .carousel-control.right{top:50%; margin-top: -50px;}
    section{padding-top:20px; padding-bottom:20px;}

    .scroll-down{display:none;}
    .nav>li>a{padding:5px; line-height: 20px;}
    .footer-social ol li > a > span {width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute; }
    .footer-social ol li {display: inline-block; padding: 13px 6px 0; }
	.img-banner{padding-top:73px;}
    .carousel-inner h2{color: #111;}
    .top_spec .carousel-inner h2{margin:10px 0 0;}
     .banner_title h1 img{width:100px;}
    .gallery_caption_r, .gallery_caption_l{left:0; right:0;}
    .mark_black{width: 100%;}
    .produts_logo{display:none;}
    .navbar hr{display: none;}
    .b_title_t h3{font-size:16px;}
    .b_title_t h2.size33{font-size:18px;}
    .b_title_t{left: 10px;}
    .b_title_t h3{font-size:16px;}
    .b_title_t h2.size33{font-size:18px;}
    .interview_page .middle_title h2.size33{font-size:26px;}
    .bg_img{height: 400px; overflow: hidden; width}
    .bg_img img{height: 100%; max-width: none;}
    .gallery_caption_r, .gallery_caption_l{margin-top: 20px; width: 270px;}
    #interview{padding: 0;}
    #interview .bg_img{ height: 500px; position: relative;}
    #interview .bg_img img{margin-left:-25%;}
    .interview_caption{width: 300px;}
    .interview_caption p{text-shadow: rgba(255,255,255,1) 0 0 2px}
    .interview_page .middle_title h2.size40{font-size:25px;}
    .guanggao{top:120px; right: 5px;}
    .pcTop{margin-top:0;}
    div[id^="cc_video"]{position: absolute!important; width: 100%; height: 100%;}
    .carousel-inner{margin-top: 10px;}
    .carousel-inner .item{margin-top: 20px;}

}
@media only screen and (min-width: 320px) and (max-width: 1023px) {
    #footer{background: #FFF;}
    .img-banner{padding-top:62px;}
    .gallery_page .b_title_t{position: relative; padding: 0 15px 20px; left: 0; top: 0;}
    .navbar-default .navbar-toggle{background-color:#000;}
}


/*IE8 9*/
@media \0screen {
    .top_index #section1{background: url(../img/movie.jpg) no-repeat;}
    .container-fluid{min-width: 1170px; position:relative; width:100%; margin:0; padding:0; }
    .navbar-header{ margin-right:0!important; margin-left:0!important;}
    .navbar-collapse{display: block; height: 62px;}
    .container{width:1170px; margin: 0 auto;}
    .navbar-fixed-top{min-width:1200px;}
    .navbar-nav{width: 240px; float: right;}
    .navbar-nav li, .navbar-nav li a{display: inline;}
    .navbar-toggle{display:none;}
    .col-md-4{width:33%; float: left;}
    .col-md-3{width:25%; float: left;}
    .col-md-5{width:41%;}
    .col-md-6{width:50%; float: left;}
    .col-md-12{width:100%;}
    .fixed_nav{top:0; left: 15px;}
    .v-center{height: 50%;overflow: visible;margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;}
    .dropdown-menu{border-width: 0; top: 30px; z-index: 999;}
    #myCarousel{display:none;}
    #myCarouse2{display:block;}
    #footer, .centered{min-width:1200px;}
    .img-banner{padding-top: 124px; overflow-x: hidden;}
    .gallery_page .b_title_t{position: absolute;}
    .position_r{right:40px; left: auto;}
    .b_title, body{min-width:1200px; width:100%;}
    .img-responsive{width: 100%; max-width:none;}
    .row{width:100%;margin:0 auto;}
}
@media screen and (min-width:0\0) {

}