body { 
    background: -webkit-linear-gradient(top,rgba(214,201,176,0.4),rgba(255,255,255,0.6)),url('../images/62.jpg') fixed ;
    background: -moz-linear-gradient(top,rgba(214,201,176,0.4),rgba(255,255,255,0.6)),url('../images/62.jpg') fixed ;
    background: -ms-linear-gradient(top,rgba(214,201,176,0.4),rgba(255,255,255,0.6)),url('../images/62.jpg') fixed ;
    margin: 0 0 0 0;
    background-size: 100%; 
    background-position: top 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.3) 0 0 10px 0;
    background: #F4EFEA;
    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 { text-align: justify; text-justify:inter-ideograph; }
section div.BOX { 
    width: 31.222222%; margin: 15px 1%; 
    float: left; 
    background: #FFF; 
    padding: 0; 
    text-align: center; 
    overflow: hidden; 
    border-radius: 10px;
    border: solid 3px #FFF;
}

section div.BOX:hover { border: solid 3px #DBD2CC; transition: 0.2s; }
section > div.BOX div.Content > h3 { margin: 0 0 8px 0; padding: 10px 0 6px 0; font-size: 20px; font-weight: 500; color: #7F5B49; border-bottom: solid 2px #EFEFED; }
section > div.BOX a { color: #222; }
section > div.BOX ul { padding: 0 0 0 0; list-style: none; width: 100%; margin: auto; }
section > div.BOX ul li { float: left; width: 50%; background: #3D3C3B; color: #FFF; margin: 0; font-size: 14px; padding: 9px 0; }
section > div.BOX ul li.ClassID { background: #605A50; }
section > div.BOX div.Content { padding: 15px; }
section > div.BOX div.Content > p { clear: both; font-size: 14px; }
section > div.BOX div.IMG { height: 210px; }

section > div.BOX div.A01 { background: url('../images/IMG-A-01.svg') #F2EBEB no-repeat; background-position: center; background-size: 80%; }
section > div.BOX div.B02 { background: url('../images/IMG-A-02.svg') #62CCDD no-repeat; background-position: center; background-size: 80%; }
section > div.BOX div.C03 { background: url('../images/IMG-B-01.svg') #FFD880 no-repeat; background-position: center; background-size: 100%; }
section > div.BOX div.D04 { background: url('../images/IMG-B-02.svg') #B3CE9B no-repeat; background-position: center; background-size: 100%; }
section > div.BOX div.E05 { background: url('../images/IMG-B-03.svg') #A5DEF7 no-repeat; background-position: center; background-size: 100%; }



/* 主視覺 */

header#Visual {
	background: -webkit-linear-gradient(top,rgba(255,255,255,0.5),rgba(214,201,176,0.4)),url('../images/62.jpg') fixed ;
	background: -moz-linear-gradient(top,rgba(255,255,255,0.8),rgba(214,201,176,0.4)),url('../images/62.jpg') fixed; 
    background: -ms-linear-gradient(top,rgba(255,255,255,0.8),rgba(214,201,176,0.4)),url('../images/62.jpg') fixed; 
    background-size: 1440px;
    background-position: top center;
    height: 740px;
    margin: 0;
    overflow: hidden;
}

header#Visual > div.TOP-Content { background: #545566; height: 150px; color: #FFF; }
header#Visual > div.TOP-Content > h1 { margin: 0 }
header#Visual > div.Left-IMG { 
    text-align: center; 
    width: 39%; 
    float: left; 
    margin: -740px 0 0 9%; 
    position: relative; 
    z-index: 70; transition: 0.5s; 
}

header#Visual > div.Left-IMG > img.Earth { 
    width: 100%;
    animation-name: Earth_MOV; 
    animation-duration: 150s; 
    animation-iteration-count: infinite; 
}

header#Visual > div.Left-IMG:hover { width: 44%; transition: 0.5s; margin: -800px 0 0 5%;  }

header#Visual > div.Left-IMG > img.MAN { width: 100px; margin: -20px 0 0 0; }
header#Visual > div.Right-IMG { float: right; width: 36%; margin: -660px 12% 0 0; position: relative; z-index: 70; }
header#Visual > div.Right-IMG > img { width: 100%; text-align: center; }
header#Visual > div.Circle_Graph { 
    background: url('../images/Graphic_B-01.svg') no-repeat; 
    background-size: 100%; 
    width: 750px; height: 750px; 
    position: relative; z-index: 50;
    top: -80px; left: 50px;
    animation-name: CircleGraph_MOV; 
    animation-duration: 150s; 
    animation-iteration-count: infinite; 
}


/*MOV*/

@keyframes Earth_MOV {
    100%  
    { 
        transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@keyframes CircleGraph_MOV {
    100%  
    { 
        transform:rotate(-360deg);
        -moz-transform:rotate(-360deg);
        -webkit-transform: rotate(-360deg);
    }
}



/* PageA 內容設定*/
section#PageA { 
    background: url('../images/Graphic_C-01.svg') #609166; 
    background-size: 1000px; 
    background-position: bottom right; 
    padding-top: 40px; 
    padding-bottom: 10px; 
    color: #FFF; 
}



section#PageA > div.dialogue { background: none; border:none;  }
section#PageA > div.dialogue p { padding: 0 1.5%; }
section#PageA > div.dialogue div.IMG { 
    width: 100px; height: 100px; 
    border-radius:10px; 
    background: #FFF; 
    margin: 0 auto 20px auto; 
    background: #E8E1D9; 
    border:solid 5px #EFEFED ;
    box-shadow: rgba(0,0,0,0.1) 0 0 20px 0;

}
section#PageA > div.dialogue > div.IMG img { width: 100%; }


/* PageB 內容設定*/
section#PageB {  }
section#PageB div.FirstBOX { background:url('../images/Graphic_A-01-01.png') no-repeat; background-size: 200px; background-position: center 0px; border:none;  }
section#PageB div.FirstBOX h1 { text-align: center; background: #3D3C3B; color: #FFF; margin: 60% 0 0 0; padding: 15px 0; border-radius: 10px; }

section#PageB > div.BOX { height: 470px; }
section#PageB > div.BOX div.Content > p { text-align: left; }
section#PageB > div.BOX div.IMG div { padding: 43% 0 0 0; }


/* PageC 內容設定 */

section#PageC-Intro { 
    background: url('../images/Graphic_C-01.svg') #609166; 
    background-size: 1000px; 
    background-position: bottom right; 
    color: #FFF; 
}
section#PageC {  }

section#PageC > div.BOX { width: 36%; height: 365px; }
section#PageC > div.BOX div.Content > p { text-align: center; }
section#PageC > div.BOX div.IMG > div { padding: 46.5% 0 0 0; }
section#PageC > div.hiddenBOX { background:none; border:none; width: 10%   }


/* PageD 內容設定*/
section#PageD { padding-top: 0; }



/* CPT 內容設定*/
div#CPT { width: 700px; margin: auto; }
div#CPT div.BTN { 
    margin: 10px; 
    float: left;
    width: 48%; margin: 10px 1%;
    background:#609166; 
    color: #FFF; 
    text-align: center; 
    font-size: 1.3em; 
    padding: 15px 10px; 
    border-radius: 5px;
    transition: 0.20s linear;
}

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;  }
     
    }
    
    @media (max-width: 1280px) {
        article { width: 100%;  }

        /* 主視覺 */
        header#Visual { background-size: 1280px; height: 650px; }

    }

    @media (max-width: 1200px) {
        article { width: 800px;  }
        section { padding: 40px 40px;  }
        section div.BOX { width: 500px; margin: 15px auto;  float: initial; height: auto !important; }

        /* 主視覺 */
        header#Visual { background-size: 800px; height: 480px; }

        section#PageA { background-repeat: repeat-x; }
        section#PageA div.BOX { width: 100%; margin: 15px 0; float: initial; }
        section#PageA > div.dialogue { background: none; border:none;  }
        section#PageA > div.dialogue p { padding: 0 1.5%; }
        section#PageA > div.dialogue div.IMG { width: 100px; height: 100px; float: left; margin: 0 15px 20px auto; background: #E8E1D9; }
        section#PageA > div.dialogue > div.IMG img { width: 100%; }

        section#PageB div.FirstBOX { background:none; height: auto !important; }
        section#PageB div.FirstBOX h1 { margin: 0 0 0 0; }
        section#PageB > div.BOX { height: 470px; }
        section#PageB > div.BOX div.Content > p { text-align: left; }
        section#PageB > div.BOX div.IMG div { padding: 43% 0 0 0; }
        section#PageC > div.BOX { width: 500px; }
        section#PageC > div.hiddenBOX { display: none;   }
  
        div#CPT { width: 100%; }
        div#CPT div.BTN { width: 100%; float: initial; clear: both; margin: 10px auto; font-size: 15px; }

    }

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

    @media (max-width: 600px) {
        article { width: 395px;  }1000
        section { padding: 20px 15px;  }
        section h1 { font-size: 2em; line-height: 1.4; }
        section div.BOX { width: 100%; }
        section > div.BOX div.Content > h3 { font-size: 18px; }

        /* 主視覺 */
        header#Visual { background-size: 300%; height: 700px; }
        header#Visual > div.Left-IMG { width: 80%; float: initial; clear: both; margin: -380px 0 0 11%; }
        header#Visual > div.Left-IMG > img.MAN { width: 100px; margin: -20px 0 0 0; }
        header#Visual > div.Right-IMG { float: initial; clear: both; width: 80%; margin: 0 0 0 0; top: -50px; left: 11%; position: relative; z-index: 70; }
        header#Visual > div.Right-IMG > img { width: 100%; text-align: center; }
        header#Visual > div.Circle_Graph { width: 400px; height: 400px; top: -20px; left: 0px; }
        header#Visual > div.Left-IMG > img.MAN { width: 60px; margin: -15px 0 0 0; }

        section#PageA > div.dialogue p { font-size: 13px; }
        section#PageA > div.dialogue div.IMG { margin: 8px 15px 60px auto; }

        section#PageC > div.BOX { width: 100%; }
       
    }

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

    /*Galaxy S5 */
    @media (max-width: 360px) {
        section#PageA > div.dialogue p { font-size: 12px; }
        section#PageA > div.dialogue div.IMG { margin: 8px 15px 60px auto; }
        
    }

    /*iPhone 5 */
    @media (max-width: 320px) {
      
    }







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