@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    border: none;
    list-style:none;
    background-repeat:no-repeat;
    text-decoration:none;/*去底線*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.wrapper {
    width: 100%;
    position:relative;
    background-color: #ebebeb;
    background-image: url(../images/hotcase_repeat_bg.jpg);
    background-repeat: repeat;
}
.weapper .banner{
    background-size:auto;
}
.case .main .txt{
        text-align: center;
         padding: 5px 0 60px 0;
}
.cleanup{
    height: 50px;
}
@media screen and (max-width: 1024px){
    .case .main .txt{
        padding: 0px 0 0px 0;
    }   
}
@media screen and (max-width: 1024px){
    .cleanup{
        display: none;
    }
.wrapper .case .main {
    width: 90%;
    text-align: center;
}
.wrapper .main .cent_box .img {
    height: 350px;
}

}
@media screen and (max-width: 700px){

    .wrapper .main .cent_box .img {
        height: 230px;
    }
}
@media screen and (max-width: 320px){
    .wrapper .main .cent_box .img {
        height: 180px;
}
    
}
.wrapper .banner{
    background-image:url(../uploads/classic_case/classic_case01.jpg);
  -webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}

 .wrapper .banner .main{
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.wrapper .banner .main .txt{
    width: 100%;
    font-size: 48px;
    line-height: 180%;
    color: #fff;
    text-align: center;
    text-shadow: 0px 0px 11px #000;
    position: relative;
    transition: all 0.8s ease-out;;
}
.wrapper .banner .main .txt:after {
    height: 3px;
    width: 100px;
    position: absolute;
    left: 50%;
    bottom: 0px;
    content: " ";
    margin-left: -50px;
    background-color: #ffff;
    box-shadow:1px 1px 2px #000;

}
@media  screen and (max-width: 1366px){
.wrapper .banner{
    height: 600px;

}
}



/*.wrapper .main .cent_box .img img{
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: brightness(1);
    filter: brightness(.5);
    transition: all 0.4s ease-out;
}
.wrapper .main .cent_box .img img{
    -ms-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
-webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}*/
/*center_content*/
.wrapper .center_content{
    width: 100%;
    max-width: 1300px;
    position:relative;
    margin:0 auto;
}
.wrapper .center_content .center{
    width: 100%;
    padding: 50px 20px;
    position:relative;
}

.clean{
    height: 30px;
}
@media  screen and (max-width: 1366px){
.wrapper .center_content{
    width: 90%;
}
}
@media  screen and (max-width: 768px){
}
.wrapper .main .cent_box .img {
    width:390px; 
   
    overflow:hidden;


}

/*.wrapper .main .cent_box .img img{
    -ms-transform: scale(1.02);
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
   -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
}*/
/*.wrapper .main .cent_box .img  img{
    transform:scale(1,1);
    transition: all 0.3s ease-out;
-webkit-filter:brightness(.5);


}*/
.wrapper .picandtxt .main{
      transition: all 0.5s ease-out;
}
.wrapper .main a{
        transition: all 0.8s ease-out;
}
.wrapper .main .cent_box .img img{
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: brightness(1);
    filter: brightness(.7);
    transition: all 0.8s ease-out;
}
.wrapper .main .cent_box .img  img:hover{
        transform: scale(1.05,1.05);
    transition: all 0.8s ease-out;
     -webkit-filter:brightness(1);

}
.wrapper .main .cent_box .img img {
        width: 100%;
    height: 100%;
}
.wrapper .main .cent_box .img img {
}
.case_box{
     background-color: #f0f0f0; 
}
/*case*/
.wrapper .case{
    width: 100%;
    position:relative;
        background-color: #f0f0f0;
        font-family: Microsoft JhengHei;
}


.wrapper .case .main{
    width: 65%;
    max-width: 1300px;
    position:relative;
    margin:0 auto;
    padding: 30px 0 0;
}
@media  screen and (max-width: 1366px){
.wrapper .case .main{
    width: 90%;
}
}
@media  screen and (max-width: 1024px){
.wrapper .case:first-child{
    padding-top: 50px;
}
.wrapper .case:last-child{
    padding-bottom: 0px;
}


.wrapper .main .cent_box .img img{
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: brightness(1);
    filter: brightness(1);
    transition: all 0.4s ease-out;
}
.wrapper .main .cent_box .img  img:hover{
        transform: scale(1.05,1.05);
    transition: all 0.3s ease-out;
     -webkit-filter:brightness(1);

}

}
@media  screen and (max-width: 768px){
.wrapper .case .main{
    padding: 100px 0px 0px 0px;
}
.wrapper .case:first-child{
    padding-top: 0px;
}
}
@media  screen and (max-width: 480px){
.wrapper .case .main{
    padding: 30px 0px 0px 0px;
}
.wrapper .case:first-child{
    padding-top: 0px;
}
}

