@charset "utf-8";
#TopSearch p,.slick-dots {
    text-align:center
    }

#loading {
    position:fixed;
    z-index:10000000;
    background-color:#FFF;
    width:100%;
    height:100%;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column
    }

#loading.end {
    transition:all .5s ease;
    opacity:0;
    pointer-events:none
    }

#loading #load_ship {
    background:url(../img/index/load_wave.png) center bottom/contain no-repeat;
    width:30%;
    min-width:300px;
    display:flex;
    align-items:center;
    flex-direction:column;
    padding-bottom:10px
    }

#load_ship p {
    color:#22BCB8;
    font-size:22px;
    margin-bottom:10px;
    font-family:cursive
    }

#load_ship img {
    max-width:105px;
    width:auto
    }

#load_ship.none p::after {
    content:''
    }

#load_ship p::after {
    content:'.'
    }

#load_ship.center p::after {
    content:'..'
    }

#load_ship.right p::after {
    content:'...'
    }

#load_ship #ship {
    opacity:1;
    width:50px;
    margin-left:10%;
    margin-right:auto;
    transform:rotate(-10deg)
    }

#load_ship.none #ship {
    opacity:0
    }

#load_ship.center #ship {
    opacity:1;
    margin-left:auto;
    margin-right:auto;
    transform:rotate(10deg)
    }

#load_ship.right #ship {
    opacity:1;
    margin-left:auto;
    margin-right:10%;
    transform:rotate(-10deg)
    }

#TopSearch {
    background-color:#22BCB8;
    padding:20px;
    color:#FFF;
    display:flex;
    justify-content:center;
    align-items:center
    }

#searchform {
    display:flex;
    overflow:hidden;
    height:24px;
    /*margin: 10px 20px;*/
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    }

#searchform input.text {
    border-radius:10px 0 0 10px;
    border:1px solid #333;
    margin:0;
    padding:0 0 0 10px
    }

#searchform input.submit {
    -webkit-appearance:none;
    background-color:#333;
    color:#FFF;
    border:none;
    outline:0;
    box-shadow:none;
    cursor:pointer;
    margin:0;
    padding:0 10px;
    border-radius:0 10px 10px 0
    }

.slick-dots {
    position:absolute;
    bottom:0;
    display:block;
    width:100%;
    padding:0;
    margin:0;
    list-style:none;
    z-index:9998
    }

.slick-dots li {
    position:relative;
    display:inline-block;
    width:20px;
    height:20px;
    margin:0 5px;
    padding:0;
    cursor:pointer
    }

.slick-dots li button {
    display:block;
    width:10px;
    height:10px;
    padding:0;
    margin:auto;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:50%;
    cursor:pointer;
    color:transparent;
    border:0;
    outline:0;
    background:#FFF;
    opacity:.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transition:all .2s ease
    }

.slick-dots li button:hover,.slick-dots li.slick-active button {
    opacity:1;
    background:#FFF
    }

@media only screen and (max-width:769px) {
    img {
    width:100%
    }

#TopSearch {
    flex-direction:column;
    padding:10px 0 5px
    }

#TopSearch p {
    font-size:12px
    }

#TopSearch span {
    display:inline-block
    }

#searchform {
    margin:5px 20px;
    position: static;
    }


    }