@charset "utf-8";

.cmnPageTit .pageTit::before{
    background: linear-gradient(to bottom, var(--brownColorb4) 0%, var(--brownColorb4) 50%, var(--brownColor77) 51%, var(--brownColor77) 100%);
}
@media only screen and (max-width:1215px){
    .cmnPageTit.hasDots {padding-bottom: 0;}
    .cmnPageTit.hasDots::after{display: none;}
}

/* boxReform */
.boxReform{
    margin-top: 7rem;
}
.boxReform .boxCmnTit{
    position: relative;
    padding-bottom: 1rem;
}
.boxReform .boxCmnTit::after{
    content: "";
    background-image: repeating-linear-gradient(90deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(180deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(180deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 4px);
    background-position: left top, right top, left bottom, left top;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
}
.boxReform .boxCmnTit .titCmn{
    position: relative;
    font-size: var(--pcFontSize28);
    line-height: var(--pcLineHeight28_42);
    letter-spacing: var(--pcLetterSpacing28_50);
    font-weight: bold;
    padding-left: 2rem;
}
.boxReform .boxCmnTit .titCmn::before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    bottom: 0.3rem;
    left: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--textColor);
    border-radius: 100%;
}
.boxReform .boxCmnTit .txtCmn{
    font-size: var(--pcFontSize18);
    letter-spacing: var(--pcLetterSpacing18_50);
    font-weight: bold;
    padding-top: 1.3rem;
}
.boxReform .boxCmnTit .txtCmn02{
    font-size: var(--pcFontSize15);
    line-height: var(--pcLineHeight15_28);
    letter-spacing: var(--pcLetterSpacing15_30);
    padding: 1.3rem 0 0 0.3rem;
}
@media only screen and (max-width:1215px){
    .boxReform{
        margin-top: 3rem;
    }
    .boxReform .boxCmnTit{
        padding-bottom: 1rem;
    }
    .boxReform .boxCmnTit::after{
        background-image: repeating-linear-gradient(90deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(180deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(90deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(180deg, var(--borderColorGrey), var(--borderColorGrey) 1px, transparent 1px, transparent 2px);
    }
    .boxReform .boxCmnTit .titCmn{
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_27);
        letter-spacing: var(--spLetterSpacing18_30);
        padding-left: 1.2rem;
    }
    .boxReform .boxCmnTit .titCmn::before{
        width: 0.6rem;
        height: 0.6rem;
    }
    .boxReform .boxCmnTit .txtCmn{
        font-size: var(--spFontSize15);
        line-height: var(--spLineHeight15_24);
        letter-spacing: var(--spLetterSpacing15_0);
        padding-top: 0;
    }
    .boxReform .boxCmnTit .txtCmn02{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing12_30);
        padding: 0 0 0 0.3rem;
    }
}
/* secAbout */
@media only screen and (max-width:1215px){
}


/* secAbout */
.secAbout{
    margin-top: 2rem;
}
.secAbout .boxAbout{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.boxAbout .boxTit .tit{
    font-size: var(--pcFontSize34);
    line-height: var(--pcLineHeight34_50);
    font-weight: bold;
}
.boxAbout .boxTit .txt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_28);
    letter-spacing: var(--pcLetterSpacing14_50);
    margin-top: 2rem;
}
.boxAbout .boxImg{
    width: 65.6rem;
}
@media only screen and (max-width:1215px){
    .secAbout{
        margin-top: 1.5rem;
    }
    .secAbout .boxAbout{
        flex-direction: column-reverse;
    }
    .boxAbout .boxTit .tit{
        font-size: var(--spFontSize22);
        line-height: var(--spLineHeight22_33);
    }
    .boxAbout .boxTit .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing12_30);
        margin-top: 0.5rem;
    }
    .boxAbout .boxImg{
        width: 100%;
        margin-bottom: 1.5rem;
    }
}

/* boxSystem */
.boxSystem .boxReformBody{
    width: 118rem;
    margin: 4rem auto 0;
}
.boxSystem .boxTit{
    width: 100%;
    height: 7.8rem;
    margin-top: 3rem;
    background-color: var(--greenColor);
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxSystem .boxTit .tit{
    font-size: var(--pcFontSize20);
    color: #fff;
    font-weight: bold;
}
@media only screen and (max-width:1215px){
    .boxSystem .boxReformBody{
        width: 100%;
        margin: 1.5rem auto 0;
    }
    .boxSystem .boxTit{
        height: 4rem;
        margin-top: 0;
    }
    .boxSystem .boxTit .tit{
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_30);
    }
}

