/**CSS vision: 1.1*/
/*common*/
html,body{min-height: 100%;}
body{min-height: 100%; font: 18px/1.5  Arial, Helvetica,'Microsoft Yahei',SimHei, san-serif; background-color: #F4F5F9; position: relative; color: #575F6B;}
a{color: #575F6B;}
a:hover{color:#000;}

/*Header*/
.header{height: 60px; position: relative;}
.header_t, .header_b{height: 60px; width: 100%; padding: 0 15px;}
.canon_logo{float: left; height: 33px; margin-top: 15px;}
.canon_sub_logo{float: right; height: 21px; margin-top: 20px}
.canon_logo img, .canon_sub_logo img{height: 100%; vertical-align: top;}
.guanggao{position: absolute; right: 15px; bottom: -40px; z-index: 5;}
.kv_des{position:absolute; top: 30px; right: 30px; width: 440px;}
h2 span{display: inline-block;}

/*top*/
.box{border-radius: 16px; background: #F4F5F9; box-shadow: 8px 8px 16px #cfd0d4, -8px -8px 16px #ffffff; padding: 20px 15px;}
.boxH{border-radius: 16px; background: #F4F5F9; box-shadow: inset 8px 8px 16px #cfd0d4,inset -8px -8px 16px #ffffff; padding: 20px 20px 0;}
.box.selectI, .selectC .box{box-shadow: inset 8px 8px 16px #cfd0d4, inset -8px -8px 16px #ffffff; border-radius: 15px;}

.kv{padding: 0; overflow: hidden; position: relative;}

/*Other*/
.pc_block{display: block;}
.footer-navi .btn{top: -5px;}
.copyright{text-align: center;}

/*sort list*/
.lens .col-3{display: none; margin-bottom: 30px;}
.lens .col-3 .box{min-height: 370px;}
.lens.active, .lens .col-3.active{display: block;}
.lens_name{line-height: 1.2; margin-bottom: 20px; font-weight: bold;}
.lens_cate{margin-bottom: 10px;}
.traning-img{margin-left: -16px; margin-right: -16px; margin-top: -20px; overflow: hidden; border-radius: 16px 16px 0 0;}
.controlBanner .col-p20 a, .cate-top{padding: 10px; padding-left: 90px; position: relative; min-height: 90px; width: 100%; display: table;}
.cate-top{padding-left: 10px;}
.cate-top b{margin-top: 20px;}
.selectC .cate-top b::before{content: ""; position: absolute; background: url(/special/lensguidelist/common/img/top/check.png) center; background-size: 50px; width: 50px; height: 50px;  margin-left: -60px; margin-top: -10px;}
.controlBanner .col-p20 b, .controlCategory .col-4 b{display: table-cell; vertical-align: middle;}
.controlBanner .col-p20 span, .controlCategory .col-4 span{width: 70px!important; height: 70px; position: absolute; left: 10px; top: 10px; padding: 15px;; border-radius: 50%; background: #EDEEF2; box-shadow: inset 5px 5px 5px #d8d9dc, inset -5px -5px 10px #ffffff; overflow: hidden;}
.controlCategory .col-4 span{width: 20px!important; height: 20px; top: 30px; left: 30px;}
.controlBanner .col-p20 .selectI span{box-shadow: 8px 8px 16px #cfd0d4, -8px -8px 16px #ffffff;}
.controlCategory .col-4 .selectC span{width: 70px!important; height: 70px; left: 10px; top: 10px; box-shadow: none; background: none;}
.hidden{display: none;}
#collapseExample1 .col-4.box{margin-left: 15px; margin-right: 15px; max-width: calc(33.33% - 30px);}

/*footer*/
.main{padding-bottom: 160px;}
.footer{height: 160px; width: 100%; position: absolute; bottom: 0; left: 0; padding: 0 15px;}
.share_info span{display: inline-block;  margin-right: 10px;}
.share_info .bdsharebuttonbox{display: inline-block; vertical-align: middle;}
.share_info{display: table; margin: 60px auto 0; overflow: hidden;}
.share_info span img{width: 35px;}

.container{max-width: 1284px;}
.btn{border-radius: 16px; padding: 5px 25px; box-shadow: 8px 8px 16px #cfd0d4, -8px -8px 16px #ffffff; color: #333; background-color: transparent; border-color: transparent; margin-bottom: 0px;}
.btn:hover{box-shadow: inset 8px 8px 16px #cfd0d4, inset -8px -8px 16px #ffffff;}


@media screen and (max-height: 860px) {

}
@media screen and (max-width: 1366px) {

}

@media screen and (max-width: 1023px) {
  .kv_des{position: relative; top: 0; right: auto; width: 100%; padding: 20px;} 
  .col-3, .controlCategory .col-3{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%}
  .lens .col-3 .box{min-height: 420px;}
  .size24{font-size: 20px;}
  .size36{font-size:30px;}
  .header_b h1{font-size: 32px;}
  .size36{font-size:24px;}
  .size80{font-size:36px;}
  #collapseExample1 .col-3.box{max-width: calc(50% - 30px); -ms-flex: 0 0 50%; flex: 0 0 50%; }
}
@media screen and (max-width: 767px) {
  body{font-size: 16px;}
  .col-3{-ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%}
  .lens .col-3 .box{min-height: 370px;}
}

@media screen and (max-width: 599px) {
  body{font-size: 14px;}
  .header_b h1{font-size: 26px;}
  .size36{font-size:16px;}
  .size80{font-size:30px;}
  .lens .col-3 .box{min-height: 300px;}
  .col-3{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
}

@media screen and (max-width: 429px) {
  .col-p20{-ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%}
}

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

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
  .selectC .cate-top b::before{ margin-left: 30px;}
}

<!--ºÄʱ1787188780.4085Ãë-->