body {
    
    line-height: 0;
    background-color: #000;


}
* { 
    font-family: 'Noto Sans TC', sans-serif!important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container {
    width: 75%!important;
    max-width: 75%!important;
    margin-left: auto;
    margin-right: auto;
}
.row {
    margin-top: 15px; 
}
img { width: 100%; }

.page_container canvas {
    position: fixed;
}
.nav {
    display: block;
}
.nav ul {
    margin-bottom: 0!important;
}
.nav li {
    background-color: cimson;
    /*border: 1px solid #fff;*/
    text-align: center;
    line-height: .8;
    color: #fff;
}
.nav li a {
    display: block;
    padding: 1.2rem 0;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    /*text-shadow: 1px 1px 0 #7026b2; */
}

.phone-banner {
    display: none;
}

.add_000 .container {
    background-color: #fff;
}

.add-border-bottom-web {
    border-bottom: 1px dotted #aaa;
}

.add-border-right-phone {
    border-right: 1px dotted #aaa;
}
.add-border-right-web {
    border-right: 1px dotted #aaa;
}



.main-list { 
    /*padding: 30px 0;*/
    /*background-color: #fff; */
}
.main-list h2 {
    /*padding: 10px 0;*/
    text-align: center;
    /*background-color: #2a4a71;*/
    letter-spacing: 1px;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
}
.main-list img {
    border-radius: 1.5em;
    padding: 5px;
    /*border: 1px solid #eee;*/
} 

.col-sm-4 {

}
.page2 .main-list {
    background-color: #000;
}
.page2 .main-list img {
    padding: 0;
}
.page2 .btn_group {
    position: relative;
    top: -60px;
    padding: 10px 0;
    text-align: center;
    /*background-color: #000;*/
}
.page2 .btn_group button {
    margin: 0 5px;
}
.page2 .add_000,
.page2 footer {
    position: relative;
    top: -60px;
}
.short_version .green_box {
    background-image: url(../images/short_version/footer_bg.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
}

.items {
    padding: 30px 0;
    background-color: #fff;
}

.items_center.col-sm-4 {
    border-left: 20px solid #fff;
    border-right: 20px solid #fff;
    /*margin: 10px solid #fff;*/
}

.green_box .col-sm-8 {
    border-bottom: 1px solid #fff; 
}
.green_box  .col-sm-12 {
    margin-bottom: 20px;
}
.green_box .row {
    padding-top: 3rem;
}
.orange_circle {
    margin-top: 1rem;
    padding: .2rem .5rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: #eab73a;
    color: #fff;
}

.green_box h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #fff;
}

ol li { 
    line-height: 1.2;
    list-style-type:decimal;
    color: #fff;
}

ol > li { margin-bottom: .5rem; }


.main-list .add_000 {
    /*background-color: #fff;*/
    /*background-image: url(../images/bg2.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;*/
}
.main-list .add_000 .row {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*border: 1px solid #fff;*/
}
.main-list .add_000 .row .col-3 {
    
    margin: 10px;
    /*border: 1px solid #fff;*/
    
    text-align: center;
    background-color: rgba(255,255,255,.1);
    /*border-radius: 50%;*/
    /*border-top: 1px solid #fff;
    border-bottom: 1px solid #fff; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.main-list .add_000 .row .col-3:hover {
    /*background-color: rgba(255,255,255,.7);*/
} 
.main-list .add_000 .row a {
    display: block;
    /*margin: 10px;*/
    /*padding: 10px;*/
    color: #fff;
    font-size: 1rem;
}
.main-list .add_000 .row a:hover {
    text-decoration: none;
    /*background-color: rgba(255,255,255,.7);*/
    color: #30faff;
}
.registered .green_box {
    background-color: #fff;
    
}
.registered .green_box * {
    color: #000;
}
.registered .red_circle {
    margin-top: 1rem;
    padding: .2rem .5rem;
    border: 3px solid #fff;
    border-radius: 50%;
    background-color: #c30d22;
    color: #fff;
}
.registered .green_box .add_black_line {
    border-bottom: 1px solid #000; 
}



ol { margin: 0 1.5rem; }
ol li { 
    line-height: 1.8;
    list-style-type:decimal;
}
ol > li { margin-bottom: 1.8rem; }
ol li ul li { list-style: none; }
.bg_green { 
    margin-right: 1rem;
    padding: 0 5px;
    background-color: #39ae36; 
    color: #fff;
    font-size: 1.5rem;
}

footer {
    padding: 10px 0;
    text-align: center;
    background-color: #2d274d;
    color: #fff;
    font-size: 1rem;
}
.gotop {
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 0 12px;
    border: 0;
    border-radius: 50%;
    background-color: #39b1a8;
    color: #fff;
    outline: none;
    line-height: 50px;
    z-index: 1;
}

.gotop:hover{
    color: #fff;
    background-color: hotpink;
    outline: none;
    cursor: pointer;
}






@media screen and (max-width: 1200px) {
    .topnav_box .logo {
        padding:1rem .5rem
    }
}

@media screen and (max-width: 768px) {
    .main {
        margin-top:62px
    }

    .topnav_box {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .topnav__btn {
        display: block;
        margin-left: auto;
        width: 60px;
        height: 40px;
        background-image: url("../images/btn.png");
        cursor: pointer
    }

    .topnav_box .logo img {
        height: 30px
    }

    .topnav_box .topnav_box--link {
        display: none
    }

    .topnav_box .topnav_box__mobile--link {
        width: 100%;
        border-top: 1px solid #545454
    }

    .topnav_box .topnav_box__mobile--link a a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem 0;
        border-bottom: 1px solid #545454;
        color: #fff;
        text-decoration: none
    }

    .topnav_box .topnav_box__mobile--link a:last-child {
        border-bottom: none
    }
}

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

    .main .row .add-border-right-phone {
        border-right: 0;
    }

    .top-box {

        /*height: 100vh;*/
        overflow: hidden;
        background-color: #000!important;
    }
    
   
    .computer-banner {
        display: none;
    }
    .phone-banner {
        display: block;
    }
    .main {
        margin-top:0;
        background-color: #000;
    }
    .main .row {
        border-bottom: 0;
        margin: 0;
    }
    .main .row .col-6 {
        padding: 0;
        /*border-bottom: 1px dotted #aaa;*/
    }

    .store .main .row .col-12 {
        padding: 15px 0;
        border-bottom: 1px solid #eee; 
    }
    .main-list img {
        padding: 5px 0!important;
        /*border: 1px solid #eee;*/
    } 

}