/* global */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: relative;
    font-family: 'Noto Sans TC', sans-serif;
    letter-spacing: 4px;
    background-size: cover;
    object-fit: cover;
}

.bg-gradient {
    background: rgb(238, 174, 202);
    background-image: radial-gradient(circle, rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
}

img {
    width: 100%;
}

.image-container {
    width: 100%;
}

.image-container::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 75%;
}

.image-container .img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    inset: 0;
}

.image-container.ratio-1-1 {
    padding-top: 100%;
}

.image-container.ratio-2-3 {
    padding-top: 150%;
}

.image-container.ratio-16-9 {
    padding-top: 56.25%;
}

.mask-dark {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero {
    padding-top: 200px;
    padding-bottom: 200px;
}

/* .hero-primary {
    background:
        radial-gradient(circle farthest-side at 0% 50%, #fb1 23.5%, rgba(240, 166, 17, 0) 0)21px 30px,
        radial-gradient(circle farthest-side at 0% 50%, #B71 24%, rgba(240, 166, 17, 0) 0)19px 30px,
        linear-gradient(#fb1 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #fb1 0)0 0,
        linear-gradient(150deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0)0 0,
        linear-gradient(30deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0)0 0,
        linear-gradient(90deg, #B71 2%, #fb1 0, #fb1 98%, #B71 0%)0 0 #fb1;
    background-size: 40px 60px;
} */

.hero-secondery {
    background: linear-gradient(#ffffff 50%, rgba(255, 255, 255, 0) 0) 0 0,
        radial-gradient(circle closest-side, #FFFFFF 53%, rgba(255, 255, 255, 0) 0) 0 0,
        radial-gradient(circle closest-side, #FFFFFF 50%, rgba(255, 255, 255, 0) 0) 55px 0 #48B;
    background-size: 110px 200px;
    background-repeat: repeat-x;
}

.hero-third {
    background:
        radial-gradient(black 3px, transparent 4px),
        radial-gradient(black 3px, transparent 4px),
        linear-gradient(#fff 4px, transparent 0),
        linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
        linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
        #fff;
    background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

.bg-grey {
    background-color: rgba(0, 0, 0, 0.7);
}

.bg-red {
    background-color: #f38181de;
}

.bg-fliter {
    backdrop-filter: blur(250px);
    box-shadow: 10px 0px 20px black;
}

.text-test {
    color: #78938A;
}

.bg-blue {
    /* background-image: linear-gradient(to right top, #003f70, #006ba1, #0098b5, #00c4a4, #12eb75); */
    background: #2196f3;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #f44336, #2196f3);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #f44336, #2196f3);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.mask-dark {
    background-color: rgba(204, 139, 0, 0.13);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* compontent */
#carouselExampleFade h1 {
    font-size: 48px;
    color: red;
    z-index: 2;
}

#carouselExampleFade .text {
    font-size: 80px;
    color: #99FFCD;
}

#teacher p {
    font-size: 24px;
    letter-spacing: 4px;
    line-height: 48px;
}

#teacher .shod {
    box-shadow: 15px 10px 10px #222;
    border-radius: 40px;
}

#teacher img {
    border-radius: 50%;
}

#pic .text {
    font-size: 32px;
    font-weight: 600;
    color: #9FB4FF;
}

#pic .text.text-first {
    color: #222;
}

#pic .text.text.text-sec::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #fff;
    border-left: 2px solid #000;
    animation: animate 4s steps(12) infinite;
}

@keyframes animate {

    40%,
    60% {
        left: calc(100% + 4px);
    }

    100% {
        left: 0%;
    }
}

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
    z-index: 1001;
}

#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;

    -webkit-animation: spin 3s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite;
    /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1.5s linear infinite;
    /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }

    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);
        /* IE 9 */
        transform: rotate(0deg);
        /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);
        /* IE 9 */
        transform: rotate(360deg);
        /* Firefox 16+, IE 10+, Opera */
    }
}
#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #222222;
    z-index: 1000;
    -webkit-transform: translateX(0);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(0);
    /* IE 9 */
    transform: translateX(0);
    /* Firefox 16+, IE 10+, Opera */
}

#loader-wrapper .loader-section.section-left {
    left: 0;
}

#loader-wrapper .loader-section.section-right {
    right: 0;
}

/* loder */
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);
    /* IE 9 */
    transform: translateX(-100%);
    /* Firefox 16+, IE 10+, Opera */

    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);
    /* IE 9 */
    transform: translateX(100%);
    /* Firefox 16+, IE 10+, Opera */

    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.loaded #loader {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;

    -webkit-transform: translateY(-100%);
    /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateY(-100%);
    /* IE 9 */
    transform: translateY(-100%);
    /* Firefox 16+, IE 10+, Opera */

    -webkit-transition: all 0.3s 1s ease-out;
    transition: all 0.3s 1s ease-out;
}

