.overlay {
    background: rgba(255, 255, 255, .1) !important;
}

.tp-caption.large_bold_white {
    font-size: 32px !important;
}

.btn-hidden {
    display: block;
    background-color: rgba(255, 255, 255, 0);
    height: 500px !important;
}

.hr {
    border-bottom: 1px solid #E4E4E4;
    padding: 20px 0;
}

.pb-5 {
    margin-bottom: 48px;
}

/* logo 設定 */
#topNav a.logo {
    padding-top: 15px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .hr {
        padding: 0;
    }
}

/* 區塊標題設定 */

section {
    border-bottom: #fff 0px solid;
}

section header {
    margin-bottom: 30px;
}

section header div.icon {
    width: 3px;
    height: 14px;
    background-color: #cc0000;
    float: left;
    margin-top: 15px;
}

section header h1 {
    display: block;
    color: #cc0000 !important;
    float: left;
    font-size: 30px !important;
    text-align: left;
    letter-spacing: 3px !important;
    line-height: 1 !important;
    padding-left: 15px;
}

section header h1>span {
    color: #cc0000;
    font-size: 13px !important;
    padding-left: 10px;
    letter-spacing: 1px;
}


@media only screen and (max-width: 1215px) {}

@media only screen and (max-width: 768px) {
    .bubble {
        left: 200px;
        top: -80px;
    }

    #news_carousel,
    #section-2 {
        border-bottom-width: 0px !important;
        padding-top: 30px !important;
        padding-bottom: 0px !important;
    }
}

/* Banner區塊 */
.bg-video {
    position: relative;
    background-image: url(../images/index/banner-1.jpg);
    background-position: center;
    background-attachment: scroll;
}

.bg-video .bg {
    position: absolute;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.bg-video video {
    width: 100%;
}

#section-banner {
    background-image: url(../images/index/banner-3.jpg);
    background-attachment: scroll;
    background-position-x: center;
    color: #fff;
    padding-top: 245px;
    height: 775px;
}

/* #section-banner .container {
    display: flex;
    position: relative;
    top: 250px;
} */

#section-banner h1 {
    color: #fff;
    font-size: 32px;
}

#section-banner p {
    color: #fff;
    font-size: 20px;
    line-height: 32px;
    max-width: 660px;
    margin-right: auto;
    margin-left: auto;
}

#section-banner .word-rotator {
    height: 32px !important;
    color: #A8DADC;
    font-weight: bold;
    position: relative;
    top: -3px;
}

#section-banner .word-rotator .items span {
    text-align: left;
    padding: 0;
}

/* #section-banner span {
    color: #A8DADC;
    font-weight: bold;
} */

#section-banner .btn-danger {
    background-color: #C1121F;
    padding: 6px 80px;
    font-size: 18px;
}

#section-banner .btn-default {
    background-color: unset;
    border: unset;
    font-size: 16px;
    color: #fff;
    margin-top: 20px;
}

#section-banner .btn-default svg {
    position: relative;
    top: 5px;
}

#videoModal iframe {
    max-width: 1280px;
    max-height: 720px;
    width: 100%;
    height: 100vh;
}

@media only screen and (max-width: 1215px) {
    /* #section-banner .container {
        top: 180px;
    } */
}

@media only screen and (max-width: 991px) {
    /* #section-banner .container {
        top: 120px;
    } */
}

@media (min-width: 481px) and (max-width: 768px) {
    /* #section-banner .container {
        top: 50px;
    } */

    /* #section-banner h1 {
        font-size: 20px;
        margin-bottom: 10px;
    } */
}

@media (min-width: 320px) and (max-width: 480px) {

    #section-banner {
        background-image: url(../images/index/banner-3-s.jpg);
        padding-top: 125px;
        height: 635px;
    }

    #videoModal iframe {
        width: 100%;
        height: 400px;
    }

    /* #section-banner h1 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    #section-banner p {
        font-size: 14px;
        margin-bottom: 10px;
        line-height: unset;
    }*/

    /* #section-banner .container {
        top: 20px;

    }

    .bg-video video {
        width: unset;
        height: 420px;
        position: relative;
        left: -180px;
    } */

}

