:root {

	/* Brand color */
    --OKTech_web: #111; 
    --peach_app: #C33EC0; 
    --gallery_app: #754043; 
    --petder_app: #DB2F1E; 
    --blog_web: #d7bf4f; 
    --teachifyOne_app: #0169FF; 
    --learning_platform: #3A6351;
    --primary-color: #0D0E0D;
    --base_white: #ffffff;

    /* MV Labels color */
    --peach_labels: #c9abd3; 
    --gallery_labels: #edbfbf; 
    --petder_labels: #cacaca; 
    --blog_labels: #f9ea97; 
    --teachifyOne_labels: #68a5ff; 
    --OKTech_labels:#111; 
    --learning_labels: #a7d1ba; 
   
   
}


.peachApp{
    color: var(--peach_app);
}

.galleryApp{
    color: var(--gallery_app);
}

.blogWeb{
    color: var(--blog_web);
}

.coursePlatform{
    color: var(--learning_platform);
}

.petderApp{
    color: var(--petder_app);
}

.teachifyOneApp{
    color: var(--teachifyOne_app);
}

.OKTechWeb{
    color: var(--OKTech_web);
}


/* // MV Label Color//  */
.wrok_labels.galleryApp span{

    background-color: var(--gallery_labels);

}

.wrok_labels.blogWeb span{

    background-color: var(--blog_labels);
    color: var(--primary-color);

}

.wrok_labels.teachifyOneApp span{

    background-color: var(--teachifyOne_labels);
    color: var(--primary-color);

}

.wrok_labels.OKTechWeb span{

    background-color: var(--OKTech_labels);
    color: var(--base_white);

}

.wrok_labels.petderApp span{

    background-color: var(--petder_labels);
    color: var(--primary-color);

}

.wrok_labels.coursePlatform span{

    background-color: var(--learning_labels);

}



.list_dec.peachApp{
    background-color: var(--peach_app);
}

.list_dec.galleryApp{
    background-color: var(--gallery_app);
}

.list_dec.blogWeb{
    background-color: var(--blog_web);
}

.list_dec.petderApp{
    background-color: var(--petder_app);
}

.list_dec.coursePlatform{
    background-color: var(--learning_platform);
}

.list_dec.teachifyOneApp{
    background-color: var(--teachifyOne_app);
}

.list_dec.OKTechWeb{
    background-color: var(--OKTech_web);
}




/*-------------------------*/
/*  $Work Page top Intro
---------------------------*/

.work.section.container {
    display: inline-flex;
    height: 100%;
    margin-top: 220px;
    /* padding: 0px 80px; */
    width: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;

    /* left: 50%;
    transform: translateX(-50%); */
}


.work .hero_content {
    width: 50%;
    margin-right: 160px;
    margin-top: -50px;
    z-index: 5;
}


.work_intro h5{  
   margin-top: 32px;
   margin-bottom: 16px;
   white-space: nowrap;

}

.wrok_labels span {
    padding: 8px 12px;
    line-height: 44px;
    border-radius: 50px;
    white-space: nowrap;
}

.work_intro ul li{
    list-style: disc;
    margin-left: 12px;
    padding: 8px 0px;
    text-align: left;
}


.work_pageImg{
    width: 50%;
}

.work_pageImg img.work_img {
    width: 100%;
}

.portotype_block img.work_img {
    width: 50%;
    height: 100%;
}

.work_img.portotype_gif {
    border: 4px solid var(--primary-color);
    border-radius: 32px;
    padding: 0px;
}





@media (max-width: 1440px){
	.work.section.container{
        padding: 0px 80px;
    }

    .work-section.container {
        padding: 0px 80px;
    }

    .next_work_section.container{
        padding: 0px 80px;
    }

}



@media (min-width: 960px) and (max-width: 1700px){
    .work.section.container{
        margin-top: 240px;
    }
}


@media (max-width: 960px){
    .work.section.container {
        margin-top: -280px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        align-items: center;
    }

    .work .hero_content {
        width: 100%;
        margin-right: unset;
        margin-top: unset;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
    }
    
    .work_intro h2 {
        font-size: 32px;
        margin: 8px 0px 24px 0px;
    }

    .work_intro h5 {
        margin-top: 8px;
        font-size: 16px;
    }


    .work_intro ul{
        margin-bottom: 40px;

    }

    .work_intro ul li{
        font-size: 14px;
    }

    .work_pageImg {
        width: 100%;
    }

    .work_pageImg img.work_img {
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 0px;
    }
    

}

