@font-face {
    font-family: TaipeiSansTC;
    src: url(./TaipeiSansTC.ttf);
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    font-family: 'Montserrat', sans-serif;
    vertical-align: baseline;
    box-sizing: border-box;

}
.deep_background{
    display:flex;
    width:100%;
    z-index: -1000;
    position: fixed;
    top:0px;
            }

.background_line1, .background_line2, .background_line4, .background_line5{
    display:none;
}
.background_line3{
    width:50%;
    height:6602px;
    border-right:1px 
    solid rgba(0,0,0,0.15);
    z-index: -1000; 
}
.protfolio{
    margin: 106px auto 0px auto;
}
.protfolio_header_img{
    padding: 0px 0px 0px;
    text-align:center;
}
.protfolio_title{
    width:320px;
    margin:40px 0px;
}
.protfolio_dots{
    width:250px;
    margin:0px auto;
    margin-bottom: 40px;
}
.protfolio_option_block{
    font-size: 12px;
    margin:10px 48px;
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    padding:0px 0px 0px;
       }

.protfolio_option_block a {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    color:#868686;
 }
.protfolio_option_block a:hover{
    color:#000;
}
.protfolio_option_block li{
    margin-bottom: 20px;
}
.protfolio_option_block li a::after{
    content:'/';
    margin:24px;
        }
.protfolio_option_block li:last-child ::after {
     display:none;
}

.protfolio_option_block li:nth-last-child(3) ::after{
    display: none;
}

.protfolio_img_info{
    display:block;
    max-width: 550px;
    margin: auto;
    text-align: center;
 }
.protfolio_img_tarzan, .protfolio_img_app, .protfolio_img_bk, .protfolio_img_insurance, .protfolio_img_invoice, .protfolio_img_ava{
    margin:0px auto 40px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}
 .protfolio_img_tarzan img, .protfolio_img_app img, .protfolio_img_bk img, .protfolio_img_insurance img, .protfolio_img_invoice img, .protfolio_img_ava img{
     transform: scale(1);
    transition: all .5s ease-out;
}
.protfolio_img_tarzan img:hover , .protfolio_img_app img:hover, .protfolio_img_bk img:hover, .protfolio_img_insurance img:hover, .protfolio_img_invoice img:hover, .protfolio_img_ava img:hover{
    transform: scale(1.1);
}
.protfolio_img_tarzan{
    max-width:320px;
    height:215px;
}

.protfolio_img_app{
    max-width:320px;
    height:330px;
}
.protfolio_img_bk{
    max-width:320px;
    height:295px;
}
.protfolio_img_insurance{
    max-width:320px;
    height:385px;
}
.protfolio_img_invoice{
    max-width:320px;
    height:270px;
}
.protfolio_img_ava{
    max-width:320px;
    height:300px;
}
.protfolio_img_tarzan img{
    max-width:320px;
    height:215px;
}

.protfolio_img_app img{
    max-width:320px;
    height:330px;
}
.protfolio_img_bk img{
    max-width:320px;
    height:295px;
}
.protfolio_img_insurance img{
    max-width:320px;
    height:385px;
}
.protfolio_img_invoice img{
    max-width:320px;
    height:270px;
}
.protfolio_img_ava img{
    max-width:320px;
    height:300px;
}


.img_ontop a{
    position: absolute;
    background: rgb(0,0,0,0.5);
    width:100%;
    height:70px;
    text-decoration: none;
    transform: translateY(100%);
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}
@media screen and (max-width:767px){
.protfolio_img_tarzan a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
    top:155px;
    left:0px;
}
.protfolio_img_app a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
    top:270px;
    left:0px;
            }

.protfolio_img_bk a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
    top:235px;
    left:0px;
            }

.protfolio_img_insurance a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
    top:325px;
    left:0px;
            }

.protfolio_img_invoice a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
    top:210px;
    left:0px;
}

.protfolio_img_ava a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
    top:240px;
    left:0px;
}

}
.protfolio_img_tarzan:hover a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
}

.protfolio_img_app:hover a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
            }

.protfolio_img_bk:hover a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
            }

.protfolio_img_insurance:hover a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
            }

.protfolio_img_invoice:hover a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
            }

.protfolio_img_ava:hover a{
    opacity: 1;
    color: black;
    transform: translateY(0%);
            }

