/* section01 */
#section01, #section07{ overflow: hidden; position: relative; width: 100%; height: 100vh; background-color: #444; }
#section01 > .img, #section07 > .img{ opacity: .8; }
#section07{ width: 100%; height: 0; padding-top: 56.25%; position: relative;}
#section01 .videoWrap, #section07 .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,
#section07 .videoWrap iframe, #section07 .videoWrap object, #section07 .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:0; padding-top: 56.25%; margin-top: 50px; }
  #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; background-size: 611px 427px; background-position: left bottom; background-repeat: no-repeat; overflow: hidden; }
#section02 .wrap1620{ align-items: flex-start;}
#section02 .wrap1620 .left{ width: 702px; padding-right: 20px;}
#section02 .wrap1620 .right{ width: calc(100% - 702px); padding-left: 20px;}
#section02 .wrap1620 .video-wrap{ width: 100%; height: 0; padding-top: 56.25%; position: relative;}
#section02 .wrap1620 .video-wrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
/* left */
#section02 .wrap1620 .left .video-wrap{ margin-bottom: 75px;}
#section02 .wrap1620 .left .text-wrap h3{ font-size: 60px; line-height: 40px; padding-bottom: 35px;} 
#section02 .wrap1620 .left .text-wrap h3 span{ font-size: 24px;}
#section02 .wrap1620 .left .text-wrap .line{ width: 1620px; height: 1px; background-color: rgba(34,34,34,.2); position: relative; margin-bottom: 50px;}
#section02 .wrap1620 .left .text-wrap .line:after{ content: ''; position: absolute; width: 68px; height: 1px; background-color: #222; left: 0; top: 0;}
#section02 .wrap1620 .left .text-wrap p{ font-size: 14px; line-height: 36px; padding-bottom: 50px;}
#section02 .wrap1620 .left .text-wrap .a-wrap{ font-size: 0;}
#section02 .wrap1620 .left .text-wrap a{ border: 1px solid #ccc; color: #444; transition: .3s; margin-right: 10px;}
#section02 .wrap1620 .left .text-wrap a:hover{ border: 1px solid #133e6e; color: #fff;}
/* right */
#section02 .wrap1620 .right .top{ padding-bottom: 40px; font-size: 0;}
#section02 .wrap1620 .right .bg-img{ width: 500px; height: 636px; margin-right: 40px;}
#section02 .wrap1620 .right .top .wrap{ width: calc(100% - 540px);}
#section02 .wrap1620 .right .top .wrap a{ background-color: #133e6e; color: #fff; margin-bottom: 20px;}
#section02 .wrap1620 .right .top .wrap a p{ position: relative; z-index: 10;}
#section02 .wrap1620 .right .top .wrap .bg-img{ width: 100%; height: 358px;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
  #section02 .wrap1620 .left{ width: 42.29vw; padding-right: 1.20vw;}
  #section02 .wrap1620 .right{ width: calc(100% - 42.29vw); padding-left: 1.20vw;}
  #section02 .wrap1620 .video-wrap{ width: 100%; height: 0; padding-top: 56.25%; position: relative;}
  #section02 .wrap1620 .video-wrap iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  /* right */
  #section02 .wrap1620 .right .bg-img{ width: 30.12vw; height: 38.31vw; margin-right: 2.41vw;}
  #section02 .wrap1620 .right .top .wrap{ width: calc(100% - 32.53vw);}
  #section02 .wrap1620 .right .top .wrap .bg-img{ width: 100%; height: 21.57vw;}
}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section02{ padding: 60px 0; background-size: 320px 213px;}
  #section02 .wrap1620{ flex-wrap: nowrap; flex-direction: column;}
  #section02 .wrap1620 .left{ width: 100%; padding-right: 0; padding-bottom: 60px;}
  #section02 .wrap1620 .right{ width: 100%; padding-left: 0;}
  /* left */
  #section02 .wrap1620 .left .video-wrap{ margin-bottom: 40px;}
  #section02 .wrap1620 .left .text-wrap h3{ font-size: 50px; line-height: 30px; padding-bottom: 25px;} 
  #section02 .wrap1620 .left .text-wrap h3 span{ font-size: 22px;}
  #section02 .wrap1620 .left .text-wrap .line{ width: 100%; margin-bottom: 23px;}
  #section02 .wrap1620 .left .text-wrap .line:after{ width: 34px; }
  #section02 .wrap1620 .left .text-wrap p{ font-size: 13px; line-height: 24px; padding-bottom: 30px;}
  #section02 .wrap1620 .left .text-wrap a{ width: calc(50% - 5px); height: 45px; line-height: 43px; font-size: 12px; border: 1px solid #133e6e; background-color: #133e6e; color: #fff; transition: .3s; margin-right: 0;}
  #section02 .wrap1620 .left .text-wrap .a-wrap a:nth-child(1){ margin-right: 10px;}
  #section02 .wrap1620 .left .text-wrap a:hover{ border: 1px solid #133e6e; color: #fff;}
  /* right */
  #section02 .wrap1620 .right .top{ padding-bottom: 10px;}
  #section02 .wrap1620 .right .bg-img{ width: 100%; height: 113.33vw; margin-right: 0; margin-bottom: 10px;}
  #section02 .wrap1620 .right .top .wrap{ width: 100%;}
  #section02 .wrap1620 .right .top .wrap a{ width: 100%; margin-bottom: 10px;}
  #section02 .wrap1620 .right .top .wrap .bg-img{ height: 53.33vw;}
}



