@import url(default.css);
@import url(fonts.css);
@import url(common.css);
@import url(layout.css);

.visual {
    background-color: #20231F;
    height: 1000px;
    font-size: 6rem;
    font-family: 'SF_HambakSnow';
    text-align: center;
    position: relative;
}
.visual .outer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46.667rem;
    height: 46.667rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    position: relative;
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    animation-timing-function : linear;
    animation-fill-mode: forwards;
    box-shadow: 2px 2px 7px rgba(255, 255, 255, 0.2);
}
.visual .outer .cricle1{ 
    display: block;
    width: 5.2rem; 
    height: 5.2rem; 
    border-radius: 50%; 
    background-color: #fff; 
    position: absolute;
    top: 21%;
    left: 0;
}
.visual .outer .cricle2{ 
    display: block;
    width: 2.267rem; 
    height: 2.267rem; 
    border-radius: 50%; 
    background-color: #CACACA; 
    position: absolute;
    top: 62%;
    left: 0;
}
.visual .outer .cricle3{ 
    display: block;
    width: 3.467rem; 
    height: 3.467rem; 
    border-radius: 50%; 
    background-color: #797979; 
    position: absolute;
    top: 27%;
    right: 0;
}
@keyframes rotate {
    100% {transform: translate(-50%, -50%) rotate(360deg); }
}
.visual h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100%;
    justify-content: center;
}
.visual h1 .ca {
    display: flex;
}
.visual h1 strong {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    transition: 1s;
}
.visual h1 strong.mr {
    margin-right: 2rem;
} 
.visual h1 em {
    display: inline;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.visual h1 span {
    display: inline;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.visual h1 span:last-of-type {
    animation-name: slide;
    /* animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); */
    animation-duration: 13s;
    animation-fill-mode: forwards;
    margin-left:-355px;
    display: block;
}
@keyframes slide {
    0% { margin-left:-800px; opacity: 0;}
    20% { margin-left:-800px; opacity: 0; }
    35% { margin-left: 0; opacity: 0.4;}
    36% { margin-left: 0; opacity: 0.4;}
    40% { margin-left: 0; opacity: 0.6; }
    80% { margin-left: 0; opacity: 1; }
    100% { margin-left: 0; opacity: 1;}
}
@media screen and (max-width: 1400px) {
    .visual {
        font-size: 3.333rem;
        height: 700px;
    }
    .visual .outer {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 16.533rem;
        height: 16.533rem;
    }
    .visual .outer .cricle1{ 
        display: block;
        width: 1.733rem; 
        height: 1.733rem; 
        top: 21%;
        left: 0;
    }
    .visual .outer .cricle2{ 
        display: block;
        width: 1.067rem; 
        height: 1.067rem; 
        bottom: auto;
        top: 65%;
        left: 0;
    }
    .visual .outer .cricle3{ 
        display: block;
        width: 0.667rem; 
        height: 0.667rem; 
        top: 33%;
        right: 0;
    }
    .visual h1 strong.mr {
        margin-right: 1rem;
    } 
}
@media screen and (max-width: 768px) {
    .visual {
        font-size: 1.385rem;
    }
}
.info {
    background-color: #20231F;
    padding: 400px 0 280px 0;
    color: #20231F;
    font-weight: 400;
    position: relative;
    transition: 2s;
}
body.w_bg .info {
    background-color: #f5f5f5;
}
.info .wrapper {
    display: flex;
    justify-content: center;
}
.info h2 {
    font-size: 6.667rem;
    text-align: right;
    text-align: center;
    margin-bottom: 70px;
}
.info h2 span {
    font-size: 10rem;
    font-weight: 700;
}
.info h3 {
    font-size: var(--txt-size-tit2);
    font-weight: 700;
    margin-top: 130px;
}
.info p {
    font-size: 2.333rem;
    font-weight: 400;
    margin: 16px 0;
}
.info > span {
    font-size: var(--txt-size-txt);
    color: rgba(32, 35, 31, 0.6);
}
.info .info_l {
    width: 35.133rem;
    height: 29.267rem;
    border: 3px solid #20231F;
    border-radius: 0 0 120px 0;
    text-align: center;
    margin-right: 40px;
    box-shadow: 4px 4px 10px rgba(32, 35, 31, 0.25);
    position: relative;
}
.info .info_r .free {
    width: 35.133rem;
    height: 8.667rem;
    text-align: center;
    border: 3px solid #20231F;
    margin-bottom: 40px;
    box-shadow: 4px 4px 10px rgba(32, 35, 31, 0.25);
}
.info .info_r .free h3 {
    margin-top: 38px;
}
.info .info_r .closeday {
    width: 35.133rem;
    height: 29.267rem;
    border: 3px solid #20231F;
    border-radius: 0 0 120px 0;
    text-align: center;
    box-shadow: 4px 4px 10px rgba(32, 35, 31, 0.25);
}
.info .slogun {
    position: absolute;   
    left: 5%;
    bottom: 77px;
    transform: translate(0, 50%);
    width: 243px;
    z-index: 10;
}
.info .slogun img {
    width: 100%;
    animation-name: slogun_rotate;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes slogun_rotate { 
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.info .more {
    font-size: var(--txt-size-txt);
    font-weight: 300;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--txt-color-main);
}
.info .more span {
    padding-right: 43px;
    position: relative;
}
.info .more span::before {
    position: absolute;
    left: 43px;
    top: 0;
    width: 33px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='24' viewBox='0 0 33 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_32_1912' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='33' height='24'%3E%3Crect width='33' height='24' fill='%2351504B'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_32_1912)'%3E%3Cpath d='M20.1754 18.327L19.1943 17.6385L26.2862 12.4808H4.125V11.4808H26.3127L19.2287 6.32302L20.1754 5.63452L28.9015 11.9808L20.1754 18.327Z' fill='%2320231F'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    transition: 0.5s;
}
.info .more span::after {
    position: absolute;
    right: 0;
    top: -1px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid var(--txt-color-main);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}
.info .more a:hover span::before {
    transform: translateX(25px);
}
@media screen and (max-width: 1150px) {
    .info h2 {
        font-size: 4.667rem;
    }
    .info h2 span {
        font-size: 6rem;
    }
    .info h3 {
        margin-top: 90px;
        font-size: 2.667rem;
    }
    .info p {
        font-size: 2rem;
        margin: 10px 0;
    }
    .info > span {
        font-size: var(--txt-size-txt);
    }
    .info .info_l {
        width: 28.133rem;
        height: 24.267rem;
        margin-right: 20px;
    }
    .info .info_r .free {
        width: 28.133rem;
        height: 7.667rem;
        margin-bottom: 20px;
    }
    .info .info_r .free h2 {
        margin-top: 23px;
        font-size: 2.667rem;
    }
    .info .info_r .closeday {
        width: 28.133rem;
        height: 24.267rem;
    }    
}
@media screen and (max-width: 768px) {
    .info {
        padding: 100px 0 50px 0;
    }
    .info h2 {
        font-size: 2.308rem;
        margin-bottom: 20px;
    }
    .info h2 span {
        font-size: 3.077rem;
    }
    .info .wrapper {
        display: block;
    }
    .info h3 {
        font-size: 1.923rem;
        margin-top: 40px;
    }
    .info p {
        font-size: 1.538rem;
        margin: 6px 0;
    }
    .info > span {
        font-size: 1.154rem;
    }
    .info .info_l {
        width: auto;
        height: 12.667rem;
        border: 1px solid #20231F;
        border-radius: 0 0 50px 0;
        margin-right: 0;
    }
    .info .info_r .free {
        width: auto;
        height: 8.667rem;
        border: 1px solid #20231F;
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .info .info_r .free h2 {
        font-size: 1.923rem;
        margin-top: 36px;
    }
    .info .info_r .closeday {
        width: auto;
        height: 12.667rem;
        border: 1px solid #20231F;
        border-radius: 0 0 50px 0;
    }
    .info .slogun {
        width: 131px;
        height: 131px;
        bottom: -122px;
    }
    .info .more span {
        padding-right: 30px;
    }
    .info .more span::before {
        top: 1px;
        left: 39px;
        width: 20px;
        height: 22px;
    }
    .info .more span::after {
        top: 2px;
        width: 18px;
        height: 18px;
    }
}
.news {
    background-color: #F5F5F5;
    padding: 100px 20px 285px 0; 
    color: var(--txt-color-main);
    position: relative;
}
.news h2 {
    font-size: 6.667rem;
    text-align: right;
}
.news h2 strong {
    border-bottom: 3px solid var(--txt-color-main);
}
.news h2 span {
    font-size: 10rem;
    font-weight: 700;
}
.news .list {
    display: flex;
}
.news .list .swiper {
    width: 80%;
    margin-top: 60px;
    border: 1px solid var(--txt-color-main);
    margin-left: 0;
}
.news .list .swiper .swiper-slide {
    width: calc(100% / 3);
    position: relative;
}
.news .list .swiper .swiper-slide a {
    display: block;
    padding: 40px;
}
.news .list .swiper .swiper-slide::before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-left: 1px dashed var(--txt-color-main);
    content: "";
}
.news .list .swiper .swiper-slide:first-child:before {
    display: none;
}
.news .list .swiper .swiper-slide strong {
    display: block;
    font-size: 1.667rem;
    font-weight: 400;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    margin-bottom: 20px;
}
.news .list .swiper .swiper-slide span {
    font-size: var(--txt-size-sub);
    color: rgba(32, 35, 31, 0.6);
    white-space: nowrap;
}
.news .controlbar {
    position: absolute;
    right: 0;
    width: 234px;
    height: 24px;
    margin-top: 15px;
}
.news .controlbar .scroll .swiper-scrollbar {
    height: 5px;
    background-color: #51504B;
    width: 100%;
}
.news .controlbar .swiper-scrollbar-drag {
    width: 24px ; 
    height: 24px;
    background: var(--txt-color-main);
    border-radius: 50px;
    top: -10px;
    cursor: pointer;
}
.news .more {
    font-size: var(--txt-size-txt);
    font-weight: 300;
    color: var(--txt-color-main);
    position: absolute;
    right: 20px;
    top: 360px;
}
.news .more span {
    padding-right: 43px;
    position: relative;
}
.news .more span::before {
    position: absolute;
    left: 43px;
    top: 0;
    width: 33px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='24' viewBox='0 0 33 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_32_1912' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='33' height='24'%3E%3Crect width='33' height='24' fill='%2351504B'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_32_1912)'%3E%3Cpath d='M20.1754 18.327L19.1943 17.6385L26.2862 12.4808H4.125V11.4808H26.3127L19.2287 6.32302L20.1754 5.63452L28.9015 11.9808L20.1754 18.327Z' fill='%2320231F'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    transition: 0.5s;
}
.news .more span::after {
    position: absolute;
    right: 0;
    top: -1px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid var(--txt-color-main);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}
.news .more a:hover span::before {
    transform: translateX(25px);
}
@media screen and (max-width: 1150px) {
    .news h2 {
        font-size: 4.667rem;
    }
    .news h2 span {
        font-size: 6rem;
    }
    .news .more {
        top: 272px;
    }
}
@media screen and (max-width: 768px) {
    .news {
        padding: 260px 20px 85px 0; 
    }
    .news h2 {
        font-size: 2.308rem;
    }
    .news h2 strong {
        border-bottom: 1px solid var(--txt-color-main);
    }
    .news h2 span {
        font-size: 3.077rem;
    }
    .news .list .swiper {
        margin-top: 50px;
    }
    .news .list .swiper .swiper-slide {
        width: 100%;
        height: 140px;
    }
    .news .list .swiper .swiper-slide a {
        padding: 20px;
    }
    .news .list .swiper .swiper-slide strong {
        font-size: 1.385rem;
        margin-bottom: 20px;
    }
    .news .list .swiper .swiper-slide span {
        font-size: 1rem;
    }
    .news .controlbar {
        position: absolute;
        width: 81px;
        height: 1px;
    }
    .news .controlbar .scroll .swiper-scrollbar {
        height: 1px;
    }
    .news .controlbar .swiper-scrollbar-drag {
        width: 10px; 
        height: 10px;
        top: -5px;
    }
    .news .more {
        top: 335px;
    }
    .news .more span {
        padding-right: 30px;
    }
    .news .more span::before {
        top: 1px;
        left: 39px;
        width: 20px;
        height: 22px;
    }
    .news .more span::after {
        top: 2px;
        width: 18px;
        height: 18px;
    }
}
.exhibition {
    background-color: #333;
    padding: 110px 0 150px 0;
    color: #fff;
    position: relative;
}
.exhibition h2 {
    font-size: 6.667rem;
    text-align: left;
    position: relative;
    margin-bottom: 70px;
    margin-left: 20px;
}
.exhibition h2 span {
    font-size: 10rem;
    font-weight: 700;
}
.exhibition h2::before {
    position: absolute;
    right: 0;
    top: 0;
    width: 758px;
    height: 1px;
    background-color: #fff;
    content: "";
}
.exhibition h2::after {
    position: absolute;
    right: 0;
    top: 30px;
    width: 590px;
    height: 1px;
    background-color: #fff;
    content: "";
}
.exhibition .swiper .swiper-slide .photo {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
.exhibition .swiper .swiper-slide .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.exhibition .swiper .swiper-slide strong {
    display: block;
    font-size: 2.333rem;
    font-weight: 700;
    line-height: 1.2;
    height: 2.4em;
    overflow: hidden;
    margin: 30px 0 20px 0;
}
.exhibition .swiper .swiper-slide span {
    display: block;
    font-size: 1.667rem;
    white-space: nowrap;
    font-weight: 300;
}
.exhibition .more {
    font-size: var(--txt-size-txt);
    font-weight: 300;
    color: #fff;
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translate(-50%, 0);
}
.exhibition .more span {
    padding-right: 43px;
    position: relative;
}
.exhibition .more span::before {
    position: absolute;
    left: 43px;
    top: 0;
    width: 33px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='24' viewBox='0 0 33 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_32_1944' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='33' height='24'%3E%3Crect width='33' height='24' fill='%2351504B'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_32_1944)'%3E%3Cpath d='M20.1754 18.327L19.1943 17.6385L26.2862 12.4808H4.125V11.4808H26.3127L19.2287 6.32302L20.1754 5.63452L28.9015 11.9808L20.1754 18.327Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    transition: 0.5s;
}
.exhibition .more span::after {
    position: absolute;
    right: 0;
    top: -1px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid #fff;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}
.exhibition .more a:hover span::before {
    transform: translateX(25px);
}
@media screen and (max-width: 1150px) {
    .exhibition h2 {
        font-size: 4.667rem;
    }
    .exhibition h2 span {
        font-size: 6rem;
    }
    .exhibition .swiper .swiper-slide strong {
        font-size: 1.533rem;
        margin: 22px 0 10px 0;
    }
    .exhibition .swiper .swiper-slide span {
        font-size: 1.333rem;
    }
    .exhibition h2::before {
        width: 300px;
    }
    .exhibition h2::after {
        top: 30px;
        width: 150px;
    }
}
@media screen and (max-width: 768px) {
    .exhibition {
        padding: 40px 0 115px 0; 
    }
    .exhibition h2 {
        font-size: 2.308rem;
        margin-bottom: 20px;
    }
    .exhibition h2 span {
        font-size: 3.077rem;
    }
    .exhibition h2::before {
        width: 70px;
    }
    .exhibition h2::after {
        top: 15px;
        width: 43px;
    }
    .exhibition .swiper .swiper-slide {
        width: auto;
    }
    .exhibition .swiper .swiper-slide strong {
        font-size: 1.154rem;
        margin: 10px 0 7px 0;
        font-weight: 400;
        white-space: nowrap;
        height: auto;
    }
    .exhibition .swiper .swiper-slide span {
        font-size: 1rem;
    }
    .exhibition .more span {
        padding-right: 30px;
    }
    .exhibition .more span::before {
        top: 1px;
        left: 39px;
        width: 20px;
        height: 22px;
    }
    .exhibition .more span::after {
        top: 2px;
        width: 18px;
        height: 18px;
    }
}
.program {
    background-color: #fff;
    padding: 350px 0 350px 0;
    position: relative;
    color: var(--txt-color-main);
}
.program h2 {
    font-size: 6.667rem;
    text-align: left;
    position: relative;
    margin-bottom: 70px;
    margin-left: 20px;
}
.program h2 span {
    font-size: 10rem;
    font-weight: 700;
}
.program .move_txt {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    font-size: 6.667rem;
    font-family: 'SF_HambakSnow';
}
.program .move_txt strong{
    position: absolute;
    left: 0;
    top: 0;
    animation-name: move_txt;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    padding: 30px 0;
}
@keyframes move_txt {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-1481px, 0);}
}
.program .move_txt strong::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 1px solid var(--txt-color-main);
    content: "";
}
.program .wrapper {
    position: relative;
}
.program .p_box {
    border: 1px solid var(--txt-color-main);
    border-radius: 30px;
    color: var(--txt-color-main);
    display: flex;
    padding: 20px;
    position: relative;
}
.program .btn_wrap {
    position: absolute;
    left: 16%;
    bottom: 20px;
    font-size: 0;
    line-height: 0;
    z-index: 10;
}
.program .btn_wrap button {
    position: relative;
    width: 50px;
    height: 50px;
    z-index: 10;
}
.program .btn_wrap button::before {
    position: absolute;
    width: 10px;
    height: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: "";
}
.program .btn_wrap button.btn_prev::before {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.30768 10.9992L11.1535 19.8456C11.3487 20.0404 11.4528 20.2794 11.466 20.5628C11.4796 20.8457 11.3754 21.098 11.1535 21.3195C10.932 21.5414 10.6863 21.6523 10.4165 21.6523C10.1467 21.6523 9.90108 21.5414 9.67956 21.3195L0.536849 12.1773C0.355251 11.9954 0.227648 11.8096 0.154036 11.6201C0.0807733 11.4305 0.0441389 11.2235 0.0441389 10.9992C0.0441389 10.7749 0.0807734 10.568 0.154037 10.3784C0.227648 10.1888 0.355251 10.003 0.536849 9.82109L9.67956 0.678907C9.87435 0.483768 10.1134 0.379602 10.3967 0.366407C10.6797 0.352865 10.932 0.457031 11.1535 0.678907C11.3754 0.900434 11.4863 1.1461 11.4863 1.41589C11.4863 1.68568 11.3754 1.93134 11.1535 2.15286L2.30768 10.9992Z' fill='%2320231F'/%3E%3C/svg%3E%0A");
}
.program .btn_wrap button.btn_next::before {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.69232 11.0008L0.846485 2.15443C0.651346 1.95964 0.54718 1.72057 0.533985 1.43724C0.520443 1.15425 0.62461 0.901994 0.846485 0.680466C1.06801 0.458591 1.31367 0.347656 1.58346 0.347656C1.85326 0.347656 2.09892 0.458591 2.32044 0.680466L11.4632 9.82266C11.6447 10.0046 11.7724 10.1904 11.846 10.3799C11.9192 10.5695 11.9559 10.7765 11.9559 11.0008C11.9559 11.2251 11.9192 11.432 11.846 11.6216C11.7724 11.8112 11.6447 11.997 11.4632 12.1789L2.32044 21.3211C2.12565 21.5162 1.88659 21.6204 1.60326 21.6336C1.32027 21.6471 1.06801 21.543 0.846485 21.3211C0.62461 21.0996 0.513672 20.8539 0.513672 20.5841C0.513672 20.3143 0.62461 20.0687 0.846485 19.8471L9.69232 11.0008Z' fill='%2320231F'/%3E%3C/svg%3E%0A");
}
.program .p_box .paging {
    margin-right: 50px;
    position: relative;
}
.program .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
    position: relative;
}
.program .swiper-pagination-bullets.swiper-pagination-horizontal::before {
    position: absolute;
    right: -17px;
    top: 0;
    height: 100%;
    border: 1px dashed var(--txt-color-main);
    content: "";
    opacity: 0.2;
}
.program .paging .swiper-pagination-bullet { 
    width: 100%;
    height: 6px;
    background-color: rgba(32, 35, 31, 0.2);
    opacity: 1;
    position: relative;
    border-radius: 0;
}
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 20px var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.program .paging .swiper-pagination-bullet-active::before { 
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--txt-color-main);
    content: "";
    animation-name: visual_count;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes visual_count {
    0% {width: 0%;}
    100% {width: 100%;}
}
.program .swiper-slide {
    display: flex;
    justify-content: space-between;
}
.program .swiper-slide .p_list {
    width: 50%;
}
.program .swiper-slide .p_list .p_txt h3 {
    font-size: 2.667rem;
    font-weight: 700;
    margin-top: 30px;
}
.program .swiper-slide .p_list .p_txt p {
    font-size: 1.667rem;
    font-weight: 700;
    margin: 28px 0 15px 0;
}
.program .swiper-slide .p_list .p_txt > strong,
.program .swiper-slide .p_list .p_txt > span,
.program .swiper-slide .p_list .p_txt > em {
    display: block;
    font-size: 1.667rem;
    font-weight: 300;
    line-height: 40px;
}
.program .swiper-slide .photo {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--txt-color-main);
}
.program .swiper-slide .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.program .more {
    font-size: var(--txt-size-txt);
    font-weight: 300;
    color: var(--txt-color-main);
    position: absolute;
    right: 20px;
    top: 210px;
}
.program .more span {
    padding-right: 43px;
    position: relative;
}
.program .more span::before {
    position: absolute;
    left: 43px;
    top: 0;
    width: 33px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='24' viewBox='0 0 33 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_32_2011' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='33' height='24'%3E%3Crect width='33' height='24' fill='%2351504B'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_32_2011)'%3E%3Cpath d='M20.1754 18.3273L19.1943 17.6388L26.2862 12.481H4.125V11.481H26.3127L19.2287 6.32327L20.1754 5.63477L28.9015 11.981L20.1754 18.3273Z' fill='%2320231F'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    transition: 0.5s;
}
.program .more span::after {
    position: absolute;
    right: 0;
    top: -1px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid var(--txt-color-main);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}
