@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;
}
label {margin-bottom: 0;}
.form-group label {margin-bottom: 10px;}

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 : 1400px;
	
	--main-color : #5555e0;
}

/* 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: auto; z-index: 1000; transition: all 1s; background: #fff; border-bottom: 1px solid #e5e5e5;}
#header > .containerV1 {display: flex; flex-direction: column;}
#header > .containerV1 > * {width: 100%;}


/*헤드 상단 로그인 마이메뉴박스*/
	#header .head_topBox {display: flex; justify-content: center; position: relative; padding: 5rem 0; transition: all 0.5s;}
	#header .head_topBox .logo_box {display: flex; align-items: center; gap: 0 13px;}
	#header .logo_box #logo a {display: block;}
	#header .logo_box .input_span {width: 30rem; border-radius: 100px;}
	#header .logo_box .input_span .input-group {border: 1px solid #000; border-radius: 100px; overflow: hidden; display: flex; align-items: center;
	padding: 0.85rem 2rem 0.85rem 3rem;} 
	#header .logo_box .input_span input {width: 100%; display: block; font-size: 1.3rem; border-style: none; background: transparent; padding: 0; box-shadow: unset; color: #333;}
	#header .logo_box .input_span input::placeholder {font-size: max(12px, 1.5rem); color: #aaa;}
	#header .logo_box .input_span .input-group-append button {border-style: none; background: none; padding: 0;}
	#header .logo_box .input_span .input-group-append button:hover {background: none;}
	#header .logo_box .input_span i {color: #aaa; font-size: 15px;}
	#header .logo_box .input_span .input_close_btn {display: none;}

	#header .login_list .login_box {position: absolute; right: 0; top: 5px; display: flex; align-items: center; gap: 0 20px;}
	#header .login_list .login_box > li {position: relative; font-size: max(13px, 1.5rem); color: #000; line-height: 1.2;}
	#header .login_list .login_box > li a {transition: all 0.3s;}
	#header .login_list .login_box > li a:hover {color: var(--main-color);}
	#header .login_list .login_box > li:first-child:after {content:"|"; position: absolute; top: 50%; transform: translateY(-50%); right: -13px;}
	#header .login_list .my_list_box {position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; }
	#header .login_list .my_list_box li {display: flex; align-items: flex-end; height: 46px; margin-right: 12px;}
	#header .login_list .my_list_box li:nth-child(2) {margin-right: 16px; position: relative;}
	#header .login_list .my_list_box li:nth-child(2) .list_number {display: block; position: absolute; top: -4px; right: 7px; border-radius: 50%; width: 17px; height: 17px; background: #069ddc; color: #fff;
	text-align: center; line-height: 17px; font-size: 10px;}
	#header .login_list .my_list_box li:last-child {margin-right: 0;}
	#header .login_list .my_list_box li a {display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: space-around;}
	#nav .nav_topBox .login_list_mob {display: none;}


/*모바일 검은 배경*/
	#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%; height: 100%; display:flex; justify-content:space-between; position: relative; z-index: 2; padding-bottom: 17px;}
#nav {position: relative; display: flex; width: 100%;}

#header .itemBox > .input_on_btn {display: none;}


/*pc menu btn*/
	#nav .pc_menu_btn {width: 20px; height: 17px; cursor: pointer; display: flex; align-items: center; position: absolute; left: 0; top: 35%; transform: translateY(-50%);}
	#nav .pc_menu_btn::before, #nav .pc_menu_btn::after {content:""; position: absolute; width: 100%; background: #000; height: 2px; left: 0; transition: all 0.5s; }
	#nav .pc_menu_btn::before {top: 0;}
	#nav .pc_menu_btn::after {bottom: 0;}
	#nav .pc_menu_btn .btn_line {position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; background: #000; height: 2px; transition: all 0.5s;}

	/*pc menu active*/
	#nav .pc_menu_btn.pc_on .btn_line {width: 0;}
	#nav .pc_menu_btn.pc_on::before {transform: rotate(45deg); top: 8px;} 
	#nav .pc_menu_btn.pc_on::after {transform: rotate(-45deg); bottom: 7px;}



/*main_menu---------------------------------------------------------------------------*/

#nav .nav_inner { display:flex; align-items:center; width: 100%; justify-content: center;}
#nav .main-menu {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
display: flex; position: relative;}

