@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; }


/* 탭 초기화 */
.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 폰트 사이즈 */
@media (max-width:1200px) {
	html { font-size: 8.5px; }
}
@media (max-width:991px) {
	html { font-size: 8px; }
}
@media (max-width:768px) {
	html { font-size: 7.5px; }
}
@media (max-width:580px) {
	html { font-size: 6.5px; }
}
@media (min-width:1200px) and (max-height:800px) {/* 너비 1200이상 높이 800이하 */
html { font-size: 8px; }
}
@media (min-width:1200px) and (max-height:650px) {/* 너비 1200이상 높이 650이하 */
html { font-size: 7.5px; }
}
@media (min-width:1200px) and (max-height:500px) {/* 너비 1200이상 높이 500이하 */
html { font-size: 6.5px; }
}



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

	--color1 : #c7315f; /* mainColor 다홍색*/
	--color2 : #b5b5b5;
	--color3 : #959595;
	--color4 : #313131;
	--color9 : #295c9c;
	--color10 : #3a3a3a;
	--color11 : #333;

	/*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-size22 : min(5.50vw, 22px); 
	--font-size23 : min(5.75vw, 23px); 
	--font-size25 : min(6.25vw, 25px); 
	--font-size30 : min(7.50vw, 30px); 
	--font-size35 : min(8.75vw, 35px); 
	--font-size45 : min(9vw, 45px); 
	--font-size50 : min(10vw, 50px); 



}

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


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


.wrap { padding-top: 0; }
@media (max-width: 991px) {
	.wrap { padding-top: 0;}
}


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

#header { position: fixed; left: 0; top: 0; width: 100%; height: 9rem; z-index: 1000; transition:0.4s; background: rgba(255,255,255,0.9);}


/*모바일 검은 배경*/
#header .menuBox_bg {position: fixed; right: 0; top: 0; z-index: 8000; width: 100%; height: 100vh; background: rgba(0,0,0,0.5); display: none;}


#header .itemBox {
width: 100%; max-width: 1780px; height: 100%; display:flex; justify-content:space-between; align-items:center; 
position: relative; z-index: 2; margin: 0 auto;}


#logo { width: 13.54vw; min-width: 170px;}
#logo a { display: block; position: relative;}


/*main_menu---------------------------------------------------------------------------*/
#nav .nav_logo {display: none;}

#nav .nav_inner { display:flex; align-items:center; width: 100%;}
#nav .outer {display: flex; position: relative;}
#nav .outer > li {position: relative; margin-left: max(30px, 3.65vw);}
#nav .outer > li:first-child {margin-left: 0;}
#nav .outer > li > a {
display: block; color: #565151;  font-size: max(16px, 0.94vw); font-weight: 400; height: 100%; line-height: 10rem;
position: relative; transition: all 0.3s;
}
#nav .outer > li > a > span {position: relative;}
#nav .outer > li > a > i {color: var(--color1); display: none;}

#nav .outer > li > a > span:after {
content: ''; position: absolute; left:0; bottom: -10px; width: 0; height: 3px; background: var(--color1); transition:0.4s;
}


/*sub_menu---------------------------------------------------------------------------*/
#nav .inner {
display: block; position: absolute; right: 0; top: 100%; width: 17rem; padding: 10px 0 10px;
border-top: 5px solid var(--color1);  opacity: 0; transition: all 0.2s; visibility: hidden; z-index: 1;  background: #fff; text-align: right; box-shadow: 3px 2px 10px rgba(0,0,0,0.2);
}
#nav .inner > li {position: relative; color: #333; line-height: 1.3; transition: all 0.3s;}

#nav .inner > li > a { display: block; font-size: 15px; color: inherit; transition: all 0.5s; position: relative; left: 0; padding: 10px 15px;}
#nav .outer > li:nth-child(1) .inner { z-index: 10;}



/* hover */

#header.bg_on {background: #fff; border-bottom: 1px solid rgba(0,0,0,0.2);}


#nav .outer > li:hover > .inner {opacity: 1; visibility: visible; z-index: 2;}
#nav .outer > li:hover > .inner > li > a {left: 0;}
#nav .outer > li:hover > a > span:after {width: 100%;}
#nav .outer > li > .inner > li:hover {background: var(--color1);}
#nav .outer > li > .inner > li:hover > a {left: 5px; color: #fff; }



