@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
@import url(https://fonts.googleapis.com/css?family=Rubik:500);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

body {
    font-family: 'Rubik','Noto Sans TC', sans-serif;
}

.ktfont {
    font-family: 'Rubik','Noto Sans TC', sans-serif;
}

a {
    font-family: 'Rubik','Noto Sans TC', sans-serif;
}

.pointer {
    cursor: pointer;
}

#LOGO {
    width: 230px;
    height: 60px;
    background: url(../img/LOGO.png) 0px 5px/230px no-repeat;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#KTNav {
    font-weight: 700;
    background-color: #fff;
    border-bottom: 3px solid rgb(250, 191, 42);
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}

    #KTNav .navbar-brand {
        color: #fff;
    }

    #KTNav .navbar-nav {
        margin-top: 1rem;
        letter-spacing: 0.0625rem;
    }

        #KTNav .navbar-nav li.nav-item a.nav-link {
            color: #595656;
            text-align: center;
            font-size: 20px;
        }

            #KTNav .navbar-nav li.nav-item a.nav-link:hover {
                color: #fabf2a
            }

            #KTNav .navbar-nav li.nav-item a.nav-link:active, #KTNav .navbar-nav li.nav-item a.nav-link:focus {
                color: #595656;
            }

            #KTNav .navbar-nav li.nav-item a.nav-link.active {
                color: #fabf2a
            }

    #KTNav .navbar-toggler {
        font-size: 80%;
        padding: 0.8rem;
    }

    #KTNav.navbar-shrink {
        background-color: rgba(255, 255, 255, 0.9);
        -webkit-transition: background 0.3s ease;
        -moz-transition: background 0.3s ease;
        -o-transition: background 0.3s ease;
        transition: background 0.3s ease;
    }

.navbar-shrink #LOGO {
    width: 230px;
    height: 60px;
    background: url(../img/LOGO.png) 0px 5px/230px no-repeat;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.bg-1 {
    background-image: url('../img/banner1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 55vh;
}

.bg-2 {
    background-image: url('../img/banner2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 55vh;
}

.bg-3 {
    background-image: url('../img/banner3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 55vh;
}

.banner-text {
    background: rgba(93, 90, 90, 0.5);
    text-align: center;
}

    .banner-text h1 {
        padding: 5px 10px;
        font-size: 65px;
        color: #fff;
    }

.flexslider {
    padding-top: 78px;
}

.banner-img {
    height: calc(100vh - 73px);
}

@media (min-width: 992px) {
    .flexslider {
        padding-top: 103px;
    }

    .banner-img {
        width: 100vw;
        height: calc(100vh - 103px);
    }
}

@media (max-width: 900px) {
    .banner-text h1 {
        font-size: 50px;
    }
}

@media (max-width: 700px) {
    .banner-text h1 {
        font-size: 35px;
    }
}

@media (min-width: 992px) {
    #LOGO {
        width: 350px;
        height: 85px;
        background: url(../img/LOGO.png) 0px 0px/350px no-repeat;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    #KTNav {
        -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
        -moz-transition: padding-top 0.3s, padding-bottom 0.3s;
        transition: padding-top 0.3s, padding-bottom 0.3s;
    }


        #KTNav .navbar-nav {
            margin-top: 0;
        }

            #KTNav .navbar-nav > li.nav-item > a.nav-link.active {
                color: #fff;
                background: #fabf2a
            }

                #KTNav .navbar-nav > li.nav-item > a.nav-link.active:active, #KTNav .navbar-nav > li.nav-item > a.nav-link.active:focus, #KTNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
                    color: #fff;
                    background: #fabf2a
                }
}

.bg-KT {
    background: #fabf2a;
}

.color-KT {
    color: #fabf2a;
}

section {
    padding: 6rem 0;
}

.section-title {
    position: absolute;
    width: 200px;
    margin-top: 20px;
    font-size: 26px;
    text-transform: uppercase;
    top: 0;
    box-sizing: border-box;
    padding: 5px;
}

.title-style1 {
    background: #fff;
    color: #595656;
}

.title-style2 {
    background: #fabf2a;
    color: #fff;
}

section {
    position: relative;
}

.row {
    margin: 0px;
}

.about-content {
    font-size: 20px;
}

@media (min-width: 992px) {
    .about-content {
        font-size: 25px;
    }
}

