@charset "utf-8";

/*-----------------------------------------------
    index
-----------------------------------------------*/
/* headerlp */
#headerlp{
    position: absolute;
    top: 4rem;
    left: 4rem;
    z-index: 20;
    display: none;
}
#headerlp .headerLogo{
    width: 27rem;
    display: block;
}
@media only screen and (max-width:1215px){
    #headerlp{
        top: 2rem;
        left: 2rem;
    }
    #headerlp .headerLogo{
        width: 18rem;
    }
}

/* secView */
.secView{
    /* height: 1050px; */
    position: relative;
}
/* .secView .imgTop{
    position: absolute;
    top: 0;
    left: calc(50% - 960px);
} */
@media only screen and (max-width:1215px){
    .secView{
        height: auto;
    }
    .secView .imgTop{
        position: static;
    }
}

/* secTicker */
.secTicker{
    overflow: hidden;
    margin: 10px auto;
}
.secTicker .boxTicker{
    display: flex;
}
.secTicker .imgTicker{
    margin: 0 5px;
}
.secTicker .itemTicker:nth-child(odd){
    animation: loop 80s -40s linear infinite;
    backface-visibility: hidden;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.secTicker .itemTicker:nth-child(even){
    animation: loop2 80s linear infinite;
}
@keyframes loop {
    0% {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}
@keyframes loop2 {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(-200%);
    }
}
@media only screen and (max-width:1215px){
    .secTicker{
        margin: 3px auto;
    }
    .secTicker .imgTicker{
        height: 10.4rem;
        width: 62.8rem;
        margin: 0 3px;
    }
}

/* secModelHouse */
.secModelHouse{
    padding-bottom: 23.8rem;
    position: relative;
    overflow: hidden;
}
/* .secModelHouse::after{
    position: absolute;
    content: "";
    width: 220.3rem;
    height: 28.2rem;
    bottom: 0;
    left: calc(50% - 110rem);
} */
.secModelHouse.lazyloaded{
    background: url(../img/index/bgModel.jpg) center top / cover;
}
/* .secModelHouse.lazyloaded::after{
    background: url(../img/index/iconModel.png) center top / cover;
} */
.secModelHouse .modelBox{
    position: relative;
    height: 670px;
}
.secModelHouse .modelBox img{
    position: absolute;
    top: 0;
    left: calc(50% - 960px);
}
.secModelHouse .txtBox{
    text-align: center;
    margin-top: 8rem;
}
.secModelHouse .txtBox .txtTit{
    font-size: var(--pcFontSize50);
    color: var(--ColorYellow);
}
.secModelHouse .txtBox .txtAbout{
    font-size: var(--pcFontSize25);
    line-height: var(--pcLineHeight25_46);
    color: var(--ColorWhite);
    margin-top: 3rem;
}
.secModelHouse .modelList{
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    margin-top: 5rem;
}
.secModelHouse .modelList .modelItem{
    width: calc((100% - 4rem) / 2);
    border-radius: 1rem;
    box-shadow: 0 0 1.5rem var(--shadowColor);
    display: flex;
    flex-direction: column;
}
.secModelHouse .modelList .modelImg img{
    border-radius: 1rem 1rem 0 0;
}
.secModelHouse .modelList .modelBoxTxt{
    background: var(--ColorWhite);
    padding: 3.7rem 0 5.4rem;
    border-radius: 0 0 1rem 1rem;
    height: 100%;
    text-align: center;
}
.secModelHouse .modelList .modelTxtTit{
    font-size: var(--pcFontSize36);
    color: var(--keyColor);
}
.secModelHouse .modelList .modelTxtAbout{
    font-size: var(--pcFontSize22);
    line-height: var(--pcLineHeight22_38);
    margin-top: 2.6rem;
}
.secModelHouse .boxBottom{
    padding: 5rem 5rem 4rem;
    background: var(--ColorWhite);
    border-radius: 1rem;
    box-shadow: 0 0 1.5rem var(--shadowColor);
    text-align: center;
    margin-top: 4rem;
    position: relative;
    z-index: 10;
}
.secModelHouse .boxBottom .txtTit{
    font-size: var(--pcFontSize40);
    line-height: var(--pcLineHeight40_54);
    color: var(--keyColor);
}
.secModelHouse .boxBottom .txtAbout{
    font-size: var(--pcFontSize22);
    line-height: var(--pcLineHeight22_38);
    letter-spacing: var(--pcLetterSpacing22_50);
    margin-top: 1.7rem;
}
.secModelHouse .boxBottom .txtAbout2{
    text-wrap-mode: nowrap;
}
.secModelHouse .boxBottom .boxList{
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
    margin-top: 3.2rem;
}
.secModelHouse .boxBottom .item{
    width: calc((100% - 4rem) / 2);
    position: relative;
}
.secModelHouse .boxBottom .itemImg img{
    border-radius: 1rem;
    box-shadow: 0 0 2rem var(--shadowColor2);
}
.secModelHouse .boxBottom .boxIcon{
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    font-size: var(--pcFontSize18);
    line-height: var(--pcLineHeight18_22);
    color: var(--ColorWhite);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -2.5rem;
    left: -2.5rem;
}
.secModelHouse .boxBottom .boxIcon.lazyloaded{
    background: url(../img/index/bgIconModel.png) center top / cover;
}
.secModelHouse .boxBottom .txtAboutBottom{
    font-size: var(--pcFontSize16);
    line-height: var(--pcLineHeight16_28);
    text-wrap-mode: nowrap;
    margin-top: 2.2rem;
}
@media only screen and (max-width:1215px){
    .secModelHouse{
        padding-bottom: 11.5rem;
    }
    .secModelHouse::after{
        display: none;
    }
    .secModelHouse .modelBox{
        height: auto;
    }
    .secModelHouse .modelBox img{
        position: relative;
        top: 0;
        left: 0;
    }
    .secModelHouse .txtBox{
        margin-top: 3.6rem;
    }
    .secModelHouse .txtBox .txtTit{
        font-size: var(--spFontSize22);
        line-height: var(--spLineHeight22_31);
        letter-spacing: var(--pcLetterSpacing22_80);
    }
    .secModelHouse .txtBox .txtAbout{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_30);
        letter-spacing: var(--spLetterSpacing00);
        margin-top: 1.5rem;
    }
    .secModelHouse .modelList{
        gap: 1rem;
        margin-top: 2rem;
    }
    .secModelHouse .modelList .modelItem{
        width: 100%;
        border-radius: 1rem;
        flex-direction: row;
    }
    .secModelHouse .modelList .modelImg{
        width: 17rem;
    }
    .secModelHouse .modelList .modelImg img{
        border-radius: 1rem 0 0 1rem;
    }
    .secModelHouse .modelList .modelBoxTxt{
        padding: 2rem 1rem 0;
        border-radius: 0 1rem 1rem 0;
        width: calc(100% - 17rem);
        height: 100%;
        text-align: left;
    }
    .secModelHouse .modelList .modelTxtTit{
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_22);
    }
    .secModelHouse .modelList .modelTxtAbout{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_18);
        letter-spacing: var(--spLetterSpacing0);
        margin-top: 0.8rem;
    }
    .secModelHouse .boxBottom{
        padding: 2.5rem 1.5rem 3.5rem;
        margin-top: 1rem;
    }
    .secModelHouse .boxBottom .txtTit{
        font-size: var(--spFontSize18);
        line-height: var(--spLineHeight18_22);
    }
    .secModelHouse .boxBottom .txtAbout{
        font-size: var(--spFontSize12);
        line-height: var(--spLineHeight12_18);
        letter-spacing: var(--spLetterSpacing0);
        text-wrap-mode: wrap;
        margin-top: 1rem;
    }
    .secModelHouse .boxBottom .boxList{
        display: flex;
        flex-wrap: wrap;
        gap: 4rem;
        margin-top: 3.2rem;
        padding: 0 1.5rem;
    }
    .secModelHouse .boxBottom .item{
        width: 100%;
    }
    .secModelHouse .boxBottom .itemImg img{
        border-radius: 1rem;
        box-shadow: 0 0 2rem var(--shadowColor2);
    }
    .secModelHouse .boxBottom .boxIcon{
        width: 7.5rem;
        height: 7.5rem;
        font-size: var(--spFontSize15);
        line-height: var(--spLineHeight15_18);
        top: -3.5rem;
        left: -1.5rem;
    }
    .secModelHouse .boxBottom .txtAboutBottom{
        font-size: var(--spFontSize15);
        line-height: var(--spLineHeight15_26);
        text-wrap-mode: wrap;
        margin-top: 1.5rem;
    }
}
@media only screen and (max-width:767px){
    .secModelHouse.lazyloaded{
        background: url(../img/index/bgModel_sp.jpg) center top / cover;
    }
}
@media only screen and (max-width:370px){
    .secModelHouse .modelList .modelTxtTit{
        font-size: var(--spFontSize16);
    }
}
@media only screen and (max-width:350px){
    .secModelHouse .modelList .modelTxtTit{
        font-size: var(--spFontSize14);
    }
}
@media only screen and (max-width:340px){
    .secModelHouse .modelList .modelTxtTit{
        font-size: var(--spFontSize13);
    }
}

