@charset 'utf-8';
/* 공통 */
.layout {
    width: 90%;
    max-width: 1560px;
    margin: 0 auto;
    position: relative;
}
.bgGray {
    background-color: var(--color-gray);
}
.bgGrayEc {
    background-color: var(--color-grayec);
}
.colorGold {
    color: var(--color-gold);
}
.bigTit {
    font-size: 128px;
    font-weight: var(--fw-black);
    line-height: 0.9;
}
.btnMore {
    display: flex;
    align-items: center;
    font-size: var(--font-15);
    font-weight: var(--fw-bold);
}
.btnMore:hover {
    color: inherit;
}
.btnMore img {
    width: auto;
    margin-top: 2px;
    margin-left: var(--space-10);
    transition: var(--transition);
    transform: rotate(0);
}
.btnMore:hover img {
    transform: rotate(45deg);
}
.btnGoldL,
.btnGoldS,
.btnGoldSp,
.btnDarkL,
.btnDarkSp {
    width: 100%;
    height: 66px;
    padding: 0 var(--space-40);
    font-size: var(--font-20);
    display: flex;
    align-items:center;
    justify-content: space-between;
    background-color: var(--color-gold);
    color: var(--color-white);
    font-weight: var(--fw-medium);
}
.btnDarkL {
    background-color: var(--color-dark);
}
.btnGoldS,
.btnGoldSp,
.btnDarkSp {
    width: 102px;
    height: 44px;
    font-size: var(--font-16);
    padding: 0 var(--space-20);
}
.btnGoldSp {
    width: 130px;
    padding: 0 var(--space-15);
}
.btnDarkSp {
    width: 180px;
    padding: 0 var(--space-15);
    justify-content: center;
    background-color: var( --color-gray7b);
}
.btnGoldL:hover,
.btnGoldS:hover,
.btnGoldSp:hover,
.btnDarkL:hover {
    color: var(--color-white);
}
.btnGoldL img,
.btnDarkL img {
    transform: rotate(0deg);
    transition: var(--transition);
}
.btnGoldS img,
.btnGoldSp img {
    transform: rotate(-90deg);
    transition: var(--transition);
}
.btnGoldL:hover img,
.btnDarkL:hover img {
    transform: rotate(45deg);
}
.btnGoldS:hover img,
.btnGoldSp:hover img {
    transform: rotate(-45deg);
}
.btnArea {
    display: flex;
    justify-content: center;
    margin-top: var(--space-50)
}
.textBasic,
.tableBox .tableRow .tableTd,
.barList > li,
.dotList > li,
.hyphenList > li,
.numberList > li,
.halfGrid,
.threeGrid,
.table th,
.table td,
.tableReal td {
    font-size: var(--font-20);
    font-weight: var(--fw-light);
    color: var(--color-basic);
    line-height: 1.5;
}
.subTitleR {
    font-size: var(--font-30);
    font-weight: var(--fw-bold)
}
.subTitle {
    font-size: var(--font-28);
    font-weight: var(--fw-bold)
}
.subTitleM {
    font-size: var(--font-25);
    font-weight: var(--fw-bold);
}
.subTitleS {
    font-size: var(--font-22);
    font-weight: var(--fw-bold);
}
.subTitleXs {
    font-size: var(--font-20);
    font-weight: var(--fw-bold);
}
.subTxtM,
.reservation .reservationForm input.inputBox::placeholder {
    font-size: var(--font-18);
    font-weight: var(--fw-bold);
}
.subTxtS {
    font-size: var(--font-16)
}
.dotList > li,
.hyphenList > li {
    position: relative;
    padding-left: var(--space-15);
    margin-bottom: var(--space-5)
}
.numberList > li {
    position: relative;
    padding-left: 33px;
    margin-bottom: var(--space-15)
}
.dotList > li:last-child,
.hyphenList > li:last-child,
.numberList > li:last-child {
    margin-bottom: 0
}
.dotList > li::before {
    content:"";
    width: 3px;
    height: 3px;
    background-color: var(--color-dark);
    display: block;
    position: absolute;
    left:0px;
    top: 13px
}
.hyphenList > li::before {
    content:"";
    width: 6px;
    height: 1px;
    background-color: var(--color-dark);
    display: block;
    position: absolute;
    left:0;
    top: 15px
}
.numberList > li::before {
    content:"";
    width: 23px;
    height: 23px;
    position: absolute;
    left:0;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    background-color: var(--color-dark);
    color: var(--color-white);
    font-size: var(--font-13);
    font-weight: var(--fw-black);
}
.numberList > li:nth-child(1):before {
    content:"1";
}
.numberList > li:nth-child(2):before {
    content:"2";
}
.numberList > li:nth-child(3):before {
    content:"3";
}
.numberList > li:nth-child(4):before {
    content:"4";
}
.numberList > li:nth-child(5):before {
    content:"5";
}
.sectionWrap {
    padding: var(--space-110) 0
}
.sectionWrap:last-of-type {
    padding-bottom: var(--space-130)
}
.boxp {
    padding: var(--space-40)
}
.boxpl40t35 {
    padding: var(--space-35) var(--space-40) var(--space-40)
}
.boxplpr {
    padding-left: var(--space-40);
    padding-right: var(--space-40);
}
.boxpl40, 
.tableBox .tableRow .tableTh {
    padding-left: var(--space-40);
}
.boxTborder {
    border-top: var(--borderW);
    padding-top: var(--space-40);
}
.spaceT30 {
    margin-top: var(--space-30)
}
.spaceT40 {
    margin-top: var(--space-40)
}
.spaceB40 {
    margin-bottom: var(--space-40)
}
.spaceTB40 {
    margin-top: var(--space-40);
    margin-bottom: var(--space-40)
}
.spaceL80 {
    margin-left: var(--space-80)
}
.spaceR80 {
    margin-right: var(--space-80)
}
.borderBox {
    border: var(--border);
    background-color: var(--color-white);
}
.borderBox.bgGray {
    border: 0;
    background-color: var(--color-gray);
}
.borderBox .borderBoxTitle {
    border-bottom: var(--border);
    padding-bottom: var(--space-15);
    margin-bottom: var(--space-20);
    display: flex;
    align-items: center;
}
.halfGrid,
.threeGrid {
    display: grid;
    grid-gap: 0 var(--space-80);
}
.halfGrid {
    grid-template-columns: repeat(2, 1fr);
}
.threeGrid {
    grid-template-columns: repeat(3, 1fr);
}
.halfGrid .borderBoxTitle.iconTitle,
.threeGrid .borderBoxTitle.iconTitle {
    display: flex;
}
.halfGrid .borderBoxTitle.iconTitle img,
.threeGrid .borderBoxTitle.iconTitle img {
    margin-right: var(--space-10)
}
    /* 미디어쿼리 1200px이하 */
    @media all and (min-width:1921px) {
        .layout {
            width: 100%;
            max-width: 100%;
            padding: 0 15%
        }
    }
    @media all and (max-width:1199px) {
        .boxp {
            padding: var(--space-35) var(--space-30);
        }
        .boxpl40t35 {
            padding: var(--space-30);
        }
        .boxplpr {
            padding-left: var(--space-30);
            padding-right: var(--space-30);
        }
        .boxpl40,
        .tableBox .tableRow .tableTh {
            padding-left: var(--space-30);
        }
        .boxTborder {
            padding-top: var(--space-35);
        }
        .spaceTB40 {
            margin-top: var(--space-35);
            margin-bottom: var(--space-35)
        }
        .spaceL80 {
            margin-left: var(--space-60)
        }
        .spaceR80 {
            margin-right: var(--space-60)
        }
        .sectionWrap {
            padding: var(--space-100) 0;
        }
        .borderBox .borderBoxTitle {
            padding-bottom: var(--space-10);
            margin-bottom: var(--space-15)
        }
        .halfGrid,
        .threeGrid {
            grid-gap: 0 var(--space-40);
        }
    }
    @media all and (max-width:1023px) {
        .btnArea {
            margin-top: var(--space-40)
        }
        .textBasic,
        .tableBox .tableRow .tableTd,
        .barList > li,
        .dotList > li,
        .hyphenList > li,
        .numberList > li,
        .halfGrid,
        .threeGrid,
        .table th,
        .table td,
        .tableReal td {
            font-size: var(--font-18);
        }
        .btnGoldL {
            padding: 0 var(--space-25);
            font-size: var(--font-18);
        }
        .subTitleR {
            font-size: var(--font-28);
        }
        .subTitle {
            font-size: var(--font-25);
        }
        .subTitleM {
            font-size: var(--font-23);
        }
        .subTitleS {
            font-size: var(--font-20);
        }
        .subTitleXs {
            font-size: var(--font-18);
        }
        .spaceT30 {
            margin-top: var(--space-20)
        }
        .spaceT40 {
            margin-top: var(--space-30)
        }
        .boxp {
            padding: var(--space-25) var(--space-20);
        }
        .boxpl40t35 {
            padding: var(--space-20);
        }
        .boxplpr {
            padding-left: var(--space-20);
            padding-right: var(--space-20);
        }
        .boxpl40,
        .tableBox .tableRow .tableTh {
            padding-left: var(--space-20);
        }
        .boxTborder {
            border-top: var(--borderW);
            padding-top: var(--space-25);
        }
        .spaceTB40 {
            margin-top: var(--space-25);
            margin-bottom: var(--space-25)
        }
        .spaceL80 {
            margin-left: var(--space-30)
        }
        .spaceR80 {
            margin-right: var(--space-30)
        }
        .sectionWrap {
            padding: var(--space-80) 0
        }
        .sectionWrap:last-of-type {
            padding-bottom: var(--space-100)
        }
        .halfGrid {
            grid-gap: 0 var(--space-20);
        }
        .threeGrid {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-30) 0;
        }
        .halfGrid .borderBoxTitle.iconTitle img,
        .threeGrid .borderBoxTitle.iconTitle img {
            width: 25px;
        }
        .numberList > li {
            margin-bottom: var(--space-10)
        }
    }
    @media all and (max-width:767px) {
        .btnMore {
            font-size: var(--font-14);
        }
        .btnMore img {
            width: 9px;
            margin-left: 7px;
        }
        .btnGoldL {
            height: 56px;
            padding: 0 var(--space-20);
            font-size: var(--font-16);
        }
        .btnGoldS,
        .btnGoldSp,
        .btnDarkSp {
            width: 86px;
            height: 40px;
            padding: 0 var(--space-15);
            font-size: var(--font-15);
        }
        .btnGoldSp {
            width: 120px;
        }
        .btnDarkSp {
            width: 170px;
        }
        .btnArea {
            margin-top: var(--space-30)
        }
        .btnGoldS img {
            width: 9px
        }
        .textBasic,
        .tableBox .tableRow .tableTd,
        .barList > li,
        .dotList > li,
        .hyphenList > li,
        .numberList > li,
        .halfGrid,
        .threeGrid,
        .table th,
        .table td,
        .tableReal td {
            font-size: var(--font-17);
            line-height: 1.4;
        }
        .subTitleR {
            font-size: var(--font-23);
        }
        .subTitle {
            font-size: var(--font-20);
        }
        .subTitleM {
            font-size: var(--font-20);
        }
        .subTitleS {
            font-size: var(--font-18);
        }
        .subTxtM,
        .reservation .reservationForm input.inputBox::placeholder {
            font-size: var(--font-16);
        }
        .subTxtS {
            font-size: var(--font-15)
        }
        .dotList > li {
            padding-left: var(--space-10);
        }
        .hyphenList > li {
            padding-left: 12px;
        }
        .numberList > li {
            padding-left: 28px;
            margin-bottom: var(--space-5)
        }
        .dotList > li::before {
            top: 10px
        }
        .hyphenList > li::before {
            top: 12px;
        }
        .numberList > li::before {
            width: 20px;
            height: 20px;
            top: 2px;
            font-size: 12px
        }
        .sectionWrap {
            padding: var(--space-60) 0
        }
        .sectionWrap:last-of-type {
            padding-bottom: var(--space-80)
        }
        .boxp,
        .boxpl40t35 {
            padding: var(--space-20) var(--space-15);
        }
        .boxplpr {
            padding-left: var(--space-15);
            padding-right: var(--space-15);
        }
        .boxpl40,
        .tableBox .tableRow .tableTh {
            padding-left: var(--space-15);
        }
        .spaceT40,
        .postRight {
            margin-top: var(--space-20)
        }
        .spaceTB40 {
            margin-top: var(--space-20);
            margin-bottom: var(--space-20)
        }
        .postLeft {
            padding-bottom: var(--space-20)
        }
        .boxTborder {
            padding-top: var(--space-20);
        }
        .spaceR80 {
            margin-right: 0;
        }
        .spaceL80 {
            margin-left: 0
        }
        .halfGrid,
        .threeGrid {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-15) 0;
        }
        .halfGrid .borderBoxTitle.iconTitle img,
        .threeGrid .borderBoxTitle.iconTitle img {
            width: 20px;
        }
    }

