@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);

html,body{
    font-family: 'Noto Sans TC', 'Noto Sans SC', '微軟正黑體' ,sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 2em;
    background:#f9f9f9;
    }


header{
    width: 100%;
    background: #0b4268;
    height: auto;
    padding: 15px;
    box-sizing:border-box;
    overflow: hidden;
}

main{
    width: 85%;
    display: block;
    margin: 0 auto 100px auto;
}

main.product{
    width: 100%;}

img{
    max-width: 100%;
    height: auto;

}

hr{
margin: 1.5em 0;
border-color: #c6c6c6;
border-right: 0px;
border-left: 0px;
border-top: 0px;}

/*---------手機版選單+LOGO--------*/

#slidemenu{
    background: #ccc;
    color:#fff;
}

.drawerList li a,.drawerList li a:visited{
    color: #272727;
}

 .menu_desktop li a,.menu_desktop li a:visited{
    color: #fff;}

.drawer-btn{
    float: left;
    }

.drawer-btn a{
    color: #fff;
}

.drawerList li{
padding: 10px;
border-bottom: 1px #6a6a6a solid;
}

.logo_top{
    width: 50%;
    height: auto;
    margin:0px auto 0px auto;
    display:block;
    height: auto;
    overflow: hidden;
    
    }

.menu_desktop{
    display: none;}

/*-----------手機版選單+LOGO END------------*/
/*------------頁尾---------------*/

footer{
        display: block;
        background: #e5e5e5;
        height: auto;
        overflow: hidden;
        padding:20px 10px;
        width: 100%;
        box-sizing: border-box;
}

.contactInf{
    text-align: center;}

.foot_wrap{
    margin: 8% auto;
    height: auto;
    overflow: hidden;}

.logo_foot_wrap{
    width: 33%;
    display: block;
    margin: 0 auto 0 auto;
    }

.foot_menu{
        display: none;}

footer a,footer a{
        color: #00224f;}

.language_menu li{
    text-align: center;
    float: left;
    width: 33.333%;}

.language_menu li a.in{
        text-decoration: underline;}

.contact_inf_tit{
    color:#0b4268;
    margin:20px 0 0px 0;}




.copyrightWrap{
    width: 100%;
    border-top:1px #ccc solid;
    clear: both;
    float: left;
margin-top: 15px;}

.copyright{
        margin-top:10px;
        float:left;
        width: 100%;
        display: block;
        text-align: center;       
        
}


/*-----------頁尾END------------*/

/*----------首頁------------*/

.blockWrap{
    clear: both;
    height: auto;
    overflow: hidden;

    }



.block img{
    display: block;
    margin: 0 auto;}

.block .indexCon{
        margin:0.5em auto;}

.more,.contactBtn{
    background: #00224f;
    border-radius: 5px;
    color: #fff;
    padding:3px 6px;
    margin: 5px 0;
    display: inline-block;
    
}

.more.right{
    float: right;
}

.main_title{
    font-size:3.2em;
    color: #00224f;
    margin: 1em 0 0 0;
    text-align: center;
    line-height: 1.2em;
}



.main_title.page{
    text-align: center;
    line-height: 2em;
    margin-top: 10px;}


.index_des{
    width: 75%;
    height: auto;
    margin-bottom: 1em;}


/*-------------首頁END----------*/

/*-------------å‹•ç•«---------------*/

.revealOnScroll { opacity: 0; }

/*-------------內頁-----------------*/

.block_title{
    font-size:2.4em;
    color: #00224f;
    margin: 1em 0 0 0;
    line-height: 1.3em;}

.content_title{
    color: #00224f;
    font-size:1.3em;
    line-height: 1.5em;
    margin-bottom: 10px;
}

.aboutWrap,.careerWrap,.news_con{
    font-size: 1.4em;
    line-height: 1.5em;}

/*------------華雋優勢+解決方案--------------*/

.conInPage{
 
}

.conInPage .blockWrap{
    background: #fff;
    }

.pageImag{
    margin:0 auto;
    display: block;}

.pageTemp50_con{
    padding: 15px 15px;
    background: #fff;
}

.pageTemp50_con p{
    margin: 0px 0px 15px 0px;}

.pageTemp50_con .main_title{
    margin: 0px 0px 5px 0px;
    line-height: 1em;
    text-align: left;}

.superiority_des_01,.superiority_des_02,.superiority_des_03,.superiority_des_04,
.solution_des_01,.solution_des_02,.solution_des_03
{    background-size: cover;
    
    height: 390px;}

.superiority_des_01{
    background:url(../images/superiorityImg_01.png) center;
}
.superiority_des_02{
    background:url(../images/superiorityImg_02.png) center;
}
.superiority_des_03{
    background:url(../images/superiorityImg_03.png) center;
}

.superiority_des_04{
    background:url(../images/superiorityImg_04.png) center;
}

.solution_des_01{
    background:url(../images/solutionImg_01.png) center;}

.solution_des_02{
    background:url(../images/solutionImg_02.png) center;}

.solution_des_03{
    background:url(../images/solutionImg_03.png) center;}



/*-------------關於我們-------------*/

.aboutWrap{
    background: #fff;
    padding-bottom: 8%;
    background: url(../images/about_bg.jpg) right;
    background-size:cover;
    
}

.aboutImgNon{
    display: none;}

.aboutImgShow{
    width: 100%;
    display: block;}

.aboutImg{
    height: auto;
    margin-bottom:8%;
    overflow:hidden;
}


.aboutCon{
    width: 90%;
    display: block;
    margin:0 auto;
    padding:2% 0;}

/*-------------最新消息-------------------*/


.news_item{
    margin: 50px 0;
    height: auto;
    overflow: hidden;
    background: #fff;
    border: 1px #f9f9f9 solid;
    box-sizing: border-box;
    vertical-align: middle;
    width: 100%;
}

.news_item_hover{    
    border: 1px #0b4268 solid;
    animation:item_border_hover 1s;
    -moz-animation:item_border_hover 1s; /* Firefox */
    -webkit-animation:item_border_hover 1s; /* Safari and Chrome */
    -o-animation:item_border_hover 1s; /* Opera */}

.news_item_out{
    border: 1px #f9f9f9 solid;
    animation:item_border_out 1s;
    -moz-animation:item_border_out 1s; /* Firefox */
    -webkit-animation:item_border_out 1s; /* Safari and Chrome */
    -o-animation:item_border_out 1s; /* Opera */}

@keyframes item_border_hover{
    from {border: 1px #f9f9f9 solid}
    to {border: 1px #0b4268 solid}
}

@keyframes item_border_out{
    from {border: 1px #0b4268 solid}
    to {border: 1px #f9f9f9 solid}
}


.news_con{
    box-sizing: border-box;
    padding: 30px;
   }

/*-------------歡迎加入-------------*/

.careerWrap{

}

.career_li{
    list-style:disc;
    padding-left: 2em;
    margin-left: -1em;}

.career_right{
    padding-top: 30px;}

.careerImgShow{
    width: 100%;
    display: block;}

.careerImgNon{
    display: none;}


/*--------------------自有產品---------------------------*/

.product_banner{
    position: relative;
    width:100%;
    text-align: center;
}

.product_banner img{
    margin:auto;
    padding: 5%;
    width: 40%;
}

.sub_menuWrap{
    width: 83.3333%;
    margin: 0 auto;
    text-align: center;
    }

.sub_menu{
    width: 40%;
    display: inline-block;
}

.slidesItem{
    font-size: 1.6em;    
    margin:0 auto;
    height: auto;
    background: #f9f9f9;
    line-height: 1.5em;}

.slidesImg{
    height: auto;
    max-height: 100%;
    margin: 0 auto;
}

.slidesCon{
    margin-top: 35px;}

.introduction{
        width: 66.6666%;
        display: block;
    margin: 50px auto;}

.ai_monney_details{
      font-size: 1.6em;
    line-height: 1.5em;
    width: 100%;
    padding:25px 10px;
    box-sizing:border-box;}

.ai_monney_details .detailsImg{
    padding:25px 0;
    text-align: center;}

.chj_details .detailsCon{
    font-size: 1.6em;
    line-height: 1.5em;
margin-top: 50px;}


/*-------------實例經驗-------------*/

.instanceWrap{
    margin:15px 0;
    /*width: 88%;*/
    margin: 0 auto;
}



.instance_pageWrap,.instanceWrap{
    font-size: 1.2em;}

.instanceClassWrap{
    height: auto;
    overflow: hidden;
    margin-bottom: 5%;
    
}

.instanceItem{
    margin-bottom: 30px;
    display: block;
    height: auto;
    width: 50%;
    float: left;}

.instanceImg{
    box-shadow:5px 5px 5px rgba(20%,20%,40%,0.35);
    border-radius: 20%;
    margin:10px auto;
    display: block;
    width: 65%;
    
}

.instanceClassTit{
    color: #0b4268;
    font-size: 1.5em;
    line-height: 1.5em;
    margin:25px 15px 15px 15px;
    clear: both;
    font-weight: 700;}

.instanceClassTit,.instanceName{
    text-align: center;
    }

.row{
    height: auto;
overflow: hidden;}

.instanceName{
        margin:0px 0.2em;
        color: #0b4268;
    font-size: 1.5em;
    line-height: 1.8em;}



.instance_pageWrap{
    width: 100%;
    background: #fff;
    margin-top: 50px;

}





.instance_pageWrap .instanceImg{
    width: auto;
    position: relative;
    top: -20px;}

.instanceCon{
    padding:0 25px 25px 25px;}

.backBtn{
    width: 100%;
    text-align: right;
    color: #0b4268;
    display: block;
    font-size: 1.5em;
    clear: both;
    background: #f9f9f9;
padding-top:5px; }

/*-------------聯絡我們-------------*/

.main_title.contact{
    margin: 1em auto 0.5em auto;
    margin-top: 30px;
    width:83.333333%}

input.contactSubject,textarea.contacContent{
    width: 100%;
    font-size: 1em;
    font-family: 'Noto Sans TC', 'Noto Sans SC', '微軟正黑體' ,sans-serif;
    font-weight: 200;}

input.contactSubject{
    margin-bottom: 1em;
}

.contacContent{
    height: 330px;}

form.contact{
    display:block;
    margin: 0 auto;   
    }

.contactBlock{
    font-size: 1.3em;
    line-height: 1.5em;}

 #map {
        width:100%;
        height: 420px;
     border: 1px #c6c6c6 solid;
        
        }

.iframe-rwd {
    position: relative;
    padding-bottom:420px;
    /*padding-top: 30px;*/
    height: 0;
    overflow: hidden;
}
.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.mapLink{
     width:100%;
text-align: right;}

.mapLink a{
color:#00224f;
    text-decoration: underline; 
}

.contactBtn{
    width: 25%;
    margin-left: 75%;
    border: none;
    font-size: 21px;
    font-family: 'Noto Sans TC', 'Noto Sans SC', '微軟正黑體' ,sans-serif;
    font-weight: 200;
}




/*--------------------------Cycle2---------------------------*/



/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { width: 66%; min-width: 200px; margin: 10px auto; padding: 0; position: relative;
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
    

 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    /*width: 100%*/; padding: 0; display: block;
    /*margin: 0px auto;*/
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; width: 100%; z-index: 500; /*position: absolute;*/ top: 10px; overflow: hidden;
    margin-top: 35px;
}
.cycle-pager span { 
    font-family: arial; font-size: 50px; width: 16px; height: 16px; 
    display: inline-block; color: #ddd; cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { color: #52c1b3;}
.cycle-pager > * { cursor: pointer;}


/* caption */
.cycle-caption { position: absolute; color: white; bottom: 15px; right: 15px; z-index: 700; }

@media screen and (min-width:768px) {
    

    
    main{
        margin:0 0 100px 0;
        width: 100%;}

    .header_desktop,.blockWrap,.aboutWrap,.conInPage,.careerWrap,instance_pageWrap{
        width: 88%;
        max-width: 1280px;
        min-width: 700px;
        margin: auto;
    }
    .drawer-btn{
        display: none;
    }
    
    .logo_top_wrap{
        width: 25%;
        float: left;
        box-sizing: border-box;
        padding-right: 10px;
    }
    
    .logo_top{
        width: 100%;}
    
    .menu_desktop{
        display: block;
        width: 75%;
        float: left;
    }
    
    .menu_desktop ul li{
        float: left;
        width:11.111111%;
        text-align: center;
        margin-top: 1%;
        　
    }
    

    
    footer{
        display: block;
        background: #e5e5e5;
        height: auto;
        overflow: hidden;
        padding:0px;
        width: 100%;    
    }
    
    .foot_wrap{
        margin: 2% auto;
        width: 80%;
        max-width: 1280px;
        min-width: 700px;
        box-sizing: border-box;
        }
    
    .foot_left,.foot_right{
        float: left
    }
    
    .foot_left{
    width: 70%;
    
    }
    .foot_right{
    width: 30%;
    }
    
    .foot_menu,.language_menu{
        display:block;
        
        }
    
    .language_menu li{
        text-align: right;
        display: inline-block;
        float: none;
        width: auto;}
    
    .logo_foot_wrap{
        width: 20%;
        float: left;
    margin-right: 20%;}

    .logo_foot_wrap img{
        width: 65%;
        float: left;
        margin-top: 15px;
    }
    
    .foot_menu{
        width: 50%;
        float: left;
    }
    
    .language_menu{
        width: 33.33333%;
        float: left;
        width: 30%;
        /*text-align: right*/}
    
    .language_menu li{
        margin-top: 10px;
        padding-right:20px;
        box-sizing:border-box;}
    
    
    .foot_menu li{
        width: 33.3333333%;
        /*text-align: center;*/
        float: left;
        margin-top: 13px;
        display: block;
    }
    
    .contact_inf_tit{
        color:#00224f;
        margin:12px 0 2px 0;
        text-align: left;}

    .contactInf{
        width: 70%;
        float: left;
        text-align: left;
        line-height: 2em;
        /*margin-left: 10%;*/
    }

    .contactInf a,.contactInf a:hover ,.contactInf a:visited{
        color:#333333;
    }
    
    .copyright{
        margin-top:10px;
        width: 70%;
        text-align: left;
        
    
    }

    /*------------index------------*/

    .conIndex{
        height: auto;
        overflow: hidden;
    }

    .conIndex:nth-child(odd){
        background:#f9f9f9;
    }
    
    .conIndex:nth-child(even){
        background:#fff;
    }

    .block{
        width: 50%;
            display:table-cell;
        vertical-align: middle;
    }

    .conIndex:nth-child(odd) .blockWrap .block{
        /*float: left;*/
    }

    .conIndex:nth-child(even) .blockWrap .block:nth-child(odd){
        /*float: right;*/
        position: relative;
        left: 50%;   
    }
    
    .conIndex:nth-child(even) .blockWrap .block:nth-child(even){
        /*float: right;*/
        position: relative;
        left: -50%;
        
        
    }
    
    .block img.index_des{
        margin: 0px;}
    
    .index_des.p1{
    width: 63%;}
    
    .index_des.p2{
        width: 85%;}
    
    .main_title{
        text-align: left;}
    
    .block .indexCon{
        width: 77%;
    }
    /*----------------------內頁-------------*/
    
    .pageTemp50_con{
        padding: 15px 50px;}
    
    .conInPage{
        width: 100%;
        height: auto;
        overflow: hidden;}
    
    .conInPage:nth-child(even) .blockWrap .block:nth-child(odd){
         position: relative;
        left: 50%; 
    }
    
    .conInPage:nth-child(even) .blockWrap .block:nth-child(even){
         position: relative;
        left: -50%; 
    }
    
    /*------------------關於我們------------------*/
    
    .aboutWrap{
        background-size: auto;
        background-position: center;
        margin-top: 15px;}
    
    .aboutImgNon{
        display: block;}
    
    .aboutImg img{
        width: 25%;
        float: left;}
    
    .aboutCon{
        width: 66.6666%;}
    
    /*------------------最新消息------------------*/
    
    .newstWrap{
        width: 83.33333%;
        margin: auto;
    }
    
    .news_pic,.news_con{
    vertical-align: middle;
    display: table-cell;
    width: 50%;
    }

    .news_pic,.news_con{
        width: 50%;
        /*float: left;*/

        }
    
    .news_con{
       /* padding: 30px 50px;*/
    }
    /*------------------加入我們------------------*/
    
    .careerWrap{
        min-height: 400px;
    }
    
    .career_left{
        width: 58%;}
    
    .career_right{
        width: 42%;}
    
    .career_left,.career_right{
        box-sizing: border-box;
        padding: 20px;    
        float: left;}
    
    .careerImg{
    clear: both;
    height: auto;
    overflow: hidden;
    margin-top: -50px;
    margin-bottom: -100px;}
    
    .careerImgShow,.careerImgNon{
    width: 25%;
    display: block;
    float: left;}

   /*--------------------自有產品---------------------------*/
    
    .introduction{
        margin-top: 5%;}
    
    .sub_menuWrap{
        width: 83.3333%;
        margin: 0 auto;
        text-align: center;
        }

    .sub_menu{
        width: 25%;
        display: inline-block;
    }
    
    .cycle-slideshow{
        margin-top: 5%;}
    
    .slidesImg{
        width: 23%;
        float: left;
        margin-left: 11%;}
    
    .slidesCon{
        float: left;
        width: 44%;
        margin: 20% 11% 10% 11%;}
    
    .ai_monney_details{
      font-size: 1em;
    line-height: 1.5em;
        width: 33.3333%;
        float: left;
        margin-top: 5%;
    }
    
    .ai_monney_details .detailsImg{
    height: 100%;}
    
    .chj_details{
    width: 70%;
    margin: 0 auto;}
    
    /*------------------實例經驗------------------------------------*/
    
    .instance_pageWrap,.instanceWrap{
        font-size: .8em;
        }
    
    .instanceClassWrap{
    width: 80%;
    margin: 0 auto;}
    
    .instance_pageWrap{
        width: 83.333333%;
        margin: 0 auto;
        padding-top:35px;
        box-sizing:border-box;
    }
    
    .instanceCon{
        float: left;
        width: 81.3%;
        box-sizing:border-box;
        padding: 15px 25px 100px 0px;}
    
    .instance_pageWrap .instanceImg{
        float: left;
        width: 14.07%;
        top: 0px;
        left:-5%;
    
    }
    
    
    
    .instance_pageWrap .instanceName{
        margin: 0px;
    font-size: 3em;
    line-height: 1.5em;}
    
    .instanceItem{
        width: 16.666666%;
        float: left;
        }
    
    
    .instanceName{
        /*margin-left: 25%;*/
        /*margin-right: 22.5%;*/
        /*text-align: left;   */
        }
    
    .instanceImg{
        width: 55%;}
    
    .instanceInt{
        font-size: 1.3em;
    line-height: 1.8em;
    padding: 0px;}
    

    
    /*------------------聯絡我們------------------------------------*/
    
    .contactBlock{
        width: 50%;
        float: left;}
    
    input.contactSubject,textarea.contacContent{
        border-radius: 3px;
        border: 1px #989898 solid;
        padding: 5px;
        box-sizing: border-box;        
    }
    
    form.contact{
        display:block;
        margin: 0 auto;
        width: 66.6666%;}
    
    .contacContent{
      }
    
    
      #map {
        width:80%;
        height: 420px;
        
        }
    .mapLink{
        width:80%;}
            
            

}

@media screen and (min-width:960px) {

        
    body{
        font-size: 15px;
        line-height: 1.5em;}
    
    .menu_desktop ul li{
        
        margin-top: 2%;
        　
    }
    
        }
    

@media screen and (min-width:1360px) {
    
    body{
        font-size: 15px;}

    .p3{
        width: 66.6666%;
        }

}