@charset "utf-8";
@import url('reset.css');

@font-face {
    font-family: 'Handletter';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_05@1.0/Handletter.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

#wrap {overflow:hidden; position:relative; width:100%;}

* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

/* -------------------------- enter */
.intro_wrap {overflow:hidden; position:relative; padding:150px 0 90px; height:100vh; background:#f5f5f5;}

.intro_wrap h3 {margin-bottom:80px; width:100%; font-family:'Handletter'; line-height:1; font-size:80px; font-weight:normal; color:#333; text-align:center;}

.intro_wrap .inner {display:flex; /* flex-wrap:wrap; justify-content:space-between; */ max-width:1440px; width:90%; margin:0 auto;}
.intro_wrap .item {overflow:hidden; position:relative; max-width:700px; width:100%;}
.intro_wrap .item + .item {margin-left:40px;}
.intro_wrap .item .imgthumb {overflow:hidden; position:relative; width:100%; height:360px; border-radius:6px; background:#ddd;}
.intro_wrap .item .img {position:absolute; background-repeat:no-repeat; background-size:cover; background-position:center; left:0; top:0; left:0; width:100%; height:100%; object-fit:cover;
transition:.5s; filter: grayscale(90); opacity:.9;}
.intro_wrap .item .tit {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);  font-family:'Handletter'; line-height:1; font-size:80px; font-weight:normal; color:#000; width:100%; text-align:center;}
.intro_wrap .item .imgthumb img {width:100%;}
.intro_wrap .item:hover .img {transform: scale(1.1); filter: grayscale(0); opacity:1;}
.intro_wrap .item .cont {padding:20px 5px; font-family:'Pretendard-Regular'; letter-spacing:0em;}
.intro_wrap .item .cont h4 {font-size:24px; line-height:1.5; color:#222; font-weight:600;}
.intro_wrap .item .cont .info {margin-top:1px; font-size:14px; color:#888; line-height:1.5;  word-break:keep-all;}
.intro_wrap .item .cont .info span {display:inline-block; padding:0 3px; color:#ccc;}
.intro_wrap .item .cont .enter {margin-top:10px; font-size: 14px; display:flex; align-items:center; line-height:1;}
.intro_wrap .item .cont .enter i {margin-right:4px; font-size:16px; color:#222;}
.intro_wrap .item a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:10;}

.br_pc {display:block;}
.br_mobile {display:none;}



/* -------------------------- intro_visual */
.intro .visual_wrap {overflow:hidden; position:relative; width:100%; z-index:1;}
.intro .intro_visual {position:relative; z-index:2;}

/* 메인 비주얼 :: 이미지 */
.intro_visual .item {position:relative;}
.intro_visual .item .img {width:100%; height:750px;/* height:100vh; */ background-size:cover;}

.intro_visual .item .img.pc_ver {display:block;}
.intro_visual .item .img.m_ver {display:none;}

/* 메인 비주얼 :: 버튼 */
.intro .visual_wrap .slick-dots {position:absolute; left:50%; bottom:30px; transform:translateX(-50%); text-align:center; z-index:9999; font-size:0;}
.intro .visual_wrap .slick-dots li {display:inline-block; margin:0 3px;}
.intro .visual_wrap .slick-dots li button {cursor:pointer; margin:0px; padding:0; background:none; font-size:0; width:30px; height:3px; background-color:#fff; }
.intro .visual_wrap .slick-dots li.slick-active button {background-color:#f47e3a;}

/* 메인 비주얼 :: 화살표 */
.intro .visual_wrap .slick-arrow {position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; cursor:pointer;
 background-repeat:no-repeat; background-position:50% 50%; background-size:14px; font-size:0; border:1px solid rgba(255,255,255,0.4); z-index:9999; }
.intro .visual_wrap .slick-arrow.slick-prev {left:3%; background-image:url("../images/main/btn_main_banner_prev.png");}
.intro .visual_wrap .slick-arrow.slick-next {right:3%; background-image:url("../images/main/btn_main_banner_next.png");}




/* 팝업레이어 */
#hd_pop {z-index:99999; position:relative; margin:0 auto; width:100%; height:0}
#hd_pop h2 {position:absolute; font-size:0; line-height:0; overflow:hidden}
.hd_pops {position:absolute; border:0px solid #e5e5e5; }
.hd_pops_con {}
.hd_pops_con img {}
.hd_pops_footer {padding:5px 0; background:#000; color:#fff; text-align:right;}
.hd_pops_footer button {margin-right:5px; padding:2px 10px; border:0; background:#393939; color:#fff;}




@media (max-width:829px) {




	/* -------------------------- enter */
	.intro_wrap {padding:50px 0; height:100%;}
	.intro_wrap h3 {margin-bottom:40px; font-size:60px;}
	.intro_wrap .inner {flex-wrap:wrap; max-width:700px;}
	.intro_wrap .item + .item {margin-left:0; margin-top:30px;}


	/* -------------------------- intro_visual */
	.intro_visual .item .img {height:480px;}
	.intro_wrap .item .tit {font-size:70px;}

	/* 메인 비주얼 :: 버튼 */
	.intro .visual_wrap .slick-dots {bottom:25px;}
	.intro .visual_wrap .slick-dots li {margin:0 3px;}
	.intro .visual_wrap .slick-dots li button {width:25px; height:2px;}


	/* 팝업레이어 */
	.hd_pops {width:auto; max-width:450px; left:8% !important; top:100px !important;}
	.hd_pops_con {width:auto !important; height:auto !important;}
	.hd_pops_con img {width:100% !important; height:auto !important;}


}


@media (max-width:680px){ /* mobile */

	/* -------------------------- enter */
	.intro_wrap {padding:50px 0 40px;}
	.intro_wrap h3 {margin-bottom:40px; font-size:46px;}
	

	
	/* -------------------------- intro_visual */
	
	.intro_visual .item .img {height:450px;}
	

	.intro_visual .item .img.pc_ver {display:none;}
	.intro_visual .item .img.m_ver {display:block;}


	.br_pc {display:none;}

	

}

@media (max-width:590px){ /* mobile */

	
	/* 팝업레이어 */	
	.hd_pops {width:auto; max-width:84%; left:8% !important;}



}


@media (max-width:430px){ /* mobile 세로 */

	/* -------------------------- enter */
	.intro_wrap h3 {font-size:42px;}
	.intro_wrap .item + .item {margin-top:20px;}
	.intro_wrap .item .tit {font-size:50px;}
	.intro_wrap .item .cont {padding:15px 5px;}
	.intro_wrap .item .cont h4 {font-size:20px;} 
	/* .intro_wrap .item .cont .info span {display:none;}
 */
	.br_mobile {display:block;}



	/* -------------------------- intro_visual */
	.intro_visual .item .img {height:430px;}



}


@media (max-width:380px){ /* mobile 세로 */

	/* -------------------------- enter */
	.intro_wrap h3 {font-size:40px;}

	/* -------------------------- intro_visual */

	.intro_visual .item .img {height:420px;}

}