/*=================== fonts ====================*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Playfair+Display:400,700");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
/*---------------------------------------------------- */
/*----------------------------------------------------*/
footer{
	background:#eeeeee;
	color:#888;
	font-size:12px;}
.list {
  list-style: none;
  margin: 0px;
  padding: 0px; }

a {
  text-decoration: none;
  transition: all 0.3s ease-in-out; }
  a:hover, a:focus {
    text-decoration: none;
    outline: none; }

.row.m0 {
  margin: 0px; }

body {
  line-height: 25px;
  font-size: 16px;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: normal;
  color: #555; }


h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: bold;
  text-align:center; }

button:focus {
  outline: none;
  box-shadow: none; }

.p_120 {
  padding-top: 120px;
  padding-bottom: 120px; }

.pad_top {
  padding-top: 120px; }

.mb-3  {
	margin-bottom:3px;} 

.mt-25 {
  margin-top: 25px; }
  
.mt-50 {
  margin-top: 50px; }

   @media (max-width: 1199px) {
    .mt-50 {
     margin-top: 25px; } }


 
.mtb-50{
	margin:50px 0 50px 0;}

   @media (max-width: 1199px) {
    .mtb-50{
     margin:25px 0 25px 0; } }

.mtb-25{
	margin:25px 0 25px 0;}

   @media (max-width: 1199px) {
    .mtb-25{
     margin:15px 0 15px 0; } }


.padding-0{
	padding:0;}



@media (min-width: 1200px) {
  .container {
    max-width: 1190px; } }

.area-padding-top {
  padding-top: 20px; }

.area-padding-bottom {
  padding-bottom: 30px; }

