@charset "utf-8";
/* CSS Document */

.case{
    width: 100%;
}

.case .wrap{

    position: relative;

    padding-left: 151px;

    padding-right: 102px;

}

.case_bt{

	width: 100%;

	padding-top: 79px;

}

.case_bt .caselogo{

    width: 14.8%;

}

.case_bt .caselogo img{

    width: 100%;

}

nav.casenav{

    padding-top: 20px;

    width: 85.2%;

}

.casenav li{

    float: left;

    padding: 0 88px 0 0px;

    

}

.casenav li:nth-child(1){

    padding-left: 0px;

}

.casenav li a{

    position: relative;

    font-size: 18px;

    color: #464646;

    font-family: "Microsoft JhengHei";

    text-transform: uppercase;

    line-height: 32px;

}

.casenav li a:after{

    content: '';

    position: absolute;

    top: 50%;

    left: 0px;

    width: 0;

    height: 1px;

    margin-left: -5%;

    background-color: #464646;

    -webkit-transition: all .5s ease-out 0s;

    -moz-transition: all .5s ease-out 0s;

    -ms-transition: all .5s ease-out 0s;

    -o-transition: all .5s ease-out 0s;

    transition: all .5s ease-out 0s;

    opacity: 0;

}

.casenav li a:hover:after{

    width: 110%;

    opacity: 1;

}

.casenav li.atv a:after{

    width: 110%;

    opacity: 1;

}

.case .casetop{

    margin-top: 145px;

}

.case .casetop .ct_left{

    position: relative;

    width: 68.545455%;

}

.case .casetop .ct_left h1{

    position: absolute;

    top: 0px;

    left: 0px;

    font-size: 150px;

    color: #dcdcdc;

    font-family: 'Conv_QUARTO-BOLD';

    text-transform: uppercase;

    letter-spacing: 1.5px;

    width: 100%;

}

.case .casetop .ct_left h1:before{

    content: '';

    position: absolute;

    right: 0px;

    bottom: -70px;

    width: 780px;

    height: 10px;

    background: url(../images/line.png) no-repeat;

}

.case .casetop .ct_right{

    width: 31.454545%;

}

.casex{

    position: relative;

    overflow: hidden;

}

.casex a h5{

    color: #ffffff;

}

.casex:hover a h5{

    color: #ffffff;

}

.casex .imgdiv{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

}

.casex .imgdiv img{

    width: 100%;

}

.casex a:before{

    content: '';

    position: absolute;

    bottom: 18px;

    right: 2.75%;

    z-index: 1;

    width: 0px;

    height: 1px;

    background-color: #ff9595;

    opacity: 0;

    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}

.casex a:hover:before{

    width: 94.5%;

    opacity: 1;

}

.casex a:after{

    content: '';

    position: absolute;

    bottom: 14.8%;

    left: 2.75%;

    z-index: 1;

    width: 1px;

    height: 0;

    background-color: #ff9b9b;

    opacity: 0;

    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}

.casex a:hover:after{

    height: 72.8%;

    opacity: 1;

} 

