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

body { 
    background: #34363A;

}

nav iframe { width: 100%; height: 95px; border: 0; position: fixed; top: 0; background: #FFF; z-index: 9999; box-shadow: rgba(5,5,5,0.1) 0px 0px 5px 0px; display: none; }


section { 
    width: 1300px; 
    margin: 0px auto 0 auto; 
    padding: 0px 0 30px 0; 
    clear: both;  
    min-height: 1200px; 
    box-shadow: rgba(0,0,0,0.15) 0px 0px 10px 0px;
    background: #0E121B;
    color: #FFF;
}
section h1 { font-weight: 600; text-align: center; padding: 20px 0; }
section h2 { font-weight: 600; padding: 50px 0 50px 0; text-align: center;  }
section h2 span { padding: 10px 20px; border: solid 3px #917E30; color: #FFD62C; border-radius: 5px; }

section ul { padding: 0 0 0 0; margin: 0 0 0 0; }
section p { font-size: 16px; line-height: 25px;  }



section div#Visual { 
    width: 100%; 
    height: 690px; 
    background: url(../images/170512_SSCP_main.jpg) no-repeat;
    background-size:cover;
    background-position: top center;
    text-align: center;
	
}
section div#Visual img { margin: 550px 0 0 0; width: 650px; }
section div#Visual div.TXT { width: 75%; margin: 0px auto 0 auto; color: #FFF; padding-top:400px; padding-left:350px;  }
section div#Visual div.TXT h1 {
	text-align: center;
	padding: 20px 5px 20px 5px;
	margin: 0;
	font-size: 2.75em;
	line-height: 1.2;
	color: #FFF;
	text-shadow: rgba(5,5,5,0.8) 0px 0px 5px;
	background-color:rgba(0,20,57,0.8);
	width:100%;
	border-radius:10px;

}
section div#Visual div.TXT p { text-align: center; padding: 5px 40px 40px 40px; margin: 0; font-weight: 600; }

section div#Main { 
    width: 100%; 
    min-height: 100px; 
    padding: 15px 0px;

}

section div#Main a { color: #222; }
section div#Main div.Content { clear: both; padding: 50px 0; }
section div#Main div.Content ul {  list-style: disc; }
section div#Main div.Content ul li { font-size: 16px; }

