charset "utf-8";
/* CSS Document */

* {
	font-family: 微軟正黑體, Microsoft JhengHei, sans-serif, Arial, Helvetica;
}
body, h1, h2, h3, h4, h5, h6, a, p, select {
	font-family: 微軟正黑體, Microsoft JhengHei, sans-serif, Arial, Helvetica;
}
strong {
	font-size: inherit;
	color: inherit;
	font-weight: bolder;
}
span {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}
sup { 
    vertical-align: super;
    font-size: smaller;
}
/*文字反選顏色*/
::-moz-selection {
	background: #002e54;
	color: #FFFFFF;
}
::selection {
	background: #002e54;
	color: #FFFFFF;
}


html {
	height: 100%;
	margin: 0;
}
body {
	margin: 0;
	min-height: 100%;
	width: 100%;
}

/*清除格式*/
.CleanFormat {
	clear: both;
}
article::after {
	content:"";
	display:block;
	clear: both;
}
/*分隔線*/
.Dividers {
	margin: 10px auto;
	width: 100%;
	height: 1px;
	border-bottom: 1px dotted #373b80;
}

/*-------------------------WebStart-----------------------*/
#wrap {
    position: relative;
}
/*-------------------------Header-----------------------*/
header {
	position:fixed;
	top:0;
	left:0;
	z-index:99;
	width:100%;
	height: 80px;
    /*background: #ffffff;*/
	transition: .5s;
}
/*----Logo----*/
#logo {
    position: absolute;
    top: 15px;
    left: 70px;
}
div#logo img {
    height: 50px;
    width: auto;
}

/*----Menu----*/
#Menu {

}
.menuBtn {
	display: none;
	width: auto;
    height: 60%;
    position: absolute;
    top: 20%;
    left: 10px;
	transition: .5s;
}
.menuBtn img {
	width: auto;
	height: 100%;
	display: block;
}
nav {
	position: absolute;
    right: 0;
	top:22px;
    width: 1050px;
}
nav > ul {
    font-size: 0;
    text-align: right;
    padding-right: 50px;
}
nav > ul > li {
    padding: 5px 0;
    height: 24px;
    margin: 0 10px;
    display: inline-block;
}
nav > ul > li > a {
	color:#ffffff;
	font-size:18px;
	line-height:24px;
	text-shadow: 0 0 1px #909090;
	transition: .5s;
}
nav > ul > li.active a, nav > ul > li:hover a {
	text-decoration: underline;
	transition: .5s;
}
/*----右側的線----*/
.whtieLine {
    width: 1px;
    right: 100px;
    position: fixed;
    background: rgba(255, 255, 255, .5);
    z-index: 99;
}
.topline {
	top:5px;
	height:60px;
}
.bodyline {
	top:100px;
	height:calc(100% - 220px);
}
.bottomline {
	bottom:0;
	height:30px;
}
#goBooking {
    width: 100px;
    height: 65px;
    text-align: center;
    position: fixed;
    right: 50px;
    bottom: 45px;
    z-index: 99;
    /*box-shadow: 0px 0px 5px 0px;*/
	/*opacity: .7;*/
}
#goBooking a {
    width: 100%;
    height: calc(100% - 15px);
    background: rgba(255, 255, 255, .7);
    display: block;
    color: #002e54;
    font-size: 20px;
    line-height: 25px;
    padding: 7.5px 0;
}
/*-------------------BODY 預設-----------------------*/
article {
	position:relative;
}

section {
	position:relative;
}
/*--文章內容--*/
.PageContent {

}

/*--自適應文章內容--*/
.PageContent img, .PageContent table, .PageContent div, .PageContent p {
	max-width:100% !important;
	height:auto !important;
}
.PageContent iframe {
	max-width:100% !important;
}
/*-------------------------FOOTER-----------------------*/
footer {
	background: #003051;
	padding: 35px 0;
	text-align: center;
	color: #ffffff;
	font-size: 18px;
}
footer p {
	font-size: 18px;
}
/*--------分享按鈕---------*/
.line-it-button {
	display: inline-block;
    vertical-align: middle;
}