.img_ontop .protfolio_img_info_top{
    font-size: 14px;
    font-family: 'Montserrat', sans-serif, 'Noto Sans TC', sans-serif  ;
    color:#ffffff;
    text-align: left;
    margin:14px 0px 0px 18px;
            }
.img_ontop .protfolio_img_info_bottom{
    font-size: 12px;
    text-align: left;  
    color:#DDDDDD;
    margin:4px 0px 0px 18px;
    text-transform: uppercase;
            }

.contact_footer{
    padding-top: 10px;
}

.contact_us{
    height:480px;
    margin-top:160px;
}
.contact_topic{
    position: relative;
    width: 320px;
    margin: 0 auto;
}
.contact_title{
    width:280px;
    text-align:center;
    position:relative;
    left: 0px;
    right: 0px;
 }

img .contact_circle{
    width:173px;
 }
.contact_circle{
    width:175px;
    position:absolute;
    right:0px;
    top:-70px;
/*
    top:-250px;
    left:450px;
*/
    z-index: 1;
}

.contact_text{
    font-size:12px;
    font-family: Noto Sans TC;
    font-weight: bold; 
    line-height:20px;
    position: relative;
    padding-top:24px;
}

.contact_form{
    margin: 0px auto;
    font-family: Karla;
    font-size: 12px;
    position: relative;
}
.contact_form p{
    margin:35px 0px 10px 0px;
    font-family: 'Montserrat', sans-serif;
}

.contact_name, .contact_email, .contact_story{
    width:100%;
    border: 0;
    outline: 0;
    border-bottom: 1px solid #868686;
    padding-bottom: 10px;
    font-size: 12px;
    background-color: rgb(255,255,255,0);
}

.contact_name, .contact_email, .contact_story,  ::-webkit-input-placeholder{font-family:'Montserrat', sans-serif;}
.contact_name, .contact_email, .contact_story, input::-moz-placeholder{font-family:'Montserrat', sans-serif;}
.contact_name, .contact_email, .contact_story, :-ms-input-placeholder{font-family:'Montserrat', sans-serif;}

.contact_story{
    padding-bottom: 140px;
}
.contact_send{
    font-size: 12px;
    padding:14px 16px;
    background: white;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    border:2px solid black;
    width:128px;
    position: absolute;
    top:350px;
    right:0px;
    margin-top:28px;
    box-shadow: inset 0px 0px 0px #ffffff;
    transition: all .5s;
    -webkit-appearance: none;
}
.contact_send:hover{
    box-shadow: inset 0px -50px 0px #000;
    color:white;
}
.footer{
    margin-top:160px;
    position: relative;
}
.footer_slogan{
    text-align: center;
    position: relative;
}
 .img_office {
    width:75%;
    margin: 0 auto;
    text-align: center;
/*    position:relative;*/
}
.img_office img{
    position:absolute
}
.footer_title{
    font-size:17vw;
    font-family: arial;
    font-weight: 600;
    position: absolute;
    z-index: 1;
    top:80%;
    right:11%;

 }
.footer_subtitle{ 
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 4vw;
    font-weight: bold;
    position:absolute;
    top:112%;
    right:11%;
}
.footer_infor {
    font-size:12px;
    line-height: 28px;
    font-family: 'Montserrat', sans-serif , Noto Sans TC;
    margin:80px auto 114px;
    width:280px;
 }
.copy_right{
    bottom: 0px;
    text-align: center;
    clear:both;
    margin-bottom: 25px;
    position: relative;
}
.copy_right p{
    text-align: center;
    color: darkgrey;
    font-family:'Montserrat', sans-serif;
    font-size: 10px;
}
 .footer_btn_to_top{
                display: block;
                position: fixed;
                width:40px;
                height:40px;
                background: black;
                z-index: 1000;  
                right: 0px;
                bottom: 0px;
                margin: 0px 15px 15px 0px;
            }
            .footer_btn_to_top_arrow{
                position: absolute;
                text-align: center;
            }
            .footer_btn_to_top_arrow::before, .footer_btn_to_top_arrow::after{
                position: absolute;
                content:'';
                top:5px;
                left:10px;
                border-top: 10px transparent dashed;
                border-left: 10px transparent dashed;
                border-right: 10px transparent dashed;
                border-bottom: 10px #fff solid;
            }
            .footer_btn_to_top_arrow::before{
                border-bottom: 10px #fff solid;
            }
            .footer_btn_to_top_arrow::after{
                top:7px;
                border-bottom:10px #000 solid;
            }

      .title1 img{
        width: 233px;
    }
            

