#skinchooser { overflow: visible; display:none; font-size: 15px; font-family: "Microsoft JhengHei"; margin-top: 8px; background: #fff; position: relative; }
#thumbview { /*width: 100%; */height: 440px; overflow: hidden; }
.thumbpage { color: white; display: none; }
.ui-dialog .ui-dialog-title {  font-size: 15px; font-family: "Microsoft JhengHei"; margin: 0px;} 
.ui-dialog .ui-dialog-titlebar{ border: none;background: #ddd; color: #777; border-radius: 3px; padding: 4px 15px; position: relative; margin-bottom: 5px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; width: 16px; height: 16px; background: url( images/closen.png) center no-repeat; position: absolute;   }
.ui-dialog .ui-dialog-content{padding:0px;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover{background: none; border: 1px solid #ddd; }
.slts-vsn { background: #818181; height: 30px; padding-left: 160px; position: absolute; top: 0; left: 0; right: 0; }
.slts-vsn ul, .slts-type ul, .slts-layout ul { list-style: none; margin: 0; padding: 0; }
.slts-vsn li { float: left; color: #fff; padding: 0 35px; line-height: 30px; cursor: pointer; }
.slts-vsn li:hover { background: #979797; }
.slts-vsn li.cus { background: #cf9557; position: absolute; right: 0; top: 0; padding: 0 25px; }
.slts-vsn li.cus:hover { background: #e4ac71; }
.slts-vsn li a {color: #fff;text-decoration: none;}
.slts-vsn li.on { background: #72abb0; margin-top: -4px; height: 33px; line-height: 35px; border-bottom: 1px solid #5e969b; }
.slts-type { width: 140px; background: #72abb0; float: left; margin-top: 30px; }
@font-face { font-family: "icomoon"; src: url("images/icomoon.woff?-52b99t") format("woff"), url(" images/icomoon.svg?-52b99t#icomoon") format("svg"); font-weight: normal; font-style: normal; }
.slts-type li { font-family: "icomoon", "Microsoft JhengHei"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 29px; /* Better Font Rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; height: 29px; cursor: pointer; padding-right: 5px; text-align: center; vertical-align: middle; border-bottom: 1px solid #72abb0; }



.slts-type li:hover { background:#8ebcc0; }
.slts-type li.on { background: #fff; color: #72abb0; -webkit-box-shadow: 0px 2px 0px 0px rgba(50, 50, 50, 0.05); -moz-box-shadow: 0px 2px 0px 0px rgba(50, 50, 50, 0.05); box-shadow: 0px 2px 0px 0px rgba(50, 50, 50, 0.05); }
.slts-type li:nth-child(1):before { content: "\e600"; }
.slts-type li:nth-child(2):before { content: "\e601"; }
.slts-type li:nth-child(3):before { content: "\e602"; }
.slts-type li:nth-child(4):before { content: "\e603"; }
.slts-type li:nth-child(5):before { content: "\e604"; }
.slts-type li:nth-child(6):before { content: "\e605"; }
.slts-type li:nth-child(7):before { content: "\e606"; }
.slts-type li:nth-child(8):before { content: "\e607"; }
.slts-type li:nth-child(9):before { content: "\e608"; }
.slts-type li:nth-child(10):before { content: "\e609"; }
.slts-type li:nth-child(11):before { content: "\e60a"; }
.slts-type li:nth-child(12):before { content: "\e60b"; }
.slts-type li:nth-child(13):before { content: "\e60c"; }
.slts-type li:nth-child(14):before { content: "\e60d"; }
.slts-type li:nth-child(15):before { content: "\e60e"; }
.slts-type li:nth-child(16):before { content: "\e60f"; }
.slts-type li:nth-child(17):before { content: "\e612"; }
.slts-type li:nth-child(18):before { content: "\e613"; }
.slts-type li:nth-child(1):before ,.slts-type li:nth-child(2):before, .slts-type li:nth-child(3):before, .slts-type li:nth-child(4):before, .slts-type li:nth-child(5):before, .slts-type li:nth-child(6):before, .slts-type li:nth-child(7):before, .slts-type li:nth-child(8):before, .slts-type li:nth-child(9):before, .slts-type li:nth-child(10):before, .slts-type li:nth-child(11):before, .slts-type li:nth-child(12):before, .slts-type li:nth-child(13):before, .slts-type li:nth-child(14):before, .slts-type li:nth-child(15):before, .slts-type li:nth-child(16):before, .slts-type li:nth-child(17):before, .slts-type li:nth-child(18):before { margin-right: 8px; font-size: 18px; vertical-align: middle; }

.slts-layout { float: left;  padding: 60px 0 0 20px; width: 790px; }
.slts-layout li {  text-align: center; margin:0 15px 25px; float: left; position: relative;}

/*.slts-layout li:nth-child(5n) { margin-right: 0; }*/

.slts-layout li label { width: 125px; height: 99px; display: block;   margin-bottom: 4px; }

.slts-layout li select{ position: absolute; right: 3px; top: 3px; font-size: 12px; outline: none; text-align: left; }
.sel_color_list { border: 1px solid #339999; background-color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center;}

.slts-layout li a { background: #a2a2a2; color: #fff; text-decoration: none; font-size: 12px; padding: 2px 3px 1px 6px; border-radius: 2px; letter-spacing: 3px; font-family: "Verdana"; display: inline-block; margin: 0 3px; vertical-align: middle; }
.slts-layout li a:hover { background: #91c1c5; }

.slts-layout .thumbpage li a.view-cpt, .slts-layout .thumbpage li a.qrcodebtn, .slts-layout .thumbpage li a.view-pay-cpt { padding: 0; width: 23px; height: 21px; float: right; margin: 0 1px; -webkit-transition: width .3s; -moz-transition: width .3s; transition: width .3s; overflow: hidden; }

.slts-layout .thumbpage li a.view-cpt ,.slts-layout .thumbpage li a.view-pay-cpt { background: url(images/view_computer.png) #ccc center no-repeat; }

.slts-layout .thumbpage li a.view-cpt:hover, .slts-layout .thumbpage li a.qrcodebtn:hover, .slts-layout .thumbpage li a.view-pay-cpt:hover { width: 55px; background-image: none; background-color: #91c1c5; }

.slts-layout .thumbpage li a.view-cpt:before { -moz-transition: opacity .6s; -webkit-transition: opacity .6s; transition: opacity .6s; opacity:0; content: "電腦預覽"; letter-spacing: 0; line-height: 22px; }

.slts-layout .thumbpage li a.qrcodebtn { background: url(images/view_mobile.png) #ccc center no-repeat; }

.slts-layout .thumbpage li a.qrcodebtn:before { -moz-transition: opacity .6s; -webkit-transition: opacity .6s; transition: opacity .6s; opacity:0; content: "手機預覽"; letter-spacing: 0; line-height: 22px; }

.slts-layout .thumbpage li a.view-pay-form{width: 50px;height:18px;}
.slts-layout .thumbpage li a.view-pay-form:before { content: "專人諮詢"; letter-spacing: 0; line-height: 18px; }

.slts-layout .thumbpage li a.view-pay-cpt:before { -moz-transition: opacity .6s; -webkit-transition: opacity .6s; transition: opacity .6s; opacity:0; content: "版型預覽"; letter-spacing: 0; line-height: 22px; }

.slts-layout .thumbpage li a.view-cpt:hover:before, .slts-layout .thumbpage li a.qrcodebtn:hover:before, .slts-layout .thumbpage li a.view-pay-cpt:hover:before { -moz-transition: opacity 1s; -webkit-transition: opacity 1s; transition: opacity 1s; opacity:1; }

.slts-layout .thumbpage li a.thumb-rwd { float: left; margin-right: 0; }

.pagination {background: #fff; cursor: default; text-align: center; font-family: "Verdana"; font-size: 12px; /*clear: both;*/ padding: 5px 0 30px 0; }
.pagination a, .pagination span, .pagination strong { padding: 4px 7px; display:inline-block; margin: 2px; vertical-align: middle; border-radius: 2px; font-weight: normal; }
.pagination .disabled { color: #999; background: #ddd; }
.pagination .disabled:hover { color: #999; cursor: default; } 
.pagination .current { font-style: normal; background: #d0e7e7; color: #4b858c; }
.pagination a { text-decoration: none; color: #fff; background: #69aaab; cursor: pointer; }
.pagination a:hover, .pagination a:focus { color: #3d6e74; }
.pagination .previous, .pagination .next { padding: 3px 7px 5px; font-size: 15px; }  
.select_item{border-radius: 15px 15px 15px 15px;-moz-border-radius: 15px 15px 15px 15px;-webkit-border-radius: 15px 15px 15px 15px;border: 2px solid #ff9999;}
@media (max-width: 800px) {
        .slts-type{width:25%}
        .slts-layout{width:75% !important;height:auto !important;}
        .slts-vsn{padding-left:0px;}
        .slts-vsn li{padding:0 10px}
        .slts-vsn li.cus{padding:0 10px}
        .st-content > .head button:before{content:"\e60c"}
        .menu .swift a:first-child:before{content:"\e603"}
        .menu .swift a:nth-child(2):before{content:"\e608"}
        .menu .swift a:nth-child(3):before{content:"\e60e"}
        .slts-type li{line-height:35px;height:35px;}
        .slts-layout .thumbpage li a.view-cpt, .slts-layout .thumbpage li a.qrcodebtn{width:50px;height:35px;margin:0 5px;}
        .slts-layout li a{width: 55px;height: 40px;font-size: 20px;}
        .pagination{font-size: 20px;}
}