@charset "utf-8";
body {	
	min-height: 100vh;
}

/* 整個捲軸 */
::-webkit-scrollbar {
	
}
/* 捲軸的軌道 */
::-webkit-scrollbar-track {
	
}
/*捲軸尚未滑到的軌道*/
::-webkit-scrollbar-track-piece{
	
}
/* 滑動的區塊 */
::-webkit-scrollbar-thumb {
	
}
/* 滑鼠移到滑動的區塊上 */
::-webkit-scrollbar-thumb:hover {
	
}

#LAYOUT_CLASS {
	
}

.body-container > #window_shelter {
	position:fixed;
	top:0;
	left:0;
	display:none;
	width:100vw;
	height:100vh;
	
	background-color: #E51D42 ;
	
	background-image: url("/images/logo.png");
	
	background-size: 100px;
	background-position:center;
	background-repeat: no-repeat;
	
	z-index:3000;
}

.j-radio input:checked + i,
.j-checkbox input:checked + i {
	
}
.j-radio input:checked + i:after,
.j-checkbox input:checked + i:after {
	border-color: #ffffff;
}

/* header */
header {
	background-color: #f2f2f2;
}
header a {
	text-decoration:none;
	font-size:inherit;
	color:inherit ;
}

header .header_mask {
	position:fixed;
	top:0px ;
	left:-110%;
	display:inline-block;
	width:100vw ;
	height:100vh ;
	
	opacity: 0.5 ;
	
	z-index:999 ;
}
header.menu_active .header_mask {
	left:0%;
}

header .header-container {
	display:table ;
	width:100%;
	height:100%;
}
.header-container .header-left,
.header-container .header-center,
.header-container .header-right {
	display:table-cell;
	vertical-align:middle;
	overflow:hidden;
}
.header-container .header-left {
	text-align:left ;
}
.header-container .header-center {
	text-align:center ;
}
.header-container .header-right {	
	text-align:right ;
}

.header-container .js-menu_sw {
	display: inline-block;
	font-size:2em;
	
	cursor:pointer;
}
.header-container .js-menu_sw:before {
	content: "\f0c9";
	font-family: 'FontAwesome';
}
.header-container .mem_stac {
	position:relative;
	margin:0px 0px;
	padding:0px;
	font-size:1.5em;
	color:#ffffff ;
}
.header-container .mem_stac + .mem_stac {
	margin-left:6px;
}
.header-container .mem_stac num {
	position:absolute;
	top:-3px;
	right:0px;
	display:none ;
	width:20px;
	height:20px;
	
	line-height:20px;
	font-size:12px;
	text-align:center;
	
	background-color: #f00;
	
	-webkit-border-radius: 50% ;
		border-radius: 50% ;
	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}
.header-container .mem_stac num.active {
	display:inline-block;
}
.header-container .mem_stac:hover {
	color:#dddddd ;
}


/* header_desk - 桌面 */ /*#adc6dc*/
.header_desk {
	position:fixed;
	top:0px;
	left:0px;
	display:inline-block;
	width:100%;
	height:10vh;
	
	border-bottom:2px solid transparent;
	
	z-index:1000;
}
.header_desk .header-container { 
	padding:0 15px;
}
.header_desk a {
	cursor: pointer;
}
.header_desk a:hover {
	color: #666;
}
.header_desk .header_menu {
	position:fixed;
	top:0px ;
	left:-110%;
	display:inline-block;
	width:100vw ;
	height:100vh;
	
	transition: left 0.3s ;
	overflow:hidden;
}

.header_desk .header_menu .list_menu {
	padding-bottom: 60px ;
}
.header_desk .header_menu .item_menu {
	padding: 0px ;
	
}
.header_desk .header_menu .item_menu a {
	display:inline-block;
	width:100%;
	padding: 15px;
	
	font-size: 1.1em;
	font-weight: bold;
	color: #000;
	text-align:left;
	vertical-align:middle;
	white-space:nowrap;
	overflow:hidden;
}
.header_desk .header_menu .item_menu:hover > a {
	background-color: #f7f7f7;
}
.header_desk + .header_desk_interval {	/*要對應 header_desk 高度 */
	height:13vh;
}