/* masonry */
.masonry-row {
    margin-left: -16px;
    margin-right: -16px;
}

.masonry-col {
    padding-left: 16px;
    padding-right: 16px;
    width: calc(100% / 3);
}

@media (max-width:768px) {
    .masonry-col {
        width: calc(100% / 2);
    }
}

@media (max-width:540px) {
    .masonry-col {
        width: 100%;
    }
}

/* evaluation card */
.eval-card {
    padding: 16px;
    /* box-shadow: 0 3px 20px rgba(0, 0, 0, 0.3); */
    box-shadow: 0 15px 20px rgb(0 0 0 / 20%);
    /* background-color: #fff; */
    width: 100%;
    /* height: 300px; */
    margin-bottom: 32px;
    transition: all .3s linear;
}

.eval-card:hover {
    background-color: #222;
}

.eval-card .image {
    display: inline-block;
    width: 100%;
    margin-bottom: 16px;
}

.eval-card .para {
    line-height: 32px;
    font-size: 16px;
}

#footer ul li {
    letter-spacing: 8px;
    font-size: 18px;
}















/* buboll design */
.nanogallery_gallerytheme_dark_nanogallery2 .nGY2GThumbnail_l1 {
    border: none;
}

/* buboll */
.jelly-container {
    width: 100%;
    position: relative;
    /* height: 100%; */
    overflow-x: hidden;
    /* background: linear-gradient(to bottom, rgba(0, 141, 210, 0.63) 0%, rgba(0, 0, 0, 0) 100%); */
    background: rgb(2, 0, 36);
    background: linear-gradient(0deg, rgba(2, 0, 36, 0.9332107843137255) 0%, rgba(21, 172, 201, 1) 94%);
}

.jelly-wrapper {
    width: 265px;
    position: absolute;
    transform: translate3D(-50%, -75%, 0);
    animation: jelly-movement 10s infinite linear;
}

.jelly-hair {
    height: 75px;
    width: 100px;
    background: linear-gradient(to bottom, rgba(239, 137, 26, 1) 0%, rgba(239, 137, 26, 1) 20%, rgba(235, 242, 138, 1) 100%);
    /* W3C */
    position: absolute;
    left: 29%;
    transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -15px, 0) rotate3d(0, 0, 1, 75deg);
    border-radius: 25px;
    animation: hair-movement 10s infinite linear;
}

.jelly-body {
    background: linear-gradient(to bottom, rgba(0, 141, 210, 1) 0%, rgba(235, 242, 138, 1) 100%);
    /* W3C */
    position: relative;
    height: 250px;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    animation: head-movement 10s infinite linear;
}

.jelly-inner {
    position: absolute;
    left: 50%;
    top: 35%;
    animation: facing-movement 10s infinite linear;
}
div[class^="bubble-"] {
    height: 1px;
    width: 1px;
    position: absolute;
    background-color: rgba(0, 141, 210, 0.3);
    border-radius: 50%;
    transform: translateX(-50%);
}

div[class^="bubble-"]:after {
    content: '';
    position: absolute;
    height: 85%;
    width: 85%;
    border-top: 1px solid rgba(255, 255, 255, 0.63);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) rotateZ(-45deg);
}

.bubble-1 {
    bottom: 2px;
    left: 32%;
    animation: bubble-movement 4s infinite ease-in -0.48s;
}

.bubble-2 {
    bottom: 4px;
    left: 78%;
    animation: bubble-movement 4s infinite ease-in -2.36s;
}

.bubble-3 {
    bottom: 11px;
    left: 51%;
    animation: bubble-movement 4s infinite ease-in -1.05s;
}

.bubble-4 {
    bottom: 8px;
    left: 28%;
    animation: bubble-movement 4s infinite ease-in -2.84s;
}

.bubble-5 {
    bottom: 9px;
    left: 60%;
    animation: bubble-movement 4s infinite ease-in -2.49s;
}

.bubble-6 {
    bottom: 11px;
    left: 45%;
    animation: bubble-movement 4s infinite ease-in -1.29s;
}

.bubble-7 {
    bottom: 10px;
    left: 29%;
    animation: bubble-movement 4s infinite ease-in -1.56s;
}

.bubble-8 {
    bottom: 5px;
    left: 95%;
    animation: bubble-movement 4s infinite ease-in -0.61s;
}

.bubble-9 {
    bottom: 11px;
    left: 4%;
    animation: bubble-movement 4s infinite ease-in -1.29s;
}

