@charset "utf-8";
body,
.submit,
select,
input {
    margin: 0px;
    padding: 0px;
    font-family: 微軟正黑體;
}

div,

/* CSS Document */

dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
p,
blockquote {
    margin: 0;
    padding: 0;
}


/*table{border-collapse:collapse;border-spacing:0;}*/

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

q:before,
q:after {
    content: '';
}

a {
    text-decoration: none
}

body {
    margin: 0px;
    padding: 0px;
    background-color: #83ccff;
}


/*transition*/

*:link,
*:visited,
*:hover,
*:active,
*:focus,
* {
    -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    transition: color .20s linear, background-color .20s linear, border-color .20s linear;
}

/*.navbar-default*/

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a:active {
    background: none;
}

/*base*/

#append-btn,
#append-list {
    display: none !important;
}

.container {
    max-width: none;
}

.mobile {
    display: none;
}

a:hover {
    text-decoration: none;
}


/*top*/

.scroll2top:link,
.scroll2top:visited {
    background: url(images/top.png) no-repeat 0 0;
    height: 75px;
    width: 90px;
    margin-left: 915px;
    bottom: 0px;
}

.scroll2top:hover {
    background: url(images/top.png) no-repeat 0 -80px;
}


/*head*/

.head {
    margin: 0 auto;
    text-align: center;
}

.head img {
    margin: 0 auto;
    max-width: 100%;
}


/*nav*/