/* secReserveBnr */
.secReserveBnr .bnr{
    display: block;
}
.secReserveBnr.mt120{
    margin-top: 12rem;
}
@media only screen and (max-width:1215px){
    .secReserveBnr.mt120{
        margin-top: 6.5rem;
    }
}

/* secWorries */
.secWorries{
    height: auto;
    padding-top: 14.5rem;
    margin-top: 0.1rem;
    overflow: hidden;
}
.secWorries.lazyloaded{
    background: url(../img/index/bgWorries.jpg) center top / cover;
}
.secWorries .wrapper{
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
@media only screen and (max-width:1215px){
    .secWorries{
        padding-top: 8.07rem;
    }
    .secWorries.lazyloaded{
        background: url(../img/index/bgWorries_sp.jpg) center top / cover;
    }
    .secWorries .wrapper{
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
}

/* secConcept */
.secConcept{
    margin-top: 10rem;
}
.secConcept .iconCircle{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--dotColor);
    margin: 0 auto;
    position: relative;
}
.secConcept .iconCircle::before,
.secConcept .iconCircle::after{
    position: absolute;
    content: "";
    width: 2rem;
    height: 2rem;
    background: var(--dotColor);
    border-radius: 50%;
    left: calc(50% - 10px);
}
.secConcept .iconCircle::before{
    top: -4rem;
}
.secConcept .iconCircle::after{
    bottom: -4rem;
}
.secConcept .txt{
    margin-top: 8.3rem;
    font-size: var(--pcFontSize30);
    line-height: var(--pcLineHeight30_60);
    letter-spacing: var(--pcLetterSpacing30_50);
    text-align: center;
    font-weight: bold;
}
.secConcept .subTxt{
    background: linear-gradient(transparent 70%, var(--ColorYellow) 70%, var(--ColorYellow) 95%, transparent 95%);
}
.secConcept .subTit{
    font-size: var(--pcFontSize20);
    letter-spacing: var(--pcLetterSpacing20_50);
    font-weight: bold;
    text-align: center;
    margin-top: 2.3rem;
}
.secConcept .conceptList{
    margin-top: 8rem;
    display: flex;
    border-bottom: solid 0.1rem var(--borderColor);
}
.secConcept .conceptItem{
    width: calc(100% / 3);
    border-right: solid 0.1rem var(--borderColor);
}
.secConcept .conceptItem:last-child{
    border-right: none;
}
.secConcept .txtBox{
    position: relative;
    padding: 5.6rem 2rem 6rem;
}
.secConcept .nmber{
    position: absolute;
    top: -3rem;
    left: calc(50% - 3rem);
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    color: var(--ColorWhite);
    background: var(--keyColor);
    font-size: var(--pcFontSize25);
    letter-spacing: var(--pcLetterSpacing25_50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.secConcept .conceptTxt{
    font-size: var(--pcFontSize30);
    line-height: var(--pcLineHeight30_50);
    text-align: center;
}
@media only screen and (max-width:1215px){
    .secConcept{
        margin-top: 5rem;
    }
    .secConcept .iconCircle{
        width: 1.1rem;
        height: 1.1rem;
    }
    .secConcept .iconCircle::before,
    .secConcept .iconCircle::after{
        width: 1.1rem;
        height: 1.1rem;
        left: calc(50% - 0.55rem);
    }
    .secConcept .iconCircle::before{
        top: -2rem;
    }
    .secConcept .iconCircle::after{
        bottom: -2rem;
    }
    .secConcept .txt{
        margin-top: 4.7rem;
        font-size: var(--spFontSize16);
        line-height: var(--spLineHeight16_30);
        letter-spacing: normal;
    }
    .secConcept .subTxt{
        background: none;
    }
    .secConcept .subTxt02{
        background: linear-gradient(transparent 70%, var(--ColorYellow) 70%, var(--ColorYellow) 95%, transparent 95%);
    }
    .secConcept .subTit{
        font-size: var(--spFontSize14);
        margin-top: 1.3rem;
        letter-spacing: normal;
    }
    .secConcept .conceptList{
        margin: 4rem auto 0;
        display: block;
        border-bottom: none;
        width: 92%;
    }
    .secConcept .conceptItem{
        width: 100%;
        border-right: none;
    }
    .secConcept .conceptItem:nth-child(n+2){
        margin-top: 2.4rem;
    }
    .secConcept .txtBox{
        padding: 2.5rem 1rem 0;
        margin: -2rem 4% 0;
        background: var(--ColorWhite);
    }
    .secConcept .nmber{
        top: -1.75rem;
        left: calc(50% - 1.75rem);
        width: 3.5rem;
        height: 3.5rem;
        font-size: var(--spFontSize14);
    }
    .secConcept .conceptTxt{
        font-size: var(--spFontSize16);
        line-height: var(--spLineHeight16_26);
    }
}

/* fNavi */
#fNavi{
    display: none;
}
@media only screen and (max-width:1215px){
    #fNavi{
        width: 100%;
        display: block;
        position: fixed;
        right: 0;
        bottom: 0;
        transform: translateY(100%);
        transition: all 0.2s ease-out;
        z-index: 9999;
    }
    #fNavi .inner{
        width: 100%;
        height: 6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--keyColor);
        color: var(--ColorWhite);
        font-size: var(--spFontSize15);
        font-weight: bold;
        text-decoration: none;
        position: relative;
    }
    #fNavi .inner::after{
        position: absolute;
        content: "";
        left: 0;
        bottom: 0;
        background: var(--bottomfNavi);
        height: 0.3rem;
        width: 100%;
    }
    #fNavi + .secFooter{
        padding-bottom: 61px;
    }
    #fNavi.jsShow{
        transform: none;
    }
}