@media screen and (min-width:768px) and (max-width:1023px){
    .protfolio_img_tarzan a {

        transform: translateY(-70%);
        opacity: 1;
    }
    .protfolio_img_tarzan:hover a {
        transform: translateY(-70%);
        opacity: 1;
    }
    .protfolio_img_app a {
        transform: translateY(85%);
        opacity: 1;
    }
    .protfolio_img_app:hover a {
        transform: translateY(85%);
        opacity: 1;
    }
    
    .protfolio_img_bk a {
        transform: translateY(35%);
        opacity: 1;
    }
        .protfolio_img_bk:hover a {
        transform: translateY(35%);
        opacity: 1;
    }
    .protfolio_img_insurance a {
        transform: translateY(165%);
        opacity: 1;
    }
    .protfolio_img_insurance:hover a {
        transform: translateY(165%);
        opacity: 1;
    }
    
    .protfolio_img_invoice a {
        transform: translateY(0%);
        opacity: 1;
    } 
    .protfolio_img_invoice:hover a {
        transform: translateY(0%);
        opacity: 1;
    } 
    .protfolio_img_ava a {
        transform: translateY(45%);
        opacity: 1;
    }
    .protfolio_img_ava:hover a {
        transform: translateY(45%);
        opacity: 1;
    }

    
    .footer_btn_to_top{      
        margin-left: 122vw;
        margin-top:124vh;   
            }
   .background_line1, .background_line2, .background_line3
    {
        width:25%;
        height:4198px;
        border-right:1px 
        solid rgba(0,0,0,0.15);
        z-index: -1000; 
        display: block;
   } 
    .background_line4, .background_line5{
        display: none;
    }
    .protfolio{
        max-width:1024px;
        padding: 0px 30px;
        margin: 206px auto 0px auto;
    }
    .protfolio_header{
        width:80%;
        margin:auto;
    }
    .protfolio_header_img{
        height:120px;
        margin: auto;
        padding: 0px 48px;
    }
    .protfolio_title{
        float:left;
        position: relative;
        width:60%;
        margin:40px 0px 0px ;
    }
    .protfolio_dots{
        float:left;
        position: relative;
        width:30%;
        margin:66px 0px 0px 50px;
    }
    .protfolio_option_block{
        clear: both;
        position: relative;
        height:10px;
    }
    .protfolio_option_block li a{
        font-size: 12px;
        text-align: start;
    }
    .protfolio_option_block li a::after{
        content:'/';
        margin:30px;
        }
    
    .protfolio_img_info{
        display: flex;
        flex-wrap: wrap;
        box-sizing: inherit;
        justify-content:space-evenly;
        max-width: 1024px;
     }
    .protfolio_option_block_top{
        float:left;
    }
    .protfolio_option_block_bottom{
        float:left;
    }
    .protfolio_img_info{
        clear:both;
    }
    .protfolio_img_tarzan, .protfolio_img_app, .protfolio_img_bk, .protfolio_img_insurance, .protfolio_img_invoice, .protfolio_img_ava{
        margin-bottom:10px;
    }
    .protfolio_img_tarzan{
        width:320px;
        height:215px;
    }
   
    .protfolio_img_app{
        width:320px;
        height:330px;
    }
    .protfolio_img_bk{
        width:320px;
        height:295px;
    }
    .protfolio_img_insurance{
        width:320px;
        height:385px
    }
    .protfolio_img_invoice{
        width:320px;
        height:270px
    }
    .protfolio_img_ava{
        width:320px;
        height:300px
    }
    .protfolio_img_tarzan img{
        width:320px;
        height:215px;
    }
   
    .protfolio_img_app img{
        width:320px;
        height:330px;
    }
    .protfolio_img_bk img{
        width:320px;
        height:295px;
    }
    .protfolio_img_insurance img{
        width:320px;
        height:385px
    }
    .protfolio_img_invoice img{
        width:320px;
        height:270px
    }
    .protfolio_img_ava img{
        width:320px;
        height:300px
    }
    
    .img_ontop a{
        width:320px;
        height:70px;
        top:200px;
        left:0px;
            }
    .contact_footer{
        max-width:768px;
        padding: 140px 50px 0px 50px;
        overflow: auto;
        margin: 0 auto;
    }
    .contact_us{
        float:right;
        position:relative;
        width:45%;
        padding-left: 24px;
        height:580px;
        margin-top:105px;
    }
     .contact_title{
        width:210px;
    }
    .contact_circle{
        width:167px;
        top: -73px;
        left: 104px;
    }
      .contact_text{
        font-size:10px;
        line-height: 20px;
        margin:0px auto; 
        padding-top: 24px;
    }
    .contact_form{
        font-family: Karla;
        font-size: 14px;
        left:-18px;
        width:280px;
}
     .contact_form p{
        margin:30px 0px 0px 0px;
        font-size: 12px;
    }
     .contact_name, .contact_email, .contact_story{
        width:100%;
        padding-bottom: 10px;
    }
 
    .contact_name, .contact_email, .contact_story,  ::-webkit-input-placeholder{font-size: 12px;}
    .contact_name, .contact_email, .contact_story, input::-moz-placeholder{font-size: 12px;}
    .contact_name, .contact_email, .contact_story, :-ms-input-placeholder{font-size: 12px;}
    .contact_story{
        padding-bottom: 80px;
    }
     .contact_send{
        width:130px;
        font-size: 12px;
        padding: 8px 8px;
        top:262px;
    } 
    .footer{ 
/*        border:1px solid black;*/
    }
    .footer_slogan{
        height:570px;
        position: absolute;
    }
    .img_office{
        width:355px;
    }
    .footer_title{
        width: 60%;
        font-size:75px;
        position: absolute;
        display:block;
        top:197px;
        left:135px;
    }
    .footer_subtitle{
        width:115px;
        font-size: 18px;
        top:292px;
        left:260px;
        position:absolute;
        display: block;
        }
     .footer_infor{
        width:340px;
        font-size:12px;
        top:250px;
        left:100px;
        line-height:36px;
        position: absolute;
        display: block;
    }
       .footer{
        float:left;
        position: relative;
        width:45%;
        margin-top: 80px;
    } 
    
      .title1 img{
        width: 233px;
    }
}


