/*------------------------------------------------------------------
 * 模块：about_us.css
 * 作者：Irene
 * 时间：2022-2-26 12:51
 * 修改：
 *----------------------------------------------------------------*/

/* ---------
 * ---Nav---
 * -------*/
.nav
{
    grid-template-columns: 1fr 3fr;
    justify-items: stretch;
    width:100%;
    height:5.5rem;
    background-color:var(--osky-white);
    padding:0rem 2rem;
}

/*NavLeft*/
.nav_left
{
    height:5.5rem;
}

.nav_left_logo
{
    width:10rem;
    height:5.5rem;
}

/*NavRight*/
.nav_right
{
    justify-content: flex-end;
    height:5.5rem;
    width:100%;
}

.nav_right h5.tel
{
    font-size:1rem;
/*    font-weight:700;*/
}

.nav_right a.contact
{
    font-size:1rem;
/*    font-weight:700;*/
    color:var(--osky-blue);
    margin:0rem 2rem;
}

.nav_right a.login
{
    height:auto;
/*    font-weight:700;*/
    font-size:1rem;
    color:var(--osky-white);
    border:1px solid var(--osky-primary);
    background-color:var(--osky-primary);
    padding:0.5rem 2rem;
    margin-right:2rem;
}
.nav_right a.login:hover
{
    background-color:rgba(238 0 0 / 80%);
}

.nav_right a.try
{
    height:auto;
/*    font-weight:700;*/
    font-size:1rem;
    color:var(--osky-dark);
    border:1px solid var(--osky-dark);
    background-color:transparent;
    padding:0.5rem 2rem;
}

/* ----------
 * ---Main---
 * --------*/
