@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; }
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;
}
h1, h2, h3, h4, h5, h6 { margin:0; font-family: 'Noto Sans KR', sans-serif; line-height:1;  }
ul, ol { list-style:none; margin:0; }
a { outline:0; text-decoration:none; }
a:focus { outline:none; }
img { border:none; outline:none; max-width: 100%; }
p { margin:0; padding:0; word-wrap: break-word; word-break: keep-all;  }

/* html 폰트 사이즈 rem*/
@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 {
	/* 컨텐츠 너비 or 공용 컬러*/
	--containerV1-width : 1200px;
	
	--main-color : #d11241;
}

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


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


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





/*--------------------------------------------------- 해드세팅 ----------------------------------------------------------------------------*/
#header {
--header-height : 10rem;
position: fixed; left: 0; top: 0; width: 100%; height: var(--header-height); z-index: 1000; transition: all 1s; background: #fff;}

#header .containerV1 {max-width: 1630px;}

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

#logo {width: 24rem;}

/*모바일 검은 배경*/
#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 .submenu_bg {position: absolute; top: -400px; left: 0; width: 100%; height: 300px; background: #fff; transition: all 0.4s; border-bottom: 1px solid #eee;}*/

#header .itemBox {
width: 100%; height: 100%; display:flex; justify-content:space-between; position: relative; z-index: 2;}

#header #logo a {display: flex; align-items: center; width: 100%; height: 100%;}


/*언어 lang-box*/
#header .itemBox .language_box {
--language_size : 50px;
width: var(--language_size); height: var(--language_size); background: var(--main-color); position: relative;}
#header .itemBox .language_box > a {width: 100%; height: 50px; color: #fff; font-size: 16px;
display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; padding-top: 5px;}

#header .itemBox .language_box  .list_wrap {width: 100%; height: 0; overflow: hidden; position: absolute; top: 100%; transition: all 0.6s;}
#header .itemBox .language_box ul {width: 100%; color: #fff; overflow: hidden; text-align: center; background: var(--main-color);}
#header .itemBox .language_box ul > li:first-child {display: none;}
#header .itemBox .language_box ul > li {margin-bottom: 15px;}
#header .itemBox .language_box ul a {color: inherit; letter-spacing: 1px; font-size: 16px;}



/*main_menu---------------------------------------------------------------------------*/
#nav {
--main-menu-color: #777;
}

#nav .nav_logo {display: none;}

#nav .nav_inner { display:flex; align-items:center; width: 100%;}
#nav .main-menu {display: flex; position: relative;}
#nav .main-menu > li {position: relative; margin-right: max(20px, 4.95vw);}
#nav .main-menu > li:first-child {margin-left: 0;}
#nav .main-menu > li > a {
display: block; color: #777;  font-size: max(14px, 0.94vw); font-weight: 400; height: 100%; line-height: var(--header-height);
position: relative; transition: all 0.3s;}

#nav .main-menu > li > a > span {position: relative;}
#nav .main-menu > li > a > i {color: #777; display: none;}

#nav .main-menu > li > a > span:after {
	content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; width: 0; height: 2px; background: var(--main-color); transition:0.5s;
}





/*sub_menu---------------------------------------------------------------------------*/

#nav .sub-menu {
display: block; position: absolute; left: 50%; top: -400%; transform: translateX(-50%); width: 17rem; padding:  0 0 10px 0;
opacity: 0; transition: opacity 0.4s 0.2s; z-index: 1;  background: transparent; text-align: center;}

#nav .sub-menu::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 5px; background: var(--color2);} 
#nav .sub-menu > li {position: relative; color: #333; line-height: 1.3; transition: all 0.3s;}

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

/* hover */

#header.header_full {height: 400px; transition: all 0.8s; border-bottom: 1px solid #eee;}
#header.header_full .sub-menu {opacity: 1; top: 100%;}

#nav .main-menu > li:hover > .sub-menu > li > a {left: 0;}
#nav .main-menu > li:hover > a {color: var(--main-color);}
#nav .main-menu > li:hover > a > span:after {width: 100%;}
#nav .main-menu > li > .sub-menu > li:hover {background: var(--color1);}
#nav .main-menu > li > .sub-menu > li:hover > a {color: var(--main-color); }



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



/* 해당페이지 일때 */
	#nav .main-menu > li > a.on {color: var(--main-color);}
/* #nav .main-menu > li > a.on > span:after {width: 100%;} */


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