/* boxCertified */
.boxCertified .boxReformBody{
    margin-top: 3rem;
}
.boxCertified .list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.boxCertified .list .item{
    width: 41rem;
}
.boxCertified .boxTit{
    margin-top: 2rem;
}
.boxCertified .boxTit .tit{
    font-size: var(--pcFontSize20);
    letter-spacing: var(--pcLetterSpacing20_50);
    color: var(--brownColorLight2);
    font-weight: bold;
}
.boxCertified .boxTit .titSub{
    font-size: var(--pcFontSize18);
    letter-spacing: var(--pcLetterSpacing18_50);
    font-weight: bold;
    margin-top: 2rem;
}
.boxCertified .boxTit .txt{
    font-size: var(--pcFontSize15);
    line-height: var(--pcLineHeight15_28);
    margin-top: 1rem;
}
@media only screen and (max-width:1215px){
    .boxCertified .boxReformBody{
        margin-top: 1.5rem;
    }
    .boxCertified .list{
        gap: 3.5rem;
    }
    .boxCertified .list .item{
        width: 100%;
    }
    .boxCertified .boxTit{
        margin-top: 1rem;
    }
    .boxCertified .boxTit .tit,
    .boxCertified .boxTit .titSub{
        font-size: var(--spFontSize15);
        letter-spacing: var(--spLetterSpacing15_80);
    }
    .boxCertified .boxTit .titSub{
        margin-top: 1rem;
    }
    .boxCertified .boxTit .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing12_30);
        margin-top: 0.5rem;
    }
}

/* boxService */
.boxService .boxReformBody{
    margin-top: 3rem;
}
.boxService .list{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 3.5rem;
}
.boxService .list .item{
    width: calc((100% - 13.999rem) / 5);
}
.boxService .txt{
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing15_50);
    font-weight: bold;
    margin-top: 2rem;
    text-align: center;
}
@media only screen and (max-width:1215px){
    .boxService .boxReformBody{
        margin-top: 1.5rem;
    }
    .boxService .list{
        gap: 2rem 0.5rem;
    }
    .boxService .list .item{
        width: calc((100% - 0.5rem) / 2);
    }
    .boxService .txt{
        font-size: var(--spFontSize13);
        letter-spacing: var(--spLetterSpacing13_30);
        margin-top: 1.5rem;
    }
}

