@charset "utf-8";

/* loding bar start */
body {width: 100%; min-width: 120rem; }
#loading { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,1); z-index: 999;}
.rect_wrap { position: absolute; top: 50%; left: 50%; width: auto; height: 6rem; transform: translate(-50%,-50%);}
.rect_wrap > span{ display: inline-block; margin-right: 0.2rem; background: #333333; height: 100%; width: 0.8rem; -webkit-animation: loadingbar 1.2s infinite ease-in-out; animation: loadingbar 1.2s infinite ease-in-out;}
.rect_wrap > .rect:nth-child(2) { -webkit-animation-delay: -1.1s; animation-delay: -1.1s;}
.rect_wrap > .rect:nth-child(3) { -webkit-animation-delay: -1.0s; animation-delay: -1.0s;}
.rect_wrap > .rect:nth-child(4) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s;}
.rect_wrap > .rect:nth-child(5) { margin-right: 0; -webkit-animation-delay: -0.8s; animation-delay: -0.8s;}
@-webkit-keyframes loadingbar { 
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
	20% { -webkit-transform: scaleY(1.0) }
}
@keyframes loadingbar { 
	0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4);}
	20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); }
}
/* loding bar end */


/* header start */
header { position: fixed; top: 0; left: 0; width: 100%; background: ffffff; border-bottom: 0.1rem solid #e5e5e5; z-index: 100; backdrop-filter: blur(1rem); }
header.sticky { box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; background: rgba(255,255,255,0.6); scroll-behavior: smooth; border-bottom: 0; }
.header_wrap { margin: 0 auto; width: 120rem; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box;}
.logo_wrap { position: relative; }
.logo_wrap span { font-size: 3.8rem; font-weight: 700; }

nav > ul { display: flex; align-items: center; width: 100%; }
nav > ul > li { box-sizing: border-box; }

.nav_flip { position: relative; display: block; width: 12rem; height: 8rem; text-align: center; opacity: 1; font-weight: 500; box-sizing: border-box; }
.nav_flip > span { display: inline-block; line-height: 8rem; white-space: nowrap; }
.nav_flip > .back { position: absolute; top: 0; left: 0; transform: translateY(-50%) rotateX(90deg); width: 100%; font-size: 1.6rem; color: #FFFFFF; background: #000000; transition: all 0.6s ease; opacity: 0; }
.nav_flip > .back::after { position: absolute; content: ''; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 0.4rem; background: #00eeff; transition: all 0.2s ease 0.6s; }
.nav_flip > .front { position: absolute; top: 0; left: 0; transform: translateY(0) rotateX(0); width: 100%; padding: 0 1rem; font-size: 1.6rem; transition: all 0.6s ease; opacity: 1; box-sizing: border-box; }
.nav_flip:hover > .back { opacity: 1; transform: translateY(0) rotateX(0);}
.nav_flip:hover > .back::after { width: 100%; }
.nav_flip:hover > .front { opacity: 0; transform: translateY(50%) rotateX(90deg); }
.nav_flip.chk > .back { opacity: 1; transform: translateY(0) rotateX(0);}
.nav_flip.chk > .back::after { width: 100%; }
.nav_flip.chk > .front { opacity: 0; transform: translateY(50%) rotateX(90deg); }


.menu_btn { display: none; font-size: 3.4rem; }

#snb { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 50; }
.side_menu { position: absolute; top: 0; right: -100%; width: 100%; height: 100vh; background: #000000; z-index: 11; transition: all 0.3s ease 0.2s; z-index: 51; }


/* header end */

/* consult area start */
.consult_wrap { background-image: url('../img/consult_bg.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.consult_mant { width: 120rem; margin: 0 auto; padding: 7rem 0; text-align: center;}
.consult_mant > span { display: block; color: #FFFFFF; }
.consult_mant > span:nth-child(1) { font-size: 2.2rem; font-weight: 400; }
.consult_mant > span:nth-child(2) { margin-top: 2rem; font-size: 4rem; font-weight: 300; }
.consult_mant > span:nth-child(2) > em { font-weight: 500; }
.consult_mant > div { text-align: center; }
.consult_mant > div > a { margin-top: 3rem; display: inline-block; padding: 1.6rem 4rem; font-size: 2.2rem; font-weight: 500; background: #FFFFFF; border-radius: 3rem; transition: all 0.4s ease;}
.consult_mant > div > a:hover { background: #2D217A; color: #FFFFFF;}
/* consult area end */

/* footer start */

footer { background: #272727; }
.footer_wrap { margin: 0 auto; width: 120rem; padding: 5rem 0; }
.bt_logo_wrap > span { font-size: 3.6rem; font-weight: 800; color: #7a7a7a;}


.company_info_wrap { margin-top: 4rem; display: flex; align-items: center; }
.company_info_wrap > li { position: relative; font-size: 1.5rem; color: #7c7c7c; margin-right: 4rem; }
.company_info_wrap > li::after { position: absolute; content: ''; top: 50%; right: -2rem; transform: translateY(-40%); width: 0.1rem; height: 60%; background: #505050; }
.company_info_wrap > li:last-child:after { display: none; }

.copyright_wrap { margin-top: 2rem; }
.copyright_wrap > span { color: #7c7c7c; font-size: 1.6rem;}
.copyright_wrap > span > em { color: #919da3; font-weight: 500;}
/* footer end */

#floating_bn { position: fixed; bottom: 6.2rem; right: 1.6rem; z-index: 10; }
#floating_bn.active .request_btn { transform: scale(0); height: 0; visibility: hidden; opacity: 0; }

.cs_num_btn_wrap { position: relative;  }
.cs_num_btn { position: relative; width: 8rem; height: 8rem; border-radius: 50%; border: 0.1rem solid #767676; display: flex; align-items: center; justify-content: center; flex-direction: column; background: #ffffff; color: #161616; z-index: 3; cursor: pointer; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
.cs_num_btn > i { font-size: 3rem; }
.cs_num_btn > span {margin-top: 0.4rem; font-size: 1.4rem; }
.cs_num_btn > a { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: none; cursor: pointer; }

.cs_num_btn_pannel { position: absolute; display: inline-block; top: 0; left: -24rem; width: 32rem; height: 8rem; background: #ffffff; border: 0.1rem solid #767676; border-radius: 4rem; padding: 0 3rem; box-sizing: border-box; display: flex; align-items: center; visibility: hidden; opacity: 0; transition : all 0.5s ease; z-index: -1; pointer-events: none; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
.cs_num_btn_pannel.active { left: -33rem; visibility: visible; opacity: 1; z-index: -1; }
.p_icon { width: 4rem; font-size: 3rem; text-align: center; }
.p_number { margin-left: 1rem; width: calc(100% - 4rem - 1rem);}
.p_number > span:nth-child(1) { display: block; font-size: 2rem; font-weight: 700;}
.p_number > span:nth-child(2) { display: block; font-size: 1.2rem; }

.request_btn { position: relative; margin-top: 1rem; width: 8rem; height: 8rem; background: #161616; color: #ffffff; border-radius: 50%; border: 0.1rem solid #767676; display: flex; align-items: center; justify-content: center; flex-direction: column;  visibility: visible; opacity: 1; transition: all 0.5s ease; }
.request_btn > i { font-size: 3rem; }
.request_btn > span { margin-top: 0.4rem; display: block; font-size: 1.4rem; font-weight: 500; }
.request_btn > a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: inline-block; cursor: pointer; }

.top_move_btn { position: absolute; left: 0; bottom: -4rem; width: 100%; border: 0.1rem solid #767676; border-radius: 0.8rem; background: #ffffff; padding: 0.2rem; font-size: 1.6rem; text-align: center; cursor: pointer; visibility: hidden; opacity: 0; transition: opacity 0.5s ease, visibility 0.5s ease ; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
.top_move_btn.active { visibility: visible; opacity: 1; }
.top_move_btn span::before { content: '\25B2'; margin-right: 0.6rem; }

.pc_view { display: block; }
.m_view { display: none; }

@media screen and (max-width:1200px){

	#floating_bn { bottom: 4.2rem; right: 0; }

	.cs_num_btn_wrap { position: relative; }
	.cs_num_btn { width: 6rem; height: 6rem; }
	.cs_num_btn > i { font-size: 2.2rem; }
	.cs_num_btn > span { margin-top: 0; font-size: 1.2rem; }

	.cs_num_btn_pannel { height: 6rem; }
	.p_icon { width: 4rem; font-size: 3rem; }
	.p_number { margin-left: 1rem; width: calc(100% - 4rem - 1rem);}
	.p_number > span:nth-child(1) { display: block; font-size: 2rem; font-weight: 700;}
	.p_number > span:nth-child(2) { display: block; font-size: 1.2rem; }

	.request_btn { margin-top: 1rem; width: 6rem; height: 6rem; }
	.request_btn > i { font-size: 2.2rem; }
	.request_btn > span { margin-top: 0; display: block; font-size: 1.2rem; }

	.top_move_btn { bottom: -3.4rem; font-size: 1.4rem; }

}



@media screen and (max-width:767px){
	body { min-width: 36rem; }

	.header_wrap { width: 100%; padding: 0 1.6rem; height: 6rem;}
	.logo_wrap span { font-size: 2.8rem; }
	nav { display: none; }
	
	.menu_btn { display: block; font-size: 2.8rem; }	
	#snb.active { opacity: 1; visibility: visible; }
	#snb.active > .side_menu { right: 0; }
	
	.header_m_wrap { width: 100%; padding: 0 2rem; height: 6rem; color: #ffffff; display: flex; justify-content: space-between; align-items: center;}
	.logo_m_wrap > span { font-size: 2.8rem; color: #FFFFFF;}
	.menu_close_btn { display: block; font-size: 2.8rem; }	

	.nav_m { width: 100%; text-align: center; }
	.nav_m > ul {  height: calc(100vh - 6rem); display: flex; flex-direction: column; justify-content: center; }
	.nav_m > ul > li { display: block; text-align: center; margin: 1rem 0; }

	#snb .nav_flip { display: inline-block; width: 18rem; }
	#snb .nav_flip > span { color: #FFFFFF; }

	.consult_mant { width: 100%; margin: 0 auto; padding: 4rem 0; }
	.consult_mant > span { display: block; color: #FFFFFF; }
	.consult_mant > span:nth-child(1) { font-size: 1.4rem; }
	.consult_mant > span:nth-child(2) { margin-top: 1.6rem; font-size: 2.4rem; word-break: keep-all; }
	.consult_mant > div > a { margin-top: 2rem; display: inline-block; padding: 1rem 2.4rem; font-size: 1.8rem; }


	.footer_wrap { width: 100%; padding: 3rem 2rem; }
	.bt_logo_wrap > span { font-size: 2.8rem; }

	
	.company_info_wrap { margin-top: 2rem; flex-wrap: wrap; }
	.company_info_wrap > li { font-size: 1.3rem;margin: 0.4rem 0; margin-right: 2rem; }
	.company_info_wrap > li::after { right: -1rem; }
	
	.copyright_wrap { margin-top: 1rem; }
	.copyright_wrap > span { font-size: 1.3rem;}
	
	.pc_view { display: none; }
	.m_view { display: block; }

	#floating_bn { position: fixed; bottom: 0; left: 0; right: 0; transition: all 0.5s ease; }
	#floating_bn.active { bottom: -5rem; }
	#floating_bn.active .request_btn { transform: scale(1); height: 5rem; visibility: hidden; opacity: 0; }
	#floating_bn .floating { padding: 0 1.2rem; }

	.cs_num_btn_wrap { width: 100%; }
	.cs_num_btn { position: absolute; top: -6.4rem; right: 0; width: 4.6rem; height: 4.6rem; border-radius: 50%; border: 0.1rem solid #E8612C; background: #ff593e; color: #ffffff; }
	.cs_num_btn > i { font-size: 2.4rem; }
	.cs_num_btn > span {display: none;}
	.cs_num_btn > a { display: none; }

	.cs_num_btn_pannel { top: -6.4rem; left: initial; right: 0; width: auto; height: 4.6rem; border: 0.1rem solid #E8612C; border-radius: 4.6rem; padding: 0 1.6rem; display: flex; align-items: center; pointer-events: visible; }
	.cs_num_btn_pannel.active { left: initial; right: 5.8rem; visibility: visible; opacity: 1; z-index: -1; }
	.p_icon { width: 3rem; font-size: 2.2rem; text-align: center; color: #E8612C; }
	.p_number { margin-left: 1rem; width: calc(100% - 3rem - 1rem);}
	.p_number > span:nth-child(1) { font-size: 1.6rem; color: #E8612C; }
	.p_number > span:nth-child(2) { display: block; font-size: 1rem; color: #767676; }

	.request_btn { width: 100%; height: 5rem; background: #0094FF; color: #ffffff; border: 0; border-radius: 0.6rem; flex-direction: initial; }
	.request_btn > i { font-size: 2.2rem; transform: scaleX(-1); }
	.request_btn > span { margin-left: 1rem; font-size: 1.6rem; }

	.top_move_btn { left: initial; top: -11.4rem; right: 1.2rem; width: 4.6rem; height: 4.6rem; border-radius: 50%; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
	.top_move_btn span::before { margin-right: 0; display: block; }
}



/* toggle button */
.toggle { display: flex; align-items: center; justify-content: center; }
.toggle input{ display:none; }
.toggle span { display: inline-block;	vertical-align: middle;	cursor:pointer }
.toggle .toggle_off { position: relative; vertical-align: middle; }
.toggle .toggle_on { display: none; }

.toggle input:checked ~ .toggle_off { display: none; }
.toggle input:checked ~ .toggle_on { display: block; animation: jelly 0.8s ease;}

@keyframes jelly { 
	from {transform: scale(1,1);}
	30% {transform: scale(1.25,0.75);}
	40% {transform: scale(0.75,1.25);}
	50% {transform: scale(1.15,0.85);}
	65% {transform: scale(0.95,1.05);}
	75% {transform: scale(1.05,0.95);}
	to {transform: scale(1,1);}
}

/* JELLY BUTTON */


/* CONTENT */


/* FONT-COLOR */
.fc_red { color: #FF0004 !important;}
.fc_blue { color: #0005FF !important;}
.fc_wh { color: #FFFFFF !important;}
.fc_bk { color: #000000 !important;}
.fs32 {font-size: 32px !important;}
.fs30 {font-size: 30px !important;}
.fs28 {font-size: 28px !important;}
.fs26 {font-size: 26px !important;}
.fs26 {font-size: 26px !important;}
.fs24 {font-size: 24px !important;}
.fs22 {font-size: 22px !important;}
.fs18 {font-size: 18px !important;}
.fs16 {font-size: 16px !important;}
.fs14 {font-size: 14px !important;}


/*기본 폼 */
input::-webkit-input-placeholder { color: #999999; font-size: 1.6rem !important; font-weight: 500; }
input:-ms-input-placeholder { color: #999999; font-size: 1.6rem !important; font-weight: 500; }
textarea::-webkit-input-placeholder { color: #999999; font-size: 1.6rem !important; }
textarea:-ms-input-placeholder { color: #999999; font-size: 1.6rem !important;  }

select {
	-webkit-appearance:none;
	-moz-appearance:none;
	-ms-appearance:none;
	appearance:none;
	outline:0;
	box-shadow:none;
	background-image: none;
	flex: 1;
	cursor:pointer;
}
select::-ms-expand {
	display: none;
}


input { 
	box-shadow: none !important;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* input type number : 화살표제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

input[type='number'] {
	appearance: textfield;
	-moz-appearance: textfield;
}

/*스크롤바*/
::-webkit-scrollbar{
	width: 2rem;
}
::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 10rem;
}

::-webkit-scrollbar-thumb {
  border-radius: 10rem;
  border: 0.5rem solid transparent;
  background-clip: content-box;
  background-color: #585858;
}


textarea::-webkit-scrollbar{
	width: 2rem;
}
textarea::-webkit-scrollbar-track {
  background-color: #e4e4e4;
  border-radius: 1rem; 
}

textarea::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  border: 0.5rem solid transparent;
  background-clip: content-box;
  background-color: #CF4F53;
}




/* check box start */
.checkbox input{ display:none;  }
.checkbox span{ 
	display: inline-block;
	vertical-align: middle;
	cursor:pointer }
.checkbox .star { 
	position: relative; 
	width: 1.7rem; 
	height: 1.7rem; 
	border: 0.1rem solid #c8ccd4; 
	border-radius:0.3rem; 
	transition : background 0.1s ease; }
.checkbox .star::after { 
	content:''; 
	position: absolute; 
	top : 0.1rem; 
	left: 0.5rem; 
	width: 0.5rem; 
	height: 1.1rem; 
	border-right: 0.2rem solid #FFFFFF; 
	border-bottom: 0.2rem solid #FFFFFF; 
	transform: rotate(45deg) scale(0); 
	transition: all 0.3s ease; 
	transition-delay:0.15s; 
	opacity: 0;}
.checkbox input:checked ~ .star { 
	border-color: transparent; 
	background: #ff1616; 
	animation: jelly 0.6s ease;}
.checkbox input:checked ~ .star::after { 
	opacity: 1; 
	transform: rotate(45deg) scale(1);}

/* check box end */