/*圓體*/

@font-face {
    font-family: 'cwTeXYen';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
    src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'), url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'), url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}


/* cyrillic-ext */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* vietnamese */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WRhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459W1hyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* vietnamese */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* cyrillic-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}


/* cyrillic */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* greek-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}


/* greek */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}


/* vietnamese */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}


/* latin-ext */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.main_background {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 100%;
    /* border-style: solid;
    border-width: 2px;
    border-color: #2b2828; */
}

.main_background .main_l {
    display: inline-block;
    position: relative;
    margin: 0% 0% 0% 0px;
    outline-width: 0px;
    width: 50%;
    height: 100%;
    text-align: center;
}

.main_background .main_r {
    display: inline-block;
    position: relative;
    margin: 0% 0% 0% -6px;
    outline-width: 0px;
    width: 50%;
    height: 100%;
    text-align: center;
}

.main_background .main {
    display: inline-block;
    position: relative;
    margin: 0% 0% 0% -6px;
    outline-width: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.main_background .main_l div {
    background-color: #ffffff;
    background-image: linear-gradient(90deg, rgb(230, 211, 211), rgb(29, 49, 110));
    height: 100%;
    width: 100%;
}

.main_background .main_r div {
    background-color: #ffffff;
    background-image: linear-gradient(90deg, rgb(201, 49, 49), rgb(205, 210, 224));
    width: 100%;
    height: 100%;
}

.click2learn {
    color: #000000;
    /* background-color: #414141; */
    opacity: 0.7;
    border: 0;
    border-radius: 12px;
    float: left;
    margin: 0% 0% 0% 30%;
    font-size: 80px;
    text-align: center;
    font-family: 'cwTeXYen';
    /* font-family: 'Microsoft JhengHei', 'DFKai-SB', 'STHeiti', '微軟正黑體'; */
}

.click2teach {
    color: #000000;
    /* background-color: #414141; */
    opacity: 0.7;
    border: 0;
    border-radius: 12px;
    float: right;
    margin: 0% 30% 0% 0%;
    font-size: 80px;
    text-align: center;
    font-family: 'cwTeXYen';
    /* font-family: "Microsoft JhengHei", "DFKai-SB", "STHeiti", '微軟正黑體'; */
}

@media screen and (max-width:1380px) {
    .click2learn {
        color: #000000;
        /* background-color: #414141; */
        opacity: 0.7;
        border: 0;
        border-radius: 12px;
        float: left;
        margin: 0% 0% 0% 35%;
        font-size: 80px;
        text-align: center;
        font-family: 'cwTeXYen';
        /* font-family: 'Microsoft JhengHei', 'DFKai-SB', 'STHeiti', '微軟正黑體'; */
    }
    .click2teach {
        color: #000000;
        /* background-color: #414141; */
        opacity: 0.7;
        border: 0;
        border-radius: 12px;
        float: right;
        margin: 0% 35% 0% 0%;
        font-size: 80px;
        text-align: center;
        font-family: 'cwTeXYen';
        /* font-family: "Microsoft JhengHei", "DFKai-SB", "STHeiti", '微軟正黑體'; */
    }
}

.main_img {
    opacity: 0.8;
    width: 100%;
}

.logo {
    position: relative;
    margin: -21.29% 0% 0% 44.8%;
    z-index: 100;
    width: 10%;
}

.logo_info {
    position: relative;
    margin: -1.5% 0% 0% 42.53%;
    z-index: 90;
    width: 15%;
}

.logout-btn {
    font-family: Hack, monospace;
    background: #d3d3d3;
    color: #2c2c2c;
    cursor: pointer;
    font-size: 1em;
    padding: 1.5rem;
    border: 0;
    transition: all 0.5s;
    border-radius: 10px;
    /* width: auto; */
    position: relative;
    /* min-width: 250px; */
    /* opacity: 1; */
}

.logout-btn::after {
    /* content: "\f2f5"; */
    font-family: "Font Awesome 5 Pro";
    font-weight: 400;
    position: absolute;
    left: 80%;
    top: 54%;
    right: 0;
    bottom: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.logout-btn:hover {
    background: #717273;
    transition: all 0.5s;
    border-radius: 10px;
    box-shadow: 0px 6px 15px #00f 61;
    /* padding: 1.5rem 3rem 1.5rem 1.5rem; */
    color: #fff;
}

.logout-btn:hover::after {
    /* opacity: 1; */
    transition: all 0.5s;
    color: #fff;
}