@charset "utf-8";

@import url(common.css);
@import url(mc-util.css);


/* header */
.campaign #header { position: relative; background: #000;   border-bottom: 0; position: relative; z-index: 13; }

.campaign #header .header_wrap { color: #fff; padding: 0; height: 79px; display: flex; justify-content: space-between; align-items: center; }
.campaign #header .header_wrap .logo {  margin-right: auto; }
.campaign #header .header_wrap .vol_info { font-weight: 500; font-size: 18px; line-height: 28px;  align-items: center; margin-right: 8px;}
.campaign #header .header_wrap .vol_info.mobile_display { display: none;}
/* .campaign #header .header_wrap .menu { margin: 0; } */
/* .campaign #header .header_wrap .menu button {  width: 81px; height: 40px; border: 2px solid #fff; border-radius: 355px; padding: 0.2rem; text-align: center; color: #fff; font-weight: 700; font-size: 18px; line-height: 28px; cursor: pointer; } */
.campaign #header .header_wrap .menu a { display: block; width: 81px; height: 40px; border: 2px solid #fff; border-radius: 355px; padding: 0.2rem; text-align: center; color: #fff; font-weight: 700; font-size: 18px; line-height: 28px; cursor: pointer; }
.campaign #header .header_wrap .angles.mobile_display { display: none;}

/* 서브페이지에서의 헤더의 메뉴 버튼 radius가 다른 부분에 대함 */
/* 
.campaign #header .header_wrap .menu button { border-radius: 35px; }
*/

