@charset "UTF-8";
.requireStar { font-weight: bold; position: relative; top: 2px; margin-right: 2px; display: inline-block; }

button:focus { outline: none !important; }

.is-short { display: none; }

@media (max-width: 991px) and (orientation: landscape) { /* .modal.fade .modal-dialog { margin: 5vh auto; } hubert*/
  #nine_modal .modal.fade .modal-dialog { margin: 0 auto; }
  .reel { max-height: 70vh; overflow-y: auto; } }
   
.modal-title > img { vertical-align: text-top; margin-right: 5px; }

#authFail .modal-dialog p { line-height: 1em; padding-left: 0; padding-right: 0; }

#authFailAgain .modal-dialog .modal-body { margin-top: 20px; padding-bottom: 0; }

.registerDialog__restxt { line-height: 1.5em; }
.registerDialog__restxt input { margin: 0 !important; position: relative; top: -1px; }
.registerDialog__login .sign-c-line2 { margin-top: 3%; }
@media (max-width: 991px) { 
  .registerDialog__body { padding-top: 0; }
  .registerDialog__body > .form-group { margin-bottom: 0; }
  .registerDialog__require { padding-bottom: 0 !important; }
  .registerDialog__wrapper { max-height: 80vh; overflow-y: auto; padding: 0 3% 3%; }
  .registerDialog__wrapper .registered-div { margin-bottom: 0; }
  .registerDialog__res { width: 49%; float: left; }
  .registerDialog__res > button { width: 100%; margin-top: 0; margin-bottom: 0; }
  .registerDialog__res .sign-c-button-2 { display: none; }
  .registerDialog__login { width: 49%; margin-top: 0; margin-left: 2%; float: left; }
  .registerDialog__login > a { margin-top: 0; line-height: 36px; background-size: contain; }
  .registerDialog__login .sign-c-line2 { margin-top: 0; }
  .registerDialog__login .is-long { display: none; }
  .registerDialog__login .is-short { display: inline-block; } }
@media (max-width: 991px) and (orientation: landscape) { 
  .registerDialog { margin: 10px auto; }
  .registerDialog__header { padding: 6px; }
  .registerDialog__wrapper { max-height: 65vh; overflow-y: auto; }
  .registerDialog__res { padding-left: 16%; }
  .registerDialog__explain { clear: both; } }



/*

.loginDialog__content{
	width:100%;
	height:100%;
}

.loginDialog__header { height:40px; padding: 6px;}

.login-form{
	position:absolute;
	margin:0;
	padding: 3%;
	padding-top:0;
	width:100%;
	top: 40px;
	bottom:0;
	overflow-y:auto;	
}
*/

/*

@media  (min-width: 768px) and (min-height: 620px){
.loginDialog {
        margin-top: 30px;
}
}
*/


/*
@media  (max-width: 480px) {
.loginDialog {
        max-height: 480px;
}
}
*/


