/*
Theme Name: My Twenty Twenty Child Theme
Theme URI: https://example.com
Description: A child theme for Twenty Twenty.
Author: Sally Kang hey
Author URI: https://example.com/
Template: twentytwenty
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/** Computan CSS Start **/

@import "com-style.css";
/* responsive */
@import "com-responsive.css";

/** Computan CSS End **/


/* My globals */

.bg-navy {
    background-color: #00204E !important;
    color: white;
}


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


/*	1. Document Setup
/* -------------------------------------------------------------------------- */

body {
    font-size: 1.6rem;
    font-family: 'Open Sans', sans-serif, "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
}

@supports ( font-variation-settings: normal) {
    body {
        font-family: 'Open Sans', sans-serif, "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
    }
}

/*@import url(//db.onlinewebfonts.com/c/b491db99790e4fce858c18892824b2a5?family=Trade+Gothic+Next+LT+Pro+BdCn);

 @font-face {
    font-family: "Trade Gothic Next LT Pro BdCn";
    src: url("//db.onlinewebfonts.com/t/b491db99790e4fce858c18892824b2a5.eot");
    src: url("//db.onlinewebfonts.com/t/b491db99790e4fce858c18892824b2a5.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b491db99790e4fce858c18892824b2a5.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b491db99790e4fce858c18892824b2a5.woff") format("woff"), url("//db.onlinewebfonts.com/t/b491db99790e4fce858c18892824b2a5.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b491db99790e4fce858c18892824b2a5.svg#Trade Gothic Next LT Pro BdCn") format("svg");
} */


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


/*	2. Element Base
/* ---------------------------------------------*---------------------------- */

a:link,
a:visited,
a:active {
    color: #007FA3;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

.header-inner {
    background-color: #00204E;
    max-width: 100%;
    z-index: 100;
    padding: 5px;
}

.header-inner img {
    margin-bottom: 10px;
}

.site-logo img {
    height: 51px;
    margin-bottom: 10px;
}

.header-titles {
    margin: 0;
}


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


/*	3. Helper Classes
/* -------------------------------------------------------------------------- */


/* Layout ------------------------------------ */

.no-margin {
    margin: 0;
}

.no-padding {
    padding: 0;
}

.screen-height {
    min-height: 50vh;
}

.admin-bar .screen-height {
    min-height: calc(50vh - 32px);
}

@media (max-width: 782px) {
    .admin-bar .screen-height {
        min-height: calc(80vh - 46px);
    }
}

.screen-width {
    position: relative;
    left: calc(50% - 50vw);
    width: 100vw;
}

.entry-content>*:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 120rem
}


/* Sections ---------------------------------- */

.section-inner.medium {
    max-width: 120rem;
}


/* Primary Menu ---------------------------- */

ul.primary-menu {
    letter-spacing: 0;
    font-weight: bold;
}

.primary-menu a {
    color: white !important;
}


/* Helper Classes ------------------------ */


/* Site Header --------------------------- */


/* PRIMARY MENU */

.primary-menu>li {
    margin: 44px 0 0 31px;
}

.entry-title {
    font-family: 'Trade Gothic LT W01 Bold No-_2', 'Open Sans', condensed;
    font-size: 80px;
}


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


/*	7a. Template: Cover Template
/* -------------------------------------------------------------------------- */

.cover-color-overlay::before {
    background: #1D4DFF;
    opacity: 14%;
}

.subheading h2 {
    font-size: 18px;
}

.post-inner {
    padding-top: 0;
}

@media ( min-width: 1000px) {
    /* HEADER TOGGLES */
    .header-inner .primary-menu-wrapper+.header-toggles .toggle-wrapper:first-child::before {
        content: none;
    }
}

@media ( min-width: 1220px) {
    .header-toggles .toggle {
        margin-top: 15px;
    }
    /* Menu Modal ---------------------------- */
    /* Search Modal -------------------------- */
    /* Sub Page ------------------------------ */
    /* Template: Cover Template -------------- */
    .cover-header+.post-inner {
        padding-top: 0;
    }
}

@media ( min-width: 700px) {
    /* TITLES */
    h1,
    .heading-size-1,
    h2,
    .heading-size-2,
    h3,
    .heading-size-3 {
        margin: 2rem auto 3rem;
    }
    /* Template: Cover Template -------------- */
    .cover-header-inner {
        padding: 25rem 0 8rem 0;
    }
    /* Post: Single -------------------------- */
    /* POST HEADER */
    .post-inner {
        padding-top: 0;
    }
    .nav-icon-inner {
        padding: 5px;
    }
}


/* Quick Nav Section */


/* Container Styles */

.quick-nav {
    height: 80px;
    width: 100%;
    display: table;
    font-weight: bold;
}

.quick-nav .row {
    /*     	height: 40px; */
    display: table-cell;
    vertical-align: middle;
}

.quick-nav * {
    color: white;
}

.column {
    float: left;
    width: 33.33%;
    text-align: center
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;
}

.quick-nav .material-icons {
    font-size: 40px;
}

