@charset "utf-8";
@import url(setting.css);
/* ************************************************************************************************************************************************************
                        《 공통 레이아웃 스타일 》
************************************************************************************************************************************************************ */

/*
    z-index 위계
	dim				9998
	팝업			9999
    #header         100
	tab_bar			100
	전체메뉴		1000
*/

/* ============================== [ 레이아웃 리셋 ] ========================================================================================== */
/* Reset */

/* .scroll-locked 추가 */

.scroll-locked {
    height: 100%;
    min-height: 100%;
    overflow: hidden !important;
    touch-action: none;
}

.sr-only,
.sound-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sales-mint);
    --_m:
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: loading_spinner 1s infinite linear;

    width: 100px;
    padding: 10px;
}

@keyframes loading_spinner {to{transform: rotate(1turn)}}


html,body,div,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,big,cite,code,del,dfn,font,figure,figcaption,img,ins,q,s,samp,small,strike,sub,sup,tt,var,
b,u,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {font:16px 'Pretendard',sans-serif; line-height: 1.4;}
button,input,textarea {font:16px 'Pretendard',sans-serif; line-height: 1.4;}
select {font:16px 'Pretendard',sans-serif; line-height: 1.4;}
::selection {color:#fff; background-color:#EC1B23;}
.go_view {position:absolute; left:0; top:0; height:100%; width:100%;}
.img img {display:block; width:100%; height:auto; object-fit:cover;}
* {word-wrap:break-word; word-break:keep-all; box-sizing: border-box;}
a {display: block;}
body.dim:before {
	background-color:rgba(0, 0, 0, 0.5); content:""; position:fixed; left:0; top:0; height:100vh; width:100%; z-index:9998;
}

.inner {max-width: 1640px; width: 100%; padding: 0 20px; margin: 0 auto;}

/* ============================== [ #header ] ========================================================================================== */
#header {position: fixed; left: 0; top: 0; width: 100%;  z-index: 100;}

#header::before {
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: rgba(0, 0, 0, .15);
	position: absolute;
	top: 116px;
	z-index: 1;
}

#header.h_wh::before {
    background-color: transparent;
    background-color: rgba(255, 255, 255, .2);
}