/* boxSecurity */
.boxSecurity .boxReformBody{
    margin-top: 10rem;
}
.boxSecurity .list{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 2.5rem;
}
.boxSecurity .list .item{
    position: relative;
    background-color: var(--bgColor);
    width: calc((100% - 4.999rem) / 3);
    padding: 11rem 3rem 6rem;
}
.boxSecurity .boxImg{
    position: absolute;
    top: -6.5rem;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
}
.boxSecurity .boxImg img{
    border-radius: 100%;
}
.boxSecurity .boxTit .tit{
    font-size: var(--pcFontSize20);
    letter-spacing: var(--pcLetterSpacing20_50);
    font-weight: bold;
    text-align: center;
}
.boxSecurity .boxTit .txt{
    font-size: var(--pcFontSize14);
    line-height: var(--pcLineHeight14_24);
    letter-spacing: var(--pcLetterSpacing14_50);
    margin-top: 2rem;
}
/* boxInspect */
.boxSecurity .boxInspect{
    position: relative;
    text-align: center;
    padding-bottom: 5rem;
}
.boxSecurity .boxInspect::before{
    position: absolute;
    content: '';
    margin: auto;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: calc(100% - 0.2rem);
    height: 100%;
    border: 0.1rem solid #2f3334;
    opacity: 0.1;
    border-top: none;
    z-index: -1;
}
.boxSecurity .boxInspectTit .tit{
    margin: 4rem auto 0;
    width: 100%;
    height: 6.5rem;
    background-color: var(--bgColor);
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxSecurity .boxInspectTit .tit,
.boxSecurity .boxInspectTit .txt{
    font-size: var(--pcFontSize20);
    font-weight: bold;
}
.boxSecurity .boxInspectTitBtm .tit{
    width: 124rem;
    height: 5rem;
    font-size: var(--pcFontSize18);
}
.boxSecurity .boxInspectTit .txt{
    margin: 3rem 0;
}
.boxSecurity .boxInspectTit .fRed{
    color: var(--redColor);
}
.boxSecurity .boxInspectImg{
    width: 124rem;
    margin: 0 auto;
}
@media only screen and (max-width:1215px){
    .boxSecurity .boxReformBody{
        margin-top: 4.5rem;
    }
    .boxSecurity .list{
        gap: 4rem;
    }
    .boxSecurity .list .item{
        width: 100%;
        padding: 4.8rem 1.1rem 1.8rem;
    }
    .boxSecurity .boxImg{
        width: 6rem;
        top: -3rem;
    }
    .boxSecurity .boxTit .tit{
        font-size: var(--spFontSize15);
        letter-spacing: var(--spLetterSpacing15_0);
        text-align: left;
    }
    .boxSecurity .boxTit .txt{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_24);
        letter-spacing: var(--spLetterSpacing12_50);
        margin-top: 1rem;
    }
    /* boxInspect */
    .boxSecurity .boxInspect{
        padding-bottom: 1rem;
    }
    .boxSecurity .boxInspectTit .tit{
        margin-top: 5.5rem;
        height: calc(6.5rem / 2);
        font-size: var(--spFontSize15);
    }
    .boxSecurity .boxInspectTit .txt{
        font-size: var(--spFontSize13);
        line-height: var(--spLineHeight13_18);
    }
    .boxSecurity .boxInspectTitBtm .tit{
        font-size: var(--spFontSize10);
        width: 95%;
        height: calc(5rem / 2);
        margin-top: 1rem;
    }
    .boxSecurity .boxInspectTit .txt{
        margin: 1.2rem 0 1rem;
    }
    .boxSecurity .boxInspectTit .txt{
        margin: 1.2rem 0 1rem;
    }
    .boxSecurity .boxInspectImg{
        width: calc(100% - 0.4rem);
    }
}

