@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------*/
/* Header */


/*----------------------------------------------------------------------*/
/* Key visual */
@media screen and (max-width: 767px) {
#KeyVisual .play_btn::before {
	width:60px; height:60px; margin:-30px 0 0 -30px; border:2px solid #fff; line-height:60px; font-size:18px; 
	}
#KeyVisual .play_btn:hover::before { padding-left:5px; }
}
@media screen and (min-width: 768px) {
#KeyVisual .play_btn::before {
	width:100px; height:100px; margin:-50px 0 0 -50px; border:3px solid #fff; line-height:94px; font-size:32px; 
	}
#KeyVisual .play_btn:hover::before { padding-left:8px; }
}


/*----------------------------------------------------------------------*/
/* 首頁輪播 */
.IndexSlider .text { font-size:1.5em; }
.IndexSlider .textBox { padding:25px; position:absolute; bottom:40px; left:50%; width:85%; max-width:1100px; transform:translate(-50%,0); background:rgba(4,0,0,.7); }
@media screen and (max-width: 767px) {
    .for_desktop { display: none; }    
}
@media screen and (min-width: 768px) {
    .for_mob { display: none; }
}

/* 首頁產品 */
.IndexProduct .textBox { width: 100%; padding: 55px 0 45px; }

/* SOCIAL WALL */
.IndexSW .item { float: left; width: 50%; padding: 0 2%; }


