/*basic*/
* {font-family: "raleway" !important;}
body {background: black;}
.shadow {background-color: var(--green);box-shadow: 0 10px 10px var(--green);}
::-webkit-scrollbar {background: transparent;width: 5px;}
::-webkit-scrollbar-thumb {background: var(--222);}
h1,h2,h3,h4,h5,h6 {text-transform: uppercase;text-align: center;}
canvas {width: 100%; height: 100%;position: fixed;top: 0;}

/*frame*/
.group {}
.contant {width: 700px;height: 100%;position:relative;z-index: 1;}
.contant h2 {padding: 0 0 50px;}
.flexible {flex: 1;padding: 0 50px;}
.item {background: white;opacity: .96 !important;}
.subject {position: relative;overflow: hidden;}
.clause {position: absolute;top: 50%;transition: 0s all;}
.clause span {position: fixed;left: 0;top: 0;background-size: cover;z-index: -1;}
.next {height: 100px;border-bottom-width: 1px;animation-delay: 4s;}
.next .btn i:after {content: '\e8ff';}
.next .btn:hover i:after {content: '\e86b';}

/*btn*/
.btn {background-color: var(--333);max-width: 200px;margin: auto;}
.btn i {color: white;width: 50px;height: 50px;line-height: 50px;vertical-align: inherit;}
.btn:hover {background-color: var(--222);}
.btn .shadow {background-color: var(--333);box-shadow: 0 10px 10px var(--333);transition: .3s all;}
.btn:hover .shadow {background-color: var(--222);box-shadow: 0 10px 10px var(--222);}

/*ico*/
.ico-service-1 {background-image: url(../images/service/1.svg);}
.ico-service-2 {background-image: url(../images/service/2.svg);}
.ico-service-3 {background-image: url(../images/service/3.svg);}
.ico-service-4 {background-image: url(../images/service/4.svg);}

/*logo*/
.logo {width: 100%;}
.logo i {display: block;width: 100px;margin: auto;animation-delay: 1s;}
.logo h1,
.logo h6 {color: white;padding: 100px 0 0;}
.logo h1 {font-size: 30px;animation-delay: 2s;display: flex;}
.logo h1 z {flex: 1;}
.logo h6 {letter-spacing: 10px;animation-delay: 3s;}
.logo h6 span {color: white;}

/*main*/
.about {}
.service {}
.service-cont {overflow: hidden;padding-top: 50px;}
.service-cont li {width: 50%;float: left;padding: 30px;}
.service-cont li:nth-child(1) {border-width: 0 1px 1px 0;}
.service-cont li:nth-child(2) {border-width: 0 0 1px 0;}
.service-cont li:nth-child(3) {border-width: 0 1px 0 0;}
.service-cont li i {width: 80px;height: 80px;display: block;margin: auto;}
.service-cont li h5 {padding: 30px 0 0;}
.contact {padding: 50px;}
.contact input,
.contact textarea {background: var(--f7);margin: 5px 0;float: none;}
.contact input {padding: 0 10px;}
.contact button {margin: 30px auto 0;}
.contact button i:after {content: '\e94f';}
.contact button:hover i:after {content: '\e766';}

/*link*/
.link {display: flex;}
.link li {width: 100%;flex: 1;}
.link a {display: block;font-size: 48px;color: white;}
.link li:hover a {transform: rotateY(180deg);}

/*foot*/
.foot {height: 100px;}
.foot a,
.foot p {text-transform: uppercase;color: white;}
.foot a {padding: 0 2px;}







@media(max-width:640px) {
    /*basic*/
    .shadow {box-shadow: 0 .1rem .1rem var(--green);}
    ::-webkit-scrollbar {width: 0;}
    h2 {padding: 0 0 1rem;}

    /*frame*/
    .contant {width: 5rem;}
    .flexible {padding: 0 .5rem}
    .next {height: 2rem;padding: 0 .5rem;}

    /*btn*/
    .btn {max-width: 100%;}
    .btn i {width: .7rem;height: .7rem;line-height: .7rem;}
    .btn .shadow {box-shadow: 0 .1rem .1rem var(--333);}
    .btn:hover .shadow {box-shadow: 0 .1rem .1rem var(--222);}
    
    /*logo*/
    .logo i {width: 1rem;}
    .logo h1,
    .logo h6 {padding: 1rem 0 0;}
    .logo h1 {font-size: .3rem;letter-spacing: .6rem;}
    .logo h6 {letter-spacing: .05rem;}

    /*main*/
    .service-cont li {padding: .2rem;}
    .service-cont li i {width: .8rem;height: .8rem;}
    .service-cont li h5 {padding: .3rem 0 0;}
    .contact {padding: .8rem .5rem;}
    .contact input,
    .contact textarea {margin: .1rem 0;font-size: .2rem;}
    .contact input {padding: 0 10px;}
    .contact button {margin: .5rem auto 0;}

    /*link*/
    .link a {font-size: .56rem;}

    /*foot*/
    .foot {height: 1rem;}
    .foot a {padding: 0 .02rem;}
}