/**
*
* @project    Twinble
* @Author     Elmo Wu <hello@xuedesign.tw>
* @copyright  2016 xuedesign studio
* @version    v3 - 201701
*
**/

/*
========================
通用設定
========================
*/
@import url(https://fonts.googleapis.com/css?family=Hind);
/*@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);*/
@font-face{ font-family:My-CG; src:url(../font/My-CG.ttf)}
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here:*/
    font-family: 'My-CG','Hind','Noto Sans TC', sans-serif} 

body{
	margin: 0;
	padding:0;
	background: url(../images/bg-site-09.jpg) top center no-repeat;
	font-family: 'My-CG','Hind','Noto Sans TC', 'sans-serif';
	font-size:100%;
	line-height:1.5em;
    color: #fff}
a:link {text-decoration:none; color:#fff}
a:visited {text-decoration:none; color:#fff}
a:hover {text-decoration:underline; color:#A5F5A2}
form{margin:0; padding:0}
image{border:0}
::selection { background: #29802A; color: #fff}
::-moz-selection { background: #29802A; color: #fff}
img::selection { background: transparent}
img::-moz-selection { background: transparent}
.clean{ clear:both}
.hidden{ display:none}

/*
========================
首頁
========================
*/
#wrap,
#banner_slider,
#mainbox,
#main-nav,
#courbox,
#calltoaction{ 
    display:block; 
    width:100%;
    min-width: 1240px}
#submenu{
    display: block;
    position: relative;
    height: 42px;
    background: rgba(12,126,12,.7)}
#google_translate_element{
    display: block;
    position: absolute;
    top: 5px;
    right: 4%}
@media screen and (min-width:1366px) and (max-width:1439px){
    #google_translate_element{ right: 6.5%}
}
@media screen and (min-width:1440px){
    #google_translate_element{ right: 17.3%}
}
.submenu-item{
    display: block;
    width: 1240px;
    height: 42px;
    overflow: hidden;
    margin: 0 auto;
    clear: both}
.submenu-item li.tt1 a{
    display: block;
    float: right;
    width: 140px;
    height: 42px;
    border-left: none;
    border-right: 1px solid #64bc66;
    text-align: center;
    color: #d1e7d1;
    text-decoration: none;
    margin-right: 140px;
    padding-top: 9px}
.submenu-item li.tt2 a{
    display: block;
    float: right;
    width: 140px;
    height: 42px;
    border-left: 1px solid #64bc66;
    border-right: 1px solid #64bc66;
    text-align: center;
    color: #d1e7d1;
    text-decoration: none;
    padding-top: 9px}
.submenu-item li a:hover{
    background: rgba(12,126,12,1);
    text-decoration: none}
#mainbox{
	display: block;
    /*position: relative;*/
    width: 100%;
    margin: 0 auto}
#banner_slider{
	display:block;
	width:100%;
	min-width:1240px;
	height:428px;
	margin:0 auto}
.flexslider .slides .sbg-01 {
    background: url(../images/banner-01.jpg) center}
.flexslider .slides .sbg-02 {
    background: url(../images/banner-02.jpg) center}
.flexslider .slides .sbg-03 {
    background: url(../images/banner-03.jpg) center}

/* 主選單 */
#main-nav{
    display: block;
    position: relative;
    width: 100%;
    height: 52px;
    border-bottom: 2px solid #e2e3e2;
    margin-bottom: 30px}
#main-nav ul{
    display: block;
    margin: 3px 0 0 29%;
    position: absolute;
    /*top:3px;
    left: 135px*/}
#main-nav li{
    display: inline-block;
    width: 196px;
    height: 52px;
    margin: 0 3px 0 0;
    font-size: 1.125em;
    line-height: 52px;
    text-align: center;
    position:relative;
    float:left}
#main-nav li a{ 
    color: #787c81; 
    text-decoration: none}
#main-nav li a:hover{ 
    color: #2A822B;
    font-weight: bold;
    text-decoration: none}
#main-nav li ul{ display: none}
#main-nav li:hover ul{display: block}
#main-nav li:hover li a,
#main-nav li.iehover li a{
    display: block;
    position: absolute;
    top: -3px/*49px*/;
    left: -60px;
    z-index: 1000;
    width: 196px;
	float: none;
    padding: 0;
	background: rgba(198,231,165,.9);
    font-size: .875em;
    color: #787c81;
    border-bottom: 1px dashed #fff}
#main-nav li:hover li a:hover,
#main-nav li:hover li:hover a,
#main-nav li.iehover li a:hover,
#main-nav li.iehover li.iehover a {
    font-weight: normal;
    color: #fff;
	background: rgb(140, 172, 109)}
#main-nav li li.subtitle a,
#main-nav li li.subtitle a:hover{
    display: block;
    width: 196px;
	float: none;
    padding: 0;
    font-size: .938em;
    font-weight: bold;
    color: #fff;
    background: rgb(140, 172, 109)}
.nav-01,
.nav-02,
.nav-03,
.nav-04,
.nav-05{ background: url(../images/bg_nav.png) no-repeat}
.nav-01{ background-position: 0 0}
.nav-02{ background-position: -206px 0}
.nav-03{ background-position: -412px 0}
.nav-04{ background-position: -618px 0}
.nav-05{ background-position: -824px 0}


/*關於我們*/
#aboutbox{
    display: block;
    width: 1240px;
    margin: 0 auto;
    padding-left: 80px}
#logobox{
    display: block;
    float: left;
    width: 505px;
    height: 200px;
    margin: 0 20px 0 0;
    background: url(../images/logo_about.png) 29px 49px no-repeat}
#logobox h1,
#logobox h2{
    display: none}