@media (max-width: 768px){

    .work.section.container {
        padding: 0px 16px;
        margin-top: -160px;
    }


    .work .hero_content {
        margin-bottom: 32px;
    }
}

@media (max-width: 480px){

    .mv_bg{
        min-height: 100vh;
    }

    .work.section.container {
        margin-top: -40px;
    }

    .work.section.container span{
        font-size: 12px;

    }

    .work_intro h2 {
        font-size: 32px;
        margin: 8px 0px 16px 0px;

    }

    .work_intro h5 {
        margin-top: 0px;
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 4px;
    }

    .wrok_labels span {
        line-height: 40px;
    }

    
    .work_intro ul{
        margin-bottom: 24px;

    }


}




/*-------------------------*/
/* $ Work Content
---------------------------*/


.work-section {
    display: flex;
    margin: 40px 0px 0px 0px;
}

.sidebar {
    width: 140px;
    margin-top: 160px;
}

.sidebar.fixed {
    position: sticky;
    height: 100%;
    top: 160px;
   
}

.menu {
    list-style: none;
    padding: 0;
}

.menu-item a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: var(--gray500);
}

.menu-item.active a {
    color: var(--primary-color);
}

@media (max-width: 960px) {
    .sidebar, .sidebar.fixed {
        display: none;
        position: static; /* 小屏幕時不固定 sidebar */
        width: 10%;
        margin-top: 0px;
    }

}


.work-section p {
    margin-bottom: 0;
}

img.work_img {
    padding-top: 16px;
}

img.mockup_img {
    width: 100%;
}

.work-section .content {
    width: 90%;
    float: right; /* 可以使用浮動，或者flex布局 */
    margin-left: 140px;
    overflow: auto;
}

.content-list{
    padding-top: 160px;
}

.content-list.mockup_link{
    display: block;

}

.mockup_link_Indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.content-list h3, .pointData h3{
    width: 160px;
    font-weight: 800;
    font-size: 32px;
    margin: 0;
    white-space: nowrap;  
}    

.content-list h3{
    margin-bottom: 40px;
   
} 

.pointData h3{
    margin-bottom: 4px;
   
} 

.pointData p{
    color: var(--gray700);
}



.prototype-link, .jump-link {
    display: inline-flex;
    align-items: center;
    column-gap: 4px;
    text-decoration: none;
    transition: all 0.5s; 
}

.prototype-link{
    padding: 5px 10px;
}

.prototype-link:hover {
    opacity: 0.5;
}

.portotype_block .content-subtitle {
    width: 80%;
}

.block.portotype_block {
    padding: 80px;
    background-color: var(--gray300);
    border-radius: 16px;
    border: 1px solid var(--gray500);
}


.jump-link{
    margin-top: 24px;
    padding: 8px 0px;
    /* border-bottom: 1px solid; */
}

.jump-link:hover {
    opacity: 0.5;
}

.block{
    margin-bottom: 80px;
}

.content_block{
    margin-bottom: 48px;
}


.two_col_full, .two_col_half, .three_col_full, .three_col_half{
    display: inline-flex;
    flex-direction: row-reverse;
    
}

.two_col_full{
    column-gap: 100px;
    justify-content: space-between;
    width: 100%;
}

.three_col_full{
    column-gap: 80px;
}

.block.content_img .three_col_full{
    margin-bottom: 40px;

}

.two_col_half, .three_col_half{
    column-gap: 40px;
    justify-content: space-between;
}


.three_col_half{
    margin-bottom: 80px;
}

.two_col_left h5{
    margin-bottom: 12px;
}

.two_col_left .hori_layout{
    margin-top: 12px;
}

.two_col_half img.about_img{
    width: 30%;
}


.content-list .block:last-child {
    margin-bottom: 0;
}




.content-list:last-child {
    padding-bottom: 120px;
    border-bottom:  1px solid var(--gray500);
    margin-bottom: 120px;
}



.block.img_block img{
    width: 100%;
    margin-top: 40px;
}

.block.img_block.mt_0 img{
    margin-top: 0px;
}

.block.img_block.img_small img{
    width: 50%;
}

.content-subtitle{
    display: block;
    align-items: baseline;;
}

.content-subtitle h5{
    font-weight: 800;
    margin-bottom: 16px;
    margin-top: 0px;
}