@media all and (max-width: 1230px) {
	#logo {width: 16rem;}
}


/*모바일*/
@media all and (max-width: 991px) {
	
	#header .containerV1 {height: 100%;}

	#header .itemBox {align-items: center;}

	#logo {width: 160px;} 
	

	/* 모바일 열기 버튼 */
	.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: #fff; padding: 20px; border-bottom: 1px solid #eee;}
	#nav .nav_inner .nav_logo {display: block;}
	#nav .nav_inner .nav_logo img {width: 180px;}
	#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: 20px;}
	.close_btn > i { display:block; color:#333; text-align:center; line-height:50px; font-size: 23px; z-index: 3;}


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


/*lang-box	*/
	#header .itemBox .language_box {
	--language_size : 100%;
	width: var(--language_size); height: auto; background: unset; position: absolute; margin: 0 auto; top: 94px; left: 50%;
    transform: translateX(-50%);}
	#header .itemBox .language_box > a {display: none;}
	#header .itemBox .language_box .list_wrap {width: 100%; height: auto; overflow: unset; position: relative; top: unset;}
	#header .itemBox .language_box ul {width: 100%; color: #333; overflow: unset; text-align: center; background: unset; display: flex; gap: 0 30px;
	justify-content: center;}
	#header .itemBox .language_box ul > li:first-child {display: block;}
	#header .itemBox .language_box ul > li {margin-bottom: 0; position: relative;}
	#header .itemBox .language_box ul > li::after {content:"|"; position: absolute; right: -19px; top: 45%; transform: translateY(-50%); font-weight: bold;}
	#header .itemBox .language_box ul > li:last-child:after {display: none;}
	#header .itemBox .language_box ul a {color: inherit; letter-spacing: 1px; font-size: 16px; font-weight: bold;}


/*main_menu---------------------------------------------------------------------------*/
	#nav .main-menu { display: block; margin-top: 40px; padding: 0 20px;}
	#nav .main-menu > li { margin-left: 0; width: 100%; overflow: hidden; cursor: pointer; margin-bottom: 10px;}
	#nav .main-menu > 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 .main-menu > li > a > span:after {display: none;}
	#nav .main-menu > li > a > i {color: var(--color1); display: inline-block; position: absolute; right: 15px; top: 15px; transform: rotate(0deg); transition: all 0.3s;}



/*sub_menu---------------------------------------------------------------------------*/

	#nav .sub-menu { position: relative; padding: 0; display: block; border:0; opacity: 0; visibility: hidden; width: 100%; height: 0;  background: #fff; box-shadow: none;}
	#nav .sub-menu::before {display: none;} 
	#nav .sub-menu > li { margin-bottom:0; position: relative; padding: 0;}
	#nav .sub-menu > li > a {
	color: #333; padding: 12px 25px; position: relative; transition: all 0.3s;
	text-align: left; left: 0; font-size: 15px;
	}

	/*	pc 메뉴 효과 지움*/
	#header.header_full {height: var(--header-height);}
	#header.header_full .sub-menu {opacity: 1; top: 100%;}
	#header:hover #nav .sub-menu {opacity: 1; top: 100%;}
	

	
	/* 해드 스크롤 했을때 */
	#header.scroll {box-shadow: 0px 3px 10px rgba(0,0,0,0.1);}

	/* hover */
	#nav .main-menu > li:hover > a {color: #333;}
	#nav .main-menu > li:hover > .sub-menu { display:block; opacity: 1; top: 100%;}
	#nav .main-menu > li > .sub-menu > li:hover {background: #fff;}
	#nav .main-menu > li > .sub-menu > li:hover > a {color: #333; }

	
/*	서브메뉴 inactive*/
	#nav .main-menu > li.on_sub > .sub-menu {
		opacity: 1;
		visibility: visible;
		height: auto;
	}

	#logo.logo_hide {opacity: 0; visibility: hidden;}
	
	#nav .main-menu > li.on_sub > a > span {color: var(--main-color);}
	#nav .main-menu > li.on_sub > a > i {transform: rotate(90deg); }



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


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

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


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



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


