/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap'); */


/*////////////////////////////// 首頁 //////////////////////////////*/

html,
body {
    overflow-x: hidden;
    font-family: 'Microsoft JhengHei', '微軟正黑體', Arial, sans-serif;
    font-weight: 300;
    height: 100%;
}

* {
    /* outline: 1px solid red; */
}

.wrapper {
    min-height: 80%;
    display: flex;

    flex-direction: column;
    margin: 0;
    overflow: hidden;

    position: relative;


    background-color: #ea545d;

    /* background-image: url(../img/banner_bg_1.svg); */

}

.wrapper::before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(../img/banner_bg_1.svg);
    background-size: 100%;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.1;
}


.navbar {
    position: fixed;
    z-index: 999;
    width: 100%;
    padding: 0;
}

.navbar .menu_box {
    width: 100%;

    position: relative;
}

.navbar .menu_box .menu {
    background-color: #f6f6f6f3;
    width: 100%;
    display: flex;
    border-radius: 0 0 20px 20px;
}

.navbar .menu_box .menu li {
    flex-grow: 1;
    text-align: center;
}

.navbar .menu_box .menu li a {
    color: #3B4046;
    padding: 25px 5px;
    transition: 0.3s;
    border-radius: 0 0 20px 20px;

    position: relative;
    overflow: hidden;
}

