@import url("icon_style.css?ts=8");
@import url("initialization.css");
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');

/*--header--*/
.myBoxHeader
{
	position:fixed;
	top:0px;
	line-height:43px;
	width:100%;
    text-align: left;
	padding-left:10px;
	height:43px;
	color:#ffffff;
	font-size:1.3em;
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.11), 0 0px 1px -1px rgba(0,0,0,0.1), 0 1px 1px 0 rgba(0,0,0,0.1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.11), 0 0px 1px -1px rgba(0,0,0,0.1), 0 1px 1px 0 rgba(0,0,0,0.1);
	z-index:999;
	
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	
	-webkit-background-size:cover;
	background-size:cover;
	/* background-color: #780CE8; */
	background-repeat:no-repeat;
	background-position: center;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#4e0897+0,780ce8+100 */
	background: #4e0897; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #4e0897 0%, #780ce8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #4e0897 0%,#780ce8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #4e0897 0%,#780ce8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e0897', endColorstr='#780ce8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}
/*--header--*/
.bar-box
{
	position:absolute;
	top:0px;
	right:0px;
	font-size:.7em;
	height:43px;
	text-align: center;
	color: #FFF;
    padding: 0px 10px;
    transition: background-color .15s ease-in-out;
}
.bar-box_1
{
	position:absolute;
	top:0px;
	right:63.69px;
	font-size:.7em;
	height:43px;
	text-align: center;
	color: #FFF;
    padding: 0px 10px;
    transition: background-color .15s ease-in-out;
}
.bar-box_2
{
	position:absolute;
	top:0px;
	right:147.38px;
	font-size:.7em;
	height:43px;
	text-align: center;
	color: #FFF;
    padding: 0px 10px;
    transition: background-color .15s ease-in-out;
}
.bar-box:hover, .bar-box:active, .bar-box:focus,.bar-box_1:hover, .bar-box_1:active, .bar-box_1:focus,.bar-box_2:hover, .bar-box_2:active, .bar-box_2:focus {
    background-color: #9233f4;
}
.cursor
{
	cursor:pointer;
}
.header_fonts
{
	font-size:.9em;
	font-family: 'Josefin Sans', sans-serif;
}
.image_resize
{
	-webkit-background-size:cover;
	background-size:cover;
	background-color:#F0EFEF;
	background-repeat:no-repeat;
	background-position: center;
}
.clearx
{
    clear: both;
}
/*--go To Top--*/
#gotop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 95px;
	cursor: pointer;
	z-index: 200;
}
/*--slider modify--*/
.imgAreaContain
{
	width:100%;
	position:relative;
	/* -webkit-background-size:contain;
	background-size:contain; */
	-webkit-background-size:cover;
	background-size:cover;
	background-color:#F0EFEF;
	background-repeat:no-repeat;
	background-position: center;
}

.slider {
	width: 100%;
}
.slider-1 {
	width: 98%;
	margin: 0 auto;
}
.slider-out-section{
    background-color: #ffffff;
    margin-bottom:.4rem;
    padding-top:.3rem;
    padding-bottom: .3rem;
}
.slick-slide img {
  width: 100%;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}

.slick-active {
  opacity: .5;
}

