@charset "utf-8";


#mv_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; }
#mv_wrap #mv {position: relative;}
#mv_wrap .mv_list_wrap {margin-bottom: 0; background-image: url('/assets/images/main/mv1.jpg');}

#mv_wrap .mv_list_wrap .mv_list {position: relative; overflow: hidden; }

#mv_wrap .mv_list_wrap .mv_list .visual {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;transform: scale(1.15);}
#mv_wrap .mv_list_wrap .mv_list.swiper-slide-active .visual { animation:mvBgScale 3.5s forwards; }
#mv_wrap .mv_list_wrap .mv_list1 .visual {background-image: url('/assets/images/main/mv1.jpg');}
#mv_wrap .mv_list_wrap .mv_list2 .visual {background-image: url('/assets/images/main/mv2.jpg');}
#mv_wrap .mv_list_wrap .mv_list3 .visual {background-image: url('/assets/images/main/mv3.jpg');}
#mv_wrap .mv_list_wrap .mv_list4 .visual {background-image: url('/assets/images/main/mv4.jpg');}
#mv_wrap .mv_list_wrap .mv_list .txt_wrap {position:absolute;left:50%;top:47%;transform:translateY(-50%); margin-left: -700px; width: 1400px; padding: 0 15px;	 color: #fff;  letter-spacing: -1px; overflow: hidden;}
#mv_wrap .mv_list_wrap .mv_list.swiper-slide-active .txt_wrap > div { animation:mvTxt 1s 1s forwards; opacity: 0; transform:translateY(50px); }
#mv_wrap .mv_list_wrap .mv_list.swiper-slide-active .txt_wrap > div:nth-child(2) {animation-delay:1.5s;}
#mv_wrap .slick-slide img { display: inline-block;}

#mv_wrap .slider_navi {position: absolute; bottom: 30%; left: 50%; margin-left: -700px; z-index: 1; display: flex; align-items:center;}
#mv_wrap .slider_navi .swiper-pagination {display: flex; justify-content:center; align-items:center; position: static; }
#mv_wrap .slider_navi .swiper-pagination-bullet {width: 42px; height: 42px; margin-right: 15px; background-color: transparent; position: relative; opacity: 1; }
#mv_wrap .slider_navi .swiper-pagination-bullet button {background-color: transparent; border: none;}
/* button style */
#mv_wrap .slider_navi .circle_btn { position: relative; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px;  background-color: transparent; border-radius: 50%; cursor: pointer;  transition: 0.3s; }
#mv_wrap .slider_navi .circle_btn span {  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: -9999px; width: 8px; height: 8px; border-radius:50%; background-color: #fff;}


/* button circle */
#mv_wrap .slider_navi .progress { transform: rotate(-90deg); }
#mv_wrap .slider_navi .circle-border { fill: transparent; stroke: rgba(255,255,255,.6); stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 125.664px; stroke-dashoffset: 125.664px; }
#mv_wrap .slider_navi .circle-origin { fill: transparent; stroke: transparent; stroke-width: 2px; stroke-linecap: round; stroke-dasharray: 125.664px; stroke-dashoffset: 125.664px; }

#mv_wrap .slider_navi .swiper-pagination-bullet-active {opacity: 1;}
#mv_wrap .slider_navi .swiper-pagination-bullet-active span {background-color: transparent;}
#mv_wrap .slider_navi .swiper-pagination-bullet-active .circle-origin { stroke:#fff; animation: mv_progress 9s; }

#mv_wrap .slider_navi .swiper-pagination-bullet .btn.off{display: none}
#mv_wrap .slider_navi .swiper-pagination-bullet .btn {display: flex;position: absolute;left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; z-index: 3; margin: -1px 0 0 -1px;}
#mv_wrap .slider_navi .swiper-pagination-bullet .btn span {display: block; width: 3px; height: 13px; border-radius: 50px; background-color: #fff}
#mv_wrap .slider_navi .swiper-pagination-bullet .btn span + span {margin-left: 5px}
#mv_wrap .slider_navi .swiper-pagination-bullet .btn svg {fill: #fff; height: 12px;}

#mv_wrap .slider_navi .swiper-pagination-bullet-active .btn {opacity: 1}