/* section03 */
#section03{ width: 100%; height: 100vh; position: relative;}
#section03 h3{ position: absolute; display: inline-block; top: calc(50% - 40px); left: 0; right: 0; text-align: center; margin: 0 auto; font-size: 48px; z-index: 10;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section03{ height: 56.27vw;}
}



/* section04 */
#section04 a{ text-align: center; padding: 20px;}
#section04 a:nth-child(2){ background-color: #133e6e;}
#section04 a > p{ width: 100%; text-align: right; font-size: 14px; color: #445a49; opacity: .6; padding-bottom: 60px;}
#section04 a:nth-child(2) > p{ color: #fff; opacity: .6;}
#section04 a .img-wrap{ width: 450px; height: 450px; background-color: #133e6e; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,.2); position: relative; left: 0; right: 0; margin: 0 auto 40px;}
#section04 a:nth-child(2) .img-wrap{ background-color: #fff;}
#section04 a .img-wrap .img{ transition: .3s;}
#section04 a .img-wrap i{ font-size: 28px; color: #fff; z-index: 10; opacity: 0; transition: .3s; position: absolute; top: calc(50% - 10px); left: 0; right: 0; margin: 0 auto; transition: .3s;}
#section04 a:nth-child(2) .img-wrap i{ color: #133e6e;}
#section04 a:hover .img-wrap .img{ opacity: .3;}
#section04 a:hover .img-wrap i{ opacity: 1;}
#section04 a h4{ font-size: 16px; padding-bottom: 10px;}
#section04 a h3{ font-size: 34px; padding-bottom: 30px;}
#section04 a h5{ font-size: 14px; padding-bottom: 40px;}
#section04 a:nth-child(2) h4, #section04 a:nth-child(2) h3, #section04 a:nth-child(2) h5{ color: #fff;}
#section04 a div#btn_01{ margin-bottom: 70px;}
#section04 a div#btn_01 p{ position: relative; z-index: 10;}
#section04 a:nth-child(2n - 1) div#btn_01{ border: 1px solid #ccc; color: #222; transition: .3s;}
#section04 a:nth-child(2n - 1):hover .btn-hover:after{ width: 100%;}
#section04 a:nth-child(2n - 1):hover div#btn_01{ border: 1px solid #133e6e; color: #fff;}
#section04 a:nth-child(2) div#btn_01{ border: 1px solid #fff; color: #fff; transition: .3s;}
#section04 a:nth-child(2):hover .btn-hover-3:after{ width: 100%;}
#section04 a:nth-child(2):hover div#btn_01{ color: #133e6e;}
/* =================== 1660px =================== */
@media (max-width: 1660px) {
  #section04 a .img-wrap{ width: 27.11vw; height: 27.11vw; background-color: #133e6e; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 1.20vw rgba(0,0,0,.2); position: relative; left: 0; right: 0; margin: 0 auto 2.41vw;}
}

/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section04 a{ padding: 60px 0;}
  #section04 a .img-wrap{ width: 66.67vw; height: 66.67vw; min-width: 250px; min-height: 250px; margin: 0 auto 30px;}
  #section04 a .img-wrap i{ font-size: 28px; color: #fff; z-index: 10; opacity: 0; transition: .3s; position: absolute; top: calc(50% - 10px); left: 0; right: 0; margin: 0 auto; transition: .3s;}
  #section04 a:hover .img-wrap .img{ opacity: .3;}
  #section04 a h4{ font-size: 12px; padding-bottom: 8px;}
  #section04 a h3{ font-size: 26px; padding-bottom: 25px;}
  #section04 a h5{ font-size: 12px; padding-bottom: 20px;}
  #section04 a div#btn_01{ width: 167px; margin-bottom:0;}
  #section04 a div#btn_01 p{ position: relative; z-index: 10;}
  #section04 a:nth-child(2n - 1) .btn-hover:after{ width: 100%;}
  #section04 a:nth-child(2n - 1) div#btn_01{ border: 1px solid #133e6e; color: #fff;}
  #section04 a:nth-child(2) .btn-hover-3:after{ width: 100%;}
  #section04 a:nth-child(2) div#btn_01{ color: #133e6e;}
}



