@charset "utf-8";








/* CSS Document */

body {
    background: #000;
    margin: 0;
    padding: 0;
    font-family: Microsoft JhengHei, Gotham, Arial, sans-serif, "微軟正黑體";
    color: #fff;
}

header {
    position: relative;
    width: 100%;
    height: 80px;
    z-index: 999;
}


a {
    color: #fff;
}






/* menuBar */

.logo-htc {
    width: 80px;
    height: 28px;
    margin: 26px 20px 0 30px;
    background: url(../images/logo-htc.png) 0 0 no-repeat;
    float: left;
}


.nav {
    width: 110px;
    height: 50px;
    margin: 30px 0 0px 10px;
    text-align: top;
    color: #FFF;
    font-size: 18px;
    float: left;
    text-decoration: none;
    letter-spacing: 1px;
    position: relative;
    transition: 0.4s;
}

.nav:hover .nav-bar {
    width: 100px;
}

.nav-bar {
    width: 0;
    height: 4px;
    position: absolute;
    bottom: 0;
    transition: 0.2s ease-out;
    background: #65cbff;
    /* Old browsers */
    background: -moz-linear-gradient(left, #65cbff 0%, #8579fd 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #65cbff 0%, #8579fd 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #65cbff 0%, #8579fd 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65cbff', endColorstr='#8579fd', GradientType=1);
    /* IE6-9 */
}


.nav:hover .top-arrow {
    margin: -5px 0 0 10px;
}

.top-arrow {
    width: 16px;
    height: 20px;
    background: url(../images/top-arrow.png) 0 0 no-repeat;
    margin: -5px 0 0 5px;
    display: inline-block;
    vertical-align: middle;
    transition: 0.2s ease-out;
}

.fb-share {
    width: 140px;
    height: 40px;
    margin: 20px 0 0 10px;
    background: url(../images/btn-fb-share.png) 0 0 no-repeat;
    float: left;
    transition: 0.3s;
}

.fb-share:hover {
    background: url(../images/btn-fb-share-hover.png) 0 0 no-repeat;
}


.logo-01 {
    width: 136px;
    height: 30px;
    margin: 25px 30px 0 0;
    background: url(../images/logo-01.png) 0 0 no-repeat;
    float: right;
}

.clear_both {
    clear: both;
}










/* kv */

.kv-area {
    width: 100%;
    height: 645px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}



.kv1 {
    width: 100%;
    height: 645px;
    background: url(../images/kv-bg1.jpg) top center no-repeat;
    position: absolute;
    left: 0;
    transition: 0.5s ease-out;
}



.kv2 {
    width: 100%;
    height: 645px;
    background: url(../images/kv-bg2.jpg) top center no-repeat;
    position: absolute;
    left: 100%;
    transition: 0.5s ease-out;
}


.kv-content {
    width: 1050px;
    height: 645px;
    margin: 0 auto;
    position: relative;
}

.kv-title {
    width: 496px;
    height: 173px;
    position: absolute;
    left: 75px;
    top: 135px;
    background: url(../images/kv-title.png) center no-repeat;
}


.phone1 {
    width: 385px;
    height: 615px;
    position: absolute;
    right: 0px;
    top: 30px;
    background: url(../images/kv-phone1.png) center no-repeat;
    transition: top 0.4s ease-out 0.3s;
}

.phone2 {
    width: 385px;
    height: 615px;
    position: absolute;
    right: 0px;
    top: 80px;
    background: url(../images/kv-phone2.png) center no-repeat;
    transition: 0.4s ease-out 0.3s;
}

.kv1.active .phone1{
    top: 80px;
}


.kv2.active .phone2{
    top: 30px;
}


/* kv-btn */


/*.btn-area {
    width: 1280px;
    height: 570px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    margin-left: -640px;
    z-index: 999;
}*/

.slide-arrow {
    width: 60px;
    height: 60px;
    position: absolute;
    cursor: pointer;
    top: 247px;
    left: 50%;
    margin-left: -610px;
    z-index: 99;
    opacity: 0.6;
}

.slide-arrow.right {
    left: 50%;
    margin-left: 550px;
}


.slide-arrow.active {
    opacity: 1;
}

.slide_circle {
    width: 62px;
    height: 30px;
    position: absolute;
    bottom: 80px;
    left: 50%;
    margin-left: -31px;
    z-index: 3;
    font-size: 0;
    text-align: center;
}

.circle {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #FFF;
    display: inline-block;
    margin: 0 8px;
    transition: 0.2s;
    box-shadow: inset 3px 3px 3px rgba(20%, 20%, 40%, 0.5);
    cursor: pointer;
}

.circle.active {
    background-color: #64cbff;
}

.action-btns {
    width: 660px;
    height: 55px;
    position: absolute;
    left: 50%;
    margin-left: -540px;
    bottom: 135px;
    font-size: 0;
    z-index: 99;
}

.btn {
    width: 220px;
    height: 55px;
    display: inline-block;
    transition: 0.3s;
    cursor: pointer;
}

.btn.editor {
    background: url(../images/btn-editor.png) center no-repeat;
}


.btn.netizen {
    background: url(../images/btn-netizen.png) center no-repeat;
}

.btn.features {
    background: url(../images/btn-features.png) center no-repeat;
}


.btn.editor:hover {
    background: url(../images/btn-editor-hover.png) center no-repeat;
}

.btn.netizen:hover {
    background: url(../images/btn-netizen-hover.png) center no-repeat;
}

.btn.features:hover {
    background: url(../images/btn-features-hover.png) center no-repeat;
}










/* 文章區 */

.container {
    width: 1050px;
    height: auto;
    margin: 0 auto;
    position: relative;
}

.article-area {
    width: 1040px;
    height: auto;
    margin: 5px;
    position: relative;
}









/* 大標 */

.main-title {
    width: 1050px;
    height: 145px;
    margin-top: 30px;
    margin-bottom: 20px;
    position: relative;
}

.main-title-bar {
    width: 220px;
    height: 3px;
    position: absolute;
    left: 415px;
    top: 128px;
    background: #65cbff;
    /* Old browsers */
    background: -moz-linear-gradient(left, #65cbff 0%, #8579fd 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #65cbff 0%, #8579fd 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #65cbff 0%, #8579fd 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#65cbff', endColorstr='#8579fd', GradientType=1);
    /* IE6-9 */
}

.main-title-bar.long {
    width: 275px;
}

.main-title.editor {
    margin-top: -40px;
    background: url(../images/title-editor.png) center no-repeat;
}

.main-title.netizen {
    background: url(../images/title-netizen.png) center no-repeat;
}

.main-title.features {
    background: url(../images/title-features.png) center no-repeat;
}










/* 角線 */

.corner-left {
    width: 60px;
    height: 60px;
    background: url(../images/corner-1.png) top center no-repeat;
    position: absolute;
    top: -10px;
    left: -10px;
}

.corner-left.bottom {
    transform: scaleY(-1);
    top: inherit;
    bottom: -10px;
    left: -10px;
}

.corner-right {
    width: 60px;
    height: 60px;
    background: url(../images/corner-2.png) top center no-repeat;
    position: absolute;
    top: -10px;
    right: -10px;
}

.corner-right.bottom {
    transform: scaleY(-1);
    top: inherit;
    bottom: -10px;
    right: -10px;
}

.netizen-articles .bottom {
    bottom: -5px;
}









/* 編輯文章 */

.editor-article.wide {
    width: 1040px;
    height: 450px;
    margin-bottom: 4px;
    background: url(../images/editor-a1.jpg) center no-repeat;
}


.editor-article {
    width: 518px;
    height: 350px;
    float: left;
    margin-right: 4px;
    background: url(../images/editor-a2.jpg) center no-repeat;
}

.editor-article.right {
    margin-right: 0;
    background: url(../images/editor-a3.jpg) center no-repeat;
}

.content-box {
    width: 518px;
    height: 350px;
    background: url(../images/gradation-2.png) center no-repeat;
    position: relative;
    opacity: 0;
    transition: 0.3s;
}

.content-box.wide {
    width: 1040px;
    height: 450px;
    background: url(../images/gradation-1.png) center no-repeat;
}

.content-box:hover {
    opacity: 1;
}


.editor-pic {
    width: 400px;
    height: 140px;
    top: 25%;
    left: 50%;
    margin-left: -200px;
    background: url(../images/editor-pic1.png) top center no-repeat;
    position: absolute;
}

.editor-id {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    padding-top: 95px;
    display: block;
}

.white-bar {
    width: 0px;
    height: 3px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 150px;
    transition: 0.5s;
}


.content-box:hover .white-bar {
    width: 100px;
}

.editor-title {
    width: 400px;
    height: 50px;
    position: absolute;
    top: 60%;
    left: 50%;
    margin-left: -200px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.editor-title.wide {
    width: 420px;
    margin-left: -205px;
}



.editor-icon {
    width: 400px;
    height: 115px;
    top: 20%;
    left: 50%;
    margin-left: -200px;
    background: url(../images/editor-pic2.png) top center no-repeat;
    position: absolute;
}






/* 網友文章 */

.netizen-article {
    width: 344px;
    height: 344px;
    float: left;
    margin-bottom: 4px;
    margin-right: 4px;
}

.netizen-article.right {
    margin-right: 0;
}

.netizen-article.a1 {
    background: url(../images/netizen-a1.jpg) center no-repeat;
}

.netizen-article.a2 {
    background: url(../images/netizen-a2.jpg) center no-repeat;
}

.netizen-article.right.a3 {
    background: url(../images/netizen-a3.jpg) center no-repeat;
}

.netizen-article.a4 {
    background: url(../images/netizen-a4.jpg) center no-repeat;
}

.netizen-article.a5 {
    background: url(../images/netizen-a5.jpg) center no-repeat;
}

.netizen-article.right.a6 {
    background: url(../images/netizen-a6.jpg) center no-repeat;
}



.content-box.small {
    width: 344px;
    height: 344px;
    background: url(../images/gradation-3.png) center no-repeat;
}



.netizen-icon {
    width: 25px;
    height: 30px;
    background: url(../images/netizen-icon.png) center no-repeat;
    display: inline-block;
}

.netizen-id {
    width: 250px;
    height: 60px;
    top: 28%;
    left: 50%;
    margin-left: -125px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
    position: absolute;
}


.white-bar.pos {
    left: 75px;
}


.netizen-title {
    width: 250px;
    height: 80px;
    position: absolute;
    top: 52%;
    left: 50%;
    margin-left: -120px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.5px;
}





/* 特色 */

.features-area {
    width: 1040px;
    height: 710px;
    margin-bottom: 60px;
    background: url(../images/features-bg.jpg) center no-repeat;
    position: relative;
}

.features-phone {
    width: 515px;
    height: 555px;
    background: url(../images/features-phone.png) center no-repeat;
    position: absolute;
    top: 120px;
    left: 272px;
}

.features-column {
    width: 290px;
    height: 710px;
    left: 15px;
    position: absolute;
}

.features-column.right {
    left: 735px;
}


.features-box {
    width: 290px;
    height: 150px;
    margin-top: 20px;
    cursor: crosshair;
    transition: background 0.2s;
}


.features-box.l1 {
    background: url(../images/features-1.png) center no-repeat;
}

.features-box.l1:hover {
    background: url(../images/features-1-hover.png) center no-repeat;
}


.features-box.l2 {
    background: url(../images/features-2.png) center no-repeat;
}

.features-box.l2:hover {
    background: url(../images/features-2-hover.png) center no-repeat;
}


.features-box.l3 {
    background: url(../images/features-3.png) center no-repeat;
}

.features-box.l3:hover {
    background: url(../images/features-3-hover.png) center no-repeat;
}

.features-box.l4 {
    background: url(../images/features-4.png) center no-repeat;
}

.features-box.l4:hover {
    background: url(../images/features-4-hover.png) center no-repeat;
}

.features-box.r1 {
    background: url(../images/features-5.png) center no-repeat;
}

.features-box.r1:hover {
    background: url(../images/features-5-hover.png) center no-repeat;
}


.features-box.r2 {
    background: url(../images/features-6.png) center no-repeat;
}

.features-box.r2:hover {
    background: url(../images/features-6-hover.png) center no-repeat;
}


.features-box.r3 {
    background: url(../images/features-7.png) center no-repeat;
}

.features-box.r3:hover {
    background: url(../images/features-7-hover.png) center no-repeat;
}


.features-box.r4 {
    background: url(../images/features-8.png) center no-repeat;
}

.features-box.r4:hover {
    background: url(../images/features-8-hover.png) center no-repeat;
}


#gotop {
    width: 80px;
    height: 80px;
    position: fixed;
    bottom: 50px;
    left: 50%;
    margin-left: 550px;
    background: url(../images/go-top.png) no-repeat 0 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    transition: 0.5s;
}

#gotop.show {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
}