html {
    margin: 0 0; font-family: Arial, Microsoft JhengHei, 微軟正黑體,serif; color:#e5e5e5; font-size:13px; background-color:#fff;   
}

body,h1,p,ul,li,select {
    margin:0; padding: 0; position:relative;
}

h1 {
    width:0; height:0; overflow:hidden;
}

li {
    list-style:none;
}

div.cover { 
    position: absolute;display: none;background-color:#2e2e2e;opacity: 0;
    transition: opacity 1s ease-in-out;
}

.msg_box { position: absolute;display: none;background-color:#FFEFB4;color:#41230c;z-index:1001;width:350px; height:200px; border-radius:2px;
           border:solid 1px #fff; box-shadow:0 0 25px 2px #e9e3fe;
}
.msg_box div {
    padding:6px;font-size:1.1em; text-align:center;
}
.msg_box div.title {
    font-size:1.2em;text-align:center; background-color:#E1AC30; color:#fff;height:30px; line-height:30px;
}

.msg_box div.close {
    position: absolute;top: 5px;right: 5px;background-color: #EDA877;color: #fff;text-align: center;
    font-size: 1.6em;cursor: pointer;border-radius: 2px;padding: 0;width: 30px;height: 30px;border: 1px solid #fff;
}

div.clear {
    clear:both ;
}

div.outermost {
    background-size:cover; background-repeat:no-repeat;
}

div.content_1024 {
    width:980px; margin:0 auto; position:relative; height:inherit;
}

div.load_more {
    width:150px; padding:10px; border:1px solid #a5b8de; margin:0 auto; text-align:center; color:#808080;
    transition: all .2s ease-in-out; cursor:pointer; background-color:#fff; color:#FF9F0D;
    font-size:15px; letter-spacing:1px; font-weight:bold;
}

div.load_more:hover {
    background-color:#FF9F0D; color:#fff;
}

div.person{
    position:absolute; padding-left:17px; font-size:0.9em; color:#808080;
}

div.person:before {
    position:absolute; background-image:url(/Images/RWD_Client/person.png); top:2px; left:0px; width:12px; height:12px;
    content:" "; background-size:contain;opacity:0.8;
}

div.imageShow {
    position:absolute; top:150px; left:80px; display:none; padding:5px;
}

div.imageShow div.img{
    padding:5px;width:800px; box-shadow: 0 0 25px 2px #e9e3fe; background-color:#fff; border-radius:2px;
}

div.imageShow img{
    width:100%; background-size:cover; border:1px solid #929292; border-radius:2px;
}

div.imageShow div.txt{
    color:#222; text-align:center; padding:5px 0 5px 0; font-size:1.2em;
}

div.imageShow div.arrow_l,div.imageShow div.arrow_r {
    position:absolute; width:40px; height:40px; background-color:#fff; border-radius:40px; top:150px; left:-60px;
    cursor:pointer; opacity:0.8; font-size: 29px; color:#333; font-weight:bold;  border:2px solid #aaa;
}

div.imageShow div.arrow_l:hover, div.imageShow div.arrow_r:hover {
    opacity:0.9;
}

div.imageShow div.arrow_r {
    left:initial; right:-60px;
}

div.imageShow div.arrow_l:before,div.imageShow div.arrow_r:before{
    content:"<";   position: absolute; top: 0; left: 7px;bottom: 0; z-index: 2;
    margin: auto 0; height: 80%;width: 80%; line-height: 100%;
}

div.imageShow div.arrow_r:before {
    content:">";  margin: auto auto; left: 10px;
}

div.imageShow div.close {
    position:absolute; width:30px; height:30px; background-color:#fff; border-radius:2px; top:15px; right:15px;
    cursor:pointer; color:#333; line-height:30px; text-align:center; font-weight:bold; font-size:2em;
    border:1px solid #cacaca;
}

/* Top Start*/
div.top {
    background-size:cover; background-position:center top; position:relative; z-index:6;
}

div.top div.logo {
    width: 100%; margin: 0 auto; 
}

div.top div.logo img {
    width:980px ; display:block; background-position:center top; margin: 0 auto;
}

div.top_bg div.logo2 {
    display:none;
}

div.top div.topboxshadow {
    height:5px;
}

div.top div.text {
    font-size:14px; padding:0; height:40px; line-height: 40px; text-align:right; z-index:6;
}

div.top div.text ul.text{
    position:absolute; top:0; right:50px; z-index:5;
}