.bubble-10 {
    bottom: 3px;
    left: 19%;
    animation: bubble-movement 4s infinite ease-in -2.55s;
}

.bubble-11 {
    bottom: 7px;
    left: 93%;
    animation: bubble-movement 3s infinite ease-in -0.52s;
}

.bubble-12 {
    bottom: 7px;
    left: 76%;
    animation: bubble-movement 3s infinite ease-in -0.02s;
}

.bubble-13 {
    bottom: 8px;
    left: 46%;
    animation: bubble-movement 3s infinite ease-in -0.38s;
}

.bubble-14 {
    bottom: 7px;
    left: 70%;
    animation: bubble-movement 3s infinite ease-in -2.75s;
}

.bubble-15 {
    bottom: 11px;
    left: 100%;
    animation: bubble-movement 3s infinite ease-in -2.16s;
}

.bubble-16 {
    bottom: 3px;
    left: 60%;
    animation: bubble-movement 3s infinite ease-in -1.31s;
}

.bubble-17 {
    bottom: 4px;
    left: 89%;
    animation: bubble-movement 3s infinite ease-in -0.6s;
}

.bubble-18 {
    bottom: 3px;
    left: 79%;
    animation: bubble-movement 3s infinite ease-in -0.91s;
}

.bubble-19 {
    bottom: 2px;
    left: 22%;
    animation: bubble-movement 3s infinite ease-in -0.21s;
}

.bubble-20 {
    bottom: 7px;
    left: 24%;
    animation: bubble-movement 3s infinite ease-in -2.07s;
}

@keyframes jelly-movement {
    0% {
        top: 55%;
        left: 50%;
    }

    5% {
        top: 50%;
    }

    10% {
        top: 55%;
    }

    15% {
        top: 50%;
    }

    20% {
        top: 55%;
    }

    25% {
        top: 50%;
        left: calc(100% - 135px);
    }

    30% {
        top: 55%;
    }

    35% {
        top: 50%;
    }

    40% {
        top: 55%;
    }

    45% {
        top: 50%;
    }

    50% {
        top: 55%;
        left: 50%;
    }

    55% {
        top: 50%;
    }

    60% {
        top: 55%;
    }

    65% {
        top: 50%;
    }

    70% {
        top: 55%;
    }

    75% {
        top: 50%;
        left: 135px;
    }

    80% {
        top: 55%;
    }

    85% {
        top: 50%;
    }

    90% {
        top: 55%;
    }

    95% {
        top: 50%;
    }

    100% {
        top: 55%;
        left: 50%;
    }
}

@keyframes tentacle-animation {
    0% {
        bottom: -8%;
    }

    50% {
        bottom: -20%;
    }

    100% {
        bottom: -8%;
    }
}

@keyframes facing-movement {
    0% {
        left: 60%;
    }

    20% {
        left: 60%;
    }

    25% {
        left: 50%;
    }

    30% {
        left: 40%;
    }

    70% {
        left: 40%;
    }

    75% {
        left: 50%;
    }

    80% {
        left: 60%;
    }

    100% {
        left: 60%;
    }
}

@keyframes mouth-movement {
    0% {
        left: 52%;
    }

    20% {
        left: 52%;
    }

    25% {
        left: 50%;
    }

    30% {
        left: 46%;
    }

    70% {
        left: 46%;
    }

    75% {
        left: 50%;
    }

    80% {
        left: 52%;
    }

    100% {
        left: 52%;
    }
}

@keyframes eyes-movement {
    0% {
        left: 5px;
    }

    20% {
        left: 5px;
    }

    25% {
        left: 0px;
    }

    30% {
        left: -5px;
    }

    70% {
        left: -5px;
    }

    75% {
        left: 0px;
    }

    80% {
        left: 5px;
    }

    100% {
        left: 5px;
    }
}

@keyframes head-movement {
    0% {
        border-top-right-radius: 70px;
        border-top-left-radius: 90px;
    }

    20% {
        border-top-right-radius: 70px;
        border-top-left-radius: 90px;
    }

    25% {
        border-top-right-radius: 80px;
        border-top-left-radius: 80px;
    }

    30% {
        border-top-right-radius: 90px;
        border-top-left-radius: 70px;
    }

    70% {
        border-top-right-radius: 90px;
        border-top-left-radius: 70px;
    }

    75% {
        border-top-right-radius: 80px;
        border-top-left-radius: 80px;
    }

    80% {
        border-top-right-radius: 70px;
        border-top-left-radius: 90px;
    }

    100% {
        border-top-right-radius: 70px;
        border-top-left-radius: 90px;
    }
}