/* 해드 스크롤 했을때 */
#header.scroll #nav .outer > li > a {color: #333;}
#header.scroll {box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background: #fff;}



/* 해당페이지 일때 */
#nav .outer > li > a.on > span:after {width: 100%;}


/*모바일에서 피씨 로고 클래스 지움.*/
#logo.logo_hide {opacity: 1; visibility: visible;}



/*반응형-------------------------------------------------------------*/

@media (max-width: 1810px) {
	#header .itemBox {padding: 0 15px;}
	#nav .outer > li {margin-left: 30px;}
}





/*모바일*/
@media all and (max-width: 991px) {
	
	#header {background:#f3f3f3cf;}

	/* 모바일 열기 버튼 */
	.open_btn { font-size: 25px; color: #333; cursor:pointer; }

	#nav {
	background-color: #fff; width: 21.43em; height: 100%;  display: block;
	position: fixed; right:0; top: 0; z-index:9999; margin-right:-21.43em;  transition:margin-right 0.3s;
	}

	#nav .nav_inner .nav_topBox {display: flex; align-items: center; width: 100%; height: 86px; background: var(--color1); padding: 20px;}
	#nav .nav_inner .nav_logo {display: block;}
	#nav .nav_inner .nav_logo img {width: 150px;}
	#nav .nav_inner { 
	width: 21.43em; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; 
	flex-direction:column; justify-content:flex-start; align-items:stretch;
	}


	/* 모바일닫기버튼 */
	.close_btn { width:50px; height:50px; margin-right:0; margin-left:auto; cursor:pointer; position: absolute; right: 0; top: 15px;}
	.close_btn > i { display:block; color:#fff; text-align:center; line-height:50px; font-size:30px; z-index: 3;}


	#header .menuBox_bg {display: block;}/*	menubox_bg가 메뉴를 연 상태로 바로 pc화면으로 바꿀 경우 그대로 남아서 pc에서 none 처리해둔 걸 모바일에서 푸는 용도*/

	#nav .outer { display: block; margin-top: 10px; padding: 0 20px;}
	#nav .outer > li { margin-left: 0; width: 100%; overflow: hidden; cursor: pointer; margin-bottom: 10px;}
	#nav .outer > li > a { font-weight: 500; padding:15px 20px 20px 10px; color: #333; position: relative; pointer-events:none; height: auto; line-height: 1; font-size: 20px;
	border-bottom: 1px solid rgba(0,0,0,0.5);}
	#nav .outer > li > a > span:after {display: none;}

	#nav .outer > li > a > i {color: var(--color1); display: inline-block; position: absolute; right: 15px; top: 15px; transform: rotate(0deg); transition: all 0.3s;}

	#nav .inner { position: relative; padding: 0; display: block; border:0; opacity: 0; visibility: hidden; width: 100%; height: 0;  background: #fff; box-shadow: none;}
	#nav .inner > li { margin-bottom:0; position: relative; padding: 0;}


	#nav .inner > li > a {
	color: #333; padding: 12px 25px; position: relative; transition: all 0.3s;
	text-align: left; left: 0; font-size: 15px;
	}

	/*	pc 메뉴 효과 지움*/
	
	#header:hover #nav .inner {opacity: 1; top: 100%;}
	#nav .inner > li > a:hover { color: var(--color1); }


	/* 헤드 스크롤 했을때 */
	#header.scroll {background: #f3f3f3;}

	/* hover */
	#nav .outer > li:hover > a {}
	#nav .outer > li:hover > .inner { display:block; opacity: 1; top: 100%;}
	#nav .inner > li > a:hover {left: 5px;}

	
/*	서브메뉴 inactive*/
	#nav .outer > li.on_sub > .inner {
		opacity: 1;
		visibility: visible;
		height: auto;
	}

	#logo.logo_hide {opacity: 0; visibility: hidden;}
	
	#nav .outer > li.on_sub > a > span {color: var(--color1);}
