@keyframes rotate-text {
    100%{transform: rotate(-360deg);}
}

.section{overflow: hidden;}
.visual-bg{position : absolute; left: 0; top : 0; width : 100%; height : 100%;
    img{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 5s;}
}

.visual-inner{display: flex;justify-content: center; position : relative; height : 100%; padding-top: 12.7rem;}
.visual-tit-box{display: flex;flex-direction: column;align-items: center;}
.visual-tit-01{margin-bottom: 1.2rem; transform: translateY(6rem); opacity: 0;}
.visual-tit-02{margin-bottom: 1.2rem; transform: translateY(6rem); opacity: 0;}
.visual-line{width : 1px; height : 4.6rem; background: rgba(0,0,0,0.27); height : 0; margin-bottom: 1.2rem;}
.visual-logo{opacity: 0;}

.open-rotate-btn{display: flex;flex-direction: column; align-items: center;justify-content: center; width : 10.8rem; height : 10.8rem; border-radius: 50%; background: #253F8F; color : #fff; font-size: 1.9rem; letter-spacing: -0.04em; line-height: 1.5em; font-weight: 700; position : absolute; right : 10.4rem; top : 13.7rem; transform: translateX(16rem); opacity: 0;
    &::after{position : absolute; content : ''; width : 16.9rem; height : 16.9rem; background: url(/assets/images/main/open-rotate-text.png)no-repeat center / contain; animation : rotate-text 8s infinite linear}
}

