@import url(products.css);

@import url(album.css);

@import url(links.css);



.banner {

    margin-bottom: 32px;

    position: relative;

}

.banner .slick-prev,

.banner .slick-next {

    text-align: left;

    white-space: normal;

    text-indent: -99999px;

    overflow: hidden;

    border: 0;

    background: #fff url(../images/index/banner_arrow.png) no-repeat;

    width: 52px;

    height: 52px;

    position: absolute;

    left: 50%;

    bottom: -32px;

    z-index: 20;

    border: 1px solid #000;;

    -webkit-border-radius: 30px;

            border-radius: 30px;

}

.banner .slick-prev:hover,

.banner .slick-next:hover {

    background-color: #000;

}

.banner .slick-prev { background-position:    0 0; margin-left: -52px; }

.banner .slick-next { background-position: 100% 0; }

.banner .slick-prev:hover { background-position:    0 100%; }

.banner .slick-next:hover { background-position: 100% 100%; }

.banner:after{

    content: '';

    display: block;

    width: 100%;

    height: 110px;

    background: url(../images/index/banner_cover.png)center bottom no-repeat;

    position: absolute;

    bottom:0;

}

.banner .slick-dots {

    text-align: center;

    width: 100%;

    padding: 15px 0;

    position: absolute;

    bottom: 30px;

    z-index:3;

}

.banner .slick-dots li {

    display: inline-block;

}

.banner .slick-dots li button {

    text-indent: -9999px;

    text-align: left;

    width: 10px;

    height: 10px;

    background: #6AA5C2;

    border: 0;

    -webkit-border-radius: 5px;

       -moz-border-radius: 5px;

            border-radius: 5px;

    margin: 0 5px;

}

.banner .slick-dots li button:focus {

    outline: none;

    background: #E28314;

}

/*.site-main section {

    background:  no-repeat 50% 0;

    background-size: cover;

    padding: 60px 0 90px;

}*/

.site-main .product-sect {

    background-image: url(../images/index/product_bg.jpg);

    background-repeat: repeat;

}

.site-main .album-sect {

    background-image: url(../images/index/album_bg.jpg);

}

.sect-title {

    color: #705F5F;

    font-family: 'Oxygen', "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;

    font-size: 33px;

    font-weight: bold;

    letter-spacing: 1px;

}

.btn.more {

    font-family: 'Expletus Sans';

    font-size: 18px;

    color: #203E81;

    line-height: 30px;

    border: 2px solid #1F3E80;

    text-align: center;

    -webkit-border-radius: 10px;

       -moz-border-radius: 10px;

            border-radius: 10px;

    padding: 7px 37px;

    margin: 0 auto;

    display: block;

    max-width: 153px;

}

.btn.more:hover {

    background: #1F3E80;

    color: #FFF;

}

.btn.more:after {

    content: "";

    background: url(../images/index/more_arrow.png) no-repeat;

    width: 13px;

    height: 13px;

    display: inline-block;

    vertical-align: middle;

    margin: -2px 8px 0 20px;

}

.btn.more:hover:after {

    background-position: 0 100%;

}

.sect1 .col {

    float: left;

    width: 50%;

}

.about-sect{

    background: url(../images/index/about_bg.jpg)bottom no-repeat;

    padding-bottom: 90px;

}

.about-sect .sect-title,

.news-sect .sect-title{

    font-family: 'Merriweather Sans';

    font-size: 42px;

    color: #1F3E7F;

    text-align: center;

    margin-bottom: 95px;

}

.about-sect .sect-title span,

.news-sect .sect-title span{

    color: #E08313;

}

.about-sect .pic{

    margin-top: -100px;

}

.row.grid3 .col{

    width: 33.33%;

}

.row.grid3 .col:first-child{

    padding-right: 50px;

}

.row.grid3 .col:last-child{

    padding-left: 50px;

}



.service-sect{

    background: url(../images/index/service_bg.jpg)center -320px no-repeat;

    padding: 30px 0 100px;

}

.service-sect .sect-title{

    font-size: 42px;

    font-weight: bold;

    color: #D3DFF1;

    text-align: center;

    padding-bottom: 40px;

    text-shadow:2px 2px 2px rgba(20%,20%,40%,0.8);

}

.service-list .pic {

    max-width: 300px;

    -webkit-border-top-right-radius: 30px;

    -webkit-border-bottom-left-radius: 30px;

    -moz-border-radius-topright: 30px;

    -moz-border-radius-bottomleft: 30px;

    border-top-right-radius: 30px;

    border-bottom-left-radius: 30px;

    overflow: hidden;

    position: relative;

    margin: 0 auto;

}