nav {
    clear: both;
    text-align: center;
    padding: 10px 0;
    background: #000000;
    margin: 10px 50px 0;
    position: relative;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background: -webkit-linear-gradient(top, #33308f, #10005f);
    background: -moz-linear-gradient(top, #33308f, #10005f);
    background: linear-gradient(top, #33308f, #10005f);
}

nav img {
    width: auto;
}

a.mainnav {}

a.subnav {
    position: absolute;
    right: 20px;
    top: 0px;
    display: block;
    background: #23006b;
    color: #ffea00;
    padding: 14px 15px 9px;
    font-size: 18px;
    font-weight: bold;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-bottom-topleft: 15px;
    -moz-border-bottomtopright: 15px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

a.subnav:hover {
    background: #652ce6;
}


/*content*/

.content {
    background: url(images/content_bg.jpg);
    display: block;
    max-width: 950px;
    margin: 0 auto;
    padding-bottom: 10px;
    overflow: auto;
}


/*sence*/

.sence {
    margin: 0 30px;
    overflow: auto;
    background: #6371ff;
    color: #272727;
    clear: both;
}

.sence .pro {
    background: #f1f1f1;
    overflow: auto;
    margin: 10px;
    padding: 15px;
}

.sence .pro:hover {
    background: #ffffff;
}

.pro .dep,
.pro .dep2 {
    font-size: 1.2em;
    padding-left: 15px;
}

.pro .dep2 {
    padding: 0 15px;
}

.pro h2 {
    color: #00176b;
    padding: 5px 0;
    border-bottom: 2px dotted #DBDBDB;
    margin-top: 15px;
}

.pro h3 {
    padding: 15px 0 5px;
    clear: both;
    ;
}

.pro p {
    color: #383838;
    padding: 5px 0;
    height: 120px;
}

.pro p b {
    color: #FF0000;
    font-size: 1.4em;
}


/*way*/


/*搶購辦法*/

.pro .way {
    float: left;
    border: 3px solid #10005f;
    background: #eaeaea;
    height: 125px;
    width: 23%;
    margin: 1%;
    position: relative;
    text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

li.way:after {
    font-family: FontAwesome;
    content: "\f0da";
    font-size: 2em;
    position: absolute;
    top: 38px;
    right: -18px;
    color: #10005f;
}

li.way:last-child:after {
    content: '';
}

p.waytext {
    color: #ff514d;
    font-weight: bold;
    margin-top: 12px;
    height: auto;
}

p.waytext2 {
    margin-top: 8px;
}

i.step {
    color: #fff993;
    background: url(images/step_0.png) no-repeat center center;
    height: 33px;
    display: block;
}

.pro ol {
    list-style-type: decimal;
    list-style-position: outside;
    line-height: 1.7em;
    margin-left: 24px;
}


/*picture for background size*/

.picture div {
    background-size: cover;
    background-position: 50% 50%;
    height: 300px;
    padding: 0px;
    border: 2px solid #ff9000;
}

.col-md-7,
.col-md-5,
.col-xs-12 {
    padding: 0px;
}


/*button*/

.btn {
    text-align: center;
    background: #f65753;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn a {
    color: #FFFFFF;
    font-size: 1.8em;
    padding: 10px;
    font-weight: bold;
    display: block;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.btn a:hover {
    background: #ff100a;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -o-transition: background-color .20s linear;
    -webkit-transition: background-colord .20s linear;
    -moz-transition: background-color .20s linear;
    transition: background-color .20s linear;
}


/*預告畫面*/

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    background: #d5d5d5;
}

a.soon:hover {
    cursor: default;
    background: none;
}

.soonp {
    background: url(images/soon.png) no-repeat rgba(0%, 0%, 0%, 0.4);
    background-size: contain;
    background-position: 50% 50%;
    z-index: 50;
    position: absolute;
    width: 100%;
    top: 0;
}


/* fixed bottom bar */

.container.navbar-fixed-bottom {
    z-index: 600 !important;
}

.btn-top {
    float: right;
    vertical-align: middle;
}

.btn-top:link,
.btn-top:visited {
    margin: 3px 0 0 8px;
    width: 60px;
    height: 35px;
    text-align: center;
    font-weight: bold;
    color: #5d5d5d;
    /*border-radius: 2px;*/
    background: #F3F3F3;
    box-shadow: 0px 0px 12px rgba(20%, 20%, 40%, 0.8);
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.btn-top b {
    display: block;
    width: 20px;
    height: 12px;
    background: url(images/btn_top_arr.png) no-repeat center;
    margin: 8px auto 0;
}


/*===c26模組專用===*/

.sence h4 {
    clear: both;
    padding: 10px 0 0px 48px;
    font-weight: bolder;
    font-size: 1.6em;
    color: #ffea00;
    background: url(images/h4_go_icon.png) 15px 12px no-repeat;
}


/* GROUP */

.group {}

.group h3 {
    display: block;
}

.group-tab {
    display: none;
}

.group-tab blockquote {
    border-bottom: 2px solid #beddec;
    display: block;
    position: relative;
    height: 30px;
}

.group-tab ul {
    position: absolute;
    right: 30px;
    font-size: 0;
}

.group-tab ul li {
    list-style-type: none;
    display: inline-block;
    background: #fff;
    padding-top: 3px;
    border: 1px solid #93c4e0;
    border-width: 1px 1px 2px 0;
    border-bottom-color: #beddec;
    position: relative;
}

.group-tab ul li a:link,
.group-tab ul li a:visited {
    display: block;
    color: #497690;
    padding: 3px 13px;
    font-size: 12px;
    font-weight: bold;
    background: #ffffff;
    background: -webkit-linear-gradient(top, #e8e8e8 0%, #f1f1f1 100%);
    background: linear-gradient(to bottom, #e8e8e8 0%, #f1f1f1 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#f1f1f1', GradientType=0);
}

.group-tab ul li a:hover {
    text-decoration: none;
}

.group-tab ul li.current {
    background: #46ace9;
    border-width: 1px 1px 0 0;
}

.group-tab ul li.current a:link,
.group-tab ul li.current a:visited {
    font-size: 15px;
    padding: 5px 15px;
    background: #e9e9e9;
    background: -webkit-linear-gradient(top, #fdfdfd 0%, #ededed 100%);
    background: linear-gradient(to bottom, #fdfdfd 0%, #ededed 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#ededed', GradientType=0);
}

.group-tab ul li.current a:before {
    content: ".";
    font-size: 0;
    display: block;
    position: absolute;
    bottom: 2px;
    left: -6px;
    width: 5px;
    height: 30px;
    background: url(img/group_tab_shade.png) no-repeat right bottom;
}

.group-tab ul li:first-child {
    border-left-width: 1px;
}

.group-cont {}


/* GROUP-TYPE-PH */

.group-type-ph {
    padding-top: 10px;
    clear: both;
}

.ph {
    float: left;
    max-width: 285px;
    width: 33%;
    height: 402px;
    margin: 0 0 10px 9px;
    padding: 0 0 10px 0;
    border: 1px solid transparent;
    border-color: #ffffff;
    background: #ffffff;
    0 0 25px 11px;
}

.ph.aside-one {
    margin-left: 0;
}


/* .ph:nth-of-type(3n) + .ph, .ph:first-child{margin-left:0;} */

.ph:hover {
    cursor: pointer;
    background-color: #fffbcf;
}

.ph-img {
    position: relative;
    z-index: 3 !important;
    width: 100%;
    max-width: 285px;
    background: #fff;
    height: 200px;
    background: none;
    border: 0;
    display: none;
}

.ph-img img {
    width: 100%;
    max-width: 285px;
    height: auto;
    position: absolute;
    z-index: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    border: 0;
}


/*.ph.masked .ph-img img{opacity:.6; filter:alpha(opacity=60);}*/

.ph a:link,
.ph a:visited {
    position: relative;
    display: block;
    text-decoration: none;
}

.ph-title {
    /*-----org-title-style------*/
    /*color: #272727;
    font-size: 16px;
    font-family: "微軟正黑體";
    letter-spacing: 1px;
    line-height: 22px;
    display: block;
    padding-left: 0px;
    padding: 5px;
    height: 75px;*/
}

.ph-title img{
    width: 100%;
    max-width: 285px;
}


.zh-cn .ph-title {
    text-align: center;
}

.ph-detail {
    /*-----org-detail-style------*/
    /*display: block;
    padding: 5px;
    font-size: 15px;
    color: #FF1372;
    overflow: hidden;
    margin-bottom: 2px;
    height: 75px;*/

    /*-----copy-.ph-title-style------*/
    color: #272727;
    font-size: 16px;
    font-family: "微軟正黑體";
    letter-spacing: 1px;
    line-height: 22px;
    display: block;
    padding-left: 0px;
    padding: 5px;
    height: 75px;
}

.ph-feature {
    /*display: none;*/
    /*display:block; font-size:15px; color:#eb8a29; overflow:hidden; height:17px;
    width: 100%;*/

    /*-----copy-.ph-detail-style------*/
    display: block;
    padding: 5px;
    font-size: 15px;
    color: #FF1372;
    overflow: hidden;
    margin-bottom: 2px;
    height: 75px;
}



.price {
    color: #e71000;
    font-family: "微軟正黑體";
    font-size: 15px;
    /*float: right;*/
    padding: 10px;
    bottom: -50px;
    right: 0px;
    position: absolute;
}

.price span {
    font-size: 20px;
    font-weight: bold;
}

.price i {
    font-style: normal;
    position: relative;
    left: -2px;
    top: -1px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {}

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

@media screen and (min-width: 992px)and (max-width: 1199px) {
    .ph {
        width: 280px;
    }
}

@media screen and (min-width: 768px)and (max-width: 991px) {
    .scroll2top:link,
    .scroll2top:visited {
        margin-left: 805px;
    }
    .sence .pro {
        padding: 15px 10px;
    }
    .pro .dep {
        padding-left: 0;
    }
    .pro p {
        height: auto;
    }
    .btn {
        width: 50%;
        margin: 0 auto;
    }
    li.way:after {
        position: absolute;
        top: 38px;
        right: -13px;
    }
    li.way:last-child:after {
        content: '';
    }
    .picture div {
        height: 450px;
    }
    .ph {
        width: 98%;
        max-width: 100%;
        margin: 0 0 10px 7px;
        height: 195px;
    }
    .ph-title {/*for-image*/
        height: auto;
        float: left;
        max-width: 348px;
        width: 46%;
    }
    .ph-detail {/*for-title*/
        height: 75px;
        float: right;
        width: 54%;
    }
    .ph-img {
        height: 0;
    }
    .price {
        clear: both;
        top: 144px;
    }
}

@media screen and (max-width: 767px) {
    .pro .dep {
        padding-left: 0;
    }
    .pro p {
        height: auto;
    }
    .btn {
        width: 50%;
        margin: 0 auto;
    }
    a.subnav {
        display: none;
    }
    .pro .way {
        width: 95%;
    }
    li.way:after {
        font-family: FontAwesome;
        content: "\f0d7";
        position: absolute;
        margin-right: 51%;
        top: 104px;
    }
    li.way:last-child:after {
        content: '';
    }
    p.waytext {
        margin-top: 20px;
    }
    p.waytext2 {
        margin-top: 10px;
    }
    .ph {
        width: 98%;
        max-width: 100%;
        margin: 0 0 10px 4px;
        height: auto;
    }
    .ph-img {
        margin: 0 auto;
    }

    .ph-title,
    .ph-feature,
    .ph-detail{
        height: auto;
    }
    .price {
        clear: both;
        float: right;
        position: static;
    }
}

@media screen and (max-width: 480px) {
    .sence {
        margin: 0;
        margin-bottom: 10px;
    }
    nav {
        margin: 0;
        padding: 10px;
        -webkit-border-radius: 0;
        -moz-border-rtopleft: 0;
        border-top-radius: 0;
    }
    nav img {
        max-width: 280px;
        width: auto;
    }
    .pro .dep {
        padding-left: 0;
    }
    .pro p {
        height: auto;
    }
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }
    .btn {
        width: auto;
    }
    .ph {
        width: 100%;
        max-width: 100%;
        margin: 0 0 10px 0px;
        height: auto;
    }
    .ph-img:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .ph-img img {
        position: inherit;
    }
    .ph-img,
    .ph-title,
    .ph-detail,   
    .ph-feature {
        height: auto;
    }
    .ph-img {
        margin: 0 auto;
    }
}