body,html{
	padding: 0;
	margin: 0;
	width: 100vw;
	height: 100vh;
}

*{
    word-break: break-word !important;
}

*:has(>.converter_to){
    word-spacing: -0.1em;
}

header{
    position: sticky;
    top: 0;
    z-index: 1;
}

:root{
	--primaryColor: #409EFF;
	--shadowColor: #94a3d3;
	--borderColor: #909399;
	--backgroungColor: #efefef;
	--backgroungColor1: #3d3d3d;
	--hoverBackgroungColor: #eaeaea;
	--hoverBackgroungColor1: #4d4d4d;
	--defFontColor: #000;
	--bodyHeight: calc(100vh - 5.5em);
}

.select_options::-webkit-scrollbar,
.lanuage_select_scroll::-webkit-scrollbar,
.option_scroll::-webkit-scrollbar {
	width: 0.2em;
	height: 0.2em;
}

.select_options::-webkit-scrollbar-thumb,
.lanuage_select_scroll::-webkit-scrollbar-thumb,
.option_scroll::-webkit-scrollbar-thumb {
	border-radius: 10em;
	background-color: var(--primaryColor);
}

#app{
	width: 100vw;
	height: calc(100vh - 5em);
	color: var(--defFontColor);
	overflow: hidden;
	overflow-y: auto;
}

span.sublingDivAutoHeight {
	background-color: var(--hoverBackgroungColor);
    margin-bottom: 1em;
}

.sublingDivAutoHeight~div{
	height: auto; 
}
.sublingDivAutoHeight~.format_to_format_menu_content{
	height: calc(100vh - 3.1em);
}

.format_to_format_slot{
	height: 5em;
	display: none;
	width: 100%;
}

.search_blog_input {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 7em;
    margin: 3em 0 1em;
    height: 4em;
    width: 40em;
    border: 1px solid var(--primaryColor);
    border-radius: 0.5em;
    position: relative;
    left: calc(50% + 2em);
    transform: translateX(-50%);
    justify-items: center;
    font-size: 1em;
}

.searchTitle {
    position: absolute;
    left: -1em;
    top: 50%;
    transform: translate(-100%, -50%);
    font-size: 1.6em;
}

.search_blog_input input {
    width: 100%;
    height: 2.5em;
    border: none;
    outline: none;
    padding: 0em 0.5em;
    padding-right: 0;
    box-sizing: border-box;
    font-size: 1.6em;
    font-weight: 100;
    background: none;
}

.search_blog_input svg {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1em;
    background: var(--primaryColor);
    cursor: pointer;
    display: block;
}

.search_blog_input svg path{
    fill: #fff;
}

.blogs_content {
    width: 100%;
    min-height: calc(100vh - 12.8em - 2px);
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 2em;
    position: relative;
}

.blogs_empty_tips {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 3em;
    transform: translate(-50%, -50%);
    color: var(--borderColor);
    font-weight: 700;
}

.blogs {
    display: grid;
    grid-template: repeat(3, minmax(0, auto)) / repeat(3, 33.33%);
    box-sizing: border-box;
    padding: 0 5%;
    font-size: 1.6em;
    justify-items: center;
}

.blog {
    width: 88%;
    margin-top: calc(78vw / 3 * 0.11);
    cursor: pointer;
    overflow: hidden;
    border-radius: 1em;
    box-shadow: 0 0 20px #f3f3f3;
}

.blog a {
    width: 100%;
    height: 100%;
    display: block;
}

.page_footer_item_content a,
.format_to_format_item_option a{
    width: 100%;
    text-align: left;
}

a {
    text-decoration: none;
    display: inline-block;
    pointer-events: all !important;
}

a:link {
    color: inherit;
}
a:visited {
    color: inherit;
}
a:hover {
    color: inherit;
}

.blog_cover {
    width: 100%;
    height: calc(90vw / 3 * 0.88 / (2 / 1.125));
    overflow: hidden;
}

.blog_cover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    border-radius: 1em;
    transition: width .7s cubic-bezier(0.47, 1.07, 0.45, 0.98), 
        height .7s cubic-bezier(0.47, 1.07, 0.45, 0.98), 
        left .7s cubic-bezier(0.47, 1.07, 0.45, 0.98), 
        top .7s cubic-bezier(0.47, 1.07, 0.45, 0.98);
}

.blog:hover .blog_cover img{
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
}

.blog_title_1 {
    font-weight: 700;
    font-size: 1.8em;
    padding: 1em;
}

.blog_title_2 {
    font-size: 1em;
    padding: 0 1.8em 2em;
}

.pagination{
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
    padding: 1em 0;
    width: 100%;
}

.categorys {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    margin-top: 3em;
    font-size: 1.5em;
    column-gap: 3em;
    row-gap: 0.5em;
    max-width: 90%;
    white-space: nowrap;
    flex-wrap: wrap;
}

.categorys_title {
    font-weight: 700;
}

.categorys>*[class^="category"] {
    cursor: pointer;
}

.categorys>*[class^="category"]:hover {
    text-decoration: underline;
}

.categorys>*[class$="_active"] {
    color: var(--el-color-primary);
    font-weight: 700;
}

@media screen and (max-width:990px){
	.format_to_format{
		display: none;
	}
	
	.format_to_format_slot,
	.format_to_format_menu_h5{
		display: block;
	}
	
	.select_format_convert {
	    width: 95%;
	    margin-left: 2.5%;
	    padding: 1em;
	}
	
	.uploadFile,
	.uploadTips,
	.image_to_model_btn_con,
	.view_module_select_tips,
	.convert_resource_show,
	.advertisement_block,
	#input_format,
	.convert_format_tips {
	    width: 95%;
	    margin-left: 2.5%;
	}
	
	.site_tips {
	    width: 95%;
	}
	
	.page_footer_item {
	    margin-bottom: 2.5em;
	}

    .search_project_input input {
        width: 15em;
    }

    .blogs {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .blog {
        width: 100%;
        margin-top: 2em;
    }

    .blog_cover {
        height: calc(78vw / (2 / 1.125));
    }

    .search_blog_input {
        width: 70%;
    }

    .searchTitle {
        width: 2em;
    }
}