/* 匯入 共用案例列表 css*/
@import url(../style_case/style_case_list.css);

.inbanner{
	display: none;
}



/* -------------------------------------------------------- */
/* case_info：無詳細文案                  */
/* -------------------------------------------------------- */


.pageContent{
    position: relative;
    overflow: unset;
	padding: 0;
    margin-bottom: clamp(3.226rem, 5.21vw, 6.25rem);
}


.right_contentBg{
    display: flex;
    flex-direction: column;
    row-gap: clamp(3.226rem, 5.21vw, 6.25rem);
}


/* -------------------------------------------------------- */
/* case_info：案例內頁頂部左圖右文滾動區塊                   */
/* -------------------------------------------------------- */

.case_info_bg {
    width: 100%;
    max-width: 71.25rem;
    margin: 0 auto;
}

.case_info_inner {
    display: flex;
    align-items: flex-start;
    width: 100%;
    flex-direction: column;
    row-gap: clamp(1.548rem, 2.5vw, 3rem);
}


/* 左：截圖滾動欄 */

.case_info_img_area {
    /* flex: 0 0 60%; */
    /* width: 60%; */
}

.case_info_img_area img {
    display: block;
    width: 100%;
}


/* 右：黏性資訊欄 */

.case_info_content_area {
    /* flex: 0 0 40%; */
    /* width: 40%; */
    /* position: sticky; */
    /* top: 5rem; */
    /* max-height: 100vh; */
    /* overflow-y: auto; */
    width: 100%;
}
.case_info_content_area::-webkit-scrollbar {/*滾動條整體樣式*/
    width: 0.125rem;     /*高寬分別對應橫豎滾動條的尺寸*/
    height: 0.125rem; 
}
.case_info_content_area::-webkit-scrollbar-thumb {/*滾動條裡面小方塊*/
    border-radius: 0.125rem; 
    /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
    background: var(--primary_color);
    background: #fff0;
    /*background: #fff0; */
    /* background-image: linear-gradient(to top, #afafaf 0%, #e5e5e5 100%);		 */
}
.case_info_content_area::-webkit-scrollbar-track {/*滾動條裡面軌道*/
    /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
    border-radius: 0.125rem; 
    background: #fff0;
    /* background: #EDEDED; */
}	




.case_info_content {
    /* padding: clamp(1.548rem, 2.5vw, 3rem) 0; */
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(0.774rem, 1.25vw, 1.5rem);
}



	.case_info_content{
		/* padding: 30px; */
		/* width: 80%; */
		/* margin: 0 auto; */
		/* overflow-x: hidden;
		overflow-y: auto; */
		/* padding-left: 90px; */
		justify-content: center;
		align-items: center;
	}




.case_info_content  .btn_area{
    margin-top: 0;
    padding-top: 0;
    justify-content:unset;
}









/* Tags */

.case_info_tag_area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.case_info_tag {
    margin: 0;
    padding: 0;
    list-style-type : none;
    display: block;

    padding: 0.25rem 0.875rem;
    border: 1px solid var(--primary_color);
    color: var(--primary_color);
    font-size: 0.875rem;
    border-radius: 2rem;
    line-height: 1.6;
}


/* 標題 */