#nav .main-menu > li {position: relative; margin-right: max(30px, 5em); padding: 0 0 10px 0;}
#nav .main-menu > li:last-child {margin-right: 0;}
#nav .main-menu > li > a {
display: block; color: #000;  font-size: max(14px, 1.6em); font-weight: 600; height: 100%; line-height: 1.2;
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: -5px; width: 0; height: 2px; background: var(--main-color); transition:0.5s;
}





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


/* pc menu btn 버튼 클릭시 나오는 서브메뉴 */
	#header > .pc_submenu_bg {background: #fff; transition: height 0.5s; height: 1px; overflow: hidden;
	width: 100%; position: absolute; left: 0; top: 100%; border-top: 1px solid #eee; box-shadow: inset 0 0 20px rgb(0 0 0 / 5%);}
	#header > .pc_submenu_bg .containerV1 {display: flex; width: 100%; justify-content: space-between;}

	#header > .pc_submenu_bg .inner_box {
	--font-size-pc: 10;
	--font-size-mob: 10;
	font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) ); width: calc(100% / 10 - 10px); text-align: center; line-height: 1.2;
	padding-top: 25px;}

	#header > .pc_submenu_bg .inner_box .inner_title {font-size: max(14px, 1.6em); font-weight: bold; line-height: 1.2; 
	border-bottom: 1px solid rgba(119,119,119,0.3); padding-bottom: 10px; margin-bottom: 15px; pointer-events: none; display: block;}  
	#header > .pc_submenu_bg .inner li {margin-bottom: 15px;}
	#header > .pc_submenu_bg .inner li a {font-size: 14px; color: #777; font-weight: 500;}
	#header > .pc_submenu_bg .inner li a:hover {color: var(--main-color);}

	#header > .pc_sub_on {height: 0 !important;}


#nav .sub-menu {
display: block; position: absolute; left: 50%; top: 130%; transform: translateX(-50%); width: 200px; padding: 0; overflow: hidden;
height: 0px; transition: all 0.3s; background: #fff; text-align: center; border-radius: 20px; box-shadow: 10px 10px 20px rgb(0 0 0 / 10%);}

#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: 14px; color: inherit; transition: all 0.5s; position: relative; left: 0; padding: 10px 15px; font-weight: bold;
background: transparent;}



/*기능---------------------------------------------------------------------------*/


/* hover */
#nav .main-menu > li:hover .sub-menu {height: calc( var(--i) * 40px + 30px ); padding: 10px 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); background: #cccccc40;}



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



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


/* 모바일 버튼 */
.open_btn, .close_btn {display: none;} 



/*모바일--------------------------------------------------------------------------------------------------------------------*/
@media all and (max-width: 1250px) {
	
	#header .containerV1 {height: 100%; flex-direction: unset; align-items: center;}
	
	#header .head_topBox {padding: 2rem 0; justify-content: start; position: static;}
	#header .logo_box #logo {width: 150px;}
	#header .logo_box .input_span {position: absolute; width: 100%; left: 0; top: -100%; background: #fff; 
	box-shadow: 0 0 10px rgb(0 0 0 / 20%); border-radius: unset; z-index: 10; transition: top 0.3s;}
	#header .logo_box .input_span i {position: relative; top: 3px;}
	#header .logo_box .input_span .input-group {border-radius: unset; border: none; padding: 1.5rem 2rem; gap: 0 10px;}
	#header .logo_box .input_span input {order: 2; font-size: 15px;}
	#header .logo_box .input_span .input-group-append {order: 1;}
	#header .login_list {display: none;}

	#header .itemBox {align-items: center; width: fit-content; padding-bottom: 0; gap: 0 10px;}
	#nav .pc_menu_btn {display: none;}
	#header > .pc_submenu_bg {display: none;}

	/*바깥메뉴 검색창 열기 버튼  */
	#header .itemBox > .input_on_btn {display: block; color: #333; font-size: 20px; cursor: pointer;}
	#header .logo_box .input_span .input_close_btn {display: block; order: 3; cursor: pointer;}

	/* 바깥 검색창 열기/닫기 */
	#header .logo_box .search_on {top: 0;}


	#nav {
	background-color: #fff; width: 19em; 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%; background: #fff; padding:22px 0;}