.background_one {
  background: #f7f7f7; }

.border-bottom {
  border-bottom: 1px solid #e8edf1; }

img {
  max-width: 100%; }

ul {
  list-style: none;
  padding: 0; }



.col-no {    /*col-間不要有這麼大的間距*/
   padding:5px;
   margin:0;}

 @media (max-width: 991px) {
  .col-no { 
	padding:0px;
    margin:0;} }


@media (min-width: 1620px) {
  .box_1620 {
    max-width: 1650px;
    margin: auto; } }
	

/*Color*/
.c-red {color:#b80008;}


.t-right { text-align:right;}
	
.clear {clear:both;}
	
/* Main Title Area css
============================================================================================ */
.main_title {
  text-align: center;
  max-width: 680px;
  margin: 0px auto 75px; }
  .main_title h2 {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 36px;
    color: #020a21;
    margin-bottom: 12px; }
  .main_title p {
    font-size: 14px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: normal;
    line-height: 24px;
    color: #797979;
    margin-bottom: 0px; }



/*免費體驗*/
.reserve_topbar {
	padding:20px 10px 10px 20px;}

.tel_btn {    
    line-height: 36px;
    display: inline-block;
    font-size: 20px;
    margin-right: 5px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: normal;
    color: #555;
    transition: all 300ms linear 0s;
	padding:20px 0 20px 0; }

.reserve_box {	
	background:#eee;
	padding:50px 0 30px 0;
	font-size:18px;}	

.reserve_box a {	
	color:#fda700;}	

.reserve_box a:hover {	
	color:#000;}	
	
.reserve_box h2 {
	font-size:34px;
	font-weight:bold;	
	line-height:40px;}

.reserve_box h3 {
	font-size:16px;
	font-weight:normal;	
	line-height:28px;
	margin:0 0 30px 0;}

.reserve_box .opps {
	color:#C00;
	font-size:15px;}


	
.reserve_box .form-group {
	width:100%;}

.reserve_box .form-group .form-control {
	background:#fff;
	height:50px;}

.reserve_box .form-group .col-form-label{
	font-size:18px;
	text-align:right;}
	
@media (max-width: 768px) {
	.reserve_box .form-group .col-form-label{
		text-align:left;}}

input[type="checkbox"] {
	width:28px;
	height:28px;}
	
.checkbox{
	color: #000;
	font-size: 28px;
	margin:0px 0 0 0 ;}

.checkbox2{
	color: #000;
	font-size: 28px;
	margin:0px 0 0 0 ;}

input[type="checkbox2"] {
	width:10px;
	height:10px;}

	


#search_input_box {
  position: fixed;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  z-index: 999;
  text-align: center;
  padding: 0 20px;
  background: #fda700; }
  #search_input_box ::placeholder {
    color: #fff; }

#search_input_box .form-control {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-weight: 400;
  font-size: 16px;
  padding: 0; }

#search_input_box .btn {
  width: 0;
  height: 0;
  padding: 0;
  border: 0; }

#search_input_box .ti-close {
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  padding: 10px; }

.search-inner {
  padding: 5px 15px; }

.form-control:focus {
  box-shadow: none;   }

.navbar_fixed #search_input_box {
  position: fixed;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 100%;
  max-width: 1140px;
  z-index: 999;
  text-align: center;
  padding: 0 20px;
  top: 80px; }










/*主圖***************************************************************************/
.banner_area {
  position: relative;
  z-index: 1;
  min-height: 705px;
  background:#c9bfb5; }
  
  .banner_area .banner_inner {   
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 705px;
    z-index: 1;
    background-size: cover;	 }
	
   .banner_area .seronline_bg{ 
     background: url('//www.clue.com.tw/webinars/Content/images/202001_WL/LP_02.jpg') no-repeat scroll center center; }
	 
 @media (max-width: 768px) {
	.banner_area {
	 min-height: 480px;	 }
	.banner_area .banner_inner {   
	 min-height: 480px;	 }
	 
	.banner_area .seronline_bg{ 
     background: url('//www.clue.com.tw/webinars/Content/images/202001_WL/LP_02_s.jpg') no-repeat scroll center center; } }

   











.form-contact label {
  color: #000;
   }
.form-contact .form-group {
  margin-bottom: 30px; }
  
.form-contact .form-control {
  border: 1px solid #aaa;
  border-radius: 5px;
  height: 48px;
  padding-left: 18px;
  font-size: 16px;
  background: transparent; }
  .form-contact .form-control:focus {
    outline: 0;
    box-shadow: none; 
	font-size: 16px;}
  .form-contact .form-control::placeholder {
    font-weight: 300;
    color: #999999;
	font-size: 16px; }
.form-contact textarea {
  border-radius: 12px;
  height: 100% !important; }





/*====================================================================== */
/* 每頁最下方的填表*START*****************************************************
======================================================================= */
.appointment-area{
	font-family: 'Noto Sans TC', sans-serif;
	padding:30px 0 0 0;
	background:#c9bfb5;}

.appointment-area .appointment-form {
  position: relative;
  z-index: 1; 
  padding:30px 0 20px 0;
  text-align:center;}
  .appointment-area .appointment-form label {
    display: block;
    color: #333;
    font-size: 16px;
    font-family: 'Noto Sans TC', sans-serif;
    margin-bottom: 10px; }
 /*輸入欄位*/
  .appointment-area .appointment-form .input-text {
    display: block;
    width: 100%;
    border: 1px solid #b7b7b7;
    height: 60px;
	line-height:36px;
    padding: 0 25px;
	font-size:24px;
	font-family: 'Noto Sans TC', sans-serif;
	border-radius:10px;
	font-weight:normal;
	background:#fbf3db;}
    .appointment-area .appointment-form input:focus {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none; }
  .appointment-area .appointment-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #e8edf1;
    padding: 15px 15px;
    height: 150px;
    margin-bottom: 50px; }
  .appointment-area .appointment-form .form-group {
    margin-bottom: 20px; }
.appointment-area form {
  margin-top: 24px;
  display: inline-block;
  width: 100%; }


.appointment-area h3 {
  font-size: 40px;
  color: #333;
  text-transform: capitalize;
  margin-bottom: 30px 0 20px 0; 
  font-weight:normal;
  font-family: 'Noto Sans TC', sans-serif;
  text-align:center;}

.appointment-area p {
	font-size:22px;
	font-family: 'Noto Sans TC', sans-serif;
	text-align:center;}

.appointment-area .appointment-inner {
  padding: 0;
  z-index: 11;
  position: relative; }
  @media (max-width: 991px) {
    .appointment-area .appointment-inner {
      padding: 0; } }

@media (max-width: 1199px) {
  .appointment-inner .accordion {
    margin-bottom: 0; } }

.appointment-area .card h5 .btn.collapsed::after {
  content: "\e61a";
  font-family: 'Noto Sans TC', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  right: 6px;
  position: absolute;
  top: 30px; }
  @media (max-width: 600px) {
    .appointment-area .card h5 .btn.collapsed::after {
      display: none; } }







/*表單顧問圖－變手機就消失*/
.form-pic {
		background:url('//www.clue.com.tw/webinars/Content/images/202001_WL/f-b.jpg') left bottom no-repeat; }

@media only screen and (max-width:992px) {
	.form-pic {background:none;} }



.appointment-area .card h5 .btn::after {
  content: "\e622";
  font-family: 'Noto Sans TC', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  right: 6px;
  position: absolute;
  top: 30px; }
  @media (max-width: 600px) {
    .appointment-area .card h5 .btn::after {
      display: none; } }






.list-style {
  width: 14px;
  height: 14px; }

.unordered-list li {
  position: relative;
  padding-left: 30px;
  line-height: 1.82em !important; }

.unordered-list li:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 3px solid #f8b600;
  background: #fff;
  top: 4px;
  left: 0;
  border-radius: 50%; }

.ordered-list {
  margin-left: 30px; }

.ordered-list li {
  list-style-type: decimal-leading-zero;
  color: #f8b600;
  font-weight: 500;
  line-height: 1.82em !important; }

.ordered-list li span {
  font-weight: 300;
  color: #777777; }

.ordered-list-alpha li {
  margin-left: 30px;
  list-style-type: lower-alpha;
  color: #f8b600;
  font-weight: 500;
  line-height: 1.82em !important; }

.ordered-list-alpha li span {
  font-weight: 300;
  color: #777777; }

.ordered-list-roman li {
  margin-left: 30px;
  list-style-type: lower-roman;
  color: #f8b600;
  font-weight: 500;
  line-height: 1.82em !important; }

.ordered-list-roman li span {
  font-weight: 300;
  color: #777777; }

.single-input {
  display: block;
  width: 100%;
  line-height: 40px;
  border: none;
  outline: none;
  background: #f9f9ff;
  padding: 0 20px; }

.single-input:focus {
  outline: none; }

.input-group-icon {
  position: relative; }

.input-group-icon .icon {
  position: absolute;
  left: 20px;
  top: 0;
  line-height: 40px;
  z-index: 3; }

.input-group-icon .icon i {
  color: #797979; }

.input-group-icon .single-input {
  padding-left: 45px; }

.single-textarea {
  display: block;
  width: 100%;
  line-height: 40px;
  border: none;
  outline: none;
  background: #f9f9ff;
  padding: 0 20px;
  height: 100px;
  resize: none; }

.single-textarea:focus {
  outline: none; }

.single-input-primary {
  display: block;
  width: 100%;
  line-height: 40px;
  border: 1px solid transparent;
  outline: none;
  background: #f9f9ff;
  padding: 0 20px; }

.single-input-primary:focus {
  outline: none;
  border: 1px solid #f8b600; }

.single-input-accent {
  display: block;
  width: 100%;
  line-height: 40px;
  border: 1px solid transparent;
  outline: none;
  background: #f9f9ff;
  padding: 0 20px; }

.single-input-accent:focus {
  outline: none;
  border: 1px solid #eb6b55; }

.single-input-secondary {
  display: block;
  width: 100%;
  line-height: 40px;
  border: 1px solid transparent;
  outline: none;
  background: #f9f9ff;
  padding: 0 20px; }

.single-input-secondary:focus {
  outline: none;
  border: 1px solid #f09359; }

.default-switch {
  width: 35px;
  height: 17px;
  border-radius: 8.5px;
  background: #fff;
  position: relative;
  cursor: pointer; }

.default-switch input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer; }

.default-switch input + label {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #f8b600;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
  cursor: pointer; }

.default-switch input:checked + label {
  left: 19px; }

.single-element-widget {
  margin-bottom: 30px; }

/*----------------------------------------------------*/
/* Main Button Area css
============================================================================================ */
.main_btn {
  display: inline-block;
  background: #984e2e;
  padding: 5px 60px 5px 60px;
  color: #fff;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 48px;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
  border: 1px solid #984e2e;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 300ms linear 0s;
  border-radius:10px; 
  margin:0 0 50px 0; }

  .main_btn:hover {
    background: #000;
    color: #fff;
    border: 1px solid #000;	}



/*ORG Button*/
.main_btn_w {
  display: inline-block;
  background: #fda700;
  padding: 5px 50px 5px 50px;
  color: #FFF;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 48px;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
  border: 0;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 300ms linear 0s;
  border-radius:50px;  }

  .main_btn_w:hover {
    background: #fda700;
    color: #000;
    border: 0;	}

 @media (max-width: 1199px) {
	.main_btn_w{
		border-radius:25px;
		font-weight: 200;
		font-size: 18px;
		padding: 5px 40px 5px 40px;
		line-height: 36px; } }

/*GRAY Button*/
.main_btn_gray {
  display: inline-block;
  background: #dbdbdb;
  padding: 5px 50px 5px 50px;
  color: #fff;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 48px;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
  border: 0;
  cursor: pointer;
  text-transform: capitalize;
  transition: all 300ms linear 0s;
  border-radius:50px;
  margin-right:50px; }

  .main_btn_gray:hover {
    background: #dbdbdb;
    color: #555;
    border: 0;	}

 @media (max-width: 1199px) {
	.main_btn_gray{
		border-radius:25px;
		font-weight: 200;
		font-size: 18px;
		padding: 5px 40px 5px 40px;
		line-height: 36px;
		margin-right:20px;  } }






.main_btn2 {
  display: inline-block;
  background: #fff;
  padding: 0px 32px;
  color: #020a21;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 48px;
  border-radius: 5px;
  outline: none !important;
  box-shadow: none !important;
  text-align: center;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all 300ms linear 0s; }
  .main_btn2:hover {
    background: #fda700;
    color: #fff;
    border-color: #fda700; }




/*3個特色*/
.online-area{
	padding:100px 0 100px 0;}

.sp-bg{
	background:url(swirl.png) repeat;} 


 @media (max-width: 768px) {
	.online-area{
	 padding:50px 0 50px 0;} }

  .area-online p {
    font-size: 16px;
    color: #333;
    margin-top: 5px;
	text-align:center;
	font-weight:normal;
	line-height:28px; }



.single-online {
  transition: all 300ms linear 0s;    }

 
  .single-online .thumb02 {
    overflow: hidden;
	text-align:center;
	padding:20px;}
	
	/*特色的圖大小*/
  .single-online .thumb02 img {
      width: 70%;
      transition: all 300ms linear 0s; }

  .single-online .short_details02 { 
       text-align:center; }

  .single-online .short_details02 h4 {
    font-size: 24px;
    line-height: 30px;
    transition: all 300ms linear 0s;
	color:#652c00;
	font-weight:bold; }

  .single-online .short_details02 p {
	  color:#555;
	  font-weight:normal;}


  .single-online:hover img {
    transform: scale(1.1); }


 @media (max-width: 768px) {
	.single-online {
		border-bottom:0;}

	.single-online .thumb02 {
		float:left;
		width:40%;}
	
	.single-online .thumb02 img {
		width: 90%;}
	
	.single-online .short_details02 { 
	    float:left;
		width:60%;
		text-align:left;
		padding-top:20px;}
	.single-online .short_details02 h4 {
		text-align:left;
		font-size: 20px;}

		
		
		
		}





/*形像圖*/
.banner_area_online {
  position: relative;
  z-index: 2;
  min-height: 725px; 
  margin:0px;}

  .banner_area_online .banner_inner_online {   
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 725px;
    z-index: 2;
    background-size: cover; }

   .banner_area_online .online_bg{ 
     background: url(bbb_03.jpg) no-repeat scroll center center; }

	@media (max-width: 768px) {
   .banner_area_online {
	 min-height: 500px;	 }
   .banner_area_online .banner_inner_online {   
	 min-height: 500px;  }
	 
   .banner_area_online .online_bg{ 
     background: url(bbb_03_s.jpg) no-repeat scroll center center; }}











/*============== footer-area css ===============*/
.footer-area {
    padding-top: 30px; }


.footer-bottom {
  padding: 0px 0 20px 0;
  line-height:18px;
  font-weight:normal;
  text-align:center; 
  color:#999;}



.t-right  { text-align:right;}
.t-left  { text-align:left;}
.t-center { text-align:center;}





.btn-box {
	text-align:center;
	width:100%;
	padding:50px 0 50px 0;}
	

  @media (max-width: 767px) {
  .btn-box {
	padding:20px 0 20px 0;} }


.btn-box2 {
	text-align:center;
	width:100%;
	padding:20px 0 50px 0;}
	

  @media (max-width: 767px) {
  .btn-box2 {
	padding:10px 0 25px 0;} }





/*大時出現,小時消失*/
.d-no{ display:block; }
 
  @media (max-width: 767px) {
	 .d-no{ display:none; } }