div.top div.text img.youtube{
    height:18px;vertical-align:top; position:relative; top:2px;
}

div.top div.text img.facebook{
    height:28px;vertical-align:top; position:relative; top:-5px;
}

div.top div.text select{
    vertical-align:bottom; padding:1px;
}

div.top div.text li {
    display:inline-block; padding-left:10px; padding-right:10px; position:relative; cursor:pointer;
}

div.top div.text li.line:before {
    content: "/"; position: relative; left:-10px;
}

div.top div.text li.line.language:hover>div {
    display:block;
}

div.top div.text li.line.language:hover>div ul.language {
    opacity:1;
}

div.top div.text li.line.language div {
    display:none; position:absolute; top:28px; right:0px; padding-top:9px; z-index:5;
}

div.top div.text li.line.language div:before{
    content:""; 
    border-bottom: 11px solid #fff;  border-left: 11px solid transparent;border-right: 11px solid transparent;
    height: 0; width: 0;  position: absolute;top: 1px; right:20px; z-index:6; 
}

div.top div.text li.line.language div:after{
    content:""; 
    border-bottom: 12px solid #777;  border-left: 12px solid transparent;border-right: 12px solid transparent;
    height: 0; width: 0;  position: absolute;top: 0px; right:19px; z-index:4; 
}


div.top div.text ul.language{
    background-color:#fff; border-radius:4px; width:100%; height:100%; border:1px solid #aaa; position:relative; z-index:5;
    padding-top:2px;
}

div.top div.text ul.language li{
    max-width:150px; padding:5px 25px 5px 8px; float:none; color:#444; text-align:left; font-size:13px; 
    white-space : nowrap; line-height: 20px; display:block;
}

div.top div.text ul.language li:hover {
    background-color:#f8c855;
}

div.top div.text ul.language li.select{
    color:#000; font-weight:bold;
}

div.top div.text ul.language li.select:after{
    content:"✓"; color:#21f609; font-size:1.3em; position:absolute; top:1px; right:5px;
}

div.top div.menu {
}

div.top ul.menu {
    text-align:center; width:980px;   margin: 0 auto;
}

div.top ul.menu li {
    display:inline-block; width:130px; padding:12px 0 12px 0; 
    cursor:pointer; height:inherit; transition: all .1s ;
    font-size:18px;  white-space : nowrap; text-align:center; vertical-align:top;
	white-space: normal;
}

div.top ul.menu li.li_none {
    opacity:0; cursor:default;
}

div.top ul.menu div{
    opacity:0; background-color:initial; padding-top:0px; position:relative;z-index:0;
    transition: opacity .3s ; height:0; display:none;
}

div.top ul.menu ul{
    background-color:#555 ; box-shadow: 0px 7px 7px -2px rgba(0, 0, 0, 0.3);
    border-top-right-radius:0; border-top-left-radius:0; 
}

div.top ul.menu ul li{
    float:none; border:0; font-weight:initial;font-size:0.9em;
    border-bottom:1px solid #666; border-radius:0;letter-spacing:1px; max-width:300px;
    display:block;padding:12px 10px 12px 10px; 
}

div.top ul.menu li:hover {
    position:relative; 
}

div.top ul.menu li:hover >div {
    display:block; position:relative;top:12px; opacity:1; z-index:5;height:initial;
}

div.top ul.menu ul li:hover {
    border-top:0; background-color:#666;color:#fff;
}

div.top div.menu_list {
    display:none;
}

div.top div.menu_content{
    width:100%; margin:0 auto; position: absolute; height:inherit; background:transparent;
}

div.top div.text li.line.share:hover>div.share {
    display:block;
}

div.share {
    display:none; position:absolute; top:28px; right:0px; padding-top:9px; z-index:5;
}

div.share:before{
    content:""; 
    border-bottom: 11px solid #fff; border-left: 11px solid transparent;border-right: 11px solid transparent;
    height: 0; width: 0;  position: absolute;top: 1px; right:20px; z-index:3; 
}

div.share:after{
    content:""; 
    border-bottom: 12px solid #777;  border-left: 12px solid transparent;border-right: 12px solid transparent;
    height: 0; width: 0;  position: absolute;top: 0px; right:19px; z-index:1; 
}

div.share div.share_content{
     background-color:#fff; border-radius:4px; width:115px; border:1px solid #aaa; 
     padding:5px 5px 5px 5px; position: relative; z-index:2; overflow: hidden;
}