.slick-current {
  opacity: 1;
}
/*--content--*/
.b_section
{
	position:relative;
	margin-top:.5rem;
	height:100%;
}
.b_section .col-md-3, .b_section .col-md-6, .b_section .col-md-12
{
	padding:0;
}
.no_data_show
{
	text-align:center;
	color:rgba(0,0,0,0.3);
	font-size:1.5em;
}
.msg_block
{
	background-color:#fff;
	border:1px solid #EFEFEF;
	margin-bottom:1rem;
	
	transition: background-color .15s ease-in-out;
}
.text_msg
{
	color:#757575;
	padding:.5rem;
	line-height: 1.5;
}
/*-- youtube 滿版用 --*/
.video_container
{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 34px;
	height: 0;
	overflow: hidden;
}
.video_container iframe, .video_container object, .video_container embed 
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*-- youtube 滿版用 --*/
/*-- old data style --*/
.old_data_msg
{
	line-height: 1.5;
    color: #757575;
    position: relative;
	border:1px solid #e0e0e0;
	transition: background-color .15s ease-in-out;
	background-color:#fff;
	
	margin-bottom:10px;
}
.old_data_msg:hover
{
	background-color:#f1f1f1;
}
.text_msg_img
{
	position:absolute;
	top:41.78px;
	right:10px;
	width:90px;
}
.text_msg_date
{
	position:relative;
	background-color:#e8e8e8;
	padding:.4rem;
	font-size:.8em;
}
.old_text_msg
{
	width:calc( 100% - 100px );
	min-height:100px;
	padding:10px;
	
}
.old_in_t_msg
{
	width:100%;
	height:52px;
	color:#757575;
	line-height: 1.5;
	
	overflow:hidden;
	
}
/*-- old data style --*/
.is_mobile
{
	display:none;
}
/*-- moblie footer --*/
.myBoxFooter
{
    position: fixed;
    bottom: 0px;
    width:100%;
    background-color: #ffffff;
    padding: .4rem;
    
    box-shadow: 0px 1px 11px #c3c3c3; 
    -webkit-box-shadow: 0px 1px 11px #c3c3c3; 
    -moz-box-shadow: 0px 1px 11px #c3c3c3; 
	
	z-index:100;
}
.footer_flex
{
	display: flex;
}
.footer_left
{
	color:#ffffff;
	text-align:center;
	width:50%;
    line-height: 30px;
    padding: 5px 0;
    background-color: #f14351;
	transition: background-color .15s ease-in-out;
}
.footer_left:hover, .footer_left:active, .footer_left:focus
{
	background-color:#f3636e;
}
.footer_right
{
	color:#ffffff;
	text-align:center;
	width:50%;
    line-height: 30px;
    padding: 5px 0;
    background-color: #780CE8;
	transition: background-color .15s ease-in-out;
}
.footer_right:hover, .footer_right:active, .footer_right:focus
{
	background-color:#bcd859;
}
/*-- moblie footer --*/
.to_right
{
	font-size:.8em;
	float:right;
	color:#9fa0a0 !important;
}
/*mylife-go*/
.abtnStyle
{
	max-width:100%;
}
.abtnStyle1
{
	max-width:29%;
}
.mylifegoTitle
{
	color:#757575;
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
	margin-top:.5rem;
	margin-bottom:.4rem;
}
.mylife-go_btn
{
	color:#757575;
	font-size:1.5em;
	text-align:center;
	cursor:pointer;
}
.editor_del_right
{
	position:absolute;
	top:0px;
	right:65px;
}
.editor_right
{
	position:absolute;
	top:0px;
	right:0px;
}
.editor_btn
{
	font-size:.8em;
	width:60px;
	text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding: .4rem;
    border-radius: 4px;
	color:#ffffff !important;
	background-color:#6f0bd8;
    transition: background-color .15s ease-in-out;
}
.editor_btn:hover, .editor_btn:active, .editor_btn:focus,.new-add-icon:hover, .new-add-icon:active, .new-add-icon:focus,.myLevelStarToBtn_ok:hover, .myLevelStarToBtn_ok:active, .myLevelStarToBtn_ok:focus
{
    opacity: 0.8;
}
.new-add-icon
{
    position: fixed;
    bottom: 10px;
	right:10px;
	font-size:24px;
	padding:10px;
	color:#ffffff;
    background-color: #6f0bd8;
    text-align:center;
    box-shadow: 0px 1px 11px #c3c3c3; 
    -webkit-box-shadow: 0px 1px 11px #c3c3c3; 
    -moz-box-shadow: 0px 1px 11px #c3c3c3; 
	
	 border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	
	z-index:100;
	
	cursor:pointer;
	
	transition: background-color .15s ease-in-out;
}
.myLevelStarToBtn_ok
{
	float: right;
    width:50%;
    text-align: center;
    color:#ffffff;
    padding: .3rem .5rem .3rem .5rem;
    border-top-left-radius: 3px;
	-moz-border-top-left-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	background-color:#6f0bd8;
    max-width:100px;
	cursor:pointer;
}
.editor_block
{
	background-color:#fff;
	padding:.4rem;
}
@media (max-width:929px)
{
	.is_mobile
	{
		display:inline;
	}
	.not_mobile
	{
		display:none;
	}
}


/*上傳樣式*/
.file3{
    position: relative;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
	width:100%;
	cursor:pointer;
}
.file3 input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
	cursor:pointer;
}
.file3:hover {
    color: #FFFFFF;
    text-decoration: none;
	cursor:pointer;
}

