@charset "utf-8";
        @import url("reset.css");
        /* CSS Document */
        
        a {
            color: #1A73E8;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            outline: none;
            text-decoration: none;
        }
        
        a:hover {
            opacity: .7;
            cursor: pointer;
        }
        
         :active,
         :focus {
            outline: 0;
            outline: none;
        }
        /*-------font effect-----------*/
        
        .clear {
            clear: both;
            height: 0px;
            line-height: 0px;
        }
        
        .bold {
            font-weight: bold;
        }
        
        .red {
            color: #F00;
        }
        
        .green {
            color: #34A853;
        }
        
        .gray {
            color: #555;
        }
        
        .largeFont {
            font-size: 19px;
        }
        
        .align_r {
            text-align: right;
        }
        
        .align_c {
            text-align: center;
        }
        
        .italic {
            font-style: italic;
            opacity: 0.7;
            font-weight: normal;
        }
        
        .nowrap {
            width: auto;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        
        .lightLine {
            height: 1px;
            line-height: 1px;
            border-bottom: 1px solid #DADCE0;
            margin: 25px auto;
        }
        
        .divider {
            height: 10px;
            line-height: 10px;
        }
        
        ol.number {
            list-style: decimal;
            margin-left: 25px;
            display: block;
        }
        
        .alert {
            background: #F8F9FA;
            padding: 15px 20px;
            font-size: 14px;
            border-radius: 5px;
        }
        /*-------btn effect-----------*/
        
        .btnStyle {
            -webkit-appearance: none;
            /*取消手機預設樣式*/
            text-decoration: none;
            cursor: pointer;
            display: inline-block;
            border: 0;
            border-radius: 50px;
            color: #fff;
            background: #1A73E8;
            transition: all 0.3s ease-out;
        }
        
        .btnStyle:hover {
            opacity: .8;
            transition: all 0.3s ease-out;
            box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.4);
        }
        /*-------img effect-----------*/
        
        .squareThumb {
            width: 100%;
            height: 0;
            padding-bottom: 100%;
        }
        
        .recThumb {
            width: 100%;
            height: 0;
            padding-bottom: 66%;
        }
        
        .squareThumb,
        .recThumb {
            background-image: url("../images/loading.gif");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 15% 15%;
        }
        
        .squareThumb:hover,
        .recThumb:hover {
            opacity: .7;
        }
        
        .imgCorp,
        .imgFull {
            text-align: center;
        }
        
        .imgCorp img,
        .imgFull img {
            opacity: 0;
        }
        /*------------------form effect-------------------*/
        
        input,
        textarea,
        body select,
        button {
            font-family: "Segoe UI", "微軟正黑體", sans-serif;
            font-size: 15px;
            padding: 0;
            color: #333;
            /*避免select長度不一*/
            box-sizing: border-box;
            outline: none;
        }
        
        input:focus {
            outline: none;
        }
        
         ::placeholder {
            color: #888;
            font-style: italic;
        }
        
        .textStyle {
            border: 1px solid #ddd;
            width: inherit;
            background-color: #fff;
            transition: all 0.3s ease-out;
            border-radius: 3px;
        }
        
        .textStyle:focus {
            border-top: 1px solid #f1f1f1;
            border-left: 1px solid #f1f1f1;
            border-right: 1px solid #f1f1f1;
            border-bottom: 1px solid #1A73E8;
            transition: all 0.3s ease-out;
            box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.4);
        }
        
        .formTitle {
            margin-bottom: 5px;
            /*font-weight: bold;
            font-size: 17px;*/
        }
        
        .refresh {
            display: inline-block;
            width: 24px;
            height: 24px;
            text-indent: -9999px;
            background-image: url(../images/refresh.svg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            vertical-align: middle;
        }
        
        .back {
            display: block;
            background-image: url(../images/back.svg);
            background-repeat: no-repeat;
            background-position: left 10px center;
            background-size: 20px 20px;
            padding-left: 40px;
            color: #fff;
            margin-bottom: 20px;
        }
        /*-- quickLink icon --*/
        
        ul#quickLink li.lang a {
            background-image: url(../images/lang.svg);
        }
        
        ul#quickLink li.home a {
            background-image: url(../images/home.svg);
        }
        
        ul#quickLink li.inquiry a {
            background-image: url(../images/inquiry.svg);
        }
        
        ul#quickLink li.login a {
            background-image: url(../images/login.svg);
        }
        
        ul#quickLink li.logout a {
            background-image: url(../images/logout.svg);
        }
        
        ul#quickLink li.login,
        ul#quickLink li.logout {
            display: none;
        }
        /*-- iframe --*/
        
        .fancybox-slide--iframe .fancybox-content {
            border-radius: 8px;
            margin: 0;
        }
        
        .lightBox-title {
            font-size: 21px;
            padding: 10px 25px;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .lightBox-content {
            padding: 25px;
            /*-- fix ios bug --*/
            overflow-x: hidden;
        }
        /*-- search --*/
        
        #resultText span {
            font-weight: bold;
            color: #f00;
        }
        
        #resultText {
            margin-top: 10px;
        }
        
        .search {
            position: relative;
        }
        
        .searchText {
            width: 100%;
        }
        
        .searchBtn {
            position: absolute;
            right: 10px;
            top: 6px;
            width: 28px;
            height: 28px;
            border: none;
            background-color: transparent;
            background-image: url(../images/search.svg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .searchBtn:hover {
            opacity: .6;
        }
        
        .clearResult {
            border: 1px solid #257AE9;
            border-radius: 3px;
            background-color: #E1F5FE;
            background-image: url(../images/close.svg);
            background-repeat: no-repeat;
            background-size: 10px 10px;
            background-position: left 6px center;
            display: inline-block;
            padding: 4px 6px 4px 20px;
            font-size: 14px;
            line-height: 100%;
            margin-left: 5px;
        }
        /*-- exhList --*/
        
        #exhList li dl dd a.favor0 {
            background-image: url(../images/favor.svg);
        }
        
        #exhList li dl dd a.favor1 {
            background-image: url(../images/favorRed.svg);
        }
        
        #exhList li dl dd a.inquiry {
            background-image: url(../images/inquiryBlack.svg);
        }
        /*-- select floor --*/
        
        ul#switch {
            position: relative;
            z-index: 999;
        }
        
        ul#switch li {
            float: left;
        }
        
        ul#switch li a {
            display: block;
            padding: 10px;
            border-radius: 3px;
            background-color: #fff;
            color: #000;
            font-weight: bold;
            font-size: 31px;
            margin-right: 10px;
            opacity: .4;
        }
        
        ul#switch li.selected a,
        ul#switch li:hover a {
            opacity: 1;
        }
        /*-----------------------for PC-----------------------*/
        
        @media screen and (min-width:801px) {
            /*-----------------------body-----------------------*/
            html,
            body {
                margin: 0;
                padding: 0;
                color: #333;
                font-size: 15px;
                line-height: 160%;
                font-family: "Segoe UI", "微軟正黑體", sans-serif;
            }
            p {
                line-height: 160%;
            }
            h1,
            h2,
            h3,
            h4 {
                line-height: 130%;
            }
            .btnStyle {
                padding: 10px 20px;
                font-size: 17px;
            }
            .textStyle {
                padding: 10px;
            }
            .NoShowInPC {
                display: none;
            }
            /*-- scroll bar --*/
            /* width */
             ::-webkit-scrollbar {
                width: 10px;
            }
            /* Track */
             ::-webkit-scrollbar-track {
                background: #f1f1f1;
            }
            /* Handle */
             ::-webkit-scrollbar-thumb {
                background: #999;
                border-radius: 50px;
            }
            /* Handle on hover */
             ::-webkit-scrollbar-thumb:hover {
                background: #555;
            }
            /*-- header --*/
            header {
                width: 100%;
                height: 50px;
                background-color: #000;
                position: relative;
                /*border-top: 3px solid #e71a11;*/
            }
            header #logo {
                position: absolute;
                left: 30px;
                top: 0;
                width: 200px;
                height: 50px;
                background-image: url(../images/logo.svg);
                background-repeat: no-repeat;
                background-size: cover;
                text-indent: -9999px;
            }
            /*-- quickLink btn --*/
            ul#quickLink {
                position: absolute;
                right: 30px;
                top: calc(50% - 8px);
            }
            ul#quickLink li {
                float: left;
                margin-left: 15px;
            }
            ul#quickLink li a {
                display: block;
                background-repeat: no-repeat;
                background-size: cover;
                text-indent: -9999px;
                width: 16px;
                height: 16px;
                opacity: .4;
            }
            ul#quickLink li a:hover {
                opacity: .8;
            }
            /*-- article --*/
            article {
                width: auto;
                background-image: url(../images/bg.jpg);
                background-color: #000;
                background-repeat: no-repeat;
                background-size: cover;
                margin: 0 0 0 21%;
                padding: 30px;
                position: relative;
            }
            article h2 {
                font-size: 31px;
            }
            article h3,
            #left h3 {
                font-size: 21px;
            }
            article h4,
            #left h4 {
                font-size: 19px;
            }
            /*-- left --*/
            #left {
                width: 21%;
                background-color: #222;
                position: fixed;
                left: 0;
                top: 50px;
                padding: 30px 25px;
                color: #fff;
            }
            /*-- category --*/
            #category li {
                width: 100%;
                margin-bottom: 5px;
            }
            #category li:last-child {
                margin: 0;
            }
            #category li a {
                width: auto;
                display: block;
                color: #fff;
                padding: 10px;
                border-radius: 5px;
                transition: all 0.3s ease-out;
            }
            #category li a:hover {
                background-color: rgba(255, 255, 255, 0.15);
                opacity: 1;
                transition: all 0.3s ease-out;
            }
            #category li a div.catLeft {
                float: left;
                width: 20px;
                height: 20px;
                border-radius: 3px;
            }
            #category li a div.catRight {
                margin-left: 30px;
                width: auto;
            }
            #category li a div.catRight h3 {
                font-size: 16px;
            }
            #category li a div.catRight p {
                font-size: 14px;
                opacity: .5;
            }
            /*-- link --*/
            .link {
                position: fixed;
                right: 0;
                bottom: 0;
            }
            .link a {
                padding: 15px 20px 15px 45px;
                display: block;
                color: #fff;
                background-image: url(../images/link.svg);
                background-repeat: no-repeat;
                background-size: 16px 16px;
                background-position: left 20px top 20px;
                background-color: rgba(12, 115, 184, 0.5);
                border-radius: 10px 0 0 0;
            }
            .link a span {
                font-size: 14px;
                opacity: .7;
            }
            /*-- floorplan --*/
            #floorplan {
                background-repeat: no-repeat;
                background-size: cover;
                width: 800px;
                height: 400px;
                position: absolute;
                left: calc(50% - 400px);
                bottom: calc(50% - 245px);
                /*200+45*/
            }
            #floorplan .wrapper {
                position: relative;
                width: 800px;
                height: 400px;
                transition: all 0.3s ease-out;
                background-repeat: no-repeat;
                background-size: cover;
            }
            #floorplan .wrapper a {
                position: absolute;
                /*border: 1px solid #f00;*/
            }
            /*-- title --*/
            #title {
                width: 100%;
                height: 60px;
                position: relative;
                z-index: 3;
                color: #fff;
            }
            #title a {
                color: #fff;
            }
            #title a:hover {
                opacity: 1;
            }
            #title div.titleLeft {
                background-image: url(../images/expoLogo.png);
                background-repeat: no-repeat;
                background-position: left center;
                background-size: 90px auto;
                float: left;
                padding-left: 100px;
            }
            #title div.titleLeft h2 {
                font-size: 29px;
            }
            #title div.titleLeft h4 span {
                font-size: 14px;
                line-height: 100%;
                font-weight: normal;
            }
            #title div.titleLeft p {
                color: #000;
                display: inline-block;
                background-color: #fff;
                padding: 3px 5px;
                line-height: 100%;
                border-radius: 3px;
                margin-bottom: 5px;
            }
            #title div.titleRight {
                float: right;
            }
            /*-- exhList --*/
            #exhList {
                overflow: hidden;
            }
            #exhList li {
                float: left;
                width: 17.6%;
                margin: 0 3% 4% 0;
                font-size: 14px;
                position: relative;
            }
            #exhList li a {
                color: #222;
            }
            #exhList li:nth-child(5n) {
                margin-right: 0;
            }
            #exhList li p.exhTitle {
                width: auto;
                height: 38px;
                overflow: hidden;
                /*border: 1px solid#f00;*/
                font-weight: bold;
                line-height: 130%;
                margin: 8px 0;
            }
            #exhList li dl {
                position: absolute;
                right: 0;
                bottom: 0;
            }
            #exhList li dl dd {
                float: left;
                margin-left: 5px;
            }
            #exhList li dl dd a {
                display: block;
                width: 26px;
                height: 26px;
                border-radius: 50px;
                background-color: #ededed;
                background-repeat: no-repeat;
                background-size: 15px 15px;
                background-position: center center;
            }
            #exhList li dl dd a:hover {
                opacity: .7;
            }
            #exhList li div.exhListLeft {
                border: 1px solid #e0e0e0;
                border-radius: 5px;
                padding: 10px;
            }
            /*-- inquiry form--*/
            .inquiry li {
                float: left;
                width: 32%;
                margin-right: 2%;
            }
            .inquiry li:last-of-type {
                margin: 0;
            }
            .maxText {
                width: 100%;
            }
            .codeText {
                width: 120px;
            }
            /*-- event --*/
            #eventLeft {
                float: left;
                width: 48%;
            }
            #eventRight {
                float: right;
                width: 48%;
            }
            /*-------------footer--------------------*/
            footer {
                padding: 10px 0;
                font-size: 14px;
                opacity: .7;
                text-align: center;
            }
        }
        /*------------------for mobile------------------------*/
        
        @media screen and (max-width:800px) {
            /*-----------------------body-----------------------*/
            html {
                width: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
                -webkit-text-size-adjust: none;
            }
            body {
                color: #333;
                line-height: 150%;
                font-size: 14px;
                font-family: "Segoe UI", "微軟正黑體", sans-serif;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                width: 100%;
                min-height: 100%;
            }
            p {
                line-height: 150%;
            }
            h1,
            h2,
            h3,
            h4 {
                line-height: 130%;
            }
            .largeFont {
                font-size: 17px;
            }
            .btnStyle {
                font-size: 14px;
                padding: 7px 15px;
                -webkit-appearance: none;
                /*取消手機預設樣式*/
            }
            .textStyle {
                padding: 8px 10px;
            }
            .alignCenterMobile {
                text-align: center
            }
            input,
            textarea,
            select {
                font-size: 14px;
                line-height: 150%;
            }
            .picForMobile {
                width: 100%;
                height: auto;
            }
            .NoShowInMobile {
                display: none;
            }
            /*-- header --*/
            header {
                width: 100%;
                height: 50px;
                background-color: #000;
                position: relative;
                /*border-top: 3px solid #e71a11;*/
            }
            header #logo {
                position: absolute;
                left: 15px;
                top: 5px;
                width: 160px;
                height: 40px;
                background-image: url(../images/logo.svg);
                background-repeat: no-repeat;
                background-size: cover;
                text-indent: -9999px;
            }
            /*-- quickLink btn --*/
            ul#quickLink {
                position: absolute;
                right: 15px;
                top: calc(50% - 10px);
            }
            ul#quickLink li {
                float: left;
                margin-left: 7px;
            }
            ul#quickLink li a {
                display: block;
                background-position: left center;
                background-repeat: no-repeat;
                background-size: 16px 16px;
                height: 20px;
                width: 20px;
                text-decoration: none;
                color: #333;
                opacity: .7;
                text-indent: -9999px;
            }
            /*-- article --*/
            article {
                width: auto;
                background-image: url(../images/bg.jpg);
                background-color: #000;
                background-repeat: no-repeat;
                background-size: cover;
                padding: 25px 15px;
                position: relative;
                overflow: hidden;
            }
            article h2 {
                font-size: 21px;
            }
            article h3,
            #left h3 {
                font-size: 17px;
            }
            article h4,
            #left h4 {
                font-size: 15px;
            }
            /*-- title --*/
            #title {
                color: #fff;
                margin-bottom: 20px;
                position: relative;
                z-index: 3;
            }
            #title a {
                color: #fff;
            }
            #title h4 {
                font-weight: normal;
                font-size: 14px;
            }
            #title div.titleLeft {
                background-image: url(../images/expoLogo.png);
                background-repeat: no-repeat;
                background-position: left top;
                background-size: 65px auto;
                padding-left: 70px;
            }
            #title div.titleLeft h2 {
                font-size: 21px;
                line-height: 110%;
                margin-bottom: 2px;
            }
            #title div.titleLeft p {
                color: #000;
                display: inline-block;
                background-color: #fff;
                padding: 3px 5px;
                line-height: 100%;
                border-radius: 3px;
                margin-bottom: 4px;
                font-size: 12px;
            }
            #title div.titleRight {
                padding-left: 70px;
                margin-top: 2px;
            }
            #title div.titleRight h2 {
                display: none;
            }
            /*-- floorplan --*/
            #floorplan {
                background-repeat: no-repeat;
                /*重要!因為多了樓層選項*/
                background-position: left bottom;
                background-size: 100% auto;
                /* border: 1px solid #f00;*/
            }
            #floorplan .wrapper {
                position: relative;
                width: 100%;
                height: 0;
                padding-bottom: 50%;
                transition: all 0.3s ease-out;
                background-repeat: no-repeat;
                background-size: cover;
            }
            /*-- left --*/
            #left {
                background-color: #222;
                padding: 20px 15px;
                color: #fff;
            }
            /*-- category --*/
            #category li {
                width: 100%;
                margin-bottom: 10px;
            }
            #category li:last-child {
                margin: 0;
            }
            #category li a {
                width: auto;
                display: block;
                color: #fff;
                padding: 5px;
                border-radius: 5px;
                transition: all 0.3s ease-out;
            }
            #category li a div.catLeft {
                float: left;
                width: 20px;
                height: 20px;
                border-radius: 3px;
            }
            #category li a div.catRight {
                margin-left: 30px;
                width: auto;
            }
            #category li a div.catRight h3 {
                font-size: 15px;
            }
            #category li a div.catRight p {
                font-size: 13px;
                opacity: .5;
            }
            .back {
                padding-left: 35px;
                background-position: left 5px center;
            }
            /*-- link --*/
            .link {
                border-top: 1px solid #555;
                padding: 20px 15px;
                background-color: #222;
            }
            .link a {
                display: block;
                color: #fff;
                padding: 0 0 0 35px;
                background-image: url(../images/link.svg);
                background-repeat: no-repeat;
                background-size: 20px 20px;
                background-position: left 5px top;
            }
            .link a span {
                font-size: 13px;
                opacity: .5;
            }
            /*-- iframe --*/
            .fancybox-slide {
                padding: 44px 0;
                /*重要!覆蓋掉fancybox.css*/
            }
            .fancybox-iframe {
                /*ios6 bug*/
                border-radius: 8px;
                background: #fff;
            }
            .lightBox-title {
                font-size: 19px;
                padding: 10px 15px;
                border-bottom: 1px solid #e0e0e0;
            }
            .lightBox-content {
                padding: 15px;
            }
            /*-- search --*/
            .searchBtn {
                right: 5px;
                top: 5px;
                width: 28px;
                height: 28px;
            }
            .clearResult {
                margin-left: 0;
                margin-top: 5px;
            }
            /*-- exhList --*/
            #exhList li {
                padding: 15px;
                margin: 0 -15px;
                border-bottom: 1px solid #ededed;
                background-image: url(../images/bgPartime.png);
                background-repeat: repeat-x;
                background-size: 100% 100%;
            }
            #exhList li a {
                color: #222;
            }
            #exhList li:first-of-type {
                padding-top: 0;
                background-image: none;
            }
            #exhList li:last-of-type {
                border: none;
                padding-bottom: 0;
            }
            #exhList li p.exhTitle {
                font-weight: bold;
                line-height: 130%;
            }
            #exhList li dl {
                margin-top: 5px;
            }
            #exhList li dl dd {
                float: left;
                margin-right: 5px;
            }
            #exhList li dl dd a {
                display: block;
                width: 26px;
                height: 26px;
                border-radius: 50px;
                background-color: #ededed;
                background-repeat: no-repeat;
                background-size: 15px 15px;
                background-position: center center;
            }
            .exhListLeft {
                width: 80px;
                height: 80px;
                float: left;
            }
            .exhListRight {
                width: auto;
                min-height: 80px;
                margin-left: 95px;
                /*垂直致中*/
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
            /*-- event --*/
            #eventLeft {
                margin-bottom: 20px;
            }
            /*-- switch floor --*/
            ul#switch {
                overflow: auto;
            }
            ul#switch li a {
                font-size: 25px;
            }
        }