body { 
    background: -webkit-linear-gradient(top,#342e2d,#342e2d),url('../images/170611_MediaAll_main.jpg') no-repeat ;
    background: -moz-linear-gradient(top,#342e2d,#342e2d),url('../images/170611_MediaAll_main.jpg') no-repeat; 
    background: -ms-linear-gradient(top,#342e2d,#342e2d),url('../images/170611_MediaAll_main.jpg') no-repeat; 
    margin: 0 0 0 0;
    background-size: 100%; 
    background-position: center;

}



h1, h2, h3, h4, h5, h6 { font-weight: 600; text-align: center; clear: both; line-height: 1.5;  }


ul { padding: 0 0 0 0; margin: 0 0 0 0; }
ul li { font-size: 16px; }
p { font-size: 15px; line-height: 1.6; }


/* Article 整體寬度調整*/
 article  { 
    width: 1440px;
    margin: 0 auto 0 auto; 
    padding: 0;
    clear: both;  
    box-shadow: rgba(0,0,0,0) 0 0 10px 0;
    background: #f4eee9;
    color: #000;
}

header, section { width: 100%; margin: 0; clear: both; }
section { min-height: 100px; padding: 50px 80px; clear: both; display: inline-block; }
section h1 { font-size: 2.4em; line-height: 1.4; }
section p {}
section div.BOX { width: 48%; margin: 15px 1%; float: left; background: #F7F6F5; padding: 0; text-align: center; overflow: hidden; border-radius: 2px; }

/* 主視覺 */

header#Visual {
	background: -webkit-linear-gradient(top,rgba(101,193,229,0),rgba(247,245,240,0)),url('../images/Visual.jpg') no-repeat  ;
	background: -moz-linear-gradient(top,rgba(101,193,229,0),rgba(247,245,240,0)),url('../images/Visual.jpg') no-repeat; 
    background: -ms-linear-gradient(top,rgba(101,193,229,0),rgba(247,245,240,0)),url('../images/Visual.jpg') no-repeat; 
    background-size: cover;
    background-position: top left;
    height: 750px;
    margin: 0;
    overflow: hidden;
}

header#Visual > div.TOPIC { width: 50%; height: 750px; overflow: hidden; float: right; margin: -80px 80px 0 0; text-align: center; }
header#Visual > div.TOPIC > img { width: 500px; position: relative; z-index: 10; top: -580px;  }
header#Visual > div.TOPIC > div.BCK_IMG { 
    background: url(../images/BCK_IMG-01.svg) no-repeat; 
    width: 100%; height: 100%; 
    background-size: 100%; 
    position: relative; 
    z-index: 2;  
    animation-name: TOPIC_MOV; 
    animation-duration: 10s; 
    animation-iteration-count: infinite;  
}
header#Visual p.Descp { width: 100%;  margin: -580px 0 0 0; text-align: left; position: relative; z-index: 10; font-weight: 600; border-left: solid #9d211f 5px; padding: 0 0 0 10px; }
header#Visual > div.TOPIC > div.TOPIC-BTN { width: 400px; background:#ce2e2e; color: #FFF; text-align: center; margin: 25px auto; padding: 10px 0; border-radius: 5px; position: relative; z-index: 10;  }
header#Visual > div.TOPIC > div.TOPIC-BTN a { color: #FFF; font-size: 1.5em; }
header#Visual > div.TOPIC > div.TOPIC-BTN:hover { background: #9d211f; transition: 0.3s; }

/*MOV*/

@keyframes TOPIC_MOV {
    0%  {  background-size: 100%; }
    20% { 
            transform:translateX(0px) translateY(-50px) rotateY(180deg) rotateX(0deg) rotate(-20deg);
            -moz-transform:translateX(0px) translateY(-50px) rotateY(180deg) rotateX(0deg) rotate(-20deg);
            -webkit-transform:translateX(0px) translateY(-50px) rotateY(180deg) rotateX(0deg) rotate(-20deg);
            background-size: 55%;
        }
    50% { 
            transform:translateX(0px) translateY(-50px) rotateY(20deg) rotateX(150deg) rotate(100deg);
            -moz-transform:translateX(0px) translateY(-50px) rotateY(20deg) rotateX(150deg) rotate(100deg);
            -webkit-transform:translateX(0px) translateY(-50px) rotateY(20deg) rotateX(150deg) rotate(100deg);
            background-size: 80%;
            background-position: 0 151px;
        }

}


/* PageA 內容設定*/
section#PageA,section#PageC-Intro { 
    background: #d13024; 
    background: -webkit-linear-gradient(top,rgba(209,48,36,0.5),rgba(209,48,36,1)),url('../images/Maze02.jpg') no-repeat fixed ;
    background: -moz-linear-gradient(top,rgba(209,48,36,0.8),rgba(209,48,36,1)),url('../images/Maze02.jpg') no-repeat fixed; 
    background: -ms-linear-gradient(top,rgba(209,48,36,0.8),rgba(209,48,36,1)),url('../images/Maze02.jpg') no-repeat fixed; 
    color: #FFF; 
    background-position: center;
    background-size: cover;
}

section#PageA h1, section#PageC-Intro h1 { text-shadow: rgba(0,0,0,0.8) 0 2px 5px; }
section#PageA p, section#PageC-Intro p { text-align: center; }

/* PageA-CodePage 內容設定*/
section#PageA-CodePage h3 { clear: both; padding: 10px 0 30px 0; color: #342e2d;   }
section#PageA-CodePage h3 span { background: #FC0; padding: 10px 18px; border-radius: 4px; }
section#PageA-CodePage h4 { color: #342e2d; }
section#PageA-CodePage h4 > span { color: #d13024; }
section#PageA-CodePage > ul { padding: 0 0 0 0; list-style: none; width: 98%; margin: 10px auto; clear: both; border-bottom: 0;  }
section#PageA-CodePage > ul li { 
    width: 31.33333%; 
    float: left; 
    margin: 10px 1%; 
    background: #bfa6a3; 
    color: #FFF; 
    font-size: 1.35em;
    padding: 5px 0;
    text-align: center; 
    border-radius: 8px;

}