/*------------------------內容開始---------------------------*/
/**Banner設定**/
.bannerM, .bannerP {
	display: none !important;
}
.blockImg {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:block;
}
.bannerBlock, .bannerBlock div {
	width:100%;
	font-size:0;
}

/**KOL的文章**/
#KolPoint, #KolLine, #KolFace {
	height:950px;
}
.paperList, .paperList li {
	width:100%;
	height:100%;
	position:relative;
}
.paperList {
	overflow:hidden;
	white-space: nowrap;
	font-size: 0;
}
.paperList li {
	display:inline-block;
	word-wrap: break-word;
    white-space: normal;
}
.KOLPhoto {
	display: none;
}
.KOLPhoto img {
	display: block;
	width: 100%;
	height: auto;
}
.paperTXT {
    width: 840px;
    /*height: 530px;*/
    overflow: auto;
    position: absolute;
    top: 230px;
    left: 11.5%;
}
.paperTitle {
    margin-bottom: 33px;
}
.paperTitle h2 {
    color: #002e54;
    font-size: 46px;
    font-weight: bold;
    line-height: 46px;
}
.paperContent {
    height: 445px;
    overflow: auto;
    padding-right: 40px;
	text-align: justify;
	text-justify:inter-ideograph;
	margin-bottom:20px;
}
.paperContent p {
    font-size: 18px;
    color: #002e54;
    margin-bottom: 30px;
    line-height: 35px;
}
.AuthorName {
	font-size:28px;
	color: #002e54;
	font-weight:bold;
	text-align:right;
	padding-right:30px;
	margin-bottom:20px;
}
.AuthorName span {
	height:2px;
	width:30px;
	display:inline-block;
	vertical-align:middle;
	background:#002e54;
	margin-right:10px;
}
.OtherAuthor {
	text-align:right;
	padding-right:30px;
}
.OtherAuthor span, .OtherAuthor span img {
	vertical-align:middle;
	display: inline-block;
}
.OtherAuthor a span.P1Name {
	color:#808080;
	text-decoration:underline;
	font-size:28px;
	font-weight:bold;
}
span.P1Name {
	margin-left:10px;
}
/*scrollbar設定*/
.paperContent, .watchInfoBlock p {
	scrollbar-3dlight-color: #caccd1;
  scrollbar-base-color: #caccd1;
  scrollbar-track-color: #caccd1;
  scrollbar-highlight-color: #caccd1;
  scrollbar-arrow-color: #caccd1;
  scrollbar-face-color: #a2adb9;
  /*
  
  
  scrollbar-shadow-color: #000;
  scrollbar-dark-shadow-color: #000;*/
  scrollber-width:5px;
}
.paperContent::-webkit-scrollbar, .watchInfoBlock p::-webkit-scrollbar {
    width: 5px;
}
 
.paperContent::-webkit-scrollbar-track, .watchInfoBlock p::-webkit-scrollbar-track {
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
	background: #caccd1;
}
 
.paperContent::-webkit-scrollbar-thumb, .watchInfoBlock p::-webkit-scrollbar-thumb {
  background-color: #a2adb9;
  /*outline: 1px solid slategrey;*/
}

/**影片區**/
#Video {
	position: relative;
}
#Video img {
	display: block;
	width: 100%;
	height: auto;
}
#Video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/**錶款鑑賞**/
.WatchTitle {
	height:150px;
	text-align:center;
	font-size:44px;
	color:#002e54;
	line-height:150px;
}
.watchSystem > li {
	height:520px;
	padding:65px 0;
	position:relative;
}
.Watchlist li img {
	display:block;
	margin:0 auto;
	width: 100%;
	max-width: 347px;
	height: auto;
}
.watchInfoBlock {
	width:550px;
	color:#002e54;
	text-align: justify;
	text-justify:inter-ideograph;
	position:absolute;
	top:100px;
	left:180px;
}
.watchInfoBlock h2 {
	text-align:center;
	font-weight:bold;
	font-size:32px;
}
.watchInfoBlock h3 {
	text-align:center;
	font-weight:normal;
	font-size:32px;
}
.watchInfoBlock p {
	font-size: 18px;
    color: #002e54;
    margin-bottom: 30px;
    line-height: 35px;
	height: auto;
	max-height: 360px;
    overflow: auto;
	padding-right: 10px;
}

