body{margin: 0; padding: 0;}
*{box-sizing: border-box; font-family: Microsoft JhengHei;}

.stageShow{display: block; width: 100%; color: red; text-align: center;}

button{outline: none;}

.screenWrap{display: flex; flex-direction: column; width: 100%; min-height: 100dvh;}
.mainHeader{display: flex; align-items: center; justify-content: space-between; height: var(--headerHeight); background: var(--mainColor); padding: var(--pcPadding); position: sticky; top: 0; left: 0; z-index: 999;}
.mainHeader .mainLogo{display: block; height: 80%;}
.mainHeader .mainLogo img{display: block; height: 100%;}

.mainHeader .mainMenu{display: flex; align-items: center; margin: 0; padding: 0;}
.mainHeader .mainMenu>li{display: block; list-style: none; padding: 0 15px 0 0; margin: 0 15px 0 0; position: relative;}
.mainHeader .mainMenu>li::after{content: ''; display: block; width: 2px; height: 50%; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); background: #fff;}
.mainHeader .mainMenu>li:last-child{padding: 0 0 0 0; margin: 0 0 0 0;}
.mainHeader .mainMenu>li:last-child::after{display: none;}
.mainHeader .mainMenu>li>a{display: block; text-decoration: none; color: #fff; font-size: var(--BigFontSize); font-weight: bolder; transition: .3s; cursor: pointer; padding: 15px 0;}
.mainHeader .mainMenu>li>a.act, .mainHeader .mainMenu>li>a:hover{color: #d2bc8f; transition: .3s;}

.mainHeader .mainMenu>li>.subMenu{display: none; width: fit-content; white-space: nowrap; padding: 15px; margin: 0; padding: 30px 15px; list-style: none; position: absolute; top: 100%; left: 50%; transform: translateX(calc(-50% - 7.5px)); background: #fff; opacity: 0; transition: .5s;}
.mainHeader .mainMenu>li>.subMenu>li{margin: 0 0 15px 0;}
.mainHeader .mainMenu>li>.subMenu>li:last-child{margin: 0;}
.mainHeader .mainMenu>li>.subMenu>li>a{text-decoration: none; color: #3f597d; font-weight: bolder;}
.mainHeader .mainMenu>li>.subMenu>li>a.act{color: #d2bc8f;}

.mainHeader .mainMenu>li>a:hover+.subMenu, .mainHeader .mainMenu>li>.subMenu:hover{display: block!important; opacity: 1!important; transition: .5s;}

.mainHeader .rwdMenu{display: none;}

.bannerBlock{display: block; width: 100%; padding-bottom: 30%; background: url('../img/banner.jpg') no-repeat center top / cover; animation: fadeIn 5s forwards; position: relative;}
.bannerBlock h1{display: block; width: fit-content; font-size: var(--ExtraFontSize); color: #fff; position: absolute; top: 50%; left: 20%; transform: translate(-50%, -50%); margin: 0; letter-spacing: 15px;}
.bannerBlock h1::before {content: attr(data-storke); position: absolute; z-index: -1; -webkit-text-stroke: 10px #2278d2; text-stroke: 10px #2278d2;}
.bannerBlock h1::after {content: attr(data-storke); position: absolute; top: 5%; left: 2%; white-space: nowrap; z-index: -2; -webkit-text-stroke: 10px #94c8ff; text-stroke: 10px #94c8ff;}

.screenWrap article{display: flex; flex-direction: column; width: 100%; flex: 1 1 auto; padding: 0 0; position: relative; z-index: 2;}
.screenWrap article .splitBlock{display: block; width: 100%; max-width: 1300px; margin: 0 auto; padding: 80px 0 160px 0;}
.screenWrap article .splitBlock .row{display: flex; align-items: center; margin: 0 auto 80px auto;}
.screenWrap article .splitBlock .row:last-child{margin: 0 auto;}
.screenWrap article .splitBlock .row.row-reverse{flex-direction: row-reverse;}
.screenWrap article .splitBlock .picBlock{display: block; width: 60%; margin: 0 6% 0 0;}
.screenWrap article .splitBlock .picBlock .picBlockWrap{width: 100%; padding-bottom: 56.25%; background-repeat: no-repeat; background-position: center center; background-size: 200%; animation: zoomIn 5s forwards;}

@keyframes zoomIn {
    0%{background-size: 200%;}
    100%{background-size: 100%;}
}

.screenWrap article .splitBlock .textBlock{display: block; width: 40%; border: 5px solid var(--mainColor); border-radius: 80px; padding: 2% 5%; position: relative; font-size: var(--BigFontSize); color: #333333;}
.screenWrap article .splitBlock .textBlock .arrow{display: block; width: 12%; position: absolute; top: 9.6%; left: -9.8%;}
.screenWrap article .splitBlock .textBlock h6{display: block; font-size: var(--LargeFontSize); padding: 0 0 30px 0; margin: 0 0 30px 0; position: relative;}
.screenWrap article .splitBlock .textBlock h6::after{content: ''; display: block; width: 100%; height: 1px; background: #666666; position: absolute; bottom: -0.5px;}
.screenWrap article .splitBlock .textBlock h6 span{display: block; width: 100%; text-align: center; letter-spacing: 3px; text-indent: 3px; font-weight: bolder;}
.screenWrap article .splitBlock .textBlock h6 span:first-child{color: #ff931e;}
.screenWrap article .splitBlock .textBlock h6 span:last-child{color: var(--mainColor);}
.screenWrap article .splitBlock .textBlock p{display: block; width: 100%; text-align: justify;}

.screenWrap article .splitBlock .row.row-reverse .arrow{display: block; width: 12%; position: absolute; top: 12.1%; left: auto; right: -9.8%; transform: scaleX(-1);}
.screenWrap article .splitBlock .row.row-reverse .picBlock{margin: 0 0 0 6%;}

.screenWrap article .splitBlock .textBlock .donateCTA{position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); text-decoration: none;}
.screenWrap article .splitBlock .textBlock .donateCTA span{display: block; width: fit-content; background: var(--mainColor); color: #fff; font-size: var(--BigFontSize); text-decoration: none; padding: 10px 20px; border-radius: 10px; position: relative; z-index: 2; transition: .5s;}
.screenWrap article .splitBlock .textBlock .donateCTA::after{content: ''; display: block; width: 100%; height: 100%; border-radius: 10px; position: absolute; top: 0; left: 0; transform: translate(0%, 15%); background: #3b4b63; z-index: 1;}
.screenWrap article .splitBlock .textBlock .donateCTA span:hover{transform: translate(0%, 15%); transition: .5s;}

.screenWrap article .stepBlock{display: block; width: 100%; padding: 80px 0; background-color: #959c94; position: relative;}

.screenWrap article .stepBlock h2{display: block; width: fit-content; font-size: var(--LargeFontSize); border: 3px solid var(--mainColor); color: var(--mainColor); background: #fff; border-radius: 50px; padding: 15px 30px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; white-space: nowrap;}

.screenWrap article .stepBlock h3{display: block; width: fit-content; white-space: nowrap; font-size: var(--LargeFontSize); color: var(--mainColor); background: #fff; border-radius: 50px; padding: 15px 30px; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); margin: 0;}

.screenWrap article .stepBlock .stepBlockWrap{display: block; width: 100%; max-width: 1300px; margin: 0 auto;}
.screenWrap article .stepBlock .stepBlockWrap .row{display: flex; align-items: center; gap: 30px; width: 100%; padding: 30px 80px; background: #fff; border-radius: 30px; margin: 0 0 60px 0;}
.screenWrap article .stepBlock .stepBlockWrap .row:last-child{margin: 0;}
.screenWrap article .stepBlock .stepBlockWrap .row .leftBlock{display: block; width: fit-content;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock{display: block;}

.screenWrap article .stepBlock .stepBlockWrap .row .leftBlock h6{display: flex; align-items: center; gap: 15px; color: var(--mainColor); font-size: var(--LargeFontSize); margin: 0 0 30px 0;}
.screenWrap article .stepBlock .stepBlockWrap .row .leftBlock h6 span{color: #fff; background: var(--mainColor); border-radius: 50%; padding: 1% 5.3%;}
.screenWrap article .stepBlock .stepBlockWrap .row .leftBlock h6 img{display: block; height: 50px; width: auto;}
.screenWrap article .stepBlock .stepBlockWrap .row .leftBlock img{display: block; width: 250px;}

.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock h6{display: block; width: fit-content; background: var(--mainColor); color: #fff; font-size: var(--LargeFontSize); padding: 5px 15px; border-radius: 30px; margin: 0 0 10px 0;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists{display: block; width: 100%; margin: 0 0 15px 0;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists p{display: block; width: 100%; margin: 0; font-size: var(--BigFontSize); color: #4d4d4d; letter-spacing: 1px; text-indent: 1px; line-height: 30px;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists p i{color: #f15a24; font-style: normal;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists .disc{display: flex; align-items: flex-start; font-size: 20px; color: #4d4d4d; letter-spacing: 1px; text-indent: 1px; line-height: 30px;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists .disc span{display: flex; align-items: center; white-space: nowrap;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists .disc span::before{content: ''; width: 5px; height: 5px; background: #4d4d4d; border-radius: 50%; flex: 0 0 auto; margin: 0 5px 0 0;}
.screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists .disc p{margin: 0;}

.screenWrap article .donosWall{display: flex; flex-direction: column; width: 100%; padding-bottom: 40%; flex: 1 1 auto; background: url('../img/donors_banner.png') no-repeat right 10% / auto 101%; position: relative;}
.screenWrap article .donosWall.charityStyle{background-image: url('../img/charity_banner.png');}
.screenWrap article .donosWall .list{display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 60px; width: 40%; height: 100%; flex: 1 1 auto; position: absolute; top: 0; left: 5%; overflow-y: auto; padding: 80px 0;}

.screenWrap article .donosWall .list h1{ display: block; width: 100%; color: #465b7e; font-size: 2.5rem; text-align: center; margin: 0;}
.screenWrap article .donosWall .list ul{display: flex; width: 100%; flex-direction: column; align-items: center; margin: 0; padding: 0; gap: 20px;}
.screenWrap article .donosWall .list ul li{display: block; width: fit-content;}
.screenWrap article .donosWall .list ul li a{display: flex; align-items: center; gap: 25px; width: fit-content; text-align: center; background: #465b7e; color: #fff; font-size: 1.5rem; font-weight: bolder; text-decoration: none; padding: 8px 15px; border-radius: 10px;}
.screenWrap article .donosWall .list ul li a::after{content: ''; display: block; width: 18px; height: 20px; background: url('../img/icons/listarrow.png') no-repeat center center / 100% 100%;}
.screenWrap article .donosWall .list ul li:nth-child(2n) a{background: #7696c4;}

.screenWrap article .donors{display: block; width: 100%; max-width: 1300px; padding: 80px 30px; margin: 0 auto;}
.screenWrap article .donors h1{display: block; width: 100%; text-align: center; color: #465b7e; font-size: 30px; margin: 0 0 30px 0;}
.screenWrap article .donors h1::after{content: ''; display: block; width: 100%; height: 15px; background: #465b7e; margin: 15px 0 0 0;}

.screenWrap article .donors .tableWrap{display: block; width: 100%; overflow-x: auto;}

.screenWrap article .donorsTable{display: grid; grid-template-columns: 120px auto 100px 200px auto auto; width: 100%; max-width: 1300px; margin: 0 auto;}
.screenWrap article .donorsTable div{font-size: 16px; padding: 10px 10px; text-align: center; white-space: nowrap; border-bottom: 1px solid #808080; border-left: 1px solid #808080; background-color: #eeeeee;}
.screenWrap article .donorsTable div:nth-child(6n){border-right: 1px solid #808080;}

.screenWrap article .donorsTable .head{background: #808080; font-weight: bolder; color: #fff; border-top: 1px solid #808080;}

/* 每 6 個為一組，取偶數列 */
.donorsTable > div:nth-child(12n - 5),
.donorsTable > div:nth-child(12n - 4),
.donorsTable > div:nth-child(12n - 3),
.donorsTable > div:nth-child(12n - 2),
.donorsTable > div:nth-child(12n - 1),
.donorsTable > div:nth-child(12n) {
  background-color: #ffffff!important;
}

.screenWrap article .timeLineBlock{display: block; width: 100%; padding: 30px 0 10% 0; background: url('../img/bigmoments.png') no-repeat center bottom 5% / 98% auto;}

.screenWrap article .timeLineBlock .titleBlock{display: flex; align-items: center; justify-content: space-evenly; gap: 50px; position: relative;}
.screenWrap article .timeLineBlock .titleBlock::before{content: ''; display: block; width: 100%; height: 2px; background: var(--mainColor);}
.screenWrap article .timeLineBlock .titleBlock::after{content: ''; display: block; width: 100%; height: 2px; background: var(--mainColor);}
.screenWrap article .timeLineBlock .titleBlock h2{display: block; width: fit-content; white-space: nowrap; font-size: 40px; color: #fff; margin: 0; padding: 0; letter-spacing: 15px; text-indent: 15px; flex: 0 0 auto; text-align: center; position: relative;}
.screenWrap article .timeLineBlock .titleBlock h2::before {content: attr(data-storke); position: absolute; left: 0; z-index: -1; letter-spacing: 15px; -webkit-text-stroke: 6px var(--mainColor); text-stroke: 6px var(--mainColor);}
.screenWrap article .timeLineBlock .line{content: ''; display: block; width: 100%; height: 2px; background: url('../img/icons/line.svg') repeat-x center center / auto 100%; position: absolute; top: 240px; left: 0; z-index: -1;}

.screenWrap article .timeLineBlock .timeLineContent{display: flex; align-items: flex-start; gap: 50px; overflow: hidden; padding: 80px 30px 10px 30px; position: relative;}
.screenWrap article .timeLineBlock .timeLineContent .timeBlock{display: block; width: auto; max-width: 350px; flex: 0 0 auto;}

.screenWrap article .timeLineBlock .timeLineContent .timeBlock .time{display: block; width: fit-content; margin: 0 auto; font-size: 30px; font-weight: bolder; color: #666666;}

.screenWrap article .timeLineBlock .timeLineContent .timeBlock .dot{display: block; width: 50px; height: 50px; background: url('../img/icons/timeline_dot.png') no-repeat center center / 100% 100%; margin: 15px auto;}

.screenWrap article .timeLineBlock .timeLineContent .timeBlock .content{display: block; width: 100%; background: rgba(234, 233, 211, 0.79); border-radius: 30px; overflow: hidden;}
.screenWrap article .timeLineBlock .timeLineContent .timeBlock .content .pic{display: block; width: 100%; padding-bottom: 56.25%; position: relative; overflow: hidden;}
.screenWrap article .timeLineBlock .timeLineContent .timeBlock .content img{display: block; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.screenWrap article .timeLineBlock .timeLineContent .timeBlock .content .text{display: block; width: 100%; padding: 0 15px 10px 15px;}
.screenWrap article .timeLineBlock .timeLineContent .timeBlock .content .text .textWrap{display: block; width: 100%; background: #fff; border-radius: 0 0 30px 30px; padding: 30px 5px; text-align: center; font-size: 20px; color: #666666; font-weight: bolder;}

.screenWrap article .momentsBlock{display: block; width: 100%; padding: 30px 0 0 0; background-color: #cde2fc;}
.screenWrap article .momentsBlock .titleBlock{display: flex; align-items: center; justify-content: space-evenly; gap: 50px; position: relative;}
.screenWrap article .momentsBlock .titleBlock::before{content: ''; display: block; width: 100%; height: 2px; background: var(--mainColor);}
.screenWrap article .momentsBlock .titleBlock::after{content: ''; display: block; width: 100%; height: 2px; background: var(--mainColor);}
.screenWrap article .momentsBlock .titleBlock h2{display: block; width: fit-content; white-space: nowrap; font-size: 40px; color: #fff; margin: 0; padding: 0; letter-spacing: 15px; text-indent: 15px; flex: 0 0 auto; text-align: center; position: relative;}
.screenWrap article .momentsBlock .titleBlock h2 span{position: relative; z-index: 2;}
.screenWrap article .momentsBlock .titleBlock h2::before {content: attr(data-storke); position: absolute; left: 0; z-index: 0; letter-spacing: 15px; -webkit-text-stroke: 6px var(--mainColor); text-stroke: 6px var(--mainColor);}

.screenWrap article .momentsBlock.momentsSwiper{display: block; width: 100%; overflow: hidden;}

.screenWrap article .momentsBlock .momentsContent{align-items: stretch; width: fit-content; padding: 30px 0px;}
.screenWrap article .momentsBlock .momentsContent .momentBlock{display: block; width: 450px; text-decoration: none; color: #000;}
.screenWrap article .momentsBlock .momentsContent .content{display: block; height: 100%; padding: 10px; background: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: .5s;}
.screenWrap article .momentsBlock .momentsContent .momentBlock:hover .content{box-shadow: 0 0 0px rgba(0, 0, 0, 0.3); scale: 0.98; transition: .5s;}
.screenWrap article .momentsBlock .momentsContent .content .pic{display: block; width: 100%; padding-bottom: 100%; position: relative; overflow: hidden; border-radius: 30px 30px 0 0;}
.screenWrap article .momentsBlock .momentsContent .content .pic img{display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.screenWrap article .momentsBlock .momentsContent .content .text h6{display: block; width: 100%; font-size: 20px; margin: 10px 0; min-height: 1.5em; line-clamp: 2; block-size: calc(1.5em * 2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5em;}
.screenWrap article .momentsBlock .momentsContent .content .text .textWrap{display: block; width: 100%; min-height: 1.5em; padding: 0 1rem; margin: 1rem 0; line-clamp: 3; block-size: calc(1.5em * 3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5em;}
.screenWrap article .momentsBlock .momentsContent .content .text i{display: block; width: 100%; text-align: right; font-style: normal; padding: 0 1rem; color: #c69c6d;}

.donorsAndCharity{display: flex; align-items: center; justify-content: space-evenly; padding: 80px 0;}
.donorsAndCharity a{display: block; width: 40%; max-width: 450px;}

.bottomText{display: block; width: fit-content; white-space: nowrap; font-size: var(--LargeFontSize); color: var(--mainColor); background: #fff; border-radius: 50px; padding: 15px 30px; transform: translate(0, 50%); margin: 0 auto;}

footer{display: grid; grid-template-columns: 50% 50%; row-gap: 10px; grid-template-rows: auto auto; width: 100%; padding: 30px 60px; background: var(--mainColor);}

footer p{display: block; width: 100%; color: #fff; font-size: 14px; margin: 0;}

footer .infoBlock .logo{display: block; height: 90px; width: fit-content;}
footer .infoBlock .logo img{display: block; height: 100%;}
footer .infoBlock .textBlock{display: block; width: 100%; padding: 0 0 0 0;}
footer .infoBlock .textBlock p{display: block; width: 100%; line-height: 25px;}

footer .othersBlock{display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end;}
footer .othersBlock .goTop{display: block; width: 40px; border: none; background: none; padding: 0; margin: 0; cursor: pointer; position: relative;}
footer .othersBlock .goTop img{display: block; width: 100%; position: relative; z-index: 2; transition: .5s;}
footer .othersBlock .goTop.fixed{position: fixed; bottom: 5%; right: 60px;}

footer .othersBlock .goTop:hover img{transform: translate(5px, 5px); transition: .5s;}
footer .othersBlock .goTop::after{content: ''; display: block; width: 100%; height: 100%; border-radius: 5px; position: absolute; top: 0; left: 0; transform: translate(5px, 5px); background: #3b4b63; z-index: 1;}

footer .othersBlock .socialMedias{text-align: right; margin: 30px 0 0 0;}
footer .othersBlock .buttons{display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin: 15px 0 0 0;}
footer .othersBlock .buttons a{display: block; width: 30px; height: 30px;}
footer .othersBlock .buttons a:hover img{transform: rotate(360deg); transition: .5s;}
footer .othersBlock .buttons a img{display: block; width: 100%; transition: .5s;}

footer .register{display: flex; width: 100%; align-items: flex-end; grid-column: span 2; flex: 0 0 auto;}
footer .register .group{width: 50%;}
footer .register .group p{width: 50%; text-align: left;}
footer .register p{width: 50%; text-align: right;}

:root{
    --mainColor: #465b7e;
    --pcPadding: 0 30px;
    --rwdPadding: 0 15px;

    --ExtraFontSize: 80px;
    --LargeFontSize: 25px;
    --BigFontSize: 18px;
    --normalFontSize: 16px;
    --littleFontSize: 14px;

    --headerHeight: 80px;
}

@media screen and (max-width: 875px){

    .mainHeader{height: 60px; padding: 5px 15px;}

    .mainHeader .mainMenu{display: none;}

    .mainHeader .rwdMenu{display: block; height: 80%; aspect-ratio: 1 / 1; background: #fff; position: relative; border: none; border-radius: 50%;}
    .mainHeader .rwdMenu i{display: block; width: 60%; height: 2px; background: var(--mainColor); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px;}
    .mainHeader .rwdMenu i:first-child{top: 30%; transform: translate(-50%, -50%); transition: .5s;}
    .mainHeader .rwdMenu.act i:nth-child(2){opacity: 1; transition: .5s; transition-delay: .5s;}
    .mainHeader .rwdMenu i:last-child{top: 70%; transform: translate(-50%, -50%); transition: .5s;}

    .mainHeader .rwdMenu.act i:nth-child(1){top: 50%; transform: translate(-50%, -50%) rotate(45deg); transition: .5s;}
    .mainHeader .rwdMenu.act i:nth-child(2){opacity: 0; transition: .5s;}
    .mainHeader .rwdMenu.act i:nth-child(3){top: 50%; transform: translate(-50%, -50%) rotate(-45deg); transition: .5s;}

    .mainHeader .mainMenu{display: flex; transform: translateX(100%); opacity: 0; flex-direction: column; align-items: center; justify-content: center; gap: 15px; width: 60%; height: calc(100dvh - 60px); position: fixed; top: 60px; right: 0; background: var(--mainColor); transition: .5s;}
    .mainHeader .mainMenu li{padding: 0 0 15px 0; width: 100%; margin: 0;}
    .mainHeader .mainMenu li a{font-size: 20px; width: fit-content; margin: 0 auto;}
    .mainHeader .mainMenu li::after{width: 30%; height: 1px; top: auto; right: auto; bottom: 0; left: 50%; transform: translateX(-50%)}

    .mainHeader .mainMenu.act{transform: translateX(0%); opacity: 1; transition: .5s;}

    .bannerBlock{padding-bottom: 50%;}
    .bannerBlock h1{left: 25%; letter-spacing: 3px;}
    .bannerBlock h1::before {content: attr(data-storke); position: absolute; z-index: -1; -webkit-text-stroke: 5px #2278d2; text-stroke: 5px #2278d2;}
    .bannerBlock h1::after {content: attr(data-storke); position: absolute; top: 5%; left: 2%; white-space: nowrap; z-index: -2; -webkit-text-stroke: 5px #94c8ff; text-stroke: 5px #94c8ff;}

    .screenWrap article .splitBlock{padding: 30px 15px 90px 15px;}
    .screenWrap article .splitBlock .row{flex-direction: column!important; gap: 15px;}
    .screenWrap article .splitBlock .picBlock{width: 100%; margin: 0;}
    .screenWrap article .splitBlock .row.row-reverse .picBlock{margin: 0;}
    .screenWrap article .splitBlock .textBlock{width: 100%; padding: 10%;}
    .screenWrap article .splitBlock .textBlock .arrow{display: none!important;}
    .screenWrap article .splitBlock .textBlock .donateCTA{right: 10%; left: auto; transform: translate(0, 50%);}
    .screenWrap article .stepBlock{padding: 40px 15px;}
    .screenWrap article .stepBlock .stepBlockWrap .row{flex-direction: column; padding: 30px 30px; gap: 0px; margin: 0 0 15px 0;}
    .screenWrap article .stepBlock .stepBlockWrap .row .leftBlock{margin: 0 0 30px 0;}
    .screenWrap article .stepBlock .stepBlockWrap .row .leftBlock h6{justify-content: center;}
    .screenWrap article .stepBlock .stepBlockWrap .row .leftBlock h6 img{width: auto!important; margin: 0!important;}
    .screenWrap article .stepBlock .stepBlockWrap .row .leftBlock img{width: 50%; margin: 0 auto;}
    .screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists .disc{flex-direction: column; font-size: 18px;}
    .screenWrap article .stepBlock .stepBlockWrap .row .rightBlock .lists .disc p{padding-inline-start: 2em;}
    .screenWrap article .stepBlock h3{font-size: 14px;}

    .screenWrap article .donosWall{padding-bottom: 150%; background-position: 50% 10%;}
    .screenWrap article .donosWall .list{width: 100%; height: 100%; top: 0; left: 0; padding: 30px; gap: 15px;}
    .screenWrap article .donosWall .list h1{font-size: 2rem;}
    .screenWrap article .donosWall .list ul li a{font-size: 1.5rem;}

    footer{display: flex; padding: 30px 60px 30px 15px; flex-direction: column; gap: 20px; position: relative; z-index: 1;}
    footer .othersBlock .goTop{position: absolute; top: 15%; right: 10px;}
    footer .infoBlock .logo{width: 80%; height: auto; margin: 0;}
    footer .infoBlock .logo img{width: 100%;}
    footer .infoBlock .textBlock{padding: 0;}
    footer .othersBlock{flex-direction: row-reverse; gap: 20px; align-items: center; justify-content: flex-end;}
    footer .othersBlock .socialMedias{text-align: left; margin: 0;}
    footer .register{flex-direction: column; width: 100%;}
    footer .register .group{width: 100%; text-align: left;}
    footer .register .group p{width: 100%; text-align: left; margin: 0 0 15px 0;}
    footer .register p{width: 100%; text-align: left;}

    :root{
        --mainColor: #465b7e;
        --pcPadding: 0 30px;
        --rwdPadding: 0 15px;
    
        --ExtraFontSize: 30px;
        --LargeFontSize: 20px;
        --BigFontSize: 16px;
        --normalFontSize: 14px;
        --littleFontSize: 12px;
    
        --headerHeight: 80px;
    }
}