@font-face {
        font-family: TaipeiSansTC;
        src: url(./TaipeiSansTC.ttf);
    }
    *{
        margin:  0;
        padding:  0;
        list-style:  none;
    }
    .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; 
    }
    .work_detail_top{
        align-items: center;
        position:relative;
        margin:0px auto;
        left:0px;
        right:0px;
    }
    .top_btn{
        display: flex;
        margin-top:100px;
        justify-content: space-around;
    }
    .top_btn_right{
        display:flex;  
    }
    .top_btn_prev{
        margin-right:9px;
    }
    .top_btn_back input, .top_btn_prev input, .top_btn_next input{
        background-color: #ffffff;
        color:#868686;
        font-size: 12px;
        font-family: Montserrat;
        border:none;
        -webkit-appearance: none;
    }
    .top_btn_back input:focus, .top_btn_prev input:focus, .top_btn_next input:focus{
        outline: none;
    }
    .top_btn_back input:hover, .top_btn_prev input:hover, .top_btn_next input:hover{
        color:#000000;
    }
    .top_btn_back,.top_btn_prev, .top_btn_next{
        display: inline-block;
    }
    .top_btn_back img,.top_btn_prev img, .top_btn_next img{
        width:11px;
        height:4px;
        margin-bottom:3px;
    }
    .top_btn_back img,.top_btn_prev img{
        margin-right:3.4px;
    }
    .top_btn_next img{
        margin-left:3.4px;
    }
    .top_btn_next img{
        -moz-transform:scaleX(-1);
        -webkit-transform:scaleX(-1);
        -o-transform:scaleX(-1);
        transform:scaleX(-1);
    }
    .work_detail_img{
        margin-top: 22px;
    }
    .work_detail_img_left{
        display:none;
    }
    .work_detail_img_left img{
        width:325px;
        height:325px;
    }
    .work_detail_img_right{
        width:280px;
        height:280px;
        border-radius: 50%;
        background-color: #ad956d;
        position: relative;
        margin:0px auto;
        animation-name: right;
        animation-duration: 5s;
    }
    @keyframes right{
        0%  {opacity: 0;}
        100% {opacity: 1;}
        }
    .work_detail_img_right p{
        color:#ffffff;
        position: absolute;
    }
    .work_detail_img_right_en{
        font-size:30px;
        font-family: Lato;
        font-weight: bold;
        top:111px;
        left:43px;
    }
    .work_detail_img_right_tw{
        font-size:30px;
        font-family:'Noto Sans TC', sans-serif;
        font-weight: bold;
        top:141px;
        left: 61px;
    }
    .work_detail_infor{
        display:flex;
        margin-top:50px;
        justify-content: center;
    }
    .client, .type{
        text-align: center;
    }
    .client_title, .type_title{
        color: #000000;
        font-size: 18px;
        font-family: Lato;
        font-weight: bold;
    }
    .client_subtitle, .type_subtitle{
        width: 168px;
        height:74px;
        color: #333333;
        font-family:'Noto Sans TC', sans-serif;
        font-size: 14px;
        margin-top:22px;
    }
    .work_detail_top_text{
        width:320px;
        clear:both;
        color: #333333;
        font-size: 14px;
        font-family:'Noto Sans TC', sans-serif;
        margin:15px auto;
    }
    .work_detail_bottom{
        margin:0px auto;
        position: relative;
        max-width:calc(1002px + 40px);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .bottom_design_info, .bottom_card, .bottom_logo{
        top:0px;
        left:0px;
    }
    .bottom_design_info{
        width:320px;
        height:257px;
    }
    .bottom_card{
        width:320px;
        height:2134px;
    }
    .bottom_design_info img{
        width:320px;
        height:257px;
    }
    .bottom_card img{
        width:320px;
        height:2134px;
    }
    .copy_right{
        text-align: center;
        color:#9c9c9c;
        font-size: 10px;
        font-family: Montserrat;
        margin:140px 0 25px 0;
    }
@media screen and (min-width:1024px){
    .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;
    }
    .top_btn{
        margin-top:170px;
        max-width: calc(820px + 10px);
        justify-content: space-between;
        margin:170px auto 0 auto;
    }
    .top_btn_right{
        -moz-transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        -o-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        transform:rotate(90deg);
        right:-35px;
        top:60px;
        position:relative;
    }
    .top_btn_back input, .top_btn_prev input, .top_btn_next input{
        font-size: 16px;
    }
    .top_btn_prev input, .top_btn_next input{
        transform:rotate(2700deg);
    }
    .top_btn_back img, .top_btn_prev img, .top_btn_next img{
        width:17px;
        height:6px;
    }
    .top_btn_prev img{
        transform: rotateX(180deg);
    }
    .top_btn_next img{ 
        transform:rotate(2700deg);
    }
    .work_detail_img{
        display: flex;
        justify-content: center;
        -webkit-box-pack: center;
        position: relative;
        max-width: 655px;
        height:365px;
        margin: -21px auto 0px auto;
    }
    .work_detail_img_left{
        width:325px;
        height:325px;
        display:block;
        z-index: 1px;
        position: absolute;
        animation-name: left;
        animation-duration:3s;
        animation-fill-mode: forwards;
    }
    
    .work_detail_img_left img{
        border-radius: 50%;
        position: absolute;
       
    }
    @keyframes left{
        0%   {opacity: 0; left:25%;}
        100%  {opacity: 1; left:20px}
    }
    .work_detail_img_right{
        width:325px;
        height:325px;
        position: absolute;
        margin:0px;
        z-index: 200px;
        animation-name: right;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
    @keyframes right{
        0%   {opacity: 0; right:25%}
        100%  {opacity: 1; right:20px}
    }
    .work_detail_img_right_en{
        position: absolute;
        font-size: 28px;
        top:122px;
        left:57px;
    }
    .work_detail_img_right_tw{
        position: absolute;
        font-size: 28px;
        top:163px;
        left:76px;
    }
    .work_detail_infor{
        justify-content: center;
    }
    .client, .type{
        margin:0px 70px;
    }
    .client_title, .type_title{
        font-size: 22px;
    }
    .client_subtitle, .type_subtitle{
        font-size: 18px;
    }
    .work_detail_top_text{
        width:580px;
        font-size: 18px;
        margin:50px auto;
    }
    .bottom_design_info{
        width:810px;
        height:650px;
    }
    .bottom_card {
        width:810px;
        height:5404px;
    }
    .bottom_design_info img{
        width:810px;
        height:650px;
    }
    .bottom_card img{
        width:810px;
        height:5404px;
    }
    .copy_right{
        font-size: 14px;
    }

}
@media screen and (min-width:1440px){
    .background_line1, .background_line2, .background_line3, .background_line4, .background_line5{
        width:16.6666667%;
        height:7065px;
        border-right:1px 
        solid rgba(0,0,0,0.15);
        z-index: -1000; 
        display: block;
    }
}
@media screen and (min-width:1920px){
    .background_line1, .background_line2, .background_line3, .background_line4, .background_line5{
        height:10015px;
    }
    .top_btn{
        max-width: calc(1002px + 10px);
    }
    .top_btn_right{
        right:-150px;
        top:60px;
    }
    .work_detail_img{
        max-width: 780px;
        height:400px;
    }
    .work_detail_img_left img{
        width:325px;
        height:325px;
    }
    @keyframes left{
        0%   {opacity: 0; left:25%;}
        100%  {opacity: 1; left:90px}
    }
    .work_detail_img_right{
        width:325px;
        height:325px;
    }
    @keyframes right{
        0%   {opacity: 0; right:25%}
        100%  {opacity: 1; right:90px}
    }
    .work_detail_img_right_en{
        top:122px;
        left:66px;
    }
    .work_detail_img_right_tw{
        top:161px;
        left:90px;
    }
    .work_detail_bottom{
       max-width:calc(1900px + 10px) 
    }
    .bottom_design_info{
        width:1200px;
        height:965px;
    }
    .bottom_card {
        width:1200px;
        height:8006px;
    }
    .bottom_design_info img{
        width:1200px;
        height:965px;
    }
    .bottom_card img{
        width:1200px;
        height:8006px;
    }
    .copy_right{
        font-size: 16px;
    }

}