@media(min-width: 1201px){
  .office-box {
    height: 350px;
  }
  .office-box .ct {
    height: 350px;
  }
  .office-box .pos_ct_news {
    position: relative;
  }
  .office-box .read_more_pos {
    position: absolute;
    bottom: 20px;
  }

  /*Project detail*/
  /* .sp .box .text .change_h2_project_detail {
    font-size: 20px;
  }
  .sp .box .text .change_p_project_detail {
    font-size: 16px;
  } */
}
@media (max-width: 1200px){
    .sp .col-sm-6 .box{
        height: 20vw;
    }
    #banner .item{
        height: 75vw;
    }
    #banner .headline{
        width: 560px;
        height: 440px;
    }
    .office-box .pos_ct_news {
      position: relative;
    }
    .office-box .read_more_pos {
      position: absolute;
      bottom: 20px;
    }
}
@media (max-width: 970px){

}
@media (max-width: 768px){
    header .logo{
        left: 0px;
    }
    footer .sub-menu{
        display: none;
    }
    footer .sub-menu-mobile{
        /* display: block; */
    }
    footer .footer-menu ul li{
        padding-top: 0px;
    }
    .sp .col-sm-4{
        width: 50%;
    }
    .heading {
        font-size: 26px;
    }
    .mp .in {
        font-size: 20px;
        line-height: 20px;
        letter-spacing: 1.4px;
        margin: 5px 0px;
    }
    .mp .in:nth-child(6) {
        border-left: 2px solid #C3C3C3;
    }
    .container{
        padding-left: 25px;
        padding-right: 25px;
    }
    header{
        position: fixed;
        width: 100%;
        top: 0px;
        left: 0px;
        z-index: 2000;
    }
    header.scroll{
        background: #fff;
        box-shadow: 0px 3px 5px rgba(0,0,0,0.05);
    }
    header.scroll.white .logo img, header.scroll.white .toggle img {
        -webkit-filter: none;
        filter: none;
    }
    header.scroll.open .logo img, header.scroll.open .toggle img{
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }
    #banner .headline {
        width: 500px;
        height: 380px;
        min-height: initial;
    }
    #banner .headline h1 {
        font-size: 30px;
        line-height: 40px;
    }
    .headline .ct {
        font-size: 16px;
        min-height: 45px;
        line-height: 22px;
    }
    .office-box .ct h2 {
        font-size: 36px;
        line-height: 43px;
    }
    .office-box .img {
        width: 100%;
        position: relative;
    }
    .office-box{
        background: #F7F7F7;
        padding: 0px 50px;
    }
    .office-box .ct {
        width: 100%;
        float: left;
        padding: 0px 0px 0px;
        min-height: initial;
    }
    .office-box .ct .min_height_box_office .read_more_pos {
      left: 0px;
    }
    .office_map{
        padding: 0px 50px;
        margin-top: -30px;
    }
    .h-map {
        margin-top: 10px;
        margin-bottom: 20px;
        font-size: 36px;
        line-height: 43px;
        letter-spacing: 2px;
    }
    #popup .office-popup .title {
        color: #BA1222;
        font-size: 36px;
        line-height: 43px;
        letter-spacing: 0.97px;
    }
    #popup .office-popup .sub-title {
        margin-bottom: 15px;
        font-size: 26px;
        line-height: 37px;
        letter-spacing: 0.7px;
    }
    #popup .office-popup .scroll {
        padding: 60px;
    }
    .office-box .img .overlay{
        display: none;
    }
    .h-cate {
        font-size: 36px;
        line-height: 42px;
    }
    #banner.project .item {
        height: auto;
    }
    #banner.project .bg{
        height: 75vw;
        position: relative;
    }
    #banner.project .headline{
        width: 100%;
        height: auto;
        min-height: initial;
        position: relative;
        background: rgba(186,18,34, 1);
        display: inline-block;
    }
    #banner.project .headline .in {
        display: inline-block;
        width: 100%;
        position: relative;
        padding: 50px 80px;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    #banner.project .headline .ct{
        min-height: initial;
    }
    #banner .headline h1{
        width: 320px;
        max-width: 100%;
    }
    #popup .office-popup .in {
        width: 85%;
        height: 60vw;
        margin: 0 auto;
        top: 50%;
        transform: translateY(-50%);
        position: relative;
        max-width: 100%;
    }
    #popup.office .office-popup .in{
        height: 75%;
    }
    .gallery .owl-next{
        right: -40px;
    }
    .gallery .owl-prev{
        left: -40px;
    }
    #popup .office-popup .gallery .item{
        width: 100%;
    }
    .news .col-sm-6{
        width: 100%;
    }
    .news .title {
        font-size: 36px;
        line-height: 40px;
        letter-spacing: 1px;
        margin-top: 30px;
    }
    .news-box{
        padding: 0px 50px;
    }
    #map{
        width: 100%;
        /* height: 80vw;
        max-height: 80vh; */
    }
    .contact .title{
        font-size: 36px;
    }
    .contact .line{
        margin: 10px 0px 30px;
    }
    .sp.related .col-sm-4 .box{
        height: 270px;
    }
    .p-desc {
        margin: 0px 0px 5px;
    }
    .sa-btn{
        padding-bottom: 60px;
    }
    .sp .box{
        height: 250px;
    }
    .t_pt60{
        padding-top: 60px;
    }
    .p-box i{
        right: 0px;
    }
    .p-box{
        height: 250px;
    }
}
@media (max-width: 520px){
    .sp .box .text h2{
        font-size: 22px;
    }
    #totop{
        right: initial;
        left: 15px;
    }
    body{
        width: 100vw;
        overflow-x: hidden;
    }
    footer .sub-menu{
        padding: 20px 15px;
    }
    .container{
        padding-left: 15px;
        padding-right: 15px;
    }
    footer .copyright{
        line-height: 17px;
        font-size: 13px;
    }
    .sp .col-sm-4{
        width: 100%;
    }
    #banner .text .name {
        font-size: 30px;
        line-height: 32px;
        margin-bottom: 35px;
        letter-spacing: 2px;
    }
    #banner .text .title {
        font-size: 16px;
        line-height: 19px;
        margin-bottom: 15px;
    }
    .sp .box {
        margin: 3px 0px;
    }
    .mp .in {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 1.4px;
        margin: 5px 0px;
        border: 0px !important;
        width: 100%;
    }
    footer .footer-menu ul li a{
        border-left: 0px;
    }
    footer .footer-menu ul li {
        display: inline-block;
        border-left: 0px;
        line-height: 16px;
        width: 50%;
        /* display: inline-block; */
        float: left;
        font-size: 16px;
        line-height: 20px;
        padding: 15px 0px;
    }
    .xs-pt-30{
        padding-bottom: 30px;
    }
    .copyright .container{
        max-width: 360px;
    }
    header .logo img {
        width: 70px;
    }
    header .toggle img:first-child {
        height: 15px;
    }
    header .toggle img:last-child {
        height: 18px;
    }
    header .bar {
        margin-top: 25px;
        margin-bottom: 25px;
    }
    header .toggle {
        width: 44.25px;
        text-align: right;
    }
    header .menu {
        padding-top: 70px;
        overflow: hidden;
    }
    header .menu li:first-child{
        padding-top: 0px;
    }
    header .menu .in {
        width: 100%;
        max-height: 100%;
        overflow-y: auto;
        margin-top: -20px;
        padding-top: 15px;
        padding-bottom: 20px;
        top: 20px;
    }
    header .menu li {
        font-size: 36px;
        line-height: 43px;
        padding: 15px 0px;
    }
    header .menu li.has-sub > ul li {
        color: #aaaaaa;
        font-size: 18px;
        line-height: 40px;
        letter-spacing: 1.8px;
        padding: 0px 0px;
        transition: .3s ease 0s;
    }
    header .menu li.has-sub > ul {
        margin: 20px 0px 0px;
    }
    #banner .item{
        height: 100vh;
    }
    #banner.office .item {
        height: auto;
    }
    #banner.office .bg{
        height: 100vh;
        position: relative;
    }
    #banner.office .headline{
        width: 100%;
        height: auto;
        min-height: initial;
        position: relative;
        background: rgba(186,18,34, 1);
    }
    #banner.office .headline .in {
        display: inline-block;
        width: 100%;
        position: relative;
        padding: 50px 30px;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    .office-box, .office_map {
        padding: 0px 0px;
        padding-top: 30px;
    }
    .office-box .ct, .h-map{
        padding-left: 30px;
        padding-right: 30px;
    }
    #popup .office-popup .in {
        width: 100%;
        padding: 0px 20px;
    }
    #popup .office-popup .close-popup {
        right: 20px;
    }
    #popup .office-popup .scroll {
        padding: 30px;
    }
    #popup-map .close-map {
        top: 30px;
        right: 20px;
        opacity: 1;
    }
    .h-cate {
        font-size: 36px;
        line-height: 42px;
        margin-top: 0px;
        margin-bottom: 20px;
        /* text-align: center; */
    }
    #banner.project .headline .in{
        padding: 30px 40px 20px;
    }
    #banner.project .bg{
        height: 100vh;
    }
    .xs-pt-20{
        padding-top: 20px;
    }
    .p-box {
        height: auto;
    }
    .p-box i{
        right: 0px;
    }
    .p-desc{
        padding-left: 40px;
        padding-right: 40px;
    }
    .info{
        padding-left: 30px;
        padding-right: 30px;
    }
    .news-box{
        padding: 0px;
    }
    .news .col-sm-6:last-child{
        float: right;
        padding-left: 40px;
        padding-right: 40px;
    }
    .contact{
        padding: 0px 30px;
        margin-top: -30px;
    }
    .contact-space{
        height: 77px;
    }
    #map{
        height: calc(100vh - 77px);
        max-height: initial;
    }
    .sp.related .col-sm-4{
        width: 100%;
    }
    .news:first-child{
        margin-top: 0px;
    }
    footer a:hover{
        color: #888;
    }
    .p-desc {
        margin: 30px 0px 5px;
    }
    .sa-btn {
        margin: 0px 0px;
    }
    .m_pb40{
        padding-bottom: 40px;
    }
    .sp .box {
        height: 68.3vw;
    }
    .sp.related .col-sm-4 .box .text{
        zoom: 1;
    }
    .m_pb60{
        padding-bottom: 60px;
    }
    .office-box .ct{
        padding-top: 0px;
        padding-bottom: 20px;
    }
    .office-box .ct .min_height_box_office .read_more_pos {
      left: 30px;
    }
    .office-box{
        padding-top: 0px;
    }
    .office-box .ct h2 {
        font-size: 34px;
        line-height: 39px;
    }
    .office-box:first-child{
        margin-top: -40px;
    }
    .m_mb10{
        margin-bottom: 10px;
    }
    .owl-dot {
        width: 5px;
        height: 5px;
        margin: 0px 3px;
    }
    .margin_related {
      margin-left: 30px;
      margin-bottom: 8px;
      color: #BA1222;
      font-size: 22px;
    }
    .position_footer_atag {
      margin-left: -30px;
    }
    .p_relate {
      margin-left: 30px;
    }
    .position_text_footer {
      left: 0px;
      right: 0px;
      margin-left: auto;
      margin-right: auto;
    }

}