div.share div.share_content div{
    padding:3px 3px 3px 3px; float:left;
}

div.share div.share_content img{
    position:relative; top:0; width:31px; height:31px; display:block; cursor:pointer; transition: top .2s ease-in-out;
}

div.share div.share_content img:hover{
    top:-5px;
}

div.end {
    clear:both; line-height:30px;background-size: contain; font-size:14px;
}

div.end div.content{
    position:relative; width:980px; margin:0 auto; background-size: contain;
}

div.end div.ver{
    width:980px; margin:0 auto; text-align:center; font-size:13px; cursor:pointer;
}

div.end li.service{
    position:absolute; top:10px; left:10px;
}

div.end li.link{
    position:absolute; top:10px; left:350px; cursor:pointer; 
}

div.end li.link span{
    display:inline-block;
}

div.end li.qr_code{
    position:absolute; top:10px; left:600px;
}

div.end li.map{
    position:absolute; top:200px; left:10px;
}

div.end li.map div.map{
     width:400px; height:400px;
}

div.item div.arrow_l,div.item div.arrow_r {
    position:fixed; top:350px; width:40px; height:40px; background:rgba(0,0,0,0.7); border:2px solid #aaa;
    font-size:29px; font-weight:bold; cursor:pointer;padding:5px; border-radius:40px;z-index:5;
}

div.item div.arrow_l{
    left:10px;
}

div.item div.arrow_l:before{
    content:"<"; color:#fff; position:absolute; left:12px;
}

div.item div.arrow_r{
    right:10px;
}

div.item div.arrow_r:before{
    content:">"; color:#fff; position:absolute; left:17px;
}


/* Top */
@media screen and (max-width: 900px) {

    div.top ul.menu li.li_none {
        display:none;
    }

    /* Top Start*/

    
    div.top div.topboxshadow {
        height:0px;
    }

    div.top_bg {
        height:40px; position:relative; display:block;
    }

    div.top_bg div.logo2 {
        display:block; text-align:center; white-space:nowrap; padding-left:50px; overflow:hidden; padding:2px;
    }

    div.top_bg div.logo2 div{
        display:inline-block; width:initial; width:auto; height:initial; font-size:1.2em; position:relative; 
        top:-5px;
    }

    div.top_bg div.logo2 img{
        height:30px; background-size:contain; display:inline-block; position:relative; top:4px; left:-5px;
    }

    div.top_bg2 {
        height:0;
    }

    div.top {
        position:relative; width:100%; height:inherit; z-index:6;
    }

    div.top div.content{
        width:initial;width:auto; margin:0 auto; position:relative; height:inherit;
    }

    div.top div.menu_list {
        display:block; width:30px; top:6px; left:10px;  position: absolute;  z-index: 3; padding: 1px; 
        background-color:#fff; border-radius:2px; text-align:center;
    }

    div.top div.logo {
    }

    div.top div.logo img{
        display:none;
    }

    div.top div.menu_content{
        padding-top:0px; width:100%;  transition: max-height .3s ease-in-out;
        overflow:hidden; text-overflow : ellipsis; white-space : nowrap; max-height:0;
        position:static;
    }

    div.top div.text {
        position:relative; font-size:13px; width:100%; overflow:hidden;transition: max-height .3s ease-in-out;
        padding:0 0 0 0; cursor:pointer; line-height:30px; max-height:0; box-shadow:none;
        height:auto;
    }

    div.top div.text ul.text{
        position:static; 
    }

    div.top div.text img.youtube{
        height:18px;vertical-align:top; position:relative; top:2px; left:-2px; padding-top:5px;
    }

    div.top div.text img.facebook{
        height:28px;vertical-align:top; position:relative; top:-5px; left:-5px; padding-top:5px;
    }

    div.top div.text select{
        vertical-align:bottom; padding:1px;
    }

    div.top div.text li {
        display:block; text-align:left;
    }

    div.top div.text li.line:before {
        content:"";
        position:absolute; top:3px; left:0px; height:15px; 
    }

    div.top div.text li.line.language:hover>div {
        display:block;
    }

    div.top div.text li.line.language:hover>div ul.language {
        opacity:1;
    }

    div.top div.text li.line.language div {
        display:block; position:relative; top:0; right:0px; padding-top:0px; 
    }

    div.top div.text li.line.language div:before,div.top div.text li.line.language div:after{
        content:"";  border:0;
    }

    div.top div.text ul.language{
        background-color:transparent; border-radius:4px; width:100%; height:initial; border:0px solid #aaa; border-top:0;
        padding-left:5px;
    }

    div.top div.text ul.language li{
        max-width:initial; max-width:none; padding:6px; float:none; text-align:left; font-size:0.9em; font-weight:normal;
        white-space : nowrap;    display:inline-block; border:0; color:#fff;
    }

    div.top div.text ul.language li:hover {
        background-color:transparent;
    }

    div.top div.text ul.language li.select{
        color:#21f609; font-weight:bold;
    }

    div.top div.text ul.language li.select:after{
        top:8px; left:-8px;
    }

    div.share {
        display:block; position:static; padding-top:0;padding-bottom:5px;
    }

    div.share div.share_content{
        width:auto;
    }

    div.share:before,div.share:after{
        content:"";  border:0; top:initial; bottom:0;
    }

    div.share div.share_content img{
        width:25px; height:25px;
    }

    div.top div.menu {
        position:relative; z-index:3; top:0; left:0; width:100%; text-align:center;background-color:transparent;
    }

    div.top ul.menu {
        position:relative; z-index:1;left:0; top:0; height:inherit; width:100%;
        text-align:left;
    }

    div.top ul.menu li {
        float:none; border-radius:0; max-width:none; font-weight: bold; display: block; 
        padding:16px 10px 16px 10px; letter-spacing:1px;text-align:left;

    }

    div.top ul.menu div{
        display:block; background-color:transparent; padding-top:5px;height:auto; overflow:initial; opacity:1;
    }

    div.top ul.menu div:before{
        content:""; border:0;
    }

    div.top ul.menu ul{
        padding-bottom:0px;background-color:transparent; box-shadow:none; padding-left:5px;
    }

    div.top ul.menu ul li{
        float:none; font-weight:normal;font-size:0.9em;border-radius:0;letter-spacing:1px; max-width:none;
        padding:6px; display:block; border:0; 
    }

    div.top ul.menu li:hover {
        background:transparent;
    }

    div.top ul.menu li:hover >div {
        display:block; position:static;top:0;right:0; opacity:1;
    }

    div.top ul.menu ul li:hover {
        background-color:transparent;
    }

    /* Top End*/
}