#section05{ width: 100%; height: 100vh; position: relative; }
#section05 .wrap1620{ position: relative;}
#section05 .text-wrap { position: absolute; width: 540px; top: calc(50% - 200px); right: 0; z-index: 10; text-align: left;}
#section05 .text-wrap p{ display: inline-block; font-size: 12px; letter-spacing: 0.04em; line-height: 24px; padding-bottom: 20px; position: relative;}
#section05 .text-wrap h3{ font-size: 60px; line-height: 64px; padding-bottom: 40px;}
#section05 .text-wrap p.deco{ font-size: 12px; line-height: 30px; letter-spacing: 0.04em; padding-bottom: 50px; opacity: .7;}
#section05 .text-wrap a{ border: 1px solid #fff; color: #fff; transition: .3s; margin-right: 10px; box-shadow: 2px 0px 4px rgba(0,0,0,.2);; }
#section05 .text-wrap a:hover{ border: 1px solid #133e6e;}
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section05{ height: auto;  }
  #section05 .img{ position: relative; width: 100%; padding-top: 56.25%;}
  #section05 .wrap1620{ position: relative; bottom: 15px; }
  #section05 .text-wrap{ position: relative; width: 100%; top: 0; border-bottom: 1px solid #ddd;}
  #section05 .text-wrap h3{ font-size: 35px; line-height: 37px; padding-bottom: 15px; color: #222; padding-left: 70px;}
  #section05 .text-wrap p.deco{ font-size: 11px; line-height: 19px; letter-spacing: 0.04em; padding-bottom: 50px; opacity: .5; padding-left: 70px;}
}


#section06{ padding: 100px 0; position: relative; overflow: hidden;}
#section06 .tit h3{ font-size: 50px; line-height: 60px; padding-bottom: 30px; }
#section06 .tit p{ font-size: 16px; padding-bottom: 50px;}
#section06 .tit .a-wrap{ padding-bottom: 40px;}
#section06 .tit .a-wrap a{ transition: .3s; padding-right: 40px;}
#section06 .tit .a-wrap a i{ padding-left: 10px;}
#section06 .tit .a-wrap a:hover{ color: #133e6e;}
#section06 .special-swiper-wrap{ width: 100%; text-align: left;}
#section06 .special-swiper{ width: calc(100% + 150px);  padding-bottom: 70px;}
#section06 .special-swiper p{ font-size: 14px; opacity: .7; letter-spacing: 0.04em; padding-bottom: 15px;}
#section06 .special-swiper h3{ font-size: 16px; letter-spacing: 0.04em;}
#section06 .bg-img{ width: 100%; height: 500px; margin-bottom: 30px; overflow: hidden; position: relative;}
#section06 .bg-img .img{ transition: .3s;}
#section06 .swiper-slide:hover .bg-img .img{transform: scale(1.1);}
#section06 .special-wrap{ display: flex; justify-content: flex-start; align-items: center;}
#section06 .prevnext-wrap{  position: relative; width: 75px; height: 30px; display: flex; justify-content: space-between; align-items: center; top: -3px;}
#section06 .swiper-pagination-progressbar{ width: 880px; margin-right: 30px;}
#section06 .swiper-button-prev, #section06 .swiper-button-next { font-size: 30px; color: #222; position: relative; width: 30px; height: 30px;  line-height: 30px; transition: .3s;}
#section06 .swiper-button-next{ right: unset;}
#section06 .swiper-button-prev{ left: unset;}
#section06 .swiper-button-next:hover, #section06 .swiper-container-rtl .swiper-button-prev:hover,
#section06 .swiper-button-prev:hover, #section06 .swiper-container-rtl .swiper-button-next:hover{ color: #133e6e; }
#section06 .swiper-button-next.swiper-button-disabled, #section06 .swiper-button-prev.swiper-button-disabled{ opacity: 1; color: #aaa; }
/* =================== 1024px =================== */
@media (max-width: 1024px) {
  #section06{ padding: 45px 0 60px;}
  #section06 .tit h3{ font-size: 35px; line-height: 37px; padding-bottom: 10px; }
  #section06 .tit p{ font-size: 12px; padding-bottom: 40px;}
  #section06 .tit .a-wrap{ padding-bottom: 30px;}
  #section06 .tit .a-wrap a{ padding-right: 30px; font-size: 14px;}
  #section06 .special-swiper{ width: 100%; padding-bottom: 27px; padding-right: 18.67vw; }
  #section06 .special-swiper p{ font-size: 12px; padding-bottom: 10px;}
  #section06 .special-swiper h3{ font-size: 14px; }
  #section06 .bg-img{ width: 100%; height: 86.67vw; margin-bottom: 25px; }
  #section06 .special-wrap{ display: flex; justify-content: flex-start; align-items: center;}
  #section06 .prevnext-wrap{  position: relative; width: 75px; height: 30px; display: flex; justify-content: space-between; align-items: center; top: -3px;}
  #section06 .swiper-pagination-progressbar{ width: calc(100% - 95px); margin-right: 30px;}
  #section06 .swiper-button-prev, #section06 .swiper-button-next { font-size: 30px; color: #222; position: relative; width: 30px; height: 30px;  line-height: 30px; transition: .3s;}
  #section06 .swiper-button-next{ right: unset;}
  #section06 .swiper-button-prev{ left: unset;}
  #section06 .swiper-button-next:hover, #section06 .swiper-container-rtl .swiper-button-prev:hover,
  #section06 .swiper-button-prev:hover, #section06 .swiper-container-rtl .swiper-button-next:hover{ color: #133e6e; }
  #section06 .swiper-button-next.swiper-button-disabled, #section06 .swiper-button-prev.swiper-button-disabled{ opacity: 1; color: #aaa; }
}