.program .more a:hover span::before {
    transform: translateX(25px);
}
@media screen and (max-width: 1150px) {
    .program h2 {
        font-size: 4.667rem;
    }
    .program h2 span {
        font-size: 6rem;
    }
    .program .p_box {
        height: 500px;
    }
    .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 14px var(--swiper-pagination-bullet-horizontal-gap, 4px);
    }
    .program .more {
        top: 140px;
    }

}
@media screen and (max-width: 1024px) {
    .program .swiper-slide .p_list .p_txt h3 {
        font-size: 2rem;
        margin-top: 5px;
    }
    .program .swiper-slide .p_list .p_txt p {
        font-size: 1.333rem;
        margin: 10px 0 7px 0;
    }
    .program .swiper-slide .p_list .p_txt > strong,
    .program .swiper-slide .p_list .p_txt > span,
    .program .swiper-slide .p_list .p_txt > em {
        font-size: 1.333rem;
        line-height: 33px;
    }
}
@media screen and (max-width: 768px) {
    .program {
        padding: 140px 0 70px 0;
    }
    .program h2 {
        font-size: 2.308rem;
        margin-bottom: 20px;
    }
    .program h2 span {
        font-size: 3.077rem;
    }
    .program .move_txt {
        top: 0;
        left: 0;
        width: 100%;
        font-size: 2.308rem;
    }
    .program .move_txt strong{
        padding: 30px 0;
        animation-name: move_txt2;
        animation-duration: 14s;
    }
    @keyframes move_txt2 {
        0% {transform: translate(0, 0);}
        100% {transform: translate(-1330px, 0);}
    }
    .program .p_box {
        border-radius: 15px;
        padding: 10px;
        height: auto;
    }
    .program .btn_wrap {
        left: 0;
        bottom: 15px;
    }
    .program .p_box .paging {
        display: none;
    }
    .program .btn_wrap {
        left: 2%;
        bottom: 15px;
    }
    .program .btn_wrap button {
        width: 24px;
        height: 24px;
    }
    .program .btn_wrap button::before {
        width: 5px;
        height: 10px;
    }
    .program .swiper-slide {
        width: auto;
    }
    .program .swiper-slide .p_list {
        width: 50%;
        padding: 10px;
    }
    .program .swiper-slide .p_list .p_txt h3 {
        font-size: 1.154rem;
        margin-top: 0;
    }
    .program .swiper-slide .p_list .p_txt p {
        font-size: 1rem;
        margin: 6px 0 6px 0;
    }
    .program .swiper-slide .p_list .p_txt > strong,
    .program .swiper-slide .p_list .p_txt > span,
    .program .swiper-slide .p_list .p_txt > em {
        font-size: 1rem;
        line-height: 25px;
    }
    .program .swiper-slide .photo {
        width: 50%;
        height: auto;
    }
    .program .more {
        top: 40px;
    }
    .program .more span {
        padding-right: 30px;
    }
    .program .more span::before {
        top: 1px;
        left: 39px;
        width: 20px;
        height: 22px;
    }
    .program .more span::after {
        top: 2px;
        width: 18px;
        height: 18px;
    }
}
.collection {
    background-color: #D9D9D9;
    padding: 75px 0 110px 0;
    color: var(--txt-color-main);
    position: relative;
}
.collection .line1 {
    position: absolute;
    left: 0;
    top: 270px;
    width: 420px;
    height: 1px;
    background-color: var(--txt-color-main);
}
.collection .line2 {
    position: absolute;
    left: 0;
    top: 290px;
    width: 220px;
    height: 1px;
    background-color: var(--txt-color-main);
}
.collection .line3 {
    position: absolute;
    right: 0;
    bottom: 170px;
    width: 310px;
    height: 1px;
    background-color: var(--txt-color-main);
}
.collection .line4 {
    position: absolute;
    right: 0;
    bottom: 150px;
    width: 200px;
    height: 1px;
    background-color: var(--txt-color-main);
}
.collection h2 {
    font-size: 6.667rem;
    text-align: left;
    position: relative;
    margin-bottom: 70px;
    margin-left: 20px;
    text-align: center;
}
.collection h2 span {
    font-size: 10rem;
    font-weight: 700;
}
.collection .c_ctn ul {
    display: flex;
    justify-content: center;
}
.collection .c_ctn ul li:nth-child(2) {
    margin: 0 100px;
}
.collection .c_ctn ul li .photo {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border: 1px solid var(--txt-color-main);
    box-shadow: 4px 4px 15px rgba(29, 29, 29, 0.2);
    padding: 25px;
    position: relative;
}
.collection .c_ctn ul li .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--txt-color-main);
    padding: 5px;
}
.collection .c_ctn ul li .c_txt {
    border: 1px solid var(--txt-color-main);
    padding: 20px;
    font-size: 1.667rem;
    font-weight: 300;
    margin-top: 25px;
}
.collection .c_ctn ul li .c_txt strong {
    display: block;
    margin-bottom: 15px;
    white-space: nowrap;
}
.collection .c_ctn ul li .c_txt > span {
    display: block;
    margin-bottom: 15px;
    white-space: nowrap;
}
.collection .c_ctn ul li .c_txt em {
    font-weight: 400;
}
.collection .c_ctn ul li .c_txt .view {
    font-size: var(--txt-size-txt);
    font-weight: 300;
    color: var(--txt-color-main);
    text-align: right;
}
.collection .c_ctn ul li .c_txt .view span{
    padding-right: 43px;
    position: relative;
}
.collection .c_ctn ul li .c_txt .view span::before {
    position: absolute;
    left: 43px;
    top: 0;
    width: 33px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='24' viewBox='0 0 33 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_32_2011' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='33' height='24'%3E%3Crect width='33' height='24' fill='%2351504B'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_32_2011)'%3E%3Cpath d='M20.1754 18.3273L19.1943 17.6388L26.2862 12.481H4.125V11.481H26.3127L19.2287 6.32327L20.1754 5.63477L28.9015 11.981L20.1754 18.3273Z' fill='%2320231F'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    transition: 0.5s;
}
.collection .c_ctn ul li .c_txt .view span::after {
    position: absolute;
    left: 55px;
    top: -1px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid var(--txt-color-main);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}
