.title-box {
    background-color: #ffffff;
    /*padding: 65px 0;*/
}
.form-title{
    padding: 65px 0;
}
.form-top{
    display: inline-block;
    width: 193px;
    height: 55px;
    background-color: #707070;
    font-size: 36px;
    line-height: 50px;
    font-family: AGaramondPro-Regular;
}
.form-top{
    position: relative;
    color: #fff;
}
.form-top span{
    height: 1px;
    width: 153px;
    display: inline-block;
    background-color: #707070;
    position: absolute;
    top: 50%;


}
.form-top span.xian1{
    left: -153px;
}
.form-top span.xian2{
    right: -153px;
}






/* top-title start ------------------------------*/
.top-title{
    height: 180px;
    width: 100%;
    padding-top: 50px;
    text-align: center;
}
.top-title h2{
    font-size: 30px;
    font-weight: 700;
}

.top-title .t-line{
    width: 100%;
    height: 10px;
    margin: 10px 0 10px 0;
}


.top-title .t-line i{
    display: inline-block;
    width: 200px;
    height: 2px;
    background-color: #000;
}


.top-title h4{
    font-size: 20px;
    color: #AD7633;
    font-weight: 700;
}
/* top-title end ------------------------------*/


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

    .form-title{
        padding: 25px 0;
    }

    .title-box{
        padding: 35px 0;
    }
    .form-top span {
        width: 30px;
    }
    .form-top span.xian1 {
        left: -30px;
    }
    .form-top span.xian2 {
        right: -30px;
    }


}



@media screen and ( max-width: 768px ){
  
    .top-title{
        height:auto;
        padding-top: 30px;
        margin-bottom: 30px;
    }
    .top-title h2{
        font-size: 30px;
        font-weight: 700;
    }

    .top-title .t-line{
        height: 1px;
        line-height: 1px;
        margin:10px auto;
    }
    .top-title .t-line i{
        width: 200px;
        height: 1px;
    }

    .top-title h4{
        font-size: 20px;
        font-weight: 700;
    }
}

@media (min-width:769px){
    .nav-content .location_ul{
    width: 150px;
    left:-12px;
    }
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    width: 100%;
    height:100%;
}
.itemsMain{
    width: 100%;
    padding:0 8%;

}
.itemsWrapper{
    width: 100%;
     height: 797px;
     margin-bottom: 15px;
    overflow:hidden;
}
.itemLeft{
    width: calc(67% - 15px);
    height:100%;
    float: left;
    /*background: #CCC;*/
}
.itemRight{
       width: 33%;
       height:100%;
       float:right;
       /*background: #000;*/
}
.leftTop,.leftBom{
    width: 100%;
    height: calc(50% - 15px);
    /*background: #e0e0e0;*/
    margin-bottom: 15px;
}
.leftBom{
      height:50%;
    margin-bottom: 0px;
}
.leftTop .attachment:first-child{
    width: calc(67% - 15px);
    height: 100%;
    /*background: red;*/
    float: left;
}
.leftTop .attachment:last-child{
    width: 33%;
    height: 100%;
    /*background:green;*/
    float: right;
}
.leftBom .attachment:first-child{
    width: calc(33% - 15px);
    height: 100%;
    /*background: red;*/
    float: left;
}
.leftBom .attachment:last-child{
    width: 67%;
    height: 100%;
    /*background:green;*/
    float: right;
}
.itemRight .rightTop{
    width: 100%;
    height: 100%;
    /*background: orange;*/
}
.rightTop .attachment:first-child{
    width: 100%;
    height:33% ;
    /*background: blue;*/
}
.rightTop .attachment:last-child{
    width: 100%;
    height:calc(67% - 15px);
    margin:15px 0 0 0;
    /*background: pink;*/
}
.itemsWrapper:nth-child(odd) .itemLeft{
    float: left;
}
.itemsWrapper:nth-child(odd) .itemRight{
    float: right;
}
.itemsWrapper:nth-child(even) .itemLeft{
    float: right;
}
.itemsWrapper:nth-child(even) .itemRight{
    float: left;
}
.imageBlock{
    cursor: pointer;
}
.attachment{
    width: 100%;
    height:100%;
}
.attachment .imageBlock{
    width: 100%;
    height:100%;
    display:inline-block;
    background:#000 no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position:center center;
    background-clip:content-box;
    background-origin:content-box;
}
@media (max-width:1555px){
    .itemsWrapper{

     height: 700px;
    
}
}
@media (max-width:1380px){
    .itemsWrapper{

     height: 600px;
    
}
}
@media (max-width:1200px){
    .itemsWrapper{

     height: 500px;
    
    }
}

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
    
    filter:orange;
}
.attachment{
    background: rgba(0,0,0,.8);
    z-index:10;
}
.imageBlock{
   position: relative;
}

.imageBlock  .text{
    width: 100%;
    height: 100%;
    position: relative;
    opacity:0;
    margin:0 auto;
     font-size: 48px;

}
.imageBlock .textBorder{
   
    width: 2%;
    height:2%;
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
      border:3px solid #fff; 
        opacity:0;
}

.imageBlock i{
    position: absolute;
    top:50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display:block;

    text-align: center;
    color:#fff;

}
.modal-body img{
    display:block;
    margin: 0 auto;
    margin-top: 200px;
   
}
@media (min-width:768px){
    .modal-body{
    width: 50%;
     max-width:1100px;
     /*max-height:800px;*/
    margin:0 auto;
    /*background: #000;*/
   
}
.modal-body img{
    display:block;
    margin: 0 auto;
    margin-top: 200px;
    width: 100%;
    height:100%;
    max-width:100%;
    /*max-height:100%;*/
}
.nav-content .location_ul.erjidaohang{
  width: 150px;
  left:50%;
  transform:translateX(-50%);
}

}


@media (max-width:768px){
       .modal-body{
            width:85%;
            margin:0 auto;
            /*background: #000;*/

        }
    .modal-body img{
        display:block;
    
        margin: 0 auto;
        margin-top: 200px;
        width: 95%;
        height:100%;
        max-width:95%;
        max-height:100%;
    }
}
@media (max-width:480px){
       .modal-body{
            width:85%;
            margin:0 auto;
            /*background: #000;*/

        }
    .modal-body img{
      
        margin-top: 100px;
       
    }
}

/*ie =====================================================================================*/
.my-container{
  /*width: 97%\0;*/
  padding:0 15px\0;
}