section#PageA-CodePage > ul li a { background: none; color:#FFF; border:0;  }
section#PageA-CodePage > ul li:hover { background: url('../images/icon_light-01.svg') #d17265 no-repeat; background-size: 36px; background-position: 15px 2px; }
section#PageA-CodePage > ul li.active, section#PageA-CodePage > ul li:focus { 
    background: url('../images/icon_light-02.svg') #ce2e2e no-repeat; 
    background-size: 40px; 
    background-position: 15px 1px; 
    text-shadow: rgba(0,0,0,0.8) 0 1px 8px;
    box-shadow: rgba(0,0,0,0.1) 0 0 20px 0;
    margin-top: 5px;
}

section#PageA-CodePage > ul li span { font-size: 14px; }

section#PageA-CodePage div.BOX { width: 48%; margin: 10px 1%; float: left; background: none; }
section#PageA-CodePage div.BOX > pre { text-align: left; min-height: 200px; border:0; border-radius: 5px; border: solid #555 5px; box-shadow: rgba(0,0,0,0.2) 0 0 10px 0;  }
section#PageA-CodePage div.CodeBOX > pre { min-height: 350px; }
section#PageA-CodePage div.NewCode > pre { 
    background: #3b4249; 
    animation-name: pre_MOV; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
}


/*MOV*/