#products {
    background: linear-gradient(top,#4e4e4e,rgba(98, 95, 95, 0.5)),url(../img/B_Products.jpg);
    background: -moz-linear-gradient(top,#4e4e4e,rgba(98, 95, 95, 0.5)),url(../img/B_Products.jpg);
    background: -webkit-linear-gradient(top,#4e4e4e,rgba(98, 95, 95, 0.5)),url(../img/B_Products.jpg);
    background: -ms-linear-gradient(top,#4e4e4e,rgba(98, 95, 95, 0.5)),url(../img/B_Products.jpg);
    background: -webkit-gradient(linear,top,#4e4e4e,rgba(98, 95, 95, 0.5)),url(../img/B_Products.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#contact {
    padding-top: 200px;
    padding-bottom: 200px;
    background: linear-gradient(left,rgba(132, 132, 132, 0.3),rgba(255, 255, 255, 0.5)),url(../img/B_Contact.jpg);
    background: -moz-linear-gradient(left,rgba(132, 132, 132, 0.3),rgba(255, 255, 255, 0.5)),url(../img/B_Contact.jpg);
    background: -webkit-linear-gradient(left,rgba(132, 132, 132, 0.3),rgba(255, 255, 255, 0.5)),url(../img/B_Contact.jpg);
    background: -ms-linear-gradient(left,rgba(132, 132, 132, 0.3),rgba(255, 255, 255, 0.5)),url(../img/B_Contact.jpg);
    background: -webkit-gradient(linear,left,rgba(132, 132, 132, 0.3),rgba(255, 255, 255, 0.5)),url(../img/B_Contact.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mail {
    text-decoration: none;
    color: white;
}

    .mail:hover {
        text-decoration: none;
        color: #595656;
    }

.footer {
    border-top: 3px solid rgb(250, 191, 42);
    padding-top: 40px;
    padding-bottom: 10px;
    background-color: #5d5a5a;
    color: #fff;
}

.footer-contact {
    text-align: left;
    padding: 0px;
    margin: 0px auto;
}

    .footer-contact i {
        width: 20px;
    }

.contact-i {
    float: left;
}

.footer-a {
    text-decoration: none;
    color: white;
}

    .footer-a:hover {
        text-decoration: none;
        color: #fabf2a;
    }

.footer-logo {
    width: 7%;
    position: relative;
    top: -2px;
    right: 5px;
}

.link-bg {
    background: rgba(250, 191, 42, 0.7);
    padding: 10px;
    font-size: 40px;
}

@media (max-width: 550px) {
    .link-bg {
        font-size: 25px;
    }
}

.pk-bg {
    background: rgba(0, 0, 0, 0.4);
    font-size: 40px;
}

.P-Title {
    text-align: center;
    color: white;
    font-size: 60px;
}

hr.KITA-line {
    max-width: 500px;
    padding: 0;
    text-align: center;
    border-top: solid 10px;
    border-radius: 10px;
    margin-top: 80px;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    border-color: rgba(250, 191, 42, 0.7);
}

    hr.KITA-line:after {
        position: relative;
        top: -35px;
        display: inline-block;
        content: 'KITA';
        font-size: 40px;
        padding: 0 30px;
        border-radius: 10px;
        color: #fff;
        background-color: rgb(250, 191, 42);
    }

hr.KT-line {
    max-width: 500px;
    padding: 0;
    text-align: center;
    border-top: solid 10px;
    border-radius: 10px;
    margin-top: 100px;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    border-color: rgba(250, 191, 42, 0.7);
}

    hr.KT-line:after {
        position: relative;
        top: -35px;
        display: inline-block;
        content: 'KT-TECH';
        font-size: 40px;
        padding: 0 30px;
        border-radius: 10px;
        color: #fff;
        background-color: rgb(250, 191, 42);
    }

.KT-item:hover .KT-Mask {
    opacity: 1;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.KT-Mask {
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    cursor: pointer;
    z-index: 99;
    font-size: 25px;
    color: #fff;
}

    .KT-Mask i {
        margin: 25%;
        color: rgba(255, 255, 255, 0.7);
    }


.KT-item-title {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: rgba(126, 123, 123, 0.8);
    font-size: 18px;
    color: #ffffff;
}


@media (min-width: 1030px) {
    .KT-item-title {
        font-size: 20px;
    }
}
@media (min-width: 1180px) {
    .KT-item-title {
        font-size: 24px;
    }
}



.scroll-to-top {
    z-index: 1042;
    right: 1rem;
    bottom: 1rem;
    display: none;
}

    .scroll-to-top a {
        width: 3.5rem;
        height: 3.5rem;
        background-color: rgba(33, 37, 41, 0.5);
        line-height: 3.1rem;
    }
/*detail頁面*/
.P-Page {
    padding: 0px;
}

.content {
    font-size: 20px;
}

.Page-row {
    margin-left: 20px;
    margin-right: 20px;
}

/*.table tr > th {
    padding: 0px;
    vertical-align: middle;
}

.table tr > td {
    padding: 0px;
    vertical-align: middle;
}

.table {
    font-size: 12px;
}
/*RF Cable*/
.KTS {
    display: block;
    text-align: center;
    /* border-top: 3px solid #5d5a5a; */
    /* border-bottom: 3px solid #5d5a5a; */
    padding: 15px 0px;
    background-color: #eeeeee;
    box-shadow: 5px 5px 20px 0px #cccccc;
    border-radius: 20px;
}

    .KTS li {
        padding: 5px 5px;
        display: inline-block;
    }

        .KTS li .nav-link {
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -ms-transition: all 0.3s;
            transition: all 0.3s;
        }

            .KTS li .nav-link:hover {
                -webkit-transform: translate(0px, -5px);
                -moz-transform: translate(0px, -5px);
                -ms-transform: translate(0px, -5px);
                -o-transform: translate(0px, -5px);
                transform: translate(0px, -5px);
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -o-transition: all 0.3s;
                -ms-transition: all 0.3s;
                transition: all 0.3s;
            }

            .KTS li .nav-link.active {
                -webkit-transform: translate(0px, -5px);
                -moz-transform: translate(0px, -5px);
                -ms-transform: translate(0px, -5px);
                -o-transform: translate(0px, -5px);
                transform: translate(0px, -5px);
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                -o-transition: all 0.3s;
                -ms-transition: all 0.3s;
                transition: all 0.3s;
            }

        .KTS li #TPC-Tab {
            border-radius: 0;
            border: 2px solid #26adcb;
            color: #26adcb;
            background-color: white;
        }

            .KTS li #TPC-Tab:hover {
                background-color: rgba(38, 173, 203, 0.7);
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

            .KTS li #TPC-Tab.active {
                background-color: #26adcb;
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

        .KTS li #RCA-Tab {
            border-radius: 0;
            border: 2px solid #d20b5d;
            color: #d20b5d;
            background-color: white;
        }

            .KTS li #RCA-Tab:hover {
                background-color: rgba(210, 11, 93, 0.7);
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

            .KTS li #RCA-Tab.active {
                background-color: #d20b5d;
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

        .KTS li #CST-Tab {
            border-radius: 0;
            border: 2px solid #1a62c9;
            color: #1a62c9;
            background-color: white;
        }

            .KTS li #CST-Tab:hover {
                background-color: rgba(26, 98, 201, 0.7);
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

            .KTS li #CST-Tab.active {
                background-color: #1a62c9;
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

        .KTS li #CPM-Tab {
            border-radius: 0;
            border: 2px solid #ff6464;
            color: #ff6464;
            background-color: white;
        }

            .KTS li #CPM-Tab:hover {
                background-color: rgba(255, 100, 100, 0.7);
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

            .KTS li #CPM-Tab.active {
                background-color: #ff6464;
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

        .KTS li #CCT-Tab {
            border-radius: 0;
            border: 2px solid #90ce13;
            color: #90ce13;
            background-color: white;
        }

            .KTS li #CCT-Tab:hover {
                background-color: rgba(144, 206, 19, 0.7);
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

            .KTS li #CCT-Tab.active {
                background-color: #90ce13;
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

        .KTS li #ANTENNA-Tab {
            border-radius: 0;
            border: 2px solid #ffb026;
            color: #ffb026;
            background-color: white;
        }

            .KTS li #ANTENNA-Tab:hover {
                background-color: rgba(255, 176, 38, 0.7);
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

            .KTS li #ANTENNA-Tab.active {
                background-color: #ffb026;
                color: white;
                box-shadow: 5px 5px 20px 0px #999999;
            }

