@charset "utf-8";

/* ==========================================================================
    BASIC SETTING
    ========================================================================== */
:root {
    --main-gap: 140px;
    --basic-font01 : 'Pretendard', sans-serif;
    --basic-font02 : 'TTWanjudaedunsanche', sans-serif;
    --basic-font03 : 'Roboto', sans-serif;
    --basic-color: #222;
    --bg-color: #fff;
    --point-color01: #1aa249;
    --point-color0101: #6b645d;
    --point-color02: #0072bf;
    --point-color0201: #0b4da2;
    --point-color0202: #005bac;
    --point-color03: #bfa784;
    --point-color0301: #ad936d;
    --point-color04: #e60012;
    --point-color0401: #ff0014;
    --point-color0402: #ee2e30;
    --header-color: #fff;
    --header-height: 100px;
    --subnav-height: 72px;
    --round-size: 100px;

    --form-border: #e6e3df;
    --form-gray: #f6f7f9;
    --form-focus: #222;
    --form-basic: #222;
    --form-chk: #1aa249;
    --form-fontsize : 17px;
    --form-lineheight : 22px;
    --form-fontcolor : #222;
    --form-placeholder : #bbb;
    --form-padding : 18px;
    --form-padding1 : 14px 18px;
    --input-height: 56px;
    --input-gap: 20px;
    --textarea-height: 260px;
}
@media (width <= 1800px) {
    :root {
        --main-gap: 80px;
    }
}
@media (width <= 1700px) {
    :root {
        --main-gap: 40px;
    }
}
@media (width <= 1200px) {
    :root {
        --round-size: 60px;
    }
}
@media (width <= 1023px) {
    :root {
        --header-height: 80px;
        --subnav-height: 62px;
        --round-size: 40px;
        --input-height: 50px;
        --textarea-height: 220px;
        --form-fontsize : 16px;
    }
}
@media (width <= 767px) {
    :root {
        --main-gap: 20px;
        --header-height: 72px;
        --subnav-height: 52px;
        --input-height: 48px;
        --textarea-height: 200px;
        --form-fontsize : 15px;
        --form-padding : 14px;
        --form-padding1 : 10px 14px;
    }
}

/* ==========================================================================
    COMPONENT
   ========================================================================== */
.pg-title{
    text-align: center;
    padding-top: 13px;
    padding-bottom: 40px;
    border-bottom: 1px solid #e9e9e9;
    & .title{
        font-family: var(--basic-font02);
        font-size: 36px;
    }
    @media (width <= 1023px) {
        padding-top: 7px;
        padding-bottom: 30px;
        & .title{font-size: 30px;}
    }
    @media (width <= 767px) {
        & .title{font-size: 26px;}
    }
}
.tit-sec{
    font-family: var(--basic-font02); text-align: center;
    & .txt-en{font-size: 12px; color: var(--point-color03); text-transform: uppercase; margin-bottom: 6px;}
    & .title{font-size: 36px;}
    @media (width <= 1023px) {
        & .txt-en{font-size: 11px;}
        & .title{font-size: 32px;}
    }
    @media (width <= 767px) {
        & .title{font-size: 30px;}
    }
}
.txt-en01{
    font-family: var(--basic-font03); font-size: 12px; font-weight: bold; text-transform: uppercase; opacity: .5;
    @media (width <= 1023px) {
        font-size: 11px;
    }
}
.txt-en02{font-family: var(--basic-font03); font-size: 16px; font-weight: bold; color: var(--point-color03);}
.txt-b01{
    font-family: var(--basic-font02); font-size: 42px;
    @media (width <= 1023px) {
        font-size: 36px;
    }
    @media (width <= 767px) {
        font-size: 32px;
    }
}
.txt-b02{
    font-family: var(--basic-font02); font-size: 30px;
    @media (width <= 1023px) {
        font-size: 28px;
    }
    @media (width <= 768px) {
        font-size: 25px;
    }
}

.txt-b03{
    font-family: var(--basic-font02); font-size: 25px;
    @media (width <= 1023px) {
        font-size: 22px;
    }
    @media (width <= 768px) {
        font-size: 18px;
    }
}