/* mainVisual */
.mainVisual {
    position: relative;
    width:100%;
    overflow: hidden;
    /* background: center top / contain url("/public/images/main-visual.jpg") no-repeat; */
}
.mainVisual  img {
    width: 100%;
}
.mainVisual header {
    top: auto
}
    /* main Visual 미디어쿼리 */
    @media all and (min-width: 1920px) {
        .mainVisual {
            height:100vh;
        }
    }
    @media all and (max-width:1199px) {
    }
    @media all and (max-width:1023px) {
    }
    @media all and (max-width:767px) {

    }

/* mainAbout */
.mainCommon {
    padding: var(--space-140) 0
}
.mainAbout {
    padding-top: var(--space-160)
}
.mainAbout .layout {
    width: 90%
}
.mainAbout::after {
    content:"";
    display: block;
    clear: both;
}
.mainAbout .flex-end {
    float: right;
}
.mainAbout pre {
    width: 100%;
    max-width: 790px;
    font-size: var(--font-28);
    font-weight: var(--fw-medium);
    line-height: 1.55;
}
.mainAbout .object {
    width: 65%;
    margin-left: -6%;
    padding-top: var(--space-15)
}
.mainAbout .object img {
    width: 100%;
    max-width: 881px
}
.mainAbout pre:first-of-type {
    margin-bottom: var(--space-160) 
}
.mainAbout pre:nth-of-type(3) {
    margin: var(--space-90) 0 var(--space-70) 
}
.mainAbout .slogan {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.mainAbout .slogan strong {
    font-size: var(--font-48);
    font-weight: var(--fw-bold);
    color: var(--color-primary);
    line-height: 1.3;
    text-align: right;
    margin-bottom: var(--space-40);
    font-style: italic;
}
    /* mainAbout 미디어쿼리 */
    @media all and (max-width:1199px) {
        .mainAbout {
            padding: var(--space-130) 0;
        }
        .mainAbout pre {
            width: 60%;
            font-size: var(--font-25);
            white-space: normal;
        }
        .mainAbout pre:first-of-type {
            margin-bottom: var(--space-100);
        }
        .mainAbout pre:nth-of-type(3) {
            margin: var(--space-70) 0 var(--space-70);
        }
        .mainAbout .object {
            margin-left: -2%;
        }
    }
    @media all and (max-width:1023px) {
        .mainCommon {
            padding: var(--space-100) 0;
        }
        .mainAbout pre {
            width: 100%;
            /* width: 70%; */
            font-size: var(--font-23);
        }
        .mainAbout pre:first-of-type {
            margin-bottom: var(--space-80);
        }
        .mainAbout pre:nth-of-type(3) {
            margin: var(--space-60) 0 var(--space-70);
        }
        .mainAbout .object {
            clear: both;
            width: 70%;
            padding-top: var(--space-60);
        }
        .mainAbout .slogan strong {
            font-size: var(--font-40);
            margin-bottom: var(--space-30);
        }
    }
    @media all and (max-width:767px) {
        .mainCommon {
            padding: var(--space-60) 0;
        }
        .mainAbout pre {
            /* width: 80%; */
            font-size: var(--font-18);
        }
        .mainAbout pre:first-of-type {
            margin-bottom: var(--space-40);
        }
        .mainAbout pre:nth-of-type(3) {
            margin: var(--space-40) 0 var(--space-40);
        }
        .mainAbout .object {
            width: 80%;
            padding-top: var(--space-25);
        }
        .mainAbout .slogan strong {
            font-size: var(--font-30);
            margin-bottom: var(--space-25);
        }
    }

/* 메인 아티스트 & 아트워크 */
.mainArtwork.mainCommon {
    padding: 0 0 245px;
}
.mainSlide {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}
.mainSlide::after {
    content: "";
    clear:both;
    display: block;
}
.mainSlide .layout {
    width: 95%;
    margin:0;
    max-width: 1740px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.mainSlide .slideWrap {
    width:100%;
    display: flex;
    justify-content: space-between;
}
.mainArtwork.mainSlide .slideWrap {
    min-height: 500px
}
.mainSlide .bigTit {
    position: absolute;
}
.mainSlide .slideText {
    text-align: left;
    padding-top: var(--space-20)
}
.mainSlide .slideText .category{
    display: block;
    font-size: var(--font-15)
}
.mainSlide .slideText h4.artworkName {
    font-size: var(--font-40);
    margin: var(--space-5) 0 var(--space-40)
}
.mainSlide .artistName {
    font-size: var(--font-18);
    color: var(--color-gold);
    font-weight: var(--fw-medium);
    display: block;
    margin-bottom: var(--space-15)
}
.mainSlide .slideText .btnMore {
    margin-top: var(--space-45)
}
.mainSlide .main_swiper {
    width: 30%;
    overflow: hidden;
}
.mainSlide .sub_swiper {
    width: 65%;
    overflow: hidden;
}
.mainSlide .swiper-slide {
    background: transparent;
}
.mainSlide .sub_swiper .swiper-slide {
    width: 40% !important;
    padding: 0 var(--space-10)
}
.mainSlide .sub_swiper .swiper-slide a {
    display:block;
    width: 100%;
    height: 100%;
}
.mainSlide .sub_swiper .swiper {
    margin-left: auto;
    margin-right: auto;
}
.mainSlide .sub_swiper .swiper-slide img {
    width: 100%;
}
.mainArtist .mainSlide .sub_swiper .artistImg {
    position: relative;
    overflow: hidden;
    padding-top: 70%;
}
.mainArtist .sub_swiper .swiper-slide .artistImg {
    position: relative;
    overflow: hidden;
    padding-top: 127%;
}
.mainArtist .sub_swiper .swiper-slide .artistImg img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    object-fit: cover;
}
.mainSlide .sub_nav {
    height: 24px;
    position: absolute;
    right: 8.5%;
}
.mainArtist.mainSlide .sub_nav {
    margin-top: var(--space-35);
}
.mainArtwork.mainSlide .sub_nav {
    bottom: 0
}
.mainSlide .swiper-pagination {
    left: auto;
    right:auto;
    position: relative;
    display: flex;
}
.mainSlide .swiper-pagination-bullet {
    background-color: transparent;
    font-weight: var(--fw-medium);
    opacity: 1;
    color: #231815;
    margin: 0 var(--space-5);
    font-size: var(--font-15);
}
.mainSlide .swiper-pagination-bullet-active {
    color: #AD9159;
}
.mainSlide .swiper-pagination-bullet {
    width: 24px;
    height: 21px;
}
.mainSlide .sub_swiper .navInner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 14.7%;
}
.mainSlide .swiper-button-next,
.mainSlide .swiper-button-prev {
    position: relative;
    left: auto;
    right: auto;
    top: 10px;
    color: #231815;
    width: 24px;
    height:21px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mainSlide .swiper-button-next:after, 
.mainSlide .swiper-button-prev:after {
    display: none;
}
    /* mainAbout 미디어쿼리 */
    @media all and (min-width:1921px) {
        .mainSlide .layout {
            width: 100%;
            max-width: 100%;
            padding: 0 0 0 15%
        }
        .mainSlide .sub_swiper .swiper-slide {
            width: 30% !important;
        }
    }
    @media all and (max-width:1699px) {
        .mainSlide .bigTit {
            font-size:120px;
        }
        .mainSlide .main_swiper {
            width: 40%;
        }
        .mainSlide .sub_swiper {
            width: 55%;
        }
        .mainSlide .sub_swiper .swiper-slide {
            width: 60% !important;
        }
    }
    @media all and (max-width:1199px) {
        .mainArtwork.mainCommon {
            padding: 0 0 200px;
        }
        .mainSlide .bigTit {
            font-size:100px;
        }
        .mainSlide .main_swiper {
            width: 45%;
        }
        .mainSlide .sub_swiper {
            width: 50%;
        }
        .mainSlide .sub_swiper .swiper-slide {
            width: 70% !important;
        }
        .mainSlide .slideText {
            padding-top: 0
        }
        .mainSlide .slideText h4.artworkName {
            margin: var(--space-5) 0 var(--space-30);
        }
        .mainSlide .slideText .btnMore {
            margin-top: var(--space-35)
        }
        .mainSlide .sub_nav {
            right: 0
        }
    }
    @media all and (max-width:1023px) {
        .mainArtwork.mainCommon {
            padding: 0 0 180px;
        }
        .mainSlide .bigTit {
            font-size:var(--font-80);
        }
        .mainSlide .sub_swiper .swiper-slide {
            width: 90% !important;
            padding: 0 var(--space-5)
        }
        .mainSlide .slideText h4.artworkName {
            font-size: var(--font-35);
            margin: var(--space-5) 0 var(--space-20);
        }
    }
    @media all and (max-width:767px) {
        .mainArtwork.mainCommon {
            padding: 0 0 var(--space-80);
        }
        .mainSlide .layout {
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction: column;
        }
        .mainSlide .bigTit {
            position: relative;
        }
        .mainSlide .bigTit {
            font-size: var(--font-60);
            display: block;
        }
        .mainSlide .slideWrap {
            flex-direction: column;
            margin-top: var(--space-40)
        }
        .mainSlide .main_swiper {
            width: 100%;
        }
        .mainSlide .sub_swiper {
            width: 100%
        }
        .mainSlide .sub_swiper .swiper-container {
            margin-left: -5px
        }
        .mainArtwork.mainSlide .slideWrap {
            min-height: auto;
        }
        .mainSlide .slideText {
            width: 95%;
            margin-bottom: var(--space-20)
        }
        .mainSlide .slideText h4.artworkName {
            font-size: var(--font-30);
            margin: var(--space-5) 0 var(--space-20);
        }
        .mainSlide .slideText .btnMore {
            margin-top: var(--space-25);
        }
        .mainSlide .sub_nav {
            position: relative;
            height: 18px;
            right: auto;
            left:0
        }
        .mainArtist.mainSlide .sub_nav,
        .mainArtwork.mainSlide .sub_nav {
            margin-top: var(--space-25);
            bottom: auto
        }
        .mainSlide .sub_swiper .navInner {
            padding-right: 0;
            justify-content: flex-start;
        }
        .mainSlide .swiper-pagination-bullet {
            width: 18px;
            height: 18px;
        }
        .mainSlide .swiper-button-next,
        .mainSlide .swiper-button-prev {
            width: 18px;
            height: 18px;
            top: 12px;
        }
    }

    /* mainSlogan */
/* mainSlogan */
.mainSlogan.mainCommon {
    padding: var(--space-200) 0
}
.mainSlogan img {
    width: 100%
}
.mainSlogan .mainKeytitle img {
    width: 70%;
    max-width: 1073px;
}
.mainSlogan .mainBi {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-right: var(--space-20);
    margin-top: var(--space-70)
}
.mainSlogan .mainBi img {
    width: 100%;
    max-width: 1576px
}
    /* mainSlogan 미디어쿼리 */
    @media all and (min-width:1921px) {
        .mainSlogan .mainKeytitle img {
            max-width: 55%;
        }
        .mainSlogan .mainBi img {
            max-width: 75%
        }
    }
    @media all and (max-width:1023px) {
        .mainSlogan.mainCommon {
            padding: var(--space-150) 0 var(--space-150)
        }
        .mainSlogan .mainBi {
            padding: 0 5%;
            margin-top: var(--space-40);
        }
    }
    @media all and (max-width:767px) {
        .mainSlogan.mainCommon {
            padding: var(--space-100) 0 var(--space-130)
        }
        .mainSlogan .mainKeytitle img {
            width: 90%;
        }
        .mainSlogan .mainBi {
            margin-top: var(--space-20);
        }
    }

/* sub 공통 */
aside {
    margin-top: var(--space-140)
}
aside .subNavArea {
    width: 100%;
    height: 225px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.introduce aside .subNavArea {
    background: center / cover url("/public/images/introduce.jpg") no-repeat;
}
.exhibition aside .subNavArea {
    background: center / cover url("/public/images/exhibition.jpg") no-repeat;
}
.program aside .subNavArea {
    background: center / cover url("/public/images/program.jpg") no-repeat;
}
.visit aside .subNavArea {
    background: center / cover url("/public/images/visit.jpg") no-repeat;
}
aside .subTitArea {
    margin-bottom: var(--space-40);
}
aside .subTitArea .layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
aside .subTitArea h2 img {
    width: auto;
    height: 101px;
}
aside .topMenu {
    display: flex;
    justify-content: flex-end;
}
aside .topMenu li {
    font-size: var(--font-18);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
aside .topMenu li:not(:first-child) {
    margin-left: var(--space-35)
}
.introduce aside .topMenu li:not(:first-child) {
    margin-left: var(--space-20)
}
.introduce aside .topMenu li {
    font-size: var(--font-16);
}
aside .topMenu li.on a,
aside .topMenu li a:hover {
    color: var(--color-gold)
}
aside .subNavArea {
    display: flex;
    flex-direction: column;
}
aside .subNavArea h3 {
    font-size: var(--font-38);
    font-weight: var(--fw-black);
    color: var(--color-gray);
}
.introduce aside .subNavArea h3 {
    color: var(--color-dark);
}
aside .subNavArea .breadcrumb {
    display: flex;
    align-items: center;
    margin-top: var(--space-20)
}
aside .subNavArea .breadcrumb > li {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-grayec);
}
.introduce aside .subNavArea .breadcrumb > li {
    color: var(--color-dark);
}
aside .subNavArea .breadcrumb > li::before {
    position: absolute;
    top: 7px;
    left: -15px;
    content: "";
    display: block;
    width: 5px;
    height: 10px;
    background: center / contain url("/public/images/icon-navigation.svg") no-repeat;
}
aside .subNavArea .breadcrumb > li:first-of-type::before {
    display: none;
}
aside .subNavArea .breadcrumb > li:not(:first-child) {
    margin-left: 29px
}
aside .subNavArea .breadcrumb > li > a {
    display: flex;
    font-size: var(--font-16);
    font-weight: var(--fw-medium);
}
aside .subNavArea .breadcrumb > li > a:hover {
    color: var(--color-white);
}
.introduce .breadcrumb svg.home path {
    stroke: var(--color-dark);
}
.subWrap {
    margin-top: var(--space-130)
}
.titleArea {
    margin-bottom: var(--space-20)
}
.barList {
    padding-left: var(--space-20)
}
.barList:not(:last-of-type) {
    margin-bottom: var(--space-40)
}
.barList .barTitle {
    position: relative;
    display: block;
    font-weight: var(--fw-bold);
    margin-bottom: 8px
}
.barList .barTitle::before {
    content: "";
    width: 2px;
    height: 16px;
    display:block;
    position: absolute;
    left: -20px;
    top: 7px;
    background-color: var(--color-basic);
}
.table,
.tableBox,
.tableReal {
    border-top: var(--borderW);
    background-color: var(--color-white);
}
.table.btsp,
.tableReal {
    border-top: var(--border);
}
.tableBox .tableRow {
    border: var(--border);
    border-width: 0 1px 1px 1px;
    display: flex;
    align-items: stretch;
}
.tableBox .tableRow .tableTh,
.tableBox .tableRow .tableTd {
    display: flex;
    align-items: center;
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
}
.tableBox .tableRow .tableTh {
    border-right: var(--border);
    width: 300px;
    color: var(--color-dark);
    font-weight: var(--fw-medium);
}
.tableBox .tableRow .tableTd {
    padding-left: var(--space-60);
    width: calc(100% - 300px)
}
.table,
.tableReal {
    border-left: var(--border);
}
.table thead td {
    font-weight: var(--fw-bold);
    text-align: center;
}
.table th,
.table td {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
    border: var(--border);
    border-width: 0 1px 1px 0;
    text-align: center;
    font-weight: var(--fw-light);
}
.tableReal td {
    padding: var(--space-20) var(--space-40);
    border: var(--border);
    border-width: 0 1px 1px 0;
    text-align: left;
    vertical-align: top;
}
.halfBox {
    display:flex;
}
.halfBox .postLeft {
    border-right: var(--border)
}
.halfBox .postLeft {
    width: 65%;
}
.halfBox .postRight {
    width: 35%;
}
.halfBox .postRight .halfRightImg img {
    width: 100%;
}
ul.tabs {
	border-bottom: var(--borderW);
    display: flex;
    align-items: center;
}
ul.tabs li {
    width: 118px;
    height: 45px;
    font-size: var(--font-18);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
    border: var(--border);
    border-width: 1px 1px 0 0;
    transition: var(--transition);
}
ul.tabs li:first-child {
    border-left: var(--border)
}
ul.tabs li:hover,
ul.tabs li.current{
	background: var(--color-dark);
	color: var(--color-white);
    border-color: var(--color-dark)
}
.tab-content {
	display: none;
}
.tab-content.current{
	display: inherit;
}
    /* sub 공통 미디어쿼리 */
    @media all and (max-width: 1699px) {
        aside .subTitArea .layout {
            flex-direction: column;
            align-items: flex-start;
        }
        aside .topMenu {
            margin-top: var(--space-30)
        }
        .introduce aside .topMenu li:not(:first-child) {
            margin-left: var(--space-35)
        }
        .introduce aside .topMenu li {
            font-size: var(--font-18);
        }
    }
    @media all and (max-width: 1199px) {
        aside {
            margin-top: var(--space-100);
        }
        aside .subTitArea h2 img {
            height: 80px;
        }
        aside .subNavArea {
            height: 195px;
        }
        aside .subNavArea h3 {
            font-size: var(--font-35);
        }
        aside .subNavArea .breadcrumb {
            margin-top: var(--space-15);
        }
        .subWrap {
            margin-top: var(--space-100)
        }
        .tableBox .tableRow .tableTd {
            padding-left: var(--space-30);
        }
        .tableReal td {
            padding: var(--space-20) var(--space-30);
        }
    }
    @media all and (max-width: 1023px) {
        aside .subTitArea h2 img {
            height: 60px;
        }
        aside .topMenu {
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        aside .topMenu li,
        .introduce aside .topMenu li {
            font-size: var(--font-16);
        }
        aside .subNavArea {
            height: 150px;
        }
        aside .subNavArea h3 {
            font-size: var(--font-25);
        }
        aside .subNavArea .breadcrumb > li:not(:first-child) {
            margin-left: var(--space-20);
        }
        aside .subNavArea .breadcrumb > li > a {
            font-size: var(--font-14);
        }
        aside .subNavArea .breadcrumb svg {
            width: 12px
        }
        aside .subNavArea .breadcrumb > li::before {
            top: 6px;
            left: -11px;
        }
        .subWrap {
            margin-top: var(--space-80)
        }
        .tableBox .tableRow .tableTh {
            font-size: var(--font-18)
        }
        .tableBox .tableRow .tableTd {
            padding-left: var(--space-20);
        }
        .tableReal td {
            padding: var(--space-20) var(--space-20);
        }
        ul.tabs li {
            width: 90px;
            height: 40px;
            font-size: var(--font-16);
        }
    }
    @media all and (max-width: 767px) {
        aside {
            margin-top: var(--space-80);
        }
        aside .subTitArea h2 img {
            height: 35px;
        }
        aside .topMenu li {
            font-size: var(--font-16);
            margin-bottom: var(--space-10)
        }
        aside .topMenu li:not(:first-child),
        .introduce aside .topMenu li:not(:first-child) {
            margin-left: 0
        }
        aside .topMenu li:not(:last-child),
        .introduce aside .topMenu li:not(:first-child) {
            margin-right: var(--space-20)
        }
        aside .subTitArea {
            margin-bottom: var(--space-20);
        }
        aside .subNavArea h3 {
            font-size: var(--font-20);
            text-align: center;
        }
        aside .subNavArea .breadcrumb {
            margin-top: var(--space-10);
        }
        aside .subNavArea {
            height: 130px;
            padding: 0 5%
        }
        .subWrap {
            margin-top: var(--space-60)
        }
        .titleArea {
            margin-bottom: var(--space-15)
        }
        .barList {
            padding-left: var(--space-15)
        }
        .barList:not(:last-of-type) {
            margin-bottom: var(--space-30)
        }
        .barList .barTitle {
            margin-bottom: var(--space-5);
            font-size: var(--font-18)
        }
        .barList .barTitle::before {
            height: 14px;
            left: -15px;
            top: 7px;
        }
        .tableBox .tableRow {
            flex-direction: column;
        }
        .tableBox .tableRow .tableTh,
        .tableBox .tableRow .tableTd {
            width:100%;
            padding-left: var(--space-15);
            padding-right: var(--space-15);
        }
        .tableBox .tableRow .tableTh {
            font-size: var(--font-18);
            padding-top: var(--space-15);
            padding-bottom: var(--space-10)
        }
        .tableBox .tableRow .tableTd {
            padding-top: 0;
            padding-bottom: var(--space-15);
        }
        .table th,
        .table td {
            padding: var(--space-10) var(--space-5);
            font-size: var(--font-16);
        }
        .table thead td {
            font-size: var(--font-15)
        }
        .tableReal td {
            display: block;
            width: 100%;
            padding: var(--space-10) var(--space-15);
            word-break: break-word;
        }
        .tableReal col {
            width: 100%;
        }
        .halfBox {
            flex-direction: column;
        }
        .halfBox .postLeft,
        .halfBox .postRight {
            width: 100%;
        }
        .halfBox .postLeft {
            border-right: 0;
            border-bottom: var(--border)
        }
        ul.tabs li {
            width: 80px;
            height: 35px;
            font-size: var(--font-15);
        }
    }
    
/*  소개 > 전시개요 */
    /* // overview2 */
.overviewSponsor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.overviewSponsor span {
    display: inline-block;
    position: relative;
    height: 39px;
    margin-right: 71px;
    margin: var(--space-10) 71px var(--space-10) 0
}
.overviewSponsor span:last-of-type {
    margin-right: 0
}
.overviewSponsor span:not(:last-of-type)::after {
    content:"";
    width: 1px;
    height: 37px;
    display: block;
    background-color: var(--color-grayec);
    position: absolute;
    right: -36px;
    top: 0
}
.overviewSponsor span img {
    height: 100%;
}
    /* //overview3 */
.overview3 .overview3wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: var(--space-50) var(--space-80);
}
.overview3 .overview3Place {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.overview3 .overview3Place .address {
    font-size: var(--font-18);
    font-weight: var(--fw-medium);
    color: var(--color-basic);
}
.overview3 .overview3Place .placeLink {
    display: flex;
    align-items: center;
    font-size: var(--font-15);
    font-weight: var(--fw-bold);
}
.overview3 .overview3Place .placeLink:hover {
    color: var(--color-gold)
}
.overview3 .overview3Place .placeLink img {
    margin-right: 8px
}
.overview3 .overview3Img {
    margin: var(--space-20) 0
}
.overview3 .overview3Img img {
    width: 100%;
}
    /* 소개 > 전시개요 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .overview3 .overview3wrap {
            grid-gap: var(--space-40) var(--space-40);
        }
    }
    @media all and (max-width: 1023px) {
        .overview3 .overview3wrap {
            grid-gap: var(--space-20) var(--space-20);
        }
        .overview3 .overview3Place {
            flex-direction: column;
            align-items: flex-start;
        }
        .overview3 .overview3Place .address {
            display: block;
            margin-bottom: var(--space-5)
        }
        .overview3 .overview3Place .placeLink img {
            width: 15px;
            margin-right: 6px
        }
    }
    @media all and (max-width: 767px) {
        .overview3 .overview3wrap {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-15) 0;
        }
        .overviewSponsor {
            padding-right: var(--space-15)
        }
        .overviewSponsor span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 25px;
            margin: var(--space-10) 0;
        }
        .overviewSponsor span:not(:last-of-type)::after {
            height: 25px;
            right: 0
        }
        .overviewSponsor span:nth-child(even)::after {
            display: none;
        }
        .overviewSponsor span img {
            height: 100%;
        }
        .overview3 .overview3Img {
            margin: var(--space-15) 0
        }
        .overview3 .overview3Place .address {
            font-size: var(--font-16);
            margin-bottom: var(--space-10)
        }
        .overview3 .overview3Place .placeLink {
            font-size: var(--font-14);
        }
        .overview3 .overview3Place .placeLink img {
            width: 13px;
            margin-right: 6px
        }
    }

/* 소개 > 전시감독 */
.theme .sectionWrap:first-of-type {
    background: center top / 100% url("/public/images/theme1.png") no-repeat;
}
.theme .themeTop {
    color: var(--color-white);
    margin-bottom: 325px;
    text-align:center
}
.theme .themeTop .themeSlogan {
    margin-bottom: var(--space-50);
    font-size: var(--font-80);
    font-weight: var(--fw-bold);
    color: var(--color-gold);
}
.theme .themeTop p.subTitleM {
    font-weight: var(--fw-medium);
}
.theme .themeTop p.subTitleM strong {
    font-weight: var(--fw-bold);
    color: var(--color-gold);
}
.theme .themeTop .subTitleM,
.theme .themeMiddle {
    width: 80%;
    margin: auto
}
.theme .themeMiddle .textBasic:not(:last-of-type) {
    margin-bottom: var(--space-30)
}
.theme .themeBottom {
    overflow: hidden;
}
    /* 소개 > 전시감독 미디어쿼리 */
    @media all and (min-width: 2450px) {
        .theme .sectionWrap:first-of-type {
            background-position: center -102px
        }
    }
    @media all and (max-width: 1699px) {
        .theme .sectionWrap:first-of-type {
            padding-top: var(--space-80)
        }
        .theme .sectionWrap:first-of-type {
            background-size: 100% 43%;
            background-position: 20% 0;
        }
        .theme .themeTop {
            margin-bottom:195px
        }
        .theme .themeTop .themeSlogan {
            font-size: var(--font-50);
            margin-bottom: var(--space-30);
        }
    }
    @media all and (max-width: 1023px) {
        .theme .sectionWrap:first-of-type {
            padding-top: var(--space-60)
        }
        .theme .sectionWrap:first-of-type {
            background-size: 120% 45%;
            background-position: 0 0;
        }
        .theme .themeTop .themeSlogan {
            font-size: var(--font-45);
            margin-bottom: var(--space-30);
        }
        .theme .themeTop {
            margin-bottom:185px
        }
        .theme .themeMiddle {
            width: 90%;
        }
    }
    @media all and (max-width: 767px) {
        .theme .sectionWrap:first-of-type {
            background-size: auto;
            background-position: 78% -0.5%;
            padding-top: var(--space-40)
        }
        .theme .themeTop {
            margin-bottom:145px
        }
        .theme .themeTop .themeSlogan {
            font-size: var(--font-35);
            padding: 0 10%;
        }
        .theme .themeMiddle .textBasic:not(:last-of-type) {
            margin-bottom: var(--space-25)
        }
    }
    @media all and (max-width: 375px) {
        .theme .sectionWrap:first-of-type {
            background-position: 78% -0.5%
        }
        .theme .themeTop .themeSlogan {
            font-size: var(--font-35);
            padding: 0 5%;
        }
        .theme .themeTop {
            margin-bottom:145px
        }
        .theme .themeTop .subTitleM {
            width: 90%;
        }
    }

/* 소개 > 전시감독 */
.director .directorImg img {
    width: 100%;
}
.director .directorName {
    margin-top: var(--space-20);
}
.director .directorName span {
    display: block;
    margin-bottom: var(--space-5)
}
.director .hyphenList {
    margin-top: var(--space-5)
}
    /* 전시감독 미디어쿼리 */
    @media all and (max-width: 767px) {
        .director .halfBox {
            flex-direction: column-reverse;
        }
        .director .halfBox .postRight {
            margin-top: 0
        }
        .director .halfBox .postLeft {
            border-top: var(--border);
            border-bottom: 0;
            margin-top: var(--space-20);
            padding-top: var(--space-20)
        }
        .director .directorName span {
            margin-bottom: 0
        }
    }

/* 소개 > 포스터/엠블럼 */
.poster2 .emblem .borderBox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-50) var(--space-40);
    background: url("/public/images/emblem-bg.png") repeat #FFFFFF;
}
.poster2 .emblem .borderBox img {
    width: 100%;
    max-width: 433px;
}
    /* 소개 > 포스터/엠블럼 미디어쿼리 */
    @media all and (max-width: 767px) {
        .poster2 .emblem .borderBox {
            height: 250px;
            padding: 0 var(--space-50);
            background-size: 8px 8px;
        }
    }

/* 소개 > 협찬사 */
.sponsor2 .inquiry {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sponsor2 .inquiry .inquiryLlist {
    width: 50%;
    font-weight: var(--fw-normal);
}
.sponsor2 .inquiry .inquiryLlist span{
    color: var(--color-gold);
    font-weight: var(--fw-medium);
    margin-right: var(--space-20)
}
.sponsor2 .halfGrid {
    grid-template-columns: repeat(1, 1fr);
}
    /* 소개 > 협찬사 미디어쿼리 */
    @media all and (max-width:767px) {
        .sponsor2 .inquiry {
            height: auto;
            flex-direction: column;
            align-items: flex-start;
        }
        .sponsor2 .inquiry .inquiryLlist {
            width: 100%;
            display: flex;
        }
        .sponsor2 .inquiry .inquiryLlist:first-of-type {
            margin-bottom: var(--space-5)
        }
        .sponsor2 .inquiry .inquiryLlist span {
            width: 70px;
        }
    }

/* 작가/작품 검색 영역 */
.selectSearchArea {
    background-color: var(--color-gray);
    padding-top: var(--space-25);
    padding-bottom: var(--space-25);
}
.selectSearchArea form {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selectSearchArea .selectWrap,
.selectSearchArea .searchArea {
    display: flex;
    height: 55px;
}
.selectSearchArea .selectArea {
    display: flex;
    align-items: center;
    border: var(--border);
    background-color: var(--color-white);
    transition: var(--transition);
}
.selectSearchArea .selectArea:hover {
    border: 1px solid var(--color-basic);
}
.selectSearchArea .selectArea:first-of-type {
    margin-right: var(--space-10)
}
.selectSearchArea .select {
    padding: 0 var(--space-20);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}
.selectSearchArea .selectTit {
    width: 80px;
    height: 100%;
    font-size: var(--font-18);
    font-weight: var(--fw-normal);
    display: flex;
    align-items: center;
}
.selectSearchArea .select .selected {
    width: 126px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.selectSearchArea .select .selected .arrow {
    width: 7px;
    height: 11px;
    display: flex;
    transform: rotate(90deg);
    transition: var(--transition);
}
.selectSearchArea .select .selected .selected-value {
    font-size: var(--font-18);
    font-weight: var(--fw-black);
}
.selectSearchArea .select ul li,
.selectSearchArea .select .selected .selected-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.selectSearchArea .select ul {
    z-index: 2;
    display: none;
    cursor: pointer;
    position: absolute;
    top: 53px;
    left: 0;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-basic);
}
.selectSearchArea .select.active ul {
    display: initial;
    overflow-y: scroll;
    height: 300px;
}
.selectSearchArea .select ul li {
    width: 100%;
    padding: 4px 0 4px 100px;
    font-weight: var(--fw-medium);
    font-size: var(--font-15);
    transition: var(--transition);
}
.selectSearchArea .select ul li:hover {
    background: var(--color-grayec);
}
.selectSearchArea .searchArea {
    position: relative;
}
.selectSearchArea .searchArea .formInput {
    width: 100%;
    max-width: 295px;
    height: 100%;
    font-size: var(--font-18);
    padding: 0 var(--space-20);
    transition: var(--transition);
    border: var(--border);
    background-color: var(--color-white);
}
.selectSearchArea .searchArea .formInput:focus {
    width: 100%;

    border: 1px solid var(--color-basic);
}
.selectSearchArea .searchArea .formButton {
    right: var(--space-20);
    top: 19px;
    position: absolute;
    display: flex;
    align-items: center;
}
.selectSearchArea .searchArea .formButton:hover {
    transform: rotate(90deg);
}
.selectSearchArea .searchArea .formInput::placeholder {
    color: var(--color-grayae);
    font-size: var(--font-15);
    font-weight: var(--fw-normal);
}
    /* 작가/작품 검색 미디어쿼리 */
    @media all and (max-width: 1023px) {
        .selectSearchArea {
            padding-top: var(--space-15);
            padding-bottom: var(--space-15);
        }
        .selectSearchArea .select {
            padding: 0 var(--space-15);
        }
        .selectSearchArea .selectWrap,
        .selectSearchArea .searchArea {
            width: 53%;
        }
        .selectSearchArea .searchArea {
            width: 45%
        }
        .selectSearchArea .selectWrap {
            display: flex;
            justify-content: space-between;
        }
        .selectSearchArea .selectArea {
            width: 49%;
        }
        .selectSearchArea .select {
            width: 100%
        }
        .selectSearchArea .select .selected {
            width: calc(100% - 80px);
        }
        .selectSearchArea .select ul li {
            padding-left: 95px
        }
        .selectSearchArea .selectArea:first-of-type {
            margin-right: var(--space-5);
        }
        .selectSearchArea .searchArea .formInput {
            max-width: 100%;
        }
    }
    @media all and (max-width: 767px) {
        .selectSearchArea form {
            flex-direction: column;
        }
        .selectSearchArea .selectWrap,
        .selectSearchArea .searchArea {
            width: 100%;
            height: 45px;
        }
        .selectSearchArea .selectWrap {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px
        }
        .selectSearchArea .selectArea {
            width: 49.3%
        }
        .selectSearchArea .selectArea:first-of-type {
            margin-right: 0
        }
        .selectSearchArea .select,
        .selectSearchArea .searchArea .formInput {
            padding: 0 var(--space-10);
        }
        .selectSearchArea .selectTit {
            font-size: var(--font-16);
            width: 70px
        }
        .selectSearchArea .select .selected {
            width: calc(100% - 70px);
        }
        .selectSearchArea .select .selected .selected-value {
            font-size: var(--font-16);
        }
        .selectSearchArea .select ul {
            top: 43px;
        }
        .selectSearchArea .select ul li {
            padding-left: 80px
        }
        .selectSearchArea .searchArea {
            width: 100%;
        }
        .selectSearchArea .searchArea .formButton {
            top: 15px;
            right: var(--space-10);
        }
        .selectSearchArea .searchArea .formButton img {
            width: 15px
        }
    }

/* 작가/작품 검색 결과 영역 */
.classificationResultArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-20)
}
.classificationResultArea .classificaiton {
    color: #070707;
    font-size: 15px;
    font-weight: 500;
}
.classificationResultArea span {
    color: #070707;
    font-size: 14px;
    font-weight: 300;
}

/* 작가/작품 리스트 영역 */        
.exhibitionList .listWrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 90px 20px;
}
.exhibitionList .listWrap .list .listImg img {
    width: 100%;
}
.exhibitionList .listWrap.artistList .list .listImg {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 127%;
    overflow: hidden;
}
.exhibitionList .listWrap.artistList .list .listImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exhibitionList .listWrap .list .listName {
    font-weight: var(--fw-medium);
    color: var(--color-basic);
    margin-top: var(--space-15)
}
.exhibitionList .listWrap .list .listNameS {
    color: var(--color-gold);
    font-size: var(--font-16);
    margin-top: var(--space-5)
}
    /* 작가/작품 리스트 미디어쿼리 */
    @media all and (max-width: 1023px) {
        .exhibitionList .listWrap {
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 50px 15px;
        }
    }
    @media all and (max-width: 767px) {
        .exhibitionList .listWrap {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 30px 15px;
        }
        .exhibitionList .listWrap .list .listName {
            font-size: var(--font-16);
            margin-top: var(--space-10);
        }
        .exhibitionList .listWrap .list .listNameS {
            font-size: var(--font-14);
            margin-top: 0;
        }
    }