.campaign .my_gnb { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }
.campaign .my_gnb.on::after { content: ''; position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.5); z-index: 12; }
.campaign .my_gnb .gnb_wrap { width: 100%; max-width: 417px; background: #fff; position: absolute; right: 0; top: -79px; z-index: 100; padding: 25px 25px 30px 20px; }
.campaign .my_gnb .gnb_wrap .mn_top { display: flex; justify-content: space-between; align-items: center; }
.campaign .my_gnb .gnb_wrap .mn_top .vol_info { font-weight: 500; font-size: 18px; line-height: 28px; }
.campaign .my_gnb .gnb_wrap .mn_top .vol_info span { font-weight: 900; }
.campaign .my_gnb .gnb_wrap .mn_top .close_btn { cursor: pointer; }
.campaign .my_gnb .gnb_wrap nav .gnb { display: flex; flex-direction: column; gap: 55px; margin: 45px 0 55px; }
.campaign .my_gnb .gnb_wrap nav .gnb > li { padding-top: 18px; }
.campaign .my_gnb .gnb_wrap nav .gnb > li .lnb { position: relative; }
.campaign .my_gnb .gnb_wrap nav .gnb > li:nth-child(1) .lnb::before { content: ''; width: 18px; height: 18px; display: block; background: url(../images/common/menuItem01.svg) no-repeat; position: absolute; left: 0; bottom: 100%; }
.campaign .my_gnb .gnb_wrap nav .gnb > li:nth-child(2) .lnb::before { content: ''; width: 18px; height: 18px; display: block; background: url(../images/common/menuItem02.svg) no-repeat; position: absolute; left: 0; bottom: 100%; }
.campaign .my_gnb .gnb_wrap nav .gnb > li:nth-child(3) .lnb::before { content: ''; width: 18px; height: 18px; display: block; background: url(../images/common/menuItem03.svg) no-repeat; position: absolute; left: 0; bottom: 100%; }
.campaign .my_gnb .gnb_wrap nav .gnb > li:nth-child(4) .lnb::before { content: ''; width: 18px; height: 18px; display: block; background: url(../images/common/menuItem04.svg) no-repeat; position: absolute; left: 0; bottom: 100%; }
.campaign .my_gnb .gnb_wrap nav .gnb > li .lnb > li a { font-weight: 500; font-size: 18px; line-height: 39px; }
.campaign .my_gnb .gnb_wrap .btns a { display: block; font-weight: 500; font-size: 18px; line-height: 39px; }


@media only all and (max-width: 768px) {
    /* 헤더 공백제거 */
    #container.scroll_up {
        padding-top: 0px;
    }
    .campaign #header { position: unset; padding: 0 20px; }
    .campaign #header .header_wrap { height: 44px; width: auto;}
    .campaign #header .header_wrap .logo { width: 103px; height: 21px; margin: 0;}
    .campaign #header .header_wrap .logo h1 img { width: 103px; height: 21px; }
    .campaign #header .header_wrap .vol_info { font-weight: 400; font-size: 12px; line-height: 22px; color: #fff; z-index: 9; }

    .campaign #header .header_wrap .vol_info.pc_display { display: none;}
    .campaign #header .header_wrap .vol_info.mobile_display { display: block ; margin-left: auto;}

    .campaign #header .header_wrap .menu {  display: block ;}
    .campaign #header .header_wrap .menu a { color: #fff; width: 49px; height: 24px; border: 1px solid #fff; border-radius: 35px; padding: 0; font-weight: 500; font-size: 12px; line-height: 22px; }
    .campaign #header .header_wrap .angles {  width: 24px; height: 24px; text-align: center; border: 1px solid #fff; border-radius: 8px; padding-top: 9px; padding-left: 7px; margin-left: 13px; }
    .campaign #header .header_wrap .angles img { width: 40%; }
    .campaign #header .header_wrap .angles.mobile_display {display: block;}

    .campaign .my_gnb .gnb_wrap { width: 100%; max-width: 219px; top: -44px; padding: 11px 20px 20px 20px; }
    .campaign .my_gnb .gnb_wrap .mn_top .vol_info { font-weight: 400; font-size: 12px; line-height: 22px; }
    .campaign .my_gnb .gnb_wrap .mn_top .close_btn { width: 21px; }
    .campaign .my_gnb .gnb_wrap .mn_top .close_btn img { width: 100%; }
    .campaign .my_gnb .gnb_wrap nav .gnb > li .gnb_tit { font-size: 12px; line-height: 27px; }
    .campaign .my_gnb .gnb_wrap nav .gnb > li .lnb > li a { font-size: 12px; line-height: 27px; }
    .campaign .my_gnb .gnb_wrap .btns a { font-size: 12px; line-height: 27px; }

    .campaign { position: relative; }
    .campaign .my_gnb02 { position: absolute; right: 0; top: 44px; z-index: 11; background: #fff; padding: 20px; font-size: 12px; }
    .campaign .my_gnb02 .divide { border-top: 1px solid #ccc; margin-top: 13px; padding-top: 5px; }
    .campaign .my_gnb02 .btn_size { padding: 5px 20px; }
    .campaign .my_gnb02 .btn_size span { font-size: 13px; }
    .campaign .my_gnb02 ul li { margin: 5px 0; }
    .campaign .my_gnb02 ul li .name { font-weight: bold; }
}

/* #section01, #section02, #section03, #section04, #section05{
    scroll-margin-top: 500px;
}
#section011{
    scroll-margin-top:100px;
}
#section031{
    scroll-margin-top: 700px;
}
#section051, #section021{
    scroll-margin-top: 200px;
} */

/* main */

/* 버튼영역 */
.main #container .content .btn-item:hover {
    background: #F56400;
    color: #fff;
    font-weight: 700;
}

/* 메인페이지 */
#wrap.main {
    height: auto ;
}
.main-wrap {
    padding-top: 0px ;
}
.main-wrap .visual-wrap {
    background-color: #D9D9D9;
}
.main-wrap .visualtem {
    position: absolute;
}
.main-wrap .visualImg-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    position: relative;
}
.main-wrap .visualImg-container img {
    width: 100%;
}
.main .main-wrap .visualImg-2 {
    width: 96%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 5px;
}
.main-wrap .visualImg-3 {
    right: 1.8%;
    bottom: 10px;
    color: #fff;
    font-weight: 700;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    font-size: clamp(8px, 1vw, 17px);
}
.main-wrap .visualImg-4 {
    width: 6%;
    bottom: 37%;
    right: 2vw;
}
.main-wrap .visual-link {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #fff;
    font-size: clamp(8px, 1vw, 16px);
}
.main-wrap .main-link {
    line-height: 1.8vw;
}
.main-wrap .main-link a {
    font-weight: 700;
    border-bottom: 1px solid #fff;
} 
.main-wrap .main-link .sub {
    line-height: 1.5vw;
}/* // 메인 비주얼 */