.content-subtitle img {
    width: 16px;
    height: 16px;
}

.content-subtitle.subtitle_icon{
    display: inline-flex;
}

.content-subtitle.subtitle_icon img{
    display: inline-flex;
    margin-right: 8px;
}

.content-subtitle.point_text p{
    margin-bottom: 40px;
}

.content-subtitle.point_text.point_lists p{
    margin-bottom: 16px;
}

span.material-symbols-outlined{
    font-size: 20px;
}

.outline_block .hori_layout .vertical_wrap{
    padding: 24px 16px;
    border-radius: 16px;
}

.vertical_wrap.teachifyOneApp{
    border: 1px solid var(--teachifyOne_app);
}

.vertical_wrap.OKTechWeb{
    border: 1px solid var(--OKTech_web);
}

.outline_block.filling .hori_layout .vertical_wrap{
    background-color: var(--blueBG);
}

.outline_block.outline_block_title h5{
    color: var(--teachifyOne_app);
}

.hori_layout{
    display: flex;
    margin-top: 40px;
    column-gap: 40px;
}

.two_col_half .hori_layout{
    display: inline-flex;
    column-gap: 20px;
    margin-bottom: 24px;
    width: 100%;
}

.three_col_full .hori_layout {
    display: flex;
    column-gap: 40px;
}

.two_col_half img {
    width: 50%;
    height: 100%;
}



.two_col_half li.hightL_number{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0px;
    display: grid;
    row-gap: 24px;
    width: 100%;
    border: none;
}

.two_col_half li.hightL_number.teachifyOneApp{
    background: var(--teachifyOne_app);
}

.two_col_half li.hightL_number.OKTechWeb{
    background: var(--grayBG2);
}


.two_col_half li.hightL_number h3{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0px;
    color: var(--base_white)
}

.three_col_half .hori_layout{
    display: inline-flex;
    column-gap: 20px;
    margin-bottom: 24px;
    width: 100%;
}

.three_col_half img {
    width: 30%;
}

.three_col_half li.vertical_wrap span{
    margin-bottom: 0px;
}

.hori_Nr_Dec{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-weight: 700;
}

.hori_Nr_Dec.hori_align_top {
    align-items: start;
}

.list_dec {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    border-radius: 50%;
    padding: 16px;
    width: 32px;
    height: 32px;
    color: var(--base_white);
    font-size: 24px;
    font-weight: 600;
    margin-right: 8px;
}

.hori_Nr_Dec .list_dec {
    margin-right: 8px;
}

.hori_layout .list p{
    margin-left: 32px;
    display: inline-flex;
}


/* 列表項目卡片設計 */
.list {
    width: 100%;                  /* 固定寬度 */
    display: flex;
    flex-direction: column;
}

.list_title {
    display: ruby;
}



/* $ parent element horizontal, but innter list vertical layout */

li.vertical_wrap{
    color: var(--primary-color);
}

li.vertical_wrap.vertical_halfWidth{
    width: 50%;
}

li.vertical_wrap.vertical_halfWidth .inner_lists li {
    margin-left: 40px;
}

li.vertical_wrap span{
    font-weight: 600;
    line-height: 200%;
    margin-bottom: 24px;
}

.three_col_half li.vertical_wrap span, .three_col_full li.vertical_wrap span{
    margin-bottom: 0px;
}

.vertical_wrap .inner_lists li{
    list-style: disc;
    line-height: 200%;
    margin-left: 16px;
    margin-bottom: 0px;
}

/* $ parent element ul is vertical layout */

.lists {
    margin-bottom: 40px;
}

.verticle_lists{
    display: block;
}

.vertical_list_title {
    display: flex;
    align-items: baseline;
}

.verticle_lists .verticle_li{
    margin-top: 40px;
}

.verticle_li p{
    margin-left: 44px;
}

.point_text.point_lists li {
    color: var(--primary-color);
    line-height: 200%;
    margin-bottom: 12px;
}

.lists ul li.list {
    display: flex;
    margin-top: 24px;
}


.point_text li {
    list-style: disc;
    margin-left: 12px;
}

.point_text li span{
    font-weight: 600;
}

.text_link_btn {
    font-size: 16px;
    font-weight: 700;
    
}

.block.mockup_link_Indicator h3 {
    white-space: nowrap;
}

.sp {
    display: none;
}


img.work_img.img_100 {
        width: 100%;
}


