@charset "utf-8";

/* 공통 */
    .inner {width: 100%; margin: 0 auto; max-width: 1520px; padding: 0 20px;}
    /* 공통 마우스 오버*/
    .hoverUnderline .hoverItem {display: inline; position: relative; text-decoration: none; background-image: linear-gradient(to right, black 50%, transparent 50%); background-size: 210% 1px; background-position: 100% 100%; background-repeat: repeat-x; transition: 0.5s ease-in-out;}
    .hoverUnderline:hover .hoverItem {background-position: 0 100%;}


/* header*/
#header, #header .header {height: 83px;}
#header .header {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: top 0.2s ease-in-out; background-color: transparent;}
#header .header .etc {position: relative; display: flex; align-items: center; justify-content: space-between; padding: 13px 0; margin: 0;}
#header .header .etc h1 a {display: block; transition: filter 0.4s;}
#header .header .etc h1 a img {width: 85%; height: 100%;}
#header .header .etc h1 a.logoHover {display: none;}
#header .header .etc .en {display: none;}
#header .header .etc .allMenuIcon {position: absolute; top: 33px; right: 0;}
#header .header .gnb {position: relative; transition: all 0.1s; height: 100%; border-bottom: 1px solid #000;}
#header .header .gnb nav {display: none; overflow: visible; padding: 0 0;}
#header .header .gnb .gnbWrap {display: flex; justify-content: center; align-items: center; gap: 0;}
#header .header .gnb .gnbWrap .depth01 {flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform; display: block; width: fit-content;}


/*메뉴 hover*/
#header .header .gnb .gnbWrap .depth01 > a {position: relative; display: block; padding: 12px 15px; }
#header .header .gnb .gnbWrap .depth01 > a:hover,
#header .header .gnb .gnbWrap .depth01 > a:visited,
#header .header .gnb .gnbWrap .depth01 > a:active {position:relative; transition:0.5s color ease;}
#header .header .gnb .gnbWrap .depth01 > a:after {content: ""; position: absolute;  transition: 0.5s all ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; bottom: -1px; height: 4px; width: 0; background: #ff5959;}
#header .header .gnb .gnbWrap .depth01 > a.sc:after {left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#header .header .gnb .gnbWrap .depth01 > a.sc:hover:after {width: 100%;}

#header .header.scrollOn {background: var(--Material-bg, rgba(255, 255, 255, 1));  transition: 0.25s ease-out;}
#header .header.scrollOn .etc h1 a.logo,
#header .header.headerBg .etc h1 a.logo {display: none;}
#header .header.scrollOn .etc h1 a.logoHover,
#header .header.headerBg .etc h1 a.logoHover  {display: block;}
#header .header.scrollOn .gnb .gnbWrap .depth01 > a,
#header .header.headerBg .gnb .gnbWrap .depth01 > a,
#header .header.scrollOn .etc .en a,
#header .header.headerBg .etc .en a {color: #000; font-weight: 600;}
#header .header.scrollOn #menu span,
#header .header.headerBg #menu span,
#header .header.scrollOn .etc .en a:after,
#header .header.headerBg .etc .en a:after {background-color: #000;}

#header .allMenu {display: none; padding: 13px 0; flex-direction: column; align-items: flex-start; gap: 12px; flex-shrink: 0; z-index: -1000; left: 0; top: 0; overflow: auto; position: fixed; white-space: nowrap; width: 100%; -webkit-overflow-scrolling: touch; overflow-x: hidden; opacity: 0; pointer-events: none; transition: opacity 0.4s; background: var(--Material-bg, rgb(0 0 0 / 90%)); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);}
#header .allMenu {opacity: 1; transition-delay: 0s; visibility: visible; overflow-y: clip; pointer-events: all; z-index: 1000; height: 100vh}
#header .allMenu .allMenuWrap {display: inline-block; position: relative; vertical-align: middle; white-space: normal; display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; height: calc(100% - 80px); gap: 12px; height: -moz-fit-content; height: fit-content;}
#header .allMenu .allMenuWrap .topinfo {width: 100%; display: flex; justify-content: space-between;}
#header .allMenu .allMenuWrap .topinfo .left h2 a {display: block; cursor: unset;}
#header .allMenu .allMenuWrap .topinfo .left h2 img {filter: brightness(0) invert(1); width: 85%; height: 100%;}
#header .allMenu .allMenuWrap .topinfo .right {display: flex; width: 50%; justify-content: end; height: 55px; align-items: center;}