/* secFooterLp */
.secFooterLp .copy{
    font-size: var(--pcFontSize11);
    letter-spacing: var(--pcLetterSpacing11_50);
    text-align: center;
    color: var(--ColorWhite);
    padding: 2rem;
    background: var(--bgFooter);
}
@media only screen and (max-width:1215px){
    .secFooterLp .copy{
        font-size: var(--spFontSize10);
        letter-spacing: var(--spLetterSpacing0);
        padding: 1.6rem 10px;
    }
    /* #fNavi + .secFooterLp{
        padding-bottom: 61px;
    } */
}


/* secTxt */
.secModel .secTxt .Popupbtn{
    width: 15rem;
    height: 4rem;
    border-radius: 0.4rem;
    background: var(--ColorOrange);
    color: var(--dotColor);
    text-decoration: none;
    font-size: var(--pcFontSize12);
    letter-spacing: var(--pcLetterSpacing12_50);
    font-weight: bold;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    margin: 2rem auto 0;
}
@media only screen and (max-width:1215px){
    .secModel .secTxt .Popupbtn{
        width: 15rem;
        height: 4rem;
        border-radius: 0.4rem;
        font-size: var(--spFontSize12);
        letter-spacing: var(--spLetterSpacing12_50);
        margin: 2rem auto 0;
    }
}

