@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

.mainWrap *{
    line-height: 100%;
    letter-spacing: -1px;
    box-sizing: border-box;
}

.disN{
	display:none;
}
.slick-slide img{
    width:100%;
}


.mainWrap{
    width: 100%;
	position:relative;
}

/*loader*/
body{
	overflow-x:hidden;
	font-family: "Asta Sans", sans-serif;
}
.loading{
    width:100%;
    height:100%;
    position:fixed;
    left:0px;
    top:0px;
    background:#fff;
    z-index:1000;
}
.loading img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.main_loader{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    width: 350px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 35px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.circular_loader {
    -webkit-animation: rotate 1s linear infinite;
    animation: rotate 2s linear infinite;
    height: calc(100% + 40px);
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    width: calc(100% + 40px);
    position: absolute;
    top: -20px;
    left: -20px;
    margin: auto;
}

.loader_path {
    stroke-dasharray: 150, 200;
    stroke-dashoffset: -10;
    -webkit-animation: dash_circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash_circle 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

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

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

@-webkit-keyframes dash_circle {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124;
    }
}


#header {
	opacity: 0;
	 animation: fadeIn 1s 4s forwards;
}

/*mainVisual*/
.mainVisual {
	width: 100%;
    position: relative;
    height: 100vh ;
    overflow: hidden;
}

.intro_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #670000;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    animation:
        introOverlayShrink 0.9s ease-in-out forwards,
        introOverlayBgFade 0.9s ease-in-out forwards;
    animation-delay: 2.9s, 2.9s;
}

.intro_gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: linear-gradient(to right, #670000 0%, #670000 20%, rgba(103, 0, 0, 0.7) 55%, rgba(103, 0, 0, 0) 100%);
    opacity: 0;
    animation: gradientFadeIn 0.9s ease-in-out forwards;
    animation-delay: 3.1s;
}

.intro_slogan {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    opacity: 1; 
    animation: fadeIn 0.5s ease-in-out forwards;
    animation-delay: 2.9s;
    transition: opacity 1s ease;
}

.mainVisual.is-slide-alt .intro_slogan {
    animation: none;
    opacity: 0;
    pointer-events: none;
}

.slogan_alt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -110%); 
    z-index: 10;
    text-align: center;
    color: #fff;
    opacity: 0;
    transition: opacity 1s ease;
    pointer-events: none;
	max-width: 288px;
    width: 100%;
}

.mainVisual.is-slide-alt .slogan_alt {
    opacity: 1;
    pointer-events: auto;
}

.slogan_alt_text {
    font-family: "Asta Sans", sans-serif;
    font-size: 40px;
    line-height: 140%;
    font-weight: 300;
}
.slogan_alt_text .point { font-weight: 600; }

.slogan_alt_line {
    width: 2px;
    height: 70px;
    background: #fff;
    margin: 13% auto;
}
.slogan_alt_logo {
	width: 263px;
    margin: 0 auto;
}
.slogan_alt_logo img {
    width: 100%;
}



.intro_slogan_text {
    font-family: "Asta Sans", sans-serif;
    font-size: 40px;
    line-height: 140%;
    font-weight: 300;
    overflow: hidden;
}

.intro_slogan_text .point { font-weight: 600; }

.intro_slogan_text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: charUp 0.6s forwards;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.intro_slogan_text01 .char {
    animation-delay: calc(var(--char-index) * 0.045s);
}

.intro_slogan_text02 .char {
    animation-delay: calc(0.5s + (var(--char-index) * 0.045s));
}

.intro_line {
    width: 2px;
    height: 70px;
    background: #fff;
    margin: 13% auto;
    transform: scaleY(0);
    transform-origin: top;
    animation: growDown 1s ease-out forwards;
    animation-delay: 1.5s;
}

.intro_logo {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
    animation-delay: 1.9s;
}

/* .intro_logo img { width: 100%; } */


.mainVisual .mainSlider {
    width: 100%;
}
.mainVisual .mainSlider .slideCon {
	position: relative;
	height: 100vh;
}

.mainVisual .bg{
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
	transition: transform 1s ease-out
    transform: scale(1.15);
}
.mainVisual .mainSlider .slideCon01 .bg{ background: url(../images/mainVisual_img_01.jpg?v=1) center center / cover no-repeat;}
.mainVisual .mainSlider .slideCon02 .bg{ background: url(../images/mainVisual_img_02.jpg?v=1) center center / cover no-repeat;}
.mainVisual .mainSlider .slideCon03 .bg{ background: url(../images/mainVisual_img_03.jpg?v=1) center center / cover no-repeat;}

