@charset "utf-8";
/* CSS Document */

/* 퀵 메뉴 */
#quick_menu { width: 100px; position: fixed; right: 0; bottom: 2rem; margin-right: 2rem; display: flex; flex-wrap:wrap; justify-content: center; align-items: center; z-index: 5; }
#quick_menu a { display: flex; position: relative; align-items: center; justify-content: space-around; width: 100px; height: 100px; border-radius: 500px; box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.1); cursor: pointer; margin-bottom: 1rem; transition: all ease 250ms; t-size: 1.4rem; color: #fff; background-color: #434656; }
#quick_menu a:hover{ animation-name: btn_bounce; animation-duration: 750ms; animation-iteration-count:infinite;}
	#quick_menu a:last-child {width: 50px; height: 50px; margin-bottom: 0;}
#quick_menu a .txtwrap { text-align: center; width: 100%; }
#quick_menu a .txtwrap i { display: inline-block; font-size: 1.4em; margin-bottom: 0.4rem; }
#quick_menu a .txtwrap p { font-size: 0.85em; }
#quick_menu a.top { background-color: #fff; }
#quick_menu a.top i { color: #888; }

/* 헤더 */
header { background-color: rgba(255,255,255,0); border-bottom: solid 1px rgba(255,255,255,0.2); position: fixed; width: 100%; top: 0; left: 0; z-index: 555; }
#top_num { display: inline-block; padding: 0.5rem; width: 100%; font-size: 1.3em; font-weight: 400; background-color: rgba(0, 0, 0, 0.4); color: #fff; }
header .logo a { font-size: 1.4em; color: #fff; }
header .logo p { font-size: 1.1rem; margin-left: 1rem; }

/* 헤더 네비 */
#header_nav { position: relative; }
#header_nav .overlay .overlay-menu li { margin-right: 3rem; }
	#header_nav .overlay .overlay-menu li:last-of-type { margin-right: 0rem; }
#header_nav .overlay .overlay-menu li a { display: block; height: 90px; line-height: 90px; color: #fff; font-size: 1.05em; font-weight: 400; }
	#header_nav .overlay .overlay-menu li a:hover { color: #fff; border-bottom: solid 5px #fff; }

/* 헤더 스크롤 내렸을때 */
header.active { background-color: #fff; box-shadow: 0px 2px 12px 0px rgb(0 13 57 / 10%); position: fixed; width: 100%; top: 0; left: 0; z-index: 555; border:none;}
header.active #top_num { display: none; }
header.active #header_nav .overlay .overlay-menu li a { color: #888; height: 80px; line-height: 80px; }
	header.active #header_nav .overlay .overlay-menu li a:hover { color: #0171df; border-bottom: solid 5px #0171df; }
header.active .logo a { color: #333; }

/* 메인 */
main { display: block; background-image: url(../images/main_bg.jpg); background-size: cover; height: 100vh; background-attachment: fixed; position: relative; }
main > .txtwrap { text-align: center; color: #fff; padding-bottom: 4.5rem; }
main > .txtwrap > .txt_01 { font-size: 2.8em; font-weight: 600; margin-bottom: 0.5rem; }
main > .txtwrap > .txt_02 { font-size: 1.2em; }
main > .txtwrap > a { margin-top: 3rem; }

/* 메인 스크롤 아이콘 */
#scroll-icon-container{ position: absolute; bottom: 13rem; left: 50%; transform: translateX(-50%); }
@-webkit-keyframes scroll-ani {
  0% { opacity: 1; top: 29%; }
  15% { opacity: 1; top: 50%; }
  50% { opacity: 0; top: 50%; }
  100% { opacity: 0; top: 29%; }
}
@-moz-keyframes scroll-ani {
  0% { opacity: 1; top: 29%; }
  15% { opacity: 1; top: 50%; }
  50% { opacity: 0; top: 50%; }
  100% { opacity: 0; top: 29%; }
}
@keyframes scroll-ani {
  0% { opacity: 1; top: 29%; }
  15% { opacity: 1; top: 50%; }
  50% { opacity: 0; top: 50%; }
  100% { opacity: 0; top: 29%; }
}
.mouse-scroll { display: inline-block; line-height: 10px; font-size: 7px; font-weight: 400; color: rgba(255, 255, 255, 0.6); letter-spacing: 2px; margin-top: 10%; text-decoration: none; overflow: hidden; }
.mouse-scroll p { margin-bottom: 0.8rem; }
.mouse-scroll .mouse { position: relative; display: block; width: 30px; height: 45px; margin: 0 auto 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 23px; }
.mouse-scroll .mouse .mouse-movement { position: absolute; display: block; top: 29%; left: 55%; width: 5px; height: 5px; margin: -4px 0 0 -4px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; -webkit-animation: scroll-ani 3s linear infinite; -moz-animation: scroll-ani 3s linear infinite; animation: scroll-ani 3s linear infinite;
}

/* 상품 배너 */
#prod_bnr { display: block; position: absolute; width: 100%; left: 0; bottom: 3.5rem; }
#prod_bnr nav a { position: relative; width: 20%; color: #fff; padding: 2rem; border: 1px solid transparent; }
	#prod_bnr nav a:hover { transform:translateY(-.5rem); box-shadow:0px 20px 15px 5px rgba(0,13,56,0.2), 0px 5px 10px 2px rgba(0,13,56,0.1); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2ms; border: 1px solid rgba(192,221,255,0.15);  }
#prod_bnr nav a i { font-size: 1.8em; }
#prod_bnr nav a .txt_01 { font-size: 1.15em; font-weight: 600; }
#prod_bnr nav a .txt_02 { font-size: 0.95em; }

/* 공통 */
#reason, #review, #contact_area { display: block; padding: 7.5rem 0; }
#reason .tit, #review .tit, #contact_area .tit { margin-bottom: 4rem; }
#reason .tit .txt_02, #review .tit .txt_02 { font-size: 1.1em; }

/* 이유 */
#reason { text-align: center; }
#reason ul li { text-align: center; width: 33.3%; }
#reason ul li .icon { display: inline-block; background-color: #fff; width: 10rem; height: 10rem; border-radius: 500px; text-align: center; position: relative; font-size: 2.6rem; margin-bottom: 1.5rem; }
#reason ul li .txt_01 { font-weight: 600; font-size: 1.2em; margin-bottom: 0.5rem; }

/* 리뷰 */
#review { background-color: #151e28; text-align: center; }
#review .tit { color: #fff; }
#review .tit .txt_02 { color: rgba(255,255,255,0.6); }
#review ul li { width: 32%; }
#review ul li .txtbox { background-color: #fff; padding: 2rem; border-radius: 8px; font-style: italic; font-weight: 500; margin-bottom: 1.5rem; }
#review ul li .avatar img { width: 3rem; height: 3rem; border-radius: 8px; }
#review ul li .avatar .txtwrap { text-align: left; margin-left: 1rem; font-weight: 500; }
#review ul li .avatar .txtwrap .txt_01 { color: #fff; line-height: 1; margin-bottom: 0.5rem; }
#review ul li .avatar .txtwrap .txt_02 { color: rgba(255,255,255,0.6); font-size: 0.8em; line-height: 1; }

/* 하단 연락처,폼 */
#contact_area { text-align: center; }
#contact_area .bnrwrap { width: 33%; }
#contact_area .bnrwrap a { width: 100%; border-radius: 10px; padding: 2rem; text-align: left; height: /*164px*/100%;  }
#contact_area .bnrwrap a i { font-size: 2.4rem; margin-right: 2rem; }
#contact_area .bnrwrap a .txt_01 { font-size: 1.1em; }
#contact_area .bnrwrap a .txt_02 { font-size: 1.4em; font-weight: 500; line-height: 1; margin: 0.4rem 0 0.8rem; }
#contact_area .bnrwrap a .txt_03 { font-size: 0.9em; }
#contact_area .bnrwrap .tel { margin-bottom: 1.5rem; color: #fff; background: url(../images/call_bg.png) #10467c; background-size:cover; background-attachment: fixed;}
	#contact_area .bnrwrap .tel:hover { background-color: #3463ab; }
#contact_area .bnrwrap .tel .txt_02 { font-size: 1.8em }
#contact_area .bnrwrap .tel .txt_03 { color: rgba(255,255,255,0.6); }
#contact_area .bnrwrap .kakao { background-color: #ffd43b; color: #333; }
	#contact_area .bnrwrap .kakao:hover { background-color: #ffeb62; }
#contact_area .s_form { background-color: #fff; padding: 2rem; border-radius: 10px; width: 65%; }


/* 푸터 */
footer { padding: 7.5rem 0; font-size: 0.9em; }
footer #footer_logo { font-size: 1.5em; font-weight: 500; color: #888; }
footer #footer_txt_area { width: 80%; }
footer #footer_bnr li { margin-right: 2rem; }
	footer #footer_bnr li:last-of-type { margin-right: 0rem; }
footer #footer_bnr li a img { height: 30px; }
footer #footer_nav { margin: 2rem 0 2rem; }
footer #footer_nav a { margin-right: 1rem; padding-right: 1rem; border-right: solid 1px rgba(51,51,51,0.3); line-height: 1; }
footer #footer_nav a:hover { color: #016e83; }
	footer #footer_nav a:last-of-type { margin-right: 0; padding-right: 0; border-right: none; }
footer #footer_txt_01 { margin-bottom: 2rem; }
footer #footer_txt_01 li { margin-bottom: 0.5rem; font-size: 1.15em; font-weight: 400; display: inline-flex; gap:0.5rem; align-items: flex-start;}

	footer #footer_txt_01 li:last-of-type { margin-bottom: 0; }
footer #footer_txt_01 li i { margin-top: 0.3rem; }

/* ==================== 서브페이지 ==================== */

/* 페이지 비주얼 */
.page_visual { display: block; width: 100%; }
.page_visual .wrap { height: 580px; }
.page_visual .wrap .txtwrap { display: inline-block; color: #fff; text-align: center; margin-top: 139px; }
.page_visual .wrap .txtwrap i { font-size: 2.2em; }
.page_visual .wrap .txtwrap .txt_01 { font-size: 2em; font-weight: 600; margin: 1rem 0 2rem; }
.page_visual .learn-more { margin-top: 2rem; }
.page_visual .learn-more .circle { background-color: rgba(0,0,0,0.4); }

/* 페이지 폼 */
.page_form { padding: 8rem 0; position: relative; overflow: hidden; background-image: url(../images/page_form_bg.jpg); background-size: cover; }
.page_form::before { content: ''; position: absolute; top: -15px; left: 50%; transform: translateX(-50%) rotate(-45deg); width: 30px; height: 30px; background-color: #fff; }
.page_form .wrap .form_box { width: 100%; background-color: #fff; padding: 4rem 3rem; border-radius: 5px; }
.page_form .wrap .form_box .form_header { text-align: center; margin-bottom: 3rem }
.page_form .wrap .form_box .form_header .txt_01 { font-weight: 600; font-size: 1.8em; margin-bottom: 1rem; }
.page_form .wrap .form_box .form_header .txt_01 i { display: inline-block; font-size: 1.4em; margin-bottom: 1rem; }
.page_form .wrap .form_box .form_header .txt_02 { font-size: 1.1em; font-weight: 400; }
/* ==================== 모바일 레이아웃 ==================== */

@media only screen and (min-width: 300px) and (max-width: 850px) {
	
	body { font-size: 14px; }
	
	/* 퀵 메뉴 */
	#quick_menu { margin-right: 0; bottom: 1rem; width: 60px; right: 1rem; }
	#quick_menu a { display: inline-block; width: 60px; height: 60px; margin-bottom: 0.8rem; }
		#quick_menu a:last-child { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; line-height: 40px; text-align: center; }
	#quick_menu a .txtwrap p { display: none; }
	#quick_menu a .txtwrap i { margin-bottom: 0!important; font-size: 1.7em; }
	
	/* 헤더 */
	header { position: fixed; width: 100%; z-index: 44; top: 0; }
	#top_num { font-size: 1em; padding: 0.5rem 1rem; }
	#top_num .wrap { padding: 0; }
	header > .wrap { height: 60px; }
	header .logo a { font-size: 1.35em; font-weight: 500; }
	
	/* 헤더 네비 */
	.button_container { position: relative; height: 27px; width: 33px; cursor: pointer; z-index: 300; transition: opacity .25s ease; transform: scale(-0.8); }
		.button_container:hover { opacity: .7; }
	.button_container.active .top { -webkit-transform: translateY(11px) translateX(0) rotate(45deg); transform: translateY(11px) translateX(0) rotate(45deg); background: #FFF; }
	.button_container.active .middle { opacity: 0; background: #FFF; }
	.button_container.active .bottom { -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg); transform: translateY(-11px) translateX(0) rotate(-45deg); background: #FFF; }
	.button_container span { background: #fff; border: none; height: 4px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer; }
		.button_container span:nth-of-type(2) { top: 11px; }
		.button_container span:nth-of-type(3) { top: 22px; }
	.overlay { position: fixed; background: rgba(0,0,0,0.85); top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; z-index: 66 }
	.overlay.open { opacity: .9; visibility: visible; height: 100%; overflow: hidden; }
	.overlay.open li { display: flex; align-items: center; -webkit-animation: fadeInRight .5s ease forwards; animation: fadeInRight .5s ease forwards; -webkit-animation-delay: .35s; animation-delay: .35s; margin-right: 0!important; }
		.overlay.open li:nth-of-type(1) { -webkit-animation-delay: .35s; animation-delay: .35s; }
		.overlay.open li:nth-of-type(2) { -webkit-animation-delay: .39s; animation-delay: .39s; }
		.overlay.open li:nth-of-type(3) { -webkit-animation-delay: .43s; animation-delay: .43s; }
		.overlay.open li:nth-of-type(4) { -webkit-animation-delay: .46s; animation-delay: .46s; }	
		.overlay.open li:nth-of-type(5) { -webkit-animation-delay: .50s; animation-delay: .50s; }	
		.overlay.open li:nth-of-type(6) { -webkit-animation-delay: .53s; animation-delay: .53s; }	
		.overlay.open li:nth-of-type(7) { -webkit-animation-delay: .57s; animation-delay: .57s; }	
		.overlay.open li:nth-of-type(8) { -webkit-animation-delay: .60s; animation-delay: .60s; }	
		.overlay.open li:nth-of-type(9) { -webkit-animation-delay: .62s; animation-delay: .62s; }
	.overlay nav { position: relative; height: 70%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.3em; text-align: center;
	}
	.overlay ul { list-style: none; padding: 0; margin: 0 auto; position: relative; height: 100%; display: block; width: 100%!important; }
	.overlay ul li { display: block; /*height: 14.2%;*/ height: calc(100% / 5); min-height: 50px; position: relative; opacity: 0; }
	.overlay ul li a { display: block; position: relative; width: 100%!important; color: #FFF!important; text-decoration: none; overflow: hidden; height: auto!important; text-align: center; }
	.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after { width: 100%; }
	.overlay ul li a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; -webkit-transform: translateX(-50%); transform: translateX(-50%); height: 3px; background: #FFF; transition: .35s; }


	#header_nav .overlay .overlay-menu li a:hover { border-bottom: none!important; }
	
	/* 헤더 스크롤 내렸을때 */
	header.active .button_container span { background: #333; }

	/* 메인 */
	main { width: 100%; height: auto; background-repeat: no-repeat; background-position: top; background-image: url(../images/main_bg_m.png); background-size: auto; display: block; }
	main > .txtwrap { position: static!important; transform: none; padding: 98px 1rem 0; }
	main > .txtwrap > .txt_01 { font-size: 2rem; line-height: 1.5; margin-top: 4.5rem; }
	main > .txtwrap > .txt_02 { margin-top: 1.5rem; }
	main > .txtwrap > a { margin: 2rem 0 4.5rem; }
	main #scroll-icon-container { display: none }
	
	/* 상품 배너 */
	#prod_bnr { position: static; }
	#prod_bnr nav { display: block; padding: 0; }
	#prod_bnr nav a { width: 100%; padding: 2rem 1.5rem; }
	#prod_bnr nav a .txt_01 { font-size: 1.15rem; margin-bottom: 0.1rem; }
	#prod_bnr nav a .txt_02 { font-size: 0.95rem; }
	#prod_bnr nav a i { font-size: 2rem; }
	#prod_bnr nav a:hover { transform:scale(1.02);   }
	/* 공통 */
	#reason, #review, #contact_area { display: block; padding: 4.5rem 0; }
	#reason .tit, #review .tit, #contact_area .tit { margin-bottom: 3rem; }
	
	/* 이유 */
	#reason ul { display: block; }
	#reason ul li { width: 100%; margin-bottom: 3rem; }
		#reason ul li:last-of-type { margin-bottom: 0 }
	#reason ul li .icon { width: 8rem; height: 8rem; }
	#reason ul li .txt_01 { font-size: 1.2rem; }
	
	/* 리뷰 */
	#review ul { display: block; }
	#review ul li { width: 100%; margin-bottom: 2.5rem; }
		#review ul li:last-of-type { margin-bottom: 0rem; }
	#review ul li .txtbox { font-size: 1rem; }
	#review ul li .avatar .txtwrap .txt_01 { font-size: 1.1em; }
	#review ul li .avatar .txtwrap .txt_02 { font-size: 1em; }
	
	/* 하단 연락처,폼 */
	#contact_area > .wrap > .flexwrap { display: block; }
	#contact_area .bnrwrap, #contact_area .s_form { width: 100%; }
	#contact_area .bnrwrap a { height: auto; padding: 1.5rem 2rem; }
	#contact_area .bnrwrap .tel { margin-bottom: 1rem; }
	#contact_area .s_form { margin-top: 3rem; padding: 2.5rem 1.5rem 1.5rem; }
	#contact_area .s_form .form_header { margin-bottom: 1.5rem; font-size: 1.6em; }
	#contact_area .s_form .form_btn { margin-top: 0.5rem; }
	
	/* 푸터 */
	footer { display: block!important; padding: 4.5rem 1rem 21rem!important; text-align: center; background-color: #fff; }
	footer #footer_logo { line-height: 1; }
	footer #footer_bnr { display: none; }
	footer #footer_txt_area { width: 100%; }
	footer #footer_nav { justify-content: center!important; }
	footer #footer_txt_01 { text-align: justify; }
	
	/* ==================== 서브페이지 ==================== */

	/* 페이지 비주얼 */
	.page_visual .wrap { height: 480px; }
	.page_visual .wrap .txtwrap { margin-top: 91px!important; }
	.page_visual .wrap .txtwrap .txt_01 { margin: 1rem 0; }
	.page_visual .wrap .txtwrap .txt_02 { font-size: 1.1em; }
	.page_visual .learn-more { margin-top: 1.5rem; }
	
	/* 페이지 폼 */
	.page_form { padding: 4rem 0; }
		.page_form::before { width: 24px; height: 24px; top: -12px; }
	.page_form .wrap .form_box { padding: 3rem 1.5rem; }
	.page_form #name_fieldset, .page_form #phone_fieldset { width: 100%; }
	.page_form .wrap .form_box .form_header { margin-bottom: 2rem; }
	
}
@keyframes fadeInRight {
  0% { opacity: 0; left: 20%; }
  100% { opacity: 1; left: 0; }
}
/* ==================== oneWaySend ==================== */

.result_page { text-align: center; position: absolute; width: 100%; height: inherit; }
.result_page .innerwrap {  width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.result_page img { width: 110px; }
.result_page strong { display: inline-block; font-size: 1.4em; margin-top: 1.5rem; }
.result_page a { background-color: rgba(0,0,0,0.8); color: #fff; padding: 0.7rem 2rem; border-radius: 500px; margin-top: 2.5rem; }

@media only screen and (min-width: 300px) and (max-width: 850px) {
	.result_page img { width: 85px; }
	.result_page strong { display: inline-block; font-size: 1.4em; margin-top: 1.2rem; }
	.result_page a { margin-top: 2rem; }
}

/* ========================================================================== */