.navbar .menu_box .menu li a:hover {
    background: linear-gradient(45deg, #00a0e9 0%, #44bdf5 100%);
    /* background-color: #00a0e9; */
    color: #fff;
    box-shadow: 1px 1px 3px #3b40461a;
}

.navbar .menu_box .menu li a p {
    margin: 0;
    transition: 0.3s;
    font-size: 1.2rem;
}

.navbar .menu_box .menu li a:hover p {
    transform: scale(1.05) translateY(-3px);
    font-weight: 500;
}

.navbar .menu_box .menu li a .dots {
    width: 70px;
    display: flex;
    justify-content: space-between;

    position: absolute;
    left: calc(50% - 38px);
    margin-top: 3px;
}

.navbar .menu_box .menu li a .dots div {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ea545d;
    border: 1px solid #f5e928;
    opacity: 0;
}

.navbar .menu_box .menu li a:hover .dots {
    transform: translateY(-2px);
}

.navbar .menu_box .menu li a:hover .dots div:nth-of-type(1) {
    animation: fade 1s ease-in-out alternate forwards;
    animation-delay: 0s;
}

.navbar .menu_box .menu li a:hover .dots div:nth-of-type(2) {
    animation: fade 1s ease-in-out alternate forwards;
    animation-delay: 0.1s;
}

.navbar .menu_box .menu li a:hover .dots div:nth-of-type(3) {
    animation: fade 1s ease-in-out alternate forwards;
    animation-delay: 0.2s;
}

.navbar .menu_box .menu li a:hover .dots div:nth-of-type(4) {
    animation: fade 1s ease-in-out alternate forwards;
    animation-delay: 0.3s;
}

.navbar .menu_box .menu li a:hover .dots div:nth-of-type(5) {
    animation: fade 1s ease-in-out alternate forwards;
    animation-delay: 0.4s;
}

.navbar .menu_box .menu li a:hover .dots div:nth-of-type(6) {
    animation: fade 1s ease-in-out alternate forwards;
    animation-delay: 0.5s;
}

@keyframes fade {
    from {}

    to {
        opacity: 1;
    }
}

.navbar .menu_box .social_box {
    position: absolute;
    top: 20px;
    right: -50px;
}

.navbar .menu_box .social_box a {
    display: inline-block;
    transition: 0.3s;
    padding: 0 3px;
}

.navbar .menu_box .social_box a:hover {
    transform: scale(1.1);
}

.navbar .menu_box .social_box a img {
    width: 35px;
}


@media (max-width: 1500.98px) {

    .navbar .container {
        max-width: 1220px;
    }
}

@media (max-width: 1399.98px) {
    .navbar .container {
        max-width: 1020px;
    }
}

@media (max-width: 1199.98px) {
    .navbar .container {
        max-width: 820px;
        padding: 0;
    }
}

@media (max-width: 991.98px) {

    .navbar .menu_box .social_box {
        top: 22px;
        right: 82px;
    }

    .navbar .container {
        max-width: initial;
    }

    button.navbar-toggler {
        position: absolute;
        top: 22px;
        right: 30px;

        width: 41px;
        height: 34px;
        border: 1px solid #F6F6F6;

        z-index: 2;
    }

    button.navbar-toggler span {
        width: 26px;
        height: 2px;
        border-radius: 10px;
        background-color: #F6F6F6;

        position: absolute;
    }

    button.navbar-toggler span.line1 {
        top: 6px;
        left: 5px;

        width: 22px;
    }

    button.navbar-toggler span.line2 {
        top: 15px;
        left: 5px;

        width: 16px;
    }

    button.navbar-toggler span.line3 {
        top: 25px;
        left: 5px;
    }

    .navbar-collapse {
        position: absolute;
        width: 100%;
        left: 0;
        top: 80px;
    }

    .navbar .menu_box .menu {
        background-color: #3B4046;
    }

    .navbar .menu_box {
        position: relative;
    }

    .navbar .menu_box::before {
        content: "";
        width: 100%;
        height: 80px;
        background-color: #3B4046;

        position: absolute;
        top: 0px;
        left: 0;
    }

    .navbar .menu_box .menu li a {
        color: #F6F6F6;
        border-radius: 0;
    }

    .navbar .menu_box .menu li:nth-last-child(1) a {
        border-radius: 0 0 20px 20px;
    }

    .navbar .menu_box .menu li a:hover {
        color: #3B4046;
    }
}

@media (max-width: 767.98px) {

    .navbar {
        padding: 0 !important;
    }
}



.top_btn {
    position: fixed;

    right: 30px;
    bottom: 30px;

    z-index: 99;
    display: none;
}

.top_btn a {
    display: inline-block;
    transition: 0.3s;
    background-color: #00a0e9;
    border: 1px solid #fff100;
    color: #fff100;
    border-radius: 20px;
    width: 60px;
    height: 30px;
    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;
}

.top_btn a:hover {
    /* transform: scale(1.08); */
    color: #00a0e9;
    background-color: #fff100;
}

/* .top_btn img {
    display: inline-block;
    width: 60px;
    height: 60px;
    transition: 3s;
} */

/* .top_btn a:hover img {
    transform: rotate(360deg);
} */

.top_btn p {
    margin: 0;
    font-weight: 1000;
    /* color: #fff; */
    text-decoration: none;

    /* position: absolute; */
    /* top: 20px; */
    /* left: 16px; */
}



.divider_line {
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.divider_line .dots {
    width: 63px;
    display: flex;
    justify-content: space-between;
}

.divider_line .dots div {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFDB84;
    border: 2px solid #3B4046;
}




/* .banner_event{
    background-color: #3B4046;
    background: linear-gradient( to bottom , #3B4046 50% ,transparent 50% );

    position: relative;

    z-index: 2;

    padding-top: 1px;
    margin-top: 1px;
}

.banner_event::before{
    content: "";
    background-image: url(../img/banner_3.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;

    position: absolute;
    left: 50%;
    top: -100px;

    transform: translateX(-50%);
}

.banner{
    padding-top: 300px;
}

.title_h1{
    position: absolute;

    top: 140px;
    left: 44%;

    z-index: 2;
}

.title_h1_1{
    animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.15s both;
}

.title_h1_2{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s both;
}

.title_h1_3{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.35s both;
}

.title_h1_4{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s both;
}

.title_h1_5{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.55s both;
}

.title_h1_6{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.65s both;
}

.title_h1_7{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.75s both;
}

.title_h1_8{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.85s both;
}

.title_h1_9{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.95s both;
}

.title_h1_10{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
}

.title_h1_11{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1.15s both;
}


.title_h1_12{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.25s both;
}

.title_h1_13{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.45s both;
}

.title_h1_14{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.65s both;
}

.title_h1_15{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0.85s both;
}

.title_h1_16{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1.05s both;
}

.title_h1_17{
animation: title_h1 0.25s cubic-bezier(0.47, 0, 0.745, 0.715) 1.25s both;
}

@keyframes title_h1 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.title_h2{
    position: absolute;
    top: 360px;
    left: 46%;
    z-index: 2;
}

.title_h2 .box{
    position: absolute;

    animation:title_h2_animation 1s 1.15s linear forwards;
    opacity: 0;
    left: -50px;
}

.title_h2 .box:nth-last-child(1){
    animation:title_h2_animation 1s 1.15s linear forwards;
    opacity: 0;
    left: -50px;
}

@keyframes title_h2_animation {

    100%{
        opacity: 1;
        left: 0;
    }
}

.svg-elem-1 {
    animation: title_h2 0.5s linear 1.2s both;
}

.svg-elem-2 {
    animation: title_h2 0.5s linear 1.3s both;
}

.svg-elem-3 {
    animation: title_h2 0.5s linear 1.4s both;
}

.svg-elem-4 {
    animation: title_h2 0.5s linear 1.5s both;
}

.svg-elem-5 {
    animation: title_h2 0.5s linear 1.6s both;
}

.svg-elem-6 {
    animation: title_h2 0.5s linear 1.7s both;
}

.svg-elem-7 {
    animation: title_h2 0.5s linear 1.8s both;
}

.svg-elem-8 {
    animation: title_h2 0.5s linear 1.9s both;
}

.svg-elem-9 {
    animation: title_h2 0.5s linear 2s both;
}

.svg-elem-10 {
    animation: title_h2 0.5s linear 2.1s both;
}

.svg-elem-11 {
    animation: title_h2 0.5s linear 2.2s both;
}

.svg-elem-12 {
    animation: title_h2 0.5s linear 2.3s both;
}


.svg-elem-13 {
    animation: title_h2 0.5s linear 1.2s both;
}

.svg-elem-14 {
    animation: title_h2 0.5s linear 1.3s both;
}

.svg-elem-15 {
    animation: title_h2 0.5s linear 1.4s both;
}

.svg-elem-16 {
    animation: title_h2 0.5s linear 1.5s both;
}

.svg-elem-17 {
    animation: title_h2 0.5s linear 1.6s both;
}

.svg-elem-18 {
    animation: title_h2 0.5s linear 1.7s both;
}

.svg-elem-19 {
    animation: title_h2 0.5s linear 1.8s both;
}

.svg-elem-20 {
    animation: title_h2 0.5s linear 1.9s both;
}
  
.svg-elem-21 {
    animation: title_h2 0.5s linear 2s both;
}
  
.svg-elem-22 {
    animation: title_h2 0.5s linear 2.1s both;
} 
  
.svg-elem-23 {
    animation: title_h2 0.5s linear 2.2s both;
}
  
@keyframes title_h2 {
    0% {
      fill: transparent;
    }
  
    100% {
      fill: rgb(0, 0, 0);
    }
}

.banner .planet{
    width: 200px;

    position: absolute;
    top: 120px;
    right: 4vw;

    z-index: 1;

    animation: planet 5s infinite linear;
    transition: 0.3s;
}

@keyframes planet {

    50%{
        transform: translateX(5px) translateY(5px);
    }
    
}

.wave_box{
    position: relative;
    width: 100%;
    height: 50px;
}

.wave::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0%;
    background-image: url(../img/wave.svg);
    background-size: 100%;
    background-repeat: no-repeat;

    opacity: 0.9;

    animation: wave_before 60s infinite linear;
}

@keyframes wave_before {
    
    0% {
        left: 0%;
    }

    50%{
        top: 3px;
    }

    100% {
        left: -100%;
    }
}

.wave::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    background-image: url(../img/wave.svg);
    background-size: 100%;
    background-repeat: no-repeat;

    opacity: 0.9;

    animation: wave_after 60s infinite linear;
}

@keyframes wave_after {
    

    0% {
        left: 100%;
    }

    50%{
        top: 3px;
    }

    100% {
        left: 0%;
    }
}

.wave_2::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0%;
    background-image: url(../img/wave.svg);
    background-size: 100%;
    background-repeat: no-repeat;

    opacity: 0.8;

    animation: wave_before 18s infinite linear;
}

.wave_2::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    background-image: url(../img/wave.svg);
    background-size: 100%;
    background-repeat: no-repeat;

    opacity: 0.8;

    animation: wave_after 18s infinite linear;
}

.banner .img_box{
    position: relative;

    background-color: #6C95D2;
    height: 500px;
}

.banner .banner_1{
    width: 1920px;

    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
}

.banner .banner_4{
    animation: banner_4 15s infinite linear;
}

@keyframes banner_4 {

    33%{
        transform: translateX(-50%) rotate(-1deg);
    }
    
    50%{
        
        opacity: 0.6;
    }

    66%{
        transform: translateX(-50%) rotate(1deg);
    }
}



.banner .banner_circle{
    position: absolute;
    top: 125px;
    left: calc( 50% - 205px);

    animation: banner_circle 3s 1s linear forwards , banner_circle_2 10s 4s linear infinite;
    transform: scale(0) rotate(0deg);
    opacity: 0.3;
}

@keyframes banner_circle {
    
    100%{
        transform: scale(1) rotate(360deg);
        opacity: 1;
        filter: drop-shadow(0 0 6px #ffffff55);
    }
}

@keyframes banner_circle_2 {

    0%{
        filter: drop-shadow(0 0 10px #ffffff3e);
    }
    
    50%{
        transform: rotate(360deg) scale(0.95);
        filter: drop-shadow(0 0 10px #ffffff28);
    }
}

.banner .banner_star{
    position: absolute;
    top: 125px;
    left: calc( 50% - 215px);

    animation: banner_star 3s linear forwards , banner_star_2 5s 3s linear infinite;
    transform: scale(0.2) rotate(0deg);
    opacity: 0.3;
}

@keyframes banner_star {
    
    100%{
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

@keyframes banner_star_2 {

    0%{
        filter: drop-shadow(0 0 10px #ffffff21);
    }
    
    50%{
        transform: rotate(5deg) scale(1.05);
        filter: drop-shadow(0 0 10px #ffffff13);
    }
} */


.banner_event .banner {
    /* margin: 0 auto; */
    text-align: center;
    padding-top: 30px;

    position: relative;
    /* margin-bottom: 30px; */
}

.home .banner_event .banner {
    margin-bottom: 30px;
}

/* .banner_event .banner_bg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0.1;
} */

.banner_event .banner_img {
    position: relative;
    /* z-index: 1; */
    padding-top: 20px;
    width: 90%;
    /* margin: 0 auto; */

    animation: banner_img 0.5s linear forwards;
}

@keyframes banner_img {

    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.banner_event h1 .h1_p {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.banner_event .banner_title {
    position: absolute;
    /* width: 80%; */
    max-width: 850px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);

    animation: banner_title 0.5s linear forwards;
}

@keyframes banner_title {

    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@media (max-width: 991.98px) {

    .banner_event .banner {
        margin-top: 30px;
    }
}






.event {
    /* padding-bottom: 120px; */
    padding-bottom: 60px;

    position: relative;
    transform: translateY(200px);
    opacity: 0;
    transition: 0.6s;
    z-index: 2;
}

.event.add {
    transform: translateY(0);
    opacity: 1;
}

/* .event::before {
    content: "";
    background-image: url(../img/event_bg.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 480px;

    position: absolute;
    left: 0;
    bottom: 0;
} */

.event .container {
    position: relative;
    z-index: 0;
}

/* .event .container::before {
    content: "";
    width: 200px;
    height: 200px;
    background: linear-gradient(0deg, rgba(216, 251, 223, 0.45) 0%, rgba(251, 220, 223, 0.45) 100%);
    position: absolute;
    right: -70px;
    bottom: -80px;
    border-radius: 50%;

    animation: event_circle 8s infinite linear;
    transition: 0.3s;
    box-shadow: -1px -1px 5px #f6f6f63c;
} */

/* @keyframes event_circle {

    50% {
        opacity: 0.45;
    }

    100% {
        transform: rotate(360deg);
    }
} */

/* .event .container::after {
    content: "";
    position: absolute;
    z-index: -1;

    background-image: url(../img/event_bg2.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 600px;

    top: -150px;
    left: 0;
} */

.event .box {
    background-color: #f6f6f693;
    border: 2px solid #000000;
    border-left: 1px;
    border-right: 1px;

    border-radius: 40px;
    padding: 40px 20px;
    text-align: center;

    position: relative;
}

.event .box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% + 16px);
    border: 2px solid #000000;
    top: -8px;
    left: 0;

    border-radius: 40px;
    pointer-events: none;
}

.event .box::after {
    content: "";
    background-image: url(../img/event_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 170px;
    height: 229px;
    position: absolute;
    left: 2px;
    bottom: 0;
}

.event .box .text_box {
    max-width: 840px;
    margin: 0 auto;
}

.event .box .text_box h2 {
    display: inline-block;
    font-size: 2.1rem;
    font-weight: 600;
    margin: 25px 0;
    margin-bottom: 35px;

    position: relative;
}

.event .box .text_box h2::before {
    content: "";
    position: absolute;
    top: 11px;
    left: -40px;
    background-image: url(../img/event_icon1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 28px;
    height: 20px;
}

.event .box .text_box h2::after {
    content: "";
    position: absolute;
    top: 11px;
    right: -40px;
    background-image: url(../img/event_icon1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 28px;
    height: 20px;

    /* transform: rotate(180deg); */
}

.event .box .text_box .line img {
    width: 100%;
}

.event .box .text_box p {
    margin: 30px 0;
    font-size: 1.4rem;
}

.event .box .text_box .event_icon2 {
    margin: 10px 0;
    width: 20px;
}

.event .box .text_box .btn_box {
    margin: 30px 0;
}

.event .box .text_box .btn_box .submit_btn {
    color: #F6F6F6;
    font-weight: 500;
    border-radius: 10px;

    border: 2px solid #000000;

    position: relative;
    overflow: hidden;

    background: linear-gradient(-40deg, #68DDE6 20%, #6493D2 80%);

    box-shadow: 0px 4px 0px #6493D2;

    transition: 0.3s;

    /*cursor: not-allowed;*/
}

.event .box .text_box .btn_box .submit_btn:hover {
    box-shadow: 0px 1px 0px #6493D2;
    transform: translateY(3px);
}

.event .box .text_box .btn_box .submit_btn:hover:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    background: linear-gradient(-40deg, #6493D2 20%, #64d5dd 80%);
}

.event .box .text_box .btn_box .submit_btn:before {
    animation: submit_btn_bgbefore 4s linear infinite;
}

@keyframes submit_btn_bgbefore {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

.event .box .text_box .btn_box .submit_btn:hover:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0%;
    background: linear-gradient(-40deg, #64d5dd 20%, #6493D2 80%);
}

.event .box .text_box .btn_box .submit_btn:after {
    animation: submit_btn_bgafter 4s linear infinite;
}

@keyframes submit_btn_bgafter {
    0% {
        left: 0;
    }

    50% {
        left: -100%;
    }

    50.1% {
        left: 99.5%;
    }

    100% {
        left: 0;
    }
}

.event .box .text_box .btn_box .submit_btn p {
    margin: 0;
    padding: 12px 40px;
    padding-top: 15px;
    position: relative;
    z-index: 1;
    font-size: 1.4rem;
    font-weight: 600;

    display: flex;
}

/* .event .box .text_box .btn_box .submit_btn p::before {
    content: "";
    background-image: url(../img/event_icon3.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 25px;
    height: 22px;
    position: absolute;
    left: -2px;
    bottom: 6px;
}

.event .box .text_box .btn_box .submit_btn p::after {
    content: "";
    background-image: url(../img/event_icon3.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 25px;
    height: 22px;
    position: absolute;
    right: -3px;
    top: 6px;

    transform: rotate(180deg);
} */

.event .box .text_box .btn_box .submit_btn span {
    transition: 0.3s;
    display: inline-block;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(1) {
    animation: submit_btn_animation 1.6s linear infinite;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(2) {
    animation: submit_btn_animation 1.6s 0.2s linear infinite;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(3) {
    animation: submit_btn_animation 1.6s 0.4s linear infinite;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(4) {
    animation: submit_btn_animation 1.6s 0.6s linear infinite;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(5) {
    animation: submit_btn_animation 1.6s 0.8s linear infinite;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(6) {
    animation: submit_btn_animation 1.6s 1s linear infinite;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(7) {
    animation: submit_btn_animation 1.6s 1.2s linear infinite;
}

.event .box .text_box .btn_box .submit_btn:hover span:nth-child(8) {
    animation: submit_btn_animation 1.6s 1.4s linear infinite;
}

@keyframes submit_btn_animation {

    0% {
        transform: scale(1) translateY(0px);
    }

    12% {
        transform: scale(1.05) translateY(-5px);
    }

    50% {
        transform: scale(1.02) translateY(0px);
    }

    100% {
        transform: scale(1) translateY(0px);
    }
}

.event .box .text_box .notice {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    margin: 30px 0;
    /* margin-top: 15px; */
    margin-bottom: 40px;
}


@media (max-width: 1399.98px) {

    /* .banner {
        padding-top: 285px;
    }

    .banner .banner_1 {
        width: 1330px;
        top: -140px;
    }

    .banner .banner_circle {
        top: 85px;
        left: calc(50% - 162px);
        width: 110px;
    }

    .banner .banner_star {
        top: 85px;
        left: calc(50% - 162px);
        width: 110px;
    }

    .title_h1 {
        transform: scale(0.85);
        left: 40%;
    }

    .banner .planet {
        width: 160px;
        top: 80px;
    }

    .banner .img_box {
        height: 380px;
    }

    .title_h2 {
        top: 345px;
        left: 47%;
        transform: scale(0.69);
    }

    .event::before {
        height: 400px;
    } */

    .event .box::after {
        width: 120px;
        height: 162px;
        left: 24px;
    }
}

@media (max-width: 1199.98px) {

    /* .banner {
        padding-top: 320px;
    }

    .title_h1 {
        left: 25%;
    }

    .title_h2 {
        top: 395px;
    } */
}

@media (max-width: 991.98px) {

    /* .banner_event::before {
        top: 0;
    }

    .title_h1 {
        left: 5%;
        top: 100px;
    }

    .wave_box {
        width: 200%;
    }

    .event .container::after {
        width: 180%;
        left: 50%;
        transform: translateX(-50%);
        top: -120px;
    } */
}

@media (max-width: 767.98px) {
    /* .banner .planet {
        width: 110px;
        top: 190px;
    }

    .title_h2 {
        left: 45%;
    }

    .event {
        padding-bottom: 100px;
    }

    .event::before {
        height: 220px;
        width: 110%;
    } */

    .event .box::after {
        width: 100px;
        height: 134px;
    }

    .event .box .text_box h2 {
        margin: 20px 0;
        margin-top: 15px;
        font-size: 1.8rem;
    }

    .event .box .text_box p {
        margin: 20px 0;
        font-size: 1.3rem;
    }

    .event .box .text_box .event_icon2 {
        margin: 0;
        width: 15px;
    }

    .event .box .text_box .btn_box {
        text-align: right;
        margin-right: 40px;
        margin-bottom: 10px;
    }
}

@media (max-width: 575.98px) {

    .banner_event {
        /* background: linear-gradient(to bottom, #3B4046 490px, transparent 490px); */
    }

    .banner {
        padding-top: 300px;
    }

    .banner .banner_1 {
        width: 830px;
        top: -100px;
        left: 56%;
    }

    .banner .banner_circle {
        top: 45px;
        left: calc(50% - 63px);
        width: 60px;
    }

    .banner .banner_star {
        top: 45px;
        left: calc(50% - 63px);
        width: 60px;
    }

    .banner .planet {
        width: 95px;
        top: 55px;
    }

    .banner .img_box {
        height: 200px;
    }

    .wave_box {
        width: 280%;
        transform: translateY(5px);
    }

    .title_h1 {
        left: -90px;
        transform: scale(0.6);
    }

    .title_h2 {
        left: initial;
        right: 255px;
        top: 200px;
        transform: scale(0.6);
    }

    @keyframes title_h2 {
        0% {
            fill: transparent;
        }

        100% {
            fill: #F6F6F6;
        }
    }

    .event .container::after {
        width: 220%;
        top: -100px;
    }

    .event .box::after {
        content: none;
    }

    .event .box .text_box .btn_box {
        text-align: center;
        margin-right: 0;
    }

    .event .box .text_box .btn_box .submit_btn p {
        padding: 12px 30px;
    }

    @media (max-width: 374.98px) {

        .title_h1 {
            left: -117px;
            transform: scale(0.55);
        }
    }
}

.news {
    padding: 40px 0;

    position: relative;
    z-index: 1;

    transform: translateY(200px);
    opacity: 0;
    transition: 0.6s;
}

.news.add {
    transform: translateY(0);
    opacity: 1;
}

/* .news_bg {
    position: relative;
    z-index: 1;
}

.news_bg img {
    width: 2600px;
    height: 1580px;

    position: absolute;
    top: -550px;
    left: 50%;
    transform: translateX(-50%);

    opacity: 0.5;
} */

.news .box {
    position: relative;
    z-index: 1;

    background-color: #f6f6f693;
    border: 2px solid #000000;
    border-left: 1px;
    border-right: 1px;
    border-radius: 40px;
    padding: 40px 20px;
}

.news .box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% + 16px);
    border: 2px solid #000000;
    top: -8px;
    left: 0;

    border-radius: 40px;
    pointer-events: none;
}


.news .box::after {
    content: "";
    background-image: url(../img/news_bg1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 140px;
    height: 150px;
    position: absolute;
    right: 1px;
    top: 7px;
}


.news .box .text_box {
    text-align: center;
}

.news .box .text_box h2 {
    display: inline-block;
    font-size: 2.1rem;
    font-weight: 600;
    margin: 25px 0;
    margin-bottom: 35px;

    position: relative;
}

.news .box .text_box h2::before {
    content: "";
    position: absolute;
    top: 5px;
    left: -40px;
    background-image: url(../img/news_icon1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 36px;
    height: 30px;
}

.news .box .text_box h2::after {
    content: "";
    position: absolute;
    top: 5px;
    right: -40px;
    background-image: url(../img/news_icon1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 36px;
    height: 30px;
}

.news .box .line img {
    width: 70%;
}

.news .box .line2 {
    /* margin-bottom: 80px; */
}

.news .box .list {
    margin: 20px 0;
    margin-top: 25px;
    padding: 0 20px;
    list-style: none;
    text-align: left;
}

.news .box .list li {
    border-bottom: 2px dotted #79A3DA;
    padding: 5px 0;
}

.news .box .list li:nth-last-child(1) {
    border-bottom: none;
}

.news .box .list li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: #3B4046;
    padding: 12px 40px;
    padding-right: 12px;

    background-image: url(../img/news_icon2.svg);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 30px;

    transition: 0.3s;
    border-radius: 5px;
}

/* .news .box .list li:nth-child(even) a {
    background-image: url(../img/news_icon3.svg);
} */

.news .box .list li a:hover {
    background-color: #f6f6f67d;
    background-image: url(../img/news_icon3.svg);
}

.news .box .list li a p {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 400;
}

.news .box .list li a p.time {
    font-size: 1.2em;
    font-weight: 300;
}

.news .box .btn_box {
    padding: 20px 0;
    padding-bottom: 90px;

    background-image: url(../img/divider2.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 31px;

    position: relative;
}

.news .box .btn_box::before {
    content: '';
    background-image: url(../img/news_icon5.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 110px;
    height: 110px;

    position: absolute;
    top: 10px;
    right: -40px;

    z-index: -1;

    animation: news_icon5 20s linear infinite;
}

@keyframes news_icon5 {
    100% {
        transform: rotate(360deg);
    }
}

.news .box .btn_box::after {
    content: '';
    background-image: url(../img/news_icon6.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 150px;
    height: 150px;

    position: absolute;
    top: -15px;
    right: -80px;

    animation: news_icon6 10s linear infinite;
}

@keyframes news_icon6 {
    50% {
        transform: translateX(5px) translateY(5px) rotate(2deg);
    }
}

.news .box .btn_box .more_btn {
    background-color: #DCE4F0;
    border: 1px solid #000000;
    border-radius: 5px;
    padding: 5px 30px;

    box-shadow: 0px 3px 0px #3B4046;

    position: relative;

    transition: 0.3s;
}

.news .box .btn_box .more_btn:hover {
    box-shadow: 0px 1px 0px #3B4046;
    transform: translateY(2px) scale(1.02);
    background-color: #cfdcef;
}

.news .box .btn_box .more_btn::before {
    content: '';
    background-image: url(../img/news_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 25px;
    height: 25px;

    position: absolute;
    top: 5px;
    left: -13px;
}

.news .box .btn_box .more_btn::after {
    content: '';
    background-image: url(../img/news_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 25px;
    height: 25px;

    position: absolute;
    top: 5px;
    right: -13px;
}

@media (max-width: 767.98px) {

    .news {
        padding-top: 10px;
    }

    .news .box .btn_box {
        padding-bottom: 60px;
    }

    .news .box .text_box h2 {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    .news .box .list {
        margin: 20px 0;
    }

    .news .box .list li a p {
        font-size: 1.2rem;
    }

    .news .box .list li a p.time {
        font-size: 1.1rem;
    }

    .news .box .line2 {
        margin-bottom: 50px;
    }
}

@media (max-width: 575.98px) {

    .news .box::after {
        content: none;
    }

    .news .box .list li a {
        background-image: url(../img/news_icon2.svg), none;
        padding-right: 10px;
    }

    .news .box .list li:nth-child(even) a {
        background-image: url(../img/news_icon3.svg), none;
    }
}

.activity {
    padding: 80px 0;
    padding-bottom: 120px;
    /* margin-bottom: 70px; */
    position: relative;
    z-index: 0;

    transform: translateY(200px);
    opacity: 0;
    transition: 0.6s;
}

.activity.add {
    transform: translateY(0);
    opacity: 1;
}

/* .activity::after {
    content: "";
    background-image: url(../img/activity_bg3.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 1000px;
    height: 580px;

    position: absolute;
    bottom: -70px;
    right: 0;
} */

.activity_bg {
    position: relative;
    z-index: 1;
}

.activity_bg img {
    width: 2200px;
    height: 3856px;

    position: absolute;
    top: -1200px;
    left: 50%;
    transform: translateX(-50%);
}

.activity .box {
    background-color: #f6f6f67d;
    border: 2px solid #000000;
    border-left: 1px;
    border-right: 1px;

    border-radius: 40px;
    padding: 40px 20px;

    position: relative;
    z-index: 1;
}

.activity .box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: calc(100% + 16px);
    border: 2px solid #000000;
    top: -8px;
    left: 0;

    border-radius: 40px;
    pointer-events: none;
}

.activity .box::after {
    content: "";
    background-image: url(../img/activity_icon1_3.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 200px;
    height: 200px;

    position: absolute;
    bottom: 0;
    right: -90px;
}

.activity .box .activity_icon1_4 {
    position: absolute;
    top: 15px;
    left: 0;

    width: 170px;
}

.activity .box .title_box {
    text-align: center;
}

.activity .box .title_box h2 {
    display: inline-block;
    font-size: 2.1rem;
    font-weight: 600;
    margin: 25px 0;
    margin-bottom: 0;

    position: relative;
}

.activity .box .title_box h2::before {
    content: "";
    position: absolute;
    top: 9px;
    left: -35px;
    background-image: url(../img/activity_icon1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 22px;
    height: 22px;
}

.activity .box .title_box h2::after {
    content: "";
    position: absolute;
    top: 9px;
    right: -35px;
    background-image: url(../img/activity_icon1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 22px;
    height: 22px;
}

.activity .box .text_box {
    max-width: 840px;
    margin: 0 auto;
}

.activity .box .text_box .title {
    margin-top: 80px;
    margin-bottom: 0;

    position: relative;
    z-index: 0;
}

.activity .box .text_box .title::before {
    content: "";
    background-image: url(../img/activity_icon1_6.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    position: absolute;
    top: -32px;
    left: -30px;

    width: 60px;
    height: 60px;

    z-index: -1;
    opacity: 0.5;

    transform: rotate(-15deg);
}

/* .activity .box .text_box .title::after {
    content: "";
    background-image: url(../img/activity_icon2.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    position: absolute;
    top: -55px;
    left: -35px;

    width: 80px;
    height: 60px;
} */

.activity .box .text_box .title h3 {
    font-size: 1.4rem;
    font-weight: 600;
    border-bottom: 2px dotted #79A3DA;
}

.activity .box .text_box .text {
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity .box .text_box .text li {
    display: flex;
    align-items: center;
    padding: 15px 0;

    border-bottom: 1px dotted #6493D2;
}

.activity .box .text_box .text li:nth-last-child(1) {
    border-bottom: none;
}

.activity .box .text_box .text li p {
    margin: 0;

    flex-basis: 140px;
    font-size: 1.2rem;
    font-weight: 400;
}

.activity .box .text_box .text li p:nth-last-child(1) {
    flex-basis: calc(100% - 140px);
    font-weight: 600;
}

.activity .box .text_box .text li p span {
    font-weight: 400;
}

.activity .box .text_box .text li p.img_box {
    text-align: center;
}

.activity .box .text_box .text li p img {
    display: inline-block;
    width: 250px;
    margin: 20px auto;
}

.activity .box .text_box.awards_box {
    display: flex;
    flex-wrap: wrap;
}

.activity .box .text_box.awards_box .title {
    flex-basis: 50%;
    margin-right: 10px;
    padding-right: 20px;
}

.activity .box .text_box.awards_box .text {
    flex-basis: 50%;
    padding-right: 20px;
}

.activity .box .text_box.awards_box .text p.time {
    display: flex;
    flex-direction: column;
}

.activity .box .text_box.awards_box .text p.time span {
    font-size: 1.1rem;
    padding-left: 70px;
}

.activity .box .text_box.awards_box .map_box {
    flex-basis: 50%;
}

.activity .box .text_box.awards_box .map_box iframe {
    width: 100%;
    height: 100%;
    transform: translateY(-10px);

    border-radius: 10px;
    border: 2px solid #000000;
    box-shadow: 0px 2px 0px #3B4046;
}

.activity .box .text_box.awards_box .text_2 {
    flex-basis: 100%;
    border-top: 1px dotted #6493D2;
    margin-bottom: 20px;
}

.activity .box .text_box.apply_box {
    display: flex;
    flex-wrap: wrap;

    position: relative;
}

.activity .box .text_box.apply_box .title {
    /* flex-basis: 50%; */
    flex-basis: 100%;
    /* margin-right: 10px; */
    /* padding-right: 20px; */
}

.activity .box .text_box.apply_box .title::after {
    background-image: url(../img/activity_icon3.svg);
}

.activity .box .text_box.apply_box2 .title::after {
    background-image: url(../img/activity_icon3.svg);
}

.activity .box .text_box.apply_box .text {
    /* flex-basis: 50%; */
    flex-basis: 100%;
    /* padding-right: 20px; */

    margin-bottom: 50px;
}

.activity .box .text_box.apply_box .text p {
    font-size: 1.18rem;
    font-weight: 400;
    margin: 0;
    border-bottom: 1px dotted #6493D2;
    padding: 20px 0;
}

.activity .box .text_box.apply_box .contact_box {
    flex-basis: 50%;

    border-radius: 10px;
    border: 2px solid #000000;
    box-shadow: 0px 2px 0px #3B4046;

    padding: 20px 55px;

    background: linear-gradient(45deg, #eaeff697 0%, #e1eaf5a5 100%);

    position: absolute;
    right: 0;
    top: 115px;

    transform: rotate(-1deg) translateY(-30px);
    transition: 0.3s;
}

.activity .box .text_box.apply_box .contact_box:hover {
    transform: rotate(1deg) translateY(-30px);
}

.activity .box .text_box.apply_box .contact_box::before {
    content: "";
    background-image: url(../img/activity_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;

    position: absolute;
    top: 5px;
    left: 5px;
}

.activity .box .text_box.apply_box .contact_box::after {
    content: "";
    background-image: url(../img/activity_icon5.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 55px;
    height: 55px;

    position: absolute;
    right: -3px;
    bottom: -20px;
}

.activity .box .text_box.apply_box .contact_box p {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 400;
    padding: 2px 0;
}

.activity .box .text_box.photo_box .title::after {
    background-image: url(../img/activity_icon6.svg);
}

.activity .box .text_box.photo_box .title .more {
    float: right;

    background-color: transparent;
    border: none;
    font-size: 1.1rem;
    font-weight: 300;
    padding: 0;

    position: relative;
    transition: 0.3s;
}

/* .activity .box .text_box.photo_box .title .more::before {
    content: "";
    background: linear-gradient(0deg, rgba(216, 251, 223, 0.45) 0%, rgba(251, 220, 223, 0.45) 100%);
    border-radius: 50%;

    width: 52px;
    height: 52px;

    position: absolute;
    top: -14px;
    left: -45px;
    z-index: -1;
    transition: 0.3s;
} */

.activity .box .text_box.photo_box .title .more:after {
    content: "";
    background-image: url(../img/news_icon2.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 48px;
    height: 48px;

    position: absolute;
    top: -12px;
    left: -43px;

    transition: 0.5s;
}

.activity .box .text_box.photo_box .title .more p {
    margin: 0;
}

.activity .box .text_box.photo_box .title .more p span {
    transition: 0.3s;
}

.activity .box .text_box.photo_box .title .more:hover {
    padding-right: 35px;
    font-weight: 500;
}

/* .activity .box .text_box.photo_box .title .more:hover::before {
    left: -7px;
} */

.activity .box .text_box.photo_box .title .more:hover::after {
    left: calc(100% - 40px);
    transform: rotate(180deg);
}

.activity .box .text_box.photo_box .title .more:hover p span {
    font-size: 1.3rem;
    padding-right: 2px;
}

.activity .box .text_box.photo_box .carousel_box {
    margin: 0 -5px;
}

.slick-list {
    border-radius: 10px;
}

.activity .box .text_box.photo_box .carousel_box .img_box {
    border-radius: 10px;
    overflow: hidden;
    margin: 5px;
}

.activity .box .text_box.photo_box .carousel_box .img_box img {
    width: 100%;
}

.activity .box .text_box.photo_box .carousel_box .slick-prev {
    display: none;
}

.activity .box .text_box.photo_box .carousel_box .slick-next {
    background-image: url(../img/news_icon2.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 60px;
    height: 60px;

    top: initial;
    bottom: -2px;
    right: -40px;
    transform: translate(0);

    transition: 0.3s;
}

.slick-next:before {
    content: "";
    background-image: url(../img/btn_arrow.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 31px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-11px) translateY(-15px);
}

.activity .box .text_box.photo_box .carousel_box .slick-next:hover {
    transform: scale(1.1)
}

/* .activity .box .text_box.photo_box .carousel_box .slick-next:hover:before {
    animation: next 1s infinite linear;
}

@keyframes next {
    50% {
        transform:rotate(215deg);
    }
} */

.activity .box .text_box.photo_box .carousel_box .slick-dots {
    transform: translateX(-9px) translateY(-8px);
    text-align: right;
}

.activity .box .text_box.photo_box .carousel_box .slick-dots li {
    width: initial;
    height: initial;
    margin: 2px 5px;
    padding: 0;
}

.activity .box .text_box.photo_box .carousel_box .slick-dots li button {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fffffd;
    border: 1px solid #00a0e9;
    padding: 0;

    position: relative;
}

.activity .box .text_box.photo_box .carousel_box .slick-dots li button:before {
    content: "";
}

.activity .box .text_box.photo_box .carousel_box .slick-dots li.slick-active button:before {
    content: "";
    background-image: url(../img/btn_icon.svg);
    background-size: 100%;
    width: 18px;
    height: 18px;
    opacity: 1;
    top: -5px;
    left: -5px;
}

.activity .box .text_box.photo_box .comimg_soon {
    text-align: center;
    margin: 40px 0;
    margin-top: 50px;
}

.activity .box .text_box.photo_box .comimg_soon img {
    width: 250px;
}

.activity .box .line {
    max-width: 840px;
    margin: 0 auto;
}

.activity .box .line img {
    width: 100%;
}

.activity .box .text_box .text .comimg_soon_box {
    text-align: center;
    margin: 40px 0;
}


@media (max-width: 1199.98px) {

    .activity .box::after {
        width: 170px;
        height: 150px;
        right: -140px;
    }

    .activity .box .activity_icon1_4 {
        top: 25px;
        width: 100px;
    }

    /* .activity::after {
        width: 800px;
        height: 460px;
        right: -150px;
    } */
}

@media (max-width: 991.98px) {

    .activity .box {
        padding: 40px 40px;
    }

    .activity .container .box .text_box .title {
        flex-basis: 100%;
        margin-right: 0;
        padding: 0;
        margin-top: 60px;
    }

    .activity .container .box .text_box .text {
        flex-basis: 100%;
        padding: 0;
    }

    .activity .box .text_box.awards_box .map_box {
        flex-basis: 100%;
        order: 2;
        height: 250px;
    }

    .activity .box .text_box.awards_box .text p.time {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .activity .box .text_box.awards_box .text p.time span {
        padding-left: 10px;
    }

    .activity .box .text_box.awards_box .text_2 {
        padding: 15px 0;
    }

    .activity .box .text_box.apply_box .contact_box {
        position: relative;
        top: 0;
        flex-basis: 100%;
        padding: 30px;

        text-align: center;
    }

    .activity .box::after {
        content: none;
    }
}

@media (max-width: 767.98px) {

    .activity {
        padding-top: 50px;
        padding-bottom: 90px;
        margin-bottom: 40px;
    }

    .activity .box .title_box h2 {
        font-size: 1.8rem;
        margin-top: 10px;
    }

    .activity .box .text_box .text li {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity .box .text_box .text li p {
        flex-basis: initial;
        margin-bottom: 5px;
    }

    .activity .box .text_box .text li p.img_box {
        width: 100%;
    }
}

@media (max-width: 575.98px) {

    .activity .box .text_box .text li p img {
        width: 210px;
        margin: 10px 0;
    }

    .activity .box .text_box.apply_box .contact_box p {
        font-size: 0.95rem;
    }

    .activity .box .text_box.apply_box .contact_box {
        width: 100%;
        padding: 32px 10px;
    }

    .activity .box .text_box .text li {
        padding: 10px 0;
    }

    .activity .box .text_box.awards_box .text_2 {
        padding: 10px 0;
    }

    .activity .box .text_box .title h3 {
        margin-bottom: 35px;
    }

    .activity .box .text_box.photo_box .title .more {

        position: absolute;
        right: 0;
        top: 35px;
    }

    .activity .box .text_box.photo_box .comimg_soon img {
        width: 210px;
        margin: 10px 0;
    }
}



footer {
    background-color: #062943;
}

footer .footer_box {
    margin: 0;
    padding: 30px 0;
    list-style: none;
    color: #F6F6F6;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

footer .footer_box p {
    margin: 0;
}

footer .footer_box img {
    height: 50px;
    margin: 10px 0;
}

footer .bottom {
    text-align: center;
    color: #F6F6F6;
}

footer .bottom p {
    margin: 0;
    padding: 5px 0;
}

@media (max-width: 1199.98px) {

    footer .footer_box img {
        height: 40px;
    }
}

@media (max-width: 991.98px) {

    footer .footer_box {
        flex-wrap: wrap;
    }

    footer .footer_box li {
        order: 2;
    }

    footer .footer_box li:nth-child(2) {
        order: 1;
        width: 100%;
        margin-bottom: 10px;
    }
}

@media (max-width: 575.98px) {

    footer .bottom p {
        font-size: 0.9rem;
        padding: 0 10px;
        padding-bottom: 5px;
    }

    footer .footer_box li {
        width: 100%;
        margin-bottom: 20px;
        text-align: center;
    }

    footer .footer_box li:nth-child(2) {
        margin-bottom: 20px;
    }

    footer .footer_box li:nth-child(2) img {
        height: 32px;
    }

    footer .footer_box li:nth-last-child(1) {
        margin-bottom: 0;
    }
}







.breadcrumb_box {
    z-index: 1;

    transform: translateX(160px);
}

.breadcrumb_box .breadcrumb-item {
    color: #F6F6F6;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #F6F6F6;
}

.breadcrumb_box .breadcrumb-item a {
    color: #F6F6F6;
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    display: inline-block;
}

.breadcrumb_box .breadcrumb-item a:hover {
    transform: scale(1.05);
}








/* 入圍作品 */
.wrapper.shortlisted {
    /* background: linear-gradient(to bottom, #6c95d2 50%, #6c95d252 100%); */
}

.shortlisted .shortlisted_banner {
    /* background-color: #3B4046; */
    /* height: 350px; */
}

/* .shortlisted .shortlisted_banner::before {
    content: "";
    background-image: url(../img/banner_3.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: -150px;
    transform: translateX(-50%);

    z-index: 1;
} */

/* .shortlisted .shortlisted_banner::after {
    content: "";
    background-image: url(../img/shortlisted_banner1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
} */

.shortlisted .shortlisted_banner .title_h1 {
    top: 150px;
    left: 50%;
    transform: translateX(-50%) scale(1.2);
}

.shortlisted .shortlisted_banner .planet {
    width: 200px;
    position: absolute;
    top: 120px;
    right: 4vw;
    z-index: 1;
    animation: planet 5s infinite linear;
    transition: 0.3s;
}

.shortlisted .shortlisted_banner .wave_box {
    transform: translateY(300px);
    z-index: 0;
}

.shortlisted .main_box {
    position: relative;
    z-index: 1;
}

/* .shortlisted .main_box .container::before {
    content: "";
    background-image: url(../img/shortlisted_icon2.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 130px;
    height: 170px;

    position: absolute;

    top: 270px;
    left: 50px;
} */

/* .shortlisted .main_box .container::after {
    content: "";
    background-image: url(../img/shortlisted_icon3.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 60px;
    height: 60px;

    position: absolute;

    top: 65%;
    right: -10px;
} */

/* .shortlisted .main_box::before {
    content: "";
    background-image: url(../img/shortlisted_icon5.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 180px;
    height: 230px;

    position: absolute;
    bottom: 0;
    left: -20px;
    z-index: 1;
} */

/* .shortlisted .main_box::after {
    content: "";
    background-image: url(../img/shortlisted_banner2.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 110%;
    height: 100%;

    position: absolute;
    top: -200px;
    left: -30vw;

    pointer-events: none;

    z-index: -1;
} */

.shortlisted .main_box .box {
    background-color: #f6f6f6de;
    border-radius: 20px;
    padding: 20px 100px;
    /* margin: 60px 0; */
    /* margin-bottom: 150px; */
    margin-bottom: 60px;

    position: relative;
}

/* .shortlisted .main_box .box::before {
    content: "";
    background-image: url(../img/shortlisted_icon7.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 330px;
    height: 230px;

    position: absolute;
    top: -100px;
    right: -190px;

    animation: shortlisted_icon7 10s linear infinite;
    filter: drop-shadow(-1px -1px 3px #ebebeb34);
} */

/* @keyframes shortlisted_icon7 {

    50% {
        transform: translateX(5px) translateY(5px);

        filter: drop-shadow(-2px -2px 8px #ebebeb36);
    }
} */

/* .shortlisted .main_box .box::after {
    content: "";
    background-image: url(../img/shortlisted_icon6.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 330px;
    height: 330px;

    position: absolute;
    top: -270px;
    left: -170px;

    animation: shortlisted_icon6 10s linear infinite;

    pointer-events: none;
} */

/* @keyframes shortlisted_icon6 {

    50% {
        transform: translateX(5px) translateY(5px);
    }
} */

/* .shortlisted .main_box .box .circle_star::before {
    content: "";
    background-image: url(../img/banner_circle.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 130px;
    height: 130px;

    position: absolute;
    top: -38px;
    left: 78px;

    animation: circle_star_before 20s linear infinite;

    pointer-events: none;
} */

/* @keyframes circle_star_before {

    50% {
        transform: translateX(5px) translateY(5px) rotate(360deg);
    }
} */

/* .shortlisted .main_box .box .circle_star::after {
    content: "";
    background-image: url(../img/banner_star.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 130px;
    height: 130px;

    position: absolute;
    top: -38px;
    left: 78px;

    animation: circle_star_after 10s linear infinite;

    pointer-events: none;
    z-index: 1;

    filter: drop-shadow(0 0 5px #fff);
} */

/* @keyframes circle_star_after {

    50% {
        transform: translateX(5px) translateY(5px) rotate(3deg);
        filter: drop-shadow(0 0 8px #fff)
    }
} */

.shortlisted .main_box .box .title {
    text-align: center;
    margin: 40px 0;
}

.shortlisted .main_box .box .title h2 {
    display: inline-block;
    font-size: 1.8rem;
    padding: 0 33px;

    background-image: url(../img/news_icon3.svg), url(../img/news_icon3.svg);
    background-repeat: no-repeat;
    background-position: left center, right center;
    background-size: 33px;
}

.shortlisted .main_box .btn_box {
    margin: 20px 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;

    background-image: url(../img/hr_line.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.shortlisted .main_box .btn_box .button {
    display: inline-block;
    padding: 6px 10px;
    width: 150px;
    color: #3B4046;
    /* background-color: #F6F6F6; */
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 0 3px 0 #3B4046;
    border-radius: 5px;
    font-size: 1.2rem;

    position: relative;
}

.shortlisted .main_box .btn_box .button::before {
    content: '';
    background-image: url(../img/btn_icon.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 11px;
    left: -10px;
}

.shortlisted .main_box .btn_box li:nth-last-child(1) .button::after {
    content: '';
    background-image: url(../img/btn_icon.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 11px;
    right: -10px;
}

.shortlisted .main_box .btn_box .button:hover {
    background: linear-gradient(-45deg, #76cef7 10%, #3dbcf8 60%, #028ecf 100%);
    color: #F6F6F6;
}

.shortlisted .main_box .btn_box .button.active {
    background: linear-gradient(-45deg, #6fc1e7 10%, #38b1e8 40%, #028ecf 100%);
    color: #F6F6F6;
    box-shadow: 0 3px 0 #487bbf;
}

.shortlisted .main_box .text {
    display: none;
}

.shortlisted .main_box .text.show {
    display: block;
}

.shortlisted .main_box .text .list {
    margin: 0;
    padding: 20px 0;
    list-style: none;

    position: relative;
}

/* .shortlisted .main_box .text .list::before {
    content: "";
    background-image: url(../img/news_icon6.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 180px;
    height: 170px;

    position: absolute;
    right: -200px;
    top: 30%;
} */

/* .shortlisted .main_box .text .list::after {
    content: "";
    background-image: url(../img/shortlisted_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 100px;
    height: 130px;

    position: absolute;
    right: -140px;
    bottom: -80px;
} */

.shortlisted .main_box .text .list li {
    display: flex;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid #3B4046;
}

.shortlisted .main_box .text .list li:nth-last-child(1) {
    border-bottom: none;
}

.shortlisted .main_box .text .list li p {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;

    flex-basis: calc(100% - 430px);
}

.shortlisted .main_box .text .list li p:nth-child(2) {
    font-size: 1rem;
    flex-basis: 180px;
    text-align: center;
}

.shortlisted .main_box .text .list li a {
    text-decoration: none;
    color: #F6F6F6;
    padding: 5px 20px;
    border-radius: 10px;
    border: 1px solid #000000;

    position: relative;
    overflow: hidden;

    background: linear-gradient(-40deg, #00a0e9 20%, #44bdf5 80%);

    box-shadow: 0px 4px 0px #6493D2;

    transition: 0.3s;
    transform: translateY(-2px);

    flex-basis: 250px;
    text-align: center;
}

.shortlisted .main_box .text .list li a:hover {
    box-shadow: 0px 1px 0px #6493D2;
    transform: translateY(3px);
}

.shortlisted .main_box .text .list li a:hover:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    background: linear-gradient(-40deg, #44bdf5 20%, #00a0e9 80%);
}

.shortlisted .main_box .text .list li a:before {
    animation: submit_btn_bgbefore 4s linear infinite;
}

@keyframes submit_btn_bgbefore {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

.shortlisted .main_box .text .list li a:hover:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0%;
    background: linear-gradient(-40deg, #00a0e9 20%, #44bdf5 80%);
}

.shortlisted .main_box .text .list li a:after {
    animation: submit_btn_bgafter 4s linear infinite;
}

@keyframes submit_btn_bgafter {
    0% {
        left: 0;
    }

    50% {
        left: -100%;
    }

    50.1% {
        left: 99.5%;
    }

    100% {
        left: 0;
    }
}

.shortlisted .main_box .text .list li a p {
    margin: 0;
    position: relative;
    z-index: 1;
    font-size: 1.3rem;
}

@media (max-width: 1199.98px) {

    .shortlisted .shortlisted_banner .title_h1 {
        transform: translateX(-50%) scale(1);
    }

    .shortlisted .main_box::after {
        top: -130px;
    }
}

@media (max-width: 991.98px) {

    .shortlisted .main_box::after {
        top: -100px;
    }

    .breadcrumb_box {
        transform: translateX(120px);
    }

    .shortlisted .shortlisted_banner {
        /* height: 330px; */
    }

    .shortlisted .shortlisted_banner .wave_box {
        transform: translateY(280px);
        width: 150%;
    }

    .shortlisted .shortlisted_banner .title_h1 {
        top: 90px;
    }

    .shortlisted .shortlisted_banner .planet {
        width: 150px;
        top: 150px;
        right: 2vw;
    }

    .shortlisted .main_box .box::after {
        width: 280px;
        height: 280px;
        top: -200px;
    }

    .shortlisted .main_box .box::before {
        width: 290px;
        height: 200px;
        right: -150px;
    }

    .shortlisted .main_box .box .circle_star::before {
        width: 100px;
        height: 100px;

        top: -0px;
        left: 48px;
    }

    .shortlisted .main_box .box .circle_star::after {
        width: 100px;
        height: 100px;

        top: -0px;
        left: 48px;
    }

    .shortlisted .shortlisted_banner::after {
        top: 200px;
    }

    .shortlisted .main_box .box {
        padding: 20px 60px;
    }

    .shortlisted .main_box .text .list li {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .shortlisted .main_box .text .list li p {
        flex-basis: 100%;
        margin-bottom: 10px;
    }

    .shortlisted .main_box .text .list li p:nth-child(2) {
        margin-bottom: 0;
        text-align: left;
        flex-basis: calc(100% - 250px);
    }

    .shortlisted .main_box .container::after {
        content: none;
    }

    .shortlisted .main_box .text .list::after {
        right: -100px;
    }
}

@media (max-width: 767.98px) {

    .breadcrumb_box {
        transform: translateX(100px);
    }

    .shortlisted .shortlisted_banner {
        /* height: 280px; */
        /* height: 410px; */
    }

    .shortlisted .shortlisted_banner .wave_box {
        transform: translateY(235px);
    }

    .shortlisted .shortlisted_banner .title_h1 {
        transform: translateX(-50%) scale(0.8);
        top: 70px;
    }

    .shortlisted .shortlisted_banner::before {
        top: 0;
    }

    .shortlisted .main_box .box::after {
        width: 200px;
        height: 200px;
        top: -150px;
        left: -80px;
    }

    .shortlisted .main_box .box::before {
        width: 200px;
        height: 180px;
        right: -80px;
        top: -30px;
    }

    .shortlisted .main_box .box .circle_star::before {
        width: 80px;
        height: 80px;

        top: 0px;
        left: 68px;
    }

    .shortlisted .main_box .box .circle_star::after {
        width: 80px;
        height: 80px;

        top: 0px;
        left: 68px;
    }

    .shortlisted .main_box .box {
        /* margin-top: 20px; */
        padding: 20px 40px;
        margin-bottom: 90px;
    }

    .shortlisted .main_box .text .list li p {
        flex-basis: 100%;
        margin-bottom: 10px;
        font-size: 1.4rem;
    }

    .shortlisted .main_box .text .list li p:nth-child(2) {
        flex-basis: 100%;
        text-align: right;
        margin-bottom: 10px;
    }

    .shortlisted .main_box .text .list li a {
        flex-basis: 220px;
    }

    .shortlisted .main_box .text .list li a p {
        font-size: 1.2rem;
    }

    .shortlisted .main_box::before {
        width: 150px;
        height: 190px;
    }
}

@media (max-width: 575.98px) {

    .shortlisted .main_box::after {
        content: none;
    }

    .shortlisted .shortlisted_banner .wave_box {
        transform: translateY(245px);
        width: 200%;
    }

    .shortlisted .shortlisted_banner .title_h1 {
        transform: translateX(-50%) scale(0.65);
        top: 70px;
    }

    .shortlisted .shortlisted_banner .planet {
        width: 100px;
        top: 100px;
        top: 160px;
    }

    .shortlisted .main_box .box::after {
        content: none;
    }

    .shortlisted .main_box .box .circle_star::before {
        top: -20px;
        left: -20px;
    }

    .shortlisted .main_box .box .circle_star::after {
        top: -20px;
        left: -20px;
    }

    .breadcrumb_box {
        transform: translateX(0px);
    }

    @media (max-width: 374.98px) {

        .shortlisted .shortlisted_banner .title_h1 {
            transform: translateX(-50%) scale(0.55);
        }
    }

    .shortlisted .main_box .btn_box .button {
        width: 130px;
    }

    .shortlisted .main_box::before {
        width: 110px;
        height: 140px;
    }

    .shortlisted .main_box .text .list::after {
        content: none;
    }
}





/* 歷屆入圍及得獎 */
.previous_awards .main_box .previous_btn {
    flex-wrap: wrap;
    justify-content: flex-start;
}

.previous_awards .main_box .previous_btn li {
    flex-grow: 1;
    flex-basis: 200px;
    margin-bottom: 15px;
}

.previous_awards .main_box .previous_btn .button {
    width: 100%;
}

.previous_awards .main_box .previous_btn .button::after {
    content: '';
    background-image: url(../img/news_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 7px;
    right: -13px;
}

.previous_awards .main_box .text .list .title_box {
    padding-bottom: 0;
    padding-top: 0;
}

.previous_awards .main_box .text .list .title_box p {
    font-size: 1.2rem;
}

.shortlisted .main_box .text .list li>p:nth-child(1) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-right: 5px;
}

.previous_awards .main_box .text .list .title_box p span {
    display: none;
}

.previous_awards .main_box .text .list li p:nth-child(2) {
    font-size: 1.2rem;
    text-align: left;
}

.previous_awards .main_box .text .list li p:nth-child(3) {
    flex-basis: 250px;
    text-align: center;
}

.previous_awards .main_box .text .list .awards {
    display: inline-block;
    font-size: 1rem;
    background: linear-gradient(45deg, #2B60A0 0%, #5191D9 100%);
    border-radius: 5px;
    padding: 3px 10px;
    padding-top: 4px;
    width: 75px;
    text-align: center;
    color: #F6F6F6;
    margin-right: 10px;
    transform: translateY(-2px);

    box-shadow: 0 1px 0px #0a2646;
}

.previous_awards .main_box .text .list .awards.first {
    background: linear-gradient(45deg, #ad049c 0%, #ef1717 100%);
    position: relative;
    box-shadow: 0 1px 0px #5191D9;
}

.previous_awards .main_box .text .list .awards.first::before {
    content: "";
    background-image: url(../img/shortlisted_crown.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 30px;
    height: 30px;

    position: absolute;
    top: -14px;
    left: -2px;
}

.previous_awards .main_box .previous_list .previous_list_btn {
    /* justify-content: flex-start; */

    /* margin: 0; */
    /* padding: 20px 0; */
    /* padding-top: 45px; */

    /* background-position: center top; */

    /* background-image: none; */
    /* padding-top: 0; */
}

.previous_awards .main_box .text.previous_list .previous_list_box {
    display: none;
}

.previous_awards .main_box .text.previous_list .previous_list_box.show {
    display: block;
}

.previous_awards .main_box .text.previous_list .list .title_box p {
    text-align: left;
    font-size: 1.2rem;
}

.previous_awards .main_box .previous_list .list li>p:nth-child(1) {
    flex-basis: calc(100% - 300px);
}

.previous_awards .main_box .previous_list .list li>p:nth-last-child(1) {
    font-size: 1.3rem;
    flex-basis: 280px;
}

.previous_awards .main_box .text.previous_list .list .title_box a {
    opacity: 0;
}

.previous_awards .biang {
    width: 26px;
}

@media (max-width: 1399.98px) {

    .previous_awards .main_box .previous_btn li {
        flex-basis: 180px;
    }
}

@media (max-width: 1199.98px) {

    .previous_awards .main_box .previous_btn li {
        flex-basis: 200px;
    }
}

@media (max-width: 991.98px) {

    .previous_awards .main_box .previous_btn li {
        flex-basis: 180px;
    }

    .previous_awards .main_box .text .list .title_box p {
        flex-basis: calc(100% - 250px);
    }

    .previous_awards .main_box .text .list .title_box p span {
        display: inline-block;
    }

    .previous_awards .main_box .text .list .title_box p:nth-child(2) {
        display: none;
    }

    .previous_awards .main_box .previous_list.text .list li p {
        flex-basis: 100%;
    }

    .previous_awards .main_box .previous_list.text .list .title_box p:nth-child(1) {
        /* flex-basis: calc( 100% - 150px); */
        flex-basis: 95px;
        /* margin-bottom: 0; */
    }

    .previous_awards .main_box .previous_list.text .list .title_box p:nth-child(1)::after {
        content: "/";
        padding-left: 5px;
    }

    .previous_awards .main_box .previous_list.text .list .title_box p:nth-child(2) {
        display: block;
        /* flex-basis: 150px; */
        flex-basis: calc(100% - 95px);
        transform: translateY(1px);
        margin-bottom: 10px;
    }

    .previous_awards .main_box .previous_list .list li>p:nth-last-child(1) {
        font-size: 1.2rem;
        text-align: right;
    }
}

@media (max-width: 575.98px) {

    .previous_awards .main_box .previous_btn li {
        flex-basis: 150px;
        margin-bottom: 10px;
    }

    .previous_awards .main_box .previous_btn .button {
        font-size: 1rem;
    }


    .previous_awards .main_box .text .list .title_box {
        display: none;
    }
}




/* 作品內容 */
.shortlisted_main .main_box .box {
    padding-bottom: 70px;
}

.shortlisted_main .main_box .box .title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 100px;
    margin-bottom: 0px;

    flex-wrap: wrap;
}

.shortlisted_main .main_box .box .title h2 {
    padding: 0;
    text-align: left;
    background-image: none;
}

/* .shortlisted_main .main_box .box .title h2 span {
    display: inline-block;
    background-image: url(../img/shortlisted_line.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 40px;
    height: 16px;
    margin-left: 8px;
} */

.shortlisted_main .main_box .box .title p {
    margin: 0;
    font-size: 1.2rem;

    text-align: right;
    width: 100%;
}

.shortlisted_main .main_box .box .line {
    margin: 20px 0;
}

.shortlisted_main .main_box .box .line img {
    width: 100%;
}

.shortlisted_main .main_box .box .text_box {
    font-size: 1.2rem;
    font-weight: 500;
    padding-top: 20px;
    padding-bottom: 15px;
}

.shortlisted_main .main_box .box .text_box h2.comments {
    padding: 0;
    /* padding-right: 50px; */
    margin: 0;
    display: inline-block;
    font-size: 1.5rem;
    margin-bottom: 10px;

    /* background-image: url(../img/shortlisted_line.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 40px; */
}

.shortlisted_main .main_box .box .text_box h2.comments+p {
    font-size: 1.1rem;
}

/* .shortlisted_main .main_box .text_box::before {
    content: "";
    background-image: url(../img/news_icon6.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 140px;
    height: 140px;
    position: absolute;
    right: -80px;
    top: 30%;
} */

/* .shortlisted_main .main_box .text_box::after {
    content: "";
    background-image: url(../img/shortlisted_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100px;
    height: 130px;
    position: absolute;
    right: -40px;
    bottom: -60px;
} */

@media (max-width: 991.98px) {
    .shortlisted_main .main_box .box .title h2 {
        font-size: 1.5rem;
    }
}






/* 歷屆活動花絮 */
.previous_photo .main_box .box .title h2 {
    padding: 0 45px;
    background-image: url(../img/event_icon1.svg), url(../img/event_icon1.svg);
    background-size: 40px;
}

.previous_photo .main_box .photo_btn_1 {
    /* background-image: none; */
    /* justify-content: flex-start; */
}


.previous_photo .main_box .line img {
    width: 100%;
}


.previous_photo .main_box .photo_btn_2 {
    background-image: none;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.previous_photo .main_box .photo_btn_2 li {
    flex-grow: 1;
    flex-basis: 200px;
    margin-bottom: 15px;
}

.previous_photo .main_box .photo_btn_2 .button {
    width: 100%;
}

.previous_photo .main_box .photo_btn_2 .button::after {
    content: '';
    background-image: url(../img/news_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 7px;
    right: -13px;
}

.previous_photo .main_box .photo_btn_3 {
    background-image: none;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.previous_photo .main_box .photo_btn_3 li {
    flex-grow: 1;
    flex-basis: 200px;
    margin-bottom: 15px;
}

.previous_photo .main_box .photo_btn_3 .button {
    width: 100%;
}

.previous_photo .main_box .photo_btn_3 .button::after {
    content: '';
    background-image: url(../img/news_icon4.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 7px;
    right: -13px;
}

.previous_photo .main_box .photo_box {
    display: flex;
    flex-wrap: wrap;
    margin: 20px -10px;
    margin-bottom: 30px;

    display: none;
}

.previous_photo .main_box .photo_box.show {
    display: flex;
}

.previous_photo .main_box .photo_box .img_box {
    flex-basis: calc(100% / 3);
    padding: 10px;

    position: relative;
    cursor: pointer;
}

.previous_photo .main_box .photo_box .img_box:hover::before {
    content: "";
    background-color: #79a3daaf;
    background-image: url(../img/previous_photo_icon1.svg);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;

    width: calc(100% - 20px);
    height: calc(100% - 20px);

    position: absolute;
    top: 10px;
    left: 10px;

    border-radius: 5px;
}

.previous_photo .main_box .photo_box .img_box img {
    width: 100%;
    border-radius: 5px;
}

.previous_photo .main_box .photo_box .img_box img:focus-visible {
    outline: 3px dotted #ef1717;
}

.modal {
    background-color: #79a3daaf;
}

.modal-dialog {
    max-width: 800px;
}

.modal-content {
    background-color: transparent;
    border: none;
}

.modal-content .previous_photo_icon1 {
    border: none;
    background-color: transparent;
    border-radius: 50px;


    background-image: url(../img/previous_photo_icon1.svg);
    background-repeat: no-repeat;
    background-size: 100%;

    width: 35px;
    height: 35px;

    position: absolute;
    top: 5px;
    right: 5px;

    transition: 0.3s;

    transform: rotate(45deg);

    cursor: pointer;
    z-index: 2;
}

.modal-content .previous_photo_icon1:hover {
    transform: rotate(225deg) scale(1.05);
}

.modal-body {
    padding: 40px;
}

.modal-body img {
    width: 100%;
    border-radius: 5px;
}

.previous_photo .main_box .photo_box .comimg_soon {
    margin: 30px auto;
}

@media (max-width: 1399.98px) {

    .previous_photo .main_box .photo_btn_2 li:nth-last-child(1) {
        flex-basis: 657px;
    }

    .previous_photo .main_box .photo_btn_3 li:nth-last-child(1) {
        flex-basis: 657px;
    }
}

@media (max-width: 991.98px) {

    .previous_photo .main_box .photo_btn_2 li:nth-last-child(1) {
        flex-basis: 200px;
    }

    .previous_photo .main_box .photo_btn_3 li:nth-last-child(1) {
        flex-basis: 200px;
    }

    .previous_photo .main_box .photo_box .img_box {
        flex-basis: calc(100% / 2);
    }
}

@media (max-width: 575.98px) {

    .previous_photo .main_box .photo_box .img_box {
        flex-basis: calc(100% / 1);
    }

    .modal-body {
        padding: 0px;
    }

    .modal-content .previous_photo_icon1 {
        top: -45px;
        right: 0px;
    }

    @media (max-width: 374.98px) {

        .previous_photo .main_box .photo_btn_1 .button {
            width: 108px;
        }
    }
}




.siteMap .siteMap_list li a {
    background: linear-gradient(-40deg, #38b1e8 20%, #028ecf 80%) !important;
    box-shadow: 0px 4px 0px #73c9f0 !important;
}

/* .siteMap .siteMap_list li a:hover {
        box-shadow: 0px 4px 0px #487bbf !important;
    }

    a:focus-visible,
    button:focus-visible {
        outline: 3px dotted #000;
        box-shadow: 1px 1px 0px #fff , inset 1px 1px 0px #fff;
    } */


.accesskey_box {
    position: relative;
}

#accesskey_c {
    top: 0 !important;
}

/* 無障礙標籤 */
footer .footer_box {
    align-items: flex-end;
}

.activityWeb a img {
    height: 31px;
    margin: 15px 0;
}

@media (max-width: 575.98px) {

    footer .footer_box li {
        text-align: left;
    }

    .activityWeb a img {
        margin: 0;
    }
}