@charset "utf-8";
body{ position:relative; box-sizing: border-box; padding: 0 30px; overflow-x: hidden;}
/* font-family:"Pretendard" */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


/*.width_con{position: relative;}*/

/*header*/
#hd{ width:100%; height: 90px; margin:0 auto;  position:fixed; top:30px; left:0; z-index:9999; }
#hd .hd-wrap{ width:100%; /*transition: all 0.3s ease-in-out;*/ }
#hd .hd-wrap .hd-logo{ position: absolute; top: 20px; left: 60px; /*transition: all 0.3s ease-in-out;*/}
#hd .hd-wrap .hd-logo .logo-img a{ display:block; }
#hd .hd-wrap .hd-logo .logo-img a img{ width: 130px; }

#hd .hd-wrap .res-icon{ display: none; position:absolute; top: 35px; right:95px; }
#hd .hd-wrap .res-icon a{ display:block; }
#hd .hd-wrap .res-icon a i{ color:#f08e65; font-size:25px; padding:0 10px; }
#hd .hd-wrap .res-icon a p{ display: none; text-align: center; font-size:10px; margin:0 auto; }
#hd .hd-wrap .res-icon a p{ display: block; text-align: center; font-size:10px; margin:0 auto; color:#f08e65; }

#hd .hd-wrap.scrollon{ width:100%; height: 90px; background-color:#fff; position: fixed; top: 0; left: 0; z-index: 9999;}
#hd .hd-wrap.scrollon .hd-logo{ width: 90px; height: 55px; position:absolute; top:20px; left:30px; }
#hd .hd-wrap.scrollon .hd-logo .logo-img a img{ filter: invert(0);z-index: 999;}
#hd .hd-wrap.scrollon input[id="hamburger"] + label{ top:40px; }
#hd .hd-wrap.scrollon .res-icon{ display:block; }

