@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
.content {
  font-family: 'Noto Sans TC';
}
.container-wrap {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto !important;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.part-description .pic {
  margin-left: -45px;
  max-height: 400px;
}
.part-description .text {
  /*
    position: absolute;
    right: 6%;
*/
  padding-top: 4.5rem;
  max-width: 415px;
}
.part-description .text h3 {
  color: #4b78ba;
  font-size: 2.2em;
  line-height: 1;
  margin: 0;
  padding-left: 6px;
}
.part-description .text h2 {
  color: #4b78ba;
  font-size: 4em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.part-description .text .hr {
  height: 3px;
  width: 100%;
  display: block;
  background: linear-gradient(to right, #00b6ff 0%, #00d7d1 100%);
}
.part-description .text p {
    font-size: 1.1em;
    padding-left: 6px;
    letter-spacing: 3px;
    margin-top: 25px;
    position: relative;
    z-index: 99;
}
.QRcode {
  display: inline-block;
  margin-left: 7px;
}
.QRcode p {
  color: #5d5d5d;
  font-weight: bold;
  padding: 0 !important;
  font-size: 20px !important;
  margin-bottom: 5px;
}
section.feature {
  background-color: #e9eeef;
  margin: 50px auto 0;
  text-align: center;
  padding-bottom: 40px;
}
section.feature .feature-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.feature-wrap .title, .dashboard .title {
  color: #2a2a2a;
  font-size: 36px;
  padding: 30px 0 20px;
}
.feature-wrap .point {
  background-color: #fff;
  margin: 10px 20px;
  border-radius: 20px;
  line-height: 2;
  letter-spacing: 2px;
}
.feature-wrap .point span {
  color: #698398;
}
.solution-wrap {
  max-width: 1200px;
  margin: 30px auto !important;
}
.solution-block {
  background-color: #fff;
  border: 2px solid #0a7eda;
  height: 150px;
  text-align: left;
  max-width: 370px !important;
  margin: 10px;
  padding: 20px 40px !important;
  transition: .3s;
}
.solution-title {
  font-size: 20px;
  color: #0a7eda;
  font-weight: 600;
}
/*

.solution-block:before {
    content: '';
    background-color: #0a7eda;
    width: 50px;
    height: 50px;
    border-radius: 100% 0 0;
    position: absolute;
    right: 0;
    bottom: 0;
}

.solution-block:after {
    content: '\f100';
    font-family: 'FontAwesome';
    color: #fff;
    text-align: center;
    line-height: 40px;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    font-size: 26px;
    transform: rotate(45deg);
}
*/
.zoomin-btn {
  display: inline-block;
  position: absolute;
  right: 0;
  bottom: 0;
  background: #0a7eda;
  width: 50px;
  height: 50px;
  border-radius: 100% 0 0;
  color: #fff;
  text-align: center;
  font-size: 26px;
  line-height: 50px;
}
.zoomin-btn i {
  transform: rotate(45deg);
}
.solution-block:hover .zoomin-btn {
  background: #fff;
  width: 150px;
  height: 40px;
  border-radius: 30px 0 0;
  transition: .3s;
}
.hover-after {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  width: 140px;
  height: 45px;
  line-height: 50px;
}
.hover-after a {
  color: #0b65ad;
  font-size: 18px;
  text-decoration: none;
  padding: 8px 20px;
  white-space: nowrap;
}
.hover-after i {
  transform: unset;
}
.solution-block:hover .hover-after {
  opacity: 1;
  color: #0a7eda;
  font-size: 18px;
  transition: .3s;
}
.solution-title i {
  margin-right: 10px;
}
.solution-block:hover .solution-block-front {
  color: #fff;
  transition: .3s;
}
/*
.solution-block:hover::before {
    background-color: #fff;
    width: 150px;
    height: 50px;
    border-radius: 40px 0px 0;
    transition: .5s;
    color: #0a7eda;
}
.solution-block:hover::after {
    color: #0a7eda;
    content: "MORE";
    font-family: 'Microsoft YaHei' !important;
    transform: unset;
    font-size: 17px;
    letter-spacing: 2px;
    width: 135px;
}
*/
.solution-block:hover {
  background-color: #0a7eda;
  transition: .3s;
}
.solution-block:hover .solution-block-front, .solution-block:hover .solution-title {
  color: #fff !important;
  transition: .3s;
}


.fancybox-title-float-wrap {
    margin-bottom: -45px;
}
.fancybox-title-float-wrap .child {
    font-size: 20px;
    font-family: 'Noto Sans TC';
    letter-spacing: 2px;
    padding: 3px 36px !important;
}


section.connect {
  background-image: url(/images/product/crm/2021/connect-bg.png);
      background-position: bottom center;
}
.connect_wrap {
  max-width: 1200px;
  margin: 0 auto !important;
  height: 400px;
}
.text-wrap {
  color: #fff;
}
.connect .title {
  font-size: 36px;
  letter-spacing: 2px;
  margin-bottom: 20px;
  font-weight: bold;
}
.connect .content {
  letter-spacing: 1px;
  font-size: 20px;
}
.connect .block {
  display: inline-block;
  text-align: center;
}
.connect .block img {
    display: inline-block;
    max-width: 126px;
}
.connect .block p {
  color: #fff;
  font-size: 17px;
  letter-spacing: 2px;
  margin-top: 10px;
}
section.dashboard {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;    background-color: #eaf3f5;
}
.dashboard .swiper {
  border: 2px solid #0a7eda;
  border-radius: 10px;
  max-width: 1100px;
  height: 390px;
  margin: 60px auto;
  position: relative;    overflow: unset;
}
.dashboard .swiper-slide {
    background-color: #fff;
    border-radius: 10px;

    opacity: 0 !important;
}
.dashboard .swiper-slide.swiper-slide-active {
    opacity: 1 !important;
}
.dashboard .swiper-pagination {
  top: -60px;
  bottom: unset !important;
}
span.swiper-pagination-bullet {
  width: 100px;
  margin: 0 25px !important;
  font-size: 20px;
  background-color: unset;
  letter-spacing: 2px;
  height: 37px;    opacity: .5;
}
span.swiper-pagination-bullet-active {
  color: #0a7eda;
  border-bottom: 5px solid #7bd6ff;
  border-radius: unset;
  position: relative;    opacity: 1;
}
span.swiper-pagination-bullet-active:after {
  content: '\f0d7';
  font-family: 'FontAwesome';
  color: #7bd6ff;
  font-size: 39px;
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
}
.dashboard .text-wrap {
  color: #787878;
  text-align: left;
  margin-right: 15px;
}
.dashboard .text-wrap .slide-title {
  margin-top: 50px;
  color: #0a7eda;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;width: 90%;
}
hr.dashboard-hr {
  height: 3px;
  width: 40%;
  display: block;
  background: linear-gradient(to right, #00b6ff 0%, #1deae5 100%);
}
.dashboard p {
  letter-spacing: 1px;
  font-size: 17px;
  width: 85%;
}



@media screen and (max-width: 768px) {	

.feature-wrap .point {
    font-size: 15px;
    letter-spacing: 0;
    margin: 10px;
}
	
.solution-block {
    max-width: 330px !important;
    padding: 20px 20px !important;
}
	
.solution-title {
    font-size: 18px;
}	
section.connect {
  background-image: url(/images/product/crm/2021/connect-bg-phone.png);
      background-position: bottom center;
}
.connect_wrap {
    height: auto;
    padding-bottom: 50px;
}	
span.swiper-pagination-bullet {
    width: 19%;
    margin: 0 !important;
    font-size: 18px;
}
.dashboard .text-wrap .slide-title {
    margin-top: 10px;
    width: 100%;
    text-align: center;
}
.dashboard .text-wrap {
    margin-bottom: 15px;
    margin-right: 0;
    padding: 0 !important;
}
.dashboard .swiper {
    height: 520px;
}	
.part-description .pic {
    margin: 0 !important;
}

.dashboard .swiper-slide img {
    width: 100% !important;
    max-width: 585px !important;
    display: inline-block !important;
}
.dashboard .swiper {
    height: 500px;
    margin: 60px 20px;
}
	hr.dashboard-hr {
    margin: 11px auto;
}
	
	.feature-wrap .title, .dashboard .title {
    font-size: 30px;
}
.dashboard p {
    letter-spacing: 1px;
    font-size: 17px;
    width: 90%;
    text-align: center;
    margin: 0 auto;
}
	.swiper-slide.d-flex {
    display: inline-block !important;
}
	
	.swiper-slide {
    flex-direction: column;
}
	.dashboard-img {
    justify-content: center;
}
	
}





section.price_table {
    margin: 50px auto;
    text-align: center;
}
.price_table_wrap {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/*-----------------------price_menu 設定-----------------------*/

.price_menu-wrap{position: relative;padding-top: 230px;}
.price_menu{position: absolute;background: #fff;z-index: 99;top: 0;}
.price_wrap.fixed .price_menu{ position: fixed;top: 62px;}
.price_wrap.absolute .price_menu{ top: auto;bottom: 0;position: absolute !important;}

.price_wrap.fixed .price_menu p ,.price_wrap.fixed .price_menu .price_main,
.price_wrap.absolute .price_menu p ,.price_wrap.absolute .price_menu .price_main
{display: none;}
.price_wrap.fixed .price_menu .top_menu td ,
.price_wrap.absolute .price_menu .top_menu td 
{height: auto;}


.price_detail{position: relative;}



@media screen and (max-width: 768px) {	

    .price_wrap.fixed .price_menu{ top: 0;}
    .price_menu-wrap{position: relative;padding-top: 243px;}
    
}

.price_detail .top_menu td {
    height: 230px;
}

.ver_wrap.ver_empty {
    max-width: 170px;border: 0; box-shadow: none;
}
.ver_wrap img {
    display: inline-block;
    vertical-align: middle;
}
.table_title {
    display: inline-block;
    font-size: 28px;
    font-weight: bold;
    padding: 5px 0;
    color: #4ca9f3;
    width: 100%;
}
.price_main{color: #4ca9f3;}
.ver_basic .table_title,.ver_basic .price_main {
    color: #0a7eda;
}
.ver_company .table_title,.ver_company .price_main {
    color: #006fc7;
}
.ver_ultimate .table_title,.ver_ultimate .price_main {
    color: #03579a;
}
.ver_wrap p {
    color: #777777;    line-height: 1.4;
}

.ver_wrap.ver_basic{border-top: 5px solid #0a7eda;}
.ver_wrap.ver_company{border-top: 5px solid #006fc7;}
.ver_wrap.ver_ultimate{border-top: 5px solid #03579a;}

.price_main {
    font-size: 28px;
    margin-top: 3px;
}

.price_main span {
    font-size: 30px;
    font-weight: bold;
}


.price_wrap .price_compare .price_type {
    width: 100%;
    vertical-align: middle;
    padding: 10px;
    font-weight: bold;
        color: #0a7eda;
    cursor: pointer;
        font-size: 24px;
    letter-spacing: 3px;
        background-color: #f8f8f8;
    text-align: left;
    position: relative;
}
.price_wrap .price_compare .price_type:before {
    content: "\f196";
       color: #0a7eda;
    font-family: 'FontAwesome';
    font-size: 28px;
    position: relative;
    top: 2px;
    margin-right: 10px;
    font-weight: normal;
}
 .price_wrap  .price_compare .price_type.close:before{ content:"\f147";}


 .price_wrap table {
    width: 100%;
    text-align: left;
}
.price_detail td {
    text-align: center;
    width: 20%;
    max-width: 233px;
    margin-right: 12px;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    line-height: 50px;
}
.ver_wrap {
    padding-top: 10px;
}
.ver_wrap.ver_free {
    border-top: 5px solid #4ca9f3;
}
.top_menu td.detail_main {
    background-color: unset !important;
    box-shadow: none;
}

td.detail_main {
    width: 209px;
    background-color: #00ceb9;
    color: #fff;
   font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    border-bottom: 2px solid;
    margin-right: 0;
}

.price_detail i.fa.fa-check {
    color: #ffa200;
}
.price_detail td:nth-child(5) {
    margin-right: 0;
}

.price_detail tr:nth-child(even) td {
    background-color: #f4f4f4;
}
.price_detail .detail_main {
    background-color: #0a7eda !important;
    box-shadow: none;
}
.user_plus {
    font-size: 24px;
    padding-top: 30px;
    color: #666;
}
td.detail_main.dbline {
    line-height: 1.3;
}
td.detail_main.dbline P {
    font-size: 15px;
}


@media screen and (max-width: 1200px) {	

td.detail_main {
    width: 180px;
}
.price_detail td {
    width: 18%;
}	

}


@media screen and (max-width: 768px) {	

	.empty{display: none;}

	.QRcode .ver_web{display: none;}
	.QRcode .ver_phone {
    display: inline-block;
    color: #fff;
    padding: 3px 50px;
    font-size: 24px;
    letter-spacing: 1px;
    font-weight: bold;
    border: 2px solid;
}
	
	.QRcode a.ver_phone {
    display: inline-block;
    color: #4b78ba;
    font-size: 20px;
    margin: 20px 0 10px ;
}
	section.connect {
    height: auto;
    padding: 0 15px;
}
	br.ver_phone {display: inline-block;}
	
	
	.connect .title {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
    margin: 30px 0 20px;
    padding: 40px 0 0;
}

	
.connect_wrap .content {
    width: 100%;
    font-size: 18px;
    margin-bottom: 30px;
}
	
.connect_wrap img {
    padding: 10px 0;
    width: 100%;
}
	.connect .ver_web	{display: none;}
	
	
}




@media screen and (max-width: 450px) {	
	
	
	
 .connect .title, .feature-wrap .title, .dashboard .title {
    padding: 30px 0;
    margin: 0;font-size: 26px;
}
.feature-wrap .point {
    margin: 5px auto;
    max-width: 120px;
    font-size: 14px;
}
	.connect .block {
    padding: 0px 10px !important;
}
	.dashboard .swiper {
    margin: 80px auto 60px;
}
	.dashboard .swiper-pagination {
    top: -100px;
}
	span.swiper-pagination-bullet-active:after {
		content: unset ;}
	span.swiper-pagination-bullet {
    width: 30%;
    margin: 5px 0 !important;
}
	.dashboard .swiper {
    height: 380px;
}
	.dashboard .text-wrap .slide-title {
    width: 100%;
    font-size: 18px;
}
.dashboard p {
    width: 100%;
    font-size: 16px;
}
	
.price_main.ver_web	{display: none;}
.price_main.ver_phone {    display: inline-block;    line-height: 1.4;}
.price_main {    font-size: 14px;}
.price_main span {    font-size: 18px;}
.ver_wrap img {    width: 80%;}	
	
.table_title {    font-size: 20px;    padding: 5px 0;}
	
.ver_wrap p {    font-size: 13px;}	
	
.price_detail .top_menu td {
    height: auto;
}	
.ver_ultimate .price_main {
    margin-top: 24px;
}	
.price_detail td {
    width: 18%;
    margin-right: 3px;
    box-shadow: none;
}
td.detail_main {
    font-size: 16px;
    width: 23%;
    height: auto;
}

	td.detail_main.double_line {
    line-height: 1.5;
}
	td .ver_phone{display: inline-block;}	
	
	
	.ver_company .price_main.ver_phone {
    padding-top: 21px;
}
	
	.ver_basic .price_main.ver_phone {
    padding-top: 21px;
}
	.ver_free .price_main.ver_phone {
    padding-top: 40px;
}
	
	input#M5Code {
    width: calc(100% - 140px) !important;
}
	.content-spec article {
    width: 95% !important;
}
	.connect .title {
    text-align: center;
}
	.connect_wrap .content {
    text-align: center;
}
	td.detail_main.dbline P {
    font-size: 12px;
}
}


@media screen and (max-width: 400px) {	
.price_main span {
    font-size: 15px;
}
}