/* 작가/작품 상세보기 영역 */
.exhibitionPost.artworkPost .halfBox .postLeft {
    width: 76%;
}
.exhibitionPost.artworkPost .halfBox .postRight {
    width: 24%;
}
.exhibitionPost .postTitle {
    border-bottom: var(--border);
    padding-bottom: var(--space-20)
}
.exhibitionPost.artworkPost .postTitle {
    padding-bottom: var(--space-30)
}
.exhibitionPost.artistPost .postTitle {
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
}
.exhibitionPost .postTitle .postName {
    font-size: var(--font-30);
    font-weight: var(--fw-bold);
    font-style: italic
}
.exhibitionPost .postTitle .birthplace {
    font-size: var(--font-18);
    color: var(--color-gray7b);
    font-weight: var(--fw-medium);
}
.exhibitionPost .postTitle .postCaption {
    font-weight: var(--fw-light);
    color: var(--color-basic);
    margin-top: var(--space-10)
}
.exhibitionPost .postArtistImg {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 130%;
    overflow: hidden;
}
.exhibitionPost .postArtistImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exhibitionPost .postSocial {
    margin-top: var(--space-15);
    font-size: var(--font-16);
    font-weight: var(--fw-light);
    color: var(--color-basic);
}
.exhibitionPost .postSocial dt {
    float: left;
    padding-right: var(--space-15)
}
.exhibitionPost .postSocial dt::after {
    content:"";
    clear:both
}
.exhibitionPost .postSocial dd {
    margin-bottom: var(--space-5);
    color: var(--color-dark);
    font-weight: var(--fw-normal);
}
.exhibitionPost .postSocial dd:last-of-type {
    margin-bottom: 0
}
.exhibitionPost .postSocial dd a {
    font-style: italic;
}
.exhibitionPost .postDetailImg img {
    width: 100%;
}
.exhibitionPost .postDetailAudio {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.exhibitionPost.artworkPost .postRight .postArtist:nth-child(n+2) {
    border-top: var(--border);
    padding-top: var(--space-20);
    margin-top: var(--space-20);
}
.exhibitionPost .postArtistName {
    font-size: var(--font-20);
    font-weight: bold;
    color: var(--color-gold);
    display: block;
    margin: var(--space-10) 0 var(--space-10)
}
/* 작가/작품 상세보기 > 출품작품 */
.exhibitionPost .relatedWorks {
    margin-top: var(--space-30)
}
.exhibitionPost .relatedWorks .inner {
    display: flex;
}
.exhibitionPost .relatedWorks .innerLeft {
    width: 305px
}
.exhibitionPost .relatedWorks .innerRight {
    width: calc(100% - 305px);
    padding-left: var(--space-60);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.exhibitionPost .relatedWorks .subTitleS {
    display: block;
    margin-bottom: 8px
}
.exhibitionPost .relatedWorks .relatedWorksImg {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
.exhibitionPost .relatedWorks .relatedWorksImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exhibitionPost .relatedWorks .relatedWorkDetail .relatedWorkName {
    font-size: var(--font-24);
    font-weight: var(--fw-bold);
}
.exhibitionPost .relatedWorks .relatedWorkDetail .relatedWorkCaption {
    color: var(--color-grayae);
    margin: var(--space-5) 0 var(--space-20)
}
.exhibitionPost.artworkPost .btnArea {
    justify-content: flex-end;
}
/* 참여작가 상세보기 > 출품작품 */
.artistPostView .teamDetail {
    background-color: var(--color-gray);
}
.artistPostView .exhibitionPostDetail {
    border-bottom: 1px solid #AEAEAE
}
.artistPostView .exhibitionPostDetail:last-of-type {
    border-bottom: 0
}
.artistPostView .halfBox .postLeft .inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.artistPostView .halfBox .postLeft .postDetail {
    height: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}
.artistPostView .postSocial {
    margin-top: 0;
}
/* 참여팀*/
.team .relatedWorks {
    border-top: var(--border)
}
.team .exhibitionPost .postSocial {
    width: 100%;
    display:flex
}
.team .exhibitionPost .postSocial dt {
    float: left;
    padding-right: var(--space-15)
}
.team .exhibitionPost .postSocial dt::after {
    content:"";
    clear:none
}
.team .exhibitionPost .relatedWorkCaption a {
    font-style: italic;
}
.team .exhibitionPost .innerRight .btnMore {
    max-width: 60px;
}
.artist .exhibitionPost .teamArea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-20);
}
.artist .exhibitionPost .teamArea .textBasic {
    font-weight: var(--fw-normal);
}
.artist .exhibitionPost .teamArea .btnMore {
    background-color: var(--color-white);
    padding: 5px 12px;
    border-radius: 9999999px;
    font-size: var(--font-13);
    /* font-weight: var(--fw-medium); */
}
.artist .exhibitionPost .teamArea .btnMore svg {
    width: 6px;
    transform: rotate(0deg);
    transform: translateX(0);
    margin-left: 7px;
    transition: var(--transition);
}
.artist .exhibitionPost .teamArea .btnMore:hover {
    background-color: var(--color-basic);
    color: var(--color-white)
}
.artist .exhibitionPost .teamArea .btnMore:hover svg {
    transform: rotate(0deg);
    transform: translateX(3px);
}
.artist .exhibitionPost .teamArea .btnMore:hover svg path {
    stroke: var(--color-white);
}
    /* 작가/작품 상세보기 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .exhibitionPost .relatedWorks .innerLeft {
            width: 230px
        }
        .exhibitionPost .relatedWorks .innerRight {
            width: calc(100% - 230px);
            padding-left: var(--space-40);
        }
    }
    @media all and (max-width: 1023px) {
        .exhibitionPost.artworkPost .postTitle {
            padding-bottom: var(--space-20)
        }
        .exhibitionPost .postTitle .postName {
            font-size: var(--font-25);
        }
        .exhibitionPost .postTitle .birthplace {
            font-size: var(--font-16);
        }
        .exhibitionPost .postTitle .postCaption {
            font-size: var(--font-18)
        }
        .exhibitionPost .postSocial {
            font-size: var(--font-15);
        }
        .exhibitionPost .relatedWorks .innerLeft {
            width: 30%
        }
        .exhibitionPost .relatedWorks .innerRight {
            width:70%;
            padding-left: var(--space-30);
        }
        .exhibitionPost .relatedWorks .relatedWorkDetail .relatedWorkName {
            font-size: var(--font-22);
        }
        .exhibitionPost .relatedWorks .relatedWorkDetail .relatedWorkCaption {
            margin: var(--space-5) 0 var(--space-10);
        }
    }
    @media all and (max-width: 767px) {
        .exhibitionPost.artworkPost .halfBox .postLeft,
        .exhibitionPost.artworkPost .halfBox .postRight {
            width: 100%;
        }
        .halfBox .postLeft {
            border-right: 0;
            border-bottom: var(--border)
        }
        .exhibitionPost .postTitle {
            padding-bottom: var(--space-15)
        }
        .exhibitionPost .postTitle .postName {
            font-size: var(--font-23);
        }
        .exhibitionPost .postTitle .birthplace {
            font-size: var(--font-15);
        }
        .exhibitionPost.artworkPost .postTitle {
            padding-bottom: var(--space-20);
        }
        .exhibitionPost .postTitle .postCaption {
            font-size: var(--font-16);
        }
        .exhibitionPost .postSocial {
            margin-top: var(--space-10);
            font-size: var(--font-14);
        }
        .exhibitionPost .postSocial dt {
            padding-right: 8px
        }
        .exhibitionPost .postSocial dd {
            margin-bottom: 3px
        }
        .exhibitionPost .relatedWorks .inner {
            flex-direction: column;
        }
        .exhibitionPost .relatedWorks .innerLeft {
            width:100%;
            max-width: 100%
        }
        .exhibitionPost .relatedWorks .innerRight {
            padding-left: 0;
            width: 100%;
            margin-top: var(--space-20)
        }
        .exhibitionPost .relatedWorks .relatedWorksImg {
            height: auto;
            padding-bottom:0;
        }
        .exhibitionPost .relatedWorks .relatedWorksImg img {
            position: relative;
        }
        .exhibitionPost .relatedWorks .relatedWorkDetail .relatedWorkName {
            font-size: var(--font-22);
        }
        .exhibitionPost .relatedWorks .relatedWorkDetail .relatedWorkCaption {
            margin: var(--space-5) 0 var(--space-15);
        }
        .exhibitionPost .relatedWorks .btnMore {
            margin-top: var(--space-30)
        }
        .exhibitionPost .postDetailAudio {
            padding-top: var(--space-15);
            padding-bottom: var(--space-15);
            flex-direction: column;
            align-items: flex-start;
        }
        .exhibitionPost .postDetailAudio .postDetailPlayer {
            margin-top: var(--space-10)
        }
        .exhibitionPost .postArtistName {
            font-size: var(--font-18);
            /* margin: var(--space-10) 0 var(--space-25); */
        }
        .exhibitionPost.artworkPost .btnArea {
            justify-content: center;
        }
    }