.RF-item {
    border-radius: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

    .RF-item a {
        text-decoration: none;
    }

    .RF-item:hover {
        box-shadow: 5px 5px 20px 0px #999999;
        -webkit-transform: translate(-5px, -5px);
        -moz-transform: translate(-5px, -5px);
        -ms-transform: translate(-5px, -5px);
        -o-transform: translate(-5px, -5px);
        transform: translate(-5px, -5px);
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -ms-transition: all 0.3s;
        transition: all 0.3s;
    }

.RF-caption {
    color: #ffffff;
}

    .RF-caption p {
        padding: 5px 0px;
    }
/*RF Item Style*/
#ANTENNA .RF-item {
    border: 4px solid #ffb026;
    background-color: #ffb026;
}

    #ANTENNA .RF-item img {
        background-color: #ffffff;
        border-radius: 8px 8px 0px 0px;
    }

#CCT .RF-item {
    border: 4px solid #90ce13;
    background-color: #90ce13;
}

    #CCT .RF-item img {
        background-color: #ffffff;
        border-radius: 8px 8px 0px 0px;
    }

#CPM .RF-item {
    border: 4px solid #ff6464;
    background-color: #ff6464;
}

    #CPM .RF-item img {
        background-color: #ffffff;
        border-radius: 8px 8px 0px 0px;
    }