@keyframes pre_MOV {
    0%  { border: solid #FC0 5px; }
    50%  { border: solid #f49267 5px; }
    100%  { border: solid #FC0 5px; }
}

section#PageA-JSroadmap { padding: 0 0 100px 0; }
section#PageA-JSroadmap div#JSRoad { color: #222; }
section#PageA-JSroadmap div#JSRoad h4 { color: #222; }
section#PageA-JSroadmap div.modal-content img { width: 100%; }
section#PageA-JSroadmap div.modal-content p { text-align: right; font-weight: 600; }
section#PageA-JSroadmap > div.BTN-ROADMAP { 
    width: 450px; height: 55px; line-height: 55px; 
    background: #3b4249;
    color: #FFF;
    margin: auto; 
    font-size: 1.55em; 
    text-align: center; 
    border-radius: 5px;
}
section#PageA-JSroadmap > div.BTN-ROADMAP:hover { background: #19b2b8; transition: 0.3s; }
section#PageA-JSroadmap > div.BTN-ROADMAP a { color: #FFF; }

/* PageB 內容設定*/
section#PageB-Intro { background: #3b4249; color: #FFF;  }

section#PageB-Intro > div.Content, section#PageB-Intro > img { float: left; margin: 10px 0.5%; }

section#PageB-Intro > div.Content { width: 60%; }
section#PageB-Intro > img { width: 38%; }


section#PageB { }
section#PageB > div.BOX { background: #ede6df; color: #222; min-height: 350px; border-radius: 15px; padding: 35px; }
section#PageB > div.BOX > h3 { font-size: 1.55em; border-bottom: solid 3px #ff876c; padding: 0 0 15px 0; margin: 0 0 10px 0; }
section#PageB > div.BOX > p { text-align: left; clear: both;  }

section#PageB > div.SubA > h3 { border-bottom: solid 5px #19b2b8; }
section#PageB > div.SubA > img { width: 350px; }
section#PageB > div.SubB > h3 { border-bottom: solid 5px #ff876c; }
section#PageB > div.SubB div.Graphic > div.ICON { width: 29%; height: 160px; background: #FFF; margin: 15px 2%; float: left; border-radius: 10px; border: solid 3px #FFF; }
section#PageB > div.SubB div.Graphic > div.MONGGO { background: url('../images/mongodb.png') #e9f6e4 no-repeat; background-size: 60%; background-position: center; }
section#PageB > div.SubB div.Graphic > div.NODEJS { background: url('../images/NodeJS.svg') #daefef no-repeat; background-size: 80%; background-position: center; }
section#PageB > div.SubB div.Graphic > div.ANG { background: url('../images/AngularJS.svg') #ead8d8 no-repeat; background-size: 70%; background-position: center; }
.ICON_bt{ display:block; width:155px; height:155px; text-indent:-9999px; }
.ICON:hover{ opacity:0.7;}
section#PageB > div.SubB div.Graphic { padding: 10px 0px;  }



section#PageB-Sec { background: #ede6df; }
section#PageB-Sec img, section#PageB-Sec div.Content { float: left; }
section#PageB-Sec img { width: 40%; margin: 0 4% 0 0; }
section#PageB-Sec div.Content { width: 55%; }
section#PageB-Sec div.Content h3 { text-align: left; border-left: solid #19b2b8 5px; padding: 0 0 0 10px; }


/* PageC 內容設定*/
section#PageC {  }


section#PageC > div.BOX { background: none; padding: 20px; }
section#PageC > div.BOX h3 { border-bottom: solid 6px #C30; margin: 0 0 35px 0; padding: 0 0 8px 0; }
section#PageC > div.BOX > div.MOV { background: #342e2d; border-radius: 10px; overflow: hidden; border: solid #342e2d 10px; }
section#PageC > div.BOX > div.MOV > iframe { width: 100%; height: 350px; }
section#PageC > div.ECMALang > ul { list-style: none; padding: 0; margin: 0 auto; }
section#PageC > div.ECMALang > ul li { 
    width: 48%; height: 80px;
    float: left; 
    margin: 5px 1%; 
    background: #FFF; 
    color: #222; 
    text-align: center; 
    padding: 18px 0 0 0;
    border-radius: 10px;
    overflow: hidden;
    font-weight: 600;
    border:solid 3px #ede6df;
}

section#PageC > div.ECMALang > ul li.ShortText { line-height: 80px; padding: 0 0 0 0 !important; }

/* PageD 內容設定*/
section#PageD {  }
section#PageD > div.BOX { background: none; float: left; }





/* CPT 內容設定*/
div#CPT { width: 880px; margin: auto; }
div#CPT div.BTN { 
    margin: 10px; 
    float: left;
    background:#9d211f; 
    color: #FFF; 
    text-align: center; 
    font-size: 1.3em; 
    padding: 15px 10px; 
    border-radius: 5px;
    transition: 0.20s linear;
}
div#CPT div.BTN-A { width: 300px; }
div#CPT div.BTN-B { width: 350px; }
div#CPT div.BTN-C { width: 170px; }

div#CPT div.BTN:hover { background: #d13024; color: #FFF; transition: 0.20s linear; }







