body{ background: #000; background-size: 100%; }
article{ width: 1440px; margin: 0 auto; overflow-x: hidden;}
p.firstLetter::first-letter{ font-size: 150%; }

/* PageA */
section#PageA{ background: rgb(24, 24, 24); color: rgba(255,255,255,0.85); }
section#PageA div.row{ padding: 50px 100px; }
section#PageA div.Content{ line-height: 2rem; }
section#PageA img{ width: 75%; margin: 0 auto; display: block; }
section#PageA h5{
    border: 2px solid rgba(247, 158, 4,1);
    border-radius: 8px;
    font-weight: 500;
    font-size: 1.45rem;
    color:rgba(255, 168, 15, 1);
    padding:7px 8px;
    text-align: center;
    width: 90%;
}
section#PageA iframe{ width: 90%; }

/* PageB */
section#PageB{background:url("../images/bg_B.jpg") no-repeat center; background-attachment: fixed; background-size: cover; padding: 60px 90px; }
section#PageB div.Item{ padding:0 25px; }
section#PageB div.Item > h3{ color:#00e9e9; font-weight: 550; border-left: 5px solid #00e9e9; padding-left:15px; padding-right:10px; }
section#PageB div.Item > p{ color: rgba(255,255,255,0.8); line-height: 1.85rem; margin-top: 20px; padding-left: 10px; }
section#PageB div.Item > img{ width: 85%; margin: 0 auto; display: block; padding-top:20px; }

/* PageC */
section#PageC{ background:url("../images/bg_C.jpg") no-repeat center; background-size: cover; padding: 60px 180px; }
section#PageC h3{ color: #ffd200; font-weight: 550; border-left:5px solid #ffd200; padding-left:15px; }
section#PageC hr{ border-color:#c8c8c8; }
section#PageC div.box{ background: rgba(14,39,61,0.6); color:rgba(255,255,255,0.8); margin:15px; height: 290px; padding: 0 40px; }
section#PageC div.box > img{ width: 40%; margin: 0 auto; display: block; padding-top:20px; }
section#PageC div.box > hr{ border-color:#858585; }
section#PageC div.box > p { line-height: 1.8rem; }
section#PageC div#Link{ position: relative; padding: 0; overflow: hidden; }
section#PageC div#Link img{ width: 100%; margin-top: -30px; }
section#PageC div#Link > a > button{     
    position: absolute;
    bottom: 25px;
    left: 10%;
    border-radius: 5px; 
    background: #ffd200; 
    color: rgba(0,0,0,0.85);
    border: none;
    font-size: 1.2rem;
    width: 80%;
    padding: 4px 0;
    transition: .2s linear;
    cursor: pointer;
    font-weight: bold;
}
section#PageC div#Link > a:hover{ text-decoration: none; }
section#PageC div#Link button:hover{ background: transparent; border: 1.5px solid #ffd200; color: #ffd200;  }

/* PageD */
section#PageD{ background: #ece7e2; padding: 60px 150px; }
section#PageD h3 > a{ color:#750000; font-weight: 550; border-left:5px solid #750000; padding-left:15px; }
section#PageD h3 > a:hover{ text-decoration: none; color:#1c377b; border-left:5px solid #1c377b; }
section#PageD hr{ border-color:#c8c8c8; }
section#PageD a:hover{ text-decoration: none; }
section#PageD p{ color: #6b6b6b; }
section#PageD div.text{ background: #FFF; box-shadow: 0 0 20px rgba(6,0,1,0.2); border-radius: 10px; padding:25px; margin-bottom: 20px; }
section#PageD div.text  h5{ color:#1c377b; border-left:5px solid #1c377b; padding-left:10px; font-size: 1.4rem; font-weight: 550; }
section#PageD div.text li{ color:#4e4e4e; line-height: 1.8rem; }
section#PageD span.important{ color:#e70000; font-weight: bold; }




section#PageD  div.text.student { background: url(../images/student.jpg) no-repeat right center, #fff;background-size: contain;}
section#PageD  div.text.student h4 {font-size: 1.2rem;margin: 20px 0 10px;}
/* section#PageD  div.text.student h5 span {font-size: 1.2rem;color: #000;} */
section#PageD .text-flex{ display: flex; }
section#PageD .text-flex .text-con{ width: 70%;padding:0 20px; }
section#PageD .text-flex .text-photo{ width: 30%;}