/* secPopupItem */
.secPopup{
    display: none;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}
.secPopupItem{
	background: var(--ColorWhite);
	color: var(--ColorWhite);
	height: auto;
	overflow-x: visible;
	overflow-y: scroll;
}
.scroll-box{
	background: var(--ColorWhite);
	padding-right: 1.2rem;
}
.secPopupItem::-webkit-scrollbar{
	width: 1.2rem;
	height: 0.5rem;
}
.secPopupItem::-webkit-scrollbar-thumb{
	background: var(--borderTable);
}
.secPopupItem::-webkit-scrollbar-track{
	background: var(--ColorWhite);
}
.secPopupItem::-webkit-scrollbar{
	width: 0.5rem;
}
.secPopupItem::-webkit-scrollbar-thumb{
	background: var(--borderTable);
	border-radius: 0.2rem;
	background-clip: padding-box;
}
.secPopupItem::-webkit-scrollbar-track{
	margin-top: 2rem;
	margin-bottom: 2rem;
}
.secPopupItem .imgUite{
	display: flex;
	flex-wrap: wrap;
	padding-top: 10rem;
	padding-bottom: 20rem;
	justify-content: center;
}
.secPopupItem .Item{
	font-size: var(--pcFontSize14);
	line-height: var(--pcLineHeight14_21);
	letter-spacing: var(--pcLetterSpacing14_50);
	color: var(--textColor);
	width: 40.58%;
}
.secPopup .btn01{
	width: 38rem;
	height: 8rem;
	line-height: 8rem;
	color: var(--ColorWhite);
	text-align: center;
	background: var(--mustColor);
	font-size: var(--pcFontSize18);
	letter-spacing: var(--pcLetterSpacing18_50);
	position: absolute;
	bottom: 7.1rem;
	left: 50%;
	transform: translateX(-50%);
}
.secPopupItem .Item:nth-child(n+3){
	margin-top: 6rem;
}
.secPopupItem .Item:nth-child(2n){
	margin-left: 6rem;
}
.secPopupItem .imgList{
	padding-top: 40.7rem;
}
.secPopupItem .Listtxt{
	margin-top: 2rem;
}
@media only screen and (max-width:1215px){
    .secPopupItem{
        height: 54rem;
        max-height: calc(100% - 8%);
        padding: 2rem 0 2rem 0;
        overflow-x: visible;
        overflow-y: scroll;
    }
    .scroll-box{
        padding-right: 1.2rem;
        padding-bottom: 4rem;
    }
    .secPopupItem::-webkit-scrollbar{
        width: 1.2rem;
        height: 0.5rem;
    }
    .secPopupItem::-webkit-scrollbar-thumb{
        background: var(--borderTable);
    }
    .secPopupItem::-webkit-scrollbar-track{
        background: var(--ColorWhite);
    }
    .secPopupItem::-webkit-scrollbar{
        width: 0.5rem;
    }
    .secPopupItem::-webkit-scrollbar-thumb{
        background: var(--borderTable);
        border-radius: 0.2rem;
        background-clip: padding-box;
    }
    .secPopupItem::-webkit-scrollbar-track{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    .secPopupItem .imgUite{
        display: block;
        width: 100%;
        margin: 0 auto;
        padding-top: 0;
        padding-bottom: 0;
        padding: 0 1.5rem;
    }
    .secPopupItem .Item{
        font-size: var(--spFontSize14);
        line-height: var(--spLineHeight14_21);
        letter-spacing: var(--spLetterSpacing14_50);
        width: 100%;
    }
    .secPopup .btn01{
        width: 100%;
        height: 4.5rem;
        line-height: 4.5rem;
        font-size: var(--spFontSize14);
        letter-spacing: var(--spLetterSpacing14_50);
        bottom: 0;
    }
    .secPopupItem .Item:nth-child(n+2){
        margin-top: 3rem;
    }
    .secPopupItem .Item:nth-child(2n){
        margin-left: 0;
    }
    .secPopupItem .imgList{
        padding-top: calc(270 / 430 * 100%);
        height: auto;
        width: 100%;
        margin: auto;
    }
    .secPopupItem .Listtxt{
        font-size: var(--spFontSize12);
        margin-top: 1.2rem;
    }
}

/*-----------------------------------------------
	popup
-----------------------------------------------*/
#popup{
	display: none;
	position: relative;
	z-index: 99999;
}
#popup .overlay{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	background: rgba(0,0,0,0.8);
	position: absolute;
	top: 0;
	left: 0;
}
#popup .popupContainer{
	display: table;
	width: 100%;
	height: 100vh;
}
#popup .popupContents{
	display: table-cell;
	vertical-align: middle;
}
#popup .btnClose{
    width: 1.9rem;
    margin: 0 0 2rem auto;
    position: relative;
    z-index: 10;
    position: absolute;
    right: 3.8rem;
    top: 3.1rem;
}
#popup .popupMain{
    width: 96.572%;
    margin: 0 auto;
    position: relative;
    max-width: 138rem;
    padding: 2rem 0;
}
@media only screen and (max-width:1215px){
    #popup .btnClose{
        width: 3.4rem;
        margin: 0 0 2rem auto;
        position: relative;
        z-index: 10;
        position: absolute;
        right: 1.8rem;
        top: 0.6rem;
    }
    #popup .popupMain{
        width: 100%;
        padding: 5rem 4%;
    }
}