/* ===================== LAYOUT ===================== */ /* ==================================== General ==================================== */ html, body { margin:0; padding:0; border:0; font-family:"微軟正黑體", Arial; vertical-align:baseline; font-size:12px; line-height:1.6em; color:#000000; background-color:#fff; /* -webkit-transform: translate3d(0,0,0); */} body { height:auto; } body * { outline:none;} table { border-collapse:collapse; border-spacing:0; width:100%; } td { vertical-align:top; } ol, ul { list-style:none; margin:0; padding:0; } a { margin:0; padding:0; border:0; text-decoration:none; color:#000; word-wrap: break-word;} a:hover { text-decoration: none; } a img { border:none; } h1,h2,h3,h4,h5,h6 { font-weight:normal; } strong { font-weight:bold; } em { font-style:italic; } .hide { display: none; } .left { float:left;} .right { float:right;} .preload { display:none; } .clearfix { zoom:1; } .clearfix:after { content:"."; display:block; clear:both; width:0px; height:0px; visibility:hidden; font-size:0; } .linkStyle {color:blue; text-decoration:underline;} .hidden-info-content a {color:#ffffff;} /* ==================================== Structure ==================================== */ #background { width:100%; height:auto; overflow:hidden; position:fixed; top:-50px; left:0;/* -webkit-transition: all 0.5s; transition: all 0.5s;*/} #background img { min-width:100%; min-height:100%; display:none;} #background img:first-child {display:block;} #warp { background-color:#eee; } #wrapper-header { width: 100%; height: auto; position: fixed; top:0; z-index: 9999; /*opacity: 0.5; background-color:#000;*/ background:url(../img/menu-bg.png) 0 0 repeat-x; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden;} #header { height: 108px; max-width: 1250px; margin: 0 auto; } .company-logo { margin:5px 0;} .company-logo.mobile { display:none;} .company-logo img { margin-top:5px; display:block;} #menu { position: relative; -webkit-transform: translate3d(0,0,0); float: right; margin: 0 0 0 0; } #menu ul { } #menu ul li { display:block; float: left; height:108px; background:url(../img/menu-line.png) 0 center no-repeat; } #menu ul li:first-child { background-image:none;} #menu ul li a { display:inline-block; /*margin:10px 20px 0;*/ margin:30px 20px 0; padding: 10px 0 5px; font-size: 2em; color:#fff; position:relative; -webkit-transform: translate3d(0,0,0);} #menu ul li a:hover, #menu ul li a.active { border-bottom:#fff 1px solid; } #menu ul li.menu_chapter-1 a:hover, #menu ul li.menu_chapter-1 a.active { border-bottom:#f4d0ac 1px solid; } #menu ul li.menu_chapter-2 a:hover, #menu ul li.menu_chapter-2 a.active { border-bottom:#f89790 1px solid; } #menu ul li.menu_chapter-3 a:hover, #menu ul li.menu_chapter-3 a.active { border-bottom:#f8ca7d 1px solid; } #menu ul li.menu_chapter-4 a:hover, #menu ul li.menu_chapter-4 a.active { border-bottom:#fa9e79 1px solid; } #menu ul li.menu_contact a:hover, #menu ul li.menu_contact a.active { border-bottom:#f8d5b9 1px solid; } .mobile-menu-btn { display:none; background:url(../img/mobile-menu-btn.png) 0 0 no-repeat; width:60px; height:60px; margin:5px 20px 0 0; cursor:pointer;} .mobile-menu-btn.current { background-position:0 bottom;} .slide-menu { width:auto; position:absolute; top:65px; right:0; display: none; background:#303538; z-index:99999; height:auto; } .slide-menu li { border-top:#fff 1px solid;} .slide-menu li:first-child { border-top:none;} .slide-menu a { display:block; font-size: 2em; color:#fff; padding:25px 30px;} .slide-menu a.current, .slide-menu a.active { background:#202125;} .mobile-header-info { display:none; width:auto; max-width:300px; margin:0 auto; height: 65px; } .mobile-header-info p { color:#fff; font-size:34px; text-align:center; margin:0; padding:5px 0; line-height:1.6em; } #wrapper-home { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); } #home { width: 100%; height: auto; min-height: 800px; background-color:#f6a8d8; } #wrapper-home-photo { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); } #home-photo { width: 100%; height: auto;} #wrapper-chapter-1a { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); background:url(../img/bg-1.jpg) center 0 repeat; } #chapter-1a { width: 100%; height: auto; max-width: 1250px; margin: 0 auto; min-height: 500px; padding: 20px 0; /*background-color:#f4d0ac;*/ } #wrapper-chapter-1b { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); } #chapter-1b { width: 100%; height: auto; } #wrapper-chapter-2a { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); background:url(../img/bg-2.jpg) center 0 repeat;} #chapter-2a { width: 100%; height: auto; max-width: 1250px; margin: 0 auto; min-height: 500px; padding: 20px 0; /*background-color:#f89790;*/ } #wrapper-chapter-2b { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); } #chapter-2b { width: 100%; height: auto; } #wrapper-chapter-3a { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); background:url(../img/bg-3.jpg) center 0 repeat;} #chapter-3a { width: 100%; height: auto; max-width: 1250px; margin: 0 auto; min-height: 500px; padding: 20px 0; /*background-color:#f8ca7d; */} #wrapper-chapter-3b { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); } #chapter-3b { width: 100%; height: auto; } #wrapper-chapter-4a { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); background:url(../img/bg-4.jpg) center 0 repeat; } #chapter-4a { width: 100%; height: auto; max-width: 1250px; margin: 0 auto; min-height: 500px; padding: 20px 0;/*background-color:#fa9e79;*/ } #wrapper-chapter-4b { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); } #chapter-4b { width: 100%; height: auto; } #wrapper-contact-a { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); /*background-color:#f8d5b9;*/ background:url(../img/bg-5.jpg) center 0 repeat; } #contact-a { width: 100%; height: auto; max-width: 1250px; margin: 0 auto; min-height: 500px; padding: 20px 0;/*background-color:#f8d5b9;*/ } #wrapper-contact-b { width: 100%; height: auto; position: relative; -webkit-transform: translate3d(0,0,0); background-color:#f1f0ee; } #contact-b { width: 100%; height: auto; max-width: 1250px; margin: 0 auto; min-height: 500px; padding: 20px 0; background-color:#f1f0ee; } /* ===================== SHARING ===================== */ .one-third { width: 33.33%; height: auto; min-height: 200px; box-sizing: border-box; background-color:#CCC; border: #999 solid 1px; float:left; } /* ===================== MODULES ===================== */ /* ==================================== buttons ==================================== */ .btn-info { background:url(../img/information-icon.png) 0 0 no-repeat; width:60px; height:60px; float:right; cursor:pointer;} .btn-close { background:url(../img/x.png) 0 0 no-repeat; position:absolute; top:10px; right:10px; width:28px; height:28px; cursor:pointer;} .chapter-title { margin:20px auto 45px; width:336px; } .image_container img { max-width:100%;} /* ==================================== Home ==================================== */ #home .black_header_bg { display:none; height:65px; background:#000;} #home .banner { max-width:1920px; width:100%; overflow:hidden; position: relative; -webkit-transform: translate3d(0,0,0);} #home .banner-container { height:auto; width:1920px; max-width:1920px; max-height:960px; position:relative; -webkit-transform: translate3d(0,0,0); left:50%; margin-left:-960px; } #home .banner-container img { width:100%; display:block;} #home .cycle-prev { z-index:1000; position:absolute; left:20px; top:50%; width:92px; height:92px; background:url(../img/arrow-left.png) 0 0 no-repeat; cursor:pointer;} #home .cycle-next { z-index:1000; position:absolute; right:20px; top:50%; width:92px; height:92px; background:url(../img/arrow-right.png) 0 0 no-repeat; cursor:pointer;} #home .scroll_gif a { position:absolute; z-index:1000; bottom:32%; left:0; right:0; margin-left:auto; margin-right:auto; width:200px; height:200px; background:url(../img/scroll-down-bg2.png) 0 0 no-repeat; /*opacity:0.75; filter: alpha(opacity=75);*/} #home .scroll_gif img { max-width:100%; } #home .tag_line { position:absolute; bottom:0; z-index:1000;} #home .tag_line img { width:100%;} /* ==================================== Conversation ==================================== */ /* IE8 */ .jquery-corner>div { border-color:transparent transparent !important;} /* male profile-image */ .left-conversation .profile-logo { width:110px; height:110px; background:url(../img/head-m.png) 0 0 no-repeat;} #contact-a .left-conversation .profile-logo { background-image:none;} /* female profile-image */ .right-conversation .profile-logo { width:110px; height:110px; background:url(../img/head-f1.png) 0 0 no-repeat;} #chapter-3a .right-conversation .profile-logo { background-image:url(../img/head-f2.png);} #chapter-4a .right-conversation .profile-logo { background-image:url(../img/head-f3.png);} #contact-a .right-conversation .profile-logo { background-image:none;} /* conversation (normal) */ .conversation-wrapper { max-width:685px; min-height:105px; height:auto; width:auto; margin-bottom:35px; position:relative; -webkit-transform: translate3d(0,0,0);} .conversation-wrapper.withBigImg { max-width:855px; } .conversation-arrow { position:relative; -webkit-transform: translate3d(0,0,0); z-index:2; width:19px; height:22px; } .conversation-arrow.left { background: url(../img/chatbox-m-arrow.png) 0 0 no-repeat; margin:45px 0 0 -5px; } .conversation-arrow.right { background: url(../img/chatbox-f-arrow.png) 0 0 no-repeat; margin:45px -5px 0 0; } .conversation { position:relative; -webkit-transform: translate3d(0,0,0); z-index:1; max-width:555px; width:auto; background:#a6a6a6; font-size:34px; line-height:1.2em;} .conversation.left { margin-left:-3px;} .conversation.right { margin-right:-3px;} .conversation>.conversation-content { padding:20px 20px; min-height:50px;} .conversation.left>.conversation-content { background:#b2fad7; } .conversation.left.imgContainer { width:40%;} .conversation.right>.conversation-content { background:#fff; } .conversation p { margin:10px 5px; } .conversation img { width:100%; max-width:100%; margin: 10px 0;} .conversation p img { width:auto; max-width:none; margin:-3px 0 0; height:38px; padding:0 3px; vertical-align: middle;} .conversation a { line-height:1.3em;} /* conversation (with big image) */ .withBigImg .conversation { max-width:720px; } .withBigImg .conversation img { margin:10px 0 10px;} .withBigImg .conversation img:first-child { margin:0 0 10px;} .withBigImg .conversation p { margin:10px 90px 10px 0;} .withBigImg.withText .btn-info { position:absolute; right:20px; bottom:10px; float:none;} .withText .conversation>.conversation-content { padding:20px 20px 30px; } .withBigImg .conversation>.conversation-content { padding:20px 20px 20px; } /* conversation (with lightbox) */ .hidden-info { display:none; position:absolute; bottom:80px; right:35px; z-index:100; color:#fff; font-size:34px; line-height:1.2em; background:url(../img/information-bg-3.png) 1px 0 no-repeat; width:837px; /*min-height:284px;*/ height:auto;} .left .hidden-info { right:auto; left:35px;} .withBigImg .hidden-info { bottom:160px;} .hidden-info p { padding:20px 30px; margin:0 0 0 1px; background:url(../img/information-bg-2.png) center 0 repeat; } .hidden-info p:first-child { margin-top:20px;} .hidden-info-content { padding:0 0 20px; background:url(../img/information-bg-4.png) 1px bottom no-repeat; } /* ==================================== Contact ==================================== */ #contact-a .conversation-wrapper { max-width:1045px;} #contact-a .conversation { max-width:898px; } #contact-a .profile-logo { width:125px;} .form-container { max-width:980px; margin: 0 auto;} #enqiry_form { font-size:34px; position:relative; -webkit-transform: translate3d(0,0,0); padding-right: 120px;} #enqiry_form>div>.left { margin-bottom:10px; min-height:50px;} #enqiry_form label { display:block; width:180px; line-height:50px; padding-right:15px;} #enqiry_form input { font-size:28px; min-width: 180px; width: 580px; height: 30px; padding:10px 15px; background:url(../img/inputbox.png) 0 0 no-repeat; border:0; font-family: "微軟正黑體", Arial;} #enqiry_form textarea { font-size:28px; min-width: 180px; width: 580px; height: 60px; padding:10px 15px; overflow: auto; background:url(../img/inpubox-big.png) 0 0 no-repeat; border:0; font-family: "微軟正黑體", Arial;} #enqiry_form .btn-submit { position:absolute; right:0; bottom:10px; padding:0; min-width:0; width:106px; height:90px; text-indent:-99999px; border:0; cursor:pointer; background:url(../img/send.png) 0 0 no-repeat;} #enqiry_form .error { display:none; color:#C00; font-size:25px; margin:5px 0 5px;} #enqiry_form .error.active { display:block; clear:both;} #enqiry_form .hidden-info { bottom:100px;} .hidden-info.active { display:block;} /*#cboxOverlay { background:#000;} #cboxContent { background: transparent;} #cboxClose { color:#fff}*/ #cboxContent { margin-top:35px;} #cboxClose { display:none; color:#fff; background:url(../img/x.png) 0 0 no-repeat; width:28px; height:28px; top:-35px; right:0; opacity:1 !important;} #cboxCurrent { display:none !important;} #cboxLoadedContent { border:none;} #cboxPrevious { background:none; left:0; width: 26px; height: 51px;} #cboxPrevious:hover { background:url(../img/btn-left.png) no-repeat 0 bottom;} #cboxContent:hover #cboxPrevious { background:url(../img/btn-left.png) no-repeat 0 0;} #cboxContent:hover #cboxPrevious:hover { background:url(../img/btn-left.png) no-repeat 0 bottom;} #cboxNext { background:none; right:0; width: 26px; height: 51px;} #cboxNext:hover { background:url(../img/btn-right.png) no-repeat 0 bottom;} #cboxContent:hover #cboxNext { background:url(../img/btn-right.png) no-repeat 0 0;} #cboxContent:hover #cboxNext:hover { background:url(../img/btn-right.png) no-repeat 0 bottom;}