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

body { 
    background: #22272B;
    margin: 0 0 0 0;
    background: -webkit-linear-gradient(top,rgba(117,234,231,.91),rgba(0,123,198,0.95)),url(../images/bg2.jpg) #000 fixed;
    background: -moz-linear-gradient(top,rgba(117,234,231,.91),rgba(0,123,198,0.95)),url(../images/bg2.jpg) #000 fixed; 
    background: -ms-linear-gradient(top,rgba(117,234,231,.91),rgba(0,123,198,0.95)),url(../images/bg2.jpg) #000 fixed; 
    background-size: cover; 
    background-position: top center;

}

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; }


h1, h2, h3, h4, h5, h6 { font-weight: 600; text-align: center;  }
h1 { font-size: 3.8em; }
h2 { font-size: 2.4em; background: #FFF100; padding: 15px 0 10px 0; border-radius: 8px; font-weight: 700; }
h2 span { }
h3 { font-size: 2em; /*font-family: 'DFT_YH7'; font-weight: 400; */ }
h4 { font-size: 1.8em; margin: 10px 0 40px 0; }
h4 span { border-bottom: solid 4px #FC0; padding: 0 0 6px 0; }
h5 { font-size: 1.6em; }
ul { padding: 0 0 0 0; margin: 0 0 0 15px; }
ul li { font-size: 16px; }
p { font-size: 16px; line-height: 1.6; }
a {}

article { 
    width: 1200px; 
    margin: 0px auto 0 auto; 
    padding: 0;
    clear: both;  
    box-shadow: rgba(0,0,0,0.15) 0px 0px 10px 0px;
    background: #FDFCF8;
    background: -webkit-linear-gradient(top,rgba(253,252,248,1),rgba(253,252,248,0.75)),url(../images/bg4.jpg) #000 fixed;
    background: -moz-linear-gradient(top,rgba(253,252,248,1),rgba(253,252,248,0.75)),url(../images/bg4.jpg) #000 fixed; 
    background: -ms-linear-gradient(top,rgba(253,252,248,1),rgba(253,252,248,0.75)),url(../images/bg4.jpg) #000 fixed; 
    background-size: 100%;
    background-position: bottom center;
    color: #000;
}

header, section { 
	width: 100%; 
	margin: 0; 
	clear: both; 
	
}

section { min-height: 200px; padding: 50px 100px;  }



/* 主視覺 */

header#Visual {
	background: url(../images/170221_ipv6_main.jpg) no-repeat;
    background-size: 100%;
    background-position: top center;
    text-align: center;
    min-height: 600px;
    color: #000; 
    padding: 0px 100px;
}

header#Visual img.TOPIC { width: 450px; margin: 150px 0 40px 0; clear: both; }
header#Visual img.figure { width: 35%; float: right; margin: 40px 0 0 0;   }
header#Visual div.Content { width: 60%; float: left; }
header#Visual p.Descp { font-size: 16px; line-height: 1.6; text-align: left; width: 100%; margin: 20px auto 0 auto; padding: 5px 0 5px 15px;  text-align: justify; text-justify:inter-ideograph;  }
header#Visual p.DA { border-left: solid 7px #FFDB45; }
header#Visual p.DB { border-left: solid 7px #096; }
header#Visual p.DC { border-left: solid 7px #C33; }

 
/* 內容設定 ------------- */


/* PageA 設定 */

section#PageA { display: none; }
section#PageA div.BOX { width: 48%; min-height: 500px; float: left; margin: 10px; }
section#PageA div.BOX h4 { text-align: center; }
section#PageA div.BOX h5 { background: #C30; margin: -5px 0 0 0; padding: 15px 0; }
section#PageA div.BOX h5:hover { background: #096; transition: 0.4s; }
section#PageA div.BOX h5 a { color: #FFF; }
section#PageA div.BOX p { text-align: center; background: #EFEFED; font-size: 18px; padding: 15px 0; }
section#PageA div.BOX iframe { width: 100%; height: 250px;  }




/* PageB 設定 */

section#PageB { padding: 50px 100px 50px 100px; }
section#PageB > div#PageB_PA > h3 { text-align: left; }
section#PageB > div#PageB_PA > h3 span { border-left: solid 7px #096; padding: 3px 0 3px 12px; }
section#PageB > div#PageB_PA > h3 span > a { color: #222 }
section#PageB > div#PageB_PA > h3 span > a:hover { color: #096; transition: 0.2s; }
section#PageB h6 { font-size: 1.5em; padding: 30px 5px; color: #C30; line-height: 1.5; }
section#PageB ul { list-style: disc; margin: 0 0 0 35%; }
section#PageB ul li { padding: 3px 0;  }
section#PageB img.man { float: left; width: 26%; margin: 0 3% 0 0; padding-bottom: 50px; }
section#PageB div#CPT { width: 350px; margin: auto; clear: both; padding: 80px 0 80px 0;  }
section#PageB div#CPT div.BTN { 
    width: 350px; 
    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#PageB div#CPT div.BTN a { color: #FFF; }
section#PageB div#CPT div.BTN:hover { background: #096; transition: 0.20s linear; }
section#PageB > div#PageB_PB { clear: both; border-top: solid 2px #CCC; padding-top: 50px; }
section#PageB > div#PageB_PB > h1 { font-size: 2.6em; }
section#PageB > div#PageB_PB > h3 { font-size: 22px; }
section#PageB > div#PageB_PB > h3 a { color: #C33; }
section#PageB > div#PageB_PB > h3 a:hover { color: #096; }
section#PageB > div#PageB_PB > p { text-align: center; padding: 0 10%; }







/* RWD Setting */

    @media (max-width: 1280px) {
		article {  width: 1100px; }
        section#PageA div.BOX { width: 47.44444444%;  }

    }

    @media (max-width: 1155px) {
    	article { width: 800px; }
        h2 { font-size: 2em; }
        h4 { font-size: 1.5em; }
        header#Visual img.figure { width: 400px; float: initial; margin: 0 0 0 0; }
        header#Visual div.Content { width: 100%; float: initial; }
        section#PageA div.BOX { width: 100%; min-height: auto; float: initial; margin: 10px 0; }
        section#PageA div.BOX iframe { height: 250px;  }
        section#PageB { text-align: center; }
        section#PageB p { text-align: left; }
        section#PageB ul { margin: 0 0 0 15px; }
        section#PageB ul li { text-align: left; }
        section#PageB img.man { float: initial; width: 50%; margin: 0 auto 0 auto; }
    }
    
    @media (max-width: 800px) {
        article {  width: 100%; }
        header#Visual img { width: 80%; margin: 150px 0 40px 0; }
    }

    @media (max-width: 750px) {
        header#Visual { padding: 0 30px; margin: 0; }
        header#Visual img.TOPIC { width: 100%; margin: 100px auto 0 auto; clear: both; }
        header#Visual img.figure { width: 100%; margin: 0 0 0 0; }
        section { padding: 30px;  }
        section#PageA, section#PageB { padding: 30px; }
        section#PageA div.BOX h5 { font-size: 1.35em; }
        section#PageA div.BOX p { font-size: 16px; padding: 15px; }
        section#PageB div#CPT { width: 100%; }
        section#PageB div#CPT div.BTN { width: 100%; }
    }

    @media (max-width: 450px) {

        h2 { font-size: 1.75em; padding: 8px 20px; line-height: 1.5;  }
        section#PageA div.BOX iframe { height: 175px;  }
        section#PageB h3 { border-left: solid 7px #096; padding: 3px 0 3px 12px; font-size: 1.5em; line-height: 1.5; }
        section#PageB h3 span { border-left: 0px; padding: 0; }
        section#PageB h6 { font-size: 16px; text-align: left; }
        section#PageB ul li { line-height: 1.5; }
    }

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

    }



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