body{margin: 0;padding: 0;}
.sections{ width: 100%; position: relative;background: #000;}
.sections img{ display: block!important; max-width: 100%!important;}
.section{ width: 100%; position: relative;}
.a_anim{ opacity: 0;}
.animated{ animation-fill-mode: forwards; }
.opt0{ opacity: 0;}
@keyframes fadeInLeft1{
    0%{ opacity: 0; transform: translate(-100px,0);}
    100%{ opacity: 1; transform: translate(0,0);}
}

@keyframes fadeInUp1{
    0%{ opacity: 0; transform: translate(0,60px);}
    100%{ opacity: 1; transform: translate(0,0);}
}
.fadeInLeft1{ animation: fadeInLeft1  0.8s ease 0.6s forwards; will-change:transform, opacity;}
.fadeInLeft2{ animation: fadeInLeft1  0.8s ease 0.3s forwards; will-change:transform, opacity;}
.fadeInLeft3{ animation: fadeInLeft1  0.8s ease 0s  forwards; will-change: transform,opacity;}

.fadeInUp1{ animation: fadeInUp1  0.8s ease 0.4s  forwards; will-change: transform,opacity;}
.fadeInUp2{ animation: fadeInUp1  0.8s ease 0.6s  forwards; will-change: transform,opacity;}

.fadeInUp3{ animation: fadeInUp1  0.8s ease 1s  forwards; will-change: transform,opacity;}
.fadeInUp4{ animation: fadeInUp1  0.8s ease 1.4s  forwards; will-change: transform,opacity;}

.section66_icon_01{ animation: fadeInUp1  0.6s ease 0.4s  forwards; will-change: transform,opacity;}
.section66_icon_02{ animation: fadeInUp1  0.6s ease 0.5s  forwards; will-change: transform,opacity;}
.section66_icon_03{ animation: fadeInUp1  0.6s ease 0.6s  forwards; will-change: transform,opacity;}
.section66_icon_04{ animation: fadeInUp1  0.6s ease 0.7s  forwards; will-change: transform,opacity;}
.section66_icon_05{ animation: fadeInUp1  0.6s ease 0.8s  forwards; will-change: transform,opacity;}
.section66_icon_06{ animation: fadeInUp1  0.6s ease 0.9s  forwards; will-change: transform,opacity;}


@keyframes intoRight{
    0%{ transform: translate(0,0);}
    100%{transform: translate(50%,0);}
}
.intoRight{ animation: intoRight 1s ease forwards;}
@keyframes fadeIn1{
    0%{ opacity: 0;}
    100%{opacity: 1;}
}
.fadeIn1{ animation: fadeIn1 1.4s ease forwards;}
.fixaction3{ height: 300vh;}
@keyframes breath{
    0%{ transform: scale(1); opacity: 0.8;}
    50%{ transform: scale(1.1); opacity:1;}
    100%{ transform: scale(1); opacity:0.8;}
}
.breath{ animation: breath 1.5s linear 0s infinite ;}

@keyframes scaless{
    0%{ transform: scale(1);}
    50%{ transform: scale(1.1);}
}


@keyframes scales{
    0%{ transform: scale(1.1);}
    50%{ transform: scale(1);}
}


@keyframes fromLeft{

    0%{ transform: translate(-50%,0);opacity: 0;}
    100%{transform: translate(0,0);opacity: 1;}
}
.fromLeft{ animation: fromLeft 0.8s ease  forwards;}
.fromLeft1{ animation: fromLeft 0.8s ease 0.3s forwards;}
.fromLeft2{ animation: fromLeft 0.8s ease 0.6s forwards;}

@keyframes fromRight{
    0%{ transform: translate(50%,0);opacity: 0;}
    100%{transform: translate(0,0);opacity: 1;}
}

.fromRight{ animation: fromRight 0.8s ease forwards;}
.fromRight1{ animation: fromRight 0.8s ease 0.3s forwards;}
.fromRight2{ animation: fromRight 0.8s ease 0.3s forwards;}

.p2{ width: 100%; height: 100vh; position: relative; z-index: 4;}
.iitem{ width: 50vw; position: absolute; left:37vw; top: -25vw; }
.fixaction{ width: 100%; position: relative;}
.fixaction1{ padding-bottom: 400vw;}
.fixitem{ width: 100%; height: 100vh; position: absolute; left: 0; top: 0; overflow: hidden;}
.fix_start{ position: fixed;}
.fix_end{ position: absolute; left: 0; top: auto; bottom: 0;}

/*fonts*/
.fsize24{ font-size:1.2vw;line-height: 1.6;}
.fsize28{ font-size:1.5vw;line-height: 1.6;}
.fsize22{ font-size:1.1vw;line-height: 1.6;}
.fsize20{ font-size:1vw;line-height: 1.6;}

.colorfff{ color: #fff; }
.color000{ color: #000; }

.left_btn{left: 20vw;}
.right_btn{left: 20vw;}
.section3 .swiper-button-next, .section3 .swiper-button-prev{
    background: none;
}
.txtC{text-align: center;}
.txtL{text-align: left;}
.txtR{text-align: right;}
.txtJ{text-align: justify;}
.font_bold{font-weight: bold;}

.section1_pic{width:6.6vw;position: absolute;top: 5.2vw;left:16.2vw;z-index: 2;}
.section1_pic1{width:57.8vw;position: absolute;top: 69.6vw;left:16.2vw;z-index: 2;}
.section1_des{position: absolute;top: 15.6vw;left:16.2vw;z-index: 2}
.section1_btn{width:17.6vw;position: absolute;top: 18.7vw;left:16.2vw;cursor:pointer; z-index:2;}

.section1_text1{position: absolute;top: 28.6vw;left:16.2vw;z-index: 2}
.section1_text2{position: absolute;top: 32vw;left:16.2vw;z-index: 2;line-height: 2;}
.section1_text2 li {list-style: inside;line-height: 2;font-size: 1.1vw!important;color: #fff!important;}
.section1_text3{position: absolute;top: 49.5vw;left:16.2vw;z-index: 2;line-height: 2;}
.section1_text3 a{color: #577d99;}
.section1_pic1_1{position: absolute;top: 0.9vw;left:7vw;z-index: 2;}

@media screen and ( max-width : 800px){
    .fsize24{ font-size:3.2vw;line-height: 1.6;}
    .fsize28{ font-size:3.7vw;line-height: 1.6;}
    .fsize22{ font-size:1.1vw;line-height: 1.6;}
    .fsize20{ font-size:1vw;line-height: 1.6;}

    .colorfff{color:#fff;}

    .section1_pic{width:18vw;position: absolute;top: 14vw;left:10vw;z-index: 2;}
    .section1_pic1{width:82.8vw;position: absolute;top:214.8vw;left:10vw;z-index: 2;}
    .section1_des{position: absolute;top: 37.3vw;left:10vw;z-index: 2}
    .section1_btn{width:44.7vw;position: absolute;top: 59.7vw;left:10vw;cursor:pointer; z-index:2;}

    .section1_text1{position: absolute;top: 84.9vw;left:10vw;z-index: 2}
    .section1_text2{position: absolute;top: 94vw;left:10vw;z-index: 2;line-height: 2;}
    .section1_text2 li {list-style: inside;line-height: 1.8;font-size: 3.2vw!important;color: #fff!important;}
    .section1_text3{position: absolute;top: 140vw;left:10vw;z-index: 2;line-height: 1.8;}
    .section1_text3 a{color: #577d99;}
    .section1_pic1_1{position: absolute;top: 8.9vw;left:7vw;z-index: 2;}
}
@media screen and ( max-width : 320px){
    .msections{ display: block;}
    .sections{ display: none;}
}