.casex .logodiv{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,.5);

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.casex .logodiv .lod_con{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    text-align: center;

     -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.casex .logodiv .lod_con img{

    width: 260px;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.casex .logodiv .lod_con h5{

    font-size: 20px;

    line-height: 1.5;

    color: #fff;

    opacity: 0;

    height: 0px;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.casex .logodiv:hover{

    background-color: #ff4343;

}

.casex .logodiv:hover .lod_con img{

    margin-bottom: 35px;

}

.casex .logodiv:hover .lod_con h5{

    opacity: 1;

    height: auto;

    color: #ffffff;

}

.casex .logodiv:before{

    content: '';

    position: absolute;

    top: 18px;

    left: 2.75%;

    width: 0px;

    height: 1px;

    background-color: #ff9b9b;

    opacity: 0;

    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}

.casex .logodiv:hover:before{

    width: 94.5%;

    opacity: 1;

}

.casex .logodiv:after{

    content: '';

    position: absolute;

    top: 14.8%;

    right: 2.75%;

    width: 1px;

    height: 0;

    background-color: #ff9b9b;

    opacity: 0;

    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}

.casex .logodiv:hover:after{

    height: 72.8%;

    opacity: 1;

}

.casex .logodiv .lod_con:after{

    content: '';

    position: absolute;

    bottom: 0px;

    left: 50%;

    -webkit-transform: translate(-50%,0);

    -moz-transform: translate(-50%,0);

    -ms-transform: translate(-50%,0);

    -o-transform: translate(-50%,0);

    transform: translate(-50%,0);

    width: 34px;

    height: 34px;

    background: url(../images/arryuan.png) no-repeat;

    background-size: 100% 100%;

    opacity: 0;

    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

.casex .logodiv:hover .lod_con{

    padding-bottom: 65px;

}

.casex .logodiv:hover .lod_con:after{

    opacity: 1;

}

.casex .bgimg{

    width: 100%;

}

.casex .bgimg img{

    width: 100%;

}

.case .case_center{

    width: 100%;

    margin-top: 55px;

}

.case .case_center .cc_fl{

    width: 65.757576%;

}

.case .cc_fr{

    position: relative;

    width: 31.454545%;

}

.case .cc_fr .cfr_img{

    width: 100%;

}

.case .cc_fr .cfr_img img{

    width: 100%;

}

.case .cc_fr .cfr_txt{

    position: absolute;

    top: 147px;

    left: 63px;

    padding-top: 105px;

}

.case .cc_fr .cfr_txt:after{

    content: '';

    position: absolute;

    top: 0px;

    left: 0px;

    width: 50px;

    height: 3px;

    background-color: #fff;

}

.case .cc_fr .cfr_txt h1{

    font-size: 48px;

    color: #fff;

    margin-bottom: 52px;  

    font-family: 'Conv_QUARTO-BOLD';

}

.case .cm_box{

    width: 31%;

    margin: 55px 0;

    margin-left: 2.8181815%;

}

.gx_poiingd .cm_box:nth-child(3n+1){
    margin-left: 0;
}
.gx_poiingd .cm_box{
    margin-top: 0;
}
.case .cm_box:nth-child(1){

    margin-left: 0px;

}

.case .case_bottom{

    width: 100%;

}

.case .case_bottom .cc_fl{

    width: 65.757576%;

}

.case .case_bottom .cc_fr .casex:nth-child(1){

    margin-bottom: 55px;

}








    .case .case_center {

    margin-top: 32px;

    }

    .case .cm_box {

    margin: 32px 0;

    margin-left: 2.8181815%;

    }

    .case .case_bottom .cc_fr .casex:nth-child(1) {

    margin-bottom: 38px;

    }

    .about_middle .am_top h1, .about_middle .am_bottom h1 {

    margin-bottom: 26px;

    }

    .section_about .sa_top {

    padding: 56px 56px 56px 46px;

    }

    .lead_con .lc_title {

    padding: 56px 0 56px;

    }

    .lead_con .lc_title h4 {

    font-size: 46px;

    }

    .casex .logodiv:hover .lod_con img {

    margin-bottom: 26px;

    }

    .casex .logodiv .lod_con h5 {

    font-size: 16px;

    }

    .casex .logodiv .lod_con img {

    width: 240px;

    }


h5
{
    font-weight: normal;

    margin: 0;
}


.fl{float: left;}



.index-jjfa-main {
    margin-top: 50px;
}

.index-jjfa-main li {
    /*height: 327px;*/
    height:380px;
	width:290px;
    float: left;
    margin-right: 25px;
    background-color: #ffffff;
    transition: all .5s;
	box-shadow: 3px 3px 10px 0px #d6d6d6;
}

.index-jjfa-main li:last-child {
    margin-right: 0;
}

.index-jjfa-main li div.index-main-jjfa {
    width: 100%;
    height: 155px;
    overflow: hidden;
}

.index-jjfa-main li div.index-main-jjfa img {
    display: block;
    width: 100%;
    height: 100%;
    transform: scale(1);
    transition: all .5s;
}

.index-jjfa-main li div.index-main-jjfa img:hover {
    transform: scale(1.2);
}

.index-jjfa-main li div.index-main-jjfa2 {
    padding: 20px 18px 65px;
}

.index-jjfa-main li div.index-main-jjfa2 h3 {
    font-size: 18px;
    color: #222222;
    font-weight: bold;
	line-height:40px;
}

.index-jjfa-main li div.index-main-jjfa2 p {
    font-size: 13px;
    color: #666666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 26px;
    margin-top: 15px;
}

.index-jjfa-main li div.index-main-jjfa2 a .jjfa-jt {
    background: url("../images/icon-jian.png");
    width: 16px;
    display: inline-block;
    vertical-align: top;
    margin-top: 8px;
    margin-left: 10px;
    height: 5px;
    transition: all .3s;
}

.index-jjfa-main li div.index-main-jjfa2 a.ljxq {
    color: #fe7100;
    font-size: 14px;
    margin-top: 16px;
    display: inline-block;
}

.index-jjfa-main li:hover div.index-main-jjfa2 a .jjfa-jt {
    background: url("../images/icon-jian-on.png");
    width: 36px;
    transition: all .3s;
}

.index-jjfa-main li:hover {
    box-shadow: 3px 3px 10px 0px #CCCCCC;
}
/* More button */
.home-content .home-more { display: block; width: 160px; height: 38px; text-align: center; line-height: 38px; margin: 40px auto 0; border: 1px solid #e6e6e6; position: relative; -webkit-transition: all .3s; transition: all .3s; position: relative; }
.home-content .home-more:hover { color: #fff; border-color: #FF4229; }
.home-content .home-more:hover .color { width: 160px; }
.home-content .home-more:hover .m { color: #fff; }
.home-content .home-more .arrow { width: 6px; height: 12px; position: absolute; right: 45px; top: 50%; z-index: 2; margin-top: -6px; background: url("../images/sprite.png") 0 -188px no-repeat; }
.home-content .home-more .color { position: absolute; top: 0; left: 0; z-index: 1; width: 0; height: 38px; background-color: #FF4229; -webkit-transition: all .3s; transition: all .3s; }
.home-content .home-more .m { position: relative; z-index: 2; font-style: normal; color: #999; }

/*FOOT*/

footer

{

   position: relative;



   height: 30vh;

}

footer p

{

    position: absolute;

    bottom: 37px;

    left: 85px;



    letter-spacing: .4px;



    color: #fff;

    font-size: 14px;

}

footer p a

{

    color: #fff;

}

footer p a:hover{

    color: #ff4343;

}

/*第二套脚部*/

footer.spfo{

    height: auto;



    padding: 190px 110px 190px 160px;



    background-color: #d7d7d7;

}

footer .focon_fl{
    position: relative;
    width: 50%;
    height: 400px;
    background-color: #fff;
    -webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -ms-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
}
footer .focon_fl a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
footer .fodiv{
    position: absolute;
    top: 50%;
    left: 50%;
    padding-bottom: 85px;
    text-align: center;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

footer .fodiv h3{

    margin-bottom: 40px;



    font-family: "Microsoft JhengHei";

    font-size:  24px;

    color: #848484;

}

footer .fodiv .gx_tirlx{

    position: relative;



    font-family: 'Conv_QUARTO-BOLD';

    font-size:  48px;

    color: #333333;

    letter-spacing: 1px;

    text-transform: uppercase;

}

footer .fodiv .gx_tirlx:before{

    content: '';



    position: absolute;

    top: 50%;

    left: 0px;



    width: 0px;

    height: 2px;



    margin-left: -5%;



    background-color: #333333;



    -webkit-transition: all .5s ease 0s;

    -moz-transition: all .5s ease 0s;

    -ms-transition: all .5s ease 0s;

    -o-transition: all .5s ease 0s;

    transition: all .5s ease 0s;

}

footer .fodiv:after{
    content: '';
    position: absolute;
    bottom: 0px;
    left: 50%;
    width: 34px;

    height: 34px;

    background: url(../images/next.png) no-repeat;

    background-size: cover;



    transform: translateX(-50%);

    -o-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

}

footer .focon_fl:before{

    content: '';



    position: absolute;

    top: 18px;

    left: 2.75%;



    width: 0;

    height: 1px;



    background-color: #ff9b9b;



    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}
footer .focon_fl:after{
    content: '';
    position: absolute;
    top: 14.8%;

    right: 2.75%;



    width: 1px;

    height: 0;



    background-color: #ff9b9b;



    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}



footer .focon_fl a:before{

    content: '';



    position: absolute;

    bottom: 18px;

    right: 2.75%;

    z-index: 1;



    width:0;

    height: 1px;



    background-color: #ff9b9b;



    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}
footer .focon_fl a:after{

    content: '';



    position: absolute;

    bottom: 14.8%;

    left: 2.75%;

    z-index: 1;



    width: 1px;

    height: 0;



    background-color: #ff9b9b;



    -webkit-transition: all 1.5s ease 0s;

    -moz-transition: all 1.5s ease 0s;

    -ms-transition: all 1.5s ease 0s;

    -o-transition: all 1.5s ease 0s;

    transition: all 1.5s ease 0s;

}
footer .focon_fl.focon_sp{

    background-color: #ff4343;

}

footer .focon_fl.focon_sp h3{

    color: #fff;

}

footer .focon_fl.focon_sp .gx_tirlx{

    color: #fff;

}

footer .focon_fl.focon_sp .fodiv h1:before{

    background-color: #fff;

}

footer .focon_fl.focon_sp .fodiv:after{

    background: url(../images/arryuan.png) no-repeat;

    background-size: cover;

}

footer.spfo p{

    left: 160px;

    color: #aaaaaa;

}

footer.spfo p a{

    color: #aaaaaa;

}




footer .focon_fl:hover .fodiv h1:before{
    width: 110%;
}
.index .section4 li a:hover:after{
    height: 72.8%;
    opacity: 1;
} 
footer .focon_fl:hover a:after{
    height: 72.8%;    
}
footer .focon_fl:hover:before{
    width: 94.5%;
}
footer .focon_fl:hover a:before{
    width:94.5%;
}
footer .focon_fl:hover:after{
    height: 72.8%;
}



    footer.spfo {

    height: auto;

    padding: 86px 86px 86px 121px;

    background-color: #d7d7d7;

    }

    footer .focon_fl {

    height: 312px;

    }

    footer .fodiv .gx_tirlx {

    font-size: 36px;

    }

    footer .fodiv h3 {

    margin-bottom: 26px;

    font-size: 20px;

    }

    footer .fodiv {

    padding-bottom: 60px;

    }


.clearfix:after
{
    display: block;
    clear: both;

    height: 0;

    content: ' ';
}
.fl
{
    float: left;
}