.index .sec01 {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 550 * 100vw ), calc(var(--font-size-pc) * 1px) );
padding: max(50px, 9.4rem) 0 max(50px, 9rem) 0; background: #f5f5f5;
}
.index .sec01 .title-V1 {font-size: 5em; font-weight: bold; line-height: 1.2; color: #333; margin-bottom: 0.8em;}
.index .sec01 .containerV1 {position: relative;}



.index .sec02 {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1230 * 100vw ), calc(var(--font-size-pc) * 1px) );
padding: max(60px, 10.3rem) 0 max(50px, 9.2rem) 0;}


.index .sec02 > .containerV1 {max-width: 100%; }

.index .sec02  .swiper-wrapper .swiper-slide {width: 100%; max-width: 1200px; opacity: 0.3; height: 54em; padding:  0 0 42px 0;}
.index .sec02  .swiper-wrapper .swiper-slide > a {color: #fff;}
.index .sec02  .swiper-wrapper .swiper-slide .slide_img {width: 100%; height: 90%; overflow: hidden; }
.index .sec02  .swiper-wrapper .swiper-slide .text_box {position: absolute; bottom: 0; right: 0; background: var(--main-color); width: 100%; max-width: min(75vw, 900px);
border-radius: 86px 0 0 0; color: #fff; padding: 3.4em 3em 2.2em 7.6em; opacity: 0; display: flex; flex-direction: column;}
/*transform: translateX(900px); transition: all 1s;*/
.index .sec02  .swiper-wrapper .swiper-slide .text_box .text_title h2 {color: #fff; font-size: 4.5em; font-weight: bold; line-height: 1.2; }
.index .sec02  .swiper-wrapper .swiper-slide .text_box .text_title p.text1 {color: #fff; font-size: max(13px, 1.6rem); line-height: 1.4; margin-top: 5px;}

.index .sec02 .swiper-slide .text_box a.view_btn {color: inherit; position: relative; font-size: 14px; margin-top: 20px; display: block; transition: all 0.3s; align-self: end;}
.index .sec02 .swiper-slide .text_box a.view_btn > span:first-child {margin-right: 3px;}
.index .sec02 .swiper-slide .text_box a.view_btn .view_icon {position: relative; background: url(img/slide_view_icon.png) no-repeat; background-size: cover; background-position: center;
 width: 33px; height: 9px; display: inline-block;}

.index .sec02 .sec02_swiper .button-box {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1920 * 100vw ), calc(var(--font-size-pc) * 1px) );
position: absolute; width: 100%; height: 27px; bottom: 0; left: 0; z-index: 2;}
.index .sec02 .sec02_swiper .button-box .containerV1 {height: 100%;}
.index .sec02 .sec02_swiper .button-box .btn_wrap {position: relative; width: 84px; height: inherit;}
.index .sec02 .sec02_swiper .swiper-button-next {right: 0;}
.index .sec02 .sec02_swiper .swiper-button-prev {left: 0;}
.index .sec02 .sec02_swiper .swiper-button-next, .index .sec02 .sec02_swiper .swiper-button-prev {top: unset; bottom: 3px; width: 21px; height: 21px;
border-radius: 50%; border: 2px solid #ffb0c3; color: #ffb0c3;}
.index .sec02 .sec02_swiper .swiper-button-next:after, .index .sec02 .sec02_swiper .swiper-button-prev:after {font-size: 10px;}
.index .sec02 .sec02_swiper .button-box .swiper-pagination {bottom: 6px; font-size: 16px; color: #777; z-index: 1;}


/* active */
.index .sec02 .swiper-wrapper .swiper-slide-active {opacity: 1;}
.index .sec02 .swiper-wrapper .swiper-slide-active .text_box {opacity: 1;}
.index .sec02  .swiper-wrapper .swiper-slide-active .slide_img {height: 100%; transition: height 1s;}
/*transform: translateX(0); transition-delay: 1s;*/


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

@media (max-width: 991px) {
	.index .sec02 .swiper-wrapper .swiper-slide .text_box {border-radius: 60px 0 0 0;}
}

@media (max-width: 650px) {
	.index .sec02 {font-size: min( calc( var(--font-size-mob) / 650 * 100vw ), calc(var(--font-size-pc) * 1px) );}
	.index .sec02 .swiper-wrapper .swiper-slide {height: auto; padding: 0 0 50px 0;}
	.index .sec02 .swiper-wrapper .swiper-slide .slide_img {height: auto;}
	.index .sec02 .swiper-wrapper .swiper-slide .text_box {position: relative; border-radius: unset; max-width: 100%; opacity: 1; padding: 2em 1.5em; background: transparent; color: #333;}
	.index .sec02 .swiper-wrapper .swiper-slide .text_box .text_title {position: relative;}
	.index .sec02 .swiper-wrapper .swiper-slide .text_box .text_title::after {content:""; position: absolute; width: 60%; height: 4px; background: var(--main-color); right: 0; bottom: -17px; border-radius: 40px;}
	.index .sec02 .swiper-slide .text_box a.view_btn {font-size: 20px; margin-top: 30px; align-self: start;}
	.index .sec02 .swiper-slide .text_box a.view_btn .view_icon {background: url(img/slide_view_icon_block.png) no-repeat; bottom: 1px; left: 0; animation: icon-move 0.3s infinite alternate ;}

	@keyframes icon-move {
		to {left: 3px;}
	}
	
	.index .sec02 .sec02_swiper .button-box {height: auto;}
	.index .sec02 .sec02_swiper .button-box .btn_wrap {margin: 0 auto; width: 110px;}
	.index .sec02 .sec02_swiper .swiper-button-next, 
	.index .sec02 .sec02_swiper .swiper-button-prev {width: 31px; height: 31px;}
	.index .sec02 .sec02_swiper .swiper-button-next:after,
	.index .sec02 .sec02_swiper .swiper-button-prev:after {font-size: 16px;}
	.index .sec02 .sec02_swiper .button-box .swiper-pagination {bottom: 12px;}

}

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



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

footer > .contents_box { padding: 0 0 4rem 0; }
footer > .contents_box .info_box {background: #f9f9f9; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb;}
footer > .contents_box .info_box .containerV1 {display: flex; justify-content: space-between; padding: 13.5px 0; align-items: center;}
footer > .contents_box .info_box .ft_nav {display: flex; gap: 10px 3.2rem;}
footer > .contents_box .info_box .ft_nav li a {font-size: max(13px, 1.6rem); color: #999; line-height: 1.2; }
footer > .contents_box .info_box .ft_nav li a:hover {text-decoration: underline;}

footer > .contents_box .info_box .info {display: flex; text-align: center;}
footer .info > .item { position:relative;}
footer .info > .item > a { display:block; color:#ccc; font-size:max(10px, 1.4rem); line-height:1.2; margin-right:15px;  }
footer .info > .item > a:hover {color: #777;}

footer .contents { display:flex; justify-content: space-between; width: 100%; margin-top: 4rem;}
footer .item2 {display: flex; flex-direction: column;}
footer .item2 > div { line-height: 1.8; font-size: max(13px, 1.6rem);; color: #777; display: flex;	flex-wrap: wrap;}  /*211223폰트 사이즈 13에서 14로 수정.*/
footer .item2 > div a { color: inherit; }
footer .item2 > .text > span { position: relative; margin-right:2.5rem; font-weight: inherit;  }
footer .item2 > .copy {font-weight: inherit; color: #777;}
footer .item2 > .copy a { color: inherit; }

footer .item3 .sns_box {display: flex; gap: 30px;}
footer .item3 .sns_box > li:first-child img {position: relative; bottom: 3px;}
footer .item3 .sns_box > li > a {color: #777; font-size: 25px;}
footer .item3 .sns_box > li > a > svg {width: 27px; height: 27px; }
footer .item3 .sns_box > li > a > svg path {fill: #777;}

@media (max-width:1230px) {
	footer > .contents_box .info_box .containerV1 {padding: 13.5px 15px;}
}

@media (max-width:1200px) {
footer .item2 { width: calc( 75% - 40px ); }
}

@media (max-width:991px) {
footer .contents {justify-content: center; gap: 20px 0; flex-direction: column; align-items: center;}
footer .item2 { width: 100%; }
footer .item2 > div {justify-content: center;}
}

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

@media (max-width: 695px) {
	footer > .contents_box .info_box .containerV1 { justify-content: center; gap: 17px 0; flex-direction: column;}
	footer > .contents_box .info_box .ft_nav {flex-wrap: wrap; justify-content: center;}
	footer > .contents_box .info_box .info {display: none;}
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/







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


/* 게시판 및 게시판헤드 등 기타 버튼들 기본컬러 변경 */
.btn.btn-color {border: 1px solid #2d66d3; border-color: 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);}


/*아미나 헤드 오른쪽 메뉴 이름 가리기*/
@media (max-width: 550px) {
	.responsive .amina-header .header-breadcrumb {display: none;}
}