#header .allMenu .allMenuWrap .menuCont {height: 100%; width: 100%; padding: 24px 0 0 0;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul {display: flex; flex-direction: column; gap: 8px;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li > a {position: relative; line-height: 1.5;  position: relative; display: block; padding: 10px 0; font-size: 19px; color: #fff; font-weight: 600;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li > a:after {content: ''; display: inline-block; position: absolute; top: 50%; right: 0; vertical-align: top; width: 12px; height: 12px; ); transform: translateY(-50%); z-index: 1;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li:has(.menuDepth02) > a:after {background-color: transparent; background-image: url("../../images/common/arteweek/more_icon.png");}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li.open > a:after {background-image: url("../../images/common/arteweek/close_icon.png");}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li > a.hoverUnderline .hoverItem {background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul {display: none;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul > li:first-child {margin-top: 6px;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li.height > ul {height: calc(100vh - 310px) !important;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul > li a {display: block; font-size: 16px; letter-spacing: -0.45px; padding: 0 0 0 12px; color: #fff;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li.open > ul {height: auto; padding-bottom: 10px; overflow-y: auto;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li.open > ul li {padding: 10px 0;}
#header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul > li a.hoverUnderline .hoverItem {background-image: linear-gradient(to right, #ffffff 50%, transparent 50%);}


/* 전체메뉴,모바일메뉴*/
#menu, #menu02 {position: relative; cursor: pointer; width: 20px; height: 18px; display: flex; justify-content: flex-end; }
#menu span, #menu02 span {position: absolute; width: 20px; height: 2px; background-color: #111; margin: 0 0;}
#menu span:nth-child(1), #menu02 span:nth-child(1) {top: 0;}
#menu span:nth-child(2), #menu02 span:nth-child(2) {top: 7px;}
#menu span:nth-child(3), #menu02 span:nth-child(3) {top: 14px;}
#menu02.on span:nth-child(1) {top: 6px; transform: rotate(135deg); transition: all 0.4s ease-in-out; background-color: #fff;}
#menu02.on span:nth-child(2) {opacity: 0;}
#menu02.on span:nth-child(3) {top: 6px; transform: rotate(-135deg); transition: all 0.4s ease-in-out; background-color: #fff;}
#header .gnbBg {overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 400px; opacity: 1; z-index: 20; background: var(--Material-bg, rgba(255, 255, 255, 1)); transition: all 0.4s ease-in-out; border-bottom: 1px solid var(--Stroke-list,  #e9e9e9);}
#header .gnbBg:before {content: ""; display: block; position: absolute; bottom: -10px; right: -2px; width: 228px; height: 253px; background: url("../../images/common/arteweek/gnb_bg.png") no-repeat 50% 50%; opacity: .4;}


/* footer*/
#footer .footer {padding-top: 130px; text-align: center;}
#footer .footer .footerLink {display: flex; align-items: center; border-top: 1px solid #000; border-bottom: 1px solid #000; height: 60px; gap: 100px;}
#footer .footer .footerLink li {display: inline-block;}
#footer .footer .footerLink li a {font-size: 16px; font-weight: 600;}
#footer .footer .footerBottom {display: flex; justify-content: center; align-items: end; padding: 50px 0 50px; flex-wrap: wrap; gap: 20px;}
#footer .footer .footerBottom .footerLogo {display: flex; align-items: center; flex-wrap: wrap; gap: 20px;}
#footer .footer .footerBottom .footerInfo p {font-size: 15px; color: #222; padding: 4px 0;}