/*hamburger*/
input[id="hamburger"]{ display:none; }
input[id="hamburger"] + label{ display:block; width:40px; height:18px; position: absolute; top: 20px; right: 45px; cursor: pointer;}
input[id="hamburger"] + label span{ display:block; position:absolute; width:100%; height:2px; border:10px; transition:all 0.35s; background:#f08e65; }
.hd-wrap.on input[id="hamburger"] + label span { background:#000; }

input[id="hamburger"]:checked + label { z-index:9999; }
input[id="hamburger"]:checked + label span:nth-child(2){ top:57%; width:100%; }
input[id="hamburger"]:checked + label span:nth-child(3){ bottom:50%; width: 100%;}
input[id="hamburger"] + label span:nth-child(1){ top:1px; }
input[id="hamburger"] + label span:nth-child(2){ top:6px; width: 80%; right: 0;}
input[id="hamburger"] + label span:nth-child(3){ top:10.5px; width: 60%; right: 0;}
input[id="hamburger"] + label span:nth-child(4){ bottom:0px; width: 30%; right: 0;}


.hamburger_toggle1{ opacity:0; }
.hamburger_toggle2{ top:50%; transform:translateY(-50%) rotate(45deg); }
.hamburger_toggle3{ top:50%; transform:translateY(-50%) rotate(-45deg); }
.hamburger_toggle4{ opacity:0; }

/* hamlogo */
.hamlogo{position: absolute; top: 20px; left: 30px;}
.hamlogo a img{ width: 100px;}


/* hamresbtn */
.hamresbtn{position: absolute; top: 52px; right: 95px; z-index: 9999;}
.hamresbtn a{  display: flex; flex-direction: column; align-items: center; }
.hamresbtn a i{ font-size: 25px; color: #f08e65; padding: 0 10px 3px;}
.hamresbtn a p{ font-size: 10px; color: #f08e65; font-weight: 200; visibility: hidden;}
.hamresbtn a:hover p{ visibility: visible;}

/*hammenu*/
.hammenu{ visibility: hidden; display:flex; position:fixed; top:0; left:0; /*z-index:-1;*/ width:100%; height:100vh; padding: 40px 0; justify-content:center; align-items:center; background-color:#fff; transition:all 0.3s ease-in-out; }
.hammenu.on{ visibility: visible; }
.hammenu.on .scrollon{ background-color: #f3eee7 !important;}
.hammenu::after{ content:''; display:block; position:absolute; top: 50%; left:50%; transform:translate(-50%, -50%); width:1px; height:72vh; background-color: rgba(0, 0, 0, 0.2); }
.hammenu-in{ position:relative; width:1700px; margin:0 auto;  display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 0 60px;}
header.hammenu-on .hammenu{ top:80px; transition: 0.5s;z-index:1000; opacity:1; }

/* .hammenu .hamLogo{ visibility: hidden;}
.hammenu.on .hamLogo{ visibility: visible; position: absolute; top: 20px; left: 30px; z-index: 99999;} */

.hammenu .hammenu-in .nav{width: 50%; margin:0; }
.hammenu .hammenu-in .nav li{ display:flex; margin-bottom: 30px; align-items: center; }
.hammenu .hammenu-in .nav li:last-child{ margin-bottom:0px; }
.hammenu .hammenu-in .nav li a{ font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size:36px; color:#333; }
.hammenu .hammenu-in .nav .submenu{ margin-left:40px; display:flex; justify-content:space-between; }
.hammenu .hammenu-in .nav .submenu li{ line-height:40px; margin-right:15px; margin-bottom:0; }
.hammenu .hammenu-in .nav .submenu li a{ font-family: 'Noto Sans KR', sans-serif; font-size: 16px; font-weight: 300; color: #373737;}
.hammenu .hammenu-in .nav .submenu > li > a:hover{ color:#9a9a9a; }

.hammenu .hammenu-in .hammenu-info{ width:50%; margin:auto; }
.hammenu .hammenu-in .hammenu-info .clipimg{ width:600px; filter:drop-shadow(10px 10px 5px #ccc); margin: 0 auto; }
.hammenu .hammenu-in .hammenu-info .clipimg .hammenu-info-img{ width:100%; height:400px; clip-path: polygon(0% 0%, calc(100% - 120px) 0, 100% 84px, 100% 100%, 0% 100%); background:url(../img/main/image1.jpg) no-repeat; background-size:cover; background-position:center; }

.hammenu .hammenu-in .hammenu-info .hammenu-info-txt{ margin: 60px auto 0; }
.hammenu .hammenu-in .hammenu-info .hammenu-info-txt .hammenu-logo img{ display: block; width:150px; margin: 0 auto 30px;} 
/*.hammenu .hammenu-in .hammenu-info .hammenu-info-txt .hammenu-logo .logo-img{ width:100%; height:100%; background: url(../img/logo.png) no-repeat; background-size:cover; background-position:center; }*/
.hammenu .hammenu-in .hammenu-info .hammenu-info-txt ul li{ text-align:center; margin:10px auto; font-family: 'Noto Sans KR', sans-serif; font-size: 16px; font-weight:300; }
.hammenu .hammenu-in .hammenu-info .hammenu-info-txt ul li a{ font-family: 'Noto Sans KR', sans-serif; font-size:20px; font-weight:600; }

/*main-bn*/
#main-bn{ width:100%; clip-path: polygon(0% 0%, calc(100% - 134px) 0, 100% 90px, 100% 100%, 0% 100%); position: relative; top:30px; }
#main-bn .main-swiper{ width:100%; display:block; height:95vh;z-index: -1; }
#main-bn .main-swiper .swiper-slide.img1{ background:url(../img/main/image1.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img2{ background:url(../img/main/image2.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img3{ background:url(../img/main/image3.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img4{ background:url(../img/main/image4.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img5{ background:url(../img/main/image5.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img6{ background:url(../img/main/image6.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img7{ background:url(../img/main/image7.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img8{ background:url(../img/main/image8.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img9{ background:url(../img/main/image9.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img10{ background:url(../img/main/image10.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img11{ background:url(../img/main/image11.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img12{ background:url(../img/main/image12.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img13{ background:url(../img/main/image13.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img14{ background:url(../img/main/image14.jpg); background-size:cover; background-position:center; display:block; }
#main-bn .main-swiper .swiper-slide.img15{ background:url(../img/main/image15.jpg); background-size:cover; background-position:center; display:block; }
.swiper-button-next, .swiper-button-prev{ color: #fff !important;}

#main-bn .main-bn-txt{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index: 10;}
#main-bn .main-bn-txt::after{ content:''; display: block; height:2px; background-color:#f08e65; }
#main-bn .main-bn-txt p{ font-size:48px; text-align:center; font-family: 'Cormorant Garamond', serif; line-height: 1.25em; color:#fff; letter-spacing: 0.1em; padding: 0 40px 20px; text-shadow: 0 1px 3px rgba(0,0,0,.6);}

.scrollDown{ display: flex; align-items: center; justify-content: space-around; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); }
.scrollDown .scroll{ width: 50px; height: 50px; border: 2px solid #fff; border-radius: 50%; position: relative; animation: down 1.5s infinite;}
.scrollDown .scroll::before{ content: ''; position: absolute; top: 30%; left: 36%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);}
@keyframes down{
	0%{ transform: translate(0); }
	20%{ transform: translateY(15px); }
	40%{ transform: translate(0); }
}
@-webkit-keyframes down{
	0%{ transform: translate(0); }
	20%{ transform: translateY(15px 0); }
	40%{ transform: translate(0); }
}

/*footer*/
footer{ margin:30px 0; width: 100%; padding:60px 0 120px; background-color:#27343a;}
footer .flex_con{display:flex; flex-wrap: wrap; padding:0 200px;}
footer .flex_con::after{content:''; background-color:#f08e65; width: calc(100% - 320px); height: 1px; position:absolute; left: 50%; bottom: 80px; transform: translateX(-50%);}
footer .flex_con .flex_item .logo img{ width: 150px;  }
footer .flex_con .flex_item h4{color: #fff;}
footer .flex_con .flex_item h4 span{font-size: 10px; color: #999;}
footer .flex_con .flex_item h4 a span.red{font-size: 12px; color: #ff5a53;}
footer .flex_con .flex_item h4 a{font-size: 12px; color: #fff; transition: all .3s ease; font-weight: 400;}
footer .flex_con .flex_item h4 a:hover{ color: #ff5a53;}

footer .flex_con .flex_item.item1{width: 34%;}
footer .flex_con .flex_item.item1 a.logo{width: 80px; display:inline-block; margin-bottom: 24px;}
footer .flex_con .flex_item.item1 h4{ margin-bottom: 6px; font-size: 12px;}

footer .flex_con .flex_item.item2{width: 34%;}
footer .flex_con .flex_item.item2 h3{ margin-top: 22px; margin-bottom: 24px; font-family: 'Cormorant Garamond', serif; font-weight: 500; color: #FFF; font-size: 24px;}
footer .flex_con .flex_item.item2 h4{ margin-bottom: 6px; font-size: 12px;}
footer .flex_con .flex_item.item2 h4 img{ width:20px; margin-left:10px; }

footer .flex_con .flex_item.item3{width: 32%;}
footer .flex_con .flex_item.item3 h3{ margin-top: 22px; margin-bottom: 24px; font-family: 'Cormorant Garamond', serif; font-weight: 500; color: #FFF; font-size: 24px;}

footer .flex_con .flex_item .foot-btn{ display: flex; justify-content: space-between;}
footer .flex_con .flex_item.item3 a.btn{ display:inline-block; width: 50%; height: 50px; border: 1px solid #fff; box-sizing: border-box; text-align: center; line-height: 48px; color: #fff; letter-spacing: 2px; font-size: 12px; margin-right: 20px;}
footer .flex_con .flex_item.item3 a.btn:last-child{ margin:0;}
/* footer .flex_con .flex_item.item3 a.btn:nth-child(3){margin:0;} */

/*반응형*/
@media all and (max-width: 1440px){
	/*hammenu*/
	.hammenu .hammenu-in .nav{ width:46%; }
	.hammenu .hammenu-in .nav li a{ font-size:30px; }
	.hammenu .hammenu-in .nav .submenu li a{ font-size:14px; }

	/*footer*/
	footer .flex_con{ padding:0 80px;}
    footer .flex_con:after{ width: calc(100% - 100px); }
    footer .flex_con .flex_item h4{ font-size: 12px;}
    footer .flex_con .flex_item h4 span{font-size: 10px;}
    footer .flex_con .flex_item h4 a span.red{font-size: 12px;}
    /* footer .flex_con .flex_item.item3 a.btn{ width: 140px;font-size: 12px;} */
}
@media screen and (max-width: 1200px){
	.hammenu .hammenu-in .nav{ width:50%; margin: 50% 30px; padding-top: 120px;}
	.hammenu .hammenu-in .hammenu-info{ width:50%; margin: 50% auto;}
/*	.hammenu::after{ display:none; }*/
	.hammenu .hammenu-in .hammenu-info .clipimg .hammenu-info-img{ width:80%; height: 360px; margin: 0 auto; }
	.hammenu .hammenu-in .nav li{ flex-direction:column; align-items:flex-start; }
	.hammenu .hammenu-in .nav .submenu{ margin-left:0px; }

	/*main-bn*/
	#main-bn .main-bn-txt p{ font-size:36px; }
	

    footer .flex_con .flex_item.item1{width: 50%;}
    footer .flex_con .flex_item.item2{width: 50%;}
    footer .flex_con .flex_item.item3{width: 100%;}
}
@media screen and (max-width: 1024px){
	.hammenu .hammenu-in .hammenu-info{ display:none; }
	.hammenu::after{ display:none; }
	.hammenu .hammenu-in .nav{ width:100%; padding: 0;}
	.hammenu .hammenu-in .nav li{ align-items:center; }

    footer .flex_con .flex_item.item1{width: 100%;}
    footer .flex_con .flex_item.item2{width: 100%;}
    footer .flex_con .flex_item.item3{width: 100%;}
}
@media screen and (max-width: 786px){
	
	.hammenu.on .hamresbtn a p{ visibility: visible;}
	#hd .hd-wrap .res-icon{ right: 85px;}
	.hamresbtn{ top: 34px; right: 85px;}
	#hd .hd-wrap .hd-logo .logo-img a img{ width: 100px;}
	#hd .hd-wrap .res-icon a p{ visibility: visible;}
	.hammenu .hammenu-in .nav .submenu{ flex-direction: column;}
	.hammenu .hammenu-in .nav .submenu li{ margin-right:0px; }
	.hammenu .hammenu-in .nav .submenu li:last-child{ margin-right:0px; }
	.hammenu .hammenu-in .nav li:nth-child(3) .submenu li a{font-size:14px; }

	#main-bn .main-bn-txt p{ font-size:24px; text-shadow:5px 5px 5px #ccc; }
	.scrollDown{ display: none;}

	
    body{ padding: 0 24px;}
    input[id="hamburger"] + label{ top: 10px; right: 34px;}
    
    footer .flex_con{ padding:0 40px;}
    footer .flex_con:after{ width: calc(100% - 50px); }
}
@media all and (max-width: 480px){
	#hd .hd-wrap .hd-logo{ left: 40px;}
	#hd .hd-wrap .hd-logo .logo-img a img{width: 100px;}
	/* #hd .hd-wrap .hd-logo img{ width:120px; } */
	/* #hd .hd-wrap.scrollon .hd-logo img{ margin-top:14px; } */
	.hammenu .hammenu-in .nav .submenu{ flex-direction: column;}
	.hammenu .hammenu-in .nav .submenu li{ margin-right:0px; }
	#main-bn{ clip-path: polygon(0% 0%, calc(100% - 80px) 0, 100% 50px, 100% 100%, 0% 100%);}
	
    input[id="hamburger"] + label{ top: 0px; right: 24px;}

	
    
    footer .flex_con .flex_item.item3 a.btn{ font-size: 12px; margin-right:10px;}
	footer .flex_con:after{ width: calc(100% - 30px);}
    body{ padding: 0 20px;}
	
}