.txt-n01{color: #555; line-height: 30px; word-break: keep-all;}
.txt-n02{font-size: 18px; color: #555; line-height: 30px; word-break: keep-all;}
.txt-n03{
    font-size: 17px; color: #555; line-height: 30px; word-break: keep-all;
    @media (width <= 1023px) {
        font-size: 16px;
    }
}
.txt-dot02{
    font-size: 18px; color: #555; line-height: 30px; word-break: keep-all;
    & p{padding-left: 20px; text-indent: -20px;}
    & p:before{
        content: "";  display: inline-block; position: relative; top: -5px; width: 6px; height: 3px; background-color: var(--point-color01); margin-right: 14px;
    }
    @media (width <= 1200px) {
        font-size: 17px;
    }
    @media (width <= 1023px) {
        font-size: 16px; line-height: 28px;
        & p{
            padding-left: 18px; text-indent: -18px;
        }
        & p:before{
            margin-right: 8px;
        }
    }
}
.tit-filter{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 10px;
    & .filter{display: flex; gap: 10px;}
    & .button02{min-width: 135px;}
    @media (width <= 1280px) {
        flex-direction: column;
        & .filter{margin-top: 25px;}
    }
    @media (width <= 1200px) {
        & .filter{flex-wrap: wrap; justify-content: center; gap: 8px}
        & .button02{min-width: 140px; height: 48px; border-radius: 24px}
    }
    @media (width <= 1023px) {
        padding-top: 60px;
    }
    @media (width <= 767px) {
        padding-top: 40px;
        & .button02{min-width: 0; height: 42px; font-size: 15px; padding: 0 26px; border-width: 1px; border-radius: 21px}
    }
}
.tit-filter_history{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    padding-bottom: 30px;
    & .filter{display: flex; gap: 10px;}
    & .button07{min-width: 100px;}
    @media (width <= 1280px) {
        flex-direction: column;
        & .filter{margin-top: 25px;}
    }
    @media (width <= 1200px) {
        & .filter{flex-wrap: wrap; justify-content: center; gap: 8px}
        & .button07{min-width: 100px; height: 40px; border-radius: 5px}
    }
    @media (width <= 1023px) {
        padding-top: 20px;
    }
    @media (width <= 767px) {
        padding-top: 20px;
        & .button07{min-width: 0; height: 35px; font-size: 12px; padding: 0 26px; border-width: 1px; border-radius: 5px}
    }
}
.btn-more01{
    font-family: var(--basic-font02);
    font-size: 14px;
    color: #fff;
    padding-right: 22px;
    background: url("../images/common/arr0302.png") no-repeat right center / 16px auto;
}

.btn-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    &.right{justify-content: flex-end}
    @media (width <= 1023px) {
        gap: 10px;
    }
}

.sns-set{
    display: flex; justify-content: center; align-items: center; gap: 10px;
    &::before,
    &::after{content: ""; display: block; flex: 1; height: 1px; background-color: #e6e6e6}
    &::before{margin-right: 14px}
    &::after{margin-left: 14px}
    > a{display: block; width: 42px; height: 42px; font-size: 0; border: 1px solid #cdcdcd; border-radius: 50%; transition: .2s ease-in-out}
    > a:hover{border-color: #222;}
    & .facebook{background: url("../images/common/facebook0101.png") no-repeat center / 11px auto;}
    & .facebook:hover{background-color: #222; background-image: url("../images/common/facebook0102.png")}
    & .instagram{background: url("../images/common/instagram0101.png") no-repeat center / 20px auto;}
    & .instagram:hover{background-color: #222; background-image: url("../images/common/instagram0102.png")}
    & .ytube{background: url("../images/common/ytube0101.png") no-repeat center / 22px auto;}
    & .ytube:hover{ background-color: #222; background-image: url("../images/common/ytube0102.png")}
    & .blog{background: url("../images/common/blog0101.png") no-repeat center / 22px auto;}
    & .blog:hover{background-color: #222; background-image: url("../images/common/blog0102.png")}
}

.instagram-container{
    & .widget-area{}
    & .info-area{display: flex; justify-content: space-between; align-items: center; margin-top: 19px}
    & .title{font-size: 14px}
    & .userat{font-size: 14px; font-weight: bold; color: #999}
}

.period{
    position: relative;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #fff;
    line-height: 32px;
    & .c01{color: var(--point-color04)}
    & .txt02{display: flex; align-items: center}
    & .txt02 .date{font-family: 'Roboto', sans-serif; font-size: 20px;}
    & .txt02 .week{display:flex; justify-content: center; align-items: center; width: 32px; height: 32px; font-family: var(--basic-font01); font-size: 15px; color: #fff; background-color: var(--point-color0401); border-radius: 50%; margin-left: 4px}
    & .txt02 .week01{background-color: var(--point-color01)}
    & .txt02 .week02{background-color: var(--point-color02)}
    & .ico-arr:after{content: ""; display: block; width: 8px; height: 32px; background: url("../images/common/arr0203.png") no-repeat center / 100% auto; margin: 0 17px 0 12px}
    & .txt03{font-family: var(--basic-font01); font-size: 18px; margin-left: 12px}
    @media (width <= 1023px) {
        & .txt02 .date{font-size: 18px;}
        & .txt02 .week{width: 28px; height: 28px; font-size: 14px;}
        & .txt03{font-size: 17px}
    }
    @media (width <= 767px) {
        & .txt02 .date{font-size: 17px;}
        & .txt02 .week{width: 24px; height: 24px; font-size: 13px;}
        & .ico-arr:after{margin: 0 8px}
        & .txt03{font-size: 16px}
    }
}

.list-shortcut{
    > ul{display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; gap: 40px 0}
    > ul > li > a{display: inline-flex; justify-content: center; min-width: 100px; font-weight: bold; padding-top: 72px; transition: .2s ease-in-out;}
    > ul > li > a:hover{color: var(--point-color01);}
    & .ico01{background: url("../images/main/main0101.png") no-repeat center 6px / 58px auto;}
    & .ico02{background: url("../images/main/main0102.png") no-repeat center 7px / 58px auto;}
    & .ico03{background: url("../images/main/main0103.png") no-repeat center 3px / 58px auto;}
    & .ico04{background: url("../images/main/main0104.png") no-repeat center 3px / 54px auto;}
    & .ico05{background: url("../images/main/main0105.png") no-repeat center 5px / 54px auto;}
    & .ico06{background: url("../images/main/main0106.png") no-repeat center 8px / 60px auto;}
    & .ico01:hover{background-position: center 3px;}
    & .ico02:hover{background-position: center 4px;}
    & .ico03:hover{background-position: center 0;}
    & .ico04:hover{background-position: center 0;}
    & .ico05:hover{background-position: center 2px;}
    & .ico06:hover{background-position: center 5px;}

    .main-sec01 &{padding-top: 28px; padding-bottom: 28px;}
    @media (width <= 1200px) {
        > ul > li > a{padding-top: 64px}
        & .ico01{background-size: 49px auto;}
        & .ico02{background-size: 49px auto;}
        & .ico03{background-size: 49px auto;}
        & .ico04{background-size: 46px auto;}
        & .ico05{background-size: 46px auto;}
        & .ico06{background-size: 51px auto;}
    }

    @media (width <= 1023px) {
        > ul{grid-template-columns: repeat(3, 1fr);}
    }

}

/*메인하단 바로가기*/
.hy-shortcut{
    > ul{display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.5%}
    & .s-box{position: relative; display: flex; width: 100%; height: 150px; padding: 16px 19px; border: 1px solid #d1ccbd; background-color: #fff; border-radius: 6px; box-shadow: 3px 3px 10px 3px rgba(0,0,0,.1); transition: .2s ease-in-out;}
    & .s-box:after{content: "VIEW"; position: absolute; left: 19px; bottom: 12px; font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: bold; color: #ab9f7b; line-height: 22px; padding-right: 18px; background: url("../images/common/arr0401.png") no-repeat right center / 12px auto;}
    & .tit-box{font-family: var(--basic-font02); font-size: 22px; line-height: 26px}
    & .s-box:hover{border-color: var(--point-color01); background-color: var(--point-color01)}
    & .s-box:hover .cp01,
    & .s-box:hover .cp02{transition: .2s ease-in-out}
    & .s-box:hover .cp01,
    & .s-box:hover .cp02{color: #fff !important;}
    & .s-box:hover:after{color: #fff; background-image: url("../images/common/arr0402.png");}
    & .ico01{background: #fff url("../images/common/ico_shortcut0101.png") no-repeat calc(100% - 19px) calc(100% - 19px) / 45px auto;}
    & .ico01:hover{background-image: url("../images/common/ico_shortcut0102.png")}
    & .ico02{background: #fff url("../images/common/ico_shortcut0201.png") no-repeat calc(100% - 19px) calc(100% - 19px) / 45px auto;}
    & .ico02:hover{background-image: url("../images/common/ico_shortcut0202.png")}
    & .ico03{background: #fff url("../images/common/ico_shortcut0301.png") no-repeat calc(100% - 19px) calc(100% - 19px) / 40px auto;}
    & .ico03:hover{background-image: url("../images/common/ico_shortcut0302.png")}
    & .ico04{background: #fff url("../images/common/ico_shortcut0401.png") no-repeat calc(100% - 19px) calc(100% - 19px) / 45px auto;}
    & .ico04:hover{background-image: url("../images/common/ico_shortcut0402.png")}
    & .ico05{background: #fff url("../images/common/ico_shortcut0501.png") no-repeat calc(100% - 19px) calc(100% - 19px) / 46px auto;}
    & .ico05:hover{background-image: url("../images/common/ico_shortcut0502.png")}
    & .ico06{background: #fff url("../images/common/ico_shortcut0601.png") no-repeat calc(100% - 19px) calc(100% - 19px) / 45px auto;}
    & .ico06:hover{background-image: url("../images/common/ico_shortcut0602.png")}
    @media (width >= 1024px) and (width < 1200px) {
        & .s-box{padding: 12px 14px; background-position: calc(100% - 14px) calc(100% - 14px); background-size: 38px auto;}
        & .tit-box{font-size: 20px}
    }
    @media (width <= 1200px) {
        > ul{gap: 20px}
    }
    @media (width <= 1023px) {
        > ul{grid-template-columns: repeat(3, 1fr);}
    }
    @media (width <= 767px) {
        > ul{grid-template-columns: repeat(2, 1fr);}

    }
}

/*이미지 박스-행사안내(메인)*/
.img-box{
    position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; overflow: hidden; transition: .3s ease-in-out;
    &::after{content: ""; display: block; padding-bottom: 148%;}
    > a{position: absolute; left: 0; top:0; display: block; width: 100%; height: 100%;}
    & .bg img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: .3s ease-in-out;}

    &:hover .bg img{transform: scale(1.1);}
    & .txt-en{position: absolute; top: 40px; left: 38px; font-size: 11px; color: rgba(255,255,255,.4); letter-spacing: 0.5px; text-transform: uppercase; writing-mode: vertical-lr;}
    & .obj{position: absolute; right: 40px; top: 40px; user-select: none;}
    & .obj01 img{width: 48px;}
    & .obj02 img{width: 57px;}
    & .obj03 img{width: 57px;}
    & .tit-set{position: absolute; left: 0; bottom: 0; width: 100%; color: #fff; padding: 36px 40px; z-index: 100;}
    & .tit-set .title{font-size: 24px;}
    & .tit-set p{font-family: var(--basic-font01); font-size: 15px; line-height: 22px; opacity: .7; word-break: keep-all; margin-top: 7px;}
    & .tit-set .btn-more{margin-top: 22px}
    @media (width <= 1200px) {
        & .tit-set{padding: 18px 20px;}
        & .txt-en{left: 20px; top: 20px; font-size: 10px}
        & .obj{right: 20px; top: 20px;}
    }
    @media (width >= 768px) and (width < 1024px) {
        &::after{padding-bottom: 136%}
        & .tit-set{padding: 18px 14px;}
        & .tit-set .title{font-size: 22px}
        & .tit-set p{font-size: 14px}
        & .tit-set .btn-more,
        & .obj{display: none}
    }
    @media (width <= 1023px) {
        & .txt-en{display: none}
    }
    @media (width <= 767px) {
        &::after{padding-bottom: 84%}
        & .tit-set{padding: 24px 28px;}
        & .txt-en{left: 28px; top: 28px; font-size: 10px}
        & .obj{right: 28px; top: 28px;}
    }
}
.list-img-box{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    @media (width <= 1200px) {
        gap: 40px;
    }
    @media (width <= 1023px) {
        gap: 30px;
    }
    @media (width <= 767px) {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}
.info-box01{
    display: flex; border: 1px solid #e2e2e2;
    & .thumb{width: 220px}
    & .info-article{
        flex: 1; padding: 17px 38px; border-left: 1px solid #e2e2e2; background-color: #f6f3eb;
        & .year{font-family: var(--basic-font02); font-size: 32px; color: var(--point-color01);}
        & .title{font-size: 20px; font-weight: bold; line-height: 28px;}
        & .title{display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden;-webkit-line-clamp: 2;}
        & .info-area{padding-top: 13px; padding-bottom: 13px; border-top: 1px solid #e0d5c2; border-bottom: 1px solid #e0d5c2; margin-top: 12px}
        & .info-area > li{display: grid;  grid-template-columns: 48px 1fr; font-size: 15px; line-height: 25px; margin-bottom: 4px;}
        & .info-area > li:last-child{margin-bottom: 0}
        & .info-area .item{font-weight: bold; color: var(--point-color0301);}
        & .info-area .vl{color: #555; word-break: keep-all}
        & .sub-text{font-weight: bold; color: var(--point-color0202); line-height: 22px; margin-top: 15px;}
    }
    @media (width <= 1280px) {
        & .info-article{
            padding: 20px 30px;
        }
    }
    @media (width <= 1200px) {
        & .info-article{
            padding: 20px 24px;
            & .info-area > li{grid-template-columns: 40px 1fr; font-size: 14px; line-height: 22px}
            & .year{font-size: 24px}
            & .sub-text{font-size: 15px}
        }
    }
    @media (width <= 767px) {
        flex-direction: column;
        & .thumb{width: 100%}
        & .info-article{
            border-left: 0;
            border-top: 1px solid #e2e2e2;
            padding: 24px 28px;
            & .info-area > li{grid-template-columns: 52px 1fr; font-size: 15px; line-height: 26px}
            & .year{font-size: 26px}
            & .sub-text{font-size: 16px}
        }
    }
}
.info-box02{
    & .thumb img{border-radius: 15px 15px 0 0}
    & .info-article{
        padding: 28px 24px; border: 1px solid #e2e2e2; border-top: 0; border-radius: 0 0 15px 15px;
        & .title{font-family: var(--basic-font02); font-size: 24px; line-height: 28px;}
        & p{min-height: 52px;  color: #777; line-height: 26px; word-break: keep-all; margin-top: 7px;}
    }
    @media (width <= 1023px) {
        & .info-article{
            padding: 22px 18px;
            & .title{font-size: 22px; line-height: 26px;}
        }
    }
}

/* ==========================================================================
    MAIN VISUAL
    ========================================================================== */
.main-visual{
    position: relative; overflow: hidden; z-index: 10;
    & .main-vis{position: relative; width: 100%; height: 100dvh; background-color: #fff;  border-radius: 0 0 var(--round-size) 0; overflow: hidden}
    & .main-vis .bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover;}
    /*& .main-vis::after{content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.1);}*/


    & .main-vis01 .bg{background-color: #faf1e1; background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis_2025-06-13.jpg');}
    /*& .main-vis01 .bg{background-color: #faf1e1; background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis_2025-03-20.jpg');}*/
    /*& .main-vis02 .bg{background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis_2024-08-02.jpg'); animation: move2 15s ease-in-out forwards;}*/

    & .main-vis02 .bg{background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis_2025-03-20_02.jpg'); animation: move2 15s ease-in-out forwards;}

    & .main-vis03 .bg{background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis02.jpg'); animation: move2 15s ease-in-out forwards;}

    & .main-vis04 .bg{background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis_2024-09-12.jpg'); animation: move1 15s ease-in-out forwards;}

    & .main-vis05 .bg{background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis04.jpg'); animation: move2 15s ease-in-out forwards;}

    & .main-vis06 .bg{background-image: url('https://sansamfestival.mycafe24.com/page/images/main/main_vis05.jpg'); animation: move2 15s ease-in-out forwards;}

    & .mvis-poster{
        position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 100;
        & .v-text{position: absolute; top: 50%; transform: translate(0, -50%); font-family: 'Roboto', sans-serif; font-size: 10px; font-weight: bold; color: rgba(34,34,34,.5); letter-spacing: 1px; text-transform: uppercase;}
        & .v-left{left: var(--main-gap); writing-mode: vertical-lr;}
        & .v-right{right: var(--main-gap); writing-mode: vertical-rl;}
        & .mvis-text{text-align: center; padding-top: 40px; background: url("https://sansamfestival.mycafe24.com/page/images/common/dot01.png") no-repeat center 0 / 91px auto; transform: translate(0, -23px)}
        & .sub-text{font-size: 32px; line-height: 1.2;}
        & .txt01{font-size: 26px; margin-top: 33px}
        & .txt01 strong{display: inline-flex; justify-content: center; align-items: center; width: 68px; height: 82px; font-weight: 400; color: #fff; background: url("https://sansamfestival.mycafe24.com/page/images/common/symbol0101.png") no-repeat center 0 / 68px auto; margin: 0 4px}
        & .title{font-size: 100px; line-height: 1; letter-spacing: 0.3px; text-transform: uppercase; margin-top: -9px}
        & .period{justify-content: center; color: #222; padding-bottom: 65px; margin-top: 17px}
        & .period:before{content: ""; position: absolute; bottom: 0; left: 50%; width: 1px; height: 40px; background-color: #e1d8ca}
        & .period .txt02 .date{font-size: 21px;}
        & .period .txt03{font-size: 19px;}
        & .period .ico-arr:after{background-image: url("https://sansamfestival.mycafe24.com/page/images/common/arr0201.png")}
        & .txt-info{display: flex; justify-content: center; align-items: center; gap: 13px; margin-top: 17px;}
        & .txt03{font-family: 'Pretendard', sans-serif; font-size: 17px; font-weight: bold;}
        & .txt-info span::before{content: "· "}
        & .txt-info span::after{content: " : "}
    }
    & .mvis-cont{
        position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: flex; align-items: center; z-index: 100;
        & .mvis-text{color: #fff; z-index: 100;}
        & .period{margin-bottom: 17px;}
        & .main-text{font-size: 48px; line-height: 62px; word-break: keep-all}
        & .txt-en{font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: bold; color: rgba(255,255,255,.5); letter-spacing: 1px; text-transform: uppercase; margin-top: 11px;}
        & .btn-more{margin-top: 50px;}
    }
    /* Swiper */
    & .sw-mvis{
        & .swiper-wrapper{transition-timing-function: ease-in-out;}
        /*pager*/
        & .swiper-pagination-bullets{bottom: 92px; left: var(--main-gap); width: auto;}
        & .swiper-pagination-bullet{position: relative; width: 20px; height: 20px; border: 1px solid transparent; background-color: transparent; opacity: 1; margin: 0 8px 0 0}
        & .swiper-pagination-bullet::after{content: ""; display: block; position: absolute; left: calc(50% - 3px); top: calc(50% - 3px); width: 6px; height: 6px; background-color: #fff; border-radius: 3px;}
        & .swiper-pagination-bullet-active{border-color: #fff;}
        & .swiper-pagination-bullet:hover,
        & .swiper-pagination-bullet:focus{outline:none}
        /*prev next*/
        & .swiper-button-prev,
        & .swiper-button-next{top: auto; left: auto; right: auto; margin-top: 0; bottom: 92px; width: 30px; height: 30px; background-repeat:no-repeat; background-size: 18px auto; transition:ease-in-out .2s}
        & .swiper-button-prev{right: calc(var(--main-gap) + 34px);background-image:url('https://sansamfestival.mycafe24.com/page/images/common/arr0101.png'); background-position: left center}
        & .swiper-button-next{right: var(--main-gap); background-image:url('https://sansamfestival.mycafe24.com/page/images/common/arr0102.png'); background-position: right center}
        & .swiper-button-prev::before{content: ""; position: absolute; right: -3px; display: block; width: 1px; height: 16px; background-color: rgba(255,255,255,.23);}
    }
    @media (width <= 1280px) {
        & .mvis-poster{
            & .title{font-size: 90px}
        }
    }
    @media (width <= 1200px) {
        & .mvis-poster{
            & .sub-text{font-size: 28px}
            & .txt01{margin-top: 20px}
            & .title{font-size: 80px}
        }
        & .mvis-cont{
            & .main-text{font-size: 45px; line-height: 58px;}
        }
        & .sw-mvis{
            & .swiper-pagination-bullets{bottom: 40px;}
            & .swiper-button-prev,
            & .swiper-button-next{bottom: 40px;}
       }
    }
    @media (width <= 1023px) {
        & .mvis-poster{
            & .mvis-text{background: none}
            & .sub-text{font-size: 25px}
            & .txt01{font-size: 22px; margin-top: 15px}
            & .txt01 strong{background-position: center calc(50% - 3px); background-size: 56px auto}
            & .title{font-size: 70px}
            & .v-text{display: none}
            & .period .txt02 .date{font-size: 18px;}
            & .period .txt03{font-size: 17px}
        }
        & .mvis-cont{
            & .main-text{font-size: 38px; line-height: 50px;}
        }
    }
    @media (width <= 767px) {
        & .button04{justify-content: center; min-width: 140px; padding: 0 25px; color: #222; background-color: #fff }
        & .button04 span{padding-right: 0; background: none}
        & .mvis-poster{
            & .sub-text{font-size: 23px}
            & .txt01 strong{background-position: center calc(50% - 3px); background-size: 56px auto}
            & .title{font-size: 48px}
            & .period{padding-bottom: 50px}
            & .period:before{height: 30px}
            & .period .txt02 .date{font-size: 17px;}
            & .period .txt03{font-size: 16px}
        }
        & .mvis-cont{
            text-align: center;
            & .period{justify-content: center}
            & .main-text{font-size: 29px; line-height: 42px;}
            & .txt-en{display: none}
        }
    }
}

/*애니메이션 Move*/
@keyframes move1 {  
    from {transform: scale(1)}  
    to {transform: scale(1.15)}
}
@keyframes move2 {  
    from {transform: scale(1.15)}  
    to {transform: scale(1)}
}
@keyframes bounce1 {  
    from {top: 15px; opacity: .9;}  
    to {top: 20px; opacity: 1;}
}
@keyframes bounce1 {  
    from {top: 15px; opacity: .9;}  
    to {top: 20px; opacity: 1;}
}

/* ==========================================================================
    MAIN CONTENTS
   ========================================================================== */
:root {
    --circle-width: 480px;
    --active-circle-width: 540px;
    --mascot01: 184px;
}
@media (width <= 1280px) {
    :root {
        --circle-width: 400px;
        --active-circle-width: 460px;
        --mascot01: 160px;
    }
}
@media (width <= 1200px) {
    :root {
        --circle-width: 320px;
        --active-circle-width: 380px;
        --mascot01: 140px;
    }
}
@media (width <= 767px) {
    :root {
        --circle-width: 220px;
        --active-circle-width: 320px;
        --mascot01: 140px;
    }
}
.sw-special01{
    &::before,
    &::after{content: ""; position: absolute; left: 50%; display: block; width: 1px; height: 50px; background-color: rgba(0,0,0,.1);}
    &::before{top: 0;}
    &::after{bottom: 0;}
    & .mascot{position: absolute; left: calc(var(--active-circle-width) - var(--mascot01) + 30px); bottom: -5px; z-index: 10; user-select: none; width: var(--mascot01); background: url("../images/common/mascot01.png") no-repeat 0 0 / 100% auto}
    & .mascot:after{content: ""; display: block; padding-bottom: 112%}
    & .wrap-slide{display: flex; justify-content: space-between; height: var(--active-circle-width);}
    & .item-circle{position: relative; width: var(--circle-width); height: var(--circle-width); padding: 55px; border: 1px solid #999; border-radius: 50%; overflow: hidden; filter: grayscale(100%); opacity: .3; transition: .3s ease-in-out; user-select: none;}
    & .item-circle img{border-radius: 50%; box-shadow: 7px 7px 14px 12px rgba(0,0,0,0.2);}
    & .cont-area{position: relative; display: flex; align-items: center; width: 50%;}
    & .txt-set{font-family: var(--basic-font02); opacity: 0; transform: translate(0, -40px)}
    & .txt-set .num{font-size: 14px; color: var(--point-color03); text-transform: uppercase; margin-bottom: 51px;}
    & .txt-set .title{font-size: 56px; line-height: 1.2;}
    & .txt-set p{font-family: var(--basic-font01); font-size: 1rem; color: #666; line-height: 24px; margin-top: 9px;}
    & .swiper-slide-duplicate-active .item-circle,
    & .swiper-slide-active .item-circle{width: var(--active-circle-width); height: 100%; padding: 30px; border-color: #fff; opacity: 1; background-color: #fff; filter: grayscale(0%);}
    & .swiper-slide-duplicate-active .txt-set,
    & .swiper-slide-active .txt-set{opacity: 1; transition: .5s ease-in-out .6s;}
    & .swiper-slide-prev .item-circle{transform: translate(150%, 0); transition: .7s ease-in-out}
    & .swiper-slide-prev .txt-set{opacity: 0;}
    /*prev next*/
    & .swiper-button-prev,
    & .swiper-button-next{top: auto; left: auto; right: auto; margin-top: 0; bottom: 138px; width: 30px; height: 30px; background-repeat:no-repeat; background-size: 16px auto; z-index: 20; transition:ease-in-out .2s}
    & .swiper-button-prev{left: 50%; background-image:url('../images/common/arr0303.png'); background-position: left center}
    & .swiper-button-next{left: calc(50% + 78px); background-image:url('../images/common/arr0304.png'); background-position: right center}
    /*Pager*/
    & .swiper-pagination{width: auto; left: calc(50% + 31px); bottom: 143px; font-family: var(--basic-font02); font-size: 14px; color: #c8c8c8; line-height: 18px}
    & .swiper-pagination-current{color: #e9383d;}
    & .swiper-pagination-current:before{content: "0"}
    & .swiper-pagination-total{color: #222;}
    & .swiper-pagination-total:before{content: "0"}
    @media (width <= 1280px) {
        & .txt-set .num{margin-bottom: 40px}
        & .swiper-button-prev,
        & .swiper-button-next{bottom: 97px;}
        & .swiper-pagination{bottom: 102px;}
    }
    @media (width <= 1200px) {
        &::before,
        &::after{height: 30px;}
        & .mascot{left: calc(var(--active-circle-width) - var(--mascot01) + 50px);}
        & .txt-set .num{margin-bottom: 30px}
        & .txt-set .title{font-size: 46px}
        & .item-circle{padding: 30px}
        & .swiper-slide-duplicate-active .item-circle,
        & .swiper-slide-active .item-circle{height: var(--active-circle-width); padding: 24px;}
        & .item-circle img{box-shadow: 7px 7px 10px 7px rgba(0,0,0,0.15);}
        & .swiper-button-prev,
        & .swiper-button-next{bottom: 78px;}
        & .swiper-pagination{bottom: 83px;}
    }
    @media (width <= 1023px) {
        &::before,
        &::after{display: none}
        & .wrap-slide{flex-direction: column; justify-content: space-between; align-items: center; max-width: 688px; padding-bottom: 80px; height: 650px; margin: 0 auto}
        & .cont-area{justify-content: center; text-align: center; width: 100%;}
        & .txt-set{transform: initial}
        & .txt-set .num{margin-bottom: 20px}
        & .txt-set .title{font-size: 42px}
        & .mascot{display: none}
        & .swiper-slide-prev .item-circle{transform: initial;}
        & .swiper-pagination{width: 100%; left: 0; bottom: 5px;}
        & .swiper-button-prev,
        & .swiper-button-next{bottom: 0;}
        & .swiper-button-prev{left:  calc(50% - 58px);}
        & .swiper-button-next{left: auto; right: calc(50% - 58px);}
    }
    @media (width <= 767px) {
        & .wrap-slide{height: 560px}
        & .item-circle{padding: 20px}
        & .swiper-slide-duplicate-active .item-circle,
        & .swiper-slide-active .item-circle{padding: 20px;}
        & .item-circle img{box-shadow: 5px 5px 7px 5px rgba(0,0,0,0.1);}
        & .txt-set .num{font-size: 13px; margin-bottom: 15px}
        & .txt-set .title{font-size: 30px; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
        & .txt-set p{display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
    }
}


.main-sec02{
    padding-top: 78px;
    padding-bottom: 100px;
    border-top: 1px solid #e9e9e9;
    border-radius: var(--round-size) 0 0 0;
    background: url("../images/common/symbol_wg01.png") no-repeat -71px 100% / 448px auto,  url("../images/common/symbol_wg02.png") no-repeat calc(100% - 10px) top / 490px auto;
    & .list-img-box{margin-top: 30px}
    & .btn-container{margin-top: 60px}
    @media (width <= 1200px) {
        background: none;
    }
    @media (width <= 767px) {
        & .btn-container{margin-top: 50px}
    }
}

.main-sec03{
    padding-top: 100px; padding-bottom: calc(100px + var(--round-size));
    background: url("../images/main/main03_bg.jpg") repeat center / 1920px auto;
    border-radius: 0 var(--round-size) 0 0; overflow: hidden;
    & .slider-container{margin-top: 33px}
    @media (width <= 767px) {
        padding-top: 80px; padding-bottom: calc(80px + var(--round-size));
    }
}

.main-sec04{
    padding-top: 106px; padding-bottom: 90px;
    background: url('../images/main/main04_bg.jpg') no-repeat center / cover;
    border-radius: var(--round-size) 0 0 0; overflow: hidden;
    & .inner-sec{display: grid; grid-template-columns: 170px 1fr; gap: 0}
    & .v-text{position: relative; left: -17px; font-size: 60px; color: #fff; line-height: 72px; letter-spacing: 0; text-transform: uppercase; writing-mode: vertical-lr; background: url("../images/common/mascot02.png") no-repeat calc(100% - 12px) calc(100% - 6px) / 83px auto}
    & .movie-container{padding-top: 4px;}
    & .movie-container video{width: 100%;}
    & .btn-more{display: flex; justify-content: flex-end; margin-top: 17px}
    & .btn-more > a{font-size: 14px; font-weight: bold; color: #fff; line-height: 20px; padding-right: 30px; background: url("../images/common/ytube0102.png") no-repeat right center / 22px auto;}
    @media (width <= 1280px) {
        & .inner-sec{grid-template-columns: 150px 1fr;}
        & .v-text{font-size: 54px; background-size: 70px auto}
    }
    @media (width <= 1200px) {
        & .inner-sec{grid-template-columns: 120px 1fr;}
        & .v-text{font-size: 48px; line-height: 56px; background: none}
    }
    @media (width <= 1023px) {
        padding-top: 80px; padding-bottom: 80px;
        & .inner-sec{grid-template-columns: 1fr;}
        & .v-text{left: auto; display: flex; flex-direction: column-reverse; font-size: 38px; line-height: 46px; writing-mode: initial; margin-bottom: 15px}
    }
    @media (width <= 767px) {
        & .v-text{font-size: 30px; line-height: 37px; margin-bottom: 15px}
    }
}

.main-sec05{
    padding-top: 100px;
    padding-bottom: 94px;
    & .instagram-container{margin-top: 40px}
    @media (width <= 1023px) {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    @media (width <= 767px) {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.bottom-shortcut{
    padding-top: 60px; padding-bottom: 60px; background-color: #f9efe5;
    @media (width <= 1023px) {
        padding-top: 40px; padding-bottom: 40px;
    }
    @media (width <= 767px) {
        padding-top: 20px; padding-bottom: 20px;
    }
}


/* ==========================================================================
    SUB CONTENTS
   ========================================================================== */
/*초대의 글*/
.pg-greeting{
    & .sec01{
        padding-top: 100px; padding-bottom: 100px;
        & .inner-sec{display: grid; grid-template-columns: 42% 1fr; gap: 8%;}
        & .img-area .thumb{margin-bottom: 40px}
        & .text-area{padding-top: 10px}
        & .text-area .txt-en01{margin-bottom: 15px}
        & .text-area .txt-n01{margin-top: 45px}
        & .text-area .txt-n01 p{margin-bottom: 30px}
    }
    @media (width <= 1200px) {
        & .sec01{
            padding-top: 80px; padding-bottom: 80px;
            & .inner-sec{gap: var(--main-gap);}
        }
    }
    @media (width <= 1023px) {
        & .sec01{
            padding-top: 40px; padding-bottom: 60px;
            & .inner-sec{grid-template-columns: 1fr;}
            & .img-area{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px}
            & .img-area .thumb{margin-bottom: 0}
            & .text-area{padding-top: 0;}
            & .text-area .txt-en01{margin-bottom: 10px}
            & .text-area .txt-n01{margin-top: 30px;}
        }
    }

    @media (width <= 767px) {
        .pg-title{border-bottom: 0}
        & .sec01{
            padding-top: 0; padding-bottom: 60px;
            & .inner-sec{gap: 60px}
            & .img-area{grid-template-columns: 1fr}
        }
    }
}
/*사니사미*/
.pg-character{
    & .sec01{
        padding-top: 120px; padding-bottom: 120px;
        & .inner-sec{display: grid; grid-template-columns: 1fr 63%;}
        & .img-area{padding: 0 20px}
        & .text-area{padding-top: 10px}
        & .text-area .txt-en01{margin-bottom: 15px}
        & .text-area .txt-dot02{margin-top: 45px}
    }
    & .sec02{
        padding-top: 100px; padding-bottom: 100px; background-color: var(--point-color01);
        & .txt-b02{color: #fff; margin-bottom: 33px}
        & .box-set{display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(210px, auto)); gap: 40px;}
        & .box-set > li{display: flex; justify-content: center; align-items: center; padding: 14px; border: 3px solid #222; background-color: #fff; border-radius: 15px;}
    }
    & .sec03{
        padding-top: 10px; padding-bottom: 120px;
        & .board-container{margin-top: 20px}
    }
    & .sec05{
        padding-top: 120px; padding-bottom: 80px;
        & .inner-sec{display: grid; grid-template-columns: 1fr 63%;}
        & .img-area{padding: 0 20px}
        & .text-area{padding-top: 10px}
        & .text-area .txt-en01{margin-bottom: 15px}
        & .text-area .txt-dot02{margin-top: 45px}
    }
    @media (width <= 1280px) {
        & .sec01{
            & .inner-sec{grid-template-columns: 1fr 58%;}
            & .img-area{padding: 0 40px;}
        }
    }
    @media (width <= 1200px) {
        & .sec01{
            padding-top: 100px; padding-bottom: 100px;
            & .inner-sec{grid-template-columns: 1fr 58%;}
            & .text-area .txt-dot02{margin-top: 30px;}
        }
    }
    @media (width <= 1023px) {
        & .sec01{
            padding-top: 80px; padding-bottom: 80px;
            & .inner-sec{grid-template-columns: 1fr;}
            & .img-area{text-align: center}
            & .img-area img{max-width: 300px}
            & .text-area{padding-top: 0; margin-top: 60px}
        }
        & .sec02{
            & .box-set{gap: 20px}
        }
        & .sec03{
            padding-top: 30px;
        }

    }
    @media (width <= 767px) {
        & .sec01{
            padding-bottom: 60px;
            & .img-area img{max-width: 240px}
        }
        & .sec02{
            padding-top: 80px; padding-bottom: 80px;
            & .box-set{grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, minmax(190px, auto));}
            & .box-set > li{padding: 28px}
        }
        & .sec03{
            & .button02{padding: 0 20px;}
        }


    }
}
/*산삼 이야기*/
.pg-story{
    & .tit-filter .filter .button02{min-width: 170px;}
    & .sec0101{
        padding-top: 25px; padding-bottom: 100px;
        & .list-lr{
            > ul > li{display: flex; padding-top: 50px; padding-bottom: 50px;}
            > ul > li > div{flex: 1;}
            & .text-area{width: 50%}
            & .title{font-size: 26px; font-weight: bold; margin-bottom: 15px;}
            > ul > li:nth-child(odd){flex-direction: row-reverse;}
            > ul > li:nth-child(odd) .img-area{text-align: right;}
            > ul > li:nth-child(odd) .title{color: var(--point-color01);}
            > ul > li:nth-child(even) .title{color: var(--point-color0201);}
        }
    }
    & .sec0201{
        padding-top: 40px; padding-bottom: 80px;
        & .bg-wide{padding-top: 53px; padding-bottom: 53px; background-color: #f6f3eb}
        & .txt-set{line-height: 28px; padding-right: 200px;}
        & .obj-wg{position: absolute; top: 50%; right: 0; transform: translate(0, -50%)}
        & .obj-wg img{width: 152px}
    }
    & .sec0202{
        padding-top: 20px; padding-bottom: 100px;
        & .inner-sec{align-items: stretch}
        & .tit-set{
            padding-top: 10px;
            & .txt-en02{margin-bottom: 12px}
            & .txt-n03{line-height: 28px; margin-top: 17px}
        }
        & .map img{max-width: 732px}
        & .box-set{
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 80px;
            & .item-box{border: 1px solid #e4e4e4; border-top: 4px solid var(--point-color01); padding: 36px 38px; border-radius: 15px}
            & .title{font-size: 24px; font-weight: bold;}
            & .txt-en{min-height: 40px; font-family: var(--basic-font03); font-size: 15px; font-weight: bold; color: var(--point-color03); line-height: 20px; letter-spacing: 0; margin-top: 6px}
            & p{color: #555; line-height: 26px; word-break: keep-all; margin-top: 18px}
        }
    }
    @media (width <= 1320px) {
        & .sec0201{
            & .obj-wg{right: var(--main-gap)}
        }
    }
    @media (width <= 1200px) {
        & .tit-filter .filter .button02{min-width: 150px;}
        & .sec0101{
            & .list-lr{
                > ul > li{padding-top: 40px; padding-bottom: 40px;}
                & .title{font-size: 24px;}
                > ul > li:nth-child(odd) .img-area{padding-left: 60px; text-align: left;}
                > ul > li:nth-child(even) .img-area{padding-right: 60px;; text-align: left;}
            }
        }
        & .sec0202{
            & .map img{max-width: 540px;}
            & .box-set{
                gap: 40px;
                & .item-box{padding: 28px 30px;}
            }
        }
    }
    @media (width <= 1023px) {
        & .sec0101{
            padding-top: 0;
            & .list-lr{
                & .text-area{width: 100%; margin-top: 40px}
                & .title{font-size: 22px;}
                > ul > li:nth-child(odd),
                > ul > li:nth-child(even){flex-direction: column}
                > ul > li:nth-child(odd) .img-area{padding-left: 0; text-align: center}
                > ul > li:nth-child(even) .img-area{padding-right: 0; text-align: center}
            }
        }
        & .sec0201{
            padding-bottom: 60px;
            & .txt-set{padding-right: 0;}
            & .obj-wg{display: none;}
        }
        & .sec0202{
            & .inner-sec{
                flex-direction: column; align-items: center; text-align: center;
            }
            & .tit-set{padding-top: 0;}
            & .map{margin-top: 60px}
            & .map img{max-width: 100%;}
            & .box-set{grid-template-columns: repeat(2, 1fr);}
        }
    }
    @media (width <= 767px) {
        & .tit-filter .filter .button02{min-width: 140px;}
        & .sec0101{
            padding-bottom: 80px;
            & .list-lr{
                > ul > li{padding-top: 30px; padding-bottom: 30px;}
            }
        }
        & .sec0202{
            & .box-set{
                grid-template-columns: 1fr; gap: 20px; margin-top: 60px;
                & .txt-en{min-height: 0}
            }
        }
    }
}


.list-text01{
    border-top: 1px solid #222;
    & .info-article{display: grid; grid-template-columns: 240px 1fr; align-items: center; border-bottom: 1px solid #e9e9e9; padding-top: 21px; padding-bottom: 21px;}
    & .year{font-family: var(--basic-font02); font-size: 32px; color: var(--point-color01); padding-left: 22px;}
    & .info-area{font-size: 18px; line-height: 28px;}
    & .info-area > li{display: grid; grid-template-columns: 150px 1fr; align-items: center; padding-top: 9px; padding-bottom: 9px;}
    & .info-area  .date{font-family: var(--basic-font02); color: var(--point-color0201); text-align: center; letter-spacing: 0;}
    & .info-area .cont{padding-left: 28px; color: #555; word-break: keep-all}
    @media (width <= 1280px) {
        & .info-article{grid-template-columns: 200px 1fr;}
    }
    @media (width <= 1200px) {
        & .info-article{grid-template-columns: 160px 1fr;}
        & .year{font-size: 26px;}
        & .info-area{font-size: 17px;}
    }
    @media (width <= 1023px) {
        & .info-article{grid-template-columns: 80px 1fr; padding-top: 14px; padding-bottom: 14px;}
        & .year{font-size: 22px; text-align: center; padding-left: 0}
        & .info-area{font-size: 15px;}
        & .info-area > li{padding-top: 6px; padding-bottom: 6px;}
        & .info-area .cont{padding-left: 14px;}
    }
    @media (width <= 767px) {
        & .info-article{grid-template-columns: 1fr; padding-top: 22px; padding-bottom: 22px;}
        & .info-area > li{grid-template-columns: 1fr;}
        & .info-area{text-align: center}
        & .info-area .cont{padding-left: 0}
    }
}

/*산삼축제 연혁*/
.pg-history{
    & .pg-title{padding-bottom: 0; border-bottom: 0}
    & .sec01{
        padding-top: 40px; padding-bottom: 100px;
    }

    @media (width <= 767px) {
        & .sec01{
            padding-top: 30px;
        }
    }
}
/*지난축제 연혁*/
.pg-history01{
    & .sec01{
        padding-top: 65px; padding-bottom: 100px;
        & .list-box{display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
    }
    @media (width <= 1200px) {
        & .sec01{
            padding-top: 40px;
        }
    }
    @media (width <= 1023px) {
        & .pg-title{border-bottom: 0}
        & .sec01{
            padding-top: 0;
            & .list-box{grid-template-columns: 1fr; gap: 20px}
        }
    }
}

/*행사개요*/
.pg-outline{
    & .pg-title{border-bottom: 0}
    & .sec01{
        padding-top: 118px; padding-bottom: 240px;
        background: #faf1e1 url("../images/content/outline01_bg.jpg") no-repeat center bottom / 1240px auto;
        & .inner-sec{display: flex; align-items: center; gap: 80px}
        & .thumb{border: 1px solid #ddd; border-radius: 15px; overflow: hidden; box-shadow: 3px 3px 10px 6px rgba(0,0,0,.1);}
        & .text-area{
            flex: 1; text-align: center;
            & .txt01{font-size: 22px;}
            & .txt01 strong{display: inline-flex; justify-content: center; align-items: center; width: 51px; height: 60px; font-weight: 400; color: #fff; background: url("../images/common/symbol0101.png") no-repeat center 0 / 51px auto; margin: 0 6px}
            & .title{font-size: 46px; line-height: 1; letter-spacing: 0.3px; margin-top: -2px}
            & .sub-text{font-size: 28px; line-height: 1.2; padding: 24px 0; border-top: 1px solid #222; margin-top: 40px;}
            & .info-area{padding-top: 27px; padding-bottom: 27px; border-top: 1px solid #e0d5c2; text-align: left; border-bottom: 1px solid #e0d5c2;}
            & .info-area > li{display: grid; grid-template-columns: 80px 1fr; line-height: 25px; margin-bottom: 14px;}
            & .info-area > li:last-child{margin-bottom: 0}
            & .info-area .item{font-weight: bold; color: var(--point-color0301);}
            & .btn-more{margin-top: 40px;}
            & .button02{min-width: 190px;}
            & .button02 span{font-family: 'Pretendard', sans-serif; padding-right: 23px; background: url("../images/common/ico_dw01.png") no-repeat right center / 13px auto;}
        }
    }
    @media (width <= 1200px) {
        & .sec01{
            padding-top: 100px;
            & .inner-sec{gap: var(--main-gap)}
            & .thumb{width: 480px}
            & .text-area{
                & .title{font-size: 42px}
            }
        }
    }
    @media (width <= 1023px) {
        & .sec01{
            padding-top: 80px;
            & .inner-sec{flex-direction: column; gap: 60px}
            & .thumb{width: 100%}
            & .text-area{
                width: 100%;
            }
        }
    }
    @media (width <= 767px) {
        & .sec01{
            padding-top: 40px; padding-bottom: 180px; background-size: 780px auto;
            & .text-area{
                width: 100%;
                & .title{font-size: 36px;}
                & .sub-text{font-size: 23px;  padding: 20px 0; margin-top: 30px}
                & .info-area > li{grid-template-columns: 54px 1fr}
            }
        }
    }
}
/*일정표*/
.pg-schedule{
    & .sec01{
        padding-bottom: 100px;
        & .table-container{margin-top: 50px;}
        & .table01{
            & .w01{width: 128px}
            & .w02{width: 21%}
            & .w03{width: 17%}
            & ul > li{padding-left: 11px; text-indent: -11px}
            & ul > li:before{content: "- "; color: var(--point-color02);}
        }
    }
    @media (width <= 1023px) {
        & .sec01{
            & .table-container{margin-top: 40px;}
            & .table01{
                & .w01{width: 118px}
                & .w02{width: 160px}
            }
        }
    }
}

/*배치도*/
.pg-map{
    & .pg-title{border-bottom: 0}
    & .sec01{
        padding-bottom: 100px;
        & .img-map img{border-radius: 18px;}
    }
    @media (width <= 767px) {
        & .sec01{
            & .img-map img{border-radius: 15px;}
        }
    }
}
/*오시는 길*/
.pg-contact{
    & .pg-title{border-bottom: 0}
    & .sec01{
        padding-bottom: 100px;
        & .map-area{width: 100%; height: 500px; border: 1px solid #e9e9e9;}
        & .map-area iframe{width: 100%; height: 100%;}
        & .info-map{
            & .address{display: flex; align-items: center; line-height: 42px; padding: 24px 0; border-bottom: 1px solid #e9e9e9}
            & .address .title{font-size: 20px; color: var(--point-color0301); padding-left: 51px; background: url("../images/common/ico_loc01.png") no-repeat 0 center / 42px auto;}
            & address{display: flex; margin-left: 67px}
            & .add01{font-size: 18px; font-weight: bold; margin-right: 16px}
            & .add02{display: flex; align-items: center; font-size: 15px; color: #777;}
            & .add02 .tag{display: flex; justify-content: center; align-items: center; width: 33px; height: 20px; font-size: 12px; font-weight: bold; color: #fff; background-color: var(--point-color01); border-radius: 2px; margin-right: 7px}
        }
        & .route-area{
            display: flex;
            & .half-area{flex: 1; display: flex; padding-top: 45px;}
            & .half-area:first-child{padding-right: 60px}
            & .half-area:last-child{padding-left: 60px; border-left: 1px solid #e9e9e9;}
            & .tit-route{font-family: var(--basic-font02); font-size: 20px; line-height: 30px; padding-left: 39px; align-self: flex-start; margin-right: 50px;}
            & .desc-route{padding-top: 4px}
            & .desc-route > ul > li{margin-bottom: 36px;}
            & .desc-route > ul > li:last-child{margin-bottom: 0}
            & .desc-route .tit-dir{font-size: 18px; font-weight: bold; margin-bottom: 8px;}
            & .desc-route .route{line-height: 26px; word-break: keep-all}
            & .desc-route .route span::after{content: " → "; font-weight: 300; color: #999}
            & .desc-route .route span:last-child::after{display: none}
            & .desc-route .refer{font-size: 14px; font-weight: bold; margin-top: 4px;}
            & .car .tit-route{background: url("../images/common/ico_car01.png") no-repeat 0 calc(50% - 2px) / 23px auto;}
            & .car .tit-dir span,
            & .car .refer span{color: var(--point-color01)}
            & .bus .tit-route{background: url("../images/common/ico_bus01.png") no-repeat 0 calc(50% - 2px) / 24px auto;}
            & .bus .tit-dir span{color: var(--point-color02)}
        }
    }
    @media (width <= 1340px) {
        & .sec01{
            & .route-area{
                & .half-area{padding-top: 35px;}
                & .half-area:first-child{padding-right: 40px}
                & .half-area:last-child{padding-left: 40px;}
                & .car .tit-route{padding-left: 34px; margin-right: 20px}
            }
        }
    }
    @media (width <= 1200px) {
        & .sec01{
            & .map-area{height: 420px;}
            & .info-map{
                & .address{padding: 20px 0}
            }
            & .route-area{
                & .half-area{flex-direction: column}
                & .tit-route{
                    margin-bottom: 16px;
                }
            }
        }
    }
    @media (width <= 1023px) {
        & .sec01{
            & .map-area{height: 380px;}
            & .info-map{
                & .address{padding: 16px 0}
            }
        }
    }
    @media (width <= 767px) {
        & .sec01{
            padding-bottom: 80px;
            & .map-area{height: 360px;}
            & .info-map{
                & .address{line-height: 32px}
                & .address .title{display: none}
                & address{flex-direction: column; margin-left: 0;}
            }
            & .route-area{
                flex-direction: column;
                & .half-area{padding: 35px 0;}
                & .half-area:first-child{padding-right: 0}
                & .half-area:last-child{padding-left: 0; border-left: 0; border-top: 1px solid #e9e9e9;}
            }
        }
    }
}

.list-text02{
    & .info-article{display: grid; grid-template-columns: 96px 1fr; line-height: 28px; margin-bottom: 22px;}
    & .info-article:last-child{margin-bottom: 0}
    & .year{font-family: var(--basic-font02); font-size: 22px;}
    & .cont{font-size: 18px;}
    & .cont-history_list{font-size: 16px; width: 95%; text-align: justify;}
    & .cont-history_list-right{font-size: 16px; width: 100%; text-align: justify;}
    & .cont > p:not(:first-child){margin-top: 20px;}
    & .cont .date{font-weight: bold; margin-right: 8px;}
    @media (width <= 1200px) {
        & .info-article{grid-template-columns: 70px 1fr;}
        & .year{font-size: 20px;}
        & .cont{font-size: 17px;}
    }
    @media (width <= 767px) {
        & .info-article{grid-template-columns: 64px 1fr;}
        & .year{font-size: 18px;}
    }
}

/*포스트엑스포*/
.pg-expo{
    & .pg-title{border-bottom: 0}
    & .tit-expo{font-family: var(--basic-font02); font-size: 32px; line-height: 50px; letter-spacing: 0.3px;}
    & .tit-expo span{text-transform: uppercase}
    & .sec01{
        & .inner-sec{display: grid; grid-template-columns: repeat(2, 1fr);}
        & .thumb{width: 100%; height: 100%}
        & .tit-expo{padding-left: 64px; background: url("../images/common/ico_expo01.png") no-repeat 0 calc(50% - 2px) / 50px auto;}
        & .text-area{
            display: flex; align-items: center; padding: 29px 64px; border: 1px solid #e2e2e2; border-left: 0;
            & .info-area{margin-top: 24px}
            & .info-area > li{display: grid; grid-template-columns: 65px 1fr; line-height: 25px; word-break: keep-all; margin-bottom: 14px;}
            & .info-area > li:last-child{margin-bottom: 0}
            & .info-area .item{font-weight: bold; color: var(--point-color0301); padding-left: 12px}
            & .btn-more{margin-top: 40px;}
        }
    }
    & .sec0101{
        & .tit-expo{margin-bottom: 40px;}
        & .box-container{padding: 69px 63px; border: 1px solid #e2e2e2; border-top: 0; background-color: #faf4f4;}
        & .inner-sec{display: grid; grid-template-columns: repeat(2, 1fr);}
        & .list-text02:last-child{padding-left: 55px; border-left: 1px solid #e5e9ec}
    }
    & .sec02{
        & .movie-container{padding: 19px; border: 1px solid #e2e2e2; border-top: 0}
    }
    & .sec03{
        padding-top: 40px; padding-bottom: 100px;
        & .list-box{display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px;}
    }
    @media (width <= 1280px) {
        & .sec01{
            & .text-area{padding: 29px 30px;}
        }
    }
    @media (width <= 1200px) {
        & .tit-expo{font-size: 28px;}
        & .sec01{
            & .text-area{
                & .tit-expo{padding-left: 54px; background-size: 42px auto;}
                & .info-area{margin-top: 18px}
                & .info-area > li{grid-template-columns: 58px 1fr}
            }
        }
        & .sec0101{
            & .tit-expo{margin-bottom: 30px;}
            & .box-container{padding: 40px 40px;}
            & .list-text02:last-child{padding-left: 40px;}
        }
    }
    @media (width <= 1023px) {
        & .sec01{
            & .inner-sec{grid-template-columns: 1fr}
            & .text-area{
                padding: 29px 0; border: 0;
                & .info-area > li{grid-template-columns: 64px 1fr}
            }
        }
        & .sec0101{
            & .box-container{border-top: 1px solid #e2e2e2; border-bottom: 0}
            & .list-text02:first-child .info-article:last-child{margin-bottom: 22px;}
            & .inner-sec{grid-template-columns: 1fr;}
            & .list-text02:last-child{border-left: 0; padding-left: 0;}
        }
        & .sec02{
            & .movie-container{padding: 14px; border-top: 1px solid #e2e2e2;}
        }
        & .sec03{
            & .list-box{gap: 30px;}
        }
    }
    @media (width <= 767px) {
        & .tit-expo{font-size: 23px; line-height: 42px;}
        & .sec01{
            & .text-area{
                padding: 28px 0 42px;
                & .tit-expo{padding-left: 45px; background-size: 36px auto;}
            }
        }
        & .sec0101{
            & .box-container{padding: 30px 0; border: 0; border-top: 1px solid #e2e2e2; background-color: transparent}
            & .info-article{margin-bottom: 18px}
            & .list-text02:first-child .info-article:last-child{margin-bottom: 18px;}
        }
        & .sec02{
            & .movie-container{padding: 0; border: 0;}
        }
        & .sec03{
            & .list-box{grid-template-columns: 1fr; gap: 30px;}
        }
    }
}