section#PageD div.text.bgc {border: 4px solid #fff2b8;background-color: #fffff1;}








/* PageE*/
section#PageE{ background:#ece7e2; height: 100px; }

/* CPT */
div#CPT { width: 56%; margin: auto; }
div#CPT div.BTN { 
    margin: 0 2%; 
    float: left;
    background:#3b3b3b; 
    border: solid 2px #3b3b3b; 
    text-align: center; 
    font-size: 1.3em; 
    border-radius: 5px;
    height: 55px;
    line-height: 55px;
    transition: 0.20s linear;
    width: 46%;
}
div#CPT div.BTN:hover { background: rgb(8, 31, 75); color: #FFF; transition: 0.20s linear; }
div#CPT div.BTN a { color: #FFF; display: block; text-decoration:none;}

div#SocialMedia { position: fixed; right: 10px; bottom: 50px; }
div#SocialMedia ul { list-style: none;  }
div#SocialMedia ul li { 
    background: rgba(0,0,0,0.75); 
    color: #FFF; 
    width: 40px; 
    height: 40px; 
    line-height: 40px; 
    font-size: 1.25em; 
    text-align: center; 
    margin: 8px 0 0 0;
    border-radius: 4px;
}
div#SocialMedia ul li a { color: #FFF; }
div#SocialMedia ul li.FB:hover { background: #39507C; transition: .20s linear;  }
div#SocialMedia ul li.Youtube:hover { background: #DB1B1B; transition: .20s linear; }
div#SocialMedia ul li.Contact:hover { background: #096; transition: .20s linear; }

/* Footer */
footer{ font-size:0.95rem; }

/* RWD Setting */
@media(max-width:1439px){

    article{ width: 100%; }

    /* Visual */
    header#Visual div.item > img{ width: 100vw; }

    /* PageA */
    section#PageA div.row{ padding: 50px 70px; }
    section#PageA h5{ padding:7px 0; width: 85%; }
     
    section#PageA iframe{ width: 85%; }

    /* PageB */
    section#PageB{ padding: 50px 70px; }
    section#PageB div.Item{ padding:0 30px; }
    section#PageB div.Item > p{ height: 125px; }
    section#PageB div.Item > img{ width: 80%; padding-top:20px;}

    /* PageC */
    section#PageC div.box{ padding: 0 30px; }
    section#PageC div.box > img{ width: 35%; }

    /* PageD */
    section#PageD #topBox{ height: 290px; }
}

@media(max-width:1371px){
    /* PageB */
    section#PageB{ padding: 50px; }
    section#PageB div.Item{ padding:0 15px; }
    section#PageB div.Item > p{ height: 125px; }
    section#PageB div.Item > img{ width: 80%; padding-top:20px; }
}

@media(max-width:1271px){
    /* PageA */
    section#PageA h5{ width: 90%; font-size: 1.3rem; }     
    section#PageA iframe{ width: 90%; }

    /* PageB */
    section#PageB #word2{ margin-top: 50px; }
    section#PageB div.Item > p{ height: 130px; }
}

@media(max-width:1209px){
    /* PageA */
    section#PageA h5{ width: 95%; }     
    section#PageA iframe{ width: 95%; }

    /* PageC */
    section#PageC{ padding: 60px 130px; }

    /* PageD */
    section#PageD{ padding: 60px 100px; }
}

@media(max-width:1122px){
    /* PageA */
    section#PageA div.row{ padding: 50px; }
    section#PageA h5{ width: 90%; font-size: 1.3rem; }     
    section#PageA iframe{ width: 90%; }

    /* PageB */
    section#PageB div.Item{ padding:0 5px; }
    section#PageB div.Item > p{ height: 150px; }

    /* PageC */
    section#PageC{ padding: 60px 100px; }

    /* PageD */
    section#PageD #topBox{ height: 320px; }
}

@media(max-width:1066px){
    /* PageA */
    section#PageA h5{ font-size: 1.2rem; }
    section#PageA img{ margin-top: 30px; width: 70%; }

    /* PageB */
    section#PageB div.Item > p{ height: 170px; }
    section#PageB #word2{ margin-top: 0; }

    /* PageC */
    section#PageC div.box{ height: 310px; padding: 0 30px; }
}