/*MainAbout*/
.main_about
{
    flex-direction: column;
    height:28rem;
    background-image:url(http://www2.oskysoft.com/resources/images/img_products.png);
    background-repeat: no-repeat;
    background-size: cover;
}


/*MainQuickNav*/
.main_quick_nav
{
    position: sticky;
    position: -webkit-sticky;                   /*兼容 -webkit 内核的浏览器*/
    top:0px;                                    /*必须设一个值，否则不生效*/
    z-index:998;
    width:100%;
    height:4.5rem;
    background-color:rgb(255 255 255 / 98%);
    box-shadow: 0 8px 18px 8px rgb(30 32 34 / 12%);
    -webkit-box-shadow: 0 8px 18px -8px rgb(30 32 34 / 12%);
}

.main_quick_nav ul li
{
    text-align:center;
    width:25%;
}

.main_quick_nav ul li a
{
    width:100%;
    padding:1.35rem 0rem;
}

.main_quick_nav ul li a:hover
{
    background-color:var(--osky-light);
}

.main_quick_nav_icon
{
    width:1.5rem;
    height:1.5rem;
    margin-right:0.25rem;
}

/*---------------*/
/*MainContentNews*/
/*---------------*/
.main_content_news
{
    flex-direction: column;
    align-items: center;
    padding-top:7.5rem;
}

.main_content_news h4.title_memo
{
    color:var(--osky-dark);
    margin-top:0.75rem;
}

/******************/
/*NewsBanner_start*/
/******************/
.news_banner
{
    width:100%;
    grid-template-columns: 4fr 3fr;
    align-items: start;
    height:auto;
    background-color:var(--osky-offwhite);
    margin-top:3rem;
}

.news_banner_left
{
    width:100%;
    padding:2rem;
}

.news_banner_left div.logo_box
{
    justify-content: flex-start;
    align-items: flex-start;
}

.news_logo_icon
{
    width:3rem;
    height:3rem;
}

.news_banner_left div.logo_text
{
    line-height:1.2 !important;
    padding-top:0.25rem;
}

.news_banner_left h3.title
{
    line-height:1.4;
    margin-top:1.5rem;
}

.news_banner_left p.memo
{
    width: 100%;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-top:0.75rem;
}

.news_banner_left button.news_button
{
    margin-top:2.5rem;
}

.news_banner_right
{
    width:100%;
    height:24.5rem;
    background-color:var(--osky-brighter);
    object-fit:cover;
}
/****************/
/*NewsBanner_end*/
/****************/

/*NewsList*/
.news_list
{
    width:100%;
    grid-template-columns: repeat(3,1fr);
    align-items: start;
    gap:2rem;
    margin-top:2rem;
}

.news_list_item
{
    box-shadow: 0 8px 24px rgb(30 32 34 / 12%);
}

.news_list_item img
{
    width:100%;
    height:16.8rem;
    object-fit:cover;
}

.news_list_item h4.title
{
    font-weight:700;
    padding:1.5rem 1.5rem 0.75rem 1.5rem;
}

.news_list_item p.memo
{
    width: 100%;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding:0rem 1.5rem;
}

.news_list_item button.item_button
{
    margin:2rem 1.5rem 1.5rem 1.5rem;
}

/*------------------------*/
/*MainContentProductsStart*/
/*------------------------*/
.main_content_products
{
    padding-top:7.5rem;
}

.main_content_products ul
{
    width: 100%;
    padding-top:3rem;
}

.main_content_products ul li a
{
    line-height:4rem;
    padding: 0px 1.5rem;
    margin:0px 1.5rem;
    color: var(--osky-grey);
    border-bottom: 0.375rem solid transparent;
}

.main_content_products ul li a:hover
{
    font-size:1.5rem;
    font-weight:700;
}

.products_nav_active
{
    font-size:1.5rem;
    font-weight:700;
    color:var(--osky-primary) !important;
    border-bottom: 0.375rem solid var(--osky-primary) !important;
}

.products_item
{
    grid-template-columns: repeat(4,1fr);
    justify-items: start;
    align-items: start;
    width:100%;
    gap:3rem;
    margin-top:2rem;
}

.products_item_content
{
    width:100%;
    cursor: pointer;
    padding:1.5rem;
}

.products_item_content:hover
{
    background-color:var(--osky-light);
}

.products_item_content div.logo
{
    justify-content:flex-start;
}

.products_item_content div.logo svg.icon
{
    width:3.5rem;
    margin-left:0.5rem;
}

.products_item_content h4.title
{
    font-weight:700;
    margin-top:0.75rem;
}

.main_content_products button.products_button
{
    font-weight:700;
    color:var(--osky-blue);
    background-color:transparent;
    transition: all 0.2s;
    padding:0rem;
    margin-top:2rem;
}

.main_content_products button.products_button:hover
{
    color:var(--osky-primary);
    background-color:transparent;
}

.main_content_products button.products_button span:after
{
    transition: 0.2s;
}
/*----------------------*/
/*MainContentProductsEnd*/
/*----------------------*/

/*-------------------------*/
/*MainContentSolutionsStart*/
/*-------------------------*/
.main_content_solutions
{
    padding-top:7.5rem;
}

.solutions_item
{
    grid-template-columns: repeat(3,1fr);
    align-items: start;
    width:100%;
}

.solutions_item_unit
{
    text-align:center;
    width:100%;
    border-right:1px solid var(--osky-light);
    padding:0rem 2rem 2.5rem 2rem;
    margin-top:4rem;
}
.solutions_item_unit:nth-child(3n)
{
    border-right:none;
}

.solutions_item_unit p.memo
{
    margin-top:0.75rem;
}

.solutions_item_unit_part
{
    grid-template-columns: repeat(2,1fr);
    margin-top:2rem;
}

.solutions_item_unit_part div.item
{
    flex-direction: column;
    width:100%;
    padding:2rem;
    border-right:1px solid var(--osky-light);
    border-bottom:1px solid var(--osky-light);
}
.solutions_item_unit_part div.item:nth-child(2n)
{
    border-right:none;
}

.solutions_item_unit_part div.item:hover
{
    border-bottom:4px solid var(--osky-primary);
}

.solutions_item_unit_part div.item svg.unit_part_icon
{
    width:4rem;
    height:4rem;
}
/*-----------------------*/
/*MainContentSolutionsEnd*/
/*-----------------------*/

/*------------------------*/
/*MainContentArticalsStart*/
/*------------------------*/
.main_content_articals
{
    margin-top:7.5rem;
}

.main_content_articals h4.memo
{
    margin-top:0.75rem;
}

.articals_item
{
    grid-template-columns: repeat(4,1fr);
    gap:2rem;
    margin-top:3rem;
}

.articals_item a.unit
{
    text-align:center;
    width:100%;
    color:var(--osky-dark);
    border:1px solid var(--osky-grey);
    padding:0.75rem;
}

.articals_item a.unit:hover
{
    color:var(--primary-color);
    text-decoration:underline;
    background-color:var(--light-color);
    cursor:pointer;
}

.main_content_articals button.articals_button
{
    width:auto;
    margin-top:2rem;
}

/*----------------------*/
/*MainContentArticalsEnd*/
/*----------------------*/

/* ------------
 * ---Footer---
 * ----------*/
.footer
{
    width:100%;
    height:auto;
    background-color:var(--osky-brighter);
    margin-top:7.5rem;
}

/*FooterNav*/
.footer_nav
{
    grid-template-columns: 1fr 4fr;
    justify-items: start;
    align-items: start;
    gap:2rem;
    width:100%;
    border-bottom:1px solid var(--osky-light);
}

.footer_nav_left
{
    width:100%;
    margin-top:5.5rem;
    margin-bottom:4rem;
}

.footer_nav_left a svg.logo
{
    width:10rem;
    height:3.5rem;
}

.footer_nav_left div.footer_link
{
    justify-content: flex-start;
    align-items: flex-start;
    margin-top:1rem;
}

.footer_nav_left div.footer_link p.link_text
{
    width:calc( 100% - 2.25rem );
    font-size:0.875rem;
    font-weight:700;
    margin-left:0.75rem;
}

.footer_nav_right
{
    grid-template-columns: repeat(4,1fr);
    justify-items: start;
    align-items: start;
    gap:2rem;
}

.footer_nav_right div.list
{
    margin-top:5.5rem;
    margin-bottom:4rem;
    padding-left:2.5rem;
}

.footer_nav_right div.list h5.title
{
    font-weight:700;
}

.footer_nav_right div.list ul
{
    margin-top:0.75rem;
}

.footer_nav_right div.list ul li a.link
{
    font-size:0.875rem;
    color:var(--osky-grey);
    padding:0.5rem 0px;
}

.footer_nav_right div.list ul li a.link:hover
{
    color:var(--osky-blue);
}

/*FooterTerms*/
.footer_terms
{
    justify-items: stretch;
    width:100%;
    padding-top:3rem;
}

.footer_terms div.left
{
    justify-content: flex-start;
}

.footer_terms div.left ul li a.left_tag
{
    font-size:1rem;
    color:var(--osky-grey);
}

.footer_terms div.right
{
    justify-content: flex-end;
}

.footer_terms div.right ul li a.right_tag
{
    border-radius:4px;
    background-color:rgb(103 119 136 / 12%);
    padding:0.75rem;
    margin-left:0.75rem;
}

/*FooterSearch*/
.footer_search
{
    padding-top:3rem;
    padding-bottom:3rem;
}

.footer_search input.search_input
{
    width:50%;
}

.footer_search div.search_btn
{
    padding:0.75rem;
    background-color:var(--osky-dark);
}

/*FooterBottom*/
.footer_notes
{
    background-color:var(--osky-dark);
}

.footer_notes h6
{
    color:var(--osky-light);
}

.footer_notes h6 a
{
    color:var(--osky-light);
}


/*==================================*/
/* ----------------------------------
/* ---超小型设备（电话，600px 及以下）---
 * --------------------------------*/
/*==================================*/
@media only screen and (max-width: 600px)
{
    
    
}

/*===============================================*/
/* -----------------------------------------------
/* ---小型设备（纵向平板电脑和大型手机，600 像素及以上）---
 * ----------------------------------------------*/
/*===============================================*/
@media only screen and (min-width: 600px)
{
    
    
     
}

/*========================================*/
/* ----------------------------------------
/* ---中型设备（横向平板电脑，720 像素及以上）----
 * ---------------------------------------*/
/*========================================*/
@media only screen and (min-width: 720px)
{
    

}
    

/*============================================*/
/* --------------------------------------------
/* ---大型设备（笔记本电脑/台式机，990px 及以上）----
 * ------------------------------------------*/
/*============================================*/
@media only screen and (min-width: 990px)
{
    
    
}