.nav-icon {
    position : absolute;
    left     : 24px;
    top      : 50%;
    transform: translateY(-50%);
}
.nav-icon .material-icons {font-size: 37px;}
.nav-icon-text {
    padding-left  : 81px;
    padding-top   : 19px;
    padding-bottom: 19px;
    display       : inline-block;
}

.news-section,
.notice-section,
.project-section {
    margin-top: 10rem;
}

.heading-primary h2 {
    font-size: 36px;
    font-family: 'Trade Gothic Next LT Pro BdCn', sans-serif !important;
    font-weight: bold;
    color: #00204E;
}

.heading-primary-dark h2 {
    font-size: 36px;
    font-family: 'Trade Gothic Next LT Pro BdCn', sans-serif !important;
    font-weight: bold;
    color: white;
    margin: 0;
    line-height: 44px;
}

.news-card h3,
.news-card a {
    font-size: 18px;
    color: black !important;
}

.news-card img {
    border-radius: 5px;
    border: none;
    margin-right: 5rem;
}

.notice-content {
    /* height: 408px; */
    padding: 5rem 0;
    overflow: hidden;
}

.filter-btn {
    border-radius: 5px;
    font-size: 14px;
    background-color: #FFE498 !important;
    color: #00204E !important;
    padding: 10px 18px;
}

.notice-card {
    margin-top: 2rem!important;
}

.notice-card-bg {
    background: rgba(255, 255, 255, 0.1);
    border: 0.5px solid rgba(241, 243, 248, 0.15);
    border-radius: 5px;
    padding: 15px 21px 45px 15px;
    min-height: 205px;
    position: relative;
    height: 100%;
}
.link-expand {
    position: absolute;
    left: 21px;
    bottom: 19px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: #FFE498;
}
.notice-section hr {
    margin-top: 34px;
    margin-bottom: 60px;
}
.notice-card {
    padding-right: 44.5px!important;
    padding-left: 44.5px!important;
}
.row.notice-body {
    margin-left: -44.5px;
    margin-right: -44.5px;
}

/* 
.notice-card-bg {
    background-color: white;
    opacity: 10%;
} */

.notice-card h3 {
    font-weight   : bold;
    font-size     : 18px;
    line-height   : 25px;
    color         : #FFFFFF;
    margin-top    : 0;
    margin-bottom : 10px;
}
.notice-card p {
    font-size  : 14px;
    color      : #FFF;
    line-height: 19px;
    font-family: "Open Sans", Sans-serif;
}
.link-expand a {
    color: #FFE498 !important;
    font-weight: bold;
}

.view-more-col {
    position: relative;
}

.view-more-link {
    position: absolute;
    bottom: 2rem;
    right: 1rem;
    font-weight: bold;
    text-transform: uppercase;
}

.view-notice-link {
    position: absolute;
    bottom: 0rem;
    right: 1rem;
    font-weight: bold;
    text-transform: uppercase;
}

.dark-bg-yellow {
    color: #FFE498 !important;
}

hr {
    display: block;
    height: .5px;
    border: 0;
    border-top: .5px solid #ccc;
    margin: 5em 0;
    padding: 0;
}

.section-sign-up-notice {
    text-align: center;
}

.section-sign-up-notice h2 {
    font-family   : 'Trade Gothic Next LT Pro BdCn', 'Open Sans', sans-serif;
    font-weight   : 800;
    font-size     : 36px;
    line-height   : 45px;
    text-align    : center;
    color         : #FFE498;
    margin-top    : 0;
    margin-bottom : 13px;
}
.section-sign-up-notice p {
    font-family: 'Open Sans', sans-serif;
    font-size  : 14px;
    line-height: 19px;
    text-align : center;
    color      : #FFFFFF;
}

.btn-full-yellow {
    margin          : 26px 0 47px;
    font-family     : 'Open Sans', sans-serif;
    font-weight     : bold;
    font-size       : 20px;
    line-height     : 28px;
    text-align      : center;
    color           : #00204E;
    background-color: #FFE498;
    padding         : 15px 76px;
    border-radius   : 5px;
    text-transform  : none;
}

.footer-text p {
    font-size: 14px;
    line-height: 25px !important;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 0;
}
@import url(//fast.fonts.net/lt/1.css?apiType=css&c=970d818f-6da7-490a-834e-f937188ff4f9&fontids=5618602,5730936);
@font-face{
    font-family:"Trade Gothic Next LT W01 Hv Cm";
    font-display: swap;
    letter-spacing: 0.03em;
    src:url("fonts/5618602/af7a0d9b-b533-4494-bfbc-8ef7b682adfb.woff2") format("woff2"),url("fonts/5618602/6345b280-9f07-4762-959b-16b7092d3d20.woff") format("woff");
}
@font-face{
    font-family:"Trade Gothic LT W01 Cond No-_1";
    font-display: swap;
    src:url("fonts/5730936/ee3d290f-f853-4ff3-913e-7bae693a43ec.woff2") format("woff2"),url("fonts/5730936/13f010e4-8178-40a5-a790-11a6532a964c.woff") format("woff");
}