.main #container .content-section {
    /* padding: 0px ; */
    max-width: none ;
}
.main #container .content {
    max-width: 1240px;
    /* max-width: 700px; */
    margin: 0 auto;
}
.main .title .txtPoint {
    display: block;
}
.main .flexBox {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 5px;
}
.main .content-01 .flexBox {
    flex-direction: row-reverse;
}
.main .special-item {
    max-width: 650px;
    width: 100%;
    margin-top: -120px;
}
.main .f-20 {
    font-size: clamp(12px, 2vw, 20px);
    display: block;
}
.main .f-32 {
    font-size: clamp(20px, 3vw, 45px);
    display: block;
}
.main .mt-13 {
    margin-top: 13px;
}
.main .bg{
    background-color: #FFD3B2;
    /* border-top: 1px dashed #FF6B00;
    border-bottom: 1px dashed #FF6B00; */
    border-top: 2px dashed transparent;
    border-bottom: 2px dashed transparent;
    border-image: repeating-linear-gradient(to right, #FF6B00 0 10px, transparent 10px 20px) 100 stretch;
    padding: clamp(50px, 6vw, 100px) 0;
}
.main .bg .btn02_area {
    position: relative;
    z-index: 1;
}
.main #container .mainP {
    padding: clamp(40px, 10vw, 80px) 20px; 
}
.main .flexBox-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 26px;
}
.main .content-02 .flexBox {
    margin-top: clamp(40px,3vw,70px);
}
.main .content-02 img {
    max-width: 350px;
    width: 100%;
}
.main .second img {
    max-width: 390px;
    width: 100%;
    margin-top: 0;
}
.mainP .content-wrap .content {
    max-width: 1240px;
    padding: 0 20px;
}
.main .mob {
    display: none;
}
.main .content .title .f-32 {
    line-height: 1.3;
}
/* 7. 하단 버튼 컨텐츠 */
.main .content-btn .flexBox {
    justify-content: center;
    gap: 40px;
}
.main .content-btn .btn-inner {
    position: relative;
}
.main .btn-title {
    font-size: clamp(12px,2vw, 20px);
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}
.main .btnBtitle {
    font-size: clamp(12px, 2.5vw, 45px);
    /* font-size: 45px; */
    line-height: 1.3;
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
}
.main .btn-img {
    max-width: 600px;
}

@media (max-width: 958px) {

    .main .special-item {
        max-width: 550px;
    }
}


