.search-engine {
    display: inline-block;
    min-width : 300px;
    max-height: 50px;
}

.search-bar {
    position: relative;
    background : none;
}
/* .search-bar::after {
    content: '';
    position: absolute;
    border-radius: 50%;

    width: 1vw;
    height: 100%;
    
    background-color: #f1ffad;
    mix-blend-mode: overlay;
    z-index: 3;

    animation:screenAnime 5s 2s infinite alternate;
    -webkit-animation:screenAnime 5s infinite alternate;
    -moz-animation:screenAnime 5s infinite alternate;
    -o-animation:screenAnime 5s infinite alternate;
    -ms-animation:screenAnime 5s infinite alternate;

} */

.search-title {
    position: absolute;
    top : 1vw;
    left : 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 1vw;
    z-index: 2;
}
.search-title > span {
    display: inline-block;
    color: white;
    font-style: italic;
    text-shadow: 2px 2px 2px #68ff4f;
    margin: 0 auto;
}
.search-title > span.search-title {
    font-weight: 900;
    font-size: 2.5vw;
}
.search-title > div.search-title-ex {
    text-align: right;
}
.search-title > div.search-title-ex img {
    width: 1.5vw;
}
.search-title > div.search-title-ex span {
    color: white;
}


.search-input {
    /* position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%); */

    width: 100%;
    /* height: 5vw; */
    z-index: 2;
}

.search-input > div {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    padding : 7px;
}

.search-input > div input {
    border : 1px solid #bb1338;
    border-radius: 50px;

    /* position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%); */

    width: 250px;
    font-size: 13px;
    padding : 8px 15px;
    /* font-size: 1.2vw; */
    /* padding: .7vw 1.5vw; */
    text-align: center;
}
.search-input > div input::placeholder {
    color: #cccccc;
}