.service-list .txt {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    max-width: 300px;

    margin: 0 auto;

    padding: 0 20px;

    color: #F2F2F2;

}

.service-list .title{

    color: #C0E7FE;

    font-size: 18px;

    font-weight: bold;

    padding: 10px 0;

    display: block;

}

.service-list{

    border-top: none;

    padding-bottom: 100px;

}

.service-list .description{

    color: #F2F2F2;

}

/*

.service-list{

    margin-bottom: 50px;

}

.service-list:after{

    content: '';

    display: block;

    clear: both;

}

.service-list .item{

    width: 25%;

    float: left;

}

.service-list .pic {

    max-width: 300px;

    -webkit-border-top-right-radius: 30px;

    -webkit-border-bottom-left-radius: 30px;

    -moz-border-radius-topright: 30px;

    -moz-border-radius-bottomleft: 30px;

    border-top-right-radius: 30px;

    border-bottom-left-radius: 30px;

    overflow: hidden;

    position: relative;

    margin: 0 auto;

}

.service-list li a:hover .pic:after{

    content: '';

    display: block;

    width: 100%;

    height: 100%;

    background: url(../images/index/service_hover.png) center no-repeat,rgba(10,18,33,0.7);

    position: absolute;

    left: 0;

    top: 0;

}

.service-list .txt {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    max-width: 300px;

    margin: 0 auto;

    padding: 0 20px;

}

.service-list .title{

    color: #C0E7FE;

    font-size: 18px;

    font-weight: bold;

    padding: 10px 0;

    display: block;

}

.service-list .description{

    font-size: 15px;

    color: #F2F2F2;

    font-family: 'arial';

    font-weight: normal;

}

*/

.service-sect .btn.more {

    color: #FFF;

    border: 2px solid #81D3E2;

    background: rgba(233,233,233,0.3);

}

.service-sect .btn.more:hover {

    background: #81D3E2;

    color: #FFF;

}

.service-sect .btn.more:after {

    background: url(../images/index/more_arrow.png)left -23px no-repeat;

}





.news-sect {

    position: relative;

    background: url(../images/index/news_bg.jpg)center top no-repeat;

    padding: 50px 0 70px;

}

.news-sect .sect-title{

    margin-bottom:50px;

}

.news-list .item {

    width: 25%;

    float: left;

    margin-bottom: 50px;

    padding: 0 15px;

    -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

        box-sizing: border-box;

}
.news-list .more2{
	position:static;
	margin-top:0;
}


.sect4{

    background: url(../images/index/down_bg.jpg)center no-repeat;

    padding: 90px 0 220px;

}

.sect4:after{

    content: '';

    display: block;

    clear: both;

}

.sect4 .row .col{

    width: 50%;

    float: left;

}

.sect4 .row:after{

    content: '';

    display: block;

    clear: both;    

}

.download-sect .sect-title{

    font-size: 42px;

    color: #D4DFF1;

    text-align: center;

}

.download-list:after{

    content: '';

    display: block;

    clear: both;    

}

.download-list .item{

    float: left;

    width: 50%;

}

.download-list1:after,

.download-list2:after{

    content: '';

    display: block;

    clear: both;    

}

.download-list1 li,

.download-list2 li{

    width: 50%;

    float: left;

}

.download-list1 li:nth-child(1) a,

.download-list1 li:nth-child(2) a,

.download-list2 li:nth-child(1) a,

.download-list2 li:nth-child(2) a{

    width: 330px;

    height: 120px;

    display: inline-block;

}

.download-list1 li:nth-child(1) a{ background: url(../images/index/down_01.jpg)left top no-repeat; }

.download-list1 li:nth-child(2) a{ background: url(../images/index/down_02.jpg)left top no-repeat; }

.download-list2 li:nth-child(1) a{ background: url(../images/index/down_03.jpg)left top no-repeat; }

.download-list2 li:nth-child(2) a{ background: url(../images/index/down_04.jpg)left top no-repeat; }



.download-list1 li:nth-child(1) a:hover{ background: url(../images/index/down_01.jpg)left bottom no-repeat; }

.download-list1 li:nth-child(2) a:hover{ background: url(../images/index/down_02.jpg)left bottom no-repeat; }

.download-list2 li:nth-child(1) a:hover{ background: url(../images/index/down_03.jpg)left bottom no-repeat; }

