@charset "utf-8";

/* CSS Document */


/* --------------通用----------------- */

* {
    font-family: "微軟正黑體", sans-serif;
}

body,
h1,
h2,
h3,
h4,
h5,
ul,
li,
a,
p {
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
}

.max {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: contain;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

/*======================================電腦版=======================================*/

@media only screen and (min-width:961px) {
    .top_bar {
        width: 100%;
        height: 50px;
        float: left;
        background-color: #FFFFFF;
        border-bottom: 1px solid #cccccc;
    }
    .main_menu_block {
        width: 1024px;
        height: 50px;
        margin: 0 auto;
        position: relative;
        z-index: 999;
    }
    .logo {
        width: 120px;
        height: 30px;
        float: left;
        margin-top: 0.7em;
    }
    .main_menu {
        width: 650px;
        height: 50px;
        float: right;
        margin-left: 10%;
    }
    .slimmenu li {
        width: 15%;
        height: 50px;
    }
    #nav-btn,
    .sub-menu {
        display: none;
        font-size: 0.5em;
    }
    .menu-plus {
        /* font-size:1.2em; */
        margin: 0;
        padding: 0px;
    }
    .nav>.menu {
        display: block !important;
    }
    /*第一層選單*/
    .nav>ul>li {
        float: left;
        margin-left: 15px;
        padding-left: 15px;
        line-height: 3.2em;
        border-left: 1px solid #e2e2e2;
    }
    /* ul .sub-menu {
        border: 1px solid #ccc;
        border-left: 0;
        margin-left: -1.5em;
    } */
    .menu_block_tablet,
    .main_photo_tablet,
    .contents_block_tablet,
    .menu_block_phone,
    .main_photo_phone,
    .contents_block_phone,
    .intro_box_tablet,
    .intro_box_phone,
    .footer_mobile,
    .footer_mobile .footer_elements {
        display: none;
    }
    .menu_block_pc,
    .tab_menu_block {
        width: 100%;
        height: 32px;
        float: left;
        border-bottom: 1px solid #ccc;
        background-color: #fff;
    }
    .menu_pc,
    .tab_menu {
        width: 1024px;
        height: 32px;
        margin: 0 auto;
    }
    .menu_pc a,
    .tab_menu a {
        float: right;
        width: auto;
    }
    .subnavi {
        width: 80px;
        height: 30px;
        float: left;
        background: #fff;
        border: none;
        border-top: 2px solid #000;
        text-align: center;
    }
    .contents_block_pc {
        width: 1024px;
        margin: 0 auto;
        height: auto;
    }
    .intro_text {
        width: 100%;
        height: auto;
        float: left;
    }
    .intro_text ul li {
        list-style-type: disc;
        line-height: 18pt;
        margin: 0.5em 0 0 1em;
    }
    .intro_photo {
        width: 100%;
        text-align: center;
    }
    .intro_video {
        width: 80%;
        height: auto;
        margin: 0 auto;
        padding: 2em;
    }
    .intro_box_pc {
        width: 100%;
        height: auto;
        float: left;
        background-color: #000;
    }
    /* --------------上下通用規格(Header,FOOTER)----------------- */
    /* -------------------------內容---------------------------- */
    /* 背景通用 */
    .bg {
        height: 110px;
    }
    .all_floor {
        height: 800px;
        position: relative;
    }
    .all_content {
        width: 100%;
        height: 100%;
        background-size: contain;
        position: absolute;
    }
    
    .first_floor {
        height: 600px;
        position: relative;
    }

    .product_photo_01_content {
        background: url(../img/M988/M988-WebLayout-EN-01.jpg) no-repeat center;
    }
    .product_photo_02_content {
        background: url(../img/M988/M988-WebLayout-EN-02.jpg) no-repeat center;
    }
    .product_photo_03_content {
        background: url(../img/M988/M988-WebLayout-EN-03.jpg) no-repeat center;
    }
    .product_photo_04_content {
        background: url(../img/M988/M988-WebLayout-EN-04.jpg) no-repeat center;
    }
    .product_photo_05_content {
        background: url(../img/M988/M988-WebLayout-EN-05.jpg) no-repeat center;
    }
    .product_photo_06_content {
        background: url(../img/M988/M988-WebLayout-EN-06.jpg) no-repeat center;
    }
    .product_photo_07_content {
        background: url(../img/M988/M988-WebLayout-EN-07.jpg) no-repeat center;
    }
    .product_photo_08_content {
        background: url(../img/M988/M988-WebLayout-EN-08.jpg) no-repeat center;
    }
    .product_photo_09_content {
        background: url(../img/M988/M988-WebLayout-EN-09.jpg) no-repeat center;
    }
    .product_photo_10_content {
        background: url(../img/M988/M988-WebLayout-EN-10.jpg) no-repeat center;
    }
    .product_photo_11_content {
        background: url(../img/M988/M988-WebLayout-EN-11.jpg) no-repeat center;
    }
    .product_photo_12_content {
        background: url(../img/M988/M988-WebLayout-EN-12.jpg) no-repeat center;    
    }

    /* -------------------------內容---------------------------- */
    /* -------------------------文字---------------------------- */
    .txt_box {
        width: 1000px;
        position: relative;
        margin: auto;
    }
    .third_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.4rem;
        top: 50px;
        left: 25%;
        color: #ffffff;
    }
    .fourth_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.4rem;
        top: 95px;
        left: 4.5%;
        color: #ffffff;
    }
    .fifth_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.4rem;
        top: 60px;
        left: 7%;
        color: #424242;
    }
    .fifth_txt p {
        font-size: 1.6rem;
    }
    .seventh_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.3rem;
        line-height: 2.5rem;
        top: 57px;
        left: 24%;
        color: #ffffff;
    }
    .seventh_txt p {
        font-size: 1.6rem;
        line-height: 3.5rem;
        position: relative;
        top: -40px;
        left: 520px;
    }
    .seventh1_txt {
        text-align: center;
        color: #37ffb9;
        position: relative;
        top: 130px;
        left: -300px;
    }
    .seventh2_txt {
        text-align: center;
        color: #96cdff;
        position: relative;
        top: 95px;
        left: 0px;
    }
    .seventh3_txt {
        text-align: center;
        color: #ff0900;
        position: relative;
        top: 1px;
        left: 300px;
    }
    .eighth_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.2rem;
        top: 555px;
        left: 7%;
        color: #ffffff;
    }
    .eighth_txt p {
        font-size: 1.6rem;
    }
    .ninth_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.2rem;
        top: 577px;
        left: 7%;
        color: #007896;
    }
    .ninth_txt p {
        font-size: 1.6rem;
    }
    .tenth_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.2rem;
        top: 80px;
        right: 7%;
        color: #424242;
    }
    .tenth_txt p {
        font-size: 1.6rem;
    }
    .eleventh_txt {
        position: absolute;
        z-index: 1;
        font-size: 2.2rem;
        top: 115px;
        left: 7%;
        color: #424242;
    }
    .eleventh_txt p {
        font-size: 1.6rem;
    }
    /* -------------------------文字---------------------------- */
    /* -------------------------spec---------------------------- */
    .intro_box {
        padding: 1em 0;
        width: 100%;
        float: left;
        margin-bottom: 40px;
    }
    .intro_box table {
        margin: 0 auto;
        width: 1024px;
        border: 1px solid #cccccc;
        border-collapse: collapse;
    }
    .intro_box table tr td {
        border: 1px solid #868080;
    }
    /* -------------------------spec---------------------------- */
    /* -------------------------通路---------------------------- */
    .store_box {
        padding: 1em 0;
        width: 100%;
        float: left;
        margin-bottom: 80px;
    }
    .store_title {
        text-align: center;
        width: 1024px;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        margin: 0 auto 20px;
        background-color: #1ba4e3;
        color: #fff;
    }
    .store_box ul {
        width: 1024px;
        margin: 0 auto;
    }
    .store_box ul li {
        width: 33%;
        height: 100px;
        margin: 20px 0;
        float: left;
        background-size: contain;
    }
    /* -------------------------通路---------------------------- */
}


