﻿.content1{margin:214px 0 190px;position:sticky;top:0;z-index:3}
.content-box {width:100%;height:1px;position:absolute;top:0px}
.opacities .classify,.opacities .title,.opacities .info {opacity:0;margin:0!important;line-height:0!important;}
.content1 .row{display:flex;justify-content:space-between;align-items:center;height:94px}
.content1 .classify{line-height:1;transition: all .5s;}
.content1 .classify:after{content:'';width:12px;margin-left:12px;height:1px;background-color:#ccc;display:inline-block;vertical-align:middle}
.content1 .remove-line::after {height: 0;}
.content1 .title{font-size:64px;line-height:1;margin:26px 0 66px;transition: all .5s;}
.content1 .info{display:flex;transition:all .5s}
.content1 .item{position:relative;margin-left:128px;overflow:hidden;line-height:1}
.content1 .item:first-child{margin-left:0}
.content1 .item span,.content1 .item a{display:block}
.content1 .item a{position:relative;z-index:2;overflow:hidden;padding-right:64px}
.content1 .item div:nth-child(2),.content1 .item span:nth-child(2){color:#999;margin:16px 0}
.content1 .item:after{content:'';height:1px;width:12px;background-color:#ccc;position:absolute;bottom:0;left:0}
.content1 .item:hover .icon:after{background-position-x:right;width:100%;right:auto;left:0}
.content1 .icon{position:absolute;top:22px;right:0;width:44px;height:19px}
.content1 .icon:after{content:'';width:0%;height:100%;display:block;position:absolute;top:0;background:url('../images/icon02.png') no-repeat left top;background-size:auto 100%;right:0;transition:0.3s;-webkit-transition:0.3s}
.content1 .return .more{color:#999;border-color:#999}
.content1 .layout{visibility:visible;transition:1.8s;-webkit-transition:1.8s}
.content1 .layout.hide{visibility:hidden;opacity:0}
.content1 .more-wrap{margin-right:-64px;position: relative;z-index: 2;right: 5%;bottom: 1%;}
.content1 .more-wrap .more-btn {background-color: #fff;}
.content2{padding-left:5%;background-color:#f0f0f0}
.content2 .banner-wrap{padding-top:33.84%;position:relative}
.content2 .banner{width:100%;height:100%;position:absolute;top:-76px;left:0;background:no-repeat center;background-size:cover;overflow:hidden}
.content2 .banner.init span{width:100%}
.content2 .banner div{position:absolute;width:100%;height:100%;left:0;top:0}
.content2 .banner span{display:block;width:0;height:100%;position:absolute;top:0;right:0;transition:1s;-webkit-transition:1s}
.content3{padding-bottom:156px;background-color:#f0f0f0;overflow:hidden}
.content3 .layout{box-sizing:border-box;padding-left:3.9vw}
.content3 .layout.init,.content3 .layout.init2{visibility:hidden}
.content3 .layout.init .text-style1 div,.content3 .layout.init2 .text-style1 div{transform:translateY(101%)}
.content3 .layout.init .text,.content3 .layout.init2 .text{opacity:0;transform:translateX(50px);-webkit-transform:translateX(50px)}
.content3 .layout.init .left,.content3 .layout.init2 .left{opacity:0;transform:translateY(10%);-webkit-transform:translateY(10%)}
.content3 .layout.init .right,.content3 .layout.init2 .right{opacity:0;transform:translateX(10%);-webkit-transform:translateX(10%)}
.content3 .title1{font-size:22px;margin-bottom:14px}
.content3 .title2{margin-bottom:34px;font-size:58px;letter-spacing:-0.5px;line-height:42px;font-family:'ProximaSansBlack'}
.content3 .title2 div{transition-delay:0.2s;-webkit-transition-delay:0.2s}
.content3 .text{line-height:26px;color:#999;transition:all 1.4s 0.4s;-webkit-transition:all 1.4s 0.4s}
.content3 .content{display:flex;margin-top:10px}
.content3 .left{width:18.4vw;height:7.34vw;position:relative;display:flex;align-items:center;justify-content:space-between;align-content:center;margin-right:6.25vw;transition:all 1.4s 0.6s;-webkit-transition:all 1.4s 0.6s}
.content3 .subTitle{line-height:1;position:relative;z-index:2}
.content3 .subTitle div{font-size:18px;margin-bottom:12px}
.content3 .subTitle p{color:#999;text-transform:uppercase}
.content3 .line{position:relative;z-index:2;width:60px;height:1px;background-color:#333}
.content3 .right{padding-top:2.6vw;width:40.73vw;line-height:1.86;text-align:justify;color:#888;transition:all 1.4s 1s;-webkit-transition:all 1.4s 1s}
.content4{overflow:hidden}
.content4 img{max-width:100%;display:block;margin:0 auto;image-rendering:auto}
.content4 .classify-describe{width:90%;box-sizing:border-box;padding-left:3.9vw;margin:120px auto}
.content4 .classify-describe div:nth-child(1){font-size:24px;margin-bottom:14px;line-height:1}
.content4 .classify-describe p:nth-child(2){line-height:1;color:#999;text-transform:uppercase}
.content4 .classify-describe div:nth-child(3){font-size:20px;line-height:1;margin:32px 0}
.content4 .classify-describe p:nth-child(4){width:786px;color:#666;line-height:1.85;text-align:justify}
.content4 .text{color:#666;line-height:1.85;text-align:justify}
.content4 .text video{width:100vw;height:100vh;object-fit:contain;vertical-align:bottom;background:#000}
/*.content4 .text p{width:786px;padding:0 5% 0 calc(5% + 3.9vw)}*/
.content5{margin:94px 0 80px;overflow:hidden}
.content5 .layout{box-sizing:border-box;margin-bottom:72px;padding-left:3.9vw}
.content5 .layout.init .text-style1 div{transform:translateY(101%)}
.content5 .layout.init .return{opacity:0}
.content5 .title1{font-size:22px}
.content5 .mobil-text{display:none}
.content5 .title2{margin:14px 0 26px;font-size:60px;line-height:44px;font-family:'ProximaSansBlack';color:#eb1111;letter-spacing:-1px}
.content5 .title2 div{transition-delay:0.2s;-webkit-transition-delay:0.2s}
.content5 .title3{color:#999}
.content5 .title3 div{transition-delay:0.4s;-webkit-transition-delay:0.4s}
.content5 .return{cursor:pointer;line-height:1;margin-top:54px;display:inline-block;transition:1.6s 0.6s;-webkit-transition:1.6s 0.6s}
.content5 .return:after{content:'';width:12px;height:1px;background-color:#ccc;display:block}
.content5 .return div{margin:14px 0 18px;color:#999;position:relative;overflow:hidden;padding-left:50px}
.content5 .return div:before{content:'';width:40px;height:100%;background:url('../images/icon02.png') no-repeat left center;position:absolute;left:-4px;top:0;transform:rotateY(180deg);-webkit-transform:rotateY(180deg)}
.content5 .item-wrap{display:flex;flex-wrap:wrap;padding-left:5%}
.content5 .item{width:50%;padding-top:25.593%;position:relative;transition:transform 0.8s;-webkit-transition:-webkit-transform 0.8s}
.content5 .item .mobil-text{display:none}
.content5 .item span{display:block}
.content5 .item a{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:no-repeat center;background-size:cover}
.content5 .item:hover .cover{opacity:1;transition:opacity 0;-webkit-transition:opacity 0}
.content5 .item:hover .mask{opacity:1;transition:opacity 0.5s;-webkit-transition:opacity 0.5s}
.content5 .item:hover .line{opacity:1;width:100%;transition:width 0.5s 0.3s;-webkit-transition:width 0.5s 0.3s}
.content5 .item:hover .text-style1 div{transform:translateY(0%);-webkit-transform:translateY(0%);transition:transform 0.5s 0.5s;-webkit-transition:-webkit-transform 0.5s 0.5s}
.content5 .item.init{transform:translateX(101%);-webkit-transform:translateX(101%)}
.content5 .item:nth-child(2n-1).init{transform:translateX(202%);-webkit-transform:translateX(202%)}
.content5 .cover{color:#fff;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;display:flex;align-items:center;align-content:center;justify-content:space-around;pointer-events:none;opacity:0;transition:opacity 0.3s;-webkit-transition:opacity 0.3s}
.content5 .mask{opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;transition:opacity 0s 0.3s;-webkit-transition:opacity 0s 0.3s;background:rgba(0,0,0,0.6)}
.content5 .text-wrap{width:83%;position:relative;z-index:2}
.content5 .item .text-style1 div{transition:transform 0s 0.3s;-webkit-transition:-webkit-transform 0s 0.3s}
.content5 .text1{font-size:18px}
.content5 .text1 div{transform:translateY(101%);-webkit-transform:translateY(101%)}
.content5 .text2{opacity:0.6}
.content5 .text2 div{transform:translateY(-104%);-webkit-transform:translateY(-104%)}
.content5 .line{margin:14px 0;width:0%;height:1px;background-color:rgba(255,255,255,0.4);transition:width 0s 0.3s;-webkit-transition:width 0s 0.3s}
@media screen and (max-width:1480px){.content1{margin:186px 0 148px}
  .content1 .classify:after{width:10px;margin-left:10px}
  .content1 .more-wrap{margin-right:-50px}
  .content1 .row{height:74px}
  .content1 .title{font-size:54px;line-height:1;margin:18px 0 48px}
  .content1 .item div:nth-child(2),.content1 .item span:nth-child(2){margin:12px 0 14px}
  .content1 .item:after{width:10px}
  .content2 .banner{top:-80px}
  .content3{padding-bottom:104px}
  .content3 .title1{font-size:19px}
  .content3 .title2{font-size:46px;line-height:34px;margin-bottom:24px}
  .content3 .text{line-height:22px}
  .content3 .left{box-sizing:border-box;min-width:260px;min-height:108px}
  .content3 .line{width:48px}
  .content3 .right{width:52vw}
  .content3 .subTitle div{font-size:16px;margin-bottom:8px}
  .content4 .classify-describe{margin:86px auto}
  .content4 .classify-describe div:nth-child(1){font-size:20px;margin-bottom:10px}
  .content4 .classify-describe div:nth-child(3){margin:24px 0;font-size:18px}
  .content5{margin:60px 0 50px}
  .content5 .title1{font-size:19px}
  .content5 .title2{margin:10px 0 20px;font-size:48px;line-height:36px}
  .content5 .return{margin-top:40px}
  .content5 .return div{margin:10px 0 14px;padding-left:40px}
  .content5 .return div:before{background-size:auto 15px;width:28px;left:0}
  .content5 .layout{margin-bottom:50px}
  .content5 .text1{font-size:16px}
  .content5 .line{margin:12px 0}
}
@media screen and (min-width:320px) and (max-width:768px){.content1{overflow:hidden;margin:4rem 0 3rem;font-size:0.7rem}
  .content1 .more-wrap{margin-right:0;position:absolute;top:-6rem;right:-1rem;display:none}
 /* .opacities .classify, .opacities .title{margin:0.8rem 0 2.4rem!important;line-height:1!important}*/
  .content1 .row{height:auto;padding-bottom:1.4rem}
  .content1 .row,.content1 .info{flex-wrap:wrap}
  .content1 .info{width:100%}
  .content1 .item{margin-left:0;width:50%;box-sizing:border-box;padding-right:1rem;margin-bottom:1rem}
  .content1 .item div:nth-child(2),.content1 .item span:nth-child(2){margin:0.5rem 0 0.6rem}
  .content1 .item:after{width:0.6rem}
  .content1 .classify:after{width:0.6rem;margin-left:0.6rem}
  .content1 .title{font-size:2rem;margin:0.8rem 0 2.4rem}
  .content1 .icon{display:none}
  .content1 .return{position:absolute;top:-3rem;right:5%}
  .content2{padding-left:0}
  .content2 .banner{top:-3rem}
  .content3{font-size:0.7rem;padding-bottom:2.8rem}
  .content3 .layout{padding-left:0}
  .content3 .title1{font-size:0.9rem;margin-bottom:0.6rem}
  .content3 .title2{font-size:2.1rem;line-height:1.6rem;letter-spacing:0;margin-bottom:1rem}
  .content3 .text{line-height:1rem}
  .content3 .content{display:block;margin-top:2.4rem}
  .content3 .left{width:100%;display:block;padding:0;margin-right:0;min-height:0;height:auto}
  .content3 .left:hover .line,.content3 .left.on .line{transform:translateY(0)}
  .content3 .line{margin:1rem 0 1.2rem}
  .content3 .right{width:100%;padding:0}
  .content4{font-size:0.65rem}
  .content4 .classify-describe{margin:2.8rem auto 2.4rem;padding-left:0}
  .content4 .classify-describe div:nth-child(1){font-size:1.1rem;margin-bottom:0.6rem}
  .content4 .classify-describe div:nth-child(3){font-size:0.95rem;margin:1.2rem 0}
  .content4 .classify-describe p:nth-child(4){width:100%}
  .content4 .text p{width:100%;box-sizing:border-box;padding:0 5%}
  .content5{font-size:0.7rem;margin:2.4rem 0 0}
  .content5 .title1{font-size:0.9rem}
  .content5 .title2{margin:0.4rem 0 0;font-size:2.2rem;line-height:1.7rem;letter-spacing:0}
  .content5 .title3{display:none}
  .content5 .return{display:none}
  .content5 .item-wrap{padding-left:0}
  .content5 .item{width:100%;padding-top:51.186%;margin-bottom:5rem}
  .content5 .item:nth-child(2n-1).init{transform:translateX(101%);-webkit-transform:translateX(101%)}
  .content5 .item .mobil-text{display:block}
  .content5 .cover{display:none}
  .content5 .mobil-text{width:100%;position:absolute;left:0;bottom:-3.75rem;text-align:center;line-height:1}
  .content5 .mobil-text span:first-child{font-size:0.8rem;padding-top:1rem}
  .content5 .mobil-text span:last-child{padding:0.5rem 0 0.75rem;font-size:0.65rem;color:#999}
  .content5 .text1{font-size:0.8rem}
  .content5 .line{margin:0.6rem 0}
  .content5 .layout{padding-left:0;margin-bottom:1.8rem}
}