.container-article {
    margin: 0 auto;
    width: 100%;
    max-width: 1230px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

article {
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;

    margin: 0 auto;
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    letter-spacing: 1px;
    box-sizing: border-box;
}

article p {
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 1.5;
    margin: 0;
}

article iframe {
    width: 100%;
}

.article-col-8 {
    width: 66.667%;
}

.article-col-4 {
    width: 33.333%;
}

.hy-reverse {
    flex-direction: row-reverse;
}

.hy-article-left {
    justify-content: flex-start;
}

.hy-article-center {
    justify-content: center;
}

.hy-article-right {
    justify-content: flex-end;
}

.hy-left {
    text-align: left;
    justify-content: flex-start;
}

.hy-center {
    justify-content: center;
    text-align: center;
}

.hy-right {
    justify-content: flex-end;
    text-align: right;
}

.hy-left div {
    text-align: left;
    justify-content: flex-start;
}

.hy-center div {
    justify-content: center;
    text-align: center;
}

.hy-right div {
    justify-content: flex-end;
    text-align: right;
}

.hy-up {
    align-items: flex-start;
}

.hy-vcenter {
    align-items: center;
}

.hy-down {
    align-items: flex-end;
}

.hy-col-4.hy-up {
    align-items: unset;
    justify-content: flex-end;
}

.hy-col-4.hy-vcenter {
    align-items: unset;
    justify-content: center;
}

.hy-col-4.hy-down {
    align-items: unset;
    justify-content: flex-end;
}

.hy-col-8.hy-up {
    align-items: unset;
    justify-content: flex-end;
}

.hy-col-8.hy-vcenter {
    align-items: unset;
    justify-content: center;
}

.hy-col-8.hy-down {
    align-items: unset;
    justify-content: flex-end;
}



.hy-full {
    max-width: 100%;
}

.hy-full-box {
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.hy-height-s {
    min-height: 375px;
}

.hy-height-m {
    min-height: 500px;
}

.hy-height-l {
    min-height: 750px;
}

.hy-height-fill {
    min-height: 100vh;
}

.hy-section-p30 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
}

.hy-section-p20 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 30px;
}

.hy-section-p10 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.hy-section-p0 {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0px;
}