.file2BackImg
{
	-webkit-background-size:cover;
	background-size:cover;
	background-color:#F0EFEF;
	background-repeat:no-repeat;
	background-position: center;
	width:300px;
	height:230px;
}
.design-img{
	background-color:#f8f8f8;
	width:100%;
	height:300px
}
.myImgSection{
	width:100%;
	max-width: 550px;
	margin:0 auto;
}
.dropImgArea {
    font-size: 18px;
    position: relative;
    width: 100%;
    max-width: 550px;
    border: 1px solid #e3e3e3;
    text-align: center;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor: pointer;
}
.cropFbtn{
	text-align:center;
	font-size:20px;
	position:absolute;
	top:8px; 
	right:55px;
    width: 36px;
    height: 36px;
	line-height:46px;
	padding-top:7px; /*因為line-height無作用*/
    border: none;
	color:#ffffff;
    background-color: rgba(0,0,0,.7);
    border-radius: 50%;
	transition: all .2s ease-in-out;
}
.deleteFbtn{
	text-align:center;
	font-size:20px;
	position:absolute;
	top:8px;  
	right:10px;
	width: 36px;
    height: 36px;
	line-height:46px;
	padding-top:7px; /*因為line-height無作用*/
    border: none;
	color:#ffffff;
    background-color: rgba(0,0,0,.7);
    border-radius: 50%;
	transition: all .2s ease-in-out;
}
.deleteFbtn:hover, .cropFbtn:hover{
	transform: translateY(-4px);
}
.imgFontsHidden{
	display:none;
}
.modal-body img
{
	max-width:100%;
}
/*loading color*/
.sk-spinner-wave div{
	background-color:#c3c3c3;
}
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 50%; 
  left: 0; 
  bottom: 0; 
  right: 0;
}
.btn-new-primary{
	color: #fff;
    background-color: #2d8aba;
}
.file3:hover .btn-new-primary, .btn-new-primary:hover{
    color: #fff;
    background-color: #47a3d3;
}


/*
 *  Usage:
 *
 *    <div class="sk-spinner sk-spinner-wave">
 *      <div class="sk-rect1"></div>
 *      <div class="sk-rect2"></div>
 *      <div class="sk-rect3"></div>
 *      <div class="sk-rect4"></div>
 *      <div class="sk-rect5"></div>
 *    </div>
 *
 */
.sk-spinner-wave.sk-spinner {
  margin: 0 auto;
  width: 50px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}
.sk-spinner-wave div {
  background-color: #5e5e5e;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
  animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave .sk-rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.sk-spinner-wave .sk-rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.sk-spinner-wave .sk-rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.sk-spinner-wave .sk-rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}
@keyframes sk-waveStretchDelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}


@media (min-width: 768px)
{
	.modal-dialog {
		width: 700px;
	}
}

.modal_msg_con {
    text-align: center;
    font-size: 23px;
    padding: 15px;
    color: #6e6e6e;
    line-height: 1.5;
}
.modal_msg_con i
{
	color:#ef5350;
}
.modal_msg_con i.ok_success
{
	color:#33FF33;
}

/*圖片相關*/
.img_insert img
{
    max-width: 100%;
}
.img_insert
{
	font-size: 18px;
    position: relative;
    width: 100%;
    min-height: 100px;
    border: 1px solid #e3e3e3;
    text-align: center;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: #f8f8f8;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	margin-bottom:10px;
}
.imgFontsHidden {
    display: none;
}
/*圖片相關*/
.ab_center_mid
{
	position:absolute;
	top:50%;
	left:50%;
	transform: translateX(-50%) translateY(-50%);
	text-align:center;
}
/*--msg show--*/
#msg_show
{
	color:#757575;
    position: fixed;
    bottom: 0px;
    width:calc( 100% - 20px );
    background-color: #fdfdfd;
    padding: .8rem;
	margin:10px;
    
    box-shadow: 0px 1px 11px #c3c3c3; 
    -webkit-box-shadow: 0px 1px 11px #c3c3c3; 
    -moz-box-shadow: 0px 1px 11px #c3c3c3; 
	
	z-index:150;
	text-align:center;
}
.myMsgShowHrNoPadding
{
    border-bottom:1px solid #eef2fa;
	margin:.4rem 0 .6rem 0;
}
/*--msg show--*/
.myShowWorkMsgColor
{
	color:#b0b0b0;
	word-wrap:break-word;
}
.moreRight
{
    float: right;
	cursor:pointer;
}
.myIconColor7{
    color:#F2AB39;
}
.myIconColor12{
    color:#eb6268;
}
.now-color
{
	color:#66FF66;
}
.new_tags_area
{
	color: #757575;
    padding: .5rem;
    line-height: 1.5;
}
.new_tags
{
	font-size:.8em;
	border-bottom:2px solid #bd83f9;
	margin-right:.6rem;
	margin-bottom:.6rem;
	padding-bottom:.2rem;
}
.b_style
{
	font-size:.9em;
	color: #757575;
    margin-bottom: .5rem;
    line-height: 1.5;
}