.download-list2 li:nth-child(2) a:hover{ background: url(../images/index/down_04.jpg)left bottom no-repeat; }



.download-list1 li a,

.download-list2 li a{

    font-size: 20px;

    color: #1F58AB;

    font-weight: bold;

    line-height: 26px;

    padding: 40px 0 0 164px;

    -webkit-box-sizing: border-box;

   -moz-box-sizing: border-box;

        box-sizing: border-box;

}

.download-list1 li a span,

.download-list2 li a span{

    font-size: 18px;

    color: #3E4546;

    display: block;

}

.download-list1 li .title,

.download-list2 li .title{

    font-size: 16px;

    color: #E28314;

    text-align: center;

    margin: 10px 0;

    font-weight: bold;

    position: relative;

}

.download-sect .small_title{

    font-size: 18px;

    color: #CCCCCC;

    text-align: center;

    margin-bottom: 30px;

    position: relative;

}

.download-sect .small_title:before,

.download-sect .small_title:after{

    content: '';

    width: 35%;

    height: 1px;

    background: #FFF;

    display: block;

    position: absolute;

    top: 58%;

}

.download-sect .small_title:before{ left: 0;}

.download-sect .small_title:after{ right: 0;}



.movie-sect iframe{

    float: right;

    max-width: 722px;

    height: 450px;

}













.quick-link {

    text-align: right;

    padding-top: 1%;

}

.quick-link a {

    display: inline-block;

    vertical-align: top;

    text-align: center;

    max-width: 290px;

    width: 45%;

}

.quick-link a+a {

    margin-left: 4%;

}

.quick-link a .txt {

    position: relative;

    background: no-repeat 50% 0;

    background-size: cover;

    line-height: 1.2;

    min-height: 110px;

    padding: 25px;

    box-sizing: border-box;

}

.quick-link a .txt:before {

    content: "";

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    left: 0;

    margin: 10px;

    border: 1px solid #fff;

}

.quick-link a.about-link .txt {

    background-image: url(../images/index/about_bg.jpg);

}

.quick-link a.service-link .txt {

    background-image: url(../images/index/service_bg.jpg);

}

.quick-link a .pic,

.product-list .pic {

    position: relative;

    display: block;

    overflow: hidden;

}

.quick-link a .pic:before,

.product-list .pic:before {

    content: "";

    background: rgba(255,255,255,0.6) url(../images/index/product_hover.png) no-repeat 50% 50%;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    opacity: 0;

    -webkit-transition: all .3s ease;

            transition: all .3s ease;

}

.quick-link a:hover .pic:before,

.product-list a:hover .pic:before {

    opacity: 1;

}

.quick-link a .title {

    font-family: 'Ubuntu Condensed', sans-serif;

    font-size: 28px;

    color: #4C3339;

}

.quick-link a .description {

    font-family: 'Oxygen', "微軟正黑體", "Microsoft JhengHei", "微软雅黑", "メイリオ", "맑은 고딕", sans-serif;

    color: #8D797A;

    letter-spacing: 0.3px;

}



.product-sect .sect-title {

    text-align: center;

    margin-bottom: 40px;

}

.product-sect .ibtn.more {

    background-image: url(../images/index/product_arrow.png);

    width: 40px;

    height: 40px;

    margin-left: 30px;

}

.product-list .item {

    width: 25%;

    float: left;

}

.product-list .item a {

    border: 0;

}

.product-list a:hover:before {

    display: none;

}

.product-list a:hover .name {

    color: #C77D2C;

}



.album-sect .sect-title {

    margin-bottom: 30px;

}

.album-sect .btn.more {

    position: absolute;

    right: 15px;

    top: 10px;

}

.album-list {

    margin-bottom: -50px;

}

.album-list .item {

    width: 25%;

}



.links-sect .sect-title {

    text-align: center;

    position: relative;

    margin-bottom: 30px;

}

.links-sect .sect-title:before,

.links-sect .sect-title:after,

.links-sect .btn-box:before,

.links-sect .btn-box:after {

    content: "";

    border-top: 1px solid #E0D9DA;

    position: absolute;

    top: 50%;

}

.links-sect .sect-title:before,

.links-sect .btn-box:before {

    left: 0;

    right: 50%;

    margin-right: 90px;

}

.links-sect .sect-title:after,

.links-sect .btn-box:after {

    right: 0;

    left: 50%;

    margin-left: 90px;

}

.links-sect .btn-box {

    padding-top: 0;

    clear: both;

}