@media (max-width: 767px) {
    /* 메인 페이지 */
    .main .mob {
        display: block;
    }
    .main .web {
        display: none;
    }
    #container .main-visual .main-posit {
        top: 0% ;
    }
    .main-wrap .visualImg-container{
        /* height: 100vh; */
    }
    .main-wrap .visualImg-container picture {
        width: 100%;
        height: 100%;
    }
    .main-wrap .visualImg-container picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }
    .main-wrap .visualImg-2 {
        top: 20px;
    }
    .main-wrap .visualImg-3 {
        width: fit-content;
        left: 20px;
        bottom: 10px;
        text-shadow: 1px 1px 8px #000;
        font-size: 1.8vw;
    }
    .main-wrap .visualImg-4 {
        width: 13vw;
        height: fit-content;
        top: 15vw;
        right: 3vw;
    }
    .main-wrap .visual-link {
        top: auto;
        bottom: 27vw;
        left: 20px;
        text-shadow: 1px 1px 8px #000;
        font-size: clamp(10px , 2.2vw, 14px);
    } 
    .main-wrap .main-link {
        line-height: 6vw;
    } 
    .main-wrap .main-link .sub {
        line-height: 3.8vw;
    } /* // 메인 비주얼 */
    /* .main #container .posit-title {
        top: 3.5%;
        left: 4vw;
        line-height: 7.5vw;
        font-size: clamp(10px, 3.8vw, 34px);
    } */
    /* .main #container .content {
        padding: 0 20px;
    } */
    .main #container .content .section-area {
        width: 100%;
        /* min-width: auto; */
        padding: 20px;
        /* max-width: none; */
        margin: 0 auto;
    }
    .main #container .content3 .section-area {
        padding-top: 12vw;
    }
    .main #container .content4 .section-area {
        flex: 0 0 100%;
    }
    .main #container .content .sectionBtn-wrap {
        top: 53%;
        bottom: auto;
    }
    .main #container .content3 .sectionBtn-wrap{
        top: 73% ;
    }
    .main #container .content4 .sectionBtn-wrap {
        top: 65%;
    }
    .main #container .count02 {
        width: 35%;
        left: 18%;
    }
    .main #container .count04 {
        left: 12%;
    }
    .main #container .count05 {
        right: 8%;
    }
    .main #container .content .btn-item {
        width: clamp(108px, 20vw, 220px);
        height: 2em;
        line-height: 1.6em;
        padding: 0;
        font-size: clamp(12px, 2vw, 22px);
    }
    .main #container .section-title {
        font-size: clamp(12px, 4vw, 23px);
    }
    .main .special-item {
        max-width: 550px;
    }
    .mainP .content-wrap .content {
        padding: 0;
    }
}
@media (max-width: 580px) {
    .main .special-item.mt0 {
        margin-top: 0;
    }
    .main .special-item {
        margin-top: -80px;
        max-width: 250px;
        width: 70%;
        margin-left: 35%;
    }
    .main .special-item {
        max-width: 250px;
        width: 80%;
        margin-left: 20%;
    }
    .main .special-item.ml {
        margin-left: 0;
    }
    .btn02_area.w-12 {
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .main .special-item {
        width: 70%;
        margin-left: 30%;
    }
}


/* page ctrl */
.pagination { z-index: 99; position: fixed; display: flex; flex-direction: column; bottom: 20px; right: 2%; text-align: center; } 
.pagination button { width: 50%; height: 50%; margin: 3px 0; cursor: pointer; border: none; border-radius: 50%; background-color: #F67821; /* 배경색 */
    padding: 1vw 1vw;
    /* 최소 및 최대 값을 설정하여 반응형 패딩을 조정 */
    /* padding: clamp(10px, 1.5vw, 15px) clamp(10px, 1.5vh, 15px); */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 그림자 효과 */
    transition: all 0.3s ease; /* 호버 효과를 위한 트랜지션 */position: relative; z-index: 1;
}
.pagination button::before { content: '';position: absolute; top: 50%; left: 50%; width: 0;height: 0;border-radius: 7px;background: #c76407; /* 기본 배경색 */
    transition: all 0.3s ease;transform: translate(-50%, -50%);z-index: -1; }
.pagination button:hover::before{width: 80%;height: 80%; border-radius: 50%; } 
.pagination button:hover { background-size: 30%; transform: translateY(-2px);}
.pagination button img { width: 100%; display: block; }
.paginationbutton:disabled { cursor: not-allowed; opacity: 0.5; }
.pagination .scroll-button { padding: 0.8vw; }

@media (min-width: 2560px) {
    .pagination a { padding: 1.5rem; }
    .pagination .scroll-button { padding: 1rem; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
    .pagination a { width:40%; height: 40%; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .pagination a { width: 40%; height: 50%; }
    .pagination .scroll-button { width: 40%; height: 40%; padding: 1vw; }
}
@media (min-width: 400px)  and (max-width: 767px) {
    /* .pagination { width: 12%; right: 27px; } */
    .pagination a { width: 40%; height: 40%; padding: 10px; margin: 3px 0; }
}
@media only all and (max-width: 399px) {
    .pagination { width: 7%; right: 27px; }
    .pagination a { width: 40px; height: 40px; padding: 10px; margin: 3px 0; }
    .pagination .scroll-button { padding: 1.2vw; }
}





/* 캠페인.html, 새소식.html  */
#container .arrow-container {
    text-align: center;
}
#container .arrow-img {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
#container .arrow-title {
    font-size: clamp(16px, 2vw, 20px);
    color: #F56400;
    animation-delay: 1s;
}
/* #container .content-section {
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: clamp(40px, 10vw, 80px);
    margin-bottom: clamp(80px, 16vw, 297px);
} */
#container .sub-content-section {
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto;
    margin-top: clamp(40px, 10vw, 80px);
    margin-bottom: clamp(80px, 16vw, 297px);
}
#container .content-title {
    color: #F56400;
    font-size: 32px;
    line-height: 42px;
} 

#container .news {
    margin: 0 auto;
    text-align: center;
}
#container .news .titleB{
    font-size: clamp(20px, 5vw ,32px);
}
#container .news .title{
    font-size: clamp(20px, 5vw ,32px);
    font-weight: 400;
}
#container .news .subtitle{
    font-size: clamp(20px, 5vw ,32px);
    margin-bottom: clamp(30px, 3vw, 50px);
}
#container .news .after32{
    margin-top: clamp(30px, 3vw, 20px);
}

#container .news .description {
    font-size: clamp(15px, 2vw, 18px);
    letter-spacing: calmp(0, -0.5vw, 0.5px);
}
#container .news .icon {
    max-width: clamp(20px, 5vw, 40px);
    margin: 0 auto 10px;
}
#container .news .ticket-image {
    max-width: 300px;
    margin: 0 auto;
    width: 60%;
}
#container .news table {
    margin: 30px auto 0;
    max-width: 450px;
    border-collapse: collapse;
    font-size: 14px;
}
#container .news tr:first-of-type{
    border-top: 2px solid #333;
}
#container .news td {
    font-size: clamp(15px, 2vw, 18px);
    padding: 12px 8px;
    text-align: left;
    border-bottom: 2px solid #333;
}
#container .news td:last-child {
    text-align: right;
}
#container .news .steps{
    display: flex;
    justify-content: center; 
    flex-wrap: wrap;
    gap: 100px;
    max-width: 1240px;
    margin: 50px auto 0;
}
#container .news .number {
    font-size: 48px;
    line-height: 1.2;
    margin-top: 10px;
}
#container .news .step {
    width: 230px;
    height: 230px;
    border: 1px solid #ff6600;
    border-radius: 50%;
    color: #ff6600;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}    
