/**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: #FFF; position: relative;}
.bg-mask{background: rgba(0,0,0,0.6); position: fixed; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
a{color: #000;}
a:hover{color:#000;}

/*Header*/
.header{height: 110px;}
.header_t, .header_b{height: 60px; width: 100%; padding: 0 15px;}
.header_t{border-bottom: 1px solid #CC0000;}
.header_b{height: 50px; background: #FFF;}
.header_b h1{font-size: 30px; line-height: 50px; display: inline-block; color: #000; font-weight: bold; margin-bottom: 0;}
.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;}
.skewed-bg1{background-color: #EFEFEF; padding: 200px 0; transform: skew(0deg, -10deg); margin-top: -200px; transition: all 3s; position: absolute; width: 100%; height: 100vh; opacity: 1; z-index: 1; outline:1px solid transparent; top: 0; left: 0;}
.skewed-bg2{background-color: #FFF; padding: 200px 0; transform: skew(0deg, -10deg); margin-top: -200px; transition: all 3s; position: absolute; width: 100%; height: 100vh; opacity: 1; z-index: 1; outline:1px solid transparent; top: 0; left: 0;}
.bg-eos{position: absolute; width: 100%; height: 100%; z-index: 4; background-image: url(../img/eos.png); background-repeat: no-repeat; background-position: center; background-size: 100%; opacity: .1; transition: all 3s; margin-top: 0; left: 0; top: 0;}

.animate-1{margin-top: -1000px; transition: all 3s;}
.animate-2{margin-top: -500px; transition: all 3s;}

.part1{width: 100%; height: 100%; position: relative; z-index: 3;}
.part1_img{ background: url(../img/img.png);}
.page_cover{z-index: 2; padding: 0 15px; max-width: 1400px;}
.page_cover h2{font-size: 60px;}
.page_cover img{width: 360px;}

.overit-l{width: 360px; position: absolute; bottom: -30px; right: -150px; transition: all 1.5s;}
.overit-l.active{right: -200px; transition: all 1.5s;}
.overit-r{width: 360px; position: absolute; bottom: -30px; left: -150px; transition: all 1.5s;}
.overit-r.active{left: -200px; transition: all 1.5s;}
.category .overit-l, .category .overit-r{width: 300px; height: 300px;}
/*top*/
.top-page .full-dis{height: 100vh; position: relative; min-height: 820px;}
.top_box h3.t-l{transform: rotate(-90deg); transform-origin: left; position: absolute; left: 30px;}
.top_box h3.t-r{transform: rotate(90deg); transform-origin: 0 0; position: absolute; top: 150px;}
.top_box_show_l{margin-left: 80px;}
.top_box_show_r{margin-right: 80px;}
.col-md-6 h3{margin-top: -100px; transition: all 2s;}
.on .col-md-6 h3{margin-top: 0; transition: all 2s;}
.on.full-dis .t-r{top: 0; transition: all 2s;}
.full-dis .t-l{bottom: 100px; transition: all 2s;}
.on.full-dis .t-l{bottom: -25px; transition: all 2s;}
[data-scroll] {will-change: transform;}
.top_KV{margin-right: -15px; margin-left: -15px;}
.kv_mask{width: 35%; background: rgba(255,255,255,.8); position: absolute; top: 0; right: 0; height: 100%; padding:160px 80px 50px; z-index: 4;}
.kv_logo_text{position: absolute; top: 100px; left: 40px; opacity: 0; text-shadow: 1px 2px 2px rgba(0,0,0,.5);}
.slick-active .kv_logo_text{top: 50%; transition: all 2s; opacity: 1; transform: translate(0, -50%);}

/*approach*/
body.approach{background: #359D77;}
.approach .skewed-bg1{background-color: #24825F;}
.approach .skewed-bg2{background-color: #3DBF8F;}
.category h2, .post h2{font-size: 40px;}
.page_cover .cate_title, .cate_title{width: 300px; height: 300px; border-radius: 50%; font-size: 40px; z-index: 2; position: relative; background: transparent;}
.cate_title{position: absolute;}
.circle-1, .circle-2, .circle-3{width: 280px; height: 300px; mix-blend-mode: multiply; position: absolute; top: 0; left: 0; z-index: 1;}
.circle-1 {border-radius: 50% 50% 50% 70%/50% 50% 70% 60%; animation: border-animation 6s infinite linear;}
.circle-2 {border-radius: 80% 30% 50% 50%/50%; animation: border-animation 4s infinite linear;}
.circle-3 {border-radius: 40% 40% 50% 40%/30% 50% 50% 50%; animation: border-animation 3s infinite linear;}

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


/* Animation */
@keyframes border-animation {
  to { transform: rotate(360deg); }
}

/*beginner*/
body.beginner{background: #FB7286;}
.beginner .skewed-bg1{background-color: #CD5F6F;}
.beginner .skewed-bg2{background-color:#FB7286;}

/*application*/
body.application{background: #1DBCB8;}
.application .skewed-bg1{background-color: #1B9B97;}
.application .skewed-bg2{background-color: #1DBCB8;}

/*tips*/
body.tips{background: #BB79A9;}
.tips .skewed-bg1{background-color: #9A658B;}
.tips .skewed-bg2{background-color: #BB79A9;}

/*movie*/
body.movie{background: #EF843C;}
.movie .skewed-bg1{background-color: #C36E34;}
.movie .skewed-bg2{background-color: #EF843C;}

/*keyword*/
body.keyword{background: #48AADB;}
.keyword .skewed-bg1{background-color: #4ca1e4;}
.keyword .skewed-bg2{background-color: #44b3d2;}


/*Menu & gg*/
.guanggao{position: absolute; right: 15px; bottom: -35px;}
.menu{float: right; color: #000; font-size: 25px; cursor: pointer; line-height: 50px;}
.menu-mask{position: fixed; top: 0; left: 0; background: rgba(0,0,0, .8); width: 100%; height: 100%; z-index: 1031; display: none;}
.sub-menu{position: relative;}
.sub-menu ul{padding-left: 0;}
.sub-menu .closer{position: absolute; top: -50px; right: -50px; cursor: pointer;}

/*post*/
.post main .container-fluid:first-child{padding-top: 180px;}
.white-box{padding: 30px; background: #FFF;}
.post ul.list li{list-style: disc;}
.post ul{padding-left: 20px;}
.post .bg-eos{height: 100vh;}
.kv1{left:-50px; position: relative;}
.kv1.animate{left: 0; transition: all 2s;}
.pre-page{float: left; padding-left: 30px; color: #FFF; position: relative;}
.pre-page::before{content: "\f104"; font: normal normal normal 50px/1 FontAwesome; position: absolute; left: 0; top: -14px;}
.next-page{float: right; padding-right: 30px; color: #FFF; position: relative;}
.next-page::before{content: "\f105"; font: normal normal normal 50px/1 FontAwesome; position: absolute; right: 0; top: -14px;}
.kv-top{max-width: 1600px; margin:0 auto;}

/**/
.top_box .item {position: relative;will-change: transform;overflow: hidden; max-width: calc(100% - 80px);}
.item__img {--overflow: 40px;	height: calc(100% + (2 * var(--overflow)));	top: calc( -1 * var(--overflow));	width: 100%;position: absolute;	background-image: var(--image);	background-size: 100%;	background-position: 50% 0%;	will-change: transform; text-indent: -99999px;}
.item__img--t1 {--overflow: 60px; background-repeat: no-repeat;}
.item:first-child .item__img-wrap {--aspect-ratio: 8/10;--image: url(../img/img.png);}
.item:nth-child(2) .item__img-wrap {--aspect-ratio: 120/76;--image: url(../img/img.png);}
.item:nth-child(3) .item__img-wrap {--aspect-ratio: 60/75;--image: url(../img/img.png);}
.item__img-wrap {overflow: hidden; width: 100%;	padding-bottom: 56%; transform: translate3d();}
.video-box .CCH5playerContainer, .video-box-h .CCH5playerContainer{position: absolute!important;}
.button-type1, .button-type2{padding: 14px 24px; display: inline-block;}
.button-type2{padding:6px 10px;}
.kv_mask img{position: absolute; width: 360px; left: -280px; bottom: 100px; transition: all 1.5s;  -webkit-animation: topDown 4s 4s infinite;
  animation: topDown 4s 4s infinite;}
.top_KV .slick-slide img{transform: scale(1.4)  rotate(12deg);  transition: all 7s;}
.top_KV .slick-active img{transform: scale(1); transition: all 7s;}
.slick-prev, .slick-next{height: 50px;}
/*
#CrossFade {background: #fff; display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; height: 100vh; overflow: hidden; position: relative;}
#CrossFade img {position: absolute; min-width: 100%; min-height: 100%; height: auto; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0;  -webkit-transform: scale(1.4) rotate(12deg); transform: scale(1) rotate(12deg); -webkit-animation: CrossFade 24s infinite; animation: CrossFade 24s infinite; top: 0;}
#CrossFade img:nth-child(3) {-webkit-animation-delay: 6s; animation-delay: 6s;}
#CrossFade img:nth-child(2) {-webkit-animation-delay: 12s; animation-delay: 12s;}
#CrossFade img:nth-child(1) {-webkit-animation-delay: 18s; animation-delay: 18s;}
#CrossFade img::before{content: attr(data-text); font-size: 40px; position: absolute; top: 150px; left: 40px;} */

@keyframes topDown {
  0% {
    bottom: 80px;
  }
  50% {
    bottom: 100px;
  }
  100%{
    bottom: 80px;
  }
}

@-webkit-keyframes CrossFade {
  25% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  40% {
    opacity: 0;
  }
}
@keyframes CrossFade {
  25% {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
            transform: scale(1) rotate(0);
  }
  40% {
    opacity: 0;
  }
}


@keyframes comeFromBottom{
  0%{
    opacity:0;
    transform:translateY(40px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.btn:link,.btn:visited{text-decoration: none; text-transform:uppercase; position:relative; top:0; left:0; border-radius:0; display:inline-block; transition: all .5s;}
.btn-white{background:#fff; color:#000;}
.btn:hover{box-shadow:0px 10px 10px rgba(0,0,0,0.2); transform : translateY(-3px);}
.btn:active{box-shadow:0px 5px 10px rgba(0,0,0,0.2); transform:translateY(-1px);}
.btn-bottom-animation-1{animation:comeFromBottom 1s ease-out .5s;}
.btn::after{content:""; text-decoration: none; text-transform:uppercase; position:absolute; width:100%; height:100%; top:0; left:0; border-radius:0; display:inline-block; z-index:-1; transition: all .5s;}
.btn-white::after {background: rgba(255,255,255,.3);}
.btn-animation-1:hover::after {transform: scaleX(1.4) scaleY(1.6);  opacity: 0;}

/*Color*/
.color-yinyan, a.color-yinyan{color: #3DBF8F!important;}
.color-rumen, a.color-rumen{color:#FB7286!important;}
.color-yingyong, a.color-yingyong{color: #1DBCB8!important;}
.color-jiqiao, a.color-jiqiao{color: #BB79A9!important;}
.color-duanpian, a.color-duanpian{color: #EF843C!important;}
.color-keyword, a.color-keyword{color: #48AADB!important;}
.bg-yinyan{background-color: #3DBF8F;}
.bg-rumen{background-color: #fb7286;}
.bg-yingyong{background-color: #1dbcbb;}
.bg-jiqiao{background-color: #bb79a9;}
.bg-duanpian{background-color: #EF843C;}
.bg-keyword{background-color: #48AADB;}
.bg-yinyan_01{background-color: #FFFFFF;}
.bg-yinyan_02{background-color: #53A185;}
.bg-yinyan_03{background-color: #3DBF8F;}
.bg-yingyong_01{background-color: #FFFFFF;}
.bg-yingyong_02{background-color: #3D9D9A;}
.bg-yingyong_03{background-color: #1DBCB8;}
.bg-rumen_01{background-color: #FFFFFF;}
.bg-rumen_02{background-color: #C97783;}
.bg-rumen_03{background-color: #FB7286;}
.bg-jiqiao_01{background-color: #FFFFFF;}
.bg-jiqiao_02{background-color: #9F7794;}
.bg-jiqiao_03{background-color: #BB79A9;}
.bg-duanpian_01{background-color: #FFFFFF;}
.bg-duanpian_02{background-color: #C28257;}
.bg-duanpian_03{background-color: #EF843C;}



/*fixnav*/
.fix-nav{background-color: #333333; position: fixed; bottom: 25px; right: 15px; z-index: 3; transition: all .2s;}
.fix-nav.scroll{bottom: 15px; transition: all 1s;}
.fix-nav a{padding: 7px 15px; color: #FFF; display: inline-block;}

.slick-slide{margin: 0px 20px;}
.slick-prev:before{content: "\f104"; font: normal normal normal 50px/1 FontAwesome;}
.slick-next:before{content: "\f105"; font: normal normal normal 50px/1 FontAwesome;}

.top_KV .slick-slide{margin-left: 0; margin-right: 0; position: relative; height: 100vh;}

/*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;}

/*追加*/
.cont_w{width: 70%;}
.text-right .cont_w{float: right; text-align: left;}
.cont_w::after{clear: both; display: block;}
.text-right a{float: right;}
.text-left .cont_w{float: left;}
.slick-next:before, .slick-prev:before{color: #666;}
.top_KV .slick-slider{overflow: hidden; height: 100vh;}
.relation-box.slick-slider{height: auto; padding-bottom: 0;}
.btn.inline-box{padding: 6px 50px;}

@media screen and (max-height: 860px) {
  .part1.boxCenter{margin-top: 50px;}

}
@media screen and (max-width: 1366px) {
  .overit-l, .overit-r{width: 220px;}
  .overit-l.active{right: -16vw;}
  .overit-r.active{left: -16vw;}
  .kv_mask img{width:250px; left: -170px; bottom: 50px;}
  .spec_b{top: 5px!important;}
  .kv_mask{padding:160px 20px 30px;}
  .kv_mask img{-webkit-animation: topDown 4s 4s infinite; animation: topDown 4s 4s infinite;}
  @keyframes topDown {
    0% {
      bottom: 50px;
    }
    50% {
      bottom: 80px;
    }
    100%{
      bottom: 50px;
    }
  }
}
@media only screen  and (max-width: 1023px) and (min-width: 768px) {
  .col-md-4 .m-center .button-type2.mlr15{margin-left: 5px; margin-right: 5px; margin-bottom: 10px;}
}
@media screen and (max-width: 1023px) {
  .overit-l, .overit-r{width: 150px; height:150px; bottom: -40px;}
  .page_cover .cate_title, .cate_title{font-size: 30px;}
  .page_cover h2, .category h2, .post h2{font-size: 48px;}
  .category .overit-l, .category .overit-r,.circle-1, .circle-2, .circle-3, .page_cover .cate_title, .cate_title{width: 150px; height: 150px;}
  .size24{font-size: 20px;}
  .size36{font-size:30px;}
  .top-page .full-dis{height: auto; min-height: 520px;}
  .item__img--t1{--overflow: 10px;}
  .top-page .first-box, .top-page .first-box .full-dis, .first-box .part1{height: auto;}
  .kv_mask{background: none; width: 100%; position: relative; padding: 15px; height: auto;}
  .kv_mask img{display: none;}
  #CrossFade{justify-content: center; height: 50vh; min-height: 512px;}
  .col-md-6{flex: 0 0 100%; max-width: 100%;}
  .top_box .item{max-width: 100%;}
  .top_box_show_l{margin-left: 0;}
  .top_box_show_r{margin-right: 0;}
  .cont_w{width: 100%;}
  .header_b h1{font-size: 32px;}
  .full-dis{min-height: 850px;}
  .full-dis:nth-child(2n+1) .col-md-6.text-left{order: 3;}
  .page_cover p{font-size:24px;}
  .page_cover img{width: 50%;}
  .top_box h3.t-l, .top_box h3.t-r{transform: rotate(0); position: relative; bottom: auto; left: 0; right: auto; top: 0!important;}
  .overit-l, .overit-r{display: none;}
  .full-dis .text-right{text-align: left!important;}
  .size36{font-size:24px;}
  .size80{font-size:36px;}
  .top-page .full-dis{min-height: 750px; height: auto; padding-bottom: 40px;}
  .text-right a{float: left;}
  .on.full-dis .t-r{top: 0; transition: all 2s;}
  .on.full-dis .t-l{bottom: 0; transition: all 2s;}
  .col-md-6 h3{margin-top: 0px;}
  .category .page_cover{margin-top: 200px;}
  .top_box .top_box_show_l,.top_box .top_box_show_r{margin-bottom: 20px;}
  .top_KV{margin-top: 110px;}
  .slick-active .kv_logo_text{top:25%;}
  .slick-slider{height: 0; padding-bottom: 56.25%;}
  .top_KV .slick-slider{height: 0;}
  .top_box h3 span{display: none;}
  .top_box h3:before{content: attr(data-text); display: block;}
  
}
@media screen and (max-width: 767px) {
  body{font-size: 16px;}
  .page_cover h2,.category h2, .post h2{font-size: 32px;}
  .top-page .full-dis{min-height: auto;}
}

@media screen and (max-width: 599px) {
  body{font-size: 14px;}
  .header_b h1{font-size: 26px;}
  .page_cover h2, .category h2, .post h2{font-size: 24px;}
  .page_cover p{font-size:18px;}
  .full-dis{min-height: 812px;}
  .size36{font-size:16px;}
  .size80{font-size:30px;}
  .page_cover img{width: 60%;}
  .top_KV .slick-slide{height: auto;}
  .bg-eos{background-position: center 200px;}
  .fix-nav{display: none!important;}
  #CrossFade{min-height: 200px;}
  .pc_block{display: inline-block;}
  .pre-page, .next-page{width: 100%; margin-bottom: 20px;}
  .next-page{text-align: right;}
  
}

@media screen and (min-width:0\0) {
  main{overflow: hidden;}
  .item__img{height: 100%;}
  .relation{justify-content: flex-start;}
  .page_cover .cate_title, .cate_title{color:#FFF!important;}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){

}