[v-cloak] {
    display: none;
}

* {
    position: relative;
}

*::scrollbar,
*::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
}

a,
a:hover {
    color: #333;
    text-decoration: none;
}

select:focus,
input:focus,
textarea:focus {
    box-shadow: none !important;
    outline: none !important;
}
.blockUI{
    z-index: 9999 !important;
}
.blockUI.blockMsg{
    padding: 30px 15px !important;
    border: none !important;
    color: #fff !important;
    background:  rgba(0,0,0,0.5) !important;
    border-radius: 15px !important;
}
header{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 110px;
    background-color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10%;
    box-shadow: 0px 2px 2px #666;
    z-index: 99;
}
main{
    margin-top: 110px;
    min-height: 100vh;
}
img{
    max-width: 100%;
}
header a.logo{
    /*max-height: 100%;*/
    height: 100px;
    padding: 5px 0px;
    flex-shrink: 0;
}
header a.logo img{
    max-height: 100%;
}
header nav{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}
header nav ul{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: end;
    height: 100%;
    padding: 0px;
    margin: 0px;
    padding-right: 15px;
}
header nav ul li,
header nav ul li .subLi{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
header nav ul li > a,
header nav ul li .subLi > a{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /*padding: 0px 20px;*/
    width: 90px;
    font-size: 16px;
    height: 100%;
    transition: all .5s;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
header nav ul li > a:hover,
header nav ul li .subLi > a:hover{
    border-top-color: #9e0625;
}
header nav ul li > a img,
header nav ul li .subLi > a img{
    width: 25px;
    max-height: 25px;
    margin-bottom: 5px;
}

header nav ul li .subMenu{
    position: absolute;
    background-color: #fff;
    box-shadow: 2px 5px 10px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 120px;
    padding: 15px;
    border-top: 5px solid #9e0625;
    transition: all .5s;
    visibility: hidden;
    z-index: -1;
    top: 120px;
    opacity: 0;
}
header nav ul li:hover .subMenu{
    visibility: visible;
    top: 90px;
    opacity: 1;
    z-index: 999;
}
header nav ul li .subMenu a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 3px 0px;
    transition: all .5s;
}
header nav ul li .subMenu a:hover{
    color: #9e0625
}
header nav .contact{
    background-color: #000;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 50px;
}
header nav .contact a{
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px 10px;
}
header nav .contact a i{
    font-size: 2em;
}
footer{
    background-color: #D5D5D5;
    padding: 60px 0px;
    color: #707070;
}
footer .top{
    display: flex;
    align-items: start;
    justify-content: space-between;
}
footer .top .left .btn-store{
    color: #707070;
    border: 1px solid #707070;
    padding: 5px 15px;
    border-radius: 5px;
}
footer .top .left ul{
    list-style-type: none;
    padding: 0px;
    margin-top: 30px;
}
footer .top .left ul li{
    margin: 10px 0px;
    font-size: 14px;
}
footer .top .right{
    display: flex;
    align-items: center;
    justify-content: end;
}
footer .top .right a{
    font-size: 36px;
    margin-left: 15px;
}
footer .top .right a.fb{
    color: #1877F2;
}
footer .top .right a.line{
    color: #00B900;
}
footer .top .right a.ig{
    color: #AC3DA2;
}
footer .bottom{
    border-top: 1px solid #999;
    margin-top: 30px;
    padding-top: 30px;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
footer .bottom a{
    margin: 0px 10px;
}
footer .bottom span{
    margin-left: 30px;
}
footer .bottom img{
    width: 150px;
}
.banner{
    width: 100%;
    background-color: #ccc;
}
.bannerSwiper{
    width: 100%;
    overflow: hidden;
}
.bannerSwiper .photo{
    width: 100%;
    padding-top: 40%;
    background-size: cover;
    background-position: center;
}
.btnFixSearch,
.btnFixSearch:hover{
    position: fixed;
    right: 15px;
    bottom: 15px;
    width: 45px;
    height: 45px;
    background-color: #720002;
    color: #fff;
    z-index: 100;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.searchWrap{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 123;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
}
.searchWrap.open{
    visibility: visible;
    opacity: 1;
}
.searchWrap .searchBox .btnClose{
    position: absolute;
    width: 30px;
    height: 30px;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 5px;
    top: 5px;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.searchWrap .searchBox .btnClose i{
    margin: 0px;
}
.searchWrap .mask{
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0px;
    top: 0px;
    background-color: rgba(0,0,0,0.7);
}
.searchBox{
    background-color: #9e0625;
    color: #fff;
    width: 420px;
    z-index: 1;
    padding: 40px 30px;
    border: 5px solid #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}
.searchBox h4{
    font-size: 16px;
    margin: 0px;
    padding: 0px;
    padding-bottom: 5px;
    margin-bottom: 30px;
    border-bottom: 1px solid;
}
.searchBox h4 i{
    margin-right: 15px;
}
.searchBox .inputSearch{
    margin-bottom: 15px;
}
.searchBox .inputSearch i{
    width: 30px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: start;
}
.searchBox .inputSearch input.form-control{
    border: none;
    background-color: transparent;
    color: #fff;
    border-radius: 0px;
    border-bottom: 1px solid #fff;
    padding-left: 30px;
    height: 40px;
}
.searchBox .inputSearch input.form-control::placeholder{
    color: #fff;
}
.searchBox ul{
    list-style-type: none;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.searchBox ul li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    cursor: pointer;
}
.searchBox ul li.cust{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.searchBox ul li.cust b{
    margin: 0px 5px;
}
.searchBox ul li.cust .form-control{
    height: 50px;
    box-shadow: none;
    text-align: center;
    color: #9e0625;
    font-family: Arial;
    font-weight: bold;
    font-size: 18px;
}
.searchBox ul li.cust span{
    position: absolute;
    right: 0px;
    top: 0px;
    color: #9e0625;
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.searchBox ul li label{
    margin: 0px;
    width: 100px;
    background-color: #fff;
    color: #9e0625;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin-right: 10px;
    flex-shrink: 0;
}
.searchBox ul li select,
.searchBox ul li .item{
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #fff;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    padding-left: 15px;
    overflow: hidden;
    background: #9e0625;
    color: #fff;
    appearance: none; /* 移除原生 select 樣式 */
    -webkit-appearance: none; /* Chrome, Safari, Opera */
    -moz-appearance: none; /* Firefox */
    z-index: 1;
}
.searchBox ul li select:focus{
    background: transparent;
    color: #fff;
    border-bottom: 1px solid #fff;
}
.searchBox ul li.price select,
.searchBox ul li.price select:focus{
    background-color: #fff;
    color: #9e0625;
    border-radius: 5px;
}
.searchBox ul li i,
.searchBox ul li .item i{
    position: absolute;
    right: 15px;
    top: 0px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: end;
    width: 30px;
    background-color: #9e0625;
}
.searchBox ul li.price i{
    color: #000;
    z-index: 1;
    background-color: #fff;
    right: 15px;
}
.searchBox ul li .item span{
    min-width: 65px;

}
.searchBox ul li .item span{
    content: '';
}
.searchBox ul li .item span:after{
    content: '、';
}
.searchBox ul li .item span:nth-last-child(2):after{
    content: '';
}
.searchBox ul li .price{
    width: 100%;
    height: 50px;
    background-color: #fff;
    color: #9e0625;
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    border-radius: 5px;
    padding: 0px 20px;
}
.searchBox ul li .price i{
    position: absolute;
    right: 15px;
    top: 0px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}
.searchBox p{
    width: 100%;
    text-align: center;
    opacity: 0.5;
    font-size: 14px;
    cursor: pointer;
    margin: 30px 0px;
}
.searchBox .btn{
    background-color: #000;
    color: #fff;
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.searchBox .btn i{
    position: absolute;
    right: 15px;
    top: 0px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.banner .links{
    display: flex;
    align-items: center;
    justify-content: end;
    background-color: #eee;
    height: 70px;
    padding-right: 10%;
}
.banner .links a{
    width: 130px;
    height: 35px;
    border-radius: 15px;
    border: 1px solid #666;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25px;
    font-size: 14px;
}
.banner .links a:hover{
    background-color: #666;
    color: #fff;
}
.section-title{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 30px 0px;
    margin-top: 120px;
}
.section-title h3{
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #9e0625;
}
.section-title p{
    margin: 0px;
    color: #000;
    font-weight: bold;
}
.error404{
    width: 100%;
    top: 110px;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #838689;
}
.error404 i{
    font-size: 5em;
    border: 5px solid;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}
.error404 p{
    margin-bottom: 5px;
}
.indexPhoto3{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
.indexPhoto3 .photo.w50{
    width: calc(50% - 10px);
    margin-bottom: 20px;
}
.indexPhoto3 .w50 .img{
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
}
.indexPhoto3 .w100 .img{
    width: 100%;
    padding-top: calc(56.25% / 2);
    background-size: cover;
    background-position: center;
}
.indexTops .img{
    width: 100%;
    padding-top: 75%;
    background-size: cover;
    background-position: center;
}
.photo p.photo-text{
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: rgb(221 175 113 / 70%);
    width: 100%;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    letter-spacing: 2px;
    font-size: 20px;
}
.indexTops{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}
.indexTops .photo{
    width: calc(100% / 3 - 10px);
}
.swiper-photos{
    width: 100%;
    overflow: hidden;
}

.swiper-photos .swiper-wrapper .swiper-slide{
    width: calc(100% / 2);
    transform: scale(0.8);
    transition: all 1s;
    /*border-radius: 15px;*/
    overflow: hidden;
    margin: 0px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-shadow: 0px 0px 0px;
    padding-top: 30%;
}
.swiper-photos .photo{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    background-size: cover;
    background-position: center;
}
.swiper-photos .photo p{
    display: none;
}
.swiper-photos .swiper-slide-active .photo p{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 30%;
    height: 100%;
    background-color: rgba(0, 153, 234, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-align: center;
    padding: 10px;
}
.swiper-photos .swiper-slide-active .photo p.green{
    background-color: rgb(40 167 69 / 0.9);
}
.swiper-photos .swiper-wrapper .swiper-slide.swiper-slide-active{
  transform: scale(1.3);
  opacity: 1;
  z-index: 1;
}
.swiperNext{
    position: absolute;
    right: 0px;
    top: 0px;
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: rgba(0,0,0,0.5);
    font-size: 24px;
}
.swiperPrev{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: rgba(0,0,0,0.5);
    font-size: 24px;
}
.flex-more{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    margin-bottom: 120px;
}
.flex-more a.btn-more{
    background-color: #9E0524;
    color: #fff;
    padding: 20px 60px;
    border-radius: 5px;
    letter-spacing: 2px;
}
.quickSection{
    background-image: url(https://arkproject.s3.ap-east-1.amazonaws.com/tiancai/img/quick.png);
    width: 100%;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.quickSection .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.quickSection .container > *{
    width: calc(100% / 3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.quickSection .container img{
    width: 120px;
}
.quickSection .container a{
    color: #fff;
    transition: all .5s;
}
.quickSection .container a:hover{
    transform: scale(1.1);
}
.quickSection .center h4{
    font-size: 30px;
    margin-bottom: 15px;
}
.quickSection .center p{
    margin: 0px;
}
.quickSection .container .left p,
.quickSection .container .right p{
    border: 2px solid #fff;
    margin: 0px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 60px;
    border-radius: 5px;
    letter-spacing: 2px;
    font-size: 20px;
}
.recommends{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 120px;
}
.recommends a{
    width: calc(100% / 3 - 15px);
}
.recommends .photo{
    width: 100%;
    padding-top: 75%;
    background-size: cover;
    background-position: center;
}
.recommends a p{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2em;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
    letter-spacing: 2px;
    font-weight: bold;
}

.breadCrumbs{
    background-color: #F4F4F4;
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
}
.breadCrumbs span{
    margin: 0 10px;
    color: #000;
}
.breadCrumbs span:nth-child(1){
    color: #811C21;
}
.pageTitleArea{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.pageTitle, .storeName{
    font-size: 48px;
    font-weight: bold;
    color: #811C21;
}
.pageTitleArea .content{
    font-weight: bold;
    font-size: 18px;
}
.mapDistrictArea{
    padding: 100px 0;
    width: 100%;
}
.mapDistrictArea::before, .mapDistrictArea::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #E6E6E6;
    width: 100%;
    height: 50px;
}
.mapDistrictArea::after{
    top: initial;
    bottom: 0;
}
.mapArea{
    width: 450px;
    height: 550px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    background-color: #f1f1f1;
}
.mapArea::-webkit-scrollbar{
    color: transparent;
    width: 0;
    height: 0;
}

.districtListArea{
    width: calc(100% - 450px);
    padding-left: 50px;
}
.districtList{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

}
.districtList>div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% / 6);
    margin-bottom: 15px;
}
.districtList>div>i{
    margin-right: 5px;
}
.districtListArea hr{
    border-top: 4px solid rgba(0, 0, 0, 0.1);
}
.houseInfo{
    padding: 100px 0;
}
.houseInfoTable{
    width: 100%;
    margin-top: 30px;
}

.houseInfoTable td{
    border-top: 1px solid #ddd;
    padding: 30px 15px;
}
.houseInfoTable td:nth-last-child(1){
    border-bottom: 1px solid #ddd;
}
.houseInfoTable td:nth-child(odd){
    background-color: #f4f4f4;
    width: 15%;
    text-align: center;
}
.houseInfoTable td:nth-child(even){
    width: 35%;
}

.houseInfo .required{
    color: #9e0524;
    font-weight: bold;
    margin-left: 5px;
}
.typeSelect{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.typeSelect .typeOne{
    width: 25%;
    margin: 5px 0;
    cursor: pointer;
}
.inputStyle01{
    border: 2px solid #A3A2A2;
    border-radius: 5px;
    height: 55px;
    width: 220px;
    padding: 0 10px;
    background-color: #fff;
}
.inputStyle02{
    border: 1px solid #A3A2A2;
    border-radius: 5px;
    height: 45px;
    width: 80%;
    padding: 0 10px;
    background-color: #fff;
}
.policyContent p,
.serviceContent p{
    text-align: justify;
    margin-bottom: 30px;
}
.policyContent ul{
    padding-left: 25px;
    margin-bottom: 30px;

}
.topBtn{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 50px auto;
    color: #9E0524;
    font-size: 18px;
}
.topBtn i{
    font-size: 24px;
    margin-bottom: 5px;
}
.sendBtn, .btnStyle01{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    color: #fff;
    width: 200px;
    height: 50px;
    border-radius: 5px;
    padding: 0 25px;
}
.showHouseArea{
    background-color: #F4F4F4;
}
.filterBox{
    background-color: #e1e1e1;
    padding: 50px 30px;
    width: 250px;
    margin-right: 30px;
    flex-shrink: 0;
}
.filterBox .cust{
    width: 100%;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filterBox .cust div{
    display: flex;
    align-items: center;
}
.filterBox .cust div input{
    width: 100%;
}
.filterBox .cust b{
    width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filterBox .cust div span{
    position: absolute;
    right: 10px;
    color: #ccc;
}
.filterBox .localText span{
    content: '';
    cursor: pointer;
}
.filterBox .localText span:after{
    content: '、';
}
.filterBox .localText span:nth-last-child(1):after{
    content: '';
}
.filterBox .localText span i{
    font-size: 12px;
    color: #666;
    margin-left: 2px;
}
.filterBox p.clear{
    margin: 0px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: end;
    border-top: 1px dashed #999;
    color: #999;
    font-size: 12px;
    padding-top: 5px;
    cursor: pointer;
}
.filterBox p.clear i{
    margin-left: 3px;
}
hr.white{
    border-top: 2px solid #fff;
}
.chooseLocation{
    width: 100%;
    height: 50px;
    background-color: #fff;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    border-radius: 5px;
    box-shadow: inset 0px 0px 7px 2px rgba(0 ,0 ,0 ,0.1);
}
.searchObj>div{
    margin: 15px 0;
    cursor: pointer;
}
.showHouseBox{
    width: calc(100% - 250px);
}
.funcBar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    color: #fff;
    height: 65px;
    z-index: 2;
    background-color: #9E0524;
}
.rent .funcBar{
    background-color: #FFD996;
}
.factory .funcBar,
.land .funcBar{
    background-color: #ACE2D7;
}
.showHouseArea .container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.funcBar .funcBtns>button{
    margin: 0 5px;
    color: #fff;
    padding: 5px 10px;
}
.factory .funcBar .funcBtns>button,
.land .funcBar .funcBtns>button,
.rent .funcBar .funcBtns>button{
    color: #000;
}
.funcBar .funcBtns>button.active{
    color: #9E0524;
    background-color: #fff;
}
.factory .funcBar .funcBtns>button.active,
.land .funcBar .funcBtns>button.active,
.rent .funcBar .funcBtns>button.active{
    color: #000;
}
.funcBar button i{
    color: #fff!important;
}
.factory .funcBar button i
.land .funcBar button i,
.rent .funcBar button i{
    color: #000;
}
.searchBoard{
    position: absolute;
    left: 0;
    top: 65px;
    width: 80%;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.searchBoard span{
    border: 1px solid #9a9a9a;
    color: #9a9a9a;
    padding: 3px 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.expendBox{
    position: absolute;
    right: 0;
    top: 65px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: all .5s;
    z-index: -1;
    visibility: hidden;
    /*background-color: #fff;*/
}
.expendBox.open{
    opacity: 1;
    z-index: 1;
    visibility: visible;
}
.expendBox div{
    text-align: center;
    padding: 5px 30px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
}
.expendBox div:hover{
    background-color: #f4f4f4;
}
.houseBoard{
    background-color: #fff;
    margin: 15px 0;
    width: 100%;
    /*padding-top: 30px;*/
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all .5s;
    /*height: 200px;*/
}
.houseBoard:hover{
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
}
.houseBoard .photo{
    width: 300px;
    height: 100%;
    flex-shrink: 0;
    margin-right: 15px;
    background-color: #eee;
    height: 250px;
    flex-shrink: 0;
}
.houseBoard .photo .img{
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.houseBoard .tags{
    display: flex;
    flex-wrap: wrap;
}
.houseBoard .tags div.tag{
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.houseBoard .desc{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-right: 30px;
    flex-direction: column;
    padding: 15px 30px 15px 15px;
}
.houseName{
    font-size: 20px;
    color: #9E0524;
    font-weight: bold;
}
.rent .houseName,
.land .houseName,
.factory .houseName{
    color: #000;
}
.collectBtn i{
    color: #9E0524;
}
.houseBoard .tag,
.houseDetailTable .tag,
.tableStyle01 .tag{
    border: 1px solid #666;
    border-radius: 50px;
    padding: 1px 15px;
    font-size: 12px;
    margin: 0 5px;
    color: #000;
}

.houseBoard .desc .addr{
    font-size: 14px;
    font-weight: bold;
}
.houseBoard .desc .detail{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-top: 15px;
    width: 100%;
    display: flex;
}
.houseBoard .desc .detail .left > div{
    display: flex;
    align-items: center;
}
.houseBoard .desc .detail label{
    margin-bottom: 0px;
    width: 65px;
    flex-shrink: 0;
    color: #fff;
    background-color: #9e0625;
    font-size: 12px;
    padding: 2px 7px;
    margin-right: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.houseBoard .desc .detail .left{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.houseBoard .desc .detail .left > div{
    width: 50%;
}
.houseBoard .desc .detail .left > div{
    margin-bottom: 5px;
}
.houseBoard .desc .detail .price{
    font-size: 22px;
    color: #9E0524;
    font-weight: bold;
}
.houseBoard .desc .detail .price span{
    font-size: 14px;
    color: #000;
    margin-left: 15px;
}
.houseBoard .desc .detail .right{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    flex-shrink: 0;
}
.houseBoard .desc .detail .right button{
    margin-top: 30px;
    color: #747474;
    border-bottom: 1px solid #747474;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 16px;
}
.houseBoard .desc .detail .right button i{
    position: absolute;
    right: 0;
}
.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}
.pagination li{
    color: #505050;
    padding: 10px 15px;
    background-color: #e1e1e1;
    border-radius: 5px;
    margin: 5px;
    transition: all .25s ease;
    height: 45px
}
.pagination li:hover,
.pagination li.active{
    background-color: #414141;
    color: #fff;
}
.pagination .nextPage,
.pagination .lastPage{
    background-color: #fff;
    color: #000;
    border: 1px solid #707070;
    border-radius: 5px;
    height: 45px;
    padding: 5px 15px;
    margin: 5px;
    font-size: 14px;
}
.pagination .nextPage{
    border-bottom-right-radius: 25px;

}
.houseDetailArea{
    background-color: #f4f4f4;
    padding-bottom: 50px;
}
.houseDetailArea .container{
    /*background-color: #fff;*/
    /*padding: 50px;*/
}
.houseDetailTable,
.tableStyle01{
    width: 100%;
}
.houseDetailTable td.photoArea,
.tableStyle01 td.photoArea{
    width: 50%;
    background-color: #fff;
    border: 0;
}
.red{
    color: #9E0524;
    font-weight: bold;
}
.houseNameTitle{
    background-color: #fff!important;
    border-top: 0;
    text-align: left!important;
    font-size: 22px;
    color: #9E0524;
    font-weight: bold;
}
.houseNameTitle .number{
    font-size: 14px;
    font-family: Arial;
}

.land .houseNameTitle,
.factory .houseNameTitle{
    color: #000;
}

.trGroup{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid #ddd;
    background-color: #f4f4f4;
}
.trGroup:nth-last-child(1){
    /*border-bottom: 1px solid #ddd;*/
}
.borderBtm0{
    border-bottom: 0!important;
}
.trGroup .label{
    padding: 15px 30px;
    text-align: center;
    /*width: 30%;*/
    width: 180px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.trGroup .info{
    padding: 15px 30px;
    width: 70%;
    background-color: #fff;
    height: 100%;
    min-height: 54px;
    /*display: flex;*/
    /*align-items: center;*/
}
.houseDetailArea .trGroup .info{
    display: flex;
    align-items: center;
}
.trGroup .info ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
.trGroup .info ul li{
    /*display: flex;*/
    /*align-items: center;*/
}
.trGroup .info ul li span{
    /*width: 100px;*/
    /*flex-shrink: 0;*/
}
.houseDetailArea .photoArea{
    margin-left: 30px;
}
.houseDetailArea .photoArea .photo{
    width: 100%;
    padding-top: 75%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.houseDetailArea .photoArea .photoSelectArea{
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
}
.houseDetailArea .photoArea .photoSelectArea .swiper-slide{
    width: calc(100% / 3.5 - 10px);
    margin-right: 10px;
}
.houseDetailArea .photoArea .photoSelectArea .photoThumb{
    width: 100%;
    padding-top: calc(100% / 4 * 3);
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.houseDetailArea .photoArea .photoSelectArea::-webkit-scrollbar{
    color: transparent;
    width: 0;
    height: 0;
}
.houseDetailArea .photoArea .photoDesc{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255,255,255,0.7);
    color: #000;
    padding: 10px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-weight: bold;
    font-size: 14px;
}
.btnStyle02{
    background-color: #9E0524;
    color: #fff;
    border-radius: 15px;
    font-size: 14px;
    padding: 5px 15px;
    margin: 15px;
}
.factory .btnStyle02{
    background-color: #ACE2D7;
    color: #000;
    border: 1px solid #000;
}
.btnStyle03{
    border: 3px solid #fff;
    border-radius: 5px;
    margin: 15px;
    padding: 20px 0;
    color: #fff;
    width: 200px;
    font-size: 18px;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.btnStyle04{
    border-radius: 100px;
    margin: 30px;
    padding: 10px 25px;
    background-color: #FDCAC3;
    min-width: 200px;
    height: 60px;
    font-size: 22px;
    font-weight: bold;
}
.btnStyle05{
    border-radius: 100px;
    margin: 30px;
    padding: 10px 25px;
    background-color: #FC816F;
    color: #fff;
    min-width: 200px;
    height: 60px;
    font-size: 22px;
    font-weight: bold;
}
.tableFlex{
    display: flex;
    justify-content: space-between;
    /*align-items: flex-start;*/
    flex-wrap: wrap;
    border: 1px solid #eee;
}
.noBt{
    border-top: none;
}
.h55px{
    height: 55px;
}
.h110px{
    height: 110px;
}
.h165px{
    height: 165px;
}
.trGroup02{
    width: 100%;
}
.trGroup02 .label{
    width: 180px;
    flex-shrink: 0;
    padding: 15px 20px;
}

.trGroup02 .info{
    width: 85%;
    height: 100%;
    min-height: 54px;
}
.trGroup02 .info > span{
    margin-right: 5px;
}
.trGroup02 .info p{
    margin:0px;
}
.calculation{
    border: 1px solid #ACACAC;
    color: #ACACAC;
    font-size: 12px;
    border-radius: 50px;
    padding: 0px 15px;
}
.info span.item{
    margin:5px 0px;
    margin-right: 15px;
}
.subTitle{
    font-size: 22px;
    font-weight: bold;
    padding: 50px 0;
}
.googleMapArea iframe{
    width: 100%;
}
.linkBtn{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;
}
.lineBtn{
    height: 30px;
    width: 30px;
}
.lineBtn i{
    color: #00B900;
    font-size: 30px;
    line-height: 1em;
}
.linkBtn{
    background-color: #9E0524;
}
.linkBtn i{
    color: #fff;
}
.mailBtn i{
    color: #0F87FF;
    font-size: 30px;

}
a.lineme{
    color: #00B900;
    width: 30px;
    height: 30px;
    margin-left: 15px;
    border-radius: 5px;
    font-size: 30px;
    line-height: 1em;
}
#msgModal .modal-header{
    background-color: #9E0524;
    color: #fff;
}
#msgModal .modal-header .close{
    opacity: 1;
}
#msgModal .modal-header .close span{
    background-color: #fff;
    color: #9E0524;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
}
#msgModal .msgInfo{
    background-color: #EDEDED;
    color: #9E0524;
    text-align: center;
    padding: 15px 30px;
}
.inputStyle03{
    width: 100%;
    padding: 5px 15px;
    border: 1px solid #D1D1D1;
    border-radius: 10px;
    margin: 5px 0;
}
#msgModal .inputStyle03{
    height: 50px;
}
#msgModal textarea.inputStyle03{
    padding: 15px;
    height: 150px;
}
#msgModal .modal-content{
    padding-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
}
#msgModal .btnStyle02{
    height: 50px;
    width: 200px;
    border-radius: 25px;
}
.photoArea .btnStyle02{
    padding: 10px 25px;
    border-radius: 25px;
    margin: 5px 0px;
    margin-left: 15px;
}
.processList{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.processList .processBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin: 0 30px;
}
.processList .processBox::after{
    content: url('https://arkproject.s3.ap-east-1.amazonaws.com/tiancai/img/process/body_icon_redright.png');
    position: absolute;
    right: -35px;
    top: 30px;
}
.processList .processBox:nth-last-child(1)::after{
    content: '';
}
.processList .processBox .icon{
    width: 100px;
}
.processList .processBox .step{
    margin-top: 15px;
}
.processList .processBox .step,
.processList .processBox .processName,
.processDetail .step,
.processDetail .processName{
    color: #9E0524;
    font-size: 20px;
    font-weight: bold;
}
.processList .processBox .tag,
.processDetail .tag{
    border: 1px solid #9E0524;
    color: #9E0524;
    padding: 2px 10px;
    border-radius: 50px;
}
.processDetail{
    background-color: #E6E6E6;
    padding: 30px 0 60px 0;
}
.boxBoard{
    background-color: #fff;
    padding: 30px;
    width: 100%;
    margin-bottom: 60px;
}
.processDetail .icon{
    width: 100px;
    margin-right: 15px;
}

.processDetail .boxBoard::after{
    content: url('https://arkproject.s3.ap-east-1.amazonaws.com/tiancai/img/process/body_icon_reddown.png');
    position: absolute;
    bottom: -45px;
    left: 50%;
    transform: translateX(-50%);
}
.processDetail .boxBoard:nth-last-child(1)::after{
    content: '';
}
.hide-web{
    display: none;
}
.modal-content{
    border-radius: 30px;
    overflow: hidden;
}
.modal-header{
    background-color: #9E0524;
    color: #fff;
    padding: 20px 30px;
}
.modal-header button span{
    color: #fff;
}
.modal-body{
    padding: 30px;
}
.localModal .modal-body{
    display: flex;
    align-items: start;
    flex-wrap: wrap;
}
.localModal .mapArea{
    flex-shrink: 0;
    width: 400px;
    height: 400px;
}
#svgImage {
  position: absolute;
  bottom: -50px;
}
#svgImage path,
#svgImage text{
    cursor: pointer;
}
.localModal .kh #svgImage{
    left: -50px;
    bottom: -50px;
}
.localModal .pt #svgImage{
    left: 0%;
    bottom: auto;
    top: -30%;
}

.localModal .locals{
    width: calc(100% - 400px);
    padding-left: 15px;
}
.localModal .locals.w100{
    padding-left: 0px;
    width: 100%;
}
.localModal .city{
    width: 100%;
    margin-bottom: 15px;
}
.localModal .city .form-control{
    width: 150px;
    height: 40px;
    border: 1px solid #000;
}
.localModal .locals ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    margin-top: -10px;
}
.localModal .locals ul li{
    margin: 5px;
    cursor: pointer;
}
.localModal .locals .btns{
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 30px;
}
.localModal .btns .btn{
    background-color: #9E0524;
    color: #fff;
    width: 40%;
    height: 40px;
    border-radius: 0px;
}

.pageTitleBgArea{
    width: 100vw;
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*padding-bottom: 100px;*/
    background-size: cover;
}
.pageTitleBgArea02{
    width: 100vw;
    height: 35vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.teamArea .bgc{
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
    background-attachment: fixed;
}
/*.rankArea{
    background-image: url(https://arkproject.s3.ap-east-1.amazonaws.com/tiancai/img/about/07.png);
    background-position:  top;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    padding-top: 600px;
    margin-top: -500px;
    background-size: cover;
}*/
.rankArea .rankList{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.rankArea .rankList .boxOne{
    width: calc(100% / 4 - 10px);
    padding: 50px 30px;
    background-color: #E0E0E0;
    height: 535px;
    margin: 15px 5px;

}
.rankArea .rankList{
    margin-top: 30px;
}
.rankArea .rankList .boxOne .photo{
    width: 100%;
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.rankArea .rankList .boxOne .content{
    margin-top: 15px;

}
.newsArea{
    padding: 100px 0;
    background-color: #F7F7F7;
}
.newsArea::before{
    content: '';
    background-color: #E6E6E6;
    width: 100%;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
}
.newsBoard{
    width: 100%;
    background-color: #fff;
    height: 300px;
    margin: 30px 0;
}
.newsBoard .photo{
    width: 400px;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.newsBoard .content{
    width: calc(100% - 400px);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    padding: 30px;
}
.newsBoard .newsTitle{
    font-size: 28px;
    font-weight: bold;
    color: #9E0524;
    margin: 5px 0;
}
.newsBoard .desc{
    text-align: justify;
}
.tags{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;
}
.tags .tag{
    border: 1px solid #666;
    padding: 5px 15px;
    border-radius: 100px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.tags .tagStyle02{
    border-radius: 10px;
    border: 1px solid #666;
    padding: 5px 15px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.honorFlag{
    position: absolute;
    left: 0;
    margin-left: -30px;
    bottom: 15px;
}
.white{
    color: #fff;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.3));
}
.posBtm{
    position: absolute;
    bottom: 15px;
}
.recruitArea{
    padding: 100px 0;
}

.recruitTxtDecBg::before{
    content: '';
    position: absolute;
    left: 45%;
    top: -100px;
    width: 350px;
    height: 350px;
    background-color: #F4F4F4;
    border-radius: 100%;
}
.recruitTxtDecBg::after{
    content: '';
    position: absolute;
    left: 50%;
    top: -50px;
    margin-left: -490px;
    width: 500px;
    height: 500px;
    background-color: #FFE7D1;
    border-radius: 100%;
}
.recruitTitle{
    display: flex;
    justify-content: center;
    align-items: center;
}
.recruitTxtBox{
    padding: 150px 0;
}
.recruitList{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 200px;
}
.recruitList .box{
    width: calc(100% / 3);
    padding-top: calc(56.25% / 3);
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.recruitList .box::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(255, 255, 255, 0.2);*/
}
.businessArea .box::after{
    background-color: transparent;
}
.recruitList .white{
    position: absolute;
    top: 50%;
    margin-top: -20px;
    font-size: 40px;
}
.recruitArea .formArea{
    padding: 100px;
    width: 100%;
    background-image: url(https://arkproject.s3.ap-east-1.amazonaws.com/tiancai/img/recruitment/body_pic5_bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 100px;
}
.recruitArea .formArea .container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.recruitArea .formArea .subTitle{
    padding: 30px 0;
}
.recruitArea .formArea .formBox{
    padding: 100px;
    width: 100%;
    background-image: url(https://arkproject.s3.ap-east-1.amazonaws.com/tiancai/img/recruitment/body_pic5_bg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}
.recruitArea .formArea .formBox::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
}
.recruitArea .formBox .steps{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.recruitArea .formBox .steps>div{
    width: 65px;
}
.recruitArea .formBox .steps::before{
    content: '';
    width: calc(100% - 55px);
    height: 5px;
    background-color: #F49B43;
    position: absolute;
    top: 12px;
    margin-left: 30px;
}
.recruitArea .formBox .steps .stepDot{
    width: 25px;
    height: 25px;
    background-color: #F49B43;
    border: 3px solid #F49B43;
    border-radius: 100%;
    margin-bottom: 15px;
}
.recruitArea .formBox .steps .stepDot.active{
    background-color: #fff;
}
.h50px{
    height: 50px;
}
.h150px{
    height: 150px;
}
.h170px{
    height: 170px;
}
.formArea button.btnStyle01{
    margin: 50px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent linear-gradient(180deg, #FFE7D1 0%, #F49B43 100%) 0% 0% no-repeat padding-box;;
}
.locationArea{
    padding: 100px 0;
}
.locationArea::before{
    content: '';
    background-color: #E6E6E6;
    width: 100%;
    height: 60px;
    position: absolute;
    left: 0;
    top: 0;
}
.locationArea .storeBox{
    margin: 50px 0 150px 0;
}
.locationArea .storeBox .logo{
    width: 180px;
}
.locationArea .storePhoto{
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    margin-top: 30px;
}
.locationArea .storePhoto .box{
    width: calc(100% / 3);
    padding-top: calc(66% / 3);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.locationArea .storeInfo{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}
.locationArea .storeInfo .left{
    width: calc(100% - 230px);
}
.locationArea .storeInfo .right{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
}
.blogArea{
    padding: 100px 0;
    background-color: #f4f4f4;
}
.blogBoard{
    background-color: #fff;
    margin: 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all .5s;
}
.blogBoard:hover{
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
}
.blogBoard .photo{
    width: 400px;
    height: calc(400px / 16 * 9);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    flex-shrink: 0;
    margin-right: 15px;
    background-color: #eee;
}
.blogBoard .content{
    width: calc(100% - 300px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px 30px;
    flex-direction: column;
}
.blogBoard .content .taj{
    height: 45px;
    margin-bottom: 0px;
    overflow: hidden;
}
.blogTitle{
    color: #9D7300;
    font-size: 28px;
    margin: 15px 0;
}
.blogBoard .tags{
    display: flex;
    flex-wrap: wrap;
    height: 35px;
    overflow: hidden;
}
.blogBoard .tags div.tag{
    margin-left: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid #666;
    padding: 3px 10px;
    border-radius: 50px;
}
.title{
    font-weight: bold;
    font-size: 32px;
}
.blogDetailArea{
    padding: 100px 0;
}
.blogDetailArea .photoArea .photo{
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.blogDetailArea .photoThumb{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*flex-wrap: nowrap;*/
    /*overflow-x: auto;*/
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
}
.blogDetailArea .photoThumb::-webkit-scrollbar{
    color: transparent;
    width: 0;
    height: 0;
}
.blogDetailArea .photoThumb .swiper-slide{
    width: calc(100% / 4.5 - 10px);
    padding-top: calc(56.25% / 4.5);
    margin-right: 10px;
    flex-shrink: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.blogContent .designer{
    color: #ccc;
}
.blogContent a{
    color: #3A89C9;
}

.blogContent img{
    max-width: 100%;
    height: auto !important;
}

.blogContent p{
    line-height: 2em;
}
.contactBox{
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #fff;
    cursor: pointer;
}
.contactBox>div{
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2));
}
.contactBox .contactBtn{
    font-weight: bold;
    font-size: 28px;
    padding: 10px 20px;
    border: 2px solid #fff;
    border-radius: 5px;
}
.blogConsultArea{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 200px 0;
    min-height: 100vh;
}
.blogConsultArea::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
}
.blogConsultArea .form{
    width: 700px;
    max-width: 100%;
}
.blogConsultArea .form .inputStyle03{
    border-radius: 5px;
}
.blogConsultArea  .btnStyle03{
    /*background-color: rgba(255,255,255,0.5);*/
}
.qaArea, .tbArea{
    background-color: #F4F4F4;
    padding: 100px 0;
}
.qaArea .menuList,
.tbArea .menuList{
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    top: -80px;
}
.qaArea .menuList li,
.tbArea .menuList li{
    width: calc(100% / 3 + 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    padding: 15px;
    height: 80px;
    border-top-left-radius: 30px;
    z-index: 1;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
}
.qaArea .menuList li img{
    width: auto;
    height: 40px;
}
.qaArea .menuList li:nth-child(1){
    background-color: #ACE2D7;
    z-index: 3;
}
.qaArea .menuList li:nth-child(2){
    background-color: #65C9FD;
    margin-left: -30px;
    z-index: 2;
}
.qaArea .menuList li:nth-child(3){
    background-color: #FFD381;
    margin-left: -30px;
    z-index: 1;
}

.tbArea .menuList li:nth-child(1){
    background-color: #FDCAC3;
    z-index: 2;
}
.tbArea .menuList li:nth-child(2){
    background-color: #FC816F;
    margin-left: -30px;
    z-index: 1;
}

.qaArea .menuList li.active,
.tbArea .menuList li.active{
    z-index: 10;
}
.qaArea .board,
.tbArea .board{
    padding: 0;
    /*overflow: hidden;*/
    border-top-left-radius: 0;
    border-top-right-radius: 0;

}
.btmBoard{
    margin-top: -80px;
}
.qaArea .contentArea,
.tbArea .contentArea{
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 50px;
}
.qaArea .contentArea .leftMenu,
.tbArea .contentArea .leftMenu{
    width: 25%;
    list-style-type: none;
}
.qaArea .contentArea .leftMenu li,
.tbArea .contentArea .leftMenu li{
    border-bottom: 1px solid #666;
    padding: 15px;
    text-indent: 1em;
    font-weight: bold;
    cursor: pointer;
    transition: all .25s ease;
}
.qaArea .contentArea.school .leftMenu li.active a,
.qaArea .contentArea.school .leftMenu li:hover a{
    color: #ACE2D7;
}
.qaArea .contentArea.policy .leftMenu li.active a,
.qaArea .contentArea.policy .leftMenu li:hover a{
    color: #65C9FD;
}
.qaArea .contentArea.qa .leftMenu li.active a,
.qaArea .contentArea.qa .leftMenu li:hover a{
    color: #FFC457;
}
.tbArea .contentArea .leftMenu li.active a,
.tbArea .contentArea .leftMenu li:hover a{
    color: #FC816F;
}
.qaArea .contentArea .leftMenu>li::before{
    content: '';
    position: absolute;
    left: 5px;
    top: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #ACE2D7;
}
.tbArea .contentArea .leftMenu>li::before{
    content: '';
    position: absolute;
    left: 5px;
    top: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #FC816F;
}


.qaArea .contentArea.qa .leftMenu>li::before{
    background-color: #FFC457;
}
.qaArea .contentArea .leftMenu ol{
    list-style-type: none;
}
.qaArea .contentArea .leftMenu ol li::before{
    content: '';
    position: absolute;
    left: 5px;
    top: 20px;
    width: 10px;
    height: 10px;
    background-color: #93B7B0;

}

.qaArea .contentArea.qa .leftMenu ol li::before{
    background-color: #FFC4579A;
}
.qaArea .contentArea .content,
.tbArea .contentArea .content{
    width: 70%;
}
.qaArea .contentArea .content .blogContent{
    padding: 30px;
    background-color: #f9f9f9;
    margin-top: 30px;
}
.qaArea .contentArea .content .blogContent > img{
    width: 100%;
    height: auto !important;
    margin-bottom: 30px;
}
.qaArea .contentArea.school .content .title{
    background-color: #ACE2D7;
    padding: 15px 50px;
    border-radius: 100px;
    font-size: 28px;
}
.qaArea .contentArea.policy .content .title{
    background-color: #65C9FD;
    padding: 15px 50px;
    border-radius: 100px;
    font-size: 28px;
}

.qaArea .contentArea.qa .content .title{
    background-color: #FFD381;
    padding: 15px 50px;
    border-radius: 100px;
    font-size: 28px;
}

.tbArea .contentArea .content .title{
    background-color: #FC816F;
    padding: 15px 50px;
    border-radius: 100px;
    font-size: 28px;
}

.qaPolicyList .blogBoard{
    background-color: #F4F4F4;
}
.qaPolicyBox{
    padding: 50px 100px;
}
.qaPolicyBox .title{
    background-color: #65C9FD;
    padding: 15px 50px;
    border-radius: 100px;
    font-size: 28px;

}
.policyTitle{
    color: #0099EA;
    font-size: 28px;
    margin: 15px 0;
}
.qaPolicyDetailBox{
    padding: 30px 50px;
}
.qaPolicyDetailBox .title{
    color: #65C9FD;
    padding: 15px 50px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.qaPolicyDetailBox .subTitle{
    padding: 15px 0;
}
.qaPolicyDetailBox .linkBtns .linkBtn{
    background-color: #818181;
    border-radius: 100%;
    width: 50px;
    height: 50px;
}
.qaPolicyDetailBox .linkBtns .linkBtn i{
    font-size: 24px;
}
.qaPolicyDetailBox .linkBtnsBox{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 50px 0;
    padding: 5px 0;
}
.qaPolicyDetailBox .linkBtns{
    padding: 50px 0 80px 0;
}
.qaPolicyDetailBox .morePolicyList{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.qaPolicyDetailBox .morePolicyList .box{
    width: calc(100% / 3 - 15px);
    margin-right: 30px;
}
.qaPolicyDetailBox .morePolicyList .box:nth-last-child(1){
    margin-right: 0;
}
.qaPolicyDetailBox .morePolicyList .photo{
    width: 100%;
    padding-top: 56.25%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.qaPolicyDetailBox .morePolicyList .policyTitle{
    font-size: 20px;
    color: #0099EA;
}
.qaPolicyDetailBox .morePolicyList p{
    text-align: justify;
    height: 50px;
    overflow: hidden;
}
.recordArea{
    padding: 100px 0;
}
.recordArea::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: #E6E6E6;
    width: 100%;
    height: 50px;
}
.recordArea .showHouseBox{
    width: 100%;
}
.recordArea .filterBox{
    background-color: transparent;
    width: 100%;
}
.recordArea .filterBox .filterColumn{
    margin-right: 15px;
    font-size: 20px;
    font-weight: bold;
}
.recordArea .filterBox button{
    background-color: #525252;
    color: #fff;
    border-radius: 10px;
    height: 55px;
    width: 100px;
    margin-left: 15px;
}
.recordArea .filterBox .inputStyle01{
    width: 150px;
}
.recordArea .delBtn{
    width: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .25s ease;
}
.recordArea .delBtn:hover{
    background-color: #9E0524;
    color: #fff;
}
.methodSelect{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 400px;
    height: 60px;
    font-size: 22px;
    font-weight: bold;
    background-color: #D9D9D9;
    border-radius: 100px;
}
.methodSelect>button{
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}
.methodSelect .choose{
    position: absolute;
    left: 0%;
    background-color: #FDCAC3;
    width: 50%;
    height: 100%;
    border-radius: 100px;
    transition: all .5s ease;
}
.methodSelect .choose.choose2{
    left: 50%;
}
.greyBoard{
    background-color: #F4F4F4;
    border-radius: 20px;
    padding: 30px;
    width: 100%;
    margin: 30px 0;
}
.greyBoard .title{
    padding: 10px 30px!important;
    border-radius: 100px;
    border: 1px solid #000;
    background-color: transparent!important;
    display: inline-block;
    margin: 30px auto;
    font-size: 24px!important;
}
.greyBoard p{
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0;
}
.calcList{
    width: 50%;
}
.calcInputBox{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 50%
}
.calcW100 .calcInputBox{
    width: 100%;
}
.greyBoard .thBox{
    background-color: #FDCAC3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    height: 50px;
    border-radius: 5px;
    margin: 5px;
}
.greyBoard .tdBox{
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #666;
    height: 50px;
    border-radius: 5px;
    margin: 5px;
}
.td12Box .tdBox{
    height: 655px;
}
.borderStyle01{
    padding: 5px 25px;
    border-radius: 100px;
    border: 1px solid #000;
    margin: 5px 0;
}
.whiteBoard{
    background-color: #fff;
    padding: 30px;
    width: 100%;
    text-align: center;
    margin: 15px 0;
}
.collectBtn{
    font-size: 1.5em;
}
.consultArea .inputStyle03{
    height: 40px;
    border-radius: 5px;
    border: 1px solid #999;
}
.consultArea textarea.inputStyle03{
    height: 150px;
}
.consultArea button.tag{
    font-size: 16px;
    padding: 5px 30px;
    transition: all .5s;
    margin-top: 8px;
    margin-bottom: 8px;
}
.consultArea button.tag.active,
.consultArea button.tag:hover{
    background-color: #000;
    color: #fff;
}
.consultArea .how{
    display: flex;
    flex-wrap: wrap;
}
.consultArea .how input{
    width: 200px;
}
.consultArea .btnStyle02{
    width: 300px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 25px;
}
.cp{
    cursor: pointer;
}
img.consult{
    max-width: 280px;
}
.processArea .btnStyle02{
    width: 200px;
    height: 50px;
    border-radius: 30px;
    font-size: 16px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.processArea .btnStyle02 i{
    font-size: 20px;
    margin-left: 10px;
}
.rentFlex3 .trGroup{
    width: calc(100% / 3);
}
h3.detailTitle{
    margin: 30px 0px;
    font-size: 18px;
    padding: 0px;
}
.bb{
    border-bottom: 1px solid #ddd;
}
.rentDetail .photoArea .btnStyle02{
    background-color: #ffd996;
    color: #000;
    border:1px solid #000
}
.logoBar{
    height: 100%;
}
.closeSubMenuBtn{
    display: none;
}
.filterBox .inputSearch i{
    position: absolute;
    left: 10px;
    top: 0px;
    height: 45px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.filterBox .inputSearch .form-control{
    height: 45px;
    width: 100%;
    border: 1px solid #A3A2A2;
    padding-left: 30px;
}
p.staff{
    background-color: #D88A8A;
    width: 100%;
    padding: 10px;
    margin: 0px;
    color: #fff;
}
.trGroup.sf{
    color: #8A6A6B;
}
.temeOne{
    margin: 60px 0px;
}
.historys{
    overflow: hidden;
    margin: auto;
    margin-top: 100px;
    width: 50vw;
}
.historys .swiper-slide{
    width: auto;
}
.historys .swiper-slide img{
    height: 170px;
}
.swiper-initialized .next,
.swiper-initialized .prev{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    width: 20px;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.swiper-initialized .next{
    left: auto;
    right: 0px;
}
.bannerSwiper .next,
.bannerSwiper .prev{
    width: 50px;
    font-size: 1.5em;
    background-color: transparent;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}
#map{
    width: 100%;
    height: 600px;
    background-color: #eee;
}
.btn-clear{
    display: flex;
    align-items: center;
    justify-content: end;
    width: 100%;
    margin-top: 15px;
    color: #333;
}
.btn-clear i{
    margin-left: 5px;
}
.goToBack,
.goToBack:hover,
.goToBack:active,
.goToBack:focus{
    position: fixed;
    left: 15px;
    bottom: 15px;
    width: 60px;
    height: 60px;
    background-color: #EB613B;
    color: #fff;
    z-index: 100;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    font-size: 16px;
}
.historys{
    padding: 0px 24px;
}
.historys.swiper-initialized .next,
.historys.swiper-initialized .prev{
    background-color: #fff;
    color: #666;
    font-size: 24px;
}
ul.calculation-result{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
ul.calculation-result li{
    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 350px;
    font-size: 18px;
}
ul.calculation-result li span{
    margin-right: 5px;
    color: #db2626;
    font-weight: bold;
    font-family: Arial;
    font-size: 20px;
}
#phoneModal .modal-body{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-family: Arial;
}
.greyBoard p.info{
    width: 50%;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
}
.greyBoard p.info a{
    color: #EF746F;
}
.lb-outerContainer{
    background-color: transparent !important;
}
.lightbox .lb-image{
    border: none !important;
    transition: all 0s !important;
}
@media(min-width: 1350px){
    .container {
        max-width: 80%;
    }
}
@media(max-width: 820px){
    .hide-phone{
        display: none;
    }
    .hide-web{
        display: block;
    }
    .historys{
        width: 90vw;
    }
    .localModal .mapArea{
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .localModal .kh #svgImage{
        left: auto;
        bottom: auto;
    }
    .localModal .pt #svgImage{
        left: auto;
        bottom: auto;
        top: auto;
    }
    .consultArea .w50{
        width: 100% !important;
    }
    .greyBoard p.info{
        width: 70%;
    }
}
@media(max-width: 576px){
    header{
        /*padding-left: 0;*/
        /*background-color: #fff;*/
        /*padding: 0 15px;*/
        padding: 0;
        z-index: 999;
    }

    header nav{
        position: fixed;
        left: 0;
        top: -100%;
        width: 100vw;
        height: calc(100svh - 110px);
        background-color: #9E0524;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        transition: all .75s ease;
        opacity: 0;
        z-index: 1;
    }
    header nav ul{
        flex-direction: column;
        width: 100%;
        height: calc(100% - 150px);
        overflow-y: auto;
        justify-content: flex-start;
        padding-right: 0;
    }
    header nav ul li{
        width: 55%;
        border-bottom: 1px solid #fff;
    }
    header nav ul li > a,
    header nav ul li .subLi > a{
        display: flex;
        flex-direction: row;
        color: #fff;
        width: 100%;
        height: 80px;
        justify-content: center;
        align-items: center;
    }
    .navIcon{
        width: 35px;
    }
    header nav ul li a span:nth-last-child(1){
        width: calc(100% - 35px);
    }
    header .subLi{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .showHouseBox{
        width: 100%;
    }
    .houseBoard{
        flex-direction: column;
        align-items: center;
    }
    .houseBoard .photo{
        width: 100%;
        margin-right: 0;
    }
    header nav .contact{
        height: 150px;
        width: 100%;
    }
    header nav ul li .subMenu{
        background-color: transparent;
    }
    header nav ul li:hover .subMenu{
        position: relative;
        top: 0;
        background-color: transparent;
        width: 100%;
        box-shadow: initial;
        padding: 0;
        padding-bottom: 30px;
    }
    header nav ul li .subMenu a{
        padding: 15px 0;
        color: #fff;
    }
    .logoBar{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%;
        z-index: 2;
        padding: 0 15px;
        background-color: #fff;
    }
    .closeBtn.mb{
        position: absolute;
        right: 15px;
        top: 15px;
        color: #fff;
        font-size: 2em;
    }
    .houseBoard .desc .detail .right button{
        font-size: 14px;
        padding: 0;
        padding-right: 15px;
    }
    .houseBoard .desc{
        padding: 15px;
    }
    .collectBtn{
        position: absolute;
        right: 0;
        top: 0;
        margin-top: -50px;
        margin-right: -15px;
    }
    .m-flex{
        display: flex;
    }
    .funcBar{
        background-color: #fff;
        flex-direction: column-reverse;
        align-items: flex-start;
        height: initial;
        padding: 0;
        width: calc(100% + 30px);
        margin-left: -15px;
    }
    .funcBar .funcBtns>button{
        color: #9E0524;
        padding: 10px;
    }
    .factory .funcBar .funcBtns>button, .land .funcBar .funcBtns>button, .rent .funcBar .funcBtns>button{
        color: #999;
    }
    .funcBar .funcBtns>button.active{
        background-color: #9E0524;
        color: #fff!important;
    }
    .rent .m-hamBar{
        background-color: #FFD996;
    }
    .rent .m-hamBar .filter_m{
        color: #000;
        border-color: #000
    }
    .rent .funcBar button i{
        color: #000 !important;
    }
    .rent .funcBar{
        background-color: #fff;
    }
    .rent .funcBar .funcBtns > button.active{
        background-color: #ffd996;
        color: #000 !important;
    }
    .factory .m-hamBar{
        background-color: #ACE2D7;
    }
    .factory .m-hamBar .filter_m{
        color: #000;
        border-color: #000
    }
    .factory .funcBar button i{
        color: #000 !important;
    }
    .factory .funcBar{
        background-color: #fff;
    }
    .factory .funcBar .funcBtns > button.active{
        background-color: #ACE2D7;
        color: #000 !important;
    }
    .land .m-hamBar{
        background-color: #ACE2D7;
    }
    .land .m-hamBar .filter_m{
        color: #000;
        border-color: #000
    }
    .land .funcBar button i{
        color: #000 !important;
    }
    .land .funcBar{
        background-color: #fff;
    }
    .land .funcBar .funcBtns > button.active{
        background-color: #ACE2D7;
        color: #000 !important;
    }

    .m-hamBar{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #9E0524;
        padding: 10px 15px;
        height: 65px;
    }
    .m-hamBar .filter_m{
        color: #fff;
        border: 1px solid #fff;
        padding: 5px 15px;
        border-radius: 12px;
        width: 130px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .funcBar .funcBtns{
        padding: 10px 15px;
    }
    .filterBox{
        position: fixed;
        left: -250px;
        top: 110px;
        opacity: 0;
        transition: all .25s ease;
        z-index: 3;
        height: calc(100svh - 110px);
        overflow: auto;
    }
    .filterBox.open{
        opacity: 1;
        visibility: visible;
        left: 0;
    }
    .processDetail .boxBoard::after{
        bottom: -50px;
    }
    .tableFlex{
        flex-direction: column;
    }
    .trGroup .label{
        width: 140px;
        padding: 10px;
    }
    .h165px{
        height: initial;
    }
    .pageTitle, .storeName{
        font-size: 32px;
    }
    .pageTitleArea p,
    .pageTitleArea h5{
        font-size: 18px;
    }
    .contactBar{
        position: fixed;
        width: 100vw;
        left: 0;
        bottom: 0;
        padding: 15px;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 99;
        padding-right: 70px;
    }
    .contactBar .collectBtn{
        position: relative;
        right: initial;
        top: initial;
        margin-top: initial;
        margin-right: initial;
    }
    .houseDetailArea .photoArea{
        margin: 0;
    }
    .rentFlex3 .trGroup{
        width: 100%;
    }
    .newsBoard{
        height: auto;
    }
    .newsBoard>a{
        flex-direction: column;
    }
    .newsBoard .photo{
        /*height: 300px;*/
        padding-top: 66%;
    }
    .newsBoard .content{
        width: 100%;
        padding: 15px;
    }
    .newsBoard .newsTitle{
        font-size: 22px;
    }
    .newsBoard .date{
        font-size: 14px;
    }
    .pageTitleBgArea{
        padding-bottom: 0;
        z-index: 2;
    }
    .blogDetailArea iframe{
        width: 100%;
        height: 56.25vw;
    }
    .recruitArea{
        padding: 30px 0;
    }
    .recruitTxtBox{
        padding: 30px 0;
    }
    .recruitList{
        margin-top: 30px;
        flex-wrap: wrap;
    }
    .recruitList .box{
        width: 100%;
        padding-top: 56.25%;
    }
    .rankArea .rankList .boxOne{
        width: 100%;
    }
    .recruitList .white{
        font-size: 20px;
    }
    .recruitArea .formArea{
        padding: 100px 15px;
    }
    .recruitArea .formArea h2{
        font-size: 1.8rem;
    }
    .recruitArea .formArea .formBox{
        padding: 15px;
    }

    .recruitArea .formBox>.w50{
        width: 100%!important;
    }
    .locationArea .storeInfo{
        flex-direction: column-reverse;
    }
    .locationArea .storeInfo .left{
        width: 100%;
    }
    .locationArea .storeInfo .right{
        width: 100%;
        height: 100vw;
        /*margin-top: 15px;*/
    }
    .blogBoard{
        flex-direction: column;
        height: auto;
    }
    .blogBoard .content{
        width: 100%;
        padding: 15px;
        text-align: justify;
    }
    .blogBoard .photo{
        width: 100%;
        /*padding-top: 100%;*/
    }
    .blogConsultArea .form{
        flex-direction: column;
    }
    .blogConsultArea .form>.w100-2-10px{
        width: 100%!important;
    }
    .consultBtns{
        width: 100%;
    }
    .consultBtns .btnStyle03{
        width: 50%;
    }
    .qaArea .contentArea .leftMenu, .tbArea .contentArea .leftMenu{
        /*padding: 0;*/
        position: absolute;
        z-index: 2;
        width: 100%;
        background-color: #fff;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        padding-left: 15px;
        margin-left: -15px;
        opacity: 0;
        visibility: hidden;
        margin-top: -15px;
        padding-bottom: 50px;
        transition: all .25s ease;
    }
    .qaArea .contentArea .content, .tbArea .contentArea .content{
        width: 100%;
        padding-top: 50px;
    }
    .qaArea .contentArea .content .blogContent{
        padding: 15px;
    }
    .qaArea .contentArea .leftMenu li, .tbArea .contentArea .leftMenu li{
        /*padding: 5px;*/
    }
    .qaArea .menuList li, .tbArea .menuList li{
        font-size: 14px;
        height: 60px;
    }
    .qaArea .menuList li:nth-child(2){
        padding-left: 30px;
        margin-left: -15px;
    }
    .qaArea .menuList li:nth-child(3){
        padding-left: 30px;
        margin-left: -15px;
    }
    .qaArea .menuList li img, .tbArea .menuList li img{
        height: 20px;
    }
    .qaArea .menuList li>a>span, .tbArea .menuList li>a>span{
        margin-right: 0!important;
    }
    .qaArea .menuList, .tbArea .menuList{
        top: -60px;
    }
    .qaArea, .tbArea{
        padding: 80px 0;
    }
    .qaArea .contentArea, .tbArea .contentArea{
        padding: 15px;
        padding-bottom: 50px;
    }
    .qaArea .contentArea.school .content .title{
        font-size: 22px;
    }
    .qaPolicyBox, .qaPolicyDetailBox{
        padding: 15px;
    }
    .qaPolicyDetailBox .title{
        padding: 15px 0;
    }
    .qaPolicyDetailBox iframe{
        width: 100%;
        height: 56.25vw;
    }
    .qaPolicyDetailBox .morePolicyList{
        flex-direction: column;
    }
    .qaPolicyDetailBox .morePolicyList .box{
        width: 100%;
        margin-right: 0;
    }
    .subMenuExpend{
        position: absolute;
        right: 15px;
        top: 15px;
    }
    .closeSubMenuBtn{
        display: block;
        position: absolute;
        bottom: 15px;
        left: 50%;
        margin-left: -12px;
    }
    .qaArea .contentArea.qa .content .title{
        font-size: 22px;
    }
    .methodSelect{
        width: 100%;
    }
    .calcList{
        width: 100%;
    }
    .calcList .inputStyle01{
        width: 100%;
    }
    .greyBoard p.w200px{
        width: 130px!important;
    }
    .greyBoard{
        padding: 15px;
    }
    .greyBoard .w100-4-10px{
        width: calc(100% / 4)!important;
    }
    .searchBox{
        max-width: 95vw;
    }
    .blogBoard .content .taj{
        height: 100px;
    }
    .houseBoard .desc .detail .left > div{
        width: 100%;
    }
    section .section-title > p{
        padding: 0px 15px;
    }
    .indexPhoto3 a.w50{
        width: 100% !important;
    }
    .indexPhoto3 .w100 .img{
        padding-top: 56.25%;
    }
    .indexTops .photo{
        width: 100%;
        margin-bottom: 15px;
    }
    .swiper-photos .swiper-wrapper .swiper-slide{
        margin: 0px 15px;
    }
    .swiper-photos .swiper-slide-active .photo p{
        font-size: 12px;
        width: 40%;
    }
    .recommends{
        flex-wrap: wrap;
        margin-bottom: 0px;
    }
    .recommends a{
        width: 100%;
        margin-bottom: 15px;
    }
    .quickSection .container img{
        width: 60px;
    }
    .quickSection .container .left p, .quickSection .container .right p{
        padding: 10px;
        font-size: 14px;
    }
    .section-title h3{
        font-size: 24px;
    }
    .bannerSwiper .photo{
        padding-top: 75%;
    }
    .section-title{
        margin-top: 30px;
    }
    .localModal .mapArea{
        max-width: 100%;
    }
    .localModal .locals{
        padding: 0px;
        width: 100%;
        margin-top: 15px;
    }
    .houseDetailArea .trGroup .info{
        flex-wrap: wrap;
    }
    .consultArea .typeSelect .typeOne{
        width: 100%;
    }
    .consultArea .trGroup{
        height: auto !important;
    }
    ul.calculation-result li{
        width: 100%;
    }
    .greyBoard p.info{
        width: 100%;
    }
    .photoArea .btnStyle02{
        padding: 10px 15px;
        font-size: 12px;
    }
    .locationArea .storePhoto{
        flex-direction: column;
    }
    .locationArea .storePhoto .box{
        width: 100%;
        padding-top: 100%;
        margin-bottom: 5px;
    }
}

@media(max-width: 375px){

}