*, *:after, *:before { vertical-align: top; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-osx-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased; -moz-font-smoothing: subpixel-antialiased; -ms-font-smoothing: subpixel-antialiased; -o-font-smoothing: subpixel-antialiased; }

.banner { display: inline-block; width: 100%; margin-bottom: 140px; overflow: hidden; height: auto;}
.banner.full { width: 100%; margin-bottom: 0; position: relative; }
@media screen and (max-width: 659px) and (min-width: 0) { .banner.full { padding: 0; margin-top: 0; } }
.banner.full .box { width: 100%; height: 100%; position: absolute; left: 0;}
/* @media screen and (max-width: 989px) and (min-width: 690px) { .banner.full .box { height: 500px; } }
@media screen and (max-width: 689px) and (min-width: 475px) { .banner.full .box { height: 350px; } }
@media screen and (max-width: 474px) and (min-width: 414px) { .banner.full .box { height: 260px; } }
@media screen and (max-width: 413px) and (min-width: 0) { .banner.full .box { height: 215px; } } */
.banner.full .box .item { width: 100%;  height: 100%; position: absolute;}
.banner.full .box .item .pic_full { display: inline-block; width: 100%; }
.banner.full .box .item .pic_full img { width: 100%; }
.banner.full .box .item:nth-child(1) { left: calc(100% * -1); }
.banner.full .box .item:nth-child(2) { left: calc(100% * 0); }
.banner.full .box .item:nth-child(3) { left: calc(100% * 1); }
.banner.full .box .item:nth-child(4) { left: calc(100% * 2); }
.banner.full .box .item:nth-child(5) { left: calc(100% * 3); }
.banner.full .box .item:nth-child(6) { left: calc(100% * 4); }
.banner.full .box .item:nth-child(7) { left: calc(100% * 5); }
.banner.full .box .item:nth-child(8) { left: calc(100% * 6); }
.banner.full .box .item:nth-child(9) { left: calc(100% * 7); }
.banner.full .box .item:nth-child(10) { left: calc(100% * 8); }
.banner.full .av { position: absolute; left: 0; top: 45%; display: inline-block; width: 80px; height: 80px; font-size: 5em; color: rgba(255, 255, 255, 0.3); -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
    z-index: 999;
}
@media screen and (max-width: 989px) and (min-width: 690px) { .banner.full .av { font-size: 4em; top: 45%; width: 60px; height: 60px; } }
@media screen and (max-width: 689px) and (min-width: 475px) { .banner.full .av { font-size: 4em; top: 40%; width: 60px; height: 60px; } }
@media screen and (max-width: 474px) and (min-width: 0) { .banner.full .av { font-size: 3em; top: 40%; width: 50px; height: 50px; } }
.banner.full .av.right { left: auto; right: 25px; width: 60px; height: 60px; }
@media screen and (max-width: 474px) and (min-width: 0) { .banner.full .av.right { width: 50px; height: 50px; right: 0; } }
.banner.full .av:hover, .banner.full .av:active { color: white; }
@media screen and (max-width: 529px) and (min-width: 325px) { .banner.product { position: relative; }
  .banner.product .arrow_boxs { position: absolute; z-index: 5; left: -8px; top: 15px; }
  .banner.product .arrow_boxs:last-child { left: auto; right: -5px; } }
@media screen and (max-width: 324px) and (min-width: 0) { .banner.product { position: relative; }
  .banner.product .arrow_boxs { position: absolute; z-index: 5; left: -15px; top: 15px; }
  .banner.product .arrow_boxs:last-child { left: auto; right: -20px; } }
.banner.tran .box .item { -moz-transition: left 0.3s; -o-transition: left 0.3s; -webkit-transition: left 0.3s; transition: left 0.3s; }
@media screen and (max-width: 659px) and (min-width: 325px) { .banner { padding: 0 10px; margin-bottom: 80px; margin-top: 20px; } }
@media screen and (max-width: 324px) and (min-width: 0) { .banner { padding: 0 10px; margin-bottom: 50px; margin-top: 40px; } }
.banner .box { display: inline-block; width: 1200px; margin: 0 auto; overflow: hidden; position: relative; }
@media screen and (max-width: 1354px) and (min-width: 1065px) { .banner .box { width: 875px; } }
@media screen and (max-width: 1064px) and (min-width: 860px) { .banner .box { width: 675px;} }
@media screen and (max-width: 859px) and (min-width: 800px) { .banner .box { width: 575px; } }
@media screen and (max-width: 799px) and (min-width: 660px) { .banner .box { width: 475px;  } }
@media screen and (max-width: 659px) and (min-width: 320px) { .banner .box { width: 320px;} }
@media screen and (max-width: 319px) and (min-width: 0) { .banner .box { width: 320px; } }
.banner .box .item { width: 300px; position: absolute; top: 0; left: 0; padding-right: 30px; }
.banner .box .item:nth-child(1) { left: -300px; }
.banner .box .item:nth-child(2) { left: 0px; }
.banner .box .item:nth-child(3) { left: 300px; }
.banner .box .item:nth-child(4) { left: 600px; }
.banner .box .item:nth-child(5) { left: 900px; }
.banner .box .item:nth-child(6) { left: 1200px; }
.banner .box .item:nth-child(7) { left: 1500px; }
.banner .box .item:nth-child(8) { left: 1800px; }
.banner .box .item:nth-child(9) { left: 2100px; }
.banner .box .item:nth-child(10) { left: 2400px; }
@media screen and (max-width: 1064px) and (min-width: 860px) { .banner .box .item { width: 230px; padding-right: 20px; }
  .banner .box .item:nth-child(1) { left: -230px; }
  .banner .box .item:nth-child(2) { left: 0px; }
  .banner .box .item:nth-child(3) { left: 230px; }
  .banner .box .item:nth-child(4) { left: 460px; }
  .banner .box .item:nth-child(5) { left: 690px; }
  .banner .box .item:nth-child(6) { left: 920px; }
  .banner .box .item:nth-child(7) { left: 1150px; }
  .banner .box .item:nth-child(8) { left: 1380px; }
  .banner .box .item:nth-child(9) { left: 1610px; }
  .banner .box .item:nth-child(10) { left: 1840px; } }