.InfoLink, .InfoLink a {
	text-align: center;
	font-size: 18px;
	color: #808080;
	line-height: 30px;
	text-decoration: underline;
}
.FiveTitle {
	text-align: center;
	font-size:24px;
	font-weight:bold;
	color: #002e54;
	margin-bottom: 30px;
	font-family: 微軟正黑體, Microsoft JhengHei, sans-serif, Arial, Helvetica;
}
.pointT {
	font-size:18px;
	font-weight:bold;
	display: block;
    padding: 5px 0;
	color: #002e54;
	font-family: 微軟正黑體, Microsoft JhengHei, sans-serif, Arial, Helvetica;
}
.FivePointContent p {
	font-size:18px;
	line-height:30px;
	color: #002e54;
	margin-bottom: 30px;
}


/**預約鑑賞**/
#bookingform {
	padding-bottom: 60px;
}
/*-裝飾線-*/
.BlueLine {
	width: 1px;
	background: #002e54;
}
.lineOne {
	height: 80px;
	margin: 0 auto 30px;
}
.lineTwo {
	height: 80px;
	margin: 0 auto;
}
.ActDate {
	text-align: center;
	margin-bottom: 80px;
}
.ActDate img {
	width: 95%;
	max-width: 366px;
	height: auto;
}
.ActStep {
	text-align: center;
	margin-bottom: 55px;
}
.ActStep li {
	display: inline-block;
	width: 300px;
	margin: 0 60px;
}

.giftBlock {
	width: 100%;
	max-width: 800px;
	margin: 0 auto 100px;
	font-size: 0;
}
.giftImg {
	width: 270px;
	height: 400px;
	border: 1px solid #c5cfd8;
	position: relative;
	display: inline-block;
	margin-right: 88px;
}
.giftImg img {
	position: absolute;
	top: 25px;
	left: 30px;
}
.giftInfoTitle {
    margin-bottom: 30px;
}
.giftInfoTitle img {
    width: 100%;
    max-width: 440px;
    height: auto;
}
.giftInfo {
	width: 440px;
	padding-top: 70px;
	display: inline-block;
	vertical-align: top;
}

.giftInfoTxt {
	color: #002e54;
	padding-left: 70px;
}
.giftInfoTxt p {
	font-size: 18px;
	line-height: 30px;
}

.GiftTxt {
	color: #002e54;
	text-align: center;
	font-size: 18px;
	margin-bottom: 30px;
}
.GiftTxt a {
	color: #002e54;
	text-decoration: underline;
	font-size: 18px;
	vertical-align: text-bottom;
}
.GiftTxt label {
	color: #002e54;
	font-size: 18px;
	vertical-align: middle;
}
.GiftTxt input {
	vertical-align: middle;
}

.SendBtnBlock {
	text-align: center;
}
.SendBtn {
	background: #003051;
	color: #ffffff;
	font-size: 40px;
	height: 70px;
	width: 300px;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
}

/*----------表單樣式設定----------------*/
#formBlock {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.formWrite {
	margin-bottom: 30px;
	font-size: 0;
}
.formTitle {
    border-bottom: 1px solid #808080;
    vertical-align: bottom;
    display: inline-block;
    font-size: 18px;
    width: 20%;
    text-align: center;
    line-height: 60px;
    color: #5b5b5b;
}
.pretty-select {
	vertical-align: bottom;
  	/*移除箭頭樣式*/
  	appearance:none;
  	-moz-appearance:none;
  	-webkit-appearance:none;

  	/*改變右邊箭頭樣式*/
  	background:url(../images/triangle.png) no-repeat right center transparent;
  	
	cursor: pointer;
  	border:0px;
	border-bottom: 1px solid #808080;
  	width:80%;
  	height:60px;
	font-size: 18px;
  	padding-left:20px;
  	padding-right:20px;
  	background-color:#F6F7F7;
  	color:#9b9b9b;
	-webkit-appearance: none;
}