/* 작가/작품 더보기 영역 */
.exhibitionMore .listWrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 0 20px;
}
.exhibitionMore .listWrap .list .listImg img {
    width: 100%;
}
.exhibitionMore .listWrap.artistList .list .listImg {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 127%;
    overflow: hidden;
}
.exhibitionMore .listWrap.artistList .list .listImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: var(--transition);
}
.exhibitionMore .listWrap.artistList .list a:hover .listImg img {
    transform: scale(1.02);
}
.exhibitionMore .listWrap .list .listName {
    font-weight: var(--fw-medium);
    color: var(--color-basic);
    margin-top: var(--space-10);
    font-size: var(--font-18)
}
.exhibitionMore .listWrap .list .listNameS {
    color: var(--color-gold);
    font-size: var(--font-15);
    margin-top: 3px
}
    /* 작가/작품 상세보기 미디어쿼리 */
    @media all and (max-width: 1023px) {
        .exhibitionMore .listWrap {
            grid-gap: 10px;
        }
        .exhibitionMore .listWrap .list .listName {
            margin-top: var(--space-5);
            font-size: var(--font-16)
        }
    }
    @media all and (max-width: 767px) {
        .exhibitionMore .listWrap {
            overflow-x: scroll;
        }
        .exhibitionMore .listWrap {
            grid-gap: 7px;
        }
        .exhibitionMore .listWrap .list {
            width: 100px;
        }
        .exhibitionMore .listWrap .list .listName {
            font-size: var(--font-14)
        }
    }

