﻿
.sticky {
    position: fixed;
    top: 49px;
    width: 100%;
    background-color: white;
    z-index: 1;
    max-width: 1170px;
    margin-left: 0px;
    margin-right: 0px;
}

@media(min-width:768px) {
    .sticky {
        top: 100px;
    }
}

@media(min-width:1200px) {
    .sticky {
        top: 49px;
    }
}

.cpr2h {
    font-size: 28px;
    width: 40%;
    margin: 10px, 15px;
}

.cpr3h {
    font-size: 28px;
    width: 26%;
    margin: 10px, 15px;
}

.cpr2d {
    font-size: 16px;
    width: 40%;
    margin: 10px, 15px;
    word-break: break-all;
}

.cpr3d {
    font-size: 16px;
    width: 26%;
    margin: 10px, 15px;
    word-break: break-all;
}

.cprl {
    font-size: 22px;
    width: 80px;
    font-weight: bold;
    text-align: center;
}

.cprt {
    font-size: 22px;
    width: 80px;
    vertical-align: middle;
    text-align: center;
}

.num-in-c {
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
}

/* 彈窗黑底 */
.modal {
    display: none; /* Hidden by default */
    overflow: auto; /* Enable scroll if needed */    
}

/* 彈窗容器 */
.modal-ctn {
    margin: auto;
    margin-top: 5%;
    width: 90%;
    text-align: center;
    background-color: white;
}

/* 彈窗图片 */
.modal-img {
    margin: auto;
    display: block;
    width: 90%;
    max-width: 700px;
    vertical-align: middle;
    align-content: center;
}

/* 彈窗標題 */
.model-alt {
    font-size: 40px;
    color: white;
    text-align: center;
    margin-top: 5%;
}

/* 彈窗小字 */
.model-main {
    font-size: 40px;
    color: white;
    text-align: left;
}

.fa-2x {
    font-size: 2em;
}

.css_tr {
    display: table-row;
}

.css_td {
    display: table-cell;
}

.progress {
    position: relative;
    height: 25px;
}

    .progress > .progress-type {
        position: absolute;
        left: 0px;
        font-weight: 800;
        padding: 3px 30px 2px 10px;
        color: rgb(255, 255, 255);
        background-color: rgba(25, 25, 25, 0.2);
    }

    .progress > .progress-completed {
        position: absolute;
        right: 0px;
        font-weight: 800;
        padding: 3px 10px 2px;
    }

.nav-tabs > li {
    float: none;
    display: inline-block;
    zoom: 1;
}

.nav-tabs {
    text-align: center;
}

.prepareFolder, .introFolder {
    font-size: 28px;
    font-weight: bold;
}
.left-control {
    left: 0;
    right: auto;
    position: absolute;
    background-image: none;
    top: 100px;
    bottom: 0;
    font-size: 30px;
}

.right-control {
    right: 0;
    left: auto;
    position: absolute;
    background-image: none;
    top: 100px;
    bottom: 0;
    font-size: 30px;
}


@media (min-width:300px) {
    .cpr3hSpace {
        width: 16.666%;
    }

    .cpr3hText {
        margin-right: 8px;
    }

    .table > tbody > tr > th, .table > tbody > tr > td {
        padding: 3px;
    }

    .table > tbody > tr > th {
        vertical-align: middle;
    }

    .cpr3h {
        font-size: 18px;
        width: 26%;
        padding: 11px !important;
        vertical-align: middle;
    }

    .cpr2h {
        font-size: 28px;
        width: 26%;
        padding: 100px, 15px;
        vertical-align: middle;
    }

    .cprt {
        font-size: 20px;
        width: 15%;
        vertical-align: middle;
        padding-right: 5px;
        text-align: left;
    }

    .cprl {
        font-size: 20px;
        width: 15%;
        font-weight: bold;
        text-align: left;
    }

    .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .prepareFolder, .introFolder {
        font-size: 20px;
        font-weight: bold;
    }
}
/*iPhone5/SE */
@media(width:320px) {
    .cpr3hText {
        margin-right: 8px;
    }
}

@media (min-width:768px) {
    .cpr3hText {
    margin-right: 31px;
}
    .table > tbody > tr > th, .table > tbody > tr > td {
        padding: 8px;
    }

    .cpr3hSpace {
        width: 11%;
    }

    .table > tbody > tr > th {
        vertical-align: middle;
    }

    .cpr3h {
        font-size: 28px;
        width: 26%;
        padding: 100px, 15px;
    }

    .cprl {
        font-size: 20px;
        width: 80px;
        font-weight: bold;
        text-align: left;
    }

    .cprt {
        font-size: 20px;
        width: 10%;
        vertical-align: middle;
    }

    .container {
        padding-right: 15px;
        padding-left: 15px;
    }

    .prepareFolder, .introFolder {
        font-size: 28px;
        font-weight: bold;
    }
}
@media(min-width:1320px) {
     .cpr3hSpace {
        width: 12%;
    }
    .cpr3hText {
    margin-right: 50px;
}
}