@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=REM:wght@100;200;300;400;500;600;700;800;900&display=swap');

.fontMonaco{
    font-family: 'Montserrat', sans-serif;
}
.fontRem{
    font-family: 'REM', sans-serif;
}

:root{
    --primaryColor:#1a4a98;
    
    --mblue0: rgb(102,175,233);
    --mblue2: rgb(15,101,150);
    --mblue1: rgb(26,131,201);
    --mblue3: rgba(55,71,169,0.92);
    --mblue4: #dfefff;

    --mblack0: rgba(0,0,0);
    --mblack1: rgb(20,20,20);

    --mgrey0: rgb(47, 47, 47);
    --mgrey1: rgb(64, 67, 70);
    --mgrey2: rgb(90, 90, 90);
    --mgrey3: rgb(232, 232, 232);  

    --mred0: rgb(208,2,27);
    --mred1: rgb(217,83,79);
    --mred2: rgb(220,53,69);

    --mwhite0: rgb(255,255,255);
    --mwhite1: rgb(235,235,235);
    --mwhite2: rgb(246,246,246);

    --mgreen0:#0db568;
    --mgreen1: rgb(40, 151, 38);
    --mgreen2: rgb(40,167,69);

    --myellow0: rgb(255, 217, 0);
    --myellow1:#ffa748;

    font-size: 16px;
    --MaxWidth:768px;
}

.overflow-y{
    overflow-y: auto;
}

a,a:hover{
    text-decoration:none;
}
a{
    color:var(--primaryColor);
}
a:hover,a:focus{
    color:var(--mblue0);
}

/* color */
.cPri{
    color: var(--primaryColor);
}
.cB0{
    color:var(--mblue0);
}
.cB1{
    color:var(--mblue1);
}
.cB2{
    color:var(--mblue2);
}
.cB3{
    color:var(--mblue3);
}
.cB4{
    color:var(--mblue4);
}
.cBK0{
    color:var(--mblack0);
}
.cBK1{
    color:var(--mblack1);
}
.cGY0{
    color:var(--mgrey0);
}
.cGY1{
    color:var(--mgrey1);
}
.cGY2{
    color:var(--mgrey2);
}
.cGY3{
    color:var(--mgrey3);
}
.cR0{
    color:var(--mred0);
}
.cR1{
    color:var(--mred1);
}
.cR2{
    color:var(--mred2);
}
.cW0{
    color:var(--mwhite0);
}
.cW1{
    color:var(--mwhite1);
}
.cW2{
    color:var(--mwhite2);
}
.cG0{
    color:var(--mgreen0);
}
.cG1{
    color:var(--mgreen1);
}
.cG2{
    color:var(--mgreen2);
}
.cY0{
    color:var(--myellow0);
}
.cY1{
    color:var(--myellow1);
}
/* background color */
.bgcPri{
    background-color:var(--primaryColor);
}
.bgcB0{
    background-color:var(--mblue0);
}
.bgcB1{
    background-color:var(--mblue1);
}
.bgcB2{
    background-color:var(--mblue2);
}
.bgcB3{
    background-color:var(--mblue3);
}
.bgcB4{
    background-color:var(--mblue4);
}
.bgcBK0{
    background-color:var(--mblack0);
}
.bgcBK1{
    background-color:var(--mblack1);
}
.bgcGY0{
    background-color:var(--mgrey0);
}
.bgcGY1{
    background-color:var(--mgrey1);
}
.bgcGY2{
    background-color:var(--mgrey2);
}
.bgcGY3{
    background-color:var(--mgrey3);
}
.bgcR0{
    background-color:var(--mred0);
}
.bgcR1{
    background-color:var(--mred1);
}
.bgcR2{
    background-color:var(--mred2);
}
.bgcW0{
    background-color:var(--mwhite0);
}
.bgcW1{
    background-color:var(--mwhite1);
}
.bgcW2{
    background-color:var(--mwhite2);
}
.bgcG0{
    background-color:var(--mgreen0);
}
.bgcG1{
    background-color:var(--mgreen1);
}
.bgcG2{
    background-color:var(--mgreen2);
}
.bgcY0{
    background-color:var(--myellow0);
}
.bgcY1{
    background-color:var(--myellow1);
}


.form-group input.bframe{
    border:1px solid var(--mblue1);
}
input{    
    /* color: var(--mblue1); */
    /* border:0.13rem solid var(--mgrey3); */
}

input:focus,
input:valid{
    /* color: var(--mblue1); */
    /* border:0.13rem solid var(--mblue1); */
}
.form-control:focus {
    border-color: var(--mblue1);
    box-shadow: none;
}
::selection,
::moz-selection {
    background-color: var(--mblue1);
    color: #fff;
}
select option:checked,
select option:hover,
select option[selected] {
    background-color: var(--mblue1);
    color: #fff;
    box-shadow: 0 0 10px 100px var(--mblue1) inset;
    background: #ff9500 -webkit-linear-gradient(bottom, #ff9500 0%, #ff9500 100%) !important;
}
.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;
}
.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.13rem;
}
.f36{
    font-size: 2.25rem;
}
.f38{
    font-size: 2.38rem;
}
.f40{
    font-size: 2.5rem;
}
.f44{
    font-size: 2.75rem;
}
.f45{
    font-size: 2.81rem;
}
.f50{
    font-size: 3.13rem;
}
.f55{
    font-size: 3.44rem;
}
.f60{
    font-size: 3.75rem;
}
.f65{
    font-size: 4.06rem;
}
.f70{
    font-size: 4.38rem;
}
.f80{
    font-size: 5rem;
}
.f90{
    font-size: 5.63rem;
}
.f150{
    font-size: 9.38rem;
}
.f160{
    font-size: 10rem;
}
.f170{
    font-size: 10.63rem;
}
.f190{
    font-size: 11.88rem;
}
.fw100{
    font-weight: 100;
}
.fw400{
    font-weight: 400;
}
.fw500{
    font-weight: 500;
}
.fw600{
    font-weight: 600;
}
.fw700{
    font-weight: 700;
}
.fw800{
    font-weight: 800;
}
.fw900{
    font-weight: 900;
}
/* avtar */
.img-avatar {
    display: inline-block !important;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    border: 2px solid var(--mgrey2);
    background-color: var(--mblue4);
}
.img-avatar img{
    width: 100%;
}
.img-avatar.img-avatar16 {
    width: 16px;
    height: 16px;
}
.img-avatar.img-avatar20 {
    width: 20px;
    height: 20px;
}
.img-avatar.img-avatar32 {
    width: 32px;
    height: 32px;
}
.img-avatar.img-avatar48 {
    width: 48px;
    height: 48px;
}
.img-avatar.img-avatar96 {
    width: 96px;
    height: 96px;
}
.img-avatar.img-avatar128 {
    width: 128px;
    height: 128px;
}
.img-avatar-thumb {
    margin: 5px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4);
}
.img-avatar.img-avatar-rounded {
    border-radius: 3px;
}
.img-avatar.img-avatar-square {
    border-radius: 0;
}

/* 分頁 */
.page-link {    
    color: var(--primaryColor);
    background-color: var(--mwhite0);
    border: 1px solid var(--mgrey3);
}
.page-link:hover {
    color: var(--mblue0);
    background-color: var(--mgrey3);
    border-color: var(--mgrey3);
}
.page-link:focus {    
    box-shadow: none;
}
.page-item.active .page-link {    
    color: #fff;
    background-color: var(--mblue1);
    border-color: var(--mgrey3);
}


@media (max-width: 420px){
    :root{
        font-size: 15px;
    }
    .mypoint .f50{
        font-size: 2.5rem;
    }
}