.hy-col-4 {
    width: 33.333%;
    display: flex;
    position: relative;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hy-col-6 {
    width: 50%;
    display: flex;
    position: relative;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hy-col-8 {
    width: 66.667%;
    display: flex;
    position: relative;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hy-col-12 {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.hy-select-main {
    overflow: auto;
    position: relative;
    height: 100vh;
}

.hy-select-body {
    max-width: 800px;
    margin: 0 auto;
}

.hy-img {
    display: flex;
    /* flex-direction: column;
    align-items: center; */
    padding: 0;
}

.hy-img.owl-carousel {
    padding: 0px;
}

.hy-img div {
    /* flex: 1; */
    display: flex;
}

.hy-img-2 div {
    flex: unset;
    width: 50%;
}

.hy-img-3 div {
    flex: unset;
    width: 33.33%;
}

.hy-img-4 div {
    flex: unset;
    width: 25%;
}

.hy-img p {
    padding: 10px 5px 0px 5px;
    display: block;
}

.hy-img.owl-carousel a {
    padding: 0;
}

.hy-img div:first-child a {
    padding: 0px;
}

.hy-img .mobile {
    display: none;
}

.hy-img-2 a,
.hy-img-3 a {
    padding: 10px 5px 0px 5px;
}

.hy-img img,
.hy-full-img img {
    max-width: 100%;
    display: block;
}

.hy-title h4 {
    letter-spacing: 1px;
    line-height: 1.5;
    font-size: 21px;
    margin: 15px 0px 10px 0px;
    position: relative;
    font-weight: 700;
}

.hy-title p {
    padding-bottom: 15px;
}

.hy-content {
    padding-bottom: 15px;
    word-break: break-word;
}

.hy-content .hy-img {
    padding-bottom: 15px;
}

.hy-content.no {
    padding-bottom: 0px;
}

.hy-content.no .hy-img {
    padding-bottom: 0px;
}

.hy-btn {
    display: flex;
}

.hy-btn a {
    padding: 7px 12px;
    background-color: #f6d174;
    margin-right: 5px;
    margin-top: 5px;
    -webkit-transition: opacity 0.15s ease-out;
    -moz-transition: opacity 0.15s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.15s ease-out;
    border-radius: 5px;
}

.hy-btn a:hover {
    opacity: 0.8;
}

.hy-video {
    position: relative;
}

.hy-video.error {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #eee;
}

.hy-video img {
    width: 100%;
    height: auto;
}

.hy-video::before {
    content: '';
    position: absolute;
    height: 60px;
    width: 60px;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    margin-left: -25px;
    margin-top: -30px;
    border-style: solid;
    border-width: 30px 0 30px 50px;
    border-color: transparent transparent transparent transparent;
    cursor: pointer;
    z-index: 1;
    border-inline-start-color: #ffffff;
    -webkit-transition: transform 0.15s ease-out;
    -moz-transition: transform 0.15s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.15s ease-out;
}

.hy-video:hover::before {
    -ms-transform: scale(1.3, 1.3);
    transform: scale(1.3, 1.3);
}

.row-reverse {
    flex-direction: row-reverse;
}

.wrap-reverse {
    flex-flow: wrap-reverse;
}

.no-padding a {
    padding: 0 !important;
}

.hy-img.owl-carousel .owl-stage {
    display: flex;
    flex-direction: row;
}

.hy-img.owl-carousel.owl-drag .owl-item {
    display: flex;
}


.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

.mfp-no-margins img.mfp-img {
    padding: 0;
}

/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}

/* padding for main container */
.mfp-no-margins .mfp-container {
    padding: 0;
}

.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.hy-img-popup img {
    cursor: pointer;
    -webkit-transition: opacity 0.15s ease-out;
    -moz-transition: opacity 0.15s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.15s ease-out;
}

.hy-img-popup img:hover {
    opacity: 0.8;
}

.swiper {
    width: 100%;
}

.swiper-slide {
    /* flex-shrink: 1 !important; */
    display: flex;
    flex-direction: column;
}

/* .swiper-slide h4 {
    letter-spacing: 1px;
    line-height: 1.5;
    font-size: 21px;
    margin-top: 10px;
    position: relative;
    font-weight: 700;
}

.swiper-slide p {
    margin-top: 5px;
    font-size: 17px;
    letter-spacing: 1px;
    line-height: 1.5;
} */

.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
    display: none !important;
}

.has-pagination {
    padding-bottom: 50px;
}

.has-pagination .swiper-pagination {
    display: block !important;
    /* margin-bottom: -45px; */
}

.has-navigation .swiper-button-prev,
.has-navigation .swiper-button-next {
    display: block !important;
}

@media (max-width: 767px) {
    .hy-section {
        padding: 15px;
    }

    .hy-title h4 {
        font-size: 18px;
        padding-bottom: 10px;
    }

    .hy-title p {
        padding-bottom: 10px;
    }

    .hy-content {
        padding-bottom: 10px;
    }

    .hy-content .hy-img {
        padding-bottom: 10px;
    }

    article p {
        font-size: 16px;
    }

    .hy-img .mobile {
        display: block;
    }

    .hy-img .pc {
        display: none;
    }

    .hy-img div,
    .hy-col-4,
    .hy-col-6,
    .hy-col-8 {
        width: 100%;
    }

    .hy-img-2 div,
    .hy-img-3 div,
    .hy-img-4 div {
        width: 50%;
    }

    .hy-img a {
        padding: 10px 5px 0px 5px;
    }

    .hy-img.owl-carousel a {
        padding: 10px 10px 0px 10px;
    }

    article,
    .hy-reverse {
        flex-direction: column;
    }
}