/* section01 */
#section01{ overflow: hidden; position: relative; width: 100%; height: 100vh; background-color: #444; }
#section01 > .img{ opacity: .8; }
#section01 .videoWrap{position:absolute; width: 100%; height:100%; top: 0; left: 0; margin:0; pointer-events: none;}
#section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    object-fit: cover;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    display: block;
 }
#section01 .fullSlogan { position: absolute; top: calc(50% - 130px); left: 0; right: 0; margin: 0 auto; z-index: 10; text-align: left;}
#section01 .fullSlogan p{ display: inline-block; font-size: 18px; line-height: 24px; padding-bottom: 25px; position: relative;}
#section01 .fullSlogan h3{ font-size: 60px; line-height: 64px; padding-bottom: 50px;}
#section01 .fullSlogan .a-wrap{ font-size: 0;}
#section01 .fullSlogan a{ border: 1px solid #fff; color: #fff; transition: .3s; margin-right: 10px;}
#section01 .fullSlogan a:hover{ border: 1px solid #133e6e;}
#section01 .control{ z-index: 1; font-size: 0; position: absolute; bottom: 100px; left: 0; right: 0; margin: 0 auto; width: 170px; text-align: center; z-index: 100;}
#section01 .control li{ display: inline-block; padding: 0 5px;}
#section01 .control li a{ display: block; font-size: 21px; color: #fff; width: 44px; height: 44px; line-height: 46px; border-radius: 50%; background-color: rgba(255,255,255,.8); text-align: center;}
#section01 .control li i{ color: #757575; position: relative; }
#section01 .scroll-down{ position: absolute; width: 34px; height: 23px; z-index: 10; bottom: 30px; left: 0; right: 0; margin: 0 auto;}
#section01 .play-pause a.hide{ display: none;}
#section01 .control .mute-onoff a.hide{ display: none;}
.vidbox .ratio iframe, .end-video .videoWrap iframe, #cutvideo1, #cutvideo2{pointer-events: none;}
.m-play{ display: none;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section01 { width: 100%; height:102.56vw; padding-top: 0; margin-top: 0; }
  #section01 .videoWrap{position:absolute; width: 100%; height:100%; top: 0; left: 0;  }
  #section01 .videoWrap, #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ pointer-events: unset;}
  #section01 .videoWrap iframe, #section01 .videoWrap object, #section01 .videoWrap embed{ opacity: 1; }
  #section01 .fullSlogan { top: calc(50% - 100px); }
  #section01 .control{ bottom: 25px; }
  #section01 .control li a{ display: block; font-size: 12px; width: 28px; height: 28px; line-height: 29px; }
}


/* section02 */
#section02{ padding: 100px 0; }
#section02 > .decobox{ width: 100%; height: 526px; background-color: rgba(83,39,0,.05); position: absolute; top: 0; left: 0; display: block;}
#section02 .movie-wrap{ width: 100%; height: 640px;}
#section02 .movie-wrap .movie-swiper{ width: 100%; height: 100%; position: relative; overflow: hidden;}
#section02 .movie-wrap .movie-swiper .swiper-slide{ width: 100%; height: 100%; position: relative;}
#section02 .movie-wrap .movie-swiper iframe{ width: 110%; height: 110%; left: -5%; top: -5%; position: absolute;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section02{ padding: 60px 0; }
  #section02 > .decobox{ height: 60.51vw; }
  #section02 .tit{ padding-bottom: 15px;}
  #section02 .tit h4{ padding-bottom: 10px;}
  #section02 .movie-wrap{ height: 56.41vw;}
}



