:root{
    --red:#c01640;
}

html{font-family: 'Pretendard'}

.wrap[max="1800"] {max-width: 1800px;}
.wrap[max="1700"] {max-width: 1700px;}
.wrap[max="1600"] {max-width: 1600px;}
.wrap[max="1560"] {max-width: 1560px;}
.wrap[max="1450"] {max-width: 1450px;}
.wrap[max="1440"] {max-width: 1440px;}
.wrap[max="1280"] {max-width: 1280px;}
.wrap[max="1260"] {max-width: 1260px;}
.wrap[max="970"] {max-width: 970px;}

.wrap{width: 95%;margin: 0 auto;position: relative;z-index: 1;}
@media screen and (max-width:820px) {
    .wrap{width: 90%;}
}

/* body 스크롤 방지 */
body.menu-open{overflow: hidden;}


/* header */
header{position: fixed;top: 0;left: 0;width: 100%;z-index: 100001;width: 100%;box-sizing: border-box;height: 93px;transition: background-color 0.3s;}
header:hover{background-color: #fff;}
header:hover .logo_color{opacity: 1;}
header:hover .gnb >li span{color: #000000;}

header.show {opacity: 1;pointer-events: auto;}
header .wrap{display: flex;justify-content: space-between;align-items: center;height: 100%;z-index: auto;}
header .logo{position: relative;width: 68px;height: 41px;}
header .logo img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: contain;transition: opacity 0.3s;}
header .logo_color{opacity: 0;}
header .logo_color.active{opacity: 1 !important; z-index: 123;}


header .gnb{display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
header .gnb li{padding: 10px 25px;}
header .gnb li span{font-size: 18px;font-weight: 400;color: #fffefe;letter-spacing: -0.045em;display: block;}
header .gnb > li:hover > a > span{color:#c01640;font-weight: 700;}
header .menuBtn{width: 93px;height: 93px;background-color: #c01640;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 10px;position: absolute;right: 0;top: 0;z-index: 999;cursor: pointer;}
header .menuBtn div{width: 29px;height: 2px;background-color: #ffffff;}
header .menuBtn i{font-size: 35px;color: #ffffff;position: absolute;display: none;}

header .menuBtn.active div{display: none;}
header .menuBtn.active i{display: block;}



header .menuBtnMob{opacity: 0;display: flex;flex-direction: column;gap: 5px;align-items: flex-end;}
header .menuBtnMob div{width: 24px;height: 2px;background-color: #ffffff;}
header .menuBtnMob div:nth-child(2){width: 16px;}

header.color{background-color: #fff; border-bottom: 1px solid #e7e7e7;}
header.color .logo_color{opacity: 1;}
header.color .gnb > li span{color: #000000;}
header.color .gnb > li:hover > a > span{color: #c01640;font-weight: 700;}


header .sub{position: absolute;top: 172%;left: 50%;transform: translateX(-50%);width: 100vw;background-color: rgba(255, 255, 255, 0.96);display: flex;align-items: center; justify-content: center;gap: 10px;padding: 10px 0;box-sizing: border-box;height: 63px;opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;pointer-events: none;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
header .sub li{padding: 10px 20px;}
header .sub li span{color: #000000 !important;}
header .sub li:hover span{color: #c01640 !important;font-weight: 700;}

/* 서브메뉴 활성화 */
header .sub.active{opacity: 1;visibility: visible;pointer-events: auto;}

header .menuArea{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30;
    width: 100vw;
    height: 100vh;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

header .menuArea.active{opacity: 1;visibility: visible;}
header .menuArea ._all{display: flex;align-items: flex-start;justify-content: center;gap: 10vw;}
header .menuArea ._all > li > div > a > em{display: block;width: 8px;height: 8px;background-color: #bebebe;border-radius: 50%;transition: background-color 0.3s;}
header .menuArea ._all > li:hover > div > a em{background-color: #c01640;}
header .menuArea ._all > li > div{position: relative;padding: 60px 0;box-sizing: border-box;}
header .menuArea ._all > li:not(:last-child) > div::after {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: #e7e7e7;
    position: absolute;
    right: -5vw;
    top: 0;
    z-index: 1;
    min-height: 461px;
}
header .menuArea ._all > li.active em{background-color: #c01640;}
header .menuArea ._all > li > div > a{display: flex;align-items: center;justify-content: center;gap: 25px;flex-direction: column;}
header .menuArea ._all > li > div > a > span{font-size: 28px;font-weight: 700;color: #000000;transition: color 0.3s;}
header .menuArea ._all > li:hover > div > a > span{color: #c01640;}
header .menuArea ._all > li.active > div > a > span{color: #c01640;}
header .menuArea ._all_sub{margin-top: 30px;}
header .menuArea ._all_sub > li > a > span{font-size: 20px;font-weight: 500;color: rgba(0, 0, 0, 0.8);text-align: center;display: block;transition: color 0.3s;}
header .menuArea ._all_sub > li:hover > a > span{color: #c01640;}
header .menuArea ._all_sub > li{padding-bottom: 40px;}
header .menuArea ._all_sub > li:last-child{padding-bottom: 0;}

header .menuArea_mob{position: fixed;top: 0;left: 0;z-index: 99;width: 100vw;height: 100vh;background: #fff;opacity: 0;visibility: hidden;transition: opacity 0.3s, visibility 0.3s;display: flex;flex-direction: column;align-items: center;justify-content: flex-start;padding-top: 100px;}
header .menuArea_mob.active{opacity: 1;visibility: visible;}
header .menuArea_mob > ul{display: flex;flex-direction: column;align-items: flex-start;justify-content: center;width: 90vw;}
header .menuArea_mob > ul > li{display: flex;align-items: flex-start;justify-content: flex-start;gap: 20px;border-top: 1px solid #e8e8e8;width: 100%;padding: 30px 0;box-sizing: border-box;}
header .menuArea_mob > ul > li:last-child{border-bottom: 1px solid #e8e8e8;}
header .menuArea_mob > ul > li > a{min-width: 7em;}
header .menuArea_mob > ul > li > a span{font-size: 22px;font-weight: 700;color: #000000;text-align: left;display: block;}
header .menuArea_mob > ul li span{font-size: 20px;font-weight: 500;color: rgba(0, 0, 0, 0.8);text-align: center;display: block;transition: color 0.3s;}

header .menuArea_mob > ul > li > a span:hover{
    color: #c01640;
}
header .menuArea_mob .sub_mob li:hover span{color: #c01640;}
header .menuArea_mob .close{position: absolute;top: 0;right: 0;z-index: 10001;cursor: pointer;width: 67px;height: 67px;display: flex;align-items: center;justify-content: center;background-color: #c01640;cursor: pointer;}
header .menuArea_mob .close i{font-size: 24px;color: #ffffff;}
header .menuArea_mob .sub_mob{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    padding: 0 25px;
    box-sizing: border-box;
}
header .menuArea_mob .sub_mob li{padding: 0 25px;box-sizing: border-box;}
header .menuArea_mob .sub_mob li span{font-size: 16px;font-weight: 400;color: #262626;text-align: center;display: block;}


footer{background-color: #e7e7e7;padding: 30px 0; box-sizing: border-box;padding-right: 100px;}
footer .top{display: flex;align-items: center;justify-content: space-between;}
footer .top .copy p{font-family: 'Inter Tight';font-weight: 600;font-size: 14px;color: #000000;line-height: 1.3571;letter-spacing: -0.025em;}
footer .top .copy p em{font-weight: 400;color: #9f9f9f;}
footer .top .btnBx{display: flex;align-items: center;justify-content: center;cursor: pointer;width: 61px;height: 61px;border-radius: 50%;background-color: #000000;margin-top: 2em;transition: background-color 0.3s;}
footer .top .btnBx:hover{background-color: #932aff;}
footer .top .btnBx i{font-size: 18px;color: #fff;}


footer .bottom{display: flex;align-items: flex-start;gap: 300px;}
footer .footer_info{display: flex;align-items: flex-start;gap: 120px;}
footer .footer_info .row{display: flex;align-items: flex-start;padding-bottom: 15px;line-height: 1.5882;}
footer .footer_info .row:last-child{padding-bottom: 0;}
footer .footer_info em, footer .footer_info p{font-size: 17px;letter-spacing: -0.05em;}
footer .footer_info em{font-weight: 600;}
footer .footer_info p{color: #787878;font-weight: 400;}
footer .footer_info .left em{min-width: 90px;}
footer .footer_info .right em{min-width: 140px;}


.quick{
    position: fixed;top: 30%;right: 1.05%;transform: translateY(-50%);z-index: 100;
    justify-content: center;transform: rotate(270deg);transform-origin: right center;
    display: flex;
}
.quick .row{display: flex;align-items: center;justify-content: center;gap: 8px;border-top-left-radius: 14px;border-top-right-radius: 14px;padding: 12px 24px;box-sizing: border-box;cursor: pointer;}
.quick .row.n1{background: #c01640;color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);transition: background-color 0.3s, color 0.3s;}
.quick .row.n2{background: #932aff;color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);transition: background-color 0.3s;}
.quick .row.n3{background: #ececee;color: #000;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);transition: background-color 0.3s, color 0.3s;}

.quick .row.n1:hover{background-color: #fff;color: #000;}
.quick .row.n2:hover{background-color: #000000;}
.quick .row.n3:hover{background-color: #000000;color: #fff;}

.quick_mob{position: fixed;bottom: 5%;right: 2%;z-index: 100;
    justify-content: center;flex-direction: column;gap: 10px;
    display: none;
}
.quick_mob .cir{width: 49px;height: 49px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.quick_mob .cir.n1{background-color: #c01640;}
.quick_mob .cir.n2{background-color: #932aff;}
.quick_mob .cir i{font-size: 18px;color: #fff;}

@media screen and (max-width: 1680px){
    footer{padding-right: 0;}
    footer .bottom {gap: 160px;}
}
@media screen and (max-width: 1440px){
    footer .footer_logo{max-width: 220px;}
    footer .footer_info {gap: 80px;}

    footer .top .btnBx{margin-top: unset;}
    footer .bottom{padding-top: 20px;}
}
@media screen and (max-width: 1280px){

    header .menuArea ._all > li > a > span {font-size: 24px;}
    header .menuArea ._all_sub > li > a > span {font-size: 18px;}
    header .gnb li{padding: 10px 15px;}

    footer .footer_info em, footer .footer_info p {font-size: 16px;}
    footer .footer_logo {max-width: 180px;}
    footer .bottom {gap: 80px;}
    footer .footer_info {gap: 60px;}

}
@media screen and (max-width: 1024px){
    header{height: 60px;}
    header:hover {background-color: unset;}
    header:hover .gnb li span {color: unset;}
    header .logo{width: 44px;height: 38px;}
    header .gnb{display: none;}
    header .menuBtn{display: none;}
    header .menuBtnMob{opacity: 1;}
    header.color .menuBtnMob div{background-color: #000000;}
    header .logo_default { opacity: 1; }
    header .logo_color { opacity: 0; }
    header.color .logo_default { opacity: 0; }
    header.color .logo_color { opacity: 1; }
    header.color:hover .logo_default { opacity: 0; }
    header.color:hover .logo_color { opacity: 1; }
    header:hover .logo_default { opacity: 1; }

    header:hover .logo_color { opacity: 0; }
    header:hover {background-color: transparent !important;}
    header.color:hover {background-color: #fff !important;}
    header.color:hover .logo_color {opacity: 1 !important;}
    header:hover .logo_default {opacity: 1 !important;}
    header.color:hover .logo_default {opacity: 0 !important;}
    header:hover .gnb > li span {color: inherit !important;}
    header.color:hover .gnb > li span {color: #000 !important;}



    .quick{display: none !important;}
    .quick_mob{display: flex;}
    footer .footer_logo {max-width: 120px;}
    footer .footer_info {gap: 20px;}

    footer .footer_info .left em {min-width: 60px;}
    footer .footer_info .right em {min-width: 120px;}


}
@media screen and (max-width: 820px){
    header .menuArea_mob .sub_mob {gap: 10px;row-gap: 20px;}
    header .menuArea_mob .sub_mob li {padding: 0 15px;}
    .quick{right: 2.05%;}
    footer .bottom{flex-direction: column;}
    footer .footer_info{flex-direction: column;}
    footer .footer_info .left em {min-width: 120px;}
}
@media screen and (max-width: 500px){
    /* header{top: 2%;} */
    header .logo {width: 44px;}
    header .menuBtn {max-width: 62px;padding: 8px 0;}
    header .menuBtn div {width: 18px;}
    header .menuBx {gap: 10px;}

    header .menuArea_mob > ul > li{gap: 0;}
    header .menuArea_mob > ul > li > a span {font-size: 18px;}
    header .menuArea_mob > ul > li > a {min-width: 6em;}
    header .menuArea_mob .sub_mob li {padding: 0 5px;}
    header .menuArea_mob > ul > li{padding: 25px 0;}
    footer .footer_info em, footer .footer_info p {font-size: 14px;}
    footer .footer_info .left em {min-width: 100px;}
    footer .footer_info .right em {min-width: 100px;}
    footer .top .btnBx{width: 50px;height: 50px;}
}
@media screen and (max-width: 360px){
    footer .footer_info .row{flex-direction: column;}
    header .menuArea_mob > ul > li {padding: 12px 0;}
    header .menuArea_mob > ul > li > a span {font-size: 16px;}
    header .menuArea_mob .sub_mob li span {font-size: 14px;}
}






/* 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;}
}