.link-list {

    margin: 0 -5px;

}

.link-list .item {

    width: 12.5%;

    padding: 0 5px;

}

.link-list .item a {

    max-width: 140px;

    margin-bottom: 25px;

}

.link-list .pic {

    border: 0;

}

.link-list a:hover .pic {

    opacity: .7;

}



@media screen and (max-width: 1440px) {

.sect4 .row .col{

    float: none;

    margin: 0 auto;

    width: 75%;

    text-align: center;

    }

.news-list .item {

    width: 50%;

}

    .news-list .title{

        width:calc(100% - 100px);

        float: left;

    }

.movie-sect iframe{

    float: none;

    text-align: center;

}

    .sect4 .row .download-sect{

        margin-bottom:80px;

    }

    .download-sect .sect-title{

        margin-bottom: 50px;

    }

.service-list{

    width: 80%;

    margin: 0 auto;

    padding-top: 0;

    padding-bottom: 30px;

}

.service-list .item{

    width: 50%;

    margin-bottom: 50px;

}

    .service-sect{

        background-position: center top;

        background-size: cover;

    }

    .about-sect .btn.more{

        margin-top: 50px;

    }

}

@media screen and (max-width: 1500px) {

    .banner .slick-prev { 

        left: 10px;

    }

    .banner .slick-next {

        right: 10px;

    }

/*

    .banner .item {

        height: auto;

        padding-top: 8%;

    }

*/

}

@media screen and (max-width: 1300px) {

    .quick-link {

        padding-top: 3%;

    }

}

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

    .album-list .item {

        width: 33.33%;

    }

    .album-list .item:nth-child(4) {

        display: none;

    }

}

@media screen and (max-width: 1100px) {

    .product-list .item {

        width: 33.33%;

    }

    .link-list .item {

        width: 25%;

    }

}

@media screen and (max-width: 1000px) {

.sect4 .row .col{

    float: none;

    margin: 0 auto;

    width: 100%;

    text-align: center;

    }

    .sect1 .col {

        float: none;

        width: auto;

    }

    .quick-link {

        text-align: center;

        padding-top: 60px;

    }

.news-list .item {

    width: 100%;

}

    .service-sect{

        background-size: cover;

    }

    .service-list{

    width: 100%;

}

    .row.grid3 .col{

        width: 100%;

        float: none;

    }

    .about-sect .pic{

        margin: 30px;

    }

    .row.grid3 .col:first-child,

    .row.grid3 .col:last-child{

        padding: 0 15px;

    }

}

@media screen and (max-width: 900px) {

    .album-list .item {

        width: 50%;

    }

    .album-list .item:nth-child(4) {

        display: block;

    }

.service-list .item{

    width: 100%;

    margin-bottom: 50px;

}

}

@media screen and (max-width: 820px) {

    .banner {

        margin-bottom: 35px;

    }

    .banner .slick-dots {

        padding-top: 30px;

    }

    .product-list .item {

        width: 50%;

    }

}

@media screen and (max-width: 750px) {

    .download-list1 li,

    .download-list2 li{

        width: 100%;

    }

}

@media screen and (max-width: 600px) {

    .album-list .item {

        width: auto;

    }

.download-sect .small_title:before,

.download-sect .small_title:after{

    width: 18%;

}

    .movie-sect iframe{

        width: 100%;

}

}

@media screen and (max-width: 500px) {

    .news-list .item a {

        white-space: normal;

    }

    .quick-link a {

        display: block;

        width: auto;

        margin: 0 auto;

    }

    .quick-link a+a {

        margin: 30px auto 0;

    }

    .product-list .item {

        width: auto;

        float: none;

    }

    .link-list .item {

        float: left;

        width: 50%;

    }

}

@media screen and (max-width: 430px) {

.download-list1 li:nth-child(1) a,

.download-list1 li:nth-child(2) a,

.download-list2 li:nth-child(1) a,

.download-list2 li:nth-child(2) a{

    width: 230px;

    height: 120px;

    display: inline-block;

    }

.download-list1 li a,

.download-list2 li a{

    font-size: 16px;

    padding: 35px 0 0 100px;

}

.download-list1 li a span,

.download-list2 li a span{

    font-size: 14px;

}

    .download-sect .sect-title,

    .service-sect .sect-title,

    .about-sect .sect-title,

    .news-sect .sect-title{

        font-size: 30px;

    }

    .about-sect .sect-title, .news-sect .sect-title{

        margin-bottom: 20px;

    }

}