.mainVisual .slick-active .bg{
	animation:scale_1 4s forwards;
	transition: transform 4s ease-out;
}

/* .mainVisual.is-slide03 .intro_slogan {
	transform: translateY(-60%);
} */


/* animation */
@keyframes charUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes growDown {
    to { transform: scaleY(1); }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; }
}

@keyframes gradientFadeIn {
    to { opacity: 0.9; }
}

@keyframes introOverlayBgFade {
    to { background-color: transparent; }
}

@keyframes introOverlayShrink {
    to { width: 25%; }
}
@keyframes scale_1{
	0%{
		 transform:scale(1.15);
	}

	100% {
		 transform:scale(1);
	}
}

/* summary */
.summary[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.summary {
    position: relative;
    display: flex;
    height: 90vh;
}

.summary .left {
    position: relative;
    width: 0;
    flex: 0 0 0;
    overflow: hidden;
    transition: flex-basis 0.9s ease;
}
.summary.aos-animate .left {
    flex: 0 0 30%;
}
.summary .left .bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/summary_left.jpg?v=1) center center / cover no-repeat;
}

.summary .right {
    position: relative;
    flex: 1;
    padding: 8% 5%;
}

.summary .right .text {
    width: 100%;
	opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.summary.aos-animate .right .text {
	opacity: 1;
    transform: translateY(0);
	transition-delay: 0.65s;
}

.summary .right .text .sub {
    font-size: 26px;
    color: #546964;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 500;
}
.summary .right .text .title {
    font-size: 64px;
    font-weight: 800;
    font-family: "Plus Jakarta Sans", sans-serif;
    position: relative;
    color: #3f0707;
    position: relative;
}
.summary .right .text .title::after {
	content: "";
	width: 50px;
	height: 1px;
	background: #3f0707;
	display: inline-block;
	margin-left: 10px;
}
.summary .right .text .title .point {
	
}

.summary .right .info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px 40px;
    margin-top: 10%;
    margin-right: 15%;
}
.summary .right .info .list .title {
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid #1d1a1d;
    margin-bottom: 10px;
    color: #595757;
}
.summary .right .info .list .con {
    font-size: 19px;
    color: #555;
    font-weight: 300;
}
.summary .right .info .list {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.summary.aos-animate .right .info .list {
    opacity: 1;
    transform: translateY(0);
}
.summary .right .info .list:nth-child(1) { transition-delay: 1s; }
.summary .right .info .list:nth-child(2) { transition-delay: 1.1s; }
.summary .right .info .list:nth-child(3) { transition-delay: 1.2s; }
.summary .right .info .list:nth-child(4) { transition-delay: 1.3s; }
.summary .right .info .list:nth-child(5) { transition-delay: 1.4s; }
.summary .right .info .list:nth-child(6) { transition-delay: 1.5s; }
.summary .right .info .list:nth-child(7) { transition-delay: 1.6s; }
.summary .right .info .list:nth-child(8) { transition-delay: 1.7s; }
.summary .right .info .list:nth-child(9) { transition-delay: 1.8s; }

/* intro */
.intro {
    position: relative;
    padding: 6% 8% 15%;
    background: #f6f7f7;
    display: flex;
    justify-content: space-between;
	 background: url(../images/intro_bg.jpg?v=1) center center / cover no-repeat;
}

.intro > .text {
    text-align: left;
    margin-bottom: 80px;
	opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.intro.aos-animate > .text {
    opacity: 1;
    transform: translateY(0);
}

.intro .text .sub {
    font-size: 26px;
    color: #546964;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 500;
}

.intro .text .title {
    font-size: 64px;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 30px;
    color: #3f0707;
}

.intro > .text .title .point {
    color: #3f0707;
    font-weight: 600;
}

.intro .text .explain {
    font-size: 20px;
    line-height: 1.5;
    color: #666;
}

.intro .text .explain .point {
    color: #333;
    font-weight: 600;
}

.intro .contents {
    display: flex;
    0%);
    gap: 50px;
    transform: translateY(29%);
}

.intro .contents .list {
	opacity: 0;
    transition: opacity 1s ease, transform 1s ease;
}
.intro.aos-animate .contents .list {
    opacity: 1;
    transform: translateY(0);
}
.intro .contents .list:nth-child(1) { transform: translateY(60px); }
.intro .contents .list:nth-child(2) { transform: translateY(-60px); }
.intro .contents .list:nth-child(3) { transform: translateY(60px); }
.intro.aos-animate .contents .list:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}
.intro.aos-animate .contents .list:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
}
.intro.aos-animate .contents .list:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s;
}