/* End */
@media screen and (max-width: 900px) {
    div.end {
        clear:both; line-height:30px;
    }

    div.end div.content{
        position:static; width:auto; padding:10px; height:auto; height:auto;
    }

    div.end div.ver{
        width:auto; 
    }

    div.end li.service{
        position:static; height:auto;
    }

    div.end li.link{
        position:static; height:auto;
    }

    div.end li.link span{
        display:inline-block;
    }

    div.end li.qr_code{
        position:static;
    }

    div.end li.qr_code img{
        width:100%; height:auto;
    }

    div.end li.qr_code img:after {
        content:""; padding-top:70%; display:block
    }

    div.end li.map{
        position:static;
    }

    div.end li.map div.map{
         width:100%; height:auto;
    }

}

/* public */
@media screen and (max-width: 900px) {

    .msg_box { width:98%;
    }

    div.imageShow {
        position:absolute; top:150px; left:80px; display:none; width:98%;  padding:0;
    }

    div.imageShow div.img{
        width:initial;  width:auto;
    }

    div.imageShow img{
        width:100%; background-size:cover;
    }

    div.imageShow div.arrow_l{
        top:-35px; left:0px; width:30px; height:30px; opacity:1; font-size:22px;
    }

    div.imageShow div.arrow_r {
         top:-35px; left:90px; width:30px; height:30px; opacity:1; font-size:22px;
    }

    div.imageShow div.arrow_l:before,div.imageShow div.arrow_r:before{
  
 
    }

    div.imageShow div.arrow_r:before {
       
    }

    div.imageShow div.close {
        right:0px; top:-35px ;font-size:26px;
    }

    div.item div.arrow_l,div.item div.arrow_r {
        top:50px; width:30px; height:30px; font-size:22px;
    }

    div.item div.arrow_l{
        left:10px;
    }

    div.item div.arrow_l:before{
        color:#fff; position:absolute; left:10px;
    }

    div.item div.arrow_r{
        right:10px;
    }

    div.item div.arrow_r:before{
        color:#fff; position:absolute;  left:14px;
    }
}

/*slider img*/

div.images_mobile {
    display:none;
}

