@charset "utf-8";

/*html.safari.desktop {font-size: 0.05254860746190226vw;}*/
html.safari.desktop {font-size: 0.040083333vw;}

/* common */
/* html,body{font-size: 6.25%;} */
html,body{font-size: 6%;}
body{font-size:15rem; word-break:keep-all; overflow-y:overlay;}
body.active {overflow: hidden;}

.wrapper {position:relative; width:1280rem; max-width: 92%; margin: 0 auto;}
.tx_point {color:#3b5cd7;}

/* header */
#header {position:sticky; top: -90rem; width:100%; background-color: #fff; border-top: 3px solid #ffe8b3; border-bottom: 1px solid #e1e1e1; z-index:51; transition:0.7s cubic-bezier(0.25, 0.47, 0.12, 0.99);}
#header .header_top {display: flex; justify-content: space-between; padding: 25rem 0;}
#header .header_top h1 a{display:block; width: 110rem; height: 36rem; background-image:url(../../images/common/logo.svg); background-position:50%50%; background-repeat:no-repeat; background-size:cover;}
#header .header_top .area_util {margin-right: -20rem;}
#header .header_top .area_util li {position: relative; display: inline-block; padding: 0 20rem;}
#header .header_top .area_util li a {font-size: 15rem; font-weight: 500; color: #888; transition: .3s;}
#header .header_top .area_util li a:hover {color: #111;}
#header .header_top .area_util li::after {position:absolute; content: ''; right: 0; top: 50%; width:1px; height:13rem; background-color: #e1e1e1; transform: translate(0, -50%);}
#header .header_top .area_util li:last-child::after {display: none;}

/* btn_menu */
#header .btn_menu{display:none;}
#header .btn_menu{position:relative; top:0; right:0; z-index:9999; width:23rem; height:13rem; font-size:0rem; transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block; position:absolute; left:0rem; width:100%; height:2px; background:#000;}
#header .btn_menu > span:nth-of-type(1){top:0;}
#header .btn_menu > span:nth-of-type(2){top:50%; margin-top:-1rem; transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:100%;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease; transition-property:top, transform; transition-delay:0.3s, 0s;}
#header .btn_menu.active{position:fixed; right: 30rem; top:36rem; transform:rotate(180deg);}
#header .btn_menu.active > span:nth-of-type(1){top:10rem; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10rem; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#header .btn_close{position:fixed; opacity:0; visibility:hidden; top:0rem; left:0rem; z-index:99; width:-webkit-calc(100% - 320rem); width:100%; height:-webkit-calc(100vh - -0rem * 1); height:calc(100vh - -0rem * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
.active #header .btn_close{opacity:0.4; visibility:visible;}

/* header_nav */
#header .header_nav { border-top:1px solid #e1e1e1;}
#header .header_nav .wrapper {display: flex; align-items: center;}

#header .all_menu {position: relative;}
#header .all_menu > a {position: relative; display: flex; align-items: center; padding: 17rem 50rem 17rem 0; font-size: 19rem; font-weight: 600; color: #000; background: url(/images/common/drop_down.svg) no-repeat center right 25rem; background-size: 8rem; transition: .3s;}
#header .all_menu > a::after {opacity: 0; visibility: hidden; position: absolute; left:0; bottom: 0; content: ''; width: 100%; height: 3rem; background-color: #ffe8b3;}
#header .all_menu > a i {margin-right: 20rem;}
#header .all_menu > a i span {display: block; width: 14rem; height: 2rem; margin: 4rem 0; background-color: #111;}
#header .all_menu > a:hover::after {opacity: 1; visibility: visible;}

#header .gnb {min-height: 520rem; background-color: #fafafa; box-shadow: 7rem 10rem 30rem rgba(0, 0, 0, .1);}
#header .gnb > li {border-bottom: 1px solid #eee;}
#header .gnb > li > a {position: relative; display: block; padding: 15rem 15rem; font-size: 14rem; font-weight: 500; color: #444; transition: .3s;}
#header .gnb > li.submenu_exist > a::after {position: absolute; right: 0; top: 0; content: ''; width: 30rem; height: 100%; background:url(/images/common/next_arrow.svg) no-repeat center; background-size: 6rem; opacity: .5;}

#header .gnb > li ul li {border-bottom: 1px solid #eee;}
#header .gnb > li ul li a {display: block; padding:15rem; font-size: 14rem; font-weight: 500; color: #444;}
#header .gnb > li .submenu > div {padding: 15rem; font-size:14rem;}
#header .gnb > li .submenu > div p {margin: 12rem 0; line-height: 1.5;}
#header .gnb > li .submenu > div p strong {font-weight: 600; color: #3b5cd7;}
#header .gnb > li .submenu > div a {display: block; padding: 8rem; font-weight: 500; text-align: center; border-radius: 3rem; border: 1px solid #111; transition: .3s;}
#header .gnb > li .submenu > div a:hover {background-color: #111; color:#fff;}
#header .gnb > li .submenu .img {width: 200rem; aspect-ratio: 1/1; border-radius: 3rem; background:url(/images/common/submenu.jpg) no-repeat center / cover;}
#header .gnb > li.active .submenu {opacity: 1; visibility: visible;}

#header .all_menu nav .m_util {padding: 25rem;}
#header .all_menu nav .m_util h1 img {height: 23rem; }
#header .all_menu nav .m_util h1 + p {color: #888; font-weight: 600; font-size: 14rem; margin: 30rem 0 20rem;}
#header .all_menu nav .m_util ul li + li {margin-top: 8rem;}
#header .all_menu nav .m_util ul li a {display: block; padding: 15rem; font-size: 15rem; font-weight: 600; text-align: center; border-radius: 3rem; border: 1px solid #e1e1e1;}
#header .all_menu nav .m_util ul li a.join {border:none; background: #3b5cd7; color: #fff;}

#header .best_menu {position: relative; padding-left: 15rem;}
#header .best_menu:before {position:absolute; left:0; top: 50%; content: ''; width: 1px; height: 16rem; background-color: #e1e1e1; transform: translate(0, -50%);}
#header .best_menu li {position: relative; display: inline-block;} 
#header .best_menu li a {position: relative; display: block; padding: 17rem; font-size: 19rem; font-weight: 600; color: #000; transition: .3s;}
#header .best_menu li a::after {opacity: 0; visibility: hidden; position: absolute; left:0; bottom: 0; content: ''; width: 100%; height: 3rem; background-color: #ffe8b3;}
#header .best_menu li span {opacity:0; visibility: hidden; position: absolute; left:50%; top:-25rem; padding: 8rem 10rem 9rem; text-align: center; font-size: 13rem; font-weight: 500; color:#fff; white-space: nowrap; background-color: #333; border-radius: 3rem; transform: translate(-50%, 0); transition: .3s;} 
#header .best_menu li span::after {position: absolute; left:50%; bottom:0; content:''; width: 7rem; height: 7rem; background-color: #333; transform: translate(-50%, 50%) rotate(45deg);}
#header .best_menu li:hover a::after {opacity: 1; visibility: visible;}
#header .best_menu li:hover span {opacity: 1; visibility: visible; top: -30rem;}

#header.head_hide .best_menu li span {top: auto;}
#header.head_hide .best_menu li span::after {top: -5rem;}

#header .search_m {position: relative; display: flex; align-items: center; margin-left: auto; font-size: 15rem; font-weight: 600;}
#header .search_m i {display: inline-block; width: 20rem; height: 20rem; margin-right: 10rem; background: url(/images/common/i_search.svg) no-repeat center / contain;}
#header .search_form input {min-width: 256rem; max-width: 100%; height: 40rem; padding: 10rem 50rem 10rem 25rem; font-size: 14rem; border-radius: 50rem; background-color: #f5f6f7; border: none; transition: .3s;}
#header .search_form input:hover,
#header .search_form input:focus-visible {outline:1px solid #e1e1e1;}
#header .search_form button {position: absolute; right:0; top: 0; width: 50rem; height: 100%; padding-right: 10rem; font-size: 0; background:url(/images/common/i_search.svg) no-repeat 40% / 50%; background-size: 35%;} 

#footer_company {padding: 20rem 0; margin-top: 90rem; background-color: #f7f7f7;}
#footer_company .wrapper {display: flex; justify-content: space-between;}
#footer_company .company {display: flex; align-items: center; gap: 0 20rem;}
#footer_company .company li a {display: block; height: 22rem;}
#footer_company .company li img {display: block; height: 100%;}
#footer_company .company li:last-child a {display: block; height: 45rem;}

.f_sns {display: flex; align-items: center; gap:0 10rem; margin-left: auto;}
.f_sns li a {display: flex; align-items: center; justify-content: center; width: 40rem; height: 40rem; border-radius: 100%; overflow: hidden;}
.f_sns li a.kakao {background-color: #fae300;}
.f_sns li a.blog {background-color: #32b44a;}
.f_sns li a.instagram {background:url(/images/main/sns_instagram_bg.jpg) no-repeat center / cover;}
.f_sns li a.youtube {background:#ec2224;}
.f_sns li a.kakao img {height:37rem;}
.f_sns li a.blog img,
.f_sns li a.instagram img {height: 20rem;}
.f_sns li a.youtube img {height: 14rem;}

#footer {display: flex; align-items: flex-start; padding: 45rem 0;}
#footer .f_sns {display: none;}
#footer h1 a {display: block; width: 92rem; height: 30rem; margin-bottom: 25rem; background: url(/images/common/logo.svg) no-repeat left center / contain; opacity: .25;}
#footer address * {display: inline-block; font-size: 14rem; color: #888;}
#footer address > p {position: relative; margin: 5rem 5rem 5rem 0; padding-right: 12rem;}
#footer address > p::after {position: absolute; right: 0; top: 2.5rem; content: ''; width: 1px; height: 11rem; background-color: #e1e1e1;}
#footer address > p:nth-child(4)::after,
#footer address > p:last-child::after {display: none;}
#footer .copy {margin-top: 20rem; font-size: 14rem; color: #888;}
#footer .customer {margin: 15rem 170rem 0 auto;}
#footer .customer h4 {margin-bottom: 23rem; font-size: 15rem; font-weight: 600; color: #aaa;}
#footer .customer a {display: inline-block; margin-bottom: 15rem; font-size: 27rem; font-weight: 900; color: #333;}
#footer .customer p {font-size: 14rem; color: #888;}
#footer .customer p span {display: inline-block; padding: 3rem 5rem; margin-right: 10rem; font-size: 13rem; border:1px solid #e1e1e1; border-radius: 3rem;}
#footer .customer p + p {margin-top: 5rem;}

#footer .privacy_list {margin-top: 15rem;}
#footer .privacy_list li {display: inline-block;}
#footer .privacy_list li a {display: block; padding: 5rem 8rem; font-size: 13rem; border-radius: 3rem; border: 1px solid #ddd; background-color: #e1e1e1;}

#area_fixed.mobile {position: fixed; right: 65rem; top: 240rem; display: none; width: auto; padding: 0; text-align: center; font-size: 11rem; color: #000; background-color: #fff; border-radius: 15rem; border: 1px solid #eee; overflow: hidden;}
#area_fixed .wrapper {display: none; width: auto; max-width: none;}
#area_fixed.mobile img {margin: 10rem 15rem;}
#area_fixed div {padding:0 15rem 10rem;}
#area_fixed div h4 {padding: 0; font-size: 15rem; font-weight: 1000; background:none;}
#area_fixed div ul {display: inline-block; margin-top: 5rem; text-align: left; line-height: 1.4;}
#area_fixed div ul li span {display: inline-block; min-width: 35rem;}
#area_fixed div ul li.mobile {display: none;}
#area_fixed.mobile a {display: block; padding: 12rem; font-size: 13rem; font-weight: 1000; border-top: 1px solid #eee; transition: .3s; color: #000;}
#area_fixed.mobile a:hover {color: #fff; background-color: #3b5cd7;}

#area_fixed.pc {position: fixed; right: 65rem; top: 240rem;}
#area_fixed.pc a {display: inline-block; width: 150rem; border-radius: 10rem; border: 1px solid #0a46ff; overflow: hidden; isolation: isolate;}
#area_fixed.pc img {max-width: 100%;}

/*@media (min-width:2000px){
	html{font-size:0.05254860746190225vw;}
}*/
/*@media (min-width:2000px){
	html{font-size:0.03954860746190225vw;}
}*/

@media (max-width:1690px){
	#footer {margin-bottom: 90rem; }

	#area_fixed.mobile {position: fixed; left: 0; bottom: 0; top: auto; right: auto; display: block; width: 100%; padding: 20rem 0; color: #fff; border-radius: 0; border:none; background-color: #05234b; z-index: 8; box-sizing: border-box;}
	#area_fixed .wrapper {display: flex; justify-content: center; align-items: center; max-width: 92%; width: 1280rem;}
	#area_fixed img {display: none;}
	#area_fixed div {display: flex; align-items: center; padding: 0;}
	#area_fixed div h4 {position: relative; padding-left: 33rem; font-size: 24rem; font-weight: 1000; line-height: 1; background:url(/images/common/fixed_icon.svg) no-repeat left 5rem; background-size: 18rem;}
	#area_fixed div ul {display: flex; align-items: center; margin-left: 30rem; font-size: 16rem;}
	#area_fixed div ul li + li {margin-left: 20rem}
	#area_fixed div ul li span {display: inline-block; min-width: auto; font-size: 13rem; padding: 3rem 7rem; margin-right: 10rem; border-radius: 3rem; border: 1px solid rgba(255, 255, 255, .1);}
	#area_fixed div ul li.mobile {display: inline-block; margin-left: 15rem; font-size: 13rem; color: #fff; padding: 5rem 15rem; border-radius: 20rem; background-color: #031839;}
	#area_fixed div ul li.mobile strong {color:#eb393e;}
	#area_fixed div > p {display: none;}
	#area_fixed.mobile a {display: inline-block; margin-left:30rem; padding: 15rem 50rem; border-radius: 5rem; background-color: #fff; border:none;}

	#area_fixed.pc {display: none;}
}

@media (max-width:1480px){
	html,
	html.safari.desktop{font-size:0.06756756756756757vw;}
}

@media all and (min-width:1025px){	
	#header .search_m {display: none;}
	#header .search_form {position: relative; margin-left:auto;}

	#header .all_menu nav { opacity: 0; visibility: hidden; position: absolute; left:0; width: 100%; border: 1px solid #eee;}
	#header .all_menu nav.on {opacity: 1; visibility: visible;}
	#header .all_menu nav .m_util {display: none;}
	#header .gnb > li .submenu {opacity: 0; visibility: hidden; position:absolute; top:0; height:100%; background-color: #fff; transition:all 0.1s ease-out; transition-property:opacity, visibility; box-shadow: 7rem 10rem 30rem rgba(0, 0, 0, .1); border: 1px solid #ddd; border-top: none;}
	#header .gnb > li:hover > a {background: rgba(0, 0, 0, .05);}
	#header .gnb > li ul li a:hover {background-color: rgba(0, 0, 0, .05);}
}

@media all and (max-width:1024px){
    html,
	html.safari.desktop{font-size:0.09775171065493645vw;}

	#header .search_form {position: absolute; right: -30rem; top: 50rem; opacity: 0; visibility: hidden; padding: 10rem 15rem; border: 1rem solid #e1e1e1; background-color: #fff; transition: .3s;}
	#header .search_form.on {top: 55rem; opacity: 1; visibility: visible;}
	#header .search_form button {right: 16rem; top: 13rem; width: 50rem; height: 35rem; padding-right: 0; background-size: 18rem;}

	#header .header_top {align-items: center;}
	#header .header_top .area_util {margin-left: auto; margin-right: 10rem;}
	#header .btn_menu {display: block;}
	
	#header .all_menu > a {display: none; font-size: 16rem;}
	#header .all_menu nav {position: fixed; left: auto; top:0; right: -100rem; opacity: 0; visibility: hidden; width: 65%; height: 100%; background-color: #fff; overflow-y: scroll; overflow-x: hidden; z-index: 100;}
	#header .all_menu nav.active {right: 0; opacity: 1; visibility: visible; transition: all 0.3s ease;}
	#header .gnb {min-height: auto; padding: 0 25rem; background: none; box-shadow: none;}
	#header .gnb > li {border-bottom: 1rem solid #eee;}
	#header .gnb > li > a {padding: 15rem 10rem !important; font-size: 16rem; font-weight: 600;}
	#header .gnb > li:hover > a {background-color: none;}
	#header .gnb > li > a.active {background-color: rgba(0, 0, 0, .05);}
	#header .gnb > li .submenu {display: none; border-top: 1px solid #eee;}
	#header .gnb > li .submenu > div {display: none;}
	#header .gnb > li .submenu ul {padding: 5rem 0;}
	#header .gnb > li .submenu ul li:last-child {border-bottom:none;}
	#header .gnb > li .submenu ul li a {padding: 15rem 20rem;}
	#header .gnb > li .submenu ul li a:hover {text-decoration: underline;}
	#header .gnb > li.submenu_exist a::after {opacity:1; visibility: visible; right: 10rem; transform: rotate(90deg);}
	#header .best_menu {padding-left: 0; margin-left: -12rem;}
	#header .best_menu:before {display: none;}
	#header .best_menu li a {font-size: 16rem; padding: 17rem 12rem;}
	
	#footer_company {margin-top: 60rem;}

	#area_fixed .wrapper {justify-content: flex-start;}
	#area_fixed a {margin-left: auto;}
}

@media all and (max-width:860px){
    html,
	html.safari.desktop{font-size:0.13020833333333335vw;}

	#footer_company .f_sns {display: none;}
	#footer {flex-wrap: wrap;}
	#footer .f_sns {display: flex; margin-left: 0; margin-top: 30rem;}
	#footer .customer {flex-basis: 100%; margin: 30rem auto 0 0; padding-top: 30rem; border-top: 1px solid #eee;}

	#area_fixed .wrapper {align-items: stretch;}
	#area_fixed div {flex-wrap: wrap;}
	#area_fixed div h4 {padding-left: 30rem;}
	#area_fixed div ul {margin: 13rem 0 0; font-size: 15rem;}
	#area_fixed div ul li + li {margin-left: 10rem;}
	#area_fixed.mobile a {display: flex; align-items: center; justify-content: center; margin-left: 15rem;}
	

	
	#footer_company .company li a {height: 23rem;}
	#footer_company .company li:last-child a {height: 30rem;}
}

@media all and (max-width:540px){
    html,
	html.safari.desktop{font-size:0.26666666666666665vw;}	
	body {font-size: 14rem;}

	#header {top: -58rem;}
	#header .header_top {padding: 15rem 0;}
	#header .header_top h1 a {width: 70rem; height: 23rem;}
	#header .header_top .area_util {display: none;}
	#header .header_nav .wrapper {flex-wrap: wrap;}
	#header .best_menu {flex-basis: 100%; white-space: nowrap; overflow-x: auto; overflow-y: hidden; margin-left: 0; padding-bottom: 5rem;}
	#header .best_menu li a {font-size: 14rem; padding:12rem 8rem 10rem;}
	#header .best_menu li:hover span {opacity: 0; visibility: hidden;}
	#header .search_m {display: none;}
	#header .search_form {position: relative; right: auto; top: auto; width: 100%; opacity: 1; visibility: visible; padding: 0 0 10rem; border: none;}
	#header .search_form input {width: 100%; padding: 10rem 40rem 10rem 20rem;}
	#header .search_form button {right: 0; top: 4rem;}
	#header .all_menu nav {width: 80%;}
	#header .all_menu nav .m_util {padding: 20rem 20rem 12rem;}
	#header .all_menu nav .m_util h1 + p {margin: 25rem 0 12rem; font-size: 13rem; font-weight: 400;}
	#header .all_menu nav .m_util ul li a {padding: 10rem; font-size: 13rem; font-weight: 500;}
	#header .all_menu nav .m_util ul li + li {margin-top: 5rem;}
	#header .gnb {padding: 0 20rem;}
	#header .gnb > li > a {padding: 12rem 5rem !important; font-size: 14rem; font-weight: 500;}
	#header .gnb > li .submenu ul li a {padding: 10rem 20rem; font-weight: 300; font-size: 13rem;}
	#header .btn_menu.active {right: 20rem; top: 29rem;}
	
	#footer_company { padding: 15rem 0; white-space: nowrap; overflow-x: scroll;}
	#footer_company .company {gap: 0 20rem;}
	#footer_company .company li a {height: 18rem;}
	#footer_company .company li:last-child a {height: 25rem; margin-right: 10rem;}

	#footer {padding: 30rem 0; margin-bottom: 60rem;}
	#footer h1 a {width: 70rem; height: 20rem; margin-bottom: 20rem;}
	#footer address * {font-size: 12rem;}
	#footer address br {display: none;}
	#footer address > p { margin: 3rem 5rem 3rem 0; padding-right: 10rem;}
	#footer address > p::after {height: 9rem;}
	#footer address > p:nth-child(4)::after {display: block;}
	#footer .f_sns {margin-top: 20rem; gap: 0 10rem;}
	#footer .f_sns li a {width: 27rem; height: 27rem; }
	#footer .f_sns li a img {max-width: 100%;}
	.f_sns li a.blog img,
	.f_sns li a.instagram img {height: 14rem;}
	.f_sns li a.kakao img {height:24rem;}
	.f_sns li a.youtube img {height: 10rem;}
	#footer .copy {font-size: 12rem; margin-top: 15rem;}
	#footer .customer h4 {font-size: 12rem; margin-bottom: 10rem;}
	#footer .customer a {font-size: 20rem;}
	#footer .customer p {font-size: 12rem;}
	#footer .customer p span {font-size: 10rem;}	

	#area_fixed.mobile {padding: 12rem 0;}
	#area_fixed .wrapper {justify-content: space-between;}
	#area_fixed div h4 {font-size: 18rem; padding-left: 20rem;background-position: left 3rem; background-size: 13rem;}
	#area_fixed div ul {margin: 0 10rem 0;}
	#area_fixed div ul li {display: none;}
	#area_fixed div ul li.mobile {display: inline-block; margin:0; font-size: 11rem; padding: 5rem 10rem 3rem;}
	#area_fixed.mobile a {font-size: 12rem; padding: 12rem 20rem 10rem; line-height: 1; letter-spacing: -.5rem;}
}

@media all and (max-width:480px){}
@media all and (max-width:360px){}