.h_top {background-color: #EBFBFB; padding: 8px 70px; transition: .3s;}
.h_top ul {display: flex; align-items: center; justify-content:flex-end;}
.h_top ul li ~ li {margin-left: 16px; padding-left: 16px; position: relative;}
.h_top ul li ~ li::after {display: block; content: ''; width: 1px; height: 10px; position: absolute; left: 0; top: 5px; background-color: rgba(0, 0, 0, 0.3); transition: .3s;}

.h_top ul li a {
	font-weight: 500; font-size: 14px; transition: .3s; border-bottom: 2px solid transparent;
	color: var(--kt-red);
	line-height: 130%;
	display: block;
}

.h_top ul li a:active,
.h_top ul li a:focus,
.h_top ul li a:hover {
	border-color: var(--kt-red);
}

.h_btm {
	height: 100%;
	display: flex;
	align-items: center;
	align-items: start;
	justify-content: space-between;
	background-color: #fff; padding:0 60px; position: relative; transition: .3s;}

.h_btm .logo a {
	background: url(../images/common/logo.svg) no-repeat center;
	width: 103px;
	height: 30px;
	height: 80px;
	display: block; background-size: 100% auto; transition: .3s;
}

.h_btm nav .dept_01 {display: flex;}
.h_btm nav .dept_01 > li {width: 177px; position: relative;}
.h_btm nav .dept_01 > li > a {width: 100%; height: 80px; font-weight: 600; font-size: 22px; display: flex; align-items: center; justify-content: center; color: #221E1F; transition: .3s; border-bottom: 3px solid transparent; transition: .3s;}
.h_btm nav .dept_01 > li:hover > a,
.h_btm nav .dept_01 > li > a.active {color: #EC1B23;}
.h_btm nav .dept_01 > li:hover  > a {border-color: #000;}
.h_btm nav .dept_01 .dept_02 {
	display: none; 
	/* position: absolute;  */
	left: 0; top: 100%; width: 100%; padding: 35px 0 60px; z-index: 2;
}
.h_btm nav .dept_01 .dept_02 > li ~ li {margin-top: 20px;}
.h_btm nav .dept_01 .dept_02 > li > a {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	font-size: 20px; font-weight: 500; color: #000; text-align: center; transition: .3s;
	padding: 0 1.2rem;
}

.h_btm nav .dept_01 .dept_02 > li > a.on,
.h_btm nav .dept_01 .dept_02 > li > a:not(.on):hover {
	color: #EC1B23;
}
.h_btm .btn_all_menu {width: 56px; 
	height: 56px; 
	height: 80px;
	background: url(../images/common/icon_all_menu.svg) no-repeat center; background-size: 100% auto; transition: .3s;}

.h_btm .dept_02 > li > a.more {
	position: relative;
}

.h_btm .dept_02 > li > a.more::after {
	content: url(/assets/images/main/icon_more.svg);
	position: absolute;
	right: 0;
	transition: .3s;
}

.h_btm .dept_02 > li > a.more.on::after {
	content: url(/assets/images/main/icon_more.svg);
	transform: rotate(180deg);
	position: absolute;
	right: 0;
}

.h_btm .dept_03 {
	margin-top: 10px;
	display: none;
}

.h_btm .dept_03 > li > a {
	display: block;
	text-align: center;
	color: #555;
	font-size: clamp(14px, 0.7813vw, 15px);
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
	margin-bottom: 6px;
}

.h_btm .dept_03 > li > a:hover,
.h_btm .dept_03 > li > a:active,
.h_btm .dept_03 > li > a:focus {
	color: #000;
}

/* 헤더 투명 */
#header.h_wh .h_top {background-color: #313131;}
#header.h_wh .h_top ul li a {color: var(--mint);}

#header.h_wh .h_top ul li a:active,
#header.h_wh .h_top ul li a	:focus,
#header.h_wh .h_top ul li a:hover {border-color: var(--mint);}

#header.h_wh .h_top ul li ~ li::after {background-color: rgba(255, 255, 255, .3);}
#header.h_wh .h_btm {background-color: transparent;}
#header.h_wh .h_btm nav .dept_01 > li > a {color: #fff;}
#header.h_wh .h_btm .logo a {background-image: url(../images/common/logo_wh.svg);}
#header.h_wh .h_btm .btn_all_menu {background-image: url(../images/common/icon_all_menu_wh.svg);}

@media screen and (max-width: 1400px) {
	.h_top {padding: 8px 20px;}
	.h_btm {padding: 0 20px;}
	.h_btm nav {width: 70%;}
	.h_btm nav .dept_01 > li {width:auto; flex:1;}
	.h_btm nav .dept_01 > li > a {font-size: 20px;}
	.h_btm nav .dept_01 .dept_02 > li > a {font-size: 16px;}
}
/* ============================== [ 전체메뉴 - Mobile ] ========================================================================================== */
.m_menu {
	display: none; position: fixed; left: 0; top: 0; width: 100%; background-color: #fff; z-index: 1000;
	height: calc(100vh - 65px);
	height: calc(100dvh - 65px);
}
.m_menu .head {padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;}
.m_menu .head button {width: 28px; height: 28px; background: url(../images/common/icon_all_menu_back.svg) no-repeat left center;}
.m_menu .head a {font-size: 14px; font-weight: 500; padding: 4px 14px; background-color: #EFF2F6; border-radius: 5px; display: inline-block;}
.m_menu .cont {display: flex; background-color: #EFF2F6; height: calc(100% - 60px);} 
.m_menu .cont .menuL_wrap {width: 33.33%; padding-top: 20px; height: 100%; overflow-y: auto;}
.m_menu .cont .menuL_wrap li.active a {background-color: #EC1B23; color: #fff; font-weight: 600;}
.m_menu .cont .menuL_wrap li a {padding: 14px 20px; font-size: 18px; color: #222; transition: .3s;}
.m_menu .cont .menuR_wrap {flex:1; background-color: #fff; padding-top: 10px; margin-top: 10px; height: calc(100% - 10px); overflow-y: auto;}
.m_menu .cont .menuR_wrap .menuR_list > li {display: none;}
.m_menu .cont .menuR_wrap .menuR_list > li.active {display: block;}
.m_menu .cont .menuR_wrap .dept_02 > li > a {padding: 16px 20px; font-weight: 600; position: relative;}
.m_menu .cont .menuR_wrap .dept_02 > li:has(> ul.dept_03) > a::after {display: block; content: ''; background: url(../images/common/icon_all_menu_dropdown.svg) no-repeat; position: absolute; right: 20px; top: calc(50% - 5px); width: 17px; height: 10px; transition: .3s;}
.m_menu .cont .menuR_wrap .dept_02 > li.active > a::after {transform: rotate(180deg);}
.m_menu .cont .menuR_wrap .dept_03 {background-color: #F9F9F9; display: none;}
.m_menu .cont .menuR_wrap .dept_03 > li > a {padding: 10px 40px; font-weight: 500; font-size: 15px; color: #363636;}
.m_menu .cont .menuR_wrap .dept_04 > li > a {padding: 8px 10px 8px 60px; font-weight: 500; font-size: 15px; color: #636363;}
.m_menu .cont .menuR_wrap .dept_04 > li > a::before {content: ' · ';}
@media screen and (max-width: 1024px) {
	.m_menu.active {display: block;}
}
/* ============================== [ 전체메뉴 - PC ] ========================================================================================== */
.all_menu {
	display: flex;
	flex-direction: column;
	opacity: 0; visibility: hidden; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; backdrop-filter: blur(16px);background: #000000CC; z-index: 1000; transition: .3s;}
.all_menu.on {opacity: 1; visibility: visible;}
.all_menu * {color: #fff;}

.all_menu ul li {
	width: fit-content;
}

.all_menu .menu_h {display: flex; align-items: center; justify-content: space-between; padding: 20px 60px; position: sticky; left: 0; top: 0; width: 100%;}
.all_menu .menu_h .logo {width: 103px;}
.all_menu .menu_h button {width: 60px; height: 60px; background: url(../images/common/icon_close_allmenu.svg) no-repeat 0 0; background-size: 100% auto;}

.all_menu .menu_wrap {display: flex; margin: 100px auto 0; max-width: 1686px; width: 100%; padding: 0 40px; overflow-y: auto; max-height: calc(100vh - 370px);}
.all_menu .menu_wrap .group {flex:1;}
.all_menu .menu_wrap .group header {font-size: 32px; font-weight: 600; display: inline-block; padding-right: 17px; position: relative;}
.all_menu .menu_wrap .group header::after {display: block; content: ''; background: url(../images/common/mark.svg) no-repeat; width: 14px; height: 7px; position: absolute; right: 0; top: 0; opacity: 0; visibility: hidden; transition: .3s; background-size: 100% auto;}
.all_menu .menu_wrap .group:hover header::after {opacity: 1; visibility: visible;}
.all_menu .menu_wrap .group .dept_02 {margin-top: 50px;}
.all_menu .menu_wrap .group .dept_02 > li ~ li {margin-top: 4px;}
.all_menu .menu_wrap .group .dept_02 > li > a {font-size: 20px; font-weight: 600; transition: .3s; padding: 10px 32px 10px 0; position: relative; display: inline-block;}
.all_menu .menu_wrap .group .dept_02 > li:has(> ul.dept_03) > a::after {display: block; content: ''; background: url(../images/common/icon_arr_allmenu.svg) no-repeat 0 0; width: 17px; height: 20px; position: absolute; right: 0; top: calc(50% - 10px); transition: .3s;}
.all_menu .menu_wrap .group .dept_02 > li:has(> ul.dept_03) > a.on::after {rotate: 180deg;}
.all_menu .menu_wrap .group .dept_02 > li:has(> ul.dept_03) > a.active::after {transform: rotate(180deg);}
.all_menu .menu_wrap .group .dept_02 .dept_03 {display: none;}
.all_menu .menu_wrap .group .dept_02 .dept_03 > li ~ li {margin-top: 4px;}
.all_menu .menu_wrap .group .dept_03 > li {padding: 3px 20px;}
.all_menu .menu_wrap .group .dept_03 > li > a {
	font-size: 18px; font-weight: 500; padding: 3px 0; display: inline-block; transition: .3s;}

.all_menu .menu_wrap .group .dept_04 > li > a {
	padding: 4px 20px 4px 30px;
	transition: .3s;
}
.all_menu .menu_wrap .group .dept_04 > li > a::before {content: ' · ';}
.all_menu .all_menu_link {
	display: flex; justify-content: flex-end;
	/* position: absolute;
	left: 0;
	bottom: 0; */
	width: 100%;
	padding: 60px;
	padding: 60px 40px;
	width: 100%;
	max-width: 1686px;
	margin: 0 auto;
	margin-top: auto;
}
.all_menu .all_menu_link a {
	margin: 0 30px;
	 padding:4px 0; font-weight: 500; font-size: 20px;  transition: .3s;
}

.all_menu .all_menu_link:hover a {
	opacity: .4;
}

.all_menu .all_menu_link a:hover {
	opacity: 1;
}

@media screen and (max-width: 1024px) {
	.all_menu {display: none;}
}

/* ============================== [ 탭바 ] ========================================================================================== */
/* 모바일 상단 / 탭바 노치확인 */
.tab_Bar {display: none; position: fixed; left: 0; bottom: 0; width: 100%; border-top: 1px solid #00000033; background-color: #fff; z-index: 1001; padding-bottom: env(safe-area-inset-bottom);}
.tab_Bar ul {display: flex;}
.tab_Bar ul li {flex:1;}
.tab_Bar ul li a {width: 100%; height: 64px; display: flex; align-items: center; justify-content: center;}
.tab_Bar ul li a span {display: block; width: 42px; padding-top: 40px; font-size: 12px; font-weight: 500; transition: .3s; background-position: top center; background-repeat: no-repeat; background-size: 40px; text-align: center;}
.tab_Bar ul li a:hover span ,
.tab_Bar ul li a.active span {color: #EC1B23;}
.tab_Bar ul li a.home span {background-image: url(../images/common/tab_home.svg);}
.tab_Bar ul li a.chat span {background-image: url(../images/common/tab_chat.svg);}
.tab_Bar ul li a.map span {background-image: url(../images/common/tab_map.svg);}
.tab_Bar ul li a.tab_menu span {background-image: url(../images/common/tab_menu.svg);}

.tab_Bar ul li a.home:hover span {background-image: url(../images/common/tab_home_on.svg);}
.tab_Bar ul li a.chat:hover span {background-image: url(../images/common/tab_chat_on.svg);}
.tab_Bar ul li a.map:hover span {background-image: url(../images/common/tab_map_on.svg);}
.tab_Bar ul li a.tab_menu:hover span {background-image: url(../images/common/tab_menu_on.svg);}
.tab_Bar ul li a.home.active span,
.tab_Bar ul li a.home:active span {background-image: url(../images/common/tab_home_on.svg);}
.tab_Bar ul li a.chat.active span,
.tab_Bar ul li a.chat:active span {background-image: url(../images/common/tab_chat_on.svg);}
.tab_Bar ul li a.map.active span,
.tab_Bar ul li a.map:active span {background-image: url(../images/common/tab_map_on.svg);}
.tab_Bar ul li a.tab_menu.active span,
.tab_Bar ul li a.tab_menu:active span {background-image: url(../images/common/tab_menu_on.svg);}
/* ============================== [ 탭바 ] ========================================================================================== */
.go_top {position: fixed; right: 50px; bottom: 60px; width: 60px; height: 60px; background: url(../images/common/icon_top_on.svg) no-repeat 0 0; background-size: 100% auto; transition: .3s; z-index: 10;}
.go_top:hover {background-image: url(../images/common/icon_top.svg);}


@media screen and (max-width: 1024px) {
	.h_top,
	.h_btm nav ,
	.h_btm .btn_all_menu {display: none;}

	.go_top {
		width: 50px;
		height: 50px;
		right: 20px;
		bottom: 85px;
	}

	#header::before {
		top: 64px;
	}

	.h_btm {padding:17px 20px;}

	.h_btm .logo a {
		height: 30px;
	}

	.h_btm h1 a {width: 82px; height: 25px;}
	.tab_Bar {display: block;}
}

@media screen and (max-width: 768px) {
	.go_top {
		width: 44px;
		height: 44px;
	}
}


/* ============================== [ #footer ] ========================================================================================== */
footer {padding: 60px 0; background: url(../images/common/bg_footer.webp) no-repeat center; background-size: cover; position: relative;}
footer * {color: #fff;}
footer .inner {position: relative; z-index: 1;}
footer .f_top {display: flex; align-items: flex-end; justify-content: space-between; position: relative;z-index: 2;}
footer .f_top .img {width: 138px;}
footer .f_top p {margin-top: 10px; font-size: 20px; }
footer .f_top .family {position: relative; width: 260px;}
footer .f_top .family button {padding: 0 20px; text-align: left; backdrop-filter: blur(16px); background-color: rgba(40, 40, 40, 0.85); border-radius: 2px; width: 100%; height: 50px; position: relative;}
footer .f_top .family button::after {display: block; content: ''; background: url(../images/common/arr_family.svg) no-repeat 0 0; width: 15px; height: 18px; background-size: 100% auto; position: absolute; right: 20px; top: calc(50% - 9px); transition: .3s;}
footer .f_top .family.active button {background-color: rgba(40, 40, 40, 0.55); backdrop-filter: blur(5px);}
footer .f_top .family.active button::after {transform: rotate(180deg);}
footer .f_top .family ul {
	display: none; background-color: rgba(40, 40, 40, 0.65); backdrop-filter: blur(8px); position: absolute; left: 0; top: 100%; width: 100%; border-radius:0 0 2px 2px;
	max-height: 250px;
	overflow: auto;
}
footer .f_top .family ul li a {height: 50px; display: flex; align-items: center; margin: 0 20px; transition: .3s;}
footer .f_top .family ul li a:hover {color: #40EFEC;}
footer .f_top .family ul li:first-child a {border-top: 1px solid #FFFFFF66}

/* f_link hover 시 opacity 동작 js 에서 함. */
footer .f_link {margin-top: 80px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1;}
footer .f_link .link {display: flex; gap: 60px;}

footer .f_link .link li a {font-size: 18px; transition: .3s;} 

footer .f_link .link li a.privacy {font-weight: 600; opacity: 1;}

footer .f_link .sns {
	display: flex; gap:10px;
	display: none;
}
footer .f_link .sns a {width: 40px; height: 40px; border-radius: 50%; border:1px solid rgba(255, 255, 255, .5); transition: .3s; background-position: center center; background-repeat: no-repeat;}
footer .f_link .sns a.insta {background-image: url(../images/common/sns_insta.svg);}
footer .f_link .sns a.kakao {background-image: url(../images/common/sns_kakao.svg);}
footer .f_link .sns a.ytb {background-image: url(../images/common/sns_ytb.svg); background-size: 22px auto;}
footer .f_link .sns a.blog {background-image: url(../images/common/sns_blog.svg); background-size: 22px auto;}
footer .f_link .sns a:hover {border-color: rgba(0, 0, 0, .7); background-color: rgba(0, 0, 0, .7);}

footer .f_btm {display: flex; align-items: flex-end; justify-content: space-between; padding-top: 30px; margin-top: 30px; border-top:1px solid rgba(192, 192, 192, 0.2); position: relative; z-index: 1;}
footer .f_btm ul {display: flex; flex-wrap:wrap; gap:12px 60px; max-width: 968px;}
footer .f_btm ul li strong {font-weight: 500; }
footer .f_btm ul li span {margin-left: 16px; color: #ccc;}
footer .f_btm .copy {color: #ccc;}

@media screen and (max-width: 1400px) {
	footer .f_btm ul {max-width: 615px;}
}
@media screen and (max-width: 1024px) {
	footer {padding: 50px 0 114px;}
	footer .f_top {display: block;}
	footer .f_top .img {width: 83px;}
	footer .f_top p {font-size: 16px; margin-top: 8px;}
	footer .f_top .family {margin-top: 20px; width: 240px;}

	footer .f_top .family ul {
		max-height: none;
	}

	footer .f_link {margin-top: 20px; flex-direction: column-reverse; align-items: flex-start;}
	footer .f_link .link {margin-top: 40px; gap:12px 30px; max-width: 211px; flex-wrap: wrap;}
	
	footer .f_link .link li a {font-size: 16px;}
	footer .f_link .link li:nth-child(1) {order: 0;}
	footer .f_link .link li:nth-child(3) {order: 1;}
	footer .f_link .link li:nth-child(4) {order: 2;}
	footer .f_link .link li:nth-child(2) {order: 3;}

	footer .f_btm {display: block;}
	footer .f_btm ul {gap:20px 60px; max-width: 360px;}
	footer .f_btm ul li:nth-child(1) {display: none;}
	footer .f_btm ul li:nth-child(6) {order: 0;}
	footer .f_btm ul li:nth-child(4) {order: 1;}
	footer .f_btm ul li:nth-child(5) {order: 2;}
	footer .f_btm ul li:nth-child(2) {order: 3;}
	footer .f_btm ul li:nth-child(3) {order: 4;}
	footer .f_btm ul li span {display: block; margin: 8px 0 0 0;}
	footer .f_btm .copy {margin-top: 20px;}
}

/* checkbox */
.chk_wrap {width: fit-content; display: flex; align-items: center; gap:6px; cursor: pointer; position: relative;}
.chk_wrap input {position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;}
.chk_wrap i {width: 20px; height: 20px; border:1px solid #ccc; transition: .3s; background-repeat: no-repeat; background-position: center; background-size: 12px auto;}
.chk_wrap input:checked ~ i {background-image:  url(../images/sub/icon_chk.svg); background-color: #EC1B23; border-color: #EC1B23;}
.chk_wrap p {font-size: 18px; font-weight: 500; color: #363636;}

/* radio */
.rdo_wrap {display: flex; gap:17px 30px; flex-wrap: wrap;}
.rdo_wrap label {cursor: pointer; position: relative; display: flex; align-items: center; gap:6px}
.rdo_wrap label input {position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none;}
.rdo_wrap label i {width: 20px; height: 20px; border-radius: 50%; border:1px solid #ccc; transition: .3s; position: relative;}
.rdo_wrap label i::after {display: block; content: ''; border-radius: 50%; width: 10px; height: 10px; position: absolute; left: calc(50% - 5px); top: calc(50% - 5px); opacity: 0; transition: .3s; background-color: #EC1B23; transform: scale(0);}
.rdo_wrap label input:checked ~ i {border-color: #EC1B23;}

.rdo_wrap label input:focus ~ i {
	border-width: 2px;
}

.rdo_wrap label input:checked ~ i::after {opacity: 1; transform: scale(1);}
.rdo_wrap label p {font-size: 18px; font-weight: 500; color: #363636;}

@media screen and (max-width: 1024px) {
	.chk_wrap p {font-size: 16px;}
	.rdo_wrap {flex-direction: column;}
	.rdo_wrap label p {font-size: 16px;}
}