/*모바일 로그인 마이메뉴박스*/
	#nav .nav_topBox .login_list_mob {display: flex; position: relative; width: 100%; flex-direction: column; gap: 15px 0;}
	#nav .nav_topBox .login_list_mob .my_list_box {display: flex; width: 100%; justify-content: space-around; padding-bottom: 10px; border-bottom: 1px solid #eee;}
	#nav .nav_topBox .login_list_mob .my_list_box li {display: flex; align-items: flex-end; height: 46px; width: calc(100% / 3); justify-content: center; }
	#nav .nav_topBox .login_list_mob .my_list_box li:nth-child(2) { position: relative;}
	#nav .nav_topBox .login_list_mob .my_list_box li:nth-child(2) .list_number {display: block; position: absolute; top: -7px; right: 17px; border-radius: 50%; width: 17px; height: 17px; background: #069ddc; color: #fff;
	text-align: center; line-height: 17px; font-size: 10px;}
	#nav .nav_topBox .login_list_mob .my_list_box li a {display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: space-around;}

	#nav .nav_topBox .login_list_mob .login_box {display: flex; align-items: center; gap: 0 20px; justify-content: space-around;}
	#nav .nav_topBox .login_list_mob .login_box > li {position: relative; font-size: max(13px, 1.5rem); color: #000; line-height: 1.2;}
	#nav .nav_topBox .login_list_mob .login_box > li a {transition: all 0.3s;}
	#nav .nav_topBox .login_list_mob .login_box > li a:hover {color: var(--main-color);}
	#nav .nav_topBox .login_list_mob .login_box > li:first-child:after {content:"|"; position: absolute; top: 50%; transform: translateY(-50%); right: -55px;}

	#nav .nav_topBox .input_span {width: 100%; background: #f7f7f7; padding: 10px 0;}
	#nav .nav_topBox .input_span .input-group {overflow: hidden; display: flex; align-items: center; padding: 0.85rem 10px 0.85rem; background: #fff; gap: 0 8px;} 
	#nav .nav_topBox .input_span input {width: 100%; display: block; font-size: 15px; border-style: none; background: transparent; padding: 0; box-shadow: unset; color: #333;}
	#nav .nav_topBox .input_span input::placeholder {font-size: max(12px, 1.5rem); color: #aaa;}
	#nav .nav_topBox .input_span .input-group-append button {border-style: none; background: none; padding: 0; position: relative; top: 2px;}
	#nav .nav_topBox .input_span .input-group-append button:hover {background: none;}
	#nav .nav_topBox .input_span i {color: #aaa; font-size: 15px;}

	/* 모바일 검색창 */
	

/*모바일 로그인 마이메뉴박스 끝*/	
 
	

	#nav .nav_inner { 
	width: 100%; height: 100%; overflow-x: hidden; overflow-y:auto; position: absolute;  top:0; 
	flex-direction:column; justify-content:flex-start; align-items:stretch;
	}

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

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

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



/*main_menu---------------------------------------------------------------------------*/
	#nav .main-menu { display: block; padding: 0 20px;}
	#nav .main-menu > li { margin-left: 0; width: 100%; overflow: hidden; cursor: pointer;}
	#nav .main-menu > li > a { font-weight: 500; padding:10px 10px 15px; color: #333; position: relative; pointer-events:none; height: auto; line-height: 1; font-size: 16px;
	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(--main-color); display: inline-block; position: absolute; right: 15px; top: 12px; 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; border-radius: unset;}
	#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: 9px 10px; position: relative; transition: all 0.3s;
	text-align: left; left: 0; font-size: 15px;
	}

	/*	pc 메뉴 효과 지움*/
	#header.header_full {height: auto;}
	#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);}
	#header.scroll .head_topBox {padding: 2rem 0;}

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

	
/*	서브메뉴 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(180deg); }



	/* 해당페이지 일때 */
	#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; } 
}

@media (max-width: 991px) {
	#nav .main-menu > li > .sub-menu > li:hover > a {color: #333; background: #fff;}
}


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



/*--------------------------------------------------- 인덱스세팅 ----------------------------------------------------------------------------*/
.index .title-V1 {
--font-size-pc: 50;
--font-size-mob: 50;
font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px) );
font-weight: bold; line-height: 1.2; 
}

.index .title-V2 {
--font-size-pc: 40;
--font-size-mob: 40;
font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px) );
font-weight: bold; color: #000; line-height: 1.2;
}



