@charset "utf-8";
 
input[type="text"], input[type="password"], input[type="file"], input[type="search"]{box-sizing:content-box}

.basic_box .grap{float:none;width:100%}
.basic_search .searchinput{float:none}

@media only screen and (min-width: 360px){
.basic_search .searchinput {float:none}
}
@media only screen and (min-width: 500px){
.basic_box .grap {margin-left:0}	
}


@media only screen and (min-width: 768px){
.basic_box .grap {float:left;width:auto}	
.basic_search .searchinput{float:right}
.basic_box #kinds2{margin-left:5px}
}

.basic_box #kinds2 select{background:#fff}



/* 표 */
.flip-scroll,.table-pc,.table-responsive {
    position: relative
}

.flip-scroll .table-icon,.table-responsive .table-icon {
    display: block;
    opacity: 1
}

.table-pc .table-icon {
    display: none
}

.table-icon.icon--hide {
    display: none!important;
    opacity: 0
}

.table-icon.on,.ui:after {
    display: block
}

.table-icon {
    position: absolute;
    z-index: 2;
    top: 67px;
    right: 45%;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: #fff;
    box-shadow: -1px 1px 10px grey;
    align-items: center;
    justify-content: center;
    transition: all .5s ease-in-out
}

.swipe-icon .swipe-arrow {
    animation: pulse-arrow 3s ease-out infinite
}

.swipe-icon {
    position: absolute;
    top: 15px;
    left: 25%;
    width: 25px;
    height: 25px;
    overflow: visible;
    animation: hand-move 3s ease-out infinite
}

.check-box,.example-box,.txt-box,.ui,.ui-tooltip {
    position: relative
}

.scaledown {
    transform: scale(.7,.7)
}

@keyframes pulse-arrow {
    0% {
        opacity: 1;
        transform: translateX(0)
    }

    50% {
        opacity: 1;
        transform: translateX(.25em)
    }

    75% {
        opacity: 0;
        transform: translateX(.25em)
    }

    100% {
        opacity: 0;
        transform: translateX(0)
    }
}

@keyframes hand-move {
    0%,100% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(.5em)
    }
}

@media (max-width: 767px) {
.table_scroll_x { width: 100%;  overflow-x: scroll; }  
.basic_table { width: 768px; }
}