.intro .contents .list .text {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 16px;
    text-align: left;
    color: #666;
    position: relative;
    padding: 0 12%;
}
.intro .contents .list .text::before {
	content:'';
	width: 4px;
	height: 53px;
	background: #546964;
	display: block;
	position: absolute;
	left: 18px;
	top: 6px;
}

.intro .contents .list .text .point {
    font-weight: 700;
    color: #000;
}

.intro .contents .list .image {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.intro .contents .list .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}



/* premium */
.premium[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.premium {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.premium_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: #342f35;
}
.premium_slider,
.premium_slider .slick-list,
.premium_slider .slick-track {
    height: 100%;
}
.premium_slide {
    height: 100vh;
    display: flex !important;
    justify-content: space-between;
    background: #670000;
    text-align: left;
    align-items: center;
}
.premium_slide .text { color: #fff; flex: 0 0 45%; padding: 0 7% 5%; font-family: "Plus Jakarta Sans", sans-serif; }
.premium_slide .text .point {font-weight:100;}

.premium_slide .text .title {
    font-size: 86px;
    font-weight: 800;
    margin-bottom: 10%;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}
.premium.aos-animate .premium_slide.slick-active .text .title {
    opacity: 1;
    transform: translateY(0);
}

.premium_slide .text .slogan { margin-bottom: 5%; }
.premium_slide .text .slogan .en,
.premium_slide .text .slogan .con {
    overflow: hidden;
}
.premium_slide .text .slogan .en { font-size: 24px; line-height: 135%;  font-weight: 600; letter-spacing:2px;}
.premium_slide .text .slogan .con { font-size: 36px; font-weight: 300; line-height: 135%; }
.premium_slide .text .slogan .con .point { font-weight: 600; }
.premium_slide .text .slogan .en .char {letter-spacing:0px !important;}
.premium_slide .text .slogan .en .char,
.premium_slide .text .slogan .con .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
}
.premium.aos-animate .premium_slide.slick-active .text .slogan .en .char {
    animation: pCharUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--char-index) * 0.035s + 0.15s);
}
.premium.aos-animate .premium_slide.slick-active .text .slogan .con .char {
    animation: pCharUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--char-index) * 0.035s + 0.45s);
}

/* explain */
.premium_slide .text .explain {
    font-size: 20px;
    font-weight: 300;
    line-height: 140%;
    opacity: 0;
    transition: opacity 0.7s ease;
    transition-delay: 0.9s;
}
.premium.aos-animate .premium_slide.slick-active .text .explain {
    opacity: 1;
}

/* image */
.premium_slide .image { flex: 1; overflow: hidden; }
.premium_slide .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.15);
    transition: transform 1.5s ease;
}
.premium.aos-animate .premium_slide.slick-active .image img {
    transform: scale(1.01);
}

.premium_controls {
    position: absolute;
    left: 7%;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    pointer-events: none; 
}

.premium_arrows {
    position: absolute;
    bottom: 31%;
    display: flex;
    gap: 12px;
    pointer-events: auto;
	opacity:0;
	transition: 0.8s ease;
}
.premium.aos-animate .premium_arrows {
	opacity:1;
	transition-delay: 1s;
}

.premium_arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 38px auto;
    cursor: pointer;
    transition: 0.3s all;
    padding: 0;
}
.premium_arrow:hover {
    opacity: 0.8;
}

.premium_arrow.prev {
    background-image: url(../images/premium_arrow_l.png?v=1);
}
.premium_arrow.next {
    background-image: url(../images/premium_arrow_r.png?v=1);
}

.premium_dots {
    position: absolute;
    left: 7%;
    bottom: 10%;
    display: flex;
    gap: 10px;
    z-index: 5;
}

.premium_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: none;
    cursor: pointer;
    transition: 0.3s all;
    padding: 0;
}
.premium_dot.--active {
    background: #f09494;
    width: 8px;
    border-radius: 4px;
}

.premium_slide .image_group {
    position: relative;
    flex: 1;
    height: 100%;
    overflow: visible;
}

.premium_slide .image_group .image.main {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.premium_slide .image_group .image.main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.15);
    transition: transform 1.5s ease;
}
.premium.aos-animate .premium_slide.slick-active .image_group .image.main img {
    transform: scale(1);
}
.premium_slide .image_group .image.main img.--replay {
    animation: pImageReplay 1.2s ease forwards;
}