#container .news .step-container {
    width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#container .news .step-container.one {
    margin-bottom: 50px;
}
#container .news .step-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}
#container .news .step-desc {
    font-size: clamp(15px, 2vw, 18px);
    color: #000000;
    line-height: 1.6;
    font-weight: 400;
    margin-top: 10px;
}
#container .news .section.seven {
    margin-bottom: 100px;
}
#container .campaign {
    margin: 0 auto;
    text-align: center;
}
#container .campaign .intro-title,
#container .news .intro-title{
    font-size: clamp(20px, 5vw ,32px);
    font-weight: 700;
    line-height: 1.3;
}
#container .campaign .summary {
    text-align: center;
    margin-top: 10px;
}
#container .campaign .word {
    margin: 0 auto;
    max-width: 1240px;
    text-align: center;
}
#container .campaign .intro {
    margin-bottom: clamp(50px, 10vw, 80px);
}
#container .campaign .intro .img {
    /* margin: 80px auto 30px; */
}

#container .section-sub {
    padding-top: clamp(50px, 8vw, 100px);
    padding-bottom: clamp(50px, 8vw, 100px);
}
#container .section-sub150 {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* #container .campaign .description.one{
    padding: 20px 0 100px;
} */
#container .campaign .description.one, #container .campaign .description.two,
#container .campaign .description.three, #container .campaign .description.four{
    /* padding: 30px 0; */
}
/* #container .campaign .description.three{
    padding: 20px 0 90px;
}    
#container .campaign .description.four{
    padding: 10px 0 90px;
}     */
#container .campaign .title{
    font-size: clamp(20px, 5vw ,32px);
    font-weight: 400;
    margin-top: clamp(10px, 3vw, 20px);
}
#container .sub-content-section .img-double{ /* 서브페이지 공통 */
    display: flex;
    gap: clamp(10px, 2vw, 20px);
    justify-content: space-around;
    width: 100%;
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
}
#container .campaign .img-double img{
    width: calc((100% - 20px) / 2);
}
#container .sub-content-section .img-double img{ /* 서브페이지 공통 */
    height: auto;
    display: block;
    object-fit: cover; 
}
#container .sub-content-section .img { /* 서브페이지 공통 */
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
}
#container .campaign .title-wrap{
    /* padding: 20px 0; */
}
#container .campaign .semi-wrap {
    /* display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 40px);
    width: 100%;
    padding: 20px 0; */
}
#container .campaign .double-wrap {
    /* display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 40px);
    padding: 20px 0; */
}

#container .campaign .point-box {
    /* font-size: clamp(20px, 5vw, 32px);
    color: #FF6B00;
    font-family: 'HakgyoansimBunpilR', sans-serif;
    padding-top: clamp(50px, 8vw, 100px); */
}
#container .semicolon {
    /* background-image: url('../images/common/semicolon.png'); 
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    text-align: center;
    color: #FF6B00;
    font-size: clamp(15px, 4vw, 24px);
    font-weight: 400;
    line-height: 1.6;
    max-width: 1080px;
    margin: 0 auto;
    font-family: 'HakgyoansimBunpilR', sans-serif;
    width: 100%; */
}
#container .orange-text {
    color: #FF6B00;
    font-size: clamp(20px, 4vw, 24px);
    font-weight: 400;
    line-height: 1.6;
    margin: 0 auto;
    font-family: 'HakgyoansimBunpilR', sans-serif;
    width: 100%;
}
#container .black-text {
    color: #000000;
    font-size: clamp(15px, 4vw, 24px);
    font-weight: 400;
    line-height: 1.6;
    margin: 0 auto;
    font-family: 'HakgyoansimBunpilR', sans-serif;
    width: 100%;
    margin-bottom: 40px;
}