@media(max-width:993px){
    /* PageA */
    section#PageA div.row{ padding: 40px 30px 0 30px; }
    section#PageA h5{ width: 100%; font-size: 1.2rem; }     
    section#PageA iframe{ width: 100%; padding-bottom: 20px; }

    /* PageB */
    section#PageB{ padding: 50px 40px; }
    section#PageB div.Item > h3{ font-size: 1.65rem; }
    section#PageB div.Item > img{ width: 90%; padding-top: 10px; }

    /* PageC */
    section#PageC{ padding: 60px; }
    section#PageC div.box{ margin: 15px 5px; height: 290px; padding: 0 30px; }

    /* PageD */
    section#PageD{ padding: 60px; }
    section#PageD div.text{ padding:20px; }
    section#PageD #topBox{ height: 370px; }

}

@media(max-width:902px){
    /* PageB */
    section#PageB div.Item > p{ height: 220px; }
}

@media(max-width:838px){
    /* PageA */
    section#PageA h5{ font-size: 1.1rem;  }

    /* PageB */
    section#PageB div.Item > h3{ font-size: 1.5rem; }

    /* PageC */
    section#PageC{ padding: 40px; }
    section#PageC div.box{ margin: 15px 0; height: 300px; padding: 0 20px; }
}

@media(max-width:767px){
    /* PageA */
    section#PageA div.row{ padding: 40px 30px; }
    section#PageA h5{ font-size: 1.4rem; width: 80%; margin: 0 auto; display: block; margin-bottom: 20px; }
    section#PageA iframe{ width: 80%; padding-bottom: 0; margin: 0 auto; display: block; margin-bottom: 30px; }
    section#PageA img{ margin-top: 0; width: 60%; }

    /* PageB */
    section#PageB div.Item{ padding: 0 5px 50px 5px; }
    section#PageB div.Item > p{ height: auto; }
    section#PageB div.Item > h3{ font-size: 1.6rem; }
    section#PageB div.Item > img{ width: 70%; }

    /* PageC */
    section#PageC{ padding: 40px; }
    section#PageC div.box{ margin: 15px 150px; height: 250px; padding: 0 50px; }
    section#PageC div.box > img{ width: 20%; padding-top:20px; }
    section#PageC div#Link{ height: 340px; }

    /* PageD */
    section#PageD{ padding: 40px; }
    section#PageD div.text{ padding:25px; }
    section#PageD #topBox{ height: auto; }

section#PageD .text-flex{ flex-direction: column; }
section#PageD .text-flex .text-con{ width: 100%;padding:0 20px; }
section#PageD .text-flex .text-photo{ width: 30%;background: url(../images/student.jpg);height: 400px;width: 100%;background-size: cover;background-position: center; }

section#PageD  div.text.student { background:  #fff;}









    
    /* PageE*/
    section#PageE{ height: 170px; }

    /* CPT */
    div#CPT { width: 100%; margin-top:-30px; }
    div#CPT div.BTN { float: initial; clear: both; margin: 15px auto; font-size: 1.1rem; width: 60%; }
}

@media(max-width:629px){
    /*Visual*/
    .owl-dot{ visibility: hidden; }

    /* PageA */
    section#PageA div.row{ padding: 40px 20px; }
    section#PageA h5{ font-size: 1.2rem; line-height: 1.7rem; width: 100%; text-align: left; padding:7px 15px; }
    section#PageA iframe{ width: 100%; }
    section#PageA img{ width: 80%; }

    /* PageB */
    section#PageB{ padding: 40px 20px; }
    section#PageB div.Item > img{ width: 100%; padding-top: 0; }

    /* PageC */
    section#PageC{ padding: 40px 20px; }
    section#PageC div.box{ margin: 15px; height: 280px; padding: 0 30px; }
    section#PageC div.box > img{ width: 40%; padding-top:20px; }

    /* PageD */
    section#PageD{ padding: 40px 20px; }
    section#PageD div.text{ padding:25px 10px; }







    /* CPT */
    div#CPT div.BTN { width: 90%; }
}