/* 공통 */
.desc {color: #575a66;}
.date {color: #a1a4b3;}

.moreBtn {width: 14rem; background: var(--pointcolor); color: #fff98e; padding: 1rem 2rem; align-items: center; justify-content: space-between; display: flex; border-radius: .5rem; transition: .3s;}
.moreBtn:hover {background: #e2edf8; color: var(--pointcolor);}
.moreBtn i {font-size: 1.5rem;}

.ytbBtn {width: 14rem; background: #e02f2f; color: #fff; padding: 1rem 2rem; justify-content: space-between; align-items: center; display: flex; border-radius: .5rem;}
.ytbBtn i {font-size: 1.25rem; margin-top: 2px;}

@media (max-width:990px) {
    .moreBtn {width: 18rem;}
    .moreBtn i {font-size: 2rem;}

    .ytbBtn {width: 18rem;}
    .ytbBtn i {font-size: 1.75rem;}
}

@media(max-width:990px) {
    .font-44 {font-size: 3.25rem;}
    .font-32 {font-size: 3rem;}
    .font-26 {font-size: 2.1875rem;}
    .font-24 {font-size: 1.875rem;}
    .font-20 {font-size: 1.875rem;}
    .font-18 {font-size: 1.6875rem;}
    .font-16 {font-size: 1.5rem;}
    .font-14 {font-size: 1.3125rem;}

    .sectionMenu .font-16 {font-size: 1.5rem;}
}

.sectionMenu p {width: fit-content; padding: .375rem 1rem .25rem; background: #e2edf8; color: var(--pointcolor); border-radius: 4px;}

@media(max-width:990px) {
    .sectionMenu p {padding: .5rem 1rem .25rem;}
}


/* 메뉴 */
header#renewal {position: sticky; left: 0; transform: translate(0); top: 0; width: 100%; padding: 1rem 0; z-index: 10; background: #fff;}
header#renewal .container {display: flex; align-items: center; justify-content: space-between;}

header#renewal .gnb {display: flex; align-items: center; gap: 3rem;}
header#renewal .gnb .point {display: flex; gap: .5rem; align-items: center; width: fit-content; padding: .25rem 1rem; background: var(--pointcolor); color: #fff98e; border-radius: 100px;}
header#renewal .gnb .point img {width: 1rem;}

header#renewal .logo {transform: translateY(-.25rem);}

header#renewal .hamburger {width: 2.75rem; height: 2rem; position: relative;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);   -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; display: none;}
header#renewal .hamburger span {display: block; position: absolute; height: 2px; width: 100%; background: var(--pointcolor); opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}

header#renewal .hamburger span:nth-child(1) {top: 0px;}
header#renewal .hamburger span:nth-child(2),
header#renewal .hamburger span:nth-child(3) {top: .75rem;}
header#renewal .hamburger span:nth-child(4) {top: 1.5rem;}

header#renewal.on .hamburger span:nth-child(1) {top: 1rem; width: 0%; left: 50%;}
header#renewal.on .hamburger span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
header#renewal.on .hamburger span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
header#renewal.on .hamburger span:nth-child(4) {top: 1rem; width: 0%; left: 50%;}

@media(max-width:1240px) {
    header#renewal .gnb {gap: 2rem;}
}

@media(max-width:990px) {
    header#renewal .logo img {width: 220px;}
    header#renewal .gnb {height: calc(100dvh - var(--renewal-header-height, 90px)); z-index: 9; position: absolute; left: 0; top:  var(--renewal-header-height, 90px); background: #fff; width: 100%; text-align: center; font-size: 3.125rem; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; padding-bottom: 20%;}
    header#renewal.on .gnb {opacity: 1; visibility: inherit;}
    header#renewal .gnb .point {margin: auto; padding: .625rem 2rem; gap: 1.25rem;}
    header#renewal .gnb .point img {width: 2rem;}

    header#renewal .hamburger {display: block;}
}

@media(max-width:500px) {
    header#renewal .gnb {font-size: 2.8125rem;}
}

/* 메인 */
#mainSlide .bg img {aspect-ratio: 3 / 1.35; object-fit: cover;}
#mainSlide .swiper-slide {position: relative;}
#mainSlide .textbox  {position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;}
#mainSlide .textbox.right {left: 50%;}
#mainSlide .textbox.center {left: 50%; transform: translate(-50%, -50%); text-align: center;}

#mainSlide .textbox .name b {letter-spacing: .2em;}

@media(min-width:1921px) {
    #mainSlide .bg img {aspect-ratio: 2.5 / 1;}
}

@media(max-width:1024px) {
    #mainSlide .textbox.right {left: 45%;}
}

@media(max-width:990px) {
    #mainSlide .textbox {left: 50% !important; transform: translate(-50%, 0) !important; top: 10%; width: 90%; color: #fff; text-align: center;}

    #mainSlide .bg img {aspect-ratio: 1 / 1.125;}

    #mainSlide .textbox .name b {letter-spacing: 0;}
}

@media(max-width:500px) {
    #mainSlide .bg img {height: 90vh;}
}

#mainBg {background-image: url("/img/renewal/main_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center;}
#mainBg section {max-width: 1880px; width: 95%; margin: auto;}

#infor .logo {width: 26rem;}

@media(max-width:990px) {
    #infor .cont {flex-direction: column;}
    #infor .cont .box {width: 100%;}
    #infor .cont .textbox {margin-top: 0;}
    #infor .cont .imgbox {order: 2; margin-top: 3.5rem; transform: translateY(1rem);} 
    #infor .cont .imgbox img {margin: auto;}
}

#activity {background: #fff; border-radius: 3rem; padding: 3.75rem 0; position: relative; z-index: 1;}
#activity .contWrap {display: flex; justify-content: space-between;}
#activity .imgbox {border-radius: 1rem; overflow: hidden;}
#activity .textbox p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#activity .line {width: 100%; height: 1px; background: #e7e7e7;}

#activity .list li {margin-top: 1rem;}
#activity .list p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#activity .report .imgbox {position: relative;}
#activity .report .imgbox:after {position: absolute; left: 0; bottom: 0; width: 100%; height: 15rem; content: ""; background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.9) 100%);}
#activity .report .textbox {color: #fff; position: absolute; left: 1.5rem; width: calc(100% - 3rem); bottom: 1rem; z-index: 2;}
#activity .report .textbox p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

@media(max-width:1680px) {
    #activity .container {width: 95%;}
}

@media(max-width: 1580px) {
    #activity .contWrap {flex-direction: column;}
    #activity .cont {width: 100%;}

    #activity .btns {text-align: center;}
    #activity .borad {margin-top: 3.5rem; display: flex; gap: 1.5rem;}
    #activity .borad .box {width: 50%;}
    #activity .line {display: none;}
}

@media(max-width: 990px) {
    #activity .container {width: 90%;}
    #activity .borad {flex-direction: column; gap: 0;}
    #activity .borad .box {width: 100%;}
    #activity .line {display: block; margin-top: 2.25rem; margin-bottom: 2.25rem;}

    #activity .date.mt-5 {margin-top: .625rem;}

    #activity .report .textbox  {left: 1.5rem; bottom: 1.5rem; width: calc(100% - 4rem);}
} 

#proposal {margin-top: 1.5rem !important;}
#proposal .box {background: #fff; border-radius: 3rem; padding: 3.75rem 0;}
#proposal .box .wrap {max-width: 675px; width: 100%; margin: auto;}

#proposal .bottom {display: flex; justify-content: space-between; align-items: center;}

@media(max-width:1680px) {
    #proposal .box .wrap {max-width: 100%; width: 90%;}
}

@media(max-width:990px) {
    #proposal {width: 90%;}
    #proposal .bottom {flex-direction: column; align-items: flex-start; gap: 2rem;}
}

#shorts .section-left {display: flex; align-items: center;}

#shorts .title .desc {display: flex; align-items: flex-start; gap: .625rem;}
#shorts .title .desc img {width: 1.25rem; transform: translateY(5px);}

#shorts .imgbox {border-radius: 1rem; overflow: hidden; }
#shorts .imgbox img {aspect-ratio: 9 / 16; object-fit: cover; height: 100%;}
#shorts .swiper-wrapper {align-items: center;}
#shorts .swiper-slide {transition: transform .3s; margin-bottom: 5rem; cursor: pointer;}
#shorts .swiper-slide:nth-child(2n) {transform: translateY(5rem);}

#shorts .textbox p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

@media(max-width:1240px) {
    #shorts .section-left {flex-direction: column; gap: 5rem;}
    #shorts .title,
    #shorts .cont {width: 100%;}

    #shorts .title {text-align: center; padding-right: 10%;}
    #shorts .title a {margin: 3.75rem auto 0;}
    #shorts .title .desc {justify-content: center; flex-direction: column; align-items: center; gap: 1rem;}
    #shorts .title .desc img {margin: auto;}

    #shorts .swiper-wrapper {align-items: flex-start;}
}

@media(max-width:990px) {
    #shorts .title .desc img {width: 2rem;}
}