@import url("https://fonts.googleapis.com/css?family=Barlow|Montserrat");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");


.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
	overflow:hidden;
}
.clearfix{
    zoom:1;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix  { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.right { float:right}
.left { float:left}

/* unvisited link */
a:link {
    color: #6C2BEE;

}

/* visited link */
a:visited {
    color: #6C2BEE;

}

/* mouse over link */
a:hover {
    color: #E620A0;
}

/* selected link */
a:active {
    color: #94A0AE;
}

body { font-family: Barlow, Open Sans, Helvetica; overflow:visible; background:#fff}
body.bk { /*background:url(../img/bg.jpg) top no-repeat*/}

.container.livechat { /*margin-top:20px;*/ height:100vh; width:100%; padding:0; margin:0; padding:20px 0}
.container.livechat .content { background:#fff; padding:0; position:relative; margin:0 auto; text-align:center}
.container.livechat .content .group { margin-bottom:30px; position:relative}
.container.livechat h2 {text-align:left; color:#140031}

.top-nav { display:none}
.with-top .top-nav { display:block}
.top-nav .left-corner, .top-nav .right-corner { width:25px; position:absolute}
.top-nav .left-corner  img, .top-nav .right-corner img { width:100%}
.top-nav .left-corner { top:25px; left:25px; }
.top-nav .right-corner { top:25px; right:25px;}


.livechat .main-logo { width:30%; margin:0 auto; text-align:center; margin-bottom:2em}
.livechat h1 { font-size:4em; font-family:Montserrat, Open Sans, Helvetica; text-align:center; color:#000; font-weight:bold}
.livechat p.h1 { color:#000; font-size:18px; font-weight:bold; line-height:22px; margin-bottom:20px}
.livechat p { color:#4D5154; font-size:18px; line-height:22px}

/* Button */
.button {position: relative;display: inline-block;padding: 12px 24px;margin: .3em 0 1em 0;width: 100%;vertical-align: middle;color: #fff;font-size: 1.1em;line-height: 30px;-webkit-font-smoothing: antialiased;text-align: center; background: transparent;border: 0;cursor: pointer;-webkit-transition: all 0.15s ease;transition: all 0.15s ease;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;font-family:Barlow, sans-serif; font-weight: 700; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out; font-family:Montserrat, Open Sans, Helvetica;}
.button:focus { outline: 0; }
.button:disabled {/*-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: 0.5;*/ color: #fff; background: #ccc; pointer-events: none;}
.buttonLightWhite:hover { background:#e620a0; border:2px #e620a0 solid}
a.button { color: white;}

.buttonLightWhite { /*background:#6F63FF*/background:none; border:2px #fff solid}

/* Button modifiers */
.buttonBlue {background: #3B5998}
.buttonGary { background:#94A0AE}
.buttonRed { background:#DC4E41}
.buttonSkyblue { background:#5a8edc}
.buttonLightPurple { /*background:#6F63FF*/background:#33058D}
.buttonPurple { background:#33058D}
.buttonFuchsia { background:#E620A0}
.buttonBlue:hover, .buttonGary:hover, .buttonRed:hover, .buttonLightPurple:hover, .buttonPurple:hover, .buttonFuchsia:hover {-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; -ms-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition: all 0.5s ease-out;}

form { margin: 4em auto;}

.remarks{padding:2em; border: 1px solid #94A0AE; background-color: #f5f5ff; }
.color_lp {color:#6C2BEE;}
.pad-top-2 {padding-top:2em;}

.nowrap {white-space: nowrap;}