@media screen and (min-width:1024px){
    .title1 img{
        width: 314px;
    }
    .footer_btn_to_top{      
        margin-left: 93vw;
        margin-top:95vh;   
            }
    .background_line1, .background_line2, .background_line3
    {
        width:25%;
        height:4968px;
        border-right:1px 
        solid rgba(0,0,0,0.15);
        z-index: -1000; 
        display: block;
} 
    .background_line4, .background_line5{
        display: none;
    }
    .protfolio{
        max-width:1140px;
        margin:auto;
        padding:0px 50px;
        padding-top: 160px;
    }
    .protfolio_header{
        width:80%;
        margin:auto;
        margin:0px auto;
    }
    .protfolio_header_img{
        height:150px;
        margin: auto;
        padding:0px;
    }
    .protfolio_title{
        float:left;
        position: relative;
        width:50%;
        margin:40px 0px 0px 95px;
    }
    .protfolio_dots{
        float:left;
        position: relative;
        width:25%;
        margin:80px 0px 0px 53px;
    }
    .protfolio_option_block{
        clear: both;
        position: relative;
        height:40px;
        margin:10px 60px;
    }
    .protfolio_option_block li a{
        font-size: 12px;
        text-align: start;
    }
    .protfolio_option_block li a::after{
        content:'/';
        margin:24px;
        }
    
   
    .protfolio_option_block_top{
        float:left;
    }
    .protfolio_option_block_bottom{
        float:left;
    }
    .protfolio_img_info{
        clear:both;
    }
    .protfolio_img_tarzan, .protfolio_img_app, .protfolio_img_bk, .protfolio_img_insurance, .protfolio_img_invoice, .protfolio_img_ava{
        margin-bottom:10px;
        width:390px;
    }
    .protfolio_img_tarzan, .protfolio_img_app, .protfolio_img_bk, .protfolio_img_insurance, .protfolio_img_invoice, .protfolio_img_ava{
        margin:0px auto 40px;
        position: relative;

}
    .protfolio_img_tarzan{
        max-width:388px;
        height:260px;
    }
    .protfolio_img_app{
        max-width:390px;
        height:400px;
    }
    .protfolio_img_bk{
        max-width:390px;
        height:360px;
    }
    .protfolio_img_insurance{
        max-width:390px;
        height:470px
    }
    .protfolio_img_invoice{
        max-width:390px;
        height:330px
    }
    .protfolio_img_ava{
        max-width:390px;
        height:370px
    }
    .protfolio_img_tarzan img{
        max-width:388px;
        height:260px;
    }
    .protfolio_img_app img{
        max-width:390px;
        height:400px;
    }
    .protfolio_img_bk img{
        max-width:390px;
        height:360px;
    }
    .protfolio_img_insurance img{
        max-width:390px;
        height:470px
    }
    .protfolio_img_invoice img{
        max-width:390px;
        height:330px
    }
    .protfolio_img_ava img{
        max-width:390px;
        height:370px
    }
    .protfolio_img_tarzan a {
        transform: translateY(0%);
        opacity: 1;
    }  
    .protfolio_img_app a {
        transform: translateY(0%);
        opacity: 1;
    }
    .protfolio_img_bk a {
        transform: translateY(0%);
    }  
    .protfolio_img_insurance a {
        transform: translateY(0%);   
    }
    .protfolio_img_invoice a {
        transform: translateY(0%);
    }
    .protfolio_img_ava a {
        transform: translateY(0%);
    }
    .img_ontop a{
        bottom: 0px;
        left:0px;
            }
    .contact_footer{
        max-width:1140px;
        margin:0px auto;
        padding:50px;
    }
    .contact_us{
        float:right;
        position:relative;
        width:45%;
        height:650px;
        margin-top:120px;
    }
     .contact_topic{
        height:0px;
    }
     .contact_title{
        width:273px;
        top:0px;
    }
    .contact_circle{
        width:220px;
        top:-92px;
        left:132px;
    }
    .contact_text{
        font-size:12px;
        line-height: 20px;
        top:-10px;
        margin:0px auto; 
        padding:30px 0px;
    }
    .contact_form{
        font-family: Karla;
        font-size: 26px;
        top:83px;
    }
     .contact_form p{
        margin:33px 0px 0px 0px;
        font-size: 14px;
    }
     .contact_name, .contact_email, .contact_story{
        width:100%;
        padding-bottom: 10px;
    }
    .contact_name, .contact_email, .contact_story,  ::-webkit-input-placeholder{font-size: 14px;}
    .contact_name, .contact_email, .contact_story, input::-moz-placeholder{font-size: 14px;}
    .contact_name, .contact_email, .contact_story, :-ms-input-placeholder{font-size: 14px;}
    .contact_story{
        padding-bottom: 90px;
    }
     .contact_send{
        width:125px;
        font-size: 14px;
        padding: 10px 10px;
        top:300px;
        left:195px;
    } 
    .footer{
        float:left;
        position: relative;
        width:45%;
        margin-top:80px;
    }
    .footer_slogan{
        height:570px;
        position: absolute;
    }
    .img_office{
        width:468px;
        margin-left: 20px;
    }
    .footer_title{
        width: 60%;
        font-size:100px;
        position: absolute;
        display:block;
        top:257px;
        left:195px;
    }
    .footer_subtitle{
        width:115px;
        font-size: 18px;
        top:360px;
        left:387px;
        position:absolute;
        display: block;
        }
     .footer_infor{
        width:340px;
        font-size:14px;
        top:332px;
        left:185px;
        line-height:36px;
        position: absolute;
        display: block;
    }

    .copy_right p{
        width:300px;
        font-size: 14px;
        top:700px;
        left:310px;
        margin:  0 auto;
    } 
}
@media screen and (min-width:1440px){
    .background_line1, .background_line2, .background_line3, .background_line4, .background_line5{
        width:16.6666667%;
        height:5558px;
        border-right:1px 
        solid rgba(0,0,0,0.15);
        z-index: -1000; 
        display: block;
    }
    .protfolio_img_tarzan a {
        transform: translateY(100%);
        opacity: 1;
    }  
    .protfolio_img_app a {
        transform: translateY(100%);
        opacity: 1;
    }
    .protfolio_img_bk a {
        transform: translateY(100%);
    }  
    .protfolio_img_insurance a {
        transform: translateY(100%);   
    }
    .protfolio_img_invoice a {
        transform: translateY(100%);
    }
    .protfolio_img_ava a {
        transform: translateY(100%);
    }
    
    .protfolio_img_tarzan:hover a{
        opacity: 1;
        color: black;
        transform: translateY(0%);
    }

    .protfolio_img_app:hover a{
        opacity: 1;
        color: black;
        transform: translateY(0%);
    }

    .protfolio_img_bk:hover a{
        opacity: 1;
        color: black;
        transform: translateY(0%);
    }

    .protfolio_img_insurance:hover a{
        opacity: 1;
        color: black;
        transform: translateY(0%);
    }

    .protfolio_img_invoice:hover a{
        opacity: 1;
        color: black;
        transform: translateY(0%);
    }

    .protfolio_img_ava:hover a{
        opacity: 1;
        color: black;
        transform: translateY(0%);
    }

}
@media screen and (min-width:768px) and (max-width:1919px){
      .protfolio_img_info{
         display: flex;
         flex-wrap: wrap;
         box-sizing: inherit;
         justify-content:space-evenly;
         max-width: 1024px;
     }
  
}
@media screen and (min-width:1920px){
     .footer_btn_to_top{      
        margin-left: 86vw;
        margin-top:94vh;   
            }
    .deep_background{
        display:flex;
        width:100%;
        z-index: -1000;
        position: absolute;
            }
    .background_line1, .background_line2, .background_line3, .background_line4, .background_line5{
        width:16.6666667%;
        height:5140px;
        border-right:1px 
        solid rgba(0,0,0,0.15);
        z-index: -1000; 
        display: block;      
}
    .protfolio{
        max-width:1920px;
        margin:auto;
        padding-top: 240px;
    }
    .protfolio_header_img{
        width:1220px;
    }
    .protfolio_title{
        width:600px;
        margin:50px 0px 0px ;
    }
    .protfolio_dots{
        width:295px;
        margin:100px 0px 0px 110px;
    }
    .protfolio_option_block{
        width:1220px;
        margin: 10px auto;
        padding: 0px;
        line-height: 40px;
    }
    .protfolio_img_info{
        max-width:1500px;
        padding:0px 120px;
       
    }
    .protfolio_img_insurance{
        top:-180px;
    } 
    .protfolio_img_ava{
        top:-80px;
    }
    .protfolio_img_info_top3{
        display: flex;
        flex-direction:row;
    }
    .protfolio_img_info_bottom3{
        display: flex;
        flex-direction:row;
        margin-top:30px;
    }
    .protfolio_img_invoice{
        margin-top:-40px;
    }
    .contact_footer{
        max-width:1500px;
        margin: auto;
        padding: 0px 100px 100px 100px;
    }
    .contact_us{
        left:-30px;
    }
    .contact_title{
        width:400px;
        top:15px;
    }
    .contact_circle{
        width:320px;
        top:-119px;
        left:196px;
    }
    .contact_text{
        font-size:16px;
        line-height: 28px;
        top:11px;
        width:400px;
           }
    .contact_form{
        top:166px;
        font-size: 14px;
        width:570px;
    }
    .contact_name, .contact_email, .contact_story{
        width: 65%;
        padding-top:8px;
    }
    .contact_story{
        padding-bottom: 140px;
    }
    .contact_send{
        top:343px;
        left:246px;
    }
    .footer{
        height:890px;
    }
    .img_office{
        width:680px;
        margin-left:35px;
    }
    .footer_title{
        font-size:120px;
        top:387px;
        left:337px;
    }
    .footer_subtitle{
        width:150px;
        top:520px;
        left: 594px;
        font-size: 22px;
    }
    .footer_infor{
        width:100%;
        font-size:16px;
        line-height:36px;
        top:565px;
        left:372px;
        margin:0px auto;
    }
    .copy_right p{
        width:300px;
        font-size: 16px;
        top:830px;
        left:505px;
    }
}
    .branding, .design, .digital {
        height: 170px;
        width: 200px;
        font-family: 'Noto Sans TC', sans-serif , Noto Sans TC;
        line-height: 23px;
        font-size: 14px;
        margin-top: 31px;
    }
    .title_group {
        position: absolute;
        width: 86%;
        height: 320px;
        margin: 0 auto;
        right: 0;
        left: 0;
        max-width: 350px;
    }

    .about_h1{
            text-align: center;
            margin-bottom: 36px;
            padding: 0 12%;
    }

    .about_h1 span {
          width: 223px;
          height: 20px;
          font-family: 'Noto Sans TC', sans-serif;
          font-size: 14px;
          font-weight: normal;
          font-stretch: normal;
          font-style: normal;
          line-height: normal;
          letter-spacing: 0.81px;
          color: #000000;
    }

    .about_span{
        height: 255px;
        padding: 0px 6%;
    }

    .about_span span {
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 11px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: 0.63px;
      color: #000000;
    }

    .email {
        width: 320px;
        margin: 0 auto;
        padding: 6px 0px;
    }