#container .campaign .description {
    /* font-size: clamp(15px, 2vw, 18px);
    max-width: 1080px;
    text-align: justify;
    margin: 0 auto;
    letter-spacing: clamp(-0.9px, -0.1vw, -0.75px); */
}
#container .campaign .report {
    font-size: clamp(12px, 2vw, 18px);
    text-align: justify;
    margin: 0 auto;
}
#container .campaign .description2 {
    position: relative;
    font-size: clamp(12px, 1vw, 18px);
    max-width: 1240px;
    text-align: justify;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
    z-index: 1;
}
#container .campaign .dash-wrap{
    display: inline-flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
    border: 2px dashed #FF6B00;
    box-sizing: border-box;
    z-index: 0;
}
#container .campaign .full-bleed-img {
    margin-top: -30px; 
    display: block;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
}
#container .campaign .section-sub.four {
    padding-bottom: 0;
}
#container .sub-content-section.news .section-sub.seven {
    padding-top: 0;
}

@media (max-width: 767px) {
    #container .news .section.one {
        margin-bottom: 0px;
    }
    #container .news .steps{ 
        flex-direction: column;
        align-items: center;
        margin: 30px auto 0;
        gap: 10px;
    }
    #container .news .step {
        width: 180px;
        height: 180px;
        padding: 5px;
    }
    #container .news .number {
        font-size: 20px;
        line-height: 1.5;
        margin-top: 20px;
    }
    #container .news .step-desc {
        margin-top: 10px;
        letter-spacing: -1px;
    }
    #container .news .section.seven {
        margin-bottom: 200px;
    }
    #container .campaign .summary {
        /* margin-top: 20px; */
    }
    #container .campaign .intro .img {
        /* width: 100%;
        margin: 50px auto 10px; */
    }
    #container .campaign .title-wrap{
        padding: 20px 0 30px;
    }
    #container .campaign .semi-wrap {
        /* gap: 10px; */
    }
    /* #container .campaign .description.one{
        padding: 0px 0 50px;
    }
    #container .campaign .description.two{
        padding: 50px 0;
    }    
    #container .campaign .description.three{
        padding: 0px 0 40px;
    }
    #container .campaign .description.four{
        padding: 30px 0 10px;
    }
    #container .campaign .description.mt-7{
        margin-top: 30px;
    }
    #container .campaign .dash-wrap{
        padding: 20px;
    }
    #container .campaign .black-text.mt-3{
        margin-top: 70px;
    }
    #container .campaign .dash-wrap.mt-7{
        margin-top: 30px;
    }     */
}
@media (max-width: 480px) {
    #container .campaign .dash-wrap {
        padding: 15px;
    }
    #container .campaign .img-double img {
        width: calc((100% - 10px) / 2);
    }
}





/* ----- subType1 유형 페이지 시작 */
/* subType1 공통 스타일 */
.subType1 .image-wrapper {
    position: relative;
    width: 100%;      /* 원하는 사이즈 */
    overflow: hidden;
    clip-path: ellipse(100% 100% at 50% 0%); /* 하단에 반원 형태 */
}  
.subType1 .base-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    margin: auto;
}  
  /*.overlay {
    position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 107, 0, 0.8);*/ /* 원하는 배경색 */
  /*clip-path: ellipse(100% 100% at 50% 0%);*/ /* 하단에 반원 형태 */
 /* pointer-events: none;
  }*/
.subType1 .title-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    width: 100%;
}
.subType1 .titleTop {
    position: relative;
}
.subType1 .menu-title {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #FF6B00; 
    /* font-size: clamp(12px, 2vw, 20px); */
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
}
.subType1 .title-wrapper .titleBg {
    max-width: clamp(150px, 11vw, 200px);
    /* max-width: clamp(100px, 11vw, 200px); */
    width: 100%;
    margin: auto;
}
.subType1 .title-wrapper .title {
    /* font-size: clamp(20px, 2vw, 32px); */
    font-size: clamp(25px, 2vw, 32px);
    font-weight: 700;
    line-height: 1.3;
    margin-top: clamp(10px,2vw,20px);
}
.subType1 .content {
   
}
.subType1 .content .description {
    display: block;
    max-width: 1080px;
    margin: 0 auto;
    font-size: clamp(15px, 2vw, 18px);
    letter-spacing: clamp(-0.9px, -0.1vw, -0.75px);
}
.subType1 .content .point-box {
    font-size: clamp(20px, 5vw, 32px);
    color: #FF6B00;
    font-family: 'HakgyoansimBunpilR', sans-serif;
    line-height: 1.35;
}
.subType1 .content .point-box-small {
    font-size: clamp(17px, 2vw, 24px);
    color: #FF6B00;
    font-family: 'HakgyoansimBunpilR', sans-serif;
    /* padding-top: clamp(50px, 8vw, 100px); */
}
/* 큰따옴표 아이콘 */
.flex-bigMark {
    display: flex;
    justify-content: space-between;
    align-self: start;
    gap: 10px;
    max-width: 1080px;
    margin: auto;
}
#container .sub-content-section .flex-bigMark .point-box {
    padding-top: 0;
}
.flex-bigMark .mark {
    width: 50px;
    height: 38px;
}
.txtPoint .caption {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 8px;
}
.subType1 .description {
    text-align: left;
}
.subType1 .description.tc {
    text-align: center;
}
.subType1 .content  .description.mt-4 {
    margin-top: 40px;
}
.subType1 .content  .description.mb-4 {
    margin-bottom: 40px;
}