@media (max-width: 960px) {

    .work-section.container {
        padding: 0px;
        margin: 0px 24px;
    }

    .work-section .content {
        width: 100%;
        margin-left: 0; /* 小屏幕時內容沒有左邊距 */
    }

    .content-list {
        column-gap: 80px;
        padding-top: 80px;
        flex-direction: column;
    }

    .content-list:last-child {
        padding-bottom: 120px;
        margin-bottom: 40px;
    }

    .content-list .content-title{
        margin-bottom: 20px;
        white-space: nowrap;
        
    }

    .next_work_section.container {
        padding: 0px 24px;
    }
    
}

@media (max-width: 768px){

    .content-list h3{
        width: 100%;
        white-space: normal;  
    }  

    .hori_layout {
        display: flex;
        margin-top: 24px;
        row-gap: 24px;
        flex-direction: column;
    }

    .hori_layout.pointData {
        flex-direction: row;
    }

    .two_col_full, .two_col_half, .three_col_full, .three_col_half{
        display: block;
        
    }

    .two_col_half img{
        width: 100%;
        margin-bottom: 32px;
    }

    .two_col_half img.about_img {
        width: 100%;
    }

    .three_col_half img {
        width: 100%;
        margin-bottom: 32px;
    }

    .filling li.vertical_wrap.vertical_halfWidth {
        width: 100%;
    }

    .block.img_block img {
        margin-top: 0px;
    }
    img.work_img {
        padding-top: 0px;
    }

    .block {
        margin-bottom: 40px;
    }

    .content_block{
    margin-bottom: 24px;
    }

    .block.img_block p {
        margin-bottom: 32px;
    }

    img.work_img.consequent_img {
        margin-bottom: 24px;
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
    
    
    
    /* portotype Block */
    
    .block.portotype_block {
        padding: 40px;
    }

    .portotype_block .content-subtitle {
        width: 100%;
    }

    .portotype_frame {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 40px;
    }

    .portotype_block img.work_img {
        width: 100%;
        height: 100%;
    }

}

@media (max-width: 480px) {

    .work-section.container{
        margin: 0px 16px;
    } 

    #outcome.content-list h3{
        margin-bottom: 4px;
    }

    #outcome .two_col_half img {
        margin-bottom: 24px;
    }

    #outcome .hori_layout {
        margin-top: 0px;
    }

    .content-list {
        column-gap: 40px;
        padding-top: 40px;
        flex-direction: column;
    }

    .content-list img.work_img {
        width: 100%;
        padding-top: 16px;
    }

    .content-list h3{
        font-size: 24px;
        margin-bottom: 20px;
    }

    .content-subtitle h5{
        font-size: 16px;
        margin-bottom: 8px;
    }

    .content-list p{
        font-size: 14px;
        line-height: 180%;
    }


    .block {
        margin-bottom: 32px;
    }

    .hori_Nr_Dec{
        margin-bottom: 0px;
    }

    .list_dec {
        padding: 12px;
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    li.vertical_wrap.vertical_halfWidth {
        width: 100%;
    }

    .point_text li {
        margin-left: 16px;
    }

    .vertical_wrap .inner_lists li{
        margin-left: 16px;
    }

    .content-list.mockup_link span {
        white-space: nowrap;
    }

    
}


/*-------------------------*/
/*  $Next project Link
---------------------------*/


.next_work_section.container {
    display: flex;
    justify-content: end;
}

.next-project {
    padding: 20px;
    text-align: right;
    margin-bottom: 160px;
}

.next-project-link {
    color: var(--primary-color);
    font-size: 32px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: end;
    transition: all 0.5s;
}

.next-project-link:hover{
    color: var(--gray700);
}

.next-project-link .material-symbols-outlined {
    transform: rotate(360deg); /* Left arrow */
}

.next-project-title {
    color: var(--gray900);
    font-size: 20px;
    margin-top: 8px;
}

.next-project-title span {
    font-weight: bold;
}


@media (max-width: 960px){
    .next-project {
        margin-bottom: 80px;
    }

}

@media (max-width: 480px){

    .next_work_section.container {
        justify-content: center;
        align-items: center;
    }

    .next-project {
        margin-bottom: 40px;
    }

    .next-project-link{
        font-size: 24px;
    }

    .next-project-title {
        font-size: 16px;
        margin-top: 4px;
        text-align: center;
    }



}