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


/*???? ???? ?????*/
.flexs {
    display: flex;
    gap: 20px;
}

.flexs.gap40 {
    gap: 40px;
}

.flexs img {
    flex: 1;
    min-width: 0;
    height: auto;
}

.gap10 {
    gap: 10px;
}

.gap15 {
    gap: 15px;
}

.jcc {
    justify-content: center;
}

.ls5 {
    letter-spacing: -0.05em !important;
}
.tb-none{
    display: block;
}
@media all and (max-width: 1024px){
    .tb-none{
        display: none;
    }
}
@media all and (max-width: 767px) {
    .flexs {
        flex-direction: column;
    }
}

.r_box {
    border-radius: 20px;
    padding: 36px 28px;
    background: #fff;
}

.r_box.gy {
    background: #F3F4F4;
}

.r_box .text22 {
    text-align: center;
    line-height: 40px !important;
}


/*???? ????? ?????*/
.visaul_wrap {
    margin-top: 80px;
    padding: 80px 110px 0 110px;
}

.visual {
    position: relative;
}

.visual_bg {
    position: relative;
    z-index: -2;
    border-radius: 40px;
    overflow: hidden;
}

.visual_bg img {
    max-height: 700px;
    min-height: 600px;
    object-fit: cover;
}

.visual_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(000, 000, 000, 0.4);
    z-index: 1;
}

.visaul_category_wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.visaul_category {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.48px;
    line-height: 32px;
    border-radius: 99px;
    padding: 10px 38px;
    height: 52px;
    white-space: nowrap;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.category_line {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 28px);
    height: 66px;
    background: #fff;
    border-radius: 0 0 34px 34px;
    z-index: 3;
}

.category_line::after,
.category_line::before {
    position: absolute;
    content: '';
    width: 32px;
    height: 29px;
    background-size: cover;
    top: 0;
}

.category_line::after {
    left: -31px;
    background-image: url('../../images/sub/visual_round1.png');
}

.category_line::before {
    right: -31px;
    background-image: url('../../images/sub/visual_round2.png');
}

