@charset "utf-8";
body,input,textarea,button,select{color:#0e0e0e}

#wrap{overflow: hidden;}
#wrap.fixed{position: fixed;}

#header{  top: 0; left: 0;  z-index: 99; width: 100%;}
#header .header{position:fixed; top: 0; left: 0;   z-index: 100; height: 120px; width: 100%; transition: all .3s;}
#header h1{position: fixed; left: 80px; top:60px; z-index: 999; transition: all .3s;}
#header h1 a{display: block; position: relative; width: 133px; aspect-ratio: 133/60; background:url(/images/common/logo.svg) no-repeat; background-size: cover; transition: all .3s;}

#header .btn_menu{position:absolute;right:96px; top:62px; z-index:999;  transition:all 0.3s ease 0s; font-size:26px; color:#0e0e0e; font-weight: 900;  text-transform: uppercase; transition: all .3s;}
#header .btn_menu i{width: 10px; height: 10px; border-radius: 100px; background-color: #00e7bd; position: absolute; right: -17px; top:16px; opacity: 1; transition: all .3s;;}
#header button.circle{z-index: 99;width: 100%;  position: fixed;height: 100vh;;top: 0; right: 0px;   display: block;border-radius: 20px; opacity: 0;transition: all .6s; background-color: #000000; clip-path: circle(5px at  calc(100% - 84px) 83px)}
/* #header nav{display: none; } */
#header nav ul li,#header nav{opacity: 0; visibility: hidden;}
#header nav ul li{font-size:80px; transform:translate3d(0, 36px, 0); -webkit-transform:translate3d(0, 36px, 0);}
#header nav ul li a{color: #ffffff; font-weight:800; display: block;  padding: 8px 0}

#header .wrap_line{display: none; z-index: 100; opacity: 0; visibility: hidden; transition: all .3s;}
#header .wrap_line .horizon span,
#header .wrap_line .vertical span{border-top: 1px solid #1a1a1a; opacity: 0.4;}

.change #header h1 a{background:url(/images/common/logo_w.svg) no-repeat; background-size: cover;}
.change #header .btn_menu{color:black;}

#header.show h1 a{background:url(/images/common/logo_w.svg) no-repeat; background-size: cover;}
#header.show .header{height: 100vh;}
#header.show .btn_menu{color:#fff}
#header.show .btn_menu i{opacity: 1;}
#header.show .wrap_line{display: block; opacity: 1; visibility: visible;}
#header.show button.circle{clip-path: circle(100% at 57.3% 82px);  margin-left: 0; border-radius: 0; opacity: 1; }
#header.show nav{display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 999; opacity: 1; visibility: visible;}
#header.show nav ul li{opacity: 1; visibility: visible; transition:opacity 0.4s, -webkit-transform 0.4s; transition:transform 0.4s, opacity 0.4s; transition:transform 0.4s, opacity 0.4s, -webkit-transform 0.4s; transform:translate3d(0, 0, 0); -webkit-transform:translate3d(0, 0, 0); -webkit-transition:opacity 0.4s, -webkit-transform 0.4s;}
#header.show nav ul li:nth-child(1){-webkit-transition-delay:0.65s; transition-delay:0.65s;}
#header.show nav ul li:nth-child(2){-webkit-transition-delay:0.75s; transition-delay:0.75s;}
#header.show nav ul li:nth-child(3){-webkit-transition-delay:0.85s; transition-delay:0.85s;}
#header.show nav ul li:nth-child(4){-webkit-transition-delay:0.95s; transition-delay:0.95s;}
#header.show nav ul li:nth-child(5){-webkit-transition-delay:1.05s; transition-delay:1.05s;}
#header.show nav ul li a{position: relative; color:rgba(255,255,255,0.1)}
#header.show nav ul li a i{ width: 14px; height: 14px; background-color:#00e7bd; border-radius: 20px; display: inline-block; margin-left: 14px; opacity: 0; visibility: hidden; transition: all .3s;}
#header.show nav ul li a::before{content: attr(data-text); position: absolute; max-width: 7em; overflow: hidden; white-space: nowrap; color:#fff; animation: loading 1.4s linear;}
#header.show nav ul li:nth-child(1) a::before{animation-delay: 0.64s;}
#header.show nav ul li:nth-child(2) a::before{animation-delay: 0.74s;}
#header.show nav ul li:nth-child(3) a::before{animation-delay: 0.84s;}
#header.show nav ul li:nth-child(4) a::before{animation-delay: 0.94s;}
#header.show nav ul li:nth-child(5) a::before{animation-delay: 1.04s;}
@keyframes loading {
    0% {
        max-width: 0;
    }
}
#header.show nav ul li:hover a i{opacity: 1; visibility: visible;}

#footer{background-color: #0e0e0e; padding:130px 0 112px; box-sizing: border-box;}
#footer .con_footer{display: flex; justify-content: space-between; padding: 0 4.1666% }
#footer ul li,#footer ul a,#footer p{color:#fff}
#footer .box_info{display: table;}
#footer .box_info > *{display: table-cell; vertical-align: top;}
#footer .box_info a.logo{width:125px; display: block;}
#footer .box_info a.logo img{width: 100%; display: block;}
#footer .box_info ul{padding-left: 80px;}
#footer .box_link ul{text-align: right; font-size:0; letter-spacing: 0; word-spacing: 0;}
#footer .box_link ul li{display: inline-block; vertical-align: middle;} 
#footer .box_link ul li + li{margin-left: 48px;}
#footer .box_link ul li a{font-size:17px}
#footer .box_link p{opacity: 0.38; margin-top: 26px;}


.area_quick{position:fixed; left:60px; bottom:60px; z-index:60;}
.area_quick a {
    height: 60px;
    width: 60px;
    white-space: nowrap;
    margin-right: auto;
    position: relative;
    transition: all .3s;
    background: rgb(2 231 189);
    display: block;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* .area_quick a:hover{background:rgb(2 231 189)} */
.area_quick a em{display: block; font-size: 12px;}
.area_quick a span{ color:#fff; transition: all .3s; font-size:17px; vertical-align: middle; opacity: 0; visibility: hidden; width: 0;}
.area_quick a + a{margin-top: 12px;}
/* .area_quick a:hover span{opacity: 1; visibility: visible; width: auto;  margin-left: 12px;} */
.area_quick a:nth-child(1) span{opacity: 1; visibility: visible; width: auto;  margin-left: 12px;}
.area_quick a:nth-child(1){width:150px;border-radius:40px}
.area_quick a:nth-child(2):hover span {opacity: 1; visibility: visible; width: auto;  margin-left: 12px;}
.area_quick a:nth-child(2):hover{width:200px;border-radius:40px}
.area_quick a:nth-child(1) img{width: 20px; display: block;}
.area_quick a:nth-child(2) img{width: 22px; display: block;}
.area_quick a:nth-child(3) img{width: 26px; display: block;} 

.fade-in-bottom{-webkit-animation:fade-in-bottom .7s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-bottom .7s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes fade-in-bottom{0%{-webkit-transform:translateY(50px);transform:translateY(50px);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
.scale-in-left{-webkit-animation:scale-in-left .5s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-left .5s cubic-bezier(.25,.46,.45,.94) both}

@-webkit-keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}
@media all and (min-width:1025px){

}
@media all and (max-width:1640px){
    #header h1{left: 60px;}
    #header .btn_menu{right: 70px;}
    #header button.circle{clip-path: circle(5px at  calc(100% - 60px) 83px)}
    #header.show button.circle{clip-path: circle(150% at  calc(100% - 60px) 83px)}
  
    #header nav ul li{font-size:64px}
} 
@media all and (max-width:1024px){
    
    #header,  #header .header{height: 90px;}
    #header .btn_menu,
    #header .btn_close{display:block;}

    #header h1{left: 28px; top: 20px;}
    #header h1 a {width: 105px;}

    #header .btn_menu{right: 40px; top: 29px;}
    #header button.circle{clip-path: circle(5px at  calc(100% - 30px) 49px);}
    #header.show button.circle{clip-path: circle(150% at  calc(100% - 30px) 49px); margin-left: 0; border-radius: 0; position: fixed; }

    #header.show nav{left: 30%;}

}

@media all and (max-width:960px){
    #footer .con_footer{flex-wrap: wrap;}
    #footer .con_footer > *{width: 100%;}
    #footer .box_info{display: flex;}
    #footer .box_info a.logo{display: inline-block;}
    #footer .box_info ul{ width: calc(100% - 125px); box-sizing: border-box;}
    #footer .box_link {padding-left: 205px; padding-top: 28px;}
    #footer .box_link ul li a{font-size:14px}
    #footer .box_link ul{text-align: left; }
    #footer .box_link p{margin-top: 8px; font-size:14px}
    
}
@media all and (max-width:786px){
    #header h1{top: 25px;}
    #header h1 a{width: 80px;}
    #header .btn_menu{font-size:18px}
    #header button.circle{clip-path:circle(4px at  calc(100% - 30px) 44px)}

    #header nav ul li{font-size:46px}
    
    .area_quick{left: inherit; right: 20px;}
    .area_quick a{width:45px; height:45px; box-shadow: 7px 5px 18px 0 rgb(132 132 132 / 30%);}
    .area_quick a:nth-child(1){ width: 45px; }
    .area_quick a:hover span{opacity: 0; visibility: hidden; width: 0; margin-left: 0;}
    .area_quick a:nth-child(1):hover{width:45px; height:50px;}
    .area_quick a:nth-child(2):hover{width:45px; height:50px;}
    .area_quick a:nth-child(1) img{width:15px;}
    .area_quick a:nth-child(2) img{width:17px;}
    .area_quick span{ display: none; }
}

@media all and (max-width:640px){
    #footer{padding:80px 0}
}

@media all and (max-width:480px){
    #footer{padding:4em 1em}
    #footer .box_info{display: block;}
    #footer .box_info a.logo{width: 97px;}
    #footer .box_info ul{padding-left: 0; padding-top: 24px;}
    #footer .box_link{padding-left: 0;}

    #header nav ul li{font-size:42px}
}