/* secEstate */
.secEstate .boxSlider{
    margin-top: 3rem;
}
.secEstate .swiper{
    overflow: visible;
}
.secEstate .sliderEstate.disabled .swiper{
    width: 41rem;
}
.secEstate .sliderEstate.disabled .swiper-wrapper{
    justify-content: center;
    gap: 5.5rem;
}
.secEstate .sliderEstate .swiper-slide{
    height: auto;
}
/* index.css */
.secEstate .boxImg{
    position: relative;
}
.secEstate .iconNew {
    position: absolute;
    top: -1.5rem;
    left: 1.5rem;
    z-index: 1;
}
.secEstate .boxIcon{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
.secEstate .icon{
    display: block;
    font-size: var(--pcFontSize12);
    font-weight: normal;
    letter-spacing: var(--pcLetterSpacing12_50);
    color: #fff;
    padding: 0.9rem 1.1rem 0.7rem;
}
.secEstate .img{
    aspect-ratio: 410 / 270;
}
.secEstate .tit{
    font-size: var(--pcFontSize22);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing22_80);
    line-height: var(--pcLineHeight15_26);
    text-decoration: underline;
    margin-top: 1.5rem;
}
.secEstate .txtPoint{
    font-size: var(--pcFontSize15);
    letter-spacing: var(--pcLetterSpacing15_50);
    line-height: 2.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 5.2rem;
    margin-top: 0.6rem;
}
.secEstate .boxPrice{
    display: flex;
    align-items: flex-end;
    margin-top: 1rem;
}
.secEstate .price{
    font-size: var(--pcFontSize17);
    font-weight: bold;
    letter-spacing: var(--pcLetterSpacing17_50);
}
.secEstate .price .numBig{
    font-size: var(--pcFontSize34);
    font-weight: 500;
    letter-spacing: var(--pcLetterSpacing34_80);
    vertical-align: -0.1rem;
    margin-right: 0.4rem;
}
.secEstate .monthly{
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_50);
    padding: 0 0 0.1rem 0.2rem;
}
.secEstate .boxTable{
    display: flex;
    flex-direction: column;
    gap: 0.1rem 0;
    margin-top: 2rem;
}
.secEstate .boxTable .tr{
    display: flex;
    gap: 0 0.2rem;
    font-size: var(--pcFontSize13);
    letter-spacing: var(--pcLetterSpacing13_50);
    line-height: var(--pcLineHeight13_20);
    background-color: var(--bgColor);
    padding: 1.2rem 1rem 0.9rem;
}
.secEstate .boxTable .row{
    display: flex;
    gap: 0 0.2rem;
}
.secEstate .boxTable .row .tr{
    width: 50%;
}
.secEstate .cmnBtn{
    margin: 4rem auto 0;
    font-size: var(--pcFontSize14);
    height: 8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width:1215px){
    .secEstate .boxReform .boxCmnTit::after{
        display: none;
    }
    .secEstate .boxSlider{
        margin-top: 0;
    }
    .secEstate .sliderEstate .swiper{
        width: 100%;
    }
    .secEstate .sliderEstate .swiper-wrapper{
        gap: 0;
        flex-direction: column;
    }
    .secEstate .slideInner{
        position: relative;
        padding: 0.1rem 0 0;
    }
    .secEstate .swiper-slide .slideInner::before{
        content: "";
        background-image: repeating-linear-gradient(90deg, var(--grayColorB8), var(--grayColorB8) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(180deg, var(--grayColorB8), var(--grayColorB8) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, var(--grayColorB8), var(--grayColorB8) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(180deg, var(--grayColorB8), var(--grayColorB8) 1px, transparent 1px, transparent 4px);
        background-position: left top, right top, left bottom, left top;
        background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
    }
    .secEstate .slideInner .boxWrap{
        display: flex;
    }
    .secEstate .boxImg{
        width: 40vw;
    }
    .secEstate .boxIcon{
        position: static;
    }
    .secEstate .icon{
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_30);
        padding: 0.9rem 1.1rem 0.7rem;
        text-align: center;
    }
    .secEstate .boxTxt{
        flex: 1;
        padding-left: 2.67vw;
        padding-right: 4vw;
    }
    .secEstate .tit{
        font-size: var(--spFontSize14);
        letter-spacing: var(--spLetterSpacing14_30);
        line-height: var(--spLineHeight14_18);
        margin-top: 2.3rem;
    }
    .secEstate .txtPoint{
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing12_30);
        line-height: 2rem;
        height: 4rem;
        margin-top: 0.9rem;
    }
    .secEstate .boxPrice{
        display: block;
        margin-top: 0.8rem;
    }
    .secEstate .price{
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing12_50);
    }
    .secEstate .price .numBig{
        font-size: var(--spFontSize20);
        letter-spacing: var(--spLetterSpacing20_30);
        margin-right: 0.4rem;
    }
    .secEstate .monthly{
        font-size: var(--spFontSize11);
        letter-spacing: var(--spLetterSpacing11_50);
        padding: 1.1rem 0 0;
    }
    .secEstate .boxOutline{
        padding: 0 4% 2rem;
    }
    .secEstate .boxTable{
        margin-top: 1.5rem;
    }
    .secEstate .boxTable .tr{
        gap: 0 0.1rem;
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing10_50);
        line-height: var(--spLineHeight10_15);
        padding: 0.8rem 1rem 0.7rem;
    }
    .secEstate .boxTable .row{
        gap: 0 0.1rem;
    }
    .secEstate .cmnSliderControl{
        display: none;
    }
    .secEstate .cmnBtn{
        margin: 1.5rem auto 0;
        font-size: var(--spFontSize12);
        height: 5rem;
    }
    /* boxMore */
    .secEstate .boxMore{
        display: none;
    }
    .secEstate.isMore .boxMore {
        display: block;
    }
    .secEstate .btnMore{
        text-align: center;
        font-size: var(--spFontSize12);
        text-decoration: underline;
    }
    .secEstate .boxSlider{position: relative;}
    .secEstate.isMore .boxSlider::after{
        position: absolute;
        content: '';
        margin: auto;
        display: block;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6rem;
        background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 52%, rgba(255,255,255,0) 100%);
        background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 52%, rgba(255,255,255,0) 100%);
        background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 52%, rgba(255,255,255,0) 100%);
        z-index: 1;
    }
}