/* 核心服務區塊 */
#section-service {
    background-color: #f5f5f5;
}

#section-service .title h2 {
    font-size: 24px;
    color: #1D3557;
    margin-bottom: 5px;
}

#section-service .title p {
    font-size: 14px;
    color: #457B9D;
    margin-top: 5px;
}

#section-service .gutter {
    margin-left: -10px;
    margin-right: -10px;
}

#section-service .gutter>.content {
    padding-left: 10px;
    padding-right: 10px;
}

#section-service .content .box {
    border: 1px solid #DBDBDB;
    border-radius: 3px;
    padding: 36px 20px;
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-position: center right;
    background-color: #fff;
}

#section-service .content .box:hover {
    box-shadow: 0px 0px 10px #888888;
}

#section-service .content .box h3 {
    font-size: 20px;
    color: #457B9D;
    margin-bottom: 0;
}

#section-service .content .box h3 span {
    font-size: 14px;
    color: #C7C7C7;
}

#section-service .content .box hr {
    border: 3px solid #C1121F;
    width: 42.5px;
    height: 0px;
    margin: 20px 0;
}

#section-service .content .box p {
    font-size: 16px;
    color: #1F1F1F;
    height: 96px;
    margin-bottom: 40px;
}

#section-service .content .box a {
    font-size: 16px;
    color: #669BBC;
    letter-spacing: 0.5em;
}

@media (min-width: 320px) and (max-width: 480px) {
    #section-service img {
        width: 50px;
        height: auto;
    }

    #section-service .content .box p {
        height: unset;
    }
}



/* 客制解方 */
#section-method {
    background-color: #3A5E80;
}

#section-method .title h2 {
    font-size: 24px;
    color: #fff;
    margin-bottom: 5px;
}

#section-method .title p {
    font-size: 14px;
    color: #fff;
    margin-top: 5px;
    margin-bottom: 60px;
}

#section-method .content h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
}

#section-method .content p {
    font-size: 16px;
    color: #E3E3E3;
}

@media only screen and (max-width: 768px) {
    #section-method .content {
        padding: 0 40px;
    }
}

/* 客戶列舉 */
#section-customer {
    background-color: #F5F5F5;
}

#section-customer .title h2 {
    font-size: 24px;
    color: #1D3557;
    margin-bottom: 5px;
}

#section-customer .title p {
    font-size: 14px;
    color: #457B9D;
    margin-top: 5px;
    margin-bottom: 60px;
}

/* PARALLAX */
.parallax p {
    margin-bottom: 0;
    color: #1D3557;
}

.parallax span {
    font-size: 36px;
    font-weight: bold;
}

.parallax small {
    font-size: 18px;
}

.countTo-md span.countTo {
    display: unset;
}

.parallax h5 {
    margin-bottom: 0;
    color: #1D3557;
    font-size: 16px;
    font-weight: bold;
}

/* 最新資訊/內容 */
#section-news .pb-72 {
    padding-bottom: 72px;
}

#section-news {
    background-color: #F5F5F5;
}

#section-news .title h2 {
    font-size: 24px;
    color: #1D3557;
    margin-bottom: 5px;
}

#section-news .title p {
    font-size: 14px;
    color: #457B9D;
    margin-top: 5px;
    margin-bottom: 60px;
}

#section-news h3 {
    font-size: 20px;
    line-height: 22px;
    color: #1D3557;
    margin-bottom: 20px;
    border-left: 3px solid #C1121F;
    padding-left: 10px;
}

#section-news h4 {
    font-size: 14px;
    color: #780000;
    margin: 10px;
    font-weight: bold;
}

#section-news h4 span {
    color: #8D8D8D;
}

#section-news .time {
    font-size: 14px;
    color: #8D8D8D;
    margin: 10px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#section-news .content {
    font-size: 14px;
    color: #1F1F1F;
    margin: 10px;
    font-weight: bold;
    /* width: 400px; */
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    font-family: sans-serif;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media only screen and (max-width: 768px) {
    #section-news .pb-72 {
        padding-bottom: 0;
    }
}

/* 活動資訊區塊 */
#section-2 {
    padding-bottom: 10px;
}