div.images div.img_pre,div.images div.img_next{
    position:absolute; width:980px; height:inherit;  background-size: cover; background-position: top right;
}

div.images div.img_pre div, div.images div.img_next div{
    background:rgba(0,0,0,0.3); width:inherit; height:inherit; display:none;
}

div.images div.image_full div.image{
    height:inherit;
}

div.images div.image_full div.image div.img {
    width:100%; height:inherit; transition: opacity .5s ease-in-out; position: absolute; left: 0; top: 0;
    background-size:cover; background-position:top center;
}

div.images {
    padding-top:0px; padding-bottom:0px; 
}

div.images div.image_full{
    position:relative; width:980px; margin:0 auto; 
}

/*div.images div.image_full div.image div.img:after,div.images div.img_pre div:after, div.images div.img_next div:after{
    content:""; display:block; padding-top:50%;
}*/

div.images div.image_full div.image img{
    display:block; width:100%; background-repeat: no-repeat; transition: opacity .5s ease-in-out;
    position: absolute; left: 0; top: 0; max-width:950px;
}

div.images div.image_full:hover > div.arrow{
    opacity:0.8; 
}

div.images div.arrow {
    position:absolute; display:none; top:50px; width:45px; height:45px; background-color:#f2ecdb; border-radius:4px; 
    color:#222222; font-size:3.5em; font-weight:bold; line-height:35px;cursor:pointer; 
    transition: opacity .5s ease-in-out; opacity:0; text-align:center;z-index:3;
}

div.images div.arrow.left {
    left:15px;
}

div.images div.arrow.right {
    right:15px; 
}

div.images div.small_image{
    position:absolute; bottom:5px; right:5px; width:100%; padding-top:0px; padding-bottom:0px; background-color:initial;
    z-index:1; transition: all .5s ease-in-out; opacity:1; z-index:5;
}

div.images div.small_image.bg{
    display:none;
}

div.images div.small_image div.content,div.images div.small_image.bg div.content{
    margin:0 auto;  overflow:hidden; padding:0; text-align:right;
}

div.images div.small_image ul{
    margin:0 auto; width:100%; text-align:right;
}

div.images div.small_image li{
    padding-left:0px; padding-right:10px; display:inline-block;
}

div.images div.small_image ul img{
    width:50px; height:50px; background-repeat: no-repeat; cursor:pointer; opacity:1; border:1px solid #e5b33d;
    position:relative; top:0;  z-index:5; display:none;
}

div.images div.small_image ul img:hover {
    opacity:0.7; top:0; border:1px solid #1dd91b;
}

div.images div.small_image ul div.page {
    width:15px; height:15px; border-radius:15px; border:solid 2px #666; background-color:#fff; cursor:pointer; 
}

div.images div.small_image ul div.page_select {
    width:15px; height:15px; border-radius:15px; border:solid 2px #fff; background-color:#666;
}

/* Image */
@media screen and (max-width: 900px) {
    div.images {
        display:none;
    }

    div.images div.img_pre, div.images div.img_nex {
        display:none;
    }

    div.images_mobile {
        display:block;
    }

    div.images_mobile div.image_full {
        position:relative; width:100%; height:auto; overflow:initial;
    }

    div.images_mobile div.image_full div.image div.img {
        height:auto; width:100%; background-repeat: no-repeat; transition: opacity .5s ease-in-out;
        position: absolute; left: 0; top: 0; background-size:cover; background-position:center;
    }

    div.images_mobile div.image_full div.image div.img:before{
        content: "";display: block; padding-top: 65%;  
    }

    div.images_mobile div.image_full div.image img{
        min-width:initial;min-width:0;
    }

    div.images_mobile div.small_image ul img:hover {
        top:0px;
    }

    div.images_mobile div.small_image.bg{
        display:none;
    }

    div.images_mobile div.small_image{
        position:relative; text-align:center;opacity:1;bottom:0
    }

    div.images_mobile div.small_image div.content,div.images div.small_image.bg div.content{
        margin:0 auto; width:initial;width:auto; overflow:hidden; padding:10px 5px 10px 5px;
}

    div.images_mobile div.small_image ul img{
        display:block; width:40px; height:40px; opacity:1;
    }

    div.images_mobile div.small_image ul{
        position:initial; width:initial;width:auto; text-align:center; overflow:hidden;
    }

    div.images_mobile div.small_image li{
        float:none; display:inline-block; padding:2px;
    }

}