@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

.clear:after { 
    content:""; 
    display:block; 
    clear:both;
}
* { margin:0; padding:0; outline:none; box-sizing:border-box; }
html { font-size: 10px; }
body {
line-height:1; font-size:14px; font-weight:400; color:#000; font-family: 'Noto Sans KR', sans-serif; word-wrap: break-word; word-break: keep-all;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif; line-height:1; font-size: 1em; }
ul, ol { list-style:none; margin:0; padding: 0; }
a { outline:0; text-decoration:none; color: #000; }
a:focus { outline:none; }
figure,dl,dd,input[type=radio], input[type=checkbox]  { margin: 0; padding: 0; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }
button, input, submit { border: none; background: none; }
dt { font-weight: normal; }

/*chrome input 에 자동 채워지는 배경 색상 글자 색상 변경하기*/
input 
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
	 transition: background-color 5000s ease-in-out 0s;
	 -webkit-transition: background-color 9999s ease-out;
	  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
   }



/* 탭 초기화 */
.tabBox1 .nav { border: none; }
.tabBox1 .nav > li { margin: 0; }
.tabBox1 .nav > li > a { padding: 0; margin: 0; border-radius:0; border: 0; }
.tabBox1 .nav > li:hover > a { background: none; }
.tabBox1 .nav > li.active > a { border: none;  }


/* html 폰트 사이즈 */
/* 1024이상 - 낮은 해상도의 pc, 태블릿 가로 */
@media (max-width:1400px) {
	html { font-size: 9px; }
}
@media (max-width:1023px) { /* 태블릿 가로 */
	html { font-size: 8.5px; }
}
@media (max-width:767px) { /* 태블릿, 모바일 가로 */
	html { font-size: 7.5px; }
}
@media (max-width:480px) { /* 모바일 */
	html { font-size: 6.5px; }
}

:root {
	/* 컨텐츠 너비 */
	--containerV1-width : 1400px;

	--main-color : #ef848a; /* mainColor */

	/*font (40px 미만은 min 400부터, 이상은 min 없이 rem이었다가 해당 구간에서 vw로 600부터)*/
	--font-size15 : min(3.75vw,15px); 
	--font-size16 : min(4vw,16px); 
	--font-size18 : min(4.50vw,18px); 
	--font-size20 : min(5vw,20px); 
	--font-size23 : min(5.75vw, 23px); 
	--font-size25 : min(6.25vw, 25px); 
	--font-size30 : min(7.50vw, 30px); 
	--font-size45 : 5.63vw; 
	--font-size50 : 6.17vw; 
	
}

/* container */
.containerV1 { width: 100%; margin: 0 auto; max-width: var(--containerV1-width,1400px); }

@media (max-width:1430px) {
	.containerV1 { padding: 0 15px; }
}

/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
header {position: sticky; left: 0; top: 0; width: 100%; z-index: 9999; background: #fff; transition: top 0.3s ease;}

#head_wrap {position: relative; width: 100%; justify-content: center;}

#head_wrap > .containerV1 {display: flex; justify-content: center; position: sticky;}


#head_wrap .logo {margin: 48px 0 33px 0;}

#head_wrap .menu_box { width: 100%; background: #fff; position: relative; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1);}
#head_wrap .menu_box > .containerV1 {display: flex; justify-content: center; position: relative; font-size: 0.52vw;}


/*헤드위젯-------------------------------------------*/
header .head_widget {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 330px; height: 150px;}

header .head_widget .swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom, .swiper-pagination-fraction {left: -150px !important;}


header .head_widget  .swiper-pagination-bullet-active {background: #333;}
header .head_widget .swiper-pagination-bullet {width: 10px; height: 10px;}

@media (max-width: 1500px) {
	header .head_widget .swiper-horizontal>.swiper-pagination-bullets,
	.swiper-pagination-bullets.swiper-pagination-horizontal,
	.swiper-pagination-custom, .swiper-pagination-fraction {left: -100px !important;}
}

/*헤드위젯  끝-------------------------------------------*/


/*top_menuBox*/
.top_menuBox {font-size: max(10px, 0.52vw); border-bottom: 1px solid #e2e2e2;}
.top_menuBox > .containerV1 {display: flex; justify-content: space-between; align-items: center; height: 50px;}
.top_menuBox .login_itemBox {display: flex; gap: 0 3.5em; }
.top_menuBox .login_itemBox a {font-size: 15px; color: #333; }
.top_menuBox .login_itemBox a:hover {text-decoration: underline;}
.top_menuBox .pc_sns_box {display: flex; gap: 0 10px;}
.top_menuBox .pc_sns_box span {display: flex; align-items: center;}

/*검색창*/
.top_menuBox .pc_sns_box .input_span {  width: 25rem; border-radius: 15px; margin-left: 10px;}

.top_menuBox .pc_sns_box .input_span .input-group {border: 1px solid #e2e2e2; border-radius: 15px; overflow: hidden; display: flex; align-items: center;
padding: 0 10px;} 

.top_menuBox .pc_sns_box .input_span input {width: 100%; display: block; font-size: 1.3rem; border-style: none; background: transparent; padding: 0; box-shadow: unset; color: #ccc;}
.top_menuBox .pc_sns_box .input_span input::placeholder {font-size: 12px; color: #e2e2e2;}
.top_menuBox .pc_sns_box .input_span .input-group-append button {border-style: none; background: none; padding: 0;}
.top_menuBox .pc_sns_box .input_span .input-group-append button:hover {background: none;}
.top_menuBox .pc_sns_box .input_span i {color: var(--main-color); font-size: 2rem;}



/*main_menu------------------------------------------------------------------------------*/
#h_menu .main_menu {display: flex; }
#h_menu .main_menu > li {position: relative;}
#h_menu .main_menu > li:not(:last-child) { margin-right: max(40px, 16.4em);}
#h_menu .main_menu > li > a {color: #333; display: block; padding: 15px 0; font-size: max(16px, 1.8em); position: relative; font-weight: bold; transition: all 0.3s;}




/*sub_menu------------------------------------------------------------------------------*/
#h_menu .main_menu > li > .sub_menu {
	width: 150px; position: absolute; top: 100%; left: 10px; background: #fff; padding: 15px 10px 0px 10px; border-radius: 0 10px 10px 10px;
	box-shadow: 2px 4px 10px #555; opacity: 0; visibility: hidden; transition: all 0.2s; z-index: 1;
}

#h_menu .main_menu > li > .sub_menu > li {margin-bottom: 15px;}
#h_menu .main_menu > li > .sub_menu > li > a {font-size: 15px; transition: all 0.3s; position: relative; left: 0; color: #333;}


.menu_box > .containerV1 .mob_sns_box {display: none;}

.head_btn {display: none;}


/*모바일용 로그인박스*/
.menu_box > .containerV1 .mob_login_box {display: none;}

/*hover*/
#h_menu .main_menu > li:hover > a  {color: #ef848a;}
#h_menu .main_menu > li:hover > .sub_menu {opacity: 1; visibility: visible; top: 110%; z-index: 2;}
#h_menu .main_menu > li > .sub_menu > li:hover > a { left: 5px;}



/* 스크롤 했을때 메뉴 효과 */
header.scroll  {top: -233px;}
/*header.scroll #head_wrap .menu_box .scroll_logo {display: block;}*/
/*header.scroll:hover {top: 0;}*/

/* 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
#h_menu .main_menu > li > a.on {color: #ef848a;} 




@media(max-width: 1430px) {
	.menu_box > .containerV1 .sns_box {right: 15px;}
}



/*모바일--------------------------------------------------------------------------------------------*/


@media(max-width: 991px) {
	#head_wrap > .containerV1 {justify-content: space-between; align-items: center;}
	#head_wrap > .containerV1 .logo {margin: 7px 0;}
	#head_wrap > .containerV1 .logo img {width: max(70px, 10rem);}
	


/*	서브메뉴 버튼*/
	.head_btn {display: block; position: relative; width: 40px; height: 40px;}
	.head_btn > * {position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 35px; text-align: center; z-index: 1; cursor: pointer;}
	.head_btn .close_btn {display: none;}

	.close_btn.hidden {display: none;}
	.close_btn.inactive {display: block;}
	.open_btn.hidden {display: none;}
	.open_btn.inactive {display: block;}


	
	#head_wrap .menu_box {height: 0px; transition: all 0.5s ease-in-out; overflow: hidden; background: #fff; border-top: 1px solid #eee; position: absolute; z-index: 999;
	}
	#head_wrap .menu_box > .containerV1 {justify-content: unset; height: 100%; flex-direction: column; overflow-x: hidden; overflow-y: auto; position: absolute; top: 0;}


/*main_menu-------------------------------------------------------------------------------------*/
	#h_menu {width: 100%;}
	#h_menu .main_menu {flex-direction: column; width: 100%;}
	#h_menu .main_menu > li:not(:last-child) {margin-right: 0;}
	#h_menu .main_menu > li {border-top: 1px solid #eee; width: 100%; padding-left: 7px;}
	#h_menu .main_menu > li > a {color: #555; font-weight: bold; width: fit-content; font-size: max(20px, 5em); padding: 20px 0 14px 0; }  


/*sub_menu-------------------------------------------------------------------------------------*/
	#h_menu .main_menu > li > .sub_menu {
	display: flex; position: relative; opacity: 1; visibility: visible; left: 0;
	box-shadow: none; width: 100%; border-radius: 0; padding: 10px 0 20px 0; gap: 0 15px; flex-wrap: wrap;
	}

	#h_menu .main_menu > li > .sub_menu > li > a {font-size: max(14px, 3.5em);}


/*헤드위젯*/
	.head_widget {display: none;}


/*sns_상자------------------------------------------------------------------------------*/
/*	top*/
	.top_menuBox > .containerV1 {height: max(40px, 5rem);}
	.top_menuBox .login_itemBox {gap: 0 7px;}
	.top_menuBox .login_itemBox a {font-size: 12px;}
	.top_menuBox .login_itemBox .login_item:not(:first-child) {display: none;}
	.top_menuBox .pc_sns_box span {display: none;}
	.top_menuBox .pc_sns_box .input_span {display: flex; width: 100%;}

/*	menubox 안*/
	.menu_box > .containerV1 .mob_login_box {display: flex; justify-content: end; align-items: center; padding: 10px 0;}
	.menu_box > .containerV1 .mob_login_box .login_itemBox {display: none; gap: 0 7px;}/*필요한가 싶어 가려둠 나와야 한다면 다시 나타냄*/
	.menu_box > .containerV1 .mob_login_box .login_itemBox a{font-size: 15px; color: #333;}
	.menu_box > .containerV1 .mob_sns_box {display: flex; gap: 0 max(7px, 3em);}
	



/*	hover*/
#h_menu .main_menu > li:hover > a {color: #555;}
#h_menu .main_menu > li:hover > .sub_menu {top: 100%; z-index: 1;}
#h_menu .main_menu > li > .sub_menu > li:hover > a { left: 0;}


/*	버튼 클릭시*/
	#head_wrap .menu_box.inactive {height: 100vh;}
	


	/* 스크롤 했을때 메뉴 효과 삭제 */
	header.scroll {top: 0; }

	/* 페이지 및 게시판 이동하면 해당 메뉴 스타일 */
	#h_menu .main_menu > li > a.on  {color: #ef848a;} 

}

@media all and (max-height: 705px) {
	#head_wrap .menu_box > .containerV1 {height: 90%;}
}



/*--------------------------------------------------- 해드세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/


.main {font-size: 0.52vw;}
.sec_frame {width: 100%;}
.sec_frame .containerV1 > .titleBox {margin-bottom: 45px; text-align: center; display: flex; flex-direction: column; align-items: center;}
.sec_frame .containerV1 > .titleBox > h1 {font-size: var(--font-size30); font-weight: bold; color: #333; line-height: 1.3; margin: 10px 0 5px 0;}
.sec_frame .containerV1 > .titleBox > p.text1 {font-size: var(--font-size16); font-weight: 300; color: #333; line-height: 1.4; margin-bottom: 20px;}
.sec_frame .containerV1 > .titleBox > .color-tag {color: var(--main-color); line-height: 1.4; position: relative; padding: 0 22px; font-size: var(--font-size16); width: fit-content; line-height: 1.3;} 
.sec_frame .containerV1 > .titleBox > .color-tag::before,
.sec_frame .containerV1 > .titleBox > .color-tag::after {content:"*"; position: absolute; top: 60%; transform: translateY(-50%); font-size: var(--font-size30); }
.sec_frame .containerV1 > .titleBox > .color-tag::before {left: 0;}
.sec_frame .containerV1 > .titleBox > .color-tag::after {right: 0;}


/*버튼 공통*/
.sec_frame .item_btn {margin: 60px auto 0; background: var(--main-color); width: 100%; max-width: 250px; height: 50px; 
clip-path: polygon(90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%, 10% 0); transition: all 0.3s; position: relative; bottom: 0;}
.sec_frame .item_btn a {display: flex; width: 100%; height: 100%; text-align: center; justify-content: center; align-items: center; color: #fff; font-size: 16px;}
.sec_frame .item_btn a i {font-size: 7px; margin-left: 3px;}

.sec_frame .item_btn:hover {max-width: 210px; bottom: 3px;}

@media (max-width: 991px) {
	.sec_frame .item_btn {max-width: 80%; clip-path: polygon(95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%, 5% 0);}
	.sec_frame .item_btn:hover {max-width: 80%; bottom: 0;}
}

@media (max-width: 600px) {
	.sec_frame .item_btn {max-width: 100%; }
	.sec_frame .item_btn:hover {max-width: 100%; }
}


/*메인 perspective 베너---------------------------------*/

#sec_perspective {overflow:hidden; perspective:1000px;}
#sec_perspective figure {height: 68rem; width: 100%; background:blue; margin:0 auto; 
perspective-origin:top; transform-style:preserve-3d; position:relative; transition:.8s; font-size: 0.52vw;}

#sec_perspective figure:nth-child(1) {background: url('img/title_pc1.jpg') no-repeat; background-size: cover; background-position: center;}
#sec_perspective figure:nth-child(2) {background: url('img/title_pc2.jpg') no-repeat; background-size: cover; background-position: center;}
#sec_perspective figure::before {content:""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.2); z-index: 1;} 

#sec_perspective figure.on { transform:rotateX(30deg) translateY(10%); opacity:.2; } /*원근효과관련 클래스*/
#sec_perspective figure:first-child.on { transform:rotateX(20deg) translateY(30%); }
#sec_perspective figure.on1 { opacity:0; } /*원근효과관련 클래스*/

#sec_perspective figure > .figure_text {position: absolute; transform: translate(-50%, -50%); width: fit-content; z-index: 2;}
#sec_perspective figure:nth-child(1) > .figure_text { top: 45%; left: 30.5%; }
#sec_perspective figure:nth-child(2) > .figure_text { top: 45%; left: 66%;}
#sec_perspective figure > .figure_text > * {color: #fff; }
#sec_perspective figure > .figure_text h3 {font-size: 3em; font-weight: bold; line-height: 1.3;}
#sec_perspective figure > .figure_text h1 {font-size: 8.7em; font-weight: 900; line-height: 1;}
#sec_perspective figure > .figure_text h1 > .big-tag {font-size: 1.27em;}
#sec_perspective figure > .figure_text p.text1 {font-size: max(13px, 2em); margin-top: 1.3em; line-height: 1.3;}


@media (max-width: 991px) {
	#sec_perspective figure {font-size: 1.01vw; height: 70em;}
	#sec_perspective figure:nth-child(1) {background: url('img/title_mob1.jpg') no-repeat; background-size: cover; background-position: center;}
	#sec_perspective figure:nth-child(2) {background: url('img/title_mob2.jpg') no-repeat; background-size: cover; background-position: center;}

	#sec_perspective figure { width:100%; margin-bottom:0; }
	#sec_perspective figure.on { transform:rotateX(0deg) translateY(0); opacity:1; } /*원근효과관련 클래스*/
	#sec_perspective figure:first-child.on { transform:rotateX(0deg) translateY(0); }
	#sec_perspective figure.on1 { opacity:1; } /*원근효과관련 클래스*/

	#sec_perspective figure:nth-child(1) > .figure_text {display: none;}
	#sec_perspective figure > .figure_text { text-align: center; }
	#sec_perspective figure:nth-child(2) > .figure_text {right: unset; left: 50%; width: fit-content; top: 10%; opacity: 0; transition: all 1s; width: 80%;}
/*	#sec_perspective figure > .figure_text p.text1 {display: none;}*/

	#sec_perspective figure:nth-child(2) > .figure_text.on {opacity: 1; top: 17%;}

	#sec_perspective figure > .figure_text h3 {font-size: 3em; font-weight: bold; line-height: 1.3;}
	#sec_perspective figure > .figure_text h1 > .big-tag {font-size: 1.27em;}
	#sec_perspective figure > .figure_text p.text1 {font-size: max(13px, 2em); margin-top: 1.3em; line-height: 1.3;}

}

@media (max-width: 600px) {
	#sec_perspective figure:nth-child(2) > .figure_text {top: 10%;}
	#sec_perspective figure:nth-child(2) > .figure_text.on {opacity: 1; top: 17%;}
}









/*sec01---*/
#sec_frame01 {padding: max(50px, 9em) 0 max(50px, 14.8em) 0; }
#sec_frame01 .containerV1 {display: flex; flex-direction: column; justify-content: center;}




/*sec02 ---*/
#sec_frame02 {padding: 25px 0;  font-size: 10px; position: relative;}
#sec_frame02::after {content:""; position: absolute; z-index: 1; width: 100%; height: 100%; right: 0; top: 0;
background: url('img/sec02_bg.jpg') no-repeat; background-size: cover; background-position: right;}
#sec_frame02 .containerV1 {position: relative; }
#sec_frame02 .item_textBox { position: relative; z-index: 2;}
#sec_frame02 .item_textBox h1 {font-size: 5.5em; font-weight: bold; color: #fff; line-height: 1.3;}
#sec_frame02 .item_textBox p.tel_text {font-size: 8em; font-weight: 900; color: #fff; line-height: 1.3;}
#sec_frame02 .item_textBox p.tel_text a {color: #fff;}
#sec_frame02 .item_textBox p.text1 {margin-top: 10px; font-size: max(12px, 1.8em); color: #fff; line-height: 1.4; font-weight: 300; }

@media (max-width: 1340px) {
	#sec_frame02 {background: #ffb41d;}
	#sec_frame02::after {content:""; position: absolute; z-index: 1; width: 50em; height: 32.7em; right: 0; top: 50%; transform: translateY(-50%); 
	background: url('img/sec02_img01.jpg') no-repeat; background-size: cover; background-position: center; }
}

@media (max-width: 991px) {
	#sec_frame02 {font-size: 1.01vw; }

}



/*sec03---*/
#sec_frame03 {padding: max(50px, 9em) 0 max(50px, 14.8em) 0; }
#sec_frame03 .containerV1 {display: flex; flex-direction: column; justify-content: center;}


/*sec04---*/
#sec_frame04 .root_daum_roughmap {width:100% !important; }
#sec_frame04 .itemBox {margin-bottom: 100px;}

@media (max-width: 991px) {
	#sec_frame04 .root_daum_roughmap {width:100% !important; height: 50vw !important;}
	.root_daum_roughmap .wrap_map {height: 100% !important;}
}

@media (max-width: 500px) {
	#sec_frame04 .root_daum_roughmap {height: 250px !important;}
}

/*--------------------------------------------------- 인덱스세팅 끝 ----------------------------------------------------------------------------*/



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { background: #fff;}
footer a { color: inherit; }

footer > .contents_box { padding: 0 0 4.7rem 0; }
footer > .contents_box .info_box {display: flex; justify-content: center; background: #f9f9f9; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb;
padding: 1.5rem 0;}
footer > .contents_box .info_box .info {display: flex; text-align: center;}
footer .info > .item { position:relative; }
footer .info > .item:before { content:''; position:absolute; right:7px; top:55%; transform:translateY(-50%); width:1px; height:13px; background:#ddd; }
footer .info > .item:last-child:before { display:none; }
footer .info > .item > a { display:block; color:#bbb; font-size:12px; font-weight:500; line-height:1.8; margin-right:15px;  }  /*211223폰트 사이즈 13에서 14로 수정.*/

footer .contents { display:flex; flex-wrap:wrap; justify-content: center; width: 100%; }
footer .item2 {display: flex; flex-direction: column; align-items: center; margin-top: 44px;}


footer .item2 > div { line-height: 1.8; font-size: 15px; color: #999; text-align: center;}  /*211223폰트 사이즈 13에서 14로 수정.*/
footer .item2 > div a { color: inherit; }
footer .item2 > .text > span { position: relative; margin-right:10px; font-weight: inherit;  }
footer .item2 > .text > span:after { content:'|'; position:absolute; right:-8px; top:50%; transform:translateY(-55%); }
footer .item2 > .text > span:last-child:after { display: none; }
footer .item2 > .copy { text-transform: uppercase; font-weight: inherit; color: #bbb; margin-top: 22px;}
footer .item2 > .copy a { color: inherit; }





@media (max-width:1200px) {
footer .contents > li:nth-child(1) { margin-right: 40px; }
footer .item2 { width: calc( 75% - 40px ); }
}

@media (max-width:991px) {
footer {background: #f9f9f9; border-top:1px solid #ebebeb; padding-top: 20px;}
footer .contents > li:nth-child(1) { width: 100%; margin-right: 0; margin-bottom: 20px; }
footer .item2 { width: 100%; }
}

@media (max-width:768px) {
footer .item2 .info {justify-content: center;}
footer .item2 > .text > span { display:block; margin-right:0;}
footer .item2 > .text > span:after { display:none;}

footer .item2 { margin-top: 0; text-align: center;}

}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/


/*<!--마우스 포인터 커스텀  -->*/
html{cursor: none;}
#drawing_line {position: relative; z-index: 999999; height: 0; }
#drawing_line > svg {position: fixed; left: 0; top: 0; width: 100%;
height: 100%; z-index: 1; pointer-events: none;}
#drawing_line > svg .drawing_line_polyline {
fill: none; stroke: #ef848a; stroke-width: 2;
}
#drawing_line > svg .drawing_line_circle {
fill: #000;
}








/* 서브페이지 패딩 */
.tmt_sub_frame { padding:40px 0 50px; min-height: 87vh; }


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid var(--main-color); background-color: var(--main-color);}
.btn.active.btn-color, .btn.btn-color:hover, .btn.btn-color:focus, .btn.btn-color:active {background-color: var(--main-color);}
.border-color, i.border-color, img.border-color {border-color: var(--main-color);}

/* 모달 z-index높이기 (해드에 가려지는 경우 발견해서) */
.modal { z-index: 9999; }
.modal-backdrop { z-index: 9998; }


.online_frame span {color: var(--main-color);}

.form-group .control-label {color: var(--main-color);}