@charset "UTF-8";

/* ---- css樣式 ---- */

body{  height: 100%;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif; text-align: justify;text-justify:inter-ideograph;letter-spacing: .1em;}
figcaption{display: block;padding: 10px 0 30px;color: #444;font-size: 14px;}
a{ text-decoration: none;}
.container {max-width: 900px;margin: 0 auto;width: 90%;}
.container2{max-width: 1100px;margin: 0 auto;width: 90%;}
.container h1, .container2 h1 {visibility:hidden;}
.container h2, .h1-25{margin: 0 auto;font-size:2.5rem;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;letter-spacing: .1em;line-height: 1.5em;color: #938056;}
.container h1 img, .container h2 img, .container2 h1 img, .h1-25 img{ width:20px; padding-bottom: 5px;}
.container h5, .container2 h5{display:block;max-width: 900px;margin: 0 auto 72px auto;font-size:1.5rem;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;letter-spacing: .1em;color: #333;}
.container h4 {color:#938056; font-size: 1.2em;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;}
.container p, .container2 p, .tabs-text p{font-size:20px;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;line-height: 1.5em;color: #333;}
.list4-p h1{visibility: visible;margin: 0 auto;font-size:2.5rem;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;letter-spacing: .1em;line-height: 1.5em;color: #938056;}
.list4-p p{padding-top: 40px;}
.list4-img {display:block;max-width:700px;margin: 0 auto;}
.wrapper{background-image: url(../images/bg.jpg);}
.wrapper-2{background-image: url(../images/bg2.jpg) ;}
div .svg{display:block; max-width: 1100px; width: 50%; margin:0 auto 20px auto;}

/* ---- video ---- */
.videoWrapper, .video-fb {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 80px;height: 0;}

/*.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}*/
.videoWrapper iframe {position: absolute;top: 2%;left: 10%;width: 80%;height: 80%;}
.video-fb video {position: absolute;top:2%; width: 100%;height: 100%; }
/*
.video-fb-bg{background-color: #000; max-width: 456px; max-height: 350px;padding: 20px 0px;}*/
/* ---- Header ---- */
.tab-header, .mb-header, .list2-header{display: none;}
.web-header{background-position: center center;background-size: cover;background-repeat: no-repeat;height: 850px;position: relative;}
.tab-header, .mb-header, .list-header, .list2-header {background-position: center center;background-size: cover;background-repeat: no-repeat;height: 500px;position: relative;}
#main-header .cta {display: flex;flex-direction: column;align-items: center;justify-content: center;color: #28415e;}
#main-header .cta .splash {display: none;}
#main-header .cta img {margin-bottom: 1em;}
#main-header .cta h1,#main-header .cta p,#main-header .cta .button {text-align: left;}
#main-header .cta h1 {margin: 0;}
#main-header .cta p {margin-bottom: 1.5em;}
#main-header .cta span {  transition: all 0.5s; color: #fff; }
#main-header .cta .scroll-down {
    transition: all 0.5s; border-radius: 50%;border: 2px solid #b79d55;border-radius: 50%;height: 50px;width: 50px;padding-top:7px;margin-left: -15px;text-align: center;
    display: block;position: relative;top:750px;
}
#main-header .cta .scroll-down:hover, #main-header .cta .scroll-down:focus {background: #b79d55;color: #930000;}
#main-header .cta span:hover, #main-header .cta span:focus{color: #930000;}

/* ---- Navigation ---- */
#nav{ width: 100%;margin-bottom: 40px;background: #323232;}
#nav ul li{font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;letter-spacing: .2em;transition: height 0.3s ease;-webkit-transition: height 0.3s ease;color: #BFA142;border-bottom: 1px solid rgba(190,190,190,.2);}
#nav a:hover {color: #fff;}
ul{ padding: 0; margin: 0;overflow: hidden;color: #fff;text-align: center;-webkit-transition: max-height 0.5s;transition: max-height 0.5s;}
.nav-item{display: inline-block;padding: 18px;font-size: 1.4em;-webkit-transition: background .5s;transition: background .5s}
.nav-item:hover{background: #474747;cursor: pointer;}
.menu-bar{width: 100%;background: #2d2d2d;text-align: left;padding: 15px 20px;color: #BFA142;font-size: 1.4em;cursor: pointer;display: none;letter-spacing: .3em;}
.hamburger-icon{float: right;clear: both;margin-top: -5px;font-size: 1.4em;}

/* @720px */
@media only screen and (max-width: 55em){nav img{display: none;} nav ul{ max-height: 0; }nav ul li{font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;font-weight:400 !important;}.reveal{ max-height:19em; }nav ul .nav-item{width:100%; padding: 15px; }.menu-bar{ display: block; }}
@media only screen and (max-width: 480px){.nav-item{ font-size: 1.2em; }}

/* ---- content ---- */
.item-text {padding-bottom: 3.5rem;}
.item-text h2{/font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;font-weight: 400; font-size: 1.75em;border-bottom:1px solid #D4C4A0;color: #938056;}
.item-text p{padding-top: 20px;}
.fade-in{animation: fadein .5s;-moz-animation: fadein .5s; /* Firefox */-webkit-animation: fadein .5s; /* Safari and Chrome */-o-animation: fadein .5s; /* Opera */}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


/* ---- 拍立得角度 ---- */
ul.polaroids-box li:nth-child(even) {-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);transform: rotate(2deg);}
ul.polaroids-box li:nth-child(3n)  {-webkit-transform: none;-moz-transform: none;transform: none;position: relative; top: -5px;}
ul.polaroids-box li:nth-child(5n)  {-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);transform: rotate(2deg);position: relative;right: 3px;}
ul.polaroids-box li:nth-child(8n)  { position: relative;top: 8px;right: 5px;}
ul.polaroids-box li:nth-child(11n)  {position: relative;top: 3px;left: -5px;}
ul.polaroids-box .p1{-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);transform: rotate(-2deg);}
ul.polaroids-box .p10{-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);transform: rotate(2deg);position: relative; top: 10px;}
ul.polaroids-box .p11{-webkit-transform: rotate(-2deg);-moz-transform: rotate(-2deg);transform: rotate(-2deg);position: relative; top: 10px;}

ul.polaroids-box li:hover {
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  position: relative;
  z-index: 5;
}
ul.polaroids-box li {
  -webkit-transition: all .15s linear;
  -ms-transition: all .15s linear;
  -o-transition: all .15s linear;
  transition: all .15s linear;
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
}
 
/* 寫真日記 */
.mb-caption{display: none;}
.list2-caption{display: block;}
#Grid {margin-bottom: 40px;text-align: justify;font-size: 0.1px;position: relative;}
#Grid li {display: inline-block;margin: 0 15px 80px 15px;background: #fff;width: 45%;padding:25px;color: #333;text-align: left;}
#Grid li img {width: 100%;}
#Grid:after {content: "";display: inline-block; width: 100%;}
#Grid .placeholder {padding: 0;}
@media screen and (max-width: 992px) {#Grid li { width: 45%;}}
@media screen and (max-width: 770px) {#Grid{margin:6%;}#Grid li { width: 100%;margin: 0 15px 80px 8px;}}
ul.polaroids-box h3, .mb-caption h3{padding-top: 1em;font-size: 23px;color: #917640;border-bottom: .5px solid #917640;/*border-bottom: 1.5px dotted #917640;*/font-weight: 600;}
.mb-caption p{ font-size: 23px;color: #917640;font-weight: 400;}
ul.polaroids-box p{font-size: 20px;line-height: 1.4em; padding-top: 10px;}
/*.list2-caption span {font-family: 'Roboto', sans-serif;}*/
/* 膠帶*/
.p1:before, .p2:before, .p3:before, .p4:before, .p5:before, 
.p6:before, .p8:before, .p9:before, .p10:before, .p11:before {
  content: "";
  display: block;
  width: 120px;
  height: 30px;
  position: relative;
  top: 20px;
  margin: auto;
  background: rgba(255,255,200,0.6);
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

.p2:before, .p5:before, .p10:before{position: absolute; top: -15px; left: 160px;}
.p1:before, .p3:before, .p8:before{left: -25px;width: 145px;-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);transform: rotate(-35deg);position: absolute; top: 20px;}
.p4:before, .p6:before {right: -30px; -webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg); position: absolute; top: 20px; width: 145px;}
.p9:before, .p11:before {left: -25px;width: 30px;height: 100px;position: absolute;top: 50%;margin-top: -50px;-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);}

/* 百萬專輯 */
ul.tabs { display: inline-block;margin: 0 auto ;background: transparent;padding-bottom: 30px;font-size:2rem;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;font-weight: 400;letter-spacing:.1em;color: #938056;list-style: none;width: 100%;}
.tabs img{ float: left;width: 20px;position: relative;top: 25px;}
ul.tabs li {float: left;margin:  0px 25px;cursor: pointer;padding: 18px 28px;line-height: 31px;background-color: transparent;color: #938056;overflow: hidden;position: relative;transition:all 0.5s;}
ul.tabs li:hover {color: #707070;}
ul.tabs li.active {color: #938056;display: block;border: 1px solid #938056;}
.tab_container {border-top: none;clear: both;float: left;  width: 100%;}
.tab_content {padding: 20px;display: none;}
.tab_container hr{border-top: 1.5px dotted #938056;margin: 60px 0px;}
.tab_drawer_heading {display: none; }

.rwd-table {
  width: 90%;
  margin:0 auto 110px auto;
  color: #333;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  background: #fff;
}
.rwd-table th, .rwd-table td { border-right: 1px solid #e0e0e0;}
.rwd-table th:last-child, .rwd-table td:last-child, table .th-4 { border-right: none;}
.rwd-table .tr-1 td{ border:none; padding: 10px;}

table caption{
  text-transform: uppercase;
  background: #63170C;
  border-top: 1px solid #858d99;
  color:#ffffff;
  font-size:1.6rem;letter-spacing: .2em;
  -webkit-border-radius: 25px 25px 0 0;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
thead {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
thead th {font-size: 16px;font-weight: 400;color: #990000;text-align: left;padding: 15px;border-bottom: 1px solid #e0e0e0;}
tbody tr{border-right:1px solid #333; background: #f0f3f5;}
tbody tr td {font-weight: 400;color: #5f6062;font-size: 16px;padding: 15px;border-bottom: 1px solid #e0e0e0;}
tbody tr:nth-child(2n) {background: #fff;}
tbody tr:last-child td {border-bottom: none;}
tbody tr:last-child td:first-child {-moz-border-radius-bottomleft: 5px;-webkit-border-bottom-left-radius: 5px;border-bottom-left-radius: 5px;}
tbody tr:last-child td:last-child {-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;}
tbody:hover > tr td {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity: 0.5;}
tbody:hover > tr:hover td {text-shadow: none;color: #2d2d2d;filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);opacity: 1;}
thead .th-4{display: block;}
thead .th-5{display: none;}

@media screen and (max-width: 450px) {
.rwd-table {width: 100%;}
table caption{font-size: 1.5rem;letter-spacing: 1.3px;}
tbody tr td {padding: 20px 5px 20px 5px;font-size: 13px;text-align: left;}
tbody tr td:first-child{padding: 20px;}
thead .th-4{display: none;}
thead .th-5{display: block; font-size: 15px;}
thead th{padding: 15px 5px;text-align: center;}
thead .tr-1 {border-collapse:collapse}
}
/* -- 頁簽內容 -- */
.tabs-card {transition: height 0.3s ease;-webkit-transition: height 0.3s ease;border-radius: 3px;margin: 0 auto 1.6%;overflow: hidden; position: relative;font-size: 14px;line-height: 1.45em;}
.tabs-card .description {padding: 10px 0px;position: relative;}
.tabs-card img{width: 250px;border: 1px solid #938056;}
.tabs-card span{font-size:1.6rem;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;font-weight: 400;color: #938056;}
.tab_content .video-name{font-size:1.6rem;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;color:#938056;text-align: center;}
.tabs-card h2 {font-size:1.8rem;font-family: "Noto Sans CJK TC","Microsoft JhengHei", '微軟正黑體', sans-serif;font-weight: 600;letter-spacing:.1em;color: #938056;padding: 10px;line-height: 30px;text-align: left;}
.tabs-card h2 img{border: none; position: relative;top: 6px; width: 34px;margin-right: 10px;}
.tabs-card .description { position: relative; margin: 0;padding-top: 20px;}
/* -- 百萬影音 -- */
#headset{width: 35px;position: relative;top: 10px;}
.tabs-video{padding-top: 60px;}
.tabs-video p{padding-top: 20px;text-align: left;}
.tabs-video .videoWrapper{margin: 2% 0px -5% 0px;}

/* -- list3 --*/
@media screen and (min-width: 600px) {
  .tabs-card.alt .tabs-img {float: right;}
  .tabs-card .tabs-img {transition: all 0.5s ease;-webkit-transition: all 0.5s ease;float: left;height: 100%;padding-right: 65px}
  .tabs-card .description {float: left;width: 60%;z-index: 0;}
}

@media screen and (max-width: 1024px) {ul.tabs li{ padding: 18px;}}
@media screen and (max-width: 920px) { ul.tabs{font-size: 1.8rem;}.tabs img{width:15px;  position: relative;top: 20px;} ul.tabs li{margin:0 19px;padding: 10px;}.tabs-card .description {width: 50%;padding-top: 15px;}}
@media screen and (max-width: 850px) {.tabs-card .description {width: 45%;}}
@media screen and (max-width: 720px) { ul.tabs li{margin:0 5px;font-size: 1.6rem;}.tab_container .tabs-img{width: 50%; padding: 10px 10px 20px 0px;}.tabs-card .description {width: 100%;text-align: left;}.tabs-card img{width:100%;}
@media screen and (max-width: 600px) {
 
  .tab_drawer_heading {
    background-color: transparent;
    border: 1px solid #938056;
    margin: 0;
    padding: 5px 20px;
    display: none;
    cursor: pointer;
    /*font-family: 'Noto Serif CJK TC' ,sans-serif;*/
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing:.1em;
    color: #938056;
    text-align: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .d_active {
    background-color:  #938056;
    color: #fff;
  }
}
@media screen and (max-width: 450px) {
  .container h2{font-size: 2rem;}
  .tab_content .video-name{font-size: 1.4rem;text-align: left;}
  .tabs-card span, .tabs-card h2 {font-size:22px;padding: 0px;}
  #headset {width: 30px; position: relative;top: 5px;}
}}

/* ---- top ---- */
.top{
    position: fixed;bottom: 20px;right: 20px;
    background: rgb(76, 20, 10);background: rgba(76, 20, 10, 0.7);
    width: 40px;height: 40px;display: block;
    text-decoration: none;-webkit-border-radius: 35px;-moz-border-radius: 35px;border-radius: 30px;
    display: none;-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;
}
.top i{color: #fff;margin: 0;position: relative;left: 10px;top: 5px;font-size: 30px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.top:hover{background: rgba(76, 20, 10, 0.9);}
.top:hover i{color: #fff;top: 2px;}
/* --media query-- */
@media screen and (max-width: 980px){#main-header {height: 500px;}.web-header, .list-header {display: none;}    .tab-header, .list2-header {display: block;}#main-header .cta .scroll-down {top:430px}}
@media screen and (max-width: 500px){.tab_container hr {margin: 45px 0px;}.tabs img { top: 14px;}ul.tabs li {padding: 5px;}.tab-header, .list2-header {display: none;}.mb-header {display: block; height:500px ;} #Grid li{padding: 15px} .caption .mb-caption{display: block;} .caption .list2-caption{display: none;}} 
@media (min-width: 500px) { #main-header .cta .splash {display: block; width: 200px;}}
@media screen and (max-width: 800px) {div .svg{ width: 80%;}  .container .h1-25 {font-size:2rem;}}
@media screen and (max-width: 650px) {.container .h1-25 {font-size:1.5rem;}.container h1 img{ width:20px; padding-bottom: 0px;}.container h1{font-size: 1.7rem;}.rwd-table td {font-size: 13px;}}
@media screen and (max-width: 450px) {ul.tabs { padding-bottom: 0px; }ul.tabs li { padding: 4px;font-size: 1.5rem;}.tabs img {width: 8px;}}
@media screen and (max-width: 400px) {ul.tabs li { padding: 2px;font-size: 1.2rem;}div .svg{ width: 100%;} .container p, .tabs-text p{font-size:18px;line-height: 1.48em;text-align: left;} ul.polaroids-box p{font-size:18px;}.container h5, .container2 h5{font-size:20px;}.tabs-card h2 img{display: none;}
ul.polaroids-box h3, .mb-caption h3 {font-size: 20px;}.polaroids-box .p2:before, .polaroids-box .p5:before, .polaroids-box .p10:before {position: absolute;top: -18px;left: 90px;}}
@media screen and (max-width: 330px) {ul.tabs li {font-size: 1rem;}.tab_content .video-name {font-size: 1.25rem;}}