/*
 * SYSTEX UCOM
 * EDITOR - MIKE LIU
 * mikeliu@systex.com
 */



body { 
    background: #E8EBEF;
    margin: 0 0 0 0;
    background: -webkit-linear-gradient(top,rgba(118,223,255,0.5),rgba(118,223,255,0.15)),url(../images/bg222.jpg) #174068 fixed;
    background: -moz-linear-gradient(top,rgba(233,240,244,0.8),rgba(233,240,244,0.9)),url(../images/bg222.jpg) #174068 fixed; 
    background: -ms-linear-gradient(top,rgba(233,240,244,0.8),rgba(233,240,244,0.9)),url(../images/bg222.jpg) #174068 fixed; 
    background-size: cover; 
    background-position: center;

}



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


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.2) 0 0 15px 0;
    background: #FFF;
    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; }



/* 主視覺 */

header#Visual {
	background: -webkit-linear-gradient(top,rgba(101,193,229,0.15),rgba(247,245,240,0)),url('../images/170601_Salesforce_main.jpg') no-repeat ;
	background: -moz-linear-gradient(top,rgba(101,193,229,0.15),rgba(247,245,240,0)),url('../images/170601_Salesforce_main.jpg') no-repeat; 
    background: -ms-linear-gradient(top,rgba(101,193,229,0.15),rgba(247,245,240,0)),url('../images/170601_Salesforce_main.jpg') no-repeat; 
    background-size: 100%;
    background-position: top center;
    height: 800px;
    overflow: hidden;
}
header#Visual div.TOPIC { text-align: center; padding: 170px 0 0 0; }
header#Visual div.TOPIC img { width: 470px; }
header#Visual div.BTN { 
    width: 450px; 
    background: #1D1E1E; 
    color: #FFF; 
    font-weight: 600;
    font-size: 1.55em; 
    text-align: center; 
    height: 55px; line-height: 55px; 
    margin: 10px auto 25px auto; 
    border-radius: 5px;
    border: solid 2px #555;
    box-shadow: rgba(0,0,0,0.35) 0 0 15px 0;
    transition: 0.2s;
}
header#Visual div.BTN a { color: #FFF; }
header#Visual div.BTN:hover { transition: 0.4s; color: #FC0; border: solid 2px #FC0; background: #202223; }
header#Visual div.BTN a:hover { color: #FC0; transition: 0.4s; }


/* PageA 內容設定*/
section#PageA { padding: 100px 80px; }

section#PageA div.MainCloud { text-align: center; }
section#PageA p.descp { padding: 18px 15%; font-weight: 600; font-size: 16px; text-align: center; color: #000; }
section#PageA div.BOX { width: 48%; margin: 15px 1%; float: left; background: #F2F5F7; padding: 12px 30px; height: 400px; border-radius: 12px; text-align: center; }
section#PageA div.BOX h2 { font-size: 1.65em; line-height: 1.4; color: #174068; border-bottom: solid 4px #EA5514; padding: 10px 0 10px 0; margin: 0 0 10px 0; }
section#PageA div.BOX p { text-align: left; }
section#PageA div.BOX img { width: 80% }


/* PageB 內容設定*/
section#PageB { 
    background: -webkit-linear-gradient(top,rgba(0,122,170,0.85),rgba(39,91,150,0.95)),url('../images/bg2.jpg') fixed no-repeat ;
    background: -moz-linear-gradient(top,rgba(0,122,170,0.85),rgba(39,91,150,0.95)),url('../images/bg2.jpg') fixed no-repeat; 
    background: -ms-linear-gradient(top,rgba(0,122,170,0.85),rgba(39,91,150,0.95)),url('../images/bg2.jpg') fixed no-repeat; 
    background-size: cover;
    background-position: center;
    color: #FFF;
    padding: 100px 80px;
}
section#PageB a {color: #FFF;}
section#PageB h1 { text-shadow: rgba(0,0,0,0.8) 0 2px 5px; }
section#PageB h2 { font-size: 1.85em; padding: 10px 0 25px 0; }
section#PageB h2 span { background: #FC0; color: #000; padding: 8px 12px; border-radius: 5px; }
section#PageB ul.Learner { padding: 0 0 0 0; margin: 0; min-height: 280px; list-style: none; clear: both; }
section#PageB ul.Learner li { width: 15.5%; float: left; margin: 8px 0.55555%; background: rgba(0,0,0,0.3); height: 230px; border-radius: 8px;  text-align: center; overflow: hidden;  }
section#PageB ul.Learner li:hover { background: rgba(0,0,0,0.5); transition: 0.3s; }
section#PageB ul.Learner li div.IMG { width: 100%; height: 165px;  margin: auto; }
section#PageB ul.Learner li p { line-height: 1.2; padding: 15px 15px 0 15px; }

section#PageB div.CircleArrow { 
    width: 80px; height: 80px; line-height: 80px; 
    text-align: center; 
    margin: 0 auto 0 auto; 
    font-size: 3.5em; 
    border: solid 3px #FFF; 
    clear: both; 
    border-radius: 99em; 
}

section#PageB div.CircleArrow:hover { border: solid 3px #FC0; transition: 0.2s;  }