/* 전시 > 스크리닝 */
.screening1 .tableBox .tableTd {
    flex-wrap: wrap;
}
.screening1 .tableBox .tableTd .dotList {
    width: 100%;
    margin-top: 8px
}
.screening2 .screeningInfo .dotList {
    display: flex;
}
.screening2 .screeningInfo .dotList li {
    font-weight: var(--fw-normal);
    margin-bottom: 0
}
.screening2 .screeningInfo .dotList li:not(:last-child) {
    margin-right: var(--space-60);
}
.screening2 .screeningTimeBox {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: var(--space-20)
}
.screening2 .screeningTimeBox:last-of-type {
    margin-bottom: 0
}
.screening2 .screeningTimeBox .screeningSession {
    width: 250px;
    border-right: var(--border);
    position: relative;
}
.screening2 .screeningTimeBox .screeningSession strong.session {
    display: block;
    color: var(--color-primary);
}
.screening2  .screeningTimeBox .screeningSession span.time {
    display: block;
    font-weight: var(--fw-medium);
    margin: var(--space-10) 0 var(--space-40)
}
.screening2 .screeningList {
    width: calc(100% - 250px);
    padding-left: var(--space-20);
    display: flex;
    align-items: center;
}
.screening2 .screeningList .inner {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 var(--space-30);
}
.screening2 .screeningList .movie {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    position: relative;
    padding: var(--space-20);
    transition: background 0.3s;
}
.screening2 .screeningList .movie:hover {
    background-color: var(--color-gray);
}
.screening2 .screeningList .movie button {
    width: 100%;
    height: 100%;
    background-color:transparent;
    display: block;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
}
.screening2 .screeningList .movieImg {
    width: 36%;
}
.screening2 .screeningList .movieImg .inner {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}
.screening2 .screeningList .movieImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.screening2 .screeningList .movieInfo {
    width: 62%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.screening2 .screeningList .movieInfo .movieNameEn {
    display: block;
    font-size: var( --font-14);
    font-weight: var(--fw-light);
    color: var(--color-gray7b)
}
.screening2 p.movieMeno {
    margin-top: var(--space-20);
    text-align: right;
}

ul.movieCaption {
    display: flex;
    flex-wrap: wrap;
}
ul.movieCaption li {
    display: inline;
    position: relative;
    font-size: var(--font-16);
    font-weight: var(--fw-light);
}
ul.movieCaption li:nth-child(2) {
    margin-right: 5px;
    padding-right: 5px
}
ul.movieCaption li:nth-child(2):after,
ul.movieCaption li:nth-child(2)::before {
    content:"";
    width: 1px;
    height: 14px;
    position: absolute;
    top: 6px;
    right: -1px;
    display: block;
    background-color: var(--color-grayae);
}
ul.movieCaption li:first-child {
    width: 100%;
}
ul.movieCaption li:nth-child(2)::before {
    display: none;
}
.screeningPostCaption ul.movieCaption li:first-child {
    width: auto;
}
.screeningPostCaption ul.movieCaption li:nth-child(2) {
    margin-left: 5px;
    padding-left: 5px
}
.screeningPostCaption ul.movieCaption li:nth-child(2)::before {
    display: block;
}
.screeningPostCaption ul.movieCaption  li:nth-child(2)::before {
    left:0;
}

/* 예약 확인 > 예약회차 */
.screeningReservation .screening2 .screeningTimeBox {
    flex-direction: column;
}
.screeningReservation .screening2 .screeningTimeBox .screeningSession {
    width: 100%;
    border-right:0;
    border-bottom: var(--border);
    padding: var(--space-20) 0;
    margin-bottom: 0
}
.screeningReservation .screening2 .screeningTimeBox .screeningSession strong {
    color: var(--color-gold);
}
.screeningReservation .screening2 .screeningTimeBox .screeningSession span.time {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
.screeningReservation .screening2 .screeningTimeBox .screeningSession strong,
.screeningReservation .screening2 .screeningTimeBox .screeningSession span {
    display: inline;
}
.screeningReservation .screening2 .screeningList {
    width: 100%;
    padding-left: 0
}
.screeningReservation .screening2 .screeningList .movie {
    padding: 0
}
.screeningReservation .screening2 .screeningList .movie:hover {
    background-color: transparent;
}
.screeningReservation .screening2 .screeningList .movie:not(:last-of-type):after {
    content: "";
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: -50px;
    z-index: 1;
    background-color: var(--color-grayec);
}
.screeningReservation .screening2 .screeningList .inner {
    grid-gap: 0 var(--space-100);
}
.screeningReservation .screening2 .screeningList .movieInfo {
    width: 70%;
}
.screeningReservation .screening2 .screeningList .movie:hover .subTitleXs {
    transition: all 0.3s;
    color: var(--color-primary);
}
.screeningReservation .screening2 .screeningList .movieImg {
    width: 28%;
}
.screeningReservation .screening2 .screeningList .movie .movieImg .inner {
    overflow: hidden;
    display: block;
}
.screeningReservation .screening2 .screeningList .movie .movieImg .inner img {
    transform: scale(1);
    transition: var(--transition);
}
.screeningReservation .screening2 .screeningList .movie:hover .movieImg .inner img { 
    transform: scale(1.02);
}
    /* 연계 프로그램 > 스크리닝 프로그램 미디어쿼리 */
    @media all and (max-width: 1699px) {
        .screening2 .screeningList .inner {
            grid-gap: 0 var(--space-20);
        }
        .screeningReservation .screening2 .screeningList .inner  {
            grid-gap: 0 var(--space-40);
        }
        .screening2 .screeningTimeBox .screeningSession {
            width: 200px;
        }
        .screening2 .screeningList {
            width: calc(100% - 200px);
        }
        .screening2 .screeningList .movie {
            padding: var(--space-10);
        }
        .screeningReservation .screening2 .screeningList .movie:not(:last-of-type):after {
            display: none;
        }
    }
    @media all and (max-width: 1199px) {
        .screening2 .screeningInfo .dotList li:not(:last-child) {
            margin-right: 0;
        }
        .screening2 .screeningTimeBox {
            flex-direction: column;
            justify-content: flex-start;
        }
        .screening2 .screeningTimeBox .screeningSession {
            width: 100%;
            border-right: 0;
            border-bottom: var(--border);
            padding-bottom: var(--space-15);
            margin-bottom: var(--space-15)
        }
        .screening2 .screeningTimeBox .screeningSession span.time {
            margin: var(--space-10) 0 0;
        }
        .screening2 .screeningTimeBox .screeningSession .btnGoldSp {
            position: absolute;
            right: 0;
            bottom: var(--space-15);
        }
        .screening2 .screeningList {
            width: 100%;
            padding-left: 0
        }
        .screening2 .screeningList .inner,
        .screeningReservation .screening2 .screeningList .inner {
            grid-gap: 0 var(--space-40);
        }
        .screening2 .screeningList .movie {
            flex-direction: column-reverse;
            padding: var(--space-20);
        }
        .screening2 .screeningList .movieInfo,
        .screening2 .screeningList .movieImg,
        .screeningReservation .screening2 .screeningList .movieInfo,
        .screeningReservation .screening2 .screeningList .movieImg {
            width: 100%;
        }
        .screening2 .screeningList .movieImg {
            margin-bottom: var(--space-10)
        }
        .screening2 .screeningList .movieInfo {
            justify-content: flex-start;
        }
        .screening2 .screeningList .movieInfo ul.movieCaption {
            margin-top: var(--space-10)
        }
    }
    @media all and (max-width: 1023px) {
        .screening2 .screeningInfo .dotList {
            flex-wrap: wrap;
        }
        .screening2 .screeningInfo .dotList li {
            width: 50%;
        }
        .screening2 .screeningInfo .dotList li:not(:last-child) {
            margin-right: 0;
        }
        .screening2 .screeningList .movie {
            padding: var(--space-10);
        }
        .screening2 .screeningList .inner,
        .screeningReservation .screening2 .screeningList .inner {
            grid-gap: 0 var(--space-30);
        }
    }
    @media all and (max-width: 767px) {
        .screening2 .screeningInfo .dotList li {
            width: 100%;
        }
        .screening2 .screeningInfo .dotList li:not(:last-child) {
            margin-bottom: var(--space-5);
        }
        .screening2 .screeningTimeBox {
            margin-bottom: var(--space-15);
        }
        .screening2 .screeningTimeBox .screeningSession {
            padding-bottom: var(--space-10);
            margin-bottom: var(--space-10)
        }
        .screening2 .screeningTimeBox .screeningSession span.time {
            margin: var(--space-10) 0 0;
        }
        .screening2 .screeningTimeBox .screeningSession .btnGoldSp {
            bottom: var(--space-10);
        }
        .screening2 .screeningList .inner,
        .screeningReservation .screening2 .screeningList .inner {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 0 0;
        }
        .screening2 .screeningList .movie,
        .screeningReservation .screening2 .screeningList .movie {
            padding: var(--space-);
            padding-bottom: var(--space-10);
            margin-bottom: var(--space-10);
            border-bottom: var(--border);
            flex-direction: row
        }
        .screening2 .screeningList .movie:hover {
            background-color: transparent;
        }
        .screening2 .screeningList .movie:last-of-type {
            border-bottom: 0
        }
        .screening2 .screeningList .movieInfo,
        .screeningReservation .screening2 .screeningList .movieInfo {
            width: 67%;
            justify-content: space-between
        }
        .screening2 .screeningList .movieInfo .movieNameEn {
            font-size: var(--font-13);
        }
        .screening2 .screeningList .movieInfo ul.movieCaption {
            margin-top: 0
        }
        .screening2 .screeningList .movieInfo ul.movieCaption li {
            font-size: var(--font-14);
        }
        .screening2 .screeningList .movieInfo ul.movieCaption li:nth-child(2):after {
            top: 5px;
            height: 12px;
        }
        .screening2 .screeningList .movieImg,
        .screeningReservation .screening2 .screeningList .movieImg {
            width: 33%;
            margin-bottom: 0
        }
        .screening2 p.movieMeno {
            text-align: left;
        }
    }

/* 예약 확인 > 예약 현황 */
.reservation .halfGrid {
    display: flex;
}
.reservation .borderBoxTitle {
    border-bottom: var(--borderW)
}
.reservation .calendar {
    width: 40%;
    position: relative;
}
.reservation .reservationInfo {
    width: calc(60% - 80px);
}
.reservation .reservationDate.dotTxt {
    margin-bottom: var(--space-15)
}
.reservation .reservationForm .inputWrap {
    margin-bottom: var(--space-10)
}
.reservation .reservationForm .inputWrapGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0 var(--space-10);
}
.reservation .reservationForm .inputBox {
    background-color: var(--color-grayec);
    padding: var(--space-15)
}
.reservation .reservationForm input.inputBox {
    padding-top: 0;
    padding-bottom: 0;
    height: 50px;
    width: 100%;
}
.reservation .reservationForm .inputPrivacy {
    height: 105px;
    overflow-y: scroll;
    margin-top: var(--space-15)
}
.reservation .formBottom {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-10)
}
.reservation .agreeBox {
    display: flex;
    align-items: center;
}
.reservation .agreeBox input[type=checkbox].switch {
    --active: #E84343;
    --active-inner: #FFFFFF;
    --focus: 2px rgba(0, 0, 0, .2);
    --border: #FFFFFF;
    --border-hover: #E84343;
    --background: #818181;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 28px;
    height: 10px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    top:0;
    cursor: pointer;
    background: var(--color-grayec);
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    border-radius: 11px;
}
.reservation .agreeBox input[type=checkbox].switch:after {
    content: "";
    display: block;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    left: -1px;
    top: -3px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    background: var(--color-gold);
    transform: translateX(var(--x, 0));
}
.reservation .agreeBox input[type=checkbox].switch:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    --ab: var(--active-inner);
    --x: 12px;
}
.reservation .agreeBox input[type=checkbox].switch:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
}
.reservation .agreeBox input[type=checkbox].switch:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
}
.reservation .agreeBox input[type=checkbox].switch + label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 8px;
    font-size: var(--font-15);
    font-weight: var(--fw-bold);
}
    /* 예약 확인 > 예약 현황 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .reservation .reservationInfo {
            width: calc(60% - 40px);
        }
    }
    @media all and (max-width: 1023px) {
        .reservation .halfGrid {
            display: flex;
            flex-direction: column;
            grid-gap: var(--space-15) 0;
        }
        .reservation .calendar,
        .reservation .reservationInfo {
            width: 100%;
        }
        .reservation .reservationForm .inputWrapGrid {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-10) 0;
        }
    }
    @media all and (max-width: 767px) { 
        .reservation .calendar {
            margin-bottom: 0;
        }
    }

/* 스크리닝 상영작 상세보기 */
.screeningDetail {
    height: 100%;
    overflow: hidden;
}
.screeningDetail .screeningHd {
    height: 86px;
}
.screeningDetail .screeningPostCaption.subTxtS {
    font-weight: var(--fw-light);
    margin-top: var(--space-5);
    color: var(--color-basic);
}
.screeningDetail .scrollInner {
    height: calc(100% - 86px);
    overflow-y: hidden;
}
.screeningDetail .halfBox {
    height: 100%;
    padding-top: var(--space-20)
}
.screeningDetail .halfBox .postLeft {
    width: 73.5%;
    height: 100%;
    overflow-y: scroll;
    border-right: 0;
}
.screeningDetail .halfBox .postLeft .inner {
    padding-right: var(--space-40);
}
.screeningDetail .halfBox .postRight {
    width: 26.5%;
    padding-left: var(--space-40);
    position: relative;
}
.screeningDetail .halfBox .postRight::after {
    content: "";
    position: absolute;
    left: -4px;
    top: 0;
    width: 1px;
    height: 100%;
    display: block;
    background-color: var(--color-grayec);
}
.screeningDetail .postLeft .barList {
    margin: var(--space-20) 0;
    padding-left: var(--space-15)
}
.screeningDetail .barList .barTitle::before {
    left: -15px;
    top: 6px;
}
.screeningDetail .postLeft .barList .barTitle {
    font-size: 90%
}
.screeningDetail .postLeft .barList .textBasic {
    font-size: 80%
}
.screeningDetail .postLeft .postDetailAudio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-10) var(--space-20)
}
.screeningDetail .postLeft .postDetailAudio .subTxtM {
    font-size: 80%
}
.screeningDetail .postLeft .postDetailAudio .postDetailPlayer {
    width: 300px;
    height: 36px;
}
.screeningDetail .postLeft .postDetailAudio .postDetailPlayer audio {
    width: 100%;
    height: 100%;
}
.screeningDetail .postRight .postArtistImg {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 130%;
    overflow: hidden;
}
.screeningDetail .postRight .postArtistImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.screeningDetail .postRight .subTitleXs {
    color: var(--color-gold);
    margin: var(--space-15) 0 var(--space-20);
    display: block;
}
.screeningDetail .postDetailImg img {
    width: 100%;
}
    /* 스크리닝 상영작 상세보기 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .screeningDetail .halfBox .postLeft .inner {
            padding-right: var(--space-30);
        }
        .screeningDetail .halfBox .postRight {
            padding-left: var(--space-30);
        }
    }
    @media all and (max-width: 1023px) {
        .screeningDetail .halfBox .postLeft .inner {
            padding-right: var(--space-20);
        }
        .screeningDetail .halfBox .postRight {
            padding-left: var(--space-20);
        }
        .screeningDetail .postLeft .postDetailAudio .postDetailPlayer {
            width: 280px;
            height: 36px;
        }
    }
    @media all and (max-width: 767px) {
        .screeningDetail .screeningHd {
            height: 72px;
        }
        .screeningDetail .scrollInner {
            overflow-y: scroll;
            height: calc(100% - 72px);
        }
        .screeningDetail .halfBox {
            width: 100%;
            display: block;
            height: auto;
            padding-top: var(--space-15);
            padding-right: var(--space-10)
        }
        .screeningDetail .halfBox .postLeft {
            overflow: hidden;
        }
        .screeningDetail .halfBox .postLeft,
        .screeningDetail .halfBox .postRight {
            width: 100%;
            height: auto;
        }
        .screeningDetail .postLeft .postDetailAudio .subTxtM {
            width: 100%;
        }
        .screeningDetail .postLeft .barList {
            margin: var(--space-15) 0;
            padding-left: var(--space-10)
        }
        .screeningDetail .barList .barTitle::before {
            left: -10px
        }
        .screeningDetail .halfBox .postLeft .inner {
            padding-right: 0;
        }
        .screeningDetail .postLeft .barList .barTitle {
            font-size: 80%;
        }
        .screeningDetail .postLeft .barList .textBasic,
        .screeningDetail .postLeft .postDetailAudio .subTxtM {
            font-size: 75%;
        }
        .screeningDetail .postLeft .postDetailAudio .subTxtM {
            width: 100%;
            margin-bottom: var(--space-5)
        }
        .screeningDetail .postLeft .postDetailAudio {
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
            padding: var(--space-10) var(--space-15);
        }
        .screeningDetail .halfBox .postRight {
            width:100%;
            padding-left: 0;
        }
        .screeningDetail .postLeft .postDetailAudio .postDetailPlayer {
            width: 100%;
        }
        .screeningDetail .postRight .subTitleXs {
            margin: var(--space-5) 0 var(--space-10);
        }
    }

/* 연계 프로그램 > 심포지엄 */
.symposium1 strong.textBasic {
    display: block;
    font-weight: var(--fw-medium);
}