/*----------------------------------------------------------------------*/
/* 表單 */
@media screen and (max-width: 767px) {
.FormGroup, .FromSubGroup { padding:20px 10px 10px; }
.FormGroup .FormTable, FromSubGroup .FormTable { margin-left:-10px; margin-right:-10px; width:auto; }

table.FormTable { border-top:1px solid #e7e7e7; }
table.FormTable , table.FormTable > tbody, table.FormTable > tbody > tr, table.FormTable > tbody > tr > th, table.FormTable > tbody > tr > td { display:block; }
table.FormTable > tbody > tr { padding:10px 10px 4px 10px; border-bottom:1px solid #d4d0cd; }
table.FormTable > tbody > tr > th, .FormTable > tbody > tr > td { border-bottom:0; }
table.FormTable > tbody > tr > th { text-align:left; }

.FormElmt input[type="file"] { width:100%; }
}
@media screen and (min-width: 768px) {
table.FormTable > tbody > tr > th, table.FormTable > tbody > tr > td { border-bottom:1px solid #dddddd; vertical-align:top; }
table.FormTable > tbody > tr:last-child > th, table.FormTable > tbody > tr:last-child > td { border-bottom:0; }
table.FormTable > tbody > tr > th { border-right:1px solid #dddddd; width:150px; padding:15px 15px 15px 6px; text-align:right; }
table.FormTable > tbody > tr > th::after { position:absolute; top:14px; right:0; }
table.FormTable > tbody > tr > th:empty::after { display:none; }
table.FormTable > tbody > tr > td { padding:10px 15px 4px 15px; }
}


/*----------------------------------------------------------------------*/
/* Compare popup box */
.ComparePopupBox { top:60px; }
.ComparePopupBox .cont dd { margin:5px 0; padding-left:32px; }
.ComparePopupBox .cont dd .del { top:0; width:32px; height:32px; }
.ComparePopupBox .cont dd .del span { top:8px; }
.ComparePopupBox .cont dd .del::before, .ComparePopupBox .cont dd .del::after { top:11px; }
.ComparePopupBox .cont { height:calc(100vh - 110px); }


/*----------------------------------------------------------------------*/
/* select_location popup box */
@media screen and (orientation: portrait) {
.select_location .box_wrap { width:500px; height:500px; margin:-250px 0 0 -250px; padding:20px 0; }
.select_location .box_wrap > div { padding:0 30px }
}
@media screen and (orientation: landscape) {
.select_location .box_wrap { width:500px; height:96vh; margin:-48vh 0 0 -250px; padding:20px 0; }
.select_location .box_wrap > div { padding:0 30px }
}


/*----------------------------------------------------------------------*/
/* 內頁 */
#Breadcrumbs, .ToolBar, .ListPicText, .ProductList, .ArtistsList,
.editable_content, .articleTitle, .postdate, .post_info, .inPagination, 
.product_cat_title, .ProductListSlider, .ProductCont, .ProductCompare,
.ArtistsBrief, .ArtistsCont, .ContactUsForm, .RegForm, .dealer_search, .dealer_list { 
	padding-left:20px; padding-right:20px; 
	}
#ContentHeader { margin-bottom:3.125vw; }


/*----------------------------------------------------------------------*/
/* 內頁元素 */
/* 分類下拉 */
.CatTitle h3 { float:left; }
.CatTitle h3 + .cat_select { float:right; }

/* 列表搜尋 */
.ListSearch > div { 
	padding:20px 20px 10px 20px;  
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	border-radius:20px;
	}
.ListSearch > div::before { top:7px; right:3px; width:24px; height:10px; }
.ListSearch > div::after { 
	content:''; display:block; position:absolute; bottom:-1px; left:-1px; width:24px; height:24px; background-color:#e7ded5;
	}
.ListSearch .item { font-size:0.875rem; }
.ListSearch .title { display:none; }
.ListSearch .BtnCommon input { padding-left:20px; padding-right:20px; font-size:0.875rem; }

/* 頁碼 */
#Pagination a { display:none; }
#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last { display:inline-block; }

/* 內頁顯示欄位 */
.content_info ul { display:table; }
.content_info li { display:table-row; }
.content_info li span { display:table-cell; vertical-align:top; padding:5px 0; }
.content_info li span.title { text-align:right; }

/* colorbox */
#colorbox_thum a { width:160px; height:120px; margin:10px; }


/*----------------------------------------------------------------------*/
/* 圖文列表 */
.ListPicText { margin-top:20px; margin-bottom:20px; }
.ListPicText > div { margin-left:-10px; margin-right:-10px; }
.ListPicText .item { padding-left:10px; padding-right:10px; margin-bottom:30px; }
.ListPicText .btn a { line-height:32px; }
.ListPicText .btn a::before { top:3px; }
.ListPicText .btn a::after { top:12px; }

/* list-view */
.ListPicText.list-view.single.staggered .item:nth-child(2n+2) .img { float:right; padding-right:0; padding-left:20px; }
.ListPicText.list-view .img { float:left; width:360px; max-width:50%; padding-right:15px; }

@media screen and (max-width: 799px) {
.ListPicText .title { font-size:1.5rem; }
.ListPicText .date { font-size:0.9375rem; }
.ListPicText .desc { font-size:0.9375rem; }

/* list-view 一律以單欄顯示 */

/* grid-view 一律以兩欄顯示 */
.ListPicText.grid-view .item { float:left; width:50%; }
.ListPicText.grid-view .cont { padding:10px 10px 0 10px; text-align:center; }
}

@media screen and (min-width: 800px) {
.ListPicText .title { font-size:1.5rem; }
.ListPicText .date { font-size:0.9375rem; }
.ListPicText .desc { font-size:0.9375rem; }

/* list-view 一律以單欄顯示 */

/* grid-view 一律以三欄顯示 */
.ListPicText.grid-view .item { float:left; width:33.3333%; }
.ListPicText.grid-view .cont { padding:15px 10px 0 10px; text-align:center; }
}


/*----------------------------------------------------------------------*/
/* 產品列表 */
.product_select { padding-left:20px; padding-right:20px; }

.ProductList { margin-top:20px; margin-bottom:20px; }
.ProductList > div { margin-left:-20px; margin-right:-20px; }
.ProductList .item { float:left; padding-left:20px; padding-right:20px; margin-bottom:30px; }
@media screen and (max-width: 799px) {
.ProductList .item { width:50%;  }
}
@media screen and (min-width: 800px) {
.ProductList .item { width:33.3333%; }
}

/* Slider */
.ProductListSlider .img { float:right; width:50%;  }
.ProductListSlider .cont { position:absolute; top:0; left:0; width:50%; }
.ProductListSlider .cont .text { padding-right:30px; letter-spacing:0.25px; }
@media screen and (max-width: 767px) {
.ProductListSlider .cont .text .title { margin-bottom:10px; font-size:1.5rem; }
.ProductListSlider .cont .text .desc { font-size:1rem; }
}
@media screen and (min-width: 768px) {
.ProductListSlider .cont .text .title { margin-bottom:20px; font-size:2rem; }
.ProductListSlider .cont .text .desc { font-size:1.125rem; }
}


/*----------------------------------------------------------------------*/
/* 產品內頁 */
/* 產品內容頁籤 */
@media screen and (max-width: 767px) {
.ProductCont .tabs { display:none; }
.ProductCont .tab_cont .cont { height:0; transform:scaleY(0); visibility:hidden; opacity:0; overflow:hidden; }
.ProductCont .tab_cont.active .cont { height:auto; transform:scaleY(1); visibility:visible; opacity:1; }
}
@media screen and (min-width: 768px) {
.ProductCont .tab_cont > .title { display:none; }
.ProductCont .tab_cont { height:0; transform:scaleY(0); visibility:hidden; opacity:0; overflow:hidden; }
.ProductCont .tab_cont.active { height:auto; transform:scaleY(1); visibility:visible; opacity:1; overflow:hidden; }
.btn_find_us { display:none; }
}

/* 產品內容頁籤-比較表 */
.ProductCompareTable th:not(:first-child) { width:calc(100% - 100px / 3); }
.ProductCompareTable tr th:first-child { width:100px; }
.compare-table-wrapper .pinned { width:100px; }
div.compare-table-wrapper div.scrollable { margin-left:100px; }


/*----------------------------------------------------------------------*/
/* 藝人列表 */
.artists_select { padding-left:20px; padding-right:20px; }

.ArtistsList { margin-top:30px; margin-bottom:20px; }
.ArtistsList > div { margin-left:-15px; margin-right:-15px; }
.ArtistsList .item { float:left; padding-left:15px; padding-right:15px; margin-bottom:30px; }
.ArtistsList .title { font-size:1.5rem; }
@media screen and (max-width: 767px) {
.ArtistsList .item { width:50%; }
}
@media screen and (min-width: 768px) {
.ArtistsList .item { width:33.3333%; }
}

/* 產品內頁 */
@media screen and (max-width: 767px) {
.ArtistsList.in_product .item { width:33.3333%; }
.ArtistsList.in_product > div { margin-left:-5px; margin-right:-5px; }
.ArtistsList.in_product .item { padding-left:5px; padding-right:5px; }
.ArtistsList.in_product .title { font-size:1.25rem; }
}
@media screen and (min-width: 768px) and (max-width: 899px) {
.ArtistsList.in_product .item { width:33.3333%; }
.ArtistsList.in_product > div { margin-left:-10px; margin-right:-10px; }
.ArtistsList.in_product .item { padding-left:10px; padding-right:10px; }
.ArtistsList.in_product .title { font-size:1.375rem; }
}
@media screen and (min-width: 900px) {
.ArtistsList.in_product .item { width:25%; }
.ArtistsList.in_product > div { margin-left:-10px; margin-right:-10px; }
.ArtistsList.in_product .item { padding-left:10px; padding-right:10px; }
.ArtistsList.in_product .title { font-size:1.25rem; }
}


/*----------------------------------------------------------------------*/
/* 藝人內頁 */
@media screen and (max-width: 767px) {
.ArtistsBrief .img { float:left; width:36%; }
.ArtistsBrief .img > div { padding-bottom:150%; }
.ArtistsBrief .cont { float:right; width:64%; }
.ArtistsBrief .cont h3 { font-size:3rem; }
.ArtistsBrief .cont .quote { font-size:1.25rem; }
.ArtistsBrief .cont .quote { padding:15px 30px; }
.ArtistsBrief .cont .quote::before, .ArtistsBrief .cont .quote::after { font-size:48px; }
	.ArtistsBrief .cont .quote::before { top:-8px; }
	.ArtistsBrief .cont .quote::after { bottom:-26px; }
}
@media screen and (min-width: 768px) {
.ArtistsBrief .img { float:left; width:45%; }
.ArtistsBrief .img > div { padding-bottom:105%; }
.ArtistsBrief .cont { float:right; width:55%; }
.ArtistsBrief .cont h3 { font-size:3rem; }
.ArtistsBrief .cont .quote { font-size:1.375rem; }
.ArtistsBrief .cont .quote { padding:25px 35px; }
.ArtistsBrief .cont .quote::before, .ArtistsBrief .cont .quote::after { font-size:64px; }
	.ArtistsBrief .cont .quote::before { top:-10px; }
	.ArtistsBrief .cont .quote::after { bottom:-34px; }
}

.ArtistsCont .recommend_list .item:nth-child(odd) { padding-right:10px; }
.ArtistsCont .recommend_list .item:nth-child(even) { padding-left:10px; }
.ArtistsCont .recommend_list a:hover .title { color:#a41f35; }

@media screen and (max-width: 767px) {
.ArtistsCont .photo { float:left; width:calc(100% - 250px); padding-right:20px; }
.ArtistsCont .thum a { width:80px; margin-right:10px; margin-bottom:10px; }
.ArtistsCont .video { float:right; width:250px; }
}
@media screen and (min-width: 768px) {
.ArtistsCont .clom_left { float:left; width:calc(100% - 250px); padding-right:4%; }
.ArtistsCont .clom_right { float:right; width:250px; }
.ArtistsCont .thum a { width:50%; margin-bottom:20px; }
.ArtistsCont .thum a:nth-child(odd) { padding-right:10px; }
.ArtistsCont .thum a:nth-child(even) { padding-left:10px; }
}


/*----------------------------------------------------------------------*/
/* 聯絡我們 */
@media screen and (max-width: 767px) {
.ContactUsForm .block.left { float:left; width:50%; padding-right:10px; }
.ContactUsForm .block.right { float:right; width:50%; padding-left:10px; }
.ContactUsForm .msg textarea { height:280px; }
}
@media screen and (min-width: 768px) {
.ContactUsForm .block.left { float:left; width:50%; padding-right:10px; }
.ContactUsForm .block.right { float:right; width:50%; padding-left:10px; }
.ContactUsForm .first_name { float:left; width:50%; padding-right:10px; }
.ContactUsForm .last_name { float:right; width:50%; padding-left:10px; }
.ContactUsForm .msg textarea { height:200px; }
}


/*----------------------------------------------------------------------*/
/* 註冊 */
.RegForm .block.right { margin-top:40px; }
.RegForm .half { float:left; width:50%; padding-right:10px; }
.RegForm .half + .half { float:right; width:50%; padding-left:10px; padding-right:0; }
.RegForm .half + .item:not(.half) { clear:both; }
.RegForm .phone { float:left; width:50%; padding-right:10px; }
.RegForm .mobile { float:right; width:50%; padding-left:10px; padding-right:0; }
.RegForm .dmy select { float:left; width:32%; margin-right:2%; }
.RegForm .dmy select:last-child { margin-right:0; }

/* find product Serial Number popup box */
.find_sn_box .box_wrap { width:96vw; height:96vh; margin:-48vh 0 0 -48vw; padding:20px 0; }
.find_sn_box .box_wrap > div { padding:0 20px }


/*----------------------------------------------------------------------*/
/* Find Us */
@media screen and (max-width: 767px) {
.dealer_map_wraper { display:none; }
.dealer_list { display:block; }
.dealer_list dd:not(.web):not(.go) { padding-right:100px; }
.dealer_list dd.web, .dealer_list dd.go { position:absolute; right:10px; }
	.dealer_list dd.web { top:50px; }
	.dealer_list dd.go { top:80px; }
}
@media screen and (min-width: 768px) {
#dealer_map { height:100vh; }
.dealer_list { display:none; }
}