#CST .RF-item {
    border: 4px solid #1a62c9;
    background-color: #1a62c9;
}

    #CST .RF-item img {
        background-color: #ffffff;
        border-radius: 8px 8px 0px 0px;
    }

#RCA .RF-item {
    border: 4px solid #d20b5d;
    background-color: #d20b5d;
}

    #RCA .RF-item img {
        background-color: #ffffff;
        border-radius: 8px 8px 0px 0px;
    }

#TPC .RF-item {
    border: 4px solid #26adcb;
    background-color: #26adcb;
}

    #TPC .RF-item img {
        background-color: #ffffff;
        border-radius: 8px 8px 0px 0px;
    }
/*RF Cable End*/
.Page-Title {
    position: absolute;
    margin: auto;
    width: 100%;
    top: 170px;
    font-size: 40px;
    background: rgba(0, 0, 0, 0.5);
}

.Page-Title-BG-Marathon {
    background-image: url(../img/KT-Products/Marathon.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 30%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-ICT {
    background-image: url(../img/KT-Products/ICT.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 75%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-NanotekBrush {
    background-image: url(../img/KT-Products/Nanotek-Brush.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 80%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-CABLE {
    background-image: url(../img/KT-Products/CABLE.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-ShieldingBox {
    background-image: url(../img/KT-Products/ShieldingBox.png);
    margin-top: 70px;
    height: 400px;
    background-color:rgba(91, 100, 108, 0.8);
    background-repeat: no-repeat;
    background-position: center 20px;
    background-size: 525px;
    color: white;
}

.Page-Title-BG-ESDCeramic {
    background-image: url(../img/KT-Products/ESDCeramic_1.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-BurninSocket {
    background-image: url(../img/KT-Products/Burn-in_Socket.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-ALC {
    background-image: url(../img/KT-Products/ALC-B.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-Socket_PIN_Simulation {
    background-image: url(../img/KT-Products/Socket_PIN_Simulation.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-Xinhe {
    background-image: url(../img/KT-Products/Xinhe.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 12%;
    background-size: cover;
    color: white;
}

.Page-Title-BG-CeramicWritingPen_NozzlesTip {
    background-image: url(../img/KT-Products/CeramicWritingPen_NozzlesTip.jpg);
    margin-top: 70px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center 50%;
    background-size: cover;
    color: white;
}

@media (min-width: 992px) {
    .Page-Title-BG {
        margin-top: 100px;
    }

    .Page-Title {
        font-size: 60px;
    }
}

.img-item img {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
    width: 100%;
}

.item-body {
    padding: 10px;
}
.card-item {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.card-item:hover {
    box-shadow: 5px 5px 20px 0px #999999;
    -webkit-transform: translate(-5px, -5px);
    -moz-transform: translate(-5px, -5px);
    -ms-transform: translate(-5px, -5px);
    -o-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.card-item a {
    text-decoration: none;
    color:black;
}

.cfbt-o {
    border-top: 2px solid rgba(250,191,42,0.5);
}