/* PageC 內容設定*/
section#PageC { background: #F2F5F7; padding: 50px 80px;  }
section#PageC div.BOX { 
    width: 48%; height: 280px; 
    margin: 15px 1%; 
    float: left; 
    background: rgba(255,255,255,0.65); 
    padding: 12px 35px; 
    border-radius: 12px; 
    border: solid 3px #EFEFED;
    transition: 0.3s;
}
section#PageC div.BOX:hover { background: rgba(255,255,255,1); border: solid 3px #CCC; transition: 0.3s;  }
section#PageC div.BOX h3 { font-size: 1.5em; line-height: 1.4; border-bottom: solid 4px #FC0; padding: 0 0 5px 0; }
section#PageC div.BOX h4 { font-size: 18px; margin: 0 0 5px 0; padding: 4px 0 2px 8px; text-align: left; border-left: solid 5px #275B96; }
section#PageC div.BOX p.descp { font-size: 15px; padding: 5px 0; }
section#PageC div.BOX ul li span.tab { background: #EA5514; color: #FFF; padding: 4px 6px; border-radius: 3px; margin: 0;  }
section#PageC div.BOX ul { padding: 8px 0 0 16px; }
section#PageC div.BOX ul li.Course { font-size: 15px; line-height: 1.5; }
section#PageC div.BOX ul li a { color: #222 }
section#PageC div.BOX ul li a:hover { color: #C30; }

/* PageD 內容設定*/
section#PageD {  }
section#PageD h1 { color: #303638 }
section#PageD h1 span { border-bottom: solid 4px #FC0; padding: 0 0 8px 0; }
section#PageD ul.Sales { margin: 20px auto; list-style: none; }
section#PageD ul.Sales li { width:48.2%; background: #FFF;  margin: 10px; float: left;  padding: 15px 0px; height: 350px; border: solid 2px #EFEFED; border-radius: 8px;  }
section#PageD ul.Sales li:hover { background: #F7F5F0; border: solid 2px #FC0; transition: 0.3s; }
section#PageD ul.Sales li div.IMG { width: 65%; height: 220px;  margin: 0px auto 15px auto;   }
section#PageD ul.Sales li p { background: #FFF; color: #666; padding: 12px 20px; text-align: center; font-size: 15px; font-weight: 600;   }
section#PageD h3 { clear: both; text-align: left; font-size: 18px; padding: 5px 0 0 10px; margin: 15px 0 10px 10px; border-left: solid 4px #FC0; }
section#PageD ul.Warning { list-style: decimal; padding: 0 0 0 25px;  }
section#PageD ul.Warning li { font-size: 14px; }



/* CPT 內容設定*/

div#CPT { width: 900px; margin: auto; clear: both; height: 150px; padding-top: 80px;   }
div#CPT div.BTN { 
    width: 280px; 
    margin: 0 10px 0 10px; 
    float: left; 
    background:#174068; 
    color: #FFF; 
    text-align: center; 
    font-size: 1.4em; 
    padding: 15px 10px; 
    border-radius: 5px;
    transition: 0.20s linear;
}
div#CPT div.BTN:hover { background: #007AAA; color: #FFF; transition: 0.20s linear; }
div#CPT div.Desktop {  }
div#CPT div.Mobile { display: none; }






/* RWD Setting */

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

    @media (max-width: 1400px) {
        article { width: 1280px;  }
        p { font-size: 14px; line-height: 1.6; }
        section#PageA { padding: 0px 80px 80px 80px; }
        section#PageD ul.Sales li { width: 48%;}

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

    @media (max-width: 1240px) {
        article { width: 800px;  }
        header#Visual { height: 750px; }
        section#PageA { padding: 0px 80px 80px 80px; }
        section#PageA div.BOX { width: 100%; margin: 22px 0; float: initial; height: auto; }
        section#PageA p.descp { padding: 18px 0; font-size: 15px; text-align: left; }
        section#PageB ul.Learner { min-height: 550px; }
        section#PageB ul.Learner li { width: 31.888888%; float: left; margin: 8px 0.55555%; height: 230px; }
        section#PageC div.BOX {  width: 100%; height: auto;  margin: 15px 0;  float: initial; padding: 12px 35px 35px 35px; }

        section#PageD ul.Sales li { width: 100%; background: #FFF;  margin: 10px 0; float: initial;  padding: 0px; height: auto; clear: both; }
        section#PageD ul.Sales li div.IMG { width: 120px; height: 120px;  margin: 0px 15px 10px 25px; padding: 0; float: left; }
        section#PageD ul.Sales li p { background: none; padding: 40px 0 20px 0; text-align: left; font-size: 15px;    }

        div#CPT { width: 100%; margin: auto; clear: both; height: 280px; padding-top: 80px;  }
        div#CPT div.BTN {  width: 100%;  margin: 8px 0; float: initial; background:#174068;  }
        div#CPT div.Desktop { display: none; }
        div#CPT div.Mobile { display: block; }

    }

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

    @media (max-width: 600px) {
        article { width: 395px;  }
        section p { font-size: 13px; }
        header#Visual { height: 520px; background-size: 120%; }
        header#Visual div.TOPIC { padding: 120px 0 0 0; }
        header#Visual div.TOPIC img { width: 75%; }
        header#Visual div.BTN { width: 92%;  font-size: 18px; }
        section#PageA div.MainCloud img{ width: 100%; }
        section#PageA p.descp { font-size: 14px; }
        section#PageA div.BOX h2 { font-size: 1.4em; line-height: 1.4; text-align: left;}
        section#PageA div.BOX img { width: 100% }
        section, section#PageA, section#PageB, section#PageC { padding: 40px 20px; }

        section#PageB h1 { font-size: 22px; }
        section#PageB h2 { font-size: 18px; }
        section#PageB ul.Learner { min-height: 760px; }
        section#PageB ul.Learner li { width: 48%; float: left; margin: 8px 0.777777%; height: 230px; }

        section#PageD ul.Sales li div.IMG { width: 200px; height: 200px;  margin: 10px auto 20px auto; padding: 0; float: initial; }
        section#PageD ul.Sales li p { background: none; padding: 0 10px; text-align: center; font-size: 15px;    }



    }

    /*iPhone 6 */
    @media (max-width: 395px) {
        article, nav div.container { 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: #252B2D; }