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

body { 
    background: -webkit-linear-gradient(top,rgba(244,235,217,.25),rgba(244,235,217,0.85)),url(../images/bg-07.svg) #F4EBD9;
    background: -moz-linear-gradient(top,rgba(244,235,217,.25),rgba(244,235,217,0.85)),url(../images/bg-07.svg) #F4EBD9; 
    background: -ms-linear-gradient(top,rgba(244,235,217,.25),rgba(244,235,217,0.85)),url(../images/bg-07.svg) #F4EBD9; 
 
    background-size: cover; 
    background-position: 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; }


section { 
    width: 1000px; 
    margin: 20px auto 0 auto; 
    padding: 80px 0 20px 0; 
    clear: both;  
    min-height: 950px; 
    background:#F6F1E8 ;
    box-shadow: rgba(0,0,0,0.15) 0px 0px 10px 0px;
}
section h1 { font-weight: 600; text-align: center; padding: 20px 0; }
section ul li { font-size: 16px; padding-bottom: 2px; }
section p { font-size: 16px; line-height: 25px;  }



section div#Visual { 
    width: 100%; 
    height: 438.08px; 
    overflow: hidden; 
    background: url(../images/Visual_BG-01.svg) #F6F1E8 no-repeat;
    background-size: 100%; 
    background-position: top center;
    text-align: center;
    
}
section div#Visual img { width: 580px; padding: 20px 0 0 0; }

section div#Main { 
    width: 100%; 
    min-height: 100px; 
    overflow: hidden; 
    padding: 15px 30px;
    background:#F6F1E8 ;
    
}

section div#Main a { color: #222; }

section div#Main div.Content { clear: both; }
section div#Main div.Content div.BOX { 
    width:31%; 
    height: 350px; 
    overflow: hidden; 
    float: left; 
    margin: 10px 1%;
    padding: 10px 20px;
    background: url('../images/bg-01.svg');
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    border: solid rgba(0,0,0,0) 0px;
    box-shadow: rgba(0,0,0,0.15) 0px 0px 15px 0px;
    transition: 0.30s linear;
}
section div#Main div.Content div.BOX:hover { border: solid #FC0 8px; transition: 0.30s linear; }
section div#Main div.Content div.BOX div.Text { width: 100%;/*  float: left;  */}
section div#Main div.Content div.BOX div.Text p {  }
section div#Main div.Content div.BOX div.Img { width:  70%; min-height: 250px; margin: 0 auto; position: relative;background-size:cover ;}


/*海豹*/
@keyframes MOV_Seal {
    0%   { 
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    }
    50% {
    -moz-transform:rotate(10deg);
    -webkit-transform:rotate(10deg);
    -ms-transform:rotate(10deg);
    }
    100% {
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    }
}
section div#Main div.Content div.BOX div.Seal { 
    background: url('../images/Seal.svg') no-repeat; 
    min-height: 200px; 
    background-size: cover; 
    background-position: center; 
    transition: 0.50s linear;
    animation-name: MOV_Seal;
    animation-duration: 4s;
    animation-iteration-count: infinite;

}


/*猴子*/
@keyframes MOV_Monkey {
    0%   { 
        background-size: 80%;
        transform:rotate( 20deg)
    }
    50% {
        background-size: 70%;
     
    }
  
    100% {
        background-size: 80%;
        transform:rotate( -20deg);
    }
}
section div#Main div.Content div.BOX div.Monkey { 
    background: url('../images/Monkey.svg') no-repeat; 
    min-height: 280px; 
    background-size: 100%; 
    background-position: top right; 
    transition: 0.30s linear;
    animation-name: MOV_Monkey;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-direction:alternate;
}


