@charset 'utf-8';
/* CSS Document */

body {
	margin:0;
  position: relative;
  font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif;
  
}





/*==========================================

header區域的樣式
===================================================*/
.header {
    height:60px;
	min-height:60px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    line-height: 1;
    position: fixed;
    top: 0;
	margin: 0;
    padding: 0;
	z-index:20;
	    box-shadow: 0 2px 2px rgba(0,0,0,.1);
    background: #FFFFFF;
    border-bottom: 1px solid #ccc;
}


/*---headerbg---*/
    .header.header_wrap {
		flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

		
    }
	
/*---headerWIDTH---*/
    .header .headerBody {
        background: #FFFFFF;
        z-index: 1000;
        background: #fff;
        display: block;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        max-width: 1366px;
        margin: auto;
    }

.HeaderBody_row {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: .5rem 1rem;
    box-sizing: border-box;
    -webkit-box-align: center!important;
    -ms-flex-align: center!important;
    align-items: center!important;
    width: 100%;
	
}

  
    

	
	/*---------------
	    logo
	------------------*/
.header .siteLogo {
    vertical-align: middle;
    margin-right: 0.5em;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    text-align: center;
    position: relative;
    top: 0;
    left: 1%;
    z-index: 100;
    height: auto;
    line-height: inherit;
    white-space: nowrap;
    padding: 5px 0 0;
}

    .header .siteLogo h1 {
        margin: 0;
        float: left;
        padding: 0;
        width: 200px;
        height: auto;
        font-size: 0;
    }
    .header .siteLogo a {
        width: 100%;
        height: auto;
        display: block;
        height: 95%;
    }




.header_icon{width:25px; max-width:25px; height:auto}
		  
		  
		  

		  
		
/* ----------------------------------------------------------------------------------------
    
    PC Menu
-----------------------------------------------------------------------------------------*/

.gnav {
    justify-content: space-between;
    text-align: center;
    position: relative;
    padding: 0;
}

    .gnav > nav {
        margin: 0 auto;
        top: 0;
        width: 100%;
        position: static;
        margin: 0 auto;
    }
    .gnav nav > ul {
        width: 100%;
        margin: 0;
        padding: 0;
        left: 0;
        list-style: none;
        list-style-type: none;
    }



