@charset "utf-8";
/* CSS Document */
    .pc{display: block;}
    .mobile{display: none;}

    /*loading===============*/
        .loading{}
            .loadingloading{
                background:url(../img/common/bg_lightblueCarben.png) repeat;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                position: fixed;
                text-align:center;
                z-index: 200;}
            .loading_logo{    
                width: 500px;
                height: 117px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -250px;
                margin-top: -121px;}
            .loading_bar{
                height: 98px;
                width: 567px;
                background: url(../img/common/loadingbg.png) no-repeat scroll left top rgba(0, 0, 0, 0);
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -283px;
                margin-top: -49px;}
            .loader{
                width:1%;
                height:98px;
                background:url(../img/common/loading.png) no-repeat left top;}
            .load_status{
                width: 100px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -51px;
                margin-top: 36px;
                color: #fff;
                font-family: Arial;
                font-size: 17px;
                text-align: center;}
            .temp{
                width:4px;
                height:4px;
                overflow:hidden;
                position: absolute;
                left:-50%;
                top:-50%;}
            .temp img{
                width:4px;
                height:4px;}


    /*pc nav*************************************************************/
        .nav{ position: fixed; left: 0; top: 0; width: 100%; height: 100px;}
        .nav .navbtn{float: right; height: 37px; 
            display: block;
            background:url(../img/common/mainmenu.png) no-repeat;
            cursor: pointer;}

        .nav .bindex{width: 131px; background-position: 0 0;}
        .nav .bfilm{width: 109px; background-position:-131px 0;}
        .nav .bsecret{width: 120px; background-position:-240px 0;}
        .nav .bkol{width: 167px; background-position:-360px 0;}
        .nav .bfb{width: 31px; background-position:-527px 0;}

        .nav .navbtn.cs{
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter: alpha(opacity=50);
            -moz-opacity: 0.50;-khtml-opacity: 0.50;opacity: 0.50;}

        .nav .bindex:hover,.nav .bindex.on{background-position: 0 -37px;}
        .nav .bfilm:hover,.nav .bfilm.on{background-position:-131px -37px;}
        .nav .bsecret:hover,.nav .bsecret.on{background-position:-240px -37px;}
        .nav .bkol:hover,.nav .bkol.on{background-position:-360px -37px;}
        .nav .bfb:hover,.nav .bfb.on{background-position:-527px -37px;}

        .nav .bindex.cs{background-position: 0 0; cursor: default;}
        .nav .bfilm.cs{background-position:-131px 0; cursor: default;}
        .nav .bsecret.cs{background-position:-240px 0; cursor: default;}
        .nav .bkol.cs{background-position:-360px 0; cursor: default;}
        .nav .bfb.cs{background-position:-527px 0; cursor: default;}

        .nav .logo{cursor: pointer;position: absolute;left: 0;top: 0;}

    /*pc index01*************************************************************/
        .index01{}
        .index01 .cons{ min-height: 650px;background-position: center center; background-size: cover;
            position: relative; overflow: hidden;}
        /*.index .cons .pcindtitle{ width: 1920px;position: absolute; left: 50%; margin-left:-960px; bottom: -64px;}*/
        .index01 .cons .pcindpro{position: absolute;right:4%; bottom: 6%;}
        .index01 .cons .pcindpro a{ display: block; width: 170px; height: 35px; 
                background-image: url(../img/index01/btns.png); 
                background-repeat: no-repeat;
                position: absolute;
                cursor: pointer;}
        .index01 .cons .pcindpro a.pcindbtn1{ background-position: 0px 0px; right: -4%;top: -85px;}
        .index01 .cons .pcindpro a.pcindbtn2{ background-position: 0px -37px; right: -4%;top: -43px;}
        .index01 .cons .pcindpro a.pcindbtn1:hover{ background-position: -172px 0;}
        .index01 .cons .pcindpro a.pcindbtn2:hover{ background-position: -172px -37px;}

    /*pc index02*************************************************************/
        .index02{}
        .index02 .cons{ background-position: center center; background-size: cover;
            position: relative; overflow: hidden;}
        .index02 .cons .pcindbg{width: 100%;}

        .index02 .cons .pcindpro{position: absolute;right: 4%;bottom: 21%;}
        .index02 .cons .pcindpro a{ display: block; width: 170px; height: 35px; 
                background-image: url(../img/index01/btns.png); 
                background-repeat: no-repeat;
                position: absolute;
                cursor: pointer;}
        .index02 .cons .pcindpro a.pcindbtn1{background-position: 0px 0px;right: 196px;bottom: -43px;}
        .index02 .cons .pcindpro a.pcindbtn2{background-position: 0px -37px;right: 15px;bottom: -43px;}
        .index02 .cons .pcindpro a.pcindbtn1:hover{ background-position: -172px 0;}
        .index02 .cons .pcindpro a.pcindbtn2:hover{ background-position: -172px -37px;}


    /*pc secret*************************************************************/
        .secret{}
        .secret .pro1{width: 100%; position: relative; overflow: hidden;}
        .secret .pro1 .pro_01_figure{width: 100%;}
        .secret .pro1 .posiab{position: absolute;}

        .secret .pro1 .secrettitle{width: 100%;height: 15.8%;left: 0;bottom: 5%;}
        .secret .pro1 .pro_01_figure_top{height: 100%; right: 0; top: 0;}
        .secret .pro1 .pro_01_proname{right: 3%;top: 12.5%;width: 17%;}
        .secret .pro1 .pro_01_prospecial{right: 4%;top: 23.5%;width: 22.5%;}
        .secret .pro1 .pro_01_prospecialpad{display: none;}
        .secret .pro1 .pro_01_prospec{right: 2%;top: 75%;}
        .secret .pro1 .pro_01_pro{width: 33%;right: 1.3%;top: 35%;}
        .secret .pro1 .pro_01_pro2{width: 27%;right: 4%;top: 66%;}
        .secret .pro1 .pro_01_figure_noli{width: 8%;right: 40.5%;top: 27%; display: none;}
        .secret .pro1 .pro_01_figure_noli2{width: 8%;right: 44.5%;top: 27%; display: none;}
        .secret .pro1 .pro_01_figure_nosha{width: 7%; right: 44%;top: 37%; display: none;}

        .secret .pro1 .pbtnA{cursor: pointer;width: 5%;right: 24.5%;top: 44.5%;height: 10%;border-radius: 15px;
            -webkit-border-radius: 15px;-moz-border-radius: 15px;}
        .secret .pro1 .pbtnB{cursor: pointer;width: 5%;right: 18.5%;top: 43%;height: 10%;border-radius: 15px;
            -webkit-border-radius: 15px;-moz-border-radius: 15px;}
        .secret .pro1 .pbtnC{cursor: pointer;width: 6%;right: 11.5%;top: 42%;height: 10%;border-radius: 15px;
            -webkit-border-radius: 15px;-moz-border-radius: 15px;}
        .secret .pro1 .pbtnD{cursor: pointer;width: 4%;right: 6.5%;top: 40.5%;height: 10%;border-radius: 15px;
            -webkit-border-radius: 15px;-moz-border-radius: 15px;}

        .secret .pro1 .pbtnA:hover, .secret .pro1 .pbtnA.on{border: 4px dotted #e1005b; background-color: rgba(255, 255, 255, 0.3);}
        .secret .pro1 .pbtnB:hover, .secret .pro1 .pbtnB.on{border: 4px dotted #e1005b; background-color: rgba(255, 255, 255, 0.3);}
        .secret .pro1 .pbtnC:hover, .secret .pro1 .pbtnC.on{border: 4px dotted #e1005b; background-color: rgba(255, 255, 255, 0.3);}
        .secret .pro1 .pbtnD:hover, .secret .pro1 .pbtnD.on{border: 4px dotted #e1005b; background-color: rgba(255, 255, 255, 0.3);}

        .secret .pro1 .indicater{left: 4%;top: 15%;}

        .secret .pro1 .submenu{width: 318px;height: 72px;right: 14px;bottom: 20px;overflow: hidden;}
        .secret .pro1 .submenu .subm{float: left; display: block; cursor: pointer; background:url(../img/pro_01/pro_01_submenu.png) no-repeat;}
        .secret .pro1 .submenu .subm.cs{
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter: alpha(opacity=50);
            -moz-opacity: 0.50;-khtml-opacity: 0.50;opacity: 0.50;}
        .secret .pro1 .submenu .menup1{width: 318px; height: 24px; background-position: 0 0;}
        .secret .pro1 .submenu .menup2{width: 170px; height: 48px; background-position: 0 -24px;}
        .secret .pro1 .submenu .menup3{width: 148px; height: 48px; background-position: -170px -24px;}

        .secret .pro1 .submenu .menup1:hover,.secret .pro1 .submenu .menup1.on{width: 318px; height: 24px; background-position: 0 -75px;}
        .secret .pro1 .submenu .menup2:hover,.secret .pro1 .submenu .menup2.on{width: 170px; height: 48px; background-position: 0 -99px;}
        .secret .pro1 .submenu .menup3:hover,.secret .pro1 .submenu .menup3.on{width: 148px; height: 48px; background-position: -170px -99px}

        .secret .pro1 .submenu .menup1.cs:hover{background-position: 0 0; cursor: default;}
        .secret .pro1 .submenu .menup2.cs:hover{background-position: 0 -24px; cursor: default;}
        .secret .pro1 .submenu .menup3.cs:hover{background-position: -170px -24px; cursor: default;}

        .secret .pro1 .secrettitle{background:url(../img/common/bg_color_red.png) repeat 0 0;padding: 20px 10px;}
        .secret .pro1 .secrettitle img{height: 100%; max-height: 150px;}

        .secret .pro1 .indicater .ind{position: absolute; left: 0; top: 63px;}
        .secret .pro1 .indicater .pro_01_indicatetitle{position: absolute; left: 0; top: 0;}

        .indicaterPIC{left: 4%;top: 69px;width: 10%;}

    /*pc product_other*************************************************************/
        .product_other{}
        .product_other .cons{}
        .product_other .cons .bgedgeleft{ background:url(../img/pro_all/bgedgeleft.png) repeat-y left top;}
        .product_other .cons .bgedgeright{ background:url(../img/pro_all/bgedgeright.png) repeat-y right top; position: relative; overflow: hidden;}
        .product_other .cons .horizentalsplit{ width: 100%;height: 138px; 
            background: url(../img/pro_all/horizentalsplit.png) repeat-x; 
            position: absolute;left: 0; top: 657px;}
        .product_other .cons img{display: block; width: 1024px; margin:0 auto; position: relative;}
        .product_other .cons a.proall_btn{ display: block; width: 181px; height: 28px; position: absolute; 
            background: url(../img/pro_all/btns.png) no-repeat 0 0; 
            cursor: pointer;
            left: 50%; top: 1234px;}
        .product_other .cons a.proall_btn:hover{ background-position: 0 -30px;}
        .product_other .cons a.proall_btn1{ margin-left: -403px;}
        .product_other .cons a.proall_btn2{ margin-left: -94px;}
        .product_other .cons a.proall_btn3{ margin-left: 214px;}

        .product_other .cons .proallsubmenu{position: absolute; right: 20px; top: 20px; overflow: hidden;}
        .product_other .cons .proallsubmenu a.pasm{display: block; 
            background-image: url(../img/pro_all/submenu.png); background-repeat: no-repeat;
            float: right; cursor: pointer;}
        .product_other .cons .proallsubmenu .pasm01{background-position: 0px 0px; width: 193px; height: 44px;}
        .product_other .cons .proallsubmenu .pasm02{background-position: -193px 0px; width: 113px; height: 44px;}
        .product_other .cons .proallsubmenu .pasm03{background-position: -306px 0px; width: 134px; height: 44px;}
        .product_other .cons .proallsubmenu .pasm04{background-position: -440px 0px; width: 145px; height: 44px;}
        .product_other .cons .proallsubmenu .pasm05{background-position: -585px 0px; width: 152px; height: 44px;}

        .product_other .cons .proallsubmenu .pasm01:hover{background-position: 0px -44px; }
        .product_other .cons .proallsubmenu .pasm02:hover{background-position: -193px -44px; }
        .product_other .cons .proallsubmenu .pasm03:hover{background-position: -306px -44px; }
        .product_other .cons .proallsubmenu .pasm04:hover{background-position: -440px -44px; }
        .product_other .cons .proallsubmenu .pasm05:hover{background-position: -585px -44px; }
        
        .product_other span{position: absolute; display: block; width: 100%; left: 0;}


    /*pc kol*************************************************************/
        .kol{width: 100%; background:url(../img/common/bg_patterm.png) repeat; position: relative;    padding: 60px 0 0 0;}
        .kol .rrr{position: absolute; top:0; left:0;}
        .kcolorbg{width: 100%;height: 100%;background: url(../img/common/bg_grantran.png) no-repeat 0 0;background-size: 100% 100%;}
        .scrollbloggers{width: 100%;background:#e1005b url(../img/blogger/bg_blogger.png) no-repeat top right; position: relative; overflow: hidden;}
        .scrollbloggers img{width: 105.5%; }

        .kdown{width: 100%;position: relative; height: 403px; overflow: hidden;}
        .kdown .b_light{position: absolute;top: 0;left: 50%;margin-left: -100px;}
        .kdown .bloggers_title{ position: absolute;top: 12px;left: 50%;margin-left: -432px;}

        .kdown .bloggers_con{position: absolute;width: 424px;top: 56px;left: 50%;margin-left: 34px;}
        .kdown .bloggers_con .b_title{position: absolute;top: 0;left: 0;}
        .kdown .bloggers_con .b_title img{display: none; position: absolute; left: 0; top:0;}
        .kdown .bloggers_con .b_title img.on{display: block;}
        .kdown span{float: right;display: block;padding-top: 10px;}

        .kdown .bloggers_con .b_morebtn{display: block;width: 211px;height: 28px;margin-left: -21px;cursor: pointer;
            background: url(../img/blogger/blogger_btn.png) no-repeat 0 0;}
        .kdown .bloggers_con .b_morebtn:hover{background-position: 0 -28px;}
        .kdown .bloggers_con .b_text{position: absolute; display: none;width: 100%;top: 84px;left: 0;font-family: "微軟正黑體";line-height: 1.65;font-size: 15px;color: #555;}
        .kdown .bloggers_con .b_text.on{display: block;}

        .kdown .bloggers_p1{position: absolute;width: 277px;top: 98px;right: 50%;margin-right: 71px;}
        .kdown .bloggers_p2{position: absolute;width: 102px;top: 88px;right: 50%;margin-right: 364px;}
        .kdown .bloggers_p3{position: absolute;width: 40px;top: 100px;right: 50%;margin-right: 26px;}

        .scrollbloggers a{position: absolute;width: 11%;height: 100%;top: 0;cursor: pointer;}

    /*pc film*************************************************************/
        .film{}
        .film .cons .toppart{ background: url(../img/film/topbg.png) repeat-x left top; padding-top: 35px;}
        .film .cons .toppart img{display: block; width: 970px; margin:0 auto; position: relative;}

        .film .cons .bottompart{}
        .film .cons .bottompart .filmarea{background-color: #000;}
        .film .cons .bottompart .filmarea .filmpc{width: 854px; height: 480px;margin:0 auto; display: block;}
        .film .cons .bottompart .filmarea .filmpc iframe{width: 100%; height: 100%;}
        .film .cons .bottompart .filmarea .filmatitle{width: 854px; height: 45px; background-color: #e1005a;margin:0 auto; }
        .film .cons .bottompart .filmarea .filmatitle img{float: right; display: block;margin-right: 10px;}
        .film .cons .bottompart .filmarea .filmatitle h2{float: left;margin-left: 10px; line-height: 45px;font-size: 21px; font-family: "微軟正黑體";color: #fff;}

        .film .cons .bottompart .btnarea{width: 868px; overflow: hidden; margin:0 auto; padding: 15px 0;}
        .film .cons .bottompart .btnarea a{display: block; float: left; width: 197px; height: 28px;margin: 0 10px 10px 10px;
            background-image: url(../img/film/filmbtn.png); background-repeat: no-repeat; cursor: pointer;}

        .film .cons .bottompart .btnarea .filmbtn01{background-position: 0px 0px;}
        .film .cons .bottompart .btnarea .filmbtn02{background-position: -207px 0px;}
        .film .cons .bottompart .btnarea .filmbtn03{background-position: -413px 0px;}
        .film .cons .bottompart .btnarea .filmbtn04{background-position: -620px 0px;}

        .film .cons .bottompart .btnarea .filmbtn01:hover, .film .cons .bottompart .btnarea .filmbtn01[alt=on]{background-position: 0px -28px;}
        .film .cons .bottompart .btnarea .filmbtn02:hover, .film .cons .bottompart .btnarea .filmbtn02[alt=on]{background-position: -207px -28px;}
        .film .cons .bottompart .btnarea .filmbtn03:hover, .film .cons .bottompart .btnarea .filmbtn03[alt=on]{background-position: -413px -28px;}
        .film .cons .bottompart .btnarea .filmbtn04:hover, .film .cons .bottompart .btnarea .filmbtn04[alt=on]{background-position: -620px -28px;}

        .film .cons .bottompart .contextarea{ width: 868px;margin: 0 auto;}
        .film .cons .bottompart .contextarea h2{margin-bottom: 15px;font-size: 28px;font-family: "微軟正黑體";color: #e1005a;}
        .film .cons .bottompart .contextarea p{margin-bottom: 50px;font-size: 15px;font-family: "微軟正黑體";color: #7c7c7c;line-height: 1.8;}




    /*mobile loading*************************************************************/

    /*mobile nav*************************************************************/

    /*mobile secret*************************************************************/

    /*mobile kol*************************************************************/



/*Media Query smaller then 320-----------------------------------------------------*/
@media (max-width: 350px) {
        .film.mobile .bottompart .btnarea{width: 289px !important;}
        .film.mobile .bottompart .btnarea a{width: 140.5px !important; height: 24px !important; margin: 0 2px 10px 2px !important; background-size: 285px !important;}

        .film.mobile .bottompart .btnarea .filmbtn01{background-position:0px -57px !important;}
        .film.mobile .bottompart .btnarea .filmbtn02{background-position:-146px -57px !important;}
        .film.mobile .bottompart .btnarea .filmbtn03{background-position:0px -85px !important;}
        .film.mobile .bottompart .btnarea .filmbtn04{background-position:-146px -85px !important;}

        .film.mobile .bottompart .btnarea .filmbtn01:hover, .film .cons .bottompart .btnarea .filmbtn01[alt=on]{background-position: 0px 0px !important;}
        .film.mobile .bottompart .btnarea .filmbtn02:hover, .film .cons .bottompart .btnarea .filmbtn02[alt=on]{background-position: -146px 0px !important;}
        .film.mobile .bottompart .btnarea .filmbtn03:hover, .film .cons .bottompart .btnarea .filmbtn03[alt=on]{background-position: 0px -28px !important;}
        .film.mobile .bottompart .btnarea .filmbtn04:hover, .film .cons .bottompart .btnarea .filmbtn04[alt=on]{background-position: -146px -28px !important;}

}


/*Media Query smaller then 480-----------------------------------------------------*/
@media (min-width: 351px) and (max-width: 480px) {
        .kol.mobile .koltop{width: 100%; overflow: hidden; height: 190px !important;}

        .kol.mobile .koltop .mscrollleft{top: 27% !important;width: 14% !important;}
        .kol.mobile .koltop .mscrollright{top: 27% !important;width: 14% !important;}

}

/*Media Query smaller then 767-----------------------------------------------------*/
@media (max-width: 767px) {
.pc{display: none;}
.mobile{display: block;}

        .loading_bar {
            height: 98px;
            width: 300px;
            margin-left: -150px;
            margin-top: -25px;
            background-size: 300px;
        }
        .loader {
            width: 1%;
            height: 98px;
            background-size: 300px;
        }
        .load_status {
            width: 100px;
            margin-left: -51px;
            margin-top: 24px;
        }


        
        .mnav.mobile{ width: 100%;overflow: hidden; background:#e1005b; position: fixed;left: 0;top: 0;}
        .mnav.mobile .mlogo{display: block;float: left;width: 150px;margin: 10px;}
        .mnav.mobile .burger{display: block;float: right;width: 50px;margin: 17px 10px 11px;}
        .mnav.mobile .mlogo img{width: 100%;}
        .mnav.mobile .burger img{width: 100%;}
        .mnav.mobile ul{width: 100%; background: #e1005b; list-style: none;margin-left:0;float: left;border-top: 1px solid rgba(255,255,255,0.5);}
        .mnav.mobile ul li{width: 100%; background: #e1005b;color: #fff;font-family: Microsoft JhengHei;border-bottom: 1px solid rgba(255,255,255,0.5);}
        .mnav.mobile ul li a{display: inline-block;width: 100%; background: #e1005b;font-size: 17px;line-height: 2.5;margin-left: 10px; cursor: pointer;}
        .mnav.mobile ul li a.on{background: #ff6ca7;}
        .mnav.mobile ul li a svg{display: inline-block;fill:#ffffff;vertical-align: middle;}
        .mnav.mobile ul li a span{display: inline-block;vertical-align: middle;margin-left: 5px;}

        .mnav.mobile .mfb{width: 27.5px;display: block;float: right;margin: 17px 6px 11px;}
        .mnav.mobile .mfb svg{width: 100%;}

        .downmore.mobile{display: block; position: fixed; right: 0; bottom: 10px;width: 10%; max-width: 30px;}
        .downmore.mobile img{width: 100%; opacity: 0;}

        .mtoppad{height: 58px;}

        .index01.mobile{position: relative;}
        .index02.mobile{position: relative;}
        .index01.mobile img{width: 100%;}
        .index02.mobile img{width: 100%;}
        .index01.mobile a{display: block; bottom: 0; width: 50%; position: absolute;cursor: pointer;}
        .index02.mobile a{display: block; bottom: 0; width: 50%; position: absolute;cursor: pointer;}
        .index01.mobile a.ind01btn{height: 10%;left: 0;}
        .index01.mobile a.ind02btn{height: 10%;left: 50%;}
        .index02.mobile a.ind01btn{height: 10%;left: 0;}
        .index02.mobile a.ind02btn{height: 10%;left: 50%;}

        .productall.mobile{position: relative;}
        .productall.mobile img{width: 100%;}
        .productall.mobile a{display: block; left: 0; width: 100%; position: absolute;}
        .productall.mobile span{display: block; left: 0; width: 1px; position: absolute;}
        .productall.mobile a.pro01btn{height: 8%;top: 21%;}
        .productall.mobile a.pro02btn{height: 7.5%;top: 29%;}
        .productall.mobile a.pro03btn{height: 9%;top: 36.5%;}

        .productall.mobile #mobpro01{height: 1%;top: 44.6%;}
        .productall.mobile #mobpro02{height: 1%;top: 60.2%;}
        .productall.mobile #mobpro03{height: 1%;top: 77.6%;}


        .secret.mobile{width: 100%; position: relative; overflow: hidden;}
        
        .secret.mobile #secret_mobileAnchor{position: absolute;top: -59px; left: 0;}

        .secret.mobile .mpro1{width: 100%;}
        .secret.mobile .product_des{display: block;position: absolute;left: 1%;top: 12.5%;width: 52%;}
        .secret.mobile .product_des img{width: 100%;position: absolute;left: 0;top: 0; opacity: 0;-webkit-opacity: 0;-moz-opacity: 0;}
        .secret.mobile .product_des img:last-child{width: 94%;}
        .secret.mobile .mpbtn{cursor: pointer;width: 9%; height: 5.5%;border-radius: 9px; position: absolute;
            -webkit-border-radius: 9px;-moz-border-radius: 9px;border: 2px dotted #e1005b; background-color: rgba(255, 255, 255, 0.3);}
        .secret.mobile .mpbtn.on{border: 2px dotted #e1005b; background-color: rgba(225,0,91,0.2);}
        .secret.mobile .mpbtnA{left: 25%;top: 74%;}
        .secret.mobile .mpbtnB{left: 38.5%;top: 73%;}
        .secret.mobile .mpbtnC{left: 52.5%;top: 71.8%;}
        .secret.mobile .mpbtnD{left: 64.5%;top: 70.8%;}
        .secret.mobile .msecret-pen{position: absolute;left: 23%;top: 87%;width: 58%;}

        .kol.mobile{width: 100%; position: relative;padding: 20px 0 0;}
        .kol.mobile .koltop{width: 100%; overflow: hidden; height: 250px; position: relative;}
        .kol.mobile .koltop .mscrollbloggers{height: 100%; position: relative; left: 0; top: 0;display: inline-block;}
        .kol.mobile .koltop .mscrollbloggers img{height: 100%;}
        .kol.mobile .koltop .mscrollbloggers a{display: block; height: 100%; position: absolute; top: 0;}
        .kol.mobile .koltop .mscrollleft{display: block; position: absolute; top: 27%; left:2%;width: 10%;}
        .kol.mobile .koltop .mscrollleft img{width: 100%; opacity: 0.2;-webkit-opacity: 0.2;-moz-opacity: 0.2;}
        .kol.mobile .koltop .mscrollright{display: block;position: absolute;top: 27%;right: 2%;width: 10%;}
        .kol.mobile .koltop .mscrollright img{width: 100%; opacity: 0.7;-webkit-opacity: 0.7;-moz-opacity: 0.7;}

        .kol.mobile .koldown{width: 100%;background:url(../img/mobile/bloggerbotttom.jpg) no-repeat top left; background-size: contain; position: relative;padding-top: 30px;}
        .kol.mobile .koldownimg{width: 100%;}
        .kol.mobile .mbloggers_title{width: 100%;}
        .kol.mobile .mb_text{display: none;font-family: Microsoft JhengHei;padding: 0 6%;line-height: 1.5;font-size: 15px;}
        .kol.mobile .mb_text.on{display: block;margin-bottom: 20px;}
        .kol.mobile .mb_title{width: 100%;}
        .kol.mobile .mb_title img{display:none;width: 100%;margin-bottom: 20px;}
        .kol.mobile .mb_title img.on{display:block;}
        .kol.mobile .mbloggers_con{width: 100%;}
        .kol.mobile .mbloggers_con span {display: inline-block;width: 100%;padding-top: 10px;}
        .kol.mobile .mbloggers_con span a{display: block; width: 100%;}
        .kol.mobile .mbloggers_con span a img{width: 100%;}

        .film.mobile{position: relative;}
        .film.mobile .toparea img{width: 100%;}

        .film.mobile #film_mobileAnchor{position: absolute;top: -59px; left: 0;}

        .film.mobile .bottompart{}
        .film.mobile .bottompart .filmarea{background-color: #000;}
        .film.mobile .bottompart .filmarea .filmmob{width: 100%; height: 180px;margin:0 auto; display: block;}
        .film.mobile .bottompart .filmarea .filmmob iframe{width: 100%; height: 100%;}
        .film.mobile .bottompart .filmarea .filmatitle{width: 100%;background-color: #e1005a;margin: 0 auto;padding: 10px 0;}
        .film.mobile .bottompart .filmarea .filmatitle img{float: right; display: block;margin-right: 10px;}
        .film.mobile .bottompart .filmarea .filmatitle h2{margin: 0 10px;line-height: 1.5;font-size: 14px;font-family: "微軟正黑體";color: #fff;}

        .film.mobile .bottompart .btnarea{width: 374px;overflow: hidden; margin: 0 auto;padding: 15px 0;}
        .film.mobile .bottompart .btnarea a{display: block;
            float: left;
            width: 177px;
            height: 31px;
            margin: 0 5px 10px 5px;
            background-image: url(../img/mobile/filmbtns.png);
            background-repeat: no-repeat;
            cursor: pointer;
            background-size: 360px;}

        .film.mobile .bottompart .btnarea .filmbtn01{background-position: 0px -72px;}
        .film.mobile .bottompart .btnarea .filmbtn02{background-position: -184px -72px;}
        .film.mobile .bottompart .btnarea .filmbtn03{background-position: 0px -108px;}
        .film.mobile .bottompart .btnarea .filmbtn04{background-position: -184px -108px;}

        .film.mobile .bottompart .btnarea .filmbtn01:hover, .film.mobile .bottompart .btnarea .filmbtn01[alt="on"]{background-position: 0px 0;}
        .film.mobile .bottompart .btnarea .filmbtn02:hover, .film.mobile .bottompart .btnarea .filmbtn02[alt="on"]{background-position: -184px 0;}
        .film.mobile .bottompart .btnarea .filmbtn03:hover, .film.mobile .bottompart .btnarea .filmbtn03[alt="on"]{background-position: 0px -36px;}
        .film.mobile .bottompart .btnarea .filmbtn04:hover, .film.mobile .bottompart .btnarea .filmbtn04[alt="on"]{background-position: -184px -36px;}

        .film.mobile .bottompart .contextarea {width: 92%;padding: 0 4%;margin: 0 auto;}
        .film.mobile .bottompart .contextarea h2 {margin-bottom: 15px;font-size: 21px;font-family: "微軟正黑體";color: #e1005a;line-height: 1.5;}
        .film.mobile .bottompart .contextarea p {margin-bottom: 35px;font-size: 15px;font-family: "微軟正黑體";color: #7c7c7c;line-height: 1.8;}




        .film.mobile .bottompart .btnarea{width: 289px !important;}
        .film.mobile .bottompart .btnarea a{width: 140.5px !important; height: 24px !important; margin: 0 2px 10px 2px !important; background-size: 285px !important;}

        .film.mobile .bottompart .btnarea .filmbtn01{background-position:0px -57px !important;}
        .film.mobile .bottompart .btnarea .filmbtn02{background-position:-146px -57px !important;}
        .film.mobile .bottompart .btnarea .filmbtn03{background-position:0px -85px !important;}
        .film.mobile .bottompart .btnarea .filmbtn04{background-position:-146px -85px !important;}

        .film.mobile .bottompart .btnarea .filmbtn01:hover, .film .cons .bottompart .btnarea .filmbtn01[alt=on]{background-position: 0px 0px !important;}
        .film.mobile .bottompart .btnarea .filmbtn02:hover, .film .cons .bottompart .btnarea .filmbtn02[alt=on]{background-position: -146px 0px !important;}
        .film.mobile .bottompart .btnarea .filmbtn03:hover, .film .cons .bottompart .btnarea .filmbtn03[alt=on]{background-position: 0px -28px !important;}
        .film.mobile .bottompart .btnarea .filmbtn04:hover, .film .cons .bottompart .btnarea .filmbtn04[alt=on]{background-position: -146px -28px !important;}




}

/*Media Query between 768to 1023-----------------------------------------------------*/
@media (min-width: 768px) and (max-width: 1023px) {
        .index01 .cons .pcindtitle {width: 1800px;position: absolute;left: 50%;margin-left: -801px;bottom: 118px;}
        .index01 .cons .pcindpro {right: 2%;bottom: 2%;}
        .index01 .cons .pcindpro a.pcindbtn1 {right: 9px;}
        .index01 .cons .pcindpro a.pcindbtn2 {right: 9px;}

        .secret .pro1 .indicater{width: 24%;}
        .secret .pro1 .indicater .pro_01_indicatetitle{width: 100%;}
        .secret .pro1 .submenu{display: none;}
        .secret .pro1 .pro_01_prospec{display: none;}
        .secret .pro1 .pro_01_prospecialpad{display: block;right: 4%;top: 75.5%;width: 22.5%;}

        .ind.ind1{width: 103%;}
        .ind.ind2{width: 98%;}
        .ind.ind3{width: 112%;}
        
        .kdown {height: 364px;}
        .kdown .bloggers_con {width: 47%;top: 61px;margin-left: -3px;}
        .kdown .bloggers_con .b_title { width: 114%;}
        .kdown .bloggers_con .b_title img { width: 100%;}
        .kdown .bloggers_title { margin-left: -367px; width: 40%;}
        .kdown .b_light {margin-left: -31px;width: 54%;}

        .kdown .bloggers_p1 {width: 215px;top: 98px;margin-right: 71px;}
        .kdown .bloggers_p2 {width: 68px;top: 99px;margin-right: 299px;}
        .product_other .cons a.proall_btn3 {margin-left: 138px;}

        .product_other .cons img{width: 100%;}
        .product_other .cons .horizentalsplit {top: 21.8%;}
        .product_other .cons a.proall_btn {top: 40.8%;}
        .product_other .cons a.proall_btn1 {margin-left: -91px;left: 19.5%;}
        .product_other .cons a.proall_btn2 {margin-left: -91px;left: 49.5%;}
        .product_other .cons a.proall_btn3 {margin-left: -91px;left: 79.5%;}

        .film .cons .toppart img {width: 98%;}
        .film .cons .bottompart .filmarea .filmatitle {width: 100%;}
        .film .cons .bottompart .filmarea .filmpc {width: 720px;height: 400px;}
        .film .cons .bottompart .btnarea{width: 434px;}
        .film .cons .bottompart .contextarea {width: 96%;padding: 0 2%;}

        .index02 .cons .pcindpro {
        position: absolute;
        right: 2%;
        bottom: 5%;
        width: 39%;}
        .index02 .cons .pcindpro img {
            width: 100%;
            position: absolute;
            bottom: 83px;
            right: 0;
        }
        .index02 .cons .pcindpro a.pcindbtn1 {
            right: 15px;
            bottom: 40px;
        }
        .index02 .cons .pcindpro a.pcindbtn2 {
            right: 15px;
            bottom: 0px;
        }
}

/*Media Query bigger then 980-----------------------------------------------------*/
@media (min-width: 980px) {
        .index01 .cons .pcindtitle{ width: 1920px;position: absolute; left: 50%; margin-left:-960px; bottom: -64px;}
        .index02 .cons .pcindpro {position: absolute;right: 4%;bottom: 19%;}
}

/*Media Query bigger then 1200-----------------------------------------------------*/
@media (min-width: 1200px) {
        .index01 .cons .pcindtitle{width: 2300px;bottom: -133px;margin-left: -1150px;}
        .film .cons .bottompart .filmarea .filmpc{width: 1200px;height: 672px;margin:0 auto; display: block;}
        .film .cons .bottompart .filmarea .filmatitle{width: 1200px;}
        .index02 .cons .pcindpro {position: absolute;right: 4%;bottom: 26%;}

}