/* section03 */
#section03{padding: 100px 0; background-color: rgba(83,39,0,.05);}
#section03 .service-con a{ display: block;}
#section03 .service-con a .img-wrap{display: block; width: 355px; height: 320px;  transition: .3s; position: relative; background-color: #000; margin-bottom: 25px;}
#section03 .service-con a .img-wrap .line{ position: absolute; width: calc(100% - 40px); height: calc(100% - 40px); top: 20px; left: 20px; border:1px solid rgba(161, 119, 81, 0); z-index: 10;}
#section03 .service-con a .img-wrap .line::before, #section03 .service-con a .img-wrap .line::after {box-sizing: inherit; content: ''; position: absolute; border: 1px solid transparent; width: 0; height: 0;}
#section03 .service-con a .img-wrap .line::before {top: 0; left: 0;}
#section03 .service-con a .img-wrap .line::after {bottom: 0; right: 0;}
#section03 .service-con a:hover .img-wrap .line::before, #section03 .service-con a:hover .img-wrap .line::after {width: 100%;height: 100%;}
#section03 .service-con a:hover .img-wrap .line::before {border-top-color: rgba(161, 119, 81, 1); border-right-color: rgba(161, 119, 81, 1); transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
#section03 .service-con a:hover .img-wrap .line::after {border-bottom-color: rgba(161, 119, 81, 1); border-left-color: rgba(161, 119, 81, 1); transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;}
#section03 .service-con a:hover .img-wrap .img{ opacity: .3;}
#section03 .service-tit{ width: 100%; position: relative;}
#section03 .service-tit h3{ padding-bottom: 10px;}
#section03 .service-tit i{ position: absolute; right: 0; top: 0; transition: .3s;}
#section03 .service-con a:hover .service-tit i{ transform: rotate(90deg); color: rgba(83,39,0,1);}

#section03 .wrap1480 > .service-swiper{ display: none;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section03{ padding: 60px 0;}
  #section03 .wrap1480 > .flex-wrap{ display: none;}
  #section03 .wrap1480 > .service-swiper{ display: block; position: relative;}
  #section03 .wrap1480 > .service-swiper .swiper-wrapper{ margin-bottom: 20px;}
  #section03 .service-con a .img-wrap{display: block; width: 100%; height: 60.51vw; margin-bottom: 0;}
  #section03 .service-con a .img-wrap .line{  width: calc(100% - 30px); height: calc(100% - 30px); top: 15px; left: 15px; }
  #section03 .service-con a:hover .img-wrap .img{ opacity: .3;}
  #section03 .service-tit{ width: 100%; height: 100%; align-items: center; flex-wrap: wrap; flex-direction: column; align-content: center; justify-content: center; z-index: 10; opacity: 0; transition: .3s;}
  #section03 .service-tit h3{ padding-bottom: 5px;}
  #section03 .swiper-slide.swiper-slide-active .service-tit{ opacity: 1;}
  #section03 .service-con .swiper-slide.swiper-slide-active .img-wrap .line::before, #section03 .service-con .swiper-slide.swiper-slide-active .img-wrap .line::after {width: 100%;height: 100%;}
  #section03 .service-con .swiper-slide.swiper-slide-active .img-wrap .line::before {border-top-color: rgba(161, 119, 81, 1); border-right-color: rgba(161, 119, 81, 1); transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
  #section03 .service-con .swiper-slide.swiper-slide-active .img-wrap .line::after {border-bottom-color: rgba(161, 119, 81, 1); border-left-color: rgba(161, 119, 81, 1); transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;}
  #section03 .service-con .swiper-slide.swiper-slide-active .img-wrap .img{ opacity: .3;}
  #section03 .service-pag{ position: relative; bottom: 0; width: 100%;}
}



/* section04 */
#section04{ padding-bottom: 100px; position: relative;}
#section04 > .decobox{ width: 100%; height: 200px; background-color: rgba(83,39,0,.05); position: absolute; top: 0; left: 0; display: block;}
#section04 > .flex-wrap{align-items: flex-start;} 
#section04 .left{ padding-right: 10px}
#section04 .right{ padding-left: 10px}
#section04 .left .img{ position: relative; width: 100%; height: 840px;}
#section04 .right .top .img{ position: relative; width: 100%; height: 400px;}
#section04 .right .top .img h3{ position: absolute; bottom: 0; left: 60px; line-height: 43px;}
#section04 .right .btm{ position: relative; padding-top: 100px; width: 100%; padding-left: 60px;}
#section04 .right .btm h3{ position: absolute; top: 0; left: 60px; line-height: 43px;}
#section04 .right .btm p{ word-break: keep-all; line-height: 26px; padding-bottom: 60px;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section04{ padding-bottom: 60px;}
  #section04 > .decobox{ height: 60px; }
  #section04 .left{ padding-right: 0; padding-bottom: 10px;}
  #section04 .right{ padding-left: 0}
  #section04 .left .img{ height: 102.56vw;}
  #section04 .right .top .img{ height: 56.41vw;}
  #section04 .right .top .img h3{ left: 0; line-height: 36px;}
  #section04 .right .btm{ position: relative; padding-top: 60px; width: 100%; padding-left: 0;}
  #section04 .right .btm h3{ left: 0; line-height: 36px;}
  #section04 .right .btm p{ line-height: 24px; padding-bottom: 30px;}
}



