@charset "utf-8";

html,body{margin:0px; padding:0px; height:100%; overflow-x:hidden; -webkit-text-size-adjust: 100%;}
body {background:#111;}
#bg{width:100%;  height:100%;  MARGIN: 0px auto;}  


/*主格*/
.model {width:100%; height:100%; margin: 0px auto;}
.mdps{width:1080px; height:100%;  margin: 0 auto; padding-bottom:0px; position:relative;}

/*改版新增*/
.fix-container {width: 1080px; height: 100%; margin: 0 auto;}
.fix-container .fix-left {float: left; width: 140px; padding-top: 20px;}
.fix-container .fix-right {float: right; width: 820px; min-height: 100%; padding: 0 40px; background:url(images/dark_text_bg.png) repeat; background-color: rgba(0,0,0,0.5); position: relative;}

.fix-container .fix-sitelogo {margin: 0 0 50px 0;}

.fix-container .fix-mainmenu ul{list-style-type:none; padding: 0px;margin: 0px;}
.fix-container .fix-mainmenu li{margin:0 0 6px 0; text-align: center; letter-spacing: 1px; font-weight: 700;}
.fix-container .fix-mainmenu li:last-child {margin: 0px;}
.fix-container .fix-mainmenu a{line-height:20px;font-family: 'Raleway', sans-serif; font-size: 14px; color: #C39C61;text-decoration:none; display: block;text-shadow: 1px 1px 4px #333;}
.fix-container .fix-mainmenu a:hover{font-size:15px; color: #ffffff; text-decoration:none; font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif";}
.fix-container .fix-mainmenu a.about:hover span {display:none;}
.fix-container .fix-mainmenu a.about:hover:before {font-size:15px; content: "關於金佳億";}
.fix-container .fix-mainmenu a.craftsmanship:hover span {display:none;}
.fix-container .fix-mainmenu a.craftsmanship:hover:before {font-size:15px; content: "座墊工藝";}
.fix-container .fix-mainmenu a.news:hover span {display:none;}
.fix-container .fix-mainmenu a.news:hover:before {font-size:15px; content: "部落格";}
.fix-container .fix-mainmenu a.portfolio:hover span {display:none;}
.fix-container .fix-mainmenu a.portfolio:hover:before {font-size:15px; content: "作品集";}
.fix-container .fix-mainmenu a.k-studio:hover span {display:none;}
.fix-container .fix-mainmenu a.k-studio:hover:before {font-size:15px; content: "家飾品.配件";}
.fix-container .fix-mainmenu a.service:hover span {display:none;}
.fix-container .fix-mainmenu a.service:hover:before {font-size:15px; content: "商品服務";}
.fix-container .fix-mainmenu a.contact:hover span {display:none;}
.fix-container .fix-mainmenu a.contact:hover:before {font-size:15px; content: "聯絡我們";}

.sidebar-social-link {margin: 30px auto 0; display: table;}
.sidebar-social-link ul li {float: left; display: inline; padding-right: 10px; margin-bottom: 15px; position: relative;}
.sidebar-social-link ul li:last-child {padding: 0px; margin: 0px;}

.sidebar-qrcode {width: 100px; margin: 30px auto 0; }
.sidebar-qrcode img {width: 100px;}

.fix-page-name {font-size: 38px; font-family: 'Meddon', cursive; color: #fff; text-shadow: 1px 1px 4px #333; margin-top: 60px;}
.fix-page-name span {font-size: 24px; font-family:"微軟正黑體","Microsoft JhengHei"; text-shadow: 1px 1px 4px #333;}

.fix-text-content {font-size: 16px; color: #fff; line-height:1.8; text-align: justify; font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif"; padding-bottom: 100px;}

table.purchase-list {border: 1px solid #666;}
table.purchase-list thead, table.purchase-list tbody {text-align: center; font-size: 14px;}
table.purchase-list thead th {color: #C39C61; background: #333;}
table.purchase-list tbody tr:hover {background: #333;}
table.purchase-list tbody tr td {padding: 0 2px;}
table.purchase-list tbody td img {width: 120px;}
table.purchase-list tbody tr td ol {list-style-position: inside; text-align: center; margin-left: -35px;}

.fix-footer {position: absolute; left: 0px; bottom: 20px; color: #505050; font-size: 12px; text-align: center; font-family:"微軟正黑體", "Microsoft JhengHei", "Arial", "Helvetica", "sans-serif"; letter-spacing: 1px; background: url(../images/fix-footer-logo.png) no-repeat center top; font-weight: 700; padding-top: 40px; width: 100%;}
.fix-footer a {color: #505050; text-decoration: none;}
.fix-footer a:hover {color: #C39C61; text-decoration: underline;}

.TopF1 {float:left; width:1080px; margin-top:10px;}
.TopF2 {width:1080px; height:130px;margin: 0 auto; padding-top:10px;}

.TOP1{float:left; width:210px; margin-top:8px;}
.TOP1 ul{list-style-type:none; padding: 0px;margin: 0px;}
.TOP1 li{margin:0 0 6px 0; letter-spacing: 0px; font-weight: 700;}
.TOP1 li:last-child {margin: 0px;}
.TOP1 a{line-height:20px;font-family: 'Raleway', sans-serif; font-size: 14px; color: #C39C61;text-decoration:none; display: block; text-shadow: 1px 1px 4px #333;}
.TOP1 a:hover{font-size:15px; color: #ffffff; text-decoration:none; font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif";}
.TOP1 a.about:hover span {display:none;}
.TOP1 a.about:hover:before {font-size:15px; content: "關於金佳億";}
.TOP1 a.craftsmanship:hover span {display:none;}
.TOP1 a.craftsmanship:hover:before {font-size:15px; content: "座墊工藝";}
.TOP1 a.news:hover span {display:none;}
.TOP1 a.news:hover:before {font-size:15px; content: "部落格";}
.TOP1 a.portfolio:hover span {display:none;}
.TOP1 a.portfolio:hover:before {font-size:15px; content: "作品集";}
.TOP1 a.k-studio:hover span {display:none;}
.TOP1 a.k-studio:hover:before {font-size:15px; content: "家飾品.配件";}
.TOP1 a.service:hover span {display:none;}
.TOP1 a.service:hover:before {font-size:15px; content: "商品服務";}
.TOP1 a.contact:hover span {display:none;}
.TOP1 a.contact:hover:before {font-size:15px; content: "聯絡我們";}

.TOP2 {float: right; width:160px;}

.logo {float:left; width:160px; text-align:right;}

.onmenu a {line-height:16px; font-family: 'Raleway', sans-serif; font-size:16px; color: #ffffff; text-decoration:none;}
.onmenu a:hover {font-size:16px; color: #ffffff; text-decoration:none;}

.fix-container .onmenu a {line-height:16px; font-family: 'Raleway', sans-serif; font-size:16px; color: #ffffff; text-decoration:none;}
.fix-container .onmenu a:hover {font-size:16px; color: #ffffff; text-decoration:none;}

.index_content {float:left; width:580px; padding:5px 25px 10px; background-image:url(../images/bgcolor.png); font-family: "微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif"; font-size: 16px; color: #fff; line-height:20px; position: absolute; bottom:10%; right:0%;}
.index_content {
    animation: fadein 4s;
    -moz-animation: fadein 4s; /* Firefox */
    -webkit-animation: fadein 4s; /* Safari and Chrome */
    -o-animation: fadein 4s; /* Opera */}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

.index_text {float:left;width:580px; margin-bottom:10px; font-size: 17px; line-height: 1.4;}
.index_text span {font-size: 36px; color: #fff; line-height: 2;}

/*底*/
.footer {float:left; width:960px; height:28px; background-image: url(../images/dnBg.png); background-repeat:no-repeat; position:fixed; bottom:20px;}
.footer_content{float:left; width:960px; height:28px;}
.footer_company {float:left; width:860px; height:28px;} 

#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../images/progress.gif) no-repeat center center;}
#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/

#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../images/progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

#prevslide, #nextslide{ position:absolute; height:43px; width:43px; top:50%; margin-top:-21px; opacity:0.6; z-index: 1000;}
#prevslide{ left:10px; background:url('../images/back.png'); }
#nextslide{ right:10px; background:url('../images/forward.png'); }
#prevslide:active, #nextslide:active{ margin-top:-19px; }
#prevslide:hover, #nextslide:hover{ cursor:pointer; }

.position_re {position: relative;}

/* pagination start */

.page_count {width: 820px; text-align: center; margin-top: 30px; font-size: 14px; color: #888;}
.page_count a {
    background: #888;
    text-decoration: none;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    color: #fff;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    width: 2em;
    margin: 0 4px;
}
.page_count a:hover, .page_count a.selected {
    color:#000;
    background: #c39d62;
}

.fix-page_count {width: 822px; text-align: center; position: absolute; bottom: 5px; font-size: 13px; color: #888;}
.fix-page_count a {
    background: #888;
    text-decoration: none;
    border-radius: 1em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    color: #fff;
    display: inline-block;
    line-height: 2em;
    text-align: center;
    width: 2em;
    margin: 0 4px;
}
.fix-page_count a:hover, .page_count a.selected {
    color:#000;
    background: #c39d62;
}

/* pagination end */

.news_list {width: 100%; font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif"; font-weight: bold;}
.news_list td {border-bottom: 1px solid #c39d62; padding: 10px 0; font-size: 15px; color: #fff;}
.news_list td.date {width: 100px; text-align: center; font-size: 12px; color: #c39d62;}
.news_list td a {color: #fff; text-decoration: none;}
.news_list td a:hover {color: #c39d62;}

.news_detail {width: 100%; font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif";}
.news_detail td.news_topic {font-size: 18px; font-weight: bold; color: #fff;}
.news_detail td.news_release_date {font-size: 13px; border-bottom: 1px solid #fff; padding-bottom: 15px;}
.news_detail td.news_content {font-size: 16px; line-height: 1.6; color: #fff; }
.news_detail td.news_content a {color: #fff; text-decoration: underline;}
.news_detail td.news_content a:hover {color: #fff; text-decoration: none;}


.news_detail_btn {width: 200px; text-align: right; position: absolute; right: 25px; top: 15px; font-size: 14px;}
.news_detail_btn a {color: #c39d62; text-decoration: none; font-weight: bold; cursor: pointer;}
.news_detail_btn a:hover {color: #fff; text-decoration: underline;}

.contact_section a {color: #c39d62; text-decoration: none;}
.contact_section a:hover {color: #fff; text-decoration: underline;}

.fix-contact_section a {color: #fff; text-decoration: none;}
.fix-contact_section a:hover {color: #c39d62; text-decoration: underline;}

.contact_table {width: 100%;}
.contact_table th {width: 110px;}
.contact_table td {height: 35px;}
.contact_table td input {font-size: 14px; background: none; border: none; border-bottom: 1px solid #c39d62; padding: 3px; color: #c39d62; vertical-align: text-top;}
.contact_table td input:focus {outline: none !important; border-bottom: 1px solid #c39d62;}
.contact_table td input#btn {border: 0px; margin-top: 20px;}
.contact_table td textarea {font-size: 14px; width: 100%; height: 100px; color: #c39d62; background: none; border: none; border-bottom: 1px solid #c39d62; line-height: 1.4;}
.contact_table td textarea:focus {outline: none !important; border-bottom: 1px solid #c39d62;}

.fix-contact_table {width: 100%;}
.fix-contact_table th {width: 110px;}
.fix-contact_table td {height: 35px;}
.fix-contact_table td input {font-size: 16px; background: none; border: none; border-bottom: 1px solid #fff; padding: 3px; color: #555; vertical-align: text-top;}
.fix-contact_table td input:focus {outline: none !important; border-bottom: 1px solid #555;}
.fix-contact_table td input#btn {border: 0px; margin-top: 20px;}
.fix-contact_table td textarea {font-size: 16px; width: 100%; height: 100px; color: #fff; background: none; border: none; border-bottom: 1px solid #555; line-height: 1.4;}
.fix-contact_table td textarea:focus {outline: none !important; border-bottom: 1px solid #555;}

.reserve_table {width: 100%; margin-top: 10px;}
.reserve_table th {width: 120px;}
.reserve_table td {height: 35px;}
.reserve_table td input {font-size: 14px; background: none; border: none; border-bottom: 1px solid #c39d62; padding: 3px; color: #c39d62; vertical-align: text-top;}
.reserve_table td input:focus {outline: none !important; border-bottom: 1px solid #c39d62;}
.reserve_table td input#btn {border: 0px; margin-top: 20px;}
.reserve_table td textarea {font-size: 14px; width: 100%; height: 100px; color: #c39d62; background: none; border: none; border-bottom: 1px solid #c39d62; line-height: 1.4;}
.reserve_table td textarea:focus {outline: none !important; border-bottom: 1px solid #c39d62;}

.fix-reserve_table {width: 100%; margin-top: 10px;}
.fix-reserve_table th {width: 120px;}
.fix-reserve_table td {height: 35px;}
.fix-reserve_table td input {font-size: 16px; background: none; border: none; border-bottom: 1px solid #555; padding: 3px; color: #fff; vertical-align: text-top;}
.fix-reserve_table td input:focus {outline: none !important; border-bottom: 1px solid #555;}
.fix-reserve_table td input#btn {border: 0px; margin-top: 20px;}
.fix-reserve_table td textarea {font-size: 16px; width: 100%; height: 100px; color: #fff; background: none; border: none; border-bottom: 1px solid #555; line-height: 1.4;}
.fix-reserve_table td textarea:focus {outline: none !important; border-bottom: 1px solid #555;}

.portfolio_container {width: 100%;}
.portfolio_container ul {list-style: none; list-style-type: none; margin: 0px; padding: 0px;}
.portfolio_container ul li {float: left; margin: 0px; height: 150px; overflow: hidden;}
.portfolio_container ul li img {width: 180px;border: 1px solid #000;}
.portfolio_container ul li img:hover {border: 1px solid #c39d62;}

.fix-portfolio_container {width: 100%;}
.fix-portfolio_container ul {list-style: none; list-style-type: none; margin: 0px; padding: 0px;}
.fix-portfolio_container ul li {float: left; margin: 0px; height: 150px; overflow: hidden;}
.fix-portfolio_container ul li {margin-bottom: 20px;}
.fix-portfolio_container ul li img {width: 162px; max-height: 148px; border: 1px solid #000;}
.fix-portfolio_container ul li img:hover {border: 1px solid #c39d62;}

.service_step {width: 876px; padding: 8px 15px; border: 2px solid #c39d62; font-size: 15px;}
.service_step span {font-size: 16px; font-weight: bold;}

.fix-service_step {width: 788px; padding: 8px 15px; border: 2px solid #c39d62; font-size: 16px;}
.fix-service_step span {font-size: 18px; font-weight: bold;}

.registration-section-title {width: 784px; padding: 8px 15px; border: 4px solid #c39d62; font-size: 16px; margin: 20px 0;}
.registration-section-title span {font-size: 18px; font-weight: bold;}

.registration-content {font-size: 16px;}
.registration-content a {color: #fff; text-decoration: none; border-bottom: 1px solid #fff;}
.registration-content a:hover {color: #c39d62; border-bottom: 3px solid #c39d62;}

.registration-login-form {font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif"; margin-top: 30px;}
.registration-login-form label {width:80px; font-weight: 700; margin-top: 3px; display:inline-block; float:left; padding:3px; text-align: right;}
.registration-login-form input {height:20px; width:220px; padding:5px 8px 4px; font-size: 16px; background: none; border: none; border-bottom: 1px solid #555; color: #fff; vertical-align: text-top;}
.registration-login-form input.captcha {width: 50px;}
.registration-login-form button {margin-top: 20px; margin-left:86px;}
.registration-login-form ul {width:580px; list-style-type:none; list-style-position:outside; margin: 20px 0 0 240px; padding:0px;}
.registration-login-form li {padding:6px; position:relative;}
.registration-login-form li img {vertical-align: middle;}
.registration-login-form li.forgot {font-size: 14px; margin-left:86px; padding-top: 0px;}

.registration-pw-reset-form label {width:120px; font-weight: 700; margin-top: 3px; display:inline-block; float:left; padding:3px; text-align: right;}
.registration-pw-reset-form ul {width:660px; list-style-type:none; list-style-position:outside; margin: 20px 0 0 120px; padding:0px;}
.registration-pw-reset-form button {margin-top: 20px; margin-left:126px;}

.registration-register-form {font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif"; margin-top: 30px;}
.registration-register-form label {width:140px; font-weight: 700; margin-top: 3px; display:inline-block; float:left; padding:3px; text-align: right;}
.registration-register-form input {height:20px; width:220px; padding:5px 8px; font-size: 16px; background: none; border: none; border-bottom: 1px solid #555; color: #fff; vertical-align: text-top;}
.registration-register-form input.captcha {width: 50px;}
.registration-register-form input.account-sex {margin-top: 2px; width:20px;}
.registration-register-form button {margin-top: 20px; margin-left:146px;}
.registration-register-form ul {width:100%; list-style-type:none; list-style-position:outside; margin: 20px 0 0 40px; padding:0px;}
.registration-register-form li {padding:8px 6px; position:relative;}
.registration-register-form li button.submit {color: #fff; font-size: 16px; border-radius: 3px 3px 3px 3px; background: #bf9d65; padding: 10px 30px; border: 0px;}

select {
    background-color: #000;
    padding: 5px;
    font-size: 16px;
    border: 1px solid #666;
    height: 34px;
    color: #fff;
    margin-top: 3px;
}

.form_hint {font-size: 14px; background: #d45252; border-radius: 3px 3px 3px 3px; color: white; margin: 3px 0 0 8px; padding: 1px 6px; z-index: 999;}
.form_tip {font-size: 14px; color: #999;}
.form_request {font-size: 14px; color: #d45252;}

button.submit {color: #fff; font-size: 16px; border-radius: 3px 3px 3px 3px; background: #bf9d65; padding: 10px 30px; border: 0px;}
button.submit:hover {opacity:.85; cursor: pointer;}

a.register-btn  {margin-left: 10px; color: #fff; font-size: 16px; border-radius: 3px 3px 3px 3px; border: 1px solid #555; padding: 4px 30px; display: inline-block;}
a.register-btn:hover {color: #fff; background: #bf9d65; border: 1px solid #bf9d65;}


.arrow_down {width: 100%; text-align: center; margin: 0 0 20px 0;}

.clear{clear:both;}

hr{
    background-color: transparent;
    height: 0;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    border-top: 1px solid rgba(0,0,0,0.9);
    margin: 0;
    clear: both;
}

*:focus {outline: none;}

.fb-share-button, .fb-like, .line-it-button, .g-plus {float: right; margin-left: 3px;}
.fb-like {margin: 0 auto;}

.blog-control {font-size: 14px; padding: 0 0 20px; margin: 10px 0; font-weight: 600;}
.blog-control select {font-size: 14px;}
.blog-control .searchbox{width: 200px; display: inline-table; vertical-align: middle; float: right;}
.blog-control .searchbox input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}
.blog-control .searchbox input:focus::-moz-placeholder{color:transparent}
.blog-control .searchbox input{outline:none}
.blog-control .searchbox input[type="text"]{background:url(http://2.bp.blogspot.com/-xpzxYc77ack/VDpdOE5tzMI/AAAAAAAAAeQ/TyXhIfEIUy4/s1600/search-dark.png) no-repeat 10px 8px #fff;font:normal 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:155px;padding:8px 15px 8px 30px; color: #333;}
.blog-content-box
{
    margin: 5px 5px 5px 0;
    overflow:hidden;
    line-height: 1.6;
    letter-spacing: 1px;
    color:#353535;
    width:264px;
    display: inline-block;
    font-size:12px;
    background-color: #fff;
    text-align: left;
}
.blog-content-box img {width: 100%;}
.blog-content-box h1{font-size:15px;}

.blog-post-list-title {padding: 0 15px;}
.blog-post-list-title h1 a {font-size: 15px; color: #000; text-decoration: none;}
.blog-post-list-title h1 a:hover {color: #c39d62; text-decoration: none;}
.blog-post-list-desc {padding: 0 15px 20px; font-size: 14px;}
.blog-post-list-attr {padding: 5px 15px 15px; font-size: 12px; color: #999; border-top: 1px dashed #ccc; letter-spacing: 1px;}
.blog-post-list-category {border: 1px solid #ccc; padding: 0px 4px; display: inline-block;}

.blog-detail-box {width: 100%; font-family:"微軟正黑體","Microsoft JhengHei", "Arial", "Helvetica", "sans-serif"; margin-top: 10px; letter-spacing: 1px;}
.blog-detail-box td.blog-detail-topic {font-size: 22px; font-weight: 600; color: #fff;}
.blog-detail-box td.blog-detail-attr {font-size: 12px; color: #aaa; padding-bottom: 15px;}
.blog-detail-box td.blog-detail-content {font-size: 16px; line-height: 1.6; color: #fff; padding: 20px 0;}
.blog-detail-box td.blog-detail-content img {max-width: 795px;}
.blog-detail-box td.blog-detail-content a {color: #fff; text-decoration: underline;}
.blog-detail-box td.blog-detail-content a:hover {color: #c39d62; text-decoration: none;}
.blog-detail-back-btn {font-size: 18px; border-top: 1px dashed #c39d62;}
.blog-detail-back-btn a {color: #c39d62; text-decoration: none; font-weight: 600;}
.blog-detail-back-btn a:hover {color: #c39d62; text-decoration: underline;}