.ulink-row, .ulink-column {
	-webkit-box-sizing:border-box !important;
	box-sizing:border-box !important;
}

.ulink-column.empty {
	min-height: 1px; /* 為了維持前台版型 */
}

/* column width for px */
[class*="col-"] {
	/*display: inline-block;
	*display: inline;
	*zoom:1;
	*float:left;*/
	vertical-align:top;
	margin: 10px;
	/**margin:0 20px 20px 0;*/
	position:relative;
	float: left;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

[class*="col-"]:after {
	clear: both;
	content: '';
	display: block;
	height: 0;
	visibility: hidden;
	overflow: hidden;
}

[class*="col-"]:last-child { margin-right: 0; }

.col-100 { width:980px; }/*one column*/
.col-50 { width:480px; }/*two column*/
.col-33 { width:313.333333px; }/*three column*/
.col-25 { width:230px; }/*four column*/
.col-20 { width:180px; }/*five column*/

.col-67 { width:646.66667px; }/*two column 2 : 1*/
.col-75 { width:730px; }/*two column 3 : 1*/
.col-80 { width:780px; }/*two column 4 : 1*/

.col-60 { width:580px; }/*two column 3 : 2*/

.col-40 { width:380px; }/*three column 2 : 2 :1*/

/*.col-67 > div.col-33:nth-of-type(3n) { margin-right:15px; }
.col-67 > div.col-33:nth-of-type(2n) { margin-right:0; }

.col-75 > div.col-25:nth-of-type(4n) { margin-right:15px; }
.col-75 > div.col-25:nth-of-type(3n) { margin-right:0; }

.col-33 + .col-67, .col-67 + .col-33, .col-25 + .col-75, .col-75 + .col-25, .col-20 + .col-80, .col-80 + .col-20  { margin-right:0; }

div.col-50:nth-of-type(2n) { margin-right:0; }
div.col-33:nth-of-type(3n) { margin-right:0; }
div.col-25:nth-of-type(4n) { margin-right:0; }
div.col-20:nth-of-type(5n) { margin-right:0; }

.col-25 + div.col-50  { margin-right: 20px; }
.col-25 + .col-25 + div.col-50  { margin-right: 0px; }*/

/* column width for percent*/
[class*="col-full-"] { margin:0; float: left; }
.col-full-100 { width:100%; }
.col-full-75 { width:75%; }
.col-full-67 { width:66.67%; }
.col-full-50 { width:50%; }
.col-full-33 { width:33.33%; }
.col-full-25 { width:25%; }

.col-full-80 { width:80%; }
.col-full-60 { width:60%; }
.col-full-40 { width:40%; }
.col-full-20 { width:20%; }

/* 不知用在哪 先註解 carrie 20160104
[class^="col-full-"] > .itemBox .defaultWrap { margin-bottom:0 !important; }*/

[class*="col-"][data-col="ulink-col"] { float: left; }


/*=========================== 
	     滿版傳統排版 
=============================*/
.wrapper.w-full [class*="col-"] { margin:0 !important; }
.wrapper.w-full .col-100 { width:100% !important; }
.wrapper.w-full .col-75 { width:75% !important; }
.wrapper.w-full .col-67 { width:66.67% !important; }
.wrapper.w-full .col-50 { width:50% !important; }
.wrapper.w-full .col-33 { width:33.33% !important; }
.wrapper.w-full .col-25 { width:25% !important; }

.wrapper.w-full .col-80 { width:80% !important; }
.wrapper.w-full .col-60 { width:60% !important; }
.wrapper.w-full .col-40 { width:40% !important; }
.wrapper.w-full .col-20 { width:20% !important; }


/*=========================== 
			磚格排版 
=============================*/
.scroll-pane-grid {
    width:100%;
    height:100%;
    overflow:hidden;
}
.gridster {
    position:relative;
    margin: 0 auto;
    -webkit-transition: opacity .6s;
    transition: opacity .6s;
}
.gridster > div { position: relative; }
.gridster > div > div > div.scroll-pane-grid { overflow: hidden; }
.gridster > * {
    /*margin: 0 auto;*/
    -webkit-transition: height .4s, width .4s;
    transition: height .4s, width .4s;
}
.gridster .gs-w {
    z-index: 2;
    position: absolute;
    -webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.ready .gs-w:not(.preview-holder) {
    -webkit-transition: opacity .3s, left .3s, top .3s;
    -moz-transition: opacity .3s, left .3s, top .3s;
    -o-transition: opacity .3s, left .3s, top .3s;
    transition: opacity .3s, left .3s, top .3s;
}
.ready .gs-w:not(.preview-holder),
.ready .resize-preview-holder {
    -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
    -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
    -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
    transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
}
.gridster .preview-holder {
    z-index: 1;
    position: absolute;
    background-color: #cdcdcd;
    opacity: 0.3;
}
.gridster .player-revert {
    z-index: 10!important;
    -webkit-transition: left .3s, top .3s!important;
    -moz-transition: left .3s, top .3s!important;
    -o-transition: left .3s, top .3s!important;
    transition:  left .3s, top .3s!important;
}
.gridster .dragging,
.gridster .resizing {
    z-index: 10!important;
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -o-transition: all 0s !important;
    transition: all 0s !important;
}
.gs-resize-handle {
    position: absolute;
    /*z-index: 1; 
    overflow: hidden;*/
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}
.gs-resize-handle::before {
	content: '';
    display: block;
    right: 0;
    bottom: 0;
    position: absolute;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAHUlEQVQIW2NkQAP/////DxJipKIEzEx0IxlxSQAA9AUX7+xDlf8AAAAASUVORK5CYII=');
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    z-index: 503;/* carrie 20160302 */
}
.gs-resize-handle-both {
	width: 100%;
    height: 30px;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.5);
    /*border-width: 0 0 40px 40px;
    border-color: transparent transparent rgba(29,32,39,0.8);
    border-style: solid;*/

    /*z-index: 502; 註解 carrie 20160302

    避免壓到下方row的adminbox 20160224 Gabby*/
    cursor: se-resize;
}
.gs-resize-handle-x {
    top: 0;
    bottom: 13px;
    right: -5px;
    width: 10px;
    cursor: e-resize;
}
.gs-resize-handle-y {
    left: 0;
    right: 13px;
    bottom: -5px;
    height: 10px;
    cursor: s-resize;
}
.gs-w:hover .gs-resize-handle,
.resizing .gs-resize-handle { opacity: 1; }
.gs-resize-handle,
.gs-w.dragging .gs-resize-handle { opacity: 0; }
.gs-resize-disabled .gs-resize-handle { display: none !important; }
[data-max-sizex="1"] .gs-resize-handle-x,
[data-max-sizey="1"] .gs-resize-handle-y,
[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle { display: none !important; }
.controls { margin-bottom: 20px; }


/*=========================== 
			自由排版 
=============================*/
.wrapper.dragResizable { min-height: 200px; }
.dragResizable .draggable {
	width: 230px;
	height: 200px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}
.dragResizable .draggable { left: 0px; }
.dragResizable .draggable + .draggable { left: 250px; }
.dragResizable .draggable + .draggable + .draggable { left: 500px; }
.dragResizable .draggable + .draggable + .draggable + .draggable { left: 750px; }
.ui-resizable-helper { border: 1px dashed #cdcdcd; }
.dragResizable .draggable:hover .ui-resizable-handle { opacity: 1; }
.dragResizable .draggable .ui-resizable-handle {
    width: 0;
    height: 0;
    bottom: 0;
    right: 0;
    border-style: solid;
    z-index: 600;
    border-width: 0 0 40px 40px;
    border-color: transparent transparent rgba(29,32,39,0.8);
    cursor: se-resize;
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}
/*右下*/
.dragResizable .draggable .ui-resizable-se::before {
	right: 0;
    bottom: 0;
    content: '';
    display: block;
    right: 0;
    bottom: -42px;
    position: absolute;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAHUlEQVQIW2NkQAP/////DxJipKIEzEx0IxlxSQAA9AUX7+xDlf8AAAAASUVORK5CYII=');
    background-position: center center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
}

/* 排版 左側固定 右側固定 */
/* carrie 20160316 */
[data-sticky_column_right] {
  float: left;
  height: auto;
}


/*responsive*/
@media screen and (max-width : 1179px) and (min-width : 681px) {
	/* column width for px */
	.wrapper.w-1180 [class*="col-"] { margin: 1% !important; }
}
@media screen and (max-width : 1179px) {
	/* .gridster.w-1180 .gs-w { margin-left: 1% !important; margin-right: 1% !important; } */

	.wrapper.w-1180 .col-100 { width:100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	.wrapper.w-1180 .col-60 { width:58% !important; }

	.wrapper.w-1180 .col-40 { width:38% !important; }

	.wrapper.w-1180 .col-50 { width:48% !important; }
	.wrapper.w-1180 .col-33 { width:31.33333% !important; }
	.wrapper.w-1180 .col-25 { width:23% !important; }
	.wrapper.w-1180 .col-20 { width:18% !important; }
	.wrapper.w-1180 .col-67 { width:65% !important; }
	.wrapper.w-1180 .col-75 { width:73% !important; }
	.wrapper.w-1180 .col-80 { width:78% !important; }

	.wrapper.w-1180 [class*="col-full-"] { margin:0 !important; }


	/* 模組列表&內頁排版 */
	.ulink-row[class*="layout"] .wrapper.w-1180 [class*="col-full-"] { margin:0 !important; }
	.ulink-row[class*="layout"] .wrapper.w-1180 [class*="col-full-"] [class*="col-"] { margin: 0 0% 2% 0% !important; width:100% !important; }

	.ulink-row[class*="layout"] .wrapper.w-1180 [class*="col-full-"] .col-50 { margin: 0 4% 2% 4% !important; width:92% !important; }
	.ulink-row[class*="layout"] .wrapper.w-1180 [class*="col-full-"] .col-75 { margin: 0 0% 2% 4% !important; width:96% !important; }
	.ulink-row[class*="layout"] .wrapper.w-1180 [class*="col-full-"] .col-100 { margin: 0 0% 2% 4% !important; width:96% !important; }

	/*.ulink-row[class*="layout"] .col-full-67 .col-50 { margin: 0 6% 2% 6% !important; width:88% !important; }*/
	.ulink-row[class*="layout"] .wrapper.w-1180 .col-full-100 .col-100 { margin: 0 0% 2% 0% !important; width:100% !important; }

	.wrapper.w-1180 .col-full-100 { width:100% !important; }
	.wrapper.w-1180 .col-full-75 { width:75% !important; }
	.wrapper.w-1180 .col-full-67 { width:66.67% !important; }
	.wrapper.w-1180 .col-full-50 { width:50% !important; }
	.wrapper.w-1180 .col-full-33 { width:33.33% !important; }
	.wrapper.w-1180 .col-full-25 { width:25% !important; }

	.wrapper.w-1180 .col-full-80 { width:80% !important; }
	.wrapper.w-1180 .col-full-60 { width:60% !important; }
	.wrapper.w-1180 .col-full-40 { width:40% !important; }
	.wrapper.w-1180 .col-full-20 { width:20% !important; }
	
	.ulink-row.layout202 .wrapper.w-1180 [class*="col-full-"] .col-75, 
	.ulink-row.layout205 .wrapper.w-1180 [class*="col-full-"] .col-75, 
	.ulink-row.layout302 .wrapper.w-1180 [class*="col-full-"] .col-75, 
	.ulink-row.layout305 .wrapper.w-1180 [class*="col-full-"] .col-75, 
	.ulink-row.layout403 .wrapper.w-1180 [class*="col-full-"] .col-75 { margin: 0 4% 2% 0% !important; }

	.ulink-row.layout402 .wrapper.w-1180 .col-full-75 .col-full-67, 
	.ulink-row.layout403 .wrapper.w-1180 .col-full-75 .col-full-67 { width:67% !important; }
	.ulink-row.layout402 .wrapper.w-1180 .col-full-75 .col-full-33, 
	.ulink-row.layout403 .wrapper.w-1180 .col-full-75 .col-full-33 { width:33% !important; }

	.ulink-row.layout402 .wrapper.w-1180 .col-full-75 .col-full-67 .col-50, 
	.ulink-row.layout403 .wrapper.w-1180 .col-full-75 .col-full-67 .col-50 { margin: 0 6% 2% 6% !important; width:88% !important; }


	/* 磚格 */
	.gridster.w-1180 > div {
		width:100% !important;
	}
}
@media screen and (max-width : 1023px) and (min-width : 681px) {
	/* column width for px */
	[class*="col-"] { margin: 1% !important; }
}
@media screen and (max-width : 1023px) {
	/*.gs-w { margin-left: 1% !important; margin-right: 1% !important; }*/

	.col-100 { width:100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	.col-60 { width:58% !important; }

	.col-40 { width:38% !important; }

	.col-50 { width:48% !important; }
	.col-33 { width:31.33333% !important; }
	.col-25 { width:23% !important; }
	.col-20 { width:18% !important; }
	.col-67 { width:65% !important; }
	.col-75 { width:73% !important; }
	.col-80 { width:78% !important; }

	[class*="col-full-"] { margin:0 !important; }


	/* 模組列表&內頁排版 */
	.ulink-row[class*="layout"] [class*="col-full-"] { margin:0 !important; }
	.ulink-row[class*="layout"] [class*="col-full-"] [class*="col-"] { margin: 0 0% 2% 0% !important; width:100% !important; }

	.ulink-row[class*="layout"] [class*="col-full-"] .col-50 { margin: 0 4% 2% 4% !important; width:92% !important; }
	.ulink-row[class*="layout"] [class*="col-full-"] .col-75 { margin: 0 0% 2% 4% !important; width:96% !important; }
	.ulink-row[class*="layout"] [class*="col-full-"] .col-100 { margin: 0 0% 2% 4% !important; width:96% !important; }

	/*.ulink-row[class*="layout"] .col-full-67 .col-50 { margin: 0 6% 2% 6% !important; width:88% !important; }*/
	.ulink-row[class*="layout"] .col-full-100 .col-100 { margin: 0 0% 2% 0% !important; width:100% !important; }

	.col-full-100 { width:100% !important; }
	.col-full-75 { width:75% !important; }
	.col-full-67 { width:66.67% !important; }
	.col-full-50 { width:50% !important; }
	.col-full-33 { width:33.33% !important; }
	.col-full-25 { width:25% !important; }

	.col-full-80 { width:80% !important; }
	.col-full-60 { width:60% !important; }
	.col-full-40 { width:40% !important; }
	.col-full-20 { width:20% !important; }
	
	.ulink-row.layout202 [class*="col-full-"] .col-75, 
	.ulink-row.layout205 [class*="col-full-"] .col-75, 
	.ulink-row.layout302 [class*="col-full-"] .col-75, 
	.ulink-row.layout305 [class*="col-full-"] .col-75, 
	.ulink-row.layout403 [class*="col-full-"] .col-75 { margin: 0 4% 2% 0% !important; }

	.ulink-row.layout402 .col-full-75 .col-full-67, 
	.ulink-row.layout403 .col-full-75 .col-full-67 { width:67% !important; }
	.ulink-row.layout402 .col-full-75 .col-full-33, 
	.ulink-row.layout403 .col-full-75 .col-full-33 { width:33% !important; }

	.ulink-row.layout402 .col-full-75 .col-full-67 .col-50, 
	.ulink-row.layout403 .col-full-75 .col-full-67 .col-50 { margin: 0 6% 2% 6% !important; width:88% !important; }


	/* 磚格 */
	.gridster > div {
		width:100% !important;
	}
}
@media screen and (max-width : 800px) {
	.wrapper.w-1180 .col-full-75 { width:50% !important; }
	.wrapper.w-1180 .col-full-25 { width:50% !important; }
	.wrapper.w-1180 .col-full-80 { width:100% !important; }
	.wrapper.w-1180 .col-full-20 { width:100% !important; }

	.col-full-25 { width:50% !important; }
	.col-full-80 { width:100% !important; }
	.col-full-20 { width:100% !important; }
	.col-full-75 { width:50% !important; }

	/*.ulink-row[class*="layout"] .col-full-25, 
	.ulink-row[class*="layout"] .col-full-33 { display: none !important; }*/
	
	.ulink-row[class*="layout"] .col-full-50,  
	.ulink-row[class*="layout"] .col-full-75 { width:100% !important; }

	.ulink-row[class*="layout"] [class*="col-full-"] .col-50,
	.ulink-row[class*="layout"] [class*="col-full-"] .col-75, 
	.ulink-row.layout401 [class*="col-full-"] .col-100 { margin: 0 0% 2% 0% !important; width:100% !important; }

	.ulink-row.layout402 .col-full-75 .col-full-67, 
	.ulink-row.layout403 .col-full-75 .col-full-67 { margin: 0 0% 2% 0% !important; width:100% !important; }

	.ulink-row.layout402 .col-full-75 .col-full-67 .col-50, 
	.ulink-row.layout403 .col-full-75 .col-full-67 .col-50 { margin: 0 0% 2% 0% !important; width:100% !important; }	
}
@media screen and (max-width : 680px) {

	.ulink-column.empty {
		min-height: initial;
	}

	/* column width for px */
	.wrapper.w-1180 .col-60 { width:100% !important; }

	.wrapper.w-1180 .col-40 { width:100% !important; }

	.wrapper.w-1180 .col-50 { width:100% !important; }
	.wrapper.w-1180 .col-33 { width:100% !important; }
	.wrapper.w-1180 .col-25 { width:100% !important; }
	.wrapper.w-1180 .col-20 { width:100% !important; }
	.wrapper.w-1180 .col-67 { width:100% !important; }
	.wrapper.w-1180 .col-75 { width:100% !important; }
	.wrapper.w-1180 .col-80 { width:100% !important; }

	[class*="col-"] { margin-left: 0 !important; margin-right: 0 !important; }
	.col-60 { width:100% !important; }
	.col-40 { width:100% !important; }
	.col-33 { width:100% !important; }
	.col-50 { width:100% !important; }
	.col-25 { width:100% !important; }
	.col-67 { width:100% !important; }
	.col-75 { width:100% !important; }
	.col-80 { width:100% !important; }
	.col-20 { width:100% !important; }
	
	/* column width for percent*/
	.wrapper.w-1180 .col-full-100 { width:100% !important; }
	.wrapper.w-1180 .col-full-75 { width:100% !important; }
	.wrapper.w-1180 .col-full-67 { width:100% !important; }
	.wrapper.w-1180 .col-full-50 { width:100% !important; }
	.wrapper.w-1180 .col-full-33 { width:100% !important; }
	.wrapper.w-1180 .col-full-25 { width:100% !important; }

	.wrapper.w-1180 .col-full-80 { width:100% !important; }
	.wrapper.w-1180 .col-full-60 { width:100% !important; }
	.wrapper.w-1180 .col-full-40 { width:100% !important; }
	.wrapper.w-1180 .col-full-20 { width:100% !important; }

	[class*="col-full-"] { margin:0 !important; }
	.col-full-50 { width:100% !important; }
	.col-full-33 { width:100% !important; }
	.col-full-25 { width:100% !important; }
	.col-full-60 { width:100% !important; }
	.col-full-40 { width:100% !important; }
	.col-full-75 { width:100% !important; }
	.col-full-67 { width:100% !important; }

	.col-full-25 .col-25, 
	.col-full-50 .col-50, 
	.col-full-75 .col-75, 
	.col-full-67 .col-50, 
	.col-full-33 .col-25 { width:100% !important; }

	.col-full-100 .col-75 { width:100% !important; margin:0 0 8% 0 !important; }
	
	.gs-resize-handle { display: none !important; }
	.gridster > div { height: auto !important; }
	.gridster > div > div {
		width: 98% !important;/*左右有1%margin 所以是98% carrie 20160412*/
		height:100% !important;
		position: relative !important;
		left: 0 !important;
		margin-bottom: 30px !important;
		top: 0 !important;
	}

	.dragResizable .draggable {
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		left: 0 !important;
		top: 0 !important;
		margin-bottom: 30px !important;
	}
}