/* 연계 프로그램 > 매니페스토 */
.manifesto1 .tableBox .tableRow .tableTd {
    flex-wrap: wrap;
}
.manifesto1 .tableBox .tableRow .tableTd p {
    width: 100%;
    font-weight: var(--fw-medium);
    margin-top: var(--space-20)
}
.manifesto2 .subTitleM,
.manifesto3 .subTitleM {
    font-weight: var(--fw-medium);
}
.manifesto3 .borderBoxTitle {
    border-color: var(--color-grayae);
}
.manifesto3 .tableReal {
    border-left: 0
}
.manifesto3 .tableReal td {
    border-style: dashed;
    border-width: 0 1px 1px 0;
}
.manifesto3 .tableReal td:nth-child(odd) {
    padding-left: 0
}
.manifesto3 .tableReal td:nth-child(even) {
    border-right: 0;
}
.manifesto3 .tableReal tr:last-child td {
    border-bottom: 0
}
.manifesto1 .tableBox .tableRow .tableTd p {
    width: 100%;
    font-weight: var(--fw-medium);
    margin-top: var(--space-20)
}
    /* 연계 프로그램 > 매니페스토 미디어쿼리 */
    @media all and (max-width: 767px) {
        .manifesto1 .tableBox .tableRow .tableTd p {
            margin-top: var(--space-10);
        }
        .manifesto3 .tableReal td:nth-child(odd) {
            border-right: 0
        }
        .manifesto3 .tableReal td:nth-child(odd),
        .manifesto3 .tableReal td:nth-child(even) {
            padding-left: 0;
            padding-right: 0
        }
        .manifesto3 .tableReal tr:last-child td:first-child {
            border-bottom: 1px dashed var(--color-grayec)
        }
    }

