
.load_body{height: 100vh; overflow: hidden;}
.load{ position: fixed; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; z-index: 100; pointer-events: none;}
.load .icon{ width: 100%; height: 100%; position: absolute; left:0; top: 0; display: flex; z-index: 10; justify-content: center; align-items: center; transition: 0.6s;}
.load .logo{ text-align: center; position: absolute;}
.load .logo img{ margin: 0 auto; width: 10.4167vw;}
.load .icon.on{ opacity: 0;}
.load .bg.on{ opacity: 0;}

.loading-bar{ position: absolute; top: 99.0%; width: 100%; height: 8px; background: #16A4C5; transform: scaleX(0); transform-origin: top left; transition: transform 0.5s; z-index: 100; will-change: transform;}
.loading-bar.ended{ transform-origin: top right; transition: transform 1s ease-in-out;}
.loading-bg{ position: absolute; width: 100%; height: 100vh; left: 0; top: 0; background: #000000; z-index: 99;}
.loading-bar.on{transform-origin: top right; transition: transform 1s ease-in-out; transform: scaleX(1); }



.header.white{position: fixed; background: none; box-shadow: none; border-color: transparent; transition: 0.8s; transform: translateY(-100%);}
.header.white .logo .img1{opacity: 0;}
.header.white .logo .img2{opacity: 1;}
.header.white .nav dt a{color: #fff;}
.header.white .search a{color: #fff;}
.header.white .nav dt a::after{background: #fff;}
.header.white .nav dt a:hover,
.header.white .nav dt a.one{color: #fff;}

.header.top,
.header.show{transform: translateY(0);}


.home_part1{transition: 0.5s; }

.home_part1 .swiper-slide .title.d1 p,
.home_part1 .swiper-slide .title.d2>div{ transform: translateX(30px); transition: all 1s; opacity: 0;}
.home_part1 .swiper-slide .title.d1 p:nth-child(1),
.home_part1 .swiper-slide .title.d2>div:nth-child(1){ transition-delay: 0.6s;}
.home_part1 .swiper-slide .title.d1 p:nth-child(2),
.home_part1 .swiper-slide .title.d2>div:nth-child(2){ transition-delay: 0.9s;}
.home_part1 .swiper-slide .title.d1 p:nth-child(3),
.home_part1 .swiper-slide .title.d2>div:nth-child(3){ transition-delay: 1.2s;}
.home_part1 .swiper-slide-active .title.d1 p,
.home_part1 .swiper-slide-active .title.d2>div{ transform: translateX(0); opacity: 1; }

.home_part1.one{opacity: 0; pointer-events: none;}

.circleProgress_wrapper{width: 2.29vw;height: 2.29vw;position: absolute; top: 0px; left:0px; display: none;}
.circle{width: 50%;height: 100%;position: absolute;top:0;overflow: hidden;}
.circle.circle_right{right:0;}
.circle.circle_left{left:0;}
.circleProgress{width: 2.29vw;height: 2.29vw;border:1px solid rgba(0,0,0,0);border-radius: 50%;position: absolute;top:0;}
.rightcircle{border-top:1px solid #fff;border-right:1px solid #fff;right:0;animation: circleProgressLoad_right 6s linear;transform: rotate(45deg); opacity: 0.7;}
.leftcircle{border-bottom:1px solid #fff;border-left:1px solid #fff;left:0;animation: circleProgressLoad_left 6s linear;transform: rotate(45deg); opacity: 0.7;}
@keyframes circleProgressLoad_right{
	0%{transform: rotate(-135deg);}
	50%{transform: rotate(45deg);}
	100%{transform: rotate(45deg);}
}
@keyframes circleProgressLoad_left{
	0%{transform: rotate(-135deg);}
	50%{transform: rotate(-135deg);}
	100%{transform: rotate(45deg);}
}


.home_part2{pointer-events: none;}
.home_part2>div{opacity: 0; transform: translateY(-30px); transition: 0.6s 0.0s;}
.home_part2 .tat{transition-delay: 0.2s;}
.home_part2.one>div{opacity: 1; transform: translateY(0px);}
.home_part2.one{pointer-events: initial;}

.home_part2.one1,
.home_part3-wrapper.one{pointer-events: none;}



.home_title>div{ opacity: 0; transform: translateY(30px); transition: 1s;}
.home_title>div:nth-child(2){ transition-delay: 0.2s;}


.home_part4 .swiper_box{ opacity: 0; transform: translateY(30px); transition: 1s;}
.home_part4.on .home_title>div{opacity: 1; transform: translateY(0);}
.home_part4.on .swiper_box{opacity: 1; transform: translateY(0); transition-delay: 0.4s;}


.home_part5.on .home_title>div{opacity: 1; transform: translateY(0);}
.home_part5 .swiper_box{ opacity: 0; transform: translateY(30px); transition: 1s;}
.home_part5.on .swiper_box{opacity: 1; transform: translateY(0); transition-delay: 0.4s;}


.home_part6 .c_h46{ opacity: 0; transform: translateY(30px); transition: 1s;}
.home_part6.on .c_h46{ opacity: 1; transform: translateY(0);}

.home_part6.on .home_title>div{opacity: 1; transform: translateY(0);}
.home_part6 .list{ opacity: 0; transform: translateY(30px); transition: 1s;}
.home_part6.on .list{opacity: 1; transform: translateY(0); transition-delay: 0.4s;}

.home_part7.on .home_title>div{opacity: 1; transform: translateY(0);}


.home_part4,
.home_part5,
.home_part6,
.home_part7,
.home_part8,
.footer{position: relative; z-index: 2;}

.load2{display: none;}


@media screen and (max-width: 1200px){
    .load .logo img{ width: 150px;}

    .circleProgress_wrapper{display: none !important;}

    .load_body{height: auto; overflow: initial; background: none !important;} 


    .header.white{transform: translateY(0);}
    .home_part2.on>div{opacity: 1; transform: translateY(0);}
    .home_part2{pointer-events: initial;}


    .home_part3 .title{ opacity: 0; transform: translateY(30px); transition: 1s;}
    .home_part3 .box{ opacity: 0; transform: translateY(30px); transition: 1s;}



    .home_part3.on .title{opacity: 1; transform: translateY(0);}
    .home_part3.on .box{opacity: 1; transform: translateY(0); transition-delay: 0.2s;}


    .load2{ position: fixed; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; z-index: 99999; background: #000; display: block; }
    .load2 .bar{position: absolute; left: 0; bottom: 0; background: #16A4C5; width: 0; height: 8px;  transition: 0.5s;}
    .load2 .logo{ height: 100%; display: flex; align-items: center; justify-content: center;}


}   
