@charset "utf-8";

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


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


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

/* -----------------------------------------------------------------------------
// 반응형 스타일
----------------------------------------------------------------------------- */

/* 1600px */
@media screen and (max-width: 1600px) {

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    /* ===========================================================
       대한전기학회 80년사
    =========================================================== */
    #container .col2 .inner-wrap .history-area {
        flex: 1 1 422px;
    }

    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor {
        flex: 1 1 660px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header h2 {
        font-size: 36px;
    }

    /* ===========================================
       회관 건립 기금 안내
    =========================================== */
    #container .col2 .inner-wrap .donation-introduce-area {
        flex: 1 1 422px;
    }

}

/* 1500px */
@media screen and (max-width: 1500px) {

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    /* ===========================================================
       대한전기학회 80년사
    =========================================================== */
    #container .col2 .inner-wrap .history-area .history__title {
        font-size: 24px;
    }
    #container .col2 .inner-wrap .history-area .history__content h4 {
        font-size: 16px;
    }

    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor .hall-header h2 {
        font-size: 32px;
    }

}

/* 1400px */
@media screen and (max-width: 1400px) {

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    /* ===========================================================
       대한전기학회 80년사
    =========================================================== */
    #container .col2 .inner-wrap .history-area .history__title {
        font-size: 21px;
    }
    #container .col2 .inner-wrap .history-area .history__content h4 {
        font-size: 15px;
    }

    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor .hall-header h2 {
        font-size: 26px;
    }

    /* ===========================================
       회관 건립 기금 안내
    =========================================== */
    #container .col2 .inner-wrap .donation-introduce-area .donation-card h3 {
        font-size: 21px;
    }
    #container .col2 .inner-wrap .donation-introduce-area .text strong {
        font-size: 16px;
    }

}

/* 1300px */
@media screen and (max-width: 1300px) {

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    #container .col2 .inner-wrap {
        align-items: flex-start;
    }

    /* ===========================================================
       대한전기학회 80년사
    =========================================================== */
    #container .col2 .inner-wrap .history-area {
        padding: 24px;
    }
    #container .col2 .inner-wrap .history-area .history__title {
        font-size: 19px;
    }
    #container .col2 .inner-wrap .history-area .history__content h4 {
        font-size: 14px;
    }
    #container .col2 .inner-wrap .history-area .history__item {
        gap: 0;
    }

    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor {
        padding: 24px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header {
        margin-bottom: 12px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header h2 {
        font-size: 24px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header p {
        font-size: 14px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item {
        gap: 8px;
    }
    #container .col2 .inner-wrap .hall-of-honor .name {
        font-size: 16px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item .name small {
        font-size: 13px;
    }
    #container .col2 .inner-wrap .hall-of-honor .amount {
        font-size: 16px;
    }

    /* ===========================================
       회관 건립 기금 안내
    =========================================== */
    #container .col2 .inner-wrap .donation-introduce-area .donation-card h3 {
        font-size: 19px;
    }
    #container .col2 .inner-wrap .donation-introduce-area .donation-contact {
        gap: 12px;
    }
    #container .col2 .inner-wrap .donation-introduce-area .text strong {
        line-height: 1.5;
        font-size: 14px;
        word-break: keep-all;
    }
    #container .col2 .inner-wrap .donation-introduce-area .icon {
        width: unset;
        height: unset;
        min-width: 72px;
        min-height: 72px;
    }
    #container .col2 .inner-wrap .donation-introduce-area .icon .feather {
        width: 36px;
        height: 36px;
    }
    #container .col2 .inner-wrap .donation-introduce-area .donation-contact {
        margin-bottom: 12px;
    }

    #container .col2 .inner-wrap .donation-introduce-area .legend {
        flex-flow: column nowrap;
        gap: 0;
    }

}

/* 1200px */
@media screen and (max-width: 1200px) {


}

/* 1100px */
@media screen and (max-width: 1100px) {

    /* ---------------------------------------
        .col1
    --------------------------------------- */
    #container .col1 .inner-wrap .info-area .title-area .title span {
        font-size: 32px;
    }
    #container .col1 .inner-wrap .info-area .title-area .title strong {
        font-size: 56px;
    }
    #container .col1 .inner-wrap .info-area .title-area p {
        font-size: 18px;
    }
    #container .col1 .inner-wrap .info-area .btn-area .btn.btn-donate,
    #container .col1 .inner-wrap .info-area .btn-area .btn-outline {
        font-size: 17px;
    }

    #container .col1 .inner-wrap .logo-80th {
        margin: 24px 0 0 0;
    }
    #container .col1 .inner-wrap .logo-80th .abbr {
        font-size: 15px;
    }

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    #container .col2 .inner-wrap {
        flex-flow: row wrap;
        align-items: stretch;
        gap: 32px 4%;
    }

    /* ===========================================================
       대한전기학회 80년사
    =========================================================== */
    #container .col2 .inner-wrap .history-area {
        flex: 1 1 38%;
        margin-bottom: 24px;
        font-size: 17px;
    }
    #container .col2 .inner-wrap .history-area .history__title {
        margin-bottom: 24px;
        font-size: 17px;
    }
    #container .col2 .inner-wrap .history-area .history__content h4 {
        font-size: 13px;
    }
    #container .col2 .inner-wrap .history-area .history__year {
        font-size: 19px;
    }
    #container .col2 .inner-wrap .history-area .history__button {
        height: 44px;
        font-size: 16px;
    }

    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor {
        flex: 1 1 58%;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header {
        padding: 0;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header h2 {
        font-size: 21px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header p {
        margin: 0;
        font-size: 13px;
    }
    #container .col2 .inner-wrap .hall-of-honor .rank {
        font-size: 16px;
    }
    #container .col2 .inner-wrap .hall-of-honor .name {
        font-size: 14px;
    }
    #container .col2 .inner-wrap .hall-of-honor .name b {
        font-size: 16px;
    }

    /* ===========================================
       회관 건립 기금 안내
    =========================================== */
    #container .col2 .inner-wrap .donation-introduce-area {
        flex-flow: row wrap;
        align-items: flex-start;
        gap: 24px 4%;
    }
    #container .col2 .inner-wrap .donation-introduce-area .donation-card {
        flex: 1 1 48%;

        width: 100%;
    }
    #container .col2 .inner-wrap .donation-introduce-area .btn-outline {
        height: 44px;
    }

}

