@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');
/* font-family: 'Alfa Slab One', cursive; 英文寬粗襯線字*/
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);
/* font-family: 'cwTeXHei', sans-serif; 中文黑體字*/
/* font-family: 'Alfa Slab One','cwTeXHei', sans-serif; 英文寬粗襯線字中文黑體字*/

/* reset & for all default --------------------------------------------------------------- */
/*  * { padding: 0; margin: 0; } */
html,body { height: 100%; }
body { background-color: #333; color: #FFF; letter-spacing: 1px;
  font-family: "Helvetica Neue", Helvetica, Arial, STHeiti, "Microsoft JhengHei", 微軟正黑體, sans-serif; }

a:hover { color: #d069fd; text-decoration: none; }

@media (min-width: 768px) { .container { width:90%; max-width:991px; } } /* 992>範圍>=768 */
@media (min-width: 992px) { .container { width:90%; max-width:1199px; } } /* 1200>範圍>=992 */
@media (min-width: 1200px){ .container { width:90%; max-width:1400px; } } /* >=1200 */

/* nav 導覽按鈕區域 ----------------------------------------------------------------------- */
/* .navbar-inverse { background-color: #124d80; border-color: #080808; } */
nav.navbar { margin: 0;  }
a.navbar-brand { height: auto; padding: 5px 15px; }

.navbar-nav>li>a { padding: 24px 15px; text-align: center;
  font-family: 'Alfa Slab One','cwTeXHei', sans-serif; }
.navbar-nav>li>a>.glyphicon { top:3px; margin-right: 2px; }

.navbar-nav>li>.dropdown-menu { border-radius: 0; }

.dropdown-menu { top:100%; }
.dropdown-menu.atpage1 { top:0; transform: translate(0,-100%); }

nav.navbar.affix .dropdown-menu.atpage1 { transform: translate(0); top: 60px; }

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
  color: #262626; text-decoration: none; background-color: #c6c6c6; }

#myNavbar.atpage1 { transform: translate(0,-100%); top: -70px; left: 20px;  
  width: 100%; background-color: #314a7e; position: relative; z-index: 9998; }

nav.navbar.affix { top: 0px; z-index: 9998; width: 100%; 
  -webkit-transition: all 0.5s ease-in-out; height: 70px; /*overflow: hidden;*/
  transition: all 0.5s ease-in-out; 
  background-color: #314a7e; border-color: #101139; }

nav.navbar.affix a { color: #fff !important; padding: 5px !important;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out; }
nav.navbar.affix .dropdown-menu a { padding-left: 46% !important; }

nav.navbar.affix-top { position: static; top: -70px; }

nav.navbar.affix .navbar-brand { padding: 5px!important; }
nav.navbar.affix .navbar-brand img { height: 100%; width: auto; }

@media(min-width:768px){
  .nav>li:hover>ul { display: block; }
  .navbar-nav>li>a { line-height: normal; font-size: 16px; }
  .dropdown-menu a span { display: none; } 
  nav.navbar.affix a { padding: 24px 15px!important; }
  nav.navbar.affix .dropdown-menu a { padding: 3px 20px!important; color: #000000 !important; }
  nav.navbar.affix .dropdown-menu a:hover { background-color: #dedede; color: #000000 !important; }
}
@media(max-width:767px){
  #myNavbar { background-color: #314a7e; transform: translateY(-5px); }
  #myNavbar a { padding: 12px 15px!important; }
}

/* all section 區域 ---------------------------------------------------------------------- */
body>section{ min-height: 100%; position: relative;  }
#section1 { height:90vh; }
/* body>section:not(#section1){ padding: 100px 0 40px; }*/
#section2,#section3,#section4 { padding: 100px 0 40px; }
body>section:nth-of-type(2){ background-image: url(images/dark24.png); }
body>section:nth-of-type(3){ background-image: url(images/dark178.png); }
body>section:nth-of-type(4){ background-image: url(images/dark18.png); }

body>section>h1 { font-family: 'cwTeXHei', sans-serif; font-size: 30px; text-align: center;
  background: url(images/h1bg.png) center no-repeat; margin: 0 0 30px; }

@media screen and (max-width: 1000px) and (min-width: 768px) {
  #section2,#section3,#section4 { padding: 170px 0 40px; }
}

/* #section1 slide 區域 ---------------------------------------------------------------------- */
#myCarousel .item { width: 100vw; height: 100vh; 
  background-size: cover; background-position: center; }
#myCarousel .item:nth-of-type(1) { background-image: url(images/banner/banner1.jpg); }
#myCarousel .item:nth-of-type(2) { background-image: url(images/banner/banner2.jpg); }
#myCarousel .item:nth-of-type(3) { background-image: url(images/banner/banner3.jpg);
  background-position: right center; }
#myCarousel .item:nth-of-type(4) { background-image: url(images/banner/banner4.jpg); }
#myCarousel .item:nth-of-type(5) { background-image: url(images/banner/banner5.jpg); }
#myCarousel .item:nth-of-type(6) { background-image: url(images/banner/banner6.jpg); }
#myCarousel .item:nth-of-type(7) { background-image: url(images/banner/banner7.jpg); }

.carousel-caption { left: 15%; right: 60%; bottom: auto; top: 15%; display: none; }

@media screen and (min-width: 768px){
  .carousel-caption { display: block; }
}

/* #section2 news 區域 ------------------------------------------------------------------- */
#section2 .row { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid #999; }
#section2 .row:last-child { border: none; }
#section2 .col h2 { margin: 20px 0; font-family: 'cwTeXHei', sans-serif; font-size: 24px; }
#section2 .col p { text-align: justify; }
#section2 .col iframe { width: 100%; height: 250px; margin-top: 20px; }
#section2 .col img { width: 100%; height: auto; margin-top: 20px; }

#Parmigiani, .popovertxt { border-bottom: 1px dotted #F0F; color:#F9F; }
#Parmigiani:hover, .popovertxt:hover, .popovertxt:focus { color:#F5F; text-decoration: none; }

#Parmigiani + .tooltip > .tooltip-inner { background-color: #ffff7d; }
#Parmigiani + .tooltip > .tooltip-inner >h2 { background-color: #0a1c80; color: #FFF; font-weight: bold; margin: 10px 0; }
#Parmigiani + .tooltip > .tooltip-inner >h4 { color: #0a1c80; font-weight: bold; font-size: 14px; }

#Parmigiani + .tooltip.bottom > .tooltip-arrow { border-bottom: 15px solid #f2f294; margin-top:-10px; }

.popover.bottom { margin-top: 15px; }
.popover-title { background-color: #9400a0; color: #FFF; text-align:center; padding: 10px; }
.popover-content { background-color: #d67fe2; color: #FFF; padding: 10px; }
.popover.bottom>.arrow:after { border-width: 15px; margin-top: -20px; }
#section2 .popover h2, .popover h4 { padding: 0; margin: 0; }
#section2 .popover h2 {  font-size: 16px; }
#section2 .popover h4 {  font-size: 13px; }

.nav-pills li a { padding: 5px; display: inline-block; }
.nav-pills li a:hover { background-color: transparent; }

.nav-pills.affix { top: 100px; z-index: 9997; }

@media(min-width:768px){  #section2 .row { border: none; }  }
@media(max-width:767px){  
  #section2 .nav-pills { margin-left: -30px; }  
  #section2 .nav-pills li a .fa { font-size: 30px; }
}

/* #section3 與 #section4 內的 tabs 區域 -------------------------------------------------- */
.nav-tabs { text-align: center; }
.nav-tabs li  { display: inline-block; float: none; }

.nav-tabs>li>a { font-family: 'Alfa Slab One','cwTeXHei', sans-serif; color: #999; }
.nav-tabs>li>a:hover { background-color: rgba(255, 255, 255, 0.2); border-color: transparent; }

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover, 
#section3 .container-fluid { background-color: #000; color: #FFF; }

/* #section3 區域 ------------------------------------------------------------------- */
#section3 .tab-pane .container-fluid { height: 200px; background-size: cover; background-position: center; }
#section3 .tab-pane:nth-of-type(1) .container-fluid { background-image: url(images/AudemarsPigue/banner.jpg); }
#section3 .tab-pane:nth-of-type(2) .container-fluid { background-image: url(images/Blancpain/banner.jpg); }
#section3 .tab-pane:nth-of-type(3) .container-fluid { background-image: url(images/Longines/banner.jpg); }
#section3 .tab-pane:nth-of-type(4) .container-fluid { background-image: url(images/Omega/banner.jpg); }

#section3 .col img { width: 100%; height: auto; }
#section3 .nav-tabs>li>a>.smallname { display: none; }      

/* 寬度600以下tab上的文字縮短 ------------------------------------ */
@media(max-width:600px){        
  #section3 .nav-tabs>li>a { padding: 8px; }
  #section3 .nav-tabs>li>a>.fullname { display: none; }
  #section3 .nav-tabs>li>a>.smallname { display: inline; }
}

/* 寬度1200以上 .container-fluid 的 banner背景圖區 改變高度 ------ */
@media(min-width:1200px){
  #section3 .tab-pane .container-fluid { height: 300px; }
}
/* 寬度400~767之間內容分2欄 ------------------------------------ */
@media screen and (max-width: 767px) and (min-width: 400px) {
  #section3 .col { width: 50%; }
}

/* #section4 區域 ------------------------------------------------------------------- */
#section4 .nav-tabs a { font-size: 16px; }
#section4 .col { padding: 20px; }
#section4 .col img { width:100%; height: auto; 
  -webkit-transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
#section4 .tab-content { padding: 15px; background-color: #000; }
.scale080 { transform: scale(0.8); opacity: 0.1; }
.scale130 { transform: scale(1.3); opacity: 1.0; box-shadow: 0 0 20px #F00; }

/* 寬度767以下tab上的文字縮短 ------------------------------------ */
@media screen and (max-width: 767px) {
  #section4 .nav-tabs span { display: none; } 
  #section4 .tab-content { padding-bottom: 80px; }
}
/* 寬度501~767之間內容分3欄 -------------------------------------- */
@media screen and (max-width: 767px) and (min-width: 501px) {
  #section4 .col { width: 33.3%; float: left; }
}
/* 寬度351~500之間內容分2欄 -------------------------------------- */
@media screen and (max-width: 500px) and (min-width: 351px) {
  #section4 .col { width: 50%; float: left; }
}
/* 寬度350以下內容分1欄 ------------------------------------------ */
@media screen and (max-width: 350px) {
  #section4 .col { width: 80%; margin: 0 auto; }
}

/* footer 區域 --------------------------------------------------------------------------- */
footer { background-color: #1e2f52; text-align: center; padding: 20px; font-size: 12px;
  position: absolute; left: 0; bottom: 0; width: 100%; }

/* modal -------------------------------------------------------------------------------- */
#myModal { z-index: 9999; }
.modal-content { background-image: url(images/modal_bg_top.png), url(images/modal_bg_bottom.png); 
  background-size: 30% auto;
  background-position: center 30px, right bottom; 
  background-repeat: no-repeat; color: #666; }

.modal-body p { line-height: 1.8em; padding-bottom: 1.5em; }
.modal-footer { border: none; }

@media (min-width:768px) { .modal-content { min-height: 500px; } }