.case_info_title {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color      : inherit;

    font-size: clamp(1.375rem, 2.5vw, 2rem);
    color: var(--dark_color_sec);
    line-height: 1.3;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    gap: .3125rem;
}
.case_info_title .sub_title{
    margin: 0;
    padding: 0;
    font-size: 1.1875rem;
    font-weight: normal;
    line-height: 1.5;
    color      : var(--dark_color);
}
.case_info_title .title{
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color      : inherit;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.323rem, 0.52vw, 0.625rem);
}


    .case_info_title .title .icon{
        
    }
        .case_info_title .title .icon a {
            background: linear-gradient(158deg, rgb(255, 161, 44) 0%, rgb(245, 64, 11) 100%);
            box-shadow: 0 0.5rem 1.5rem rgba(227, 6, 19, 0.42), 0 0.125rem 0.375rem rgba(227, 6, 19, 0.3);          
            transition: var(--transition-data);                        
            color: #fff;                        
            aspect-ratio: 1;                        
            width: clamp(1.548rem, 2.5vw, 3rem);                        
            display: flex;                        
            align-items: center;                        
            justify-content: center;                        
            border-radius: 50%; 
        }
            .case_info_title .title .icon a i{
                font-size: calc(clamp(1.0625rem, 0.66rem + 0.78vw, 1.625rem) * 0.9);
            }

        .case_info_title .title .icon a:hover {
            transition: var(--transition-data);
            transform: scale(0.8);
        }
        .case_info_title .title .websiteName {
            text-decoration: none;
            margin: 0;
            padding: 0;
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            color      : inherit;
        }
        .case_info_title .title a.websiteName:hover {
            color: var(--primary_color);
            transition: var(--transition-data);        
        }

.case_info_content .text_area{
    display: flex;
    flex-direction: column;
    /* gap: inherit; */
    line-height: 2.5;
}



/* 說明文字 */

.case_info_desc {
    color: var(--dark_color);
    line-height: 1.8;
    font-size: 1rem;
}


.case_info_desc2 {
    margin: 0;
    padding: 0;
    list-style-type : none;
    display: flex;
    flex-direction: column;
    row-gap: clamp(1.613rem, 2.6vw, 3.125rem);
}

    .case_info_desc2 .case_info_li{
         margin: 0;
        padding: 0;
        list-style-type : none;
        display: block;
    }
    .case_info_desc2 .title-box{        
        font-size: clamp(0.95rem, 0.78rem + 0.46vw, 1.25rem);                
        font-weight: 700;
    }

    .case_info_desc2 :not(.title-box){        
        margin: 0;
        padding: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        color      : inherit;
    }








/* 資訊列表 */

.case_info_meta {
    border-top: 1px solid #e8e8e8;
}

.case_info_meta_item {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid #e8e8e8;
}

.case_info_meta_item dt {
    flex: 0 0 4rem;
    color: var(--dark_color_third);
    font-size: 0.875rem;
    line-height: 1.6;
}

.case_info_meta_item dd {
    color: var(--dark_color);
    font-size: 0.875rem;
    line-height: 1.6;
}


.case_info_tag_meta_item {

}
    .case_info_tag_meta_item dd{
        display: inline-flex;
        flex-wrap: wrap;
        gap: clamp(0.323rem, 0.52vw, 0.625rem);
    }
        .case_info_tag_meta_item a{
            /* display: flex; */
            text-decoration: none;
            margin: 0;
            padding: 0;
            list-style-type: none;
            display: inline-flex;
            padding: 0.25rem 0.875rem;
            border: 1px solid var(--primary_color);
            color: var(--primary_color);
            font-size: 0.875rem;
            border-radius: 2rem;
            line-height: 1.6;
            transition: var(--transition-data);
        }
        .case_info_tag_meta_item a:hover{
           opacity: 0.7;
        }



/* 前往按鈕 */

.case_info_link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background-color: var(--primary_color);
    color: #fff;
    border-radius: 2rem;
    font-size: 0.9375rem;
    transition: var(--transition-data);
    align-self: flex-start;
}

.case_info_link:hover {
    background-color: var(--fourth_color);
    color: #fff;
}

@media (max-width: 990px) {

	.case_info_bg {
	    /* width: 100%; */
	    max-width: unset;
	    /* margin: 0 auto; */
	}
    .case_info_inner {
        /* flex-direction: column-reverse; */
    }

    .case_info_img_area,
    .case_info_content_area {
        flex: unset;
        width: 100%;
    }

    .case_info_content_area {
        position: static;
        max-height: unset;
        overflow-y: unset;
    }

    .case_info_content {
        padding: 2rem 1.5rem;
        padding: 0 1.5rem;
    }
	
	.case_info_title {
	    width: 90%;
	    margin-left: auto;
	    margin-right: auto;
	}
		
}