/* RWD Setting */

    @media (max-width: 1440px) {
        article { width: 100%;  }     
    }

    @media (max-width: 1400px) {
        article { width: 1280px;  }
        section h1 { font-size: 2.1em !important; line-height: 1.4; }
        section h2 { font-size: 1.7em !important; }
        section h3 { font-size: 1.55em !important; }
        section p { font-size: 14px }
        section > div.BOX p { text-align: justify !important; text-justify:inter-ideograph !important; }
        section > div.BOX h3 { font-size: 1.35em !important; }
        header#Visual { height: 680px; }
        header#Visual > div.TOPIC > img { width: 420px; position: relative; z-index: 10; top: -610px;  }
        header#Visual p.Descp { margin: -590px 0 0 0; font-size: 14px; text-align: justify; text-justify:inter-ideograph; }
    }
    
    @media (max-width: 1280px) {
        article { width: 100%;  }
    }

    @media (max-width: 1200px) {
        article { width: 800px;  }

        section { padding: 40px 40px;  }
        section div.BOX { width: 100%; margin: 15px 0; float: initial; }
        section h1 { font-size: 1.85em !important; line-height: 1.4; }
        section h2 { font-size: 1.6em !important; }
        section h3 { font-size: 1.45em !important; }
        section p { font-size: 13px !important; text-align: justify !important; text-justify:inter-ideograph !important; }
        header#Visual { background-size: cover; background-position: top left; height: 500px; }

        header#Visual > div.TOPIC { width: 100%; height: 500px; float: right; margin: -80px 40px 0 0; text-align: right; }
        header#Visual > div.TOPIC > img { width: 350px; top: -390px;  }
        header#Visual > div.TOPIC > div.BCK_IMG { width: 80%;  float: right; animation-name: none; background-size: 70%; background-position: 220px -30px;   }
        header#Visual p.Descp { width: 60%;  margin: -380px 0 0 0; padding: 20px; float: right; background: rgba(255,255,255,0.5); font-size: 13px; }
        header#Visual > div.TOPIC > div.TOPIC-BTN { display: none;  }




        section#PageA-CodePage > ul { width: 100%; }
        section#PageA-CodePage > ul li { width: 100%; float: initial; margin: 10px 0; font-size: 1.1em; }
        section#PageA-CodePage div.BOX { width: 100%; margin: 10px 0; float: initial; }
        section#PageA-CodePage div.BOX > pre { min-height: auto !important; }

        section#PageB-Intro > div.Content, section#PageB-Intro > img { float: initial; margin: 10px 0; }
        section#PageB-Intro > div.Content { width: 100%; }
        section#PageB-Intro > img { width: 100%; }

        section#PageB-Sec img, section#PageB-Sec div.Content { float: initial; }
        section#PageB-Sec img { width: 100%; margin: 0 0 15px 0; }
        section#PageB-Sec div.Content { width: 100%; }

        div#CPT { width: 100%; }
        div#CPT div.BTN { float: initial; clear: both; margin: 10px auto; font-size: 15px; }
        div#CPT div.BTN-A, div#CPT div.BTN-B, div#CPT div.BTN-C { width: 100%; }

    }

    @media (max-width: 800px) {
        article { width: 100%;  }
    }

    @media (max-width: 600px) {
        article { width: 395px;  }
        section { padding: 20px 15px;  }
        section h1 { font-size: 1.3em !important; line-height: 1.4; }
        section h2 { font-size: 1.2em !important; }
        section h3 { font-size: 1.1em !important; }
        section h4 { font-size: 16px !important; margin: 10px 5%; }
        section p { font-size: 12px !important; }
        pre { font-size: 12px !important; }

        header#Visual { background-size: 350%; background-position: -100px -50px; height: 700px; }

        header#Visual > div.TOPIC { width: 100%; height: 700px; float: initial; margin: 0px 40px 0 0; text-align: right; }
        header#Visual > div.TOPIC > img { width: 80%; top: -600px; background: rgba(255,255,255,0.8);  }
        header#Visual > div.TOPIC > div.BCK_IMG { width: 100%;  float: initial; background-size: 70%; background-position: 0px 0px;  background: none;  }
        header#Visual p.Descp { width: 100%;  margin: -425px 0 0 0; padding: 20px; float: initial; background: #342e2d; color: #FFF; font-size: 13px; border-left: none; text-align: justify !important; text-justify:inter-ideograph !important;  }
        header#Visual > div.TOPIC > div.TOPIC-BTN { display: none;  }

        section#PageA-JSroadmap > div.BTN-ROADMAP { width: 90%; font-size: 14px; }

        section#PageB > div.SubA img { width: 100%; }
        section#PageB > div.SubB div.Graphic > div.ICON { width: 80px; height: 80px; background-size: 80%; border: solid 2px #FFF;  }
        .ICON_bt{ display:block; width:80px; height:80px;text-indent:-9999px;}

        section#PageC > div.ECMALang > ul li { 
            width: 100%; height: auto;
            float: initial; 
            margin: 8px 0; 

            font-size: 14px;
            padding: 10px;
            border-radius: 5px;
            overflow: hidden;
        }

        section#PageC > div.BOX > div.MOV > iframe { height: 180px; }

        section#PageA,section#PageC-Intro { 
            background: -webkit-linear-gradient(top,rgba(209,48,36,0.5),rgba(209,48,36,1)),url('../images/Maze02.jpg') no-repeat  ;
            background: -moz-linear-gradient(top,rgba(209,48,36,0.8),rgba(209,48,36,1)),url('../images/Maze02.jpg') no-repeat; 
            background: -ms-linear-gradient(top,rgba(209,48,36,0.8),rgba(209,48,36,1)),url('../images/Maze02.jpg') no-repeat; 
        }
    }

    /*iPhone 6 */
    @media (max-width: 395px) {
        article { width: 100%;  }
    }








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 div.InfoArea { background: #342e2d; }