@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

.disN{
	display:none;
}
.right_fix{
    position: fixed;
    left: 0;
    height: 100vh;
    top: 83px;
    z-index: 10;
}
.right_fix .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    position:relative;
    height: 100%;
}
.right_fix .content:before{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background: rgba(0,33,91,0.8) url(../images/rightfix_bg2.png?v=w) center center / cover no-repeat;
	z-index: -1;
    opacity: 0.8;
	background-position-y: -10vh;
}
.right_fix .btn{
    cursor: pointer;
    transition: 0.75s all;
}
.right_fix .btn:hover{
    filter: sepia(1);
    transition: 0.75s all;
}
.right_fix .content .list{
    padding-bottom: 30px;
    border-bottom: 1px solid #fff;
    padding-top: 30px;
}
.right_fix .content .list:last-child{
    border-bottom:0;
    padding-bottom:0;
	margin-top:50px;
}
.right_fix .content .explain_open{
	color:#fff;
	text-align:center;
	font-weight:700;
}
.right_fix .content .explain_open .point{
	color:#fabe00;
	font-size:20px;
}
.mainWrap{
	background-color:#fff;
	margin-top: 83px;
}
.mainWrap img{
    width:100%;
}
.mainVisual {
    width: 100%;
    position: relative;
    height: calc(100vh - 83px);
    display:flex;
    overflow: hidden;
}
.mainVisual .bg{
    background: url(../images/mainVisual_bg2.jpg?v=3)center center / cover no-repeat;
    width:100%;
    height:100%;
    position: absolute;
    left:0;
    top:0;
    animation: mainVisual_bg 10s forwards 1;
}
@keyframes mainVisual_bg{
    0%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}
.mainVisual .right_logo{
	position:absolute;
	right:30px;
	top:30px;
}
.mainVisual .text{
	position:absolute;
	left: 50%;
	top: 5%;
	width:30.53%;
	transform: translateX(-50%);
}
.mainVisual .text img{
}
.mainVisual .text .explain{
}
.mainVisual .text .explain{
	width: 70%;
	margin: 0 auto;
	margin-bottom: 5%;
	image-rendering: -webkit-optimize-contrast;
}
.mainVisual .title{
	width:100%;
	display:flex;
	justify-content: center;
}
.mainVisual .title .title_con{
	display:inline-block;
}
.mainVisual .title .title_con img{
	width:100%;
}
.mainVisual .kinds{
	width: 70%;
	max-width: 405px;
	margin: 0 auto;
	margin-top: 5%;
}

.mainContent .location{
    margin-top:2.5%;
}

.mainContent .premium{
    margin-top:2.5%;
    padding-top:2.5%;
    padding-bottom: 5%;
    background-color: #eeeeee;
}
.mainContent .premium .wrap{
    max-width: 1100px;
    margin: 0 auto;
}
.mainContent .premium .title{
    max-width: 449px;
    margin:0 auto;
    margin-bottom:2.5%;
}
.mainContent .premium .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mainContent .premium .content .con{
    flex: 1 1 23%;
    margin-bottom: 2.5%;
    max-width: 256px;
    opacity: 0;
}
.mainContent .premium .content.aos-animate .con01{
    animation: fadeIn 1s forwards;
}
.mainContent .premium .content.aos-animate .con02{
    animation: fadeInLeft 1s 0.5s forwards;
}
.mainContent .premium .content.aos-animate .con03{
    animation: fadeInLeft 1s 1s forwards;
}
.mainContent .premium .content.aos-animate .con04{
    animation: fadeInLeft 1s 1.5s forwards;
}
.mainContent .premium .content.aos-animate .con08{
    animation: fadeIn 1s forwards;
}
.mainContent .premium .content.aos-animate .con07{
    animation: fadeInRight 1s 0.5s forwards;
}
.mainContent .premium .content.aos-animate .con06{
    animation: fadeInRight 1s 1s forwards;
}
.mainContent .premium .content.aos-animate .con05{
    animation: fadeInRight 1s 1.5s forwards;
}
.mainContent .premium .content .con02{

}

.mainContent .contact{
    padding-top:7.5%;
    padding-bottom: 7.5%;
    background:url(../images/main_contact_bg.jpg) center center / cover no-repeat;
}
.mainContent .contact .wrap{
    max-width: 1100px;
    margin: 0 auto;
}
.mainContent .contact .content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.mainContent .contact .left{
    width:48%;
    flex: 0 1 550px;
}
.mainContent .contact .right{
    width:48%;
    flex: 0 1 531px;
}

/*loader*/
body{
	overflow-x:hidden;
}
.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%);
}
@media(max-width:1080px){
.loader{width:calc(100% - 30px);}
}

/*slick bar*/
.slider-progress{
	flex:1;
	height: 1px;
	position:relative;
}
.slider-progress:before{
	content:"";
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background-color:rgba(255, 255, 255, 0.3);
}
.slider-progress span{
	display: block;
	width: 0px;
	height: 100%;
	background: #fff;
	transition: all 0s linear;
	position:relative;
	z-index:1;
}
.slider-progress span.active{
	width: 100%;
}

/*pageinfo*/
.pagingInfo {
    color: #fff;
    font-size: 20px;
    font-weight: 100;
    text-align: center;
    margin: 0 30px;
}


/*mobile*/
.mobileMain{position:relative;padding-top:80px;overflow: hidden;max-width:850px;margin:0 auto;}
.mobileMain img{width:100%;}
.m_mainVisual{
	position: relative;
	height:100%;
	padding-top: 40%;
}
.m_mainVisual .slogan{
	background: url(../images/m_mainVisual_slogan_bg.jpg?v=v2) left center / cover no-repeat;
	padding: 2.5% 0 40%;
	width:100%;
	position: absolute;
	top: 0;
	height: 100%;
	z-index: 2;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.showtime .m_mainVisual .slogan{
	animation:m_mainVisual_slogan 2s 0.5s forwards;
}
@keyframes m_mainVisual_slogan{
	0%{
		height:100%;
	}
	100%{
		height:37%;
	}
}
.m_mainVisual .slogan .con{
	opacity:0;
    transition: 0.75s all;
}
.m_mainVisual .slogan .kinds{
	width:50%;
	margin-top:2.5%;
}
.showtime .m_mainVisual .slogan .con{
	animation:fadeIn 1s 2s forwards;
	width: 55%;
	margin-top: 11%;
}
.m_mainVisual .image{
}

.m_mainContent .location{
    margin-top:5%;
}

.m_mainContent .premium{
    padding:5% 0;
    margin-top:2.5%;
    background-color: #eeeeee;
}
.m_mainContent .premium .wrap{
    width:calc(100% - 15px);
    margin:0 auto;
}
.m_mainContent .premium .title{
	width: 36.823%;
    margin: 0 auto;
    margin-bottom: 5%;
}
.m_mainContent .premium .con{
    margin-bottom:2.5%;
}

.m_mainContent .contact{
    padding:7.5% 0;
    background:url(../images/m_main_contact_bg.jpg) center center / cover no-repeat;

}
.m_mainContent .contact .wrap{
    width:calc(100% - 15px);
    margin:0 auto;
}