/* sec01------------------------ */

/* radio 태그 공통 */
.index .tab_active_box input[type=radio] {display: none;}

.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, 10rem) 0 max(50px, 12rem) 0; background: #fff;}
.index .sec01 .titleBox {text-align: center; margin-bottom: 3em;}
.index .sec01 .containerV2 {position: relative;}
.index .sec01 .label_box {display: flex; gap: 0 3em; margin: 0 auto; width: fit-content;}
.index .sec01 .label_box label {cursor: pointer; font-size: 2em; font-weight: bold; color: #000; transition: all 0.3s; position: relative;}
.index .sec01 .label_box label span {position: relative; z-index: 2;}
.index .sec01 .label_box label::before {content:""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 110%; height: 14px;
border-radius: 50%; background: #ccccf6; z-index: 1; display: none;}
.index .sec01 .tab_container {
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
position: relative; margin: 5.6em 0 0 0; padding-bottom: 0;}
.index .sec01 .tab_container li {width: 100%; overflow: hidden;
padding: 0 10px 10px; display: none;}


/* tab active */
.index .sec01 .tab_active_box > #sec01_tab01:checked ~ .label_box .sec01_label01 {color: var(--main-color);}
.index .sec01 .tab_active_box > #sec01_tab01:checked ~ .label_box .sec01_label01::before {display: block;}
.index .sec01 .tab_active_box > #sec01_tab02:checked ~ .label_box .sec01_label02 {color: var(--main-color);}
.index .sec01 .tab_active_box > #sec01_tab02:checked ~ .label_box .sec01_label02::before {display: block;}
.index .sec01 .tab_active_box > #sec01_tab03:checked ~ .label_box .sec01_label03 {color: var(--main-color);}
.index .sec01 .tab_active_box > #sec01_tab03:checked ~ .label_box .sec01_label03::before {display: block;}
.index .sec01 .tab_active_box > #sec01_tab04:checked ~ .label_box .sec01_label04 {color: var(--main-color);}
.index .sec01 .tab_active_box > #sec01_tab04:checked ~ .label_box .sec01_label04::before {display: block;}

.index .sec01 .tab_active_box > #sec01_tab01:checked ~ .tab_container > li.tab_item01,
.index .sec01 .tab_active_box > #sec01_tab02:checked ~ .tab_container > li.tab_item02,
.index .sec01 .tab_active_box > #sec01_tab03:checked ~ .tab_container > li.tab_item03,
.index .sec01 .tab_active_box > #sec01_tab04:checked ~ .tab_container > li.tab_item04 {display: block;}


/* sec02------------------------ */

.index .sec02 {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
padding: max(50px, 8.5rem) 0 max(50px, 9.2rem) 0; background: #f7f7f7; }

.index .sec02 .containerV1 {position: relative;}
.index .sec02 .titleBox {position: absolute; left: 15px; top: 0;}
.index .sec02 .titleBox .text1 {
--font-size-pc: 20;
--font-size-mob: 20;
font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px)); color: #7d7d7d; line-height: 1.2; margin-bottom: 0.2em;}
.index .sec02 .titleBox .title-V1 {color: var(--main-color); text-indent: -2px;}
.index .sec02 .label_box {
font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px)); text-align: center;
padding-top: 100px; display: flex; gap: 0 3.8em; width: 100%; justify-content: flex-end; border-bottom: 1px solid #d6d6d6;}
.index .sec02 .label_box label {font-size: 1.8em; cursor: pointer; font-weight: bold; color: #000; transition: all 0.3s; position: relative; padding-bottom: 13px; line-height: 1.2;}
.index .sec02 .label_box label span {position: relative; z-index: 2;}
.index .sec02 .label_box label::before {content:""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 3px;
 background: var(--main-color); z-index: 1; display: none;}
.index .sec02 .tab_container {
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
position: relative; margin: 4em 0 0 0;}
.index .sec02 .tab_container li {width: 100%; display: none;}

/* tab active */
.index .sec02 .tab_active_box > #sec02_tab01:checked ~ .label_box .sec02_label01 {color: var(--main-color);}
.index .sec02 .tab_active_box > #sec02_tab01:checked ~ .label_box .sec02_label01::before {display: block;}
.index .sec02 .tab_active_box > #sec02_tab02:checked ~ .label_box .sec02_label02 {color: var(--main-color);}
.index .sec02 .tab_active_box > #sec02_tab02:checked ~ .label_box .sec02_label02::before {display: block;}
.index .sec02 .tab_active_box > #sec02_tab03:checked ~ .label_box .sec02_label03 {color: var(--main-color);}
.index .sec02 .tab_active_box > #sec02_tab03:checked ~ .label_box .sec02_label03::before {display: block;}
.index .sec02 .tab_active_box > #sec02_tab04:checked ~ .label_box .sec02_label04 {color: var(--main-color);}
.index .sec02 .tab_active_box > #sec02_tab04:checked ~ .label_box .sec02_label04::before {display: block;}

.index .sec02 .tab_active_box > #sec02_tab01:checked ~ .tab_container > li.tab_item01,
.index .sec02 .tab_active_box > #sec02_tab02:checked ~ .tab_container > li.tab_item02,
.index .sec02 .tab_active_box > #sec02_tab03:checked ~ .tab_container > li.tab_item03,
.index .sec02 .tab_active_box > #sec02_tab04:checked ~ .tab_container > li.tab_item04 {display: block;}


.index .sec02 .sec_btn {
--font-size-pc: 15;
--font-size-mob: 15;
font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) ); transition: background 0.3s;  border: 3px solid transparent; box-sizing: border-box;
width: 13.3333em; height: 4em; background: var(--main-color); color: #fff; display: flex; justify-content: center; align-items: center; gap: 0 5px; border-radius: 10px; margin: 2rem auto 0;}

.index .sec02 .sec_btn  i {font-size: 1.2em; transition: 0.5s; position: relative; left: 0; }

.index .sec02 .sec_btn:hover {background: #07a4e9;}
.index .sec02 .sec_btn:hover i {animation: i-move 0.3s infinite alternate;}

@keyframes i-move {
	to {left: 3px;}
}	


@media (max-width: 991px) {
	.index .sec02 .titleBox {position: relative; left: unset; top: unset;}
	.index .sec02 .label_box {padding-top: 7em; justify-content: space-evenly; align-items: end; gap: 0 15px;}
	.index .sec02 .sec_btn:hover {background: var(--main-color);}

	@keyframes i-move {
		to {left: 0;}
	}	
}

@media (max-width: 768px) {
	.index .sec02 .titleBox {text-align: center;}
	.index .sec02 .sec_btn {width: 100%; max-width: 580px;}
}



/* sec03------------------------ */

.index .sec03 {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
background: #FFFAC3;}

.index .sec03 .containerV1 {
	display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; padding: 4.8rem 15px 3.6rem;
	align-items: center;
}

.index .sec03 .titleBox {color: #000; font-weight: bold; line-height: 1.2; width: fit-content; padding-left: 20em;}

.index .sec03 .titleBox h1 {
--font-size-pc: 45;
--font-size-mob: 45;
font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px) );
color: inherit; line-height: 1.3; font-weight: inherit;
}


.index .sec03 .item_img {
font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px) ); overflow: hidden;
position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 1;}
.index .sec03 .item_img::before {position: absolute; content:""; top: 50%; left: 50%; transform: translate(-50%, -50%);
background: url(img/sec03_flower.png) no-repeat; background-size: cover; background-position: center; width: 505px; height: 250px;}

