/*@ sourceURL=css/main.css */
/* slick-slider css */
.slick-slider{position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-list{position:relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer; cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.slick-track{position:relative; top:0; left:0; display:block;}
.slick-track:before,.slick-track:after{display:table; content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none; float:left; height:100%; min-height:1px; -webkit-transform: translate3d(0,0,0);}
[dir='rtl'] .slick-slide{float:right;}
.slick-slide img{display: block; margin:0 auto;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}


#header{
	color: #fff
}
#header .logo a,
#header .logo a{
	background-image: url(/images/logo_w.png)
}
#header:hover .logo a,
#header.scroll .logo a{
	background-image: url(/images/logo.png)
}
#header .menu_bar span{
	background: #fff
}

/*** visual  ***/
#visual{
    position: relative
}
#visual .visu article{
    height: 100vh;
    position: relative;
    overflow: hidden;
    vertical-align: top;
    text-align: center
}
#visual .visu .bg{
    background-size: cover !important;
    height: 100vh;
}
#visual .visu .txt{
    position: absolute;
    top: 38%;
    width: 100%;
    z-index: 10;
    box-sizing: border-box;;
    color: #fff;
    word-break: break-all
}
#visual .visu .txt .tit{
    font-size: 70px;
    line-height: 1.4;
    font-weight: bolder
}
#visual .visu .txt .s_tit{
    font-size: 20px;
    line-height: 1.4;
	margin-top: 30px;
}
#visual .visu .txt button{
    background: none;
    color: #fff;
    border-color: #fff;
    margin-top: 80px
}

/* 메인이미지 변경가능 */
#visual .visu01 .bg{ background: url("../images/visual1.jpg") no-repeat center center;}
#visual .visu02 .bg{ background: url("../images/visual2.jpg") no-repeat center center;}

#visual .bg{
    transform: scale(1.05);
    transition: opacity 1.5s ease-out, transform 5000ms ease-in-out;
    position: relative
}
#visual .bg::after{
    position: absolute;
    display: block;
    content: '';
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.45)
}
#visual .bg.on {
    transform: scale(1);
}
.slick-dots{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%)
}
.slick-dots li{
    display: inline-block;
    margin: 0 5px
}
.slick-dots li button{
    font-size: 0;
    background: transparent;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    border: 0 none;
    border: 2px solid #fff;
    box-sizing: border-box;
    transition: all .3
}
.slick-dots li.slick-active button{
    background: #fff
}


/*** container ***/
#container>section{
    padding: 120px 0;
    position: relative
}
#container>section .tit{
    font-size: 60px;
    font-weight: lighter;
    line-height: 1.25;
    letter-spacing: -.25px
}
#container>section .tit.center_tit{
	text-align: center
}
#container>section .tit .text_bold{
	font-weight: 600;
}
#container>section .tit .color_blue{
	color: #030372
}
#container>section .tit_desc{
	text-align: center;
	margin-top: 30px;
	font-size: 22px;
	font-weight: lighter;
    line-height: 1.6;
}
/* coalition_list */
.coalition_list .logo_box {
	margin-top: 100px;
}


/* product_list */
.product_list .list{
    margin-top: 50px;
	overflow: hidden
}
.product_list .list .swiper-slide{
    width: 23.875%;
    margin-right: 1.5%;
    position: relative;
    overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 280px;
	border-radius: 20px;
}
.product_list .list .swiper-slide:last-child{
    margin-right: 0
}
.product_list .list .swiper-slide img{
    width: 100%;
    transition: all .75s ease;
}
.product_list .list .swiper-slide .s_title{
    position: absolute;
    left: 30px;
    top: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: bolder;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.75);
    transition: all .3s;
}
.product_list .list .swiper-slide .title{
    position: absolute;
    right: 30px;
    bottom: 0;
    font-size: 25px;
    color: #fff;
    font-weight: bolder;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.75);
    opacity: 0;
    transition: all .3s;
    z-index: 9
}
.product_list .list .swiper-slide a:hover .title{
    bottom: 30px;
    opacity: 1
}
.product_list .list .swiper-slide a:hover::after{
    opacity: 1
}
.product_list .list .swiper-slide a{
    display: block;
    width: 100%;
    height: 100%
}
.product_list .list .swiper-slide a::after{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s;
    opacity: 0
}
.product_list .list .swiper-slide a:hover .s_title{
    opacity: 0;
    top: 0
}
.product_list .list .swiper-slide a:hover img{
    transform: scale(1.1)
}