@keyframes hair-movement {
    0% {
        transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }

    20% {
        transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }

    25% {
        transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }

    30% {
        transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }

    70% {
        transform: rotate3d(0, 1, 0, 0deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }

    75% {
        transform: rotate3d(0, 1, 0, 90deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }

    80% {
        transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }

    100% {
        transform: rotate3d(0, 1, 0, 180deg) translate3d(28%, -2px, 0) rotate3d(0, 0, 1, 75deg);
    }
}

@keyframes shadow-movement {
    0% {
        width: 250px;
        left: 50%;
    }

    5% {
        width: 210px;
    }

    10% {
        width: 250px;
    }

    15% {
        width: 210px;
    }

    20% {
        width: 250px;
    }

    25% {
        width: 210px;
        left: calc(100% - 135px);
    }

    30% {
        width: 250px;
    }

    35% {
        width: 210px;
    }

    40% {
        width: 250px;
    }

    45% {
        width: 210px;
    }

    50% {
        width: 250px;
        left: 50%;
    }

    55% {
        width: 210px;
    }

    60% {
        width: 250px;
    }

    65% {
        width: 210px;
    }

    70% {
        width: 250px;
    }

    75% {
        width: 210px;
        left: 135px;
    }

    80% {
        width: 250px;
    }

    85% {
        width: 210px;
    }

    90% {
        width: 250px;
    }

    95% {
        width: 210px;
    }

    100% {
        width: 250px;
        left: 50%;
    }
}

@keyframes eyes-blink {
    0% {
        height: 15px;
    }

    3% {
        height: 1px;
    }

    5% {
        height: 15px;
    }

    100% {
        height: 15px;
    }
}

@keyframes bubble-movement {
    0% {
        transform: translate3d(-50%, 0, 0);
        height: 1px;
        width: 1px;
    }

    100% {
        transform: translate3d(-50%, -500px, 0);
        height: 75px;
        width: 75px;
    }
}
/* component------------------------students */
.btn{
    display: inline-block;
    vertical-align: top;
    color: #666;
    text-decoration: none;
    border: 2px solid #666;
    padding: 16px 32px;
    border-radius: 5px;
    font-weight: 600;
}
.btn:hover{
    background-color: #666;
    color: #fff;
}
.image-container{
    /* border: 1px solid #000; */
    width: 100%;
    display: block;
    position: relative;
}
.image-container::before{
    content: '';
    display: block;
    width: 100%;
    padding-top: 133.333333%;
}
.image-ratio-1-1::before{
    padding-top: 100%;
}
.image-container .image{
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* product-item */
.product-item:not(:last-child){
    margin-bottom: 200px;
    /* border: 1px solid #000; */
}
.product-item .title{
    font-size: 48px;
    color: #143F6B;
    font-weight: 600;
    margin-bottom: 32px;
}
.product-item .title--left{
    margin-left: -64px;
}
.product-item .para{
    font-size: 24px;
    color: #143F6B;
    line-height: 48px;
    letter-spacing: 12px;
    font-weight: 300;
    margin-bottom: 48px;
    text-align: justify;
}
/* animation */
.product-item.animated .image-container::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 0px;
    background-color: #484848;
    animation:
    ani-drawLine .3s forwards,
    ani-fillWidth 2s .5s forwards,
    ani-block-Out .2s .5s forwards
    ;
}
@keyframes ani-drawLine {
    0%{
        width: 8px;
        height: 0;
    }
    100%{
        width: 8px;
        height: 100%;
    }
}
@keyframes ani-fillWidth {
    0%{
        width: 8px;
    }
    100%{
        width: 100%;
    }
}
@keyframes ani-block-Out {
    0%{
        width: 100%;
        left: inherit;
        right: 0;
    }
    100%{
        width: 0%;
        left: inherit;
        right: 0;
    }
}
.product-item.animated .image-container .image{
    animation: ani-fadeIn .5s .6s backwards;
}
@keyframes ani-fadeIn {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.product-item.animated .title{
    animation: ani-fadeInUp .5s .5s backwards;
}
.product-item.animated .para{
    animation: ani-fadeInUp .5s .65s backwards;
}
.product-item.animated .btn{
    animation: ani-fadeInUp .5s .8s backwards;
}



@keyframes ani-fadeInUp {
    0%{
        transform: translate(0,50px);
        opacity: 0;
    }
    100%{
        transform: translate(0,0);
        opacity: 1;
    }
}




/* gotop */
.gotop{
    position: fixed;
    bottom: 90px;
    right: 27px;
    z-index: 999;
    color: #222;
    /* transform: translateX(200%)rotate(100deg); */
    transition: .5s;
    display: none;
}
.gotop.active{
    transform: translateX(0),rotate(0);
}