@media screen and (max-width: 859px) and (min-width: 800px) { .banner .box .item { width: 195px; padding-right: 10px; }
  .banner .box .item:nth-child(1) { left: -195px; }
  .banner .box .item:nth-child(2) { left: 0px; }
  .banner .box .item:nth-child(3) { left: 195px; }
  .banner .box .item:nth-child(4) { left: 390px; }
  .banner .box .item:nth-child(5) { left: 585px; }
  .banner .box .item:nth-child(6) { left: 780px; }
  .banner .box .item:nth-child(7) { left: 975px; }
  .banner .box .item:nth-child(8) { left: 1170px; }
  .banner .box .item:nth-child(9) { left: 1365px; }
  .banner .box .item:nth-child(10) { left: 1560px; } }
@media screen and (max-width: 799px) and (min-width: 660px) { .banner .box .item { width: 240px; padding-right: 10px; }
  .banner .box .item:nth-child(1) { left: -240px; }
  .banner .box .item:nth-child(2) { left: 0px; }
  .banner .box .item:nth-child(3) { left: 240px; }
  .banner .box .item:nth-child(4) { left: 480px; }
  .banner .box .item:nth-child(5) { left: 720px; }
  .banner .box .item:nth-child(6) { left: 960px; }
  .banner .box .item:nth-child(7) { left: 1200px; }
  .banner .box .item:nth-child(8) { left: 1440px; }
  .banner .box .item:nth-child(9) { left: 1680px; }
  .banner .box .item:nth-child(10) { left: 1920px; } }
@media screen and (max-width: 659px) and (min-width: 375px) { .banner .box .item { width: 320px; padding-right: 10px; }
  .banner .box .item:nth-child(1) { left: -320px; }
  .banner .box .item:nth-child(2) { left: 0px; }
  .banner .box .item:nth-child(3) { left: 320px; }
  .banner .box .item:nth-child(4) { left: 640px; }
  .banner .box .item:nth-child(5) { left: 960px; }
  .banner .box .item:nth-child(6) { left: 1280px; }
  .banner .box .item:nth-child(7) { left: 1600px; }
  .banner .box .item:nth-child(8) { left: 1920px; }
  .banner .box .item:nth-child(9) { left: 2240px; }
  .banner .box .item:nth-child(10) { left: 2560px; } }
@media screen and (max-width: 324px) and (min-width: 0) { .banner .box .item { width: 310px; padding-right: 10px; }
  .banner .box .item:nth-child(1) { left: -310px; }
  .banner .box .item:nth-child(2) { left: 0px; }
  .banner .box .item:nth-child(3) { left: 310px; }
  .banner .box .item:nth-child(4) { left: 620px; }
  .banner .box .item:nth-child(5) { left: 930px; }
  .banner .box .item:nth-child(6) { left: 1240px; }
  .banner .box .item:nth-child(7) { left: 1550px; }
  .banner .box .item:nth-child(8) { left: 1860px; }
  .banner .box .item:nth-child(9) { left: 2170px; }
  .banner .box .item:nth-child(10) { left: 2480px; } }
.banner .arrow_boxs { display: inline-block; width: 80px; height: 270px; padding: 0 20px; position: relative; }
.banner .arrow_boxs .av { display: inline-block; width: 35px; height: 35px; position: absolute; top: 115px; left: 20px; border: 2px solid #16948c; cursor: pointer; font-size: 1.6em; padding-top: 4px; background-color: white; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; }
.banner .arrow_boxs .av:hover, .banner .arrow_boxs .av:active { border: 1px solid rgba(255, 0, 0, 0); color: white; background-color: #16948c; }

.banner.full  canvas{
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}

.single-banner { display: inline-block; width: 100%; margin-bottom: 140px; overflow: hidden; }
.single-banner.full { width: 100%; margin-bottom: 0; position: relative; }
@media screen and (max-width: 659px) and (min-width: 0) { .single-banner.full { padding: 0; margin-top: 0; } }
.single-banner.full .box { width: 100%; height: 100%; position: absolute;}
.single-banner.full .box .item {width: 100%; height: 100%; position: absolute;}
.single-banner.full .box .item .pic_full { display: inline-block; width: 100%; }
.single-banner.full .box .item .pic_full img { width: 100%; }

.single-banner.full canvas{
    display: block;
    width: 100%;
    height: auto;
    position: relative;
}