/* 연계 프로그램 > 퍼블릭 프로그램 */
.public1 .halfGrid .borderBoxBody {
    height: 81%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.public1 .halfGrid .borderBoxBody .table {
    margin-top: var(--space-20)
}
.public1 .halfGrid .borderBoxBody .table tbody td {
    font-size: var(--font-18);
}
    /* 연계 프로그램 > 퍼블릭 프로그램 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .public1 .halfGrid .borderBoxBody .table tbody td {
            font-size: var(--font-16);
            padding-left: 5px;
            padding-right: 5px
        }
    }
    @media all and (max-width: 1023px) {
        .public1 .halfGrid {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-20) 0;
        }
    }
    @media all and (max-width: 767px) {
        .public1 .halfGrid .borderBoxBody .table {
            margin-top: var(--space-10);
        }
        .public1 .halfGrid .borderBoxBody .table tbody td {
            font-size: var(--font-15);
        }
        .public1 .halfGrid {
            grid-gap: var(--space-15) 0;
        }
    }

/* 관람서비스 > 관람안내 */
.guide1 .subTitle {
    font-weight: var(--fw-medium);
    display: block;
    margin-bottom: var(--space-10)
}
.guide3 .guide3Box h5 {
    margin-bottom: var(--space-15)
}
.guide3 .titleArea .subTxtM {
    margin-top: 10px
}
    /* 관람서비스 > 관람안내 미디어쿼리 */
    @media all and (max-width: 767px) {
        .guide1 .subTitle {
            margin-bottom: var(--space-5)
        }
    }

/* 관람서비스 > 오시는길 */
.navigate1 .map {
    height: 550px;
}
.navigate1 .googleMap iframe {
    width: 100%;
    height: 100%;
}
.navigate3 .navigate3Box .textBasic {
    display: flex;
    align-items: center;
}
.navigate3 .navigate3Box .textBasic img {
    margin-right: var(--space-10);
}
.navigate3 .busList {
    display: flex;
    flex-direction: column;
}
.navigate3 .busList:first-of-type {
    margin-bottom: var(--space-15)
}
.navigate3 .busList span{
    color: var(--color-gold);
    font-weight: var(--fw-medium);
    margin-right: var(--space-20)
}
/* 카카오맵 스크립트 */
.customoverlay {
    position: relative;
    bottom: 48px;
    border-radius: 5px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ddd;
    float: left;
}
.customoverlay:nth-of-type(n) {
    border: 0;
    /* box-shadow: 0px 1px 2px #888; */
}
.customoverlay a {
    display: block;
    text-decoration: none;
    color: var(--color-dark);
    text-align: center;
    border-radius: 6px;
    font-size: 11px;
    font-weight: bold;
    overflow: hidden;
    background: #ECECEC;
    background: #ECECEC url(/public/images/icon-navigation.svg) no-repeat right 5px center;
    background-size:5px 10px;
    border: 1px solid var(--color-dark);
    border-radius: 1000000000px;
}
.customoverlay,
.gm-style-iw-t,
.naver-customoverlay {
    transition: all 0.3s;
    transform: translateY(0);
}
.customoverlay:hover,
.gm-style-iw-t:hover,
.naver-customoverlay:hover {
    transform: translateY(2px);
}
.google-customoverlay a:hover,
.naver-customoverlay a:hover {
    color: var(--color-dark)
}
.customoverlay .title {
    display: block;
    text-align: center;
    background: #fff;
    margin-right: 15px;
    padding: 5px 5px;
}
.customoverlay:after {
    content: '';
    position: absolute;
    margin-left: -5px;
    left: 50%;
    bottom: -8px;
    height: 8px;
    width: 12px;
    background: var(--color-dark);
    -webkit-clip-path: polygon(0 0,50% 100%,100% 0);
    clip-path: polygon(0 0,50% 100%,100% 0);
    /* background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png') */
}
/* 구글맵 스크립트 */
.gm-style-iw-d {
    margin-right: -10px;
    margin-bottom: -7px;
}
.gm-style .gm-style-iw-c {
    padding-top: 5px;
    padding-left: 5px;
    background-color: #FFFFFF;
    border: 1px solid var(--color-dark);
    border-radius: 1000000000px;
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.3);
    box-shadow: 0 0 0 0 rgba(0,0,0,.3);
}
.gm-style .gm-style-iw-tc {
    filter: none;
}
.gm-style .gm-style-iw-tc::after {
    content: "";
    height: 8px;
    width: 12px;
    left: 6px;
    top: 0px;
    position: absolute;
    background: var(--color-dark);
    -webkit-clip-path: polygon(0 0,50% 100%,100% 0);
    clip-path: polygon(0 0,50% 100%,100% 0);
}
.customoverlay a,
.gm-style-iw-d,
.naver-customoverlay,
.customoverlay a {
    font-size: 13px;
    color: var(--color-dark);
    font-weight: var(--fw-medium);
}
.gm-ui-hover-effect {
    display: none !important;
}
/* 네이버맵 스크립트 */
.naver-customoverlay {
    padding: 5px 10px;
    background-color: #FFFFFF;
    border: 2px solid var(--color-dark);
    border-radius: 1000000000px;
    position: relative;
    white-space: nowrap;
}
.naver-customoverlay::after {
    content: "";
    width: 13px;
    height: 9px;
    position: absolute;
    left: 10px;
    bottom: -10px;
    background: var(--color-dark);
    -webkit-clip-path: polygon(0 0,50% 100%,100% 0);
    clip-path: polygon(0 0,50% 100%,100% 0);
}
    /* 관람서비스 > 오시는길 미디어쿼리 */
    @media all and (max-width: 1199px) {
        .navigate1 .map {
            height: 450px;
        }
        .navigate3 .navigate3Box .textBasic {
            align-items: flex-start;
        }
        .navigate3 .navigate3Box .textBasic img {
            margin-top: 2px
        }
        .navigate3 .busList  span {
            margin-right: 0;
            margin-bottom: var(--space-5)
        }
    }
    @media all and (max-width: 1023px) {
        .navigate1 .map {
            height: 400px;
        }
        .navigate3 .navigate3Box .textBasic img {
            width: 25px;
            margin-top: 4px
        }
        .navigate3 .busList {
            flex-direction: row;
        }
        .navigate3 .busList span {
            width: 90px;
            margin-right: var(--space-20);
            margin-bottom: 0
        }
        .navigate3 .busList p {
            width: calc(100% - 90px);
        }
    }
    @media all and (max-width: 767px) {
        .navigate1 .map {
            height: 300px;
        }
        .navigate3 .navigate3Box .textBasic img {
            width: 20px;
            margin-top: 2px
        }
        .navigate3 .busList {
            flex-direction: column;
        }
        .navigate3 .busList span {
            width: 100%;
            margin-right: 0;
            margin-bottom: var(--space-5)
        }
        .navigate3 .busList p {
            width: 100%;
        }
        .customoverlay a,
        .gm-style-iw-d,
        .naver-customoverlay,
        .customoverlay a {
            font-size: 11px;
        }
        .naver-customoverlay::after {
            left: 13px;
            bottom: -8px;
            width: 11px;
            height: 7px;
        }
    }