/* merit_list */
#container .merit_list{
    background: #f5f5f5;
    position: relative;
    padding-bottom: 60px
}
.merit_list .txt_box{
    margin-top: 50px;
    font-weight: 300;
    display: inline-block;
    position: relative;
    z-index: 9
}
.merit_list .txt_box .title{
    font-size: 30px;
    position: relative;
    z-index: 1
}
.merit_list .txt_box .title span{
    display: inline-block;
    margin-right: 10px;
    color: #030372;
    font-weight: 500
}
.merit_list .txt_box .desc{
    line-height: 1.6;
    margin-top: 15px;
    font-size: 17px;
    color: #999;
    position: relative;
    z-index: 1
}
.merit_list .txt_box>li{
    position: relative;
    transition: all 0.3s;
}
.merit_list .txt_box>li a{
    position: relative;
    padding: 40px 130px 39px 65px;
    margin-left: -65px;
    transition: all .3s;
    display: block;
    transition: all 0.3s;
}
.merit_list .txt_box>li a::after{
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 105%;
    height: 100%;
    background-color: #030372;
    border-radius: 20px;
    opacity: 0;
    transition: all 0.3s;
    box-shadow: 10px 15px 20px rgba(0, 0, 0,0.19);
}
.merit_list .txt_box>li.on a,
.merit_list .txt_box>li.on a .desc,
.merit_list .txt_box>li.on a .title span{
    color: #fff
}
.merit_list .txt_box>li.on a::after{
    opacity: 1
}
.merit_list .txt_box>li.on a{
    margin-left: -50px
}
.merit_list .right_img{
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    width: 50%;
    z-index: 1;
    display: block;
    overflow: hidden
}
.merit_list .right_img>li{
    display: none;
    display: block;
    position: relative;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
	background-size: cover
}
.merit_list .right_img>li:first-child{
    background-image: url(/images/merit_list1.jpg)
}
.merit_list .right_img>li:nth-child(2){
    background-image: url(/images/merit_list2.jpg)
}
.merit_list .right_img>li:nth-child(3){
    background-image: url(/images/merit_list3.jpg)
}
.merit_list .right_img>li:nth-child(4){
    background-image: url(/images/merit_list4.jpg)
}
.merit_list .right_img>li:nth-child(5){
    background-image: url(/images/merit_list5.jpg)
}

/* lease_list */
.lease_list .lease__benefits {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap: 16px;
	list-style:none;
	padding:0;
	margin-top: 50px
}
.lease_list .lease__benefits li {
	padding:35px 20px;
	text-align: center;
	font-weight: lighter;
	font-size: 18px
	}
.lease_list .lease__benefits .title {
	font-size: 40px;
	margin-bottom: 15px
}
.lease_list .lease__panels{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap: 50px;
	margin-top: 40px
}
.lease_list .lease__panels li{
	text-align: center;
	border-radius: 24px;
    box-shadow: 0px 2px 9.8px 0.2px rgb(0 0 0 / 8%);
	font-weight: lighter;
	font-size: 18px;
	overflow: hidden;
	border: 1px solid #ddd
}
.lease_list .lease__panels li .title{
	padding: 25px;
    border-bottom: 1px solid #ddd;
    font-weight: 600;
    font-size: 20px;
	background: #fff;
}
.lease_list .lease__panels li .desc{
	background: #f5f5f5;
	padding: 30px;
	line-height: 1.6
}

/* progress_list */
#container .progress_list{
	padding-bottom: 0
}
#container .progress_list button{
    position: absolute;
    right: 0;
    top :0;
}
.progress_list .area_box{
    margin-top: 80px;
	overflow: hidden
}
.progress_list .swiper-slide .images{
    background: #000;
    display: block;
    position: relative;
    padding-top: 75.5%;
}
.progress_list .swiper-slide .images:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: #030372;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s;
    z-index: -1
}
.progress_list .swiper-slide:hover .images:before {
    top: 10px;
    left: 10px;
}
.progress_list .swiper-slide .images img{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.progress_list .swiper-slide .txt{
    margin-top: 25px
}
.progress_list .swiper-slide .txt .title{
    font-size: 22px;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	line-height: 1.2
}
.progress_list .swiper-slide .txt .date{
    color: #999;
    margin-top: 15px;
	font-weight: 300
}
.progress_list .swiper-slide.no_div_01{
	display: block;
	width: 100%;
	color: #999;
	line-height: 250px;
	text-align: center
}
.progress_list .bottom{
	text-align: center;
	margin: 50px 0;
	position: relative
}
.progress_list .bottom>div{
	display: inline-block;
	vertical-align: middle;
}
.progress_list .swiper-pagination{
	max-width: 220px;
	position: relative;
	height: 1px;
	margin: 0 auto
}
.progress_list .swiper-pagination span{
	height: 4px;
    top: -1.5px;
}
:root {
    --swiper-theme-color: #030372
}
.progress_list .swiper-button-next,
.progress_list .swiper-button-prev{
	position: relative;
	display: inline-block;
	margin-left: 10px;
	height: auto
}
.progress_list .swiper-button-next:after,
.progress_list .swiper-button-prev:after{
	color: #444;
	font-size: 20px;
	margin-top: 0;
	height: auto
}
.progress_list .no-data{
	text-align: center;
	color: #999;
	line-height: 500px;
	width: 100% !important;
	margin: 0 !important
}

/* button_list */
.button_list .left .stit{
    margin-top: 25px;
    color: #999;
    font-weight: 300;
    font-size: 18px;
}
.button_list .left .button{
    margin-top: 100px
}
.button_list button.blue_btn{
    background: #030372 !important
}
.button_list .right{
    position: absolute;
    right: 0;
    top: 0;
    background: url(../images/contact_bg.jpg) no-repeat center bottom;
    width: 50%;
    height: 100%
}


/* process */
#container .process{
	padding-bottom: 0
}