.addSelModal__inner { background-color: #fff; }
.addSelModal__inner button.close { right: 10px; padding-top: 0; }
.addSelModal__body { padding: 5% 6% 6% 6%; clear: both; overflow: hidden; }
.addSelModal__row { width: 100%; clear: both; overflow: hidden; }
.addSelModal__row > span { width: 20%; vertical-align: middle; }
.addSelModal__row > input, .addSelModal__row > select { width: 56% !important; margin-right: 1% !important; vertical-align: middle; }
.addSelModal__row > input:focus, .addSelModal__row > select:focus { outline: none; }
.addSelModal__row > a:focus { color: #fff; }
.addSelModal__btn { width: 24%; vertical-align: middle; }


/*
@media (max-width: 640px) { .images-1 .modal-dialog-wrapper.modal-dialog { display: flex; align-items: center; width: 100%; height: 100vh; }
  .images-1 .modal-dialog-wrapper.modal-dialog img { width: 100%; height: auto; max-height: 100%; } }
*/

#company-light-box { position: absolute; display: none; background: black; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; color: #fff; }

#company-light-box2 { position: absolute; display: none; background: black; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; color: #fff; }

.company-light-box2 { width: 65%; background: #FFF; margin: 2% auto; padding: 1%; border-radius: 10px; }

/* #company-light-box3 { position: absolute; display: none; background: black; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; color: #fff; } */
/*#company-light-box3 { position: absolute; display: none; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; color: #fff; }*/
#company-light-box3 { display: none; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; color: #fff; }

.company-light-box3 { top: 30px; width: 100%; max-width: 640px; min-width:320px; margin: 1% auto; /* background: #fff */ }

/*@media screen and (max-width: 768px) { .company-light-box3 { width: 100%; margin: 10% auto; } }*/


.company-light-box3-hearder { background: #009fe9; padding: 1%; text-align: center; }

.company-light-box3 h4 { line-height: 40px; font-size: 24px; position: relative; }

.company-light-box3 span { color: #333; display: inline-block; width: 96%; margin:0 2%; }

.company-light-box3 .line { margin-top: 10px;}

#company-light-box3-1 { position: absolute; display: none; background: black; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; color: #fff; }

.company-light-box3-1 { width: 40%; margin: 5% auto; background: #fff; padding-bottom: 1%; }

.company-light-box3-1 h4 { line-height: 40px; font-size: 24px; background: #009fe9; text-align: center; padding: 2% 0; }

.company-light-box3-1-a { margin: 3% 0 1%; display: block; background: #009fe9; color: #fff; text-align: center; border-radius: 5px; width: 90%; line-height: 36px; margin: 3% auto; }
.company-light-box3-1-a:hover, .company-light-box3-1-a:focus { text-decoration: none; }

.company-light-box3-1-wrapper { width: 90%; margin: 0 auto; }

.company-light-box3-1-wrapper input { border: 1px solid #ccc; width: 60%; margin-left: 10px; line-height: 36px; }

.company-light-box3-1-wrapper { color: #333; padding: 2% 0; }


#copytext1 { display: none; top: 0; left: 0; right:0; bottom:0; z-index: 10010; /* color: #fff; */ }

#msg-alert { display: none; top: 0; left: 0; right:0; bottom:0; z-index: 10100; /* color: #fff; */ }
/*.msg-alert-box {margin:10vh auto; max-width: 480px;}*/
.msg-alert-box {max-width: 480px;}

/*#addList_edit1 { display: none; top: 0; left: 0; right:0; bottom:0; z-index: 10000; color: #fff; }*/

#addList_edit1 { display: none; top: 0; left: 0; right:0; bottom:0;}



@media (max-width: 1024px) { .addSelModal__wrap { width: 60%; } }
@media (max-width: 690px) { .addSelModal__wrap { width: 80%; } }
@media (max-width: 690px) and (orientation: landscape) { .images-1 .image-close { padding-top: 0; right: 10px; } }


@media screen and (max-width: 480px) {
  .company-light-box3 {max-width:100%; margin:auto; } 	
  .addSelModal__wrap { width: 90%; }
  .addSelModal__row + .addSelModal__row { margin-top: 5px; }
  .addSelModal__row > span { width: 100% !important; display: block; overflow: hidden; margin-bottom: 5px; }
  .addSelModal__row > input, .addSelModal__row > select { width: 100% !important; margin-right: 0% !important; margin-bottom: 5% !important; }
  .company-light-box3-input-p {padding-top:10%;}  
}



@media screen and (max-height: 480px) { 
  .company-light-box3 {top:0; max-height:100%; margin:auto; } 
  .company-light-box3-input-p {padding-top:6%;}
  .company-light-box3 .line { margin-top: 0;}  
  #add_list1, #add_list2 {margin-top: 2px; margin-bottom: 2px;}
 /*.msg-alert-box {margin:5vh auto;}*/
}



@media screen and (max-width: 480px) and (orientation:portrait) {
  .addSelModal__btn { width: 96%; margin: 2%; display: block; }
  #add_list1, #add_list2 {width:96%; margin-top: 5px;}
  #add_condition_list, #add_condition_list_new {width:96%;};
}


/* pages */
/* video、vidoeView page */
.c-selectBar__nav { margin: 7.5px 0; padding-bottom: 1.5%; }

/*
.p_r a:hover { color: #dc0000 !important; }
@media screen and (max-width: 700px) and (orientation: portrait) { .p_r { width: 33.33%; float: left; }
  .p_r > a { text-align: center; } }
@media screen and (max-width: 700px) { .p_r .dropdown-menu-ul { text-align: center; } }
*/

.videoLookItem.viedo-height { line-height: initial !important; margin-bottom: 4%; border:1px solid #fff;}

/*.videoLookItem.viedo-height:hover { background-color:rgba(238,238,238,0.6); border-radius: 3px;}*/

.videoLookItem.viedo-height:hover { background-color:rgba(255,255,233,1); border-radius: 3px; border: 1px solid #ccc;}

/*.videoLookItem__img img { height: 100%; }*/

.videoLookItem__author { width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }


.videoLookItem__author:hover { white-space: normal; text-overflow: initial; overflow: initial; }


.videoLookItem .viedo-height-right-a { margin-top: 0; padding: .25em 0; }


@media screen and (min-width: 500px) { 
	.videoLookItem__img { 
		/*height: 149px;*/ 
		overflow: hidden; 
	}
	
	/*
	.videoLookItem__title { 
	height: 70px;
	overflow: hidden;
	}
	*/
	
}


/*
@media screen and (min-width: 960px) { .videoLookItem__title { height: 70px; overflow: hidden;} }
*/


@media screen and (max-width: 500px) { .videoLookItem.viedo-height { margin-bottom: 20px; }
  /*.videoLookItem__title { margin: .25em 0; }*/
  
  .videoLookItem .viedo-box { height: auto; }
  .videoLookItem .viedo-box p { line-height: 1.5em; }
  .videoLookItem .offer.offer--pl0 { font-weight: bold; } 

	.videoLookItem.viedo-height { 
		/*background-color:rgba(255,255,233,1); */
		border-radius: 3px; 
		border: 1px solid #ccc;
	}  

	.videoLookItem.viedo-height:hover { 
		background-color:rgba(255,255,233,1); 
		border-radius: 3px; 
		border: 1px solid #ccc;
	}  
	
	.viedo-height-right-a {
		border: unset;
	}
}

/*.viedoLookInfo__title { width: 66.66% !important; }*/

@media (max-width: 1024px) { .viedoLookInfo__no { width: 100% !important; }
  .viedoLookInfo__title { width: 100% !important; } }

.viedoStep__txt { display: none; }
@media (max-width: 500px) { .viedoStep > div { width: 33.33333%; text-align: center; color: #fff; font-size: 18px; font-weight: bold; position: relative; padding: 20px 0; }
  .viedoStep > div:after { position: absolute; display: block; width: 30px; height: 30px; top: 0; left: 50%; transform: translate(-50%, -50%); border: 3px solid #ccc; border-radius: 30px; background-color: #fff; font-size: 20px; color: #000; }
  .viedoStep > div:nth-child(1) { background-color: #38a0e9; }
  .viedoStep > div:nth-child(1):after { content: '1'; }
  .viedoStep > div:nth-child(2) { background-color: #f8a804; }
  .viedoStep > div:nth-child(2):after { content: '2'; }
  .viedoStep > div:nth-child(3) { background-color: #30ac38; }
  .viedoStep > div:nth-child(3):after { content: '3'; }
  .viedoStep__img { display: none; }
  .viedoStep__txt { display: block; } }

#delete_list .btn-default { background-color: #efefef; }

/*  */
.c-titles__breadcrumb { font-family: arial; }
.c-titles__breadcrumb > i { margin-right: 5px; }

.c-shopList__item { clear: both; }
@media (max-width: 989px) { .c-shopList__header { display: none; }
  .c-shopList__con { border-bottom: 0; }
  .c-shopList__item { clear: both; overflow: hidden; padding: 1% 2%; background: rgba(204, 204, 204, 0.15); box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2); }
  .c-shopList__item + .c-shopList__item { margin-top: 15px; border: 0; }
  .c-shopList__item > div { width: 100%; padding: 0.5em 0.25em; position: relative; text-align: left; }
  .c-shopList__item > div a { width: 65%; float: left; overflow: hidden; display: inline-block; }
  .c-shopList__item > div:before { content: attr(data-title); width: 30%; margin-right: 5%; float: left; display: inline-block; text-align: left; }
  .c-shopList__item .c-shopList__del a { width: 100%; padding: 0.25em 0; text-align: center; background-color: #fff; }
  .c-shopList__item .c-shopList__del:before { display: none; } }

@media (max-width: 989px) { .c-payment { margin-bottom: 15px; }
  .c-payment > div { padding: 1em 0 0.5em; line-height: 1.75em; text-align: right; }
  .c-payment__sp { display: none; }
  .c-payment__caseday { width: 25%; }
  .c-payment__casepoint { width: 25%; }
  .c-payment__vipday { width: 25%; }
  .c-payment__point { width: 25%; }
  .c-payment__total { width: 100%; clear: both; padding-top: 0 !important; } }

@media screen and (max-width: 640px) { body.is-open::after { content: ""; display: block; position: fixed; z-index: 9; width: 100vw; height: 100%; background-color: rgba(0, 0, 0, 0.8); top: 0; touch-action: none !important; } }

html.is-open, body.is-open { overflow: hidden !important; width: 100vw !important; height: 100vh !important;}
//html.is-open, body.is-open { overflow: hidden !important; width: 100vw !important; height: 100vh !important; max-width: 100vw !important; max-height: 100vh !important;}

@media (max-width: 989px) { .payment-title span:after { zoom: .5; left: 50%; margin-left: -15px; } }
@media (max-width: 768px) { .company-table-ipad-table tr { display: flex; }
  .company-table-ipad-table .company-table-ipad-left, .company-table-ipad-table .company-table-ipad-right { display: block; }
  .company-table-ipad-table .company-table-ipad-right a { display: inline-block; } }
#devPanel { padding: 1em 2em; position: fixed; bottom: 0; left: 0; color: #fff; background-color: rgba(0, 0, 0, 0.3); z-index: 99999999999; }

.ui-widget.ui-widget-content { z-index: 9999; }
.ui-spinner.ui-widget.ui-widget-content {z-index: auto;}

/*
.img-box{
	width:100%;
	height:auto;
    max-width:100vw;
	max-height:100vh;	
    }

	*/

#analysis-nav>li>a:hover {
	background-color: #dc0000;
	
}

/*解決 modal on modal 的問題*/

/*
.modal-backdrop {

}
*/

.modal.in {
    background-color: rgba(0,0,0,0.7);
}

.div_table-cell{ /* 用於垂直置中 */
display:flex; 
align-items:center;
justify-content:center;
margin:0;
}

.modal {
	padding: 0 !important;
}

.modal-open .modal {
  overflow: hidden;
}


.blog-top-area .pagination {
	margin-top:1%;
	margin-bottom:3%;
}

.pagination>li>a {
	border: 1px solid #ccc;
}


.pagination>li>a:hover {
	border: 1px solid #aaa;
}

/* blog 底色不是白色時套用以下CSS */


.blog {
	background: #ededed;
}

.blog-article-box {
	border-radius: 3px;
}

.view-mode-text, .blog-right-article {
	background: #fff;
	border-radius: 3px;
}


.blog-text {

	border-radius: 3px;
}

.blog-text th:first-child{
  border-top-left-radius: 3px;
}

.blog-text th:last-child{
  border-top-right-radius: 3px;
}

/* 以上 */

.reading .videoLookItem.viedo-height {
	margin-bottom:0;
	border: 2px solid transparent;
}


.reading .videoLookItem.viedo-height:hover { border: 2px solid #c3251d;}
.reading .videoLookItem.viedo-height a:hover { color: #0077b5;}

/*.reading .videoLookItem.viedo-height:hover { border: 1px solid #ccc;}*/
/*.reading .videoLookItem.viedo-height a:hover { color: #dc0000;}*/


.swiper-pagination-bullet {
	width: 16px !important;
	height: 16px !important;
}


.vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block;		/*影片暫停時顯示Play Button*/
  z-index: 9999;
}


.vjs-big-play-centered .vjs-big-play-button {
  z-index: 9999;		/*big Play Button*/
}