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

body { 
    background: -webkit-linear-gradient(top,rgba(244,235,217,.05),rgba(244,235,217,0.25)),url(../images/bg-01.svg) #000;
    background: -moz-linear-gradient(top,rgba(244,235,217,.05),rgba(244,235,217,0.25)),url(../images/bg-01.svg) #000; 
    background: -ms-linear-gradient(top,rgba(244,235,217,.05),rgba(244,235,217,0.25)),url(../images/bg-01.svg) #000; 
    background-size: cover; 
    background-position: bottom center; 
}

section { 
    width: 1440px; 
    margin: 0 auto 0 auto; 
    padding: 20px 80px 20px 80px; 
    clear: both;  
    min-height: 100px; 
    background:#FFF ;
 
}
section h1 { font-weight: 600; padding: 20px 0; }
section ul li { font-size: 16px; padding-bottom: 2px; }
section p { font-size: 16px; line-height: 25px;  }

section#Visual { 
    width: 38%;
    height: 100%;
    padding: 40px 80px 20px 40px; 
    color: #FFF;
    left: 0;
    position: fixed;
    overflow: hidden; 
    background: -webkit-linear-gradient(top,rgba(5,5,5,0.6),rgba(5,5,5,0.95)),url(../images/BG00.jpg) #555;
    background: -moz-linear-gradient(top,rgba(5,5,5,0.6),rgba(5,5,5,0.95)),url(../images/BG00.jpg) #555; 
    background: -ms-linear-gradient(top,rgba(5,5,5,0.6),rgba(5,5,5,0.95)),url(../images/BG00.jpg) #555; 
    background-position: top center;
    background-size: cover; 
    text-align: left;
}

section#Visual h1 { font-size: 2.8em; line-height: 1.5; border-left: solid 8px #FC0; padding: 4px 0 4px 12px; font-family: 'DFT_RBG3'; font-weight: 400; margin-top:45%; }
section#Visual p { font-size: 15px; padding: 20px 0 0 0; clear: both; text-align: justify; text-justify:inter-ideograph; }
section#Visual div.btn-primary { background: #FC0; color: #000; border:0px; margin: 15px 0 0 0; }
section#Visual div.btn-primary:hover { background: #C30; color: #FFF; transition: 0.25s; }
div#RWD_BTN { display: none; }

/* 表單送出訊息*/
div#submit_INFO {}
div#submit_INFO p { font-size: 1.25em; color: #FC0; }


/*內文*/
section#A1, section#B2, section#C3, section#D4,section#E5, section#Photo { float: right; width: 62%; padding: 50px 80px 20px 80px;  }
section#B2, section#E5 { padding: 50px 80px 100px 80px; }


section#A1 div.MOV { width: 100%; height: 480px; background: #000; border:solid 8px #000; border-radius: 10px; overflow: hidden; margin: 0 0 50px 0; clear: both; }
section#A1 div.MOV iframe { width: 100%; height: 100%; }

    /* RWD Setting */
    @media (max-width: 450px) {
        section#A1 div.MOV { height: 260px; }
    }


/*表單*/
section#Footer { float: right; width: 62%; background: #EFEFED; min-height: 180px; text-align: center; }
section#Footer img { width: 400px; }

section.TOPIC_Image { float: right; width: 62%; height: 400px; padding: 40px 80px 20px 40px; background: #EFEFED;  }




section.A1_Img01 { 
    background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.15)),url(../images/A1_Img04.jpg) #F4EBD9;
    background: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.15)),url(../images/A1_Img04.jpg) #F4EBD9; 
    background: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.15)),url(../images/A1_Img04.jpg) #F4EBD9; 
    background-size: cover; 
    overflow: hidden;
}

section.A1_Img01 ul#MemberInfo { 
    float: left; 
    width: 400px; 
    list-style: none; 
    background: rgba(0,0,0,0.85); 
    border-left: 8px solid #FC0;
    padding: 20px 0 20px 30px; 
    margin: 80px 0 0 -40px ;

}
section.A1_Img01 ul#MemberInfo li { color: #FFF; }
section.A1_Img01 ul#MemberInfo li.Name { font-size: 3.8em; color: #FC0; font-family: 'DFT_RBG3';}