#section-2 h1 a {
    color: #cc0000;
    border: 1px solid #cc0000;
    border-radius: 30px;
    font-size: 13px;
    font-weight: bold;
    padding: 3px 5px 3px 10px;
    position: relative;
    top: -8px;
}

#section-2 h1 a:hover {
    background-color: #cc0000;
    color: #ffffff;
}

#section-2 img {
    margin-bottom: 10px;
}

#section-2 div.type {
    background-color: #ff6666;
    padding: 1px 1px 1px 20px;
}

#section-2 div.type p {
    color: #ffffff;
    margin: 0;
    padding: 4px 0px 4px 10px;
}

#section-2 div.type2 {
    background-color: #199ED8;
}

#section-2 div.type3 {
    background-color: #999999;
}

#section-2 div.type span {
    display: block;
    float: right;
    background-color: #ffffff;
    color: #ff6666;
    padding: 4px 10px;
    margin-top: -4px;
    font-weight: bold;
}

#section-2 div.type span:hover {
    background-color: #ffe8e8;
    color: #000000;
}

#section-2 div.type2 span {
    color: #199ED8;
}

#section-2 div.type2 span:hover {
    background-color: #66ffff;
}

#section-2 div.type3 span {
    color: #999999;
}

#section-2 div.type3 span:hover {
    background-color: #cccccc;
}

#section-2 p {
    font-size: 14px;
    padding: 5px 10px;
    margin: 0;
}

#section-2 p.time {
    color: #000000;
}

#section-2 p.title {
    color: #666666;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
}

#section-2 .center {
    margin-top: 30px;
}

#section-2 .btn {
    font-family: 'Arial Normal', Arial;
    font-size: 13px;
    border-width: 1px;
}

#section-2 .btn:hover {
    background-color: #ff6666;
    border-color: #ff6666;
}

@media only screen and (max-width: 768px) {}


/* NEWS 區塊 debby 4/22 功能 #3656  */
#news .row {
    margin-right: 0;
    margin-left: 0;
}

#news header {
    padding: 0;
    margin-bottom: 0px !important;
}

#news h1 {
    margin-bottom: 15px;
}

#news .c1 {
    padding: 10px 10px 10px 10px;
}

#news .cr1 {
    padding: 0 10px 0 0;
}

#news .c2 {
    padding: 0;
}

#news .c3 {
    padding: 0 0 0 15px;
}

#news .c4 {
    padding: 10px !important;
}

#news .cn {
    padding: 0 !important;
}

#news .c5 {
    padding: 0 7px !important;
}

#news #youtube .media-img {
    margin-bottom: 15px;
}

#news #youtube #main-media-img {
    position: relative;
    overflow: hidden;
}

#news #youtube_main .t1 {
    font-weight: bold;
}

#news #youtube .bg-content p {
    position: absolute;
    bottom: -30px;
    text-align: center;
    background-color: rgba(102, 102, 102, 0.8);
    color: #ffffff;
    font-size: 18px;
    padding-right: 30px;
    left: 50%;
    width: 100%;
    margin-left: -50%;
    padding: 20px;
}

#news #youtube .media-icon {
    float: left;
}

#news #youtube h1 {
    color: #000000 !important;
    font-size: 20px !important;
}

#news #youtube #yt_big {
    display: unset;
}

#news #youtube #yt_small {
    display: none;
}

#news #youtube_content>.row {
    padding-left: 0;
    padding-right: 0;
}

#news #youtube .text p {
    margin-bottom: 0;
    font-size: 16px;
}

#news #youtube .text .title {
    color: #CC0000;
    font-weight: bold;
    margin-top: 10px;
}

#news #youtube .text .content {
    color: #1e1e1e;
}

#news #article {
    color: #1e1e1e;
}

#news #article .media-icon {
    float: left;
}

#news #article h1 {
    color: #000000 !important;
    font-size: 20px !important;
}

#news #article .title {
    color: #1e1e1e;
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
}

#news #article .content {
    color: #1e1e1e;
}

#news #article .user {
    color: #1e1e1e;
}

#news #article .user span {
    color: rgb(204, 0, 0);
    border-right: 1px solid #d1d1d1;
    padding-right: 10px;
    margin-right: 8px;
    font-weight: bold;
}