.header_desk .href_logo img,
.header_desk .href_logo {
	height:50px;
	max-height:9vh;
}
.header_desk a.href_logo {
	display:inline-block;
	width:100%;
}
.header_desk .logo_bg {
	display:block;
	width:100%;
	height:100px;
	
	background-image: url(/images/logo.png);
	background-size:contain;
	background-position:center left;
	background-repeat: no-repeat;
}
.header_desk .logo_string {
	position: absolute;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 60px;
    text-align: center;
    
    font-size: 36px;
	
	font-weight: bold;
	text-decoration: none;
	text-overflow:ellipsis;	
	white-space:nowrap;
	overflow:hidden;
}
.header_desk .logo_string:hover{
	
}

.header_desk .menu_cont {
	position:relative;
	display:inline-block;
	width:100%;
	height: 100%;
	
	overflow-y: scroll;
	background-color: #ffffff ;
	z-index:1010 ;
}

.header_desk .block_profile {
	position:relative;
	display:inline-block;
	width:100%;
    height: 150px;
	
	background-repeat: no-repeat;
    background-size: cover;
    background-position: 10% center;
    overflow: hidden;
}
.header_desk .block_profile .mask {
	position: absolute;
	top: 0;
    left: 0;
	display:inline-block;
	width: 100%;
    height: 100%;
    
    background-color: #000;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    z-index: 1;
}
.header_desk .tab_profile {
	position: relative;
	
	width: 100%;
	height: 100%;
	table-layout:fixed;
	color:#ffffff;
	z-index: 2 ;
}
.header_desk .tab_profile td {
	text-align:center;
	vertical-align:middle;
}
.header_desk .profile_img {
	display:inline-block;
	width: 90px;
	height: 90px;
	
	border:3px solid #ffffff ;
	
	background-color: #ffffff;
	-webkit-border-radius: 50% ;
	border-radius: 50% ;
	overflow: hidden;
}
.header_desk .profile_img img {
	height:100%;
}
.header_desk .profile_name {
	font-size: 20px;
    text-overflow: ellipsis;
	text-align:left;
    overflow: hidden;
    white-space: nowrap;
}
.header_desk .profile_txt {
	
	margin-top: 5px;
	font-size: 12px;
    text-align:left;
}
.header_desk .item_menu .fa {
	width:36px;
	color:#999999 ;
	font-size:24px;
	text-align:center;
	vertical-align:middle;
}


/* header_phone - 手機 */
.header_phone {
	position:fixed;
	top:0px;
	left:0px;
	display:inline-block;
	width:100%;
	
	z-index:1000;
}
.header_phone .header-container {
	background-color:#ffffff;
}
.header_phone .js-menu_sw {
	font: normal normal normal 24px/1 FontAwesome;
    cursor: pointer;
}
.header_phone .js-menu_sw:before {
	content: "\f0c9";
}
.header_phone .fa-bars {
	font-size: 24px;
	cursor:pointer;
}

.header_phone .href_logo img {
	height:60px;
}

.header_phone .header_menu {
	display:block;
	/*display:none;*/
	height:90vh ;
	max-height:0vh ;
	padding: 0px 0px 0px 0px ;
	
	opacity:0;
	overflow:hidden;
	transition: opacity 0.5s;
	z-index:0;
}
.header_phone .list_menu {
	width:96% ;
	height:96% ;
	margin: 0px auto 0px auto;
	padding-top: 16px ;
	
	background-color: #7FBE25 ;
	overflow-y:auto;
}
.header_phone .header_menu .item_menu {
	position:relative;
}
.header_phone .item_menu .ahref {
	display:block;
	padding: 16px 0px;
	text-align:center;
	font-weight:bold;
	color: #ffffff ;
	font-size:1.2em;
}
.header_phone .header_menu .item_menu a {
	text-decoration:none;
}
.header_phone .header_menu:hover {
	/*opacity:0.9;*/
}
.header_phone .list_menu2 {
	display:block;
	max-height:0px;
	overflow:hidden;
	transition: max-height 0.5s ;
}

