/*
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.jost-<uniquifier> {
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}*/
/*  font-family: "Jost", sans-serif;*/
#main .dot_bg{position: fixed;top: -17%;left: -10%;mix-blend-mode: lighten;}
#main .dot_bg video{width: 2400px;}
#main .video{opacity: 0;transition: 0.5s; mix-blend-mode: difference;}
#main .video.on{opacity: 1;transition: 0.5s}
.probar{position: fixed;bottom: 20px;width: 100%;z-index: 9999}
.probar .bar_w{display: flex;justify-content: center;align-items: center;height: 20px;}
.probar .bar_w i{display: block;width: 1px; background: #FFFFFF;height: 10px;margin-right: 5px;}
.probar .bar_w i.on{height: 20px;width: 2px;}
.probar .bar_w i.on2{height: 16px;;}
.probar .bar_w i.on3{height: 16px;;}
.probar .bar_w i:last-child{margin-right: 0}
.main-bg{position: fixed;top: 0;left: 0}
.main_visual{height: 100vh;position: relative;z-index: 2}
.main_visual .bg_dot{position: absolute;left: 50%;perspective: 700px;margin-left: -960px;top: 50%;margin-top: -540px;mix-blend-mode: lighten;}
.main_visual .bg_dot div{animation: per 3s infinite linear; }
.main_con .bg_dot img{animation: per 3s infinite linear}
/*
@keyframes per{
	0%{transform: rotateY(0)}
	25%{transform: rotateY(5deg)}
	50%{transform: rotateY(0deg)}
	75%{transform: rotateY(-5deg)}
	100%{transform: rotateY(0deg)}
}
*/
#smoother-wrapper{mix-blend-mode: lighten;backdrop-filter: opacity(1); /* fixes the chrome-bug */}
.main_visual .bg_dot div video{width: 1920px;mix-blend-mode: lighten;}
.main_visual .vis_txt{position: absolute;top: 50%;transform: translateY(-50%);width: 100%}
.main_visual .vis_txt strong{display: flex;align-items: center;justify-content: center;line-height: 1;letter-spacing:20px}
.main_visual .vis_txt strong i{font-family: "Jost", sans-serif;font-size: 220px;color: #FFFFFF;    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
.main_visual .vis_txt strong i.t09{margin-right: 90px}
.main_con{display: flex;align-items: center;height: 100vh;padding: 0 110px;position: relative}
.main_con.c01{display: block}
.main_con.c01{height: 100vh;display: flex;align-items: center;}
.main_con .txt_w strong{display: block;font-size: 140px;color: #FFFFFF;font-family: "Jost", sans-serif;font-weight: 400;line-height: 1;display: flex}
.main_con.c01 .bg_dot{position: absolute;top: 50%;top: 0;left:0;width: 100%}
.main_con.c01 .bg_dot video{width: 100%}
/*.main_con.c01 .bg_dot{position: absolute;top: 50%;margin-top: -340px;left: 50%;margin-left: 60px;}*/
.main_con.c02 .bg_dot{position: absolute;top: 0;width: 100%;left: 0}
.main_con.c02 .bg_dot video{width: 100%}
.main_con.c03 .bg_dot{position: absolute;width: 100%;top: 0;left: 0}
.main_con.c03 .bg_dot video{max-width: 100%}
/*.main_con.c03 .bg_dot{position: absolute;top: 80px;left: 50%;margin-left: -400px;}*/
.main_con.c02 .txt_w strong{justify-content: flex-end}
.main_con.c03 .txt_w strong{justify-content: center}
.main_con .txt_w strong i{color: inherit;font-family: inherit;text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
.main_con .txt_w strong i{color: inherit;font-family: inherit;text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
.main_con .txt_w strong i.mr{margin-right: 30px;}
.main_con.c02 .txt_w{text-align: right;width: 100%}
.main_con .txt_w p{font-size: 20px;color: #FFFFFF;line-height: 36px;margin-top: 30px;font-weight: 100}
.main_con .txt_w p span{font-weight: 500}
.main_con.c03 {align-items: flex-end;padding-bottom: 150px}
.main_con.c03 .txt_w{text-align: center;width: 100%}
.main_con.c01 .bg_dot{transform: scale(2.8);transition: 1.8s;opacity: 0;perspective: 500px}
.main_con.c01.on .bg_dot{transform: scale(1);opacity: 1}


.product_con {position: relative;padding-top: 150vh}
.product_con .product_w .pro_w{position: relative;width: 540px;margin: 0 auto}
.product_con .product_w .pro_w .pro_img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);border: 1px solid rgba(255,255,255,0.5);overflow: hidden;border-radius: 6px;box-shadow: 0 0 20px rgba(0,0,0,0.5)}
.product_con .product_w {height: 100vh;display: flex;align-items: center}
.product_con .product_w .pro_w .pro_img img{display: block}
.product_con .product_w .txt_w{position: absolute;left: 50%;margin-left: 380px;bottom: 0;background: rgba(255,255,255,0.1); backdrop-filter: saturate(180%) blur(20px);-webkit-backdrop-filter: saturate(180%) blur(20px);;width: 340px;height: 180px;border-radius: 10px;border: 1px solid rgba(255,255,255,0.1);bottom: 155px;padding-left: 50px;padding-top: 40px;}
.product_con .product_w .txt_w:before{content: '';display: block;width: 10px;height: 2px;background: #FFFFFF;position: absolute;top: -1px;left: 4px;}
.product_con .product_w .txt_w:after{content: '';display: block;width: 2px;height: 10px;background: #FFFFFF;position: absolute;left: -1px;top: 4px;}
.product_con .product_w .txt_w strong{display: block;font-size: 18px;color: #FFFFFF;margin-bottom: 25px}
.product_con .product_w .txt_w ul li{position: relative;color: rgba(255,255,255,0.7);font-size: 16px;margin-bottom: 10px;padding-left: 80px}
.product_con .product_w .txt_w ul li span{position: absolute;left: 0;color: #fff;left: 0}
.product_con .product_w .txt_w ul li:last-child{margin-bottom: 0}
.product_con .product_w {perspective: 800px}
.product_con .txt_pin{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5;pointer-events: none;}
.product_con .pin-spacer{pointer-events: none;}
.product_con .txt_pin .p_w{perspective: 800px}
.product_con .txt_pin .p_w2{position: absolute;top: 50%;padding-top: 110px;text-align: center;width: 100%;text-align: center}
.product_con .txt_pin .p_w2 p{font-size: 20px;font-weight: 300;color: #FFFFFF;line-height: 36px;}
.product_con .txt_pin .p_w2 p span{color: #fff;font-weight: 600}
.product_con .product_w .pro_w{transform: rotateY(20deg) rotateX(20deg);animation: tw 3s infinite }
.product_con .txt_pin{height: 100vh;;perspective: 500px}
.product_con .txt_pin .p_w{position: absolute;width: 100%;top: 50%;transform: translateY(-50%);height: 186px}
.product_con .txt_pin .p_w .txt{position: absolute;width: 100%;text-align: center;top: 0;transition: 1s;opacity: 0}
.product_con .txt_pin .p_w .txt strong{display: block;color: #FFFFFF;font-size: 140px;font-family: "Jost", sans-serif;font-weight: 400;text-shadow: 0 0 20px rgba(255,255,255,0.5)}
.product_con .txt_pin .p_w .txt.txt02{transform: rotateX(-50deg) translateY(120%);opacity: 0.3}
.product_con .txt_pin .p_w .txt.txt03{transform: rotateX(-70deg) translateY(570%);opacity: 0}
.product_con .txt_pin .p_w .txt strong{letter-spacing: 30px;opacity: 0;transition: 1.2s}
.product_con.on .txt_pin .p_w .txt strong{letter-spacing: 0px;opacity: 1;transition: 1.2s}

.product_con .txt_pin .p_w .txt.txt01{opacity: 1}
.product_con .txt_pin .p_w.on01 .txt.txt01{transform: rotateX(30deg) translateY(-120%);opacity: 0.1}
.product_con .txt_pin .p_w.on01 .txt.txt02{transform: rotateX(0deg) translateY(0%);opacity: 1}
.product_con .txt_pin .p_w.on01 .txt.txt03{transform: rotateX(-30deg) translateY(120%);opacity: 0.1}
.product_con .txt_pin .p_w.on01 .txt.txt04{transform: rotateX(-60deg) translateY(570%);opacity: 0}


.product_con .txt_pin .p_w.on02 .txt.txt01{transform: rotateX(60deg) translateY(-570%);opacity: 0}
.product_con .txt_pin .p_w.on02 .txt.txt02{transform: rotateX(30deg) translateY(-120%);opacity: 0.1}
.product_con .txt_pin .p_w.on02 .txt.txt03{transform: rotateX(0deg) translateY(0%);opacity: 1}
.product_con .txt_pin .p_w.on02 .txt.txt04{transform: rotateX(-30deg) translateY(120%);opacity: 0.1}
.product_con .txt_pin .p_w.on02 .txt.txt05{transform: rotateX(-60deg) translateY(570%);opacity: 0}

.product_con .txt_pin .p_w.on03 .txt.txt02{transform: rotateX(60deg) translateY(-570%);opacity: 0}
.product_con .txt_pin .p_w.on03 .txt.txt03{transform: rotateX(30deg) translateY(-120%);opacity: 0.1}
.product_con .txt_pin .p_w.on03 .txt.txt04{transform: rotateX(0deg) translateY(0%);opacity: 1}
.product_con .txt_pin .p_w.on03 .txt.txt05{transform: rotateX(-30deg) translateY(120%);opacity: 0.1}
/*.product_con .txt_pin .p_w.on03 .txt.txt01{transform: rotateX(-60deg) translateY(570%);opacity: 0}*/

.product_con .txt_pin .p_w.on04 .txt.txt03{transform: rotateX(60deg) translateY(-570%);opacity: 0}
.product_con .txt_pin .p_w.on04 .txt.txt04{transform: rotateX(30deg) translateY(-120%);opacity: 0.1}
.product_con .txt_pin .p_w.on04 .txt.txt05{transform: rotateX(0deg) translateY(0%);opacity: 1}
/*.product_con .txt_pin .p_w.on03 .txt.txt05{transform: rotateX(-30deg) translateY(120%);opacity: 0.1}*/
/*.product_con .txt_pin .p_w.on03 .txt.txt01{transform: rotateX(-60deg) translateY(570%);opacity: 0}*/

/*
@keyframes tw{
	0%{transform: rotateY(20deg) rotateX(20deg);}
	100%{transform: rotateY(-20deg) rotateX(-20deg);}
}*/

/*.product_con{display: none}*/
.main_con01{position: relative;padding-top: 100vh}
.main_con01 .cir_w{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}
.main_con01 .cir_w > div{height: 600px;width: 600px;position: relative}
.main_con01 .cir_w > div > div{position: absolute;height: 50%;width: 1px;position: absolute;top: 0;left: 50%;transform-origin: bottom left}
.main_con01 .cir_w > div > div i{position: absolute;width: 1px;height: 9px;background: #FFFFFF;top: 0;left: 0;opacity: 0.2}
.main_con01 .cir_w > div > div.on i{width: 2px;opacity: 1}
.main_con01 .re_title{position: absolute;top: 0;left: 0;height: 100vh;width: 100%;display: flex;align-items: center;justify-content: center}
.main_con01 .re_title strong{display: block;font-size: 140px;color: #FFFFFF ;font-weight: 400; font-family: "Jost", sans-serif;}
.main_con01 .re_title p{color: #FFFFFF;font-size: 20px;font-weight: 300;margin-top: 25px;text-align: center;font-weight: 100}
.main_con01 .re_title p span{font-weight: 500}
.main_con01 .peo_con{position: relative;z-index: 3;}
.main_con01 .peo_con01{display: flex;justify-content: flex-end;padding-right: 172px;}
.main_con01 .peo_con02{padding-left: 272px;;}
.main_con01 .peo_con03{padding-left:49%;;}
.main_con01 .peo_con04{display: flex;justify-content: flex-end;padding-right: 152px;}
.main_con01 .peo_con05{padding-left:177px;;}
.main_con01 .peo_con06{display: flex;justify-content: flex-end;padding-right: 170px;}
.main_con01 .peo_con07{padding-left:19%;;}
.main_con01 .peo_con08{display: flex;justify-content: flex-end;padding-right: 294px;}
.main_con01 .peo_con{display: flex;text-align: center}
.main_con01 .peo_con .peo_w{perspective: 900px}
.main_con01 .peo_con .peo{display: inline-block;position: relative;    backdrop-filter: saturate(180%) blur(10px);-webkit-backdrop-filter: saturate(180%) blur(10px);border-radius: 6px;}
.main_con01 .peo_con .peo > img{display: block;opacity: 0}
.main_con01 .peo_con .peo > div{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background: linear-gradient(45deg, rgba(255,255,255,0.5), rgba(255,255,255,0), rgba(255,255,255,0.5));border-radius: 6px;overflow: hidden;border: 1px solid rgba(255,255,255,0.2);    backdrop-filter: saturate(180%) blur(20px);-webkit-backdrop-filter: saturate(180%) blur(20px);width: 89.47368421052632%}
.main_con01 .peo_con .peo > div img{display: block;max-width: 100%}
.main_con01 .peo_con .peo:after{content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url(/img/main/people_bg.png);background-size: 100% 100%;}

.main_con01 .peo_con .txt{text-align: center;padding-top: 20px;}
.main_con01 .peo_con .txt strong{display: block;font-size: 24px;color: #FFFFFF;font-weight: 400;font-family: "Jost", sans-serif;margin-bottom: 7px}
.main_con01 .peo_con .txt p{display: block;font-size: 18px;color: #FFFFFF;}
.main_con01 .peo_con .txt p:after{content: '';display: block;width: 17px;height: 6px;background: url(/img/main/list_icon.png);margin: 0 auto;margin-top: 10px;}
.main_con01 .peo_con01 .peo_w .wrap{transform: rotateX(-10deg) rotateY(10deg)}
.main_con01 .peo_con02 .peo_w .wrap{transform: rotateX(10deg) rotateY(10deg)}
.main_con01 .peo_con03 .peo_w .wrap{transform: rotateX(-10deg) rotateY(-10deg)}
.main_con01 .peo_con04 .peo_w .wrap{transform: rotateX(20deg) rotateY(-10deg)}
.main_con01 .peo_con05 .peo_w .wrap{transform: rotateX(20deg) rotateY(-10deg)}
.main_con01 .peo_con06 .peo_w .wrap{transform: rotateX(20deg) rotateY(20deg)}
.main_con01 .peo_con07 .peo_w .wrap{transform: rotateX(-10deg) rotateY(-10deg)}
.main_con01 .peo_con08 .peo_w .wrap{transform: rotateX(-10deg) rotateY(-10deg)}
.main_con02{padding-bottom: 209px;padding-top: 210px;position: relative}
.main_con02:after{content: '';display: block;width: 100%;height: 100%;background: #061011;top: 0;left: 0;top: 0;left: 0;position: absolute}
.main_con02 .swiper {margin-top: -224px}
.main_con02 .title{padding: 0 64px;}
.main_con02 .title strong{font-size: 140px;color: #FFFFFF ;font-weight: 400; font-family: "Jost", sans-serif;    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
.main_con02 .title p{color: #FFFFFF;font-size: 20px;font-weight: 300;margin-top: 25px;font-weight: 300;line-height: 40px}
.main_con02 .swiper-slide{padding-top: 550px;transition: 0.5s;perspective: 500px}
.main_con02 .swiper-slide-prev{padding-top: 400px}
.main_con02 .swiper-slide-active{padding-top: 250px}
.main_con02 .swiper-slide-next{padding-top: 125px}
.main_con02 .swiper-slide-next+div{padding-top: 0}
.main_con02 .swiper-slide-next+div+div{padding-top: 0}
.main_con02 a{display: block;position: relative;perspective: 500px;transition: 0.7s}
.main_con02 a{content: '';display: block; ;background: rgba(255, 255, 255, 0.0);
    backdrop-filter: saturate(380%) blur(20px);
    -webkit-backdrop-filter: saturate(380%) blur(20px);;width: 500px}
.main_con02 .wrap{display: block;width: 500px;height: 300px;background: url(/img/main/lib.png);position: relative;z-index: 2;padding: 40px;transition: 0.7s;}
.main_con02 .wrap:hover{background: url(/img/main/lib02.png);}
.main_con02 a:hover{transform: rotateY(-12deg);box-shadow: 40px 0 60px rgba(171,246,255,0.5)}
.main_con02 .wrap .cate{position: absolute;top: -26px;left: 50px;}
.main_con02 .wrap .cate i{font-size: 20px;color: #FFFFFF;font-weight: 500;font-family: "Jost", sans-serif;}
.main_con02 .wrap .date{position: absolute;right: 40px;bottom: 25px}
.main_con02 .wrap .date span{font-size: 18px;color: #FFFFFF;transition: 0.7s}
.main_con02 .wrap .tit strong{display: block;font-size: 22px;font-weight: 500;color: #FFFFFF;line-height: 33px;transition: 0.7s;position: relative;z-index: 1} 
.main_con02 .wrap:hover .tit strong{color: #002D3B}
.main_con02 .wrap:hover .date span{color: #0E9BA1}
.main_con03{padding: 0 60px;padding-top: 140px;padding-bottom: 130px;position: relative;z-index: 3}
.main_con03 .list{margin-top: 100px;}
.main_con03 .list ul li{margin-bottom: 8px}
.main_con03 .list ul li:last-child{margin-bottom: 0}
.main_con03 .list ul li a{display: flex;height: 80px;border-radius: 10px;align-items: center;background: rgba(255,255,255,0.1); backdrop-filter: saturate(180%) blur(20px);-webkit-backdrop-filter: saturate(180%) blur(20px);padding-left: 20px;transition: 0.7s}
.main_con03 .list ul li:hover a{background: #AEFBFF;box-shadow: 0 0 60px rgba(171,246,255,0.68)}
.main_con03 .list ul li a p{color: #FFFFFF;font-size: 20px;font-weight: 500;color: #FFFFFF;}

.main_con03 .list ul li:hover a p, .main_con03 .list ul li:hover a i, .main_con03 .list ul li:hover a .cate span{color: #002D3B}
.main_con03 .list ul li a p, .main_con03 .list ul li a i, .main_con03 .list ul li a .cate span{transition: 0.7s}
.main_con03 .list ul li a i{position: absolute;right: 40px;top: 50%;transform: translateY(-50%);font-size: 18px;color: #FFFFFF;font-family: "Jost", sans-serif;}
.main_con03 .list ul li a .cate span{display: flex;width: 120px;height: 44px;align-items: center;justify-content: center;border-radius: 6px;color: #FFFFFF;font-size: 18px;}
.main_con04{height: 100vh;display: flex;align-items: center;position: relative}
.main_con04 > div{width: 100%}
.main_con04 .m_title strong{line-height: 1;font-size: 120px;}
.main_con04 .bg{position: absolute;left: 0%;}
.main_con04 .bg video{width: 100%}
.m_title{text-align: center}
.m_title strong{display: block;font-size: 140px;color: #FFFFFF;font-family: "Jost", sans-serif;margin-bottom: 25px;font-weight: 400;display: flex;justify-content: center;white-space: nowrap}
.m_title p{display: block;font-size: 20px;color: #FFFFFF;line-height: 30px;}
.m_title p span{font-weight: 500}
.more_btn{margin-top: 100px;}
.more_btn a{display: block;width: 240px;height: 60px;overflow: hidden;border-radius: 6px;border: 1px solid #fff;background: rgba(255,255,255,0.1); backdrop-filter: saturate(180%) blur(20px);-webkit-backdrop-filter: saturate(180%) blur(20px);margin: 0 auto;}
.more_btn a strong{display: block;line-height: 60px;color: #FFFFFF;font-size: 18px;font-weight: 500;color: #FFFFFF;text-align: center}
.more_btn a .txt{transition: 0.5s;}
.more_btn a:hover .txt{transform: translateY(-50%);}

.more_btn a .line{position: absolute;width: 18px;display: flex;flex-wrap: wrap}
.more_btn a .line i{display: block;background: #fff;height: 1px;margin-bottom: 4px;transition: 0.7s;;}
.more_btn a .line i:last-child{margin-bottom: 0}
.more_btn a .line i.i01{width: 18px}
.more_btn a .line i.i02{width: 13px;opacity: 0.5}
.more_btn a .line i.i03{width: 6px;opacity: 0.25}

.more_btn a:hover .line i.i01{width: 6px;opacity: 0.25}
.more_btn a:hover .line i.i02{width: 13px;opacity: 0.5}
.more_btn a:hover .line i.i03{width: 18px;opacity: 1}

.more_btn a .line01{left: 10px;top: 50%;transform: translateY(-50%)}
.more_btn a .line02{right: 10px;top: 50%;transform: translateY(-50%);justify-content: flex-end}

.re_people_con{position: relative;z-index: 2}

/*motion*/
.main_con .txt_w strong{opacity: 0;transition: 1.2s;letter-spacing: 20px;}
/*.m_title strong{opacity: 0;transition: 1.2s;letter-spacing: 20px;    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}*/
/*.on .m_title strong{opacity: 1;transform: translateX(0);letter-spacing: 0px}*/
.m_title p{opacity: 0;transition: 1.2s;letter-spacing: 5px;}
.on .m_title p{opacity: 1;transform: translateX(0);letter-spacing: 0px;transition-delay: 0.3s}
.product_con .txt_pin .p_w2 p{opacity: 0;transition: 1.2s;letter-spacing: 5px;}
.main_con.on .txt_w strong {opacity: 1;transform: translateX(0);letter-spacing: 0px}
.product_con.on .txt_pin .p_w2 p{opacity: 1;transform: translateX(0);letter-spacing: 0px}
.main_con .txt_w p{opacity: 0;transition: 1.2s;transform: translateX(70px)}
.main_con.c02 .txt_w p{transform: translateX(-70px)}
.main_con.c03 .txt_w p{transform: translateY(70px)}
.main_con.on .txt_w p{opacity: 1;transform: translate(0);transition-delay: 0.6s}
.product_con .txt_pin .p_w2{transition: 0.7s;opacity: 1}
.product_con .txt_pin .p_w2.on{transition: 0.7s;opacity: 0}

.main_con .txt_w strong i{opacity: 0;transition: 1.2s;letter-spacing: 20px}
.main_con.on .txt_w strong i{opacity: 1;letter-spacing: 0px}
.main_con.on .txt_w strong i.t02{transition-delay: 0.2s}
.main_con.on .txt_w strong i.t03{transition-delay: 0.4s}
.main_con.on .txt_w strong i.t04{transition-delay: 0.6s}
.main_con.on .txt_w strong i.t05{transition-delay: 0.8s}
.main_con.on .txt_w strong i.t06{transition-delay: 1.0s}
.main_con.on .txt_w strong i.t07{transition-delay: 1.2s}
.main_con.on .txt_w strong i.t08{transition-delay: 1.4s}
.main_con.on .txt_w strong i.t09{transition-delay: 1.6s}
.main_con.on .txt_w strong i.t10{transition-delay: 1.8s}
.main_con.on .txt_w strong i.t11{transition-delay: 2s}
.main_con.on .txt_w strong i.t12{transition-delay: 2.2s}
.probar .percent{margin-bottom: 5px;}
.probar .percent strong{font-size: 16px;text-align: center;color: #FFFFFF;font-weight: 400;display: block;    font-family: "Jost", sans-serif;}
/*.main_visual, .main_visual, .main_con, .product_con, .main_con01{display: none}*/


.main_visual .bg_dot{transform: scale(4);transition: 1.8s;opacity: 0;perspective: 500px}
.main_visual.on .bg_dot{transform: scale(1);opacity: 1}
.main_visual .vis_txt strong{letter-spacing: 50px}
.main_visual.on .vis_txt strong{letter-spacing: 20px;transition: 2s;transition-delay: 1s}

.main_visual .vis_txt strong i{opacity: 0;transition: 2s}
.main_visual.on .vis_txt strong i{opacity: 1}
.main_visual.on .vis_txt strong i.t01{transition-delay: 0.5s}
.main_visual.on .vis_txt strong i.t02{transition-delay: 0.1s}
.main_visual.on .vis_txt strong i.t03{transition-delay: 0.3s}
.main_visual.on .vis_txt strong i.t04{transition-delay: 0.7s}
.main_visual.on .vis_txt strong i.t05{transition-delay: 0.5s}
.main_visual.on .vis_txt strong i.t06{transition-delay: 0.1s}
.main_visual.on .vis_txt strong i.t08{transition-delay: 0.5s}
.main_visual.on .vis_txt strong i.t09{transition-delay: 0.1s}
.main_visual.on .vis_txt strong i.t10{transition-delay: 0.3s}
.main_visual.on .vis_txt strong i.t11{transition-delay: 0.7s}
.main_visual.on .vis_txt strong i.t12{transition-delay: 0.4s}
.main_visual.on .vis_txt strong i.t13{transition-delay: 0.2s}
.main_visual.on .vis_txt strong i.t14{transition-delay: 0.6s}
.main_visual.on .vis_txt strong i.t15{transition-delay: 0.7s}
@keyframes vis_dot{
    0%{transform: rotateY(0deg) rotateX(0deg)}
    50%{transform: rotateY(-2deg) rotateX(-2deg)}
    100%{transform: rotateY(0deg) rotateX(0deg)}
}


.product_con .product_w .txt_w{transform: translateX(70px);opacity: 0;transition: 1.2s}
.product_con .product_w.on .txt_w{transform: translateX(0);opacity:1}


.main_con01 .re_title strong{letter-spacing: 30px;opacity: 0;transition: 1.2s;    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
.main_con01 .re_title.on strong{letter-spacing: 0px;opacity: 1;transition: 1.2s}
.main_con02 .title strong{letter-spacing: 30px;opacity: 0;transition: 1.2s;    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
.main_con02.on .title strong{letter-spacing: 0px;opacity: 1;transition: 1.2s}
.main_con02 .title p{letter-spacing: 5px;opacity: 0;transition: 1.2s;    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);}
.main_con02.on .title p{letter-spacing: 0px;opacity: 1;transition: 1.2s}


.main_con01 .re_title p{letter-spacing: 10px;opacity: 0;transition: 1.2s}
.main_con01 .re_title.on p{letter-spacing: 0px;opacity: 1;transition: 1.2s}

.main_con01 .cir_w > div{transform: scale(0.6);opacity: 0;transition: 0.7s}
.main_con01 .on .cir_w > div{transform: scale(1);opacity: 1;}


/*
.main_con.c02 .bg_dot{transform: scale(2.8);transition: 1.8s;opacity: 0;perspective: 500px}
.main_con.c02.on .bg_dot{transform: scale(1);opacity: 1}
*/


/*
.main_con.c03 .bg_dot{transform: scale(2.8);transition: 1.8s;opacity: 0;perspective: 500px}
.main_con.c03.on .bg_dot{transform: scale(1);opacity: 1}
*/
.main_con04 .bg img{transform: scale(2.8);transition: 1.8s;opacity: 0;perspective: 500px;display: blo
}
.main_con04.on .bg img{transform: scale(1);opacity: 1}

.main_con02 .swiper{transform: translateY(70px);opacity: 0;transition: 1.2s}
.main_con02.on .swiper{transform: translateY(0px);opacity: 1;transition: 1.2s;transition-delay: 0.7s}
.main_con03 .list ul li{transform: translateY(70px);opacity: 0;transition: 1.2s}
.main_con03.on .list ul li{transform: translateY(0);opacity: 1;transition: 1.2s}
.main_con03.on .list ul li:nth-child(1){transition-delay: 0.6s}
.main_con03.on .list ul li:nth-child(2){transition-delay: 0.9s}
.main_con03.on .list ul li:nth-child(3){transition-delay: 1.2s}
.main_con03.on .list ul li:nth-child(4){transition-delay: 1.5s}
.main_con03.on .list ul li:nth-child(5){transition-delay: 1.8s}
@media (max-width: 1680px) {
    .main_visual .vis_txt strong i{font-size: 140px}
    .main_visual .bg_dot img{width: 500px;}
    .main_visual .bg_dot{margin-left: -250px;margin-top: -263.5px;}
    .main_con .txt_w strong{font-size: 100px;}
    .main_con.c01 .bg_dot img{width: 500px;}
    .main_con.c01 .bg_dot{margin-left: 0;left: auto;right: 20px;margin-top: -250px;}
    .main_con.c02 .bg_dot img{width: 600px;}
    .main_con.c02 .bg_dot{margin-top: -242px}
    .main_con.c03 .bg_dot img{width: 500px;}
    .main_con.c03 .bg_dot{top: 140px;margin-left: -250px;}
    .product_con .txt_pin .p_w{height: 144px;}
    .product_con .txt_pin .p_w .txt strong, .main_con01 .re_title strong, .main_con02 .title strong, .m_title strong{font-size: 100px;}
    .product_con .product_w .pro_w{width: 460px;}
    .product_con .product_w .pro_w .pro_bg img{max-width: 100%}
    .product_con .product_w .pro_w .pro_img{width: 92.59%}
    .product_con .product_w .pro_w .pro_img img{max-width: 100%}
    .product_con .product_w .txt_w{margin-left: 290px;width: 290px}
    .main_con01 .re_title p{font-size: 16px;margin-top: 0}
    .main_con01 .cir_w > div{width: 460px;height: 460px;}
    .main_con01 .peo_con .peo_w{transform: scale(0.7)}
    .main_con02 a{width: 400px;}
    .main_con02 .wrap{width: 100%}
    .main_con04 .m_title strong{font-size: 80px;}
    #footer{padding: 60px 20px;;}
}
@media (max-width: 1180px) {
    .main_visual .vis_txt strong i{font-size: 100px;}
    .main_visual .vis_txt strong{letter-spacing: 20px}
    .main_visual.on .vis_txt strong{letter-spacing: 10px}
    .main_con .txt_w strong{font-size: 70px;}
    .main_con .txt_w p{font-size: 16px;line-height: 1.7}
    .main_con{padding: 0 60px;}
    .product_con .txt_pin .p_w .txt strong, .main_con01 .re_title strong, .main_con02 .title strong, .m_title strong{font-size: 80px;}
    .product_con .txt_pin .p_w2{padding-top: 70px;}
    .product_con .txt_pin .p_w2 p{font-size: 16px;line-height: 1.7}
    .product_con .txt_pin .p_w{height: 116px;}
    .product_con .product_w .txt_w{margin-left: 80px;}
    .main_con02 a{width: 130%}
    .main_con02 .wrap .tit strong{font-size: 16px;line-height: 30px;}
    .main_con02 .wrap .date span{font-size: 14px;}
    .main_con02 .wrap{height: 250px;border-radius: 6px;}
    #footer .ft01 .left ul li{font-size: 14px;margin-bottom: 20px;}
    #footer .ft01 .right ul li a{width: 210px;height: 50px;}
    #footer .ft01 .right ul li a strong{font-size: 15px;}
    #footer .ft01 .left ul li{margin-right: 30px;}
    #footer .ft01 .left ul{width: 537px;}
    #footer .ft02 address{font-size: 14px;}
}
@media (max-width: 960px) {
    .main_visual .vis_txt strong i{font-size: 70px;}
    .main_visual .bg_dot img{width: 420px;}
    .main_visual .bg_dot{margin-left: -210px;margin-top: -225px;}
    .main_visual .vis_txt strong i.t09{margin-right: 25px;}
    .main_con .txt_w strong{font-size: 60px;}
    .main_con .txt_w p{font-size: 14px;margin-top: 10px;}
    .main_con.c01 .bg_dot img{width: 370px}
    .main_con.c01 .bg_dot{margin-top: -185px;}
    .main_con.c02 .bg_dot{margin-top: -160px;}
    .main_con.c02 .bg_dot img{width: 420px;}
    .main_con{padding: 0 20px;}
    .main_con.c03 .bg_dot img{width: 400px}
    .product_con .txt_pin .p_w .txt strong, .main_con01 .re_title strong, .main_con02 .title strong, .m_title strong{font-size: 60px}
    .main_con.c03 .bg_dot{margin-left: -200px;}
    .product_con .txt_pin .p_w{height: 87px}
    .product_con .txt_pin .p_w .txt strong{letter-spacing: 5px}
    .product_con .product_w .pro_w{width: 380px;}
    .product_con .product_w .txt_w strong{font-size: 14px;margin-bottom: 15px;}
    .product_con .product_w .txt_w ul li{font-size: 13px;padding-left: 70px;}
    .product_con .product_w .txt_w{padding: 20px;height: auto}
    .main_con01 .peo_con01{padding-right: 30px;}
    .main_con01 .peo_con02{padding-left: 30px;}
    .main_con01 .peo_con03{padding-left: 50px;}
    .main_con01 .peo_con04{padding-right: 20px;}
    .main_con01 .peo_con05{padding-left: 20px;}
    .main_con01 .peo_con06{padding-right: 20px;}
    .main_con01 .peo_con07{padding-left: 30px;}
    .main_con01 .peo_con08{padding-right: 30px;}
    .main_con01 .peo_con01 .peo > img{width: 309px}
    .main_con01 .peo_con02 .peo > img{width: 266px}
    .main_con01 .peo_con03 .peo > img{width: 210px}
    .main_con01 .peo_con04 .peo > img{width: 309px}
    .main_con01 .peo_con05 .peo > img{width: 271x}
    .main_con01 .peo_con06 .peo > img{width: 245px}
    .main_con01 .peo_con07 .peo > img{width: 176px}
    .main_con01 .peo_con08 .peo > img{width: 309px}
    .main_con04 .m_title strong{font-size: 60px;}
    #header{padding: 20px;}
    #header .logo svg{height: 24px;width: auto}
    #header .menu_btn button{height: 45px;width: 60px;}
    #header .menu_btn .bt_w{width: 23px;}
    #header .menu_btn i{width: 100%}
    #header .btn_w ul li svg{height: 45px;width: auto}
    #header .btn_w ul li a{padding: 0 5px;}
}
@media (max-width: 840px) {
    #footer .ft01{display: block}
    #footer .ft01 .left ul li{font-size: 12px;margin-bottom: 10px;}
    #footer .ft01 .right{margin-top: 15px;}
    #footer .ft01 .right ul{display: flex}
    #footer .ft01 .right ul li{width: 49%;margin-right: 2%}
    #footer .ft01 .right ul li:nth-child(2n){margin-right: 0}
    #footer .ft01 .right ul li a{width: 100%;height: 40px;}
}
@media (max-width: 660px) {
    .main_visual .vis_txt strong i{font-size: 50px;}
    .main_visual .bg_dot img{width: 290px}
    .main_visual .bg_dot{margin-left: -145px;margin-top: -150px}
    .main_visual.on .vis_txt strong {
        letter-spacing: 5px;
    }
    .probar .bar_w i{height: 10px;margin-right: 2px;}
    .probar .percent strong{font-size: 12px}
    .probar .percent{margin-bottom: 5px;}
    .main_con.c01, .main_con{align-items: flex-end;padding-bottom: 90px}
    .main_con .txt_w strong{font-size: 45px;}
    .main_con.c02 .bg_dot img{width: 320px}
    .main_con.c02 .bg_dot{left: 50%;margin-left: -160px;}
    .main_con.c01 .bg_dot{right: auto;left: 50%;margin-left: -145px;}
    .main_con.c01 .bg_dot img{width: 290px;}
    .product_con .txt_pin .p_w .txt strong, .main_con01 .re_title strong, .main_con02 .title strong, .m_title strong{font-size: 40px;}
    .product_con .product_w .pro_w{width: 300px;}
    .product_con .product_w .txt_w{margin-left: 20px;width: auto;bottom: 30%}
    .main_con01 .cir_w > div{width: 300px;height: 300px;}
    .main_con01 .re_title strong{text-align: center}
    .main_con01 .re_title p{font-size: 13px;letter-spacing: 5px;}
    .main_con01 .peo_con01 .peo > img{width: 316px}
    .main_con01 .peo_con02 .peo > img{width: 186px}
    .main_con01 .peo_con03 .peo > img{width: 147px}
    .main_con01 .peo_con04 .peo > img{width: 216px}
    .main_con01 .peo_con05 .peo > img{width: 189px}
    .main_con01 .peo_con06 .peo > img{width: 171px}
    .main_con01 .peo_con07 .peo > img{width: 123px}
    .main_con01 .peo_con08 .peo > img{width: 216px}
    .main_con01 .peo_con .txt strong{font-size: 18px}
    .main_con01 .peo_con .txt p{font-size: 16px;}
    .main_con01 .peo_con .peo_w{transform: scale(1)}
    .main_con01 .peo_con02{margin-bottom: 40px;}
    .main_con02 .swiper-slide-active{padding-top: 170px;}
    .main_con02 .wrap .cate i{font-size: 13px;}
    .main_con02 .swiper{margin-top: -124px}
    .main_con02 .swiper-slide-prev{padding-top: 220px;}
    .main_con02 .wrap{height: 200px;padding: 30px;}
    .main_con02 .title{padding: 0 20px;}
    .main_con02 .title p{font-size: 13px;line-height: 1.7;margin-top: 10px;}
    .main_con02{padding: 80px 0}
    .main_con02 .swiper-wrapper,
    .main_con02 .swiper,
    .main_con02 .swiper-slide{height: 420px;}
    .main_con03{padding-top: 20px;}
    .main_con03{padding: 0 20px;}
    .m_title strong{margin-bottom: 0px;}
    .main_con03 .list ul li a .cate span{display: none}
    .m_title p{font-size: 13px;line-height: 1.7}
    .main_con03 .list ul li a p{font-size: 14px;}
    .main_con03 .list ul li a{height: 45px;}
    .main_con03 .list ul li a i{font-size: 12px;right: 20px;}
    .main_con03 .list{margin-top: 40px;}
    .main_con04 .m_title strong{font-size: 35px;}
    .m_title p{margin-top: 15px}
    .more_btn a strong{line-height: 50px;font-size: 14px;}
    .more_btn a{width: 190px;height: 50px;}
    .more_btn{margin-top: 40px;}
    #footer .ft01 .right ul li a strong{font-size: 12px;}
    #header .menu_btn button{width: 38px;height: 38px;}
    #header .btn_w ul li svg{height: 38px;}
    #header .logo svg{height: 19px;}
    #header .hd_w{height: 38px;}
    #header{padding: 10px 20px;}
	.main_con02 .title strong, .m_title strong{letter-spacing: 5px}
	
}
@media (max-width: 500px) {
    .main_visual .vis_txt strong i{font-size: 42px;}
    .main_con .txt_w strong{font-size: 34px;}
    .main_con .txt_w p, .product_con .txt_pin .p_w2 p{font-size: 12px;word-break: keep-all}
    .main_con .txt_w p br{display: block}
    .product_con .txt_pin .p_w .txt strong, .main_con01 .re_title strong, .main_con02 .title strong, .m_title strong{font-size: 30px;}
    .product_con .product_w .txt_w ul li{padding-left: 50px;font-size: 12px;}
    .main_con02 a{width: 100%}
    .main_con01 .peo_con .txt strong{font-size: 15px;}
    .main_con01 .peo_con .txt p{font-size: 11px;}
    .main_con01 .peo_con04{margin-bottom: 30px;}
	.main_con01 .peo_con02 .peo > img{width: 156px}
	.main_con01 .peo_con01 .peo > img{width: 186px}
	.main_con01 .peo_con02{margin-bottom: 100px}
	.main_con01 .peo_con04 .peo > img{width: 136px}
	.main_con01 .peo_con05 .peo > img{width: 149px;}
	.main_con01 .peo_con08 .peo > img{width: 156px}
	.m_title p{letter-spacing: 2px}
	.main_con04 .bg img{width: 260px}
	.main_con04 .bg{margin-left: -130px;}
	#footer .ft01 .left ul{width: 100%}
	#footer .ft01 .left ul li:nth-child(4){position: relative;padding-left: 70px;word-break: keep-all}
	#footer .ft02 address{font-size: 11px;word-break: keep-all;line-height: 1.7;margin-top: 10px;}
	#footer .ft01 .left ul li:nth-child(4) span{position: absolute;left: 0}
	.main_con .txt_w strong i.mr{margin-right: 10px}
    
}