.index .sec03 .item_img img {position: relative; z-index: 2;}

@media (max-width: 1230px) {
	.index .sec03 .titleBox {padding-left: 0;}
}

@media (max-width: 991px) {
	.index .sec03 .titleBox {text-align: center;}
	.index .sec03 .containerV1 {grid-template-columns: repeat(1, 1fr); gap: 30px 0; gap: 7em 0;}
	.index .sec03 .item_img img {right: 5px;}
}


/* sec04------------------------ */

.index .sec04 {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
padding: max(50px, 12rem) 0 max(50px, 13rem) 0;
}

.index .sec04 .title-V2 {text-align: center; margin-bottom: 1.625em;}


/* sec05------------------------ */


.index .sec05 {
--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, 10rem) 0 max(50px, 12rem) 0; background: #fff;
}
.index .sec05 .titleBox {text-align: center; margin-bottom: 3em;}
.index .sec05 .containerV2 {position: relative;}
.index .sec05 .label_box {display: flex; gap: 0 3em; margin: 0 auto; width: fit-content;}
.index .sec05 .label_box label {cursor: pointer; font-size: 2em; font-weight: bold; color: #000; transition: all 0.3s; position: relative;}
.index .sec05 .label_box label span {position: relative; z-index: 2;}
.index .sec05 .label_box label::before {content:""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 110%; height: 14px;
border-radius: 50%; background: #ccccf6; z-index: 1; display: none;}
.index .sec05 .tab_container {
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
position: relative; margin: 3.6em 0 0 0;}
/* position: absolute; left: 0; top: 0; height: 100%; padding-bottom: 114em; */ 
.index .sec05 .tab_container li {width: 100%; overflow: hidden; 
padding: 0 10px 10px; display: none;}
/* opacity: 0; visibility: hidden; z-index: -1; transition: all 0.3s; */ 


/* tab active */
.index .sec05 {
--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.5rem) 0 max(50px, 7.5rem) 0; background: #f8f8ff;}
.index .sec05 .tab_active_box > #sec05_tab01:checked ~ .label_box .sec05_label01 {color: var(--main-color);}
.index .sec05 .tab_active_box > #sec05_tab01:checked ~ .label_box .sec05_label01::before {display: block;}
.index .sec05 .tab_active_box > #sec05_tab02:checked ~ .label_box .sec05_label02 {color: var(--main-color);}
.index .sec05 .tab_active_box > #sec05_tab02:checked ~ .label_box .sec05_label02::before {display: block;}
.index .sec05 .tab_active_box > #sec05_tab03:checked ~ .label_box .sec05_label03 {color: var(--main-color);}
.index .sec05 .tab_active_box > #sec05_tab03:checked ~ .label_box .sec05_label03::before {display: block;}
.index .sec05 .tab_active_box > #sec05_tab04:checked ~ .label_box .sec05_label04 {color: var(--main-color);}
.index .sec05 .tab_active_box > #sec05_tab04:checked ~ .label_box .sec05_label04::before {display: block;}
.index .sec05 .tab_active_box > #sec05_tab05:checked ~ .label_box .sec05_label05 {color: var(--main-color);}
.index .sec05 .tab_active_box > #sec05_tab05:checked ~ .label_box .sec05_label05::before {display: block;}

.index .sec05 .tab_active_box > #sec05_tab01:checked ~ .tab_container > li.tab_item01,
.index .sec05 .tab_active_box > #sec05_tab02:checked ~ .tab_container > li.tab_item02,
.index .sec05 .tab_active_box > #sec05_tab03:checked ~ .tab_container > li.tab_item03,
.index .sec05 .tab_active_box > #sec05_tab04:checked ~ .tab_container > li.tab_item04,
.index .sec05 .tab_active_box > #sec05_tab05:checked ~ .tab_container > li.tab_item05{display: block;}


.index .sec05 .sec_btn {
--font-size-pc: 15;
--font-size-mob: 15;
font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) ); transition: background 0.3s;  border: 3px solid transparent; box-sizing: border-box;
width: 13.3333em; height: 4em; background: var(--main-color); color: #fff; display: flex; justify-content: center; align-items: center; gap: 0 5px; border-radius: 10px; margin: 2rem auto 0;}

.index .sec05 .sec_btn  i {font-size: 1.2em; transition: 0.5s; position: relative; left: 0; }

.index .sec05 .sec_btn:hover {background: #07a4e9;}
.index .sec05 .sec_btn:hover i {animation: i-move 0.3s infinite alternate;}

@keyframes i-move {
	to {left: 3px;}
}

@media (max-width: 991px) {
	.index .sec05 .label_box {flex-wrap: wrap; justify-content: center; gap: 1.5em 3em;}

	.index .sec05 .sec_btn:hover {background: var(--main-color);}

	@keyframes i-move {
		to {left: 0;}
	}	
}

@media (max-width: 768px) {
	.index .sec05 .sec_btn {width: 100%; max-width: 580px;}
}


/* sec06 ------------------------ */


.index .sec06 {
--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, 10.5rem) 0 max(50px, 10.5rem) 0; background: #fff; background: #fbfbfb;
}

.index .sec06 .titleBox {text-align: center; margin-bottom: 6.7rem;}
.index .sec06 .titleBox h1 {}

.index .sec06 .sec_btn {
--font-size-pc: 15;
--font-size-mob: 15;
font-size: min( calc( var(--font-size-mob) / 450 * 100vw ), calc(var(--font-size-pc) * 1px) ); transition: background 0.3s;  border: 3px solid transparent; box-sizing: border-box;
width: 13.3333em; height: 4em; background: var(--main-color); color: #fff; display: flex; justify-content: center; align-items: center; gap: 0 5px; border-radius: 10px; margin: 2rem auto 0;}

.index .sec06 .sec_btn  i {font-size: 1.2em; transition: 0.5s; position: relative; left: 0; }

.index .sec06 .sec_btn:hover {background: #07a4e9;}
.index .sec06 .sec_btn:hover i {animation: i-move 0.3s infinite alternate;}

@keyframes i-move {
	to {left: 3px;}
}	

@media (max-width: 991px) {
	.index .sec06 .sec_btn:hover {background: var(--main-color);}

	@keyframes i-move {
		to {left: 0;}
	}	
}

@media (max-width: 768px) {
	.index .sec06 .sec_btn {width: 100%; max-width: 580px;}
}

.index .sec06 .widget_box {overflow: hidden; width: 100%; padding: 0 10px 10px;}






/* sec07 ------------------------ */

.index .sec07 {
--font-size-pc: 10;
--font-size-mob: 10;
font-size: min( calc( var(--font-size-mob) / 1430 * 100vw ), calc(var(--font-size-pc) * 1px) );
padding: max(50px, 8.6rem) 0 max(50px, 6.6rem) 0; background: #fff;
}

.index .sec07 > .containerV1 {display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.8rem;}
.index .sec07 .titleBox {display: flex; align-items: center; justify-content: space-between; margin-bottom: 3em;}
.index .sec07 .titleBox .more_btn {display: block; width: 6em; height: 6em; background: var(--main-color); border-radius: 10px; text-align: center; line-height: 6em; color: #fff;}
.index .sec07 .titleBox .more_btn i {font-size: 5em; position: relative; top: 0.07em;}

.index .sec07 .item02 {padding-left: 24px;}
.index .sec07 .item02 .titleBox {margin-bottom: 4.8em; padding-top: 3px;}
.index .sec07 .item02 .contact_box .contact_item01 {display: flex; font-weight: bold;}
.index .sec07 .item02 .contact_item01 .unit01 {width: 100%; max-width: 300px; padding-top: 1.5em;}
.index .sec07 .item02 .contact_item01 .unit01 h3 {font-size: 2em; font-weight: inherit; color: #1b1b1b;} 
.index .sec07 .item02 .contact_item01 .unit01 h2 {font-size: 4em; font-weight: inherit; color: var(--main-color); margin-top: 0.375em;} 
.index .sec07 .item02 .contact_item01 .unit01 p.text1 {font-size: 1.6em; color: #626262; font-weight: inherit; margin-top: 0.9em; line-height: 1.6;}
.index .sec07 .item02 .contact_item01 .unit02 {width: 100%; max-width: 352px; display: flex; flex-direction: column; gap: 13px; align-items: flex-end; padding-right: 3em;}
.index .sec07 .item02 .contact_item01 .unit02 li {width: 100%; max-width: 273px; height: 70px; border-radius: 15px; font-weight: bold;}
.index .sec07 .item02 .contact_item01 .unit02 li a {display: block; width: 100%; height: 100%; display: flex; align-items: center; padding-left: 2.5em; gap: 0 2em;}
.index .sec07 .item02 .contact_item01 .unit02 li a span {font-size: 1.8em; font-weight: inherit; }
.index .sec07 .item02 .contact_item01 .unit02 li.unit_li01 {background: #fee800;}
.index .sec07 .item02 .contact_item01 .unit02 li.unit_li01 a span {color: #381e1f;}
.index .sec07 .item02 .contact_item01 .unit02 li.unit_li02 {background: #5555e0;}
.index .sec07 .item02 .contact_item01 .unit02 li.unit_li02 a span {color: #fff;}

.index .sec07 .item02 .contact_item02 {margin-top: 30px; display: flex; width: 100%; max-width: 620px;}
.index .sec07 .item02 .contact_item02 li {position: relative; width: 33%;}
.index .sec07 .item02 .contact_item02 li::before {content:""; position: absolute; left: 0; width: 1px; height: 65%; background: #e9e9e9; top: 50%; transform: translateY(-50%);}
.index .sec07 .item02 .contact_item02 li:last-child:after {content:""; position: absolute; right: 0; width: 1px; height: 65%; background: #e9e9e9; top: 50%; transform: translateY(-50%);}
.index .sec07 .item02 .contact_item02 li > a {display: block; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: end; gap: 15px 0;}
.index .sec07 .item02 .contact_item02 li > a span {font-size: 1.5em; color: #535353; line-height: 1.2; font-weight: bold;}

@media (max-width: 1250px) {
	.index .sec07 {font-size: min( calc( var(--font-size-mob) / 500 * 100vw ), calc(var(--font-size-pc) * 1px) );}
	.index .sec07 > .containerV1 {grid-template-columns: repeat(1, 1fr);}
	.index .sec07 .item02 {padding-left: 0; margin-top: 5em;}
	.index .sec07 .item02 .contact_box .contact_item01 {justify-content: center; gap: 6em 30px;}
	.index .sec07 .item02 .contact_item02 {max-width: 100%;}
	.index .sec07 .item02 .contact_item01 .unit02 {padding-right: 0;}
	.index .sec07 .item02 .contact_item01 .unit02 li {max-width: 100%;}
	.index .sec07 .item02 .contact_item01 .unit02 li a {padding-left: 5.5em;}
}

@media (max-width: 768px) {
	.index .sec07 .item02 .contact_box .contact_item01 { flex-direction: column;}
	.index .sec07 .item02 .contact_item01 .unit02 {max-width: 100%;}
	.index .sec07 .item02 .contact_item02 {gap: 20px 0;}
	.index .sec07 .item02 .contact_item02 li {width: 50%;}
	.index .sec07 .item02 .contact_item02 li:nth-child(2):after {content:""; position: absolute; right: 0; width: 1px; height: 65%; background: #e9e9e9; top: 50%; transform: translateY(-50%);}
}

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



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

footer > .contents_box { padding: 2.5rem 0; }
footer .item1 {width: 18%; display: flex; justify-content: center;}

footer .contents { display:flex; flex-wrap:wrap; width: 100%; gap: 0 3.2rem;}
footer .item2 {display: flex; flex-direction: column;}
footer .item2 > div { line-height: 1.8; font-size: 15px; color: #fff; display: flex;	flex-wrap: wrap;}
footer .item2 > div.list_box {font-weight: bold;}
footer .item2 > div.list_box > span {margin-right: 15px;}
footer .item2 > div a { color: inherit;}
footer .item2 > .text > span { position: relative; margin-right:1.5rem; font-weight: inherit;  }
footer .item2 > .text > span:after { content:'|'; position:absolute; right: -9px; top:50%; transform:translateY(-55%); font-weight: 300;}
footer .item2 > .text > span:last-child:after { display: none; }
footer .item2 > .copy {font-weight: inherit; color: #fff;}
footer .item2 > .copy a { color: inherit; }



@media (max-width:1040px) {
footer .item1 {width: auto;}
footer .contents {justify-content: center; gap: 20px 0;}
footer .item2 { width: 100%; }
footer .item2 > div {justify-content: center;}
}

@media (max-width: 991px) {
	footer .item2 > div.list_box {display: none;}
}

@media (max-width:768px) {
footer .item1 {display: none;}
footer .item2 .info {justify-content: center;}
footer .item2 > .text:not(:first-child) {display: flex; flex-direction: column;}
footer .item2 > .text:not(:first-child) > span { display:block;}
footer .item2 > .text:not(:first-child) > 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;}
}
/*--------------------------------------------------- 푸터세팅 끝 ----------------------------------------------------------------------------*/

/*쇼핑몰 본문 폼*/
.help-block {line-height: 1.4;}
.item-head .item-image {display: flex; justify-content: center;}
.item-head  > .row {margin-right: unset !important; margin-left: unset !important;}
.item-head .item-tag {line-height: 1.4 !important;}
form .option_item2 span {line-height: 1.3;}

/* 마이페이지 마진 빠진거 넣기 */
.table-responsive {margin-top: 10px;}

@media (max-width: 768px) {
	#it_sel_option #it_opt_added li .row div:first-child {margin-bottom: 10px;}	
}




/* 서브페이지 패딩 */
.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;}
}