/**
 * 
----------------------------------------
 * 全站預設文字
 * ----------------------------------------
 */
@font-face {
    font-display: swap;
}




/**
 * 
----------------------------------------
 * 反白文字時使用指定顏色
 * 使用於全網站
 * ----------------------------------------
 */

::-moz-selection {
    background-color: #77dbef;
    color: #ffffff;
}
 
::selection {
    background-color: #77dbef;
    color: #ffffff;
}


/**
 * ----------------------------------------
 * 如果是行動裝置寬度小於768px，欄位交換語法
 * CSS欄位填寫mobile-reverse有效
 * ----------------------------------------
 */

@media (max-width: 768px) {
    .mobile-reverse {
        flex-direction: column-reverse;
    }
}

/**
 * ----------------------------------------
 * 白色按鈕動畫
 * 用於自訂html欄位填寫
 * ----------------------------------------
 */

.shape-ex3{
    width: 300px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #00d2f3;
    background-color: #fff;
    border: 2px solid #00d2f3;
    border-radius: 5px;
    position: relative;
    transition: all .3s linear;
}
.shape-ex3 > p{
    position: relative;
    z-index: 1;
}
.shape-ex3::before{
    content: "";
    width: 0%;
    height: 100%;
    display: block;
    background-color: #00d2f3;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease;
}
.shape-ex3:hover{
    color: #fff;
}
.shape-ex3:hover::before{
    width: 100%;
}

.a_link{
  text-decoration:none;
  color:#00d2f3;
	font-size:15pt;
}
.w100{
width:100%;
}

/* 位置:置中 */

.btn_center{
display:block;
margin-left:calc(50% - 150px);
}





/**
 * ----------------------------------------
 * 藍色按鈕動畫
 * 用於自訂html欄位填寫
 * ----------------------------------------
 */


.shape-001{
    width: 300px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #fff;
    background-color: #00d2f3;
    border: 2px solid #00d2f3;
    border-radius: 5px;
    position: relative;
    transition: all .3s linear ;
}
.shape-001 > p{
    position: relative;
    z-index: 1;
}
.shape-001::before{
    content: "";
    width: 0%;
    height: 100%;
    display: block;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .3s ease;
}
.shape-001:hover{
    color: #00d2f3;
}
.shape-001:hover::before{
    width: 100%;
}

.a_link{
  text-decoration:none;
  color:#00d2f3;
	font-size:15pt;
}
.w001{
width:100%;
}

/* 位置:無調整 */

.btn001_center{
display:block;
}

/**
 * ----------------------------------------
 * 圓角角度5
 * ----------------------------------------
 */

.radius_5 {
    border-radius: 5px;
  }

/**
 * ----------------------------------------
 * 分隔線藍色虛線
 * ----------------------------------------
 */

.hr-dotted {
    border: 0;
    border-top: 1px dotted #00D1F2;

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