.header_phone .list_menu2 .item_menu2 {
	padding-left: 12px;
	padding-right: 12px;
}
.header_phone .item_menu.js-item_menu:before {
	content: '\f107';
	position:absolute;
	top:16px;
	right:6px;
	color: #ffffff ;
	margin-right:6px;
	font: normal normal normal 24px/1 FontAwesome;
	float: right;
}
.header_phone .item_menu.active .list_menu2 {
	max-height: 100vh;
}

.header_phone .list_menu2 .ahref {
	border-bottom:2px solid #ffffff;
}

.header_phone + .header_phone_interval {
	min-height:60px;	/*對應 header_phone 高度 */
}


header.menu_active
.header_phone .header_menu {
	display:block;
	max-height:90vh ;
	opacity:1;
	z-index:999;
}
header.menu_active
.header_phone .js-menu_sw:before {
	content: "\f00d";
}
.header_phone .item_menu2:hover > .ahref,
.header_phone .item_menu:hover > .ahref {
	color:#d4d2d2;
}


header + .header_interval {
	
}




/* section */
section {
	min-height:87vh;
}
section > .section-container {
	display:table;
	width:100%;
	table-layout:auto !important ;
	
	word-break:break-all;
	white-space:normal;
}
.section-container > .section-banner,
.section-container > .section-bottom {
	position:relative;
	display:table-row;
	width:100%;
}
.section-container > .section-right,
.section-container > .section-left,
.section-container > .section-center {
	position:relative;
	display:table-cell;
	
	height:100%;
	
	word-break:break-all;
	white-space:normal;
	
	table-layout:fixed;
}
.section-container > .section-right {
	width: 0%;
}
.section-container > .section-left {
	width: 0%;
}
.section-container > .section-center {
	
}
.section-page_link {
	
}
.section-page_link > a + a:before {
	content: " > ";
}
.section-page_link_title {
	
}


/* footer */
section + footer .footer-interval {
	
}
footer {
	position:relative;
	clear:both;	
}
.footer-bg {
	position:absolute;
	top:0px;
	left:0px;
	display:inline-block;
	width:100%;
	height:100%;
	z-index:-1;
}
footer .web_info {
	
}

.header_desk .header-container,
section .section-container,
.section-container .section-center {
	
}

/* 其他 */
.btn {
	position:relative;
	line-height: 32px;	/* 等同為高度 */
	border:1px solid transparent ;
	font-size: 1em ;
	opacity: 0.9;
}
.btn:hover {
	opacity:1;
}
a.btn{
	text-decoration:none;
}

.btn_send {
	color:#ffffff;
	background-color:#4d83b3 ;
	
	border-radius:6px;
	font-weight:700;
}
.btn_back {
	color:#ffffff;
	background-color:#ff6600 ;
	
	border-radius:6px;
	font-weight:700;
}
.btn_email4 {
	line-height:45px;
	
	color:#ffffff;
	background-color:#E51D42;
	-webkit-border-radius: 6px;
	border-radius: 6px;	
	
	font-weight:700;
}
.btn_google {
	width:100%;
	line-height:45px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff ;
	background-color: #e8443b ;
}
.btn_facebook {
	width:100%;
	line-height:45px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff ;
	background-color: #3A559F ;
}
.btn > .fa,
.btn b {
	position:absolute;
	top: 0px;
    left: 10px;
	font-size: 1.5em;
	line-height: inherit;
}

.ckeditor_content   {
	line-height: 30px;
	padding-bottom: 50px;
}
.w-section-header {
	margin-top:5px;
	margin-bottom: 5px;
	
	font-size: 15px;
}
.w-section-header + .unit {
	margin-bottom: 10px;
}

.icon-req {
	color:red;
}

.pagination {
	padding-top:12px;
	margin-bottom:20px;
}

h3 {
	font-size:20px;
	font-weight:bold;
}
h4 {
	font-size:20px;
	font-weight:bold;
}