/*========================================平板========================================*/

@media only screen and (min-width:481px) and (max-width:960px) {
    .top_bar {
        width: 100%;
        height: 50px;
        float: left;
        background-color: #FFFFFF;
        border-bottom: 1px solid #cccccc;
    }
    
    .logo {
        width: 100px;
        height: 30px;
        margin: 0 auto;
    }
    
    .main_menu_block {
        padding-top: 10px;
        position: relative;
        z-index: 999;
    }
    
    .nav {
        float: left;
        margin: -30px 0 0 0;
        width: 100%;
    }
    
    .nav>ul>li {
        border-left: none;
        border-bottom: 1px solid #e2e2e2;
        background-color: #ffffff;
    }
    
    #nav-btn {
        margin-left: 10px;
    }
    
    .nav>ul,
    .sub-menu {
        display: none;
    }
    /*內容區塊*/
    
    .menu_block_pc,
    .contents_block_pc,
    .menu_block_phone,
    .main_photo_phone,
    .intro_box_pc,
    .contents_block_phone,
    .main_photo_pc,
    .intro_box_phone,
    .footer_pc,
    .footer_mobile .footer_elements {
        display: none;
    }
    
    .menu_block_tablet,
    .tab_menu_block {
        width: 100%;
        height: 30px;
        float: right;
        border-bottom: 1px solid #ccc;
    }
    
    .menu_tablet,
    .tab_menu {
        float: right;
        width: 40%;
    }
    
    .menu_tablet a {
        width: 50%;
        height: 30px;
        float: left;
    }
    
    .tab_menu a {
        width: 50%;
        height: 30px;
        float: right;
    }
    
    .main_photo_tablet {
        width: 100%;
        height: auto;
        float: left;
    }
    
    .menu_phone {
        width: 100%;
        height: 30px;
        float: left;
        border-bottom: 1px solid #ccc;
    }
    
    .subnavi {
        width: 100%;
        height: 30px;
        float: left;
        text-align: center;
    }
    
    .contents_block_tablet {
        width: 100%;
        height: auto;
        float: left;
    }
    
    .contents_block_tablet ul li {
        margin-bottom: 1em;
    }
    
    .intro_photo {
        width: 95%;
    }
    
    .intro_text {
        width: 90%;
        float: left;
        margin-left: 1em;
    }
    
    .intro_text ul {
        margin-left: 1em;
    }
    
    .intro_text ul li {
        list-style-type: disc;
    }
    
    .intro_photo {
        text-align: center;
    }
    /* --------------上下通用規格(Header,FOOTER)----------------- */
    /* -------------------------內容---------------------------- */
    .nav>ul,
    .sub-menu {
        display: none;
    }
    /* 背景通用 */
    .bg {
        height: 130px;
    }
    .all_floor {
        height: 400px;
        position: relative;
    }
    .first_floor {
        height: 340px;
        position: relative;
    }

    .product_photo_01_content {
        background: url(../img/M988/M988-WebLayout-EN-01.jpg) no-repeat center;
    }
    .product_photo_02_content {
        background: url(../img/M988/M988-WebLayout-EN-02.jpg) no-repeat center;
    }
    .product_photo_03_content {
        background: url(../img/M988/M988-WebLayout-EN-03.jpg) no-repeat center;
    }
    .product_photo_04_content {
        background: url(../img/M988/M988-WebLayout-EN-04.jpg) no-repeat center;
    }
    .product_photo_05_content {
        background: url(../img/M988/M988-WebLayout-EN-05.jpg) no-repeat center;
    }
    .product_photo_06_content {
        background: url(../img/M988/M988-WebLayout-EN-06.jpg) no-repeat center;
    }
    .product_photo_07_content {
        background: url(../img/M988/M988-WebLayout-EN-07.jpg) no-repeat center;
    }
    .product_photo_08_content {
        background: url(../img/M988/M988-WebLayout-EN-08.jpg) no-repeat center;
    }
    .product_photo_09_content {
        background: url(../img/M988/M988-WebLayout-EN-09.jpg) no-repeat center;
    }
    .product_photo_10_content {
        background: url(../img/M988/M988-WebLayout-EN-10.jpg) no-repeat center;
    }
    .product_photo_11_content {
        background: url(../img/M988/M988-WebLayout-EN-11.jpg) no-repeat center;
    }
    .product_photo_12_content {
        background: url(../img/M988/M988-WebLayout-EN-12.jpg) no-repeat center;    
    }

    .all_content {
        width: 100%;
        height: 100%;
        background-size: cover;
        position: absolute;
    }

    /* -------------------------內容---------------------------- */
    /* -------------------------文字---------------------------- */
    .txt_box {
        width: 100%;
        position: relative;
        margin: auto;
    }
    .third_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.2rem;
        top: 25px;
        left: 49%;
        margin-left: -119.47px;
        color: #ffffff;
    }
    .fourth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.2rem;
        top: 48px;
        left: 45%;
        margin-left: -180.47px;
        color: #ffffff;
    }
    .fifth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.2rem;
        top: 30px;
        left: 40%;
        margin-left: -135px;
        color: #424242;
    }
    .fifth_txt p {
        font-size: 0.8rem;
    }
    .seventh_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.15rem;
        top: 20px;
        left: 49%;
        margin-left: -119.47px;
        color: #ffffff;
    }
    .seventh_txt p {
        font-size: 0.7rem;
        position: relative;
        top: -20px;
        left: 260px;
    }
    .seventh1_txt {
        text-align: center;
        color: #37ffb9;
        position: relative;
        font-size: 0.6rem;
        top: 65px;
        left: -155px;
    }
    .seventh2_txt {
        text-align: center;
        color: #96cdff;
        position: relative;
        font-size: 0.6rem;
        top: 38px;
        left: 0px;
    }
    .seventh3_txt {
        text-align: center;
        color: #ff0900;
        position: relative;
        font-size: 0.6rem;
        top: -12px;
        left: 150px;
    }
    .eighth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.1rem;
        top: 278px;
        left: 42%;
        margin-left: -135px;
        color: #ffffff;
    }
    .eighth_txt p {
        font-size: 0.7rem;
    }
    .ninth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.1rem;
        top: 290px;
        left: 41.5%;
        margin-left: -135px;
        color: #007896;
    }
    .ninth_txt p {
        font-size: 0.7rem;
    }
    .tenth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.1rem;
        top: 40px;
        right: 29%;
        margin-left: -135px;
        color: #424242;
    }
    .tenth_txt p {
        font-size: 0.7rem;
    }
    .eleventh_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.1rem;
        top: 60px;
        left: 41.5%;
        margin-left: -135px;
        color: #424242;
    }
    .eleventh_txt p {
        font-size: 0.7rem;
    }
    /* -------------------------文字---------------------------- */
    /* -------------------------spec---------------------------- */
    .intro_box {
        padding: 1em 0;
        width: 100%;
        float: left;
        margin-bottom: 80px;
    }
    .intro_box table {
        margin: 0 auto;
        width: 90%;
        border: 1px solid #cccccc;
        border-collapse: collapse;
    }
    .intro_box table tr td {
        border: 1px solid #cccccc;
    }
    /* -------------------------spec---------------------------- */
    /* -------------------------通路---------------------------- */
    .store_box {
        padding: 1em 0;
        width: 100%;
        float: left;
        margin-bottom: 80px;
    }
    .store_title {
        text-align: center;
        width: 90%;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        margin: 0 auto 20px;
        background-color: #1ba4e3;
        color: #fff;
    }
    .store_box ul {
        width: 100%;
        margin: 0 auto;
    }
    .store_box ul li {
        width: 44%;
        height: 100px;
        margin: 20px 3%;
        float: left;
        background-size: contain;
    }
    /* -------------------------通路---------------------------- */
}