.wrapper .main .case_box{
    width: 100%;
    margin: auto;
    background-color: #dddddd;
}
.wrapper .main .cent_box{
    width: 33%;
    display: inline-block;
    max-width: 1200px;
    margin: auto;
    position: relative;
}
@media  screen and (max-width: 1366px){
/* .wrapper .main .cent_box{
    width: 80%;
} */
.wrapper .main .cent_box {
    width: 33%;
}
}
@media screen and (max-width: 1024px){
    .wrapper .main .cent_box {
        width: 95%;
    }
}
@media  screen and (max-width: 1280px){
}
@media  screen and (max-width: 1080px){
}
@media  screen and (max-width: 1024px){
}
@media  screen and (max-width: 768px){
.wrapper .main .cent_box{
    width: 100%;
}
.wrapper .main .case_box{
    background-color: transparent;
}
}
@media  screen and (max-width: 1024px){
.wrapper .banner {
    height: 745px;
    background-position: 50% 50%;
    position: relative;
}
}
@media  screen and (min-width: 1025px){
.wrapper .banner {
    height: 745px;
    background-position: 50% 0%;
     background-attachment: fixed; 
    position: relative;
}
}


.wrapper .banner .main .txt{

}

.wrapper .main .cent_box .left .txt_box{
    min-width: 350px;
    min-height: 120px;
    padding: 30px 50px;
    position: absolute;
    right: 0;
    top: 200px;
    z-index: 20;
    background-color: #FFF;
    text-align: center;
    box-shadow:2px 2px 3px #aaaaaa;
}
.wrapper .main .cent_box.left .img{
    width: 390px;
    position: relative;
    left:0px;
    top: 0px;
    text-align: left;
    height: 283px;
}

@media screen and(max-width: 1366px){
    .wrapper .main .cent_box.left .img{
        width: 350px;
    }
}
@media screen  and (max-width: 1024px ){
    .wrapper .main .cent_box.left .img {
    width: auto;
}

}
.wrapper .main .cent_box .img img{
    max-width: 1012px;
}
@media  screen and (max-width: 1366px){
.wrapper .main .cent_box.left .txt_box{
    padding: 20px 30px;/*
    position: absolute;*/
    right: -5%;
    top: 200px;
}
}
@media  screen and (max-width: 1280px){

}
@media  screen and (max-width: 1024px){
.wrapper .main .cent_box.left .txt_box{
    min-width: 300px;
    min-height: 100px;
    padding: 20px 0 80px;/*
    position: absolute;*/
    right: 5%;
    top: 80%;
}
.wrapper .banner {
    background-size: cover;
}
.wrapper .main .cent_box.left .img{

    text-align: center;
    height: auto;
}
}
@media  screen and (max-width: 768px){
.wrapper .main .cent_box.left .txt_box{
    min-width: 250px;
    min-height: 70px;
    padding: 10px;
}
}

@media  screen and (max-width: 480px){
.wrapper .main .cent_box.left .txt_box{
    min-width: 250px;
    min-height: 60px;
       padding: 5px;
}

}



.weapper .banner{
    background-size:auto;
}
.wrapper .main .cent_box.right .txt_box{
    min-width: 350px;
    min-height: 120px;
    padding: 30px 50px;
    position: absolute;
    left: 0;
    top: 200px;
    z-index: 20;
    background-color: #FFF;
    text-align: center;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
}
.wrapper .main .cent_box.right .img{
    position: relative;
    right: 0;
    top: -50px;
    text-align: right;
}
@media  screen and (max-width: 1366px){
.wrapper .main .cent_box.right .txt_box{
    padding: 20px 30px;
    position: absolute;
    left: -5%;
    top: 200px;
}
}
@media  screen and (max-width: 1024px){
.wrapper .main .cent_box.right .txt_box{
    min-width: 300px;
    min-height: 120px;
    padding: 20px;
    position: absolute;
    left: 5%;
    top: 80%;
}
}
@media  screen and (max-width: 450px){
.wrapper .main .cent_box.right .txt_box{
    min-width: 250px;
    min-height: 100px;
    padding: 10px;
}
}