/* 관람서비스 > 종합안내소 */
.information2 .halfGrid {
    font-weight: var(--fw-medium);
}
.information2 .colorGold {
    font-weight: var(--fw-bold);
}

/* 관람서비스 > 가이드맵 */
.guidemap .guidemapImg {
    text-align: center;
}
.guidemap .guidemapImg img {
    width: 100%;
    max-width: 1200px;
}
.guidemap .btnArea .btnGoldL,
.guidemap .btnArea .btnDarkL {
    width: 300px;
}
.guidemap .btnArea .btnDarkL{
    margin-left: 10px
}
    /* 관람서비스 > 가이드맵 미디어쿼리 */
    @media all and (max-width: 767px) {
        .guidemap .btnArea {
            flex-direction: column;
        }
        .guidemap .btnArea .btnGoldL,
        .guidemap .btnArea .btnDarkL {
            width:100%;
        }
        .guidemap .btnArea .btnDarkL {
            margin-left: 0;
            margin-top: 10px
        }
    }

/* 관람서비스 > 아트상품 */
.merchandise .threeGrid {
    grid-gap: var(--space-80) var(--space-80);
}
.merchandise .merchandiseWrap .merchandiseImg {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 110%;
    overflow: hidden;
}
.merchandise .merchandiseWrap .merchandiseImg img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.merchandise .merchandiseWrap .subTitleM {
    margin-bottom: var(--space-15)
}
.merchandise .merchandiseWrap .option {
    padding: var(--space-20) 0;
    display: flex;
    align-items: center;
    border-bottom: var(--border);
    font-weight: var(--fw-normal);
}
.merchandise .merchandiseWrap .option .optionList {
    width: 50%;
    display: flex;
}
.merchandise .merchandiseWrap .option .optionList:nth-child(2) {
    border-left: var(--border);
    padding-left: var(--space-20)
}
.merchandise .merchandiseWrap .option .optionList strong {
    margin-right: var(--space-20);
    font-weight: var(--fw-medium);
    display: flex;
}
.merchandise .merchandiseWrap .option .optionList strong img {
    margin-right: 8px
}
.merchandise .merchandiseWrap .option .optionList .dot {
    padding-left: 13px;
    position: relative;
}
.merchandise .merchandiseWrap .option .optionList .dot::before {
    content:"";
    width: 3px;
    height: 3px;
    display: block;
    position: absolute;
    left: 0;
    top: 14px;
    background-color: var(--color-dark);
}
    /* 관람서비스 > 아트상품 미디어쿼리 */
    @media all and (max-width: 1699px) {
        .merchandise .merchandiseWrap .option {
            flex-direction: column;
            align-items: flex-start;
        }
        .merchandise .merchandiseWrap .option {
            padding: var(--space-15) 0;
        }
        .merchandise .merchandiseWrap .option .optionList {
            width: 100%;
            font-size: var(--font-18)
        }
        .merchandise .merchandiseWrap .option .optionList:nth-child(2) {
            border-left: 0;
            padding-left: 0;
            margin-top: var(--space-5)
        }
    }
    @media all and (max-width: 1023px) {
        .merchandise .threeGrid {
            grid-template-columns: repeat(2, 1fr);
            grid-gap: var(--space-30) var(--space-20);
        }
        .merchandise .merchandiseWrap .option .optionList strong {
            margin-right: var(--space-15)
        }
    }
    @media all and (max-width: 767px) {
        .merchandise .threeGrid {
            grid-template-columns: repeat(1, 1fr);
            grid-gap: var(--space-20) 0;
        }
        .merchandise .merchandiseWrap .subTitleM {
            margin-bottom: var(--space-10);
        }
        .merchandise .merchandiseWrap .option .optionList {
            font-size: var(--font-16)
        }
        .merchandise .merchandiseWrap .option .optionList .dot::before {
            top: 11px;
        }
    }