#wrap{
    overflow : hidden;
}
/**/
.main-section-premium2{
    display: flex;
    align-items: center;
    justify-content: center;
    width : 100%;
    height : 100vh;
	height : 100svh;
    background : #D3CBC6;
    position : relative;
}
.premium-title-box2{
    display: flex;
    justify-content: space-between;
    width : 100%;
    max-width: 1516px;
    height : 100%;
    max-height : 569px;
    position : absolute;
}
.premium-title2{
    font-size: 70px;
    font-weight: 100;
    letter-spacing: -0.04em;
    line-height: 80px;
    color : rgba(0,0,0,0.3);
    background : url(/hb/2025/dongtan/assets/images/main/gray.jpg)no-repeat;
    background-size: 0% 100%;
    -webkit-background-clip: text;
    background-clip : text;
}
.premium-sub-title2{
    font-size: 70px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 80px;
    align-self: end;
    color : rgba(1,81,82,0.45);
    background : url(/hb/2025/dongtan/assets/images/main/green.jpg)no-repeat;
    background-size: 0% 100%;
    -webkit-background-clip: text;
    background-clip : text;
    text-align: right;
}
.premium-card-box{
    display: flex;
    align-items: center;
    justify-content: center;
    position : relative;
    width : 1193px;
    height : 382px;
    z-index: 1;
    pointer-events: none;
}
.premium-card{
    width : 285px;
    height : 382px;
    background : #fff;
    position : absolute;
    cursor: pointer;
    filter: grayscale(1);
    transition : filter .5s;
	box-shadow : 0 0 10px 1px rgb(0,0,0,0.1);
}
.premium-card.on{
    filter: grayscale(0);
}
.premium-card1{
    z-index: 4;
    background : url(/hb/2025/dongtan/assets/images/main/premium-card-01.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.premium-card2{
    z-index: 3;
    transform: rotate(7deg);
    background : url(/hb/2025/dongtan/assets/images/main/premium-card-02.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.premium-card3{
    z-index: 2;
    transform: rotate(14deg);
    background : url(/hb/2025/dongtan/assets/images/main/premium-card-03.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.premium-card4{
    z-index: 1;
    transform: rotate(21deg);
    background : url(/hb/2025/dongtan/assets/images/main/premium-card-04.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.premium-card-title{
    position : absolute;
    left : 0;
    bottom : 0;
    width : 100%;
    opacity: 0;
}
.premium-card-title > div{
    position: absolute;
    overflow: hidden;
}
.premium-card-title > div > p{
    font-size: 80px;
    font-family: CarismaClassic;
    color : #015152;
    transform: translateY(-100%);
    animation : text-hide .3s both;
    font-weight: 400;
}
@keyframes text-hide {
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-100%);
    }
}
.premium-card-title > div.on > p{
    animation : text-show .3s both;
}
@keyframes text-show {
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(0%);
    }
}
.premium-card-desc{
    position : absolute;
    right : 0;
    top : 100%;
    text-align: right;
    padding-top : 85px;
    width : 100%;
    opacity: 0;
}
.premium-card-desc > div{
    opacity: 0;
    transform: translateY(50px);
    transition : opacity .5s, transform .5s;
    position : absolute;
    width : 100%;
    height : 100%;
}
.premium-card-desc > div.on{
    opacity: 1;
    transform: translateY(0px);
}
.premium-card-desc > div > h5{
    font-size: 31px;
    color : #015152;
    font-weight: 700;
    margin-bottom : 18px;
    position : relative;
}
.premium-card-desc > div > h5::after{
    position : absolute;
    content: '';
    width : 39px;
    height : 1px;
    background : #015152;
    right : 0;
    top : -34px;
}
.premium-card-desc > div > p{
    font-size : 16px;
    letter-spacing: -0.04em;
    color : #434343;
    line-height: 26px;
    font-weight: 400;
}
/**/
.visual2-box{
    width : 100%;
    height : 100vh;
    position : absolute;
    z-index: 11;
    opacity: 1;
    perspective: 1000px;
}
.visual2-bg{
    width : 100%;
    height : 100%;
    background : #015152;
    z-index: -1;
    opacity: 1;
    position : fixed;
    left : 0;
    top : 0;
}
.visual2-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width : 100%;
    height : 100%;
    color : #fff;
    position : relative;
    z-index: 100;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.visual2-inner> span{
    font-size: 24px;
    font-family: italiana;
    margin-bottom : 4px;
    letter-spacing: 0.5em;
}
.visual2-inner .visual2-title{
    font-family: italiana;
    font-size: 51px;
    font-weight: 400;
    margin-bottom : 9px;
    letter-spacing: 0em;
}
.visual2-inner .visual2-sub-title{
    font-size: 34px;
    letter-spacing: -0.05em;
    margin-bottom : 15px;
}
.visual2-inner .visual2-desc{
    font-size: 20px;
    letter-spacing: -0.05em;
    line-height: 29px;
    text-align: center;
}
.slide-section{
    display: flex;
    align-items: center;
    justify-content: center;
    width : 100%;
    height : 100vh;
    /* background : #f7f7f7; */
    padding : 4em 0;
    overflow : hidden;
    perspective: 1000px;
    position : relative;
    z-index: 10;
}
.slide-section > div:not(.visual2-box){
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    /* width : 80%; */
    width: 1466px;
    /* height : calc(100% - 8em); */
    height : 742px;
    color : #fff;
    border-radius: 33px;
    padding : 70px 0 0 97px;
    margin : 0 auto;
    transform-origin: top;
    position : absolute;
    top : 100%;
    transform: rotateX(15deg) scale(1) translateZ(100px) translateY(0);
    letter-spacing: -0.05em;
}
.slide-section > div.slide1{
    width : 158px;
    height : 80px;
    /* width : 100%;
    height : 100%; */
    border-radius: 0;
    opacity: 1;
    /* opacity: 0; */
    /* top : 6em; */
    top : 50vh;
    transform: rotateX(0) scale(1) translateZ(0) translateY(-50%);
    background : url(/hb/2025/dongtan/assets/images/main/slide1.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.slide-section > div.slide2{
    background : url(/hb/2025/dongtan/assets/images/main/slide2.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.slide-section > div.slide3{
    background : url(/hb/2025/dongtan/assets/images/main/slide3.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.slide-section > div.slide4{
    background : url(/hb/2025/dongtan/assets/images/main/slide4.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.slide-title{
    /* font-size: 43px; */
	font-size : 34px;
    /* line-height: 53px; */
	line-height : 44px;
    margin-bottom : 10px;
}
.slide-desc{
    /* font-size: 16px; */
	font-size : 20px;
    line-height: 26px;
    opacity: .8;
}
.card-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap : 100px; */
    gap : 130px;
    position : relative;
    width : 100%;
    height : 100vh;
}
.card-box{
    /* width : 340px; */
    width : 387px;
    /* height : 420px; */
    height : 481px;
    position : relative;
    flex-shrink: 0;
}
.card-box > div{
    width : 100%;
    height : 100%;
    border-radius: 15px;
    position : absolute;
    perspective : 1000px;
    transform-origin: center;
}
.card-box > div:hover{
    transform: scale(1.2);
}
.card-inner{
    width : 100%;
    height : 100%;
	transition : transform .2s;
    transition-delay: 0;
    border-radius: 15px;
    transform-origin: center;
    box-shadow: 0 10px 10px rgba(0,0,0,0.16);
}
.card1{
    z-index: 5;
}
.card1 .card-inner{
    background : url(/hb/2025/dongtan/assets/images/main/card1.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.card2{
    z-index: 4;
    transform: translateY(10px);
}
.card2 .card-inner{
    background : url(/hb/2025/dongtan/assets/images/main/card2.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.card3{
    z-index: 3;
    transform: translateY(20px);
}
.card3 .card-inner{
    background : url(/hb/2025/dongtan/assets/images/main/card3.jpg)no-repeat;
    background-size: cover;
    background-position : center;
}
.card4{
    z-index: 2;
    transform: translateY(30px);
}
.card4 .card-inner{
    background : forestgreen;
}
.card-desc1, .card-desc2{
    display: flex;
    align-items: center;
    /* font-size: 50px; */
    font-size: 66px;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.25em;
    position : relative;
    width : 30%;
    height : 100%;
}
.card-desc1{
    text-align: right;
}
.card-desc1 > div, .card-desc2 > div{
    position : absolute;
    width : 100%;
}
.card-desc1 > div > div , .card-desc2 > div > div{
    /* position : absolute; */
    width : 100%;
    overflow: hidden;
    white-space: nowrap;
}
.card-desc1 > div > div > p , .card-desc2 > div > div > p{
    transform: translateY(110%);
    color : #175A5B;
}
.card-desc2 > div > div > p{
    line-height: 76px;
}
.card-desc1 > div > div > p.card-desc-title{
    font-family: italiana;
    
    letter-spacing: 0.5em;
    font-size : 36px;
}
.card-desc1 > div > div > p > img , .card-desc2 > div > div > p > img{
    margin-left : auto;
}
.card-desc1 .card-desc-01 > div > p,
.card-desc2 .card-desc-01 > div > p{
    transform: translateY(0%);
}
.main-section-natural{
    width : 100%;
    height : 100vh;
    background : url(/hb/2025/dongtan/assets/images/main/natural-bg.jpg)no-repeat;
    background-size: cover;
    background-position : center;
    position : relative;
}
.natural-bg{
    display: flex;
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    overflow: hidden;
    z-index: 0;
}
.natural-bg > img{
    height : 100%;
    width : auto;
    max-width: none;
    animation : natural-text 24s infinite linear;
}
@keyframes natural-text {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-100%);
    }
}
.natural-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width : 100%;
    height : 100%;
    position : relative;
}
.natural-title{
    font-size: 51px;
    font-family: italiana;
    margin-bottom : 9px;
    font-weight: 400;
    color: #175A5B;
    transform: translateX(-50px) skew(10deg);
    filter: blur(5px);
    opacity: 0;
}
.natural-sub-title{
    font-size: 34px;
    letter-spacing: -0.05em;
    font-weight: 700;
    margin-bottom : 15px;
    color : #175A5B;
    transform: translateX(50px) skew(-10deg);
    filter: blur(5px);
    opacity: 0;
}
.natural-desc{
    font-size: 20px;
    letter-spacing: -0.05em;
    line-height: 29px;
    color : #262626;
    text-align: center;
    transform: translateY(50px);
    filter: blur(5px);
    opacity: 0;
}
/**/
.main-section-brand{
    width : 100%;
    height : 100vh;
    position : relative;
}
.brand-bg{
    width : 100%;
    height : 100%;
    position : absolute;
    left : 0;
    top : 0;
    z-index: -1;
}
.brand-bg > img{
    width : 100%;
    height : 100%;
    object-fit: cover;
    object-position: center;
}
.brand-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap : 36px;
    width : 100%;
    height : 100%;
    color : #fff;
    position : relative;
    padding-top : 50px;
}
.brand-inner > span{
    font-size: 22px;
    font-family: italiana;
    /* letter-spacing: 0.5em; */
    letter-spacing: 1.5em;
    transition : letter-spacing 2s;
}
.aos-animate .brand-inner > span{
    letter-spacing : .5em;
}
.brand-inner > .brand-title{
    filter: blur(10px);
    opacity: 0;
    transition : 2s;
}
.aos-animate .brand-inner > .brand-title{
    filter : blur(0);
    opacity: 1;
}
.brand-desc{
    text-align: center;
    margin-bottom : 54px;
    transform: translateY(50px);
    opacity: 0;
    transition : transform 2s, opacity 2s;
    transition-delay : 1s;
}
.aos-animate .brand-desc{
    transform: translateY(0);
    opacity: 1;
}
.brand-btn{
    display : flex;
    align-items: center;
    justify-content: center;
    width : 150px;
    height : 150px;
    border-radius: 50%;
    position : absolute;
    bottom : 40px;
    right : 70px;
    filter: blur(10px);
    opacity: 0;
    transition : filter 2s, opacity 2s;
}
.brand-btn::after{
    width : 100%;
    height : 100%;
    position : absolute;
    content: '';
    background: url(/hb/2025/dongtan/assets/images/main/brand-rotate-text.png)no-repeat;
    background-size: 100% 100%;
    animation : rotate-text 7s infinite linear;
}
@keyframes rotate-text {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
.brand-rotate-circle{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 15px;
    width : 114px;
    height : 114px;
    background : rgba(255,255,255,0.3);
    backdrop-filter: blur(5px);
    border-radius: 50%;
}

.brand-rotate-circle > span{
    font-family: italiana;
    font-size: 26px;
}
.aos-animate .brand-btn{
    filter: blur(0);
    opacity: 1;
    transition-delay: 1.5s;
}

/* 1600 */
@media(max-width : 1600px){

	.visual2-inner> span{
        font-size: 20px;
        margin-bottom : 3px;
    }
    .visual2-inner .visual2-title{
        font-size: 40px;
        margin-bottom : 6px;
        white-space : nowrap;
    }
    .visual2-inner .visual2-sub-title{
        font-size: 26px;
        margin-bottom : 12px;
    }
    .visual2-inner .visual2-desc{
        font-size: 18px;
        line-height: 24px;
    }
    /**/
    .premium-title-box2{
        width : 90%;
        max-width: 100%;
        height : 100%;
        max-height : 300px;
    }
    .premium-title2{
        font-size: 40px;
        line-height: 45px;
    }
    .premium-sub-title2{
        font-size: 40px;
        line-height: 45px;
    }
    .premium-card-box{
        display: flex;
        align-items: center;
        justify-content: center;
        position : relative;
        width : 750px;
        height : 250px;
        z-index: 1;
        pointer-events: none;
    }
    .premium-card{
        width : 180px;
        height : 250px;
    }
    .premium-card-title > div > p{
        font-size: 50px;
    }
    .premium-card-desc{
        padding-top : 70px;
    }
    .premium-card-desc > div > h5{
        font-size: 24px;
        margin-bottom : 14px;
    }
    .premium-card-desc > div > h5::after{
        width : 30px;
        top : -20px;
    }
    .premium-card-desc > div > p{
        font-size : 14px;
        line-height: 22px;
    }
	/**/
    .slide-section{
        padding : 4em 0;
    }
    .slide-section > div:not(.visual2-box){
        width: 900px;
        max-width : 85vw;
        height : 500px;
        border-radius: 25px;
        padding : 40px 0 0 60px;
    }
    .slide-section > div.slide1{
        width : 158px;
        height : 80px;
        border-radius: 0;
        max-width : 85vw;
        top : 50%;
        transform: translateY(-50%);
    }
    .slide-title{
		font-size : 26px;
        line-height: 34px;
        text-shadow: 0 3px 6px rgba(0,0,0,0.16);
    }
	.slide-desc{
		font-size : 18px;
	}
    .card-slide{
        display: flex;
        align-items: center;
        justify-content: center;
        gap : 50px;
        position : relative;
        width : 100%;
        height : 100vh;
    }
    .card-box{
        width : 250px;
        height : 350px;
    }
    .card-box > div:hover{
        transform: scale(1.2);
    }
    .card-desc1, .card-desc2{
        font-size: 35px;
    }
    .card-desc2 > div > div > p{
        line-height: 45px;
        height : 45px;
    }
    .card-desc1 > div > div > p.card-desc-title{
        font-size : 24px;
    }
    .card-desc1 > div > div > p > img , .card-desc2 > div > div > p > img{
        max-height : 100%;
        height : 45px;
    }
    /**/
    .brand-inner{
        gap : 24px;
        padding-top : 20px;
    }
    .brand-inner > span{
        font-size: 18px;
    }
    .brand-title > img{
        max-width : 360px;
    }
    .brand-desc{
        margin-bottom : 0px;
    }
    .brand-btn{
        width : 150px;
        height : 150px;
        bottom : 30px;
        right : 40px;
    }   
}

@media(max-width : 1200px){
    .visual2-inner> span{
        font-size: 20px;
        margin-bottom : 3px;
    }
    .visual2-inner .visual2-title{
        font-size: 40px;
        margin-bottom : 6px;
        white-space : nowrap;
    }
    .visual2-inner .visual2-sub-title{
        font-size: 26px;
        margin-bottom : 12px;
    }
    .visual2-inner .visual2-desc{
        font-size: 18px;
        line-height: 24px;
    }
    /**/
    .premium-title-box2{
        width : 90%;
        max-width: 100%;
        height : 100%;
        max-height : 300px;
    }
    .premium-title2{
        font-size: 40px;
        line-height: 45px;
    }
    .premium-sub-title2{
        font-size: 40px;
        line-height: 45px;
    }
    .premium-card-box{
        display: flex;
        align-items: center;
        justify-content: center;
        position : relative;
        width : 750px;
        height : 250px;
        z-index: 1;
        pointer-events: none;
    }
    .premium-card{
        width : 180px;
        height : 250px;
    }
    .premium-card-title > div > p{
        font-size: 50px;
    }
    .premium-card-desc{
        padding-top : 70px;
    }
    .premium-card-desc > div > h5{
        font-size: 24px;
        margin-bottom : 14px;
    }
    .premium-card-desc > div > h5::after{
        width : 30px;
        top : -20px;
    }
    .premium-card-desc > div > p{
        font-size : 14px;
        line-height: 22px;
    }
	/**/
    .slide-section{
        padding : 4em 0;
    }
    .slide-section > div:not(.visual2-box){
        width: 900px;
        max-width : 85vw;
        height : 500px;
        border-radius: 25px;
        padding : 40px 0 0 60px;
    }
    .slide-section > div.slide1{
        width : 158px;
        height : 80px;
        border-radius: 0;
        max-width : 85vw;
        top : 50%;
        transform: translateY(-50%);
    }
    .slide-title{
        text-shadow: 0 3px 6px rgba(0,0,0,0.16);
    }
    .card-slide{
        display: flex;
        align-items: center;
        justify-content: center;
        /* gap : 100px; */
        gap : 50px;
        position : relative;
        width : 100%;
        height : 100vh;
    }
    .card-box{
        width : 250px;
        height : 350px;
    }
    .card-box > div:hover{
        transform: scale(1.2);
    }
    .card-desc1, .card-desc2{
        font-size: 35px;
    }
    .card-desc2 > div > div > p{
        line-height: 45px;
        height : 45px;
    }
    .card-desc1 > div > div > p.card-desc-title{
        font-size : 24px;
    }
    .card-desc1 > div > div > p > img , .card-desc2 > div > div > p > img{
        max-height : 100%;
        height : 45px;
    }
    /**/
    .brand-inner{
        gap : 24px;
        padding-top : 20px;
    }
    .brand-inner > span{
        font-size: 18px;
    }
    .brand-title > img{
        max-width : 360px;
    }
    .brand-desc{
        margin-bottom : 0px;
    }
    .brand-btn{
        width : 150px;
        height : 150px;
        bottom : 30px;
        right : 40px;
    }   
}

/* 767 */

@media(max-width : 768px){
    .visual2-inner> span{
        font-size: 12px;
    }
    .visual2-inner .visual2-title{
        font-size: 20px;
        margin-bottom : 4px;
    }
    .visual2-inner .visual2-sub-title{
        font-size: 16px;
        margin-bottom : 10px;
    }
    .visual2-inner .visual2-desc{
        font-size: 12px;
        line-height: 18px;
    }
    /**/
    .premium-title-box2{
        width : 90%;
        max-width: 100%;
        height : 100%;
        max-height : 80%;
    }
    .premium-title2{
        font-size: 24px;
        line-height: 30px;
        white-space : nowrap;
    }
    .premium-sub-title2{
        font-size: 24px;
        line-height: 30px;
    }
    .premium-card-box{
        display: flex;
        align-items: center;
        justify-content: center;
        position : relative;
        width : 340px;
        height : 420px;
        z-index: 1;
        pointer-events: none;
        padding-bottom : 50px;
    }
    .premium-card{
        width : 165px;
        height : 205px;
    }
    .premium-card-title > div > p{
        font-size: 30px;
    }
    .premium-card-desc{
        padding-top : 50px;
    }
    .premium-card-desc > div > h5{
        font-size: 16px;
        margin-bottom : 10px;
    }
    .premium-card-desc > div > h5::after{
        width : 20px;
        top : -10px;
    }
    .premium-card-desc > div > p{
        font-size : 12px;
        line-height: 16px;
    }
    .slide-section{
        padding : 4em 0;
    }
    .slide-section > div:not(.visual2-box){
        max-width : 90vw;
        height : 500px;
        border-radius: 15px;
        padding : 20px 0 0 30px;
    }
    .slide-section > div.slide1{
        width : 100px;
        height : 50px;
        border-radius: 0;
        max-width : 90vw;
    }
    .slide-title{
		font-size : 16px;
		line-height : 24px;
    }
    .slide-desc{
        opacity: 1;
		font-size : 12px;
		line-height : 18px;
        text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    }
    .card-slide{
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-items: center;
        justify-content: center;
        gap : 20px;
        position : relative;
        width : 100%;
        height : 100vh;
    }
    .card-box{
        width : 180px;
        height : 250px;
    }
    .card-desc1, .card-desc2{
        font-size: 24px;
        width : 100%;
        height : 100px;
        text-align: center;
    }
    .card-desc2 > div > div > p{
        line-height: 24px;
        height : 24px;
    }
    .card-desc1 > div > div > p.card-desc-title{
        font-size : 14px;
    }
    .card-desc1 > div > div > p > img , .card-desc2 > div > div > p > img{
        max-height : 100%;
        height : 24px;
        margin : 0 auto;
    }
    /**/
    .main-section-brand{
        height : auto;
    }
    .brand-inner{
        gap : 20px;
        padding : 200px 0;
    }
    .brand-inner > span{
        font-size: 14px;
        white-space: nowrap;
    }
    .brand-title > img{
        max-width : 200px;
    }
    .brand-desc{
        font-size: 12px;
    }
    .brand-btn{
        width : 100px;
        height : 100px;
        bottom : 20px;
        right : 20px;
    }
    .brand-rotate-circle{
        font-size: 11px;
        width : 75px;
        height : 75px;
    }
    .brand-rotate-circle > span{
        font-size: 16px;
    }
}