section.B2_Img02 {
    height: 250px;
    background: -webkit-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG03.jpg) #F4EBD9;
    background: -moz-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG03.jpg) #F4EBD9; 
    background: -ms-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG03.jpg) #F4EBD9; 
    background-size: cover; 
    background-position: bottom center;
    overflow: hidden;
}
section.C3_Img03 {
    height: 250px;
    background: -webkit-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG06.jpg) #F4EBD9;
    background: -moz-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG06.jpg) #F4EBD9; 
    background: -ms-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG06.jpg) #F4EBD9; 
    background-size: cover; 
    background-position: center;
}
section.D4_Img04 {
    height: 300px;
    background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,.05)),url(../images/BG05.jpg) #F4EBD9;
    background: -moz-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,.05)),url(../images/BG05.jpg) #F4EBD9; 
    background: -ms-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,.05)),url(../images/BG05.jpg) #F4EBD9; 
    background-size: 100%; 
    background-position: top center;
}

section#Photo {}
section#Photo ul.Content {  list-style: none; clear: both;  }
section#Photo ul { padding: 0; }
section#Photo ul.Content li { float: left; width: 30%; height: 200px; margin: 0 15px 0 0; background: #EFEFED; border: solid #EFEFED 4px; }
section#Photo ul.Content li.P01 { background: url('../images/P01.jpg'); background-size: cover;  background-position: center; }
section#Photo ul.Content li.P02 { background: url('../images/P02.jpg'); background-size: cover;  background-position: center; }
section#Photo ul.Content li.P03 { background: url('../images/P03.jpg'); background-size: cover;  background-position: center; }

section.Main  h2 { font-size: 2.4em; border-left: solid 7px rgb(241, 205, 0); color:rgb(15, 104, 146); font-weight: bold; padding: 4px 0 4px 12px; clear: both; }
section.Main  h3 { font-size: 1.5em; color: #C30;  }
section.Main p.descp { padding: 0 0 20px 0; text-align: justify; text-justify:inter-ideograph; }
section.Main div.TXTContent { padding: 0 0 0 0em; }
section.Main div.TXTContent p { text-indent : -2em ; padding: 0 3em 0 2.5em; text-align: justify; text-justify:inter-ideograph; }




    @media (max-width: 1440px) {
        section.Main  h2 { font-size: 2.2em;}
        section#Photo ul.Content li { height: 160px;}
    }

    @media (max-width: 1300px) {
        section#Visual h1 { font-size: 2.5em;}
        section.Main  h2 { font-size: 2em;}
        section#Photo ul.Content li { width: 30%; height: 120px;}
    }

    @media (max-width: 1150px) {

    }
    @media (max-width: 999px) {

        section#Visual { width: 100%; height: 700px; position: initial; background-size: cover; padding: 40px 40px 20px 40px; }
        section#Visual h1 { font-size: 2.5em; line-height: 1.3; }
        section.TOPIC_Image { float: initial; width: 100%; height: 400px; padding: 40px 80px 20px 40px; background: #EFEFED;  }
        section#A1, section#B2, section#C3, section#D4,section#E5, section#Photo { float: initial; width: 100%; padding: 50px 30px 20px 30px;  }
        
        section#Footer { float: initial; width: 100%;  }
        section.A1_Img01 { 
            background: -webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.15)),url(../images/A1_Img04.jpg) #F4EBD9;
            background: -moz-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.15)),url(../images/A1_Img04.jpg) #F4EBD9; 
            background: -ms-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.15)),url(../images/A1_Img04.jpg) #F4EBD9; 
            background-size: cover; 
            background-position: center right;
            overflow: hidden;
        }
        section.B2_Img02 {
            height: 250px;
            background: -webkit-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG03.jpg) #F4EBD9;
            background: -moz-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG03.jpg) #F4EBD9; 
            background: -ms-linear-gradient(top,rgba(255,255,255,0.75),rgba(255,255,255,.25)),url(../images/BG03.jpg) #F4EBD9; 
            background-size: cover; 
            background-position: bottom center;
            overflow: hidden;
        }
       

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

    @media (max-width: 750px) {
        section#Photo ul.Content li { float: initial; width: 100%; height: 200px; margin: 0 0 15px 0; } 
        section.Main div.TXTContent p { padding: 0 1em 0 2.15em;  }
    }

    @media (max-width: 650px) {
        section.Main  h3 { font-size: 1.3em;}

        
    }
    @media (max-width: 450px) {
        section#Visual { 
            background: -webkit-linear-gradient(top,rgba(5,5,5,0.5),rgba(5,5,5,0.95)),url(../images/BG00.jpg) #555;
            background: -moz-linear-gradient(top,rgba(5,5,5,0.5),rgba(5,5,5,0.95)),url(../images/BG00.jpg) #555; 
            background: -ms-linear-gradient(top,rgba(5,5,5,0.5),rgba(5,5,5,0.95)),url(../images/BG00.jpg) #555;
            background-position: top center;
            background-size: cover;  
        }
        section.A1_Img01 { padding: 0; }
        section.A1_Img01 ul#MemberInfo { 
            width: 100%; 
            background: rgba(0,0,0,0.75); 
            border-left: 0px;
            border-bottom: 8px solid #FC0;
            margin: 220px 0 0 0px ;
        }
        section.A1_Img01 ul#MemberInfo li.Name { font-size: 3em; }
        section#Footer { padding: 35px 20px 20px 20px; }
        section#Footer img { width: 100%; }
        div#RWD_BTN { 
            width: 100%;
            height: 65px; line-height: 65px;
            font-size: 2em; 
            display: inherit; 
            background: #FC0 !important; color: #000; 
            text-align: center; clear: both; 
        }
        div#RWD_BTN a { color: #000; }
    }

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