.collection .c_ctn ul li .c_txt .view a:hover span::before {
    transform: translateX(25px);
}
.collection .more {
    font-size: var(--txt-size-txt);
    font-weight: 300;
    color: var(--txt-color-main);
    text-align: center;
    margin-top: 100px;
}
.collection .more span {
    padding-right: 43px;
    position: relative;
}
.collection .more span::before {
    position: absolute;
    left: 43px;
    top: 0;
    width: 33px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='24' viewBox='0 0 33 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_32_1912' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='33' height='24'%3E%3Crect width='33' height='24' fill='%2351504B'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_32_1912)'%3E%3Cpath d='M20.1754 18.327L19.1943 17.6385L26.2862 12.4808H4.125V11.4808H26.3127L19.2287 6.32302L20.1754 5.63452L28.9015 11.9808L20.1754 18.327Z' fill='%2320231F'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    transition: 0.5s;
}
.collection .more span::after {
    position: absolute;
    right: 0;
    top: -1px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid var(--txt-color-main);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}
.collection .more a:hover span::before {
    transform: translateX(25px);
}
@media screen and (max-width: 1150px) {
    .collection .line1 {
        top: 200px;
        width: 420px;
    }
    .collection .line2 {
        top: 220px;
        width: 220px;
    }
    .collection .line3 {
        bottom: 170px;
        width: 310px;
    }
    .collection .line4 {
        bottom: 150px;
        width: 200px;
    }
    .collection h2 {
        font-size: 4.667rem;
    }
    .collection h2 span {
        font-size: 6rem;
    }
    .collection .c_ctn ul li:nth-child(2) {
        margin: 0 0 0 20px;
    }
    .collection .c_ctn ul li:nth-child(3) {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .collection {
        padding: 40px 0 50px 0;
    }
    .collection .line1 {
        top: 90px;
        width: 70px;
    }
    .collection .line2 {
        top: 100px;
        width: 54px;
    }
    .collection .line3 {
        bottom: 103px;
        width: 88px;
    }
    .collection .line4 {
        bottom: 90px;
        width: 60px;
    }
    .collection h2 {
        font-size: 2.308rem;
        margin-bottom: 20px;
    }
    .collection h2 span {
        font-size: 3.077rem;
    }
    .collection .c_ctn ul {
        display: block;
    }
    .collection .c_ctn ul li {
        padding: 0 20px;
    }
    .collection .c_ctn ul li:nth-child(2) {
        display: none;
    }
    .collection .c_ctn ul li .photo {
        padding: 13px;
    }
    .collection .c_ctn ul li .c_txt {
        padding: 17px;
        font-size: 1.154rem;
        margin-top: 20px;
    }
    .collection .c_ctn ul li .c_txt strong {
        margin-bottom: 3px;
        white-space: nowrap;
    }
    .collection .c_ctn ul li .c_txt > span {
        display: block;
        margin-bottom: 6px;
    }
    .collection .c_ctn ul li .c_txt .view span {
        padding-right: 30px;
    }
    .collection .c_ctn ul li .c_txt .view span::before {
        top: 1px;
        left: 39px;
        width: 20px;
        height: 22px;
    }
    .collection .c_ctn ul li .c_txt .view span::after {
        top: 2px;
        width: 18px;
        height: 18px;
        left: 45px;
    }
    .collection .more {
        margin-top: 50px;
    }
    .collection .more span {
        padding-right: 30px;
    }
    .collection .more span::before {
        top: 1px;
        left: 39px;
        width: 20px;
        height: 22px;
    }
    .collection .more span::after {
        top: 2px;
        width: 18px;
        height: 18px;
    }
}
.cultural {
    padding: 150px 0 190px 0;
    background-color: #F5F5F5;
}
.cultural h2 {
    font-size: 6.667rem;
    text-align: left;
    position: relative;
    margin-bottom: 10px;
    margin-left: 20px;
    text-align: center;
    color: var(--txt-color-main);
    text-align: right;
    padding-right: 20px;
}
.cultural h2 span {
    font-size: 10rem;
    font-weight: 700;
}
.program .paging {
    width: 170%;
    position: relative;
}
.cultural .cultural_btn_wrap {
    display: flex;
    text-align: right;
    align-items: center;
}
.cultural .swiper {
    width: 550px;
    height: 550px;
}
.cultural .swiper .photo {
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}
.cultural .swiper .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cultural .swiper-pagination-bullet { 
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--txt-color-main);
    opacity: 1;
    position: relative;
    background-color: transparent;
}
.cultural .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 20px;
}
.cultural .swiper-pagination-bullet-active {
    background-color: var(--txt-color-main);
}
.cultural .swiper-pagination-bullet-active::before { 
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: var(--txt-color-main);
    content: "";
}
.cultural .btn_wrap {
    display: flex;
}
.cultural .btn_wrap button {
    position: relative;
    width: 50px;
    height: 50px;
    z-index: 10;
}
.cultural .btn_wrap button::before {
    position: absolute;
    width: 10px;
    height: 20px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    content: "";
}
.cultural .btn_wrap button.btn_prev::before {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.30768 10.9992L11.1535 19.8456C11.3487 20.0404 11.4528 20.2794 11.466 20.5628C11.4796 20.8457 11.3754 21.098 11.1535 21.3195C10.932 21.5414 10.6863 21.6523 10.4165 21.6523C10.1467 21.6523 9.90108 21.5414 9.67956 21.3195L0.536849 12.1773C0.355251 11.9954 0.227648 11.8096 0.154036 11.6201C0.0807733 11.4305 0.0441389 11.2235 0.0441389 10.9992C0.0441389 10.7749 0.0807734 10.568 0.154037 10.3784C0.227648 10.1888 0.355251 10.003 0.536849 9.82109L9.67956 0.678907C9.87435 0.483768 10.1134 0.379602 10.3967 0.366407C10.6797 0.352865 10.932 0.457031 11.1535 0.678907C11.3754 0.900434 11.4863 1.1461 11.4863 1.41589C11.4863 1.68568 11.3754 1.93134 11.1535 2.15286L2.30768 10.9992Z' fill='%2320231F'/%3E%3C/svg%3E%0A");
}
.cultural .btn_wrap button.btn_next::before {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='22' viewBox='0 0 12 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.69232 11.0008L0.846485 2.15443C0.651346 1.95964 0.54718 1.72057 0.533985 1.43724C0.520443 1.15425 0.62461 0.901994 0.846485 0.680466C1.06801 0.458591 1.31367 0.347656 1.58346 0.347656C1.85326 0.347656 2.09892 0.458591 2.32044 0.680466L11.4632 9.82266C11.6447 10.0046 11.7724 10.1904 11.846 10.3799C11.9192 10.5695 11.9559 10.7765 11.9559 11.0008C11.9559 11.2251 11.9192 11.432 11.846 11.6216C11.7724 11.8112 11.6447 11.997 11.4632 12.1789L2.32044 21.3211C2.12565 21.5162 1.88659 21.6204 1.60326 21.6336C1.32027 21.6471 1.06801 21.543 0.846485 21.3211C0.62461 21.0996 0.513672 20.8539 0.513672 20.5841C0.513672 20.3143 0.62461 20.0687 0.846485 19.8471L9.69232 11.0008Z' fill='%2320231F'/%3E%3C/svg%3E%0A");
}
.cultural .more {
    font-size: var(--txt-size-txt);
    font-weight: 300;
    color: var(--txt-color-main);
    text-align: right;
    margin: 20px 20px 0 0;
}
.cultural .more span {
    padding-right: 43px;
    position: relative;
}
.cultural .more span::before {
    position: absolute;
    left: 43px;
    top: 0;
    width: 33px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg width='33' height='24' viewBox='0 0 33 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_32_2011' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='33' height='24'%3E%3Crect width='33' height='24' fill='%2351504B'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_32_2011)'%3E%3Cpath d='M20.1754 18.3273L19.1943 17.6388L26.2862 12.481H4.125V11.481H26.3127L19.2287 6.32327L20.1754 5.63477L28.9015 11.981L20.1754 18.3273Z' fill='%2320231F'/%3E%3C/g%3E%3C/svg%3E%0A");
    content: "";
    transition: 0.5s;
}
.cultural .more span::after {
    position: absolute;
    right: 0;
    top: -1px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 1px solid var(--txt-color-main);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
}
.cultural .more a:hover span::before {
    transform: translateX(25px);
}
@media screen and (max-width: 1150px) {
    .cultural h2 {
        font-size: 4.667rem;
        padding-right: 10px;
    }
    .cultural h2 span {
        font-size: 6rem;
    }
}
@media screen and (max-width: 768px) {
    .cultural {
        padding: 60px 0 100px 0;
        position: relative;
    }
    .cultural h2 {
        font-size: 2.308rem;
        margin-bottom: 10px;
    }
    .cultural h2 span {
        font-size: 3.077rem;
    }
    .cultural .swiper-pagination-bullet { 
        width: 10px;
        height: 10px;
    }
    .cultural .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 10px;
    }
    .cultural .cultural_btn_wrap {
        margin: 0 0 10px 0;
    }
    .cultural .btn_wrap button {
        width: 24px;
        height: 24px;
    }
    .cultural .btn_wrap button::before {
        width: 5px;
        height: 10px;
    }
    .cultural .more {
        position: absolute;
        left: 50%;
        bottom: 4%;
        transform: translate(-50%, 0);
    }
    .cultural .more span {
        padding-right: 30px;
    }
    .cultural .more span::before {
        top: 1px;
        left: 39px;
        width: 20px;
        height: 22px;
    }
    .cultural .more span::after {
        top: 2px;
        width: 18px;
        height: 18px;
        left: 45px;
    }
    .cultural .more {
        margin: 0 0 10px 0;
    }
    .cultural .swiper {
        width: auto;
        height: auto;
    }
}