/*熊*/
@keyframes MOV_Bear {
    0%   { 
        margin: 0 0 0 0;
    }
    50% {
        margin: 0 -30px 0 0;
    }
    100% {
        margin: 0 0 0 0;
    }
}
section div#Main div.Content div.BOX div.Bear { 
    background: url('../images/Bear.svg') no-repeat; 
    min-height: 210px; 
    background-size: cover; 
    background-position: center;
    animation-name: MOV_Bear;
    animation-duration: 3s;
    animation-iteration-count: infinite; 
}

/*大象*/
@keyframes MOV_Elephant {
    0%   { 
     transform: translate(0,0);
    }
    50% {
        transform: translate(0,-20px);
    }
    100% {
        transform: translate(0,0);
    }
}
section div#Main div.Content div.BOX div.Elephant { 
    background: url('../images/Elephant.svg') no-repeat; 
    min-height: 200px; 
    background-size: cover; 
    background-position: center; 
    transition: 0.30s linear;
    animation-name: MOV_Elephant;
    animation-duration: 5s;
    animation-iteration-count: infinite; 
}


section div#Main div.Content div.BOX h2 { 
    font-size: 1.55em; 
    color: #BC1919; 
    font-weight: 200; 
    text-align: left; 
    line-height: 1.3; 
    border-left: 8px solid #36B7AC; 
    padding: 0 0 0 12px; 
    font-family: 'DFT_HY4'
}


section div#Main div#CPT { width: 900px; margin: auto; clear: both; padding: 30px 0 80px 0;  }
section div#Main div#CPT div.BTN { 
    width: 48%; 
    margin: 0 1% 0 1%; 
    float: left; 
    background:#36B7AC; 
    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: #CC3630; transition: 0.20s linear; }

section div#Main div.EventInfo { clear: both; }
section div#Main div.EventInfo h2 { font-size: 1.45em; padding: 0 0 0 30px; }
section div#Main div.EventInfo ul { padding: 0 0 0 50px; list-style: decimal; }
section div#Main div.EventInfo ul li { font-size: 14px; }



    @media (max-width: 999px) {
        nav iframe { display: none; }
        section { width: 800px; margin: 0px auto 0 auto; padding: 10px 0 20px 0;   }
        section div#Visual { height: 355px;  background-size: 100%; }
        section div#Visual img { width: 450px; padding: 20px 0 0 0; }
        section div#Main div#CPT { width: 100%; }
        section div#Main div.Content div.BOX { height: 250px ;}
        section div#Main div.Content div.BOX h2 { font-size: 1.4em; } 
        section div#Main div.Content div.BOX div.Text { width: 80%;float:left;  }
        section div#Main div.Content div.BOX div.Img { width: 20%; float:left;background-position: center right ;}
        section div#Main div.Content div.BOX div.Seal { background-size: 90%; background-position: center left; min-height: 271px;}
        section div#Main div.Content div.BOX div.Bear { background-size: 120%; }
        section div#Main div.Content div.BOX div.Elephant { background-size: 100%;min-height: 271px; background-position: center left;  }
        section div#Main div.Content div.BOX div.Monkey { background-size: 100%;min-height: 249px;  background-position: center left; }
    }
    
    @media (max-width: 800px) {
        section { width: 100%; }
        section div#Visual {  background-size: 100%;  background-position: top center; }
        section div#Visual img { width: 450px; padding: 20px 0 0 0; }
    }

    @media (max-width: 750px) {

        section div#Main div.Content div.BOX { width: 100%;  float: none; margin: 18px auto; height: 220px;}
        section div#Visual { height: 350px; background-size: cover; }
        section div#Visual img { width: 95%; padding: 50px 0 0 0; }
        section div#Main div#CPT div.BTN { width: 100%; float: none; margin: 15px 0; }
        section div#Main div.EventInfo h2 { font-size: 1.45em; padding: 0 0 0 0; }
        section div#Main div.EventInfo ul { padding: 10px 0 0 20px; list-style: decimal; }
        section div#Main div.Content div.BOX div.Text { width: 60%; }
        section div#Main div.Content div.BOX div.Img { width: 40%;}
    }





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