﻿@charset "UTF-8";
/* CSS Document */

/*---- 把原本checkbox樣式關掉 ---*/
#OnlineServiceBox input[type=checkbox] {
	display: none; 
}

/*---- 內空一開始關起來 ---*/
#OnlineService:checked + .open-btn { 
	display: none; 
}

/*---- 被打開內容 ---*/
.open-btn{
	position: fixed;
	/* bottom:10px; */
	bottom:120px;
	right: 15px;
	font-family:Arial, "微軟正黑體", sans-serif;
	z-index:900;
}

@media (max-width:767px){
	.open-btn{bottom:190px;}
}

.open-btn img { 
	cursor: pointer;
	width: 88px;
	height: 107px;
}


.open-btn .onlinetext{
	/* position: absolute;
	bottom: 0px;
	left: 14px;	 */margin-top: -26px;
	text-align: center;
	z-index: 10;
	width: 100%;
	bottom: 0px;
	left: 14px;
	color: #fff;
	font-size: 15px;
	line-height: 28px;
}

/*---- service-box內容 ---*/
.service-box {       
    position: fixed;
    bottom: 10px;
    right: 15px;	
	font-family:Arial, "微軟正黑體", sans-serif;
	z-index:900;
}
.service-box .title{
	font-size: 18px;
	color: #407cbc;
	font-weight: bold;
	margin: 5px 0 16px 10px
}
.service-box .title img{
	vertical-align: -8px;
}
.service-box .content-link{
	background-color: #fff;
	width: 90%;
	margin: -2px auto 12px auto;
	box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.2);
	border-radius: 5px;
}
.service-box .content-link::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 14px 14px 0px;
    border-color: transparent transparent #fff transparent;
    top: 46px;
    left: 53px;
}
.service-box .content-link ul{
	padding: 8px 16px;
}
.service-box .content-link ul li{
	list-style: none;
	margin: 8px 0;
}
.service-box .content-link ul li img{
	vertical-align: middle;
}
.service-box .content-link ul li a{
	text-decoration: none;
	font-size: 16px;
	color: #626262;
	font-weight:normal;
}
.service-box .content-link ul li a:hover{
	text-decoration: underline;
}
.service-box .content-link ul li span{
	font-size: 14px;
	color: #626262;
	margin-left: 20px;
	font-weight:normal;
}
.service-box .download-btn{
	overflow: hidden;	
}
.service-box .download-btn .line {
    border-right: 1px solid #c8c8c8;
    height: 20px;
    float: left;
}
.service-box .download-btn .download-btn-txt a{
	font-size: 15px;
	color: #898989;
	width: 49%;
	float: left;
	text-align: center;
	text-decoration: none;
	height: 40px;	
}
.service-box .download-btn .download-btn-txt span{
	font-size: 11px;
}
.service-box .download-btn .download-btn-txt a:hover{
	text-decoration: underline;
}
/*---- 打開內容後open按鈕消失 ---*/
.service-box label[for=OnlineService] {
	display: none; 
}

/*--- open按鈕 ---*/
#OnlineService:checked ~ .service-box label[for=OnlineService] {
	display: block; 
}
label{}
label.content-box{
	border:1px solid #d9d9d9;
	width: 258px;
	border-radius: 5px;
	background-color: #f4f4f4; 
	display:block;
}
label .close-btn {
    display: block;
    background-color: #b5b5b5;
    border-radius: 5px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    right: 13px;
    text-align: center;
}
label .close-btn span {
    display: block;
    background: #fff;
    border: none;
    width: 24px;
    height: 3px;
    border-radius: 5px;
	margin-left: 3px;
}
label .close-btn span.bar-right{
	transform: translateY(14px) translateX(0) rotate(45deg);
	-webkit-transform: translateY(14px) translateX(0) rotate(45deg);
}
label .close-btn span.bar-left{
	transform: translateY(12px) translateX(0) rotate(-45deg);
	-webkit-transform: translateY(12px) translateX(0) rotate(-45deg);
}

/*  新版客服樣式2020-03-20  */
        .back-page-top-open-btn {
            position: fixed;
            bottom: 75px;
            right: 6px;
            z-index: 1500;
            font-size: 14px;
            display: block;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            padding-top: 14px;
            text-align: center;
            border: 1px solid #ddd;
            margin: 10px auto 0 auto;
            background-color: #ffffff;
            color: #666666;
            cursor: pointer;
            line-height: 1.5;
        }

        .back-page-top-open-btn  img{
            display: block;
            margin: 0 auto 0px auto;
        }