@keyframes pImageReplay {
    from {
        transform: scale(1.15);
        opacity: 0.6;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}



.premium_slide .sub_wrap {
    position: absolute;
    left: -31%;
    bottom: 8%;
    display: flex;
    gap: 20px;
    z-index: 3;
}

.premium_slide .sub_wrap .image.sub {
    width: 200px;
    height: 200px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
	cursor:pointer;
}

.premium.aos-animate .premium_slide.slick-active .sub_wrap .image.sub {
    opacity: 1;
}
.premium.aos-animate .premium_slide.slick-active .sub_wrap .image.sub:nth-child(2) {
}

.premium_slide .sub_wrap .image.sub img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
	transition: 0.5s;
}
.premium_slide .sub_wrap .image.sub:hover img{
	opacity:0.8;
}
/* 
.premium_nav {
    position: absolute;
    bottom: 20%;
    left: 7%;
    display: flex;
    gap: 20px;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.premium.aos-animate .premium_nav {opacity: 1; transition-delay: 1.2s;}
.premium_nav .premium_nav_icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fff;
    transition: 0.5s all;
}
.premium_nav .premium_nav_icon:hover { background: #3f0707; }
.premium_nav .premium_nav_icon.--active {background: #3f0707;} */

@keyframes pCharUp {
    to { opacity: 1; transform: translateY(0); }
}


/* contact */
.contact[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.contact {background: #e1ddd3;}
.contact .contact_wrap{
    display: flex;
    align-items: center;
}
.contact .contact_wrap .image{
	flex: 0 0 45%;
	opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}
.contact.aos-animate .contact_wrap .image {
    opacity: 1;
    transform: translateX(0);
}

.contact .contact_wrap .image img {width: 100%;}
.contact .right {
    width: 100%;
    text-align: left;
    padding: 5% 5% 10%;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.contact .right > .title{
	margin-bottom: 10%;
	opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    transition-delay: 0.2s;
}
.contact.aos-animate .right > .title {
    opacity: 1;
    transform: translateY(0);
}

.contact .right .title .sub{
    font-size: 26px;
    color: #546964;
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 500;
}
.contact .right .title .main {
	font-size: 64px;
	font-weight: 800;
	font-family: "Plus Jakarta Sans", sans-serif;
	position: relative;
	color: #3f0707;
}
.contact .right .title .main::after {
	content: "";
	width: 50px;
	height: 1px;
	background: #3f0707;
	display: inline-block;
	margin-left: 10px;
}

.contact .right .info{}
.contact .right .info .title{
    font-size: 36px;
    font-weight: 600;
    color: #2f2f2f;
    margin-bottom: 2.5%;
	overflow: hidden;
}
.contact .right .info > .con{
    font-size: 20px;
    margin-bottom: 5%;
	overflow: hidden;
}
.contact .right .info > .title .char,
.contact .right .info > .con .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(24px);
}
.contact.aos-animate .right .info > .title .char {
    animation: cCharUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--char-index) * 0.03s + 0.6s);
}
.contact.aos-animate .right .info > .con .char {
    animation: cCharUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--char-index) * 0.03s + 0.9s);
}

.contact .right .info .btnWrap {
    display: flex;
    gap: 30px;
    align-items: center;
	opacity: 0;
    transition: opacity 0.7s ease;
    transition-delay: 1.3s;
}
.contact.aos-animate .right .info .btnWrap {
    opacity: 1;
}

.contact .right .info .btnWrap .btn {}
.contact .right .info .btnWrap .btn a {display: flex;align-items: center;gap: 8px;font-size: 20px;font-weight: 500;color: #333; transition: 0.5s all;}
.contact .right .info .btnWrap .btn a:hover {
	opacity:0.8;
}
.contact .right .info .btnWrap .btn.naver {}
.contact .right .info .btnWrap .btn.kakao {}

@keyframes cCharUp {
    to { opacity: 1; transform: translateY(0); }
}




/*response*/

@media(max-width:1080px){
	.loader{width:calc(100% - 30px);}
    .mainWrap{
        overflow: hidden;
    }
    .mainWrap img{
        width: 100%;
        max-width: max-content;
    }
   
    .mainVisual{
        min-height: 100vh;
        height: 100vh;
    }
	.slogan_alt {
        transform: translate(-50%, -120%); 
    }


	.summary {
        flex-direction: column;
        min-height: auto;
    }
    .summary .left {
        width: 100% !important;
        height: 0;
        flex-basis: auto;
    }
    .summary.aos-animate .left {
        height: 240px;
    }
    .summary .right .info {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 180px;
    }
}

@media(max-width:640px){
    .summary .right .info {
        grid-template-columns: 1fr;
    }
}