.info-desc{display: flex;align-items: center;gap : 0.7rem; color : #000; font-size: 1.5rem; font-weight: 500; position : absolute; left : 13.7rem; bottom : 4.3rem; z-index: 1; transform: translateY(5rem); opacity: 0; transition :1.2s;
    &::before{display: flex;align-items: center;justify-content: center; position :relative; content :'!'; font-family: gotham; font-weight: 900; width : 2.4rem; height : 2.4rem; border-radius: 50%; border : 1px solid #000;}
}
.main-visual.on{
    .visual-bg > img{transform: scale(1); transition : 5s;}
    .visual-tit-01{transform: translateY(0); opacity: 1; transition : 2s .4s;}
    .visual-tit-02{transform: translateY(0); opacity: 1; transition : 2s .6s;}
    .visual-line{height : 4.6rem; transition : 2s 1.2s;}
    .visual-logo{opacity: 1; transition : 1.2s 1.4s}
    .open-rotate-btn{transform: translateX(0); opacity: 1; transition : 2s 1.2s;}
    .info-desc{transform: translateY(0); opacity: 1; transition : 2s 1.2s;}
}

/* PREMIUM */
.main-premium{
    .info-desc{color : rgba(255,255,255,0.67); left : auto; right : 8rem; bottom : 2.4rem;
        &::before{border : 1px solid #fff; color : #fff;}
    }
}
.premium-bg{position : absolute; left: 0; top : 0; width : 100%; height : 100%;
    img{width : 100%; height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 0s 1.4s;}
}

.premium-container{display: grid;grid-template-columns: repeat(4,1fr); position : relative; width : 100%; height : 100%;
    & > div{display: flex;flex-direction: column;align-items: center; position : relative; padding-top: 24rem;
        &:not(:last-child)::after{position : absolute; content : ''; width : 1px; height : 100%; background: rgba(255,255,255,0.2); right : 0; top : 0; clip-path: inset(0 0 100%); transition : 0s 1.4s;}
    }
}

.premium-con{display: flex;flex-direction: column;align-items: center; text-align: center;}
.premium-tit{font-family: trajan-pro-3; color : #fff; margin-bottom: 1.3rem; letter-spacing: -0.04em; font-size: 4rem; font-weight: 400;
    .char{opacity: 0;transform: translateX(5rem); transition : 0s 1.4s;}
}
.premium-line{width : 1px; height : 3.7rem; background: rgba(255,255,255,0.37); margin-bottom: 1.8rem; height : 0; transition : 0s 1.4s;}
.premium-con-tit{font-size: 2.7rem; color : #fff; font-weight: 300; letter-spacing: -0.04em; margin-bottom: 2.3rem; opacity: 0; transition : 0s 1.4s;
    b{font-size: 3.7rem; font-weight: 500; color : #AC8D70;}
}
.premium-con-desc{line-height: 1.5em; font-size: 1.7rem; font-weight: 500; color : #6F6F6F; opacity: 0; transition : 0s 1.4s;
    b{font-weight: 700; color : #AC8D70;}
}
.premium-obj{position : absolute; bottom : 6.5rem; transform: translateY(5rem); opacity: 0; transition : 0s 1.4s;}

.main-premium.active{
    .premium-bg > img{transform: scale(1); transition : 5s;}
    .premium-container > div::after{clip-path: inset(0); transition : 3s;}
    .premium-tit .char{opacity: 1; transform: translateX(0); transition : 1s calc(var(--i) * 0.1s + 0.4s)}
    .premium-line{height : 3.7rem; transition : 1.2s 1.2s}
    .premium-con-tit, .premium-con-desc{opacity: 1; transition : 1s 1.2s;}
    .premium-obj{transform: translateY(0); opacity: 1; transition : 1s 1.2s;}
    .info-desc{opacity: 1; transform: translateY(0); transition : 1.2s 1.2s;}
}

/**/
.customer-bg{position : absolute;left : 0;top : 0;width : 100%;height : 100%; z-index: 0; transition : 1.2s;}
.customer-bg > img{width : 100%;height : 100%; object-fit: cover; object-position: center; transform: scale(1.5); transition : 0s 1.4s;}

.customer-inner{display: flex;align-items: center; justify-content: center; position : relative; margin : 0 auto; position : relative;height : 100%; gap : 16rem; padding-left: 6rem;}
.customer-tit-box{display: flex;flex-direction: column; align-items: center; color : #fff; transition : 1.2s; white-space: nowrap; transform: translateX(-16rem); opacity: 0; transition : 0s 1.4s;}
.customer-tit{color : #D3D3D3; font-size: 4.2rem; font-weight: 400; margin-bottom: 3rem; line-height: 1.25em; text-align: center;
    b{color : #fff; font-size: 700;
        span{position : relative;
            &::after{position : absolute; content : ''; width : 10px; height : 10px; border-radius: 50%; background: #fff; left : 50%;transform: translateX(-50%); bottom : 100%; margin-bottom: 0.2rem;}
        }
    }
    .char{opacity: 0; transition : 0s 1.4s;}
}

.customer-btn{padding : 11px 0 9px; width : 360px; color : #fff; transition : .5s; position : relative; text-align: center; font-family: PT;}
.customer-btn > p{opacity: 0; transition : 0s 1.4s;}
.customer-btn > p::after{position : absolute; content : ''; width : 100%;height : 100%; background: rgba(255,255,255,0.1); left : 0;top : 0; clip-path: inset(0 100% 0 0); transition : .5s; pointer-events: none;;}
.customer-btn:hover > p::after{clip-path: inset(0);}
.customer-btn::after{position : absolute; content : ''; width : 100%; height : 1px; background: rgba(255,255,255,0.3); left :0;top : 0; clip-path: inset(0 50%); transition : 1s;}
.customer-btn::before{position : absolute; content : ''; width : 100%; height : 1px; background: rgba(255,255,255,0.3); left :0;bottom : 0; clip-path: inset(0 50%); transition : 1s;}




.customer-container{display: flex;flex-direction: column; padding : 40px 44px 50px; background: #fff; width : 100%; max-width: 114.1rem;  border-radius: 24px; font-family: PT; letter-spacing: -0.04em; transform: translateX(0%); transition : 1.2s; max-height: 80vh; transform: translateX(16rem); opacity: 0; transition : 0s 1.4s;}

.customer-cont-tit-box{display: flex;align-items: center; margin-bottom: 30px;}
.customer-cont-tit{font-family: jost; font-size: 57px; font-weight: 500; margin-right: 28px; line-height: 1em;}
.customer-cont-desc{display: flex;align-items: center; font-family: PT; letter-spacing: -0.04em; font-weight: 500; color : #313131; position : relative; padding-left: 28px;line-height: 2em; font-size: 18px;}
.customer-cont-desc::after{position : absolute; content: ''; width : 1px; height : 19px; background: #696969; left : 0;}

.customer-cont-inner{overflow-y : scroll;padding-right: 30px; height : 100%;}

.customer-drop{border : 1px solid #ddd;}
.customer-drop-tit{display: flex;align-items: center; background: #EFEFEF; padding : 11px 19px; color : #313131; font-size: 22px; font-weight: 500; border-bottom : 1px solid #ddd; position : relative; cursor : pointer;}
.customer-drop-tit::after{position : absolute; content : ''; width : 13px;height : 13px; border-top :1px solid #707070; border-right : 1px solid #707070; transform: rotate(-45deg); right : 36px; transition : .5s;margin-top: 10px;}
.fold .customer-drop-tit::after{transform: rotate(135deg); margin-top: 0;}

.customer-drop-con{padding : 0px 0 0 18px;}
.customer-textarea{resize: none; width : 100%; height : 344px; overflow-y : scroll; font-size: 14px; font-weight: 500; color : #6E6E6E; line-height: 2em; padding : 30px 0;}
.customer-textarea b{color : #000}

/**/

.customer-radio{display: flex; justify-content: space-between; align-items: center; padding : 20px 0; border-bottom : 1px solid #ddd}
.customer-radio-desc{font-size: 15px; font-weight: 500; line-height: 1.5em; color : #6E6E6E;}
.customer-radio-btn-box{display: flex; gap : 24px}
.customer-radio-btn-box > label{display: flex;align-items: center;gap : 6px; font-size: 18px; font-weight: 500; color : #313131; cursor : pointer}

.customer-radio-btn-box input[type="radio"]{accent-color:#000; width : 18px;height : 18px;}

.customer-drop-02{margin-bottom: 30px;}
.customer-drop-02 .customer-drop-con{padding : 30px 18px; color :#6E6E6E; font-size: 15px;}
.customer-table{border-collapse: collapse; width : 100%; border-top : 2px solid #000; margin : 20px 0 0; color : #000;}
.customer-table td,
.customer-table th{border : 1px solid #ddd; width : 33.3333%;}
.customer-table th{background: #f9f9f9; font-weight: 700; color : #000; padding : 16px 0;}
.customer-table td{padding : 20px 0 11px; text-align: center;}


.customer-drop-03{margin-bottom: 30px;}
.customer-drop-03 .customer-drop-con{padding : 30px 18px; color :#6E6E6E; font-size: 15px;}

/**/
.customer-comment{line-height: 1.5em; font-size: 15px; letter-spacing: -0.04em; font-weight: 500; background: #E2E3E4; padding : 26px 0; text-align: center; margin-bottom: 38px;}
.customer-comment.color{background: #EEE6DF;}

.customer-survey{margin-bottom: 30px;}
.customer-survey-q{margin-bottom: 16px; font-size: 15px; font-weight: 500;}
.customer-survey-list{display: grid;grid-template-columns: repeat(4, 1fr); font-size: 15px; font-weight: 400;}
.customer-survey-list label{display: flex; align-items: center;gap : 7px; cursor: pointer;}
.customer-survey input[type="radio"],
.customer-survey input[type="checkbox"]{display: flex;align-items: center;justify-content: center; appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid #707070;border-radius: 0;cursor:pointer; position : relative;}

.customer-survey input[type="radio"]::after,
.customer-survey input[type="checkbox"]::after{position : absolute; content : ''; transform: scale(0.6); background: #000; opacity: 0; width : 100%;height : 100%;}

.customer-survey input[type="radio"]:checked::after,
.customer-survey input[type="checkbox"]:checked::after{opacity: 1;}

.customer-survey-list.list{border-top : 1px solid #ddd; grid-template-columns: repeat(1, 1fr)}
.customer-survey-list.list > li{padding : 0 33px; height : 43px;}
.customer-survey-list.list > li{border-bottom : 1px solid #ddd;}
.customer-survey-list.list label{display: flex; gap : 0; height : 100%;}
.customer-survey-list.list input[type="radio"],
.customer-survey-list.list input[type="checkbox"]{margin-right: 33px;}
.customer-survey-list.list label > span{padding : 12px 0; width : 295px; text-align: center; flex-shrink: 0; border-left : 1px solid #ddd; background: #F9F9F9;}
.customer-survey-list.list label > div{padding: 12px 13px; flex : 1; border-left : 1px solid #ddd;height : 100%;}
.customer-survey-list.list .etc label > div{padding: 10px 13px;}
.customer-survey-list.list label > div > input[type="text"]{border : 1px solid #ddd; flex : 1;height : 100%; width : 100%;}

/**/
.customer-info{color : #6E6E6E; margin-bottom: 30px; font-weight: 500; letter-spacing: -0.04em; font-weight: 15px; line-height: 1.25em;}

/**/
.customer-data{border-collapse: collapse; width : 100%; margin-bottom: 16px;}

.customer-data th{padding : 18px 0; width : 220px;}
.customer-data th.customer-data-tit{background: #EFEFEF; padding : 11px 19px; font-size: 22px; font-weight: 500;color : #313131; text-align: left; width : auto; background: #F9F9F9;}

.customer-data td,
.customer-data th{border : 1px solid #ddd;}
.customer-data th{background: #F9F9F9; font-weight: 400;}

.customer-data td{padding : 10px 16px; height : 50px;}
.customer-data td > input[type="text"]{border : none; width : 100%; height : 100%;}

.customer-data .customer-survey-list{grid-template-columns: repeat(6, 1fr); padding-left: 30px;}

.customer-data input[type="radio"],
.customer-data input[type="checkbox"]{display: flex;align-items: center;justify-content: center; appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid #707070;border-radius: 0;cursor:pointer; position : relative;}

.customer-data input[type="radio"]::after,
.customer-data input[type="checkbox"]::after{position : absolute; content : ''; transform: scale(0.6); background: #000; opacity: 0; width : 100%;height : 100%;}

.customer-data input[type="radio"]:checked::after,
.customer-data input[type="checkbox"]:checked::after{opacity: 1;}

.customer-submit{display: block; width : 210px; height : 63px; color : #fff; font-family: PT; letter-spacing: -0.04em; background: #0E033B; font-weight: 500; font-size: 18px; border : none; outline: none; cursor : pointer; margin : 0 auto;}

.customer-close{display: flex;align-items: center;justify-content: center; width : 66px; height : 66px; border-radius: 50%; background: #000; position : absolute; right : 16px; top : 22px;}
.customer-close::after{position: absolute; content : ''; width : 1px;height : 26px; background: #fff;transform: rotate(45deg);}
.customer-close::before{position: absolute; content : ''; width : 1px;height : 26px; background: #fff; transform: rotate(-45deg);}

.main-customer.fp-active{
    .customer-bg > img{transform: scale(1); transition : 5s;}
    .customer-tit-box{transform: translateX(0); opacity: 1; transition : 2s .4s;}
    .customer-container{transform: translateX(0); opacity: 1; transition : 2s .4s;}
    .customer-tit .char{opacity: 1; transition : 1s calc(var(--i) * 0.1s + 0.4s)}
    .customer-btn{
        &::after, &::before{clip-path: inset(0); transition : 1s 2s;}
        & > p{opacity: 1; transition :1s 2s;}
    }
}