.wrapper .main .cent_box .txt_box h5.title{
    font-size: 36px;
    font-weight: normal;
    line-height: 180%;
    padding-bottom: 5px;/*
    font-weight: bold;*/
    border-bottom: 1px #b7b7b7 solid;
    color: #3a3a3a;
    letter-spacing: 2px;
    font-family: Microsoft JhengHei;
}
}
.wrapper .main .cent_box .txt_box p.txt{
    padding-top: 10px;
    font-size: 24px;
    font-weight: bold;
    line-height: 180%;
    color: #565656;
    letter-spacing: 10px;
    text-align: center;
}
@media  screen and (max-width: 1024px){
.wrapper .main .cent_box .txt_box h5.title{
    font-size: 30px;
    letter-spacing: 2px;
}
.wrapper .main .cent_box .txt_box p.txt{
    font-size: 25px;
    letter-spacing: 5px;
}
}
@media  screen and (max-width: 768px){
.wrapper .main .cent_box .txt_box h5.title{
    font-size: 28px;
    letter-spacing: 1px;
}
.wrapper .main .cent_box .txt_box p.txt{
    font-size: 18px;
    letter-spacing: 3px;
}
}
.wrapper .center_content .center .box_two .txt{
    font-size: 22px;
    line-height: 180%;
    color: #565656;
    padding-left: 20px;
}
.wrapper .center_content .center .box_two .title{
    width: 100%;
    font-size: 32px;
    font-weight: bold;
    line-height: 42px;
    color: #a6945d;
    position: relative;
    padding-left: 20px;
}
@media  screen and (max-width: 1024px){
.wrapper .center_content .center .box_two .txt{
    font-size: 20px;
}
.wrapper .center_content .center .box_two .title{
   font-size: 30px;
}
}
@media  screen and (max-width: 768px){
.wrapper .center_content .center .box_two .txt{
    font-size: 20px;
}
.wrapper .center_content .center .box_two .title{
   font-size: 26px;
}
}
@media  screen and (max-width: 450px){
.wrapper .center_content .center .box_two .txt{
    font-size: 20px;
}
.wrapper .center_content .center .box_two .title{
   font-size: 24px;
}
}

/*picandtxt**/
.wrapper .picandtxt{
    width: 100%;
    padding: 30px 0px;
    position:relative;
}
.wrapper .picandtxt .main{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    position:relative;
    text-align:center;
    color: #3f3f3f;
    transition: all 0.8s ease-out;
}


.wrapper .picandtxt .main h4.title{
    font-size: 32px;
    line-height: 180%;
    font-weight: bold;
    color: #a6945d;
    text-align: left;
    position: relative;
    padding-top: 10px;
}
.wrapper .picandtxt .main p.txt{
    font-size: 22px;   
    line-height: 180%;
    color: #565656;
    text-align: left;
    position: relative;
    padding-left: 30px;
}
@media screen and (max-width: 1366px){
.wrapper .picandtxt{
    width: 90%;
    position:relative;
    margin: 0 auto;
}
}
@media screen and (max-width: 1024px){
.wrapper .picandtxt .main h4.title{
    font-size: 30px;
    line-height: 180%;
    padding-top: 10px;
}
.wrapper .picandtxt .main p.txt{
    font-size: 27px;   
    line-height: 180%;
}
}
@media screen and (max-width: 768px){
.wrapper .picandtxt .main h4.title{
    font-size: 30px;
    line-height: 180%;
    padding-top: 10px;
}
.wrapper .picandtxt .main p.txt{
    font-size: 27px;   
    line-height: 180%;
}
}
@media screen and (max-width: 450px){

.wrapper .picandtxt .main h4.title{
    font-size: 24px;
    line-height: 180%;
    padding-top: 10px;
}
.wrapper .picandtxt .main p.txt{
    font-size: 18px;  
}
}




@media  screen and (max-width: 480px){
.wrapper .center_content .center .box_two .txt{
    font-size: 14px;
}
.wrapper .center_content .center .box_two .title{
   font-size: 22px;
}
}
@media  screen and (max-width: 360px){
.wrapper .center_content .center .box_two .txt{
    font-size: 12px;
}
.wrapper .center_content .center .box_two .title{
   font-size: 22px;
}
}

@media screen and (max-width: 414px){
.wrapper .banner {
    height: 450px;

}
}
@media screen and (max-width: 414px){
.wrapper .banner {
    height: 510px;

}
.wrapper .center_content .center {
    padding: 25px 10px;
}
.wrapper .banner .main .txt {
    font-size: 40px;
}
}
@media screen and (max-width: 375px){
.wrapper .banner {
    height: 450px;

}
.wrapper .center_content .center {
    padding: 20px 10px;
}
.wrapper .banner .main .txt {
    font-size: 35px;
}
}
@media screen and (max-width: 320px){
.wrapper .banner {
    height: 450px;

}
.wrapper .center_content .center {
    padding: 20px 10px;
}
.wrapper .banner .main .txt {
    font-size: 35px;
}
}