@media (max-width: 1400px) {
    
    #visual .visu .txt .tit{
        font-size: 45px
    }
    #visual .visu .txt .s_tit{
        font-size: 16px
    }
    #visual .visu .txt button{
        margin-top: 40px
    }
    #container>section h2.tit{
        font-size: 40px;
    }
    .product_list .list{
        margin-top: 30px
    }
    #container .merit_list{
        padding-bottom: 0
    }
    .merit_list .txt_box {
        width: 100%;
    }
    .merit_list .right_img {
        width: 100%;
        height: 300px;
        position: relative;
        margin-top: 40px;
        
    }
    .merit_list .right_img > li {
        background-size: cover;
        background-position: center;
    }
    .merit_list .txt_box>li a::after{
        width: 100%
    }
    .progress_list .list{
        margin-top: 40px
    }
    .progress_list .list {
        width: 48%;
        margin-right: 4%;
    }
    .progress_list .list:nth-child(3n) {
        margin-right: 4%; 
    }
    .progress_list .list:nth-child(2n) {
        margin-right: 0;
    }
    #container .button_list{
        background: #f5f5f5;
        padding-bottom: 0 !important
    }
    .button_list .left .button{
        margin-top: 60px
    }
    .button_list .right{
        position:relative;
        width: 100%;
        height: 500px;
        margin-top: 40px;
        background-size: cover;
        background-position: center;
    }

}
@media (max-width: 1200px) {
	.coalition_list .logo_box{
		margin-top: 60px
	}

	.progress_list .bottom{
		margin-bottom: 20px;
		margin-top: 40px
	}
}
@media (max-width: 768px) {

    #container>section{
        padding: 60px 0
    }
    #visual .visu .txt .tit{
        font-size: 30px
    }
    #container>section h2.tit{
        font-size: 34px;
		text-align: center
    }
    .merit_list .txt_box{
        margin-top: 30px
    }
	#container>section .tit_desc{
		font-size: 18px
	}
    .merit_list .txt_box .title{
        font-size: 20px
    }
    .merit_list .txt_box .desc{
        font-size: 15px
    }
	
    .merit_list .txt_box>li a{
        padding-right: 40px;
        padding-left: 0;
        margin-left: 0
    }
    .merit_list .txt_box>li a::after{
        border-radius: 0 10px 10px 0
    }
    .progress_list .list {
        width: 100%;
        margin-right: 0;
    }
    .merit_list .txt_box>li.on a{
        margin-left: -20px;
        padding-left: 20px;
        padding-right: 20px
    }
    .progress_list button {
        position: relative; 
    }
    button.next_btn{
        display: block;
        width: 100%;
        margin-top: 20px;
        font-size: 14px;
        padding: 12px;
    }
	#container .progress_list button{
		position: relative
	}
	.coalition_list .logo_box{
		margin-top: 60px
	}
	.progress_list .area_box{
		margin-top: 40px
	}
    .button_list .left .stit{
		text-align: center;
	}

}


@media (max-width: 460px) {

	#container>section h2.tit{
        font-size: 26px;
		text-align: center
    }
	#container>section .tit_desc{
		font-size: 14px;
		text-align: center;
		letter-spacing: -1px;
	}
	.merit_list .txt_box .title{
		font-size: 18px
	}
	.merit_list .txt_box .desc,
	.button_list .left .stit{
		font-size: 14px;
		letter-spacing: -1px;
	}
}