/*=========================================手機========================================*/

@media only screen and (max-width:480px) {
    /* --------------上下通用規格(Header,FOOTER)----------------- */
    .menu_nav {
        width: 100%;
        float: left;
        border-bottom: 1px solid #ccc;
    }
    .menu_nav a {
        width: 33%;
        float: right;
    }
    .subnavi {
        width: 100%;
        text-align: center;
        float: left;
        line-height: 30pt;
    }
    footer {
        background-color: #333;
        position: relative;
        float: left;
        width: 100%;
    }
    /*IE 11 hack css*/
    *::-ms-backdrop,
    footer {
        background-color: #333;
        position: relative;
        bottom: 0;
        float: left;
        width: 100%;
    }
    /* --------------上下通用規格(Header,FOOTER)----------------- */
    /* -------------------------內容---------------------------- */
    .nav>ul,
    .sub-menu {
        display: none;
    }
    /* 背景通用 */
    .bg {
        height: 82px;
    }
    /* ------------通用------------- */
    /* /* .first_content,.second_content,.third_content,.fifth_content{
    position: relative;
} */
    /* .first_pic1,.first_pic2,.first_pic3,.first_pic4,.first_pic5,.first_pic6,
.second_block,.third_block,.fifth_block,.fifth_pic{
    position: absolute;
}  */
    /* ------------通用------------- */


    .first_floor, .all_floor, .floor_end {
        height: 420px;
        position: relative;
    }

    .product_photo_01_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-01.jpg) no-repeat center;
    }
    .product_photo_02_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-02.jpg) no-repeat center;
    }
    .product_photo_03_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-03.jpg) no-repeat center;
    }
    .product_photo_04_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-04.jpg) no-repeat center;
    }
    .product_photo_05_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-05.jpg) no-repeat center;
    }
    .product_photo_06_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-06.jpg) no-repeat center;
    }
    .product_photo_07_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-07.jpg) no-repeat center;
    }
    .product_photo_08_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-08.jpg) no-repeat center;
    }
    .product_photo_09_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-09.jpg) no-repeat center;
    }
    .product_photo_10_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-10.jpg) no-repeat center;
    }
    .product_photo_11_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-11.jpg) no-repeat center;
    }
    .product_photo_12_content {
        background: url(../img/M988/M988-Phone-Banner1000px-EN-12.jpg) no-repeat center;
    }

    .all_content {
        width: 100%;
        height: 100%;   
        background-size: cover;
        position: absolute;
    }


    /* -------------------------內容---------------------------- */
    /* -------------------------文字---------------------------- */
    .txt_box {
        width: 100%;
        position: relative;
        margin: auto;
    }
    .third_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.3rem;
        top: 32px;
        left: 49%;
        margin-left: -126.43px;
        color: #ffffff;
    }
    .fourth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.3rem;
        top: 32px;
        left: 49%;
        margin-left: -126.43px;
        color: #ffffff;
    }
    .fifth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.3rem;
        top: 32px;
        left: 45%;
        margin-left: -126.43px;
        color: #424242;
    }
    .fifth_txt p {
        font-size: 0.8rem;
    }
    .seventh_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.3rem;
        top: 33px;
        left: 49%;
        margin-left: -145.03px;
        color: #ffffff;
    }
    .seventh_txt p {
        font-size: 0.7rem;
        position: relative;
        top: -2px;
        left: 80px;
    }
    .seventh1_txt {
        text-align: center;
        color: #37ffb9;
        position: relative;
        font-size: 0.5rem;
        top: 95px;
        left: -90px;
    }
    .seventh2_txt {
        text-align: center;
        color: #96cdff;
        position: relative;
        font-size: 0.5rem;
        top: 103px;
        left: 0px;
    }
    .seventh3_txt {
        text-align: center;
        color: #ff0900;
        position: relative;
        font-size: 0.5rem;
        top: 30px;
        left: 95px;
    }
    .eighth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.2rem;
        top: 303px;
        left: 46%;
        margin-left: -126.43px;
        color: #ffffff;
    }
    .eighth_txt p {
        font-size: 0.7rem;
    }
    .ninth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.2rem;
        top: 290px;
        left: 44%;
        margin-left: -126.43px;
        color: #007896;
    }
    .ninth_txt p {
        font-size: 0.7rem;
    }
    .tenth_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.2rem;
        top: 50px;
        right: 13%;
        margin-left: -126.43px;
        color: #424242;
    }
    .tenth_txt p {
        font-size: 0.7rem;
    }
    .eleventh_txt {
        position: absolute;
        z-index: 1;
        font-size: 1.2rem;
        top: 45px;
        left: 44%;
        margin-left: -126.43px;
        color: #424242;
    }
    .eleventh_txt p {
        font-size: 0.7rem;
    }
    /* -------------------------文字---------------------------- */
    /* -------------------------spec---------------------------- */
    .intro_box {
        padding: 1em 0;
        width: 100%;
        float: left;
        text-align: center;
        margin-bottom: 80px;
    }
    .intro_box table {
        margin: 0 auto;
        width: 90%;
        border-collapse: collapse;
    }
    .intro_box table tr td {
        width: 90%;
        border: 1px solid #cccccc;
        float: left;
    }
    .intro_box table tr td:first-child {
        background-color: #f6f6f6;
    }
    .intro_box table tr:first-child td {
        background-color: #ffffff;
    }
    /* -------------------------spec---------------------------- */
    /* -------------------------通路---------------------------- */
    .store_box {
        padding: 1em 0;
        width: 100%;
        float: left;
        margin-bottom: 80px;
    }
    .store_title {
        text-align: center;
        width: 90%;
        height: 50px;
        line-height: 50px;
        font-size: 24px;
        margin: 0 auto 20px;
        background-color: #1ba4e3;
        color: #fff;
    }
    .store_box ul {
        width: 100%;
        margin: 0 auto;
    }
    .store_box ul li {
        width: 90%;
        height: 100px;
        margin: 20px 5%;
        float: left;
        background-size: contain;
    }
    /* -------------------------通路---------------------------- */
}