@media (max-width: 1280px) {
    .content .description {
        max-width: 80%;
    }
    .news .content .description {
        max-width: none;
        /* margin: auto; */
    }
    #container .news .step .description.mid {
        margin: 0 auto;
    }
}
@media (max-width: 767px) {
    .content .description {
        max-width: 100%;
    }
    .subType1 .menu-title {
        font-size: clamp(12px, 2vw, 20px);
    }
    .subType1 .title-wrapper .titleBg {
        /* max-width: clamp(150px,11vw,200px); */
    }
    .subType1 .title-wrapper .title {
        font-size: clamp(20px, 2vw, 32px);
        /* font-size: clamp(25px, 2vw, 32px); */
    }
    .flex-bigMark .mark {
        width: 20px;
        height: 15px;   
        /* margin-top: 20px; */
    }
}



/* 스페셜 스토리 */
.sub-content-section .smallImg {
    max-width: 1240px;
    margin: 0 auto;
    width: 50%;
}
#specialStory .caption.mPosit1{
    display: block;
    margin-top: -3.5%;
}
/* 기획특집:75주년인물 */
#character .bgTitle {
    position: relative;
}
#character .point-box {
    position: absolute;
    top: 0;
    left: 0;
}
#character .point-box .black-text {
    display: block;
    line-height: 1.4;
    margin-top: 8px;
}
.subType1 .title-wrapper .titleBgType1 {
    max-width: clamp(160px, 17vw, 310px);
    width: 100%;
    margin: auto;
}
.subType1 .title-wrapper .titleBgType2 {
    max-width: clamp(220px, 17vw, 310px);
    width: 100%;
    margin: auto;
}
.subType1 .bgTxt-wrap {
    position: relative;
    width: 100%;
    width: auto;
    margin: 0 auto;
}
.subType1 .bunpil.bgTxt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(15px, 2vw, 24px);
    width: 80%;
    line-height: 1.5;
}
.subType1 .bunpil.bgTxt1,
.subType1 .bunpil.bgTxt2 {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: clamp(15px, 2vw, 24px);
    width: 80%;
    line-height: 1.5;
}
.character .bgTitle.bottom .point-box {
    color: #000;
}
.character .bgTitle.bottom .black-text {
    display: block;
}
/* 부분 공통스타일 */
#container .sub-content-section.subType2-inner {
    margin-bottom: 0;
}
#container .description2.sub-content-section {
    margin-top: 40px;
}
#container .sub-content-section .description.mt-100 ,
.mt-100 {
    margin-top: clamp(50px, 6vw, 100px);
}
#container .sub-content-section .description.mb-100,
.mb-100 {
    margin-bottom: clamp(50px, 6vw, 100px);
}
.subType1 .content .description.txtPoint {
    max-width: none;
}
/* 후원자이야기 */
/* 별첨 */
#patron .supWrap {
    padding-top: 10px;
    border-top: 1px solid #808080;
}
#patron .supWrap .supName,
#patron .supWrap .supDesc {
    color: #808080;
    font-size: 13px;
    letter-spacing: -1px;
}
#patron .supWrap .supName {
    font-weight: 600;
}
/* 후원자 참여 이야기 */
.main .bg.participation .btn02_area {
    width: fit-content;
    margin: auto;
}
/* 노트 */
#participation .note.bgTxt-wrap {
    position: relative;
    max-width: 1080px;
}
/* #participation .note.bgTxt-wrap .bgTxt {
    background: rgb(0, 255, 55);
    width: 100%;
    
} */
#participation .note.bgTxt-wrap .bgTxt-inner {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -58%);
    text-align: center;
    width: 80%;
}
#participation .note .bgTxt-innerWrap {

}
#participation .note .bgTxt-innerWrap .f-48 {
    font-size: clamp(25px, 2vw, 48px);
    line-height: 1.4;
}
#participation .note .f-24 {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.2;
    font-weight: 700;
}
#participation .noteList-wrap {

}
#participation .noteList-wrap .description.mt-2 {
    margin-top: 20px;
}
#participation .noteList-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    margin-top: 35px;
}
#participation .noteList-inner {

}
#participation .noteList-inner .f-20 {
    font-size: clamp(15px, 2vw, 20px);
    line-height: 1.4;
}
#participation .noteList-inner .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #FF6B00;
    margin: auto;
    margin-bottom: 5px;
}
#participation .noteImg-wrap {
}
#participation .noteImg-wrap .caption.black,
.participation .caption.black {
    color: #000;
    text-align: center;
}
#container .content-section.participation .sub-content-section {
    margin-bottom: 40px;
}
/* 높이나는 갈매기 */
#seagull .characterBubble {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
.subType1 .title-wrapper .titleBg.seagull {
    max-width: clamp(150px, 13vw, 235px);
    width: 100%;
    margin: auto;
}
.subType1 #seagull .bunpil.bgTxt1 {
    width: 90%;
    transform: translate(-48%, -50%);
}
.subType1 #seagull .bunpil.bgTxt1.position1 {
    top: 45%;
}