/* ---------- 반응형 ---------- */
    /* 1400이상 PC*/
    @media only screen and (min-width: 1520px) {

    }

    /* 1110이상 PC*/
    @media only screen and (min-width: 1120px) {
        /* footer*/
        #footer .footer {text-align: left;}
        #footer .footer .footerBottom {justify-content: space-between;}
        #footer .footer .footerBottom .footerInfo {text-align: right;}
    }

    /* 1024이상 PC*/
    @media only screen and (min-width: 1024px) {
        /* 공통 */
        .inner {padding: 0 25px;}

        /* header*/
        #header, #header .header {height: 100px;}
        #header .header .inner {height: 100%;}
        #header .header .etc {margin: 0; position: relative; z-index: 10; padding: 0;}
        #header .header .etc h1 {position: absolute; top: 16px; left: 0;}
        #header .header .etc h1 a img {width: 100%; height: 100%;}
        #header .header .etc .en {display: block; position: absolute; top: 45px; right: 110px; left: auto; transform: translateX(0);}
        #header .header .etc .en a {position:relative; inline-block; font-size: 20px; font-weight: 400; letter-spacing: 0.4px; color: #fff;}
        #header .header .etc .en a:after {content: ""; display: block; position: absolute; top: 5px; right: -25px; width: 1px; height: 14px; transform: rotate(30deg); background-color: #fff;}
        #header .header .etc .allMenuIcon {top: 38px;}
        #header .header .gnb nav {display: block;}
        #header .header .gnb .gnbWrap .depth01 > a {color:#111; font-size: 21px; font-weight:700; line-height: 100%; letter-spacing: -0.4px; padding: 39px 42px; transition: padding 0.6s;}
        #header .header .gnb .gnbWrap .depth01.on > a,
        #header .header .gnb .gnbWrap .depth01 > a:hover {color: var(--Gray-2, #e72d2d); font-weight: 600;}
        #header .header .gnb .gnbWrap .depth01.on > div {background-color: #fbfbfb; margin-left: 1px;}
        #header .header .gnb .gnbWrap .depth01 > a:before {content: ""; display: block; border-bottom: 3px solid #000; height: 3px; position: absolute; left: 50%; right: 50%; transform: translateX(-50%); bottom: 0; width: 0; transition: width 0.4s;}
        #header .header .gnb .gnbWrap .depth01 > a span {padding-bottom: 10px;}
        #header .header .gnb .depth02 {display: none; opacity: 1; visibility: visible; pointer-events: all; transition: all 0.3s ease; position: absolute; top: 101px; left: 0; right: -1px; height: 298px; padding: 17px 0; background: transparent;}
        #header .header .gnb .depth01:last-child .depth02 {width: 380px; border-right: 0;}
        #header .header .gnb .depth01:last-child .depth02 .depth02Wrap {height: 100%;}
        #header .header .gnb .depth01:last-child .depth02 .depth02Wrap > ul {justify-content: flex-start !important; flex-wrap: wrap;}
        #header .header .gnb .depth02 .depth02Wrap {display: flex; gap: 30px;}
        #header .header .gnb .depth02 .depth02Wrap > ul {display: flex; flex-direction: column; gap: 4px; justify-content: center; width: 100%;}
        #header .header .gnb .depth02 .depth02Wrap > ul > li a {display: block; padding: 10px 0; color: var(--Font-dark, #111); font-size: 16px; line-height: 1.25; text-align: center;}

        /* 전체메뉴*/
        #header .allMenu {padding: 14px 0;}
        #header .allMenu .allMenuWrap {min-height: 800px; overflow: auto; overflow-x: hidden; height: 100vh;}
        #header .allMenu .allMenuWrap .topinfo {display: flex; align-items: center; max-width: 1520px; margin: 0 auto;}
        #header .allMenu .allMenuWrap .topinfo .left {display: block; width: 50%;}
        #header .allMenu .allMenuWrap .topinfo .left h2 {display: block;}
        #header .allMenu .allMenuWrap .topinfo .left h2 img {filter: brightness(0) invert(1); width: 69px; height: 66px;}
        #header .allMenu .allMenuWrap .topinfo .right {display: flex; width: 50%; justify-content: end; height: 70px; align-items: center;}
        #header .allMenu .allMenuWrap .menuCont {display: flex; justify-content: center; align-items: center;}
        #header .allMenu .allMenuWrap .menuCont .menuList {width: 100vw; max-width: 1520px; margin: 0 auto;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul {gap: 0;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li {align-items: center; gap: 0; flex-wrap: wrap; display: grid; height: -moz-fit-content; height: fit-content; grid-template-columns: 16.7vw auto; padding: 50px 0; align-items: flex-start;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li.height > ul {display: grid !important; height: auto !important;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li + li {border-top: 1px solid var(--Stroke-list,  #e9e9e9);}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li > a {color: #fff; font-size: 26px; font-weight: 600; letter-spacing: -0.72px; padding: 0;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li > a:after,
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li:has(.menuDepth02) > a:after{top: 7px; right: 0; width: 1px; height: 13px; background-color: #fff; margin: 4px 20px 0; transform: rotate3d(1, 1, 1, 45deg); background-image: none;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul {display: flex; flex-direction: column; gap: 17px; height: 0; padding-bottom: 10px; overflow: hidden; transition: height 0.3s ease-out;}

        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul {display: grid; grid-template-columns: repeat(4, 0.19fr); height: -moz-fit-content; height: fit-content; flex-wrap: wrap; gap: 21px 30px;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul > li {width: 180px;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul > li:first-child {margin-top: 0;}
        #header .allMenu .allMenuWrap .menuCont .menuList > ul > li > ul > li a {transition: all 0.4s; color: #fff; font-size: 18px; letter-spacing: -0.57px; line-height: 1.6;}

        /* 전체메뉴,모바일메뉴*/
        #menu {height: 23px;}
        #menu span, #menu02 span {height: 3px;margin: 4px 0;}
    }

    /* 모바일*/
    @media only screen and (max-width: 768px) {
        /* header*/
        #header .header .etc .allMenuIcon {position: inherit; top: 0; right: 0;}

        /* footer*/
        #footer .footer {padding-top: 95px;}
        #footer .footer .footerLink {height: 52px; justify-content: space-around;}
        #footer .footer .footerBottom .footerLogo {justify-content: center; gap: 15px;}
        #footer .footer .footerBottom .footerLogo img {width: 180px;}
        #footer .footer .footerBottom .footerInfo p {font-weight: 400;}
    }

    @media only screen and (max-width: 460px) {
        /* footer*/
        #footer .footer .footerLink {display: block; height: auto;}
        #footer .footer .footerLink li {display: block; padding: 10px 0;}
        #footer .footer .footerLink li + li {border-top: 1px solid #000;}
        #footer .footer .footerBottom {padding: 35px 0 40px;}
    }

    @media only screen and (max-width: 340px) {
        /* 공통 */
        #wrap {width: 340px;}
    }





























/* ---------- reset ---------- */
*, *:before, *:after  {-webkit-box-sizing: border-box; -moz-box-sizing: border-box;	box-sizing: border-box;  transition: 0.2s ease-out;}
html {overflow-x: hidden; font-size: 16px; color: #131313; }
body {margin: 0; padding: 0; font-size: 1rem; font-weight: 500; font-family: 'Pretendard', sans-serif; letter-spacing: -0.20px; background-color: #fff; color: #131313;}
html, div, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin: 0; padding: 0; border: 0}

h1, h2, h3, h4, h5, h6 {font-size: 1em; font-weight: 400;}
ul, li, dt, dd, ol, dl, dd, dt, p {margin: 0; padding:0; list-style:none;}
legend, caption, hr {position: absolute; margin: 0; padding: 0; font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden;}
label, input, button, select, img {vertical-align: middle;}
img {max-width: 100%;}

input, button {border: 0; margin: 0; padding: 0; font-family: 'Pretendard', sans-serif;}
input[type="image"]{border-radius: 0;}
input[type="submit"]{border-radius: 0; cursor: pointer;}
input[type="text"]{border-radius: 0;}
input[type="password"]{border-radius: 0;}
input[type="checkbox"]{border-radius: 0;}
input[type="reset"]{border-radius: 0;}
input::placeholeder { color:#949494; }
input::-webkit-input-placeholder { color:#949494; }
input:-ms-input-placeholder { color:#949494; }
input:-ms-input-placeholder { color:#949494; }
button { cursor:pointer; background-color: transparent;}

table {border-collapse: collapse; border-spacing: 0; table-layout: fixed; width: 100%;}
textarea, select {overflow: auto; border-radius: 0;}
select {margin: 0; border-radius: 0;}
em, address{font-style: normal;}
form, fieldset, blockquote{margin: 0; padding: 0; border: 0}

/* anchor */
a:link {color:#333; text-decoration:none;}
a:visited, a:active {color:#222; text-decoration:none;}
a:hover {color: #222; text-decoration:none; }

/* skipNav */
#skipNav{position: relative; width: 100%; height: 0; z-index: 10000; }
#skipNav a{display: block; position: absolute; top: -500px; left: 0; font-size: 1px; text-indent: -10000px; overflow: hidden;}
#skipNav a:active, #skipNav a:focus {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 30px; line-height: 28px; background-color: #ff5959; border: 1px solid #cecece; font-size: 14px; color: #fff; text-indent: 0; text-align: center;}

/* 말줄임표, 숨김처리 */
.ellipsis {display: inline-block !important; overflow: hidden; max-width: 95%; vertical-align: middle; text-overflow: ellipsis; white-space: nowrap;}
.ellipsisMulti {white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 1.8rem; height: 3.6rem;}
.blindtxt {font-size: 1px !important; height: 1px !important; overflow: hidden !important; position: absolute !important; top: -1000px !important; width: 1px !important; color: transparent !important;}
.clear:after {content: ""; display: block; clear: both;}

/* position */
.positionA{position:absolute !important;}
.positionF{position:fixed !important;}
.positionR{position:relative !important;}
.positionS{position:static !important;}

/* align */
.tAC{text-align:center !important;}
.tAL{text-align:left !important;}
.tAR{text-align:right !important;}

.fR{float:right !important;}
.fL{float:left !important;}
.fN{float:none !important;}

.mAuto{margin:0 auto !important;}

.clear{clear:both !important;}

.overH{overflow:hidden !important;}
.overA{overflow:auto !important;}
.overS{overflow:scroll !important;}
.overXh{overflow-x:hidden !important;}
.overYh{overflow-x:hidden !important;}
.overXa{overflow-x:auto !important;}
.overYa{overflow-y:auto !important;}
.overXs{overflow-x:scroll !important;}
.overYs{overflow-y:scroll !important;}

.disInline{ display:inline !important;}
.disBlock{ display:block !important;}
.disIBlock{ display:inline-block !important;}
.disN {display:none !important;}
.disF {display:flex !important;}

/* padding, margin */
.mT0 {margin-top: 0 !important;}
.mT10 {margin-top: 10px !important;}
.mT20 {margin-top: 20px !important;}
.mT30 {margin-top: 30px !important;}
.mT40 {margin-top: 40px !important;}
.mT50 {margin-top: 50px !important;}
.mT120 {margin-top: 120px !important;}

.mB0 {margin-bottom: 0 !important;}
.mB10 {margin-bottom: 10px !important;}
.mB20 {margin-bottom: 20px !important;}
.mB30 {margin-bottom: 30px !important;}
.mB40 {margin-bottom: 40px !important;}
.mB50 {margin-bottom: 50px !important;}

.pl05 {padding-left: 5px;}
.pl10 {padding-left: 10px;}
.pl20 {padding-left: 20px;}
.pl30 {padding-left: 30px;}
.pl40 {padding-left: 40px;}
.pl50 {padding-left: 50px;}

.pT0 {padding-top: 0;}
.pT10 {padding-top: 10px;}
.pT20 {padding-top: 20px;}
.pT30 {padding-top: 30px;}
.pT40 {padding-top: 40px;}
.pT50 {padding-top: 50px;}

.pB0 {padding-bottom: 0;}
.pB10 {padding-bottom: 10px;}
.pB20 {padding-bottom: 20px;}
.pB30 {padding-bottom: 30px;}
.pB40 {padding-bottom: 40px;}
.pB50 {padding-bottom: 50px;}