/*表單格式*/

.modal-header h4 { text-align: center; background: #222; color: #FC0; padding: 15px 0;  border-radius: 5px;   }
.modal-body ul { margin-left: -25px; }
.modal-body ul li { border-bottom: dashed 1px #999; padding: 5px 0; margin: 5px 0; font-weight: 600; }
    @media (max-width: 500px) {
        .modal-body ul { margin-left: -50px; }

    }

.modal-body .JKT { width:90%; }
    @media (max-width: 1440px) {
        .modal-body .JKT { margin-top: -140px; }
    }



#Main_FORM ul li input { border:0px; background: #FFF; font-size: 1.4em; padding: 8px 15px; width: 100%; border-radius: 5px; box-shadow: rgba(0,0,0,.3) 0px 0px 4px 0px;  }
#Main_FORM ul li input:focus { background: #F2E8CC; }
#Main_FORM ul li select { border:0px; background: #FFF; font-size: 1.2em; padding: 8px 15px; width: 100%; border-radius: 5px; box-shadow: rgba(0,0,0,.3) 0px 0px 4px 0px;  }
#Main_FORM ul { list-style: none; margin-left: -40px; }
#Main_FORM ul li { text-align: center; border-bottom: 0px; }
#Main_FORM .send { text-align: center; }
#Main_FORM .send input { width: 50%; font-size: 1.4em; border:0px; padding: 8px 15px; border-radius: 5px; background: #C30; color: #FFF; }
#Main_FORM h4 { font-size: 1.5em; }




/*聯絡資訊設定*/

footer { background: rgba(0,0,0,0);  width: 63%;  overflow: hidden; float: right; }
footer ul { list-style: none;  }
footer .MainContent { clear: both; width: 90%; margin: 0 auto 0 auto; padding: 30px 0 0 0; }
footer div.LogoArea { width: 100%; min-height: 50px; text-align: center;   }
footer div.LogoArea img.Ucom_logo { width: 450px; padding: 0 25px 25px 0; }
footer div.InfoArea { background: #EFEFED; }


footer .MainContent div.ContactInfo { width: 100%; clear: both;  padding: 5px 0 0 0;  }
footer .MainContent div.ContactInfo div.Phone { height: 50px; line-height: 50px; font-size: 1.85em; text-align: center; padding-bottom: 10px;   }
footer .MainContent div.ContactInfo div.location { width: 50%; float: left;   }
footer .MainContent div.ContactInfo div.location ul { float: left; padding: 0 20px 0 0; }
footer .MainContent div.ContactInfo div.location ul li { color: #222; font-size: 1em; font-weight: 600; margin: 0 0 8px 0;  }
footer .MainContent div.ContactInfo div.location ul li span.tab { background: #C33; color: #FFF; padding: 2px 6px 2px 6px; margin: 0 5px 0 0; border-radius: 4px; }
footer .MainContent div.ContactInfo div.location ul.Fax { padding: 0 0 0 0; }
footer div.Copyright { width: 100%; clear: both; padding: 10px 0 20px 0; }
footer div.Copyright p { text-align: center; color: #222; font-size: 14px; font-weight: 600; }
footer div.Copyright p a { color: #C30; }

    @media (max-width: 1199px) {
        footer { background: rgba(0,0,0,0);  width: 100%;  overflow: hidden; float: initial; }
        footer .MainContent { width: 90%;  }
        footer .MainContent div.ContactInfo div.location ul.Fax { display: none; }
        footer div.LogoArea img.US_logo, footer div.LogoArea img.ADOBE_logo { display: none; }
    }

    @media (max-width: 937px) {
        div#SocialMedia { display: none; }
        footer .MainContent div.ContactInfo div.location { width: 100%; float: none;   }
    }

    @media (max-width: 921px) {
        footer .MainContent div.ContactInfo { display: none; }
        footer div.LogoArea img.Ucom_logo { width: 60%; padding: 0 0 25px 0; }
    }

    @media (max-width: 600px) {
        footer div.LogoArea img.Ucom_logo { width: 100%; }
    }