.visual_txt {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.visual_txt .visual_tit {
    color: #fff;
    text-align: center;
    font-size: 50px;
    font-weight: 600;
    line-height: 70px;
    letter-spacing: -1.12px;
}

.visual_txt .writer {
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 34px;
    letter-spacing: -0.44px;
    margin-top: 35px;
}

@media all and (max-width: 1279px) {
    .visual_bg img {
        max-height: 700px;
        min-height: 360px;
    }

    .visaul_wrap {
        padding: 80px 40px 0 40px;
    }

    .visual_txt .visual_tit {
        font-size: 36px;
        font-weight: 600;
        line-height: 48px;
        letter-spacing: -0.72px;
    }

    .visual_txt .writer {
        margin-top: 24px;
    }
}

@media all and (max-width: 1023px) {
    .visual_bg {
        border-radius: 24px;
    }

    .visual_txt {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        bottom: 0;
        top: auto;
        transform: translateY(0%);
    }

    .visual_txt .writer {
        margin-top: 0px;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -0.54px;
    }

    .visaul_wrap {
        padding: 0 24px;
        margin-top: 60px;
        margin-bottom: 0px;
    }

    .visaul_category {
        height: 46px;
        padding: 8px 32px;
        font-size: 22px;
        line-height: 30px;
        letter-spacing: -0.44px;
    }

    .category_line {
        height: 58px;
    }

}

@media all and (max-width: 767px) {
    .visual_bg {
        border-radius: 20px;
    }

    .visual_bg img {
        min-height: 400px;
    }

    .visual_txt {
        padding: 0 20px;
    }

    .visual_txt .visual_tit {
        font-size: 28px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -0.56px;
        word-break: keep-all;
    }

    .visaul_category {
        height: 38px;
        padding: 6px 28px;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -0.54px;
    }

    .category_line {
        height: 48px;
        border-radius: 0 0 28px 28px;
    }

    .category_line::after {
        width: 21px;
        height: 18px;
        left: -20px;
    }

    .category_line::before {
        width: 21px;
        height: 18px;
        right: -20px;
    }

}



/*???? ???? ???? ?????*/
.container {
    padding-top: 80px;
}

.introWrap {
    padding: 50px;
}

.content {
    padding: 80px 0;
}

.content.last {
    padding: 80px 0 100px 0;
}

.content.last2 {
    padding: 80px 0 150px 0;
}

.content.bg_gy {
    background: #F3F4F4;
}

.content .part {
    max-width: 856px;
    width: 100%;
    margin: 0 auto;
}

.content .part .txt_wrap {
    margin: 40px auto;
}

.content .part>:first-child {
    margin-top: 0 !important;
}

.content .part>:last-child {
    margin-bottom: 0 !important;
}

.sub_intro.txt_wrap {
    margin: 0 auto !important;
}

.sub_intro.txt_wrap .text {
    text-align: center !important;
}

.content .part .txt_wrap .title {
    font-size: 36px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -0.72px;
    text-align: center;
}

.content .part .txt_wrap .s_title {
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
    margin-bottom: 20px;
    letter-spacing: -0.56px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.content .part .txt_wrap .text {
    font-size: 20px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -0.4px;
    text-align: justify;
}

.content .part .txt_wrap .text22 {
    font-size: 22px;
    font-weight: 500;
    line-height: 34px;
    letter-spacing: -0.44px;
}

.content .part .txt_wrap .text24 {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.48px;
}
.content .part .txt_wrap .text20 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.9;
    letter-spacing: -0.48px;
}

.content .part .caption {
    color: #4A4A4A;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.6px;
    margin-top: 10px;
}

.caption.top_line {
    border-top: 1px solid #4A4A4A;
    ;
    width: fit-content;
}
sup{
    font-size: 12px;
}
@media all and (max-width: 1023px) {
    .container {
        padding-top: 40px;
    }

    .content {
        padding: 60px 0;
    }

    .content.last {
        padding: 60px 0 80px 0;
    }

    .content.last2 {
        padding: 60px 0 100px 0;
    }

    .content .part .txt_wrap {
        margin: 32px auto;
    }

    .content .part .txt_wrap .title {
        font-size: 32px;
        font-weight: 600;
        line-height: 48px;
        letter-spacing: -0.8px;
    }

    .content .part .txt_wrap .s_title {
        margin-bottom: 16px;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
        letter-spacing: -0.48px;
    }

    .content .part .txt_wrap .text24 {
        font-size: 22px;
        font-weight: 600;
        line-height: 30px;
        letter-spacing: -0.44px;
    }
    .content .part .txt_wrap .text20{
        font-size: 18px;
    }
    .content .part .txt_wrap .text24.mb14 {
        margin-bottom: 10px !important;
    }

}

@media all and (max-width: 886px) {
    .content .part {
        max-width: 100%;
        width: auto;
        margin: 0 24px;
    }
}

@media all and (max-width: 767px) {
    .container {
        padding-top: 40px;
    }

    .content {
        padding: 40px 0;
    }

    .content.last {
        padding: 40px 0 60px 0;
    }

    .content.last2 {
        padding: 60px 0 80px 0;
    }

    .content .part {
        margin: 0 20px;
    }

    .content .part .txt_wrap {
        margin: 24px auto;
    }

    .content .part .txt_wrap .title {
        font-size: 26px;
        font-weight: 600;
        line-height: 34px;
        letter-spacing: -1.04px;
    }

    .content .part .txt_wrap .s_title {
        font-size: 22px;
        font-weight: 600;
        line-height: 30px;
        margin-bottom: 12px;
    }

    .content .part .txt_wrap .text24 {
        font-size: 20px;
        font-weight: 600;
        line-height: 28px;
        letter-spacing: -0.8px;
    }

    .content .part .txt_wrap .text24.mb14 {
        margin-bottom: 8px !important;
    }

    .content .part .txt_wrap .text22 {
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
        letter-spacing: -0.54px;
    }

    .content .part .txt_wrap .text {
        font-size: 18px;
        line-height: 32px;
        letter-spacing: -0.18px;
    }

    .content .part .txt_wrap.gy_box .text22 {
        line-height: 36px !important;
    }

    .content .part .caption {
        font-size: 15px;
        font-weight: 400;
        line-height: 22px;
        letter-spacing: -0.3px;
    }
}

/*???? ????*/
.highlight {
    display: inline;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 1.2s ease;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.highlight.active {
    background-size: 100% 100%;
}

.highlight.active::after {
    width: 100%;
    background-size: 100% 100%;
}

.ccolor7-1 .highlight {
    background-image: linear-gradient(rgba(0, 74, 113, 0.2), rgba(0, 74, 113, 0.2));
}

.ccolor7-2 .highlight {
    background-image: linear-gradient(rgba(71, 103, 207, 0.2), rgba(71, 103, 207, 0.2));
}

.s8 .highlight {
    background-image: linear-gradient(rgba(224, 238, 242, 1), rgba(224, 238, 242, 1));
    font-weight: 600;
}

.s10 .highlight,
.s7 .highlight, 
.s3 .highlight{
    background-image: linear-gradient(rgba(222, 230, 242, 1), rgba(222, 230, 242, 1));
}

/*sup*/
.sups {
    font-size: 12px;
    vertical-align: super;
}

.sups2 {
    font-size: 10px;
    vertical-align: super;
}

/* ????? ???? ??????? */
.related {
    padding: 80px 0;
    background: #fff;
}

.related.gray {
    background: #F3F4F4;
}

.related_top {
    display: flex;
    width: 100%;
    justify-content: space-between !important;
    align-items: center;
    margin-bottom: 48px;
}

.related_arrow {
    width: 38px;
    height: 38px;
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    padding: 0;
}


.related_arrow.prev {
    background-image: url('../../images/sub/arrow_prev.png');
}

.related_arrow.next {
    background-image: url('../../images/sub/arrow_next.png');
}

.related_title {
    color: #222;
    text-align: center;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -0.8px;
}

.related .slide-container {
    width: 100%;
    overflow: hidden;
}

.related .slide-container .slick-list {
    margin: 0 -10px;
}

.related .slide-container .slick-slide {
    padding: 0 10px;
    box-sizing: border-box;
}

.related .slide-container .slide-item {
    position: relative;
    overflow: hidden;
}

.related .slide-item .img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.related_slide .slide-item .txt_wrap {
    margin-top: 20px;
    margin-bottom: 0;
}

.related_slide .slide-item .txt_wrap .r_date {
    color: #666;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: -0.54px;
}

.related_slide .slide-item .txt_wrap .r_tit {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.8px;
    margin-top: 4px;
}

.related .visual__progress {
    width: 100%;
    height: 6px;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 24px;
}

.related .visual__progress .bar {
    display: block;
    height: 100%;
    width: 0%;
    background: #666;
    border-radius: 999px;
    transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.related .part.top_part {
    margin-bottom: 48px;
}

.related_three .related_top {
    justify-content: center;
}


@media all and (max-width: 1023px) {
    .related {
        padding: 46px 0;
    }

    .related .part.top_part {
        margin: 0 auto 22px auto;
        padding: 0 11px;
    }

    .related .part.bottom_part {
        margin: 0 auto;
        padding: 0 20px;
    }

    .related_title {
        font-size: 28px;
        line-height: 36px;
        letter-spacing: -0.56px;
    }

    .related_slide .slide-item .txt_wrap .r_date {
        font-weight: 400;
    }

    .related .visual__progress {
        margin-top: 20px;
    }

    .related_arrow {
        width: 48px;
        height: 48px;
        border: none;
        background-size: 30px
    }
}

@media all and (max-width: 767px) {
    .related {
        padding: 40px 0;
    }

    .related_title {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.48px;
    }

    .related_slide .slide-item .txt_wrap {
        margin-top: 12px !important;
    }

    .related_slide .slide-item .txt_wrap .r_date {
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: -0.3px;
    }

    .related_slide .slide-item .txt_wrap .r_tit {
        font-size: 18px;
        font-weight: 600;
        line-height: 26px;
        letter-spacing: -0.54px;
        margin-top: 2px;
    }
    .related_slide .slide-item .txt_wrap .r_tit .pc_only{
        display: none;
    }
    .related_top {
        margin-bottom: 12px;
        gap: 6px;
        justify-content: space-between;
    }

    .related .part.top_part {
        margin: 0 auto 12px auto
    }

    .s6 .related_arrow,
    .s7 .related_arrow,
    .s8 .related_arrow,
    .s10 .related_arrow,
    .s11 .related_arrow,
    .s12 .related_arrow {
        display: block;
    }

    .s6 .related .visual__progress,
    .s7 .related .visual__progress,
    .s8 .related .visual__progress,
    .s10 .related .visual__progress,
    .s11 .related .visual__progress,
    .s12 .related .visual__progress {
        display: block;
    }
}


/*???? ???? ??????? ???*/
.sub_slide .slick-dots li button {
    font-size: 0;
    line-height: 0;
    width: 12px;
    height: 12px;
    padding: 0;
    background: #fff !important;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    outline: none;
    display: block;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.30) !important;
    transition: all 0.3s ease;
}

.sub_slide .slick-dots li button::before {
    display: none !important;
}

.sub_slide .slick-dots li.slick-active button {
    background: #666 !important;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.30) !important;
}

.sub_slide .slick-dots li {
    display: inline-block !important;
    margin: 0 6px !important;
    padding: 0 !important;
    width: auto !important;
    height: auto !important;
}

.sub_slide .slick-dots {
    bottom: 0 !important;
}

@media all and (max-width: 767px) {
    .sub_slide .slick-dots li button {
        width: 10px;
        height: 10px;
    }
}

/*???? ???? ?????*/
/*sub1*/
.s1 .visaul_category {
    background: #7E7D70;
}

.s1 .part.bg {
    margin-top: 50px;
    padding: 100px 64px 80px;
    border-radius: 20px;
    background: url(../../images/sub/sub1/s1_bg.png) 0 0/contain;
    position: relative;
    z-index: 0;
}

.s1 .part svg {
    position: absolute;
    z-index: -1;
    left: 29px;
    top: 29px;
    width: calc(100% - 58px);
    /* ?¬Ó¬á? 29px?? */
    height: calc(100% - 58px);
    /* ???? 29px?? */
    preserveAspectRatio: none;
}

.s1 .part .txt_wrap .title {
    text-align: center;
    font-family: "Maruburi";
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
    /* 109.091% */
    letter-spacing: -0.88px;
    background: linear-gradient(90deg, #FFEBBF 34.4%, #CFA969 45.17%, #664633 49.71%, #FDECCF 50.93%, #FFE2A8 60.11%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.s1 .part .txt_wrap {
    margin-top: 0;
    position: relative;
    z-index: 1;
}

.s1 .part .txt_wrap .text {
    color: var(--surface-background, #FFF);
}

.s1 .part .txt_wrap .text span.gold {
    color: var(--1-1-point1, #FFE4AE);
    font-weight: 600;
}

@media all and (max-width: 1023px) {}

@media all and (max-width: 767px) {
    .s1 .part.bg{padding: 80px 40px;}
}
@media all and (max-width: 450px) {
    .s1 .part .txt_wrap .title {
        font-size: 36px;
    }

    .s1 .part {
        padding: 90px 44px 80px;
        font-size: 16px;

    }

    .s1 .part svg {
        left: 17px;
        top: 17px;
        width: calc(100% - 34px);
        height: calc(100% - 34px);

    }
}

/*sub2*/

.s2 .visaul_category {
    background: var(--1-2-point1, #546878);
}

.s2 .part.ani {
    background: var(--surface-background, #FFF);
    border: 20px solid #dcdcdc;
    padding: 80px 40px 100px;
}

.s2 .title {
    position: relative;
    z-index: 0;
    margin-bottom: 80px;
}

.s2 .title img {
    position: absolute;
    right: -35px;
    top: -55px;
    z-index: -1;
    max-width: 50%;
}

.s2 .title span {
    display: block;
    color: var(--text-primary, #222);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.s2 .txt_wrap {
    position: relative;
    z-index: 1;
}

.s2 .img_wrap {
    margin: 40px 0;
}

.s2 .txt_wrap span.st {
    display: block;
    color: var(--text-primary, #222);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: -0.4px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

@media all and (max-width: 767px) {
    .s2 .title img {
        right: -23px;
        top: -45px;
        max-width: 60%;
    }

    .s2 .part.ani {
        padding: 80px 30px 100px;
    }

    .s2 .txt_wrap {
        font-size: 16px;
    }
}

@media all and (max-width: 450px) {
    .s2 .title {
        margin-bottom: 40px;
    }

    .s2 .title img {
        right: -30px;
        top: -25px;
        z-index: -1;
        max-width: 80%;
    }
}

/*sub2-1*/

.s2-1 .visaul_category {

    background: #3A2B1F;
}

.s2-1 .last2 {
    background: #F6EDE5;
}


.s2-1 .title span {
    display: block;
    font-family: "Pretendard";
    margin-bottom: 10px;
    color: #222;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    letter-spacing: 1px;
}

.s2-1 .title {
    position: relative;
    padding-bottom: 48px;
    font-family: "Maruburi";
}

.s2-1 .title::after {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: #666;

}

.s2-1 .box {
    margin: 80px auto;
    height: 116px;
    display: flex;
    justify-content: space-between;
    padding: 0px 32px;
    gap: 18px;
    align-items: center;
    background: #fff;
}

.s2-1 .box span {
    color: #222;
    text-align: center;
    font-family: "Maruburi";
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -1.12px;
}

.s2-1 .quato,
.s2-1 .quato2 {
    width: 46px;
    flex: 0 0 46px;
}

.s2-1 .quato {
    display: flex;
    height: 116px;
    align-items: flex-start;
    padding-top: 28px;
}

.s2-1 .quato2 {
    display: flex;
    height: 116px;
    align-items: flex-end;
    padding-bottom: 28px;
}

.s2-1 .txt_wrap.line {
    margin: 0 auto 60px auto;
    padding: 40px 0;
    border-top: 1px solid #AB7747;
    border-bottom: 1px solid #AB7747;
}
.s2-1 .line2 {
    display: block;
    margin-bottom: 32px;
    position: relative;
    width: fit-content;
    word-break: keep-all;
    text-align: left !important;
}

.s2-1 .line2_img {
    position: absolute;
    bottom: -4px;
    left: -1px;
    height: 12px;
}

.s2-1 .name_wrap {
    text-align: right !important;
}

.s2-1 .name_wrap span {
    display: inline-block;
    line-height: 56px;
}

.s2-1 .name_wrap .name {
    font-family: "Yeongwol";
    font-size: 28px;
    font-weight: 400;
    line-height: 56px;
    letter-spacing: -0.56px;
}
span.mo_425{display: none;}
span.pt{display: block;}

@media all and (max-width: 1023px) {
    .s2-1 .box {
        justify-content: center;
    }

    .s2-1 .box span {
        font-size: 24px;
        line-height: 32px;
        letter-spacing: -0.72px;
        word-break: keep-all;
    }

    .s2-1 .quato,
    .s2-1 .quato2 {
        width: 30px;
        flex: 0 0 30px;
    }
    .s2-1 .pc-only{
        display: block;
    }
}

@media all and (max-width: 767px) {
    .pc-only{
        display: none;
    }
    .s2-1 .txt_wrap.line {
        margin-bottom: 40px;
    }

    .s2-1 .box {
        margin: 40px auto;
        padding: 0 20px;
        justify-content: space-between;
        gap: 10px;
    }

    .s2-1 .box span {
        font-size: 20px;
        line-height: 28px;
    }

    .s2-1 .quato {
        padding-top: 16px;
    }

    .s2-1 .quato2 {
        padding-bottom: 16px;
    }

    .s2-1 .quato,
    .s2-1 .quato2 {
        width: 24px;
        flex: 0 0 24px;
    }
}

@media all and (max-width: 484px) {
span.pt{display: none !important;}
span.mo_425{
    display: block;
    margin-bottom: 32px;
}
.mo_425 .line2 {
    margin-bottom: 8px;
}
}

@media all and (max-width: 344px) {
    .s2-1 .quato {
        padding-top: 12px;
    }

    .s2-1 .quato2 {
        padding-bottom: 12px;
    }

    .s2-1 .box span {
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -0.54px;
    }
}
/* s3 */
.s3 .visaul_category {
    background: var(--1-2-point1, #74706D);
}
.s3 .ccolor1{
    color: var(--brand-secondary, #058CAD);
    font-weight: 700;
}

.s3 .highlight{
    font-weight: 600;
}


/* sub3 - flexs2 hover overlay */
.s3 .flexs2 {
    display: flex;
    gap: 9px;
}

.s3 .flexs2 .img_wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
}
.s3 .flexs2 .f1-5{
    flex: 1.7;
}
.s3 .flexs2 .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.s3 .flexs2 .img_wrap .overay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 13px 19px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.s3 .flexs2 .img_wrap:hover .overay,
.s3 .flexs2 .img_wrap:active .overay {
    opacity: 1;
}

.s3 .flexs2 .img_wrap .overay p {
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    font-weight: 400;
}

.s3 .flexs2 .img_wrap .overay p:first-child span{
    font-weight: 600;
}

.s3 .flexs2.mt10 {
    margin-top: 9px;
}

@media all and (max-width: 1024px) {
    .s3 .flexs2 {
        gap: 14px;
    }
    .s3 .flexs2.mt10 {
        margin-top: 14px;
    }
}

@media all and (max-width: 767px) {
    .s3 .flexs2 {
        flex-direction: column;
        gap: 12px;
    }
    .s3 .flexs2.mt10 {
        margin-top: 12px;
    }
    .s3 .flexs2 .img_wrap{
        max-width: 80%;
        margin: 0 auto;
    }
    .s3 .flexs2 .img_wrap .overay p {
        font-size: 16px;
    }
    .s3 .flexs2 .img_wrap .overay p:first-child {
        font-size: 18px;
    }
}

/*sub4*/
.s4 .visaul_category {
    background: #95948F;
}

.s4 .writer {
    color: #FFF;
    text-align: center; 
    font-size: 26px;
    font-weight: 600;
    line-height: 34px;
    letter-spacing: -1.04px;
    margin-top: 20px;
}

/*sub5*/
.s5 .visaul_category {
    background: #6C7984;
}



/*sub6*/
.s6 .visaul_category {
    background: #13110E;
}


/*sub7*/
.s7 .visaul_category {
    background: #6D6453;
}

.s7 .txt_wrap.m32 {
    margin: 32px auto;
}

.s7 .ccolor7_1 {
    color: #004A71;
}

.s7 .ccolor7_2 {
    color: #666;
}
.s7 .highlight{
    font-size: 400;
}
.s7 b{
    font-weight: 600;
}
@media all and (max-width: 1280px) {

}

@media all and (max-width: 767px) {

}

/*sub8*/
.mw476 {
    max-width: 476px;
    margin: 0 auto;
}

.s8 .visual_bg::after {
background: rgba(000, 000, 000, 0.3);
}

.s8 .visaul_category {
    background: var(--2-3-point1, #4D4640);
}

.s8 .content .part .txt_wrap .text22 {
    font-weight: 600;
    text-align: center;
    padding: 36px 0;
    line-height: 40px;
}

@media all and (max-width: 1023px) {
    .s8 .content .part .txt_wrap .s_title {
        font-size: 24px;
        margin-bottom: 14px;
    }
}

@media all and (max-width: 480px) {
    .s8 .content .part .txt_wrap .text22 {
        line-height: 30px;
    }

    .s8 .content .part .txt_wrap .s_title {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

/*sub9*/
.s9 .visual_bg::after {
    background: rgba(000, 000, 000, 0.3);
}

.s9 .visaul_category {
    background: var(--2-4-point1, #1B3E5B);
}

.s9 .img_wrap {
    position: relative;
    overflow: hidden;
}

.s9 img {
    display: block;
}

.s9 .img_wrap .video1 {
    position: absolute;
    left: 24.77%;
    top: 80.46%;
    width: 57.83%;
    height: auto;
    aspect-ratio: 495 / 284;
    overflow: hidden;
    background: #000;
}


.s9 .img_wrap video {
    width: 100%;
    ;
    height: 100%;
    object-fit: cover;
}

/*sub10*/
.mb40 {
    margin-bottom: 40px;
}

.mw802 {
    max-width: 802px;
}

.mw600 {
    max-width: 600px;
}

.p50 {
    padding: 50px 0 !important;
}
strong{
    font-weight: 600;
}
.s10 .part {
    margin-bottom: 40px;
}

.s10 .visaul_category {
    background: var(--2-5-category, #3C3C2C);
}

.s10 .img_wrap,
.s10 .caption {
    margin: 0 auto;
}

.s10 .yl_box {
    margin-bottom: 8px;
    width: fit-content;
    padding: 6px 14px;
    background: #F6DC18;
}

.s10 .r_box {
    background: none;
    color: var(--brand-primary, #666);
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    line-height: 40px;
    /* 181.818% */
    letter-spacing: -0.44px;
}

.s10 .r_box .img_wrap {
    text-align: center;
    margin-bottom: 28px;
}

.s10 .r_box img {
    width: 72px;
    margin-bottom: 10px;
}

.s10 .ps {
    position: relative;
}

.s10 .width500 {
    max-width: 500px !important;
    margin: 0 auto;
}

@media all and (max-width: 767px) {
    .s10 .img_wrap.mb40{
        margin-bottom: 20px !important;
    }
}

@media all and (max-width: 480px) {
    .s10 .r_box {
        font-size: 20px;
        line-height: 34px;
    }
}

/*sub11*/
.s11 .visaul_category {
    background: #88796B
}


/*sub12*/

.s12 .visaul_category {
    background: #868286; 
}
.s12 .ccolor1{
    color: var(--3-2-point2, #328627);
}
.s12 .box{
    display: inline-block;
    padding: 6px 18px;
    border-radius: 12px;
    background: var(--3-2-point2, #328627);
    color: var(--text-inverse, #FFF);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.9; /* 190% */
    margin-bottom: 12px;
}
.s12 .flexs2 {
    display: flex;
}

.s12 .flexs3 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.s12 .flexs3 .img_wrap img {
    width: 100%;
    height: 285px;
    object-fit: cover;
}
.s12 .flexs3.h260 .img_wrap img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}
.s12 .flexs3.h335 .img_wrap img {
    width: 100%;
    height: 335px;
    object-fit: cover;
}
.s12 .flexs3.h300 .img_wrap img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.s12 .flexs3.h567 .img_wrap img {
    width: 100%;
    height: 567px;
    object-fit: cover;
}

.s12 .width600{
    max-width: 600px;
    margin: 0 auto;
}

.s12 .width502{
    max-width: 502px;
    margin: 0 auto;
}

.s12 .img_wrap .cozy .width80 img{
     max-width: 80px;
     aspect-ratio: 1 / 1;
     height: 80px;
}
.s12 .img_wrap .cozy2 .width80 img{
     max-width: 80px !important;
     aspect-ratio: 1 / 1;
     height: 80px !important;
}
.s12 .cozy{
    position: relative;
}
.s12 .cozy .img{
    position: absolute;
    right: 0;top: -20px;
    margin-right: -80px;

}
.s12 .cozy2 .img{
    top: 75%;
    right: 0;
    margin-right: -10px;
}
.s12 .width223{
    max-width: 223px;
    margin: 0 auto;
}
.s12 .flexs3 .width396{
    min-width: 396px;
    max-width: 396px;
}
.s12 .flexs3 .width396 img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.s12 .width440{
    width: 440px;
    margin: 0 auto;
}

.fwb2{
    font-weight: 600;
}
@media all and (max-width: 800px){
    .s12 .flexs3 .width396{
    min-width: 350px;
    max-width: 350px;
    }
}
@media all and (max-width: 767px) {
    .s12 .flexs2 {
        justify-content: center;
    }
    .s12 .flexs3 {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        row-gap: 20px;
        margin-bottom: 20px;
    }
    .s12 .width223{
        max-width: 80%;
    }
    .s12 .flexs3 .width396{
        max-width: 100%;
        min-width: 0;
    }
    .s12 .flexs3 .img_wrap img{
        display: block;
        width: 80%;
        height: auto;
        margin: 0 auto;
    }
    .s12 .flexs3.h335 .img_wrap img,
    .s12 .flexs3.h567 .img_wrap img,
    .s12 .flexs3.h260 .img_wrap img,
    .s12 .flexs3.h300 .img_wrap img{
        display: block;
        width: 80%;
        height: auto;
         margin: 0 auto;
    }
    .s12 .cozy .img{
        top: -10px;
    }
    .s12 .cozy2 .img{
    top: 80%;
    right: 0;
    margin-right: 20px;
}
}

@media all and (max-width: 480px) {
    .s12 .flexs2 {
        flex-wrap: wrap;
        justify-content: space-between
    }
    .s12 .width600,
    .s12 .width440{               
        width: 100%;
        /* max-width: 340px !important; */
    }
    .s12 .flexs2>* {
        width: calc((100% - 10px) / 2);
    }

    .s12 .mo_h img {
        height: 100%;
        object-fit: cover;
    }

}

/*sub13*/
.s13 .visaul_category {
    background: var(--3-3-point3, #161C21);
}
.s13 .img_wrap{
    margin: 40px 0;
}
.s13 .tit28 {
    font-family: "Cafe24Shiningstar";
    font-size: 28px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -0.56px;
    text-align: center !important;
}


.fwb2 {
    font-weight: 600 !important;
}
.s13 .mw400{
    max-width: 400px;
    margin: 0 auto;
}

@media all and (max-width: 767px) {
    .s13 .tit28 {
        font-size: 24px;
        line-height: 36px;
        word-break: keep-all;
    }

}

@media all and (max-width: 480px) {}

/* ???? ??????? */
.video-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    background: #000;
}

.main-video {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    /* ?????? ???? ??? */
}

/* ??? ????? ??? ????? */
.click-guide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* ???????? ?? */
    pointer-events: none;
    /* ???: ????? ????? ????? ?????? ??? ?? */
    transition: opacity 0.5s ease, visibility 0.5s;
    background: rgba(0, 0, 0, 0.1);
    /* ????? ??…–? (???????) */
}

/* ??? ???? ?? ????? ????? */
.video-wrapper.is-playing .click-guide {
    opacity: 0;
    visibility: hidden;
}

/* ??? ?? ¬Ú¬Ú?? ???? ???? */
.play-btn,
.cursor-icon {
    position: absolute;
    top: 50%;
    left: 50%;
}

.play-btn {
    width: 100px;
    z-index: 10;
    transform: translate(-50%, -50%);
    animation: btnClickEffect 2s infinite ease-in-out;
}

.cursor-icon {
    z-index: 20;
    transform: translate(30px, 30px);
    /* ??? ??? */
    animation: cursorMoveClick 2s infinite ease-in-out;
}

.play-btn img {
    width: 100px;
    display: block;
}

.cursor-icon img {
    width: 72px;
    display: block;
}

/* ???????: ¬Ú¬Ú?? ??? ?? ??? */
@keyframes cursorMoveClick {
    0% {
        transform: translate(30px, 30px);
    }

    40% {
        transform: translate(10px, 10px);
    }

    50% {
        transform: translate(10px, 10px);
    }

    60% {
        transform: translate(10px, 10px);
    }

    80% {
        transform: translate(10px, 10px);
    }
}

/* ???????: ??? ??? ??? */
@keyframes btnClickEffect {

    0%,
    50% {
        transform: translate(-50%, -50%) scale(1);
    }

    60% {
        transform: translate(-50%, -50%) scale(0.92);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@media all and (max-width: 767px) {
    .play-btn {
        width: fit-content;
    }

    .play-btn img {
        width: 80px;
    }

    .cursor-icon img {
        width: 50px;
    }
}

@media all and (max-width: 479px) {
    .play-btn img {
        width: 65px;
    }

    .cursor-icon img {
        width: 35px;
    }
}



/*sub14*/
.s14 .content.last2 {
    padding: 0 !important;
}

.s14 .content:not(.related) .part {
    margin-top: 80px;
    margin-bottom: 100px;
}

.s14 .content:not(.related) .category {
    padding: 10px 38px;
    width: fit-content;
    margin: 40px auto;
    display: block;
    border-radius: 999px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.48px;
    background: #02B63F;
    text-align: center;
}

@media all and (max-width: 1023px) {
    .s14 .content:not(.related) .part {
        margin-top: 100px;
        margin-bottom: 60px;
    }

    .s14.container {
        padding-top: 0 !important;
    }

    .s14 .content:not(.related) .category {
        padding: 8px 32px;
        font-size: 22px;
        line-height: 30px;
        letter-spacing: -0.44px;
    }
}

@media all and (max-width: 767px) {
    .s14 .content:not(.related) .part {
        margin-bottom: 40px;
    }

    .s14 .content:not(.related) .category {
        padding: 6px 28px;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -0.54px;
    }
}

/*sub15*/
.s15 .content.last2 {
    padding: 0 !important;
}

.s15 .content:not(.related) .part {
    margin-top: 80px;
    margin-bottom: 100px;
}

.s15 .content:not(.related) .category {
    padding: 10px 38px;
    width: fit-content;
    margin: 40px auto;
    display: block;
    border-radius: 999px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.48px;
    background: #077FFD;
    text-align: center;
}

@media all and (max-width: 1023px) {
    .s15 .content:not(.related) .part {
        margin-top: 100px;
        margin-bottom: 60px;
    }

    .s15.container {
        padding-top: 0 !important;
    }

    .s15 .content:not(.related) .category {
        padding: 8px 32px;
        font-size: 22px;
        line-height: 30px;
        letter-spacing: -0.44px;
    }
}

@media all and (max-width: 767px) {
    .s15 .content:not(.related) .part {
        margin-bottom: 40px;
    }

    .s15 .content:not(.related) .category {
        padding: 6px 28px;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -0.54px;
    }
}

.s15 .flex_img {
    display: flex;
}

.s15 .flex_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 40px;
}
.s15 .flex_btn img{
    width: 57px;      
}
.s15 .category_in {
    margin: 0 !important;
}





/*sub16*/
.s16 .content.last2 {
    padding: 0 !important;
}

.s16 .content:not(.related) .part {
    margin-top: 80px;
    margin-bottom: 100px;
}

.s16 .content:not(.related) .category {
    padding: 10px 38px;
    width: fit-content;
    margin: 40px auto;
    display: block;
    border-radius: 999px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.48px;
    background: #004C97;
    text-align: center;
}

.s16 .flex_img {
    display: flex;
}

.s16 .flex_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 40px;
}

.s16 .category_in {
    margin: 0 !important;
}



@media all and (max-width: 1023px) {
    .s16 .content:not(.related) .part {
        margin-top: 100px;
        margin-bottom: 60px;
    }

    .s16.container {
        padding-top: 0 !important;
    }

    .s16 .content:not(.related) .category {
        padding: 8px 32px;
        font-size: 22px;
        line-height: 30px;
        letter-spacing: -0.44px;
    }
}

@media all and (max-width: 767px) {
    .s16 .content:not(.related) .part {
        margin-bottom: 40px;
    }

    .s16 .content:not(.related) .category {
        padding: 6px 28px;
        font-size: 18px;
        line-height: 26px;
        letter-spacing: -0.54px;
    }
}

@media all and (max-width: 1023px) {
    .part.mb80 {
        margin-bottom: 60px !important;
    }
}

@media all and (max-width: 767px) {
    .part.mb80 {
        margin-bottom: 40px !important;
    }

}