body{font-family: "Arial","微軟正黑體";overflow-x: hidden;background-color: #181818;background: url(../images/noiseBG.Dwvyjk9N.png), linear-gradient(180deg, #070606, #181818);}
a:hover{text-decoration: none;}button:focus{outline:none}

p{font-size: 1.3rem;line-height: 1.8;font-weight: 600;color: #FFF;}
h1{font-size: 2.8rem;text-align: center;}
h2,h3{font-size: 2.4rem;text-align: center;font-weight: bold;color: #FFF;margin-bottom: 5%;}
.container{padding: 150px 0;}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}
.video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;}

/* visual */
header#visual{height: 100vh;position: relative;}
header#Visual > .container-fluid{width: 100%;height: 100vh;}
header#Visual .master_bg{background: url(../images/master-bg.jpg) no-repeat center top;background-size: 100%;}
header#Visual img#logo{width: 28%;position: absolute;top: 8%;right: 5%;}
header#Visual div.title{position: absolute;bottom: 7%;left: 2%;}
header#Visual div.title > p{font-size: 4rem;line-height: 1.4;}
header#Visual div.title > p span{font-size: 5.5rem;}

.OSCP_box{display: flex;align-items: center;flex-wrap:nowrap;}
.OSCP_wrap{padding: 8% 5% 5%;}
.OSCP_name{font-size: 3rem;line-height: 1.2;padding-left: 2%;}
.OSCP_logo{width: 20%;display: block;margin-right: 10px;}

section#Project{background: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,1),rgba(0,0,0,0.7)), url(../images/bg03.png);background-attachment: fixed;}
section#Project h1 span{border-bottom: 2px solid #ff6a47;}
section#Project h1 span:hover{border: 0px;}
.prmo{position: relative;}
.prmo h2{
    display: flex;
    align-items: center;
    transform: translate3d(0px, 0px, 0px);
}
.prmo h2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 300px;
    right: -20%;
    opacity: 0.3;
    background-image: url(../images/Prom.svg);
    background-size: 100%;
    background-position: -20px -20px;
}
.feedback{position: relative;}
.feedback h3:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 300px;
    right: -20%;
    opacity: 0.3;
    background-image: url(../images/student.svg);
    background-size: 100%;
    background-position: -20px -20px;
}
.feedback h3{
    margin-left: 30px;
    display: flex;
    align-items: center;
    transform: translate3d(0px, 0px, 0px);
}
.c-md-dot{
    height: 30vh;
    width: 100%;
    left: -20%;
    top: 0;
}
.c-md-dot{
    margin: auto;
    position: absolute;
    content: "";
    z-index: 0;
    opacity: 0.3;
    background-image: url(../images/dot.png);
    background-size: 200px 200px;
    background-position: -20px -20px;
    pointer-events: none;
}

/* 影片 */
section#movie{background: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,1),rgba(0,0,0,0.7)), url(../images/bg03.png);background-attachment: fixed;}
#movie .container{padding: 6.25rem 0;}
.playbtn-icon{width: 10%;position: absolute;left: 600px;top:150px;display: block;}
.playbtn_BG{display: block;margin: auto;width: 60%;}
.modal-lg {max-width: 65%;}

/* nine */

section#nine {background: -webkit-linear-gradient(top,rgba(0,0,0,0.3),rgba(0,0,0,1),rgba(0,0,0,0.7)), url(../images/bg03.png);background-attachment: fixed;}
section#nine h3{color: #FFF;}