#news #article .summary-article p {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 0px
}

#news #article .summary-article .see-more {
    display: flex;
    justify-content: end;
    color: #000000;
}

#news #newsInformation {
    background-color: #f2f2f2;
    color: #1e1e1e;
    padding: 20px 0px;
    margin-top: 15px;
}

#news #newsInformation h1 {
    color: #000000 !important;
    font-size: 20px !important;
}

#news #newsInformation .media-icon {
    float: left;
}

#news #newsInformation .order {
    text-align: end;
    padding-right: 20px;
}

#news #newsInformation .order span {
    border-right: 1px solid #d1d1d1;
    padding-right: 10px;
    margin-right: 8px;
}

#news #newsInformation .order span a {
    color: #000000;
}

#news #newsInformation .sneakPeek {
    margin-top: 10px;
}

#news #newsInformation .sneakPeek a {
    color: #1e1e1e;
}

#news #newsInformation .sneakPeek span {
    color: #3399FF;
    border-right: 1px solid #d1d1d1;
    padding-right: 10px;
    margin-right: 8px;
    font-weight: bold;
}

#news #newsInformation .sneakPeek p {
    color: #1e1e1e;
    margin-bottom: 0;
    font-size: 16px;
}

.position-absolute {
    position: absolute;
    top: 0;
}

@media only screen and (max-width: 768px) {
    #news header {
        width: 100%;
        height: 50px;
    }

    #news #youtube #yt_big {
        display: none;
    }

    #news #youtube #yt_small {
        display: unset;
    }

    section div.row>div {
        margin-bottom: 20px;
    }

    #news .cr1 {
        padding: 0;
    }

    #news .c3 {
        padding: 0;
    }

    #news .summary-article {
        padding: 0;
        text-align: justify;
    }
}

/* end NEWS 區塊 debby 4/22 功能 #3656  */

/* youtube */
#video {
    padding: 0;
    margin: 0;
}

.hero {
    height: 100vh;
    overflow: hidden;
    background: url("https://www.saintfuckingpetersburg.com/img/drone_shot.44a2dd58.jpg") no-repeat 50% fixed;
    background-size: cover;
}

.hero_content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* height: 860px; */
    z-index: 8675309;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero_video,
.hero iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;
    /* 9/16*100 = 56.25 */
    min-height: 100vh;
    min-width: 177.77vh;
    /* 16/9*100 = 177.77 */
}

.hero iframe {
    opacity: 0;
}

.hero iframe.loaded {
    opacity: 1;
}

.hero_content_title {
    color: #fff;
    font-family: Georgia, Times, Times New Roman, serif;
    font-size: clamp(1.5rem, 5vw, 3.25rem);
    line-height: 1.75rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: lighter;
    margin-bottom: 2.625rem;
}

.hero_content_play {
    display: block;
    position: relative;
    width: 4rem;
    height: 4rem;
    border: 2px solid transparent;
    border-radius: 50%;
    background: rgba(22, 22, 16, 0.75);
    text-indent: -9999px;
    transition: border-color 0.3s ease;
    animation: pulse 3s infinite;
}

.hero_content_play:hover {
    border-color: #fff;
    animation: none;
}

.hero_content_play:after {
    content: "";
    display: block;
    position: absolute;
    top: 1rem;
    left: 1.425rem;
    width: 0;
    height: 0;
    border: 0;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
    border-width: 1rem 0 1rem 1.5rem;
}

.hero h1 {
    color: #fff;
    font-size: 32px;
}

.hero p {
    color: #fff;
    font-size: 20px;
    line-height: 32px
}

.hero .word-rotator {
    height: 32px !important;
    color: #A8DADC;
    font-weight: bold;
    position: relative;
    top: -3px;
}

.hero .word-rotator .items span {
    text-align: left;
    padding: 0;
}

/* @media only screen and (max-width: 1600px) {
    .hero {
        height: 906px;
    }
} */

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 hsla(24, 37%, 69%, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px hsla(24, 37%, 69%, 0);
    }

    100% {
        box-shadow: 0 0 0 0 hsla(24, 37%, 69%, 0);
    }
}