#section05{ width: 100%; height: 900px; position: relative; }
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section05{ height: 56.41vw;  }
  
}


#section06{ padding: 100px 0; position: relative; overflow: hidden;}
#section06 > .decobox{ width: 100%; height: 300px; background-color: rgba(83,39,0,.05); position: absolute; top: 0; left: 0; display: block;}
#section06 .flex-wrap{ align-items: flex-start;}
#section06 #main-tit{ padding-bottom: 140px;}
#section06 .left{ padding-left: 11.46vw; width: calc(100% - 69.01vw);}
#section06 .left p{ line-height: 26px; padding-bottom: 100px;}
#section06 .left #more-btn{ display: block; padding-bottom: 100px;}
#section06 .left .control-wrap{ position: relative; width: 120px; height: 60px; }
#section06 .right{ width: 69.01vw; overflow: hidden;}
/* =================== 1500px =================== */
@media (max-width: 1500px) {
  #section06 .left{ padding-left: 20px; }
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section06{ padding: 60px 0; }
  #section06 > .decobox{ height: 212px;}
  #section06 #main-tit{ padding-bottom: 15px;}
  #section06 .left{ padding-left: 20px; width: 100%; position: relative;}
  #section06 .left #more-btn{ display: block; padding-bottom: 0; position: absolute; top: 35px; right: 20px;}
  #section06 .left .control-wrap{ display: none; }
  #section06 .right{ width: 100%; overflow: hidden;}
}



#section07{ padding: 100px 0;}
#section07 .img{ position: relative; width: 100%; margin-bottom: 20px;}
#section07 .left{ width: 605px;}
#section07 .left > div:first-child{ height: 800px;}
#section07 .left > div:last-child{ height: 605px;}
#section07 .right{ width: 855px;}
#section07 .right > div:first-child{ height: 540px;}
#section07 .right > div:last-child{ height: 865px;}
/* =================== 1500px =================== */
@media (max-width: 1500px) {
  #section07 .left{ width: calc(100% - 57vw);}
  #section07 .left > div:first-child{ height: 53.33vw;}
  #section07 .left > div:last-child{ height: 40.33vw;}
  #section07 .right{ width: 57.00vw; padding-left: 20px;}
  #section07 .right > div:first-child{ height: 36.00vw;}
  #section07 .right > div:last-child{ height: 57.67vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section07{ padding: 0 0 60px;}
  #section07 .left{ width: 50%; padding-right: 10px;}
  #section07 .left > div:first-child{ height: 57.69vw;}
  #section07 .left > div:last-child{ height: 43.85vw;}
  #section07 .right{ width: 50%; padding-left: 10px;}
  #section07 .right > div:first-child{ height: 27.69vw;}
  #section07 .right > div:last-child{ height: 73.85vw;}
}



#section08{ position: relative; padding: 100px 0; text-align: center; overflow: hidden;}
#section08 > .decobox{ width: 100%; height: 542px; background-color: rgba(83,39,0,.05); position: absolute; top: 0; left: 0; display: block;}
#section08 #main-tit{ padding-bottom: 40px;}
#section08 .control-wrap{ width: 730px; height: 60px; position: absolute; top: 140px; left: 0; right: 0; margin: 0 auto;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section08{ position: relative; padding: 60px 0; text-align: center;}
  #section08 > .decobox{ width: 100%; height: 202px; }
  #section08 #main-tit{ padding-bottom: 15px;}
  #section08 .control-wrap{ width: 100%; padding: 0 20px; height: 24px; top: 80px; }
}


#section09{ padding: 100px 0; position: relative; text-align: center;}
#section09 #main-tit{ padding-bottom: 40px;}
#section09 #more-btn{ padding-bottom: 40px;}
#section09 .flex-wrap{ position: relative; }
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section09{ padding: 60px 0; position: relative; text-align: center;}
  #section09 #main-tit{ padding-bottom: 15px;}
  #section09 #more-btn{ padding-bottom: 0;}
}


#section10{ width: 100%; height: 56.25vw; position: relative;}
#section10 .videoWrap{position:absolute; width: 100%; height:100%; top: 0; left: 0; margin:0; pointer-events: none;}
#section10 .videoWrap iframe, #section10 .videoWrap object, #section10 .videoWrap embed{ 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  object-fit: cover;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  display: block;
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section10{ width: 100%; height: 102.56vw;}
}