.table-all {position: relative;}
.mb-txt{display: none;text-align: center;}
table.table {overflow-x: auto;white-space: nowrap;margin: 0 auto;width: 100%;text-align: center;font-weight: bold;}
table tr,td {border: 1px solid #6d6f77;padding: 20px;font-size: 1.1rem;}

table.table thead tr.thead-bg{background-color: #bd2130;font-weight: 600;color: #fff;}
table.table tbody tr td{background-color: #fff;}
table.table tbody tr td:nth-child(1){background-color: #fee8ea;}
table {width: 100%;}
.table td, .table th{vertical-align: middle;}

.fa-star{color: #ffa800;}
.fa-medal{color: #e02726;}

#discount .card{border: #FFF solid 6px;}

#discount .card:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 260px;
    right: 0;
    opacity: 1;
    background-image: url(../images/BG01-01.png);
    background-size: 100%;
    background-position: 0;
    background-repeat: no-repeat;
}

/* btnLink */
section#btnLink .container{padding: 0 0 80px;}
section#btnLink button{width: 100%; margin: 15px auto 25px auto; display: block; background: #00001c; color:#FFF; border: 4px solid #111c51; border-radius: 50px; padding: 13px 20px; font-weight: bold; font-size:1.8rem;height: 72px;}
section#btnLink button:hover{transform: translateY(5px);opacity: 0.6;}




@media(min-width:1440px){

    .container {
        max-width: 1320px;
    }
}

@media(max-width:1280px){
    header#Visual > .container-fluid{width: 100%;}
    img.title{ position: absolute; top: 30%; left: 2%; width: 50%;z-index: 2000;}
    .visual-image{position: absolute; top: 10%; right: 10px;background: url("../images/blockchain.svg") no-repeat right center;height: 600px;background-size: 600px;}
    .spinner{width: 200px;height: 200px;z-index: 1000;}
    .spinner01{position: absolute; top: 80px; right: 300px;}
    .spinner02{position: absolute; top: 320px; right: 300px;}
    .spinner03{position: absolute; top: 380px; right: -20px;}

}

@media(max-width: 767px){
     h2{font-size: 1.8rem;line-height: 2;}
    .container{max-width: 100%;padding:0;}
    .row{margin: 0;}

    /* visual */

    header#visual{position: relative;}
    header#Visual > .container-fluid{width: 100%;min-height: 37.5rem;max-height: 37.5rem;overflow: hidden;}

    header#Visual div.title{position: absolute;bottom: 38%;left: 2%;}
    header#Visual div.title > p{font-size: 2rem;line-height: 1.4;}
    header#Visual div.title > p span{font-size: 3rem;}


    header#Visual .master_bg{background: url(../images/master-bg-MB.jpg) no-repeat center top;background-size: 100%;}
    header#Visual img#logo{width: 100%;position: absolute;top: 2%;right: 0;}



    .OSCP_box{flex-wrap:wrap;}
    .OSCP_wrap{padding: 8% 5% 5%;}
    .OSCP_name{font-size: 1.8rem;}
    .OSCP_logo{width: 80%;margin:20px auto;}

    #Project  .container{padding: 8% 5% 5%;}
    #Project  h1{font-size: 2.1rem;}
    #discount{overflow: hidden;padding: 8% 5% 5%;}

  
    .table-all {width: 100%;display: block;overflow-x: auto;white-space: nowrap;}
    .mb-txt{display: block;}
    #movie h2{font-size: 2.5rem;}
    #movie .container{padding: 0;}
    .feedback{overflow: hidden;}


    /* 影片 */
    
    .playbtn-icon{width: 10%;position: absolute;left: 0;top:0;display: none;}
    .playbtn_BG{display: block;margin: auto;width: 100%;}
    .modal-lg {max-width: 100%;}

    section#path .content .box { padding: 10px 20px; position: relative; right: 0px; top: 100%; width: 90%; transform: translate(8%,-80px);}
    section#path .container-fluid{width: 100%;margin: 0 auto;z-index: 99;position: relative;padding-bottom: 80%;}
    section#path .content .photo{width: 100%;margin-top: -91px;}
    section#path .content .photo img{width: 100%;}
    section#path .content {position: inherit;}
    .photo-right{margin-left: 0;}

    /* introduction */
    section#introduction{height: auto;}
    section#introduction .row{position: absolute;z-index: 1000;top: 0;}
    section#introduction p{ line-height: 1.5;text-align: justify;font-size: 1em;width: 97%;}
    section#introduction #IMG1{width: 82%;z-index: 1000;margin: auto;display: block;}

    video{margin-top: 0;}
    section#introduction .box .text.left .item:nth-child(2){transform: translateX(0);}
    section#introduction .box .text.right .item:nth-child(2){transform: translateX(0);}
    section#introduction .box .text{margin: 0;}

    /* course */
    #courseBox h5{padding: 22px 15px;text-align: left;text-align: justify;font-size: 1.1rem;line-height: 1.5;}
    section#course h2{font-size: 1.3rem;}
    section#course .title{width: 100%;height: auto;background: rgb(255, 255, 255);border-radius: 10px;margin: 20px auto 0 auto;padding:0;}
    section#course .title span{padding: 0;}
    section#course p{text-align: left;width: 100%;line-height: 1.5;margin-top: 20px;}
    #courseContent img{width: 60%;padding-top: 10px;}
    #courseContent{padding: 15px;}
    .requirement{padding: 0;}
    .requirement h2{padding-bottom: 20px;}
    .requirement ul{ line-height: 1.5rem;font-size: 1rem;margin-left: -20px;margin-top: -15px;}
    #courseBox{ border-radius: 25px;margin: 203px 0 50px 0;padding:0 15px; }
    section#course .title span{padding: 10px 25px;border-radius: 0;}
    picture img{width: 100%;}
    .img-2{position: absolute;left: 0;bottom: 2218px;}
    .img-3{position: absolute;right: 0;left: 0;bottom: 1419px;}
    .img-4{position: absolute;left: 0;bottom: 581px;}
    section#teacher div.content { padding:  0 30px;}
    section#observe .observe-g .observe-con {
        flex-direction: column;
        padding: 15px;
    }
    .observe-title-text h2 > span{padding: 6px 10px;}
    section#lesson .lesson-choose-bar select {font-size: 1.2rem;}
    .fa-plus{padding: 4px 5px;}
}

@media(max-width: 640px){
 
}