.form-content {
	
}
.form-content .form_tr {
	display:table;
	width:100%;
	/*table-layout:fixed; 不能*/
	
	margin-bottom:6px;
	border-top:1px solid #cccccc ;
}
.form-content .form_tr .form_tit,
.form-content .form_tr .form_val,
.form-content .form_tr .form_inp {
	display:table-cell ;
	
	vertical-align:middle;
	text-align:left;
}
.form-content .form_tr .form_tit {
	line-height: 60px;
}
.form-content .form_tr .form_val {
	color: #777777;
}
.form-content .form_tr .form_inp {
	text-align:right;
}


.form-footer {
	margin-bottom: 24px;
	text-align:center ;
}
.form-footer .btn-danger {
	padding: 5px 32px;
	color: #ffffff;
	background-color: #7e9bce;
	border-color: transparent ;
}
.form-footer .btn-danger:hover {
	color: #000000;
}

.form-control {
	border-color: #B6B6B6 ;
}

.space_edit .form_tit {
	
}
.space_edit .form_val {
	width:50%;
}
.space_edit .form_inp {
	width:25%;
}

.j-forms .notice {
	margin-bottom: 20px;
	font-size:0.7em;
}
.j-forms .notice2 {
	margin-bottom: 20px;
	font-size:0.7em;
	color: #b3b3b3;
	text-align:center;
}

.form-content .dragg_tr {
	display:inline-block;
	width: 100%;
	
	border-top:1px solid #cccccc ;
}
.form-content .dragg_tr > .tr,
.form-content .dragg_tr > .th,
.form-content .dragg_tr > .td {
	display:inline-block;
}
.form-content .dragg_tr > .th {
	width: 25% ;
	line-height: 60px;
}
.form-content .dragg_tr > .td {
	width: 73% ;
	line-height: 60px;
}
.form-content .dragg_tr > .tr {
	width: 100% ;
}
.form-content .dragg_tr .txt_value {
	text-align:right;
}
.form-content .form_tr + .dragg_tr {
	border-top:1px solid #cccccc ;
}


.dragg {
	display:inline-block;
	width:100%;
	margin-bottom:6px;
	
	background: #f3f3f3;
	border: #DFDFDF 1px solid;
	-webkit-border-radius: 24px;
	border-radius: 24px;
}
.dragg > .dragg-cont {
	position:relative;
	display:inline-block;
	width:100%;
	height: 36px;
	padding: 8px 12px 0 12px;
	padding: 0px 0px 0 0px;
	/* margin-left:12px ; */
	/* margin-right:12px ; */
	
	
}
.dragg .dragg-bar {
	display:block;
	width:100%;
	height:6px;
	margin-top:16px;
	background-color: #989898 ;
	
	cursor:pointer;
	z-index:0;
}
.dragg .dragg-line {
	position:absolute;
	top:16px;
	left:0px;
	display:inline-block;
	width:0px;
	height:6px;
	background-color: #E51D42 ;
	z-index:0;
}
.dragg .dragg-btn {
	position:absolute;
	top:8px;
	left:12px;
	
	display:inline-block;
	/*JS會計算*/
	width:0px;
	height:0px;
	
	background-color: #ffffff ;
	
	-webkit-border-radius: 50% ;
	border-radius: 50% ;
	opacity:1;
	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.1);
	z-index:3;
}
.dragg .dragg-btn.active {
	background-color: #E51D42 ;
}

.dragg .dragg-bar,
.dragg .dragg-line {
	-webkit-border-radius: 6px;
    border-radius: 6px;
}
/*padding 要一樣 = 按鍵寬度 */
.dragg > .dragg-cont,
.dragg {
	padding-left:12px ;
	padding-right:12px ;
}		
	

/* ---------------------------- popup_frame */	
.popup_frame {
	position:fixed;
	top:0px ;
	left:-110% ;
	display:inline-block;
	width:100vw;
	height:100vh ;
	
	text-align:center;
	overflow:hidden;
	z-index:2000;
}
.popup_frame.active {
	left:0% ;
}
.popup_frame .frame_mask {
	position:absolute;
	top:0px;
	left:0%;
	display:inline-block;
	width:100%;
	height:100%;
	
	background-color: #000000 ;
    opacity: 0.6;
	z-index:1;
}
.popup_frame .frame_mask.op2 {
	opacity: 0.2;
}