/*A1 第一張*/
section div#Main div#A1 { padding: 0; margin: 20px 0 0 0; text-align: center; }
section div#Main div#A1 img { width: 500px; }
section div#Main div#A1 p { font-size: 16px; width: 85%; margin: auto; line-height: 1.8; }
.A1_boxA{width:40%; float:left;}
.A1_boxA span{padding: 10px 20px;background-color:#F60;border-radius:5px;}

/*B2 第二張*/
section div#Main div#B2 {background:-webkit-linear-gradient(top,rgba(14,18,27,0.9),rgba(14,18,27,0.7)),url(../images/1111.jpg); padding:50px 0 250px 0;background:-ms-linear-gradient(top,rgba(14,18,27,0.5),rgba(14,18,27,0.7)),url(../images/1111.jpg);}
.fa-bt { color:#FF3300;}
section div#Main div#B2 ul { list-style: none; width:700px; margin: auto; padding-top:50px; }
section div#Main div#B2 ul li { float: left; width:100%;font-size:20px;font-weight: 600;}
section div#Main div#B2 ul li h4 { text-align: center; background: #096; height: 50px; margin: 0; line-height: 50px; color: #FFF; font-weight: 600; }


/*C3 第三張*/
section div#Main div#C3 { padding-top:100px; }
section div#Main div#C3 .C3_PL{font-size:24px; text-align:center; width:80%; line-height:2.5; margin:auto; font-weight:bold;}
section div#Main div#C3 .C3_PS{font-size:20px; text-align:left; width:80%; line-height:2; margin:auto;}


/*D4 第四張*/
.D4_box{width:33%; float:left;}
section div#Main div#D4 { text-align: center; }
section div#Main div#D4 img { width: 500px; clear: both; margin-bottom: 25px; }
section div#Main div#D4 ul { width: 520px; margin: auto; list-style: none; }
section div#Main div#D4 ul li { text-align: center; width: 250px; margin: 0 5px 25px 5px; background: #304891; padding: 12px 0px; border-radius: 5px; float: left; font-size: 1.8em; }
section div#Main div#D4 p { clear: both; font-size: 16px; line-height: 1.7; width: 80%; margin: auto; }


/*E5 第5張*/
.E5_left{width:50%; float:left; margin-top:50px;}
.E5_left p{width:80%; margin:auto; text-align:left; margin-top:35px;}
.E5_right{width:50%; float:left; margin-top:50px;}
section div#Main div#E5 { text-align: center; }
section div#Main div#E5 h2 span { background: #FC0; color: #000; }
section div#Main div#E5 ul { width: 520px; margin: auto;}
section div#Main div#E5 ul li { text-align:left; line-height:1.5; }
section div#Main div#E5 a{ color:#FFF;}
section div#Main div#E5 a:hover{ color: #000; transition: 0.20s linear;}


section div#Main div#F6 {  }
/*索取按鈕*/
section div#Main div#CPT { width: 900px; margin: auto; clear: both; padding: 30px 0 180px 0;  }
section div#Main div#CPT div.BTN { 
    width: 48%; 
    margin: 0 1% 0 1%; 
    float: left; 
    background:#C33; 
    color: #FFF; 
    text-align: center; 
    font-size: 1.65em; 
    padding: 15px 10px; 
    border-radius: 5px;
    transition: 0.20s linear;
}

section div#Main div#CPT div.BTN:hover { background: #FC0; color: #000; transition: 0.20s linear; }



/* RWD */

    @media (max-width: 1440px) {
		section div#Visual div.TXT { margin: 0px auto 0 auto; color: #FFF; padding-top:300px; padding-left:350px;  }
        section { width: 100%; }
        section div#Visual div.TXT { width: 80%; }
        section div#Main div#A1 p { width: 90%; font-size: 16px;}
    }
    @media (max-width: 1366px) {
		
        section { width: 1200px; }
    }
    @media (max-width: 1280px) {
		section div#Visual { padding-top:200px;}
        section { width: 100%; }
		
		.D4_box{width:100%; float:none; margin-top:20px;}
		.E5_left {width:100%; float:none; margin-top:10px;}
		.E5_left p{width:100%; margin:auto; text-align:center; margin-top:0px;}
		.E5_right{width:100%; float:none; margin-top:10px;}
		section div#Main div#E5 ul { width: 100%; margin: auto;}
		section div#Main div#C3 .C3_PL{font-size:1.2em; text-align:center; width:100%; line-height:2.5; margin:auto; font-weight:bold;}
        section div#Main div#C3 .C3_PS{font-size:0.9em; text-align:left; width:100%; line-height:2; margin:auto;}
	}
	
    @media (max-width: 1155px) {
        nav iframe { display: none; }
        section { width: 800px; margin: 0px auto 0 auto; padding: 0px 0 20px 0; }
        section h2 { font-size: 1.8em; }
        section div#Visual img { margin: 100px 0 0 0; width: 500px; }
        section div#Visual div.TXT p { font-size: 14px; }
        section div#Main div#CPT { width: 100%; }  
        section div#Visual { height: 430px; }
		.A1_boxA{width:100%; float:none;}
		.A1_boxB{ display:none;}
		.A1_boxA span{ width:350px; display:block;padding: 10px 20px;background-color:#F60;border-radius:5px;}
        section div#Main div#B2 ul { width: 100%;  }
        section div#Main div#B2 ul li { width: 48.333333%; height:auto; line-height:2; margin: 0 10px 10px 0;  }
        section div#Main div#B2 ul li div.IMG { height: 200px; }
        section div#Main div#C3 ul { width: 100%; margin: auto; }
        section div#Main div#C3 ul li { width: 100%; height: initial; margin: 10px 10px 10px 0;  float: initial;   }
        section div#Main div#C3 ul li:hover { margin: 0 10px 10px 0;}
        section div#Main div#C3 ul li img { display: none; }
        section div#Main div#C3 ul li p { font-size: 18px; padding: 15px; margin: 0; }
        section div#Main div#D4 p { font-size: 15px; }
        section div#Main div#CPT div.BTN { font-size: 1.5em;  }
		

    }
	@media (min-width: 768px) and (max-width: 1199px) {
		.A1_boxA span{ width:100%;margin: auto;}
		.A1_boxA{width:100%; float:none;margin:auto;}
		.A1_boxA span{padding: 10px 20px;} 
	    section div#Visual { 
			height: 450px; 		
		}
		section div#Visual img { margin: 150px 0 0 0; 
		}
		section div#Visual div.TXT { width: 95%; padding-top:5%; 
		}
		section div#Visual div.TXT h1 {
			font-size: 1.6em;
		}
	    section div#Main div#B2 span { font-size:0.9em;}
	    section div#Main div#E5 { text-align: center; padding:50px; }
		section div#C3 .C3_PS { width:95%;  padding:50px; }
		section div#Main div#B2 ul {  width:100%; margin:0 0 0 5%; padding-top:50px; }
		section div#Main div#B2 ul li { width:100%; line-height:1;}
	
	}
   
    @media (max-width: 800px) {
        section { width: 100%; }
        section h2 { font-size: 1.5em; }
        section div#Visual div.TXT { width: 95%; }
        section div#Main div#B2 ul li { width: 100%; float: initial; }
        section div#Main div#B2 ul li div.Human01 { background: url('../images/P01.svg') no-repeat #DDDAC3; background-position: center; background-size: 60%; transition: 0.20s linear;  }
        section div#Main div#B2 ul li div.Human02 { background: url('../images/P02.svg') no-repeat #CDDDC3; background-position: center; background-size: 60%; transition: 0.20s linear;  }
        section div#Main div#B2 ul li div.Human03 { background: url('../images/P03.svg') no-repeat #C3DDDB; background-position: center; background-size: 60%; transition: 0.20s linear;  }
        section div#Main div#B2 ul li div.Human04 { background: url('../images/P04.svg') no-repeat #DDC3C3; background-position: center; background-size: 60%; transition: 0.20s linear;  }
        section div#Main div#B2 ul li div.IMG:hover { background-size: 70%; }
    }

    @media (max-width: 750px) {
		section div#Visual div.TXT { width: 75%; margin: 0px auto 0 auto; color: #FFF; padding-top:400px; padding-left:350px;  }
        section div#Visual div.TXT h1 {
	padding: 20px 5px 20px 5px;
	margin: 0;
	font-size: 1.2em;
	line-height: 1.2;
	color: #FFF;
	width:100%;
	border-radius:10px;

}
        section h2 { text-align: center; }
        section h2 span { padding: 10px 20px; border: solid 0px; color: #FFD62C; border-radius: 0px; line-height: 1.6; }
        section div#Visual div.TXT { padding: 20px 0 0 0; }
        section div#Main { padding: 15px 40px; }
        section div#Main div#A1 p { width: 100%; font-size: 16px;}
        section div#Main div#CPT div.BTN { width: 100%; float: none; margin: 15px 0; }
        section div#Main div#A1 img { width: 100%; }
        section div#Main div#D4 img { width: 100%; }
        section div#Main div#D4 ul { width: 100%; }
        section div#Main div#D4 ul li { float:  initial; width: 100%; }

    }

    @media (max-width: 650px) {
        section h2 { text-align: center; }
        section h2 span { padding: 0;  }
        section div#Visual img { width: 85%; }
    }

    /*iPhone 6 */
    @media (max-width: 395px) {

        section div#Visual {}

    }



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: #000; }