@charset "utf-8";
@import url("fontawesome/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

:root{
    --color1:#2678C9;
    --color2:#48BD39; 
    --color3:#E66000;
    --color4:#3A3A3A;
    --color5:#233C65;
    --color6:#f4f4f4;
    --color7:#D9D9D9;        
    --color8:#DC4437;
    --color9:#F3C640;
    --color10:#FF9100;
    --color11:#F7C40C;
    --color12:#FFF5D7;
    --color13:#77D3F6;    
    --color14:#87C700;
    --color15:#00B753;    
    --color16:#5899F9;
    --color17:#D4ECEA;
    --color18:#E8F1FF;
    --red:#ff0000;
    --gray:#F2F2F2;
    --gray1:#c1c1c1;
    --gray2:#848484;
    --gray3:#CED4DA;
    --gray4:#EEF3F8;
    --gray5:#E8F1FF;
    --gray6:#F4F4F4;
    --white:#fff;
    --black:#000;
    --black2:#2D2D2D;    
    --black3:#1C1B1F;    
    font-size: 16px;
}

*{ 
    box-sizing: border-box; outline: none;
}
body{ 
    font-family: 'Noto Sans TC', sans-serif, 'Microsoft JhengHei'; 
    line-height: 1.5; 
    font-size: 1rem; 
    margin: 0;
    background-color: var(--white);
    color: var(--black);
}
a,
a:focus, 
a:hover {
    text-decoration: none;
}
img{ max-width: 100%;}
main{
    clear: both;
}
form input,
form input.form-control,
form select.form-control,
form textarea.form-control{
    border-radius: 4px;
    border:1px solid var(--color5);
    padding: 15px 16px;
    background-color: var(--white);
}
form input:focus,
form input.form-control:focus,
form textarea.form-control:focus{ 
    background-color: var(--color6);
}
form textarea.form-control{
    resize: none;
}
::placeholder{
    color: var(--color7) !important;
    font-size: 1rem;
}

a{  
    color: var(--white);
}
a:hover{
    color: var(--color1);
    transition: 0.3s linear;
}
a:focus,
*:focus{
    outline: none !important;
    box-shadow: none !important;
}
ul,li{ 
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.disc,
ul.decimal{
    margin-left: 1.35rem;
}
ul.disc li{
    margin-bottom: 0.3rem;
    list-style: disc;
}
ul.decimal li{
    margin-bottom: 0.3rem;
    list-style: decimal;
}
p{
    padding: 0;
    margin: 0; 
}
.color1{
    color: var(--color1);
}
.color2{
    color: var(--color2);
}
.color3{
    color: var(--color3);
}
.color4{
    color: var(--color4);
}
.color5{
    color: var(--color5);
}
.color6{
    color: var(--color6);
}
.color7{
    color: var(--color7);
}
.color8{
    color: var(--color8);
}
.color9{
    color: var(--color9);
}
.color10{
    color: var(--color10);
}
.color11{
    color: var(--color11);
}
.color12{
    color: var(--color12);
}
.color13{
    color: var(--color13);
}
.color14{
    color: var(--color14);
}
.color15{
    color: var(--color15);
}
.color16{
    color: var(--color16);
}
.color17{
    color: var(--color17);
}
.color18{
    color: var(--color18);
}
.colorgray{
    color: var(--gray);
}
.colorgray1{
    color: var(--gray1);
}
.colorgray2{
    color: var(--gray)2;
}
.colorgray3{
    color: var(--gray)3;
}
.colorgray4{
    color: var(--gray4);
}
.colorgray5{
    color: var(--gray5);
}
.colorgray6{
    color: var(--gray6);
}
.colorblack{
    color: var(--black);
}
.colorblack1{
    color: var(--black1);
}
.colorblack2{
    color: var(--black2);
}
.colorblack3{
    color: var(--black3);
}
.colorwhite{
    color: var(--white);
}
.colorred{
    color: var(--red);
}
.bgccolor1{
    background-color: var(--color1);
}
.bgccolor2{
    background-color: var(--color2);
}
.bgccolor3{
    background-color: var(--color3);
}
.bgccolor4{
    background-color: var(--color4);
}
.bgccolor5{
    background-color: var(--color5);
}
.bgccolor6{
    background-color: var(--color6);
}
.bgccolor7{
    background-color: var(--color7);
}
.bgccolor8{
    background-color: var(--color8);
}
.bgccolor9{
    background-color: var(--color9);
}
.bgccolor10{
    background-color: var(--color10);
}
.bgccolor11{
    background-color: var(--color11);
}
.bgccolor12{
    background-color: var(--color12);
}
.bgccolor13{
    background-color: var(--color13);
}
.bgccolor14{
    background-color: var(--color14);
}
.bgccolor15{
    background-color: var(--color15);
}
.bgccolor16{
    background-color: var(--color16);
}
.bgccolor17{
    background-color: var(--color17);
}
.bgccolor18{
    background-color: var(--color18);
}
.bgcgray{
    background-color: var(--gray);
}
.bgcgray1{
    background-color: var(--gray1);
}
.bgcgray2{
    background-color: var(--gray2);
}
.bgcgray3{
    background-color: var(--gray3);
}
.bgcgray4{
    background-color: var(--gray4);
}
.bgcgray5{
    background-color: var(--gray5);
}
.bgcgray6{
    background-color: var(--gray6);
}
.bgcblack{
    background-color: var(--black);
}
.bgcblack1{
    background-color: var(--black1);
}
.bgcblack2{
    background-color: var(--black2);
}
.bgcblack3{
    background-color: var(--black3);
}
.bgcwhite{
    background-color: var(--white);
}
.bgcred{
    background-color: var(--red);
}
.roboto{
    font-family: 'Roboto', sans-serif;
}
.f11{
    font-size: 0.69rem;
}
.f12{
    font-size: 0.75rem;
}
.f13{
    font-size: 0.81rem;
}
.f14{
    font-size: 0.88rem;
}
.f15{
    font-size: 0.94rem;
}
.f16{
    font-size: 1rem;
}
.f17{
    font-size: 1.06rem;
}
.f18{
    font-size: 1.13rem;
}
.f19{
    font-size: 1.19rem;
}
.f20{
    font-size: 1.25rem;
}
.f21{
    font-size: 1.3125rem;
}
.f22{
    font-size: 1.38rem;
}
.f24{
    font-size: 1.5rem;
}
.f26{
    font-size: 1.63rem;
}
.f28{
    font-size: 1.75rem;
}
.f30{
    font-size: 1.88rem;
}
.f32{
    font-size: 2rem;
}
.f34{
    font-size: 2.125rem;
}
.f36{
    font-size: 2.25rem;
}
.f38{
    font-size: 2.375rem;
}
.f40{
    font-size: 2.5rem;
}
.f42{
    font-size: 2.625rem;
}
.f44{
    font-size: 2.75rem;
}
.f46{
    font-size: 2.875rem;
}
.f48{
    font-size: 3rem;
}
.f50{
    font-size: 3.125rem;
}
.fw100{
    font-weight: 100;
}
.fw200{
    font-weight: 200;
}
.fw300{
    font-weight: 300;
}
.fw400{
    font-weight: 400;
}
.fw500{
    font-weight: 500;
}
.fw600{
    font-weight: 600;
}
.fw700{
    font-weight: 700;
}
.fw800{
    font-weight: 800;
}
.fw900{
    font-weight: 900;
}
.max1080{
    max-width: 1080px;
}
.max538{
    max-width: 538px;
}
.img_fit{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* iframe video RWD */
.framewrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.framewrapper2 {
    position: relative;
    padding-bottom: 31.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.framewrapper iframe,
.framewrapper2 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@keyframes zoomIn {
    0% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes picfadein {
    from {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
    to {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}
@keyframes picfadein {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        transform: scale(1.01);
    }
}
/*  圖片hover效果2*/
.zoom {
    width: 100%;
    -webkit-animation: picfadein 2s;
    animation: picfadein 2s;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
    -webkit-transform: scale3d(1.01, 1.01, 1);
    transform: scale3d(1.01, 1.01, 1);
}
.zoom:hover,
a:hover .zoom {
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
}
/*button*/
.main_btn{    
    width: 194px;
    height: 64px;
    padding: 20px 32px;
    text-align: center;
    border-radius: 4px;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}
.main_btn .arr{
    margin-left: 10px;   
    display: block;
    width: 24px;
    height: 24px;
}
.main_btn:hover,
.main_btn:focus{    
    color: var(--white);
}
.main_btn.btn1{
    
}
.main_btn.btn2{
    
}
.main_btn.btn3{
    background-color: var(--color3);
}
.main_btn.btn1:hover,
.main_btn.btn1:focus{
    
}
.main_btn.btn2:hover,
.main_btn.btn2:focus{
    
}
.main_btn.btn3:hover,
.main_btn.btn3:focus{
    background-color: var(--black);
}
/*go top*/
.gototop{ 
    display: none; 
    border-radius: 50%; 
    background-color: #8f8f8f; 
    overflow: hidden; 
    width: 3.75rem; 
    height: 3.75rem; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 999;
}
.gototop:hover{ 
    background-color: var(--color2);
}

/*footer*/
footer{      
    color: var(--white);
    background-color:var(--color4) ;
    padding-bottom: 2rem;
}
.footerbg_top{
    width: 100%;
    height: 4.6875rem; 
    overflow: hidden;   
    background-color:var(--color7) ;
}
.footerbg_top::after{
    content: "";
    display: block;
    width: 140%;
    height: 220px;
    border-radius:100% 100% 0 0;
    margin-left: -20%;
    background-color:var(--color4) ;
}
.foo_link{
    display: flex;
    justify-content: start;
    align-items: center;
}
.foo_link a{
    display:inline-block;
    padding:2px 1rem;
    /* border-right: 1px solid var(--white); */
}
.foo_link a:hover{
    color:var(--color9) ;
}
.foo_link a:first-child{ 
    padding-left:0;
}
/* .foo_link a:last-child{ 
    border-right:none;
} */