/* 960px - 모바일 메뉴 시작 */
@media screen and (max-width: 960px) {

    /* ---------------------------------------
        .col1
    --------------------------------------- */
    #container .col1 .inner-wrap {
        justify-content: center;

        padding: 0 24px;
    }
    #container .col1 .inner-wrap .info-area .title-area .title span {
        font-size: 24px;
    }


}

/* phone ~ 768px */
@media screen and (max-width: 768px) {

    /* ---------------------------------------
        .col1
    --------------------------------------- */
    #container .col1 {
        padding: 32px 0 12px;
    }
    #container .col1 .inner-wrap .info-area .title-area .title span {
        font-size: 21px;
    }
    #container .col1 .inner-wrap .info-area .title-area .title strong {
        font-size: 32px;
    }
    #container .col1 .inner-wrap .info-area .title-area p {
        font-size: 15px;
    }

    #container .col1 .inner-wrap .info-area .btn-area {
        gap: 16px;
    }
    #container .col1 .inner-wrap .info-area .btn-area .btn.btn-donate,
    #container .col1 .inner-wrap .info-area .btn-area .btn-outline {
        padding: 8px 12px;
        font-size: 15px;
    }

    #container .col1 .inner-wrap .logo-80th {
        margin: 20px 0 0;
    }
    #container .col1 .inner-wrap .logo-80th .num {
        height: 132px;
        font-size: 160px;
    }
    #container .col1 .inner-wrap .logo-80th .year b {
        font-size: 21px;
    }
    #container .col1 .inner-wrap .logo-80th .year small {
        font-size: 15px;
    }
    #container .col1 .inner-wrap .logo-80th .abbr {
        font-size: 12px;
    }

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    #container .col2 {
        padding: 32px 0;
    }
    #container .col2 .inner-wrap {
        flex-flow: column wrap;
        align-items: flex-start;
        gap: 24px;
    }

    /* ===========================================================
       대한전기학회 80년사
    =========================================================== */
    #container .col2 .inner-wrap .history-area {
        flex: 1 1 100%;
        order: 2;

        margin: 0;
    }

    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor {
        flex: 1 1 100%;
        order: 1;
    }

    /* ===========================================
       회관 건립 기금 안내
    =========================================== */
    #container .col2 .inner-wrap .donation-introduce-area {
        flex: 1 1 100%;
        order: 3;
    }

}

/* phone ~ 640px */
@media screen and (max-width: 640px) {

    /* ---------------------------------------
        .col1
    --------------------------------------- */
    #container .col1 {
        padding: 44px 0 24px;
    }
    #container .col1 .inner-wrap {
        text-align: center;
    }
    #container .col1 .inner-wrap .info-area,
    #container .col1 .inner-wrap .info-area .title-area,
    #container .col1 .inner-wrap .info-area .title-area .title {
        justify-content: center;
        align-items: center;
    }
    #container .col1 .inner-wrap .info-area .title-area .title {
        gap: 16px;
    }
    #container .col1 .inner-wrap .info-area .title-area .title strong {
        font-size: 42px;
    }

    #container .col1 .inner-wrap .logo-80th {
        display: none;
    }

}

/* phone ~ 480px */
@media screen and (max-width: 480px) {



}

/* phone ~ 420px */
@media screen and (max-width: 420px) {

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor {
        padding: 16px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header h2 {
        font-size: 18px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header p {
        font-size: 12px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-list {
        height: 720px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-list .hall-item {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        gap: 7px;

        height: 90px;
        padding: 16px 0;
    }
    #container .col2 .inner-wrap .hall-of-honor .rank {
        flex: 0 0 24px;
    }
    #container .col2 .inner-wrap .hall-of-honor .amount {
        flex: 1 1 100%;

        padding-left: 30px;
    }

}

/* phone ~ 360px */
@media screen and (max-width: 360px) {

    /* ---------------------------------------
        .col1
    --------------------------------------- */
    #container .col1 .inner-wrap .info-area .btn-area {
        flex-flow: column nowrap;
    }

    /* ---------------------------------------
        .col2
    --------------------------------------- */
    /* ==========================================
       회관 건립 기금 명예의 전당
    ========================================== */
    #container .col2 .inner-wrap .hall-of-honor {
        padding: 16px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header h2 {
        padding: 4px 0;
        font-size: 17px;
    }
    #container .col2 .inner-wrap .hall-of-honor .hall-header p {
        display: none;
    }

}

/* phone ~ 320px */
@media screen and (max-width: 320px) {

    /* ---------------------------------------
        .col1
    --------------------------------------- */
    #container .col1 {
        padding: 32px 0 0;
    }
    #container .col1 .inner-wrap .info-area .title-area .title {
        gap: 12px;
    }
    #container .col1 .inner-wrap .info-area .title-area .title strong {
        font-size: 36px;
    }
    #container .col1 .inner-wrap .info-area {
        gap: 24px;
    }

    #container .col1 .inner-wrap .info-area .btn-area {
        flex-flow: column nowrap;
    }

}