@charset "utf-8";
body {margin:0; padding:0; font-size:15px; line-height:150%; font-family:Arial, Helvetica, sans-serif,'微軟正黑體';}
a{text-decoration:none;}
#header, #footer, #defaultimg, .content, .innerhtml, .area{width:100%; height:auto; float:left;}
.page{height:auto; position:relative; margin:auto auto; padding:auto auto;}
.block{height:auto; float:left;}
.rwdimg{width:100%; height:auto;}/*讓圖自適應用*/
*{box-sizing:border-box;}

/*header*/
#header{position:fixed; z-index:200; background: url(images/nav_bg.jpg) repeat-x #fff; box-shadow:0 3px 3px rgba(0,0,0,0.7);}
.logo{ height:auto; line-height:0; position:absolute; top:0; left:0;}
.logo img{max-width:100%; height:auto;}

/*nav*/
.nav{float:right; height:auto;}
.nav a{color:#fff; text-align:right; display:inline-block;}
.nav a:hover{color:#a740a7;}
/*subnav*/
.subnav ul{margin:0; padding:0; list-style:none;  font-size:16px;}
.subnav ul li a{border-top:1px dotted #ccc; line-height:240%;}
.subnav ul li ul li a{padding-left:1.5em; border:none; font-size:15px; color:#666;}
.subnav a:hover{color:#d16a39; background:#efefef; }
.subnav a{width:100%; color:#333; display:block; padding-left:1em;}
/*defaultimg*/
#defaultimg{line-height:0; background:url(images/wood_bg_re.jpg);}
#defaultimg .page{padding:0;}
/*footer*/
#footer{background:#333333 url(images/wood_bottom_bg_re.jpg); border-top:5px solid #7d2b82; color:#fff; padding:1em 0; font-size:13px;}
#footer .block{padding:0 2%;}
#footer a{color:#ccc; padding-left:15px; background:url(images/Bottom_icon.png) no-repeat center left; display:block; line-height:190%;}
#footer a:hover{color:#fff;}
#footer h4{margin-bottom:0;}
#footer p:first-child{float:left;}
#footer p:after{float:right;}
#footer span{padding:0 0.5em;}
/*content*/
h1.tit{color:#416484; text-align:center; padding:1em 0 0 0;}
.side{height:auto; float:left; box-sizing:border-box;}
.main{height:auto; float:left; box-sizing:border-box; line-height:180%; text-align:left;}
.innerhtml img{max-width:100%; height:auto;}
.one{width:100%;}
.path{font-size:13px; color:#999;}
/*default.aspx use*/
.d1 .block{padding:1em; font-size:13px; color:#666;}
.d1 .block h3.subject{font-weight:normal; margin:0; padding:0; font-size:15px; color:#000;}
.d1 .block a.more{color:#a740a7;}
.d1 .block a.more:hover{color:#666;}
.d1 .ani{transition:transform 0.3s; cursor:pointer;}
.d1 .ani:hover{transform:scale(1.1,1.1); background:#fff;}
/*product*/
.product .block{padding:1em;}
.product .block div.frame{border:10px solid #f4f4f4; cursor:pointer; box-shadow:0 5px 5px rgba(0,0,0,0.1);}
.product .block h3.subject{font-weight:normal; text-align:center; font-size:13px; margin:0; padding:0; color:#666;}
.prodetail div.list div{padding:3px; line-height:0; width:20%;}
.prodetail div.list div img{box-shadow:0 0 2px rgba(0,0,0,0.5);}
.prodetail div.block{padding:1em;}
.prodetail .innerhtml{padding-bottom:1em;}
.prodetail .introtit{color:#999; border-bottom:1px solid #ccc; width:100%; float:left;}
/*gallery*/
.gallery ul{margin:0; padding:0; list-style:none;}
.gallery ul li{margin:0; padding:1em; display:inline-block; height:auto; vertical-align:top;}
.gallery ul li.frame{box-shadow:0 0 5px rgba(0,0,0,0.3); padding:0.5em; display:block; color:#666;}
.gallery ul h3.subject{font-weight:normal; text-align:center;}
/*contactinfo*/

.contactinfo p{ border-bottom:1px dashed #999;}
.contactinfo .subtit{color:#666; font-weight:bold;}
.contactinfo span{color:#ccc; padding:0 0.2em; font-size:13px;}

/*input frame*/
/*.inputframe{height:auto; padding:10px 5%; text-align:left; float:left; width:100%;}*/
.contact{background:#f6f6f6; border-radius:1em; padding:1em;}
.contact p{margin-bottom:0;}
.contact input{height:30px; width:100%; border:0; }
.contact textarea{width:100%;  border:0;}
select{height:auto; width:100%;}

/*btn*/
.btn{padding:0.5em 3em; background:#666; color:#fff; border-radius:0.3em;}
.btn:hover{background:#333;}


@media screen and (max-width:767px) {/*mobile*/
.BannerDivPc{display:none;}
.hide-m{display:none;}
.page{width:100%; padding:0 5%;}
/*header*/
#header .page{padding:0;}
.logo{width:40%; padding-left:1%; padding-top:1%;}
.lang{padding:0 1em; background:#f5f5f5; width:100%;}
/*footer*/
#footer{text-align:center;}
#footer a{text-align:left;}
#footer p{width:100%;}
#footer span{display:block;}
#footer span:first-child{}
#footer .four{width:50%;}
/*nav*/
.nav{width:100%; border-bottom:1px solid #ccc; display:none;}
.nav a{width:100%; text-align:center; border-top:1px dotted #ccc; line-height:200%; color:#666; background:#fff;}
/*defaultimg*/
/*subnav*/
#submenu{border:1px solid #ccc; float:left; width:100%; border-radius:5px; margin-top:3em;}
.subtoggle{padding:15px;}
.subnav{display:none;}
/*content*/
h1.tit{font-size:24px;}
.content{margin-top:0em;}
.side{width:100%; padding:0 1em; }
.main{width:100%; padding:1em;}
.two, .three, .four, .five{width:100%;}
/*default.aspx use*/

}

@media screen and (min-width:768px) and (max-width:1023px){/*pad*/
.BannerDivMobile{display:none;}
.hide-p{display:none;}
.page{width:100%; padding:0 2%;}
/*header*/
#header .page{padding:0 0.2em;}
.logo{width:25%; padding-left:1%; }
/*defaultimg*/
/*nav*/
.nav{width:75%; text-align:right;}
.nav a{padding:1em 0.6em 0 0.6em; font-size:13px;}
/*subnav*/
.subtoggle{display:none;}
/*footer*/
#footer p:first-child{width:20%;}
#footer p:after{width:80%;}
#footer span{white-space:nowrap;}
/*content*/
h1.tit{font-size:36px;}
.side{width:28%; padding:0em 1em 1em 1em; }
.main{width:72%; padding:0em 1em 1em 1em; min-height:300px;}
.two{width:50%;}
.three{width:33.3%;}
.four{width:25%;}
.five{width:20%;}
/*default.aspx use*/
/*contact*/
.contact{width:60%;}
.contactinfo{width:40%; padding:1em 2em;}

}

@media screen and (min-width:1024px){/*desktop*/
.BannerDivMobile{display:none;}
.hide-d{display:none;}
.page{width:1024px; padding:0 1em;}
/*header*/
.logo{width:25%;}
/*defaultimg*/

/*nav*/
#header .nav a{padding:1.1em 0.6em 1.1em 0.6em;}
.nav{width:75%; text-align:right;}
.nav a{padding:1.1em 1.5em 1em 1.5em; font-weight:bold; text-shadow:0 0 5px rgba(0,0,0,0.8);}

/*subnav*/
.subtoggle{display:none;}
/*footer*/
#footer p:first-child{width:20%;height: 120px;}
#footer p:after{width:80%;}
#footer span{white-space:nowrap;}
/*content*/
h1.tit{font-size:36px;}
.side{width:25%; padding:0em 1em 1em 1em;}
.main{width:75%; padding:0em 1em 1em 1em; min-height:300px;}
.two{width:50%;}
.three{width:33.3%;}
.four{width:25%;}
.five{width:20%;}

/*default.aspx use*/

/*contact*/
.contact{width:65%;}
.contactinfo{width:35%; padding:1em 2em;}
}
.ani span {
    font-size: 7pt;
    margin: 0px 2px;
    display: inline-block;
}
.ani span a {
    padding: 2px 4px;
    border-radius: 4px;
}
.ani .ev-wood a {
    background-color: #400F24;
    color: #D4C89F;
}
.ani .nextwood a {
    background-color: #9ECB19;
    color: #2F2F2F;
}
.ani .eastvision a {
    background-color: #226825;
    color: #eff8f4;
}
.gallery ul h3.subject {
    font-size: 11pt;
    margin: 0px 0px;
    color: #666;
}

.socialMedia {
    background-color: #f0ede5;
}
.socialMedia .col-4{
     width:50%;
     display:inline-block;
     margin:0px -2px;
     vertical-align:top;
}
@media screen and (max-width: 767px) {
    .socialMedia .col-m12 {
        width: 100%;
        display:block;
        margin: 0px -2px;
    }
}
.socialMedia .frm:hover {transform: translateY(-15px);box-shadow: 0 0px 5px rgba(0,0,0,0.3);}
.socialMedia .frm{transition: 0.5s;float: left;cursor: pointer;box-shadow: 0 0 5px rgba(0,0,0,0.1);}
.socialMedia .frm_big{
    padding:0px 20px 40px 20px;
    overflow:hidden;
}
.socialMedia .frm_big .frm {
    width:100%;
    background-color:#fff;
    padding:0px 0px 0px 0px;
}

.socialMedia .frm h4.subject {
    padding: 10px 20px 0px 20px;
    font-size: 2em;
    line-height: 120%;
    color: #000;
    margin:0px;
}
.socialMedia .frm p {
    padding:0px 20px 20px 20px;
    margin:0px;
}
.socialMedia a{
    color:#009f89;
}
.socialMedia h4.subject{
    font-size: 3.2em;
    line-height: 120%;
    color: #000;
    padding: 0px 0px;
    font-weight:bold;
    margin:0px;
}
.socialMedia h4.linkSubject {
    color: #000;
    font-size: 28px;
    margin:0px;
}
.socialMedia .content {
    float:none;
}
.socialMedia .content .image {
    margin:0px;
    padding:0px;
}
.socialMedia .content .image img{
    max-width:100%;
}
.fixdLink {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

    .fixdLink .lineIcon {
        background: url(images/line_icon.png) no-repeat;
        background-size: 60px;
        width: 60px;
        height: 60px;
        display: block;
        text-indent: -1000px;
        overflow: hidden;
        margin: 0px 0px 4px 0px;
    }

    .fixdLink .telIcon {
        background: url(images/tel_icon.png) no-repeat;
        background-size: 60px;
        width: 60px;
        height: 60px;
        display: block;
        text-indent: -1000px;
        overflow: hidden;
        margin: 0px 0px 4px 0px;
    }