.gnav ul > li {
            cursor: pointer;
            width: auto;        
            display: inline-block;
            letter-spacing: normal;
            font-size:1.1em;
            text-align: center;
            box-sizing: border-box;
            vertical-align: middle;
            position: relative;
            margin: 0 10px;
            float: left;

}

    .gnav ul > li > a {
        font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif;
        display: block;
        padding: 30px 15px 0;
        box-sizing: border-box;
        color: #222;
        font-weight: 800;
        text-decoration: none;
        position: relative;
        z-index: 1;
    }

    .gnav ul > li > a  span{
        font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif;
        display: block;
    
    }


        .gnav ul > li > a:hover {
            font-family: '微軟正黑體',Helvetica,Arial,Heiti TC,"メイリオ",sans-serif;
            font-style: normal;
            display: block;
            height: 100%;
            padding: 30px 15px 0;
            box-sizing: border-box;
            color: #00bbb5 !important;
            font-weight: 800;
            text-decoration: none;
        }







    .gnav ul > li a:before {
        position: absolute;
        left: 50%;
        top: 0;
        display: block;
        content: '';
        width: 2px;
        height: 25px;
        opacity: 0;
        background-color: #00c5eb;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }



    .gnav ul li a:hover:before {
        opacity: 1;
    }







@media screen and (max-width:935px) {
    .gnav ul > li {
        font-size: 1.05em;
    }

        .gnav ul > li > a {
            padding: 30px 8px 0;
        }

            .gnav ul > li > a:hover {
                padding: 30px 8px 0;
            }
}


@media screen and (max-width: 737px) {
    .gnav .menu > li {
        float: left;
    }
}

.gnav > .container::before{
    display: table;
    content:"";
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.gnav > .container::after {
    clear: both;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


@media screen and (max-width:889px) {
    .subitembox {
        position: static;
        display: table;
    }

    .second-level {
        left: 0;
    }

    .gnav .menu li.menu__mega:hover .second-level {
        top: 60px;
    }

    .header .siteLogo {
        clear: both;
        position: relative;
        top: 0.15em;
        float: none;
        z-index: 100;
        text-align: center;
        margin: auto;
        padding-bottom: 15px;
    }

        .header .siteLogo h1 {
            margin: auto;
            float: none;
        }

    .siteLogo a {
        display: block;
        position: relative;
        overflow: hidden;
    }

    .gnav {
        width: 100%;
        float: none;
    }

        .gnav ul > li {
            float: none;
        }

    .second-level li a {
        float: left!important;
        padding: 5px 15px!important;
    }

    .second-level li {
        float: left!important;
    }

    .subitembox ul li a {
        padding: 5px!important;
    }

    .subitembox ul li {
        padding: 5px!important;
    }
	
}

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

    .header {
        padding:0;
    }

        .header .headerBody {
            width: auto;
            overflow: visible;
        }

            .header .headerBody .HeaderBody_row {
                margin: 0 10px;
                overflow: hidden;
            }

        .header .siteLogo {
            width: 225px;
            padding: 0;
      
            bottom: 10px;
        }

            .header .siteLogo h1 {
                margin: 0 auto;
                /* float: left; */
                padding: 0;
                width: 100%;
                height: auto;
            }

            .header .siteLogo img {
                width: 100%;
                height: auto;
            }
}
   
   /*----------------------------------------------------------------------------------------
    下拉選單
-----------------------------------------------------------------------------------------*/  

.servicelist {
    display: block !important;
    width:180px;
    padding: 0;
    -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    -moz-box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    -ms-box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    -o-box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    -webkit-border-radius: 3px 3px 3px 3px;
    -khtml-border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    border: 1px solid rgba(34,34,34,.15);
    position: absolute;
    z-index:2;
    left: 0;
    top:45px;
    background: #fff;
}
.servicelist .hoverBk {
    margin-top:5px;
	display:block
}
.general {
    margin: 8px auto !important;
    padding: 0;
	list-style:none;
}
.servicelist .hoverBk  ul li{
	line-height:2.2em!important;
	 text-align:center!important;
	  display:block!important;}
	  
 .general  ul li {
    margin: 0;
    padding:5px 0;
    list-style-type: none;
    text-align: center;
	list-style:none;
	list-style-type:none;
    display:block!important;
	
}

.servicelist .hoverBk  ul li  a {
    display: block !important;
	text-align:center !important;
    padding: 0;
}
.servicelist .hoverBk  ul li a span {
    font-size: 14px;
	float:none !important;
    color: #222;
    font-weight: 400;
    line-height: 20px !important;
    margin: 0 auto !important;
	padding-top:3px!important

}

.servicelist .hoverBk ul li  span:hover{
	color:#869fb2;
	font-weight: 700;
	 text-decoration:none;
}
 .servicelist>ul li:after {
    clear: both;
	content: " ";
    display: table;    box-sizing: inherit;
}

.servicelist>ul li:before {
    content: " ";
    display: table;
}


.servicelist .login {
    border-top: 1px dashed #ccc;
    width: 100%;
    padding:3px 0;
    text-align: center;
}
.servicelist .login a{
    text-align: center;
	font-size:16px!important
}
.signout{
	background-color:#ecf0f1;
	display: block !important}
.servicelist:before {
top: -12px;
    right: calc(50% - 14px);
    border-bottom: 15px solid transparent;
    border-color: transparent transparent rgba(255,255,255);
    border-style: solid;
    border-width: 0 15px 11px;

}
.servicelist:before {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
} 

/*----------------------------------------------------------------------------------------
    手機版選單
-----------------------------------------------------------------------------------------*/

.gnav .spVer {
    display: none;
}

.gnav .menuBox {
    display: none;
}

@media screen and (max-width:800px) {
 
    .gnav {
		display:none
    }

        .gnav .menu {
            display:none;
        }




        .gnav .spVer {
            display:none;
            position: relative;
            width: 100%;
            max-width: 100%;
        }







}
		  
		  
		  
		  
		  
	/*----------------------------------
       navbarToggler 
 ------------------------------*/

 
 
 .sp { display: none;}
 
 .nav_Moblie_main {display: none;}

 .grb_menu_Moblie {display: none;}
 @media only screen and (max-width:800px) {
    .sp {
        cursor: pointer;
        display: block;
    }
    .SpMenuBtn {
		cursor: pointer;
        padding: 0;
        margin: 0;
        position: fixed;
        top:5px;
        left:0;
        width: 55px;
        height: 55px;
        display: flex;
        align-items:center;
        justify-content:center; 
		   display: block;
    border-radius:0px 100px 100px 0px;
    border: none;
     background: #454545;
	backface-visibility: hidden;
    }
	.SpMenuBtn:hover{
        padding: 0;
        margin: 0;
        position: fixed;
        top:5px;
        left:0;
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
       background: #aaa;;
    }

    .menu-trigger {
        position:  absolute;
        width: 55px;
        height: 55px;
    }
      
            .sp01{
				 opacity:1;
				display: inline-block; 
			box-sizing: border-box;
				 position: absolute;
            left:10px;
            width: 25px;
            height: 1px;
            display: block;
            transition: transform .6s cubic-bezier(.26,1,.48,1) .4s,opacity .6s cubic-bezier(.26,1,.48,1) .4s;
            background-color: #fff;
                top: 18px;
            }

            .sp02{	
			display: inline-block; 
			box-sizing: border-box;
				 position: absolute;
            left:10px;
            width: 25px;
            height: 1px;
            display: block;
            transition: transform .6s cubic-bezier(.26,1,.48,1) .4s,opacity .6s cubic-bezier(.26,1,.48,1) .4s;
            background-color: #fff;
                top: 26px;
                width:25px;
            }


            .sp03{ 
				display: inline-block; 
			box-sizing: border-box;
			position: absolute;
            left:10px;
                height: 1px;
                  transition: transform .6s cubic-bezier(.26,1,.48,1) .4s,opacity .6s cubic-bezier(.26,1,.48,1) .4s;
            background-color: #fff;
                top:35px;
                width:25px;
            }



/*------------------------------------
    手機選單
------------------------------------*/


.nav_Moblie_main {
    clear: both;
    max-width: 100%;
    border-bottom: 0.063em #CCD1D9 solid;
    border-top: 0.063em #CCD1D9 solid;
    width: 100%;
    max-width: 100%;
    margin-top: 0em;
    background: #fff;
    z-index: 999;
    position: absolute;
    top:0;
}
.grb_menu_Moblie{ display:table}
.gnav_wrap_Moblie ul {
    height: 100%;
    min-height: 100%;
    list-style: none;
    list-style-type: none;
    width: 100%;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    text-align: center;
}
.grb_menu_Moblie li {
    display: list-item;
    border-bottom: 0.063em #eee solid;
    float: left;
    position: relative;
    width: 100%;
    height: 100% !important;
    min-height: 100% !important;
}
.grb_menu_Moblie li a{
    text-decoration:none
}
.grb_menu_Moblie a.mn:hover {
        color: #0ba9b5;
       background: #ebf0f5

}
.grb_menu_Moblie a.mn {
    font-size: 100%;
    cursor: pointer;
    margin: 0;
    text-align: center;
    font-family: "微軟正黑體";
    font-style: normal;
    font-size: 1em;
    font-weight: 500;
   color: #222;
    padding: 0.938em 1em 0.938em 1em;
    position: relative;
    display: block;
    align-items: center;
    height: 100%;
}
@media screen and (min-width:800px) {
    .nav_Moblie_main{
        display:none !important;
    }
}





.mobile_dropdownLink{
	
	display:none;
	position:relative;
	background:#FFF
	}

.mobile_dropdownLink a.main{
	display:block;
	font-size:1em;
	color:#222;
	border:0.313em solid #CCC;
	position:relative;
	padding:0.625em;
	border-radius:0.313em;	
	background: #eeeeee;

}
.nav-caret {
    display: inline-block;
    float: right;
    width: 0;
    height: 0;
    margin-top:0.625em;
    vertical-align: middle;
    border-top:0.313em dashed;
    border-top:0.313em solid;
    border-right:0.313em solid transparent;
    border-left:0.313em solid transparent;
    color: #767676;
}
.mobile_dropdownLink a.main i{
	display:block;
	font-size:0.938em;
	background:#F00;
	position:absolute;
	right:0.625em;
	top:50%;
	margin-top:-0.375em}

.mobile_dropdownLink a.main{
	display:block;
	font-size:0.938em;
	color:#222;
	border:0.063em solid #CCC;
	position:relative;
	padding:0.625em;
	border-radius:0.313em;	
	background: #eeeeee;

}
.mobile_dropdownLink ul  {
	left:0;
	width:100%;
	padding:0;
	margin:0;
    display: block;
    color:#222;
	list-style:none;
	font-size:0.938em;
	position:absolute;
	top:100%;
	z-index:1;
	box-shadow: 0 0.375em 0.750em rgba(0,0,0,.2);
	box-sizing:border-box;
}
.mobile_dropdownLink ul li{
	    clear: both;
	padding:0;
	background-color:#f2f4f5; }
	

.mobile_dropdownLink ul li a {
    display: block;
    padding:0.938em 0.625em;
    border-bottom:0.063em solid #ddd;
    color: #222;
	border-left:transparent solid 0.250em
}
.mobile_dropdownLink ul li a:hover  {
   color:#16416d;
    background:#ecf6fc;
   border-left:#064f77 solid 0.250em
	}
 


.mobile_dropdownLink ul li:last-child  a{
	border-bottom:none;}

@media (max-width: 800px){
.mobile_dropdownLink{display:block; margin:auto; width:97%}

}



 }
     
/*----------------------------
  top  語言

---------------------------------*/	 

.header_area {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
	    box-sizing: border-box;
    z-index: 2;
    transition: background 0.4s, all 0.3s linear;
}
 .top_menu {
    height:50px; 
    line-height:50px;
  
}



/*----------------------

 icon
---------------*/
.top_menu .right_side {
	right:0px;
    padding:0 0;
     margin:15px 35px 0 auto;
	 display:block;
    height: auto;
 
}

.top_menu .right_side ul{
    padding:0;
     margin: 0;
	 list-style-type:none;
	 list-style:none;
	 width:auto
}
.top_menu .right_side li {
    display: inline-block;
	position: relative;
    padding-right:0px;
}
.top_menu .right_side li span {
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 30px;
    padding: 0px 5px;
    float:right!important;
}

.top_menu .right_side li a {
	    font-family: '微軟正黑體', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size:13px;
    color: #4a4a4a;
    display: inline-block;
    transition: all 300ms linear 0s;
    text-transform: uppercase;
    padding: 0px 5px;
}

.top_menu .right_side li a:hover {
	color:#869fb2;font-weight: 700;
	 text-decoration:none;
	}

.top_menu .right_side li img{ padding-bottom:3px; border:none}

.myBasket{
    left:30px!important;
    position: absolute!important;
    text-align: center!important;
    top:0!important;
    width:35px!important;
    height:20px!important ;
    line-height:20px!important;
    border-radius: 20px!important;
    color: #fff!important;
    background: #fc6e6e!important;
    display: block!important; 
	   padding-top: 0px!important; ;
}

  @media screen and (max-width:800px){ 
   
.top_menu {
      height:65px; 
    line-height:65px;
    clear: both;
    display: flex;
    content: "";
}
 .top_menu .right_side { margin-right:40px}
 
 .top_menu .right_side li span { padding-top:10px}
   }


  @media screen and (max-width:480px){ 
 .top_menu .right_side { margin-right:30px}

  }

/*==========================================


首頁分享


===========================================*/
.sharetxt {padding-bottom: 5px;
    margin-top: 1em;
    color: #666;}
.shareArea {
		padding-bottom:5px;
	margin-top:1em;
	color:#666;
}
.shareBox{ float:left;display: inline-block; margin-top:5px}
.shareBox ul{
    padding: 0;
	left:0;
	margin:0;
    list-style-type: none;
}


.shareBox li{
	float:left;
	cursor: pointer;
   text-align: center;
    list-style: none;
	margin-right:10px;
	border:none}



/*----社群分享產品----*/	
.introline{
	    background: url(../images/introline.png);
	    background-position:center;
		background-repeat:no-repeat;
		cursor: pointer;
		background-position: center;
        background-size:95%;
	    width:28px;
	    height:28px;
		border:none
		}

.introfb{background:url(../images/icon/introfacebook.png);
	    background-position:center;
		background-repeat:no-repeat;
		cursor: pointer;
		background-position: center;
        background-size:100%;
	    width:28px;
	    height:28px;
		border:none}

.introig{background:url(../images/icon/igicon.png);
	    background-position:center;
		background-repeat:no-repeat;
		cursor: pointer;
		background-position: center;
        background-size:100%;
	    width:28px;
	    height:28px;
		border:none}
.introyoutube{background:url(../images//icon/youtubeicon.png);
	    background-position:center;
		background-repeat:no-repeat;
		cursor: pointer;
		background-position: center;
        background-size:100%;
	    width:28px;
	    height:28px;
		border:none}
		
.introgoogle{background:url(../images//icon/googleicon.png);
	    background-position:center;
		background-repeat:no-repeat;
		cursor: pointer;
		background-position: center;
        background-size:100%;
	    width:28px;
	    height:28px;
		border:none}
		
.introlink{background:url(../images/icon/introlink.png);
	    background-position:center;
		background-repeat:no-repeat;
		cursor: pointer;
		background-position: center;
        background-size:100%;
	    width:28px;
	    height:28px;
		border:none}		

@media screen and (max-width:800px) {		
	.shareArea {display:none}	
  .sharetxt{display:none}	
}





/*==========================================			


版權宣告

===========================================*/

/*----------------
copyrgiht

---------------*/

.footer-bottom {
	border-top: 1px solid #E5E5E5;
    display: flex;
    padding-top: 15px;
    padding-bottom:25px;
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    background: #08192b;
    font-family: Helvetica, Arial, "微軟正黑體", Heiti TC, "メイリオ", sans-serif;

}





/*-------------------------
bottom- project company
------------------------*/
	

.footer__projects {
	float:left
    
}

.footer__projects span{
	text-align:cener;
	 font-family: Helvetica, Arial, "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    color: #869fb2;
    padding-top: 30px;
    font-style: normal;
}
.footer__projects span a{
    color: #f8f8f8;
    padding-top: 50px;
    font-size: 14px;
	text-align:center
}

.footer__projects span a:hover{
	  text-decoration: none;
    color: #869fb2
}
.foot__Info{ float: right;}
.foot__Info ul {  
    font-weight: 600;
    margin: 0;
	padding:0;
	list-style-type: none;
	list-style:none
}


 .foot__Info ul li {
    display: inline-block;
    margin-left:10px;
	text-align:center
}

 .foot__Info ul li a{
	 font-size:12px;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    color: #cfd9e0;
 }
 
  .foot__Info ul li a:hover{
    text-decoration: none;
    color: #869fb2
 }

@media screen and (max-width:480px) {	
.footer__projects {padding-left:10px; padding-bottom:15px}
.foot__Info{ float:left;}

}


/*==========================================			


footer Info

===========================================*/




footer {top:30px;
	    margin:0;
	    z-index:2;
        position: relative;
        display: block;
        width:100%;
        max-width:100%;
        padding:2em 0 0em 0;
       background-color: rgb(239, 240, 244);
		border-top:#ddd solid 1px
}


.footer__inner{
	display:table;
	width: 1360px;
    padding: 0 ;    
	top:35px;
padding:0 0 20px;
	vertical-align: baseline;
    margin: 0 auto;}

@media (max-width: 1440px){
.footer__inner {
    width: 1200px;
    max-width: 100%;
}
.footer__inner {
    width:1024px;
	max-width:100%;
   }

}

@media (max-width:1100px){
.footer__inner {
    width:95%;
	max-width:95%;
  	padding:0 0 20px;}
	
}

.footer_logoBox  {
	margin-right: auto;
	box-sizing: border-box;
    display: block;
   position: relative;
	
}
.footer_logoBox h2{
	 display:inline-block;
	 margin: 0 auto;
	 family: 'Taviraj','微軟正黑體', serif;
	 font-style:normal

}
.footer_logoBox span{
    display: inline-block;
    color: #1f3042;
    font-family: 'Taviraj','微軟正黑體', serif;
    font-weight: bold;
    font-size: 22px;
    letter-spacing: 1px;
    text-align: left;
    top: 0;
    line-height: 1.6;
    position: absolute;
}


.footer_logoBox img {
    vertical-align: middle;
    border-style: none;
	max-width: 100%;
	height:auto
}
	
.sslBox{
	margin: auto;
	box-sizing: border-box;
    display: block;
   position: relative;
   margin-top:5px;
	
}	
.sslBox span{
	font-weight: normal;
    font-size: 14px;
	display:inline-block;
	padding-left:5px;
	color: #777;
	
}
.sslBox	 img{
	 vertical-align: middle;
    border-style: none;
	width: 100%;
	height:auto;
	top:5px
	
}


/*----infoTxt----*/

 .contactInfo {
  display:block;
  overflow: hidden;
  font-weight: normal;
  padding-top:10px;
  font-size: 14px;
   color: #222;
}
.contactInfo ul{
	left:0	;
	list-style-type:none;
	list-style:none;
	padding:0;
	margin:0}


.contactInfo li {
    text-align: left;
    display: -block;
    letter-spacing: 1px;
    line-height: 2;
}
.contactInfo a {
	font-family: '微軟正黑體', sans-serif;
    font-style: normal;
    font-weight: normal;
   color: #1f3042;
}
.contactInfo a:hover{
   color:#869fb2;
  text-decoration:none;
  font-weight:700
}

.contactInfo li span{ padding-left:5px}

	
	
@media (max-width:853px){

.footer_sp_col{
	flex: 0 0 50% !important;
    max-width: 50%!important;}	

}
@media (max-width:485px){
.footer_sp_col{
	flex: 0 0 100% !important;
    max-width: 100%!important;}	

}



	
.foot_qrcodeArea{
	margin:10px auto auto;
	text-align:center;
	 width:100%}	
.foot_qrcodeArea h3{ text-align:center; margin:auto}
	
.foot_qrcodeArea p {
    width: 100%;
    color: #047935;
    text-align: center;
    margin-top: 10px;
}


.foot_qrcodeAreaTxt a {
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
     color:#222;
}




/*----------------------------------

社群
------------------------------*/
.socialbtn a {
    width:165px;
    border: 1px solid #d4e1ef;
    color: #1f3042;
    font-size: 15px;
    padding:8px 10px;
    margin: 8px 10px;
    text-align: center;
    font-weight: bold;
    font-family: 'Taviraj','微軟正黑體', serif;
    letter-spacing: 1px;
    display: block;
    transition: .5s;
    text-decoration: none;
    border-bottom: 1px solid;
	background-color:#FFF
}

    .socialbtn a:hover {
        background: white;
        box-shadow: 0 10px 20px #eee;
        transform: translateY(-3px);
    }


.ftsocial{
  display:table;
  margin-top:0px;
	 }



.ftsocial > .socialbtnLine a {
    color: #00B900;
	border-bottom-width: 2px;
	 border-bottom-color: #53d053;
}
.ftsocial > .socialbtnLine a:hover {
	background:#e5f7e5;
}



.ftsocial > .socialbtnFb a {
    color: #4267b2;
	border-bottom-width: 2px;
	 border-bottom-color: #4267b2;
}

.ftsocial > .socialbtnFb a:hover {
	background:#e2ecff;
}

.ftsocial > .socialbtnYoutube a {
    color: #CC202D;
	border-bottom-width:2px;
	 border-bottom-color:#CC202D;
}
.ftsocial > .socialbtnYoutube a:hover {
	 background:#fff6f7;
}
.ftsocial > .socialbtnIg a {
    color: #b729a7;
	border-bottom-width:2px;
	 border-bottom-color:#b729a7;
}

.ftsocial > .socialbtnIg a:hover {
	background:#ffdef2;
}


@media screen and (max-width: 767px) {
	.sslBox{ margin-bottom:20px}
  .foot_qrcodeArea{  margin:15px auto auto;}
.ftsocial{ text-align:center; margin:10px auto auto;}
	
}


@media screen and (max-width:575px) {
	
.foot_boder{border-bottom:#ddd solid 1px}	
}