html{
	word-break: keep-all;
	font-family: 'Pretendard';
	--red:#dd2525;
	--headerH:100px;
	--vh:1vh;
	--vh100:100vh;
}
a{display: block;}
button{border: 0; margin: 0; padding: 0; cursor: pointer;}

.wrap{position: relative; margin: 0 auto; width: 95%;}
.wrap[max='1600']{max-width: 1600px;}
.wrap[max='1440']{max-width: 1440px;}
.wrap[max='1300']{max-width: 1300px;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	.wrap{width: 90%;}
}
@media screen and (max-width:500px) {}
@media screen and (max-width:320px) {}



/* header */
header{
	position: fixed; z-index: 999; width: 100%;
	height: var(--headerH); left: 0; top: 0;
}
header .wrap{
	height: 100%;
	display: flex; align-items: center; justify-content: space-between;
}
header .wrap h1{position: relative; z-index: 999;}
header ._logoSvg{height: 63px;}
header ._logoSvg .st0{fill:#FFFFFF;}
header ._logoSvg .st1{fill:#DD2525;}

header .gnb{
	display: flex; transform: translateX(30px); height: 100%;
}
header .gnb a{
	font-size: 20px; font-weight: 600; letter-spacing: -0.025em;
	color: #fff; padding: 0 1.5em; box-sizing: border-box;
	height: 100%; display: flex; align-items: center; justify-content: center;
}
html.pc header .gnb a:hover{color: var(--red) !important; transition-duration: 0.2s;}
header .gnb a p{}
header .menuIco{
	width: 38px; height: 24px;
	display: flex; align-items: center; justify-content: center; flex-direction: column;
	position: relative;
	display: none; z-index: 999;
}
header .menuIco::before {
	content:''; display: block; position: absolute; width: 100%; height: var(--headerH);
	padding: 0 2.5vw;
}
header .menuIco div{
	position: absolute; transition: opacity,transform,top,bottom; transition-duration: 0.5s;
	width: 100%; height: 3px; background-color: #fff; border-radius: 10px;
	transform-origin: center center;
}
header .menuIco div:nth-child(1){top: 0;}
header .menuIco div:nth-child(2){}
header .menuIco div:nth-child(3){bottom: 0;}
header .menuArea {
    position: absolute;
    top: 0;
    width: 100%;
    height: var(--vh100);
    backdrop-filter: blur(10px);
    background-color: #000000b7;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s,background-color 0.5s;
    /* overflow-y: auto; */
	padding: 70px 2.5%;
	box-sizing: border-box;
}

header .menuArea div {
    height: 100%; padding-bottom: 240px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: flex-end;
}
/* 가로가 길경우 */
@media (orientation: landscape){
	header .menuArea div{padding-bottom: 0;}
}


header .menuArea div nav {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    max-height: 100%;
    overflow-y: auto;
}

header .menuArea div a {
    font-size: 40px;
    color: #fff;
    font-weight: 700;
    padding: 0.3em 0;
    text-align: right;
    white-space: nowrap; /* 텍스트가 줄바꿈 없이 한 줄로 보이게 */
}
header .menuArea div a p{}


/* black */
header ._logoSvg .st0{transition: fill 0.2s;}
header .gnb a{transition: color 0.2s;}
header.black ._logoSvg .st0{fill: #000;}
header.black .gnb a{color: #000;}
header.black .menuIco div{background-color: #000;}


/* menuOn */
header.menuOn .menuIco{}
header.menuOn .menuIco div:nth-child(1){transform: rotate(45deg); top: 10.5px;}
header.menuOn .menuIco div:nth-child(2){opacity: 0;}
header.menuOn .menuIco div:nth-child(3){transform: rotate(-45deg); bottom: 10.5px;}
header.menuOn .menuArea{opacity: 1; pointer-events: auto;}

header.menuOn ._logoSvg .st0{fill: #fff;}
header.menuOn .gnb a{color: #fff;}
header.menuOn .menuIco div{background-color: #fff;}


@media screen and (max-width:1600px) {
	:root{--headerH:76px;}
	header ._logoSvg{height: 46px;}
	header .gnb a{font-size: 18px;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {
	:root{--headerH:64px;}
	header .wrap{padding: 10px 0; box-sizing: border-box;}
	header h1{height: 100%;}
	header h1 a{height: 100%;}
	header ._logoSvg{height: 100%;}
}
@media screen and (max-width:1024px) {
	header .gnb{display: none;}

	header .menuIco{display: flex;}
}
@media screen and (max-width:820px) {
	header .menuArea{padding: 70px 5%; padding-bottom: 40px;}
	header .menuArea div a{font-size:  28px;}

	header .menuIco::before{padding: 0 5vw;}
}
@media screen and (max-width:500px) {
	:root{--headerH:54px;}
	header .menuIco{width: 32px; height: 20px;}
	header .menuIco div{height: 2px;}
	header.menuOn .menuIco div:nth-child(1){top: 9px;}
	header.menuOn .menuIco div:nth-child(3){bottom: 9px;}
}
@media screen and (max-width:320px) {}








/* footer */
footer{background-color: #101010; color: #fff; position: relative; z-index: 2;}
footer .wrap{
	display: flex; justify-content: space-between;
	padding-top: 50px; padding-bottom: 66px;
}
footer .left{}
footer .left .logo{}
footer .left .logo svg{width: 134px; margin-bottom: 24px;}
footer .left .logo svg .st0{fill: #fff;}
footer .left .logo svg .st1{fill: var(--red);}
footer .left p{
	color: #7c7c7c; letter-spacing: -0.025em; line-height: 1.3;
}
footer .center{
	position: absolute; left: calc(420/1600*100%);
	letter-spacing: -0.025em; line-height: 1.3;
}
footer .center > p{
	font-weight: 600; letter-spacing: -0.025em;
	margin: 1em 0; cursor: pointer;
}
footer .center .info{
	display: flex; flex-wrap: wrap; gap: 8px 1.2em; max-width: 500px;
}
footer .center .row{
	display: flex; gap: 0.6em; position: relative;
}
footer .center .row::after{
	content:''; display: block; width: 1px; height: 1em; background-color: #7c7c7c;
	position: absolute; right: -0.7em; top: 50%; transform: translateY(-50%);
}
footer .center .row:nth-child(3):after{display: none;}
footer .center .row:nth-child(4):after{display: none;}
footer .center .row div{color: #7c7c7c;}
footer .center .row p{color: #c9c9c9;}
footer .right{
	display: flex; flex-direction: column;
}
footer .right .family{position: relative; margin-bottom: 20px;}
footer .right .family .face{
	font-size: 18px; font-family: 'Roboto';
	display: flex; align-items: center; justify-content: space-between; padding: 0 calc(20/18*1em);
	width: calc(175/18*1em); height: calc(48/18*1em); border: 1px solid #7c7c7c; box-sizing: border-box;
	cursor: pointer;
	transition: background-color,color,border-color; transition-duration: 0.1s;
}
footer .right .family .face:hover{background-color: #fff; border-color: #fff; color: #000;}
footer .right .family .face p{}
footer .right .family .face i{}
footer .right .family ul{
	position: absolute; left: 0; bottom: 100%; margin-bottom: 10px;
	min-width: 100%;
	display: none;
}
footer .right .family ul li{}
footer .right .family ul li a{
	padding: calc(10/18*1em) calc(20/18*1em); box-sizing: border-box;
	background-color: #000;
	border: 1px solid #7c7c7c;
	transition: background-color,color,border-color; transition-duration: 0.1s;
}
footer .right .family ul li:first-child a{border-bottom: 0;}
footer .right .family ul li:last-child a{border-top: 0;}
html.pc footer .right .family ul li a:hover{background-color: #fff; color: #000; border-color: #fff;}
footer .right .sns{
	font-family: 'Roboto'; letter-spacing: -0.025em; color: #dddddd;
	text-align: right;
}
footer .right .sns a{}


@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {
	footer .wrap{padding-top: 200px;}
	footer .left{position: absolute; top: 50px;}
	footer .center{position: unset;}
}
@media screen and (max-width:820px) {
	footer .wrap{flex-direction: column; align-items: flex-end; padding-top: 50px; gap: 30px;}
	footer .left{position: unset;}
	footer .left .logo{text-align: right;}
	footer .center{text-align: right;}
	footer .center > p{margin-top: 0;}
	footer .center .info{justify-content: flex-end;}
}
@media screen and (max-width:500px) {
	footer .left .logo svg{margin-bottom: 14px;}
	footer .left p{font-size: 13px;}
	footer .center{font-size: 14px;}
	footer .center .info{flex-direction: column;}
	footer .center .row{justify-content: flex-end;}
	footer .center .row::after{display: none;}

	footer .right .family .face{font-size: 16px;}
}
@media screen and (max-width:320px) {}





/* max-width */
@media screen and (max-width:1600px) {
	.max-1600{display: block;}
	.min-1601{display: none;}
	.max-1600-none{display: none;}
}
@media screen and (max-width:1440px) {
	.max-1440{display: block;}
	.min-1441{display: none;}
	.max-1440-none{display: none;}
}
@media screen and (max-width:1280px) {
	.max-1280{display: block;}
	.min-1281{display: none;}
	.max-1280-none{display: none;}
}
@media screen and (max-width:1024px) {
	.max-1024{display: block;}
	.min-1025{display: none;}
	.max-1024-none{display: none;}
}
@media screen and (max-width:820px) {
	.max-820{display: block;}
	.min-821{display: none;}
	.max-820-none{display: none;}
}
@media screen and (max-width:500px) {
	.max-500{display: block;}
	.min-501{display: none;}
	.max-500-none{display: none;}
}
@media screen and (max-width:320px) {
	.max-320{display: block;}
	.min-321{display: none;}
	.max-320-none{display: none;}
}


/* min-width */
@media screen and (min-width:1601px) {
	.min-1601{display: block;}
	.max-1600{display: none;}
	.min-1601-none{display: none;}
}
@media screen and (min-width:1441px) {
	.min-1441{display: block;}
	.max-1440{display: none;}
	.min-1441-none{display: none;}
}
@media screen and (min-width:1281px) {
	.min-1281{display: block;}
	.max-1280{display: none;}
	.min-1281-none{display: none;}
}
@media screen and (min-width:1025px) {
	.min-1025{display: block;}
	.max-1024{display: none;}
	.min-1025-none{display: none;}
}
@media screen and (min-width:821px) {
	.min-821{display: block;}
	.max-820{display: none;}
	.min-821-none{display: none;}
}
@media screen and (min-width:501px) {
	.min-501{display: block;}
	.max-500{display: none;}
	.min-501-none{display: none;}
}
@media screen and (min-width:321px) {
	.min-321{display: block;}
	.max-320{display: none;}
	.min-321-none{display: none;}
}



._grayBg{
	display: none;
	position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,0.5); z-index: 9999; cursor: pointer;
}
._privacy_popup_btn{cursor: pointer;}
/* 개인정보 팝업 */
._privacy_popup {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99999;
	width: 95%;
	height: 60vh;
	max-width: 800px;
	max-height: 600px;
}
._privacy_popup i {
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 40px;
	font-weight: 800;
	cursor: pointer;
	color: #fff;
}
._privacy_popup .contents {
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding: 20px 0;
	padding-right: 5px;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
}
._privacy_popup .contents .box {
	width: 100%;
	height: 100%;
	overflow: auto;
	padding: 40px 30px;
	box-sizing: border-box;
	word-break: keep-all;
}
._privacy_popup .contents .box::-webkit-scrollbar {
	width: 8px;
}
._privacy_popup .contents .box::-webkit-scrollbar-thumb {
	background-color: #2f3542;
	border-radius: 10px;
}
._privacy_popup .contents .box2 {
	color: #000;
}
._privacy_popup .contents .box2 .title {
	font-size: 16px;
	line-height: 1.5;
	background-color: #e5e5e5;
	padding: 24px 16px;
	box-sizing: border-box;
	border-radius: 5px;
	margin-bottom: 40px;
}
._privacy_popup .contents .box2 .col {
	margin-bottom: 40px;
	line-height: 1.5;
}
._privacy_popup .contents .box2 .col:last-child {
	margin-bottom: 0;
}
._privacy_popup .contents .box2 .col strong {
	display: block;
	font-weight: 700;
	font-size: 500px;
	font-size: 20px;
	padding-bottom: 1em;
}
._privacy_popup .contents .box2 .dash {
	display: block;
	color: #646464;
	font-size: 14px;
	position: relative;
	padding-left: 30px;
	box-sizing: border-box;
	margin-bottom: 10px;
}
._privacy_popup .contents .box2 .dash b {
	position: absolute;
	top: 0;
	left: 10px;
	font-weight: 500;
}
._privacy_popup .contents .box2 .dash.mt {
	margin-top: 20px;
}
._privacy_popup .contents .box2 .dash.mb {
	margin-bottom: 20px;
}
@media screen and (max-width: 820px) {
	._privacy_popup .contents .box {
		padding: 0 14px;
	}
	._privacy_popup .contents .box2 .title {
		font-size: 14px;
	}
	._privacy_popup .contents .box2 .col {
		font-size: 15px;
	}
	._privacy_popup .contents .box2 .col strong {
		font-size: 17px;
		padding-bottom: 5px;
	}
}