#aboutinfo{
    display: block;
    float: left;
    width: 630px;
    margin: 60px 0 48px 0;
    padding-left: 20px;
    border-left: 1px solid #9D9E9E}
#aboutinfo h3{
    display: block;
    width: 490px;
    height: 53px;
    background: url(../images/slogan-about.png) no-repeat;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden}
#aboutinfo p{
    font-size: 1.125em;
    color: #275525;
    padding-left: 8px}
#aboutinfo a,
#aboutinfo a:visited{
    color: #a2cb17;
    text-decoration: none}
#aboutinfo a:hover{
    color: #307107;
    text-decoration: none}

/*行動版icon連結*/
#mobile-icon-nav{ display: none}

/*優勢介紹*/
#courbox{
    display: block;
    width: 100%;
    height: 355px;
    overflow: hidden}
#courimg{
    display: block;
    float: left;
    width: 60%;
    height: 355px;
    background: url(../images/pic_core-competence.jpg) no-repeat top right}
#courlist{
    display: block;
    float: right;
    width: 40%;
    margin-top: 8px}
#courlist h3{ display: none}
#courlist li a{
    display: block;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden}
.cour-01,
.cour-02,
.cour-03,
.cour-04,
.cour-05{
    height: 55px;
    margin-bottom: 8px;
    background: url(../images/pic_core.png) no-repeat}
.cour-01{
    width: 405px;
    margin-left: 15px;
    background-position: 0 0}
.cour-02{
    width: 361px;
    margin-left: 89px;
    background-position: 0 -55px}
.cour-03{
    width: 252px;
    margin-left: 37px;
    background-position: 0 -110px}
.cour-04{
    width: 252px;
    margin-left: 143px;
    background-position: 0 -165px}
.cour-05{
    width: 281px;
    margin-left: 86px;
    background-position: 0 -220px}

/*喚起行動*/
#calltoaction{
    display: block;
    width: 100%;
    height: 700px;
    background: url(../images/bg_calltoaction.jpg) no-repeat top center;
    overflow: hidden}
#calltomain{
    display: block;
    position: relative;
    width: 1240px;
    margin: 0 auto}
#bg-men{ display: none}
.callto-slogan-01,
.callto-slogan-02,
.callto-slogan-03{
    display: block;
    position: absolute;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden}
.callto-slogan-01{
    width: 612px;
    height: 62px;
    top: 96px;
    left: 390px;
    background: url(../images/pic_call-slogan-01.png) no-repeat}
.callto-slogan-02{
    width: 555px;
    height: 45px;
    top:209px;
    left: 228px;
    background: url(../images/pic_call-slogan-02.png) no-repeat}
.callto-slogan-03{
    width: 661px;
    height: 83px;
    top: 254px;
    left: 306px;
    z-index: 99;
    background: url(../images/pic_call-slogan-03.png) no-repeat}

/*主選單*/
#calltomain nav{
    display: block;
    position: absolute;
    top: 430px;
    left: 175px
    /*padding: 535px 0 150px 520px*/}
#calltomain .nav-01,
#calltomain .nav-02,
#calltomain .nav-03{
    display: inline-block;
    width: 210px;
    height: 210px;
    margin: 0 12px}
#calltomain .nav-01{
    background: url(../images/bg_homenav-01.png) no-repeat}
#calltomain .nav-02{
    background: url(../images/bg_homenav-02.png) no-repeat}
#calltomain .nav-03{
    background: url(../images/bg_homenav-03.png) no-repeat}
#calltomain li ul{
    display: block;
    padding: 8px 0 0 20px}
#calltomain li li{
    font-size: .938em;
    line-height: 2em;
    margin: 0;
    padding: 0}
#calltomain h3 a{
    font-size: 2em;
    font-weight: bolder;
    line-height: 2em;
    padding:35px 0 0 20px}
#calltomain h3 a:hover{
   color: #A5F5A2;
   text-decoration: none}

/*
========================
完美置底
========================
*/
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main_content{padding-bottom:234px}
.clearfix:after{content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */

/*
========================
版權列
========================
*/
footer{
	display:block;
	width:100%;
    min-width: 1240px;
	height: 270px/*234px*/;
	background:#013c01;
	margin-top:-234px;
    padding-top: 6px}
.line{
    display: block;
    width: 100%;
    height: 4px;
    background: #275525}
#footer-main{
    display: block;
    width: 1070px;
    margin: 0 auto;
    padding-top: 40px;
    font-size: .938em;  
    color: #829282}
#footer-main h4{
    font-size: 1.25em;
    line-height: 1.5em;
    color: #2f8833}
#footer-main li{
    padding: 3px 0}
#footer-main a{ 
    color: #829282;
    text-decoration: none}
#footer-main a:hover{
    color: #F50;
    text-decoration: none}
#copyright,
#contactbox{
    display: block;
    float: left}
#copyright{
    width: 380px;
    padding: 0}
#copyright h4{
    width: 143px;
    height: 40px;
    background: url(../images/pic_footer-logo.png) no-repeat;
    text-indent: 100%;
    white-space:nowrap;
    overflow:hidden;
    margin-bottom: 20px}
#copyright p{ width: 350px}
#contactbox{
    width: 590px;
    padding: 0}
#languagebox{
    display: block;
    float: right;
    width: 100px;
    text-align: left}
#contactbox h4,
#languagebox h4{
    padding-top:20px}
.email-padding{ padding:0 16px 0 51px}

@media screen and (min-width:1366px){
    #main-nav ul{ margin: 3px 0 0 35%}
    #main-nav li:hover li a,
    #main-nav li.iehover li a{
        left: -70px}
}


/*
========================
行動版選單按鈕
========================
*/
#btn_mobilenav a{ display: none}