.search-input > div .search-btn {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(calc(-50% + 100px), -50%);

    border-radius: 50%;
    border : 1px solid #FFA09B;

    width: 25px;
    height: 25px;

    background-image: url('/images/icons/search.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;

    cursor: pointer;

    filter: contrast(0.5) drop-shadow(.1vw .1vw 0vw #68ff4f);
}
.search-input > div .search-btn:hover {
    filter: contrast(0.3) drop-shadow(.1vw .1vw 0vw #FFA09B);
}
.search-input > div .search-btn:active {
    filter: contrast(0) drop-shadow(.1vw .1vw 0vw #bb1338);
}



.search-recommend {
    border-radius: .5vw;
    position: absolute;
    top : calc(50% + 7vw);
    left : 50%;
    transform: translate(-50%, -50%);

    width: 150%;
    padding: .3vw;
    z-index: 2;
    background: rgba(255, 255, 255, 0.1);
}
.search-recommend ul {
    text-align: center;
}
.search-recommend ul li {
    border-radius: .5vw;
    position: relative;
    display: inline-block;
    width: 9vw;
    height: 6vw;
    margin : 0 auto;
    background-color: white;
    filter: drop-shadow(1px 1px 1px black);
    transition: all 0.1s;
    cursor: pointer;
}

.search-recommend ul li .search-rec-title {
    display: inline-block;
    width: 100%;
    height: 2vw;
    padding: .5vw;
    text-overflow: ellipsis;
    white-space: break-spaces;
    overflow: hidden;
}
.search-recommend ul li .search-rec-writer {
    display: inline-block;
    width: 100%;

    font-size: 1vw;
    font-style: italic;
    text-shadow: 1px 1px 0px #68ff4f;

    padding: .5vw;
    text-overflow: ellipsis;
    white-space: break-spaces;
    overflow: hidden;
    
}
.search-recommend ul li .search-rec-img {
    mix-blend-mode: multiply;
}


.search-recommend ul li img {

    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);

    /* width: 100%; */
    height: 100%;

    z-index: 1;
}

.search-recommend ul li:hover {
    filter: drop-shadow(2px 4px 6px #68ff4f);
}
.search-recommend ul li:active {
    filter: drop-shadow(2px 4px 6px #FFA09B);
}





.search-bg {
    border-radius: 1vw;
    border-top: .2vw solid #FFC785;
    border-bottom: .5vw solid #FFA09B;
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);

    width: 115%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.search-bg img {
    width: 100%;
}

@keyframes screenAnime {
    0% {
        left : 0%;
    }
    30% {
        left : 30%;
    }
    100% {
        left : 100%;
    }
}



.search-setting {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 145px), -50%);
    border-radius: 5px;
    /* border: 1px solid #FFA09B; */
    width: 38px;
    height: 38px;
    background-image: url(/images/icons/domain.png);

    background-position: center;
    background-repeat: no-repeat;
    background-size: 33px;
    cursor: pointer;
}
.search-setting:hover {
    filter: contrast(0.5) drop-shadow(1px 1px 0 #68ff4f);
}
.search-setting:active {
    filter: contrast(0) drop-shadow(1px 1px 0 #68ff4f);
}

.search-blog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 185px), -50%);
    border-radius: 5px;
    /* border: 1px solid #FFA09B; */
    width: 38px;
    height: 38px;
    background-image: url(/images/icons/blog.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 29px;
    cursor: pointer;
    filter : invert(1);
}
.search-blog:hover {
    filter: contrast(0.5) drop-shadow(1px 1px 0 #68ff4f);
}
.search-blog:active {
    filter: contrast(0) drop-shadow(1px 1px 0 #68ff4f);
}





/* Contents */


.search-content {
}

.search-content > ul {

    /* padding: 50px 0;
    padding-top: 0; */
}

.search-content > ul li.search-wr-list {

    border-radius: 10px;
    border : 1px solid #ccc;

    display: flex;
    flex-direction: row;
    padding: .2vw;
    margin-bottom: 5px;
}

li.search-wr-list .search-wr-img {
    height: 12vw;
    border-radius: 10px;
    border: 1px solid #ccc;
    text-align: center;
    padding: 0 .2vw;
}
li.search-wr-list .search-wr-img img {
    height: 100%;
}



li.search-wr-list .search-wr-content {
    flex : 1;
    display: flex;
    flex-direction: column;
}

li.search-wr-list .search-wr-content > div {
}
li.search-wr-list .search-wr-content > div.search-wr-list-top {}
li.search-wr-list .search-wr-content > div.search-wr-list-top > span {
    display: flex;
    height: 35px;
} 
li.search-wr-list .search-wr-content > div.search-wr-list-top > span > div {
    display: flex;
    flex-direction: row;
    flex : 1;
    height: 35px;
    padding : 5px 10px;
} 
li.search-wr-list .search-wr-content > div.search-wr-list-top > span > div > span {
    display: inline-block;
}
li.search-wr-list .search-wr-content > div.search-wr-list-top > span > div > span:nth-child(1){
    font-size: 12px;
    color : #99233c;
    letter-spacing: -1px;
}
li.search-wr-list .search-wr-content > div.search-wr-list-top > span > div > span:nth-child(2){
    flex : 1;
    font-weight: bolder;
    padding: 0 10px;
    font-size: 17px;
    letter-spacing: -1px;

}

.wrt {
    text-align: right;
    padding : 0 5px;
}
.wrt span {
    color : #bb1338;
    padding: 0 10px;
}
.wrt span:nth-child(2){
    font-size: 10px;
}


li.search-wr-list .search-wr-content > div.search-wr-list-body {
    flex : 1;
    display: flex;
}
li.search-wr-list .search-wr-content > div.search-wr-list-body > span {
    display: inline-block;
}
li.search-wr-list .search-wr-content > div.search-wr-list-body > span:nth-child(1){
    flex : 1;
    max-height: 90px;
    padding : 10px;

    font-size: 12px;
    text-overflow: ellipsis;
    /* white-space: break-spaces; */
    overflow: hidden;
    overflow-y: auto;
}
li.search-wr-list .search-wr-content > div.search-wr-list-body > span:nth-child(2){
    min-width: 10vw;
    max-width: 10vw;
    padding: 10px;
    text-align: center;
}
li.search-wr-list .search-wr-content > div.search-wr-list-body > span:nth-child(2) button {
    margin-bottom: .3vw;
    width: 100%;
}

li.search-wr-list .search-wr-content > div.search-wr-list-footer {
    text-align: right;
    font-size: 12px;
    padding : 0 10px;
}
li.search-wr-list .search-wr-content > div.search-wr-list-footer > span {
    padding : 0 10px;
}



.search-content-title {
    padding : 50px 0;
    margin: 0;
}

.search-sort {
    padding : 10px;
    text-align: right;
}

.search-page {
    text-align: center;
    padding : 50px 0;
}



.search-wr-list-hidden {
    display: none !important;
}

.no-search-data {
    position: relative;
    padding : 10vw;
}
.no-search-data > span {
    position: absolute;
    top : 50%;
    left : 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
}




.no-login-search {
    position: absolute;
    top : 20%;
    left : 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 30vw;
    height: 10vw;
}
.no-login-search > span {
    position: absolute;
    top : 20%;
    left : 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 0.8vw;
    width: 30vw;
    text-shadow: 2px -2px 1px #ff6969;
    text-align: center;
    filter: blur(10px);

    animation:showhide 5s 2s infinite alternate;
    -webkit-animation:showhide 5s infinite alternate;
    -moz-animation:showhide 5s infinite alternate;
    -o-animation:showhide 5s infinite alternate;
    -ms-animation:showhide 5s infinite alternate;

}


@keyframes showhide {
    0% {
        filter: blur(10px);
    }
    30% {
        filter: blur(0px);
    }
    90% {
        filter: blur(0px);
    }
    100% {
        filter: blur(10px);
    }
}



.search-cate {

}

.search-cate h3 {
    color : #333 !important;
    cursor: initial;
}
.search-cate h3::after {
    content: '';
}
.search-cate h3:hover {
    background : none;
}

.search-cate ul {}
.search-cate ul li {
    border-radius: .5vw;
    display: inline-block;
    margin-bottom: 0.1vw;
}
.search-cate ul li a{
    border: 1px solid #99233c;
    border-radius: .5vw;
    padding : .5vw 1vw;
}


.recommend {

}

.recommend h3 {
    color : #333 !important;
    cursor: initial;
}
.recommend h3::after {
    content: '';
}
.recommend h3:hover {
    background : none;
}

.recommend ul {}
.recommend ul li {
    display: flex;
    border-radius: .5vw;
    padding : 0.5vw;
}
.recommend ul li > div:nth-child(1) {
    flex : 1;
}
.recommend ul li > div:nth-child(1) > div {
    display: flex;
}
.recommend ul li > div:nth-child(1) > div > span {
}

.recommend ul li > div:nth-child(1) > div:nth-child(1) {
}
.recommend ul li > div:nth-child(1) > div:nth-child(1) > span {
    font-size: .9vw;
    font-weight: 600;
    letter-spacing: -.08vw;
    padding : 0vw .5vw;
}
.recommend ul li > div:nth-child(1) > div:nth-child(1) > span:nth-child(1){
    color : #bb1338;
    font-size: 0.7vw;
}
.recommend ul li > div:nth-child(1) > div:nth-child(2) {
    text-align: right;
}
.recommend ul li > div:nth-child(1) > div:nth-child(2) > span {
    font-size: 0.8vw;
    padding : .5vw;
}


.recommend ul li > div:nth-child(1) > div:nth-child(2) > span.active {
    color : white;
    text-shadow: 1px 1px 1px #333;
}


.s-banner {
    width: 100%;
}


.s-cate-txt {
    font-size: 13px;
    margin-bottom: 3px;
}
.s-cate-txt > a{
    padding : 5px 15px !important;
}



.d-news {
    padding : 15px 20px;
}
.d-news-cate {
    position: relative;
    font-size: 12px;
}
.d-news-cate > span:nth-child(3){
    position: absolute;
    right: 0;
}

.d-news-title {
    font-size: 15px;
    display: flex;
    flex-direction: column;
}

.d-news-title span {
    flex : 1;
    padding : 5px;
}
.d-news-title span:nth-child(1){
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
}

.d-news-title span:nth-child(1):hover {
    color: #99233c;
}

.d-news-title span:nth-child(1):active {
    color: #bb1338;
}


@media (max-width: 576px) {
    .search-engine {
        display: none !important;
    }    
}