/* 현장이야기 */
.subType1 .title-wrapper .subT {
    font-size: 18px;
}
.sub-content-section .flexBox {  
    display: flex;
    justify-content: space-between;
    gap: clamp(10px, 2vw, 20px);
}
@media (max-width: 1340px) {
    .subType1 .title-wrapper .titleBgType1 {
        max-width: 240px;
    }
}

@media (max-width: 900px) {
    /* 현장이야기 */
    .subType1 .title-wrapper .title .mob ,
    .subType1 .title-wrapper .subT .mob {
        display: block;
    }
    .subType1 .title-wrapper .subT {
        line-height: 1.3;
        margin-top: 8px;
        display: block;
    }
}

@media (max-width: 681px) {
    .subType1 .bunpil.bgTxt1.position1 {
        top: 45%;
    }
}
@media (max-width: 767px) {
    /* 스페셜 스토리 */
    .sub-content-section .smallImg {
        width: 100%;
    }
    .txtPoint .caption {
        font-size: 12px;
    }
    /* 기획특집:75주년인물 */
    .subType1 .title-wrapper .titleBgType1 {
        max-width: clamp(160px, 29vw, 220px);
    }
    .subType1 .title-wrapper .titleBgType2 {
        max-width: clamp(150px, 29vw, 220px);
    }
    #container #character.sub-content-section .bgTitle .img {
        margin-left: 30%;
        width: 70%;
    }
    .subType1 .content .point-box {
        font-size: clamp(20px, 4vw, 25px);
    }
    #container .black-text {
        font-size: clamp(15px, 3vw, 20px);
    }
    /* 후원자 참여이야기 */
    #participation .noteList-wrap {
        margin-top: 30px;
    }
    #participation .noteList-flex {
        flex-direction: column;
        gap: 10px;
    }
    #participation .noteList-wrap .description.mt-2 {
        margin-top: 0;
    }
    #participation .noteImg-wrap .double-wrap.mt-4 {
        margin-top: 8px;
    }
    #participation .noteList-flex {
        margin-top: 10px;
    }
    /* 높이나는 갈매기 */
    #seagull .characterBubble {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }
    #seagull .characterBubble .bgImg-wrap img {
        width: 130px;
    }
    #container #seagull.sub-content-section .bgTxt-wrap .img {
        width: 80%;
    }
    .subType1 #seagull .bunpil.bgTxt1 {
        top: 50%;
    }
    .subType1 .title-wrapper .titleBg.seagull {
        max-width: clamp(116px, 20vw, 150px);
    }

    /* 현장이야기 */
    .subType1 .title-wrapper .subT {
        font-size: 12px;
    }
    .subType1 .title-wrapper .subT .mob {
        display: none;
    }
    #container .description2 {
        font-size: 12px;
    }
}
@media (max-width: 664px) {
    #seagull .bgTxt1 .mob480 {
        display: block;
    }
    #container #seagull.sub-content-section .bgTxt-wrap .img {
        width: 100%;
    }
    #seagull .web2 {
        display: none;
    }
}
@media (max-width: 480px) {
    .subType1 .bunpil.bgTxt1 {
        top: 45%;
    }
    .subType1 .bunpil.bgTxt2 {
        top: 40%;
    }
    #participation .note.bgTxt-wrap .bgTxt-inner {
        width: 90%;
    }
    #container .sub-content-section .img-double.flex480 {
        flex-direction: column;
        gap: 40px;
    }
}