#mv_wrap .slider_navi .swiper-counter {width: 60px; text-align: right; font-family: 'Cormorant Garamond', serif;; color: #fff; font-size: 22px; font-weight: normal;  transform:translateY(-5px); }
#mv_wrap .slider_navi .swiper-counter .count {font-size: 2.2rem;}
.scroll_icon {position: absolute; bottom: 15px; left: 50%; margin-left: -22.5px; cursor: pointer; animation:move_scroll 2s infinite; z-index: 2;}





#main_content {padding-top: 100vh;}

.m1 {max-width:1800px; width: 90%; margin: 0 auto; padding: 100px 0 160px; /* margin-bottom: 160px; */ background-color: #e9e6d8; border-radius:15px; position: relative; top: -50px; z-index: 1;}
.m1 .inner {width: 100%; max-width:1400px; margin: 0 auto;display: flex;}
.m1 .lt {width: 50%; display: flex; justify-content:space-between; flex-direction:column; padding-right: 20px;}
.m1 .txt_under {position: relative; display: inline-block;;}
.m1 .txt_under:after {content:''; display: block; width: calc(100% + 10px); height: 28px; background-color: #f7eebc; position: absolute; bottom: 0; left: -5px; z-index: -1;}
.m1 .rt {width: 50%; height: 625px;  border-radius:15px;   display: flex; align-items:center; justify-content:center; background: url('../images/main/m1_rt_bg.png') 50% 50% no-repeat; background-size:cover;}
.m1 .rt a {display: inline-block; width: 140px; height: 50px; line-height: 50px; text-align: center; background-color: #e9e6d8; border-radius:50px; color: #321c4a; transition: .45s;}
.m1 .rt a img {display: inline-block; margin-right: 7px;}
.m1 .rt a:hover {/* transform:scale(1.1); */}
.m1 .rt a:hover span {display: inline-block; animation:play_a 0.5s forwards linear;}

.m2 {background: url('../images/main/m2_bg.jpg') 50% 50% no-repeat;background-size:cover; background-attachment: fixed}
.m2 .inner {height: 645px; display: flex; align-items:center; flex-direction:column;justify-content:center;}

.m3 {display: flex;background-color: #e2d8e9;}
.m3 > div {width: 50%;}
.m3 .txt_box {display: flex; height: 100vh; justify-content:flex-end; align-items:center;}
.m3 .txt_con {width: 700px; padding-right: 20px;}
.m3 .txt_con h3 {margin-bottom: 115px;}
.m3 .list_box {background-color: #e9e6d8;}
.m3 .list_box .list {height: 100vh;}
.m3 .list_box .txt_con {display: flex;padding: 80px 70px;}
.m3 .list_box .txt_con .tit {width: 360px;}
.m3 .list_box .txt_con .txt {width: calc(100% - 360px);}
.m3 .list_box .txt_con a {display: inline-block; width: 260px; height: 55px; line-height: 55px;margin: 30px 0 0 0; background-color: #321c4a; padding: 0 20px; border-radius:60px; font-weight: 600; color: #e9e6d8; position: relative; transition:.25s;}
.m3 .list_box .txt_con a:after {content:'+'; display: block; position: absolute; top: -2px; right: 20px; font-family: 'Noto Sans KR'; font-weight: 300; font-size: 1.5rem; }
.m3 .list_box .txt_con a:hover {background-color: #222;  color: #fff;}

.m4 {padding: 160px 0; background-color: #fff;}
.accordion_wrap {margin: 0 auto;display: flex; align-items:stretch;justify-content:center;  background-color: #000;}
.accordion_wrap .accordion_box { position: relative; width: 25%; height: 790px; display: flex; align-items:center; justify-content:center; transition:all .3s ease 0s; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size:cover;}
.accordion_wrap .accordion_box:after {content:''; display: block; width: 100%; height: 100%; transition:all .3s ease 0s; background-color: #000; opacity: .5; position: absolute; top: 0; left: 0;}
.accordion_wrap .accordion_box .txt_wrap {position: absolute; left: 20px; bottom: 35px; width: calc(100% - 40px); z-index: 2; padding: 20px;  transition:.4s;}
.accordion_wrap .accordion_box .txt_wrap .tit {color: #f7eebc;transition:.4s;}
.accordion_wrap .accordion_box .txt_wrap .txt {height: 100px;margin-top: 20px; color: #fff; opacity: 0; font-weight: 600; transition:.4s;}
.accordion_wrap .accordion_box:hover {width: 60%;}
.accordion_wrap .accordion_box:hover .hover_box {opacity: 1;}
.accordion_wrap .accordion_box:hover .default_box {opacity: 0;}
.accordion_wrap .accordion_box:hover:after {opacity: 0;}
.accordion_wrap .accordion_box:hover .txt_wrap {transform:translateY(-120px); /* background-color: rgba(0,0,0,.05); */}
.accordion_wrap .accordion_box:hover .txt_wrap .txt {opacity: .65;}


@media all and (max-width:1800px){
	.m3 .list_box .txt_con {padding: 70px 40px;}
	.m3 .list_box .txt_con .tit {width: 320px;}
	.m3 .list_box .txt_con .txt {width: calc(100% - 320px);}
}
@media all and (max-width:1430px){
	#mv_wrap .mv_list_wrap .mv_list .txt_wrap {left: 15px; margin-left: 0; width: calc(100% - 30px);}
	#mv_wrap .slider_navi {left: 15px; margin-left: 0;}

	.m1 .inner {padding: 0 15px;}
	.m3 .txt_con {width: 100%; padding: 0 15px;}
}
@media all and (max-width:1230px){
	.m1 .rt {height: 550px;}

	.m3 {flex-direction:column;}
	.m3 > div {width: 100%;}
	.m3 .txt_box {height: auto; padding:80px 40px;}
	.m3 .txt_con {width: 100%; padding: 0;}
	.m3 .txt_con h3 {margin-bottom: 60px;}
	.m3 .list_box .list {height: auto;}

	.accordion_wrap .accordion_box {height: 600px;}
	.accordion_wrap .accordion_box .txt_wrap {bottom: 0;}

@media all and (max-width:820px){


	.m1 {padding: 100px 0;}
	.m1 .inner {flex-direction:column;}
	.m1 .lt {width: 100%; padding: 0 0 40px;}
	.m1 .lt .txt_top {margin-bottom: 40px;}
	.m1 .rt {width: 100%; height: 500px;}

	.m2 .inner {height: 500px;}

	.m3 .txt_box {padding: 80px 15px;}
	.m3 .list_box .txt_con {padding: 40px 15px;}
	.m3 .list_box .txt_con .tit {width: 250px;}
	.m3 .list_box .txt_con .txt {width: calc(100% - 250px);}
	.m3 .list_box .txt_con a {width: 200px;}

	.m4 {padding: 80px 0;}
	.accordion_wrap .accordion_box {height: 450px;}
}

@media all and (max-width:520px){
	

	#mv_wrap .mv_list_wrap .mv_list .txt_wrap .tit {font-size: 21px; line-height: 1.5;}
	#mv_wrap .slider_navi .swiper-pagination-bullet {width: 32px; height: 32px; margin-right: 5px;}
	#mv_wrap .slider_navi .circle_btn,
	#mv_wrap .slider_navi .progress {width: 30px; height: 30px;}
	#mv_wrap .slider_navi .circle_btn span {width: 5px; height: 5px;}
	#mv_wrap .slider_navi .swiper-pagination-bullet-active .circle-origin {r: 14px; cx:15px; cy:15px;}
	#mv_wrap .slider_navi .swiper-pagination-bullet .btn span {width: 2px; height: 10px;}
	#mv_wrap .slider_navi .swiper-counter {font-size: 18px;}
	#mv_wrap .slider_navi .swiper-counter .count {font-size: 1.7em;}

	.m1 .rt {height: 350px;}

	.m2 .inner {height: 350px;}
	.m2 p img {width: 200px;}

	.m3 .list_box .txt_con {flex-direction:column;}
	.m3 .list_box .txt_con .tit {width: 100%; margin-bottom: 20px;}
	.m3 .list_box .txt_con .txt {width: 100%;}
	.m3 .list_box .txt_con a {height: 40px; line-height: 40px;}

	.accordion_wrap {flex-wrap:wrap;}
	.accordion_wrap .accordion_box {width: 100%; height: 250px; position: relative;}
	.accordion_wrap .accordion_box:before {content:''; display: block;width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); position: absolute; top: 0; left: 0;}
	.accordion_wrap .accordion_box:hover {width: 100%;}
	.accordion_wrap .accordion_box:after {display: none;}
	.accordion_wrap .accordion_box .txt_wrap,
	.accordion_wrap .accordion_box:hover .txt_wrap {bottom: 20px;transform:translateY(0);/* background-color:rgba(0,0,0,.2); */}
	.accordion_wrap .accordion_box .txt_wrap .txt,
	.accordion_wrap .accordion_box:hover .txt_wrap .txt {opacity: .8;}
}