/*IE隱藏箭頭樣式*/
.pretty-select::-ms-expand { 
  display: none; 
}

.pretty-select:focus{
  /*box-shadow: 0 0 5px 2px #467BF4;   */ 
}


ul.formStoreGroup {
    font-size: 0;
}
ul.formStoreGroup li {
    display: inline-block;
    width: 48%;
    margin: 1%;
    vertical-align: top;
}
ul.formStoreGroup label {
    font-size: 18px;
    font-weight: bold;
    color: #002e54;
	cursor: pointer;
}
ul.formStoreGroup input {
    width: 20px;
}
.StoreAdd {
    padding-left: 20px;
    font-size: 18px;
    color: #808080;
}

.formWrite input[type="text"] {
    width: calc(80% - 40px);
    padding: 0 20px;
    display: inline-block;
    border: 0;
    border-bottom: 1px solid #808080;
    height: 60px;
    line-height: 60px;
    color: #9b9b9b;
	font-size: 18px;
}


/**Facebook分享頁面**/
.SendComplete {
	position: fixed;
	height: 100%;
	width: 100%;
	background: rgba(0,0,0,.80);
	z-index: 1000;
	top: 0;
	left: 0;
}

.facebookBlock {
	width: 95%;
	max-width: 1330px;
	height: 95%;
	max-height: 750px;
	background: url(../images/fb_bg.png) bottom center no-repeat, #ffffff;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
}
#closeFB {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 40px;
	height: 40px;
}
#closeFB img {
	display: block;
}
.fbOKImg {
	margin-top: 10%;
	width: 98%;
	max-width: 490px;
	height: auto;
	margin-bottom: 20px;
}
.fbTxt {
    width: 95%;
    margin: 0 auto 10%;
}
.fbTxt p {
	font-size: 18px;
	color: #808080;
}

.FacebookShare img {
	vertical-align: middle;
}
.FacebookShare span {
	font-size: 18px;
	font-weight: bold;
	color: #002e54;
	vertical-align: middle;
	text-decoration: underline;
}

/*-------------FancyBox內容基本設定-------------*/
.fancybox-content {
	max-width:1000px !important;
}
.fancybox-content::after {
	content:"";
	display:block;
	clear:both;
}



