@charset "UTF-8"; /* CSS Document */ /* ===================== Index ====================== */ #index_banner_00 { background: url('../img/index/banner_00.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } #index_banner_01 { background: url('../img/index/banner_01.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } #index_banner_02 { background: url('../img/index/banner_02.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } #index_banner_03 { background: url('../img/index/banner_03.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } #index_banner_04 { background: url('../img/index/banner_04.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } #index_banner_05 { background: url('../img/index/banner_05.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } #index_banner_06 { background: url('../img/index/banner_06.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } #index_banner_07 { background: url('../img/index/banner_07.jpg') center center no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; } .index_banner { width:100% !important; height:94vh !important; color: #fff !important; text-align: center !important; vertical-align: middle !important; } .banner_overlay { background: url('../img/index/banner_overlay.png') repeat; width:100%; height:94vh; position: absolute; top: 84px; left: 0; text-align: center; vertical-align: middle; } .banner_content{ width:100%; height:100%; display:inline; float:left; vertical-align: middle; } .banner_content table{ color:#FFF; width:800px; height:100%; } .banner_content table .banner_title_eng, .banner_content table .banner_title_chi{ color:#FFF; text-align:center; /*justify;*/ padding-bottom:10px; font-size:60px; line-height:90px; letter-spacing:0px; } .banner_content table .banner_tag_eng{ color:#FFF; text-align:center; /*justify;*/ padding-top:40px; padding-bottom:40px; height:42%; font-size:31px; line-height:50px; letter-spacing:1px; } .banner_content table .banner_tag_chi{ color:#FFF; text-align:center; /*justify;*/ padding-top:60px; padding-bottom:40px; height:42%; font-size:30px; line-height:50px; letter-spacing:10px; } .content_container_1098_100 .index_col00 table, .content_container_1098_100 .index_col01 table, .content_container_1098_100 .index_col02 table, .content_container_1098_100 .feature_col00 table, .content_container_1098_100 .feature_col01 table, .content_container_1098_100 .organizer_col00 table, .content_container_1098_100 .organizer_col01 table { table-layout:fixed; } .content_container_1098_100 .payment_rows{ text-align: center; font-family:"Proxima Nova Light", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-weight:bold; font-size:28px; line-height:40px; padding: 40px 0 40px 0; } .content_container_1098_100 .payment_row_00{ padding-bottom: 25px; } .content_container_1098_100 .payment_row_01{ } .content_container_1098_100 .payment_rows img{ display: inline-block; margin-right:9px; margin-bottom: 5px; } .content_container_1098_100 .organizer_col00{ width:460px; margin-left:50px; margin-right:39px; display:inline; float:left; color:#FFF; border:none; } .content_container_1098_100 .organizer_col01{ width:460px; margin-left:69px; margin-right:10px; display:inline; float:left; color:#FFF; border:none; } .content_container_1098_100 .organizer_col00 table, .content_container_1098_100 .organizer_col01 table{ width:100%; padding-top:90px; padding-bottom:100px; } .content_container_1098_100 .organizer_col_title{ padding-bottom:15px; color:#FFF; font-family:"Proxima Nova Light", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-weight:bold; font-size:25px; line-height:36px; } .content_container_1098_100 .organizer_col_tag{ padding-top:15px; padding-bottom:10px; color:#FFF; font-size:17px; line-height:24px; } .content_container_1098_100 .organizer_col_btn, .content_container_1098_100 .organizer_col_btn:link{ padding:10px 42px 10px 42px; color:#FFF; border: 1px solid #FFF; } .content_container_1098_100 .organizer_col_btn:hover{ color:#EEE; border: 1px solid #EEE; } .content_container_1098_100 .feature_col00{ width:380px; margin-left:10px; display:inline; float:left; } .content_container_1098_100 .feature_col01{ margin-left:65px; padding-top:130px; padding-right:20px; width:603px; display:inline; float:left; } .content_container_1098_100 .feature_col01 table{ width:100%; } .content_container_1098_100 .feature_col02{ display:none; } .content_container_1098_100 .index_col00{ width:330px; margin-left:20px; display:inline; float:left; text-align: center; vertical-align: middle; } .content_container_1098_100 .index_col01{ width:330px; display:inline; float:left; margin-left:34px; margin-right:34px; text-align: center; vertical-align: middle; } .content_container_1098_100 .index_col02{ width:330px; margin-right:20px; display:inline; float:left; text-align: center; vertical-align: middle; } .feature_title, .feature_title a:link, .feature_title a:visited, .feature_title a:hover{ color:#000000; font-family:"Proxima Nova Light", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-weight:bold; font-size:17px; line-height:24px; } .feature_tag, .feature_tag a:link, .feature_tag a:visited, .feature_tag a:hover{ color:#888; font-size:15px; line-height:25px; } .feature_mobile_tag, .feature_mobile_tag a:link, feature_mobile_tag a:visited, .feature_mobile_tag a:hover{ color:#000000; padding-bottom:15px; font-family:"Proxima Nova Light", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif; font-weight:bold; font-size:28px; line-height:40px; } .feature_mobile_tag_line, .feature_mobile_tag_line a:link, feature_mobile_tag_line a:visited, .feature_mobile_tag_line a:hover{ color:#0083A5; padding-top:15px; font-size:19px; line-height:29px; } .content_container_1098_100 .organizer_col_title, .content_container_1098_100 .organizer_col_tag{ text-align:left; } .robot_title{ color:#34A79B; font-size:28px; line-height:42px; } .robot_content{ color:#888; font-size:19px; line-height:29px; letter-spacing:1px; } .robot_subtag{ font-size:11px; line-height:18px; } .robot_content a:link, robot_content a:visited{ color:#34A79B; } .robot_content a:hover{ color:#888; } .robot_content_container_720_90{ width:690px; text-align:justify; } .fees-heading{ display: inline-block; width: 100%; font-size:44px; line-height:70px; font-weight: 500; padding-top: 20px; } .fees-heading-tagline{ display: inline-block; width: 100%; color: #637381; font-size:40px; line-height:70px; font-weight: 100; padding-bottom: 40px; } .fees-remarks{ width: 100%; font-size:12px; line-height:18px; margin-top: 25px; margin-bottom: 40px; color: #637381; } .fee_desktop { display:table; background-color: #dddddd; } .fee_mobile{ display:none; background-color: #dddddd; } .fee_mobile td, .fee_desktop td{ padding-top: 12px; padding-bottom: 12px; padding-left: 20px; padding-right: 20px; background-color: #F3F3F3; } #fee_mobile-buttons{ margin-bottom: 60px; text-align: center; } #fee_mobile-buttons .button{ padding: 10px 0 10px 0; font-size:14px; line-height:24px; color: #333333; cursor: pointer; } #fee_mobile-buttons .button.selected{ padding: 10px 0 10px 0; color: #34A79B; font-size:16px; line-height:24px; background-color: #eeeeee; width: 100%; cursor: pointer; } #fee_mobile-buttons td{ padding:0; } .fee_mobile .main-section, .fee_desktop .main-section{ color: #34A79B; font-size:21px; letter-spacing: 0; line-height:28px; font-weight: 300; padding-top: 22px; padding-bottom: 22px; } .fee_mobile .service-rate, .fee_desktop .service-rate{ color: #34A79B; font-size:26px; letter-spacing: 0; line-height:50px; font-weight: 300; } .fee_mobile .service-rate-above, .fee_desktop .service-rate-above{ color: #34A79B; font-size:14px; letter-spacing: 0; line-height:20px; font-weight: 300; } .fee_mobile .section, .fee_desktop .section{ color: #212b35; font-size:17px; line-height:24px; font-weight: 700; background-color: #eeeeee; border-top: 3px solid #dddddd; } .fee_mobile .title, .fee_desktop .title{ color: #212b35; font-size:16px; line-height:24px; } .fee_mobile .sub-title, .fee_desktop .sub-title{ color: #637381; font-size:12px; line-height:20px; } .fee_mobile .description, .fee_desktop .description{ color:#637381; font-size:14px; line-height:20px; font-weight:normal; } .fee_mobile .content, .fee_desktop .content{ color:#637381; font-size:15px; line-height:24px; } .fee_mobile .content-free, .fee_desktop .content-free{ color:#34A79B; font-size:16px; line-height:24px; } #tabs-desktop-options{ display:inline-flex; width:100%; } #tabs-desktop-options .tabs-desktop-option-btns.active{ outline: none; background: 0 0; border: 0; border-radius: 0; cursor: pointer; display: inline-block; font-size:19px; letter-spacing:1px; line-height:28px; width:50%; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:30px; margin:0; color: #34A79B; border-bottom-color: #34A79B; border-bottom-style: solid; border-bottom-width: 6px; } #tabs-desktop-options .tabs-desktop-option-btns:hover{ color: #34A79B; } #tabs-desktop-options .tabs-desktop-option-btns{ outline: none; background: 0 0; border: 0; border-radius: 0; cursor: pointer; display: inline-block; font-size:19px; letter-spacing:1px; line-height:28px; width:50%; padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:30px; margin:0; color: #aaa; border-bottom-color: #ccc; border-bottom-style: solid; border-bottom-width: 6px; } .moreBtn{ display:inline-block; text-align:center; font-size:17px; line-height:25px; color:#ffffff !important; padding: 20px 30px 18px 30px; background-color: #31AD9D; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; margin-bottom: 20px; } .moreBtn:hover{ background-color: #cccccc; } /* === END ================== Index ====================== */ /* ========== Other Pages ========== */ #other_cover_image_00{ background: url("../img/index/cover_00.jpg") no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #other_cover_image_01{ background: url("../img/index/cover_01.jpg") no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #other_cover_image_02{ background: url("../img/index/cover_02.jpg") center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #other_cover_image_03{ background: url("../img/index/cover_03.jpg") no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .cover_images { width:100%; height: 350px; text-align: center; } .cover_images .title{ display:inline-block; margin-top:135px; color:#FFF; font-size:57px; line-height:90px; } #others_page_content{ margin:0 auto; position:relative; width:960px; padding-top:40px; padding-bottom:120px; color:#404d57; } #others_page_content .appstore_img_all{ display:inline-block; position:relative; } #others_page_content .appstore_img{ display:inline-block; margin-top:20px; margin-right:10px; } #others_page_content .appimg{ display:inline-block; margin-right:50px; float:left; } #others_page_content .appimg img, #others_page_content .appstore_img img{ display:inline-block; max-width: 530px; } #others_page_content .pre-description-txt{ font-size:28px; line-height:60px; } #others_page_content .pre-description{ text-align:left; display:inline-block; font-size:28px; line-height:35px; width:100%; } #others_page_content .faq-description, #others_page_content .post-description, #others_page_content .description{ text-align:left; display:inline-block; font-size:17px; line-height:28px; width:100%; } #others_page_content .faq-description{ background-color:#FFF; padding:20px 22px 18px 22px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display:inline-block; width:100%; margin-bottom:25px; } #others_page_content .faq-description .ans div{ margin-top:20px; text-align:justify; } #others_page_content .faq-description .ans{ overflow:hidden; height:0; padding:0 10px 0 20px; } #others_page_content .faq-description .que{ width:100%; font-size:18px; line-height:30px; } #others_page_content .faq-description .ans p, #others_page_content .faq-description .que p{ text-align:left; display:inline-block; font-size:18px; line-height:28px; } #others_page_content .faq-description .que .subtitle{ text-align:left; display:inline-block; font-size:16px; line-height:25px; } #others_page_content .post-description{ color:#0083a6; } #others_page_content .form_field{ text-align:left; display:inline-block; width:100%; margin-bottom:16px; } #others_page_content .form_field_label{ width:400px; font-size:17px; line-height:50px; color:#666; display:inline; float:left; text-align:left; } #others_page_content .form_field_input{ width:460px; display:inline; float:left; text-align:left; } #others_page_content .form_field_input textarea, #others_page_content .form_field_input input{ width:92%; } #others_page_content #contact_submitBtn, #others_page_content #partner_submitBtn{ margin-top:10px; width:94%; } #others_page_content .select_topics{ margin-left:10px; } #others_page_content .contactFormHidden{ overflow:hidden; height:0; } /* ==== END == Other Pages ========= */ /* ======= Banner ========= */ /* Slideshow container */ .slideshow-container img { display: inline-block; width:100% } .slideshow-container { width: 100%; position: relative; margin: auto; min-height: 300px; } /* Hide the images by default */ .slideshow-container .mySlides { display: none; } /* Next & previous buttons */ .slideshow-container .prev, .slideshow-container .next { cursor: pointer; position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -30px; padding: 16px; color: white; font-weight: bold; font-size: 18px; line-height: 5px; transition: 0.6s ease; border-radius: 50%; display: inline-block; text-align: center; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } /* Position the "next button" to the right */ .slideshow-container .prev { left: 10px; } .slideshow-container .next { right: 10px; } /* On hover, add a black background color with a little bit see-through */ .slideshow-container .prev:hover, .slideshow-container .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .slideshow-container .text { color: #000000; text-shadow: 0 0 1px #333333; position: absolute; bottom: 100px; padding: 30px 50px 30px 50px; text-align: left; background-color: rgba(255, 255, 255, 0.95); } .slideshow-container .text.chi{ font-size: 45px; line-height: 55px; } .slideshow-container .text.eng{ font-size: 30px; line-height: 45px; } .slideshow-container .text.chi img, .slideshow-container .text.eng img{ margin-top: 20px; width: auto; height: 100px } .slideshow-container .dotContainer{ position: absolute; bottom: 20px; width: 100%; text-align: center; } /* The dots/bullets/indicators */ .slideshow-container .dot { cursor: pointer; height: 10px; width: 10px; margin: 0 2px; background-color: #eee; display: inline-block; transition: background-color 0.6s ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .slideshow-container .active, .slideshow-container .dot:hover { background-color: #31AD9D; } /* Fading animation */ .slideshow-container .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* ==== END == Banner ========= */