/*	#nav .outer > li.on > a > span {color: #fff;}*/
	#nav .outer > li.on_sub > a > i {transform: rotate(90deg); }



	/* 해당페이지 일때 */
	#nav .outer > li > a.on > span {color: var(--color1);}
	#nav .outer > li > a.on_sub > span {color: var(--color1);}


	/* outer 클릭시 inner보이는 효과 */
	#nav .outer > li.on_sub > .inner { display: block; padding: 10px 0;}
	

	/* 모바일메뉴박스 보이게 하는 클래스 */
	#nav.inactive { margin-right: -1px; } 
}

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



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
.index  .titleBox {padding-top: 20px; position: relative; text-align: center;}
.index  .titleBox::after {content:""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: var(--color1); width: 35px; height: 4px;}
.index  .titleBox h1 {margin-bottom: 15px;}
.index  .titleBox p.text1 {font-size: var(--font-size16); line-height: 1.4; color: #777; font-weight: 300;}
.index .title-V1 {font-size: var(--font-size50); line-height: 1.2; font-weight: bold;}
.index .title-V2 {font-size: var(--font-size30); line-height: 1.2; font-weight: bold;}
.index .title-V3 {font-size: var(--font-size45); line-height: 1.2; font-weight: bold;}
.index > article {font-size: 10px;}



/*버튼*/
.index .item_btn {border: 1px solid #999; display: flex; align-items: center; justify-content: center; gap: 0 5px; position: relative;
text-align: center; line-height: 1.2; color: #fff; width: 210px; height: 50px; color: #666; font-weight: bold; font-size: var(--font-size18); margin: 0 auto; transition: all 0.2s; bottom: 0;}
.index .item_btn::before {content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 85%; border-radius: 10px; background: var(--color1);
opacity: 0; visibility: hidden; transition: all 0.3s; z-index: -1;}
.index .item_btn i {position: relative; left: 0px; transition: all 0.3s;}

.index .item_btn:hover {color: #fff; border-color: transparent; background: var(--color1);}
.index .item_btn:hover > i {left: 5px;}


@media (max-width: 1430px) {
	.index > article {font-size: 0.70vw;}
}

@media (max-width: 991px) {
	.index .item_btn:hover {color: #666; border-color: #999; background: none;}
	.index .item_btn:hover > i {position: relative; left: 0px;}
}






/* section1 */
	.index .section1 {padding: max(50px, 6.8em) 0 max(50px, 9em) 0;  position: relative; background: #f8f8f8; }
	.index .section1 .containerV1 {display: grid; grid-template-columns: repeat(2, 1fr);}
	.index .section1 .widget_box {padding: 15px 0 0 20px;}
	
	@media (max-width: 991px) {
		.index .section1 .widget_box {padding: 15px 0 0 0;}
	}
	@media (max-width: 768px) {
		.index .section1 .containerV1{grid-template-columns: repeat(1, 1fr); gap: 50px 0;}
		
	}


/* section2 */
	.index .section2 {padding: max(50px, 11.5em) 0 max(50px, 15em); }
	.index .section2 .itemBox {margin-top: 50px; position: relative;}
	.index .section2 .swiper-wrapper { transition:0.4s !important;}
	.index .section2 .swiper-wrapper .swiper-slide {background: #fff; display: flex; transition:0.4s !important; }

	.index .section2 .swiper-slide > .inner { transition: 1s; transition-delay:0.2s; }
	.index .section2 .swiper-slide .slide_img {display: flex; align-items: center; justify-content: center; position: relative; opacity: 0; left: -200px;}
	.index .section2 .swiper-slide .slide_textBox {padding: 16.5em 17px 0 15px; flex-basis: 0; flex-grow: 1; position: relative; opacity: 0; right: -200px;}
	.index .section2 .swiper-slide .slide_textBox .text_title {position: absolute; width: 74.7em; height: 8.5em; background: var(--color1); padding: 0 0 0 68px; top: 7em; right: 0;
	display: flex; align-items: center;}
	.index .section2 .swiper-slide .slide_textBox .text_title h1.title-V3 {color: #fff; line-height: 1.2; font-weight: bold;}
	.index .section2 .swiper-slide .slide_textBox p {font-size: var(--font-size18); color: #333; line-height: 1.6; font-weight: 300; letter-spacing: -1px;}
	.index .section2 .swiper-slide .slide_textBox .item_btn {margin: 7rem 0 0 0;}
	
	
	/*슬라이드 페이지네이션*/
	.index .section2 .itemBox .button-box {position: absolute; bottom: 0; width: 127px; height: 35px; right: 0;}
	.index .section2 .swiper-button-next, .index .section2 .swiper-button-prev {width: 15px; height: 15px; border: 1px solid #8e8e8e; margin-top: 0; transform: translateY(-50%); z-index: 11;}
	.index .section2 .swiper-button-next:after, .index .section2 .swiper-button-prev:after {font-size: 10px; color: #8e8e8e; line-height: 1.2; position: relative;}
	.index .section2 .swiper-button-next:after {left: 1px;}
	.index .section2 .swiper-button-prev:after {right: 1px;}
	.index .section2 .swiper-pagination {font-size: var(--font-size18); font-weight: bold; bottom: unset; top: 50%; left: 50%; transform: translate3d(0,0,0) translate(-50%, -50%);}
	.index .section2 .swiper-pagination span.swiper-pagination-current {color: var(--color1);}

	/*애니메이션 효과*/
	.index .section2 .swiper-slide-active .slide_img {opacity: 1; left: 0;}
	.index .section2 .swiper-slide-active .slide_textBox {opacity: 1; right: 0;}
	

	@media all and (max-width: 1430px) {
/*		.p101 {font-size: 0.70vw;}*/
		.index .section2 .swiper-slide .slide_textBox p br {display: none;}
/*		.p101 .page_img {display: flex; align-items: center;}*/
	}

	@media all and (max-width: 991px) {
		.index .section2 .swiper-slide {flex-direction: column; padding-bottom: 20px;}
		.index .section2 .swiper-slide .slide_img {justify-content: center;}
		.index .section2 .swiper-slide .slide_textBox {text-align: center; padding: 50px 0 0 0;}
		.index .section2 .swiper-slide .slide_textBox .text_title {position: relative; top: unset; right: unset; width: 565px;  height: auto; 
		margin: 0 auto 30px auto; padding: 11px 0; text-align: center; justify-content: center;}
		.index .section2 .swiper-slide .slide_textBox .text_title h1.title-V3 {font-size: var(--font-size30);}
		.index .section2 .swiper-slide .slide_textBox p {margin-bottom: 25px;}
		.index .section2 .swiper-slide .slide_textBox .item_btn {margin: 0 auto;}
		.index .section2 .itemBox .button-box {position: relative; left: 50%; transform: translate(-50%);}
		.index .section2 .swiper-button-next, .index .section2 .swiper-button-prev {width: 20px; height: 20px;}
/*		.index .section2 .swiper-button-next, .index .section2 .swiper-button-prev {width: 40px; height: 40px; border-style: none;}*/
/*		.index .section2 .swiper-button-next {right: 0;}*/
/*		.index .section2 .swiper-button-prev {left: 0;}*/
/*		.index .section2 .swiper-button-next:after, .index .section2 .swiper-button-prev:after {bottom: 1px; line-height: 1; font-size: var(--font-size35); color: #333; font-weight: bold;}*/
/*		.index .section2 .itemBox .button-box {width: 100%; height: 100%; position: static;}*/
/*		.index .section2 .swiper-pagination {bottom: 0; top: unset; left: unset; transform: translate3d(0,0,0);}*/

	}
	@media all and (max-width: 650px) {
		.index .section2 .swiper-slide .slide_textBox .text_title {width: 100%;}
	}

	



/* section3 */
	.index .section3 .containerV1 {padding-left: 50px;}
	.index .section3 {padding: max(50px, 8em) 0; background: url(img/sec03_bg.jpg) no-repeat; background-size: cover; background-position: center; }
	.index .section3 .itemBox {display: flex; gap: 0 max(20px, 5em);}
	.index .section3 .itemBox figure.item_img {display: flex; align-items: center; justify-content: center;}
	.index .section3 .itemBox figure.item_img img {box-shadow: 1px 5px 15px rgba(0,0,0,0.5);}
	.index .section3 .item_contentBox {flex-basis: 0; flex-grow: 1;}
	.index .section3 .item_contentBox .titleBox {text-align: left; padding-top: 0; margin-bottom: 30px; padding: 0 23px;}
	.index .section3 .item_contentBox .titleBox h1 {color: #fff; margin-bottom: 5px;}
	.index .section3 .item_contentBox .titleBox::after {display: none;}
	.index .section3 .item_contentBox .titleBox p.text1 {color: #fff; line-height: 1.6;}
	.index .section3 .itemBox .gridBox {display: grid; grid-template-columns: repeat(4, 13em); gap: 0 5em; font-size: 10px;}
	.index .section3 .itemBox .gridBox > li {width: 13em; height: 13em; background: rgba(124,124,126,0.7); transition: all 0.3s; bottom: 0; position: relative;}
	.index .section3 .itemBox .gridBox > li > a {display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; text-align: center; padding: 1.6em 0 0.8em;}
	.index .section3 .itemBox .gridBox > li > a > img {width: 6.9em; height: 6.9em; margin-bottom: 1.4em;}
	.index .section3 .itemBox .gridBox > li > a > span {font-size: max(13px, 2em); font-weight: bold; color: #fff;}


	.index .section3 .itemBox .gridBox > li:hover {bottom: 10px; background: var(--color1);}

	@media (max-width: 1430px) {
		.index .section3 .itemBox .gridBox {font-size: 0.70vw;}
		.index .section3 .containerV1 {padding-left: 0; padding: 0 15px;}
	}

	@media (max-width: 991px) {
		.index .section3 .item_contentBox .titleBox p.text1 br {display: none;}
		.index .section3 .itemBox .gridBox > li:hover {bottom: 0px; background: rgba(124,124,126,0.7); }
	}

	@media (max-width: 768px) {
		.index .section3 .itemBox {flex-direction: column; aling-items: center; gap: 30px 0;}
		.index .section3 .itemBox .gridBox {font-size: 1.30vw; justify-content: center;}
	}

	@media (max-width: 550px) {
		.index .section3 .itemBox {flex-direction: column; aling-items: center; gap: 30px 0;}
		.index .section3 .item_contentBox .titleBox {text-align: center;}
		.index .section3 .itemBox .gridBox {font-size: 1.82vw; justify-content: center; grid-template-columns: repeat(2, 1fr); gap: 15px;}
		.index .section3 .itemBox .gridBox li {width: 100%;}
		.index .section3 .item_contentBox .titleBox {padding: 0;}
	}



/* section4 */
	.index .section4 {padding: max(50px, 11.5em) 0 max(50px, 15em);}
	.index .section4 .titleBox {margin-bottom: 4.5rem;}
	.index .section4 .widget_box {margin-bottom: 10rem;}



	@media (max-width: 650px) {
		.index .section4 .item_btn {width: 100%;}
	}






/* section5 */
.index .section5 {background: #e3e3e3; padding: 15px 0;}




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



/*--------------------------------------------------- 푸터세팅 ----------------------------------------------------------------------------*/
/* footer*/
footer { background: #f6f6f6; }

footer > .contents_box {padding: 4.7rem 0; }
footer .contents { display:flex; flex-wrap:wrap; align-items:center; flex-direction: column; gap: 15px 0;}
footer .contents > li { font-weight: 300;  }
footer .item2 { width: fit-content; display: flex; flex-direction: column; align-items: center; }
footer .item2 > div { line-height: 1.6; font-size: 16px; color: #666; }
footer .item2 > div a { color: inherit;}
footer .item2 > .text > span { position: relative; font-weight: inherit; margin-right: 10px;}
footer .item2 > .text > span:after { content:'|'; position:absolute; right: -9px; top:50%; transform:translateY(-55%); }
footer .item2 > .text > span:last-child:after { display: none; }
footer .item2 > .copy { text-transform: uppercase; font-weight: inherit; text-align: center; margin-top: 2.5rem;}




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

@media (max-width:991px) {
footer .item1 {display: none;}
footer .item2 { width: 100%; align-items: unset;}
footer .item2 > .copy {text-align: left;}
}

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

footer .item2 { margin-top: 20px; }
}

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







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

@media (max-width: 991px) {
	.tmt_sub_frame { padding: 80px 0 50px; min-height: 80vh; }
}

/*각 페이지 프레임 내부 패딩(다시 고치려니 일일이 들어가서 고치기 힘들기 때문에 이 부분만 여기서 수정)*/
/*.tmt_sub_frame .page_frame {padding: 65px 10px 20px 10px;}*/

/*@media max(var(--containerV1-width + 30px)) {*/
/*	.tmt_sub_frame .page_frame {padding: 65px 0px 20px 0px;}*/
/*}*/

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


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

/*서브페이지 헤드 상단 텍스트*/
@media (max-width: 540px) {
	.responsive .amina-header .header-breadcrumb {display: none;}
}