/*-----自適應修改-----*/
@media only screen and (max-width: 1800px) {
.paperTXT {
    width: 45%;
    left: 5%;
}
.watchInfoBlock {
    width: 30%;
    left: 5%;
}
}
@media only screen and (max-width: 1590px) {
.watchSystem > li {
	background-position: right -160px top 0 !important;
}
}
@media only screen and (max-width: 1427px) {
.watchInfoBlock h2 {
    font-size: 28px;
}
.watchInfoBlock h3 {
    font-size: 26px;
}
	
.watchInfoBlock {
    top: 50px;
}
}
@media only screen and (max-width: 1400px) {
nav > ul {
    text-align: right;
    padding-right: 20px;
}
nav > ul > li > a {
    font-size: 18px;
}
.whtieLine {
    right: 50px;
}
#goBooking {
    right: 0px;
}
.paperList li {
    background-position: left 0px bottom 0, right -200px top 0px !important;
    background-size: 80% auto, auto !important;
}
}
@media only screen and (max-width: 1285px) {
.ActStep li {
    margin: 0 2em;
}
}
/*--行動版選單--*/
@media only screen and (max-width: 1230px) {
header {
    background: #ffffff;
	padding: 10px 0;
    height: auto;
	text-align: center;
}

.menuBtn {
	display: block;
	transition: .5s;
}
nav {
    top:auto;
    width: 100%;
	overflow: hidden;
	transition: .5s;
	height: 0;
}
nav > ul {
    text-align: center;
    padding-right: 0;
}
nav > ul > li {
    width: 100%;
    display: block;
    text-align: center;
    margin: 0;
	background: #ffffff;
	padding: 0;
	height: auto;
}
nav > ul > li:nth-child(odd){
	background-color:#dfe0e1;
}
nav > ul > li.active, nav > ul > li:hover {
    border-bottom: none;
}
nav > ul > li a {
	color: #002e54;
	display: block;
	width: 100%;
	padding: 10px 0;
	transition: .5s;
}
nav > ul > li.active a, nav > ul > li:hover a {
	background: #002e54;
    color: #ffffff !important;
    text-decoration: none;
}
#logo {
    position: relative;
    width: 40%;
    top: 0;
    left: 0;
    display: block;
    margin: 0 auto;
}
div#logo img {
    width: 100%;
    max-width: 150px;
    height: auto;
	display: block;
	margin: 0 auto;
}
.whtieLine {
	display: none;
}
#goBooking {
    right: 10px;
    bottom: auto;
    top: 0px;
    z-index: 100;
    opacity: 1;
    height: auto;
    width: auto;
	box-shadow: none;
}
#goBooking a {
    width: calc(100% - 10px);
    font-size: 16px;
    line-height: 20px;
    padding: 7.5px 5px;
}
.lineOne {
    height: 0px;
}
}
@media only screen and (max-width: 1100px) {
.bannerT {
	display: none !important;
}
.bannerP {
	display: block !important;
}
	
.watchSystem > li {
    background: none !important;
    height: auto;
    padding: 10px 0;
}
.watchInfoBlock {
    top: auto;
    display: block;
    position: relative;
    width: 90%;
    left: auto;
    padding: 0 5%;
}
.watchInfoBlock p {
    height: auto;
    overflow: inherit;
	max-height: none;
    padding-right: 0;
}
.paperTitle h2 {
    font-size: 38px;
}
}
@media only screen and (max-width: 1092px) {
.ActStep li {
    margin: 10px;
}
}
@media only screen and (max-width: 960px) {
.gifTxtMvison {
    text-align: left;
    padding: 0 20px;
    word-break: break-all;
}
}
@media only screen and (max-width: 920px) {
.ActStep li {
    margin: 10px;
}
}
@media only screen and (max-width: 830px) {
.giftImg {
    display: block;
    margin: 0 auto;
}
.giftInfo {
    width: 95%;
    max-width: 440px;
    padding-top: 70px;
    display: block;
    margin: 0 auto;
}
.BlueLine {
    width: 1px;
    background: none;
}
	
#KolPoint, #KolLine, #KolFace {
	height: auto;
}
	#KolPoint, #KolFace {
		background: #C1C2C3;
	}
.paperList li {
    padding-bottom: 50px;
	background-size: 100% auto, 0 0 !important;
}
.KOLPhoto {
    display: block;
    margin-bottom: 50px;
}
.paperTXT {
    width: 90%;
    margin: 0 5%;
    position: relative;
    top: auto;
    left: auto;
}
.paperTitle {
    margin-bottom: 20px;
	height: 80px;
}
.paperTitle h2 {
    font-size: 26px;
	line-height: 40px;
}
.paperContent {
    height: 380px;
    padding-right: 10px;
}
.paperContent p {
    margin-bottom: 20px;
}
.AuthorName {
    padding-right: 0;
}
.OtherAuthor {
    padding-right: 0;
}
}
@media only screen and (max-width: 750px) {
.bannerP {
	display: none !important;
}
.bannerM {
	display: block !important;
}	
}
@media only screen and (max-width: 725px) {
ul.formStoreGroup li {
    display: block;
    width: 90%;
    margin: 0;
    vertical-align:inherit;
    padding: 5px 5%;
}
	
.formWrite {
    width: 95%;
    margin: 0 auto 20px;
}
}
@media only screen and (max-width: 450px) {
.FiveTitle {
    font-size: 22px;
}
	
#goBooking {
    right: 5px;
    top: 0px;
}
#goBooking a {
    width: calc(100% - 8px);
    font-size: 14px;
    padding: 5px 4px;
}
}
@media only screen and (max-width: 400px) {
.formTitle {
    width: 30%;
}
.pretty-select {
    width: 70%;
}
.formWrite input[type="text"] {
    width: calc(70% - 40px);
}
}
@media only screen and (max-width: 380px) {
.giftImg img {
    top: 10px;
    left: 10px;
}
.ActStep li {
    margin: 10px 0;
    width: 95%;
}
.ActStep li img {
    width: 100%;
	height: auto;
}
}